:root{--bg:#0d1126;--ink:#f3ecdf;--dim:#9aa3c7;--warn:#ff6b5e;--gold:#ffd166;--glow:#7af0c8}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);overflow:hidden;overscroll-behavior:none}body{font-family:Hiragino Maru Gothic ProN,Yu Gothic UI,Meiryo,system-ui,sans-serif;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}#app{position:relative;height:100%;max-width:520px;margin:0 auto;display:flex;flex-direction:column;padding:max(8px,env(safe-area-inset-top)) 10px max(8px,env(safe-area-inset-bottom));gap:6px}.hud-row{display:flex;gap:6px;align-items:stretch}.stat{flex:1;background:#1a2042;border-radius:10px;padding:4px 8px;display:flex;flex-direction:column;min-width:0}.stat span{font-size:10px;color:var(--dim);letter-spacing:.08em}.stat strong{font-size:20px;font-variant-numeric:tabular-nums;line-height:1.15}.sound{flex:0 0 auto;border:0;border-radius:10px;background:#1a2042;color:var(--dim);font:inherit;font-size:12px;padding:0 10px;min-height:44px}.alert{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--dim);margin-top:6px}.alert .bar{flex:1;height:8px;background:#1a2042;border-radius:99px;overflow:hidden}.alert i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffd166,#ff6b5e);border-radius:99px}#stage{position:relative;flex:1;min-height:0;border-radius:16px;overflow:hidden;touch-action:none;background:#0b0f22;cursor:pointer}#room{position:absolute;inset:0;width:100%;height:100%;display:block}#caption{position:absolute;left:0;right:0;top:44%;text-align:center;font-size:26px;font-weight:800;text-shadow:0 2px 0 #000,0 0 12px #000;pointer-events:none;padding:0 12px;line-height:1.3}#caption.danger{color:var(--warn);font-size:34px}#caption.calm{color:var(--dim);font-size:18px;font-weight:600}#pop{position:absolute;left:0;right:0;top:30%;text-align:center;font-size:30px;font-weight:900;color:var(--gold);text-shadow:0 3px 0 #6b3b00,0 0 14px #000;pointer-events:none;opacity:0}#pop.show{animation:pop 1.1s ease-out forwards}@keyframes pop{0%{opacity:0;transform:scale(.4)}15%{opacity:1;transform:scale(1.25)}30%{transform:scale(1)}80%{opacity:1}to{opacity:0;transform:translateY(-30px)}}#mode{position:absolute;left:10px;bottom:10px;font-size:13px;font-weight:700;padding:4px 10px;border-radius:99px;background:#0009;pointer-events:none}#mode.play{color:var(--glow)}#mode.thrill{color:var(--gold)}.howto{margin:0;text-align:center;font-size:13px;color:var(--dim)}.howto b{color:var(--ink)}.panel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:#070a18cc;z-index:5}.panel[hidden]{display:none}.card{width:100%;max-width:380px;background:#1a2042;border:2px solid #2d3566;border-radius:20px;padding:20px 18px;text-align:center;box-shadow:0 10px 40px #0008}.eyebrow{margin:0;font-size:11px;letter-spacing:.2em;color:var(--dim)}h1{margin:6px 0 10px;font-size:30px}h1.caught{color:var(--warn)}h1.cleared{color:var(--gold)}#panel-text{font-size:14px;line-height:1.7;margin:0 0 12px;color:#d9d3e8}.bubble{position:relative;background:#fff;color:#2a1c12;border-radius:16px;padding:12px 14px;font-weight:700;font-size:16px;line-height:1.5;margin:0 0 14px}.bubble:after{content:"";position:absolute;left:50%;top:-12px;border:8px solid transparent;border-bottom:6px solid #fff;transform:translate(-50%)}.result{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 8px}.result[hidden]{display:none}.result div{background:#11163a;border-radius:10px;padding:6px 4px;display:flex;flex-direction:column}.result span{font-size:10px;color:var(--dim)}.result strong{font-size:16px}.newbest{color:var(--gold);font-weight:900;margin:4px 0 8px;animation:blink .6s steps(2) infinite}@keyframes blink{50%{opacity:.4}}.actions{display:flex;flex-direction:column;gap:8px}.actions button{min-height:52px;border-radius:14px;border:0;font:inherit;font-size:18px;font-weight:800;background:#2d3566;color:var(--ink)}.actions button.primary{background:linear-gradient(180deg,#ffd166,#f4a33c);color:#3a2300}.actions button:disabled{opacity:.45}.note{min-height:1.2em;margin:8px 0 0;font-size:12px;color:var(--dim)}body.shake #stage{animation:shake .18s linear}@keyframes shake{25%{transform:translate(-3px,1px)}50%{transform:translate(3px,-2px)}75%{transform:translate(-2px,2px)}}@media(min-width:700px){#app{padding-top:16px;padding-bottom:16px}}#mode:empty{display:none}.panel.ended{align-items:flex-end;background:linear-gradient(180deg,#070a1800 0% 30%,#070a18dd 55%)}.result strong{font-size:15px;word-break:keep-all;overflow-wrap:anywhere;line-height:1.3}