:root{--bg:#0b0b0d;--panel:#0f0f12;--surface:#1a1a20;--ink:#0b0b0d;--orange:#e8b04a;--orange-mid:#b8883a;--orange-deep:#8f6a2e;--gold:#f2c230;--cream:#fdfbc8;--paper:#fff2d8;--blue:#5b7cfa;--blue-mid:#4460cf;--blue-deep:#2f4499;--cyan:#7fd4ff;--green:#35d07f;--green-mid:#27a464;--pink:#f06bae;--pink-pale:#fbe6f1;--red:#f44a5e;--line:4px;--display:'Barlow Condensed',Impact,sans-serif;--mono:'IBM Plex Mono',monospace;--cute:'Quicksand',sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow-x:hidden}body{color:var(--cream);font-family:var(--cute);background:radial-gradient(rgba(232,176,74,.08) 1px,transparent 1.4px),var(--bg);background-size:18px 18px}.top,main,footer{width:min(920px,calc(100% - 32px));margin:0 auto}.top{padding:20px 0 5px}.kicker{display:inline-block;margin:0 0 8px;padding:4px 10px;border:3px solid var(--orange-mid);background:var(--surface);color:var(--orange);font:700 13px var(--mono);letter-spacing:.06em;transform:rotate(-1deg)}.brand{display:flex;align-items:center;gap:12px}.logo{width:64px;height:64px;flex:none}h1{font:900 clamp(44px,8vw,68px)/.9 var(--display);letter-spacing:.02em;color:var(--orange);margin:0;text-shadow:4px 4px 0 var(--blue-deep)}.lede{margin:10px 0 0;font-size:17px;font-weight:800;color:var(--paper)}.stage{margin-top:12px}.hud{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.hud-card,.mode,.frame,.panel,button,.share{border:var(--line) solid var(--ink);box-shadow:4px 4px 0 var(--orange-deep)}.hud-card{padding:8px 10px 6px;border-radius:12px;background:var(--paper);color:var(--ink)}.hud-card:nth-child(1){background:var(--orange)}.hud-card:nth-child(2){background:var(--blue);color:white}.hud-card:nth-child(3){background:var(--pink)}.hud-k{display:block;font:700 11px var(--mono);letter-spacing:.07em}.hud-card strong{font:700 clamp(27px,6vw,36px)/1 var(--mono)}.combo-card strong{display:inline-block;transition:transform .2s}.combo-card.pop strong{transform:scale(1.25)}.mode{margin:10px 0;padding:8px 12px;border-radius:10px;background:var(--green);color:var(--ink);font-weight:800;line-height:1.35}.mode.live{background:var(--red);color:#fff}.mode.practice{background:var(--orange)}.mode.wait{background:var(--blue);color:white}.frame{position:relative;width:min(480px,100%);margin:0 auto;border-radius:18px;overflow:hidden;background:var(--cream);box-shadow:6px 6px 0 var(--orange-deep)}canvas{display:block;width:100%;height:auto;touch-action:none;cursor:grab;background:var(--cream)}.screen{position:absolute;left:12px;right:12px;bottom:12px;padding:12px 14px;border:var(--line) solid var(--ink);border-radius:12px;background:rgba(253,251,200,.96);color:var(--ink);box-shadow:5px 5px 0 var(--orange-mid)}.screen h2{margin:0 0 6px;font:900 28px var(--display);text-transform:uppercase}.screen p{margin:5px 0;font-weight:800}.screen p:last-of-type{font-family:var(--mono);font-size:13px}.end-score strong,#end-best{font:700 30px var(--mono)}.burst{position:absolute;left:50%;top:30%;transform:translateX(-50%) rotate(-6deg);z-index:3;width:min(92%,340px);padding:36px 26px 30px;background:var(--gold);color:var(--ink);clip-path:polygon(50% 0,60% 16%,78% 6%,74% 24%,96% 20%,84% 36%,100% 50%,84% 60%,94% 78%,74% 72%,68% 96%,50% 80%,32% 96%,26% 72%,6% 78%,16% 60%,0 50%,16% 36%,4% 20%,26% 24%,22% 6%,40% 16%);font:900 clamp(20px,4.4vw,28px) var(--display);text-align:center;pointer-events:none}.burst small{display:block;font:700 .55em var(--cute)}.controls{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:14px}button,.share{font-family:var(--cute)}button{min-height:46px;padding:9px 16px;border-radius:10px;background:var(--orange);color:var(--ink);font-size:15px;font-weight:900;cursor:pointer}button:nth-child(2){background:var(--blue);color:white}button:nth-child(3){background:var(--green)}button:nth-child(4){background:var(--surface);color:var(--cream);border-color:var(--orange-mid)}button:disabled{cursor:not-allowed;opacity:.6}button:not(:disabled):hover{transform:translateY(-2px)}.hint{text-align:center;font-size:13px;font-weight:700;color:var(--cyan)}.power-status{width:min(480px,100%);min-height:24px;margin:10px auto 0;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;color:var(--cream);font:700 12px var(--mono)}.power-chip{padding:4px 8px;border:2px solid var(--orange);border-radius:8px;background:var(--surface)}.comic{margin:28px auto 10px}.comic h2{margin:0;color:var(--orange);font:900 clamp(32px,5vw,44px)/1 var(--display);text-transform:uppercase}.comic-note{color:var(--cyan);font-size:13px;font-weight:700}.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.panel{position:relative;min-height:170px;padding:16px 14px 14px;border-radius:12px;background:var(--paper);color:var(--ink)}.panel:nth-child(1){background:var(--cream)}.panel:nth-child(2){background:#dce4ff}.panel:nth-child(3){background:var(--pink-pale)}.panel:nth-child(4){background:#dff7e8}.panel-no{position:absolute;top:-12px;left:12px;width:34px;height:30px;border:3px solid var(--ink);border-radius:8px;background:var(--orange);font:700 12px/24px var(--mono);text-align:center}.panel h3{margin:8px 0;font:900 22px var(--display);text-transform:uppercase}.figure{margin:0;font:700 clamp(26px,4vw,36px)/1.1 var(--mono);overflow-wrap:anywhere}.caption,.note-copy{font-size:13px;font-weight:700;line-height:1.45;overflow-wrap:anywhere}footer{padding:8px 0 28px;color:#aaa;font-size:12px}
.stage-banner{position:absolute;z-index:2;top:42%;left:0;right:0;text-align:center;padding:12px 8px;background:var(--orange);color:var(--ink);font:900 38px var(--display);text-shadow:2px 2px var(--paper);animation:banner .65s ease-out both;pointer-events:none}.fever .frame{box-shadow:0 0 18px var(--pink),0 0 42px var(--blue);}.fever canvas{filter:saturate(1.5) hue-rotate(22deg)}@keyframes banner{0%{transform:scale(.35) rotate(-5deg);opacity:0}70%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}@media(max-width:640px){.top,main,footer{width:calc(100% - 32px)}.frame{width:100%;min-height:60vh}.controls{flex-wrap:nowrap;gap:5px}button{flex:1 1 0;font-size:11px;padding:8px 3px;min-height:44px}.logo{width:52px;height:52px}.grid{grid-template-columns:1fr}.screen h2{font-size:24px}.screen p{font-size:13px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}button:not(:disabled):hover{transform:none}}