:root {
  --bg: #f3f5f8;
  --card: #ffffff;
  --card2: #f1f4f8;
  --line: #e3e8ef;
  --text: #0f172a;
  --muted: #64748b;
  --green: #16a34a;
  --green-bg: #e8f7ee;
  --amber: #d97706;
  --amber-bg: #fdf3e2;
  --red: #dc2626;
  --red-bg: #fdecec;
  --blue: #2563eb;
  --blue-bg: #e8effd;
  --purple: #7c3aed;
  --purple-bg: #f1eafd;
  --radius: 14px;
  --tabh: 62px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
  --body2: #334155;
  --track: #e2e8f0;
  --dotline: #cbd5e1;
  --on-accent: #fff;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0b1220;
  --card: #141c2e;
  --card2: #1c2740;
  --line: #263554;
  --text: #e6ebf5;
  --muted: #8b98b5;
  --green: #22c55e;
  --green-bg: rgba(34,197,94,.16);
  --amber: #f5a623;
  --amber-bg: rgba(245,166,35,.16);
  --red: #f26d6d;
  --red-bg: rgba(242,109,109,.16);
  --blue: #6ea8fe;
  --blue-bg: rgba(110,168,254,.16);
  --purple: #b596ff;
  --purple-bg: rgba(181,150,255,.16);
  --shadow: none;
  --body2: #c3cce0;
  --track: #263554;
  --dotline: #3b4a6b;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; }
a { color: var(--blue); }
.hidden { display: none !important; }

.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: var(--card); border-bottom: 1px solid var(--line); }
.brand { font-weight: 800; letter-spacing: -.2px; display: flex; align-items: center; gap: 8px; }
.kin-mark { display: inline-flex; align-items: center; justify-content: center; gap: 3px; width: 30px; height: 30px; border-radius: 8px; background: var(--green); }
.kin-mark i { display: block; width: 4px; border-radius: 2px; background: #fff; }
.kin-mark i:nth-child(1) { height: 12px; } .kin-mark i:nth-child(2) { height: 17px; } .kin-mark i:nth-child(3) { height: 14px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-sub { font-size: 10px; font-weight: 600; color: var(--muted); letter-spacing: .2px; }
.chip { background: var(--card2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; }
.top-right { display: flex; gap: 6px; align-items: center; }
.chip.icon { padding: 4px 9px; font-size: 16px; line-height: 1; }
.chip.icon.spin { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.view { padding: 14px 14px calc(var(--tabh) + 24px + env(safe-area-inset-bottom)); max-width: 720px; margin: 0 auto; }
.tabs { position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--tabh) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: flex; background: var(--card); border-top: 1px solid var(--line); z-index: 5; }
.tabs button { flex: 1; background: none; border: 0; color: var(--muted); font-size: 11px; font-weight: 600; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.tabs button .ico { font-size: 20px; }
.tabs button.active { color: var(--green); }

h1 { font-size: 22px; margin: 4px 0 2px; letter-spacing: -.3px; }
h2 { font-size: 12px; margin: 18px 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; font-weight: 700; }
.sub { color: var(--muted); font-size: 13px; margin-bottom: 12px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-bottom: 12px; box-shadow: var(--shadow); }
.card.tight { padding: 10px 12px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.big { font-size: 28px; font-weight: 800; letter-spacing: -.5px; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--card2); color: var(--muted); border: 1px solid var(--line); vertical-align: middle; }
.pill.green { background: var(--green-bg); color: var(--green); border-color: transparent; }
.pill.amber { background: var(--amber-bg); color: var(--amber); border-color: transparent; }
.pill.red { background: var(--red-bg); color: var(--red); border-color: transparent; }
.pill.blue { background: var(--blue-bg); color: var(--blue); border-color: transparent; }
.pill.purple { background: var(--purple-bg); color: var(--purple); border-color: transparent; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); margin-right: 6px; animation: pulse 1.4s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.btn { width: 100%; background: var(--green); color: #fff; border: 0; border-radius: 12px; padding: 14px; font-weight: 800; font-size: 16px; }
.btn:disabled { opacity: .4; }
.btn.secondary { background: var(--card2); color: var(--text); border: 1px solid var(--line); }
.err { color: var(--red); font-size: 13px; margin-top: 8px; }
.link { background: none; border: 0; color: var(--blue); font-weight: 700; padding: 0; font-size: 13px; }

/* W/D/L form dots */
.form5 { display: inline-flex; gap: 3px; vertical-align: middle; }
.form5 i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--dotline); background: var(--card); }
.form5 i.W { background: var(--green); border-color: var(--green); }
.form5 i.L { background: var(--red); border-color: var(--red); }
.form5 i.D { background: var(--card); border-color: #94a3b8; }

/* Manager cards on live view */
.mgr { cursor: pointer; }
.mgr .head { display: flex; align-items: center; justify-content: space-between; }
.mgr .name { font-weight: 800; font-size: 17px; }
.mgr .score { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -1px; }
.mgr .lines { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 6px; }
.line { display: grid; grid-template-columns: 38px 1fr auto auto; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.line:last-child { border-bottom: 0; }
.line .slot { font-size: 11px; font-weight: 800; color: var(--muted); }
.line .who { min-width: 0; }
.line .who .nm { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.line .who .meta { font-size: 11px; color: var(--muted); }
.line .pts { font-weight: 800; font-size: 16px; min-width: 32px; text-align: right; }
.line .pts.neg { color: var(--red); }
.line .pts.zero { color: var(--muted); }
.line .flags { display: flex; gap: 3px; }
.tap { text-decoration: underline; text-decoration-color: var(--dotline); text-underline-offset: 3px; cursor: pointer; }
.flag { font-size: 11px; padding: 1px 5px; border-radius: 6px; background: var(--card2); border: 1px solid var(--line); color: var(--muted); }
.flag.loyalty { color: var(--purple); background: var(--purple-bg); border-color: transparent; }
.flag.unique { color: var(--blue); background: var(--blue-bg); border-color: transparent; }
.flag.wildcard { color: var(--amber); background: var(--amber-bg); border-color: transparent; }
.flag.shield { color: var(--green); background: var(--green-bg); border-color: transparent; }
.bonus { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 4px 0; color: var(--muted); }
.bonus .delta { font-weight: 800; color: var(--green); }
.bonus .delta.zero { color: var(--muted); }

/* Fixtures */
.fixture { padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.fixture:last-child { border-bottom: 0; }
.fixture .fx { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; font-size: 15px; }
.fixture .side { display: flex; flex-direction: column; gap: 3px; font-weight: 700; }
.fixture .side.h { align-items: flex-end; text-align: right; }
.fixture .sc { font-weight: 800; background: var(--card2); border-radius: 8px; padding: 3px 10px; min-width: 66px; text-align: center; font-variant-numeric: tabular-nums; }
.fixture .sc.live { background: var(--green-bg); color: var(--green); }
.fixture .sc.ko { color: var(--muted); font-weight: 600; font-size: 12px; background: none; }
.fixture .min { text-align: center; font-size: 11px; color: var(--green); font-weight: 700; margin-top: 2px; }
.fixture .min.ft { color: var(--muted); }
.fixture .detail { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 13px; }
.fixture .detail .col.h { text-align: right; }
.fixture .detail .ev { color: var(--text); }
.fixture .detail .ev.assist, .fixture .detail .ev.bonus { color: var(--muted); font-size: 12px; }
.fixture .detail .ev.red, .fixture .detail .ev.og, .fixture .detail .ev.penmiss { color: var(--red); }
.fixture .detail .none { color: var(--muted); font-size: 12px; grid-column: 1 / -1; text-align: center; }

/* Squad builder */
.budget { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; line-height: 1.35; }
.bar { height: 8px; background: var(--track); border-radius: 999px; overflow: hidden; margin-bottom: 12px; }
.bar > i { display: block; height: 100%; background: var(--green); transition: width .2s; }
.bar > i.over { background: var(--red); }
.slotrow { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 9px 10px; margin-bottom: 8px; cursor: pointer; box-shadow: var(--shadow); }
.slotrow .slot { font-weight: 800; font-size: 12px; color: var(--muted); }
.slotrow.util .slot { color: var(--amber); }
.slotrow .empty { color: var(--muted); }
.slotrow .nm { font-weight: 700; }
.slotrow .meta { font-size: 12px; color: var(--muted); }
.slotrow .price { font-weight: 800; font-variant-numeric: tabular-nums; }
.slotrow .price.free { color: var(--amber); }
.slotrow .x { background: none; border: 0; color: var(--muted); font-size: 18px; padding: 4px 6px; }
.wc-toggle { margin-top: 6px; font-size: 12px; }
.wc-toggle label { display: flex; align-items: center; gap: 6px; color: var(--amber); font-weight: 700; }

/* Sheets (picker, login, player) */
.sheet { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 20; display: flex; align-items: flex-end; }
.sheet-inner { background: var(--bg); border-radius: 18px 18px 0 0; width: 100%; max-height: 92vh; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); max-width: 720px; margin: 0 auto; }
.sheet-head { padding: 12px 14px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; background: var(--card); border-radius: 18px 18px 0 0; }
.sheet-head .row input { flex: 1; }
.sheet-body { overflow: auto; padding: 6px 14px 14px; }
input[type=search], input[type=text], input[type=password], select { background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 15px; width: 100%; }
.filters { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filters button { background: var(--card2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.filters button.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.filters button .ko { font-weight: 500; opacity: .7; }
.prow { display: grid; grid-template-columns: 38px 1fr auto auto; gap: 10px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.prow .nm { font-weight: 700; }
.prow .meta { font-size: 12px; color: var(--muted); }
.prow .stat { text-align: right; font-size: 12px; color: var(--muted); }
.prow .stat b { display: block; color: var(--text); font-size: 14px; }
.prow .price { font-weight: 800; font-size: 16px; min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
.prow.unaffordable { opacity: .4; }
.prow .warn { color: var(--amber); }

/* Player sheet */
.pstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; }
.pstat { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px; text-align: center; }
.pstat b { display: block; font-size: 18px; letter-spacing: -.3px; }
.pstat span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.hist { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.hist th { text-align: left; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; padding: 8px 8px 4px; font-weight: 700; }
.hist td { padding: 7px 8px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.hist td.pts { font-weight: 800; text-align: right; }
.hist td.pts.neg { color: var(--red); }
.wdl { display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 50%; font-size: 10px; font-weight: 800; color: #fff; }
.wdl.W { background: var(--green); } .wdl.L { background: var(--red); } .wdl.D { background: #94a3b8; }
.bars { display: flex; gap: 4px; align-items: flex-end; height: 64px; margin: 18px 0 4px; }
.bars div { flex: 1; background: var(--green); border-radius: 4px 4px 0 0; min-height: 3px; position: relative; }
.bars div.neg { background: var(--red); }
.bars div span { position: absolute; top: -16px; left: 0; right: 0; text-align: center; font-size: 10px; font-weight: 700; color: var(--muted); }
.bars-x { display: flex; gap: 4px; font-size: 10px; color: var(--muted); }
.bars-x span { flex: 1; text-align: center; }

/* Table */
.rank { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; }
.rank .pos { font-size: 22px; font-weight: 900; color: var(--muted); }
.rank.first .pos { color: var(--amber); }
.rank .name { font-weight: 800; font-size: 17px; }
.rank .stats { font-size: 12px; color: var(--muted); }
.rank .total { font-size: 30px; font-weight: 900; text-align: right; line-height: 1; letter-spacing: -1px; }
.rank .livept { font-size: 12px; color: var(--green); text-align: right; font-weight: 700; }
.mini { width: 100%; border-collapse: collapse; font-size: 14px; }
.mini td { padding: 6px 0; border-bottom: 1px solid var(--line); }
.mini td:last-child { text-align: right; font-weight: 800; }
.mini tr:last-child td { border-bottom: 0; }
.tokens { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* Login */
.names { display: grid; gap: 8px; margin: 10px 0; }
.names button { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; font-weight: 700; font-size: 16px; text-align: left; }
.names button.on { border-color: var(--green); background: var(--green-bg); }

.toast { position: fixed; left: 50%; bottom: calc(var(--tabh) + 16px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 12px; z-index: 30; font-weight: 600; max-width: 90vw; }
.countdown { font-variant-numeric: tabular-nums; font-weight: 800; }
.center { text-align: center; }
details summary { cursor: pointer; font-weight: 700; }

/* Rules cards */
.hero { background: linear-gradient(135deg, #14532d 0%, #166534 60%, #15803d 100%); color: #fff; border-radius: 18px; padding: 22px 18px; margin-bottom: 14px; }
.hero-kicker { color: #bbf7d0; font-weight: 800; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; }
.hero h1 { font-size: 34px; margin: 4px 0 6px; letter-spacing: -1px; }
.hero .sub { margin-bottom: 0; color: #dcfce7; }
.rulegrid { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .rulegrid { grid-template-columns: 1fr 1fr; } }
.rulecard { position: relative; overflow: hidden; border-radius: 16px; padding: 16px 16px 16px 20px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); }
.rulecard::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--accent, var(--muted)); }
.rulecard-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.rulecard-ico { font-size: 30px; line-height: 1; }
.rulecard-tag { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--accent, var(--muted)); }
.rulecard-title { font-size: 19px; font-weight: 900; letter-spacing: -.3px; margin-bottom: 4px; }
.rulecard-body { font-size: 14px; color: var(--body2); }
.rulecard.core { --accent: #94a3b8; }
.rulecard.wildcard { --accent: var(--amber); background: linear-gradient(160deg, var(--amber-bg), var(--card) 55%); }
.rulecard.shield { --accent: var(--green); background: linear-gradient(160deg, var(--green-bg), var(--card) 55%); }
.rulecard.herd { --accent: var(--blue); background: linear-gradient(160deg, var(--blue-bg), var(--card) 55%); }
.rulecard.loyalty { --accent: var(--purple); background: linear-gradient(160deg, var(--purple-bg), var(--card) 55%); }
.rulecard.boot { --accent: #ca8a04; }
.rulecard.fine { --accent: var(--red); background: linear-gradient(160deg, var(--red-bg), var(--card) 55%); }
.rulecard.mom { --accent: #0d9488; }
.scoring { width: 100%; border-collapse: collapse; font-size: 14px; }
.scoring td { padding: 7px 0; border-bottom: 1px solid var(--line); }
.scoring td:last-child { text-align: right; font-weight: 800; white-space: nowrap; }
.scoring td.neg:last-child { color: var(--red); }
.scoring tr:last-child td { border-bottom: 0; }

/* Settings */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg button { background: var(--card); border: 0; padding: 6px 12px; font-size: 13px; font-weight: 700; color: var(--muted); }
.seg button.on { background: var(--text); color: var(--bg); }
.toggle { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.toggle:last-child { border-bottom: 0; }
.toggle .d { font-size: 12px; color: var(--muted); }
.toggle input { width: 20px; height: 20px; accent-color: var(--green); }
.nudge { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--green-bg); border: 1px solid transparent; border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; font-size: 13px; }
.nudge b { color: var(--green); }

/* Splash on cold open: three bars become the goal lines and halfway line of a pitch */
.splash { position: fixed; inset: 0; z-index: 50; background-color: #030d07; isolation: isolate; overflow: hidden;
  /* the pitch in the dark: the mown bands only just visible */
  background-image: repeating-linear-gradient(180deg, #051509 0 8.3333%, #071b0c 8.3333% 16.6667%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; transition: opacity .35s ease, transform .35s ease; }
.splash.v1 { background: #16a34a; }
.splash.out { opacity: 0; transform: translateY(-6%) scale(1.02); pointer-events: none; }
.pitch { overflow: visible; }
.pitch .bars rect { fill: #fff; transform-box: fill-box; transform-origin: center; animation: rise .5s cubic-bezier(.2,.9,.3,1.2) both, toline .6s cubic-bezier(.6,0,.2,1) .75s both; }
.pitch .b1 { animation-delay: .05s, .75s; --tx: -100px; --sy: 3.33; }
.pitch .b2 { animation-delay: .18s, .75s; --tx: 0px; --sy: 2.22; }
.pitch .b3 { animation-delay: .31s, .75s; --tx: 100px; --sy: 2.76; }
@keyframes rise { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@keyframes toline { to { transform: translateX(var(--tx)) scale(.17, var(--sy)); } }
.pitch .lines * { stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw .6s ease-out both; }
.pitch .tl, .pitch .bl { animation-delay: 1.2s; }
.pitch .cc { stroke-dasharray: 170; stroke-dashoffset: 170; animation-delay: 1.5s; animation-duration: .5s; }
.pitch .lb, .pitch .rb, .pitch .lg, .pitch .rg { animation-delay: 1.6s; animation-duration: .45s; }
.pitch .cs { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0; animation: fadeup .3s ease 1.9s both; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.splash-word { color: #fff; font-size: 40px; font-weight: 900; letter-spacing: -1.5px; animation: fadeup .45s ease 1.3s both; }
.splash-sub { color: rgba(255,255,255,.85); font-size: 12px; font-weight: 600; letter-spacing: .4px; animation: fadeup .45s ease 1.45s both; }
.splash-ver { position: absolute; bottom: calc(24px + env(safe-area-inset-bottom)); color: rgba(255,255,255,.7); font-size: 12px; font-weight: 700; letter-spacing: .5px; animation: fadeup .45s ease 1.6s both; }
@keyframes fadeup { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pitch .bars rect, .pitch .lines *, .splash-word, .splash-sub, .splash-ver { animation: none; } .pitch .bars rect { transform: translateX(var(--tx)) scale(.17, var(--sy)); } .pitch .lines * { stroke-dashoffset: 0; } .pitch .cs { opacity: 1; } .splash { transition: opacity .2s; } }

/* ---------- match centre ---------- */
.mc-score { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.mc-team { font-weight: 800; font-size: 15px; line-height: 1.2; }
.mc-team.h { text-align: right; }
.mc-sc { font-weight: 900; font-size: 22px; background: var(--card2); border-radius: 10px; padding: 4px 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mc-sc.live { background: var(--green-bg); color: var(--green); }
.mc-stats .mc-stat { display: grid; grid-template-columns: 44px 1fr 44px; gap: 8px; align-items: center; padding: 5px 0; }
.mc-stat .v { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 14px; }
.mc-stat .v.r { text-align: right; }
.mc-stat .lbl { text-align: center; font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.mc-stat .bar { height: 6px; border-radius: 3px; background: var(--card2); overflow: hidden; margin-top: 3px; }
.mc-stat .bar i { display: block; height: 100%; background: var(--green); border-radius: 3px; transition: width .4s; }
.mc-tl .mc-ev { display: grid; grid-template-columns: 36px 22px 1fr; gap: 6px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.mc-tl .mc-ev:last-child { border-bottom: 0; }
.mc-tl .mc-ev.a { grid-template-columns: 1fr 22px 36px; }
.mc-tl .mc-ev.a .min { order: 3; text-align: right; }
.mc-tl .mc-ev.a .ico { order: 2; }
.mc-tl .mc-ev.a .txt { order: 1; text-align: right; }
.mc-tl .min { font-size: 12px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.mc-tl .ico { text-align: center; font-size: 13px; }
.mc-tl .goal .txt, .mc-tl .og .txt { font-weight: 800; }
.mc-tl .yellow .txt, .mc-tl .sub .txt { font-size: 13px; }
.mc-tl .red .txt, .mc-tl .penmiss .txt { color: var(--red); font-weight: 700; }
.mc-lus { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 13px; }
.mc-lu .p { padding: 3px 0; display: flex; gap: 6px; align-items: baseline; }
.mc-lu .p .n { display: inline-block; min-width: 18px; font-size: 11px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.mc-lu .p.off { color: var(--muted); }
.mc-lu .p.bench { color: var(--muted); font-size: 12px; }
.mc-lu .p.bench.on { color: var(--text); }
.sheet-body .detail { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 13px; }
.sheet-body .detail .col.h { text-align: right; }
.sheet-body .detail .ev.assist { color: var(--muted); font-size: 12px; }
.sheet-body .detail .ev.red, .sheet-body .detail .ev.og, .sheet-body .detail .ev.penmiss { color: var(--red); }
.sheet-body .detail .none, .sheet-body .none { color: var(--muted); font-size: 12px; grid-column: 1 / -1; text-align: center; padding: 6px 0; }

/* ---------- head-to-head grid ---------- */
.live-seg { margin-bottom: 10px; }
.cmp { padding: 6px 8px; overflow: hidden; }
.cmp-row { display: grid; grid-template-columns: 34px repeat(var(--n, 3), 1fr); gap: 4px; align-items: stretch; border-bottom: 1px solid var(--line); }
.cmp-row:last-child { border-bottom: 0; }
.cmp-row.head { border-bottom: 2px solid var(--line); }
.cmp-slot { font-size: 10px; font-weight: 800; color: var(--muted); display: flex; align-items: center; }
.cmp-cell { padding: 7px 4px; text-align: center; border-radius: 8px; margin: 3px 0; min-width: 0; position: relative; }
.cmp-cell .n { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-cell .m { font-size: 10.5px; line-height: 1.3; min-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-cell .m i.u { font-style: normal; font-weight: 800; color: var(--green); margin-left: 2px; }
.cmp-cell .p { font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 2px; }
.cmp-cell .p.neg { color: var(--red); }
.cmp-cell .p.zero { color: var(--muted); }
.cmp-cell .p.pos { color: var(--green); }
.cmp-cell.wait { opacity: .55; }
.cmp-cell.best { background: var(--green-bg); }
.cmp-cell.best .p { color: var(--green); }
.cmp-cell.empty { color: var(--muted); display: flex; align-items: center; justify-content: center; }
.cmp-cell.bon .p { font-size: 15px; }
.cmp-cell.bon .m { white-space: normal; font-size: 10px; }
.head .cmp-cell .n { font-size: 13px; }
.head .cmp-cell .tot { font-size: 26px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.head .cmp-cell .tp { font-size: 10px; color: var(--muted); font-weight: 600; }
.cmp-cell[data-player] { cursor: pointer; }

/* ---------- live player card ---------- */
.ph { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: flex-start; }
.ph .big { font-size: 34px; font-weight: 900; line-height: 1; color: var(--green); text-align: right; font-variant-numeric: tabular-nums; }
.ph .big.neg { color: var(--red); }
.ph .biglbl { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; text-align: right; margin-top: 3px; white-space: nowrap; }
.ph .match { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); margin-top: 6px; flex-wrap: wrap; }
.ph .match b { color: var(--text); }
.pb { padding: 0 !important; overflow: hidden; }
.pb .r { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); align-items: center; font-size: 14px; }
.pb .r:last-child { border-bottom: 0; }
.pb .r .sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.pb .r .v { font-weight: 900; font-variant-numeric: tabular-nums; font-size: 16px; min-width: 34px; text-align: right; }
.pb .r .v.pos { color: var(--green); } .pb .r .v.neg { color: var(--red); } .pb .r .v.zero { color: var(--muted); }
.pb .r.rule > div:first-child { color: var(--blue); font-weight: 700; }
.pb .r.total { background: var(--card2); font-weight: 900; }
.pb .r.total .v { font-size: 20px; }
.pb .tag { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--amber-bg); color: var(--amber); margin-left: 4px; vertical-align: middle; }
.grp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.grp .stat { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 6px; text-align: center; min-width: 0; }
.grp .stat.wide { grid-column: 1 / -1; }
.grp .stat b { display: block; white-space: nowrap; font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.1; }
.grp .stat b em { font-style: normal; font-size: 13px; color: var(--muted); }
.grp .stat span { display: block; font-size: 10px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-top: 3px; }
.grp .stat small { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.grp .stat.hit { border-color: var(--green); background: var(--green-bg); }
.grp .stat.hit b { color: var(--green); }
.dcbar { height: 6px; border-radius: 3px; background: var(--card2); overflow: hidden; margin: 6px 4px 0; }
.dcbar i { display: block; height: 100%; background: var(--green); border-radius: 3px; }
.src { font-size: 10px; color: var(--muted); text-align: right; margin-top: 8px; }
.bpsrace { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; margin-top: 8px; }
.bpsrace .rank { font-weight: 800; white-space: nowrap; }
.bpsrace .lead { color: var(--muted); font-size: 12px; text-align: right; }

/* ---------- DraftKings-style squad rows ---------- */
.dklist { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 0; }
.dk { border-bottom: 1px solid var(--line); }
.dk:last-child { border-bottom: 0; }
.dk-row { display: grid; grid-template-columns: 26px 46px 1fr auto 14px; gap: 8px; align-items: center; padding: 9px 0; cursor: pointer; }
.dk.wait .dk-img { opacity: .55; }
.dk-pos { font-size: 9px; font-weight: 800; color: var(--muted); align-self: start; padding-top: 3px; letter-spacing: .2px; }
.dk-img { position: relative; width: 46px; height: 46px; border-radius: 8px; background: var(--card2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Ccircle cx='23' cy='17' r='9' fill='%2394a3b8'/%3E%3Cpath d='M6 46c1-11 8-16 17-16s16 5 17 16z' fill='%2394a3b8'/%3E%3C/svg%3E") center/cover no-repeat; overflow: visible; }
.dk-img .face { position: absolute; inset: 0; width: 46px; height: 46px; object-fit: cover; object-position: top; border-radius: 8px; background: var(--card2); }
.dk-img .badge { position: absolute; right: -4px; top: -4px; width: 18px; height: 18px; background: var(--card); border-radius: 50%; padding: 1px; box-shadow: 0 0 0 1px var(--line); }
.dk-img .tick { position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 4px; font-style: normal; font-size: 11px; font-weight: 900; line-height: 16px; text-align: center; color: #fff; }
.dk-img .tick.on { background: var(--green); }
.dk-img .tick.sub { background: var(--muted); }
.dk-main { min-width: 0; }
.dk-name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-pct { font-weight: 600; font-size: 12px; color: var(--muted); margin-left: 2px; }
.dk-fx { font-size: 12.5px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-fx b { color: var(--text); }
.dk-fx .fs { font-weight: 800; font-size: 11px; letter-spacing: .3px; margin-left: 4px; }
.dk-fx .fs.done { color: var(--red); }
.dk-fx .fs.live { color: var(--green); }
.dk-pts { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.dk-pts.neg { color: var(--red); }
.dk-pts.zero { color: var(--muted); }
.dk-chev { color: var(--muted); font-size: 16px; line-height: 1; transition: transform .15s; }
.dk-row.open .dk-chev { transform: rotate(180deg); }
.dk-drop { padding: 0 0 8px 24px; }
.dk-line { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 5px 0; border-top: 1px solid var(--line); }
.dk-line span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }
.dk-line .pos { color: var(--green); } .dk-line .neg { color: var(--red); } .dk-line .zero { color: var(--muted); }
.dk-line.rule span:first-child { color: var(--blue); font-weight: 700; }
.dk-line.more { border-top: 0; padding-top: 6px; }
.dk-line.more .link { cursor: pointer; }

/* ---------- compact table tab ---------- */
.tbl { padding: 4px 10px; }
.tbl .tr { display: grid; grid-template-columns: 22px 1fr 64px 40px 44px; gap: 6px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.tbl .tr:last-child { border-bottom: 0; }
.tbl .tr.head { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); padding: 6px 0; }
.tbl .tr.head span:nth-child(n+3), .tbl .tr .w, .tbl .tr .p, .tbl .tr .b { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .n { font-size: 12px; font-weight: 800; color: var(--muted); }
.tbl .nm { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl .p { font-weight: 900; font-size: 17px; }
.tbl .w { font-weight: 700; }
.tbl .tr.lead .n { color: var(--green); }
.tbl .tr.lead .w { color: var(--green); }
.tbl .tok i { font-style: normal; font-size: 11px; color: var(--muted); margin-left: 2px; }
.tbl .lv { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-left: 4px; vertical-align: middle; animation: pulse 1.4s infinite; }
.pots .tr, .fines .tr { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.pots .tr:last-child, .fines .tr:last-child { border-bottom: 0; }
.pots .who { color: var(--green); font-weight: 700; font-size: 13px; }
.pots .amt, .fines .amt { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 48px; text-align: right; }
.pots .tr.foot, .fines .tr.foot { font-size: 13px; }
.fines .tr { grid-template-columns: 38px 1fr auto; }
.fines .gw { font-size: 11px; font-weight: 800; }
.fines .nm { font-size: 13.5px; min-width: 0; }
.fines .tr.foot { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 8px; }
.fines .none { color: var(--muted); font-size: 13px; text-align: center; padding: 6px 0; }
.mom2 .bar { height: 6px; border-radius: 3px; background: var(--card2); overflow: hidden; }
.mom2 .bar i { display: block; height: 100%; background: var(--green); border-radius: 3px; }
.side3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; }
.side3 > div { padding: 4px 2px; }
.side3 .lbl { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-bottom: 3px; }
.side3 b { font-size: 13px; }

/* avatars in pick lists */
.avatar { position: relative; display: inline-block; width: 38px; height: 38px; border-radius: 8px; background: var(--card2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Ccircle cx='23' cy='17' r='9' fill='%2394a3b8'/%3E%3Cpath d='M6 46c1-11 8-16 17-16s16 5 17 16z' fill='%2394a3b8'/%3E%3C/svg%3E") center/cover no-repeat; flex: none; }
.avatar .face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 8px; }
.avatar .badge { position: absolute; right: -4px; top: -4px; width: 16px; height: 16px; background: var(--card); border-radius: 50%; padding: 1px; box-shadow: 0 0 0 1px var(--line); }
.slotrow.filled { grid-template-columns: 30px 36px 1fr auto; }

/* ---------- head-to-head (two lineups) ---------- */
.h2h-opp { margin-bottom: 10px; }
.h2h { padding: 6px 10px; }
.h2h-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 6px 0 10px; border-bottom: 2px solid var(--line); }
.h2h-head .side .who { font-weight: 800; font-size: 14px; }
.h2h-head .side .tot { font-size: 30px; font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.h2h-head .side .tp { font-size: 11px; color: var(--muted); font-weight: 600; }
.h2h-head .side.r { text-align: right; }
.h2h-head .side.lead .tot { color: var(--green); }
.h2h-head .vs { font-size: 12px; font-weight: 800; color: var(--muted); }
.h2h-row { display: grid; grid-template-columns: 1fr 34px 1fr; align-items: stretch; gap: 4px; border-bottom: 1px solid var(--line); }
.h2h-row:last-child { border-bottom: 0; }
.h2h-slot { display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: var(--muted); }
.h2h-cell { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 9px 8px; border-radius: 8px; margin: 3px 0; min-width: 0; cursor: pointer; }
.h2h-cell.r { grid-template-columns: auto 1fr; }
.h2h-cell.r .h2h-txt { order: 2; text-align: right; }
.h2h-cell.r .h2h-pts { order: 1; }
.h2h-ico { font-size: 11px; }
.h2h-meta .fs { font-weight: 800; font-size: 10.5px; letter-spacing: .3px; }
.h2h-meta .fs.done { color: var(--red); }
.h2h-meta .fs.live { color: var(--green); }
.h2h-cell.empty { grid-template-columns: 1fr; text-align: center; }
.h2h-txt { min-width: 0; }
.h2h-name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h2h-meta { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.h2h-meta i.u { font-style: normal; font-weight: 800; color: var(--green); }
.h2h-pts { font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; }
.h2h-pts.neg { color: var(--red); } .h2h-pts.zero { color: var(--muted); } .h2h-pts.pos { color: var(--green); }
.h2h-cell.wait { opacity: .55; }
.h2h-cell.best { background: var(--green-bg); }
.h2h-cell.best .h2h-pts { color: var(--green); }
.h2h-row.bon .h2h-cell { cursor: default; grid-template-columns: 1fr auto; }
.h2h-row.bon .h2h-cell.r { grid-template-columns: auto 1fr; }
.h2h-row.bon .h2h-meta { white-space: normal; color: var(--muted); }
.h2h-row.bon .h2h-pts { font-size: 15px; }
.h2h-row.same .h2h-slot { color: var(--blue); font-size: 14px; }
.pays .tr { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.pays .tr:last-child { border-bottom: 0; }
.trophies { font-size: 11px; margin-left: 4px; letter-spacing: -1px; vertical-align: 1px; }

/* ---- weekly draft ---- */
.turn { background: var(--green); color: #fff; border-radius: var(--radius); padding: 13px 14px; margin-bottom: 10px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
.turn b { font-size: 18px; display: block; } .turn .s { font-size: 12.5px; opacity: .9; display: block; margin-top: 2px; }
.turn .clock { font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.5px; text-align: right; line-height: 1; }
.turn .clock small { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; opacity: .85; margin-top: 3px; }
.turn.wait { background: var(--card); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow); }
.turn.wait .s, .turn.wait .clock small { color: var(--muted); opacity: 1; }
.turn.done { background: var(--blue-bg); color: var(--text); border: 1px solid transparent; }
.turn.done b { color: var(--blue); } .turn.done .clock { color: var(--blue); } .turn.done .s, .turn.done .clock small { color: var(--muted); opacity: 1; }
.order { display: flex; gap: 6px; margin: 0 0 12px; }
.order span { flex: 1; text-align: center; font-size: 12px; font-weight: 700; padding: 6px 0; border-radius: 8px; background: var(--card); border: 1px solid var(--line); color: var(--muted); }
.order span.me { background: var(--green-bg); color: var(--green); border-color: transparent; }
.slotrow.now { border-color: var(--green); }
.slotrow.now .empty { color: var(--green); font-weight: 700; }
.board { display: grid; gap: 4px; font-size: 11.5px; }
.board .h { text-align: center; font-weight: 800; padding: 4px 0; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board .r { color: var(--muted); font-weight: 800; font-size: 10px; display: flex; align-items: center; justify-content: center; }
.board .c { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; min-height: 34px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.board .c b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; cursor: pointer; }
.board .c span { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board .c.me { border-color: var(--green); }
.board .c.now { background: var(--green); border-color: var(--green); color: #fff; } .board .c.now span { color: rgba(255,255,255,.85); }
.board .c.empty { background: var(--card2); border-style: dashed; }
.board .c.auto b::after { content: " ⏱"; font-size: 10px; }
.dsq { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; margin-top: 6px; font-size: 13px; }
.dsq .dp { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsq .sl { display: inline-block; width: 34px; font-size: 10px; font-weight: 800; color: var(--muted); }
.slotrow.gone { opacity: .7; border-style: dashed; }
.swapcell { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.swapcell .until { font-size: 10px; color: var(--muted); white-space: nowrap; }
.pill.xi { padding: 1px 5px; font-size: 10px; letter-spacing: .3px; }

/* Money tab */
.moneywrap { overflow-x: auto; }
table.money { width: 100%; border-collapse: collapse; }
table.money th, table.money td { padding: 5px 3px; text-align: center; vertical-align: top; }
table.money tr > th:first-child { text-align: left; }
table.money th { font-size: 12px; font-weight: 700; color: var(--muted); }
table.money th.gw { color: var(--text); font-size: 13px; padding-top: 12px; white-space: nowrap; }
table.money tr + tr th, table.money tr + tr td { border-top: 1px solid var(--line); }
table.money tr.tot th, table.money tr.tot td { border-top: 2px solid var(--line); padding-top: 10px; }
table.money .owing { color: var(--amber); }
table.money .clear { color: var(--green); font-weight: 700; font-size: 13px; }
.pay { display: block; margin: 0 auto 3px; padding: 4px 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); line-height: 1.1; min-width: 58px; }
.pay b { display: block; font-size: 13px; font-variant-numeric: tabular-nums; }
.pay i { display: block; font-style: normal; font-size: 10px; color: var(--muted); }
.pay.mine { cursor: pointer; border-color: var(--dotline); }
.pay.on { background: var(--green-bg); border-color: transparent; }
.pay.on b { color: var(--green); }
.pay.on i { color: var(--green); opacity: .8; }
.pill.fh { vertical-align: 2px; }

/* "new version ready" bar */
#updBar { position: fixed; left: 10px; right: 10px; bottom: calc(var(--tabh) + 12px + env(safe-area-inset-bottom)); z-index: 9;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px;
  font-size: 13px; box-shadow: 0 4px 16px rgba(15,23,42,.14); }

/* Team Lab (sandbox) */
.chip.icon.on { background: var(--green-bg); color: var(--green); border-color: transparent; }
.lab-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.labslots .slotrow .empty { color: var(--muted); }
.labslots .slotrow { cursor: pointer; }
.prow .stat b { display: block; }
/* round prices: the round a player was taken in */
.rnd { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--card2); border: 1px solid var(--line); color: var(--muted); font-size: 10.5px; font-weight: 800; flex: 0 0 auto; margin-right: 4px; }
.board .r { flex-direction: column; line-height: 1.1; }
.board .r small { font-size: 8.5px; font-weight: 600; opacity: .8; }
.rnd.plan { border-style: dashed; background: transparent; }
/* Stats page */
.stats-wrap { overflow: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 12px; background: var(--card); max-height: 70vh; }
table.stats { border-collapse: separate; border-spacing: 0; font-size: 12.5px; white-space: nowrap; min-width: 100%; }
table.stats th, table.stats td { padding: 7px 8px; text-align: right; border-bottom: 1px solid var(--line); }
table.stats th { position: sticky; top: 0; background: var(--card2); font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); cursor: pointer; user-select: none; z-index: 2; }
table.stats th.on, table.stats td.on { color: var(--green); font-weight: 700; }
table.stats th.name, table.stats td.name { position: sticky; left: 0; text-align: left; background: var(--card); z-index: 1; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
table.stats th.name { background: var(--card2); z-index: 3; }
table.stats td.name small { display: block; color: var(--muted); font-size: 10.5px; font-weight: 500; }
table.stats td.name .tap { font-weight: 700; cursor: pointer; }
table.stats tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--card2) 40%, var(--card)); }
table.stats tbody tr:nth-child(even) td.name { background: color-mix(in srgb, var(--card2) 40%, var(--card)); }
.badge-sm { width: 16px; height: 16px; vertical-align: -3px; margin-right: 5px; }
.formstr i { display: inline-block; width: 15px; height: 15px; line-height: 15px; border-radius: 4px; font-style: normal; font-size: 9.5px; font-weight: 800; text-align: center; color: #fff; margin-left: 1px; }
.formstr i.W { background: var(--green); } .formstr i.D { background: var(--muted); } .formstr i.L { background: var(--red); }
.gl { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.4; }
.gl:last-child { border-bottom: 0; }
.gl > b { color: var(--green); font-size: 12px; text-transform: uppercase; letter-spacing: .3px; padding-top: 1px; }

/* Money tab: pay the pot */
.potcard { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.potcard a.btn { text-decoration: none; text-align: center; white-space: nowrap; }

/* Table tab: fines folded by gameweek */
.fines details.fweek { border-bottom: 1px solid var(--line); }
.fines details.fweek > summary { list-style: none; cursor: pointer; border-bottom: 0; }
.fines details.fweek > summary::-webkit-details-marker { display: none; }
.fines details.fweek > summary .gw::before { content: '▸ '; color: var(--muted); }
.fines details.fweek[open] > summary .gw::before { content: '▾ '; }
.fines details.fweek > .tr { border-bottom: 0; padding: 4px 0; }
.fines details.fweek > .tr:last-child { padding-bottom: 8px; }
.fines .tr { grid-template-columns: 44px 1fr auto; }


/* ---------- The back page ---------- */
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/anton-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/anton-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
body.noscroll { overflow: hidden; }
.bp-wrap { position: fixed; inset: 0; z-index: 60; background: rgba(10,14,22,.72); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: calc(14px + env(safe-area-inset-top)) 10px calc(24px + env(safe-area-inset-bottom)); transition: opacity .3s; }
.bp-wrap.out { opacity: 0; }
.bp-wrap.fresh .bp { animation: bpspin .9s cubic-bezier(.2,.8,.25,1) both; }
@keyframes bpspin { from { transform: rotate(-540deg) scale(.08); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bp-wrap.fresh .bp { animation: none; } }
.bp { --ink: #141414; --red: #d7141a; --paper: #f6f2e9; --rule: #1d1d1d; position: relative; max-width: 560px; margin: 0 auto; background: var(--paper); color: var(--ink); border-radius: 4px; box-shadow: 0 18px 50px rgba(0,0,0,.45); padding: 0 0 16px; font-family: Georgia, 'Times New Roman', serif; }
.bp-x { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(0,0,0,.35); color: #fff; font-size: 15px; font-weight: 800; z-index: 2; }
.bp-mast { background: var(--red); color: #fff; text-align: center; padding: 14px 12px 10px; border-radius: 4px 4px 0 0; }
.bp-name { font-family: Anton, 'Futura Condensed ExtraBold', 'Avenir Next Condensed', Impact, sans-serif; font-size: 44px; line-height: 1; letter-spacing: 1px; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0,0,0,.18); }
.bp-strap { font-family: -apple-system, system-ui, sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; opacity: .9; margin-top: 4px; }
.bp-date { display: flex; justify-content: space-between; gap: 6px; font-family: -apple-system, system-ui, sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; border-top: 3px solid var(--rule); border-bottom: 1px solid var(--rule); margin: 0 12px; padding: 6px 0; }
.bp-splash { padding: 10px 12px 4px; }
.bp-kick { display: inline-block; background: #ffd400; color: #000; font-family: -apple-system, system-ui, sans-serif; font-size: 11px; font-weight: 900; letter-spacing: 1px; padding: 3px 7px; transform: rotate(-1.5deg); }
.bp-h1 { font-family: Anton, 'Futura Condensed ExtraBold', 'Avenir Next Condensed', Impact, sans-serif; font-weight: 400; font-size: 54px; line-height: .95; letter-spacing: .3px; text-transform: uppercase; margin: 8px 0 10px; color: var(--ink); overflow-wrap: anywhere; }
.bp-hero { background: var(--c); color: var(--i); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; padding: 12px 14px; border-bottom: 5px solid var(--a); }
.bp-hero.str { background: repeating-linear-gradient(90deg, #241F20 0 18px, #3a3435 18px 36px); border-bottom-color: #fff; }
.bp-hn { font-family: Anton, Impact, sans-serif; font-size: 30px; line-height: 1; text-transform: uppercase; }
.bp-hc { font-family: -apple-system, system-ui, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; opacity: .85; }
.bp-hs { font-family: Anton, Impact, sans-serif; font-size: 46px; line-height: 1; }
.bp-hp { grid-column: 1 / -1; font-family: -apple-system, system-ui, sans-serif; font-size: 12px; font-weight: 700; opacity: .95; }
.bp-stand { font-size: 16px; line-height: 1.35; font-weight: 700; margin: 10px 0 4px; }
.bp-stories { margin: 6px 12px 0; border-top: 3px solid var(--rule); }
.bp-story { padding: 10px 0; border-bottom: 1px solid #c9c2b2; }
.bp-sk { font-family: -apple-system, system-ui, sans-serif; font-size: 10px; font-weight: 900; letter-spacing: 1.2px; color: var(--red); display: flex; align-items: center; gap: 6px; }
.bp-h2 { font-family: Anton, 'Futura Condensed ExtraBold', Impact, sans-serif; font-weight: 400; font-size: 28px; line-height: 1; text-transform: uppercase; margin: 4px 0 6px; color: var(--ink); }
.bp-story p { margin: 0; font-size: 14px; line-height: 1.4; }
.bp-colm { margin: 14px 12px 0; padding: 12px; background: #fff; border: 2px solid var(--rule); }
.bp-by { display: flex; gap: 10px; align-items: center; border-bottom: 1px solid var(--rule); padding-bottom: 8px; margin-bottom: 8px; }
.bp-by b { font-family: -apple-system, system-ui, sans-serif; font-size: 13px; letter-spacing: 1.5px; }
.bp-av { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #ffd400; display: grid; place-items: center; font-family: Anton, Impact, sans-serif; font-size: 17px; flex: none; }
.bp-ct { font-style: italic; font-size: 18px; font-weight: 700; }
.bp-colm p { font-size: 14.5px; line-height: 1.45; margin: 0 0 9px; }
.bp-colm p.dc::first-letter { font-family: Anton, Impact, sans-serif; float: left; font-size: 46px; line-height: .9; padding: 3px 6px 0 0; color: var(--red); }
.bp-verdict { font-family: -apple-system, system-ui, sans-serif; font-weight: 900; font-size: 13px !important; text-transform: uppercase; letter-spacing: .4px; border-top: 1px solid var(--rule); padding-top: 8px; margin: 0 !important; }
.bp-box { margin: 14px 12px 0; border-top: 3px solid var(--rule); font-family: -apple-system, system-ui, sans-serif; }
.bp-box h3 { font-family: Anton, Impact, sans-serif; font-weight: 400; font-size: 20px; text-transform: uppercase; letter-spacing: .5px; margin: 6px 0 4px; color: var(--ink); }
.bp-club { display: inline-block; width: 12px; height: 16px; border-radius: 3px 3px 5px 5px; background: var(--c); box-shadow: inset 0 -3px 0 var(--a), 0 0 0 1px rgba(0,0,0,.25); vertical-align: -3px; margin-right: 6px; flex: none; }
.bp-club.str { background: repeating-linear-gradient(90deg, #241F20 0 3px, #fff 3px 6px); box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.bp-mu { color: #6b6457; font-size: 12px; font-weight: 600; }
.bp-q { font-family: Georgia, serif; font-size: 13.5px; line-height: 1.35; margin-top: 2px; }
.bp-rate, .bp-fine, .bp-job { display: flex; align-items: flex-start; gap: 4px; padding: 8px 0; border-bottom: 1px solid #c9c2b2; font-size: 14px; }
.bp-rate .bp-club, .bp-fine .bp-club, .bp-job .bp-club { margin-top: 2px; }
.bp-rn, .bp-fine > div, .bp-job > div { flex: 1; min-width: 0; }
.bp-score { font-family: Anton, Impact, sans-serif; font-size: 26px; line-height: 1; width: 42px; height: 42px; border-radius: 50%; border: 3px solid var(--ink); display: grid; place-items: center; flex: none; }
.bp-ft { width: 100%; border-collapse: collapse; font-size: 13px; }
.bp-ft th { text-align: left; font-size: 10px; letter-spacing: .8px; text-transform: uppercase; color: #6b6457; padding: 4px 4px 4px 0; }
.bp-ft td { padding: 7px 4px 7px 0; border-top: 1px solid #c9c2b2; vertical-align: middle; }
.bp-ft .n { text-align: right; font-variant-numeric: tabular-nums; }
.bp-ft th:nth-child(4), .bp-ft th:nth-child(5) { text-align: right; }
.bp-rk { font-family: Anton, Impact, sans-serif; font-size: 18px; width: 26px; white-space: nowrap; }
.bp-rk i { font-style: normal; font-size: 9px; vertical-align: 3px; margin-left: 1px; }
.bp-rk .up { color: #15803d; } .bp-rk .dn { color: var(--red); }
.bp-form { display: inline-flex; gap: 2px; }
.bp-form i, .bp-res { font-style: normal; width: 18px; height: 18px; border-radius: 3px; display: inline-grid; place-items: center; font-size: 10px; font-weight: 900; color: #fff; background: #8a8478; }
.bp-form .rW, .bp-res.rW { background: #15803d; } .bp-form .rL, .bp-res.rL { background: var(--red); } .bp-form .rD, .bp-res.rD { background: #b45309; }
.bp-res { width: 22px; height: 22px; font-size: 11px; flex: none; }
.bp-amt { font-weight: 900; font-variant-numeric: tabular-nums; flex: none; }
.bp-tot { display: flex; justify-content: space-between; font-weight: 900; font-size: 13px; padding: 8px 0 0; text-transform: uppercase; letter-spacing: .4px; }
.bp-foot { margin: 16px 12px 0; text-align: center; font-family: -apple-system, system-ui, sans-serif; font-size: 12px; color: #6b6457; display: grid; gap: 10px; }
.bp-foot .btn { background: var(--ink); color: #fff; }
/* History tab: the archive */
.bp-list { display: grid; gap: 8px; margin-bottom: 8px; }
.bp-li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 0 10px; text-align: left; background: #f6f2e9; color: #141414; border: 0; border-left: 6px solid #d7141a; border-radius: 10px; padding: 10px 12px; }
.bp-li-m { grid-row: span 2; align-self: center; font-family: Anton, Impact, sans-serif; font-size: 20px; color: #d7141a; }
.bp-li-h { font-family: Anton, Impact, sans-serif; font-size: 19px; line-height: 1.05; text-transform: uppercase; }
.bp-li-k { font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #6b6457; }

/* Splash v2 (Oct 2026): full-screen pitch drawn in the dark, then the floodlights flicker it into life */
.splash.v2::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0;
  background-image: radial-gradient(ellipse 110% 70% at 50% 50%, rgba(255,255,255,.06), rgba(0,0,0,0) 60%, rgba(0,0,0,.25)),
    repeating-linear-gradient(180deg, #16843f 0 8.3333%, #1c9c4b 8.3333% 16.6667%);
  background-position: 0 0;
  animation: floodlit .95s steps(1, end) .35s forwards; }
.fpitch { position: absolute; left: 0; top: 0; z-index: 1; overflow: visible; }
.fpitch .ln { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .3;
  animation: flitlines .95s steps(1, end) .35s forwards; }
.fpitch .spot { fill: #fff; opacity: .3; animation: flitlines .95s steps(1, end) .35s forwards; }
@keyframes fdraw { to { stroke-dashoffset: 0; } }
@keyframes fspot { to { opacity: .3; } }
@keyframes flitlines { 0% { opacity: .3; } 14% { opacity: .7; } 20% { opacity: .32; } 34% { opacity: .32; } 38% { opacity: .85; } 44% { opacity: .4; } 56% { opacity: .4; } 60% { opacity: .95; } 66% { opacity: .75; } 72%, 100% { opacity: 1; } }
.fpitch .fb { fill: #fff; transform-box: fill-box; transform-origin: center; animation: rise .45s cubic-bezier(.2,.9,.3,1.2) both, fshrink .3s ease-in .45s forwards; }
.fpitch .b1 { animation-delay: .05s, .45s; } .fpitch .b2 { animation-delay: .14s, .45s; } .fpitch .b3 { animation-delay: .23s, .45s; }
@keyframes fshrink { to { transform: translateX(var(--tx)) scale(0); opacity: 0; } }
.fpitch .bank { fill: #1b1f1c; stroke: #3a413c; stroke-width: 1.2; }
.fpitch .lamp { fill: #2c332e; }
.fpitch .lamp-on { fill: #fffdf2; }
.fpitch .halo { fill: #fffbe6; opacity: .35; filter: blur(8px); }
.fpitch .flight { opacity: 0; animation: floodlit .95s steps(1, end) calc(.35s + var(--d, 0s)) forwards; }
.fpitch .flights { mix-blend-mode: screen; }
@keyframes floodlit {
  0% { opacity: 0; } 14% { opacity: .55; } 20% { opacity: .05; } 34% { opacity: .05; } 38% { opacity: .8; }
  44% { opacity: .15; } 56% { opacity: .15; } 60% { opacity: .95; } 66% { opacity: .55; } 72%, 100% { opacity: 1; } }
.splash.v2 > .splash-word, .splash.v2 > .splash-sub, .splash.v2 > .splash-ver { position: absolute; left: 0; right: 0; text-align: center; z-index: 2; text-shadow: 0 1px 2px rgba(0,0,0,.35), 0 2px 12px rgba(0,0,0,.35); }
.splash.v2 > .splash-word { top: calc(var(--cy, 50vh) - 44px); line-height: 40px; font-size: 36px; animation: fadeup .45s ease 1.25s both; }
.splash.v2 > .splash-sub { top: calc(var(--cy, 50vh) + var(--r, 50px) + 14px); animation: fadeup .45s ease 1.4s both; }
.splash.v2 > .splash-ver { bottom: auto; top: calc(var(--cy, 50vh) + var(--r, 50px) + 34px); animation: fadeup .45s ease 1.5s both; }
@media (prefers-reduced-motion: reduce) {
  .splash.v2::before, .fpitch .flight { animation: none; opacity: 1; }
  .fpitch .ln { animation: none; stroke-dashoffset: 0; opacity: 1; } .fpitch .spot { animation: none; opacity: 1; } .fpitch .fbars { display: none; }
  .splash.v2 > .splash-word, .splash.v2 > .splash-sub, .splash.v2 > .splash-ver { animation: none; }
}
.bp-tip { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; border-bottom: 1px solid #c9c2b2; font-size: 14px; }
.bp-tip > div { flex: 1; min-width: 0; }
.bp-tl { flex: none; width: 74px; margin-top: 1px; background: #141414; color: #ffd400; font-size: 9.5px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; text-align: center; padding: 3px 4px; border-radius: 3px; }
.bp-tl.sw { background: #d7141a; color: #fff; }
.bp-pull { margin: 14px 12px 0; padding: 12px 14px; background: #141414; color: #fff; position: relative; }
.bp-pk { display: inline-block; background: #ffd400; color: #000; font-family: -apple-system, system-ui, sans-serif; font-size: 10px; font-weight: 900; letter-spacing: 1.2px; padding: 2px 6px; text-transform: uppercase; }
.bp-pull blockquote { margin: 8px 0 6px; font-family: Anton, Impact, sans-serif; font-size: 26px; line-height: 1.08; text-transform: uppercase; }
.bp-pw { font-family: -apple-system, system-ui, sans-serif; font-size: 12px; font-weight: 700; opacity: .85; }
.bp-iv { margin: 14px 12px 0; border-top: 3px solid var(--rule); padding-top: 8px; }
.bp-ivi { font-size: 13.5px; font-style: italic; margin: 0 0 8px; }
.bp-ivq { font-family: -apple-system, system-ui, sans-serif; font-size: 13.5px; margin: 10px 0 4px; }
.bp-iva { font-size: 16px; line-height: 1.4; margin: 0 0 4px; padding-left: 10px; border-left: 3px solid var(--red); }
.bp-ans { width: 100%; box-sizing: border-box; font: 15px Georgia, serif; padding: 8px 10px; border: 1.5px solid #141414; border-radius: 4px; background: #fffdf7; color: #141414; resize: vertical; }
.bp-send { background: #d7141a !important; color: #fff; margin-top: 6px; }
.splash.v2 > svg.fpitch { position: absolute; left: 0; top: 0; }
.splash.v2.out { transform: none; }
.card.terry { display: flex; gap: 10px; align-items: center; border-left: 4px solid #d7141a; }
.card.terry.open { display: block; }
.card.terry .tav { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #141414; color: #ffd400; font-family: Anton, Impact, sans-serif; font-size: 13px; flex: none; }
.bp-tt { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #141414; color: #ffd400; font-family: Anton, Impact, sans-serif; font-size: 8px; margin-right: 6px; vertical-align: -3px; }
.bp-terry .bp-me td { background: #fff3c4; }
.bp-tl8 { margin-top: 8px; }
.bp-tp { padding: 6px 0; border-bottom: 1px solid #c9c2b2; font-size: 13.5px; }
.bp-tp .bp-amt { float: right; }
.bp-fig { margin: 0 0 10px; }
.bp-fig img { display: block; width: 100%; height: auto; border: 3px solid #141414; }
.bp-fig figcaption { background: #141414; color: #fff; font-family: -apple-system, system-ui, sans-serif; font-size: 12.5px; font-weight: 700; line-height: 1.35; padding: 7px 10px; }
.bp-fig2 { margin: 14px 12px 0; }
.bp-figc { margin: 4px 0 12px; clear: both; }

/* Sign-in wall: signed out, only this shows */
body.locked .top, body.locked .tabs, body.locked #view, body.locked #updBar, body.locked #homeTip { display: none !important; }
#gate { position: fixed; inset: 0; z-index: 40; background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(28px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom)); display: flex; justify-content: center; }
.gate-in { width: 100%; max-width: 380px; margin: auto 0; display: flex; flex-direction: column; gap: 10px; }
.gate-brand { display: flex; align-items: center; gap: 10px; font-size: 28px; }
.gate-q { font-weight: 800; font-size: 18px; margin-top: 14px; }
.gate-in .names { margin: 0; }
.gate-note { margin-top: 4px; }
.gate-tip { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
#homeTip { position: fixed; left: 10px; right: 10px; bottom: calc(var(--tabh) + 12px + env(safe-area-inset-bottom)); z-index: 8;
  display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(0,0,0,.12); font-size: 13px; }
#homeTip span { flex: 1; }