:root{--ink:#f7f5ff;--muted:#a9afd5;--bg:#080b1c;--panel:#141936;--cyan:#61e8ff;--pink:#ff67c7;--gold:#ffd166;--good:#78f5b5;--danger:#ff6b7d;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:"Hiragino Sans","Yu Gothic UI",system-ui,sans-serif;overscroll-behavior:none}body{display:flex;justify-content:center;background:radial-gradient(circle at 50% -10%,#29306e 0,#0c1027 42%,#060817 100%)}button,select{font:inherit}.screen{display:none;min-height:100dvh;width:100%;padding:calc(24px + var(--safe-top)) 22px calc(24px + var(--safe-bottom));overflow:hidden}.screen.active{display:flex;flex-direction:column}#app{width:100%;max-width:520px;min-height:100dvh;position:relative;background:linear-gradient(180deg,rgba(16,19,44,.4),rgba(7,9,24,.2))}h1{font-size:clamp(40px,12vw,64px);letter-spacing:.08em;margin:6px 0;text-align:center;text-shadow:0 0 34px rgba(97,232,255,.25)}h2{margin:0}.eyebrow{color:var(--cyan);letter-spacing:.18em;font-size:12px;font-weight:800;text-align:center;margin-top:auto}.tagline{text-align:center;color:var(--muted);margin:6px auto 28px;line-height:1.7}.brand-orbit{height:150px;width:150px;margin:auto auto 8px;border:1px solid rgba(97,232,255,.25);border-radius:50%;position:relative;display:grid;place-items:center;box-shadow:0 0 70px rgba(97,232,255,.12),inset 0 0 36px rgba(255,103,199,.1);animation:float 4s ease-in-out infinite}.brand-orbit span{font-size:50px;font-weight:800}.brand-orbit i,.brand-orbit b{position:absolute;border-radius:50%}.brand-orbit i{width:14px;height:14px;background:var(--pink);box-shadow:0 0 18px var(--pink);animation:orbit 4s linear infinite}.brand-orbit b{font-style:normal;font-size:18px;color:var(--cyan);animation:orbit2 6s linear infinite}@keyframes orbit{from{transform:rotate(0) translateX(76px)}to{transform:rotate(360deg) translateX(76px)}}@keyframes orbit2{from{transform:rotate(360deg) translateX(58px) rotate(-360deg)}to{transform:rotate(0) translateX(58px) rotate(0)}}@keyframes float{50%{transform:translateY(-8px)}}
.card{background:linear-gradient(145deg,rgba(28,34,74,.94),rgba(16,20,48,.94));border:1px solid rgba(255,255,255,.09);border-radius:24px;padding:20px;box-shadow:0 18px 50px rgba(0,0,0,.25)}.settings-card label{display:block;font-size:12px;color:var(--muted);margin-bottom:8px}.settings-card select{width:100%;background:#0d1230;color:var(--ink);border:1px solid #353d77;border-radius:12px;padding:13px}.button-stack{display:grid;gap:10px;margin-top:18px}button{border:0;border-radius:14px;min-height:48px;color:var(--ink);font-weight:800;cursor:pointer}.primary{background:linear-gradient(100deg,#2ad4ed,#8c7dff);color:#071021;box-shadow:0 7px 26px rgba(73,214,238,.24)}.secondary{background:#252d61;border:1px solid #414c91}.ghost{background:transparent;border:1px solid #3c457b}.privacy-note{text-align:center;color:#7f86ad;font-size:11px;margin:16px 0 0}.simple-header{display:flex;align-items:center;gap:14px;margin-bottom:24px}.back-button{width:44px;min-height:44px;border-radius:50%;background:#1b2148;font-size:22px}.tutorial-stage{text-align:center;margin:auto 0 24px}.tutorial-glyph{width:132px;height:132px;margin:0 auto 24px;border-radius:36px;display:grid;place-items:center;font-size:62px;font-weight:800;background:linear-gradient(145deg,#2a3474,#151a3e);border:2px solid var(--cyan);box-shadow:0 0 34px rgba(97,232,255,.2)}.tutorial-stage p{min-height:52px;color:#d9dcf5;line-height:1.6}.step-dots{display:flex;justify-content:center;gap:8px}.step-dots i{width:8px;height:8px;border-radius:50%;background:#353c72}.step-dots i.done{background:var(--cyan);box-shadow:0 0 9px var(--cyan)}.single-pad{width:172px;height:172px;margin:0 auto;position:relative;background:radial-gradient(circle,#303a7a 0 34%,#181e4b 36% 100%);border:1px solid #5660a0;border-radius:42px;touch-action:none;user-select:none;box-shadow:0 12px 35px rgba(0,0,0,.3)}.guide{position:absolute;font-size:20px;color:#8f98c8}.guide.center{inset:0;display:grid;place-items:center;font-size:34px;color:white;font-weight:800}.guide.up{top:12px;left:77px}.guide.down{bottom:12px;left:77px}.guide.left{left:16px;top:72px}.guide.right{right:16px;top:72px}.single-pad.touching{border-color:var(--pink);transform:scale(.98)}.single-pad.success{animation:pulse .35s}.gesture-hint{text-align:center;color:var(--muted);font-size:12px}@keyframes pulse{50%{box-shadow:0 0 36px rgba(120,245,181,.8)}}
.game-screen{padding:calc(12px + var(--safe-top)) 12px calc(8px + var(--safe-bottom))}.hud{height:58px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:start;text-align:center;z-index:4}.hud div{display:flex;flex-direction:column}.hud small{color:#868eb9;font-size:9px;letter-spacing:.14em}.hud strong{font-size:21px;font-variant-numeric:tabular-nums}.hud .combo-wrap strong{color:var(--cyan)}.world{height:min(42dvh,350px);min-height:240px;position:relative;overflow:hidden;border-radius:22px;background:linear-gradient(#111943 0,#16265b 42%,#0d1230 68%,#07091a 100%);border:1px solid rgba(100,166,255,.2);perspective:420px}.stars{position:absolute;inset:0;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.5px),radial-gradient(circle,#61e8ff 0 1px,transparent 1.5px);background-size:47px 47px,73px 73px;background-position:4px 9px,21px 32px;opacity:.48}.horizon{position:absolute;left:0;right:0;top:34%;height:44%;background:repeating-linear-gradient(90deg,transparent 0 48px,rgba(97,232,255,.12) 49px 50px),repeating-linear-gradient(0deg,transparent 0 25px,rgba(97,232,255,.12) 26px 27px);transform:perspective(140px) rotateX(55deg);transform-origin:bottom}.lane{position:absolute;inset:0}.note{position:absolute;left:50%;top:0;width:76px;height:76px;margin:-38px;border-radius:22px;display:grid;place-items:center;font-size:34px;font-weight:900;color:#fff;background:linear-gradient(145deg,#745cff,#e24fa8);border:2px solid rgba(255,255,255,.8);box-shadow:0 0 22px rgba(255,103,199,.5);will-change:transform,opacity}.note.guide-note::after{content:attr(data-guide);position:absolute;bottom:-22px;font-size:16px;color:var(--cyan);text-shadow:0 0 8px #000}.note.hit{animation:resolve .32s forwards}.note.missed{filter:grayscale(.8);animation:miss .35s forwards}@keyframes resolve{to{transform:var(--position) scale(1.9) rotate(16deg);opacity:0;filter:blur(6px)}}@keyframes miss{to{transform:var(--position) scale(.7);opacity:0}}.judgement-line{position:absolute;left:8%;right:8%;bottom:12%;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 12px var(--cyan)}.judgement-line span{position:absolute;left:50%;top:-4px;width:8px;height:8px;border-radius:50%;background:white;box-shadow:0 0 14px white}.judgement{position:absolute;left:0;right:0;top:46%;text-align:center;font-size:26px;font-weight:1000;letter-spacing:.08em;text-shadow:0 2px 12px #000;z-index:3;pointer-events:none}.judgement.pop{animation:judge .42s}.judgement.perfect{color:var(--gold)}.judgement.great{color:var(--cyan)}.judgement.good{color:var(--good)}.judgement.miss{color:var(--danger)}@keyframes judge{0%{transform:scale(.6);opacity:0}35%{transform:scale(1.15);opacity:1}100%{transform:scale(1);opacity:0}}.world-growth{position:absolute;left:50%;bottom:8%;width:10px;height:10px;border-radius:50%;background:var(--cyan);box-shadow:0 0 20px var(--cyan);opacity:.1;transform:translateX(-50%) scale(1);transition:.35s}.target-strip{height:48px;margin:8px 2px;display:flex;align-items:center;justify-content:center;gap:12px;background:#111735;border-radius:14px}.target-strip span{font-size:11px;color:var(--muted)}.target-strip strong{font-size:25px}.target-strip em{font-style:normal;color:var(--cyan);font-size:12px}.flick-pad{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;touch-action:none;user-select:none}.flick-key{height:54px;min-width:0;position:relative;background:linear-gradient(145deg,#252d62,#171d47);border:1px solid #3c4788;border-radius:13px;color:#fff;font-size:20px}.flick-key.active{border-color:var(--cyan);background:#303b82;transform:scale(.96)}.flick-key.dim{opacity:.32}.flick-key small{position:absolute;right:4px;bottom:2px;color:#8f98c8;font-size:8px}.quit-button{align-self:center;background:transparent;color:#7f86ad;min-height:32px;font-size:11px;margin-top:4px}.result-score{margin:28px 0 18px;padding:24px;border-radius:28px;background:linear-gradient(145deg,#20285b,#10152f);text-align:center;position:relative}.result-score span{display:block;color:var(--muted);font-size:12px}.result-score strong{display:block;font-size:52px}.result-score em{position:absolute;right:18px;top:18px;font-size:28px;color:var(--gold);font-style:normal}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.result-grid div{background:#151a3a;border-radius:16px;padding:16px;text-align:center}.result-grid span{display:block;color:var(--muted);font-size:11px}.result-grid strong{font-size:21px}.tabs{display:flex;gap:6px}.tab{flex:1;background:#171d42;color:var(--muted);min-height:40px}.tab.active{background:#2c3676;color:white}.ranking-list{padding:0;list-style:none;counter-reset:rank;margin-top:18px}.ranking-list li{counter-increment:rank;display:grid;grid-template-columns:32px 1fr auto;align-items:center;padding:15px 12px;border-bottom:1px solid #23294f}.ranking-list li::before{content:counter(rank);color:var(--cyan);font-weight:900}.ranking-list small{color:var(--muted)}.ranking-list .empty{display:block;text-align:center;color:var(--muted);padding:40px 0}.toast{position:fixed;left:50%;bottom:calc(18px + var(--safe-bottom));transform:translate(-50%,20px);background:#f5f1ff;color:#151831;padding:11px 18px;border-radius:20px;opacity:0;pointer-events:none;transition:.25s;z-index:10;font-weight:800;font-size:13px}.toast.show{opacity:1;transform:translate(-50%,0)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-height:680px){.world{height:250px}.flick-key{height:48px}.target-strip{height:42px}.brand-orbit{height:115px;width:115px}.brand-orbit span{font-size:42px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.brand-orbit{transform:none}.note{transition:none}}