/* MuExp base styles - STRUCTURE only. Every colour comes from tokens that the active
   theme sets in wwwroot/themes/<id>/theme.css. The values below are only the fallback
   if a theme leaves a token out. Layout: fixed sidebar (or top bar when the theme says
   layout "top") + one centred column of sections, max 1600px. */
:root{
  color-scheme:dark;
  --bg:#070b17; --bg-2:#0c1326; --surface:#111a33; --line:#223056;
  --fg:#e8ecf7; --muted:#8e9abb; --accent:#f0b44c; --accent-2:#ff8a3d; --on-accent:#1a1204;
  --ok:#3ddc84; --bad:#ff5d5d; --pc:#2fd4ff; --ios:#f4f6fb; --web:#ff8a3d; --on-chip:#06110a;
  --particle:240,180,76; --hero-a:#1b2a5c; --hero-b:#070b17;
  --f-display:"Russo One","Exo 2",system-ui,sans-serif;
  --f-body:"Exo 2",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --side-w:248px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.55 var(--f-body);-webkit-text-size-adjust:100%}
a{color:inherit}
button{font:inherit;color:inherit}
img{max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--f-display);font-weight:400;text-wrap:balance;margin:0;letter-spacing:.01em}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.note{margin:0;border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--surface);border-radius:8px;padding:14px 16px;color:var(--muted)}

#atoms{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* ---------- shell ---------- */
.app{position:relative;z-index:1;display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100%}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:18px;padding:22px 14px;background:color-mix(in srgb,var(--bg-2) 92%,transparent);border-right:1px solid var(--line);backdrop-filter:blur(6px);overflow-y:auto}
.logo{display:flex;align-items:center;gap:10px;padding:0 8px;text-decoration:none}
.logo b{font-family:var(--f-display);font-weight:400;font-size:24px;letter-spacing:.04em}
.logo b span{color:var(--accent)}
.logo i{font-style:normal;font-size:11px;color:var(--muted);letter-spacing:.1em;display:block}
.mark{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--on-accent);font-family:var(--f-display);font-size:18px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--muted);border:1px solid transparent;font-weight:500;min-height:44px}
.nav a:hover{color:var(--fg);background:color-mix(in srgb,var(--surface) 70%,transparent)}
.nav a.on{color:var(--fg);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.nav a.on svg{color:var(--accent)}
.nav svg{width:19px;height:19px;flex:none}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:12px;padding:0 6px}
.langs{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.langs a{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:6px;padding:4px 6px;font-size:12px;text-decoration:none;color:var(--muted);min-width:0}
.langs a:hover{color:var(--fg)}
.langs a.on{border-color:var(--accent);color:var(--accent)}
.langs .flag{width:20px;height:14px;flex:none;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.langs .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.langs .cd{display:none}
.visits{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}

:root[data-layout="top"] .app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
:root[data-layout="top"] .side{position:sticky;top:0;height:auto;flex-direction:row;align-items:center;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--line);padding:12px max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px));z-index:5}
:root[data-layout="top"] .nav{flex-direction:row;flex-wrap:wrap}
:root[data-layout="top"] .nav a{padding:7px 10px}
:root[data-layout="top"] .nav a span{display:none}
:root[data-layout="top"] .nav a.on span{display:inline}
:root[data-layout="top"] .side-foot{margin:0 0 0 auto;flex-direction:row;align-items:center}
:root[data-layout="top"] .langs{display:flex;flex-wrap:wrap;max-width:520px;justify-content:flex-end}
:root[data-layout="top"] .langs .nm{display:none}
:root[data-layout="top"] .langs .cd{display:inline}

.mobile-bar,.scrim{display:none}
main{min-width:0;padding-block:28px 60px;padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:56px;max-width:1600px;width:100%;margin-inline:auto}

.preview-bar{position:sticky;top:0;z-index:30;display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;padding:9px 16px;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:14px}
.preview-bar a{border:1px solid currentColor;border-radius:6px;padding:3px 10px;text-decoration:none;font-weight:700}

/* ---------- hero ---------- */
.hero{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:
  radial-gradient(120% 90% at 85% 0%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 55%),
  linear-gradient(160deg,var(--hero-a),var(--hero-b));padding:44px 40px 36px;display:grid;gap:26px}
.hero::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,transparent 0 22px,color-mix(in srgb,var(--fg) 3%,transparent) 22px 23px);pointer-events:none}
.hero>*{position:relative}
.hero.small{padding:40px;gap:16px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.12em;background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 45%,transparent);width:max-content;max-width:100%}
.pill i{width:8px;height:8px;border-radius:50%;background:currentColor;animation:pulse 2s infinite}
.pill.off{color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,transparent);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.pill.off i{animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 70%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.hero h1{font-size:clamp(34px,5.4vw,64px);line-height:1.04;max-width:16ch}
.hero.small h1{font-size:clamp(30px,4vw,48px)}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p{margin:0;max-width:60ch;color:var(--muted);font-size:17px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.cta form{margin:0;display:flex}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:9px;border:1px solid var(--line);background:var(--surface);text-decoration:none;font-weight:600;cursor:pointer;min-height:44px}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));border-color:transparent;color:var(--on-accent)}

.dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.dlc{--c:var(--ok);display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:12px;border:1px solid color-mix(in srgb,var(--c) 45%,var(--line));background:color-mix(in srgb,var(--c) 9%,var(--surface));min-width:0}
.dlc header{display:flex;align-items:center;gap:10px}
.dlc header svg{width:26px;height:26px;color:var(--c);flex:none}
.dlc h2{font-size:18px}
.dlc small{color:var(--muted);font-size:13px}
.dlc .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.dlc .row>*{flex:1 1 auto;text-align:center;padding:10px;border-radius:8px;text-decoration:none;font-weight:600;font-size:14px;background:var(--c);color:var(--on-chip);min-height:42px;display:grid;place-items:center}
.dlc .row .ghost{background:transparent;color:var(--c);border:1px solid var(--c)}
.dlc .row .disabled{opacity:.55;cursor:not-allowed}
.dlc.pc{--c:var(--pc)} .dlc.ios{--c:var(--ios)} .dlc.web{--c:var(--web)}
.soon{font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:5px;border:1px solid var(--c);color:var(--c);margin-left:auto}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.stats div{background:var(--bg-2);padding:16px 18px;display:flex;flex-direction:column;gap:2px}
.stats b{font-family:var(--f-mono);font-size:24px;font-variant-numeric:tabular-nums;font-weight:500}

/* ---------- sections ---------- */
.sec{display:flex;flex-direction:column;gap:20px}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(24px,3vw,32px)}
.sec-head a{color:var(--accent);text-decoration:none;font-weight:600;font-size:14px}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tile{padding:20px;border-radius:12px;background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.tile svg{width:30px;height:30px;color:var(--accent)}
.tile h3{font-size:17px}
.tile p{margin:0;color:var(--muted);font-size:14.5px}

.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
/* 25.10.2026 permanent VIP: the bar to the next level on /vip (a <progress>, the CSP allows no inline width) */
.vipbar{position:relative;margin:14px 0 8px;height:26px;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.vipbar progress{-webkit-appearance:none;appearance:none;display:block;width:100%;height:100%;border:0;background:transparent}
.vipbar progress::-webkit-progress-bar{background:transparent}
.vipbar progress::-webkit-progress-value{background:linear-gradient(90deg,var(--accent-2),var(--accent))}
.vipbar progress::-moz-progress-bar{background:linear-gradient(90deg,var(--accent-2),var(--accent))}
.vipbar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--fg);text-shadow:0 1px 2px #000}
.plan{position:relative;padding:24px;border-radius:12px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.plan.best{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 18px 40px -24px var(--accent)}
.plan .tag{position:absolute;top:-11px;right:18px;background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:700;letter-spacing:.1em;padding:3px 9px;border-radius:5px;text-transform:uppercase}
.plan h3{font-size:20px}
.price{display:flex;align-items:baseline;gap:6px}
.price b{font-family:var(--f-mono);font-size:34px;font-weight:500}
.plan ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px;color:var(--muted);font-size:14.5px}
.plan li{display:flex;gap:8px}
.plan li::before{content:"";flex:none;width:6px;height:6px;margin-top:9px;border-radius:2px;background:var(--accent)}
.plan .btn{margin-top:auto}
.coin{color:var(--accent);font-weight:600}

.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:480px}
th,td{padding:11px 14px;text-align:left;border-top:1px solid var(--line)}
thead th{border-top:0;background:var(--bg-2);color:var(--muted);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
tbody tr{background:var(--surface)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
td.n{font-family:var(--f-mono)}
.rk{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:6px;background:var(--bg-2);font-family:var(--f-mono);font-size:13px}
tbody tr:first-child .rk{background:var(--accent);color:var(--on-accent)}

footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:13px;border-top:1px solid var(--line);padding-top:20px}

/* ---------- tablet / phone ---------- */
@media (max-width:1100px){
  .dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .app,:root[data-layout="top"] .app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .mobile-bar{display:flex;position:sticky;top:env(safe-area-inset-top,0px);z-index:15;align-items:center;justify-content:space-between;gap:12px;padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));background:var(--bg-2);border-bottom:1px solid var(--line)}
  body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:16;background:var(--bg-2)}
  .burger{width:44px;height:44px;border-radius:9px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer}
  .burger svg{width:22px;height:22px}
  .side,:root[data-layout="top"] .side{position:fixed;top:0;bottom:0;left:0;height:auto;width:min(300px,86vw);z-index:40;flex-direction:column;align-items:stretch;flex-wrap:nowrap;transform:translateX(-102%);transition:transform .25s;padding:20px max(14px,calc(env(safe-area-inset-left,0px) + 14px));padding-top:calc(env(safe-area-inset-top,0px) + 20px);border-right:1px solid var(--line);border-bottom:0;background:var(--bg-2);visibility:hidden}
  :root[data-layout="top"] .nav{flex-direction:column}
  :root[data-layout="top"] .nav a span{display:inline}
  :root[data-layout="top"] .side-foot{margin:auto 0 0;flex-direction:column;align-items:stretch}
  body.drawer .side{transform:none;visibility:visible}
  body.drawer .scrim{display:block;position:fixed;inset:0;z-index:35;background:#0009}
  .side .logo{display:none}
  main{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px 40px;gap:40px}
  .hero,.hero.small{padding:28px 20px 22px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plans{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .dl,.tiles{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---------- content pages (stage 2) ---------- */
.page-head{display:flex;flex-direction:column;gap:8px}
.page-head h1{font-size:clamp(28px,3.6vw,44px)}
.page-head p{margin:0;color:var(--muted);max-width:70ch}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs a{padding:8px 14px;border-radius:8px;border:1px solid var(--line);text-decoration:none;color:var(--muted);font-weight:600;font-size:14px;min-height:40px;display:inline-flex;align-items:center;background:color-mix(in srgb,var(--surface) 70%,transparent)}
.tabs a:hover{color:var(--fg)}
.tabs a.on{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}
.tabs-group{display:flex;flex-direction:column;gap:8px}
.tabs-group>.label{padding-left:2px}
.pager{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pager a,.pager span{min-width:40px;min-height:40px;display:grid;place-items:center;padding:0 10px;border-radius:8px;border:1px solid var(--line);text-decoration:none;color:var(--muted)}
.pager .on{border-color:var(--accent);color:var(--accent)}
td a{color:var(--fg);text-decoration:none;border-bottom:1px dotted var(--muted)}
td a:hover{color:var(--accent);border-color:var(--accent)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--muted);margin-right:6px;vertical-align:middle}
.dot.on{background:var(--ok)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.card{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:18px;display:flex;flex-direction:column;gap:8px;min-width:0}
.card h2,.card h3{font-size:18px}
.card p{margin:0;color:var(--muted)}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.kv div{background:var(--bg-2);padding:14px 16px;display:flex;flex-direction:column;gap:2px;min-width:0}
.kv b{font-size:18px;font-weight:600;overflow-wrap:anywhere}
.prose{max-width:75ch;display:flex;flex-direction:column;gap:14px;line-height:1.7}
.prose h2{font-size:22px;margin-top:10px}
.prose h3{font-size:18px}
.prose p,.prose ul,.prose ol{margin:0}
.prose a{color:var(--accent)}
.prose img{border-radius:10px;height:auto}
.prose table{min-width:0}
.search{display:flex;gap:8px;flex-wrap:wrap}
.search input{flex:1 1 220px;min-height:44px;padding:0 14px;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--fg);font:inherit}
.gmark{width:32px;height:32px;image-rendering:pixelated;border-radius:4px;vertical-align:middle;background:var(--bg-2)}
.gmark.big{width:96px;height:96px}
.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
@media (max-width:860px){.two-col{grid-template-columns:minmax(0,1fr)}}
a.card.link{text-decoration:none;color:inherit;transition:border-color .15s}
a.card.link:hover{border-color:var(--accent)}
a.card.link h2{color:var(--fg)}
.card h2 a{text-decoration:none}
.card h2 a:hover{color:var(--accent)}
.card .btn{align-self:flex-start;margin-top:auto}
.cd{white-space:nowrap}
.cd.live{color:var(--ok);font-weight:700}
.guide .note,.guide .warn,.guide .lock{border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--surface);border-radius:8px;padding:12px 14px;color:var(--muted)}
.guide .warn{border-left-color:var(--bad)}
.guide .lock{border-left-color:var(--pc)}
.prose kbd{font-family:var(--f-mono);font-size:.9em;padding:1px 6px;border-radius:5px;border:1px solid var(--line);background:var(--bg-2)}
.prose li+li{margin-top:4px}
.legal h1{font-size:clamp(26px,3.4vw,38px)}
.foot-links{display:flex;gap:16px;flex-wrap:wrap}
.foot-links a{color:var(--muted)}
.foot-engine a{color:var(--muted)}
.foot-engine a:hover{color:var(--accent,var(--text))}
.ev-mini{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ev-mini div{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:12px 16px;background:var(--surface);border-top:1px solid var(--line)}
.ev-mini div:first-child{border-top:0}
.ev-mini small{display:block;color:var(--muted);font-size:13px}
@media (max-width:560px){.ev-mini div{grid-template-columns:minmax(0,1fr) auto}.ev-mini time{display:none}}

/* ---------- account forms (stage 3) ---------- */
.auth{max-width:460px;width:100%;margin-inline:auto;display:flex;flex-direction:column;gap:18px}
.auth .card{gap:14px;padding:24px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:600;font-size:14px}
.field small{color:var(--muted);font-size:13px}
.field input{min-height:46px;padding:0 14px;border-radius:9px;border:1px solid var(--line);background:var(--bg-2);color:var(--fg);font:inherit;width:100%}
.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.field input.code{font-family:var(--f-mono);font-size:22px;letter-spacing:.2em;text-transform:uppercase;text-align:center}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted)}
.check input{width:20px;height:20px;margin-top:1px;accent-color:var(--accent);flex:none}
.check a{color:var(--accent)}
.err{margin:0;padding:12px 14px;border-radius:9px;border:1px solid color-mix(in srgb,var(--bad) 50%,transparent);background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--fg)}
.okmsg{margin:0;padding:12px 14px;border-radius:9px;border:1px solid color-mix(in srgb,var(--ok) 50%,transparent);background:color-mix(in srgb,var(--ok) 12%,transparent)}
.auth .btn{width:100%}
.links{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px}
.links a{color:var(--accent)}
.g-recaptcha{min-height:78px}
.acc-actions{display:flex;gap:10px;flex-wrap:wrap}
.acc-actions form{margin:0}
.vip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-weight:700;font-size:13px;border:1px solid var(--accent);color:var(--accent)}
.card.tool{gap:12px}
.stats-form{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:12px}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.stats-grid .field span{font-size:12px;color:var(--muted)}
.stats-grid input{min-height:40px;padding:0 10px}
.field select{min-height:46px;padding:0 12px;border-radius:9px;border:1px solid var(--line);background:var(--bg-2);color:var(--fg);font:inherit;width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---- Battle Pass (19.10.2026, redesigned the same evening: a real "pass" lane) */
.bp-hero{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;border:1px solid var(--line);border-radius:16px;padding:22px;
  background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 60%),var(--surface)}
.bp-hero.is-prem{border-color:color-mix(in srgb,var(--accent) 60%,var(--line))}
.bp-hero-main{display:flex;flex-direction:column;gap:10px;min-width:0}
.bp-score{display:flex;align-items:baseline;gap:10px}
.bp-score b{font-size:clamp(40px,6vw,64px);line-height:1;background:linear-gradient(135deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.bp-score span{color:var(--muted);font-size:15px}
.bp-how{margin:0;color:var(--muted);font-size:14px}
.bp-bar{display:flex;align-items:center;gap:12px}
.bp-bar progress{flex:1;height:12px;border:0;border-radius:999px;overflow:hidden;background:var(--line);appearance:none;-webkit-appearance:none}
.bp-bar progress::-webkit-progress-bar{background:var(--line);border-radius:999px}
.bp-bar progress::-webkit-progress-value{background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:999px}
.bp-bar progress::-moz-progress-bar{background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:999px}
.bp-hero-side{display:flex;min-width:0}
.bp-buy,.bp-badge-prem{flex:1;display:flex;flex-direction:column;gap:10px;justify-content:center;border-radius:12px;padding:18px;
  border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 9%,transparent)}
.bp-buy>b,.bp-badge-prem>b{display:flex;align-items:center;gap:8px;font-size:18px;color:var(--accent)}
.bp-buy svg,.bp-badge-prem svg{width:22px;height:22px}
.bp-buy p{margin:0;color:var(--muted);font-size:14px}
.bp-badge-prem{align-items:center;text-align:center}
.bp-badge-prem svg{width:40px;height:40px;color:var(--accent)}
.bp-badge-prem span{color:var(--muted);font-size:14px}
.bp-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:end}
.bp-tools .bp-to{min-width:180px}
.bp-tools .label{flex-basis:100%}
.bp-lane{border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--surface) 85%,transparent);padding:14px 0 6px;position:relative}
.bp-legend{display:flex;justify-content:space-between;padding:0 16px 8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.bp-legend .free{color:var(--muted)}
.bp-legend .prem{color:var(--accent);display:flex;align-items:center;gap:6px}
.bp-legend svg{width:16px;height:16px}
.bp-scroll{display:grid;grid-auto-flow:column;grid-auto-columns:150px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 16px 14px;scrollbar-width:thin}
.bp-tier{display:grid;grid-template-rows:auto 44px auto;scroll-snap-align:start;padding:0 6px}
/* the progress line runs through the nodes; a reached tier lights it up */
.bp-node{position:relative;display:flex;align-items:center;justify-content:center}
.bp-node::before{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:4px;margin-top:-2px;background:var(--line)}
.bp-tier.reached .bp-node::before{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.bp-node span{position:relative;z-index:1;min-width:52px;text-align:center;padding:4px 10px;border-radius:999px;font-size:13px;font-weight:700;
  background:var(--bg,#0b1020);border:2px solid var(--line);color:var(--muted)}
.bp-tier.reached .bp-node span{border-color:var(--accent);color:var(--accent)}
.bp-slot{display:flex;flex-direction:column;gap:6px}
.bp-card{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;border-radius:12px;padding:12px 8px;min-height:176px;
  border:1px solid var(--line);background:var(--surface)}
.bp-card.empty{border-style:dashed;opacity:.35}
.bp-slot.prem .bp-card{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 14%,var(--surface)),var(--surface));
  border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.bp-pic{position:relative;width:68px;height:68px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.28)}
.bp-pic img{width:56px;height:56px;object-fit:contain}
.bp-mark{position:absolute;right:-6px;bottom:-6px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.bp-mark.ok{background:var(--ok);color:var(--on-chip)}
.bp-mark.lock{background:var(--surface);border:1px solid var(--line);color:var(--muted)}
.bp-mark.lock svg{width:14px;height:14px}
.bp-bound{position:absolute;left:-6px;top:-6px;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 5px;border-radius:5px;
  background:var(--surface);border:1px solid var(--line);color:var(--muted)}
.bp-name{font-size:13px;line-height:1.25;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bp-st{font-size:12px;color:var(--muted);margin-top:auto}
.bp-st.ok{color:var(--ok);font-weight:700}
.bp-card form{margin-top:auto;width:100%}
.bp-card .btn{width:100%;min-height:34px;padding:6px 10px;font-size:14px}
.bp-card.st-ready{border-color:var(--ok);box-shadow:0 0 0 1px color-mix(in srgb,var(--ok) 50%,transparent),0 0 18px color-mix(in srgb,var(--ok) 25%,transparent)}
.bp-card.st-needpoints .bp-pic img,.bp-card.st-needpremium .bp-pic img{filter:grayscale(.7) brightness(.7)}
.bp-card.st-needpoints .bp-name,.bp-card.st-needpremium .bp-name{color:var(--muted)}
.bp-card.st-claimed{opacity:.7}
@media (max-width:820px){.bp-hero{grid-template-columns:1fr}.bp-scroll{grid-auto-columns:132px}}

/* ---- Battle Pass polish */
.bp-hero{position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(90% 120% at 0% 0%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 55%),
             radial-gradient(70% 90% at 100% 100%,color-mix(in srgb,var(--accent-2) 14%,transparent),transparent 60%),var(--surface)}
.bp-emblem{position:absolute;right:34%;top:50%;transform:translate(50%,-50%) rotate(-8deg);width:260px;height:260px;z-index:-1;
  color:color-mix(in srgb,var(--accent) 12%,transparent);pointer-events:none}
.bp-emblem svg{width:100%;height:100%;stroke-width:.9}
.bp-season{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bp-chip{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:999px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--on-accent)}
.bp-chip.dim{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}
.bp-score b{filter:drop-shadow(0 4px 18px color-mix(in srgb,var(--accent) 45%,transparent))}
.bp-bar progress{height:14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.bp-next{margin:0;font-weight:700;color:var(--accent)}
.bp-buy{position:relative;overflow:hidden}
.bp-buy::after{content:"";position:absolute;inset:-40% auto -40% -60%;width:40%;transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);animation:bpShine 4.5s ease-in-out infinite}
.bp-tools{align-items:center}
.bp-tools .label{flex-basis:auto;margin-left:auto}
.bp-scroll{grid-auto-columns:minmax(150px,1fr)}
.bp-lane{background:linear-gradient(180deg,transparent 0 52%,color-mix(in srgb,var(--accent) 7%,transparent) 52% 100%),color-mix(in srgb,var(--surface) 85%,transparent)}
.bp-pic::before{content:"";position:absolute;inset:6px;border-radius:50%;z-index:0;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 35%,transparent),transparent 70%);opacity:.55}
.bp-pic img{position:relative;z-index:1}
.bp-slot.prem .bp-pic::before{background:radial-gradient(circle,color-mix(in srgb,#ffd36b 55%,transparent),transparent 70%);opacity:.7}
.bp-card{transition:transform .18s ease,box-shadow .18s ease}
.bp-card:hover{transform:translateY(-3px)}
.bp-card.st-ready{position:relative;overflow:hidden;animation:bpPulse 2.4s ease-in-out infinite}
.bp-card.st-ready::after{content:"";position:absolute;inset:-30% auto -30% -70%;width:45%;transform:rotate(18deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);animation:bpShine 3.2s ease-in-out infinite}
.bp-tier.reached .bp-node span{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--on-accent);border-color:transparent}
.bp-tier.goal .bp-node span{border-color:var(--accent);color:var(--accent);animation:bpPulse 2.4s ease-in-out infinite}
.bp-tier.prem-locked .bp-slot.prem .bp-card{filter:saturate(.75)}
.bp-tier.prem-locked .bp-slot.prem .bp-mark.lock{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--on-accent);border:0}
@keyframes bpPulse{0%,100%{box-shadow:0 0 0 1px color-mix(in srgb,var(--ok) 50%,transparent),0 0 14px color-mix(in srgb,var(--ok) 20%,transparent)}
  50%{box-shadow:0 0 0 1px color-mix(in srgb,var(--ok) 80%,transparent),0 0 28px color-mix(in srgb,var(--ok) 45%,transparent)}}
.bp-tier.goal .bp-node span{animation-name:bpGoal}
@keyframes bpGoal{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent)}50%{box-shadow:0 0 0 7px transparent}}
@keyframes bpShine{0%,55%{left:-70%}100%{left:130%}}
@media (prefers-reduced-motion:reduce){.bp-card.st-ready,.bp-card.st-ready::after,.bp-buy::after,.bp-tier.goal .bp-node span{animation:none}}
@media (max-width:820px){.bp-emblem{right:8%;width:180px;height:180px;opacity:.6}.bp-tools .label{margin-left:0;flex-basis:100%}}

/* ---- Battle Pass row labels */
/* one fixed card height, so the labels on the left line up with their row */
.bp-lane{display:grid;grid-template-columns:46px minmax(0,1fr);padding:10px 0 4px}
.bp-legend{display:none}
.bp-rowlabels{display:grid;grid-template-rows:184px 44px 184px;padding:4px 0 14px 8px;gap:0}
.bp-rowlabels span{display:flex;align-items:center;justify-content:center;gap:6px;border-radius:10px;
  writing-mode:vertical-rl;transform:rotate(180deg);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.bp-rowlabels .free{color:var(--muted);background:color-mix(in srgb,var(--line) 45%,transparent)}
.bp-rowlabels .prem{color:var(--on-accent);background:linear-gradient(0deg,var(--accent),var(--accent-2))}
.bp-rowlabels .prem svg{width:16px;height:16px;transform:rotate(90deg)}
.bp-rowlabels em{font-style:normal}
.bp-scroll{padding-left:8px}
.bp-tier{grid-template-rows:184px 44px 184px}
.bp-slot{height:184px}
.bp-card{height:184px;min-height:0;box-sizing:border-box}
.bp-slot:has(.bp-card + .bp-card) .bp-card{height:auto;flex:1}
.bp-hero-main{position:relative;isolation:isolate}
.bp-emblem{right:0;left:auto;top:50%;transform:translateY(-50%) rotate(-8deg);width:220px;height:220px}

/* ---- Auction (19.10.2026) */
.auc-filter{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.auc-filter .field{min-width:150px;flex:1}
.auc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.auc-card{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.auc-card.exc{border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}
.auc-card.anc{border-color:color-mix(in srgb,var(--pc) 50%,var(--line))}
.auc-card.vip{box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 50%,transparent)}
.auc-card header{display:flex;gap:10px;align-items:center}
.auc-card h3{font-size:15px;margin:0;overflow-wrap:anywhere}
.auc-card.exc h3{color:var(--ok)}
.auc-img{width:56px;height:56px;object-fit:contain;flex:none;border-radius:8px;background:rgba(0,0,0,.25)}
.auc-vip{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--on-accent);background:var(--accent);padding:2px 7px;border-radius:5px}
.auc-opts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--muted)}
.auc-opts .exc{color:var(--ok)}
.auc-opts .anc{color:var(--pc)}
.auc-price{margin:auto 0 0;display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line);padding-top:8px}
.auc-price div{display:flex;justify-content:space-between;gap:8px;font-size:13px}
.auc-price dt{color:var(--muted)}
.auc-price dd{margin:0;text-align:right}
.pager{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}
.auc-ico{display:flex;align-items:center;justify-content:center;color:var(--muted)}
.auc-ico svg{width:30px;height:30px}
.auc-card.exc .auc-ico{color:var(--ok)}
.tabs a small{margin-left:7px;opacity:.75;font-size:12px}
/* the emblem clear of the progress bar */
.bp-emblem{top:4px;transform:rotate(-8deg);width:150px;height:150px;opacity:.85}
/* the lock, the tick and the Bound tag are drawn ABOVE the item picture (it has z-index 1) */
.bp-mark,.bp-bound{z-index:2}
/* lane arrows + a visible gold scrollbar: it must be obvious there is more to the side */
.bp-lane{position:relative}
.bp-arrow{position:absolute;top:50%;z-index:6;width:46px;height:46px;margin-top:-23px;border:0;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--on-accent);
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 6px 18px rgba(0,0,0,.55),0 0 0 4px rgba(7,11,23,.65);
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .15s ease}
.bp-arrow svg{width:24px;height:24px;stroke-width:2.6}
.bp-arrow:hover{transform:scale(1.08)}
.bp-arrow.prev{left:58px}
.bp-arrow.next{right:12px}
.bp-lane.can-prev .bp-arrow.prev,.bp-lane.can-next .bp-arrow.next{opacity:1;pointer-events:auto}
/* soft dark edge where more tiers hide */
.bp-lane::before,.bp-lane::after{content:"";position:absolute;top:0;bottom:16px;width:70px;z-index:5;pointer-events:none;opacity:0;transition:opacity .2s}
.bp-lane::before{left:46px;background:linear-gradient(90deg,rgba(7,11,23,.85),transparent)}
.bp-lane::after{right:0;border-radius:0 16px 16px 0;background:linear-gradient(270deg,rgba(7,11,23,.85),transparent)}
.bp-lane.can-prev::before,.bp-lane.can-next::after{opacity:1}
.bp-scroll{scrollbar-width:auto;scrollbar-color:var(--accent) color-mix(in srgb,var(--line) 70%,transparent)}
.bp-scroll::-webkit-scrollbar{height:10px}
.bp-scroll::-webkit-scrollbar-track{background:color-mix(in srgb,var(--line) 70%,transparent);border-radius:999px;margin:0 16px}
.bp-scroll::-webkit-scrollbar-thumb{background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:999px}
@media (max-width:640px){.bp-arrow{width:38px;height:38px;margin-top:-19px}.bp-arrow.prev{left:50px}}
/* no snapping: it nudged the lane a few px and the left arrow showed at the very start */
.bp-scroll{scroll-snap-type:none}

/* ---- messages after an action: rounded box in the top right corner, fades away (19.10.2026) */
.toasts{position:fixed;top:18px;right:18px;z-index:1000;display:flex;flex-direction:column;gap:12px;width:min(420px,calc(100vw - 32px));pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:12px;padding:16px 16px 16px 18px;border-radius:16px;
  background:color-mix(in srgb,var(--surface) 88%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--line);box-shadow:0 14px 40px rgba(0,0,0,.55);color:var(--fg);
  opacity:0;transform:translateX(24px);transition:opacity .45s ease,transform .45s ease}
.toast.in{opacity:1;transform:none}
.toast.out{opacity:0;transform:translateX(16px);transition:opacity 1.5s ease,transform 1.5s ease}
.toast.good{border-color:color-mix(in srgb,var(--ok) 55%,var(--line))}
.toast.bad{border-color:color-mix(in srgb,var(--bad) 60%,var(--line))}
.toast p{margin:0;flex:1;font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.toast-ico{flex:none;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px}
.toast.good .toast-ico{background:var(--ok);color:var(--on-chip)}
.toast.bad .toast-ico{background:var(--bad);color:#fff}
.toast-x{flex:none;border:0;background:transparent;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;padding:0 2px;margin-top:-2px}
.toast-x:hover{color:var(--fg)}
@media (max-width:900px){.toasts{top:72px;right:16px}}
@media (prefers-reduced-motion:reduce){.toast,.toast.out{transition:opacity .3s linear}}

/* ---- Auction cards as the game shows items (19.10.2026): an inventory slot, the name in its game
        colour, and the game's own semi-transparent tooltip on hover / tap (ItemTooltip.cs) */
.auc-card{position:relative;align-items:center;text-align:center;outline:none;cursor:default}
.auc-card:focus-visible{box-shadow:0 0 0 2px var(--accent)}
.auc-vip{position:absolute;top:10px;right:10px}
.auc-slot{position:relative;width:112px;height:112px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.07),rgba(0,0,0,.55) 70%),#0a0d16;
  border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 0 18px rgba(0,0,0,.8)}
.auc-slot img{width:96px;height:96px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.7))}
.auc-slot .auc-ico svg{width:44px;height:44px;color:var(--muted)}
.auc-count{position:absolute;right:6px;bottom:4px;font-size:13px;color:#fff;text-shadow:0 1px 2px #000}
.mu-name{font-size:15px;margin:2px 0 0;overflow-wrap:anywhere}
.auc-cat{font-size:10px}
.auc-price{width:100%}
/* the tooltip: black, alpha 0.8, centred text, the client's colours (TOOLTIP-SPEC section 3) */
.mu-tip{position:absolute;left:8px;right:8px;top:8px;z-index:30;display:none;padding:6px 10px;border-radius:4px;
  background:rgba(0,0,0,.84);border:1px solid #000;box-shadow:0 10px 30px rgba(0,0,0,.7);
  font:13px/1.35 Tahoma,"Segoe UI",Arial,sans-serif;text-align:center;max-height:70vh;overflow:auto}
.auc-card:hover .mu-tip,.auc-card:focus-within .mu-tip{display:block}
.mu-tip p{margin:0;padding:1px 0}
.mu-tip p.b{font-weight:700}
.mu-tip .mu-sp{display:block;height:.55em}
.c-white{color:#fff}.c-blue{color:#80b3ff}.c-red{color:#ff331a}.c-yellow{color:#ffcc1a}.c-green{color:#1aff80}
.c-purple{color:#ff1aff}.c-gray{color:#8a8a8a}.c-redpurple{color:#cc80cc}.c-violet{color:#b366ff}.c-orange{color:#e66b0a}
.c-greenblue{color:#00ff00}
.mu-tip .c-darkred{background:#a00000;color:#fff}.mu-tip .c-darkblue{background:#0000a0;color:#fff}
.mu-tip .c-darkyellow{background:#a06600;color:#fff}.mu-tip .c-greenblue{background:#3c3cc8}
.mu-name.c-darkblue,.mu-name.c-darkred,.mu-name.c-darkyellow{color:#fff}

/* the floating copy of the game tooltip (Battle Pass) - fixed beside the hovered / tapped card */
.mu-tip.mu-float{display:block;position:fixed;left:0;top:0;right:auto;z-index:1100;width:max-content;max-width:min(340px,calc(100vw - 16px));pointer-events:none}
.bp-card .mu-tip[hidden]{display:none}
/* 20.10.2026 owner: the COUNT in the picture's bottom-right corner (like the auction), the lock / the
   green tick moved to the bottom-left so the count always stays readable */
.bp-mark{left:-6px;right:auto;bottom:-6px;top:auto}
.bp-count{position:absolute;right:2px;bottom:0;z-index:2;font-size:13px;font-weight:800;color:#fff;
  text-shadow:0 1px 2px #000,0 0 3px #000,0 0 6px rgba(0,0,0,.9)}

/* 20.10.2026 owner: shop packs show their rewards like the battle pass - the item's picture, the count in
   the corner, the game tooltip on hover / tap (site.js [data-tipsrc]) */
.pk-items{display:flex;flex-direction:column;gap:8px}
.pk-item{display:flex;align-items:center;gap:12px;padding:6px 8px;border-radius:10px;background:rgba(0,0,0,.18);border:1px solid transparent;outline:none}
.pk-item[data-tipsrc]{cursor:help}
.pk-item[data-tipsrc]:hover,.pk-item[data-tipsrc]:focus-visible{border-color:var(--accent);background:rgba(0,0,0,.3)}
.pk-pic{position:relative;flex:none;width:52px;height:52px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),rgba(0,0,0,.28)}
.pk-pic img{width:44px;height:44px;object-fit:contain}
.pk-ico{color:var(--accent);display:flex}.pk-ico svg{width:26px;height:26px}
.pk-pic .bp-count{font-size:12px;right:3px;bottom:1px}
.pk-bound{position:absolute;top:-6px;left:50%;transform:translateX(-50%);font-size:9px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;padding:1px 5px;border-radius:4px;background:#7a2f2f;color:#fff;white-space:nowrap}
.pk-name{color:var(--text);font-size:14.5px;line-height:1.3}
.pk-item .mu-tip[hidden]{display:none}

/* ---------- rankings (20.10.2026): menu card on the left, the board on the right ---------- */
.rank-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px;align-items:start}
.rank-menu{position:sticky;top:20px;display:flex;flex-direction:column;gap:18px;padding:18px 14px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--surface) 82%,transparent)}
.rank-menu-group{display:flex;flex-direction:column;gap:6px}
.rank-menu-group+.rank-menu-group{padding-top:16px;border-top:1px solid var(--line)}
.rank-menu .label{display:flex;align-items:center;gap:8px;padding:0 8px 2px}
.rank-menu .label svg,.rank-empty svg{width:16px;height:16px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.rank-menu-links{display:flex;flex-direction:column;gap:2px}
.rank-menu-links a{display:flex;align-items:center;min-height:38px;padding:7px 10px 7px 12px;border-radius:8px;border-left:3px solid transparent;text-decoration:none;color:var(--muted);font-weight:600;font-size:14.5px;transition:background .15s,color .15s}
.rank-menu-links a:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 6%,transparent)}
.rank-menu-links a.on{color:var(--fg);background:color-mix(in srgb,var(--accent) 16%,transparent);border-left-color:var(--accent)}
.rank-menu-links a.live .dot{margin-right:8px}
.rank-board{display:flex;flex-direction:column;gap:16px;padding:22px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--surface) 82%,transparent);min-width:0}
.rank-board-head{display:flex;flex-direction:column;gap:6px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.rank-board-head .label{display:flex;align-items:center;color:var(--accent)}
.rank-board-head h2{font-size:clamp(24px,2.6vw,34px)}
.rank-board-head p{margin:0;color:var(--muted);font-size:14px}
.rank-empty{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px 16px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);text-align:center}
.rank-empty svg{width:40px;height:40px;stroke-width:1.4;opacity:.8}
.rank-table td.muted{color:var(--muted)}
.rank-table tbody tr{transition:background .15s}
.rank-table tbody tr:hover{background:color-mix(in srgb,var(--surface) 80%,var(--fg) 6%)}
.rank-table tbody tr.top1 .rk{background:linear-gradient(135deg,#ffe08a,#e2a22b);color:#2a1a00;box-shadow:0 0 12px #f0b44c66}
.rank-table tbody tr.top2 .rk{background:linear-gradient(135deg,#f1f4f9,#a9b3c4);color:#1b2130}
.rank-table tbody tr.top3 .rk{background:linear-gradient(135deg,#f0b88a,#b0683a);color:#2a1406}
.rank-table tr.top1 td:nth-child(2) a{color:var(--accent)}
.rank-table .rk{width:28px;height:28px;font-weight:700}
@media (max-width:1100px){
  .rank-layout{grid-template-columns:minmax(0,1fr)}
  .rank-menu{position:static;gap:12px;padding:14px}
  .rank-menu-group+.rank-menu-group{padding-top:12px}
  .rank-menu-links{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px;scrollbar-width:thin}
  .rank-menu-links a{flex:none;white-space:nowrap;border-left:0;border:1px solid var(--line);min-height:40px}
  .rank-menu-links a.on{border-color:var(--accent);color:var(--on-accent);background:var(--accent)}
}
@media (max-width:560px){
  .rank-board{padding:16px 12px}
}

/* ---------- copy guard (20.10.2026, panel switch "copyguard", js/copyguard.js) ----------
   No text selection, no dragging pictures. A hurdle only - see copyguard.js. Fields and .copyable stay normal. */
body.nocopy{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.nocopy img{-webkit-user-drag:none;user-drag:none}
body.nocopy input,body.nocopy textarea,body.nocopy select,body.nocopy [contenteditable],body.nocopy .copyable{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}

/* ---------- character profile (20.10.2026): class portrait card + number tiles ---------- */
.char-hero{display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px;align-items:start}
.char-main{display:flex;flex-direction:column;gap:22px;min-width:0}
.hero-card{position:relative;margin:0;aspect-ratio:3/4;border-radius:16px;padding:3px;overflow:hidden;
  background:linear-gradient(160deg,#ffe7a3,var(--accent) 30%,#7a4b12 55%,var(--accent) 80%,#ffe7a3);
  box-shadow:0 0 0 1px #0008,0 18px 40px #000a,0 0 32px color-mix(in srgb,var(--accent) 35%,transparent)}
.hero-card img{display:block;width:100%;height:100%;object-fit:cover;border-radius:13px}
.hero-card::before{content:"";position:absolute;inset:3px;border-radius:13px;pointer-events:none;
  box-shadow:inset 0 0 0 1px #ffffff26,inset 0 0 40px #000c;
  background:linear-gradient(180deg,#000a 0%,transparent 22%,transparent 55%,#000e 100%)}
.hero-card::after{content:"";position:absolute;inset:12px;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:9px;pointer-events:none}
.hc-brand{position:absolute;top:22px;left:0;right:0;text-align:center;font-family:var(--f-display);font-size:30px;letter-spacing:.08em;color:#fff;
  text-shadow:0 2px 0 #0009,0 0 18px #000}
.hc-brand b{font-weight:400;color:var(--accent);margin-left:.25em;text-shadow:0 2px 0 #0009,0 0 14px color-mix(in srgb,var(--accent) 70%,transparent)}
.hero-card figcaption{position:absolute;left:0;right:0;bottom:22px;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;padding:0 18px}
.hero-card figcaption b{font-family:var(--f-display);font-weight:400;font-size:24px;color:#fff;text-shadow:0 2px 6px #000;overflow-wrap:anywhere}
.hero-card figcaption span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.stat-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.stat-tiles>div{display:flex;flex-direction:column;gap:4px;min-width:0;padding:14px 16px;border:1px solid var(--line);border-radius:12px;
  background:color-mix(in srgb,var(--surface) 85%,transparent)}
.stat-tiles>div.wide{grid-column:span 2}
.stat-tiles b{font-size:20px;font-weight:600;overflow-wrap:anywhere}
.stat-tiles small{color:var(--muted);font-weight:500}
@media (max-width:1180px){.char-hero{grid-template-columns:250px minmax(0,1fr)}}
@media (max-width:1000px){
  .char-hero{grid-template-columns:minmax(0,1fr)}
  .hero-card{width:min(300px,100%);justify-self:center}
}
@media (max-width:420px){.stat-tiles>div.wide{grid-column:auto}}

/* ---------- guild profile (20.10.2026): the guild banner ----------
   .gf-trim = gold edge, .gf-cloth = the cloth inside it; both cut by the same swallow-tail polygon,
   the cloth 3 px smaller, so the gold shows as a border all round, also along the cut. */
.guild-flag{position:relative;margin:0;padding-top:14px;filter:drop-shadow(0 18px 30px #000c) drop-shadow(0 0 22px color-mix(in srgb,var(--accent) 28%,transparent))}
.gf-pole{position:absolute;top:0;left:-10px;right:-10px;height:14px;border-radius:7px;z-index:2;
  background:linear-gradient(180deg,#fff3c4,var(--accent) 45%,#6b3f0c);box-shadow:0 3px 6px #0009}
.gf-pole::before,.gf-pole::after{content:"";position:absolute;top:-4px;width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff6d0,var(--accent) 50%,#5e360a)}
.gf-pole::before{left:-8px}.gf-pole::after{right:-8px}
.gf-trim,.gf-cloth{clip-path:polygon(0 0,100% 0,100% 100%,50% 86%,0 100%)}
.gf-trim{padding:0 3px 4px;background:linear-gradient(160deg,#ffe7a3,var(--accent) 30%,#7a4b12 55%,var(--accent) 80%,#ffe7a3)}
.gf-cloth{position:relative;aspect-ratio:3/4.1;display:flex;flex-direction:column;align-items:center;gap:18px;padding:74px 22px 0;
  background:
    radial-gradient(120% 70% at 50% 35%,#ffffff14,transparent 60%),
    repeating-linear-gradient(90deg,#ffffff05 0 2px,transparent 2px 6px),
    linear-gradient(180deg,color-mix(in srgb,var(--accent) 18%,#3a0d16) 0%,#1d0610 60%,#12040a 100%)}
.gf-cloth::before{content:"";position:absolute;inset:10px 10px 0;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-bottom:0;pointer-events:none}
.gf-cloth .hc-brand{top:20px}
.gf-mark{display:grid;place-items:center;width:148px;height:148px;padding:8px;border-radius:12px;
  background:linear-gradient(160deg,#ffe7a3,var(--accent) 40%,#7a4b12);box-shadow:0 8px 18px #000b,inset 0 0 0 1px #fff4}
.gf-mark img{width:132px;height:132px;image-rendering:pixelated;border-radius:6px;background:#0b0f1c;box-shadow:inset 0 0 0 1px #0008}
.gf-mark svg{width:84px;height:84px;fill:none;stroke:#2a1a00;stroke-width:1.6}
.guild-flag figcaption{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.guild-flag figcaption b{font-family:var(--f-display);font-weight:400;font-size:26px;color:#fff;text-shadow:0 2px 6px #000;overflow-wrap:anywhere}
.guild-flag figcaption span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.rank-table td.gm-owner{color:var(--accent);font-weight:600}
@media (max-width:1000px){.guild-flag{width:min(300px,100%);justify-self:center}}

/* ---------- section links as tabs (20.10.2026, owner) ----------
   "Compare all benefits", "All events", ... : a gold tab whose bottom sits on the top edge of the block
   under the heading, at its right corner (like a folder tab). The heading keeps its own space with
   padding; the section gap under the head is cancelled so the tab really touches the block.
   "BEST VALUE" moved to the LEFT corner of its card, out of the tab's way. */
.sec-head:has(>a){align-items:flex-end;flex-wrap:nowrap;margin-bottom:-20px;position:relative;z-index:1}
.sec-head:has(>a) h2{padding-bottom:16px;min-width:0}
.sec-head>a{flex:none;margin-right:14px;padding:7px 14px 6px;border:1px solid color-mix(in srgb,var(--accent) 70%,transparent);border-bottom:0;
  border-radius:9px 9px 0 0;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 24%,var(--surface)),var(--surface));
  color:var(--accent);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px;transition:background .15s,color .15s}
.sec-head>a::after{content:"";width:6px;height:6px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-left:1px}
.sec-head>a:hover{background:var(--accent);color:var(--on-accent)}
.plan .tag{right:auto;left:18px}
@media (max-width:560px){
  .sec-head>a{margin-right:8px;padding:6px 10px 5px;font-size:10.5px;letter-spacing:.06em}
}

/* ---------- news page (20.10.2026): featured newest + timeline ---------- */
.news-feature{display:grid;grid-template-columns:minmax(260px,38%) minmax(0,1fr);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:color-mix(in srgb,var(--surface) 88%,transparent);box-shadow:0 18px 40px #0007}
.nf-cover{position:relative;display:grid;place-items:center;min-height:280px;text-decoration:none;overflow:hidden;
  background:radial-gradient(120% 90% at 30% 20%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 60%),
             repeating-linear-gradient(135deg,#ffffff06 0 2px,transparent 2px 9px),linear-gradient(160deg,#2a1a06,#0b0f1c 70%)}
.nf-cover::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px #ffffff14,inset -40px 0 60px -40px #000;pointer-events:none}
.nf-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nf-cover .hc-brand{top:auto;bottom:18px;font-size:22px}
.nf-date{display:flex;flex-direction:column;align-items:center;line-height:1;text-align:center;color:#fff}
.nf-date b{font-family:var(--f-display);font-weight:400;font-size:96px;background:linear-gradient(180deg,#fff3c4,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 10px #000)}
.nf-date i{font-style:normal;font-size:18px;letter-spacing:.28em;text-transform:uppercase;margin-top:6px}
.nf-date small{font-size:13px;color:var(--muted);letter-spacing:.3em;margin-top:8px}
.nf-body{display:flex;flex-direction:column;gap:12px;padding:28px 30px;min-width:0}
.nf-body h2{font-size:clamp(22px,2.4vw,30px)}
.nf-body h2 a,.nl-card h2 a{text-decoration:none;color:var(--fg)}
.nf-body h2 a:hover,.nl-card h2 a:hover{color:var(--accent)}
.nf-body p{margin:0;color:var(--muted);line-height:1.65}
.nf-body .btn{align-self:flex-start;margin-top:auto}
.news-line{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;position:relative}
.news-line::before{content:"";position:absolute;left:39px;top:10px;bottom:10px;width:2px;background:linear-gradient(180deg,var(--accent),transparent)}
.news-line li{display:grid;grid-template-columns:80px minmax(0,1fr);gap:18px;align-items:start}
.nl-leaf{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:8px 0 7px;border-radius:10px;line-height:1.05;
  background:var(--bg-2);border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 6px 14px #0008}
.nl-leaf b{font-family:var(--f-display);font-weight:400;font-size:28px;color:var(--accent)}
.nl-leaf i{font-style:normal;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.nl-leaf small{font-size:11px;color:var(--muted)}
.nl-card{display:flex;flex-direction:column;gap:8px;padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--surface) 85%,transparent);min-width:0;
  transition:border-color .15s}
.nl-card:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.nl-card h2{font-size:20px}
.nl-card p{margin:0;color:var(--muted)}
.nl-more{align-self:flex-start;color:var(--accent);font-weight:600;font-size:14px;text-decoration:none}
.nl-more::after{content:" \203A"}
@media (max-width:860px){
  .news-feature{grid-template-columns:minmax(0,1fr)}
  .nf-cover{min-height:250px;padding-bottom:40px}
  .nf-cover .hc-brand{bottom:14px;font-size:20px}
  .nf-date b{font-size:72px}
  .nf-body{padding:20px}
  .news-line::before{left:27px}
  .news-line li{grid-template-columns:56px minmax(0,1fr);gap:12px}
  .nl-leaf b{font-size:22px}
}

/* ---------- the game's hand as the mouse pointer (20.10.2026, panel switch "gamecursor") ----------
   The PC client's own Interface\Cursor.tga / CursorPush.tga (Tool\Site\make_site_cursor.py -> css/cursor).
   The hand everywhere - links and buttons included, like in the game; while a button of the mouse is held
   (:active) the pointing hand. Text fields keep the text cursor. Mouse only - a phone has no pointer. */
@media (pointer:fine){
  body.mu-cursor,body.mu-cursor *{cursor:url(cursor/hand.png) 2 2,auto}
  body.mu-cursor *:active,body.mu-cursor:active{cursor:url(cursor/push.png) 3 5,auto}
  body.mu-cursor input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
  body.mu-cursor textarea,body.mu-cursor [contenteditable]{cursor:text}
}

/* ---------- opening countdown (20.10.2026, panel /admin/countdown, js/opening.js) ----------
   Wide screens: in the hero's empty top-right corner. Narrower: in the flow under the title text. */
.opening{display:flex;flex-direction:column;gap:12px;width:min(470px,100%);margin:6px 0 4px}
.op-title{align-self:stretch;text-align:center;padding:9px 16px;border-radius:10px;font-family:var(--f-display);font-size:18px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-accent);
  background:linear-gradient(180deg,#ffd27a,var(--accent) 45%,var(--accent-2));box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 35%,transparent),inset 0 1px 0 #fff8}
.op-cells{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.op-cells>div{display:flex;flex-direction:column-reverse;align-items:center;gap:2px;padding:12px 6px 14px;border-radius:12px;
  background:linear-gradient(180deg,#0009,#000c);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);box-shadow:inset 0 1px 0 #ffffff14,0 10px 20px #0008}
.op-cells span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.op-cells b{font-family:var(--f-display);font-weight:400;font-size:clamp(30px,3.4vw,44px);line-height:1;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff3c4,var(--accent) 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.op-cells b.tick{animation:op-tick .35s ease-out}
@keyframes op-tick{from{transform:translateY(-6px);opacity:.3}to{transform:none;opacity:1}}
.op-done{text-align:center;padding:16px;border-radius:12px;font-family:var(--f-display);font-size:24px;color:var(--ok);
  background:color-mix(in srgb,var(--ok) 12%,#000a);border:1px solid color-mix(in srgb,var(--ok) 45%,transparent)}
@media (min-width:1380px){
  .hero>.opening{position:absolute;top:40px;right:40px;margin:0;z-index:2}
}
.opening.is-open .op-title{display:none}

/* ---------- download page (20.10.2026, Themes\base\Views\Download\Index.cshtml) ---------- */
.dlp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.dlp-card{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:14px;border:1px solid var(--line);background:var(--surface)}
.dlp-card header{display:flex;align-items:center;gap:10px}
.dlp-card header svg{width:26px;height:26px;color:var(--accent)}
.dlp-card.android header svg{color:var(--ok)}
.dlp-card.pc header svg{color:var(--pc)}
.dlp-card h2{margin:0;font-size:20px}
.dlp-card header .soon{margin-left:auto}
.dlp-opt{position:relative;display:flex;align-items:center;gap:16px;padding:16px 16px 16px 18px;border-radius:12px;border:1px solid var(--line);background:var(--bg-2);text-decoration:none;color:var(--fg);transition:border-color .15s,transform .15s,box-shadow .15s}
.dlp-opt:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 10px 28px -14px color-mix(in srgb,var(--accent) 70%,transparent)}
.dlp-opt.best{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.dlp-opt.off{opacity:.5}
.dlp-txt{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.dlp-count{font-style:normal;font-size:12px;color:var(--muted,#97a3c2);opacity:.85}   /* "Downloads: N" (20.10.2026) */
.dlp-opt b{font-size:16px}
.dlp-opt small{color:var(--muted);line-height:1.5}
/* the button at the end of every option (20.10.2026 owner: "I did not know they were buttons").
   Recommended = solid glowing accent; the others = accent outline that fills on hover. The whole card stays the link. */
.dlp-btn{flex:none;display:inline-flex;align-items:center;gap:10px;min-width:150px;padding:10px 16px 10px 12px;border-radius:10px;border:1.5px solid var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);transition:background .15s,color .15s,box-shadow .15s}
.dlp-btn i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--accent) 16%,transparent);flex:none}
.dlp-btn i svg{width:20px;height:20px}
.dlp-btn > span{display:flex;flex-direction:column;line-height:1.15}
.dlp-btn b{font-size:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:inherit}
.dlp-btn small{font-family:var(--f-mono);font-size:12px;color:inherit;opacity:.85}
.dlp-opt.best .dlp-btn{border-color:transparent;color:var(--on-accent);background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 65%,#ff7a2f));box-shadow:0 6px 18px -6px color-mix(in srgb,var(--accent) 80%,transparent),inset 0 1px 0 rgba(255,255,255,.25);animation:dlp-glow 2.6s ease-in-out infinite}
.dlp-opt.best .dlp-btn i{background:rgba(0,0,0,.18)}
.dlp-opt:hover .dlp-btn{color:var(--on-accent);background:var(--accent)}
.dlp-opt:hover .dlp-btn i svg{animation:dlp-bounce .7s ease-in-out infinite}
.dlp-opt.off .dlp-btn{border-style:dashed;min-width:0;background:none}
@keyframes dlp-glow{50%{box-shadow:0 6px 26px -4px color-mix(in srgb,var(--accent) 95%,transparent),inset 0 1px 0 rgba(255,255,255,.25)}}
@keyframes dlp-bounce{50%{transform:translateY(3px)}}
@media (prefers-reduced-motion:reduce){.dlp-opt.best .dlp-btn,.dlp-opt:hover .dlp-btn i svg{animation:none}}
/* a narrow card (3 columns on a laptop, or a phone) puts the button UNDER the text, full width - otherwise the
   text is squeezed into a thin column next to it */
.dlp-card{container-type:inline-size}
@container (max-width:420px){.dlp-opt{flex-direction:column;align-items:stretch}.dlp-btn{justify-content:center}}
.dlp-go{display:inline-flex;align-items:center;gap:6px;margin-top:auto;align-self:flex-start;padding:6px 12px;border-radius:8px;border:1px solid var(--accent);color:var(--accent);font-size:13px;font-weight:700;transition:background .15s,color .15s}
.dlp-go svg{width:15px;height:15px}
.dlp-drv a:hover .dlp-go{background:var(--accent);color:var(--on-accent)}
.dlp-tag{position:absolute;top:-10px;right:12px;padding:2px 8px;border-radius:5px;background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.dlp-note{margin:0;font-size:13px;color:var(--muted)}
/* 21.10.2026: "the download has started" note (js/loader.js downloadNote) */
.dl-toast{position:fixed;left:50%;bottom:24px;z-index:60;display:flex;align-items:center;gap:10px;max-width:min(560px,calc(100vw - 32px));
  padding:12px 16px;border:1px solid var(--accent);border-radius:12px;background:var(--surface);color:var(--fg);font-size:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);transform:translate(-50%,140%);opacity:0;transition:transform .25s,opacity .25s;pointer-events:none}
.dl-toast.on{transform:translate(-50%,0);opacity:1}
.dl-toast svg{width:20px;height:20px;flex:none;color:var(--accent)}
.dlp-req{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.dlp-req table{min-width:0}
.dlp-req td.muted{color:var(--muted)}
.dlp-drv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.dlp-drv a{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:12px;border:1px solid var(--line);background:var(--surface);text-decoration:none;color:var(--fg)}
.dlp-drv a:hover{border-color:var(--accent)}
.dlp-drv small{color:var(--muted);line-height:1.5}
@media (max-width:1100px){.dlp{grid-template-columns:minmax(0,1fr)}.dlp-drv{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.dlp-req{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.dlp-drv{grid-template-columns:minmax(0,1fr)}}
/* free credits (26.10.2026, owner): what the credits are, how they are earned, that they are virtual, the rules */
.fc-lead{margin:-6px 0 16px;color:var(--muted);max-width:820px;line-height:1.6}
.fc-coins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.fc-coin{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:12px;border:1px solid var(--line);background:var(--surface)}
.fc-coin b{color:var(--accent);font-size:16px}
.fc-coin small{color:var(--muted);line-height:1.5}
.fc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fc-box{padding:16px 18px;border-radius:12px;border:1px solid var(--line);background:var(--surface);line-height:1.6}
.fc-box h3{margin:0 0 8px;font-size:16px}
.fc-box ul{margin:0;padding-left:18px}
.fc-box p{margin:0 0 8px}
.fc-box p:last-child{margin-bottom:0}
.fc-box.warn{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.fc-fair{margin-top:12px;padding:14px 18px;border-radius:12px;background:color-mix(in srgb,var(--accent) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);font-weight:600;text-align:center}
@media (max-width:900px){.fc-coins{grid-template-columns:minmax(0,1fr)}.fc-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- invisible bot trap in the account forms (20.10.2026, Core\Security\FormTrap.cs) ----------
   Off-screen, NOT display:none - some bots skip fields that are display:none. A person never reaches it
   (tabindex -1, aria-hidden), so anything typed in it means a bot. */
.mx-hp { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

/* ---------- page loader (20.10.2026, Shared\_Loader.cshtml + js/loader.js, panel switch "loader") ----------
   First load: fades in by itself after 0.45 s (covers the time before any script runs); loader.js adds html.mx-ready
   when the page is parsed, so a fast page never shows it. No JS: the second animation hides it after 20 s.
   Leaving a page: loader.js adds html.mx-going after 0.35 s. */
.mx-ld{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;pointer-events:none;opacity:0;visibility:hidden;
  background:radial-gradient(ellipse at center,rgba(10,14,30,.78),rgba(4,6,14,.9));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:mxld-in .3s ease .45s forwards,mxld-gone .4s ease 20s forwards}
html.mx-ready .mx-ld{animation:none;opacity:0;visibility:hidden}
html.mx-going .mx-ld{animation:none;opacity:1;visibility:visible;pointer-events:auto;transition:opacity .25s}
@keyframes mxld-in{to{opacity:1;visibility:visible;pointer-events:auto}}
@keyframes mxld-gone{to{opacity:0;visibility:hidden;pointer-events:none}}
.mx-ld-box{display:flex;flex-direction:column;align-items:center;gap:22px}
.mx-ld-core{position:relative;width:118px;height:118px;display:grid;place-items:center}
.mx-ld-ring{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 30%,color-mix(in srgb,var(--accent,#f5b544) 40%,transparent) 55%,var(--accent,#f5b544) 80%,#ff7a2f 92%,transparent 93%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent,#f5b544) 70%,transparent));animation:mxld-spin 1.1s linear infinite}
.mx-ld-ring.r2{inset:13px;opacity:.75;animation-duration:1.7s;animation-direction:reverse;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px))}
.mx-ld-orbit{position:absolute;inset:-12px;animation:mxld-spin 2.6s linear infinite}
.mx-ld-orbit i{position:absolute;inset:0}
.mx-ld-orbit i::after{content:"";position:absolute;top:-3px;left:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:#ffe2a8;
  box-shadow:0 0 10px 3px color-mix(in srgb,var(--accent,#f5b544) 85%,transparent)}
.mx-ld-orbit i:nth-child(2){transform:rotate(120deg)}
.mx-ld-orbit i:nth-child(2)::after{width:4px;height:4px;left:calc(50% - 2px);opacity:.8}
.mx-ld-orbit i:nth-child(3){transform:rotate(240deg)}
.mx-ld-orbit i:nth-child(3)::after{width:3px;height:3px;left:calc(50% - 1.5px);opacity:.6}
.mx-ld-mark{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;font:800 28px/1 var(--f-head,system-ui),system-ui,sans-serif;
  color:#1a1205;background:linear-gradient(135deg,var(--accent,#f5b544),#ff8a3d);
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 8px 30px -6px color-mix(in srgb,var(--accent,#f5b544) 90%,transparent);animation:mxld-beat 1.4s ease-in-out infinite}
.mx-ld-word{display:flex;gap:.32em;font:800 22px/1 var(--f-head,system-ui),system-ui,sans-serif;letter-spacing:.32em;padding-left:.32em}
.mx-ld-word span,.mx-ld-word b{font-weight:800;background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:mxld-shine 2.2s linear infinite}
.mx-ld-word span{background-image:linear-gradient(100deg,#e9eefb 0 38%,#fff 46%,#ffd58a 50%,#fff 54%,#e9eefb 62%)}
.mx-ld-word b{background-image:linear-gradient(100deg,var(--accent,#f5b544) 0 38%,#fff3d1 50%,var(--accent,#f5b544) 62%)}
.mx-ld-bar{position:fixed;top:0;left:0;right:0;height:3px;overflow:hidden;background:color-mix(in srgb,var(--accent,#f5b544) 15%,transparent)}
.mx-ld-bar::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-40%;border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--accent,#f5b544),#ff7a2f,transparent);box-shadow:0 0 12px var(--accent,#f5b544);animation:mxld-bar 1.3s ease-in-out infinite}
@keyframes mxld-spin{to{transform:rotate(360deg)}}
@keyframes mxld-beat{50%{transform:scale(1.07)}}
@keyframes mxld-shine{from{background-position:130% 0}to{background-position:-130% 0}}
@keyframes mxld-bar{to{left:100%}}
@media (prefers-reduced-motion:reduce){.mx-ld-ring,.mx-ld-orbit{animation-duration:4s}.mx-ld-mark,.mx-ld-word span,.mx-ld-word b,.mx-ld-bar::after{animation:none}}

/* ---------- visitor country (20.10.2026, Home\_GeoCard.cshtml + js/geo.js, panel /admin/geo, switch "geocard") ----------
   Looks: geo-orbit / geo-banner / geo-glass / geo-neon / geo-plain. Colours: geo-col-* set --g1/--g2 (geo-col-flag:
   geo.js reads them from the flag). Effects: .geo-name.fx-* (letters = span.gl, set up by geo.js). No frame. */
.geo{--g1:var(--accent,#f5b544);--g2:color-mix(in srgb,var(--accent,#f5b544) 60%,#ff7a2f);position:relative;z-index:2;display:flex;align-items:center;gap:18px;margin:22px 0 4px;color:var(--fg);pointer-events:none}
.geo-col-gold{--g1:#f5b544;--g2:#ff8a3d}
.geo-col-ice{--g1:#7dd3fc;--g2:#3b82f6}
.geo-col-emerald{--g1:#4ade80;--g2:#0ea371}
.geo-col-crimson{--g1:#fb7185;--g2:#dc2626}
.geo-col-violet{--g1:#c4b5fd;--g2:#8b5cf6}
.geo-col-rainbow{--g1:#f472b6;--g2:#60a5fa}
/* RULE (owner 20.10.2026): the FLAG is never recoloured - a tinted flag can turn into another country's flag (a
   rainbow filter made Bulgaria look like Russia). Colours go only on the decoration and the letters; on the flag only
   white light (shine, scan lines). Rainbow therefore animates the colour variables, not a filter. */
@property --g1{syntax:'<color>';inherits:true;initial-value:#f5b544}
@property --g2{syntax:'<color>';inherits:true;initial-value:#ff8a3d}
.geo.geo-col-rainbow{animation:geo-rainbow 8s linear infinite}
@keyframes geo-rainbow{0%,100%{--g1:#f472b6;--g2:#a855f7}20%{--g1:#60a5fa;--g2:#2563eb}40%{--g1:#4ade80;--g2:#0ea371}60%{--g1:#facc15;--g2:#f97316}80%{--g1:#fb7185;--g2:#dc2626}}
.geo-flag{position:relative;flex:none;display:grid;place-items:center}
.geo-flag img{display:block;width:64px;height:48px;object-fit:cover;border-radius:6px;box-shadow:0 6px 18px -6px #000c}
.geo-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.geo-txt small{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:color-mix(in srgb,var(--g1) 70%,var(--muted))}
.geo-name{display:inline-block;font-family:var(--f-display,inherit);font-weight:800;font-size:clamp(26px,2.6vw,40px);line-height:1.1;white-space:nowrap;
  background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--g1) 80%,#fff) 55%,var(--g2));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 16px color-mix(in srgb,var(--g1) 45%,transparent))}
.geo-name .gl{display:inline-block;background:inherit;-webkit-background-clip:text;background-clip:text;color:transparent}

/* in the hero's empty top-right corner on a wide screen; under the text on narrower ones */
@media (min-width:1380px){ .hero>.geo:not(.geo-compact){position:absolute;top:56px;right:56px;margin:0;max-width:44%} }
/* one line next to the "server online" pill when the countdown has the corner */
.geo.geo-compact{display:inline-flex;gap:8px;margin:0 0 0 10px;vertical-align:middle}
.geo.geo-compact .geo-flag img{width:24px;height:18px;border-radius:3px}
.geo.geo-compact .geo-name{font-size:14px;letter-spacing:.04em}

/* ---- looks */
.geo-orbit{flex-direction:column;gap:14px;text-align:center}
.geo-orbit .geo-txt{align-items:center}
.geo-orbit .geo-flag{width:132px;height:132px}
.geo-orbit .geo-flag img{width:96px;height:96px;border-radius:50%;box-shadow:0 0 0 3px #0008,0 10px 30px -8px color-mix(in srgb,var(--g1) 80%,transparent)}
.geo-ring{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 30%,color-mix(in srgb,var(--g1) 40%,transparent) 55%,var(--g1) 80%,var(--g2) 92%,transparent 93%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--g1) 70%,transparent));animation:geo-spin 2.4s linear infinite}
.geo-ring.r2{inset:10px;opacity:.6;animation-duration:3.6s;animation-direction:reverse}
.geo-sparks{position:absolute;inset:-8px;animation:geo-spin 5s linear infinite}
.geo-sparks b{position:absolute;inset:0}
.geo-sparks b::after{content:"";position:absolute;top:-3px;left:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:#fff6dc;box-shadow:0 0 12px 3px var(--g1)}
.geo-sparks b:nth-child(2){transform:rotate(130deg)}
.geo-sparks b:nth-child(3){transform:rotate(250deg)}
.geo-sparks b:nth-child(3)::after{width:4px;height:4px;left:calc(50% - 2px)}

.geo-banner .geo-flag{perspective:400px}
.geo-banner .geo-flag img,.geo-wave{width:120px;height:80px}
.geo-wave{display:flex;filter:drop-shadow(0 10px 18px #000a)}
.geo-wave span{flex:1;height:100%;animation:geo-cloth 2.2s ease-in-out infinite}
.geo-wave span:first-child{border-radius:6px 0 0 6px}.geo-wave span:last-child{border-radius:0 6px 6px 0}
@keyframes geo-cloth{0%,100%{transform:translateY(-4px);filter:brightness(1.05)}50%{transform:translateY(4px);filter:brightness(.92)}}
.geo-banner .geo-flag::before{content:"";position:absolute;left:-7px;top:-8px;bottom:-26px;width:4px;border-radius:2px;background:linear-gradient(180deg,#fff,#9aa3b5 40%,#4b5466)}

.geo-glass{padding:16px 22px;border-radius:16px;background:linear-gradient(135deg,#ffffff1c,#ffffff08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 #ffffff30,0 18px 40px -18px color-mix(in srgb,var(--g1) 60%,#000);overflow:hidden}
.geo-glass::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,#ffffff2e 48%,transparent 60%);transform:translateX(-120%);animation:geo-sweep 4.5s ease-in-out infinite}
.geo-glass .geo-flag img{width:78px;height:58px}
@keyframes geo-sweep{55%,100%{transform:translateX(120%)}}

.geo-neon .geo-flag img{width:84px;height:62px;border-radius:8px;box-shadow:0 0 0 2px var(--g1),0 0 14px 2px var(--g1),0 0 36px 4px color-mix(in srgb,var(--g2) 70%,transparent)}
.geo-neon .geo-name{background:none;color:#fff;filter:none;text-shadow:0 0 4px #fff,0 0 12px var(--g1),0 0 28px var(--g1),0 0 48px var(--g2);animation:geo-flicker 6s linear infinite}
.geo-neon .geo-name .gl{background:none;color:#fff}
@keyframes geo-flicker{0%,18%,22%,62%,64%,100%{opacity:1}20%,63%{opacity:.55}}

.geo-plain{gap:12px}
.geo-plain .geo-flag img{width:40px;height:30px;border-radius:4px}
.geo-plain .geo-name{font-size:clamp(20px,2vw,28px)}

/* ---- letter effects */
.geo-name.fx-assemble .gl{opacity:0;transform:translate(var(--dx,0),var(--dy,0)) rotate(var(--rot,0)) scale(var(--sc,1));filter:blur(3px);
  transition:transform .9s cubic-bezier(.6,-.3,.7,1.2),opacity .7s,filter .7s;transition-delay:calc(var(--i) * 25ms)}
.geo-name.fx-assemble.in .gl{opacity:1;transform:none;filter:none;transition:transform 1.1s cubic-bezier(.2,1.25,.35,1),opacity .6s,filter .8s;transition-delay:calc(var(--i) * 55ms)}
.geo.burst .geo-flag{animation:geo-pop .7s ease-out}
@keyframes geo-pop{40%{transform:scale(1.12)}}
.geo-name.fx-wave .gl{animation:geo-bob 2s ease-in-out infinite;animation-delay:calc(var(--i) * 90ms)}
@keyframes geo-bob{0%,100%{transform:translateY(0)}35%{transform:translateY(-9px)}}
.geo-name.fx-typewriter .gl{transition:opacity .08s}
.geo-name.fx-typewriter .gl.off{opacity:0}
.geo-name.fx-typewriter::after{content:"";display:inline-block;width:3px;height:.9em;margin-left:4px;vertical-align:-.08em;background:var(--g1);animation:geo-caret 1s steps(2,start) infinite}
@keyframes geo-caret{to{visibility:hidden}}
.geo[data-fx="glitch"] .geo-name{position:relative;animation:geo-glitch 5s steps(1) infinite}
.geo[data-fx="glitch"] .geo-name::before,.geo[data-fx="glitch"] .geo-name::after{content:attr(data-text);position:absolute;inset:0;background:inherit;-webkit-background-clip:text;background-clip:text;opacity:0}
.geo[data-fx="glitch"] .geo-name::before{animation:geo-gl1 5s steps(1) infinite;filter:drop-shadow(2px 0 0 #ff2bd6)}
.geo[data-fx="glitch"] .geo-name::after{animation:geo-gl2 5s steps(1) infinite;filter:drop-shadow(-2px 0 0 #22e4ff)}
@keyframes geo-glitch{0%,90%,100%{transform:none}91%{transform:skewX(-8deg)}93%{transform:translateX(3px)}95%{transform:skewX(6deg)}}
@keyframes geo-gl1{0%,89%,100%{opacity:0}90%,96%{opacity:.9;transform:translate(-4px,-2px);clip-path:inset(0 0 55% 0)}}
@keyframes geo-gl2{0%,89%,100%{opacity:0}91%,97%{opacity:.9;transform:translate(4px,2px);clip-path:inset(50% 0 0 0)}}
.geo[data-fx="shine"] .geo-name{background-image:linear-gradient(100deg,var(--g1) 0 40%,#fff 50%,var(--g1) 60%);background-size:260% 100%;animation:geo-shine 2.8s linear infinite}
@keyframes geo-shine{from{background-position:130% 0}to{background-position:-130% 0}}
/* a joined script (Arabic, Indic, Thai...) moves as one word */
.geo-name.geo-whole.fx-assemble{animation:geo-whole 8.6s ease-in-out infinite}
@keyframes geo-whole{0%{opacity:0;transform:scale(1.8);filter:blur(10px)}15%,75%{opacity:1;transform:none;filter:none}85%,100%{opacity:0;transform:scale(.4);filter:blur(8px)}}
.geo-name.geo-whole.fx-wave{animation:geo-bob 2.4s ease-in-out infinite}
.geo-name.geo-whole.fx-typewriter{animation:geo-reveal 6s steps(18) infinite}
@keyframes geo-reveal{0%{clip-path:inset(0 100% 0 0)}45%,85%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes geo-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.geo *,.geo::after{animation:none!important;transition:none!important}}
.tzline{margin:6px 0 0;font-size:13px;color:var(--muted)}

/* ---------- visitor country, more looks + effects (20.10.2026, v1.8.2) ---------- */
/* shield: the flag cut into a knight's shield with a gold rim (clip-path cuts shadows -> filter on the holder) */
.geo-shield{flex-direction:column;gap:14px;text-align:center}
.geo-shield .geo-txt{align-items:center}
.geo-shield .geo-flag{width:100px;height:118px;filter:drop-shadow(0 10px 22px color-mix(in srgb,var(--g1) 55%,#000))}
.geo-shield .geo-flag::before,.geo-shield .geo-flag img{clip-path:polygon(0 0,100% 0,100% 58%,94% 74%,78% 88%,50% 100%,22% 88%,6% 74%,0 58%)}
.geo-shield .geo-flag::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,#fff4cf,var(--g1) 35%,var(--g2) 75%,#5a3b0c)}
.geo-shield .geo-flag img{position:relative;width:88px;height:105px;border-radius:0;box-shadow:none;margin-top:-1px}
.geo-shield .geo-flag::after{content:"";position:absolute;inset:6px 6px 12px;clip-path:polygon(0 0,100% 0,100% 58%,94% 74%,78% 88%,50% 100%,22% 88%,6% 74%,0 58%);
  background:linear-gradient(115deg,transparent 30%,#ffffff55 45%,transparent 58%);background-size:250% 100%;animation:geo-shield-shine 4s ease-in-out infinite}
@keyframes geo-shield-shine{0%,40%{background-position:130% 0}80%,100%{background-position:-130% 0}}

/* hologram: floating, scan lines, a cone of light from below - in the chosen colour */
.geo-holo{flex-direction:column;gap:16px;text-align:center}
.geo-holo .geo-txt{align-items:center}
.geo-holo .geo-flag{width:120px;height:120px;animation:geo-float 3.4s ease-in-out infinite}
.geo-holo .geo-flag img{width:104px;height:78px;border-radius:4px;box-shadow:0 0 0 1px color-mix(in srgb,var(--g1) 70%,transparent),0 0 24px color-mix(in srgb,var(--g1) 55%,transparent);
  animation:geo-holo-flick 5s steps(1) infinite}
.geo-holo .geo-flag::after{content:"";position:absolute;left:8px;right:8px;top:21px;height:78px;border-radius:4px;pointer-events:none;
  background:repeating-linear-gradient(180deg,#ffffff18 0 1px,transparent 1px 4px),linear-gradient(180deg,transparent,#ffffff40 50%,transparent);
  background-size:100% 100%,100% 40%;background-repeat:repeat,no-repeat;animation:geo-scan 2.6s linear infinite}
.geo-beam{position:absolute;left:50%;bottom:-14px;width:110px;height:34px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse,color-mix(in srgb,var(--g1) 75%,transparent),transparent 70%);filter:blur(2px)}
.geo-holo .geo-name{text-shadow:none;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--g1) 80%,transparent))}
@keyframes geo-float{50%{transform:translateY(-8px)}}
@keyframes geo-scan{from{background-position:0 0,0 -60%}to{background-position:0 0,0 160%}}
@keyframes geo-holo-flick{0%,88%,92%,100%{opacity:1}90%{opacity:.55}91%{opacity:.85}}

/* embers: the flag glows like coals, sparks fly up (geo.js adds them) */
.geo-embers .geo-flag img{width:96px;height:72px;box-shadow:0 0 0 2px #ffb34d88,0 0 26px 6px #ff6a1a77,0 0 60px 10px #ff3d0044;animation:geo-coal 2.2s ease-in-out infinite}
@keyframes geo-coal{50%{box-shadow:0 0 0 2px #ffd27a,0 0 34px 9px #ff7a1a99,0 0 70px 14px #ff3d0066}}
.geo-ember{position:absolute;bottom:20%;width:var(--sz,3px);height:var(--sz,3px);border-radius:50%;background:#ffd27a;box-shadow:0 0 8px 2px #ff7a1a;
  opacity:0;animation:geo-rise 2.6s ease-out infinite}
@keyframes geo-rise{0%{opacity:0;transform:translate(0,0) scale(1)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx,0),-110px) scale(.3)}}

/* effects: 3D flip (airport board) and dropping letters */
.geo-name.fx-flip{perspective:600px}
.geo-name.fx-flip .gl{animation:geo-flip 7s ease-in-out infinite;animation-delay:calc(var(--i) * 80ms);transform-origin:50% 60%;backface-visibility:hidden}
@keyframes geo-flip{0%{transform:rotateX(-95deg);opacity:0}9%{transform:rotateX(14deg);opacity:1}13%,80%{transform:none;opacity:1}90%,100%{transform:rotateX(95deg);opacity:0}}
.geo-name.fx-drop .gl{animation:geo-drop 7.5s cubic-bezier(.3,.7,.4,1) infinite;animation-delay:calc(var(--i) * 70ms)}
@keyframes geo-drop{0%{transform:translateY(-130px) rotate(-12deg);opacity:0}10%{transform:none;opacity:1}13%{transform:translateY(-16px)}16%{transform:none}19%{transform:translateY(-5px)}21%,82%{transform:none;opacity:1}
  100%{transform:translateY(80px) rotate(14deg);opacity:0}}
.geo-name.geo-whole.fx-flip{animation:geo-flip 7s ease-in-out infinite}
.geo-name.geo-whole.fx-drop{animation:geo-drop 7.5s cubic-bezier(.3,.7,.4,1) infinite}
@media (prefers-reduced-motion:reduce){.geo-ember{display:none}}

/* ---------- visitor country: lion crest + dragon (20.10.2026, v1.8.3) ----------
   The drawings are icons by Lorc (game-icons.net, CC BY 3.0, wwwroot\flags\deco\CREDITS.txt) used as MASKS, so they
   take the chosen colour; the flag itself stays untouched. Tool\Site\make_geo_deco.py made the files. */
.geo-deco{position:absolute;pointer-events:none;background:linear-gradient(180deg,#fff2c8,var(--g1) 45%,var(--g2) 90%);
  -webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}
.geo-d-crown{-webkit-mask-image:url(/flags/deco/crown.svg);mask-image:url(/flags/deco/crown.svg)}
.geo-d-lion{-webkit-mask-image:url(/flags/deco/lion.svg);mask-image:url(/flags/deco/lion.svg)}
.geo-d-dragon{-webkit-mask-image:url(/flags/deco/wyvern.svg);mask-image:url(/flags/deco/wyvern.svg)}

/* lion crest: the shield of "shield" + a crown + two lions facing it */
.geo-lion.geo,.geo-dragon.geo{flex-direction:column;gap:16px;text-align:center}
.geo-lion.geo .geo-txt,.geo-dragon.geo .geo-txt{align-items:center}
.geo-lion.geo .geo-flag{width:100px;height:118px;margin:44px 74px 0}
.geo-lion.geo .geo-flag::before,.geo-lion.geo .geo-flag > img{clip-path:polygon(0 0,100% 0,100% 58%,94% 74%,78% 88%,50% 100%,22% 88%,6% 74%,0 58%)}
.geo-lion.geo .geo-flag::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,#fff4cf,var(--g1) 35%,var(--g2) 75%,#5a3b0c)}
.geo-lion.geo .geo-flag > img{position:relative;width:88px;height:105px;border-radius:0;box-shadow:none;margin-top:-1px}
.geo-lion.geo .geo-d-crown{width:78px;height:62px;left:50%;top:-56px;transform:translateX(-50%);animation:geo-crown 3.2s ease-in-out infinite}
.geo-lion.geo .geo-d-lion{width:84px;height:84px;top:8px}
.geo-lion.geo .geo-d-lion.l{left:-80px;animation:geo-roar 3.6s ease-in-out infinite}
.geo-lion.geo .geo-d-lion.r{right:-80px;transform:scaleX(-1);animation:geo-roar-r 3.6s ease-in-out infinite}
@keyframes geo-crown{50%{transform:translateX(-50%) translateY(-5px)}}
@keyframes geo-roar{50%{transform:rotate(-4deg) scale(1.05)}}
@keyframes geo-roar-r{50%{transform:scaleX(-1) rotate(-4deg) scale(1.05)}}

/* dragon: wings spread behind the flag; a blurred copy breathes light around it */
.geo-dragon.geo .geo-flag{width:220px;height:170px}
.geo-dragon.geo .geo-d-dragon{inset:0;animation:geo-breathe 3.4s ease-in-out infinite}
.geo-dragon.geo .geo-d-dragon.glow{filter:blur(10px);opacity:.55;animation:geo-dragon-glow 3.4s ease-in-out infinite}
.geo-dragon.geo .geo-flag > img{position:relative;z-index:1;width:78px;height:58px;margin-top:34px;box-shadow:0 0 0 2px #0009,0 8px 20px -4px #000c}
@keyframes geo-breathe{50%{transform:scale(1.045) translateY(-3px)}}
@keyframes geo-dragon-glow{50%{opacity:.9;transform:scale(1.08)}}

/* ---------- phones' forced dark mode (20.10.2026) ----------
   Samsung Internet / Chrome "darken websites" recolour every page that does not show it handles dark mode itself
   (on the owner's phone the gold turned brown and the flags changed colour). The <meta name="color-scheme"> in each
   _Layout plus this media rule tell them the site is already dark - keep its colours. Do not remove either. */
@media (prefers-color-scheme:dark){:root{color-scheme:dark}}

/* EXP / Master EXP / Drop on the home page (20.10.2026) - the VIP drop as a small line next to the normal one */
.vipdrop{display:inline-block;margin-left:8px;font-size:.55em;font-weight:600;letter-spacing:.04em;color:var(--accent);vertical-align:middle}
.stats .st-server{justify-content:center}
.stats .st-server .pill{margin-top:4px}

/* ---------- server status (20.10.2026, Home\_Status.cshtml, panel /admin/rates) ----------
   One of: sts-pulse / sts-led / sts-signal / sts-heart (+ the old .pill). .on = green, .off = red, always. */
.sts{--sc:#34d399;--sc2:#10b981;display:inline-flex;align-items:center;gap:10px;margin-top:4px}
.sts.off{--sc:#f87171;--sc2:#dc2626}
.sts em{font-style:normal;font-family:var(--f-mono);font-size:20px;white-space:nowrap;font-weight:600;letter-spacing:.06em;color:var(--sc);
  text-shadow:0 0 14px color-mix(in srgb,var(--sc) 55%,transparent)}
/* pulse: a dot with radar rings */
.sts-pulse .dot{position:relative;width:12px;height:12px;border-radius:50%;background:var(--sc);box-shadow:0 0 10px var(--sc)}
.sts-pulse .dot b{position:absolute;inset:0;border-radius:50%;border:2px solid var(--sc);animation:sts-ring 2s ease-out infinite}
.sts-pulse .dot b+b{animation-delay:1s}
.sts-pulse.off .dot b{animation:none;opacity:0}
@keyframes sts-ring{from{transform:scale(1);opacity:.9}to{transform:scale(3.2);opacity:0}}
/* led: a glass bulb */
.sts-led .bulb{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 12%,var(--sc) 40%,var(--sc2) 75%,#0008);
  box-shadow:0 0 0 2px #0007,0 0 14px 3px color-mix(in srgb,var(--sc) 70%,transparent),inset 0 -2px 4px #0006;animation:sts-glow 2.4s ease-in-out infinite}
.sts-led.off .bulb{animation:sts-blink 1.4s steps(1) infinite}
@keyframes sts-glow{50%{box-shadow:0 0 0 2px #0007,0 0 22px 6px color-mix(in srgb,var(--sc) 85%,transparent),inset 0 -2px 4px #0006}}
@keyframes sts-blink{50%{filter:brightness(.45);box-shadow:0 0 0 2px #0007}}
/* signal: phone-style bars */
.sts-signal .bars{display:inline-flex;align-items:flex-end;gap:3px;height:20px}
.sts-signal .bars b{width:5px;border-radius:2px;background:var(--sc);box-shadow:0 0 6px color-mix(in srgb,var(--sc) 60%,transparent);animation:sts-bar 1.8s ease-in-out infinite}
.sts-signal .bars b:nth-child(1){height:25%}
.sts-signal .bars b:nth-child(2){height:50%;animation-delay:.15s}
.sts-signal .bars b:nth-child(3){height:75%;animation-delay:.3s}
.sts-signal .bars b:nth-child(4){height:100%;animation-delay:.45s}
.sts-signal.off .bars b{animation:none;opacity:.25}
.sts-signal.off .bars b:nth-child(1){opacity:1}
@keyframes sts-bar{0%,100%{opacity:1}50%{opacity:.35}}
/* heartbeat: an ECG line drawn again and again (flat when offline) */
.sts-heart svg{width:52px;height:20px;overflow:visible;flex:none}
.sts-heart path{fill:none;stroke:var(--sc);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px var(--sc));
  stroke-dasharray:130;stroke-dashoffset:130;animation:sts-ekg 1.8s linear infinite}
.sts-heart.off path{stroke-dasharray:none;stroke-dashoffset:0;animation:none;opacity:.8}
@keyframes sts-ekg{60%{stroke-dashoffset:0}100%{stroke-dashoffset:-130}}
@media (prefers-reduced-motion:reduce){.sts *{animation:none!important}}

/* ---------- hero side column (20.10.2026, owner): the visitor's country on top, the countdown UNDER the flag ----------
   Home\Index.cshtml .hero-side. On a wide screen it sits in the hero's empty top-right corner; narrower = under the text.
   With the countdown the country card is drawn smaller (zoom) so both fit above the download cards. */
.hero-side{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin:6px 0 4px}
.hero-side:not(:has(*)){display:none}
.hero-side>.geo,.hero-side>.opening{margin:0}
.hero-side.with-cd>.geo{zoom:.72}
@media (min-width:1380px){
  .hero>.hero-side{position:absolute;top:36px;right:40px;margin:0;z-index:2;align-items:center;width:min(470px,42%)}
}

/* ---------- home chat (20.10.2026, Home\_WebChat.cshtml, js/webchat.js) ---------- */
.webchat-sec .sec-head{display:flex;align-items:center;gap:14px}
.wc-live{display:inline-flex;align-items:center;gap:7px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ok)}
.wc-live i{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;animation:pulse 2s infinite}
.wc{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.wc-tabs{display:flex;gap:4px;padding:8px 10px 0;border-bottom:1px solid var(--line);overflow-x:auto}
.wc-tabs button{padding:8px 14px;border:0;border-radius:8px 8px 0 0;background:none;color:var(--muted);font:inherit;font-weight:700;cursor:pointer}
.wc-tabs button[aria-selected="true"]{background:var(--bg-2);color:var(--fg);box-shadow:inset 0 -2px 0 var(--accent)}
.wc-list{height:340px;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:10px;background:var(--bg-2)}
.wc-row{display:flex;flex-direction:column;gap:2px;min-width:0}
.wc-head{display:flex;align-items:baseline;gap:10px}
.wc-head b{font-size:14px;color:var(--accent)}
.wc-head time{font-size:11px;color:var(--muted)}
.wc-row p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.45}
.wc-row img{max-width:min(260px,100%);max-height:200px;border-radius:8px;margin-top:4px;object-fit:contain;align-self:flex-start}
.wc-empty{margin:auto;color:var(--muted)}
.wc-foot{padding:12px 16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.wc-guest{margin:0;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted)}
.wc-send,.wc-name div{display:flex;gap:8px}
.wc-send .wc-in,.wc-name input{flex:1;min-width:0;min-height:42px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg-2);color:var(--fg);font:inherit}
.wc-name{display:flex;flex-direction:column;gap:6px}
.wc-name label{font-weight:700}
.wc-name small{color:var(--muted)}
.wc-state{margin:0;color:var(--muted)}
.wc-msg{margin:0;font-size:13px;color:var(--muted);min-height:1em}
.wc-msg.err{color:var(--bad)}
@media (max-width:560px){.wc-list{height:300px}}

/* ---------- character tools (20.10.2026, Account\Index.cshtml, js/charstats.js) ---------- */
.ctools{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,560px),1fr));gap:16px}
.ctool{display:flex;flex-direction:column;gap:16px;padding:20px;border-radius:16px;border:1px solid var(--line);background:var(--surface)}
.ct-hero{display:flex;gap:18px;align-items:center}
.ct-portrait{width:96px;height:96px;flex:none;border-radius:16px;object-fit:cover;background:var(--bg-2);border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));
  box-shadow:0 8px 24px -10px color-mix(in srgb,var(--accent) 60%,#000)}
.ct-id{display:flex;flex-direction:column;gap:6px;min-width:0}
.ct-id h3{margin:0;font-size:22px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ct-on{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 45%,transparent);border-radius:999px;padding:2px 8px}
.ct-chips{display:flex;flex-wrap:wrap;gap:8px}
.ct-chips span{display:flex;flex-direction:column;padding:6px 12px;border-radius:10px;background:var(--bg-2);border:1px solid var(--line);min-width:70px}
.ct-chips small{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ct-chips b{font-family:var(--f-mono);font-size:17px;font-variant-numeric:tabular-nums}
.ct-chips .ct-free{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.ct-chips .ct-free b{color:var(--accent)}
.ct-stats{display:flex;flex-direction:column;gap:12px}
.ct-table{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ct-row{display:grid;grid-template-columns:minmax(90px,1.1fr) minmax(90px,1fr) minmax(150px,1.3fr) minmax(70px,.8fr) minmax(90px,1fr);align-items:center;gap:10px;padding:10px 14px}
.ct-stats:not(:has(.ct-add)) .ct-row{grid-template-columns:minmax(90px,1fr) minmax(90px,1fr) minmax(90px,1fr)}
.ct-row+.ct-row{border-top:1px solid var(--line)}
.ct-th{background:var(--bg-2);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-block:8px}
.ct-name{font-weight:700}
.ct-now{display:flex;flex-direction:column;gap:4px}
.ct-now b,.ct-after,.ct-cap{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.ct-bar{display:block;height:4px;border-radius:2px;background:var(--bg-2);overflow:hidden}
.ct-bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#ff7a2f))}
.ct-bar .w0{width:0%}.ct-bar .w5{width:5%}.ct-bar .w10{width:10%}.ct-bar .w15{width:15%}.ct-bar .w20{width:20%}.ct-bar .w25{width:25%}.ct-bar .w30{width:30%}.ct-bar .w35{width:35%}.ct-bar .w40{width:40%}.ct-bar .w45{width:45%}.ct-bar .w50{width:50%}.ct-bar .w55{width:55%}.ct-bar .w60{width:60%}.ct-bar .w65{width:65%}.ct-bar .w70{width:70%}.ct-bar .w75{width:75%}.ct-bar .w80{width:80%}.ct-bar .w85{width:85%}.ct-bar .w90{width:90%}.ct-bar .w95{width:95%}.ct-bar .w100{width:100%}
.ct-add{display:flex;gap:6px}
.ct-add input{width:100%;min-width:0;min-height:38px;padding:0 10px;border-radius:9px;border:1px solid var(--line);background:var(--bg-2);color:var(--fg);font:inherit;font-family:var(--f-mono)}
.ct-max{flex:none;padding:0 10px;border-radius:9px;border:1px solid color-mix(in srgb,var(--accent) 50%,var(--line));background:none;color:var(--accent);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.ct-max:disabled,.ct-add input:disabled{opacity:.4;cursor:not-allowed}
.ct-cap{display:flex;flex-direction:column;color:var(--muted)}
.ct-cap small{font-family:inherit;font-size:11px;color:var(--ok)}
.ct-row.adding .ct-after{color:var(--ok);font-weight:700}
.ct-row.over{background:color-mix(in srgb,var(--bad) 10%,transparent)}
.ct-row.over .ct-after{color:var(--bad);font-weight:700}
.ct-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ct-left{margin:0;font-weight:700;color:var(--accent)}
.ct-left.err{color:var(--bad)}
@media (max-width:640px){
  .ct-row{grid-template-columns:1fr 1fr;row-gap:6px}
  .ct-th{display:none}
  .ct-name{grid-column:1/-1}
  .ct-add{grid-column:1/-1}
}

/* ---- support tickets (20.10.2026) - plain text: line breaks kept, long words broken, nothing is markup ---- */
.sup-list,.sup-new{display:flex;flex-direction:column;gap:12px}
.sup-new .card{max-width:760px}
.sup-st{display:inline-block;padding:2px 10px;border-radius:999px;font-size:13px;border:1px solid var(--line);white-space:nowrap}
.sup-st.st0{border-color:color-mix(in srgb,var(--accent) 60%,transparent);color:var(--accent)}
.sup-st.st1{border-color:color-mix(in srgb,var(--ok) 60%,transparent);color:var(--ok)}
.sup-st.st2{color:var(--muted)}
.sup-row.st1 td:first-child{box-shadow:inset 3px 0 0 var(--ok)}
.sup-thread{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;max-width:860px}
.sup-msg{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:14px 16px}
.sup-msg.staff{border-color:color-mix(in srgb,var(--accent) 55%,transparent);margin-left:min(8%,60px)}
.sup-msg.me{margin-right:min(8%,60px)}
.sup-who{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.sup-msg.staff .sup-who b{color:var(--accent)}
.sup-who time{color:var(--muted);font-size:13px}
.sup-body{white-space:pre-wrap;overflow-wrap:anywhere}
.sup-files{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.sup-files img{width:140px;height:100px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.sup-close{margin-top:-4px}
.card textarea,.card select{width:100%}
.field textarea{padding:12px 14px;border-radius:9px;border:1px solid var(--line);background:var(--bg-2);color:var(--fg);font:inherit;width:100%;resize:vertical;min-height:120px}
.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.field input[type=file]{min-height:0;padding:10px 12px}
/* the support pages as a tab of the APK's hub (20.10.2026, Views\Support\_Embed.cshtml) */
body.embed{min-height:100%}
.embed-main{max-width:900px;margin:0 auto;padding:16px 14px 40px;display:flex;flex-direction:column;gap:16px}
.embed .sup-msg.staff{margin-left:0}.embed .sup-msg.me{margin-right:0}
/* support: unread badges, the team's view (20.10.2026) */
@keyframes mxBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.92)}}
.blink{animation:mxBlink 1.1s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.blink{animation:none}}
.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;margin-left:8px;border-radius:999px;background:var(--bad);color:#fff;font:700 12px/1 var(--f-body)}
.sup-unread{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;background:var(--bad);color:#fff;font-size:12px;font-weight:700}   /* NOT .sup-new - that is the new-ticket section (20.10.2026: the badge painted the whole section red) */
.sup-staffbox{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:var(--surface);text-decoration:none}
.sup-staffbox.has{border-color:var(--bad)}.sup-staffbox.has span{color:var(--bad);font-weight:700}
.sup-tabs{display:flex;flex-wrap:wrap;gap:8px}
.sup-staff-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sup-staff-list a{display:grid;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);text-decoration:none}
.sup-staff-list span,.sup-staff-list time{color:var(--muted);font-size:13px}
.sup-staff-list .unread a{border-color:var(--bad)}.sup-staff-list .unread time{color:var(--bad);font-weight:700}
.sup-staff-list .high a{box-shadow:inset 3px 0 0 var(--bad)}
.sup-msg.note-int{border-style:dashed;border-color:color-mix(in srgb,var(--accent) 60%,transparent);background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.sup-chk{display:flex;gap:8px;align-items:center;margin:4px 0}
.sup-live{border-left-color:var(--ok)}
/* the full launcher chat on the home page for a signed-in player (20.10.2026) */
.wc-full{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#0f1115}
.wc-full iframe{display:block;width:100%;height:min(78vh,700px);min-height:460px;border:0}
body.chat-boot{display:flex;align-items:center;justify-content:center;min-height:100vh;color:var(--muted);background:#0f1115}