/* ━━━ TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root{
--bg:#060606; --bg-c:#0f0f0f; --bg-c2:#0a0a0a;
--acc:#FF6A00; --acc-dim:rgba(255,106,0,.13);
--gold:rgba(255,186,74,.48); --gold-leg:#FFBA4A;
--bar:rgba(255,107,0,.48); --bar-leg:#FF6B00;
--rel:rgba(205,0,0,.48); --rel-leg:#CD0000;
--champ:rgba(255,215,0,.55); --champ-leg:#FFD700;
--row:rgba(35,35,35,.55);
--txt:#fff; --muted:rgba(255,255,255,.52); --dim:rgba(255,255,255,.18);
--brd:rgba(255,255,255,.055); --brd2:rgba(255,255,255,.11);
--r:0px; --r-sm:0px;
/* area-extended = headings, area = everything else */
--ft:area-extended,area,sans-serif;
--fb:area-extended,area,sans-serif;
--hh:70px;
--section-gap:120px;
--block-gap:120px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--ft);font-weight:500;background:var(--bg);color:var(--txt);min-height:100vh;overflow-x:hidden;position:relative}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;color:inherit;font:inherit}
img{display:block;max-width:100%}
select{appearance:none;-webkit-appearance:none}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px}
/* ━━━ FIRE BG ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body::before{
content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
background:
radial-gradient(ellipse 52% 60% at -6% 16%, rgba(255,55,0,.58) 0%, rgba(190,25,0,.22) 30%, transparent 60%),
radial-gradient(ellipse 52% 60% at 106% 16%, rgba(255,55,0,.58) 0%, rgba(190,25,0,.22) 30%, transparent 60%),
radial-gradient(ellipse 90% 16% at 50% 0%, rgba(170,20,0,.44) 0%, transparent 52%);
animation:flk 7s ease-in-out infinite;
}
@keyframes flk{0%,100%{opacity:1}50%{opacity:.8}}
#nav,#app,footer{position:relative;z-index:1}
/* ━━━ NAV ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#nav{
position:fixed;top:0;left:0;right:0;height:var(--hh);z-index:1000;
background-color:transparent;
background-image:url('https://raw.githubusercontent.com/AgoyyaProd/overdrive-assets/main/nav-footer-texture.jpg');
background-size:cover;background-position:center;
border-bottom:1px solid rgba(255,255,255,.12);
}
.ni{position:relative;z-index:10;width:66%;max-width:3200px;margin:0 auto;height:100%;display:flex;align-items:center;padding:0 32px;gap:16px}
@media(max-width:768px){.ni{width:100%}}
.nl{margin-left:auto;padding-left:80px;align-self:stretch}
/* brand */
.nb{display:flex;align-items:center;gap:0;cursor:pointer;flex-shrink:0}
.nb img{height:36px;object-fit:contain}
/* nav links with dropdown */
.nl{display:flex;align-items:center;gap:0}
.nav-item{position:relative;display:flex;align-items:center;align-self:stretch}
.nav-item.open .dd-arr{transform:rotate(180deg)}
.nlk{
font-family:var(--ft);font-weight:400;font-size:13px;letter-spacing:.09em;text-transform:uppercase;
color:#fff;padding:8px 13px;cursor:pointer;
transition:color .15s,background .15s;white-space:nowrap;display:flex;align-items:center;gap:5px;
}
.nlk:hover{color:#fff;font-weight:950}
.nlk.on{color:#fff;font-weight:950}
.dd-arr{display:inline-flex;align-items:center;opacity:.85;transition:transform .2s}
/* dropdown: visibility is controlled by JS via the .open class on .nav-item,
not by :hover, so it never closes mid-move along an imperfect pointer path. */
.dd{
position:absolute;top:100%;left:50%;transform:translateX(-50%);
background:#111;border:1px solid var(--brd2);
padding:6px;min-width:170px;z-index:200;
display:flex;flex-direction:column;gap:2px;
box-shadow:0 16px 40px rgba(0,0,0,.6);
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .12s ease;
}
.nav-item.open .dd{opacity:1;visibility:visible;pointer-events:auto}
/* Solid invisible bridge spanning the gap, so the pointer is never over "nothing"
between the nav item and the menu. */
.dd::before{content:'';position:absolute;top:-12px;left:-12px;right:-12px;height:14px}
.ddi{
padding:9px 14px;font-family:var(--ft);font-weight:500;
font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:#fff;
cursor:pointer;transition:all .15s;white-space:nowrap;
}
.ddi:hover{color:var(--acc);background:var(--acc-dim)}
.ddi-sep{height:1px;background:var(--brd);margin:4px 0}
/* Submenu expands vertically below its parent row, inside the dropdown's flow,
so it reads as a nested list rather than a second floating panel. */
.ddi-sub{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0}
.ddi-sub-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;cursor:default}
.dd-sub-arr{display:inline-flex;align-items:center;opacity:.7;transition:transform .2s}
.ddi-sub.open .dd-sub-arr{transform:rotate(90deg)}
.dd-sub{
display:flex;flex-direction:column;gap:2px;
padding:0 0 0 12px;margin:0;
border-left:1px solid var(--brd2);
max-height:0;overflow:hidden;
opacity:0;visibility:hidden;pointer-events:none;
transition:max-height .18s ease,opacity .12s ease,margin .18s ease;
}
.ddi-sub.open .dd-sub{
max-height:300px;margin:4px 0 2px 8px;
opacity:1;visibility:visible;pointer-events:auto;
}
/* ━━━ MOBILE NAV ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.nav-burger{display:none;flex-direction:column;justify-content:center;align-items:flex-end;gap:5px;width:36px;height:36px;margin-left:auto;flex-shrink:0}
.nav-burger span{display:block;width:22px;height:2px;background:#fff;transition:transform .2s ease,opacity .15s ease,width .2s ease}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);width:22px}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);width:22px}
.mnav-backdrop{position:fixed;left:0;right:0;bottom:0;top:var(--hh);background:rgba(0,0,0,.62);z-index:999;opacity:0;visibility:hidden;transition:opacity .18s ease;backdrop-filter:blur(2px)}
.mnav-backdrop.open{opacity:1;visibility:visible}
.mnav{
position:fixed;top:var(--hh);left:0;right:0;z-index:1000;background:#0a0a0a;
border-bottom:1px solid var(--brd2);max-height:calc(100vh - var(--hh));overflow-y:auto;
transform:translateY(-6px);opacity:0;visibility:hidden;pointer-events:none;
transition:transform .18s ease,opacity .18s ease;
}
.mnav.open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto}
.mnav-item{border-bottom:1px solid var(--brd)}
.mnav-lk{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:17px 24px;font-family:var(--ft);font-weight:700;font-size:14px;
letter-spacing:.08em;text-transform:uppercase;color:#fff;cursor:pointer;
}
.mnav-lk.on{color:var(--acc)}
.mnav-arr{display:inline-flex;align-items:center;flex-shrink:0;opacity:.8;transition:transform .2s ease}
.mnav-item.open>.mnav-lk .mnav-arr{transform:rotate(180deg)}
.mnav-sub{max-height:0;overflow:hidden;background:rgba(255,255,255,.025);transition:max-height .22s ease}
.mnav-item.open .mnav-sub{max-height:600px}
.mnav-lk-parent2{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:14px 24px 14px 36px;font-family:var(--ft);font-weight:700;font-size:12px;
letter-spacing:.08em;text-transform:uppercase;color:var(--muted);cursor:pointer;
}
.mnav-sub2{max-height:0;overflow:hidden;transition:max-height .2s ease}
.mnav-sub2.open{max-height:260px}
.mnav-lk-parent2:has(+ .mnav-sub2.open) .mnav-arr{transform:rotate(180deg)}
.mnav-lk-sub{
display:block;padding:12px 24px 12px 48px;font-family:var(--ft);font-weight:500;
font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);cursor:pointer;
}
.mnav-lk-sub-top{padding-left:36px}
.mnav-lk-sub:active{color:var(--acc)}
@media(max-width:900px){
.nl{display:none}
.nav-burger{display:flex}
.ni{width:100%}
}
@media(min-width:901px){
.mnav,.mnav-backdrop{display:none}
}
/* ━━━ APP ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#app{padding-top:var(--hh);min-height:100vh}
/* ━━━ FOOTER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
footer{
border-top:1px solid rgba(255,255,255,.12);
background-color:transparent;
background-image:url('https://raw.githubusercontent.com/AgoyyaProd/overdrive-assets/main/nav-footer-texture.jpg');
background-size:cover;background-position:center;position:relative;
}
.fi{position:relative;z-index:2;width:66%;max-width:3200px;margin:0 auto;padding:20px 40px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
@media(max-width:768px){.fi{width:100%}}
.fb2{display:flex;align-items:center;gap:10px;font-family:var(--ft);font-weight:900;font-size:13px;letter-spacing:.07em;text-transform:uppercase}
.fb2 img{height:36px;object-fit:contain}
.fr-block{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:6px;text-align:right}
.fsoc{display:flex;align-items:center;gap:14px;margin-bottom:2px}
.fsoc a{color:#fff;display:flex;transition:opacity .15s}
.fsoc a:hover{opacity:.7}
.fsoc svg{width:18px;height:18px}
.fc2{color:#fff;font-family:var(--ft);font-weight:900;font-size:13px;letter-spacing:.02em}
.fl2{color:rgba(255,255,255,.55);font-family:var(--ft);font-weight:500;font-size:13px;letter-spacing:.02em}
.fl2 a{color:rgba(255,255,255,.92);text-decoration:none;cursor:pointer;transition:color .15s}
.fl2 a:hover{color:#fff;text-decoration:underline}
/* Below 768px the footer wraps to a stacked layout (logo, then copyright/links),
but it had never received its own sizing pass - it just kept the desktop gap,
padding and font sizes, sprawling well past the logo's own height. Centered,
tighter, and smaller so the whole block reads as one compact unit under the
logo instead of three loosely related rows. */
@media(max-width:768px){
.fi{padding:16px 20px;gap:6px;justify-content:center}
.fb2 img{height:28px}
.fr-block{align-items:center;text-align:center;gap:3px}
.fsoc{gap:16px;margin-bottom:6px}
.fsoc svg{width:16px;height:16px}
.fc2{font-size:10px}
.fl2{font-size:10px}
}
.fl{display:flex;gap:18px;flex-wrap:wrap}
.fl a{color:var(--muted);font-family:var(--ft);font-size:12px;font-weight:500;transition:color .15s}
.fl a:hover{color:var(--txt)}
.fc{color:var(--dim);font-family:var(--ft);font-size:12px}
/* ━━━ LOADING ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ldg{display:flex;flex-direction:column;align-items:center;justify-content:center;height:70vh;gap:16px}
.sp{width:32px;height:32px;border:2.5px solid var(--brd);border-top-color:var(--acc);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.ldg-l{font-family:var(--ft);font-weight:900;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
/* ━━━ PAGE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.pg{width:66%;max-width:3200px;margin:0 auto;padding:var(--section-gap) 40px}
@media(max-width:768px){.pg{width:100%;padding:56px 20px}}
/* ━━━ TITLE SYSTEM ━━━━━━━━━━━━━━━━━━━━━━━━ */
/* section eyebrow – area normale */
.sl{font-family:var(--ft);font-weight:500;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--txt);opacity:.65;margin-bottom:5px}
.sl-label{font-family:var(--ft);font-weight:500;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
/* big titles – area extended uniquement */
.dt{font-family:var(--ft);font-weight:900;font-size:54px;text-transform:uppercase;line-height:.9;margin-bottom:32px}
.dt em{font-style:normal;color:var(--acc)}
/* ━━━ SCHEDULE DAY NAVIGATOR ━━━━━━━━━━━━━━━━ */
.sch-nav{display:flex;align-items:center;margin-bottom:28px}
.sch-list{max-height:900px;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;padding-right:8px;scrollbar-width:none;-ms-overflow-style:none}
.sch-list::-webkit-scrollbar{display:none}
.sch-list::-webkit-scrollbar{width:6px}
.sch-list::-webkit-scrollbar-track{background:transparent}
.sch-list::-webkit-scrollbar-thumb{background:var(--brd2);border-radius:99px}
.sch-nav-dow{font-family:var(--ft);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.sch-nav-ctrl{display:inline-flex;align-items:center;background:rgba(255,255,255,.055);border-radius:999px;padding:5px;gap:3px;flex-shrink:0}
.sch-arr{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--txt);font-size:19px;cursor:pointer;transition:background .15s;flex-shrink:0}
.sch-arr:hover{background:rgba(255,255,255,.08)}
.sch-today{padding:13px 30px;border-radius:999px;font-family:var(--ft);font-weight:900;font-size:16px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:all .15s}
.sch-today.on{background:rgba(255,106,0,.88);color:#fff}
.sch-today:not(.on):hover{color:var(--txt)}
.dt em{font-style:normal;color:var(--acc)}
.dt-md{font-family:var(--ft);font-weight:900;font-size:38px;text-transform:uppercase;line-height:.9}
@media(max-width:600px){.dt{font-size:26px;margin-bottom:18px}.dt-md{font-size:18px}}
/* ━━━ ABOUT SECTION ━━━━━━━━━━━━━━━━━━━━━━━ */
.ab-wrap{width:66%;max-width:3200px;margin:0 auto;padding:var(--section-gap) 40px var(--block-gap);display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
@media(max-width:900px){.ab-wrap{width:100%;grid-template-columns:1fr;padding:56px 20px;gap:32px}}
.ab-h1{font-family:var(--ft);font-weight:900;font-size:40px;text-transform:uppercase;line-height:.95;margin-bottom:26px}
@media(max-width:600px){.ab-h1{font-size:26px;margin-bottom:16px}}
.ab-h1 em{font-style:normal;color:var(--acc)}
.ab-p{font-family:var(--ft);font-weight:300;font-size:15px;line-height:1.85;color:var(--muted);margin-bottom:24px}
@media(max-width:600px){.ab-p{font-size:14px}}
/* Legal/Privacy section headers previously reused .dt-md (a 38px page-level
heading meant for things like "SPONSORS") with inline margin overrides - a
size mismatched to a sub-heading role, and a spacing rhythm patched per-use
instead of defined once. This is sized for the job and spaced consistently:
generous space above (separating from the previous section) and enough below
to visually attach it to its own paragraph rather than float between both. */
.legal-sec{font-family:var(--ft);font-weight:900;font-size:15px;letter-spacing:.03em;text-transform:uppercase;color:var(--txt);margin:32px 0 12px}
.legal-sec.first{margin-top:28px}
@media(max-width:600px){.legal-sec{font-size:13px;margin:26px 0 10px}.legal-sec.first{margin-top:20px}}
/* "Play Yourself" reuses the same section-header/paragraph pattern as Legal/
Privacy, but reads as a proper explainer page rather than a document - sized
up a step from .legal-sec/.ab-p's compact, legal-text scale. */
.htp-sec{font-family:var(--ft);font-weight:900;font-size:19px;letter-spacing:.02em;text-transform:uppercase;color:var(--txt);margin:36px 0 14px}
.htp-sec.first{margin-top:30px}
.htp-p{font-family:var(--ft);font-weight:300;font-size:16px;line-height:1.85;color:var(--muted);margin-bottom:24px}
@media(max-width:600px){.htp-sec{font-size:16px;margin:28px 0 12px}.htp-sec.first{margin-top:22px}.htp-p{font-size:15px}}
/* ━━━ MEDIA KIT ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.mk-acc-list{margin-top:28px;border-top:1px solid var(--brd)}
.mk-acc{border-bottom:1px solid var(--brd)}
.mk-acc-h{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
background:none;border:none;cursor:pointer;padding:20px 4px;text-align:left;
font-family:var(--ft);font-weight:900;font-size:16px;letter-spacing:.03em;text-transform:uppercase;color:var(--txt)}
.mk-acc-arrow{width:16px;height:16px;flex-shrink:0;color:var(--muted);transition:transform .2s}
.mk-acc.open > .mk-acc-h .mk-acc-arrow{transform:rotate(180deg)}
/* grid-template-rows 0fr → 1fr animates to the content's real height without any
JS measuring it first - handles a 5-column logo grid and a short list of
regions the same way, and keeps working if the content changes later. */
.mk-acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.mk-acc.open > .mk-acc-body{grid-template-rows:1fr}
.mk-acc-inner{overflow:hidden;min-height:0}
/* Grid rows still leave a faint sliver of a collapsed row's content peeking
through at "0fr" (the cards inside have their own minimum size), so a fully
collapsed section is also explicitly hidden rather than relying on height
alone to suppress it. */
.mk-acc:not(.open) > .mk-acc-body{visibility:hidden}
/* Nested (type/region) accordion sits visually inside its parent, slightly
indented and with a thinner header - reads as one level down, not a sibling
section of the same weight as OVERDRIVE/REGIONALS. */
.mk-acc-sub{border-bottom:1px solid var(--brd);margin-left:4px}
.mk-acc-sub:last-child{border-bottom:none}
.mk-acc-sub > .mk-acc-h{font-size:13px;font-weight:700;padding:14px 4px}
.mk-acc-sub .mk-acc-inner{padding:4px 0 20px}
.mk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:8px}
.mk-grid-5{grid-template-columns:repeat(5,1fr)}
.mk-card{position:relative;background:var(--bg-c2);border:1px solid var(--brd);overflow:hidden}
/* Flat anthracite instead of a checkerboard - still readable for both black and
white logo variants without the busy, eye-straining pattern. */
.mk-preview{
aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:22px;
background-color:#3a3a3d;
}
.mk-preview img{width:100%;height:100%;object-fit:contain}
.mk-label{padding:10px 12px 14px;font-family:var(--ft);font-weight:700;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-align:center;border-top:1px solid var(--brd)}
/* Hover reveals a full-card download overlay rather than a small corner button -
a bigger, unambiguous target, and it doesn't compete for space with the small
preview image underneath it. */
.mk-dl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
background:rgba(10,10,10,.92);color:var(--txt);text-decoration:none;opacity:0;transition:opacity .15s;cursor:pointer}
.mk-card:hover .mk-dl{opacity:1}
.mk-dl svg{width:26px;height:26px;color:var(--acc)}
.mk-dl span{font-family:var(--ft);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
@media(max-width:900px){.mk-grid{grid-template-columns:repeat(2,1fr)}.mk-grid-5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:500px){
.mk-acc-h{font-size:14px;padding:16px 2px}
.mk-acc-sub > .mk-acc-h{font-size:12px}
.mk-grid{gap:10px}
.mk-grid-5{grid-template-columns:repeat(2,1fr)}
.mk-label{font-size:9px;padding:8px 8px 10px}
.mk-dl svg{width:20px;height:20px}
.mk-dl span{font-size:9px}
/* Hover doesn't really exist on touch - the overlay stays lightly visible so
there's still an obvious tap target instead of relying on a hover that
won't fire. */
.mk-dl{opacity:.9;background:rgba(10,10,10,.75)}
}
/* ━━━ CONTACT FORM ━━━━━━━━━━━━━━━━━━━━━━━━ */
.cf{max-width:520px;margin:36px auto 0;display:flex;flex-direction:column;gap:20px}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cf-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.cf-field label{font-family:var(--ft);font-weight:700;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.cf-field input,.cf-field textarea{
background:var(--bg-c2);border:1px solid var(--brd2);color:var(--txt);
font-family:var(--ft);font-weight:500;font-size:14px;padding:12px 14px;
border-radius:var(--r);outline:none;transition:border-color .15s;resize:vertical;
}
.cf-field input:focus,.cf-field textarea:focus{border-color:var(--acc)}
.cf button[type=submit]{border:none;cursor:pointer;align-self:center;min-width:180px}
.cf button[type=submit]:disabled{opacity:.6;cursor:default}
.cf-status{font-family:var(--ft);font-weight:700;font-size:12px;text-align:center;margin:0;min-height:16px}
.cf-status.ok{color:#5fbf6a}
.cf-status.err{color:#e0605a}
@media(max-width:600px){.cf-row{grid-template-columns:1fr}}
/* ━━━ POWER RANKING EXPLAINER ━━━━━━━━━━━━━ */
.pr-exp{margin-top:64px;padding-top:44px;border-top:1px solid var(--brd)}
.pr-intro{font-family:var(--ft);font-weight:500;font-size:15px;line-height:1.75;color:var(--muted);margin-bottom:44px;text-wrap:pretty}
/* Numbered section heads: the accent rule and index echo the match-card treatment. */
.pr-sec{display:flex;align-items:center;gap:12px;margin:0 0 20px}
.pr-sec-i{font-family:var(--ft);font-weight:900;font-size:11px;letter-spacing:.1em;color:var(--acc)}
.pr-sec-t{font-family:var(--ft);font-weight:900;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt)}
.pr-block{margin-bottom:52px}
.pr-note{font-family:var(--ft);font-weight:500;font-size:13px;line-height:1.75;color:var(--muted);margin-top:16px;text-wrap:pretty}
.pr-note b{font-weight:700;color:var(--txt)}
/* Base-score cards, styled like the About page stat boxes. */
.pr-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.pr-card{padding:22px 24px}
.pr-card-n{font-family:var(--ft);font-weight:900;font-size:32px;line-height:1;margin-bottom:8px}
.pr-card-l{font-family:var(--ft);font-weight:700;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
/* The four scoring criteria. */
/* Stage multipliers: a bar chart reads the weighting faster than a plain list. */
.pr-mult{display:flex;flex-direction:column;gap:2px;margin-top:14px}
.pr-m{display:grid;grid-template-columns:170px 1fr 58px;align-items:center;gap:14px;padding:9px 16px;background:rgba(255,255,255,.03)}
.pr-m-l{font-family:var(--ft);font-weight:500;font-size:12px;color:var(--muted)}
.pr-m-bar{height:6px;background:rgba(255,255,255,.06);position:relative;overflow:hidden}
.pr-m-fill{position:absolute;inset:0 auto 0 0;background:var(--acc)}
.pr-m-v{font-family:var(--ft);font-weight:900;font-size:13px;color:var(--acc);text-align:right}
@media(max-width:600px){.pr-m{grid-template-columns:120px 1fr 48px;gap:10px;padding:9px 12px}}
/* ━━━ HOME MATCH CARD ━━━━━━━━━━━━━━━━━━━━━━ */
.ab-h1 em{font-style:normal;color:var(--acc)}
.sl-label{font-family:var(--ft);font-weight:500;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.ab-btns{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
/* ━━━ ABOUT HERO (redesigned) ━━━━━━━━━━━━━ */
/* Text and CTA on one side, a single unified stat strip on the other - instead of
paragraphs/buttons/three-separate-boxes all stacked in one column, which read as
three unrelated pieces rather than one considered block. */
.abh-grid{display:grid;grid-template-columns:1fr 260px;gap:56px;align-items:start;padding-top:8px}
.abh-text{max-width:560px}
.abh-cta{display:flex;align-items:center;gap:26px;margin-top:28px;flex-wrap:wrap}
.abh-sub{font-family:var(--ft);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:color .15s}
.abh-sub:hover{color:var(--txt)}
.abh-sub span{display:inline-block;transition:transform .15s}
.abh-sub:hover span{transform:translateX(3px)}
.abh-stats{border:1px solid var(--brd);background:var(--bg-c)}
.abh-stat{padding:22px 24px;border-bottom:1px solid var(--brd)}
.abh-stat:last-child{border-bottom:none}
.abh-stat-n{font-family:var(--ft);font-weight:900;font-size:34px;line-height:1}
.abh-stat-l{font-family:var(--ft);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-top:4px}
@media(max-width:800px){
.abh-grid{grid-template-columns:1fr;gap:28px}
.abh-stats{display:flex}
.abh-stat{flex:1;border-bottom:none;border-right:1px solid var(--brd)}
.abh-stat:last-child{border-right:none}
}
@media(max-width:520px){
.abh-stat-n{font-size:24px}
.abh-stat{padding:14px 10px}
.abh-cta{gap:16px;margin-top:22px}
}
.btn-w{padding:12px 22px;background:var(--txt);color:#000;font-family:var(--ft);font-weight:900;font-size:13px;letter-spacing:.07em;text-transform:uppercase;transition:opacity .15s;display:inline-block}
.btn-w:hover{opacity:.85}
.btn-d{padding:12px 22px;background:rgba(255,255,255,.1);color:var(--txt);font-family:var(--ft);font-weight:900;font-size:13px;letter-spacing:.07em;text-transform:uppercase;transition:background .15s;display:inline-block}
.btn-d:hover{background:rgba(255,255,255,.12)}
.ab-vid{position:relative;overflow:hidden;background:var(--bg-c);border:1px solid var(--brd2)}
.ab-vid-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center}
.ab-vid-sub{font-family:var(--ft);font-weight:700;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.ab-vid-t{font-family:var(--ft);font-weight:900;font-size:26px;text-transform:uppercase;margin-bottom:4px}
.ab-vid-d{font-family:var(--ft);font-weight:300;font-size:12px;color:var(--muted);line-height:1.65;max-width:380px}
.ab-vid-lk{margin-top:8px;font-family:var(--ft);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);transition:opacity .15s}
.ab-vid-lk:hover{opacity:.7}
/* ━━━ LIVE SECTION ━━━━━━━━━━━━━━━━━━━━━━━━ */
.live-embed-wrap{overflow:hidden;border:1px solid var(--brd2);background:#000;position:relative}
.live-embed-ratio{position:relative;width:100%;padding-top:56.25%}
.live-embed-ratio iframe{position:absolute;inset:0;width:100%;height:100%;border:none;display:block}
.live-bar{
background:rgba(0,0,0,.9);border-top:1px solid rgba(255,255,255,.08);
padding:13px 20px;display:flex;align-items:center;justify-content:center;gap:10px;
font-family:var(--ft);font-weight:600;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
}
.live-bar em{font-style:normal;color:var(--txt);font-weight:700}
.live-dot-r{width:8px;height:8px;background:#ff4444;border-radius:50%;flex-shrink:0;animation:blink 1.1s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.65)}}
.live-pill{display:inline-flex;align-items:center;gap:7px;padding:4px 14px;border-radius:20px;background:rgba(255,0,0,.13);border:1px solid rgba(255,0,0,.35);font-family:var(--ft);font-weight:700;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#ff4444;margin-bottom:14px}
/* ━━━ MATCH CARD ━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sb{padding:3px 10px;border-radius:20px;font-size:9px;font-weight:700;letter-spacing:.08em;white-space:nowrap}
.sb-done{background:rgba(34,197,94,.12);color:#22c55e}
.sb-live{background:rgba(255,0,0,.14);color:#ff4444}
.sb-up{background:rgba(96,165,250,.14);color:#60a5fa}
.sb-tbd{background:rgba(255,186,74,.14);color:#FFBA4A}
.sb-can{background:rgba(255,255,255,.05);color:var(--muted)}
.tp{width:80px;height:80px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
@media(max-width:600px){.tp{width:52px;height:52px;font-size:18px}}
/* ━━━ MODAL ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:2000;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(6px)}
#modal-ov.open{display:flex}
#modal-box{background:#111;border:1px solid var(--brd2);width:100%;max-width:920px;max-height:90vh;overflow-y:auto;position:relative}
#modal-box::-webkit-scrollbar{width:4px}#modal-box::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:2px}
.mo-hd{padding:14px 24px;border-bottom:1px solid var(--brd);display:flex;align-items:center;justify-content:space-between}
.mo-bc{font-family:var(--ft);font-weight:500;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
.mo-bc span{color:var(--dim)}
.mo-close{font-family:var(--ft);font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:color .15s;background:none;border:none;padding:4px 8px}
.mo-close:hover{color:var(--acc)}
.mo-sub{font-family:var(--ft);font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);text-align:center;padding:16px 0 0;display:block}
.mo-main{padding:44px 28px;display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center}
.mo-team{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.mo-logo{width:90px;height:90px;object-fit:contain}
.mo-lph{width:75px;height:75px;display:flex;align-items:center;justify-content:center;font-family:var(--ft);font-weight:900;font-size:28px;color:var(--muted)}
.mo-tname{font-family:var(--ft);font-weight:900;font-size:24px;text-transform:uppercase}
.mo-players{font-family:var(--ft);font-weight:500;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.mo-center-sub{font-family:var(--ft);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mo-center{text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px}
.mo-sc{font-family:var(--ft);font-weight:900;font-size:58px;line-height:1}
.mo-ti{font-family:var(--ft);font-weight:900;font-size:58px;line-height:1;letter-spacing:.02em}
.mo-date{font-family:var(--ft);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.mo-section{padding:0 28px 68px}
.mo-sh{font-family:var(--ft);font-weight:900;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--brd)}
/* Team modal is styled without divider lines; the match modal keeps them. */
.team-modal .mo-hd{border-bottom:none}
.team-modal .mo-sh{border-bottom:none;padding-bottom:0}
.mo-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mo-form-col{background:var(--bg-c2);padding:14px;min-width:0}
.mo-form-hd{display:flex;align-items:center;gap:10px;margin-bottom:10px;min-width:0}
.mo-form-hd img,.mo-form-hd .tp{width:26px;height:26px;font-size:9px;flex-shrink:0}
.mo-form-tname{font-family:var(--ft);font-weight:900;font-size:14px;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mo-form-sub{font-family:var(--ft);font-weight:500;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.mo-result{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background:rgba(255,255,255,.03);margin-bottom:5px;gap:8px}
.mo-result>div:first-child{min-width:0;overflow:hidden}
.mo-res-meta{font-family:var(--ft);font-weight:500;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
/* "vs OPPONENT_NAME" had no width limit or truncation, so a long name (Turkey and
the Cold Cuts, Who Let AIR Cook...) forced this 2-column grid past the viewport
width - the same min-width:auto grid trap seen elsewhere, just with a text
overflow this time instead of a fixed size. min-width:0 lets the grid actually
shrink; the ellipsis keeps a very long name from swallowing the whole row. */
.mo-res-vs{font-family:var(--ft);font-weight:900;font-size:13px;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mo-res-right{display:flex;align-items:center;gap:7px;flex-shrink:0}
.mo-res-score{font-family:var(--ft);font-weight:900;font-size:13px}
.mo-res-badge{font-family:var(--ft);font-weight:500;font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:20px}
.win-b{background:rgba(34,197,94,.12);color:#22c55e}
.loss-b{background:rgba(220,30,30,.14);color:#ff5555}
.mo-maps{display:flex;flex-direction:column;gap:8px}
.mo-map{background:var(--bg-c2);display:flex;align-items:center;justify-content:space-between;padding:30px 20px;border:1px solid var(--brd)}
.mo-map-name{font-family:var(--ft);font-weight:900;font-size:16px;text-transform:uppercase}
.mo-map-score{font-family:var(--ft);font-weight:900;font-size:20px}
/* ━━━ BARRAGE / PROMOTION-RELEGATION CARD ━━━━━━━━━━━━━━━━━━━━━━ */
/* Two teams + a pair of outcome chevrons in a 3-column grid (logo/name/placement/
outcome stacked per team). Every size below is fluid (clamp) rather than fixed,
since this card previously used hardcoded 72px SVGs and 32px gaps that were never
adapted for mobile and overflowed the viewport outright. */
.prel-card{cursor:pointer;padding:30px 20px}
.prel-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;justify-items:center;column-gap:clamp(10px,4vw,32px);row-gap:12px;width:100%}
.prel-logo-a{grid-column:1;grid-row:1}
.prel-logo-b{grid-column:3;grid-row:1}
.prel-tlogo{width:clamp(38px,9vw,68px);height:clamp(38px,9vw,68px);flex-shrink:0}
.prel-arrows{grid-column:2;grid-row:1/span 4;display:flex;align-items:center;gap:clamp(4px,2vw,12px)}
.prel-chevron{width:clamp(22px,6vw,56px);height:clamp(22px,6vw,56px);flex-shrink:0}
.prel-name{grid-row:2;width:100%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(12px,3.2vw,16px)}
.prel-name-a{grid-column:1}
.prel-name-b{grid-column:3}
.prel-plc{width:100%;text-align:center;font-size:clamp(9px,2.4vw,13px)}
.prel-plc-a{grid-column:1;grid-row:3}
.prel-plc-b{grid-column:3;grid-row:3}
.prel-outcome{grid-row:4;width:100%;text-align:center;font-size:clamp(9px,2.4vw,14px);font-weight:600}
.prel-outcome-a{grid-column:1}
.prel-outcome-b{grid-column:3}
@media(max-width:480px){.prel-card{padding:18px 12px}}
@media(max-width:480px){
.mo-hd{padding:10px 16px}
.mo-bc{font-size:9px;gap:5px}
.mo-close{font-size:10px;padding:3px 5px}
.mo-main{padding:28px 12px;gap:6px}
.mo-logo,.mo-lph{width:54px;height:54px;font-size:20px}
.mo-tname{font-size:15px}
.mo-players{font-size:9px}
.mo-sc,.mo-ti{font-size:32px}
.mo-date{font-size:9px}
.mo-section{padding:0 14px 32px}
.mo-sh{font-size:11px;margin-bottom:10px;padding-bottom:8px}
.mo-form{gap:8px}
.mo-form-col{padding:10px}
.mo-form-tname{font-size:11px}
.mo-form-sub{font-size:9px}
.mo-result{padding:6px 8px}
.mo-res-meta{font-size:8px}
.mo-res-vs{font-size:11px}
.mo-res-score{font-size:11px}
.mo-res-badge{font-size:8px;padding:2px 6px}
.mo-map{padding:18px 14px}
.mo-map-name{font-size:12px}
.mo-map-score{font-size:15px}
}
/* ━━━ SECTION HEADER ━━━━━━━━━━━━━━━━━━━━━━ */
.sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:10px}
.sa{font-family:var(--ft);font-weight:700;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);cursor:pointer;transition:opacity .15s;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.sa-arr{display:inline-flex;align-items:center}
@media(max-width:600px){
.sa{font-size:10px;gap:3px}
.sa-arr svg{width:12px;height:12px}
}
.sa:hover{opacity:.7}
/* subsection label */
.cal-sub{font-family:var(--ft);font-weight:900;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:32px 0 14px}
.cal-sub em{font-style:normal;color:var(--txt)}
/* ━━━ DIV TOGGLE ━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* flex-wrap so a row with many pills (mode/division/region filters) wraps onto a
second line on narrow screens instead of forcing the whole page to widen to fit
it on one line – that silent overflow was inflating the mobile viewport itself. */
.dtog{display:inline-flex;flex-wrap:wrap;background:rgba(255,255,255,.055);border-radius:999px;padding:3px;gap:3px;margin-bottom:22px}
.dtb{padding:8px 20px;border-radius:999px;font-family:var(--ft);font-weight:900;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);transition:all .15s;cursor:pointer;white-space:nowrap}
@media(max-width:600px){.dtb{padding:6px 12px;font-size:10px}}
.dtb.on{background:rgba(255,106,0,.88);color:#fff}
/* ━━━ STANDINGS ━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* The table itself never loses columns on mobile – every stat stays, the wrapper
just scrolls horizontally. -webkit-overflow-scrolling gives it momentum on iOS.
Below 900px a fading edge + one-time "swipe" hint signal that there's more to
see, since a full-width table with no visible cut-off column doesn't otherwise
read as scrollable. The hint is removed by JS the first time the user scrolls it. */
.st-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative;scrollbar-width:none;-ms-overflow-style:none}
.st-wrap::-webkit-scrollbar{display:none}
@media(max-width:900px){
.st-wrap:not(.st-scrolled)::after{
content:'';position:absolute;top:0;right:0;bottom:0;width:32px;pointer-events:none;
background:linear-gradient(to right, transparent, var(--bg-c) 75%);
}
.st-wrap-hint{
display:flex;align-items:center;gap:6px;margin:10px 0 14px;
font-family:var(--ft);font-weight:700;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
color:var(--muted);opacity:1;transition:opacity .25s ease;
}
.st-wrap-hint.hide{opacity:0}
}
@media(min-width:901px){.st-wrap-hint{display:none}}
/* Ranking table: caps the visible height at about ten rows and scrolls the rest.
62px per row (52px row + 10px gap) plus the header. */
.st-wrap.st-scroll{max-height:calc(62px * 10 + 44px);overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}
.st-wrap.st-scroll::-webkit-scrollbar{display:none}
.st-wrap.st-scroll .stt thead th{position:sticky;top:0;z-index:20}
.stt{width:100%;border-collapse:separate;border-spacing:0 0}
.th-tip{position:relative;cursor:help;border-bottom:1px dotted var(--muted);padding-bottom:1px}
.th-tip:hover::after{content:attr(data-tip);position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%);background:#111;color:#fff;padding:6px 10px;border-radius:6px;font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:none;white-space:nowrap;z-index:30;box-shadow:0 4px 14px rgba(0,0,0,.5);pointer-events:none}
/* The last header's tooltip would overflow the table's horizontal scroll box and be
clipped, so it is anchored to the right edge instead of centred. */
.stt th:last-child .th-tip:hover::after{left:auto;right:0;transform:none}
.stt th:last-child .th-tip:hover::before{left:auto;right:12px;transform:none}
.th-tip:hover::before{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-bottom-color:#111;margin-top:4px;z-index:30;pointer-events:none}
.stt th{font-family:var(--ft);font-weight:900;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:12px 14px;text-align:center;background:#0f0f0f}
.stt th:first-child{text-align:left;padding-left:20px;border-radius:var(--r) 0 0 var(--r)}
.stt th:nth-child(2){text-align:left;padding-left:6px}
.stt th:last-child{border-radius:0 var(--r) var(--r) 0}
/* tabular-nums keeps digits the same width so the numeric columns line up; without
it a row of 1s renders narrower than a row of 8s and the columns visibly shift. */
.stt td{padding:14px 16px;text-align:center;font-family:var(--ft);font-weight:700;font-size:19px;font-variant-numeric:tabular-nums;background:var(--row);border-top:1px solid rgba(255,255,255,.02)}
.stt td:first-child{padding-left:20px;text-align:left;font-family:var(--ft);font-size:20px;font-weight:900}
.stt td:nth-child(2){text-align:left}.st-tname{font-family:var(--ft);font-weight:900;font-size:15px;text-transform:uppercase;letter-spacing:.04em}
/* Team note badge (roster/rename history) - a small "i" next to a team's name on
Standings, shown only when Team_History has a note for that team at the current
split. Fixed-position popover since this renders inside many differently
structured table cells that can't be assumed to have a positioned ancestor. */
.tnote{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;margin-left:6px;border-radius:50%;border:1px solid var(--muted);color:var(--muted);font-family:Georgia,serif;font-style:italic;font-weight:700;font-size:10px;cursor:pointer;flex-shrink:0;transition:border-color .15s,color .15s;vertical-align:middle}
.tnote:hover{border-color:var(--acc);color:var(--acc)}
.tnote-pop{position:fixed;z-index:500;background:#151515;border:1px solid var(--brd2);padding:10px 12px;font-family:var(--ft);font-weight:500;font-size:12px;line-height:1.6;color:var(--txt);box-shadow:0 8px 24px rgba(0,0,0,.5)}
.stt tr.pl td{background:var(--gold)}
/* Overpoints qualification bands: top 4 straight to the playoffs (same gold the
standings use), 5th to 32nd into the wildcards, tinted lighter to read as a
weaker qualification. */
.stt tr.ov-po td{background:var(--gold)}
.stt tr.ov-wc td{background:rgba(255,186,74,.17)}
.stt tr.br td{background:var(--bar)}
.stt tr.rl td{background:var(--rel)}
.stt tr.champ td{background:var(--champ)}
.rn{font-family:var(--ft);font-weight:900;font-size:21px;font-variant-numeric:tabular-nums;display:inline-block;width:34px;text-align:center}
.tc{display:flex;align-items:center;gap:12px;min-width:190px}
/* Rank + logo share one continuous panel: the rank cell drops its right padding
and the logo cell its left, so the two read as a single block. */
.stt td.rank-cell{padding-right:0}
/* The logo cell is the positioning context for the absolutely-placed panel. */
.stt td.team-cell{padding-left:0;position:relative}
/* Tilted logo cell. Both the logo and the window that crops it are angled at 15deg:
the logo via rotate(), the window via a skewed clip-path polygon, so the crop
edges run diagonally instead of vertically. No filter is applied: filters
rasterize SVG logos at layout size before transforms, which visibly softens them. */
.tlogo-box{
/* 14px over the 52px row height gives the reference's ~15deg lean. Expressed in
px because clip-path percentages on the x-axis resolve against width, not height. */
--tilt:14px;
/* Absolutely placed and stretched to the cell's padding box, so the panel meets
the top and bottom edges of the row while contributing nothing to its height.
Shifted slightly left so it tucks further under the rank block. */
position:absolute;top:0;bottom:0;left:-6px;
/* Wide enough that the slanted right edge falls inside the box rather than being
clipped flat by it. */
width:100px;
overflow:hidden;
/* Parallelogram leaning left towards the bottom: both edges shift by the same
amount, so the sides stay parallel like the reference shape. */
clip-path:polygon(var(--tilt) 0, 100% 0, calc(100% - var(--tilt)) 100%, 0 100%);
display:flex;align-items:center;justify-content:center;
}
/* Reserves the horizontal space the absolute panel occupies, plus a little extra
so the team name sits clear of the panel's diagonal edge. */
.tc{padding-left:108px}
.tlogo-box>*{
/* Sized directly: SVG logos stay vector-sharp under rotation, so no overscale
trick is needed. Avoid adding any CSS filter here, which would rasterize them. */
width:90px !important;height:90px !important;
transform:rotate(15deg);
transform-origin:center;
}
/* Row gap via explicit spacer rows (stRowGap), not border-spacing. border-spacing
would add the same gap between thead and tbody's first row too, and the usual
fix for that - offsetting tbody with position:relative - is silently ignored by
Safari/WebKit, which doesn't support positioning table row groups. A real empty
row between data rows sidesteps the whole issue: it needs no special-casing, and
renders identically everywhere since it's just an ordinary row, not a table
layout hack. */
.stt{border-spacing:0}
.stt-spacer td{padding:0 !important;border:none !important;background:transparent !important;height:10px}
.stt td{border-top:none !important}
.tc img,.tc .tp{width:30px;height:30px;font-size:11px}
.st-tname{font-family:var(--ft);font-weight:900;font-size:16px;text-transform:uppercase}
.pts{font-family:var(--ft);font-weight:900;font-size:18px;color:var(--acc)}
/* Below 700px, the standings table must fit the screen width entirely - no
horizontal scroll. table-layout:fixed with percentage column widths makes
this a structural guarantee rather than a hope: the 9 columns always sum to
100% of the available width, so nothing can push the table wider than the
viewport. Content that doesn't fit (a long team name) truncates with an
ellipsis instead of forcing the row, or the whole table, to overflow.
Threshold widened from 600 to 700px, and every size pulled down further, since
even the first compact pass still read as cramped in some mobile browsers. */
@media(max-width:700px){
/* Same tilted-panel treatment as desktop - logo, diagonal crop and lean - just
scaled down proportionally (tilt, panel width, inner logo size, and the left
offset all scaled by the same ~0.32 ratio as the panel itself). Previously
the panel shrank but --tilt stayed a fixed 14px, so the diagonal ate more
than half the box and mangled the logo instead of just angling it; keeping
the same ratio as desktop reproduces the same clean lean at any size.
The panel's crop is also a lot squarer than desktop's: desktop is a wide
~1.9:1 letterbox (100px panel over a 52px row), mobile was near 1:1 (32px
over a 34px row). Tighter row padding brings the row height down so the
panel reads as the same wide letterbox crop, not a taller, squarer window. */
.tlogo-box{
--tilt:5px;
width:40px;left:-2px;
}
.tlogo-box>*{
width:36px !important;height:36px !important;
}
.tc{padding-left:42px;min-width:0}
.st-tname{font-size:9px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.stt{table-layout:fixed}
.stt th{padding:4px 1px;font-size:6.5px;letter-spacing:0;overflow:hidden;white-space:nowrap}
.stt th:first-child{padding-left:6px}
.stt td{padding:6px 1px;font-size:9px}
.stt td:first-child{padding-left:6px;font-size:9px}
.rn{font-size:9px;width:auto}
.pts{font-size:9px}
.stt th:nth-child(1),.stt td:nth-child(1){width:8%}
.stt th:nth-child(2),.stt td:nth-child(2){width:39%}
.stt th:nth-child(3),.stt td:nth-child(3){width:7%}
.stt th:nth-child(4),.stt td:nth-child(4){width:7%}
.stt th:nth-child(5),.stt td:nth-child(5){width:7%}
.stt th:nth-child(6),.stt td:nth-child(6){width:8%}
.stt th:nth-child(7),.stt td:nth-child(7){width:8%}
.stt th:nth-child(8),.stt td:nth-child(8){width:9%}
.stt th:nth-child(9),.stt td:nth-child(9){width:7%}
}
/* legend */
.leg{display:flex;gap:20px;flex-wrap:wrap;margin:12px 0 0}
.li{display:flex;align-items:center;gap:8px;font-family:var(--ft);font-size:14px;font-weight:400;color:var(--muted)}
/* All four items must always read on a single line, so this scales down together
rather than wrapping: smaller swatches, tighter gaps, and a conservatively small
font size, since the branded condensed font renders noticeably wider than the
fallback system font a headless browser without that font installed substitutes
- sizing that "just fits" in a quick check can still truncate on a real device.
text-overflow:ellipsis stays on as a safety net for any edge case beyond this,
rather than letting the row overflow or wrap. */
@media(max-width:600px){
.leg{flex-wrap:nowrap;gap:4px;margin:8px 0 0;overflow:hidden}
.li{gap:2px;font-size:6px;letter-spacing:0;white-space:nowrap;flex-shrink:1;min-width:0}
.li span:not(.ld3){overflow:hidden;text-overflow:ellipsis}
.ld3{width:6px;height:6px}
}
.ld3{width:16px;height:16px;flex-shrink:0}
.ld-pl{background:var(--gold-leg)}.ld-br{background:var(--bar-leg)}.ld-rl{background:var(--rel-leg)}.ld-champ{background:var(--champ-leg)}
/* Overpoints legend - same pattern as .leg/.li/.ld3 above, but only ever two
short items, so it doesn't need the aggressive single-line-at-any-cost sizing
the four-item Standings legend does. */
.lgd{display:flex;gap:20px;flex-wrap:wrap;margin:16px 0 0}
.lgd-i{display:flex;align-items:center;gap:8px;font-family:var(--ft);font-size:12px;font-weight:400;color:var(--muted)}
.lgd-c{width:14px;height:14px;flex-shrink:0;border-radius:2px}
@media(max-width:600px){
.lgd{gap:12px;margin:10px 0 0}
.lgd-i{font-size:10px;gap:6px}
.lgd-c{width:11px;height:11px}
}
/* ━━━ TOOLBAR ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.tb-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.fb3{padding:6px 14px;background:rgba(255,255,255,.055);font-family:var(--ft);font-weight:900;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);transition:all .15s;border-radius:999px}
.fb3:hover,.fb3.on{background:var(--acc-dim);color:var(--acc)}
.ss{background:rgba(255,255,255,.1);color:var(--txt);padding:12px 40px 12px 18px;border-radius:8px;font-family:var(--ft);font-weight:700;font-size:15px;cursor:pointer;outline:none;border:none;text-align:left;background-image:url('data:image/svg+xml;utf8,');background-repeat:no-repeat;background-position:right 14px center;background-size:12px 7px}
.ss-cust{position:relative;display:inline-block}
.ss-cust .ss{display:block;width:100%}
.ss-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:100%;background:#161616;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:6px;display:none;flex-direction:column;gap:2px;box-shadow:0 20px 44px rgba(0,0,0,.55);z-index:80;white-space:nowrap}
.ss-cust.open .ss-menu{display:flex}
.ss-opt{padding:9px 16px;border-radius:6px;font-family:var(--ft);font-weight:700;font-size:13px;color:var(--txt);cursor:pointer;transition:background .15s,color .15s}
.ss-opt:hover{background:rgba(255,255,255,.07)}
.ss-opt.on{background:var(--acc-dim);color:var(--acc)}
.tb-bar-lg .ss{padding:15px 46px 15px 28px;font-size:18px;border-radius:8px;background-color:rgba(255,255,255,.1);background-image:url('data:image/svg+xml;utf8,');background-repeat:no-repeat;background-position:right 18px center;background-size:14px 8px}
.lg-ctrl-row{align-items:center;justify-content:space-between;gap:12px}
.lg-ctrl-row .dtog{margin-bottom:0}
.ss-pill{display:inline-flex;align-items:center;height:36px;box-sizing:border-box}
.ss-pill .ss{height:30px;box-sizing:border-box;display:flex;align-items:center;padding:0 34px 0 20px;font-size:12px;font-weight:900;font-family:var(--ft);letter-spacing:.09em;text-transform:uppercase;border-radius:999px;background-position:right 14px center;background-size:11px 6px;line-height:normal}
@media(max-width:600px){
.ss-pill{height:28px}
.ss-pill .ss{height:24px;padding:0 26px 0 14px;font-size:10px;background-position:right 10px center;background-size:9px 5px}
}
.ss option{background:#1a1a1a}
/* ━━━ ARTICLES ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.al{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.al{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.al{grid-template-columns:1fr}}
.ac{display:flex;flex-direction:column;background:transparent;overflow:hidden;cursor:pointer;transition:opacity .2s,outline .2s}
.ac:hover{opacity:1;outline:2px solid rgba(255,106,0,.55)}
.ac:hover .ac-img{transform:scale(1.04)}
.ac-img-wrap{overflow:hidden;position:relative;aspect-ratio:16/9;width:100%}
.ac-img{width:100%;height:100%;object-fit:cover;background:var(--bg-c2);display:block;transition:transform .4s cubic-bezier(.25,.46,.45,.94)}
.ac-iph{aspect-ratio:16/9;background:var(--bg-c2);display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:22px}
.ac-b{padding:14px 0 0;display:flex;flex-direction:column;gap:6px}
.ac-meta{display:flex;align-items:center;gap:12px;font-family:var(--ft);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:2px}
.ac-cat{color:var(--acc)}
.cat-recap{color:var(--muted)}
.cat-interview{color:var(--muted)}
.cat-preview{color:var(--muted)}
.cat-news{color:var(--muted)}
.cat-announcement{color:var(--acc)}
.ac-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;background:rgba(0,0,0,.25)}
.ac-play-btn{width:56px;height:56px;border-radius:50%;background:rgba(0,0,0,.55);border:2px solid rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;transition:transform .25s,background .25s}
.ac:hover .ac-play-btn{transform:scale(1.1);background:rgba(255,106,0,.85);border-color:transparent}
/* Article detail page */
/* Article content rendered from Google Doc */
.art-content{max-width:720px;margin:0 auto;font-family:var(--ft);font-weight:500;font-size:16px;line-height:1.8;color:#ccc}
.art-content p{margin-bottom:1.2em}
.art-content h1,.art-content h2,.art-content h3{font-family:var(--ft);font-weight:900;text-transform:uppercase;color:#fff;margin:1.6em 0 .6em;letter-spacing:.03em}
.art-content h1{font-size:24px}.art-content h2{font-size:20px}.art-content h3{font-size:16px}
.art-content strong,.art-content b{color:#fff;font-weight:700}
.art-content em,.art-content i{color:#aaa}
.art-content ul,.art-content ol{padding-left:1.5em;margin-bottom:1.2em}
.art-content li{margin-bottom:.4em}
.art-content a{color:var(--acc);text-decoration:none}
.art-content a:hover{text-decoration:underline}
.art-content hr{border:none;border-top:1px solid var(--brd);margin:2em 0}
.art-content img{max-width:100%;margin:1em 0}
.art-loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:60px 0;color:var(--muted);font-family:var(--ft);font-size:13px;letter-spacing:.08em}
.art-loading::before{content:'';width:18px;height:18px;border:2px solid var(--brd);border-top-color:var(--acc);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.art-pg{max-width:860px;margin:0 auto}
.art-back{display:inline-flex;align-items:center;gap:6px;font-family:var(--ft);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);cursor:pointer;margin-bottom:24px;transition:color .15s}
.art-back:hover{color:var(--acc)}
.art-hero{width:100%;max-height:380px;object-fit:cover;margin-bottom:28px}
.art-hdr{margin-bottom:28px}
.art-hdr-meta{display:flex;align-items:center;gap:10px;font-family:var(--ft);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.art-hdr-title{font-family:var(--ft);font-weight:900;font-size:28px;text-transform:uppercase;line-height:1.1;letter-spacing:.02em}
.art-hdr-sub{margin-top:10px;font-family:var(--ft);font-weight:500;font-size:13px;color:var(--muted)}
.art-divider{height:1px;background:var(--brd);margin:24px 0}
.art-embed{width:100%;height:75vh;border:none;background:var(--bg-c)}
.art-extlink{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;background:var(--acc);color:#fff;font-family:var(--ft);font-weight:700;font-size:13px;letter-spacing:.06em;text-decoration:none;text-transform:uppercase}
.art-extlink:hover{opacity:.88}
.ac-ti{font-family:var(--ft);font-weight:900;font-size:16px;text-transform:uppercase;line-height:1.25}
.ac-ex{font-family:var(--ft);font-weight:500;font-size:12px;color:rgba(255,255,255,.75);line-height:1.6;flex:1}
.ac-btn{margin-top:6px;font-family:var(--ft);font-weight:900;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);display:inline-flex;align-items:center;gap:5px}
/* ━━━ VODS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.vg{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.vc{background:var(--bg-c);border:1px solid var(--brd);overflow:hidden;transition:border-color .15s,transform .15s;display:block}
.vc:hover{border-color:var(--brd2);transform:translateY(-2px)}
.vth{position:relative;width:100%;padding-top:56.25%;background:var(--bg-c2)}
.vth img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.4);opacity:0;transition:opacity .15s;font-size:38px}
.vc:hover .vplay{opacity:1}
.vi{padding:14px 16px}
.v-tms{font-family:var(--ft);font-weight:900;font-size:15px;text-transform:uppercase;margin-bottom:3px}
.v-meta{font-family:var(--ft);font-size:10px;color:var(--muted);font-weight:600;letter-spacing:.07em;text-transform:uppercase}
/* ━━━ TEAMS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.tg{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.tc-c{background:var(--bg-c);border:1px solid var(--brd);padding:24px 18px;display:flex;flex-direction:column;align-items:center;gap:12px;transition:border-color .15s,transform .15s}
.tc-c:hover{border-color:var(--brd2);transform:translateY(-2px)}
.tc-logo{width:68px;height:68px;object-fit:contain}
.tc-lph{width:68px;height:68px;display:flex;align-items:center;justify-content:center;font-family:var(--ft);font-weight:900;font-size:24px;color:var(--muted)}
.tc-n{font-family:var(--ft);font-weight:900;font-size:17px;text-transform:uppercase;text-align:center}
.tc-d{font-family:var(--ft);font-weight:700;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--acc)}
.tc-pl{font-family:var(--ft);font-size:12px;font-weight:500;color:var(--muted);text-align:center;line-height:1.65}
/* ━━━ ABOUT PAGE ━━━━━━━━━━━━━━━━━━━━━━━━━ */
.about-hero{background:linear-gradient(135deg,rgba(255,106,0,.09) 0%,transparent 55%);border:1px solid var(--brd);padding:52px;margin-bottom:22px}
.about-hero h1{font-family:var(--ft);font-weight:900;font-size:clamp(32px,9vw,62px);text-transform:uppercase;line-height:.86;margin-bottom:18px}
.about-hero h1 em{font-style:normal;color:var(--acc)}
.about-hero p{font-family:var(--ft);font-weight:300;font-size:14px;line-height:1.82;color:var(--muted);max-width:550px;margin-bottom:10px}
.st-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:600px){.st-row{grid-template-columns:1fr 1fr}.about-hero{padding:28px}}
.st-box{background:var(--bg-c);border:1px solid var(--brd);padding:26px}
.st-n{font-family:var(--ft);font-weight:900;font-size:36px;margin-bottom:4px}
.st-l{font-family:var(--ft);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
/* ━━━ REGIONALS ━━━━━━━━━━━━━━━━━━━━━━━━━ */
.reg-tabs{display:flex;gap:6px;margin-bottom:22px;flex-wrap:wrap}
.reg-tab{padding:7px 18px;background:var(--bg-c);border:1px solid var(--brd);font-family:var(--ft);font-weight:700;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);transition:all .15s;cursor:pointer}
.reg-tab.on{background:var(--acc-dim);border-color:rgba(255,106,0,.3);color:var(--acc)}
/* ━━━ OPEN QUALIFIER RESULTS (one card per bracket, on the Regionals page) ━━━ */
.oq-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:8px}
/* Fixed height (not just fixed column width) so every card - whether it has a
logo+name+round+status, or is just a shorter "in progress" placeholder - lines
up identically across the row instead of each row's height depending on
whichever card in it happens to have the most content. */
.oq-card{background:var(--bg-c2);border:1px solid var(--brd);padding:28px 16px;text-align:center;cursor:pointer;transition:border-color .15s;min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.oq-card:hover{border-color:var(--brd2)}
.oq-card-pending{cursor:default}
/* Flat, unrotated logo - standalone and centered above the name rather than the
tilted-diamond treatment used inside the standings table. */
.oq-logo-box{width:76px;height:76px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.oq-logo-box>*{width:66px !important;height:66px !important}
.oq-name{font-family:var(--ft);font-weight:900;font-size:17px;text-transform:uppercase;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;min-width:0}
.oq-round{font-family:var(--ft);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;min-width:0}
.oq-status{font-family:var(--ft);font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--acc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;min-width:0}
.oq-status-pending{color:var(--muted)}
@media(max-width:900px){.oq-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){
.oq-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.oq-card{padding:16px 10px;min-height:150px}
.oq-logo-box{width:40px;height:40px;margin-bottom:10px}
.oq-logo-box>*{width:34px !important;height:34px !important}
.oq-name{font-size:12px;margin-bottom:5px}
.oq-round{font-size:8px;margin-bottom:6px}
.oq-status{font-size:8.5px}
}
.mo-map.oqm-row{padding:14px 18px}
.mo-map.oqm-row .mo-map-name{font-size:13px;flex:1}
.mo-map.oqm-row .mo-map-name:last-child{text-align:right}
@media(max-width:600px){
.mo-map.oqm-row{padding:10px 12px}
.mo-map.oqm-row .mo-map-name{font-size:10px}
.mo-map.oqm-row .mo-map-score{font-size:15px}
}
/* ━━━ CONTINENTALS: SWISS STAGE TABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ct-sh{font-family:var(--ft);font-weight:900;font-size:16px;text-transform:uppercase;letter-spacing:.04em;color:var(--txt);margin-bottom:16px}
/* This table has a variable, potentially large number of Round N columns, so -
unlike the Standings table - it's never expected to fit one screen width; it
reuses .st-wrap purely for the horizontal-scroll + "swipe" hint mechanism, with
its own column styling (not the Standings table's fixed percentage layout). */
/* Padding on the wrapper (not the table) reserves room for the qualified/
eliminated side bars below, which sit just outside the table's own edges - they
stay inside this scrollable area so they aren't clipped by st-wrap's overflow. */
.swiss-wrap{padding-left:18px;padding-right:18px}
.swiss-tbl{width:100%;border-collapse:separate;border-spacing:0;background:var(--bg-c2)}
.swiss-tbl th{padding:10px 14px;text-align:center;font-family:var(--ft);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:#000;white-space:nowrap}
.swiss-tbl th:nth-child(2){text-align:left}
.swiss-tbl td{padding:10px 14px;text-align:center;font-family:var(--ft);font-weight:700;font-size:13px;color:var(--txt);border-bottom:1px solid var(--brd);white-space:nowrap}
.swiss-rank{color:var(--muted);position:relative}
/* Qualified/eliminated side bars: one continuous coloured strip per group, on
OPPOSITE edges of the table so the two colours read as bracketing it rather
than stacking on top of each other. Qualified (green) sits on the rank cell,
left edge, via ::before. Eliminated (red) sits on the last round cell, right
edge, via ::after. Middle rows have square edges so they butt up against their
neighbours; only a group's first and last row get rounded corners, so the
whole group reads as one unbroken bar. */
.swiss-bar-q::before{content:'';position:absolute;top:0;bottom:0;left:-14px;width:4px;background:#5fbf6a}
.swiss-bar-first::before{border-radius:3px 3px 0 0}
.swiss-bar-last::before{border-radius:0 0 3px 3px}
.swiss-bar-e-anchor{position:relative}
.swiss-bar-e-anchor::after{content:'';position:absolute;top:0;bottom:0;right:-14px;width:4px;background:#e0605a}
.swiss-bar-e-first::after{border-radius:3px 3px 0 0}
.swiss-bar-e-last::after{border-radius:0 0 3px 3px}
.swiss-team{text-align:left !important}
.swiss-team-inner{display:flex;align-items:center;gap:10px;font-weight:900;text-transform:uppercase}
.swiss-team-logo{width:26px;height:26px;flex-shrink:0}
.gd-pos{color:#5fbf6a}
.gd-neg{color:#e0605a}
.swiss-rd{padding:6px !important}
.swiss-rd-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 10px;border-radius:4px;min-width:52px}
.swiss-rd-cell.win{background:rgba(80,180,90,.16)}
.swiss-rd-cell.loss{background:rgba(190,70,70,.16)}
.swiss-rd-logo{width:20px;height:20px}
.swiss-rd-score{font-size:11px;font-weight:700;color:var(--muted)}
/* Round-result hover tip + click-through to the match modal - same attr(data-tip)
tooltip mechanism as the Standings header tips (.th-tip), reused here since both
want the same "small dark label with an arrow" look. */
/* z-index:1 (bumped further on hover) lifts the whole cell above the row
underneath it: tables paint row by row in DOM order, so without this the
next row down (being later in the document) painted over the tooltip that
pokes below the hovered cell, showing its own "2:0" text bleeding through. */
.swiss-rd-tip{cursor:pointer;position:relative;transition:filter .12s;z-index:1}
.swiss-rd-tip:hover{filter:brightness(1.35);z-index:50}
/* Solid grey (not the site's usual near-black) so the tooltip reads clearly
against the win/loss cell's own green/red tint instead of blending into it. */
.swiss-rd-tip:hover::after{content:attr(data-tip);position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%);background:#3a3a3a;border:1px solid var(--brd2);color:#fff;padding:6px 10px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;z-index:30;box-shadow:0 4px 14px rgba(0,0,0,.5);pointer-events:none}
.swiss-rd-tip:hover::before{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-bottom-color:#3a3a3a;margin-top:4px;z-index:30;pointer-events:none}
/* Divider row marking the Playoffs qualification cutoff - full width, sitting
right after the last qualifying row, labelled on both sides so it reads clearly
regardless of which team's row it's adjacent to. */
.swiss-cut td{padding:10px 14px !important;background:#000;border-bottom:1px solid var(--brd)}
.swiss-cut-q,.swiss-cut-e{display:inline-flex;align-items:center;gap:5px;font-family:var(--ft);font-weight:900;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.swiss-cut-q{color:#5fbf6a;float:left}
.swiss-cut-e{color:#e0605a;float:right}
.swiss-cut-q svg,.swiss-cut-e svg{flex-shrink:0}
@media(max-width:600px){
.ct-sh{font-size:13px;margin-bottom:10px}
.swiss-tbl th{padding:7px 8px;font-size:8px}
.swiss-tbl td{padding:7px 8px;font-size:11px}
.swiss-team-logo{width:20px;height:20px}
.swiss-team-inner{gap:6px}
.swiss-rd-cell{padding:4px 6px;min-width:40px}
.swiss-rd-logo{width:16px;height:16px}
.swiss-rd-score{font-size:9px}
.swiss-cut td{padding:8px 10px !important}
.swiss-cut-q,.swiss-cut-e{font-size:8px;gap:4px}
.swiss-cut-q svg,.swiss-cut-e svg{width:8px;height:8px}
}
/* ━━━ CONTINENTALS: PLAYOFFS DOUBLE-ELIM BRACKET ━━━━━━━━━━━━━━━━━━━━━ */
.bkt-wrap{margin-top:4px}
.bkt-section{margin-bottom:44px}
.bkt-section-title{font-family:var(--ft);font-weight:900;font-size:15px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:20px;color:var(--txt)}
.bkt-row{display:flex;align-items:center;gap:38px;overflow-x:auto;padding:4px 4px 14px}
.bkt-col{display:flex;flex-direction:column;justify-content:center;min-width:250px;flex-shrink:0}
.bkt-col-matches{display:flex;flex-direction:column;justify-content:space-around;gap:28px;height:100%}
.bkt-col-hd{font-family:var(--ft);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);text-align:center;margin-bottom:14px}
/* Connector lines between rounds were removed - the column layout and round
labels alone make the progression clear without needing a connector that
never quite lined up with the middle of each match card. */
.bkt-pair{display:flex;flex-direction:column;gap:28px}
.bkt-match{background:var(--bg-c2);border:1px solid var(--brd);transition:border-color .15s}
.bkt-match:hover{border-color:var(--brd2)}
.bkt-team{display:flex;align-items:center;gap:10px;padding:13px 16px;font-family:var(--ft);font-weight:700;font-size:13px;color:var(--muted)}
.bkt-team:first-child{border-bottom:1px solid var(--brd)}
.bkt-team.win{color:var(--txt);font-weight:900}
.bkt-logo{width:24px;height:24px;flex-shrink:0}
.bkt-tname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase}
.bkt-score{font-weight:900;font-variant-numeric:tabular-nums;font-size:15px}
.bkt-gf-col{min-width:240px}
.bkt-match-gf{border-color:var(--acc)}
@media(max-width:600px){
.bkt-section{margin-bottom:28px}
.bkt-section-title{font-size:12px;margin-bottom:12px}
.bkt-row{gap:20px}
.bkt-col{min-width:190px}
.bkt-col-matches{gap:18px}
.bkt-pair{gap:18px}
.bkt-col-hd{font-size:9px;margin-bottom:8px}
.bkt-team{padding:9px 11px;font-size:10px;gap:7px}
.bkt-logo{width:18px;height:18px}
.bkt-score{font-size:12px}
.bkt-gf-col{min-width:190px}
}
/* ━━━ EMPTY ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.empty{text-align:center;padding:60px 20px}
.empty-i{font-size:32px;margin-bottom:12px}
.empty h3{font-family:var(--ft);font-weight:900;font-size:17px;text-transform:uppercase;margin-bottom:7px}
.empty p{font-family:var(--ft);font-weight:500;color:var(--muted);font-size:16px}
/* ━━━ PARTNERS PLACEHOLDER ━━━━━━━━━━━━━━━ */
.partners-ph{min-height:90px;border:2px dashed rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-family:var(--ft);font-weight:600;color:var(--dim);font-size:13px;letter-spacing:.06em}
.sponsors-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:48px;min-height:100px;padding:20px 0}
.sponsor-logo{height:56px;width:auto;object-fit:contain;opacity:.85;transition:opacity .15s}
@media(max-width:768px){.sponsor-logo{height:36px}}
.sponsor-logo:hover{opacity:1}
/* ━━━ MATCH CARD (unified: upcoming + result) ━━━━━━━━━━━━━━━━ */
.mc-card{background:var(--bg-c);border:1px solid var(--brd);border-radius:10px;overflow:hidden;margin-bottom:10px;cursor:pointer;transition:background .15s,border-color .15s}
.mc-card:hover{background:rgba(255,255,255,.03);border-color:var(--brd2)}
.mc-hd{display:flex;align-items:center;justify-content:space-between;padding:12px 22px;font-family:var(--ft);font-weight:700;font-size:clamp(9px,0.45vw,10px);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mc-hd span{white-space:nowrap}
.mc-hd-right{display:flex;align-items:center;gap:18px}
/* Below 480px, four meta items (date / division / split / status) in one row no
longer fit at their default size - nowrap + a smaller font keeps them on a
single line instead of wrapping mid-phrase or dropping to a second row. */
@media(max-width:480px){
.mc-hd{flex-wrap:nowrap;gap:5px;padding:9px 12px;font-size:7px}
.mc-hd-right{flex-wrap:nowrap;gap:5px}
}
.mc-body{display:flex;align-items:center;justify-content:center;gap:20px;padding:4px 24px 32px}
/* flex:1 lets each team block grow to fill the card at wide viewports (large
desktop monitors, 1920px+) instead of staying capped at a fixed width while
the card itself keeps growing - which left a widening dead gap on the outer
edges the wider the screen got. max-width keeps it from stretching past a
sensible point on ultra-wide screens. */
.mc-team{flex:1 1 0;min-width:0;max-width:460px;display:flex;align-items:center;gap:16px}
.mc-team.right{}
/* Below ~950px there's less room to share, so the cap comes down with it; below
520px the same 3-column row is kept (team / score / team, never stacked into
separate full-width rows) but each team switches to logo stacked above its
name - that's what lets three columns stay on one line at a narrow width
instead of needing the row to become a column. */
@media(max-width:950px){.mc-team{max-width:380px}}
@media(max-width:520px){
.mc-body{flex-direction:row;align-items:center;justify-content:space-between;gap:6px;padding:14px 10px 16px}
.mc-team{flex:1 1 0;min-width:0;max-width:none;flex-direction:column;gap:6px}
/* Source order puts team B's name before its logo (so the desktop row mirrors
left/right); reversed here so the logo still ends up on top for both teams
once they're stacked vertically instead of side-by-side. */
.mc-team.right{flex-direction:column-reverse}
.mc-team .mc-tname{flex:0 1 auto;min-width:0;max-width:100%;text-align:center}
.mc-center{min-width:0;gap:4px;flex-shrink:1}
.mc-logo{width:30px;height:30px}
.tp.mc-logo{font-size:11px}
.mc-tname{font-size:9.5px}
.mc-center-main{font-size:19px}
.mc-center-sub{font-size:7px}
}
.mc-tname{font-family:var(--ft);font-weight:900;font-size:clamp(16px,1vw,22px);text-transform:uppercase;letter-spacing:.02em;flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-center{flex:none;text-align:center;display:flex;flex-direction:column;align-items:center;gap:15px;min-width:140px}
.mc-center-main{font-family:var(--ft);font-weight:900;font-size:clamp(32px,2.2vw,48px);line-height:1;color:var(--txt)}
.mc-logo{width:clamp(45px,3.1vw,75px);height:clamp(45px,3.1vw,75px);flex-shrink:0}
.tp.mc-logo{font-size:clamp(16px,1.4vw,26px)}
.mc-center-sub{font-family:var(--ft);font-weight:700;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
/* ━━━ DATE GROUP ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.date-group{margin-bottom:36px}
.date-hd{font-family:var(--ft);font-weight:900;font-size:24px;letter-spacing:.01em;color:var(--txt);padding:0 4px 14px;text-transform:capitalize}
.date-hd.today{color:var(--acc)}