:root{
  --bg:#0b1220; /* deep navy background */
  --card:#0f1724; /* slightly lighter card */
  --accent:#0b57d0; /* vivid blue accent */
  --accent-2:#0db29b; /* teal accent */
  --text:#e6eefb; /* light text on dark */
  --muted:#94a3b8;
}

*{box-sizing:border-box}
.body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial}
body{background:var(--bg); color:var(--text); margin:0; padding:44px; display:flex; align-items:center; justify-content:center; min-height:100vh}
.container{width:100%; max-width:960px}
h1{margin:0 0 8px; font-weight:700; font-size:2rem}
.instructions{margin:0 0 16px; color:var(--muted); font-size:1.05rem}
.card{background:var(--card); padding:26px; border-radius:14px; box-shadow:0 14px 40px rgba(2,6,23,0.08)}
.settings{display:flex; gap:10px; align-items:center; margin-bottom:16px; flex-wrap:wrap}
.settings label{font-size:0.9rem; color:var(--muted)}
.settings select{margin-left:8px; padding:6px 8px; border-radius:8px; border:1px solid #e2e8f0}
.prompt{font-size:1.5rem; margin-bottom:18px; flex:1; min-width:0}
.prompt-row{display:flex; align-items:center; gap:10px; margin-bottom:18px}
.replay-tts{background:#d4edff; color:#0a3a5c; padding:6px 9px; border-radius:8px; font-size:0.85rem; border:1px solid rgba(10,58,92,0.06); flex-shrink:0}
.replay-tts:hover{transform:translateY(-1px); box-shadow:0 5px 16px rgba(11,92,146,0.05)}
.options{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.option{padding:18px 14px; border-radius:12px; border:1px solid rgba(148,163,184,0.25); background:#0f1724; color:#cbd5e1; cursor:pointer; text-align:center; transition:transform .06s ease, box-shadow .06s ease, background .15s ease; font-size:1.05rem}
.option:hover{transform:translateY(-3px); box-shadow:0 10px 26px rgba(59,130,246,0.14); background:#111b2b}
.option:focus{outline:3px solid rgba(59,130,246,0.24)}
.option.correct{background:#064e3b; color:#c6f6d5; border-color:#0f766e; box-shadow:0 6px 20px rgba(6,78,59,0.18)}
.option.wrong{background:#3b021f; color:#ffd6d6; border-color:#7f1d1d; box-shadow:0 6px 20px rgba(127,29,29,0.12)}
.controls{display:flex; gap:8px; margin-top:16px}
.btn{background:var(--accent); color:white; border:none; padding:12px 16px; border-radius:12px; cursor:pointer; font-weight:600}
.btn[disabled]{opacity:0.5; cursor:not-allowed}
.btn.secondary{background:#f1f5f9; color:var(--text)}
.progress{font-size:0.9rem; margin-bottom:10px; color:var(--muted)}
.result{margin-top:12px}
.highscore{font-size:0.9rem; color:var(--accent-2); margin-left:8px}

.progress-bar{height:12px; background:rgba(255,255,255,0.04); border-radius:999px; margin-top:10px; overflow:hidden}
.progress-inner{height:100%; background:linear-gradient(90deg,var(--accent), #00b4ff); width:0%; transition:width .35s ease}

.review{margin-top:16px}
.review-list{display:grid; gap:8px; margin-top:8px}
.review-item{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px; border-radius:8px; background:rgba(255,255,255,0.03)}
.review-item .pair{font-size:1rem; color:var(--text)}
.review-item button{padding:8px 10px; border-radius:8px}
.score-badge{display:inline-block; background:rgba(11,87,208,0.12); color:var(--accent); padding:8px 12px; border-radius:999px; margin-left:12px; font-weight:700; font-size:1rem}

@media (max-width:680px){
  .options{grid-template-columns:1fr}
  .settings{gap:8px}
}