/* WLT v2.0.0 fan features: header member link, member forms, account, match vote card, predictors ranking.
   Uses the tokens in app.css. The vote card is ink in both themes (like the header and scoreboard). */

:root{
  --fan-ok:#4cd88a; --fan-ok-bg:#123524;
  --fan-warn:#ffd27a; --fan-warn-bg:#3a2c0a;
  --fan-bad:#ffb4b1; --fan-bad-bg:#3a1e1e; --fan-bad-line:#e5322d;
  --fan-btn-2:#262a35;
  --fan-silver:#d6d8de; --fan-bronze:#b07800;
}
:root{--fan-ok-t:#13703d;--fan-bad-t:#b42318;--fan-warn-t:#8a5a00}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--fan-ok-t:#4cd88a;--fan-bad-t:#ff6b66;--fan-warn-t:#ffd27a}}
:root[data-theme="dark"]{--fan-ok-t:#4cd88a;--fan-bad-t:#ff6b66;--fan-warn-t:#ffd27a}

/* ---------- header member link ---------- */
.mh-member,.mh-join{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:600;text-decoration:none;white-space:nowrap;flex:none}
.mh-member{background:var(--ink-2);border:1px solid var(--ink-line);color:var(--ink-text)}
.mh-member:hover{border-color:#454a57}
.mh-member svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
.mh-join{background:var(--gold);color:var(--on-gold)}
.mh-join:hover{background:#ffc233}
.mh-member.is-in{padding:0 12px 0 3px}
.mh-av{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--gold);color:var(--on-gold);font-weight:800;font-size:var(--fs-sm)}
.mh-mtext{max-width:12ch;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){
  .mh-join{display:none}
  .mh-member{width:34px;padding:0;justify-content:center}
  .mh-member.is-in{width:34px;padding:0}
  .mh-mtext{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* Narrow phones: tighten the header so logo, member link, languages and theme stay on one row. */
@media (max-width:430px){
  .mh-row{gap:8px}
  .mh-tools{gap:6px}
  .mh-tools .seg a{padding:4px 7px}
  .mh-member,.mh-member.is-in{width:32px;height:32px}
  .mh-av{width:24px;height:24px}
}
@media (max-width:374px){
  .brand img{height:36px}
  .mh-tools .icon-btn{width:32px;height:32px}
  .mh-tools .seg a{padding:4px 6px}
}

/* ---------- member forms (sign-up, login, reset, account) ---------- */
.ma{margin-top:var(--sp-5);display:grid;grid-template-columns:1fr;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
@media (min-width:900px){.ma{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.ma-aside{position:relative;overflow:hidden;background:var(--gold);color:var(--on-gold);padding:var(--sp-6) var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-5)}
@media (min-width:900px){.ma-aside{padding:56px 48px}}
@media (max-width:899px){.ma-aside .ma-court{width:260px;right:-110px;bottom:-120px}}
.ma-court{position:absolute;right:-170px;bottom:-170px;width:440px;height:auto;opacity:.18;color:var(--on-gold);pointer-events:none}
.ma-court *{stroke-dasharray:1;stroke-dashoffset:1;animation:fan-draw 1.8s cubic-bezier(.65,0,.35,1) forwards}
.ma-logo{position:relative;width:72px;height:72px;object-fit:contain;background:var(--ink);padding:8px;border-radius:var(--r-sm)}
.ma-copy{position:relative;display:flex;flex-direction:column;gap:var(--sp-4)}
.ma-copy h1{margin:0;font-size:clamp(34px,7vw,60px);line-height:1;font-weight:800;letter-spacing:-.03em}
.ma-copy p{margin:0;font-size:var(--fs-lg);line-height:1.5;max-width:30ch}
.ma-copy ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--sp-4);font-size:var(--fs-lg);line-height:1.45}
.ma-copy li{display:flex;gap:14px;align-items:baseline}
.ma-copy li b{flex:none;min-width:2.2em;font-size:30px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ma-main{padding:var(--sp-5) var(--gutter) var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-5)}
@media (min-width:600px){.ma-main{padding:var(--sp-6) var(--sp-6) var(--sp-7)}}
@media (min-width:900px){.ma-main{padding:48px 56px;justify-content:center}}
.ma-steps{margin:0;padding:0;list-style:none;display:flex;gap:6px;flex-wrap:wrap}
.ma-steps li{display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--surface-2);border:1px solid var(--line);font-size:var(--fs-sm);font-weight:700;border-radius:var(--r-xs)}
.ma-steps li b{font-size:var(--fs-lg)}
.ma-steps li[aria-current]{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.ma-steps li.is-done{background:var(--win);border-color:var(--win);color:#fff}
.ma-facts{display:grid;grid-template-columns:1fr;gap:var(--sp-3);font-size:var(--fs-sm);line-height:1.5;color:var(--muted)}
@media (min-width:600px){.ma-facts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ma-facts div{background:var(--surface-2);border:1px solid var(--line);padding:14px 16px;border-radius:var(--r-sm)}
.ma-facts b{display:block;margin-bottom:4px;color:var(--text)}
.ma-done{gap:var(--sp-4)}
.ma-done p{margin:0;font-size:var(--fs-lg);line-height:1.55}
.ma-ok circle{fill:var(--win)}
.ma-ok path{fill:none;stroke:#fff;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:fan-draw .6s cubic-bezier(.65,0,.35,1) .2s forwards}
.ma-no{color:var(--accent-text);font-size:var(--fs-xl);font-weight:800;letter-spacing:.02em}
@keyframes fan-draw{to{stroke-dashoffset:0}}

.fm{display:flex;flex-direction:column;gap:18px;max-width:720px;width:100%}
.fm h2{margin:0;font-size:clamp(26px,5vw,36px);font-weight:800;line-height:1.15}
.fm-lead{margin:0;color:var(--muted)}
.fm-row2,.fm-row3{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:600px){.fm-row2{grid-template-columns:repeat(2,minmax(0,1fr))}.fm-row3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fm-field{display:flex;flex-direction:column;gap:7px;position:relative;min-width:0}
.fm-lbl{font-size:var(--fs-md);font-weight:700}
.fm-req{margin-left:3px;font-style:normal;color:var(--fan-bad-line)}
.fm-req-note{margin:-6px 0 0;font-size:var(--fs-sm);color:var(--muted)}
.fm-lbl small{font-weight:400;color:var(--muted);font-size:var(--fs-sm)}
.fm-lbl-row{display:flex;justify-content:space-between;gap:var(--sp-3)}
.fm-lbl-row a,.fm-foot a,.fm-err a,.fm-note a,.vc-hint a,.vc-join,.pb-login{color:var(--accent-text);font-weight:600}
.fm-lbl-row a{font-weight:400}
.fm-in{height:52px;width:100%;padding:0 16px;border:2px solid var(--line);background:var(--surface-2);color:var(--text);font:inherit;font-size:17px;border-radius:var(--r-xs);transition:border-color .15s}
select.fm-in{appearance:auto}
.fm-in:focus{outline:none;border-color:var(--gold)}
.fm-in.is-bad{border-color:var(--fan-bad-line)}
.fm-err{font-size:var(--fs-md);color:var(--fan-bad-t);line-height:1.45}
.fm-locked .fm-in{padding-left:44px;color:var(--muted);border-color:transparent;cursor:default}
.fm-locked .fm-in:focus{border-color:transparent}
.fm-locked svg{position:absolute;left:16px;bottom:17px;width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2.2}
.fm-note{margin:0;font-size:var(--fs-sm);line-height:1.5;color:var(--muted)}
.fm-foot{margin:0;color:var(--muted)}
.fm-check{display:flex;gap:12px;align-items:center;font-size:var(--fs-md);cursor:pointer}
.fm-check input{width:22px;height:22px;accent-color:var(--gold);flex:none}
.fm-ok,.fm-alert{margin:0;padding:12px 16px;font-weight:700;border-radius:var(--r-xs);animation:fan-drop .4s cubic-bezier(.2,.8,.2,1.2) both}
.fm-ok{background:var(--fan-ok-bg);color:var(--fan-ok)}
.fm-alert{background:var(--fan-bad-bg);color:var(--fan-bad)}
@keyframes fan-drop{from{opacity:0;transform:translateY(-12px)}}
.fm-rules{margin:-6px 0 0;padding:0;list-style:none;display:flex;gap:6px 20px;flex-wrap:wrap;font-size:var(--fs-md);color:var(--muted)}
.fm-rules li{display:flex;align-items:center;gap:7px}
.fm-rules svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
.fm-rules li.is-ok{color:var(--fan-ok-t)}
.fm-acts{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.fm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border:0;border-radius:var(--r-xs);background:var(--gold);color:var(--on-gold);font:inherit;font-size:var(--fs-lg);font-weight:800;text-decoration:none;cursor:pointer;align-self:flex-start;transition:transform .15s,background-color .15s}
.fm-btn:hover{background:#ffc233;transform:translateY(-2px)}
.fm-btn:active{transform:scale(.97)}
.fm-btn.is-big{min-height:58px;font-size:19px;align-self:stretch}
.fm-acts .fm-btn.is-big{align-self:auto}
.fm-btn.is-quiet{background:var(--surface-2);color:var(--text);border:1px solid var(--line);font-weight:700}
.fm-btn.is-quiet:hover{background:var(--line)}
.fm-btn.is-wide{width:100%}
.ts-box{min-height:65px}

/* ---------- account ---------- */
.acc{margin-top:var(--sp-4);display:grid;grid-template-columns:1fr;gap:var(--sp-4);align-items:start}
@media (min-width:900px){.acc{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:20px}}
.acc-side,.acc-main{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
.acc-card,.acc-box,.acc-stats{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow)}
.acc-card{padding:var(--sp-5);display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.acc-avatar{width:80px;height:80px;display:grid;place-items:center;background:var(--gold);color:var(--on-gold);font-size:36px;font-weight:800;border-radius:var(--r-sm)}
.acc-who{display:flex;flex-direction:column;gap:2px}
.acc-who b{font-size:var(--fs-2xl);font-weight:800;line-height:1.15;overflow-wrap:anywhere}
.acc-who span{color:var(--muted);font-size:var(--fs-sm)}
.acc-fav{display:flex;align-items:center;gap:10px}
.acc-fav img,.acc-fav .badge-mono{width:36px;height:36px;object-fit:contain;border-radius:var(--r-xs);font-size:10px}
.acc-points{background:var(--gold);color:var(--on-gold);padding:var(--sp-5);border-radius:var(--r-md);display:flex;flex-direction:column;gap:6px}
.acc-points a{color:var(--on-gold);font-weight:700}
.acc-k{font-size:var(--fs-md);font-weight:700}
.acc-k.is-sub{font-weight:400;font-size:var(--fs-sm)}
.acc-big{font-size:clamp(56px,14vw,88px);font-weight:800;line-height:.95;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.acc-stats{padding:var(--sp-5);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.acc-stats>span{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm);color:var(--muted)}
.acc-num{font-size:44px;font-weight:800;line-height:1;color:var(--text);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.acc-num.is-gold{color:var(--accent-text)}
.acc-box{padding:var(--sp-5);max-width:none}
@media (min-width:600px){.acc-box{padding:var(--sp-6)}}
.acc-box h2{margin:0 0 4px;font-size:var(--fs-2xl);font-weight:800}
section.acc-box{display:flex;flex-direction:column;gap:8px}
.acc-vote{display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center;padding:12px 14px;background:var(--surface-2);border-radius:var(--r-xs)}
@media (min-width:600px){.acc-vote{grid-template-columns:120px minmax(0,1fr) auto}}
.acc-vdate{font-size:var(--fs-sm);color:var(--muted);grid-column:1/-1}
@media (min-width:600px){.acc-vdate{grid-column:auto}}
.acc-vpick{display:flex;align-items:center;gap:10px;min-width:0}
.acc-vpick a{text-decoration:none}
.acc-vpick a:hover b{text-decoration:underline}
.acc-vpick span{color:var(--muted)}
.acc-vpick img,.acc-vpick .badge-mono{width:32px;height:32px;object-fit:contain;flex:none;border-radius:var(--r-xs);font-size:8px}
.acc-vres{text-align:right;font-size:var(--fs-md);font-weight:700;white-space:nowrap}
.tone-ok{color:var(--fan-ok-t)} .tone-bad{color:var(--fan-bad-t)} .tone-muted{color:var(--muted)}

/* ---------- vote card ---------- */
.vc{position:relative;background:var(--ink-2);color:var(--ink-text);border-radius:var(--r-md);padding:var(--sp-5) var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-5);color-scheme:dark}
@media (min-width:600px){.vc{padding:var(--sp-6)}}
.vc a{color:inherit}
.vc-top{display:flex;justify-content:space-between;gap:6px var(--sp-4);flex-wrap:wrap;font-size:var(--fs-md)}
.vc-when b{font-weight:700}
.vc-win{font-weight:700;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.vc-win.is-open{color:var(--gold)}
.vc-win.is-soon{color:var(--st-soon)}
.vc-h{margin:-8px 0 0;font-size:clamp(28px,6vw,44px);font-weight:800;line-height:1.05;letter-spacing:-.02em}
.vc-none{margin:0;color:var(--ink-muted)}
.vc-teams{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--sp-3);align-items:stretch}
@media (min-width:600px){.vc-teams{gap:var(--sp-5)}}
.vc-vs{align-self:center;font-size:clamp(18px,4vw,28px);font-weight:800;color:var(--ink-muted)}
.vc-team{border:0;border-radius:var(--r-sm);padding:var(--sp-4) var(--sp-2);background:var(--fan-btn-2);color:var(--ink-text);font:inherit;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:var(--sp-3);cursor:pointer;min-width:0;transition:transform .18s cubic-bezier(.2,.8,.2,1),background-color .18s}
@media (min-width:600px){.vc-team{padding:28px}}
.vc-team:disabled{cursor:default}
.vc-team:hover:not(:disabled){transform:translateY(-4px)}
.vc-team:active:not(:disabled){transform:scale(.97)}
.vc-team:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.vc-team.is-mine{background:var(--gold);color:var(--on-gold)}
.vc-logo{width:clamp(64px,18vw,120px);height:clamp(64px,18vw,120px);object-fit:contain}
.vc-logo.badge-mono{border-radius:var(--r-md);font-size:clamp(14px,3vw,22px)}
.vc-name{font-size:clamp(16px,3.6vw,26px);font-weight:800;line-height:1.2;text-align:center;overflow-wrap:anywhere}
.vc-pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;max-width:100%;padding:8px 18px;border-radius:var(--r-pill);background:var(--gold);color:var(--on-gold);font-size:clamp(14px,3vw,18px);font-weight:800;line-height:1.2;text-align:center;box-shadow:0 6px 18px -8px rgba(232,162,0,.8);transition:transform .18s cubic-bezier(.2,.8,.2,1),background-color .18s}
@media (min-width:600px){.vc-team .vc-pill{min-width:200px;min-height:56px;padding:0 24px}}
.vc-pill svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.vc-team:hover:not(:disabled) .vc-pill,.vc-c-act .vc-pill:hover{background:#ffc233;transform:scale(1.04)}
.vc-pill.is-done{background:var(--ink);color:var(--gold);box-shadow:none}
.vc-pill.is-flat{background:transparent;color:var(--gold);box-shadow:none;border:2px solid var(--gold)}
.vc-res{display:flex;flex-direction:column;gap:10px}
.vc-pcts{display:flex;justify-content:space-between}
.vc-num{font-size:clamp(40px,9vw,56px);font-weight:800;line-height:.9;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.vc-num.is-home{color:var(--gold)}
.vc-bar{display:flex;gap:4px;height:14px}
.vc-bar i{display:block;background:var(--ink-text);transition:flex-grow .6s cubic-bezier(.2,.8,.2,1)}
.vc-bar i:first-child{background:var(--gold)}
.vc-bar i.is-empty{flex:1;background:var(--ink-line)}
.vc-sub{font-size:var(--fs-md);color:var(--ink-muted)}
.vc-tier{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:var(--fan-warn-bg);color:var(--fan-warn);font-size:var(--fs-md);font-weight:700;border-radius:var(--r-xs)}
.vc-tier svg{width:18px;height:18px;fill:currentColor;flex:none}
.vc-hint{margin:-8px 0 0;font-size:var(--fs-md);color:var(--ink-muted)}
.vc-hint a,.vc .vc-join{color:var(--gold)}
.vc-note{margin:0;padding:12px 16px;font-size:var(--fs-md);line-height:1.5;border-radius:var(--r-xs);background:var(--ink);color:var(--ink-text)}
.vc .vc-note.tone-ok{background:var(--fan-ok-bg);color:var(--fan-ok)}
.vc .vc-note.tone-warn{background:var(--fan-warn-bg);color:var(--fan-warn)}
.vc .vc-note.tone-bad{background:var(--fan-bad-bg);color:var(--fan-bad)}
.vc-note[hidden]{display:none}

/* phone dialog: a modal with JS, an inline panel after a plain form post */
.vc-dlg{border:0;padding:0;background:#14161c;color:var(--ink-text);width:min(520px,calc(100vw - 32px));border-radius:var(--r-md);box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.vc-dlg:not(:modal){position:static;width:auto;margin:0;box-shadow:none;border:1px solid var(--ink-line)}
.vc-dlg:modal{animation:fan-modal .35s cubic-bezier(.2,.8,.2,1) both}
.vc-dlg::backdrop{background:rgba(14,16,21,.86)}
@keyframes fan-modal{from{opacity:0;transform:translateY(24px) scale(.98)}}
.vc-ph{padding:var(--sp-5);display:flex;flex-direction:column;gap:16px}
@media (min-width:600px){.vc-ph{padding:var(--sp-6)}}
.vc-ph h3{margin:0;font-size:clamp(22px,5vw,30px);font-weight:800;line-height:1.2}
.vc-ph>p{margin:0;color:#d6d8de;line-height:1.5}
.vc-ph .fm-in{background:#0e1015;border-color:var(--ink-line);color:var(--ink-text);font-size:20px;height:56px}
.vc-ph .fm-in:focus{border-color:var(--gold)}
.vc-ph .fm-in.is-bad{border-color:var(--fan-bad-line)}
.vc-ph .fm-in:disabled{opacity:.6}
.vc-ph .fm-btn.is-quiet{background:var(--fan-btn-2);color:var(--ink-text);border-color:transparent}
.vc-pips{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;font-size:var(--fs-sm);color:#b4b9c5}
.vc-pip-row{display:flex;gap:6px}
.vc-pip-row i{width:22px;height:10px;background:var(--ink-line);transition:background-color .25s}
.vc-pip-row i.on{background:var(--fan-bad-line)}
.vc-pip-row.is-dot i{width:18px;height:18px;border-radius:50%}
.vc-pip-row.is-dot i.on{background:var(--gold)}
.vc-dlg-act{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.vc-dlg-act .vc-join{margin-left:auto;font-size:var(--fs-md)}
.vc-shake{animation:fan-shake .4s cubic-bezier(.36,.07,.19,.97) both}
@keyframes fan-shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}

/* compact card (home page) */
.vc-compact{padding:var(--sp-5);gap:14px;border-radius:var(--r-md)}
.vc-compact .vc-when{display:flex;flex-wrap:wrap;gap:2px 8px;font-size:var(--fs-sm);color:#b4b9c5;text-decoration:none}
.vc-compact a.vc-when[href]:hover span{text-decoration:underline}
.vc-compact .vc-when span:not([data-countdown])::after{content:"·";margin-left:8px}
.vc-compact .vc-win{font-weight:700}
.vc-compact .vc-form{display:flex;flex-direction:column;gap:14px}
.vc-c-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.vc-c-team{display:flex;align-items:center;gap:12px;font-size:var(--fs-lg);font-weight:700;min-width:0;overflow-wrap:anywhere}
.vc-c-logo{width:44px;height:44px;object-fit:contain;flex:none}
.vc-c-logo.badge-mono{border-radius:var(--r-sm);font-size:11px}
.vc-c-row.is-mine .vc-c-team::after{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.vc-c-pct{font-size:34px;font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.vc-c-pct.is-lead{color:var(--gold)}
.vc-c-soon{font-size:var(--fs-md);color:#b4b9c5;white-space:nowrap}
.vc-c-bar{display:block;height:10px;background:var(--ink-line)}
.vc-c-bar i{display:block;height:10px;background:var(--gold);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.vc-c-act{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.vc-c-act .vc-pill{border:0;font:inherit;font-size:var(--fs-md);font-weight:800;min-height:44px;padding:6px 12px;cursor:pointer;width:100%}
.vc-c-act .vc-pill:active{transform:scale(.97)}
.vc-c-act .vc-pill svg{width:16px;height:16px}
.vc-foot{margin:0;font-size:var(--fs-sm);color:#b4b9c5}
.vc-foot b{color:var(--ink-text);font-weight:600}
.vc-compact .vc-note{padding:10px 12px;font-size:var(--fs-sm)}
.vc.is-busy{opacity:.75;pointer-events:none}

/* ---------- predictors ranking ---------- */
.pb{display:flex;flex-direction:column;gap:var(--sp-4)}
.pb-podium{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:600px){.pb-podium{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pb-p{padding:20px;display:flex;flex-direction:column;gap:6px;color:var(--on-gold);border-radius:var(--r-sm);animation:fan-rise .5s cubic-bezier(.2,.8,.2,1) backwards}
.pb-p1{background:var(--gold)} .pb-p2{background:var(--fan-silver);animation-delay:.08s} .pb-p3{background:var(--fan-bronze);animation-delay:.16s}
.pb-p.is-me{box-shadow:inset 0 0 0 3px var(--ink)}
.pb-rank{font-size:var(--fs-md);font-weight:700}
.pb-nick{font-size:var(--fs-xl);font-weight:800;overflow-wrap:anywhere}
.pb-nick small,.pb-n small{font-size:var(--fs-sm);font-weight:700}
.pb-pts{font-size:52px;font-weight:800;line-height:.95;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pb-sub{font-size:var(--fs-sm)}
@keyframes fan-rise{from{opacity:0;transform:translateY(16px)}}
.pb-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.pb-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xs)}
@media (min-width:600px){.pb-row{grid-template-columns:48px minmax(0,1fr) 160px 100px}}
.pb-r{font-size:var(--fs-xl);font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}
.pb-n{font-size:var(--fs-lg);overflow-wrap:anywhere}
.pb-c{font-size:var(--fs-sm);color:var(--muted);grid-column:2;grid-row:2}
@media (min-width:600px){.pb-c{grid-column:auto;grid-row:auto}}
.pb-v{font-size:28px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums;grid-row:1/3;grid-column:3}
@media (min-width:600px){.pb-v{grid-row:auto;grid-column:auto}}
.pb-row.is-me{background:var(--gold-soft);border-color:var(--gold)}
.pb-row.is-me .pb-n{font-weight:800}
.pb-row.is-me .pb-v{color:var(--accent-text)}
.pb-gap{text-align:center;color:var(--muted)}
.pb-rules{margin-top:var(--sp-3);padding:var(--sp-5);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);line-height:1.55}
.pb-rules h2{margin:0 0 8px;font-size:var(--fs-lg);font-weight:800}
.pb-rules ul{margin:0 0 8px;padding-left:20px;color:var(--muted)}
.pb-rules p{margin:var(--sp-3) 0 0;display:flex;gap:var(--sp-4);align-items:center;flex-wrap:wrap}
.pb-rules .fm-btn{align-self:auto}

@media (prefers-reduced-motion:reduce){
  .ma-court *,.ma-ok path{animation:none;stroke-dashoffset:0}
  .fm-ok,.fm-alert,.vc-dlg:modal,.vc-shake,.pb-p{animation:none}
  .fm-btn,.vc-team,.vc-pill,.vc-bar i,.vc-c-bar i,.vc-pip-row i{transition:none}
  .fm-btn:hover,.vc-team:hover:not(:disabled),.vc-team:hover:not(:disabled) .vc-pill,.vc-c-act .vc-pill:hover{transform:none}
}

/* ---------- vote battle board (v2.1.0; v2.3.0 shared jagged edge, tablet + phone layouts, theme-aware frame) ----------
   The two halves are clipped with the SAME points the white line is drawn with (.vb-crack polylines in the Blade view):
   side-by-side  55,0 52,30 57,38 45,60 50,68 44,100   (tablet + desktop)
   stacked       0,49 28,46 36,53 64,47 72,54 100,51   (phones, home on top) */
.vc-battle{background:var(--surface);border:1px solid var(--line);color:var(--text);color-scheme:normal;padding:var(--sp-5) var(--sp-4);gap:var(--sp-4);overflow:hidden}
.vc-battle .vc-sub,.vc-battle .vc-hint{color:var(--muted)}
.vc-battle .vc-hint a{color:var(--accent-text)}
.vc-battle .vc-win{color:var(--muted)}
.vc-battle .vc-win.is-open{color:var(--accent-text)}
@media (min-width:1024px){.vc-battle{padding:32px}}
.vb-top{display:flex;flex-direction:column;align-items:stretch;gap:14px}
@media (min-width:640px){.vb-top{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:16px 24px;flex-wrap:wrap}}
.vb-head{display:flex;flex-direction:column;gap:6px;min-width:0}
.vb-head .vc-when{font-size:var(--fs-sm);color:var(--muted)}
.vb-head .vc-when b{color:var(--accent-text)}
.vb-head .vc-h{margin:0;font-size:clamp(30px,5.4vw,56px);line-height:1.05}
.vb-clockbox{display:flex;flex-direction:column;align-items:stretch;gap:8px}
@media (min-width:640px){.vb-clockbox{align-items:flex-end}}
.vb-clock{display:flex;gap:6px}
.vb-cell{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:8px 6px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px}
@media (min-width:640px){.vb-cell{flex:none;min-width:58px}}
.vb-cell b{display:block;font-size:clamp(26px,4.4vw,38px);font-weight:800;line-height:.95;font-variant-numeric:tabular-nums;color:var(--text)}
.vb-cell small{font-size:12px;color:var(--muted)}
.vb-tick{animation:vb-tick .4s cubic-bezier(.2,.8,.2,1)}
@keyframes vb-tick{from{transform:translateY(-35%);opacity:.2}}

.vb{display:block}
/* phones: stacked, home on top */
.vb-arena{--clip-h:polygon(0 0,100% 0,100% 51%,72% 54%,64% 47%,36% 53%,28% 46%,0 49%);--clip-a:polygon(0 49%,28% 46%,36% 53%,64% 47%,72% 54%,100% 51%,100% 100%,0 100%);
  position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr 1fr;row-gap:112px;padding:22px 6% 22px;background:#111318;border-radius:14px;overflow:hidden;color-scheme:dark}
.vb-half{position:absolute;inset:0;z-index:-1;transition:filter .45s}
.vb-half.is-home{clip-path:var(--clip-h);background:var(--h-bg);color:var(--h-ink);animation:vb-in-t .9s cubic-bezier(.2,.8,.2,1) backwards}
.vb-half.is-away{clip-path:var(--clip-a);background:var(--a-bg);color:var(--a-ink);animation:vb-in-b .9s cubic-bezier(.2,.8,.2,1) backwards}
.vb-half.is-dim,.vb-team.is-dim .vb-logo{filter:grayscale(.85) brightness(.55)}
.vb-team.is-dim{opacity:.72}
.vb-team.is-away{justify-content:flex-end}
.vb-court{position:absolute;opacity:.16}
.vb-court g{stroke:currentColor}
.vb-court.is-side{display:none;top:0;height:100%;width:62%}
.vb-court.is-stack{left:0;width:100%;height:50%}
.vb-half.is-home .vb-court.is-stack{top:0}
.vb-half.is-away .vb-court.is-stack{bottom:0}
.vb-half.is-home .vb-court.is-side{left:0}
.vb-half.is-away .vb-court.is-side{right:0}
.vb-code{position:absolute;font-size:clamp(120px,24vw,280px);font-weight:800;line-height:1;opacity:.11;letter-spacing:-.02em;white-space:nowrap}
.vb-half.is-home .vb-code{right:-.03em;top:46%;transform:translateY(-100%)}
.vb-half.is-away .vb-code{left:-.03em;bottom:-.16em}
.vb-crack{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;animation:vb-crack-x .6s cubic-bezier(.65,0,.35,1) .5s backwards}
.vb-crack.is-side{display:none;animation-name:vb-crack-y}
.vb-crack polyline{fill:none;stroke:#fff;stroke-width:5;stroke-linejoin:miter;stroke-miterlimit:8}
.vb-crack .vb-glow{stroke:rgba(255,255,255,.45);stroke-width:16;filter:blur(5px)}

.vb-team{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;min-width:0;text-align:center;transition:opacity .45s}
.vb-team.is-home{color:var(--h-ink);animation:vb-in-t .9s cubic-bezier(.2,.8,.2,1) .15s backwards}
.vb-team.is-away{color:var(--a-ink);animation:vb-in-b .9s cubic-bezier(.2,.8,.2,1) .15s backwards}
.vb-float{height:156px;display:flex;align-items:flex-end;justify-content:center;animation:vb-float 4.5s ease-in-out infinite}
.vb-team.is-away .vb-float{animation-delay:-2.2s}
.vb-logo{display:block;transition:transform .25s ease-out,filter .45s;will-change:transform}
.vb-logo .is-cutout{display:block;height:150px;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 22px 24px rgba(0,0,0,.5))}
.vb-tile{display:grid;place-items:center;width:140px;aspect-ratio:1;padding:12%;box-sizing:border-box;background:#fff;border-radius:20px;box-shadow:0 22px 34px -12px rgba(0,0,0,.65)}
.vb-tile img{width:100%;height:100%;object-fit:contain}
.vb-mono{background:#14161c;color:#fff;font-size:40px;font-weight:800}
.vb-name{font-size:26px;font-weight:800;line-height:1.1;letter-spacing:-.02em;overflow-wrap:anywhere}
.vb-rec{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:5px;font-size:13px;font-weight:700}
.vb-f{display:grid;place-items:center;width:22px;height:22px;font-style:normal;font-size:12px;background:rgba(0,0,0,.24);color:inherit}
.vb-team.is-home .vb-f.is-w{background:var(--h-ink);color:var(--h-bg)}
.vb-team.is-away .vb-f.is-w{background:var(--a-ink);color:var(--a-bg)}
.vb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:86%;min-height:52px;max-width:100%;padding:8px 16px;border:0;border-radius:var(--r-pill);font:inherit;font-size:18px;font-weight:800;line-height:1.15;cursor:pointer;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s;box-shadow:0 10px 24px -10px rgba(0,0,0,.7)}
.vb-btn svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.vb-team.is-home .vb-btn{background:var(--h-ink);color:var(--h-bg)}
.vb-team.is-away .vb-btn{background:var(--a-ink);color:var(--a-bg)}
.vb-btn:hover:not(:disabled){transform:translateY(-3px) scale(1.03)}
.vb-btn:active:not(:disabled){transform:scale(.96)}
.vb-btn:focus-visible{outline:3px solid #fff;outline-offset:4px}
.vb-btn:disabled{cursor:default;box-shadow:none}
.vb-btn:disabled:not(.is-mine){opacity:.75}
.vb-btn.is-mine{box-shadow:0 0 0 4px #fff,0 12px 30px -8px rgba(0,0,0,.7)}
.vc.is-busy .vb-btn{opacity:.6}

/* VS sits on the edge: (50%, 50%) stacked, (50.5%, 50%) side by side */
.vb-vs{position:absolute;z-index:2;left:50%;top:50%;width:84px;aspect-ratio:1;display:grid;place-items:center;transform:translate(-50%,-50%);animation:vb-vs .7s cubic-bezier(.2,.8,.2,1.4) .9s backwards}
.vb-vs svg{position:absolute;inset:0;width:100%;height:100%;animation:vb-spin 9s linear infinite}
.vb-vs-bg{fill:#14161c}
.vb-vs-ring{fill:none;stroke:var(--gold);stroke-width:5;stroke-dasharray:18 10}
.vb-vs span{position:relative;font-size:36px;font-weight:800;color:#fff;line-height:1}
.vb-spark{position:absolute;width:7px;height:7px;background:#ffd27a;opacity:0;animation:vb-spark 1.8s ease-out infinite}
.vb-spark:nth-of-type(2n){background:#fff}

/* tablet and up: side by side */
@media (min-width:640px){
  .vb-arena{--clip-h:polygon(0 0,55% 0,52% 30%,57% 38%,45% 60%,50% 68%,44% 100%,0 100%);--clip-a:polygon(55% 0,100% 0,100% 100%,44% 100%,50% 68%,45% 60%,57% 38%,52% 30%);
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto;column-gap:22%;row-gap:0;padding:28px 2% 28px;min-height:500px;align-items:start}
  .vb-half.is-home,.vb-team.is-home{animation-name:vb-in-l}
  .vb-half.is-away,.vb-team.is-away{animation-name:vb-in-r}
  .vb-court.is-side{display:block}
  .vb-court.is-stack{display:none}
  .vb-half.is-home .vb-code{right:auto;left:-.03em;top:auto;bottom:-.16em;transform:none}
  .vb-half.is-away .vb-code{left:auto;right:-.03em}
  .vb-crack.is-side{display:block}
  .vb-crack.is-stack{display:none}
  .vb-team{height:100%}
  .vb-team.is-away{justify-content:flex-start}
  .vb-float{height:210px}
  .vb-logo .is-cutout{height:200px}
  .vb-tile{width:170px}
  .vb-name{font-size:28px}
  .vb-btn{width:auto;margin-top:auto;min-height:56px;padding:8px 22px}
  .vb-vs{left:50.5%;top:50%;width:104px}
  .vb-vs span{font-size:46px}
}
/* desktop */
@media (min-width:1024px){
  .vb-arena{min-height:600px;padding:36px 3%;column-gap:24%}
  .vb-float{height:310px}
  .vb-logo .is-cutout{height:300px}
  .vb-tile{width:230px}
  .vb-mono{font-size:56px}
  .vb-name{font-size:40px}
  .vb-rec{font-size:15px}
  .vb-btn{min-width:280px;min-height:64px;font-size:22px}
  .vb-vs{width:130px}
  .vb-vs span{font-size:58px}
}

.vb-res{gap:12px}
.vb-pcts{display:grid;grid-template-columns:auto auto;justify-content:space-between;align-items:baseline;gap:4px 12px}
.vb-pcts .vc-sub{grid-column:1/-1;grid-row:2;font-size:var(--fs-sm)}
@media (min-width:640px){.vb-pcts{grid-template-columns:auto 1fr auto}.vb-pcts .vc-sub{grid-column:auto;grid-row:auto;text-align:center}}
.vb-res .vc-num{font-size:clamp(44px,7vw,68px)}
.vb-res .vc-num.is-home{color:var(--h-ac)}
.vb-res .vc-num.is-away{color:var(--a-ac)}
.vb-bar{height:18px}
.vb-bar i{transition:flex-grow .9s cubic-bezier(.2,.8,.2,1)}
.vb-bar i:first-child{background:var(--h-ac)}
.vb-bar i:last-child:not(:first-child){background:var(--a-ac)}
.vb-bar i.is-empty{background:var(--line)}
.vc-battle .vc-tier{align-self:flex-start;background:var(--gold-soft);color:var(--accent-text)}

@keyframes vb-in-l{from{opacity:0;transform:translateX(-120px)}}
@keyframes vb-in-r{from{opacity:0;transform:translateX(120px)}}
@keyframes vb-in-t{from{opacity:0;transform:translateY(-80px)}}
@keyframes vb-in-b{from{opacity:0;transform:translateY(80px)}}
@keyframes vb-float{0%,100%{transform:none}50%{transform:translateY(-12px)}}
@keyframes vb-vs{from{opacity:0;transform:translate(-50%,-50%) scale(2.2)}}
@keyframes vb-spin{to{transform:rotate(360deg)}}
@keyframes vb-crack-y{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes vb-crack-x{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes vb-spark{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}

/* ---------- sponsor banner (v2.1.0; v2.3.0 redesign: theme surfaces, equal white logo plates) ----------
   Logos sit on white plates in both themes because most sponsor files come with a white background. */
.spb{--plate-bd:var(--line);--plate-sh:0 8px 20px -14px rgba(20,22,28,.35);
  position:relative;margin-top:var(--sp-5);padding:var(--sp-5) var(--sp-4);background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:18px;display:flex;flex-direction:column;gap:18px;overflow:hidden}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .spb{--plate-bd:transparent;--plate-sh:0 10px 24px -14px rgba(0,0,0,.8)}}
:root[data-theme="dark"] .spb{--plate-bd:transparent;--plate-sh:0 10px 24px -14px rgba(0,0,0,.8)}
@media (min-width:640px){.spb{padding:24px}}
.spb::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),#ffd27a 40%,transparent)}
.spb-h{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.spb-k{display:block;font-size:var(--fs-sm);font-weight:700;color:var(--accent-text)}
.spb-h h2{margin:4px 0 0;font-size:clamp(20px,3vw,26px);font-weight:800;line-height:1.2}
.spb-hint{display:none;font-size:var(--fs-sm);color:var(--muted)}
@media (min-width:640px){.spb-hint{display:block}}
.spb-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px 20px;align-items:stretch}
@media (min-width:900px){.spb-grid:not(.is-solo){grid-template-columns:minmax(0,420px) minmax(0,1fr)}}
.spb-mains{display:flex;flex-direction:column;gap:12px}
.spb-grid.is-solo .spb-mains{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr))}
.spb-plate{display:flex;align-items:center;justify-content:center;box-sizing:border-box;background:#fff;border:1px solid var(--plate-bd);border-radius:12px;box-shadow:var(--plate-sh);padding:10px 14px;color:#14161c;font-weight:800;text-align:center;overflow:hidden;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.spb-plate img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.spb-main{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:center;padding:12px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);color:var(--text);text-decoration:none}
@media (min-width:480px){.spb-main{grid-template-columns:200px minmax(0,1fr);gap:18px;padding:16px}}
.spb-main .spb-plate{height:150px;padding:14px}
@media (min-width:480px){.spb-main .spb-plate{height:132px}}
.spb-meta{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.spb-chip{padding:4px 10px;border-radius:var(--r-pill);background:var(--gold-soft);color:var(--accent-text);font-size:var(--fs-xs);font-weight:700}
.spb-meta b{font-size:var(--fs-xl);font-weight:800;line-height:1.2;overflow-wrap:anywhere}
.spb-go{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:700;color:var(--accent-text)}
.spb-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.spb-partners{display:flex;flex-direction:column;justify-content:center;gap:10px;min-width:0}
.spb-lbl{font-size:var(--fs-sm);font-weight:700;color:var(--muted)}
.spb-strip{position:relative;overflow:hidden;padding:8px 0 14px}
.spb-strip::before,.spb-strip::after{content:"";position:absolute;top:0;bottom:0;width:28px;z-index:1;pointer-events:none}
.spb-strip::before{left:0;background:linear-gradient(90deg,var(--surface),transparent)}
.spb-strip::after{right:0;background:linear-gradient(270deg,var(--surface),transparent)}
@media (min-width:640px){.spb-strip::before,.spb-strip::after{width:56px}}
.spb-marquee{margin:0;padding:0;list-style:none;display:flex;gap:14px;width:max-content;animation:spb-marq 40s linear infinite}
.spb-strip:hover .spb-marquee,.spb-strip:focus-within .spb-marquee{animation-play-state:paused}
.spb-marquee .spb-plate{width:128px;height:74px;padding:8px 10px;font-size:var(--fs-sm)}
@media (min-width:640px){.spb-marquee .spb-plate{width:168px;height:96px;padding:10px 14px}}
a.spb-main:hover .spb-plate,a.spb-plate:hover{transform:translateY(-4px)}
a.spb-main:focus-visible,a.spb-plate:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@keyframes spb-marq{to{transform:translateX(calc(-50% - 7px))}}

@media (prefers-reduced-motion:reduce){
  .vb-half,.vb-team,.vb-float,.vb-vs,.vb-vs svg,.vb-spark,.vb-crack,.vb-tick,.spb-marquee{animation:none}
  .vb-spark{display:none}
  .vb-logo,.vb-btn,.vb-bar i,.vb-half,.vb-team,.spb-plate{transition:none}
  .spb-marquee{flex-wrap:wrap;width:auto}
  .spb-marquee li[aria-hidden]{display:none}
}