:root{color-scheme:dark;--ink: #16151d;--panel: #fff6cf;--lime: #b8ff5c;--mint: #91f6d2;--pink: #ff6f91;--blue: #60d5ff;--orange: #ffb45c;--cream: #fffbed;--shadow: rgba(22, 21, 29, .32);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{width:100%;min-width:320px;min-height:100%;margin:0}body{overflow:hidden;background:linear-gradient(135deg,rgba(255,111,145,.16) 0 25%,transparent 25% 50%,rgba(96,213,255,.12) 50% 75%,transparent 75%) 0 0 / 38px 38px,linear-gradient(180deg,#222131,#171621 48%,#101018);color:var(--cream)}button{cursor:pointer;font:inherit}.game-shell{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;width:100vw;height:100vh;padding:14px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;padding:12px 16px;border:4px solid var(--ink);border-radius:8px;background:var(--panel);box-shadow:0 8px 0 var(--ink),0 18px 40px var(--shadow);color:var(--ink)}.eyebrow{margin:0 0 4px;color:#625d43;font-size:.72rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}h1,h2{margin:0;letter-spacing:0}h1{font-size:clamp(1.35rem,2.5vw,2.25rem);line-height:.95}h2{color:var(--ink);font-size:clamp(1.45rem,5vw,3.4rem);line-height:1}.stats-strip{display:grid;grid-template-columns:repeat(3,minmax(72px,auto));gap:8px;align-items:stretch}.stats-strip span{display:grid;place-items:center;min-height:44px;padding:6px 10px;border:3px solid var(--ink);border-radius:6px;background:var(--cream);color:var(--ink);font-size:.7rem;font-weight:900;text-align:center}.stats-strip b{display:block;color:#d44b70;font-size:clamp(1rem,2vw,1.35rem);line-height:1}.play-stage{position:relative;min-height:0;overflow:hidden;border:4px solid var(--ink);border-radius:8px;background:radial-gradient(circle at 50% 24%,rgba(184,255,92,.18),transparent 34%),linear-gradient(180deg,#91f6d21f,#ff6f911a),#0e0d17;box-shadow:0 8px 0 var(--ink),0 18px 40px var(--shadow)}#game-canvas{display:block;width:100%;height:100%}.overlay-panel{position:absolute;inset:50% auto auto 50%;z-index:5;display:none;width:min(520px,calc(100% - 28px));padding:clamp(18px,4vw,28px);transform:translate(-50%,-50%);border:4px solid var(--ink);border-radius:8px;background:var(--panel);box-shadow:0 8px 0 var(--ink),0 24px 60px var(--shadow);color:var(--ink);text-align:center}.overlay-panel.is-visible{display:block}.panel-copy,.loading-state{max-width:34rem;margin:12px auto 0;color:#4b4836;font-size:clamp(.92rem,2vw,1.05rem);line-height:1.55}.loading-state{min-height:1.4em;color:#7a3f57;font-weight:800}#start-button,#restart-button,#replay-button{min-width:148px;min-height:52px;margin-top:18px;border:4px solid var(--ink);border-radius:8px;background:var(--lime);color:var(--ink);font-size:1rem;font-weight:1000;box-shadow:0 6px 0 var(--ink);transition:transform .12s ease,box-shadow .12s ease,background .12s ease}#start-button:hover,#restart-button:hover,#replay-button:hover{background:#d7ff83}#start-button:active,#restart-button:active,#replay-button:active{transform:translateY(6px);box-shadow:0 0 0 var(--ink)}#start-button:disabled{cursor:wait;opacity:.62}.monster-face{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:12px;align-items:center;width:min(260px,72vw);height:92px;margin:0 auto 16px;padding:18px;border:4px solid var(--ink);border-radius:8px 8px 26px 26px;background:var(--mint);box-shadow:inset 0 -12px #16151d1f}.eye,.mouth{display:block;border:4px solid var(--ink);background:var(--cream)}.eye{aspect-ratio:1;border-radius:999px;box-shadow:inset 0 -8px #ff6f914d}.mouth{height:28px;border-radius:6px 6px 16px 16px;background:var(--pink)}.countdown{position:absolute;inset:50% auto auto 50%;z-index:4;min-width:160px;transform:translate(-50%,-50%) scale(.9);color:var(--cream);font-size:clamp(4rem,16vw,10rem);font-weight:1000;line-height:1;text-align:center;text-shadow:0 8px 0 var(--ink),0 0 26px rgba(184,255,92,.7);opacity:0;pointer-events:none;transition:opacity .12s ease,transform .12s ease}.countdown.is-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.finish-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0 0}.finish-stats div{min-width:0;padding:12px;border:3px solid var(--ink);border-radius:6px;background:var(--cream)}.finish-stats dt{margin:0 0 4px;color:#625d43;font-size:.7rem;font-weight:900;text-transform:uppercase}.finish-stats dd{margin:0;color:#d44b70;font-size:clamp(1.3rem,5vw,2rem);font-weight:1000;line-height:1}.finish-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}#replay-button{background:var(--mint)}.pad-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;min-height:74px}.pad{position:relative;display:grid;place-items:center;min-width:0;min-height:64px;padding:6px 4px;border:4px solid var(--ink);border-radius:8px;background:var(--cream);box-shadow:0 6px 0 var(--ink);color:var(--ink);font-weight:1000;transition:transform .1s ease,box-shadow .1s ease,background .1s ease}.pad span{display:block;font-size:clamp(1rem,3vw,1.45rem);line-height:1}.pad small{display:block;max-width:100%;overflow:hidden;color:#625d43;font-size:.58rem;line-height:1;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.pad.is-pressed,.pad.is-hit{transform:translateY(6px);box-shadow:0 0 0 var(--ink)}.pad.is-hit{background:var(--lime)}.pad.is-auto{background:#fff2a6}.pad.is-auto small{color:#7d5b00}.pad.is-empty{background:#ffd2df}@media(max-width:760px){body{overflow:auto}.game-shell{min-height:100vh;height:auto;padding:10px}.topbar{align-items:flex-start;flex-direction:column}.stats-strip{width:100%;grid-template-columns:repeat(3,minmax(0,1fr))}.play-stage{min-height:58vh}.pad-row{gap:5px}.pad{min-height:54px;border-width:3px;box-shadow:0 4px 0 var(--ink)}.pad small{display:none}}