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

    :root {
      --bg:         #F0EEF8;
      --surface:    #FFFFFF;
      --surface2:   #F5F3FC;
      --border:     #E3DFF2;
      --border2:    #C4BCE0;
      --text:       #1A1626;
      --muted:      #6B6480;
      --accent:     #8B3FE8;
      --accent2:    #5B3FD4;
      --accent-lt:  #F2EDFB;
      --accent-grad: linear-gradient(135deg, #A855F7 0%, #6B3FE8 60%, #4F3FD4 100%);
      --human:      #16A34A;
      --human-lt:   #DCFCE7;
      --human-mid:  #BBF7D0;
      --ai:         #DC2626;
      --ai-lt:      #FEE2E2;
      --ai-mid:     #FECACA;
      --gold:       #D97706;
      --gold-lt:    #FEF3C7;
    }

    html, body {
      min-height: 100%;
      background: var(--bg);
      color: var(--text);
      font-family: 'DM Sans', sans-serif;
    }

    body {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 32px 24px;
      min-height: 100vh;
    }

    /* subtle dot pattern */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image: radial-gradient(circle, #C8BEE8 1px, transparent 1px);
      background-size: 28px 28px;
      opacity: 0.45;
      pointer-events: none;
      z-index: 0;
    }

    .app {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 720px;
    }

    /* ── Screens ── */
    .screen { display: none; }
    .screen.active { display: block; }

    /* ── Card ── */
    .card {
      background: var(--surface);
      border-radius: 24px;
      padding: 52px 56px;
      width: 100%;
    }

    /* ── Eyebrow ── */
    .eyebrow {
      font-family: 'DM Mono', monospace;
      font-size: 12px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .eyebrow::before {
      content: '';
      display: inline-block;
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--accent);
    }

    /* ── Progress ── */
    .progress-track {
      display: flex;
      gap: 10px;
      margin-bottom: 40px;
    }
    .progress-pip {
      flex: 1;
      height: 5px;
      border-radius: 3px;
      background: var(--border);
      transition: background 0.35s, transform 0.35s;
    }
    .progress-pip.done   { background: var(--accent); }
    .progress-pip.active { background: var(--accent); opacity: 0.35; }

    /* ── Headings ── */
    h1 { font-size: 36px; font-weight: 600; line-height: 1.2; margin-bottom: 14px; letter-spacing: -0.5px; }
    h2 { font-size: 24px; font-weight: 600; line-height: 1.3; margin-bottom: 10px; letter-spacing: -0.3px; }
    p.lead { font-size: 17px; color: var(--muted); line-height: 1.65; }

    /* ── Audio player ── */
    .player-wrap {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 28px 28px 24px;
      margin: 32px 0;
    }

    /* Waveform bars */
    .waveform {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      height: 56px;
      margin-bottom: 20px;
    }
    .waveform .bar {
      width: 4px;
      border-radius: 2px;
      background: var(--border2);
      transition: background 0.3s;
    }
    .waveform.playing .bar { background: var(--accent); }
    /* idle static heights */
    .waveform .bar:nth-child(1)  { height: 14px; }
    .waveform .bar:nth-child(2)  { height: 24px; }
    .waveform .bar:nth-child(3)  { height: 36px; }
    .waveform .bar:nth-child(4)  { height: 20px; }
    .waveform .bar:nth-child(5)  { height: 44px; }
    .waveform .bar:nth-child(6)  { height: 32px; }
    .waveform .bar:nth-child(7)  { height: 52px; }
    .waveform .bar:nth-child(8)  { height: 28px; }
    .waveform .bar:nth-child(9)  { height: 44px; }
    .waveform .bar:nth-child(10) { height: 18px; }
    .waveform .bar:nth-child(11) { height: 36px; }
    .waveform .bar:nth-child(12) { height: 48px; }
    .waveform .bar:nth-child(13) { height: 24px; }
    .waveform .bar:nth-child(14) { height: 40px; }
    .waveform .bar:nth-child(15) { height: 16px; }
    .waveform .bar:nth-child(16) { height: 52px; }
    .waveform .bar:nth-child(17) { height: 30px; }
    .waveform .bar:nth-child(18) { height: 42px; }
    .waveform .bar:nth-child(19) { height: 20px; }
    .waveform .bar:nth-child(20) { height: 34px; }
    .waveform .bar:nth-child(21) { height: 12px; }
    .waveform .bar:nth-child(22) { height: 28px; }
    .waveform .bar:nth-child(23) { height: 44px; }
    .waveform .bar:nth-child(24) { height: 18px; }
    .waveform .bar:nth-child(25) { height: 38px; }
    .waveform .bar:nth-child(26) { height: 52px; }
    .waveform .bar:nth-child(27) { height: 26px; }
    .waveform .bar:nth-child(28) { height: 40px; }
    .waveform .bar:nth-child(29) { height: 16px; }
    .waveform .bar:nth-child(30) { height: 30px; }
    /* animation when playing */
    @keyframes wavePulse { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(0.35); } }
    .waveform.playing .bar { animation: wavePulse 0.8s ease-in-out infinite; }
    .waveform.playing .bar:nth-child(odd)  { animation-delay: 0s; }
    .waveform.playing .bar:nth-child(even) { animation-delay: 0.4s; }
    .waveform.playing .bar:nth-child(3n)   { animation-duration: 0.65s; }
    .waveform.playing .bar:nth-child(4n)   { animation-duration: 1s; }

    /* play row */
    .play-row {
      display: flex;
      align-items: center;
      gap: 18px;
    }
    .play-btn {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      border: none;
      background: var(--accent);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: transform 0.15s, box-shadow 0.15s;
      box-shadow: 0 4px 14px rgba(91,95,232,0.35);
    }
    .play-btn:hover  { transform: scale(1.06); box-shadow: 0 6px 18px rgba(91,95,232,0.45); }
    .play-btn:active { transform: scale(0.96); }
    .play-btn svg { width: 26px; height: 26px; fill: #fff; }

    .player-right { flex: 1; min-width: 0; }
    .player-label {
      font-family: 'DM Mono', monospace;
      font-size: 12px;
      color: var(--muted);
      letter-spacing: 0.06em;
      margin-bottom: 8px;
    }
    .seek-track {
      position: relative;
      height: 6px;
      background: var(--border);
      border-radius: 3px;
      cursor: pointer;
    }
    .seek-fill {
      position: absolute;
      left: 0; top: 0; bottom: 0;
      background: var(--accent);
      border-radius: 3px;
      width: 0%;
      transition: width 0.1s linear;
      pointer-events: none;
    }
    .player-time {
      font-family: 'DM Mono', monospace;
      font-size: 12px;
      color: var(--muted);
      margin-top: 6px;
    }

    /* ── Question ── */
    .question-text {
      font-size: 20px;
      font-weight: 500;
      line-height: 1.5;
      margin: 0 0 28px;
      color: var(--text);
    }

    /* ── Answer buttons ── */
    .answers {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 12px;
    }
    .answer-btn {
      border: 2px solid var(--border);
      background: var(--surface);
      border-radius: 20px;
      padding: 28px 20px 24px;
      cursor: pointer;
      text-align: center;
      transition: border-color 0.2s, background 0.2s, transform 0.15s, box-shadow 0.15s;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      color: var(--text);
      font-family: inherit;
      min-height: 160px;
      justify-content: center;
    }
    .answer-btn:hover:not(:disabled) {
      border-color: var(--accent);
      background: var(--accent-lt);
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(91,95,232,0.12);
    }
    .answer-btn:active:not(:disabled) { transform: translateY(0); }

    /* icon circles */
    .answer-btn .icon-wrap {
      width: 64px;
      height: 56px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .answer-btn.human .icon-wrap { background: var(--human-lt); }
    .answer-btn.ai    .icon-wrap { background: var(--ai-lt); }
    .answer-btn .icon-wrap svg { width: 32px; height: 32px; }
    .answer-btn.human .icon-wrap svg { stroke: var(--human); }
    .answer-btn.ai    .icon-wrap svg { stroke: var(--ai); }

    .answer-btn .btn-label   { font-size: 18px; font-weight: 600; }
    .answer-btn .btn-sub     { font-size: 13px; color: var(--muted); }

    /* states */
    .answer-btn.selected.correct  { border-color: var(--human); background: var(--human-lt); }
    .answer-btn.selected.wrong    { border-color: var(--ai);    background: var(--ai-lt);    }
    .answer-btn.reveal-correct    { border-color: var(--human); background: var(--human-lt); }
    .answer-btn:disabled { cursor: default; transform: none !important; box-shadow: none !important; }

    /* ── Feedback ── */
    .feedback {
      display: none;
      align-items: center;
      gap: 12px;
      padding: 16px 20px;
      border-radius: 14px;
      font-size: 16px;
      font-weight: 500;
      margin: 20px 0 4px;
    }
    .feedback svg { width: 22px; height: 22px; flex-shrink: 0; }
    .feedback.correct { background: var(--human-lt); color: var(--human); border: 1px solid var(--human-mid); }
    .feedback.wrong   { background: var(--ai-lt);    color: var(--ai);    border: 1px solid var(--ai-mid);    }
    .feedback.show    { display: flex; }

    /* ── Buttons ── */
    .next-btn {
      width: 100%;
      padding: 20px;
      background: var(--accent);
      border: none;
      border-radius: 16px;
      color: #fff;
      font-family: inherit;
      font-size: 17px;
      font-weight: 600;
      cursor: pointer;
      margin-top: 20px;
      display: none;
      transition: opacity 0.2s, transform 0.15s, box-shadow 0.15s;
      box-shadow: 0 4px 14px rgba(91,95,232,0.3);
      letter-spacing: -0.2px;
    }
    .next-btn:hover  { opacity: 0.92; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(91,95,232,0.38); }
    .next-btn.show   { display: block; }

    /* ── Intro badge ── */
    .badge-row { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--accent-lt);
      border: 1px solid rgba(91,95,232,0.2);
      border-radius: 100px;
      padding: 8px 16px;
      font-size: 13px;
      font-weight: 500;
      color: var(--accent);
    }
    .badge svg { width: 16px; height: 16px; stroke: var(--accent); }

    .rules {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin: 32px 0 0;
    }
    .rule {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      font-size: 16px;
      color: var(--muted);
      line-height: 1.5;
    }
    .rule-num {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--surface2);
      border: 1.5px solid var(--border2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'DM Mono', monospace;
      font-size: 13px;
      color: var(--accent);
      flex-shrink: 0;
      font-weight: 500;
    }
    .start-btn {
      width: 100%;
      padding: 22px;
      background: var(--accent);
      border: none;
      border-radius: 16px;
      color: #fff;
      font-family: inherit;
      font-size: 18px;
      font-weight: 600;
      cursor: pointer;
      margin-top: 40px;
      transition: opacity 0.2s, transform 0.15s;
      box-shadow: 0 4px 18px rgba(91,95,232,0.32);
      letter-spacing: -0.2px;
    }
    .start-btn:hover  { opacity: 0.92; transform: translateY(-2px); }
    .start-btn:active { transform: translateY(0); }

    /* ── Score ring ── */
    .score-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 32px;
    }
    .score-ring {
      position: relative;
      width: 148px;
      height: 148px;
    }
    .score-ring svg { position: absolute; inset: 0; }
    .score-inner {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .score-big   { font-size: 44px; font-weight: 600; letter-spacing: -2px; line-height: 1; }
    .score-denom { font-size: 16px; color: var(--muted); font-family: 'DM Mono', monospace; margin-top: 2px; }

    .result-title {
      text-align: center;
      font-size: 26px;
      font-weight: 600;
      margin-bottom: 10px;
      letter-spacing: -0.4px;
    }
    .result-sub {
      text-align: center;
      color: var(--muted);
      font-size: 16px;
      margin-bottom: 32px;
      line-height: 1.65;
    }

    .answer-recap { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
    .recap-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--surface2);
      border-radius: 12px;
      padding: 14px 18px;
      font-size: 15px;
    }
    .recap-row .rq { color: var(--muted); }
    .recap-tag {
      font-family: 'DM Mono', monospace;
      font-size: 12px;
      padding: 4px 12px;
      border-radius: 100px;
      font-weight: 500;
    }
    .recap-tag.correct { background: var(--human-lt); color: var(--human); }
    .recap-tag.wrong   { background: var(--ai-lt);    color: var(--ai); }

    .stats-row { display: flex; gap: 14px; margin-bottom: 28px; }
    .stat-pill {
      flex: 1;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 18px 14px;
      text-align: center;
    }
    .stat-val  { font-size: 28px; font-weight: 600; margin-bottom: 4px; letter-spacing: -0.5px; }
    .stat-lbl  { font-size: 12px; color: var(--muted); font-family: 'DM Mono', monospace; letter-spacing: 0.04em; }

    /* countdown */
    .countdown-wrap { text-align: center; margin-bottom: 24px; }
    .cd-num   { font-size: 52px; font-weight: 600; color: var(--accent); line-height: 1; letter-spacing: -2px; font-family: 'DM Mono', monospace; }
    .cd-label { font-size: 14px; color: var(--muted); margin-top: 6px; }

    .replay-btn {
      width: 100%;
      padding: 20px;
      background: transparent;
      border: 2px solid var(--border2);
      border-radius: 16px;
      color: var(--text);
      font-family: inherit;
      font-size: 17px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s, transform 0.15s;
    }
    .replay-btn:hover  { background: var(--surface2); border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
    .replay-btn:active { transform: translateY(0); }

    /* confetti */
    .confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 999; }

    /* ── Tablet landscape: primary target ── */
    @media (min-width: 700px) and (orientation: landscape) {
      body { padding: 20px 32px; align-items: center; }
      .app  { max-width: 100%; display: grid; grid-template-columns: 1fr; }

      /* Intro: sol metin + sağ kurallar/buton */
      .intro-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
      .start-btn   { margin-top: 20px; }

      /* Soru ekranı: alt alta (tek sütun) */
      .question-layout { display: block; }
      .question-left  { }
      .question-right { }

      .answers { grid-template-columns: 1fr 1fr; }
      .answer-btn { min-height: 120px; padding: 18px 14px; }

      /* Sonuç: ring solda, içerik sağda */
      .result-layout {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 40px;
        align-items: start;
      }
      .result-left  { /* score ring */ }
      .result-right { /* title + sub + recap + stats + countdown + replay */ }

      .score-ring { width: 160px; height: 160px; }
      .score-big  { font-size: 48px; }
      /* Kart padding landscape'de daha dar */
      .card { padding: 36px 44px; }

      /* Logo biraz küçük */
      .logo-header img { height: 48px; }

      /* Player wrap dikey alanı daha iyi kullanır */
      .player-wrap { margin: 20px 0; }

      h1 { font-size: 30px; }
    }

    /* Portrait fallback / küçük tablet */
    @media (max-width: 520px) {
      .card    { padding: 28px 20px; }
      h1       { font-size: 24px; }
      .answer-btn { min-height: auto; flex-direction: row; text-align: left; padding: 18px; }
      .answer-btn .icon-wrap { width: 48px; height: 48px; flex-shrink: 0; }
      .answer-btn .icon-wrap svg { width: 24px; height: 24px; }
    }

    /* ── Logo header ── */
    .logo-header {
      display: flex;
      justify-content: center;
      margin-bottom: 24px;
    }
    .logo-header img {
      height: 56px;
      width: auto;
    }

    /* ── Brand gradient on play btn and primary btns ── */
    .play-btn  { background: var(--accent-grad) !important; box-shadow: 0 4px 14px rgba(139,63,232,0.35) !important; }
    .play-btn:hover  { box-shadow: 0 6px 18px rgba(139,63,232,0.5) !important; }
    .start-btn { background: var(--accent-grad) !important; box-shadow: 0 4px 18px rgba(139,63,232,0.32) !important; }
    .next-btn  { background: var(--accent-grad) !important; box-shadow: 0 4px 14px rgba(139,63,232,0.3) !important; }
    .next-btn:hover { box-shadow: 0 6px 20px rgba(139,63,232,0.42) !important; }

    /* progress pip brand color */
    .progress-pip.done   { background: var(--accent); }
    .progress-pip.active { background: var(--accent); opacity: 0.35; }

    /* eyebrow brand */
    .eyebrow { color: var(--accent); }
    .eyebrow::before { background: var(--accent); }

    /* badge brand */
    .badge { background: var(--accent-lt); border-color: rgba(139,63,232,0.2); color: var(--accent); }
    .badge svg { stroke: var(--accent); }

    /* rule num brand */
    .rule-num { color: var(--accent); border-color: var(--border2); }

    /* seek fill brand */
    .seek-fill { background: var(--accent); }

    /* waveform playing brand */
    .waveform.playing .bar { background: var(--accent); }

    /* answer hover brand */
    .answer-btn:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-lt); box-shadow: 0 6px 20px rgba(139,63,232,0.12); }

    /* score arc & countdown brand */
    .cd-num { color: var(--accent); }

    /* replay hover brand */
    .replay-btn:hover { border-color: var(--accent); color: var(--accent); }