/* Layout: the site is the in-game menu. Slate panels with 3-pixel corner marks float over a voxel dusk ridge;
   blue marks the selection, green marks "on", wood marks the one action that matters. Dark as in game, with a light
   theme further down ([data-theme="light"]). */
:root{
  color-scheme:dark;
  --ink:#0B0D12; --bar:rgba(11,13,18,.86);
  --panel:#0F1117; --edge:#2C313C; --orn:#242934;
  --row:#1A1E27; --row-edge:#272C37;
  --tile:#252A34; --tile-edge:#333946;
  --btn:#1C2029; --btn-hover:#232834; --btn-edge:#3A404D; --btn-edge-hover:#5A6273;
  --text:#F1F3F7; --soft:#C9CED8; --muted:#9AA1AE; --dim:#646B7B;
  --select:#16314F; --select-edge:#4A90D9; --select-glow:rgba(74,144,217,.34);
  --go:#1F6F43; --go-edge:#2EA05B; --go-text:#DFF7E8; --live:#3FB950; --toggle:#22A64C; --toggle-edge:#2EBA5C;
  --wood:#6B4423; --wood-grain:#5B391C; --wood-edge:#3E2612; --wood-text:#F3E3C8;
  --slate:#8E97AB; --foot:#06070A; --well:#0C0E13; --drop:rgba(0,0,0,.4);
  --toggle-off:#2A2F3A; --toggle-off-edge:#3A404D; --knob:#9AA1AE;
  --slot:#1C2029; --slot-edge:#3A404D; --slot-on:#E9ECF2; --slot-on-fill:#272C37;
  --tip:#22123A; --tip-edge:#4A2A84; --tip-title:#FFFFFF; --tip-text:#C3B8DA;
  --blue:#447FFF; --red:#FF3232; --blue-text:#7DA5FF; --red-text:#FF6A6A;
  --r-bronze:#F0A63A; --r-silver:#B8BEC9; --r-gold:#FFE15C; --r-plat:#6FEDEA; --r-diamond:#2EC4C4; --r-champ:#C66DE2;
  --font-pixel:"Silkscreen",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --font-body:"Noto Sans","Segoe UI",system-ui,-apple-system,sans-serif;

}
/* Light theme: the same surfaces, light. shared.js sets data-theme on <html> from the visitor's choice or, by default,
   their system setting; each page's head script does it first, so a page never flashes the wrong theme. The game's
   boss bar, the wood button, the ribbons and the scenes look the same in both. */
[data-theme="light"]{
  color-scheme:light;
  --ink:#F2F4F8; --bar:rgba(242,244,248,.88);
  --panel:#FFFFFF; --edge:#D5DAE3; --orn:#E3E7EE;
  --row:#F7F8FB; --row-edge:#E1E5EC;
  --tile:#EDF0F5; --tile-edge:#D6DCE5;
  --btn:#F1F3F7; --btn-hover:#E6EAF0; --btn-edge:#CAD0DB; --btn-edge-hover:#A8B1C0;
  --text:#11151E; --soft:#323A49; --muted:#5A6374; --dim:#868E9E;
  --select:#3474D4; --select-edge:#2459AE; --select-glow:rgba(52,116,212,.22);
  --slate:#6B7489; --foot:#E4E7ED; --well:#F4F6F9; --drop:rgba(20,30,50,.12);
  --toggle-off:#D8DCE3; --toggle-off-edge:#C2C8D2; --knob:#FFFFFF;
  --slot:#E8ECF2; --slot-edge:#C4CBD6; --slot-on:#2A3140; --slot-on-fill:#FFFFFF;
  --tip:#F3EEFC; --tip-edge:#B9A3E6; --tip-title:#2A1550; --tip-text:#5B4A7A;
}
/* Colour-coded text and icons are darkened in light mode so they stay readable on light surfaces. */
[data-theme="light"] .tag{color:color-mix(in srgb,var(--tc) 55%,#000)}
[data-theme="light"] .prof-rank b,[data-theme="light"] .cos-card .tile{color:color-mix(in srgb,var(--rc) 60%,#000)}
[data-theme="light"] .lead{text-shadow:none}
@property --px-fill{syntax:"<color>";inherits:true;initial-value:#1A1E27}
@property --px-edge{syntax:"<color>";inherits:true;initial-value:#272C37}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:80px}
/* Every page is at least a screen tall, with main stretching, so the footer reaches the bottom on short pages. */
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--ink);color:var(--text);font:400 16px/1.6 var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
body>main{flex:1 0 auto}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bar)}
img{max-width:100%}
a{color:inherit}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--select-edge);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1180px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* ---------- The bordered surface every panel, row, tile and button is made of ---------- */
.px{position:relative;isolation:isolate;background:var(--px-edge);border-radius:var(--r,6px)}
.px::before{content:"";position:absolute;inset:var(--bw,1px);z-index:-1;background:var(--px-fill);border-radius:calc(var(--r,6px) - var(--bw,1px))}
.sm{--r:4px}
.panel{--px-edge:var(--edge);--px-fill:var(--panel);--r:8px}
.panel::after{content:"";position:absolute;inset:8px;z-index:-1;pointer-events:none;background:
  linear-gradient(var(--orn),var(--orn)) right 0 top 0/4px 4px no-repeat,
  linear-gradient(var(--orn),var(--orn)) right 4px top 0/4px 4px no-repeat,
  linear-gradient(var(--orn),var(--orn)) right 0 top 4px/4px 4px no-repeat,
  linear-gradient(var(--orn),var(--orn)) left 0 bottom 0/4px 4px no-repeat,
  linear-gradient(var(--orn),var(--orn)) left 4px bottom 0/4px 4px no-repeat,
  linear-gradient(var(--orn),var(--orn)) left 0 bottom 4px/4px 4px no-repeat}
.row{--px-edge:var(--row-edge);--px-fill:var(--row)}
.tile{--px-edge:var(--tile-edge);--px-fill:var(--tile);--r:4px;--i:20px;display:grid;place-items:center;width:44px;height:44px;flex:none;color:var(--text)}
.lucide{width:var(--i,20px);height:var(--i,20px);stroke-width:2;flex:none}

.btn{--px-edge:var(--btn-edge);--px-fill:var(--btn);--i:18px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 18px;border:0;color:var(--soft);font:600 15px/1 var(--font-body);text-decoration:none;white-space:nowrap;cursor:pointer;transition:--px-fill .12s,--px-edge .12s,color .12s,transform .08s}
.btn:active{transform:translateY(1px) scale(.98)}
.btn:hover{--px-fill:var(--btn-hover);--px-edge:var(--btn-edge-hover);color:var(--text)}
.btn:focus-visible{outline:none}
.btn:focus-visible::before{box-shadow:inset 0 0 0 2px var(--select-edge)}
.btn.on,.btn[aria-selected="true"],.btn[aria-pressed="true"]{--px-fill:var(--select);--px-edge:var(--select-edge);color:#fff}
.btn.on::before,.btn[aria-selected="true"]::before,.btn[aria-pressed="true"]::before{box-shadow:inset 0 0 16px var(--select-glow)}
.btn.go{--px-fill:var(--go);--px-edge:var(--go-edge);color:var(--go-text)}
.btn-wood{--px-edge:var(--wood-edge);--bw:2px;color:var(--wood-text);text-shadow:0 1px 0 rgba(0,0,0,.5);padding:0 20px 0 14px}
.btn-wood::before{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(0,0,0,.14)),repeating-linear-gradient(180deg,var(--wood) 0 10px,var(--wood-grain) 10px 11px)}
.btn-wood:hover{--wood:#7A4F2A;--wood-grain:#684223;--px-edge:var(--wood-edge);color:#FFF4E0}
.btn-wood .ico{display:inline-flex;padding-right:12px;margin-right:2px;border-right:1px solid rgba(0,0,0,.4);box-shadow:1px 0 rgba(255,255,255,.09)}
.btn.small{min-height:38px;padding:0 14px;font-size:14px}
.btn-wood.small{padding:0 14px 0 10px}

.dot{width:8px;height:8px;flex:none;background:var(--live);box-shadow:0 0 0 3px rgba(63,185,80,.18)}
.dot.idle{background:var(--dim);box-shadow:none}
.label{font:400 11px/1.2 var(--font-pixel);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* ---------- Header ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--bar);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--edge);transition:box-shadow .25s}
.top.scrolled{box-shadow:0 10px 28px var(--drop)}
/* Three columns, the outer two equal, so the links sit in the middle of the bar whatever is either side. */
.top-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;height:64px}
.brand{justify-self:start;display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.brand img{width:46px;height:auto;display:block}
.brand b{font:400 22px/1 var(--font-pixel);letter-spacing:.08em}
.links{display:flex;gap:2px}
.links a{position:relative;padding:10px 12px;color:var(--muted);text-decoration:none;font:500 14.5px/1 var(--font-body)}
.links a:hover,.links a.cur{color:var(--text)}
.links a::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;background:var(--select-edge);transform:scaleX(0);transition:transform .15s}
.links a:hover::after,.links a.cur::after{transform:none}
.top-r{grid-column:3;justify-self:end;display:flex;align-items:center;gap:14px}
.online{display:flex;align-items:center;gap:8px;font:400 11px/1 var(--font-pixel);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.menu-btn{display:none;min-height:38px;padding:0 12px}
.theme-btn{width:38px;min-height:38px;padding:0}
.drawer{position:absolute;left:0;right:0;top:100%;padding-block:10px 14px;background:var(--bar);border-bottom:1px solid var(--edge)}
.drawer nav{display:grid;gap:6px;padding:12px}
.drawer .btn{justify-content:flex-start}
.drawer .btn .lucide:last-child{margin-left:auto;color:var(--dim)}
@media (max-width:960px){.links,.online{display:none}.menu-btn{display:inline-flex}}
@media (max-width:420px){.brand b{display:none}}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;text-align:center;padding-block:clamp(40px,7vw,84px) clamp(150px,19vw,230px)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-2}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse min(46rem,70%) 34% at 50% 38%,rgba(11,13,18,.62),rgba(11,13,18,0) 72%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--ink))}
.hero-in{--card-w:580px;display:grid;justify-items:center;gap:14px}
.ver{--px-fill:var(--well);display:inline-flex;align-items:center;gap:10px;padding:8px 14px;font:400 11px/1 var(--font-pixel);letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.title{width:min(var(--card-w)*1.25,100%);margin-top:4px}
.title img{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 28px rgba(0,0,0,.55))}
.lead{font:700 clamp(19px,2.6vw,26px)/1.3 var(--font-body);color:var(--text);text-shadow:0 2px 12px rgba(0,0,0,.6)}
.motto{font:400 13px/1 var(--font-pixel);letter-spacing:.42em;text-transform:uppercase;color:var(--soft);margin-right:-.42em;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.join-card{width:min(var(--card-w),100%);margin-top:18px;padding:16px;display:grid;gap:12px;text-align:left}
.addr-row{display:flex;align-items:center;gap:14px}
.addr{flex:1;min-width:0;display:grid;gap:4px}
.addr-v{font:400 clamp(17px,3.4vw,23px)/1.15 var(--font-pixel);color:var(--text);letter-spacing:.02em;overflow-wrap:anywhere}
.addr .port{font-size:13px;color:var(--muted)}
.addr .port b{color:var(--soft);font-weight:600}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}
.cta-row .btn{flex:1 1 200px}
.hint{font-size:12.5px;color:var(--muted);text-align:center}
@media (prefers-reduced-motion:no-preference){
  .title img{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
  .dot:not(.idle){animation:pulse 2.4s ease-in-out infinite}
}
@keyframes rise{from{transform:translateY(14px) scale(.98)}}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(63,185,80,0)}}

/* ---------- Bands and section heads ---------- */
/* A link to a section lands on its title, not its top padding: the scroll target starts --pad below the section's top,
   and html's scroll-padding-top keeps it clear of the sticky header. */
.band{--pad:clamp(56px,7.5vw,104px);padding-block:var(--pad);scroll-margin-top:calc(var(--pad) * -1)}
.band.tight{padding-block:0 clamp(40px,5vw,64px)}
.head{display:grid;gap:12px;margin-bottom:clamp(24px,3.4vw,40px)}
.eyebrow{display:flex;align-items:center;gap:10px;font:400 12px/1 var(--font-pixel);letter-spacing:.2em;text-transform:uppercase;color:var(--slate)}
.eyebrow::before{content:"";width:20px;height:11px;background:var(--slate);clip-path:polygon(0 100%,38% 8%,52% 42%,70% 0,100% 100%)}
h2,.page-h{font:800 clamp(30px,4.3vw,46px)/1.08 var(--font-body);letter-spacing:-.015em;text-wrap:balance}
.head p{color:var(--muted);font-size:17px}
.head p code,.mono{font:400 .82em/1 var(--font-pixel);color:var(--soft);letter-spacing:.02em}

/* ---------- Feature strip ---------- */
.feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
/* Each feature: its icon inline with the title, at the title's text height, and the description on the line below. */
.feat{display:grid;align-content:start;gap:6px;padding:14px 16px 16px}
.feat b{--i:1.1em;display:flex;align-items:center;gap:8px;font-size:15.5px;font-weight:700;line-height:1.3}
.feat p{color:var(--muted);font-size:14px;line-height:1.5}
@media (max-width:1120px){.feats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.feats{grid-template-columns:1fr}}

/* ---------- Join ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.step{padding:22px 20px 20px;display:flex;flex-direction:column;gap:12px}
.step-head{display:flex;align-items:center;gap:12px}
.step-n{--px-fill:var(--select);--px-edge:var(--select-edge);width:36px;height:36px;flex:none;display:grid;place-items:center;font:400 16px/1 var(--font-pixel);color:#fff}
.step h3{font:700 20px/1.25 var(--font-body)}
.step p{color:var(--muted);font-size:15px}
.step .demo{margin-top:auto;padding-top:6px}
.tabs-demo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.tabs-demo span{--px-fill:var(--btn);--px-edge:var(--btn-edge);display:grid;place-items:center;min-height:40px;font-size:14px;font-weight:600;color:var(--muted)}
.tabs-demo span.on{--px-fill:var(--select);--px-edge:var(--select-edge);color:#fff}
.fields{display:grid;gap:8px}
.field{display:grid;gap:5px}
.field .fv{--px-fill:var(--well);--px-edge:var(--btn-edge);display:flex;align-items:center;gap:8px;min-height:40px;padding:0 4px 0 12px}
.field .fv span{flex:1;min-width:0;font:400 14px/1.2 var(--font-pixel);color:var(--text);overflow-wrap:anywhere}
.icon-btn{--px-edge:var(--btn-edge);--px-fill:var(--btn);--r:4px;--i:16px;width:32px;min-height:32px;padding:0;color:var(--muted)}
.i-ok{display:none}
.copied .i-ok{display:block}
.copied .i-copy{display:none}
.hotbar{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px}
.slot{--px-edge:var(--slot-edge);--px-fill:var(--slot);--r:4px;--i:60%;aspect-ratio:1;display:grid;place-items:center;border:0;padding:0;color:var(--soft);cursor:pointer}
.slot .lucide{width:58%;height:58%}
.slot img{width:62%;height:62%;image-rendering:pixelated}
.slot.soon{color:var(--dim)}
.slot.soon img{opacity:.45}
.slot[aria-pressed="true"]{--px-edge:var(--slot-on);--bw:2px;--px-fill:var(--slot-on-fill);color:var(--text)}
.slot:focus-visible{outline:none}
.slot:focus-visible::before{box-shadow:inset 0 0 0 2px var(--select-edge)}
/* The tooltip floats over the selected slot without taking up room in the card; --tx slides it along the hotbar and --tail points at the slot. */
@property --tx{syntax:"<length>";inherits:true;initial-value:0px}
@property --tail{syntax:"<length>";inherits:true;initial-value:22px}
.hotbar-demo{position:relative}
.tooltip{--px-fill:var(--tip);--px-edge:var(--tip-edge);--r:4px;position:absolute;left:0;bottom:calc(100% + 6px);z-index:10;display:flex;flex-direction:column;gap:2px;width:max-content;max-width:min(260px,100%);padding:8px 12px;transform:translateX(var(--tx));transition:--tx .15s,--tail .15s}
.tooltip::after{content:"";position:absolute;left:var(--tail);bottom:-5px;width:10px;height:10px;margin-left:-5px;background:var(--px-fill);border:solid var(--px-edge);border-width:0 1px 1px 0;transform:rotate(45deg)}
.tooltip b{font:400 13px/1.3 var(--font-pixel);color:var(--tip-title)}
.tooltip span{font-size:13px;color:var(--tip-text)}
@media (max-width:980px){
  .steps{grid-template-columns:1fr}
  /* Stacked cards have no spare room above the hotbar, so the tooltip hangs below it instead. */
  .tooltip{bottom:auto;top:calc(100% + 12px)}
  .tooltip::after{bottom:auto;top:-5px;border-width:1px 0 0 1px}
}

/* ---------- Duels menu replica ---------- */
.bossbar{display:grid;justify-items:center;gap:6px;margin:0 auto 16px;width:min(440px,100%);text-align:center}
.bossbar b{font:400 13px/1 var(--font-pixel);color:var(--text);letter-spacing:.06em}
.bossbar .bar{display:block;width:100%;height:10px;background:#2A1638;border:1px solid #0B0D12;position:relative;overflow:hidden}
.bossbar .bar i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(#F07BE0,#C64BB5);transition:width .9s linear}
.bossbar .bar::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(0,0,0,.45) calc(10% - 1px) 10%)}
/* Mode pills scroll sideways when they outgrow the row; the strip runs into the page gutter so a cut-off pill shows there is more.
   Its scrollbar is a slim pill in the button edge colour, shown only while the strip is hovered or focused. */
.mode-nav{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;margin:0 -16px 10px;padding:0 16px 4px;scroll-padding-inline:16px}
.mode-nav::-webkit-scrollbar{height:6px}
.mode-nav::-webkit-scrollbar-track{background:transparent;margin-inline:16px}
.mode-nav::-webkit-scrollbar-thumb{background:transparent;border-radius:999px}
.mode-nav:is(:hover,:focus-within)::-webkit-scrollbar-thumb{background:var(--btn-edge)}
.mode-nav::-webkit-scrollbar-thumb:hover{background:var(--btn-edge-hover)}
@supports not selector(::-webkit-scrollbar){
  .mode-nav{scrollbar-width:thin;scrollbar-color:transparent transparent}
  .mode-nav:is(:hover,:focus-within){scrollbar-color:var(--btn-edge) transparent}
}
.mode-pill{--r:999px;flex:none;scroll-snap-align:start;min-height:42px;padding:0 18px 0 14px;font-weight:500;font-size:15px}
.mode-main{padding:clamp(16px,2.6vw,28px);display:flex;flex-direction:column;gap:20px}
.mp-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.tile.big{width:66px;height:66px;--i:32px}
.mp-title{flex:1;min-width:180px}
.mp-title h3{font:700 30px/1.1 var(--font-body);letter-spacing:-.01em}
.meta{margin-top:5px;color:var(--muted);font-size:14px}
.mp-q{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.status{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.mp-blurb{color:var(--soft);font-size:16px;max-width:64ch}
.rules{display:grid;gap:8px}
.rule{display:flex;align-items:center;gap:14px;padding:10px 16px 10px 10px}
.rt{flex:1;min-width:0}
.rt b{display:block;font-size:16px;font-weight:600;line-height:1.3}
.rt span{display:block;color:var(--muted);font-size:14px;line-height:1.45}
.toggle{position:relative;flex:none;width:54px;height:30px;border-radius:999px;background:var(--toggle-off);border:1px solid var(--toggle-off-edge)}
.toggle::after{content:"";position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;background:var(--knob);transition:transform .2s}
.toggle.on{background:var(--toggle);border-color:var(--toggle-edge)}
.toggle.on::after{transform:translateX(24px);background:#fff}
.pill{--px-fill:var(--tile);--px-edge:var(--tile-edge);flex:none;padding:8px 12px;font:400 12px/1 var(--font-pixel);letter-spacing:.06em;color:var(--text);white-space:nowrap}
.kit{display:grid;gap:10px}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.chip{--px-edge:var(--tile-edge);--px-fill:var(--tile);padding:6px 11px;font-size:13.5px;color:var(--soft)}
.chip b{color:var(--text);font-weight:600}
.demo-note{font-size:12.5px;color:var(--dim)}

/* ---------- Rank badges ---------- */
.badge{--r:4px;display:inline-grid;place-items:center;width:28px;height:28px;flex:none;border-radius:4px;background:linear-gradient(135deg,color-mix(in srgb,var(--rc) 45%,#fff) 0 30%,var(--rc) 30% 65%,color-mix(in srgb,var(--rc) 55%,#000) 65%);font:400 13px/1 var(--font-pixel);color:#0B0D12}
.badge.s{width:20px;height:20px;font-size:10px}

/* ---------- Leaderboards ---------- */
.lb{padding:clamp(16px,2.4vw,24px);display:grid;gap:22px}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tab{min-height:38px;padding:0 14px;font-size:14px}
/* Place colours from MCTiers' top-three badges: a main colour, the lighter shimmer that edges and sweeps across it, the
   brighter edge it takes on hover, and its hover glow. These are plain hex on purpose: Chrome flashes black and red when
   it animates between hex and color-mix() colours. */
:root{--p1:#EFBA3C;--p1-hi:#F0C863;--p1-lit:#F7E1A9;--p1-glow:#EFBA3C99;
  --p2:#879EA5;--p2-hi:#A0B0B7;--p2-lit:#CBD4D7;--p2-glow:#879EA599;
  --p3:#B56329;--p3-hi:#C58152;--p3-lit:#DFBAA0;--p3-glow:#B5632999}
.podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:clamp(6px,1.4vw,14px)}
/* Each of the top three is the player over a pedestal the width of its column, so the outer two line up with the rows
   below. --line is the pedestal's border and --rim the ribbon's. On hover the place lifts, the pedestal takes the
   buttons' hover colours, the ribbon's border brightens and the pedestal glows in the place colour. */
.pod{--line:var(--btn-edge);--rim:var(--hi);display:grid;justify-items:center;gap:10px;min-width:0;text-align:center;transition:transform .2s}
.pod:hover{--line:var(--btn-edge-hover);--rim:var(--lit);transform:translateY(-4px)}
.pod .id{display:grid;justify-items:center;gap:2px;max-width:100%}
.pod.p1{order:2;--pc:var(--p1);--hi:var(--p1-hi);--lit:var(--p1-lit);--glow:var(--p1-glow);--fh:160px}
.pod.p2{order:1;--pc:var(--p2);--hi:var(--p2-hi);--lit:var(--p2-lit);--glow:var(--p2-glow);--fh:128px}
.pod.p3{order:3;--pc:var(--p3);--hi:var(--p3-hi);--lit:var(--p3-lit);--glow:var(--p3-glow);--fh:104px}
.pod img{display:block;width:56px;height:56px;image-rendering:pixelated;box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--pc)}
.pod.p1 img{width:72px;height:72px}
.pod .nm{font-weight:700;font-size:clamp(14px,1.8vw,17px);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod .v{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 6px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.pod .v strong{color:var(--text);font-weight:600}
/* The pedestal, longest for first, is a block in the button colours, bordered in the shimmer colour on the top and sides.
   Its foot is a bar in the button border colour drawn over the side borders, so it runs the full width. Filling it is the
   ribbon: a gradient in the place colour with two sharp peaks like the logo's cut out of its foot, corner to corner,
   showing the pedestal beneath, and the place (1st, 2nd, 3rd) centred above them. .flag-in holds the ribbon's shape and
   the .ridge line traces the peaks in the border colour; its points match the clip-path's and run past both bottom
   corners, where the line's own box trims it flush with the side borders and the foot. Two light stripes sweep across
   once, when the podium first scrolls in. */
.ped{position:relative;width:100%;height:var(--fh);padding-bottom:4px;border:4px solid var(--rim);border-bottom:0;border-radius:12px 12px 0 0;background:var(--btn);box-shadow:0 14px 30px -12px transparent;transition:border-color .2s,background-color .2s,box-shadow .2s}
.ped::after{content:"";position:absolute;left:-4px;right:-4px;bottom:0;z-index:1;height:4px;background:var(--line);transition:background-color .2s}
.pod:hover .ped{background:var(--btn-hover);box-shadow:0 14px 30px -12px var(--glow)}
.flag{position:relative;height:100%}
.flag-in{position:relative;isolation:isolate;overflow:hidden;height:100%;display:flex;align-items:center;justify-content:center;padding-bottom:calc((var(--fh) - 8px) * .52);border-radius:8px 8px 0 0;
  background:linear-gradient(180deg,var(--pc),color-mix(in srgb,var(--pc) 62%,#000));
  clip-path:polygon(0 0,100% 0,100% 100%,74% 64%,66% 72%,50% 48%,0 100%)}
.ridge{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ridge polyline{fill:none;stroke:var(--rim);stroke-width:4;stroke-linejoin:miter;stroke-miterlimit:10;transition:stroke .2s}
.flag-in::before{content:"";position:absolute;inset:0;z-index:-1;transform:translateX(-100%);background:linear-gradient(110deg,transparent 30%,var(--hi) 30% 36%,transparent 36% 44%,var(--hi) 44% 62%,transparent 62%)}
.flag .place{font:400 clamp(22px,3.2vw,32px)/1 var(--font-pixel);color:#fff;text-shadow:0 3px 1px #232323}
.flag .place small{font:700 .55em/1 var(--font-body);vertical-align:top;margin-left:2px}
@media (prefers-reduced-motion:no-preference){.flag-in.shine::before{animation:shimmer 2s cubic-bezier(.9,0,.1,1)}}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.lb-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
/* Rows (and the podium places above) link to the player's profile; rows take the buttons' hover colours. */
a.pod,a.lb-row,a.pm-row{color:inherit;text-decoration:none}
.lb-row,.pm-row{transition:--px-fill .12s,--px-edge .12s}
a.lb-row:hover,a.pm-row:hover{--px-fill:var(--btn-hover);--px-edge:var(--btn-edge-hover)}
.lb-row{display:grid;grid-template-columns:30px 30px minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:8px 14px 8px 10px}
.lb-row .pl{font:400 13px/1 var(--font-pixel);color:var(--muted);text-align:center}
.lb-row img{display:block;width:30px;height:30px;image-rendering:pixelated}
.lb-row .nm{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-row .rk,.pm-row .rk{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.lb-row .val,.pm-row .val{min-width:76px;text-align:right;font:400 14px/1 var(--font-pixel);color:var(--text);font-variant-numeric:tabular-nums}
.lb-row .val small,.pm-row .val small{display:block;margin-top:4px;font:400 11.5px/1 var(--font-body);color:var(--muted)}
.lb-more{width:100%}
.lb-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
@media (max-width:560px){.lb-row{grid-template-columns:26px 28px minmax(0,1fr) auto}.lb-row .rk{display:none}}

/* ---------- Top 100 and player pages ---------- */
.band.first{padding-top:clamp(28px,4vw,48px)}
.back{--i:16px;display:inline-flex;align-items:center;gap:6px;margin-bottom:18px;color:var(--muted);font-size:14.5px;text-decoration:none}
.back:hover{color:var(--text)}
.lookup{display:flex;flex-wrap:wrap;gap:10px;padding:clamp(14px,2vw,18px);margin-bottom:14px}
.search{--px-fill:var(--well);--px-edge:var(--btn-edge);--i:18px;flex:1 1 240px;display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;color:var(--muted)}
.search:focus-within::before{box-shadow:inset 0 0 0 2px var(--select-edge)}
.search input{flex:1;min-width:0;height:46px;background:transparent;border:0;outline:none;color:var(--text);font:400 16px/1 var(--font-body)}
.search input::placeholder{color:var(--dim)}
.lookup .btn{--i:20px;width:52px;min-height:48px;padding:0}
.prof-empty{padding:clamp(16px,2.4vw,24px);display:grid;gap:12px;color:var(--soft)}
.chip.pick{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;color:var(--text);text-decoration:none;transition:--px-fill .12s,--px-edge .12s}
.chip.pick:hover{--px-fill:var(--btn-hover);--px-edge:var(--btn-edge-hover)}
.chip.pick img{width:22px;height:22px;image-rendering:pixelated}
.prof{padding:clamp(16px,2.6vw,28px);display:grid;gap:22px}
.prof-head{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.prof-av{width:96px;height:96px;image-rendering:pixelated;box-shadow:0 0 0 3px var(--ink),0 0 0 6px var(--rc)}
.prof-id{flex:1;min-width:200px;display:grid;gap:6px}
.prof-id h2{font-size:clamp(28px,3.6vw,40px);overflow-wrap:anywhere}
.prof-rank{display:flex;align-items:center;gap:12px}
.prof-rank .badge{width:44px;height:44px;font-size:20px}
.prof-rank b{display:block;font:400 18px/1.2 var(--font-pixel);color:var(--rc)}
.prof-rank span{font-size:13.5px;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.stat{display:grid;gap:6px;padding:12px 14px}
.stat b{font:400 20px/1.1 var(--font-pixel);color:var(--text)}
.pm-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.pm-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:8px 14px 8px 8px}
.pm-row .tile{width:40px;height:40px;--i:19px}
.pm-name{min-width:0;font-weight:600}
.pm-name small{display:block;font-size:12.5px;font-weight:400;color:var(--muted)}
@media (max-width:560px){.pm-row{grid-template-columns:40px minmax(0,1fr) auto}.pm-row .rk{display:none}}

/* ---------- News ---------- */
.news{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.card{display:flex;flex-direction:column}
.card canvas{display:block;width:calc(100% - 6px);margin:3px 3px 0;aspect-ratio:16/9;height:auto;max-width:100%;border-radius:6px}
.card-b{padding:16px 18px 20px;display:grid;gap:8px;align-content:start}
.card-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* The tag is a pill in its own colour: a label, not a button. */
.tag{--r:999px;--px-fill:color-mix(in srgb,var(--tc) 14%,var(--panel));--px-edge:color-mix(in srgb,var(--tc) 50%,var(--panel));padding:5px 10px;font:400 10.5px/1 var(--font-pixel);letter-spacing:.16em;text-transform:uppercase;color:var(--tc);white-space:nowrap}
.card time{font-size:12.5px;color:var(--muted)}
.card h3{font:700 18px/1.3 var(--font-body);text-wrap:balance}
.card p{font-size:14.5px;color:var(--muted);line-height:1.55}
@media (max-width:1080px){.news{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.news{grid-template-columns:1fr}}

/* ---------- Commands ---------- */
.cmds{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cmd{display:flex;align-items:center;gap:14px;padding:10px 16px 10px 10px}
.cmd code{--px-fill:var(--well);--px-edge:var(--btn-edge);flex:none;min-width:min(212px,46%);padding:8px 10px;font:400 12.5px/1.2 var(--font-pixel);color:var(--text);overflow-wrap:anywhere}
.cmd span{font-size:14.5px;color:var(--soft);min-width:0}
@media (max-width:900px){.cmds{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
/* The logo, the text, then the Discord and email buttons stacked beside them. .cta measures its own width (a size
   container): once the three no longer fit in a row, the buttons move to a row of their own, side by side; narrower
   still, the logo and text each take a row; and on a phone, where two buttons can't fit side by side, they stack again. */
.cta{container-type:inline-size;flex:1 1 100%;padding:clamp(20px,3.4vw,36px);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(18px,3vw,36px)}
.cta img{width:clamp(96px,12vw,150px);height:auto}
.cta-t{min-width:0;display:grid;gap:8px}
.cta-t h2{font-size:clamp(26px,3.4vw,38px)}
.cta-t p{color:var(--muted)}
.cta-t p .mono{color:var(--text)}
.cta-a{display:grid;gap:10px}
@container (max-width:760px){
  .cta-t{grid-column:2 / -1}
  .cta-a{grid-column:1 / -1;grid-auto-flow:column;grid-auto-columns:1fr}
}
@container (max-width:480px){.cta img,.cta-t{grid-column:1 / -1}}
@container (max-width:370px){.cta-a{grid-auto-flow:row}}
.foot{padding-block:clamp(40px,6vw,72px) 36px;background:var(--foot);border-top:1px solid var(--edge)}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:24px}
.foot-brand{display:grid;gap:8px}
.foot-brand .label{letter-spacing:.24em;color:var(--dim)}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 22px}
.foot-links a{color:var(--muted);text-decoration:none;font-size:14.5px}
.foot-links a:hover{color:var(--text)}
.legal{grid-column:1 / -1;text-align:center;font-size:12.5px;color:var(--dim)}

/* ---------- Store ---------- */
/* Each rank card has a band in its colour (--rc, lighter --rc-hi), with the logo's two sharp peaks cut into its foot like
   the podium ribbons. The featured rank gets a border in its colour and the wood Buy button. */
.ranks-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.rank-card{display:flex;flex-direction:column}
.rank-card.featured{--px-edge:var(--rc);--bw:2px}
.rank-band{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;height:96px;padding:16px 18px;border-radius:7px 7px 0 0;
  background:linear-gradient(180deg,var(--rc-hi),var(--rc));clip-path:polygon(0 0,100% 0,100% 100%,74% 64%,66% 72%,50% 48%,0 100%)}
.rank-tag{font:400 22px/1 var(--font-pixel);color:#fff;text-shadow:0 3px 1px #232323}
.rank-body{display:grid;gap:16px;padding:6px 20px 20px}
.rank-price b{display:block;font:800 34px/1 var(--font-body);color:var(--text)}
.rank-price span{display:block;margin-top:6px;font-size:13px;color:var(--muted)}
.perks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.perks li{--i:16px;display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.45;color:var(--soft)}
.perks .lucide{margin-top:2px;color:var(--rc)}
.rank-buy{width:100%}
.cos-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cos-card{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:10px}
.cos-card .tile{color:var(--rc)}
.cos-t{min-width:0}
.cos-t b{display:block;font-size:15px;font-weight:600;line-height:1.3}
.cos-t span{display:block;font-size:12.5px;color:var(--muted)}
.cos-price{font:400 14px/1 var(--font-pixel);color:var(--text);white-space:nowrap}
.faqs{display:grid;gap:8px}
.faq summary{--i:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;font-weight:600;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .lucide{color:var(--muted);transition:transform .2s}
.faq[open] summary .lucide{transform:rotate(180deg)}
.faq p{padding:0 16px 16px;color:var(--muted);font-size:15px}
.faq a{color:var(--text)}
@media (max-width:1000px){.cos-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.ranks-grid{grid-template-columns:1fr}}
@media (max-width:640px){.cos-grid{grid-template-columns:1fr}}

/* ---------- Fog-in and other motion ---------- */
/* shared.js marks page items .fog, then adds .in each time one scrolls into view: it clears out of a light, bright haze
   and settles, items arriving together a beat apart (--fog-d). Once done the classes come off, so hover effects (the
   podium lift) work as normal; once an item is wholly out of view it is fogged again for next time. Without the script,
   or with reduced motion, nothing is hidden. */
@media (prefers-reduced-motion:no-preference){
  .fog{opacity:0;filter:blur(8px) brightness(1.3);transform:translateY(10px) scale(.985)}
  .fog.in{opacity:1;filter:blur(0) brightness(1);transform:none;
    transition:opacity .45s cubic-bezier(.2,.8,.2,1) var(--fog-d,0ms),filter .45s cubic-bezier(.2,.8,.2,1) var(--fog-d,0ms),transform .45s cubic-bezier(.2,.8,.2,1) var(--fog-d,0ms)}
  /* The duels panel's contents ease in when you switch mode. */
  .mode-main.swap>*{animation:swap .3s cubic-bezier(.2,.8,.2,1)}
}
@keyframes swap{from{opacity:.3;filter:blur(3px);transform:translateY(4px)}}
@media print{.fog{opacity:1;filter:none;transform:none}}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}