/* areniz.com (S-100) — new site for the 3D RTS ARENIZ.
   Tokens copied from the legacy ZOGOR GAMES/tools/site/areniz_css.py (read-only source; not edited)
   so the two sites stay siblings. Fonts: Rajdhani SemiBold (SIL OFL 1.1, bundled subset, see
   /assets/fonts/OFL.txt); body text uses the system font stack, no web font download. */
@font-face{font-family:'Rajdhani';src:url(/assets/fonts/rajdhani-600.woff2) format('woff2');
  font-weight:600 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-024F,U+1E00-1EFF,U+2000-206F,U+20AC,U+2122,U+2190-21FF}

:root{
  --bg:#07080C;         --bg-rgb:7,8,12;
  --bg-2:#0B0F1A;       --bg-2-rgb:11,15,26;
  --panel:#11151F;      --panel-rgb:17,21,31;
  --raise:#161C29;
  --line:#1E2432;       --line-2:#2B3346;
  --text:#EEF1F7;       --text-rgb:238,241,247;
  --muted:#98A1B4;      --dim:#848EA3;
  --accent:#E11D48;     --accent-rgb:225,29,72;
  --teal:#2DD4BF;       --teal-rgb:45,212,191;
  --ore:#F97316;        --ore-rgb:249,115,22;
  --crystal:#22D3EE;    --crystal-rgb:34,211,238;
  /* Faction colours sampled from the approved identity emblems. */
  --white:#2AA7C0;  --white-rgb:42,167,192;
  --black:#EF3B2D;  --black-rgb:239,59,45;
  --grey:#F4C20D;   --grey-rgb:244,194,13;

  --font-display:'Rajdhani',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-body:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,
   'Hiragino Sans','PingFang SC','Microsoft YaHei','Apple SD Gothic Neo','Malgun Gothic',
   'Nirmala UI','Noto Sans Devanagari','Noto Sans',sans-serif;
  --sh-2:0 12px 32px rgba(0,0,0,.45);
  --sh-3:0 24px 64px rgba(0,0,0,.55);
  --pad:clamp(16px,5vw,64px);
  --section:clamp(64px,8vw,112px);
  --t:.34s cubic-bezier(.16,1,.3,1);
  --cut:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  color-scheme:dark;
}
html[lang="ja"]{--font-body:'Hiragino Sans','Yu Gothic','Meiryo','Noto Sans JP',system-ui,sans-serif;
  --font-display:'Rajdhani','Hiragino Sans','Yu Gothic','Noto Sans JP',sans-serif}
html[lang="zh"]{--font-body:'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',system-ui,sans-serif;
  --font-display:'Rajdhani','PingFang SC','Microsoft YaHei','Noto Sans SC',sans-serif}
html[lang="ko"]{--font-body:'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',system-ui,sans-serif;
  --font-display:'Rajdhani','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif}
html[lang="hi"]{--font-body:'Kohinoor Devanagari','Nirmala UI','Mangal','Noto Sans Devanagari',system-ui,sans-serif;
  --font-display:'Rajdhani','Kohinoor Devanagari','Nirmala UI','Noto Sans Devanagari',sans-serif}
html[lang="ar"]{--font-body:'Geeza Pro','Segoe UI','Noto Sans Arabic','Tahoma',system-ui,sans-serif;
  --font-display:'Geeza Pro','Segoe UI','Noto Sans Arabic',system-ui,sans-serif}
html[lang="ru"]{--font-display:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
[id]{scroll-margin-top:84px}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;line-height:1.08;font-weight:700}
p{margin:0}
.skip{position:absolute;inset-inline-start:-999px;top:8px;z-index:100;background:var(--accent);color:#fff;padding:8px 14px}
.skip:focus{inset-inline-start:8px}
.wrap{width:min(1200px,100% - 2*var(--pad));margin-inline:auto}
.section{padding-block:var(--section);position:relative}
.section.alt{background:linear-gradient(180deg,var(--bg-2),var(--bg))}
.label{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:13px;
  font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line-2);padding:6px 12px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%)}
html[lang="ar"] .label,html[lang="hi"] .label,html[lang="ja"] .label,html[lang="zh"] .label,html[lang="ko"] .label{letter-spacing:.06em}
.label::before{content:"";width:6px;height:6px;background:var(--accent)}
.h2{font-size:clamp(30px,4.4vw,50px);letter-spacing:.01em;margin-top:18px}
.sub{color:var(--muted);margin-top:14px;max-width:64ch;font-size:17px}
.head{display:grid;gap:8px;justify-items:start;margin-bottom:clamp(32px,4vw,52px)}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:50;background:rgba(var(--bg-rgb),.72);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top .in{display:flex;align-items:center;gap:20px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-family:'Rajdhani',var(--font-display);font-weight:700;
  letter-spacing:.24em;font-size:18px;flex:none}
.brand img{width:32px;height:32px;border-radius:7px}
.nav{display:flex;gap:20px;font-size:14px;color:var(--muted);overflow-x:auto;scrollbar-width:none;
  white-space:nowrap;flex:1;min-width:0;mask-image:linear-gradient(90deg,#000 88%,transparent)}
html[dir="rtl"] .nav{mask-image:linear-gradient(270deg,#000 88%,transparent)}
.nav::-webkit-scrollbar{display:none}
.nav a{padding:6px 0;position:relative;transition:color var(--t)}
.nav a:hover{color:var(--text)}
.nav a::after{content:"";position:absolute;inset-inline-start:0;bottom:0;height:2px;width:0;background:var(--accent);transition:width var(--t)}
.nav a:hover::after{width:100%}
.tools{display:flex;align-items:center;gap:10px;flex:none}
.lang{position:relative}
.lang summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:13px;
  color:var(--muted);border:1px solid var(--line-2);padding:7px 10px;border-radius:2px}
.lang summary::-webkit-details-marker{display:none}
.lang summary svg{width:16px;height:16px}
.lang ul{position:absolute;inset-inline-end:0;top:calc(100% + 8px);margin:0;padding:6px;list-style:none;
  background:var(--panel);border:1px solid var(--line-2);box-shadow:var(--sh-3);min-width:180px;
  display:grid;grid-template-columns:1fr 1fr;gap:2px;z-index:60}
.lang li a{display:block;padding:7px 10px;font-size:14px;color:var(--muted);font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
.lang li a:hover,.lang li a[aria-current]{background:var(--raise);color:var(--text)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-display);
  font-weight:700;font-size:16px;letter-spacing:.08em;text-transform:uppercase;padding:14px 26px;
  background:var(--accent);color:#fff;clip-path:var(--cut);transition:filter var(--t),transform var(--t);border:0;cursor:pointer}
.btn:hover{filter:brightness(1.12);transform:translateY(-1px)}
.btn.ghost{background:rgba(var(--text-rgb),.06);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--text)}
.btn.sm{padding:9px 16px;font-size:14px}
.btn svg{width:18px;height:18px}
.top .btn.sm.top-dl{display:none}
@media (min-width:900px){.top .btn.sm.top-dl{display:inline-flex}}
/* header account control (owner 2026-10-21 redesign): ONE compact control, phones included; one state at a time (site.js).
   Signed out: a "Sign in" pill -> popover (desktop) / sheet under the header (phones). Signed in: avatar chip -> menu. */
.acct{display:flex;align-items:center;flex:none;position:relative}
.acct[hidden]{display:none}
.acct-skel span{display:block;width:96px;height:36px;border-radius:999px;background:linear-gradient(90deg,rgba(var(--text-rgb),.05),rgba(var(--text-rgb),.13),rgba(var(--text-rgb),.05));
  background-size:200% 100%;animation:acct-pulse 1.3s ease-in-out infinite}
@keyframes acct-pulse{0%{background-position:100% 0}100%{background-position:-100% 0}}
.acct-pill,.acct-chip{display:inline-flex;align-items:center;gap:8px;height:36px;border-radius:999px;cursor:pointer;white-space:nowrap;
  font:inherit;font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.05em;color:var(--text);
  transition:background var(--t),border-color var(--t),box-shadow var(--t)}
.acct-pill{padding:0 16px 0 5px;border:1px solid rgba(var(--accent-rgb),.6);
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.22),rgba(var(--accent-rgb),.08));box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}
html[dir="rtl"] .acct-pill{padding:0 5px 0 16px}
.acct-pill svg{width:26px;height:26px;padding:5px;flex:none;border-radius:50%;background:var(--accent);color:#fff;stroke-width:2.2}
.acct-pill:hover,.acct-pill[aria-expanded="true"]{border-color:var(--accent);background:linear-gradient(180deg,rgba(var(--accent-rgb),.38),rgba(var(--accent-rgb),.16));
  box-shadow:0 6px 22px -6px rgba(var(--accent-rgb),.65)}
.acct-chip{padding:0 10px 0 3px;border:1px solid var(--line-2);background:rgba(var(--text-rgb),.05);max-width:230px}
html[dir="rtl"] .acct-chip{padding:0 3px 0 10px}
.acct-chip:hover,.acct-chip[aria-expanded="true"]{border-color:rgba(var(--accent-rgb),.7);background:rgba(var(--text-rgb),.09)}
.acct-av{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;font-family:var(--font-display);font-size:13px;font-weight:700;
  letter-spacing:.02em;color:#fff;background:linear-gradient(135deg,var(--accent),var(--ore));box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.acct-av.lg{width:42px;height:42px;font-size:16px}
.acct-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;letter-spacing:.02em}
.acct-caret{width:10px;height:8px;flex:none;color:var(--muted);transition:transform var(--t)}
.acct-chip[aria-expanded="true"] .acct-caret{transform:rotate(180deg)}
/* the popover / menu panels */
.acct-pop,.acct-list{position:absolute;top:calc(100% + 12px);inset-inline-end:0;z-index:70;color:var(--text);
  background:linear-gradient(180deg,rgba(var(--panel-rgb),.98),rgba(var(--bg-2-rgb),.98));border:1px solid var(--line-2);border-radius:14px;
  box-shadow:var(--sh-3),0 0 0 1px rgba(0,0,0,.3);animation:acct-in .18s cubic-bezier(.16,1,.3,1);font-family:var(--font-body)}
.acct-pop[hidden],.acct-list[hidden]{display:none}
.acct-pop::before,.acct-list::before{content:"";position:absolute;top:-1px;inset-inline:18px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent)}
@keyframes acct-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.acct-pop{width:min(360px,calc(100vw - 32px));padding:18px 18px 16px}
.acct-pop-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.acct-pop-t{margin:0;font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:.04em}
.acct-pop-sub{margin:4px 0 0;font-size:13px;line-height:1.45;color:var(--muted)}
.acct-x{flex:none;display:grid;place-items:center;width:32px;height:32px;margin:-4px -6px 0 0;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer}
html[dir="rtl"] .acct-x{margin:-4px 0 0 -6px}
.acct-x:hover{background:rgba(var(--text-rgb),.08);color:var(--text)}
.acct-x svg{width:16px;height:16px}
.acct-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:14px;padding:4px;border-radius:10px;background:rgba(var(--bg-rgb),.7);border:1px solid var(--line)}
.acct-tabs button{min-width:0;padding:8px 6px;border:0;border-radius:7px;background:none;color:var(--muted);cursor:pointer;
  font:inherit;font-family:var(--font-display);font-size:14px;font-weight:700;letter-spacing:.04em;line-height:1.15;overflow-wrap:anywhere}
.acct-tabs button[aria-selected="true"]{background:var(--raise);color:var(--text);box-shadow:inset 0 -2px 0 var(--accent),0 2px 8px rgba(0,0,0,.35)}
.acct-tabs button:hover{color:var(--text)}
.acct-panel{margin-top:14px}
.acct-panel[hidden]{display:none}
.acct-form{display:grid;gap:12px}
.acct-field{display:grid;gap:5px}
.acct-field label{font-size:13px;font-weight:600;color:#C9D0DD}
.acct-field input{width:100%;min-width:0;height:44px;padding:0 12px;border-radius:8px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--text);font:inherit;font-size:16px;
  transition:border-color var(--t),box-shadow var(--t)}
.acct-field input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.25)}
.acct-field input[aria-invalid="true"]{border-color:var(--accent)}
.acct-msg{margin:0;font-size:13px;line-height:1.45;color:var(--muted)}
.acct-msg:empty{display:none}
.acct-msg.bad{color:#ff8a9d}
.acct-submit{width:100%;padding:12px 18px;font-size:15px}
.acct-submit[disabled]{opacity:.6;cursor:progress}
.acct-links{display:grid;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:13px}
.acct-links a,.acct-link{color:var(--muted);text-decoration:underline;text-decoration-color:rgba(var(--text-rgb),.25);text-underline-offset:3px}
.acct-links a:hover,.acct-link:hover{color:var(--text);text-decoration-color:var(--accent)}
.acct-lead{margin:0 0 14px;font-size:14px;line-height:1.5;color:var(--muted)}
.acct-switch{margin:12px 0 0;font-size:13px;color:var(--muted)}
.acct-link{background:none;border:0;padding:0;font:inherit;font-weight:600;cursor:pointer}
.acct-list{width:min(270px,calc(100vw - 32px));padding:8px;display:flex;flex-direction:column;gap:2px}
.acct-me{display:flex;align-items:center;gap:12px;padding:8px 8px 12px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.acct-me>div{min-width:0}
.acct-me-k{margin:0;font-size:12px;color:var(--dim)}
.acct-me-n{margin:2px 0 0;font-family:var(--font-display);font-size:17px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-list a,.acct-list button{display:flex;align-items:center;gap:10px;width:100%;text-align:start;padding:10px;border-radius:8px;font:inherit;font-size:14px;color:var(--muted);
  background:none;border:0;cursor:pointer;font-family:var(--font-body)}
.acct-list a svg{width:18px;height:18px;flex:none;color:var(--dim)}
.acct-list a:hover,.acct-list button:hover,.acct-list a:focus-visible,.acct-list button:focus-visible{background:var(--raise);color:var(--text)}
.acct-list a:hover svg{color:var(--accent)}
.acct-list a:focus-visible,.acct-list button:focus-visible,.acct-tabs button:focus-visible,.acct-x:focus-visible{outline-offset:-2px}
.acct-list .acct-out-btn{margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 8px 8px;color:#ff8a9d}
@media (max-width:599px){
  /* phones: the panels drop from the header edge to edge (positioned against the sticky header) */
  .top .tools,.acct{position:static}
  .acct-pop{top:100%;inset-inline:0;width:auto;max-height:calc(100dvh - 72px);overflow:auto;border-radius:0 0 18px 18px;border-inline:0;padding:18px 16px 20px;
    box-shadow:0 24px 48px rgba(0,0,0,.6),0 0 0 100vmax rgba(4,5,8,.6)}
  .acct-list{top:calc(100% - 4px);inset-inline-end:12px}
  .acct-pill{height:34px;font-size:13px;padding-inline-end:13px;gap:6px}
  html[dir="rtl"] .acct-pill{padding:0 5px 0 13px}
  .acct-pill svg{width:24px;height:24px}
  .acct-chip{height:34px;max-width:150px}
  .acct-av{width:28px;height:28px;font-size:12px}
  .acct-skel span{width:84px;height:34px}
}
@media (max-width:420px){
  .top .brand{letter-spacing:.12em;font-size:16px;gap:8px}
  .top .brand img{width:28px;height:28px}
  .lang summary span{display:none}
  .acct-chip .acct-name{display:none}
  .acct-chip{gap:6px;padding-inline-end:9px}
}
@media (max-width:899px){
  .top .in{flex-wrap:wrap;height:auto;padding-top:10px;gap:10px 16px}
  .nav{order:3;flex:1 0 100%;padding-bottom:8px}
  .tools{margin-inline-start:auto}
}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(92vh,880px);display:flex;align-items:flex-end;overflow:hidden;
  padding-block:clamp(96px,14vw,160px) clamp(48px,6vw,80px);isolation:isolate}
.hero picture,.hero .bgimg{position:absolute;inset:0;z-index:-2}
.hero .bgimg img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(var(--bg-rgb),.35) 0%,rgba(var(--bg-rgb),.05) 35%,rgba(var(--bg-rgb),.82) 72%,var(--bg) 100%),
             linear-gradient(90deg,rgba(var(--bg-rgb),.8) 0%,rgba(var(--bg-rgb),.1) 62%)}
html[dir="rtl"] .hero::before{background:linear-gradient(180deg,rgba(var(--bg-rgb),.35) 0%,rgba(var(--bg-rgb),.05) 35%,rgba(var(--bg-rgb),.82) 72%,var(--bg) 100%),
             linear-gradient(270deg,rgba(var(--bg-rgb),.8) 0%,rgba(var(--bg-rgb),.1) 62%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(var(--text-rgb),.05) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--text-rgb),.05) 1px,transparent 1px);
  background-size:48px 48px;mask-image:radial-gradient(ellipse at 30% 60%,#000 0%,transparent 70%)}
.hero .grid{display:grid;gap:40px;align-items:end;grid-template-columns:1fr}
@media (min-width:1000px){.hero .grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
@media (min-width:1000px){.hero .wrap{width:min(1440px,100% - 2*var(--pad))}}
.kicker{font-family:var(--font-display);font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);font-size:14px}
html[lang="ar"] .kicker,html[lang="ja"] .kicker,html[lang="zh"] .kicker,html[lang="ko"] .kicker,html[lang="hi"] .kicker{letter-spacing:.08em}
.hero h1{margin-top:14px;display:flex;align-items:center;gap:18px}
.hero h1 img{width:clamp(56px,7vw,84px);height:auto;border-radius:16px;box-shadow:0 0 40px rgba(var(--accent-rgb),.35)}
.hero h1 span{font-family:'Rajdhani',sans-serif;font-size:clamp(56px,10vw,120px);letter-spacing:.14em;line-height:.9}
.tagline{font-family:var(--font-display);font-size:clamp(22px,2.8vw,32px);font-weight:600;margin-top:18px}
.lead{color:#C9D0DD;max-width:58ch;margin-top:14px;font-size:clamp(16px,1.3vw,18px)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.release{margin-top:16px;color:var(--muted);font-size:14px;letter-spacing:.04em}
.trailer{position:relative;aspect-ratio:16/9;background:rgba(var(--panel-rgb),.72);border:1px solid var(--line-2);
  clip-path:var(--cut);display:grid;place-items:center;text-align:center;overflow:hidden;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.trailer iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.trailer .play{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;
  border:2px solid rgba(var(--text-rgb),.5);background:rgba(var(--accent-rgb),.18)}
.trailer .play svg{width:26px;height:26px;margin-inline-start:4px}
html[dir="rtl"] .trailer .play svg{margin-inline-start:0;margin-inline-end:0;margin-left:4px}
.trailer strong{display:block;font-family:var(--font-display);font-size:20px;letter-spacing:.06em}
.trailer small{color:var(--muted);display:block;margin-top:4px;padding-inline:16px}
.platforms{margin-top:36px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.platforms .t{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-inline-end:6px;font-family:var(--font-display);font-weight:600}
.badge{display:inline-flex;align-items:center;gap:10px;padding:9px 14px;border:1px solid var(--line-2);
  background:rgba(var(--panel-rgb),.75);font-size:14px;line-height:1.2;transition:border-color var(--t),background var(--t)}
.badge svg{width:20px;height:20px;flex:none}
.badge small{display:block;font-size:11px;color:var(--muted);letter-spacing:.04em}
a.badge:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),.1)}
.badge.off{opacity:.6;cursor:default}

/* ---------- about ---------- */
.about{display:grid;gap:clamp(32px,5vw,72px);grid-template-columns:1fr}
@media (min-width:960px){.about{grid-template-columns:1.2fr .8fr}}
.about .text p+p{margin-top:16px}
.about .text p{color:#C3CAD7;font-size:17px}
.points{display:grid;gap:14px;align-content:start}
.point{padding:20px 22px;background:var(--panel);border:1px solid var(--line);border-inline-start:3px solid var(--accent)}
.point h3{font-size:21px}
.point p{color:var(--muted);margin-top:6px;font-size:15px}

/* ---------- factions ---------- */
.factions{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:900px){.factions{grid-template-columns:repeat(3,1fr)}}
.faction{--c:var(--white);--c-rgb:var(--white-rgb);position:relative;padding:30px 26px 28px;background:
  radial-gradient(120% 70% at 50% 0%,rgba(var(--c-rgb),.16),transparent 60%),var(--panel);
  border:1px solid var(--line);border-top:3px solid var(--c);clip-path:var(--cut);display:flex;flex-direction:column}
.faction.black{--c:var(--black);--c-rgb:var(--black-rgb)}
.faction.grey{--c:var(--grey);--c-rgb:var(--grey-rgb)}
.faction img{width:108px;height:108px;filter:drop-shadow(0 8px 24px rgba(var(--c-rgb),.35))}
.faction .fname{margin-top:18px;font-size:32px;letter-spacing:.12em;text-transform:uppercase;color:var(--c)}
html[lang="ar"] .faction .fname,html[lang="ja"] .faction .fname,html[lang="zh"] .faction .fname,html[lang="ko"] .faction .fname,html[lang="hi"] .faction .fname{letter-spacing:.02em}
.faction .full{color:var(--muted);font-size:14px;letter-spacing:.06em;margin-top:2px}
.faction .motto{font-family:var(--font-display);font-weight:600;font-size:19px;margin-top:16px}
.faction p.body{color:#C3CAD7;margin-top:10px;font-size:15px}
.faction ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:14px;color:var(--muted)}
.faction li{display:flex;gap:10px}
.faction li::before{content:"";flex:none;width:7px;height:7px;margin-top:8px;background:var(--c);transform:rotate(45deg)}

/* ---------- countries ---------- */
.cgroup+.cgroup{margin-top:34px}
.cgroup h3{display:flex;align-items:center;gap:12px;font-size:20px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.cgroup h3 img{width:30px;height:30px}
.countries{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:760px){.countries{grid-template-columns:repeat(3,1fr)}}
.country{--c:var(--white);padding:20px;background:var(--panel);border:1px solid var(--line);position:relative}
.country.black{--c:var(--black)}.country.grey{--c:var(--grey)}
.country::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;background:var(--c)}
.country h4{font-size:24px;letter-spacing:.1em}
.country dl{margin:12px 0 0;display:grid;gap:12px}
.country dt{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);font-family:var(--font-display);font-weight:600}
.country dd{margin:2px 0 0;font-size:14px;color:var(--muted)}
.country dd b{display:block;color:var(--text);font-family:var(--font-display);font-size:17px;letter-spacing:.06em;font-weight:700}

/* ---------- features ---------- */
.features{display:grid;gap:0;grid-template-columns:1fr;padding-block-start:1px;padding-inline-start:1px}
@media (min-width:640px){.features{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px) and (max-width:1199px){.features{grid-template-columns:repeat(3,1fr)}.feature:last-child:nth-child(3n+1){grid-column:1/-1}}
@media (min-width:1200px){.features{grid-template-columns:repeat(4,1fr)}.feature:last-child:nth-child(4n+1){grid-column:1/-1}}
.feature{background:var(--bg);padding:26px 24px;transition:background var(--t);border:1px solid var(--line);margin-block-start:-1px;margin-inline-start:-1px}
.feature:hover{background:var(--panel)}
.feature .ic{width:42px;height:42px;display:grid;place-items:center;color:var(--accent);
  border:1px solid rgba(var(--accent-rgb),.35);background:rgba(var(--accent-rgb),.07)}
.feature .ic svg{width:22px;height:22px}
.feature h3{font-size:21px;margin-top:16px}
.feature p{color:var(--muted);margin-top:8px;font-size:15px}

/* ---------- media ---------- */
.gallery{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}.gallery .shot:first-child{grid-column:span 2;grid-row:span 2}}
.shot{position:relative;display:block;overflow:hidden;background:var(--panel);border:1px solid var(--line);cursor:zoom-in;padding:0;color:inherit;font:inherit;text-align:start}
.shot img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.shot:hover img{transform:scale(1.04)}
.shot span{position:absolute;inset-inline:0;bottom:0;padding:26px 14px 10px;font-size:13px;
  background:linear-gradient(transparent,rgba(0,0,0,.82));color:#DDE2EC}
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(3,4,7,.94);display:none;align-items:center;justify-content:center;padding:16px}
.lightbox.open{display:flex}
.lightbox figure{margin:0;max-width:min(1600px,100%);text-align:center}
.lightbox img{max-height:82vh;width:auto;margin:auto;border:1px solid var(--line-2)}
.lightbox figcaption{color:var(--muted);margin-top:12px}
.lightbox button{position:absolute;background:rgba(var(--panel-rgb),.9);border:1px solid var(--line-2);color:var(--text);
  width:48px;height:48px;display:grid;place-items:center;cursor:pointer}
.lightbox button svg{width:22px;height:22px}
.lightbox .x{top:16px;inset-inline-end:16px}
.lightbox .pv{inset-inline-start:16px;top:50%;transform:translateY(-50%)}
.lightbox .nx{inset-inline-end:16px;top:50%;transform:translateY(-50%)}
html[dir="rtl"] .lightbox .pv svg,html[dir="rtl"] .lightbox .nx svg{transform:scaleX(-1)}

/* ---------- campaign ---------- */
.campaign{position:relative;overflow:hidden;isolation:isolate}
.campaign .bgimg{position:absolute;inset:0;z-index:-2;opacity:.28}
.campaign .bgimg img{width:100%;height:100%;object-fit:cover}
.campaign::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--bg),rgba(var(--bg-rgb),.6) 40%,var(--bg))}
.camp-body{font-size:18px;color:#C9D0DD;max-width:70ch;margin-top:16px}
.parts{display:grid;gap:14px;margin-top:36px;grid-template-columns:1fr}
@media (min-width:900px){.parts{grid-template-columns:repeat(3,1fr)}}
.part{--c:var(--white);padding:22px;background:rgba(var(--panel-rgb),.85);border:1px solid var(--line);border-top:2px solid var(--c);display:flex;gap:16px;align-items:flex-start}
.part.black{--c:var(--black)}.part.grey{--c:var(--grey)}
.part img{width:48px;height:48px;flex:none}
.part h3{font-size:19px}
.part p{color:var(--muted);font-size:15px;margin-top:6px}
.note{color:var(--dim);font-size:14px;margin-top:20px}

/* ---------- multiplayer ---------- */
.split{display:grid;gap:clamp(28px,5vw,64px);align-items:center;grid-template-columns:1fr}
@media (min-width:960px){.split{grid-template-columns:1fr 1fr}}
.split .media img{border:1px solid var(--line-2);clip-path:var(--cut)}
.checks{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px}
.checks li{display:flex;gap:12px;align-items:flex-start;color:#C9D0DD}
.checks svg{width:20px;height:20px;flex:none;color:var(--teal);margin-top:3px}

/* ---------- requirements ---------- */
.req{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);font-size:15px}
.req th,.req td{padding:14px 18px;text-align:start;border-bottom:1px solid var(--line);vertical-align:top}
.req thead th{font-family:var(--font-display);letter-spacing:.12em;text-transform:uppercase;font-size:14px;color:var(--muted);background:var(--raise)}
.req tbody th{color:var(--muted);font-weight:500;width:22%}
.req .tbd{color:var(--dim)}
.tablewrap{overflow-x:auto}
@media (max-width:640px){
  .req thead{display:none}
  .req,.req tbody,.req tr,.req th,.req td{display:block;width:100%}
  .req tr{border-bottom:1px solid var(--line-2);padding:10px 0}
  .req th,.req td{border:0;padding:4px 16px}
  .req td::before{content:attr(data-h) " — ";color:var(--dim);font-size:13px}
}

/* ---------- faq ---------- */
.faq{display:grid;gap:10px;max-width:880px}
.faq details{background:var(--panel);border:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:600;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-display);font-size:24px;color:var(--accent);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 22px 20px;color:var(--muted)}

/* ---------- community / press ---------- */
.two{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:960px){.two{grid-template-columns:1fr 1fr}}
.card{background:var(--panel);border:1px solid var(--line);padding:28px;clip-path:var(--cut)}
.card h3{font-size:24px}
.card p{color:var(--muted);margin-top:8px}
.socials{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:20px}
.social{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line-2);background:var(--bg-2);font-weight:600;font-size:15px}
.social svg{width:20px;height:20px}
.social small{margin-inline-start:auto;font-weight:400;color:var(--dim);font-size:12px}
a.social:hover{border-color:var(--accent)}
.social.off{opacity:.65}
.news{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.news input{flex:1 1 220px;min-width:0;background:var(--bg-2);border:1px solid var(--line-2);color:var(--text);padding:13px 14px;font:inherit}
.news .btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;filter:none}
.facts{width:100%;border-collapse:collapse;margin-top:18px;font-size:14px}
.facts th,.facts td{padding:9px 0;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}
.facts th{color:var(--dim);font-weight:500;width:36%;padding-inline-end:12px}
.kit{display:flex;gap:14px;align-items:center;margin-top:18px;flex-wrap:wrap}
.kit img{width:56px;height:56px}
.kitlist{margin:16px 0 0;padding-inline-start:18px;color:var(--muted);font-size:15px}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding-block:44px 32px;background:var(--bg-2);font-size:14px;color:var(--muted)}
.foot .in{display:grid;gap:28px;grid-template-columns:1fr}
@media (min-width:900px){.foot .in{grid-template-columns:1.3fr 1fr 1fr}}
.foot .logos{display:flex;align-items:center;gap:22px;margin-top:16px;flex-wrap:wrap}
.foot .logos img{height:26px;width:auto;opacity:.8}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot a:hover{color:var(--text)}
.foot .copy{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);color:var(--dim);font-size:13px;display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between}
.foot h4{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:12px}
.langs-inline{display:flex;flex-wrap:wrap;gap:6px 14px}
.langs-inline a{font-family:system-ui,-apple-system,'Segoe UI',sans-serif}

/* ---------- legal ---------- */
.legal{max-width:820px;padding-block:56px 80px}
.legal h1{font-size:clamp(34px,5vw,52px)}
.legal .meta{color:var(--dim);margin-top:10px;font-size:14px}
.legal .review{margin-top:22px;padding:14px 18px;border:1px solid rgba(var(--ore-rgb),.5);background:rgba(var(--ore-rgb),.08);color:#FBC79A;font-size:15px}
.legal .intro{margin-top:24px;font-size:17px;color:#C9D0DD}
.legal h2{font-size:24px;margin-top:38px}
.legal p,.legal li{color:#BAC2D0;margin-top:12px}
.legal ol,.legal ul{padding-inline-start:22px}
.legal .btn{margin-top:16px}
.legal mark.ph{background:rgba(255,209,102,.16);color:#FFD166;padding:0 3px;border-radius:3px}
.legal h3{font-size:18px;margin-top:28px}
.legal .eula-summary{margin-top:26px;padding:4px 20px 18px;border:1px solid rgba(143,211,255,.35);background:rgba(143,211,255,.06)}
.legal .btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.legal .soon{color:var(--dim);font-size:14px;margin-top:10px}
.crumbs{font-size:14px;color:var(--muted)}
.crumbs a:hover{color:var(--text)}

/* ---------- cookie notice ---------- */
.cookie{position:fixed;inset-inline:16px;bottom:16px;z-index:80;max-width:560px;margin-inline:auto;display:none;
  gap:14px;align-items:center;padding:14px 16px;background:rgba(var(--panel-rgb),.97);border:1px solid var(--line-2);box-shadow:var(--sh-3);font-size:14px}
.cookie.show{display:flex}
.cookie p{color:var(--muted);flex:1}
.cookie a{text-decoration:underline;color:var(--text)}
.cookie .btn{padding:9px 18px;font-size:14px;flex:none}

/* ---------- 404 ---------- */
.nf{min-height:70vh;display:grid;place-items:center;text-align:center;padding:40px 16px}
.nf h1{font-size:clamp(40px,7vw,80px)}
.nf p{color:var(--muted);margin:12px 0 28px}

/* Live game-server status pill (hero platforms row) */
.server-status{display:inline-flex;align-items:center;gap:.5em;padding:.45em .9em;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.35);font-size:.85rem;line-height:1.2}
.server-status .dot{width:.6em;height:.6em;border-radius:50%;background:#888;flex:none}
.server-status.up .dot{background:#3ddc84;box-shadow:0 0 8px #3ddc84}
.server-status.down .dot{background:#e5484d}
a.server-status{color:inherit;text-decoration:none}
a.server-status:hover{border-color:var(--accent)}

/* /<lang>/status.html — live server status */
.status-page{padding:48px 0 80px;min-height:70vh;background:radial-gradient(1200px 500px at 20% -10%,rgba(var(--accent-rgb),.10),transparent 60%)}
.st-hero{display:flex;align-items:center;gap:22px;margin:22px 0 28px;padding:26px 28px;border:1px solid var(--line-2);
  background:linear-gradient(135deg,var(--bg-2),var(--bg));clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
.st-hero .kicker{margin-bottom:8px}
.st-state{margin:0;font-size:clamp(1.6rem,3.4vw,2.4rem);letter-spacing:.02em}
.st-sub{margin:.4em 0 0;color:var(--muted)}
.st-pulse{position:relative;width:54px;height:54px;flex:none}
.st-pulse i,.st-pulse::after{position:absolute;inset:14px;border-radius:50%;background:#7a8396;content:""}
.st-hero.up .st-pulse i{background:#3ddc84;box-shadow:0 0 18px #3ddc84}
.st-hero.up .st-pulse::after{background:#3ddc84;animation:stPulse 1.8s ease-out infinite}
.st-hero.down .st-pulse i{background:#e5484d;box-shadow:0 0 18px #e5484d}
@keyframes stPulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.6);opacity:0}}
.st-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.st-card{display:flex;flex-direction:column;gap:6px;padding:20px;border:1px solid var(--line);background:rgba(var(--bg-2-rgb),.7)}
.st-num{font-family:var(--font-display,inherit);font-size:2rem;font-weight:700;letter-spacing:.03em}
.st-lbl{color:var(--muted);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase}
.st-cap{margin:18px 0 36px}
.st-cap-bar{height:8px;background:var(--line);overflow:hidden}
.st-cap-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),#ff6b81);transition:width .6s ease}
.st-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;color:var(--dim);font-size:.85rem;margin:10px 0 0}
.st-table-wrap{overflow-x:auto;border:1px solid var(--line);margin-bottom:36px}
.st-table{width:100%;border-collapse:collapse;font-size:.95rem}
.st-table th,.st-table td{padding:12px 16px;text-align:start;border-bottom:1px solid var(--line)}
.st-table th{color:var(--muted);font-weight:600;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;background:rgba(var(--bg-2-rgb),.8)}
.st-empty{margin:0;padding:22px 16px;color:var(--muted)}
.st-tag{display:inline-block;padding:3px 10px;border:1px solid var(--line-2);font-size:.8rem}
.st-tag.lobby{border-color:#3ddc84;color:#3ddc84}
.st-tag.playing{border-color:var(--accent);color:#ff6b81}
.st-host{display:inline-block;padding:3px 10px;font-size:.8rem;font-weight:600;letter-spacing:.04em;border:1px solid}
.st-host.server{border-color:#4aa3ff;color:#7cc0ff}
.st-host.p2p{border-color:#f0b43c;color:#f5c862}
.st-steps{display:grid;gap:10px;padding-inline-start:1.2em;color:var(--text)}
@media (max-width:760px){.st-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.st-hero{padding:20px}}

/* (retired download-page styles; page removed 2026-10-13) */
.nav a[aria-current="page"]{color:var(--text)}
.nav a[aria-current="page"]::after{width:100%}
.dl-page{padding:48px 0 var(--section);background:radial-gradient(1200px 520px at 15% -10%,rgba(var(--accent-rgb),.12),transparent 60%)}
.dl-intro{display:grid;gap:4px;justify-items:start;margin:22px 0 clamp(28px,4vw,44px)}
.dl-h1{font-size:clamp(34px,5.4vw,62px);margin-top:16px;letter-spacing:.01em}
.dl-grid{display:grid;gap:18px;grid-template-columns:1fr;align-items:start}
@media (min-width:960px){.dl-grid{grid-template-columns:1.25fr .75fr}}
.dl-card{border-top:3px solid var(--accent);background:radial-gradient(120% 80% at 0% 0%,rgba(var(--accent-rgb),.12),transparent 55%),var(--panel)}
.dl-head{display:flex;align-items:center;gap:16px}
.dl-head img{width:56px;height:56px;border-radius:12px;box-shadow:0 0 28px rgba(var(--accent-rgb),.3);flex:none}
.dl-head h2{font-size:clamp(28px,3.4vw,38px);letter-spacing:.08em;margin-top:6px}
.dl-head .kicker{font-size:13px}
.dl-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:24px 0 0;background:var(--line);border:1px solid var(--line)}
@media (min-width:640px){.dl-facts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.dl-facts div{background:var(--bg-2);padding:14px 16px;min-width:0}
.dl-facts dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-family:var(--font-display);font-weight:600}
html[lang="ar"] .dl-facts dt,html[lang="ja"] .dl-facts dt,html[lang="zh"] .dl-facts dt,html[lang="ko"] .dl-facts dt,html[lang="hi"] .dl-facts dt{letter-spacing:.04em}
.dl-facts dd{margin:4px 0 0;font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:.03em;overflow-wrap:anywhere}
.dl-btn{margin-top:24px;width:100%;font-size:18px;padding:17px 26px}
@media (min-width:640px){.dl-btn{width:auto}}
.dl-file{color:var(--muted);font-size:14px;margin-top:12px}
.card p.dl-msg{margin-top:16px;font-size:14px;color:var(--dim);display:flex;gap:8px;align-items:baseline}
.dl-msg::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#7a8396;transform:translateY(-1px)}
.dl-card.live .dl-msg::before{background:#3ddc84;box-shadow:0 0 8px #3ddc84}
.dl-card.offline .dl-msg::before{background:var(--ore)}
.dl-req h3{font-size:22px}
.dl-req .facts th{width:42%}
.dl-req .note{margin-top:14px}
.dl-page .h2{margin-top:clamp(44px,6vw,72px)}
.dl-steps{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:900px){.dl-steps{grid-template-columns:repeat(3,1fr)}}
.dl-steps li{display:flex;gap:16px;align-items:flex-start;padding:22px;background:var(--panel);border:1px solid var(--line);border-inline-start:3px solid var(--accent)}
.dl-n{flex:none;width:36px;height:36px;display:grid;place-items:center;font-family:'Rajdhani',var(--font-display);font-weight:700;font-size:20px;
  color:var(--accent);border:1px solid rgba(var(--accent-rgb),.45);background:rgba(var(--accent-rgb),.08)}
.dl-steps p{color:#C9D0DD;font-size:15px;overflow-wrap:anywhere}
.dl-more{margin-top:clamp(36px,5vw,56px)}
.dl-status{margin-top:20px}
html[dir="rtl"] .dl-facts dd[dir="ltr"]{text-align:right}

/* Support pages: contact form, bug tracker, fixed changelog, my account (S-100 + support). */
.sp-page{padding:48px 0 var(--section);background:radial-gradient(1200px 520px at 85% -10%,rgba(var(--accent-rgb),.10),transparent 60%)}
.sp-intro{display:grid;gap:4px;justify-items:start;margin:22px 0 clamp(24px,4vw,40px)}
.sp-h1{font-size:clamp(34px,5.2vw,58px);margin-top:16px;letter-spacing:.01em}
.sp-grid{display:grid;gap:18px;grid-template-columns:1fr;align-items:start}
@media (min-width:960px){.sp-grid{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}}
.sp-side{display:grid;gap:18px}.sp-side .card{padding:22px}.sp-side h3{font-size:20px}.sp-side .btn{margin-top:14px}
.sp-main h2,.sp-done h2,.sp-gate h2,.sp-auth h2{font-size:26px}
.sp-form{display:grid;gap:16px;margin-top:6px}
.sp-row{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:640px){.sp-row{grid-template-columns:1fr 1fr}}
.sp-field{display:grid;gap:6px;min-width:0}
.sp-field>label{font-size:14px;font-weight:600;color:#C9D0DD;letter-spacing:.02em}
.sp-form input:not([type=checkbox]):not([type=file]),.sp-form select,.sp-form textarea,.sp-filters input,.sp-filters select{
  width:100%;min-width:0;background:var(--bg-2);border:1px solid var(--line-2);color:var(--text);padding:12px 14px;font:inherit;font-size:16px;border-radius:0}
.sp-form textarea{resize:vertical;min-height:84px;line-height:1.55}
.sp-form select,.sp-filters select{appearance:none;-webkit-appearance:none;padding-inline-end:40px;background-repeat:no-repeat;background-size:12px 8px;background-position:right 16px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2398A1B4' stroke-width='1.6'/%3E%3C/svg%3E")}
[dir=rtl] .sp-form select,[dir=rtl] .sp-filters select{background-position:left 16px center}
.sp-form input:focus,.sp-form select:focus,.sp-form textarea:focus,.sp-filters input:focus,.sp-filters select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.sp-form [aria-invalid=true]{border-color:var(--accent)!important;box-shadow:0 0 0 1px var(--accent)}
.sp-form input[type=file]{color:var(--muted);font-size:14px;max-width:100%}
.sp-form input[type=file]::file-selector-button{background:rgba(var(--text-rgb),.08);color:var(--text);border:1px solid var(--line-2);padding:8px 14px;margin-inline-end:12px;font:inherit;cursor:pointer}
.sp-check label{display:flex;gap:10px;align-items:flex-start;font-weight:400;color:var(--muted);font-size:15px;cursor:pointer}
.sp-check input{width:18px;height:18px;margin-top:3px;accent-color:var(--accent);flex:none}
.sp-check a,.sp-hint a,.sp-delete a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.sp-err{color:#FF8FA3;font-size:14px;margin:0}
.sp-hint{color:var(--dim);font-size:14px;margin:0}
.sp-msg{margin:0;font-size:15px;min-height:1px}.sp-msg.bad{color:#FF8FA3}.sp-msg.good{color:#7BE3B4}
.sp-resend{display:inline}.sp-resend-btn{margin-inline-start:8px;padding:6px 12px;font-size:14px;vertical-align:middle}.sp-resend-result,.sp-resend-hint{color:var(--muted)}
.sp-banner{padding:12px 16px;border:1px solid rgba(var(--accent-rgb),.6);background:rgba(var(--accent-rgb),.10);margin-bottom:18px}
.sp-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.sp-actions .btn{margin-top:0}
.sp-link{background:none;border:0;padding:0;color:var(--muted);font:inherit;font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sp-link:hover{color:var(--text)}
.sp-who{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;color:var(--muted);font-size:14px;margin:0;padding-bottom:14px;border-bottom:1px solid var(--line)}
.sp-who b{color:var(--text)}.sp-who .sp-link{margin-inline-start:auto}
.sp-code{font-family:var(--font-display);letter-spacing:.12em;color:var(--teal)}
.sp-gate p,.sp-done p{color:var(--muted);margin-top:10px}.sp-gate .sp-actions,.sp-done .sp-actions{margin-top:20px}
.sp-loading{color:var(--dim)}
.sp-tabs{display:flex;gap:4px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);margin-bottom:22px}
.sp-tabs a{white-space:nowrap;flex:none;padding:12px 18px;color:var(--muted);font-family:var(--font-display);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:15px;border-bottom:2px solid transparent;margin-bottom:-1px}
.sp-tabs a:hover{color:var(--text)}.sp-tabs a[aria-current]{color:var(--text);border-bottom-color:var(--accent)}
.sp-filters{display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:760px){.sp-filters{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}}
.sp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sp-count{color:var(--dim);font-size:14px;margin:16px 0 8px}
.sp-table-wrap{border:1px solid var(--line);background:rgba(var(--panel-rgb),.6)}
.sp-table{width:100%;border-collapse:collapse;font-size:15px}
.sp-table th{text-align:start;color:var(--dim);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:12px 14px;border-bottom:1px solid var(--line)}
.sp-table td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.sp-table tr:last-child td{border-bottom:0}.sp-table tbody tr:hover{background:rgba(var(--text-rgb),.03)}
.sp-table td a:hover{color:#fff;text-decoration:underline}
@media (max-width:759px){.sp-table thead{display:none}.sp-table tr{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;padding:12px 14px;border-bottom:1px solid var(--line)}
  .sp-table td{padding:0;border:0}.sp-table td:nth-child(2){grid-column:1/-1;order:-1;font-weight:600}
  .sp-table td:nth-child(n+4)::before{content:attr(data-h) ": ";color:var(--dim);font-size:13px}}
.sp-empty{color:var(--muted);padding:18px 0}
.sp-ref{font-family:var(--font-display);font-weight:600;letter-spacing:.06em;color:var(--teal);white-space:nowrap;direction:ltr;unicode-bidi:isolate}
.sp-dim{color:var(--dim);font-size:13px}
.sp-badge{display:inline-block;padding:2px 10px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line-2);color:var(--muted);white-space:nowrap;margin-inline-end:6px}
html[lang=ja] .sp-badge,html[lang=zh] .sp-badge,html[lang=ko] .sp-badge,html[lang=ar] .sp-badge,html[lang=hi] .sp-badge{letter-spacing:0}
.sp-badge.s-new{border-color:rgba(var(--crystal-rgb),.6);color:#9BE9F6}
.sp-badge.s-confirmed,.sp-badge.s-open{border-color:rgba(var(--ore-rgb),.6);color:#FDBA74}
.sp-badge.s-in_progress{border-color:rgba(var(--grey-rgb),.6);color:#F8DC6B}
.sp-badge.s-fixed,.sp-badge.s-answered,.sp-badge.s-public{border-color:rgba(var(--teal-rgb),.6);color:#7BE3B4}
.sp-badge.s-wont_fix,.sp-badge.s-duplicate,.sp-badge.s-closed,.sp-badge.s-hidden{color:var(--dim)}
.sp-badge.s-pending{border-color:rgba(var(--accent-rgb),.5);color:#FDA4AF}
.sp-back{color:var(--muted)}.sp-back:hover{color:var(--text)}
.sp-bug{margin-top:12px}.sp-bug-head{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.sp-bug h2{font-size:clamp(24px,3vw,34px);margin-top:10px}.sp-bug h3{font-size:18px;margin-top:26px;color:#C9D0DD}
.sp-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:20px 0 0;padding:16px 0;border-block:1px solid var(--line)}
.sp-facts dt{color:var(--dim);font-size:12px;letter-spacing:.12em;text-transform:uppercase}.sp-facts dd{margin:2px 0 0}
.sp-text{white-space:pre-wrap;overflow-wrap:anywhere;color:#BAC2D0;margin-top:8px}
.sp-note{margin-top:22px;padding:14px 18px;border-inline-start:3px solid var(--teal);background:rgba(var(--teal-rgb),.07)}
.sp-note h3{margin-top:0!important;font-size:15px;color:#7BE3B4!important}
.sp-changelog{display:grid;gap:18px}
.sp-version{border:1px solid var(--line);background:rgba(var(--panel-rgb),.6);padding:20px 22px}
.sp-version header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:10px}
.sp-version h2{font-size:24px}
.sp-version ul{list-style:none;margin:8px 0 0;padding:0}
.sp-version li{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:baseline;padding:10px 0;border-bottom:1px dashed var(--line)}
.sp-version li:last-child{border-bottom:0}.sp-version li a:hover{text-decoration:underline}
.sp-two{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:900px){.sp-two{grid-template-columns:1fr 1fr}#forgot-card{grid-column:1}}
.sp-auth p{color:var(--muted);margin-top:8px}
.sp-providers{display:grid;gap:10px;margin-top:22px}.sp-providers .btn{margin-top:0;justify-content:center}
.sp-or{display:flex;align-items:center;gap:12px;color:var(--dim);font-size:13px;text-transform:uppercase;letter-spacing:.14em;margin:0!important}
.sp-or::before,.sp-or::after{content:"";flex:1;height:1px;background:var(--line)}
.sp-me{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;margin-bottom:22px}
.sp-me p{margin:0}.sp-who-big{font-size:20px;color:var(--muted)}.sp-who-big b{color:var(--text)}
.sp-mine{display:grid;gap:10px}
.sp-item{border:1px solid var(--line);background:rgba(var(--panel-rgb),.7)}
.sp-item summary{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:14px 18px;cursor:pointer;list-style:none}
.sp-item summary::-webkit-details-marker{display:none}
.sp-item summary::before{content:"+";font-family:var(--font-display);color:var(--accent);width:12px}
.sp-item[open] summary::before{content:"–"}
.sp-sum-title{flex:1 1 220px;font-weight:600;min-width:0;overflow-wrap:anywhere}
.sp-item-body{padding:0 18px 18px;border-top:1px solid var(--line)}
.sp-item-body>.sp-dim{margin-top:12px}
.sp-thread{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.sp-thread li{padding:10px 14px;border:1px solid var(--line);background:var(--bg-2)}
.sp-thread li.team{border-color:rgba(var(--teal-rgb),.45);background:rgba(var(--teal-rgb),.06)}
.sp-thread .sp-text{margin-top:4px}
.sp-comment{margin-top:16px}
.sp-delete{margin-top:28px}
.foot-h-langs{margin-top:22px}
[hidden]{display:none!important}
.sp-text,.sp-sum-title,.sp-table td:nth-child(2),.sp-bug h2,.sp-version li a:not(.sp-ref){unicode-bidi:plaintext}

/* ---------- v04 refresh (2026-10-13): hero still, campaign mission lists, support cards ---------- */
.hero .trailer.still{display:block;padding:0;overflow:hidden;background:#000}
.hero .trailer.still picture{position:static;inset:auto;z-index:auto;display:block}
.hero-shot{display:block;position:relative;width:100%;height:100%;color:inherit;text-decoration:none}
.hero-shot img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.hero-shot:hover img{transform:scale(1.03)}
.hero-shot span{position:absolute;inset-inline:0;bottom:0;padding:28px 14px 10px;font-size:13px;color:var(--muted);
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.82))}
.missions{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:4px}
.missions li{display:flex;gap:10px;align-items:baseline;font-size:14px;color:var(--text,#e8ebf1);padding:5px 0;border-top:1px solid var(--line)}
.missions .n{font-family:var(--font-display);font-weight:600;color:var(--c);min-width:2ch;letter-spacing:.06em}
.req-cta{margin-top:20px}
.scards{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:640px){.scards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.scards{grid-template-columns:repeat(4,1fr)}}
.scard{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;transition:border-color var(--t),background var(--t)}
.scard:hover{border-color:var(--accent)}
.scard .ic{width:42px;height:42px;display:grid;place-items:center;color:var(--accent);border:1px solid var(--line-2)}
.scard .ic svg{width:22px;height:22px}
.scard p{color:var(--muted);font-size:15px;flex:1}
.scard .more{font-family:var(--font-display);font-weight:600;letter-spacing:.06em;color:var(--accent);font-size:14px}
#community .socials{margin-top:22px}
@media (min-width:900px){.gallery .shot.w2{grid-column:span 2}.gallery .shot.w4{grid-column:1/-1}}
@media (min-width:900px){.gallery .shot.w2 img,.gallery .shot.w4 img{aspect-ratio:16/9;object-fit:cover}}

/* ---------- units & buildings sketch gallery (/<lang>/units.html) ---------- */
.sk-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:28px}
.sk-cta span{color:var(--muted);font-size:15px;max-width:60ch}
.sk-page{padding-top:40px}
.sk-note{color:var(--dim);font-size:14px}
.sk-jumps{position:sticky;top:64px;z-index:20;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:10px 0;margin-bottom:8px;
  background:rgba(var(--bg-rgb),.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.sk-jumps::-webkit-scrollbar{display:none}
@media (max-width:899px){.sk-jumps{top:0;position:relative}}
.sk-jump{--c:var(--white);flex:none;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:var(--panel);
  border:1px solid var(--line);border-bottom:2px solid var(--c);font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:.06em}
.sk-jump img{width:24px;height:24px}
.sk-jump b{font-weight:600;color:var(--dim);font-size:13px}
.sk-jump:hover{background:var(--raise)}
.sk-faction{--c:var(--white);--c-rgb:var(--white-rgb);margin-top:34px;scroll-margin-top:130px}
.sk-faction.black,.sk-jump.black{--c:var(--black);--c-rgb:var(--black-rgb)}
.sk-faction.grey,.sk-jump.grey{--c:var(--grey);--c-rgb:var(--grey-rgb)}
.sk-faction.tech,.sk-jump.tech{--c:var(--teal);--c-rgb:var(--teal-rgb)}
.sk-fhead{display:flex;align-items:center;gap:14px;padding:18px 0 14px;border-top:3px solid var(--c)}
.sk-fhead img{width:44px;height:44px;filter:drop-shadow(0 6px 18px rgba(var(--c-rgb),.35))}
.sk-fhead h2{font-size:clamp(26px,3.4vw,36px);letter-spacing:.1em;text-transform:uppercase;color:var(--c)}
html[lang="ar"] .sk-fhead h2,html[lang="ja"] .sk-fhead h2,html[lang="zh"] .sk-fhead h2,html[lang="ko"] .sk-fhead h2,html[lang="hi"] .sk-fhead h2{letter-spacing:.02em}
.sk-fhead p{color:var(--muted);font-size:14px;margin-top:2px}
.sk-group{margin-top:18px}
.sk-cat{display:flex;align-items:baseline;gap:10px;font-size:18px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.sk-cat small{font-size:13px;color:var(--dim);letter-spacing:0}
.sk-grid{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:600px){.sk-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.sk-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:1150px){.sk-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.sk{display:flex;flex-direction:column;background:radial-gradient(110% 60% at 50% 0%,rgba(var(--c-rgb),.12),transparent 70%),var(--panel);
  border:1px solid var(--line);color:inherit;min-width:0;transition:border-color var(--t),transform var(--t)}
.sk.white{--c-rgb:var(--white-rgb)}.sk.black{--c-rgb:var(--black-rgb)}.sk.grey{--c-rgb:var(--grey-rgb)}.sk.tech{--c-rgb:var(--teal-rgb)}
a.sk{cursor:zoom-in}
a.sk:hover,a.sk:focus-visible{border-color:rgba(var(--c-rgb),.7);transform:translateY(-2px)}
.sk-img{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;padding:10px;overflow:hidden}
.sk-img picture{display:contents}
.sk-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.sk.sheet .sk-img{padding:0}
.sk.sheet .sk-img img{width:100%;height:100%;object-fit:cover;filter:none}
.sk-name{display:block;padding:10px 12px 0;font-family:var(--font-display);font-weight:600;font-size:16px;line-height:1.2;overflow-wrap:anywhere}
.sk-role{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:4px 12px 12px;padding:0;color:var(--muted);font-size:13px;line-height:1.4}
.lightbox img{max-width:100%;height:auto}
/* Formations (newly drawn schematic diagrams; dots = units, arrow = direction of movement) */
.formations{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:700px){.formations{grid-template-columns:repeat(4,minmax(0,1fr))}}
.formation{background:var(--panel);border:1px solid var(--line);padding:14px 14px 16px;min-width:0}
.formation .fsvg svg{display:block;width:100%;height:auto;max-height:110px}
.formation .fd{fill:var(--teal)}
.formation .fa,.formation .ft{fill:none;stroke:var(--muted);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.formation .ft{stroke:var(--line-2)}
.formation .fk{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:5 4}
.formation h3{font-size:16px;line-height:1.25;margin-top:10px;overflow-wrap:anywhere}
.formation kbd{display:inline-block;font:600 12px/1 var(--font-display, inherit);color:var(--muted);border:1px solid var(--line-2);padding:3px 6px;margin-inline-start:4px;white-space:nowrap}
.formation p{color:var(--muted);font-size:13px;line-height:1.45;margin-top:6px}
.fsel{margin-top:18px}
.fsel b{color:var(--text);margin-inline-end:6px}
/* ---------- players (public profiles, leaderboard, compare) ---------- */
.pl-page .sp-tabs{margin-bottom:18px}
.pl-card{background:var(--panel);border:1px solid var(--line);padding:20px;margin-top:14px}
.pl-card h2{font-size:19px;letter-spacing:.06em;margin-bottom:12px}
.pl-boardhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.pl-boardhead h2{margin:0}
.pl-boardhead select,.pl-search input{background:var(--bg);color:var(--text);border:1px solid var(--line-2);padding:9px 12px;font:inherit;min-width:0}
.pl-search{display:flex;gap:8px}
.pl-search input{flex:1}
.pl-results{margin-top:10px}
.pl-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);background:var(--bg);margin-top:-1px;color:var(--text);text-decoration:none;min-width:0}
.pl-row:hover{background:var(--raise)}
.pl-who{display:flex;flex-direction:column;min-width:0;flex:1}
.pl-name{font-weight:600;overflow-wrap:anywhere}
.pl-clan{color:var(--teal);margin-inline-end:6px;font-weight:600}
.pl-tier,.pl-dim,.pl-hint{color:var(--muted);font-size:13px}
.pl-nums{display:flex;gap:14px;color:var(--muted);font-size:13px;flex-wrap:wrap;justify-content:flex-end}
.pl-pos{min-width:44px;color:var(--dim)}
.pl-board{list-style:none;padding:0;margin:0}
.pl-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px;color:var(--muted);font-size:14px}
.pl-state{padding:26px 16px;text-align:center;color:var(--muted);border:1px dashed var(--line-2)}
.pl-state .btn{margin-top:12px}
.pl-state.private{color:var(--text)}
.pl-state.error{border-color:rgba(var(--accent-rgb),.5)}
.pl-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pl-head{display:flex;align-items:center;gap:18px;min-width:0}
.pl-h1{font-size:clamp(26px,4vw,40px);overflow-wrap:anywhere}
.pl-sub{color:var(--muted);margin-top:4px}
.pl-stats{display:grid;gap:0;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-inline-start:1px solid var(--line)}
@media (min-width:700px){.pl-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pl-stats div{padding:10px 12px;border-bottom:1px solid var(--line);border-inline-end:1px solid var(--line)}
.pl-stats dt{color:var(--muted);font-size:12px}
.pl-stats dd{font-size:18px;font-weight:600;margin:2px 0 0}
.pl-awards{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.pl-award{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:12px 8px;background:var(--bg);border:1px solid var(--line)}
.pl-award b{font-size:14px;overflow-wrap:anywhere}
.pl-award span{color:var(--muted);font-size:12px}
.pl-award .rarity-pill{margin-top:2px;font-size:10px;padding:1px 6px}
/* S-297 medal rarity summary + filter / sort (colours: generated rarity tokens at the end of this file) */
.pl-raritybar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.pl-raritybar h2{margin:0}
.pl-raritysum{margin:0;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font-size:14px;color:var(--muted)}
.pl-raritysum>span{color:var(--rg);white-space:nowrap}
.pl-rarityctl{display:flex;flex-wrap:wrap;gap:8px 14px;margin-inline-start:auto}
.pl-sel{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.pl-sel select{background:var(--bg);color:var(--text);border:1px solid var(--line);padding:4px 8px;font:inherit}
.pl-recent{list-style:none;padding:0;margin:0}
.pl-m{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;padding:10px 0;border-top:1px solid var(--line)}
.pl-m:first-child{border-top:0}
.pl-out{min-width:84px}
.pl-m.win .pl-out{color:var(--teal)}
.pl-m.loss .pl-out,.pl-m.abandon .pl-out{color:var(--accent)}
.pl-delta.up{color:var(--teal)}
.pl-delta.down{color:var(--accent)}
.pl-pickers{display:grid;gap:14px}
@media (min-width:800px){.pl-pickers{grid-template-columns:1fr 1fr}}
.pl-pick{background:var(--panel);border:1px solid var(--line);padding:16px}
.pl-pick h2{font-size:17px;margin-bottom:10px}
#pl-compare{margin-top:14px}
.pl-tablewrap{overflow-x:auto}
.pl-cmp{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line)}
.pl-cmp th,.pl-cmp td{padding:10px 12px;border-top:1px solid var(--line);text-align:center}
.pl-cmp thead th a{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--text);text-decoration:none}
.pl-cmp .pl-mid{color:var(--muted);font-weight:500;font-size:13px;width:34%}
.pl-cmp td{font-size:17px;font-weight:600}
.pl-cmp td.pl-win{color:var(--teal)}
.pl-cname{font-weight:600;overflow-wrap:anywhere}

/* ---- 2026-10-18: download, store, elite trees, progression, season, sign-up ---- */
.dl-home{background:radial-gradient(900px 420px at 85% 0%,rgba(var(--accent-rgb),.10),transparent 60%)}
.dl-plat h3{font-size:clamp(26px,3vw,34px);letter-spacing:.08em;margin-top:4px}
.dl-plat .checks{margin-top:18px}
.top .btn.sm svg{width:16px;height:16px}
.c-elite{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:4px;font-size:13px;color:var(--muted)}
.c-elite b{display:inline-block;min-width:26px;color:#FFD166;font-family:var(--font-display);font-size:13px;letter-spacing:.06em}
.c-elite-link{display:inline-block;margin-top:8px;font-size:13px;color:var(--text);border-bottom:1px solid rgba(255,209,102,.5)}
.c-elite-link::before{content:"★ ";color:#FFD166}
.st-page{padding-top:40px}
.st-sec{margin-top:clamp(40px,6vw,72px);scroll-margin-top:130px}
.st-h{font-size:clamp(26px,3.2vw,36px);letter-spacing:.06em}
.st-packs{display:grid;gap:14px;grid-template-columns:1fr;margin-top:24px}
@media (min-width:760px){.st-packs{grid-template-columns:repeat(3,1fr)}}
.st-pack{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:30px 22px 26px;
  background:radial-gradient(120% 70% at 50% 0%,rgba(255,209,102,.13),transparent 60%),var(--panel);border:1px solid var(--line);clip-path:var(--cut)}
.st-pack.best{border-color:rgba(255,209,102,.55)}
.st-coins{width:58px;height:58px;display:grid;place-items:center;color:#FFD166;border:1px solid rgba(255,209,102,.4);border-radius:50%;
  box-shadow:0 0 28px rgba(255,209,102,.18)}
.st-coins svg{width:28px;height:28px}
.st-gold{margin-top:8px;font-family:var(--font-display);font-size:18px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.st-gold b{display:block;font-size:46px;line-height:1;color:var(--text);letter-spacing:.02em}
.st-price{font-family:var(--font-display);font-size:28px;font-weight:700;color:#FFD166}
.st-btn{margin-top:10px;width:100%;opacity:.72;cursor:default;background:rgba(var(--text-rgb),.08);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--text)}
.st-btn:hover{filter:none;transform:none}
.st-how{margin-top:22px}
.st-steps{margin:14px 0 0;padding-inline-start:22px;display:grid;gap:8px;color:#C9D0DD}
.st-nocheck{display:flex;gap:10px;align-items:center;margin-top:16px;color:var(--teal);font-size:15px}
.st-nocheck svg{width:20px;height:20px;flex:none}
.st-uses{margin-top:24px}
.st-use .more,.st-season .more{display:inline-block;margin-top:12px;font-size:14px;color:var(--text);border-bottom:1px solid var(--accent)}
.st-mp .ic{color:var(--teal)}
.st-elite td{font-family:var(--font-display);font-size:18px;font-weight:700;color:#FFD166}
.st-elite tbody th{width:auto;min-width:200px}
.st-season{display:block;color:inherit;border-color:rgba(var(--accent-rgb),.45);
  background:radial-gradient(100% 140% at 100% 0%,rgba(var(--accent-rgb),.18),transparent 55%),var(--panel)}
.st-season h3{margin-top:12px;font-size:30px}
.st-coupon{display:flex;gap:20px;align-items:flex-start}
.st-coupon .ic{flex:none;width:52px;height:52px;display:grid;place-items:center;color:var(--accent);border:1px solid var(--line-2)}
.st-coupon .ic svg{width:26px;height:26px}
.st-coupon p{max-width:72ch}
.st-two{margin-top:24px}
.skin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:600px){.skin-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* elite trees */
.el-country{--c:var(--white);margin-top:26px;padding:18px;background:var(--bg-2);border:1px solid var(--line);scroll-margin-top:130px}
.el-country.black{--c:var(--black)}.el-country.grey{--c:var(--grey)}
.el-country>header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;border-inline-start:3px solid var(--c);padding-inline-start:12px}
.el-country>header h3{font-size:26px;letter-spacing:.1em}
.el-country>header span{color:#FFD166;font-family:var(--font-display);font-weight:600}
.el-tree{display:grid;gap:14px;grid-template-columns:1fr;margin-top:14px}
@media (min-width:900px){.el-tree{grid-template-columns:2fr 2fr 1fr}}
.el-tierh{font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.el-tierh small{letter-spacing:0;text-transform:none;color:var(--dim);font-size:13px}
.el-cards{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.el-tiercol:last-child .el-cards{grid-template-columns:1fr}
@media (max-width:899px){.el-tiercol:last-child .el-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.el-card{--c-rgb:var(--white-rgb);display:flex;flex-direction:column;background:radial-gradient(110% 60% at 50% 0%,rgba(var(--c-rgb),.14),transparent 70%),var(--panel);border:1px solid var(--line);min-width:0}
.el-card.black{--c-rgb:var(--black-rgb)}.el-card.grey{--c-rgb:var(--grey-rgb)}
.el-card.sig{border-color:rgba(255,209,102,.6);box-shadow:0 0 0 1px rgba(255,209,102,.2) inset}
.el-art{position:relative;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:10px;overflow:hidden}
.el-art picture{display:contents}
.el-art img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:grayscale(.35) drop-shadow(0 10px 18px rgba(0,0,0,.45));opacity:.85}
.el-tag{position:absolute;top:8px;inset-inline-start:8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;background:rgba(0,0,0,.6);color:var(--muted);border:1px solid var(--line-2)}
.el-soon{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--dim);font-size:13px;width:100%;height:100%;justify-content:center;border:1px dashed var(--line-2)}
.el-soon svg{width:30px;height:30px;color:#FFD166}
.el-body{padding:10px 12px 12px;display:grid;gap:3px}
.el-tier{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-family:var(--font-display);font-weight:600}
.el-card h4{font-size:17px;line-height:1.2;overflow-wrap:anywhere}
.el-star{color:#FFD166}
.el-cat,.el-rent{font-size:12.5px;color:var(--muted)}
.el-price{font-family:var(--font-display);font-weight:700;color:#FFD166;font-size:16px}
/* progression */
.pr-ladder{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:8px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (min-width:640px){.pr-ladder{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:1000px){.pr-ladder{grid-template-columns:repeat(6,minmax(0,1fr))}}
.pr-tier{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;background:var(--panel);border:1px solid var(--line);border-top:2px solid var(--g);text-align:center;font-size:13px;font-family:var(--font-display);font-weight:600;letter-spacing:.04em}
.pr-tier img{width:56px;height:56px}
.pr-cats{display:grid;gap:12px;grid-template-columns:1fr;margin-top:24px}
@media (min-width:700px){.pr-cats{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.pr-cats{grid-template-columns:repeat(4,1fr)}}
.pr-cat{padding:18px;background:var(--panel);border:1px solid var(--line)}
.pr-art{display:flex;gap:6px;min-height:44px}
.pr-art img{width:44px;height:44px}
.pr-cat h4{margin-top:12px;font-size:19px}
.pr-cat h4 small{color:var(--dim);font-size:13px}
.pr-cat p{color:var(--muted);font-size:14px;margin-top:4px}
.pr-side{display:grid;gap:18px}
.pr-skirmish img{width:64px;height:64px;float:inline-end}
/* season */
.se-hero{margin-top:18px;display:grid;gap:8px;justify-items:start}
.se-status{font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#FFD166}
.se-strip{margin-top:28px;display:grid;gap:6px;overflow:hidden}
.se-row{display:grid;grid-template-columns:repeat(50,minmax(6px,1fr));gap:3px}
.se-row i{display:block;height:16px;background:var(--line-2)}
.se-row.free i{background:rgba(var(--teal-rgb),.35)}
.se-row.prem i{background:rgba(255,209,102,.4)}
.se-row i.m{background:var(--text);opacity:.6}
.se-track .label svg{width:14px;height:14px}
.se-track.prem{border-top:3px solid #FFD166}
.se-track.free{border-top:3px solid var(--teal)}
.se-track h3{margin-top:10px}
.se-rewards{margin-top:18px}
.se-chips{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.se-chips li{padding:8px 14px;background:var(--raise);border:1px solid var(--line-2);font-family:var(--font-display);font-weight:600;letter-spacing:.04em}
/* sign-up band (account page, signed out) */
.su-band{position:relative;overflow:hidden;margin-bottom:26px;border:1px solid var(--line-2);clip-path:var(--cut);background:var(--bg-2)}
.su-bg{position:absolute;inset:0;opacity:.32}
.su-bg img{width:100%;height:100%;object-fit:cover}
.su-band::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(var(--bg-rgb),.96) 20%,rgba(var(--bg-rgb),.55) 70%,rgba(var(--bg-rgb),.85))}
.su-in{position:relative;z-index:2;display:grid;gap:28px;padding:clamp(24px,4vw,48px);grid-template-columns:1fr}
@media (min-width:960px){.su-in{grid-template-columns:1.1fr .9fr;align-items:center}}
.su-copy h2{font-size:clamp(30px,4.4vw,52px);margin-top:10px;line-height:1.05}
.su-copy .lead{color:#C9D0DD;margin-top:12px;font-size:17px;max-width:52ch}
.su-copy .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.su-steps{list-style:none;padding:0;margin:0;display:grid;gap:12px;counter-reset:none}
.su-steps li{display:flex;gap:16px;align-items:flex-start;padding:16px 18px;background:rgba(var(--panel-rgb),.86);border:1px solid var(--line);
  animation:su-in .7s cubic-bezier(.16,1,.3,1) both}
.su-steps li:nth-child(2){animation-delay:.12s}.su-steps li:nth-child(3){animation-delay:.24s}
.su-n{font-family:var(--font-display);font-weight:700;font-size:28px;color:var(--accent);line-height:1}
.su-steps h3{font-size:19px}
.su-steps p{color:var(--muted);font-size:14px;margin-top:4px}
@keyframes su-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.sk.elite .sk-img{border-bottom:1px dashed var(--line-2)}
.sk-soon{font-size:40px;color:#FFD166;opacity:.55}
.skin-groups{display:grid;gap:4px 22px;grid-template-columns:1fr}
@media (min-width:1000px){.skin-groups{grid-template-columns:1fr 1fr}}
.skin-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.country .c-elite b{display:inline-block;min-width:26px;margin-inline-end:6px;font-size:13px;color:#FFD166;letter-spacing:.06em}
.country .c-elite li{color:var(--muted)}
.sk-multi{position:relative}
.sk-open{display:flex;flex-direction:column;color:inherit;cursor:zoom-in;flex:1}
.sk-alt{position:absolute;top:8px;inset-inline-end:8px;font-size:12px;font-weight:700;letter-spacing:.08em;padding:3px 8px;background:rgba(0,0,0,.65);border:1px solid var(--line-2);color:var(--text)}
.sk-alt:hover{border-color:var(--accent)}

/* Owner 2026-10-19: compact top bar - game menu (+ More drop-down) left, in-game sections right. */
.top .nav{gap:16px;overflow:visible;flex:0 1 auto;mask-image:none}
html[dir="rtl"] .top .nav{mask-image:none}
.top .nav-game{flex:none}
.top .nav-game{margin-inline-start:auto;padding-inline-start:16px;border-inline-start:1px solid var(--line, rgba(255,255,255,.12))}
.top .nav-game a{color:var(--text);font-weight:600}
.more{position:relative}
.more>summary{list-style:none;cursor:pointer;padding:6px 0;color:var(--muted)}
.more>summary::-webkit-details-marker{display:none}
.more>summary::after{content:" \25BE";font-size:11px}
.more[open]>summary,.more>summary:hover{color:var(--text)}
.more-list{position:absolute;top:calc(100% + 8px);inset-inline-start:-12px;min-width:220px;display:flex;flex-direction:column;gap:2px;
  padding:8px;background:var(--panel, #11161d);border:1px solid var(--line, rgba(255,255,255,.12));border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.45);z-index:60}
.more-list a{padding:8px 10px;border-radius:6px}
.more-list a:hover{background:rgba(255,255,255,.06)}
.more-list a::after{display:none}
@media (max-width:1180px){.top .nav-game{border:0;padding:0}}
@media (max-width:899px){.top .nav{overflow-x:auto;flex:1 0 100%}.top .nav-game{margin-inline-start:0}.more-list{position:fixed;top:auto}}
/* player-profile data (2026-10-20): ONE form, required fields with a red asterisk, profile details card */
.sp-req{color:#e5484d;font-weight:700;margin-inline-start:3px}
.sp-legend{font-size:12px;color:var(--muted);margin:0}
.sp-field{align-content:start}
.sp-details{margin-top:18px}
.sp-details .sp-row{margin:0}
.sp-details .sp-form{margin-top:14px}
.sp-details.sp-needed{border-color:var(--accent)}
/* Owner 2026-10-27 "one account": Link account (Google, Xbox, PlayStation, Steam) */
.sp-link-acc{margin-top:18px}
.sp-link-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.sp-link-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line, rgba(255,255,255,.12));border-radius:6px}
.sp-link-row b{min-width:110px}
.sp-link-row .sp-hint{flex:1;margin:0}
.sp-game-switch{margin-top:16px;text-align:center}
.sp-marketing span{font-size:14px}
.sp-switch{margin-top:14px;color:var(--muted)}
.sp-switch .sp-link{font-weight:600}
/* ---------- clans (2026-10-21: public list, clan page ?tag=, founding a clan; static/clans.js) ---------- */
.cl-search{display:flex;gap:8px;flex-wrap:wrap}
.cl-search input,.cl-search select{background:var(--bg);color:var(--text);border:1px solid var(--line-2);padding:9px 12px;font:inherit;min-width:0}
.cl-search input{flex:1 1 180px}
.cl-search select{flex:0 1 auto;max-width:100%}
.cl-list{margin-top:14px}
.cl-rows{list-style:none;padding:0;margin:0}
.cl-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);background:var(--bg);margin-top:-1px;color:var(--text);text-decoration:none;min-width:0;flex-wrap:wrap}
.cl-row:hover,.cl-row:focus-visible{background:var(--raise)}
.cl-who{display:flex;flex-direction:column;min-width:0;flex:1 1 140px;gap:2px}
.cl-ident{font-weight:600;overflow-wrap:anywhere;min-width:0}
.cl-prefix{color:var(--teal);font-family:var(--font-display);letter-spacing:.04em;unicode-bidi:isolate;direction:ltr}
.cl-nums{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:flex-end;color:var(--muted);font-size:13px;margin-inline-start:auto}
.cl-num{display:flex;flex-direction:column;align-items:flex-end;min-width:0}
.cl-num b{color:var(--text);font-size:16px}
.cl-num small{font-size:11px;color:var(--dim)}
.cl-rec{white-space:nowrap}
.cl-note{margin-top:10px}
.cl-look-badge{display:inline-flex;align-items:center;gap:4px;flex:none}
.cl-crest{position:relative;display:inline-block;flex:none}
.cl-crest .cl-shield,.cl-crest .cl-shield img,.cl-crest svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block;max-width:none}
.cl-crest .cl-symbol{position:absolute;display:block;line-height:0}
.cl-crest img{display:block}
.cl-banner{display:inline-block;line-height:0;flex:none}
.cl-banner img{display:block}
.cl-back{color:var(--muted);text-decoration:none;font-size:14px}
.cl-back:hover{color:var(--text)}
.cl-head{display:grid;gap:16px;grid-template-columns:auto minmax(0,1fr);align-items:center}
.cl-head .pl-stats{grid-column:1/-1}
.cl-head-text{min-width:0}
.cl-head .pl-h1{font-size:clamp(24px,4vw,38px);margin:0}
.cl-desc{white-space:pre-line;overflow-wrap:anywhere}
.cl-members{list-style:none;padding:0;margin:0}
.cl-member{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line);min-width:0}
.cl-member:first-child{border-top:0}
.cl-mname{font-weight:600;color:var(--text);overflow-wrap:anywhere}
a.cl-mname{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.cl-rank{flex:none}
.cl-create h2{margin-bottom:6px}
.cl-gate{margin-top:14px;padding:16px;border:1px dashed var(--line-2)}
.cl-gate h3{font-size:18px;margin-bottom:6px}
.cl-gate p{color:var(--muted);margin:0}
.cl-gate .sp-actions{margin-top:14px}
.cl-gate.created{border-style:solid;border-color:rgba(123,227,180,.5)}
.cl-gate.created p{color:var(--text)}
.cl-form{margin-top:16px}
.cl-look{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:800px){.cl-look{grid-template-columns:minmax(0,1fr) 260px;align-items:start}}
.cl-pickers{display:grid;gap:12px;min-width:0}
.cl-pick{border:1px solid var(--line);padding:10px 12px 12px;margin:0;min-width:0}
.cl-pick legend{padding:0 6px;color:var(--muted);font-size:14px}
.cl-tiles{display:flex;flex-wrap:wrap;gap:6px}
.cl-tile{position:relative;display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border:1px solid var(--line-2);background:var(--bg);cursor:pointer}
.cl-tile input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.cl-tile:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.cl-tile:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.cl-none{color:var(--dim);font-size:20px}
.cl-preview{border:1px solid var(--line);background:var(--bg);padding:14px;display:grid;gap:10px;min-width:0}
.cl-preview-label{color:var(--dim);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.cl-preview-in{display:flex;align-items:center;gap:12px;min-width:0;flex-wrap:wrap}
.cl-cost p{margin:0}
.cl-cost [data-cl-cost]{font-weight:600}
.cl-inline{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.cl-dialog{background:var(--panel);color:var(--text);border:1px solid var(--line-2);max-width:min(440px,calc(100vw - 32px));padding:22px;box-shadow:var(--sh-3)}
.cl-dialog::backdrop{background:rgba(0,0,0,.65)}
.cl-dialog h2{font-size:22px;margin-bottom:12px;overflow-wrap:anywhere}
.cl-dialog p{color:var(--muted);margin:12px 0 18px}
.cl-confirm-crest{display:flex;justify-content:center}
@media (max-width:599px){.cl-nums{width:100%;justify-content:flex-start}.cl-num{align-items:flex-start}.cl-head{grid-template-columns:1fr}}
.cl-row .cl-look-badge{min-width:100px;justify-content:flex-end}
.cl-num b.pl-dim{font-size:13px;font-weight:500;color:var(--muted)}
@media (max-width:599px){.cl-row .cl-look-badge{min-width:0}}
/* 2026-10-21 (owner): the header account control and the store sign-in use the ARENIZ cut-corner shape, not rounded corners */
:root{--cut-sm:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
.acct-skel span,.acct-pill,.acct-chip{border-radius:0;clip-path:var(--cut-sm)}
.acct-pill{border:0;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.6)}
.acct-pill:hover,.acct-pill[aria-expanded="true"]{box-shadow:inset 0 0 0 1px var(--accent)}
.acct-chip{border:0;box-shadow:inset 0 0 0 1px var(--line-2)}
.acct-chip:hover,.acct-chip[aria-expanded="true"]{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7)}
.acct-pill svg,.acct-av{border-radius:0;clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px))}
.acct-pop,.acct-list{border-radius:0;border:0;clip-path:var(--cut);box-shadow:inset 0 0 0 1px var(--line-2)}
.acct-pop::before,.acct-list::before{inset-inline:0 14px;border-radius:0}
.acct-x{border-radius:0}
.acct-tabs,.acct-tabs button,.acct-field input,.acct-list a,.acct-list button{border-radius:0}
.acct-tabs button[aria-selected="true"]{clip-path:var(--cut-sm)}

.acct-submit{clip-path:var(--cut)}
@media (max-width:599px){.acct-pop{clip-path:none;border-radius:0;box-shadow:0 24px 48px rgba(0,0,0,.6),0 0 0 100vmax rgba(4,5,8,.6)}}
/* 2026-10-22: opaque panels (the page text showed through the phone sheet) */
.acct-pop,.acct-list{background:var(--panel) linear-gradient(180deg,var(--panel),var(--bg-2))}
/* store: slim sign-in strip (signed out) */
.shop-signin{display:flex;align-items:center;gap:18px;padding:18px 22px;border-color:var(--line-2);
  background:linear-gradient(90deg,rgba(var(--accent-rgb),.14),transparent 60%),var(--panel)}
.ss-ic{flex:none;display:grid;place-items:center;width:44px;height:44px;background:rgba(var(--accent-rgb),.18);color:var(--accent);clip-path:var(--cut-sm)}
.ss-ic svg{width:22px;height:22px}
.ss-text{flex:1;min-width:0}
.ss-t{margin:0;font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:.04em}
.ss-sub{margin:3px 0 0;font-size:14px;line-height:1.45;color:var(--muted)}
.ss-actions{display:flex;gap:10px;flex:none}
.ss-actions .btn{padding:11px 20px;font-size:14px}
@media (max-width:719px){.shop-signin{flex-wrap:wrap}.ss-actions{width:100%}.ss-actions .btn{flex:1}}
.shop-signin{margin-top:24px}.shop-signin[hidden]{display:none}
.shop-auth .sp-form input:not([type=checkbox]):not([type=file]),.shop-auth .sp-form select{border-radius:0}
.shop-auth .sp-game-switch .btn,.shop-auth .sp-providers .btn{border-radius:0;clip-path:var(--cut-sm)}
/* "Inside ARENIZ" showcase (gen_site.showcase_section): image-first rows, alternating sides on desktop */
.showcase{display:grid;gap:clamp(30px,4.5vw,64px)}
.sc-row{display:grid;gap:18px;align-items:center;grid-template-columns:minmax(0,1fr)}
@media (min-width:960px){.sc-row{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:48px}
  .sc-row:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.65fr)}.sc-row:nth-child(even) .sc-shot{order:2}}
.sc-shot{clip-path:var(--cut);border-color:var(--line-2);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.sc-text{border-inline-start:3px solid var(--accent);padding-inline-start:20px}
.sc-text h3{font-size:clamp(23px,2.4vw,32px);line-height:1.15}
.sc-text p{color:#C3CAD7;margin-top:10px;font-size:clamp(15px,1.25vw,17px);max-width:44ch}
.sc-minis{display:grid;gap:16px;margin-top:clamp(30px,4.5vw,64px);grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.sc-minis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sc-mini{display:flex;gap:18px;align-items:flex-start;padding:24px 24px 26px;background:var(--panel);border:1px solid var(--line-2);clip-path:var(--cut)}
.sc-mini .ic{flex:none;width:52px;height:52px;display:grid;place-items:center;color:var(--accent);border:1px solid rgba(var(--accent-rgb),.4);
  background:rgba(var(--accent-rgb),.1)}
.sc-mini .ic svg{width:26px;height:26px}
.sc-mini h3{font-size:21px}
.sc-mini p{color:var(--muted);margin-top:6px;font-size:15px}
/* Faction cards with their base capture on top; the emblem overlaps the picture */
.faction{padding:0}
.faction .fshot{border:0;border-bottom:1px solid var(--line-2)}
.faction .fshot img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;filter:none}
.faction .fbody{padding:0 26px 28px;display:flex;flex-direction:column;flex:1}
.faction .fbody>img{width:88px;height:88px;position:relative;z-index:1;margin-top:-44px}
.faction:not(:has(.fshot)) .fbody{padding-top:30px}
.faction:not(:has(.fshot)) .fbody>img{margin-top:0;width:108px;height:108px}
.faction .fname{margin-top:12px}
/* units.html: a wide base capture under each faction header */
.sk-banner{display:block;width:100%;margin:2px 0 26px;clip-path:var(--cut)}
.sk-banner img{aspect-ratio:21/9;object-fit:cover}
/* Wider gallery */
.wrap.wide{width:min(1560px,100% - 2*var(--pad))}

/* Owner 2026-10-25: What's new (same list as the game's Frontline Dispatch; live from /news) */
.news{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.news-item{padding:18px 20px;background:var(--panel);border:1px solid var(--line);border-inline-start:3px solid var(--accent)}
.news-item h3{font-size:19px}
.news-item p{color:var(--muted);margin-top:6px;font-size:15px;line-height:1.5}

/* Owner 2026-10-25: a dispatch item shows the picture of the fix / feature it announces. */
.news-item img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px;margin-bottom:12px;background:rgba(255,255,255,.04)}
/* Owner 2026-10-25 (Maps in the main menu): between tablet and wide desktop the section links take their own
   row under the brand / game links instead of running under them. */
@media (min-width:900px) and (max-width:1279px){
  .top .in{flex-wrap:wrap;height:auto;padding-top:10px;gap:6px 16px}
  .top .nav:not(.nav-game){order:3;flex:1 0 100%;padding-bottom:8px}
  .top .nav-game{margin-inline-start:auto}
}
/* Owner 2026-10-26: launch countdown in the hero (2026-10-27: reveal + beta, then full release). */
.countdown{margin-top:26px;max-width:560px;padding:16px 18px 18px;background:linear-gradient(180deg,rgba(var(--bg-rgb),.72),rgba(var(--bg-rgb),.5));
  border:1px solid var(--line);border-inline-start:3px solid var(--accent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cd-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;align-items:baseline;margin-bottom:12px}
.cd-label{font-family:var(--font-display);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.cd-when{font-size:14px;color:var(--muted)}
.cd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.cd-cell{display:flex;flex-direction:column;align-items:center;padding:10px 4px 8px;background:rgba(255,255,255,.035);border:1px solid var(--line);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.cd-num{font-family:var(--font-display);font-size:clamp(28px,4.2vw,44px);font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--text)}
.cd-unit{margin-top:6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.countdown.is-live .cd-grid{display:none}
.countdown.is-live .cd-when{color:var(--text);font-size:18px}
/* Owner 2026-10-27 launch plan: closed beta / Steam wishlist / Discord under the countdown; beta card on account.html. */
.cd-cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.cd-cta .btn{flex:0 1 auto}.cd-cta [hidden]{display:none}
.sp-beta{margin:22px 0}.sp-beta-dl .btn{min-width:200px}
.sp-beta .sp-beta-state{font-weight:600;margin:6px 0 10px}.sp-beta [data-status="approved"]{color:#a9dfbd}.sp-beta [data-status="pending"]{color:var(--gold2,#e8c56b)}
@media (max-width:420px){.cd-cta .btn{flex:1 1 100%;text-align:center}}
@media (max-width:420px){.cd-grid{gap:6px}.cd-cell{padding:8px 2px 6px}}

/* 2026-10-27 phones (owner screenshot, 390 px): the section links no longer run off the edge. Under 900 px they open
   as a drawer from the menu button at the end of the tools row (More expanded inside it); the game links keep their
   own row and show an edge fade only while they scroll (site.js sets data-fade). Without JS: a scrolling strip + fade. */
.nav-toggle{display:none}
.sp-tabs[data-fade="end"],.shop-tabs[data-fade="end"]{mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.sp-tabs[data-fade="start"],.shop-tabs[data-fade="start"]{mask-image:linear-gradient(270deg,#000 calc(100% - 40px),transparent)}
.sp-tabs[data-fade="both"],.shop-tabs[data-fade="both"]{mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
html[dir="rtl"] .sp-tabs[data-fade="end"],html[dir="rtl"] .shop-tabs[data-fade="end"]{mask-image:linear-gradient(270deg,#000 calc(100% - 40px),transparent)}
html[dir="rtl"] .sp-tabs[data-fade="start"],html[dir="rtl"] .shop-tabs[data-fade="start"]{mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
@media (max-width:599px){.sp-tabs a{padding:12px 12px;font-size:14px}}
@media (max-width:899px){
  .top .nav{scroll-padding-inline:16px}
  .top .nav[data-fade="end"]{mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
  .top .nav[data-fade="start"]{mask-image:linear-gradient(270deg,#000 calc(100% - 40px),transparent)}
  .top .nav[data-fade="both"]{mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
  html[dir="rtl"] .top .nav[data-fade="end"]{mask-image:linear-gradient(270deg,#000 calc(100% - 40px),transparent)}
  html[dir="rtl"] .top .nav[data-fade="start"]{mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
  html:not(.js) .top .nav-main{mask-image:linear-gradient(90deg,#000 85%,transparent)}
  html:not(.js)[dir="rtl"] .top .nav-main{mask-image:linear-gradient(270deg,#000 85%,transparent)}
  .top .nav-game{gap:clamp(14px,5vw,24px);padding-bottom:8px}
  .top .nav-game a{padding:8px 0}
  html.js .nav-toggle{display:inline-grid;place-items:center;flex:none;width:38px;height:36px;padding:0;border:1px solid var(--line-2);border-radius:2px;
    background:none;color:var(--text);cursor:pointer;transition:border-color var(--t),background var(--t)}
  /* phones: the tools row (Sign in / account chip, language, menu) must stay on the brand's row in every language */
  @media (max-width:599px){
    .top .in{column-gap:12px}
    .top .tools{gap:6px}
    .lang summary{padding:8px}
    .lang summary span{display:none}
    html.js .nav-toggle{width:34px;height:34px}
  }
  .nav-toggle:hover,.top.nav-open .nav-toggle{border-color:rgba(var(--accent-rgb),.8);background:rgba(var(--accent-rgb),.14)}
  .nav-toggle-i{display:grid;gap:4px;width:18px}
  .nav-toggle-i i{display:block;height:2px;background:currentColor;transition:transform var(--t),opacity var(--t)}
  .top.nav-open .nav-toggle-i i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .top.nav-open .nav-toggle-i i:nth-child(2){opacity:0}
  .top.nav-open .nav-toggle-i i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  html.js .top .nav-main{display:none}
  html.js .top.nav-open .nav-main{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;align-content:start;
    position:absolute;top:100%;inset-inline:0;z-index:65;margin:0;padding:6px var(--pad) 18px;max-height:calc(100dvh - 110px);overflow:auto;
    white-space:normal;font-size:16px;color:var(--text);mask-image:none;
    background:linear-gradient(180deg,rgb(var(--panel-rgb)),rgb(var(--bg-2-rgb)));border-bottom:1px solid var(--line-2);
    box-shadow:0 24px 48px rgba(0,0,0,.6),0 0 0 100vmax rgba(4,5,8,.6);clip-path:inset(0 -100vmax -100vmax -100vmax);
    animation:acct-in .18s cubic-bezier(.16,1,.3,1)}
  html.js .top.nav-open .nav-main a{display:flex;align-items:center;min-height:48px;padding:6px 4px 6px 12px;border-bottom:1px solid var(--line);
    color:var(--text);border-radius:0;line-height:1.25;overflow-wrap:anywhere}
  html.js .top.nav-open .nav-main a::after{top:50%;bottom:auto;inset-inline-start:0;width:3px;height:0;transform:translateY(-50%);transition:height var(--t)}
  html.js .top.nav-open .nav-main a:hover::after,html.js .top.nav-open .nav-main a[aria-current="page"]::after{width:3px;height:22px}
  html.js .top.nav-open .nav-main a:hover{background:rgba(var(--text-rgb),.04)}
  html.js .top.nav-open .nav-main .more{grid-column:1/-1}
  html.js .top.nav-open .nav-main .more>summary{padding:18px 4px 6px 12px;font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.18em;
    text-transform:uppercase;color:var(--dim)}
  html.js .top.nav-open .nav-main .more-list{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;min-width:0;
    padding:0;background:none;border:0;border-radius:0;box-shadow:none}
}

/* 2026-10-27 phones: a leaderboard / search row is a 2-line card - rank + emblem on the side, [clan] name (one line,
   ellipsis) + tier on line 1, the numbers on line 2 - instead of the name column squeezed to one letter per line. */
@media (max-width:599px){
  .pl-row{display:grid;grid-template-columns:36px minmax(0,1fr);grid-template-areas:"emb who" "emb nums";column-gap:12px;row-gap:3px;align-items:center}
  .pl-row.has-pos{grid-template-columns:auto 36px minmax(0,1fr);grid-template-areas:"pos emb who" "pos emb nums";column-gap:10px}
  .pl-row .pl-pos{grid-area:pos;min-width:2.2em;font-variant-numeric:tabular-nums}
  .pl-row>.pl-emblem{grid-area:emb}
  .pl-row .pl-who{grid-area:who;flex-direction:row;align-items:baseline;gap:6px}
  .pl-row.pl-private .pl-who{grid-row:1/3}
  .pl-row .pl-name{flex:1 1 0;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;overflow-wrap:normal}
  .pl-row .pl-clan{margin-inline-end:4px}
  .pl-row .pl-tier{flex:0 1 auto;min-width:0;max-width:40%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px;text-align:end}
  .pl-row .pl-nums{grid-area:nums;justify-content:flex-start;gap:0 12px;font-size:12.5px;min-width:0}
  .pl-row .pl-nums span{white-space:nowrap}
  .pl-card{padding:16px 14px}
}
/* 2026-10-27 phones: the compare page's two search pickers no longer push the page 13 px wider than a 360 px screen. */
.pl-pick{min-width:0}
.pl-search input{width:100%}
/* 2026-10-27 phones: the Season page's "Season-end ranking rewards" card squeezed its emblem to a dot; the emblem
   keeps its size and stacks above the text under 600 px. */
.card.se-ranking .se-icon{flex:none}
@media (max-width:599px){.card.se-ranking{flex-direction:column;align-items:flex-start}}

/* Owner 2026-10-27 site review: the three pillars + fair play under the hero. */
.pillars-band{padding-top:36px}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pillar,.pillar-fair{display:block;color:inherit;text-decoration:none;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.09);border-left:3px solid var(--accent,#e3203f);padding:20px 20px 18px;transition:border-color .15s,background .15s}
.pillar:hover,.pillar-fair:hover{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.05);text-decoration:none}
.pillar h3,.pillar-fair h3{margin:10px 0 8px;font-size:19px;line-height:1.25}
.pillar p,.pillar-fair p{margin:0 0 12px;color:var(--muted,#aab);font-size:15px;line-height:1.55}
.pillar .more,.pillar-fair .more{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent,#e3203f)}
.pillar-ic{display:inline-grid;place-items:center;width:38px;height:38px;color:var(--accent,#e3203f);background:rgba(255,255,255,.05)}
.pillar-ic svg{width:22px;height:22px}
.pillar-fair{display:flex;gap:16px;align-items:center;margin-top:16px}.pillar-fair div{flex:1}.pillar-fair h3{margin-top:0}.pillar-fair p{margin:0}
[dir=rtl] .pillar,[dir=rtl] .pillar-fair{border-left:1px solid rgba(255,255,255,.09);border-right:3px solid var(--accent,#e3203f)}
@media (max-width:900px){.pillars{grid-template-columns:1fr}.pillar-fair{flex-direction:column;align-items:flex-start}}

/* S-297 rarity: generated by gen_site.py from ARENIZ/data/rules/rarity.json (do not edit by hand) */
:root{--rarity-common:#9aa4ae;--rarity-common-glow:#c9d1d8;--rarity-hard:#4fc76b;--rarity-hard-glow:#8ff0a4;--rarity-rare:#3d8bff;--rarity-rare-glow:#8cbcff;--rarity-very_rare:#a35cff;--rarity-very_rare-glow:#d0a6ff;--rarity-legendary:#f2a53a;--rarity-legendary-glow:#ffd57a;}
.rarity-common{--rc:var(--rarity-common);--rg:var(--rarity-common-glow)}.rarity-hard{--rc:var(--rarity-hard);--rg:var(--rarity-hard-glow)}.rarity-rare{--rc:var(--rarity-rare);--rg:var(--rarity-rare-glow)}.rarity-very_rare{--rc:var(--rarity-very_rare);--rg:var(--rarity-very_rare-glow)}.rarity-legendary{--rc:var(--rarity-legendary);--rg:var(--rarity-legendary-glow)}
.rarity-frame{border-color:var(--rc,var(--line))!important;box-shadow:0 0 0 1px var(--rc,transparent) inset,0 0 14px -4px var(--rg,transparent)}
.rarity-pill{display:inline-block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:2px 8px;border:1px solid var(--rc,var(--line-2));color:var(--rg,var(--muted));background:transparent;line-height:1.4}
.rarity-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--rc);box-shadow:0 0 6px var(--rg);margin-inline-end:6px;vertical-align:middle}