/* Predict the Score — Midnight Blue design system (PRD v1.0).
   Dark-first, blue brand identity, Inter for UI + JetBrains Mono for numerics.
   Desktop: 260px sidebar + main + 360px right panel.
   Mobile: single column + bottom navigation (the slide-in menu is the "More" sheet). */
:root {
  /* Backgrounds (PRD §3) */
  --bg: #07121F;          /* main background */
  --bg2: #0A1830;         /* secondary background (gradient end) */
  --sidebar-bg: #06111E;  /* deep navy sidebar */
  --card: #10243A;        /* slate-blue card */
  --hover: #18324E;       /* steel-blue hover surface */
  --divider: #20354D;     /* divider blue */
  /* Brand */
  --primary: #2563EB; --bright: #3B82F6; --cyan: #38BDF8;
  /* Semantic */
  --success: #10B981; --warn: #F59E0B; --error: #EF4444; --live: #FF3B30;
  --gold: #FBBF24; --silver: #CBD5E1; --bronze: #C08457;
  /* Text */
  --ink: #F8FAFC; --text: #CBD5E1; --muted: #94A3B8; --disabled: #64748B;
  /* Shape */
  --r-card: 16px; --r-btn: 12px; --r-input: 12px; --r-score: 14px;
  --shadow: 0 8px 24px rgba(0,0,0,.25);
  --glow: 0 0 0 1px rgba(59,130,246,.35), 0 8px 24px rgba(37,99,235,.18);
  --grad: linear-gradient(135deg, #3B82F6, #2563EB);
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Consolas', monospace;
  --sidebar: 260px;
  --rpanel: 360px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Themed scrollbars — native grey bars clash with the Midnight Blue theme
   (most visible on the desktop sidebar when the menu needs to scroll). */
* { scrollbar-width: thin; scrollbar-color: #2A415E transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2A415E; border-radius: 8px; border: 2px solid #07121F; }
::-webkit-scrollbar-thumb:hover { background: #3B5A7E; }
::-webkit-scrollbar-corner { background: transparent; }
body {
  font-family: var(--sans);
  background: linear-gradient(180deg, #07121F 0%, #0A1830 100%) fixed;
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── Header (top bar) ─────────────────────────────────────────────────── */
.ph { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: rgba(6,17,30,.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--divider); }
.ph .brand { font-weight: 800; font-size: 18px; text-decoration: none; letter-spacing: -.01em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ph .burger { width: 44px; height: 40px; border: 1px solid var(--divider); border-radius: var(--r-btn);
  background: var(--card); cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--ink); transition: border-color .15s, background .15s; }
.ph .burger:hover { border-color: var(--bright); }
.ph .burger svg { width: 22px; height: 22px; }
.topbar-user { display: none; }

/* ── Slide-in menu (mobile "More" sheet) / desktop sidebar ────────────── */
.pmenu { position: fixed; inset: 0; z-index: 50; background: var(--sidebar-bg); transform: translateX(100%);
  transition: transform .18s ease-out; overflow-y: auto; padding: 16px 20px; }
.pmenu.open { transform: none; }
.pmenu .close { position: absolute; top: 14px; right: 16px; width: 44px; height: 40px; font-size: 20px; line-height: 1;
  border: 1px solid var(--divider); border-radius: var(--r-btn); background: var(--card); cursor: pointer; color: var(--ink);
  display: flex; align-items: center; justify-content: center; }
.pmenu .side-logo, .pmenu .side-foot { display: none; }
.pmenu ul { list-style: none; margin-top: 80px; }
.pmenu li { border-bottom: 1px solid var(--divider); }
.pmenu li a, .pmenu li button { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: none; border: none; font-family: var(--sans); font-size: 20px; font-weight: 500; color: var(--text);
  padding: 16px 2px; cursor: pointer; text-decoration: none; }
.pmenu li.current a { font-weight: 700; color: var(--bright); }
.pmenu li.soon a { color: var(--disabled); cursor: default; }
.pmenu .nav-ic { display: inline-flex; width: 24px; height: 24px; flex: none; color: var(--muted); }
.pmenu .nav-ic svg { width: 24px; height: 24px; }
.pmenu li.current .nav-ic { color: var(--bright); }

/* ── Bottom navigation (mobile) ───────────────────────────────────────── */
.bottomnav { display: none; }

/* ── Layout ───────────────────────────────────────────────────────────── */
main { max-width: 1100px; margin: 0 auto; padding: 20px 16px 96px; }
.page-title { font-size: 2.25rem; line-height: 1.22; font-weight: 800; color: var(--ink); margin: .2rem 0 .2rem; letter-spacing: -.02em; }
@media (max-width: 680px) { .page-title { font-size: 1.75rem; } }
.page-sub { color: var(--muted); font-size: 15px; margin-bottom: .5rem; }

.stage-banner { position: relative; background: linear-gradient(90deg, var(--hover), rgba(16,36,58,.35));
  color: var(--ink); border: 1px solid var(--divider); border-left: 4px solid var(--bright);
  font-weight: 700; font-size: 16px; padding: 12px 16px; margin: 24px 0 16px; border-radius: var(--r-card); }
.stage-banner .pb-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.stage-banner .pb-row .set-select { width: auto; height: 38px; max-width: 240px; }
.stage-banner .pb-row .msg { min-width: 0; }

.match-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 680px) { .match-grid { grid-template-columns: 1fr; } }

/* ── Match card ───────────────────────────────────────────────────────── */
.mcard { background: var(--card); border: 1px solid rgba(255,255,255,.05); border-radius: var(--r-card);
  padding: 16px 18px; box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s, transform .15s; }
.mcard:hover { border-color: rgba(59,130,246,.35); box-shadow: var(--glow); }
.mc-head { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 13px;
  margin-bottom: 14px; }
.mc-head .num { font-family: var(--mono); }
.live-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--live); color: #fff; font-weight: 700;
  font-size: 11px; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; }
.live-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.mc-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; text-align: center; }
.mc-team { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.mc-flag { width: 62px; height: 42px; object-fit: contain; border-radius: 8px; background: var(--hover);
  box-shadow: 0 0 0 1px var(--divider); }
.mc-flag.ph0 { background: var(--hover); }
.mc-name { font-weight: 600; font-size: 16px; line-height: 1.2; color: var(--ink); }
.mc-name.tbd { color: var(--muted); font-style: italic; font-weight: 400; }
.mc-score { font-family: var(--mono); font-size: 40px; line-height: 1; font-weight: 700; color: var(--ink); }
.mc-pred { font-family: var(--mono); color: var(--cyan); font-size: 17px; min-height: 22px; }

/* Prediction selector (PRD §13): square, blue outline, arrows, mono score */
.psel { width: 74px; display: flex; flex-direction: column; align-items: center; padding: 4px 0;
  border: 1.5px solid var(--bright); border-radius: var(--r-score); background: rgba(59,130,246,.06); }
.psel-arw { width: 100%; height: 34px; display: flex; align-items: center; justify-content: center; border: none;
  background: none; color: var(--muted); cursor: pointer; transition: color .15s; }
.psel-arw:hover { color: var(--bright); }
.psel-arw svg { width: 18px; height: 18px; }
.psel .mc-input { width: 100%; height: 46px; text-align: center; font-family: var(--mono); font-size: 30px; font-weight: 700;
  border: none; background: none; color: var(--ink); }
.psel .mc-input:focus { outline: none; }
.psel .mc-input::-webkit-outer-spin-button, .psel .mc-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.psel .mc-input[type=number] { -moz-appearance: textfield; }
.psel:focus-within { box-shadow: 0 0 0 3px rgba(59,130,246,.25); }

.mc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; min-height: 40px; }
.mc-points { color: var(--muted); font-size: 14px; }
.mc-points.earned { color: var(--success); font-weight: 700; }
.mc-save { font-family: var(--sans); font-size: 14px; font-weight: 700; padding: 10px 22px; border: 1px solid transparent;
  background: var(--grad); color: #fff; border-radius: var(--r-btn); cursor: pointer;
  box-shadow: 0 6px 18px -8px rgba(37,99,235,.8); transition: filter .15s, transform .15s; min-height: 40px; }
.mc-save:hover:not(:disabled) { filter: brightness(1.08); }
.mc-save:active:not(:disabled) { transform: translateY(1px); }
.mc-save:disabled { background: transparent; color: var(--disabled); border-color: var(--divider); cursor: default;
  box-shadow: none; font-weight: 500; }
.mc-pie { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 1px var(--divider); }

.empty { color: var(--muted); padding: 2rem 0; text-align: center; }
.empty a, .page-sub a { color: var(--cyan); text-decoration: none; }
.empty a:hover, .page-sub a:hover { text-decoration: underline; }
.err { color: #FCA5A5; }

/* ── Status badges (PRD: LIVE / Upcoming / Closed / Correct / Incorrect) ── */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .03em;
  padding: 4px 10px; border-radius: 999px; }
.badge.upcoming { background: rgba(59,130,246,.16); color: var(--bright); }
.badge.closed { background: rgba(148,163,184,.14); color: var(--muted); }
.badge.correct { background: rgba(16,185,129,.16); color: var(--success); }
.badge.incorrect { background: rgba(148,163,184,.12); color: var(--muted); }

/* ── Ranking table (medals + blue current-user row) ───────────────────── */
.lb { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card);
  border: 1px solid rgba(255,255,255,.05); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); }
.lb th { text-align: left; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
  padding: 14px; border-bottom: 1px solid var(--divider); font-weight: 700; background: rgba(24,50,78,.35); }
.lb td { padding: 12px 14px; border-bottom: 1px solid var(--divider); font-size: 16px; color: var(--text); }
.lb td.num, .lb th.num { text-align: right; font-family: var(--mono); }
.lb tbody tr:last-child td { border-bottom: none; }
.lb tbody tr:hover td { background: rgba(56,189,248,.05); }
.lb tr.me td { background: rgba(37,99,235,.16); color: var(--ink); font-weight: 600; }
.lb .rk { width: 56px; }
.medal { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  font-family: var(--mono); font-weight: 700; font-size: 14px; color: #07121F; }
.medal.plain { background: none; color: var(--muted); }
.medal.m1 { background: var(--gold); } .medal.m2 { background: var(--silver); } .medal.m3 { background: var(--bronze); color: #fff; }

/* ── Stat cards ───────────────────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.stat { background: var(--card); border: 1px solid rgba(255,255,255,.05); border-radius: var(--r-card);
  padding: 1.2rem; box-shadow: var(--shadow); }
.stat .v { font-family: var(--mono); font-size: 2rem; font-weight: 700; color: var(--bright); }
.stat .k { font-size: 13px; color: var(--muted); margin-top: .4rem; }

/* ── Right panel (desktop) ────────────────────────────────────────────── */
.rpanel { display: none; }
.rp-card { background: var(--card); border: 1px solid rgba(255,255,255,.05); border-radius: var(--r-card);
  box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; }
.rp-card h2 { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.rp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rp-stat { background: var(--bg); border: 1px solid var(--divider); border-radius: var(--r-btn); padding: 12px; }
.rp-stat .v { font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--ink); }
.rp-stat .k { font-size: 12px; color: var(--muted); margin-top: 3px; }
.rp-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--divider); }
.rp-row:last-child { border-bottom: none; }
.rp-row .rp-nm { flex: 1; min-width: 0; font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-row.me .rp-nm { color: var(--bright); font-weight: 600; }
.rp-row .rp-pts { font-family: var(--mono); font-weight: 700; color: var(--ink); font-size: 14px; }

/* ── Dashboard ────────────────────────────────────────────────────────── */
.dash { display: grid; grid-template-columns: 1fr; gap: 16px; }
.dash-main, .dash-side { display: flex; flex-direction: column; gap: 16px; }
.dash-sec-title { font-size: 15px; font-weight: 700; color: var(--ink); margin: 6px 2px -4px; }

.hero { background: linear-gradient(160deg, #12294A, #0C1C30); border: 1px solid rgba(59,130,246,.25);
  border-radius: var(--r-card); box-shadow: var(--shadow); padding: 20px; }
.hero .comp { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--accent); background: rgba(56,189,248,.1); padding: 5px 12px; border-radius: 999px; }
.hero .hero-body { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 12px; margin: 16px 0 6px; }
.hero .hteam { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hero .hteam img, .hero .hteam .ph0 { width: 64px; height: 44px; object-fit: contain; border-radius: 8px; background: var(--hover); box-shadow: 0 0 0 1px var(--divider); }
.hero .hteam .nm { font-weight: 700; color: var(--ink); text-align: center; line-height: 1.2; }
.hero .colon { font-family: var(--mono); font-size: 26px; color: var(--muted); align-self: center; }
.hero .kickoff { color: var(--muted); font-size: 13px; margin-top: 8px; text-align: center; font-variant-numeric: tabular-nums; }
.hero .hero-cta { display: block; width: 100%; margin-top: 16px; font-family: var(--sans); font-weight: 700; font-size: 15px;
  padding: 12px; border: none; border-radius: var(--r-btn); background: var(--grad); color: #fff; cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(37,99,235,.8); transition: filter .15s; }
.hero .hero-cta:hover:not(:disabled) { filter: brightness(1.08); }
.hero .hero-cta:disabled { background: transparent; border: 1px solid var(--divider); color: var(--muted); box-shadow: none; cursor: default; }

.live-row { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid rgba(255,255,255,.05);
  border-radius: var(--r-card); box-shadow: var(--shadow); padding: 12px 14px; }
.live-row img, .live-row .ph0 { width: 30px; height: 22px; object-fit: contain; border-radius: 4px; background: var(--hover); flex: none; }
.live-row .lr-nm { font-size: 14px; color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-row .lr-mid { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; }
.live-row .lr-sc { font-family: var(--mono); font-weight: 700; font-size: 18px; color: var(--ink); }
.live-row .live-badge { margin-left: auto; flex: none; }

.carousel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 10px; -webkit-overflow-scrolling: touch; }
.carousel::-webkit-scrollbar { height: 6px; }
.carousel::-webkit-scrollbar-thumb { background: var(--divider); border-radius: 999px; }
.carousel-item { scroll-snap-align: start; flex: 0 0 auto; width: 150px; background: var(--card); border: 1px solid rgba(255,255,255,.05);
  border-radius: var(--r-card); box-shadow: var(--shadow); padding: 12px; text-align: center; }
.carousel-item .ci-date { font-size: 11px; color: var(--muted); }
.carousel-item .ci-teams { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0; }
.carousel-item .ci-teams img, .carousel-item .ci-teams .ph0 { width: 30px; height: 22px; object-fit: contain; border-radius: 4px; background: var(--hover); }
.carousel-item .ci-vs { font-size: 11px; color: var(--muted); }
.carousel-item .ci-time { font-family: var(--mono); font-size: 12px; color: var(--text); }

/* ── Settings ─────────────────────────────────────────────────────────── */
.set-card { background: var(--card); border: 1px solid rgba(255,255,255,.05); border-radius: var(--r-card);
  box-shadow: var(--shadow); padding: 20px; max-width: 520px; }
.set-lbl { display: block; font-weight: 700; color: var(--ink); font-size: 15px; }
.set-hint { color: var(--muted); font-size: 13px; margin: 4px 0 12px; }
.set-select { width: 100%; height: 44px; border: 1px solid var(--divider); border-radius: var(--r-input);
  padding: 0 12px; font-family: var(--sans); font-size: 15px; background: var(--bg); color: var(--ink); }
.set-select:focus { outline: none; border-color: var(--bright); box-shadow: 0 0 0 3px rgba(59,130,246,.2); }
.set-preview { font-family: var(--mono); color: var(--cyan); font-size: 14px; margin: 12px 0 6px; }
.set-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border: 1px solid var(--divider);
  border-radius: var(--r-btn); background: var(--hover); color: var(--ink); font-family: var(--sans); font-weight: 700; font-size: 14px;
  cursor: pointer; transition: border-color .15s, background .15s; }
.set-btn:hover:not(:disabled) { border-color: var(--bright); }
.set-btn:disabled { opacity: .55; cursor: default; }
.set-h2 { font-size: 1.35rem; font-weight: 800; color: var(--ink); margin: 30px 0 6px; letter-spacing: -.01em; }

/* Per-competition settings (Manage) */
.comp-block { margin-bottom: 14px; }
.comp-block .mc-row { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.comp-settings { background: var(--bg2); border: 1px solid var(--divider); border-top: none;
  border-radius: 0 0 var(--r-btn) var(--r-btn); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.cs-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cs-row > label { font-size: 13px; color: var(--muted); min-width: 160px; }
.cs-in { display: inline-flex; align-items: center; gap: 6px; }
.cs-in i { font-style: normal; font-size: 12px; color: var(--muted); }
.comp-settings input { width: 84px; height: 34px; border: 1px solid var(--divider); border-radius: 8px; padding: 0 8px;
  font-family: var(--mono); font-size: 14px; background: var(--card); color: var(--ink); }
.comp-settings input:focus { outline: none; border-color: var(--bright); }
.cs-msg { min-height: 16px; }

.lb-bar { display: flex; align-items: center; gap: 10px; margin: 8px 0 16px; }
.lb-bar label { font-size: 13px; color: var(--muted); }
.lb-bar .set-select { max-width: 300px; height: 40px; }

/* ── My Predictions (reference-style match grid) ──────────────────────── */
.pred-head { display: flex; align-items: center; gap: 16px; margin: 4px 0 8px; }
.avatar-lg { width: 56px; height: 56px; flex: none; border-radius: 50%; background: var(--grad); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 24px; box-shadow: var(--shadow); }
.pred-head .ph-title { min-width: 0; }
.pred-head .page-title { font-size: 1.7rem; margin: 0; }
.pred-head .page-sub { margin: 2px 0 0; }
.pred-head .page-sub a { color: var(--cyan); text-decoration: none; }

.pred-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 12px; flex-wrap: wrap; }
.pred-bar #pool-sel { width: auto; max-width: 200px; height: 36px; }
.pred-h2 { font-size: 1.35rem; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.seg { display: inline-flex; background: var(--card); border: 1px solid var(--divider); border-radius: 999px; padding: 3px; }
.seg button { border: none; background: none; color: var(--muted); font-family: var(--sans); font-weight: 700; font-size: 13px;
  padding: 7px 16px; border-radius: 999px; cursor: pointer; transition: color .15s, background .15s; }
.seg button.on { background: var(--grad); color: #fff; box-shadow: 0 4px 12px -4px rgba(37,99,235,.7); }

.pc-group { font-size: 14px; font-weight: 700; color: var(--muted); text-transform: none; letter-spacing: .01em;
  margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--divider); }
.pc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.pcard { background: var(--card); border: 1px solid rgba(255,255,255,.05); border-radius: var(--r-card);
  box-shadow: var(--shadow); padding: 14px 16px; }
.pc-main { display: flex; align-items: stretch; gap: 12px; }
.pc-teams { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.pc-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pc-flag { width: 26px; height: 19px; flex: none; object-fit: cover; border-radius: 3px; background: var(--hover); }
.pc-flag.ph0 { display: inline-block; }
.pc-name { flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--ink); font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-actual { flex: none; font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 20px;
  color: var(--ink); min-width: 20px; text-align: center; }
.pc-pbox, .pc-pin { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--divider);
  color: var(--cyan); font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 18px;
  display: flex; align-items: center; justify-content: center; text-align: center; }
.pc-pbox.blank { color: var(--disabled); }
.pc-pin { padding: 0; -moz-appearance: textfield; }
.pc-pin::-webkit-outer-spin-button, .pc-pin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pc-pin:focus { outline: none; border-color: var(--bright); box-shadow: 0 0 0 3px rgba(59,130,246,.22); color: var(--ink); }

.pc-badge { flex: none; width: 74px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border-left: 1px solid var(--divider); padding-left: 12px; }
.pc-emoji { font-size: 22px; line-height: 1; }
.pc-pts { font-family: var(--mono); font-weight: 700; font-size: 12px; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.pc-badge.good .pc-pts { background: rgba(16,185,129,.16); color: var(--success); }
.pc-badge.bad .pc-pts { background: rgba(239,68,68,.16); color: var(--error); }
.pc-signin { color: var(--cyan); font-weight: 700; font-size: 12px; text-decoration: none; text-align: center; }
.pc-dot { font-size: 11px; font-weight: 700; color: var(--muted); text-align: center; }
.pc-dot.saved { color: var(--success); }
.pc-dot.saving { color: var(--cyan); }
.pc-dot.err { color: var(--error); }
.pc-meta { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--divider); color: var(--muted); font-size: 12px; }

@media (max-width: 760px) {
  .pc-grid { grid-template-columns: 1fr; }
}

/* ── Guest / sign-in ──────────────────────────────────────────────────── */
.signin-btn, .signin-cta { display: inline-block; font-family: var(--sans); font-weight: 700; text-decoration: none;
  background: var(--grad); color: #fff; border-radius: var(--r-btn); box-shadow: 0 8px 20px -8px rgba(37,99,235,.8); }
.signin-btn { padding: 8px 18px; font-size: 14px; }
.signin-btn:hover, .signin-cta:hover { filter: brightness(1.08); }
.signin-gate { max-width: 540px; margin: 7vh auto 0; text-align: center; }
.signin-gate .page-sub { margin: 10px 0 22px; }
.signin-gate .page-sub a { color: var(--cyan); text-decoration: none; }
.signin-cta { padding: 12px 30px; font-size: 15px; }

/* ── Manage / admin ───────────────────────────────────────────────────── */
.admin-only, .mod-only { display: none; }
body.is-admin .admin-only { display: block; }
body.can-moderate .mod-only { display: block; }
.mc-row { background: var(--card); border: 1px solid rgba(255,255,255,.05); border-radius: var(--r-btn);
  padding: .9rem 1rem; margin-bottom: .6rem; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mc-row .nm { font-weight: 700; color: var(--ink); }
.mc-row .sub { font-size: 13px; color: var(--muted); }
.btn-sm { font-family: var(--sans); padding: 8px 14px; font-size: 13px; font-weight: 600; border-radius: var(--r-btn);
  cursor: pointer; background: transparent; color: var(--bright); border: 1px solid var(--bright);
  transition: background .15s, color .15s; }
.btn-sm:hover { background: rgba(59,130,246,.12); }
.btn-sm.on { background: var(--grad); color: #fff; border-color: transparent; }
.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: .5rem 0 1rem; }
.set-field { background: var(--card); border: 1px solid rgba(255,255,255,.05); border-radius: var(--r-btn); padding: .8rem; }
.set-field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: .35rem; }
.set-field input { width: 100%; height: 40px; border: 1px solid var(--divider); border-radius: var(--r-input); padding: 0 10px;
  font-family: var(--mono); font-size: 16px; background: var(--bg); color: var(--ink); }
.set-field input:focus { outline: none; border-color: var(--bright); box-shadow: 0 0 0 3px rgba(59,130,246,.2); }
.group-label { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 700;
  margin: 1.4rem 0 .6rem; }
.msg { color: var(--muted); font-size: 14px; }
.hidden { display: none !important; }

/* ── Mobile (<1024px): bottom nav ─────────────────────────────────────── */
@media (max-width: 1023px) {
  .bottomnav { display: flex; position: fixed; z-index: 40; bottom: 0; left: 0; right: 0;
    background: rgba(6,17,30,.92); backdrop-filter: blur(12px); border-top: 1px solid var(--divider);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .bottomnav a, .bottomnav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: none; border: none; cursor: pointer; text-decoration: none; color: var(--muted); font-family: var(--sans);
    font-size: 11px; font-weight: 600; padding: 6px 2px; min-height: 48px; transition: color .15s; }
  .bottomnav a.current { color: var(--bright); }
  .bottomnav svg { width: 24px; height: 24px; }
}

/* ── Desktop (≥1024px): sidebar + optional right panel ────────────────── */
@media (min-width: 1024px) {
  body { padding-left: var(--sidebar); }
  .ph { padding: 14px 28px; }
  .ph .burger, .ph .brand { display: none; }
  .topbar-user { display: flex; align-items: center; gap: 14px; margin-left: auto; }
  .topbar-user .welcome { color: var(--muted); font-size: 15px; }
  .topbar-user .welcome b { color: var(--ink); font-weight: 700; }
  .topbar-user .chip { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 6px;
    background: var(--card); border: 1px solid var(--divider); border-radius: 999px; }
  .topbar-user .avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    background: var(--grad); color: #fff; font-weight: 800; font-size: 15px; }
  .topbar-user .chip .nm { font-size: 14px; color: var(--ink); font-weight: 600; padding-right: 6px; }
  .topbar-user .points { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-weight: 700;
    color: var(--warn); background: var(--card); border: 1px solid var(--divider); border-radius: 999px; padding: 6px 12px; font-size: 14px; }
  .topbar-user .points svg { width: 16px; height: 16px; color: var(--gold); }
  .topbar-user .points.hidden { display: none; }

  .pmenu { transform: none; inset: 0 auto 0 0; width: var(--sidebar); height: 100vh; overflow-y: auto;
    background: var(--sidebar-bg); border-right: 1px solid var(--divider); padding: 24px 16px; display: flex; flex-direction: column; }
  .pmenu .close { display: none; }
  .pmenu .side-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 4px 8px 24px;
    font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
  .pmenu .side-logo .mark { width: 34px; height: 34px; border-radius: 10px; background: var(--grad); flex: none;
    display: grid; place-items: center; box-shadow: 0 6px 16px -8px rgba(37,99,235,.9); }
  .pmenu .side-logo .mark svg { width: 20px; height: 20px; color: #fff; }
  .pmenu .side-logo .txt { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .pmenu ul { margin-top: 0; display: flex; flex-direction: column; gap: 4px; }
  .pmenu li { border-bottom: none; }
  .pmenu li a, .pmenu li button { font-size: 15px; font-weight: 600; color: var(--muted); padding: 12px; border-radius: var(--r-btn);
    transition: background .15s, color .15s; }
  .pmenu li a:hover, .pmenu li button:hover { background: var(--hover); color: var(--ink); }
  .pmenu li.current a { font-size: 15px; color: #fff; background: var(--grad); box-shadow: 0 8px 20px -10px rgba(37,99,235,.9); }
  .pmenu li.current .nav-ic { color: #fff; }
  .pmenu li.soon a { color: var(--disabled); }
  .pmenu li.soon a:hover { background: none; color: var(--disabled); cursor: default; }
  .pmenu li.logout-item { margin-top: auto; padding-top: 8px; }
  .pmenu li.logout-item button { color: #FCA5A5; }
  .pmenu li.logout-item button:hover { background: rgba(239,68,68,.12); color: #FECACA; }
  .pmenu .side-foot { display: block; margin-top: 12px; padding: 14px; border-radius: var(--r-card);
    background: linear-gradient(160deg, var(--hover), rgba(37,99,235,.14)); border: 1px solid var(--divider); }
  .pmenu .side-foot .t { color: var(--ink); font-weight: 700; font-size: 14px; }
  .pmenu .side-foot .d { color: var(--muted); font-size: 12px; margin: 4px 0 10px; }
  .pmenu .side-foot a { display: block; text-align: center; font-size: 13px; font-weight: 700; padding: 9px;
    border-radius: var(--r-btn); background: var(--grad); color: #fff; text-decoration: none; }

  .bottomnav { display: none; }
  main { padding-bottom: 40px; }

  /* Matches page: main + right panel */
  .with-panel { display: grid; grid-template-columns: minmax(0, 1fr) var(--rpanel); gap: 24px;
    max-width: 1500px; margin: 0 auto; align-items: start; }
  .with-panel main { max-width: none; margin: 0; padding: 20px 0 40px 28px; }
  .rpanel { display: block; position: sticky; top: 80px; padding: 20px 28px 40px 0; }

  /* Dashboard: content + 360px side widgets */
  body[data-page="dashboard"] main { max-width: 1440px; }
  .dash { grid-template-columns: minmax(0, 1fr) var(--rpanel); align-items: start; }
  .dash-side { position: sticky; top: 80px; }
}

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

/* ── Auth pages (login/signup/reset — standalone, no chrome) ──────────── */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.auth-card { width: 100%; max-width: 400px; background: var(--card); border: 1px solid rgba(255,255,255,.05);
  border-radius: var(--r-card); box-shadow: var(--shadow); padding: 28px; }
.auth-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; margin-bottom: 6px;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-sub { color: var(--muted); font-size: 13.5px; margin-bottom: 20px; }
.auth-field { margin-bottom: 14px; }
.auth-field label { display: block; font-size: 12px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.auth-field input { width: 100%; height: 44px; border: 1px solid var(--divider); border-radius: var(--r-input);
  padding: 0 12px; font-family: var(--sans); font-size: 15px; background: var(--bg); color: var(--ink); }
.auth-field input:focus { outline: none; border-color: var(--bright); box-shadow: 0 0 0 3px rgba(59,130,246,.2); }
.auth-field .hint { font-size: 12px; color: var(--muted); margin-top: 5px; }
.auth-btn { display: block; width: 100%; height: 46px; margin-top: 20px; border: none; border-radius: var(--r-btn);
  background: var(--grad); color: #fff; font-family: var(--sans); font-weight: 700; font-size: 15px; cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(37,99,235,.8); }
.auth-btn:hover:not(:disabled) { filter: brightness(1.08); }
.auth-btn:disabled { opacity: .55; cursor: default; }
.auth-err { display: none; margin-top: 14px; padding: 10px 14px; border-radius: var(--r-btn); font-size: 13px;
  background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3); color: var(--error); }
.auth-err.show { display: block; }
.auth-ok { margin-top: 14px; padding: 10px 14px; border-radius: var(--r-btn); font-size: 13px;
  background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.3); color: var(--success); }
.auth-links { margin-top: 18px; text-align: center; font-size: 13px; color: var(--muted); }
.auth-links a { color: var(--cyan); text-decoration: none; }
.auth-links a:hover { text-decoration: underline; }
.auth-note { margin-top: 14px; padding: 10px 14px; border-left: 3px solid var(--bright); background: var(--bg2);
  border-radius: 0 var(--r-btn) var(--r-btn) 0; font-size: 13px; color: var(--muted); }

/* ── Advancing pick (drawn knockout predictions) ──────────────────────── */
.adv-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px;
  padding: 8px 10px; background: var(--bg2); border: 1px dashed var(--divider); border-radius: 10px; }
.adv-row.hidden { display: none; }
.adv-lbl { font-size: 12px; font-weight: 700; color: var(--muted); }
.adv-btn { border: 1px solid var(--divider); background: var(--card); color: var(--text); font-family: var(--sans);
  font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; cursor: pointer;
  max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adv-btn.on { background: var(--grad); border-color: transparent; color: #fff; }
.adv-pens { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.adv-pen { width: 34px; height: 28px; border: 1px solid var(--divider); border-radius: 8px; background: var(--bg);
  color: var(--ink); font-family: var(--mono); font-size: 13px; text-align: center; -moz-appearance: textfield; }
.adv-pen::-webkit-outer-spin-button, .adv-pen::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Rules page ───────────────────────────────────────────────────────── */
.rules-name { color: var(--cyan); font-size: 13.5px; margin: 0 0 14px; }
.rule-card { background: var(--card); border: 1px solid rgba(255,255,255,.05); border-radius: var(--r-card);
  box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 12px; }
.rule-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rule-lbl { font-weight: 700; color: var(--ink); font-size: 15px; }
.rule-flat { font-family: var(--mono); font-weight: 700; color: var(--cyan); font-size: 16px; }
.rule-d { color: var(--muted); font-size: 13.5px; margin: 6px 0 0; }
.rule-table { margin-top: 10px; overflow-x: auto; }
.rule-table table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.rule-table th { text-align: center; color: var(--muted); font-weight: 600; padding: 4px 8px;
  border-bottom: 1px solid var(--divider); white-space: nowrap; }
.rule-table td { text-align: center; color: var(--ink); font-weight: 700; padding: 6px 8px; }
.rules-link { font-size: 12.5px; color: var(--cyan); text-decoration: none; margin-left: 10px; white-space: nowrap; }
.rules-link:hover { text-decoration: underline; }

/* ── Ruleset editor (admin) ───────────────────────────────────────────── */
.rs-block { margin-bottom: 14px; }
.rs-table { border-collapse: collapse; width: 100%; font-size: 13px; margin-bottom: 10px; }
.rs-table th { text-align: left; color: var(--muted); font-weight: 600; padding: 4px 8px; border-bottom: 1px solid var(--divider); }
.rs-table td { padding: 4px 8px; color: var(--text); }
.rs-table .rs-pts { width: 70px; height: 30px; border: 1px solid var(--divider); border-radius: 8px; padding: 0 8px;
  font-family: var(--mono); font-size: 13px; background: var(--card); color: var(--ink); }
.rule-tog { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text);
  margin: 4px 12px 4px 0; text-transform: capitalize; }
.cs-ruleset { max-width: 280px; height: 34px !important; }

/* ── Settings tabs + profile ──────────────────────────────────────────── */
.set-tabbar { display: flex; gap: 6px; margin: 14px 0 20px; border-bottom: 1px solid var(--divider); flex-wrap: wrap; }
.set-tabbar button { border: none; background: none; color: var(--muted); font-family: var(--sans); font-weight: 700;
  font-size: 14px; padding: 10px 16px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.set-tabbar button.on { color: var(--ink); border-bottom-color: var(--bright); }
.set-tabbar button.hidden { display: none; }
#tab-profile .set-card { margin-bottom: 14px; }
.pf-avatar-row { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.pf-avatar-row .avatar-lg { overflow: hidden; }
.pf-avatar-row .avatar-lg img { width: 100%; height: 100%; object-fit: cover; }
.pf-avatar-btns { display: flex; gap: 8px; }
.pf-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.pf-row > label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase;
  letter-spacing: .05em; min-width: 110px; }
.pf-row .set-select { flex: 1 1 200px; max-width: 320px; }
.pf-static { color: var(--ink); font-weight: 600; }
.pf-badge { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  background: var(--hover); color: var(--muted); white-space: nowrap; }
.pf-badge.ok { background: rgba(16,185,129,.16); color: var(--success); }
.pf-badge.warn { background: rgba(245,158,11,.16); color: var(--warn); }
.set-btn.danger { border-color: rgba(239,68,68,.4); color: var(--error); }
.pool-code { font-family: var(--mono); letter-spacing: .12em; background: var(--bg2); border: 1px dashed var(--divider);
  border-radius: 8px; padding: 4px 10px; }

/* ── Groups + Teams pages ─────────────────────────────────────────────── */
.group-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 860px) { .group-grid { grid-template-columns: 1fr; } }
.group-card { background: var(--card); border: 1px solid rgba(255,255,255,.05); border-radius: var(--r-card);
  box-shadow: var(--shadow); padding: 14px 16px; }
.group-card h3 { font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 10px; }
/* Fixed layout so every group card's columns line up identically — auto layout
   sized columns per table (by team-name length) and the grids looked ragged. */
.st { border-collapse: collapse; width: 100%; font-size: 12.5px; table-layout: fixed; }
.st th { text-align: center; color: var(--muted); font-weight: 600; padding: 4px 4px; border-bottom: 1px solid var(--divider); }
.st th:first-child { width: 24px; }
.st th:nth-child(2) { text-align: left; width: auto; }
.st th:nth-child(n+3) { width: 9%; }
.st td { padding: 6px 4px; text-align: center; color: var(--text); }
.st td.rk { color: var(--muted); }
.st td.tm { text-align: left; display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.st td.pts { font-weight: 700; color: var(--cyan); }
.st-flag { width: 22px; height: 16px; flex: none; object-fit: cover; border-radius: 2px; background: var(--hover); }
.st-flag.ph0 { display: inline-block; }
.team-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.team-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--bg2); border: 1px solid var(--divider);
  border-radius: 999px; padding: 6px 14px 6px 8px; font-size: 13px; font-weight: 600; color: var(--ink); }

/* ── Venues page ──────────────────────────────────────────────────────── */
.vc-country { font-size: 16px; font-weight: 800; color: var(--ink); margin: 22px 0 10px; }
.vc-country .vc-count { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-left: 8px; }
.venue-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .venue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .venue-grid { grid-template-columns: 1fr; } }
.venue-card { background: var(--card); border: 1px solid rgba(255,255,255,.05); border-radius: var(--r-card);
  box-shadow: var(--shadow); padding: 14px 16px; }
.vc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vc-name { font-weight: 700; color: var(--ink); font-size: 15px; }
.vc-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: rgba(59,130,246,.16); color: var(--cyan); white-space: nowrap; }
.vc-fifa { color: var(--muted); font-size: 12px; margin-top: 2px; }
.vc-meta { color: var(--text); font-size: 13px; margin-top: 8px; }

/* ── Knockout standings ───────────────────────────────────────────────── */
.kn-round { margin-bottom: 22px; }
.kn-round h3 { font-size: 14px; font-weight: 700; color: var(--muted); margin: 0 0 8px;
  padding-bottom: 6px; border-bottom: 1px solid var(--divider); }
.kn-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid rgba(255,255,255,.05); border-radius: var(--r-card);
  box-shadow: var(--shadow); padding: 10px 16px; margin-bottom: 8px; }
.kn-team { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--text); font-size: 14px; }
.kn-row .kn-team:last-child { flex-direction: row-reverse; text-align: right; }
.kn-team.win { color: var(--ink); font-weight: 700; }
.kn-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kn-mid { display: flex; flex-direction: column; align-items: center; }
.kn-score { font-family: var(--mono); font-weight: 700; font-size: 18px; color: var(--ink); white-space: nowrap; }
.kn-pens { display: block; text-align: center; font-size: 11px; color: var(--muted); white-space: nowrap; }
.kn-when { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ── Venue photos + match popup ───────────────────────────────────────── */
.venue-card { padding: 0; overflow: hidden; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.venue-card:hover, .venue-card:focus-visible { border-color: rgba(59,130,246,.35); box-shadow: var(--glow); outline: none; }
.vc-photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--hover); }
.vc-body { padding: 12px 16px 14px; }
.vc-credit { color: var(--disabled); font-size: 11.5px; margin-top: 16px; }
.vmodal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; }
.vmodal.hidden { display: none; }
.vmodal-overlay { position: absolute; inset: 0; background: rgba(3,9,17,.72); backdrop-filter: blur(3px); }
.vmodal-card { position: relative; width: 100%; max-width: 560px; max-height: 86vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--divider); border-radius: var(--r-card); box-shadow: var(--shadow); }
.vmodal-photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--hover); }
.vmodal-card h2 { font-size: 19px; font-weight: 800; color: var(--ink); margin: 14px 18px 2px; }
.vmodal-card .vc-fifa { margin: 0 18px 12px; }
.vmodal-close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: none; border-radius: 50%;
  background: rgba(3,9,17,.65); color: #fff; font-size: 16px; cursor: pointer; z-index: 2; }
#vm-matches { padding: 0 18px 18px; }
.vm-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--divider); font-size: 13px; }
.vm-row:last-child { border-bottom: none; }
.vm-date { color: var(--muted); font-size: 12px; flex: none; width: 92px; }
.vm-teams { flex: 1 1 auto; color: var(--ink); min-width: 0; }
.vm-teams b { color: var(--cyan); }
.vm-stage { color: var(--muted); font-size: 11.5px; flex: none; }
.vm-when { color: var(--muted); font-size: 12px; }
.kn-pens-inline { color: var(--muted); font-size: 11px; }

/* ── Breakdown modal (match popup: pool picks + points pies) ─────────────── */
.pcard { cursor: pointer; }
.bd-chip { margin-left: 8px; color: var(--cyan); }
.bmodal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; }
.bmodal.hidden { display: none; }
.bmodal-overlay { position: absolute; inset: 0; background: rgba(3,9,17,.72); backdrop-filter: blur(3px); }
.bmodal-card { position: relative; width: 100%; max-width: 520px; max-height: 86vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--divider); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 18px; }
.bmodal-close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: none; border-radius: 50%;
  background: rgba(3,9,17,.65); color: #fff; font-size: 16px; cursor: pointer; z-index: 2; }
.bd-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; padding-right: 36px; }
.bd-mid { flex: 1 1 auto; text-align: center; min-width: 0; }
.bd-teams { font-weight: 700; color: var(--ink); font-size: 15px; }
.bd-score { font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--ink); }
.bd-meta { color: var(--muted); font-size: 12px; }
.bd-h { font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 16px 0 8px; }
.bd-pie { display: flex; align-items: center; gap: 18px; }
.bd-pie svg { flex: none; }
.bd-legend { list-style: none; font-size: 13px; }
.bd-legend li { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.bd-sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.bd-ct { color: var(--muted); }
.bd-members { list-style: none; }
.bd-members li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--divider); font-size: 14px; }
.bd-members li:last-child { border-bottom: none; }
.bd-nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-pts { color: var(--cyan); flex: none; }
.bd-pens { color: var(--muted); font-size: 12px; flex: none; }
.bd-note { color: var(--muted); font-size: 14px; margin: 8px 0; }
.bd-mine { font-size: 14px; margin: 8px 0; }

/* ── Competition nav sections (accordion) ────────────────────────────────── */
.pm-sec-hd { display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: none; cursor: pointer; font-family: var(--sans);
  font-size: 20px; font-weight: 700; color: var(--ink); padding: 16px 2px; text-align: left; }
.pm-chev { color: var(--muted); transition: transform .15s; font-size: 14px; }
.pm-sec.open .pm-chev { transform: rotate(90deg); }
/* .pmenu .pm-sec-items (two classes) must outrank the desktop sidebar's
   `.pmenu ul { display:flex }` — plain .pm-sec-items loses that fight and
   the accordion can never visually close on desktop. */
.pmenu .pm-sec-items { list-style: none; display: none; }
.pmenu .pm-sec.open .pm-sec-items { display: block; }
.pm-sec-items li { border-bottom: none; }
.pm-sec-items li a { font-size: 17px; padding: 10px 2px 10px 14px; }
/* Former country names shown in brackets on information pages (Türkiye (Turkey)) */
.tc-former { color: var(--muted); font-weight: 400; font-size: .85em; }
.tp-h1-former { font-size: .5em; }

/* Legal popup (EULA / guidelines in an iframe with print) */
.legal-card { max-width: 760px; padding: 0; overflow: hidden; }
.legal-frame { width: 100%; height: min(70vh, 640px); border: none; display: block; background: #0A1830; }
.legal-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-top: 1px solid var(--divider); }
.legal-actions a { color: var(--muted); font-size: 13px; text-decoration: none; }
.legal-actions a:hover { color: var(--bright); }

.uc-forced { border-color: var(--warn) !important; box-shadow: 0 0 0 1px var(--warn); }
.uc-banner a { color: var(--cyan); }
.pmenu .pm-legal { border-bottom: none; }
.pmenu .pm-legal a { display: inline-flex; width: auto; font-size: 13px; color: var(--muted); padding: 12px 16px 12px 2px; }
.pmenu .pm-legal a:hover { color: var(--bright); }

/* ── Team explorer: cross-links + team detail page ───────────────────────── */
a.team-chip { text-decoration: none; color: var(--text); transition: border-color .15s, color .15s; }
a.team-chip:hover { border-color: var(--bright); color: var(--ink); }
.st td.tm a { color: inherit; text-decoration: none; }
.st td.tm a:hover { color: var(--bright); }
a.kn-nm { color: inherit; text-decoration: none; }
a.kn-nm:hover { color: var(--bright); }
.vm-teams a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--divider); }
.vm-teams a:hover { color: var(--bright); }
.group-card h3 a { color: inherit; text-decoration: none; }
.group-card h3 a:hover { color: var(--bright); }
.tp-head { display: flex; align-items: center; gap: 18px; margin: 6px 0 10px; }
.tp-crest { width: 84px; height: 64px; object-fit: contain; border-radius: 10px; background: var(--hover);
  box-shadow: 0 0 0 1px var(--divider); flex: none; }
.tp-head .page-title { margin: 0; }
.tp-coach { padding: 12px 16px; margin-bottom: 4px; }
.tp-muted { color: var(--muted); font-size: 13px; }
.tp-squad { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 16px; }
.tp-player { display: flex; flex-direction: column; padding: 6px 0; border-bottom: 1px solid var(--divider); }
.tp-nm { color: var(--ink); font-size: 14px; }
.tp-matches { padding: 6px 16px; }
.tp-row { text-decoration: none; color: inherit; }
.tp-row:hover .vm-date { color: var(--bright); }
.tp-opp { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; min-width: 0; }
.tp-opp:hover { color: var(--bright); }
.tp-venue { background: none; border: none; color: var(--cyan); cursor: pointer; font-family: var(--sans);
  font-size: 11.5px; padding: 0 0 0 6px; }
.tp-venue:hover { text-decoration: underline; }
#team .bd-h { margin-top: 22px; }