:root {
  color-scheme: dark;
  --bg-color: #121212;
  --surface-color: #242424;
  --text-color: #ffffff;
  --accent-green: #4ade80;
  --accent-pink: #f472b6;
  --border-light: #aaaaaa;
  --focus-color: #fdfd96;
  --on-accent: #000000;
  --ui-scale: 1.25;
  --word-scale: 2.5;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg-color: #f5f5f5;
  --surface-color: #dddddd;
  --text-color: #000000;
  --border-light: #444444;
  --focus-color: #9f9f03;
  --accent-green: #097732;
  --accent-pink: #800d48;
  --on-accent: #ffffff;
}

* {
  box-sizing: border-box;
}

/* The root stays a fixed 16px on purpose — --ui-scale is a text-size
   control, not a page-zoom control. It's applied per font-size below
   (and to body as the inherited base) so text grows without dragging
   container padding, gaps, and dialog widths along with it. That's
   what keeps the game screen fitting the viewport at any text size. */
html {
  font-size: 16px;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  font-size: calc(1rem * var(--ui-scale));
}
.site-header,
.site-footer {
  flex-shrink: 0;
}

[hidden] {
  display: none !important;
}

a {
  color: var(--focus-color);
  text-decoration: underline;
}
a:hover,
a:focus-visible {
  color: var(--focus-color);
  text-decoration: underline;
}

/* Visible only when focused, so keyboard users can jump past the header */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--focus-color);
  color: #000000;
  padding: 0.75rem 1.25rem;
  font-weight: bold;
  z-index: 1000;
  border-radius: 0 0 8px 0;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}
.skip-link:focus-visible {
  color: #000000;
}

*:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
}

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

/* --- Header --- */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 2px solid var(--divider-color);
}

/* Its own left-aligned row under the header, not inline with the header
   controls. Named back-link-game (not back-link) deliberately - it must
   NOT collide with the root site's .back-link class, which gets a
   history-aware click handler elsewhere; this link always goes to a
   fixed destination (this game's own info page) and should stay a
   plain link. */
.back-link-bar {
  padding: 0.75rem 1.5rem;
}
.back-link-game {
  display: inline-block;
  color: var(--accent-green);
  font-weight: bold;
  font-size: calc(0.9rem * var(--ui-scale));
  text-decoration: none;
}
.back-link-game:hover,
.back-link-game:focus-visible {
  text-decoration: underline;
}

.site-title {
  /* Comes after .header-controls in the DOM (so the speech toggle inside
     it is the very first Tab stop on the page, letting a screen reader
     user silence in-app speech before hearing anything else) - this order
     value restores the original left-to-right visual position without
     touching tab order, which always follows DOM order regardless of
     this property. */
  order: 1;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--text-color);
  font-family: inherit;
  font-size: calc(1.75rem * var(--ui-scale));
  font-weight: 800;
  cursor: pointer;
}
.site-title:hover,
.site-title:focus-visible {
  color: var(--accent-green);
}
.site-title .accent-pink { color: var(--accent-pink); }

.header-controls {
  order: 2;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
/* Settings reuses the generic .btn class, which is sized larger than
   the theme/speech toggles next to it — match them exactly so all
   three header controls render at the same height. */
.header-controls #settings-btn {
  padding: 0.4em 0.9em;
  font-size: calc(0.875rem * var(--ui-scale));
}

/* gap + padding (not overflow: hidden) - overflow: hidden would clip a
   focus ring on the last button, since it needs to render outside the
   button's own box but was being clipped by the group's rounded corner. */
.theme-toggle-group {
  display: flex;
  gap: 4px;
  border: 2px solid var(--border-light);
  border-radius: 8px;
  padding: 3px;
}
.theme-toggle-btn {
  background-color: transparent;
  color: var(--text-color);
  border: none;
  border-radius: 6px;
  padding: 0.4em 0.9em;
  font-size: calc(0.875rem * var(--ui-scale));
  font-weight: bold;
  cursor: pointer;
}
.theme-toggle-btn:hover,
.theme-toggle-btn:focus-visible {
  background-color: var(--border-light);
  color: var(--bg-color);
}
.theme-toggle-btn[aria-checked="true"] {
  background-color: var(--accent-pink);
  color: var(--on-accent);
}

.speech-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  background: transparent;
  border: 2px solid var(--border-light);
  border-radius: 8px;
  color: var(--text-color);
  padding: 0.4em 0.9em;
  font-size: calc(0.875rem * var(--ui-scale));
  font-weight: bold;
  cursor: pointer;
}
.speech-toggle-btn:hover,
.speech-toggle-btn:focus-visible {
  background-color: var(--border-light);
  color: var(--bg-color);
}
.speech-toggle-btn[aria-pressed="true"] {
  background-color: var(--accent-green);
  color: var(--on-accent);
  border-color: var(--accent-green);
}

/* The Settings dialog's own Theme section is a duplicate of the header's
   inline toggle, only meant to be reachable on narrow viewports where the
   header hides its copy (see the max-width: 960px block below) - hidden
   here by default so desktop doesn't show the same control twice. */
.settings-section-theme { display: none; }
@media (max-width: 960px) {
  .header-controls > .theme-toggle-group,
  .header-controls > #speech-quick-toggle {
    display: none;
  }
  .settings-section-theme { display: block; }
}

/* --- Buttons --- */
.btn {
  display: inline-block;
  background-color: transparent;
  color: var(--text-color);
  border: 2px solid var(--accent-green);
  padding: 0.625em 1.25em;
  border-radius: 8px;
  font-weight: bold;
  text-decoration: none;
  font-size: calc(1rem * var(--ui-scale));
  cursor: pointer;
  font-family: inherit;
}
.btn:hover,
.btn:focus-visible {
  background-color: var(--accent-green);
  color: var(--on-accent);
}
.btn-primary {
  background-color: var(--accent-green);
  color: var(--on-accent);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  filter: brightness(1.1);
}
.btn-secondary {
  border-color: var(--border-light);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
  background-color: var(--border-light);
  color: var(--bg-color);
}
.btn-danger {
  border-color: var(--accent-pink);
}
.btn-danger:hover,
.btn-danger:focus-visible {
  background-color: var(--accent-pink);
  color: var(--on-accent);
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* --- Layout --- */
main {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}
/* While playing, the whole page is capped to the viewport height and
   forbidden from scrolling itself - the canvas below is the only thing
   that scrolls internally (if it needs to), so the HUD, falling word,
   and controls are always all visible at once without paging the whole
   site. Matches Typing Speedometer's play screen. */
body.is-playing {
  height: 100vh;
  overflow: hidden;
}
body.is-playing .site-footer,
body.is-playing .back-link-bar {
  display: none;
}
body.is-playing main {
  max-width: 1800px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  padding-left: 2rem;
  padding-right: 2rem;
}
body.is-playing #screen-game {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.game-play-area {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  min-height: 0;
}

.screen h1 {
  font-size: calc(2.25rem * var(--ui-scale));
  margin-top: 0;
  margin-bottom: 0.5rem;
}
.screen-intro {
  font-size: calc(1.125rem * var(--ui-scale));
  color: var(--border-light);
  max-width: 640px;
  margin: 0 0 2rem;
}

/* --- feature-section (How to Play) --- */
.feature-section {
  background-color: var(--surface-color);
  border: 2px solid var(--divider-color);
  border-radius: 10px;
  margin-bottom: 1.75rem;
  padding: 0.25rem 1.5rem;
}
.feature-section summary {
  cursor: pointer;
  font-size: calc(1.25rem * var(--ui-scale));
  line-height: 1;
  font-weight: bold;
  padding: 1.1em 0;
  color: var(--accent-pink);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.feature-section summary:hover,
.feature-section summary:focus-visible {
  color: var(--focus-color);
}
.feature-section summary::-webkit-details-marker { display: none; }
.feature-section summary::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  font-size: 1.4em;
  line-height: 1;
  color: var(--accent-green);
}
.feature-section[open] summary::before { content: "\2212"; }
.feature-section[open] summary {
  border-bottom: 2px solid var(--divider-color);
  margin-bottom: 0.5rem;
}
.feature-section ul {
  padding-left: 1.5rem;
  padding-bottom: 1.25rem;
}
.feature-section li { margin-bottom: 0.6rem; font-size: calc(1rem * var(--ui-scale)); }
.feature-section kbd,
.shortcuts-list kbd {
  background-color: var(--bg-color);
  border: 2px solid var(--focus-color);
  color: var(--text-color);
  padding: 0.1em 0.45em;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.9em;
}
.shortcuts-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.shortcuts-list li {
  padding: 0.75em 0;
  border-bottom: 2px solid var(--divider-color);
  font-size: calc(1rem * var(--ui-scale));
}
.shortcuts-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* --- Choice picker (used for both game mode and speed) --- */
.choice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin: 1.25rem 0 2rem;
}
.choice-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: left;
  width: 100%;
  background-color: var(--surface-color);
  color: var(--text-color);
  border: 2px solid var(--divider-color);
  border-radius: 10px;
  padding: 1em 1.25em;
  font-family: inherit;
  cursor: pointer;
}
.choice-card:hover {
  border-color: var(--accent-green);
}
.choice-card[aria-checked="true"] {
  border-color: var(--accent-green);
  border-width: 3px;
  background-color: color-mix(in srgb, var(--accent-green) 12%, var(--surface-color));
}
.choice-card .choice-name {
  font-size: calc(1.2rem * var(--ui-scale));
  font-weight: 800;
}

/* --- Game screen --- */
/* HUD sits as a sidebar to the left of the canvas (not a bar above it)
   so the canvas can use the full available height. Falls back to a
   horizontal bar above the canvas on narrow viewports, where there
   isn't width to spare for a sidebar. */
.game-hud {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  width: 15rem;
  flex-shrink: 0;
  overflow-y: auto;
  background-color: var(--surface-color);
  border: 2px solid var(--border-light);
  border-radius: 10px;
  padding: 1rem;
}
.hud-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: calc(1.05rem * var(--ui-scale));
  font-weight: bold;
}
.hud-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.hud-stats .hud-label {
  color: var(--border-light);
  font-weight: normal;
}
.hud-value-level {
  color: var(--accent-green);
}
.hud-value-score {
  color: var(--focus-color);
}
.lives {
  color: var(--accent-pink);
  font-size: calc(1.3rem * var(--ui-scale));
  line-height: 1;
  letter-spacing: 0.15rem;
}
.game-hud .btn-row {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
}
.game-hud .btn-row .btn {
  width: 100%;
  text-align: center;
}

.fall-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 200px;
  background-color: var(--surface-color);
  border: 2px solid var(--border-light);
  border-radius: 12px;
  overflow: hidden;
}

@media (max-width: 960px) {
  .game-play-area {
    flex-direction: column;
  }
  .game-hud {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .hud-stats {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .game-hud .btn-row {
    flex-direction: row;
  }
  .game-hud .btn-row .btn {
    flex: 1 1 9rem;
    width: auto;
  }
}
.fall-stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  background-color: var(--accent-pink);
}
.fall-track {
  position: absolute;
  inset: 0;
}
.falling-word {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 97%;
  max-width: 97%;
  text-align: center;
  font-size: calc(2.25rem * var(--word-scale));
  font-weight: 800;
  line-height: 1.15;
  padding: 0 0.5em;
  overflow-x: hidden;
  white-space: nowrap;
}
/* Added by script.js (updateWordScroll) only once a word is actually
   too wide to fit on one line at the current text size - switches from
   the default centered single-line display to a left-anchored one it
   can scroll horizontally, keeping pace with typing progress instead of
   wrapping to a second line (which would make the letter you're on jump
   rows mid-word). */
.falling-word.scrolling {
  text-align: left;
}
.falling-word.shake {
  animation: fw-shake 0.28s ease;
}
@keyframes fw-shake {
  0%, 100% { transform: translate(-50%, 0); }
  25% { transform: translate(calc(-50% - 8px), 0); }
  75% { transform: translate(calc(-50% + 8px), 0); }
}
.letter {
  color: var(--text-color);
  transition: color 0.1s ease;
}
.letter.typed {
  color: var(--accent-green);
}
/* Matches Typing Speedometer's .char.current treatment - highlight +
   underline on the next letter to type, so it's clear at a glance where
   typing picks up, not just which letters are already done. */
.letter.current {
  color: var(--text-color);
  text-decoration: underline;
  text-decoration-color: var(--focus-color);
  text-decoration-thickness: 5px;
  text-underline-offset: 2px;
  background-color: color-mix(in srgb, var(--focus-color) 22%, transparent);
  border-radius: 2px;
}
/* A mistake always happens on the character that's also current, so this
   has to come after .letter.current in source order - otherwise the
   current-highlight's background would win the cascade (equal
   specificity, later rule wins) and the pink mistake flash would never
   actually be visible. */
.letter.mistake {
  color: var(--on-accent);
  background-color: var(--accent-pink);
  border-radius: 2px;
}
.falling-word.missed {
  animation: fw-miss 0.4s ease forwards;
}
@keyframes fw-miss {
  to { opacity: 0; transform: translate(-50%, 0) scale(0.85); }
}
.falling-word.completed {
  animation: fw-pop 0.35s ease forwards;
}
@keyframes fw-pop {
  to { opacity: 0; transform: translate(-50%, 0) scale(1.35); }
}

.game-hint {
  flex-shrink: 0;
  font-size: calc(0.95rem * var(--ui-scale));
  color: var(--border-light);
  text-align: center;
  margin: 0.5rem 0;
}

/* --- Pause overlay & modal backdrop --- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 40;
}
/* A backdrop for a dialog that can open on top of another already-open
   dialog needs its own z-index sitting between the two panel tiers -
   otherwise it shares the same z-index as every other backdrop (40),
   which is *below* the lower dialog's panel, so that panel stays fully
   lit behind the new one instead of dimming. Confirm-quit can open from
   Pause, Settings can open from Pause, and Clear-history can open from
   History - each needs to clear the panel tier directly beneath it. */
#confirm-backdrop { z-index: 54; }
#settings-backdrop, #shortcuts-backdrop { z-index: 59; }
#clear-history-backdrop { z-index: 64; }

.pause-panel,
.settings-dialog,
.confirm-panel {
  position: fixed;
  background-color: var(--surface-color);
  color: var(--text-color);
  border: 2px solid var(--divider-color);
  border-radius: 12px;
  padding: 1.75rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  max-height: 90vh;
  overflow-y: auto;
}
/* Confirm-quit can stack on top of the pause panel, and settings can
   stack on top of either, so each tier needs a higher z-index than
   the last rather than relying on DOM order. */
.pause-panel { z-index: 50; }
.confirm-panel { z-index: 55; }
.settings-dialog { z-index: 60; }
/* Clear-history confirmation stacks on top of the History dialog. */
#clear-history-panel { z-index: 65; }

.pause-panel,
.confirm-panel {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(28rem, 92vw);
  text-align: center;
}
.pause-panel h2,
.confirm-panel h2 {
  margin-top: 0;
  font-size: calc(1.6rem * var(--ui-scale));
}
.pause-panel .btn-row,
.confirm-panel .btn-row {
  justify-content: center;
  margin-top: 1.25rem;
}
.pause-panel .btn-row {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
}
.pause-panel .btn-row .btn {
  width: 100%;
}

.settings-dialog {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(34rem, 94vw);
  /* Non-scrolling header + separately-scrolling body, rather than a
     sticky header inside the whole scrolling panel - a real, confirmed
     Chromium rendering bug lets scrolled content paint above a
     `position: sticky` header when the header's own scroll ancestor is
     itself `position: fixed` (as this panel is), even though hit-testing
     and layout are both otherwise correct. This sidesteps the bug rather
     than working around it. */
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.settings-dialog-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--divider-color);
  padding: 1.75rem 1.75rem 0.9rem;
}
.settings-dialog-header h2 {
  margin: 0;
  font-size: calc(1.6rem * var(--ui-scale));
}
.settings-dialog-body {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  padding: 1.25rem 1.75rem 1.75rem;
}
.icon-btn {
  background: transparent;
  border: 2px solid var(--border-light);
  color: var(--text-color);
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  font-size: calc(1.25rem * var(--ui-scale));
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.icon-btn:hover,
.icon-btn:focus-visible {
  background-color: var(--border-light);
  color: var(--bg-color);
}

.settings-section {
  margin-bottom: 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 2px solid var(--divider-color);
}
.settings-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.settings-section h3 {
  font-size: calc(1.15rem * var(--ui-scale));
  color: var(--accent-pink);
  margin-top: 0;
  margin-bottom: 1rem;
}
/* Display and Text to Speech are <details>/<summary> instead of a plain
   h3 - long enough sections that collapsing them by default keeps the
   Settings dialog scannable. Selector is scoped to summary specifically
   (not "h3, summary" together) so the Theme section's real <h3> - not a
   <details>, deliberately not made collapsible - keeps its plain heading
   look instead of picking up the expand/collapse triangle. */
.settings-section summary {
  cursor: pointer;
  font-size: calc(1.15rem * var(--ui-scale));
  font-weight: bold;
  color: var(--accent-pink);
  margin-top: 0;
  margin-bottom: 1rem;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.settings-section summary::-webkit-details-marker { display: none; }
.settings-section summary::before {
  content: "+";
  display: inline-block;
  color: var(--accent-green);
  font-weight: 800;
  transform: scale(1.3);
}
.settings-section[open] summary::before {
  content: "\2212";
}
.field {
  margin-bottom: 1.1rem;
}
.field:last-child { margin-bottom: 0; }
.field label {
  display: block;
  font-weight: bold;
  font-size: calc(1rem * var(--ui-scale));
  margin-bottom: 0.35rem;
}
.field-hint {
  font-size: calc(0.85rem * var(--ui-scale));
  color: var(--border-light);
  margin: 0.15rem 0 0.5rem;
}
.field select,
.field input[type="range"] {
  width: 100%;
}
.field select {
  padding: 0.6em;
  font-size: calc(1rem * var(--ui-scale));
  border: 2px solid var(--border-light);
  border-radius: 8px;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: inherit;
}
.field-value {
  font-weight: bold;
  color: var(--accent-green);
}
input[type="range"] {
  accent-color: var(--accent-green);
  height: 1.5rem;
}
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.switch-row label {
  margin-bottom: 0;
}
.switch-btn {
  background: transparent;
  border: 2px solid var(--border-light);
  border-radius: 999px;
  color: var(--text-color);
  padding: 0.4em 1em;
  font-size: calc(1rem * var(--ui-scale));
  font-weight: bold;
  cursor: pointer;
  min-width: 5em;
  flex-shrink: 0;
}
.switch-btn[aria-checked="true"] {
  background-color: var(--accent-green);
  color: var(--on-accent);
  border-color: var(--accent-green);
}

/* --- End screen --- */
.results-list {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  background-color: var(--surface-color);
  border: 2px solid var(--border-light);
  border-radius: 10px;
  overflow: hidden;
}
.results-list li {
  display: flex;
  justify-content: space-between;
  padding: 0.9em 1.25em;
  font-size: calc(1.1rem * var(--ui-scale));
  border-bottom: 2px solid var(--divider-color);
}
.results-list li:last-child { border-bottom: none; }
.results-list .stat-label { font-weight: normal; color: var(--border-light); }
.results-list .stat-value { font-weight: 800; }

/* --- End screen: centered, narrower results --- */
#screen-end {
  text-align: center;
}
#screen-end .results-list {
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
}
#screen-end .btn-row {
  justify-content: center;
}
@media (max-width: 960px) {
  #screen-end .results-list {
    max-width: 100%;
  }
}

.history-list {
  margin-bottom: 1.25rem;
}
.history-list .history-entry {
  display: block;
  padding: 0.9em 1.1em;
  cursor: default;
}
/* history-entry-top is an <h3> now (see script.js) so each entry has a
   real heading a screen reader can jump between - reset the browser's
   default heading font-size/margin so it renders exactly like the plain
   div it used to be, just with proper heading semantics underneath. */
.history-entry-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 0.4rem;
  font-size: 1em;
  font-weight: 800;
}
.history-entry-mode {
  color: var(--accent-green);
}
.history-entry-date {
  color: var(--border-light);
  font-weight: normal;
  font-size: calc(0.85rem * var(--ui-scale));
}
.history-entry-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  font-size: calc(0.95rem * var(--ui-scale));
  color: var(--border-light);
}
.history-entry-stats strong {
  color: var(--text-color);
}
.encouragement {
  font-size: calc(1.3rem * var(--ui-scale));
  font-weight: bold;
  color: var(--accent-pink);
  margin-bottom: 1.75rem;
}

/* --- Footer --- */
.site-footer {
  border-top: 2px solid var(--divider-color);
  padding: 1.5rem;
  text-align: center;
  font-size: calc(0.875rem * var(--ui-scale));
}
.site-footer p { margin: 0.4rem 0; }

@media (min-width: 961px) {
  .choice-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}