/* Palette and type are the launcher's own (App.xaml / MainWindow.xaml) */
:root{
  color-scheme: dark;
  --ink:#07090b; --surface:#11151a; --raised:#1a2027; --deep:#0b0e12;
  --gold:#d7a64a; --gold-hi:#f0cf85; --gold-mute:#94713b; --gold-lo:#7a5a26;
  --ivory:#f3eee4; --soft:#d3cdc1; --muted:#9fa7af;
  --line:rgba(215,166,74,.28); --hair:rgba(243,238,228,.08);
  --rift:#a68cff; --ok:#8fcf6a;
  --display:"Cinzel", "Trajan Pro", Georgia, serif;
  --body:"Segoe UI", "Manrope", system-ui, sans-serif;
  --gutter:clamp(16px, 6vw, 96px);
  --ease:cubic-bezier(.2,.7,.2,1);
  /* launcher corner brackets */
  --c:var(--gold-mute); --cl:18px;
  --corners:
    linear-gradient(var(--c),var(--c)) left top/var(--cl) 1px no-repeat,
    linear-gradient(var(--c),var(--c)) left top/1px var(--cl) no-repeat,
    linear-gradient(var(--c),var(--c)) right top/var(--cl) 1px no-repeat,
    linear-gradient(var(--c),var(--c)) right top/1px var(--cl) no-repeat,
    linear-gradient(var(--c),var(--c)) left bottom/var(--cl) 1px no-repeat,
    linear-gradient(var(--c),var(--c)) left bottom/1px var(--cl) no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom/var(--cl) 1px no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom/1px var(--cl) no-repeat;
}
*{box-sizing:border-box}
html{background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--ivory);font:400 16px/1.6 var(--body);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--gold-hi);text-decoration:none}
button{font:inherit;color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:.04em;text-wrap:balance;margin:0}
.wrap{padding-inline:var(--gutter);max-width:1440px;margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.label{font:600 12px var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* launcher parts */
.frame{position:relative;background:var(--corners),linear-gradient(180deg,rgba(26,32,39,.92),rgba(17,21,26,.94));box-shadow:0 0 0 1px var(--hair) inset}
.dv{display:flex;align-items:center;gap:12px;color:var(--gold)}
.dv::before,.dv::after{content:"";height:1px;flex:1;max-width:120px;background:linear-gradient(90deg,transparent,var(--gold-mute))}
.dv::after{background:linear-gradient(90deg,var(--gold-mute),transparent)}
.dv i{width:8px;height:8px;border:1px solid var(--gold);transform:rotate(45deg)}
.dv.left{justify-content:flex-start}.dv.left::before{display:none}

/* the launcher's PLAY bar, as the site's main button */
.play{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:14px;height:62px;padding:0 44px;border:0;cursor:pointer;
  font:600 19px var(--display);letter-spacing:.08em;color:#2a1b08;
  background:linear-gradient(180deg,#eccb7c 0%,#d3a650 45%,#b4853a 100%);
  box-shadow:0 0 0 1px #f6dc9c inset,0 0 0 3px rgba(42,27,8,.55) inset,0 0 0 4px #9c7330 inset,0 14px 40px -12px rgba(215,166,74,.6);transition:transform .25s,box-shadow .35s,filter .3s}
.play::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 62%);transform:translateX(-120%)}
.play:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 0 0 1px #fff0c4 inset,0 0 0 3px rgba(42,27,8,.55) inset,0 0 0 4px #b98b3c inset,0 20px 60px -12px rgba(215,166,74,.8)}
.play:hover::before{transform:translateX(120%);transition:transform .9s var(--ease)}
.play .orn{width:9px;height:9px;border:1.5px solid #6d4c1b;transform:rotate(45deg);opacity:.8}
.ghostbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:62px;padding:0 30px;background:rgba(11,14,18,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font:600 15px var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--ivory);cursor:pointer;border:0;--c:var(--gold);--cl:12px;background-image:var(--corners);box-shadow:0 0 0 1px rgba(215,166,74,.3) inset;transition:box-shadow .3s,color .3s}
.ghostbtn:hover{color:var(--gold-hi);box-shadow:0 0 0 1px rgba(240,207,133,.75) inset}
.more{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 20px;font:600 13px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-hi);cursor:pointer;background:transparent;border:0;box-shadow:0 0 0 1px rgba(215,166,74,.4) inset;transition:box-shadow .3s,background .3s}
.more:hover{box-shadow:0 0 0 1px var(--gold-hi) inset;background:rgba(215,166,74,.08)}

/* nav in the launcher's header style */
.nav{position:fixed;left:0;right:0;top:0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:background .5s,transform .6s var(--ease),border-color .5s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(9,11,14,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:rgba(215,166,74,.18)}
.nav.hide{transform:translateY(-110%)}
.progress{position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi));transform-origin:left;transform:scaleX(var(--prog,0))}
.nav-in{height:84px;display:flex;align-items:center;gap:34px}
.brand{display:flex;align-items:center;gap:12px;background:none;border:0;padding:0;cursor:pointer;color:var(--ivory);text-align:left}
.brand img{width:46px;height:46px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))}
.brand b{display:block;font:700 22px/1 var(--display);letter-spacing:.08em}
.brand small{display:block;margin-top:4px;font:500 11px var(--display);letter-spacing:.14em;color:var(--gold)}
.links{display:flex;gap:28px;flex:1;font:500 14px var(--display);letter-spacing:.1em;text-transform:uppercase}
.links a{color:#c7c1b5;position:relative;padding-block:8px}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transition:transform .35s}
.links a:hover{color:var(--ivory)}.links a:hover::after,.links a.on::after{transform:scaleX(1)}
.links a.on{color:var(--gold-hi)}
.nav .ghostbtn{height:44px;padding:0 18px;font-size:13px}
.nav .play{height:44px;padding:0 22px;font-size:14px}

/* page cut */
.cut{position:fixed;inset:0;z-index:80;pointer-events:none}
.cut i{position:absolute;left:0;right:0;height:50.5%;background:#030405;transition:transform .5s cubic-bezier(.7,0,.3,1)}
.cut .ct{top:0;transform:translateY(-100%)}.cut .cb{bottom:0;transform:translateY(100%)}
.cut b{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;transform:scaleX(0);opacity:0;background:linear-gradient(90deg,transparent,rgba(240,207,133,.25) 20%,#fff3cf 50%,rgba(240,207,133,.25) 80%,transparent);box-shadow:0 0 24px 4px rgba(240,207,133,.5);transition:transform .45s var(--ease),opacity .3s}
.cut.closed i{transform:none}.cut.closed b{transform:scaleX(1);opacity:1;transition-delay:.3s}
.cut.opening i{transition-duration:.75s;transition-timing-function:cubic-bezier(.2,.8,.2,1)}
.cut.opening b{opacity:0;transform:scaleX(1.4);transition-delay:0s}
::view-transition-group(*){animation-duration:.85s;animation-timing-function:cubic-bezier(.3,.7,.1,1)}
.view[hidden]{display:none!important}

/* ================= THE VALLEY SCENE ================= */
.scene{position:relative;height:100vh;height:100svh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#0b0f14}
.world{position:absolute;left:50%;top:50%;width:calc(max(100vw,160vh) * 2.6);aspect-ratio:16/10;transform-origin:50% 50%;transform:translate(-50%,-50%) scale(.3846);will-change:transform}
.world > img.plate{position:absolute;inset:0;width:100%;height:100%}
.w{position:absolute}
/* positions are the login screen's own (Tools/LoginScreen, 3840x2400 master) */
.flame{mix-blend-mode:screen;opacity:0;-webkit-mask-image:linear-gradient(0deg,transparent 0%,#000 24%);mask-image:linear-gradient(0deg,transparent 0%,#000 24%)}
.flame.l{left:3.4375%;top:26%;width:5.99%;height:12%}
.flame.r{left:91.77%;top:27.917%;width:5.677%;height:10.917%}
.cage.l{left:2.8125%;top:23.833%;width:7.708%;height:15%}
.cage.r{left:90.104%;top:25.833%;width:7.917%;height:13.667%}
.cage img,.banner img{width:100%;height:100%}
.banner{transform-origin:50% 0;will-change:transform}
.banner.l{left:11.042%;top:2%;width:11.25%;height:55%}
.banner.r{left:76.979%;top:1.667%;width:12.917%;height:43.667%}
.torchglow{width:26%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;mix-blend-mode:screen;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(255,170,80,.36) 0%,rgba(255,120,40,.14) 32%,transparent 66%)}
.torchglow.l{left:6.4%;top:33%}.torchglow.r{left:94.6%;top:33.5%}
.rift{left:61.7%;top:8.7%;width:24%;aspect-ratio:2.4;transform:translate(-50%,-50%);border-radius:50%;mix-blend-mode:screen;pointer-events:none;
  background:radial-gradient(closest-side,rgba(200,180,255,.55),rgba(150,110,255,.2) 45%,transparent 75%);animation:rift 5.5s ease-in-out infinite}
@keyframes rift{0%,100%{opacity:.45;transform:translate(-50%,-50%) scale(.95)}50%{opacity:.9;transform:translate(-50%,-50%) scale(1.06)}}
.swirl{left:61.7%;top:8.7%;width:22%;aspect-ratio:2.4;transform:translate(-50%,-50%);border-radius:50%;mix-blend-mode:screen;pointer-events:none;opacity:.5;
  -webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent 100%);mask-image:radial-gradient(closest-side,#000 30%,transparent 100%)}
.swirl::before{content:"";position:absolute;left:0;right:0;top:50%;aspect-ratio:1;transform:translateY(-50%) scaleY(.42);border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(190,160,255,.28) 0deg 6deg,transparent 6deg 22deg);animation:spin 26s linear infinite}
@keyframes spin{to{transform:translateY(-50%) scaleY(.42) rotate(360deg)}}
.beam{left:63.9%;top:6%;width:.35%;height:15%;transform:translateX(-50%);mix-blend-mode:screen;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(230,215,255,.95) 20%,rgba(170,130,255,.7) 80%,transparent);filter:blur(1px);animation:beam 3.1s steps(1) infinite}
@keyframes beam{0%{opacity:.55}8%{opacity:1}11%{opacity:.4}14%{opacity:.9}40%{opacity:.65}62%{opacity:1}66%{opacity:.5}100%{opacity:.6}}
.flash{inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;background:radial-gradient(38% 30% at 62% 10%,rgba(220,205,255,.8),rgba(150,120,255,.2) 45%,transparent 75%)}
.stage.strike .flash{animation:flash 1.1s ease-out}
@keyframes flash{0%{opacity:0}5%{opacity:.9}12%{opacity:.15}19%{opacity:.7}40%,100%{opacity:0}}
.fog{position:absolute;left:-10%;width:220%;pointer-events:none;filter:blur(26px)}
.fog.f1{top:48%;height:36%;opacity:.5;background:radial-gradient(22% 40% at 12% 55%,rgba(150,170,185,.28),transparent 70%),radial-gradient(20% 36% at 36% 60%,rgba(150,170,185,.2),transparent 70%),radial-gradient(22% 40% at 62% 55%,rgba(150,170,185,.28),transparent 70%),radial-gradient(20% 36% at 86% 60%,rgba(150,170,185,.2),transparent 70%);animation:drift 70s linear infinite}
.fog.f2{bottom:-8%;height:34%;opacity:.75;background:radial-gradient(26% 50% at 18% 70%,rgba(10,13,17,.95),transparent 72%),radial-gradient(26% 50% at 46% 76%,rgba(10,13,17,.85),transparent 72%),radial-gradient(26% 50% at 70% 70%,rgba(10,13,17,.95),transparent 72%),radial-gradient(26% 50% at 98% 76%,rgba(10,13,17,.85),transparent 72%);animation:drift 44s linear infinite reverse}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-45%)}}
.shade{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(60% 55% at 50% 52%,rgba(7,9,11,.62),rgba(7,9,11,.2) 60%,transparent 80%),
  linear-gradient(180deg,rgba(7,9,11,.75) 0%,transparent 16%),
  linear-gradient(0deg,var(--ink) 0%,rgba(7,9,11,.4) 22%,transparent 40%),
  radial-gradient(130% 100% at 50% 45%,transparent 55%,rgba(0,0,0,.6) 100%)}
.dim{position:absolute;inset:0;pointer-events:none;opacity:0;background:rgba(7,9,11,.72)}
.hud{position:absolute;inset:0;z-index:5}
.hero{position:absolute;left:var(--gutter);right:var(--gutter);top:84px;bottom:calc(clamp(20px,4vh,40px) + 150px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;will-change:transform,opacity,filter}
.seal{position:relative;width:clamp(150px,20vh,230px);aspect-ratio:1;border-radius:50%;overflow:hidden}
.seal img{width:100%;height:100%}
.seal-wrap{filter:drop-shadow(0 12px 40px rgba(0,0,0,.75)) drop-shadow(0 0 30px rgba(215,166,74,.18))}
.seal::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(115deg,transparent 38%,rgba(255,240,200,.5) 50%,transparent 62%);mix-blend-mode:overlay;opacity:0;transform:translateX(-120%)}
.seal.glint::after{animation:glint 1.8s cubic-bezier(.3,.6,.2,1) forwards}
@keyframes glint{0%{opacity:1}100%{opacity:1;transform:translateX(120%)}}
.hero h1{font-size:clamp(34px,4.6vw,68px);line-height:1.08;text-shadow:0 4px 30px rgba(0,0,0,.8)}
.hero h1 span{display:inline-block;white-space:pre}
.hero .dv{width:min(420px,80%)}
.hero p{margin:0;max-width:36em;font-size:clamp(16px,1.3vw,19px);color:var(--soft);text-shadow:0 2px 16px rgba(0,0,0,.9)}
.ctas{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:8px}

.status{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(20px,4vh,40px);width:min(1100px,calc(100% - 2 * var(--gutter)));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));--cl:14px;will-change:opacity,transform}
.status.frame{background:var(--corners),rgba(14,18,23,.66);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.status > div{padding:16px 24px;display:flex;flex-direction:column;gap:2px;justify-content:center}
.status > div + div{border-left:1px solid var(--hair)}
.status b{font:600 24px/1.1 var(--display);color:var(--gold-hi);font-variant-numeric:tabular-nums}
.status small{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.status .svc{flex-direction:row;align-items:center;gap:14px}
.status .svc strong{display:block;font:600 16px var(--display);letter-spacing:.08em;color:var(--ok)}
.pulse{position:relative;width:11px;height:11px;border-radius:50%;background:var(--ok);flex:none}
.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ok);animation:ping 2s ease-out infinite}
@keyframes ping{from{transform:scale(1);opacity:.7}to{transform:scale(3.2);opacity:0}}

.rgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 56px}
.ri b{display:block;font:700 clamp(40px,4.8vw,72px)/1 var(--display);background:linear-gradient(180deg,#f7dc9a,var(--gold) 58%,var(--gold-lo));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.ri span{display:block;margin-top:10px;font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}
.lb{position:absolute;left:0;right:0;background:#030405;z-index:8;pointer-events:none;height:50.5%}
.lb.t{top:0;transform:translateY(calc(-100% + var(--bar,11vh) + var(--close,0) * 50vh))}
.lb.b{bottom:0;transform:translateY(calc(100% - var(--bar,11vh) - var(--close,0) * 50vh))}
.stage .flare{position:absolute;left:0;right:0;top:50%;height:2px;z-index:9;pointer-events:none;opacity:var(--flare,0);transform:scaleX(var(--flare,0));background:linear-gradient(90deg,transparent,#fff3cf 50%,transparent);box-shadow:0 0 24px 4px rgba(240,207,133,.5)}

.tile{opacity:0;-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)}
/* zoom quilt levels: each one repaints the centre half of the previous one */
.ql{position:absolute;left:0;top:0;width:1536px;height:1024px;max-width:none;transform-origin:0 0;opacity:0;visibility:hidden;will-change:transform,opacity;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);mask-composite:intersect}
/* GPU layers: the valley with generated detail, and the live canyon flight */
.plategl{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage.gl .world > img.plate{visibility:hidden}
/* opening shot */
.intro .world > img.plate{animation:plateIn 3.6s var(--ease) both}
@keyframes plateIn{from{filter:brightness(.25) saturate(.6)}to{filter:none}}
.intro .flame,.intro .torchglow{animation:ignite 1.4s 1.3s ease-out both}
@keyframes ignite{from{opacity:0;transform:scaleY(.3);transform-origin:50% 100%}to{opacity:1;transform:none}}
.lit .flame,.lit .torchglow{opacity:1}
.intro .seal{animation:sealIn 1.6s 1s var(--ease) both}
@keyframes sealIn{from{opacity:0;transform:scale(.86);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.intro .hero h1 span{animation:word .9s both;animation-delay:calc(1.8s + var(--i) * 80ms)}
@keyframes word{from{opacity:0;transform:translateY(14px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.intro .hero .dv{animation:line 1.1s 2.3s var(--ease) both}
@keyframes line{from{opacity:0;transform:scaleX(.2)}}
.intro .hero p{animation:up 1s 2.5s both}
.intro .ctas{animation:up 1s 2.7s both}
.intro .status{animation:upc 1.1s 3s both}
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes upc{from{opacity:0;transform:translate(-50%,22px)}to{opacity:1;transform:translateX(-50%)}}
.enter .world > img.plate{animation:plateIn 1.8s var(--ease) both}

/* ================= sections ================= */
section.block{padding-block:clamp(72px,10vw,120px) 0}
.head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin-bottom:40px}
.head h2{font-size:clamp(30px,3.4vw,46px)}
.head .dv{width:min(360px,70%)}
.armed .rv{transition:opacity 1.1s var(--ease),transform 1.2s var(--ease),filter 1.1s;transition-delay:var(--d,0s)}
.armed .rv:not(.in){opacity:0;transform:translateY(40px) scale(.985);filter:blur(5px)}
.armed .rv .dv::before,.armed .rv .dv::after{transition:transform 1.2s .3s var(--ease)}
.armed .rv:not(.in) .dv::before{transform:scaleX(0);transform-origin:right}
.armed .rv:not(.in) .dv::after{transform:scaleX(0);transform-origin:left}
.unveil{overflow:hidden}
.armed .unveil img{transition:clip-path 1.3s cubic-bezier(.7,0,.2,1),transform 2s var(--ease);transition-delay:calc(var(--d,0s) + .1s)}
.armed .rv:not(.in) .unveil img{clip-path:inset(0 0 100% 0);transform:scale(1.18)}

/* featured news, launcher style */
.feat{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px}
.carousel{position:relative;min-height:500px;overflow:hidden;--cl:22px;background:var(--corners),#0b0e12}
.carousel::after{content:"";position:absolute;inset:0;background:var(--corners);pointer-events:none;z-index:3}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
.slide.on{opacity:1;pointer-events:auto}
.slide .ph{position:absolute;inset:0;overflow:hidden}
.slide .ph img{width:100%;height:100%;object-fit:cover;transform:scale(1.02)}
.slide.on .ph img{animation:kb 9s ease-out both}
@keyframes kb{from{transform:scale(1.14)}to{transform:scale(1.02)}}
.slide .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,9,11,.95) 0%,rgba(7,9,11,.7) 40%,rgba(7,9,11,.1) 75%),linear-gradient(0deg,rgba(7,9,11,.6),transparent 40%)}
.slide .txt{position:absolute;left:clamp(24px,5vw,64px);right:clamp(24px,30%,420px);top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;gap:18px}
.slide h3{font-size:clamp(34px,4.4vw,62px);line-height:1.05;letter-spacing:.03em}
.slide p{margin:0;color:var(--soft);max-width:30em;font-size:17px}
.slide.on .txt > *{animation:up .9s both}
.slide.on .txt > *:nth-child(2){animation-delay:.1s}.slide.on .txt > *:nth-child(3){animation-delay:.2s}.slide.on .txt > *:nth-child(4){animation-delay:.3s}.slide.on .txt > *:nth-child(5){animation-delay:.4s}
.dots{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;gap:4px;z-index:2}
.dots button{width:28px;height:28px;background:none;border:0;cursor:pointer;display:grid;place-items:center;padding:0}
.dots button i{width:9px;height:9px;background:rgba(243,238,228,.35);transition:background .3s,transform .3s}
.dots button[aria-current="true"] i{background:var(--gold);transform:rotate(45deg) scale(1.1)}
.svcard{padding:34px 28px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;--cl:22px}
.svcard .ring{position:relative;width:150px;aspect-ratio:1;display:grid;place-items:center}
.svcard .ring::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(215,166,74,.35)}
.svcard .ring::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid transparent;border-top-color:var(--gold);animation:orbit 6s linear infinite}
@keyframes orbit{to{transform:rotate(360deg)}}
.svcard .ring img{width:112px;height:112px}
.svcard h3{font-size:22px;color:var(--ok);letter-spacing:.08em}
.svcard .dv{width:70%}
.svcard .pl{display:flex;gap:18px;align-items:center}
.svcard .pl svg{width:40px;height:40px;stroke:var(--soft)}
.svcard .pl b{display:block;font:600 30px/1 var(--display);color:var(--gold-hi)}
.svcard .pl small{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.panel{padding:34px;display:flex;flex-direction:column;gap:12px;--cl:18px}
.panel .ph2{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.panel h2{font-size:26px}
.ev{display:flex;align-items:center;gap:18px;padding:14px 16px;background:rgba(243,238,228,.025);box-shadow:0 0 0 1px var(--hair) inset;transition:background .3s,transform .3s}
.ev:hover{background:rgba(215,166,74,.06);transform:translateX(4px)}
.ev.now{box-shadow:0 0 0 1px rgba(143,207,106,.45) inset}
.date{width:60px;height:60px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(243,238,228,.05);box-shadow:0 0 0 1px var(--hair) inset}
.date small{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--muted)}
.date b{font:700 22px/1 var(--display)}
.ev .nm{flex:1}.ev .nm strong{display:block;font-size:16px}.ev .nm small{color:var(--muted);font-size:14px}
.pill{font:700 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:#10200a;background:var(--ok);padding:6px 10px;display:flex;align-items:center;gap:8px}
.pill i{width:6px;height:6px;border-radius:50%;background:#10200a;animation:blink 1.2s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.plr{display:grid;grid-template-columns:34px 44px 1fr auto;align-items:center;gap:16px;padding:9px 12px;transition:background .3s}
.plr:hover{background:rgba(243,238,228,.04)}
.plr .rk{font:700 20px var(--display);color:#c7c1b5;text-align:center}
.plr img{width:44px;height:44px;box-shadow:0 0 0 1px rgba(243,238,228,.2)}
.plr strong{font-size:16px}
.plr span{font-size:15px;color:var(--soft);font-variant-numeric:tabular-nums}
.plr.first{position:relative;overflow:hidden;background:linear-gradient(90deg,rgba(215,166,74,.16),transparent)}
.plr.first .rk{color:var(--gold-hi)}
.plr.first img{box-shadow:0 0 0 2px var(--gold),0 0 20px rgba(215,166,74,.5)}
.plr.first::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,235,190,.13) 50%,transparent 60%);animation:crown 4.5s ease-in-out infinite}
@keyframes crown{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

.acts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.actc{padding:28px;display:flex;flex-direction:column;gap:12px;color:var(--ivory);--cl:14px;transition:transform .45s var(--ease),box-shadow .4s,opacity 1.1s var(--ease),filter 1.1s}
.actc:hover{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(215,166,74,.5) inset,0 24px 50px -24px rgba(215,166,74,.45);--c:var(--gold-hi)}
.actc svg{width:32px;height:32px;stroke:var(--gold);transition:transform .5s var(--ease),filter .4s}
.actc:hover svg{transform:scale(1.12);filter:drop-shadow(0 0 10px rgba(240,207,133,.6))}
.actc strong{font:600 18px var(--display);letter-spacing:.04em}.actc span{font-size:15px;color:var(--muted)}

.finale{position:relative;margin-top:clamp(80px,10vw,130px);min-height:640px;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center}
.finale .bg{position:absolute;inset:-12% 0;background:url(../img/march.jpg) 60% 40%/cover no-repeat;will-change:transform}
.finale .veil{position:absolute;inset:0;background:radial-gradient(70% 70% at 50% 50%,rgba(7,9,11,.55),rgba(7,9,11,.2) 70%),linear-gradient(0deg,var(--ink) 0%,transparent 30%),linear-gradient(180deg,var(--ink) 0%,transparent 26%)}
.finale .copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:20px;max-width:760px;padding-inline:16px}
.finale h2{font-size:clamp(34px,4.6vw,64px);line-height:1.08;text-shadow:0 4px 30px rgba(0,0,0,.8)}
.finale p{margin:0;font-size:18px;color:var(--soft)}
.finale .dv{width:min(360px,70%)}

/* other pages */
.phead{position:relative;height:clamp(340px,46vh,480px);overflow:hidden;display:flex;align-items:flex-end}
.phead .bg{position:absolute;inset:-10% 0;background:url(../img/siege.jpg) center 35%/cover no-repeat;animation:kb2 24s ease-in-out infinite alternate}
@keyframes kb2{from{transform:scale(1.02)}to{transform:scale(1.12) translate(-1.5%,1%)}}
.phead .veil{position:absolute;inset:0;background:linear-gradient(0deg,var(--ink) 0%,rgba(7,9,11,.3) 60%,rgba(7,9,11,.7) 100%)}
.phead .wrap{position:relative;width:100%;padding-bottom:30px}
.phead h1{font-size:clamp(40px,5.5vw,76px)}
.tabs{position:relative;display:flex;gap:4px;margin-top:22px;border-bottom:1px solid var(--hair);overflow-x:auto;scrollbar-width:none}
.tabs button{height:50px;padding:0 18px;background:none;border:0;cursor:pointer;font:500 14px var(--display);letter-spacing:.1em;text-transform:uppercase;color:#c7c1b5;white-space:nowrap}
.tabs button:hover{color:var(--ivory)}.tabs button[aria-selected="true"]{color:var(--gold-hi)}
.tabs .ink{position:absolute;bottom:-1px;left:0;height:2px;background:var(--gold);transition:transform .55s var(--ease),width .55s var(--ease);box-shadow:0 0 12px rgba(215,166,74,.7)}
.podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:20px;align-items:end;padding-top:44px}
.pod{position:relative;padding:30px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;overflow:hidden;--cl:16px}
.pod img{width:64px;height:64px}
.pod .place{font:700 12px var(--body);letter-spacing:.2em;text-transform:uppercase}
.pod strong{font:600 22px var(--display)}
.pod small{color:var(--soft);font-size:15px;font-variant-numeric:tabular-nums}
.pod.g1{padding-block:44px;--c:var(--gold);box-shadow:0 0 0 1px rgba(215,166,74,.5) inset,0 30px 80px -30px rgba(215,166,74,.45)}
.pod.g1 img{width:78px;height:78px;box-shadow:0 0 0 2px var(--gold),0 0 36px rgba(215,166,74,.55)}
.pod.g1 .place{color:var(--gold-hi)}
.pod.g1::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,235,190,.12) 50%,transparent 60%);animation:crown 4.5s ease-in-out infinite}
.pod.g2 img{box-shadow:0 0 0 2px #b7bec0}.pod.g2 .place{color:#c9d0d2}
.pod.g3 img{box-shadow:0 0 0 2px #b8845a}.pod.g3 .place{color:#d9a47a}
.search{display:flex;align-items:center;gap:12px;width:min(420px,100%);height:52px;padding:0 16px;background:var(--surface);box-shadow:0 0 0 1px rgba(243,238,228,.16) inset;margin-block:36px 18px;transition:box-shadow .3s}
.search:focus-within{box-shadow:0 0 0 1px var(--gold) inset,0 0 0 4px rgba(215,166,74,.15)}
.search input{flex:1;height:48px;background:none;border:0;outline:none;color:var(--ivory);font:500 16px var(--body)}
.tbl{overflow-x:auto;--cl:16px}
table{width:100%;min-width:760px;border-collapse:collapse;font-size:16px}
th{height:52px;padding:0 20px;text-align:left;font:600 12px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
td{height:64px;padding:0 20px;border-top:1px solid rgba(243,238,228,.06);color:#c7c1b5;font-variant-numeric:tabular-nums}
td.n,th.n{text-align:right}
tbody tr{transition:background .3s}tbody tr:hover{background:rgba(215,166,74,.05)}
tr.row-in{animation:rowIn .7s var(--ease) both;animation-delay:calc(var(--i) * 45ms)}
@keyframes rowIn{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
td .who{display:flex;align-items:center;gap:14px;color:var(--ivory);font-weight:600}
td .who img{width:38px;height:38px;box-shadow:0 0 0 1px rgba(243,238,228,.18)}
td.rk{font:700 18px var(--display);width:70px}
.art-hero{position:relative;height:clamp(380px,62vh,640px);overflow:hidden}
.art-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.art-hero .veil{position:absolute;inset:0;background:linear-gradient(0deg,var(--ink) 0%,rgba(7,9,11,.3) 55%,rgba(7,9,11,.6) 100%)}
.art-hero .wrap{position:absolute;left:0;right:0;bottom:34px;display:flex;flex-direction:column;gap:14px}
.art-hero h1{font-size:clamp(40px,6vw,84px)}
.article{max-width:760px;margin-inline:auto;padding-block:40px 20px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.article p{margin:0;font-size:18px;color:var(--soft)}
.join{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.join-art{position:relative;overflow:hidden}
.join-art .bg{position:absolute;inset:-4%;background:url(../img/siege.jpg) 70% 30%/cover no-repeat;animation:kb2 26s ease-in-out infinite alternate}
.join-art .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,9,11,.1) 45%,var(--ink) 100%),linear-gradient(0deg,var(--ink) 0%,rgba(7,9,11,.1) 45%,transparent 70%)}
.join-art .copy{position:absolute;left:var(--gutter);right:12%;bottom:64px;display:flex;flex-direction:column;gap:14px}
.join-art h2{font-size:clamp(34px,3.6vw,50px);line-height:1.12}
.join-art p{margin:0;font-size:18px;color:var(--soft)}
.join-form{padding:120px var(--gutter) 60px;display:flex;flex-direction:column;justify-content:center;gap:24px;max-width:640px}
.join-form h1{font-size:clamp(34px,3.4vw,46px)}
.join-form form{display:flex;flex-direction:column;gap:18px}
.fld{display:flex;flex-direction:column;gap:8px;position:relative}
.fld label{font:600 12px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.fld input{height:54px;padding:0 16px;border:0;background:var(--surface);box-shadow:0 0 0 1px rgba(243,238,228,.16) inset;color:var(--ivory);font:500 16px var(--body);outline:none;transition:box-shadow .3s}
.fld input::placeholder{color:#7f878f}
.fld::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold-hi),transparent);transform:scaleX(0);transition:transform .5s var(--ease)}
.fld:focus-within::after{transform:scaleX(1)}
.fld input:focus{box-shadow:0 0 0 1px var(--gold) inset,0 0 0 4px rgba(215,166,74,.15)}
.fld .err{font-size:13px;color:#f0a58a}
.fld.bad input{box-shadow:0 0 0 1px #e07a5c inset}
.shake{animation:shake .45s}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.captcha{height:74px;border:1px dashed rgba(243,238,228,.22);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--muted)}
.check{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:#c7c1b5}
.check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--gold)}

footer{position:relative;z-index:1;border-top:1px solid rgba(215,166,74,.2);background:#050608;margin-top:clamp(72px,8vw,110px)}
.foot{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:40px;padding-block:64px 36px}
.foot h4{margin:0 0 14px;font:600 12px var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot li a{color:#c7c1b5}.foot li a:hover{color:var(--ivory)}
.foot p{color:var(--muted);max-width:26em;margin:12px 0 0}
.foot .brand b{color:var(--gold)}
.legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:22px 36px;border-top:1px solid var(--hair);font-size:14px;color:#8b939a}

@media (max-width:1100px){
  .links{display:none}
  .feat{grid-template-columns:1fr}
  .acts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot{grid-template-columns:1fr 1fr}
  .join{grid-template-columns:1fr}.join-art{min-height:520px}.join-form{padding-top:48px;max-width:none}
}
@media (max-width:760px){
  .nav .ghostbtn{display:none}
  .brand small{display:none}
  .hero{bottom:170px;gap:14px}
  .ctas{width:100%}.ctas > *{flex:1 1 100%;height:56px}
  .status{grid-template-columns:repeat(2,minmax(0,1fr))}
  .status > div{padding:12px 14px}
  .status > div:nth-child(3){border-left:0}
  .status > div:nth-child(n+3){border-top:1px solid var(--hair)}
  .rgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px}
  .carousel{min-height:560px}
  .slide .txt{right:24px;justify-content:flex-end;padding-bottom:64px}
  .slide .veil{background:linear-gradient(0deg,rgba(7,9,11,.97) 10%,rgba(7,9,11,.5) 60%,rgba(7,9,11,.2))}
  .duo{grid-template-columns:1fr}
  .acts{grid-template-columns:1fr}
  .panel{padding:22px}
  .foot{grid-template-columns:1fr}
  .podium{grid-template-columns:1fr}.pod.g1{order:-1}
  .two{grid-template-columns:1fr}
}
@media (min-width:761px) and (max-height:820px){ .seal{width:clamp(110px,16vh,170px)} .hero p{display:none} }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .flame,.torchglow{opacity:1}
  .armed .rv:not(.in){opacity:1;transform:none;filter:none}
  .armed .rv:not(.in) .unveil img{clip-path:none;transform:none}
}
/* home: server rates */
.rates .rgrid{justify-items:center;text-align:center;max-width:980px;margin-inline:auto}
/* rankings: the campfire scene behind the list */
.camp{position:fixed;inset:0;z-index:0;visibility:hidden;background:#07090b;overflow:hidden}
.camp.show{visibility:visible}
.camp .poster{position:absolute;inset:0;background:url(../img/camp-poster.jpg) 32% 62%/cover no-repeat}
#camp3d{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.6s ease}
#camp3d.on{opacity:1}
.camp .cveil{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(7,9,11,0) 42%,rgba(7,9,11,.42) 60%,rgba(7,9,11,.68) 100%),
  linear-gradient(180deg,rgba(7,9,11,.6) 0,rgba(7,9,11,0) 20%),
  linear-gradient(0deg,rgba(7,9,11,.5) 0,rgba(7,9,11,0) 18%)}
main{position:relative;z-index:1}
.rkwrap{display:grid;grid-template-columns:minmax(0,1fr) min(700px,46vw);gap:clamp(24px,4vw,64px);align-items:start;min-height:100vh;padding:clamp(118px,15vh,150px) clamp(16px,2.5vw,48px) 40px var(--gutter)}
.rktitle{position:sticky;top:clamp(118px,15vh,150px);display:flex;flex-direction:column;gap:12px}
.rktitle h1{font-size:clamp(44px,5.4vw,84px);text-shadow:0 4px 30px rgba(0,0,0,.85)}
.rktitle .dv{width:min(300px,70%)}
.board{--cl:16px;background:var(--corners),linear-gradient(180deg,rgba(17,21,26,.8),rgba(11,14,18,.86));box-shadow:0 0 0 1px var(--hair) inset,0 30px 80px -20px rgba(0,0,0,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:4px 0 8px}
.board .tabs{margin:0;padding:0 10px}
.board .tabs button{height:48px;padding:0 10px;font-size:12px;font-weight:600}
.board .tools{display:flex;gap:10px;margin:16px 20px 4px}
.board .search{margin:0;flex:1;width:auto;height:46px}
.clsel{position:relative;flex:0 0 200px;height:46px;background:var(--surface);box-shadow:0 0 0 1px rgba(243,238,228,.16) inset;transition:box-shadow .3s}
.clsel:focus-within{box-shadow:0 0 0 1px var(--gold) inset,0 0 0 4px rgba(215,166,74,.15)}
.clsel::after{content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;margin-top:-6px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(45deg);pointer-events:none}
.clsel select{appearance:none;-webkit-appearance:none;width:100%;height:100%;padding:0 40px 0 14px;background:none;border:0;outline:none;color:var(--ivory);font:600 14px var(--body);cursor:pointer}
.clsel select option{background:#11151a;color:var(--ivory)}
.board td .who b{display:block;font-weight:600;line-height:1.25}
.board td .who small{display:block;font-size:12px;font-weight:500;color:var(--muted);line-height:1.3}
.board .search input{height:42px}
.board table{min-width:0;font-size:15px}
.board th{height:46px;padding:0 16px}
.board td{height:56px;padding:0 16px}
.board td.rk{width:56px;font-size:17px;color:var(--muted)}
.board td.lv{color:var(--ivory);font:600 17px var(--display)}
.board td.xp{color:var(--soft)}
.board td .who img{width:34px;height:34px}
.board tr.p1 td.rk{color:var(--gold-hi)}.board tr.p2 td.rk{color:#c9d0d2}.board tr.p3 td.rk{color:#d9a47a}
.board tr.p1{background:linear-gradient(90deg,rgba(215,166,74,.12),transparent 70%)}
.board tr.p1 td .who img{box-shadow:0 0 0 2px var(--gold),0 0 22px rgba(215,166,74,.5)}
.board tr.p2 td .who img{box-shadow:0 0 0 2px #b7bec0}.board tr.p3 td .who img{box-shadow:0 0 0 2px #b8845a}
.board .empty{padding:28px 20px;color:var(--muted)}
@media (max-width:1000px), (max-aspect-ratio:6/5){
  .rkwrap{grid-template-columns:1fr;padding-top:110px}
  .rktitle{position:static}
  .camp .cveil{background:rgba(7,9,11,.5)}
}
@media (max-width:760px){ .board .tools{flex-wrap:wrap}.clsel{flex:1 1 100%} .camp .poster{background-position:12% 72%} .board td{padding:0 10px}.board th{padding:0 10px}.board td.rk{width:40px} }