/*
  EarTrain — dark / minimal UI + stable piano keyboard layout.
*/

:root {
  /* Dark, warm “neon studio” palette (less blue/teal, more magenta/coral) */
  --bg0: #0b0612;
  --bg1: #12060f;
  --bg2: #070812;

  --text: rgba(255, 246, 250, 0.94);
  --muted: rgba(255, 246, 250, 0.62);
  --card: rgba(18, 10, 22, 0.72);
  --cardStroke: rgba(255, 255, 255, 0.12);
  --shadow: 0 22px 70px rgba(0, 0, 0, 0.58);

  --neonA: #ff4fd8; /* magenta */
  --neonB: #ff7a59; /* coral */
  --neonC: #b56cff; /* violet */
  --neonD: #ffd38a; /* amber */

  --good: #22c55e;

  --kbdWhite: #fff3f7;
  --kbdBlack: #07060c;
  --kbdBlackStroke: rgba(255, 255, 255, 0.14);

  --radius: 22px;
  --radiusSm: 14px;

  --kbd-h: clamp(240px, 24vh, 330px);

  --font: "Outfit", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(900px 520px at 18% 12%, rgba(255, 79, 216, 0.16), transparent 58%),
    radial-gradient(900px 520px at 82% 18%, rgba(255, 122, 89, 0.12), transparent 60%),
    radial-gradient(900px 520px at 55% 92%, rgba(181, 108, 255, 0.12), transparent 62%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 52%, var(--bg2));
}

.bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.grain {
  position: absolute;
  inset: -20%;
  opacity: 0.12;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  background-size: 260px 260px;
  mix-blend-mode: soft-light;
}
.glow {
  position: absolute;
  width: 820px;
  height: 820px;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.34;
}
.glow-a {
  left: -260px;
  top: -300px;
  background: radial-gradient(circle at 30% 30%, rgba(255, 122, 89, 0.55), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(255, 79, 216, 0.55), transparent 62%);
}
.glow-b {
  right: -320px;
  bottom: -360px;
  background: radial-gradient(circle at 40% 40%, rgba(181, 108, 255, 0.55), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(255, 211, 138, 0.45), transparent 62%);
}

.shell {
  position: relative;
  width: min(1200px, calc(100% - 28px));
  margin: 18px auto 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 14px;
  min-width: 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: start;
}
.logo {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  border: 1px solid var(--cardStroke);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.55);
}
.brandName {
  font-weight: 800;
  letter-spacing: 0.2px;
  font-size: 18px;
  line-height: 1.1;
}
.brandTag {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}

.modes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  justify-self: end;
  min-width: 0;
}

.topbarTitle {
  margin: 0;
  justify-self: center;
  text-align: center;
  font-size: clamp(17px, 2.2vw, 28px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.4px;
  min-width: 0;
  max-width: min(520px, 100%);
}
.chip {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.10);
  color: rgba(245, 248, 255, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.28);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.chip:hover { transform: translateY(-1px); box-shadow: 0 18px 45px rgba(0, 0, 0, 0.38); background: rgba(255, 255, 255, 0.13); }
.chip.isActive {
  background: linear-gradient(135deg, rgba(255, 79, 216, 0.30), rgba(255, 122, 89, 0.22));
  border-color: rgba(255, 122, 89, 0.42);
}
.chip.isDisabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.workspace {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.panelLeft {
  background: var(--card);
  border: 1px solid var(--cardStroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 18px 22px 18px;
  overflow-x: hidden;
}

.keyboardDock {
  background: var(--card);
  border: 1px solid var(--cardStroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 16px 16px 14px;
}

.keyboardDockHeader { display: none; }

.titleAccent {
  background: linear-gradient(90deg, var(--neonA), var(--neonB), var(--neonC), var(--neonD));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.subtitle {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.actionRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(420px, 44%));
  gap: 14px;
  align-items: start;
  margin: 12px 0 14px;
}

.actionLeft {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.actionRight {
  display: grid;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

.controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.exerciseHero {
  margin: 4px 0 2px;
  min-width: 0;
}
.exerciseHero[hidden] {
  display: none !important;
}
.exerciseHeroLine {
  font-size: clamp(26px, 5.4vw, 52px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.05;
  margin: 0;
  background: linear-gradient(92deg, var(--neonA), var(--neonB) 42%, var(--neonC) 78%, var(--neonD));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.btn {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  padding: 14px 16px;
  font-weight: 800;
  letter-spacing: 0.1px;
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, opacity 120ms ease;
  user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn[disabled] {
  opacity: 0.72;
  cursor: not-allowed;
  filter: saturate(0.92);
}

.btnPrimary {
  color: rgba(12, 6, 10, 0.92);
  border-color: rgba(255, 79, 216, 0.45);
  background: linear-gradient(135deg, rgba(255, 122, 89, 0.95), rgba(255, 79, 216, 0.92));
  box-shadow: 0 18px 55px rgba(255, 79, 216, 0.16);
}
.btnPrimary:hover { box-shadow: 0 22px 70px rgba(255, 122, 89, 0.22); transform: translateY(-1px); }
.btnGhost {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(245, 248, 255, 0.96);
  border-color: rgba(255, 255, 255, 0.22);
}
.btnGhost:hover {
  background: rgba(255, 255, 255, 0.16);
}
.btnSoft {
  color: rgba(245, 248, 255, 0.96);
  background: linear-gradient(135deg, rgba(181, 108, 255, 0.22), rgba(255, 211, 138, 0.16));
  border-color: rgba(255, 255, 255, 0.24);
}
.btnSoft:hover {
  box-shadow: 0 18px 55px rgba(181, 108, 255, 0.16);
}
.btnIcon {
  width: 28px;
  height: 28px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.status {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pill {
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--cardStroke);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(233, 238, 252, 0.82);
  font-weight: 700;
  font-size: 13px;
}

.resultCard {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  border-radius: var(--radiusSm);
  border: 1px solid rgba(255, 79, 216, 0.20);
  background: linear-gradient(135deg, rgba(255, 79, 216, 0.10), rgba(181, 108, 255, 0.08));
  padding: 0 14px;
  height: 38px;
  margin-top: 6px;
  min-width: 0;
}
.resultTitle {
  font-weight: 900;
  font-size: 13px;
  letter-spacing: -0.2px;
  white-space: nowrap;
}
.resultBody {
  font-size: 13px;
  color: rgba(233, 238, 252, 0.74);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.optionsPanel {
  border: 1px solid var(--cardStroke);
  border-radius: var(--radiusSm);
  background: rgba(255, 255, 255, 0.04);
  padding: 10px 12px 12px;
}

.optionsTitle {
  font-weight: 900;
  letter-spacing: -0.2px;
  margin-bottom: 8px;
}

.optionsGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.field {
  display: grid;
  gap: 6px;
  font-weight: 800;
  font-size: 13px;
  color: rgba(233, 238, 252, 0.84);
  min-width: 0;
}

.heroTitleRow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 4px;
  font-weight: 800;
  font-size: 14px;
  color: rgba(233, 238, 252, 0.82);
  cursor: pointer;
  user-select: none;
  width: fit-content;
  max-width: 100%;
}
.heroTitleRow input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--neonA);
  cursor: pointer;
}

select {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 11px 12px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(233, 238, 252, 0.92);
  font-family: var(--font);
  font-weight: 700;
  width: 100%;
  max-width: 100%;
}

.kbdTitle { font-weight: 900; letter-spacing: -0.2px; }

.keyboard {
  position: relative;
  height: var(--kbd-h);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background:
    radial-gradient(900px 240px at 50% 20%, rgba(255, 79, 216, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(18, 10, 22, 0.95), rgba(7, 6, 12, 0.92));
  overflow: hidden;
  padding: 12px;
}

.keyboardInner {
  position: absolute;
  inset: 12px;
}

.kbdStrip {
  position: absolute;
  inset: 0;
}

.whiteStrip {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 0;
  align-items: stretch;
}

.whiteStrip .key {
  flex: 1 1 0;
  min-width: 0;
}

.blackStrip {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 62%;
  pointer-events: none;
}

.key {
  position: relative;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: linear-gradient(180deg, #ffffff, rgba(255, 240, 246, 0.78));
  box-shadow:
    inset 0 -6px 10px rgba(2, 6, 23, 0.10),
    0 10px 18px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  user-select: none;
  transition: transform 80ms ease, box-shadow 120ms ease, background 120ms ease;
  display: grid;
  align-content: end;
}
.key:hover { transform: translateY(-1px); box-shadow: 0 12px 22px rgba(0, 0, 0, 0.34); }
.key:active { transform: translateY(1px); }

/* Computer-keyboard active state (keydown held) */
.key.isKbdActive {
  transform: translateY(2px);
  background: color-mix(in srgb, #2f6bff 18%, #ffffff);
  box-shadow: 0 2px 6px rgba(47, 107, 255, 0.25);
}
.keyBlack.isKbdActive {
  transform: translateY(2px);
  background: color-mix(in srgb, #2f6bff 50%, var(--kbdBlack));
  filter: brightness(1.18);
}

/* Subtle keyboard shortcut hint on each piano key */
.kbdHint {
  display: block;
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: rgba(15, 23, 42, 0.13);
  user-select: none;
  pointer-events: none;
}
.keyBlack .kbdHint {
  color: rgba(255, 255, 255, 0.15);
  bottom: 3px;
  font-size: 7px;
}

.keyLabel {
  padding: 10px 8px 12px;
  font-weight: 900;
  color: rgba(15, 23, 42, 0.34);
  font-size: 12px;
  letter-spacing: 0.2px;
  user-select: none;
  opacity: 0.0; /* keep keyboard realistic */
}
.key:hover .keyLabel { opacity: 0.45; }

.keyBlack {
  position: absolute;
  top: 0;
  /* Width/left are set by JS after first layout tick */
  height: 100%;
  visibility: hidden;
  border-radius: 6px;
  border: 1px solid var(--kbdBlackStroke);
  background: linear-gradient(180deg, #1a1426, var(--kbdBlack));
  box-shadow:
    inset 0 -6px 10px rgba(0, 0, 0, 0.35),
    0 12px 22px rgba(0, 0, 0, 0.40);
  cursor: pointer;
  user-select: none;
  pointer-events: auto;
  transition: transform 80ms ease, filter 120ms ease, background 120ms ease;
  display: grid;
  align-content: end;
}

.keyBlack[data-placed="1"] {
  visibility: visible;
}
.keyBlack:hover { transform: translateY(-1px); filter: brightness(1.08); }
.keyBlack:active { transform: translateY(1px); }
.keyBlack .keyLabel { color: rgba(255, 255, 255, 0.72); font-size: 11px; opacity: 0; }
.keyBlack:hover .keyLabel { opacity: 0.5; }

/* Single highlight color (vibrant blue) for all revealed/active keys */
.key.isLit,
.key.isLitA,
.key.isLitB,
.key.isLitC,
.key.isLitD {
  transform: translateY(-1px);
  background: color-mix(in srgb, #2f6bff 44%, #ffffff);
  border-color: color-mix(in srgb, #2f6bff 58%, rgba(255, 255, 255, 0.14));
}

.keyBlack.isLit,
.keyBlack.isLitA,
.keyBlack.isLitB,
.keyBlack.isLitC,
.keyBlack.isLitD {
  transform: translateY(-1px);
  background: color-mix(in srgb, #2f6bff 62%, var(--kbdBlack));
  border-color: color-mix(in srgb, #2f6bff 52%, rgba(255, 255, 255, 0.14));
}

/* ── Echo key states ── */
.key.isEchoCorrect {
  transform: translateY(-1px);
  background: color-mix(in srgb, #22c55e 46%, #ffffff);
  border-color: color-mix(in srgb, #22c55e 60%, rgba(255, 255, 255, 0.14));
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.35);
}
.keyBlack.isEchoCorrect {
  transform: translateY(-1px);
  background: color-mix(in srgb, #22c55e 64%, var(--kbdBlack));
  border-color: color-mix(in srgb, #22c55e 54%, rgba(255, 255, 255, 0.14));
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.35);
}
.key.isEchoWrong {
  transform: translateY(-1px);
  background: color-mix(in srgb, #ef4444 44%, #ffffff);
  border-color: color-mix(in srgb, #ef4444 58%, rgba(255, 255, 255, 0.14));
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.35);
}
.keyBlack.isEchoWrong {
  transform: translateY(-1px);
  background: color-mix(in srgb, #ef4444 62%, var(--kbdBlack));
  border-color: color-mix(in srgb, #ef4444 52%, rgba(255, 255, 255, 0.14));
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.35);
}

@media (max-width: 1120px) {
  .actionRow {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .topbar {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .brand {
    justify-self: start;
  }
  .topbarTitle {
    justify-self: center;
    max-width: 100%;
  }
  .modes {
    justify-self: stretch;
    justify-content: flex-start;
  }
}

@media (max-width: 520px) {
  .shell { width: calc(100% - 22px); margin: 16px auto 22px; }
  .optionsGrid { grid-template-columns: 1fr; }
  .keyboard { padding: 10px; }
  :root {
    --kbd-h: clamp(220px, 30vh, 305px);
  }
}

/* --- EarTrain app login gate (index.html in /eartrain/) */
body.eartrainShellLocked #eartrainAppRoot {
  pointer-events: none;
  user-select: none;
}

.eartrainGate {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: radial-gradient(720px 420px at 50% 20%, rgba(255, 79, 216, 0.14), transparent 60%),
    rgba(7, 6, 12, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.eartrainGate[hidden] {
  display: none !important;
}

.eartrainGateCard {
  width: min(400px, 100%);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(18, 10, 22, 0.92);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55);
  padding: 22px 20px 20px;
}

.eartrainGateTitle {
  margin: 0 0 8px;
  font-weight: 900;
  letter-spacing: -0.03em;
  font-size: 26px;
}

.eartrainGateHint {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
}

.eartrainGateField {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  font-weight: 800;
  font-size: 13px;
  color: rgba(233, 238, 252, 0.84);
}

.eartrainGateField input {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 11px 12px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(245, 248, 255, 0.96);
  font-family: var(--font);
  font-weight: 700;
  font-size: 15px;
}

.eartrainGateErr {
  margin: 0 0 12px;
  color: #fb7185;
  font-weight: 700;
  font-size: 14px;
}

.eartrainGateBtn {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}

/* ======================================================
   GAME HUD — Scoreboard
   ====================================================== */
.scoreboard {
  display: flex;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radiusSm);
  overflow: hidden;
  margin-bottom: 10px;
  flex-shrink: 0;
}

.scoreCell {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 6px 8px;
  gap: 4px;
  transition: background 300ms ease;
}

.scoreDiv {
  width: 1px;
  background: rgba(255, 255, 255, 0.09);
  flex-shrink: 0;
  align-self: stretch;
}

.scoreBig {
  font-size: clamp(18px, 2.8vw, 28px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text);
  transition: transform 180ms cubic-bezier(.22,.68,0,1.4), color 200ms;
}

.scoreAcc {
  background: linear-gradient(90deg, var(--neonA), var(--neonB));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.scoreStreakNum {
  background: linear-gradient(90deg, #ffd700, #ffaa00);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: transform 180ms cubic-bezier(.22,.68,0,1.4), font-size 200ms;
}

.scoreBest {
  background: linear-gradient(90deg, var(--neonC), var(--neonD));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.scoreTag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.10em;
  color: rgba(255, 246, 250, 0.38);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 300ms;
}

.scoreCell#scoreStreakCell.isHot .scoreTag { color: #ffaa00; }
.scoreCell#scoreStreakCell.isOnFire .scoreTag { color: #ff6600; }

/* Bump animation when score changes */
@keyframes kfScoreBump {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}
.scoreBumpAnim { animation: kfScoreBump 260ms cubic-bezier(.22,.68,0,1.4) forwards; }

/* ======================================================
   GAME — Answer Buttons
   ====================================================== */
.answerZone {
  margin-top: 12px;
}

.answerZone[hidden] { display: none !important; }

.answerHdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
}

.answerHint {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 246, 250, 0.42);
}

.answerGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.answerBtn {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(245, 248, 255, 0.95);
  border-radius: 12px;
  padding: 10px 18px;
  font-family: var(--font);
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: transform 80ms ease, background 90ms ease,
              box-shadow 90ms ease, border-color 90ms ease,
              color 90ms ease, opacity 200ms ease;
  user-select: none;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.answerBtn:hover:not([disabled]) {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.13);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.24);
  border-color: rgba(255, 255, 255, 0.22);
}

.answerBtn:active:not([disabled]) { transform: translateY(1px); }

.answerBtn[disabled] {
  pointer-events: none;
  opacity: 0.38;
}

/* Correct choice — green glow */
.answerBtn.hitCorrect {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.30), rgba(16, 185, 129, 0.18));
  border-color: rgba(34, 197, 94, 0.60);
  color: #4ade80;
  opacity: 1 !important;
  transform: scale(1.05);
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.22);
}

/* Wrong choice — red */
.answerBtn.hitWrong {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.28), rgba(220, 38, 38, 0.16));
  border-color: rgba(239, 68, 68, 0.55);
  color: #f87171;
  opacity: 1 !important;
}

/* Reveal correct button when user was wrong */
.answerBtn.showCorrect {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.20), rgba(16, 185, 129, 0.12));
  border-color: rgba(34, 197, 94, 0.42);
  color: #86efac;
  opacity: 1 !important;
}

/* ======================================================
   GAME — Result Card Flash Animations
   ====================================================== */
@keyframes kfFlashCorrect {
  0%, 25% {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.30), rgba(16, 185, 129, 0.20));
    border-color: rgba(34, 197, 94, 0.60);
    box-shadow: 0 0 32px rgba(34, 197, 94, 0.22);
  }
  100% {
    background: linear-gradient(135deg, rgba(255, 79, 216, 0.12), rgba(181, 108, 255, 0.10));
    border-color: rgba(255, 79, 216, 0.28);
    box-shadow: none;
  }
}

@keyframes kfFlashWrong {
  0%, 25% {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.30), rgba(220, 38, 38, 0.20));
    border-color: rgba(239, 68, 68, 0.60);
    box-shadow: 0 0 32px rgba(239, 68, 68, 0.22);
  }
  100% {
    background: linear-gradient(135deg, rgba(255, 79, 216, 0.12), rgba(181, 108, 255, 0.10));
    border-color: rgba(255, 79, 216, 0.28);
    box-shadow: none;
  }
}

.resultCard.flashCorrect {
  animation: kfFlashCorrect 1.5s ease forwards;
}

.resultCard.flashWrong {
  animation: kfFlashWrong 2.5s ease forwards;
}

/* ======================================================
   GAME — Countdown Timer
   ====================================================== */
.timerWrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.timerTrack {
  flex: 1;
  height: 7px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.timerBar {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  /* Only width transitions — background/animation are instant/separate */
  will-change: width;
}

.timerBar.isGreen  { background: #22c55e; }
.timerBar.isYellow { background: #eab308; }
.timerBar.isRed    { background: #ef4444; }

@keyframes kfTimerBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}
.timerBar.isRed {
  animation: kfTimerBlink 0.42s ease infinite;
}

.timerLabel {
  font-size: 12px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: rgba(255, 246, 250, 0.50);
  min-width: 28px;
  text-align: right;
  transition: color 300ms;
}
.timerLabel.isYellow { color: #eab308; }
.timerLabel.isRed    { color: #ef4444; }

/* ======================================================
   ECHO MODE
   ====================================================== */
.echoZone {
  margin-top: 12px;
  padding: 14px 16px 16px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radiusSm);
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.echoZone[hidden] { display: none !important; }

.echoLevelPicker {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.echoPickerLabel {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 246, 250, 0.42);
  margin-right: 2px;
}

.echoLvlBtn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(245, 248, 255, 0.75);
  font-family: var(--font);
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  transition: transform 80ms ease, background 100ms ease, border-color 100ms ease, color 100ms ease;
  display: grid;
  place-items: center;
  user-select: none;
}

.echoLvlBtn:hover:not(.isActive) {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}

.echoLvlBtn.isActive {
  background: linear-gradient(135deg, rgba(255, 79, 216, 0.30), rgba(181, 108, 255, 0.22));
  border-color: rgba(255, 79, 216, 0.45);
  color: var(--neonA);
}

.echoTopRow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.echoLevelBadge {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 79, 216, 0.22), rgba(181, 108, 255, 0.18));
  border: 1px solid rgba(255, 79, 216, 0.30);
  color: var(--neonA);
}

.echoLevelProgress {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 246, 250, 0.45);
  letter-spacing: 0.04em;
}
.echoLevelProgress.isMaxLevel {
  color: var(--neonD);
  font-weight: 900;
}

/* Note dots row */
.echoDots {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 24px;
}

.echoDot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease,
              transform 180ms cubic-bezier(.22,.68,0,1.4);
  flex-shrink: 0;
}

.echoDot.done {
  background: #22c55e;
  border-color: #22c55e;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.45);
  transform: scale(1.15);
}

@keyframes echoCurrentPulse {
  0%, 100% { border-color: rgba(255, 79, 216, 0.55); box-shadow: 0 0 6px rgba(255,79,216,0.3); }
  50%       { border-color: rgba(255, 79, 216, 0.95); box-shadow: 0 0 14px rgba(255,79,216,0.6); }
}
.echoDot.current {
  animation: echoCurrentPulse 0.75s ease infinite;
}

/* Status line */
.echoStatus {
  font-size: 14px;
  font-weight: 800;
  color: rgba(255, 246, 250, 0.60);
  letter-spacing: 0.01em;
  min-height: 20px;
  transition: color 200ms;
}
.echoStatus.isListening { color: var(--neonD); }
.echoStatus.isWaiting   { color: var(--neonA); }
.echoStatus.isCorrect   { color: #4ade80; }
.echoStatus.isWrong     { color: #f87171; }

/* Level-up flash on echoZone */
@keyframes kfLevelUp {
  0%   { border-color: rgba(255,211,138,0.70); box-shadow: 0 0 28px rgba(255,211,138,0.28); }
  60%  { border-color: rgba(255,211,138,0.50); box-shadow: 0 0 20px rgba(255,211,138,0.18); }
  100% { border-color: rgba(255,255,255,0.09); box-shadow: none; }
}
.echoZone.levelUpFlash {
  animation: kfLevelUp 1.2s ease forwards;
}

.timerPauseBtn {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(245, 248, 255, 0.75);
  font-size: 11px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 100ms ease, transform 80ms ease, border-color 100ms ease;
  user-select: none;
  line-height: 1;
}
.timerPauseBtn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.24);
  transform: scale(1.08);
}
.timerPauseBtn:active { transform: scale(0.92); }
.timerPauseBtn.isPaused {
  background: linear-gradient(135deg, rgba(255, 79, 216, 0.22), rgba(255, 122, 89, 0.18));
  border-color: rgba(255, 122, 89, 0.40);
  color: var(--neonB);
}