:root{--paper:#fffaf2;--ink:#3b2f2a;--ink-soft:#7a6a60;--accent:#e07a5f;--shadow:0 2px 0 #3b2f2a2e, 0 6px 18px #3b2f2a1f;--radius:14px;color:var(--ink);font-family:ui-rounded,Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}html,body{background:#d9c4a8;height:100%;margin:0;overflow:hidden}canvas#c{touch-action:none;outline:none;display:block;position:fixed;inset:0}#hud{pointer-events:none;align-items:center;gap:10px;display:flex;position:fixed;top:12px;left:12px;right:12px}.pill{pointer-events:auto;background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);font-variant-numeric:tabular-nums;white-space:nowrap;padding:8px 14px;font-size:15px;font-weight:700}.cash{color:#2f7a4f}.speeds{gap:4px;margin-left:auto;padding:5px;display:flex}.speeds button{font:inherit;color:var(--ink-soft);cursor:pointer;background:0 0;border:0;border-radius:10px;place-items:center;min-width:38px;padding:5px 9px;display:grid}.speeds button:hover{background:#f3e8d8}.speeds button.on{background:var(--accent);color:#fff}.speeds button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#help{background:var(--paper);box-shadow:var(--shadow);color:var(--ink-soft);pointer-events:none;z-index:4;border-radius:12px;max-width:min(720px,100vw - 24px);margin:0;padding:8px 12px;font-size:12px;line-height:1.7;position:fixed;top:62px;left:50%;transform:translate(-50%)}#help[hidden]{display:none}#dock{pointer-events:none;flex-direction:column;align-items:center;gap:8px;max-width:calc(100vw - 24px);display:flex;position:fixed;bottom:12px;left:50%;transform:translate(-50%)}#dock>*{pointer-events:auto}#build .tabs{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);gap:4px;padding:5px;display:flex}#build button,#tray .card,#selection button{font:inherit;cursor:pointer;color:var(--ink);background:0 0;border:0;border-radius:10px}#build button{padding:8px 16px;font-size:14px;font-weight:700}#build button:hover,#tray .card:hover,#selection button:hover{background:#f3e8d8}#build button.on{background:var(--accent);color:#fff}#tray{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);flex-wrap:wrap;justify-content:center;gap:6px;max-width:min(1000px,100vw - 24px);padding:6px;display:flex}#tray[hidden]{display:none}#tray .card{text-align:left;flex-direction:column;align-items:flex-start;padding:5px 10px;display:flex}#tray .card b{font-size:13px}#tray .card span{color:var(--ink-soft);font-size:11px}#tray .card.on{background:var(--accent);color:#fff}#tray .card.on span{color:#fff}#tray .hint{text-align:center;color:var(--ink-soft);flex-basis:100%;margin:2px 0 0;font-size:11px}#build button:focus-visible,#tray .card:focus-visible,#selection button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#selection{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);min-width:220px;padding:10px 12px;position:fixed;top:62px;right:12px}#selection h2{margin:0 0 8px;font-size:15px}#selection .actions{flex-direction:column;gap:2px;display:flex}#selection button{text-align:left;justify-content:space-between;gap:12px;padding:6px 8px;font-size:13px;display:flex}#selection button.sell{color:#b5452f}kbd{color:var(--ink-soft);background:#f3e8d8;border-radius:5px;padding:1px 5px;font:11px ui-monospace,Consolas,monospace}#toasts{pointer-events:none;z-index:5;flex-direction:column;align-items:center;gap:6px;display:flex;position:fixed;top:64px;left:50%;transform:translate(-50%)}.toast{background:var(--ink);color:#fff;box-shadow:var(--shadow);border-radius:10px;padding:7px 14px;font-size:13px;transition:opacity .4s,transform .4s}.toast.bad{background:#b5452f}.toast.out{opacity:0;transform:translateY(-6px)}#help b{color:var(--ink)}#fps{color:#fff;background:#0000008c;border-radius:10px;padding:6px 10px;font:12px ui-monospace,Consolas,monospace;position:fixed;bottom:12px;right:12px}body.gallery{grid-template-columns:220px 1fr;display:grid}body.gallery canvas#c{width:100%;height:100%;position:absolute;inset:0}#side{background:var(--paper);box-shadow:var(--shadow);z-index:1;height:100vh;padding:14px 10px;overflow-y:auto}#side h1{margin:4px 6px 12px;font-size:18px}#side h3{text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin:14px 6px 4px;font-size:11px}#side button{text-align:left;width:100%;font:inherit;color:var(--ink);cursor:pointer;background:0 0;border:0;border-radius:10px;padding:6px 10px;font-size:14px;display:block}#side button:hover{background:#f3e8d8}#side button.on{background:var(--accent);color:#fff}#side button.all{font-weight:700}#side button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}#stage{height:100vh;position:relative;overflow:hidden}#info{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);max-width:360px;color:var(--ink-soft);padding:10px 14px;font-size:13px;position:absolute;top:12px;left:12px}#info h2{color:var(--ink);margin:0 0 4px;font-size:17px}#info p{margin:2px 0}#tools{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);flex-wrap:wrap;align-items:center;gap:12px;padding:8px 12px;font-size:13px;display:flex;position:absolute;top:12px;right:12px}#tools label{cursor:pointer;align-items:center;gap:6px;display:flex}#tools input[type=range]{width:110px;accent-color:var(--accent)}#tools input[type=checkbox]{accent-color:var(--accent)}#hint{color:var(--ink-soft);background:#fffaf2d9;border-radius:10px;margin:0;padding:6px 10px;font-size:12px;position:absolute;bottom:12px;left:12px}@media (max-width:700px){body.gallery{grid-template-rows:auto 1fr;grid-template-columns:1fr}#side{height:auto;max-height:30vh}#stage{height:70vh}}.pill.toggle{font:inherit;cursor:pointer;color:var(--ink);border:0;align-items:center;gap:8px;font-size:14px;font-weight:700;display:flex}.pill.toggle.on{background:var(--accent);color:#fff}.pill.toggle.on kbd{color:#fff;background:#ffffff40}.side{background:var(--paper);border-radius:var(--radius);width:330px;max-width:calc(100vw - 24px);box-shadow:var(--shadow);padding:4px 14px 12px;font-size:13px;position:fixed;top:62px;bottom:76px;left:12px;overflow-y:auto}.side[hidden]{display:none}.side h2{justify-content:space-between;align-items:baseline;margin:12px 0 6px;font-size:14px;display:flex}.side .list{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.side .product{background:#f8f0e3;border-radius:10px;padding:7px 9px}.side .row{justify-content:space-between;align-items:center;gap:8px;display:flex}.side .muted{color:var(--ink-soft)}.side .small{font-size:11.5px}.side .warn{color:#b5452f}.side .warn:empty{display:none}.side .ctrl{gap:3px;display:flex}.side button{font:inherit;color:var(--ink);cursor:pointer;background:#efe2cd;border:0;border-radius:8px;padding:4px 8px;font-size:12px}.side button:hover{background:#e6d3b5}.side button:disabled{opacity:.5;cursor:default}.side button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.side button.wide{width:100%;margin-top:8px;padding:7px;font-weight:700}.side .queue{font-size:12px}#selection .contents{color:var(--ink-soft);margin:-2px 0 8px;font-size:12px}.pill.rating{color:#b7791f}.side .bar{background:#efe2cd;border-radius:4px;height:8px;margin:2px 0 6px;overflow:hidden}.side .bar span{background:linear-gradient(90deg,#e0604f,#f0c25e 50%,#5fbf7f);border-radius:4px;height:100%;transition:width .4s;display:block}.side .stats li{padding:1px 0}.cash.neg,.side b.neg{color:#b5452f}.side .total{border-top:1px solid #ecdcc4;margin-top:3px;padding-top:4px;font-weight:700}.side .goal{background:#f8f0e3;border-radius:10px;padding:7px 9px}.side .goal.done{opacity:.55}.side .goal .bar{height:6px;margin:4px 0}.side .goal .bar span{background:var(--accent)}.side .person span{flex:1}.side button.mini{color:#b5452f;background:0 0;padding:2px 7px;font-size:11px}.side button.mini:hover{background:#f6e1da}.side .locked{opacity:.6}#tray .card.locked{opacity:.55}#tray .card.locked span{color:#b5452f}@media (min-width:760px){body:has(.side:not([hidden])) #dock{max-width:calc(100vw - 366px);left:calc(50% + 171px)}}#fx{pointer-events:none;z-index:3;position:fixed;inset:0;overflow:hidden}#fx .float{white-space:nowrap;will-change:transform, opacity;font-size:15px;font-weight:800;position:absolute;top:0;left:0}#fx .float.coin{color:#b7791f;text-shadow:0 1px #fff8e0,0 2px 6px #3b2f2a40}#soundBtn{justify-content:center;min-width:44px}.menu{z-index:10;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#3b2f2a61;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.menu[hidden]{display:none}.menu .card{background:var(--paper);border-radius:18px;flex-direction:column;gap:8px;width:min(440px,100%);max-height:calc(100vh - 32px);padding:22px 22px 18px;display:flex;overflow-y:auto;box-shadow:0 10px 40px #3b2f2a59}.menu h1.logo{text-align:center;letter-spacing:-1px;color:var(--accent);text-shadow:0 3px #f3d9c8;margin:4px 0 0;font-size:46px}.menu .tagline{text-align:center;color:var(--ink-soft);margin:0 0 10px}.menu h2{margin:0 0 6px;font-size:20px}.menu p{margin:0 0 4px;font-size:14px}.menu .muted{color:var(--ink-soft)}.menu button{font:inherit;cursor:pointer;color:var(--ink);text-align:left;background:#f3e8d8;border:0;border-radius:12px;flex-direction:column;gap:2px;padding:11px 14px;font-size:15px;font-weight:700;display:flex}.menu button:hover{background:#ecdcc4}.menu button.primary{background:var(--accent);color:#fff}.menu button.primary:hover{background:#d66a50}.menu button.empty{opacity:.6}.menu button small{opacity:.85;font-size:12px;font-weight:400}.menu button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.menu .opt{align-items:center;gap:10px;padding:6px 2px;font-size:14px;display:flex}.menu .opt input[type=range]{accent-color:var(--accent);flex:1}.menu .opt input[type=checkbox]{accent-color:var(--accent);width:18px;height:18px}.menu .keys{margin:0 0 6px;padding-left:18px;font-size:13.5px;line-height:1.7}#menuBtn{justify-content:center;min-width:44px;font-size:16px}#tuto{z-index:6;background:var(--paper);border:2px solid var(--accent);border-radius:16px;width:min(340px,100vw - 24px);padding:12px 14px;font-size:14px;position:fixed;bottom:76px;right:12px;box-shadow:0 8px 30px #3b2f2a4d}#tuto[hidden]{display:none}#tuto p{margin:0 0 8px;line-height:1.45}#tuto .step{text-transform:uppercase;letter-spacing:.06em;color:var(--accent);margin-bottom:4px;font-size:11px;font-weight:700}#tuto .row{justify-content:space-between;gap:8px;display:flex}#tuto button{font:inherit;cursor:pointer;border:0;border-radius:10px;padding:7px 12px;font-size:13px;font-weight:700}#tuto button.primary{background:var(--accent);color:#fff}#tuto button.ghost{color:var(--ink-soft);background:0 0}.tut-hl{outline:3px solid var(--accent);outline-offset:3px;animation:1.2s ease-in-out infinite tut-pulse}@keyframes tut-pulse{50%{outline-color:#e5775c40}}@media (prefers-reduced-motion:reduce){.tut-hl{animation:none}}
