:root { color-scheme: light; --ink: #172c29; --muted: #61736d; --paper: #f5f6f0; --line: #d7ded5; --accent: #ce5a35; --green: #245a4c; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 95% 10%, #e2ebe0, transparent 40%), var(--paper); color: var(--ink); font-family: 'Trebuchet MS', sans-serif; }
.shell { width: min(1100px, calc(100% - 48px)); margin: auto; }
.masthead { position: relative; height: 128px; padding-top: 20px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-between; }
.mark { font: bold 26px Georgia, serif; }.mark-dot { color: var(--accent); }
.edition, .eyebrow, footer { font-size: 11px; font-weight: bold; letter-spacing: .12em; color: var(--muted); }
.edition { padding-top: 10px; }
.animal-track { --animal-size: 64px; position: absolute; left: 0; right: 0; bottom: 0; height: var(--animal-size); pointer-events: none; }
.animal-walker { position: absolute; left: 0; bottom: 0; width: var(--animal-size); height: var(--animal-size); pointer-events: auto; animation: animal-travel var(--animal-pace) linear infinite; }
.animal-bob { display: block; animation: animal-step .45s steps(2, end) infinite; }
.animal-walker img { display: block; width: 100%; height: 100%; image-rendering: pixelated; animation: animal-face var(--animal-pace) steps(1, end) infinite; }
.animal-walker:hover, .animal-walker:hover .animal-bob, .animal-walker:hover img { animation-play-state: paused; }
@keyframes animal-travel { 0%, 100% { left: 0; } 50% { left: calc(100% - var(--animal-size)); } }
@keyframes animal-face { 0%, 49.99% { transform: scaleX(1); } 50%, 99.99% { transform: scaleX(-1); } }
@keyframes animal-step { 50% { transform: translateY(-2px); } }
.intro { padding: 52px 0 42px; max-width: 690px; }.eyebrow { color: var(--accent); margin: 0 0 18px; }
h1 { font: normal clamp(36px, 4.5vw, 62px)/1.08 Georgia, serif; margin: 0; letter-spacing: 0; } h1 em { color: var(--green); font-weight: normal; }
.description { max-width: 470px; color: var(--muted); line-height: 1.6; margin: 20px 0 0; }
.identifier-form { max-width: 470px; margin-top: 28px; }
.identifier-form label { display: block; margin-bottom: 8px; font-weight: bold; }
.identifier-entry { display: flex; flex-wrap: wrap; gap: 10px; }
.identifier-entry input { flex: 1 1 240px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 4px; font: inherit; }
.identifier-entry button { padding: 12px 24px; border: 0; border-radius: 4px; background: var(--green); color: white; font: bold 14px 'Trebuchet MS', sans-serif; cursor: pointer; }
.identifier-entry :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.identifier-error { min-height: 1.5em; color: #a12e20; }
.board-chooser { display: flex; align-items: start; gap: 24px; flex-wrap: wrap; margin-top: 26px; font-size: 14px; }
.main-board-link, .practice-picker summary, .main-picker summary { color: var(--green); font-weight: bold; cursor: pointer; }
.main-board-link { padding: 8px 0; text-underline-offset: 4px; }
.practice-picker summary, .main-picker summary { padding: 8px 0; }.practice-picker nav, .main-picker nav { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 12px 0; }
.practice-picker nav a, .main-picker nav a { color: var(--ink); text-underline-offset: 4px; }.board-chooser [aria-current="page"] { color: var(--accent); font-weight: bold; }
.board-chooser a:focus-visible, .practice-picker summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.workspace { border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 310px); gap: clamp(30px, 6vw, 90px); padding: 38px 0 70px; align-items: start; }
.board-wrap { min-width: 0; }.board { --columns: 4; position: relative; container-type: inline-size; display: grid; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); gap: clamp(5px, 1vw, 10px); width: min(100%, 495px); touch-action: none; user-select: none; }
.tile { aspect-ratio: 1; min-width: 0; padding: 0; display: grid; place-items: center; border-radius: 4px; }
.tile { border: 1px solid #cbd9cc; background: #fff; color: var(--ink); font: bold min(36px, calc(70cqw / var(--columns) - 5px)) Georgia, serif; cursor: pointer; box-shadow: 0 3px 0 #d7e1d5; transition: background .15s, color .15s, transform .15s; }
.tile:hover { transform: translateY(-2px); }.tile.selected { background: var(--path-color); border-color: var(--path-color); color: white; box-shadow: 0 3px 0 #17392f; }
.tile-removed { aspect-ratio: 1; min-width: 0; }
.tile span { position: relative; z-index: 2; }.path-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }.path-lines polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.game-dialog { position: fixed; width: min(440px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 32px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink); box-shadow: 0 18px 60px #172c2940; }
.game-dialog::backdrop { background: #172c2980; }
.game-dialog h2 { padding-right: 30px; }.game-dialog p { margin: 18px 0 0; line-height: 1.6; color: var(--muted); }
.dialog-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; padding: 0; border: 0; background: none; color: var(--ink); font: 28px/1 Georgia, serif; cursor: pointer; }
.dialog-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.difficulty-options { display: flex; gap: 12px; margin: 24px 0; }
.difficulty-options button { cursor: pointer; padding: 12px 20px; border: 0; border-radius: 4px; background: var(--green); color: white; font: bold 14px 'Trebuchet MS', sans-serif; }
#finished-time { font-weight: bold; color: var(--green); font-variant-numeric: tabular-nums; }
.completion-overlay { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none; overflow: hidden; }
.confetti { position: absolute; left: 50%; top: 50%; width: 7px; height: 11px; background: var(--accent); opacity: 0; animation: confetti-burst 8s ease-out both; }
.confetti:nth-child(3n) { background: #e8b950; }.confetti:nth-child(3n + 1) { background: var(--green); }
@keyframes confetti-burst { 0% { opacity: 1; transform: rotate(var(--angle)) translateY(0) rotate(0); } 12%, 85% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--angle)) translateY(calc(-1 * var(--distance))) rotate(540deg); } }
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } }
.tile:focus-visible, .actions button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--ink); padding-bottom: 14px; }
[hidden] { display: none !important; }
.view-tabs { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.view-tabs button { flex: 1; border: 0; border-bottom: 2px solid transparent; padding: 12px 4px; background: transparent; color: var(--muted); font: bold 13px 'Trebuchet MS', sans-serif; cursor: pointer; }
.view-tabs button[aria-selected="true"] { color: var(--green); border-bottom-color: var(--green); }
.view-tabs button:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.leaders { margin: 8px 0 24px; padding: 0; list-style: none; counter-reset: rank; }
.leaders li { counter-increment: rank; display: flex; gap: 8px; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 15px 0; font-size: 14px; }
.leaders li::before { content: counter(rank, decimal-leading-zero); color: var(--accent); font-size: 11px; font-weight: bold; }
.leaders li span { flex: 1; min-width: 0; overflow-wrap: anywhere; }.leaders time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.leaders li .second-difficulty { color: #bd3333; font-weight: bold; text-decoration: underline dotted; cursor: help; }
.leaders li .used-hints { color: #c45a1b; font-weight: bold; cursor: help; }
h2 { font: normal 23px Georgia, serif; margin: 0; } #counter { font-size: 13px; color: var(--muted); }
.lengths { list-style: none; margin: 8px 0 24px; padding: 0; }.lengths li { display: flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); padding: 15px 0; font-size: 14px; }
.word-index { color: var(--accent); font-size: 11px; font-weight: bold; }.word-slots { display: inline-flex; gap: 3px; padding-bottom: 4px; border-bottom: 3px solid transparent; }.word-slot { display: grid; place-items: center; width: clamp(20px, 2vw, 26px); height: 30px; border: 1px solid var(--line); background: white; font: bold 16px Georgia, serif; }.found .word-slots { border-bottom-color: var(--path-color); }
.word-value { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.pixel-star { flex: none; width: 20px; height: 20px; background: url('/static/pixel-star.svg') center / contain no-repeat; image-rendering: pixelated; animation: star-turn 12s linear infinite; cursor: help; }
@keyframes star-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pixel-star { animation: none; } }
.actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.actions button, .reset { cursor: pointer; font: bold 13px 'Trebuchet MS', sans-serif; }.actions button { min-width: 0; min-height: 44px; padding: 10px 8px; border-radius: 4px; }.clear { border: 0; background: none; color: var(--ink); padding: 12px 0; text-decoration: underline; text-underline-offset: 4px; }.actions .clear { border: 1px solid var(--line); background: white; text-decoration: none; }.reset { color: var(--accent); }.actions button:disabled, .reset:disabled { opacity: .45; cursor: default; }
.actions .check { grid-column: 1 / -1; border: 1px solid var(--green); background: var(--green); color: white; }
.actions .check.correct { animation: check-correct .65s ease-out; }
.actions .check.incorrect { animation: check-incorrect .65s ease-out; }
.actions .check.correct:disabled { opacity: 1; }
@keyframes check-correct { 40% { background: #389c55; border-color: #389c55; box-shadow: 0 0 0 5px #389c5540; } }
@keyframes check-incorrect { 30%, 75% { background: #b93434; border-color: #b93434; box-shadow: 0 0 0 5px #b9343440; } 50% { background: var(--green); border-color: var(--green); box-shadow: none; } }
@media (prefers-reduced-motion: reduce) {
	.actions .check.correct { animation-name: check-still-correct; }
	.actions .check.incorrect { animation-name: check-still-incorrect; }
	@keyframes check-still-correct { 0%, 99% { background: #389c55; border-color: #389c55; } }
	@keyframes check-still-incorrect { 0%, 99% { background: #b93434; border-color: #b93434; } }
}
.hint { position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--green); background: white; color: var(--green); }
.hint.cooling::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(110deg, #d6e7d4, #f0cb9a, #d6e7d4); background-size: 200% 100%; transform-origin: left; animation: hint-drain 15s linear var(--cooldown-elapsed) both, hint-shift 2s linear infinite; }
@keyframes hint-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes hint-shift { to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) { .hint.cooling::before { animation: hint-drain 15s linear var(--cooldown-elapsed) both; } }
.status { color: var(--muted); font-size: 13px; min-height: 32px; line-height: 1.5; margin: 12px 0 20px; }
footer { position: relative; border-top: 1px solid var(--line); padding: 20px 0 38px; } footer > span:not(.animal-track) { margin: 0 12px; color: var(--accent); }
footer #auto-solve { float: right; border: 0; background: none; color: var(--green); font: inherit; letter-spacing: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
footer #auto-solve:disabled { opacity: .45; cursor: default; }
footer #auto-solve:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
footer .animal-track { top: calc(-1 * var(--animal-size)); bottom: auto; }
.intro + footer { margin-top: 36px; }
@media (prefers-reduced-motion: reduce) { .animal-walker, .animal-bob, .animal-walker img { animation: none; } }
@media (max-width: 700px) { .shell { width: min(100% - 32px, 500px); }.masthead { height: 100px; padding-top: 15px; }.edition { display: none; }.animal-track { --animal-size: 48px; }.intro { padding: 35px 0 30px; }.intro + footer { margin-top: 28px; }.workspace { grid-template-columns: 1fr; gap: 38px; padding: 25px 0 56px; }.board { margin: auto; } }