*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;background:#1d140d;color:#f7f1e3;overflow:hidden;overscroll-behavior:none}body{font-family:system-ui,-apple-system,Hiragino Sans,Yu Gothic UI,Meiryo,sans-serif;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}#app{height:100vh;height:100dvh;max-width:520px;margin:0 auto;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.hud{position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px 14px}.hud-box{flex:1;display:flex;flex-direction:column;line-height:1}.hud-box small{font-size:11px;letter-spacing:.12em;color:#c9a97c;font-weight:700}.hud-box strong{font-size:30px;font-variant-numeric:tabular-nums;font-weight:900}.hud-time{text-align:right;align-items:flex-end}body.hurry .hud-time strong{color:#ff6b4a;animation:pulse .5s infinite alternate}@keyframes pulse{to{transform:scale(1.12)}}#mute{width:44px;height:44px;border-radius:50%;border:2px solid #6b4a2c;background:#2c1f15;color:#f7f1e3;font-size:20px}#mute[aria-pressed=true]{opacity:.45;text-decoration:line-through}.timebar{position:absolute;left:12px;right:12px;bottom:4px;height:6px;border-radius:3px;background:#3a2a1c;overflow:hidden}.timebar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#e8b04a,#f6dc8c);transform-origin:left;will-change:transform}body.hurry .timebar i{background:#ff6b4a}.stage{position:relative;flex:1;min-height:0}canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.level{position:absolute;left:12px;top:4px;font-size:12px;font-weight:700;color:#c9a97c;pointer-events:none}.combo{position:absolute;left:0;right:0;top:18%;text-align:center;font-size:40px;font-weight:900;color:#fff4c2;text-shadow:0 3px 0 #a3441c,0 0 18px rgba(255,180,60,.8);pointer-events:none;opacity:0}.combo.pop{animation:combo .9s ease-out forwards}@keyframes combo{0%{opacity:1;transform:scale(1.6)}15%{transform:scale(1)}70%{opacity:1}to{opacity:0;transform:translateY(-24px)}}.combo-meter{position:absolute;left:30%;right:30%;top:4px;height:5px;border-radius:3px;background:#00000059;overflow:hidden;pointer-events:none}.combo-meter i{display:block;height:100%;width:100%;background:#ffcf4a;transform:scaleX(0);transform-origin:left}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:12px;padding:24px;text-align:center;background:#1d140dd1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}.overlay>*{flex-shrink:0}.overlay>:first-child{margin-top:auto}.overlay>:last-child{margin-bottom:auto}.overlay[hidden]{display:none}.eyebrow{font-size:12px;letter-spacing:.3em;color:#c9a97c;font-weight:700}h1{font-size:44px;line-height:1.1;font-weight:900;color:#fffaf0;text-shadow:0 4px 0 #6b4426}.howto{list-style:none;font-size:15px;line-height:1.9;color:#efe3cc}.howto b{color:#fff}.howto .gold{color:#ffd35a}.howto .blue{color:#9fd4ff}button{font:inherit;cursor:pointer;touch-action:manipulation}.overlay button{min-width:220px;min-height:56px;border-radius:28px;border:2px solid #c9a97c;background:transparent;color:#f7f1e3;font-size:18px;font-weight:800}.overlay button.primary{background:#e8b04a;border-color:#e8b04a;color:#2a1a0c;font-size:22px;box-shadow:0 5px #9a6a1f}.overlay button:active{transform:translateY(3px);box-shadow:none}.best-line{font-size:15px;color:#c9a97c}.rank{font-size:20px;font-weight:800}.final{font-size:64px;font-weight:900;line-height:1;color:#ffe38a;font-variant-numeric:tabular-nums}.new-best{color:#ff8a5c;font-weight:900;font-size:20px;animation:pulse .4s infinite alternate}.new-best[hidden]{display:none}.stats{display:grid;grid-template-columns:auto auto;gap:4px 16px;font-size:14px;color:#efe3cc}.stats dt{text-align:right;color:#c9a97c}.stats dd{text-align:left;font-weight:700}.share-msg{min-height:1.2em;font-size:13px;color:#c9a97c}body[data-mode=chill] .hud-game,body[data-mode=game] .hud-chill,body[data-mode=chill] .for-game,body[data-mode=game] .for-chill{display:none}.hud-chill{flex:1;display:flex;align-items:center;gap:12px;min-height:44px}#quit{min-width:76px;min-height:44px;border-radius:22px;border:2px solid #6b4a2c;background:#2c1f15;color:#f7f1e3;font-size:15px;font-weight:800}.sheets{font-size:13px;color:#c9a97c;font-weight:700}.sheets b{font-size:16px;color:#efe3cc;font-variant-numeric:tabular-nums}.modes{display:flex;gap:10px;width:100%;max-width:340px}.modes .mode{flex:1;min-width:0;min-height:72px;border-radius:16px;border:2px solid #6b4a2c;background:#2c1f15e6;color:#efe3cc;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 4px;box-shadow:none}.modes .mode b{font-size:19px;font-weight:900}.modes .mode small{font-size:11px;color:#c9a97c}.modes .mode[aria-pressed=true]{border-color:#e8b04a;background:#4a3218;color:#fff;box-shadow:0 0 0 3px #e8b04a59}#mode-chill{flex:1.35}#mode-chill b{font-size:22px}.overlay button.small{min-height:48px;font-size:15px;border-color:#6b4a2c;color:#c9a97c}.chill-line{position:absolute;left:16px;right:16px;top:38%;text-align:center;font-size:30px;line-height:1.35;font-weight:900;color:#fffaf0;text-shadow:0 3px 0 #6b4426,0 0 20px rgba(0,0,0,.7);pointer-events:none;opacity:0}.chill-line.show{animation:chill-line 2.6s ease-out forwards}@keyframes chill-line{0%{opacity:0;transform:translateY(14px) scale(.96)}12%{opacity:1;transform:none}75%{opacity:1}to{opacity:0;transform:translateY(-16px)}}@media(prefers-reduced-motion:reduce){.chill-line.show{animation-duration:2.2s}}body[data-phase=ready] .hud-chill{visibility:hidden}@media(max-height:500px){.hud{padding:4px 12px 8px}.hud-box strong{font-size:22px}#mute,#quit{min-height:40px}#mute{width:40px;height:40px}.overlay{gap:6px;padding:8px 16px}.eyebrow{font-size:11px}h1{font-size:26px}h1 br{display:none}.howto{font-size:13px;line-height:1.45}.modes .mode{min-height:52px;padding:4px}.modes .mode b,#mode-chill b{font-size:17px}.overlay button{min-height:48px;font-size:16px}.overlay button.primary{font-size:19px}.overlay button.small{min-height:48px}.final{font-size:40px}.rank,.new-best{font-size:17px}.stats{font-size:13px;gap:2px 14px}.best-line{font-size:13px}}
