:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bg: #F5A9B8;
  --text: #3b2031;
  --card: #fff9fb;
  --edge: #f0cfda;
  --muted: #826478;
  --input-bg: #fff;
  --option-bg: #fff1f5;
  --option-hover: #ffe1ec;
  --accent: #ac3e70;
  --accent-hover: #92315e;
  --accent-text: #fff;
  --track: #f2d9e2;
  --feedback: #e9f9ef;
  --feedback-edge: #93c5aa;
  --incorrect: #fff0f0;
  --incorrect-edge: #e1a3ae;
  --shadow: 0 24px 70px #69234230;
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #291b29;
  --text: #fff0f6;
  --card: #38283b;
  --edge: #614257;
  --muted: #d5b2c4;
  --input-bg: #281d2d;
  --option-bg: #483347;
  --option-hover: #5b3a52;
  --accent: #f5a9b8;
  --accent-hover: #ffd0da;
  --accent-text: #32212f;
  --track: #5d4055;
  --feedback: #254835;
  --feedback-edge: #5caa7c;
  --incorrect: #5b2c3b;
  --incorrect-edge: #b76781;
  --shadow: 0 25px 80px #0006;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  margin: 0;
  min-height: 100vh;
  transition: background-color .2s, color .2s;
}
a { color: var(--accent); }
a:hover { text-decoration-thickness: 2px; }
.layout {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 80px 22px 100px;
}
.card {
  width: min(100%, 650px);
  border: 1px solid var(--edge);
  border-radius: 24px;
  background: var(--card);
  box-shadow: var(--shadow);
  padding: clamp(24px, 5vw, 42px);
}
.eyebrow { font-weight: 800; color: var(--accent); font-size: .84rem; letter-spacing: .14em; margin-bottom: 8px; }
h1 { font-size: clamp(1.65rem, 4vw, 2.1rem); margin: 0 0 9px; letter-spacing: -.03em; }
h2 { font-size: clamp(1.3rem, 3vw, 1.75rem); line-height: 1.35; margin: 0 0 22px; }
p { line-height: 1.5; }
.muted { color: var(--muted); }
.intro { margin: 8px 0 30px; }
.meta { font-size: .9rem; }
.small { font-size: .82rem; }
.field-label { display: block; font-weight: 700; margin-bottom: 10px; }
.text-input {
  display: block;
  width: 100%;
  border: 1px solid var(--edge);
  background: var(--input-bg);
  color: var(--text);
  border-radius: 12px;
  padding: 15px 16px;
  font: inherit;
  margin-bottom: 18px;
}
.text-input:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.text-input::placeholder { color: var(--muted); opacity: .9; }
.primary {
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: 12px;
  padding: 14px 22px;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.primary:hover { background: var(--accent-hover); }
.error { color: #bf2453; font-weight: 650; margin: -3px 0 15px; }
[data-theme='dark'] .error { color: #ff9fb5; }
.history { margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--edge); }
.history-heading { font-size: 1.02rem; margin-bottom: 12px; }
.history-list { display: grid; gap: 9px; }
.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid var(--edge);
  background: var(--option-bg);
  text-decoration: none;
}
.history-item:hover { background: var(--option-hover); }
.history-name { font-weight: 750; text-transform: capitalize; }
.top { display: flex; justify-content: space-between; align-items: end; gap: 16px; }
.top h1 { text-transform: capitalize; }
.back { font-size: .88rem; display: inline-block; margin-bottom: 12px; text-decoration: none; }
.score { text-align: right; white-space: nowrap; margin-bottom: 11px; }
.track { height: 10px; background: var(--track); border-radius: 30px; overflow: hidden; margin: 18px 0 33px; }
.bar { height: 100%; background: var(--accent); transition: width .2s; }
.question-number { margin-bottom: 9px; }
.options { display: grid; gap: 11px; margin-bottom: 25px; }
.option {
  display: flex;
  gap: 12px;
  align-items: center;
  background: var(--option-bg);
  border: 1px solid var(--edge);
  border-radius: 12px;
  padding: 15px 17px;
  cursor: pointer;
}
.option:hover, .option:has(input:checked) { background: var(--option-hover); border-color: var(--accent); }
.option input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; flex-shrink: 0; }
.response { margin-bottom: 24px; }
.feedback { padding: 18px; border-radius: 13px; border: 1px solid var(--feedback-edge); background: var(--feedback); margin-bottom: 24px; }
.feedback.incorrect { border-color: var(--incorrect-edge); background: var(--incorrect); }
.feedback h3 { margin: 0 0 8px; }
.feedback p { margin: 5px 0; }
.final { font-size: clamp(2.3rem, 7vw, 3.3rem); font-weight: 800; margin-bottom: 14px; }
.text-link { display: inline-block; margin-top: 20px; text-decoration: none; font-weight: 650; }
.card-footer { display: flex; justify-content: end; border-top: 1px solid var(--edge); padding-top: 14px; margin-top: 30px; }
.plain { background: transparent; color: var(--muted); padding: 8px; border: none; font: inherit; cursor: pointer; }
.plain:hover { color: var(--text); text-decoration: underline; }
.made-by {
  position: fixed;
  right: 20px;
  bottom: 16px;
  z-index: 5;
  border-radius: 12px;
  padding: 8px 12px;
  background: var(--card);
  border: 1px solid var(--edge);
  box-shadow: 0 4px 14px #0001;
  text-align: right;
  font-size: .84rem;
}
.made-by a { font-weight: 650; text-decoration: none; }
.made-by a:hover { text-decoration: underline; }
@media (max-width: 480px) {
  .top { align-items: start; flex-direction: column; gap: 0; }
  .score { text-align: left; margin: 0; }
  .layout { padding: 80px 12px 90px; }
  .made-by { right: 10px; bottom: 10px; }
}
.made-by { max-width: calc(100vw - 20px); overflow-wrap: anywhere; }

/* Quiz history action buttons */
.history-item { flex-wrap: nowrap; }
.history-entry { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; text-decoration: none; }
.history-entry:hover .history-name { text-decoration: underline; }
.history-item form { flex-shrink: 0; }
.reset-item { border-left: 1px solid var(--edge); padding: 7px 4px 7px 14px; }
.reset-all { display: flex; justify-content: flex-end; margin-top: 11px; }
.danger { color: #b23258; }
[data-theme='dark'] .danger { color: #ff9fb5; }
.danger:hover { color: #912340; }

/* Audio/video questions */
.audio-player-wrap,
.video-player-wrap {
  margin: -4px 0 24px;
  padding: 12px;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--option-bg);
}
.audio-player {
  display: block;
  width: 100%;
  accent-color: var(--accent);
}
.video-player {
  display: block;
  width: 100%;
  max-height: 60vh;
  border-radius: 10px;
  background: #000;
}
.feedback.skipped {
  background: var(--option-bg);
  border-color: var(--edge);
}
.feedback code {
  overflow-wrap: anywhere;
}

/* Image questions */
.image-player-wrap {
  margin: -4px 0 24px;
  padding: 12px;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--option-bg);
  text-align: center;
}
.quiz-image {
  display: block;
  max-width: 100%;
  max-height: 65vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: 10px;
  object-fit: contain;
}

/* Optional per-quiz colour theme. The chosen colour is the light-mode page
   background; dark mode mixes the same colour into a dark neutral palette. */
:root.quiz-custom-theme {
  --bg: var(--quiz-colour);
  --text: #302731;
  --card: color-mix(in srgb, var(--quiz-colour) 7%, #ffffff);
  --edge: color-mix(in srgb, var(--quiz-colour) 28%, #d9d1d8);
  --muted: color-mix(in srgb, var(--quiz-colour) 20%, #655b65);
  --input-bg: color-mix(in srgb, var(--quiz-colour) 4%, #ffffff);
  --option-bg: color-mix(in srgb, var(--quiz-colour) 13%, #ffffff);
  --option-hover: color-mix(in srgb, var(--quiz-colour) 23%, #ffffff);
  --accent: color-mix(in srgb, var(--quiz-colour) 25%, #382332);
  --accent-hover: color-mix(in srgb, var(--quiz-colour) 20%, #2d1c29);
  --accent-text: #ffffff;
  --track: color-mix(in srgb, var(--quiz-colour) 25%, #e7e0e6);
  --shadow: 0 24px 70px #0000002b;
}
:root.quiz-custom-theme[data-theme='dark'] {
  --bg: color-mix(in srgb, var(--quiz-colour) 22%, #17151a);
  --text: #f6f1f5;
  --card: color-mix(in srgb, var(--quiz-colour) 12%, #2a262d);
  --edge: color-mix(in srgb, var(--quiz-colour) 28%, #4b444e);
  --muted: color-mix(in srgb, var(--quiz-colour) 24%, #c3bac2);
  --input-bg: color-mix(in srgb, var(--quiz-colour) 8%, #211e24);
  --option-bg: color-mix(in srgb, var(--quiz-colour) 16%, #342f36);
  --option-hover: color-mix(in srgb, var(--quiz-colour) 24%, #403941);
  --accent: color-mix(in srgb, var(--quiz-colour) 35%, #ffffff);
  --accent-hover: color-mix(in srgb, var(--quiz-colour) 45%, #ffffff);
  --accent-text: #211c22;
  --track: color-mix(in srgb, var(--quiz-colour) 20%, #504851);
  --shadow: 0 25px 80px #0007;
}

/* Optional media displayed with the revealed answer */
.display-media-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.display-media-item {
  padding: 10px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: var(--option-bg);
}
.display-audio {
  display: block;
  width: 100%;
  accent-color: var(--accent);
}
.display-video {
  display: block;
  width: 100%;
  max-height: 55vh;
  border-radius: 9px;
  background: #000;
}
.display-image {
  display: block;
  max-width: 100%;
  max-height: 55vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: 9px;
  object-fit: contain;
}
.display-media-missing {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px dashed var(--edge);
  border-radius: 10px;
  background: var(--option-bg);
  overflow-wrap: anywhere;
}

/* Optional per-question countdown timer */
.question-timer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: -6px 0 22px;
  padding: 9px 12px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--option-bg);
  color: var(--text);
  font-weight: 700;
  transition: background-color .15s, border-color .15s, color .15s;
}
.question-timer strong {
  font-variant-numeric: tabular-nums;
  min-width: 2.4ch;
  display: inline-block;
}
.question-timer.timer-warning {
  border-color: var(--incorrect-edge);
  background: var(--incorrect);
}
.question-timer.timer-expired {
  border-color: var(--incorrect-edge);
  background: var(--incorrect);
  color: var(--text);
}
.timer-icon { line-height: 1; }

/* Daily Anagrams: retains the original quiz site's pink / dark palette. */
.word-card { width: min(100%, 860px); }
.brand { text-align: center; font-size: .72rem; font-weight: 850; color: var(--accent); letter-spacing: .19em; margin: 0 0 24px; }
.brand span { margin: 0 10px; }
.name-toggle {
  position: fixed; top: 18px; left: 22px; z-index: 10;
  background: var(--card); color: var(--text); border: 1px solid var(--edge);
  box-shadow: 0 5px 16px #0002; border-radius: 100px; padding: 10px 16px;
  cursor: pointer; font: inherit; font-weight: 650;
}
.name-toggle:hover { background: var(--option-hover); }
.name-toggle[hidden] { display: none; }
.day-meta { border-top: 1px solid var(--edge); padding-top: 20px; margin: 28px 0 0; text-align: center; font-size: .78rem; color: var(--muted); }
.loading { color: var(--muted); text-align: center; padding: 55px 0; }
.welcome-symbol { text-align: center; font-size: 4rem; color: var(--accent); padding-bottom: 14px; }
.full-button { width: 100%; }
.rule-list { display: grid; gap: 12px; margin: 18px 0; }
.rule { display: flex; align-items: center; gap: 16px; padding: 13px 16px; border: 1px solid var(--edge); border-radius: 13px; background: var(--option-bg); }
.rule p { margin: 0; }
.rule-number { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-weight: 800; }
.rule-list + .small { margin-bottom: 25px; }
.reveal-tiles { display: grid; grid-template-columns: repeat(var(--reveal-cols, 4), minmax(0, 1fr)); gap: 14px; margin: 32px 0; }
.letter-tile { display: grid; place-items: center; height: clamp(75px, 12vw, 132px); border: 2px solid var(--edge); border-radius: 17px; background: var(--option-bg); color: var(--accent); font-size: clamp(2.3rem, 8vw, 4.5rem); font-weight: 850; box-shadow: 0 10px 22px #0001; }
.reveal-progress { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 5px 0 22px; }
.step-dot { width: min(35px, 7vw); height: 7px; border-radius: 100px; background: var(--track); }
.step-dot.active { background: var(--accent); }
.step-dot.complete { background: var(--feedback-edge); }
.countdown-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--option-bg); border: 1px solid var(--edge); color: var(--text); border-radius: 100px; padding: 9px 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.countdown-pill.timer-warning { background: var(--incorrect); border-color: var(--incorrect-edge); }
.play-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.play-header h1 { margin-bottom: 0; }
.score-strip, .result-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 28px 0; }
.result-summary { grid-template-columns: repeat(3, 1fr); }
.score-strip > div, .result-summary > div { text-align: center; background: var(--option-bg); border: 1px solid var(--edge); border-radius: 14px; padding: 16px 10px; }
.score-strip strong, .result-summary strong { display: block; font-size: clamp(1.45rem, 3.5vw, 2.3rem); font-variant-numeric: tabular-nums; }
.score-strip small, .result-summary small { display: block; color: var(--muted); font-size: .8rem; margin-top: 2px; }
.pool-panel { background: var(--option-bg); border: 1px solid var(--edge); border-radius: 14px; padding: 16px; margin: -7px 0 24px; }
.pool-panel .field-label { margin-bottom: 12px; }
.pool-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.pool-tile { display: grid; place-items: center; flex: 0 0 auto; width: clamp(38px, 8vw, 53px); height: clamp(43px, 9vw, 58px); border: 1px solid var(--edge); border-radius: 10px; background: var(--card); color: var(--accent); font-size: clamp(1.25rem, 4vw, 1.8rem); font-weight: 850; }
.guess-row { display: flex; align-items: stretch; gap: 10px; }
.guess-row .text-input { margin: 0; min-width: 0; flex: 1; }
.guess-row .primary { white-space: nowrap; }
.guess-feedback { min-height: 24px; margin: 12px 0 24px; font-size: .9rem; }
.early-finish-row { display: flex; justify-content: flex-end; margin: -10px 0 23px; }
.done-early { border: 1px solid var(--edge); border-radius: 10px; padding: 10px 15px; background: var(--option-bg); font-weight: 700; }
.done-early:hover:not(:disabled) { background: var(--option-hover); text-decoration: none; }
.guess-feedback.good { color: #28804f; font-weight: 750; }
.guess-feedback.bad { color: #b42b55; font-weight: 650; }
[data-theme='dark'] .guess-feedback.good { color: #a1e9b9; }
[data-theme='dark'] .guess-feedback.bad { color: #ff9fb5; }
.word-sections { display: grid; gap: 22px; max-height: min(950px, 72vh); overflow-y: auto; overflow-x: hidden; scrollbar-color: var(--edge) transparent; padding-right: 6px; }
.word-zone { border: 1px solid var(--edge); border-radius: 16px; padding: 16px; background: var(--option-bg); }
.zone-header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.zone-header h2 { font-size: 1.06rem; margin: 0; }
.word-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.word-chip { display: inline-block; border: 1px solid var(--edge); border-radius: 8px; background: var(--card); color: var(--muted); font: 650 .82rem ui-monospace, 'Cascadia Code', Consolas, monospace; letter-spacing: .09em; padding: 8px 11px; }
.word-chip.solved { border-color: var(--feedback-edge); color: var(--text); background: var(--feedback); }
.word-chip.blank { letter-spacing: .13em; }
.word-chip.missed { color: var(--text); }
.answers-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; margin: 1px 0 4px; }
.answers-button:hover { text-decoration: none; }
.back-link { display: inline-block; text-decoration: none; font-weight: 700; margin-bottom: 26px; }
.back-link:hover { text-decoration: underline; }
.answers-sections { max-height: none; overflow: visible; padding-right: 0; }
.answer-summary { margin: 21px 0; }
.answers-key { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 0 0 20px; }
.key-square { width: 14px; height: 14px; display: inline-block; border-radius: 4px; border: 1px solid var(--edge); background: var(--card); }
.key-square.found-key { background: var(--feedback); border-color: var(--feedback-edge); }
.key-square.missed-key { margin-left: 15px; }
.answers-bottom-link { margin: 28px 0 0; }
.result-letters { color: var(--accent); font: 800 1.07rem ui-monospace, Consolas, monospace; letter-spacing: .15em; overflow-wrap: anywhere; }
.leaderboard-heading { margin: 28px 0 5px; font-size: 1.36rem; }
.leaderboard-scroll { overflow-x: auto; border: 1px solid var(--edge); border-radius: 14px; margin: 16px 0; }
.leaderboard { border-collapse: collapse; width: 100%; font-size: .9rem; text-align: left; }
.leaderboard th { background: var(--option-bg); color: var(--muted); font-size: .8rem; font-weight: 700; white-space: nowrap; }
.leaderboard th, .leaderboard td { border-bottom: 1px solid var(--edge); padding: 13px 10px; vertical-align: middle; }
.leaderboard tbody tr:last-child td { border: 0; }
.leaderboard tbody tr.my-score { background: var(--feedback); }
.rank-cell { font-weight: 800; white-space: nowrap; }
.leader-name { display: block; font-weight: 750; overflow-wrap: anywhere; }
.longest { display: block; font-size: .79rem; margin-top: 5px; overflow-wrap: anywhere; }
.num-cell { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.you-tag { display: inline; color: var(--accent); font-size: .72rem; }
.refresh-board { margin-bottom: 10px; }
.name-dialog { background: var(--card); color: var(--text); border: 1px solid var(--edge); border-radius: 20px; padding: 28px; width: min(440px, calc(100vw - 32px)); box-shadow: var(--shadow); }
.name-dialog::backdrop { background: #170b19b8; }
.dialog-body h2 { margin-bottom: 20px; }
.dialog-actions { display: flex; justify-content: end; align-items: center; gap: 12px; }
button:disabled { opacity: .58; cursor: default; }
[hidden] { display: none !important; }
@media (max-width: 600px) {
  .name-toggle { left: 12px; }
  .word-card { padding: 23px 16px; }
  .brand { margin-top: 7px; letter-spacing: .10em; }
  .reveal-tiles { gap: 6px; }
  .play-header { align-items: start; }
  .play-header h1 { font-size: 1.45rem; }
  .guess-row .primary { padding: 12px; }
  .word-chip { font-size: .73rem; padding: 7px 8px; }
  .leaderboard { font-size: .82rem; }
  .leaderboard td, .leaderboard th { padding: 10px 7px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Daily Anagrams theme selector. The original palette remains the default. */
.theme-controls {
  position: fixed;
  top: 18px;
  right: 22px;
  z-index: 20;
}
.theme-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--edge);
  border-radius: 100px;
  padding: 10px 16px;
  box-shadow: 0 5px 16px #0002;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}
.theme-menu-trigger:hover, .theme-menu-trigger[aria-expanded='true'] {
  background: var(--option-hover);
}
.theme-menu-trigger .chevron { margin-left: 3px; font-size: 1.1rem; }
.theme-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(348px, calc(100vw - 24px));
  max-height: calc(100dvh - 88px);
  overflow-y: auto;
  padding: 18px;
  border-radius: 19px;
  border: 1px solid var(--edge);
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow);
}
.theme-menu-heading { font-size: 1.04rem; margin: 0 0 13px; }
.palette-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.palette-choice {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 10px 8px;
  border: 1px solid var(--edge);
  background: var(--option-bg);
  color: var(--text);
  border-radius: 11px;
  font: inherit;
  font-size: .83rem;
  text-align: left;
  cursor: pointer;
}
.palette-choice:hover { background: var(--option-hover); }
.palette-choice[aria-pressed='true'] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 800; }
.palette-swatch {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border: 1px solid #7775;
  border-radius: 9px;
  background: linear-gradient(135deg, #f5a9b8 50%, #ac3e70 50%);
}
.palette-choice .selected-mark { margin-left: auto; color: var(--accent); visibility: hidden; }
.palette-choice[aria-pressed='true'] .selected-mark { visibility: visible; }
.swatch-default { background: linear-gradient(135deg, #f5a9b8 45%, #fff9fb 45% 70%, #ac3e70 70%); }
.swatch-gameboy { background: linear-gradient(135deg, #213c27 35%, #829c65 35% 68%, #d9e8b2 68%); }
.swatch-chrome { background: linear-gradient(135deg, #83929f, #fff 42%, #bfcad3 62%, #36546a); }
.swatch-vignette { background: radial-gradient(circle at 45% 38%, #b48eaa, #573452 52%, #18101b); }
.swatch-sakura { background: linear-gradient(135deg, #ffcbdc 40%, #fff3f5 40% 67%, #c35981 67%); }
.swatch-midnight { background: linear-gradient(135deg, #0d1835 40%, #455bd3 40% 72%, #b5c8fc 72%); }
.swatch-lavender { background: linear-gradient(135deg, #dcc7ff 45%, #f9f2ff 45% 72%, #7658b5 72%); }
.swatch-terminal { background: linear-gradient(135deg, #081910 45%, #225e37 45% 70%, #67eb8e 70%); }
.theme-menu-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--edge); }
.theme-menu-label { font-weight: 700; font-size: .85rem; }
.mode-toggle { background: var(--option-bg); color: var(--text); border: 1px solid var(--edge); border-radius: 999px; padding: 9px 12px; cursor: pointer; font: inherit; font-size: .85rem; font-weight: 650; }
.mode-toggle:hover { background: var(--option-hover); }

/* Palette-specific surface colours. Light/dark is independently selectable. */
:root[data-palette='gameboy'] {
  --bg: #a3b783; --text: #263c23; --card: #dfebbd; --edge: #7d956a;
  --muted: #4f6c45; --input-bg: #f3f8df; --option-bg: #cce0a7;
  --option-hover: #b9d38e; --accent: #315b33; --accent-hover: #1f4627;
  --accent-text: #f6ffe6; --track: #a6c184; --feedback: #e0f3ba;
  --feedback-edge: #65934c; --incorrect: #f4dfb1; --incorrect-edge: #b88b4e;
  --shadow: 0 24px 65px #233e2b35;
}
:root[data-theme='dark'][data-palette='gameboy'] {
  --bg: #19271d; --text: #e3f4c7; --card: #2b402b; --edge: #607c4a;
  --muted: #bad29c; --input-bg: #1e3021; --option-bg: #375035;
  --option-hover: #496244; --accent: #c4e88f; --accent-hover: #e6ffb9;
  --accent-text: #17251a; --track: #496347; --feedback: #3d5c34;
  --feedback-edge: #8fb576; --incorrect: #614538; --incorrect-edge: #bb8a63;
  --shadow: 0 24px 74px #030b0588;
}
:root[data-palette='chrome'] {
  --bg: #dbe2eb; --text: #273746; --card: #f2f6fa; --edge: #a6b4c3;
  --muted: #5c6b7b; --input-bg: #fff; --option-bg: #e0e9f0;
  --option-hover: #d1dee8; --accent: #345c82; --accent-hover: #244a72;
  --accent-text: #fff; --track: #c9d4df; --feedback: #d5f1e6;
  --feedback-edge: #7eada0; --incorrect: #f8e4e7; --incorrect-edge: #c69da9;
  --shadow: 0 25px 75px #364b632e;
  --page-art: linear-gradient(135deg, #c3d1dc 0%, #f6faff 39%, #b2bdcb 76%, #e7eff6 100%);
  --card-art: linear-gradient(145deg, #fff9, transparent 58%);
}
:root[data-theme='dark'][data-palette='chrome'] {
  --bg: #19222e; --text: #f0f6ff; --card: #283849; --edge: #657b91;
  --muted: #b6cadd; --input-bg: #152333; --option-bg: #35485c;
  --option-hover: #496078; --accent: #c1dcfa; --accent-hover: #e5f2ff;
  --accent-text: #172b3c; --track: #53657a; --feedback: #285d55;
  --feedback-edge: #68a89a; --incorrect: #623d4d; --incorrect-edge: #b57d99;
  --shadow: 0 25px 75px #0009;
  --page-art: linear-gradient(135deg, #101924 0%, #344659 50%, #131d29 100%);
  --card-art: linear-gradient(145deg, #b6d6f01a, transparent 65%);
}
:root[data-palette='vignette'] {
  --bg: #4f344b; --text: #faf0f5; --card: #3b2a3d; --edge: #84647e;
  --muted: #dbc3d3; --input-bg: #281f31; --option-bg: #523c52;
  --option-hover: #684962; --accent: #efb0d0; --accent-hover: #ffdaed;
  --accent-text: #342034; --track: #6f5066; --feedback: #2a5547;
  --feedback-edge: #64a58b; --incorrect: #6a344a; --incorrect-edge: #c4839d;
  --shadow: 0 25px 90px #190d20bb;
  --page-art: radial-gradient(ellipse at 50% 30%, #79576f 0%, #372437 57%, #140e18 100%);
}
:root[data-theme='dark'][data-palette='vignette'] {
  --bg: #180f1c; --text: #f9e9f3; --card: #281d2e; --edge: #694b67;
  --muted: #cdb0c8; --input-bg: #1a1422; --option-bg: #39283e;
  --option-hover: #4e3550; --accent: #e5a5cb; --accent-hover: #f7c6e3;
  --accent-text: #24172a; --track: #533a51; --feedback: #24483f;
  --feedback-edge: #639b82; --incorrect: #5a3042; --incorrect-edge: #a76a88;
  --shadow: 0 25px 90px #000b;
  --page-art: radial-gradient(ellipse at 50% 26%, #4a314b 0%, #201525 55%, #08070b 100%);
}
:root[data-palette='sakura'] {
  --bg: #f9dce7; --text: #592e47; --card: #fff9fc; --edge: #e9b9cb;
  --muted: #92647b; --input-bg: #fff; --option-bg: #ffecf3;
  --option-hover: #ffe0ed; --accent: #ae507d; --accent-hover: #8c365f;
  --accent-text: #fff; --track: #f5cbdc; --feedback: #e9f6e8;
  --feedback-edge: #8bc59e; --incorrect: #ffeaec; --incorrect-edge: #dfa3b1;
  --shadow: 0 25px 70px #a94d7030;
}
:root[data-theme='dark'][data-palette='sakura'] {
  --bg: #34212e; --text: #ffedf5; --card: #442e3b; --edge: #84536e;
  --muted: #ebbbd0; --input-bg: #2b1d2a; --option-bg: #553747;
  --option-hover: #724557; --accent: #ffc3dc; --accent-hover: #ffdeea;
  --accent-text: #3c2030; --track: #694354; --feedback: #305441;
  --feedback-edge: #7bab88; --incorrect: #633746; --incorrect-edge: #b78094;
  --shadow: 0 25px 80px #0008;
}
:root[data-palette='midnight'] {
  --bg: #bfcaf1; --text: #20294f; --card: #f0f3ff; --edge: #a4b2df;
  --muted: #59658f; --input-bg: #fff; --option-bg: #dfe5fb;
  --option-hover: #cfd9f6; --accent: #424fa5; --accent-hover: #2d398c;
  --accent-text: #fff; --track: #c0cdf2; --feedback: #daf4e9;
  --feedback-edge: #84b9a2; --incorrect: #fde3e8; --incorrect-edge: #d2a2b7;
  --shadow: 0 25px 80px #2d397333;
}
:root[data-theme='dark'][data-palette='midnight'] {
  --bg: #0f1730; --text: #f0f3ff; --card: #1d2948; --edge: #4e5f91;
  --muted: #b5c2ed; --input-bg: #121e39; --option-bg: #2b3b64;
  --option-hover: #394b79; --accent: #b2c5ff; --accent-hover: #d4dfff;
  --accent-text: #182549; --track: #425483; --feedback: #234e53;
  --feedback-edge: #66a0a1; --incorrect: #5b334f; --incorrect-edge: #b1769b;
  --shadow: 0 25px 80px #0009;
  --page-art: radial-gradient(ellipse at 54% 22%, #263768 0%, #121b38 55%, #090d1d 100%);
}
:root[data-palette='lavender'] {
  --bg: #e3d6f6; --text: #3a2a55; --card: #fcf8ff; --edge: #c7b3e4;
  --muted: #75658c; --input-bg: #fff; --option-bg: #f0e7ff;
  --option-hover: #e5d8fb; --accent: #7651ae; --accent-hover: #5f368f;
  --accent-text: #fff; --track: #ddcdec; --feedback: #e6f7e9;
  --feedback-edge: #83b999; --incorrect: #fce8f1; --incorrect-edge: #c79da9;
  --shadow: 0 25px 70px #7457a435;
}
:root[data-theme='dark'][data-palette='lavender'] {
  --bg: #251e35; --text: #f3ecff; --card: #342842; --edge: #6f568e;
  --muted: #d0bde4; --input-bg: #241c32; --option-bg: #453452;
  --option-hover: #594367; --accent: #d6b8ff; --accent-hover: #eddaff;
  --accent-text: #291d3b; --track: #604c72; --feedback: #2b5145;
  --feedback-edge: #689c84; --incorrect: #61374d; --incorrect-edge: #ae7b9d;
  --shadow: 0 25px 80px #0009;
}
:root[data-palette='terminal'] {
  --bg: #bdcabb; --text: #122b19; --card: #ecf4e9; --edge: #7fa38a;
  --muted: #41634a; --input-bg: #fff; --option-bg: #d6e9d2;
  --option-hover: #c6ddc0; --accent: #176336; --accent-hover: #0b4a25;
  --accent-text: #fff; --track: #b0d0b5; --feedback: #c8eed1;
  --feedback-edge: #529d69; --incorrect: #f6e2d9; --incorrect-edge: #c39381;
  --shadow: 0 25px 70px #152f1933;
}
:root[data-theme='dark'][data-palette='terminal'] {
  --bg: #08130c; --text: #c3f4ca; --card: #102217; --edge: #356447;
  --muted: #8fbf98; --input-bg: #08190f; --option-bg: #183622;
  --option-hover: #245031; --accent: #78ee9d; --accent-hover: #aeffbe;
  --accent-text: #08170d; --track: #30563c; --feedback: #204a2d;
  --feedback-edge: #56ae74; --incorrect: #4f2e28; --incorrect-edge: #b57d6d;
  --shadow: 0 25px 75px #000a;
  --page-art: radial-gradient(ellipse at 50% 22%, #132b1b 0%, #09130d 75%);
}

/* Gradients only affect palettes that request them. */
body { background-image: var(--page-art, none); background-attachment: fixed; }
.card { background-image: var(--card-art, none); }

/* Clear separation of submitted answers and the remaining blank word slots. */
.guess-board { display: grid; gap: 18px; margin-top: 8px; }
.guess-panel { border: 1px solid var(--edge); border-radius: 17px; padding: 17px; background: var(--card); }
.guess-panel-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.guess-panel-heading h2 { margin: 0; font-size: 1.18rem; }
.guessed-list { display: grid; gap: 16px; max-height: min(300px, 32vh); overflow-y: auto; scrollbar-color: var(--edge) transparent; padding-right: 3px; }
.guessed-length-row h3 { margin: 0 0 8px; color: var(--muted); font-size: .83rem; font-weight: 750; }
.guessed-length-row .word-grid { gap: 7px; }
.empty-guessed, .all-found { margin: 0; padding: 10px 0; }
.guess-panel .blanks-sections { max-height: min(680px, 55vh); gap: 12px; }
.guess-panel .word-zone { padding: 13px; }
.guess-panel .word-zone .zone-header { margin-bottom: 10px; }
@media (max-width: 600px) {
  .theme-controls { right: 12px; }
  .theme-menu { padding: 14px; }
  .palette-choice { padding: 8px 6px; font-size: .79rem; }
  .guess-panel { padding: 13px; }
  .guess-panel-heading h2 { font-size: 1.04rem; }
}

/* Keep the creator credit out of the word list, even on tall puzzle pages. */
.layout { min-height: calc(100vh - 62px); }
.made-by {
  position: static;
  width: fit-content;
  max-width: calc(100% - 20px);
  margin: 0 20px 16px auto;
}
@media (max-width: 390px) {
  .name-toggle, .theme-menu-trigger { padding: 9px 10px; font-size: .84rem; }
  .theme-menu-trigger { gap: 5px; }
  .made-by { margin-right: 10px; }
}