/* =========================================================
   WARTIME — brand stylesheet (single source of truth)
   Identity: obsidian stone, cold silver, ivory type, restrained crimson.
   Layout: cinematic castle hero (asymmetric, copy left) → streams → rating → promos → start → footer.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  color-scheme:dark;

  /* palette (brand brief §2) */
  --wt-bg:#090A0D;
  --wt-bg-secondary:#101217;
  --wt-surface:#171A20;
  --wt-surface-hover:#20242C;
  --wt-border:#2B3039;
  --wt-border-strong:#454B56;
  --wt-silver:#AEB6C2;
  --wt-silver-bright:#DCE1E8;
  --wt-text:#F0F0EC;
  --wt-text-secondary:#A0A5AE;
  --wt-text-muted:#777E89;
  --wt-crimson:#8E202B;
  --wt-crimson-hover:#B12B38;
  --wt-crimson-active:#761A24;
  --wt-crimson-deep:#4B1119;
  --wt-success:#6FA88A;
  --wt-warning:#D4A65A;
  --wt-danger:#D45B63;

  /* semantic aliases used by components */
  --wt-accent:var(--wt-crimson);
  --wt-accent-hover:var(--wt-crimson-hover);
  --wt-focus:var(--wt-silver-bright);

  /* type */
  --wt-font-display:"Bona Nova SC","Cormorant Garamond",Georgia,"Times New Roman",serif; /* Cyrillic display: wedge serifs echo the logo */
  --wt-font-ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wt-fs-hero:clamp(3.5rem,8vw,7.5rem);
  --wt-fs-h2:clamp(1.75rem,3.4vw,3.25rem);
  --wt-fs-h3:1.375rem;
  --wt-fs-body:1rem;
  --wt-fs-label:.75rem;

  /* spacing (4px scale) */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:96px;--sp-10:128px;

  /* shape + motion */
  --wt-radius-sm:2px;
  --wt-radius-md:4px;
  --wt-transition-fast:180ms;
  --wt-transition-base:240ms;
  --wt-ease:cubic-bezier(.2,.8,.2,1);
  --wt-content-width:1280px;
  --wt-header-h:68px;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--wt-header-h) + var(--sp-3))}
body{margin:0;font:400 var(--wt-fs-body)/1.6 var(--wt-font-ui);font-variant-numeric:lining-nums;color:var(--wt-text-secondary);background:var(--wt-bg);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
h1,h2,h3,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--wt-focus);outline-offset:3px;border-radius:var(--wt-radius-sm)}
::selection{background:var(--wt-crimson);color:var(--wt-text)}
.wrap{max-width:var(--wt-content-width);margin:0 auto;padding-left:max(var(--sp-6),env(safe-area-inset-left,0px));padding-right:max(var(--sp-6),env(safe-area-inset-right,0px))}
.label{font:600 var(--wt-fs-label)/1.3 var(--wt-font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--wt-text-muted)}

/* ---------- 3. Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-3);height:48px;padding:0 var(--sp-6);border:1px solid transparent;border-radius:var(--wt-radius-sm);
  font:600 .8125rem/1 var(--wt-font-ui);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;-webkit-tap-highlight-color:transparent;
  transition:background-color var(--wt-transition-base) ease,border-color var(--wt-transition-base) ease,color var(--wt-transition-fast) ease}
.btn svg{width:16px;height:16px;fill:currentColor;flex:none}
.btn__arrow{transition:transform var(--wt-transition-fast) ease}
.btn:hover .btn__arrow,.btn:focus-visible .btn__arrow{transform:translateX(4px)}
.btn:focus-visible{outline:2px solid var(--wt-focus);outline-offset:3px}
.btn--primary{color:var(--wt-text);background-color:var(--wt-crimson);border-color:var(--wt-crimson)}
.btn--primary:hover{background-color:var(--wt-crimson-hover);border-color:var(--wt-crimson-hover)}
.btn--primary:active{background-color:var(--wt-crimson-active);border-color:var(--wt-crimson-active)}
.btn--secondary{color:var(--wt-silver-bright);background-color:transparent;border-color:var(--wt-border-strong)}
.btn--secondary:hover{background-color:var(--wt-surface-hover);border-color:var(--wt-silver)}
.btn--secondary:active{background-color:var(--wt-surface)}
.btn[disabled],.btn[aria-disabled="true"]{color:var(--wt-text-muted);background-color:var(--wt-surface);border-color:var(--wt-border);pointer-events:none}
.btn--sm{height:36px;padding:0 var(--sp-4);font-size:.75rem;letter-spacing:.12em}
.btn--lg{height:56px;padding:0 var(--sp-7);font-size:.875rem}
.btn--block{display:flex;width:100%}

/* text link with arrow */
.more{display:inline-flex;align-items:center;gap:var(--sp-2);font:600 .8125rem/1 var(--wt-font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--wt-silver);padding:var(--sp-2) 0;transition:color var(--wt-transition-fast) ease}
.more::after{content:"→";display:inline-block;transition:transform var(--wt-transition-fast) ease}
.more:hover{color:var(--wt-text)}
.more:hover::after{transform:translateX(4px)}

/* ---------- 4. Navigation ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);background-color:rgba(9,10,13,0);border-bottom:1px solid transparent;transition:background-color var(--wt-transition-base) ease,border-color var(--wt-transition-base) ease}
.top.is-scrolled{background-color:rgba(9,10,13,.94);border-bottom-color:var(--wt-border)}
.top__row{max-width:1440px;margin:0 auto;height:var(--wt-header-h);display:flex;align-items:center;gap:var(--sp-6);padding-left:max(var(--sp-6),env(safe-area-inset-left,0px));padding-right:max(var(--sp-6),env(safe-area-inset-right,0px))}
.brand{display:flex;align-items:center;gap:var(--sp-3);flex:none}
.brand__logo{display:block;width:auto;height:28px}
.top__nav{display:flex;gap:var(--sp-1);margin-right:auto}
.top__nav a{position:relative;padding:var(--sp-3) var(--sp-3);font:500 .75rem/1 var(--wt-font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--wt-silver);transition:color var(--wt-transition-fast) ease}
.top__nav a::after{content:"";position:absolute;left:var(--sp-3);right:var(--sp-3);bottom:4px;height:1px;background:var(--wt-crimson-hover);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--wt-transition-base) ease}
.top__nav a:hover{color:var(--wt-text)}
.top__nav a:hover::after,.top__nav a:focus-visible::after,.top__nav a[aria-current="page"]::after{transform:scaleX(1)}
.top__right{display:flex;align-items:center;gap:var(--sp-4);margin-left:auto}
.langs{display:flex;gap:var(--sp-1)}
.langs a{padding:var(--sp-2);font:500 .75rem/1 var(--wt-font-ui);letter-spacing:.12em;color:var(--wt-text-muted);transition:color var(--wt-transition-fast) ease}
.langs a:hover{color:var(--wt-text)}
.socials{display:flex;gap:var(--sp-1)}
.socials a{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--wt-radius-sm);transition:background-color var(--wt-transition-fast) ease}
.socials svg{width:16px;height:16px;fill:var(--wt-silver);transition:fill var(--wt-transition-fast) ease}
.socials a:hover{background-color:var(--wt-surface-hover)}
.socials a:hover svg{fill:var(--wt-text)}

/* ---------- 5. Hero ----------
   Castle background scales 1 → 1.04 over 25s (once). Copy enters with a short stagger (< 1s total).
   Desktop pointer parallax: background up to 6px, emblem up to 4px the other way. */
.hero{--px:0;--py:0;position:relative;isolation:isolate;overflow:hidden;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:calc(var(--wt-header-h) + var(--sp-6)) 0 var(--sp-8)}
.hero__bg{position:absolute;inset:-12px;z-index:-2;transform:translate3d(calc(var(--px) * -6px),calc(var(--py) * -6px),0);transition:transform .6s ease-out}
.hero__bg picture,.hero__bg img{display:block;width:100%;height:100%}
.hero__bg img{object-fit:cover;object-position:62% 40%;transform-origin:60% 40%;animation:wt-hero-zoom 25s ease-out forwards}
@keyframes wt-hero-zoom{from{transform:scale(1)}to{transform:scale(1.04)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(90deg,rgba(9,10,13,.92) 0%,rgba(9,10,13,.7) 32%,rgba(9,10,13,.18) 60%,rgba(9,10,13,0) 78%),
  linear-gradient(180deg,rgba(9,10,13,.45) 0%,rgba(9,10,13,0) 20%,rgba(9,10,13,0) 72%,var(--wt-bg) 100%)}
.hero__inner{width:100%}
.hero__copy{display:flex;flex-direction:column;align-items:flex-start;max-width:600px}
.h1{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-5)}
.hero__logo-wrap{display:block;transform:translate3d(calc(var(--px) * 4px),calc(var(--py) * 4px),0);transition:transform .6s ease-out}
.h1__logo{display:block;width:min(620px,100%);height:auto;aspect-ratio:1400/350;filter:drop-shadow(0 10px 24px rgba(0,0,0,.6))}
.h1__kicker{font:600 .8125rem/1.4 var(--wt-font-ui);letter-spacing:.22em;text-transform:uppercase;color:var(--wt-silver)}

/* entrance: opacity + 14px rise, staggered 90ms; CTAs are clickable immediately */
[data-intro]{animation:wt-intro .6s var(--wt-ease) both;animation-delay:calc(var(--n,0) * 90ms)}
@keyframes wt-intro{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* countdown: numerals separated by hairlines, no boxes */
.launch{display:flex;flex-direction:column;align-items:flex-start;margin-top:var(--sp-6)}
.launch__cells{display:flex}
.launch__cell{display:flex;flex-direction:column;align-items:center;min-width:88px;padding:0 var(--sp-5)}
.launch__cell:first-child{padding-left:0;align-items:flex-start}
.launch__cell + .launch__cell{border-left:1px solid var(--wt-border-strong)}
.launch__cell b{font:700 2.875rem/1 var(--wt-font-display);font-variant-numeric:lining-nums tabular-nums;color:var(--wt-text)}
.launch__cell span{margin-top:var(--sp-2);font:600 .6875rem/1 var(--wt-font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--wt-text-muted)}
.launch__when{margin-top:var(--sp-4);font-size:.875rem;color:var(--wt-text-secondary)}
.launch__when time{color:var(--wt-text);font-weight:600}
.launch__live{display:none;font:700 2rem/1.15 var(--wt-font-display);color:var(--wt-text)}
.launch.is-live .launch__cells,.launch.is-live .launch__when{display:none}
.launch.is-live .launch__live{display:block}

.cta{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}

/* server metadata: one quiet row, no cards */
.facts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-5);margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px solid var(--wt-border)}
.fact{display:flex;align-items:baseline;gap:var(--sp-2)}
.fact b{font:600 1rem/1 var(--wt-font-ui);color:var(--wt-text)}
.fact span{font:600 var(--wt-fs-label)/1 var(--wt-font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--wt-text-muted)}
.srv{display:flex;align-items:center;gap:var(--sp-2)}
.srv__ring{width:22px;height:22px;transform:rotate(-90deg)}
.srv__ring circle{fill:none;stroke:var(--wt-border-strong);stroke-width:5}
.srv__ring .srv__arc{stroke:var(--wt-success);stroke-linecap:round;stroke-dasharray:119.4;stroke-dashoffset:119.4}
.srv__txt{display:flex;align-items:baseline;gap:var(--sp-2);line-height:1}
.srv__name{font:600 .875rem/1 var(--wt-font-ui);color:var(--wt-text)}
.srv__on{font-size:.8125rem;color:var(--wt-text-secondary);font-variant-numeric:tabular-nums}
.srv__on b{color:var(--wt-text);font-weight:600}

/* CMS announcement */
.note{position:relative;width:100%;max-width:560px;margin-top:var(--sp-5);padding:var(--sp-3) var(--sp-8) var(--sp-3) var(--sp-4);border-left:2px solid var(--wt-crimson-hover);background:rgba(23,26,32,.82)}
.note__title{font:600 var(--wt-fs-label)/1.3 var(--wt-font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--wt-text-secondary)}
.note__text{margin-top:var(--sp-1);font-size:.9375rem;color:var(--wt-text)}
.note__text p{margin:0}
.note__x{position:absolute;top:var(--sp-2);right:var(--sp-2);width:32px;height:32px;color:var(--wt-text-muted);font-size:.8125rem;border-radius:var(--wt-radius-sm);transition:color var(--wt-transition-fast) ease,background-color var(--wt-transition-fast) ease}
.note__x:hover{color:var(--wt-text);background-color:var(--wt-surface-hover)}
.note.is-gone{display:none}

/* ---------- 6. Sections ---------- */
.sec{position:relative;padding:var(--sp-9) 0}
.sec--alt{background:var(--wt-bg-secondary)}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-7)}
.h2{display:flex;align-items:center;gap:var(--sp-3);font:700 var(--wt-fs-h2)/1.05 var(--wt-font-display);letter-spacing:.03em;text-transform:uppercase;color:var(--wt-text);text-wrap:balance}
.head__side{display:flex;align-items:center;gap:var(--sp-2)}
.dot-live{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--wt-crimson-hover)}
.arr{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--wt-border-strong);border-radius:var(--wt-radius-sm);font-size:1.25rem;line-height:1;color:var(--wt-silver);transition:background-color var(--wt-transition-fast) ease,border-color var(--wt-transition-fast) ease,color var(--wt-transition-fast) ease}
.arr:hover{background-color:var(--wt-surface-hover);border-color:var(--wt-silver);color:var(--wt-text)}

/* section reveal: content rises 20px and fades in once (JS adds .is-in) */
html.js .sec>.wrap,html.js .foot>.wrap{opacity:0;transform:translateY(20px);transition:opacity .7s var(--wt-ease),transform .7s var(--wt-ease)}
html.js .sec.is-in>.wrap,html.js .foot.is-in>.wrap{opacity:1;transform:none}

/* streams */
.streams{display:flex;gap:var(--sp-4);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.streams::-webkit-scrollbar{display:none}
.streams li{flex:0 0 min(440px,82vw);aspect-ratio:16/9;max-width:100%;scroll-snap-align:start;border-radius:var(--wt-radius-md);overflow:hidden;background:#000}
.streams iframe{width:100%;height:100%;border:0;display:block}
.streams__empty{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;padding:var(--sp-5) 0;border-top:1px solid var(--wt-border);border-bottom:1px solid var(--wt-border);color:var(--wt-text-secondary)}
.streams__empty b{color:var(--wt-text);font-weight:600}
.has-streams .streams__empty,.no-streams #content-slider,.no-streams .arr{display:none}

/* rating */
.tabs{display:flex;gap:var(--sp-6);overflow-x:auto;scrollbar-width:none;margin-bottom:var(--sp-7);border-bottom:1px solid var(--wt-border)}
.tab{position:relative;flex:none;padding:var(--sp-3) 0;font:600 .8125rem/1 var(--wt-font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--wt-text-muted);transition:color var(--wt-transition-fast) ease}
.tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--wt-crimson-hover);transform:scaleX(0);transition:transform var(--wt-transition-base) ease}
.tab:hover{color:var(--wt-text)}
.tab.is-on{color:var(--wt-text)}
.tab.is-on::after{transform:scaleX(1)}
.board__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--sp-8);align-items:end}
.podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:var(--sp-3);min-height:260px}
.pod{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-2);min-width:0}
.pod__crown{display:none}
.pod__name{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);max-width:100%;font:600 1rem/1.2 var(--wt-font-ui);color:var(--wt-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod__name img,.lb__crests img{height:12px;width:auto;image-rendering:pixelated;display:inline-block}
.pod__val{font-size:.8125rem;color:var(--wt-text-muted);font-variant-numeric:tabular-nums}
.pod__block{width:100%;display:grid;place-items:center;background:var(--wt-surface);border-top:1px solid var(--wt-border-strong);font:700 2.5rem/1 var(--wt-font-display);color:var(--wt-silver)}
.pod--1 .pod__block{height:150px;font-size:3.5rem;color:var(--wt-text);background:linear-gradient(180deg,var(--wt-crimson-deep),var(--wt-surface) 70%);border-top:2px solid var(--wt-crimson-hover)}
.pod--2 .pod__block{height:108px}
.pod--3 .pod__block{height:78px}
.lb{counter-reset:r 3;align-self:start}
.lb[hidden]{display:none}
.lb::before{content:attr(data-col);display:block;text-align:right;font:600 var(--wt-fs-label)/1 var(--wt-font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--wt-text-muted);padding:0 0 var(--sp-3)}
.lb li{counter-increment:r;display:grid;grid-template-columns:32px auto minmax(0,1fr) auto;align-items:center;gap:var(--sp-2);padding:var(--sp-3) 0;border-top:1px solid var(--wt-border);font-size:.9375rem}
.lb li:nth-child(-n+3){display:none}
.lb li::before{content:counter(r);font:600 .875rem/1 var(--wt-font-ui);color:var(--wt-text-muted);font-variant-numeric:tabular-nums}
.lb__crests{display:flex;gap:1px}
.lb__name{font-weight:500;color:var(--wt-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb__val{font-weight:600;color:var(--wt-silver-bright);font-variant-numeric:tabular-nums}
.lb--short::after{content:attr(data-more);display:block;padding:var(--sp-4) 0;font-size:.875rem;color:var(--wt-text-muted);border-top:1px solid var(--wt-border)}

/* promos: imagery first, no frames */
.promos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6)}
.promo{display:flex;flex-direction:column;gap:var(--sp-4)}
.promo__media{display:block;overflow:hidden;border-radius:var(--wt-radius-md);background:var(--wt-surface)}
.promo img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .6s var(--wt-ease),filter var(--wt-transition-base) ease;filter:saturate(.85)}
.promo:hover img{transform:scale(1.03);filter:saturate(1)}
.promo h3{font:700 var(--wt-fs-h3)/1.2 var(--wt-font-display);color:var(--wt-text);transition:color var(--wt-transition-fast) ease}
.promo:hover h3{color:var(--wt-silver-bright)}
.promo__desc{margin-top:var(--sp-2);font-size:.9375rem;color:var(--wt-text-secondary);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.promo__desc p{margin:0}

/* start: three steps on hairlines */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--wt-border)}
.steps li{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-4);padding:var(--sp-6) var(--sp-6) var(--sp-6) 0}
.steps li + li{padding-left:var(--sp-6);border-left:1px solid var(--wt-border)}
.steps__n{font:700 3rem/1 var(--wt-font-display);color:var(--wt-silver)}
.steps h3{font:700 var(--wt-fs-h3)/1.2 var(--wt-font-display);color:var(--wt-text)}
.steps p{font-size:.9375rem;color:var(--wt-text-secondary)}

/* ---------- 7. Footer: one quiet row + legal line ---------- */
.foot{background:var(--wt-bg-secondary);padding:var(--sp-6) 0 var(--sp-5);border-top:1px solid var(--wt-border)}
.foot__row{display:flex;align-items:center;gap:var(--sp-5)}
.foot__brand .brand__logo{height:22px;opacity:.85;transition:opacity var(--wt-transition-fast) ease}
.foot__brand:hover .brand__logo{opacity:1}
.foot__links{flex:1 1 0;min-width:0;display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4)}
.foot__links a{font:500 .6875rem/1.4 var(--wt-font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--wt-text-muted);transition:color var(--wt-transition-fast) ease}
.foot__links a:hover{color:var(--wt-text)}
.anons{display:flex;gap:var(--sp-2)}
.anons a{display:block;border-radius:var(--wt-radius-sm);overflow:hidden;opacity:.55;filter:grayscale(.6);transition:opacity var(--wt-transition-fast) ease,filter var(--wt-transition-fast) ease}
.anons a:hover{opacity:1;filter:none}
.anons img{height:40px;width:auto}
.foot__legal{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--wt-border);font-size:.6875rem;line-height:1.5;color:var(--wt-text-muted)}

/* ---------- 8. Mobile action bar ---------- */
.dock{display:none}

/* ---------- 9. Modal ---------- */
.modal{padding:0;border:0;background:transparent;color:var(--wt-text-secondary);max-width:min(480px,calc(100vw - 32px));width:100%}
.modal::backdrop{background:rgba(5,6,8,.78)}
.modal[open]{animation:wt-intro .3s var(--wt-ease)}
.modal__box{position:relative;padding:var(--sp-6);background:var(--wt-surface);border:1px solid var(--wt-border);border-radius:var(--wt-radius-md)}
.modal__x{position:absolute;top:var(--sp-3);right:var(--sp-3);width:36px;height:36px;border-radius:var(--wt-radius-sm);color:var(--wt-text-muted);transition:color var(--wt-transition-fast) ease,background-color var(--wt-transition-fast) ease}
.modal__x:hover{color:var(--wt-text);background-color:var(--wt-surface-hover)}
.modal__title{font:700 2rem/1.1 var(--wt-font-display);text-transform:uppercase;color:var(--wt-text);margin-bottom:var(--sp-5)}
.modal__group,.modal .l2-modal-files__group-title{font:600 var(--wt-fs-label)/1 var(--wt-font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--wt-text-muted);margin:var(--sp-5) 0 var(--sp-3)}
.modal__item,.modal .l2-modal-files__item{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border:1px solid var(--wt-border);border-radius:var(--wt-radius-sm);margin-bottom:var(--sp-2)}
.modal__item div{display:flex;flex-direction:column}
.modal__item b{color:var(--wt-text);font-weight:600}
.modal__item span{font-size:.8125rem;color:var(--wt-text-secondary)}

/* ---------- 10. Responsive ---------- */
@media (max-width:1080px){
  .top__nav{display:none}
}
@media (max-width:900px){
  .board__body{grid-template-columns:1fr;gap:var(--sp-6)}
  .promos{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .steps li,.steps li + li{padding:var(--sp-5) 0;border-left:0;border-bottom:1px solid var(--wt-border)}
  .steps li{flex-direction:row;align-items:center;gap:var(--sp-5)}
  .steps li .btn{margin-left:auto}
  .foot__row{gap:var(--sp-4);flex-wrap:wrap;justify-content:space-between}
  .foot__links{order:3;width:100%;margin-right:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3) var(--sp-4)}
}
@media (max-width:640px){
  :root{--wt-header-h:58px}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  .wrap,.top__row{padding-left:max(var(--sp-4),env(safe-area-inset-left,0px));padding-right:max(var(--sp-4),env(safe-area-inset-right,0px))}
  .top__row{gap:var(--sp-3)}
  .brand__logo{height:24px}
  .socials,.top__cta{display:none}

  .hero{align-items:flex-end;min-height:auto;padding:calc(var(--wt-header-h) + 24vh) 0 var(--sp-7);text-align:center}
  .hero__bg img{object-position:50% 0;transform-origin:50% 0}
  .hero::after{background:linear-gradient(180deg,rgba(9,10,13,.25) 0%,rgba(9,10,13,0) 16%,rgba(9,10,13,.55) 40%,rgba(9,10,13,.94) 60%,var(--wt-bg) 100%)}
  .hero__copy{align-items:center;max-width:none}
  .h1{align-items:center;margin-top:var(--sp-4)}
  .h1{gap:var(--sp-4)}
  .h1__logo{width:min(88vw,420px)}
  .h1__kicker{font-size:.6875rem;letter-spacing:.18em}
  .launch{align-items:center;margin-top:var(--sp-6);width:100%}
  .launch__cells{width:100%;justify-content:center}
  .launch__cell{flex:1;min-width:0;padding:0 var(--sp-2)}
  .launch__cell:first-child{padding-left:var(--sp-2);align-items:center}
  .launch__cell b{font-size:2.5rem}
  .launch__cell span{font-size:.625rem;letter-spacing:.12em}
  .cta{width:100%;margin-top:var(--sp-6)}
  .cta .btn{flex:1 1 140px;padding:0 var(--sp-4)}
  .facts{justify-content:center;width:100%}
  .note{text-align:left}

  .sec{padding:var(--sp-8) 0}
  .head{margin-bottom:var(--sp-6)}
  .tabs{gap:var(--sp-5);margin-bottom:var(--sp-6)}
  .podium{min-height:220px}
  .pod--1 .pod__block{height:118px}
  .pod--2 .pod__block{height:84px}
  .pod--3 .pod__block{height:60px}
  .promos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:var(--sp-4);margin:0 calc(var(--sp-4) * -1);padding:0 var(--sp-4);scroll-padding:0 var(--sp-4)}
  .promos::-webkit-scrollbar{display:none}
  .promo{flex:0 0 80%;scroll-snap-align:start}
  .steps__n{font-size:2.25rem}

  .dock{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:var(--sp-2);
    padding:var(--sp-2) max(var(--sp-3),env(safe-area-inset-right,0px)) calc(var(--sp-2) + env(safe-area-inset-bottom,0px)) max(var(--sp-3),env(safe-area-inset-left,0px));
    background:rgba(9,10,13,.96);border-top:1px solid var(--wt-border)}
  .dock a{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);height:48px;border:1px solid var(--wt-border-strong);border-radius:var(--wt-radius-sm);font:600 .75rem/1 var(--wt-font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--wt-silver-bright);transition:background-color var(--wt-transition-fast) ease}
  .dock a:active{background-color:var(--wt-surface-hover)}
  .dock .dock__play{color:var(--wt-text);background-color:var(--wt-crimson);border-color:var(--wt-crimson)}
  .dock .dock__play:active{background-color:var(--wt-crimson-active)}
  .dock svg{width:14px;height:14px;fill:currentColor}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  html.js .sec>.wrap,html.js .foot>.wrap{opacity:1!important;transform:none!important}
  .hero__bg,.hero__logo-wrap{transform:none!important}
}

/* server switcher (shown only when more than one server exists) */
.wt-select{height:36px;padding:0 var(--sp-6) 0 var(--sp-3);border:1px solid var(--wt-border-strong);border-radius:var(--wt-radius-sm);background:var(--wt-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23AEB6C2'/%3E%3C/svg%3E") no-repeat right 12px center;color:var(--wt-text);font:500 .8125rem/1 var(--wt-font-ui);appearance:none;cursor:pointer;transition:border-color var(--wt-transition-fast) ease}
.wt-select:hover{border-color:var(--wt-silver)}
.wt-select:focus-visible{outline:2px solid var(--wt-focus);outline-offset:2px}

/* iOS: no auto-zoom on focus (Safari zooms when field text < 16px); pinch-zoom stays available */
@supports (-webkit-touch-callout: none) {
  html body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]),
  html body select, html body textarea, html body .choices__input { font-size: 16px !important; }
}
/* podium: joined ally+clan crest at 2x (stays pixel-crisp) */
.pod__name .wt-crest img{height:24px!important}
.lb__crests{gap:0}