/* ============================================================================
   ASTON-WOW — landing stylesheet
   Dark premium Warcraft-flavoured key art: near-black, platinum hairlines,
   Alliance blue / Horde red accents, cinematic light.
   ========================================================================= */

/* ---------- tokens ------------------------------------------------------- */
:root {
  --ink: #0b0705;
  --ink-2: #120b08;
  --ink-3: #1a100c;
  --ink-4: #241611;

  /* yellow-orange: warm metal, the headline running from yellow into orange */
  --accent: #ffc043;
  --accent-hi: #fffbe8;
  --accent-mid: #ffa515;
  --accent-deep: #ef6a00;
  --accent-line: rgba(255, 170, 60, 0.24);
  --accent-line-strong: rgba(255, 180, 70, 0.55);
  --accent-soft: rgba(255, 170, 60, 0.16);

  --flame: #ff9f1f;
  --flame-hi: #ffe066;
  --flame-deep: #d96a00;

  --blue: #4d8ee0;
  --blue-deep: #1b3d78;
  /* Horde red is deepened on purpose: the accent is yellow-orange (hue ~36deg) and
     the faction has to stay a distinguishable red (hue ~5deg) in the leaderboard */
  --red: #b52a1c;
  --red-deep: #6d160c;

  /* form validation states (login / registration) */
  --danger: #ff7b6b;
  --ok: #6fd39a;

  --text: #fbf3ee;
  --text-2: #d9c8be;
  --muted: #a08d84;
  --muted-2: #786861;

  --font-display: 'Forum', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --font-ui: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --gutter: clamp(16px, 4vw, 40px);
  --shell: 1280px;
  --section-y: clamp(60px, 7.5vw, 116px);
  --radius: 4px;
  --radius-lg: 6px;

  --lift: 0 26px 60px -24px rgba(0, 0, 0, 0.9);
  --glow-accent: 0 0 0 1px rgba(255, 180, 70, 0.42), 0 18px 46px -18px rgba(255, 150, 45, 0.42);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.45s;
}

/* ---------- reset ------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
}

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img,
svg,
picture { display: block; max-width: 100%; }

img { height: auto; }

a { color: inherit; text-decoration: none; }

button,
input { font: inherit; color: inherit; }

button {
  background: none;
  border: 0;
  cursor: pointer;
}

ul, ol { list-style: none; padding: 0; }

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

::selection {
  background: rgba(255, 170, 60, 0.28);
  color: #fff;
}

/* scrollbar */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 170, 60, 0.28) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #0b0705; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 170, 60, 0.42), rgba(176, 92, 10, 0.42));
  border: 3px solid #0b0705;
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 170, 60, 0.62); }

/* ---------- utilities ---------------------------------------------------- */
.shell {
  width: min(var(--shell), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

.section { padding-block: var(--section-y); position: relative; }

/* ---------- sections with generated art --------------------------------- */
/* "Выбери сторону", "Последние новости" and "Игровой магазин" used to sit on flat
   ink next to the art-backed CTA. Each carries its own generated key art, dimmed by
   the same recipe the CTA uses: ink at top and bottom, a soft vignette, a warm wash.
   isolation keeps the negative z-index inside the section. */
.sec-art { isolation: isolate; overflow: hidden; }
.sec-art__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: saturate(1.24) brightness(1);
}
.sec-art::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, var(--ink) 0%, rgba(11, 7, 5, 0.34) 17%, rgba(11, 7, 5, 0.6) 50%, rgba(11, 7, 5, 0.42) 82%, var(--ink) 100%),
    radial-gradient(86% 84% at 50% 52%, rgba(11, 7, 5, 0.5), rgba(11, 7, 5, 0.12) 62%, transparent 86%),
    radial-gradient(70% 70% at 50% 60%, rgba(255, 150, 45, 0.14), transparent 72%);
}
/* the news rail is a plain grid, not a .shell, so it needs its own stacking context */
.sec-art .news__grid { position: relative; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 20px;
  background: var(--accent-mid);
  color: #120e04;
  font-weight: 700;
}
.skip:focus { left: 12px; top: 12px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* molten metal text */
.accent {
  background-image: linear-gradient(
    172deg,
    #fffbe8 0%,
    #ffe066 20%,
    #ffa515 44%,
    #ef6a00 66%,
    #ffb63c 84%,
    #fff6dc 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 12px 34px rgba(255, 150, 45, 0.22));
}

/* section heading with flanking filigree */
.eyebrow {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent-mid);
}

.h-sec {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 3.4vw, 44px);
}

.sec-head__title { display: flex; flex-direction: column; gap: 10px; }

.rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-line-strong) 18%, var(--accent-line-strong) 82%, transparent);
}

/* thin platinum hairline that fades at both ends */
.hairline::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-line-strong), transparent);
  opacity: 0.9;
}

/* panels */
.panel {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius);
  overflow: hidden;
}

.panel--glass {
  background:
    linear-gradient(180deg, rgba(19, 23, 36, 0.86), rgba(9, 11, 18, 0.9));
  backdrop-filter: blur(10px);
}

/* ---------- buttons ------------------------------------------------------ */
.btn {
  --btn-h: 52px;
  position: relative;
  /* clips the metal shine sweep, which rests at translateX(-130%) */
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: var(--btn-h);
  padding: 0 clamp(20px, 2.4vw, 30px);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.btn__lines {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.15;
  text-align: left;
}

.btn__sub {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  opacity: 0.72;
}

/* primary — smouldering embers: near-black body lit from below by an orange glow,
   so the button reads as heat rather than polished metal */
.btn--accent {
  color: #ffd782;
  background:
    radial-gradient(120% 140% at 50% 120%, rgba(255, 120, 20, 0.55), transparent 62%),
    linear-gradient(180deg, #2a1206 0%, #160a04 100%);
  border: 1px solid rgba(255, 140, 40, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(255, 180, 70, 0.18),
    inset 0 -6px 16px -6px rgba(255, 110, 20, 0.85),
    0 14px 34px -14px rgba(255, 90, 20, 0.7);
}
.btn--accent .btn__sub { color: #ff9a3d; opacity: 0.9; }

.btn--accent::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 180, 80, 0.35) 48%, transparent 62%);
  transform: translateX(-130%);
  transition: transform 0.85s var(--ease);
}
.btn--accent:hover::after { transform: translateX(130%); }

.btn--accent:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 170, 60, 0.85);
  box-shadow:
    inset 0 0 0 1px rgba(255, 190, 90, 0.28),
    inset 0 -6px 18px -6px rgba(255, 130, 30, 1),
    0 22px 52px -16px rgba(255, 90, 20, 0.95);
}

/* ghost — secondary action. The frame is permanent now, faintly warm on its own, and
   lights up with a flare plus a sheen sweep on hover. The sweep needs the same
   overflow:hidden the primary button uses; it has no ::after of its own, so the
   pseudo-element is free here. */
.btn--ghost {
  overflow: hidden;
  color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--accent-line);
  box-shadow:
    inset 0 0 0 1px rgba(255, 180, 70, 0.08),
    0 10px 26px -20px rgba(255, 120, 30, 0.55);
  backdrop-filter: blur(6px);
}

.btn--ghost::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 22%, rgba(255, 180, 80, 0.28) 48%, transparent 64%);
  transform: translateX(-130%);
  transition: transform 0.85s var(--ease);
}

.btn--ghost:hover {
  transform: translateY(-2px);
  border-color: var(--accent-line-strong);
  color: var(--accent-hi);
  box-shadow:
    inset 0 0 0 1px rgba(255, 190, 90, 0.22),
    0 18px 40px -18px rgba(255, 110, 30, 0.6);
}

/* the horizontal sheen comes from the right on hover, the way the fill crosses */
.btn--ghost:hover::after { transform: translateX(130%); }

/* arrow-led ghosts sit their icon first: send the sheen through in that direction */
.btn--ghost:has(> svg:first-child)::after {
  background: linear-gradient(260deg, transparent 22%, rgba(255, 180, 80, 0.28) 48%, transparent 64%);
}

/* small link button */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid var(--accent-line);
  border-radius: 99px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(255, 170, 60, 0.05);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.link-more:hover {
  background: rgba(255, 170, 60, 0.13);
  border-color: var(--accent-line-strong);
  gap: 14px;
}
.link-more svg { flex: none; }

/* ---------- decorative overlays ----------------------------------------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.2;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 40%, transparent 48%, rgba(0, 0, 0, 0.4) 100%);
}

/* scroll progress */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 80;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent-hi), var(--accent-mid));
  box-shadow: 0 0 14px rgba(255, 170, 60, 0.7);
}

/* ---------- header ------------------------------------------------------- */
.head {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 70;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
    backdrop-filter var(--dur) var(--ease), padding var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}

.head::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-line-strong), transparent);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.head.is-stuck {
  background: rgba(11, 7, 5, 0.82);
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.head.is-stuck::after { opacity: 1; }

.head__inner {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  min-height: 88px;
  transition: min-height var(--dur) var(--ease);
}
.head.is-stuck .head__inner { min-height: 72px; }

/* brand lockup is a wide raster (386x200, 1.93:1): width is derived from height so
   the dragons and the banner never squash */
.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand__logo {
  height: clamp(44px, 4.4vw, 68px);
  width: auto;
  flex: none;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(255, 150, 45, 0.4));
}
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.16rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.brand__tag {
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(2px, 1.1vw, 14px); }
.nav__link {
  position: relative;
  display: block;
  padding: 10px 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-2);
  transition: color var(--dur) var(--ease);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 4px; right: 4px; bottom: 2px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover { color: var(--accent-hi); }
.nav__link:hover::after,
.nav__link[aria-current='true']::after { transform: scaleX(1); }
.nav__link[aria-current='true'] { color: var(--accent); }

/* "ОНЛАЙН/СТАТУС" wears the primary button's frame — dark body lit from below by
   an orange glow — plus a pulsing dot that reads as a live server */
.nav__link--live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 11px;
  color: #ffd782;
  border: 1px solid rgba(255, 140, 40, 0.55);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 140% at 50% 130%, rgba(255, 120, 20, 0.42), transparent 62%),
    linear-gradient(180deg, #2a1206 0%, #160a04 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 180, 70, 0.16),
    inset 0 -5px 14px -6px rgba(255, 110, 20, 0.72),
    0 10px 26px -16px rgba(255, 90, 20, 0.7);
}
/* the pill replaces the underline, which would cut through the frame */
.nav__link--live::after { content: none; }
.nav__link--live:hover,
.nav__link--live[aria-current='true'] {
  color: var(--accent-hi);
  border-color: rgba(255, 170, 60, 0.85);
}

.live-dot {
  position: relative;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--flame);
  box-shadow: 0 0 9px 1px rgba(255, 150, 40, 0.85);
}
.live-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--flame);
  animation: live-ping 1.9s var(--ease) infinite;
}
@keyframes live-ping {
  0% { transform: scale(1); opacity: 0.65; }
  75%, 100% { transform: scale(3); opacity: 0; }
}

.head__actions { display: flex; align-items: center; gap: 10px; flex: none; }
.head__actions .btn { --btn-h: 40px; font-size: 0.7rem; padding-inline: 20px; }

.burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  align-items: center;
  justify-content: center;
}
.burger span {
  position: relative;
  display: block;
  width: 18px; height: 1.5px;
  background: var(--text);
  transition: transform var(--dur) var(--ease), opacity 0.2s linear;
}
.burger span::before,
.burger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px; height: 1.5px;
  background: var(--text);
  transition: transform var(--dur) var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger[aria-expanded='true'] span { transform: rotate(45deg); }
.burger[aria-expanded='true'] span::before { transform: translateY(6px) rotate(-90deg); }
.burger[aria-expanded='true'] span::after { opacity: 0; }

.drawer {
  position: fixed;
  inset: 0;
  z-index: 65;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 92px var(--gutter) 32px;
  background: rgba(11, 7, 5, 0.97);
  backdrop-filter: blur(14px);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.drawer__link:hover { color: var(--accent); }
.drawer .btn { margin-top: 22px; width: 100%; }

/* ---------- hero --------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(96vh, 900px);
  display: flex;
  align-items: center;
  padding-top: 132px;
  padding-bottom: 56px;
  isolation: isolate;
  overflow: hidden;
}

/* The art is 16:9 and the hero is taller, so `object-fit: cover` already trims the
   sides. Do NOT oversize this element on top of that: the extra 4% of height used to
   trim the top and bottom as well, which cut the champions' heads off. The parallax
   only ever moves the art downwards, and the gap that opens sits in the hero's top
   strip — already scrolled off-screen by the time the offset is non-zero. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: saturate(1.2) contrast(1.02) brightness(1.02);
  will-change: transform;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(11, 7, 5, 0.78) 0%, rgba(11, 7, 5, 0.08) 24%, rgba(11, 7, 5, 0.1) 54%, var(--ink) 99%),
    radial-gradient(92% 66% at 50% 48%, rgba(11, 7, 5, 0.14) 0%, rgba(11, 7, 5, 0.42) 82%),
    radial-gradient(60% 40% at 50% 100%, rgba(255, 150, 45, 0.16), transparent 70%);
}

.hero__embers {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.ember {
  position: absolute;
  bottom: -12px;
  width: var(--s, 3px);
  height: var(--s, 3px);
  border-radius: 50%;
  background: radial-gradient(circle, #fffbe8 0%, #ffa515 45%, rgba(255, 165, 21, 0) 72%);
  opacity: 0;
  animation: ember-rise var(--dur-ember, 9s) linear var(--delay, 0s) infinite;
  filter: blur(0.4px);
}

@keyframes ember-rise {
  0% { transform: translate3d(0, 0, 0) scale(0.7); opacity: 0; }
  12% { opacity: var(--o, 0.7); }
  70% { opacity: var(--o, 0.7); }
  100% { transform: translate3d(var(--dx, 20px), -84vh, 0) scale(1.15); opacity: 0; }
}

.hero__inner { position: relative; text-align: center; display: grid; justify-items: center; }

/* soft dark halo so the headline stays legible while the key art reads bright */
.hero__inner::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -8% -6% -6%;
  background: radial-gradient(56% 50% at 50% 44%, rgba(11, 7, 5, 0.46), rgba(11, 7, 5, 0.18) 60%, transparent 80%);
  pointer-events: none;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 20px;
  border: 1px solid var(--accent-line);
  border-radius: 99px;
  background: rgba(18, 11, 8, 0.6);
  backdrop-filter: blur(6px);
  margin-bottom: clamp(20px, 2.6vw, 32px);
}
.hero__eyebrow b {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
}
.hero__eyebrow span {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
}
.hero__eyebrow i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent-mid); }

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.05rem, 9vw, 6.6rem);
  line-height: 0.98;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero__title span { display: block; }
.hero__title .l1 { font-size: 0.52em; letter-spacing: 0.2em; color: var(--text); }
.hero__title .l2 { margin-top: 0.06em; }

.hero__orn {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: clamp(20px, 2.4vw, 30px) 0;
  width: min(460px, 82%);
}
.hero__orn .rule { flex: 1; }
.hero__orn svg { flex: none; color: var(--accent-mid); }

.hero__sub {
  max-width: 640px;
  font-size: clamp(0.98rem, 1.5vw, 1.16rem);
  color: var(--text-2);
  text-wrap: pretty;
}
.hero__sub b { color: var(--text); font-weight: 700; }

.hero__cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: clamp(28px, 3.4vw, 40px);
}

.hero__stats {
  display: flex;
  gap: clamp(20px, 4vw, 60px);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: clamp(34px, 4.4vw, 56px);
  padding-top: clamp(22px, 2.6vw, 32px);
  position: relative;
  width: min(760px, 100%);
}
.hero__stats::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-line-strong), transparent);
}
.stat { text-align: center; }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: 0.04em;
}
.stat__label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

/* ---------- feature tiles ------------------------------------------------ */
.tiles {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--section-y) * -0.34);
}
.tiles__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(40, 28, 22, 0.92), rgba(18, 12, 8, 0.94));
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 44px -26px rgba(0, 0, 0, 0.95);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tile:hover {
  transform: translateY(-4px);
  border-color: var(--accent-line-strong);
  box-shadow: var(--lift), 0 0 0 1px rgba(255, 170, 60, 0.2);
}
.tile__ico {
  flex: none;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  color: var(--accent);
  border: 1px solid var(--accent-line);
  border-radius: 3px;
  background: radial-gradient(circle at 50% 20%, rgba(255, 170, 60, 0.16), rgba(255, 170, 60, 0.02));
  transform: rotate(45deg);
}
.tile__ico svg { transform: rotate(-45deg); }
.tile__t {
  display: block;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.25;
}
.tile__d { display: block; font-size: 0.78rem; color: var(--muted); }

/* ---------- about -------------------------------------------------------- */
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 3.4vw, 54px);
  align-items: center;
}

.about__copy { display: grid; gap: 22px; justify-items: start; }
.about__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.6vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.about__p { color: var(--text-2); max-width: 52ch; text-wrap: pretty; }

.about__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin-top: 6px;
}
.fact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01));
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.fact:hover {
  border-color: var(--accent-line-strong);
  background: linear-gradient(180deg, rgba(255, 170, 60, 0.1), rgba(255, 170, 60, 0.02));
  transform: translateX(3px);
}
.fact__ico { flex: none; color: var(--accent-mid); }
.fact__t { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }

.about__art {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--accent-line);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 1);
}
.about__art img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.2s var(--ease);
}
.about__art:hover img { transform: scale(1.06); }
.about__art::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 7, 5, 0.24) 0%, transparent 26%, transparent 64%, rgba(11, 7, 5, 0.78) 100%),
    radial-gradient(80% 60% at 50% 110%, rgba(255, 150, 45, 0.22), transparent 70%);
}
.about__badge {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--accent-line-strong);
  border-radius: 99px;
  background: rgba(10, 6, 4, 0.72);
  backdrop-filter: blur(8px);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- classes carousel -------------------------------------------- */
.rail-wrap { position: relative; }

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(190px, 1fr);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }

.rail-btn {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 46px; height: 46px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  border: 1px solid var(--accent-line-strong);
  border-radius: 50%;
  color: var(--accent);
  background: rgba(10, 6, 4, 0.86);
  backdrop-filter: blur(8px);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 1);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.rail-btn:hover { background: var(--accent-mid); color: #1c0904; }
.rail-btn[disabled] { opacity: 0.25; pointer-events: none; }
.rail-btn--prev { left: -22px; }
.rail-btn--next { right: -22px; }

/* arrows exist only while there is something to scroll */
.rail-wrap.is-static .rail-btn { display: none; }

.class-card {
  position: relative;
  scroll-snap-align: start;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-3);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.class-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent-line-strong);
  box-shadow: var(--lift);
}
.class-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 0.9s var(--ease), filter var(--dur) var(--ease);
  filter: saturate(1.16) brightness(1.03);
}
.class-card:hover img { transform: scale(1.07); filter: saturate(1.32) brightness(1.07); }
.class-card__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 7, 5, 0.16) 0%, transparent 32%, rgba(11, 7, 5, 0.6) 68%, rgba(11, 7, 5, 0.94) 100%);
}
.class-card__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 16px 16px 18px;
  display: grid;
  gap: 4px;
  justify-items: center;
  text-align: center;
}
.class-card__t {
  font-family: var(--font-display);
  font-size: 1.28rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.class-card__d { font-size: 0.72rem; color: var(--text-2); }
.class-card__sig { color: var(--accent-mid); opacity: 0.9; }

/* ---------- pillars ------------------------------------------------------ */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  border-block: 1px solid rgba(255, 255, 255, 0.06);
  padding-block: clamp(28px, 3.4vw, 44px);
}
.pillar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-inline: clamp(0px, 1.4vw, 22px);
  position: relative;
}
.pillar + .pillar::before {
  content: '';
  position: absolute;
  left: 0; top: 10%; bottom: 10%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--accent-line), transparent);
}
.pillar__ico { flex: none; color: var(--accent); filter: drop-shadow(0 6px 16px rgba(255, 150, 45, 0.35)); }
.pillar__t { display: block; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; }
.pillar__d { display: block; font-size: 0.8rem; color: var(--muted); }

/* ---------- news --------------------------------------------------------- */
.news__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

/* Секцию закрывает одна ссылка «Все новости» в шапке секции — как в рейтингах.
   Нижний блок с кнопкой и счётчиком убран по просьбе владельца. */

.news-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.news-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent-line-strong);
  box-shadow: var(--lift);
}
.news-card__media { position: relative; overflow: hidden; }
.news-card__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
  filter: saturate(1.18) brightness(1.03);
}
.news-card:hover .news-card__media img { transform: scale(1.06); filter: saturate(1.34) brightness(1.08); }
.news-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 7, 5, 0.04), rgba(11, 7, 5, 0.02) 45%, rgba(26, 16, 12, 0.95) 100%);
}
.news-card__date {
  position: absolute;
  z-index: 2;
  left: 12px; top: 12px;
  padding: 5px 11px;
  border: 1px solid var(--accent-line);
  border-radius: 99px;
  background: rgba(10, 6, 4, 0.72);
  backdrop-filter: blur(6px);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.news-card__body { padding: 16px 18px 20px; display: grid; grid-template-rows: auto 1fr auto; gap: 8px; }
.news-card__t {
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.35;
  transition: color var(--dur) var(--ease);
}
.news-card:hover .news-card__t { color: var(--accent-hi); }
.news-card__d { font-size: 0.82rem; color: var(--muted); }
.news-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: end;
  justify-self: start;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-mid);
  margin-top: 2px;
}

/* ---------- ratings ------------------------------------------------------ */
.ratings__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(20px, 2.8vw, 40px);
  align-items: stretch;
}

.board { padding: 6px; }

.tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px;
}
.tab {
  position: relative;
  padding: 10px 18px;
  border-radius: 99px;
  border: 1px solid transparent;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tab:hover { color: var(--text); }
.tab[aria-selected='true'] {
  color: #1c0904;
  background: linear-gradient(180deg, #ffd75e, #e2820a);
  border-color: rgba(255, 245, 214, 0.6);
  box-shadow: 0 10px 24px -12px rgba(255, 150, 45, 0.95);
}

.table { width: 100%; border-collapse: collapse; }
.table caption { text-align: left; padding: 8px 12px 14px; color: var(--muted); font-size: 0.78rem; }

.table th {
  padding: 10px 12px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.table th:nth-child(n + 3),
.table td:nth-child(n + 3) { text-align: right; }
.table th:nth-child(2),
.table td:nth-child(2) { text-align: left; }

.table tbody tr { transition: background var(--dur) var(--ease); }
.table tbody tr:hover { background: linear-gradient(90deg, rgba(255, 170, 60, 0.09), transparent 70%); }

.table td {
  padding: 13px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 0.86rem;
  vertical-align: middle;
}

.rank {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--muted);
  width: 52px;
}
.rank--top { color: var(--accent); }

.who { display: flex; align-items: center; gap: 12px; }
.ava {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: #ffefe6;
  border: 1px solid var(--accent-line-strong);
  background: radial-gradient(circle at 30% 25%, #3a2a24, #1a1210);
  text-transform: uppercase;
}
.who__name { font-weight: 700; letter-spacing: 0.02em; }

.faction { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.faction i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.faction--horde i { background: var(--red); box-shadow: 0 0 10px rgba(181, 42, 28, 0.85); }
.faction--alliance i { background: var(--blue); box-shadow: 0 0 10px rgba(77, 142, 224, 0.8); }
.faction span { font-size: 0.78rem; font-weight: 700; }
/* deeper than the orange accent, so the faction stays readable in the leaderboard */
.faction--horde span { color: #e0533a; }
.faction--alliance span { color: #7fb0ee; }

.score { font-weight: 800; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.wins { color: var(--text-2); font-variant-numeric: tabular-nums; }

.ratings__art {
  position: relative;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 320px;
}
.ratings__art img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  transition: transform 1.2s var(--ease);
}
.ratings__art:hover img { transform: scale(1.05); }
.ratings__art::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 7, 5, 0.4) 0%, transparent 30%, rgba(11, 7, 5, 0.48) 72%, rgba(11, 7, 5, 0.92) 100%),
    linear-gradient(90deg, rgba(11, 7, 5, 0.7) 0%, transparent 42%);
}
.ratings__caption {
  position: absolute;
  z-index: 2;
  left: 22px; right: 22px; bottom: 20px;
  display: grid;
  gap: 6px;
}
.ratings__caption b {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ratings__caption span { font-size: 0.78rem; color: var(--text-2); }

/* ---------- shop --------------------------------------------------------- */
.shop__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.shop-card {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.shop-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent-line-strong);
  box-shadow: var(--lift), 0 0 60px -30px rgba(255, 150, 45, 0.7);
}
.shop-card__media { position: relative; overflow: hidden; }
.shop-card__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 1s var(--ease), filter var(--dur) var(--ease);
}
.shop-card:hover .shop-card__media img { transform: scale(1.07); }
.shop-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 55% at 50% 42%, transparent 46%, rgba(11, 7, 5, 0.42) 100%);
}
.shop-card__body {
  position: relative;
  padding: 14px 16px 18px;
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
  background: linear-gradient(180deg, rgba(26, 16, 12, 0.2), var(--ink-2));
}
.shop-card__body::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-line-strong), transparent);
}
.shop-card__t {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.shop-card__d { font-size: 0.72rem; color: var(--muted); }
.shop-card__price {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  padding: 5px 13px;
  border: 1px solid var(--accent-line);
  border-radius: 99px;
  background: rgba(255, 170, 60, 0.07);
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--accent);
}
.shop-card__price svg { flex: none; }

/* ---------- community ---------------------------------------------------- */
.community__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(24px, 3vw, 38px);
}
.community__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.social {
  --brand: var(--accent-mid);
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01));
  overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.social::before {
  content: '';
  position: absolute;
  inset: auto auto -40% -10%;
  width: 190px; height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brand), transparent 70%);
  opacity: 0.16;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.social:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--brand) 55%, transparent);
  box-shadow: var(--lift), 0 0 50px -22px var(--brand);
}
.social:hover::before { opacity: 0.34; transform: scale(1.15); }
.social__ico {
  position: relative;
  flex: none;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 92%, #fff 8%), color-mix(in srgb, var(--brand) 70%, #000 30%));
  box-shadow: 0 12px 26px -12px var(--brand);
}
.social__t { position: relative; display: block; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.social__d { position: relative; display: block; font-size: 0.78rem; color: var(--muted); }

/* ---------- final cta --------------------------------------------------- */
.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-block: 1px solid var(--accent-line);
}
.cta__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
  filter: saturate(1.28) brightness(1);
}
.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, var(--ink) 0%, rgba(11, 7, 5, 0.62) 26%, rgba(11, 7, 5, 0.78) 56%, rgba(11, 7, 5, 0.72) 80%, var(--ink) 100%),
    radial-gradient(78% 76% at 50% 58%, rgba(11, 7, 5, 0.72), rgba(11, 7, 5, 0.28) 62%, transparent 82%),
    radial-gradient(70% 70% at 50% 60%, rgba(255, 150, 45, 0.18), transparent 72%);
}
.cta__inner {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 18px;
  padding-block: clamp(70px, 9vw, 132px);
  text-shadow: 0 2px 18px rgba(11, 7, 5, 0.85), 0 1px 3px rgba(11, 7, 5, 0.7);
}
.cta__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 5.2vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-wrap: balance;
}
.cta__sub { color: var(--text-2); max-width: 56ch; text-wrap: pretty; }

/* ---------- footer ------------------------------------------------------ */
/* The old footer was a brand, an empty column and three legal links. Now it carries
   real navigation (three columns), the live-server pill and the creator's plaque on
   its own band, so it closes the page instead of trailing off. */
.foot { padding-block: clamp(46px, 5vw, 72px) clamp(72px, 7vw, 92px); position: relative; }

.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 46px);
  padding-bottom: clamp(26px, 3vw, 38px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.foot__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.foot__brand .brand__logo { height: clamp(60px, 5.8vw, 88px); width: auto; }
.foot__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.foot__slog { display: block; font-size: 0.72rem; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; }

/* the same pulsing dot as the header pill, so "онлайн" reads the same everywhere */
.foot__state {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 2px;
  padding: 8px 14px;
  border: 1px solid var(--accent-line);
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.foot__state:hover { color: var(--accent-hi); border-color: var(--accent-line-strong); }

.foot__col { display: grid; align-content: start; gap: 11px; }
.foot__col-t {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.foot__col a {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-2);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.foot__col a:hover { color: var(--accent-hi); transform: translateX(3px); }

/* One framed warm band closes the page: copyright and the Blizzard disclaimer on
   the left, the developer's plaque on the right. A separate centred band above it
   made a second, competing centre and left the middle of the row empty. */
.foot__base {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 2.6vw, 34px);
  flex-wrap: wrap;
  margin-top: clamp(24px, 3vw, 34px);
  padding: clamp(18px, 2.2vw, 24px) clamp(20px, 2.4vw, 28px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255, 170, 60, 0.1), rgba(255, 170, 60, 0.02) 60%, transparent);
}
.foot__base-l { display: grid; gap: 6px; }

.foot__copy { font-size: 0.82rem; font-weight: 700; color: var(--text-2); }
.foot__note {
  max-width: 58ch;
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--muted);
}

/* The plaque is a dark, gold-on-black mark: it needs no lazy loading (it sits at
   the very bottom, always seen) and it must keep its own box, or it collapses. */
.foot__sign-link { display: block; flex: none; line-height: 0; transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease); }
.foot__sign-link img { display: block; width: clamp(150px, 12vw, 184px); height: auto; }
.foot__sign-link:hover { transform: translateY(-2px); filter: brightness(1.18); }

@media (max-width: 1024px) {
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .foot__base { gap: 16px; }
  .foot__sign-link img { width: min(184px, 60vw); }
}

@media (max-width: 560px) {
  .foot__grid { grid-template-columns: minmax(0, 1fr); }
  .foot__brand { grid-column: auto; }
}

.to-top {
  position: fixed;
  right: clamp(14px, 2.4vw, 28px);
  bottom: clamp(14px, 2.4vw, 28px);
  z-index: 50;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent-line-strong);
  border-radius: 50%;
  color: var(--accent);
  background: rgba(6, 7, 12, 0.9);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur), background var(--dur) var(--ease);
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--accent-mid); color: #1c0904; }

/* ---------- reveal ------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--d, 0s);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- responsive -------------------------------------------------- */
@media (max-width: 1180px) {
  .tiles__grid { grid-template-columns: repeat(2, 1fr); }
  .shop__grid { grid-template-columns: repeat(3, 1fr); }
  .community__grid { grid-template-columns: repeat(2, 1fr); }
  .news__grid { grid-template-columns: repeat(2, 1fr); }
  .rail-btn--prev { left: -8px; }
  .rail-btn--next { right: -8px; }
}

@media (max-width: 1024px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .head__actions { margin-left: auto; }
  .about__grid,
  .ratings__grid { grid-template-columns: 1fr; }
  .about__art { order: -1; }
  .about__art img { aspect-ratio: 16 / 10; }
  .ratings__art { min-height: 380px; }
  .head__actions .btn--ghost { display: none; }
}

@media (max-width: 720px) {
  .hero { min-height: auto; padding-top: 116px; }

  /* the header row does not fit 390px at desktop sizes: brand + CTA + burger
     came to ~407px against ~358px of usable width, so the burger was clipped.
     the raster lockup (1.93:1) needs width, not just height, so it is capped
     against the viewport as well — a 34px logo would still be 66px wide here */
  .head__inner { gap: 10px; min-height: 72px; }
  .head.is-stuck .head__inner { min-height: 62px; }
  .head .brand__logo { height: clamp(32px, 10.5vw, 46px); max-width: 36vw; }
  .head__actions { gap: 8px; }
  .head__actions .btn { --btn-h: 38px; font-size: 0.64rem; padding-inline: 14px; letter-spacing: 0.08em; }
  .burger { width: 40px; height: 40px; }

  .hero__cta { width: 100%; }
  .hero__cta .btn { width: 100%; }
  .hero__eyebrow {
    flex-direction: column;
    gap: 4px;
    padding: 11px 18px;
    border-radius: 14px;
  }
  .hero__eyebrow i { display: none; }
  .hero__eyebrow b,
  .hero__eyebrow span { text-align: center; }
  .hero__title .l1 { letter-spacing: 0.14em; }
  .tiles { margin-top: calc(var(--section-y) * -0.22); }
  .tiles__grid { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; gap: 22px; }
  .pillar { padding-inline: 0; }
  .pillar + .pillar::before { display: none; }
  .pillar + .pillar { border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 22px; }
  .shop__grid { grid-template-columns: repeat(2, 1fr); }
  .community__grid,
  .news__grid { grid-template-columns: 1fr; }
  .foot__top { grid-template-columns: 1fr; }
  .foot__links { justify-content: flex-start; }
  .rail { grid-auto-columns: 74%; }
  .rail-btn { display: none; }
  .hero__stats { gap: 22px; }
  .stat { min-width: 84px; }
  .grain, .vignette { display: none; }
}

/* ---------- auth pages (login / registration) --------------------------- */
/* Separate pages, same design system: the landing's own key art sits far back
   behind a heavy veil so the two feel like one product. */
.auth { display: flex; flex-direction: column; min-height: 100vh; }

.auth__bg { position: fixed; inset: 0; z-index: -2; }
.auth__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.auth__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 7, 5, 0.93) 0%, rgba(11, 7, 5, 0.84) 40%, var(--ink) 100%),
    radial-gradient(70% 55% at 50% 0%, rgba(255, 150, 45, 0.1), transparent 70%);
}

/* the header is fixed, so the first block clears it */
.auth__main { flex: 1; padding-block: clamp(112px, 13vh, 156px) clamp(56px, 7vw, 96px); }

.auth__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(22px, 3.2vw, 52px);
  align-items: start;
}
.auth__grid--narrow { grid-template-columns: minmax(0, 520px); justify-content: center; }

/* ---------- form card ---------------------------------------------------- */
.card {
  padding: clamp(22px, 3vw, 38px);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(26, 16, 12, 0.92), rgba(14, 9, 6, 0.97));
  box-shadow: var(--lift);
  backdrop-filter: blur(10px);
}
.card__head { display: grid; gap: 10px; margin-bottom: 26px; }
.card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  line-height: 1.12;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.card__sub { color: var(--text-2); font-size: 0.92rem; }

.form { display: grid; gap: 18px; }
.form .btn { width: 100%; }
.form__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.field { display: grid; gap: 8px; }
.field__label { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.17em; text-transform: uppercase; color: var(--text-2); }
.field__hint { font-size: 0.74rem; color: var(--muted); line-height: 1.5; }
.field__wrap { position: relative; display: flex; align-items: center; }

.input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background: rgba(8, 5, 3, 0.6);
  color: var(--text);
  font-size: 0.95rem;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder { color: var(--muted-2); }
.input:hover { border-color: rgba(255, 255, 255, 0.2); }
.input:focus {
  outline: none;
  border-color: var(--accent-line-strong);
  background: rgba(12, 7, 4, 0.82);
  box-shadow: 0 0 0 3px rgba(255, 170, 60, 0.14);
}
.input[aria-invalid='true'] { border-color: var(--danger); }
.input[aria-invalid='true']:focus { box-shadow: 0 0 0 3px rgba(255, 123, 107, 0.16); }
.input--with-btn { padding-right: 100px; }

.field__eye {
  position: absolute;
  right: 8px;
  padding: 7px 10px;
  border-radius: var(--radius);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.field__eye:hover { color: var(--accent); background: rgba(255, 170, 60, 0.08); }

.field__msg { font-size: 0.76rem; min-height: 1.15em; color: var(--muted); }
.field__msg[data-state='bad'] { color: var(--danger); }
.field__msg[data-state='good'] { color: var(--ok); }

/* password strength — length and character mix, deliberately not letter case:
   the core upper-cases the password before hashing, so case adds nothing */
.meter { display: flex; gap: 5px; }
.meter i { flex: 1; height: 3px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); transition: background var(--dur) var(--ease); }
.meter[data-score='1'] i:nth-child(-n+1) { background: var(--danger); }
.meter[data-score='2'] i:nth-child(-n+2) { background: var(--accent-mid); }
.meter[data-score='3'] i:nth-child(-n+3) { background: #ffd75e; }
.meter[data-score='4'] i:nth-child(-n+4) { background: var(--ok); }

.check { display: flex; align-items: flex-start; gap: 11px; font-size: 0.84rem; color: var(--text-2); line-height: 1.55; }
.check input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent-mid); }
.check a { color: var(--accent); border-bottom: 1px solid var(--accent-line-strong); }
.check a:hover { color: var(--accent-hi); }

.card__foot {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.86rem;
  color: var(--muted);
}
.card__foot a { color: var(--accent); font-weight: 700; }
.card__foot a:hover { color: var(--accent-hi); }

.captcha {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.8rem;
  color: var(--muted);
}

/* the auth backend is not wired up yet — say so instead of failing silently */
.notice {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--accent-line);
  border-left: 2px solid var(--accent-mid);
  border-radius: var(--radius);
  background: var(--accent-soft);
  font-size: 0.84rem;
  color: var(--text-2);
}
.notice[hidden] { display: none; }
.notice b { color: var(--accent-hi); }

/* ---------- pitch column (registration) --------------------------------- */
.pitch { display: grid; gap: 26px; align-content: start; }
.pitch__list { display: grid; gap: 14px; }
.pitch__item { display: flex; gap: 14px; align-items: flex-start; }
.pitch__ico {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--accent);
  border: 1px solid var(--accent-line);
  border-radius: 3px;
  background: rgba(255, 170, 60, 0.06);
}
.pitch__t { display: block; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; }
.pitch__d { display: block; font-size: 0.82rem; color: var(--muted); }
.pitch__note { font-size: 0.82rem; color: var(--muted); padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.07); }

@media (max-width: 1024px) {
  .auth__grid { grid-template-columns: 1fr; }
  /* the form is the job to be done, so the pitch drops below it */
  .pitch { order: 1; }
}

@media (max-width: 720px) {
  .auth__main { padding-block: 96px 56px; }
  .card { padding: 22px 18px; }
  .input--with-btn { padding-right: 88px; }
}

/* ---------- online / status page ---------------------------------------- */
.status__head { margin-bottom: clamp(20px, 2.6vw, 32px); }

.status__stamp {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border: 1px solid var(--accent-line);
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-2);
}

.status__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}

.status-card {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: clamp(18px, 2vw, 24px);
}
.status-card--wide { grid-column: span 2; }

.status-card__t {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.status-card__t svg { color: var(--accent); flex: none; }

.status-card__v {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  line-height: 1.08;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.status-card__v b { font-weight: 400; }
.status-card__v span { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

.status-card__state {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
}

.status-card__d { font-size: 0.8rem; color: var(--muted); }

/* the frame is warm on the tile that answers "is the world up?" */
.status-card--wide {
  border-color: var(--accent-line);
  background:
    radial-gradient(120% 140% at 12% 130%, rgba(255, 120, 20, 0.24), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
}

.status__players { margin-top: clamp(34px, 4.4vw, 64px); }
.status__players-head { margin-bottom: clamp(16px, 2vw, 24px); }

.status__count {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.status__count b { color: var(--accent); font-size: 1rem; }

.status-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 8px 4px;
}
.status-tools .tabs { padding: 0; flex: none; }

/* the search box sits in the free space between the tabs and the switch; on a
   desktop it drops onto no second row at all */
.status-search {
  position: relative;
  display: block;
  flex: 1 1 170px;
  min-width: 0;
  max-width: 240px;
}
.status-search .input { min-height: 40px; font-size: 0.85rem; padding-right: 40px; }
.status-search .input::-webkit-search-cancel-button { filter: invert(1); opacity: 0.5; }
.status-search__ico {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-2);
  pointer-events: none;
}

/* a hairline switch: the design has no checkbox anywhere else, so it is built
   here rather than pulled in from a form library */
.switch__in {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.switch__box {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border: 1px solid var(--accent-line);
  border-radius: 99px;
  cursor: pointer;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-2);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.switch__txt::before {
  content: '';
  display: inline-block;
  width: 22px; height: 12px;
  margin-right: 9px;
  vertical-align: -1px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: background var(--dur) var(--ease);
}
.switch__box:hover { color: var(--accent-hi); border-color: var(--accent-line-strong); }
.switch__in:focus-visible + .switch__box { outline: 2px solid var(--accent); outline-offset: 3px; }
.switch__in:checked + .switch__box {
  color: #ffd782;
  border-color: rgba(255, 140, 40, 0.55);
  background: linear-gradient(180deg, rgba(42, 18, 6, 0.9), rgba(22, 10, 4, 0.9));
}
.switch__in:checked + .switch__box .switch__txt::before {
  background: linear-gradient(90deg, var(--accent-mid), var(--accent-deep));
}

.who__meta, .who__zone { color: var(--text-2); font-size: 0.85rem; }
.who__empty, .who__more {
  padding: 18px 14px 20px;
  color: var(--muted);
  font-size: 0.85rem;
}
.who__more { padding-top: 0; }

.status__players .board { padding: 6px; }

@media (max-width: 1180px) {
  .status__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .status__grid { grid-template-columns: 1fr; }
  .status-card--wide { grid-column: auto; }
  .status-search { flex: 1 1 100%; max-width: none; }
  .status-tools { padding: 10px 10px 4px; }
  /* the player table is wider than a phone: let it scroll instead of squeezing */
  .status__players .board { overflow-x: auto; }
  .status__players .table { min-width: 620px; }
}

/* ---------- all-ratings page -------------------------------------------- */
.ratings__head { margin-bottom: clamp(20px, 2.6vw, 32px); }

.ratings__stamp {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border: 1px solid var(--accent-line);
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-2);
}
.ratings__stamp svg { color: var(--accent); flex: none; }

/* the list of boards on the left, the selected table on the right */
.rp {
  display: grid;
  grid-template-columns: minmax(0, 262px) minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 32px);
  align-items: start;
}

.rp__nav { position: sticky; top: 108px; }
.rp__nav-title {
  padding: 0 2px 10px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.rp__list { display: grid; gap: 6px; }

.rp__link {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.rp__link-name {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
  min-width: 0;
  transition: color var(--dur) var(--ease);
}
.rp__link-count {
  flex: none;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}
.rp__link:hover { border-color: var(--accent-line); }
.rp__link:hover .rp__link-name { color: var(--accent-hi); }
.rp__link.is-active {
  color: var(--accent);
  border-color: rgba(255, 140, 40, 0.55);
  background:
    radial-gradient(120% 140% at 12% 130%, rgba(255, 120, 20, 0.3), transparent 62%),
    linear-gradient(180deg, #2a1206, #160a04);
  box-shadow:
    inset 0 0 0 1px rgba(255, 180, 70, 0.16),
    inset 0 -5px 14px -6px rgba(255, 110, 20, 0.72);
}
.rp__link.is-active .rp__link-name { color: #ffd782; }
.rp__link.is-active .rp__link-count { color: var(--accent); }

.rp__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 286px);
  gap: clamp(16px, 2vw, 26px);
  align-items: start;
}
.rp__body .board { min-width: 0; }

.rp__bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 12px 4px;
}
.rp__title { display: grid; gap: 6px; }
.rp__title-name {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent);
}
.rp__title-note { font-size: 0.78rem; color: var(--muted); max-width: 56ch; }

.rp__search { position: relative; display: block; flex: 1 1 190px; max-width: 230px; min-width: 0; }
.rp__search .input { min-height: 40px; font-size: 0.85rem; padding-right: 40px; }
.rp__search .input::-webkit-search-cancel-button { filter: invert(1); opacity: 0.5; }
.rp__search-ico {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-2);
  pointer-events: none;
}

.rp__empty { padding: 24px 14px 28px; color: var(--muted); font-size: 0.85rem; }

.rp__aside {
  display: grid;
  gap: 16px;
  padding: clamp(16px, 1.8vw, 22px);
}
.rp__aside-t {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.rp__podium { display: grid; gap: 8px; }
.rp__medal {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
}
.rp__medal-rank {
  flex: none;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--accent-line);
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--muted);
}
.rp__medal--1 {
  border-color: rgba(255, 140, 40, 0.55);
  background:
    radial-gradient(120% 140% at 12% 130%, rgba(255, 120, 20, 0.26), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
}
.rp__medal--1 .rp__medal-rank { color: var(--accent); border-color: var(--accent-line-strong); }
.rp__medal-body { display: grid; gap: 2px; min-width: 0; }
.rp__medal-body b { font-size: 0.85rem; letter-spacing: 0.02em; }
.rp__medal--1 .rp__medal-body b { color: var(--accent-hi); }
.rp__medal-body span { font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.rp__seal {
  display: grid;
  gap: 6px;
  justify-items: start;
  padding: 14px;
  border: 1px dashed rgba(255, 170, 60, 0.28);
  border-radius: var(--radius);
  color: var(--text-2);
}
.rp__seal svg { color: var(--accent); }
.rp__seal b { font-size: 0.8rem; letter-spacing: 0.04em; color: var(--accent); }
.rp__seal span { font-size: 0.76rem; color: var(--muted); }

.rp__cta { width: 100%; }

@media (max-width: 1180px) {
  .rp { grid-template-columns: 1fr; }
  .rp__nav { position: static; }
  .rp__list { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .rp__body { grid-template-columns: minmax(0, 1fr); }
  .rp__aside { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  /* two plates per row is still too tight for "Мастера профессий / 15 мест",
     so a phone gets one full-width plate per row */
  .rp__list { grid-template-columns: 1fr; }
  .rp__search { flex: 1 1 100%; max-width: none; }
  .rp__bar { padding: 12px 6px 4px; }
  /* the table is wider than a phone: let it scroll instead of squeezing */
  .rp__body .board { overflow-x: auto; }
  .rp__body .table { min-width: 600px; }
}

/* ---------- news page --------------------------------------------------- */
.news__head { margin-bottom: clamp(18px, 2.2vw, 26px); }

.news__count {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.news__count b { color: var(--accent); font-size: 0.9rem; }

.news__tools {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: clamp(18px, 2.2vw, 26px);
}
/* the news page has six tabs, so this strip must be allowed to shrink and wrap —
   with flex:none it kept its max-content width and pushed the page 218px wide on
   a phone */
.news__tools .tabs { padding: 0; flex: 0 1 auto; min-width: 0; }

.news__search {
  position: relative;
  display: block;
  flex: 1 1 180px;
  min-width: 0;
  max-width: 260px;
}
.news__search .input { min-height: 40px; font-size: 0.85rem; padding-right: 40px; }
.news__search .input::-webkit-search-cancel-button { filter: invert(1); opacity: 0.5; }
.news__search-ico {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-2);
  pointer-events: none;
}

/* the full page gives each card room: three across, and the text inside can
   breathe once a news item is expanded */
.news__grid--wide { grid-template-columns: repeat(3, 1fr); }

/* inside the full page a card is not a link but a reader: it opens the text in
   place with its own button, so the whole tile no longer lifts on hover */
.news-card--open { cursor: default; }
.news-card--open:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}
.news-card--open:hover .news-card__media img { transform: none; filter: saturate(1.18) brightness(1.03); }
.news-card--open.is-open {
  border-color: var(--accent-line-strong);
  box-shadow: var(--lift);
}

.news-card__tag {
  justify-self: start;
  padding: 4px 10px;
  border: 1px solid var(--accent-line);
  border-radius: 99px;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.news-card__full { display: none; }
.news-card.is-open .news-card__full { display: grid; gap: 10px; }
.news-card__p { font-size: 0.85rem; color: var(--text-2); line-height: 1.6; }

.news-card__more[aria-expanded='true'] { color: var(--accent-hi); }
.news-card__more svg { transition: transform var(--dur) var(--ease); }
.news-card__more[aria-expanded='true'] svg { transform: rotate(90deg); }

.news__empty { padding: 24px 4px; color: var(--muted); font-size: 0.9rem; }
.news__more { display: flex; justify-content: center; margin-top: clamp(22px, 2.6vw, 34px); }
.news__more[hidden] { display: none; }

/* ---------- «как начать играть» ----------------------------------------- */
.start__head { align-items: flex-start; margin-bottom: clamp(26px, 3.2vw, 40px); }
.start__lead {
  max-width: 62ch;
  color: var(--text-2);
  font-size: 0.95rem;
}
.start__head-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.section-plain { padding-block: clamp(34px, 4.4vw, 60px); }
.start__sub-head { margin-bottom: clamp(18px, 2.2vw, 28px); }

.steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* обе пары карточек одной высоты: иначе нижний ряд был ниже верхнего */
  grid-auto-rows: 1fr;
  gap: clamp(14px, 1.8vw, 22px);
}
.step {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: clamp(18px, 2.2vw, 26px);
  position: relative;
}
.step__num {
  position: absolute;
  right: clamp(16px, 2vw, 24px);
  top: clamp(12px, 1.6vw, 20px);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1;
  color: rgba(255, 170, 60, 0.22);
}
.step__t {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.step__d { color: var(--text-2); font-size: 0.88rem; max-width: 52ch; }
.step__d b { color: var(--accent); font-weight: 700; }
.step__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }

/* ---- download ----
   Было две колонки: слева панель «что внутри» (412 px), справа три способа (640 px) —
   рамки заканчивались на разной высоте. Теперь «что внутри» идёт полосой сверху,
   а три способа стоят в ряд одинаковыми рамками. */
.dl { display: grid; gap: clamp(14px, 1.8vw, 20px); }
.dl__info { display: grid; gap: 14px; padding: clamp(18px, 2.2vw, 26px); }
.dl__specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0 clamp(18px, 2.4vw, 34px);
}
.dl__t {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.dl__t svg { color: var(--accent); flex: none; }

.dl__specs { display: grid; gap: 0; }
.dl__specs li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.82rem;
}
/* в полосе характеристик нижняя линия нужна у всех ячеек, иначе последняя выбивается */
.dl__specs li { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.dl__specs span { color: var(--muted); }
.dl__specs b { color: var(--text); font-weight: 700; text-align: right; }

.dl__hint {
  display: flex;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  background: rgba(255, 170, 60, 0.05);
  font-size: 0.8rem;
  color: var(--text-2);
}
.dl__hint svg { color: var(--accent); flex: none; margin-top: 2px; }

.dl__ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 18px); align-items: stretch; }
.dl__way { display: grid; gap: 10px; align-content: start; padding: clamp(16px, 2vw, 22px); }
/* кнопка прижата к низу рамки, поэтому у трёх способов она на одной линии */
.dl__way .dl__btn { align-self: end; }
.dl__way-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dl__way-head h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dl__badge {
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1c0904;
  background: linear-gradient(180deg, #ffd75e, #e2820a);
}
.dl__way-d { font-size: 0.83rem; color: var(--muted); }
.dl__btn { width: 100%; margin-top: 2px; }
.dl__note {
  padding: 13px 14px;
  border: 1px dashed rgba(255, 170, 60, 0.28);
  border-radius: var(--radius);
  font-size: 0.79rem;
  color: var(--muted);
}

/* ---- connection ---- */
.conn {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  /* рамки обеих карточек одинаковой высоты, даже если текста в одной меньше */
  align-items: stretch;
}
.conn__card { display: grid; gap: 14px; align-content: start; padding: clamp(18px, 2.2vw, 26px); }
.conn__t {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.conn__code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(42, 18, 6, 0.62), rgba(14, 9, 6, 0.7));
}
.conn__code code {
  font-family: ui-monospace, 'Consolas', 'Menlo', monospace;
  font-size: 0.88rem;
  color: #ffd782;
  letter-spacing: 0.02em;
  word-break: break-all;
}
.conn__copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border: 1px solid var(--accent-line-strong);
  border-radius: var(--radius);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.conn__copy:hover { background: rgba(255, 170, 60, 0.12); color: var(--accent-hi); }
.conn__copy.is-done { border-color: rgba(111, 211, 154, 0.6); color: var(--ok); }

.conn__steps { display: grid; gap: 9px; counter-reset: conn; }
.conn__steps li {
  position: relative;
  padding-left: 30px;
  font-size: 0.85rem;
  color: var(--text-2);
}
.conn__steps li::before {
  counter-increment: conn;
  content: counter(conn);
  position: absolute;
  left: 0; top: 1px;
  width: 20px; height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent-line);
  border-radius: 50%;
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--accent);
}
.conn__steps b { color: var(--accent-hi); }

.conn__note {
  padding: 12px 14px;
  border: 1px dashed rgba(255, 170, 60, 0.28);
  border-radius: var(--radius);
  font-size: 0.79rem;
  color: var(--muted);
}
.conn__note b { color: var(--accent); }
.conn__note a { color: var(--accent); font-weight: 700; }
.conn__note a:hover { color: var(--accent-hi); }

.conn__reqs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.conn__reqs-t {
  margin-bottom: 8px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.conn__reqs-t--rec { color: var(--accent); }
.conn__list { display: grid; gap: 7px; }
.conn__list li {
  position: relative;
  padding-left: 16px;
  font-size: 0.82rem;
  color: var(--text-2);
}
.conn__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-mid);
  box-shadow: 0 0 8px rgba(255, 150, 40, 0.7);
}

/* ---- faq ---- */
.faq { display: grid; gap: 10px; }
.faq__item {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  transition: border-color var(--dur) var(--ease);
}
.faq__item[open] { border-color: var(--accent-line); }
.faq__q {
  position: relative;
  padding: 16px 52px 16px 18px;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: '';
  position: absolute;
  right: 20px; top: 50%;
  width: 9px; height: 9px;
  margin-top: -6px;
  border-right: 1.6px solid var(--accent);
  border-bottom: 1.6px solid var(--accent);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); margin-top: -2px; }
.faq__q:hover { color: var(--accent-hi); }
.faq__a {
  padding: 0 18px 18px;
  max-width: 88ch;
  font-size: 0.85rem;
  color: var(--muted);
}
.faq__a b { color: var(--accent-hi); }

/* ---- closing cta ---- */
.start__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 2.4vw, 34px);
  flex-wrap: wrap;
  margin-top: clamp(30px, 3.6vw, 50px);
  padding: clamp(22px, 2.8vw, 34px);
}
.start__cta-t {
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.8vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.start__cta-d { margin-top: 8px; color: var(--text-2); font-size: 0.9rem; }
.start__cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 1180px) {
  .news__grid--wide { grid-template-columns: repeat(2, 1fr); }
  .conn { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  /* три способа скачивания в столбик: в ряд на планшете им тесно */
  .dl__ways { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .news__grid--wide { grid-template-columns: 1fr; }
  .news__search { flex: 1 1 100%; max-width: none; }
  .steps { grid-template-columns: 1fr; }
  .conn__reqs { grid-template-columns: 1fr; }
  .conn__code { align-items: flex-start; }
  .start__cta-actions .btn { width: 100%; }
  .start__head-actions .btn { width: 100%; }
}

/* ---------- armory ------------------------------------------------------ */
.arm__head { margin-bottom: clamp(18px, 2.2vw, 26px); }
.arm__lead { max-width: 62ch; color: var(--text-2); font-size: 0.92rem; margin-top: 8px; }
.arm__stamp {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border: 1px solid var(--accent-line);
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-2);
}
.arm__stamp b { color: var(--accent); }

.arm__tools {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: clamp(14px, 1.8vw, 20px);
}
.arm__tools .tabs { padding: 0; flex: 0 1 auto; min-width: 0; }

.arm__search { position: relative; display: block; flex: 1 1 190px; min-width: 0; max-width: 260px; }
.arm__search .input { min-height: 40px; font-size: 0.88rem; padding-right: 40px; }
.arm__search .input::-webkit-search-cancel-button { filter: invert(1); opacity: 0.5; }
.arm__search-ico {
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--muted-2);
  pointer-events: none;
}
.arm__pick { display: block; flex: 0 1 auto; }
.arm__pick .input { min-height: 40px; font-size: 0.82rem; padding: 0 12px; }
.arm__pick select.input { appearance: none; padding-right: 34px; background-image: none; }

.arm__count {
  margin-bottom: clamp(12px, 1.6vw, 18px);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.arm__count b { color: var(--accent); font-size: 0.85rem; }

.arm__row { cursor: pointer; }
.arm__link { color: var(--text); transition: color var(--dur) var(--ease); }
.arm__row:hover .arm__link { color: var(--accent-hi); }
.arm__ava { box-shadow: 0 0 0 1px var(--class-color, var(--accent-line)), 0 0 12px -4px var(--class-color, transparent); }
.arm__class { color: var(--text-2); font-size: 0.85rem; }
.arm__guild { color: var(--accent); font-size: 0.85rem; }
.arm__ilvl { color: var(--accent-hi); }
.arm__online {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffd782;
}
.arm__offline { color: var(--muted); font-size: 0.82rem; }

.arm__empty { padding: 20px 4px; color: var(--muted); font-size: 0.9rem; }

.arm__guilds { margin-top: clamp(30px, 3.6vw, 50px); }
.arm__sub-head { margin-bottom: clamp(16px, 2vw, 24px); }
.guild-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.guild-chip {
  display: grid;
  gap: 3px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
}
.guild-chip__n { font-size: 0.84rem; font-weight: 800; letter-spacing: 0.02em; }
.guild-chip__c { font-size: 0.68rem; color: var(--muted); font-weight: 700; }
.arm__note {
  margin-top: clamp(16px, 2vw, 22px);
  max-width: 78ch;
  padding: 13px 15px;
  border: 1px dashed rgba(255, 170, 60, 0.28);
  border-radius: var(--radius);
  font-size: 0.79rem;
  color: var(--muted);
}

/* ---- character card ---- */
.ch__backline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: clamp(18px, 2.2vw, 26px);
}
.ch__hero {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 28px);
  padding: clamp(20px, 2.6vw, 30px);
  margin-bottom: clamp(14px, 1.8vw, 20px);
}
.ch__ava {
  flex: none;
  width: clamp(64px, 7vw, 92px);
  height: clamp(64px, 7vw, 92px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  color: #ffefe6;
  border: 1px solid var(--class-color, var(--accent-line-strong));
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.14), rgba(20, 12, 9, 0.9));
  box-shadow: 0 0 22px -8px var(--class-color, transparent);
}
.ch__head { display: grid; gap: 8px; min-width: 0; }
.ch__name-line { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ch__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ch__spec { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.ch__meta, .ch__where {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.86rem;
  color: var(--text-2);
}
.ch__lvl { font-weight: 800; color: var(--text); }
.ch__guild { color: var(--accent); font-weight: 700; }
.ch__dot { color: var(--muted-2); }

.ch__stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 16px);
  margin-bottom: clamp(14px, 1.8vw, 20px);
}
.ch__stat {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
}
.ch__stat-t { font-size: 0.56rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); }
.ch__stat-v { font-family: var(--font-display); font-size: clamp(1.05rem, 1.7vw, 1.35rem); color: var(--accent-hi); }
.ch__stat-d { font-size: 0.68rem; color: var(--muted); }

.ch__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
  align-items: start;
  margin-bottom: clamp(14px, 1.8vw, 22px);
}
.ch__cols--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ch__side { display: grid; gap: clamp(14px, 1.8vw, 22px); }
.ch__panel { display: grid; gap: 14px; padding: clamp(16px, 2vw, 24px); }
.ch__panel-t {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.gear { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gear__item {
  display: grid;
  gap: 4px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left-width: 2px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
}
.gear__item--epic { border-left-color: #a335ee; }
.gear__item--rare { border-left-color: #0070dd; }
.gear__item--uncommon { border-left-color: #1eff00; }
.gear__slot {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.gear__q { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.gear__item--epic .gear__q { background: #a335ee; box-shadow: 0 0 8px rgba(163, 53, 238, 0.8); }
.gear__item--rare .gear__q { background: #0070dd; box-shadow: 0 0 8px rgba(0, 112, 221, 0.8); }
.gear__item--uncommon .gear__q { background: #1eff00; box-shadow: 0 0 8px rgba(30, 255, 0, 0.6); }
.gear__name { font-size: 0.8rem; font-weight: 700; }
.gear__item--epic .gear__name { color: #c77dff; }
.gear__item--rare .gear__name { color: #6cb2f0; }
.gear__ilvl { font-size: 0.68rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.talents { display: grid; gap: 12px; }
.tal { display: grid; gap: 7px; }
.tal__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tal__tree { font-size: 0.82rem; font-weight: 700; color: var(--text-2); }
.tal--main .tal__tree { color: var(--accent-hi); }
.tal__pts { font-size: 0.8rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.tal__bar {
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.tal__fill { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent-mid), var(--accent-deep)); }
.tal__note { font-size: 0.78rem; color: var(--muted); }
.tal__note b { color: var(--accent); }

.prof, .coll { display: grid; gap: 9px; }
.prof__row, .coll__row { display: flex; align-items: center; gap: 10px; font-size: 0.84rem; color: var(--text-2); }
.prof__row svg { color: var(--accent); flex: none; }
.coll__row { justify-content: space-between; }
.coll__t { color: var(--muted); }
.coll__v { color: var(--accent-hi); font-variant-numeric: tabular-nums; }

.table--tight td, .table--tight th { padding: 10px; }

.ach__sum { margin-bottom: 12px; font-size: 0.8rem; color: var(--muted); }
.ach__sum b { color: var(--accent); font-size: 1rem; }
.ach { display: grid; gap: 10px; }
.ach__row { display: flex; gap: 11px; }
.ach__row svg { color: var(--accent); flex: none; margin-top: 3px; }
.ach__body { display: grid; gap: 3px; }
.ach__body b { font-size: 0.85rem; }
.ach__body span { font-size: 0.78rem; color: var(--muted); }

.ch__missing { display: grid; gap: 12px; padding: clamp(22px, 3vw, 34px); justify-items: start; }
.ch__missing-t { font-family: var(--font-display); font-size: clamp(1.2rem, 2.2vw, 1.6rem); text-transform: uppercase; letter-spacing: 0.04em; }
.ch__missing-d { max-width: 62ch; color: var(--muted); font-size: 0.88rem; }

/* ---------- personal cabinet -------------------------------------------- */
.cab__head { margin-bottom: clamp(16px, 2vw, 22px); }
.cab__coins {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border: 1px solid var(--accent-line-strong);
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(42, 18, 6, 0.7), rgba(22, 10, 4, 0.6));
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
}
.cab__coins svg { color: var(--accent); flex: none; }
.cab__coins b { color: #ffd782; font-size: 0.95rem; }
.cab__notice { margin-bottom: clamp(18px, 2.2vw, 26px); }

/* путь в демонстрационный кабинет со страницы входа */
.card__demo {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.8rem;
  color: var(--muted);
}
.card__demo a { color: var(--accent); font-weight: 700; }
.card__demo a:hover { color: var(--accent-hi); }

.cab { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: clamp(18px, 2.4vw, 32px); align-items: start; }
.cab__nav { position: sticky; top: 108px; }
.cab__nav-title { padding: 0 2px 10px; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-2); }
.cab__list { display: grid; gap: 6px; }

.cab__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cab__link-name { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.cab__link-count { flex: none; font-size: 0.64rem; font-weight: 700; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.cab__link:hover { border-color: var(--accent-line); }
.cab__link:hover .cab__link-name { color: var(--accent-hi); }
.cab__link.is-active {
  border-color: rgba(255, 140, 40, 0.55);
  background:
    radial-gradient(120% 140% at 12% 130%, rgba(255, 120, 20, 0.3), transparent 62%),
    linear-gradient(180deg, #2a1206, #160a04);
  box-shadow: inset 0 0 0 1px rgba(255, 180, 70, 0.16), inset 0 -5px 14px -6px rgba(255, 110, 20, 0.72);
}
.cab__link.is-active .cab__link-name { color: #ffd782; }
.cab__link.is-active .cab__link-count { color: var(--accent); }

.cab__panel { display: grid; gap: clamp(14px, 1.8vw, 20px); }
.cab__panel-head { display: grid; gap: 6px; }
.cab__panel-t { font-family: var(--font-display); font-size: clamp(1.1rem, 1.8vw, 1.4rem); letter-spacing: 0.04em; text-transform: uppercase; }
.cab__panel-d { max-width: 66ch; font-size: 0.85rem; color: var(--muted); }

.cab__who {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 140% at 8% 130%, rgba(255, 120, 20, 0.22), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
}
.cab__who-ava {
  flex: none;
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--accent-line-strong);
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.16), rgba(20, 12, 9, 0.9));
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: #ffefe6;
}
.cab__who-body { display: grid; gap: 3px; }
.cab__who-name { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-hi); }
.cab__who-meta { font-size: 0.78rem; color: var(--muted); }

.cab__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 16px); }
.cab__tile {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
}
.cab__tile-t { font-size: 0.56rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); }
.cab__tile-v { font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--accent-hi); }

.cab__block { display: grid; gap: 12px; }
.cab__block-t { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-2); }
.cab__moves { display: grid; gap: 8px; }
.cab__move {
  display: grid;
  grid-template-columns: minmax(0, 140px) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
  font-size: 0.84rem;
}
.cab__move-when { color: var(--muted-2); font-size: 0.74rem; font-variant-numeric: tabular-nums; }
.cab__move-what { color: var(--text-2); }
.cab__move-sum, .cab__sum { font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.cab__move-sum.is-plus, .cab__sum.is-plus { color: #6fd39a; }
.cab__move-sum.is-minus, .cab__sum.is-minus { color: #ff9d7a; }

.cab__more {
  justify-self: start;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--accent-line);
  padding-bottom: 2px;
}
.cab__more:hover { color: var(--accent-hi); }

.cab__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.cab__balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: clamp(18px, 2.2vw, 26px);
  border: 1px solid var(--accent-line-strong);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 150% at 10% 130%, rgba(255, 120, 20, 0.3), transparent 62%),
    linear-gradient(180deg, #2a1206, #160a04);
}
.cab__balance-t { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.cab__balance-v { display: block; margin-top: 6px; font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.2rem); color: #ffd782; }

.cab__when { color: var(--muted-2); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.cab__what { color: var(--text-2); }

.cab__shop { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cab__item { cursor: default; }
/* магазин кабинета — не ссылка: плитка не должна «подпрыгивать» под курсором */
.cab__item:hover { transform: none; border-color: rgba(255, 255, 255, 0.1); box-shadow: none; }
.cab__item:hover .shop-card__media img { transform: none; filter: saturate(1.18) brightness(1.03); }
.cab__item-tag {
  position: absolute;
  left: 10px; top: 10px;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1c0904;
  background: linear-gradient(180deg, #ffd75e, #e2820a);
}
.cab__item-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
.cab__price { display: inline-flex; align-items: baseline; gap: 5px; }
.cab__price b { font-family: var(--font-display); font-size: 1.15rem; color: #ffd782; }
.cab__price span { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.cab__buy { --btn-h: 38px; font-size: 0.64rem; padding-inline: 16px; }

.priv { display: grid; gap: 10px; }
.priv__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
}
.priv__row.is-active {
  border-color: var(--accent-line);
  background:
    radial-gradient(120% 140% at 6% 130%, rgba(255, 120, 20, 0.16), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
}
.priv__ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--accent-line); color: var(--accent); }
.priv__body { display: grid; gap: 3px; min-width: 0; }
.priv__name { font-size: 0.88rem; }
.priv__desc { font-size: 0.78rem; color: var(--muted); }
.priv__side { display: flex; align-items: center; gap: 14px; }
.priv__state { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); }
.priv__state.is-on { color: #6fd39a; }

/* плашка о том, что действие демонстрационное */
.cab__toast {
  position: fixed;
  left: 50%;
  bottom: clamp(18px, 3vw, 34px);
  transform: translate(-50%, 12px);
  z-index: 60;
  max-width: min(560px, 90vw);
  padding: 13px 18px;
  border: 1px solid var(--accent-line-strong);
  border-radius: var(--radius);
  background: rgba(10, 7, 5, 0.96);
  backdrop-filter: blur(8px);
  box-shadow: var(--lift);
  font-size: 0.82rem;
  color: var(--text-2);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.cab__toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* значки в кабинете: вкладки, плитки, баланс — иконки из спрайта страницы */
.cab__link-name svg, .cab__tile-t svg, .cab__balance-t svg { color: var(--accent); flex: none; }
.cab__link-name { display: inline-flex; align-items: center; gap: 8px; }
.cab__link.is-active .cab__link-name svg { color: #ffd782; }
.cab__tile-t { display: inline-flex; align-items: center; gap: 7px; }
.cab__balance-t { display: inline-flex; align-items: center; gap: 8px; }
.cab__account-ava img { width: 22px; height: 22px; object-fit: contain; display: block; }
/* профиль аккаунта: вместо кружка с буквой стоит герб фракции */
.cab__who .ic--lg { filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5)); }

.cab__account { gap: 10px; }
.cab__account-ava { display: inline-flex; align-items: center; justify-content: center; }
.cab__open { --btn-h: 32px; padding: 8px 12px; font-size: 0.6rem; }

@media (max-width: 1180px) {
  .ch__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cab__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cab { grid-template-columns: minmax(0, 1fr); }
  .cab__nav { position: static; }
  .cab__list { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .cab__shop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .ch__cols, .ch__cols--even { grid-template-columns: minmax(0, 1fr); }
  .gear { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .arm__search { flex: 1 1 100%; max-width: none; }
  .arm__pick { flex: 1 1 45%; }
  .ch__hero { flex-direction: column; align-items: flex-start; }
  .ch__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch__backline .conn__copy { width: 100%; justify-content: center; }
  .cab__list { grid-template-columns: minmax(0, 1fr); }
  .cab__shop { grid-template-columns: minmax(0, 1fr); }
  .cab__move { grid-template-columns: minmax(0, 1fr) auto; }
  .cab__move-when { grid-column: 1 / -1; }
  .priv__row { grid-template-columns: auto minmax(0, 1fr); }
  .priv__side { grid-column: 1 / -1; justify-content: space-between; }
  .cab__balance .btn { width: 100%; }
}

/* ---------- landing: factions + class rail ------------------------------ */
.classes__hint {
  max-width: 44ch;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* factions sit above the classes and in their own block, so the two never mix */
.factions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}
.faction-card {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-lg, var(--radius));
  background: var(--ink-3);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.faction-card:hover { transform: translateY(-6px); border-color: var(--accent-line-strong); box-shadow: var(--lift); }
.faction-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.9s var(--ease), filter var(--dur) var(--ease);
  filter: saturate(1.16) brightness(1.03);
}
.faction-card:hover img { transform: scale(1.05); filter: saturate(1.3) brightness(1.07); }
.faction-card__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 7, 5, 0.2) 0%, rgba(11, 7, 5, 0.55) 45%, rgba(11, 7, 5, 0.95) 100%);
}
.faction-card--horde { --faction-color: var(--red); }
.faction-card--alliance { --faction-color: var(--blue); }
.faction-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--faction-color);
  opacity: 0.35;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
.faction-card:hover::after { opacity: 0.75; }

.faction-card__body {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  gap: 10px;
  padding: clamp(18px, 2.2vw, 28px);
}
.faction-card__slog {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faction-color);
}
.faction-card__t {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.faction-card__d { max-width: 46ch; font-size: 0.86rem; color: var(--text-2); }
.faction-card__stats { display: flex; gap: 18px; flex-wrap: wrap; }
.faction-card__stat { display: inline-flex; align-items: baseline; gap: 6px; font-size: 0.72rem; color: var(--muted); }
.faction-card__stat b { font-family: var(--font-display); font-size: 1.05rem; color: var(--text); }
.faction-card__stat--live { align-items: center; color: #ffd782; }
.faction-card__stat--live b { color: #ffd782; }
.faction-card__more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.faction-card:hover .faction-card__more { color: var(--accent-hi); }

.rail--classes { grid-auto-columns: minmax(230px, 1fr); }
/* карточка класса — ссылка: имя, описание, роли с бронёй и только потом «Подробно».
   Размеры под плашкой заданы с запасом на две строки, поэтому низ у всех карточек
   совпадает, а кнопка стоит на одной линии (у «Рыцаря смерти» имя в две строки,
   у друида три роли — раньше из-за этого карточки разъезжались). */
.class-card { display: block; }
.class-card__body {
  gap: 6px;
  min-height: 206px;
}
.class-card__name-row { min-height: 1.6em; align-items: center; }
/* «Рыцарь смерти» и «Чернокнижник» должны влезать в одну строку, иначе у части
   карточек название уезжает на две строки и низ карточек разъезжается */
.class-card__name-row .class-card__t { font-size: 1.08rem; letter-spacing: 0.06em; }
/* описание ровно в две строки: иначе у одной карточки три строки текста и верх
   плашки уезжает. Полный текст всегда открыт на странице класса */
.class-card__d {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.1em;
}
.class-card__info { display: grid; gap: 6px; margin-top: 2px; }
.class-card__roles { display: flex; gap: 6px; flex-wrap: wrap; min-height: 3.9em; align-content: flex-start; margin-bottom: 0; }
.class-card__role {
  padding: 3px 8px;
  border: 1px solid var(--class-color, var(--accent-line));
  border-radius: 99px;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--class-color, var(--accent));
}
.class-card__meta { display: flex; align-items: center; gap: 7px; font-size: 0.66rem; color: var(--muted); }
.class-card__dot { color: var(--muted-2); }
.class-card__more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-mid);
}
.class-card:hover .class-card__more { color: var(--accent-hi); }

/* шапка карточки фракции: слоган строкой выше, иначе герб вставал по центру двух
   строк и надпись «Орда»/«Альянс» шла не в линию со значком */
.faction-card__name-row { display: flex; align-items: center; gap: 14px; }

/* ---------- inform: class and faction pages ----------------------------- */
.cl__hero {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 32px);
  padding: clamp(20px, 2.6vw, 32px);
  margin-bottom: clamp(14px, 1.8vw, 22px);
  border-color: var(--class-color, var(--accent-line));
  background:
    radial-gradient(120% 150% at 8% 130%, color-mix(in srgb, var(--class-color, #ff8c28) 22%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
}
.cl__sig {
  flex: none;
  width: clamp(64px, 7vw, 96px);
  height: clamp(64px, 7vw, 96px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  color: #fff4ec;
  border: 1px solid var(--class-color, var(--accent-line-strong));
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.16), rgba(20, 12, 9, 0.9));
  box-shadow: 0 0 26px -8px var(--class-color, transparent);
}
.cl__head { display: grid; gap: 10px; min-width: 0; }
.cl__name { font-size: clamp(1.6rem, 3.4vw, 2.6rem); }
.cl__lead { max-width: 60ch; color: var(--text-2); font-size: 0.95rem; }
.cl__roles { display: flex; gap: 8px; flex-wrap: wrap; }
.cl__role {
  padding: 5px 12px;
  border: 1px solid var(--accent-line);
  border-radius: 99px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.cl__facts { display: flex; gap: 22px; flex-wrap: wrap; }
.cl__fact { display: grid; gap: 3px; }
.cl__fact-t { font-size: 0.52rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); }
.cl__fact-v { font-size: 0.86rem; color: var(--text); }

.cl__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
  align-items: start;
  margin-bottom: clamp(14px, 1.8vw, 22px);
}
.cl__main, .cl__side { display: grid; gap: clamp(14px, 1.8vw, 22px); }
.cl__panel { display: grid; gap: 14px; padding: clamp(18px, 2.2vw, 26px); margin-bottom: clamp(14px, 1.8vw, 22px); }
.cl__cols .cl__panel { margin-bottom: 0; }
.cl__panel-t {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.cl__about { display: grid; gap: 12px; }
.cl__p { max-width: 74ch; font-size: 0.9rem; line-height: 1.65; color: var(--text-2); }
.cl__note { max-width: 74ch; font-size: 0.82rem; color: var(--muted); }

.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.spec {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-left: 2px solid var(--class-color, var(--accent-line-strong));
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
}
.spec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.spec__n { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; }
.spec__role { font-size: 0.56rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.spec__d { font-size: 0.84rem; color: var(--text-2); line-height: 1.55; }

.pluses, .minuses { display: grid; gap: 9px; }
.pluses { margin-bottom: 14px; }
.pluses__row, .minuses__row {
  position: relative;
  padding-left: 22px;
  font-size: 0.84rem;
  color: var(--text-2);
  line-height: 1.5;
}
.pluses__row::before {
  content: '';
  position: absolute;
  left: 2px; top: 7px;
  width: 10px; height: 6px;
  border-left: 2px solid #6fd39a;
  border-bottom: 2px solid #6fd39a;
  transform: rotate(-45deg);
}
.minuses__row::before {
  content: '';
  position: absolute;
  left: 2px; top: 11px;
  width: 11px; height: 2px;
  background: #ff9d7a;
}

.races { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.races__col { display: grid; gap: 10px; align-content: start; }
.races__col-t {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.races__col-t--horde { color: #e0533a; }
.races__col-t--alliance { color: #7fb0ee; }
.race {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
}
.race__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.race__n { font-size: 0.95rem; }
.race__f { font-size: 0.54rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.race__f--horde { color: #e0533a; }
.race__f--alliance { color: #7fb0ee; }
.race__lead { font-size: 0.78rem; color: var(--muted); }
.race__bonuses { display: grid; gap: 7px; }
.race__bonus { display: flex; gap: 9px; font-size: 0.78rem; color: var(--text-2); line-height: 1.45; }
.race__bonus svg { color: var(--accent-mid); flex: none; margin-top: 3px; }
.race__bonus-body b { color: var(--text); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex;
  padding: 9px 15px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-2);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.chip:hover { color: var(--accent-hi); border-color: var(--accent-line-strong); transform: translateY(-2px); }

.cl__players { display: grid; gap: 14px; }
.cl__players-cell { display: inline-flex; align-items: baseline; gap: 6px; margin-right: 18px; }
.cl__players-v { font-family: var(--font-display); font-size: 1.4rem; color: var(--accent-hi); }
.cl__players-t { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); }
.cl__names { display: grid; gap: 8px; }
.cl__name { display: flex; align-items: center; gap: 10px; font-size: 0.84rem; }
.cl__name-meta { margin-left: auto; font-size: 0.68rem; color: var(--muted); }
.cl__all { margin-top: 4px; }

.fa__hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 2.4vw, 32px);
  padding: clamp(20px, 2.6vw, 32px);
  margin-bottom: clamp(14px, 1.8vw, 22px);
  border-color: var(--faction-color, var(--accent-line));
  background:
    radial-gradient(120% 150% at 8% 130%, color-mix(in srgb, var(--faction-color, #ff8c28) 20%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
}
.fa__head { display: grid; gap: 10px; min-width: 0; }
.fa__slog { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: var(--faction-color, var(--accent)); }
.fa__name { font-size: clamp(1.8rem, 4vw, 3rem); }
.fa__lead { max-width: 58ch; color: var(--text-2); font-size: 0.95rem; }
.fa__mark {
  flex: none;
  width: clamp(70px, 8vw, 110px);
  height: clamp(70px, 8vw, 110px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  color: #fff4ec;
  border: 1px solid var(--faction-color, var(--accent-line-strong));
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.16), rgba(20, 12, 9, 0.9));
  box-shadow: 0 0 28px -8px var(--faction-color, transparent);
}
.fa__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 16px);
  margin-bottom: clamp(14px, 1.8vw, 22px);
}
.fa__features { display: grid; gap: 12px; }
.fa__feature { display: grid; gap: 5px; padding: 13px 15px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: var(--radius); background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)); }
.fa__feature-t { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.fa__feature-d { font-size: 0.82rem; color: var(--text-2); line-height: 1.5; }

.fa__compare { display: grid; gap: 12px; }
.fa__other {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px 16px;
  align-items: center;
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid var(--faction-color, var(--accent-line));
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.fa__other:hover { transform: translateY(-3px); border-color: var(--accent-line-strong); }
.fa__other-body { display: grid; gap: 4px; }
.fa__other-t { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faction-color, var(--accent-hi)); }
.fa__other-d { font-size: 0.76rem; color: var(--muted); }
.fa__other-n { font-size: 0.74rem; color: var(--text-2); }
.fa__other svg { color: var(--accent); }

@media (max-width: 1180px) {
  .fa__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .factions { grid-template-columns: minmax(0, 1fr); }
  .cl__cols { grid-template-columns: minmax(0, 1fr); }
  .races { grid-template-columns: minmax(0, 1fr); }
  .cl__hero, .fa__hero { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 720px) {
  .classes__hint { max-width: none; }
  .fa__stats { grid-template-columns: minmax(0, 1fr); }
  .cl__facts { gap: 14px; }
  .faction-card__stats { gap: 12px; }
}

/* ---------- значки фракций и классов ------------------------------------ */
/* квадратные значки из нарезки владельца; размер задаётся модификатором, чтобы на
   страницах и в списках они были уместного веса, а не одного на все случаи */
.ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--ic, 24px);
  height: var(--ic, 24px);
  vertical-align: middle;
}
.ic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ic--xs { --ic: 18px; }
.ic--sm { --ic: 24px; }
.ic--md { --ic: 34px; }
.ic--lg { --ic: 56px; }
.ic--xl { --ic: 96px; }
/* крупные значки в шапках чуть светятся, мелкие в строках — нет */
.ic--lg img, .ic--xl img { filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55)); }

/* Атрибут hidden должен побеждать наши display. Иначе панели кабинета и блоки
   «не найдено» оставались видимыми: браузер прячет через [hidden] { display: none },
   но авторский display: grid перекрывает это, и на экране оказывались сразу все
   вкладки кабинета (проверено замером: 5 панелей из 5 видимы при скрытых атрибутах). */
[hidden] { display: none !important; }

/* Подписи в таблицах — по левому краю, числа — по правому. Раньше правило «всё
   после второй колонки вправо» разъезжалось: «Альянс» и «Орда» разной длины
   прижимались к правому краю, поэтому гербы шли не в колонку (разбег 13 px),
   а в армори значок класса гулял по строке до 77 px. */
.table th.th--text,
.table td.arm__faction-cell,
.table td.arm__class,
.table td.arm__guild,
.table td.who__meta,
.table td.arm__online,
.table td.arm__offline,
.table td.cab__when,
.table td.cab__what { text-align: left; }

/* строки списков: значок и текст в ячейке выравниваются точно по центру строки.
   Через inline-flex, а не через вертикальное выравнивание строчного значка: тот
   вариант давал расхождение середины значка и текста в 2 px. */
.cell { display: inline-flex; align-items: center; gap: 9px; }
.cell > span:not(.ic) { display: block; }
.arm__faction-cell .cell, .who__meta .cell, .arm__class .cell { gap: 9px; }

/* шапки и карточки: там flex уместен, это не ячейки таблицы */
.cl__sig-icon { --ic: 96px; }
.fa__mark-icon { --ic: 108px; }
.faction-card__name-row { display: flex; align-items: center; gap: 14px; }
.faction-card__names { display: grid; gap: 4px; }
.class-card__name-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.race__n { display: inline-flex; align-items: center; gap: 7px; }

/* ---------- about page -------------------------------------------------- */
.about__head { align-items: flex-start; margin-bottom: clamp(24px, 3vw, 38px); }
.about__lead { max-width: 68ch; margin-top: 10px; color: var(--text-2); font-size: 0.95rem; }
.about__facts-row { display: flex; gap: clamp(18px, 2.4vw, 34px); flex-wrap: wrap; }

.about__block { margin-bottom: clamp(30px, 3.8vw, 54px); }
.about__sub-head { margin-bottom: clamp(16px, 2vw, 24px); }

.about__tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}
.about__tile {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.about__tile:hover { border-color: var(--accent-line); transform: translateY(-3px); }
.about__tile-ico {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--accent-line);
  color: var(--accent);
}
.about__tile-t { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; }
.about__tile-d { font-size: 0.84rem; color: var(--muted); line-height: 1.55; }

.about__why { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 18px); }
.about__why-card {
  display: grid;
  gap: 7px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-left: 2px solid var(--accent-line-strong);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
}
.about__why-t { font-size: 0.92rem; }
.about__why-d { font-size: 0.83rem; color: var(--text-2); line-height: 1.55; }

.about__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  counter-reset: about-step;
}
.about__step {
  position: relative;
  display: grid;
  gap: 6px;
  padding: clamp(16px, 2vw, 22px) clamp(16px, 2vw, 22px) clamp(16px, 2vw, 22px) 54px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
}
.about__step::before {
  counter-increment: about-step;
  content: counter(about-step);
  position: absolute;
  left: clamp(14px, 1.8vw, 20px);
  top: clamp(16px, 2vw, 22px);
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent-line);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--accent);
}
.about__step b { font-size: 0.9rem; }
.about__step span { font-size: 0.78rem; color: var(--muted); }

@media (max-width: 1180px) {
  .about__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .about__tiles, .about__why, .about__steps { grid-template-columns: minmax(0, 1fr); }
  .about__facts-row { gap: 16px; }
}

/* ---------- правила сервера --------------------------------------------- */
.rules__head { align-items: flex-start; margin-bottom: clamp(20px, 2.6vw, 30px); }
.rules__index { margin-top: 14px; max-width: 900px; }
.rules__index .chip__n {
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  margin-right: 4px;
  border-radius: 50%;
  border: 1px solid var(--accent-line);
  font-family: var(--font-display);
  font-size: 0.72rem;
  color: var(--accent);
}

.rules { display: grid; gap: clamp(12px, 1.6vw, 18px); counter-reset: rule; }
.rules__sec { display: grid; gap: 14px; padding: clamp(18px, 2.2vw, 26px); }
.rules__t {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.9vw, 1.45rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rules__n {
  flex: none;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--accent);
}
.rules__list { display: grid; gap: 10px; }
.rules__list li {
  position: relative;
  padding-left: 24px;
  max-width: 92ch;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-2);
}
.rules__list li::before {
  content: '';
  position: absolute;
  left: 4px; top: 9px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-mid);
  box-shadow: 0 0 8px rgba(255, 150, 40, 0.7);
}
.rules__list b { color: var(--accent-hi); }
.rules__note { font-size: 0.8rem; color: var(--muted); }

/* ---------- motion preferences ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__bg { transform: none !important; }
}