:root{--font-display: "Arial Black", "Helvetica Neue", Impact, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;--font-ui: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Segoe UI", system-ui, sans-serif;--orange: #ff8a1f;--yellow: #ffd23f;--ink: #111418;--safe-t: env(safe-area-inset-top, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px);--safe-r: env(safe-area-inset-right, 0px)}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#101317;color:#fff;font-family:var(--font-ui);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}#game{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}.hidden{display:none!important}button{font-family:var(--font-display);border:none;cursor:pointer;touch-action:manipulation}.outline{text-shadow:0 3px 0 var(--ink),0 0 2px var(--ink)}#hud{position:fixed;inset:0;pointer-events:none;z-index:10}.hud-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:calc(10px + var(--safe-t)) calc(14px + var(--safe-r)) 0 calc(14px + var(--safe-l))}.hud-score .lbl{font-family:var(--font-display);font-size:13px;letter-spacing:.18em;color:var(--yellow);text-shadow:0 2px 0 var(--ink)}#score{font-family:var(--font-display);font-style:italic;font-size:clamp(28px,6vw,46px);line-height:1;-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--ink);min-width:4ch}.hud-timer{position:absolute;left:50%;top:calc(8px + var(--safe-t));transform:translate(-50%);width:70px;height:70px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#3a3f47,#15181c 70%);border:4px solid #fff;box-shadow:0 4px 0 var(--ink),0 6px 18px #00000059}#timer{font-family:var(--font-display);font-size:32px;line-height:1}.hud-timer.warn{border-color:#ff3b3b;background:radial-gradient(circle at 35% 30%,#a8141c,#4a0508 70%)}.hud-timer.tick{animation:tick .5s ease-out}@keyframes tick{0%{transform:translate(-50%) scale(1.3)}to{transform:translate(-50%) scale(1)}}.hud-buttons{display:flex;gap:8px;pointer-events:auto}.icon-btn{width:44px;height:44px;border-radius:12px;background:#0f12168c;color:#fff;font-size:22px;line-height:1;border:2px solid rgba(255,255,255,.35);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.icon-btn:active{transform:scale(.92)}.combo{position:absolute;right:calc(14px + var(--safe-r));top:calc(66px + var(--safe-t));text-align:right;opacity:0;transform:translate(30px);transition:opacity .2s,transform .2s}.combo.show{opacity:1;transform:none}.combo.bump .combo-main{animation:bump .25s ease-out}@keyframes bump{0%{transform:scale(1.35) rotate(-4deg)}to{transform:scale(1) rotate(0)}}.combo-main{font-family:var(--font-display);font-style:italic;display:flex;align-items:baseline;justify-content:flex-end;gap:6px;transform-origin:right center;-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;text-shadow:0 3px 0 var(--ink)}#combo-count{font-size:40px;line-height:1;color:var(--yellow)}.combo-lbl{font-size:16px}#combo-mult{font-size:30px;color:#fff;background:var(--orange);padding:0 8px;border-radius:8px;-webkit-text-stroke:0;text-shadow:0 2px 0 rgba(0,0,0,.4);box-shadow:0 3px 0 var(--ink)}.combo[data-tier="3"] #combo-mult{background:#ff5a1f}.combo[data-tier="4"] #combo-mult{background:#ff2d6f}.combo[data-tier="5"] #combo-mult{background:linear-gradient(90deg,#b84dff,#ff2d95)}.combo-bar{margin-top:6px;margin-left:auto;width:150px;height:7px;border-radius:4px;background:#00000073;overflow:hidden}#combo-fill{width:100%;height:100%;background:linear-gradient(90deg,var(--yellow),var(--orange));transform-origin:left center}.hud-speed{position:absolute;left:50%;bottom:calc(14px + var(--safe-b));transform:translate(-50%);font-family:var(--font-display);font-style:italic;font-size:24px;text-shadow:0 2px 0 var(--ink);opacity:.9}.hud-speed small{font-size:12px;margin-left:3px;opacity:.8}#popups,#center-text{position:absolute;inset:0;overflow:hidden}.pop{position:absolute;font-family:var(--font-display);font-style:italic;font-size:24px;color:#fff;white-space:nowrap;-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;text-shadow:0 3px 0 var(--ink);transform:translate(-50%,-50%);animation:popRise .95s cubic-bezier(.2,.9,.3,1) forwards}.pop.big{font-size:32px;color:var(--yellow)}.pop.huge{font-size:42px;color:#ffb21f}.pop.label{font-size:30px;color:#ff4d3d;animation-duration:1.1s}.pop.label.big{font-size:40px;color:#ffcf1f;-webkit-text-stroke:2px #6a1300}.pop.boost{font-size:34px;color:#ffb000;animation-duration:.7s}@keyframes popRise{0%{transform:translate(-50%,-50%) scale(.3) rotate(var(--rot, 0deg));opacity:0}15%{transform:translate(-50%,-70%) scale(1.25) rotate(var(--rot, 0deg));opacity:1}30%{transform:translate(-50%,-80%) scale(1) rotate(var(--rot, 0deg))}to{transform:translate(-50%,-190%) scale(.95) rotate(var(--rot, 0deg));opacity:0}}.ctext{position:absolute;left:50%;top:38%;font-family:var(--font-display);font-style:italic;white-space:nowrap;text-align:center;transform:translate(-50%,-50%);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:0 6px 0 var(--ink);animation:ctext 1.1s ease-out forwards}.ctext.count{font-size:120px;color:#fff}.ctext.go{font-size:130px;color:var(--yellow)}.ctext.tier{font-size:52px;top:28%}.ctext.t2{color:var(--yellow)}.ctext.t3{color:#ff9f1c}.ctext.t4{color:#ff3d6e}.ctext.t5{color:#d38bff}.ctext.mega{font-size:56px;top:50%;color:#fff3a6;-webkit-text-stroke:3px #7a1500}.ctext.timeup{font-size:96px;color:#ff4040}@keyframes ctext{0%{transform:translate(-50%,-50%) scale(2.2);opacity:0}14%{transform:translate(-50%,-50%) scale(.92);opacity:1}24%{transform:translate(-50%,-50%) scale(1.05)}32%{transform:translate(-50%,-50%) scale(1)}78%{opacity:1}to{transform:translate(-50%,-62%) scale(1);opacity:0}}#flash{position:fixed;inset:0;pointer-events:none;opacity:0;z-index:20;mix-blend-mode:screen}#flash.fade{animation:flash .35s ease-out forwards}@keyframes flash{to{opacity:0}}#touch{position:fixed;inset:0;z-index:11;pointer-events:none}#joy-zone,#cam-zone{position:absolute;top:calc(120px + var(--safe-t));bottom:0;pointer-events:auto;touch-action:none}#joy-zone{left:0;width:50%}#cam-zone{right:0;width:50%}#joy-base{position:absolute;left:calc(96px + var(--safe-l));top:calc(100% - 120px - var(--safe-b));width:128px;height:128px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#0a0c1059,#0a0c1040 60%,#ffffff38);border:3px solid rgba(255,255,255,.7);box-shadow:0 0 0 2px #00000040;opacity:.75;transition:opacity .15s;pointer-events:none}#joy-base.active{opacity:1}#joy-knob{position:absolute;left:50%;top:50%;width:58px;height:58px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 30%,#fff,#c9ced6 45%,#6c727c);box-shadow:0 4px 10px #00000073}#jump-btn{position:absolute;right:calc(26px + var(--safe-r));bottom:calc(34px + var(--safe-b));width:104px;height:104px;border-radius:50%;pointer-events:auto;touch-action:none;font-size:20px;color:#fff;letter-spacing:.05em;background:radial-gradient(circle at 35% 30%,#ffb35c,var(--orange) 50%,#c45200);border:4px solid rgba(255,255,255,.85);box-shadow:0 6px #6b2c00,0 10px 20px #0006;text-shadow:0 2px 0 rgba(0,0,0,.35);opacity:.92}#jump-btn.pressed{transform:translateY(4px) scale(.95);box-shadow:0 2px #6b2c00}.screen{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l));background:radial-gradient(ellipse at center,#0a0c1040,#0a0c10c7)}.panel{width:min(600px,100%);max-height:100%;overflow-y:auto;touch-action:pan-y;text-align:center;padding:26px 24px;border-radius:22px;background:linear-gradient(180deg,#161a20d1,#0c0e12e6);border:2px solid rgba(255,255,255,.14);box-shadow:0 20px 60px #00000080;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.logo{margin:0;font-family:var(--font-display);font-style:italic;font-size:clamp(56px,15vw,104px);line-height:.88;letter-spacing:-.02em;display:flex;flex-direction:column;align-items:center}.logo span{background:linear-gradient(180deg,#fff,#d9dde2 38%,#7f8790 52%,#e9ecef 70%,#9aa1a9);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2px #1a1d21;filter:drop-shadow(0 5px 0 var(--orange)) drop-shadow(0 8px 0 #4b1f00)}.catch{margin:18px 0 8px;font-family:var(--font-display);font-size:clamp(18px,4.6vw,26px);color:var(--yellow);text-shadow:0 3px 0 var(--ink)}.desc{margin:0 0 18px;font-size:14px;line-height:1.7;color:#d5dbe2}.desc b{color:#fff}.big-btn{display:inline-block;min-width:220px;padding:16px 36px;font-size:30px;font-style:italic;color:#fff;border-radius:999px;background:linear-gradient(180deg,#ffb048,var(--orange) 55%,#e05a00);border:3px solid #fff;box-shadow:0 6px #7a3300,0 12px 26px #ff780059;text-shadow:0 3px 0 rgba(0,0,0,.3);animation:pulse 1.6s ease-in-out infinite}.big-btn:active{transform:translateY(4px);box-shadow:0 2px #7a3300}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.sub-btn{padding:12px 22px;font-size:15px;color:#fff;border-radius:999px;background:#ffffff1f;border:2px solid rgba(255,255,255,.4);font-family:var(--font-ui);font-weight:800}.controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px;text-align:left}.ctl{background:#ffffff0f;border-radius:14px;padding:12px 14px}body.touch .ctl.pc{display:none}body.touch .controls{grid-template-columns:1fr}.ctl h3{margin:0 0 6px;font-family:var(--font-display);font-size:14px;color:var(--yellow);letter-spacing:.08em}.ctl ul{margin:0;padding:0;list-style:none;font-size:13px;line-height:1.9;color:#e3e7ec}kbd{display:inline-block;min-width:22px;padding:0 5px;margin-right:2px;font-family:var(--font-ui);font-size:11px;font-weight:800;line-height:20px;text-align:center;color:#111;background:#e9edf1;border-radius:5px;box-shadow:0 2px #8c949c}.hint{margin:16px 0 0;font-size:12.5px;color:#c3cad2}.chip{display:inline-block;padding:1px 8px;border-radius:6px;background:#ffa02840;color:#ffc36b;font-weight:800}.result .res-title{font-family:var(--font-display);font-size:20px;letter-spacing:.3em;color:#c9d1d9}.rank{margin:4px auto 0;width:112px;height:112px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-style:italic;font-size:72px;border:5px solid #fff;box-shadow:0 6px 0 var(--ink);background:#555;animation:rankIn .6s cubic-bezier(.2,1.6,.4,1) both .2s}.rank[data-rank=S]{background:linear-gradient(135deg,#ffe14a,#ff8a1f);color:#5a2300}.rank[data-rank=A]{background:linear-gradient(135deg,#ff6b6b,#c2185b)}.rank[data-rank=B]{background:linear-gradient(135deg,#4facfe,#1e5bd8)}.rank[data-rank=C]{background:linear-gradient(135deg,#43c47a,#1f7a45)}.rank[data-rank=D]{background:linear-gradient(135deg,#8a929b,#4b5259)}@keyframes rankIn{0%{transform:scale(0) rotate(-30deg)}to{transform:scale(1) rotate(0)}}.res-score-lbl{margin-top:14px;font-family:var(--font-display);font-size:13px;letter-spacing:.2em;color:var(--yellow)}.res-score{font-family:var(--font-display);font-style:italic;font-size:clamp(46px,13vw,76px);line-height:1.05;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--ink)}.newbest{display:inline-block;margin-top:4px;padding:3px 12px;border-radius:8px;background:#ff2d6f;font-family:var(--font-display);font-size:16px;animation:pulse .8s infinite}.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 20px}.res-grid>div{background:#ffffff12;border-radius:14px;padding:10px 6px;display:flex;flex-direction:column;gap:2px}.res-grid .k{font-size:12px;color:#b9c2cb;font-weight:700}.res-grid .v{font-family:var(--font-display);font-size:26px}.res-buttons{display:flex;flex-direction:column;align-items:center;gap:12px}.res-hint{margin-top:12px;font-size:12px;color:#9aa4ae}#loading{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#101317;transition:opacity .5s}#loading.done{opacity:0;pointer-events:none}.ld-logo{font-family:var(--font-display);font-style:italic;font-size:40px;color:#dfe3e8;text-shadow:0 4px 0 var(--orange)}.ld-text{font-size:13px;letter-spacing:.2em;color:#9aa4ae;text-align:center;padding:0 20px;animation:pulse 1.2s infinite}@media(max-width:600px){.panel{padding:20px 16px}.controls{grid-template-columns:1fr}.ctext.count,.ctext.go{font-size:96px}.ctext.tier{font-size:40px}.ctext.mega{font-size:38px}.ctext.timeup{font-size:64px}.hud-timer{width:60px;height:60px}#timer{font-size:27px}.combo{top:calc(110px + var(--safe-t))}#combo-count{font-size:32px}#combo-mult{font-size:24px}.pop{font-size:20px}.pop.big{font-size:26px}.pop.huge{font-size:34px}.pop.label{font-size:24px}.pop.label.big{font-size:30px}.hud-speed{bottom:calc(150px + var(--safe-b));font-size:18px}}@media(max-height:520px){.panel{padding:14px 18px}.logo{font-size:52px;flex-direction:row;gap:.25em}.catch{margin:8px 0 4px}.desc{margin-bottom:10px;font-size:12.5px}.big-btn{padding:10px 30px;font-size:24px}.controls{margin-top:12px}.ctl ul{line-height:1.6}.hint{display:none}.rank{width:80px;height:80px;font-size:50px}.res-grid{margin:10px 0 12px}.ctext.count,.ctext.go{font-size:80px}}
