:root { color-scheme: dark; --bg: #07130d; --pitch: #0d2418; --pitch2: #10291c; --line: rgba(236,244,230,.12); --line2: rgba(236,244,230,.22); --chalk: #f4f1e6; --muted: #a8b8ac; --dim: #6f8676; --gold: #f5cb4d; --gold2: #ffe39a; --coral: #ff6b5e; --green: #7fe08f; --t0: #dfe3e8; --t1: #5aa9ff; --t2: #7fe08f; --t3: #ffa24c; --t4: #f5cb4d; --lost: #ff6b5e; --tack: #3a3f3c; --display: "Barlow Condensed","Arial Narrow",system-ui,sans-serif; --body: Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --ease: cubic-bezier(.2,.8,.2,1); }
* { box-sizing: border-box; }
html { background: var(--bg); text-size-adjust: 100%; }
body { margin: 0; color: var(--chalk); font: 16px/1.5 var(--body); min-height: 100vh; background: radial-gradient(900px 480px at 50% -180px, rgba(255,248,220,.13), transparent 70%), repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0, rgba(255,255,255,.02) 80px, transparent 80px, transparent 160px), linear-gradient(#0e2619, #07130d 70%); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px 48px; }
header.top { display: flex; align-items: center; justify-content: space-between; padding: 16px 0 10px; }
.brand { background: none; border: 0; padding: 0; text-align: left; }
.brand b { display: block; font: italic 900 34px/.9 var(--display); letter-spacing: .5px; }
.brand b i { color: var(--gold); font-style: inherit; }
.brand small { display: block; margin-top: 3px; font: 700 10px/1 var(--body); letter-spacing: 2.2px; color: var(--dim); text-transform: uppercase; }
.iconbtn { border: 1px solid var(--line2); background: rgba(255,255,255,.04); border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 700; }
.card { background: linear-gradient(rgba(255,255,255,.043), rgba(255,255,255,.02)); border: 1px solid var(--line); border-radius: 18px; padding: 18px; margin-top: 14px; }
.tag { font-size: 11px; font-weight: 800; letter-spacing: 2.4px; color: var(--gold); text-transform: uppercase; }
.fine { font-size: 12.5px; color: var(--dim); }
.muted { color: var(--muted); }
.row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.btn { border: 0; border-radius: 14px; padding: 13px 20px; font: 800 17px/1 var(--display); letter-spacing: 1px; text-transform: uppercase; background: var(--gold); color: #1d1600; box-shadow: #b08d22 0 6px 0, rgba(245,203,77,.18) 0 10px 24px; transition: transform .08s; }
.btn:active { transform: translateY(3px); box-shadow: #b08d22 0 3px 0; }
.btn.alt { background: rgba(255,255,255,.06); color: var(--chalk); border: 1px solid var(--line2); box-shadow: none; }
.btn.big { padding: 17px 26px; font-size: 21px; }
.btn.wide { width: 100%; }
.hero h1 { font: italic 900 clamp(64px,17vw,124px)/.82 var(--display); margin: 14px 0 6px; letter-spacing: -.5px; text-transform: uppercase; }
.hero h1 i { color: var(--gold); font-style: inherit; }
.lede { font-size: 17px; color: #d6e0d8; max-width: 560px; margin: 10px 0 0; }
.steps { display: grid; gap: 10px; margin-top: 12px; }
.step { display: flex; gap: 12px; align-items: flex-start; }
.step > b { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: #1d1600; display: grid; place-items: center; font: 900 16px/1 var(--display); }
.step p b { color: var(--chalk); }
.step p { margin: 2px 0 0; color: #d6e0d8; }
.tiers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 12px; }
.tier { border-radius: 12px; padding: 9px 6px; text-align: center; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.tier i { display: block; width: 14px; height: 14px; border-radius: 4px; margin: 0 auto 6px; }
.tier b { display: block; font: 800 14px/1.05 var(--display); text-transform: uppercase; letter-spacing: .4px; }
.tier small { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
.zones { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
.zones td { padding: 7px 4px; border-top: 1px solid var(--line); }
.zones td:last-child { text-align: right; color: var(--muted); }
details summary { cursor: pointer; color: var(--muted); font-weight: 700; margin-top: 14px; }
.pitchbox { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line2); background: var(--pitch); margin-top: 12px; }
.pitchbox svg { display: block; width: 100%; height: auto; }
.pl { fill: none; stroke: rgba(244,241,230,.55); stroke-width: 1.2; }
.seg { stroke-width: 2.5; stroke-dasharray: 6 5; opacity: .9; }
.dot { opacity: .35; }
.ballg { transition: transform 1s var(--ease); }
.ballg.fast { transition: none; }
.ballg.shot { transition: transform .7s cubic-bezier(.3,.6,.3,1); }
.dist { position: absolute; left: 10px; top: 8px; font: 900 22px/1 var(--display); letter-spacing: .5px; text-shadow: rgba(0,0,0,.6) 0 2px 8px; }
.dist small { display: block; font: 700 10px/1.3 var(--body); letter-spacing: 1.6px; color: var(--muted); text-transform: uppercase; }
.trail { position: absolute; right: 10px; top: 10px; display: flex; gap: 4px; }
.trail span { width: 14px; height: 14px; border-radius: 4px; background: rgba(255,255,255,.1); }
.kickhead { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.kickhead .tag { font-size: 12px; }
.clock { font: 900 26px/1 var(--display); min-width: 44px; text-align: right; }
.clock.low { color: var(--coral); }
.bar { height: 6px; border-radius: 9px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 8px; }
.bar i { display: block; height: 100%; background: var(--gold); transform-origin: left center; transition: transform .25s linear; }
.qtext { font: 800 clamp(26px,6.4vw,36px)/1.05 var(--display); margin: 14px 0 6px; letter-spacing: .2px; }
.field { display: flex; gap: 8px; margin-top: 12px; }
.field input { flex: 1 1 0%; min-width: 0; background: rgba(0,0,0,.35); border: 1px solid var(--line2); border-radius: 14px; padding: 14px; font-size: 18px; outline: none; }
.field input:focus { border-color: var(--gold); }
.sugs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; min-height: 34px; }
.sugs button { border: 1px solid var(--line2); background: rgba(255,255,255,.05); border-radius: 999px; padding: 6px 12px; font-size: 14px; }
.msg { min-height: 22px; margin: 8px 0 0; color: var(--gold2); font-size: 14px; }
.verdict { font: italic 900 clamp(44px,12vw,72px)/.9 var(--display); text-transform: uppercase; margin: 6px 0 4px; letter-spacing: .3px; }
.gain { font: 900 30px/1 var(--display); }
.why { color: #d6e0d8; margin: 8px 0 0; }
.ans { font-weight: 700; color: var(--chalk); }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font: 800 13px/1.4 var(--display); letter-spacing: .8px; text-transform: uppercase; color: #111; }
.need { font: 800 22px/1.15 var(--display); margin-top: 6px; }
.bignum { font: 900 96px/.85 var(--display); letter-spacing: -1px; }
.bignum small { font-size: 24px; color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.grid { font-size: 26px; letter-spacing: 3px; margin-top: 10px; line-height: 1.2; }
.gline { margin: 6px 0 0; font: 800 22px/1.1 var(--display); letter-spacing: .5px; text-transform: uppercase; }
.stats { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; color: var(--muted); font-size: 14px; }
.stats b { color: var(--chalk); }
.board { list-style: none; padding: 0; margin: 10px 0 0; }
.board li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 15px; }
.board li span:last-child { font-weight: 700; }
.board .me { color: var(--gold); }
.field2 { background: rgba(0,0,0,.35); border: 1px solid var(--line2); border-radius: 12px; padding: 11px 12px; font-size: 16px; outline: none; }
.review { list-style: none; padding: 0; margin: 8px 0 0; }
.review li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.review b { display: block; font-size: 15px; }
.nerd { border-color: rgba(245,203,77,.35); }
.nerd-txt { margin: 10px 0 0; font: 700 21px/1.3 var(--display); }
.pop { animation: pop .35s var(--ease); }
@keyframes pop { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }
.shake { animation: shake .5s ease 1; }
@keyframes shake { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.hide { display: none !important; }
footer { margin-top: 28px; text-align: center; }
@media (prefers-reduced-motion: reduce) { .ballg, .ballg.shot { transition: none; } .pop, .shake { animation: none; } }
@media (max-width: 420px) { .tiers { grid-template-columns: repeat(5, 1fr); gap: 4px; } .tier { padding: 8px 3px; } .tier b { font-size: 12px; } .bignum { font-size: 80px; } }

/* ---------- v1.1 additions ---------- */
.center { text-align: center; }
.matchhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mdline { margin: 10px 0 14px; }
#mdNote { margin: 12px 0 0; }
.tier small.m { color: var(--chalk); font-weight: 700; }
.btn, .iconbtn, .sugs button, .opt { min-height: 44px; }
.iconbtn { min-height: 36px; }
.brand b i { font-style: normal; }
.qcut { margin: 0; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.opt { border: 1px solid var(--gold); background: rgba(245,203,77,.1); border-radius: 12px; padding: 10px 14px; font-weight: 700; }
.optlabel { margin: 10px 0 0; color: var(--gold2); font-weight: 700; }
.reveal .pill { margin-bottom: 4px; }
.reveal .gain { font: italic 900 clamp(52px,14vw,80px)/.9 var(--display); margin: 6px 0 2px; }
.est { color: var(--dim); font-size: 13px; }
.pop1 { margin: 6px 0 0; color: var(--dim); font-size: 13.5px; }
.shotcard .bigdist { font: italic 900 clamp(60px,16vw,96px)/.85 var(--display); text-transform: uppercase; margin: 8px 0 4px; }
.goalword { font: italic 900 clamp(64px,18vw,120px)/.85 var(--display); text-transform: uppercase; margin: 8px 0 2px; }
.goalword.miss { color: var(--coral); }
.goalword.hit { color: var(--gold); }
.ftrank { font: 800 24px/1.1 var(--display); text-transform: uppercase; letter-spacing: .5px; margin-top: 6px; }
.postrow { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.postrow input { flex: 1 1 160px; min-width: 0; }
.rankline { margin: 10px 0 0; font-weight: 700; color: var(--gold2); min-height: 22px; }
#shareBox { width: 100%; margin-top: 10px; min-height: 80px; background: rgba(0,0,0,.35); color: var(--chalk); border: 1px solid var(--line2); border-radius: 12px; padding: 10px; font: 14px/1.4 var(--body); }
.review li { display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: start; }
.review li > i { width: 14px; height: 14px; border-radius: 4px; margin-top: 4px; }
.review .rq { font-weight: 700; color: var(--chalk); }
.review .ra { color: #d6e0d8; }
.review .rm { color: var(--dim); font-size: 13px; }
.review .rg { font: 900 20px/1 var(--display); white-space: nowrap; }
.board li .bn { display: flex; gap: 10px; }
.board li .bn em { color: var(--dim); font-style: normal; min-width: 22px; }
.countline { margin: 16px 0 0; }
dialog { border: 1px solid var(--line2); border-radius: 18px; background: #0d2418; color: var(--chalk); padding: 0; max-width: min(560px, calc(100vw - 32px)); width: 100%; }
dialog::backdrop { background: rgba(0,0,0,.6); }
.dlg { padding: 18px 20px 20px; }
.dlg p { color: #d6e0d8; margin: 10px 0 0; }
.dlghead { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dlghead h2 { margin: 0; font: italic 900 32px/1 var(--display); text-transform: uppercase; }
.err { color: var(--coral); }
.loading { opacity: .6; pointer-events: none; }
@media (max-width: 420px) {
  .tier small { font-size: 10.5px; }
  .review li { grid-template-columns: 12px 1fr auto; gap: 8px; }
  .hero h1 { font-size: clamp(56px, 19vw, 124px); }
}

/* Compact pitch on phones so the question and keyboard fit. The SVG slices top and bottom, keeping the centre line. */
@media (max-width: 520px) {
  .pitchbox svg { height: 170px; }
  #play .reveal, #play .shotcard { margin-top: 10px; }
}
@media (max-height: 700px) and (max-width: 520px) { .pitchbox svg { height: 130px; } }

/* ---------- v1.1 review: pitch zones, xG, run map, VAR ---------- */
.zl { stroke: rgba(245,203,77,.35); stroke-width: 2; stroke-dasharray: 10 8; }
.zcur { fill: rgba(245,203,77,.07); }
.zm { fill: rgba(244,241,230,.45); font: 700 24px/1 var(--body); }
.zx { fill: rgba(244,241,230,.5); font: 900 32px/1 var(--display); letter-spacing: .5px; }
.zx.on { fill: var(--gold); }
.zx.lab { font: 700 20px/1 var(--body); letter-spacing: 2px; text-transform: uppercase; fill: rgba(244,241,230,.4); }
.dist small b { color: var(--gold); font-weight: 800; }
.xgline { margin: 4px 0 0; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.xgline b { font: 900 26px/1 var(--display); color: var(--gold); letter-spacing: .5px; }
.xgline span { color: var(--muted); font-size: 14px; }
.seg.solid { stroke-dasharray: none; stroke-width: 6; opacity: 1; }
.shotl { stroke-width: 6; stroke-linecap: round; }
.shotl.miss { stroke-dasharray: 12 10; }
.kn { fill: var(--chalk); font: 900 30px/1 var(--display); paint-order: stroke; stroke: #07130d; stroke-width: 6px; }
.ftmap { margin: 14px 0 0; }
.ftmap .pitchbox { margin-top: 0; }
.ftmap figcaption { margin-top: 6px; }
.note { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid var(--line2); color: #d6e0d8; font-size: 14px; }
.provis { margin: 8px 0 0; }
.var { border-color: rgba(245,203,77,.35); }
.varrow { display: flex; align-items: baseline; gap: 14px; margin-top: 10px; font: 800 18px/1 var(--display); text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.varrow b { font: 900 44px/1 var(--display); color: var(--chalk); margin-left: 6px; }
.varrow span:last-child b { color: var(--gold); }
.varrow .arr { color: var(--dim); font-size: 28px; }
@media (max-width: 520px) { .ftmap .pitchbox svg { height: 150px; } }

/* ---------- v1.2: two-dimensional runs, rarity, xG zones ---------- */
.zf { fill: rgba(245,203,77,.075); }
.zf.z3 { fill: rgba(245,203,77,.16); stroke: rgba(245,203,77,.55); stroke-width: 2; stroke-dasharray: 8 7; }
.seg { fill: none; stroke-linecap: round; stroke-width: 4; }
.needtag { position: absolute; left: 10px; bottom: 8px; font: 800 10px/1 var(--body); letter-spacing: 1.4px; text-transform: uppercase; color: #1d1600; background: var(--gold); border-radius: 999px; padding: 5px 9px; box-shadow: rgba(0,0,0,.35) 0 2px 8px; }
.drift { margin: 4px 0 0; color: var(--muted); font-size: 14px; font-style: italic; }
.goalword.post { color: var(--gold2); }
.sideline { margin: 2px 0 0; }
.breakdown { margin: 2px 0 0; }
.runmap { font: 18px/1.15 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; margin: 12px 0 0; letter-spacing: 2px; white-space: pre; }
.tier small.lat { color: var(--dim); font-size: 11px; }

.testbar { background: var(--gold); color: #1d1600; text-align: center; font: 800 12px/1.3 var(--body); letter-spacing: .6px; padding: 7px 12px; }

/* ---------- v1.2: leagues ---------- */
.lgname { font: 900 italic 38px/1 var(--display); letter-spacing: .5px; text-transform: uppercase; margin: 8px 0 4px; }
.invite { border-color: var(--gold); box-shadow: rgba(245,203,77,.15) 0 0 0 3px; }
.lglist { list-style: none; margin: 10px 0 0; padding: 0; }
.lgrow { width: 100%; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; text-align: left; gap: 2px 10px; background: rgba(255,255,255,.04); border: 1px solid var(--line2); border-radius: 12px; padding: 11px 14px; margin-top: 8px; color: var(--chalk); min-height: 44px; cursor: pointer; }
.lgrow b { font: 800 19px/1.1 var(--display); text-transform: uppercase; letter-spacing: .4px; }
.lgrow span { grid-row: 2; color: var(--muted); font-size: 13px; }
.lgrow i { grid-row: 1 / 3; grid-column: 2; align-self: center; font-style: normal; font-size: 26px; color: var(--gold); }
.newlg { margin-top: 12px; }
.newlg summary { cursor: pointer; font-weight: 700; color: var(--gold2); min-height: 32px; }
.lgform { display: grid; gap: 8px; margin-top: 8px; }
.row.two > .btn { flex: 1 1 140px; }
.lgt { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 15px; }
.lgt td, .lgt th { padding: 8px 4px; border-top: 1px solid var(--line); text-align: right; }
.lgt th { border-top: 0; color: var(--dim); font-size: 11px; letter-spacing: 1px; font-weight: 800; }
.lgt td.pos { width: 26px; text-align: left; color: var(--muted); font: 800 18px/1 var(--display); }
.lgt td.nm { text-align: left; font-weight: 700; overflow-wrap: anywhere; }
.lgt td.gr { letter-spacing: 1px; font-size: 13px; white-space: nowrap; }
.lgt td.sc { font: 900 22px/1 var(--display); color: var(--chalk); }
.lgt td.av { color: var(--muted); }
.lgt tr.me td { color: var(--gold); }
.lgt tr.me td.sc { color: var(--gold); }
.waitline { margin-top: 10px; }
.locked { margin: 10px 0 0; padding: 14px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px dashed var(--line2); color: #d6e0d8; }
.hq { border-top: 1px solid var(--line); padding: 4px 0; }
.hq:first-of-type { margin-top: 8px; }
.hq summary { display: grid; grid-template-columns: 34px 1fr; gap: 2px 8px; cursor: pointer; padding: 8px 0; list-style: none; }
.hq summary::-webkit-details-marker { display: none; }
.hqn { grid-row: 1 / 3; width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: #1d1600; display: grid; place-items: center; font: 900 14px/1 var(--display); }
.hqq { font-weight: 700; font-size: 14px; }
.hql { color: var(--muted); font-size: 12px; }
.hrows { list-style: none; margin: 0 0 6px 42px; padding: 0; }
.hrows li { display: grid; grid-template-columns: minmax(56px, auto) 1fr auto 44px; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); font-size: 14px; }
.hrows li.me b, .hrows li.me .ha { color: var(--gold); }
.hrows .ha { color: #d6e0d8; overflow-wrap: anywhere; }
.hrows .hg { text-align: right; font-weight: 800; font-size: 13px; }
.chip { display: inline-block; min-width: 34px; text-align: center; border-radius: 999px; padding: 3px 7px; font: 800 13px/1 var(--display); color: #10170f; }
.chip.lost { background: var(--coral); }
.chip.dim { background: #3a3f3c; color: var(--chalk); }
.lastr { margin: 8px 0 0; }
.sharebox { display: block; width: 100%; min-height: 90px; margin-top: 6px; background: rgba(0,0,0,.35); color: var(--chalk); border: 1px solid var(--line2); border-radius: 10px; padding: 8px; font-size: 13px; }
@media (max-width: 420px) { .lgt td.gr { font-size: 11px; letter-spacing: 0; } .hrows { margin-left: 0; } .lgname { font-size: 32px; } }

/* =====================================================================
   v1.4 redesign: a live-match feel. Demo run on the home screen, a broadcast camera on the pitch,
   count-ups, stamps, flashes and confetti. All motion is decoration and switches off for reduced motion.
   ===================================================================== */
body:not([data-screen="home"]) footer { display: none; }
#fx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 60; }
.topbtns { display: flex; gap: 8px; align-items: center; }
.iconbtn.snd { width: 40px; height: 36px; padding: 0; display: grid; place-items: center; color: var(--muted); }
.iconbtn.snd svg { width: 20px; height: 20px; }
.iconbtn.snd .on { display: none; }
.iconbtn.snd.is-on { color: var(--gold); border-color: rgba(245,203,77,.5); }
.iconbtn.snd.is-on .on { display: inline; }
.iconbtn.snd.is-on .off { display: none; }

/* ---- home ---- */
.demo { position: relative; margin-top: 6px; min-height: 120px; }
.demo .pitchbox { margin-top: 0; box-shadow: rgba(0,0,0,.45) 0 18px 40px -18px, rgba(245,203,77,.08) 0 0 0 1px inset; }
.demo .pitchbox svg { height: auto !important; aspect-ratio: 16 / 9; }
.demotag { position: absolute; left: 10px; top: 9px; font: 800 10px/1 var(--body); letter-spacing: 1.8px; text-transform: uppercase; color: var(--chalk); background: rgba(7,19,13,.65); border: 1px solid var(--line2); padding: 5px 8px; border-radius: 999px; }
.demotag::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); margin-right: 6px; vertical-align: 1px; animation: livedot 1.4s ease-in-out infinite; }
.dlab text { font: italic 900 38px/1 var(--display); fill: #10170f; letter-spacing: .5px; }
.dlab.big text { font-size: 96px; }
.dlab { animation: dlabin .22s var(--ease) both; transition: opacity .14s; }
.dlab.out { opacity: 0; }
@keyframes dlabin { from { opacity: 0; } to { opacity: 1; } }
.hero h1 { font-size: clamp(46px, 13vw, 96px); margin: 16px 0 4px; line-height: .86; }
.hero .lede { font-size: 17.5px; margin-top: 8px; color: #d6e0d8; }
.matchcard { border-color: rgba(245,203,77,.35); background: linear-gradient(rgba(245,203,77,.07), rgba(255,255,255,.015)); box-shadow: rgba(245,203,77,.06) 0 0 0 4px; }
.matchcard .matchhead { margin-bottom: 12px; }
.live { font: 700 12.5px/1 var(--body); color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 0 rgba(255,107,94,.6); animation: livedot 1.4s ease-in-out infinite; }
@keyframes livedot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.btn.kick { position: relative; overflow: hidden; }
.btn.kick::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); animation: sheen 3.2s ease-in-out 1.2s infinite; }
@keyframes sheen { 0% { left: -60%; } 35%, 100% { left: 130%; } }
.chips3 { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.chips3 li { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid var(--line); }
.chips3 b { width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: #1d1600; display: grid; place-items: center; font: 900 14px/1 var(--display); }
.chips3 span { font: 800 15px/1.05 var(--display); text-transform: uppercase; letter-spacing: .3px; }
.chips3 em { font-style: normal; color: var(--gold); }

/* ---- play: the pitch is a camera ---- */
#play .pitchbox.play { height: 168px; transition: height .45s var(--ease); box-shadow: rgba(0,0,0,.4) 0 14px 30px -16px; }
#play .pitchbox.play.big { height: 226px; }
#play .pitchbox.play svg { height: 100% !important; width: 100%; }
@media (min-width: 521px) { #play .pitchbox.play { height: 260px; } #play .pitchbox.play.big { height: 340px; } }
@media (max-height: 700px) and (max-width: 520px) { #play .pitchbox.play { height: 138px; } #play .pitchbox.play.big { height: 190px; } }
.pitchbox .flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.pitchbox .flash[data-kind="red"] { background: radial-gradient(circle at 50% 50%, rgba(255,107,94,.0), rgba(255,107,94,.55)); }
.pitchbox .flash[data-kind="gold"] { background: radial-gradient(circle at 70% 50%, rgba(255,227,154,.65), rgba(245,203,77,.0) 70%); }
.pitchbox .flash.go { animation: flash .7s ease-out; }
@keyframes flash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
.seg { stroke-dasharray: none; stroke-width: 5; opacity: .95; }
.dotpop { transform-box: fill-box; transform-origin: center; animation: dotpop .35s var(--ease); }
@keyframes dotpop { 0% { transform: scale(0); } 70% { transform: scale(1.5); } 100% { transform: scale(1); } }
.net path { fill: none; stroke: rgba(244,241,230,.32); stroke-width: 1.5; }
.net rect { fill: rgba(244,241,230,.05); stroke: var(--chalk); stroke-width: 3; }
.net { transform-box: fill-box; transform-origin: left center; }
.net.ripple { animation: ripple .9s cubic-bezier(.2,.9,.3,1.3); }
@keyframes ripple { 0% { transform: scaleX(1); } 25% { transform: scaleX(1.9) scaleY(1.06); } 55% { transform: scaleX(.85); } 100% { transform: scaleX(1); } }
.bshadow { fill: rgba(0,0,0,.35); }
.dist, .trail, .needtag { z-index: 2; }
.dist { background: linear-gradient(90deg, rgba(7,19,13,.75), rgba(7,19,13,0)); padding: 4px 18px 4px 6px; border-radius: 8px; left: 6px; top: 6px; }
.trail span { width: 16px; height: 16px; border-radius: 5px; box-shadow: rgba(0,0,0,.35) 0 1px 4px; }
.kickhead .tag.shottag { color: #1d1600; background: var(--gold); padding: 4px 10px; border-radius: 999px; box-shadow: rgba(245,203,77,.35) 0 0 18px; }
.clock { transition: color .2s; }
.clock.low { color: var(--coral); text-shadow: rgba(255,107,94,.5) 0 0 16px; }
.clock.beat { animation: beat .35s var(--ease); }
@keyframes beat { 0% { transform: scale(1.45); } 100% { transform: scale(1); } }
.bar.low i, #play.retrying .bar i { background: var(--coral); }
#play.retrying .field input { border-color: var(--coral); }
.field.loading button { opacity: .6; }
.retrybar { margin-top: 12px; padding: 11px 14px; border-radius: 14px; background: linear-gradient(90deg, rgba(255,107,94,.22), rgba(255,107,94,.08)); border: 1px solid rgba(255,107,94,.6); animation: retryin .4s var(--ease); }
.retrybar b { display: block; font: italic 900 26px/1 var(--display); text-transform: uppercase; color: var(--coral); letter-spacing: .4px; }
.retrybar span { display: block; margin-top: 4px; color: #f2d6d2; font-size: 14.5px; }
@keyframes retryin { 0% { opacity: 0; transform: translateY(-6px) scale(.97); } 60% { transform: scale(1.02); } 100% { opacity: 1; transform: none; } }

/* ---- reveal ---- */
.rhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pill { font-size: 15px; padding: 4px 12px; }
.pill.stamp { animation: stamp .45s cubic-bezier(.2,1.4,.4,1) both; }
.wonback { font: 800 13px/1 var(--display); letter-spacing: .8px; text-transform: uppercase; color: var(--coral); border: 1px solid rgba(255,107,94,.6); border-radius: 999px; padding: 5px 9px; }
.reveal .gain { font: italic 900 clamp(60px,17vw,96px)/.9 var(--display); margin: 8px 0 4px; font-variant-numeric: tabular-nums; }
.gain.land { animation: land .4s cubic-bezier(.2,1.5,.4,1); }
@keyframes land { 0% { transform: scale(1.18); } 100% { transform: scale(1); } }
.meter { position: relative; padding-top: 30px; margin: 4px 0 8px; }
.mbar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; gap: 2px; }
.mbar i { display: block; opacity: .9; }
.mk { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.mk b { font: 900 16px/1 var(--display); background: var(--chalk); color: #10170f; border-radius: 8px; padding: 4px 7px; }
.mk::after { content: ""; width: 3px; height: 18px; background: var(--chalk); border-radius: 2px; margin-top: 2px; box-shadow: rgba(0,0,0,.5) 0 0 6px; }
.mends { display: flex; justify-content: space-between; font: 700 10px/1 var(--body); letter-spacing: 1.6px; text-transform: uppercase; color: var(--dim); margin-top: 6px; }
.drift { font-style: italic; color: var(--chalk); border-left: 3px solid var(--gold); padding-left: 10px; margin-top: 10px; font-size: 15px; }
.bigword { font: italic 900 clamp(56px,16vw,92px)/.88 var(--display); text-transform: uppercase; margin: 8px 0 4px; animation: stamp .45s cubic-bezier(.2,1.4,.4,1) both; }
.bigword.lost { color: var(--coral); }
.bigword.slow { color: var(--muted); }
.reveal.band-nutmeg { border-color: rgba(245,203,77,.7); box-shadow: rgba(245,203,77,.18) 0 0 0 4px, rgba(245,203,77,.15) 0 10px 40px; }
.reveal.band-mazy { border-color: rgba(255,162,76,.55); }
.reveal.band-lost, .reveal.band-tackled { border-color: rgba(255,107,94,.4); }
@keyframes stamp { 0% { opacity: 0; transform: scale(2.1) rotate(-4deg); } 60% { opacity: 1; transform: scale(.94) rotate(1deg); } 100% { opacity: 1; transform: none; } }

/* ---- the shot ---- */
.needbig { display: inline-flex; flex-direction: column; gap: 2px; margin-top: 10px; padding: 10px 14px; border-radius: 14px; background: rgba(245,203,77,.12); border: 1px solid rgba(245,203,77,.5); }
.needbig span { font: 700 11px/1 var(--body); letter-spacing: 1.8px; text-transform: uppercase; color: var(--gold2); }
.needbig b { font: italic 900 34px/1 var(--display); color: var(--gold); text-transform: uppercase; }
.needbig.tap { background: rgba(127,224,143,.12); border-color: rgba(127,224,143,.5); }
.needbig.tap b, .needbig.tap span { color: var(--green); }
.shotcard .bigdist { margin-top: 6px; }
.btn.shoot { animation: shootpulse 1.6s ease-in-out infinite; }
@keyframes shootpulse { 0%, 100% { box-shadow: #b08d22 0 6px 0, rgba(245,203,77,.2) 0 10px 24px; } 50% { box-shadow: #b08d22 0 6px 0, rgba(245,203,77,.55) 0 10px 40px; } }
.pitchbox.shotmode .zf.z3 { animation: zonepulse 1.8s ease-in-out infinite; }
@keyframes zonepulse { 0%, 100% { fill: rgba(245,203,77,.16); } 50% { fill: rgba(245,203,77,.32); } }
.goalword { text-shadow: rgba(0,0,0,.35) 0 4px 18px; }
.goalword.pending { opacity: 0; }
.goalword.stamp { animation: stamp .55s cubic-bezier(.2,1.4,.4,1) both; }
.goalword.hit { color: var(--gold); text-shadow: rgba(245,203,77,.45) 0 0 30px; }
.glove { animation: glovein .35s var(--ease) both; }
@keyframes glovein { from { opacity: 0; } to { opacity: 1; } }

/* ---- full time ---- */
.fthero { border-color: rgba(245,203,77,.3); }
.ftscore { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.ftscore .bignum { font-variant-numeric: tabular-nums; }
.ftres { font: italic 900 26px/1 var(--display); text-transform: uppercase; letter-spacing: .4px; padding-bottom: 6px; }
.ftres.hit { color: var(--gold); }
.ftres.post { color: var(--gold2); }
.ftres.miss { color: var(--muted); }
.ftrank { font: italic 900 34px/1 var(--display); color: var(--chalk); margin-top: 10px; }
.ftrank.pending { opacity: 0; }
.ftrank.stamp { animation: stamp .5s cubic-bezier(.2,1.4,.4,1) both; }
.ftline { margin: 2px 0 0; }
.ftgrid { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin-top: 16px; }
.ftgrid .runmap { margin: 0; }
.ftgrid .ftmap { margin: 0; }
@media (max-width: 520px) { .ftgrid { grid-template-columns: 1fr; } .ftres { font-size: 22px; } }

@media (prefers-reduced-motion: reduce) {
  .dlab, .dotpop, .net.ripple, .clock.beat, .retrybar, .pill.stamp, .gain.land, .bigword, .goalword.stamp, .ftrank.stamp, .btn.shoot, .btn.kick::after, .pitchbox.shotmode .zf.z3, .flash.go, .glove, .live i, .demotag::before { animation: none !important; }
  #play .pitchbox.play { transition: none; }
  .goalword.pending, .ftrank.pending { opacity: 1; }
}

/* v1.5 share card buttons */
.row.sharealt { margin-top: 10px; }
.row.sharealt > .btn { flex: 1 1 140px; }
.btn:disabled { opacity: .45; cursor: default; }

/* ---- v1.6: suspense, shot meter, fixes ---- */
html { overflow-x: hidden; overflow-x: clip; }
.kbd { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; font-size: 16px; pointer-events: none; }
.sndcta { display: block; margin: 8px auto 0; background: none; border: 0; color: var(--dim); font-size: 13px; padding: 6px 10px; min-height: 0; }
.sndcta b { color: var(--gold2); text-decoration: underline; text-underline-offset: 3px; }
/* Nothing in the card gives the result away until the ball lands. */
.reveal .pill, .reveal .why, .reveal .drift, .reveal .pop1 { transition: opacity .28s ease; }
.reveal.pending .pill, .reveal.pending .why, .reveal.pending .drift, .reveal.pending .pop1 { opacity: 0; }
.reveal.pending .gain { color: var(--chalk); }
.shotfine { margin-top: 12px; }
/* The shot meter: the answer's rarity climbing towards the line it needs. */
.smeter { margin: 2px 0 14px; }
.sm-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sm-top span { font: 700 11px/1 var(--body); letter-spacing: 1.8px; text-transform: uppercase; color: var(--dim); }
.sm-top b { font: italic 900 44px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--chalk); transition: color .2s; }
.sm-bar { position: relative; height: 16px; border-radius: 99px; background: rgba(255,255,255,.1); margin-top: 26px; }
.sm-bar i { display: block; height: 100%; width: 0; min-width: 0; border-radius: 99px; background: var(--chalk); transition: background-color .2s; }
.sm-need { position: absolute; top: -7px; bottom: -7px; width: 3px; border-radius: 2px; background: var(--gold); transform: translateX(-50%); box-shadow: rgba(245,203,77,.6) 0 0 10px; }
.sm-need em { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: 4px; white-space: nowrap; font: 800 12px/1 var(--display); font-style: normal; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold); }
.sm-need.r em { left: auto; right: -2px; transform: none; }
.sm-need.l em { left: -2px; transform: none; }
.smeter.hit .sm-bar i { background: var(--gold); box-shadow: rgba(245,203,77,.55) 0 0 18px; }
.smeter.hit .sm-top b { color: var(--gold); }
.smeter.short .sm-bar i { background: var(--coral); }
.smeter.short .sm-top b { color: var(--coral); }
/* The hush before the strike. */
.pitchbox.tense::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 78% 50%, rgba(0,0,0,0) 28%, rgba(0,0,0,.6)); animation: tensein .5s ease both; }
@keyframes tensein { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .reveal.pending .pill, .reveal.pending .why, .reveal.pending .drift, .reveal.pending .pop1 { opacity: 1; }
  .pitchbox.tense::before { animation: none; }
}
/* While the shot is in the air the card is just the meter and the space the result lands in. */
.shotreveal.pending .why, .shotreveal.pending .pop1 { display: none; }
/* The result stamps scale in from 2x. Clipped to their card, they cannot widen the page (which is what broke the confetti). */
.reveal, .fthero { overflow: hidden; }