*{box-sizing:border-box}html,body{margin:0;background:#0a0b10;color:#f7f7fb;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}button,select,input{font:inherit}button{cursor:pointer}.screen{display:none;min-height:100vh}.screen.active{display:block}.menu-wrap{max-width:960px;margin:0 auto;padding:72px 24px}.eyebrow{font-size:12px;letter-spacing:.26em;color:#9ba1b4}.menu-wrap h1,.editor-header h1{font-size:clamp(32px,6vw,72px);margin:8px 0 36px}.song-card{display:grid;grid-template-columns:minmax(260px,1fr) minmax(280px,1fr);gap:34px;align-items:center}.cover-wrap{aspect-ratio:1;border-radius:24px;overflow:hidden;background:#181a23}.cover-wrap img{width:100%;height:100%;object-fit:cover}.song-meta{display:grid;gap:18px}.song-meta label,.editor-controls label{display:grid;gap:8px;color:#bfc4d2;font-size:13px}select,input[type=number]{background:#151720;border:1px solid #2b2f3d;color:#fff;padding:13px 14px;border-radius:12px}.primary,.secondary,.secondary-link,.import-label{border-radius:14px;padding:14px 18px;border:0;text-decoration:none;text-align:center;display:inline-block}.primary{background:#fff;color:#0b0c10;font-weight:800}.secondary,.secondary-link,.import-label{background:#171923;color:#e8e9ef;border:1px solid #2b2f3b}.hint{color:#848a9b;font-size:13px;line-height:1.5}.hud{height:72px;display:flex;gap:36px;align-items:center;padding:0 26px;border-bottom:1px solid #1d202a}.hud div{display:grid}.hud .label{font-size:10px;color:#858b9d;letter-spacing:.16em}.hud strong{font-size:20px}.game-layout{display:grid;grid-template-columns:minmax(320px,44%) 1fr;gap:18px;padding:18px}.play-panel{position:relative;min-height:680px;background:#11131a;border-radius:22px;overflow:hidden}.lanes{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);outline:none}.lane{position:relative;border-right:1px solid rgba(255,255,255,.06);overflow:hidden}.lane:last-child{border-right:0}.lane::after{content:"";position:absolute;left:8%;right:8%;bottom:36px;height:14px;border-radius:999px;background:rgba(255,255,255,.08);transition:.08s}.lane.active::after{transform:scaleY(1.8);filter:brightness(1.9)}.lane-0{--lane:#2fd8ff}.lane-1{--lane:#b967ff}.lane-2{--lane:#ff5cb8}.lane-3{--lane:#ffd84a}.lane.active{background:linear-gradient(to top,color-mix(in srgb,var(--lane) 18%,transparent),transparent 38%)}.key-label{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);font-weight:900;color:var(--lane)}.judge-line{position:absolute;left:0;right:0;bottom:74px;height:3px;background:#fff;box-shadow:0 0 16px rgba(255,255,255,.65)}.note{position:absolute;left:12%;right:12%;height:18px;border-radius:9px;background:var(--lane);box-shadow:0 0 18px color-mix(in srgb,var(--lane) 72%,transparent)}.hit-burst{position:absolute;left:50%;bottom:64px;width:24px;height:24px;border-radius:50%;transform:translateX(-50%);background:var(--lane);box-shadow:0 0 18px 10px color-mix(in srgb,var(--lane) 50%,transparent);animation:burst .28s ease-out forwards;pointer-events:none}@keyframes burst{from{opacity:1;transform:translateX(-50%) scale(.5)}to{opacity:0;transform:translateX(-50%) scale(3.2)}}.judgement{position:absolute;z-index:8;left:50%;top:46%;transform:translate(-50%,-50%);font-size:34px;font-weight:900;text-shadow:0 2px 14px #000;pointer-events:none}.judgement.pop{animation:judgement .22s ease-out}@keyframes judgement{from{transform:translate(-50%,-50%) scale(.7);opacity:.3}to{transform:translate(-50%,-50%) scale(1);opacity:1}}.countdown{position:absolute;z-index:10;inset:0;display:grid;place-items:center;font-size:92px;font-weight:900;pointer-events:none}.video-panel{background:#11131a;border-radius:22px;padding:18px;min-width:0}.video-frame{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#05060a}.video-frame video{width:100%;height:100%;object-fit:cover;display:block}.video-fallback{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:10px;text-align:center;background:radial-gradient(circle at 50% 45%,#1f2433,#08090e 65%)}.video-fallback .orb{width:110px;height:110px;border-radius:50%;background:conic-gradient(#2fd8ff,#b967ff,#ff5cb8,#ffd84a,#2fd8ff);filter:blur(.5px);animation:spin 6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.video-fallback p{font-weight:900;margin:6px 0 0}.video-fallback span{color:#828898;font-size:12px}.video-panel h2{margin:18px 2px 4px}.video-panel p{margin:0;color:#969bad}.quit{position:fixed;right:22px;bottom:18px;border:1px solid #333743;background:#12141b;color:#c7cbd6;border-radius:12px;padding:10px 14px}.result-card{max-width:640px;margin:0 auto;padding:70px 24px}.result-card h1{font-size:110px;margin:6px 0 20px}.result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:24px}.result-grid div{padding:18px;background:#14161e;border-radius:14px;display:flex;justify-content:space-between}.result-grid span{color:#8f95a5}.result-card button{width:100%;margin-top:10px}.editor-page{max-width:1100px;margin:auto;padding:36px 22px 70px}.editor-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.editor-controls{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:12px;padding:18px;background:#11131a;border-radius:18px}.editor-controls input[type=file]{padding:10px;background:#171923;border:1px solid #2b2f3b;border-radius:10px;color:#aaa}.transport{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}.timeline-box{background:#11131a;border-radius:18px;padding:18px}.time-row{display:grid;grid-template-columns:70px 1fr 70px;gap:12px;align-items:center}.editor-lanes{height:290px;display:grid;grid-template-columns:repeat(4,1fr);margin-top:16px;border:1px solid #252937;border-radius:14px;overflow:hidden;position:relative}.editor-lane{position:relative;border-right:1px solid #252937;background:linear-gradient(#151820,#0c0e14)}.editor-lane:last-child{border-right:0}.editor-lane b{position:absolute;top:8px;left:10px;color:#8d93a3}.editor-note{position:absolute;height:7px;left:8%;right:8%;border-radius:4px;background:#fff;cursor:pointer}.note-table-wrap{margin-top:18px}.editor-stats{display:flex;justify-content:space-between;color:#9298a8;margin-bottom:8px}.note-table{width:100%;border-collapse:collapse;background:#11131a;border-radius:14px;overflow:hidden}.note-table th,.note-table td{text-align:left;padding:12px;border-bottom:1px solid #222632}.note-table th{font-size:11px;color:#8f95a5}.note-table button{background:#20232d;color:#eee;border:0;border-radius:8px;padding:6px 10px}@media(max-width:820px){.song-card{grid-template-columns:1fr}.game-layout{grid-template-columns:1fr;padding:10px}.video-panel{order:-1}.video-frame{aspect-ratio:16/8}.play-panel{min-height:560px}.editor-controls{grid-template-columns:1fr 1fr}.hud{gap:18px;justify-content:space-between}.hud strong{font-size:16px}}@media(max-width:480px){.menu-wrap{padding:36px 16px}.game-layout{gap:10px}.play-panel{min-height:520px}.video-panel{padding:10px}.video-panel h2{font-size:16px}.judgement{font-size:26px}.editor-controls{grid-template-columns:1fr}.result-grid{grid-template-columns:1fr}.quit{position:absolute;top:8px;right:8px;bottom:auto}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== V2.2 ===== */
.video-frame{aspect-ratio:1/1;background:#05060a}
.video-frame video{object-fit:contain;background:#05060a}

.lane{touch-action:none}
.key-label{
  bottom:8px;width:78%;height:52px;display:flex;align-items:center;justify-content:center;
  border:2px solid color-mix(in srgb,var(--lane) 72%,#fff 10%);
  background:color-mix(in srgb,var(--lane) 13%,#0b0d12);
  border-radius:14px;user-select:none;-webkit-user-select:none;touch-action:none;
}
.key-label.pad-active{
  background:color-mix(in srgb,var(--lane) 58%,#10131a);
  box-shadow:0 0 22px color-mix(in srgb,var(--lane) 75%,transparent);
  transform:translateX(-50%) scale(.96)
}
.lane.hold-active{
  background:linear-gradient(to top,color-mix(in srgb,var(--lane) 25%,transparent),transparent 68%)
}
.lane.hold-active::before{
  content:"";position:absolute;left:22%;right:22%;bottom:76px;top:0;
  background:linear-gradient(to top,color-mix(in srgb,var(--lane) 28%,transparent),transparent 82%);
  animation:holdPulse .55s ease-in-out infinite alternate;pointer-events:none
}
@keyframes holdPulse{from{opacity:.45}to{opacity:1}}
.hold-spark{
  position:absolute;width:5px;height:5px;border-radius:50%;background:var(--lane);
  bottom:80px;animation:holdSpark .7s linear forwards;pointer-events:none
}
@keyframes holdSpark{from{opacity:.9;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-90px) scale(.3)}}

.note.hold-note{height:auto;border-radius:9px 9px 5px 5px;min-height:18px;opacity:.92}
.note.hold-note::after{
  content:"";position:absolute;left:15%;right:15%;top:8px;bottom:8px;
  background:rgba(255,255,255,.22);border-radius:999px
}
.note.holding{filter:brightness(1.5);box-shadow:0 0 28px color-mix(in srgb,var(--lane) 88%,transparent)}

.play-combo{
  position:absolute;z-index:9;left:50%;top:56%;transform:translate(-50%,-50%);
  text-align:center;pointer-events:none;opacity:0
}
.play-combo.visible{opacity:1}
.play-combo .combo-number{font-size:52px;line-height:.9;font-weight:950;text-shadow:0 3px 16px #000}
.play-combo .combo-word{font-size:12px;font-weight:800;letter-spacing:.24em;color:#d5d8e1;margin-top:7px}
.play-combo.pop{animation:comboPop .18s ease-out}
@keyframes comboPop{from{transform:translate(-50%,-50%) scale(.78)}to{transform:translate(-50%,-50%) scale(1)}}

.celebration{
  position:absolute;z-index:20;inset:0;display:none;place-items:center;pointer-events:none;overflow:hidden
}
.celebration.show{display:grid;animation:celebrateFade 1.15s ease-out forwards}
.celebration::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 10% 50%,rgba(47,216,255,.34),transparent 32%),
    radial-gradient(circle at 90% 50%,rgba(255,216,74,.32),transparent 32%),
    radial-gradient(circle at 50% 10%,rgba(185,103,255,.30),transparent 35%),
    radial-gradient(circle at 50% 90%,rgba(255,92,184,.28),transparent 35%);
  animation:celebratePulse .75s ease-out
}
.celebration-content{position:relative;text-align:center;text-shadow:0 4px 22px #000}
.celebration-count{font-size:clamp(44px,7vw,86px);font-weight:950}
.celebration-message{font-size:clamp(20px,3vw,36px);font-weight:900;letter-spacing:.04em}
@keyframes celebratePulse{from{opacity:0;transform:scale(.75)}35%{opacity:1}to{opacity:0;transform:scale(1.15)}}
@keyframes celebrateFade{0%{opacity:0}12%,70%{opacity:1}100%{opacity:0}}

.editor-hold-preview{position:absolute;left:8%;right:8%;border-radius:5px;background:#fff;cursor:pointer;min-height:7px}
.note-type{font-size:11px;color:#9ca3af}
.duration-input{width:90px;padding:7px!important}
@media(max-width:820px){
  .video-frame{max-width:430px;margin:0 auto}
  .key-label{height:60px;width:88%;font-size:18px}
}

/* ===== V2.2.1 VIEWPORT FIT FIX ===== */
#gameScreen{
  height:100vh;
  min-height:0;
  overflow:hidden;
}
.hud{
  height:58px;
  min-height:58px;
  padding:0 18px;
}
.game-layout{
  height:calc(100vh - 58px);
  min-height:0;
  grid-template-columns:minmax(300px,44%) minmax(0,1fr);
  align-items:stretch;
  padding:10px;
  gap:10px;
  overflow:hidden;
}
.play-panel{
  min-height:0;
  height:100%;
  border-radius:16px;
}
.video-panel{
  min-height:0;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  padding:12px;
  overflow:hidden;
}
.video-frame{
  width:min(100%, calc(100vh - 150px));
  max-width:100%;
  max-height:calc(100vh - 150px);
  aspect-ratio:1/1;
  flex:0 1 auto;
}
.video-frame video{
  width:100%;
  height:100%;
  object-fit:contain;
}
.video-panel h2{
  margin:10px 0 2px;
  font-size:clamp(15px,1.5vw,22px);
  line-height:1.1;
  text-align:center;
}
.video-panel p{
  font-size:12px;
}
.lanes{
  height:100%;
}
.judge-line{
  bottom:65px;
  height:18px;
  border-radius:9px;
  background:rgba(255,255,255,.28);
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 0 16px rgba(255,255,255,.45);
}
.key-label{
  bottom:8px;
  height:48px;
}
.play-combo{
  top:54%;
}
.judgement{
  top:44%;
}
.quit{
  position:absolute;
  right:12px;
  bottom:10px;
  z-index:30;
}
@media(max-width:820px){
  #gameScreen{
    height:auto;
    min-height:100vh;
    overflow:visible;
  }
  .game-layout{
    height:auto;
    min-height:calc(100vh - 58px);
    grid-template-columns:1fr;
    overflow:visible;
  }
  .video-panel{
    height:auto;
    order:-1;
  }
  .video-frame{
    width:min(72vw,360px);
    max-height:none;
  }
  .play-panel{
    height:58vh;
    min-height:440px;
  }
  .quit{
    position:absolute;
    top:8px;
    right:8px;
    bottom:auto;
  }
}
@media(max-width:480px){
  .hud{
    height:52px;
    min-height:52px;
    padding:0 10px;
  }
  .game-layout{
    min-height:calc(100vh - 52px);
    padding:6px;
    gap:6px;
  }
  .video-frame{
    width:min(64vw,300px);
  }
  .video-panel{
    padding:8px;
  }
  .play-panel{
    height:56vh;
    min-height:400px;
  }
  .key-label{
    height:54px;
  }
}


/* ===== V2.3.0 HP / GAME OVER ===== */
.lanes{right:38px}
.hp-gauge{
  position:absolute;z-index:12;right:5px;bottom:74px;width:28px;height:50%;
  display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none
}
.hp-label,.hp-value{font-size:9px;font-weight:900;letter-spacing:.08em;color:#d9dce5;text-shadow:0 2px 6px #000}
.hp-value{font-size:10px;letter-spacing:0}
.hp-segments{width:100%;flex:1;display:flex;flex-direction:column;gap:2px;padding:3px;border:1px solid rgba(255,255,255,.3);border-radius:8px;background:rgba(0,0,0,.45)}
.hp-segments i{flex:1;border-radius:2px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.035);transition:opacity .12s,filter .12s}
.hp-segments i.filled{background:var(--hp-color);box-shadow:0 0 7px color-mix(in srgb,var(--hp-color) 55%,transparent);filter:saturate(1.15)}
.game-over-overlay{position:absolute;z-index:100;inset:0;display:none;place-items:center;background:rgba(3,4,8,.86);backdrop-filter:blur(7px)}
.game-over-overlay.show{display:grid}
.game-over-card{width:min(420px,calc(100% - 32px));padding:28px;border:1px solid #2b2f3d;border-radius:20px;background:#11131a;text-align:center;box-shadow:0 20px 70px rgba(0,0,0,.5)}
.game-over-card h1{font-size:clamp(42px,8vw,76px);line-height:.95;margin:10px 0 12px}
.game-over-card p{margin:0 0 22px;color:#969bad}
.game-over-card button{width:100%;margin-top:10px}
#gameScreen{position:relative}
@media(max-width:480px){
  .lanes{right:32px}
  .hp-gauge{right:3px;width:24px;height:48%}
  .hp-label{font-size:8px}
}


/* ===== V2.4.0 PLAYER PROFILE / SCORE IDENTITY ===== */
.menu-topline{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:18px}
.menu-topline h1{margin-bottom:0}
.profile-chip{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid #2a2e3a;border-radius:14px;background:#11131a;min-width:210px}
.profile-chip img,.result-player img{width:44px;height:44px;border-radius:50%;object-fit:cover;background:#20232d;border:1px solid #343846}
.profile-chip div,.result-player div{min-width:0;display:flex;flex-direction:column}.profile-chip small,.result-player small{font-size:9px;letter-spacing:.14em;color:#818797}.profile-chip strong,.result-player strong{max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-edit{margin-left:auto;border:0;background:#20232d;color:#d8dbe4;border-radius:8px;padding:8px;font-size:10px;font-weight:900;cursor:pointer}
.personal-best{padding:10px 12px;border:1px solid #272b36;border-radius:10px;background:#101219;color:#aeb4c2;font-size:11px;font-weight:800;letter-spacing:.04em;text-align:center}
#gameScreen .countdown.tagline{padding:0 14px;font-size:clamp(24px,3vw,40px);line-height:1.1;text-align:center;white-space:nowrap}
.result-player{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:12px}.result-player div{text-align:left}.result-player strong{max-width:180px}
.best-badge{margin:6px 0 14px;padding:10px;border:1px solid #565d72;border-radius:10px;background:#1c202a;font-size:12px;font-weight:950;letter-spacing:.08em}
.profile-overlay{position:fixed;z-index:300;inset:0;display:none;place-items:center;padding:18px;background:rgba(3,4,8,.92);backdrop-filter:blur(9px)}.profile-overlay.show{display:grid}
.profile-setup-card{width:min(430px,100%);padding:28px;border:1px solid #2b2f3d;border-radius:20px;background:#11131a;text-align:center}.profile-setup-card h1{margin:8px 0 6px}.profile-setup-card>p{color:#9298a8;margin:0 0 20px}
.profile-photo-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;margin:18px 0}.profile-photo-wrap img{width:112px;height:112px;border-radius:50%;object-fit:cover;border:2px solid #3a3f4e;background:#181b23}.profile-photo-wrap img.empty{opacity:.25}
.photo-button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border-radius:10px;background:#20232d;color:#e9ebf0;font-size:11px;font-weight:900;cursor:pointer}
.profile-name-label{display:flex;flex-direction:column;gap:7px;text-align:left;font-size:10px;font-weight:900;letter-spacing:.1em;color:#989eae}.profile-name-label input{width:100%;box-sizing:border-box;padding:13px 14px;border:1px solid #303543;border-radius:10px;background:#171923;color:#fff;font-size:16px;outline:none}.profile-name-label input:focus{border-color:#727b95}
.profile-error{min-height:20px!important;margin:8px 0!important;color:#ff8585!important;font-size:12px}.profile-setup-card button{width:100%;margin-top:8px}
@media(max-width:680px){.menu-topline{flex-direction:column}.profile-chip{width:100%;box-sizing:border-box}.profile-chip strong{max-width:180px}}

/* ===== V2.5.0 RESPONSIVE PLAY MODE =====
   Desktop: existing landscape layout
   Tablet: landscape layout + touch-friendly lanes
   Phone: portrait layout + full-background loop video
*/
.orientation-overlay{
  position:fixed;z-index:500;inset:0;display:none;place-items:center;padding:28px;
  background:rgba(5,6,10,.96);text-align:center
}
.orientation-card{max-width:360px;padding:28px 24px;border:1px solid #303543;border-radius:20px;background:#11131a}
.orientation-icon{font-size:54px;line-height:1;margin-bottom:14px}
.orientation-card h2{margin:0 0 8px;font-size:24px}.orientation-card p{margin:0;color:#9da3b2;line-height:1.55}

/* Tablet landscape: preserve desktop composition, enlarge touch controls. */
@media (pointer:coarse) and (min-width:700px) and (orientation:landscape){
  .game-layout{grid-template-columns:minmax(360px,46%) 1fr;gap:14px;padding:14px}
  .play-panel{min-height:calc(100dvh - 100px)}
  .key-label{height:64px;font-size:22px;border-radius:16px}
  .judge-line{bottom:82px}
  .hit-burst{bottom:72px}
  .hp-gauge{bottom:82px;width:30px}
  .lane::after{bottom:42px;height:18px}
  .video-panel{padding:14px}
  .quit{min-width:76px;min-height:46px;font-size:14px}
}

/* Tablet should be played landscape. */
@media (pointer:coarse) and (min-width:700px) and (max-width:1200px) and (orientation:portrait){
  #gameScreen.active .orientation-overlay{display:grid}
}

/* Phone portrait: loop video becomes the full playfield background. */
@media (pointer:coarse) and (max-width:699px) and (orientation:portrait){
  #gameScreen{height:100dvh;min-height:100dvh;overflow:hidden;background:#05060a}
  #gameScreen .hud{
    position:relative;z-index:20;height:54px;min-height:54px;padding:env(safe-area-inset-top,0) 12px 0;
    gap:12px;justify-content:space-around;border-bottom:1px solid rgba(255,255,255,.13);
    background:rgba(5,6,10,.62);backdrop-filter:blur(5px)
  }
  #gameScreen .hud div{min-width:0;text-align:center}
  #gameScreen .hud .label{font-size:8px}
  #gameScreen .hud strong{font-size:15px}
  #gameScreen .game-layout{
    position:relative;display:block;height:calc(100dvh - 54px);min-height:0;padding:0;overflow:hidden
  }
  #gameScreen .video-panel{
    position:absolute;z-index:0;inset:0;padding:0;border-radius:0;background:#05060a;pointer-events:none
  }
  #gameScreen .video-panel::after{
    content:"";position:absolute;z-index:2;inset:0;
    background:linear-gradient(to bottom,rgba(5,6,10,.38),rgba(5,6,10,.54) 48%,rgba(5,6,10,.72));
    pointer-events:none
  }
  #gameScreen .video-frame{width:100%;height:100%;max-height:none;aspect-ratio:auto;border-radius:0;background:#05060a}
  #gameScreen .video-frame video{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.82)}
  #gameScreen .video-fallback{z-index:1;background:radial-gradient(circle at 50% 38%,#24293a,#08090e 72%)}
  #gameScreen .video-panel h2,#gameScreen .video-panel p{display:none}
  #gameScreen .play-panel{
    position:absolute;z-index:5;inset:0;height:auto;min-height:0;border-radius:0;
    background:rgba(8,10,16,.18);overflow:hidden
  }
  #gameScreen .lanes{left:4px;right:34px;top:0;bottom:max(8px,env(safe-area-inset-bottom,0));height:auto;background:rgba(5,7,12,.12)}
  #gameScreen .lane{border-right-color:rgba(255,255,255,.14);background:linear-gradient(to bottom,rgba(0,0,0,.04),rgba(0,0,0,.16))}
  #gameScreen .lane.active{background:linear-gradient(to top,color-mix(in srgb,var(--lane) 25%,transparent),rgba(0,0,0,.02) 42%)}
  #gameScreen .key-label{
    bottom:8px;width:88%;height:62px;font-size:22px;
    background:color-mix(in srgb,var(--lane) 18%,rgba(5,6,10,.76));
    border-width:2px;box-shadow:0 5px 18px rgba(0,0,0,.35)
  }
  #gameScreen .lane::after{left:7%;right:7%;bottom:36px;height:16px}
  #gameScreen .judge-line{bottom:calc(max(8px,env(safe-area-inset-bottom,0)) + 78px);height:20px;border-radius:10px}
  #gameScreen .hit-burst{bottom:calc(max(8px,env(safe-area-inset-bottom,0)) + 69px)}
  #gameScreen .hp-gauge{
    right:3px;bottom:calc(max(8px,env(safe-area-inset-bottom,0)) + 130px);width:26px;height:46%;z-index:14
  }
  #gameScreen .judgement{top:40%;font-size:30px}
  #gameScreen .play-combo{top:49%}
  #gameScreen .play-combo .combo-number{font-size:46px}
  #gameScreen .countdown{font-size:82px}
  #gameScreen .quit{
    z-index:40;top:7px;right:6px;bottom:auto;min-width:54px;padding:7px 9px;
    background:rgba(10,12,18,.72);font-size:10px
  }
  #gameScreen .game-over-overlay{position:fixed;z-index:120}
}

/* Phones should be played portrait. */
@media (pointer:coarse) and (max-width:699px) and (orientation:landscape){
  #gameScreen.active .orientation-overlay{display:grid}
}











/* V2.6.3 - Vertical segmented audio-reactive HP meter
   HP remains 20 separate cells. The cells never change width or shake sideways.
   Music drives one bottom-to-top VU level inside the currently available HP. */
.hp-segments {
  overflow: visible;
}

.hp-segments i {
  transform: none !important;
  transition:
    opacity .07s linear,
    filter .07s linear,
    box-shadow .07s linear;
  will-change: opacity, filter, box-shadow;
}

.hp-segments i.filled {
  opacity: .62;
  filter: saturate(1.05) brightness(.9);
  box-shadow: none;
}

.hp-segments i.filled.viz-active {
  opacity: 1;
  filter: saturate(1.35) brightness(var(--viz-intensity, 1.15));
  box-shadow: 0 0 8px color-mix(in srgb,var(--hp-color) 68%,transparent);
}

.hp-segments i.filled.viz-peak {
  filter: saturate(1.5) brightness(1.35);
  box-shadow: 0 0 13px color-mix(in srgb,var(--hp-color) 88%,transparent);
}

.hp-segments i:not(.filled) {
  transform: none !important;
  opacity: .28;
  filter: none;
  box-shadow: none;
}



/* NMDR RHYTHM brand lockup */
.game-tagline{
  margin-top:4px;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.22em;
  opacity:.9;
}
.game-byline{
  margin-top:5px;
  font-size:.68rem;
  letter-spacing:.08em;
  opacity:.58;
}


/* ===== V2.6.11 MOBILE INPUT FEEL ===== */
@media (pointer:coarse) and (max-width:699px) and (orientation:portrait){
  #gameScreen .lanes,
  #gameScreen .lane,
  #gameScreen .key-label{
    touch-action:none;
    -webkit-user-select:none;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
  }
  #gameScreen .key-label{
    transition:transform .035s linear, filter .035s linear, background .035s linear;
  }
  #gameScreen .key-label.pad-active{
    transform:translateX(-50%) scale(.92);
    filter:brightness(1.35);
  }
  #gameScreen .lane.active{
    filter:brightness(1.08);
  }
}


/* ===== V2.6.12 MOBILE HOLD / IOS LONG-PRESS FIX ===== */
@media (pointer:coarse){
  #gameScreen,
  #gameScreen .play-panel,
  #gameScreen .lanes,
  #gameScreen .lane,
  #gameScreen .note,
  #gameScreen .key-label{
    touch-action:none !important;
    -webkit-user-select:none !important;
    user-select:none !important;
    -webkit-touch-callout:none !important;
    -webkit-tap-highlight-color:transparent !important;
  }
  #gameScreen .lanes,
  #gameScreen .lane{
    overscroll-behavior:none;
  }
}


/* ===== V2.6.13 MOBILE PERFORMANCE ===== */
.note{
  will-change:transform;
  transform:translateZ(0);
  contain:layout paint;
  /* Notes are decorative. Leaving them hit-testable made every pointer event
     walk them, and a note removed mid-gesture can cancel an implicit touch
     capture. Input is resolved from coordinates on .lanes instead. */
  pointer-events:none;
}
@media (pointer:coarse) and (max-width:699px) and (orientation:portrait){
  /* Continuous blur/filter over a playing video is expensive on iOS Chrome/WebKit. */
  #gameScreen .hud{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:rgba(5,6,10,.78);
  }
  #gameScreen .video-frame video{
    filter:none !important;
    transform:translateZ(0);
  }
  #gameScreen .video-panel::after{
    background:linear-gradient(to bottom,rgba(5,6,10,.48),rgba(5,6,10,.62) 48%,rgba(5,6,10,.78));
  }
  #gameScreen .note{
    box-shadow:0 0 8px color-mix(in srgb,var(--lane) 55%,transparent);
    will-change:transform;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
  /* Do not apply a filter to the whole lane while notes are moving. */
  #gameScreen .lane.active{
    filter:none !important;
  }
}


/* ===== V2.6.14 JUDGEMENT / NOTE VISIBILITY ===== */
.note{
  height:24px;
  border-radius:12px;
}
.note.hold-note{
  min-height:24px;
  border-radius:12px 12px 6px 6px;
}
.judge-line{
  height:24px;
  border-radius:12px;
  border-width:3px;
}
@media (pointer:coarse) and (max-width:699px) and (orientation:portrait){
  #gameScreen .note{
    height:26px;
    border-radius:13px;
  }
  #gameScreen .note.hold-note{
    min-height:26px;
  }
  #gameScreen .judge-line{
    height:26px;
    border-radius:13px;
    border-width:3px;
  }
}


/* ===== V2.6.15 MOBILE FRAME-PACING ===== */
@media (pointer:coarse) and (max-width:699px) and (orientation:portrait){
  #gameScreen .note{
    /* Keep note layers cheap and stable on iOS/WebKit compositing. */
    box-shadow:none !important;
    outline:1px solid rgba(255,255,255,.34);
    contain:layout paint;
  }
  #gameScreen .hit-burst,
  #gameScreen .hold-spark{
    will-change:transform,opacity;
  }
}


/* ===== V2.6.16 DESKTOP TIMING + MOBILE JUDGEMENT TEXT ===== */
.judgement{
  white-space:nowrap;
  width:max-content;
  max-width:92%;
  text-align:center;
}
@media (pointer:coarse) and (max-width:699px) and (orientation:portrait){
  #gameScreen .judgement{
    white-space:nowrap !important;
    width:max-content;
    max-width:94vw;
    font-size:clamp(22px,7.2vw,30px);
    line-height:1;
  }
}

/* ===== LARGER HIT ZONE / CONTROLS ===== */
.judge-line{bottom:82px!important;height:36px;border-radius:18px;background:rgba(255,255,255,.18);border:3px solid rgba(255,255,255,.94);box-shadow:0 0 20px rgba(255,255,255,.5),inset 0 0 10px rgba(255,255,255,.18);pointer-events:none}
.key-label{width:84%;height:58px;font-size:20px;border-radius:16px}.hit-burst{bottom:90px}
@media (pointer:coarse) and (min-width:700px){#gameScreen .key-label{width:90%;height:74px;font-size:24px;border-radius:18px}}
@media (pointer:coarse) and (max-width:699px) and (orientation:portrait){#gameScreen .key-label{width:92%;height:74px;font-size:24px;border-radius:18px}#gameScreen .judge-line{bottom:82px!important;height:36px;border-radius:18px}#gameScreen .hit-burst{bottom:90px}}

/* ===== BULL MARKET / BROKEN HOLD / RESULT REVEAL ===== */
.note.bull-note{z-index:4;background:linear-gradient(90deg,#55ff83,#ffe45b,#55ff83);border:2px solid #f6ffb7;box-shadow:0 0 10px #55ff83,0 0 24px rgba(255,228,91,.85)}
.note.bull-note::after{content:"×2";position:absolute;inset:0;display:grid;place-items:center;color:#07150b;font-size:13px;line-height:1;font-weight:1000;text-shadow:0 1px rgba(255,255,255,.55)}
.note.broken-hold{opacity:.46;filter:saturate(.15) brightness(.72)!important;background:repeating-linear-gradient(135deg,#8e3d48 0 8px,#42252b 8px 16px)!important;box-shadow:0 0 10px rgba(255,70,85,.35)!important}
.bull-market{position:absolute;z-index:24;top:12px;left:50%;width:min(360px,70%);transform:translateX(-50%) translateY(-18px);display:grid;grid-template-columns:1fr auto;gap:5px 10px;padding:10px 14px;border:1px solid rgba(133,255,153,.65);border-radius:14px;background:rgba(5,27,12,.88);box-shadow:0 0 28px rgba(45,255,104,.3);opacity:0;pointer-events:none;transition:.18s ease}
.bull-market.show{opacity:1;transform:translateX(-50%) translateY(0)}.bull-market-title{font-size:13px;font-weight:950;letter-spacing:.08em;color:#8dffa2}.bull-market-title strong{color:#ffe65e}
.bull-market>span{grid-row:1 / span 2;grid-column:2;align-self:center;font-size:16px;font-weight:950;color:#fff}.bull-market-track{height:7px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.13)}.bull-market-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#38e86c,#ffe45b)}
.bull-market-active .play-panel{box-shadow:inset 0 0 34px rgba(50,255,100,.2)}#rank{opacity:0;transform:scale(.72)}#rank.reveal{opacity:1;transform:scale(1);transition:transform .28s cubic-bezier(.2,1.6,.4,1),opacity .18s}#rank.perfect-clear{font-size:clamp(54px,10vw,94px);color:#ffe56b;text-shadow:0 0 12px #fff5a3,0 0 34px #ffbd38}.result-grid strong{font-variant-numeric:tabular-nums}
.result-card.counting .result-grid strong{animation:resultTick .11s ease-in-out infinite alternate}@keyframes resultTick{from{transform:scale(1);filter:brightness(1)}to{transform:scale(1.055);filter:brightness(1.35)}}
@media (pointer:coarse) and (max-width:699px) and (orientation:portrait){#gameScreen .bull-market{top:8px;width:min(330px,76%);padding:8px 10px}#gameScreen .bull-market-title{font-size:10px}#gameScreen .bull-market>span{font-size:13px}}

/* ===== V2.8.0 BULL RUN / HELD INPUT FEEDBACK ===== */
.bull-market>span{grid-row:1 / span 3}
.bull-streak{font-size:9px;font-weight:850;letter-spacing:.12em;color:#b9f8c5}.bull-streak strong{color:#ffe65e;font-size:11px}
.bull-market.level-4{border-color:#ffe45b;background:rgba(30,24,3,.92);box-shadow:0 0 34px rgba(255,214,54,.48)}
.bull-market.level-4 .bull-market-title{color:#ffe45b}.bull-market.level-4 .bull-market-track i{background:linear-gradient(90deg,#ffe45b,#ff8a3d)}
.bull-market.extended{animation:bullExtended .55s ease-out}@keyframes bullExtended{0%{transform:translateX(-50%) scale(.92);filter:brightness(1)}45%{transform:translateX(-50%) scale(1.08);filter:brightness(1.8)}100%{transform:translateX(-50%) scale(1);filter:brightness(1)}}
.lane.pressed{background:linear-gradient(to top,color-mix(in srgb,var(--lane) 30%,transparent),transparent 48%)!important;box-shadow:inset 0 -28px 34px color-mix(in srgb,var(--lane) 20%,transparent)}
.lane.pressed .key-label{transform:translateX(-50%) scale(.92);filter:brightness(1.4);background:color-mix(in srgb,var(--lane) 62%,#10131a);box-shadow:0 0 24px color-mix(in srgb,var(--lane) 82%,transparent)}
@media (pointer:coarse) and (max-width:699px) and (orientation:portrait){#gameScreen .bull-streak{font-size:8px}#gameScreen .lane.pressed{filter:none!important;background:linear-gradient(to top,color-mix(in srgb,var(--lane) 32%,transparent),rgba(0,0,0,.02) 48%)!important}}

/* ===== V2.8.1 IPAD LANDSCAPE VIEWPORT FIX ===== */
@media (pointer:coarse) and (min-width:700px) and (orientation:landscape){
  #gameScreen{height:100dvh;min-height:0;overflow:hidden}
  #gameScreen .game-layout{
    height:calc(100dvh - 58px);min-height:0;
    padding:10px 10px max(22px,env(safe-area-inset-bottom,0px));
    align-items:stretch;overflow:hidden
  }
  #gameScreen .play-panel{height:auto;min-height:0!important;align-self:stretch}
  #gameScreen .video-panel{height:auto;min-height:0;align-self:stretch;overflow:hidden}
  #gameScreen .key-label{bottom:10px;height:68px}
}

/* ===== V2.8.2 TABLET CONTROL / HOLD RELEASE TUNING ===== */
@media (pointer:coarse) and (min-width:700px) and (orientation:landscape){
  #gameScreen .key-label{bottom:12px;width:94%;height:92px;font-size:26px;border-radius:20px}
  #gameScreen .judge-line{bottom:114px!important;height:36px;border-radius:18px}
  #gameScreen .hit-burst{bottom:122px}
  #gameScreen .hp-gauge{bottom:114px}
  #gameScreen .lane.hold-active::before{bottom:132px}
  #gameScreen .hold-spark{bottom:136px}
}

/* ===== V2.8.3 MOBILE TOUCH DEAD-ZONE FIX ===== */
@media (pointer:coarse){
  /* The old HP gutter shortened the lanes and left a dead strip beside K. */
  #gameScreen .lanes{right:0!important}
  /* Display-only layers must never become the target of a gameplay touch. */
  #gameScreen .hp-gauge,
  #gameScreen .judgement,
  #gameScreen .play-combo,
  #gameScreen .celebration,
  #gameScreen .bull-market,
  #gameScreen .countdown{pointer-events:none!important}
}

/* ===== PATCH 11 TABLET RAPID-TAP / HP SEPARATION ===== */
@media (pointer:coarse) and (min-width:700px) and (orientation:landscape){
  /* Keep the display-only HP meter completely above the 36px judgement bar. */
  #gameScreen .hp-gauge{
    bottom:162px!important;
    height:calc(50% - 28px);
  }
}


.build-tag{
  margin-left:8px;font-size:10px;letter-spacing:.08em;color:#6b7285;
  border:1px solid #2b2f3d;border-radius:6px;padding:2px 6px;vertical-align:middle;
}

/* ===== HIT ACKNOWLEDGEMENT =====
   Every accepted touch lights the pad for a fixed moment, driven by a timer and
   not by how long the finger stays down: a fast tap lifts inside a single frame,
   so anything tied to the touch itself was never painted and the input looked
   ignored even though it had been received.

   The highlight is a pre-existing layer whose opacity is animated, rather than a
   class that swaps background/box-shadow. Opacity and transform are handled by
   the compositor, so the flash still runs when the main thread is busy - which
   is exactly when a rapid tap was going unseen. Repainting a colour on a busy
   frame is the thing that gets skipped. */
.key-label{position:absolute}
.key-label>b{position:relative;font:inherit;color:inherit}
.pad-glow{
  position:absolute;inset:0;border-radius:inherit;
  background:var(--lane);opacity:0;pointer-events:none;
  will-change:opacity;
}


/* ===== DESIGN TOKENS =====
   Introduced with the landing screen. The older screens still carry their own
   literal colours; new work uses these so the pieces built from here on share
   one language instead of adding a thirteenth shade of grey. */
:root{
  --bg-deep:#05060a;
  --bg-card:#11131a;
  --line:#2b2f3d;
  --text:#f7f7fb;
  --text-dim:#8f95a5;
  --r-sm:12px;  --r-md:20px;  --r-lg:24px;  --r-pill:999px;
  /* The lane palette is the game's identity. Menus never used it, which is why
     they read as a different product from the playfield. */
  --neon-1:#2fd8ff;  --neon-2:#b967ff;  --neon-3:#ff5cb8;  --neon-4:#ffd84a;
}


/* ===== LANDING ===== */
#landingScreen{
  position:relative;min-height:100dvh;overflow:hidden;background:var(--bg-deep);
}
.landing-wrap{
  position:relative;z-index:1;min-height:100dvh;
  display:grid;place-content:center;justify-items:center;gap:26px;
  padding:32px 22px max(32px,env(safe-area-inset-bottom,0px));text-align:center;
}
.landing-eyebrow{
  display:inline-block;font-size:13px;letter-spacing:.44em;color:var(--text-dim);
}
.landing-logo h1{
  margin:6px 0 0;font-size:clamp(52px,17vw,132px);line-height:.92;letter-spacing:.02em;
  background:linear-gradient(100deg,var(--neon-1),var(--neon-2) 45%,var(--neon-3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.landing-tagline{
  margin:10px 0 0;font-size:clamp(12px,3.4vw,16px);letter-spacing:.3em;color:var(--text-dim);
}
.landing-start{
  min-width:min(320px,78vw);padding:18px 26px;border-radius:var(--r-pill);
  font-size:17px;letter-spacing:.16em;
  background:linear-gradient(100deg,var(--neon-1),var(--neon-2));
  color:#070a12;box-shadow:0 0 34px color-mix(in srgb,var(--neon-2) 45%,transparent);
}
.landing-hint{margin:0;font-size:12px;color:var(--text-dim);line-height:1.6}


/* ===== IN-GAME TOP BAR =====
   The bar used to reserve 54px above the playfield. Overlaying it instead gives
   the lanes the full screen height, which spreads a dense pattern further apart
   without changing how long a note is on screen (approach time is time-based).
   It is display-only, so it passes touches straight through to the lanes - the
   same treatment .hp-gauge and the judgement text already get. QUIT opts back
   in on its own. */
@media (pointer:coarse) and (max-width:699px) and (orientation:portrait){
  #gameScreen .hud{
    position:absolute;top:0;left:0;right:0;z-index:20;
    height:auto;min-height:0;border-bottom:0;
    background:transparent;backdrop-filter:none;
    display:block;padding:calc(env(safe-area-inset-top,0px) + 6px) 10px 0;
    pointer-events:none;
  }
  #gameScreen .hud-stats{
    display:grid;justify-items:start;gap:1px;
  }
  #gameScreen .hud-stats strong{
    font-size:15px;font-variant-numeric:tabular-nums;line-height:1.15;
    /* No panel behind the text any more, so it has to hold up over a bright
       video frame on its own. */
    text-shadow:0 1px 3px #000,0 0 10px rgba(0,0,0,.85);
  }
  #gameScreen .hud-stats strong:last-child{font-size:12px;color:#cdd2e0}
  #gameScreen .game-layout{height:100dvh}
  #gameScreen .quit{pointer-events:auto}
  /* Was top:8px, which lands on the stats and QUIT now that the panel reaches
     the top of the screen. */
  #gameScreen .bull-market{top:58px}
}


/* ===== BGM WAVE VISUALIZER =====
   One canvas behind both the landing and the song select, so the rings keep
   expanding across the screen change rather than restarting. Only shown while
   those two screens are up; gameplay never pays for it. */
#waveCanvas{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;display:none;
}
body.waves-on #waveCanvas{display:block}
/* Both screens sit above the canvas. The landing already paints its own deep
   background, so it has to become transparent for the rings to show. */
#landingScreen{background:transparent}
#landingScreen .landing-wrap,
#menuScreen .menu-wrap{position:relative;z-index:1}
body.waves-on{background:var(--bg-deep)}


/* ===== BGM TOGGLE =====
   Lives beside the wave canvas rather than inside either screen, so one button
   serves the landing and the song select. Hidden wherever the music does not
   play, which is the same condition the canvas uses. */
.bgm-toggle{
  position:fixed;top:max(10px,env(safe-area-inset-top,0px));right:10px;z-index:60;
  width:40px;height:40px;padding:0;display:none;place-items:center;
  border:1px solid var(--line);border-radius:var(--r-pill);
  background:rgba(10,12,18,.72);color:var(--text);
}
body.waves-on .bgm-toggle{display:grid}
.bgm-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.bgm-toggle .spk{fill:currentColor;stroke:none}
.bgm-toggle .slash{opacity:0}
.bgm-toggle.muted{color:var(--text-dim)}
.bgm-toggle.muted .wave1,
.bgm-toggle.muted .wave2{opacity:0}
.bgm-toggle.muted .slash{opacity:1}


/* ===== STAR FIELD =====
   Shared by the landing and the song select, so the sky does not blink out
   when the screen changes. Three layers at different tile sizes and speeds
   give parallax depth without any DOM nodes: each layer is one painted
   background that the compositor then only translates. */
.space-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;display:none;
}
body.waves-on .space-bg{display:block}
.star-layer{
  position:absolute;inset:-60% -60%;display:block;
  will-change:transform;
}
/* Near layer: fewer, larger, brighter. */
.star-a{
  opacity:.85;background-size:300px 300px;
  animation:driftStars 150s linear infinite;
  background-image:
    radial-gradient(1.6px 1.6px at 20% 30%,#fff,transparent),
    radial-gradient(1.6px 1.6px at 70% 15%,#dcecff,transparent),
    radial-gradient(1.4px 1.4px at 45% 72%,#fff,transparent),
    radial-gradient(1.6px 1.6px at 88% 58%,#efe0ff,transparent),
    radial-gradient(1.4px 1.4px at 12% 84%,#fff,transparent),
    radial-gradient(1.6px 1.6px at 58% 44%,#d8f4ff,transparent),
    radial-gradient(1.4px 1.4px at 33% 12%,#fff,transparent),
    radial-gradient(1.6px 1.6px at 80% 88%,#fff,transparent);
}
/* Mid layer: denser, dimmer, drifting the other way. */
.star-b{
  opacity:.55;background-size:190px 190px;
  animation:driftStars 240s linear infinite reverse;
  background-image:
    radial-gradient(1.1px 1.1px at 15% 22%,#fff,transparent),
    radial-gradient(1.1px 1.1px at 62% 8%,#cfe6ff,transparent),
    radial-gradient(1px 1px at 38% 55%,#fff,transparent),
    radial-gradient(1.1px 1.1px at 84% 40%,#e8dcff,transparent),
    radial-gradient(1px 1px at 8% 66%,#fff,transparent),
    radial-gradient(1.1px 1.1px at 52% 82%,#fff,transparent),
    radial-gradient(1px 1px at 92% 74%,#d6f2ff,transparent),
    radial-gradient(1.1px 1.1px at 27% 92%,#fff,transparent),
    radial-gradient(1px 1px at 71% 62%,#fff,transparent);
}
/* Far layer: dust. Small tile so it reads as a haze of distant stars. */
.star-c{
  opacity:.32;background-size:110px 110px;
  animation:driftStars 380s linear infinite;
  background-image:
    radial-gradient(.8px .8px at 25% 18%,#fff,transparent),
    radial-gradient(.8px .8px at 68% 34%,#cfe0ff,transparent),
    radial-gradient(.7px .7px at 44% 76%,#fff,transparent),
    radial-gradient(.8px .8px at 86% 62%,#fff,transparent),
    radial-gradient(.7px .7px at 10% 48%,#fff,transparent),
    radial-gradient(.8px .8px at 57% 6%,#e6dcff,transparent);
}
@keyframes driftStars{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-300px,150px,0)}
}


/* ===== RESULT SCREEN THEME =====
   Brought onto the same footing as the landing: the shared star field and wave
   canvas show through, and the panel uses the design tokens instead of its own
   literals. The rank letter borrows the logo's gradient so the screen that ends
   a run looks like the screen that started it. */
#resultScreen{background:transparent}
#resultScreen .result-card{
  position:relative;z-index:1;
  max-width:min(560px,calc(100% - 28px));margin:0 auto;
  padding:26px 22px 22px;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--bg-card) 88%,transparent);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
}
#resultScreen .result-player{
  display:flex;align-items:center;gap:10px;
  padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid var(--line);
}
#resultScreen #rank{
  font-size:clamp(68px,20vw,120px);line-height:.95;margin:2px 0 18px;
  background:linear-gradient(100deg,var(--neon-1),var(--neon-2) 45%,var(--neon-3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* The perfect-clear treatment paints its own colour, so the gradient has to
   step aside or the text stays transparent. */
#resultScreen #rank.perfect-clear{
  background:none;-webkit-text-fill-color:currentColor;color:#ffe56b;
}
#resultScreen .result-grid div{
  padding:13px 14px;border-radius:var(--r-sm);
  border:1px solid var(--line);
  background:color-mix(in srgb,var(--bg-deep) 70%,transparent);
}
#resultScreen .result-grid span{color:var(--text-dim);font-size:12px}
#resultScreen .best-badge{border-radius:var(--r-pill)}
#resultScreen .primary{
  border-radius:var(--r-pill);
  background:linear-gradient(100deg,var(--neon-1),var(--neon-2));
  color:#070a12;
}
#resultScreen .secondary{border-radius:var(--r-pill)}
@media (max-width:480px){
  #resultScreen .result-card{padding:20px 16px 18px}
  #resultScreen .result-grid div{padding:11px 12px}
}


/* ===== SONG LIST ===== */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0;white-space:nowrap}
.song-list{display:grid;gap:10px;margin-top:8px}
.song-empty{color:var(--text-dim);text-align:center;padding:28px 0}
.song-item{
  display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:12px;
  width:100%;padding:10px;text-align:left;color:var(--text);
  border:1px solid var(--line);border-radius:var(--r-md);
  background:color-mix(in srgb,var(--bg-card) 82%,transparent);
  transition:border-color .12s,background .12s;
}
.song-item:hover{border-color:color-mix(in srgb,var(--neon-1) 45%,var(--line))}
.song-item.selected{
  border-color:color-mix(in srgb,var(--neon-1) 70%,transparent);
  background:color-mix(in srgb,var(--neon-2) 12%,var(--bg-card));
  box-shadow:0 0 22px color-mix(in srgb,var(--neon-2) 22%,transparent);
}
.song-thumb{width:56px;height:56px;border-radius:var(--r-sm);object-fit:cover;display:block;background:#0c0e14}
.song-thumb.empty{background:linear-gradient(135deg,#1a1d28,#0c0e14)}
.song-info{display:grid;gap:3px;min-width:0}
.song-title{font-size:15px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.song-sub{font-size:11px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.song-diffs{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.diff{font-size:9.5px;letter-spacing:.05em;padding:2px 6px;border-radius:var(--r-pill);
  border:1px solid currentColor;opacity:.85}
.diff-easy{color:var(--neon-1)}
.diff-normal{color:var(--neon-2)}
.diff-hard{color:var(--neon-3)}
.song-warn{font-size:10px;color:#ff8a8a;border:1px solid #ff8a8a;border-radius:var(--r-pill);padding:3px 7px}

/* The panel is moved under the selected card, so it reads as that song's
   options rather than a separate box elsewhere on the page. */
.song-options{
  display:none;gap:14px;padding:16px;
  border:1px solid color-mix(in srgb,var(--neon-1) 40%,var(--line));
  border-radius:var(--r-md);
  background:color-mix(in srgb,var(--bg-deep) 78%,transparent);
}
.song-options.open{display:grid}
.song-options .opt{display:grid;gap:7px;color:var(--text-dim);font-size:12px}
.song-options select{border-radius:var(--r-sm);border-color:var(--line)}
.song-options .primary{border-radius:var(--r-pill);
  background:linear-gradient(100deg,var(--neon-1),var(--neon-2));color:#070a12}
.song-options .hint{margin:0;font-size:11px}
.song-options .personal-best{font-size:12px;color:var(--text-dim)}


/* ===== OVERLAYS ON THEME ===== */
.game-over-card,
.profile-setup-card{
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--bg-card) 92%,transparent);
}
.game-over-card h1{
  background:linear-gradient(100deg,var(--neon-3),var(--neon-4));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.game-over-card .primary,
.profile-setup-card .primary{
  border-radius:var(--r-pill);
  background:linear-gradient(100deg,var(--neon-1),var(--neon-2));color:#070a12;
}
.game-over-card .secondary,
.profile-setup-card .secondary,
.profile-setup-card .photo-button{border-radius:var(--r-pill)}
.profile-setup-card input[type=text]{border-radius:var(--r-sm)}


/* ===== RANK COLOURS =====
   High ranks take the cool, bright end of the palette and low ranks slide warm
   into red, so the tier reads before the letter does. These override the
   gradient the result screen puts on #rank, which stays as the fallback. */
#resultScreen #rank[data-rank]{
  background:none;-webkit-text-fill-color:currentColor;
}
#resultScreen #rank[data-rank="SS"]{color:#7ff0ff;text-shadow:0 0 10px rgba(127,240,255,.55)}
#resultScreen #rank[data-rank="S"]{color:var(--neon-1);text-shadow:0 0 10px color-mix(in srgb,var(--neon-1) 55%,transparent)}
#resultScreen #rank[data-rank="A"]{color:var(--neon-2);text-shadow:0 0 10px color-mix(in srgb,var(--neon-2) 50%,transparent)}
#resultScreen #rank[data-rank="B"]{color:var(--neon-3)}
#resultScreen #rank[data-rank="C"]{color:var(--neon-4)}
#resultScreen #rank[data-rank="D"]{color:#ff9a4a}
#resultScreen #rank[data-rank="E"]{color:#ff6b6b}
/* SSS keeps the gold treatment that was already written but unreachable: the
   old PERFECT rank required every single note to be PERFECT, so nobody saw it. */
#resultScreen #rank[data-rank="SSS"],
#resultScreen #rank.perfect-clear{
  color:#ffe56b;
  text-shadow:0 0 14px #fff5a3,0 0 40px #ffbd38,0 0 70px rgba(255,189,56,.5);
}
.rank-message{
  margin:-10px 0 18px;font-size:13px;font-weight:800;letter-spacing:.14em;
  color:var(--text-dim);
}
.result-badges{display:grid;gap:8px;margin-bottom:16px}
.all-perfect-badge{
  padding:10px;text-align:center;font-size:12px;font-weight:900;letter-spacing:.16em;
  border-radius:var(--r-pill);color:#0b0d12;
  background:linear-gradient(100deg,#ffe56b,#ffbd38);
}

/* X share: sits above PLAY AGAIN because the player's first impulse after a
   good run is to post it, and the logo alone reads faster than the label. */
.share-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  margin-bottom:10px;padding:14px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:#000;color:#fff;font:800 14px/1 inherit;letter-spacing:.12em;cursor:pointer;
}
.share-btn svg{width:16px;height:16px;fill:currentColor}
.share-btn:active{transform:scale(.98)}