/* ════════════════════════════════════════════════════════════════
   yoshi — retro mundial prediction league
   3 variations: poster (mexico '70) · sticker (panini) · telecast '78
═══════════════════════════════════════════════════════════════════ */

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

:root{
  --font-display:'Heebo','Assistant',system-ui,sans-serif;
  --font-mono:'DM Mono',ui-monospace,monospace;
  --space:1;
  --r:4px;
  --r-lg:10px;
}

html{height:100%;}
body{
  min-height:100%;
  font-family:var(--font-display);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  font-weight:500;
  transition:background .25s, color .25s;
  overflow-x:hidden;
}

/* ──────────────────────────────────────────────────────────────
   VARIATION A · POSTER  (Mexico '70 — bold poster look)
   ──────────────────────────────────────────────────────────── */
body[data-variation="poster"][data-theme="light"]{
  --bg:#efe2c4;
  --bg-2:#e6d4ad;
  --paper:#faf2da;
  --paper-2:#f0e1b8;
  --ink:#1a0f06;
  --ink-2:#5a4424;
  --ink-3:#9a8259;
  --line:#1a0f06;
  --line-soft:rgba(26,15,6,.15);
  --line-softer:rgba(26,15,6,.08);
  --accent:#d8552c;
  --accent-2:#b32314;
  --accent-3:#d59618;
  --accent-cool:#1f6b56;
  --success:#1f6b56;
  --shadow-hard:5px 5px 0 #1a0f06;
  --shadow-soft:3px 3px 0 rgba(26,15,6,.18);
}
body[data-variation="poster"][data-theme="dark"]{
  --bg:#0e1018;
  --bg-2:#161924;
  --paper:#1c2030;
  --paper-2:#252b3e;
  --ink:#f5e8ce;
  --ink-2:#c9b78d;
  --ink-3:#82755a;
  --line:#f5e8ce;
  --line-soft:rgba(245,232,206,.18);
  --line-softer:rgba(245,232,206,.08);
  --accent:#ff8b57;
  --accent-2:#ef5a3c;
  --accent-3:#f0c14a;
  --accent-cool:#56d3a9;
  --success:#56d3a9;
  --shadow-hard:5px 5px 0 #000;
  --shadow-soft:3px 3px 0 rgba(0,0,0,.5);
}

/* ──────────────────────────────────────────────────────────────
   VARIATION B · STICKER (Panini sticker album)
   ──────────────────────────────────────────────────────────── */
body[data-variation="sticker"][data-theme="light"]{
  --bg:#dfd0ad;
  --bg-2:#cebe96;
  --paper:#efe4c6;
  --paper-2:#d7c89f;
  --ink:#1c170a;
  --ink-2:#4d3f23;
  --ink-3:#857349;
  --line:#1c170a;
  --line-soft:rgba(28,23,10,.2);
  --line-softer:rgba(28,23,10,.1);
  --accent:#1e6a3a;
  --accent-2:#922f2f;
  --accent-3:#c98a1d;
  --accent-cool:#324a82;
  --success:#1e6a3a;
  --shadow-hard:0 6px 16px rgba(28,23,10,.18);
  --shadow-soft:0 2px 6px rgba(28,23,10,.12);
}
body[data-variation="sticker"][data-theme="dark"]{
  --bg:#13160f;
  --bg-2:#1c2018;
  --paper:#222721;
  --paper-2:#2d342c;
  --ink:#ede4cd;
  --ink-2:#b3a988;
  --ink-3:#776e57;
  --line:#ede4cd;
  --line-soft:rgba(237,228,205,.18);
  --line-softer:rgba(237,228,205,.08);
  --accent:#6db069;
  --accent-2:#d75a5a;
  --accent-3:#e6b743;
  --accent-cool:#7a98d0;
  --success:#6db069;
  --shadow-hard:0 8px 24px rgba(0,0,0,.5);
  --shadow-soft:0 2px 8px rgba(0,0,0,.35);
}

/* ──────────────────────────────────────────────────────────────
   VARIATION C · TELECAST (1978 broadcast graphic)
   ──────────────────────────────────────────────────────────── */
body[data-variation="telecast"][data-theme="light"]{
  --bg:#eae3d0;
  --bg-2:#dcd3ba;
  --paper:#f3eede;
  --paper-2:#dad2bb;
  --ink:#0d1325;
  --ink-2:#374063;
  --ink-3:#6e779a;
  --line:#0d1325;
  --line-soft:rgba(13,19,37,.16);
  --line-softer:rgba(13,19,37,.08);
  --accent:#1747a6;
  --accent-2:#d63044;
  --accent-3:#e8b321;
  --accent-cool:#0c8a85;
  --success:#0c8a85;
  --shadow-hard:0 0 0 2px var(--ink);
  --shadow-soft:0 1px 0 var(--line-soft);
}
body[data-variation="telecast"][data-theme="dark"]{
  --bg:#080d1e;
  --bg-2:#0e152b;
  --paper:#131c33;
  --paper-2:#1d2745;
  --ink:#ece5d3;
  --ink-2:#9ea7c0;
  --ink-3:#5b6480;
  --line:#ece5d3;
  --line-soft:rgba(236,229,211,.15);
  --line-softer:rgba(236,229,211,.07);
  --accent:#5c8eff;
  --accent-2:#f0455e;
  --accent-3:#ffc847;
  --accent-cool:#4ecdc4;
  --success:#4ecdc4;
  --shadow-hard:0 0 0 2px var(--ink);
  --shadow-soft:0 1px 0 var(--line-soft);
}

/* font tweak overrides */
body[data-font="rubik"]{--font-display:'Rubik','Heebo',system-ui,sans-serif;}
body[data-font="assistant"]{--font-display:'Assistant','Heebo',system-ui,sans-serif;}
body[data-density="compact"]{--space:.78;}
body[data-density="comfy"]{--space:1.18;}

/* ──────────────────────────────────────────────────────────────
   BACKGROUND PATTERNS (optional, per variation)
   ──────────────────────────────────────────────────────────── */
body[data-pattern="on"][data-variation="poster"]::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(var(--line-soft) 1px, transparent 1.2px);
  background-size:14px 14px;
  background-position:0 0;
  mask-image:linear-gradient(135deg, transparent 0%, transparent 50%, #000 95%);
  opacity:.6;
}
body[data-pattern="on"][data-variation="sticker"]::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(135deg, var(--line-softer) 0 1px, transparent 1px 9px),
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.08), transparent 60%);
  opacity:.9;
}
body[data-pattern="on"][data-variation="telecast"]::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:repeating-linear-gradient(0deg, var(--line-softer) 0 1px, transparent 1px 3px);
  opacity:.55;
}

/* ──────────────────────────────────────────────────────────────
   SHELL & SHARED PRIMITIVES
   ──────────────────────────────────────────────────────────── */
.app{position:relative;z-index:1;min-height:100vh;}
.shell{max-width:1180px;margin:0 auto;padding:calc(24px * var(--space)) calc(24px * var(--space)) 80px;}

/* ============ HEADER ============ */
.hdr{
  display:flex;align-items:center;gap:14px;
  padding:calc(14px * var(--space)) 0 calc(18px * var(--space));
  border-bottom:2px solid var(--line);
  margin-bottom:calc(24px * var(--space));
  position:relative;
}
body[data-variation="poster"] .hdr{border-bottom:4px solid var(--line);}
body[data-variation="telecast"] .hdr{
  border-bottom:0;
  background:linear-gradient(90deg, var(--accent) 0 30%, var(--ink) 30% 40%, var(--accent-2) 40% 70%, var(--ink) 70% 80%, var(--accent-3) 80% 100%);
  padding:0;margin-bottom:calc(24px * var(--space));
}
body[data-variation="telecast"] .hdr-inner{
  background:var(--bg);
  display:flex;align-items:center;gap:14px;width:100%;
  padding:calc(14px * var(--space)) calc(16px * var(--space));
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
}
body[data-variation="telecast"] .hdr{flex-direction:column;align-items:stretch;}
body[data-variation="telecast"] .hdr::before{
  content:"";display:block;height:8px;
}

.brand{display:flex;align-items:baseline;gap:10px;font-family:var(--font-display);}
.brand-mark{
  font-weight:900;font-size:1.5rem;letter-spacing:-.5px;
  color:var(--ink);
}
.brand-mark .y{color:var(--accent);}
.brand-mark .dot{color:var(--accent-2);}
body[data-variation="poster"] .brand-mark{
  text-transform:lowercase;
  font-family:'Bowlby One SC', var(--font-display);
  letter-spacing:0;
  font-size:1.7rem;
}
body[data-variation="telecast"] .brand-mark{
  font-style:italic;
  font-weight:900;
}

.brand-sub{
  font-size:.7rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--ink-3);
  font-family:var(--font-mono);
}

.hdr-spacer{flex:1;}

.hdr-nav{display:flex;align-items:center;gap:6px;}
.nav-btn{
  appearance:none;background:transparent;border:1.5px solid transparent;
  font-family:var(--font-display);font-weight:700;font-size:.82rem;
  color:var(--ink-2);cursor:pointer;
  padding:7px 12px;border-radius:var(--r);
  transition:all .15s;
}
.nav-btn:hover{color:var(--ink);background:var(--line-softer);}
.nav-btn.active{color:var(--ink);background:var(--ink);color:var(--bg);}
body[data-variation="poster"] .nav-btn.active{
  background:var(--accent);color:#fff;
  box-shadow:var(--shadow-soft);
}
body[data-variation="sticker"] .nav-btn{
  border-radius:24px;
}
body[data-variation="sticker"] .nav-btn.active{
  background:var(--accent);color:#fff;
}
body[data-variation="telecast"] .nav-btn{border-radius:0;}
body[data-variation="telecast"] .nav-btn.active{background:var(--accent);color:#fff;}

.hdr-icon-btn{
  appearance:none;background:transparent;border:1.5px solid var(--line);
  width:34px;height:34px;cursor:pointer;
  border-radius:var(--r);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink);font-size:.95rem;
  transition:all .15s;
}
body[data-variation="sticker"] .hdr-icon-btn{border-radius:50%;}
.hdr-icon-btn:hover{background:var(--ink);color:var(--bg);}

.user-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px 6px 6px;
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:24px;
  font-size:.82rem;font-weight:700;color:var(--ink);
  cursor:default;
}
.user-chip .avatar{
  width:24px;height:24px;border-radius:50%;
  background:var(--accent);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:900;letter-spacing:0;
}
body[data-variation="telecast"] .user-chip{border-radius:0;}
body[data-variation="telecast"] .user-chip .avatar{border-radius:0;}

/* ============ KICKERS / SECTION HEADS ============ */
.kicker{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);
  font-size:.72rem;font-weight:500;letter-spacing:2px;text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:calc(10px * var(--space));
}
.kicker::before{content:"";display:block;width:18px;height:2px;background:var(--accent);}
body[data-variation="poster"] .kicker::before{height:3px;width:24px;}

.h-title{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(1.4rem, 2.4vw, 1.9rem);
  letter-spacing:-.5px;
  line-height:1.05;
  color:var(--ink);
  margin-bottom:calc(6px * var(--space));
}
body[data-variation="poster"] .h-title{
  text-transform:uppercase;
  letter-spacing:-.3px;
}
body[data-variation="telecast"] .h-title{font-style:italic;letter-spacing:-1px;}

.h-sub{font-size:.92rem;color:var(--ink-2);font-weight:500;line-height:1.4;}

/* ============ CARDS ============ */
.card{
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  position:relative;
}
body[data-variation="poster"] .card{
  border-radius:0;
  border-width:2px;
  box-shadow:var(--shadow-soft);
}
body[data-variation="sticker"] .card{
  border-radius:14px;
  border-width:1.5px;
  box-shadow:var(--shadow-soft);
}
body[data-variation="sticker"] .card::after{
  content:"";position:absolute;inset:6px;border:1px dashed var(--line-soft);
  border-radius:9px;pointer-events:none;
}
body[data-variation="telecast"] .card{
  border-radius:0;border-width:2px;
}

.card-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(12px * var(--space)) calc(16px * var(--space));
  border-bottom:1.5px solid var(--line-soft);
  font-family:var(--font-mono);
  font-size:.7rem;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--ink-3);
  background:var(--paper-2);
  position:relative;
}
body[data-variation="poster"] .card-hd{
  background:var(--ink);color:var(--paper);
  border-bottom:2px solid var(--line);
}
body[data-variation="telecast"] .card-hd{
  background:var(--accent);color:#fff;
  border-bottom:2px solid var(--ink);
  letter-spacing:2px;
}

.card-body{padding:calc(16px * var(--space)) calc(18px * var(--space));position:relative;z-index:1;}

/* ============ GRID ============ */
.grid{display:grid;gap:calc(20px * var(--space));}
.grid-home{grid-template-columns:1fr;}
@media(min-width:920px){
  .grid-home{grid-template-columns:1.45fr .95fr;align-items:start;}
}

/* ════════════════════════════════════════════════
   LEADER HERO
═══════════════════════════════════════════════ */
.leader{
  position:relative;
  background:var(--paper);
  border:2px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
body[data-variation="poster"] .leader{border-radius:0;border-width:3px;box-shadow:var(--shadow-hard);}
body[data-variation="sticker"] .leader{border-radius:18px;}
body[data-variation="sticker"] .leader::after{
  content:"";position:absolute;inset:8px;border:1.5px dashed var(--line-soft);border-radius:13px;pointer-events:none;z-index:2;
}
body[data-variation="telecast"] .leader{border-radius:0;}

.leader-banner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 18px;
  background:var(--ink);color:var(--bg);
  font-family:var(--font-mono);
  font-size:.7rem;font-weight:500;letter-spacing:2px;text-transform:uppercase;
}
.leader-banner .matchday{display:flex;align-items:center;gap:8px;}
.leader-banner .pulse{
  width:8px;height:8px;border-radius:50%;background:var(--accent-3);
  box-shadow:0 0 0 0 var(--accent-3);
  animation:pulse 1.6s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 var(--accent-3);}
  70%{box-shadow:0 0 0 10px transparent;}
  100%{box-shadow:0 0 0 0 transparent;}
}
body[data-variation="poster"] .leader-banner{background:var(--accent-2);}
body[data-variation="telecast"] .leader-banner{
  background:linear-gradient(90deg, var(--accent) 0 40%, var(--ink) 40% 60%, var(--accent-2) 60% 100%);
  color:#fff;
}

.leader-body{padding:calc(22px * var(--space)) calc(24px * var(--space));position:relative;}

.leader-row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
}
.crown{
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.crown-num{
  font-family:var(--font-display);font-weight:900;
  font-size:3.5rem;line-height:1;color:var(--accent);
  font-variant-numeric:tabular-nums;
}
body[data-variation="poster"] .crown-num{font-family:'Bowlby One SC',var(--font-display);}
body[data-variation="telecast"] .crown-num{font-style:italic;}
.crown-lbl{
  font-family:var(--font-mono);
  font-size:.65rem;font-weight:500;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--ink-3);
}

.leader-who{display:flex;flex-direction:column;gap:2px;}
.leader-name{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(1.6rem,3vw,2.4rem);
  letter-spacing:-.5px;line-height:1.05;
  color:var(--ink);
}
body[data-variation="poster"] .leader-name{text-transform:uppercase;}
body[data-variation="telecast"] .leader-name{font-style:italic;}
.leader-handle{
  font-family:var(--font-mono);font-size:.78rem;font-weight:500;
  color:var(--ink-3);letter-spacing:.5px;
}

.leader-pts{
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;
}
.pts-num{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(2.6rem,5vw,3.8rem);
  line-height:.95;letter-spacing:-2px;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
body[data-variation="telecast"] .pts-num{font-style:italic;color:var(--accent);}
.pts-lbl{
  font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:2px;
  text-transform:uppercase;color:var(--ink-3);
}

.leader-chase{
  margin-top:calc(20px * var(--space));
  padding-top:calc(16px * var(--space));
  border-top:1.5px dashed var(--line-soft);
  display:flex;flex-direction:column;gap:8px;
}
.chase-lbl{
  font-family:var(--font-mono);font-size:.65rem;font-weight:500;letter-spacing:2px;
  text-transform:uppercase;color:var(--ink-3);
  margin-bottom:4px;
}
.chase-row{
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;
  padding:6px 0;
}
.chase-rank{
  font-family:var(--font-mono);font-weight:500;font-size:.78rem;
  color:var(--ink-3);width:24px;text-align:left;
}
.chase-name{
  font-weight:700;font-size:.95rem;color:var(--ink);
}
.chase-gap{
  font-family:var(--font-mono);font-weight:500;font-size:.75rem;
  color:var(--accent-2);
}
.chase-pts{
  font-family:var(--font-display);font-weight:800;font-size:1.1rem;
  color:var(--ink);font-variant-numeric:tabular-nums;
  min-width:32px;text-align:left;
}

/* ════════════════════════════════════════════════
   MY POSITION (personal leaderboard slice)
═══════════════════════════════════════════════ */
.me-card{
  background:var(--paper);
  border:2px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  position:relative;
}
body[data-variation="poster"] .me-card{border-radius:0;border-width:3px;box-shadow:var(--shadow-hard);}
body[data-variation="sticker"] .me-card{border-radius:18px;}
body[data-variation="telecast"] .me-card{border-radius:0;}

.me-tab{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;background:var(--accent);color:#fff;
  font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:2px;
  text-transform:uppercase;
}
body[data-variation="sticker"] .me-tab{
  background:var(--accent);
}

.me-rows{padding:calc(6px * var(--space)) 0;}
.me-row{
  display:grid;grid-template-columns:34px 1fr auto auto;
  align-items:center;gap:12px;
  padding:calc(11px * var(--space)) calc(18px * var(--space));
  border-bottom:1px solid var(--line-softer);
  transition:background .15s;
}
.me-row:last-child{border-bottom:none;}
.me-rank{
  font-family:var(--font-mono);font-weight:500;font-size:.85rem;
  color:var(--ink-3);text-align:center;
  font-variant-numeric:tabular-nums;
}
.me-name{
  font-weight:700;font-size:.95rem;color:var(--ink);
  display:flex;align-items:center;gap:8px;
}
.me-name .badge-you{
  font-family:var(--font-mono);font-size:.6rem;font-weight:500;letter-spacing:1.5px;
  text-transform:uppercase;color:#fff;background:var(--accent-2);
  padding:2px 6px;border-radius:3px;
}
.me-row.is-me{background:linear-gradient(90deg, var(--line-softer), transparent 80%);}
.me-row.is-me .me-rank{color:var(--accent);font-weight:700;}
.me-row.is-me .me-name{color:var(--ink);font-weight:900;}
.me-trend{
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.5px;
}
.me-trend.up{color:var(--success);}
.me-trend.dn{color:var(--accent-2);}
.me-trend.eq{color:var(--ink-3);}
.me-pts{
  font-family:var(--font-display);font-weight:800;font-size:1.05rem;
  color:var(--ink);font-variant-numeric:tabular-nums;
  min-width:36px;text-align:left;
}

.me-foot{
  padding:14px 18px;
  border-top:1.5px dashed var(--line-soft);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.me-foot-lbl{font-family:var(--font-mono);font-size:.68rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-3);}
.me-foot-link{
  appearance:none;background:transparent;border:none;cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:.82rem;
  color:var(--accent);text-decoration:underline;text-underline-offset:3px;
}

/* ════════════════════════════════════════════════
   ACTIVITY FEED
═══════════════════════════════════════════════ */
.feed{
  background:var(--paper);
  border:2px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
body[data-variation="poster"] .feed{border-radius:0;border-width:2px;}
body[data-variation="sticker"] .feed{border-radius:14px;}
body[data-variation="telecast"] .feed{border-radius:0;}

.feed-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;border-bottom:1.5px solid var(--line-soft);
  background:var(--paper-2);
  font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:2px;
  text-transform:uppercase;color:var(--ink-3);
}
body[data-variation="poster"] .feed-hd{background:var(--ink);color:var(--paper);border-bottom:2px solid var(--line);}
body[data-variation="telecast"] .feed-hd{background:var(--accent-2);color:#fff;border-bottom:2px solid var(--ink);}
.feed-live{display:flex;align-items:center;gap:6px;color:var(--success);font-weight:700;}
body[data-variation="poster"] .feed-live, body[data-variation="telecast"] .feed-live{color:#fff;}
.feed-live::before{
  content:"";width:7px;height:7px;border-radius:50%;background:currentColor;
  animation:blink 1.4s infinite;
}
@keyframes blink{50%{opacity:.35;}}

.feed-list{padding:6px 0;max-height:520px;overflow:auto;}
.feed-list::-webkit-scrollbar{width:6px;}
.feed-list::-webkit-scrollbar-thumb{background:var(--line-soft);border-radius:3px;}

.feed-item{
  display:grid;grid-template-columns:auto 1fr;gap:12px;
  padding:calc(11px * var(--space)) calc(16px * var(--space));
  border-bottom:1px solid var(--line-softer);
  animation:slideIn .35s ease;
}
@keyframes slideIn{from{opacity:0;transform:translateX(8px);}}
.feed-item:last-child{border-bottom:none;}
.feed-avatar{
  width:32px;height:32px;border-radius:50%;
  background:var(--accent);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:900;flex-shrink:0;
}
body[data-variation="sticker"] .feed-avatar{
  border:1.5px solid var(--line);
}
body[data-variation="telecast"] .feed-avatar{border-radius:0;}
.feed-body{display:flex;flex-direction:column;gap:3px;min-width:0;}
.feed-line{font-size:.88rem;line-height:1.35;color:var(--ink);}
.feed-line .who{font-weight:800;}
.feed-line .verb{color:var(--ink-3);}
.feed-line .score{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-weight:600;
  background:var(--paper-2);
  padding:1px 8px;border-radius:4px;border:1px solid var(--line-soft);
  font-size:.82rem;
  vertical-align:2px;
}
.feed-meta{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:.7rem;color:var(--ink-3);
}
.feed-meta .dot{color:var(--line-soft);}

/* ════════════════════════════════════════════════
   FIXTURES
═══════════════════════════════════════════════ */
.fixtures{
  background:var(--paper);
  border:2px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  margin-top:calc(20px * var(--space));
}
body[data-variation="poster"] .fixtures{border-radius:0;border-width:2px;}
body[data-variation="sticker"] .fixtures{border-radius:14px;}
body[data-variation="telecast"] .fixtures{border-radius:0;}

.fx-day{
  padding:10px 18px;
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:2px;
  text-transform:uppercase;color:var(--ink-3);
  background:var(--paper-2);
  border-bottom:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.fx-day .fx-date-num{
  font-family:var(--font-display);font-weight:900;color:var(--ink);
  font-size:.85rem;letter-spacing:0;
}

.fx-row{
  display:grid;grid-template-columns:64px 1fr 56px 1fr;
  align-items:center;gap:12px;
  padding:calc(13px * var(--space)) calc(18px * var(--space));
  border-bottom:1px solid var(--line-softer);
  cursor:pointer;
  transition:background .12s;
}
.fx-row:last-child{border-bottom:none;}
.fx-row:hover{background:var(--paper-2);}
.fx-row.is-next{
  background:linear-gradient(90deg, var(--line-softer), transparent 80%);
  position:relative;
}
.fx-row.is-next::before{
  content:"";position:absolute;right:0;top:0;bottom:0;width:3px;background:var(--accent);
}

.fx-time{
  font-family:var(--font-mono);font-weight:600;font-size:.95rem;
  color:var(--ink);text-align:center;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.5px;
}
.fx-time .fx-tag{
  display:block;font-size:.6rem;font-weight:500;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--ink-3);margin-top:2px;
}
.fx-row.is-next .fx-time{color:var(--accent);}
.fx-team{
  display:flex;align-items:center;gap:10px;font-weight:700;font-size:.95rem;
}
.fx-team.h{justify-content:flex-end;}
.fx-team.a{justify-content:flex-start;}
.fx-flag{font-size:1.6rem;line-height:1;flex-shrink:0;}
.fx-logo{width:28px;height:28px;object-fit:contain;display:block;}
.fx-vs{
  text-align:center;
  font-family:var(--font-mono);font-size:.65rem;font-weight:500;letter-spacing:1.5px;
  color:var(--ink-3);text-transform:uppercase;
}
.fx-score{
  text-align:center;font-family:var(--font-display);font-weight:900;
  font-size:1.05rem;color:var(--accent);font-variant-numeric:tabular-nums;
  letter-spacing:1px;
}

/* ════════════════════════════════════════════════
   PREDICT SCREEN
═══════════════════════════════════════════════ */
.predict-grid{
  display:grid;grid-template-columns:1fr;gap:calc(18px * var(--space));
}
@media(min-width:920px){
  .predict-grid{grid-template-columns:1fr 1fr;}
}

.predict-card{
  background:var(--paper);
  border:2px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  display:flex;flex-direction:column;
}
body[data-variation="poster"] .predict-card{border-radius:0;border-width:3px;box-shadow:var(--shadow-soft);}
body[data-variation="sticker"] .predict-card{border-radius:18px;}
body[data-variation="telecast"] .predict-card{border-radius:0;}

.pc-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;border-bottom:1.5px solid var(--line);
  background:var(--paper-2);
  font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:2px;
  text-transform:uppercase;color:var(--ink-3);
}
.pc-hd .pc-stage{color:var(--ink);font-weight:700;}
.pc-hd .pc-when{display:flex;align-items:center;gap:6px;color:var(--accent);}
body[data-variation="poster"] .pc-hd{background:var(--ink);color:var(--paper);}
body[data-variation="poster"] .pc-hd .pc-stage,body[data-variation="poster"] .pc-hd .pc-when{color:var(--paper);}
body[data-variation="poster"] .pc-hd .pc-when{color:var(--accent-3);}
body[data-variation="telecast"] .pc-hd{background:var(--accent);color:#fff;}
body[data-variation="telecast"] .pc-hd .pc-stage,body[data-variation="telecast"] .pc-hd .pc-when{color:#fff;}

.pc-body{padding:calc(20px * var(--space)) calc(20px * var(--space));}

.matchup{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  margin-bottom:calc(18px * var(--space));
}
.matchup-team{display:flex;flex-direction:column;align-items:center;gap:6px;}
.matchup-flag{font-size:3rem;line-height:1;filter:drop-shadow(0 2px 0 var(--line-soft));}
.matchup-logo{width:56px;height:56px;object-fit:contain;display:block;}
.matchup-name{
  font-family:var(--font-display);font-weight:900;
  font-size:1.05rem;color:var(--ink);text-align:center;letter-spacing:-.3px;
}
body[data-variation="poster"] .matchup-name{text-transform:uppercase;}
.matchup-code{
  font-family:var(--font-mono);font-size:.65rem;letter-spacing:1.5px;color:var(--ink-3);
}

.matchup-vs{
  font-family:var(--font-display);font-weight:900;font-size:1.1rem;
  color:var(--ink-3);letter-spacing:1px;
}

/* Score picker */
.scorebox{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;
  background:var(--bg-2);
  border:1.5px solid var(--line-soft);
  border-radius:var(--r-lg);
  padding:calc(14px * var(--space)) calc(18px * var(--space));
  margin-bottom:calc(14px * var(--space));
}
body[data-variation="poster"] .scorebox{border-radius:0;border-width:2px;}
body[data-variation="sticker"] .scorebox{border-radius:14px;}
body[data-variation="telecast"] .scorebox{border-radius:0;background:var(--ink);border-color:var(--ink);}
body[data-variation="telecast"] .scorebox .stepper-num{color:var(--bg);}
body[data-variation="telecast"] .scorebox .stepper-btn{color:var(--bg);border-color:var(--bg);}
body[data-variation="telecast"] .scorebox .stepper-btn:hover{background:var(--bg);color:var(--ink);}
body[data-variation="telecast"] .scorebox .score-dash{color:var(--bg);}

.stepper{display:flex;flex-direction:column;align-items:center;gap:8px;}
.stepper-num{
  font-family:var(--font-display);font-weight:900;
  font-size:3.6rem;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;
  min-width:60px;text-align:center;
}
body[data-variation="poster"] .stepper-num{font-family:'Bowlby One SC',var(--font-display);}
body[data-variation="telecast"] .stepper-num{font-style:italic;}
.stepper-btns{display:flex;gap:8px;}
.stepper-btn{
  appearance:none;background:transparent;border:1.5px solid var(--ink);
  width:34px;height:34px;border-radius:var(--r);
  cursor:pointer;color:var(--ink);
  font-family:var(--font-display);font-weight:900;font-size:1.2rem;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  transition:all .12s;
}
body[data-variation="sticker"] .stepper-btn{border-radius:50%;}
body[data-variation="telecast"] .stepper-btn{border-radius:0;}
.stepper-btn:hover{background:var(--ink);color:var(--bg);}
.stepper-btn:active{transform:scale(.95);}
.score-dash{
  font-family:var(--font-display);font-weight:900;font-size:2.6rem;color:var(--ink-3);
  line-height:1;
}

/* odds */
.odds{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:calc(14px * var(--space));}
.odds-chip{
  padding:8px 6px;text-align:center;
  border:1.5px solid var(--line-soft);
  border-radius:var(--r);
  background:var(--paper-2);
  cursor:default;
}
body[data-variation="sticker"] .odds-chip{border-radius:10px;}
body[data-variation="telecast"] .odds-chip{border-radius:0;}
.odds-chip.active{
  border-color:var(--accent);
  background:color-mix(in oklch, var(--accent) 12%, var(--paper));
}
.odds-lbl{font-family:var(--font-mono);font-size:.62rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-3);}
.odds-mul{font-family:var(--font-display);font-weight:900;font-size:1.1rem;color:var(--ink);}
.odds-chip.active .odds-mul{color:var(--accent);}
.odds-prob{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-3);margin-top:2px;}

.btn-save{
  appearance:none;width:100%;border:1.5px solid var(--ink);
  background:var(--ink);color:var(--bg);
  padding:13px;border-radius:var(--r);
  font-family:var(--font-display);font-weight:800;font-size:.95rem;letter-spacing:.5px;
  cursor:pointer;transition:transform .12s;
}
body[data-variation="poster"] .btn-save{
  background:var(--accent);color:#fff;border-color:var(--accent);
  border-radius:0;text-transform:uppercase;letter-spacing:1px;
  box-shadow:var(--shadow-soft);
}
body[data-variation="sticker"] .btn-save{
  border-radius:24px;background:var(--accent);border-color:var(--accent);color:#fff;
}
body[data-variation="telecast"] .btn-save{border-radius:0;}
.btn-save:hover{transform:translateY(-1px);}
.btn-save:active{transform:translateY(0);}
.btn-save.saved{
  background:var(--success);border-color:var(--success);color:#fff;
}

.pred-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:24px;
  background:color-mix(in oklch, var(--success) 14%, var(--paper));
  border:1.5px solid var(--success);
  font-family:var(--font-mono);font-size:.72rem;font-weight:600;color:var(--success);
  letter-spacing:.5px;text-transform:uppercase;
  margin-bottom:calc(10px * var(--space));
}
body[data-variation="telecast"] .pred-pill{border-radius:0;}

/* ════════════════════════════════════════════════
   AUTH (login / register)
═══════════════════════════════════════════════ */
.auth-wrap{
  min-height:100vh;
  display:grid;grid-template-columns:1fr;
  align-items:stretch;
  position:relative;z-index:1;
}
@media(min-width:880px){
  .auth-wrap{grid-template-columns:1fr 1.05fr;}
}

.auth-art{
  display:none;position:relative;overflow:hidden;
  background:var(--ink);color:var(--bg);
  padding:48px;
}
@media(min-width:880px){.auth-art{display:flex;flex-direction:column;justify-content:space-between;}}
body[data-variation="poster"] .auth-art{
  background:var(--accent);color:#fff;
}
body[data-variation="poster"] .auth-art .auth-art-mark{color:#fff;}
body[data-variation="telecast"] .auth-art{
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent) 50%, var(--accent-2) 50%, var(--accent-2) 100%);
}
body[data-variation="sticker"] .auth-art{
  background:var(--accent-cool);
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 6px, transparent 6px 16px);
}

.auth-art-tag{
  font-family:var(--font-mono);
  font-size:.72rem;font-weight:500;letter-spacing:2.5px;text-transform:uppercase;
  opacity:.7;
}
.auth-art-mark{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(3rem, 8vw, 6.5rem);
  line-height:.92;letter-spacing:-3px;
}
body[data-variation="poster"] .auth-art-mark{font-family:'Bowlby One SC',var(--font-display);letter-spacing:0;text-transform:lowercase;}
body[data-variation="telecast"] .auth-art-mark{font-style:italic;}

.auth-art-tagline{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.1rem,2vw,1.4rem);line-height:1.3;
  margin-top:18px;max-width:24ch;opacity:.92;
}
.auth-art-foot{
  display:flex;flex-direction:column;gap:8px;
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.5px;opacity:.8;
}
.auth-art-foot strong{font-weight:700;}
.auth-art-foot .row{display:flex;align-items:center;gap:10px;}
.auth-art-foot .flag{font-size:1.3rem;}

.auth-form-wrap{
  display:flex;align-items:center;justify-content:center;
  padding:40px 24px;
  background:var(--bg);
}
.auth-form{
  width:100%;max-width:380px;
}
.auth-form .brand-mark{font-size:2rem;margin-bottom:6px;}
.auth-form .auth-h1{
  font-family:var(--font-display);font-weight:900;font-size:1.7rem;
  letter-spacing:-.5px;margin-bottom:6px;color:var(--ink);
}
body[data-variation="poster"] .auth-form .auth-h1{text-transform:uppercase;}
body[data-variation="telecast"] .auth-form .auth-h1{font-style:italic;}
.auth-form .auth-sub{
  font-size:.92rem;color:var(--ink-2);margin-bottom:28px;line-height:1.4;
}
.field{margin-bottom:14px;}
.field-lbl{
  display:block;font-family:var(--font-mono);font-size:.7rem;font-weight:500;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px;
}
.field-in{
  width:100%;padding:12px 14px;
  font-family:var(--font-display);font-size:.95rem;font-weight:500;
  background:var(--paper);color:var(--ink);
  border:1.5px solid var(--line);
  border-radius:var(--r);
  transition:all .15s;
}
body[data-variation="sticker"] .field-in{border-radius:10px;}
body[data-variation="telecast"] .field-in{border-radius:0;}
.field-in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklch, var(--accent) 22%, transparent);}
.field-hint{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-3);margin-top:4px;}

.auth-btn{
  appearance:none;width:100%;
  padding:13px;border:1.5px solid var(--accent);
  background:var(--accent);color:#fff;
  font-family:var(--font-display);font-weight:800;font-size:.98rem;letter-spacing:.5px;
  border-radius:var(--r);cursor:pointer;transition:all .15s;
  margin-top:4px;
}
body[data-variation="poster"] .auth-btn{border-radius:0;text-transform:uppercase;letter-spacing:1px;box-shadow:var(--shadow-soft);}
body[data-variation="sticker"] .auth-btn{border-radius:24px;}
body[data-variation="telecast"] .auth-btn{border-radius:0;}
.auth-btn:hover{filter:brightness(.95);}

.auth-divider{
  display:flex;align-items:center;gap:10px;
  margin:22px 0;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:1.5px;
  color:var(--ink-3);text-transform:uppercase;
}
.auth-divider::before,.auth-divider::after{
  content:"";flex:1;height:1px;background:var(--line-soft);
}

.auth-foot{
  text-align:center;font-size:.88rem;color:var(--ink-2);
}
.auth-foot a{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px;}

/* ════════════════════════════════════════════════
   ENV BANNER (sticker — variation B subtle banner)
═══════════════════════════════════════════════ */
.tournament-banner{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--ink-2);
  margin-bottom:calc(8px * var(--space));
}
.tournament-banner .flag-strip{
  display:flex;gap:2px;font-size:.95rem;letter-spacing:0;
}

/* ════════════════════════════════════════════════
   MISC
═══════════════════════════════════════════════ */
.empty{padding:30px;text-align:center;color:var(--ink-3);font-family:var(--font-mono);font-size:.85rem;}

@media(max-width:640px){
  .shell{padding:14px 14px 80px;}
  .leader-row{grid-template-columns:auto 1fr;gap:14px;}
  .leader-pts{grid-column:1/-1;align-items:flex-start;margin-top:8px;}
  .pts-num{font-size:2.6rem;}
  .crown-num{font-size:2.8rem;}
  .matchup{gap:10px;}
  .stepper-num{font-size:2.8rem;min-width:48px;}
  .matchup-flag{font-size:2.4rem;}
  .auth-art{display:none !important;}
}

/* hdr-inner: display:contents for non-telecast so it doesn't break flex layout */
.hdr-inner { display: contents; }
body[data-variation="telecast"] .hdr-inner {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: calc(14px * var(--space)) calc(16px * var(--space));
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  background: var(--bg);
}

/* Variation switcher pill (bottom-left) */
.var-switcher {
  position: fixed; bottom: 20px; right: 20px; z-index: 200;
  display: flex; align-items: center; gap: 8px;
  background: var(--paper); border: 1.5px solid var(--line);
  border-radius: 24px; padding: 6px 14px 6px 10px;
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500;
  letter-spacing: 1px; text-transform: uppercase; color: var(--ink-2);
  cursor: pointer; transition: all .15s; box-shadow: var(--shadow-soft);
}
.var-switcher:hover { color: var(--ink); border-color: var(--accent); }
.var-switcher .vs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

/* Toast */
#toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(90px);
  background: var(--paper); border: 1.5px solid var(--line);
  color: var(--ink); border-radius: 24px; padding: 10px 22px;
  font-size: .83rem; font-weight: 600; font-family: var(--font-display);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
  z-index: 99; white-space: nowrap; box-shadow: var(--shadow-soft);
}
#toast.show { transform: translateX(-50%) translateY(0); }

/* Admin section */
.admin-grid { display: flex; flex-direction: column; gap: calc(16px * var(--space)); }
.admin-card { background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.admin-card .card-hd { background: var(--paper-2); }
body[data-variation="poster"] .admin-card { border-radius: 0; border-width: 2px; box-shadow: var(--shadow-soft); }
body[data-variation="sticker"] .admin-card { border-radius: 14px; }
body[data-variation="telecast"] .admin-card { border-radius: 0; }
.admin-actions { padding: calc(12px * var(--space)) calc(16px * var(--space)); display: flex; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--line-soft); }
.admin-status { padding: 8px 16px; font-size: .75rem; color: var(--ink-3); font-family: var(--font-mono); }
.admin-btn {
  appearance: none; padding: 9px 16px;
  background: var(--ink); color: var(--bg);
  border: 1.5px solid var(--ink);
  font-family: var(--font-display); font-size: .82rem; font-weight: 700;
  border-radius: var(--r); cursor: pointer; transition: all .15s;
}
body[data-variation="poster"] .admin-btn { border-radius: 0; box-shadow: var(--shadow-soft); }
body[data-variation="sticker"] .admin-btn { border-radius: 24px; }
body[data-variation="telecast"] .admin-btn { border-radius: 0; }
.admin-btn:hover { opacity: .85; }
.admin-btn.sec { background: transparent; color: var(--ink); }
.admin-btn.sec:hover { background: var(--line-softer); }
.u-row { display: flex; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--line-softer); gap: 10px; }
.u-row:last-child { border-bottom: none; }
.u-name { font-weight: 700; font-size: .9rem; color: var(--ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.u-email { font-size: .7rem; color: var(--ink-3); font-family: var(--font-mono); margin-top: 2px; }
.u-btn {
  appearance: none; background: transparent; border: 1.5px solid var(--line-soft);
  border-radius: var(--r); padding: 4px 10px;
  font-family: var(--font-display); font-size: .75rem; font-weight: 600; color: var(--ink-2);
  cursor: pointer; transition: all .15s; flex-shrink: 0;
}
.u-btn:hover { border-color: var(--accent); color: var(--accent); }
.u-btn.del { color: var(--accent-2); border-color: rgba(200,50,50,.2); }
.u-btn.del:hover { background: rgba(200,50,50,.08); border-color: var(--accent-2); }
body[data-variation="poster"] .u-btn { border-radius: 0; }
body[data-variation="sticker"] .u-btn { border-radius: 20px; }
body[data-variation="telecast"] .u-btn { border-radius: 0; }

/* Pager */
.pager { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-top: 1px solid var(--line-soft); gap: 10px; }
.pager-btn {
  appearance: none; background: var(--paper-2); border: 1.5px solid var(--line-soft);
  color: var(--ink); border-radius: var(--r); padding: 7px 16px;
  font-family: var(--font-display); font-size: .8rem; font-weight: 700; cursor: pointer; transition: all .15s;
}
.pager-btn:hover:not(:disabled) { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pager-btn:disabled { opacity: .3; cursor: default; }
.pager-info { font-family: var(--font-mono); font-size: .7rem; color: var(--ink-3); letter-spacing: .5px; }
body[data-variation="poster"] .pager-btn { border-radius: 0; }
body[data-variation="sticker"] .pager-btn { border-radius: 24px; }
body[data-variation="telecast"] .pager-btn { border-radius: 0; }