/* Shared Little Fun Games visual language, based on the homepage island. */
:root {
  --ink: #203e42;
  --blue: #285849;
  --lime: #f5df98;
  --paper: #f9f5e9;
  --white: #fffbee;
  --muted: #586e63;
  --line: #cbd5bf;
  --coral: #f3866d;
  --mint: #b9d9c6;
  --edge: #28494c;
  --score-high: #d8b355;
  --score-mid: #558a76;
  --score-empty: #cbd4c1;
}
body:not([data-route=home]) {
  color: var(--ink);
  background-color: var(--paper);
  background-image: url('/images/island-header.svg'), linear-gradient(#c6e7db, #f9f5e9 360px);
  background-size: 1440px 310px, 100% 390px;
  background-repeat: no-repeat;
  background-position: center top;
}
body:not([data-route=home]) :focus-visible {outline: 3px solid #285849; outline-offset: 4px}
body:not([data-route=home]) .site-header {max-width: 1240px; padding: 23px 30px; border-bottom: 1px solid #28494c35}
body:not([data-route=home]) .brand {gap: 12px; color: var(--ink); text-decoration: none}
body:not([data-route=home]) .brand-mark {width: auto; height: auto; background: transparent; color: var(--ink); border-radius: 0; font-size: 22px; letter-spacing: -1px; font-weight: 800}
body:not([data-route=home]) .brand-name {font: 700 10px 'DM Sans',sans-serif; letter-spacing: 2px; text-transform: uppercase; border-left: 1px solid #28494c60; padding-left: 12px}
body:not([data-route=home]) .nav {gap: 12px; color: var(--ink); font-size: 12px}
body:not([data-route=home]) .nav a {padding: 8px 11px; border: 1px solid #28494c60; background: #fffbee85; box-shadow: 2px 2px 0 #28494c25}
body:not([data-route=home]) .nav a:hover {background: #fffbee}
body:not([data-route=home]) .wrap {padding-top: 25px}
body:not([data-route=home]) .breadcrumbs {color: #45645a; font: 11px/1.6 'Courier New',monospace; margin-bottom: 20px}
body:not([data-route=home]) .breadcrumbs a {color: inherit}
body:not([data-route=home]) .intro {margin-bottom: 22px}
body:not([data-route=home]) h1 {font-size: clamp(2.2rem,4.5vw,3.6rem); text-shadow: 2px 2px 0 #bfd8bc; letter-spacing: -1.5px}
body:not([data-route=home]) .intro p {color: #45645a}
body:not([data-route=home]) .date-label {font: 700 11px/1.7 'Courier New',monospace; white-space: normal}
body:not([data-route=home]) .eyebrow,
body:not([data-route=home]) .tag {font-family: 'Courier New',monospace; font-weight: 700; color: #4f7060; letter-spacing: 1.6px}
body:not([data-route=home]) .blue {color: #b75540}
body:not([data-route=home]) .subnav {gap: 8px; margin-bottom: 27px}
body:not([data-route=home]) .subnav a {border: 1px solid #b9c9b1; border-radius: 0; background: #fffbee; color: #45645a; font-size: 12px; padding: 11px 14px}
body:not([data-route=home]) .subnav a[aria-current=page] {background: var(--mint); color: var(--ink); border-color: var(--edge); box-shadow: 3px 3px 0 var(--edge)}
body:not([data-route=home]) .subnav a:hover {background: #dce8cd}
body:not([data-route=home]) button,
body:not([data-route=home]) .button {border: 2px solid var(--edge); border-radius: 0; background: var(--coral); color: var(--ink); box-shadow: 3px 3px 0 var(--edge); font-weight: 700; min-height: 46px}
body:not([data-route=home]) button:hover:not(:disabled),
body:not([data-route=home]) .button:hover {background: #ffa188; filter: none}
body:not([data-route=home]) button:active:not(:disabled),
body:not([data-route=home]) .button:active {translate: 2px 2px; box-shadow: 1px 1px 0 var(--edge)}
body:not([data-route=home]) .secondary,
body:not([data-route=home]) .ghost {background: #fffbee; color: var(--ink); border: 1px solid var(--edge); box-shadow: 2px 2px 0 #b9cbb3}
body:not([data-route=home]) button.plain,
body:not([data-route=home]) button.wing-text-button {background: transparent; color: #355b4b; border: 0; box-shadow: none; text-decoration: underline; text-underline-offset: 4px; min-height: 40px}
body:not([data-route=home]) button.plain:hover,
body:not([data-route=home]) button.wing-text-button:hover {background: #dce8cd}
body:not([data-route=home]) .game-card {background: #fffbee; color: var(--ink); border: 2px solid var(--edge); border-radius: 0; box-shadow: 7px 7px 0 var(--edge); min-height: 420px; padding: 27px 30px}
body:not([data-route=home]) .game-top {color: #526e60; padding-bottom: 17px; border-bottom: 1px dashed #b9c9b1; font: 700 11px/1.6 'Courier New',monospace}
body:not([data-route=home]) .pill {border: 1px solid #789b84; border-radius: 0; color: var(--ink); background: #e2ecd4; font-size: 10px}
body:not([data-route=home]) .game-center {padding-top: 30px}
body:not([data-route=home]) .game-center h2 {font-size: clamp(1.8rem,3vw,2.65rem); line-height: 1.15; letter-spacing: -1.4px; max-width: 560px; margin: 22px auto 17px}
body:not([data-route=home]) .game-center p {color: #526e60; font-size: 14px; max-width: 420px}
body:not([data-route=home]) .tile {background: #bad9c4; color: var(--ink); border: 2px solid var(--edge); border-radius: 0; box-shadow: 3px 3px 0 var(--edge); font-family: 'Courier New',monospace}
body:not([data-route=home]) .tile:nth-child(2) {background: #f5df98}
body:not([data-route=home]) .tile:nth-child(3) {background: #f6b09a}
body:not([data-route=home]) #start-game {padding-inline: 28px}
body:not([data-route=home]) .relaxed-option,
body:not([data-route=home]) .game-foot {color: #526e60}
body:not([data-route=home]) .relaxed-option input {accent-color: #285849}
body:not([data-route=home]) .game-foot {border-top: 1px dashed #b9c9b1; padding-top: 17px; margin-top: 17px; align-items: center}
body:not([data-route=home]) .side-card,
body:not([data-route=home]) .link-card,
body:not([data-route=home]) .answer-card,
body:not([data-route=home]) .archive-card,
body:not([data-route=home]) .comparison article {border: 1px solid var(--edge); border-radius: 0; background: #fffbee; box-shadow: 4px 4px 0 #c3d2b7}
body:not([data-route=home]) .local-card {background: #e8edd9; margin-top: 21px}
body:not([data-route=home]) .rule b {color: #b75540; font-family: 'Courier New',monospace}
body:not([data-route=home]) .rule p {color: #405c50}
body:not([data-route=home]) .link-card:hover,
body:not([data-route=home]) .archive-card:hover {background: #eef2df; border-color: var(--edge)}
body:not([data-route=home]) .game-score {color: var(--ink)}
body:not([data-route=home]) .game-score span {color: #526e60}
body:not([data-route=home]) .progress-steps span {border-radius: 0; background: var(--score-empty); height: 6px}
body:not([data-route=home]) .progress-steps .filled {background: var(--step)}
body:not([data-route=home]) .question-bar .eyebrow {color: #45645a}
body:not([data-route=home]) .timer {border: 1px solid var(--edge); background: #e2ecd4; border-radius: 0; color: var(--ink)}
body:not([data-route=home]) .timer.urgent {background: #f8d8c4; color: #8c3527; border-color: #a64f3a}
body:not([data-route=home]) .answer-input {border: 2px solid var(--edge); background: #fffdf5; border-radius: 0; padding: 4px; gap: 8px}
body:not([data-route=home]) .answer-input input {background: #fffdf5; border-radius: 0; color: var(--ink)}
body:not([data-route=home]) .answer-input button {border-radius: 0; box-shadow: none}
body:not([data-route=home]) .answer-error {color: #8c3527}
body:not([data-route=home]) .round-actions,
body:not([data-route=home]) .round-hint {color: #405e4f}
body:not([data-route=home]) .round-hint {border-color: #b75540; background: #eff0db; padding: 12px 15px}
body:not([data-route=home]) .feedback-points,
body:not([data-route=home]) .final-score {color: #a74935}
body:not([data-route=home]) .feedback .tag {color: #45645a}
body:not([data-route=home]) .reveal-answers {border-color: var(--line)}
body:not([data-route=home]) .reveal-answers summary,
body:not([data-route=home]) .game-card .fine,
body:not([data-route=home]) .final-score span,
body:not([data-route=home]) .result .eyebrow,
body:not([data-route=home]) .game-card .hint-used {color: #526e60}
body:not([data-route=home]) .answer-chips li {border: 1px solid #bdceb5; background: #f1f3e5; border-radius: 0}
body:not([data-route=home]) .game-card .answer-chips strong,
body:not([data-route=home]) .game-card .text-link {color: #285849}
body:not([data-route=home]) .share-grid span {border: 1px solid #789b84; border-radius: 0}
body:not([data-route=home]) .share-fallback {background: #fffdf5; color: var(--ink); border-radius: 0}
body:not([data-route=home]) .notice {background: #edf0da; border-left: 4px solid #789b60; border-radius: 0; color: #405c42}
body:not([data-route=home]) .toolbar input {border: 1px solid var(--edge); border-radius: 0; background: #fffbee; color: var(--ink)}
body:not([data-route=home]) .prose p,
body:not([data-route=home]) .prose li,
body:not([data-route=home]) .answer-card>p {color: #456052}
body:not([data-route=home]) .date-links a {border: 1px solid #9db493; border-radius: 0; background: #fffbee; box-shadow: 2px 2px 0 #c3d2b7}
body:not([data-route=home]) .archive-dates li {background: #fffbee}
body:not([data-route=home]) .archive-dates li:nth-child(even) {background: #eef1de}
body:not([data-route=home]) .empty-state,
body:not([data-route=home]) .history-item {background: #fffbee; border-color: #adbea1; border-radius: 0}
body:not([data-route=home]) .game-card th,
body:not([data-route=home]) .game-card td {border-color: var(--line)}
body:not([data-route=home]) .challenge-strip {color: #365e48; border-color: #adbea1}
body:not([data-route=home]) .site-footer {color: #586e63; border-color: #cbd5bf}

/* The adventure keeps its original illustration inside the same site shell. */
body[data-route=fourth-wing-game] {--wing-paper: #fffbee; --wing-ink: #203e42; --wing-gold: #8c5435; --line: #cbd5bf}
body[data-route=fourth-wing-game] .wing-guide-link,
body[data-route=fourth-wing-game] .wing-attribution p,
body[data-route=fourth-wing-game] .wing-section-heading>span,
body[data-route=fourth-wing-game] .wing-how-grid p,
body[data-route=fourth-wing-game] .wing-reference>p,
body[data-route=fourth-wing-game] .wing-faq details p {color: #526e60}
body[data-route=fourth-wing-game] .wing-attribution a,
body[data-route=fourth-wing-game] .wing-faq a,
body[data-route=fourth-wing-game] .wing-reference-note a {color: #285849}
body[data-route=fourth-wing-game] .wing-badge {border-color: #789b84; color: #45645a; background: #e2ecd4}
body[data-route=fourth-wing-game] .wing-game {border: 2px solid var(--edge); border-radius: 0; box-shadow: 7px 7px 0 var(--edge)}
body[data-route=fourth-wing-game] .wing-play-top {background: #c4ddc5; border-color: var(--edge)}
body[data-route=fourth-wing-game] .wing-play-top span {color: var(--ink)}
body[data-route=fourth-wing-game] .wing-world h2,
body[data-route=fourth-wing-game] .wing-entry h2,
body[data-route=fourth-wing-game] .wing-section-heading h2,
body[data-route=fourth-wing-game] .wing-faq h2,
body[data-route=fourth-wing-game] .wing-story h2,
body[data-route=fourth-wing-game] .wing-result h2,
body[data-route=fourth-wing-game] .wing-resume h2 {font-family: 'Space Grotesk',sans-serif; font-weight: 700}
body[data-route=fourth-wing-game] .wing-world h2 {letter-spacing: -2px}
body[data-route=fourth-wing-game] .wing-intro h1 {font-size: clamp(23px,3vw,36px)}
body[data-route=fourth-wing-game] .wing-primary {background: var(--coral); color: var(--ink)}
body[data-route=fourth-wing-game] .wing-info,
body[data-route=fourth-wing-game] .wing-faq,
body[data-route=fourth-wing-game] .wing-page-links,
body[data-route=fourth-wing-game] .wing-spoilers {border-color: var(--line)}
body[data-route=fourth-wing-game] .wing-page-links,
body[data-route=fourth-wing-game] .wing-spoilers>summary {color: #405e4f}
body[data-route=fourth-wing-game] .wing-dragon-tile,
body[data-route=fourth-wing-game] .wing-reference-grid article {background: #fffbee; border: 1px solid var(--edge); border-radius: 0; box-shadow: 3px 3px 0 #c3d2b7; color: var(--ink)}
body[data-route=fourth-wing-game] .wing-dragon-tile.locked {color: #6a7d67; background: #edf0dc; box-shadow: none}
body[data-route=fourth-wing-game] .wing-dragon-tile p,
body[data-route=fourth-wing-game] .wing-reference-grid p {color: #526e60}
body[data-route=fourth-wing-game] .wing-reference-grid strong {color: var(--ink)}
body[data-route=fourth-wing-game] .wing-dragon-tile h3,
body[data-route=fourth-wing-game] .wing-reference-grid h3 {font-family: 'Space Grotesk',sans-serif; font-weight: 700}
body[data-route=fourth-wing-game] .wing-how-grid article>span,
body[data-route=fourth-wing-game] .wing-faq h2 em {color: #a74935}
body[data-route=fourth-wing-game] .wing-choice {background: #fffdf5; color: var(--ink); border: 1px solid #90ab82; box-shadow: 2px 2px 0 #c3d2b7; text-align: left}
body[data-route=fourth-wing-game] .wing-choice:hover:not(:disabled) {background: #e2ecd4}
body[data-route=fourth-wing-game] .wing-choice:disabled {background: #efecdf; color: #657060; border-style: dashed; box-shadow: none}
body[data-route=fourth-wing-game] .wing-choice-key {border-radius: 0}
body[data-route=fourth-wing-game] .wing-result-actions button:last-child {background: #fffbee; color: var(--ink)}
body[data-route=fourth-wing-game] .wing-storage {color: #8c5435}

@media(max-width:760px) {
  body:not([data-route=home]) .site-header {padding: 18px; gap: 14px}
  body:not([data-route=home]) .brand {gap: 8px}
  body:not([data-route=home]) .brand-name {font-size: 8px; letter-spacing: 1px; padding-left: 8px; max-width: 95px; line-height: 1.5}
  body:not([data-route=home]) .brand-mark {font-size: 20px}
  body:not([data-route=home]) .nav {gap: 7px; font-size: 10px}
  body:not([data-route=home]) .nav a {padding: 7px 9px}
  body:not([data-route=home]) .game-card {padding: 22px 18px; box-shadow: 5px 5px 0 var(--edge)}
  body:not([data-route=home]) .game-top {font-size: 10px; gap: 10px}
  body:not([data-route=home]) .game-top>span:last-child {font-size: 10px; text-align: right}
  body:not([data-route=home]) .game-center h2 {font-size: 29px; letter-spacing: -1px}
  body:not([data-route=home]) .subnav {gap: 7px}
  body:not([data-route=home]) .subnav a {font-size: 11px; padding: 10px 11px}
  body:not([data-route=home]) .answer-input {background: transparent; border: 0; padding: 0}
  body:not([data-route=home]) .answer-input input {border: 2px solid var(--edge)}
  body:not([data-route=home]) .answer-input button {box-shadow: 3px 3px 0 var(--edge)}
  body:not([data-route=home]) .intro .date-label {margin-top: 13px}
  body[data-route=fourth-wing-game] .wing-intro h1 {font-size: 23px}
  body[data-route=fourth-wing-game] .wing-game {box-shadow: 5px 5px 0 var(--edge)}
}
@media(max-width:360px) {
  body:not([data-route=home]) .brand-name {font-size: 7px; max-width: 77px}
  body:not([data-route=home]) .nav a {padding: 7px; font-size: 9px}
}