:root{--ink:#f4f6ff;--dim:#e6ecffb8;--glass:#0a0e228c;--edge:#ffffff29;--accent:#ff7a1a;--target:#ff4b3e;--font:"Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", system-ui, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;color:var(--ink);font-family:var(--font);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none;background:#0b1230;margin:0;overflow:hidden}canvas#game{touch-action:none;display:block;position:fixed;inset:0}.hidden{display:none!important}#hud{pointer-events:none;padding:max(10px, env(safe-area-inset-top)) 12px 12px;position:fixed;inset:0}.hud-top{grid-template-columns:1fr auto 1fr;align-items:start;gap:8px;display:grid}.hud-time,.hud-alt{background:var(--glass);border:1px solid var(--edge);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-variant-numeric:tabular-nums;border-radius:12px;flex-direction:column;min-width:0;padding:6px 10px 8px;display:flex}.hud-alt{justify-self:end;align-items:flex-end}.hud-time{justify-self:start}.lbl{letter-spacing:.14em;color:var(--dim);font-size:10px;font-weight:700}#time{font-size:26px;font-weight:900;line-height:1.05}.hud-time.warn #time{color:#ff5a6e;animation:.5s ease-in-out infinite alternate pulse}#alt{white-space:nowrap;font-size:20px;font-weight:900;line-height:1.15}.zone{color:#ffd27a;font-size:11px;font-weight:700}.target-card{border:3px solid var(--target);box-shadow:0 0 22px color-mix(in srgb, var(--target) 60%, transparent), inset 0 0 18px color-mix(in srgb, var(--target) 25%, transparent);background:#080a1aeb;border-radius:18px;flex-direction:column;align-items:center;min-width:112px;padding:4px 16px 8px;transition:border-color .15s;display:flex;position:relative}.target-card.pop{animation:.38s cubic-bezier(.2,1.6,.4,1) pop}.target-lbl{letter-spacing:.2em;color:var(--dim);font-size:11px;font-weight:800}.target-name{color:var(--target);text-shadow:0 2px #0009;letter-spacing:.05em;margin-top:-2px;font-size:22px;font-weight:900}.next{border:1px solid var(--edge);white-space:nowrap;opacity:0;background:#080a1acc;border-radius:999px;align-items:center;gap:4px;padding:2px 8px 2px 6px;font-size:11px;font-weight:800;transition:opacity .15s;display:flex;position:absolute;bottom:-30px;left:50%;transform:translate(-50%)}.next.show{opacity:1;animation:.4s ease-in-out infinite alternate blink}.next-lbl{color:var(--dim);letter-spacing:.1em}.combo{text-shadow:0 3px #0000008c,0 0 14px #0006;opacity:0;flex-direction:column;align-items:flex-start;line-height:1;transition:opacity .2s;display:flex;position:absolute;top:40%;left:12px}.combo.show{opacity:1}#combo-n{font-variant-numeric:tabular-nums;font-size:44px;font-style:italic;font-weight:900}.combo.bump #combo-n{animation:.18s ease-out bump}.combo-lbl{letter-spacing:.2em;color:#ffd27a;font-size:11px;font-weight:900}.mult{background:var(--accent);border-radius:8px;margin-top:4px;padding:2px 8px;font-size:13px;font-weight:900}.combo.broken #combo-n{color:#ff5a6e}.gauge{width:6px;position:absolute;top:32%;bottom:6%;right:4px}.gauge-track{background:linear-gradient(#0a0f2e 0%,#3a5ad8 32%,#fff 55%,#89c2ff 75%,#6b7a99 100%);border-radius:3px;position:absolute;inset:0;box-shadow:0 0 0 1px #00000080}.gauge-tick{color:var(--dim);white-space:nowrap;text-shadow:0 1px 2px #000;font-size:9px;font-weight:700;position:absolute;right:9px;transform:translateY(50%)}.gauge-tick:after{content:"";background:#ffffffb3;width:6px;height:1px;position:absolute;top:50%;right:-9px}.gauge-marker{background:var(--accent);width:14px;height:14px;box-shadow:0 0 10px var(--accent);border:2px solid #fff;border-radius:50%;margin-bottom:-7px;margin-left:-7px;position:absolute;bottom:0;left:50%}.banner{text-align:center;letter-spacing:.04em;text-shadow:0 4px #0000008c,0 0 30px #00000080;opacity:0;font-size:clamp(28px,9vw,54px);font-style:italic;font-weight:900;position:absolute;top:30%;left:0;right:0}.banner small{letter-spacing:.2em;color:#ffd27a;font-size:.38em;font-style:normal;display:block}.banner.show{animation:1.3s ease-out forwards banner}.countdown{pointer-events:none;text-shadow:0 6px #00000080,0 0 40px #ff7a1a99;place-items:center;font-size:clamp(90px,30vw,180px);font-style:italic;font-weight:900;display:grid;position:fixed;inset:0}.countdown.tick{animation:.9s ease-out cd}.screen{background:radial-gradient(at 50% 40%,#05081959,#050819cc);place-items:center;padding:16px;display:grid;position:fixed;inset:0}.panel{text-align:center;border:1px solid var(--edge);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0a0e24c7;border-radius:24px;width:min(420px,100%);padding:26px 22px 22px;animation:.45s cubic-bezier(.2,1.2,.4,1) rise;box-shadow:0 20px 60px #00000080}.kicker{letter-spacing:.3em;color:#ffd27a;margin:0;font-size:12px;font-weight:800}h1{margin:8px 0 12px;font-size:clamp(30px,9vw,42px);font-style:italic;font-weight:900;line-height:1.1}h1 span{background:linear-gradient(90deg,#ffb04a,#ff4b3e 45%,#8a6bff);color:#0000;-webkit-background-clip:text;background-clip:text}.lead{color:var(--dim);margin:0 0 14px;font-size:14px;line-height:1.7}.lead b{color:var(--ink)}.legend{grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:18px;display:grid}.legend div{flex-direction:column;align-items:center;font-size:12px;font-weight:800;display:flex}.btn{width:100%;min-height:56px;font:inherit;letter-spacing:.1em;color:#fff;cursor:pointer;touch-action:manipulation;border:0;border-radius:16px;margin-top:10px;font-size:20px;font-weight:900;display:block}.btn.primary{background:linear-gradient(#ff9b3d,#ff5a1a);box-shadow:0 6px #a83a06,0 10px 24px #ff5a1a73}.btn.primary:active{transform:translateY(4px);box-shadow:0 2px #a83a06}.btn.ghost{border:1px solid var(--edge);min-height:46px;color:var(--dim);background:0 0;font-size:15px}.best{color:var(--dim);margin:14px 0 0;font-size:13px}.res-zone{color:#ffd27a;margin:10px 0 0;font-size:16px;font-weight:800}.res-alt{font-variant-numeric:tabular-nums;margin:0;font-size:clamp(40px,13vw,58px);font-style:italic;font-weight:900}.newrec{color:#241000;background:linear-gradient(90deg,#ffd02e,#ff7a1a);border-radius:999px;margin:2px 0 6px;padding:4px 12px;font-size:14px;font-weight:900;animation:.6s ease-in-out infinite alternate pulse;display:inline-block}.stats{grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 8px;display:grid}.stats div{background:#ffffff0f;border-radius:12px;padding:10px 4px}.stats dt{color:var(--dim);font-size:11px}.stats dd{font-variant-numeric:tabular-nums;margin:4px 0 0;font-size:17px;font-weight:900}@keyframes pop{0%{transform:scale(.6)}to{transform:scale(1)}}@keyframes bump{0%{transform:scale(1.35)}to{transform:scale(1)}}@keyframes pulse{0%{opacity:1}to{opacity:.55}}@keyframes blink{0%{opacity:1}to{opacity:.45}}@keyframes banner{0%{opacity:0;transform:scale(1.6)}15%{opacity:1;transform:scale(1)}75%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-30px)}}@keyframes cd{0%{opacity:0;transform:scale(2)}25%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}@keyframes rise{0%{opacity:0;transform:translateY(24px)scale(.96)}to{opacity:1;transform:none}}@media (width>=700px){#hud{padding:16px 20px}#time{font-size:32px}#alt{font-size:26px}.combo{left:24px}#combo-n{font-size:60px}.gauge{right:14px}}html[data-style=odyssey]{--ink:#15121f;--ink-soft:#221d33;--cream:#f2e6cf;--apricot:#e8a77a;--ochre:#e8b631;--dim:#f2e6cfb8;--edge:#f2e6cfe6;--font:"Yu Gothic UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", system-ui, sans-serif}html[data-style=odyssey],html[data-style=odyssey] body{color:var(--cream);background:#15121f}[data-style=odyssey] .hud-time,[data-style=odyssey] .hud-alt{background:var(--ink);border:2px solid var(--edge);-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:6px;padding:5px 10px 7px;box-shadow:3px 3px #0000008c}[data-style=odyssey] .lbl{color:var(--apricot);letter-spacing:.18em}[data-style=odyssey] #time,[data-style=odyssey] #alt{color:var(--cream)}[data-style=odyssey] .hud-time.warn #time{color:#f0765f;animation:.6s steps(2,jump-none) infinite ody-blink}[data-style=odyssey] .zone{color:var(--ochre);letter-spacing:.1em}[data-style=odyssey] .target-card{background:var(--ink);border:3px solid var(--cream);box-shadow:5px 5px 0 var(--target);border-radius:8px;padding-top:10px;transition:none;overflow:visible}[data-style=odyssey] .target-card:before{content:"";background:var(--target);border-bottom:2px solid var(--ink);border-radius:5px 5px 0 0;height:7px;position:absolute;top:0;left:0;right:0}[data-style=odyssey] .target-lbl{color:var(--apricot);letter-spacing:.24em}[data-style=odyssey] .target-name{color:var(--target);text-shadow:2px 2px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink);-webkit-text-stroke:0}[data-style=odyssey] .target-card.pop{animation:.28s steps(4,end) ody-pop}[data-style=odyssey] .next{background:var(--ink);border:2px solid var(--cream);border-radius:4px;animation:none}[data-style=odyssey] .next.show{animation:.5s steps(2,jump-none) infinite ody-blink}[data-style=odyssey] .next-lbl{color:var(--apricot)}[data-style=odyssey] .combo{text-shadow:none}[data-style=odyssey] #combo-n{color:var(--cream);-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;text-shadow:4px 4px 0 var(--ink)}[data-style=odyssey] .combo-lbl{color:var(--ochre);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}[data-style=odyssey] .mult{background:var(--ochre);color:var(--ink);border:2px solid var(--ink);border-radius:4px;box-shadow:2px 2px #00000080}[data-style=odyssey] .combo.broken #combo-n{color:#f0765f}[data-style=odyssey] .gauge{width:9px}[data-style=odyssey] .gauge-track{box-shadow:none;border:2px solid var(--cream);background:linear-gradient(#1c0c48 0% 7.14%,#3a2a6a 7.14% 14.29%,#2b4a9e 14.29% 21.43%,#72b3b8 21.43% 28.57%,#b8a072 28.57% 35.71%,#b48d6c 35.71% 42.86%,#92393a 42.86% 50%,#8a8498 50% 57.14%,#0a1a4a 57.14% 64.29%,#04061a 64.29% 71.43%,#143063 71.43% 78.57%,#9cc3e0 78.57% 85.71%,#4f7bb0 85.71% 92.86%,#5b4a86 92.86% 100%);border-radius:2px}[data-style=odyssey] .gauge-tick{color:var(--cream);text-shadow:1px 1px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink);right:13px}[data-style=odyssey] .gauge-tick:after{background:var(--cream);right:-9px}[data-style=odyssey] .gauge-marker{background:var(--ochre);border:3px solid var(--ink);width:14px;height:14px;box-shadow:0 0 0 2px var(--cream);border-radius:2px;margin-bottom:-7px;margin-left:-7px;transform:rotate(45deg)}[data-style=odyssey] .banner,[data-style=odyssey] .countdown{-webkit-text-stroke:7px var(--ink);paint-order:stroke fill;text-shadow:5px 5px 0 var(--ink)}[data-style=odyssey] .banner small{color:var(--apricot);-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;text-shadow:none}[data-style=odyssey] .banner.show{animation:1.3s steps(14,end) forwards ody-banner}[data-style=odyssey] .screen{background:#0e0b1ac7}[data-style=odyssey] .panel{background:var(--ink);border:3px solid var(--cream);-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:10px;animation:.3s steps(6,end) ody-rise;box-shadow:7px 7px #0009}[data-style=odyssey] .kicker,[data-style=odyssey] .res-zone{color:var(--apricot)}[data-style=odyssey] h1{letter-spacing:.02em}[data-style=odyssey] h1 span{color:var(--ochre);background:0 0;-webkit-background-clip:border-box;background-clip:border-box}[data-style=odyssey] .lead{color:var(--dim)}[data-style=odyssey] .lead b{color:var(--ochre)}[data-style=odyssey] .btn{letter-spacing:.16em;border-radius:8px}[data-style=odyssey] .btn.primary{background:var(--ochre);color:var(--ink);border:3px solid var(--ink);box-shadow:0 0 0 2px var(--cream), 0 7px 0 2px #8a5d0c}[data-style=odyssey] .btn.primary:active{box-shadow:0 0 0 2px var(--cream), 0 2px 0 2px #8a5d0c;transform:translateY(5px)}[data-style=odyssey] .btn.ghost{color:var(--cream);border:2px solid #f2e6cf80;border-radius:8px}[data-style=odyssey] .newrec{background:var(--ochre);color:var(--ink);border:2px solid var(--ink);box-shadow:0 0 0 2px var(--cream);border-radius:4px;animation:.7s steps(2,jump-none) infinite ody-blink}[data-style=odyssey] .stats div{background:0 0;border:2px solid #f2e6cf59;border-radius:6px}[data-style=odyssey] .stats dt{color:var(--apricot)}[data-style=odyssey] .best{color:var(--dim)}@keyframes ody-blink{0%{opacity:1}to{opacity:.45}}@keyframes ody-pop{0%{transform:scale(.72)}to{transform:scale(1)}}@keyframes ody-banner{0%{opacity:0;transform:scale(1.5)}12%{opacity:1;transform:scale(1)}78%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-28px)}}@keyframes ody-rise{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
