:root{--bg: #1c1e3d;--card: #2b2e57;--card2: #383c6e;--line: #0d0e22;--fg: #ffffff;--muted: #a9accd;--accent: #ffd23a;--blue: #2f8dff;--green: #46d95a;--red: #ff5a66;--radius: 14px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{margin:0;min-height:100%;background:var(--bg);color:var(--fg);font-family:Fredoka,Jua,system-ui,sans-serif}body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}button,input{font:inherit}.screen{max-width:640px;margin:0 auto;padding:16px;min-height:100dvh;display:flex;flex-direction:column;gap:12px}.card{background:var(--card);border:3px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:0 4px 0 var(--line)}.card.soft{background:var(--card2)}h1{font-family:Jua,sans-serif;font-size:32px;margin:8px 0;text-align:center}h2{font-size:20px;margin:0 0 8px}.muted{color:var(--muted)}.row{display:flex;gap:10px;align-items:center}.grow{flex:1}.btn{min-height:56px;padding:12px 18px;border-radius:var(--radius);border:3px solid var(--line);background:var(--blue);color:#fff;font-weight:700;font-size:18px;cursor:pointer;box-shadow:0 4px 0 var(--line);transition:transform .05s;-webkit-user-select:none;user-select:none;touch-action:manipulation}.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}.btn:disabled{opacity:.45;cursor:default}.btn.accent{background:var(--accent);color:#1c1e3d}.btn.green{background:var(--green);color:#0d0e22}.btn.red{background:var(--red)}.btn.ghost{background:var(--card2)}.btn.sm{min-height:44px;font-size:15px;padding:8px 12px}.input{width:100%;min-height:56px;padding:12px 16px;border-radius:var(--radius);border:3px solid var(--line);background:#15172e;color:#fff;font-size:20px;outline:none}.input.code{text-transform:uppercase;letter-spacing:.3em;text-align:center;font-size:28px;font-family:Jua,sans-serif}.error{background:#4a1f2a;border-color:var(--red);color:#ffb3ba}.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--card2);border:2px solid var(--line);font-size:14px}.cash{font-family:Jua,sans-serif;font-size:28px;color:var(--accent)}.choices{display:grid;grid-template-columns:1fr;gap:10px}@media (min-width: 480px){.choices{grid-template-columns:1fr 1fr}}.choice{min-height:64px;text-align:left;font-size:20px;background:var(--card2)}.choice.correct{background:var(--green);color:#0d0e22}.choice.wrong{background:var(--red)}.timer{height:10px;border-radius:999px;background:#15172e;border:2px solid var(--line);overflow:hidden}.timer>div{height:100%;background:var(--accent);transition:width .25s linear}.prompt{font-size:22px;line-height:1.35;min-height:60px}.shop{display:grid;grid-template-columns:1fr 1fr;gap:10px}.shop .item{display:flex;flex-direction:column;gap:6px;padding:12px;background:var(--card2);border:3px solid var(--line);border-radius:var(--radius)}.shop .item .lv{color:var(--muted);font-size:13px}.flash{position:fixed;left:50%;top:18%;transform:translate(-50%);padding:10px 18px;border-radius:999px;font-weight:700;font-size:20px;pointer-events:none;animation:pop .9s ease-out forwards;z-index:10}.flash.up{background:var(--green);color:#0d0e22}.flash.down{background:var(--red)}@keyframes pop{0%{opacity:0;transform:translate(-50%,10px) scale(.9)}20%{opacity:1;transform:translate(-50%) scale(1.05)}to{opacity:0;transform:translate(-50%,-30px) scale(1)}}.roster{display:flex;flex-wrap:wrap;gap:8px}.roster .pill.off{opacity:.5;text-decoration:line-through}table.lb{width:100%;border-collapse:collapse}table.lb td{padding:8px 6px;border-bottom:2px solid var(--line)}table.lb td.r{text-align:right;font-family:Jua,sans-serif;color:var(--accent)}.sheet{position:fixed;left:0;right:0;bottom:0;max-height:70dvh;overflow:auto;background:var(--card);border-top:3px solid var(--line);border-radius:20px 20px 0 0;padding:14px 16px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -6px 0 var(--line);z-index:5}.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;z-index:4}.host{max-width:none;padding:24px 32px;display:grid;grid-template-columns:1.1fr 1fr;gap:20px;grid-template-rows:auto 1fr}.host .code{font-family:Jua,sans-serif;font-size:clamp(56px,10vw,128px);letter-spacing:.12em;text-align:center;color:var(--accent);line-height:1}.host .big{font-size:clamp(20px,2.4vw,32px)}.host .lbrow{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:8px 10px;border-bottom:2px solid var(--line);font-size:clamp(18px,2vw,28px)}.host .lbrow .rank{font-family:Jua,sans-serif;color:var(--muted)}.host .lbrow .score{font-family:Jua,sans-serif;color:var(--accent)}.host .lbrow.me{background:#2f8dff26;border-radius:8px}.emote-tray{display:flex;gap:6px;flex-wrap:wrap}.emote-tray .btn{min-height:44px;padding:6px 10px;font-size:22px;background:var(--card2)}.emote-float{position:fixed;right:16px;bottom:90px;display:flex;flex-direction:column;gap:4px;pointer-events:none;z-index:6}.emote-float div{background:var(--card2);border:2px solid var(--line);border-radius:999px;padding:4px 10px;font-size:16px;animation:pop 2.5s ease-out forwards}@media (max-width: 900px){.host{grid-template-columns:1fr}}.charcanvas{width:100%;overflow:hidden}.charcanvas canvas{width:100%!important}.avatars{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:10px 14px;overflow:hidden}.avatar{display:flex;flex-direction:column;align-items:center;gap:4px}.avatar .face{border-radius:50%;display:grid;place-items:center;color:#0d0e22;font-weight:700;font-size:20px;box-sizing:border-box}.avatar .lbl{font-size:12px;color:var(--muted);max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lookpicker{display:flex;flex-direction:column;gap:8px}.lookrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.lookgrid{display:flex;flex-wrap:wrap;gap:6px 18px}.swatch{width:26px;height:26px;border-radius:50%;border:2px solid #0d0e22;cursor:pointer;padding:0}.swatch.on{outline:3px solid var(--accent);outline-offset:1px}@media (min-width: 760px){.screen:not(.host){max-width:820px}.prompt{font-size:28px}.choice{font-size:24px;min-height:80px}}
