/* The Nunito font is loaded by a <link> in base.html, not an @import here:
   an import only starts downloading after this stylesheet has arrived. */

:root {
  --bg: #f8f1e4;
  --bg-deep: #f1e7d3;
  --card: #ffffff;
  --ink: #35281f;
  --muted: #99897a;
  --accent: #c0392b;
  --accent-dark: #96271b;
  --sun: #f2a83b;
  --good: #2e9e57;
  --good-bg: #e4f6ea;
  --bad: #c73a2c;
  --bad-bg: #fdeae7;
  --border: #e8dfcc;
  --shadow: 0 10px 30px rgba(90, 60, 30, 0.10);
  --shadow-soft: 0 3px 12px rgba(90, 60, 30, 0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Nunito", "Segoe UI", system-ui, sans-serif;
  background:
    radial-gradient(1000px 400px at 85% -10%, rgba(242, 168, 59, 0.16), transparent 60%),
    radial-gradient(800px 400px at 0% 110%, rgba(192, 57, 43, 0.08), transparent 60%),
    var(--bg);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- nav ---------- */
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  background: linear-gradient(120deg, #a92e1f, #c0392b 55%, #b8431f);
  box-shadow: 0 2px 14px rgba(120, 30, 15, 0.35);
}

.brand {
  font-weight: 900;
  font-size: 1.2rem;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.brand:hover { color: #ffd98a; }

.nav-links { display: flex; align-items: center; gap: 18px; }
.nav-links a {
  color: #ffe9d9;
  text-decoration: none;
  font-weight: 700;
  padding: 4px 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.nav-links a:hover { color: #fff; border-color: var(--sun); }

.badge {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffe9c9;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}

main { width: 100%; max-width: 940px; margin: 0 auto; padding: 28px 18px 48px; flex: 1; }

/* ---------- hero ---------- */
.hero h1 {
  margin: 6px 0 4px;
  font-size: 2rem;
  font-weight: 900;
  background: linear-gradient(100deg, var(--accent-dark), var(--accent) 60%, #d96a1e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p { color: var(--muted); max-width: 660px; margin-top: 4px; }

/* ---------- cards & buttons ---------- */
.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px;
  box-shadow: var(--shadow);
  animation: fadeUp 0.35s ease both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 20px 0 30px;
  font-weight: 700;
}

.controls select {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 8px;
  border: 2px solid var(--border);
  background: #fff;
  color: var(--ink);
}
.controls select:focus { outline: none; border-color: var(--sun); }

.controls-home { flex-direction: column; align-items: stretch; gap: 16px; }

/* home: two big at-a-glance numbers */
.home-stats { display: flex; gap: 12px; flex-wrap: wrap; }
.home-stat {
  flex: 1;
  min-width: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.home-stat-num { font-size: 2.3rem; font-weight: 900; line-height: 1; color: var(--accent-dark); }
.stat-mastery .home-stat-num { color: var(--good); }
.home-stat-label {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* home: the two primary practice modes, as inviting cards */
.mode-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .mode-cards { grid-template-columns: 1fr; } }

.mode-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 16px;
  text-decoration: none;
  color: #fff;
  border: 1px solid var(--accent-dark);
  background: linear-gradient(120deg, var(--accent), #d3502e);
  box-shadow: var(--shadow-soft);
  transition: transform 0.1s, box-shadow 0.15s, filter 0.15s;
}
.mode-card.mode-sentences {
  background: linear-gradient(120deg, #d97a1e, var(--sun));
  border-color: #b5610f;
}
.mode-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); filter: brightness(1.05); }
.mode-card:active { transform: translateY(0) scale(0.99); }

.mode-card-icon { font-size: 2rem; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2)); }
.mode-card-body { display: flex; flex-direction: column; gap: 3px; }
.mode-card-body strong { font-size: 1.25rem; font-weight: 900; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); }
.mode-card-sub { font-size: 0.88rem; font-weight: 600; opacity: 0.92; }

.pool-hint { margin: 0; font-weight: 600; font-size: 0.9rem; }
.pool-hint strong { color: var(--ink); }

.mode-buttons { display: flex; gap: 12px; margin-left: auto; flex-wrap: wrap; }

.btn {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transition: transform 0.08s, box-shadow 0.15s, background 0.15s;
}
.btn:hover { background: #fdf8ee; transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0) scale(0.97); }

.btn-primary {
  background: linear-gradient(120deg, var(--accent), #d3502e);
  border-color: var(--accent-dark);
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.btn-primary:hover { background: linear-gradient(120deg, var(--accent-dark), var(--accent)); }

.btn-good { background: var(--good-bg); border-color: var(--good); color: var(--good); }
.btn-bad { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }

.muted { color: var(--muted); }
.hidden { display: none !important; }
.invisible { visibility: hidden; } /* keeps its space, unlike .hidden */

/* ---------- home: step grid ---------- */
h2 { font-weight: 800; }

.step-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 860px) { .step-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .step-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } }

.step-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 5px solid var(--sun);
  border-radius: 12px;
  padding: 11px 13px;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s;
}
.step-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-left-color: var(--accent);
}

.step-head { font-size: 1.05rem; }
.step-pct { margin-top: 2px; font-weight: 800; color: var(--good); }

/* locked (not yet unlocked) steps: grayed, lock icon overlaid */
.step-card.status-next, .step-card.status-locked {
  border-left-color: var(--border);
  color: var(--muted);
}
.step-card.status-next .step-pct, .step-card.status-locked .step-pct { color: var(--muted); }
.step-card.status-locked:hover, .step-card.status-next:hover {
  transform: none;
  box-shadow: var(--shadow-soft);
  border-left-color: var(--border);
}
.step-card.ready { border-left-color: var(--good); }

.lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: rgba(241, 231, 211, 0.62);
}
.step-card.ready .lock-overlay { background: rgba(46, 158, 87, 0.16); }
.lock-overlay img { width: 26px; height: 26px; opacity: 0.7; }
.step-card.ready .lock-overlay img { opacity: 0.9; }
.step-card.status-next:hover .lock-overlay { background: rgba(241, 231, 211, 0.4); }
.step-card.ready:hover .lock-overlay { background: rgba(46, 158, 87, 0.1); }

/* step-info popup */
.step-modal-box { text-align: left; max-width: 460px; position: relative; }
.step-modal-box h3 { margin-bottom: 8px; }
.step-modal-desc { margin: 4px 0 0; }
.modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: none;
  background: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.modal-close:hover { color: var(--accent); }

.word-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
}
@media (max-width: 480px) { .word-list { grid-template-columns: 1fr; } }
.word-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 6px 10px;
  background: var(--bg);
  border-radius: 8px;
}
.wl-es { font-weight: 800; }
.wl-en { color: var(--muted); font-weight: 600; font-size: 0.86rem; text-align: right; }

/* step popup footer (unlock controls) */
.step-modal-foot { margin-top: 18px; }
.step-modal-foot:empty { margin-top: 0; }
.step-modal-foot .btn { width: 100%; }
.step-modal-foot .modal-buttons .btn { width: auto; flex: 1; }
.unlock-warn {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bad-bg);
  color: var(--bad);
  font-weight: 700;
  font-size: 0.9rem;
}
.locked-note {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-deep);
  color: var(--muted);
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
}
.relock-note { margin: 0 0 10px; font-size: 0.88rem; }

/* ---------- play modes ---------- */
.play-area { display: flex; flex-direction: column; align-items: center; gap: 16px; }

.flashcard, .sentence-card {
  position: relative;
  width: 100%;
  max-width: 660px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 42px 30px 34px;
  text-align: center;
  overflow: hidden;
}
.flashcard::before, .sentence-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--accent), var(--sun), var(--good));
}

.word-type {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.word-front { font-size: 3.4rem; font-weight: 900; line-height: 1.1; }
.word-back { font-size: 1.65rem; font-weight: 800; color: var(--accent-dark); }
.fem-form { color: var(--accent); font-size: 1.15rem; font-weight: 700; }

.tts-row, .recall-row { display: flex; gap: 14px; }

.voice-row { position: absolute; top: 12px; right: 12px; z-index: 2; }
.play-area .voice-row .btn-voice {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 9px;
  min-height: 0;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  box-shadow: none;
}
.play-area .voice-row .btn-voice:hover { border-color: var(--sun); color: var(--ink); }

.voice-modal-box { text-align: left; max-width: 420px; width: 100%; position: relative; }
.voice-modal-box h3 { margin-top: 0; }
.voice-modal-box > p { color: var(--muted); font-weight: 600; margin: 4px 0 14px; }

.voice-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 52vh;
  overflow-y: auto;
}
.voice-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 2px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.voice-item:hover { border-color: var(--sun); }
.voice-item.active { border-color: var(--good); background: var(--good-bg); }
.voice-name { font-weight: 800; }
.voice-meta { font-size: 0.8rem; color: var(--muted); font-weight: 700; white-space: nowrap; }
.voice-divider {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 14px 0 8px;
}
.voice-empty { color: var(--muted); font-weight: 600; }

.voice-unavailable {
  max-width: 360px;
  margin: 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--bg-deep);
  color: var(--muted);
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  line-height: 1.45;
}

.answer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  animation: fadeUp 0.25s ease both;
}

.conj-table { border-collapse: collapse; margin: 0 auto; }
.conj-table tr { cursor: pointer; transition: background 0.12s; }
.conj-table tr:hover { background: #fdf4e2; }
.conj-table td { padding: 7px 16px; border-bottom: 1px solid var(--border); }
.conj-label { color: var(--muted); text-align: right; font-size: 0.9rem; }
.conj-form { font-weight: 800; text-align: left; }

.stats-line { font-size: 0.85rem; }

/* ---------- sentence chips ---------- */
.sentence {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  min-height: 74px;
  align-items: flex-start;
}

.chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 9px 13px;
  border-radius: 12px;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  background: #fdfaf3;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  animation: fadeUp 0.3s ease both;
  transition: background 0.15s, outline-color 0.15s, transform 0.08s;
}

.chip.pending, .chip.known, .chip.missed {
  border-color: transparent;
  cursor: pointer;
}
.chip.pending:hover, .chip.known:hover, .chip.missed:hover { transform: translateY(-2px); }
.chip.pending { background: #edeae2; outline: 2px solid #a49b8d; }
.chip.known { background: var(--good-bg); outline: 2px solid var(--good); }
.chip.missed { background: var(--bad-bg); outline: 2px solid var(--bad); }

.chip-gloss {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  margin-top: 5px;
  max-width: 160px;
  white-space: pre-line; /* verb glosses are two lines: tense / person */
}

.chip-person {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-dark);
  margin-top: 2px;
  letter-spacing: 0.02em;
}

.en-translation { font-size: 1.2rem; font-weight: 800; }
.en-label { color: var(--muted); font-weight: 600; font-size: 0.9rem; margin-right: 6px; }
.hint { color: var(--muted); font-size: 0.9rem; max-width: 500px; }
.session-count {
  margin: 12px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
}

/* The banner-ad box under the play card. Until the AdSense ids are configured
   (static/ads.js) it shows the dashed placeholder; the reserved height matches
   a standard horizontal banner so the card never jumps when one loads. */
.ad-box {
  width: min(100%, 728px);
  margin: 18px auto 0;
  text-align: center;
}
.ad-note {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.ad-slot { min-height: 90px; }
.ad-placeholder {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--border);
  border-radius: 10px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ---------- word map footer ---------- */
.grid-footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--border);
  padding: 18px 18px 26px;
}

.grid-legend {
  max-width: 940px;
  margin: 0 auto 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 700;
}
.grid-title { text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.75rem; }
.pool-mastery { color: var(--accent-dark); }

.modal-buttons { display: flex; gap: 12px; justify-content: center; margin-top: 6px; }
.legend-items { display: flex; align-items: center; gap: 6px; }
.legend-items .lg { margin-left: 10px; }

.lg {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  vertical-align: -1px;
}
.lg-small { width: 7px; height: 7px; }
/* the legend swatches, matching the word-map mastery gradient endpoints */
.lg-struggling { background: hsl(0, 68%, 48%); }
.lg-learning { background: hsl(60, 68%, 42%); }
.lg-known { background: hsl(120, 55%, 40%); }
.unseen { background: #4a4440; }

.word-map {
  max-width: 940px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(50, 1fr);
  gap: 2px;
}

.grid-cell {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-sq {
  width: 100%;
  height: 100%;
  border-radius: 2px;
  transition: width 0.25s, height 0.25s, background 0.4s, opacity 0.25s;
}
.grid-cell.out .grid-sq {
  width: 75%;
  height: 75%;
  border-radius: 1px;
  opacity: 0.35;
  filter: grayscale(0.7);
}
.grid-cell:hover .grid-sq { outline: 2px solid var(--ink); }
.grid-cell.clickable { cursor: pointer; }

/* instant tooltip, styled like the rest of the site */
#wm-tip {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 8px 12px;
  font-size: 0.88rem;
  font-weight: 700;
  max-width: 280px;
  text-align: center;
}
#wm-tip .tip-muted { color: var(--muted); font-weight: 600; font-size: 0.8rem; }

/* ---------- word type sections (home) ---------- */
.type-section { max-width: 940px; margin: 26px auto 0; }

.type-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 14px;
}

.type-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  transition: transform 0.12s, box-shadow 0.15s;
}
.type-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.type-icon { font-size: 1.7rem; line-height: 1; margin-top: 2px; }
.type-card strong { display: inline-block; margin-right: 8px; }
.type-count { color: var(--muted); font-size: 0.8rem; font-weight: 700; }
.type-card p { margin: 4px 0 0; color: var(--muted); font-size: 0.85rem; font-weight: 600; }

/* ---------- type reference pages ---------- */
.tense-intro { margin-bottom: 22px; }
.tense-intro h3 { margin-top: 0; }
.tense-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 20px; font-size: 0.95rem; }
.tense-list em { color: var(--accent-dark); font-style: normal; font-weight: 800; }

.type-detail { margin-bottom: 22px; min-height: 70px; position: relative; z-index: 1; }
.detail-placeholder { margin: 8px 0; }

.detail-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.detail-word { font-size: 2rem; font-weight: 900; }
.detail-en { font-size: 1.1rem; font-weight: 700; color: var(--accent-dark); }
.btn-sm { padding: 4px 12px; font-size: 0.9rem; }

.detail-panels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.conj-panel {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px 14px;
  background: #fdfaf3;
}
.conj-panel h4 {
  margin: 4px 0 8px;
  color: var(--accent-dark);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.conj-panel .conj-table { width: 100%; }
.conj-panel .conj-table td { padding: 4px 8px; font-size: 0.92rem; }

/* ---------- all-words combobox ---------- */
.combobox-card { margin-bottom: 18px; position: relative; z-index: 50; }
.combobox { position: relative; display: block; }
.combobox-hint {
  display: block;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 6px;
}
.combobox-input {
  width: 100%;
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: #fffdf8;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.combobox-input:focus {
  border-color: var(--sun);
  box-shadow: 0 0 0 3px rgba(242, 168, 59, 0.22);
}
.combobox-input::placeholder { color: var(--muted); font-weight: 600; }

.combobox-list {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 340px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.combobox-option {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.combobox-option.active { background: #fdf1dd; }
.cb-es { font-weight: 800; }
.cb-sep { color: var(--muted); }
.cb-en { color: var(--accent-dark); font-weight: 700; }
.cb-type {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
}
.combobox-empty { padding: 10px 12px; color: var(--muted); font-weight: 700; }

/* ---------- flashcards extras ---------- */
.extra-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.example-box {
  background: #fdf6e8;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 18px;
  cursor: pointer;
  max-width: 90%;
}
.example-es { font-size: 1.2rem; font-weight: 800; }
.example-en { color: var(--muted); font-weight: 600; }

.phase-tag {
  display: inline-block;
  background: linear-gradient(120deg, var(--sun), #e8912a);
  color: #5c3400;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 999px;
  margin-bottom: 6px;
}

/* ---------- modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(50, 30, 20, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal-box {
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 26px 30px;
  max-width: 420px;
  text-align: center;
  animation: fadeUp 0.2s ease both;
}
.modal-box h3 { margin-top: 0; }
.modal-box p { color: var(--muted); font-weight: 600; }

.mini-chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  margin: 2px;
}
.mini-chip.known { background: var(--good-bg); outline: 2px solid var(--good); color: var(--good); }
.mini-chip.missed { background: var(--bad-bg); outline: 2px solid var(--bad); color: var(--bad); }

@media (max-width: 700px) {
  .word-map { gap: 1px; }
  .word-front { font-size: 2.4rem; }
  .mode-buttons { margin-left: 0; }
  .detail-panels { grid-template-columns: 1fr; }
}

/* ---------- step 51: course completion ---------- */
.step-card-final {
  border-left-color: var(--good);
  background: linear-gradient(135deg, var(--card) 60%, var(--good-bg));
}
.step-card-final.status-locked {
  border-left-color: var(--border);
  background: var(--card);
}
.step-card-final .step-pct { color: var(--good); }

.final-hero .phase-tag { margin-bottom: 10px; }
.final-card { margin-top: 22px; }
.final-card h2 { margin-top: 0; }
.final-card > p { line-height: 1.55; }
.final-card h3 {
  margin: 0 0 4px;
  font-size: 1.02rem;
  color: var(--accent);
}
.gap-group {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px dashed var(--border);
}
.gap-group:first-of-type { border-top: none; padding-top: 0; }
.gap-group p { line-height: 1.55; }
.final-list { padding-left: 20px; margin: 10px 0; }
.final-list li { margin-bottom: 8px; line-height: 1.5; }
.final-list em, .final-card em { color: var(--accent-dark); font-style: normal; font-weight: 700; }
.final-card .mode-buttons { margin-top: 18px; }

/* what you have learned — example cards */
.learned-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.learned-card {
  background: #fdfaf3;
  border: 1px solid var(--border);
  border-left: 4px solid var(--sun);
  border-radius: 14px;
  padding: 14px 16px 16px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.12s, box-shadow 0.15s;
}
.learned-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.learned-card h3 {
  margin: 0 0 9px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted);
}
.learned-es { font-size: 1.2rem; font-weight: 800; line-height: 1.25; color: var(--accent-dark); }
.learned-en { margin-top: 4px; color: var(--muted); font-weight: 600; font-size: 0.92rem; }

/* side-by-side contrast pairs (transitive vs reflexive, reflexive se vs impersonal se) */
.contrast-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.contrast-pair > div {
  background: #fdfaf3;
  border: 1px solid var(--border);
  border-left: 4px solid var(--sun);
  border-radius: 12px;
  padding: 11px 14px;
}
.pair-es { display: block; font-weight: 800; font-size: 1.05rem; color: var(--accent-dark); }
.pair-en { display: block; margin-top: 3px; color: var(--muted); font-weight: 600; font-size: 0.9rem; }

/* verb-tense reference tables */
.tense-tables { display: flex; flex-direction: column; gap: 22px; margin-top: 16px; }
.tense-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tense-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 460px;
  background: var(--card);
  border-radius: 12px;
  overflow: hidden;
}
.tense-table th, .tense-table td {
  border: 1px solid var(--border);
  padding: 8px 12px;
  text-align: center;
  vertical-align: middle;
}
.tense-table thead th {
  background: var(--bg-deep);
  color: var(--accent-dark);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.tense-table thead .grp-past { background: #f3e3cf; }
.tense-corner { background: var(--bg-deep) !important; }
.tense-person {
  background: var(--bg);
  text-align: left;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
}
.tense-person span { display: block; color: var(--muted); font-weight: 600; font-size: 0.76rem; }
.tense-es { display: block; font-weight: 800; }
/* Two columns, so it never needs the six-column tables' scroll width. */
.reflexive-table { min-width: 0; }
.tense-en { display: block; color: var(--muted); font-weight: 600; font-size: 0.76rem; margin-top: 2px; }
.tense-none { color: var(--border); font-weight: 800; }

.final-footnote {
  margin: 22px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.5;
}

/* ---------- accounts: nav corner, guest banner, auth pages ---------- */
/* The account corner of the nav. Empty until user.js knows who is reading,
   so it must take no space of its own while it waits. */
.nav-user { display: flex; align-items: center; gap: 14px; }
.nav-user:empty { display: none; }

/* The username is a link to /account; underline it like the nav links so it
   reads as clickable, not as a label. */
.nav-name {
  color: #ffe9c9;
  font-weight: 800;
  font-size: 1.1rem;
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 2px solid rgba(255, 233, 201, 0.5);
  transition: color 0.15s, border-color 0.15s;
}
.nav-name:hover { color: #fff; border-color: var(--sun); }

/* the account page's actions */
.account-actions { margin: 14px 0 22px; }
.danger-zone {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 18px;
}
.danger-zone h2 { font-size: 1.05rem; margin: 0 0 6px; }
.danger-zone .btn { margin-top: 10px; }

/* the type-your-username field in the final delete-account popup */
.confirm-input {
  display: block;
  width: 100%;
  margin: 12px 0;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
}

/* The one link on the site that asks for something. */
.nav-links a.nav-cta {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  padding: 4px 14px;
  color: #fff;
}
.nav-links a.nav-cta:hover { background: var(--sun); border-color: var(--sun); color: #4a2c05; }

.guest-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin: 0 0 22px;
  padding: 16px 20px;
  background: linear-gradient(120deg, #fff6e6, #fdf0dc);
  border: 1px solid var(--border);
  border-left: 5px solid var(--sun);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}
.guest-banner-text strong { display: block; font-size: 1.02rem; }
.guest-banner-text p {
  margin: 4px 0 0;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.92rem;
  max-width: 56ch;
}
.guest-banner-actions { display: flex; gap: 10px; flex-shrink: 0; }

.auth-card { max-width: 420px; margin: 10px auto 40px; }
.auth-card h1 { margin: 0 0 6px; font-size: 1.6rem; }
.auth-lede { margin: 0 0 18px; font-weight: 600; font-size: 0.95rem; }

.auth-carry {
  margin: 0 0 18px;
  padding: 11px 14px;
  background: var(--good-bg);
  border: 1px solid var(--good);
  border-radius: 10px;
  color: #1f6b3c;
  font-weight: 700;
  font-size: 0.9rem;
}

.auth-form { display: flex; flex-direction: column; }
.auth-form label {
  font-weight: 800;
  font-size: 0.88rem;
  margin-bottom: 5px;
}
.auth-form input {
  font: inherit;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fffdf9;
  color: var(--ink);
}
.auth-form input:focus {
  outline: none;
  border-color: var(--sun);
  box-shadow: 0 0 0 3px rgba(242, 168, 59, 0.25);
}
.auth-form button { margin-top: 8px; }

/* Always in the flow, empty when there is nothing wrong: a field that grows an
   error must not shove the rest of the form downwards. */
.auth-error {
  min-height: 1.1em;
  margin: 5px 0 9px;
  color: var(--bad);
  font-weight: 700;
  font-size: 0.83rem;
}
.auth-error-form { min-height: 0; margin: 0; }
.auth-error-form:not(:empty) { margin: 4px 0 8px; }

.auth-switch { margin: 18px 0 0; font-weight: 600; font-size: 0.92rem; }
.auth-switch a { color: var(--accent); font-weight: 800; }
.auth-terms {
  margin: 12px 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}
.auth-terms a { color: var(--accent); font-weight: 800; }
.auth-note {
  margin: 10px 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.5;
}

/* ---------- site footer (every page) ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-deep);
  padding: 15px 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
}
.site-footer a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.site-footer a:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- legal / privacy prose ---------- */
.legal { max-width: 760px; margin: 10px auto 40px; }
.legal h1 {
  margin: 0 0 4px;
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--accent-dark);
}
.legal-updated {
  margin: 0 0 22px;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.85rem;
}
.legal-intro { font-size: 1rem; }
.legal h2 {
  margin: 28px 0 8px;
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--ink);
}
.legal p { margin: 0 0 12px; line-height: 1.62; }
.legal ul { margin: 0 0 14px; padding-left: 20px; }
.legal li { margin: 5px 0; line-height: 1.55; }
.legal a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(192, 57, 43, 0.35);
}
.legal a:hover { border-bottom-color: var(--accent); }
.legal code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.88em;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
}

/* =====================================================================
   Responsive & touch
   The desktop layout above is the single source of truth; the rules
   below adapt it for phones and touch input. One stylesheet — there is
   no separate mobile template tree to drift out of sync.
   ===================================================================== */

/* Keep iOS from inflating text on rotate; let long words wrap instead of
   pushing the whole page sideways. */
html { -webkit-text-size-adjust: 100%; }
.word-front, .word-back, .chip-word, .detail-word,
.learned-es, .en-translation { overflow-wrap: break-word; }

/* Elements you tap repeatedly should not flash blue, raise the iOS
   long-press callout, or select their own text. Prose stays selectable. */
.btn, .chip, .step-card, .mode-card, .type-card, .grid-cell,
.conj-table tr, .combobox-option, .modal-close {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

/* Touch devices have no real hover, so a tap must not leave a lifted or
   outlined "stuck hover" behind, and the hover-only word-map tooltip
   can never be dismissed — hide it. */
@media (hover: none) {
  .btn:hover, .step-card:hover, .mode-card:hover, .type-card:hover,
  .learned-card:hover, .chip.pending:hover, .chip.known:hover,
  .chip.missed:hover { transform: none; }
  .grid-cell:hover .grid-sq { outline: none; }
  #wm-tip { display: none !important; }
}

/* ---------------- phones (≤ 600px) ---------------- */
@media (max-width: 600px) {
  /* nav wraps gracefully: brand stays put, the links flow onto a second
     line and can wrap among themselves rather than overflowing. */
  nav { flex-wrap: wrap; padding: 11px 16px; row-gap: 9px; }
  .brand { font-size: 1.1rem; }
  .nav-links { flex-wrap: wrap; gap: 10px 14px; font-size: 0.95rem; }
  .nav-links .badge { font-size: 0.72rem; padding: 3px 10px; }
  .nav-user { gap: 10px; }
  .nav-links a.nav-cta { padding: 3px 11px; }

  /* the banner's two buttons go full width rather than crowding the text */
  .guest-banner { padding: 15px 16px; }
  .guest-banner-actions { width: 100%; }
  .guest-banner-actions .btn { flex: 1; min-height: 44px; }

  .auth-card { margin-top: 0; }
  .auth-form input { min-height: 46px; }
  .auth-form button { min-height: 46px; }

  main { padding: 20px 14px 40px; }
  .card { padding: 18px 16px; }

  .hero h1 { font-size: 1.6rem; }
  .hero p { font-size: 0.96rem; }

  /* home: the two stat tiles and mode cards already stack via their own
     rules; just tighten the spacing. */
  .controls { margin: 16px 0 26px; }
  .home-stat { padding: 13px 10px; }
  .home-stat-num { font-size: 2rem; }

  /* any popup fits the viewport and scrolls internally if it is tall
     (the step-info modal can list ten words). */
  .modal-box, .step-modal-box { max-width: none; width: 100%; margin: 0 12px; }
  .modal-box { padding: 22px 20px; max-height: 86vh; overflow-y: auto; }

  /* play modes: roomier card, thumb-sized controls */
  .flashcard, .sentence-card { padding: 46px 18px 26px; gap: 16px; }
  .word-front { font-size: 2.1rem; }
  .word-back { font-size: 1.4rem; }
  .play-area .btn { padding: 12px 16px; min-height: 46px; font-size: 0.95rem; }
  .tts-row, .recall-row { width: 100%; }
  .tts-row .btn, .recall-row .btn { flex: 1; }
  #btn-show, #btn-next { width: 100%; max-width: 340px; }

  /* sentence chips */
  .sentence { gap: 8px; min-height: 60px; }
  .chip { font-size: 1.25rem; padding: 8px 11px; }
  .chip-gloss { max-width: 130px; }

  /* word-map footer: a little more room for the squares */
  .grid-footer { padding: 16px 10px 22px; }
  .grid-legend { font-size: 0.76rem; }
}

/* ---------------- small phones (≤ 380px) ---------------- */
@media (max-width: 380px) {
  .brand { font-size: 1rem; }
  .nav-links { font-size: 0.9rem; gap: 8px 12px; }
  .hero h1 { font-size: 1.45rem; }
  .word-front { font-size: 1.85rem; }
  .home-stat-num { font-size: 1.8rem; }
  .chip { font-size: 1.15rem; }
}

/* Honour a reduced-motion preference: drop the entrance animations and
   hover/transition movement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}