/* ==========================================================================
   EloShowdown — season theme
   Single source of truth for site chrome, season theming and components.
   Every surface, rule, metal and accent is driven by html[data-set="…"];
   palettes are sampled from each set's box art.
   Adding a season = one entry in SEASONS (season-theme.js) + one block below.
   ========================================================================== */
:root{
    /* --ink-4 is the faintest text step; lifted from #6a6455 so informational
       captions on the page ground clear WCAG 4.5:1 while staying below --ink-3. */
    --ink-4:#827d70;--green:#79b356;--red:#c4564f;
    --brand:#c8aa6e;--brand-ac:#0ac8b9;
    --gut:max(1.2rem,calc((100% - 1360px)/2));
    /* fixed geometry so season swaps never shift the page */
    --setbox-w:290px;--setbox-h:76px;--hero-h:152px;
}
/* Every surface, rule and metal is set-driven. Palettes sampled from each set's
   box art; Origins carries the base set's navy+blue, Spiritforged reads pearl-white. */
html[data-set="vendetta"]{
    --paper:#120d0e;--plate:#1b1512;--plate-2:#231b17;--plate-3:#2d2219;
    --gold:#c9a227;--gold-rgb:201,162,39;--gold-dim:#9e8b4b;--gold-pale:#e8dcae;
    --rule:rgba(var(--gold-rgb),.26);--rule-2:rgba(var(--gold-rgb),.13);
    --ink:#efe9dc;--ink-2:#b3ab98;--ink-3:#928c7e;
    --acc:#c81c4c;--acc-rgb:200,28,76;--acc-hot:#e12a78;--acc2:#5fae5c;--acc2-rgb:95,174,92;
    --tint:#3a0a1a;--tint-2:#1a0710}
html[data-set="unleashed"]{
    --paper:#0d0b16;--plate:#171327;--plate-2:#1e1932;--plate-3:#282040;
    --gold:#c0aede;--gold-rgb:192,174,222;--gold-dim:#9586b2;--gold-pale:#e7dcf5;
    --rule:rgba(192,174,222,.26);--rule-2:rgba(192,174,222,.13);
    --ink:#efeaf6;--ink-2:#b1a8c2;--ink-3:#908aa1;
    --acc:#7a3fa8;--acc-rgb:122,63,168;--acc-hot:#a93bab;--acc2:#4fb8e0;--acc2-rgb:79,184,224;
    --tint:#2a1150;--tint-2:#120a24}
html[data-set="spiritforged"]{
    --paper:#100f10;--plate:#1a1819;--plate-2:#222021;--plate-3:#2c2a2b;
    --gold:#cfc8bd;--gold-rgb:222,214,201;--gold-dim:#989288;--gold-pale:#f4f0e8;
    --rule:rgba(222,214,201,.24);--rule-2:rgba(222,214,201,.12);
    --ink:#f4f1ea;--ink-2:#b8b3aa;--ink-3:#98938b;
    --acc:#ded3c6;--acc-rgb:222,211,198;--acc-hot:#c8465f;--acc2:#a05ad0;--acc2-rgb:160,90,208;
    --tint:#312e30;--tint-2:#151415}
html[data-set="origins"]{
    --paper:#07131d;--plate:#0e1e2c;--plate-2:#132635;--plate-3:#1a3244;
    --gold:#c79a4e;--gold-rgb:199,154,78;--gold-dim:#ad976e;--gold-pale:#ecd9ad;
    --rule:rgba(199,154,78,.28);--rule-2:rgba(199,154,78,.14);
    --ink:#eae6dc;--ink-2:#a8b0b8;--ink-3:#9199a1;
    --acc:#d97a12;--acc-rgb:217,122,18;--acc-hot:#ef8b1f;--acc2:#4b8fc9;--acc2-rgb:75,143,201;
    --tint:#0a3a5c;--tint-2:#04121f}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;background:var(--paper);color:var(--ink-2);font-size:15px;-webkit-font-smoothing:antialiased;padding-bottom:2rem;
    transition:background-color .45s ease;
    background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 4px),radial-gradient(135% 88% at 50% -8%,var(--tint),transparent 60%),linear-gradient(180deg,var(--tint-2),var(--paper) 62%)}
h1,h2,h3,h4{font-family:'Rajdhani',sans-serif;color:var(--ink);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
a{color:var(--gold);text-decoration:none;transition:color .15s}
a:hover{color:var(--gold-pale)}
button{font-family:inherit}
.num{font-variant-numeric:tabular-nums;font-weight:700}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:var(--gold-dim)}

.brk{position:relative}
.brk::before{content:'';position:absolute;inset:5px;border:1px solid rgba(var(--acc-rgb),.5);pointer-events:none;
    -webkit-mask:linear-gradient(#000,#000) 0 0/14px 14px no-repeat,linear-gradient(#000,#000) 100% 0/14px 14px no-repeat,linear-gradient(#000,#000) 0 100%/14px 14px no-repeat,linear-gradient(#000,#000) 100% 100%/14px 14px no-repeat;
    mask:linear-gradient(#000,#000) 0 0/14px 14px no-repeat,linear-gradient(#000,#000) 100% 0/14px 14px no-repeat,linear-gradient(#000,#000) 0 100%/14px 14px no-repeat,linear-gradient(#000,#000) 100% 100%/14px 14px no-repeat}

.card{margin:0}
.card-in{position:relative}

/* ══ bar 1 — game plate ══ */
.gamebar{display:flex;align-items:center;gap:1.15rem;padding:.85rem var(--gut);border-bottom:1px solid var(--rule-2);background:linear-gradient(180deg,rgba(var(--gold-rgb),.07),transparent 90%)}
.gb-logo{height:40px;width:auto;flex-shrink:0}
.gb-word{font-family:'Cinzel',serif;font-weight:700;font-size:1.24rem;letter-spacing:.12em;color:var(--brand);text-transform:uppercase;white-space:nowrap;border-left:1px solid var(--rule);padding-left:1.15rem}
.gb-word span{color:var(--brand-ac)}
.gb-right{margin-left:auto;display:flex;align-items:center;gap:.7rem;font-size:.66rem;color:var(--ink-3);letter-spacing:.05em;white-space:nowrap}
.gb-right .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 7px rgba(121,179,86,.8)}

/* ══ bar 2 — app bar ══ */
.appbar{display:flex;align-items:stretch;height:50px;padding:0 var(--gut);border-bottom:1px solid var(--rule);background:var(--plate-2);position:sticky;top:0;z-index:600;box-shadow:0 8px 22px rgba(0,0,0,.35)}
.ab-link{display:flex;align-items:center;font-family:'Rajdhani',sans-serif;font-size:.68rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);padding:0 .75rem;border-bottom:2px solid transparent;white-space:nowrap}
.ab-link:hover{color:var(--gold-pale)}
.ab-link.on{color:var(--gold-pale);border-bottom-color:var(--acc)}
.ab-menu{position:relative;display:flex;align-items:stretch}
.ab-mbtn{display:flex;align-items:center;gap:.38rem;background:none;border:none;border-bottom:2px solid transparent;font-family:'Rajdhani',sans-serif;font-size:.68rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);padding:0 .75rem;cursor:pointer;white-space:nowrap;transition:color .15s}
.ab-mbtn .ca{font-size:.5rem;color:var(--gold-dim);transition:transform .18s}
.ab-mbtn:hover{color:var(--gold-pale)}
.ab-menu.open .ab-mbtn{color:var(--gold-pale);background:rgba(var(--gold-rgb),.07)}
.ab-menu.open .ab-mbtn .ca{transform:rotate(180deg)}
.ab-pop{position:absolute;top:100%;left:0;width:294px;background:var(--plate-2);border:1px solid var(--rule);box-shadow:0 18px 40px rgba(0,0,0,.65);display:none;z-index:200}
.ab-menu.open .ab-pop{display:block}
.ab-pop.right{left:auto;right:0;width:236px}
.ab-pop-h{font-family:'Rajdhani',sans-serif;font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dim);padding:.62rem .85rem .45rem}
.ab-pi{display:flex;align-items:center;gap:.65rem;padding:.55rem .85rem;border-top:1px solid var(--rule-2);color:inherit}
.ab-pi:hover{background:rgba(var(--gold-rgb),.08);color:inherit}
.ab-pi .ic{width:27px;height:27px;flex-shrink:0;display:grid;place-items:center;font-size:.88rem;border:1px solid var(--rule-2);background:rgba(var(--gold-rgb),.06)}
.ab-pi .tx{display:flex;flex-direction:column;min-width:0}
.ab-pi .n{font-family:'Rajdhani',sans-serif;font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:.3rem}
.ab-pi .s{font-size:.65rem;color:var(--ink-3)}
.beta{font-family:'Inter',sans-serif;font-size:.48rem;font-weight:700;letter-spacing:.08em;padding:.05rem .22rem;color:var(--acc2);border:1px solid rgba(var(--acc2-rgb),.45);text-transform:uppercase}
.ab-search{flex:1 1 auto;position:relative;display:flex;align-items:center;min-width:120px;max-width:420px;margin:0 .9rem}
.ab-search .si{position:absolute;left:.72rem;color:var(--ink-3);font-size:.82rem;pointer-events:none}
.ab-search input{width:100%;background:var(--paper);border:1px solid var(--rule-2);color:var(--ink);font-family:inherit;font-size:.83rem;padding:.42rem .8rem .42rem 2.1rem;outline:none;transition:border-color .15s}
.ab-search input:focus{border-color:rgba(var(--acc-rgb),.6)}
.ab-search input::placeholder{color:var(--ink-4)}
.ab-spop{position:absolute;top:calc(100% + 2px);left:0;right:0;background:var(--plate-2);border:1px solid var(--rule);box-shadow:0 18px 40px rgba(0,0,0,.65);display:none;max-height:300px;overflow-y:auto;z-index:200}
.ab-spop.show{display:block}
.ab-sc{font-family:'Rajdhani',sans-serif;font-size:.53rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dim);padding:.55rem .8rem .3rem}
.ab-sr{display:flex;align-items:center;gap:.5rem;padding:.44rem .8rem;border-top:1px solid var(--rule-2);color:inherit}
.ab-sr:hover{background:rgba(var(--gold-rgb),.08)}
.ab-sr .nm{font-size:.83rem;color:var(--ink);font-weight:500}
.ab-sr .mt{font-size:.68rem;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ab-sr .el{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700;font-size:.78rem;color:var(--acc-hot);flex-shrink:0}
.ab-empty{padding:.85rem;text-align:center;font-size:.78rem;color:var(--ink-3)}
.ab-right{margin-left:auto;display:flex;align-items:stretch;gap:.15rem;flex-shrink:0}
.ab-ico{width:34px;display:grid;place-items:center;color:var(--ink-3);border-bottom:2px solid transparent}
.ab-ico:hover{color:var(--gold-pale);background:rgba(var(--gold-rgb),.07)}
.ab-ico svg{width:17px;height:17px}
.ab-admin{display:flex;align-items:center;font-family:'Rajdhani',sans-serif;font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-dim);border-left:1px solid var(--rule-2);padding:0 .8rem;white-space:nowrap}
.ab-admin:hover{color:var(--gold-pale);background:rgba(var(--gold-rgb),.07)}
.ab-burger,.ab-sbtn{display:none;align-items:center;justify-content:center;width:44px;flex:0 0 44px;background:none;border:none;color:var(--gold);font-size:1.1rem;cursor:pointer}
.m-panel{display:none;border-bottom:1px solid var(--rule);background:var(--plate)}
.m-panel.open{display:block}
.m-search{padding:.6rem .8rem;position:relative}
.m-search input{width:100%;height:42px;background:var(--paper);border:1px solid var(--rule);color:var(--ink);font-family:inherit;font-size:16px;padding:0 .8rem 0 2.3rem;outline:none}
.m-search .si{position:absolute;left:1.45rem;top:1.25rem;color:var(--ink-4);font-size:.9rem;pointer-events:none}
.m-search .ab-spop{left:.8rem;right:.8rem;top:calc(100% - .2rem)}
.m-menu{padding:.4rem .55rem .9rem}
.m-sec{margin-top:.7rem}
.m-lbl{font-family:'Rajdhani',sans-serif;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dim);padding:0 .5rem .3rem}
.m-link{display:flex;align-items:center;gap:.7rem;min-height:46px;padding:.4rem .5rem;color:var(--ink);font-family:'Rajdhani',sans-serif;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.m-link:active{background:rgba(var(--gold-rgb),.1)}
.m-link.on{color:var(--gold-pale);background:rgba(var(--acc-rgb),.12)}
.m-link .ic{width:26px;height:26px;flex-shrink:0;display:grid;place-items:center;font-size:.85rem;border:1px solid var(--rule-2)}

/* ══ hero — fixed height band ══ */
.hero{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:1.5rem;height:var(--hero-h);padding:0 var(--gut);
    background:linear-gradient(100deg,rgba(var(--acc-rgb),.19),transparent 62%)}
.setbox{width:var(--setbox-w);height:var(--setbox-h);display:flex;align-items:center;justify-content:center;flex-shrink:0;border-right:1px solid var(--rule-2);padding-right:1.5rem;box-sizing:content-box}
.setbox img{max-width:100%;max-height:var(--setbox-h);width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,.7))}
.h-info{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:.34rem;min-height:var(--setbox-h)}
.h-info>*{flex-shrink:0}
.h-eye{font-family:'Rajdhani',sans-serif;font-size:.56rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-dim);white-space:nowrap}
.h-name{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:clamp(1.3rem,2.2vw,1.75rem);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);line-height:1.32;white-space:nowrap;text-overflow:ellipsis}
.h-name em{font-style:normal;color:var(--acc-hot)}
.h-line{display:flex;align-items:center;gap:.6rem;flex-wrap:nowrap;white-space:nowrap;overflow:hidden;min-width:0;max-width:100%}
.nm-short,.dt-short{display:none}
.h-dates{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.pillbox{display:inline-flex;align-items:center;gap:.35rem;font-family:'Rajdhani',sans-serif;font-size:.57rem;letter-spacing:.14em;text-transform:uppercase;padding:.16rem .5rem;border:1px solid rgba(var(--acc-rgb),.45);background:rgba(var(--acc-rgb),.12);color:var(--acc-hot)}
.pillbox .d{width:6px;height:6px;border-radius:50%;background:var(--green)}

/* season picker */
.pick{position:relative;flex-shrink:0}
.pick-btn.logo{display:flex;align-items:center;gap:.35rem;background:none;border:1px solid transparent;padding:.3rem .5rem .3rem 0;min-width:0;cursor:pointer;transition:border-color .15s,background .15s}
.pick-btn.logo:hover{border-color:var(--rule-2);background:rgba(var(--gold-rgb),.05)}
.pick-btn.logo .setbox{border-right:none;padding-right:0}
.pick-btn.logo .ca{font-size:.8rem;color:var(--gold);line-height:1}
.pk-meta{display:none;flex-direction:column;align-items:flex-start;gap:.05rem;min-width:0}
.pk-n{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.pk-d{font-size:.62rem;color:var(--ink-2);white-space:nowrap}
.pick-btn.logo:hover .ca{color:var(--gold-pale)}
.pick.open .pick-btn.logo{border-color:rgba(var(--acc-rgb),.5);background:rgba(var(--acc-rgb),.07)}
.pick+.h-info{border-left:1px solid var(--rule-2);padding-left:1.5rem}
.pick-btn{display:flex;align-items:center;gap:.6rem;background:var(--plate-2);border:1px solid var(--rule);padding:.45rem .6rem;cursor:pointer;transition:border-color .15s,background .15s;min-width:214px}
.pick-btn:hover{border-color:rgba(var(--acc-rgb),.6);background:var(--plate-3)}
.pick-btn .thumb{width:52px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pick-btn .thumb img{max-width:100%;max-height:20px;width:auto;height:auto;object-fit:contain}
.pick-btn .tx{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;min-width:0;flex:1}
.pick-btn .k{font-family:'Rajdhani',sans-serif;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.pick-btn .v{font-family:'Rajdhani',sans-serif;font-size:.76rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.pick-btn .ca{font-size:.5rem;color:var(--gold-dim);flex-shrink:0;transition:transform .18s}
.pick.open .pick-btn{border-color:rgba(var(--acc-rgb),.7)}
.pick.open .pick-btn .ca{transform:rotate(180deg)}
.pick-pop{position:absolute;top:calc(100% + 3px);left:0;right:auto;width:308px;background:var(--plate-2);border:1px solid var(--rule);box-shadow:0 20px 46px rgba(0,0,0,.7);display:none;z-index:300;max-height:326px;overflow-y:auto}
.pick.open .pick-pop{display:block}
.pick-h{position:sticky;top:0;background:var(--plate-2);font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);padding:.6rem .8rem .45rem;border-bottom:1px solid var(--rule-2)}
.pick-i{display:flex;align-items:center;gap:.7rem;width:100%;padding:.55rem .8rem;background:none;border:none;border-top:1px solid var(--rule-2);cursor:pointer;text-align:left;transition:background .14s}
.pick-i:first-of-type{border-top:none}
.pick-i:hover{background:rgba(var(--gold-rgb),.08)}
.pick-i .th{width:62px;height:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.pick-i .th img{max-width:100%;max-height:22px;width:auto;height:auto;object-fit:contain;filter:grayscale(1) brightness(.75);transition:filter .18s}
.pick-i:hover .th img{filter:grayscale(.3) brightness(.95)}
.pick-i .tx{display:flex;flex-direction:column;gap:.12rem;min-width:0;flex:1}
.pick-i .n{font-family:'Rajdhani',sans-serif;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.pick-i .d{font-size:.68rem;color:var(--ink-2);white-space:nowrap}
.pick-i .bd{font-family:'Rajdhani',sans-serif;font-size:.5rem;letter-spacing:.13em;text-transform:uppercase;padding:.12rem .38rem;color:var(--green);border:1px solid rgba(121,179,86,.4);flex-shrink:0}
.pick-i[aria-selected="true"]{background:rgba(var(--acc-rgb),.13)}
.pick-i[aria-selected="true"] .th img{filter:none}
.pick-i[aria-selected="true"] .n{color:var(--gold-pale)}
.pick-i[aria-selected="true"]::before{content:'';position:absolute;left:0;width:2px;top:0;bottom:0;background:var(--acc)}
.pick-i{position:relative}

/* ── season control hosted in the mobile app bar ── */
.appbar .pick{display:none}
@media (max-width:720px){
    .hero.in-bar{display:none}
    .appbar{gap:.15rem}
    .appbar .pick-btn.logo,.ab-sbtn,.ab-burger{min-height:44px}
    /* NOT overflow:hidden — .pick-pop is absolutely positioned inside .pick, so
       clipping here swallowed the whole season dropdown on phones (it opened,
       but taps fell through to the page behind it). The label is what needed
       constraining, so the ellipsis lives on .pk-meta below instead. */
    .appbar .pick{display:block;align-self:center;flex:0 1 auto;min-width:0}
    .appbar .pick-btn.logo{gap:.3rem;padding:.2rem .35rem;max-width:100%;background:rgba(var(--gold-rgb),.06);border-color:var(--rule-2)}
    .appbar .pick-btn.logo{gap:.45rem}
    .appbar .pick-btn.logo .setbox{width:74px;height:22px;padding:0;border-right:none}
    .appbar .pk-meta{display:flex;border-left:1px solid var(--rule-2);padding-left:.45rem;min-width:0;overflow:hidden}
    .appbar .pk-n,.appbar .pk-d{overflow:hidden;text-overflow:ellipsis;max-width:100%}
    .appbar .pick-btn.logo .setbox img{max-height:22px}
    .appbar .pick-btn.logo .ca{font-size:.66rem}
    .appbar .pick-pop{top:calc(100% + 4px);left:0;right:auto;width:min(300px,calc(100vw - 1.4rem))}
}

/* context band — season-less pages keep the chrome and the palette, but the set
   mark is passive (no dropdown) and the bar carries the page's own label. */
.hero.ctx .setbox.mark{border-right:1px solid var(--rule-2);padding-right:.9rem}
.hero.ctx .h-info{padding-left:.9rem}
.hero.ctx .h-name{color:var(--gold-pale)}

/* ── slim season band ──
   For deep pages (profile, tournament detail) where the page's own header already
   names the context. Same set-driven theming, one line, fixed geometry. */
.hero.slim{--setbox-w:118px;--setbox-h:26px;--hero-h:50px;gap:.9rem;background:linear-gradient(100deg,rgba(var(--acc-rgb),.13),transparent 55%);border-bottom:1px solid var(--rule-2)}
.hero.slim .pick+.h-info{padding-left:.9rem}
.hero.slim .pick-btn.logo{gap:.5rem;padding:.2rem .35rem .2rem 0}
.hero.slim .h-info{min-height:0;gap:0;flex-direction:row;align-items:center;gap:.7rem}
.hero.slim .h-eye{display:none}
.hero.slim .h-name{font-size:.86rem;letter-spacing:.13em;line-height:1.2}
.hero.slim .h-line{gap:.55rem}
.hero.slim .h-dates{font-size:.66rem}
.hero.slim .pillbox{font-size:.54rem;padding:.12rem .42rem}

@media (max-width:900px){.hero.slim{--setbox-w:104px;--setbox-h:24px;--hero-h:48px}}
@media (max-width:720px){
    .hero.slim{--setbox-w:96px;--setbox-h:22px;--hero-h:46px;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:none;gap:.6rem;padding:0 var(--gut);text-align:left;align-content:center}
    .hero.slim .setbox{grid-area:auto;width:var(--setbox-w);height:var(--setbox-h);justify-content:flex-start;border-right:1px solid var(--rule-2);border-bottom:none;padding-right:.6rem;padding-bottom:0}
    .hero.slim .h-info{grid-area:auto;align-items:center;justify-content:flex-start}
    .hero.slim .h-name{font-size:.76rem}
    .hero.slim .h-line{display:flex;gap:.45rem;min-width:0}
    .hero.slim .h-dates{display:inline;font-size:.6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .hero.slim .pillbox{display:none}
    .hero.slim .pick{width:auto}
}

/* ══ kpis ══ */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);padding:.2rem var(--gut);border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);background:none}
.kpi{padding:.8rem 1rem;text-align:center;position:relative}
.kpi+.kpi::before{content:'';position:absolute;left:0;top:22%;bottom:22%;width:1px;background:var(--rule-2)}
.kpi .v{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:clamp(1.2rem,1.9vw,1.6rem);color:var(--gold-pale);line-height:1.1;font-variant-numeric:tabular-nums}
.kpi:nth-child(1) .v{color:var(--acc-hot)}
.kpi:nth-child(2) .v{color:var(--acc2)}
.kpi .l{font-size:.56rem;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3);margin-top:.42rem}

/* ══ sections ══ */
.sect{padding:1.75rem var(--gut)}
.sec-h{display:flex;align-items:center;gap:.8rem;margin-bottom:.95rem}
.sec-h h2{font-size:.74rem;letter-spacing:.24em;color:var(--gold);white-space:nowrap}
.sec-h .r{flex:1;height:1px;background:var(--rule-2)}
.sec-h .m{font-family:'Rajdhani',sans-serif;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.hi-row{display:grid;grid-template-columns:1.15fr 1.15fr .9fr;gap:.8rem}
.panel{background:none;border:1px solid var(--rule-2);padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.5rem;color:inherit;transition:border-color .18s,background .18s}
a.panel:hover{border-color:rgba(var(--acc-rgb),.5);background:var(--plate-3)}
.tag{display:inline-flex;align-items:center;gap:.3rem;font-family:'Rajdhani',sans-serif;font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;padding:.15rem .45rem;border:1px solid}
.tag.new{color:var(--acc-hot);border-color:rgba(var(--acc-rgb),.45);background:rgba(var(--acc-rgb),.12)}
.tag.live{color:#e08a86;border-color:rgba(196,86,79,.5);background:rgba(196,86,79,.12)}
.p-eye{display:flex;align-items:center;gap:.5rem;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.p-title{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:1rem;line-height:1.28;color:var(--ink);text-transform:none;letter-spacing:.02em}
.p-body{font-size:.79rem;line-height:1.6;color:var(--ink-2)}
.p-cta{font-family:'Rajdhani',sans-serif;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-top:auto}
.mini-col{display:flex;flex-direction:column;gap:.8rem}
.mini{display:flex;align-items:center;gap:.7rem;background:none;border:1px solid var(--rule-2);padding:.75rem .9rem;flex:1;color:inherit;transition:border-color .18s,background .18s}
.mini:hover{border-color:rgba(var(--acc-rgb),.5);background:var(--plate-3)}
.mini .ic{width:29px;height:29px;flex-shrink:0;display:grid;place-items:center;border:1px solid var(--rule);background:rgba(var(--gold-rgb),.07);font-size:.9rem}
.mini .tx{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.mini .n{font-family:'Rajdhani',sans-serif;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
.mini .s{font-size:.67rem;color:var(--ink-3)}

.fav-band{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.fav-band .l{font-family:'Rajdhani',sans-serif;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dim);white-space:nowrap}
.fav{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--rule-2);background:none;padding:.3rem .55rem;font-size:.78rem;color:var(--ink)}
.fav:hover{border-color:rgba(var(--acc-rgb),.5);color:var(--ink)}
.fav b{font-variant-numeric:tabular-nums;color:var(--gold);font-weight:700;font-size:.73rem}

/* ══ directory ══ */
.dir-h{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:.9rem}
.dir-h h2{font-size:1rem;letter-spacing:.15em}
.dir-h .t{font-size:.64rem;letter-spacing:.08em;color:var(--ink-3);border:1px solid var(--rule-2);padding:.18rem .5rem}
.dir-h .f{margin-left:auto;width:min(292px,100%);position:relative}
.dir-h .f .si{position:absolute;left:.72rem;top:50%;transform:translateY(-50%);color:var(--ink-4);font-size:.8rem;pointer-events:none}
.inp{width:100%;background:var(--paper);border:1px solid var(--rule);color:var(--ink);font-family:inherit;font-size:.85rem;padding:.52rem .8rem .52rem 2.1rem;outline:none;transition:border-color .18s}
.inp:focus{border-color:rgba(var(--acc-rgb),.6)}
.inp::placeholder{color:var(--ink-4)}
.ctry{border-bottom:1px solid var(--rule-2);margin-bottom:.2rem}
.ctry-bar{width:100%;display:flex;align-items:center;gap:.65rem;padding:.55rem .8rem;background:linear-gradient(180deg,rgba(var(--gold-rgb),.06),transparent);border:none;border-left:3px solid rgba(var(--acc-rgb),.65);cursor:pointer;color:inherit;text-align:left;transition:background .18s}
.ctry-bar:hover{background:linear-gradient(180deg,rgba(var(--gold-rgb),.13),transparent)}
.ctry-bar .fi{font-size:1rem;flex-shrink:0}
.ctry-bar h3{font-size:.84rem;letter-spacing:.13em;white-space:nowrap}
.ctry-bar .ch{font-size:.52rem;color:var(--gold-dim);transition:transform .2s}
.ctry.open .ctry-bar .ch{transform:rotate(90deg)}
.cs{margin-left:auto;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.cs span{font-size:.69rem;color:var(--ink-3);white-space:nowrap}
.cs span b{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:700}
.cs .rk{font-family:'Rajdhani',sans-serif;font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);border:1px solid var(--rule);padding:.2rem .5rem}
.cs .rk:hover{background:rgba(var(--gold-rgb),.12)}
.ctry-body{display:none;padding:1rem 0 1.3rem}
.ctry.open .ctry-body{display:block}
.state{margin-bottom:.85rem}
.state:last-child{margin-bottom:0}
.st-h{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.st-h h4{font-size:.62rem;letter-spacing:.2em;color:var(--gold-dim)}
.st-h .c{font-size:.58rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.st-h .ln{flex:1;height:1px;background:var(--rule-2)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:.55rem}
.cc{background:none;border:1px solid var(--rule-2);padding:.7rem .8rem;color:inherit;display:block;transition:border-color .18s,background .18s}
.cc:hover{border-color:rgba(var(--acc-rgb),.55);background:var(--plate-3)}
.cc-t{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;padding-bottom:.45rem;margin-bottom:.5rem;border-bottom:1px solid var(--rule-2)}
.cc-n{font-family:'Rajdhani',sans-serif;font-size:.84rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);line-height:1.2}
.cc-e{font-variant-numeric:tabular-nums;font-weight:700;font-size:.77rem;color:var(--acc-hot)}
.cc-s{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem}
.cc-s .v{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.92rem;color:var(--gold-pale);line-height:1;font-variant-numeric:tabular-nums}
.cc-s .l{font-size:.51rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:.22rem}

.foot{padding:2rem var(--gut) 1.6rem;border-top:1px solid var(--rule-2);text-align:center;background:none}
.foot .fw{font-family:'Rajdhani',sans-serif;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:.45rem}
.foot p{font-size:.65rem;color:var(--ink-3);line-height:1.7}

@media (max-width:1180px){
    .ab-link,.ab-mbtn{padding:0 .55rem;font-size:.63rem}
    .ab-admin{display:none}
    .ab-search{max-width:300px;margin:0 .6rem}
    :root{--gut:1.1rem}
    .hi-row{grid-template-columns:1fr 1fr}
    .mini-col{grid-column:1/-1;flex-direction:row}
}
@media (max-width:900px){
    :root{--setbox-w:214px;--setbox-h:60px;--hero-h:132px}
    .ab-link,.ab-menu,.ab-search,.ab-right{display:none}
    .appbar{height:46px;align-items:center;padding:0 .35rem}
    .ab-burger,.ab-sbtn{display:flex}
    .ab-sbtn{margin-left:auto}
    .hero{gap:1rem}
    .pick+.h-info{padding-left:1rem}
}
@media (max-width:720px){
    body{font-size:14px}
    :root{--setbox-w:118px;--setbox-h:48px;--hero-h:88px}
    :root{--gut:.9rem}
    .gamebar{padding:.6rem var(--gut);gap:.7rem;flex-wrap:wrap;justify-content:center}
    .gb-logo{height:32px}
    .gb-word{font-size:1.02rem;letter-spacing:.1em;padding-left:.7rem}
    .gb-right{width:100%;margin-left:0;justify-content:center;border-top:1px solid var(--rule-2);padding-top:.45rem;font-size:.6rem}
    .hero{grid-template-columns:auto minmax(0,1fr);gap:.7rem;height:var(--hero-h);min-height:0;padding:0 var(--gut);align-content:center;text-align:left}
    .h-line{flex-direction:column;flex-wrap:nowrap;gap:.3rem;white-space:nowrap}
    .setbox{width:var(--setbox-w);height:var(--setbox-h);justify-content:center;border-right:none;padding:0;box-sizing:content-box}
    .pick+.h-info{padding-left:.8rem}
    .pick-btn.logo{gap:.3rem;padding:.25rem .3rem .25rem 0}
    .pick-btn.logo .ca{font-size:.72rem}
    .h-info{height:auto;min-height:0;align-items:flex-start;justify-content:center;gap:.3rem}
    .h-eye{display:none}
    .h-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-size:.98rem;line-height:1.25}
    .h-line{align-items:flex-start;align-self:stretch}
    .h-dates{white-space:nowrap;font-size:.62rem;overflow:hidden;text-overflow:ellipsis;max-width:100%}
    .nm-long,.dt-long{display:none}
    .nm-short,.dt-short{display:inline}
    .pick{width:auto}
    .pick-pop{right:auto;left:0;width:min(300px,calc(100vw - 1.8rem))}
    .kpis{grid-template-columns:1fr 1fr}
    .kpi{padding:.7rem .6rem}
    .kpi:nth-child(3),.kpi:nth-child(4){border-top:1px solid var(--rule-2)}
    .kpi:nth-child(3)::before{display:none}
    .sect{padding:1.25rem var(--gut)}
    .hi-row{grid-template-columns:1fr;gap:.55rem}
    .mini-col{flex-direction:column;gap:.55rem}
    .panel{padding:.85rem .95rem}
    .dir-h .f{margin-left:0;width:100%;order:3}
    .ctry-bar{flex-wrap:wrap;padding:.5rem .7rem}
    .cs{width:100%;margin-left:0;gap:.65rem;justify-content:space-between;padding-top:.45rem;margin-top:.15rem;border-top:1px solid var(--rule-2)}
    .cs span{font-size:.64rem}
    .grid{grid-template-columns:1fr;gap:.45rem}
    .inp{font-size:16px}
    .foot{padding:1.4rem var(--gut) 1.1rem}
}

/* ══════════════════════════════════════════════════════════════════════════
   Site additions — NOT in the design handoff. Everything below this line is
   eloshowdown-specific; keep the handoff portion above diffing cleanly
   against docs/planning/handoff/season-theme.css.
   ══════════════════════════════════════════════════════════════════════════ */

/* Rank tier colors — season-independent (tier ladder, docs/elo.md). */
:root{
    --tier-challenger:#f4c874;--tier-grandmaster:#e44e4e;--tier-master:#bc3fdc;
    --tier-diamond:#576cce;--tier-emerald:#2dbb6e;--tier-platinum:#27b0a0;
    --tier-gold:#c8aa6e;--tier-silver:#8a9aaa;--tier-bronze:#a0714e;--tier-iron:#5e5e5e;
}

/* Favourite stars inside the nav-search results (localStorage rb_fav_players). */
.ab-sr .ab-star{flex:0 0 auto;background:none;border:none;cursor:pointer;font-size:.95rem;line-height:1;padding:.15rem .3rem;color:var(--ink-4);transition:color .12s,transform .12s;-webkit-tap-highlight-color:transparent}
.ab-sr .ab-star:hover{transform:scale(1.15);color:var(--gold-dim)}
.ab-sr .ab-star.on{color:var(--gold)}
.ab-sr-main{flex:1 1 auto;display:flex;align-items:center;gap:.5rem;min-width:0;color:inherit}
.ab-sc.star{color:var(--gold)}

/* Maintenance banner — populated by the /maintenance-status/ poll in base. */
#maintenance-banner{display:none;background:linear-gradient(90deg,var(--tint-2),var(--tint) 50%,var(--tint-2));border-bottom:2px solid var(--acc);color:var(--gold-pale);text-align:center;padding:.75rem 1rem;font-size:.85rem;font-weight:500;letter-spacing:.03em;position:relative;z-index:100}
#maintenance-banner .gear{color:var(--acc-hot);margin:0 .5rem}

/* Bottom ad bar — fixed strip on the page ground; Ko-fi floats over its
   corner (wrapper z-index 99999999 > ad bar 9999; see old base notes). */
body{padding-bottom:102px}
#ad-bottom-bar{position:fixed;bottom:0;left:0;right:0;z-index:9999;background:var(--plate-2);border-top:1px solid var(--rule);text-align:center;padding:6px 0}
@media (max-width:768px){
    #ad-bottom-bar{padding:4px 0!important;height:58px!important;max-height:58px!important;overflow:hidden!important}
    #ad-bottom-bar ins,#ad-bottom-bar iframe,#ad-bottom-bar ins>*,#ad-bottom-bar>*{width:320px!important;height:50px!important;max-height:50px!important}
    body{padding-bottom:58px}
}

/* Ko-fi floating widget: pin into the ad-bar corner. Ko-fi sets z-index
   !important but not position, so plain !important on position wins. */
.floatingchat-container-wrap,.floatingchat-container-wrap-mobi{left:auto!important;right:14px!important;bottom:6px!important;transform:scale(.9);transform-origin:bottom right}
@media (max-width:768px){.floatingchat-container-wrap-mobi{bottom:6px!important;width:100%!important;max-width:180px!important;transform:scale(.65);transform-origin:bottom right}}
.floating-chat-kofi-popup-iframe,.floating-chat-kofi-popup-iframe-mobi{left:auto!important;right:14px!important;bottom:72px!important}

/* Game-plate wordmark is a home link (wraps the mark + wordmark, so the
   gamebar's own flex gap no longer separates them — restate it here). */
.gb-home{display:inline-flex;align-items:center;gap:1.15rem;text-decoration:none;color:inherit;min-height:44px}
.gb-home:hover .gb-word{color:var(--gold-pale)}
.gb-home:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (max-width:720px){.gb-home{gap:.7rem}}