:root {
  color-scheme: dark;
  --green: #35e68c;
  --green-2: #0ba85d;
  --ink: #06100b;
  --panel: rgba(9, 23, 16, 0.96);
  --panel-2: #10261b;
  --line: rgba(255, 255, 255, 0.12);
  --muted: #a4b6ac;
  --danger: #ff6f6f;
  --gold: #f5c95b;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  color: #f7fff9;
  background:
    radial-gradient(circle at 50% -20%, rgba(53, 230, 140, .2), transparent 42%),
    linear-gradient(rgba(3, 12, 7, .75), rgba(3, 12, 7, .93)),
    repeating-linear-gradient(90deg, #135f39 0, #135f39 9.8%, #185337 10%, #185337 20%);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .08;
  background: repeating-linear-gradient(0deg, transparent 0, transparent calc(10vh - 2px), #fff calc(10vh - 2px), #fff 10vh);
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.app-shell { position: relative; width: min(94%, 860px); margin: 0 auto; padding: 34px 0 70px; }
.league-header { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.football-mark {
  display: grid; flex: 0 0 48px; width: 48px; height: 48px; place-items: center;
  border: 2px solid var(--green); border-radius: 14px; color: var(--green); font-size: 22px; transform: rotate(45deg);
}
.league-title { min-width: 0; flex: 1; }
.league-title h1 { margin: 0; font-size: 1.08rem; letter-spacing: -.02em; }
.eyebrow, .step-label { margin: 0 0 5px; color: var(--green); font-size: .73rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }

.screen {
  display: none; padding: clamp(26px, 6vw, 52px); border: 1px solid var(--line); border-radius: 25px;
  background: linear-gradient(155deg, rgba(16, 39, 27, .98), rgba(7, 19, 13, .98));
  box-shadow: 0 28px 85px rgba(0,0,0,.4); backdrop-filter: blur(15px);
}
.screen.active { display: block; animation: enter 360ms ease both; }
@keyframes enter { from { opacity: 0; transform: translateY(12px) scale(.987); } to { opacity: 1; transform: none; } }
h2 { max-width: 700px; margin: 7px 0 0; font-size: clamp(2rem, 6vw, 4rem); line-height: 1.02; letter-spacing: -.055em; }
.subtext { max-width: 630px; margin: 18px 0 28px; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.status-pill {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; padding: 7px 11px;
  border: 1px solid rgba(53, 230, 140, .25); border-radius: 999px; color: #c2f9db;
  background: rgba(53, 230, 140, .08); font-size: .76rem; font-weight: 800;
}
.status-pill span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.primary-button {
  width: 100%; min-height: 54px; padding: 15px 19px; border: 0; border-radius: 14px;
  color: #031209; background: var(--green); font-weight: 900; cursor: pointer; transition: 170ms ease;
}
.primary-button:hover:not(:disabled) { background: #62efa6; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(53,230,140,.14); }
.primary-button:disabled { opacity: .45; cursor: not-allowed; }
.primary-button span { float: right; }
.feedback { min-height: 22px; margin: 15px 0 0; color: #8ea096; font-size: .82rem; text-align: center; }
.feedback.bad { color: #ff9b9b; }
.feedback.good { color: #85f0b9; }

.answers { display: grid; gap: 11px; margin-top: 28px; }
.answer {
  width: 100%; padding: 17px 18px; border: 1px solid var(--line); border-radius: 14px;
  color: #edf8f1; background: rgba(255,255,255,.035); text-align: left; cursor: pointer; transition: 160ms ease;
}
.answer:hover { border-color: rgba(53,230,140,.55); background: rgba(53,230,140,.08); transform: translateX(4px); }
.answer strong { display: inline-grid; width: 28px; color: var(--green); }
.answer.wrong { animation: shake 320ms ease; border-color: rgba(255,97,97,.52); background: rgba(255,97,97,.08); }
@keyframes shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }

.typed-form { display: grid; grid-template-columns: 1fr 220px; gap: 10px; margin-top: 26px; }
.typed-form input {
  min-width: 0; height: 54px; padding: 0 17px; border: 1px solid var(--line); outline: none; border-radius: 14px;
  color: white; background: rgba(255,255,255,.05); font-size: 1rem; transition: 160ms ease;
}
.typed-form input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(53,230,140,.1); }
.typed-form .primary-button { width: auto; }
.typed-form.shake input { animation: shake 320ms ease; border-color: rgba(255,97,97,.52); }

.challenge-heading, .order-heading { display: flex; align-items: start; justify-content: space-between; gap: 24px; }
.challenge-heading .subtext, .order-heading .subtext { margin-bottom: 20px; }
.scoreboard {
  display: grid; flex: none; min-width: 100px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px;
  background: rgba(0,0,0,.22); text-align: right;
}
.scoreboard b { color: var(--green); font-size: 1rem; }
.scoreboard span { margin-top: 3px; color: var(--muted); font-size: .78rem; }
.target-field {
  position: relative; height: 380px; margin: 8px 0 13px; overflow: hidden; border: 2px solid rgba(255,255,255,.2);
  border-radius: 18px; background:
    linear-gradient(90deg, transparent 49.65%, rgba(255,255,255,.13) 49.65%, rgba(255,255,255,.13) 50.35%, transparent 50.35%),
    repeating-linear-gradient(0deg, #17643d 0, #17643d 18.8%, rgba(255,255,255,.35) 19%, #17643d 19.5%, #17643d 20%);
}
.moving-football {
  display: none; position: absolute; z-index: 2; width: 48px; height: 37px; border: 2px solid #f3d3a0;
  border-radius: 50%; color: white; background: #8c4d28; cursor: crosshair; transform: rotate(-24deg);
  box-shadow: 0 8px 15px rgba(0,0,0,.3);
}
.moving-football.live { display: grid; place-items: center; }
.field-message { position: absolute; inset: 0; display: grid; place-items: center; padding: 30px; color: #d2e3d9; font-weight: 900; text-align: center; background: rgba(2,12,7,.44); }
.field-message.hidden { display: none; }

.mini-progress { height: 5px; margin-bottom: 25px; overflow: hidden; border-radius: 9px; background: rgba(255,255,255,.07); }
.mini-progress span { display: block; width: 33.33%; height: 100%; border-radius: inherit; background: var(--green); transition: width 300ms ease; }
.question-count { margin: 0 0 8px; color: #8fa097; font-size: .8rem; font-weight: 800; }

.verified { flex: none; padding: 8px 11px; border-radius: 999px; color: #a7f4cc; background: rgba(53,230,140,.1); font-size: .72rem; font-weight: 900; }
.pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 15px 0 20px; }
.pick-card {
  position: relative; display: grid; min-height: 82px; padding: 12px; overflow: hidden; border: 1px solid var(--line);
  border-radius: 14px; background: rgba(255,255,255,.035); animation: card-in 360ms both;
}
.pick-card small { color: #81938a; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.pick-card b { align-self: end; font-size: .96rem; }
.pick-card.locked b { color: transparent; border-radius: 5px; background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.18), rgba(255,255,255,.08)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
.pick-card.locked::after { content: "LOCKED"; position: absolute; right: 10px; top: 10px; color: var(--gold); font-size: .58rem; font-weight: 900; letter-spacing: .1em; }
.pick-card.empty { min-height: 82px; border-style: dashed; animation: empty-pop 450ms both; }
.pick-card.empty b { color: #62756a; font-style: italic; font-weight: 700; }
@keyframes card-in { from { opacity: 0; transform: translateY(9px); } }
@keyframes empty-pop { from { opacity: 0; transform: scale(.88); } }
@keyframes shimmer { to { background-position: -200% 0; } }
.system-alert {
  display: none; gap: 4px; margin: 18px 0; padding: 15px 17px; border-radius: 14px; border: 1px solid;
}
.system-alert.visible { display: grid; animation: enter 320ms ease both; }
.system-alert strong { font-size: .9rem; }
.system-alert span { color: #c3cec7; font-size: .8rem; line-height: 1.5; }
.system-alert.warning { border-color: rgba(245,201,91,.38); background: rgba(245,201,91,.08); }
.system-alert.warning strong { color: var(--gold); }
.system-alert.error { border-color: rgba(255,111,111,.4); background: rgba(255,111,111,.08); }
.system-alert.error strong { color: #ff9f9f; }
.reveal-loader { height: 9px; margin: 5px 0 8px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.reveal-loader div { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--green-2),var(--green)); box-shadow: 0 0 15px rgba(53,230,140,.4); transition: width 180ms ease; }
.reveal-percent { display: flex; justify-content: space-between; margin-bottom: 14px; color: #91a49a; font-size: .72rem; font-weight: 800; }
.reveal-percent b { color: var(--green); }
.locked-grid.processing .pick-card { border-color: rgba(53,230,140,.2); }
.locked-grid.ready .pick-card { animation: result-pulse 650ms ease both; }
@keyframes result-pulse { 50% { border-color: rgba(53,230,140,.7); background: rgba(53,230,140,.12); transform: translateY(-2px); } }

.memory-status { display: flex; justify-content: space-between; margin-bottom: 12px; color: #b8c8be; font-size: .82rem; }
.memory-status span { color: var(--green); }
.memory-board { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
.memory-pad {
  display: grid; min-height: 120px; padding: 16px; border: 1px solid var(--line); border-radius: 17px;
  color: white; background: rgba(255,255,255,.035); cursor: pointer; opacity: .7; transition: 120ms ease;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.memory-pad span { align-self: start; font-size: .68rem; font-weight: 900; letter-spacing: .12em; }
.memory-pad b { align-self: end; font-size: 2rem; }
.memory-pad:disabled { cursor: default; }
.memory-pad.lit { opacity: 1; transform: scale(.97); box-shadow: inset 0 0 45px currentColor, 0 0 22px currentColor; }
.pad-green { color: #40e695; }.pad-blue { color: #5ab8ff; }.pad-gold { color: #f5c95b; }.pad-red { color: #ff7474; }

.rulebook {
  position: relative; margin: 22px 0; padding: clamp(20px,5vw,34px); overflow: hidden; border-radius: 5px;
  color: #28231a; background: #e8dfc5; box-shadow: inset 0 0 50px rgba(88,63,25,.14); transform: rotate(-.25deg);
}
.rulebook h3 { margin: 0 0 20px; font-family: Georgia, serif; font-size: 1.45rem; }
.rulebook p { margin: 11px 0; font-family: Georgia, serif; font-size: .91rem; line-height: 1.5; }
.rulebook aside { margin-top: 20px; padding: 13px; border: 1px dashed #8b7450; font-family: "Comic Sans MS", cursive; font-size: .9rem; transform: rotate(.5deg); }
.rulebook-stamp { position: absolute; right: -24px; top: 23px; padding: 5px 34px; color: #9b3434; border: 3px solid #9b3434; font-size: .65rem; font-weight: 900; letter-spacing: .14em; transform: rotate(18deg); opacity: .72; }
.code-form input { text-align: center; font-size: 1.35rem; font-weight: 900; letter-spacing: .38em; }

.game-wrap { position: relative; width: min(100%, 600px); margin: 4px auto 13px; }
#drive-canvas { display: block; width: 100%; height: auto; border: 2px solid rgba(255,255,255,.22); border-radius: 16px; background: #145d37; touch-action: none; }
.game-overlay {
  position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 11px; padding: 30px;
  border-radius: 16px; background: rgba(2,12,7,.84); text-align: center;
}
.game-overlay.hidden { display: none; }
.game-overlay strong { font-size: clamp(1.8rem,5vw,3rem); letter-spacing: -.04em; }
.game-overlay span { max-width: 390px; color: #b9c8bf; line-height: 1.5; }
.game-overlay .primary-button { width: min(100%, 300px); margin-top: 8px; }
.touch-controls { display: grid; justify-items: center; gap: 5px; margin: 14px 0; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; }
.touch-controls div { display: flex; gap: 5px; }
.touch-controls button {
  width: 58px; height: 48px; border: 1px solid var(--line); border-radius: 12px; color: white;
  background: rgba(255,255,255,.07); font-size: 1.2rem; font-weight: 900; touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.touch-controls button:active, .touch-controls button.pressed { background: rgba(53,230,140,.28); border-color: var(--green); }

.draft-list { display: grid; gap: 7px; margin: 22px 0 0; padding: 0; list-style: none; }
.draft-list li {
  display: grid; grid-template-columns: 43px 1fr auto; align-items: center; min-height: 51px; padding: 7px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.035); animation: reveal-pick 460ms both;
}
.draft-list li span { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 8px; color: #07110b; background: var(--green); font-size: .78rem; font-weight: 900; }
.draft-list li strong { font-size: .92rem; }
.draft-list li em { color: #87998f; font-size: .65rem; font-style: normal; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
@keyframes reveal-pick { from { opacity: 0; transform: translateX(-14px); } }
.reveal-complete { display: none; gap: 4px; margin-top: 18px; padding: 18px; border: 1px solid rgba(53,230,140,.3); border-radius: 14px; background: rgba(53,230,140,.08); }
.reveal-complete.visible { display: grid; animation: enter 350ms ease both; }
.reveal-complete strong { color: var(--green); }
.reveal-complete span { color: #b9c8bf; font-size: .83rem; }

.game-score {
  display: flex; justify-content: space-between; gap: 16px; margin: 8px 0 14px; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 13px; color: var(--muted); background: rgba(0,0,0,.18); font-size: .8rem;
}
.game-score b { color: var(--green); }
.timing-meter {
  position: relative; height: 62px; margin: 22px 0 14px; overflow: hidden; border: 1px solid var(--line);
  border-radius: 14px; background: linear-gradient(90deg,#722d2d,#aa7832,#1b8d55,#aa7832,#722d2d);
}
.timing-zone { position: absolute; top: 0; bottom: 0; left: 38%; width: 24%; border-inline: 2px solid white; background: rgba(53,230,140,.34); }
.timing-marker { position: absolute; top: 5px; bottom: 5px; left: 0; width: 5px; border-radius: 5px; background: white; box-shadow: 0 0 12px white; transform: translateX(-50%); }

.shell-stage { position: relative; height: 190px; margin: 18px 0 12px; overflow: hidden; border-radius: 17px; background: rgba(0,0,0,.17); }
.helmet {
  position: absolute; z-index: 2; top: 58px; width: 27%; height: 100px; border: 2px solid #b9b9b9; border-radius: 50% 50% 38% 38%;
  color: #fff; background: #171717; box-shadow: 0 12px 18px rgba(0,0,0,.35); cursor: pointer; transition: left 300ms ease;
  user-select: none; -webkit-user-select: none;
}
.helmet span { display: grid; place-items: center; width: 34px; height: 34px; margin: auto; border-radius: 50%; color: #111; background: #d6d6d6; font-weight: 950; }
.helmet[data-helmet="0"] { left: 3%; }.helmet[data-helmet="1"] { left: 36.5%; }.helmet[data-helmet="2"] { left: 70%; }
.hidden-football { position: absolute; z-index: 1; top: 118px; left: 15%; color: #c9854c; font-size: 25px; transition: left 300ms ease; transform: translateX(-50%) rotate(45deg); }

.mini-canvas { display: block; width: 100%; height: auto; border: 2px solid rgba(255,255,255,.2); border-radius: 16px; background: #155f39; touch-action: none; -webkit-touch-callout: none; }
.mini-game { width: min(100%,600px); }
.reaction-pad {
  display: grid; width: 100%; min-height: 230px; place-items: center; margin-top: 18px; border: 2px solid var(--line);
  border-radius: 20px; color: white; background: #26342c; font-size: clamp(1.2rem,4vw,2rem); font-weight: 950; cursor: pointer;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
}
.reaction-pad.waiting { background: #783b3b; }.reaction-pad.go { color: #04110a; background: var(--green); box-shadow: 0 0 35px rgba(53,230,140,.35); }
.coin {
  display: grid; width: 130px; height: 130px; place-items: center; margin: 24px auto 18px; border: 7px double #f8d66d;
  border-radius: 50%; color: #4f3b05; background: linear-gradient(145deg,#fff0a8,#dcae35); font-size: 2.6rem; font-weight: 950;
  box-shadow: 0 18px 35px rgba(0,0,0,.3); user-select: none; -webkit-user-select: none;
}
.coin.flipping { animation: coin-flip 520ms ease; }
@keyframes coin-flip { 50% { transform: rotateY(540deg) scale(.82); } }
.streak-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 18px; }
.streak-dots span { width: 13px; height: 13px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.06); }
.streak-dots span.on { border-color: var(--green); background: var(--green); box-shadow: 0 0 10px var(--green); }
.coin-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.coin-actions .answer { text-align: center; }

#drive-canvas, .touch-controls, .game-wrap { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

@media (max-width: 640px) {
  .app-shell { padding-top: 20px; }
  .league-header { gap: 10px; }
  .football-mark { flex-basis: 41px; width: 41px; height: 41px; border-radius: 12px; }
  .league-title h1 { font-size: .92rem; }
  .screen { padding: 27px 19px; border-radius: 20px; }
  .typed-form { grid-template-columns: 1fr; }
  .typed-form .primary-button { width: 100%; }
  .challenge-heading, .order-heading { display: block; }
  .scoreboard { grid-template-columns: auto auto; gap: 20px; width: 100%; margin-bottom: 12px; text-align: left; }
  .scoreboard span { margin: 0; text-align: right; }
  .target-field { height: 330px; }
  .pick-grid { grid-template-columns: repeat(2, 1fr); }
  .memory-pad { min-height: 100px; }
  .rulebook-stamp { right: -34px; top: 18px; }
  .touch-controls button { width: 63px; height: 50px; }
  .shell-stage { height: 175px; }
  .helmet { top: 50px; height: 92px; }
  .coin { width: 112px; height: 112px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}