/* WA V2BASE 1110 — новый дизайн l2king: токены Claude Design + каркас. Собрано l2k_v2base.py, руками не править */
/* tokens/colors.css */
:root{
/* ── Base: cold graphite ladder (hue ≈ 215, never pure black, never brown) ── */
--bg-0:#0e1217;
--bg-1:#131920;
--bg-2:#19212a;
--bg-3:#202a35;
--bg-4:#28333f;
--line-1:rgba(255,255,255,.06);
--line-2:rgba(255,255,255,.10);
--line-3:rgba(255,255,255,.16);
/* ── Ink ── */
--ink-1:#f2f4f7;
--ink-2:#c3cbd6;
--ink-3:#8b96a5;
--ink-4:#5c6775;
--ink-inverse:#14110a;
/* ── Gold (brand, "King") ── */
--gold-1:#f5c250;
--gold:#e8a020;
--gold-2:#c08018;
--gold-3:#8a5c10;
--gold-a08:rgba(232,160,32,.08);
--gold-a14:rgba(232,160,32,.14);
--gold-a24:rgba(232,160,32,.24);
--gold-a45:rgba(232,160,32,.45);
--gold-glow:0 0 0 1px rgba(232,160,32,.45),0 0 18px rgba(232,160,32,.22);
/* ── Cold blue: ONLY for "opens today / open now" ── */
--live:#5cc8ff;
--live-1:#9adcff;
--live-a12:rgba(92,200,255,.12);
--live-a30:rgba(92,200,255,.30);
/* ── Semantic ── */
--ok:#4cc38a;--ok-a12:rgba(76,195,138,.12);
--warn:#f0b040;--warn-a12:rgba(240,176,64,.12);
--err:#ef5a5a;--err-a12:rgba(239,90,90,.12);
/* ── Paid tiers ── */
--tier-elite:#f5c250;--tier-elite-bg:linear-gradient(90deg,rgba(232,160,32,.42) 0%,rgba(232,160,32,.16) 40%,rgba(232,160,32,.03) 100%);--tier-elite-ring:rgba(232,160,32,.45);
/* Medal ladder: gold > silver > bronze > sapphire. Plaques are FILLED (chronicle / rate labels are outlined tints, so they never clash). */
--tier-top:#dfe7f1;--tier-top-bar:#b9c7d8;--tier-top-bg:linear-gradient(90deg,rgba(185,199,216,.20) 0%,rgba(185,199,216,.08) 45%,rgba(185,199,216,.02) 100%);--tier-top-plaque:linear-gradient(180deg,#eef3f8,#a9b8ca);/* @kind color */--tier-top-ink:#1a2230;
--tier-vipelite:#d9916a;--tier-vipelite-plaque:linear-gradient(180deg,#d8946c,#95552f);/* @kind color */--tier-vipelite-ink:#fff3e8;
--tier-vip:#9cc2f0;--tier-vip-plaque:linear-gradient(180deg,#3f80e6,#1e4cae);/* @kind color */--tier-vip-ink:#eef5ff;
--new:#ef5a5a;
/* ── Chronicle labels (muted jewel, each distinct) ── */
--chr-interlude:#3fb6a8;
--chr-interlude-plus:#2fa17d;
--chr-high-five:#9b86e0;
--chr-essence:#e06c92;
--chr-classic:#6aa3e0;
--chr-c4:#a7b64f;
--chr-god:#c56bd0;
--chr-epilogue:#e09a4a;
--chr-gracia-final:#58b4cf;
--chr-freya:#7fcbe8;
--chr-c6:#d2a04a;
--chr-other:#8b96a5;/* WA CHRCOL 2010 */--chr-c3:#d98c5f;--chr-c5:#c9b458;--chr-g-crusade:#e06c75;--chr-salvation:#7fd1b9;--chr-lindvior:#8fa8ff;--chr-ertheia:#c38bff;--chr-odyssey:#5ac8e0;--chr-helios:#ffc857;--chr-orfen:#ff8fab;--chr-fafurion:#4fb3bf;--chr-homuncul:#a3d977;--chr-custom:#c7a77a;
/* ── Rate tiers (chip tint) ── */
--rate-low:#78c88a;--rate-mid:#f0a030;--rate-high:#e86a4a;--rate-mega:#d84848;
/* ── Semantic aliases ── */
--surface-page:var(--bg-0);
--surface-panel:var(--bg-1);
--surface-card:var(--bg-2);
--surface-raised:var(--bg-3);
--surface-hover:var(--bg-4);
--surface-input:rgba(0,0,0,.28);
--text-body:var(--ink-2);
--text-heading:var(--ink-1);
--text-muted:var(--ink-3);
--text-faint:var(--ink-4);
--text-link:var(--gold-1);
--text-link-hover:#ffd978;
--border-default:var(--line-2);
--border-subtle:var(--line-1);
--border-strong:var(--line-3);
--border-focus:var(--gold);
--shadow-card:0 1px 0 rgba(255,255,255,.03) inset,0 8px 24px rgba(0,0,0,.35);
--shadow-pop:0 12px 32px rgba(0,0,0,.55);
}
/* tokens/typography.css */
:root{
--font-body:"Exo 2","Segoe UI",system-ui,sans-serif;
--font-display:"Unbounded","Exo 2",sans-serif;   /* ONLY big numbers (countdown, stats) and short block titles — never page H1/H2 */
--font-logo:"Cinzel",Georgia,serif;              /* wordmark + Latin accents ONLY (no Cyrillic) */
--font-mono:"JetBrains Mono",ui-monospace,monospace;
--fs-12:12px;/* minimum text size on the site — nothing below 12px */--fs-13:13px;--fs-14:14px;--fs-15:15px;--fs-16:16px;--fs-18:18px;--fs-20:20px;--fs-24:24px;--fs-28:28px;--fs-34:34px;--fs-44:44px;--fs-56:56px;
--lh-tight:1.15;/* @kind other */--lh-snug:1.3;/* @kind other */--lh-body:1.6;/* @kind other */--lh-relaxed:1.8;/* @kind other */
--ls-caps:.08em;/* @kind other */--ls-wide:.14em;/* @kind other */
/* roles */
--type-h1:700 var(--fs-28)/var(--lh-snug) var(--font-body);      /* page H1 — Exo 2, long RU/UA strings */
--type-h2:700 var(--fs-20)/var(--lh-snug) var(--font-body);      /* page H2 / SEO heading */
--type-h3:700 var(--fs-16)/var(--lh-snug) var(--font-body);      /* form section / card titles */
--type-block:600 var(--fs-13)/1 var(--font-display);            /* short block headers: «Скоро откроются», «Подбор сервера» */
--type-section:700 var(--fs-12)/1 var(--font-body);       /* uppercase + --ls-wide */
--type-body:400 var(--fs-14)/var(--lh-body) var(--font-body);
--type-body-lg:400 var(--fs-15)/var(--lh-relaxed) var(--font-body);
--type-row:600 var(--fs-13)/1.2 var(--font-body);
--type-caption:500 var(--fs-12)/1.3 var(--font-body);
--type-stat:700 var(--fs-28)/1 var(--font-display);
--type-countdown:700 var(--fs-44)/1 var(--font-display);
--type-code:400 var(--fs-13)/1.6 var(--font-mono);
}
/* tokens/spacing.css */
:root{
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;
--r-1:4px;--r-2:6px;--r-3:8px;--r-4:10px;--r-5:14px;--r-pill:999px;
--radius-chip:var(--r-2);--radius-control:var(--r-3);--radius-card:var(--r-4);--radius-panel:var(--r-5);
--h-control-sm:32px;--h-control:40px;--h-control-lg:48px;--h-row:44px;--h-header:64px;
--w-page:1360px;--w-content-safe:1360px;--w-branding-img:1920px;--h-branding-img:1200px;--w-sidebar:300px;--w-banner-side:300px;--h-banner-side:600px;
--w-mobile:390px;
--z-sticky:100;/* @kind other */--z-sheet:300;/* @kind other */--z-pop:400;/* @kind other */
}
/* tokens/motion.css */
:root{
--ease-out:cubic-bezier(.2,.7,.2,1);/* @kind other */--ease-in-out:cubic-bezier(.65,0,.35,1);/* @kind other */
--dur-fast:120ms;/* @kind other */--dur:180ms;/* @kind other */--dur-slow:320ms;/* @kind other */
--lift:translateY(-2px);/* @kind other */
}
/* Only transform + opacity animate. No width/height/box-shadow on large blocks. */
@keyframes l2k-fade-up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes l2k-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.85)}}
@keyframes l2k-ember{0%{transform:translate3d(0,0,0) scale(1);opacity:0}10%{opacity:.9}100%{transform:translate3d(var(--dx,20px),-140px,0) scale(.3);opacity:0}}
@keyframes l2k-shine{0%{transform:translateX(-110%);opacity:0}8%{opacity:1}42%{transform:translateX(420%);opacity:1}43%{opacity:0}100%{transform:translateX(420%);opacity:0}}
@keyframes l2k-tick{0%{opacity:1}50%{opacity:.35}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* tokens/base.css */
/* Minimal base so consumers inherit the dark theme. Components style themselves via tokens. */
html{color-scheme:dark}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:var(--text-link);text-decoration:none}a:hover{color:var(--text-link-hover)}
h1,h2,h3{margin:0;color:var(--text-heading)}h1{font:var(--type-h1)}h2{font:var(--type-h2)}h3{font:var(--type-h3)}
.l2k-wordmark{font-family:var(--font-logo);font-weight:700;letter-spacing:.12em;color:var(--gold);text-transform:uppercase}
.l2k-section{font:var(--type-section);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-muted)}
::selection{background:var(--gold-a45);color:#fff}

/* ═══ каркас нового дизайна — WA V2BASE 1110 ═══ */
.k-v2{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);overflow-x:hidden}
.k-v2 *,.k-v2 *::before,.k-v2 *::after{box-sizing:border-box}
.k-v2 a:focus-visible,.k-v2 button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ki{display:inline-block;flex-shrink:0;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.k-wrap{width:100%;max-width:var(--w-page);margin:0 auto;padding:0 32px}
.k-page{position:relative;min-height:100vh;display:flex;flex-direction:column}
.k-main{position:relative;z-index:1;flex:1 0 auto;width:100%}

/* шапка ПК */
.k-hdr{position:sticky;top:0;z-index:var(--z-sticky);margin:0;padding:0;background:rgba(19,25,32,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--border-default)}
.k-hdr-in{height:var(--h-header);display:flex;align-items:center;gap:28px}
.k-logo{display:flex;align-items:center;gap:10px;flex-shrink:0;text-decoration:none}
.k-logo img{display:block;width:auto}
.k-logo .l2k-wordmark{font-size:18px;line-height:1;white-space:nowrap}
.k-logo .l2k-wordmark span{color:var(--text-muted)}
.k-nav{display:flex;gap:4px}
.k-nav a{padding:8px 12px;border-radius:var(--radius-chip);font:600 13px/1 var(--font-body);color:var(--text-body);text-decoration:none;transition:background var(--dur),color var(--dur)}
.k-nav a:hover{color:var(--gold-1);background:var(--surface-raised)}
.k-nav a[aria-current]{color:var(--gold-1);background:var(--gold-a08)}
.k-hdr-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.k-lang{display:flex;height:32px;background:var(--surface-raised);border:1px solid var(--border-default);border-radius:var(--radius-chip);overflow:hidden}
.k-lang a{display:grid;place-items:center;width:36px;font:700 12px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);text-decoration:none}
.k-lang a:hover{color:var(--ink-1)}
.k-lang a[aria-current]{color:var(--gold-1);background:var(--gold-a14)}

/* кнопки */
.k-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--h-control);padding:0 18px;border-radius:var(--radius-control);border:1px solid transparent;font:700 13px/1 var(--font-body);letter-spacing:.02em;text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;transition:transform var(--dur-fast) var(--ease-out),background var(--dur) var(--ease-out),color var(--dur),box-shadow var(--dur)}
.k-btn:active{transform:scale(.98)}
.k-btn-sm{height:var(--h-control-sm);padding:0 12px;font-size:12px}
.k-btn-lg{height:var(--h-control-lg);padding:0 24px;font-size:15px}
.k-btn-full{display:flex;width:100%}
.k-btn-primary{background:linear-gradient(180deg,var(--gold-1),var(--gold));color:var(--ink-inverse);border-color:rgba(255,215,120,.5)}
.k-btn-primary:hover{background:linear-gradient(180deg,#ffd470,var(--gold-1));color:var(--ink-inverse);box-shadow:0 0 18px rgba(232,160,32,.35)}
.k-btn-secondary{background:var(--gold-a08);color:var(--gold-1);border-color:var(--gold-a45)}
.k-btn-secondary:hover{background:var(--gold-a14);color:var(--gold-1)}
.k-btn-outline{background:transparent;color:var(--text-body);border-color:var(--border-strong)}
.k-btn-outline:hover{background:var(--surface-raised);color:var(--ink-1)}
.k-btn-ghost{background:transparent;color:var(--text-body)}
.k-btn-ghost:hover{background:var(--surface-raised);color:var(--ink-1)}

/* H1 и крошки */
.k-title{margin:24px 0 20px}
.k-title h1{font:var(--type-h1);color:var(--text-heading);margin:0 0 8px;letter-spacing:0;text-transform:none;text-wrap:balance}
.k-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font:var(--type-caption);color:var(--text-muted)}
.k-crumbs a{color:var(--text-muted);text-decoration:none}
.k-crumbs a:hover{color:var(--gold-1)}
.k-crumbs .ki{color:var(--text-faint)}
.k-crumbs span{color:var(--text-body)}

/* брендирование: картинка 1920×1200 по центру в натуральную величину, края — её цвет; блок контента наезжает на низ видимых 480 px */
.k-brand{position:absolute;top:var(--h-header);left:0;right:0;height:var(--h-branding-img);z-index:0;display:block;overflow:hidden;background-color:var(--k-brand-bg,#0e1217);background-image:var(--k-brand-img);background-repeat:no-repeat;background-position:center top}
.k-brand::after{content:"";position:absolute;left:0;right:0;top:480px;bottom:0;background:linear-gradient(180deg,rgba(14,18,23,0) 0,var(--surface-page) 520px);pointer-events:none}
.k-brand-tag{position:absolute;top:10px;right:16px;font:600 12px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.k-has-brand .k-main{max-width:var(--w-page);margin:360px auto 0;background:var(--surface-page);border-radius:var(--radius-panel) var(--radius-panel) 0 0;box-shadow:0 -16px 48px rgba(0,0,0,.5)}

/* боковой баннер 3:5 */
.k-ad-side{display:block;width:100%;aspect-ratio:3/5;border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--border-default)}
.k-ad-side img{display:block;width:100%;height:100%;object-fit:cover}

/* футер */
.k-foot{position:relative;z-index:1;flex-shrink:0;margin-top:40px;border-top:1px solid var(--border-default);background:var(--surface-panel)}
.k-foot-in{padding-top:32px;padding-bottom:20px}
.k-foot-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:32px;padding-bottom:28px}
.k-foot-brand{display:grid;gap:12px;align-content:start}
.k-foot-brand .k-logo .l2k-wordmark{font-size:16px}
.k-foot-brand p{margin:0;max-width:280px;font:var(--type-caption);color:var(--text-muted)}
.k-tg{display:inline-flex;align-items:center;gap:8px;width:fit-content;height:34px;padding:0 14px;border-radius:var(--r-2);background:var(--surface-raised);border:1px solid var(--border-default);color:var(--ink-1);font:600 12px/1 var(--font-body);text-decoration:none}
.k-tg:hover{border-color:var(--border-strong);color:var(--ink-1)}
.k-foot summary{display:flex;align-items:center;list-style:none;margin-bottom:10px;font:700 12px/1 var(--font-body);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-body);cursor:pointer}
.k-foot summary::-webkit-details-marker{display:none}
.k-foot summary .ki{display:none;margin-left:auto;color:var(--text-faint);transition:transform var(--dur)}
.k-foot nav a{display:block;padding:5px 0;font:500 13px/1.3 var(--font-body);color:var(--text-muted);text-decoration:none;transition:color var(--dur)}
.k-foot nav a:hover{color:var(--gold-1)}
.k-foot-bot{display:flex;align-items:center;flex-wrap:wrap;gap:16px;padding-top:16px;border-top:1px solid var(--border-subtle);font:var(--type-caption);color:var(--text-muted)}
.k-foot-bot a{color:var(--text-muted)}
.k-foot-bot a:hover{color:var(--gold-1)}
.k-cnt{margin-left:auto;display:flex;gap:12px;font:500 12px/1 var(--font-body);font-variant-numeric:tabular-nums;color:var(--text-faint);text-transform:lowercase}
.k-cnt span:empty{display:none}
@media (min-width:1000px){.k-foot summary{pointer-events:none}}

/* телефон: без рекламы, своя шапка, меню-шторка, футер-аккордеон */
.k-mhdr,.k-menu{display:none}
@media (max-width:999px){
  .k-hdr,.k-brand,.k-ad-side{display:none}
  .k-has-brand .k-main{margin:0;max-width:none;border-radius:0;box-shadow:none}
  .k-wrap{padding:0 16px}
  .k-mhdr{display:block;position:sticky;top:0;z-index:var(--z-sticky);background:rgba(19,25,32,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--border-default)}
  .k-mhdr-in{height:56px;display:flex;align-items:center;gap:10px;padding:0 16px}
  .k-mhdr-r{margin-left:auto;display:flex;align-items:center;gap:8px}
  .k-burger{width:40px;height:40px;display:grid;place-items:center;padding:0;border-radius:var(--radius-control);border:1px solid var(--border-default);background:var(--surface-raised);color:var(--ink-1);cursor:pointer}
  .k-burger[aria-expanded="true"]{color:var(--gold-1);border-color:var(--gold-a45)}
  .k-menu.open{display:block;position:fixed;top:56px;left:0;right:0;bottom:0;z-index:var(--z-sheet);padding:16px;overflow-y:auto;background:rgba(14,18,23,.97);animation:l2k-fade-up var(--dur) var(--ease-out)}
  .k-mi{display:flex;align-items:center;gap:12px;min-height:48px;margin-bottom:8px;padding:0 14px;border-radius:var(--radius-control);background:var(--surface-card);border:1px solid var(--border-default);color:var(--ink-1);font:600 15px/1 var(--font-body);text-decoration:none}
  .k-mi .ki{color:var(--gold)}
  .k-menu .k-btn{margin-top:8px}
  .k-title{margin:16px 0 14px}
  .k-title h1{font-size:22px}
  .k-foot{margin-top:32px}
  .k-foot-in{padding-top:20px;padding-bottom:16px}
  .k-foot-grid{grid-template-columns:1fr;gap:0;padding-bottom:16px}
  .k-foot-brand{padding-bottom:16px;border-bottom:1px solid var(--border-subtle)}
  .k-foot details{border-bottom:1px solid var(--border-subtle)}
  .k-foot summary{min-height:48px;margin:0}
  .k-foot summary .ki{display:inline-block}
  .k-foot details[open] summary{color:var(--gold-1)}
  .k-foot details[open] summary .ki{transform:rotate(180deg)}
  .k-foot nav{padding-bottom:8px}
  .k-foot nav a{display:flex;align-items:center;min-height:44px;padding:0;font-size:14px}
  .k-cnt{margin-left:0;width:100%}
}

/* legacy: правила старого лэйаута для ещё не перенесённых страниц — удалить после переноса всех страниц */
.k-v2{--gold-l:#f5c250;--gold-d:#c08018;--bg:var(--bg-0);--bg-p:var(--bg-1);--bdr:var(--line-2);--bdr-s:var(--gold-a24);--v1:var(--ink-1);--v2:#f0a030;--v3:var(--ink-2);--v4:var(--ink-3);--vm:var(--ink-4)}
/* ── WRAP ── */
.wrap { position: relative; z-index: 1; }


.top-banners { background: rgba(10,8,4,0.6) !important; border-bottom: 1px solid var(--bdr) !important; }
.panel { display: none !important; }
.lang-switcher-mobile { display: none !important; }
body .table-div.table-mod { font-size: 12px; font-weight: 500; color: #d4b878; }
body .table-div.table-date { font-size: 11px; font-weight: 500; color: #7a8878; }

@media (max-width: 1000px) {
  .mob-breadcrumb { display: flex !important; }
}

@media (max-width: 900px) {
  .hero-title { font-size: 36px; letter-spacing: 3px; }
  .hero-banner { height: 160px; }
  .header-inner { padding: 0 16px; height: 58px; }
  .header-logo-img { width: 80px; height: 44px; }
  .header-h1 h1 { font-size: 13px; letter-spacing: 1px; }
  .header-h1-sub { display: none; }
  .header-divider { margin: 0 12px; }
  .btn-profile-nav, .btn-add-nav { padding: 6px 12px; font-size: 11px; }
}

@media (max-width: 1000px) {
  .header { display: none; }
  .hero-banner { display: none; }
  .mob-header { display: block; }
  .side { flex-direction: column; }
  .side-left, .side-right { width: 100%; }
  .side-right { display: none; }
  .main { flex-direction: column; }
  .ml, .mr { width: 100%; }
}

@media (max-width: 768px) {
  .footer-container { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 20px !important; }
  .footer-left, .footer-social { width: 100% !important; min-width: auto !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; }
}