/* E-Kings design system — purple and gold on near-black, taken from the logo and jersey. */
:root{
  --bg:#07060E; --surface:#131022; --surface-2:#1A1630; --surface-3:#231d3d;
  --line:rgba(155,92,255,.18); --line-mid:rgba(155,92,255,.3); --line-strong:rgba(155,92,255,.45);
  --purple:#8B2FE0; --purple-bright:#B565FF; --gold:#FFC93C; --gold-ink:#1A1406;
  --win:#3CD98A; --lose:#FF5C7A; --blue:#5B8CFF;
  --text:#F3F0F9; --text-dim:#9A93B0; --text-faint:#6C6584;
  /* Taken from the jersey wordmark: heavy slanted varsity block caps with flared spurs, cream
     running to gold inside a purple edge. Big Shoulders is American athletic signage lettering,
     which is the same tradition the logo is drawn from; Chivo and Chivo Mono are one family, so
     the running text and the scoreboard figures speak with a single voice under it. */
  --display:'Big Shoulders Display','Arial Narrow',system-ui,sans-serif;
  --body:'Chivo',system-ui,-apple-system,sans-serif;
  --mono:'Chivo Mono',ui-monospace,SFMono-Regular,monospace;

  /* the wordmark's own fill and edge */
  --cream:#FFF4DC; --edge:#5B1E96;
  --bevel:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  --bevel-sm:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  --bevel-xs:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
/* The logo is an oblique, not a true italic - a block face leaned over. oblique with an angle
   asks the browser for exactly that and leaves the box alone, where a transform would shift
   every heading off its own layout. */
h1,h2,h3,h4{font-family:var(--display);font-style:oblique 8deg;font-weight:800;
  text-transform:uppercase;letter-spacing:.005em;line-height:1;margin:0;
  font-synthesis:style}
a{color:var(--purple-bright);text-decoration:none}
a:hover{color:var(--gold)}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* skip straight past the navigation for keyboard and screen-reader users */
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:999;background:var(--gold);color:var(--gold-ink);padding:10px 16px}

.layout{display:flex;min-height:100vh}
.sidebar{width:248px;flex:none;background:var(--surface);border-right:1px solid var(--line);
  padding:26px 16px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh;overflow-y:auto}
.content{flex:1;min-width:0;display:flex;flex-direction:column}
main{flex:1}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--display);font-style:oblique 8deg;font-weight:900;
  font-size:26px;letter-spacing:.04em;color:var(--text);margin-bottom:18px}
.brand-crown{color:var(--gold);font-style:normal}
.side-group{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-faint);margin:16px 0 6px;font-weight:700}
.side-link{display:flex;align-items:center;gap:10px;padding:10px 12px;color:var(--text-dim);font-weight:600;
  font-size:14px;clip-path:var(--bevel-xs);border-left:2px solid transparent}
.side-link:hover{background:var(--surface-2);color:var(--text)}
.side-link.active{background:linear-gradient(90deg,rgba(255,201,60,.18),transparent);
  color:var(--gold);border-left-color:var(--gold)}
.side-link .ico{font-family:var(--mono);font-size:9px;background:var(--surface-3);padding:5px 6px;
  color:var(--text-faint);clip-path:var(--bevel-xs)}
.side-panel{display:flex;flex-direction:column;gap:6px;flex:1;min-height:0}
.side-auth{margin-top:auto;padding-top:18px;display:flex;flex-direction:column;gap:8px}

/* The phone menu button. Hidden here and switched on only inside the narrow breakpoint, and
   only for a scripted document - see the mobile block for why. */
.side-toggle{display:none}
.inline{display:inline}

.wrap{width:min(1200px,100% - 48px);margin-inline:auto}
.narrow{width:min(560px,100% - 48px)}
.section{padding:56px 0}
.section.first{padding-top:44px}
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--purple-bright);font-weight:700;margin:0 0 10px}
.page-title{font-size:clamp(34px,6vw,58px)}
.page-sub{color:var(--text-dim);max-width:62ch;margin:14px 0 0}
.sec-label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-faint);font-weight:700;font-style:normal;display:flex;align-items:center;gap:10px;margin:0 0 14px}
.sec-label::after{content:'';flex:1;height:1px;background:var(--line)}
.muted{color:var(--text-dim)}
.small{font-size:13px}
.hint{color:var(--text-faint);font-size:12.5px;margin:6px 0 0}

.hero{padding:72px 0 46px;background:radial-gradient(ellipse at 50% 0,rgba(139,47,224,.28),transparent 62%)}
.lockup{font-size:clamp(52px,12vw,124px);display:flex;align-items:center;gap:14px;justify-content:center}
.lockup .crown{color:var(--gold);font-style:normal;font-size:.5em}
.hero .tag{font-family:var(--display);font-style:oblique 8deg;font-size:clamp(17px,3vw,26px);
  text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);text-align:center;margin:10px 0 0}
.hero .lede{max-width:56ch;margin:16px auto 0;text-align:center;color:var(--text-dim)}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;
  font-family:var(--display);font-style:oblique 8deg;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:14px;cursor:pointer;border:1px solid transparent;clip-path:var(--bevel-sm);transition:.18s;
  background:transparent;color:var(--text)}
.btn.solid{background:var(--gold);color:var(--gold-ink)}
.btn.solid:hover{background:#ffd75c;transform:translateY(-1px)}
.btn.ghost{background:transparent;border-color:var(--line-strong);color:var(--text)}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn.block{width:100%;margin-top:8px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.row{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0}

.tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  padding:5px 9px;clip-path:var(--bevel-xs);border:1px solid var(--line-mid);color:var(--text-faint)}
.tag.gold{background:var(--gold);color:var(--gold-ink);border-color:transparent}
.tag.purple{background:rgba(139,47,224,.2);color:var(--purple-bright);border-color:var(--line-strong)}
.tag.live{background:rgba(255,92,122,.16);color:var(--lose);border-color:rgba(255,92,122,.4)}
.tag.done{background:rgba(60,217,138,.14);color:var(--win);border-color:rgba(60,217,138,.4)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}

.grid-3{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-top:24px}
.t-card{background:var(--surface);border:1px solid var(--line);clip-path:var(--bevel);overflow:hidden;
  transition:transform .2s,filter .2s,border-color .2s}
.t-card:hover{transform:translateY(-4px);border-color:var(--line-mid)}
.t-hit{display:block;color:inherit}
.t-banner{height:110px;position:relative;padding:12px;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(135deg,#2E1A54,var(--purple))}
.t-banner.tk{background:linear-gradient(135deg,#4a1330,#a3245e)}
.t-banner.gt{background:linear-gradient(135deg,#132a4a,#2472a3)}
.badges{display:flex;gap:6px;flex-wrap:wrap}
.t-mono{font-family:var(--display);font-style:oblique 8deg;font-weight:900;font-size:30px;
  color:rgba(255,255,255,.22);text-transform:uppercase;align-self:flex-end}
.t-body{padding:18px 20px 20px}
.t-game{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--purple-bright);font-weight:700}
.t-name{font-size:22px;margin:6px 0 12px}
.t-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.t-meta{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:11px;
  color:var(--text-faint);border-top:1px solid var(--line);padding-top:12px}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-top:26px}
.stat{background:var(--surface);border:1px solid var(--line);clip-path:var(--bevel-sm);padding:16px 18px;
  display:flex;flex-direction:column;gap:6px}
.stat span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.stat b{font-family:var(--display);font-style:oblique 8deg;font-size:30px}
.stat b.gold{color:var(--gold)} .stat b.warn{color:var(--lose)}

.adm-list{margin-top:16px;border-top:1px solid var(--line)}
.adm-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 8px;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.adm-name{font-weight:600}
.adm-sub{font-family:var(--mono);font-size:11px;color:var(--text-faint);margin-top:4px}
.icon-btn{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  padding:8px 12px;border:1px solid var(--line-mid);clip-path:var(--bevel-xs);color:var(--text-dim);
  /* a <button> carries the browser's own light background until it is told otherwise, which on a
     near-black page turns every admin control into a bright grey slab */
  background:transparent;cursor:pointer;transition:.18s}
.icon-btn:hover{border-color:var(--gold);color:var(--gold);background:rgba(255,201,60,.08)}

.field{margin-bottom:18px}
.field label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);font-weight:700;margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;background:var(--surface-2);border:1px solid var(--line-mid);
  color:var(--text);padding:12px 14px;font-family:var(--body);font-size:15px;clip-path:var(--bevel-xs)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--purple-bright);outline:none}
.validation-message{color:var(--lose);font-size:12.5px;margin-top:6px;display:block}

/* the honeypot must be unreachable for people but present for a bot to find */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

.notice{padding:14px 18px;clip-path:var(--bevel-sm);margin:18px 0;font-size:14.5px}
.notice.ok{background:rgba(60,217,138,.12);border:1px solid rgba(60,217,138,.4);color:var(--win)}
.notice.bad{background:rgba(255,92,122,.12);border:1px solid rgba(255,92,122,.4);color:var(--lose)}

.seg{display:inline-flex;border:1px solid var(--line-mid);clip-path:var(--bevel-xs);overflow:hidden;margin-bottom:18px}
.seg button{background:transparent;border:none;color:var(--text-dim);padding:11px 22px;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.seg button.on{background:var(--gold);color:var(--gold-ink)}
.eft{background:var(--surface-2);border:1px solid var(--line);clip-path:var(--bevel-sm);padding:6px 18px;margin-bottom:18px}
.eft-row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.eft-row:last-child{border-bottom:none}
.eft-row span{color:var(--text-faint);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.eft-row b.gold{color:var(--gold)}

.proof-checks{display:flex;flex-direction:column;gap:8px;margin:16px 0}
.pchk{display:flex;gap:10px;padding:11px 13px;background:var(--surface-2);border-left:2px solid var(--line-mid);font-size:13px}
.pchk i{font-style:normal;font-weight:700}
.pchk.pass{border-left-color:var(--win)} .pchk.pass i{color:var(--win)}
.pchk.warn{border-left-color:var(--gold)} .pchk.warn i{color:var(--gold)}
.pchk.fail{border-left-color:var(--lose)} .pchk.fail i{color:var(--lose)}
.proof-verdict{padding:15px 18px;clip-path:var(--bevel-sm);margin-bottom:18px;font-size:13.5px;line-height:1.6}
.proof-verdict b{display:block;font-family:var(--display);font-style:oblique 8deg;font-size:19px;margin-bottom:5px}
.proof-verdict.ok{background:rgba(60,217,138,.1);border:1px solid rgba(60,217,138,.4)}
.proof-verdict.ok b{color:var(--win)}
.proof-verdict.bad{background:rgba(255,92,122,.1);border:1px solid rgba(255,92,122,.4)}
.proof-verdict.bad b{color:var(--lose)}

/* bracket */
.bk-scroll{overflow-x:auto;padding:6px 2px 16px}
.bk-sec{font-family:var(--mono);font-style:normal;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--purple-bright);margin:22px 0 6px;display:flex;align-items:center;gap:10px}
.bk-sec::after{content:'';flex:1;height:1px;background:var(--line)}
.bk-sec.lose{color:var(--lose)} .bk-sec.gf{color:var(--gold)}
.bk-rounds{display:flex;gap:16px;align-items:flex-start;min-width:min-content}
.bk-round{display:flex;flex-direction:column;gap:10px;min-width:186px}
.bk-rlabel{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);font-weight:700}
.bm{background:var(--surface-2);border:1px solid var(--line);clip-path:var(--bevel-xs)}
.bm.live{border-color:rgba(255,201,60,.5)}
.bm-side{display:flex;justify-content:space-between;gap:8px;padding:9px 11px;font-size:13px}
.bm-side+.bm-side{border-top:1px solid var(--line)}
.bm-nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-dim)}
.bm-side.won .bm-nm{color:var(--text);font-weight:600}
.bm-side.won .bm-sc{color:var(--gold)}
.bm-side.out .bm-nm{color:var(--text-faint);text-decoration:line-through}
.bm-side.tbd .bm-nm{color:var(--text-faint);font-style:oblique 8deg}
.bm-side.bye .bm-nm{color:var(--text-faint);font-family:var(--mono);font-size:10.5px}
.bm-sc{font-family:var(--mono);font-size:12px;color:var(--text-faint);flex:none}
.bm-edit{width:100%;border:none;border-top:1px solid var(--line);background:rgba(139,47,224,.16);
  color:var(--purple-bright);font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;padding:7px;cursor:pointer}
.bm-edit:hover{background:rgba(139,47,224,.3);color:#fff}
.bk-champ{margin:18px 0;padding:16px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:linear-gradient(120deg,rgba(255,201,60,.18),rgba(139,47,224,.14));
  border:1px solid rgba(255,201,60,.45);clip-path:var(--bevel-sm)}
.bk-champ b{font-family:var(--display);font-style:oblique 8deg;font-size:26px;color:var(--gold);text-transform:uppercase}
.bk-champ span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint)}
.bk-empty{padding:30px 24px;text-align:center;border:1px dashed var(--line-mid);clip-path:var(--bevel-sm);margin-top:18px}
.bk-note{color:var(--text-faint);font-size:13px;max-width:72ch;margin-top:14px}

.overlay{position:fixed;inset:0;background:rgba(4,3,9,.82);z-index:500;display:none;
  align-items:flex-start;justify-content:center;padding:56px 18px;overflow-y:auto}
.overlay.show{display:flex}
.modal{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--line-strong);padding:30px}
.sc-row{display:grid;grid-template-columns:1fr 84px;gap:12px;align-items:center;margin-bottom:12px}
.sc-row .nm{font-weight:600}
.sc-row input{background:var(--surface-2);border:1px solid var(--line-mid);color:var(--text);padding:10px 12px;width:100%}

.site-footer{border-top:1px solid var(--line);background:var(--surface);padding:44px 0 26px;margin-top:60px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px}
.footer-grid h4{font-size:15px;margin-bottom:10px;color:var(--text)}
.footer-grid nav a{display:block;color:var(--text-dim);font-size:14px;padding:4px 0}
.footer-grid nav a:hover{color:var(--gold)}
.foot-brand{font-family:var(--display);font-style:oblique 8deg;font-weight:900;font-size:26px}
.foot-brand span{color:var(--gold)}
.foot-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:28px;
  padding-top:18px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--text-faint)}

#blazor-error-ui{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--lose);color:#fff;padding:14px 20px;z-index:1000}

@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:760px){
  .layout{flex-direction:column}

  /* A phone gets a slim bar that stays put while the page scrolls, so the menu is always one
     tap away and the page itself starts at the top of the screen rather than below a wall of
     links. */
  .sidebar{width:100%;height:auto;position:sticky;top:0;z-index:50;
    flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;
    gap:10px;padding:9px 16px;border-right:none;border-bottom:1px solid var(--line);
    /* No backdrop-filter here. It makes this element the containing block for anything
       positioned fixed inside it, which would trap the drawer and its scrim inside a 60px
       bar instead of letting them fill the viewport. */
    backdrop-filter:none;background:var(--surface)}
  /* Menu on the left, brand on the right: the control you reach for sits under the thumb
     that holds the phone, and the logo still anchors the bar. */
  .side-toggle{order:1}
  .brand{order:2;margin-bottom:0}
  .brand img{height:46px;width:auto}

  /* Without scripting the panel stays open: a menu that cannot be opened is a site that
     cannot be used, so the failure falls on the side of showing everything. */
  .js .side-toggle{display:inline-flex;align-items:center;gap:9px;
    font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
    font-weight:700;color:var(--text);background:transparent;cursor:pointer;
    border:1px solid var(--line-strong);clip-path:var(--bevel-xs);padding:9px 13px}
  .js .side-toggle:hover{border-color:var(--gold);color:var(--gold)}
  .side-bars{position:relative;display:block;width:15px;height:2px;background:currentColor}
  .side-bars::before,.side-bars::after{content:'';position:absolute;left:0;width:15px;height:2px;
    background:currentColor;transition:transform .18s}
  .side-bars::before{top:-5px}
  .side-bars::after{top:5px}
  .side-toggle[aria-expanded="true"] .side-bars{background:transparent}
  .side-toggle[aria-expanded="true"] .side-bars::before{transform:translateY(5px) rotate(45deg)}
  .side-toggle[aria-expanded="true"] .side-bars::after{transform:translateY(-5px) rotate(-45deg)}

  /* Unscripted, the panel stays in the flow under the bar and is simply open. */
  .side-panel{order:3;width:100%;flex:none;gap:2px;
    padding-top:12px;margin-top:2px;border-top:1px solid var(--line)}

  /* Scripted, it becomes a drawer down the left - the same side, the same column of links
     as the desktop sidebar, just slid out of the way until it is asked for. */
  .js .side-panel{position:fixed;top:0;left:0;bottom:0;z-index:60;
    width:min(292px,84vw);gap:2px;margin:0;
    /* Clears the bar: the menu button sits at the top left and the drawer opens over it,
       so the first link starts below the button rather than under it. */
    padding:74px 14px 28px;
    background:var(--surface);border-top:none;border-right:1px solid var(--line-mid);
    overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(-100%);visibility:hidden;
    transition:transform .24s ease,visibility .24s}
  .js .sidebar.open .side-panel{transform:none;visibility:visible}

  /* The page behind it dims, and a tap out there closes the drawer. */
  .js .sidebar.open::after{content:'';position:fixed;inset:0;z-index:55;
    background:rgba(7,6,14,.74);backdrop-filter:blur(2px)}

  /* the drawer opens over the bar, so its own close control has to sit above the scrim */
  .js .side-toggle{position:relative;z-index:65}

  /* the page behind the drawer holds still rather than scrolling under it */
  html.nav-open,html.nav-open body{overflow:hidden}

  /* Open, it is a proper list rather than wrapped chips: the groups earn their keep here. */
  .sidebar nav{display:flex;flex-direction:column;gap:2px;width:100%}
  .side-group{display:block;margin:12px 0 4px}
  .side-group:first-child{margin-top:0}
  .side-link{padding:11px 12px;font-size:15px}
  .side-auth{flex-direction:row;flex-wrap:wrap;align-items:center;margin:14px 0 4px;padding:0}

  .wrap,.narrow{width:calc(100% - 32px)}
  .footer-grid{grid-template-columns:1fr}
}

@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .side-bars::before,.side-bars::after{transition:none}
  .js .side-panel{transition:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}

/* ---------- control room ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:640px){.two-col{grid-template-columns:1fr}}
.check{display:flex;align-items:flex-start;gap:10px;margin:8px 0 4px;font-size:14px;color:var(--text-dim);cursor:pointer}
.check input{width:18px;height:18px;flex:none;margin-top:2px}
.consent{border:1px solid var(--line);padding:14px 16px 10px;margin:18px 0 16px}
.consent legend{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);padding:0 8px}
.consent .check{margin:10px 0}
.consent .check a{text-decoration:underline}
.check em{font-style:normal;font-size:11px;letter-spacing:.06em;text-transform:uppercase;margin-left:6px;color:var(--text-faint)}
.check em.req{color:var(--text)}
.prize-row{display:grid;grid-template-columns:90px 110px 1fr auto;gap:10px;margin-bottom:10px;align-items:center}
.prize-row input{background:var(--surface-2);border:1px solid var(--line-mid);color:var(--text);
  padding:10px 12px;font-family:var(--body);font-size:14px;clip-path:var(--bevel-xs);width:100%}
@media (max-width:640px){.prize-row{grid-template-columns:1fr 1fr}}
.inline-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.inline-form input,.inline-form select{background:var(--surface-2);border:1px solid var(--line-mid);color:var(--text);
  padding:11px 13px;font-family:var(--body);font-size:14px;clip-path:var(--bevel-xs);min-width:170px;flex:1}
.walkin{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.walkin input{background:var(--surface-2);border:1px solid var(--line-mid);color:var(--text);
  padding:11px 13px;font-family:var(--body);font-size:14px;clip-path:var(--bevel-xs);min-width:170px;flex:1}
.icon-btn.danger,.btn.danger{border-color:rgba(255,92,122,.5);color:var(--lose)}
.icon-btn.danger:hover,.btn.danger:hover{background:rgba(255,92,122,.12);color:var(--lose)}
.review-card{background:var(--surface);border:1px solid var(--line);clip-path:var(--bevel);padding:22px;margin-bottom:18px}
.review-card header{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start;
  padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:14px}
.review-card .amount{font-family:var(--display);font-style:oblique 8deg;font-size:26px;color:var(--gold)}
.review-card .screening{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.review-card details{margin-bottom:14px}
.review-card summary{cursor:pointer;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-faint)}
.review-card .report{font-family:var(--mono);font-size:11.5px;color:var(--text-dim);line-height:1.8;
  background:var(--surface-2);padding:12px 14px;margin-top:10px;word-break:break-word}

/* ==========================================================================
   Atmosphere — the look from the walkthrough: a starfield behind everything,
   ambient purple bloom, a fine grain, and the animated hero lockup.
   ========================================================================== */

#fx{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
/* the canvas is a replaced element: without explicit width/height it renders at 300x150 */

.amb{position:fixed;border-radius:50%;filter:blur(60px);opacity:.5;z-index:0;pointer-events:none}
.amb-1{width:640px;height:640px;top:-220px;left:-160px;
  background:radial-gradient(circle,rgba(139,47,224,.42),rgba(139,47,224,0) 70%)}
.amb-2{width:520px;height:520px;bottom:-180px;right:-140px;
  background:radial-gradient(circle,rgba(255,201,60,.18),rgba(255,201,60,0) 70%)}

.grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.035;
  background-image:radial-gradient(rgba(255,255,255,.9) 1px,transparent 1px);
  background-size:3px 3px;mix-blend-mode:overlay}

.layout{position:relative;z-index:1}
/* Wide screens only. On a phone the sidebar holds the drawer, and backdrop-filter would
   make it the containing block for it - pinning a full-height drawer inside a 60px bar. */
@media (min-width:761px){
  .sidebar{background:rgba(19,16,34,.82);backdrop-filter:blur(12px)}
}
.site-footer{background:rgba(19,16,34,.82);backdrop-filter:blur(12px)}

/* ---------- brand ---------- */
.brand{gap:10px}
/* Sized by height, so the crest keeps its own 300x258 proportions at every width.
   Scoped above the breakpoint because the phone bar sets its own size below, and an
   unscoped rule here sits later in the file and would quietly win. */
.brand img{display:block;filter:drop-shadow(0 4px 14px rgba(139,47,224,.55))}
@media (min-width:761px){
  .brand img{height:42px;width:auto}
}
.foot-brand img{height:52px;width:auto;display:block;margin-bottom:14px}

/* ---------- hero banner ----------
   Plain dark ground - the starfield and the ambient glows behind it (see "ground" further down)
   already carry the atmosphere, so the hero itself is just the sign-in buttons, the headline
   and the shortcuts, left-aligned and given room to breathe. */
.hero{position:relative;padding:54px 0 40px;overflow:hidden}
.hero .wrap{position:relative;z-index:1}

/* ---------- the front page artwork ----------
   The picture is built with its subject on the right and the left deliberately left empty, so
   the hero is laid out around that: the headline lives in the empty half and nothing is ever
   placed over the player.

   Two washes sit on top of it. One runs across, taking the left edge down to near-black so
   cream type holds at any brightness the photograph happens to have there, and releasing before
   it reaches the figure. The other fades the bottom into the page, so the picture ends rather
   than stops. */
.hero-banner{min-height:clamp(470px,48vw,690px);display:flex;align-items:center;
  padding-bottom:58px}
.hero-art{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;object-position:68% top;pointer-events:none}
.hero-banner::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(97deg,rgba(7,6,14,.95) 0%,rgba(7,6,14,.88) 24%,rgba(7,6,14,.5) 44%,
      rgba(7,6,14,.08) 60%,rgba(7,6,14,0) 72%),
    linear-gradient(0deg,var(--bg) 2%,rgba(7,6,14,0) 30%)}

/* The sign-in corner: real buttons, not a text link, so this is unmistakably somewhere to sign
   in. Top right of the wrap, in the corner of the picture, which leaves the whole left half
   uninterrupted for the headline. */
.hero-auth{position:absolute;top:0;right:0;display:flex;align-items:center;gap:12px;
  flex-wrap:wrap;justify-content:flex-end}

/* Held to the half of the picture that was left empty. Nothing sits above it now, so it takes
   the hero's own vertical centring rather than clearing a row. */
.hero-copy{max-width:min(600px,52%)}

@media (max-width:1040px){
  /* Below this the picture can no longer give the copy a clean half to sit in, so the wash
     goes vertical, darkens the whole frame and the copy takes the full width over it - which
     puts it back underneath the auth row, so the clearance comes back with it. */
  .hero-copy{max-width:none;padding-top:76px}
  .hero-art{object-position:70% top}
  .hero-banner{min-height:clamp(430px,78vw,540px)}
  .hero-banner::after{background:
    linear-gradient(178deg,rgba(7,6,14,.7) 0%,rgba(7,6,14,.5) 42%,rgba(7,6,14,.88) 80%,var(--bg) 100%),
    linear-gradient(90deg,rgba(7,6,14,.58),rgba(7,6,14,0) 64%)}
}
.hero-kicker{font-size:clamp(44px,7vw,82px);line-height:.98}
.hero-kicker span{display:block}

/* shortcuts straight to registering for whatever is open - the same box treatment the mockup used */
.hero-pills{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.hero-pill{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:12px 20px;border:1px solid var(--line-strong);color:var(--text)}
.hero-pill:hover{border-color:var(--gold);color:var(--gold);background:rgba(255,201,60,.08)}

/* ---------- the next event, on a bar of its own ----------
   This used to be a panel in a second column. The artwork behind the hero puts its subject on
   the right, so a panel there covered the one thing the picture is of. Across the foot instead:
   what it is, the facts in a row, then the way in. */
.nextbar{position:relative;z-index:1;margin-top:-30px}
.nb-inner{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:20px 34px;
  padding:22px 26px;clip-path:var(--bevel);
  background:linear-gradient(165deg,rgba(35,29,61,.94),rgba(19,16,34,.97));
  border:1px solid var(--line-mid);backdrop-filter:blur(10px)}
.nb-inner::before{content:'';position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,var(--purple),var(--gold) 65%,transparent)}
.hn-label{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--gold)}

/* The three parts grow at different rates: the name takes what it needs, the facts take the
   slack, and the buttons never stretch. */
.nb-lead{flex:1 1 230px;min-width:0}
.nb-name{font-size:clamp(21px,2.3vw,29px);line-height:1.04;margin:6px 0 0}
.nb-facts{flex:2 1 340px;display:flex;flex-wrap:wrap;gap:16px 30px;margin:0}
.nb-facts>div{display:grid;gap:3px}
.nb-facts dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);font-weight:700}
.nb-facts dd{margin:0;font-size:14.5px;color:var(--text)}
.nb-actions{flex:0 0 auto;display:flex;gap:10px;flex-wrap:wrap}

@media (max-width:860px){
  .nextbar{margin-top:-18px}
  .nb-inner{padding:20px;gap:18px}
  .nb-actions{width:100%}
  .nb-actions .btn{flex:1 1 auto}
}

/* The crown and the wordmark are two halves of one image, cut across the crown's base band:
   883x321 above, 883x438 below, which stacked is exactly the full logo's proportion.

   So they are sized by ONE width and butted together. Sizing them by height independently
   rendered them 341px and 375px wide - two different scales of the same drawing - and then a
   negative margin pulled the wordmark up over the crown, which is why the crown appeared to sit
   inside the letters rather than above them. */
.lockup{position:relative;display:flex;flex-direction:column;align-items:center;gap:0;
  margin:0 auto;width:clamp(200px,30vw,330px);
  filter:drop-shadow(0 14px 38px rgba(139,47,224,.55)) drop-shadow(0 6px 18px rgba(255,201,60,.28))}
.lockup img{display:block;width:100%;height:auto}
.lk-crown{position:relative;z-index:2}
/* a hair of overlap so subpixel scaling cannot open a seam between the two halves */
.lk-word{position:relative;z-index:1;margin-top:-1px}

/* entrance: the wordmark rises, the crown drops onto it, then a flash */
.js .lockup .lk-word{animation:wordRise .72s cubic-bezier(.2,.8,.2,1) .15s backwards}
.js .lockup .lk-crown{animation:crownDrop .68s cubic-bezier(.34,1.56,.64,1) .5s backwards}
.js .lockup::after{content:'';position:absolute;top:8%;left:50%;width:220px;height:220px;
  transform:translate(-50%,-50%) scale(.2);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,240,200,.85),rgba(255,201,60,0) 65%);
  opacity:0;animation:burst .6s ease-out 1.02s}

@keyframes wordRise{from{opacity:0;transform:translateY(26px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes crownDrop{from{opacity:0;transform:translateY(-90px) rotate(-6deg)}
  to{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}
  40%{opacity:.9}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}

/* The hero's first arrival lives in "the way in" further down. What stood here animated an
   eyebrow, a tagline and a CTA row the hero no longer has. */

/* ---------- reveal on scroll ---------- */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.js .rv.in{opacity:1;transform:none}

/* ---------- surfaces sit above the starfield ---------- */
.t-card,.stat,.review-card,.modal,.nb-inner,.bm,.bk-champ,.eft,.adm-row{
  background-color:rgba(19,16,34,.88);backdrop-filter:blur(6px)}
/* Drawn with drop-shadow, not box-shadow. Every card here is cut to a bevel with clip-path, and
   clip-path clips a box-shadow away with the rest of the rectangle - so the lift these cards were
   meant to have never actually rendered. drop-shadow follows the cut silhouette instead. */
.t-card:hover{filter:drop-shadow(0 20px 30px rgba(139,47,224,.5))}

/* corner ticks, the HUD detail from the walkthrough */
.panel-tick{position:relative}
.panel-tick::before,.panel-tick::after{content:'';position:absolute;width:12px;height:12px;
  border-color:var(--gold);opacity:.7}
.panel-tick::before{top:0;left:0;border-top:2px solid;border-left:2px solid}
.panel-tick::after{bottom:0;right:0;border-bottom:2px solid;border-right:2px solid}

@media (prefers-reduced-motion:reduce){
  .js .lockup .lk-word,.js .lockup .lk-crown{opacity:1!important;transform:none!important;animation:none!important}
  .js .lockup::after{display:none}
  .js .rv,.rv{opacity:1;transform:none}
}
@media (max-width:760px){
  .hero{padding:52px 0 34px}
  .amb{filter:blur(46px);opacity:.38}
}

/* ---------- player card ---------- */
.pcard{margin-top:22px;display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);
  background:rgba(19,16,34,.88);border:1px solid var(--line);clip-path:var(--bevel);overflow:hidden}
.pcard-face{padding:28px 22px;display:flex;flex-direction:column;align-items:center;gap:14px;
  background:linear-gradient(165deg,rgba(139,47,224,.34),rgba(19,16,34,.2));
  border-right:1px solid var(--line)}
.pcard-ico{width:118px;height:118px;display:flex;align-items:center;justify-content:center;overflow:hidden;
  clip-path:polygon(50% 0,100% 26%,100% 74%,50% 100%,0 74%,0 26%);
  background:linear-gradient(140deg,var(--purple),var(--gold));
  font-family:var(--display);font-style:oblique 8deg;font-weight:800;font-size:40px;color:#140F22}
.pcard-ico img{width:100%;height:100%;object-fit:cover}
.pcard-ico svg{width:58px;height:58px;stroke:#140F22;fill:none;stroke-width:1.7}
.pcard-name{font-family:var(--display);font-style:oblique 8deg;font-size:22px;font-weight:800;
  text-transform:uppercase;text-align:center;line-height:1.05}
.pcard-tag{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--gold);
  font-weight:700;text-align:center;word-break:break-word}
.pcard-body{padding:26px 28px;display:flex;flex-direction:column;gap:16px}
.pcard-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.pcard-meta{display:flex;flex-wrap:wrap;gap:8px}
.pcard-meta span{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;color:var(--text-faint);border:1px solid var(--line-mid);padding:6px 10px;
  clip-path:var(--bevel-xs)}
.pcard-line{font-size:14px;color:var(--text-dim);line-height:1.6;margin:0}
.pcard-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pcard-stats .stat{padding:14px 12px}
.pcard-stats .stat b{font-size:24px}
@media (max-width:760px){
  .pcard{grid-template-columns:1fr}
  .pcard-face{border-right:none;border-bottom:1px solid var(--line)}
  .pcard-stats{grid-template-columns:1fr 1fr}
}

.ico-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:4px}
.ico-opt{aspect-ratio:1;border:1px solid var(--line-mid);background:var(--surface-2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;clip-path:var(--bevel-xs);padding:0}
.ico-opt svg{width:26px;height:26px;stroke:var(--text-dim);fill:none;stroke-width:1.7}
.ico-opt.on{border-color:var(--gold);background:rgba(255,201,60,.14)}
.ico-opt.on svg{stroke:var(--gold)}
.btn.block+.btn.block{margin-top:10px}

/* ---------- roster ---------- */
.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px;margin-top:22px}
.rcard{background:rgba(19,16,34,.88);border:1px solid var(--line);clip-path:var(--bevel);overflow:hidden;
  transition:transform .24s,border-color .24s}
/* No drop-shadow on this one on purpose: a filter flattens the 3D context underneath it, and the
   portrait inside flips on rotateY. The lift is carried by the move and the edge instead. */
.rcard:hover{transform:translateY(-5px);border-color:var(--line-strong)}
.rcard-img{display:block;width:100%;padding:0;border:none;background:none;cursor:pointer;
  position:relative;aspect-ratio:4/5;perspective:1100px}
.rcard-img.static{cursor:default}
.flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .66s cubic-bezier(.2,.8,.2,1)}
.rcard-img.flipped .flip-inner{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden}
.flip-face img{width:100%;height:100%;object-fit:cover;display:block}
.flip-face.back{transform:rotateY(180deg)}
.rcard-img.static .flip-face{position:relative}
.rcard-pro{position:absolute;top:10px;left:10px;z-index:2}
.flip-hint{position:absolute;bottom:10px;right:10px;z-index:2;font-family:var(--mono);font-size:9px;
  letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--text-dim);
  background:rgba(7,6,14,.72);padding:5px 8px;clip-path:var(--bevel-xs);opacity:0;transition:opacity .2s}
.rcard:hover .flip-hint,.rcard-img:focus-visible .flip-hint{opacity:1}
.rcard-body{padding:16px 18px 18px}
.rcard-name{font-size:19px;line-height:1.1}
.rcard-tag{font-family:var(--mono);font-size:11px;color:var(--text-faint);margin-top:7px}
.rcard-tag b{color:var(--gold)}

.team-shot{display:grid;grid-template-columns:minmax(0,392px) minmax(0,1fr);margin-top:24px;
  background:rgba(19,16,34,.88);border:1px solid var(--line);clip-path:var(--bevel);overflow:hidden}
.ts-img{position:relative}
.ts-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.ts-copy{padding:36px 38px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.ts-copy h3{font-size:29px;line-height:1.05}
.ts-copy p{font-size:14.5px;color:var(--text-dim);line-height:1.7;margin:0}
.ts-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.ts-meta span{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;color:var(--text-faint);border:1px solid var(--line-mid);padding:7px 11px;clip-path:var(--bevel-xs)}
@media (max-width:860px){
  .team-shot{grid-template-columns:1fr}
  .ts-img{max-height:420px}
  .ts-copy{padding:26px 24px 30px}
}

.staff{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;margin-top:28px}
.scard{background:rgba(19,16,34,.88);border:1px solid var(--line);clip-path:var(--bevel);padding:24px;
  transition:transform .22s}
.scard:hover{transform:translateY(-4px)}
.scard-av{width:54px;height:54px;margin-bottom:18px;display:flex;align-items:center;justify-content:center;
  clip-path:polygon(50% 0,100% 26%,100% 74%,50% 100%,0 74%,0 26%);
  background:linear-gradient(140deg,var(--purple),var(--purple-bright));
  font-family:var(--mono);font-weight:700;font-size:15px;color:#fff}
.scard h3{font-size:19px;line-height:1.05}
.scard .role{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-top:9px;font-weight:700}
.scard p{font-size:13.5px;color:var(--text-dim);margin:14px 0 0;line-height:1.65}

/* ---------- sponsors ---------- */
.sponsor-panel{padding:42px;position:relative;overflow:hidden;margin-top:30px;clip-path:var(--bevel);
  background:linear-gradient(140deg,rgba(139,47,224,.22),rgba(19,16,34,.75));border:1px solid var(--line-strong)}
.sponsor-inner{display:grid;grid-template-columns:1.25fr 1fr;gap:42px;align-items:start}
.sponsor-inner h2{font-size:30px;line-height:1.05;margin-bottom:14px}
.sponsor-inner>div>p{color:var(--text-dim);line-height:1.7}
.perk-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
.perk{background:rgba(7,6,14,.45);border:1px solid var(--line);padding:16px;clip-path:var(--bevel-xs)}
.perk b{display:block;font-family:var(--display);font-style:oblique 8deg;text-transform:uppercase;
  font-size:15px;letter-spacing:.03em;color:var(--gold);margin-bottom:6px}
.perk span{font-size:13px;color:var(--text-dim);line-height:1.6}
.sponsor-form{background:rgba(7,6,14,.6);border:1px solid var(--line-mid);padding:26px;clip-path:var(--bevel-sm)}
.sponsor-form h4{font-size:19px;margin-bottom:18px}
@media (max-width:900px){
  .sponsor-panel{padding:26px}
  .sponsor-inner{grid-template-columns:1fr;gap:28px}
  .perk-grid{grid-template-columns:1fr}
}

.sponsor-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;margin-top:18px}
.sponsor-card{background:rgba(19,16,34,.88);border:1px solid var(--line);clip-path:var(--bevel);padding:24px;
  display:flex;flex-direction:column;gap:8px;transition:transform .2s,border-color .2s}
.sponsor-card:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.sp-name{font-family:var(--display);font-style:oblique 8deg;font-weight:800;font-size:22px;text-transform:uppercase}
.sp-role{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:700}
.sp-blurb{font-size:13.5px;color:var(--text-dim);line-height:1.6;margin:4px 0 0}
.sp-link{margin-top:auto;padding-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700}

/* ---------- rankings & standings ---------- */
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0 10px}
.pod{background:rgba(19,16,34,.88);border:1px solid var(--line);clip-path:var(--bevel);padding:24px 20px;
  text-align:center;display:flex;flex-direction:column;gap:6px}
.pod-1{border-color:rgba(255,201,60,.55);background:linear-gradient(165deg,rgba(255,201,60,.16),rgba(19,16,34,.9))}
.pod-2{border-color:rgba(200,200,220,.35)}
.pod-3{border-color:rgba(205,127,50,.4)}
.pod-pos{font-family:var(--display);font-style:oblique 8deg;font-weight:900;font-size:40px;line-height:1;color:var(--gold)}
.pod-2 .pod-pos{color:#c8c8dc}.pod-3 .pod-pos{color:#cd7f32}
.pod-name{font-family:var(--display);font-style:oblique 8deg;font-weight:800;font-size:20px;text-transform:uppercase;
  word-break:break-word}
.pod-stat{font-family:var(--mono);font-size:11px;color:var(--text-faint)}
.pod-titles{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
@media (max-width:640px){.podium{grid-template-columns:1fr}}

.rank-table{margin-top:24px;border-top:1px solid var(--line)}
.rank-row{display:grid;grid-template-columns:52px 1fr 80px 80px 70px 84px 70px;gap:12px;align-items:center;
  padding:14px 10px;border-bottom:1px solid var(--line);font-size:14.5px}
.rank-row.head{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);font-weight:700}
.rank-row:not(.head):hover{background:rgba(139,47,224,.08)}
.rank-pos{font-family:var(--mono);color:var(--gold);font-weight:700}
.rank-name{font-weight:600}
.rank-mono{font-family:var(--mono);font-size:12.5px;color:var(--text-dim)}
.rank-mono.gold{color:var(--gold)}
/* The column template has to match the cells that are actually visible at each width, or the
   last cell wraps onto a line of its own. The player table and the school table hide different
   columns, so each carries its own template rather than sharing one. */

/* player rankings: #, Player, Events(sm), Played(sm), Won, Win %, Titles(md) */
@media (max-width:860px){
  .hide-md{display:none}
  .rank-row{grid-template-columns:44px 1fr 72px 72px 64px 76px}
}
@media (max-width:600px){
  .hide-sm{display:none}
  .rank-row{grid-template-columns:40px 1fr 56px 70px}
}

/* school league: #, School, Played(sm), Won, Drew(sm), Lost(sm), Diff(md), Pts */
.rank-table.league .rank-row{grid-template-columns:52px 1fr 72px 62px 62px 62px 76px 66px}
@media (max-width:860px){
  .rank-table.league .rank-row{grid-template-columns:44px 1fr 66px 58px 58px 58px 64px}
}
@media (max-width:600px){
  .rank-table.league .rank-row{grid-template-columns:40px 1fr 56px 62px}
}

/* ---------- event-day check-in (built for a phone at the door) ---------- */
.checkin{max-width:720px}
.ci-count{display:flex;align-items:baseline;gap:10px;margin:22px 0 16px;padding:16px 20px;
  background:rgba(19,16,34,.9);border:1px solid rgba(255,201,60,.4);clip-path:var(--bevel-sm)}
.ci-count b{font-family:var(--display);font-style:oblique 8deg;font-size:38px;line-height:1;color:var(--gold)}
.ci-count span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint)}
.ci-search{width:100%;background:var(--surface-2);border:1px solid var(--line-mid);color:var(--text);
  padding:15px 16px;font-family:var(--body);font-size:16px;clip-path:var(--bevel-xs);margin-bottom:14px}
/* 16px keeps iOS from zooming the page when the field takes focus */
.ci-search:focus{border-color:var(--purple-bright);outline:none}
.ci-list{display:flex;flex-direction:column;gap:8px}
.ci-row{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;width:100%;
  min-height:64px;padding:12px 14px;text-align:left;cursor:pointer;
  background:rgba(19,16,34,.9);border:1px solid var(--line);clip-path:var(--bevel-xs);
  color:var(--text);transition:background .15s,border-color .15s}
.ci-row:hover{border-color:var(--line-strong)}
.ci-row.in{border-color:rgba(60,217,138,.55);background:rgba(60,217,138,.1)}
.ci-mark{width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--line-mid);clip-path:var(--bevel-xs);font-size:19px;font-weight:700;color:var(--win)}
.ci-row.in .ci-mark{border-color:var(--win);background:rgba(60,217,138,.18)}
.ci-who{display:flex;flex-direction:column;gap:3px;min-width:0}
.ci-who b{font-size:17px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci-who small{font-size:12.5px;color:var(--text-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:560px){
  .ci-pay{display:none}
  .ci-row{grid-template-columns:52px 1fr}
}

/* ---------- prizes ---------- */
.prize-split{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-top:18px}
.prize{background:rgba(19,16,34,.9);border:1px solid var(--line);clip-path:var(--bevel-sm);padding:20px;
  display:flex;flex-direction:column;gap:6px}
.prize.first{border-color:rgba(255,201,60,.55);
  background:linear-gradient(165deg,rgba(255,201,60,.14),rgba(19,16,34,.92))}
.prize-place{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--text-faint)}
.prize.first .prize-place{color:var(--gold)}
.prize-cash{font-family:var(--display);font-style:oblique 8deg;font-weight:800;font-size:30px;line-height:1}
.prize.first .prize-cash{color:var(--gold)}
.prize-items{font-size:13.5px;color:var(--text-dim);line-height:1.5}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:30px}
.about-card{background:rgba(19,16,34,.88);border:1px solid var(--line);clip-path:var(--bevel);padding:26px}
.about-card h2{font-size:21px;margin-bottom:12px}
.about-card p{font-size:14.5px;color:var(--text-dim);line-height:1.7;margin:0}
.about-contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:18px}
.about-contact>div{display:flex;flex-direction:column;gap:6px;background:rgba(19,16,34,.88);
  border:1px solid var(--line);clip-path:var(--bevel-xs);padding:18px 20px}
.about-contact span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint);font-weight:700}
.about-contact span.plain{font-family:var(--body);font-size:14.5px;letter-spacing:0;text-transform:none;
  color:var(--text-dim);font-weight:400}
.about-contact a{font-size:15px;word-break:break-word}
.review-card.handled{opacity:.65}

/* =====================================================================
   The later additions, brought onto the same design language as the rest:
   bevelled corners rather than rounded ones, mono micro-labels, display
   italic for anything that carries a number, and purple that gives way to
   gold at the point something matters.
   ===================================================================== */

/* ---- a player's own entry: an event ticket, because that is what it is ---- */

/* Colour is a hint and never the message. The label and the sentence carry the
   meaning on their own, so this reads correctly without seeing the tones. */
.estat{--tone:var(--purple-bright);
  position:relative;margin-top:16px;display:grid;grid-template-columns:6px 1fr;
  background:linear-gradient(135deg,var(--surface-2),var(--surface));
  border:1px solid var(--line-mid);clip-path:var(--bevel-sm);overflow:hidden}
.estat::before{content:'';background:var(--tone);box-shadow:0 0 22px -2px var(--tone)}
.estat-in{padding:18px 20px 20px}
.estat.ok{--tone:var(--win)}
.estat.hold{--tone:var(--gold)}
.estat.bad{--tone:var(--lose)}
.estat.wait{--tone:var(--purple-bright)}

/* the status itself, set like a scoreline rather than a form label */
.estat-label{font-family:var(--display);font-style:oblique 8deg;font-weight:800;text-transform:uppercase;
  font-size:clamp(21px,3.4vw,27px);line-height:1;color:var(--tone);letter-spacing:.01em}
.estat-rule{display:flex;align-items:center;gap:10px;margin-top:11px}
.estat-rule::after{content:'';flex:1;height:1px;
  background:linear-gradient(90deg,var(--line-mid),transparent)}
.estat-stamp{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-faint);font-weight:700;white-space:nowrap}
.estat-next{margin:12px 0 0;font-size:14.5px;line-height:1.6;color:var(--text-dim);max-width:62ch}
.estat .btn.sm{margin-top:16px;padding:11px 20px;font-size:11.5px}

/* a paid entry is the one worth celebrating, so it gets the gold flood */
.estat.ok{border-color:rgba(60,217,138,.4)}
.estat.hold{border-color:rgba(255,201,60,.4)}
.estat.bad{border-color:rgba(255,92,122,.4)}

/* ---- one entry in the player's own list ---- */
.entry-card{background:var(--surface);border:1px solid var(--line);clip-path:var(--bevel);
  padding:20px 22px 22px;margin-bottom:16px;transition:transform .2s,box-shadow .2s,border-color .2s}
.entry-card:hover{transform:translateY(-3px);border-color:var(--line-mid);
  filter:drop-shadow(0 18px 28px rgba(139,47,224,.42))}
.entry-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.entry-head .adm-name{font-family:var(--display);font-style:oblique 8deg;font-weight:800;
  text-transform:uppercase;font-size:21px;line-height:1.05}
.entry-card .estat{margin-top:14px}

/* ---- schools asking us in ---- */
.apply-panel{position:relative;margin-top:22px;padding:30px 32px 32px;
  background:linear-gradient(150deg,var(--surface),rgba(35,29,61,.75));
  border:1px solid var(--line-mid);clip-path:var(--bevel)}
/* a gold seam along the top edge: the same accent the sponsor panel uses to say "this one pays" */
.apply-panel::before{content:'';position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,var(--purple),var(--gold) 60%,transparent)}
.apply-panel .field label{color:var(--text-dim)}
.apply-panel .btn.solid{margin-top:6px}

/* ---- prize pool: a podium, not a table ---- */
.prize-split{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-top:18px}
.prize{position:relative;background:linear-gradient(160deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);clip-path:var(--bevel-sm);padding:22px 20px;
  transition:transform .2s,box-shadow .2s}
.prize:hover{transform:translateY(-3px)}
.prize.first{border-color:rgba(255,201,60,.55);
  background:linear-gradient(160deg,rgba(255,201,60,.14),var(--surface));
  filter:drop-shadow(0 16px 26px rgba(255,201,60,.3))}
.prize-place{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-faint);font-weight:700}
.prize.first .prize-place{color:var(--gold)}
.prize-cash{font-family:var(--display);font-style:oblique 8deg;font-weight:800;font-size:34px;line-height:1;
  margin-top:8px}
.prize.first .prize-cash{color:var(--gold)}
.prize-items{font-size:13.5px;color:var(--text-dim);line-height:1.5;margin-top:8px}

/* ---- the position somebody holds, on their roster card ---- */
.rcard-role{display:inline-block;margin-top:8px;padding:4px 9px;
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--gold);background:rgba(255,201,60,.1);border:1px solid rgba(255,201,60,.32);
  clip-path:var(--bevel-xs)}

/* ---- control room: school league ---- */

/* the season being worked on, so a long list never leaves you guessing */
.adm-row.selected{background:linear-gradient(90deg,rgba(255,201,60,.12),transparent);
  border-left:2px solid var(--gold);padding-left:14px}

/* a divider that matches the section labels rather than fighting them */
hr.rule{border:none;height:1px;margin:44px 0 30px;
  background:linear-gradient(90deg,var(--line-strong),var(--line),transparent)}

/* Scores go in beside the fixture rather than behind a modal: on a results night the
   whole list is captured in one pass, and a number is set like a scoreline. */
.score-entry{display:flex;align-items:center;gap:8px}
.score-entry input{width:60px;padding:9px 6px;text-align:center;
  background:var(--surface-3);border:1px solid var(--line-mid);color:var(--text);
  clip-path:var(--bevel-xs);font-family:var(--mono);font-size:15px;font-weight:700;
  font-variant-numeric:tabular-nums}
.score-entry input:focus{border-color:var(--gold);outline:none;background:var(--surface-2)}
.score-entry .dash{color:var(--text-faint);font-family:var(--mono)}

/* ---- the photo on a player card, in the edit dialog ---- */
.avatar-preview{display:flex;align-items:center;gap:14px;margin-top:12px}
.avatar-preview img{width:68px;height:68px;object-fit:cover;clip-path:var(--bevel-xs);
  border:1px solid var(--line-strong)}

@media (max-width:640px){
  .apply-panel{padding:22px 18px 24px}
  .entry-card{padding:17px 16px 18px}
  .estat-in{padding:15px 16px 17px}
  .entry-head{flex-wrap:wrap}
  .score-entry{flex-wrap:wrap;justify-content:flex-end}
  .score-entry input{width:54px}
}

/* ---------- awards ---------- */
/* A badge says what it is in text as well as colour, so it still reads to somebody who cannot
   tell gold from bronze, and to a screen reader. The tier only tints it. */
.badges{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0;padding:0}
.badge{--tone:var(--gold);
  display:inline-flex;align-items:center;gap:11px;padding:10px 14px 10px 11px;
  background:var(--surface-2);border:1px solid var(--line-mid);clip-path:var(--bevel-xs)}
.badge.tier-gold{--tone:var(--gold)}
.badge.tier-silver{--tone:#C9D2E3}
.badge.tier-bronze{--tone:#D08B4F}
.badge.tier-purple{--tone:var(--purple-bright)}
.badge-ico{display:grid;place-items:center;width:34px;height:34px;flex:none;
  color:var(--tone);background:rgba(255,255,255,.04);border:1px solid var(--tone);
  clip-path:var(--bevel-xs)}
.badge-ico svg{width:19px;height:19px}
.badge-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.badge-text b{font-family:var(--display);font-style:oblique 8deg;font-weight:800;text-transform:uppercase;
  font-size:15px;line-height:1.05;color:var(--tone)}
.badge-text small{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;color:var(--text-faint)}

/* icons only, for a table row where a full badge would not fit */
.badges.compact{gap:5px;margin:6px 0 0}
.badges.compact .badge{padding:0;background:none;border:none;clip-path:none}
.badges.compact .badge-ico{width:22px;height:22px;background:none}
.badges.compact .badge-ico svg{width:13px;height:13px}

/* the name is still there for anyone not reading by eye */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* the award beside its name in the control room */
.aw-row{display:flex;align-items:center;gap:14px;min-width:0}

/* ---------- a player's public card ---------- */
.pcard{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:18px;
  padding:26px 28px;background:linear-gradient(150deg,var(--surface-2),var(--surface));
  border:1px solid var(--line-mid);clip-path:var(--bevel)}
.pcard-face{width:96px;height:96px;flex:none;display:grid;place-items:center;
  background:var(--surface-3);border:1px solid var(--line-strong);clip-path:var(--bevel-sm);
  color:var(--purple-bright);font-family:var(--display);font-style:oblique 8deg;font-weight:900;font-size:34px}
.pcard-face svg{width:48px;height:48px}
.pcard-face img{width:100%;height:100%;object-fit:cover}
.pcard-body{min-width:0}
.pcard-tag{font-size:clamp(30px,6vw,52px);line-height:1;margin:0;word-break:break-word}
.pcard-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-faint)}
.pcard-meta span{padding:5px 9px;border:1px solid var(--line);clip-path:var(--bevel-xs)}
.pcard-line{margin:14px 0 0;color:var(--text-dim);font-style:oblique 8deg}

@media (max-width:640px){
  .pcard{padding:20px 18px;gap:16px}
  .pcard-face{width:76px;height:76px}
  .pcard-face svg{width:38px;height:38px}
}

/* ---------- feature switches ---------- */
.feat-list{display:flex;flex-direction:column;gap:14px;margin-top:26px}
.feat{display:flex;align-items:flex-start;gap:20px;padding:20px 22px;
  background:var(--surface);border:1px solid var(--line);clip-path:var(--bevel-sm)}
.feat.on{border-color:rgba(60,217,138,.4);
  background:linear-gradient(120deg,rgba(60,217,138,.07),var(--surface) 60%)}
.feat-body{flex:1;min-width:0}
.feat-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.feat-head h2{font-family:var(--display);font-style:oblique 8deg;font-weight:800;text-transform:uppercase;
  font-size:20px;margin:0}
.feat-body p{margin:9px 0 0;font-size:14.5px;color:var(--text-dim);max-width:66ch}
.feat-blocker{color:var(--gold)!important}
.feat-blocker b{color:var(--gold)}
.feat-where{font-family:var(--mono);font-size:11px;color:var(--text-faint)!important;letter-spacing:.04em}
.feat-switch{flex:none;padding-top:4px}

/* A switch, not a checkbox: it reads as on or off from across the room, and carries its state
   in aria-checked as well as in colour. */
.switch{position:relative;width:56px;height:30px;padding:0;cursor:pointer;
  background:var(--surface-3);border:1px solid var(--line-strong);border-radius:999px;
  transition:background .18s,border-color .18s}
.switch.on{background:rgba(60,217,138,.25);border-color:var(--win)}
.switch-knob{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:var(--text-dim);transition:transform .18s,background .18s}
.switch.on .switch-knob{transform:translateX(26px);background:var(--win)}
.switch:hover{border-color:var(--gold)}

@media (prefers-reduced-motion:reduce){
  .switch,.switch-knob{transition:none}
}

@media (max-width:640px){
  .feat{padding:16px 16px;gap:14px}
  .feat-head h2{font-size:17px}
}

/* ---------- the venue screen ---------- */
/* Sized to be read from the back of a room rather than from a desk: everything steps up with
   the viewport, and nothing on it is clickable. */
.livewrap{position:relative;z-index:1;min-height:100vh;padding:clamp(18px,2.5vw,38px);
  display:flex;flex-direction:column;gap:clamp(14px,2vw,26px)}
.live-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  flex-wrap:wrap;padding-bottom:clamp(12px,1.6vw,20px);border-bottom:1px solid var(--line-mid)}
.live-eyebrow{font-family:var(--mono);font-size:clamp(11px,1.1vw,16px);letter-spacing:.2em;
  text-transform:uppercase;color:var(--purple-bright);font-weight:700;margin:0 0 8px}
.live-title{font-size:clamp(34px,5.6vw,86px);line-height:.95;margin:0}
.live-right{text-align:right}
.live-champ,.live-count{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.live-champ span,.live-count span{font-family:var(--mono);font-size:clamp(9px,.85vw,13px);
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint)}
.live-champ b{font-family:var(--display);font-style:oblique 8deg;font-weight:900;text-transform:uppercase;
  font-size:clamp(30px,4.4vw,70px);line-height:1;color:var(--gold);
  text-shadow:0 0 38px rgba(255,201,60,.45)}
.live-count b{font-family:var(--display);font-style:oblique 8deg;font-weight:900;
  font-size:clamp(28px,4vw,64px);line-height:1}
.live-tick{font-family:var(--mono);font-size:clamp(9px,.8vw,12px);color:var(--text-faint);margin:10px 0 0}
/* The venue screen is a television across a room, not a window. The board is sized to fill it
   and centred in it: a three-team bracket used to sit in the top-left sixth of a 1080p screen
   with the rest of the wall empty. */
.live-board{flex:1;overflow:auto;display:flex;flex-direction:column;justify-content:safe center}
.live-board .bk-scroll{padding-block:0}
.live-board .bk-rounds{justify-content:safe center;gap:clamp(16px,2vw,40px)}
.live-board .bk-round{min-width:clamp(200px,17vw,340px);gap:clamp(10px,1.2vw,20px)}
.live-board .bm-nm{font-size:clamp(15px,1.7vw,32px)}
.live-board .bm-sc{font-size:clamp(15px,1.7vw,32px)}
.live-board .bk-sec{font-size:clamp(11px,1vw,17px);margin-block:clamp(14px,2vw,30px) 8px}
.live-board .bk-rlabel{font-size:clamp(10px,.85vw,15px)}
.live-board section{width:100%}

/* The header already announces the winner, twice the size. Saying it again underneath is the
   same news twice on the one screen nobody can scroll. */
.live-board .bk-champ{display:none}

/* ---------- head to head ---------- */
.h2h{display:flex;flex-direction:column;gap:2px;margin-top:16px;border-top:1px solid var(--line)}
.h2h-row{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center;
  padding:13px 8px;border-bottom:1px solid var(--line)}
.h2h-name{font-weight:600}
.h2h-score{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:17px;
  font-variant-numeric:tabular-nums}
.h2h-score b{color:var(--text-dim);font-weight:700}
.h2h-score b.up{color:var(--gold)}
.h2h-score span{color:var(--text-faint)}
.h2h-meta{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-faint);text-align:right}

@media (max-width:520px){
  .h2h-row{grid-template-columns:1fr auto}
  .h2h-meta{grid-column:1 / -1;text-align:left}
}

/* ---- group stage ---- */
/* Cards rather than one wide table: a phone shows one group at a time and a venue TV
   shows them all, without either needing a horizontal scroll. */
.grp-state{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 18px}
.grp-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.grp{background:var(--surface);border:1px solid var(--line);clip-path:var(--bevel-sm);
  padding:16px 18px 14px;border-left:2px solid var(--line-mid)}
.grp.done{border-left-color:var(--win)}
.grp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.grp-head h2,.grp-head h3{font-size:19px;letter-spacing:.04em}

.grp-table{display:flex;flex-direction:column;font-family:var(--mono);font-size:12.5px}
/* 8 columns for 8 cells: #, player, P, W, D, L, GD, Pts. GD carries a sign and Pts reaches
   double figures, so those two are wider than the single-digit counters. */
.grp-row{display:grid;grid-template-columns:22px minmax(0,1fr) repeat(4,20px) 32px 28px;
  gap:6px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.grp-row.head{color:var(--text-faint);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  border-bottom-color:var(--line-mid)}
.grp-row:last-child{border-bottom:0}
.grp-pos{color:var(--text-faint)}
.grp-name{font-family:var(--body);font-size:14.5px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grp-num{text-align:right;color:var(--text-dim)}
.grp-num.pts{color:var(--gold);font-weight:700}
.grp-row.through{background:linear-gradient(90deg,rgba(60,217,138,.1),transparent)}
.grp-row.through .grp-pos{color:var(--win)}
.grp-thru{color:var(--win);font-size:9px;margin-left:6px;vertical-align:middle}

.grp-fix{list-style:none;margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--line)}
.grp-fx{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;
  align-items:center;padding:4px 0;font-size:13.5px}
.grp-fx .fx-a{text-align:right}
.grp-fx .fx-a,.grp-fx .fx-b{color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grp-fx .won{color:var(--text);font-weight:700}
.grp-fx.played{color:var(--text)}
span.fx-score{font-family:var(--mono);font-size:12px;color:var(--text-faint);
  padding:3px 9px;border:1px solid var(--line);clip-path:var(--bevel-xs);white-space:nowrap}
.grp-fx.played span.fx-score{color:var(--gold);border-color:var(--line-mid)}
button.fx-score{font-family:var(--mono);font-size:12px;color:var(--text-faint);cursor:pointer;
  background:var(--surface-2);padding:4px 10px;border:1px solid var(--line-mid);
  clip-path:var(--bevel-xs);white-space:nowrap;transition:.16s}
button.fx-score:hover{background:var(--surface-3);color:var(--gold);border-color:var(--line-strong)}
.grp-fx.played button.fx-score{color:var(--gold)}

/* on the venue screen everything is read from across the room */
.live-board .grp-grid{grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:22px}
.live-board .grp-name{font-size:18px}
.live-board .grp-table{font-size:15px}
.live-board .grp-row{grid-template-columns:28px minmax(0,1fr) repeat(4,26px) 40px 34px}
.live-board .grp-fix{display:none}   /* the table is the story; fixtures are detail */

@media (max-width:420px){
  .grp{padding:14px 14px 12px}
  .grp-row{grid-template-columns:18px minmax(0,1fr) repeat(4,17px) 28px 24px;gap:4px;font-size:11.5px}
  .grp-name{font-size:13.5px}
}

/* ---- team events ---- */
/* A team name in a bracket says nothing on its own, so the side behind it is shown once. */
.side-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));margin-top:16px}
.side-card{background:var(--surface);border:1px solid var(--line);clip-path:var(--bevel-sm);
  padding:14px 16px 12px;border-left:2px solid var(--line-mid)}
.side-card h3{font-size:18px;letter-spacing:.03em;margin-bottom:8px}
.side-card ul{list-style:none;margin:0;padding:0;font-size:14px;color:var(--text-dim)}
.side-card li{padding:3px 0;border-bottom:1px solid var(--line)}
.side-card li:last-child{border-bottom:0}
.side-cap{font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold);margin-left:7px;vertical-align:1px}
.side-mates{color:var(--text-faint);font-size:13px}

/* ---- event photo galleries ---- */
/* A masonry-ish grid that keeps portrait and landscape shots side by side without cropping
   either: the photography is the point, so nothing here trims it to fit a box. */
.gal{columns:3 260px;column-gap:14px;margin-top:18px}
.gal-item{display:block;position:relative;break-inside:avoid;margin:0 0 14px;
  clip-path:var(--bevel-sm);border:1px solid var(--line);background:var(--surface);
  line-height:0;transition:.2s}
.gal-item:hover{border-color:var(--line-strong)}
.gal-item img{width:100%;height:auto;display:block}
.gal-cap-txt{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;
  font-family:var(--body);font-size:13px;line-height:1.4;color:#fff;
  background:linear-gradient(transparent,rgba(7,6,14,.88));
  opacity:0;transition:.2s}
.gal-item:hover .gal-cap-txt,.gal-item:focus-visible .gal-cap-txt{opacity:1}

.gal-cover{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)}
.gal-cover img{width:100%;height:100%;object-fit:cover;display:block}
.gal-count{position:absolute;right:10px;bottom:10px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:5px 9px;
  background:rgba(7,6,14,.8);border:1px solid var(--line-mid);clip-path:var(--bevel-xs);
  color:var(--text)}

/* the lightbox, built by ekings.js - with no JavaScript a thumbnail is a link to the picture */
.lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
  justify-content:center;flex-direction:column;gap:14px;padding:24px;
  background:rgba(7,6,14,.95);backdrop-filter:blur(6px)}
.lightbox img{max-width:min(1200px,94vw);max-height:78vh;width:auto;height:auto;
  clip-path:var(--bevel-sm);border:1px solid var(--line-mid)}
.lightbox p{margin:0;font-size:14.5px;color:var(--text-dim);text-align:center;max-width:70ch}
.lb-close,.lb-prev,.lb-next{position:absolute;background:var(--surface-2);color:var(--text);
  border:1px solid var(--line-mid);clip-path:var(--bevel-xs);cursor:pointer;
  font-family:var(--mono);font-size:18px;line-height:1;padding:11px 15px;transition:.16s}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:var(--surface-3);color:var(--gold)}
.lb-close{top:18px;right:18px;font-size:15px}
.lb-prev{left:18px;top:50%;transform:translateY(-50%)}
.lb-next{right:18px;top:50%;transform:translateY(-50%)}

/* the control room copy: a caption box and ordering under each picture */
.gal-admin{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));margin-top:18px}
.gal-a{background:var(--surface);border:1px solid var(--line);clip-path:var(--bevel-sm);padding:10px}
.gal-a img{width:100%;height:150px;object-fit:cover;display:block;margin-bottom:9px}
.gal-cap{width:100%;background:var(--surface-2);border:1px solid var(--line-mid);
  color:var(--text);padding:8px 10px;font-family:var(--body);font-size:13.5px;
  clip-path:var(--bevel-xs);margin-bottom:9px}
.gal-a-row{display:flex;gap:6px;flex-wrap:wrap}

@media (max-width:560px){
  .gal{columns:2 150px;column-gap:10px}
  .gal-item{margin-bottom:10px}
  .gal-cap-txt{opacity:1;font-size:12px}   /* no hover on a phone, so the caption simply shows */
  .lb-prev,.lb-next{top:auto;bottom:18px;transform:none}
  .lb-prev{left:18px} .lb-next{right:18px}
}


/* ---------- the front page ---------- */
/* Everything here is read from what the site already knows, so each band is sized to what it
   actually holds. The old page put one open tournament into a three-wide grid and left two
   thirds of the row - and most of the page below it - as dead space. */

.section.tight{padding:34px 0 10px}

/* what we run */
.title-strip{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:16px}
.title-chip{background:var(--surface);border:1px solid var(--line);clip-path:var(--bevel-sm);
  padding:16px 18px;border-left:2px solid var(--line-mid);display:flex;flex-direction:column;gap:3px}
.tc-code{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--gold);font-weight:700}
.tc-name{font-family:var(--display);font-style:oblique 8deg;font-weight:800;text-transform:uppercase;
  letter-spacing:.02em;font-size:21px;line-height:1.05}
.tc-count{font-family:var(--mono);font-size:11px;color:var(--text-faint)}

/* open tournaments: cards keep their own width and pack from the left, rather than being
   spread across tracks that stay empty when there are fewer than three */
.card-row{display:flex;flex-wrap:wrap;gap:20px;margin-top:24px}
.card-row>*{flex:1 1 300px;max-width:520px;min-width:0}

.more-card{display:flex;flex-direction:column;justify-content:center;gap:4px;
  background:var(--surface-2);border:1px solid var(--line-mid);clip-path:var(--bevel);
  padding:26px 28px;color:var(--text-dim);transition:.18s}
.more-card:hover{border-color:var(--line-strong);background:var(--surface-3);color:var(--text)}
.mc-count{font-family:var(--display);font-style:oblique 8deg;font-weight:800;font-size:40px;line-height:1;
  color:var(--gold)}
.mc-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase}
.mc-go{font-size:14px;margin-top:8px;color:var(--purple-bright)}

/* latest results */
.champ-row{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:18px}
.champ{background:var(--surface);border:1px solid var(--line);clip-path:var(--bevel-sm);
  padding:16px 18px;display:flex;flex-direction:column;gap:4px;color:inherit;
  border-left:2px solid var(--gold);transition:.18s}
.champ:hover{border-color:var(--line-strong);border-left-color:var(--gold);transform:translateY(-2px);color:inherit}
.ch-event{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-who{font-family:var(--display);font-style:oblique 8deg;font-weight:800;text-transform:uppercase;
  font-size:26px;line-height:1.05;color:var(--gold)}
.ch-meta{font-family:var(--mono);font-size:11px;color:var(--text-faint)}

/* top of the table */
.top-row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));margin-top:18px}
.top-player{background:var(--surface);border:1px solid var(--line);clip-path:var(--bevel-sm);
  padding:14px 16px;display:flex;flex-direction:column;gap:2px;color:inherit;transition:.18s}
.top-player:hover{border-color:var(--line-strong);transform:translateY(-2px);color:inherit}
.tp-pos{font-family:var(--mono);font-size:11px;color:var(--text-faint);font-variant-numeric:tabular-nums}
.tp-tag{font-family:var(--display);font-style:oblique 8deg;font-weight:800;text-transform:uppercase;
  font-size:20px;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-stat{font-family:var(--mono);font-size:10.5px;color:var(--text-dim)}

/* from the last night */
.shot-row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-top:18px}
.shot-tile{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--surface-2);
  border:1px solid var(--line);clip-path:var(--bevel-sm);transition:.18s}
.shot-tile:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.shot-tile img{width:100%;height:100%;object-fit:cover;display:block}

/* backed by */
.backer-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.backer{background:var(--surface);border:1px solid var(--line);clip-path:var(--bevel-xs);
  padding:11px 16px;display:flex;flex-direction:column;gap:1px}
.bk-name{font-family:var(--display);font-style:oblique 8deg;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;font-size:17px;line-height:1.1}
.bk-role{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-faint)}

@media (max-width:520px){
  .card-row>*{max-width:none}
  .ch-who{font-size:22px}
}

/* ---------- the jersey ----------
   Everything below is the wordmark's own treatment applied to type and ground: cream running
   to gold inside a purple edge, the chevrons off the banner, and one arena light. It is spent
   on the few places that carry a page - a title, a champion, a score - so it stays an event
   rather than a texture. */

/* The wordmark's fill: cream at the top running down through gold. That gradient is the part
   that is unmistakably E-Kings, and it survives at any size.

   The logo's hard purple edge does not come with it. Drawn as text-shadow it closed the counters
   and ran between the letters until LEADERBOARD was a solid purple slab; drawn as a stroke it
   paints over the clipped fill. A blurred purple cast under the letters gives the same lift off
   the jersey and still leaves them readable at 17px. */
.page-title,
.hero .tag,
.ch-who,
.live-title,
.hero-kicker{
  background-image:linear-gradient(176deg,var(--cream) 8%,#FFE49A 44%,var(--gold) 78%,#E5A81F 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(4,2,10,.6)) drop-shadow(0 8px 22px rgba(139,47,224,.55));
}

/* A fallback that is not invisible: where background-clip on text is not supported the fill
   colour above would leave nothing on the screen at all. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .page-title,.hero .tag,.ch-who,.live-title,.hero-kicker{
    background-image:none;color:var(--gold);-webkit-text-fill-color:var(--gold)}
}

/* Section labels are the banner under the wordmark, not the wordmark itself. */
.sec-label{font-family:var(--mono);font-weight:700;letter-spacing:.2em}

/* ---------- ground ----------
   Three layers: a deep arena wash, the jersey chevrons, and the existing starfield over them. */
body{
  background-color:var(--bg);
  background-image:
    radial-gradient(1100px 520px at 50% -180px, rgba(139,47,224,.20), transparent 68%),
    radial-gradient(760px 420px at 92% 8%, rgba(255,201,60,.045), transparent 70%);
  background-attachment:fixed;
  background-repeat:no-repeat;
}

/* the chevron stripes off the GAMING banner, at the threshold of being noticed */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:repeating-linear-gradient(115deg,
    rgba(155,92,255,.055) 0 2px, transparent 2px 9px);
  mask-image:radial-gradient(120% 90% at 50% 0, #000 22%, transparent 76%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0, #000 22%, transparent 76%);
}
.layout{position:relative;z-index:1}

/* ---------- the way in ----------
   One orchestrated arrival on load, cascading down the hero, then the page behaves normally.
   Pure CSS with no observer, so it cannot leave anything stranded: every step finishes at its
   resting state, and if animations never run the page is simply already there. */
@media (prefers-reduced-motion: no-preference){
  .hero-auth,
  .hero-kicker,
  .hero-pills,
  .nb-inner{animation:arrive .62s cubic-bezier(.16,.84,.34,1) backwards}

  .hero-auth      {animation-delay:.02s}
  .hero-kicker    {animation-delay:.1s;animation-duration:.8s}
  .hero-pills     {animation-delay:.42s}
  .nb-inner        {animation-delay:.5s}
}

@keyframes arrive{
  from{opacity:0;transform:translateY(16px) scale(.985)}
  to{opacity:1;transform:none}
}

/* ---------- gold where it counts ---------- */
.btn.solid{position:relative;overflow:hidden}
.btn.solid::after{
  content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);opacity:0;pointer-events:none}
@media (prefers-reduced-motion: no-preference){
  .btn.solid:hover::after{animation:sweep .62s ease-out}
}
@keyframes sweep{
  from{left:-60%;opacity:.9}
  to{left:120%;opacity:0}
}

@media (max-width:620px){
  /* the cast is scaled to the type, not left at desktop size over small letters */
  .page-title,.hero .tag,.ch-who,.live-title{
    filter:drop-shadow(0 1px 0 rgba(4,2,10,.55)) drop-shadow(0 4px 12px rgba(139,47,224,.45))}
}

/* ---------- hidden means hidden ----------
   The sign-up form and the control room hide and show fields with the hidden attribute. An
   author rule such as .field{display:...} would otherwise quietly win over the browser's own
   [hidden]{display:none} and leave the "hidden" field standing there. */
[hidden]{display:none!important}

/* ---------- control room: menu and page ----------
   A menu down the left, broken into sections, in place of a row of tabs that had grown to
   eleven. Each section folds on its own and the whole menu folds down to a thin strip, so the
   pages that need the width (the player list, a bracket) can have it.

   Folded state is a class on <html>, set by js/enhance.js before first paint. The menu is a set
   of <details>, so with no script every section still opens and closes and every link works. */
.adm-shell{display:grid;grid-template-columns:252px minmax(0,1fr);align-items:start}
.adm-side{position:sticky;top:0;max-height:100vh;overflow-y:auto;padding:26px 16px 26px 22px;
  border-right:1px solid var(--line)}
.adm-main{min-width:0;padding-bottom:40px}
.adm-main .wrap{width:min(1100px,100% - 48px);margin-inline:auto}

.adm-side-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.adm-side-title{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

.adm-collapse{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:34px;height:34px;
  padding:0 10px;background:transparent;border:1px solid var(--line-mid);clip-path:var(--bevel-xs);
  color:var(--text-dim);cursor:pointer;font:inherit}
.adm-collapse:hover{border-color:var(--gold);color:var(--gold)}
.adm-collapse-ico::before{content:'\2039';font-size:20px;line-height:1}
.adm-collapse-text{display:none;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}

.adm-sec{margin-bottom:4px}
.adm-sec>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  padding:10px 10px 8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-faint)}
.adm-sec>summary::-webkit-details-marker{display:none}
.adm-sec>summary::after{content:'+';font-size:14px;letter-spacing:0}
.adm-sec[open]>summary::after{content:'\2013'}
.adm-sec>summary:hover{color:var(--text)}
.adm-sec .side-link{margin-bottom:2px}

/* folded: only the toggle is left */
html.adm-collapsed .adm-shell{grid-template-columns:56px minmax(0,1fr)}
html.adm-collapsed .adm-side{padding-inline:10px}
html.adm-collapsed .adm-menu,
html.adm-collapsed .adm-side-title{display:none}
html.adm-collapsed .adm-side-head{justify-content:center}
html.adm-collapsed .adm-collapse-ico::before{content:'\203A'}

@media (max-width:860px){
  /* the menu becomes a bar above the page, and folding it hides the links but keeps the bar */
  .adm-shell,
  html.adm-collapsed .adm-shell{grid-template-columns:1fr}
  .adm-side,
  html.adm-collapsed .adm-side{position:static;max-height:none;border-right:0;
    border-bottom:1px solid var(--line);padding:12px 16px}
  .adm-side-head,
  html.adm-collapsed .adm-side-head{margin:0;justify-content:space-between}
  .adm-side-title,
  html.adm-collapsed .adm-side-title{display:block}
  .adm-collapse{flex:0 0 auto}
  .adm-collapse-text{display:inline}
  /* pointing up while the menu is open (press to fold it away), down while it is folded */
  .adm-collapse-ico::before,
  html.adm-collapsed .adm-collapse-ico::before{content:'\2039';display:inline-block;transform:rotate(90deg)}
  html.adm-collapsed .adm-collapse-ico::before{transform:rotate(-90deg)}
  .adm-menu{margin-top:12px}
  .adm-main .wrap{width:calc(100% - 32px)}
}

/* ---------- control room: lists, filters, panels ---------- */
.adm-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin:20px 0 4px}
.adm-tools .field{margin:0;flex:0 1 170px;min-width:140px}
.adm-tools .field.grow{flex:1 1 260px}
.adm-tools .field select,.adm-tools .field input{padding-block:9px}

/* position:relative is what makes the scroll box contain the visually hidden header label. Without
   it that label, being absolutely positioned, escapes the clipping and widens the whole page. */
.tbl-wrap{position:relative;overflow-x:auto;margin-top:16px;border-top:1px solid var(--line)}
.adm-table{width:100%;min-width:980px;border-collapse:collapse;font-size:14px}
.adm-table td:first-child{min-width:210px}
.adm-table td:nth-child(n+6){white-space:nowrap}
.adm-table th{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  text-align:left;color:var(--text-faint);padding:12px 12px;white-space:nowrap;
  border-bottom:1px solid var(--line-mid);font-weight:700}
.adm-table td{padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.adm-table tbody tr:hover td{background:rgba(155,92,255,.06)}
.adm-table .num{text-align:right;font-variant-numeric:tabular-nums}
.adm-table .who{font-weight:600}
.adm-table .who a{color:var(--text)}
.adm-table .who a:hover{color:var(--gold)}
.adm-table .sub{font-family:var(--mono);font-size:11px;color:var(--text-faint);margin-top:3px;overflow-wrap:anywhere}
.adm-table .tags{display:flex;gap:6px;flex-wrap:wrap}
.adm-table tr.is-blocked td{opacity:.62}

.sort-btn{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;background:none;border:0;
  padding:0;cursor:pointer}
.sort-btn:hover,th[aria-sort="ascending"] .sort-btn,th[aria-sort="descending"] .sort-btn{color:var(--gold)}
th[aria-sort="ascending"] .sort-btn::after{content:' \25B2';font-size:8px}
th[aria-sort="descending"] .sort-btn::after{content:' \25BC';font-size:8px}

.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px}
.pager .row{margin:0}

.panel{background:var(--surface);border:1px solid var(--line);clip-path:var(--bevel-sm);padding:18px 22px;margin-top:18px}
.panel h3{font-size:18px;margin-bottom:10px}
.panel.danger{border-color:rgba(255,92,122,.4)}
.panel.danger h3{color:var(--lose)}

.pd-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:0 30px;align-items:start}
@media (max-width:960px){.pd-grid{grid-template-columns:1fr}}

.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;font-size:14px}
.kv dt{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);padding-top:3px}
.kv dd{margin:0;word-break:break-word}

.log{list-style:none;margin:0;padding:0}
.log li{padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.log li:last-child{border-bottom:0}
.log .when{font-family:var(--mono);font-size:11px;color:var(--text-faint);margin-top:3px}

/* ---------- watch live ----------
   A tab on the right-hand edge of a tournament page that folds out into a player, so somebody
   can keep the bracket in view and follow the stream beside it. It is a <details>, so it opens
   and closes with no script; js/ekings.js only puts the video in when it is opened. */
.live-dock{position:fixed;right:0;top:120px;z-index:48}
.live-tab{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:12px 16px 12px 14px;
  background:var(--surface-2);border:1px solid var(--line-strong);border-right:0;
  clip-path:polygon(10px 0,100% 0,100% 100%,0 100%,0 10px);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--text)}
.live-tab::-webkit-details-marker{display:none}
.live-tab:hover{color:var(--gold)}
.live-tab::after{content:'\2039';font-size:16px;letter-spacing:0;margin-left:2px}
.live-dock[open] .live-tab::after{content:'\203A'}
.live-dot{width:9px;height:9px;border-radius:50%;background:var(--text-faint);flex:none}
.live-dock.is-live .live-dot{background:var(--lose)}
.live-dock.is-live .live-tab{border-color:rgba(255,92,122,.55)}
@media (prefers-reduced-motion:no-preference){
  .live-dock.is-live .live-dot{animation:livePulse 1.6s ease-out infinite}
}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(255,92,122,.65)}
  70%{box-shadow:0 0 0 9px rgba(255,92,122,0)}
  100%{box-shadow:0 0 0 0 rgba(255,92,122,0)}
}

.live-body{position:absolute;top:100%;right:0;width:min(440px,100vw);padding:12px;
  background:var(--surface);border:1px solid var(--line-strong);border-right:0;
  box-shadow:0 22px 46px rgba(0,0,0,.55)}
.live-frame{position:relative;aspect-ratio:16/9;background:#000;display:grid;place-items:center;
  padding:14px;text-align:center;color:var(--text-dim);font-size:13px}
.live-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.live-frame.is-playing .live-fallback{display:none}
.live-body .btn{width:100%;margin-top:10px;padding:11px 16px}
.live-note{margin:10px 0 0;font-size:12px;color:var(--text-faint)}

@media (max-width:640px){
  /* a phone has no side to dock to, so the tab sits along the bottom and opens upward */
  .live-dock{top:auto;bottom:0}
  .live-body{top:auto;bottom:100%;width:100vw}
}

/* ---------- sponsors: our reach ----------
   The totals reuse .stat; each account gets a card. Figures are set in the display face so the
   numbers are what the eye lands on, and every one carries its exact value as a tooltip. */
.social-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:16px}
.social-card{background:var(--surface);border:1px solid var(--line);clip-path:var(--bevel-sm);padding:18px 20px}
.soc-head{display:flex;flex-direction:column;gap:3px}
.soc-platform{font-family:var(--display);font-style:oblique 8deg;font-weight:800;text-transform:uppercase;
  font-size:22px;letter-spacing:.02em;line-height:1.05}
.soc-handle{font-family:var(--mono);font-size:12px;color:var(--text-faint);word-break:break-all}
a.soc-handle{color:var(--purple-bright)}
a.soc-handle:hover{color:var(--gold)}
.soc-metrics{margin:16px 0 0;display:grid;gap:9px}
.soc-metrics div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--line);padding-bottom:8px}
.soc-metrics div:last-child{border-bottom:0;padding-bottom:0}
.soc-metrics dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.soc-metrics dd{margin:0;font-family:var(--display);font-style:oblique 8deg;font-weight:800;font-size:26px;line-height:1}
.soc-foot{margin:14px 0 0;font-family:var(--mono);font-size:10.5px;color:var(--text-faint);line-height:1.5}

/* ---------- collapsible site sidebar ----------
   On a wide screen the sidebar folds down to a strip of the two-letter badges, giving the page
   back about 170px. The folded state is a class on <html>, applied by js/enhance.js before first
   paint so it does not flash open, and remembered between visits. A phone never sees any of this:
   it has its own drawer, and every rule below is inside the wide-screen breakpoint. */
.side-collapse{display:none}

@media (min-width:761px){
  .js .side-collapse{display:inline-flex;align-items:center;justify-content:center;gap:8px;
    align-self:flex-end;min-height:30px;margin:-8px 0 6px;padding:0 10px;background:transparent;
    border:1px solid var(--line-mid);clip-path:var(--bevel-xs);color:var(--text-faint);cursor:pointer;
    font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
  .js .side-collapse:hover{border-color:var(--gold);color:var(--gold)}
  /* Three gold bars, not a chevron. Drawn as backgrounds rather than set as three pipe
     characters: a mono pipe is thin, unevenly spaced and sits on the text baseline, and this
     needs an exact weight next to 9.5px type. The bars stay gold whatever the label is doing.

     The chevron used to flip direction when the menu folded. It no longer needs to - the button
     is a handle now, and which way it goes is carried by its aria-label, which is what a screen
     reader was reading anyway. */
  .side-collapse-ico{flex:none;width:12px;height:12px;
    background-image:linear-gradient(var(--gold),var(--gold)),
                     linear-gradient(var(--gold),var(--gold)),
                     linear-gradient(var(--gold),var(--gold));
    background-size:2px 100%;
    background-position:left center,center center,right center;
    background-repeat:no-repeat}

  .sidebar{transition:width .2s ease,padding .2s ease}

  html.nav-collapsed .sidebar{width:78px;padding:22px 10px;align-items:center}
  html.nav-collapsed .brand{margin-bottom:12px}
  html.nav-collapsed .brand img{height:36px}
  html.nav-collapsed .side-panel{width:100%;align-items:center}
  html.nav-collapsed .sidebar nav{width:100%;display:flex;flex-direction:column;align-items:stretch}

  /* .js is a class on <html> itself, so it is written on the same element, not as an ancestor */
  html.js.nav-collapsed .side-collapse{align-self:center;padding:0;width:34px;min-height:34px;margin:0 0 8px}
  html.nav-collapsed .side-collapse-text{display:none}

  /* the group headings become a thin rule, so the sections stay visibly apart */
  html.nav-collapsed .side-group{font-size:0;line-height:0;height:1px;margin:12px 6px;padding:0;
    background:var(--line);overflow:hidden}
  html.nav-collapsed .side-group:first-child{display:none}

  /* the words leave the screen but not the page: a screen reader still hears the link's name */
  html.nav-collapsed .side-link{justify-content:center;padding:9px 4px;border-left-width:0;
    position:relative}
  html.nav-collapsed .side-link .lbl{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  html.nav-collapsed .side-link.active{background:rgba(255,201,60,.16);box-shadow:inset 0 -2px 0 var(--gold)}
  html.nav-collapsed .side-link.active .ico{color:var(--gold)}

  /* sign in and out are one press away on the expanded sidebar; a strip has no room for them */
  html.nav-collapsed .side-auth{display:none}
}

@media (min-width:761px) and (prefers-reduced-motion:reduce){
  .sidebar{transition:none}
}

/* ---------- blog ----------
   A grid of cards for the list, and a narrow reading column for a post. The words are what the
   page is for, so the article is set at a comfortable line length and a generous line height. */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin-top:26px}
.post-card{background:var(--surface);border:1px solid var(--line);clip-path:var(--bevel);overflow:hidden;
  transition:border-color .2s,transform .2s}
.post-card:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.post-hit{display:flex;flex-direction:column;height:100%;color:inherit}
.post-hit:hover{color:inherit}
.post-thumb{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;background:var(--surface-2)}
.post-thumb.blank{display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(139,47,224,.38),rgba(255,201,60,.12)),var(--surface-2);
  font-family:var(--display);font-style:oblique 8deg;font-weight:900;font-size:34px;
  letter-spacing:.08em;color:rgba(255,244,220,.45)}
.post-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px}
.post-meta{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);margin-top:14px}
.post-body .post-meta{margin-top:0}
.post-title{font-size:26px;line-height:1.05}
.post-summary{margin:0;color:var(--text-dim);font-size:14.5px}
@media (min-width:900px){
  .post-card.lead{grid-column:span 2}
  .post-card.lead .post-title{font-size:38px}
}
@media (prefers-reduced-motion:reduce){.post-card{transition:none}.post-card:hover{transform:none}}

.wrap.post{width:min(820px,100% - 48px)}
@media (max-width:760px){.wrap.post{width:calc(100% - 32px)}}
.post-cover{display:block;width:100%;height:auto;margin:22px 0 10px;border:1px solid var(--line);
  clip-path:var(--bevel-sm)}
.post-foot{margin-top:38px}
.post .eyebrow a{color:inherit}

.prose{font-size:17px;line-height:1.75;color:var(--text);margin-top:26px;overflow-wrap:anywhere}
.prose>*+*{margin-top:1.1em}
.prose h2,.prose h3,.prose h4{margin-top:1.9em;line-height:1.1}
.prose h2{font-size:34px}
.prose h3{font-size:26px}
.prose h4{font-size:20px}
.prose a{color:var(--purple-bright);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--gold)}
.prose strong{color:var(--cream)}
.prose ul,.prose ol{padding-left:1.4em}
.prose li+li{margin-top:.4em}
.prose blockquote{margin-left:0;padding:4px 0 4px 18px;border-left:3px solid var(--gold);color:var(--text-dim)}
.prose blockquote>*+*{margin-top:.7em}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--surface-2);padding:2px 6px;
  border:1px solid var(--line)}
.prose hr{border:0;border-top:1px solid var(--line-mid);margin:2em 0}
.prose img{display:block;max-width:100%;height:auto;clip-path:var(--bevel-sm);border:1px solid var(--line)}

/* the editor: the text on one side and how it will read on the other */
.editor-split{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:1400px){.editor-split{grid-template-columns:1fr 1fr}}
.editor-split textarea{font-family:var(--mono);font-size:13.5px;line-height:1.6}
.prose.preview{background:var(--surface);border:1px solid var(--line);padding:18px 22px;margin-top:0;
  max-height:640px;overflow:auto;font-size:15.5px;line-height:1.7}

/* ===================================================================
   POLISH PASS
   Everything below refines what is already here rather than replacing
   it: the palette, the faces and the bevel are untouched. What changes
   is how the surfaces are lit, how a section announces itself, and how
   a page reads when there is barely any data in it yet.
   =================================================================== */

/* ---------- lit surfaces ----------
   A card was a flat fill with a hairline around it, which on a near-black page reads as a hole
   rather than a panel. A sheen down the first 40% gives it a top edge to catch the light, which
   is the whole difference between "a box" and "a surface".

   Only elements whose background is a colour are listed. Anything already carrying its own
   gradient (the prize ladder, the apply panel, a card banner) is left alone - background-image
   here would replace theirs, not sit on top of it. */
.t-card,.rcard,.sponsor-card,.entry-card,.post-card,.stat,.title-chip,.panel,.social-card{
  background-image:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0) 42%)}

/* ---------- section headers ----------
   A gold tick, the label, then the rule running out to the edge. The label was doing the work on
   its own at 11px and disappearing into the page. */
.sec-label::before{content:'';width:14px;height:2px;background:var(--gold);flex:none}

/* ---------- empty states ----------
   Most of this site is driven by data that does not exist yet, so "nothing here" is a state the
   pages are in often - and a bare grey sentence reads as something broken. Given an edge and a
   mark it reads as a page waiting for its first event, which is the truth. */
.empty{display:grid;justify-items:center;gap:12px;text-align:center;margin-top:24px;
  padding:46px 28px;border:1px dashed var(--line-mid);clip-path:var(--bevel);
  background:rgba(19,16,34,.45);color:var(--text-dim)}
.empty-mark{font-family:var(--display);font-style:oblique 8deg;font-weight:900;font-size:44px;
  line-height:1;text-transform:uppercase;color:rgba(255,201,60,.22)}
.empty p{margin:0;max-width:48ch}
.empty .btn{margin-top:6px}

/* ---------- the browser's own furniture ----------
   A default light scrollbar down the side of a near-black page is the one part of the window the
   design never reached. */
::selection{background:rgba(255,201,60,.3);color:var(--text)}
html{scrollbar-color:var(--surface-3) var(--bg);scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--surface-3);border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--purple)}

/* ---------- tournament card ----------
   The banner was a flat two-stop gradient. A raking light across it and the jersey chevrons
   underneath give it the same material the rest of the brand is made of. The children are lifted
   a layer so the gloss passes under the badges rather than over them. */
.t-banner{position:relative;overflow:hidden}
.t-banner::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(112deg,rgba(255,255,255,.16),rgba(255,255,255,0) 44%),
    repeating-linear-gradient(112deg,rgba(0,0,0,.14) 0 2px,transparent 2px 11px)}
.t-banner>*{position:relative;z-index:1}
/* the short code sat at 22% white and read as a smudge; bigger and fainter it reads as a mark */
.t-mono{font-size:38px;color:rgba(255,255,255,.17);letter-spacing:.02em}
.t-name{transition:color .18s}
.t-card:hover .t-name{color:var(--gold)}

/* ---------- what we run ----------
   Each title gets a gold seam down its edge, so the strip reads as three plates rather than
   three outlines. */
.title-chip{position:relative;transition:transform .2s,border-color .2s}
.title-chip::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--gold),rgba(255,201,60,0))}
.title-chip:hover{transform:translateY(-3px);border-color:var(--line-mid)}

/* ---------- sponsors ----------
   The people paying for the season were the flattest cards on the site. */
.sponsor-card{position:relative;transition:transform .2s,border-color .2s,filter .2s}
.sponsor-card::before{content:'';position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,var(--purple),var(--gold) 65%,transparent)}
.sponsor-card:hover{filter:drop-shadow(0 18px 28px rgba(139,47,224,.4))}

/* ---------- links that carry the page ----------
   An inline link in running copy had nothing but colour to mark it, which is the one cue a
   colour-blind reader does not get. */
.page-sub a,.hint a,.muted a,.prose a{text-underline-offset:3px;text-decoration-thickness:1px}
.page-sub a:hover,.hint a:hover,.muted a:hover{color:var(--gold)}

/* ---------- focus ----------
   Two solid pixels of gold, offset off the shape, so it is visible over a photo as well as over
   the page. Left as an outline rather than a shadow: an outline is not clipped by a bevel. */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ---------- the footer ---------- */
.site-footer{border-top:1px solid var(--line)}
.footer-grid a{color:var(--text-dim);transition:color .15s}
.footer-grid a:hover{color:var(--gold)}

/* ---------- what we run, with some weight to it ----------
   The gold seam above replaces the flat left border these had, so it is dropped here rather than
   left sitting underneath. */
.title-chip{border-left:1px solid var(--line);padding:20px 20px 18px;gap:5px}
.tc-name{font-size:24px}
.tc-count{font-size:11.5px}

/* ---------- who backs us ----------
   These name the businesses paying for the season, and they were the smallest type on the page. */
.backer{padding:14px 18px;transition:transform .18s,border-color .18s;
  background-image:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 46%)}
.backer:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.bk-name{font-size:18px}



/* ---------- signing in and signing up ----------
   These were the plainest pages on the site: a heading and some inputs floating on the ground,
   with nothing holding them. Every new player passes through here, so the form gets the same
   panel and gold seam the next-event card has.

   Written as .wrap.auth so it outweighs the .section.first padding it is replacing. */
.wrap.auth{position:relative;padding:34px 32px 32px;margin-top:46px;margin-bottom:56px;
  background:linear-gradient(165deg,rgba(35,29,61,.92),rgba(19,16,34,.94));
  border:1px solid var(--line-mid);clip-path:var(--bevel);backdrop-filter:blur(8px)}
.wrap.auth::before{content:'';position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,var(--purple),var(--gold) 65%,transparent)}
.wrap.auth .page-title{font-size:clamp(30px,4vw,40px)}
.wrap.auth .muted{margin-top:18px;font-size:14px}

@media (max-width:560px){
  .wrap.auth{padding:26px 20px 24px;margin-top:28px}
}

/* ---------- the top of an interior page ----------
   Every page but the front one opens the same way: a small purple eyebrow, a large title, then
   content. On a near-black page that title was flat cream sitting on nothing, so a tournament
   list and an admin table began identically and neither felt like arriving anywhere.

   Two things fix it without adding an element to any page. The title is filled with a vertical
   cream-to-gold ramp - what the wordmark already does - so it reads as struck metal rather than
   as text. And the band it sits in gets a purple wash behind it, the same light the hero is lit
   by. The wash is held inside the column rather than bled past it: nothing here sets
   overflow-x, so an absolute box hanging into the margin would add a horizontal scrollbar. */
.page-title{
  color:var(--cream); /* the answer for anything that cannot clip a background to text */
  background-image:linear-gradient(174deg,var(--cream) 42%,#D8B45C);
  -webkit-background-clip:text;background-clip:text;
}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .page-title{color:transparent}
}

.section.first{position:relative}
/* The auth pages are also .section.first, and their card already owns ::before for its gold
   seam. Same weight as this rule, so without the exclusion the last one written would win and
   one of the two treatments would silently vanish. */
.section.first:not(.auth)::before{content:'';position:absolute;top:-40px;left:0;right:0;height:300px;
  pointer-events:none;
  background:radial-gradient(70% 100% at 22% 0,rgba(139,47,224,.24),transparent 72%)}
/* the wash is painted first, so everything the page put here is lifted back over it */
.section.first>*{position:relative}

/* A page eyebrow is a location, so it gets a tick to sit against, the way a section label does.
   Only the ones opening a page: the breadcrumb inside an article and the label inside an admin
   card are a different job and stay plain. */
.section.first>.eyebrow{display:flex;align-items:center;gap:8px}
.section.first>.eyebrow::before{content:'';width:12px;height:2px;background:var(--gold);flex:none}

/* ---------- the button you are meant to press ----------
   It was a flat gold rectangle. A raking highlight gives it a face, and it lifts far enough on
   hover to feel like a control.

   The sheen is a background-image rather than an overlay: a positioned pseudo-element paints
   above a button's own text, and a 40% white film over dark ink is unreadable. The hover rule
   has to name it again - its background shorthand would otherwise wipe the image out. */
.btn.solid{background-image:linear-gradient(160deg,rgba(255,255,255,.42),rgba(255,255,255,0) 54%)}
.btn.solid:hover{background-color:#ffd75c;
  background-image:linear-gradient(160deg,rgba(255,255,255,.5),rgba(255,255,255,0) 54%);
  transform:translateY(-2px);filter:drop-shadow(0 12px 20px rgba(255,201,60,.34))}
.btn.solid:active{transform:translateY(0);filter:none}
.btn.ghost:hover{transform:translateY(-2px);background:rgba(255,201,60,.07)}

/* ---------- one band from the next ----------
   A long page ran every section into the one above it. A hairline at the top of each, fading out
   to the right, separates them without ruling a line across the page. */
.section+.section{position:relative}
.section+.section:not(.first)::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--line-mid),transparent 62%)}

@media (prefers-reduced-motion:reduce){
  .btn.solid:hover,.btn.ghost:hover{transform:none}
}

/* ---------- the sign-in corner, over a photograph ----------
   These sit in the top corner of the artwork, which is the brightest part of it - the trophy and
   its glow. A ghost button is an outline around nothing, so against that it all but disappeared.
   Inside the hero it gets a dark backing of its own so it holds
   whatever the picture is doing underneath. The gold one is opaque already and needs nothing -
   and a rim would not have worked on it anyway, since clip-path cuts a box-shadow away.
   Everywhere else on the site the ghost button is unchanged. */
.hero-auth .btn.ghost{background:rgba(7,6,14,.66);backdrop-filter:blur(7px);
  border-color:rgba(255,244,220,.42);color:var(--cream)}
.hero-auth .btn.ghost:hover{background:rgba(7,6,14,.8);border-color:var(--gold);color:var(--gold)}


/* ---------- a photograph as a band ----------
   Cut to the same bevel and given the same gold seam as every other panel, so a picture is part
   of the page rather than pasted onto it. The caption is set as a credit line, not as body copy:
   it names what is in the frame, and the frame is the argument. */
.shot-band{position:relative;margin:30px 0 0;line-height:0;
  clip-path:var(--bevel);border:1px solid var(--line-mid)}
.shot-band img{display:block;width:100%;height:auto}
.shot-band::before{content:'';position:absolute;inset:0 0 auto 0;height:2px;z-index:1;
  background:linear-gradient(90deg,var(--purple),var(--gold) 65%,transparent)}
/* Inside the frame, sitting on the vignette's own darkness rather than taking a strip of page. */
.shot-band figcaption{position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:26px 22px 14px;line-height:1.4;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-dim);
  background:linear-gradient(0deg,rgba(7,6,14,.88),rgba(7,6,14,0))}

@media (max-width:620px){
  .shot-band figcaption{font-size:9.5px;letter-spacing:.09em;padding:22px 14px 11px}
}

/* ---------- a face for each game ----------
   The banners were two-stop gradients with the short code sitting on them, which is a placeholder
   wearing a colour. Each title now gets the geometry of its own sport, drawn here in gradients:
   a pitch, a fight stage, a corner of track.

   Deliberately NOT the publishers' key art. E-Kings charges entry to these events, and promoting
   a paid event with EA's, Bandai Namco's or Sony's artwork is the exact use their legal teams
   enforce against. Everything below is original geometry and owes nobody anything.

   Drawn as background layers on the element itself rather than a pseudo-element, so the ::before
   gloss still passes over the top of it and the badges still sit above both. */

/* EA Sports FC - mown stripes, the halfway line and the centre circle. */
.t-banner.fc{
  background-color:#0C3A2C;
  background-image:
    radial-gradient(circle at 50% 50%, transparent 25px, rgba(255,255,255,.20) 25px 26.5px, transparent 26.5px),
    linear-gradient(90deg, transparent calc(50% - .75px), rgba(255,255,255,.20) calc(50% - .75px) calc(50% + .75px), transparent calc(50% + .75px)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 30px, rgba(255,255,255,0) 30px 60px),
    linear-gradient(135deg,#0C3A2C,#1A7F4B);
}

/* Tekken 8 - the stage ring, and the impact fanning out of it. */
.t-banner.tk{
  background-color:#4A1330;
  background-image:
    radial-gradient(circle at 50% 122%, transparent 74px, rgba(255,255,255,.20) 74px 76px, transparent 76px),
    repeating-conic-gradient(from 196deg at 50% 122%, rgba(255,255,255,.075) 0 3.4deg, rgba(255,255,255,0) 3.4deg 11deg),
    linear-gradient(135deg,#4A1330,#A3245E);
}

/* Gran Turismo - the racing line through a corner, over the start grid. */
.t-banner.gt{
  background-color:#10294A;
  background-image:
    radial-gradient(ellipse 165% 125% at 14% 138%, transparent 61.5%, rgba(255,255,255,.22) 61.5% 63%, transparent 63%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 11px, rgba(255,255,255,0) 11px 22px),
    linear-gradient(135deg,#10294A,#2472A3);
  background-size:auto, 100% 13px, auto;
  background-position:center, left bottom, center;
  background-repeat:no-repeat, repeat-x, no-repeat;
}

/* ---------- the same three, in the strip ----------
   A faint echo of each banner, so "what we run" reads as three titles rather than three boxes,
   and the seam down the edge takes the game's own accent instead of the shared gold. */
.title-chip.fc,.title-chip.tk,.title-chip.gt{
  background-repeat:no-repeat,no-repeat;
  background-position:right -30px bottom -46px, left top;
  background-size:150px 150px, 100% 100%}
.title-chip.fc{background-image:radial-gradient(circle at 50% 50%, transparent 40px, rgba(60,217,138,.24) 40px 42px, transparent 42px), linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0) 42%)}
.title-chip.tk{background-image:repeating-conic-gradient(from 210deg at 50% 50%, rgba(255,92,122,.065) 0 4deg, rgba(255,92,122,0) 4deg 13deg), linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0) 42%)}
.title-chip.gt{background-image:radial-gradient(ellipse 120% 120% at 50% 50%, transparent 56%, rgba(91,140,255,.26) 56% 58.5%, transparent 58.5%), linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0) 42%)}

.title-chip.fc::before{background:linear-gradient(180deg,var(--win),rgba(60,217,138,0))}
.title-chip.tk::before{background:linear-gradient(180deg,var(--lose),rgba(255,92,122,0))}
.title-chip.gt::before{background:linear-gradient(180deg,var(--blue),rgba(91,140,255,0))}
.title-chip.fc .tc-code{color:var(--win)}
.title-chip.tk .tc-code{color:var(--lose)}
.title-chip.gt .tc-code{color:var(--blue)}

/* ---------- sponsor marks ----------
   A sponsor either has a logo file or it does not, and the wall has to look composed either way.
   Both branches occupy the same block, so a row of logos and names lines up rather than stepping.

   The logos are SVG and sized by height, never stretched: a sponsor's mark is the one thing on
   this site that is not ours to redraw. */
.sp-mark{display:flex;align-items:center;min-height:66px;margin-bottom:12px}
.sp-mark img{max-height:64px;max-width:180px;width:auto;height:auto;object-fit:contain}
.sp-wordmark{font-family:var(--display);font-style:oblique 8deg;font-weight:800;text-transform:uppercase;
  letter-spacing:.02em;font-size:22px;line-height:1.04;color:var(--cream)}

/* the compact strip on the front page */
.bk-logo{max-height:30px;max-width:130px;width:auto;height:auto;object-fit:contain;
  display:block;margin-bottom:5px}

/* ---------- the sidebar wall ----------
   The crest was flush left in a 248px column because .brand is a flex row with no justification,
   which read as misaligned rather than as a choice. Centred on wide screens only - the phone bar
   lays the same element out in a space-between row, where centring it would break that. */
@media (min-width:761px){
  .sidebar .brand{justify-content:center}

  /* A piece sprayed on the wall behind the menu. It sits in the dead space under the last link
     - clear of the sign-in buttons below it - and is drawn faint enough to be texture rather than
     decoration competing with the nav.

     Declared after the rule above that sets `background` as a shorthand, which would otherwise
     wipe this image out. */
  .sidebar{
    background-image:url(/img/graffiti-crown.webp);
    background-repeat:no-repeat;
    background-position:center bottom 152px;
    background-size:190px auto;
  }
}

/* Collapsed to a strip there is no room for it, and on a phone the sidebar is a 60px bar. */
@media (max-width:760px){
  .sidebar{background-image:none}
}

/* Folded to a 78px strip there is no wall left to spray on, so the piece comes off rather than
   being cropped to a sliver of itself. */
html.nav-collapsed .sidebar{background-image:none}
/* ---------- a card per title ----------
   The shield: a tab at the top, a point at the foot, a foil edge, rays behind and a crosshatch
   weave. Borrowed as a SHAPE and a set of effects, not as artwork - every gradient, colour and
   piece of geometry below is written here.

   Everything inside is sized in cqw against the card own width, so one set of numbers scales
   from a phone to a wide grid with no breakpoints. That is why the card declares a container. */
@property --gc-ang{syntax:"<angle>";initial-value:0deg;inherits:false}

.gcard-row{display:grid;gap:22px;margin-top:18px;
  grid-template-columns:repeat(auto-fill,minmax(236px,1fr))}

.gcard{position:relative;aspect-ratio:350/520;container-type:inline-size;
  /* tier colours, overridden per band below */
  --c1:#ffe38a; --c2:#e0a526; --c3:#7a4c06; --glow:rgba(242,176,40,.5);
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.55)) drop-shadow(0 0 16px var(--glow));
  transition:transform .25s ease-out,filter .25s}
.gcard:hover{transform:translateY(-6px);
  filter:drop-shadow(0 26px 38px rgba(0,0,0,.6)) drop-shadow(0 0 26px var(--glow))}

/* One silhouette, cut on every layer that needs it. */
.gcard>*{position:absolute;
  clip-path:polygon(50% 0,63% 4.5%,100% 4.5%,100% 85%,50% 100%,0 85%,0 4.5%,37% 4.5%)}

.gc-edge{inset:0;background:conic-gradient(from var(--gc-ang),var(--c1),var(--c2),var(--c3),var(--c2),#fff,var(--c1));
  animation:gc-spin 6s linear infinite}
@keyframes gc-spin{to{--gc-ang:360deg}}

.gc-body{inset:4px;overflow:hidden;
  background:
    radial-gradient(90% 60% at 50% 22%,color-mix(in srgb,var(--c2) 40%,transparent),transparent 70%),
    linear-gradient(180deg,#17131f 0%,#0b0910 55%,#050407 100%)}
/* the weave */
.gc-body::before{content:'';position:absolute;inset:0;
  background:
    repeating-linear-gradient(60deg,color-mix(in srgb,var(--c1) 10%,transparent) 0 1px,transparent 1px 18px),
    repeating-linear-gradient(-60deg,color-mix(in srgb,var(--c1) 10%,transparent) 0 1px,transparent 1px 18px);
  -webkit-mask-image:radial-gradient(80% 60% at 50% 30%,#000,transparent 80%);
  mask-image:radial-gradient(80% 60% at 50% 30%,#000,transparent 80%)}

.gc-rays{position:absolute;inset:-20%;
  background:repeating-conic-gradient(from 0deg at 50% 32%,color-mix(in srgb,var(--c1) 12%,transparent) 0 4deg,transparent 4deg 16deg);
  -webkit-mask-image:radial-gradient(circle at 50% 32%,#000 0,transparent 45%);
  mask-image:radial-gradient(circle at 50% 32%,#000 0,transparent 45%);
  animation:gc-rot 40s linear infinite}
@keyframes gc-rot{to{transform:rotate(360deg)}}

.gc-wm{position:absolute;right:-6%;top:12%;font-family:var(--display);font-weight:900;
  font-size:62cqw;line-height:.8;color:transparent;letter-spacing:-.04em;
  -webkit-text-stroke:1px color-mix(in srgb,var(--c1) 22%,transparent)}

.gc-gloss{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 48%,transparent 60%);
  background-size:300% 100%;animation:gc-gloss 5s ease-in-out infinite}
@keyframes gc-gloss{0%,60%{background-position:120% 0}100%{background-position:-120% 0}}

.gc-content{inset:4px;display:flex;flex-direction:column;padding:12% 8% 0;color:var(--cream)}

.gc-badge{position:absolute;top:5.6%;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--mono);font-size:2.7cqw;font-weight:700;letter-spacing:.3em;color:#0b0910;
  background:linear-gradient(90deg,var(--c2),var(--c1),var(--c2));padding:3px 10px 2px;
  text-transform:uppercase}

.gc-top{display:grid;grid-template-columns:24% 1fr;height:45%}
.gc-left{display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:4%}
.gc-ovr{font-family:var(--display);font-style:oblique 8deg;font-weight:900;font-size:21cqw;line-height:.8;
  background:linear-gradient(180deg,#fff 10%,var(--c1) 45%,var(--c2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.6))}
.gc-pos{font-family:var(--mono);font-weight:700;font-size:4cqw;letter-spacing:.2em;color:var(--c1)}
.gc-div{width:60%;height:1.5px;background:linear-gradient(90deg,transparent,var(--c1),transparent)}
.gc-flag{width:11cqw;height:auto;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.gc-crest{width:12cqw;height:12cqw;display:grid;place-items:center;
  font-family:var(--display);font-weight:900;font-size:4.8cqw;color:#0b0910;
  background:linear-gradient(160deg,var(--c1),var(--c2));
  clip-path:polygon(50% 0,100% 18%,100% 68%,50% 100%,0 68%,0 18%)}

.gc-photo{position:relative;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.gc-photo img{max-height:100%;max-width:100%;object-fit:contain;
  -webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent);
  filter:drop-shadow(0 0 10px var(--glow))}
.gc-photo svg{width:46%;height:auto;stroke:var(--c1);fill:none;stroke-width:1.6;margin-bottom:10%}
.gc-ph{font-family:var(--display);font-style:oblique 8deg;font-weight:900;font-size:30cqw;line-height:1;
  color:transparent;background:linear-gradient(180deg,#fff,var(--c1) 50%,var(--c3));
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 14px var(--glow));margin-bottom:6%}

.gc-names{text-align:center;margin-top:1%}
.gc-tag{display:block;font-family:var(--display);font-style:oblique 8deg;font-weight:900;
  font-size:clamp(17px,11cqw,38px);line-height:.95;text-transform:uppercase;overflow-wrap:anywhere;
  background:linear-gradient(180deg,#fff 30%,var(--c1));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.gc-real{display:block;font-family:var(--mono);font-size:3.6cqw;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;margin-top:4px;color:var(--text-faint)}

.gc-bar{display:block;height:1.5px;margin:8px 6% 0;
  background:linear-gradient(90deg,transparent,var(--c1),transparent)}

.gc-stats{display:grid;grid-template-columns:1fr 1fr;margin:6px 6% 0;position:relative}
.gc-stats::after{content:'';position:absolute;left:50%;top:6px;bottom:6px;width:1px;
  background:linear-gradient(transparent,var(--c1),transparent);opacity:.6}
.gc-stats>div{display:flex;align-items:baseline;gap:8px;padding:2px 8%;font-variant-numeric:tabular-nums}
.gc-stats b{font-family:var(--display);font-style:oblique 8deg;font-weight:800;font-size:8cqw;
  min-width:2.6ch;text-align:right;line-height:1.08;color:#fff}
.gc-stats span{font-family:var(--mono);font-weight:700;font-size:3.8cqw;letter-spacing:.14em;color:var(--c1)}
.gc-stats b.gc-up{color:var(--win)}
.gc-stats b.gc-down{color:var(--lose)}

.gc-foot{margin:auto 0 0;padding-bottom:21%;text-align:center;font-family:var(--mono);
  font-size:2.8cqw;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--text-faint)}

/* ---------- the bands ----------
   Four metals. The band is the same rating range on every title; only the word changes. */
.gcard.t-royal {--c1:#f3c9ff;--c2:#b04dff;--c3:#3b0a73;--glow:rgba(176,77,255,.55)}
.gcard.t-gold  {--c1:#ffe38a;--c2:#e0a526;--c3:#7a4c06;--glow:rgba(242,176,40,.5)}
.gcard.t-silver{--c1:#eef6ff;--c2:#9fb4cc;--c3:#3a4658;--glow:rgba(170,200,235,.42)}
.gcard.t-bronze{--c1:#ffd2a8;--c2:#c07236;--c3:#4d2610;--glow:rgba(200,115,55,.45)}
/* unplayed: no metal earned yet, so it sits in the site own purple */
.gcard.t-new   {--c1:#C9B6F5;--c2:#8B2FE0;--c3:#2E1A54;--glow:rgba(139,47,224,.38)}

@media (prefers-reduced-motion:reduce){
  .gc-edge,.gc-rays,.gc-gloss{animation:none}
  .gcard,.gcard:hover{transition:none;transform:none}
}
/* The one figure that spans every title, on the identity card. Set as a line of record rather
   than as boxes, because the boxes are now the six on each game card below it. */
.pcard-overall{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-faint)}


/* ---------- the fighting game card ----------
   A versus screen, not a football card: the record read as a health bar, the tag on a plate and
   the rank set enormous behind it. Corners cut top-left and bottom-right so it sits at an angle
   to everything else on the page.

   The border is drawn by nesting rather than with border, because a clip-path cuts a border off
   with the corner it is cutting. The outer element IS the border - it is filled with the edge
   colour and the inner one sits 2px inside it, both cut to the same shape. */
.fightcard{position:relative;isolation:isolate;
  --edge:#FF4B2B; --hot:#FF7A18; --deep:#0B0608;
  clip-path:polygon(7% 0, 100% 0, 100% 93%, 93% 100%, 0 100%, 0 7%);
  background:linear-gradient(150deg,var(--hot),var(--edge) 48%,#7A1410);
  padding:2px;display:grid;
  transition:transform .2s,filter .2s}
.fightcard:hover{transform:translateY(-5px);filter:drop-shadow(0 20px 32px rgba(255,75,43,.4))}

.fgt-body{position:relative;overflow:hidden;
  clip-path:polygon(7% 0, 100% 0, 100% 93%, 93% 100%, 0 100%, 0 7%);
  background:
    linear-gradient(118deg,rgba(255,255,255,.07) 0 1.5px,rgba(255,255,255,0) 1.5px 14px),
    radial-gradient(120% 90% at 78% 22%,rgba(255,90,30,.42),rgba(255,40,20,.1) 46%,rgba(0,0,0,0) 72%),
    linear-gradient(160deg,#160A09,var(--deep) 70%);
  padding:20px 18px 16px;display:flex;flex-direction:column;gap:11px}

/* the rank, enormous, clipped by the card's own edge */
.fgt-mark{position:absolute;top:10px;left:-6%;z-index:0;pointer-events:none;
  font-family:var(--display);font-style:oblique 8deg;font-weight:900;text-transform:uppercase;
  font-size:76px;line-height:.8;letter-spacing:-.01em;white-space:nowrap;
  color:rgba(255,75,43,.16)}
.fgt-body>*{position:relative;z-index:1}

.fgt-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.fgt-rate b{display:block;font-family:var(--display);font-style:oblique 8deg;font-weight:900;
  font-size:38px;line-height:.86;color:#FFFFFF}
.fgt-rate span,.fgt-rank span{display:block;font-family:var(--mono);font-size:8.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:5px}
.fgt-rank{text-align:right}
.fgt-rank span{margin:0 0 4px;color:var(--hot)}
.fgt-rank b{font-family:var(--display);font-style:oblique 8deg;font-weight:900;font-size:19px;
  line-height:1;text-transform:uppercase;color:#FFFFFF}

/* the initials take the place a portrait has on the football card */
.fgt-initials{flex:1;display:grid;place-items:center;text-align:center;font-family:var(--display);font-style:oblique 8deg;font-weight:900;
  font-size:62px;line-height:.9;letter-spacing:.01em;color:#FFFFFF;
  text-shadow:0 0 22px rgba(255,75,43,.65),0 0 46px rgba(255,40,20,.4)}

/* the name plate: white, sheared, black type - the way a fight card announces who is on it */
.fgt-name{background:#FFFFFF;transform:skewX(-9deg);padding:6px 14px;
  clip-path:polygon(2% 0,100% 0,98% 100%,0 100%)}
.fgt-tag{display:block;transform:skewX(9deg);
  font-family:var(--display);font-style:normal;font-weight:900;text-transform:uppercase;
  font-size:19px;line-height:1.15;letter-spacing:.01em;color:#0B0608;overflow-wrap:anywhere}
.fgt-real{margin:0;font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.5)}

.fgt-wl-head{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:5px}
.fgt-wl-track{height:9px;background:rgba(255,255,255,.1);overflow:hidden;
  clip-path:polygon(0 0,100% 0,99% 100%,1% 100%)}
.fgt-wl-fill{height:100%;background:linear-gradient(90deg,var(--hot),var(--edge));
  transition:width .4s ease}

.fgt-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:2px 0 0}
.fgt-stats>div{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);
  padding:8px 4px;text-align:center;clip-path:var(--bevel-xs)}
.fgt-stats dd{margin:0;font-family:var(--display);font-style:oblique 8deg;font-weight:900;
  font-size:20px;line-height:1;color:#FFFFFF}
.fgt-stats dt{margin-top:4px;font-family:var(--mono);font-size:7.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.5)}

.fgt-foot{margin:auto 0 0;display:flex;justify-content:space-between;gap:10px;
  font-family:var(--mono);font-size:7.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.38)}

@media (prefers-reduced-motion:reduce){
  .fightcard:hover{transform:none}
  .fgt-wl-fill{transition:none}
}

/* ---------- frontend polish ----------
   The visitor path: a headline that names the sport, cards that say what to do next, a
   tournament list that can be scanned, and a register bar that stays in the thumb on a phone. */

::selection{background:rgba(139,47,224,.55);color:#fff}

.hero-lede{max-width:38ch;margin:16px 0 0;color:var(--text);font-size:clamp(15px,1.7vw,18px);
  line-height:1.5;text-shadow:0 2px 18px rgba(7,6,14,.8)}

a.title-chip{color:inherit;text-decoration:none;transition:transform .18s,border-color .18s}
a.title-chip:hover{color:inherit;transform:translateY(-3px);border-color:var(--line-strong)}

.t-cta{margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--gold)}
.t-card:hover .t-cta{color:var(--cream)}
.tag.ghost{background:transparent;color:var(--text-dim)}

.filters{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0}
.filters.games{margin-top:10px}
.filter{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  padding:8px 12px;border:1px solid var(--line-mid);clip-path:var(--bevel-xs);color:var(--text-dim);
  background:transparent}
.filter:hover{border-color:var(--gold);color:var(--gold)}
.filter.on{background:var(--gold);color:var(--gold-ink);border-color:transparent}

.t-band{margin-top:28px}
.t-band .card-row{margin-top:14px}

.pod{color:inherit;transition:transform .18s,border-color .18s}
.pod:hover{color:inherit;transform:translateY(-3px)}
@media (min-width:641px){
  .podium{align-items:end;grid-template-columns:1fr 1.12fr 1fr}
  .pod-1{order:2;padding:32px 20px 36px}
  .pod-2{order:1}
  .pod-3{order:3}
}

.wrap.auth .page-sub{margin-top:10px;margin-bottom:8px;max-width:none}
.wrap.auth .eyebrow{margin-bottom:8px}

.foot-seam{height:2px;margin-bottom:42px;
  background:linear-gradient(90deg,var(--purple),var(--gold) 55%,transparent)}
.site-footer{padding-top:0}

.sticky-cta{display:none}
@media (max-width:760px){
  .td-cta{display:none}
  .sticky-cta{display:block;position:sticky;bottom:0;z-index:40;padding:20px 0 14px;
    background:linear-gradient(180deg,transparent,rgba(7,6,14,.94) 32%);
    border-top:1px solid transparent}
  .sticky-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:12px 14px;background:rgba(19,16,34,.94);border:1px solid var(--line-mid);
    clip-path:var(--bevel-sm);backdrop-filter:blur(10px)}
  .sticky-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
  .sticky-k{font-family:var(--display);font-style:oblique 8deg;font-weight:800;text-transform:uppercase;
    font-size:16px;line-height:1.05;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sticky-m{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--text-faint)}
  .sticky-cta .btn{flex:none}
}

.top-player:nth-child(1) .tp-pos{color:var(--gold)}


/* ==========================================================================
   Site-wide ground: dark purple fading to black
   One vertical fade on every page - dark purple at the top of the screen, black at the bottom, fixed to the viewport so it fits every page and screen size. The starfield,
   ambient glows, grain and chevron stripes are switched off so the gradient is the whole
   background. The front page's hero photograph fades out at its foot (a mask, not a colour) so it
   melts into the gradient instead of ending on a hard edge.
   ========================================================================== */
:root{--bg:#000}
html{background:#000}
body{
  background-color:#000;
  background-image:linear-gradient(180deg,#2a0f52 0%,#14072b 40%,#000 100%);
  background-attachment:fixed;
  background-size:100% 100%;
  background-repeat:no-repeat;
}
/* Footer and sidebar take a hint of the ground behind them instead of a separate purple slab. */
.site-footer{background:rgba(10,4,22,.7)}
/* background-color, not the shorthand: the shorthand would wipe the graffiti image behind the menu. */
@media (min-width:761px){.sidebar{background-color:rgba(14,6,30,.78)}}
body::before,#fx,.amb,.grain{display:none}
.hero-art{
  -webkit-mask-image:linear-gradient(180deg,#000 68%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 68%,transparent 100%);
}
.hero-banner::after{
  background:linear-gradient(97deg,rgba(20,7,43,.92) 0%,rgba(20,7,43,.82) 24%,rgba(20,7,43,.45) 44%,
    rgba(20,7,43,.08) 60%,rgba(20,7,43,0) 72%);
}
@media (max-width:1040px){
  .hero-banner::after{
    background:
      linear-gradient(178deg,rgba(20,7,43,.7) 0%,rgba(20,7,43,.5) 42%,rgba(20,7,43,.85) 85%,rgba(20,7,43,0) 100%),
      linear-gradient(90deg,rgba(20,7,43,.58),rgba(20,7,43,0) 64%);
  }
}


/* ---------- home slideshow ----------
   A strip of full-width slides on scroll-snap. It works with no script at all - swipe it, or
   scroll it - and js/ekings.js adds the buttons, the dots and the autoplay on top. */
.slideshow{position:relative;margin:30px 0 0;clip-path:var(--bevel);border:1px solid var(--line-mid);background:var(--surface)}
.slideshow::before{content:'';position:absolute;inset:0 0 auto 0;height:2px;z-index:3;
  background:linear-gradient(90deg,var(--purple),var(--gold) 65%,transparent)}
.ss-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.ss-track::-webkit-scrollbar{display:none}
.ss-track:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.ss-slide{position:relative;flex:0 0 100%;margin:0;scroll-snap-align:start;aspect-ratio:21/9;line-height:0}
.ss-slide img{display:block;width:100%;height:100%;object-fit:cover}
.ss-slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 22px 16px;line-height:1.4;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);
  background:linear-gradient(0deg,rgba(7,6,14,.88),rgba(7,6,14,0))}
.ss-btn,.ss-pause,.ss-dots{display:none}
.ss-ready .ss-btn{display:grid;place-items:center;position:absolute;top:50%;z-index:2;width:44px;height:44px;margin-top:-22px;
  border:1px solid var(--line-strong);background:rgba(7,6,14,.62);color:var(--text);font-size:28px;line-height:1;cursor:pointer}
.ss-ready .ss-btn:hover{background:rgba(7,6,14,.85);border-color:var(--gold)}
.ss-prev{left:10px}.ss-next{right:10px}
.ss-ready .ss-pause{display:block;position:absolute;top:12px;right:12px;z-index:2;padding:5px 10px;border:1px solid var(--line-strong);
  background:rgba(7,6,14,.62);color:var(--text);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.ss-ready .ss-dots{display:flex;position:absolute;left:0;right:0;bottom:10px;z-index:2;justify-content:center;gap:8px;pointer-events:none}
.ss-dots i{width:8px;height:8px;border-radius:50%;background:rgba(243,240,249,.35)}
.ss-dots i.on{background:var(--gold)}
.ss-ready .ss-slide figcaption{padding-bottom:30px}
@media (max-width:620px){
  .ss-slide{aspect-ratio:4/3}
  .ss-slide figcaption{font-size:9.5px;letter-spacing:.09em;padding:26px 14px 28px}
  .ss-ready .ss-btn{width:38px;height:38px;margin-top:-19px}
}
@media (prefers-reduced-motion:reduce){.ss-track{scroll-behavior:auto}}

/* ---------- tournament rules ---------- */
.rules-box{max-height:300px;overflow:auto;margin-top:10px;padding:16px 18px;font-size:14.5px;line-height:1.65;
  border:1px solid var(--line);background:rgba(19,16,34,.88)}
.rules-box:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.rules-box h2,.rules-box h3{font-size:18px;margin-top:1.2em}
.rules-box>:first-child{margin-top:0}
.rules-box ul,.rules-box ol{padding-left:1.2em}
.rules-fold{margin-top:38px}
.rules-fold>summary{cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.rules-fold[open]>summary{color:var(--text)}
.rules-fold .rules-box{max-height:none}

.adm-table.lb{min-width:720px}
.adm-table.lb td:first-child{min-width:0}
.adm-table.lb td:nth-child(n+6){white-space:normal}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}

.sp-row{flex:none}
.sp-thumb{display:grid;place-items:center;width:64px;height:40px;object-fit:contain;background:var(--surface-2);border:1px solid var(--line);padding:3px;font-family:var(--mono);font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);text-align:center}
.logo-field{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px}
.logo-label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);font-weight:700}
.sp-preview{max-height:48px;max-width:160px;object-fit:contain;background:var(--surface-2);border:1px solid var(--line);padding:6px}
.logo-field .hint{flex-basis:100%;margin:0}
.sp-row+div{flex:1 1 0;min-width:0}

.nf{margin-top:12px}
.nf .empty-mark{font-size:72px}

/* control room: a simple horizontal bar for the Visits page */
.adm-actions .bar{height:8px;border-radius:4px;background:linear-gradient(90deg,#7B2CFF,#B565FF);margin-right:10px;display:inline-block}

/* Game Pass month grid */
.cal-title{margin:26px 0 10px;font-size:1.05rem}
.gp-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;max-width:560px}
.gp-h{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted,#9a93ad);text-align:center}
.gp-c{min-height:54px;border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:2px;
  border:1px solid rgba(255,255,255,.06);color:inherit;text-decoration:none}
.gp-c.blank{border-color:transparent}
.gp-c .gp-n{font-weight:600;font-size:.9rem}
.gp-c small{font-size:.68rem;opacity:.8}
.gp-c.open{background:rgba(123,44,255,.22);border-color:#7B2CFF}
.gp-c.open:hover,.gp-c.open:focus-visible{background:rgba(123,44,255,.4)}
.gp-c.full{opacity:.5}