:root {
  color-scheme: dark;
  --black: #101114;
  --black-soft: #1b1d24;
  --black-deep: #090a0d;
  --gold: #f6c945;
  --gold-soft: #ffe98a;
  --green: #4abf78;
  --green-dark: #1d6544;
  --field: #59b978;
  --cream: #fff8df;
  --ink: #171a1f;
  --white: #f8faf5;
  --red: #ef685d;
  --shadow: 0 18px 45px rgba(0,0,0,.3);
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: var(--black-deep); }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--cream);
  background: radial-gradient(circle at 12% 2%, rgba(246,201,69,.18), transparent 24rem), linear-gradient(145deg, #222630, #0d1016 70%, #162d27);
  overflow-x: hidden;
}
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 4px solid var(--gold); outline-offset: 4px; }
a { color: inherit; }

.stadium-texture { position: fixed; inset: 0; pointer-events: none; opacity: .22; background-image: linear-gradient(90deg, transparent 49%, rgba(255,255,255,.05) 50%, transparent 51%), radial-gradient(circle, rgba(255,255,255,.2) 0 1px, transparent 1.6px); background-size: 48px 48px, 24px 24px; mask-image: linear-gradient(to bottom, black, transparent 90%); }
.football-shell { position: relative; width: min(1280px, 100%); min-height: 100vh; margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); display: flex; flex-direction: column; }
.portal-bar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.15); }
.portal-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--cream); font-family: Impact, "Arial Black", sans-serif; font-size: clamp(.9rem, 2vw, 1.08rem); letter-spacing: .06em; text-decoration: none; }
.portal-brand strong { color: var(--gold); font-weight: inherit; }
.mini-ball { width: 29px; height: 29px; flex: 0 0 29px; display: block; border: 2px solid #050506; border-radius: 50%; background: #9f5e2c; box-shadow: inset 7px -4px 0 rgba(255,255,255,.12); transform: rotate(-15deg); }
.portal-actions { display: flex; align-items: center; gap: 8px; }
.league-chip, .help-button, .sound-button { min-height: 40px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(255,255,255,.07); }
.league-chip { color: var(--gold); font-size: .68rem; font-weight: 900; letter-spacing: .12em; }
.help-button, .sound-button { color: var(--cream); transition: background .2s ease, transform .2s ease; }
.help-button:hover, .sound-button:hover { background: rgba(255,255,255,.15); transform: translateY(-1px); }
.sound-button { display: inline-flex; align-items: center; gap: 6px; }
.football-main { flex: 1; display: grid; align-items: center; padding: clamp(18px, 4vw, 46px) 0; }
.screen { width: 100%; }
.start-screen, .results-screen { min-height: 680px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); overflow: hidden; border: 1px solid rgba(255,255,255,.17); border-radius: 28px; background: rgba(13,16,22,.9); box-shadow: var(--shadow); }
.start-copy, .results-panel { padding: clamp(28px, 5vw, 64px); display: flex; flex-direction: column; justify-content: center; }
.start-copy { background: radial-gradient(circle at 12% 8%, rgba(246,201,69,.18), transparent 16rem), linear-gradient(160deg, rgba(28,30,38,.98), rgba(13,16,22,.96)); }
.back-link { width: max-content; margin-bottom: 25px; color: #f1dc85; font-size: .85rem; font-weight: 900; text-decoration: none; }
.back-link:hover { color: var(--gold); }
.eyebrow, .prompt-kicker { margin: 0; color: var(--gold); font-size: .72rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin: 10px 0 0; color: var(--cream); font-family: Impact, "Arial Black", sans-serif; font-size: clamp(3.7rem, 7vw, 6.4rem); line-height: .84; letter-spacing: .035em; }
h1 span { color: var(--gold); }
.tagline { max-width: 26rem; margin: 25px 0 8px; color: var(--gold-soft); font-size: clamp(1.1rem, 2.3vw, 1.45rem); font-weight: 900; }
.intro-copy { max-width: 30rem; margin-bottom: 22px; color: #d8dfd4; line-height: 1.5; }
.field-fact { width: min(100%, 390px); margin-bottom: 16px; padding: 13px 15px; display: flex; flex-direction: column; gap: 4px; border: 1px solid rgba(246,201,69,.35); border-left: 5px solid var(--gold); border-radius: 12px; background: rgba(246,201,69,.08); }
.field-fact span { color: var(--gold); font-size: .64rem; font-weight: 900; letter-spacing: .12em; }
.field-fact strong { color: var(--cream); font-size: 1.02rem; }
.field-fact small { color: rgba(255,248,223,.68); font-size: .77rem; }
.name-entry { margin: 13px 0 15px; padding: 13px 15px 14px; display: grid; gap: 7px; border: 1px solid rgba(255,255,255,.16); border-radius: 13px; background: rgba(255,255,255,.06); }
.name-entry label { color: var(--gold); font-size: .74rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.name-entry input { width: 100%; min-height: 46px; padding: 9px 12px; color: var(--cream); border: 2px solid rgba(255,255,255,.22); border-radius: 9px; outline: 0; background: rgba(7,9,12,.65); font-weight: 800; }
.name-entry input::placeholder { color: rgba(255,248,223,.5); }
.name-entry input:focus { border-color: var(--gold); }
.name-entry span { color: rgba(255,248,223,.62); font-size: .74rem; font-weight: 700; }
.level-picker { display: grid; gap: 8px; margin: 2px 0 15px; }
.level-button { min-height: 62px; padding: 8px 11px; display: grid; grid-template-columns: 39px 1fr; gap: 10px; align-items: center; color: var(--cream); border: 2px solid rgba(255,255,255,.18); border-radius: 11px; background: rgba(255,255,255,.05); text-align: left; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.level-button:hover, .level-button.is-selected { border-color: var(--gold); background: rgba(246,201,69,.13); transform: translateX(2px); }
.level-number { color: var(--gold); font-family: Impact, "Arial Black", sans-serif; font-size: 1.4rem; }
.level-button strong, .level-button small { display: block; }
.level-button strong { font-size: .92rem; }
.level-button small { margin-top: 3px; color: rgba(255,248,223,.65); font-size: .72rem; font-weight: 700; }
.start-leaderboard-panel, .leaderboard-panel { margin: 6px 0 17px; padding: 13px 14px; border: 1px solid rgba(255,255,255,.15); border-radius: 14px; background: rgba(0,0,0,.18); }
.leaderboard-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.shelf-kicker { display: block; color: var(--gold); font-size: .62rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.leaderboard-heading h2, .leaderboard-heading h3 { margin: 2px 0 0; color: var(--cream); font-family: Impact, "Arial Black", sans-serif; font-size: clamp(1.3rem, 3vw, 1.8rem); }
.leaderboard-note { color: #c8d5c4; font-size: .67rem; font-weight: 800; text-align: right; }
.leaderboard-list { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.leaderboard-row { min-height: 39px; padding: 5px 8px; display: grid; grid-template-columns: 31px minmax(0,1fr) auto; align-items: center; gap: 7px; border-left: 3px solid rgba(255,255,255,.23); border-radius: 7px; background: rgba(255,255,255,.07); }
.leaderboard-row.is-current { border-left-color: var(--gold); background: rgba(246,201,69,.13); }
.leader-rank { color: rgba(255,248,223,.62); font-weight: 900; }
.leader-copy { min-width: 0; display: grid; }
.leader-name { overflow: hidden; color: var(--cream); font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.leader-meta { color: rgba(255,248,223,.57); font-size: .62rem; font-weight: 700; }
.leader-score { color: var(--gold); font-size: .95rem; }
.leaderboard-empty { padding: 8px; color: rgba(255,248,223,.6); font-size: .74rem; text-align: center; }
.start-button, .secondary-button, .submit-button, .next-button { min-height: 50px; border-radius: 12px; font-weight: 900; letter-spacing: .035em; }
.start-button { width: 100%; padding: 12px 15px; display: flex; align-items: center; justify-content: space-between; color: var(--black); border: 2px solid #090a0d; background: var(--gold); box-shadow: 5px 5px 0 var(--red); text-transform: uppercase; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.start-button:disabled { cursor: not-allowed; filter: grayscale(.35); opacity: .68; }
.start-button:not(:disabled):hover { filter: brightness(1.06); transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--red); }
.start-button > span:last-child { font-size: 1.4rem; }
.microcopy { margin: 13px 0 0; color: rgba(255,248,223,.54); font-size: .68rem; font-weight: 700; text-align: center; }

.start-art, .results-art { position: relative; min-height: 680px; overflow: hidden; background: linear-gradient(180deg, #8796a6 0 20%, #47627a 20% 28%, #236744 28% 100%); }
.start-art::after, .results-art::after { content: ""; position: absolute; inset: 28% 0 0; opacity: .48; background: repeating-linear-gradient(90deg, transparent 0 9.5%, rgba(255,255,255,.76) 9.5% 9.8%, transparent 9.8% 19.5%); }
.stadium-sun { position: absolute; top: 8%; left: 58%; width: 105px; height: 105px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 35px rgba(246,201,69,.45); }
.stadium-stand { position: absolute; left: -5%; width: 110%; height: 16%; border-radius: 50%; background: #252b36; opacity: .75; }
.stand-back { top: 16%; transform: rotate(-3deg); }
.stand-front { top: 24%; transform: rotate(2deg); background: #151921; }
.art-goal { position: absolute; z-index: 3; top: 10%; width: 15%; height: 31%; border: 7px solid var(--gold); border-bottom: 0; border-radius: 8px 8px 0 0; opacity: .85; }
.goal-left { left: 8%; }
.goal-right { right: 8%; }
.art-yard { position: absolute; z-index: 4; bottom: 15%; color: rgba(255,255,255,.7); font-family: Impact, "Arial Black", sans-serif; font-size: clamp(3rem, 7vw, 5.7rem); transform: rotate(-5deg); }
.yard-one { left: 12%; }.yard-two { left: 45%; color: rgba(246,201,69,.7); }.yard-three { right: 8%; }
.art-football { position: absolute; z-index: 6; right: 18%; bottom: 13%; font-size: clamp(5rem, 13vw, 10rem); transform: rotate(-18deg); filter: drop-shadow(7px 9px 0 rgba(0,0,0,.28)); }
.art-quarterback { position: absolute; z-index: 7; left: 26%; bottom: 14%; font-size: clamp(6rem, 14vw, 10rem); filter: drop-shadow(5px 7px 0 rgba(0,0,0,.28)); }
.art-callout { position: absolute; z-index: 8; left: 25%; top: 42%; color: var(--gold); font-family: "Comic Sans MS", cursive; font-size: clamp(1.8rem, 4vw, 3.4rem); transform: rotate(-7deg); text-shadow: 3px 3px 0 var(--black); }

.play-screen { border: 1px solid rgba(255,255,255,.16); border-radius: 20px; overflow: hidden; background: var(--black-soft); box-shadow: var(--shadow); }
.game-hud { display: grid; grid-template-columns: repeat(4, 1fr); background: #16181f; }
.hud-stat { min-height: 76px; padding: 11px 14px; display: flex; flex-direction: column; justify-content: center; gap: 3px; border-right: 1px solid rgba(255,255,255,.13); text-align: center; }
.hud-stat:last-child { border-right: 0; }
.hud-stat span { color: rgba(255,248,223,.58); font-size: .66rem; font-weight: 900; letter-spacing: .13em; }
.hud-stat strong { color: var(--cream); font-size: clamp(1.3rem, 4vw, 2rem); line-height: 1; }
.hud-clock-stat strong { color: var(--gold-soft); font-size: clamp(1.05rem, 3vw, 1.65rem); }
.hud-clock-stat.is-warning strong { color: var(--gold); }.hud-clock-stat.is-danger strong { color: var(--red); }
.hud-score-stat strong { color: var(--gold); }.hud-yard-stat strong { color: var(--green); }
.prompt-area { position: relative; z-index: 5; padding: 16px 18px 15px; color: var(--ink); text-align: center; background: radial-gradient(circle at 15% 30%, rgba(246,201,69,.14) 0 3px, transparent 4px), radial-gradient(circle at 85% 70%, rgba(74,191,120,.15) 0 3px, transparent 4px), var(--cream); background-size: 24px 24px, 28px 28px, auto; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.play-question { max-width: 920px; margin: 8px auto 4px; color: var(--black); font-size: clamp(1.18rem, 3vw, 1.85rem); line-height: 1.18; }
.play-direction { margin: 0; color: #4c5f58; font-size: .95rem; font-weight: 800; }
.number-line-equation { margin: 8px 0 0; color: #a35a22; font-family: Impact, "Arial Black", sans-serif; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: .04em; }
.round-remaining { margin: 4px 0 0; color: #6f817a; font-size: .7rem; font-weight: 900; letter-spacing: .05em; }

.field-board { position: relative; min-height: 820px; overflow: hidden; background: linear-gradient(180deg, #73c994 0 37%, #4db976 37% 100%); }
.field-board::before { content: ""; position: absolute; inset: 37% 0 auto; height: 3px; background: rgba(255,255,255,.55); box-shadow: 0 20px 0 rgba(255,255,255,.18), 0 40px 0 rgba(255,255,255,.18); }
.perspective-field { position: relative; z-index: 2; height: 235px; overflow: hidden; border-bottom: 3px solid rgba(255,255,255,.7); background: linear-gradient(180deg, #7d9bb1 0 30%, #45687b 30% 39%, #25764b 39% 100%); box-shadow: inset 0 -18px 0 rgba(16,17,20,.12); }
.perspective-field::before { content: ""; position: absolute; inset: 39% -20% -38%; background: repeating-linear-gradient(90deg, transparent 0 9.5%, rgba(255,255,255,.75) 9.5% 9.9%, transparent 9.9% 19.5%); transform: perspective(340px) rotateX(58deg); transform-origin: top center; opacity: .75; }
.perspective-field::after { content: ""; position: absolute; left: 50%; top: 39%; width: 2px; height: 70%; background: rgba(255,255,255,.7); transform: translateX(-50%); opacity: .65; }
.perspective-horizon { position: absolute; z-index: 1; left: -5%; right: -5%; top: 23%; height: 34px; border-radius: 50%; background: rgba(16,17,20,.34); transform: rotate(-2deg); }
.perspective-goalposts { position: absolute; z-index: 4; top: 10px; left: 50%; width: 118px; height: 80px; border: 5px solid var(--gold); border-bottom: 0; border-radius: 8px 8px 0 0; transform: translateX(-50%); filter: drop-shadow(3px 3px 0 rgba(16,17,20,.25)); }
.perspective-goalposts::before, .perspective-goalposts::after { content: ""; position: absolute; top: 0; width: 5px; height: 80px; background: var(--gold); }
.perspective-goalposts::before { left: 23px; transform: rotate(-11deg); transform-origin: top; }.perspective-goalposts::after { right: 23px; transform: rotate(11deg); transform-origin: top; }
.perspective-goalposts span { position: absolute; left: 50%; top: 0; width: 5px; height: 27px; background: var(--gold); transform: translateX(-50%); }
.perspective-goalposts b { position: absolute; top: 30px; left: 50%; color: var(--gold-soft); font-family: Impact, "Arial Black", sans-serif; font-size: 1.1rem; letter-spacing: .08em; transform: translateX(-50%); text-shadow: 2px 2px 0 var(--black); }
.perspective-endzone-label { position: absolute; z-index: 5; top: 12px; right: 17px; padding: 5px 8px; color: var(--black); border: 2px solid var(--black); border-radius: 6px; background: var(--gold); font-size: .62rem; font-weight: 900; letter-spacing: .08em; transform: rotate(3deg); }
.perspective-yard-lines { position: absolute; z-index: 2; left: 10%; right: 10%; top: 44%; height: 53%; transform: perspective(330px) rotateX(57deg); transform-origin: top center; }
.perspective-yard-lines i { position: absolute; top: 0; bottom: 0; width: 3px; background: rgba(255,255,255,.55); }.perspective-yard-lines i:nth-child(1) { left: 12%; }.perspective-yard-lines i:nth-child(2) { left: 31%; }.perspective-yard-lines i:nth-child(3) { left: 50%; }.perspective-yard-lines i:nth-child(4) { left: 69%; }.perspective-yard-lines i:nth-child(5) { left: 88%; }
.perspective-team { position: absolute; z-index: 6; left: 50%; bottom: 18px; width: 270px; height: 126px; --team-y: 0px; --team-scale: 1; transform: translate(-50%, var(--team-y)) scale(var(--team-scale)); transform-origin: 50% 100%; transition: transform 1.15s cubic-bezier(.2,.8,.2,1); }
.perspective-team.is-running .field-athlete { animation: fieldRun .5s ease-in-out infinite alternate; }.perspective-team.is-running .field-athlete:nth-child(2) { animation-delay: .08s; }.perspective-team.is-running .field-athlete:nth-child(3) { animation-delay: .16s; }.perspective-team.is-running .field-athlete:nth-child(4) { animation-delay: .24s; }
.field-athlete { position: absolute; width: 28px; height: 58px; filter: drop-shadow(2px 3px 0 rgba(16,17,20,.28)); }.field-athlete::before { content: ""; position: absolute; z-index: 2; top: 0; left: 50%; width: 15px; height: 15px; border-radius: 50%; background: #e0a775; transform: translateX(-50%); }.field-athlete::after { content: ""; position: absolute; top: 13px; left: 50%; width: 23px; height: 27px; border: 2px solid var(--black); border-radius: 7px 7px 4px 4px; background: var(--jersey, #16181f); box-shadow: -6px 28px 0 -7px var(--black), 6px 28px 0 -7px var(--black); transform: translateX(-50%); }.field-athlete span { position: absolute; z-index: 3; top: 21px; left: 50%; color: var(--gold); font-size: .43rem; font-weight: 900; transform: translateX(-50%); }
.field-qb { left: 50%; bottom: 0; --jersey: var(--gold); transform: translateX(-50%) scale(1.18); }.field-qb span { color: var(--black); }.field-guard { bottom: 3px; --jersey: #1b1d24; }.field-guard-one { left: 37%; transform: scale(.94); }.field-guard-two { left: 60%; transform: scale(.94); }.field-receiver { top: 16px; --jersey: var(--gold); transform: scale(.72); }.field-receiver-one { left: 9%; }.field-ball { position: absolute; left: 50%; bottom: 57px; font-size: 1.25rem; transform: translateX(-50%) rotate(-20deg); filter: drop-shadow(2px 2px 0 rgba(16,17,20,.3)); }
.perspective-caption { position: absolute; z-index: 7; left: 50%; bottom: 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--cream); font-size: .6rem; font-weight: 900; letter-spacing: .12em; transform: translateX(-50%); text-align: center; text-shadow: 2px 2px 0 rgba(16,17,20,.7); white-space: nowrap; }.perspective-caption span { color: rgba(255,248,223,.78); font-size: .55rem; font-weight: 700; letter-spacing: .02em; }
.team-progress { position: relative; z-index: 2; width: min(92%, 920px); min-height: 35px; margin: 9px auto 0; padding: 7px 13px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--black); border: 2px solid rgba(16,17,20,.38); border-radius: 999px; background: rgba(255,248,223,.75); box-shadow: 3px 4px 0 rgba(16,17,20,.14); font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; transition: background .2s ease, transform .2s ease; }
.team-progress-ball { font-size: 1.15rem; line-height: 1; }
.team-progress strong { color: var(--green-dark); }
.team-progress > span:last-child { color: #53655e; font-size: .65rem; letter-spacing: .03em; text-transform: none; }
.team-progress.is-advancing { background: rgba(246,201,69,.92); animation: teamBanner .85s ease both; }
.number-line { position: relative; z-index: 3; width: min(94%, 1100px); height: 205px; margin: 31px auto 0; border: 3px solid rgba(16,17,20,.58); border-radius: 22px; background: rgba(255,248,223,.82); box-shadow: 6px 7px 0 rgba(16,17,20,.23); }
.number-line::before { content: "1,000-YARD NUMBER LINE"; position: absolute; top: 12px; left: 50%; color: var(--black); font-size: .72rem; font-weight: 900; letter-spacing: .15em; transform: translateX(-50%); }
.number-line::after { content: "LONGEST FIELD"; position: absolute; right: 18px; bottom: 13px; color: rgba(16,17,20,.48); font-family: Impact, "Arial Black", sans-serif; font-size: 1rem; transform: rotate(-4deg); }
.field-endzone { position: absolute; left: 96%; top: 52px; bottom: 38px; width: 8%; border-left: 4px solid var(--gold); background: repeating-linear-gradient(45deg, rgba(246,201,69,.26) 0 8px, transparent 8px 16px); transform: translateX(-50%); transition: left .65s cubic-bezier(.2,.8,.2,1); }
.field-endzone.is-final-endzone { transform: translateX(-100%); }
.field-endzone::after { content: "END ZONE"; position: absolute; top: 5px; left: 50%; color: rgba(16,17,20,.52); font-size: .52rem; font-weight: 900; letter-spacing: .08em; transform: translateX(-50%) rotate(-90deg); transform-origin: center; white-space: nowrap; }
.line-arrow { position: absolute; z-index: 2; top: 101px; height: 9px; border-radius: 99px; background: var(--gold); box-shadow: 0 3px 0 rgba(16,17,20,.22); transform-origin: left center; }
.line-arrow::after { content: ""; position: absolute; right: -3px; top: 50%; width: 20px; height: 20px; border-top: 8px solid var(--gold); border-right: 8px solid var(--gold); transform: translateY(-50%) rotate(45deg); }
.line-arrow.is-backward { transform-origin: right center; }.line-arrow.is-backward::after { right: auto; left: -3px; transform: translateY(-50%) rotate(-135deg); }
.line-marker { position: absolute; z-index: 4; top: 75px; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); transition: left .35s ease; }
.line-marker::after { content: ""; width: 4px; height: 64px; margin-top: 2px; background: var(--black); }
.line-marker b { padding: 4px 7px; color: var(--cream); border: 2px solid var(--black); border-radius: 6px; background: var(--black); font-size: .7rem; white-space: nowrap; }
.line-marker span { margin-top: 5px; color: var(--black); font-family: Impact, "Arial Black", sans-serif; font-size: 1.15rem; }
.target-marker b { color: var(--black); background: var(--gold); }
.team-runner { position: absolute; z-index: 5; top: 31px; left: 5%; display: flex; align-items: end; gap: 1px; font-size: 1.55rem; line-height: 1; filter: drop-shadow(2px 3px 0 rgba(16,17,20,.28)); transform: translateX(-50%); transition: left 1s cubic-bezier(.2,.8,.2,1); }
.team-runner span { display: block; transform-origin: 50% 100%; }
.team-runner span:nth-child(2) { font-size: 1.35rem; opacity: .92; transform: translateY(3px); }
.team-runner span:nth-child(3) { font-size: 1.18rem; opacity: .78; transform: translateY(6px); }
.team-runner.is-running span { animation: teamRun .58s ease-in-out infinite alternate; }
.team-runner.is-running span:nth-child(2) { animation-delay: .1s; }
.team-runner.is-running span:nth-child(3) { animation-delay: .2s; }
.yard-label { position: absolute; top: 152px; color: #57665f; font-size: .66rem; font-weight: 900; transform: translateX(-50%); }
.yard-0 { left: 3%; }.yard-100 { left: 12.4%; }.yard-200 { left: 22%; }.yard-300 { left: 31.5%; }.yard-400 { left: 41%; }.yard-500 { left: 50%; }.yard-600 { left: 59.5%; }.yard-700 { left: 69%; }.yard-800 { left: 78%; }.yard-900 { left: 87.5%; }.yard-1000 { left: 97%; }
.answer-zone { position: relative; z-index: 4; width: min(94%, 980px); margin: 18px auto 0; padding: 16px 19px 13px; border: 2px solid rgba(16,17,20,.5); border-radius: 16px; background: rgba(255,248,223,.93); box-shadow: 5px 6px 0 rgba(16,17,20,.2); color: var(--black); }
.answer-heading { display: flex; justify-content: space-between; gap: 12px; color: #53655e; font-size: .72rem; font-weight: 900; letter-spacing: .12em; }
.answer-heading strong { color: #a35a22; font-size: .98rem; letter-spacing: 0; }
.answer-ruler { position: relative; height: 76px; margin: 2px 16px 0; touch-action: none; cursor: grab; }
.answer-ruler:active { cursor: grabbing; }
.ruler-track { position: absolute; left: 0; right: 0; top: 35px; height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--green) 0 50%, var(--gold) 50% 100%); box-shadow: inset 0 2px 0 rgba(16,17,20,.28); }
.drag-token { position: absolute; top: 13px; left: 0; width: 42px; height: 42px; display: grid; place-items: center; border: 3px solid var(--black); border-radius: 50%; background: var(--gold); box-shadow: 3px 4px 0 rgba(16,17,20,.3); font-size: 1.35rem; transform: translateX(-50%); transition: left .12s ease; user-select: none; }
.ruler-tick { position: absolute; top: 51px; color: #5e6c65; font-size: .62rem; font-weight: 900; transform: translateX(-50%); }
.tick-0 { left: 0; }.tick-250 { left: 25%; }.tick-500 { left: 50%; }.tick-750 { left: 75%; }.tick-1000 { left: 100%; }
.typed-answer-row { display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap; }
.typed-answer-row label { color: #53655e; font-size: .78rem; font-weight: 900; }
.typed-answer-row input { width: 105px; min-height: 44px; padding: 7px 9px; color: var(--black); border: 2px solid var(--black); border-radius: 8px; background: #fff; font-size: 1.25rem; font-weight: 900; text-align: center; }
.submit-button { min-height: 44px; padding: 8px 14px; color: var(--black); border: 2px solid var(--black); background: var(--gold); }
.submit-button:hover { filter: brightness(1.06); }
.answer-help { margin: 7px 0 0; color: #66766f; font-size: .7rem; font-weight: 700; text-align: center; }
.feedback { position: absolute; z-index: 8; left: 50%; bottom: 17px; width: min(560px, calc(100% - 30px)); padding: 12px 15px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px 10px; color: var(--black); border: 2px solid var(--black); border-radius: 14px; background: rgba(255,248,223,.97); box-shadow: 5px 6px 0 rgba(16,17,20,.3); text-align: center; transform: translateX(-50%); }
.feedback strong { color: var(--green-dark); font-size: 1.08rem; }.feedback span { font-size: .9rem; font-weight: 800; }.feedback.is-wrong strong { color: #bd4c43; }
.next-button { min-height: 38px; padding: 7px 12px; color: var(--black); border: 2px solid var(--black); background: var(--gold); }
.field-tip { margin: 11px 0 0; color: rgba(255,248,223,.7); font-size: .8rem; font-weight: 800; text-align: center; }

.results-panel { background: linear-gradient(160deg, rgba(28,30,38,.98), rgba(13,16,22,.96)); }.results-football { font-size: 3.2rem; }.results-panel h2 { margin: 10px 0; color: var(--gold); font-family: Impact, "Arial Black", sans-serif; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: .92; }.results-panel > p:not(.eyebrow) { color: #d8dfd4; font-size: 1.05rem; }
.results-stats { margin: 22px 0 24px; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }.results-stats div { min-height: 82px; padding: 11px 7px; display: flex; flex-direction: column; justify-content: center; gap: 7px; border: 1px solid rgba(255,255,255,.16); border-radius: 11px; background: rgba(255,255,255,.06); text-align: center; }.results-stats span { color: rgba(255,248,223,.63); font-size: .68rem; font-weight: 900; }.results-stats strong { color: var(--gold); font-size: 1.35rem; }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.secondary-button { padding: 13px 15px; display: flex; align-items: center; justify-content: center; color: var(--cream); border: 2px solid rgba(255,255,255,.25); background: rgba(255,255,255,.07); text-decoration: none; text-align: center; }.secondary-button:hover { background: rgba(255,255,255,.13); }
.results-art { background: linear-gradient(180deg, #8796a6 0 28%, #236744 28% 100%); }.results-goal { position: absolute; z-index: 4; right: 20%; top: 15%; font-size: 10rem; filter: drop-shadow(7px 8px 0 rgba(0,0,0,.25)); }.results-quarterback { position: absolute; z-index: 5; left: 25%; bottom: 16%; font-size: 10rem; filter: drop-shadow(7px 8px 0 rgba(0,0,0,.25)); }.results-art > span { position: absolute; z-index: 7; top: 46%; left: 19%; color: var(--gold); font-family: "Comic Sans MS", cursive; font-size: clamp(1.6rem, 4vw, 3rem); font-weight: 900; transform: rotate(-7deg); text-shadow: 3px 3px 0 var(--black); }
.football-footer { min-height: 36px; display: flex; align-items: center; justify-content: center; gap: 10px; color: rgba(255,248,223,.55); font-size: .72rem; font-weight: 800; }
dialog { width: min(510px, calc(100% - 26px)); padding: 28px; color: var(--ink); border: 0; border-radius: 18px; background: var(--cream); box-shadow: 0 22px 70px rgba(0,0,0,.45); } dialog::backdrop { background: rgba(5,6,9,.76); } dialog h2 { margin: 8px 0 13px; color: var(--black); font-family: Impact, "Arial Black", sans-serif; font-size: 2.7rem; } dialog ol { margin: 0; padding-left: 22px; line-height: 1.65; }.dialog-close { position: absolute; top: 9px; right: 12px; width: 34px; height: 34px; color: var(--black); border: 0; background: transparent; font-size: 1.8rem; }.dialog-button { margin-top: 20px; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

@media (max-width: 900px) {
  .start-screen, .results-screen { grid-template-columns: 1fr; }
  .start-art, .results-art { min-height: 370px; }
  .number-line { width: 95%; }
}
@media (max-width: 680px) {
  .league-chip { display: none; }
  .portal-actions .help-button, .portal-actions .sound-button { padding-inline: 9px; font-size: .74rem; }
  .start-copy, .results-panel { padding: 27px 20px 31px; }
  h1 { font-size: clamp(3.1rem, 14vw, 4.8rem); }
  .start-art, .results-art { min-height: 300px; }
  .art-quarterback { left: 20%; }.art-football { right: 12%; }.art-callout { left: 19%; }
  .game-hud { grid-template-columns: repeat(4,1fr); }.hud-stat { min-height: 64px; padding: 8px 4px; }.hud-stat span { font-size: .54rem; letter-spacing: .05em; }.hud-stat strong { font-size: clamp(1.05rem,5vw,1.4rem); }
  .prompt-area { padding-inline: 10px; }.play-question { font-size: 1.12rem; }.play-direction { font-size: .82rem; }.number-line-equation { font-size: 1.45rem; }
  .field-board { min-height: 820px; }.perspective-field { height: 220px; }.perspective-endzone-label { right: 8px; font-size: .52rem; }.perspective-caption { max-width: 90%; font-size: .52rem; }.perspective-caption span { font-size: .48rem; }.team-progress { width: calc(100% - 20px); padding-inline: 8px; gap: 5px; font-size: .6rem; }.team-progress > span:last-child { font-size: .56rem; }.number-line { height: 190px; margin-top: 25px; }.number-line::before { font-size: .58rem; }.line-marker { top: 70px; }.line-marker::after { height: 58px; }.team-runner { top: 29px; font-size: 1.25rem; }.team-runner span:nth-child(2) { font-size: 1.12rem; }.team-runner span:nth-child(3) { font-size: 1rem; }.yard-label { top: 145px; font-size: .56rem; }.field-endzone { top: 47px; bottom: 35px; }
  .answer-zone { width: calc(100% - 18px); padding: 13px 10px; }.answer-heading { font-size: .64rem; }.answer-ruler { margin-inline: 11px; }
  .feedback { bottom: 11px; width: calc(100% - 18px); }.results-stats { gap: 5px; }.results-stats div { min-height: 78px; padding-inline: 3px; }.results-stats span { font-size: .58rem; }.results-stats strong { font-size: 1.12rem; }.result-actions { grid-template-columns: 1fr; }
}
@media (max-width: 390px) { .portal-bar { min-height: 52px; }.portal-brand { font-size: .82rem; }.mini-ball { width: 25px; height: 25px; flex-basis: 25px; }.help-button, .sound-button { min-height: 36px; padding: 7px 8px !important; font-size: .66rem !important; }.game-hud .hud-stat strong { font-size: 1rem; }.number-line { width: calc(100% - 14px); }.line-marker b { font-size: .57rem; }.line-marker span { font-size: .9rem; }.yard-label { font-size: .5rem; }.answer-help { font-size: .64rem; } }
@keyframes teamRun { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-6px) rotate(5deg); } }
@keyframes teamBanner { 0% { transform: scale(1); } 45% { transform: scale(1.025); } 100% { transform: scale(1); } }
@keyframes fieldRun { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-7px) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }