:root {
  --bg:#0b0f14;
  --panel:#141b24;
  --text:#eaeaea;
  --accent:#1c7ed6;
}

[data-theme="light"] {
  --bg:#f4f6f8;
  --panel:#ffffff;
  --text:#1a1a1a;
  --accent:#1971c2;
}

* {
  box-sizing:border-box;
  font-family:system-ui,sans-serif;
}

body {
  background:var(--bg);
  color:var(--text);
  display:flex;
  justify-content:center;
  padding:16px;
}

.app {
  width:100%;
  max-width:900px;
}

.header {
  display:flex;
  justify-content:space-between;
  align-items:center;
}

h1 {
  margin:0;
  font-size:32px;
}

.byline {
  opacity:.6;
}

#themeToggle {
  background:none;
  border:none;
  font-size:22px;
  cursor:pointer;
  color:var(--text);
}

.level-banner {
  text-align:center;
  margin:14px 0;
  font-size:20px;
  font-weight:700;
}

.controls {
  margin-top:20px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:14px;
}

.control label {
  display:block;
  margin-bottom:6px;
}

input {
  width:100%;
}

.answer {
  margin-top:20px;
}

.answer input {
  width:100%;
  padding:14px;
  font-size:18px;
  border-radius:8px;
  border:none;
}

.buttons {
  margin-top:16px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

button {
  padding:14px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  background:var(--accent);
  color:white;
  font-size:16px;
  transition:all 0.25s ease;
}

#playBtn.playing {
  background: linear-gradient(135deg, #ffd43b, #fab005);
  color: #1a1a1a;
  box-shadow: 0 0 18px rgba(255, 212, 59, 0.9);
}

#submitBtn.correct {
  background:linear-gradient(135deg,#ffd43b,#fab005);
  color:#1a1a1a;
  box-shadow:0 0 18px rgba(255,212,59,0.9);
  transform:scale(1.02);
}

#submitBtn.wrong {
  background:#c92a2a;
  box-shadow:0 0 16px rgba(201,42,42,0.9);
  transform:scale(0.98);
}

#submitBtn {
  transition:all 0.25s ease;
}

button.small, a.small {
  padding:6px 10px;
  font-size:14px;
  background:linear-gradient(135deg,#ffd43b,#fab005);
  color:#1a1a1a;
  border-radius:8px;
  font-weight:600;
  text-decoration:none;
}

.home-wrap {
  display:flex;
  justify-content:center;
  margin-top:12px;
}

button:hover, a.small:hover {
  opacity:0.9;
}

.reveal, .status {
  margin-top:14px;
}

.progress {
  height:8px;
  background:#333;
  border-radius:6px;
  overflow:hidden;
}

#accuracyBar {
  height:100%;
  width:0%;
  background:linear-gradient(90deg,gold,orange);
}

footer {
  text-align:center;
  margin-top:12px;
  font-size:13px;
  opacity:0.7;
}

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