/* Layout: translucent top bar, single content column (max 1180px), match screens use a segmented control for Overview / Video / Team / Players. */
:root {
  --bg:#FFFFFF; --surface:#F2F8F7; --surface-2:#FFFFFF; --fg:#06201D; --fg-2:#4A6663; --fg-3:#8AA19E;
  --line:rgba(1,92,85,.12); --brand:#015C55; --brand-700:#014B45; --brand-50:#E6F2F0; --on-brand:#FFFFFF;
  --home:#015C55; --away:#E07A3F; --ball:#FFD60A; --good:#248A3D;
  --pitch:#EAF3F1; --pitch-line:#BFD9D4; --glass:rgba(255,255,255,.72); --scrim:rgba(0,0,0,.28);
  --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 28px rgba(0,0,0,.07);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  /* Brand world shared with the landing. The Matches screen uses these in every theme: teal and white only. */
  --teal:#015C55; --teal-700:#014B45; --teal-900:#012F2B; --teal-500:#0B8478; --mint:#8FE8DA; --mint-soft:#D3F5EF;
  --paper:#F2F8F7; --ink:#06201D; --ink-2:#4A6663; --tline:rgba(1,92,85,.14);
  --display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1);
}
* { box-sizing:border-box }
html { background:linear-gradient(var(--teal) 0 520px, #fff 520px); color-scheme:light }
body { margin:0; background:transparent; color:var(--fg); font:15px/1.47 var(--body); -webkit-font-smoothing:antialiased; letter-spacing:-.005em }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0 }
button:focus-visible, a:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline:3px solid color-mix(in srgb,var(--brand) 45%,transparent); outline-offset:2px; border-radius:10px }
.num { font-variant-numeric:tabular-nums }

/* Top bar (glass) */
  backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); border-bottom:1px solid var(--line) }

main { max-width:1180px; margin:0 auto; padding:28px 20px 80px }

/* Buttons: feedback on press, not release */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 18px; border-radius:999px;
  font-weight:600; font-size:15px; transition:transform .12s var(--ease), background .2s, opacity .2s; user-select:none; white-space:nowrap }
.btn:active { transform:scale(.96) }
.btn-primary { background:var(--brand); color:var(--on-brand) }
.btn-primary:hover { background:var(--brand-700) }
.btn-ghost { color:var(--brand); padding:0 10px }
.btn-lg { height:50px; padding:0 26px; font-size:17px }
.btn[disabled] { opacity:.4; pointer-events:none }

h1 { font-size:34px; line-height:1.1; letter-spacing:-.025em; font-weight:700; margin:0; text-wrap:balance }
h2 { font-size:22px; line-height:1.2; letter-spacing:-.018em; font-weight:600; margin:0 }
h3 { font-size:17px; letter-spacing:-.012em; font-weight:600; margin:0 }
.sub { color:var(--fg-2); margin:6px 0 0 }
.label { font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-2) }

.card { background:var(--surface); border-radius:16px; padding:20px }

.sw { width:10px; height:10px; border-radius:50%; display:inline-block; flex:none }
.muted { color:var(--fg-2); font-size:13px }

/* Library (Matches). Layout: a teal hero with the title, the main action and a live tracking feed; a white sheet slides over it
   holding a bento library (the newest match as a teal feature card, the new-analysis tile beside it) and the four-step flow.
   Teal and white in every theme, like the landing. Entrance animations use fill-mode backwards so hover transforms still apply after them. */
body:is([data-route="home"],[data-route="upload"],[data-route="processing"]) { background:linear-gradient(var(--teal) 0 50%, #fff 50% 100%) }
body:is([data-route="home"],[data-route="upload"],[data-route="processing"]) { font-family:var(--body) }
body:is([data-route="home"],[data-route="upload"],[data-route="processing"]) main { max-width:none; padding:0 }
body:is([data-route="home"],[data-route="upload"],[data-route="processing"]) .view { animation:none }
body:is([data-route="home"],[data-route="upload"],[data-route="processing"]) :focus-visible { outline-color:var(--teal-500) }
body:is([data-route="home"],[data-route="upload"],[data-route="processing"]) .hero :focus-visible, body:is([data-route="home"],[data-route="upload"],[data-route="processing"]) .nav :focus-visible { outline-color:var(--mint) }
@keyframes rise { from { opacity:0; transform:translateY(18px) } }
@keyframes charUp { from { transform:translateY(110%) rotate(5deg) } }
@keyframes feedIn { from { opacity:0; transform:translateY(32px) scale(.96) } }
@keyframes sheetUp { from { transform:translateY(96px) } }
@keyframes shoot { 0% { transform:translateY(0) } 45% { transform:translateY(-150%); opacity:0 } 46% { transform:translateY(150%); opacity:0 } 100% { transform:translateY(0); opacity:1 } }
@keyframes ants { to { stroke-dashoffset:-5 } }
.rise { animation:rise .8s calc(.25s + var(--i,0) * 90ms) var(--ease-out) backwards }
.lib-wrap { max-width:1180px; margin:0 auto; padding-inline:20px }

/* Hero: mowing stripes and one centre-circle arc, nothing decorative that isn't from a pitch */
.hero { position:relative; overflow:hidden; isolation:isolate; color:#fff; padding:116px 0 132px }
.hero::before { content:""; position:absolute; inset:0; z-index:-1; background:repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 90px, transparent 90px 180px) }
.hero::after { content:""; position:absolute; z-index:-1; width:860px; aspect-ratio:1; left:-380px; bottom:-560px; border-radius:50%; border:1.5px solid rgba(255,255,255,.09) }
.hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); gap:56px; align-items:center }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font:600 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--mint) }
.hero h1 { display:flex; align-items:flex-start; margin:14px 0 0; font:800 clamp(64px,9.4vw,132px)/.9 var(--display); letter-spacing:-.055em }
.hero h1 .ch { display:inline-block; transform-origin:0 100%; animation:charUp 1s calc(.15s + var(--i) * 45ms) cubic-bezier(.2,.9,.1,1) backwards }
.hero h1 sup { margin:.42em 0 0 .3em; padding:6px 10px; border-radius:999px; border:1.5px solid rgba(143,232,218,.5); color:var(--mint); font:600 clamp(14px,1.5vw,18px)/1 var(--body); letter-spacing:0 }
.lede { margin:22px 0 0; max-width:28em; font-size:clamp(17px,1.5vw,19px); line-height:1.5; color:rgba(255,255,255,.8) }

/* Keycap button: a white face on a mint edge. It rises on hover and sinks flush on press */
.key { --edge:5px; --y:0px; display:inline-flex; align-items:center; gap:14px; height:58px; padding:0 9px 0 24px; border-radius:18px; background:#fff; color:var(--teal);
  font:700 18px/1 var(--display); letter-spacing:-.02em; white-space:nowrap; user-select:none;
  box-shadow:0 var(--edge) 0 #7FD6C8, 0 calc(var(--edge) + 18px) 34px -6px rgba(0,20,18,.5);
  transform:translateY(var(--y)); transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out) }
.key:active { --edge:0px; --y:5px; transition-duration:.07s }
.key kbd { font:600 12px/1 var(--body); border:0; border-radius:6px; padding:5px 7px; color:var(--teal-500); background:var(--mint-soft) }
@media (hover:none) { .key kbd { display:none } }
.key-ico { width:40px; height:40px; border-radius:12px; background:var(--teal); color:#fff; display:grid; place-items:center; overflow:hidden }
.mint-link { display:inline-flex; align-items:center; gap:6px; height:44px; color:var(--mint); font:600 16px/1 var(--display); letter-spacing:-.01em;
  background:linear-gradient(currentColor,currentColor) 0 calc(100% - 8px) / 0 1.5px no-repeat; transition:background-size .35s var(--ease-out), color .2s }
.mint-link svg { transition:transform .25s var(--ease-out) }
@media (hover:hover) and (pointer:fine) {
  .key:hover { --edge:7px; --y:-2px }
  .key:hover .key-ico svg { animation:shoot .55s var(--ease-out) }
  .mint-link:hover { color:#fff; background-size:calc(100% - 20px) 1.5px }
  .mint-link:hover svg { transform:translateX(4px) }
}

/* Sheet */
.lib { position:relative; z-index:2; margin-top:-48px; min-height:60vh; padding:64px 0 120px; border-radius:44px 44px 0 0; background:#fff; color:var(--ink);
  --pitch:#E6F2F0; --pitch-line:#BFD9D4; animation:sheetUp 1s .12s var(--ease-out) backwards }

/* Job progress bar (processing screen) */
.jbar { display:block; height:6px; border-radius:6px; background:rgba(255,255,255,.16); overflow:hidden }
.jbar i { display:block; height:100%; border-radius:6px; background:var(--mint); transform-origin:left; transform:scaleX(var(--p,0)); transition:transform .3s linear }

/* Upload + Processing: same teal hero and white sheet as Matches */
body:is([data-route="upload"],[data-route="processing"]) .sheet { --bg:#fff; --surface:#F2F8F7; --surface-2:#fff; --fg:#06201D; --fg-2:#4A6663; --fg-3:#8AA19E; --line:rgba(1,92,85,.14); --brand:#015C55; --brand-50:#E6F2F0; --on-brand:#fff; --scrim:rgba(1,47,43,.5); font-family:var(--body); color-scheme:light }
body:is([data-route="upload"],[data-route="processing"]) .sheet h2 { font-family:var(--display); letter-spacing:-.03em }
body:is([data-route="upload"],[data-route="processing"]) .sheet .btn-primary { background:var(--teal); color:#fff; border-radius:14px; font-family:var(--display); letter-spacing:-.01em; box-shadow:0 4px 0 var(--teal-900); transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out) }
body:is([data-route="upload"],[data-route="processing"]) .sheet .btn-primary:active { transform:translateY(4px); box-shadow:0 0 0 var(--teal-900) }
.hero.compact { padding:104px 0 112px }
.hero.compact .hero-grid { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) }
.hero.compact h1 { display:block; font-size:clamp(46px,7vw,100px); margin-top:16px; line-height:.95; text-wrap:balance }
.hero.compact .lede { max-width:30em }
.hero .back { margin:0 0 22px -4px }
.stepper { display:flex; align-items:center; gap:10px; margin-top:34px; font:600 14px/1 var(--body); color:rgba(255,255,255,.6) }
.stepper b { display:inline-flex; align-items:center; gap:8px; font-weight:600 }
.stepper b i { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font:700 11px/1 var(--body); font-style:normal; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3) }
.stepper b.on { color:#fff } .stepper b.on i { background:#fff; color:var(--teal); box-shadow:none }
.stepper hr { flex:none; width:28px; height:2px; border:0; border-radius:2px; margin:0; background:rgba(255,255,255,.22) }
.key.on-light { background:var(--teal); color:#fff; box-shadow:0 var(--edge) 0 var(--teal-900), 0 calc(var(--edge) + 14px) 28px -8px rgba(1,47,43,.45) }
.key.on-light .key-ico { background:var(--mint-soft); color:var(--teal) }
.key.soft { background:var(--mint-soft); color:var(--teal); padding:0 24px; box-shadow:0 var(--edge) 0 #A9E6DB }
.key.sm { height:50px; border-radius:15px; font-size:16px; cursor:pointer }
.key[disabled] { opacity:.4; pointer-events:none }

.updrop { position:relative; display:grid; justify-items:center; gap:12px; padding:48px 24px 44px; text-align:center; border-radius:34px; background:var(--paper); color:var(--ink);
  box-shadow:inset 0 0 0 2px rgba(1,92,85,.18); transition:background-color .25s, box-shadow .25s, transform .35s var(--ease-out) }
.updrop.over { background:var(--mint-soft); box-shadow:inset 0 0 0 2px var(--teal); transform:scale(1.01) }
.updrop-art { width:min(380px,76%); margin-bottom:6px }
.updrop-art svg { display:block; width:100%; height:auto; overflow:visible }
.updrop-art .ln { fill:none; stroke:var(--teal); stroke-width:.6 }
.updrop-art .ants { fill:rgba(143,232,218,.14); stroke:var(--teal-500); stroke-width:.7; stroke-dasharray:3 2; animation:ants .9s linear infinite }
.updrop-art .arrow { transform-box:fill-box; transform-origin:center; animation:float 2.4s ease-in-out infinite }
@keyframes float { 50% { transform:translateY(-3px) } }
.updrop h2 { font:800 clamp(26px,3vw,34px)/1.05 var(--display); letter-spacing:-.035em }
.updrop p { margin:0; color:var(--ink-2) }
.updrop-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:14px }
.frow { display:flex; align-items:center; gap:16px; margin-top:20px; padding:16px 18px; border-radius:24px; background:var(--paper); animation:rise .6s var(--ease-out) backwards }
.frow .name { font:700 18px/1.2 var(--display); letter-spacing:-.015em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.tip-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:20px }
.tip-row div { padding:20px 22px; border-radius:24px; background:var(--paper); color:var(--ink-2); font-size:15px }
.tip-row b { display:block; margin-bottom:4px; color:var(--ink); font:700 18px/1.2 var(--display); letter-spacing:-.02em }

.run-card { padding:26px 28px 28px; border-radius:30px; background:rgba(1,47,43,.55); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 40px 80px rgba(0,20,18,.32); display:grid; gap:18px; animation:feedIn 1s .3s var(--ease-out) backwards }
.run-card small { display:block; font:600 11px/1 var(--body); letter-spacing:.1em; text-transform:uppercase; color:var(--mint) }
.run-pct { margin:0; font:800 clamp(72px,9vw,132px)/.9 var(--display); letter-spacing:-.06em }
.run-pct span { font-size:.4em; letter-spacing:-.02em; margin-left:.06em; color:var(--mint) }
.run-meta { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px 16px; font-size:14px; color:rgba(255,255,255,.72) }
.run-card .jbar i { transition:transform .12s linear }
.psteps { list-style:none; margin:0; padding:0; display:grid; gap:6px }
.ps { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:16px; padding:18px 20px; border-radius:22px; transition:background-color .3s, color .3s }
.ps-dot { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; box-shadow:inset 0 0 0 2px var(--tline); color:#fff; font-size:15px; transition:background-color .3s, box-shadow .3s }
.ps-label { font:700 clamp(18px,2vw,22px)/1.2 var(--display); letter-spacing:-.02em }
.ps-bar { display:none; height:6px; margin-top:12px; border-radius:6px; background:var(--tline); overflow:hidden }
.ps-bar i { display:block; height:100%; border-radius:6px; background:var(--teal); transform-origin:left; transform:scaleX(var(--p,0)) }
.ps-pct { font-weight:600; color:var(--ink-2) }
.ps.wait { color:#8AA19E }
.ps.active { background:var(--paper) }
.ps.active .ps-dot { box-shadow:inset 0 0 0 2px var(--tline); background:conic-gradient(var(--teal) 0 25%, transparent 25%); animation:spinDot 1s linear infinite }
.ps.active .ps-bar { display:block }
.ps.done .ps-dot { background:var(--teal); box-shadow:none }
.ps.done .ps-pct { color:var(--teal) }
@keyframes spinDot { to { transform:rotate(360deg) } }
.proc-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px }

/* Nav: the dashboard's floating pill. A mint highlight follows the pointer, the badge tips on hover, and the whole bar tucks away while you scroll down */
.nav { position:fixed; inset:0 0 auto 0; z-index:50; padding:calc(14px + env(safe-area-inset-top,0px)) 12px 0; display:flex; justify-content:center; pointer-events:none;
  transition:transform .55s var(--ease-out) }
/* view-transition-name lives on the glass slab, not this wrapper: a named ancestor becomes a backdrop root and the glass would blur nothing (teal shows through) */
.nav-in { view-transition-name:site-nav }
.nav.away { transform:translateY(-140%) } .nav.away:focus-within { transform:none }
.nav-in { pointer-events:auto; display:flex; align-items:center; gap:10px; padding:6px; background:#fff; border-radius:999px; border:1px solid rgba(1,92,85,.1);
  box-shadow:0 4px 0 rgba(1,47,43,.22), 0 14px 30px rgba(0,25,22,.18); animation:navIn .75s .1s cubic-bezier(.34,1.45,.64,1) backwards }
@keyframes navIn { from { opacity:0; transform:translateY(-22px) scale(.92) } }
.nav a { text-decoration:none }
.logo { display:flex; align-items:center; gap:12px; padding-right:10px; color:var(--teal); font:700 20px/1 var(--display); letter-spacing:-.025em; white-space:nowrap }
.logo .badge { width:46px; height:46px; border-radius:50%; overflow:hidden; background:var(--teal); display:block; transition:translate .32s cubic-bezier(.77,0,.175,1), rotate .32s var(--ease-out), scale .32s var(--ease-out) }
.logo img { width:100%; height:100%; display:block; transform:scale(1.32) }
.nav-links { position:relative; display:flex; align-items:center; gap:4px; font:600 16px/1 var(--display); letter-spacing:-.01em }
.nav-links a, .nav-links button { position:relative; z-index:1; padding:12px; border-radius:999px; color:var(--ink); font:inherit; letter-spacing:inherit; transition:color .2s }
.nav-links [aria-current] { color:var(--teal) }
.nav-links [aria-current]::after { content:""; position:absolute; left:50%; bottom:5px; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:var(--teal-500) }
.nav-hl { position:absolute; left:0; top:0; z-index:0; border-radius:999px; background:var(--mint-soft); opacity:0; pointer-events:none;
  transition:transform .38s var(--ease-out), width .38s var(--ease-out), height .38s var(--ease-out), opacity .2s }
.nav-hl.fresh { transition:opacity .2s }
.nav-cta { --edge:3px; --y:0px; display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 18px 0 14px; border-radius:999px; background:var(--teal); color:#fff;
  font:600 16px/1 var(--display); letter-spacing:-.01em; white-space:nowrap; box-shadow:0 var(--edge) 0 var(--teal-900); transform:translateY(var(--y));
  transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background-color .2s }
.nav-cta svg { transition:rotate .35s var(--ease-out) }
.nav-cta:active { --edge:0px; --y:3px; transition-duration:.07s }
body[data-route="upload"] .nav-cta { display:none } /* you're already on New analysis */
/* Recent analyses: replaces the New analysis button on the upload screen */
.recent { position:relative }
body[data-route="upload"] .recent #recentBtn { display:inline-flex }
.recent-menu { position:absolute; top:calc(100% + 14px); right:0; z-index:5; width:min(340px,86vw); padding:8px; border-radius:22px; background:#fff; color:var(--ink); font-family:var(--body);
  box-shadow:0 4px 0 rgba(1,47,43,.18), 0 22px 44px rgba(0,25,22,.28); transform-origin:top right; animation:recentIn .22s var(--ease-out) }
@keyframes recentIn { from { opacity:0; transform:translateY(-6px) scale(.97) } }
.recent-menu[hidden] { display:none }
.recent-item { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:12px 14px; border:0; border-radius:16px; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; text-decoration:none }
.recent-item:hover, .recent-item:focus-visible { background:var(--paper) }
.recent-item b { display:block; font:700 15px/1.25 var(--display); letter-spacing:-.01em }
.recent-item small { display:block; margin-top:3px; color:var(--ink-2); font-size:13px }
.recent-chip { flex:none; padding:5px 10px; border-radius:999px; font-size:12px; font-weight:600; background:var(--mint-soft); color:var(--teal) }
.recent-chip.busy { background:var(--teal-900); color:#fff }
.recent-empty { padding:14px; color:var(--ink-2); font-size:14px }
.recent-all { display:block; margin-top:4px; padding:12px 14px 8px; border-top:1px solid var(--tline); color:var(--teal); font-weight:600; font-size:14px; text-decoration:none }
@media (prefers-reduced-motion:reduce) { .recent-menu { animation:none } }
@media (hover:hover) and (pointer:fine) {
  .logo:hover .badge { translate:0 -4px; rotate:18deg; scale:1.06 }
  .nav-links a:hover, .nav-links button:hover { color:var(--teal) }
  .nav-cta:hover { --edge:5px; --y:-2px; background:var(--teal-700) } .nav-cta:hover svg { rotate:90deg }
}
@media (max-width:720px) {
  .nav-links a, .nav-links button:not([aria-current]) { display:none } .logo-t { display:none } .logo { padding-right:0 }
}

/* Nav: white liquid glass (Apple-style). A thin fill so the material reads as glass, a neutral (desaturated) backdrop so the teal
   never tints it, a top specular glow, a light sheen that slides across on hover, light-catching lens edges and a gradient rim
   brightest at the top-left and bottom-right corners. The teal button keeps a raised relief. */
.nav-in { position:relative; isolation:isolate; gap:6px; padding:7px 8px; border:1px solid rgba(255,255,255,.28);
  background:radial-gradient(120% 95% at 50% -35%, rgba(255,255,255,.8), rgba(255,255,255,0) 62%), linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.4));
  -webkit-backdrop-filter:blur(16px) grayscale(1) brightness(2.6) contrast(.85); backdrop-filter:blur(16px) grayscale(1) brightness(2.6) contrast(.85);
  box-shadow:0 1px 2px rgba(0,30,27,.12), 0 10px 24px -4px rgba(0,30,27,.34), 0 26px 50px -14px rgba(0,30,27,.4),
    inset 0 1px 1px rgba(255,255,255,1), inset 0 -1px 1px rgba(255,255,255,.65),
    inset 4px 4px 10px -5px rgba(255,255,255,.95), inset -4px -4px 10px -5px rgba(255,255,255,.75),
    inset 0 -14px 22px -14px rgba(0,40,36,.18) }
.nav-in::before { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:linear-gradient(112deg, transparent 30%, rgba(255,255,255,.75) 45%, rgba(255,255,255,.18) 54%, transparent 66%) 130% 0 / 260% 100% no-repeat;
  transition:background-position 1.1s var(--ease-out) }
.nav-in::after { content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; padding:1.5px; pointer-events:none;
  background:linear-gradient(135deg, #FFFFFF, rgba(255,255,255,.3) 32%, rgba(255,255,255,.08) 55%, rgba(255,255,255,.35) 78%, #FFFFFF);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0) }
.logo { color:var(--teal-700); gap:11px; padding-right:12px }
.logo .badge { width:46px; height:46px; background:var(--teal) }
.nav-links { gap:2px }
.nav-links a, .nav-links button { color:#34524E; padding:12px 14px; font-weight:600 }
.nav-links [aria-current], .nav-links a:hover { color:var(--teal-900) }
.nav-links [aria-current]::after { display:none }
.nav-hl { background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.5));
  box-shadow:0 2px 8px rgba(0,40,36,.14), inset 0 1px 1px #FFFFFF, inset 0 -1px 1px rgba(255,255,255,.6), inset 0 0 0 1px rgba(255,255,255,.55);
  transition:transform .38s var(--ease-out), width .38s var(--ease-out), height .38s var(--ease-out), opacity .2s, box-shadow .3s, background .3s }
.nav-hl.pressed { background:rgba(225,229,229,.6); box-shadow:inset 0 2px 6px rgba(0,30,27,.18), inset 0 -1px 1px rgba(255,255,255,.8) }
.nav-cta { background:linear-gradient(145deg,#0E8F82,#014B45); height:46px;
  box-shadow:5px 7px 14px rgba(1,47,43,.42), -3px -3px 8px rgba(255,255,255,.85), inset 1.5px 1.5px 2px rgba(255,255,255,.32), inset -2px -2px 4px rgba(0,0,0,.22) }
.nav-cta:active { transform:none; background:linear-gradient(145deg,#014B45,#0A7A6F); box-shadow:inset 4px 4px 9px rgba(0,0,0,.42), inset -2px -2px 5px rgba(255,255,255,.14) }
@media (hover:hover) and (pointer:fine) {
  .nav-in:hover::before { background-position:-30% 0 }
  .nav-links a:hover, .nav-links button:hover { color:var(--teal-900) }
  .nav-cta:hover { background:linear-gradient(145deg,#12A092,#016056); transform:translateY(-1px); box-shadow:6px 9px 16px rgba(1,47,43,.45), -3px -3px 8px rgba(255,255,255,.85), inset 1.5px 1.5px 2px rgba(255,255,255,.4), inset -2px -2px 4px rgba(0,0,0,.2) }
}
@media (max-width:700px) { .nav-in { padding:5px 6px; gap:4px } .nav-links a, .nav-links button { padding:10px 9px } }
@media (prefers-reduced-transparency: reduce) { .nav-in { background:#FFFFFF; -webkit-backdrop-filter:none; backdrop-filter:none } }
@media (prefers-contrast: more) { .nav-in { background:#FFFFFF; -webkit-backdrop-filter:none; backdrop-filter:none; border-color:rgba(0,30,27,.35) } }
@media (prefers-reduced-motion: reduce) { .nav-in::before { transition:none } }

/* Report screens: same teal header and white sheet, tabs on the teal */
body[data-route="match"] main { max-width:none; padding:0 }
body[data-route="match"] .view { animation:none }
body[data-route="match"] .hero :focus-visible { outline-color:var(--mint) }
.lib h3, .lib .label { font-family:var(--display) } .lib h3 { letter-spacing:-.02em }
.hero.slim { padding:104px 0 92px }
.hero .match-head { margin-bottom:0 }
.hero .crest { box-shadow:inset 0 0 0 2px rgba(255,255,255,.7); width:40px; height:40px; border-radius:12px }
.hero .score .team { color:#fff; font:700 clamp(18px,2vw,24px)/1.1 var(--display); letter-spacing:-.025em }
.hero .score .big { font:800 clamp(40px,5vw,64px)/1 var(--display); letter-spacing:-.04em }
.hero .toolbar { margin:26px 0 0 }
.hero .muted { color:rgba(255,255,255,.7) }
.hero .seg { background:rgba(255,255,255,.14) }
.hero .seg button { color:rgba(255,255,255,.78) }
.hero .seg button[aria-selected="true"] { color:var(--teal) }
.hero .seg .pill { background:#fff; box-shadow:0 2px 0 rgba(1,47,43,.25) }

/* Page-to-page transition: the next screen opens as a circle from wherever you clicked */
::view-transition-old(root), ::view-transition-new(root) { animation:none; mix-blend-mode:normal }
::view-transition-old(root) { animation:vtOut .7s var(--ease-out) both }
::view-transition-new(root) { z-index:2 }
@keyframes vtOut { to { transform:scale(.96); filter:brightness(.78) } }
@media (max-width:960px) { .hero.compact .hero-grid { grid-template-columns:1fr } .tip-row { grid-template-columns:1fr } }
@media (max-width:640px) { .updrop { padding:32px 16px 28px } .frow { flex-wrap:wrap } .stepper b span { display:none } .ps { padding:14px 12px; gap:12px } }

.settled .rise, .settled .frow, .settled .run-card, .settled .hero h1 .ch, .settled .lib { animation:none }

@media (max-width:960px) {
  .hero-grid { grid-template-columns:1fr; gap:44px }
}
@media (max-width:640px) {
  .hero { padding:24px 0 112px }
  .lib { border-radius:32px 32px 0 0; padding-top:44px }
}

/* Upload */
.drop { margin-top:28px; border:2px dashed color-mix(in srgb,var(--brand) 35%,var(--line)); border-radius:24px; padding:56px 24px; text-align:center;
  background:color-mix(in srgb,var(--brand-50) 55%,transparent); transition:background .2s, border-color .2s, transform .2s var(--ease) }
.drop.over { background:var(--brand-50); border-color:var(--brand); transform:scale(1.01) }
.drop .icon { width:56px; height:56px; margin:0 auto 14px; border-radius:16px; background:var(--brand); color:var(--on-brand); display:grid; place-items:center }
.drop p { margin:6px 0 0; color:var(--fg-2) }
.ring { width:36px; height:36px; flex:none }

/* Processing */
.step { display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:12px; padding:14px 14px; border-radius:14px }
.step.active { background:var(--surface-2); box-shadow:var(--shadow) }
.step .st { width:24px; height:24px; border-radius:50%; border:2px solid var(--fg-3); display:grid; place-items:center; font-size:13px }
.step.done .st { background:var(--brand); border-color:var(--brand); color:var(--on-brand) }
.step.active .st { border-color:var(--brand); border-top-color:transparent; animation:spin .9s linear infinite }
@keyframes spin { to { transform:rotate(360deg) } }
.step.wait { color:var(--fg-3) }
.bar { height:6px; border-radius:6px; background:color-mix(in srgb,var(--fg) 8%,transparent); overflow:hidden }
.bar > i { display:block; height:100%; background:var(--brand); border-radius:6px; transition:width .3s var(--ease) }

/* Match header + segmented control */
.match-head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px }
.score { display:flex; align-items:center; gap:18px; flex-wrap:wrap }
.score .team { display:flex; align-items:center; gap:10px; font-size:20px; font-weight:600; letter-spacing:-.015em }
.score .big { font-size:34px; font-weight:700; letter-spacing:-.02em }
.crest { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:#fff; font-size:13px; font-weight:700 }
.seg { display:inline-flex; background:var(--surface); border-radius:11px; padding:3px; gap:2px; position:relative; max-width:100%; overflow-x:auto }
.seg button { position:relative; z-index:1; padding:6px 16px; border-radius:8px; font-size:14px; font-weight:500; color:var(--fg-2); white-space:nowrap; transition:color .2s }
.seg button[aria-selected="true"] { color:var(--fg); font-weight:600 }
.seg .pill { position:absolute; z-index:0; top:3px; bottom:3px; border-radius:8px; background:var(--surface-2); box-shadow:0 1px 3px rgba(0,0,0,.12); transition:left .32s var(--ease), width .32s var(--ease) }
.toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:22px }

/* Overview */
.tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:14px }
.tile { background:var(--surface); border-radius:16px; padding:18px 18px 16px; display:grid; gap:10px; min-width:0 }
.tile .v { display:flex; justify-content:space-between; align-items:baseline; gap:8px }
.tile .v b { font-size:28px; font-weight:700; letter-spacing:-.02em }
.tile .v span { font-size:15px; color:var(--fg-2); font-weight:500 }
.split { display:flex; height:6px; border-radius:6px; overflow:hidden; gap:2px }
.split i { display:block; height:100% }
.cols { display:grid; grid-template-columns:1.35fr 1fr; gap:20px; margin-top:20px; align-items:start }
.stack { display:grid; gap:20px; min-width:0 }
.cmp { display:grid; gap:14px }
.cmp-row { display:grid; gap:6px }
.cmp-top { display:grid; grid-template-columns:70px 1fr 70px; align-items:center; font-size:14px }
.cmp-top .l { font-weight:600 } .cmp-top .r { font-weight:600; text-align:right } .cmp-top .c { text-align:center; color:var(--fg-2) }
.cmp-bars { display:grid; grid-template-columns:1fr 1fr; gap:4px }
.cmp-bars > div { height:6px; background:color-mix(in srgb,var(--fg) 7%,transparent); border-radius:6px; overflow:hidden; display:flex }
.cmp-bars > div:first-child { justify-content:flex-end }
.cmp-bars i { display:block; height:100%; border-radius:6px; transition:width .7s var(--ease) }
.group-title { margin:18px 0 2px }
.link-row { display:flex; justify-content:space-between; align-items:center; font-size:14px; padding:6px 0; color:var(--fg-2) }
.disclose { width:100%; display:flex; justify-content:space-between; align-items:center; padding:14px 0 0; margin-top:14px; border-top:1px solid var(--line); color:var(--brand); font-weight:600 }
.disclose svg { transition:transform .3s var(--ease) }
.disclose[aria-expanded="true"] svg { transform:rotate(180deg) }
.mini-pitches { display:grid; grid-template-columns:1fr 1fr; gap:14px }
.mini { text-align:left; display:grid; gap:8px; transition:transform .15s var(--ease) }
.mini:active { transform:scale(.97) }
.mini svg { border-radius:12px; display:block; width:100%; height:auto }
.moments { display:grid }
.moment { display:grid; grid-template-columns:52px 22px 1fr auto; gap:10px; align-items:center; padding:11px 8px; border-radius:12px; text-align:left; transition:background .15s }
.moment:hover { background:var(--surface-2) } .moment:active { transform:scale(.99) }
.moment .t { color:var(--fg-2); font-size:13px }
.moment .ico { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:11px; color:#fff; font-weight:700 }
/* Model-made reports: what the engine measured besides the stats, and its annotated video */
.facts { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 16px; margin:0; font-size:14px }
.facts dt { color:var(--fg-2) } .facts dd { margin:0; font-weight:600; text-align:right }
.engine-video { display:block; width:100%; aspect-ratio:16 / 9; border-radius:16px; background:#000 }

/* Video analysis (dark stage by default) */
.video-wrap { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:20px; align-items:start }
.stage { background:#012F2B; border-radius:20px; overflow:hidden; position:relative; color:#F5F5F7 }
.stage canvas { display:block; width:100%; height:auto; aspect-ratio:105/68; touch-action:none; cursor:crosshair }
.overlay-bar { position:absolute; top:12px; left:12px; right:12px; display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; pointer-events:none }
.overlay-bar > * { pointer-events:auto }
.glass { background:rgba(30,30,32,.6); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); border:1px solid rgba(255,255,255,.12); border-radius:12px }
.toggles { display:flex; padding:3px; gap:2px }
.toggles button { font-size:12px; font-weight:600; padding:5px 10px; border-radius:9px; color:rgba(255,255,255,.6); transition:background .15s, color .15s }
.toggles button[aria-pressed="true"] { background:rgba(255,255,255,.18); color:#fff }
.sim-note { font-size:11px; padding:6px 10px; color:rgba(255,255,255,.7) }
.controls { padding:12px 16px 16px; display:grid; gap:10px; background:#012F2B }
.ctrl-row { display:flex; align-items:center; gap:12px }
.play { width:38px; height:38px; border-radius:50%; background:#fff; color:#000; display:grid; place-items:center; flex:none; transition:transform .12s var(--ease) }
.play:active { transform:scale(.92) }
.time { font-size:13px; color:rgba(255,255,255,.7); white-space:nowrap }
.timeline { position:relative; height:34px; flex:1; cursor:pointer; touch-action:none }
.tl-track { position:absolute; left:0; right:0; top:15px; height:4px; border-radius:4px; background:rgba(255,255,255,.16) }
.tl-fill { position:absolute; left:0; top:15px; height:4px; border-radius:4px; background:#fff }
.tl-head { position:absolute; top:9px; width:16px; height:16px; margin-left:-8px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.5); transition:transform .12s }
.timeline:active .tl-head { transform:scale(1.25) }
.tl-tick { position:absolute; top:13px; width:2px; height:8px; margin-left:-1px; border-radius:1px; background:rgba(255,255,255,.28) }
.tl-ev { position:absolute; top:4px; width:12px; height:12px; margin-left:-6px; border-radius:50%; border:2px solid #012F2B }
.legend { display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:rgba(255,255,255,.6) }
.legend span { display:inline-flex; gap:6px; align-items:center }
.side { display:grid; gap:14px; min-width:0 }
.kbd { font-size:12px; color:var(--fg-2); line-height:1.9 }
kbd { font:600 11px var(--font); background:var(--surface-2); border:1px solid var(--line); border-radius:5px; padding:1px 6px }
.event-now { font-size:14px; min-height:42px }
.pinfo { display:flex; gap:12px; align-items:center }
.jersey { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700; font-size:14px; flex:none }

/* Team + players */
.pitch-big { background:var(--surface); border-radius:20px; padding:16px }
.pitch-big svg { display:block; width:100%; height:auto }
.pitch-legend { display:flex; gap:18px; flex-wrap:wrap; margin-top:12px; font-size:13px; color:var(--fg-2) }
.pitch-legend span { display:inline-flex; gap:6px; align-items:center }
.table-wrap { background:var(--surface); border-radius:18px; overflow-x:auto }
table { width:100%; border-collapse:collapse; font-size:14px; min-width:720px }
th { text-align:left; font-weight:600; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--fg-2); padding:14px 14px 10px; white-space:nowrap }
th button { display:inline-flex; gap:4px; align-items:center; letter-spacing:inherit; text-transform:inherit; font-weight:inherit }
th[aria-sort] button { color:var(--brand) }
td { padding:10px 14px; border-top:1px solid var(--line); white-space:nowrap }
tbody tr { cursor:pointer; transition:background .15s }
tbody tr:hover { background:var(--surface-2) }
td.r, th.r { text-align:right }
.pcell { display:flex; align-items:center; gap:10px }
.pcell .jersey { width:30px; height:30px; font-size:12px }
.spark { display:block }

/* Sheet */
.scrim { position:fixed; inset:0; background:var(--scrim); z-index:40; opacity:0; transition:opacity .3s var(--ease) }
.scrim.show { opacity:1 }
.sheet { position:fixed; z-index:41; left:50%; bottom:0; width:min(640px,100%); max-height:88vh; overflow:auto; background:var(--bg);
  border-radius:22px 22px 0 0; padding:8px 24px calc(28px + env(safe-area-inset-bottom,0px)); box-shadow:0 -10px 40px rgba(0,0,0,.18);
  transform:translate(-50%,105%); transition:transform .42s cubic-bezier(.22,1,.36,1) }
.sheet.show { transform:translate(-50%,0) }
.sheet.dragging { transition:none }
.grabber { width:100%; padding:8px 0 14px; display:grid; place-items:center; cursor:grab; touch-action:none }
.grabber i { width:38px; height:5px; border-radius:3px; background:var(--fg-3); opacity:.6 }
.sheet-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px }
.field { display:grid; gap:8px; margin-bottom:18px }
.field label { font-size:13px; font-weight:600; color:var(--fg-2) }
.input { height:46px; border-radius:12px; border:1px solid var(--line); background:var(--surface); padding:0 14px; font:inherit; color:var(--fg); width:100% }
.input:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 18%,transparent) }
.team-row { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:end }
.swatches { display:flex; gap:8px; height:46px; align-items:center }
.swatch { width:30px; height:30px; border-radius:50%; border:2px solid var(--bg); box-shadow:0 0 0 1px var(--line); transition:transform .12s var(--ease), box-shadow .15s }
.swatch:active { transform:scale(.9) }
.swatch[aria-checked="true"] { box-shadow:0 0 0 2px var(--fg) }
.hint { font-size:12px; color:var(--fg-2); margin:-8px 0 18px }
.opt-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px }
.opt { text-align:left; background:var(--surface); border-radius:14px; padding:14px; display:grid; gap:2px; transition:transform .12s var(--ease) }
.opt:active { transform:scale(.97) }
.opt b { font-weight:600 }
.opt span { font-size:13px; color:var(--fg-2) }
.stat-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:16px 0 }
.stat-tiles div { background:var(--surface); border-radius:12px; padding:12px }
.stat-tiles b { display:block; font-size:20px; letter-spacing:-.02em }
.stat-tiles span { font-size:12px; color:var(--fg-2) }

.toast { position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); z-index:60; transform:translate(-50%,140%); opacity:0;
  background:var(--glass); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--line); box-shadow:var(--shadow); border-radius:999px; padding:10px 10px 10px 18px; display:flex; gap:12px; align-items:center;
  font-weight:500; transition:transform .4s cubic-bezier(.22,1,.36,1), opacity .3s; max-width:calc(100% - 32px) }
.toast.show { transform:translate(-50%,0); opacity:1 }
.toast .btn { height:32px; padding:0 14px; font-size:13px }

.view { animation:in .35s var(--ease) both }
@keyframes in { from { opacity:.0; transform:translateY(6px) } }

@media (max-width:960px) {
  .tiles { grid-template-columns:repeat(2,1fr) }
  .cols, .video-wrap { grid-template-columns:1fr }
}
@media (max-width:560px) {
  h1 { font-size:28px }
  main { padding-top:20px }
  .score .big { font-size:28px } .score .team { font-size:17px }
  .opt-grid, .mini-pitches { grid-template-columns:1fr }
  .stat-tiles { grid-template-columns:1fr 1fr }
  .tile .v b { font-size:24px }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
  .sheet { transition:opacity .2s !important }
}
@media (prefers-reduced-transparency: reduce) {
  .nav, .toast { background:var(--bg); backdrop-filter:none; -webkit-backdrop-filter:none }
}

/* Team picker in Confirm teams: click one player of each team and the referee on a frame of the upload */
.kitpick { position:relative; border-radius:12px; overflow:hidden; background:#06201D; aspect-ratio:16/9; cursor:crosshair }
.kitpick img { display:block; width:100%; height:100%; object-fit:contain }
.kitmark { position:absolute; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%; background:var(--c); color:#fff;
  font:700 12px/26px var(--body, sans-serif); text-align:center; font-style:normal; box-shadow:0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.4); pointer-events:none }
.kitpick-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; font-size:14px }
.kitpick-bar span { flex:1; min-width:160px; font-weight:600 }
.kitpick[hidden], .kitpick-bar[hidden] { display:none }