/* ── The European campaign, as a sequence ─────────────────────────────────────
   Its own sheet because the campaign is a mode with its own frame — a fixed
   header, a progress bar, one card and one call to action — and because from the
   qualifying play-off onward the whole thing changes colour.

   The colour is ONE mechanism: `[data-eu-blue="1"]` re-points a handful of local
   custom properties. Every rule below is written once, against the properties,
   so the blue half and the dark half can never drift apart. */

.eu-seq {
  --eu-ink:     var(--text);
  --eu-dim:     var(--dim);
  --eu-card:    var(--surface);
  --eu-edge:    var(--border);
  --eu-glow:    #1f6feb;
  --eu-glow2:   #388bfd;
  --eu-canvas:  transparent;
  --eu-win:     #2ea043;
  --eu-draw:    #d29922;
  --eu-loss:    #da3633;
  position: relative;
  margin: 0 -4px;
  padding: 4px 4px 24px;
  background: var(--eu-canvas);
  border-radius: 14px;
  transition: background .6s ease;
}

/* The Champions League half. Not the official blue sampled off a badge — a
   navy that sits on our own dark ground without vibrating, with the brighter
   blue kept for the things that should glow: the bar, the CTA, the score. */
.eu-seq[data-eu-blue="1"] {
  --eu-card:   #101c33;
  --eu-edge:   #1d3a63;
  --eu-glow:   #2b7fff;
  --eu-glow2:  #4da3ff;
  --eu-canvas: radial-gradient(120% 60% at 50% 0%, #12294d 0%, #0b1524 55%, transparent 100%);
}
/* The Europa League and the Conference keep the same structure and swap the
   accent, exactly as the backdrop does — orange on black, and a quieter green. */
.eu-seq[data-eu-blue="1"][data-eu-tier="uel"] {
  --eu-card:   #241407;
  --eu-edge:   #613414;
  --eu-glow:   #ff8a1f;
  --eu-glow2:  #ffb45c;
  --eu-canvas: radial-gradient(120% 60% at 50% 0%, #3a1d07 0%, #1a0d03 55%, transparent 100%);
}
.eu-seq[data-eu-blue="1"][data-eu-tier="uecl"] {
  --eu-card:   #0a2018;
  --eu-edge:   #174a36;
  --eu-glow:   #1fbd80;
  --eu-glow2:  #52dfa6;
  --eu-canvas: radial-gradient(120% 60% at 50% 0%, #0d3325 0%, #06170f 55%, transparent 100%);
}

[data-theme="light"] .eu-seq[data-eu-blue="1"] {
  --eu-card:   #f2f6ff;
  --eu-edge:   #b9cdf0;
  --eu-canvas: radial-gradient(120% 60% at 50% 0%, #dbe8ff 0%, #eef3fc 60%, transparent 100%);
}

/* ── the page behind the page ─────────────────────────────────────────────────
   Fixed, full-bleed and inert. It sits under everything, so the screen's own
   cards keep their surfaces and only the ground changes. Removed from the DOM
   when Europe is left rather than merely hidden — a blurred SVG filter is not
   something to leave running behind the rest of the site. */
#eu-backdrop {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  animation: eu-fade 1s ease;
}
#eu-backdrop svg { width: 100%; height: 100%; display: block; }
/* the content has to float above it, and .screen is where the stacking starts.
   .screen-page fills the viewport with a solid var(--bg); on the blue half it
   has to step aside or the backdrop is painted over and never seen. */
/* z-index ONLY. .screen is already position:fixed with inset:0 and overflow-y:
   auto — it IS the scroll container, and body sets overflow:hidden behind it.
   Overriding it to position:relative lifted it out of that box and the screen
   simply stopped scrolling. A positioned element does not need repositioning to
   take a z-index. */
#screen-europe { z-index: 1; }
body.eu-blue #screen-europe { background: transparent; }
@keyframes eu-fade { from { opacity: 0; } to { opacity: 1; } }

/* On the blue half the cards go translucent, so the backdrop reads THROUGH the
   screen instead of behind a stack of solid panels. */
.eu-seq[data-eu-blue="1"] .eu-card {
  background: color-mix(in srgb, var(--eu-card) 82%, transparent);
  backdrop-filter: blur(6px);
}

/* ── header ───────────────────────────────────────────────────────────────── */
.eu-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.eu-kicker {
  font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--eu-dim); font-weight: 700;
}
.eu-title { font-size: 22px; font-weight: 900; line-height: 1.15; margin-top: 2px; }
.eu-top-r { display: flex; align-items: center; gap: 6px; flex-shrink: 0; padding-top: 4px; }
.eu-stage {
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--eu-dim); font-weight: 700;
}
.eu-chip {
  background: transparent; color: var(--eu-dim); cursor: pointer;
  border: 1px solid var(--eu-edge); border-radius: 9px;
  font-size: 11px; font-weight: 700; padding: 6px 9px; line-height: 1;
}
.eu-chip:hover { color: var(--eu-ink); border-color: var(--eu-glow); }

.eu-prog {
  height: 4px; border-radius: 99px; margin: 12px 0 16px;
  background: color-mix(in srgb, var(--eu-edge) 60%, transparent);
  overflow: hidden;
}
.eu-prog span {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--eu-glow2), var(--eu-glow));
  transition: width .5s ease;
}

/* ── cards ────────────────────────────────────────────────────────────────── */
.eu-card {
  background: var(--eu-card);
  border: 1px solid var(--eu-edge);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px;
}
.eu-card.won  { border-color: color-mix(in srgb, var(--eu-win) 55%, var(--eu-edge)); }
.eu-card.lost { border-color: color-mix(in srgb, var(--eu-loss) 55%, var(--eu-edge)); }

.eu-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--eu-dim); font-weight: 700; margin-bottom: 12px;
}
.eu-card-head .eu-vs, .eu-card-head .eu-tally { letter-spacing: 0; text-transform: none; font-size: 11px; }
.eu-card-head b { color: var(--eu-glow2); }
.eu-note { font-size: 11.5px; color: var(--eu-dim); line-height: 1.6; margin: 0 0 10px; }

/* ── the live match ───────────────────────────────────────────────────────── */
.eu-live-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 10px;
}
.eu-side {
  flex: 1; font-size: 12.5px; font-weight: 700; line-height: 1.3;
  display: flex; align-items: center; gap: 6px;
}
.eu-side:last-child { justify-content: flex-end; text-align: end; }
.eu-live-score {
  font-size: 34px; font-weight: 900; letter-spacing: 1px; flex-shrink: 0;
  padding: 4px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--eu-glow) 12%, transparent);
  text-shadow: 0 0 22px color-mix(in srgb, var(--eu-glow) 55%, transparent);
}
.eu-clock { font-size: 11px; color: var(--eu-dim); margin-bottom: 6px; font-weight: 700; }
.eu-bar {
  height: 5px; border-radius: 99px; overflow: hidden; margin-bottom: 12px;
  background: color-mix(in srgb, var(--eu-edge) 60%, transparent);
}
.eu-bar span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--eu-glow2), var(--eu-glow));
}
.eu-live-prev { font-size: 11px; color: var(--eu-dim); margin-bottom: 8px; }

.eu-feed { display: flex; flex-direction: column; gap: 5px; min-height: 40px; }
.eu-ev {
  display: flex; align-items: center; gap: 8px; font-size: 12px;
  padding: 6px 9px; border-radius: 9px;
  background: color-mix(in srgb, var(--eu-edge) 22%, transparent);
  animation: eu-pop .35s ease;
}
.eu-ev.them { opacity: .78; }        /* theirs, not yours — dimmed, still readable */
.eu-ev-min { font-size: 10px; color: var(--eu-dim); font-weight: 700; min-width: 26px; }
@keyframes eu-pop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ── the aggregate ────────────────────────────────────────────────────────── */
.eu-agg-big {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-radius: 12px; margin-bottom: 10px;
  background: color-mix(in srgb, var(--eu-edge) 25%, transparent);
}
.eu-agg-lbl {
  font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--eu-dim); font-weight: 700;
}
.eu-agg-val { font-size: 30px; font-weight: 900; line-height: 1.1; }
.eu-agg-extra { font-size: 11px; color: var(--eu-dim); margin-top: 2px; }
.eu-agg-res { font-size: 15px; font-weight: 900; letter-spacing: .5px; }
.eu-agg-res.won  { color: var(--eu-win); }
.eu-agg-res.lost { color: var(--eu-loss); }

.eu-legs { display: flex; flex-direction: column; gap: 6px; }
.eu-leg-row {
  display: flex; align-items: center; gap: 10px; font-size: 12px;
  padding: 8px 10px; border-radius: 9px;
  border: 1px solid var(--eu-edge);
}
.eu-leg-row.win  { border-color: color-mix(in srgb, var(--eu-win) 45%, var(--eu-edge)); }
.eu-leg-row.draw { border-color: color-mix(in srgb, var(--eu-draw) 45%, var(--eu-edge)); }
.eu-leg-row.loss { border-color: color-mix(in srgb, var(--eu-loss) 45%, var(--eu-edge)); }
.eu-leg-n  { font-size: 10px; color: var(--eu-dim); font-weight: 700; min-width: 34px; }
.eu-leg-sc { font-weight: 900; font-size: 14px; min-width: 34px; }
.eu-leg-sc-names { font-size: 10.5px; color: var(--eu-dim); flex: 1; text-align: end; }

/* ── the road ─────────────────────────────────────────────────────────────── */
.eu-road-row {
  display: flex; align-items: center; gap: 10px; font-size: 12px;
  padding: 9px 0; position: relative;
}
/* the spine between the dots */
.eu-road-row:not(:last-child)::before {
  content: ''; position: absolute; top: 28px; bottom: -9px;
  inset-inline-start: 11px; width: 2px;
  background: var(--eu-edge);
}
.eu-road-dot {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--eu-edge); font-size: 11px; z-index: 1;
  background: var(--eu-card);
}
.eu-road-row.won  .eu-road-dot { border-color: var(--eu-win); color: var(--eu-win); }
.eu-road-row.lost .eu-road-dot { border-color: var(--eu-loss); color: var(--eu-loss); }
.eu-road-row.now  .eu-road-dot {
  border-color: var(--eu-glow);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--eu-glow) 22%, transparent);
}
.eu-road-name {
  font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--eu-dim); font-weight: 700; min-width: 62px;
}
.eu-road-row.todo .eu-road-txt { color: var(--eu-dim); }
.eu-road-txt { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.eu-road-agg { color: var(--eu-glow2); font-weight: 700; }

/* ── the table ────────────────────────────────────────────────────────────── */
.eu-verdict-h { font-size: 17px; font-weight: 900; line-height: 1.25; margin-bottom: 4px; }
.eu-table { border: 1px solid var(--eu-edge); border-radius: 10px; overflow: hidden; }
.eu-table .lt-row { position: relative; }
/* the qualification bands, as a rail rather than a row tint — a tinted row
   fights with the highlight on your own row, which matters more */
.eu-table .lt-row::before {
  content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px;
}
.eu-table .lt-row.bye::before { background: var(--eu-win); }
.eu-table .lt-row.po::before  { background: var(--eu-glow); }
.eu-table .lt-row.out::before { background: var(--eu-loss); }
.eu-table-full { margin-top: 8px; max-height: 320px; overflow-y: auto; }
.eu-more {
  width: 100%; margin-top: 8px; padding: 9px; cursor: pointer;
  background: transparent; color: var(--eu-dim);
  border: 1px solid var(--eu-edge); border-radius: 9px;
  font-size: 11.5px; font-weight: 700;
}
.eu-more:hover { color: var(--eu-ink); }
.eu-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: 10.5px; color: var(--eu-dim); }
.eu-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-inline-end: 4px; }
.eu-legend i.bye { background: var(--eu-win); }
.eu-legend i.po  { background: var(--eu-glow); }
.eu-legend i.out { background: var(--eu-loss); }

/* ── the ends ─────────────────────────────────────────────────────────────── */
.eu-end-t { font-size: 18px; font-weight: 900; margin-bottom: 6px; line-height: 1.25; }
.eu-trophy { text-align: center; }
.eu-trophy-cup { font-size: 54px; line-height: 1; animation: eu-rise .8s ease; }
.eu-trophy-t {
  font-size: 26px; font-weight: 900; margin: 6px 0 4px; letter-spacing: .5px;
  text-shadow: 0 0 30px color-mix(in srgb, var(--eu-glow) 60%, transparent);
}
.eu-trophy-line { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; font-size: 12px; }
/* Direct children only. `.eu-trophy-line span` also matched the crest's hidden
   flag fallback — and beat `.eu-badge-fb`'s display:none on specificity — so
   every club showed its badge AND the two letters of its flag beside it. */
.eu-trophy-line > span { display: flex; align-items: center; justify-content: center; gap: 6px; }
@keyframes eu-rise {
  from { opacity: 0; transform: translateY(14px) scale(.85); }
  to   { opacity: 1; transform: none; }
}

/* ── the one button ───────────────────────────────────────────────────────── */
.eu-cta {
  width: 100%; padding: 15px; cursor: pointer;
  border: 0; border-radius: 12px;
  background: linear-gradient(135deg, var(--eu-glow2), var(--eu-glow));
  color: #fff; font-size: 14.5px; font-weight: 800;
  box-shadow: 0 6px 26px color-mix(in srgb, var(--eu-glow) 40%, transparent);
}
.eu-cta:hover { filter: brightness(1.08); }
.eu-cta:active { transform: translateY(1px); }

/* ── crests ───────────────────────────────────────────────────────────────── */
.eu-badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; }
.eu-badge img { width: 22px; height: 22px; object-fit: contain; }
.eu-badge img.missing { display: none; }
.eu-badge-fb { display: none; font-size: 15px; }
.eu-badge-fb.shown { display: inline; }
.eu-badge img.missing + .eu-badge-fb { display: inline; }

.mr-gw { font-size: 10px; color: var(--eu-dim); font-weight: 700; margin-inline-end: 3px; }

/* the league phase deals itself in, one matchweek at a time */
.match-row { transition: opacity .3s ease, transform .3s ease; }
.match-row.eu-dealt { opacity: 0; transform: translateY(-8px); }

.eu-caps-note {
  font-size: 11px; line-height: 1.5; margin: 8px 0 4px;
  padding: 7px 9px; border-radius: 9px;
  color: var(--eu-dim);
  background: color-mix(in srgb, var(--eu-glow) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--eu-glow) 30%, transparent);
}
.eu-caps-note b { color: var(--eu-glow2); font-size: 13px; }

@media (max-width: 400px) {
  .eu-title { font-size: 19px; }
  .eu-live-score { font-size: 28px; padding: 4px 10px; }
  .eu-side { font-size: 11.5px; }
  .eu-road-name { min-width: 52px; }
}

/* ── the parachute ────────────────────────────────────────────────────────── */
.eu-drop { text-align: center; }
.eu-drop-score { font-size: 13px; color: var(--eu-dim); margin-bottom: 10px; }
.eu-drop-score b { font-size: 18px; color: var(--eu-ink); margin-inline-start: 6px; }
.eu-drop-t {
  font-size: 21px; font-weight: 900; line-height: 1.25; margin-bottom: 6px;
  text-shadow: 0 0 26px color-mix(in srgb, var(--eu-glow) 55%, transparent);
}
.eu-drop-arrow {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 12px; font-size: 11px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
}
.eu-drop-arrow .from { color: var(--eu-dim); opacity: .65; }
.eu-drop-arrow .ar   { font-size: 20px; color: var(--eu-glow2); animation: eu-drop-b 1.4s ease-in-out infinite; }
.eu-drop-arrow .to   { color: var(--eu-glow2); font-size: 13px; }
@keyframes eu-drop-b { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ── the holder's seat ────────────────────────────────────────────────────────
   The same card, read the other way: the competition you came FROM is the one
   lit, because that is the one you won, and the arrow floats up instead of
   down. */
.eu-bye-cup {
  font-size: 40px; line-height: 1; margin-bottom: 8px;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--eu-glow2) 65%, transparent));
}
.eu-bye .eu-drop-arrow .from { color: var(--eu-glow2); opacity: 1; font-size: 13px; }
.eu-bye .eu-drop-arrow .to   { color: var(--eu-ink); }
.eu-bye .eu-drop-arrow .ar   { animation-name: eu-bye-b; }
@keyframes eu-bye-b { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ── the monogram ─────────────────────────────────────────────────────────────
   The fallback for the 88 clubs with no badge file. A flag emoji was the old
   fallback and it is unusable on Windows, which ships no regional-indicator
   glyphs at all — 🇨🇾 renders as the letters "CY". Initials on a coloured disc
   always render, differ club to club, and look deliberate. */
.eu-mono {
  display: none;                       /* until the image says it failed */
  align-items: center; justify-content: center;
  border-radius: 50%; flex-shrink: 0;
  font-weight: 900; letter-spacing: -.5px; line-height: 1;
  color: hsl(var(--h) 70% 88%);
  background: hsl(var(--h) 45% 26%);
  box-shadow: inset 0 0 0 1px hsl(var(--h) 55% 45% / .7);
}
.eu-mono-sm { width: 16px; height: 16px; font-size: 8px; vertical-align: -3px; margin-inline-end: 3px; }
.eu-mono-lg { width: 22px; height: 22px; font-size: 10px; }
/* no image beside it at all → it IS the crest */
.eu-badge > .eu-mono:only-child,
.eu-mini-crest.missing + .eu-mono,
.eu-badge img.missing + .eu-mono { display: inline-flex; }