/* EASL Season 3 — app shell design system. Dashboard grammar: dense, real
   tables and forms, not the landing page's scrollytelling. Same brand tokens
   (gold on warm near-black), different structure entirely. */

:root{
  --canvas:      #0B0A08;
  --surface:     #17140F;
  --surface-2:   #1D1912;
  --ink:         #F4EFE3;
  --ink-soft:    #948C79;
  --ink-faint:   #5F5A4C;
  --accent:      #E3B24C;
  --accent-ink:  #14110B;
  --neg:         #E2604A;
  --pos:         #6FBF8B;
  --hair:        color-mix(in oklab, var(--ink) 12%, transparent);
  --hair-2:      color-mix(in oklab, var(--ink) 7%, transparent);
  --e1: 0 1px 2px rgba(0,0,0,0.3);
  --e2: 0 4px 16px rgba(0,0,0,0.35);
  --e3: 0 12px 40px rgba(0,0,0,0.45);
  --ease: cubic-bezier(0.23,1,0.32,1);
  --font-display: "Hanken Grotesk", system-ui, sans-serif;
  --font-text: "Hanken Grotesk", system-ui, sans-serif;
  --radius: 14px;
  --radius-sm: 9px;
}

/* Hanken Grotesk isn't condensed like the old Oswald pairing was, so display
   text needs explicit weight + tightened tracking to read as headline-scale
   rather than just "bigger body text". */
.authbox__title, .header__brand, .pg-head h1, .modal__box h2, .gw-group__title,
.stat-tile .val, .stat-chip .val, .fixture__score, .pitch__tagpts{
  font-weight: 800; letter-spacing: -0.01em;
}

*{ box-sizing: border-box; }
html{ color-scheme: dark; }
body{
  margin: 0; background: var(--canvas); color: var(--ink); position: relative;
  font-family: var(--font-text); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
::selection{ background: color-mix(in oklab, var(--accent) 55%, transparent); color: #171208; }
::-webkit-scrollbar{ width: 8px; height: 8px; }
::-webkit-scrollbar-thumb{ background: #2a251c; border-radius: 8px; }
a{ color: var(--accent); }
button, input, select{ font-family: inherit; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

img{ max-width: 100%; }

/* Full-bleed pattern layer: absolutely positioned against body (which is
   exactly as tall as the page's real content, not just one viewport), so
   it always covers the whole scrollable page on every page, however long. */
/* Height is set from JS (see syncBgHeight in app.js) — an inline <svg>'s
   intrinsic viewBox aspect ratio otherwise overrides top/bottom:0 sizing,
   so CSS alone can't make it track body's real (content-driven) height. */
#appBgSvg{ position: absolute; top: 0; left: 0; width: 100%; z-index: -2; pointer-events: none; }
/* Corner badge: pinned to the VIEWPORT (not the page), at a fixed pixel
   size, so it always renders whole — never scaled or cropped by a tall
   or narrow page the way it would be if it lived inside the stretched
   pattern above. */
#appBgTarget{
  position: fixed; right: -30px; bottom: -30px; width: 220px; height: 220px;
  z-index: -1; pointer-events: none;
}
/* Slow, subtle motion on the app's persistent backdrop — a gentle drift
   on the streaks, a soft twinkle on the dots, a lazy spin on the target
   badge. Kept slow enough not to compete with the real UI in front of it. */
#appBgSvg .bg-lines{ animation: bgLinesDrift 20s ease-in-out infinite; }
@keyframes bgLinesDrift{
  0%, 100%{ transform: translate(0, 0); }
  50%{ transform: translate(16px, -12px); }
}
#appBgSvg .bg-dot{ animation: bgDotTwinkle 4.5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
#appBgSvg .bg-dot:nth-of-type(2n){ animation-duration: 5.5s; animation-delay: 0.7s; }
#appBgSvg .bg-dot:nth-of-type(3n){ animation-duration: 3.6s; animation-delay: 1.4s; }
#appBgSvg .bg-dot:nth-of-type(4n){ animation-delay: 2.2s; }
@keyframes bgDotTwinkle{
  0%, 100%{ opacity: 0.25; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.4); }
}
#appBgTarget .bg-target{ animation: bgTargetSpin 70s linear infinite; transform-origin: 120px 120px; }
@keyframes bgTargetSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){
  #appBgSvg .bg-lines, #appBgSvg .bg-dot, #appBgTarget .bg-target{ animation: none !important; }
}

/* ---------------------------------------------------------------- loading */
#loading{
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; background: var(--canvas); z-index: 300;
}
#loadingCrest{ width: 64px; height: 64px; object-fit: contain; animation: pulse 1.6s ease infinite; }
#loadingText{ font-size: 13px; color: var(--ink-soft); letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; }
@keyframes pulse{ 0%,100%{ opacity: 0.5; } 50%{ opacity: 1; } }

/* ---------------------------------------------------------------- authbox */
#authGate{
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 0%, #171307 0%, var(--canvas) 55%, #050403 100%);
  padding: 20px; z-index: 200;
}
.authbox{ width: 100%; max-width: 380px; text-align: center; }
.authbox__crest{ width: 72px; height: 72px; object-fit: contain; margin: 0 auto 16px; display: block; }
.authbox__title{ font-family: var(--font-display); font-size: 28px; margin: 0 0 20px; text-transform: uppercase; letter-spacing: 0.02em; }
.authbox__tabs{ display: flex; gap: 6px; background: rgba(255,255,255,0.03); border-radius: var(--radius-sm); padding: 4px; margin-bottom: 18px; }
.authbox__tab{ flex: 1; appearance: none; border: none; background: transparent; color: var(--ink-soft); font-weight: 700; font-size: 13px; padding: 10px; border-radius: 7px; cursor: pointer; }
.authbox__tab.active{ background: var(--accent); color: var(--accent-ink); }
.authbox__form{ display: grid; gap: 10px; }
.authbox__form input{
  width: 100%; background: rgba(255,255,255,0.04); border: 1px solid var(--hair); border-radius: var(--radius-sm);
  padding: 12px 14px; color: var(--ink); font-size: 14px; outline: none;
}
.authbox__form input:focus-visible{ border-color: var(--accent); }
.authbox__err{ color: var(--neg); font-size: 12px; min-height: 1em; margin: 0; }
.authbox__back{ display: inline-block; margin-top: 20px; font-size: 12px; color: var(--ink-soft); text-decoration: none; }
.authbox__back:hover{ color: var(--accent); }

/* ---------------------------------------------------------------- header */
/* Launched from the home screen, iOS draws the status bar (time/battery/
   wifi) as a translucent overlay ON TOP of the page instead of pushing it
   down (that's what apple-mobile-web-app-status-bar-style:black-translucent
   + viewport-fit=cover buys us) — so anything anchored to the top-right,
   like the Log out button, sits right under those icons unless we reserve
   the inset ourselves. height stays the visual 58px; the safe-area goes
   into extra padding-top on top of it (box-sizing:border-box, so it grows
   the box rather than squeezing the 58px of real content). */
#header{
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 18px;
  padding: env(safe-area-inset-top) 20px 0; height: calc(58px + env(safe-area-inset-top));
  background: rgba(11,10,8,0.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hair);
}
.header__brand{ display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 16px; text-transform: uppercase; letter-spacing: 0.02em; flex-shrink: 0; }
.header__brand em{ color: var(--accent); font-style: normal; }
#nav{ display: flex; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; height: 100%; }
#nav::-webkit-scrollbar{ display: none; }
#nav button{
  appearance: none; background: transparent; border: none; border-bottom: 2px solid transparent;
  color: var(--ink-soft); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0 12px; cursor: pointer; white-space: nowrap; height: 100%; flex-shrink: 0;
}
#nav button:hover{ color: var(--ink); }
#nav button.active{ color: var(--accent); border-bottom-color: var(--accent); }
.header__right{ display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: auto; }
#userLabel{ font-size: 12px; color: var(--ink-soft); font-weight: 600; white-space: nowrap; }
#userLabel .tag-admin{ color: var(--accent); margin-left: 4px; }

.a2hs-banner{
  position: sticky; top: calc(58px + env(safe-area-inset-top)); z-index: 45; display: flex; align-items: center; gap: 8px;
  background: color-mix(in oklab, var(--accent) 14%, var(--surface)); border-bottom: 1px solid color-mix(in oklab, var(--accent) 35%, var(--hair));
  padding: 10px 14px;
}
.a2hs-banner__link{
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 700;
}
.a2hs-banner__icon{ width: 20px; height: 20px; flex-shrink: 0; color: var(--accent); }
.a2hs-banner__icon svg{ width: 100%; height: 100%; }
.a2hs-banner__text{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a2hs-banner__arrow{ color: var(--accent); flex-shrink: 0; transition: transform 150ms var(--ease); }
.a2hs-banner__link:hover .a2hs-banner__arrow{ transform: translateX(3px); }
.a2hs-banner__close{
  appearance: none; background: none; border: none; color: var(--ink-soft); font-size: 18px;
  line-height: 1; cursor: pointer; padding: 2px 4px; flex-shrink: 0;
}
.a2hs-banner__close:hover{ color: var(--ink); }
@media (max-width: 480px){
  .a2hs-banner__text{ white-space: normal; }
}

#mobileNav{
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: rgba(11,10,8,0.95); backdrop-filter: blur(12px); border-top: 1px solid var(--hair);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); overflow-x: auto;
}
#mobileNav button{
  appearance: none; background: transparent; border: none; color: var(--ink-soft);
  display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 9px; font-weight: 700;
  padding: 6px 10px; border-radius: 10px; min-width: 56px;
}
#mobileNav button span{ display: flex; }
#mobileNav button svg{ width: 20px; height: 20px; }
#mobileNav button.active{ color: var(--accent); }

@media (max-width: 780px){
  #nav, .header__right #userLabel{ display: none; }
  #mobileNav{ display: flex; }
  #page{ padding-bottom: 84px !important; }
}

/* ---------------------------------------------------------------- layout */
#page{ max-width: 1080px; margin: 0 auto; padding: 28px 20px 60px; }
.pg-head{ margin-bottom: 20px; }
.pg-head h1{ font-family: var(--font-display); font-size: 28px; margin: 0 0 4px; text-transform: uppercase; letter-spacing: 0.01em; }
.pg-head p{ color: var(--ink-soft); margin: 0; font-size: 14px; }

.card{
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--e1);
}
.card + .card{ margin-top: 12px; }
.grid-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.grid-4{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 780px){ .grid-2,.grid-3,.grid-4{ grid-template-columns: repeat(2, 1fr); } }

.stat-tile{ background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius); padding: 16px; }
.stat-tile .lbl{ font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); font-weight: 700; margin-bottom: 6px; }
.stat-tile .val{ font-family: var(--font-display); font-size: 26px; color: var(--accent); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- home */
.home-live-banner{
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 12px 16px;
  background: linear-gradient(120deg, color-mix(in oklab, var(--neg) 22%, transparent), var(--surface) 65%);
  border: 1px solid color-mix(in oklab, var(--neg) 50%, var(--hair)); border-radius: var(--radius-sm);
  box-shadow: 0 0 22px color-mix(in oklab, var(--neg) 18%, transparent); font-size: 13px; font-weight: 700;
}
.home-live-tag{ display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 900; letter-spacing: 0.08em; color: var(--neg); text-transform: uppercase; flex-shrink: 0; }
.home-live-banner .grow{ flex: 1; min-width: 0; }
.home-stats{ display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
@media (max-width: 780px){ .home-stats{ grid-template-columns: 1fr 1fr; } }
.home-points-tile{
  background: linear-gradient(160deg, color-mix(in oklab, var(--accent) 16%, transparent), var(--surface));
  border-color: color-mix(in oklab, var(--accent) 40%, var(--hair));
}
.home-points-tile .val{ font-size: 34px; text-shadow: 0 0 18px color-mix(in oklab, var(--accent) 55%, transparent); }
.home-card-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.home-fixtures-link{ display: block; text-align: center; font-size: 11px; color: var(--accent); font-weight: 700; margin-top: 10px; text-decoration: none; }
.home-lb-row{ display: flex; align-items: center; padding: 7px 8px; font-size: 13px; border-radius: 8px; }
.home-lb-row .grow{ flex: 1; min-width: 0; }
.home-lb-row.is-me{ background: color-mix(in oklab, var(--accent) 8%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--hair)); }
.home-lb-row.is-me .grow, .home-lb-row.is-me .home-lb-pts{ color: var(--accent); font-weight: 800; }
.home-lb-rank{ width: 22px; height: 22px; border-radius: 50%; background: rgba(244,239,227,0.08); color: var(--ink-soft); font-weight: 800; font-size: 11px; display: flex; align-items: center; justify-content: center; margin-right: 8px; flex-shrink: 0; }
.home-lb-row.is-me .home-lb-rank{ background: var(--accent); color: var(--accent-ink); }
.home-lb-pts{ font-weight: 700; color: var(--ink-soft); }

.bracket{ display: flex; gap: 16px; align-items: stretch; overflow-x: auto; padding-bottom: 4px; }
.bracket__col{ flex: 1; min-width: 180px; display: flex; flex-direction: column; justify-content: space-evenly; gap: 12px; }
.bracket__col-title{ font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); font-weight: 700; text-align: center; }
.bracket-card{ background: rgba(255,255,255,0.02); border: 1px solid var(--hair-2); border-radius: var(--radius-sm); padding: 10px 12px; }
.bracket-card__label{ font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); margin-bottom: 6px; }
.bracket-card__row{ display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; padding: 3px 0; color: var(--ink-soft); }
.bracket-card__team{ flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bracket-card__row.is-winner{ color: var(--ink); font-weight: 800; }
.bracket-card__score{ font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 800; min-width: 18px; text-align: right; flex-shrink: 0; }
@media (max-width: 700px){ .bracket{ flex-direction: column; } .bracket__col{ min-width: 0; } }

/* ---------------------------------------------------------------- buttons */
.btn{
  appearance: none; border: none; cursor: pointer; border-radius: var(--radius-sm);
  font-weight: 700; font-size: 13px; padding: 10px 18px; transition: transform 140ms var(--ease), box-shadow 140ms var(--ease), background 140ms var(--ease);
}
.btn--primary{ background: var(--accent); color: var(--accent-ink); box-shadow: var(--e1); }
.btn--primary:hover{ transform: translateY(-1px); box-shadow: var(--e2); }
.btn--primary:disabled{ opacity: 0.4; cursor: not-allowed; transform: none; }
.btn--ghost{ background: rgba(255,255,255,0.04); color: var(--ink-soft); border: 1px solid var(--hair); }
.btn--ghost:hover{ color: var(--ink); border-color: color-mix(in oklab, var(--accent) 30%, var(--hair)); }
.btn--danger{ background: color-mix(in oklab, var(--neg) 14%, transparent); color: var(--neg); border: 1px solid color-mix(in oklab, var(--neg) 35%, transparent); }
.btn--sm{ padding: 6px 12px; font-size: 12px; }
.btn--block{ width: 100%; }
.btn:active{ transform: scale(0.98); }

/* ---------------------------------------------------------------- forms */
input[type="text"], input[type="number"], input[type="email"], input[type="password"], select{
  background: rgba(255,255,255,0.04); border: 1px solid var(--hair); border-radius: var(--radius-sm);
  padding: 9px 12px; color: var(--ink); font-size: 13px; outline: none;
}
input:focus-visible, select:focus-visible{ border-color: var(--accent); }

/* ---------------------------------------------------------------- badges */
.badge-img{ object-fit: contain; flex-shrink: 0; }
.pos-tag{ font-size: 9px; font-weight: 900; border-radius: 4px; padding: 3px 6px; letter-spacing: 0.03em; flex-shrink: 0; }
.pos-tag.gk{ background: rgba(227,178,76,0.15); color: var(--accent); border: 1px solid rgba(227,178,76,0.3); }
.pos-tag.out{ background: rgba(111,191,139,0.12); color: var(--pos); border: 1px solid rgba(111,191,139,0.3); }
.cap-pill{ background: var(--accent); color: var(--accent-ink); font-size: 9px; font-weight: 900; border-radius: 4px; padding: 2px 6px; margin-left: 4px; }

/* ---------------------------------------------------------------- draft / squad rows */
.player-row{
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.02); border: 1px solid var(--hair-2); margin-bottom: 6px;
}
.player-row .name{ font-weight: 700; font-size: 13px; }
.player-row .sub{ font-size: 11px; color: var(--ink-soft); }
.player-row .grow{ flex: 1; min-width: 0; }
.player-row .price{ color: var(--accent); font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- My Team top row */
.mt-toprow{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.mt-teamname{ min-width: 200px; }
.tn-display{ display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 700; font-size: 17px; color: var(--ink); padding: 4px 2px; border-radius: 8px; }
.tn-display:hover{ background: rgba(255,255,255,0.03); }
.tn-edit-btn{ appearance: none; background: rgba(255,255,255,0.06); border: 1px solid var(--hair); color: var(--ink-soft); width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tn-display:hover .tn-edit-btn{ color: var(--accent); border-color: color-mix(in oklab, var(--accent) 40%, var(--hair)); }
.tn-edit{ display: flex; gap: 8px; }
.tn-edit input{ width: 220px; }
.mt-stats{ display: flex; gap: 10px; flex-wrap: wrap; }
.stat-chip{
  background: var(--surface); border: 1px solid var(--hair); border-radius: 12px; padding: 10px 16px;
  min-width: 84px; text-align: center; box-shadow: var(--e1);
}
.stat-chip .lbl{ font-size: 9px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-soft); font-weight: 700; margin-bottom: 3px; }
.stat-chip .val{ font-family: var(--font-display); font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-chip--accent{ border-color: color-mix(in oklab, var(--accent) 45%, var(--hair)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 20%, transparent) inset, 0 4px 20px color-mix(in oklab, var(--accent) 12%, transparent); }
.stat-chip--accent .val{ color: var(--accent); }

/* ---------------------------------------------------------------- floating banner */
.banner-float{
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; padding: 14px 16px;
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 12%, var(--surface)), var(--surface));
  border: 1px solid color-mix(in oklab, var(--accent) 45%, var(--hair)); border-radius: var(--radius-sm);
  box-shadow: 0 4px 20px color-mix(in oklab, var(--accent) 10%, transparent);
}
.banner-float__icon{ font-size: 18px; line-height: 1; flex-shrink: 0; }
.banner-float strong{ color: var(--accent); font-size: 13px; }
.banner-float p{ margin: 3px 0 0; color: var(--ink-soft); font-size: 12px; }

/* ---------------------------------------------------------------- pitch (My Team) — modelled on FPL's own pitch view: solid brand-colour surround, trapezoid perspective pitch, goal + sponsor-style banners up top, EASL branded. */
.pitch-frame{
  background: linear-gradient(180deg, #1B0F2E 0%, #170B26 100%);
  border-radius: 18px; padding: 16px 14px 18px; box-shadow: var(--e3);
  overflow: hidden;
}
.pitch-frame__top{ display: flex; align-items: flex-end; justify-content: center; gap: 10px; padding-bottom: 6px; }
.side-banner{
  display: flex; align-items: center; gap: 6px; background: #fff; color: #14110B;
  border-radius: 8px; padding: 6px 10px; font-weight: 800; font-size: 11px; letter-spacing: 0.02em;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3); flex-shrink: 0; white-space: nowrap;
}
.side-banner img{ display: block; }
.goal{ position: relative; width: min(30%, 180px); flex-shrink: 0; }
.goal__net{
  height: 46px; border-radius: 6px 6px 0 0; background: #123420;
  border: 3px solid #e8e8e8; border-bottom: none;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.16) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(65deg, rgba(255,255,255,0.16) 0 1px, transparent 1px 9px);
}

.pitch{
  --halfway-h: 110px; /* single source of truth: the clip-path hexagon and
    .pitch__halfway's own height both read this, so the trapezoid's slanted
    sides and the flat halfway rectangle always meet with zero seam,
    regardless of how tall the player-rows content above it ends up being. */
  position: relative; overflow: hidden;
  clip-path: polygon(
    13% 0%, 87% 0%,
    100% calc(100% - var(--halfway-h)), 100% 100%,
    0% 100%, 0% calc(100% - var(--halfway-h))
  );
  padding: 6px 0 0;
}
.pitch::before{
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    repeating-radial-gradient(circle at 50% -40%,
      rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 34px,
      transparent 34px, transparent 68px),
    linear-gradient(180deg, #1F6B3E 0%, #1B5E37 55%, #164C2C 100%);
}
.pitch__vignette{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.3), transparent 20%, transparent 80%, rgba(0,0,0,0.25));
}
.pitch__lines{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.pitch__lines polygon, .pitch__lines path, .pitch__lines circle{ fill: none; stroke: rgba(255,255,255,0.55); vector-effect: non-scaling-stroke; stroke-width: 2.4; }
/* Pure spacer — no drawing of its own. It just reserves --halfway-h of real
   layout height inside .pitch so the clip-path hexagon (which is defined
   against .pitch's total height) and the halfway line + circle drawn in the
   single .pitch__lines SVG above land in the same place, with the same
   number, every time. Two separately-drawn elements is what caused the
   "line exceeds the touchline" and "visible seam" bugs earlier — one shape,
   one SVG, one height variable fixes both at the root. */
.pitch__halfway{ width: 100%; height: var(--halfway-h); pointer-events: none; }
.pitch__content{ position: relative; z-index: 3; }
.pitch__row{ display: flex; justify-content: space-evenly; align-items: flex-start; margin: 22px 0; flex-wrap: wrap; gap: 28px; }
.pitch__row--gk{ margin-top: 2px; }

.pitch__card{ position: relative; display: flex; flex-direction: column; align-items: center; width: 82px; }
.pitch__shirt{ position: relative; cursor: pointer; filter: drop-shadow(0 5px 8px rgba(0,0,0,0.5)); transition: transform 160ms var(--ease); }
.pitch__shirt:hover{ transform: translateY(-3px) scale(1.06); }
.pitch__shirt:active{ transform: scale(0.96); }
.pitch__jerseyimg{ display: block; width: 58px; height: 58px; object-fit: contain; }
.pitch__corner{
  position: absolute; top: -2px; right: 4px; width: 17px; height: 17px; border-radius: 50%;
  background: #fff; color: #14110B; font-size: 10px; font-weight: 900; font-style: italic;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.pitch__corner--cap{ background: #14110B; color: var(--accent); font-style: normal; box-shadow: 0 0 6px color-mix(in oklab, var(--accent) 60%, transparent); }
.pitch__tagbar{ width: 100%; margin-top: 4px; border-radius: 4px; overflow: hidden; box-shadow: 0 3px 8px rgba(0,0,0,0.35); }
.pitch__tagname{
  background: #0B3D24; color: #fff; font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.02em; text-align: center; padding: 3px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pitch__tagpts{ background: #00FF87; color: #0B0A08; font-family: var(--font-display); font-weight: 700; font-size: 12px; text-align: center; padding: 2px 4px; }
.pitch__shirt--empty{ opacity: 0.55; }
.pitch__shirt--empty:hover{ opacity: 0.85; }
.pitch__plus{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff;
  font-size: 22px; font-weight: 800; line-height: 1; text-shadow: 0 1px 3px rgba(0,0,0,0.6); pointer-events: none;
}
.pitch__tagname--empty{ background: transparent; color: var(--ink-faint); box-shadow: none; }
.pitch__actions{
  position: absolute; top: 100%; margin-top: 8px; left: 50%; transform: translateX(-50%);
  background: var(--surface); border: 1px solid var(--hair); border-radius: 10px; padding: 8px;
  display: flex; flex-direction: column; gap: 6px; z-index: 5; box-shadow: var(--e3); width: 150px;
  animation: pitchPop 160ms var(--ease);
}
@keyframes pitchPop{ from{ opacity: 0; transform: translateX(-50%) translateY(-4px); } to{ opacity: 1; transform: translateX(-50%) translateY(0); } }

/* ---------------------------------------------------------------- picker modal */
.modal{ position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal.is-open{ display: flex; }
.modal__scrim{ position: absolute; inset: 0; background: rgba(6,5,3,0.75); backdrop-filter: blur(4px); }
.modal__box{
  position: relative; width: 100%; max-width: 420px; max-height: 85vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--e3);
}
.modal__box--wide{ max-width: 560px; }
.modal__box h2{ font-family: var(--font-display); font-size: 20px; margin: 0 0 16px; text-transform: uppercase; }
.modal__x{ position: absolute; top: 12px; right: 12px; background: none; border: none; color: var(--ink-soft); font-size: 20px; cursor: pointer; width: 30px; height: 30px; }
.picker__filters{ display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.picker__filters input{ flex: 1; min-width: 120px; }
.picker__list{ display: flex; flex-direction: column; gap: 6px; }

/* ---------------------------------------------------------------- table */
.tbl{ width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th{ text-align: left; padding: 8px 6px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); border-bottom: 1px solid var(--hair); }
.tbl td{ padding: 10px 6px; border-bottom: 1px solid var(--hair-2); vertical-align: middle; }
.tbl tr:last-child td{ border-bottom: none; }
.tbl .num{ text-align: center; font-variant-numeric: tabular-nums; }
.tbl .club-cell{ display: flex; align-items: center; gap: 8px; font-weight: 700; }
.tbl-wrap{ overflow-x: auto; }
.row-me{ background: color-mix(in oklab, var(--accent) 6%, transparent); }

/* ---------------------------------------------------------------- fixtures */
.fixture{
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.02); border: 1px solid var(--hair-2); margin-bottom: 6px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.fixture__team{ flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; }
.fixture__team span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fixture__team.away{ justify-content: flex-end; text-align: right; }
@media (max-width: 480px){
  .fixture{ padding: 10px 10px; gap: 6px; }
  .fixture__time{ width: 44px; font-size: 10px; }
  .fixture__score{ min-width: 44px; font-size: 15px; }
  .fixture__team{ font-size: 12px; gap: 6px; }
}
.fixture__score{ font-family: var(--font-display); font-size: 18px; min-width: 60px; text-align: center; color: var(--accent); }
.fixture__meta{ font-size: 10px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; width: 100%; margin-bottom: 4px; }
.fixture__time{ font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; width: 62px; flex-shrink: 0; }
.fixture:hover{ border-color: color-mix(in oklab, var(--accent) 30%, var(--hair-2)); background: rgba(255,255,255,0.04); }
.fixture--live{ border-color: color-mix(in oklab, var(--neg) 45%, var(--hair-2)); background: color-mix(in oklab, var(--neg) 5%, rgba(255,255,255,0.02)); }
.fixture__live-pill{ min-width: 62px; width: auto; white-space: nowrap; flex-shrink: 0; display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 900; letter-spacing: 0.05em; color: var(--neg); text-transform: uppercase; }
.fixture__live-dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--neg); animation: fixture-live-pulse 1.4s ease-in-out infinite; }
@keyframes fixture-live-pulse{ 0%, 100%{ opacity: 1; } 50%{ opacity: 0.35; } }
.gw-group + .gw-group{ margin-top: 22px; }
.gw-group__title{ font-family: var(--font-display); font-size: 16px; text-transform: uppercase; margin: 0 0 10px; color: var(--ink-soft); }
.sched-filters{ display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.sched-filters select{ min-width: 160px; }

/* ---------------------------------------------------------------- tabs */
.tabbar{ display: flex; gap: 4px; background: rgba(0,0,0,0.3); border-radius: 10px; padding: 4px; margin-bottom: 18px; flex-wrap: wrap; }
.tabbar button{
  appearance: none; background: transparent; border: none; color: var(--ink-soft); font-weight: 700; font-size: 12px;
  padding: 8px 14px; border-radius: 7px; cursor: pointer;
}
.tabbar button.active{ background: var(--accent); color: var(--accent-ink); }

/* ---------------------------------------------------------------- admin */
.admin-row{ display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--radius-sm); background: rgba(255,255,255,0.02); border: 1px solid var(--hair-2); margin-bottom: 6px; }
.admin-row .grow{ flex: 1; min-width: 0; }
.inc-group{ display: flex; align-items: center; gap: 6px; }
.inc-btn{ width: 26px; height: 26px; border-radius: 6px; border: none; font-weight: 900; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.inc-btn.plus{ background: rgba(227,178,76,0.15); color: var(--accent); }
.inc-btn.minus{ background: rgba(226,96,74,0.12); color: var(--neg); }
.inc-val{ min-width: 20px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.toggle-btn{ border: 1px solid var(--hair); background: transparent; color: var(--ink-soft); border-radius: 999px; padding: 5px 12px; font-size: 11px; font-weight: 700; cursor: pointer; }
.toggle-btn.on{ background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.gw-picker{ display: flex; flex-wrap: wrap; gap: 4px; background: rgba(0,0,0,0.3); border-radius: 10px; padding: 4px; margin-bottom: 18px; }
.gw-picker button{ appearance: none; border: none; background: transparent; color: var(--ink-soft); font-weight: 700; font-size: 12px; padding: 6px 10px; border-radius: 7px; cursor: pointer; }
.gw-picker button.active{ background: var(--accent); color: var(--accent-ink); }
.gw-picker button.saved:not(.active){ color: var(--pos); }

/* ---------------------------------------------------------------- referee */
.ref-input-bar{ display: flex; align-items: center; gap: 8px; }
.ref-input-bar input[type="text"]{ flex: 1; min-width: 0; }
.ref-mic-btn{
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--hair);
  background: rgba(255,255,255,0.04); color: var(--ink-soft); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: color .15s, border-color .15s, background .15s;
}
.ref-mic-btn:hover{ color: var(--ink); border-color: color-mix(in oklab, var(--accent) 30%, var(--hair)); }
.ref-mic-btn.listening{ background: color-mix(in oklab, var(--neg) 16%, transparent); border-color: var(--neg); color: var(--neg); animation: ref-pulse 1.4s ease-in-out infinite; }
@keyframes ref-pulse{
  0%, 100%{ box-shadow: 0 0 0 0 color-mix(in oklab, var(--neg) 45%, transparent); }
  50%{ box-shadow: 0 0 0 8px transparent; }
}
.ref-toast{
  margin-top: 12px; display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: color-mix(in oklab, var(--accent) 10%, var(--surface-2)); border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--hair));
  border-radius: var(--radius-sm); font-size: 13px; font-weight: 600;
}
.ref-toast span{ flex: 1; }
.ref-toast__x{ background: none; border: none; color: var(--ink-soft); font-size: 16px; cursor: pointer; line-height: 1; padding: 0 2px; }
.ref-event-row{ display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hair-2); font-size: 13px; }
.ref-event-row:last-child{ border-bottom: none; }
.ref-event-row .grow{ flex: 1; min-width: 0; }

.match-clock{
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--surface-2); border: 1px solid var(--hair); border-radius: var(--radius);
  padding: 16px; margin: 12px 0;
}
.match-clock__time{ font-family: var(--font-display); font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent); line-height: 1; }
.match-clock__half{ flex: 1; min-width: 120px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
.match-clock__actions{ display: flex; gap: 8px; flex-wrap: wrap; }

.evt-icon{ display: inline-flex; width: 18px; height: 18px; flex-shrink: 0; }
.evt-icon svg{ width: 100%; height: 100%; display: block; }

.timeline-row{ display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--hair-2); font-size: 13px; }
.timeline-row:last-child{ border-bottom: none; }
.timeline-row .grow{ flex: 1; min-width: 0; }
.timeline-row__min{ min-width: 28px; font-variant-numeric: tabular-nums; color: var(--ink-faint); font-size: 12px; }

/* ---------------------------------------------------------------- misc */
.empty-state{ text-align: center; padding: 40px 20px; color: var(--ink-soft); }
.hr{ height: 1px; background: var(--hair); border: none; margin: 16px 0; }
.pill-row{ display: flex; flex-wrap: wrap; gap: 8px; }
.pill{ border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--hair)); background: color-mix(in oklab, var(--accent) 6%, transparent); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; }
.muted{ color: var(--ink-soft); }
.txt-pos{ color: var(--pos); } .txt-neg{ color: var(--neg); }