/* Layout: one gothic night. Pixel-faithful artwork hero on desktop, stacked crop hero on phones,
   then candlelit sections framed like the reference's metal panels. Single dark look by choice. */
:root{
  color-scheme:dark;
  --ink:#080707;          /* near-black stone */
  --panel:#0e0d0e;        /* panel fill */
  --panel-2:#151112;
  --blood:#8d050b;        /* blood red */
  --crimson:#f01726;      /* glowing crimson */
  --gold:#d9bc81;         /* antique gold */
  --ivory:#f3e9dd;        /* parchment text */
  --ice:#ceeaff;          /* logo frost */
  --muted:#c0aca4;        /* ash text */
  --line:#5a2521;         /* forged-iron outline */
  --ok:#5fcf7f;
  --display:"Cormorant SC","Cormorant Garamond",Georgia,"Times New Roman",serif;
  --body:"PT Serif",Georgia,"Times New Roman",serif;
  --gutter-l:max(16px,env(safe-area-inset-left,0px));
  --gutter-r:max(16px,env(safe-area-inset-right,0px));
  --head-h:64px;
}
*{box-sizing:border-box}
html{background:var(--ink);scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--ivory);font:16px/1.65 var(--body);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--ink)}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold)}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.1;text-wrap:balance;margin:0;color:var(--ivory)}
p{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{max-width:1180px;margin:0 auto;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:46px;padding:0 1.5em;border-radius:10px;font:600 1.08rem/1 var(--display);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:filter .15s,box-shadow .2s,transform .15s}
.btn svg{width:1.05em;height:1.05em;flex:none}
.btn-blood{position:relative;overflow:hidden;color:var(--ivory);background:linear-gradient(180deg,#c3141f 0%,#8d050b 55%,#5e0307 100%);border-color:rgba(240,23,38,.55);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 22px rgba(240,23,38,.28),inset 0 1px 0 rgba(255,210,200,.3)}
.btn-blood:hover{filter:brightness(1.15);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 30px rgba(240,23,38,.5),inset 0 1px 0 rgba(255,210,200,.35)}
.btn-ghost{color:var(--gold);background:rgba(14,13,14,.7);border-color:rgba(217,188,129,.45)}
.btn-ghost:hover{border-color:var(--gold);background:rgba(217,188,129,.08)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(.5)}
.btn-block{width:100%}

/* ---------- Fixed header ---------- */
.site-head{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;height:var(--head-h);background:linear-gradient(180deg,rgba(8,7,7,.97),rgba(12,8,8,.93));border-bottom:1px solid rgba(90,37,33,.9);box-shadow:0 10px 30px rgba(0,0,0,.6);transition:background-color .35s,box-shadow .35s,border-color .35s}
.site-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--crimson) 50%,var(--gold) 70%,transparent);opacity:.55}
.site-head.is-visible{transform:none;visibility:visible}
.site-head .wrap{height:100%;display:flex;align-items:center;gap:20px;max-width:1440px}
.brand{flex:none;display:block;height:52px}
.brand img{height:100%;width:auto;-webkit-mask-image:radial-gradient(ellipse 60% 62% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 60% 62% at 50% 50%,#000 62%,transparent 100%)}
.nav{display:flex;align-items:center;gap:4px;margin-left:12px;flex:1;min-width:0}
.nav-link,.nav-drop>button{position:relative;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 12px;background:none;border:0;color:var(--ivory);font:600 1rem/1 var(--display);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;cursor:pointer;white-space:nowrap}
.nav-drop>button svg{width:12px;height:12px;transition:transform .2s}
.nav-drop.open>button svg{transform:rotate(180deg)}
.nav-link::after,.nav-drop>button::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:1px;background:linear-gradient(90deg,transparent,var(--crimson),transparent);box-shadow:0 0 6px var(--crimson);transform:scaleX(0);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.nav-link:hover::after,.nav-link.active::after,.nav-drop>button:hover::after,.nav-drop.active>button::after,.nav-drop.open>button::after{transform:scaleX(1)}
.nav-link.active,.nav-drop.active>button{color:#fff;text-shadow:0 0 12px rgba(240,23,38,.6)}
.nav-drop{position:relative}
.head-tools{display:flex;align-items:center;gap:12px;margin-left:auto;flex:none}
.lang-btn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 10px;border-radius:20px;background:rgba(14,13,14,.85);border:1px solid rgba(217,188,129,.35);font:700 .9rem/1 var(--display);letter-spacing:.08em;cursor:pointer}
.lang-btn svg{width:12px;height:12px}
.burger{display:none;width:44px;height:44px;border-radius:10px;border:1px solid rgba(217,188,129,.35);background:rgba(14,13,14,.85);cursor:pointer;align-items:center;justify-content:center}
.burger span,.burger span::before,.burger span::after{display:block;width:20px;height:2px;background:var(--gold);position:relative;transition:transform .2s,background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-6px}.burger span::after{top:6px}
.site-head.menu-open .burger span{background:transparent}
.site-head.menu-open .burger span::before{transform:translateY(6px) rotate(45deg)}
.site-head.menu-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}

/* ---------- Dropdown menus (shared by header + hero) ---------- */
.menu{position:absolute;z-index:70;min-width:230px;padding:8px;margin:0;list-style:none;background:linear-gradient(180deg,#171213,#0b0909);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.75),0 0 0 1px rgba(217,188,129,.08) inset}
.menu[hidden]{display:none}
.menu a,.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:8px;background:none;border:0;color:var(--ivory);font:600 1.02rem/1.2 var(--display);letter-spacing:.04em;text-decoration:none;text-align:left;cursor:pointer}
.menu a:hover,.menu button:hover,.menu a:focus-visible,.menu button:focus-visible{background:rgba(141,5,11,.35);color:#fff}
.menu img{width:26px;height:26px;border-radius:50%}
.menu .sel{margin-left:auto;color:var(--crimson);font-size:.85rem}
.site-head .menu{top:calc(100% + 6px);left:0}
.site-head .menu.right{left:auto;right:0}

/* ---------- Desktop hero: the reference artwork with live controls ---------- */
/* the artwork fits the window: never taller than the screen, never wider than its native 2x detail allows */
.scene-wrap{position:relative;overflow:hidden;background:#050405}
.scene-wrap::before{content:"";position:absolute;inset:-60px;background:url("../img/hero-full.webp") center/cover no-repeat;filter:blur(30px) brightness(.32) saturate(.9);transform:scale(1.05)}
.scene{position:relative;margin:0 auto;width:min(100%, calc(100vh * 1672 / 941), 3344px);aspect-ratio:1672/941;max-width:100%;box-shadow:0 0 80px 20px rgba(5,4,5,.75);background:#050405;isolation:isolate;overflow:hidden;container-type:inline-size}
.scene>*{--u:calc(100cqw / 1672)}
.scene-art{position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat;animation:artIn 1.4s ease-out both}
:root[data-lang="en"] .ru-only{display:none!important}
:root:not([data-lang="en"]) .en-only{display:none!important}
/* English lettering over the text-free artwork */
.scene-en{position:absolute;inset:0;z-index:1;pointer-events:none;animation:artIn 1.4s ease-out both}
.st{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u));display:flex;align-items:center;justify-content:center;white-space:nowrap;font-family:var(--display);font-weight:600;line-height:1}
.st-nav{font-size:calc(22 * var(--u));text-transform:uppercase;color:#ece3da;letter-spacing:.03em;text-shadow:0 0 6px rgba(0,0,0,.9)}
.st-drop{justify-content:flex-end}
.st-cab{font-size:calc(24 * var(--u));text-transform:uppercase;color:#fff;letter-spacing:.05em;text-shadow:0 1px 2px rgba(60,0,0,.8)}
.st-title{font-size:calc(23 * var(--u));color:var(--gold);letter-spacing:.02em}
.st-sub{font-size:calc(15 * var(--u));color:var(--gold);text-transform:uppercase;justify-content:flex-start;letter-spacing:.03em}
.st-plaque1{font-size:calc(52 * var(--u));text-transform:uppercase;letter-spacing:.02em;color:#f6efea;text-shadow:0 2px 3px rgba(0,0,0,.85),0 0 18px rgba(255,255,255,.12)}
.st-plaque2{font-size:calc(44 * var(--u));text-transform:uppercase;letter-spacing:.03em;color:#ecd8ad;text-shadow:0 2px 3px rgba(0,0,0,.85)}
.st-tag{font-size:calc(14 * var(--u));letter-spacing:.42em;text-transform:uppercase;color:#cdbdb3}
.st-cta{font-size:calc(37 * var(--u));text-transform:uppercase;color:#fff;letter-spacing:.03em;text-shadow:0 2px 4px rgba(60,0,0,.85)}

/* Hotspots: shaped exactly to the artwork; hover lights the art itself instead of drawing frames */
.hit{position:absolute;z-index:3;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u));display:block;margin:0;padding:0;background:none;border:0;border-radius:calc(var(--r,8) * var(--u));cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.hit .lit,.hit .shine,.hit .ring{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.hit .lit{-webkit-backdrop-filter:brightness(1.38) saturate(1.2);backdrop-filter:brightness(1.38) saturate(1.2);opacity:0;transition:opacity .35s ease}
.hit .shine{overflow:hidden}
.hit .shine::before{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:32%;background:linear-gradient(100deg,transparent,rgba(255,236,226,.38),transparent);transform:translateX(-160%) skewX(-18deg)}
.hit .ring{transition:box-shadow .35s ease}
.hit:hover .lit,.hit:focus-visible .lit,.hit[aria-expanded="true"] .lit{opacity:1}
.hit:hover .shine::before,.hit:focus-visible .shine::before{animation:sweep .95s cubic-bezier(.3,.6,.3,1)}
.hit:active .lit{-webkit-backdrop-filter:brightness(1.12);backdrop-filter:brightness(1.12)}
.hit.k-btn:hover .ring,.hit.k-btn:focus-visible .ring{box-shadow:0 0 0 1px rgba(255,190,175,.35),0 0 calc(26 * var(--u)) calc(3 * var(--u)) rgba(240,23,38,.55)}
.hit.k-round:hover .ring,.hit.k-round:focus-visible .ring,.hit.k-round[aria-expanded="true"] .ring{box-shadow:0 0 0 1px rgba(217,188,129,.55),0 0 calc(18 * var(--u)) rgba(240,23,38,.6)}
.hit.k-card:hover .ring,.hit.k-card:focus-visible .ring{box-shadow:inset 0 0 0 1px rgba(217,188,129,.45),0 0 calc(24 * var(--u)) rgba(240,23,38,.35)}
.hit.k-cta .ring{animation:ctaPulse 2.8s ease-in-out infinite}
.hit.k-cta:hover .ring,.hit.k-cta:focus-visible .ring{animation:none;box-shadow:0 0 0 1px rgba(255,190,175,.4),0 0 calc(40 * var(--u)) calc(6 * var(--u)) rgba(240,23,38,.6)}
.hit.k-nav .lit{-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);mask-image:radial-gradient(closest-side,#000 55%,transparent)}
.hit.k-img .lit{-webkit-mask-image:radial-gradient(closest-side,#000 60%,transparent);mask-image:radial-gradient(closest-side,#000 60%,transparent)}
.hit .bar{position:absolute;left:10%;right:10%;bottom:calc(5 * var(--u));height:max(1px,calc(2 * var(--u)));background:linear-gradient(90deg,transparent,#c3141f 20%,#ffd6c4 50%,#c3141f 80%,transparent);box-shadow:0 0 calc(8 * var(--u)) rgba(240,23,38,.9);transform:scaleX(0);transition:transform .35s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.hit:hover .bar,.hit:focus-visible .bar,.hit[aria-expanded="true"] .bar{transform:scaleX(1)}
.hit:focus-visible .ring{box-shadow:0 0 0 2px var(--gold),0 0 calc(18 * var(--u)) rgba(240,23,38,.6)!important}
.hit.k-nav:focus-visible .ring{box-shadow:none!important}
.scene .menu{top:calc(72 * var(--u));font-size:16px}
.scene-status{position:absolute;z-index:2;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u));display:flex;align-items:center;justify-content:center;border-radius:calc(6 * var(--u));font:700 calc(20 * var(--u))/1 var(--display);letter-spacing:.04em;color:#fff;background:linear-gradient(180deg,#22a24a,#0d6a2b);box-shadow:0 0 14px rgba(95,207,127,.5);pointer-events:none}
.scene-status[hidden]{display:none}

/* ---------- Phone hero: stacked artwork crops ---------- */
.mhero{display:none;position:relative;overflow:hidden;padding:calc(var(--head-h) + 18px) var(--gutter-r) 28px var(--gutter-l);background:var(--ink)}
.mhero::before{content:"";position:absolute;inset:0;background:url("../img/hero-full.webp") 63% 0/auto 100% no-repeat;opacity:.55;filter:saturate(1.1)}
.mhero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,7,7,.15),rgba(8,7,7,.55) 45%,var(--ink) 100%)}
.mhero-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:560px;margin:0 auto}
.feather{-webkit-mask-image:radial-gradient(ellipse 52% 54% at 50% 50%,#000 70%,transparent 100%);mask-image:radial-gradient(ellipse 52% 54% at 50% 50%,#000 70%,transparent 100%)}
.feather-wide{-webkit-mask-image:radial-gradient(ellipse 54% 60% at 50% 50%,#000 78%,transparent 100%);mask-image:radial-gradient(ellipse 54% 60% at 50% 50%,#000 78%,transparent 100%)}
.mhero .play-img{background:none;border:0;padding:0;cursor:pointer;width:100%;border-radius:40px}
.mhero .play-img:hover img{filter:brightness(1.15)}
.msocial{display:flex;gap:10px;justify-content:center;margin-top:14px}
.msocial a{width:46px;height:46px;border-radius:50%;overflow:hidden;display:block}
.msocial img{width:100%;height:100%;object-fit:cover;transform:scale(1.12)}

/* ---------- Countdown (inside the X50k card) ---------- */
.cd{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:12px;background:linear-gradient(180deg,rgba(141,5,11,.2),rgba(8,7,7,.55));border:1px solid rgba(240,23,38,.3)}
.cd-label{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;font:600 .9rem/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.cd-date{color:var(--muted);letter-spacing:.06em}
.timer{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;font-variant-numeric:tabular-nums}
.timer div{display:flex;flex-direction:column;align-items:center;min-width:0;padding:10px 4px 8px;overflow:hidden;border-radius:10px;background:var(--panel);border:1px solid var(--line);box-shadow:inset 0 0 18px rgba(141,5,11,.25)}
.timer b{font:700 2.1rem/1 var(--display);color:var(--ivory);text-shadow:0 0 14px rgba(240,23,38,.45)}
.timer span{font:600 .78rem/1 var(--display);letter-spacing:.14em;color:var(--gold);text-transform:uppercase;margin-top:6px}
.timer-done{font:700 1.6rem/1.2 var(--display);color:var(--ok)}

/* ---------- Sections ---------- */
section.sec{position:relative;overflow:hidden;padding-block:80px;scroll-margin-top:var(--head-h)}
.sec-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;opacity:.22}
.sec-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--ink),rgba(8,7,7,.3) 30%,rgba(8,7,7,.3) 70%,var(--ink))}
.sec>.wrap{position:relative;z-index:1}
.glow{background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(141,5,11,.22),transparent 70%),var(--ink)}
.sec-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;margin-bottom:48px}
.eyebrow{font:600 .86rem/1.2 var(--display);letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
.sec-head h1,.sec-head h2{display:flex;align-items:center;gap:18px;font-size:clamp(1.9rem,3.4vw,2.6rem);color:var(--ivory)}
.sec-head h1::before,.sec-head h1::after,.sec-head h2::before,.sec-head h2::after{content:"";flex:none;width:clamp(28px,7vw,90px);height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.sec-head h1::after,.sec-head h2::after{transform:scaleX(-1)}
.sec-head .lead{max-width:62ch;color:var(--muted)}
.panel{position:relative;background:linear-gradient(180deg,rgba(23,18,19,.96),rgba(10,9,9,.97));border:1px solid var(--line);border-radius:16px;box-shadow:0 0 0 1px rgba(217,188,129,.07) inset,0 20px 50px rgba(0,0,0,.55)}
.panel.gem::before{content:"";position:absolute;top:0;left:50%;width:12px;height:12px;background:var(--crimson);border:1px solid var(--gold);transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 0 12px var(--crimson)}

/* Servers */
.servers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.server{padding:28px;display:flex;flex-direction:column;gap:20px;scroll-margin-top:calc(var(--head-h) + 20px);transition:box-shadow .3s}
.server.flash{box-shadow:0 0 0 1px var(--crimson),0 0 40px rgba(240,23,38,.45)}
.server-top{display:flex;align-items:center;gap:18px}
.server-top img{width:86px;height:86px;border-radius:12px;flex:none}
.server-top h3{font-size:2.1rem}
.server-top p{font:600 .95rem/1.2 var(--display);letter-spacing:.06em;color:var(--gold);text-transform:uppercase}
.pill{margin-left:auto;align-self:flex-start;flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;font:700 1rem/1 var(--display);letter-spacing:.06em;color:#fff;background:linear-gradient(180deg,#c3141f,#7a0309);box-shadow:0 0 14px rgba(240,23,38,.4)}
.pill.on{background:linear-gradient(180deg,#22a24a,#0d6a2b);box-shadow:0 0 14px rgba(95,207,127,.45)}
.specs{display:grid;grid-template-columns:auto 1fr;gap:0;margin:0;border-top:1px solid rgba(90,37,33,.7)}
.specs dt,.specs dd{margin:0;padding:10px 0;border-bottom:1px solid rgba(90,37,33,.7)}
.specs dt{color:var(--muted);padding-right:24px;font-size:.95rem}
.specs dd{text-align:right;font-variant-numeric:tabular-nums}
.server ul{margin:0;padding-left:1.1em;color:var(--muted)}
.server ul li::marker{color:var(--crimson)}
.server .btn{margin-top:auto}

/* About */
.about-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:start}
.about-text{display:flex;flex-direction:column;gap:16px;max-width:62ch}
.about-text p:first-child{font-size:1.2rem;color:var(--ivory)}
.about-text p{color:var(--muted)}
.feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.feat{padding:20px;border-radius:12px;background:rgba(14,13,14,.82);border:1px solid rgba(90,37,33,.8)}
.feat h3{font-size:1.35rem;color:var(--gold);margin-bottom:6px}
.feat p{font-size:.95rem;color:var(--muted)}
.subhead{font-size:1.9rem;margin-bottom:18px;display:flex;align-items:center;gap:14px}
.subhead::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.rules-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;margin-top:72px}
#rules,#faq{scroll-margin-top:calc(var(--head-h) + 24px)}
.rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;counter-reset:r}
.rules li{counter-increment:r;display:grid;grid-template-columns:44px 1fr;gap:10px;color:var(--muted)}
.rules li::before{content:"1." counter(r);font:700 1.15rem/1.5 var(--display);color:var(--crimson)}
.rules b{color:var(--ivory);font-weight:700}
.faq{display:flex;flex-direction:column;gap:10px}
.faq details{border:1px solid rgba(90,37,33,.8);border-radius:10px;background:rgba(14,13,14,.82)}
.faq summary{list-style:none;cursor:pointer;padding:14px 46px 14px 18px;position:relative;font:600 1.15rem/1.3 var(--display);letter-spacing:.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{padding:0 18px 16px;color:var(--muted)}

/* Registration */
.reg-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:36px;align-items:start}
.form-panel{padding:34px}
form{display:flex;flex-direction:column;gap:18px}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label,.field .lbl{font:600 .92rem/1.2 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.input{position:relative}
.field input,.field select{width:100%;height:48px;padding:0 14px;border-radius:9px;background:#090808;border:1px solid #3a2523;color:var(--ivory);font:1rem var(--body);transition:border-color .15s,box-shadow .15s}
.field select{appearance:none;background-image:url("../img/chevron-down.svg");background-repeat:no-repeat;background-position:right 14px center;background-size:14px;padding-right:40px}
.field input:focus,.field select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(217,188,129,.18)}
.field.bad input,.field.bad select{border-color:var(--crimson);box-shadow:0 0 0 3px rgba(240,23,38,.15)}
.field.good input{border-color:#3e6d4c}
.err{min-height:1.2em;font-size:.85rem;color:#ff7b84}
.hint{font-size:.85rem;color:var(--muted)}
.eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;background:none;color:var(--muted);cursor:pointer;border-radius:8px}
.eye:hover{color:var(--gold)}
.eye svg{width:20px;height:20px;margin:auto}
.input.pw input{padding-right:48px}
.meter{height:4px;border-radius:2px;background:#2a1a19;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--crimson);transition:width .2s,background .2s}
.check{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;color:var(--muted);cursor:pointer}
.check input{flex:none;width:20px;height:20px;margin:3px 0 0;accent-color:var(--crimson)}
.form-msg{padding:14px 16px;border-radius:10px;font-size:.95rem}
.form-msg.ok{background:rgba(34,162,74,.12);border:1px solid rgba(95,207,127,.4);color:#c9f2d5}
.form-msg.bad{background:rgba(240,23,38,.1);border:1px solid rgba(240,23,38,.4);color:#ffc8cc}
.form-msg[hidden]{display:none}
.side-list{display:flex;flex-direction:column;gap:18px;padding-top:8px}
.side-list h3{font-size:1.9rem}
.side-list p{color:var(--muted)}
.perks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.perks li{display:grid;grid-template-columns:22px 1fr;gap:12px;color:var(--muted)}
.perks li::before{content:"";width:10px;height:10px;margin-top:.55em;margin-left:5px;background:var(--crimson);border:1px solid var(--gold);transform:rotate(45deg)}
.perks b{color:var(--ivory)}

/* Files */
.files{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.file{padding:26px;display:flex;flex-direction:column;gap:12px}
.file .tag{font:600 .82rem/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--crimson)}
.file h3{font-size:1.65rem}
.file p{color:var(--muted);font-size:.95rem}
.file .meta{display:flex;gap:16px;flex-wrap:wrap;font-size:.85rem;color:var(--gold);font-variant-numeric:tabular-nums}
.file .btn{margin-top:auto}
.req{margin-top:40px;overflow-x:auto;border-radius:14px;border:1px solid var(--line);background:rgba(14,13,14,.9)}
.req table{width:100%;border-collapse:collapse;min-width:560px}
.req caption{text-align:left;padding:18px 20px 6px;font:600 1.4rem/1.2 var(--display);color:var(--ivory)}
.req th,.req td{padding:12px 20px;text-align:left;border-top:1px solid rgba(90,37,33,.6)}
.req thead th{font:600 .9rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.req tbody th{font-weight:400;color:var(--muted)}

/* Community */
.socials{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.soc{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:26px 16px;border-radius:14px;background:rgba(14,13,14,.85);border:1px solid rgba(90,37,33,.8);text-decoration:none;color:var(--ivory);cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s}
.soc:hover{border-color:var(--crimson);box-shadow:0 0 26px rgba(240,23,38,.25);transform:translateY(-3px)}
.soc img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.soc h3{font-size:1.4rem}
.soc p{font-size:.9rem;color:var(--muted)}
.soc .go{margin-top:auto;font:600 .9rem/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}

/* Shop */
.shop{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.item{padding:28px;display:flex;flex-direction:column;gap:12px;scroll-margin-top:calc(var(--head-h) + 20px);transition:box-shadow .3s}
.item.flash{box-shadow:0 0 0 1px var(--crimson),0 0 40px rgba(240,23,38,.45)}
.item h3{font-size:1.8rem;color:var(--gold)}
.item p{color:var(--muted);font-size:.95rem}
.item ul{margin:0;padding-left:1.1em;color:var(--muted);font-size:.95rem}
.item ul li::marker{color:var(--crimson)}
.item .btn{margin-top:auto}
.shop-note{margin-top:26px;text-align:center;color:var(--muted);font-size:.95rem}

/* Start steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;counter-reset:s}
.step{counter-increment:s;padding:30px 26px 26px;display:flex;flex-direction:column;gap:12px}
.step::after{content:counter(s);position:absolute;top:14px;right:22px;font:700 4rem/1 var(--display);color:rgba(240,23,38,.22)}
.step h3{font-size:1.7rem}
.step p{color:var(--muted);font-size:.95rem}
.step .btn{margin-top:auto;align-self:flex-start}

/* Footer */
footer{border-top:1px solid var(--line);background:#060505;padding-block:40px 28px}
footer .wrap{display:flex;flex-direction:column;gap:24px}
.foot-top{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot-top .brand{height:60px}
.foot-nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.foot-nav a{color:var(--muted);text-decoration:none;font:600 1rem/1.4 var(--display);letter-spacing:.06em;text-transform:uppercase}
.foot-nav a:hover{color:var(--ivory)}
.foot-soc{display:flex;gap:10px}
.foot-soc a{width:42px;height:42px;border-radius:50%;overflow:hidden;display:block}
.foot-soc img{width:100%;height:100%;object-fit:cover;transform:scale(1.12)}
.foot-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.85rem;color:#8c7c76;border-top:1px solid rgba(90,37,33,.5);padding-top:18px}

/* Modal */
dialog.modal{width:min(460px,calc(100vw - 32px));padding:0;border:0;background:transparent;color:var(--ivory);overflow:visible}
dialog.modal::backdrop{background:rgba(3,2,2,.78);backdrop-filter:blur(3px)}
.modal .panel{padding:34px 30px 28px}
.modal-x{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:10px;border:1px solid rgba(217,188,129,.3);background:rgba(8,7,7,.8);cursor:pointer;display:flex;align-items:center;justify-content:center}
.modal-x img{width:18px;height:18px}
.modal h2{font-size:2rem;text-align:center;margin-bottom:6px}
.modal .sub{text-align:center;color:var(--muted);font-size:.95rem;margin-bottom:22px}
.modal-links{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.92rem}
.linkbtn{background:none;border:0;padding:0;color:var(--gold);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font:inherit}

/* Toast */
.toast{position:fixed;z-index:90;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));max-width:min(560px,calc(100vw - 32px));transform:translate(-50%,20px);opacity:0;pointer-events:none;padding:14px 22px;border:1px solid #983f32;border-radius:10px;background:linear-gradient(135deg,#220b0b,#080608);color:var(--ivory);box-shadow:0 10px 50px rgba(0,0,0,.8),0 0 18px rgba(158,0,17,.3);text-align:center;font-size:.98rem;transition:transform .25s,opacity .25s}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Responsive ---------- */
/* ---------- Dedicated pages ---------- */
:root[data-page="home"] .site-head:not(.scrolled){background:linear-gradient(180deg,rgba(8,7,7,.92),rgba(8,7,7,.55) 70%,rgba(8,7,7,0));border-bottom-color:transparent;box-shadow:none}
:root[data-page="home"] .site-head:not(.scrolled)::after{opacity:0}
.site-head::after{transition:opacity .35s}
section.page-sec{padding-top:calc(var(--head-h) + env(safe-area-inset-top,0px) + 64px);min-height:calc(100vh - 220px)}
.page-sec .sec-head{margin-bottom:56px}
.crumbs{display:flex;align-items:center;gap:10px;font:600 .82rem/1 var(--display);letter-spacing:.2em;text-transform:uppercase}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ivory)}
.crumbs span{color:var(--crimson);font-size:.6rem}

/* ---------- Motion (kept small; everything ends fully visible) ---------- */
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes gemPulse{0%,100%{box-shadow:0 0 8px var(--crimson)}50%{box-shadow:0 0 18px var(--crimson),0 0 4px var(--gold)}}
@keyframes ctaGlow{0%,100%{box-shadow:0 0 0 rgba(240,23,38,0)}50%{box-shadow:0 0 34px rgba(240,23,38,.42),inset 0 0 22px rgba(240,23,38,.12)}}
@keyframes tick{from{opacity:.35;transform:translateY(-5px)}to{opacity:1;transform:none}}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes sheen{from{transform:translateX(-120%) skewX(-20deg)}to{transform:translateX(220%) skewX(-20deg)}}
main{animation:pageIn .45s ease-out backwards}

.rise{animation:rise .6s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:var(--d,0ms)}
.panel.gem::before{animation:gemPulse 3.2s ease-in-out infinite}
.mhero .play-img{animation:ctaGlow 2.8s ease-in-out infinite}
.timer b.tick{display:inline-block;animation:tick .35s ease-out}
.menu:not([hidden]){animation:menuIn .16s ease-out}
dialog.modal[open] .panel{animation:modalIn .22s ease-out}
.btn-blood::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,230,220,.22),transparent);transform:translateX(-120%) skewX(-20deg);pointer-events:none}
.btn-blood:hover::after{animation:sheen .7s ease-out}
.server,.item,.file,.step,.feat{transition:transform .25s ease,border-color .25s,box-shadow .3s}
.server:hover,.item:hover,.file:hover,.step:hover,.feat:hover{transform:translateY(-3px)}
.feat:hover{border-color:rgba(217,188,129,.4)}
.sec-head h1::before,.sec-head h1::after{animation:lineIn .7s .15s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes lineIn{from{width:0}}

@media (max-width:1180px){
  .nav-link,.nav-drop>button{padding:0 8px;font-size:.95rem}
}
@media (max-width:1023px){
  :root{--head-h:60px}
  .scene-wrap{display:none}
  .mhero{display:block}
  .site-head{transform:none;visibility:visible}
  .brand{height:46px}
  .burger{display:flex}
  .nav{position:fixed;left:0;right:0;top:calc(var(--head-h) + env(safe-area-inset-top,0px));bottom:0;margin:0;flex-direction:column;align-items:stretch;gap:2px;padding:14px var(--gutter-r) 30px var(--gutter-l);background:rgba(8,7,7,.98);overflow-y:auto;transform:translateX(100%);transition:transform .25s;visibility:hidden}
  .site-head.menu-open .nav{transform:none;visibility:visible}
  .nav-link,.nav-drop>button{width:100%;height:52px;justify-content:space-between;font-size:1.15rem;border-bottom:1px solid rgba(90,37,33,.5)}
  .nav-link::after,.nav-drop>button::after{display:none}
  .site-head .menu{position:static;min-width:0;margin:6px 0 10px;box-shadow:none}
  .head-tools .btn span{display:none}
  .head-tools .btn{padding:0 14px}
  .servers,.about-grid,.rules-faq,.reg-grid{grid-template-columns:minmax(0,1fr)}
  .files,.shop,.steps{grid-template-columns:minmax(0,1fr)}
  .socials{grid-template-columns:repeat(2,minmax(0,1fr))}
  .socials .soc:last-child{grid-column:1/-1}
  section.sec{padding-block:72px}
  section.page-sec{padding-top:calc(var(--head-h) + env(safe-area-inset-top,0px) + 44px)}
}
@media (max-width:560px){
  body{font-size:16px}
  .row2,.feats{grid-template-columns:minmax(0,1fr)}
  .timer b{font-size:1.7rem}
  .form-panel,.server,.item,.file,.step{padding:22px}
  .server-top img{width:64px;height:64px}
  .server-top h3{font-size:2rem}
  .socials{grid-template-columns:minmax(0,1fr)}
  .soc{flex-direction:row;text-align:left;padding:14px 16px}
  .soc img{width:48px;height:48px}
  .soc .go{margin:0 0 0 auto}
  .soc p{display:none}
  .head-tools{gap:8px}
  .lang-btn{padding:0 8px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ---------- Mobile hero English lettering ---------- */
.mpiece{position:relative;width:100%;container-type:inline-size}
.mp-text{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--display);font-weight:600;text-transform:uppercase;line-height:1.05;pointer-events:none}
.mp-plaque{left:8.6%;width:86.2%;top:24%;height:62%;gap:2cqw}
.mp-plaque b{font-weight:600;font-size:8.6cqw;color:#f6efea;letter-spacing:.02em;text-shadow:0 2px 3px rgba(0,0,0,.85)}
.mp-plaque i{font-style:normal;font-size:7.2cqw;color:#ecd8ad;text-shadow:0 2px 3px rgba(0,0,0,.85)}
.mp-cta{left:20%;width:58%;top:35%;height:31%;font-size:7cqw;color:#fff;text-shadow:0 2px 4px rgba(60,0,0,.85)}
.hero-tag-en .mp-tagtext{font-size:2.55cqw}
.mp-tag{margin:0;font:600 .78rem/1.4 var(--display);letter-spacing:.38em;text-transform:uppercase;color:#cdbdb3;text-align:center}

/* ---------- Site-wide motion ---------- */
@keyframes artIn{from{opacity:0;filter:brightness(.35) saturate(.6)}to{opacity:1;filter:none}}
@keyframes sweep{to{transform:translateX(480%) skewX(-18deg)}}
@keyframes ctaPulse{0%,100%{box-shadow:0 0 0 rgba(240,23,38,0)}50%{box-shadow:0 0 calc(34 * var(--u)) calc(4 * var(--u)) rgba(240,23,38,.42)}}
@keyframes drift{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.1) translate3d(-1.5%,-1%,0)}}
@keyframes blink{0%,100%{opacity:.9}50%{opacity:.25}}
@keyframes itemIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.m-in{animation:rise .7s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:var(--d,0ms)}
.sec-bg{animation:drift 38s ease-in-out infinite alternate;will-change:transform}
.reveal-pending{opacity:0;transform:translateY(18px)}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;animation:blink 1.6s ease-in-out infinite}
.menu:not([hidden]) li{animation:itemIn .28s ease-out backwards}
.menu li:nth-child(2){animation-delay:30ms}.menu li:nth-child(3){animation-delay:60ms}.menu li:nth-child(4){animation-delay:90ms}.menu li:nth-child(5){animation-delay:120ms}.menu li:nth-child(6){animation-delay:150ms}
.faq details[open] p{animation:rise .35s ease-out}
.faq details{transition:border-color .25s,background-color .25s}
.faq details:hover,.faq details[open]{border-color:rgba(217,188,129,.4)}
.brand img{transition:filter .3s}
.brand:hover img{filter:drop-shadow(0 0 8px rgba(206,234,255,.55))}
.soc img{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.soc:hover img{transform:rotate(-8deg) scale(1.08);box-shadow:0 0 0 2px rgba(217,188,129,.5),0 0 18px rgba(240,23,38,.55)}
.msocial a,.foot-soc a{transition:transform .25s,box-shadow .25s}
.msocial a:hover,.foot-soc a:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(217,188,129,.5),0 0 16px rgba(240,23,38,.55)}
.panel{transition:transform .25s ease,box-shadow .35s,border-color .3s}
.server:hover,.item:hover,.file:hover,.step:hover{border-color:rgba(217,188,129,.35);box-shadow:0 0 0 1px rgba(217,188,129,.1) inset,0 24px 60px rgba(0,0,0,.6),0 0 30px rgba(141,5,11,.25)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.btn-ghost{transition:filter .15s,box-shadow .25s,border-color .25s,background-color .25s,transform .15s}
.btn-ghost:hover{box-shadow:0 0 18px rgba(217,188,129,.18)}
.lang-btn,.burger{transition:border-color .2s,box-shadow .2s}
.lang-btn:hover,.burger:hover{border-color:var(--gold);box-shadow:0 0 12px rgba(217,188,129,.2)}
.field input,.field select{transition:border-color .2s,box-shadow .2s,background-color .2s}
.field input:hover,.field select:hover{border-color:#5a3a36}
.toast{transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .25s}
canvas.embers{position:fixed;inset:0;width:100%;height:100%;z-index:40;pointer-events:none;mix-blend-mode:screen;opacity:.85}
@media (prefers-reduced-motion:reduce){
  canvas.embers{display:none}
  .reveal-pending{opacity:1;transform:none}
  .scene-art,.scene-en{animation:none}
}

/* ================= Home hero: full-bleed art, fixed-size elements ================= */
.hero{position:relative;overflow:hidden;isolation:isolate;min-height:max(640px,min(100vh,1080px));display:flex;align-items:center;padding-top:var(--head-h);background:var(--ink)}
.hero-bg{position:absolute;inset:0;z-index:-2;background:url("../img/hero-bg.webp") 62% 38%/cover no-repeat;animation:artIn 1.4s ease-out both}
.hero-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(90deg,rgba(8,7,7,.88) 0%,rgba(8,7,7,.62) 26%,rgba(8,7,7,.12) 48%,rgba(8,7,7,0) 62%,rgba(8,7,7,.15) 82%,rgba(8,7,7,.55) 100%),
  linear-gradient(180deg,rgba(8,7,7,.35) 0%,rgba(8,7,7,0) 18%,rgba(8,7,7,0) 70%,var(--ink) 100%)}
@keyframes heroDrift{from{transform:scale(1)}to{transform:scale(1.06) translate3d(-1%,-.6%,0)}}
.hero-inner{position:relative;width:100%;max-width:1560px;margin:0 auto;padding:28px var(--gutter-r) 56px max(112px,var(--gutter-l));display:grid;grid-template-columns:minmax(0,540px) minmax(0,1fr) minmax(0,400px);gap:24px;align-items:center}
.hero-main{grid-column:1;justify-self:center;width:min(100%,540px,max(320px,calc((100vh - 150px) / 1.32)));display:flex;flex-direction:column;align-items:center;gap:0;min-width:0}
.hero-logo{width:100%;max-width:520px;margin-bottom:-6px}
.hero-plaque{max-width:540px}
.hero-tag{width:92%;max-width:500px;margin:4px 0 2px}
p.hero-tag{width:auto;margin:10px 0 8px}
.play-img{position:relative;display:block;width:100%;max-width:520px;padding:0;background:none;border:0;cursor:pointer;border-radius:60px;-webkit-tap-highlight-color:transparent}
.play-img img{width:100%;transition:filter .3s}
.play-fx{position:absolute;left:9.3%;top:20.1%;width:84.4%;height:62.4%;border-radius:999px;pointer-events:none}
.play-fx>span{position:absolute;inset:0;border-radius:inherit}
.play-fx .lit{-webkit-backdrop-filter:brightness(1.3) saturate(1.15);backdrop-filter:brightness(1.3) saturate(1.15);opacity:0;transition:opacity .35s}
.play-fx .shine{overflow:hidden}
.play-fx .shine::before{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:30%;background:linear-gradient(100deg,transparent,rgba(255,236,226,.38),transparent);transform:translateX(-160%) skewX(-18deg)}
.play-fx .ring{animation:ctaPulse2 2.8s ease-in-out infinite}
.play-img:hover .lit,.play-img:focus-visible .lit{opacity:1}
.play-img:hover .shine::before,.play-img:focus-visible .shine::before{animation:sweep .95s cubic-bezier(.3,.6,.3,1)}
.play-img:hover .ring,.play-img:focus-visible .ring{animation:none;box-shadow:0 0 0 1px rgba(255,190,175,.4),0 0 40px 6px rgba(240,23,38,.6)}
.play-img:focus-visible{outline:none}
.play-img:focus-visible .ring{box-shadow:0 0 0 2px var(--gold),0 0 30px rgba(240,23,38,.6)}
.play-img:active .lit{-webkit-backdrop-filter:brightness(1.1);backdrop-filter:brightness(1.1)}
@keyframes ctaPulse2{0%,100%{box-shadow:0 0 0 rgba(240,23,38,0)}50%{box-shadow:0 0 34px 4px rgba(240,23,38,.42)}}
.mhero .play-img{animation:none}

/* server panel */
.hero-servers{grid-column:3;align-self:start;margin-top:4vh;position:relative;padding:18px 16px 16px;border-radius:18px;background:linear-gradient(180deg,rgba(18,14,15,.86),rgba(8,7,8,.9));border:1px solid rgba(90,37,33,.9);box-shadow:0 0 0 1px rgba(217,188,129,.1) inset,0 24px 60px rgba(0,0,0,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;flex-direction:column;gap:10px}
.hero-servers::before,.hero-servers::after{content:"";position:absolute;left:50%;width:11px;height:11px;background:var(--crimson);border:1px solid var(--gold);transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 0 12px var(--crimson);animation:gemPulse 3.2s ease-in-out infinite}
.hero-servers::before{top:0}.hero-servers::after{top:100%}
.hs-title{display:flex;align-items:center;justify-content:center;gap:12px;font:600 1.3rem/1.2 var(--display);color:var(--gold);text-transform:none;margin:2px 0 4px}
.hs-title::before,.hs-title::after{content:"";width:44px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.hs-title::after{transform:scaleX(-1)}
.hs-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:14px;padding:10px 14px 10px 10px;border-radius:12px;background:linear-gradient(180deg,#141011,#0b0909);border:1px solid rgba(255,255,255,.05);text-decoration:none;color:var(--ivory);transition:border-color .3s,box-shadow .3s,transform .3s}
.hs-row img{width:64px;height:64px;border-radius:10px}
.hs-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.hs-txt b{font:600 1.75rem/1 var(--display);letter-spacing:.01em}
.hs-txt small{font:600 .78rem/1.2 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.hs-row:hover,.hs-row:focus-visible{border-color:rgba(217,188,129,.45);box-shadow:0 0 22px rgba(240,23,38,.3);transform:translateX(-3px);outline:none}
.hs-row .pill{align-self:center;margin:0}

/* social rail */
.hero-social{position:absolute;z-index:2;left:max(24px,env(safe-area-inset-left,0px));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px}
.hero-social a{display:block;width:52px;height:52px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px rgba(217,188,129,.25);transition:transform .25s,box-shadow .25s}
.hero-social img{width:100%;height:100%;object-fit:cover}
.hero-social a:hover,.hero-social a:focus-visible{transform:scale(1.08);box-shadow:0 0 0 1px rgba(217,188,129,.6),0 0 18px rgba(240,23,38,.6);outline:none}
.hero-social.m-in{animation-name:railIn}
@keyframes railIn{from{opacity:0;transform:translate(-12px,-50%)}to{opacity:1;transform:translateY(-50%)}}

@media (max-width:1180px){
  .hero-inner{grid-template-columns:minmax(0,480px) minmax(0,1fr) minmax(0,360px)}
}
@media (max-width:1023px){
  .hero{min-height:0;flex-direction:column;align-items:stretch;padding-top:calc(var(--head-h) + 12px)}
  .hero-inner{order:1}
  .hero-social{order:2}
  .hero-bg{background-position:64% 30%}
  .hero-shade{background:linear-gradient(180deg,rgba(8,7,7,.35),rgba(8,7,7,.6) 40%,rgba(8,7,7,.85) 70%,var(--ink) 100%)}
  .hero-inner{display:flex;flex-direction:column;align-items:center;gap:28px;padding:8px var(--gutter-r) 40px var(--gutter-l)}
  .hero-main{width:100%;max-width:520px;justify-self:auto}
  .hero-servers{width:100%;max-width:440px;margin-top:6px;zoom:.95}
  .hero-social{position:static;transform:none;flex-direction:row;justify-content:center;margin:0 auto 36px;width:max-content;max-width:100%}
  .hero-social.m-in{animation-name:rise}
  .hero-social a{width:46px;height:46px}
}

/* desktop: the untouched artwork fills the full width (no crop, no fill); real elements sit exactly on their painted twins.
   Positions are the artwork's own pixel boxes (1672×861 after the menu row) expressed as % of the hero. */
.mp-tagtext{inset:0;width:100%;height:100%;font-size:2.55cqw;letter-spacing:.42em;color:#cdbdb3;font-weight:600}
@media (min-width:1024px){
  .hero{display:block;min-height:0;width:100%;aspect-ratio:1672/861;padding:0;container-type:inline-size}
  .hero-bg{background:url("../img/hero-art2.webp") 0 0/100% 100% no-repeat}
  .hero-shade{background:linear-gradient(180deg,rgba(8,7,7,.25) 0%,rgba(8,7,7,0) 9%,rgba(8,7,7,0) 86%,var(--ink) 100%)}
  .hero-inner,.hero-main{position:static;display:block;padding:0;margin:0;max-width:none;width:auto}
  .hero .feather-wide{-webkit-mask-image:none;mask-image:none}
  .hero-logo{position:absolute;left:9.928%;top:5.459%;width:33.373%;max-width:none;margin:0}
  .hero-plaque{position:absolute;left:9.629%;top:45.180%;width:35.407%;max-width:none}
  .hero-tag{position:absolute;left:11.005%;top:64.111%;width:32.416%;max-width:none;margin:0}
  .play-img{position:absolute;left:10.825%;top:68.641%;width:32.955%;max-width:none}
  .hero-servers{position:absolute;left:73.505%;top:10.685%;width:25.179%;height:37.398%;margin:0;padding:1.1cqw 1cqw 1cqw;gap:.7cqw;background:linear-gradient(180deg,#120e0f,#080708);-webkit-backdrop-filter:none;backdrop-filter:none;scale:.95;transform-origin:50% 50%;box-shadow:0 0 0 1px rgba(217,188,129,.1) inset,0 10px 30px rgba(0,0,0,.55)}
  .hero-frame.zin .hero-servers{transform-origin:100% 0}
  .hero-servers .hs-row{flex:1}
  .hero-social{left:2.632%;top:31.765%;width:3.289%;transform:none;gap:.62cqw}
  .hero-social a{width:100%;height:auto;aspect-ratio:1}
  .hero-social.m-in{animation-name:rise}
}
/* panel contents scale with the panel width */
.hero-servers{container-type:inline-size}
.hs-title{font-size:clamp(1.15rem,5.2cqw,1.7rem)}
.hs-row{grid-template-columns:clamp(56px,17cqw,104px) minmax(0,1fr) auto;gap:clamp(12px,4cqw,20px);padding:clamp(10px,3cqw,16px)}
.hs-row img{width:100%;height:auto;aspect-ratio:1}
.hs-txt b{font-size:clamp(1.6rem,7.6cqw,2.6rem)}
.hs-txt small{font-size:clamp(.74rem,2.9cqw,.95rem)}
.hs-txt em{font-style:normal;font-size:clamp(.78rem,3cqw,.98rem);color:var(--muted);margin-top:2px}
.hs-row .pill{font-size:clamp(.9rem,3.6cqw,1.15rem)}

.mpiece>img{width:100%}

/* ---------- Zoom-aware hero frame (desktop) ----------
   --artw is the artwork width in CSS px at the current browser zoom (set by script).
   Zoomed out: the art is narrower than the window and the scene continues softly at the sides.
   Zoomed in: the art is wider than the window; it stays anchored left and the server panel docks to the right edge. */
.hero-frame{position:relative;overflow:hidden;background:var(--ink)}
@media (min-width:1024px){
  /* the hero is one fixed 1672px canvas; script sets --k = window width / 1672, so every element
     (text, panel, buttons, glow) scales together and keeps its place at any window width or browser zoom */
  .hero-frame>.hero{width:1672px;zoom:var(--k,1);margin:0}
  .site-head,.hall,.support-sec,footer{zoom:var(--hk,1)}
}

/* ================= Home: news + broadcasts ================= */
.home-sec{padding-block:96px}
.home-sec .sec-bg{opacity:.32}
.home-sec .sec-bg::after{background:linear-gradient(180deg,var(--ink) 0%,rgba(8,7,7,.35) 22%,rgba(8,7,7,.45) 75%,var(--ink) 100%)}

.frost-head{gap:4px;margin-bottom:52px}
.frost-sub{font:500 1.25rem/1.3 var(--display);letter-spacing:.02em;color:var(--ivory);text-transform:none}
.sec-head h2.frost-title{display:block;font:600 clamp(2.6rem,5.6vw,4.4rem)/1.05 var(--display);letter-spacing:.02em;color:var(--ice);text-shadow:0 0 18px rgba(150,205,255,.45),0 0 2px rgba(255,255,255,.6)}
.sec-head h2.frost-title::before,.sec-head h2.frost-title::after{display:none}

.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.news-card{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;min-height:560px;padding:26px 30px 32px;border-radius:12px;border:1px solid rgba(90,37,33,.9);background:#0b0909;color:var(--ivory);text-align:left;font:inherit;cursor:pointer;box-shadow:0 24px 60px rgba(0,0,0,.55);transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .35s}
.news-img{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center 10%;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter .5s;filter:saturate(.95)}
.news-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,7,7,.35) 0%,rgba(8,7,7,0) 22%,rgba(8,7,7,.2) 45%,rgba(8,6,6,.88) 72%,#080606 100%)}
.news-card:hover,.news-card:focus-visible{transform:translateY(-6px);border-color:rgba(217,188,129,.55);box-shadow:0 30px 70px rgba(0,0,0,.65),0 0 34px rgba(240,23,38,.22);outline:none}
.news-card:hover .news-img,.news-card:focus-visible .news-img{transform:scale(1.06);filter:saturate(1.1) brightness(1.06)}
.news-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.news-date{display:inline-flex;align-items:center;gap:8px;font:600 .95rem/1 var(--body);color:var(--ivory);text-shadow:0 1px 4px rgba(0,0,0,.8);font-variant-numeric:tabular-nums}
.news-date svg{width:15px;height:15px;color:var(--gold)}
.news-tag{display:inline-block;padding:9px 18px;border-radius:12px;background:rgba(8,7,7,.85);border:1px solid rgba(217,188,129,.3);font:600 .98rem/1 var(--display);color:var(--ivory);letter-spacing:.03em}
.news-copy{display:flex;flex-direction:column;gap:14px}
.news-copy h3{font:600 1.75rem/1.15 var(--display);color:var(--ice);text-shadow:0 0 12px rgba(150,205,255,.3)}
.news-copy p{color:#e6dad2;font-size:1rem;line-height:1.6;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.news-more{font:600 .88rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);opacity:.75;transition:opacity .25s,letter-spacing .3s}
.news-card:hover .news-more{opacity:1;letter-spacing:.18em}

.stream-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.stream-card{position:relative;aspect-ratio:16/10;border-radius:10px;overflow:hidden;border:1px solid rgba(160,190,220,.28);background:rgba(10,14,20,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:border-color .3s,box-shadow .3s,transform .3s}
.stream-card.has-stream{background:#000;border-color:color-mix(in srgb,var(--pc) 45%,transparent)}
.stream-card iframe{position:absolute;inset:0;width:100%;height:calc(100% - 40px);border:0}
.stream-ph{position:absolute;inset:0 0 40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:16px;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--pc) 22%,#000),#050505 75%)}
.stream-ph svg{width:44px;height:44px;color:var(--pc)}
.stream-ph b{font:600 1.35rem/1.2 var(--display);color:#fff}
.stream-ph small{color:var(--muted);font-size:.85rem}
.stream-link{position:absolute;left:0;right:0;bottom:0;height:40px;display:flex;align-items:center;gap:8px;padding:0 14px;background:#0b0a0b;border-top:1px solid rgba(255,255,255,.06);color:var(--ivory);text-decoration:none;font:600 .92rem/1 var(--display);letter-spacing:.03em}
.stream-link svg{width:18px;height:18px;color:var(--pc);flex:none}
.stream-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stream-link:hover{color:#fff;background:#151214}
.stream-card.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:20px}
.stream-card.empty .cast{width:54px;height:54px;color:#f2f6fa;filter:drop-shadow(0 0 10px rgba(150,205,255,.35));animation:castPulse 2.6s ease-in-out infinite}
.stream-card.empty p{font:500 1.05rem/1.3 var(--body);color:var(--ivory)}
.add-stream{background:none;border:0;padding:4px 6px;cursor:pointer;font:600 1.02rem/1 var(--body);color:var(--ice);transition:color .2s,letter-spacing .25s,text-shadow .25s}
.add-stream:hover,.add-stream:focus-visible{color:#fff;letter-spacing:.03em;text-shadow:0 0 10px rgba(150,205,255,.6);outline:none}
.stream-card.empty:hover{border-color:rgba(206,234,255,.55);box-shadow:0 0 26px rgba(150,205,255,.15);transform:translateY(-3px)}
@keyframes castPulse{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}

.news-modal{width:min(720px,calc(100vw - 32px))}
.news-modal .panel{padding:0;overflow:hidden}
.nm-img{width:100%;height:260px;object-fit:cover;object-position:center 25%}
.nm-body{padding:24px 30px 30px;display:flex;flex-direction:column;gap:12px}
.nm-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.nm-body h2{font:600 2rem/1.15 var(--display);color:var(--ice)}
#nmText{display:flex;flex-direction:column;gap:10px;color:#e6dad2}
.news-modal .modal-x{z-index:2}

@media (max-width:1023px){
  .home-sec{padding-block:64px}
  .news-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .news-card{min-height:440px}
  .stream-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .stream-grid{grid-template-columns:minmax(0,1fr)}
  .news-card{min-height:400px;padding:22px}
  .frost-sub{font-size:1.05rem}
}

/* =====================================================================
   ATMOSPHERE & PREMIUM MOTION
   ===================================================================== */
/* --- veil: first-visit intro + curtain between pages (pure CSS, can't get stuck) --- */
.veil{position:fixed;inset:0;z-index:200;display:grid;place-items:center;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 50%,#2a0608 0%,#0b0607 55%,#050404 100%);
  clip-path:inset(0 0 0 0);animation:veilOut .75s cubic-bezier(.7,0,.2,1) .05s forwards}
.veil-in{display:flex;flex-direction:column;align-items:center;gap:18px;opacity:0}
.veil-in img{width:min(340px,70vw);filter:drop-shadow(0 0 18px rgba(170,215,255,.55))}
.veil-in i{display:block;height:1px;width:0;background:linear-gradient(90deg,transparent,var(--crimson),var(--gold),var(--crimson),transparent);box-shadow:0 0 12px var(--crimson)}
:root[data-intro] .veil{animation:veilOut .95s cubic-bezier(.7,0,.2,1) 1.35s forwards}
:root[data-intro] .veil-in{animation:veilLogo 1.6s ease-out both}
:root[data-intro] .veil-in i{animation:veilLine 1.1s .25s cubic-bezier(.2,.7,.2,1) forwards}
:root.leaving .veil{animation:veilIn .42s cubic-bezier(.7,0,.3,1) forwards;pointer-events:all}
:root.leaving .veil-in{opacity:0;animation:none}
@keyframes veilOut{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
@keyframes veilIn{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes veilLogo{0%{opacity:0;transform:scale(.94);filter:blur(6px)}35%{opacity:1;transform:none;filter:none}80%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
@keyframes veilLine{to{width:min(420px,70vw)}}

/* --- scroll progress --- */
.scroll-bar{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);height:2px;z-index:60;pointer-events:none}
.scroll-bar i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,#6d0308,var(--crimson) 60%,var(--gold));box-shadow:0 0 10px var(--crimson)}

/* --- cursor light (desktop) --- */
.cursor-light-unused{position:fixed;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;z-index:45;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(255,120,80,.13) 0%,rgba(240,23,38,.07) 30%,transparent 65%);mix-blend-mode:screen;opacity:0;transition:opacity .6s}
.cursor-light.on{opacity:1}

/* --- hero lighting: candle flicker, potion glow, moon, fog --- */
.hero-lights{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero-lights i{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);border-radius:50%;translate:-50% -50%;mix-blend-mode:screen}
.flame{width:calc(9cqw * var(--s,1));height:calc(9cqw * var(--s,1));background:radial-gradient(circle,rgba(255,200,120,.55) 0%,rgba(255,140,60,.22) 28%,rgba(240,60,20,.06) 55%,transparent 70%);animation:flicker 2.7s steps(1,end) infinite,flickerSoft 4.3s ease-in-out infinite}
.flame:nth-child(2n){animation-duration:3.4s,5.1s;animation-delay:-.8s,-1.3s}
.flame:nth-child(3n){animation-duration:2.2s,3.7s;animation-delay:-1.4s,-.5s}
@keyframes flicker{0%{opacity:.9}12%{opacity:.62}17%{opacity:1}34%{opacity:.78}41%{opacity:.95}58%{opacity:.7}63%{opacity:1}80%{opacity:.82}100%{opacity:.9}}
@keyframes flickerSoft{0%,100%{scale:1}50%{scale:1.12}}
.potion{width:5cqw;height:5cqw;background:radial-gradient(circle,rgba(255,40,60,.55),rgba(200,0,30,.15) 45%,transparent 70%);animation:potion 3.6s ease-in-out infinite}
.potion+.potion{animation-delay:-1.8s}
@keyframes potion{0%,100%{opacity:.45;scale:.9}50%{opacity:1;scale:1.15}}
.moon{width:9cqw;height:9cqw;background:radial-gradient(circle,rgba(200,225,255,.35),rgba(140,180,255,.12) 40%,transparent 70%);animation:moon 7s ease-in-out infinite}
@keyframes moon{0%,100%{opacity:.6}50%{opacity:1;scale:1.08}}
.hero-lights .fog{border-radius:0;translate:none;left:-20%;top:auto;bottom:-6%;width:140%;height:42%;mix-blend-mode:screen;filter:blur(10px)}
.fog-a{background:radial-gradient(ellipse 30% 60% at 20% 70%,rgba(160,120,130,.16),transparent 70%),radial-gradient(ellipse 25% 50% at 65% 80%,rgba(130,110,140,.13),transparent 70%);animation:fogA 46s linear infinite alternate}
.fog-b{background:radial-gradient(ellipse 35% 55% at 45% 75%,rgba(170,90,90,.12),transparent 70%),radial-gradient(ellipse 20% 45% at 85% 70%,rgba(140,130,160,.12),transparent 70%);animation:fogB 62s linear infinite alternate}
@keyframes fogA{from{transform:translateX(-6%)}to{transform:translateX(10%)}}
@keyframes fogB{from{transform:translateX(8%)}to{transform:translateX(-9%)}}

/* --- logo: frost glow breathing + light sweep through the letters --- */
.hero-logo img{width:100%;filter:drop-shadow(0 0 0 rgba(160,210,255,0));animation:logoGlow 5.5s ease-in-out 1.6s infinite}
@keyframes logoGlow{0%,100%{filter:drop-shadow(0 0 4px rgba(160,210,255,.15))}50%{filter:drop-shadow(0 0 22px rgba(160,210,255,.55))}}
.logo-shine{position:absolute;inset:0;pointer-events:none;-webkit-mask:url("../img/logo-hero.webp") center/100% 100% no-repeat;mask:url("../img/logo-hero.webp") center/100% 100% no-repeat;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.85) 48%,rgba(190,230,255,.6) 52%,transparent 65%) no-repeat;background-size:250% 100%;background-position:130% 0;mix-blend-mode:screen;animation:logoSweep 7s ease-in-out 2.2s infinite}
@keyframes logoSweep{0%{background-position:130% 0}28%,100%{background-position:-30% 0}}

/* --- scroll cue --- */
.scroll-cue{position:absolute;left:50%;bottom:2.2cqw;translate:-50% 0;z-index:3;width:30px;height:48px;border-radius:16px;border:2px solid rgba(217,188,129,.6);background:rgba(8,7,7,.35);cursor:pointer;padding:0;box-shadow:0 0 16px rgba(0,0,0,.6)}
.scroll-cue span{position:absolute;left:50%;top:9px;width:4px;height:9px;margin-left:-2px;border-radius:2px;background:var(--gold);animation:cue 1.9s ease-in-out infinite}
.scroll-cue:hover{border-color:var(--gold);box-shadow:0 0 18px rgba(240,23,38,.45)}
@keyframes cue{0%{opacity:0;translate:0 0}25%{opacity:1}80%{opacity:0;translate:0 16px}100%{opacity:0}}

/* --- section dividers (home) --- */
.divider{position:relative;height:1px;max-width:1100px;margin:0 auto;z-index:2}
.divider::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(217,188,129,.55) 30%,var(--crimson) 50%,rgba(217,188,129,.55) 70%,transparent);transform:scaleX(0);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.divider::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;background:var(--crimson);border:1px solid var(--gold);transform:translate(-50%,-50%) rotate(45deg) scale(0);box-shadow:0 0 14px var(--crimson);transition:transform .6s .7s cubic-bezier(.2,1.4,.4,1)}
.divider.in::before{transform:scaleX(1)}
.divider.in::after{transform:translate(-50%,-50%) rotate(45deg) scale(1)}

/* --- section fog + parallax backgrounds --- */
.sec-fog{position:absolute;inset:-10% -20%;z-index:0;pointer-events:none;mix-blend-mode:screen;opacity:.8;
  background:radial-gradient(ellipse 30% 40% at 25% 80%,rgba(150,110,120,.10),transparent 70%),radial-gradient(ellipse 35% 45% at 75% 20%,rgba(120,120,160,.08),transparent 70%);animation:fogA 50s linear infinite alternate}
.sec-bg{translate:none}

/* --- letter-by-letter frost titles --- */
.frost-title .ch{display:inline-block;white-space:pre;opacity:0;transform:translateY(.35em) scale(.96);filter:blur(6px);transition:opacity .7s,transform .7s cubic-bezier(.2,.7,.2,1),filter .7s;transition-delay:calc(var(--i) * 45ms)}
.frost-head.in .frost-title .ch{opacity:1;transform:none;filter:none}
.frost-head .frost-sub{opacity:0;transform:translateY(8px);transition:opacity .8s,transform .8s}
.frost-head.in .frost-sub{opacity:1;transform:none}
.frost-title{animation:frostPulse 6s ease-in-out 2s infinite}
@keyframes frostPulse{0%,100%{text-shadow:0 0 18px rgba(150,205,255,.45),0 0 2px rgba(255,255,255,.6)}50%{text-shadow:0 0 34px rgba(150,205,255,.75),0 0 4px rgba(255,255,255,.9)}}
.sec-head h1{background:linear-gradient(100deg,var(--ivory) 40%,#fff 50%,var(--ivory) 60%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:titleSheen 6s ease-in-out 1s infinite}
@keyframes titleSheen{0%{background-position:120% 0}35%,100%{background-position:-20% 0}}

/* --- 3D tilt + glare cards --- */
.tilt{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .35s;will-change:transform}
.tilt.tilting{transition:transform .08s linear,border-color .3s,box-shadow .35s}
.tilt:hover,.tilt:focus-visible{--lift:-6px}
.server.tilt:hover,.item.tilt:hover,.file.tilt:hover,.step.tilt:hover,.news-card.tilt:hover,.stream-card.tilt:hover,.feat.tilt:hover,.soc.tilt:hover{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px))}
.glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:0;transition:opacity .4s;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,235,220,.16),rgba(240,23,38,.06) 30%,transparent 60%);mix-blend-mode:screen}
.tilt:hover .glare{opacity:1}

/* --- ripple + magnetic buttons --- */
.btn{overflow:hidden}
.ripple{position:absolute;border-radius:50%;pointer-events:none;width:20px;height:20px;margin:-10px 0 0 -10px;background:radial-gradient(circle,rgba(255,230,220,.55),rgba(255,120,100,.15) 60%,transparent 70%);animation:ripple .7s ease-out forwards}
@keyframes ripple{to{transform:scale(18);opacity:0}}
.btn.magnet{translate:var(--mgx,0) var(--mgy,0);transition:translate .35s cubic-bezier(.2,.7,.2,1),filter .15s,box-shadow .2s}

/* --- extra polish --- */
.site-head .nav-link,.site-head .nav-drop>button{transition:color .25s,text-shadow .25s}
.site-head .nav-link:hover,.site-head .nav-drop>button:hover{color:#fff;text-shadow:0 0 12px rgba(240,23,38,.55)}
.pill{position:relative;overflow:hidden}
.pill::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%) 0 0/300% 100%;animation:pillSheen 4s ease-in-out infinite}
@keyframes pillSheen{0%{background-position:130% 0}40%,100%{background-position:-30% 0}}
.hs-row img,.server-top img{transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .5s}
.hs-row:hover img,.server:hover .server-top img{transform:scale(1.08) rotate(-3deg);filter:drop-shadow(0 0 10px rgba(240,23,38,.6))}
.hero-social a{animation:socFloat 5s ease-in-out infinite}
.hero-social a:nth-child(2){animation-delay:-1s}.hero-social a:nth-child(3){animation-delay:-2s}.hero-social a:nth-child(4){animation-delay:-3s}.hero-social a:nth-child(5){animation-delay:-4s}
@keyframes socFloat{0%,100%{box-shadow:0 0 0 1px rgba(217,188,129,.25)}50%{box-shadow:0 0 0 1px rgba(217,188,129,.5),0 0 14px rgba(240,23,38,.35)}}
.timer div{position:relative;overflow:hidden}
.timer div::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(240,23,38,.12) 50%,transparent 55%);animation:scan 3.5s linear infinite}
@keyframes scan{from{transform:translateY(-100%)}to{transform:translateY(100%)}}
footer{position:relative;overflow:hidden}
footer::before{content:"";position:absolute;left:50%;top:0;width:60%;height:1px;translate:-50% 0;background:linear-gradient(90deg,transparent,var(--crimson),transparent);box-shadow:0 0 18px 2px rgba(240,23,38,.5);animation:footGlow 5s ease-in-out infinite}
@keyframes footGlow{0%,100%{opacity:.4;width:40%}50%{opacity:1;width:70%}}
::selection{background:rgba(240,23,38,.45);color:#fff}
html{scrollbar-color:#5a2521 #0a0808}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#0a0808}::-webkit-scrollbar-thumb{background:linear-gradient(#8d050b,#5a2521);border-radius:5px;border:2px solid #0a0808}

@media (max-width:1023px){
  .hero-logo{position:relative}
  .scroll-cue,.hero-lights .flame,.hero-lights .potion,.hero-lights .moon{display:none}
}
@media (prefers-reduced-motion:reduce){
  .veil,.cursor-light,.hero-lights,.logo-shine,.sec-fog,.scroll-cue span{display:none!important}
  .frost-title .ch,.frost-head .frost-sub{opacity:1!important;transform:none!important;filter:none!important}
  .tilt{transform:none!important}
}

/* generated gothic nave backdrop for home sections */
.home-sec .sec-bg.gothic{opacity:1;inset:-60px 0;background-size:cover;background-position:center 40%;filter:none}
.home-sec .sec-bg.gothic.flip{background-position:center 45%;transform:scaleX(-1)}
.home-sec .sec-bg.gothic::after{background:linear-gradient(180deg,var(--ink) 0%,rgba(8,7,7,.1) 16%,rgba(8,7,7,.2) 72%,var(--ink) 100%)}

/* one continuous hall behind News + Broadcasts: image at its natural ratio, floor continues as a fading reflection */
.hall{position:relative;isolation:isolate;background:var(--ink)}
.hall>.home-sec{background:transparent}
.hall-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;display:flex;flex-direction:column}
.hall-bg i{flex:none;width:100%;aspect-ratio:1672/941;background:url("../img/hall-bg.webp") center/100% 100% no-repeat}
.hall-bg .b{position:relative;transform:scaleY(-1);margin-top:-1px}
.hall-bg .b::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,7,7,.12) 0%,rgba(8,7,7,.5) 10%,rgba(8,7,7,.78) 45%,var(--ink) 100%)}
.hall-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,var(--ink) 0,rgba(8,7,7,0) 120px),
  linear-gradient(0deg,var(--ink) 0,rgba(8,7,7,0) 160px),
  linear-gradient(90deg,rgba(8,7,7,.35),rgba(8,7,7,0) 18%,rgba(8,7,7,0) 82%,rgba(8,7,7,.35))}
.hall .divider{margin-top:-1px}
@media (max-width:760px){
  .hall-bg i.a{height:900px;aspect-ratio:auto;background-size:cover;background-position:50% 40%;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
  .hall-bg i.b{display:none}
}

/* ================= Support ================= */
.support-sec{padding-block:90px 110px}
.support-bg{background:url("../img/hall-bg.webp") center 70%/cover no-repeat;opacity:.5;filter:blur(3px) saturate(.85);transform:scaleX(-1)}
.support-bg::after{background:linear-gradient(180deg,var(--ink) 0%,rgba(8,7,7,.45) 30%,rgba(8,7,7,.5) 70%,var(--ink) 100%)!important}
.support-grid{display:grid;grid-template-columns:repeat(3,minmax(0,240px));justify-content:center;gap:56px}
.sup-card{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;background:none;border:0;padding:10px;color:var(--ivory);cursor:pointer;font:inherit}
.sup-orb{position:relative;display:grid;place-items:center;width:104px;height:104px;border-radius:50%;margin-bottom:8px;color:#fff;
  background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--c) 85%,#fff 10%),var(--c2) 70%);
  box-shadow:0 0 0 6px rgba(8,7,7,.85),0 0 0 8px color-mix(in srgb,var(--c) 70%,transparent),0 0 30px 6px color-mix(in srgb,var(--c) 45%,transparent);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.sup-orb svg{width:46px;height:46px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.sup-orb::before{content:"";position:absolute;inset:-16px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--c) 55%,transparent);border-left-color:transparent;border-bottom-color:transparent;animation:orbit 7s linear infinite}
.sup-orb::after{content:"";position:absolute;inset:-16px;border-radius:50%;background:radial-gradient(circle at 50% 0,var(--c) 0 3px,transparent 4px),radial-gradient(circle at 50% 100%,var(--c) 0 3px,transparent 4px);animation:orbit 11s linear infinite reverse;filter:drop-shadow(0 0 4px var(--c))}
@keyframes orbit{to{transform:rotate(360deg)}}
.sup-card h3{font:600 1.45rem/1.1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--ivory)}
.sup-card p{max-width:22ch;color:var(--muted);font-size:.95rem;line-height:1.5}
.sup-card:hover .sup-orb,.sup-card:focus-visible .sup-orb{transform:translateY(-6px) scale(1.06);box-shadow:0 0 0 6px rgba(8,7,7,.85),0 0 0 8px var(--c),0 0 46px 12px color-mix(in srgb,var(--c) 55%,transparent)}
.sup-card:hover h3{color:#fff;text-shadow:0 0 14px color-mix(in srgb,var(--c) 70%,transparent)}
.sup-card:focus-visible{outline:none}
.field textarea{width:100%;padding:12px 14px;border-radius:9px;background:#090808;border:1px solid #3a2523;color:var(--ivory);font:1rem/1.5 var(--body);resize:vertical;min-height:120px}
.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(217,188,129,.18)}
.field.bad textarea{border-color:var(--crimson)}
#ticketModal{width:min(560px,calc(100vw - 32px))}
#ticketModal form{gap:14px}
@media (max-width:760px){
  .support-grid{grid-template-columns:minmax(0,1fr);gap:40px}
}

.field.good input,.field.good textarea{border-color:#3e6d4c;box-shadow:none}

/* ================= Support cards: forged frame with icon in the ring and text on the plate ================= */
.support-grid{grid-template-columns:repeat(3,minmax(0,330px));gap:clamp(12px,2vw,40px)}
.sup-card{position:relative;display:block;width:100%;aspect-ratio:955/931;padding:0;gap:0;text-align:center;
  background:url("../img/support-frame.webp") center/100% 100% no-repeat;filter:drop-shadow(0 18px 24px rgba(0,0,0,.6));transition:transform .45s cubic-bezier(.2,.7,.2,1),filter .45s}
.sup-card .sup-orb{position:absolute;left:28.6%;top:19.6%;width:43%;height:auto;aspect-ratio:1;margin:0;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--c) 38%,#1a0a0c) 0%,rgba(10,6,7,.1) 70%,transparent 100%);box-shadow:none;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.sup-card .sup-orb::before,.sup-card .sup-orb::after{display:none}
.sup-card .sup-orb svg{width:52%;height:52%;color:#fff2ee;filter:drop-shadow(0 0 10px var(--c)) drop-shadow(0 0 22px color-mix(in srgb,var(--c) 70%,transparent));animation:supGlow 3.4s ease-in-out infinite}
@keyframes supGlow{0%,100%{filter:drop-shadow(0 0 8px var(--c)) drop-shadow(0 0 16px color-mix(in srgb,var(--c) 55%,transparent))}50%{filter:drop-shadow(0 0 14px var(--c)) drop-shadow(0 0 34px color-mix(in srgb,var(--c) 85%,transparent))}}
.sup-plate{position:absolute;left:10.6%;width:78.5%;top:70.4%;height:18.9%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25em;padding:0 9%;container-type:inline-size}
.sup-card h3{font:600 clamp(1.15rem,2.1vw,1.7rem)/1.1 var(--display);letter-spacing:.03em;text-transform:none;color:#f6ece6}
.sup-card p{max-width:none;margin:0;font:500 clamp(.62rem,.9vw,.78rem)/1.25 var(--display);letter-spacing:.07em;text-transform:uppercase;color:#cdb4ad}
.sup-go{position:absolute;right:12.5%;top:79.5%;width:.7em;height:.7em;border:solid #f6ece6;border-width:0 2px 2px 0;transform:translateY(-50%) rotate(-45deg);font-size:clamp(.8rem,1.2vw,1rem);opacity:.85}
.sup-card:hover,.sup-card:focus-visible{transform:translateY(-6px);filter:drop-shadow(0 18px 24px rgba(0,0,0,.6)) drop-shadow(0 0 26px rgba(240,23,38,.55)) brightness(1.12)}
.sup-card:hover .sup-orb,.sup-card:focus-visible .sup-orb{transform:scale(1.06);box-shadow:none}
.sup-card:hover h3{text-shadow:0 0 14px rgba(240,23,38,.6)}
@media (max-width:760px){
  .support-grid{grid-template-columns:minmax(0,340px);gap:18px}
  .sup-card h3{font-size:1.45rem}.sup-card p{font-size:.72rem}
}
.support-grid{grid-template-columns:repeat(3,minmax(0,400px))}
.sup-plate{padding:0 7%;gap:.2em}
.sup-card h3{font-size:8cqw;white-space:nowrap}
.sup-card p{font-size:3.5cqw;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sup-go{font-size:min(1.1vw,1rem)}
@media (max-width:760px){.support-grid{grid-template-columns:minmax(0,360px)}.sup-card h3{font-size:8cqw}.sup-card p{font-size:3.5cqw}}
.sup-card h3{font-size:10.5cqw}
.sup-card p{font-size:4cqw;letter-spacing:.03em}
@media (max-width:760px){.sup-card h3{font-size:10.5cqw}.sup-card p{font-size:4cqw}}
.sup-card p,.sup-card p{font-size:3.7cqw!important}
/* medallion icons sit in the ring of the frame */
.sup-card .sup-orb{left:24.6%;top:15%;width:51%;overflow:hidden;background:none}
.sup-card .sup-orb img{width:100%;height:100%;border-radius:50%;mix-blend-mode:screen;transition:filter .45s,transform .45s}
.sup-card:hover .sup-orb img,.sup-card:focus-visible .sup-orb img{filter:brightness(1.25) saturate(1.2)}
/* plate text: warm blush with a faint red glow */
.sup-card h3{color:#f8dcd3;text-shadow:0 0 10px rgba(240,40,40,.45),0 1px 2px rgba(40,0,0,.9)}
.sup-card p{color:#e9b0a6!important;text-shadow:0 0 8px rgba(240,40,40,.35)}
.sup-go{border-color:#f3c9c0;filter:drop-shadow(0 0 4px rgba(240,40,40,.7))}
.sup-card:hover h3{color:#fff0ea;text-shadow:0 0 16px rgba(255,60,50,.8),0 1px 2px rgba(40,0,0,.9)}
/* the medallion must stay inside the ring on hover: light it up, never scale it */
.sup-card:hover .sup-orb,.sup-card:focus-visible .sup-orb{transform:none}
.sup-card:hover .sup-orb img,.sup-card:focus-visible .sup-orb img{transform:none;filter:brightness(1.18) saturate(1.15)}
/* hover: gentle lift and a thin warm rim instead of a heavy red halo */
.sup-card:hover,.sup-card:focus-visible{transform:translateY(-4px);filter:drop-shadow(0 14px 18px rgba(0,0,0,.6)) drop-shadow(0 0 7px rgba(240,40,40,.28)) brightness(1.05)}
.sup-card:hover .sup-orb img,.sup-card:focus-visible .sup-orb img{filter:brightness(1.1) saturate(1.05)}
/* plate text: tighter side padding, larger type */
.sup-plate{padding:0 6%;gap:.22em}
.sup-card h3{font-size:12.5cqw}
.sup-card p{font-size:4.3cqw!important;letter-spacing:.025em}
@media (max-width:760px){.sup-card h3{font-size:12.5cqw}.sup-card p{font-size:4.3cqw!important}}
.sup-card p{font-size:3.9cqw!important;letter-spacing:.02em}
@media (max-width:760px){.sup-card p{font-size:3.9cqw!important}}
.sup-plate{padding:0 3%}
.sup-card p{font-size:4cqw!important;letter-spacing:.015em}
@media (max-width:760px){.sup-card p{font-size:4cqw!important}}

/* support section: the gothic hall as-is, no dimming overlay */
.support-bg{background:url("../img/support-bg.webp") center/cover no-repeat;opacity:1;filter:none;transform:none;animation:none}
.support-bg::after{display:none!important}

:root:not([data-lang="en"]) .mp-plaque b{font-size:6.6cqw}
:root:not([data-lang="en"]) .mp-plaque i{font-size:7cqw}
.soc-cover{position:absolute;z-index:2;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u));pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,#060505 0,#060505 72%,rgba(6,5,5,.85) 88%,rgba(6,5,5,0) 100%)}

.hs-txt b .hs-rate{display:inline-block;margin-left:.5em;padding:.05em .5em;border-radius:6px;font:700 .62em/1.5 var(--display,inherit);font-style:normal;letter-spacing:.04em;color:#ffd9dc;background:linear-gradient(180deg,#8d050b,#5e0307);vertical-align:.18em;white-space:nowrap}