:root{
  --bg:#050810;
  --bg-alt:#080d18;
  --panel:#0c1424;
  --frost:#6fd8ff;
  --frost-dim:#2b7fb0;
  --frost-glow:#bff0ff;
  --text:#e4eef5;
  --text-dim:#8ea2b3;
  --border:#16233a;
  --font-display:'Cinzel', 'Georgia', serif;
  --font-body:'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}
@view-transition{ navigation:auto; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.45s; animation-timing-function:cubic-bezier(.4,0,.2,1); }

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}

::selection{background:rgba(111,216,255,0.28); color:#fff;}

:focus-visible{outline:2px solid var(--frost-dim); outline-offset:3px; border-radius:2px;}

::-webkit-scrollbar{width:11px; height:11px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--panel); border:2px solid var(--bg); border-radius:20px;}
::-webkit-scrollbar-thumb:hover{background:var(--frost-dim);}
html{scrollbar-color:var(--panel) var(--bg); scrollbar-width:thin;}

/* ---------- SCROLL REVEAL ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);}
.reveal.in-view{opacity:1; transform:translateY(0);}

/* ---------- TAB PANELS (armory character sheet / profile account) ---------- */
/* [hidden] alone loses to .armory-layout/.profile-layout's own `display:grid` — force it. */
[data-tab-panel][hidden]{display:none !important;}

/* ---------- INTERACTIVE CARDS — cursor-spotlight glow + 3D tilt ----------
   Classes are added by js/main.js (desktop-with-mouse only) to a curated set of
   existing cards; --mx/--my/--tilt-rx/--tilt-ry are set live via mousemove. */
.glow-hover{position:relative; overflow:hidden; isolation:isolate;}
.glow-hover::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(111,216,255,0.22), transparent 70%);
  opacity:0; transition:opacity .35s ease; mix-blend-mode:screen;
}
.glow-hover:hover::after{opacity:1;}
.tilt-hover{transition:transform .35s ease;}

/* ---------- AMBIENT FROST PARTICLES (canvas injected into .hero / .page-banner) ---------- */
.frost-canvas{position:absolute; inset:0; z-index:1; pointer-events:none; display:block;}

/* ---------- FILM-GRAIN TEXTURE (fixed, whole-page, subtle) ---------- */
/* Low z-index on purpose — this must never sit above real UI (e.g. the evowow
   item-tooltip widget), just add a barely-visible texture under everything interactive. */
.grain-overlay{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:0.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:180px 180px;
}

/* ---------- BLUR-UP FADE-IN — perceived-load smoothing for <img> and hero/banner/card art ---------- */
/* `img.img-fade` (element+class) outranks later same-specificity `.gallery .shot img` etc.
   transition rules, so the opacity/filter transition always survives regardless of source order. */
img.img-fade{opacity:0; filter:blur(16px); transform:scale(1.03); transition:opacity .6s ease, filter .6s ease, transform .6s ease !important;}
img.img-fade.img-fade-in{opacity:1; filter:blur(0); transform:scale(1);}
.bg-fade{opacity:0; filter:blur(20px); transition:opacity .7s ease, filter .7s ease;}
.bg-fade.bg-fade-in{opacity:1; filter:blur(0);}

/* ---------- NAV ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:22px 5%;
  background:linear-gradient(to bottom, rgba(5,8,16,0.9), rgba(5,8,16,0));
  transition:background .35s ease, padding .35s ease, border-color .35s ease, backdrop-filter .35s ease;
  border-bottom:1px solid transparent;
}
header.scrolled{
  padding:14px 5%;
  background:rgba(5,8,16,0.88);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg, transparent, var(--frost-dim) 50%, transparent) 1;
}
.logo-wrap{display:flex; align-items:center; gap:10px; justify-self:start;}
.logo-icon{width:26px; height:26px; flex-shrink:0;}
.logo{
  font-family:var(--font-display);
  font-size:1.5rem; font-weight:700; letter-spacing:3px;
  text-transform:uppercase;
  background:linear-gradient(135deg, var(--frost-glow), var(--frost));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.logo span{color:var(--text-dim); -webkit-text-fill-color:var(--text-dim);}
nav{justify-self:center;}
nav ul{display:flex; gap:34px;}
nav a{
  font-size:0.78rem; letter-spacing:1.8px; text-transform:uppercase;
  color:var(--text-dim); transition:color .25s; position:relative; padding-bottom:4px;
}
nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--frost-glow); transition:width .3s ease;
}
nav a:hover{color:var(--frost-glow);}
nav a:hover::after{width:100%;}
nav a.current{color:var(--frost-glow);}
nav a.current::after{width:100%;}

/* ---------- NAV DROPDOWN (submenus) ---------- */
.has-submenu{position:relative;}
.has-submenu .caret{display:inline-block; font-size:0.6rem; margin-left:5px; opacity:0.7; transition:transform .2s;}
.has-submenu:hover .caret{transform:translateY(1px);}
.submenu{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  padding-top:12px;
  opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease;
  z-index:50;
}
.has-submenu:hover .submenu{opacity:1; visibility:visible;}
.submenu-inner{
  background:rgba(8,13,24,0.97); border:1px solid var(--border); border-radius:8px; padding:8px;
  min-width:170px; box-shadow:0 20px 45px rgba(0,0,0,0.5); backdrop-filter:blur(10px);
}
.submenu-inner a{
  display:block; padding:10px 14px; border-radius:5px; text-align:center;
  font-size:0.76rem; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--text-dim); transition:background .2s ease, color .2s ease;
}
.submenu-inner a:hover{background:rgba(111,216,255,0.08); color:var(--frost-glow);}
.submenu-inner a::after{content:none;}

.nav-right{display:flex; align-items:center; gap:26px; justify-self:end;}
.nav-search-btn{
  font-size:1.05rem; color:var(--text-dim); transition:color .2s ease, transform .2s ease;
  display:flex; align-items:center;
}
.nav-search-btn:hover{color:var(--frost-glow); transform:scale(1.1);}
.lang-select{
  display:flex; gap:12px; font-size:0.74rem; color:var(--text-dim); letter-spacing:1px;
}
.lang-select span{cursor:pointer; transition:color .2s;}
.lang-select span.active, .lang-select span:hover{color:var(--frost-glow);}
.nav-actions{display:flex; gap:12px;}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-block;
  padding:13px 30px;
  font-size:0.76rem; letter-spacing:2px; text-transform:uppercase; font-weight:600;
  border-radius:2px; border:1px solid var(--frost-dim);
  color:var(--frost-glow);
  transition:all .3s ease;
  cursor:pointer;
  background:transparent;
  white-space:nowrap;
  position:relative;
}
.btn:hover{
  background:var(--frost);
  border-color:var(--frost);
  color:#040810;
  box-shadow:0 0 30px rgba(111,216,255,0.4);
  transform:translateY(calc(-2px + var(--mag-y,0px))) translateX(var(--mag-x,0px));
}
.btn-solid{
  background:linear-gradient(135deg, var(--frost), var(--frost-dim));
  border:1px solid transparent; color:#040810; font-weight:700;
  box-shadow:0 8px 24px rgba(111,216,255,0.18);
}
.btn-solid:hover{
  background:linear-gradient(135deg, var(--frost-glow), var(--frost));
  box-shadow:0 10px 34px rgba(111,216,255,0.5);
  transform:translateY(calc(-2px + var(--mag-y,0px))) translateX(var(--mag-x,0px));
  color:#040810;
}

/* ---------- HERO (full-bg, centered text) ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  overflow:hidden;
}
.hero-bg{
  position:absolute; top:-2%; left:-2%; right:-2%; bottom:-2%;
  background-image:url('../img/home-main.jpg');
  background-size:cover; background-position:center;
  will-change:transform;
}
.hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(4,7,13,0.35) 0%, rgba(4,7,13,0.55) 45%, var(--bg) 100%),
    radial-gradient(ellipse at 50% 30%, rgba(111,216,255,0.10), transparent 60%);
}
/* ---------- AURORA DRIFT — animated color-mesh layered over every hero/banner overlay ---------- */
.hero-overlay::after, .page-banner-overlay::after, .vision-hero-overlay::after, .final-cta-overlay::after{
  content:""; position:absolute; inset:-20%;
  background:
    radial-gradient(38% 30% at 30% 25%, rgba(111,216,255,0.16), transparent 70%),
    radial-gradient(32% 26% at 75% 70%, rgba(160,120,255,0.10), transparent 70%);
  mix-blend-mode:screen;
  animation:aurora-drift 26s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes aurora-drift{
  0%{transform:translate(-3%,-2%) scale(1);}
  50%{transform:translate(3%,2%) scale(1.08);}
  100%{transform:translate(-2%,3%) scale(1);}
}
@media(prefers-reduced-motion:reduce){
  .hero-overlay::after, .page-banner-overlay::after, .vision-hero-overlay::after, .final-cta-overlay::after{animation:none;}
}
.hero-content{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center;
  padding:160px 20px 100px;
}
/* ---------- PAGE EYEBROW (shared label used at the top of every page) ---------- */
.page-eyebrow{
  display:flex; align-items:center; gap:12px;
  color:var(--frost-glow); letter-spacing:3px; text-transform:uppercase; font-size:0.78rem;
  margin-bottom:20px;
}
.page-eyebrow .eyebrow-line{
  position:relative; width:34px; height:1px; flex-shrink:0;
  background:linear-gradient(90deg, var(--frost-glow), var(--frost-dim), transparent);
}
.page-eyebrow .eyebrow-line::before{
  content:""; position:absolute; left:-3px; top:50%; width:6px; height:6px;
  background:var(--frost-glow); transform:translateY(-50%) rotate(45deg);
  box-shadow:0 0 8px 1px rgba(111,216,255,0.6);
}
.page-eyebrow.centered{justify-content:center;}
.hero h1 .hero-ice{
  background:linear-gradient(135deg, var(--frost-glow), var(--frost));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero h1 .hero-shadow{
  background:linear-gradient(135deg, var(--frost-glow), var(--frost));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero h1{
  font-family:var(--font-display);
  font-size:clamp(2.6rem, 7vw, 5.6rem);
  font-weight:700; letter-spacing:3px; text-transform:uppercase;
  line-height:1.1;
  color:#fdfeff;
  text-shadow:0 0 40px rgba(111,216,255,0.45), 0 4px 30px rgba(0,0,0,0.6);
}
.hero p.sub{
  margin-top:26px; max-width:660px;
  color:var(--text-dim); font-size:1.08rem; line-height:1.8;
}
.hero-actions{margin-top:42px; display:flex; gap:18px; flex-wrap:wrap; justify-content:center;}

/* ---------- PAGE BANNER (subpages, shorter hero) ---------- */
.page-banner{
  position:relative; min-height:56vh;
  display:flex; align-items:flex-start; justify-content:center;
  text-align:center; overflow:hidden;
}
.page-banner-bg{
  position:absolute; top:-2%; left:-2%; right:-2%; bottom:-2%;
  background-size:cover; background-position:center;
}
.page-banner-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(4,7,13,0.45) 0%, rgba(4,7,13,0.65) 60%, var(--bg) 100%),
    radial-gradient(ellipse at 50% 30%, rgba(111,216,255,0.12), transparent 60%);
}
.page-banner-content{position:relative; z-index:2; padding:170px 20px 70px; max-width:720px;}
.page-banner h1 span{
  background:linear-gradient(135deg, var(--frost-glow), var(--frost));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:none;
}
.page-banner h1{
  font-family:var(--font-display); font-size:clamp(2.2rem,5.5vw,4rem);
  text-transform:uppercase; letter-spacing:2px; color:#fdfeff;
  text-shadow:0 0 40px rgba(111,216,255,0.4);
}
.page-banner p{color:var(--text-dim); margin-top:20px; line-height:1.8;}

/* ---------- COUNTDOWN ---------- */
.countdown-section{
  text-align:center; padding:0 5% 130px;
  background:var(--bg-alt);
}
.countdown-section .eyebrow{color:var(--frost-glow); letter-spacing:3px; text-transform:uppercase; font-size:0.78rem;}
.countdown-section h2{font-family:var(--font-display); font-size:clamp(1.6rem,3.6vw,2.5rem); margin-top:14px; letter-spacing:1px;}
.countdown{display:flex; gap:24px; justify-content:center; margin-top:50px;}
.countdown .box{
  width:90px; padding:18px 0;
  background:rgba(111,216,255,0.03); border:1px solid var(--border); border-radius:6px;
  transition:border-color .3s, box-shadow .3s;
}
.countdown .box:hover{border-color:var(--frost-dim); box-shadow:0 0 24px rgba(111,216,255,0.15);}
.countdown .num{font-family:var(--font-display); font-size:2.2rem; font-weight:700; color:var(--frost-glow); font-variant-numeric:tabular-nums;}
.countdown .lbl{font-size:0.65rem; letter-spacing:2px; text-transform:uppercase; color:var(--text-dim); margin-top:6px;}
.status-live{margin-top:30px; color:var(--frost-glow); letter-spacing:3px; font-size:0.85rem; text-transform:uppercase;}

/* ---------- LAUNCH PARTY (image left / text right) ---------- */
.launch-party{
  display:flex; align-items:center; gap:70px; padding:150px 5%; max-width:1200px; margin:0 auto;
  flex-wrap:wrap;
}
.launch-party .img{
  flex:1 1 380px; aspect-ratio:16/11; border-radius:12px; border:1px solid var(--border);
  overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,0.45);
  transition:transform .35s ease, box-shadow .35s ease;
}
.launch-party .img:hover{
  transform:perspective(900px) rotateX(var(--tilt-rx,0deg)) rotateY(var(--tilt-ry,0deg));
  box-shadow:0 30px 70px rgba(0,0,0,0.55);
}
.launch-party .img img{width:100%; height:100%; object-fit:cover; display:block;}

/* ---------- FRAMED SHOT — in-game screenshot treatment: corner brackets, caption chip,
   and the same darken-to-bg fade formula used on .hero-overlay/.page-banner-overlay ---------- */
.framed-shot{position:relative;}
.framed-shot img{filter:brightness(0.62) saturate(0.75) contrast(1.05);}
/* Same dark wash formula as .hero-overlay/.page-banner-overlay — keeps the photo in shadow
   like the header art, instead of sitting on top with its own vivid, competing colors. */
.framed-shot::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(4,7,13,0.35) 0%, rgba(4,7,13,0.55) 45%, var(--bg) 100%),
    radial-gradient(ellipse at 50% 30%, rgba(111,216,255,0.10), transparent 60%);
}
.frame-corner{position:absolute; width:22px; height:22px; z-index:3; pointer-events:none; opacity:0.85;}
.frame-corner.tl{top:12px; left:12px; border-top:2px solid var(--frost-glow); border-left:2px solid var(--frost-glow);}
.frame-corner.tr{top:12px; right:12px; border-top:2px solid var(--frost-glow); border-right:2px solid var(--frost-glow);}
.frame-corner.bl{bottom:12px; left:12px; border-bottom:2px solid var(--frost-glow); border-left:2px solid var(--frost-glow);}
.frame-corner.br{bottom:12px; right:12px; border-bottom:2px solid var(--frost-glow); border-right:2px solid var(--frost-glow);}
.img-caption{
  position:absolute; left:16px; bottom:16px; z-index:3;
  padding:6px 14px; border-radius:20px;
  background:rgba(5,8,16,0.65); backdrop-filter:blur(6px); border:1px solid rgba(111,216,255,0.25);
  color:var(--frost-glow); font-size:0.68rem; letter-spacing:1.5px; text-transform:uppercase;
}
.launch-party .txt{flex:1 1 380px;}
.launch-party .eyebrow{color:var(--frost-glow); letter-spacing:3px; text-transform:uppercase; font-size:0.78rem;}
.launch-party h2{font-family:var(--font-display); font-size:clamp(1.7rem,3.4vw,2.4rem); margin-top:16px; line-height:1.3; letter-spacing:0.5px;}
.launch-party p{color:var(--text-dim); margin-top:18px; line-height:1.8;}
.launch-party .hero-actions{justify-content:flex-start; margin-top:34px;}

/* ---------- VISION HERO (full-bg image + centered text) ---------- */
.vision-hero{position:relative; min-height:64vh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden;}
.vision-hero-bg{position:absolute; inset:-6%; background-image:url('../img/vision-bg.svg'); background-size:cover; background-position:center;}
.vision-hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(4,7,13,0.35) 0%, rgba(4,7,13,0.6) 65%, var(--bg) 100%), radial-gradient(ellipse at 50% 30%, rgba(111,216,255,0.1), transparent 60%);}
.vision-hero-content{position:relative; z-index:2; max-width:720px; padding:60px 20px;}
.vision-hero-content .eyebrow{color:var(--frost-glow); letter-spacing:3px; text-transform:uppercase; font-size:0.78rem;}
.vision-hero-content h2{font-family:var(--font-display); font-size:clamp(1.9rem,4vw,2.9rem); margin-top:16px; letter-spacing:1px; color:#fdfeff;}
.vision-hero-content p{color:var(--text-dim); margin-top:20px; line-height:1.85;}

/* ---------- VISION TEXT (plain, centered) ---------- */
.vision-text{padding:140px 5% 130px; max-width:640px; margin:0 auto; text-align:center;}
.vision-text .eyebrow{color:var(--frost-glow); letter-spacing:3px; text-transform:uppercase; font-size:0.75rem;}
.vision-text h3{font-family:var(--font-display); font-size:1.6rem; margin-top:14px; margin-bottom:18px; letter-spacing:0.5px; font-weight:600;}
.vision-text p{color:var(--text-dim); line-height:1.85;}
.vision-text a.discord-link{display:inline-block; margin-top:22px; color:var(--frost-glow); border-bottom:1px solid var(--frost-dim); padding-bottom:2px; transition:border-color .25s;}
.vision-text a.discord-link:hover{border-color:var(--frost-glow);}

/* ---------- SECTION SHARED ---------- */
.section-head{text-align:center; max-width:720px; margin:0 auto 70px;}
.section-head .eyebrow{color:var(--frost-glow); letter-spacing:3px; text-transform:uppercase; font-size:0.78rem;}
.section-head h2{font-family:var(--font-display); font-size:clamp(1.9rem, 4vw, 2.9rem); margin-top:16px; letter-spacing:1px; font-weight:600;}
.section-head p{color:var(--text-dim); margin-top:18px; line-height:1.75;}

/* ---------- FEATURES — zig-zag alternating rows ---------- */
.features-section{padding:0 5% 150px; background:var(--bg-alt);}
.features-list{max-width:1100px; margin:0 auto;}
.feature-row{
  display:flex; align-items:center; gap:70px;
  padding:64px 0; border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
.feature-row:last-of-type{border-bottom:none; padding-bottom:0;}
.feature-row.reverse{flex-direction:row-reverse;}
.feature-row-img{
  flex:1 1 380px; aspect-ratio:16/11; border-radius:12px; overflow:hidden;
  border:1px solid var(--border); box-shadow:0 20px 50px rgba(0,0,0,0.4);
  transition:transform .35s ease, box-shadow .35s ease;
}
.feature-row-img:hover{
  transform:perspective(900px) rotateX(var(--tilt-rx,0deg)) rotateY(var(--tilt-ry,0deg));
  box-shadow:0 26px 60px rgba(0,0,0,0.5);
}
.feature-row-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease;}
.feature-row-img:hover img{transform:scale(1.08);}
.feature-row-txt{flex:1 1 380px;}
.feature-row-txt .tag{color:var(--frost-glow); letter-spacing:2.5px; text-transform:uppercase; font-size:0.72rem;}
.feature-row-txt h3{font-family:var(--font-display); font-size:1.6rem; margin-top:12px; margin-bottom:16px; font-weight:600; letter-spacing:0.5px;}
.feature-row-txt p{color:var(--text-dim); line-height:1.85;}
.feature-row-txt .row-link{
  display:inline-block; margin-top:20px; color:var(--frost-glow);
  border-bottom:1px solid var(--frost-dim); padding-bottom:2px;
  font-size:0.78rem; letter-spacing:2px; text-transform:uppercase; transition:border-color .25s;
}
.feature-row-txt .row-link:hover{border-color:var(--frost-glow);}
.features-more{text-align:center; margin-top:70px;}

/* ---------- LANGUAGE SECTION ---------- */
.lang-section{padding:120px 5%; text-align:center;}
.lang-badges{display:flex; gap:18px; justify-content:center; margin-top:44px; flex-wrap:wrap;}
.lang-badges .badge{
  padding:11px 22px; border:1px solid var(--border); border-radius:30px;
  font-size:0.82rem; color:var(--text-dim); letter-spacing:0.5px; transition:border-color .25s, color .25s;
}
.lang-badges .badge.active{border-color:var(--frost-dim); color:var(--frost-glow);}
.lang-note{margin-top:24px; color:var(--text-dim); font-size:0.82rem; letter-spacing:0.5px;}

/* ---------- NARRATIVE ---------- */
.narrative{
  padding:170px 5%; text-align:center;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(111,216,255,0.08), transparent 65%),
    var(--bg-alt);
}
.narrative .eyebrow{color:var(--frost-glow); letter-spacing:3px; text-transform:uppercase; font-size:0.78rem;}
.narrative h2{font-family:var(--font-display); font-size:clamp(1.8rem,4vw,2.7rem); margin-top:16px; max-width:760px; margin-left:auto; margin-right:auto; font-weight:600;}
.narrative p{color:var(--text-dim); margin-top:24px; max-width:640px; margin-left:auto; margin-right:auto; line-height:1.9; font-style:italic;}

/* ---------- GALLERY (3x2 grid) ---------- */
.gallery-section{padding:0 5% 150px;}
.gallery{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; max-width:1200px; margin:0 auto;}
.gallery .shot{
  aspect-ratio:16/10; border-radius:14px; overflow:hidden; position:relative; border:1px solid var(--border);
  box-shadow:0 16px 40px rgba(0,0,0,0.35);
  transition:box-shadow .35s ease, border-color .35s ease, transform .35s ease;
}
.gallery .shot:hover{
  box-shadow:0 22px 55px rgba(111,216,255,0.18); border-color:var(--frost-dim);
  transform:perspective(900px) rotateX(var(--tilt-rx,0deg)) rotateY(var(--tilt-ry,0deg));
}
.gallery .shot img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease;}
.gallery .shot:hover img{transform:scale(1.08);}
.gallery .shot::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,0.65), transparent 45%); pointer-events:none;}
.gallery .shot .label{
  position:absolute; left:16px; bottom:14px; z-index:2;
  color:var(--text); font-size:0.8rem; letter-spacing:1.5px; text-transform:uppercase;
  text-shadow:0 2px 8px rgba(0,0,0,0.8);
}

/* ---------- FINAL CTA (full-bg image + centered text) ---------- */
.final-cta{position:relative; overflow:hidden;}
.final-cta-bg{
  position:absolute; inset:-6%;
  background-image:url('../img/home-main.jpg');
  background-size:cover; background-position:center;
}
.final-cta-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(4,7,13,0.35) 0%, rgba(4,7,13,0.55) 45%, rgba(4,7,13,0.85) 100%),
    radial-gradient(ellipse at 50% 30%, rgba(111,216,255,0.16), transparent 60%);
}
.final-cta-content{position:relative; z-index:2; text-align:center; padding:190px 5%;}
.final-cta-content h2{
  font-family:var(--font-display);
  font-size:clamp(2rem,5vw,3.3rem); text-transform:uppercase; letter-spacing:2px; font-weight:700;
  color:#fdfeff;
  text-shadow:0 0 50px rgba(111,216,255,0.4);
}
.final-cta-content p{color:var(--text-dim); margin-top:22px; max-width:600px; margin-left:auto; margin-right:auto; line-height:1.8;}
.final-cta-content .hero-actions{justify-content:center; margin-top:42px;}

/* ---------- RSS LINK ---------- */
.rss-link-wrap{text-align:center; padding:36px 5% 0;}
.rss-link{
  display:inline-block;
  font-size:0.76rem; letter-spacing:1px; text-transform:uppercase;
  color:var(--text-dim); border:1px solid var(--border); border-radius:20px;
  padding:8px 18px; transition:color .2s ease, border-color .2s ease;
}
.rss-link:hover{color:var(--frost-glow); border-color:var(--frost-dim);}

/* ---------- NEWS LIST (news.html) ---------- */
.news-list{max-width:900px; margin:0 auto; display:flex; flex-direction:column; gap:24px; padding:0 5% 170px;}
.news-card{
  background:linear-gradient(160deg, var(--panel), var(--bg-alt));
  border:1px solid var(--border); border-radius:12px; padding:34px 36px;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.news-card:hover{
  transform:perspective(900px) translateY(-6px) rotateX(var(--tilt-rx,0deg)) rotateY(var(--tilt-ry,0deg));
  border-color:var(--frost-dim); box-shadow:0 18px 45px rgba(111,216,255,0.1);
}
.news-date{color:var(--frost-glow); font-size:0.72rem; letter-spacing:2.5px; text-transform:uppercase;}
.news-card h3{font-family:var(--font-display); font-size:1.35rem; margin-top:12px; margin-bottom:12px; font-weight:600;}
.news-card p{color:var(--text-dim); line-height:1.8;}

/* ---------- HOME NEWS STRIP (3-across teaser, reuses .news-card) ---------- */
.home-news{padding:0 5% 150px;}
.home-news-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; max-width:1200px; margin:0 auto;}
@media(max-width:860px){.home-news-grid{grid-template-columns:1fr;}}

/* ---------- PROGRESS BAR (generic) ---------- */
.progress-row{margin-bottom:20px;}
.progress-row:last-child{margin-bottom:0;}
.progress-row-head{display:flex; justify-content:space-between; align-items:baseline; font-size:0.88rem; margin-bottom:9px;}
.progress-row-head .label{color:var(--text); font-weight:600;}
.progress-row-head .value{color:var(--text-dim); font-size:0.8rem;}
.progress-bar{height:8px; border-radius:20px; background:var(--bg-alt); border:1px solid var(--border); overflow:hidden;}
.progress-bar-fill{height:100%; border-radius:20px; background:linear-gradient(90deg, var(--frost-dim), var(--frost));}

/* ---------- CSS BAR CHART (no library) — reused across status/armory/gm pages ---------- */
.chart-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:24px;}
.chart-card{border:1px solid var(--border); border-radius:12px; padding:26px 24px 0; background:linear-gradient(160deg, var(--panel), var(--bg-alt));}
.chart-card-head{font-size:0.72rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-dim); margin-bottom:34px;}
.bar-chart{display:flex; align-items:flex-end; justify-content:space-between; gap:8px; height:150px; margin-bottom:34px;}
.bar-col{
  flex:1; height:var(--h); min-height:4px; border-radius:4px 4px 0 0;
  background:linear-gradient(180deg, var(--frost-glow), var(--frost-dim));
  position:relative; transition:opacity .2s;
}
.bar-col:hover{opacity:0.75;}
.bar-col.good{background:linear-gradient(180deg, #b8f0cc, #6dbf8c);}
.bar-col.warn{background:linear-gradient(180deg, #ffe6b3, #d9a441);}
.bar-val{position:absolute; left:50%; top:-20px; transform:translateX(-50%); font-size:0.66rem; color:var(--text-dim); white-space:nowrap;}
.bar-label{position:absolute; left:50%; bottom:-22px; transform:translateX(-50%); font-size:0.62rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.5px;}

/* ---------- HOVER PREVIEW TOOLTIP — generic, works on any element carrying [data-preview] ---------- */
[data-preview]{position:relative;}
[data-preview]::after{
  content:attr(data-preview);
  position:absolute; left:50%; bottom:calc(100% + 10px); transform:translate(-50%, 4px);
  z-index:20; width:max-content; max-width:240px;
  padding:8px 14px; border-radius:8px;
  background:rgba(5,8,16,0.95); border:1px solid var(--frost-dim);
  color:var(--frost-glow); font-size:0.72rem; font-weight:400; letter-spacing:0.2px; line-height:1.5;
  box-shadow:0 14px 34px rgba(0,0,0,0.5);
  opacity:0; visibility:hidden;
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
  pointer-events:none; text-align:center;
}
[data-preview]:hover::after{opacity:1; visibility:visible; transform:translate(-50%, 0);}

/* ---------- DOWNLOADS (wallpapers / loading screens) ---------- */
.downloads-section{padding:0 5% 150px; max-width:1200px; margin:0 auto;}
.download-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:20px;}
.download-card{
  border:1px solid var(--border); border-radius:14px; overflow:hidden;
  background:linear-gradient(160deg, var(--panel), var(--bg-alt));
  transition:border-color .25s ease, transform .25s ease;
}
.download-card:hover{border-color:var(--frost-dim); transform:translateY(-4px);}
.download-preview{aspect-ratio:16/9; background-size:cover; background-position:center;}
.download-card-body{padding:20px 22px; display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;}
.download-card-body h3{font-family:var(--font-display); font-size:0.92rem; flex:1;}
.download-card-body .btn{padding:9px 18px; font-size:0.68rem; white-space:nowrap;}

/* ---------- PVP SEASON BANNER ---------- */
.pvp-season{padding:0 5% 150px; max-width:1000px; margin:0 auto;}
.pvp-season-inner{
  display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap;
  padding:34px 40px; border-radius:16px;
  border:1px solid var(--frost-dim);
  background:linear-gradient(135deg, rgba(111,216,255,0.08), var(--bg-alt));
}
.pvp-season-inner h2{font-family:var(--font-display); font-size:clamp(1.4rem,2.6vw,1.9rem); margin-top:12px;}
.pvp-season-inner p{color:var(--text-dim); margin-top:12px; max-width:480px; line-height:1.7;}

/* ---------- NEW PLAYER SPOTLIGHT ---------- */
.spotlight-section{padding:0 5% 150px; max-width:700px; margin:0 auto;}
.spotlight-card{
  display:flex; gap:22px; align-items:center; padding:30px 34px; flex-wrap:wrap;
  border:1px solid var(--frost-dim); border-radius:16px;
  background:linear-gradient(135deg, rgba(111,216,255,0.08), var(--bg-alt));
}
.spotlight-avatar{
  width:64px; height:64px; border-radius:14px; flex-shrink:0;
  background:linear-gradient(135deg, var(--frost), var(--frost-dim));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:1.7rem; font-weight:800; color:#050810;
}
.spotlight-body h2{font-family:var(--font-display); font-size:1.3rem; margin-top:10px;}
.spotlight-body p{color:var(--text-dim); margin-top:10px; line-height:1.75; font-size:0.9rem;}

/* ---------- DISCORD WIDGET (styled placeholder — swap for the real Discord widget once live) ---------- */
.discord-widget-section{padding:0 5% 150px; max-width:640px; margin:0 auto; text-align:center;}
.discord-widget-card{
  display:flex; align-items:center; gap:18px; padding:22px 26px;
  border:1px solid var(--border); border-radius:14px;
  background:linear-gradient(160deg, var(--panel), var(--bg-alt));
  box-shadow:0 20px 50px rgba(0,0,0,0.3);
}
.discord-widget-icon{flex-shrink:0;}
.discord-widget-info{flex:1; text-align:left;}
.discord-widget-name{font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--text);}
.discord-widget-stats{color:var(--text-dim); font-size:0.82rem; margin-top:4px; display:flex; align-items:center; gap:8px;}
.discord-widget-stats .sep{color:var(--border);}
.discord-widget-stats .dot{width:7px; height:7px; border-radius:50%; background:var(--text-dim); display:inline-block;}
.discord-widget-stats .dot.online{background:#8fe0a8; box-shadow:0 0 8px rgba(143,224,168,0.6);}
.discord-widget-note{color:var(--text-dim); font-size:0.72rem; margin-top:14px; opacity:0.7;}
@media(max-width:560px){
  .discord-widget-card{flex-direction:column; text-align:center;}
  .discord-widget-info{text-align:center;}
  .discord-widget-stats{justify-content:center;}
}

/* ---------- REALM PAGE EXTRAS ---------- */
.realm-info{max-width:1100px; margin:0 auto; padding:0 5% 150px;}
.realm-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:24px; margin-top:60px;}
.realm-stat{
  text-align:center; padding:36px 20px; border:1px solid var(--border); border-radius:12px;
  background:linear-gradient(160deg, var(--panel), var(--bg-alt));
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.realm-stat:hover{
  transform:translateY(-4px); border-color:var(--frost-dim);
  box-shadow:0 16px 40px rgba(111,216,255,0.12);
}
.realm-stat-icon{width:38px; height:35px; display:block; margin:0 auto 14px; filter:drop-shadow(0 0 10px rgba(111,216,255,0.3));}
.realm-stat h3{font-family:var(--font-display); font-size:2rem; color:var(--frost-glow);}
.realm-stat p{color:var(--text-dim); font-size:0.78rem; letter-spacing:1.5px; text-transform:uppercase; margin-top:8px;}

/* ---------- FOOTER (centered) ---------- */
footer{padding:70px 5% 34px; text-align:center;}
.footer-top{display:flex; flex-direction:column; align-items:center; gap:16px; padding-bottom:38px;}
.footer-brand{display:flex; flex-direction:column; align-items:center;}
.footer-brand .logo{font-size:1.35rem;}
.footer-brand p{color:var(--text-dim); margin-top:14px; max-width:380px; font-size:0.85rem; line-height:1.65; font-style:italic; margin-left:auto; margin-right:auto;}
.footer-discord{color:var(--frost-glow); font-size:0.85rem; margin-top:18px; display:inline-block;}
.footer-credit{color:var(--text-dim); font-size:0.8rem;}
.footer-disclaimer{
  border-top:1px solid var(--border); padding-top:28px; color:var(--text-dim);
  font-size:0.72rem; line-height:1.7; max-width:900px; margin:0 auto;
}
.footer-bottom{
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:20px;
  margin-top:28px; color:var(--text-dim); font-size:0.78rem;
}
.footer-bottom a:hover{color:var(--frost-glow);}

/* ---------- SOCIAL FAB (fixed, bottom-right, all pages) ---------- */
.social-fab{position:fixed; right:26px; bottom:26px; z-index:200;}
.social-fab-btn{
  width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(135deg, var(--frost), var(--frost-dim));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(111,216,255,0.35);
  transition:transform .25s ease, box-shadow .25s ease;
}
.social-fab-btn:hover{transform:translateY(-3px); box-shadow:0 14px 38px rgba(111,216,255,0.5);}
.social-fab-btn img{width:22px; height:22px; display:block;}
.social-fab-btn .icon-close{display:none;}
.social-fab.open .social-fab-btn .icon-open{display:none;}
.social-fab.open .social-fab-btn .icon-close{display:block;}

.social-fab-menu{
  position:absolute; right:0; bottom:calc(100% + 14px);
  display:flex; flex-direction:column; gap:10px; min-width:190px;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.social-fab.open .social-fab-menu{opacity:1; visibility:visible; transform:translateY(0);}
.social-fab-link{
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; border-radius:10px;
  background:rgba(8,13,24,0.97); border:1px solid var(--border);
  color:var(--text); font-size:0.85rem; font-weight:600; letter-spacing:0.3px;
  box-shadow:0 10px 30px rgba(0,0,0,0.4); backdrop-filter:blur(10px);
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.social-fab-link:hover{border-color:var(--frost-dim); background:rgba(111,216,255,0.08); transform:translateX(-3px);}
.social-fab-icon{width:22px; height:22px; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.social-fab-icon img{width:100%; height:100%; display:block;}

/* ---------- MOBILE MENU (hamburger + off-canvas nav) ---------- */
.mobile-menu-btn{
  display:none; width:34px; height:34px; border:none; background:none; cursor:pointer;
  flex-direction:column; justify-content:center; align-items:center; gap:6px;
  flex-shrink:0;
}
.mobile-menu-btn span{
  display:block; width:24px; height:2px; background:var(--text); border-radius:2px;
  transition:transform .3s ease, opacity .3s ease;
}
.mobile-menu-btn.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.mobile-menu-btn.open span:nth-child(2){opacity:0;}
.mobile-menu-btn.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

.nav-backdrop{
  position:fixed; inset:0; background:rgba(2,3,6,0.7); z-index:140;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.nav-backdrop.open{opacity:1; visibility:visible;}

.mobile-only{display:none;}

@media(max-width:860px){
  .mobile-menu-btn{display:flex;}
  .lang-select{display:none;}
  .nav-search-btn{display:none;}
  .nav-actions{display:none;}

  nav{
    position:fixed; top:0; right:-320px; bottom:0; width:280px; max-width:82vw;
    background:rgba(5,8,16,0.98); backdrop-filter:blur(16px);
    border-left:1px solid var(--border);
    padding:100px 28px 40px; overflow-y:auto;
    z-index:150;
    transition:right .35s ease;
  }
  nav.mobile-open{right:0;}
  nav ul{display:flex; flex-direction:column; gap:2px;}
  nav ul li{width:100%;}
  nav a{
    display:block; padding:14px 0; font-size:0.95rem; letter-spacing:1px;
    border-bottom:1px solid var(--border);
  }
  nav a::after{display:none;}
  .has-submenu{position:static;}
  .has-submenu .submenu{
    position:static; opacity:1; visibility:visible; transform:none;
    padding:0 0 8px 16px; margin:0;
  }
  .submenu-inner{
    background:none; border:none; padding:0; box-shadow:none; backdrop-filter:none; min-width:0;
  }
  .submenu-inner a{text-align:left; padding:10px 0; font-size:0.85rem; border-bottom:none; color:var(--text-dim);}

  .mobile-only{display:block; margin-top:14px;}
  .mobile-only a{
    display:block; text-align:center; padding:13px 0; border-radius:4px;
    border:1px solid var(--frost-dim); color:var(--frost-glow);
    font-size:0.85rem; letter-spacing:1.5px; text-transform:uppercase;
  }
  .mobile-only.mobile-register a{
    background:linear-gradient(135deg, var(--frost), var(--frost-dim));
    border:none; color:#050810; font-weight:700;
  }

  .gallery{grid-template-columns:repeat(2,1fr);}
  .countdown .box{width:70px;}
  section, .hero-content{padding-left:6%; padding-right:6%;}
  .feature-row, .feature-row.reverse{flex-direction:column;}
}
@media(max-width:560px){
  .gallery{grid-template-columns:1fr;}
  .launch-party{flex-direction:column;}
}