/* ==================================================================
   TournamentSC — brand kit (light).
   Navy base + Flame Orange actions + sport-identity colours.
   Montserrat (display) · Inter (body) · Rajdhani (scores).
   ================================================================== */
:root{
  --navy:#1B2340; --navy-2:#232c52; --navy-3:#2d3768;
  --orange:#F26A1B; --orange-d:#d95a10;
  --blue:#1E88E5; --green:#3FA33C; --purple:#7B2FBE; --magenta:#E7318A; --gold:#F2A413;
  --live:#E1281A;

  --ink:#1B2340; --ink-2:#464f6b; --muted:#5d6789;
  --bg:#ffffff; --bg-2:#F3F4F7; --bg-3:#e9ecf4;
  --line:#e4e7ef; --line-2:#d4d9e7;

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
  --shadow-sm:0 2px 12px rgba(27,35,64,.06);
  --shadow:0 14px 34px -14px rgba(27,35,64,.18);
  --shadow-lg:0 30px 60px -24px rgba(27,35,64,.28);

  --z-nav:100; --z-ticker:80; --z-menu:150; --z-overlay:200;
  --maxw:1200px;
  --font-display:'Montserrat', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
  --font-score:'Rajdhani', system-ui, sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);

  --sp-basketball:#F26A1B; --sp-badminton:#7B2FBE; --sp-wrestling:#1E88E5;
  --sp-chess:#1B2340; --sp-esports:#E7318A; --sp-racing:#0FA6A0; --sp-marathon:#F2A413;
  --sp-pickleball:#3FA33C;

  /* aliases kept so older markup/JS keep working */
  --brand-500:var(--orange); --brand-600:var(--orange-d); --success:var(--green);
  --error:var(--live); --warning:var(--gold); --info:var(--blue);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation-duration:.001ms!important;transition-duration:.001ms!important} }

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:800; line-height:1.08; margin:0; letter-spacing:-.02em; color:var(--navy); }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
img,svg{ display:block; } img{ max-width:100%; }
ul,ol{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; border-radius:4px; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:22px; }
.score{ font-family:var(--font-score); font-weight:700; font-variant-numeric:tabular-nums; }
.mono{ font-family:var(--font-score); font-variant-numeric:tabular-nums; }
.ico{ width:1.15em; height:1.15em; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.muted{ color:var(--ink-2); } .dim{ color:var(--muted); } .center{ text-align:center; }
.skip{ position:absolute; left:-9999px; background:var(--orange); color:#fff; padding:10px 16px; border-radius:0 0 10px 0; font-weight:700; z-index:var(--z-overlay); }
.skip:focus{ left:0; }
.stack>*+*{ margin-top:16px; }
.row-flex{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.spread{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.pill-row{ display:flex; gap:8px; flex-wrap:wrap; }
.divider{ height:1px; background:var(--line); margin:24px 0; }
.eyebrow{ font-family:var(--font-display); font-weight:800; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--orange); }

/* ---------- logo ---------- */
.logo{ display:inline-flex; align-items:center; gap:11px; }
.logo__ico{ width:40px; height:40px; flex:none; filter:drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
.logo__word{ font-family:var(--font-display); font-weight:800; font-size:20px; letter-spacing:-.02em; color:#fff; }
.logo__word .sc{ color:var(--orange); }
/* full-lockup PNG logo (white artwork, for dark surfaces) */
.brand-logo{ display:inline-flex; align-items:center; }
.brand-logo img{ height:26px; width:auto; display:block; }
.brand-logo--lg img{ height:36px; }
@media (max-width:520px){ .brand-logo img{ height:22px; } }
/* Navbar-only responsive lockup: full wordmark on desktop, bracket icon on
   tablet and phones. Only navbar.html tags its <img> with these classes, so
   every other .brand-logo keeps its single untagged image. The
   img.brand-logo__* form is deliberate — it must outrank `.brand-logo img`
   above, which would otherwise force display:block on both at once. */
.brand-logo img.brand-logo__icon{ display:none; }
/* Both lockups are navbar-only classes, so they carry their own heights for the
   74px bar instead of inheriting the 26px above, which is scaled for the
   footer/dashboard lockups. max-width/contain are a last-resort guard, not the
   sizing mechanism: the nav's logo track is minmax(0,auto), so it prefers the
   artwork's full intrinsic width and these never bind on desktop. They only
   engage near 1000px, where the pill and CTA claim the whole row — letterboxing
   the ratio there beats overflowing the CTA out of body{overflow-x:hidden}. */
.brand-logo img.brand-logo__full,
.brand-logo img.brand-logo__icon{ max-width:100%; object-fit:contain; object-position:left center; }
/* 1644x187 wordmark — ~8.8:1, so height buys width fast: 38px reads as 334px
   across. That is the tallest the lockup can go while the nav keeps symmetric
   1fr side tracks (342px each at --maxw), i.e. while the pill stays centred on
   the page. Going taller is what previously forced the logo track wider and
   pushed the pill off centre. */
.brand-logo img.brand-logo__full{ height:38px; }
/* One swap, at the only breakpoint left: the wordmark's 8.8:1 ratio outgrows
   the row here, and the 1:1 icon is 40px wide at any height the bar allows. */
@media (max-width:999.98px){
  .brand-logo img.brand-logo__full{ display:none; }
  .brand-logo img.brand-logo__icon{ display:block; height:40px; }
}

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--font-body); font-weight:700; font-size:15px; padding:13px 22px; border-radius:var(--r-pill); transition:transform .22s var(--ease), background .22s, box-shadow .22s, border-color .22s, color .22s; white-space:nowrap; }
.btn:hover{ text-decoration:none; }
.btn:active{ transform:translateY(1px) scale(.99); }
.btn--primary,.btn-primary{ background:var(--orange); color:#fff; box-shadow:0 8px 20px -8px rgba(242,106,27,.6); }
.btn--primary:hover,.btn-primary:hover{ background:var(--orange-d); transform:translateY(-2px); box-shadow:0 12px 26px -8px rgba(242,106,27,.7); }
.btn--secondary,.btn-secondary{ background:#fff; color:var(--navy); border:1.6px solid var(--line-2); }
.btn--secondary:hover,.btn-secondary:hover{ border-color:var(--navy); transform:translateY(-2px); }
.btn--onnavy{ background:rgba(255,255,255,.1); color:#fff; border:1.6px solid rgba(255,255,255,.35); }
.btn--onnavy:hover{ background:rgba(255,255,255,.18); border-color:#fff; transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--orange); }
.btn-ghost:hover{ color:var(--orange-d); }
/* `.btn-danger` is the name the admin resource registry emits (Action style='danger').
   Without it every destructive action button rendered unstyled. */
.btn-destructive,.btn-danger{ background:var(--live); color:#fff; }
.btn-destructive:hover,.btn-danger:hover{ background:#c31f13; transform:translateY(-2px); }
.btn--sm,.btn-sm{ padding:10px 16px; font-size:14px; }
.btn--lg{ padding:15px 26px; font-size:16px; }
.btn-block{ width:100%; }
.btn:disabled,.btn.disabled{ opacity:.5; pointer-events:none; }
.btn .ico{ width:1.05em; height:1.05em; }
/* icon-only + circle buttons: keep a real hit area (44px) so they never collapse
   to a zero-width sliver on a card footer or a table row. */
.btn--icon{ padding:0; width:44px; height:44px; border-radius:var(--r-md); gap:0; }
.btn--circle{ padding:0; width:44px; height:44px; border-radius:50%; gap:0; }
.btn--icon.btn--sm,.btn--circle.btn--sm{ width:36px; height:36px; }
.btn--icon .ico,.btn--circle .ico{ width:19px; height:19px; }
/* a button group must never render as an empty box */
.btn-group{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.btn-group:empty,.row-flex:empty,.pill-row:empty,.tcard__foot:empty{ display:none; }
/* active/pressed toggle (Follow) */
.btn--active,.btn[aria-pressed="true"]{ background:color-mix(in srgb,var(--orange) 12%,#fff); color:var(--orange-d); border-color:var(--orange); }

/* ---------- tags / badges ---------- */
.tag,.sport-tag{ --sp:var(--navy); display:inline-flex; align-items:center; gap:7px; font-family:var(--font-body); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--navy); padding:5px 10px 5px 8px; border-radius:var(--r-pill); background:color-mix(in srgb, var(--sp) 13%, #fff); border:1px solid color-mix(in srgb, var(--sp) 26%, #fff); }
.tag::before,.sport-tag::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--sp); flex:none; }
.tag--plain{ background:var(--bg-2); border-color:var(--line); color:var(--ink-2); }
.tag--plain::before{ display:none; }
.sp-basketball{--sp:var(--sp-basketball)} .sp-badminton{--sp:var(--sp-badminton)} .sp-wrestling{--sp:var(--sp-wrestling)}
.sp-chess{--sp:var(--sp-chess)} .sp-esports{--sp:var(--sp-esports)} .sp-racing{--sp:var(--sp-racing)}
.sp-pickleball{--sp:var(--sp-pickleball)} .sp-marathon{--sp:var(--sp-marathon)}
/* legacy tag-* aliases */
.tag-basketball{--sp:var(--sp-basketball)} .tag-badminton{--sp:var(--sp-badminton)} .tag-wrestling{--sp:var(--sp-wrestling)}
.tag-chess{--sp:var(--sp-chess)} .tag-esports{--sp:var(--sp-esports)} .tag-racing{--sp:var(--sp-racing)}
.tag-pickleball{--sp:var(--sp-pickleball)} .tag-marathon{--sp:var(--sp-marathon)}

.live{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-body); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--live); padding:5px 10px; border-radius:6px; }
.live__dot{ width:7px; height:7px; border-radius:50%; background:#fff; position:relative; }
.live__dot::after{ content:''; position:absolute; inset:-4px; border-radius:50%; background:#fff; opacity:.55; animation:ping 1.7s var(--ease) infinite; }
@keyframes ping{ 0%{transform:scale(.5);opacity:.6} 70%,100%{transform:scale(2.3);opacity:0} }

/* Status badges.
   The admin's generic list renders `badge-{{ value|slugify }}`, so the set of
   modifier names is open-ended (pending, approved, image, admin, captain…).
   `.badge` therefore carries a neutral default of its own — an unrecognised
   modifier degrades to a readable grey pill instead of an invisible one. */
.badge{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; padding:5px 11px; border-radius:var(--r-pill);
  background:var(--bg-3); color:var(--ink-2); white-space:nowrap; }
.badge-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }

/* tournament / fixture lifecycle */
.badge-live{ background:var(--live); color:#fff; border-radius:6px; }
.badge-upcoming{ background:color-mix(in srgb,var(--blue) 12%,#fff); color:var(--blue); }
.badge-completed{ background:color-mix(in srgb,var(--green) 14%,#fff); color:#2f8a2c; }
.badge-cancelled{ background:color-mix(in srgb,var(--live) 12%,#fff); color:var(--live); }
.badge-draft{ background:var(--bg-3); color:var(--muted); }
.badge-scheduled{ background:color-mix(in srgb,var(--blue) 10%,#fff); color:var(--blue); }
.badge-postponed{ background:color-mix(in srgb,var(--gold) 16%,#fff); color:#a9760a; }
.badge-published{ background:color-mix(in srgb,var(--green) 14%,#fff); color:#2f8a2c; }

/* approval lifecycle (entries, registrations, applications, memberships) */
.badge-pending{ background:color-mix(in srgb,var(--gold) 16%,#fff); color:#a9760a; }
.badge-approved{ background:color-mix(in srgb,var(--green) 14%,#fff); color:#2f8a2c; }
.badge-rejected{ background:color-mix(in srgb,var(--live) 12%,#fff); color:var(--live); }

/* roles */
.badge-admin{ background:color-mix(in srgb,var(--purple) 13%,#fff); color:var(--purple); }
.badge-organizer{ background:color-mix(in srgb,var(--orange) 13%,#fff); color:var(--orange-d); }
.badge-player{ background:color-mix(in srgb,var(--blue) 12%,#fff); color:var(--blue); }
.badge-captain{ background:color-mix(in srgb,var(--orange) 13%,#fff); color:var(--orange-d); }

/* announcement levels */
.badge-info{ background:color-mix(in srgb,var(--blue) 12%,#fff); color:var(--blue); }
.badge-success{ background:color-mix(in srgb,var(--green) 14%,#fff); color:#2f8a2c; }
.badge-warning{ background:color-mix(in srgb,var(--gold) 16%,#fff); color:#a9760a; }
.badge-critical{ background:color-mix(in srgb,var(--live) 12%,#fff); color:var(--live); }

.verified{ color:var(--blue); }

/* ============ NAV ============ */
.nav{ position:sticky; top:0; z-index:var(--z-nav); background:linear-gradient(180deg,#141a30 0%, #0c1120 100%); border-bottom:1px solid rgba(255,255,255,.07); }
/* Symmetric side tracks: the only arrangement that puts the pill on true page
   centre, since equal 1fr sides force it there regardless of what the logo and
   CTA occupy. It also caps the lockup at ~38px (two 342px sides at --maxw, and
   342px of an 8.8:1 wordmark is 38px tall) — that cap is why brand-logo__full
   is 38px. 1fr sides are shrinkable, so a cramped row letterboxes rather than
   overflowing; see the brand-logo__full guard above. */
.nav__row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; height:74px; }
.nav__row>.logo{ justify-self:start; } .nav__row>.nav__pill{ justify-self:center; } .nav__row>.nav__cta{ justify-self:end; }
.nav__row>.brand-logo{ justify-self:start; }
.nav__pill{ display:flex; align-items:center; gap:2px; padding:5px; border-radius:var(--r-pill); background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.1); }
.nav__pill a{ display:inline-flex; align-items:center; gap:6px; font-size:14.5px; font-weight:600; color:#c3cadf; padding:9px 16px; border-radius:var(--r-pill); transition:color .2s, background .2s; }
.nav__pill a:hover,.nav__pill a.active{ color:#fff; background:rgba(255,255,255,.08); text-decoration:none; }
.nav__cta{ display:flex; align-items:center; gap:14px; }
/* nowrap: the symmetric 1fr side tracks above are shrinkable, so between ~768px
   and ~960px the CTA track would otherwise squeeze "Log in" onto two lines. */
.nav__login{ font-size:14.5px; font-weight:600; color:#e7eaf4; padding:9px 4px; white-space:nowrap; }
.nav__login:hover{ color:#fff; text-decoration:none; }
.nav__bell{ position:relative; color:#e7eaf4; display:inline-flex; }
.nav__bell .count{ position:absolute; top:-6px; right:-8px; background:var(--orange); color:#fff; font-size:10px; font-weight:800; border-radius:var(--r-pill); padding:1px 5px; }
.nav__burger{ display:none; width:44px; height:44px; border-radius:12px; border:1px solid rgba(255,255,255,.16); align-items:center; justify-content:center; color:#fff; }

/* ticker */
.ticker{ position:sticky; top:74px; z-index:var(--z-ticker); background:var(--navy); color:#fff; display:flex; align-items:center; overflow:hidden; border-top:1px solid rgba(255,255,255,.05); }
.ticker__label{ display:flex; align-items:center; gap:8px; flex:none; padding:9px 16px; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; background:var(--live); z-index:2; }
.ticker__view{ overflow:hidden; flex:1; }
.ticker__track{ display:flex; gap:34px; width:max-content; padding:9px 34px; animation:slide 42s linear infinite; }
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker__item{ display:flex; align-items:center; gap:9px; font-size:13px; color:#cdd3e6; white-space:nowrap; }
.ticker__item b{ color:#fff; font-weight:700; }
.ticker__item .sc{ font-family:var(--font-score); font-weight:700; color:#ffb37a; font-size:15px; }
.ticker__item .dot{ width:5px;height:5px;border-radius:50%; }
@keyframes slide{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion: reduce){ .ticker__track{animation:none} .ticker__view{overflow-x:auto} }

/* ============ HERO ============ */
/* The hero is a rounded dark panel that floats on the page background rather
   than bleeding to the viewport edge. The <section> itself IS the panel: its
   width is capped to the same content edge as .wrap uses everywhere else
   (--maxw minus .wrap's 22px gutters), so the panel's sides line up exactly
   with every other section on the page and the left/right margins stay equal
   at any width. .hero__inner keeps carrying .wrap and supplies the padding. */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  width:calc(100% - 44px); max-width:calc(var(--maxw) - 44px);
  margin:22px auto 0; padding:0;
  background:var(--navy); color:#fff;
  border:1px solid rgba(255,255,255,.07);
  border-radius:clamp(20px,2.2vw,30px);
  box-shadow:0 44px 90px -36px rgba(27,35,64,.62), 0 8px 24px -14px rgba(27,35,64,.3);
}
.hero__bg{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.hero__bg::before{ content:''; position:absolute; inset:0; background:
    radial-gradient(680px 820px at 6% -22%, rgba(242,106,27,.27), transparent 55%),
    radial-gradient(1100px 640px at 52% 118%, rgba(6,9,20,.6), transparent 62%); }
/* second layer: cool depth in the top-right + a sheen along the top edge, so
   the panel reads as lit rather than flat. */
.hero__bg::after{ content:''; position:absolute; inset:0; background:
    radial-gradient(820px 560px at 98% 2%, rgba(30,136,229,.16), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.055), transparent 34%); }
.hero__inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(30px,3.4vw,56px); align-items:center; padding:clamp(34px,4vw,64px); }
.hero__kicker{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-bottom:20px; }
.hero__kicker .k1{color:var(--orange)} .hero__kicker .k2{color:#63b0f2} .hero__kicker .k3{color:#67c463}
.hero h1{ color:#fff; font-size:clamp(2.3rem,4.6vw,3.85rem); font-style:italic; font-weight:900; letter-spacing:-.025em; line-height:1.02; }
.hero h1 .u{ color:var(--orange); }
.hero__sub{ color:#c3cadf; font-size:clamp(1.02rem,1.5vw,1.16rem); max-width:44ch; margin:20px 0 32px; }
/* .hero__actions is deliberately left as-is: the organiser section reuses it. */
.hero__actions{ display:flex; gap:12px; flex-wrap:wrap; }
/* hairline separators between the stats, carried by the items themselves so the
   row still wraps cleanly */
.hero__stats{ display:flex; gap:14px 0; margin-top:38px; flex-wrap:wrap; }
.hero__stat{ padding-inline:clamp(18px,2vw,30px); border-left:1px solid rgba(255,255,255,.12); }
.hero__stat:first-child{ padding-left:0; border-left:0; }
.hero__stat .n{ font-family:var(--font-score); font-weight:700; font-size:30px; color:#fff; line-height:1; }
.hero__stat .l{ font-size:12.5px; color:#9aa3c0; margin-top:5px; text-transform:uppercase; letter-spacing:.06em; }
.hero__stat .n .u{ color:var(--orange); }

.hcard{ position:relative; background:#fff; color:var(--navy); border-radius:var(--r-xl); padding:clamp(18px,1.6vw,24px); box-shadow:0 34px 70px -26px rgba(6,9,20,.72), 0 0 0 1px rgba(255,255,255,.14); }
.hcard__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.hcard__where{ font-family:var(--font-score); font-weight:600; font-size:13px; color:var(--muted); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hcard__teams{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; }
.hcard__team{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.hcard__crest{ width:56px; height:56px; border-radius:15px; display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:19px; color:#fff; background:var(--navy); }
.hcard__nm{ font-family:var(--font-display); font-weight:700; font-size:14.5px; }
.hcard__sc{ font-family:var(--font-score); font-weight:700; font-size:clamp(40px,3.4vw,50px); line-height:1; color:var(--navy); }
.hcard__vs{ font-family:var(--font-display); font-weight:800; font-size:13px; color:var(--muted); }
.hcard__meta{ text-align:center; font-family:var(--font-score); font-weight:600; font-size:13px; color:var(--ink-2); margin:14px 0 4px; }
/* win-probability bar (derived live from the score) */
.hcard__bar{ height:6px; border-radius:var(--r-pill); background:var(--bg-3); overflow:hidden; margin-top:10px; }
.hcard__bar>i{ display:block; height:100%; background:var(--orange); border-radius:var(--r-pill); transition:width .6s var(--ease); }
.hcard__prob{ display:flex; justify-content:space-between; gap:10px; font-family:var(--font-score); font-weight:600; font-size:11.5px; color:var(--muted); margin-top:6px; }
.hcard__foot{ display:flex; align-items:center; justify-content:space-between; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.hcard__foot .watch{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14px; color:var(--live); }
.hcard__foot .mc{ display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:13.5px; color:var(--navy); }
.hcard__foot .mc:hover{ color:var(--orange); }

/* ============ SECTIONS ============ */
section, .section{ padding:56px 0; }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; }
.sec-head h2{ font-size:clamp(1.7rem,3.2vw,2.35rem); font-style:italic; font-weight:900; }
.sec-head p{ color:var(--ink-2); margin-top:8px; font-size:15px; max-width:56ch; }
.sec-head__link{ color:var(--blue); font-weight:700; font-size:14px; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.bg-soft{ background:var(--bg-2); }

/* sports strip — auto-fit so adding a sport never breaks the row */
.sports-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:14px; }
.sportcard{ --sp:var(--navy); position:relative; display:block; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:18px 14px; text-align:center; transition:transform .25s var(--ease), border-color .25s, box-shadow .25s; overflow:hidden; }
.sportcard:hover{ transform:translateY(-4px); border-color:color-mix(in srgb,var(--sp) 45%,#fff); box-shadow:var(--shadow); text-decoration:none; }
.sportcard::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--sp); opacity:.9; }
.sportcard__ic{ width:48px; height:48px; margin:6px auto 12px; border-radius:14px; display:grid; place-items:center; color:var(--sp); background:color-mix(in srgb,var(--sp) 12%,#fff); }
.sportcard__ic .ico{ width:24px; height:24px; }
.sportcard__nm{ font-family:var(--font-display); font-weight:700; font-size:14.5px; color:var(--navy); }
.sportcard__meta{ font-family:var(--font-score); font-weight:600; font-size:12px; color:var(--muted); margin-top:4px; }

/* live rail */
.rail{ display:flex; gap:16px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x mandatory; scrollbar-width:none; }
.rail::-webkit-scrollbar{ display:none; }
.mcard{ flex:none; width:310px; scroll-snap-align:start; display:block; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.mcard:hover{ transform:translateY(-3px); box-shadow:var(--shadow); text-decoration:none; }
.mcard__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.mcard__row{ display:flex; align-items:center; justify-content:space-between; padding:6px 0; }
.mcard__row .nm{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:15px; color:var(--navy); }
.mcard__row .cr{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-family:var(--font-display); font-size:11px; font-weight:800; color:#fff; background:var(--navy); }
.mcard__row .sc{ font-family:var(--font-score); font-weight:700; font-size:20px; color:var(--navy); }
.mcard__row.lead .sc{ color:var(--green); }
.mcard__row.trail .nm,.mcard__row.trail .sc{ color:var(--muted); }
.mcard__foot{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.mcard__foot .st{ font-family:var(--font-score); font-weight:600; font-size:12.5px; color:var(--muted); }
.mcard__foot .watch{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:13px; color:var(--live); }

/* tournaments grid */
.tgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tcard{ position:relative; text-align:left; width:100%; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.tcard:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); text-decoration:none; }
.tcard:hover .tcard__cover .ico{ transform:scale(1.08) rotate(-5deg); }
.tcard--feat{ grid-column:span 2; flex-direction:row; }
.tcard__cover{ --sp:var(--navy); position:relative; min-height:130px; display:grid; place-items:center; overflow:hidden; background:linear-gradient(145deg, var(--sp), color-mix(in srgb,var(--sp) 55%, var(--navy))); }
.tcard--feat .tcard__cover{ min-width:44%; }
.tcard__cover>.ico{ width:66px; height:66px; color:rgba(255,255,255,.92); stroke-width:1.2; transition:transform .4s var(--ease); }
.tcard__cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tcard__cover .live{ position:absolute; top:12px; left:12px; z-index:1; }
.tcard__cover .when{ position:absolute; bottom:12px; left:12px; font-family:var(--font-score); font-weight:600; font-size:12.5px; color:#fff; background:rgba(0,0,0,.32); padding:4px 10px; border-radius:7px; z-index:1; }
.tcard__body{ padding:16px 17px; display:flex; flex-direction:column; gap:11px; flex:1; }
.tcard--feat .tcard__body{ padding:22px; }
.tcard__tags{ display:flex; gap:7px; flex-wrap:wrap; }
.tcard__title{ font-family:var(--font-display); font-weight:800; font-size:18px; letter-spacing:-.02em; color:var(--navy); }
.tcard--feat .tcard__title{ font-size:clamp(1.35rem,2.4vw,1.8rem); }
.tcard__meta{ display:flex; flex-direction:column; gap:7px; color:var(--ink-2); font-size:13.5px; }
.tcard__meta li{ display:flex; align-items:center; gap:9px; }
.tcard__meta .ico{ width:15px; height:15px; color:var(--muted); }
.tcard__foot{ margin-top:auto; padding-top:13px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); }
.tcard__teams{ font-family:var(--font-score); font-weight:600; font-size:13px; color:var(--ink-2); }
.tcard__teams b{ color:var(--orange); }
.go{ display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:13.5px; color:var(--navy); }
.tcard:hover .go{ color:var(--orange); }

/* filter chips */
.chips{ display:flex; gap:10px; overflow-x:auto; padding-bottom:10px; margin-bottom:16px; scrollbar-width:none; }
.chips::-webkit-scrollbar{ display:none; }
.chip{ --sp:var(--navy); display:inline-flex; align-items:center; gap:8px; flex:none; padding:9px 15px; border-radius:var(--r-pill); border:1.5px solid var(--line-2); color:var(--ink-2); font-weight:600; font-size:14px; background:#fff; transition:all .2s var(--ease); }
.chip .ico{ width:16px; height:16px; color:var(--sp); }
.chip:hover{ border-color:var(--sp); color:var(--navy); text-decoration:none; }
.chip.active,.chip[aria-pressed="true"]{ background:var(--navy); color:#fff; border-color:var(--navy); }
.chip.active .ico{ color:#fff; }

/* features bento */
.bento{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:168px; gap:16px; }
.bx{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), box-shadow .25s; }
.bx:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.bx__ic{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; margin-bottom:auto; }
.bx__ic .ico{ width:20px; height:20px; }
.ic-o{ background:color-mix(in srgb,var(--orange) 13%,#fff); color:var(--orange); }
.ic-b{ background:color-mix(in srgb,var(--blue) 13%,#fff); color:var(--blue); }
.ic-g{ background:color-mix(in srgb,var(--green) 14%,#fff); color:var(--green); }
.ic-p{ background:color-mix(in srgb,var(--purple) 13%,#fff); color:var(--purple); }
.ic-m{ background:color-mix(in srgb,var(--magenta) 12%,#fff); color:var(--magenta); }
.bx h3{ font-size:17px; } .bx p{ color:var(--ink-2); font-size:13.5px; margin-top:7px; }
.bx--big{ grid-column:span 2; grid-row:span 2; background:var(--navy); border-color:var(--navy); }
.bx--big h3,.bx--big p{ color:#fff; } .bx--big p{ color:#c3cadf; }
.bx--big .kick{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; font-family:var(--font-display); font-weight:800; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--orange); padding:5px 11px; border-radius:7px; }
.bx--big h3{ font-size:clamp(1.3rem,2.1vw,1.6rem); font-style:italic; margin-top:14px; }
.chips-mini{ margin-top:auto; display:flex; flex-wrap:wrap; gap:8px; padding-top:16px; }
.chips-mini span{ font-family:var(--font-score); font-weight:600; font-size:12px; padding:6px 11px; border-radius:var(--r-pill); background:rgba(255,255,255,.09); color:#dfe4f2; border:1px solid rgba(255,255,255,.14); }

/* highlights */
.hl-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.hlcard{ text-align:left; width:100%; display:block; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), box-shadow .25s; }
.hlcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow); text-decoration:none; }
.hlcard__thumb{ --sp:var(--navy); position:relative; height:132px; background:linear-gradient(145deg, var(--sp), color-mix(in srgb,var(--sp) 55%, var(--navy))); display:grid; place-items:center; }
.hlcard__thumb .ico.sport{ width:52px; height:52px; color:rgba(255,255,255,.28); stroke-width:1.1; }
.hlcard__thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hlcard__play{ position:absolute; width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.95); color:var(--navy); display:grid; place-items:center; box-shadow:var(--shadow); transition:transform .25s var(--ease), background .25s, color .25s; }
.hlcard:hover .hlcard__play{ transform:scale(1.1); background:var(--orange); color:#fff; }
.hlcard__play .ico{ width:20px; height:20px; margin-left:2px; }
.hlcard__dur{ position:absolute; bottom:10px; right:10px; font-family:var(--font-score); font-weight:600; font-size:11.5px; color:#fff; background:rgba(0,0,0,.42); padding:3px 8px; border-radius:6px; z-index:1; }
.hlcard__body{ padding:14px 15px; }
.hlcard__title{ font-family:var(--font-display); font-weight:700; font-size:14.5px; color:var(--navy); margin:9px 0 6px; line-height:1.25; }
.hlcard__meta{ font-family:var(--font-score); font-weight:600; font-size:12px; color:var(--muted); }

/* organizer band */
.org{ position:relative; background:var(--navy); border-radius:var(--r-xl); padding:44px; overflow:hidden; color:#fff; }
.org__bg::before{ content:''; position:absolute; right:-120px; top:-120px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(242,106,27,.26), transparent 65%); }
.org__head{ position:relative; max-width:60ch; }
.org__head h2{ color:#fff; font-size:clamp(1.7rem,3vw,2.3rem); font-style:italic; font-weight:900; }
.org__head p{ color:#c3cadf; margin-top:10px; }
.steps{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:30px 0; }
.step{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-lg); padding:18px; }
.step__n{ font-family:var(--font-score); font-weight:700; font-size:14px; color:#fff; background:var(--orange); width:30px; height:30px; border-radius:9px; display:grid; place-items:center; margin-bottom:13px; }
.step h4{ color:#fff; font-size:15.5px; } .step p{ color:#b7bfd8; font-size:13px; margin-top:6px; }

/* ============ FOOTER ============ */
.foot{ background:var(--navy); color:#fff; padding:52px 0 30px; margin-top:56px; }
.foot__grid{ display:grid; grid-template-columns:1.7fr repeat(3,1fr); gap:30px; }
.foot__brand p{ color:#aab2ce; font-size:14px; margin:14px 0; max-width:36ch; }
.foot__tag{ font-family:var(--font-display); font-weight:800; font-style:italic; font-size:13px; color:#fff; }
.foot__tag .a{color:var(--orange)} .foot__tag .b{color:#63b0f2} .foot__tag .c{color:#67c463}
.foot__col h5{ font-family:var(--font-display); font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:#8b93b4; margin-bottom:14px; font-weight:800; }
.foot__col a{ display:block; color:#aab2ce; font-size:14px; padding:5px 0; }
.foot__col a:hover{ color:#fff; text-decoration:none; }
.foot__bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:38px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); color:#8b93b4; font-size:13px; flex-wrap:wrap; }
.foot__bar b{ color:#fff; }

/* ============ DETAIL / GENERIC CARDS ============ */
.card, .panel{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); }
.panel{ padding:22px; }
.card{ overflow:hidden; display:block; transition:transform .25s var(--ease), box-shadow .25s, border-color .25s; }
a.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); text-decoration:none; }
.card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.card-body{ padding:16px; } .card-title{ font-family:var(--font-display); font-weight:800; font-size:17px; margin:8px 0 4px; color:var(--navy); }
.card-meta{ font-size:13px; color:var(--muted); }
.card-cover{ aspect-ratio:16/9; background:linear-gradient(145deg,var(--navy),#2d3768); position:relative; display:flex; align-items:flex-end; padding:12px; }
.card-cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.card-cover .on-cover{ position:relative; z-index:1; }
.two-col{ display:grid; grid-template-columns:2fr 1fr; gap:24px; align-items:start; }
@media (max-width:900px){ .two-col{ grid-template-columns:1fr; } }
.empty{ text-align:center; padding:48px; color:var(--muted); background:var(--bg-2); border-radius:var(--r-lg); }

/* stat tiles — used by the player, organizer AND admin dashboards, so they must
   live here in base.css (the public dashboards never load dash.css). */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:16px; }
.stat{ display:block; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), box-shadow .25s; }
a.stat:hover{ transform:translateY(-3px); box-shadow:var(--shadow); text-decoration:none; }
.stat .n{ font-family:var(--font-score); font-size:32px; font-weight:700; color:var(--navy); line-height:1.1; }
.stat .n.brand{ color:var(--orange); }
.stat .l{ font-size:13px; color:var(--muted); margin-top:4px; }
.kv{ display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:14px; }
.kv dt{ color:var(--muted); font-family:var(--font-score); font-weight:600; }
.kv dd{ margin:0; color:var(--navy); font-weight:600; }

.back{ display:inline-flex; align-items:center; gap:8px; color:var(--ink-2); font-weight:600; font-size:14px; padding:20px 0 14px; }
.back:hover{ color:var(--navy); text-decoration:none; }
.dhero{ --sp:var(--navy); position:relative; border-radius:var(--r-xl); overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); }
.dhero__cover{ height:130px; background:linear-gradient(135deg, var(--sp), color-mix(in srgb,var(--sp) 52%, var(--navy))); display:grid; place-items:center; position:relative; }
.dhero__cover>.ico{ width:66px; height:66px; color:rgba(255,255,255,.9); stroke-width:1.2; }
.dhero__cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.dhero__body{ padding:24px; }
.dhero__tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.dhero h1{ font-size:clamp(1.7rem,3.6vw,2.5rem); font-style:italic; font-weight:900; }
.dhero__meta{ display:flex; flex-wrap:wrap; gap:20px; margin:16px 0 20px; color:var(--ink-2); font-size:14px; }
.dhero__meta span{ display:inline-flex; align-items:center; gap:8px; }
.dhero__meta .ico{ width:16px; height:16px; color:var(--muted); }
.dhero__actions{ display:flex; gap:12px; flex-wrap:wrap; }

.tabs{ display:flex; gap:2px; margin:28px 0 22px; border-bottom:1.5px solid var(--line); overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar{ display:none; }
.tab{ padding:13px 18px; color:var(--ink-2); font-weight:700; font-size:15px; border-bottom:2.5px solid transparent; margin-bottom:-1.5px; transition:color .2s; white-space:nowrap; background:none; }
.tab:hover{ color:var(--navy); text-decoration:none; }
.tab.active,.tab[aria-selected="true"]{ color:var(--orange); border-bottom-color:var(--orange); }
.tabpanel{ display:none; } .tabpanel.on{ display:block; animation:fade .35s var(--ease); }
@keyframes fade{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

.facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:24px; }
.fact{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md); padding:15px; }
.fact .k{ font-family:var(--font-score); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.fact .v{ font-family:var(--font-display); font-weight:800; font-size:17px; margin-top:6px; color:var(--navy); }
.about{ color:var(--ink-2); max-width:68ch; font-size:15px; }

/* tables */
.tblcard{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
.tblcard h4{ padding:15px 18px; border-bottom:1px solid var(--line); font-size:15px; }
.table-wrap{ overflow-x:auto; }

/* dense data table + row action cluster — used by the organizer screens AND the
   admin console, so it belongs in base.css (organizer pages never load dash.css). */
.dtable{ width:100%; border-collapse:collapse; font-size:14px; }
.dtable th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); font-weight:700; padding:13px 16px; border-bottom:1px solid var(--line);
  white-space:nowrap; background:var(--bg-2); }
.dtable td{ padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:middle; color:var(--ink-2); }
.dtable tbody tr:last-child td{ border-bottom:none; }
.dtable tbody tr:hover{ background:var(--bg-2); }
.ta-r{ text-align:right; }
.rowacts{ display:inline-flex; gap:6px; align-items:center; justify-content:flex-end; flex-wrap:wrap; }
.rowacts form{ display:inline; }
.rowacts:empty{ display:none; }
.pager{ display:flex; gap:14px; align-items:center; justify-content:center; margin-top:22px; flex-wrap:wrap; }
table, table.data{ width:100%; border-collapse:collapse; }
th,td{ text-align:left; padding:12px 18px; font-size:14px; border-bottom:1px solid var(--line); color:var(--navy); }
th, table.data thead th{ font-family:var(--font-score); font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); background:transparent; }
tbody tr:last-child td{ border-bottom:none; }
td.n,th.n,td.num,th.num{ text-align:right; font-family:var(--font-score); font-weight:600; }
.tcell{ display:flex; align-items:center; gap:11px; font-weight:600; }
.rk{ width:24px; height:24px; border-radius:7px; display:grid; place-items:center; font-family:var(--font-score); font-size:12px; font-weight:700; background:var(--bg-3); color:var(--ink-2); }
tr.qual td{ background:color-mix(in srgb,var(--green) 6%,#fff); }
tr.qual .rk{ background:color-mix(in srgb,var(--green) 18%,#fff); color:var(--green); }
td.pts{ font-family:var(--font-score); font-weight:700; color:var(--green); text-align:right; }
/* qualification legend under a standings table */
.qnote{ display:flex; align-items:center; gap:8px; margin-top:14px; font-size:13px; color:var(--muted); }
.qkey{ width:11px; height:11px; border-radius:3px; flex:none; background:color-mix(in srgb,var(--green) 18%,#fff); border:1px solid color-mix(in srgb,var(--green) 45%,#fff); }
/* win / loss / draw result chip */
.res{ display:inline-flex; align-items:center; justify-content:center; min-width:34px; padding:2px 8px; border-radius:6px; font-family:var(--font-score); font-weight:700; font-size:13px; }
.res.w{ background:color-mix(in srgb,var(--green) 15%,#fff); color:var(--green); }
.res.l{ background:var(--bg-3); color:var(--muted); }
.res.d{ background:color-mix(in srgb,var(--gold) 18%,#fff); color:#b9820b; }

/* bracket */
.bwrap,.bracket-scroll{ overflow-x:auto; padding-bottom:10px; }
.bracket{ display:flex; gap:clamp(20px,3vw,46px); min-width:780px; padding:6px 2px; }
.round,.bracket-round{ display:flex; flex-direction:column; justify-content:space-around; gap:16px; flex:1; min-width:172px; }
.round__h,.bracket-round h4{ font-family:var(--font-score); font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); text-align:center; margin:0 0 4px; }
.bm,.bracket-match{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-sm); display:block; }
a.bracket-match:hover{ text-decoration:none; box-shadow:var(--shadow); }
.bm__r,.bracket-slot{ display:flex; align-items:center; justify-content:space-between; padding:10px 13px; font-size:13.5px; }
.bm__r+.bm__r,.bracket-slot+.bracket-slot{ border-top:1px solid var(--line); }
.bm__r .nm{ display:flex; align-items:center; gap:9px; color:var(--ink-2); font-weight:600; }
.bm__r .sc,.bracket-slot .s{ font-family:var(--font-score); font-weight:700; color:var(--muted); }
.bm__r.win,.bracket-slot.win{ background:color-mix(in srgb,var(--green) 7%,#fff); }
.bm__r.win .nm,.bracket-slot.win{ color:var(--navy); }
.bm__r.win .sc{ color:var(--green); }
.seed{ width:20px; font-family:var(--font-score); font-size:11px; color:var(--muted); }
.champ{ display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; }
.champ__cup{ width:56px; height:56px; border-radius:16px; background:color-mix(in srgb,var(--gold) 16%,#fff); border:1px solid color-mix(in srgb,var(--gold) 40%,#fff); display:grid; place-items:center; color:#c88a09; }
.champ__lbl{ font-family:var(--font-score); font-weight:600; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.champ__nm{ font-family:var(--font-display); font-weight:800; font-size:19px; color:var(--navy); }

/* fixtures list */
.flist{ display:flex; flex-direction:column; gap:10px; }
.frow, .fixture-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:13px 16px; box-shadow:var(--shadow-sm); }
a.fixture-row:hover, a.frow:hover{ text-decoration:none; box-shadow:var(--shadow); }
.fixture-row{ grid-template-columns:1fr auto; }
.frow .ft{ display:flex; align-items:center; gap:9px; font-weight:600; font-size:14.5px; color:var(--navy); }
.frow .ft.r{ justify-content:flex-end; } .frow .ft.lose{ color:var(--muted); }
.frow .fm{ text-align:center; } .frow .fsc{ font-family:var(--font-score); font-weight:700; font-size:17px; color:var(--navy); }
.frow .fw{ font-family:var(--font-score); font-weight:600; font-size:11.5px; color:var(--muted); }
.fchip{ font-family:var(--font-score); font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; padding:3px 8px; border-radius:6px; display:inline-block; margin-top:3px; }
.fchip.done{ background:var(--bg-3); color:var(--muted); }
.fchip.live{ background:color-mix(in srgb,var(--live) 14%,#fff); color:var(--live); }
.fchip.up{ background:color-mix(in srgb,var(--blue) 13%,#fff); color:var(--blue); }
.fround{ font-family:var(--font-score); font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:14px 0 4px; }

/* live scoreboard (match page) */
.scoreboard{ background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); padding:24px; box-shadow:var(--shadow); }
.scoreboard.is-live{ box-shadow:0 0 0 2px color-mix(in srgb,var(--live) 30%,#fff), var(--shadow); }
.scoreboard-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.scoreboard-clock{ font-family:var(--font-score); font-weight:600; font-size:13px; color:var(--muted); }
.scoreboard-main{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.competitor{ display:flex; flex-direction:column; align-items:center; gap:10px; width:120px; text-align:center; }
.competitor-crest{ position:relative; overflow:hidden; width:56px; height:56px; border-radius:15px; display:grid; place-items:center; background:var(--navy); color:#fff; font-family:var(--font-display); font-weight:800; font-size:18px; }
/* Team crest. The <img> is laid OVER the initials rather than replacing them,
   so a logo that 404s can just remove itself (see the onerror in
   match_detail.html) and the initials underneath show through — no broken-image
   icon, no empty circle. object-fit crops a rectangular logo without distorting
   it, and the absolute box means the 48px mobile size needs no extra rule. */
.competitor-crest img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.competitor-name{ font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--navy);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  text-overflow:ellipsis; word-break:break-word; }
.competitor-name.winner{ color:var(--green); }
.score-center{ font-family:var(--font-score); font-weight:700; font-size:52px; line-height:1; color:var(--navy); display:flex; align-items:center; gap:14px; }
.score-divider{ color:var(--muted); font-weight:600; font-size:22px; }
.score-num{ transition:background .4s ease-out; padding:2px 10px; border-radius:8px; }
.score-num.flash{ background:color-mix(in srgb,var(--green) 24%,#fff); }
.winner{ color:var(--green); }

/* public match page: live quarter clock (mirrors the organizer scoring page) */
.match-clock-row{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.match-clock-label{ font-family:var(--font-score); font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
/* .badge's own `display` would otherwise beat the browser's default
   [hidden]{display:none} rule (same specificity, author sheet loads later). */
.match-clock-row [hidden]{ display:none; }

/* commentary feed */
.feed{ list-style:none; padding:0; margin:0; }
.feed li{ padding:10px 0; border-top:1px solid var(--line); font-size:14px; display:flex; gap:12px; }
.feed li .t{ font-family:var(--font-score); font-size:12px; color:var(--muted); flex-shrink:0; }

/* youtube embed */
.embed{ position:relative; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--bg-2); }
.embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* public match page: "Watch Full Match" call-to-action (replaces the embed) */
.watch-cta{ display:flex; align-items:center; justify-content:center; padding:36px 16px;
  border-radius:var(--r-lg); border:1px solid var(--line); background:var(--bg-2); }
.watch-cta__btn{ width:100%; max-width:320px; }

/* ======================================================================
   Public Match View responsive layout (template/public/match_detail.html
   only — every selector below is either a class unique to this template or
   scoped under one via a descendant selector, so none of it can touch the
   organizer scoring page, .kv on organizer_status.html, .feed on the
   organizer score page, or any other .panel/.two-col page on the site).

   .pm-layout is mobile-first: the un-prefixed rules ARE the <768px mobile
   order (Scoreboard, Match info, Individual scoring, Commentary, Video),
   then each breakpoint only overrides what actually changes.
   ====================================================================== */
.pm-layout{ display:flex; flex-direction:column; gap:20px; }
/* Unwrapped below 1024px: .pm-col-left/.pm-col-right generate no box of
   their own, so their children become direct flex items of .pm-layout and
   can freely interleave via `order` regardless of which "column" they
   started in. Re-wrapped into two real columns at desktop, below. */
.pm-col-left, .pm-col-right{ display:contents; }

.pm-scoreboard{ order:1; }
.pm-matchinfo{ order:2; }
.pm-indiv{ order:3; }
.pm-commentary{ order:4; }
.pm-video{ order:5; }
.pm-highlight{ order:6; }

/* Tablet (768–1023px): still one full-width column, but Match info +
   Commentary move ahead of Individual scoring — see the task's own
   "TABLET LAYOUT" order vs "MOBILE LAYOUT" order, they're not the same. */
@media (min-width:768px){
  .pm-matchinfo{ order:2; }
  .pm-commentary{ order:3; }
  .pm-indiv{ order:4; }
  .pm-video{ order:5; }
}

/* Desktop (1024px+): real two-column grid, 70/30. Each column is then just
   a plain flex stack of its own direct children in DOM order (scoreboard →
   indiv → video → highlight on the left; matchinfo → commentary on the
   right) — no `order` needed here, and a missing item (e.g. no Individual
   scoring on a non-basketball fixture, or no Commentary with zero events)
   simply isn't there, never a blank gap the way an unfilled named
   grid-template-area would leave behind. */
@media (min-width:1024px){
  .pm-layout{ display:grid; grid-template-columns:7fr 3fr; gap:24px; align-items:start; }
  .pm-col-left, .pm-col-right{ display:flex; flex-direction:column; gap:20px; }
}

/* Live scoreboard: on mobile only, the team/score block comes before the
   quarter/clock/shot-clock row (see the task's "Suggested mobile
   structure") — tablet and desktop keep the clock above the score, which
   is already how the DOM/CSS renders without any of this. */
@media (max-width:767.98px){
  .pm-scoreboard{ display:flex; flex-direction:column; }
  .scoreboard-top{ order:1; }
  .scoreboard-main{ order:2; }
  .match-clock-row{ order:3; }
  [data-prob-wrap]{ order:4; }

  .scoreboard{ padding:18px; }
  .scoreboard-main{ flex-direction:column; gap:14px; }
  .competitor{ width:auto; max-width:100%; }
  .competitor-crest{ width:48px; height:48px; font-size:16px; }
  .score-center{ font-size:clamp(40px, 13vw, 52px); }
  .score-divider{ display:none; }
  .match-clock-row{ gap:8px 14px; }
}
@media (max-width:420px){
  /* The clock row packs 3 label+value pairs plus a conditional "Paused"
     badge — past a certain point a wrapped 2-column arrangement starts
     looking accidental rather than deliberate, so the narrowest phones get
     a clean single column instead. */
  .match-clock-row{ flex-direction:column; }
}

/* Individual scoring: full-width switcher + guaranteed 3-equal-column
   summary on mobile — a deliberately different mobile treatment from the
   organizer scoring page's own (half-width) switcher, so it's scoped under
   .pm-indiv rather than changing the shared .bball-indiv-* rules those two
   pages both draw on for their (identical) colors/cards/typography. */
@media (max-width:767.98px){
  .pm-indiv .bball-indiv-switcher{ flex-direction:column; }
  .pm-indiv .bball-indiv-switch-btn{ width:100%; justify-content:center; min-height:44px; }
  .pm-indiv .bball-indiv-summary-stats{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
  .pm-indiv .bball-indiv-summary-stat{ min-width:0; }
}

/* Match info: label-over-value "stat card" tiles instead of a dt/dd list —
   scoped under .pm-matchinfo so organizer_status.html's own .kv is
   untouched. Two per row keeps Round/Status/Time/Venue scannable without
   ever needing more than 2 columns' worth of width. */
.pm-matchinfo .kv{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
.pm-matchinfo .pm-stat{ background:var(--bg-2); border-radius:var(--r-md); padding:10px 12px; }
.pm-matchinfo .pm-stat dt{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); }
.pm-matchinfo .pm-stat dd{ margin:3px 0 0; font-weight:700; font-size:14px; color:var(--navy);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Commentary: bounded height + internal scroll on mobile/tablet so a long
   feed can't push the Video section far down the page — scoped under
   .pm-commentary so the organizer score page's own .feed (no such cap) is
   untouched. */
@media (max-width:1023.98px){
  .pm-commentary .feed{ max-height:340px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .pm-commentary .feed li{ padding:12px 2px; }
}

/* Video CTA: less dead vertical space once it's competing with everything
   else for a phone's screen height. */
@media (max-width:767.98px){
  .watch-cta{ padding:22px 16px; }
}

/* forms */
.field{ margin-bottom:20px; }
.field label,.form-label{ display:block; font-size:13px; font-weight:700; margin-bottom:6px; color:var(--navy); }
.field input,.field select,.field textarea,.input{ width:100%; min-height:44px; background:#fff; border:1.5px solid var(--line-2); border-radius:var(--r-sm); color:var(--ink); font-family:var(--font-body); font-size:15px; padding:10px 14px; outline:none; transition:border-color .15s, box-shadow .15s; }
.field textarea{ min-height:auto; }
.field input::placeholder{ color:var(--muted); }
.field input:focus,.field select:focus,.field textarea:focus,.input:focus{ border-color:var(--orange); box-shadow:0 0 0 3px rgba(242,106,27,.14); }
.field .helptext,.helptext{ font-size:12px; color:var(--muted); margin-top:6px; }
.field.has-error input,.field.has-error textarea,.field.has-error select{ border-color:var(--live); }
.errorlist{ list-style:none; padding:0; margin:6px 0 0; color:var(--live); font-size:12px; }
.checkbox-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.checkbox-grid label,.radio-inline label{ font-weight:500; font-size:14px; display:flex; gap:8px; align-items:center; color:var(--ink); }
.form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
ul.radio-inline{ list-style:none; padding:0; display:flex; gap:16px; }

/* messages */
.messages{ margin:16px 0; display:grid; gap:8px; }
.msg{ padding:11px 15px; border-radius:var(--r-sm); font-size:14px; border:1px solid transparent; font-weight:500; }
.msg.success{ background:color-mix(in srgb,var(--green) 10%,#fff); color:#2f8a2c; border-color:color-mix(in srgb,var(--green) 30%,#fff); }
.msg.error{ background:color-mix(in srgb,var(--live) 9%,#fff); color:var(--live); border-color:color-mix(in srgb,var(--live) 28%,#fff); }
.msg.warning{ background:color-mix(in srgb,var(--gold) 12%,#fff); color:#a9760a; border-color:color-mix(in srgb,var(--gold) 32%,#fff); }
.msg.info{ background:color-mix(in srgb,var(--blue) 9%,#fff); color:var(--blue); border-color:color-mix(in srgb,var(--blue) 28%,#fff); }

/* avatar */
.avatar{ width:36px; height:36px; border-radius:50%; background:var(--navy); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:14px; overflow:hidden; }

/* nav chevron */
.cev{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; opacity:.6; flex:none; }

/* role-chooser cards on /login and /signup */
.authcard{ display:flex; flex-direction:column; text-align:center; align-items:center; padding:26px 22px; transition:transform .25s var(--ease), box-shadow .25s, border-color .25s; }
a.authcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line-2); text-decoration:none; }
.authcard__ic{ width:56px; height:56px; border-radius:16px; display:grid; place-items:center; font-size:26px; background:var(--bg-2); border:1px solid var(--line); margin-bottom:14px; }
.authcard h3{ font-size:18px; }
.authcard p{ margin-top:8px; }
.authcard .btn{ width:100%; }

/* loading / skeleton states (live polling, slow images) */
.skeleton{ position:relative; overflow:hidden; background:var(--bg-3); border-radius:var(--r-sm); color:transparent !important; }
.skeleton::after{ content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation:shimmer 1.3s infinite; }
@keyframes shimmer{ to{ transform:translateX(100%); } }
@media (prefers-reduced-motion: reduce){ .skeleton::after{ animation:none; } }
.is-updating{ opacity:.55; transition:opacity .2s; }

/* an empty widget should say so, not render as a blank slab */
.empty--sm{ padding:22px; font-size:14px; }

/* mobile menu */
.mmenu{ position:fixed; inset:0; z-index:var(--z-menu); background:rgba(27,35,64,.98); backdrop-filter:blur(8px); display:none; flex-direction:column; padding:82px 26px 30px; }
.mmenu.on{ display:flex; }
.mmenu a{ font-family:var(--font-display); font-size:24px; font-weight:800; color:#fff; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.mmenu a:hover{ text-decoration:none; }
.mmenu__x{ position:absolute; top:18px; right:18px; width:44px; height:44px; border-radius:11px; border:1.6px solid rgba(255,255,255,.3); display:grid; place-items:center; color:#fff; }
.mmenu .btn{ margin-top:22px; }

/* ============ RESPONSIVE ============ */
@media (max-width:1000px){
  .hero__inner{ grid-template-columns:1fr; gap:34px; } .hcard{ max-width:460px; }
  .tgrid{ grid-template-columns:repeat(2,1fr); } .tcard--feat{ grid-column:span 2; }
  .bento{ grid-template-columns:repeat(2,1fr); } .bx--big{ grid-column:span 2; }
  .hl-grid{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .foot__grid{ grid-template-columns:1fr 1fr; } .foot__brand{ grid-column:span 2; }
  .two-col{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .nav__pill{ display:none; } .nav__login{ display:none; } .nav__burger{ display:flex; }
  .nav__row{ grid-template-columns:1fr auto; }
  .sec-head{ flex-direction:column; align-items:flex-start; }
  .sports-grid{ grid-template-columns:repeat(2,1fr); }
  .tgrid{ grid-template-columns:1fr; } .tcard--feat{ grid-column:span 1; flex-direction:column; } .tcard--feat .tcard__cover{ min-width:auto; }
  .org{ padding:26px; } .steps{ grid-template-columns:1fr; }
  /* Card and hero actions stack instead of overflowing — the actions must never
     be pushed out of the card, which is how they used to "disappear". */
  .dhero__actions,.hero__actions{ flex-direction:column; align-items:stretch; }
  .dhero__actions .btn,.hero__actions .btn{ width:100%; }
  .dhero__meta{ gap:10px 18px; }
  .form-grid{ grid-template-columns:1fr; }
  .mcard{ width:min(84vw,310px); }
}
@media (max-width:520px){
  /* Phones buy back room from the panel's own padding rather than from the
     gutter, so the panel keeps lining up with every other section. The stats
     drop their dividers so a wrapped second row never shows a dangling one. */
  .hero{ margin-top:14px; }
  .hero__inner{ padding:30px 24px 34px; }
  .hero__stats{ gap:22px; margin-top:32px; }
  .hero__stat{ padding-inline:0; border-left:0; }
  /* Single column drops .bx--big to one row, but the fixed 168px grid-auto-rows
     track stays — so its copy spills out of the card. Let rows grow past 168px
     when the content needs it; the 168px floor keeps the short cards as they are. */
  .bento{ grid-template-columns:1fr; grid-auto-rows:minmax(168px,auto); } .bx--big{ grid-column:span 1; grid-row:auto; } .bx{ grid-row:auto; }
  .hl-grid{ grid-template-columns:1fr; }
  .foot__grid{ grid-template-columns:1fr; } .foot__brand{ grid-column:span 1; }
  .hcard__sc{ font-size:40px; }
  .sports-grid{ grid-template-columns:repeat(2,1fr); }
  /* .competitor / .scoreboard / .score-center mobile sizing lives in the
     Public Match View responsive section below, alongside the rest of that
     page's breakpoint rules. */
  /* Tables get their own scroller rather than blowing out the page width. */
  .table-wrap{ -webkit-overflow-scrolling:touch; }
  th,td{ padding:10px 12px; font-size:13px; }
  .frow{ grid-template-columns:1fr auto 1fr; gap:8px; padding:11px 12px; }
  .frow .ft{ font-size:13px; }
  .tabs{ gap:0; } .tab{ padding:12px 14px; font-size:14px; }
}

/* ======================================================================
   Basketball score dashboard (organizer/score.html, basketball only —
   see the `is_basketball` gate in tournaments/views.py::score_fixture).
   Namespaced under .bball- so nothing here can collide with any other
   sport's scoring page or with the shared .panel/.tblcard/.dtable/.btn
   classes used elsewhere on this same page.
   ====================================================================== */
.bball-game-view{ background:var(--bg); }
.bball-game-view:fullscreen,
.bball-game-view.bball-pseudo-fullscreen{
  display:flex; flex-direction:column; justify-content:center; gap:0;
  width:100%; height:100%; min-height:100vh; overflow-y:auto;
  padding:20px; box-sizing:border-box;
}
.bball-game-view.bball-pseudo-fullscreen{ position:fixed; inset:0; z-index:1000; }
.bball-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; flex-wrap:wrap; }
.bball-back{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  border-radius:50%; background:var(--bg-2); color:var(--navy); font-size:18px; text-decoration:none; flex:none;
  border:none; cursor:pointer; font-family:inherit; }
.bball-back:hover{ background:var(--bg-3); }
.bball-team-name{ font-family:var(--font-display); font-weight:800; font-size:15px; flex:1 1 0; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bball-team-name--a{ text-align:left; color:var(--orange-d); }
.bball-team-name--b{ text-align:right; color:var(--navy); }
.bball-clock-wrap{ display:flex; flex-direction:column; align-items:center; gap:6px; flex:none; }
.bball-quarter-nav{ display:flex; align-items:center; gap:8px; }
.bball-quarter-nav form{ display:contents; }
.bball-quarter-arrow{ width:30px; height:30px; border-radius:50%; border:none; background:var(--bg-2);
  color:var(--navy); font-size:16px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.bball-quarter-arrow:hover{ background:var(--bg-3); }
.bball-quarter-pill{ font-family:var(--font-display); font-weight:800; font-size:13px; padding:6px 16px;
  border-radius:var(--r-pill); border:1.6px solid var(--navy); color:var(--navy); min-width:52px; text-align:center; }
.bball-menu{ position:relative; flex:none; }
.bball-menu > summary{ list-style:none; display:inline-flex; align-items:center; justify-content:center; width:40px;
  height:40px; border-radius:50%; background:var(--bg-2); color:var(--navy); font-size:18px; cursor:pointer; }
.bball-menu > summary::-webkit-details-marker{ display:none; }
.bball-menu[open] > summary{ background:var(--bg-3); }
.bball-menu-panel{ position:absolute; right:0; top:48px; z-index:20; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow); padding:8px; display:flex; flex-direction:column; gap:4px;
  min-width:230px; }
.bball-menu-form{ display:contents; }
.bball-menu-item{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:none;
  border:none; padding:10px 12px; border-radius:8px; font-weight:600; font-size:14px; color:var(--ink); cursor:pointer;
  font-family:var(--font-body); }
.bball-menu-item:hover{ background:var(--bg-2); }
.bball-menu-item:disabled{ opacity:.45; cursor:not-allowed; }
.bball-menu-item:disabled:hover{ background:none; }
.bball-menu-item--danger{ color:var(--live); }
.bball-menu-extra{ display:flex; align-items:center; gap:6px; padding:2px 12px 6px; }
.bball-menu-extra .input{ padding:8px; font-size:13px; min-width:0; }

.bball-dashboard{ margin-top:28px; }
.bball-board-row{ display:flex; align-items:center; justify-content:center; gap:24px; flex-wrap:wrap; }
.bball-fouls-card{ background:var(--bg-2); border-radius:var(--r-lg); padding:12px 18px; text-align:center; min-width:96px; }
.bball-fouls-label{ display:block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); }
.bball-fouls-count{ display:block; font-family:var(--font-score); font-weight:700; font-size:28px; color:var(--navy);
  margin:4px 0; }
.bball-fouls-btns{ display:flex; gap:6px; justify-content:center; }
.bball-fouls-btns form{ display:contents; }
.bball-fouls-btn{ width:30px; height:30px; border-radius:8px; border:none; background:var(--bg-3); color:var(--navy);
  font-weight:800; font-size:16px; cursor:pointer; font-family:var(--font-body); }
.bball-fouls-btn--plus{ background:var(--navy); color:#fff; }
.bball-fouls-btn:hover{ opacity:.85; }

.bball-scoreboard{ display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; }
.bball-score{ font-family:var(--font-score); font-weight:700; font-size:clamp(56px,9vw,96px); line-height:1;
  font-variant-numeric:tabular-nums; }
.bball-score--a{ color:var(--orange); }
.bball-score--b{ color:var(--navy); }
.bball-score-wrap{ position:relative; display:inline-flex; }
.bball-score-wrap form{ display:contents; }
.bball-score-adjust{ position:absolute; top:-4px; right:-10px; width:22px; height:22px; border-radius:50%;
  border:none; background:var(--bg-3); color:var(--ink-2); font-weight:800; font-size:13px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); }
.bball-score-adjust:hover{ background:var(--line-2); }

.bball-clock-stack{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.bball-digital-clock{ font-family:var(--font-score); font-variant-numeric:tabular-nums; font-weight:700;
  font-size:22px; color:var(--live); background:var(--navy); border-radius:var(--r-md); padding:6px 14px;
  letter-spacing:.04em; }
.bball-shot-clock{ font-family:var(--font-score); font-variant-numeric:tabular-nums; font-weight:700;
  font-size:16px; color:var(--gold); background:var(--navy); border-radius:var(--r-sm); padding:3px 12px;
  letter-spacing:.04em; }
.bball-clock-controls{ display:flex; align-items:center; gap:6px; }
.bball-clock-controls form{ display:contents; }
.bball-clock-icon-btn{ width:28px; height:28px; border-radius:50%; border:none; background:var(--bg-2);
  color:var(--navy); font-size:13px; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; }
.bball-clock-icon-btn:hover{ background:var(--bg-3); }
.bball-clock-icon-btn--sm{ width:22px; height:22px; font-size:11px; }
.bball-quarter-length-btn{ border:1.6px solid var(--line-2); background:#fff; color:var(--ink-2); font-weight:700;
  font-size:11px; padding:4px 10px; border-radius:var(--r-pill); cursor:pointer; font-family:var(--font-body); }
.bball-quarter-length-btn:hover{ border-color:var(--navy); color:var(--navy); }

/* Basketball pre-match setup screen (organizer/score.html, SCHEDULED state) */
.bball-setup-card{ margin:20px auto 0; max-width:440px; border-radius:var(--r-xl); box-shadow:var(--shadow);
  padding:30px 28px; }
.bball-setup-header{ display:flex; align-items:center; gap:14px; margin-bottom:26px; }
.bball-setup-icon{ flex:none; width:48px; height:48px; border-radius:var(--r-md); background:var(--bg-2);
  font-size:24px; display:inline-flex; align-items:center; justify-content:center; }
.bball-setup-header h3{ margin:0; font-size:18px; }
.bball-setup-header p{ margin:3px 0 0; font-size:13px; color:var(--muted); }
.bball-setup-section{ margin-bottom:24px; }
.bball-setup-section:last-of-type{ margin-bottom:0; }
.bball-setup-label{ display:block; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--navy); margin-bottom:10px; }
.bball-setup-options{ display:flex; gap:10px; }
.bball-setup-option{ position:relative; flex:1; display:flex; align-items:center; justify-content:center;
  padding:13px 10px; border-radius:var(--r-md); border:1.6px solid var(--line-2); background:#fff;
  color:var(--ink-2); font-weight:700; font-size:14px; font-family:var(--font-body); text-align:center;
  cursor:pointer; transition:all .18s var(--ease); }
.bball-setup-option:hover{ border-color:var(--orange); color:var(--navy); }
.bball-setup-option input{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.bball-setup-option:has(input:checked){ background:var(--orange); border-color:var(--orange); color:#fff;
  box-shadow:0 8px 18px -10px rgba(242,106,27,.65); }
.bball-setup-option:has(input:focus-visible){ box-shadow:0 0 0 3px rgba(242,106,27,.25); }
.bball-setup-toggle-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.bball-setup-toggle-copy{ min-width:0; }
.bball-setup-toggle-title{ font-weight:700; font-size:14.5px; color:var(--navy); }
.bball-setup-toggle-row .helptext{ margin-top:3px; }
.bball-setup-switch{ position:relative; flex:none; display:inline-flex; cursor:pointer; }
.bball-setup-switch input{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.bball-setup-switch-track{ width:46px; height:27px; border-radius:var(--r-pill); background:var(--line-2);
  padding:3px; display:inline-flex; align-items:center; transition:background .2s var(--ease); }
.bball-setup-switch-thumb{ width:21px; height:21px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm);
  transition:transform .2s var(--ease); }
.bball-setup-switch:has(input:checked) .bball-setup-switch-track{ background:var(--orange); }
.bball-setup-switch:has(input:checked) .bball-setup-switch-thumb{ transform:translateX(19px); }
.bball-setup-switch:has(input:focus-visible) .bball-setup-switch-track{ box-shadow:0 0 0 3px rgba(242,106,27,.25); }
.bball-setup-start{ width:100%; margin-top:6px; }

/* Basketball individual-scoring panel (organizer/score.html #individual-scoring) —
   team switcher + per-team stat cards. `--team-accent` is set inline per team
   (orange for the first participant, navy for the second) so one small rule
   set drives both sides' highlighted/active look. */
.bball-indiv-switcher{ display:flex; justify-content:center; gap:14px; margin-top:16px; flex-wrap:wrap; }
.bball-indiv-switch-btn{ display:flex; align-items:center; gap:10px; padding:10px 18px 10px 10px;
  border-radius:var(--r-pill); border:1.6px solid var(--line-2); background:#fff; cursor:pointer;
  font-family:var(--font-body); transition:all .2s var(--ease); }
.bball-indiv-switch-btn:hover{ border-color:var(--team-accent); }
.bball-indiv-switch-btn.is-active{ border-color:var(--team-accent);
  background:color-mix(in srgb, var(--team-accent) 12%, #fff);
  box-shadow:0 6px 16px -10px var(--team-accent); }
.bball-indiv-switch-crest{ flex:none; width:36px; height:36px; border-radius:50%; background:var(--team-accent);
  color:#fff; display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-display);
  font-weight:800; font-size:13px; overflow:hidden; }
.bball-indiv-switch-crest img{ width:100%; height:100%; object-fit:cover; }
.bball-indiv-switch-name{ font-weight:700; font-size:14px; color:var(--navy); }
.bball-indiv-team-panel{ display:none; margin-top:20px; }
.bball-indiv-team-panel.is-active{ display:block; animation:bballIndivFadeIn .28s var(--ease); }
@keyframes bballIndivFadeIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
.bball-indiv-summary{ border-radius:var(--r-lg); background:var(--bg-2); padding:16px 18px;
  border-left:4px solid var(--team-accent); }
.bball-indiv-summary-name{ font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--navy); }
.bball-indiv-summary-stats{ display:flex; gap:22px; margin-top:10px; flex-wrap:wrap; }
.bball-indiv-summary-stat{ display:flex; flex-direction:column; }
.bball-indiv-summary-stat b{ font-family:var(--font-score); font-size:20px; color:var(--navy); }
.bball-indiv-summary-stat span{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); margin-top:2px; }
.bball-indiv-top{ display:flex; align-items:center; gap:12px; margin-top:14px; padding:12px 16px;
  border-radius:var(--r-md); background:color-mix(in srgb, var(--gold) 14%, #fff);
  border:1px solid color-mix(in srgb, var(--gold) 35%, #fff); }
.bball-indiv-top-badge{ flex:none; font-weight:800; font-size:12px; color:#9a6a06; background:#fff;
  border-radius:var(--r-pill); padding:5px 10px; white-space:nowrap; }
.bball-indiv-top-name{ font-weight:700; font-size:14px; color:var(--navy); }
.bball-indiv-top-points{ margin-left:auto; font-family:var(--font-score); font-weight:700; font-size:15px;
  color:#9a6a06; white-space:nowrap; }
.bball-indiv-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:12px; margin-top:14px; }
.bball-indiv-card{ display:flex; gap:12px; padding:14px 16px; border-radius:var(--r-lg); background:#fff;
  border:1px solid var(--line); box-shadow:var(--shadow-sm); transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
.bball-indiv-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.bball-indiv-card-jersey{ flex:none; width:38px; height:38px; border-radius:50%; background:var(--bg-2);
  color:var(--navy); font-family:var(--font-score); font-weight:700; font-size:13px; display:inline-flex;
  align-items:center; justify-content:center; }
.bball-indiv-card-body{ min-width:0; flex:1; }
.bball-indiv-card-name{ font-weight:700; font-size:14px; color:var(--navy); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.bball-indiv-card-stats{ display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:6px; font-size:12px; color:var(--muted); }
.bball-indiv-card-stats b{ color:var(--ink); font-family:var(--font-score); }
.bball-indiv-card-stats .bball-indiv-points b{ color:var(--team-accent); font-size:14px; }
.bball-indiv-empty{ text-align:center; padding:28px 12px; color:var(--muted); font-size:14px; margin-top:14px;
  border:1.5px dashed var(--line-2); border-radius:var(--r-lg); }

.bball-buttons-row{ display:flex; align-items:center; justify-content:center; gap:28px; margin-top:28px; flex-wrap:wrap; }
.bball-team-buttons{ display:flex; gap:14px; }
.bball-point-btn{ width:64px; height:64px; border-radius:50%; border:none; color:#fff; font-family:var(--font-display);
  font-weight:800; font-size:17px; cursor:pointer; box-shadow:var(--shadow-sm); transition:transform .18s var(--ease); }
.bball-point-btn:hover{ transform:translateY(-2px); }
.bball-point-btn--a{ background:var(--orange); }
.bball-point-btn--b{ background:var(--navy); }

.bball-player-dialog{ border:none; border-radius:var(--r-lg); padding:20px; box-shadow:var(--shadow); max-width:340px;
  width:90vw; }
.bball-player-dialog::backdrop{ background:rgba(10,14,30,.45); }
.bball-roster-list{ display:flex; flex-direction:column; gap:6px; margin:14px 0; max-height:280px; overflow-y:auto; }
.bball-roster-btn{ text-align:left; padding:10px 12px; border-radius:8px; border:1px solid var(--line); background:#fff;
  font-weight:600; font-size:14px; color:var(--navy); cursor:pointer; font-family:var(--font-body); }
.bball-roster-btn:hover{ background:var(--bg-2); border-color:var(--navy); }
.bball-roster-btn--team{ border-style:dashed; color:var(--ink-2); font-style:italic; }

.bball-highlight{ animation:bballHighlight 1.5s ease-out; }
@keyframes bballHighlight{ 0%{ box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 45%,#fff); } 100%{ box-shadow:none; } }

@media (max-width:640px){
  .bball-header{ gap:8px; }
  .bball-team-name{ font-size:12px; }
  .bball-board-row{ gap:14px; }
  .bball-score{ font-size:clamp(40px,14vw,64px); }
  .bball-buttons-row{ gap:14px; }
  .bball-team-buttons{ gap:8px; }
  .bball-point-btn{ width:52px; height:52px; font-size:14px; }
  .bball-fouls-card{ min-width:76px; padding:8px 10px; }
  .bball-menu-panel{ min-width:200px; right:-8px; }
  .bball-scoreboard{ gap:10px; }
  .bball-digital-clock{ font-size:17px; padding:5px 10px; }
  .bball-shot-clock{ font-size:13px; padding:2px 9px; }
  .bball-clock-icon-btn{ width:24px; height:24px; font-size:11px; }
  .bball-clock-icon-btn--sm{ width:20px; height:20px; font-size:10px; }
  .bball-quarter-length-btn{ font-size:10px; padding:3px 8px; }
  .bball-score-adjust{ width:18px; height:18px; font-size:11px; top:-2px; right:-6px; }
  .bball-setup-card{ padding:22px 18px; margin-top:14px; }
  .bball-setup-header{ gap:10px; margin-bottom:20px; }
  .bball-setup-icon{ width:40px; height:40px; font-size:20px; }
  .bball-setup-options{ flex-wrap:wrap; }
  .bball-setup-option{ flex:1 1 calc(50% - 5px); min-width:90px; }
  .bball-indiv-switcher{ gap:8px; }
  .bball-indiv-switch-btn{ flex:1 1 calc(50% - 4px); padding:8px 12px 8px 8px; }
  .bball-indiv-switch-crest{ width:30px; height:30px; font-size:11px; }
  .bball-indiv-switch-name{ font-size:12.5px; }
  .bball-indiv-summary-stats{ gap:14px; }
  .bball-indiv-cards{ grid-template-columns:1fr; }
  .bball-indiv-top{ flex-wrap:wrap; }
  .bball-indiv-top-points{ margin-left:0; }
}

/* ======================================================================
   Participants page component kit (template/organizer/participants.html).
   Two namespaces, both used ONLY by that template, so none of it can
   reach the shared .panel / .field / .btn rules or any other screen:

     .tmc-*   the Team Management Center panel (right column) plus the
              card / label / input / drop-zone / CTA pieces the roster
              cards in the left column reuse, so both columns read as one
              design system.
     .trc-*   the team roster cards themselves (left column).

   `--sp` is the accent. It defaults to Flame Orange and is re-pointed at
   the tournament's sport colour by the global .tag-<sport> class the
   template puts on .tmc / .trc, so the page matches the tournament
   header, the match cards and the basketball scoreboard.
   ====================================================================== */
.tmc{ --sp:var(--orange); position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow); }

/* ---- header: dark "broadcast" strip, same navy + accent glow language as
   .hero and .org use on the public pages ---- */
.tmc__head{ padding:22px; color:#fff; background:
    radial-gradient(430px 320px at 100% -45%, color-mix(in srgb,var(--sp) 46%, transparent), transparent 62%),
    radial-gradient(360px 260px at -12% 135%, rgba(30,136,229,.20), transparent 64%),
    linear-gradient(180deg,#232c52 0%, #141a30 100%); }
.tmc__headtop{ display:flex; align-items:center; gap:13px; }
.tmc__crest{ flex:none; width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; }
.tmc__crest .ico{ width:23px; height:23px; }
.tmc__headtext{ min-width:0; }
.tmc__eyebrow{ display:block; font-family:var(--font-display); font-weight:800; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:color-mix(in srgb,var(--sp) 45%, #fff); }
.tmc__title{ font-family:var(--font-display); font-weight:900; font-style:italic; font-size:19px;
  letter-spacing:-.02em; color:#fff; margin-top:4px; }
.tmc__sub{ color:#b7bfd8; font-size:12.5px; line-height:1.5; margin-top:12px; }
/* live roster counter — a read-out of the list on the left, not a control */
.tmc__meter{ display:flex; align-items:center; gap:9px; margin-top:14px; padding-top:14px;
  border-top:1px solid rgba(255,255,255,.13); }
.tmc__meter .n{ font-family:var(--font-score); font-weight:700; font-size:22px; line-height:1; color:#fff; }
.tmc__meter .l{ font-family:var(--font-score); font-weight:600; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:#9aa3c0; }
.tmc__meter .dot{ width:6px; height:6px; border-radius:50%; background:var(--sp); flex:none; }

/* ---- tab switcher: CSS-only (radio + :checked), so the panel still works
   with JavaScript disabled ---- */
.tmc__tabin{ position:absolute; top:0; left:0; width:1px; height:1px; opacity:0; pointer-events:none; }
.tmc__tabs{ display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:5px;
  background:var(--bg-2); border-bottom:1px solid var(--line); }
.tmc__tab{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 8px;
  border-radius:var(--r-md); font-family:var(--font-display); font-weight:800; font-size:12px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--muted); cursor:pointer;
  -webkit-user-select:none; user-select:none;
  transition:color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); }
.tmc__tab .ico{ width:16px; height:16px; }
.tmc__tab:hover{ color:var(--navy); }
#tmc-tab-add:checked ~ .tmc__tabs [for="tmc-tab-add"],
#tmc-tab-import:checked ~ .tmc__tabs [for="tmc-tab-import"]{
  background:#fff; color:var(--navy); box-shadow:var(--shadow-sm); }
#tmc-tab-add:focus-visible ~ .tmc__tabs [for="tmc-tab-add"],
#tmc-tab-import:focus-visible ~ .tmc__tabs [for="tmc-tab-import"]{
  outline:3px solid var(--blue); outline-offset:-2px; }

.tmc__panel{ display:none; padding:18px; }
#tmc-tab-add:checked ~ .tmc__panel--add,
#tmc-tab-import:checked ~ .tmc__panel--import{ display:block; animation:tmcFade .3s var(--ease); }
/* the individual-entrant variant has no tabs, so it is always on. Its fields
   still come from partials/form.html, whose .field carries its own bottom
   margin — drop the last one so it doesn't double up with .tmc-cta's. */
.tmc__panel--solo{ display:block; }
.tmc__panel--solo .field:last-of-type{ margin-bottom:0; }
@keyframes tmcFade{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }

/* ---- the two cards inside the panels ---- */
.tmc-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:18px;
  box-shadow:var(--shadow-sm); }
.tmc-card--import{ --sp:var(--blue); }
.tmc-card__head{ display:flex; align-items:flex-start; gap:12px; padding-bottom:15px; margin-bottom:17px;
  border-bottom:1px solid var(--line); }
.tmc-card__ic{ flex:none; width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--sp) 13%,#fff); color:var(--sp); }
.tmc-card__ic .ico{ width:19px; height:19px; }
.tmc-card__t{ font-family:var(--font-display); font-weight:800; font-size:15.5px; color:var(--navy); }
.tmc-card__s{ font-size:12.5px; line-height:1.5; color:var(--muted); margin-top:4px; }

/* ---- fields ---- */
.tmc-field+.tmc-field{ margin-top:16px; }
.tmc-label{ display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:800;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--navy); margin-bottom:9px; }
.tmc-label .ico{ width:15px; height:15px; color:var(--sp); }
.tmc-input{ width:100%; min-height:50px; background:var(--bg-2); border:1.6px solid transparent;
  border-radius:var(--r-md); font-family:var(--font-body); font-weight:600; font-size:15px; color:var(--ink);
  padding:12px 15px; outline:none;
  transition:background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease); }
.tmc-input::placeholder{ color:var(--muted); font-weight:500; }
.tmc-input:hover{ border-color:var(--line-2); }
.tmc-input:focus{ background:#fff; border-color:var(--sp);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--sp) 15%, transparent); }
.tmc-input:focus-visible{ outline:none; }
.tmc-textarea{ min-height:140px; resize:vertical; font-family:var(--font-mono, monospace); font-weight:500; font-size:13px; line-height:1.5; }
.tmc-err{ margin-top:7px; font-size:12px; font-weight:600; color:var(--live); }

/* ---- drop zone. The real <input type="file"> is stretched across the whole
   zone at opacity 0: that keeps the browser's own click-to-browse, native
   drag-and-drop, keyboard focus and required-field validation intact — the
   JS below only paints state on top of it. ---- */
.tmc-drop{ position:relative; display:flex; align-items:center; gap:14px; padding:15px;
  border:1.8px dashed var(--line-2); border-radius:var(--r-lg); background:var(--bg-2);
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease),
             box-shadow .2s var(--ease); }
.tmc-drop:hover{ border-color:var(--sp); background:color-mix(in srgb,var(--sp) 6%,#fff);
  transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.tmc-drop:has(input:focus-visible){ border-color:var(--sp); border-style:solid;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--sp) 22%, transparent); }
.tmc-drop.is-drag{ border-color:var(--sp); border-style:solid; transform:none;
  background:color-mix(in srgb,var(--sp) 11%,#fff);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--sp) 16%, transparent); }
.tmc-drop.is-filled{ border-style:solid; border-color:color-mix(in srgb,var(--green) 45%,#fff);
  background:color-mix(in srgb,var(--green) 6%,#fff); }
.tmc-drop__file{ position:absolute; inset:0; }
.tmc-drop__file input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer;
  font-size:0; }
.tmc-drop__thumb{ position:relative; flex:none; width:54px; height:54px; border-radius:14px; overflow:hidden;
  display:grid; place-items:center; background:#fff; border:1px solid var(--line); color:var(--sp); }
.tmc-drop__thumb .ico{ width:22px; height:22px; }
.tmc-drop__thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; }
.tmc-drop.has-img .tmc-drop__thumb img{ display:block; }
.tmc-drop.has-img .tmc-drop__thumb .ico{ display:none; }
.tmc-drop.is-filled .tmc-drop__thumb{ border-color:color-mix(in srgb,var(--green) 40%,#fff);
  color:var(--green); }
.tmc-drop__copy{ min-width:0; flex:1; }
/* both are <span>s inside a form control's label copy — they must be blocks
   for the stacking and the ellipsis below to apply at all */
.tmc-drop__t,.tmc-drop__s{ display:block; }
.tmc-drop__t{ font-weight:700; font-size:14px; color:var(--navy);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tmc-drop__s{ font-size:12px; color:var(--muted); margin-top:4px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tmc-drop__browse{ color:var(--sp); font-weight:700; }
/* sits above the stretched input so it can be clicked to reset the choice */
.tmc-drop__clear{ position:absolute; top:8px; right:8px; z-index:2; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; background:#fff; border:1px solid var(--line-2); color:var(--muted);
  box-shadow:var(--shadow-sm); transition:color .18s, border-color .18s, transform .18s var(--ease); }
.tmc-drop__clear:hover{ color:var(--live); border-color:var(--live); transform:scale(1.08); }
.tmc-drop__clear .ico{ width:13px; height:13px; stroke-width:2.4; }
.tmc-drop__clear[hidden]{ display:none; }

/* ---- format hints + file-spec note ---- */
.tmc-hints{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.tmc-hint{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-score); font-weight:600;
  font-size:11.5px; padding:5px 10px; border-radius:var(--r-pill); background:var(--bg-2);
  border:1px solid var(--line); color:var(--ink-2); }
.tmc-note{ margin-top:14px; padding:11px 13px; border-radius:var(--r-md); font-size:12.5px; line-height:1.55;
  color:var(--ink-2); background:color-mix(in srgb,var(--sp) 7%,#fff);
  border:1px solid color-mix(in srgb,var(--sp) 22%,#fff); }
.tmc-note b{ color:var(--navy); }
.tmc-note code{ font-family:var(--font-score); font-weight:700; color:var(--navy); background:#fff;
  border:1px solid var(--line); border-radius:6px; padding:1px 7px; }

/* ---- CTAs. Keeps the site's pill button shape, adds the taller stance,
   display-face lettering and a single light sweep on hover. ---- */
.tmc-cta{ position:relative; overflow:hidden; width:100%; min-height:52px; margin-top:18px;
  font-family:var(--font-display); font-weight:800; font-size:13.5px; letter-spacing:.07em;
  text-transform:uppercase; }
.tmc-cta::after{ content:''; position:absolute; top:0; left:-65%; width:42%; height:100%;
  transform:skewX(-18deg); pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent);
  transition:left .6s var(--ease); }
.tmc-cta:hover::after{ left:125%; }
.tmc-cta--alt{ background:var(--navy); color:#fff; box-shadow:0 8px 20px -8px rgba(27,35,64,.55); }
.tmc-cta--alt:hover{ background:var(--navy-2); transform:translateY(-2px);
  box-shadow:0 12px 26px -8px rgba(27,35,64,.62); }
@media (prefers-reduced-motion: reduce){ .tmc-cta::after{ display:none; } }

/* submitting state — the button keeps its colour and swaps its icon for a
   spinner, instead of the flat 50% dim .btn:disabled would otherwise give */
.tmc-cta.is-loading{ pointer-events:none; }
.tmc-cta.is-loading:disabled,.tmc-cta.is-loading.disabled{ opacity:.9; }
.tmc-cta.is-loading .ico{ display:none; }
.tmc-cta.is-loading::before{ content:''; width:16px; height:16px; border-radius:50%; flex:none;
  border:2px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color:currentColor;
  animation:tmcSpin .7s linear infinite; }
@keyframes tmcSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .tmc-cta.is-loading::before{ animation-duration:2s; } }

/* two-up field row (Player name + Jersey number). The margin reset matters:
   these are grid cells, so .tmc-field+.tmc-field's stacking margin would push
   the second field's label out of line with the first. */
.tmc-row{ display:grid; grid-template-columns:1fr 132px; gap:12px; align-items:start; }
.tmc-row > .tmc-field + .tmc-field{ margin-top:0; }

@media (max-width:560px){
  .tmc__head{ padding:18px; }
  .tmc__title{ font-size:17.5px; }
  .tmc__panel{ padding:14px; }
  .tmc-card{ padding:15px; }
  .tmc-drop{ flex-direction:column; align-items:stretch; text-align:center; gap:11px; padding:18px 14px; }
  .tmc-drop__thumb{ margin-inline:auto; }
  .tmc-hints{ justify-content:center; }
  .tmc-row{ grid-template-columns:1fr; }
}

/* ----------------------------------------------------------------------
   .trc — team roster card (left column of the Participants page)
   ---------------------------------------------------------------------- */
.trc{ --sp:var(--orange); background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  overflow:hidden; box-shadow:var(--shadow-sm); transition:box-shadow .25s var(--ease); }
.trc:hover{ box-shadow:var(--shadow); }

.trc__head{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:20px 22px;
  background:linear-gradient(180deg, var(--bg-2) 0%, #fff 100%); border-bottom:1px solid var(--line); }
.trc__crest{ position:relative; flex:none; width:62px; height:62px; border-radius:18px; overflow:hidden;
  display:grid; place-items:center; color:#fff; font-family:var(--font-display); font-weight:800;
  font-size:20px; letter-spacing:-.02em;
  background:linear-gradient(145deg, var(--sp), color-mix(in srgb, var(--sp) 45%, var(--navy)));
  box-shadow:0 12px 26px -14px color-mix(in srgb, var(--sp) 80%, transparent); }
.trc__crest img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.trc__id{ min-width:0; flex:1 1 210px; }
.trc__name{ font-family:var(--font-display); font-weight:900; font-style:italic;
  font-size:clamp(1.15rem, 2.1vw, 1.5rem); letter-spacing:-.025em; line-height:1.1; color:var(--navy);
  overflow-wrap:anywhere; }
.trc__meta{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:10px; }
.trc__count{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-score);
  font-weight:600; font-size:12.5px; color:var(--muted); }
.trc__count .ico{ width:15px; height:15px; }
.trc__acts{ display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; }
.trc__acts form{ display:contents; }
.trc-remove{ background:#fff; color:var(--live); border:1.6px solid color-mix(in srgb,var(--live) 32%,#fff); }
.trc-remove:hover{ background:var(--live); border-color:var(--live); color:#fff; transform:translateY(-2px); }

/* status pill */
.trc-status{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-display);
  font-weight:800; font-size:11px; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  padding:6px 13px 6px 10px; border-radius:var(--r-pill);
  background:var(--bg-3); color:var(--ink-2); border:1px solid var(--line-2); }
.trc-status .ico{ width:14px; height:14px; stroke-width:2.6; }
.trc-status--approved{ background:color-mix(in srgb,var(--green) 13%,#fff); color:#2f8a2c;
  border-color:color-mix(in srgb,var(--green) 34%,#fff); }
.trc-status--pending{ background:color-mix(in srgb,var(--gold) 16%,#fff); color:#a9760a;
  border-color:color-mix(in srgb,var(--gold) 38%,#fff); }
.trc-status--rejected{ background:color-mix(in srgb,var(--live) 11%,#fff); color:var(--live);
  border-color:color-mix(in srgb,var(--live) 30%,#fff); }

.trc__body{ display:flex; flex-direction:column; gap:20px; padding:20px 22px 22px; }

/* stat strip */
.trc-stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:10px; }
.trc-stat{ position:relative; overflow:hidden; padding:13px 15px 14px; border-radius:var(--r-md);
  background:var(--bg-2); border:1px solid var(--line); }
.trc-stat::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--sp); opacity:.85; }
.trc-stat .k{ display:flex; align-items:center; gap:6px; font-family:var(--font-score); font-weight:600;
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.trc-stat .v{ font-family:var(--font-score); font-weight:700; font-size:26px; line-height:1.05;
  color:var(--navy); margin-top:6px; }
.trc-stat .v--word{ font-family:var(--font-display); font-weight:800; font-size:15px; margin-top:9px;
  letter-spacing:-.01em; }

/* section heading inside a roster card */
.trc-sec{ display:flex; align-items:center; gap:9px; margin-bottom:13px; }
.trc-sec__t{ display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:800;
  font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--navy); }
.trc-sec__t .ico{ width:16px; height:16px; color:var(--sp); }
.trc-sec__rule{ flex:1; height:1px; background:var(--line); }

/* roster grid — 3 up on desktop, 2 up on tablet, 1 up on phones */
.trc-roster{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.trc-player{ display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:var(--r-md);
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.trc-player:hover{ transform:translateY(-3px); box-shadow:var(--shadow);
  border-color:color-mix(in srgb, var(--sp) 40%, #fff); }
.trc-player__jersey{ flex:none; width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-score); font-weight:700; font-size:15px; color:var(--navy);
  background:var(--bg-2); border:1.5px solid var(--line);
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.trc-player__jersey .ico{ width:18px; height:18px; color:var(--muted); }
.trc-player:hover .trc-player__jersey{ background:var(--sp); border-color:var(--sp); color:#fff; }
.trc-player:hover .trc-player__jersey .ico{ color:#fff; }
.trc-player__body{ display:block; min-width:0; flex:1; }
.trc-player__name{ display:block; font-weight:700; font-size:14px; color:var(--navy);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trc-player__tags{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:5px; }
.trc-player__role{ font-family:var(--font-score); font-weight:600; font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); }
.trc-flag{ font-family:var(--font-body); font-weight:800; font-size:9.5px; letter-spacing:.07em;
  text-transform:uppercase; padding:2px 8px; border-radius:var(--r-pill); white-space:nowrap; }
.trc-flag--captain{ background:color-mix(in srgb,var(--gold) 18%,#fff); color:#a9760a; }
.trc-flag--pending{ background:color-mix(in srgb,var(--blue) 13%,#fff); color:var(--blue); }
.trc-empty{ padding:28px 18px; text-align:center; font-size:13.5px; color:var(--muted);
  background:var(--bg-2); border:1.5px dashed var(--line-2); border-radius:var(--r-lg); }
.trc-empty .ico{ width:24px; height:24px; margin:0 auto 9px; color:var(--line-2); }

/* Add Player + Import sit side by side wherever there is room — with eight
   teams on a page, stacking them full width made each card ~1300px tall.
   auto-fit means the non-basketball case (Add Player alone) still spans the
   full width instead of leaving a dead half-column. */
/* min() clamp is load-bearing: a bare minmax(300px,1fr) keeps a 300px floor
   even when the card is narrower, which pushed the whole page sideways on a
   320px phone. */
.trc-tools{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(300px,100%),1fr)); gap:14px; }
/* equal-height cards with both CTAs on the bottom edge, so the shorter card
   doesn't leave a block of dead white space beside the taller one */
.trc-tools > .tmc-card{ display:flex; flex-direction:column; }
.trc-tools > .tmc-card > form{ flex:1; display:flex; flex-direction:column; gap:14px; }
.trc-tools > .tmc-card > form > .tmc-hints,
.trc-tools > .tmc-card > form > .tmc-note{ margin-top:0; }
.trc-tools > .tmc-card > form > .tmc-cta{ margin-top:auto; }

@media (max-width:1199.98px){
  .trc-roster{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:767.98px){
  .trc-roster{ grid-template-columns:1fr; }
  .trc__head{ padding:16px; gap:13px; }
  .trc__body{ padding:16px; gap:16px; }
  .trc__crest{ width:52px; height:52px; border-radius:15px; font-size:17px; }
  /* actions drop to their own full-width row rather than squeezing the name */
  .trc__acts{ width:100%; margin-left:0; }
  .trc__acts .btn{ flex:1 1 auto; }
}
@media (max-width:560px){
  /* keep the three tiles as one scoreboard-style row instead of letting
     auto-fit strand the third one on a half-width line of its own */
  .trc-stats{ grid-template-columns:repeat(3,1fr); gap:8px; }
  .trc-stat{ padding:11px 10px 12px; }
  .trc-stat .k{ font-size:9.5px; letter-spacing:.05em; }
  .trc-stat .v{ font-size:22px; }
  .trc-stat .v--word{ font-size:13px; }
}
@media (max-width:480px){
  .trc__acts .btn{ flex:1 1 100%; }
}

/* ======================================================================
   Match Control Center — the Enter result / Stream link / Post commentary
   cards at the foot of organizer/score.html ONLY. Namespaced under .mcc-
   so nothing here can reach the .bball-* game view above it, the shared
   .panel / .input / .feed / .btn rules, or any other screen.

   `--sp` is the per-card accent, so the three cards read as one family
   while still being tellable apart at a glance.
   ====================================================================== */
.mcc{ --sp:var(--orange); margin-top:26px; }
.mcc__head{ display:flex; align-items:center; gap:13px; margin-bottom:16px; }
.mcc__ic{ flex:none; width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  color:#fff; background:linear-gradient(150deg, var(--navy-2), var(--navy));
  box-shadow:0 12px 26px -14px rgba(27,35,64,.75); }
.mcc__ic .ico{ width:22px; height:22px; }
.mcc__t{ font-family:var(--font-display); font-weight:900; font-style:italic; font-size:19px;
  letter-spacing:-.025em; color:var(--navy); line-height:1.1; }
.mcc__s{ font-size:12.5px; color:var(--muted); margin-top:4px; }
.mcc__grid{ display:grid; gap:16px; }

.mcc-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--shadow-sm); overflow:hidden; transition:box-shadow .25s var(--ease); }
.mcc-card:hover{ box-shadow:var(--shadow); }
.mcc-card--result{ --sp:var(--orange); }
.mcc-card--stream{ --sp:var(--live); }
.mcc-card--comm{ --sp:var(--blue); }
.mcc-card__head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:15px 18px;
  background:var(--bg-2); border-bottom:1px solid var(--line); }
.mcc-card__ic{ flex:none; width:37px; height:37px; border-radius:12px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--sp) 14%, #fff); color:var(--sp); }
.mcc-card__ic .ico{ width:19px; height:19px; }
/* flex-basis 0 + min-width 0 so a long subtitle shrinks instead of wrapping
   the whole text block onto the line below the icon on a phone */
.mcc-card__text{ min-width:0; flex:1 1 0; }
.mcc-card__t{ font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--navy); }
.mcc-card__s{ font-size:12px; line-height:1.5; color:var(--muted); margin-top:3px; }
.mcc-card__body{ padding:18px; }

/* ---- the matchup ---- */
/* Default is the many-competitor shape (a lobby or a race); --duel is the
   two-sided team/head-to-head shape the basketball panel actually uses. */
.mcc-match{ display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill, minmax(min(210px,100%), 1fr)); }
.mcc-match--duel{ grid-template-columns:1fr auto 1fr; align-items:stretch; }
.mcc-side{ display:flex; flex-direction:column; align-items:center; gap:11px; text-align:center;
  padding:16px 12px; border-radius:var(--r-lg); background:var(--bg-2); border:1px solid var(--line); }
.mcc-crest{ position:relative; overflow:hidden; flex:none; width:56px; height:56px; border-radius:16px;
  display:grid; place-items:center; color:#fff; font-family:var(--font-display); font-weight:800;
  font-size:18px; letter-spacing:-.02em;
  background:linear-gradient(145deg, var(--sp), color-mix(in srgb, var(--sp) 45%, var(--navy)));
  box-shadow:0 10px 22px -12px color-mix(in srgb, var(--sp) 80%, transparent); }
/* same trick as the public scoreboard: the logo sits OVER the initials, so an
   image that 404s removes itself and the initials show through */
.mcc-crest img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mcc-side--b{ --sp:var(--navy); }
.mcc-side__name{ font-family:var(--font-display); font-weight:800; font-size:14.5px; line-height:1.2;
  color:var(--navy); overflow-wrap:anywhere; }
.mcc-side__in{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; width:100%; margin-top:2px; }
.mcc-vs{ align-self:center; justify-self:center; flex:none; font-family:var(--font-display); font-weight:900;
  font-style:italic; font-size:12.5px; letter-spacing:.08em; color:var(--muted);
  padding:8px 13px; border-radius:var(--r-pill); background:#fff; border:1.5px solid var(--line-2); }

/* ---- inputs ---- */
.mcc-in{ width:100%; min-height:50px; background:#fff; border:1.6px solid var(--line-2);
  border-radius:var(--r-md); color:var(--ink); font-family:var(--font-body); font-weight:600;
  font-size:15px; padding:10px 14px; outline:none;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease); }
.mcc-in::placeholder{ color:var(--muted); font-weight:500; }
.mcc-in:focus{ border-color:var(--sp); box-shadow:0 0 0 4px color-mix(in srgb, var(--sp) 15%, transparent); }
.mcc-in:focus-visible{ outline:none; }
/* the head-to-head score box — scoreboard numerals, same as .bball-score */
.mcc-in--score{ max-width:130px; text-align:center; font-family:var(--font-score); font-weight:700;
  font-size:26px; min-height:58px; padding:8px 10px; }
.mcc-in--sm{ max-width:132px; font-size:14px; min-height:46px; padding:9px 11px; }
.mcc-inwrap{ display:block; position:relative; }
.mcc-inwrap > .ico{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:17px; height:17px;
  color:var(--muted); pointer-events:none; transition:color .18s var(--ease); }
.mcc-inwrap > .mcc-in{ padding-left:42px; }
.mcc-inwrap:focus-within > .ico{ color:var(--sp); }

/* ---- status pill (stream configured / not) ---- */
.mcc-status{ display:inline-flex; align-items:center; gap:8px; margin-left:auto; white-space:nowrap;
  font-family:var(--font-score); font-weight:600; font-size:11px; letter-spacing:.07em;
  text-transform:uppercase; padding:5px 12px; border-radius:var(--r-pill);
  background:var(--bg-3); color:var(--muted); border:1px solid var(--line-2); }
.mcc-status .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.mcc-status--on{ background:color-mix(in srgb,var(--green) 13%,#fff); color:#2f8a2c;
  border-color:color-mix(in srgb,var(--green) 34%,#fff); }

/* ---- quick commentary chips ---- */
.mcc-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; }
.mcc-chip{ font-family:var(--font-body); font-weight:700; font-size:12px; padding:7px 13px;
  border-radius:var(--r-pill); background:var(--bg-2); border:1.4px solid var(--line);
  color:var(--ink-2); cursor:pointer; white-space:nowrap;
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease),
             transform .18s var(--ease); }
.mcc-chip:hover{ background:color-mix(in srgb, var(--sp) 9%, #fff); border-color:var(--sp);
  color:var(--navy); transform:translateY(-1px); }

/* ---- commentary feed ---- */
.mcc-feed{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.mcc-feed__h{ display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:800;
  font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--navy); margin-bottom:10px; }
.mcc-feed__h .ico{ width:14px; height:14px; color:var(--sp); }
.mcc-feed__list{ max-height:300px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.mcc-feed__list li{ display:flex; align-items:flex-start; gap:11px; padding:10px 2px;
  border-bottom:1px solid var(--line); font-size:13.5px; line-height:1.45; color:var(--ink-2); }
.mcc-feed__list li:last-child{ border-bottom:none; }
.mcc-feed__list .t{ flex:none; font-family:var(--font-score); font-weight:700; font-size:11.5px;
  color:var(--sp); background:color-mix(in srgb, var(--sp) 10%, #fff);
  border:1px solid color-mix(in srgb, var(--sp) 22%, #fff); border-radius:6px; padding:2px 8px; }
.mcc-feed__empty{ justify-content:center; color:var(--muted); font-size:13px; }

/* ---- actions ---- */
.mcc-actions{ display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center; margin-top:18px; }
.mcc-btn2{ background:#fff; color:var(--ink-2); border:1.6px solid var(--line-2); }
.mcc-btn2:hover{ border-color:var(--navy); color:var(--navy); transform:translateY(-2px); }
.mcc-cta{ position:relative; overflow:hidden; width:100%; min-height:54px;
  font-family:var(--font-display); font-weight:800; font-size:13.5px; letter-spacing:.07em;
  text-transform:uppercase; }
.mcc-cta::after{ content:''; position:absolute; top:0; left:-65%; width:42%; height:100%;
  transform:skewX(-18deg); pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent);
  transition:left .6s var(--ease); }
.mcc-cta:hover::after{ left:125%; }
/* submitting state — reuses the tmcSpin keyframe defined above */
.mcc-cta.is-loading{ pointer-events:none; }
.mcc-cta.is-loading:disabled,.mcc-cta.is-loading.disabled{ opacity:.9; }
.mcc-cta.is-loading .ico{ display:none; }
.mcc-cta.is-loading::before{ content:''; width:16px; height:16px; border-radius:50%; flex:none;
  border:2px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color:currentColor;
  animation:tmcSpin .7s linear infinite; }
@media (prefers-reduced-motion: reduce){ .mcc-cta::after{ display:none; } }

@media (max-width:520px){
  .mcc__head{ gap:11px; }
  .mcc-card__head{ padding:14px; }
  .mcc-card__body{ padding:14px; }
  /* the duel collapses to two stacked sides with the VS chip between them */
  .mcc-match--duel{ grid-template-columns:1fr; }
  .mcc-in--score{ max-width:none; }
  .mcc-in--sm{ max-width:none; flex:1 1 120px; }
  /* every action becomes a full-width touch target */
  .mcc-actions{ grid-template-columns:1fr; }
  .mcc-actions .btn{ width:100%; min-height:50px; }
  /* the pill claims a full row of its own, so the icon and the heading stay
     side by side on line 1 instead of the text dropping below the icon */
  .mcc-status{ flex:0 0 100%; margin-left:0; }
  /* chips grow to a comfortable thumb target rather than the 31px they
     render at on a pointer device */
  .mcc-chips{ gap:8px; }
  .mcc-chip{ flex:1 1 auto; min-height:42px; padding:10px 14px; font-size:12.5px; }
}

/* Fullscreen game view on a landscape phone: short viewport height, so the
   vertical rhythm that works in the normal in-page layout needs tightening
   to fit everything without scrolling. */
@media (orientation:landscape) and (max-height:500px){
  .bball-game-view:fullscreen .bball-header,
  .bball-game-view.bball-pseudo-fullscreen .bball-header{ margin-top:0; }
  .bball-game-view:fullscreen .bball-dashboard,
  .bball-game-view.bball-pseudo-fullscreen .bball-dashboard{ margin-top:14px; }
  .bball-game-view:fullscreen .bball-buttons-row,
  .bball-game-view.bball-pseudo-fullscreen .bball-buttons-row{ margin-top:14px; }
  .bball-game-view:fullscreen .bball-score,
  .bball-game-view.bball-pseudo-fullscreen .bball-score{ font-size:clamp(36px,10vh,64px); }
  .bball-game-view:fullscreen .bball-point-btn,
  .bball-game-view.bball-pseudo-fullscreen .bball-point-btn{ width:48px; height:48px; font-size:13px; }
}

/* ======================================================================
   Pool Stage + Knockout (basketball only — see Tournament.supports_pool_stage).
   Namespaced under .fmode- / .poolcfg- / .pool* so nothing here can reach the
   Custom Fixtures UI, any other sport's screens, or the shared
   .panel / .tblcard / .table-wrap / .frow rules it sits alongside.
   ====================================================================== */

/* Fixture-type chooser (Custom Fixtures vs Pool Stage + Knockout) */
.fmode{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
.fmode__opt{ display:flex; align-items:flex-start; gap:11px; padding:14px 16px; cursor:pointer;
  background:var(--bg-2); border:1.5px solid var(--line-2); border-radius:var(--r-md);
  transition:border-color .15s, background .15s, box-shadow .15s; }
.fmode__opt:hover{ border-color:color-mix(in srgb,var(--orange) 45%,var(--line-2)); }
.fmode__opt.is-on{ background:color-mix(in srgb,var(--orange) 7%,#fff);
  border-color:var(--orange); box-shadow:0 0 0 3px rgba(242,106,27,.12); }
.fmode__opt input{ margin-top:3px; width:18px; height:18px; flex:none; accent-color:var(--orange); }
.fmode__opt strong{ display:block; font-size:14.5px; color:var(--navy); }
.fmode__opt em{ display:block; margin-top:4px; font-style:normal; font-size:13px;
  color:var(--muted); line-height:1.45; }

/* Pool configuration form */
.poolcfg{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; }
.poolcfg__f{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.poolcfg__f>span{ font-family:var(--font-score); font-weight:600; font-size:11.5px;
  text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.poolcfg__hint{ margin-top:13px; padding:10px 14px; border-radius:var(--r-sm); font-size:13.5px;
  line-height:1.5; background:var(--bg-2); border:1px solid var(--line); color:var(--ink-2); }
.poolcfg__hint.is-ok{ background:color-mix(in srgb,var(--green) 9%,#fff); color:#2f8a2c;
  border-color:color-mix(in srgb,var(--green) 30%,#fff); }
.poolcfg__hint.is-bad{ background:color-mix(in srgb,var(--live) 8%,#fff); color:var(--live);
  border-color:color-mix(in srgb,var(--live) 28%,#fff); }

/* Pool-stage progress bar */
.poolbar{ height:8px; border-radius:99px; background:var(--bg-3); overflow:hidden; }
.poolbar__fill{ display:block; height:100%; border-radius:99px; background:var(--green);
  transition:width .3s var(--ease); }

/* Pool standings — one card per pool, side by side on wide screens.
   The minimum column width is set by the widest the table can get (a team name
   plus P/W/L/PF/PA/PD/Pts), so a pool card never has to hide Pts behind a
   horizontal scroll — the one number a reader is actually looking for. */
.poolgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(430px,1fr)); gap:16px;
  align-items:start; }
.poolcard h4{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.poolcard__count{ font-family:var(--font-score); font-weight:600; font-size:11px;
  text-transform:uppercase; letter-spacing:.06em; color:var(--muted); white-space:nowrap; }
.poolcard table{ table-layout:auto; }
.poolcard th,.poolcard td{ padding:11px 9px; }
.poolcard th.n,.poolcard td.n,.poolcard td.pts{ width:1%; white-space:nowrap; }
.poolcard th:first-child,.poolcard td:first-child{ padding-left:18px; }
.poolcard th:last-child,.poolcard td:last-child{ padding-right:18px; }
.poolcard .tcell{ gap:9px; }
.poolteam{ min-width:0; }

/* Grouped fixture sections: "Pool A Fixtures", "Quarterfinals", … */
.poolsec+.poolsec{ margin-top:24px; }
.poolsec__h{ font-family:var(--font-score); font-weight:700; font-size:12px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted); margin:0 0 10px; }

@media (max-width:767.98px){
  /* Phones: one pool table at a time, and the setup fields stack rather than
     squeezing three number inputs into a row. */
  .poolgrid{ grid-template-columns:1fr; }
  .poolcfg{ grid-template-columns:1fr; }
  .fmode{ grid-template-columns:1fr; }
  .poolcard h4{ flex-wrap:wrap; gap:4px; }
}
@media (max-width:560px){
  /* All eight columns have to survive a 360px phone, so the name column gives
     up its width first: it wraps to a second line instead of pushing Pts off
     the edge into the scroller. */
  .poolcard th,.poolcard td{ padding:9px 4px; font-size:12px; }
  .poolcard th:first-child,.poolcard td:first-child{ padding-left:12px; }
  .poolcard th:last-child,.poolcard td:last-child{ padding-right:12px; }
  .poolcard .tcell{ gap:7px; align-items:center; }
  .poolcard .rk{ width:20px; height:20px; font-size:11px; border-radius:6px; flex:none; }
  .poolcard .poolteam{ white-space:normal; overflow-wrap:anywhere; line-height:1.3; }
  .poolsec__h{ font-size:11px; }
}

/* ======================================================================
   FIXTURES & SCORING — the organizer's match centre
   (organizer/fixtures.html + _fixture_group.html + _fixture_row.html).

   Namespaced under .fx* so nothing here can reach the public fixture list
   (.frow / .flist), the live scoreboard, the bracket, or the shared
   .panel / .tblcard / .btn / .badge rules it sits alongside. Everything is
   presentational — the markup it styles renders the same fixtures, with the
   same actions, that this page has always rendered.
   ====================================================================== */

/* `.fxc` / `.fxsec` / `.fxfil` set their own `display`, which would otherwise
   beat the browser's default [hidden]{display:none} (same specificity, author
   sheet loads later) — the filter chips toggle `hidden`, so this has to win. */
.fxc[hidden],.fxsec[hidden],.fxfil[hidden],.fxsecs [hidden],
.fxcc__stats[hidden],.fxfil__empty[hidden]{ display:none; }

.fxpage>*+*{ margin-top:20px; }

/* ---------- control-center hero ---------- */
.fxcc{ position:relative; overflow:hidden; padding:26px 28px; border-radius:var(--r-xl);
  color:#fff; box-shadow:var(--shadow);
  background:linear-gradient(135deg,#121829 0%, var(--navy) 46%, #2b2148 100%); }
/* Warm corner glow — the only thing separating this header from the generic
   navy panels used elsewhere in the dashboard. */
.fxcc::after{ content:''; position:absolute; right:-80px; top:-90px; width:270px; height:270px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(242,106,27,.38),transparent 68%); }
.fxcc__row{ position:relative; display:flex; align-items:flex-start; justify-content:space-between;
  gap:20px; flex-wrap:wrap; }
.fxcc__id{ display:flex; align-items:center; gap:16px; min-width:0; }
.fxcc__ico{ flex:none; width:58px; height:58px; display:grid; place-items:center; font-size:28px;
  border-radius:var(--r-lg); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); }
.fxcc__eyebrow{ font-family:var(--font-display); font-weight:800; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--orange); }
.fxcc__t{ margin-top:5px; font-size:clamp(21px,3.4vw,30px); color:#fff; }
.fxcc__sub{ margin-top:6px; font-size:14px; color:#b7bfd8; overflow-wrap:anywhere; }
.fxcc__acts{ position:relative; display:flex; gap:10px; flex-wrap:wrap; }

.fxcc__stats{ position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px; margin-top:24px; }
.fxstat{ padding:13px 15px; border-radius:var(--r-md);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13); }
.fxstat__n{ display:block; font-family:var(--font-score); font-weight:700; font-size:27px;
  line-height:1; color:#fff; font-variant-numeric:tabular-nums; }
.fxstat__l{ display:block; margin-top:6px; font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:#98a1c2; }
.fxstat.is-live{ border-color:rgba(255,106,92,.4); }
.fxstat.is-live .fxstat__n{ color:#ff6f60; }
.fxstat.is-up .fxstat__n{ color:var(--gold); }
.fxstat.is-done .fxstat__n{ color:#5fd05b; }

/* ---------- setup panels + block headings ---------- */
.fxpanel__h,.fxblock__h{ display:flex; align-items:center; gap:11px; font-size:16px; }
.fxblock__h{ font-size:19px; }
.fxpanel__ico{ flex:none; width:32px; height:32px; display:grid; place-items:center; font-size:16px;
  line-height:1; border-radius:9px; background:var(--bg-2); border:1px solid var(--line); }
.fxpanel__p{ margin-top:7px; font-size:14px; line-height:1.5; }
.fxblock__top{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin-bottom:14px; }

/* ---------- filter bar ---------- */
.fxfil{ display:flex; flex-direction:column; gap:11px; padding:14px 16px; margin-bottom:18px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); }
.fxfil__grp{ display:flex; gap:8px; flex-wrap:wrap; }
/* The round row is built from whatever sections exist; a one-round tournament
   gets none, and an empty bordered strip would read as a broken control. */
.fxfil__grp--rounds{ padding-top:11px; border-top:1px dashed var(--line-2); }
.fxfil__grp--rounds:empty{ display:none; }
.fxchip{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-body);
  font-weight:700; font-size:13px; padding:8px 15px; border-radius:var(--r-pill);
  background:#fff; border:1.5px solid var(--line-2); color:var(--ink-2); white-space:nowrap;
  transition:background .18s, border-color .18s, color .18s, transform .18s var(--ease); }
.fxchip:hover{ border-color:var(--navy); color:var(--navy); transform:translateY(-1px); }
.fxchip.is-on{ background:var(--navy); border-color:var(--navy); color:#fff; }
.fxchip--live .fxs__dot{ background:var(--live); }
.fxchip--live.is-on{ background:var(--live); border-color:var(--live); }
.fxchip--live.is-on .fxs__dot{ background:#fff; }

.fxfil__empty{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:44px 20px;
  margin-bottom:18px; text-align:center; font-size:14px; color:var(--muted);
  background:var(--bg-2); border-radius:var(--r-lg); }
.fxfil__empty-ico{ font-size:34px; }
.fxfil__empty strong{ font-family:var(--font-display); font-size:17px; color:var(--navy); }

/* ---------- round / pool section ---------- */
/* A round block is a <section>, so it inherits the page-level
   `section,.section{padding:56px 0}` rule and would otherwise open a 112px
   hole around every round. The gap between rounds is set here instead. */
.fxsec{ padding:0; }
.fxsecs>*+*{ margin-top:28px; }
.fxsec__head{ position:relative; overflow:hidden; display:flex; align-items:center; gap:14px;
  padding:14px 18px 14px 22px; margin-bottom:15px; border-radius:var(--r-lg); color:#fff;
  box-shadow:var(--shadow-sm);
  background:linear-gradient(100deg,var(--navy) 0%, var(--navy-3) 100%); }
/* Left rail: knockout rounds run orange, pools run blue, so a reader can tell
   the two halves of a pool tournament apart at a glance while scrolling. */
.fxsec__head::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:var(--orange); }
.fxsec--pool .fxsec__head::before{ background:var(--blue); }
.fxsec__ico{ flex:none; width:44px; height:44px; display:grid; place-items:center; font-size:21px;
  line-height:1; border-radius:var(--r-md);
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.17); }
.fxsec__txt{ flex:1 1 auto; min-width:0; }
.fxsec__t{ font-size:16px; color:#fff; text-transform:uppercase; letter-spacing:.06em;
  overflow-wrap:anywhere; }
.fxsec__s{ margin-top:4px; font-family:var(--font-score); font-weight:600; font-size:12px;
  color:#b3bcd6; }
.fxsec__n{ flex:none; padding:5px 15px; border-radius:var(--r-md); background:rgba(255,255,255,.12);
  font-family:var(--font-score); font-weight:700; font-size:20px; color:#fff; }
.fxsec__acts{ flex:none; display:flex; gap:8px; flex-wrap:wrap; }
.fxsec__acts .btn-secondary{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.34);
  color:#fff; }
.fxsec__acts .btn-secondary:hover{ background:rgba(255,255,255,.2); border-color:#fff; }
.fxsec__acts .btn-ghost{ color:#f8a570; }
.fxsec__acts .btn-ghost:hover{ color:#fff; }
.fxsec__none{ padding:18px; text-align:center; font-size:13.5px; color:var(--muted);
  background:var(--bg-2); border-radius:var(--r-md); }

/* ---------- match card ---------- */
.fxgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:14px;
  align-items:stretch; }
.fxc{ display:flex; flex-direction:column; height:100%; overflow:hidden; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.fxc:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--line-2); }

.fxc__top{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 15px; background:var(--bg-2); border-bottom:1px solid var(--line); }
.fxc__round{ font-family:var(--font-score); font-weight:700; font-size:11px; text-transform:uppercase;
  letter-spacing:.07em; color:var(--muted); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }

/* Live cards get a red ring plus a slow halo. The global
   prefers-reduced-motion rule already flattens the animation to nothing, so
   the ring alone still carries the state. */
.fxc.is-live{ border-color:color-mix(in srgb,var(--live) 48%,#fff);
  animation:fxpulse 2.6s var(--ease) infinite; }
.fxc.is-live .fxc__top{ background:color-mix(in srgb,var(--live) 9%,#fff);
  border-bottom-color:color-mix(in srgb,var(--live) 20%,#fff); }
.fxc.is-live .fxc__round{ color:var(--live); }
.fxc.is-done .fxc__top{ background:color-mix(in srgb,var(--green) 8%,#fff); }
.fxc.is-off{ opacity:.72; }
@keyframes fxpulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(225,40,26,.32), var(--shadow-sm); }
  60%{ box-shadow:0 0 0 8px rgba(225,40,26,0), var(--shadow-sm); }
}

.fxc__body{ display:grid; grid-template-columns:1fr auto 1fr; align-items:start; gap:10px;
  padding:20px 15px 14px; }
.fxc__side{ display:flex; flex-direction:column; align-items:center; gap:9px; min-width:0;
  text-align:center; }
/* Same crest technique as the scoreboard: the logo lies OVER the initials, so a
   logo that 404s removes itself and the initials show through — no broken
   image, no empty square. */
.fxc__crest{ position:relative; overflow:hidden; flex:none; width:52px; height:52px;
  border-radius:14px; display:grid; place-items:center; background:var(--navy); color:#fff;
  font-family:var(--font-display); font-weight:800; font-size:16px;
  box-shadow:0 7px 16px -9px rgba(27,35,64,.75); }
.fxc__crest img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fxc__name{ font-family:var(--font-display); font-weight:700; font-size:13.5px; line-height:1.28;
  color:var(--navy); word-break:break-word; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden; }
.fxc__name.is-win{ color:var(--green); }
.fxc__name.is-lose{ color:var(--muted); }
/* Unfilled bracket slot — a real placeholder, not an empty square. */
.fxc__crest--tbd{ background:var(--bg-3); color:var(--muted); box-shadow:none;
  border:1.5px dashed var(--line-2); }
.fxc__name--tbd{ color:var(--muted); font-weight:600; letter-spacing:.06em; }

.fxc__mid{ display:grid; place-items:center; min-width:72px; padding-top:11px; }
.fxc__score{ display:inline-flex; align-items:baseline; gap:7px; font-family:var(--font-score);
  font-weight:700; font-size:30px; line-height:1; color:var(--navy); font-variant-numeric:tabular-nums; }
.fxc__score i{ font-style:normal; font-size:17px; color:var(--line-2); }
.fxc__score b.is-win{ color:var(--green); }
.fxc__vs{ font-family:var(--font-display); font-weight:800; font-size:12px; letter-spacing:.11em;
  color:var(--muted); background:var(--bg-3); padding:6px 13px; border-radius:var(--r-pill); }

/* Non head-to-head formats (a lobby, a race field) list their entrants instead
   of being forced into a two-sided scoreboard. */
.fxc__field{ display:flex; flex-direction:column; gap:9px; padding:16px 15px 12px; }
.fxc__ent{ display:flex; align-items:center; gap:10px; min-width:0; }
.fxc__crest--sm{ width:34px; height:34px; border-radius:10px; font-size:12px; }
.fxc__ent-n{ flex:1 1 auto; min-width:0; font-weight:600; font-size:14px; color:var(--navy);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fxc__ent-n.is-win{ color:var(--green); font-weight:700; }
.fxc__ent-s{ flex:none; font-family:var(--font-score); font-weight:700; font-size:16px;
  color:var(--navy); }

.fxc__meta{ padding:0 15px 14px; text-align:center; font-family:var(--font-score); font-weight:600;
  font-size:12.5px; color:var(--muted); }
.fxc__meta em{ font-style:normal; }
.fxc__meta-live{ color:var(--live); font-weight:700; }

.fxc__acts{ display:flex; align-items:center; gap:8px; margin-top:auto; padding:12px 14px;
  background:var(--bg-2); border-top:1px solid var(--line); }
.fxc__act{ flex:1 1 0; min-width:0; padding:10px 8px; font-size:13px; }
.fxc__acts form{ flex:none; display:flex; }
.fxc__del{ flex:none; width:40px; height:40px; padding:0; border-radius:var(--r-md); background:#fff;
  border:1.6px solid var(--line-2); color:var(--muted); }
.fxc__del:hover{ background:var(--live); border-color:var(--live); color:#fff; transform:none; }
.fxc__del .ico{ width:17px; height:17px; }

/* ---------- status badges ---------- */
.fxs{ display:inline-flex; align-items:center; gap:6px; flex:none; font-family:var(--font-body);
  font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  padding:5px 10px; border-radius:6px; white-space:nowrap;
  background:var(--bg-3); color:var(--ink-2); }
.fxs__dot{ position:relative; flex:none; width:7px; height:7px; border-radius:50%;
  background:currentColor; }
.fxs--live{ background:var(--live); color:#fff; }
.fxs--live .fxs__dot{ background:#fff; }
.fxs--live .fxs__dot::after{ content:''; position:absolute; inset:-4px; border-radius:50%;
  background:#fff; opacity:.5; animation:ping 1.7s var(--ease) infinite; }
.fxs--done{ background:color-mix(in srgb,var(--green) 15%,#fff); color:#2f8a2c; }
.fxs--sched{ background:color-mix(in srgb,var(--blue) 13%,#fff); color:var(--blue); }
.fxs--up,.fxs--warn{ background:color-mix(in srgb,var(--gold) 18%,#fff); color:#a9760a; }
.fxs--off{ background:color-mix(in srgb,var(--live) 12%,#fff); color:var(--live); }

/* ---------- empty state ---------- */
.fxempty{ text-align:center; padding:58px 24px; border:1px dashed var(--line-2);
  border-radius:var(--r-xl); background:linear-gradient(180deg,var(--bg-2) 0%, #fff 100%); }
.fxempty__ico{ display:block; font-size:44px; line-height:1; margin-bottom:14px; }
.fxempty h3{ font-size:20px; }
.fxempty p{ max-width:46ch; margin:9px auto 0; font-size:14.5px; color:var(--muted); }

/* ---------- responsive ---------- */
@media (max-width:900px){
  /* Laptop → tablet: the hero's action buttons drop under the title rather
     than squeezing it, and the tiles halve instead of shrinking to slivers. */
  .fxcc{ padding:22px 20px; }
  .fxcc__stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fxcc__acts{ width:100%; }
}
@media (max-width:767.98px){
  .fxpage>*+*{ margin-top:16px; }
  .fxcc__ico{ width:48px; height:48px; font-size:23px; }
  .fxsecs>*+*{ margin-top:22px; }
  .fxsec__head{ flex-wrap:wrap; padding:13px 15px 13px 19px; }
  .fxsec__acts{ width:100%; }
  .fxsec__acts .btn{ flex:1 1 auto; }
  .fxgrid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  /* Phone: full-width cards, nothing narrower than a comfortable tap target,
     and the primary action gets its own row so three buttons plus Delete never
     compress into unreadable slivers. */
  .fxcc{ padding:20px 16px; border-radius:var(--r-lg); }
  .fxcc__id{ gap:12px; }
  .fxstat{ padding:11px 13px; }
  .fxstat__n{ font-size:23px; }
  .fxfil{ padding:12px; }
  .fxchip{ font-size:12.5px; padding:8px 13px; }
  .fxc__body{ gap:6px; padding:18px 12px 12px; }
  .fxc__crest{ width:46px; height:46px; border-radius:12px; font-size:14px; }
  .fxc__name{ font-size:12.5px; }
  .fxc__mid{ min-width:64px; }
  .fxc__score{ font-size:26px; gap:5px; }
  .fxc__acts{ display:grid; grid-template-columns:1fr 1fr auto; gap:8px; padding:11px 12px; }
  .fxc__acts>.fxc__act:first-child{ grid-column:1 / -1; }
  .fxsec__ico{ width:38px; height:38px; font-size:18px; }
  .fxsec__t{ font-size:14.5px; }
  .fxempty{ padding:44px 18px; }
}

/* ======================================================================
   ORGANISER · TOURNAMENT BUILDER  (template/organizer/tournament_form.html)
   Page-scoped `tc*` namespace, same house pattern as the `fx*` fixtures
   block above. Purely presentational — the markup it dresses still posts
   exactly what TournamentForm expects.
   ====================================================================== */
.tcpage{ max-width:1060px; }
.tcpage__back{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600;
  color:var(--muted); }
.tcpage__back:hover{ color:var(--orange); text-decoration:none; }
.tcpage__back .ico{ width:15px; height:15px; transform:rotate(180deg); }
.tcpage__note{ margin-top:18px; }

/* ---------- hero ---------- */
.tchero{ position:relative; margin-top:14px; border-radius:var(--r-xl); overflow:hidden;
  background:linear-gradient(135deg,var(--navy) 0%, var(--navy-2) 52%, var(--navy-3) 100%);
  box-shadow:var(--shadow); isolation:isolate; }
.tchero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(560px 260px at 88% -12%, rgba(242,106,27,.42), transparent 62%),
    radial-gradient(460px 240px at 6% 118%, rgba(30,136,229,.32), transparent 64%); }
.tchero__bg::after{ content:''; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:linear-gradient(105deg,#000,transparent 72%);
          mask-image:linear-gradient(105deg,#000,transparent 72%); }
.tchero__inner{ position:relative; z-index:1; display:grid;
  grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  gap:clamp(16px,2.2vw,26px); padding:clamp(22px,3vw,34px) clamp(20px,3vw,38px); }
.tchero__badge{ width:64px; height:64px; border-radius:19px; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--orange),var(--gold));
  box-shadow:0 14px 30px -12px rgba(242,106,27,.85); }
.tchero__badge .ico{ width:31px; height:31px; color:#fff; stroke-width:1.9; }
.tchero__kicker{ display:block; font-family:var(--font-display); font-weight:800; font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--orange); margin-bottom:7px; }
.tchero h1{ color:#fff; font-family:var(--font-display); font-style:italic; font-weight:900;
  letter-spacing:-.025em; line-height:1.04; font-size:clamp(1.75rem,3.3vw,2.6rem); margin:0; }
.tchero h1 .u{ color:var(--orange); font-style:normal; }
.tchero__sub{ color:#c3cadf; font-size:14.5px; line-height:1.55; max-width:52ch; margin:10px 0 0; }
.tchero__perks{ list-style:none; display:grid; gap:8px; margin:0; padding:0; }
.tchero__perks li{ display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  font-size:12.5px; font-weight:600; color:#dfe4f2; padding:8px 14px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); }
.tchero__perks .ico{ width:15px; height:15px; color:var(--orange); }

/* ---------- progress rail (visual guide, links to the section cards) ---------- */
.tcrail{ margin-top:16px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.tcrail::-webkit-scrollbar{ display:none; }
.tcrail ol{ display:flex; align-items:center; gap:0; list-style:none; margin:0; padding:0;
  min-width:max-content; }
.tcrail li+li::before{ content:''; width:22px; height:1.5px; background:var(--line-2); flex:none; }
.tcrail li{ display:flex; align-items:center; }
.tcrail a{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font-size:12.5px; font-weight:700; color:var(--muted); padding:8px 13px;
  border-radius:var(--r-pill); border:1.5px solid var(--line); background:#fff;
  transition:color .2s, border-color .2s, background .2s; }
.tcrail a:hover{ color:var(--navy); border-color:var(--line-2); text-decoration:none; }
.tcrail__n{ width:20px; height:20px; border-radius:50%; display:grid; place-items:center; flex:none;
  font-family:var(--font-score); font-size:12px; font-weight:700;
  background:var(--bg-3); color:var(--ink-2); transition:background .2s, color .2s; }
.tcrail a.is-on{ color:var(--navy); border-color:color-mix(in srgb,var(--orange) 45%,#fff);
  background:color-mix(in srgb,var(--orange) 8%,#fff); }
.tcrail a.is-on .tcrail__n{ background:var(--orange); color:#fff; }
.tcrail__t{ display:inline; }

/* ---------- section cards ---------- */
.tcform{ margin-top:20px; display:grid; gap:16px; }
/* `padding:0` undoes the global `section{ padding:56px 0 }` — these cards are
   <section> elements and would otherwise open with 56px of dead space. */
.tccard{ padding:0; background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--shadow-sm); overflow:hidden; scroll-margin-top:96px;
  transition:box-shadow .25s var(--ease), border-color .25s; }
.tccard:focus-within{ border-color:var(--line-2); box-shadow:var(--shadow); }
.tccard__head{ display:flex; align-items:center; gap:14px; padding:16px 20px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg-2) 0%, #fff 100%); }
.tccard__ico{ --tint:var(--orange); width:42px; height:42px; flex:none; border-radius:13px;
  display:grid; place-items:center; font-size:20px; line-height:1;
  background:color-mix(in srgb,var(--tint) 14%,#fff);
  border:1px solid color-mix(in srgb,var(--tint) 26%,#fff); }
.tccard__ico--gold{ --tint:var(--gold); }
.tccard__ico--blue{ --tint:var(--blue); }
.tccard__ico--green{ --tint:var(--green); }
.tccard__ico--purple{ --tint:var(--purple); }
.tccard__ico--orange{ --tint:var(--orange); }
.tccard__ico--red{ --tint:var(--live); }
.tccard__head h2{ font-family:var(--font-display); font-weight:800; font-size:16.5px;
  letter-spacing:-.01em; color:var(--navy); margin:0; }
.tccard__head p{ font-size:12.8px; color:var(--muted); margin:3px 0 0; }
.tccard__step{ margin-left:auto; flex:none; font-size:10.5px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); background:var(--bg-3);
  padding:5px 10px; border-radius:var(--r-pill); }
.tccard__body{ padding:20px; display:grid; gap:18px; }

/* ---------- fields ---------- */
.tcgrid{ display:grid; gap:18px; }
.tcgrid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.tcgrid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.tcf{ min-width:0; margin:0; }
.tcf__lab{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700;
  color:var(--navy); margin-bottom:7px; }
.tcf__lab--head{ justify-content:space-between; }
.tcf__lab--head>span{ display:inline-flex; align-items:center; gap:8px; }
.tcf__emo{ font-size:14px; line-height:1; flex:none; }
.tcf__pickd{ font-size:12px; font-weight:600; color:var(--muted); }
.tcf__hint{ font-size:11.8px; color:var(--muted); margin:6px 0 0; line-height:1.45; }
.tcf__err{ font-size:11.8px; font-weight:600; color:var(--live); margin:6px 0 0; }

.tcin{ width:100%; min-height:48px; background:var(--bg-2); border:1.5px solid var(--line);
  border-radius:var(--r-md); color:var(--ink); font-family:var(--font-body); font-size:15px;
  padding:12px 15px; outline:none; box-shadow:none;
  transition:border-color .18s, box-shadow .18s, background .18s; }
.tcin::placeholder{ color:var(--muted); }
.tcin:hover{ border-color:var(--line-2); }
.tcin:focus{ background:#fff; border-color:var(--orange);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--orange) 16%, transparent); }
.tcin:disabled{ opacity:.6; cursor:not-allowed; }
/* the sticky action bar must never park on top of the control you just focused */
.tcin,.tcopt,.tcdrop{ scroll-margin-bottom:118px; }
.tcin--area{ min-height:112px; line-height:1.6; resize:vertical; }
/* selects: kill the OS chrome, draw our own chevron */
.tcin--sel{ appearance:none; -webkit-appearance:none; padding-right:42px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6789' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:17px; }
/* date / datetime: keep the native picker, just make the trigger obvious */
.tcin--date{ cursor:pointer; font-variant-numeric:tabular-nums; }
.tcin--date::-webkit-calendar-picker-indicator{ cursor:pointer; opacity:.55; padding:4px;
  border-radius:6px; transition:opacity .18s, background .18s; }
.tcin--date:hover::-webkit-calendar-picker-indicator{ opacity:1; background:var(--bg-3); }
/* prefixed money inputs */
.tcin-wrap{ position:relative; }
.tcin-wrap__pre{ position:absolute; left:15px; top:50%; transform:translateY(-50%);
  font-family:var(--font-score); font-weight:700; font-size:16px; color:var(--muted);
  pointer-events:none; }
.tcin--pre{ padding-left:34px; }
.tcf--err .tcin{ border-color:var(--live); background:color-mix(in srgb,var(--live) 5%,#fff); }
.tcf--err .tcin:focus{ box-shadow:0 0 0 4px color-mix(in srgb,var(--live) 16%, transparent); }

/* ---------- radio card pickers (sport / format) ---------- */
/* `--sp` is set on the *group*, so a per-tile `.sp-basketball` (etc.) still wins
   on the tile itself — put it on `.tcopt` and it would out-rank those classes. */
.tcpick{ --sp:var(--navy); display:grid; gap:10px; }
.tcpick--sport{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.tcpick--fmt{ --sp:var(--orange); grid-template-columns:repeat(2,minmax(0,1fr)); }
.tcopt{ display:block; min-width:0; cursor:pointer; }
.tcopt input{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.tcopt__box{ position:relative; display:flex; align-items:center; gap:11px; height:100%;
  padding:13px 14px; border-radius:var(--r-md); background:var(--bg-2);
  border:1.5px solid var(--line); transition:border-color .2s, background .2s,
  box-shadow .2s, transform .2s var(--ease); }
.tcopt:hover .tcopt__box{ border-color:color-mix(in srgb,var(--sp) 40%,var(--line-2));
  background:#fff; transform:translateY(-2px); }
.tcopt__emo{ font-size:21px; line-height:1; flex:none; }
.tcopt__txt{ min-width:0; }
.tcopt__t{ display:block; font-family:var(--font-display); font-weight:800; font-size:13.5px;
  color:var(--navy); letter-spacing:-.005em; }
.tcopt__d{ display:block; font-size:11.8px; color:var(--muted); margin-top:3px; line-height:1.4; }
.tcopt__tick{ margin-left:auto; flex:none; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; background:var(--sp); color:#fff; opacity:0;
  transform:scale(.6); transition:opacity .2s, transform .2s var(--ease); }
.tcopt__tick .ico{ width:13px; height:13px; stroke-width:3; }
/* selected */
.tcopt input:checked+.tcopt__box{ background:color-mix(in srgb,var(--sp) 10%,#fff);
  border-color:var(--sp); box-shadow:0 8px 22px -12px color-mix(in srgb,var(--sp) 90%, transparent); }
.tcopt input:checked+.tcopt__box .tcopt__t{ color:color-mix(in srgb,var(--sp) 72%,var(--navy)); }
.tcopt input:checked+.tcopt__box .tcopt__tick{ opacity:1; transform:scale(1); }
/* keyboard focus */
.tcopt input:focus-visible+.tcopt__box{ border-color:var(--sp);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--sp) 22%, transparent); }
/* sport tiles read better stacked */
.tcpick--sport .tcopt__box{ flex-direction:column; gap:8px; text-align:center; padding:15px 10px; }
.tcpick--sport .tcopt__emo{ font-size:26px; }
/* locked (fixtures already generated) */
.tcpick--locked{ opacity:.62; }
.tcpick--locked .tcopt{ cursor:not-allowed; }
.tcpick--locked .tcopt:hover .tcopt__box{ transform:none; background:var(--bg-2);
  border-color:var(--line); }
.tcpick--locked .tcopt input:checked+.tcopt__box{ background:var(--bg-3); }

/* ---------- banner drop zone ---------- */
.tcdrop{ position:relative; display:grid; place-items:center; min-height:210px; padding:26px 20px;
  border:2px dashed var(--line-2); border-radius:var(--r-lg); cursor:pointer; overflow:hidden;
  background:linear-gradient(180deg,var(--bg-2) 0%, #fff 100%); text-align:center;
  transition:border-color .2s, background .2s, box-shadow .2s; }
.tcdrop:hover{ border-color:var(--orange);
  background:linear-gradient(180deg,color-mix(in srgb,var(--orange) 7%,#fff) 0%, #fff 100%); }
.tcdrop--over{ border-color:var(--orange); border-style:solid;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--orange) 15%, transparent); }
.tcdrop--focus{ border-color:var(--orange);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--orange) 15%, transparent); }
.tcdrop__preview{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.tcdrop__inner{ position:relative; z-index:1; display:grid; justify-items:center; gap:7px; }
.tcdrop--has .tcdrop__inner{ background:rgba(27,35,64,.72); color:#fff; padding:20px 26px;
  border-radius:var(--r-md); backdrop-filter:blur(3px); }
.tcdrop__ico{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb,var(--orange) 13%,#fff);
  border:1px solid color-mix(in srgb,var(--orange) 28%,#fff); margin-bottom:2px; }
.tcdrop__ico .ico{ width:23px; height:23px; color:var(--orange); }
.tcdrop--has .tcdrop__ico{ display:none; }
.tcdrop__t{ font-family:var(--font-display); font-weight:800; font-size:15.5px; color:var(--navy); }
.tcdrop__d{ font-size:12.3px; color:var(--muted); }
.tcdrop__or{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); }
.tcdrop--has .tcdrop__t{ color:#fff; }
/* once a file is picked the overlay shrinks to "Replace this banner" + button,
   so the preview does the talking. */
.tcdrop__t--set,.tcdrop--has .tcdrop__t--empty,
.tcdrop--has .tcdrop__d,.tcdrop--has .tcdrop__or{ display:none; }
.tcdrop--has .tcdrop__t--set{ display:block; }
.tcdrop__btn{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700;
  color:#fff; background:var(--navy); padding:10px 18px; border-radius:var(--r-pill);
  transition:background .2s, transform .2s var(--ease); }
.tcdrop:hover .tcdrop__btn{ background:var(--orange); transform:translateY(-1px); }
.tcdrop__btn .ico{ width:15px; height:15px; }
.tcdrop__name{ position:relative; z-index:1; margin-top:11px; max-width:100%; font-size:12px;
  font-weight:600; color:#fff; background:rgba(27,35,64,.82); padding:5px 12px;
  border-radius:var(--r-pill); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Django's own widget stays in the DOM: only the file input is taken out of the
   visual flow (still focusable), so "Currently / Clear" keeps working on edit. */
.tcdrop__native{ margin-top:9px; font-size:12px; color:var(--muted); word-break:break-word; }
.tcdrop__native:empty{ display:none; }
.tcdrop__native a{ color:var(--ink-2); font-weight:600; }
/* the `--js` flag is added by the page script, so with JavaScript off the plain
   file input stays visible and the upload still works. */
.tcdrop__native--js input[type="file"]{ position:absolute; width:1px; height:1px; padding:0;
  margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  border:0; }
.tcdrop__native input[type="checkbox"]{ width:auto; min-height:0; margin-right:5px;
  vertical-align:middle; accent-color:var(--live); }
.tcdrop__native label{ display:inline; font-size:12px; font-weight:600; color:var(--live); }

/* ---------- actions ---------- */
.tcactions{ position:sticky; bottom:0; z-index:2; display:flex; align-items:center; gap:18px;
  flex-wrap:wrap; justify-content:space-between; margin-top:4px; padding:15px 20px;
  border:1px solid var(--line); border-radius:var(--r-xl); background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px); box-shadow:var(--shadow); }
.tcactions__note{ margin:0; font-size:12.8px; color:var(--muted); max-width:46ch; }
.tcactions__note strong{ color:var(--navy); }
.tcactions__btns{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.tcactions__go{ font-family:var(--font-display); font-weight:800; letter-spacing:.01em; }
.tcactions__go .ico{ width:18px; height:18px; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  /* Laptop → tablet: the hero's perk chips drop under the copy instead of
     squeezing the headline, and the format cards go one-up. */
  .tchero__inner{ grid-template-columns:auto minmax(0,1fr); }
  .tchero__perks{ grid-column:1 / -1; grid-auto-flow:column; justify-content:start;
    grid-template-columns:none; }
  .tcpick--fmt{ grid-template-columns:1fr; }
  .tcpick--sport{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .tcgrid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:767.98px){
  .tccard__body{ padding:17px; }
  .tccard__head{ padding:14px 17px; }
  .tcgrid--2,.tcgrid--3{ grid-template-columns:1fr; }
  .tcdrop{ min-height:180px; }
}
@media (max-width:560px){
  /* Phone: single column, nothing narrower than a comfortable tap target and
     both actions on full-width rows so neither collapses to a sliver. */
  .tcpage{ padding-inline:16px; }
  .tchero{ border-radius:var(--r-lg); }
  .tchero__inner{ grid-template-columns:1fr; gap:14px; padding:22px 18px; }
  .tchero__badge{ width:52px; height:52px; border-radius:16px; }
  .tchero__badge .ico{ width:26px; height:26px; }
  .tchero__sub{ font-size:13.5px; }
  /* perks wrap inline instead of three full-width rows — same information,
     roughly a third of the vertical space. */
  .tchero__perks{ display:flex; flex-wrap:wrap; gap:7px; }
  .tchero__perks li{ font-size:11.8px; padding:6px 11px; }
  /* the rail collapses to numbered dots — only the section you're on keeps its
     label, so six steps fit a 390px screen without a sideways scroll. */
  .tcrail a{ gap:0; padding:7px 8px; }
  .tcrail a.is-on{ gap:8px; padding-right:13px; }
  .tcrail__t{ display:none; }
  .tcrail a.is-on .tcrail__t{ display:inline; }
  .tcrail li+li::before{ width:10px; }
  .tccard{ border-radius:var(--r-lg); }
  .tccard__ico{ width:38px; height:38px; border-radius:11px; font-size:18px; }
  .tccard__step{ display:none; }   /* the rail above already numbers the steps */
  .tccard__body{ padding:15px; gap:16px; }
  .tcpick--sport{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tcdrop{ min-height:0; padding:22px 14px; }
  .tcdrop__ico{ width:44px; height:44px; }
  .tcdrop__t{ font-size:14.5px; }
  /* a stuck bar with a note and two stacked buttons would swallow ~40% of a
     phone screen, so on this size it simply ends the form. */
  .tcactions{ position:static; padding:15px; border-radius:var(--r-lg); gap:13px;
    backdrop-filter:none; background:#fff; }
  .tcactions__note{ max-width:none; }
  .tcactions__btns{ width:100%; flex-direction:column-reverse; align-items:stretch; margin-left:0; }
  .tcactions__btns .btn{ width:100%; }
  .tcin,.tcopt,.tcdrop{ scroll-margin-bottom:20px; }
}
@media (prefers-reduced-motion:reduce){
  .tcopt__box,.tcopt__tick,.tcdrop,.tcdrop__btn,.tccard{ transition:none; }
  .tcopt:hover .tcopt__box,.tcdrop:hover .tcdrop__btn{ transform:none; }
}