:root{
  --bg:#070604;
  --bg2:#0d0b08;
  --surface:#14110b;
  --surface2:#1b1810;
  --border:rgba(245,240,220,.10);
  --text:rgba(250,247,238,.92);
  --muted:rgba(250,247,238,.70);
  --muted2:rgba(250,247,238,.54);
  --accent:#6f8a3a;
  --accent2:#b4a86a;
  --accentRgb:111,138,58;
  --accent2Rgb:180,168,106;
  --accentInk:rgba(10,10,8,.92);
  --sienna:#a55a2a;
  --siennaRgb:165,90,42;
  --danger:#ff3b3b;
  --shadow:0 22px 70px rgba(0,0,0,.55);
  --shadow2:0 12px 34px rgba(0,0,0,.38);
  --radius:18px;
  --radius2:26px;
  --container:1180px;
  --headerH:76px;
  --ic-home:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3 3 11h3v10h5v-6h2v6h5V11h3z'/%3E%3C/svg%3E");
  --ic-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 10h2v8h-2zm0-4h2v2h-2z'/%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z'/%3E%3C/svg%3E");
  --ic-users:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 11a4 4 0 1 0-3.7-5.5A4 4 0 0 0 16 11ZM8 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm8 2c-2 0-4 1-5 2.4C10 14 8 13 6 13c-3 0-6 2-6 5v2h12v-2c0-.7.2-1.4.5-2C13.5 14 14.7 13 16 13c2.8 0 6 1.5 6 5v2h-8v-2c0-2.6 1.5-4.2 3.3-5Z'/%3E%3C/svg%3E");
  --ic-book:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 4h12a2 2 0 0 1 2 2v14h-2a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2V6a2 2 0 0 1 2-2Zm0 12h10a3 3 0 0 1 2 .8V6H6v10Z'/%3E%3C/svg%3E");
  --ic-file:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h9l5 5v15a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm8 1.5V8h4.5L14 3.5Z'/%3E%3Cpath fill='black' d='M8 12h8v2H8zm0 4h8v2H8z'/%3E%3C/svg%3E");
  --ic-calendar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h2v2h6V2h2v2h3a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h3V2Zm15 8H2v12h20V10ZM4 6v2h16V6H4Z'/%3E%3C/svg%3E");
  --ic-bag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 7V6a5 5 0 0 1 10 0v1h4l-1.5 15A2 2 0 0 1 17.5 24h-11A2 2 0 0 1 4.5 22L3 7h4Zm2 0h6V6a3 3 0 0 0-6 0v1Z'/%3E%3C/svg%3E");
  --ic-chat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H9l-5 4v-4H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm2 4h12v2H6zm0 4h10v2H6z'/%3E%3C/svg%3E");
  --ic-login:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 7V5a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3h-6a3 3 0 0 1-3-3v-2h2v2a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v2h-2Z'/%3E%3Cpath fill='black' d='M10 16v-3H2v-2h8V8l5 4-5 4Z'/%3E%3C/svg%3E");
  --ic-logout:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 7V5a3 3 0 0 0-3-3H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3v-2h-2v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2h2Z'/%3E%3Cpath fill='black' d='M14 16v-3h8v-2h-8V8l-5 4 5 4Z'/%3E%3C/svg%3E");
  --ic-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2l3 7 7 .6-5.3 4.6L18.5 22 12 18.2 5.5 22l1.8-7.2L2 9.6 9 9l3-7Z'/%3E%3C/svg%3E");
  --ic-flag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h2v2h10l-2 4 2 4H8v10H6V2Z'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  background:
    radial-gradient(1200px 560px at 10% 0%, rgba(var(--accentRgb),.14), transparent 56%),
    radial-gradient(1000px 600px at 90% 10%, rgba(var(--siennaRgb),.10), transparent 54%),
    radial-gradient(900px 520px at 60% 120%, rgba(var(--accent2Rgb),.07), transparent 58%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  background-color:var(--bg2);
  min-height:100%;
}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 560px at 10% 0%, rgba(var(--accentRgb),.14), transparent 56%),
    radial-gradient(1000px 600px at 90% 10%, rgba(var(--siennaRgb),.10), transparent 54%),
    radial-gradient(900px 520px at 60% 120%, rgba(var(--accent2Rgb),.07), transparent 58%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  min-height:100vh;
  overflow-x:hidden;
}

@property --spin3d{
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg;
}
@keyframes spin3d{to{--spin3d:360deg}}
@keyframes mtacPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}
@keyframes mtacBlink{0%,100%{opacity:1}55%{opacity:.55}}

a{color:inherit;text-decoration:none}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}

.container{
  width:min(var(--container), calc(100% - 40px));
  margin-inline:auto;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:14px;
  padding:10px 14px;
  border-radius:12px;
  background:rgba(15,23,21,.92);
  border:1px solid var(--border);
  box-shadow:var(--shadow2);
  z-index:9999;
}
.skip-link:focus{left:18px}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  height:var(--headerH);
  display:flex;
  align-items:center;
  backdrop-filter:saturate(120%) blur(14px);
  background:linear-gradient(180deg, rgba(9,13,13,.82), rgba(9,13,13,.55));
  border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:220px;
}
.brand-mark{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background-image:
    url("./logo.png?v=20260402-1"),
    linear-gradient(180deg, rgba(var(--accentRgb),.16), rgba(var(--accentRgb),.06));
  background-size:cover, auto;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
  border:1px solid rgba(var(--accentRgb),.35);
  box-shadow:0 10px 30px rgba(0,0,0,.3);
  position:relative;
  overflow:hidden;
  transform:translateZ(0) rotateY(var(--spin3d, 0deg));
  transform-style:preserve-3d;
  will-change:transform;
  backface-visibility:hidden;
  animation:spin3d 8.5s linear infinite;
  color:transparent;
  font-size:0;
}
.brand-mark:hover{animation-play-state:paused}
.brand-mark::after{display:none}
.brand-mark > *{position:relative}
.brand-text{display:flex;flex-direction:column;gap:2px;line-height:1.1}
.brand-name{font-family:Orbitron,Inter,system-ui;font-weight:600;letter-spacing:.02em;font-size:14px}
.brand-sub{font-size:12px;color:var(--muted2)}

.nav{display:flex;align-items:center}
.nav-toggle{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(15,23,21,.7);
  color:var(--text);
}
.nav-toggle-lines{
  width:18px;height:12px;position:relative;display:inline-block;
}
.nav-toggle-lines::before,
.nav-toggle-lines::after{
  content:"";
  position:absolute;
  left:0;right:0;
  height:2px;
  border-radius:2px;
  background:rgba(240,255,251,.88);
  transition:transform .22s ease, top .22s ease, opacity .22s ease;
}
.nav-toggle-lines::before{top:1px}
.nav-toggle-lines::after{top:9px}
.nav-toggle[aria-expanded="true"] .nav-toggle-lines::before{top:5px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-lines::after{top:5px;transform:rotate(-45deg)}

.nav-panel{
  position:fixed;
  left:0;
  top:var(--headerH);
  height:calc(100vh - var(--headerH));
  width:min(340px, 88vw);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  padding:14px;
  gap:8px;
  border-right:1px solid var(--border);
  background:rgba(10,16,15,.96);
  box-shadow:18px 0 42px rgba(0,0,0,.45);
  transform:translateX(-102%);
  opacity:0;
  pointer-events:none;
  transition:transform .22s ease, opacity .22s ease;
  overflow:auto;
  z-index:70;
}
.nav-panel.is-open{
  transform:translateX(0);
  opacity:1;
  pointer-events:auto;
}
.nav-backdrop{
  position:fixed;
  top:var(--headerH);
  right:0;
  bottom:0;
  left:var(--navOverlayLeft, 100vw);
  background:linear-gradient(180deg, rgba(0,0,0,.48), rgba(0,0,0,.62));
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
  z-index:65;
}
body.nav-is-open .nav-backdrop{
  opacity:1;
  pointer-events:auto;
}
body.nav-is-open{
  overflow:hidden;
}
.nav-panel .nav-link,
.nav-panel .nav-subitem{
  display:flex;
  align-items:center;
  gap:10px;
}
.nav-panel .nav-link{padding:12px 12px}
.nav-panel .nav-link-cta{margin-top:4px}
.nav-panel .nav-link::before,
.nav-panel .nav-subitem::before{
  content:"";
  width:18px;
  height:18px;
  flex:0 0 18px;
  background:currentColor;
  opacity:.92;
  -webkit-mask:var(--navIc, var(--ic-star)) no-repeat center / contain;
  mask:var(--navIc, var(--ic-star)) no-repeat center / contain;
}
.nav-panel .nav-subitem::before{
  width:16px;
  height:16px;
  flex-basis:16px;
  opacity:.86;
}
.nav-panel [data-open-panel="apropos"]{--navIc:var(--ic-info)}
.nav-panel [data-open-panel="features"]{--navIc:var(--ic-star)}
.nav-panel [data-open-panel="rejoindre"]{--navIc:var(--ic-login)}
.nav-panel .nav-dropdown > .nav-link{--navIc:var(--ic-flag)}
.nav-panel a[href*="index.html#accueil"],
.nav-panel a[href$="/index.html"],
.nav-panel a[href$="../index.html"],
.nav-panel a[href$="./index.html"]{--navIc:var(--ic-home)}
.nav-panel a[href*="actualites"]{--navIc:var(--ic-file)}
.nav-panel a[href*="reglement"]{--navIc:var(--ic-book)}
.nav-panel a[href*="/staff"],
.nav-panel a[href*="staff/"]{--navIc:var(--ic-users)}
.nav-panel a[href*="/wiki"],
.nav-panel a[href*="wiki/"]{--navIc:var(--ic-file)}
.nav-panel a[href*="evenements"]{--navIc:var(--ic-calendar)}
.nav-panel a[href*="boutique"]{--navIc:var(--ic-bag)}
.nav-panel a[href*="/chat"],
.nav-panel a[href*="chat/"]{--navIc:var(--ic-chat)}
.nav-panel a[href*="/login"],
.nav-panel a[href*="login/"]{--navIc:var(--ic-login)}
.nav-panel a[href*="/logout"],
.nav-panel a[href*="logout/"]{--navIc:var(--ic-logout)}
.nav-link{
  font-size:14px;
  color:var(--muted);
  padding:10px 10px;
  border-radius:12px;
  transition:color .18s ease, background-color .18s ease;
}
.nav-link:hover{color:var(--text);background:rgba(var(--accentRgb),.08)}
.nav-link.is-active{color:rgba(var(--accent2Rgb),.98);background:rgba(var(--accentRgb),.14)}
.nav-link-cta{
  color:var(--accentInk);
  background:linear-gradient(180deg, rgba(var(--accentRgb),1), rgba(var(--accent2Rgb),.90));
  border:1px solid rgba(var(--accentRgb),.55);
  box-shadow:0 16px 36px rgba(var(--accentRgb),.16);
}
.nav-link-cta:hover{background:linear-gradient(180deg, rgba(var(--accent2Rgb),1), rgba(var(--accentRgb),.92))}
.nav-tab{
  background:transparent;
  border:0;
  cursor:pointer;
  text-align:left;
 }

.hero{
  position:relative;
  padding:calc(var(--headerH) + 54px) 0 74px;
  overflow:hidden;
}
.hero-media{
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(780px 420px at 15% 30%, rgba(var(--accentRgb),.16), transparent 58%),
    radial-gradient(820px 460px at 80% 20%, rgba(var(--accent2Rgb),.12), transparent 60%),
    radial-gradient(900px 520px at 60% 90%, rgba(var(--siennaRgb),.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.55)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent 82px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent 64px);
  filter:saturate(1.05) contrast(1.08);
  transform:rotate(-2deg) scale(1.02);
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(7,11,11,.64), rgba(7,11,11,.92)),
    radial-gradient(900px 520px at 70% 40%, rgba(0,0,0,.22), transparent 50%);
}
.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:26px;
  align-items:start;
}
.hero-copy{max-width:720px}
.eyebrow{
  margin:0 0 14px;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(var(--accent2Rgb),.92);
}
.hero-title{
  margin:0;
  font-family:Orbitron,Inter,system-ui;
  font-size:clamp(40px, 5.4vw, 68px);
  letter-spacing:.02em;
  line-height:1.04;
}
.hero-title-accent{
  display:block;
  font-size:clamp(16px, 2.2vw, 20px);
  color:rgba(240,255,251,.75);
  margin-top:12px;
  font-family:Inter,system-ui;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.hero-lead{
  margin:18px 0 0;
  font-size:16px;
  line-height:1.75;
  color:var(--muted);
}
.hero-actions{
  display:flex;
  gap:12px;
  margin-top:22px;
  flex-wrap:wrap;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:14px;
  padding:12px 14px;
  border:1px solid var(--border);
  background:rgba(15,23,21,.7);
  color:var(--text);
  font-weight:600;
  font-size:14px;
  transition:transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
  cursor:pointer;
}
.btn:hover{transform:translateY(-1px);border-color:rgba(var(--accentRgb),.34);background:rgba(15,23,21,.86)}
.btn:active{transform:translateY(0px)}
.btn-primary{
  background:linear-gradient(180deg, rgba(var(--accentRgb),1), rgba(var(--accent2Rgb),.90));
  color:var(--accentInk);
  border:1px solid rgba(var(--accentRgb),.55);
  box-shadow:0 16px 36px rgba(var(--accentRgb),.14);
}
.btn-primary:hover{background:linear-gradient(180deg, rgba(var(--accent2Rgb),1), rgba(var(--accentRgb),.92))}
.btn-ghost{background:rgba(15,23,21,.7)}
.btn-small{padding:8px 10px;border-radius:12px;font-size:13px}

.hero-meta{
  margin-top:22px;
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.ip-card{
  padding:16px 16px;
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(16,27,24,.9), rgba(12,19,17,.76));
  border:1px solid rgba(var(--accentRgb),.20);
  box-shadow:var(--shadow2);
}
.ip-label{
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(240,255,251,.62);
}
.ip-row{margin-top:10px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.ip-value{
  font-size:16px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(7,11,11,.55);
  border:1px solid var(--border);
  overflow:auto;
  white-space:nowrap;
  flex:1;
}
.ip-hint{margin-top:10px;font-size:13px;color:rgba(var(--accent2Rgb),.92);min-height:18px}

.quick-stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
}
.stat{
  padding:14px 14px;
  border-radius:var(--radius);
  background:rgba(15,23,21,.62);
  border:1px solid rgba(220,255,245,.08);
}
.stat-k{font-size:12px;color:var(--muted2);letter-spacing:.12em;text-transform:uppercase}
.stat-v{margin-top:8px;font-weight:700;font-family:Orbitron,Inter,system-ui;letter-spacing:.02em}

.hero-panel{position:relative}
.panel-surface{
  border-radius:var(--radius2);
  border:1px solid rgba(var(--accentRgb),.20);
  background:
    radial-gradient(420px 240px at 20% 0%, rgba(var(--accentRgb),.14), transparent 60%),
    linear-gradient(180deg, rgba(14,22,20,.92), rgba(10,16,15,.82));
  box-shadow:var(--shadow);
  overflow:hidden;
}
.panel-header{
  padding:16px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--border);
}
.panel-title{font-family:Orbitron,Inter,system-ui;font-weight:600;letter-spacing:.08em;font-size:12px;text-transform:uppercase;color:rgba(240,255,251,.84)}
.panel-chip{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(var(--accentRgb),.36);
  background:rgba(var(--accentRgb),.10);
  color:rgba(var(--accent2Rgb),.96);
  font-weight:700;
  letter-spacing:.1em;
}
.panel-body{padding:16px 16px 18px}
.panel-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
.panel-key{color:var(--muted2);font-size:13px}
.panel-val{font-weight:600;font-size:13px;color:rgba(240,255,251,.86);display:flex;align-items:center;gap:10px}
.panel-divider{height:1px;background:var(--border);margin:10px 0}
.panel-list{display:grid;gap:10px}
.panel-item{
  padding:10px 12px;
  border-radius:14px;
  background:rgba(7,11,11,.45);
  border:1px solid var(--border);
  color:rgba(240,255,251,.78);
  font-size:13px;
}
.dot{width:9px;height:9px;border-radius:50%}
.dot-green{background:rgba(var(--accentRgb),1);box-shadow:0 0 0 4px rgba(var(--accentRgb),.18)}

.section{padding:78px 0}
.section-alt{
  background:
    radial-gradient(980px 520px at 10% 10%, rgba(var(--accentRgb),.08), transparent 60%),
    linear-gradient(180deg, rgba(11,17,16,.45), rgba(11,17,16,.25));
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.section-head{display:grid;gap:10px;margin-bottom:26px}
.section-title{
  margin:0;
  font-family:Orbitron,Inter,system-ui;
  letter-spacing:.02em;
  font-size:clamp(26px, 3.2vw, 40px);
}
.section-lead{margin:0;color:var(--muted);max-width:820px;line-height:1.7}

.grid-2{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
}
.card{
  border-radius:var(--radius2);
  background:linear-gradient(180deg, rgba(16,27,24,.86), rgba(12,19,17,.72));
  border:1px solid var(--border);
  box-shadow:var(--shadow2);
  padding:18px 18px;
}
.card-highlight{border-color:rgba(var(--accentRgb),.24)}
.card-title{margin:0 0 10px;font-size:16px;font-weight:700;letter-spacing:.02em}
.card-text{margin:0;color:var(--muted);line-height:1.75}
.pill-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.pill{
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(var(--accentRgb),.30);
  color:rgba(var(--accent2Rgb),.94);
  background:rgba(var(--accentRgb),.08);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:700;
}

.list{margin:0;padding-left:18px;color:var(--muted);line-height:1.7}
.list li{margin:8px 0}

.cards-4{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
}
.faction-card{
  border-radius:var(--radius2);
  background:linear-gradient(180deg, rgba(16,27,24,.86), rgba(12,19,17,.72));
  border:1px solid var(--border);
  box-shadow:var(--shadow2);
  padding:18px 18px;
  transition:transform .18s ease, border-color .18s ease;
}
.faction-media{
  height:140px;
  border-radius:20px;
  border:1px solid var(--border);
  background:var(--fimg, rgba(13,11,8,.22));
  background-size:cover;
  background-position:center;
  box-shadow:0 14px 36px rgba(0,0,0,.35);
  margin-bottom:14px;
}
.faction-card:hover{transform:translateY(-2px);border-color:rgba(var(--accentRgb),.30)}
.faction-card.is-selected{border-color:rgba(var(--accentRgb),.44);box-shadow:0 18px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(var(--accentRgb),.10) inset}
.faction-top{display:flex;align-items:center;gap:12px}
.faction-badge{
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;
  font-family:Orbitron,Inter,system-ui;
  letter-spacing:.12em;
  font-weight:700;
  color:rgba(var(--accent2Rgb),.96);
  background:rgba(var(--accentRgb),.10);
  border:1px solid rgba(var(--accentRgb),.26);
}
.faction-title{margin:0;font-size:16px;font-weight:800;letter-spacing:.02em}
.faction-text{margin:12px 0 0;color:var(--muted);line-height:1.65}
.faction-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tag{
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(7,11,11,.45);
  border:1px solid var(--border);
  color:rgba(240,255,251,.78);
}
.faction-meta{
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.faction-members{color:var(--muted2);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;white-space:nowrap}
.badge-danger{background:linear-gradient(180deg, rgba(255,59,59,1), rgba(255,59,59,.78));border:1px solid rgba(255,59,59,.50);color:rgba(10,10,8,.92)}

.faction-card[role="button"]{cursor:pointer}
.faction-card:focus-visible{
  outline:0;
  border-color:rgba(var(--accentRgb),.36);
  box-shadow:0 0 0 3px rgba(var(--accentRgb),.16), var(--shadow2);
}
.faction-detail{
  margin-top:16px;
  border-radius:var(--radius2);
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(27,24,16,.86), rgba(13,11,8,.62));
  box-shadow:var(--shadow2);
  padding:16px 16px;
  opacity:.95;
}
.faction-detail-head{display:grid;gap:6px}
.faction-detail-title{font-family:Orbitron,Inter,system-ui;font-weight:900;letter-spacing:.02em}
.faction-detail-sub{color:var(--muted);line-height:1.65}
.faction-detail-grid{margin-top:12px;display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:14px}
.faction-detail-card{
  border-radius:22px;
  border:1px solid var(--border);
  background:rgba(13,11,8,.28);
  padding:14px 14px;
  min-height:160px;
  display:grid;
  gap:10px;
  align-content:start;
}
.faction-detail-card h3{margin:0;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:rgba(var(--accent2Rgb),.94)}
.faction-detail-card p{margin:0;color:var(--muted);line-height:1.7}
.faction-detail-card ul{margin:0;padding-left:18px;color:var(--muted);line-height:1.7}
.faction-detail-card li{margin:6px 0}

.features-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
}
.feature{
  border-radius:var(--radius2);
  background:linear-gradient(180deg, rgba(16,27,24,.86), rgba(12,19,17,.72));
  border:1px solid var(--border);
  box-shadow:var(--shadow2);
  padding:16px 16px;
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.feature-icon{
  width:42px;height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  color:rgba(var(--accent2Rgb),.98);
  background:rgba(var(--accentRgb),.10);
  border:1px solid rgba(var(--accentRgb),.26);
  flex:0 0 auto;
}
.feature-icon svg{width:22px;height:22px}
.feature-title{margin:0;font-size:15px;font-weight:800}
.feature-text{margin:6px 0 0;color:var(--muted);line-height:1.6;font-size:13px}

.rules-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
}
.rule{
  border-radius:var(--radius2);
  background:linear-gradient(180deg, rgba(16,27,24,.86), rgba(12,19,17,.72));
  border:1px solid var(--border);
  box-shadow:var(--shadow2);
  padding:0;
  overflow:hidden;
}
.rule summary{
  list-style:none;
  cursor:pointer;
  padding:16px 16px;
  font-weight:800;
  letter-spacing:.02em;
}
.rule summary::-webkit-details-marker{display:none}
.rule[open] summary{border-bottom:1px solid var(--border)}
.rule-body{padding:14px 16px 16px}

.staff-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:14px;
}
.staff-card{
  border-radius:var(--radius2);
  background:linear-gradient(180deg, rgba(16,27,24,.86), rgba(12,19,17,.72));
  border:1px solid var(--border);
  box-shadow:var(--shadow2);
  padding:16px 16px;
  display:flex;
  gap:12px;
  align-items:center;
}
.avatar{
  width:46px;height:46px;border-radius:16px;
  display:grid;place-items:center;
  font-family:Orbitron,Inter,system-ui;
  font-weight:800;
  letter-spacing:.1em;
  color:rgba(var(--accent2Rgb),.96);
  background:
    radial-gradient(26px 26px at 30% 30%, rgba(var(--accentRgb),.20), transparent 62%),
    rgba(var(--accentRgb),.08);
  border:1px solid rgba(var(--accentRgb),.26);
}
.staff-name{margin:0;font-size:15px;font-weight:800}
.staff-role{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.5}

.staff-page{padding:calc(var(--headerH) + 28px) 0 64px}
.staff-page-head{display:grid;gap:10px;max-width:900px}
.staff-page-title{margin:0;font-family:Orbitron,Inter,system-ui;letter-spacing:.02em;font-size:clamp(26px, 3.4vw, 44px);line-height:1.08}
.staff-page-sub{margin:0;color:var(--muted);line-height:1.7}
.staff-page-grid{margin-top:22px;display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:14px}
.staff-card2{
  width:100%;
  text-align:left;
  cursor:pointer;
  border-radius:var(--radius2);
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(27,24,16,.84), rgba(13,11,8,.64));
  box-shadow:var(--shadow2);
  padding:16px 16px;
  display:grid;
  grid-template-columns:128px 1fr;
  gap:14px;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}
.staff-card2:hover{
  transform:translateY(-2px);
  border-color:rgba(var(--accentRgb),.30);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  background:linear-gradient(180deg, rgba(27,24,16,.90), rgba(13,11,8,.70));
}
.staff-card2:active{transform:translateY(0px)}
.staff-card2:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(var(--accentRgb),.18), 0 18px 50px rgba(0,0,0,.45);border-color:rgba(var(--accentRgb),.40)}
.staff-photo{
  width:128px;height:128px;
  border-radius:22px;
  border:1px solid var(--border);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:0 18px 50px rgba(0,0,0,.38);
}
.staff-info{min-width:0;display:grid;gap:10px;align-content:start}
.staff-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.staff-name2{font-family:Orbitron,Inter,system-ui;font-weight:800;letter-spacing:.02em;font-size:22px;line-height:1.05}
.staff-badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.badge{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(13,11,8,.30);
  color:rgba(250,247,238,.84);
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
.badge-olive{border-color:rgba(var(--accentRgb),.32);background:rgba(var(--accentRgb),.10);color:rgba(var(--accent2Rgb),.96)}
.badge-khaki{border-color:rgba(var(--accent2Rgb),.26);background:rgba(var(--accent2Rgb),.10);color:rgba(250,247,238,.90)}
.badge-sienna{border-color:rgba(var(--siennaRgb),.30);background:rgba(var(--siennaRgb),.12);color:rgba(250,247,238,.90)}
.staff-desc2{color:var(--muted);line-height:1.7}
.staff-quote{margin-top:2px;color:var(--muted2);font-size:13px;line-height:1.6}

.modal{position:fixed;inset:0;display:none;z-index:90}
.modal.is-open{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.62)}
.modal-card2{
  position:relative;
  width:min(980px, calc(100% - 28px));
  margin:calc(var(--headerH) + 18px) auto 18px;
  border-radius:26px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(27,24,16,.92), rgba(13,11,8,.86));
  box-shadow:var(--shadow);
  overflow:hidden;
}
.modal-head2{padding:14px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px}
.modal-title2{font-family:Orbitron,Inter,system-ui;font-weight:700;letter-spacing:.02em}
.modal-body2{padding:16px 16px}
.modal-grid2{display:grid;grid-template-columns:220px 1fr;gap:16px;align-items:start}
.modal-photo{
  width:220px;height:220px;
  border-radius:24px;
  border:1px solid var(--border);
  background-size:cover;
  background-position:center;
  box-shadow:0 18px 60px rgba(0,0,0,.45);
}
.modal-copy{display:grid;gap:10px;min-width:0}
.modal-name{font-family:Orbitron,Inter,system-ui;font-weight:900;font-size:28px;letter-spacing:.02em;line-height:1.05}
.modal-roles{display:flex;gap:8px;flex-wrap:wrap}
.modal-text{color:var(--muted);line-height:1.75}
.modal-lines{display:grid;gap:8px;margin-top:2px}
.modal-line{border-radius:16px;border:1px solid var(--border);background:rgba(13,11,8,.32);padding:12px 12px;color:rgba(250,247,238,.84);line-height:1.65}
.modal-foot2{padding:14px 14px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}

@media (max-width: 980px){
  .staff-page-grid{grid-template-columns:1fr}
  .modal-grid2{grid-template-columns:1fr}
  .modal-photo{width:100%;height:220px}
  .staff-card2{grid-template-columns:96px 1fr}
  .staff-photo{width:96px;height:96px;border-radius:20px}
  .staff-name2{font-size:20px}
}

.events-page{padding:calc(var(--headerH) + 28px) 0 64px}
.events-head{display:grid;gap:10px;max-width:900px}
.events-title{margin:0;font-family:Orbitron,Inter,system-ui;letter-spacing:.02em;font-size:clamp(26px, 3.4vw, 44px);line-height:1.08}
.events-sub{margin:0;color:var(--muted);line-height:1.7}
.events-controls{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.events-filters{display:flex;gap:10px;flex-wrap:wrap}
.filter{
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(13,11,8,.30);
  color:rgba(250,247,238,.84);
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
  padding:10px 12px;
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease;
}
.filter:hover{transform:translateY(-1px);border-color:rgba(var(--accentRgb),.30);background:rgba(var(--accentRgb),.10);color:rgba(var(--accent2Rgb),.96)}
.filter:active{transform:translateY(0px)}
.filter.is-active{border-color:rgba(var(--accentRgb),.48);background:linear-gradient(180deg, rgba(var(--accentRgb),1), rgba(var(--accent2Rgb),.90));color:var(--accentInk)}
.events-count{color:var(--muted2);font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:800}
.events-grid{margin-top:14px;display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:14px}
.event-card{
  border-radius:var(--radius2);
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(27,24,16,.86), rgba(13,11,8,.64));
  box-shadow:var(--shadow2);
  padding:16px 16px;
  display:grid;
  gap:10px;
  align-content:start;
  transition:transform .18s ease, border-color .18s ease;
}
.event-card:hover{transform:translateY(-2px);border-color:rgba(var(--accentRgb),.26)}
.event-media{
  height:160px;
  border-radius:18px;
  border:1px solid var(--border);
  background:rgba(13,11,8,.22);
  background-size:cover;
  background-position:center;
  box-shadow:0 14px 36px rgba(0,0,0,.35);
}
.event-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.event-badges{display:flex;gap:8px;flex-wrap:wrap}
.event-date{color:var(--muted2);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;white-space:nowrap}
.event-name{margin:0;font-size:16px;font-weight:900;letter-spacing:.02em}
.event-text{margin:0;color:var(--muted);line-height:1.7}
.event-foot{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.chipline{font-size:12px;padding:7px 10px;border-radius:999px;border:1px solid var(--border);background:rgba(13,11,8,.28);color:rgba(250,247,238,.82);font-weight:800}

.home-events{padding:54px 0}
.home-events-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.home-events-title{margin:0;font-family:Orbitron,Inter,system-ui;letter-spacing:.02em;font-size:clamp(20px, 2.6vw, 34px);line-height:1.12}
.home-events-sub{margin:8px 0 0;color:var(--muted);line-height:1.7;max-width:760px}
.home-events-grid{margin-top:16px;display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:14px}
.home-events-grid.is-carousel{display:flex;overflow:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
.home-events-grid.is-carousel > *{flex:0 0 min(340px, 86vw);scroll-snap-align:start}

.shop-page{padding:calc(var(--headerH) + 28px) 0 64px}
.shop-head{display:grid;gap:10px;max-width:900px}
.shop-title{margin:0;font-family:Orbitron,Inter,system-ui;letter-spacing:.02em;font-size:clamp(26px, 3.4vw, 44px);line-height:1.08}
.shop-sub{margin:0;color:var(--muted);line-height:1.7}
.shop-layout{margin-top:18px;display:grid;grid-template-columns:320px 1fr;gap:16px;align-items:start}
.shop-side{
  border-radius:var(--radius2);
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(27,24,16,.86), rgba(13,11,8,.66));
  box-shadow:var(--shadow2);
  padding:14px 14px;
  position:sticky;
  top:calc(var(--headerH) + 14px);
}
.shop-side-title{font-family:Orbitron,Inter,system-ui;font-weight:800;letter-spacing:.02em}
.shop-cats{margin-top:12px;display:grid;gap:8px}
.cat{
  width:100%;
  text-align:left;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(13,11,8,.30);
  color:rgba(250,247,238,.84);
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
  padding:12px 12px;
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease;
}
.cat:hover{transform:translateY(-1px);border-color:rgba(var(--accentRgb),.30);background:rgba(var(--accentRgb),.10);color:rgba(var(--accent2Rgb),.96)}
.cat:active{transform:translateY(0px)}
.cat.is-active{border-color:rgba(var(--accentRgb),.48);background:linear-gradient(180deg, rgba(var(--accentRgb),1), rgba(var(--accent2Rgb),.90));color:var(--accentInk)}
.shop-cart{margin-top:14px;border-radius:18px;border:1px solid var(--border);background:rgba(13,11,8,.24);padding:12px 12px;display:grid;gap:10px}
.shop-cart-k{font-size:12px;color:var(--muted2);letter-spacing:.18em;text-transform:uppercase;font-weight:800}
.shop-cart-v{font-weight:900}
.shop-main{min-width:0}
.shop-grid{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:14px}
.shop-item{
  border-radius:var(--radius2);
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(27,24,16,.86), rgba(13,11,8,.64));
  box-shadow:var(--shadow2);
  padding:16px 16px;
  display:grid;
  gap:10px;
  align-content:start;
}
.shop-media{
  width:100%;
  height:160px;
  border-radius:18px;
  border:1px solid var(--border);
  background:rgba(13,11,8,.22);
  object-fit:cover;
  box-shadow:0 14px 36px rgba(0,0,0,.35);
}
.shop-item-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.shop-item-badges{display:flex;gap:8px;flex-wrap:wrap}
.shop-price{font-family:Orbitron,Inter,system-ui;font-weight:900;letter-spacing:.02em;color:rgba(var(--accent2Rgb),.96);white-space:nowrap}
.shop-name{margin:0;font-size:16px;font-weight:900;letter-spacing:.02em}
.shop-text{margin:0;color:var(--muted);line-height:1.7}
.shop-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}
.cart-list{display:grid;gap:10px}
.cart-row{border-radius:18px;border:1px solid var(--border);background:rgba(13,11,8,.24);padding:12px 12px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.cart-row b{letter-spacing:.02em}
.cart-row small{color:var(--muted2)}
.cart-actions{display:flex;gap:10px;flex-wrap:wrap}

@media (max-width: 980px){
  .events-grid{grid-template-columns:1fr}
  .home-events-grid{grid-template-columns:1fr}
  .shop-layout{grid-template-columns:1fr}
  .shop-side{position:relative;top:auto}
  .shop-grid{grid-template-columns:1fr}
}

.form{display:grid;gap:12px}
.form-grid{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:12px}
.field{display:grid;gap:8px}
.label{font-size:12px;color:var(--muted2);letter-spacing:.14em;text-transform:uppercase;font-weight:800}
.input,.select,.textarea{
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(13,11,8,.30);
  color:rgba(250,247,238,.92);
  padding:10px 12px;
  font-weight:600;
  font-size:13px;
}
.select{height:40px}
.textarea{min-height:120px;resize:vertical}
.input:focus-visible,.select:focus-visible,.textarea:focus-visible{
  outline:0;
  border-color:rgba(var(--accentRgb),.40);
  box-shadow:0 0 0 3px rgba(var(--accentRgb),.16);
}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.form-status{color:var(--muted2);font-size:13px;min-height:18px}

.bug-page{padding:calc(var(--headerH) + 28px) 0 64px}
.bug-head{display:grid;gap:10px;max-width:900px}
.bug-title{margin:0;font-family:Orbitron,Inter,system-ui;letter-spacing:.02em;font-size:clamp(26px, 3.4vw, 44px);line-height:1.08}
.bug-sub{margin:0;color:var(--muted);line-height:1.7}
.bug-card{
  margin-top:18px;
  border-radius:var(--radius2);
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(27,24,16,.86), rgba(13,11,8,.64));
  box-shadow:var(--shadow2);
  padding:16px 16px;
}

.chat-page{padding:calc(var(--headerH) + 28px) 0 64px}
.chat-head{display:grid;gap:10px;max-width:900px}
.chat-title{margin:0;font-family:Orbitron,Inter,system-ui;letter-spacing:.02em;font-size:clamp(26px, 3.4vw, 44px);line-height:1.08}
.chat-sub{margin:0;color:var(--muted);line-height:1.7}
.chat-layout{margin-top:18px;display:grid;grid-template-columns:280px 1fr;gap:14px;align-items:stretch}
.chat-side{
  border-radius:var(--radius2);
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(27,24,16,.86), rgba(13,11,8,.66));
  box-shadow:var(--shadow2);
  padding:14px 14px;
}
.chat-side-title{font-family:Orbitron,Inter,system-ui;font-weight:800;letter-spacing:.02em}
.chat-online{margin-top:12px;display:grid;gap:8px;min-height:120px}
.chat-dot{width:10px;height:10px;border-radius:999px;background:rgba(var(--accentRgb),1);box-shadow:0 0 0 4px rgba(var(--accentRgb),.14)}
.chat-user{display:flex;align-items:center;gap:10px;border-radius:16px;border:1px solid var(--border);background:rgba(13,11,8,.28);padding:10px 10px}
.chat-user span{color:rgba(250,247,238,.86);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-main{min-width:0;display:grid;grid-template-rows:1fr auto;gap:12px}
.chat-log{
  border-radius:var(--radius2);
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(27,24,16,.86), rgba(13,11,8,.64));
  box-shadow:var(--shadow2);
  padding:14px 14px;
  height:min(520px, 60vh);
  overflow:auto;
  display:grid;
  gap:10px;
  align-content:start;
}
.chat-msg{border-radius:18px;border:1px solid var(--border);background:rgba(13,11,8,.24);padding:12px 12px;display:grid;gap:6px}
.chat-msg-k{display:flex;align-items:center;justify-content:space-between;gap:10px}
.chat-msg-k b{letter-spacing:.02em}
.chat-msg-k small{color:var(--muted2)}
.chat-msg-v{color:var(--muted);line-height:1.65}
.chat-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.chat-form .input{flex:1;min-width:220px}

@media (max-width: 720px){
  .form-grid{grid-template-columns:1fr}
  .chat-layout{grid-template-columns:1fr}
  .chat-form .input{min-width:0;width:100%}
}

.join-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:16px;
}
.steps{margin:0;padding:0;list-style:none;display:grid;gap:12px;color:var(--muted);line-height:1.6}
.steps li{display:flex;gap:12px;align-items:flex-start}
.step-n{
  font-family:Orbitron,Inter,system-ui;
  font-weight:800;
  color:rgba(var(--accent2Rgb),.96);
  background:rgba(var(--accentRgb),.09);
  border:1px solid rgba(var(--accentRgb),.22);
  padding:6px 10px;
  border-radius:999px;
  letter-spacing:.08em;
  font-size:12px;
  flex:0 0 auto;
}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.divider{height:1px;background:var(--border);margin:16px 0}
.discord-widget-head{display:grid;gap:6px;margin-bottom:12px}
.discord-widget-title{font-weight:800}
.discord-widget-sub{font-size:13px;color:var(--muted);line-height:1.5}
.discord-embed-wrap{
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--border);
  background:rgba(7,11,11,.45);
}
.discord-embed{width:100%;height:340px;border:0;display:block}

.footer{
  padding:36px 0;
  border-top:1px solid var(--border);
  background:linear-gradient(180deg, rgba(9,13,13,.56), rgba(9,13,13,.78));
}
.footer-grid{display:grid;grid-template-columns:1.2fr .7fr 1fr;gap:16px;align-items:center}
.footer-brand{display:flex;align-items:center;gap:12px}
.brand-mark-lg{width:56px;height:56px;border-radius:18px}
.footer-title{font-family:Orbitron,Inter,system-ui;font-weight:700;letter-spacing:.02em}
.footer-sub{color:var(--muted2);font-size:13px;margin-top:6px}
.footer-links{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.footer-link{color:var(--muted);padding:10px 10px;border-radius:12px}
.footer-link:hover{color:var(--text);background:rgba(var(--accentRgb),.08)}
.footer-meta{display:grid;gap:10px;justify-items:end}
.footer-ip{display:flex;align-items:center;gap:10px}
.footer-ip-k{font-size:12px;color:var(--muted2);letter-spacing:.18em;text-transform:uppercase}
.footer-ip-v{padding:8px 10px;border-radius:14px;border:1px solid var(--border);background:rgba(7,11,11,.45)}
.footer-copy{color:var(--muted2);font-size:13px}

[data-reveal]{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
}
[data-reveal].is-visible{
  opacity:1;
  transform:translateY(0);
}

@keyframes spin{to{transform:rotate(372deg)}}

.nav-btn{
  background:transparent;
  border:0;
  cursor:pointer;
  text-align:left;
}

.nav-dropdown{position:relative}
.nav-submenu{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:220px;
  padding:10px;
  border-radius:18px;
  border:1px solid var(--border);
  background:rgba(10,16,15,.92);
  box-shadow:var(--shadow);
  display:none;
  z-index:60;
}
.nav-dropdown:hover .nav-submenu,
.nav-dropdown:focus-within .nav-submenu{display:block}
.nav-dropdown.is-open .nav-submenu{display:block}
.nav-panel .nav-dropdown{position:static}
.nav-panel .nav-submenu{
  position:static;
  top:auto;
  left:auto;
  min-width:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  display:none;
  margin-top:6px;
}
.nav-panel .nav-dropdown.is-open .nav-submenu{display:grid;gap:6px}
.nav-subitem{
  width:100%;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  text-align:left;
}
.nav-subitem:hover{color:var(--text);background:rgba(var(--accentRgb),.08);border-color:rgba(var(--accentRgb),.16)}

.home-hero{
  position:relative;
  padding:calc(var(--headerH) + 44px) 0 34px;
  overflow:hidden;
}
.home-hero-bg{
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(900px 520px at 18% 30%, rgba(var(--accentRgb),.12), transparent 58%),
    radial-gradient(920px 520px at 80% 20%, rgba(var(--siennaRgb),.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.60)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent 96px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent 74px);
  filter:saturate(1.05) contrast(1.05);
  transform:rotate(-2deg) scale(1.02);
}
.home-hero-inner{
  position:relative;
  min-height:calc(100vh - var(--headerH) - 120px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:14px;
}
.home-hero-logo{
  width:clamp(150px, 16vw, 260px);
  height:clamp(150px, 16vw, 260px);
  border-radius:999px;
  position:relative;
  overflow:hidden;
  background-image:url("./logo.png?v=20260402-1");
  background-size:cover;
  background-position:center;
  border:1px solid var(--border);
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  transform:translateZ(0) scale(1) rotateX(var(--rx, 0deg)) rotateY(calc(var(--ry, 0deg) + var(--spin3d, 0deg)));
  transform-style:preserve-3d;
  will-change:transform, filter;
  filter:saturate(1.03) contrast(1.02);
  animation:spin3d 10.5s linear infinite;
  transition:
    transform .45s ease,
    box-shadow .45s ease,
    border-color .45s ease,
    filter .45s ease;
}
.home-hero-logo:hover{animation-play-state:paused}
.home-hero-logo::before{
  content:"";
  position:absolute;
  inset:-35%;
  background:conic-gradient(
    from 180deg,
    rgba(var(--accent2Rgb),.00),
    rgba(var(--accent2Rgb),.38),
    rgba(var(--accentRgb),.28),
    rgba(var(--siennaRgb),.34),
    rgba(var(--accent2Rgb),.42),
    rgba(var(--accent2Rgb),.00)
  );
  filter:blur(18px);
  opacity:.0;
  transform:translateZ(-1px) rotate(0deg);
  transition:opacity .45s ease;
  pointer-events:none;
}
.home-hero-logo::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(220px 180px at 20% 20%, rgba(var(--accentRgb),.14), transparent 60%),
    radial-gradient(240px 180px at 80% 70%, rgba(var(--siennaRgb),.12), transparent 62%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0, rgba(255,255,255,.045) 1px, transparent 1px, transparent 14px);
  mix-blend-mode:soft-light;
  opacity:.0;
  transition:opacity .45s ease;
  pointer-events:none;
}
.logo-particle{
  position:absolute;
  width:8px;height:8px;
  border-radius:999px;
  background:rgba(var(--accent2Rgb),.95);
  box-shadow:0 0 0 6px rgba(var(--accentRgb),.12);
  left:var(--x, 50%);
  top:var(--y, 50%);
  transform:translate(-50%, -50%) translateZ(1px);
  opacity:0;
  animation:logoPop .9s ease forwards;
  pointer-events:none;
}
@keyframes logoPop{
  0%{opacity:0;transform:translate(-50%, -50%) scale(.4)}
  20%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(.9)}
}
.home-hero-logo:focus-visible{
  outline:2px solid rgba(var(--accent2Rgb),.70);
  outline-offset:6px;
}
@media (hover: hover) and (pointer: fine){
  .home-hero-logo:hover{
    border-color:rgba(var(--accentRgb),.40);
    box-shadow:0 26px 80px rgba(0,0,0,.62), 0 0 0 10px rgba(var(--accentRgb),.12);
    filter:saturate(1.12) contrast(1.06);
  }
  .home-hero-logo:hover::before{opacity:.85;animation:spin 6.5s linear infinite}
  .home-hero-logo:hover::after{opacity:.85}
}
.home-hero-title{
  margin:0;
  font-family:Orbitron,Inter,system-ui;
  letter-spacing:.02em;
  font-size:clamp(28px, 3.8vw, 54px);
  line-height:1.08;
}
.home-hero-sub{
  margin:0;
  color:var(--muted);
  line-height:1.7;
  max-width:860px;
  font-size:15px;
}
.home-hero-actions{
  margin-top:8px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
}
.btn-ic{width:18px;height:18px;display:inline-grid;place-items:center}
.btn-ic svg{width:18px;height:18px}
.home-ip{
  margin-top:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  border:1px solid var(--border);
  background:rgba(7,11,11,.36);
  padding:10px 12px;
  border-radius:18px;
}
.home-ip-k{font-size:12px;color:var(--muted2);letter-spacing:.18em;text-transform:uppercase;font-weight:800}
.home-ip-v{padding:8px 10px;border-radius:14px;border:1px solid var(--border);background:rgba(7,11,11,.45)}
.home-ip-hint{color:rgba(var(--accent2Rgb),.92);font-size:13px;min-height:18px}

.btn.is-disabled{opacity:.58;pointer-events:none}
.home-srv{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;
  color:var(--muted);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
  font-weight:900;
}
.home-srv-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  box-shadow:0 0 0 6px rgba(0,0,0,.22);
}
.home-srv-dot.is-on{
  background:#22c55e;
  box-shadow:0 0 0 6px rgba(34,197,94,.14), 0 10px 26px rgba(34,197,94,.18);
  animation:mtacPulse 1.3s ease-in-out infinite;
}
.home-srv-dot.is-off{
  background:#ff3b3b;
  box-shadow:0 0 0 6px rgba(255,59,59,.12), 0 10px 26px rgba(255,59,59,.16);
  animation:mtacBlink 2.2s ease-in-out infinite;
}
.home-srv-dot.is-maint{
  background:rgba(var(--accent2Rgb), .92);
  box-shadow:0 0 0 6px rgba(var(--accent2Rgb),.12), 0 10px 26px rgba(var(--accent2Rgb),.16);
}

.home-media{padding:12px 0 46px}
.media-card{
  height:clamp(240px, 38vw, 420px);
  border-radius:var(--radius2);
  border:1px solid var(--border);
  box-shadow:var(--shadow2);
  background:
    linear-gradient(180deg, rgba(7,11,11,.18), rgba(7,11,11,.78)),
    radial-gradient(520px 260px at 20% 20%, rgba(var(--accentRgb),.12), transparent 62%),
    radial-gradient(560px 320px at 80% 60%, rgba(var(--accent2Rgb),.10), transparent 64%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent 18px);
  background-size:cover;
  background-position:center;
}

.home-stats{padding:52px 0 74px}
.home-stats-head{display:grid;gap:10px;justify-items:center;text-align:center}
.home-stats-title{margin:0;font-family:Orbitron,Inter,system-ui;font-size:clamp(22px, 3vw, 36px)}
.home-stats-sub{margin:0;color:var(--muted);max-width:820px;line-height:1.7}
.home-kpis{
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
}
.home-kpi{
  padding:18px 18px;
  border-radius:var(--radius2);
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(16,27,24,.86), rgba(12,19,17,.72));
  box-shadow:var(--shadow2);
  text-align:center;
}
.home-kpi-v{font-family:Orbitron,Inter,system-ui;font-weight:800;font-size:36px;letter-spacing:.02em}
.home-kpi-k{margin-top:10px;color:var(--muted2);font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:800}
.home-social{margin-top:22px;display:grid;gap:12px;justify-items:center;text-align:center}
.home-social-title{color:var(--muted2);font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:800}
.home-social-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

.nav-overlay{
  position:fixed;
  inset:0;
  display:none;
  z-index:80;
}
.nav-overlay.is-open{display:block}
.nav-overlay-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.58);
}
.nav-overlay-card{
  position:relative;
  width:min(1200px, calc(100% - 28px));
  margin:calc(var(--headerH) + 18px) auto 18px;
  max-height:calc(100vh - var(--headerH) - 36px);
  border-radius:26px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(16,27,24,.96), rgba(10,16,15,.92));
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.nav-overlay-head{
  padding:14px 14px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.nav-overlay-title{font-family:Orbitron,Inter,system-ui;font-weight:700;letter-spacing:.02em}
.nav-overlay-body{
  overflow:auto;
  padding:0;
}
.nav-overlay-panel{display:none}
.nav-overlay-panel.is-active{display:block}
.nav-overlay-panel .section{padding:52px 0}
.nav-overlay-panel .section-alt{border:0}

@media (max-width: 980px){
  :root{--headerH:70px}
  .cards-4{grid-template-columns:repeat(2, minmax(0,1fr))}
  .faction-detail-grid{grid-template-columns:1fr}
  .features-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .staff-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .join-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;justify-items:start}
  .footer-meta{justify-items:start}
  .footer-links{justify-content:flex-start}
  .home-kpis{grid-template-columns:1fr}
}

@media (max-width: 720px){
  .nav-panel{width:min(320px, 92vw)}
  .grid-2{grid-template-columns:1fr}
  .rules-grid{grid-template-columns:1fr}
  .quick-stats{grid-template-columns:1fr}
}

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