/* Clean & minimal — one clear focal point (the word), generous whitespace,
   understated color. Mobile-first: base styles target small screens, the
   word size scales with clamp() rather than a breakpoint.

   Palette (2026-08-14, Andy's request) — Sky Blue #87CEEB, Steel Blue
   #4682B4, Cadet Blue #5F9EA0, Light Steel Blue #B0C4DE, Slate Gray
   #708090, all used deliberately rather than just swapping one accent:
   Steel Blue is the light-mode accent, Slate Gray is muted text (a direct
   match — it already reads as "muted gray-blue"), Light Steel Blue is what
   the background/border tints are derived from, and Sky Blue/Cadet
   Blue/Slate Gray anchor the three difficulty-badge tiers below (easy/
   medium/hard) as a light-to-dark progression instead of reusing the
   correct/incorrect red-green tokens the way easy/hard used to. See the
   dark-mode block further down for why raw Sky Blue isn't the dark-mode
   accent despite the tidy light/dark split that would make. */

:root {
  --color-bg: #f3f6fa;
  --color-surface: #ffffff;
  --color-text: #26313c;
  --color-text-muted: #708090;
  --color-accent: #4682b4;
  --color-border: #d9e2ec;
  --color-error-border: #e3c4bb;
  --color-error-bg: #f7ece9;
  --color-error-text: #a14b3f;
  --color-success: #3f7d5c;
  --color-success-bg: #e8f2ec;
  --color-easy: #2e7ba6;
  --color-easy-bg: #e6f4fa;
  --color-medium: #3d6f72;
  --color-medium-bg: #e3efef;
  --color-hard: #4a5762;
  --color-hard-bg: #e7eaed;
  --radius: 14px;
  --content-width: 640px;
  --history-columns: 1fr;
  --quiz-columns: 1fr;
}

/* Desktop breakpoint — widens the shared header/main column and lets
   History and the Quiz's answer options use the extra room as a grid
   (auto-fit/minmax below, not a fixed column count, so it degrades
   gracefully at in-between widths like a small tablet). Tokens
   (--content-width/--history-columns/--quiz-columns) keep header, main,
   History and Quiz in lockstep off one decision instead of three. */
@media (min-width: 768px) {
  :root {
    --content-width: 900px;
    --history-columns: repeat(auto-fit, minmax(260px, 1fr));
    --quiz-columns: 1fr 1fr;
  }
}

/* Dark mode — same token set, no per-rule changes needed since every rule
   below reads colors through these variables. Two ways in:
   1) OS/browser preference (prefers-color-scheme), unless the visitor has
      explicitly picked light via the switch (data-theme="light").
   2) Explicit override via the header switch (data-theme="dark"), which
      wins regardless of OS preference. Persisted in localStorage by the
      script in base.html, not a cookie — pure presentation, nothing
      server-side needs it, so no reason to break stateless-by-default. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #1a2128;
    --color-surface: #232b34;
    --color-text: #edf1f5;
    --color-text-muted: #93a2af;
    /* Not raw Sky Blue (#87CEEB) — too pale to keep white text readable on
       solid-fill accent backgrounds (nav bubble, .btn, the theme-switch
       track). A brightened Steel Blue instead: same lightening approach
       the old accent used going light->dark, just applied to the new
       palette's steel blue. Sky Blue itself shows up below as the "easy"
       badge's text color instead, where it's text-on-a-light-chip, not
       white-on-solid. */
    --color-accent: #6ea5cd;
    --color-border: #333e48;
    --color-error-border: #5c372c;
    --color-error-bg: #2a1c18;
    --color-error-text: #e0917f;
    --color-success: #7fc79e;
    --color-success-bg: #16261e;
    --color-easy: #9ad9f5;
    --color-easy-bg: #1c3444;
    --color-medium: #8fc2c2;
    --color-medium-bg: #1c2f2f;
    --color-hard: #a6b4c0;
    --color-hard-bg: #262c33;
  }
}

:root[data-theme="dark"] {
  --color-bg: #1a2128;
  --color-surface: #232b34;
  --color-text: #edf1f5;
  --color-text-muted: #93a2af;
  --color-accent: #6ea5cd;
  --color-border: #333e48;
  --color-error-border: #5c372c;
  --color-error-bg: #2a1c18;
  --color-error-text: #e0917f;
  --color-success: #7fc79e;
  --color-success-bg: #16261e;
  --color-easy: #9ad9f5;
  --color-easy-bg: #1c3444;
  --color-medium: #8fc2c2;
  --color-medium-bg: #1c2f2f;
  --color-hard: #a6b4c0;
  --color-hard-bg: #262c33;
}

/* Cross-document View Transitions — animates full-page navigations between
   Today/History/Quiz/Scores (all four share this stylesheet via
   base.html, which is required for both the outgoing and incoming page to
   opt in). Real browser support as of 2026: Chrome/Edge 126+, Safari
   18.2+, Firefox partial (146-151). Deliberately not feature-detected —
   this is progressive enhancement by nature; unsupported browsers just
   navigate normally, exactly like before this rule existed. See
   .nav-active below for the specific element this animates (the nav
   bubble); everything else gets the browser's default cross-fade. */
@view-transition {
  navigation: auto;
}

* {
  box-sizing: border-box;
}

/* Design fix (2026-08-26, Andy: "a lot of empty space on the page") —
   subtle background treatment so empty space on short pages (Today,
   mainly) reads as intentional breathing room, not an unfinished page.
   Built from --color-accent via color-mix() rather than a second set of
   hardcoded dark-mode hex values, so it automatically follows whichever
   theme is active with no separate override block needed (same trick
   already used for .privacy-policy etc. reusing existing tokens). Very
   low opacity, fixed (doesn't scroll with content) so it doesn't repeat
   awkwardly on a long page like /privacy. */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  background-color: var(--color-bg);
  background-image: radial-gradient(
    ellipse 900px 500px at 50% 0%,
    color-mix(in srgb, var(--color-accent) 7%, transparent),
    transparent 70%
  );
  background-attachment: fixed;
  color: var(--color-text);
  margin: 0;
  padding: 0;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Mobile-first, matching this file's own pattern elsewhere (base styles =
   phone, @media (min-width: 768px) below = desktop enhancement) — added
   2026-08-27, fixing a real bug: header/nav had zero responsive handling
   at all, so on a narrow phone the logo+avatar+4 nav links+toggle simply
   overflowed past the screen edge instead of adapting, forcing a
   horizontal swipe to reach Scores/the theme toggle (caught by Andy on
   his actual phone, not a simulated viewport). Stacked + wrapped + centered
   by default; restored to the original single-row layout at 768px+ below. */
header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 1.5rem 1rem 1.25rem;
  text-align: center;
}

header h1 {
  /* clamp(), same pattern as .word — scales with viewport instead of
     jumping at a breakpoint, so it's properly big on desktop without
     overwhelming a narrow phone screen. */
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0;
}

header h1 a {
  color: var(--color-text);
  text-decoration: none;
}

/* Screen-reader-only text — visually hidden but still announced. Standard
   "clip" pattern (not display:none, which screen readers skip entirely). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Signed-in avatar badge (added 2026-08-26, replacing a plain name +
   "Sign out" that used to sit in nav) — grouped with the logo via .brand
   rather than nav, per Andy's request. */
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.user-badge {
  position: relative;
  /* tabindex="0" in the markup makes this focusable, so :focus-within
     below reveals the menu for keyboard users too, not just a mouse
     hover — a hover-only menu would be unreachable without a pointer. */
}

.user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: default;
  user-select: none;
}

.user-menu {
  display: none;
  position: absolute;
  /* Flush against the avatar (no gap), not calc(100% + Nrem) — a gap here
     is a classic hover-dropdown bug: moving the mouse from the avatar
     toward the menu crosses empty space that isn't part of .user-badge's
     hoverable area, so :hover drops before the mouse arrives and the menu
     closes out from under you (exactly what Andy hit). The 0.6rem padding
     below provides the same visual breathing room without a real gap to
     cross. */
  top: 100%;
  left: 0;
  z-index: 10;
  min-width: 11rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(70, 130, 180, 0.15);
  padding: 0.6rem;
  /* Deliberately no margin-top here either — margin has the exact same
     "empty space the mouse has to cross" problem as the old `calc(100% +
     0.4rem)` top offset did. The box-shadow above provides enough visual
     separation from the avatar without a real gap. */
}

.user-badge:hover .user-menu,
.user-badge:focus-within .user-menu {
  display: block;
}

.user-menu-name {
  margin: 0 0 0.5rem;
  padding: 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  /* Long Google display names shouldn't blow out the menu's fixed width. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu a {
  display: block;
  margin: 0;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.4rem 0.5rem;
  border-radius: calc(var(--radius) - 6px);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.user-menu a:hover {
  color: var(--color-accent);
  background: var(--color-bg);
}

nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.3rem;
}

nav a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 1rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

/* :not(.nav-active) matters, not just style — without it, hovering the
   current page's own nav item would turn its text accent-colored while
   the pill behind it is already that same accent color (white-on-accent
   flipping to accent-on-accent = unreadable). */
nav a:hover:not(.nav-active) {
  color: var(--color-accent);
}

/* Current-page indicator ("bubble") — the pill background, not just a
   color change, so it reads at a glance rather than requiring you to
   notice a subtler text-color difference. aria-current="page" (set in
   base.html alongside this class) carries the same info to screen
   readers, which don't see background color. */
.nav-active {
  background: var(--color-accent);
  color: #fff;
  /* Only one element ever has this class per page — satisfies the API's
     requirement that a view-transition-name be unique within a document.
     Because the outgoing page's active link and the incoming page's
     active link share this same name, the browser morphs position/size
     between them automatically (no keyframes needed for the basic
     slide) instead of just cross-fading two unrelated pills. */
  view-transition-name: nav-bubble;
}

/* Desktop: restore the original single-row layout (logo left, nav right)
   now that there's room for it — the stacked/centered/wrapped rules above
   are the mobile-first base, this is the enhancement, same pattern as
   --content-width's own @media (min-width: 768px) block near the top of
   this file. */
@media (min-width: 768px) {
  header {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  nav {
    justify-content: flex-end;
  }
}

/* Light/dark switch (header) — checkbox styled as a pill toggle. Wiring
   (localStorage read/write, initial checked state) lives in base.html. */

.theme-switch {
  display: inline-flex;
  align-items: center;
  margin-left: 1.25rem;
  cursor: pointer;
}

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

.theme-switch-track {
  position: relative;
  display: inline-block;
  width: 2.5rem;
  height: 1.4rem;
  background: var(--color-border);
  border-radius: 999px;
  transition: background 0.15s ease;
}

.theme-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.1rem;
  height: 1.1rem;
  background: var(--color-surface);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  line-height: 1;
}

/* Sun/moon riding on the thumb — the thumb itself is the state indicator,
   so which icon shows is never ambiguous (no separate "which side is
   active" question the way track-flanking icons would raise). */
.theme-switch-thumb::before {
  content: "\2600\FE0F";
}

.theme-switch input:checked + .theme-switch-track {
  background: var(--color-accent);
}

.theme-switch input:checked + .theme-switch-track .theme-switch-thumb {
  transform: translateX(1.1rem);
}

.theme-switch input:checked + .theme-switch-track .theme-switch-thumb::before {
  content: "\1F319";
}

.theme-switch input:focus-visible + .theme-switch-track {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

main {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0.5rem 1rem 3rem;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  /* Steel-Blue-tinted rather than plain black — a small touch, but a
     neutral gray shadow next to an otherwise fully blue-gray palette
     would've been the one leftover un-themed detail. */
  box-shadow: 0 1px 3px rgba(70, 130, 180, 0.08);
}

.eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin: 0 0 0.75rem;
}

/* Site footer (added 2026-08-26, Task 14's privacy policy) — small, muted,
   out of the way. Reuses the existing muted-text color rather than
   introducing a new one. */
.site-footer {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 1rem 2rem;
  font-size: 0.85rem;
}

.site-footer a {
  color: var(--color-text-muted);
}

/* Privacy policy (added 2026-08-26) — the only long-form, multi-heading
   page in the app; every other .card is short. Just enough spacing so
   headings/paragraphs/list don't run together. */
.privacy-policy h3 {
  margin: 1.75rem 0 0.5rem;
}

.privacy-policy p,
.privacy-policy ul {
  margin: 0 0 0.75rem;
}

.privacy-policy ul {
  padding-left: 1.25rem;
}

/* Difficulty badge (Build Task 12) — small pill, normal case (overrides the
   eyebrow's uppercase/letter-spacing so "easy/medium/hard" reads normally). */

.difficulty-badge {
  display: inline-block;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
  font-size: 0.7rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  margin-left: 0.4rem;
  vertical-align: middle;
}

/* Dedicated tokens (not a reuse of --color-success/--color-error) — the
   old version borrowed the correct/incorrect quiz colors for easy/hard,
   which conflated "how hard is this word" with "did you get it right,"
   two unrelated ideas that happened to share a color. Also fixes medium
   having been hardcoded with no dark-mode variant at all. */
.difficulty-badge--easy {
  background: var(--color-easy-bg);
  color: var(--color-easy);
}

.difficulty-badge--medium {
  background: var(--color-medium-bg);
  color: var(--color-medium);
}

.difficulty-badge--hard {
  background: var(--color-hard-bg);
  color: var(--color-hard);
}

/* "This week at a glance" (design fix, 2026-08-26) — deliberately outside
   .card: a lighter-weight, no-border strip rather than a second boxed
   card, so it visually reads as "extra, optional" next to today's word
   rather than competing with it. Word + difficulty only, no definitions —
   see today.html's comment for why (keeps this a teaser, not a duplicate
   of /history). */
.glance-strip {
  margin: 1.75rem 0;
}

.glance-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
  padding: 0;
}

.glance-chip {
  display: flex;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.35rem 0.5rem 0.35rem 0.85rem;
  font-size: 0.9rem;
}

.glance-chip-word {
  color: var(--color-text);
}

.glance-chip .difficulty-badge {
  margin-left: 0.5rem;
}

.glance-more {
  margin: 0;
  font-size: 0.9rem;
}

.glance-more a {
  color: var(--color-text-muted);
}

.glance-more a:hover {
  color: var(--color-accent);
}

/* Quiz status/CTA card (design fix, 2026-08-26) — a second, visually
   quieter card below today's word: no shadow, muted border, so it reads
   as secondary rather than competing with the hero word card above it. */
.card--status {
  box-shadow: none;
  border-color: var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 60%, var(--color-bg));
}

.card--status .btn {
  margin-top: 0.25rem;
}

/* Full archive on /history (added 2026-08-27) — year > month disclosure,
   native <details>/<summary> (same pattern as .score-details on Scores),
   month's word chips reuse .glance-list/.glance-chip from Today's "Recent
   words" strip for visual consistency across the app. */
.archive {
  margin: 2rem 0;
}

.archive-year {
  margin-bottom: 0.5rem;
}

.archive-year > summary {
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 0.5rem 0;
}

.archive-year > summary:hover {
  color: var(--color-accent);
}

/* Months indented under their year, so the hierarchy reads at a glance
   without needing a second visual treatment (border/background) per
   level — indentation alone is enough for two levels. */
.archive-month {
  margin: 0.25rem 0 0.25rem 1.25rem;
}

.archive-month > summary {
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 0.35rem 0;
}

.archive-month > summary:hover {
  color: var(--color-accent);
}

.archive-word-list {
  margin: 0.5rem 0 0.75rem;
}

/* Generic button — for links that should read as an action (e.g. the
   quiz's "already completed" card pointing at the Scores page), not a
   plain inline hyperlink. */
.btn {
  display: inline-block;
  padding: 0.6rem 1.25rem;
  border-radius: 8px;
  background: var(--color-accent);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid var(--color-accent);
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.btn:hover,
.btn:focus-visible {
  opacity: 0.88;
}

.word {
  font-size: clamp(2rem, 8vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.25rem;
}

.pos {
  font-style: italic;
  color: var(--color-accent);
  font-size: 0.95rem;
  margin: 0 0 1.25rem;
}

.definition {
  font-size: 1.15rem;
  margin: 0 0 1rem;
}

.example {
  font-style: italic;
  color: var(--color-text-muted);
  border-left: 3px solid var(--color-border);
  padding-left: 1rem;
  margin: 0;
}

.card--error {
  border-color: var(--color-error-border);
  background: var(--color-error-bg);
}

.card--error .eyebrow {
  color: var(--color-error-text);
}

/* History list (Build Task 5) — same card language as the word-card, at a
   smaller, list-friendly scale. */

.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: var(--history-columns);
  /* Back to Grid's default (stretch), deliberately — cards in a row now
     match each other's height, which is what makes History's grid look
     neat instead of ragged (cards were sizing to their own content,
     differing with each definition's line count). This does NOT bring
     back the earlier Scores bug (an open card's tall content stretching
     its short neighbors) — that's now prevented below by giving an open
     card grid-column: 1 / -1, which puts it alone in its own row with no
     siblings left to stretch against, regardless of align-items. */
  gap: 0.75rem;
}

/* Scores-page-only (History's <li> never contains .score-details): once a
   card's word breakdown is open, give it the full row width instead of
   staying squeezed into one grid column — both so the breakdown has room
   to lay out as its own grid (below) and so it isn't sharing a cramped
   column with unrelated cards. Auto-placement bumps it to its own row;
   normal, expected grid behavior, not a bug. */
.history-item:has(.score-details[open]) {
  grid-column: 1 / -1;
}

.history-item {
  padding: 1.25rem 1.5rem;
}

.history-item--today {
  border-color: var(--color-accent);
  /* Stays the full-width focal point even once the rest of the week
     drops into a multi-column grid on wider screens. */
  grid-column: 1 / -1;
}

.history-word {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
}

.pos-inline {
  font-style: italic;
  color: var(--color-accent);
  font-weight: 400;
  font-size: 0.9rem;
}

.history-definition {
  margin: 0;
  color: var(--color-text);
}

/* Weekly quiz (Build Task 6) */

.quiz-score {
  text-align: right;
}

.quiz {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.quiz-word {
  font-size: 1.5rem;
  margin: 0 0 1rem;
}

.quiz-options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Fixed 2-up at desktop width (not auto-fit like History) — these are
     4 same-role choices, not a variable-length list, so a stable 2x2
     reads better than a count that shifts with each option's text
     length. Driven by --quiz-columns so it stays in lockstep with the
     dev view-switcher instead of its own separate breakpoint. */
  grid-template-columns: var(--quiz-columns);
  gap: 0.5rem;
}

.quiz-option {
  width: 100%;
  text-align: left;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.quiz-option:hover:not(:disabled) {
  border-color: var(--color-accent);
}

.quiz-option:disabled {
  cursor: default;
}

.quiz-option--correct {
  border-color: var(--color-success);
  background: var(--color-success-bg);
  color: var(--color-success);
}

.quiz-option--incorrect {
  border-color: var(--color-error-border);
  background: var(--color-error-bg);
  color: var(--color-error-text);
}

.quiz-save-status {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  min-height: 1.2em;
}

/* Per-week word breakdown on the Scores page (Build Task 6c) */

.score-details {
  margin-top: 1rem;
}

.score-details summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent);
}

.score-details summary:hover {
  text-decoration: underline;
}

.score-word-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .score-word-list {
    /* The card housing this list is now full-width once open (see
       .history-item:has(.score-details[open]) above), so there's room for
       the 7-word breakdown to sit 2-3 across instead of one long column —
       auto-fit, not a fixed count, since 7 doesn't divide evenly. */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

.score-word {
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

.score-word--correct {
  background: var(--color-success-bg);
  border-color: var(--color-success);
}

.score-word--incorrect {
  background: var(--color-error-bg);
  border-color: var(--color-error-border);
}

.score-word-term {
  display: block;
  font-weight: 600;
}

.score-word-def {
  display: block;
  font-size: 0.9rem;
  color: var(--color-text);
}