:root {
      --bg: #0a0a0c;
      --surface: #111116;
      --card: #18181f;
      --accent: #e8ff47;
      --accent-dim: rgba(232, 255, 71, 0.10);
      --red: #ff4757;
      --red-dim: rgba(255, 71, 87, 0.13);
      --green: #2ecc71;
      --green-dim: rgba(46, 204, 113, 0.13);
      --blue: #48dbfb;
      --text: #f0f0e8;
      --text-dim: #5a5a60;
      --border: rgba(255, 255, 255, 0.07);
      --mono: 'DM Mono', monospace;
      --display: 'Bebas Neue', sans-serif;
      --body: 'DM Sans', sans-serif;
      --r: 4px;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--body);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    body::after {
      content: '';
      position: fixed;
      inset: 0;
      background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.025) 2px, rgba(0, 0, 0, 0.025) 4px);
      pointer-events: none;
      z-index: 9999;
    }

    /* ── SCREENS ── */
    .screen {
      display: none;
      width: 100%;
      height: 100%;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding: 20px;
      animation: fadeIn .3s ease;
    }

    .screen.active {
      display: flex;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(8px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    /* ── TITLE ── */
    .title-eyebrow {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--text-dim);
      letter-spacing: .25em;
      text-transform: uppercase;
      margin-bottom: 16px;
    }

    .title-logo {
      font-family: var(--display);
      font-size: clamp(72px, 18vw, 140px);
      color: var(--accent);
      letter-spacing: .05em;
      line-height: .85;
      position: relative;
    }

    .title-logo::after {
      content: 'EARWORM';
      position: absolute;
      inset: 0;
      color: transparent;
      -webkit-text-stroke: 1px rgba(232, 255, 71, .12);
      transform: translate(3px, 3px);
      z-index: -1;
    }

    .title-sub {
      font-family: var(--mono);
      font-size: 13px;
      color: var(--text-dim);
      margin-top: 20px;
      margin-bottom: 32px;
      letter-spacing: .05em;
    }

    .title-sub em {
      color: var(--accent);
      font-style: normal;
    }

    /* ── LANG SELECT ── */
    .lang-select {
      display: flex;
      gap: 8px;
      justify-content: center;
      margin-bottom: 20px;
    }

    .lang-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      padding: 8px 16px;
      background: transparent;
      border: 1px solid var(--border);
      border-radius: var(--r);
      color: var(--text-dim);
      cursor: pointer;
      transition: border-color .15s, color .15s, background .15s;
      font-family: inherit;
    }

    .lang-card:hover {
      border-color: rgba(255, 255, 255, .2);
      color: var(--text);
    }

    .lang-card.active {
      border-color: var(--accent);
      color: var(--accent);
      background: var(--accent-dim);
    }

    .lang-flag { font-size: 1.1rem; line-height: 1; }
    .lang-name { font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .05em; }
    .lang-sub  { font-family: var(--mono); font-size: .6rem; opacity: .6; letter-spacing: .03em; }

    /* ── BUTTONS ── */
    .btn-primary {
      font-family: var(--display);
      font-size: 28px;
      letter-spacing: .1em;
      color: var(--bg);
      background: var(--accent);
      border: none;
      padding: 14px 56px;
      cursor: pointer;
      border-radius: var(--r);
      transition: transform .1s, box-shadow .1s;
      position: relative;
      overflow: hidden;
    }

    .btn-primary::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255, 255, 255, .2) 0%, transparent 60%);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(232, 255, 71, .3);
    }

    .btn-primary:active {
      transform: translateY(0);
    }

    .btn-secondary {
      font-family: var(--mono);
      font-size: 13px;
      letter-spacing: .1em;
      color: var(--text-dim);
      background: var(--card);
      border: 1px solid var(--border);
      padding: 12px 28px;
      cursor: pointer;
      border-radius: var(--r);
      transition: all .15s;
      text-transform: uppercase;
    }

    .btn-secondary:hover {
      border-color: rgba(255, 255, 255, .2);
      color: var(--text);
    }

    .title-note {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--text-dim);
      margin-top: 20px;
      opacity: .6;
    }

    /* ── COUNTDOWN ── */
    .countdown-label {
      font-family: var(--mono);
      font-size: 12px;
      color: var(--text-dim);
      letter-spacing: .2em;
      text-transform: uppercase;
    }

    .countdown-num {
      font-family: var(--display);
      font-size: 160px;
      color: var(--accent);
      line-height: 1;
      animation: countPop .4s cubic-bezier(.34, 1.56, .64, 1);
    }

    @keyframes countPop {
      from {
        transform: scale(1.4);
        opacity: 0
      }

      to {
        transform: scale(1);
        opacity: 1
      }
    }

    /* ── GAME HUD ── */
    .hud {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 24px;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
      flex-shrink: 0;
    }

    .hud-left,
    .hud-right {
      display: flex;
      gap: 24px;
      align-items: center;
    }

    .hud-item {
      display: flex;
      flex-direction: column;
    }

    .hud-label {
      font-family: var(--mono);
      font-size: 9px;
      color: var(--text-dim);
      letter-spacing: .15em;
      text-transform: uppercase;
    }

    .hud-value {
      font-family: var(--display);
      font-size: 26px;
      color: var(--text);
      line-height: 1;
    }

    .hud-value.accent {
      color: var(--accent);
    }

    /* lives */
    .lives {
      display: flex;
      gap: 6px;
      align-items: center;
    }

    .life {
      font-size: 18px;
      transition: transform .2s, opacity .2s;
    }

    .life.lost {
      opacity: .2;
      transform: scale(.8);
      filter: grayscale(1);
    }

    /* level bar */
    .level-track {
      width: 100%;
      height: 4px;
      background: var(--surface);
      flex-shrink: 0;
      position: relative;
    }

    .level-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--blue), var(--accent));
      transition: width .5s ease;
    }

    .level-label {
      position: absolute;
      right: 8px;
      top: 6px;
      font-family: var(--mono);
      font-size: 9px;
      color: var(--text-dim);
      letter-spacing: .1em;
    }

    /* play area */
    .play-area {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 24px;
      gap: 24px;
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
    }

    /* waveform */
    .waveform-viz {
      display: flex;
      align-items: center;
      gap: 3px;
      height: 36px;
    }

    .wave-bar {
      width: 4px;
      background: var(--accent);
      border-radius: 2px;
      transform: scaleY(.15);
      transition: transform .1s ease;
    }

    .wave-bar.active {
      animation: waveAnim .6s ease-in-out infinite;
    }

    @keyframes waveAnim {

      0%,
      100% {
        transform: scaleY(.15)
      }

      50% {
        transform: scaleY(1)
      }
    }

    /* audio button */
    .audio-btn {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      border: 2px solid var(--accent);
      background: var(--accent-dim);
      color: var(--accent);
      font-size: 28px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .15s;
      flex-shrink: 0;
    }

    .audio-btn:hover {
      background: rgba(232, 255, 71, .2);
      transform: scale(1.05);
    }

    .audio-btn.playing {
      background: var(--accent);
      color: var(--bg);
      animation: pulseRing 1.2s ease infinite;
    }

    @keyframes pulseRing {
      0% {
        box-shadow: 0 0 0 0 rgba(232, 255, 71, .4)
      }

      70% {
        box-shadow: 0 0 0 20px rgba(232, 255, 71, 0)
      }

      100% {
        box-shadow: 0 0 0 0 rgba(232, 255, 71, 0)
      }
    }

    .play-hint {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--text-dim);
      letter-spacing: .1em;
      text-align: center;
      min-height: 16px;
    }

    /* question type badge */
    .q-type-badge {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .15em;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 2px;
      border: 1px solid;
    }

    .q-type-badge.type-exact {
      color: var(--blue);
      border-color: rgba(72, 219, 251, .3);
      background: rgba(72, 219, 251, .07);
    }

    .q-type-badge.type-trap {
      color: var(--accent);
      border-color: rgba(232, 255, 71, .3);
      background: var(--accent-dim);
    }

    /* choices */
    .choices {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      width: 100%;
    }

    .choice-btn {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 16px 18px;
      cursor: pointer;
      font-family: var(--body);
      font-size: 14px;
      font-weight: 400;
      color: var(--text);
      text-align: left;
      transition: all .12s;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      position: relative;
      overflow: hidden;
      min-height: 64px;
      line-height: 1.45;
    }

    .choice-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--accent-dim);
      opacity: 0;
      transition: opacity .12s;
    }

    .choice-btn:hover:not(:disabled)::before {
      opacity: 1;
    }

    .choice-btn:hover:not(:disabled) {
      border-color: rgba(232, 255, 71, .35);
    }

    .choice-key {
      font-family: var(--mono);
      font-size: 10px;
      color: var(--text-dim);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 2px;
      padding: 2px 5px;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .choice-btn.correct {
      background: var(--green-dim);
      border-color: var(--green);
      color: var(--green);
    }

    .choice-btn.correct .choice-key {
      border-color: var(--green);
      color: var(--green);
      background: transparent;
    }

    .choice-btn.wrong {
      background: var(--red-dim);
      border-color: var(--red);
      color: var(--red);
    }

    .choice-btn:disabled {
      cursor: default;
    }

    /* streak */
    .streak-display {
      font-family: var(--display);
      font-size: 18px;
      color: var(--accent);
      letter-spacing: .1em;
      opacity: 0;
      transition: opacity .3s;
      text-align: center;
      min-height: 24px;
    }

    .streak-display.visible {
      opacity: 1;
    }

    .streak-display.life-up {
      color: var(--green);
    }

    /* feedback flash */
    .feedback-flash {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 100;
      opacity: 0;
      transition: opacity .15s;
    }

    .feedback-flash.correct-flash {
      background: rgba(46, 204, 113, .07);
    }

    .feedback-flash.wrong-flash {
      background: rgba(255, 71, 87, .1);
    }

    .feedback-flash.show {
      opacity: 1;
    }

    /* miss indicator */
    .miss-shake {
      animation: shake .4s ease;
    }

    @keyframes shake {

      0%,
      100% {
        transform: translateX(0)
      }

      20% {
        transform: translateX(-8px)
      }

      40% {
        transform: translateX(8px)
      }

      60% {
        transform: translateX(-6px)
      }

      80% {
        transform: translateX(6px)
      }
    }

    /* ── GAME OVER ── */
    #screen-gameover {
      gap: 20px;
      text-align: center;
    }

    .go-title {
      font-family: var(--display);
      font-size: 72px;
      color: var(--red);
      line-height: 1;
    }

    .go-score {
      font-family: var(--display);
      font-size: 80px;
      color: var(--text);
      line-height: 1;
    }

    .go-score span {
      font-family: var(--mono);
      font-size: 12px;
      color: var(--text-dim);
      display: block;
      margin-bottom: 6px;
      letter-spacing: .1em;
    }

    .go-stats {
      display: flex;
      gap: 28px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .stat-block {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .stat-val {
      font-family: var(--display);
      font-size: 36px;
      line-height: 1;
    }

    .stat-val.good {
      color: var(--green);
    }

    .stat-val.bad {
      color: var(--red);
    }

    .stat-val.hi {
      color: var(--accent);
    }

    .stat-lbl {
      font-family: var(--mono);
      font-size: 10px;
      color: var(--text-dim);
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .go-level {
      font-family: var(--mono);
      font-size: 13px;
      color: var(--text-dim);
    }

    .go-level em {
      color: var(--accent);
      font-style: normal;
    }

    .go-btns {
      display: flex;
      gap: 12px;
      margin-top: 8px;
    }