/* Matchday: an arena at night, a lit stat board and a paper score slip. */
:root {
  --arena: #10171b;
  --panel: #192226;
  --signal: #d7fb65;
  --paper: #f8f8f2;
  --ink: #142024;
  --green: #204a41;
  --orange: #b24c19;
  --line: #d5d9cf;
  --display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
}
body {
  min-height: 100vh;
  background: radial-gradient(ellipse at 85% 8%, #29343175, transparent 48%), var(--arena);
}
main {max-width: 1180px; padding: 0 clamp(18px,4vw,52px)}
.topbar {
  height: 66px; padding-inline: max(18px,calc((100vw - 1076px) / 2));
  background: var(--arena); border-bottom: 1px solid #354043;
}
.brand {font: italic 800 31px/1 var(--display); color: var(--paper)}
.brand-icon i {background: var(--signal)}
.topbar nav {align-items:center; gap:2px}
.nav-button {height:36px; padding:0 18px; border-radius:20px; color:#c7d0cf}
.nav-button.active {background:#344044; color:white}
.nav-button.active::after {display:none}
.topbar .icon-button {width:36px; height:36px}
.mast {padding:28px 0 25px; border:none; display:flex; align-items:end; justify-content:space-between}
.mast .edition-date {
  color:var(--signal); font:600 11px/1.3 ui-monospace,monospace; letter-spacing:1px;
  text-transform:uppercase; margin:0 0 8px; display:flex; align-items:center; gap:9px;
}
.edition-date::before {content:''; width:22px; height:3px; background:currentColor}
.mast h1 {font:italic 800 clamp(54px,6vw,81px)/.91 var(--display); letter-spacing:-.025em; color:#f9f8ef; text-transform:uppercase; margin:0}
.mast h1 span {color:var(--signal)}
.mast #mast-desc {margin:10px 0 0; color:#bdc6c5; font-size:14px}
.game-layout {grid-template-columns:minmax(0,1fr) minmax(246px,27%); gap:22px}
.round-tabs {background:transparent; border:0; border-radius:0; gap:6px; padding:0; margin-bottom:12px; overflow:visible}
.round-tab,.round-tab+.round-tab {
  background:var(--panel); border:1px solid #394547; border-radius:5px; color:#c8cdca;
  justify-content:center; gap:7px; padding:10px 2px; font-size:12px
}
.round-tab small {display:none}
.round-tab:disabled {color:#a9b5b4}
.round-tab.done {background:#284238; border-color:#536252; color:#e4eddf}
.round-tab.current {background:var(--signal); border-color:var(--signal); color:#1a2715}
.game-card {background:var(--paper); border-radius:10px; box-shadow:0 9px 22px #0003; color:var(--ink)}
.card-top {background:#1e292d; border:1px solid #485050; border-bottom:0; border-radius:10px 10px 0 0; padding:12px 24px; color:#f1f4ed}
.sport-badge {letter-spacing:1.2px}
.round-label {color:#d0d9d7}
.card-body {padding:22px 24px}
.target-board,.result-banner {
  position:relative; isolation:isolate; overflow:hidden; background:#101619;
  color:#f9f8ef; margin:0 -24px; min-height:206px; padding:24px 30px;
  border-bottom:4px solid var(--signal); display:flex; align-items:center; text-align:left;
}
.target-board::before {display:none}
.sport-photo {
  position:absolute; right:0; top:0; bottom:0; width:52%; z-index:-1;
  background:center / cover no-repeat;
  mask-image:linear-gradient(90deg,transparent,#000 27%);
}
[data-sport="Basketball"] .sport-photo {background-image:url(art/basketball-arcade.webp)}
[data-sport="Baseball"] .sport-photo {background-image:url(art/baseball-arcade.webp)}
[data-sport="Football"] .sport-photo {background-image:url(art/football-arcade.webp)}
[data-sport="Hockey"] .sport-photo {background-image:url(art/hockey-arcade.webp)}
[data-sport="Golf"] .sport-photo {background-image:url(art/golf-arcade.webp)}
[data-sport="Trophy"] .sport-photo {background-image:url(art/trophy-arcade.webp)}
.target-copy {max-width:62%}
.board-label {font:600 10px/1.4 ui-monospace,monospace; letter-spacing:1.2px; color:#c1ceca; text-transform:uppercase}
.target,.earned {font:700 clamp(74px,7.3vw,108px)/.96 var(--display); letter-spacing:-.025em; margin:6px 0;color:var(--signal)}
.stat-name {font:600 19px/1.15 'DM Sans',sans-serif; color:#fff}
.pool-note {font-size:12px; color:#56615d; margin:12px 0}
.pool-note button {text-decoration:underline;text-underline-offset:3px}
.guess-label {font:700 25px/1.2 var(--display); margin:17px 0 9px}
.search-box {border-color:#95a39c; border-radius:5px}
.search-box:focus-within {outline:2px solid #28745d; outline-offset:2px}
.search-box input {font-size:16px}
.primary,.small-primary,.primary:enabled {background:#214b3a; color:white; min-height:44px; font-weight:700; font-size:14px}
.primary:enabled:hover,.small-primary:hover {background:#143627}
.primary:disabled {color:#59655e; background:#dfe4da}
.under-input {color:#52605a}
.scorecard {
  background:#f2f2e8; color:var(--ink); box-shadow:none; border:0; border-radius:8px;
  padding:20px 21px 8px; position:relative;
}
.scorecard::after {
  content:''; position:absolute; height:7px; top:100%; left:4px; right:4px;
  background:linear-gradient(135deg,#f2f2e8 25%,transparent 25%),linear-gradient(225deg,#f2f2e8 25%,transparent 25%);
  background-size:12px 12px;
}
.aside-title span:first-child {color:var(--ink);text-transform:uppercase; font:700 24px/1 var(--display);letter-spacing:0}
.score-total {border:0; padding:0; margin:10px 0}
.score-total>span:first-child {font:700 73px/1 var(--display)}
.score-total small {font-weight:700}
.progress-track,.mini-meter {background:#d5dbcd; border-radius:3px; overflow:hidden}
.progress-track {height:6px}
.progress-track i {display:block;height:100%;background:#28553f; transition:width .35s}
#round-count {margin:7px 0 18px; font-size:11px; color:#56625e}
.score-row {padding:13px 0; border-color:#cdd4c9; color:#4a5955; font-size:13px}
.score-row.active {color:#173b2c}
.score-row.active .row-score {background:var(--signal); color:#1d3326}
.score-bottom {color:#56625d;border-color:#a6b1a3}
.rules-tile {display:flex; align-items:center; gap:10px; margin-top:22px; padding:14px 12px; background:transparent; border:1px solid #445052; border-radius:6px; width:100%; color:#e1e6de; font-size:12px}
.rules-tile span {border:1px solid #83908d; border-radius:50%; padding:1px 5px}
.rules-tile b {margin-left:auto}
.practice-controls {color:#e4e8e1}
.card-body:has(.result-banner) {padding-top:0}
.result-banner {min-height:145px; padding:20px 24px}
.earned {font-size:70px}
.earned small {font:600 19px var(--display); margin-left:7px; color:#cbd6cb}
.result-banner .result-heading {font:600 21px/1.2 var(--display);color:#f6f8ed;margin:4px 0 0}
.result-numbers {text-align:left}
.result-numbers strong {font-size:37px}
.result-numbers small,.result-numbers span,.closest small,.bar-labels {color:#54635c}
.result-numbers em {font-size:11px; color:#37553e; display:block; font-style:normal; margin-top:4px}
.closest {background:#e8eddf}
.closest b {font:700 20px var(--display)}
.summary-round {gap:12px}
.summary-icon {width:24px;display:flex}
.mini-meter {margin-left:auto; width:22%; height:5px; background:linear-gradient(90deg,#547055 var(--filled),#dfe4da var(--filled))}
.final-banner .earned {font-size:82px}
footer {margin-top:27px;border-top-color:#3b4545}
footer .text-button,.footer-brand {color:#aebcb7}
dialog p, dialog li {color:#485850;font-size:13px}
@media(min-width:850px){
  #guess-form {display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:stretch; gap:0 8px}
  .guess-label,.error-text {grid-column:1/-1}
  #lock-button {width:auto; margin:0; gap:17px}
}
@media(max-width:760px) {
  .game-layout {grid-template-columns:1fr}
  main {padding:0 16px}
  .mast {padding:20px 0}
  .mast h1 {font-size:52px}
  .mast #mast-desc {font-size:12px}
  #mobile-score {display:block;white-space:nowrap;border:1px solid #56645b;color:var(--signal);border-radius:5px;padding:6px;font:600 11px ui-monospace,monospace}
  .round-tabs {gap:4px}
  .round-tab,.round-tab+.round-tab {display:grid;justify-items:center;gap:4px;font-size:10px;padding:8px 0}
  .topbar {height:54px}.brand {font-size:25px}
  .nav-button {height:32px;padding:0 12px;font-size:12px}
  .card-body {padding:16px}.card-top {padding:11px 16px}
  .target-board,.result-banner {margin:0 -16px;padding:17px;min-height:163px}
  .target {font-size:clamp(62px,15vw,88px)}
  .board-label {font-size:9px}.stat-name {font-size:15px}
  .rules-tile {margin-top:16px}
  #round-count {margin-bottom:6px}
  .mast .edition-date {font-size:10px}
  .score-total>span:first-child {font-size:52px}
  .score-row.active .row-score {padding:1px 3px}
  footer button {width:auto}
}
@media(max-width:380px){.brand-icon {display:none}.topbar .icon-button{width:28px;height:28px}.mast {flex-wrap:wrap;gap:8px}.nav-button{padding:0 9px}}
@media(prefers-reduced-motion:no-preference){.target-copy,.result-banner>div:first-child{animation:arrive .24s ease-out}@keyframes arrive{from{transform:translateY(4px);opacity:.6}to{transform:translateY(0);opacity:1}}}
@media(max-width:760px) {
  .mast {position:relative;display:block}
  #mobile-score {position:absolute;right:0;top:14px}
  .mast .edition-date {margin-bottom:13px}
}
.summary-actions {display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.summary-actions button {margin:0;justify-content:center}
/* Pixel stadiums and atlas share one low-bandwidth visual palette. */
:root {--arena:#111426;--panel:#20243b;--signal:#e2fc83}
body {background:radial-gradient(ellipse at 65% 0%,#303450 0,transparent 65%),#121627}
.topbar {background:#101423;border-color:#363e5a}
.mast h1 {text-shadow:3px 3px #42465c}
.card-top {background:#24283e;border-color:#525674}
.target-board,.result-banner {background:#111426;border-bottom-color:#b6cf83}
.sport-photo {width:78%;background-position:center 50%;image-rendering:pixelated;mask-image:linear-gradient(90deg,transparent,#000 35%)}
.target-copy,.result-banner>div:first-child {z-index:1;position:relative;text-shadow:0 2px 1px #0d1022}
.target,.earned {text-shadow:2px 3px #323845,0 0 18px #111426}
.game-card {box-shadow:0 3px 0 #747c7d,0 8px 0 #0b0e1a}
.round-tab.current {box-shadow:inset 0 -3px #aec557}
.primary:enabled {box-shadow:inset 0 -3px #0004}
.primary:active:enabled {transform:translateY(1px)}
.loading-card {padding:4rem 1rem}
.scout-map {margin:15px 0 5px;padding:12px;background:#1b2339;color:#e8eadb;border:2px solid #35405a;box-shadow:inset 0 0 0 2px #141a2d;text-align:left;display:grid;gap:7px;font:12px/1.5 'DM Sans',sans-serif}
.scout-map strong {font:700 18px var(--display)}
.scout-map svg {display:block;width:100%;max-height:230px;background:#182f4b;border:1px solid #476577;image-rendering:pixelated}
.scout-map small,.scout-map details {color:#c4d6df;font-size:11px}
.scout-map summary {cursor:pointer;text-decoration:underline;text-underline-offset:3px}
@media(max-width:650px){
  .sport-photo {width:66%;background-position:63% center}
  .board-label {text-shadow:0 1px 3px #000}
}
.map-top {display:flex;align-items:center;justify-content:space-between;gap:12px}
.map-top button {background:#293953;color:#edf2f0;border:1px solid #64788c;font:600 11px 'DM Sans',sans-serif;padding:6px 8px}

/* Two parts of one clue: the target on the scoreboard, the places on the scouting screen. */
.card-body:has(.round-brief) {padding-top:0}
.round-brief {display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);background:#151a29;margin:0 -24px;border-bottom:4px solid #b6cf83}
.round-brief .target-board {margin:0;padding:18px 20px;min-height:200px;border:0;align-items:flex-end}
.round-brief .target-copy {max-width:100%}
.round-brief .target {font-size:clamp(59px,6.7vw,91px)}
.round-brief .sport-photo {width:100%;mask-image:linear-gradient(0deg,#0002,#000 92%);background-position:65% 32%}
.round-brief .scout-map {margin:0;border:0;border-left:2px solid #39425a;box-shadow:none;padding:13px 15px;align-content:center;min-width:0}
.scout-map .map-heading {display:grid;gap:3px}
.scout-map .map-kicker {display:block;color:#d4ec8f;font:700 9px/1.2 ui-monospace,monospace;letter-spacing:.13em}
.scout-map .map-kicker::before {content:'';display:inline-block;width:6px;height:6px;background:#e8ee96;margin-right:6px}
.map-top {min-width:0}
.map-top button,.map-retry {white-space:nowrap;cursor:pointer;color:#e5eedc;border:1px solid #7a8993;background:#28364c;padding:6px 8px;font:600 11px/1.25 system-ui,sans-serif}
.map-top button:hover,.map-retry:hover {background:#405773}
.round-brief .scout-map svg {height:116px}
#my-map {margin:12px 0;color:#2c4e42;font-size:13px}
#my-map>summary {cursor:pointer}
@media(max-width:850px) and (min-width:761px) {
  .round-brief {grid-template-columns:1fr 1fr}
  .round-brief .target {font-size:58px}
  .round-brief .target-board {padding-inline:12px}
}
@media(max-width:760px){.round-brief {margin:0 -16px}}
@media(max-width:540px){
  .round-brief {display:block}
  .round-brief .target-board {min-height:125px;padding:13px 16px;align-items:center}
  .round-brief .sport-photo {width:74%;mask-image:linear-gradient(90deg,transparent,#000 49%)}
  .round-brief .target {font-size:57px;margin:3px 0}
  .round-brief .scout-map {border:0;border-top:1px solid #536375;padding:9px 14px;gap:5px}
  .round-brief .map-heading {display:flex;align-items:center;gap:8px}
  .round-brief .map-kicker {font-size:8px}
  .round-brief .scout-map svg {height:107px}
}