@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&display=swap');

:root {
  --green:       #00B870;
  --green-dim:   #007a4a;
  --green-glow:  rgba(0,184,112,0.35);
  --cyan:        #34D9B3;
  --cyan-dim:    rgba(52,217,179,0.15);
  --amber:       #F59E0B;
  --gold:        #FBBF24;
  --silver:      #94A3B8;
  --bronze:      #C2773A;
  --red:         #FB8585;
  --draw:        #6B819A;
  /* lightened a few shades for TV legibility */
  --bg:          #0A111A;
  --bg2:         #101A28;
  --bg3:         #16222F;
  --bubble-bg:   #0E1722;   /* side panels — darker, recede */
  --panel-bg:    #283B50;   /* raised centre panels — clearly lighter */
  --border:      rgba(0,184,112,0.16);
  --border-dim:  rgba(255,255,255,0.07);
  --text:        #EAF4F8;
  --text-dim:    #7793A6;
  --header-h:    3.25rem;
  --gap:         1.25rem;
  --radius:      0.875rem;
  --col-l:       20fr;
  --col-c:       60fr;
  --col-r:       20fr;
  --bubble-shadow: 0 6px 18px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.03) inset;
  --panel-shadow: 0 22px 50px rgba(0,0,0,0.65), 0 0 26px rgba(52,217,179,0.16),
                  0 0 0 1px rgba(52,217,179,0.18), 0 2px 0 rgba(255,255,255,0.14) inset,
                  0 -16px 44px rgba(0,0,0,0.4) inset;
  /* a clearly raised fixture-card treatment so cards float above the panels */
  --card-bg:     linear-gradient(180deg, #3A5067 0%, #1E2E3F 100%);
  --card-shadow: 0 0.75rem 1.4rem rgba(0,0,0,0.55),
                 0 0.14rem 0 rgba(255,255,255,0.16) inset,
                 0 -0.2rem 0.6rem rgba(0,0,0,0.35) inset;
}

/* ── FLUID ROOT ────────────────────────────────────────────────────────────────
   The whole UI is sized in rem. The root font-size tracks the *smaller* of the
   viewport's width/height (scaled so 1920×1080 ≈ 16px), so the layout always
   fills the screen and keeps its proportions on any size or aspect ratio while
   never overflowing. Phones get their own rule in the portrait media query. */
html { font-size: min(0.8333vw, 1.4815vh); }

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, sans-serif;
  height: 100vh;
  overflow: hidden;
  font-size: 0.875rem;
}

/* ── HEADER ──────────────────────────────────────────────────────────────────── */
#header {
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 1.5rem;
  background: var(--bg2);
  border-bottom: 1px solid rgba(34,211,238,0.12);
  position: relative;
}
#header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 5%; right: 5%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan) 40%, var(--green) 60%, transparent);
  opacity: 0.4;
}
#header-left { display: flex; align-items: center; gap: 0.625rem; }
#logo-mark {
  width: 1.75rem; height: 1.75rem; border-radius: 0.44rem;
  background: linear-gradient(135deg, var(--green), var(--cyan));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.94rem; box-shadow: 0 0 12px var(--green-glow);
}
#sweepstake-title {
  font-family: 'Oswald', sans-serif;
  font-size: 1.15rem; font-weight: 700;
  letter-spacing: 0.06em; color: #fff;
  line-height: 1.2;
}
#tournament-name {
  font-size: 0.68rem; font-weight: 600; color: var(--cyan);
  letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid rgba(34,211,238,0.3);
  background: rgba(34,211,238,0.06);
  padding: 0.19rem 0.75rem; border-radius: 1.25rem;
}
#header-right { text-align: right; font-size: 0.7rem; color: var(--text-dim); }

/* ── COLUMN GRID ─────────────────────────────────────────────────────────────── */
#columns {
  display: grid;
  grid-template-columns: var(--col-l) var(--col-c) var(--col-r);
  gap: var(--gap);
  padding: var(--gap);
  height: calc(100vh - var(--header-h));
  background: var(--bg);
}

/* ── BUBBLE ──────────────────────────────────────────────────────────────────── */
.bubble {
  background: var(--bubble-bg);
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: var(--bubble-shadow);
  overflow: hidden;
}

/* ── BUBBLE HEADER ───────────────────────────────────────────────────────────── */
.col-header {
  padding: 0.69rem 0.875rem;
  font-family: 'Oswald', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(34,211,238,0.07) 0%, rgba(0,217,126,0.04) 100%);
  border-bottom: 1px solid rgba(34,211,238,0.18);
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
  position: relative;
  z-index: 2;                  /* keep header above the panel sheen */
  line-height: 1.25;
}
.col-header.dim { color: var(--text-dim); }
#group-cycle-dots { position: absolute; right: 0.875rem; display: flex; gap: 0.31rem; }

/* ── RAISED 3D CENTRE PANELS ─────────────────────────────────────────────────── */
.panel-3d {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 26%),
    linear-gradient(180deg, var(--panel-bg) 0%, #18293A 100%);
  border: 1px solid rgba(52,217,179,0.35);
  box-shadow: var(--panel-shadow);
  position: relative;
  isolation: isolate;
}
/* very occasional, subtle sheen sweep (every 45s) — sits BEHIND the cards so it
   washes only the panel frame, never the fixture cards themselves */
.panel-3d::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(115deg,
      transparent 44%,
      rgba(255,255,255,0.06) 49%,
      rgba(255,255,255,0.10) 50%,
      rgba(255,255,255,0.06) 51%,
      transparent 56%);
  background-size: 250% 100%;
  background-position: 160% 0;
  border-radius: inherit;
  animation: sheen 45s linear infinite;
  will-change: background-position;
}
#results-panel.panel-3d::before { animation-delay: 22s; }
@keyframes sheen {
  0%   { background-position: 160% 0; }
  6%   { background-position: -60% 0; }  /* ~2.7s sweep, then idle ~42s */
  100% { background-position: -60% 0; }
}

/* fixture panel header: day label (left) · title (centre) · dots (right) */
.fix-title { flex: 0 0 auto; }
.fix-day {
  position: absolute; left: 0.875rem;
  font-family: 'Oswald', sans-serif;
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: none;
  color: var(--cyan);
}
.fix-dots { position: absolute; right: 0.875rem; display: flex; gap: 0.31rem; }

/* ── LEFT: WIN PROBABILITY + PRIZE POT (two separate bubbles) ─────────────────── */
/* Left grid cell stacks the two bubbles with the standard gap so the Prize Pot
   reads as its own entity, while keeping the same footprint as before. */
#col-left {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-height: 0;
}
#col-prob { display: flex; flex-direction: column; flex: 1; min-height: 0; }

#prob-phase-dots {
  position: absolute;
  right: 0.875rem;
  display: flex;
  gap: 0.31rem;
}
.phase-dot {
  width: 0.375rem; height: 0.375rem; border-radius: 50%;
  background: rgba(255,255,255,0.1);
  cursor: pointer; transition: background 0.3s;
}
.phase-dot.active { background: var(--green); box-shadow: 0 0 6px var(--green-glow); }

#prob-list, #team-prob-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: opacity 0.4s ease;
}
#team-prob-list { display: none; }

/* team prob rows */
#team-prob-list {
  overflow-y: scroll;
  scrollbar-width: none;
}
#team-prob-list::-webkit-scrollbar { display: none; }

.team-prob-row {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto 3.25rem;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}
.team-prob-row:last-child { border-bottom: none; }

.team-prob-flag {
  width: 2.5rem; height: 1.69rem;
  object-fit: cover;
  border-radius: 0.25rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.team-prob-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.team-prob-owner {
  display: flex;
  align-items: center;
  gap: 0.31rem;
  flex-shrink: 0;
}
.team-prob-owner-photo {
  width: 1.375rem; height: 1.375rem; border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.1);
  background: var(--bg3);
  flex-shrink: 0;
}
.team-prob-owner-name {
  font-size: 0.65rem;
  color: var(--text-dim);
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.3;
}
.team-prob-pct {
  text-align: right;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--green);
}

.prob-row {
  flex: 1;
  display: grid;
  /* photo + win% columns size to their (JS-scaled) content so nothing is clipped
     when the rows grow tall (few owners) or shrink (a full 24-owner field) */
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.56rem;
  padding: 0 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  position: relative;
  min-height: 0;
  overflow: hidden;
}
.prob-row:last-child { border-bottom: none; }
.prob-row::before {
  content: '';
  position: absolute;
  left: 0; top: 15%; bottom: 15%;
  width: 0.19rem; border-radius: 0 0.19rem 0.19rem 0;
}
.prob-row.rank-1::before { background: var(--gold);   box-shadow: 0 0 8px rgba(251,191,36,0.6); }
.prob-row.rank-2::before { background: var(--silver); box-shadow: 0 0 6px rgba(148,163,184,0.4); }
.prob-row.rank-3::before { background: var(--bronze); box-shadow: 0 0 6px rgba(194,119,58,0.4); }

.prob-photo {
  width: 2.125rem; height: 2.125rem; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.08);
  background: var(--bg3);
}
/* mood is shown only in Recent Results — Win Probability photos stay neutral */

.row-flag-bg {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 55%;
  background-size: cover;
  background-position: center;
  opacity: 0.07;
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.6) 40%, black 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.6) 40%, black 100%);
}

/* owner name + their team chips share ONE horizontal line */
.prob-info { min-width: 0; display: flex; flex-direction: row; align-items: center; gap: 0.5rem; overflow: hidden; }
/* name keeps its size (flex-shrink:0); the team chips shrink to fit instead */
.prob-name  { font-size: 0.8rem; font-weight: 700; color: #fff; white-space: nowrap; flex-shrink: 0; line-height: 1.3; }
/* one line only: chips never wrap — fitProbTeams() in app.js shrinks the row's
   font-size to fit. Everything inside the chip is sized in `em` so the flag,
   padding and gaps scale down together with the text. */
.prob-teams {
  display: flex; flex-wrap: nowrap;
  gap: 0.3em; align-items: center;
  min-width: 0; flex: 1 1 auto;  /* take the remaining width on the row */
  font-size: 0.64rem;            /* base; app.js may lower this to fit */
  overflow: hidden;
}
.prob-team-chip {
  display: flex;
  align-items: center;
  gap: 0.3em;
  font-size: 1em;
  font-weight: 600;
  color: var(--text);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0.4em;
  padding: 0.1em 0.48em 0.1em 0.3em;
  white-space: nowrap;
  line-height: 1.35;
  flex-shrink: 0;
}
.prob-team-flag {
  width: 1.55em; height: 1.07em;
  object-fit: cover;
  border-radius: 1px;
  flex-shrink: 0;
}

/* eliminated team treatment */
.prob-team-chip.elim {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.06);
}
.prob-team-chip.elim .prob-team-flag { display: none; }
.prob-team-chip.elim::before {
  content: '✕';
  color: var(--red);
  font-size: 0.68rem;
  font-weight: 900;
  flex-shrink: 0;
  line-height: 1;
  text-shadow: 0 0 6px rgba(248,113,113,0.6);
}
.prob-team-chip.elim span {
  color: var(--text-dim);
  text-decoration: line-through;
  text-decoration-color: #FF4D4D;
  text-decoration-thickness: 0.1rem;
  filter: grayscale(1);
  opacity: 0.6;
}

/* owner with EVERY team eliminated — greyed, struck through, sunk to the bottom,
   and the win % replaced by a big red ✕ */
.prob-row.prob-row-out { opacity: 0.5; }
.prob-row.prob-row-out::before { display: none; }   /* drop the rank accent bar */
.prob-row.prob-row-out .prob-photo { filter: grayscale(1); }
.prob-row.prob-row-out .prob-name { color: var(--text-dim); }
.prob-pct.prob-pct-out {
  color: #FF4D4D;
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 9px rgba(255,77,77,0.6);
}

.team-prob-row.elim { opacity: 0.65; }
.team-prob-row.elim .team-prob-name {
  color: var(--text-dim);
  text-decoration: line-through;
  text-decoration-color: #FF4D4D;
  text-decoration-thickness: 0.13rem;
  filter: grayscale(1);
}
.team-prob-row.elim .team-prob-flag { filter: grayscale(1); }
.team-prob-row.elim .team-prob-owner-photo { filter: grayscale(1); opacity: 0.6; }
/* odds value replaced by a big red ✕ for eliminated teams */
.team-prob-pct.team-prob-pct-out {
  color: #FF4D4D;
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 8px rgba(255,77,77,0.6);
}

.team-elim-x {
  width: 2.5rem; height: 1.69rem;
  display: flex; align-items: center; justify-content: center;
  color: var(--red);
  font-size: 1.1rem;
  font-weight: 900;
  flex-shrink: 0;
  border: 1px solid rgba(248,113,113,0.45);
  border-radius: 0.25rem;
  background: rgba(248,113,113,0.12);
  box-shadow: 0 0 10px rgba(248,113,113,0.25);
  text-shadow: 0 0 8px rgba(248,113,113,0.7);
}
/* win % — big, bold, green; matches the Team Odds panel (.team-prob-pct) */
.prob-pct { font-size: 1rem; font-weight: 800; color: var(--green); line-height: 1.2; text-align: right; white-space: nowrap; }

/* ── PRIZE POT (own bubble) ──────────────────────────────────────────────────── */
#prize-podium {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.podium-label {
  font-family: 'Oswald', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  padding: 0.56rem 0.875rem;
  background: linear-gradient(180deg, rgba(34,209,179,0.07) 0%, rgba(0,184,112,0.04) 100%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.podium-stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.625rem 0.875rem 0.875rem;
}

.podium-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.podium-icon {
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: 0.31rem;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.3));
}

.podium-prize {
  font-family: 'Oswald', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.375rem;
  letter-spacing: 0.04em;
}
.p1 .podium-prize { color: var(--gold);   font-size: 1.2rem; }
.p2 .podium-prize { color: var(--silver); }
.p3 .podium-prize { color: var(--bronze); }

.podium-block {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.28rem;
  border-radius: 0.375rem 0.375rem 0 0;
  font-family: 'Oswald', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: rgba(0,0,0,0.78);
  letter-spacing: 0.02em;
  line-height: 1;
}
.podium-nd { font-size: 0.62rem; margin-left: 0.06rem; margin-top: 0.12rem; }

.p1 .podium-block {
  height: 3.25rem;
  background: linear-gradient(180deg, #FFD84D, #F59E0B);
  box-shadow: 0 0 20px rgba(245,158,11,0.6), 0 -2px 0 rgba(255,255,255,0.3) inset;
  font-size: 1.35rem;
}
.p2 .podium-block {
  height: 2.25rem;
  background: linear-gradient(180deg, #C8D6E0, #8FA8BA);
  box-shadow: 0 0 12px rgba(148,163,184,0.4);
}
.p3 .podium-block {
  height: 1.5rem;
  background: linear-gradient(180deg, #D4935A, #A0632A);
  box-shadow: 0 0 10px rgba(194,119,58,0.4);
}

/* ── CENTER: FIXTURES ────────────────────────────────────────────────────────── */
#col-fixtures {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  background: transparent;
  border: none;
  box-shadow: none;
}
#upcoming-panel { flex: 75; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
#results-panel  { flex: 25; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }

.no-fixtures { color: var(--text-dim); font-size: 0.8rem; padding: 1.25rem; text-align: center; margin: auto; }

/* ===== UPCOMING FIXTURES (vertical stack of wide cards) ===== */
#upcoming-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: stretch;
  /* No vertical padding: with space-evenly the gap above the first card, between
     cards, and below the last card are all equal — and equal to the side inset —
     so the spacing matches the panel's interior padding all round. The big gaps
     also give the overflowing owner photos room (no clipping). */
  padding: 0 2.5rem;
  min-height: 0;
  overflow: visible;          /* let large owner photos overflow the cards */
  position: relative;
  z-index: 1;                 /* sit above the panel sheen */
}

.upcoming-card {
  flex: 0 0 20%;              /* shorter cards → bigger, even gaps */
  display: grid;
  grid-template-columns: 1fr 12.25rem auto 12.25rem 1fr;
  align-items: stretch;
  border-radius: 0.75rem;
  background: var(--card-bg);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: var(--card-shadow);
  overflow: visible;          /* photos extend above/below the card */
  position: relative;
}

/* team zone — washed flag bg + big team name + owner */
.uc-teamzone {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-width: 0;
}
.uc-left  { justify-content: flex-end;   border-radius: 0.75rem 0 0 0.75rem; }
.uc-right { justify-content: flex-start; border-radius: 0 0.75rem 0.75rem 0; }

.uc-flag-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0.16;
  pointer-events: none;
}
.uc-flag-left  { -webkit-mask-image: linear-gradient(90deg, black 35%, transparent); mask-image: linear-gradient(90deg, black 35%, transparent); }
.uc-flag-right { -webkit-mask-image: linear-gradient(270deg, black 35%, transparent); mask-image: linear-gradient(270deg, black 35%, transparent); }

.uc-teamzone-inner { position: relative; padding: 0 1rem; min-width: 0; }
.uc-left  .uc-teamzone-inner { text-align: right; }
.uc-right .uc-teamzone-inner { text-align: left; }
.uc-team {
  font-family: 'Oswald', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.06;          /* room for descenders (g, y, p) */
  letter-spacing: 0.01em;
  padding-bottom: 0.06em;
  /* wrap long names to 2 lines instead of truncating */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.uc-owner {
  font-family: 'Oswald', sans-serif;
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--cyan);
  letter-spacing: 0.05em;
  line-height: 1.2;
  margin-top: 0.12rem;
  padding-bottom: 0.06em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* owner photo circles — larger than the card, overflowing top & bottom */
.uc-photo {
  align-self: center;
  width: 12.25rem; height: 12.25rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg3);
  border: 0.25rem solid rgba(255,255,255,0.20);
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  z-index: 2;
}
.uc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.uc-photo-empty {
  background: linear-gradient(135deg, var(--green-dim), var(--bg3));
  color: #fff; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 2.2rem;
}

/* centre column: time / group·matchday / v / odds */
.uc-centre {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 0 0.375rem; min-width: 8.25rem;
  text-align: center;
}
.uc-time {
  font-family: 'Oswald', sans-serif;
  font-size: 1.45rem; font-weight: 700; color: var(--cyan);
  letter-spacing: 0.05em; line-height: 1.12;
}
.uc-meta {
  font-size: 0.66rem; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-top: 0.25rem; line-height: 1.3;
}
.uc-v {
  font-family: 'Oswald', sans-serif;
  font-size: 1.55rem; font-weight: 700; color: #fff;
  margin: 0.25rem 0;
}
.uc-odds { display: flex; gap: 0.875rem; }
.odds-col { display: flex; flex-direction: column; align-items: center; }
.odds-pct { font-family: 'Oswald', sans-serif; font-size: 1.2rem; font-weight: 700; line-height: 1.1; }
.odds-home { color: var(--green); }
.odds-draw { color: var(--text-dim); }
.odds-away { color: var(--cyan); }
.odds-lbl { font-size: 0.58rem; color: var(--text-dim); letter-spacing: 0.1em; margin-top: 0.19rem; }

/* ===== RECENT RESULTS (horizontal row of cards) ===== */
#results-list {
  flex: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 27%;       /* slimmer card width — wider gaps between cards */
  justify-content: space-evenly;
  align-items: stretch;
  align-content: stretch;
  padding: 2.5rem 1rem 0.75rem;  /* top room for the corner photos */
  min-height: 0;
  overflow: visible;
  position: relative;
  z-index: 1;                    /* sit above the panel sheen */
}

.result-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 0.75rem;
  min-height: 0;
}

/* owners sit ON the top corners: photo + adjacent (inward) owner name */
.rc-owner {
  position: absolute;
  top: -1.625rem;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0;
}
.rc-owner-left  { left: -0.375rem; flex-direction: row; }          /* name to the right */
.rc-owner-right { right: -0.375rem; flex-direction: row-reverse; } /* name to the left */

.rc-photo-wrap { position: relative; flex-shrink: 0; z-index: 2; } /* photo above the name box */

.rc-photo {
  width: 4.5rem; height: 4.5rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg3);
  border: 0.19rem solid var(--border-dim);
  box-shadow: 0 4px 14px rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.3rem;
}
.rc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.rc-photo-empty { background: linear-gradient(135deg, var(--green-dim), var(--bg3)); }

/* mood colour overlays + ring */
.rc-overlay { position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: overlay; }
.mood-win  .rc-photo { border-color: var(--green); box-shadow: 0 0 12px var(--green-glow), 0 4px 14px rgba(0,0,0,0.6); }
.mood-win  .rc-overlay { background: rgba(0,184,112,0.45); }
.mood-loss .rc-photo { border-color: var(--red); box-shadow: 0 0 12px rgba(251,133,133,0.4), 0 4px 14px rgba(0,0,0,0.6); }
.mood-loss .rc-overlay { background: rgba(251,133,133,0.4); }
.mood-draw .rc-photo { border-color: var(--draw); }
.mood-draw .rc-overlay { background: rgba(107,129,154,0.25); }

/* emoji — sits on the top corner of the photo (45° for home, 315° for away),
   overlapping it slightly, layered above the photo */
.rc-emoji {
  position: absolute;
  top: -0.25rem;
  font-size: 1.4rem;
  line-height: 1;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.8));
  z-index: 5;
  pointer-events: none;
}
.rc-owner-left  .rc-emoji { right: -0.1rem; left: auto; }   /* top-right (home) */
.rc-owner-right .rc-emoji { left: -0.1rem;  right: auto; }  /* top-left  (away) */

/* owner name — housed in a semi-transparent box whose inner edge tucks behind
   the photo. Stack order: card < name box < photo < emoji */
.rc-name {
  position: relative;
  z-index: 1;
  font-family: 'Oswald', sans-serif;
  font-size: 0.95rem; font-weight: 400; color: var(--cyan);  /* match .uc-owner: smaller, cyan, non-bold */
  letter-spacing: 0.05em;
  line-height: 1.2;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  background: rgba(8,14,22,0.62);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 0.4rem;
  padding: 0.18rem 0.6rem 0.24rem;
}
.rc-owner-left  .rc-name { margin-left: -1rem; padding-left: 1.25rem; border-left: none; border-radius: 0 0.4rem 0.4rem 0; }
.rc-owner-right .rc-name { margin-right: -1rem; padding-right: 1.25rem; border-right: none; border-radius: 0.4rem 0 0 0.4rem; }

/* body: split flag wash + team names level with the score */
.rc-body {
  position: relative;
  flex: 1;
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: var(--card-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 1.125rem;        /* bias the score below the corner owners */
}
.rc-flag-bg {
  position: absolute; top: 0; bottom: 0; width: 40%;
  background-size: cover; background-position: center;
  opacity: 0.24;
  pointer-events: none;
}
/* each flag fades out well before the centre, leaving a clear blank band */
.rc-flag-left  { left: 0;  -webkit-mask-image: linear-gradient(90deg, black 18%, transparent 84%); mask-image: linear-gradient(90deg, black 18%, transparent 84%); }
.rc-flag-right { right: 0; -webkit-mask-image: linear-gradient(270deg, black 18%, transparent 84%); mask-image: linear-gradient(270deg, black 18%, transparent 84%); }

.rc-body-inner { position: relative; width: 100%; }
/* meta pinned to the bottom-centre of the card */
.rc-meta {
  position: absolute;
  bottom: 0.375rem; left: 50%; transform: translateX(-50%);
  text-align: center;
  font-size: 0.72rem; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.08em;
  white-space: nowrap;
  z-index: 1;
  line-height: 1.3;
}
/* grid keeps the SCORE pinned to the dead centre of the card; the two team
   names take equal-width side columns regardless of their lengths */
.rc-score-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
}
.rc-team {
  min-width: 0;
  font-family: 'Oswald', sans-serif;
  font-size: 1.3rem; font-weight: 600; color: #fff;
  line-height: 1.14;            /* room for descenders */
  padding-bottom: 0.04em;
  /* multi-word names wrap to up to 2 lines instead of being ellipsed */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
}
.rc-team-sm { font-size: 1.05rem; }   /* long single words shrink to fit */
.rc-team-xs { font-size: 0.88rem; }   /* very long single words shrink more */
.rc-team-left  { text-align: right; }
.rc-team-right { text-align: left; }
.rc-score {
  font-family: 'Oswald', sans-serif;
  font-size: 3.4rem; font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.05;
  flex-shrink: 0;
  display: flex; align-items: baseline; justify-content: center; gap: 0.375rem;
}
.sc-win  { color: var(--green); }
.sc-lose { color: var(--text-dim); }
.sc-draw { color: var(--cyan); }
.sc-dash { color: var(--text-dim); font-weight: 400; }

/* ── RIGHT: GROUP STANDINGS ──────────────────────────────────────────────────── */
#col-groups { display: flex; flex-direction: column; }

#groups-display {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding: 1.75rem 0.5rem;
  min-height: 0;
  overflow: hidden;
}
#groups-display.ko-mode { padding: 0.6rem 0.7rem; gap: 0; }

.group-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(34,211,238,0.18);
  border-radius: 0.56rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.02) inset;
}

.group-panel-title {
  padding: 0.25rem 0.625rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  text-align: center;
  background: rgba(34,211,238,0.07);
  border-bottom: 1px solid rgba(34,211,238,0.15);
  border-radius: 0.56rem 0.56rem 0 0;
  flex-shrink: 0;
}

/* ── group grid ── */
.group-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 5fr 4.5fr 1fr 1fr 1fr 1fr 1.4fr 1.7fr;
  grid-template-rows: auto repeat(4, 1fr);
  min-height: 0;
}

.gg-cell {
  display: flex;
  align-items: center;
  gap: 0.31rem;
  padding: 0.12rem 0.44rem;
  font-size: 0.7rem;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

.gg-head {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 0.19rem 0.44rem;
  border-bottom: 1px solid rgba(34,211,238,0.15);
  background: rgba(0,0,0,0.2);
}
.gg-head.gg-stat { justify-content: center; padding: 0.19rem 0.12rem; letter-spacing: 0.02em; }

.gg-stat {
  justify-content: center;
  white-space: nowrap;
  padding: 0.12rem 0.25rem;
  font-size: 0.68rem;
  color: var(--text);
}
.gg-pts { color: var(--amber); font-weight: 800; font-size: 0.72rem; }
.gg-qualify { background: rgba(0,217,126,0.05); }

/* eliminated team (3rd-not-best / last) — dimmed, struck-through, red tint.
   The strike is a thick red line and runs across the owner name too. */
.gg-cell.gg-elim { background: rgba(248,113,113,0.05); opacity: 0.62; }
.gg-cell.gg-elim .gt-flag { filter: grayscale(1); opacity: 0.7; }
.gg-cell.gg-elim .gt-name {
  color: var(--text-dim);
  text-decoration: line-through;
  text-decoration-color: #FF4D4D;
  text-decoration-thickness: 0.13rem;
}
.gg-cell.gg-elim .gt-owner-photo { filter: grayscale(1); }

.gt-flag { width: 1.25rem; height: 0.875rem; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
.gt-name { font-weight: 600; font-size: 0.68rem; line-height: 1.25; word-break: break-word; color: #fff; }

.gt-owner-photo {
  width: 1.06rem; height: 1.06rem; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.1); background: var(--bg3);
}
.gt-owner-initial {
  display: flex; align-items: center; justify-content: center;
  background: var(--green-dim); color: #fff;
  font-size: 0.52rem; font-weight: 800;
}
.gt-owner-name { font-size: 0.63rem; color: var(--text-dim); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }

/* ── KNOCKOUT PHASES (right panel) ────────────────────────────────────────────
   Non-card fixtures: flag + team name left, owner name + photo right, team flag
   washed faintly behind. Home over away. Dates head each block once. */
/* whole bracket visible at once: one full-width column, no scrolling */
.ko-grid {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ko-dateblock { margin-bottom: 0.12rem; }

/* date: small, light, unboxed — just a quiet header before its fixtures */
.ko-date {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0 0.1rem 0.05rem 0.2rem;
  margin: 0.14rem 0 0.16rem;
  border-bottom: 1px solid rgba(34,211,238,0.12);
}
.ko-grid .ko-dateblock:first-child .ko-date { margin-top: 0; }
.ko-date-label {
  font-size: 0.55rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(34,211,238,0.66);
}
.ko-date-round {
  font-size: 0.47rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-dim);
}

/* fixture = one tie: kickoff time on the left, two team rows bound as a card */
.ko-fixture {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border: 1px solid rgba(34,211,238,0.12);
  border-radius: 0.5rem;
  overflow: hidden;
  background: rgba(255,255,255,0.012);
  box-shadow: 0 3px 11px rgba(0,0,0,0.34);
}

/* kickoff time gutter, vertically centred across both teams */
.ko-time {
  flex-shrink: 0;
  width: 2.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Oswald', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cyan);
  background: rgba(34,211,238,0.06);
  border-right: 1px solid rgba(34,211,238,0.16);
}
/* once played, the gutter shows the scoreline instead: one goal tally per team
   row (home over away), winner's score in green */
.ko-time.ko-time-score {
  flex-direction: column;
  justify-content: space-evenly;
  padding: 0.04rem 0;
  background: rgba(0,184,112,0.07);
}
.ko-sc {
  font-family: 'Oswald', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1;
}
.ko-sc-win  { color: var(--green); }
.ko-sc-lose { color: var(--text-dim); }

.ko-rows {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ko-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.08rem 0.65rem;
  min-height: 1.0rem;
  background: rgba(255,255,255,0.035);
  overflow: hidden;
}
.ko-rows .ko-row + .ko-row { border-top: 1px solid rgba(255,255,255,0.07); }
/* flag wash anchored left, behind the team */
.ko-row .row-flag-bg {
  left: 0; right: auto;
  width: 55%;
  opacity: 0.12;
  mask-image: linear-gradient(90deg, black 0%, rgba(0,0,0,0.45) 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, black 0%, rgba(0,0,0,0.45) 55%, transparent 100%);
}

.ko-team {
  display: flex; align-items: center; gap: 0.45rem;
  min-width: 0; flex: 1 1 auto; position: relative; z-index: 1;
}
.ko-flag {
  width: 1.25rem; height: 0.83rem; object-fit: cover;
  border-radius: 2px; flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35);
}
.ko-team-name {
  font-size: 0.76rem; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ko-tbd {
  color: var(--text-dim); font-weight: 600; font-style: italic;
  font-size: 0.7rem;
}

.ko-owner {
  display: flex; align-items: center; gap: 0.4rem;
  flex-shrink: 0; position: relative; z-index: 1;
}
.ko-owner-name {
  font-size: 0.64rem; font-weight: 600; color: var(--text-dim);
  white-space: nowrap;
}
.ko-owner-photo {
  width: 0.9rem; height: 0.9rem; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.12); background: var(--bg3);
}
.ko-owner-photo.gt-owner-initial {
  display: flex; align-items: center; justify-content: center;
  background: var(--green-dim); color: #fff; font-size: 0.6rem; font-weight: 800;
}

/* winner row stays bright; loser row: dimmed + thick red strike across the team
   AND owner name (the scoreline itself lives in the left gutter, see .ko-time) */
.ko-row.ko-win  .ko-team-name { color: #fff; }
.ko-row.ko-lose               { opacity: 0.5; }
.ko-row.ko-lose .ko-flag      { filter: grayscale(1); }
.ko-row.ko-lose .ko-team-name {
  color: var(--text-dim);
  text-decoration: line-through;
  text-decoration-color: #FF4D4D;
  text-decoration-thickness: 0.12rem;
}
.ko-row.ko-lose .ko-owner-photo { filter: grayscale(1); }

#group-cycle-dots { display: flex; gap: 0.31rem; }
.cycle-dot {
  width: 0.375rem; height: 0.375rem; border-radius: 50%;
  background: rgba(255,255,255,0.1); cursor: pointer; transition: background 0.3s;
}
.cycle-dot.active { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }

#group-progress-bar { height: 2px; background: rgba(255,255,255,0.04); flex-shrink: 0; border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; }
#group-progress-fill { height: 100%; background: linear-gradient(90deg, var(--green), var(--cyan)); width: 0%; transition: width linear; }

/* placeholder */
.photo-placeholder {
  background: linear-gradient(135deg, var(--green-dim), var(--bg3));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.75rem; font-weight: 800;
}

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }

/* ── PHONE / PORTRAIT: single scrollable column ──────────────────────────────────
   On portrait screens the three columns stack into one tall scrolling column:
   Win Probability → Upcoming Fixtures → Recent Results → Group Standings. */
@media (orientation: portrait) {
  html { font-size: clamp(13px, 4.1vw, 21px); }   /* width-driven on phones */
  body { height: auto; min-height: 100vh; overflow-x: hidden; overflow-y: auto; }
  #app { min-height: 100vh; }

  /* keep the header within the phone's width (the 3-col grid forced overflow) */
  #app { overflow-x: hidden; }
  #header {
    height: auto; padding: 0.6rem 0.8rem; gap: 0.5rem;
    display: flex; flex-wrap: wrap; justify-content: center;
  }
  #header-left, #header-center { min-width: 0; }
  #sweepstake-title { font-size: 1rem; }
  #tournament-name { font-size: 0.55rem; padding: 0.15rem 0.5rem; }
  #header-right { display: none; }

  html, body { overflow-x: hidden; }

  #columns {
    display: flex;
    flex-direction: column;
    height: auto;
    gap: 1rem;
    padding: 1rem;
    width: 100%;
    max-width: 100vw;
  }

  /* every stacked block is capped to the column width and may not grow to its
     intrinsic min-content (which was pushing the right-hand %/odds off-screen) */
  #col-left, #col-prob, #col-fixtures, #col-groups,
  #upcoming-panel, #results-panel,
  #prob-list, #team-prob-list, #upcoming-list, #results-list, #groups-display {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  #col-left { gap: 1rem; }
  #prob-list, #team-prob-list { overflow-x: hidden; }
  #col-fixtures { height: auto; gap: 1rem; }

  /* Win Probability: let the owner list flow at natural row heights and grow the
     column (the page scrolls) rather than cramming all 16 into a fixed height */
  #col-prob { height: auto; }
  #prob-list { flex: none; height: auto; }
  .prob-row  { flex: none; min-height: 3.3rem; }
  #team-prob-list { flex: none; height: auto; max-height: none; overflow: visible; }
  /* override the JS-applied inline row heights so team rows size to content */
  .team-prob-row { height: auto !important; min-height: 2.7rem; }

  /* Upcoming / Recent panels grow to fit their (now vertically-stacked) cards
     instead of flex 75/25, while the page itself scrolls normally. */
  #upcoming-panel { flex: none; height: auto; }
  #results-panel  { flex: none; height: auto; }

  /* Right panel: group standings need a fixed-ish height for their 1fr rows,
     but the knockout bracket has many fixtures and must not be clipped — so on a
     knockout stage the panel grows to fit and the page scrolls (the fixtures stay
     a comfortable size rather than being crammed into a fixed box). */
  /* Portrait shows the WHOLE right panel stacked (renderAllStages): every group
     table followed by each knockout phase. The panel grows to fit and the page
     scrolls — so it has an auto height (not the fixed cycling box), the group
     panels size to their content, and their data rows get a readable fixed
     height instead of dividing a fixed box. */
  #col-groups { height: auto; }
  #groups-display { overflow: visible; height: auto; gap: 1rem; }
  .group-panel { flex: none; }
  .group-grid { grid-template-rows: auto repeat(4, 2.1rem); }

  /* the panel never cycles on a phone, so the cycle dots + progress bar are noise */
  #group-cycle-dots, #group-progress-bar { display: none; }

  /* heading before each stacked knockout phase */
  .stage-section-title {
    margin: 0.5rem 0 0.1rem;
    font-size: 0.82rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--cyan); text-align: center;
  }

  /* Knockout fixtures on mobile: let the bracket take its natural height (so all
     ties are shown) and give each tie generous VERTICAL room so it's no longer
     cramped. Horizontal sizes stay modest so the row fits the phone width. */
  .ko-grid { overflow: visible; flex: none; }
  .ko-dateblock { margin-bottom: 0.55rem; }
  .ko-date { margin: 0.35rem 0 0.3rem; padding-bottom: 0.15rem; }
  .ko-date-label { font-size: 0.78rem; }
  .ko-date-round { font-size: 0.64rem; }
  .ko-fixture { margin-bottom: 0.25rem; }
  .ko-time { width: 3rem; font-size: 0.9rem; }
  .ko-time.ko-time-score { padding: 0.2rem 0; }
  .ko-sc { font-size: 1.15rem; }
  .ko-row { min-height: 2.2rem; padding: 0.3rem 0.55rem; gap: 0.4rem; }
  .ko-team { gap: 0.45rem; min-width: 0; }
  /* let the team name shrink (it ellipsises) so it never shoves the owner off
     the right edge of a narrow phone row */
  .ko-team-name { min-width: 0; font-size: 0.9rem; }
  .ko-flag { width: 1.45rem; height: 0.97rem; }
  .ko-tbd { font-size: 0.85rem; }
  .ko-owner { gap: 0.4rem; }
  .ko-owner-name { font-size: 0.78rem; }
  .ko-owner-photo { width: 1.2rem; height: 1.2rem; }
  .ko-owner-photo.gt-owner-initial { font-size: 0.72rem; }

  /* Upcoming + Recent share one card design on mobile: the Recent Results
     card. Both lists stack their cards vertically with even spacing; the top
     padding leaves room for the corner owner photos that overhang each card.
     (app.js swaps the upcoming builder to the result-card layout in portrait.) */
  #upcoming-list,
  #results-list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 3rem;
    padding: 2.5rem 1rem 1rem;
    overflow: visible;
  }
  #upcoming-list { flex: none; }

  .result-card { min-height: 8rem; }
  .rc-photo { width: 4.4rem; height: 4.4rem; }
  .rc-score { font-size: 3.2rem; }
  .rc-team  { font-size: 1.2rem; max-width: 34%; }
  .rc-name  { font-size: 1.1rem; }

  /* upcoming card centre = the desktop layout (time / group·round / v / odds),
     sized down to fit between the two team names on a phone. */
  .upcoming-result .rc-score-row { gap: 0.4rem; align-items: center; }
  /* fill the 1fr track (the -webkit-box otherwise shrinks to content and wraps
     short names like "England" mid-word even though the column has room) */
  .upcoming-result .rc-team { font-size: 1.05rem; width: 100%; max-width: none; }
  .upcoming-result .uc-centre-mob { min-width: 0; padding: 0; flex-shrink: 0; }
  .upcoming-result .uc-time { font-size: 1.05rem; }
  .upcoming-result .uc-meta { font-size: 0.5rem; margin-top: 0.1rem; }
  .upcoming-result .uc-v    { font-size: 1.05rem; margin: 0.12rem 0; }
  .upcoming-result .uc-odds { gap: 0.5rem; margin-top: 0.12rem; }
  .upcoming-result .odds-pct { font-size: 0.95rem; }
  .upcoming-result .odds-lbl { font-size: 0.46rem; margin-top: 0.08rem; }
}