.scaleSinger{
  --purple:#7157c8;
  --purpleSoft:rgba(113,87,200,.13);
  --good:#278a54;
  --goodSoft:rgba(122,201,67,.18);
  --near:#d97808;
  --nearSoft:rgba(254,146,29,.17);
}

.scaleSinger .gameArea{
  min-height:calc(var(--vh, 1vh) * 100);
  height:calc(var(--vh, 1vh) * 100);
  display:grid;
  grid-template-rows:auto auto auto auto;
  align-content:start;
  gap:clamp(8px, 1.5vh, 16px);
  padding:clamp(12px, 2vw, 24px);
  overflow:auto;
  min-width:0;
  background:
    radial-gradient(circle at 10% 12%, rgba(63,169,245,.10), transparent 29%),
    radial-gradient(circle at 90% 10%, rgba(254,122,171,.10), transparent 26%),
    #fff;
}

.modeCard{ width:min(900px, 94vw); }

.modePicker{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  width:100%;
  margin:18px 0 4px;
}

.modeOption{
  appearance:none;
  display:flex;
  align-items:flex-start;
  gap:14px;
  min-height:160px;
  padding:22px;
  border:3px solid rgba(113,87,200,.20);
  border-radius:22px;
  background:linear-gradient(145deg, rgba(113,87,200,.07), rgba(63,169,245,.07));
  color:#1d1930;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.modeOption:hover,
.modeOption:focus-visible{
  transform:translateY(-3px);
  border-color:var(--purple);
  box-shadow:0 15px 32px rgba(113,87,200,.18);
  outline:none;
}

.modeOption.recommended{ border-color:rgba(39,138,84,.48); }

.modeIcon{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  border-radius:18px;
  background:var(--purple);
  color:#fff;
  font-size:34px;
  font-weight:1000;
}

.modeCopy{ display:block; min-width:0; }
.modeCopy strong{ display:block; font-size:clamp(23px, 3vw, 32px); line-height:1.05; }
.modeCopy span{ display:block; margin-top:9px; color:var(--muted); font-size:15px; line-height:1.35; font-weight:850; }
.modeCopy .recommendedTag{
  display:inline-block;
  margin-top:8px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(39,138,84,.12);
  color:#216e47;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.activityHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  width:min(1180px, 100%);
  margin:0 auto;
  padding-left:clamp(0px, 18vw, 190px);
  min-width:0;
}

.activityKicker,
.resultKicker{
  color:var(--purple);
  font-size:13px;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.banner{
  margin:2px 0 0;
  font-size:clamp(28px, 4vw, 48px);
  line-height:1.02;
  font-weight:1100;
}

.subBanner{
  margin:5px 0 0;
  color:var(--muted);
  font-size:clamp(15px, 1.8vw, 20px);
  font-weight:850;
}

.micBadge{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 13px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.035);
  color:var(--muted);
  font-size:14px;
  font-weight:1000;
}

.micDot{
  width:11px;
  height:11px;
  border-radius:50%;
  background:#9b9b9b;
  box-shadow:0 0 0 4px rgba(0,0,0,.06);
}

.micBadge.active{
  color:#276d47;
  border-color:rgba(39,138,84,.30);
  background:rgba(39,138,84,.10);
}

.micBadge.active .micDot{
  background:#2faa68;
  box-shadow:0 0 0 4px rgba(47,170,104,.14);
}

.scalePanel,
.resultsPanel{
  width:min(1180px, 100%);
  margin:0 auto;
  border:1px solid rgba(0,0,0,.10);
  border-radius:22px;
  background:rgba(255,255,255,.94);
  box-shadow:0 16px 44px rgba(0,0,0,.10);
  min-width:0;
}

.scalePanel{ padding:clamp(10px, 1.7vw, 20px); }

.notationMount{
  width:100%;
  min-height:clamp(132px, 20vh, 188px);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(113,87,200,.035), rgba(63,169,245,.025));
  overflow:hidden;
}

.notationMount .vfWrap{
  width:100%;
  height:100%;
  margin:0 auto;
}

.notationMount svg{ display:block; width:100%; height:100%; }

.keyboardPanel{
  margin-top:14px;
  padding:11px;
  border:1px solid rgba(0,0,0,.11);
  border-radius:19px;
  background:linear-gradient(180deg, rgba(20,25,45,.94), rgba(8,12,25,.98));
  box-shadow:0 12px 30px rgba(0,0,0,.14);
}

.keyboardHeadingRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 3px 8px;
  color:#fff;
  font-size:13px;
  font-weight:950;
}

.keyboardHeadingRow span{
  color:rgba(255,255,255,.68);
  font-size:11px;
  text-align:right;
}

.scaleKeyboard{
  --white-key:#fff;
  --white-key-bottom:#edf0f5;
  --black-key:#17191e;
  --black-key-bottom:#08090c;
  position:relative;
  width:100%;
  height:clamp(175px, 25vh, 235px);
  border-radius:13px;
  overflow:hidden;
  background:#10131c;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}

.scaleKeyboardWhiteRow,
.scaleKeyboardBlackLayer{
  position:absolute;
  inset:0;
}

.scaleKeyboardWhiteRow{ display:flex; }
.scaleKeyboardBlackLayer{ pointer-events:none; }

.scalePianoKey{
  appearance:none;
  min-width:0;
  padding:0;
  border:0;
  font:inherit;
  cursor:pointer;
  touch-action:none;
  transition:background .12s ease, transform .08s ease, box-shadow .12s ease;
}

.scalePianoKey.white{
  position:relative;
  flex:1 1 0;
  height:100%;
  border-right:1px solid rgba(0,0,0,.20);
  background:linear-gradient(180deg, var(--white-key), var(--white-key-bottom));
}

.scalePianoKey.white:last-child{ border-right:0; }

.scalePianoKey.black{
  position:absolute;
  top:0;
  width:var(--black-key-width, 7.75%);
  height:62%;
  border:1px solid rgba(255,255,255,.12);
  border-radius:0 0 9px 9px;
  background:linear-gradient(180deg, var(--black-key), var(--black-key-bottom));
  box-shadow:0 9px 16px rgba(0,0,0,.46);
  pointer-events:auto;
  z-index:5;
}

.scalePianoKey.isRequested{
  background:var(--note-colour) !important;
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.72);
  animation:requestedKeyPulse 1.05s ease-in-out infinite alternate;
}

.scalePianoKey.white.isRequested{ z-index:1; }
.scalePianoKey.black.isRequested{
  z-index:6;
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.68), 0 0 18px var(--note-colour);
}

.scalePianoKey.isPressed{
  background:var(--note-colour) !important;
  transform:translateY(3px);
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.78);
  animation:none;
}

.scalePianoKey.white.isPressed{ z-index:2; }
.scalePianoKey.black.isPressed{ z-index:7; }

.scalePianoKeyLabel{
  position:absolute;
  left:50%;
  bottom:13px;
  z-index:2;
  transform:translateX(-50%);
  color:#252733;
  font-size:clamp(15px, 2vw, 23px);
  line-height:1;
  font-weight:1000;
  pointer-events:none;
}

.scalePianoKey.black .scalePianoKeyLabel{
  bottom:10px;
  color:#fff;
  font-size:clamp(10px, 1.3vw, 15px);
  text-shadow:0 2px 5px rgba(0,0,0,.65);
}

.scalePianoKey.isRequested .scalePianoKeyLabel,
.scalePianoKey.isPressed .scalePianoKeyLabel{
  padding:4px 6px;
  border-radius:7px;
  background:rgba(0,0,0,.25);
  color:#fff;
  text-shadow:0 2px 5px rgba(0,0,0,.45);
}

.scalePianoKey.resultGood{ box-shadow:inset 0 -9px 0 #3eb36f; }
.scalePianoKey.resultNear{ box-shadow:inset 0 -9px 0 #ed941f; }
.scalePianoKey.resultLow{ box-shadow:inset 0 -9px 0 #287fb6; }
.scalePianoKey.resultHigh{ box-shadow:inset 0 -9px 0 #ed941f; }
.scalePianoKey.resultMissed{ box-shadow:inset 0 -9px 0 #9b9b9b; }

@keyframes requestedKeyPulse{
  from{ filter:brightness(.94); }
  to{ filter:brightness(1.12); }
}

.scaleCards{
  display:grid;
  grid-template-columns:repeat(5, minmax(80px, 1fr));
  gap:clamp(7px, 1.2vw, 14px);
  padding:8px 3px 3px;
  width:100%;
  min-width:0;
}

.noteCard{
  position:relative;
  min-height:clamp(68px, 10vh, 92px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:3px solid rgba(0,0,0,.11);
  border-radius:20px;
  background:linear-gradient(155deg, rgba(113,87,200,.06), rgba(63,169,245,.06));
  transition:transform .14s ease, opacity .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.noteCard.dimmed{ opacity:.36; transform:scale(.97); }

.noteCard.active{
  opacity:1;
  transform:translateY(-4px) scale(1.025);
  border-color:var(--purple);
  box-shadow:0 15px 32px rgba(113,87,200,.22), inset 0 0 0 5px rgba(113,87,200,.11);
}

.noteNumber{
  position:absolute;
  top:9px;
  left:10px;
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  border-radius:50%;
  background:rgba(0,0,0,.07);
  color:rgba(0,0,0,.66);
  font-size:12px;
  font-weight:1000;
}

.noteName{
  font-size:clamp(23px, 3vw, 34px);
  line-height:1;
  font-weight:1100;
}

.notePrompt{
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:5px 8px;
  border-radius:10px;
  color:var(--muted);
  font-size:13px;
  font-weight:1000;
  text-align:center;
}

.noteDetail{
  min-height:18px;
  color:rgba(0,0,0,.64);
  font-size:12px;
  font-weight:900;
}

.noteCard.resultGood{
  border-color:rgba(39,138,84,.52);
  background:var(--goodSoft);
}

.noteCard.resultGood::after{
  content:"✓";
  position:absolute;
  top:7px;
  right:9px;
  color:var(--good);
  font-size:18px;
  font-weight:1100;
}

.noteCard.resultGood .notePrompt{ color:#216e47; background:rgba(39,138,84,.10); }

.noteCard.resultNear{
  border-color:rgba(217,120,8,.48);
  background:var(--nearSoft);
}

.noteCard.resultNear .notePrompt{ color:#995300; background:rgba(217,120,8,.10); }

.noteCard.resultMissed{
  border-color:rgba(0,0,0,.18);
  background:rgba(0,0,0,.045);
}

.matchPanel{
  display:grid;
  grid-template-columns:minmax(150px, .34fr) minmax(320px, 1fr);
  gap:clamp(12px, 2vw, 22px);
  margin-top:12px;
  padding:clamp(12px, 1.7vw, 18px);
  border:2px solid rgba(113,87,200,.18);
  border-radius:20px;
  background:rgba(113,87,200,.045);
}

.targetPanel{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:8px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 9px 24px rgba(0,0,0,.07);
}

.targetKicker,
.tunerLabel{
  color:var(--purple);
  font-size:12px;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.targetNote{
  margin:3px 0;
  color:#1e1739;
  font-size:clamp(46px, 7vw, 70px);
  line-height:1;
  font-weight:1100;
}

.pianoState{
  display:flex;
  align-items:center;
  gap:7px;
  color:#5b489f;
  font-size:13px;
  font-weight:950;
}

.pianoState span{
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  border-radius:50%;
  background:var(--purpleSoft);
  font-size:17px;
}

.tunerPanel{ min-width:0; }

.tunerReadoutRow,
.holdLabelRow{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}

.livePitchName{
  display:block;
  min-height:31px;
  margin-top:2px;
  color:#201c2e;
  font-size:clamp(20px, 3vw, 30px);
  line-height:1;
}

.livePitchDetail{
  color:var(--muted);
  font-size:clamp(15px, 2vw, 20px);
  text-align:right;
}

.livePitchDetail.low{ color:#2674aa; }
.livePitchDetail.good{ color:var(--good); }
.livePitchDetail.high{ color:#c46000; }

.tunerTrack{
  position:relative;
  height:48px;
  margin-top:9px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:15px;
  background:
    linear-gradient(90deg, rgba(63,169,245,.14) 0 37.5%, rgba(122,201,67,.24) 37.5% 62.5%, rgba(254,146,29,.16) 62.5% 100%);
  overflow:hidden;
}

.tunerTrack::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:2px;
  background:rgba(39,138,84,.55);
  transform:translateX(-50%);
}

.tunerCentreBand{
  position:absolute;
  left:37.5%;
  top:0;
  bottom:0;
  width:25%;
  border-left:2px dashed rgba(39,138,84,.38);
  border-right:2px dashed rgba(39,138,84,.38);
}

.tunerMarker{
  position:absolute;
  left:50%;
  top:5px;
  width:13px;
  height:38px;
  border-radius:999px;
  background:var(--purple);
  box-shadow:0 3px 12px rgba(46,35,88,.34);
  transform:translateX(-50%);
  transition:left .08s linear, opacity .12s ease, background .12s ease;
}

.tunerMarker.waiting{ opacity:.18; }
.tunerMarker.good{ background:var(--good); }

.tunerLabels{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  margin-top:4px;
  color:var(--muted);
  font-size:11px;
  font-weight:950;
}

.tunerLabels span:nth-child(2){ text-align:center; color:#367a58; }
.tunerLabels span:last-child{ text-align:right; }

.holdLabelRow{
  align-items:center;
  margin-top:10px;
  color:var(--muted);
  font-size:12px;
  font-weight:950;
}

.holdTrack{
  height:14px;
  margin-top:5px;
  border-radius:999px;
  background:rgba(0,0,0,.09);
  overflow:hidden;
}

.holdTrack span{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, #3fa9f5, #7ac943);
  transition:width .08s linear;
}

.activityActions,
.resultActions{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.completionText{
  margin:12px 0 0;
  color:var(--muted);
  font-size:16px;
  font-weight:850;
}

.scaleGraphSection{
  margin-top:16px;
  padding-top:15px;
  border-top:1px solid rgba(0,0,0,.10);
}

.graphHeadingRow{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
}

.graphTitle{
  margin:2px 0 0;
  font-size:clamp(20px, 2.5vw, 29px);
  line-height:1.08;
}

.graphTip{
  flex:0 0 auto;
  padding:8px 11px;
  border-radius:999px;
  background:var(--goodSoft);
  color:#216e47;
  font-size:12px;
  font-weight:1000;
}

.soundButton,
.singButton{
  min-width:min(230px, 42vw);
  min-height:56px;
  font-size:18px;
}

.stopButton{
  border-color:rgba(255,29,37,.35);
  background:rgba(255,29,37,.09);
}

.activityStatus{
  width:min(720px, 96%);
  margin:12px auto 0;
  padding:10px 12px;
  border-radius:13px;
  background:var(--nearSoft);
  color:#7b490c;
  font-weight:950;
  text-align:center;
}

.resultsPanel{
  align-self:start;
  padding:clamp(12px, 2vw, 22px);
  overflow:visible;
}

.resultHeadingRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.scoreHeadline{
  margin:2px 0 0;
  font-size:clamp(24px, 3vw, 38px);
  line-height:1.05;
}

.scoreBadge{
  flex:0 0 auto;
  min-width:86px;
  padding:12px 15px;
  border-radius:18px;
  background:var(--purpleSoft);
  color:#503c9b;
  font-size:24px;
  font-weight:1100;
  text-align:center;
}

.traceWrap{
  width:100%;
  height:clamp(190px, 27vh, 275px);
  margin-top:12px;
  border:1px solid rgba(0,0,0,.11);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
}

.pitchCanvas{ display:block; width:100%; height:100%; }

.traceKey{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:8px 0 0;
  color:var(--muted);
  font-size:12px;
  font-weight:900;
}

.targetKey,
.voiceKey,
.lowKey,
.highKey{
  display:inline-block;
  width:25px;
  height:6px;
  border-radius:99px;
}

.targetKey{ background:rgba(122,201,67,.55); }
.voiceKey{ margin-left:8px; background:var(--purple); }
.lowKey{ background:#287fb6; }
.highKey{ background:#d97808; }

.hud{
  width:min(1180px, 100%);
  margin:0 auto;
  padding:2px 0;
  min-width:0;
}

.privacyPill{
  padding:9px 12px;
  border-radius:999px;
  background:rgba(39,138,84,.09);
  color:#286b49;
  font-size:12px;
  font-weight:950;
}

.rangePicker .levelCard{
  display:block;
  min-height:126px;
}

.rangePicker .levelHead{ display:flex; }
.rangePicker .levelTitle,
.rangePicker .levelTag,
.rangePicker .levelDesc{ display:block; }

.microphoneCard{ width:min(680px, 94vw); }

.microphoneTest{
  width:min(520px, 96%);
  margin:12px auto;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(0,0,0,.025);
}

.meterLabelRow{
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:var(--muted);
  font-size:13px;
  font-weight:950;
}

.micMeter{
  height:20px;
  margin:9px 0 14px;
  border-radius:999px;
  background:rgba(0,0,0,.09);
  overflow:hidden;
}

.micMeter span{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, #7ac943, #3fa9f5, #fe921d);
  transition:width .08s linear;
}

.detectedPitch{
  min-height:64px;
  display:grid;
  place-items:center;
  color:var(--purple);
  font-size:clamp(25px, 5vw, 38px);
  line-height:1;
  font-weight:1100;
}

.detectedHelp{ color:var(--muted); font-size:12px; font-weight:850; }

@media (max-width:760px){
  .scaleSinger .gameArea{ padding:10px; }
  .activityHeader{ padding:50px 0 0; align-items:flex-start; }
  .micBadge{ padding:8px 10px; font-size:12px; }
  .notationMount{ min-height:140px; }
  .scaleCards{ grid-template-columns:repeat(5, minmax(65px, 1fr)); }
  .noteCard{ min-height:72px; border-radius:16px; }
  .notePrompt,
  .noteDetail{ display:none; }
  .matchPanel{ grid-template-columns:140px minmax(0, 1fr); }
  .hud{ align-items:flex-start; }
  .privacyPill{ display:none; }
}

@media (max-width:520px){
  .modePicker{ grid-template-columns:1fr; gap:9px; }
  .modeOption{ min-height:0; padding:15px; border-radius:17px; }
  .modeIcon{ width:46px; height:46px; border-radius:14px; font-size:27px; }
  .modeCopy strong{ font-size:22px; }
  .modeCopy span{ margin-top:5px; font-size:13px; }
  .activityHeader{ flex-direction:column; gap:7px; }
  .banner{ font-size:27px; }
  .subBanner{ font-size:14px; }
  .scaleCards{
    grid-template-columns:repeat(5, minmax(0, 1fr));
  }
  .noteCard{ min-height:58px; border-width:2px; border-radius:12px; }
  .noteNumber{ width:19px; height:19px; top:5px; left:5px; font-size:10px; }
  .noteName{ font-size:20px; }
  .keyboardPanel{ padding:8px; border-radius:15px; }
  .keyboardHeadingRow{ margin-bottom:6px; }
  .keyboardHeadingRow span{ display:none; }
  .scaleKeyboard{ height:155px; }
  .matchPanel{ grid-template-columns:1fr; }
  .targetPanel{ flex-direction:row; gap:12px; min-height:64px; }
  .targetKicker{ display:none; }
  .targetNote{ font-size:42px; }
  .pianoState{ font-size:12px; }
  .scalePanel,
  .resultsPanel{ border-radius:17px; }
  .soundButton,
  .singButton{ width:100%; min-width:0; }
  .resultHeadingRow{ align-items:flex-start; }
  .graphHeadingRow{ align-items:flex-start; }
  .graphTip{ display:none; }
  .scoreBadge{ min-width:72px; font-size:20px; }
  .traceKey{ flex-wrap:wrap; }
}

@media (max-height:680px) and (min-width:700px){
  .scaleSinger .gameArea{ gap:7px; padding-top:8px; padding-bottom:8px; }
  .banner{ font-size:30px; }
  .subBanner{ font-size:14px; }
  .notationMount{ min-height:120px; }
  .noteCard{ min-height:62px; }
  .noteName{ font-size:27px; }
  .matchPanel{ margin-top:7px; padding:9px; }
  .traceWrap{ height:175px; }
  .activityActions{ margin-top:8px; }
  .btn{ min-height:42px; padding:9px 12px; }
}