:root {
  --gray-00: #ffffff;
  --gray-10: #dfdfe2;
  --gray-15: #d0d0d5;
  --gray-45: #858591;
  --gray-75: #3b3b4f;
  --gray-80: #2a2a40;
  --gray-85: #1b1b32;
  --gray-90: #0a0a23;
  --gray-90-t: rgba(10, 10, 35, 0.9);
  --blue:   #99c9ff;
  --yellow: #ffc300;
  --gold:   #ffbf00;
  --purple: #dbb8ff;
  --green:  #acd157;
  --red:    #ffadad;
  --focus:  #198eee;

  /* semantic aliases */
  --bg:       var(--gray-90);
  --surface:  var(--gray-85);
  --surface2: var(--gray-80);
  --border:   #767688;
  --text:     var(--gray-00);
  --text-dim: var(--gray-10);
  --muted:    #959599;
  --overlay:  var(--gray-90-t);
}

[data-theme="light"] {
  --bg:       #f5f6f7;
  --surface:  #ffffff;
  --surface2: #eaeaef;
  --border:   #767688;
  --text:     var(--gray-90);
  --text-dim: var(--gray-85);
  --muted:    #696970;
  --overlay:  rgba(245, 246, 247, 0.92);
  --gold:     #c97800;
  --yellow:   #4d3800;
  --blue:     #002ead;
  --green:    #00471b;
  --red:      #850000;
}

html { font-size: 18px; }
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
main { display: contents; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--focus);
  border-radius: 4px;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  text-decoration: none;
}
.skip-link:focus { top: 0.5rem; left: 0.5rem; }

.picker-fieldset { border: none; padding: 0; margin: 0; }
.picker-fieldset > legend {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1rem 3rem;
}

/* ── THEME TOGGLE ── */
.theme-toggle,
.btn-sound,
.btn-shortcuts {
  position: fixed;
  top: 12px;
  z-index: 100;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  width: 32px;
  height: 28px;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s;
  padding: 0;
}

.theme-toggle    { right: 14px; }
.btn-sound       { right: 50px; }
.btn-shortcuts   { right: 86px; }

.theme-toggle:hover,
.btn-sound:hover,
.btn-shortcuts:hover { border-color: var(--gold); }

.theme-toggle:focus,
.btn-sound:focus,
.btn-shortcuts:focus { outline: 2px solid var(--focus); outline-offset: 2px; }

.btn-sound svg,
.btn-shortcuts svg { width: 0.85em; height: 0.85em; fill: currentColor; display: block; }

.btn-sound .sfx-off { display: none; }
.btn-sound[data-sfx="off"] .sfx-on  { display: none; }
.btn-sound[data-sfx="off"] .sfx-off { display: block; }

/* ── HEADER ── */
h1 {
  font-size: clamp(1.6rem, 5vw, 2.3rem);
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 0.2rem;
}

.subtitle {
  color: var(--muted);
  font-size: 0.72rem;
  font-family: 'Fira Mono', 'Menlo', 'Consolas', monospace;
  margin-bottom: 1.2rem;
  text-align: center;
}

/* ── STATS ── */
.stats {
  display: flex;
  gap: 1.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.5rem 1.5rem;
}

.stat { text-align: center; }

.stat-val {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold);
  font-family: 'Fira Mono', 'Menlo', 'Consolas', monospace;
  line-height: 1;
}

.stat-lbl {
  font-size: 0.54rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-top: 3px;
}

.btn-reset-best {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.8em;
  padding: 0 0 0 0.15em;
  line-height: 1;
  vertical-align: middle;
}
.btn-reset-best:hover { color: var(--red); }
.btn-reset-best:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-radius: 2px; }

/* ── RESET BEST MODAL ── */
#reset-best-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  align-items: center;
  justify-content: center;
  background: var(--overlay);
  backdrop-filter: blur(3px);
  padding: 1rem;
}
#reset-best-modal.visible { display: flex; }

.confirm-box {
  max-width: 340px;
  width: 100%;
}

.confirm-msg {
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.5;
  padding: 0 0.25rem;
}

.confirm-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  margin-top: 0.25rem;
}

.btn-confirm-cancel {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 0.38rem 1rem;
  border-radius: 4px;
  font-size: 0.78rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.btn-confirm-cancel:hover { border-color: var(--text-dim); color: var(--text); }
.btn-confirm-cancel:focus { outline: 2px solid var(--focus); outline-offset: 2px; }

.btn-confirm-ok {
  background: var(--red);
  color: #0a0a23;
  border: none;
  padding: 0.38rem 1rem;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s;
}
.btn-confirm-ok:hover { opacity: 0.85; }
.btn-confirm-ok:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
[data-theme="light"] .btn-confirm-ok { color: #ffffff; }

/* ── TWO-COLUMN LAYOUT ── */
.two-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  margin-bottom: 1.1rem;
}

.col-wheel {
  display: flex;
  align-items: center;
  justify-content: center;
}

.col-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

@media (min-width: 800px) {
  .two-col {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 3rem;
  }
  .col-wheel  { flex-shrink: 0; }
  .col-controls { align-items: center; width: auto; }
  .col-controls .stats { margin-bottom: 0; }
}

.wheel-wrapper {
  position: relative;
  width: min(300px, calc(100vw - 2rem));
  height: min(300px, calc(100vw - 2rem));
}

@media (min-width: 800px) {
  .wheel-wrapper {
    width: 420px;
    height: 420px;
  }
}

.pointer {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 22px solid var(--gold);
  z-index: 10;
}

#wheel-svg {
  display: block;
  border-radius: 50%;
  border: 2px solid var(--border);
  width: 100%;
  height: 100%;
}

#wheel-group {
  transform-box: fill-box;
  transform-origin: center center;
  transition: none;
}

/* ── SPIN BUTTON ── */
.btn-spin {
  background: var(--gold);
  color: var(--gray-90);
  border: none;
  padding: 0.6rem 2.5rem;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: opacity 0.15s, transform 0.1s;
}

.btn-spin:hover  { opacity: 0.88; transform: translateY(-1px); }
.btn-spin:active { transform: translateY(0); }
.btn-spin:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }
.btn-spin:focus  { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ── RETRY BUTTON ── */
.btn-retry {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 0.32rem 1rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-family: 'Fira Mono', 'Menlo', 'Consolas', monospace;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.btn-retry.active { background: var(--gold); color: var(--gray-90); }
.btn-retry:hover  { opacity: 0.8; }
.btn-retry:focus  { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ── TIME PICKER ── */
.time-picker {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.time-opt {
  background: transparent;
  color: var(--muted);
  border: none;
  border-right: 1px solid var(--border);
  padding: 0.32rem 0.85rem;
  font-size: 0.72rem;
  font-family: 'Fira Mono', 'Menlo', 'Consolas', monospace;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.time-opt:last-child { border-right: none; }
#langPicker { display: flex; flex-direction: column; gap: 0.4rem; align-items: center; }
#langPicker .time-opt { letter-spacing: 0; padding-left: 0.95rem; padding-right: 0.95rem; }
#langPicker .time-opt:disabled { opacity: 0.3; cursor: not-allowed; }
.lang-group-label {
  color: var(--muted);
  font-size: 0.65rem;
  font-family: 'Fira Mono', 'Menlo', 'Consolas', monospace;
  font-weight: 700;
  padding: 0.32rem 0.6rem;
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
  user-select: none;
}
.lang-group-label:last-child { border-right: none; }
.time-opt:hover:not(.active) { color: var(--gold); }
.time-opt.active { background: var(--surface2); color: var(--text); }
.time-opt:focus  { outline: 2px solid var(--focus); outline-offset: -2px; }

.timer-row.hidden { visibility: hidden; }

/* ── CHALLENGE MODAL ── */
#challenge {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  background: var(--overlay);
  backdrop-filter: blur(3px);
  padding: 1rem;
}

#challenge.visible { display: flex; }

.challenge-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  max-width: 500px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.5rem 1.75rem 1.6rem;
  animation: popIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.challenge-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 4px;
  width: 1.6rem;
  height: 1.6rem;
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s;
}

.challenge-close:hover { border-color: var(--red); color: var(--red); }
.challenge-close:focus { outline: 2px solid var(--focus); outline-offset: 2px; }

@keyframes popIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

#verb-translation {
  font-size: 0.7rem;
  color: var(--muted);
  font-style: italic;
  letter-spacing: 0.03em;
  min-height: 1em;
  margin-top: -0.4rem;
}

#verb-reveal {
  font-size: 2.2rem;
  font-weight: 700;
  font-family: 'Fira Mono', 'Menlo', 'Consolas', monospace;
  color: var(--gold);
  letter-spacing: 0.05em;
  animation: revealPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes revealPop {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

/* Timer */
.timer-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
}

.timer-track {
  flex: 1;
  height: 6px;
  background: var(--surface2);
  border-radius: 3px;
  overflow: hidden;
}

#timer-bar {
  height: 100%;
  width: 100%;
  background: var(--green);
  border-radius: 3px;
  transform-origin: left center;
}

#timer-count {
  font-family: 'Fira Mono', 'Menlo', 'Consolas', monospace;
  font-size: 0.78rem;
  color: var(--muted);
  min-width: 1.8rem;
  text-align: right;
}

/* Input row */
.input-row {
  display: flex;
  align-items: flex-end;
  gap: 0.3rem;
  width: 100%;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
}

.input-group label {
  font-size: 0.54rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  font-family: 'Fira Mono', 'Menlo', 'Consolas', monospace;
  text-align: center;
}

.verb-input {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.5rem 0.5rem;
  font-size: 0.8rem;
  font-family: 'Fira Mono', 'Menlo', 'Consolas', monospace;
  font-weight: 700;
  text-align: center;
  transition: border-color 0.15s;
  outline: none;
}

.verb-input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--focus);
}

.verb-input.correct {
  border-color: var(--green);
  color: var(--green);
  background: rgba(172, 209, 87, 0.08);
}

.verb-input.wrong {
  border-color: var(--red);
  color: var(--red);
  background: rgba(255, 173, 173, 0.08);
}

.arrow-sep {
  color: var(--muted);
  font-size: 1rem;
  padding-bottom: 0.5rem;
  flex-shrink: 0;
  line-height: 1;
}

/* Buttons */
.btn-check {
  background: var(--gold);
  color: var(--gray-90);
  border: none;
  padding: 0.5rem 1.4rem;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  transition: opacity 0.15s;
}

.btn-check:hover  { opacity: 0.88; }
.btn-check:focus  { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn-check:disabled { opacity: 0.35; cursor: not-allowed; }

.btn-next {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 0.5rem 1.4rem;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  transition: background 0.15s, color 0.15s;
  letter-spacing: 0.03em;
}

.btn-next:hover { background: var(--gold); color: var(--gray-90); }
.btn-next:focus { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Score popup */
#score-popup {
  font-family: 'Fira Mono', 'Menlo', 'Consolas', monospace;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--muted);
  min-height: 1.2rem;
  letter-spacing: 0.04em;
}

#score-popup.perfect { color: var(--green); }
#score-popup.partial { color: var(--yellow); }
#score-popup.miss    { color: var(--red); }

#answer-line {
  font-family: 'Fira Mono', 'Menlo', 'Consolas', monospace;
  font-size: 0.78rem;
  color: var(--muted);
  display: none;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

#answer-line.show { display: flex; }
#answer-line span { color: var(--text); font-weight: 700; }
#answer-line .sep { color: var(--border); }

/* ── LIGHT THEME: CTA buttons keep bright gold bg with dark text ── */
[data-theme="light"] .btn-spin,
[data-theme="light"] .btn-check,
[data-theme="light"] .btn-next:hover {
  background: #ffbf00;
  color: var(--gray-90);
}

/* ── LIGHT THEME: small text that can't use bright #c97800 (3.40:1 only) ── */
[data-theme="light"] .btn-next,
[data-theme="light"] .theory-header-title,
[data-theme="light"] .theory-card-title,
[data-theme="light"] .verblist-table thead th {
  color: #4d3800;
}

/* ── INPUT STATE INDICATORS ── */
.input-group { position: relative; }

.input-group:has(.verb-input.correct)::after,
.input-group:has(.verb-input.wrong)::after {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  text-align: center;
  line-height: 1;
  margin-top: 0.2rem;
}
.input-group:has(.verb-input.correct)::after { content: '✓'; color: var(--green); }
.input-group:has(.verb-input.wrong)::after   { content: '✗'; color: var(--red); }

/* ── BUTTON GROUP ── */
.btn-group {
  display: flex;
  gap: 0.5rem;
}

/* ── THEORY TRIGGER ── */
.btn-theory {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 0.28rem 0.9rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-family: 'Fira Mono', 'Menlo', 'Consolas', monospace;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.btn-theory:hover { border-color: var(--gold); color: var(--gold); }
.btn-theory:focus { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ── THEORY MODAL ── */
#theory-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  background: var(--overlay);
  backdrop-filter: blur(3px);
  padding: 1rem;
}

#theory-modal.visible { display: flex; }

.theory-box {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 560px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.4rem 1.6rem 1.6rem;
  animation: popIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

.theory-header-title {
  font-family: 'Fira Mono', 'Menlo', 'Consolas', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
}

.theory-close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 4px;
  width: 1.6rem;
  height: 1.6rem;
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s;
}

.theory-close:hover { border-color: var(--red); color: var(--red); }
.theory-close:focus { outline: 2px solid var(--focus); outline-offset: 2px; }

.theory-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.theory-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.75rem 0.75rem 0.85rem;
}

.theory-card-title {
  font-family: 'Fira Mono', 'Menlo', 'Consolas', monospace;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.1rem;
}

.theory-card-sub {
  font-size: 0.58rem;
  color: var(--muted);
  font-family: 'Fira Mono', 'Menlo', 'Consolas', monospace;
  margin-bottom: 0.55rem;
}

.theory-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.theory-list li {
  font-size: 0.61rem;
  color: var(--text);
  line-height: 1.35;
}

.theory-list code {
  display: block;
  font-family: 'Fira Mono', 'Menlo', 'Consolas', monospace;
  font-size: 0.66rem;
  color: var(--blue);
  margin-top: 0.2rem;
}

.theory-list code b { color: var(--text); }

/* ── VERB LIST MODAL ── */
#verblist-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  background: var(--overlay);
  backdrop-filter: blur(3px);
  padding: 1rem;
}

#verblist-modal.visible { display: flex; }

.verblist-box {
  max-width: 640px;
  height: 82vh;
  overflow: hidden;
}

.verblist-search {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

.verblist-search input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: 'Fira Mono', 'Menlo', 'Consolas', monospace;
  font-size: 0.75rem;
  padding: 0.35rem 0.6rem;
}

.verblist-search input::placeholder { color: var(--muted); }
.verblist-search input:focus { outline: 2px solid var(--focus); outline-offset: -2px; border-color: var(--focus); }

.verblist-scroll {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.verblist-scroll::-webkit-scrollbar { width: 5px; }
.verblist-scroll::-webkit-scrollbar-track { background: transparent; }
.verblist-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.verblist-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Fira Mono', 'Menlo', 'Consolas', monospace;
  font-size: 0.72rem;
}

.verblist-table thead th {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.58rem;
  color: var(--gold);
  padding: 0.4rem 0.7rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}

.verblist-table td {
  padding: 0.32rem 0.7rem;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

.verblist-table tbody tr:last-child td { border-bottom: none; }
.verblist-table tbody tr:hover td { background: var(--surface2); }

.verblist-table td.vl-tr {
  color: var(--muted);
  font-size: 0.65rem;
  font-family: 'Lato', sans-serif;
  font-style: italic;
}

.verblist-footnote {
  color: var(--muted);
  font-size: 0.65rem;
  padding: 0.5rem 0.25rem 0.25rem;
}

/* ── SHORTCUTS MODAL ── */
#shortcuts-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  background: var(--overlay);
  backdrop-filter: blur(3px);
  padding: 1rem;
}
#shortcuts-modal.visible { display: flex; }

.shortcuts-box { max-width: 340px; width: 100%; }

.shortcuts-list {
  padding: 1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.shortcut-row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.shortcut-row dt {
  flex-shrink: 0;
  min-width: 80px;
}

.shortcut-row dd {
  color: var(--text-dim);
  font-size: 0.8rem;
  white-space: nowrap;
}

kbd {
  display: inline-block;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.1em 0.45em;
  font-family: 'Fira Mono', 'Menlo', 'Consolas', monospace;
  font-size: 0.72rem;
  color: var(--text);
  line-height: 1.4;
  white-space: nowrap;
}

/* ── MOBILE LAYOUT REORDER ── */
@media (max-width: 799px) {
  /* flatten both wrappers so every piece is a direct body-flex child */
  .two-col      { display: contents; }
  .col-controls { display: contents; }
  /* body gap replaces the gap lost from the two flattened wrappers */
  body          { gap: 1.25rem; }
  /* clear margins that would double-up with the new body gap */
  h1            { margin-bottom: 0; }
  .subtitle     { margin-bottom: 0; }
  .stats                           { order: 1; }
  .col-wheel                       { order: 2; }
  .btn-spin                        { order: 3; }
  .btn-retry                       { order: 3; }   /* immediately after spin (DOM order breaks tie) */
  .btn-group                       { order: 4; }
  .col-controls > .picker-fieldset { order: 5; }
}

/* ── RESPONSIVE ── */
@media (max-width: 480px) {
  .theme-toggle, .btn-sound, .btn-shortcuts { width: 40px; height: 40px; font-size: 0.95rem; }
  /* keyboard shortcuts aren't useful on touch devices */
  .btn-shortcuts { display: none; }
  /* re-gap the two remaining buttons for their wider 40px size */
  .theme-toggle { right: 8px; }
  .btn-sound    { right: 56px; }
  /* push h1 below the fixed button row (buttons end at top 52px) */
  h1 { margin-top: 44px; }
}

@media (max-width: 560px) {
  body { padding: 1rem 0.75rem 2rem; }

  /* Lang picker: break into wrapping pills */
  #langPicker .time-picker {
    flex-wrap: wrap;
    overflow: visible;
    border: none;
    gap: 0.3rem;
    padding: 0;
  }
  .lang-group-label {
    flex: 0 0 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 0.15rem 0;
    margin-bottom: 0.1rem;
  }
  #langPicker .time-opt {
    border: 1px solid var(--border);
    border-radius: 3px;
  }

  /* Input row: stack vertically */
  .input-row       { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .input-group     { width: 100%; }
  .arrow-sep       { display: none; }
  /* 16px minimum prevents iOS Safari auto-zoom on input focus */
  .verb-input      { font-size: 1rem; }

  /* Challenge box */
  .challenge-box { padding: 1.2rem 1rem; gap: 0.7rem; }

  /* Stats */
  .stats { gap: 1.1rem; padding: 0.5rem 1rem; }

  /* Theory */
  .theory-grid { grid-template-columns: 1fr; }
  .theory-box  { padding: 1.1rem 1rem 1.2rem; }

  /* Verb list */
  .verblist-box { height: 88vh; }

  /* Prevent iOS Safari auto-zoom on search input focus (requires ≥16px) */
  .verblist-search input { font-size: 1rem; }
}

@media (max-width: 380px) {
  html { font-size: 16px; }
  #verb-reveal   { font-size: 1.8rem; }
  .challenge-box { padding: 1rem 0.85rem; }
  .stats         { gap: 0.85rem; padding: 0.4rem 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .challenge-box { animation: none; }
  #wheel-group   { transition: none !important; }
}