.flick-pad{grid-template-columns:repeat(3,1fr);gap:5px;padding:0 26px}
.flick-key{height:45px;font-size:18px}
@media(max-height:680px){.world{height:205px;min-height:205px}.flick-key{height:39px}.target-strip{height:38px;margin:5px 2px}}
.timing-tunnel{position:absolute;left:9%;right:9%;z-index:1;transform:translateY(-50%);border-top:2px solid rgba(97,232,255,.7);border-bottom:2px solid rgba(97,232,255,.35);background:linear-gradient(180deg,rgba(97,232,255,.03),rgba(97,232,255,.16));clip-path:polygon(10% 0,90% 0,100% 100%,0 100%);box-shadow:inset 0 0 24px rgba(97,232,255,.08);transition:filter .08s,background .08s}
.timing-tunnel::before,.timing-tunnel::after{content:"";position:absolute;top:0;bottom:0;width:2px;background:linear-gradient(rgba(97,232,255,.25),rgba(97,232,255,.85));box-shadow:0 0 10px rgba(97,232,255,.55)}
.timing-tunnel::before{left:7%}.timing-tunnel::after{right:7%}.tunnel-label{position:absolute;top:5px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:.16em;color:rgba(166,242,255,.7);white-space:nowrap}
.perfect-gate{position:absolute;left:5%;right:5%;top:50%;height:3px;transform:translateY(-50%);background:linear-gradient(90deg,transparent,var(--gold),transparent);box-shadow:0 0 10px rgba(255,209,102,.7)}
.perfect-gate::before,.perfect-gate::after{content:"";position:absolute;top:-22px;width:3px;height:46px;background:var(--gold);box-shadow:0 0 12px rgba(255,209,102,.7)}.perfect-gate::before{left:6%}.perfect-gate::after{right:6%}.perfect-gate b{position:absolute;left:50%;top:-52px;transform:translateX(-50%);padding:2px 7px;border-radius:8px;background:rgba(7,10,30,.82);font-size:9px;color:var(--gold);letter-spacing:.15em;white-space:nowrap}.perfect-gate i{position:absolute;left:50%;top:-5px;width:11px;height:11px;transform:translateX(-50%) rotate(45deg);border:2px solid var(--gold);background:#151a3d}
.timing-tunnel.ready{background:linear-gradient(180deg,rgba(97,232,255,.11),rgba(97,232,255,.3));filter:brightness(1.25)}.timing-tunnel.just{filter:brightness(1.8);box-shadow:inset 0 0 35px rgba(255,209,102,.25)}
.timing-cue{position:absolute;left:0;right:0;bottom:3%;z-index:3;text-align:center;color:#a9afd5;font-size:11px;font-weight:800;letter-spacing:.04em;text-shadow:0 2px 8px #050713;pointer-events:none}.timing-cue.now{color:#fff;font-size:15px;text-shadow:0 0 12px var(--cyan)}
.note.in-zone{border-color:var(--cyan);box-shadow:0 0 30px rgba(97,232,255,.85)}.note.on-just{border-color:var(--gold);box-shadow:0 0 38px rgba(255,209,102,.95);filter:brightness(1.25)}
@media(prefers-reduced-motion:reduce){.timing-tunnel{transition:none}.timing-tunnel.ready,.timing-tunnel.just{filter:none}}
.title-lockup{display:grid;grid-template-columns:auto 18px auto;grid-template-rows:auto auto;align-items:center;justify-content:center;gap:0 5px;margin:4px 0 8px!important;line-height:.82;filter:drop-shadow(0 8px 24px rgba(97,232,255,.2))}.title-lockup span,.title-lockup b{font-family:Impact,"Arial Black",sans-serif;font-size:clamp(35px,10.5vw,54px);font-style:italic;letter-spacing:.025em}.title-lockup span{color:#fff;text-shadow:3px 3px 0 #36438d}.title-lockup b{color:var(--cyan);text-shadow:3px 3px 0 #6a3f95}.title-lockup>i{width:6px;height:48px;transform:skewX(-15deg) rotate(10deg);background:linear-gradient(var(--pink),var(--gold));box-shadow:0 0 14px var(--pink)}.title-lockup small{grid-column:1/4;margin-top:11px;font-size:11px;line-height:1;letter-spacing:.42em;color:#b8bee2;font-style:normal}.judgement.early{color:#c7bfff;font-size:21px}
.note.hit{animation:none!important;background:transparent!important;border-color:transparent!important;box-shadow:none!important;overflow:visible}.note.hit .shard{position:absolute;inset:0;display:grid;place-items:center;border:2px solid rgba(255,255,255,.82);border-radius:22px;background:linear-gradient(145deg,#745cff,#e24fa8);box-shadow:0 0 25px rgba(255,103,199,.55);overflow:hidden;will-change:transform,opacity}.note.hit .shard b{font:900 34px/1 "Hiragino Sans","Yu Gothic UI",sans-serif;color:#fff}.slice-streak{position:absolute;z-index:4;background:#fff;box-shadow:0 0 8px #fff,0 0 18px var(--cyan);pointer-events:none}
.slice-left .shard.a,.slice-right .shard.a{clip-path:polygon(0 0,100% 0,100% 50%,0 50%);animation:shardUp .43s ease-out forwards}.slice-left .shard.b,.slice-right .shard.b{clip-path:polygon(0 50%,100% 50%,100% 100%,0 100%);animation:shardDown .43s ease-out forwards}.slice-left .slice-streak,.slice-right .slice-streak{left:-22%;top:49%;width:144%;height:3px;transform-origin:center}.slice-left .slice-streak{animation:streakLeft .25s ease-out forwards}.slice-right .slice-streak{animation:streakRight .25s ease-out forwards}
.slice-up .shard.a,.slice-down .shard.a{clip-path:polygon(0 0,50% 0,50% 100%,0 100%);animation:shardLeft .43s ease-out forwards}.slice-up .shard.b,.slice-down .shard.b{clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%);animation:shardRight .43s ease-out forwards}.slice-up .slice-streak,.slice-down .slice-streak{left:49%;top:-22%;width:3px;height:144%}.slice-up .slice-streak{animation:streakUp .25s ease-out forwards}.slice-down .slice-streak{animation:streakDown .25s ease-out forwards}
.slice-center .shard.a{clip-path:polygon(0 0,100% 0,50% 50%);animation:shardUp .43s ease-out forwards}.slice-center .shard.b{clip-path:polygon(0 100%,100% 100%,50% 50%);animation:shardDown .43s ease-out forwards}.slice-center .slice-streak{inset:12%;border:3px solid #fff;border-radius:50%;background:transparent;animation:centerBurst .34s ease-out forwards}
@keyframes shardUp{to{transform:translateY(-34px) rotate(-9deg);opacity:0}}@keyframes shardDown{to{transform:translateY(34px) rotate(9deg);opacity:0}}@keyframes shardLeft{to{transform:translateX(-36px) rotate(-9deg);opacity:0}}@keyframes shardRight{to{transform:translateX(36px) rotate(9deg);opacity:0}}@keyframes streakLeft{from{transform:scaleX(0);opacity:1;transform-origin:right}to{transform:scaleX(1);opacity:0;transform-origin:right}}@keyframes streakRight{from{transform:scaleX(0);opacity:1;transform-origin:left}to{transform:scaleX(1);opacity:0;transform-origin:left}}@keyframes streakUp{from{transform:scaleY(0);opacity:1;transform-origin:bottom}to{transform:scaleY(1);opacity:0;transform-origin:bottom}}@keyframes streakDown{from{transform:scaleY(0);opacity:1;transform-origin:top}to{transform:scaleY(1);opacity:0;transform-origin:top}}@keyframes centerBurst{to{transform:scale(1.8);opacity:0}}
@media(prefers-reduced-motion:reduce){.note.hit .shard{animation:miss .2s forwards!important}.slice-streak{display:none}.title-lockup>i{transform:skewX(-15deg)}}
.approach-zone{position:absolute;left:13%;right:13%;z-index:1;border-top:2px dashed rgba(116,144,255,.62);border-bottom:1px solid rgba(97,232,255,.42);background:linear-gradient(180deg,rgba(74,91,180,.04),rgba(97,232,255,.12));clip-path:polygon(18% 0,82% 0,92% 100%,8% 100%);transition:filter .08s,background .08s}.approach-zone::before,.approach-zone::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:rgba(122,157,255,.55)}.approach-zone::before{left:13%}.approach-zone::after{right:13%}.approach-zone span{position:absolute;left:50%;top:4px;transform:translateX(-50%);font-size:9px;font-weight:800;letter-spacing:.1em;color:#aabaff;white-space:nowrap}.approach-zone.ready{background:linear-gradient(180deg,rgba(85,105,210,.11),rgba(97,232,255,.23));filter:brightness(1.25)}
.timing-cue.early{color:#b9c6ff}.note.in-approach{border-color:#879dff;box-shadow:0 0 20px rgba(91,126,255,.55)}
.note.strength-early .shard{filter:saturate(.72);box-shadow:0 0 13px rgba(129,145,255,.38)}.note.strength-good .shard{filter:saturate(.88)}.note.strength-perfect .shard{box-shadow:0 0 34px rgba(255,209,102,.62)}
@media(prefers-reduced-motion:reduce){.approach-zone{transition:none}.approach-zone.ready{filter:none}}
.note.guide-note::after{bottom:auto;display:grid;place-items:center;min-width:30px;height:24px;padding:0 5px;border:1px solid rgba(97,232,255,.55);border-radius:12px;background:rgba(7,10,30,.82);font-size:12px;line-height:1;white-space:nowrap}.note.guide-up::after{left:50%;top:-34px;transform:translateX(-50%)}.note.guide-right::after{left:calc(100% + 7px);top:50%;transform:translateY(-50%)}.note.guide-down::after{left:50%;top:calc(100% + 7px);transform:translateX(-50%)}.note.guide-left::after{right:calc(100% + 7px);top:50%;transform:translateY(-50%)}.note.guide-center::after{left:50%;top:50%;transform:translate(-50%,-50%);min-width:0;width:24px;height:24px;font-size:0}.note.guide-center::after{content:"●";font-size:12px;color:var(--gold);border-color:rgba(255,209,102,.8)}
.note.guide-center::after{display:none}
.world{isolation:isolate}.world::before,.world::after{content:"";position:absolute;top:8%;bottom:31%;width:42%;z-index:1;pointer-events:none;opacity:.7;background:repeating-linear-gradient(180deg,rgba(97,232,255,.12) 0 1px,transparent 1px 32px),linear-gradient(90deg,rgba(69,91,190,.22),rgba(19,30,83,.04));border-top:2px solid rgba(137,176,255,.3);filter:drop-shadow(0 0 10px rgba(97,232,255,.12))}.world::before{left:2%;clip-path:polygon(0 0,100% 0,66% 100%,0 100%);border-left:2px solid rgba(97,232,255,.35)}.world::after{right:2%;transform:scaleX(-1);clip-path:polygon(0 0,100% 0,66% 100%,0 100%);border-left:2px solid rgba(97,232,255,.35)}.lane{z-index:4}.timing-tunnel,.approach-zone{z-index:2}.timing-cue{z-index:5}.perfect-gate{z-index:3}
.brand-orbit{width:142px;height:116px;border-radius:30px;clip-path:polygon(12% 0,88% 0,100% 100%,0 100%);background:linear-gradient(145deg,rgba(97,232,255,.16),rgba(116,92,255,.2));border:2px solid rgba(97,232,255,.45);box-shadow:0 0 42px rgba(97,232,255,.2),inset 0 0 28px rgba(255,103,199,.12);animation:portalFloat 3.2s ease-in-out infinite}.brand-orbit span{font-size:54px;text-shadow:0 0 18px rgba(255,255,255,.45)}.brand-orbit b{display:none}.brand-orbit i{left:50%;top:50%;width:116%;height:4px;border-radius:2px;background:linear-gradient(90deg,transparent,#fff,var(--cyan),transparent);box-shadow:0 0 14px var(--cyan);animation:portalSlash 2.4s ease-in-out infinite}@keyframes portalFloat{50%{transform:translateY(-6px) scale(1.02)}}@keyframes portalSlash{0%,35%{transform:translate(-50%,-50%) rotate(-8deg) scaleX(0);opacity:0}55%{transform:translate(-50%,-50%) rotate(-8deg) scaleX(1);opacity:1}75%,100%{transform:translate(-50%,-50%) rotate(-8deg) scaleX(1);opacity:0}}
.world-growth{top:61%;bottom:auto;width:22px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--cyan),#fff,var(--pink));box-shadow:0 0 14px var(--cyan),0 0 30px rgba(255,103,199,.45);transform-origin:center;z-index:1}
.perfect-gate .aim-line{position:absolute;left:50%;top:-68px;width:2px;height:136px;transform:translateX(-50%);background:repeating-linear-gradient(180deg,rgba(255,255,255,.85) 0 7px,rgba(97,232,255,.18) 7px 13px);box-shadow:0 0 8px rgba(97,232,255,.65);opacity:.72;pointer-events:none}.perfect-gate i{position:absolute;left:50%;top:50%;width:76px;height:76px;transform:translate(-50%,-50%);border:2px dashed rgba(255,209,102,.95);border-radius:22px;background:rgba(255,209,102,.025);box-shadow:0 0 12px rgba(255,209,102,.45),inset 0 0 16px rgba(255,209,102,.08);pointer-events:none}.timing-tunnel.just .perfect-gate .aim-line{background:#fff4c2;box-shadow:0 0 14px rgba(255,209,102,.95);opacity:1}.timing-tunnel.just .perfect-gate i{border-style:solid;border-color:#fff4c2;box-shadow:0 0 18px rgba(255,209,102,.95),inset 0 0 22px rgba(255,209,102,.16)}
[data-difficulty="advanced"] .tunnel-label,[data-difficulty="advanced"] .approach-zone span{display:none}
[data-difficulty="advanced"] .perfect-gate{height:2px;box-shadow:0 0 14px rgba(255,209,102,.9)}
[data-difficulty="advanced"] .perfect-gate::before,[data-difficulty="advanced"] .perfect-gate::after{height:34px;top:-16px;opacity:.8}

#homeScreen,#resultScreen{overflow-y:auto}
.vowel-mode-button{display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:linear-gradient(110deg,#313c80,#713f8f);border-color:rgba(255,255,255,.2)}.vowel-mode-button span{font-weight:900}.vowel-mode-button small{font-size:10px;letter-spacing:.08em;color:#d9dcff}
.row-mode-panel{padding:10px;border:1px solid rgba(97,232,255,.18);border-radius:16px;background:rgba(9,14,42,.58)}.row-mode-panel>p{margin:0 0 8px;color:#b9c6ff;font-size:11px;font-weight:800;letter-spacing:.12em;text-align:left}.row-mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.row-mode-grid button{display:flex;align-items:center;justify-content:space-between;min-height:44px!important;padding:7px 10px;border-radius:12px;background:linear-gradient(120deg,rgba(48,60,128,.85),rgba(27,34,78,.92));border:1px solid rgba(97,232,255,.24);color:#fff}.row-mode-grid button:active{transform:scale(.98);border-color:var(--cyan)}.row-mode-grid small{color:#91a2e6;font-size:9px}.row-mode-grid strong{font-size:14px;letter-spacing:.05em}
.flick-pad.vowel-mode{display:block;padding:2px 0 0}.vowel-key{display:block;width:164px;height:112px!important;margin:0 auto;border-radius:30px;background:radial-gradient(circle,#37458e 0 25%,#1a2254 27% 100%);border:2px solid rgba(97,232,255,.68);box-shadow:0 10px 28px rgba(0,0,0,.3),inset 0 0 26px rgba(97,232,255,.08)}.vowel-key .vowel{position:absolute;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;color:#cbd2ff;font-size:18px;font-weight:900}.vowel-key .vowel-center{left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;font-size:28px;text-shadow:0 0 12px var(--cyan)}.vowel-key .vowel-up{left:50%;top:3px;transform:translateX(-50%)}.vowel-key .vowel-down{left:50%;bottom:3px;transform:translateX(-50%)}.vowel-key .vowel-left{left:12px;top:50%;transform:translateY(-50%)}.vowel-key .vowel-right{right:12px;top:50%;transform:translateY(-50%)}.vowel-key.active{box-shadow:0 0 34px rgba(97,232,255,.42),inset 0 0 28px rgba(255,103,199,.16)}
#resultTitle{line-height:1.45;text-wrap:balance}.ranking-entry{display:grid;gap:10px;margin-top:14px;padding:15px;border:1px solid rgba(97,232,255,.22);border-radius:18px;background:rgba(15,20,48,.82)}.ranking-entry[hidden]{display:none}.ranking-entry>label:first-child{font-size:11px;letter-spacing:.12em;color:var(--cyan);font-weight:900}.ranking-entry input[type="text"]{width:100%;height:46px;padding:0 13px;border:1px solid #414c91;border-radius:12px;background:#0d1230;color:#fff;font:800 16px/1 "Hiragino Sans","Yu Gothic UI",sans-serif;outline:none}.ranking-entry input[type="text"]:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(97,232,255,.13)}.remember-name{display:flex;align-items:center;gap:8px;color:#c1c6e7;font-size:12px}.remember-name input{width:19px;height:19px;accent-color:#61e8ff}.ranking-entry .primary{min-height:44px}.ranking-name{font-size:15px;color:#fff}.ranking-list small{line-height:1.7}
@media(max-height:720px){#homeScreen{padding-top:calc(12px + var(--safe-top))}.brand-orbit{width:104px;height:76px;margin-bottom:2px}.brand-orbit span{font-size:40px}.tagline{margin-bottom:14px}.settings-card{padding:15px}.button-stack{gap:7px;margin-top:12px}.button-stack button{min-height:44px}.privacy-note{margin-top:10px}.vowel-key{height:96px!important}}
/* Random BGM title shown unobtrusively beneath the HUD. */
.bgm-now{
  position:absolute;
  top:calc(52px + env(safe-area-inset-top));
  left:50%;
  z-index:12;
  max-width:72%;
  margin:0;
  overflow:hidden;
  color:#aab8f4;
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
  line-height:1.3;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
  pointer-events:none;
  transform:translateX(-50%);
}
#resultEyebrow{display:none}
#app{-webkit-user-select:none;user-select:none}
input,textarea,select{-webkit-user-select:auto;user-select:auto}
.ranking-list li.empty{counter-increment:none;grid-template-columns:1fr}
.ranking-list li.empty::before{content:none}
@media(max-height:680px){
  #resultScreen{padding-top:calc(12px + var(--safe-top));padding-bottom:calc(12px + var(--safe-bottom))}
  #resultScreen #resultTitle{font-size:24px}
  #resultScreen .result-score{margin:12px 0 10px;padding:14px}
  #resultScreen .result-score strong{font-size:42px}
  #resultScreen .result-grid{gap:7px}
  #resultScreen .result-grid div{padding:10px}
  #resultScreen .ranking-entry{gap:7px;margin-top:9px;padding:10px}
  #resultScreen .ranking-entry input[type="text"]{height:42px}
  #resultScreen .button-stack{gap:7px;margin-top:9px}
  #resultScreen .button-stack button{min-height:42px}
}