/* Life layer: team colours, sports display face, match bands, motion.
   Loaded after app.css. One look ("Matchday"), dark by default, with a light variant. */

:root {
  --display: "Barlow Condensed", "Arial Narrow", var(--font);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --on-home: #fff;
  --on-away: #fff;
}

/* ---------------------------------------------------------------- display face */

.page-head h1 { font: 800 32px/1 var(--display); letter-spacing: 0.005em; text-transform: uppercase; }
.module__title { font: 700 15px/1.1 var(--display); letter-spacing: 0.045em; }
.brand { font: 800 21px/1 var(--display); letter-spacing: 0.02em; text-transform: uppercase; }
.nav a { font: 700 15px/1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; }
.strip__day, .ticker__day span { font: 700 15px/1.1 var(--display); letter-spacing: 0.02em; }
.mrow__time { font: 700 17px/1.05 var(--display); }
.mrow__score { font: 800 20px/1 var(--display); }
.plegend b { font: 700 16px/1 var(--display); }
.plegend .is-fav b { font-weight: 800; }
.fav__p, .cmp__val, .stat__l, .stat__r, .predictor__side, .strength__row b { font-family: var(--display); letter-spacing: 0; }
.fav__p { font-size: 28px; }
.cmp__val { font-size: 28px; }
.stat__l, .stat__r { font-size: 24px; }
.predictor__side { font-size: 32px; }
.scores b { font: 800 22px/1 var(--display); }
.ticker__team b { font: 700 14px/1 var(--display); }
.league-head { font: 700 14px/1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; }
.donut text { font-family: var(--display); font-weight: 800; }
.res { font-family: var(--display); font-size: 15px; }

/* ---------------------------------------------------------------- team-coloured match band (overview hero, match header) */

.band {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, auto) minmax(0, 1fr);
  min-height: 236px; background: var(--module); border-radius: var(--radius); box-shadow: var(--shadow);
}
.band__side { display: flex; align-items: center; gap: 20px; padding: 28px 56px 28px 28px; min-width: 0; }
.band__side--home { background: var(--home); color: var(--on-home); clip-path: polygon(0 0, 100% 0, calc(100% - 44px) 100%, 0 100%); }
.band__side--away {
  background: var(--away); color: var(--on-away); flex-direction: row-reverse; text-align: right;
  padding: 28px 28px 28px 56px; clip-path: polygon(44px 0, 100% 0, 100% 100%, 0 100%);
}
.band__crest {
  flex: none; width: 104px; height: 104px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22), 0 0 0 5px rgba(255, 255, 255, 0.28);
}
.band__crest img { width: 70px; height: 70px; object-fit: contain; }
.band__team { min-width: 0; }
.band__name {
  font: 800 34px/0.95 var(--display); text-transform: uppercase; letter-spacing: 0.005em; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.band__meta { display: block; margin-top: 8px; font: 600 15px/1.2 var(--display); letter-spacing: 0.03em; opacity: 0.88; text-transform: uppercase; }
.band__center {
  position: relative; z-index: 1; display: grid; justify-items: center; align-content: center; gap: 6px;
  padding: 18px 12px; text-align: center;
}
.band__league { display: inline-flex; align-items: center; gap: 6px; font: 700 14px/1 var(--display); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); }
.band__league img { width: 18px; height: 18px; object-fit: contain; }
.band__label { font: 700 13px/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.band__time { font: 800 54px/0.9 var(--display); letter-spacing: -0.01em; }
.band__score { font: 800 72px/0.9 var(--display); letter-spacing: -0.01em; }
.band__score span { color: var(--ink-3); padding: 0 8px; font-weight: 600; }
.band__sub { font: 600 15px/1.2 var(--display); letter-spacing: 0.03em; color: var(--ink-2); text-transform: uppercase; }
.band__count { font: 700 15px/1 var(--display); letter-spacing: 0.04em; color: var(--ink); background: var(--module-2); border-radius: 999px; padding: 6px 12px; }
.band__count:empty { display: none; }
.band .donut { max-width: 150px; }
.band__probs { display: flex; gap: 14px; font: 700 16px/1 var(--display); letter-spacing: 0.02em; }
.band__probs span { display: inline-flex; align-items: center; gap: 5px; }
.band__link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.band__link:focus-visible { outline-offset: -4px; }

/* The halfway line and centre circle, drawn faint behind the centre */
.band__pitch { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; color: var(--rule); }

.hero { margin-bottom: 16px; }
.mband { border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--rule); }
.mband .band__center { padding: 22px 16px; }

@media (max-width: 900px) {
  .band { grid-template-columns: 1fr 1fr; grid-template-areas: "home away" "center center"; min-height: 0; }
  .band__side--home, .band__side--away { clip-path: none; flex-direction: column; text-align: center; padding: 18px 10px; gap: 10px; }
  .band__side--home { grid-area: home; }
  .band__side--away { grid-area: away; }
  .band__center { grid-area: center; padding: 16px 12px 20px; }
  .band__crest { width: 64px; height: 64px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 0 0 4px rgba(255, 255, 255, 0.28); }
  .band__crest img { width: 42px; height: 42px; }
  .band__name { font-size: 22px; }
  .band__meta { font-size: 13px; margin-top: 4px; }
  .band__time { font-size: 44px; }
  .band__score { font-size: 56px; }
  .band__pitch { display: none; }
}

/* ---------------------------------------------------------------- team colour in rows and lists */

.mrow { position: relative; transition: background-color 180ms var(--ease-out); }
.mrow:hover {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--home) 10%, transparent), transparent 35%,
                    transparent 65%, color-mix(in srgb, var(--away) 10%, transparent)),
    var(--module-2);
}
.mrow__chev { transition: transform 200ms var(--ease-out), color 200ms; }
.mrow:hover .mrow__chev { transform: translateX(3px); color: var(--ink); }
.team__logo { transition: transform 220ms var(--ease-out); }
.mrow:hover .team__logo { transform: scale(1.12); }

.disc {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c, var(--rule)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.disc img { width: 24px; height: 24px; object-fit: contain; background: #fff; border-radius: 50%; padding: 2px; }
.fav { grid-template-columns: 34px minmax(0, 1fr) auto; }
.fav .disc { grid-row: span 3; align-self: start; }
.fav__bar { grid-column: 2 / -1; height: 4px; border-radius: 2px; background: var(--rule); overflow: hidden; margin-top: 4px; }
.fav__bar i { display: block; height: 100%; background: var(--c); border-radius: 2px; }
.slist a { transition: transform 200ms var(--ease-out); }
.slist a:hover { transform: translateX(3px); }

/* ---------------------------------------------------------------- motion */

@keyframes reveal-x { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes draw-ring { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes grow-w { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ink) 45%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes crest-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } }

.pbar { animation: reveal-x 760ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 30ms + 80ms); }
.donut__reveal { animation: draw-ring 1100ms cubic-bezier(0.3, 0.7, 0.2, 1) both 120ms; }
.cmp__bars i, .stat__bars i, .fav__bar i { animation: grow-w 800ms var(--ease-out) both 200ms; }
.cmp__bars span:first-child i, .stat__bars span:first-child i { transform-origin: right; }
.cmp__bars span:last-child i, .stat__bars span:last-child i, .fav__bar i { transform-origin: left; }
.chip--live { animation: pulse 1.6s ease-out infinite; }
.chip--hit, .chip--miss { animation: rise 420ms var(--ease-out) both 500ms; }
.band__crest { animation: crest-in 560ms var(--ease-out) both 60ms; }
.band__side--away .band__crest { animation-delay: 140ms; }
.band__crest { transition: transform 260ms var(--ease-out); }
.band:hover .band__crest { transform: scale(1.04) rotate(-2deg); }
.heat td { transition: transform 160ms var(--ease-out); }
.heat td:hover { transform: scale(1.08); position: relative; z-index: 1; }
#theme-toggle .icon { transition: transform 400ms var(--ease-out); }
#theme-toggle:active .icon { transform: rotate(40deg) scale(0.9); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------- Matchday: floodlit bands, in both themes */

:root {
  --band-ground: #fbfcfd; --band-ink: var(--ink); --band-glow: 88%;
  --pitch-line: rgba(18, 20, 23, 0.10); --strip-ground: var(--module);
  --crest-ring: rgba(18, 20, 23, 0.08); --crest-halo: rgba(18, 20, 23, 0.10); --chip-ground: rgba(18, 20, 23, 0.06);
}
/* Dark theme is the matchday night: near-black ground, team colours as floodlight */
:root[data-theme="dark"] {
  --canvas: #090b0e; --module: #13161b; --module-2: #1a1e25; --ink: #f1f3f6; --ink-2: #b9c0ca; --ink-3: #8c94a0;
  --rule: #252a32; --rule-strong: #3a414c; --bar: #050607; --draw: #7d8693; --hit: #4cc38a; --miss: #f07a68;
  --focus: #f1f3f6; --shadow: none; color-scheme: dark;
  --band-ground: #07090c; --band-ink: #ffffff; --band-glow: 72%;
  --pitch-line: rgba(255, 255, 255, 0.10); --strip-ground: #0d1014;
  --crest-ring: rgba(255, 255, 255, 0.4); --crest-halo: rgba(255, 255, 255, 0.16); --chip-ground: rgba(255, 255, 255, 0.08);
}
:root[data-theme="dark"] .module { border-color: var(--rule); }

.band { background: var(--band-ground); border: 1px solid var(--rule); }
.band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 130% at 0% 50%, color-mix(in srgb, var(--home) var(--band-glow), transparent), transparent 62%),
    radial-gradient(70% 130% at 100% 50%, color-mix(in srgb, var(--away) var(--band-glow), transparent), transparent 62%),
    radial-gradient(45% 70% at 50% -15%, color-mix(in srgb, var(--band-ink) 10%, transparent), transparent 70%);
}
.band__side--home, .band__side--away { background: transparent; color: var(--band-ink); clip-path: none; }
.band__crest { box-shadow: 0 0 0 1px var(--crest-ring), 0 0 44px var(--crest-halo); }
.band__pitch { color: var(--pitch-line); }
.band__count { background: var(--chip-ground); }
.mrow:hover {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--home) 16%, transparent), transparent 40%,
                    transparent 60%, color-mix(in srgb, var(--away) 16%, transparent)),
    var(--module-2);
}
.strip, .ticker, .ticker__day { background: var(--strip-ground); }
.strip::before { background: linear-gradient(to right, var(--strip-ground), transparent); }
.strip::after, .ticker::after { background: linear-gradient(to left, var(--strip-ground), transparent); }

/* Team colours: the inline style carries a light-surface and a dark-surface variant */
[style*="--home-l"] { --home: var(--home-l); --away: var(--away-l); --on-home: var(--on-home-l); --on-away: var(--on-away-l); }
:root[data-theme="dark"] [style*="--home-l"] {
  --home: var(--home-d); --away: var(--away-d); --on-home: var(--on-home-d); --on-away: var(--on-away-d);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [style*="--home-l"] {
    --home: var(--home-d); --away: var(--away-d); --on-home: var(--on-home-d); --on-away: var(--on-away-d);
  }
}

/* Phone: top bar must fit 400px */
@media (max-width: 560px) {
  .topbar__inner { gap: 10px; padding: 0 10px; }
  .nav a { padding: 0 6px; }
  .topbar__tools { gap: 0; min-width: 0; }
  .iconbtn { min-width: 30px; padding: 0 4px; }
}
@media (max-width: 900px) {
  .band .donut { max-width: 124px; }
  .band__center { gap: 4px; }
}

/* Light theme: floodlight sits tighter around the crest, names keep a light halo for legibility */
:root:not([data-theme="dark"]) .band::before {
  background:
    radial-gradient(55% 125% at 0% 50%, color-mix(in srgb, var(--home) var(--band-glow), transparent), transparent 64%),
    radial-gradient(55% 125% at 100% 50%, color-mix(in srgb, var(--away) var(--band-glow), transparent), transparent 64%);
}
:root:not([data-theme="dark"]) .band__team {
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.9), 0 0 16px rgba(255, 255, 255, 0.95), 0 0 30px rgba(255, 255, 255, 0.8);
}

/* ---------------------------------------------------------------- wide screens and atmosphere */

.topbar__inner, .strip__inner, .ticker__inner, .page, .footer { max-width: 1560px; }
.grid { grid-template-columns: 320px minmax(0, 1fr) 340px; }
@media (max-width: 1180px) { .grid { grid-template-columns: minmax(0, 1fr) 300px; } .grid--match { grid-template-columns: 300px minmax(0, 1fr); } }
@media (max-width: 820px) { .grid, .grid--match { grid-template-columns: minmax(0, 1fr); } }

/* Floodlit stadium night behind everything (dark), a soft daylight wash (light) */
body {
  background:
    radial-gradient(60% 50% at 15% -10%, rgba(255, 255, 255, 0.05), transparent 70%),
    radial-gradient(60% 50% at 85% -10%, rgba(255, 255, 255, 0.05), transparent 70%),
    var(--canvas);
  background-attachment: fixed;
}
:root[data-theme="dark"] body {
  background:
    radial-gradient(55% 45% at 12% -8%, rgba(160, 190, 255, 0.10), transparent 70%),
    radial-gradient(55% 45% at 88% -8%, rgba(160, 190, 255, 0.10), transparent 70%),
    radial-gradient(80% 60% at 50% 120%, rgba(40, 120, 70, 0.10), transparent 70%),
    var(--canvas);
  background-attachment: fixed;
}

/* Look-ahead on a match-free day */
.empty--day { border-bottom: 1px solid var(--rule); }
.league-head--day .league-head__count { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.mrow__league { display: block; font: 600 11px/1.2 var(--font); color: var(--ink-3); text-transform: none; letter-spacing: 0; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 64px; }

/* ---------------------------------------------------------------- brand: monochrome mark + wordmark */
.brand { gap: 9px; color: var(--bar-ink); text-transform: none; }
/* The mark is a mask filled with the text colour: white on dark, black on light */
.brand__mark {
  display: inline-block; flex: none; width: 34px; height: 30px; background: currentColor;
  -webkit-mask: url("/static/brand/mark.png") center / contain no-repeat;
  mask: url("/static/brand/mark.png") center / contain no-repeat;
  transition: transform 260ms var(--ease-out);
}
.brand:hover .brand__mark { transform: rotate(-6deg) scale(1.06); }
.brand__word { font: 500 25px/1 var(--display); letter-spacing: 0.01em; }
.brand__word b { font-weight: 800; }

/* Top bar follows the theme: light bar with a black mark, black bar with a white mark */
:root:not([data-theme="dark"]) {
  --bar: #ffffff; --bar-ink: #121417; --bar-ink-2: #5b636f;
}
:root:not([data-theme="dark"]) .topbar { border-bottom: 1px solid var(--rule); }
.iconbtn:hover { background: color-mix(in srgb, var(--bar-ink) 9%, transparent); }

/* ---------------------------------------------------------------- login: floodlit pitch */
.login { position: relative; overflow: hidden; isolation: isolate; }
.login::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(45% 55% at 8% 0%, color-mix(in srgb, var(--ink) 14%, transparent), transparent 70%),
    radial-gradient(45% 55% at 92% 0%, color-mix(in srgb, var(--ink) 14%, transparent), transparent 70%),
    radial-gradient(70% 50% at 50% 115%, rgba(40, 140, 80, 0.16), transparent 70%);
}
.login__pitch { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; color: var(--rule-strong); opacity: 0.7; }
.login__card { position: relative; border-radius: 10px; padding: 34px 28px 30px; background: color-mix(in srgb, var(--module) 88%, transparent);
  backdrop-filter: blur(6px); animation: rise 520ms var(--ease-out) both; }
.login__brand { color: var(--ink); gap: 12px; margin-bottom: 10px; }
.login__brand .brand__mark { width: 52px; height: 46px; }
.login__brand .brand__word { font-size: 40px; }
.login__lead { font-size: 15px; }
.login .btn { font: 700 17px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; height: 44px; }
.login .input { height: 44px; }

/* Ticker cells carry both team colours as a thin top line */
.ticker__cell { background: linear-gradient(90deg, var(--home) 50%, var(--away) 50%) top / 100% 3px no-repeat; }
.ticker__cell:hover, .ticker__cell[aria-current="page"] {
  background: linear-gradient(90deg, var(--home) 50%, var(--away) 50%) top / 100% 3px no-repeat, var(--module-2);
}

/* Heatmap figures on strong cells take the readable text colour of that team's colour */
.heat td.heat--h.is-hot { color: var(--on-home); }
.heat td.heat--a.is-hot { color: var(--on-away); }

/* Strong draw cells: dark figures on the neutral grey (white would fall below 4.5:1) */
.heat td.heat--x.is-hot { color: #111418; }