:root{
  --mint:#9be3c5; --pink:#ff7aa2; --butter:#ffe28a; --sky:#8fd3ff;
  --ink:#2b2340; --paper:#fffaf0; --berry:#e2335f;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;font-family:'Fredoka',sans-serif;color:var(--ink);background:#1d1830;user-select:none}
.mono{font-family:'DM Mono',monospace}
#scene-container{position:fixed;inset:0}
.hidden{display:none!important}
#hud{position:fixed;inset:0;pointer-events:none}
.hud-tl,.hud-tr{position:absolute;top:12px;display:flex;gap:8px;flex-wrap:wrap}
.hud-tl{left:12px}.hud-tr{right:12px;justify-content:flex-end}
.chip{background:var(--paper);border:3px solid var(--ink);border-radius:999px;padding:6px 14px;font-weight:700;box-shadow:0 4px 0 var(--ink);font-size:16px}
.chip.money{background:var(--butter)}
.btn-tab{pointer-events:auto;cursor:pointer;background:var(--mint);font-family:inherit;color:var(--ink)}
kbd{font-family:'DM Mono';font-size:11px;background:#fff;border-radius:4px;padding:1px 4px;border:1px solid #aaa}
#crosshair{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:#fff;border:2px solid var(--ink);transition:all .15s}
#crosshair.hot{width:34px;height:34px;margin:-17px;background:rgba(255,122,162,.35);border-color:var(--pink)}
#crosshair.hot::after{content:'✋';position:absolute;inset:0;display:grid;place-items:center;font-size:16px}
#hint{position:absolute;left:50%;top:calc(50% + 30px);transform:translateX(-50%);background:rgba(43,35,64,.85);color:#fff;padding:4px 12px;border-radius:10px;font-size:14px;white-space:nowrap}
#hint:empty{display:none}
#held{position:absolute;left:12px;bottom:60px;background:var(--paper);border:3px solid var(--ink);border-radius:16px;padding:8px 14px;font-weight:700;box-shadow:0 4px 0 var(--ink)}
#toasts{position:absolute;bottom:70px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;align-items:center}
.toast{background:var(--ink);color:#fff;padding:8px 16px;border-radius:14px;font-weight:500;animation:pop .3s cubic-bezier(.3,1.6,.5,1);white-space:nowrap;font-size:15px}
@keyframes pop{from{transform:scale(.4);opacity:0}}
#help{position:absolute;bottom:10px;left:12px;color:#fff;font-size:12px;opacity:.7;text-shadow:0 1px 2px #000}
#bubbles{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.bub{position:absolute;transform:translate(-50%,-100%);background:#fff;border:2px solid var(--ink);border-radius:14px;padding:4px 10px;font-size:13px;font-weight:500;max-width:200px;text-align:center;white-space:normal}
.bub.angry{background:#ffd0d8}
.bub::after{content:'';position:absolute;left:50%;bottom:-8px;margin-left:-6px;border:6px solid transparent;border-top-color:var(--ink)}
.overlay{position:fixed;inset:0;display:grid;place-items:center;background:rgba(29,24,48,.6);backdrop-filter:blur(4px);z-index:20;padding:12px}
#start{background:radial-gradient(circle at 30% 20%,#ffb3c8,transparent 50%),radial-gradient(circle at 80% 80%,#9be3c5,transparent 50%),repeating-conic-gradient(#fff6 0 25%,#0000 0 50%) 0 0/60px 60px,#ffe28a}
.card{background:var(--paper);border:4px solid var(--ink);border-radius:28px;box-shadow:0 10px 0 var(--ink);padding:22px;max-width:640px;width:100%;max-height:92vh;overflow:auto}
.start-card{text-align:center;animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
.sign{display:inline-block;background:var(--berry);color:#fff;font-weight:700;letter-spacing:4px;padding:4px 16px;border-radius:10px;transform:rotate(-3deg)}
.sign span{background:#fff;color:var(--berry);margin-left:6px;padding:0 6px;border-radius:5px}
h1{font-size:clamp(40px,9vw,72px);margin:8px 0 0;line-height:1;font-weight:700}
h2{margin:0 0 10px}
.sub{font-weight:300;font-size:17px}
.how{text-align:left;font-size:15px;line-height:1.5;background:#fff;border-radius:16px;padding:12px 12px 12px 34px;border:2px dashed var(--ink)}
button{font-family:inherit}
.big,.btn{background:var(--pink);color:#fff;border:3px solid var(--ink);border-radius:16px;font-weight:700;cursor:pointer;box-shadow:0 5px 0 var(--ink);transition:transform .1s}
.big{font-size:24px;padding:12px 28px}
.btn{font-size:15px;padding:7px 14px}
.btn.alt{background:var(--mint);color:var(--ink)}
.btn.y{background:var(--butter);color:var(--ink)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.big:hover,.btn:hover:not(:disabled){transform:translateY(-2px) rotate(-1deg)}
.big:active,.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.svcs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.svc{text-align:left;border:3px solid var(--ink);border-radius:14px;padding:8px 10px;background:#fff;cursor:pointer;display:flex;flex-direction:column;gap:2px;color:var(--ink)}
.svc span{font-size:12px;opacity:.8}
.svc.on{background:var(--mint);box-shadow:0 4px 0 var(--ink)}
.svc.city.on{background:#d8c99a}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.tabs button{border:3px solid var(--ink);background:#fff;border-radius:12px;padding:6px 12px;font-weight:700;cursor:pointer;font-size:14px}
.tabs button.on{background:var(--sky)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.pc{background:#fff;border:3px solid var(--ink);border-radius:16px;padding:10px;display:flex;flex-direction:column;gap:4px}
.pc .em{font-size:30px}
.small{font-size:13px;opacity:.75}
.row{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:8px 0;border-bottom:2px dashed #ddd}
input[type=range]{width:100%;accent-color:var(--pink)}
.fair{color:#1a9b62;font-weight:700}.meh{color:#d08a00;font-weight:700}.greedy{color:var(--berry);font-weight:700}
.items{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.item{font-size:26px;background:#fff;border:3px solid var(--ink);border-radius:14px;padding:6px 10px;cursor:pointer}
.item.done{opacity:.3;cursor:default;background:var(--mint)}
.total{font-family:'DM Mono';font-size:44px;font-weight:500;background:#1b2b22;color:#7dffb0;padding:6px 16px;border-radius:12px;text-align:right;margin:8px 0}
.denoms{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.denoms button,.keypad button{padding:10px 4px;border:3px solid var(--ink);border-radius:12px;background:var(--butter);font-weight:700;font-size:16px;cursor:pointer}
.denoms button.bill{background:var(--mint)}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bars{display:flex;align-items:flex-end;gap:6px;height:150px;border-bottom:3px solid var(--ink);padding-top:10px}
.bar{flex:1;background:var(--pink);border:2px solid var(--ink);border-radius:6px 6px 0 0;position:relative;min-height:2px}
.bar.neg{background:#888}
.bar span{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:10px;font-family:'DM Mono'}
.summary{font-size:18px;line-height:1.8}
.summary b{font-family:'DM Mono'}
.award{background:var(--butter);border:3px dashed var(--ink);border-radius:16px;padding:10px;text-align:center;margin:10px 0}
#remix{position:fixed;right:10px;bottom:8px;z-index:30;background:var(--ink);color:var(--butter);padding:4px 10px;border-radius:10px;font-size:12px;text-decoration:none;font-weight:700}
#mobile{position:fixed;inset:0;pointer-events:none}
#joy{position:absolute;left:24px;bottom:40px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.25);border:3px solid rgba(255,255,255,.6);pointer-events:auto;touch-action:none}
#joy-knob{position:absolute;left:35px;top:35px;width:50px;height:50px;border-radius:50%;background:var(--pink);border:3px solid var(--ink)}
#mbtns{position:absolute;right:16px;bottom:40px;display:flex;flex-direction:column;gap:10px}
#mbtns button{pointer-events:auto;width:70px;height:70px;border-radius:50%;border:3px solid var(--ink);background:var(--paper);font-size:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 4px 0 var(--ink);touch-action:none}
#mbtns button span{font-size:11px;font-weight:700}
#mbtns #m-grab{background:var(--mint);width:84px;height:84px}
@media (max-width:700px){#help{display:none}.chip{font-size:13px;padding:4px 10px}#remix{bottom:auto;top:56px}}