/* UI kit styles — both themes */
@import url('../../colors_and_type.css');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* <picture> — прозрачный wrapper для WebP+PNG fallback. Без display:contents
   родительские width/height-проценты у <img> ломаются (logo, support-emblem). */
picture { display: contents; }
body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg);
  transition: background 400ms var(--ease), color 400ms var(--ease);
  min-height: 100vh;
}

/* ---- layout ---- */
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.section   { padding: 72px 0; position: relative; }
.section-tight { padding: 48px 0; }
@media (max-width: 720px) {
  .section { padding: 56px 0; }
  .section-tight { padding: 36px 0; }
}

/* ---- header ---- */
.site-header {
  position: sticky; top: 0; z-index: 200;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: var(--bg-overlay);
  border-bottom: 1px solid var(--border-gold);
  overflow: visible;
  transition: background var(--dur-base) var(--ease);
}
.site-header .inner {
  max-width: 1280px; margin: 0 auto;
  padding: 18px 24px;
  display: flex; align-items: center; gap: 32px;
  overflow: visible;
  transition: padding var(--dur-base) var(--ease);
}
.site-header.is-scrolled .inner { padding: 6px 24px; }
.brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none;
}
.brand .logo-wrap {
  height: 140px;
  margin: -20px 0 -48px;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
  pointer-events: none;
  transition: height var(--dur-base) var(--ease), margin var(--dur-base) var(--ease);
}
.theme-day .brand .logo-wrap {
  filter: drop-shadow(0 4px 10px rgba(11, 27, 58, 0.18));
}
.site-header.is-scrolled .brand .logo-wrap {
  height: 72px;
  margin: -8px 0 -14px;
}
.site-header .nav a { transition: all var(--dur-base) var(--ease); }
.site-header.is-scrolled .nav a { padding: 6px 10px; font-size: 12px; }
.site-header.is-scrolled .theme-switch button { padding: 5px 10px; font-size: 10px; }
@media (max-width: 640px) {
  .brand .logo-wrap { height: 96px; margin: -12px 0 -30px; }
  .site-header.is-scrolled .brand .logo-wrap { height: 56px; margin: -4px 0 -10px; }
}

/* ---- reusable logo wrap: PNG + animated orb overlay ---- */
.logo-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
  vertical-align: middle;
}
.logo-wrap .logo-base {
  display: block;
  height: 100%;
  width: auto;
  background: transparent;
  pointer-events: none;
}
/* Orb gem sits at 23.5% × 68.5% of the logo (measured from the source PNG),
   roughly 6.5% of the logo's width in diameter. Overlay is sized slightly
   larger so the underlying blue sphere is fully covered on any scale. */
.logo-wrap .logo-orb {
  position: absolute;
  left: 23.5%;
  top: 68.5%;
  width: 7.4%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  object-fit: cover;
  image-rendering: auto;
  pointer-events: none;
}
.logo-footer {
  height: 140px;
  display: inline-block;
  margin-bottom: 16px;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}
.brand .name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.14em;
  background: var(--gold-text-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand .tag { font-family: var(--font-serif); font-style: italic; font-size: 12px; color: var(--fg-muted); }
.nav { display: flex; gap: 6px; margin-left: auto; align-items: center; }
.nav a {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-2);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all var(--dur-base) var(--ease);
}
.nav a:hover { color: var(--accent); background: rgba(250,175,55,0.08); }
.nav a.active { color: var(--accent); }

/* ---- theme switch ---- */
.theme-switch {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px; border: 1px solid var(--border-gold);
  border-radius: 999px;
  background: rgba(0,0,0,0.12);
}
.theme-switch button {
  background: transparent; border: 0; cursor: pointer;
  padding: 6px 12px; border-radius: 999px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-muted);
  transition: all var(--dur-base) var(--ease);
}
.theme-switch button.active {
  background: var(--gold-gradient-h);
  color: var(--fg-on-gold);
  box-shadow: 0 2px 8px rgba(250,175,55,0.3);
}

/* ---- hero ---- */
.hero {
  position: relative;
  min-height: 82vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  overflow: hidden;
}
.hero .bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.hero .bg::after {
  content: ''; position: absolute; inset: 0;
  background: var(--hero-veil);
}
.hero .sheen {
  position: absolute; inset: 0;
  background: var(--hero-sheen);
  pointer-events: none;
  z-index: 1;
}

/* ---- night sky fx: twinkling stars + shooting star ---- */
.hero .sky-fx {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.hero .star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px rgba(255,255,255,0.85);
  opacity: 0;
  animation-name: starTwinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: opacity, transform;
}
.hero .star-gold {
  background: #FFE79A;
  box-shadow: 0 0 6px rgba(255,231,154,0.95), 0 0 14px rgba(250,175,55,0.45);
}
@keyframes starTwinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.7); }
  50%      { opacity: 0.9;  transform: scale(1.15); }
}

.hero .shooting-star {
  position: absolute;
  width: 140px; height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 70%, #fff 100%);
  filter: drop-shadow(0 0 6px rgba(181,240,255,0.9));
  transform: translate3d(-20vw, 0, 0) rotate(18deg);
  opacity: 0;
  will-change: transform, opacity;
}
.hero .ss-1 {
  top: 10%; left: 0;
  animation: shootingStar 14s ease-out 4s infinite;
}
.hero .ss-2 {
  top: 28%; left: 0;
  animation: shootingStar 18s ease-out 11s infinite;
}
@keyframes shootingStar {
  0%   { transform: translate3d(-10vw, 0, 0) rotate(18deg); opacity: 0; }
  2%   { opacity: 0; }
  4%   { opacity: 1; }
  12%  { transform: translate3d(80vw, 28vh, 0) rotate(18deg); opacity: 0; }
  100% { transform: translate3d(80vw, 28vh, 0) rotate(18deg); opacity: 0; }
}

/* ---- localized water highlights — only where waterfalls drip from the islands ---- */
.hero .water-drips {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  mix-blend-mode: screen;
}
.hero .drip {
  position: absolute;
  transform: translateX(-50%);
  background: linear-gradient(180deg,
    rgba(181,240,255,0) 0%,
    rgba(181,240,255,0.22) 22%,
    rgba(181,240,255,0.32) 55%,
    rgba(181,240,255,0.18) 80%,
    rgba(181,240,255,0) 100%);
  filter: blur(7px);
  border-radius: 50%;
  opacity: 0.25;
  animation-name: dripGlow;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: opacity, transform;
}
@keyframes dripGlow {
  0%, 100% { opacity: 0.18; transform: translateX(-50%) scaleY(0.92); }
  50%      { opacity: 0.75; transform: translateX(-50%) scaleY(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .hero .star,
  .hero .shooting-star,
  .hero .drip { animation: none; }
  .hero .star { opacity: 0.6; }
  .hero .shooting-star { opacity: 0; }
  .hero .drip { opacity: 0.35; }
}

.hero .content {
  position: relative; z-index: 2;
  max-width: 820px; padding: 0 24px;
}
.hero-year {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: 44px auto 0; max-width: 480px;
}
.hero-year-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-gold), transparent);
}
.hero .hero-year .eyebrow {
  color: var(--accent);
  letter-spacing: 0.24em;
  white-space: nowrap;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5.6vw, 80px);
  line-height: 1.02;
  letter-spacing: 0.02em;
  margin: 0 0 20px;
  background: var(--gold-gradient-h);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.3));
}
.theme-night .hero h1 { filter: drop-shadow(0 0 24px rgba(250,175,55,0.35)); }
.theme-day .hero h1 {
  filter:
    drop-shadow(0 2px 0 rgba(19,98,166,0.55))
    drop-shadow(0 4px 10px rgba(19,98,166,0.55))
    drop-shadow(0 0 28px rgba(19,98,166,0.45));
}

/* Day theme: soft azure haze behind hero text — keeps art visible, adds contrast */
.theme-day .hero .content::before {
  content: '';
  position: absolute;
  inset: -60px -140px;
  background:
    radial-gradient(ellipse 62% 85% at 50% 50%,
      rgba(19,98,166,0.55) 0%,
      rgba(47,150,210,0.38) 40%,
      rgba(135,206,255,0.18) 72%,
      rgba(135,206,255,0) 92%);
  z-index: -1;
  pointer-events: none;
  filter: blur(16px);
}
.hero .lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--fg-1);
  margin: 0 0 36px;
  line-height: 1.5;
}
.theme-day .hero .lead {
  color: #FFFFFF;
  text-shadow:
    0 1px 2px rgba(19,98,166,0.75),
    0 2px 10px rgba(19,98,166,0.55);
}
.hero .cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---- buttons ---- */
.btn {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  transition: all var(--dur-base) var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--gold-gradient-h);
  color: var(--fg-on-gold);
  border-color: var(--border-gold-strong);
  box-shadow: var(--inner-gold);
}
.btn-primary:hover { box-shadow: var(--glow-gold), inset 0 0 0 1px rgba(255,231,154,0.7); transform: translateY(-1px); color: var(--fg-on-gold); }
.btn-primary:active { transform: translateY(1px); }
.btn-secondary {
  background: transparent;
  color: var(--fg-1);
  border-color: var(--border-gold);
}
.btn-secondary:hover { background: rgba(250,175,55,0.1); border-color: var(--accent); color: var(--accent); }
.theme-day .hero .btn-secondary {
  background: rgba(255,255,255,0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--c-ink);
  border-color: var(--border-gold-strong);
  box-shadow: 0 2px 12px rgba(11,27,58,0.18);
}
.theme-day .hero .btn-secondary:hover {
  background: rgba(255,255,255,0.92);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.theme-day .hero .play-btn .play-label {
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(19,98,166,0.7);
}
/* day: золотая полоска hero-year плохо читалась на светлом небе.
   тёмная бронза + сильная синяя тень. */
.theme-day .hero .hero-year .eyebrow {
  color: transparent;
  background: var(--gold-text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 1px 2px rgba(11, 27, 58, 0.55));
}
.btn-ghost {
  background: transparent;
  color: var(--fg-link);
  padding: 12px 8px;
  letter-spacing: 0.08em;
}
.btn-ghost:hover { color: var(--accent); }

/* ---- ornament divider ---- */
.ornament {
  display: flex; align-items: center; gap: 16px;
  justify-content: center;
  margin: 0 auto 32px;
  max-width: 600px;
}
.ornament .line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-gold), transparent);
}
.ornament .glyph {
  font-family: var(--font-display);
  color: var(--accent); font-size: 16px;
  letter-spacing: 0.3em;
}

/* ---- section header ---- */
.section-header { text-align: center; margin-bottom: 40px; }
.section-header .eyebrow { display: block; margin-bottom: 12px; color: var(--accent); }
.section-header h2 {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.1;
}
.section-header p { max-width: 580px; margin: 14px auto 0; font-family: var(--font-serif); font-style: italic; font-size: 15px; line-height: 1.55; color: var(--fg-2); }

/* ---- cards grid ---- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--bg-overlay);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-2), var(--inner-gold);
  transition: all var(--dur-base) var(--ease);
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-3), var(--glow-gold); }
.card .thumb { height: 180px; background-size: cover; background-position: center; position: relative; flex: 0 0 180px; }
.card .thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.5)); }
.card .body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.card .tag-row { display: flex; gap: 8px; margin-bottom: 10px; }
.card h3 {
  font-family: var(--font-serif);
  font-size: 24px; font-weight: 600;
  color: var(--fg-1); margin: 0 0 10px; line-height: 1.2;
}
.card .meta {
  font-family: var(--font-sans);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-muted); margin-bottom: 12px;
}
.card .excerpt { font-size: 14px; color: var(--fg-2); margin: 0 0 14px; line-height: 1.55; }
.card .more {
  color: var(--accent); font-weight: 600; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-top: auto; cursor: pointer; text-decoration: none;
  transition: color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.card .more:hover { color: var(--fg-1); transform: translateX(2px); }

/* ---- news modal ---- */
.modal-news { padding: 0; overflow: hidden; max-width: 820px; max-height: 90vh; overflow-y: auto; }
.news-modal-hero {
  height: 320px; background-size: cover; background-position: center 28%;
  position: relative;
}
.news-modal-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, transparent 45%, var(--bg-elevated) 100%);
}
.news-modal-tag { position: absolute; top: 20px; left: 24px; z-index: 2; }
.news-modal-body { padding: 12px 40px 40px; }
.news-modal-body h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  margin: 0 0 10px;
  line-height: 1.15;
  background: var(--gold-text-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.news-modal-meta {
  font-family: var(--font-sans);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-muted); margin-bottom: 24px;
}
.news-modal-body p {
  font-family: var(--font-serif);
  font-size: 17px; line-height: 1.65;
  color: var(--fg-2); margin: 0 0 14px;
}
.news-modal-body p b, .news-card .excerpt b {
  color: var(--fg-1);
  font-weight: 700;
}

/* --- Единый стиль расы [Code] перед ником: цветной (по getRaceMeta),
       monospace, fixed font-size 12px. Используется ВЕЗДЕ где упоминается боец:
       CouncilCard (Состав-карточки), RosterRow (Состав-список), TopRow (ТОП),
       TopHomeWidget (Лидеры клана), FounderCard (История). См. CLAUDE.md
       → «Отображение игрока apeha — единый стиль». --- */
.nick-race-tag {
  font-family: monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  flex: 0 0 auto;
  /* Цвет приходит inline-стилем из race.color (фиолетовый/зелёный/синий/серый). */
}

/* --- Inline никнейм бойца (стиль apeha [Hm] Ник 20 ℹ, но в нашей палитре).
       Используется в renderRichText() для меток [[ник]] в постах. --- */
.nick-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 1px 8px 2px;
  background: linear-gradient(180deg, rgba(40, 30, 70, 0.45) 0%, rgba(15, 13, 40, 0.35) 100%);
  border: 1px solid rgba(250, 175, 55, 0.30);
  border-radius: 4px;
  font-family: var(--font-serif);
  font-size: 0.94em;
  white-space: nowrap;
  vertical-align: baseline;
  text-decoration: none;
  margin: 0 1px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.4);
}
.nick-chip .nick-race {
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
}
.nick-chip .nick-name {
  color: #FFE79A;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.nick-chip .nick-level {
  color: #C8B47A;
  font-size: 0.85em;
  font-weight: 600;
  margin-left: 2px;
}
.nick-chip .nick-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(180deg, #5BA3F5 0%, #2F7BD0 100%);
  color: #FFFFFF;
  font-size: 9px;
  font-weight: 700;
  font-style: italic;
  font-family: 'Georgia', serif;
  text-decoration: none;
  margin-left: 4px;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: background .15s ease, transform .15s ease;
}
.nick-chip .nick-info:hover {
  background: linear-gradient(180deg, #6CB4FF 0%, #408CDD 100%);
  transform: translateY(-1px);
}
.theme-day .nick-chip {
  background: linear-gradient(180deg, rgba(255, 248, 230, 0.85) 0%, rgba(245, 232, 200, 0.75) 100%);
  border-color: rgba(180, 130, 30, 0.35);
}
.theme-day .nick-chip .nick-name { color: #6B4410; }
.theme-day .nick-chip .nick-level { color: #8B6420; }

/* ---- news carousel (archive) ---- */
.news-carousel {
  margin-top: 72px;
  padding: 40px 0;
  border-top: 1px solid var(--border-gold);
  border-bottom: 1px solid var(--border-gold);
  background: linear-gradient(180deg, transparent, rgba(250,175,55,0.03), transparent);
  overflow: hidden;
}
.news-carousel-head { text-align: center; margin-bottom: 28px; }
.news-carousel-head .eyebrow { color: var(--accent); letter-spacing: 0.28em; }
.news-carousel-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.news-carousel-track {
  display: flex; gap: 20px; width: max-content;
  animation: news-scroll 60s linear infinite;
  will-change: transform;
  padding: 4px 10px;
}
.news-carousel-track:hover { animation-play-state: paused; }
@keyframes news-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 10px)); }
}
.mini-card {
  flex: 0 0 320px;
  display: flex;
  height: 132px;
  background: var(--bg-overlay);
  border: 1px solid var(--border-gold);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.mini-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2), var(--glow-gold);
  border-color: var(--accent);
}
.mini-thumb {
  flex: 0 0 118px;
  background-size: cover; background-position: center;
  position: relative;
}
.mini-thumb::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 60%, rgba(0,0,0,0.35));
}
.mini-body {
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px; flex: 1;
  min-width: 0;
}
.mini-tag {
  font-family: var(--font-sans);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
}
.mini-title {
  font-family: var(--font-serif);
  font-size: 15px; font-weight: 600;
  color: var(--fg-1);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mini-date {
  margin-top: auto;
  font-family: var(--font-sans);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-muted);
}

/* ---- badge ---- */
.badge {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 4px;
}
.badge.gold { background: var(--gold-gradient-h); color: var(--fg-on-gold); }
.badge.blue { background: rgba(47,171,255,0.15); color: var(--c-laser, #2FABFF); border-color: rgba(47,171,255,0.4); }
.badge.warm { background: rgba(250,175,55,0.12); color: var(--accent); border-color: var(--border-gold); }
.theme-day .badge.warm { background: rgba(250,175,55,0.22); color: #6B4410; border-color: #C98A22; }
.badge.green { background: rgba(56,197,138,0.12); color: #38C58A; border-color: rgba(56,197,138,0.4); }
.badge.red { background: rgba(226,101,101,0.12); color: #E26565; border-color: rgba(226,101,101,0.4); }
.badge.mute { background: rgba(188,199,222,0.1); color: var(--fg-2); border-color: var(--border-1); }

/* ---- player mini card ---- */
.player {
  background: var(--bg-overlay);
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  backdrop-filter: blur(12px);
  transition: all var(--dur-base) var(--ease);
}
.player:hover { transform: translateY(-3px); box-shadow: var(--glow-gold); }
.player .avatar {
  width: 84px; height: 84px; border-radius: 50%;
  margin: 0 auto 12px;
  background-size: cover; background-position: center;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px rgba(250,175,55,0.1), 0 0 20px rgba(250,175,55,0.25);
  position: relative;
}
.player .avatar.laurel::before {
  content: ''; position: absolute; inset: -10px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(250,175,55,0.3), transparent, rgba(250,175,55,0.3), transparent);
  z-index: -1;
}
.player .name { font-family: var(--font-serif); font-size: 20px; font-weight: 600; color: var(--fg-1); }
.player .role { font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin: 4px 0 10px; }
.player .stats { font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); }
.player .online { color: #38C58A; font-size: 11px; margin-top: 8px; }

/* ======================================================================
   Stat pill — три «достижения» на главной (лет в строю / бойцов / орудий).
   Премиальный вид: золотая иконка-гравюра сверху, крупная цифра
   с золотым градиентом, узорный разделитель ✦, угловые золотые скобки.
   Заметная высота — это акцентный блок верха главной, не служебный.
   ====================================================================== */
.stats-section { padding: 64px 0; }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat-row--3 { grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) {
  .stat-row, .stat-row--3 { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}
@media (max-width: 640px) {
  .stat-row, .stat-row--3 { grid-template-columns: 1fr; gap: 14px; }
}

.stat {
  position: relative;
  text-align: center;
  padding: 26px 20px 22px;
  border: 1px solid rgba(250, 175, 55, 0.32);
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(250,175,55,0.10), transparent 70%),
    var(--bg-overlay);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    inset 0 0 0 1px rgba(250, 175, 55, 0.06),
    0 4px 18px rgba(0, 0, 0, 0.35);
  transition: transform var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
.stat:hover {
  transform: translateY(-2px);
  border-color: rgba(250, 175, 55, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(250, 175, 55, 0.12),
    0 8px 26px rgba(250, 175, 55, 0.18),
    0 4px 18px rgba(0, 0, 0, 0.4);
}
.theme-day .stat {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(242, 198, 98, 0.18), transparent 70%),
    rgba(255, 255, 255, 0.55);
}

/* Угловые «скобки» — узнаваемая для бренда деталь
   (повторяет паттерн portrait-corners в карточках Совета). */
.stat-corners {
  position: absolute; inset: 6px;
  pointer-events: none;
}
.stat-corners > span {
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid rgba(250, 175, 55, 0.5);
}
.stat-corners > span:nth-child(1) { top: 0;    left: 0;    border-right: 0; border-bottom: 0; }
.stat-corners > span:nth-child(2) { top: 0;    right: 0;   border-left: 0;  border-bottom: 0; }
.stat-corners > span:nth-child(3) { bottom: 0; left: 0;    border-right: 0; border-top: 0;    }
.stat-corners > span:nth-child(4) { bottom: 0; right: 0;   border-left: 0;  border-top: 0;    }
.stat:hover .stat-corners > span { border-color: rgba(250, 175, 55, 0.85); }

.stat-icon-wrap {
  display: flex; align-items: center; justify-content: center;
  height: 40px;
  margin-bottom: 8px;
  color: var(--accent);
  filter: drop-shadow(0 0 8px rgba(250, 175, 55, 0.35));
}
.stat-icon { width: 36px; height: 36px; }

.stat .n {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 700;
  background: var(--gold-text-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  letter-spacing: 0.02em;
}
@media (max-width: 900px) { .stat .n { font-size: 40px; } }

/* Разделитель между числом и подписью — две золотые черты со звездой
   посередине. То же декоративное настроение, что у орнаментов разделов. */
.stat-divider {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  margin: 10px auto 8px;
  max-width: 120px;
}
.stat-divider .line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(250, 175, 55, 0.55), transparent);
}
.stat-divider .star {
  color: var(--accent);
  font-size: 11px;
  line-height: 1;
}

.stat .l {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* ---- seal CTA ---- */
.seal-cta {
  text-align: center;
  padding: 96px 24px;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-gold);
  border-bottom: 1px solid var(--border-gold);
  position: relative;
  overflow: hidden;
}
.seal-cta::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(250,175,55,0.1), transparent 60%);
}
.seal-cta > * { position: relative; }

/* ---- footer ---- */
.site-footer {
  background: var(--bg-sunken);
  border-top: 1px solid var(--border-gold);
  padding: 64px 24px 32px;
  color: var(--fg-muted);
}
.site-footer .cols {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;
}
@media (max-width: 800px) { .site-footer .cols { grid-template-columns: 1fr 1fr; } }
/* Узкая мобилка: логотип и «Связь» растягиваем во всю ширину,
   «Клан» и «Летопись» остаются двумя центрированными колонками —
   визуально плотнее, без длинной колбасы из коротких ссылок. */
@media (max-width: 560px) {
  .site-footer { padding: 44px 20px 24px; text-align: center; }
  .site-footer .cols {
    grid-template-columns: 1fr 1fr;
    gap: 28px 16px;
    max-width: 440px;
  }
  /* первый блок — логотип + слоган, во всю ширину, центрируется */
  .site-footer .cols > div:nth-child(1) {
    grid-column: 1 / -1;
    text-align: center;
  }
  .site-footer .cols > div:nth-child(1) .logo-footer { height: 96px; margin: 0 auto 10px; }
  .site-footer .cols > div:nth-child(1) p { margin: 0 auto; max-width: 320px; }

  /* h5 на мобилке центрируется, шрифт чуть мельче */
  .site-footer h5 { text-align: center; font-size: 10px; margin-bottom: 10px; }
  .site-footer a { text-align: center; padding: 4px 0; font-size: 13px; }

  /* «Связь» — последний блок, во всю ширину и как строка из пилюль */
  .site-footer .cols > div:nth-child(4) {
    grid-column: 1 / -1;
    margin-top: 4px;
  }
  .site-footer .cols > div:nth-child(4) a {
    display: inline-block;
    padding: 7px 14px;
    margin: 4px 4px 0;
    border: 1px solid var(--border-gold);
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--fg-2);
    transition: all var(--dur-base) var(--ease);
  }
  .site-footer .cols > div:nth-child(4) a:hover {
    background: rgba(250,175,55,0.1);
    color: var(--accent);
    border-color: var(--accent);
  }

  .site-footer .bottom {
    margin-top: 28px; padding-top: 20px;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; text-align: center;
  }
  .citadel-mark { justify-content: center; }
}
.site-footer h5 {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
}
.site-footer a { display: block; color: var(--fg-2); font-size: 14px; padding: 4px 0; text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.site-footer a.footer-tg-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 9px 18px 9px 14px;
  border: 1px solid var(--border-gold);
  border-radius: 999px;
  color: var(--accent);
  background: rgba(250,175,55,0.06);
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 0.04em;
  transition: all var(--dur-base) var(--ease);
}
.site-footer a.footer-tg-link:hover {
  background: rgba(250,175,55,0.14);
  color: var(--fg-1);
  box-shadow: var(--glow-gold);
  transform: translateY(-1px);
}
.footer-tg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gold-gradient-h);
  color: var(--fg-on-gold);
  box-shadow: var(--inner-gold);
}
.footer-tg-icon svg { width: 14px; height: 14px; fill: currentColor; transform: translateX(-1px); }
.site-footer .bottom {
  max-width: 1280px; margin: 48px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--border-1);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  font-size: 12px; color: var(--fg-muted);
}
.citadel-mark { display: inline-flex; align-items: center; gap: 10px; }
.citadel-mark-logo {
  height: 22px; width: auto; display: block;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}

/* Счётчик apeha — кликабельный 88×31 баннер в золотой рамке + скрытый 1×1 трекинг-пиксель */
.apeha-mark { position: relative; }
.apeha-banner-link {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--border-gold);
  border-radius: 4px;
  background: rgba(212, 168, 83, 0.05);
  line-height: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.apeha-banner-link:hover {
  border-color: var(--border-gold-strong);
  background: rgba(212, 168, 83, 0.14);
  transform: translateY(-1px);
}
.apeha-banner-img {
  display: block;
  width: 88px; height: 31px;
  image-rendering: crisp-edges;
}
.apeha-mark-label {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-muted);
}
.theme-day .apeha-mark-label { color: #6B4410; }
.apeha-rating-pixel {
  position: absolute; left: 0; top: 0;
  width: 1px; height: 1px; opacity: 0;
  pointer-events: none;
}

/* ---- form ---- */
.form {
  max-width: 560px; margin: 0 auto;
  background: var(--bg-overlay);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  padding: 40px;
  box-shadow: var(--shadow-2);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) {
  .form { padding: 28px 22px; }
  .form-grid { grid-template-columns: 1fr; }
}
.form .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form label { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); }
.form .input, .form textarea, .form select {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-gold);
  border-radius: 6px;
  padding: 13px 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--fg-1);
  outline: none;
  transition: all var(--dur-base) var(--ease);
}
.theme-day .form .input, .theme-day .form textarea, .theme-day .form select {
  background: #fff;
}
.form .input:focus, .form textarea:focus, .form select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(250,175,55,0.15);
}

/* ---- scroll-reveal — paired with IntersectionObserver in app.jsx ---- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 720ms cubic-bezier(.2,.8,.2,1),
    transform 720ms cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-revealed { opacity: 1; transform: translateY(0); }
.reveal-fade { transform: translateY(0); }
.reveal-fade.is-revealed { transform: translateY(0); }
.reveal-scale { transform: translateY(20px) scale(0.96); }
.reveal-scale.is-revealed { transform: translateY(0) scale(1); }
/* containers can stagger their direct children automatically */
.reveal-stagger > * { transition-delay: calc(var(--stagger-step, 90ms) * var(--i, 0)); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-fade, .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* animations */
@keyframes gentleFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.float { animation: gentleFloat 6s ease-in-out infinite; }

@keyframes goldPulse { 0%, 100% { box-shadow: var(--inner-gold), 0 0 0 rgba(250,175,55,0); } 50% { box-shadow: var(--inner-gold), 0 0 28px rgba(250,175,55,0.5); } }
.pulse { animation: goldPulse 3s ease-in-out infinite; }

/* hero entrance — staggered fade-up */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroLineGrow {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}
.hero h1,
.hero .lead,
.hero .cta-row,
.hero .play-btn,
.hero .hero-year {
  opacity: 0;
  animation: heroFadeUp 900ms var(--ease-out) forwards;
}
.hero h1       { animation-delay: 120ms; }
.hero .lead    { animation-delay: 420ms; }
.hero .cta-row { animation-delay: 720ms; }
.hero .play-btn   { animation-delay: 1020ms; }
.hero .hero-year  { animation-delay: 1320ms; }

.hero .hero-year-line {
  transform-origin: center;
  animation: heroLineGrow 900ms var(--ease-out) 1500ms both;
}

@media (prefers-reduced-motion: reduce) {
  .hero h1, .hero .lead, .hero .cta-row, .hero .play-btn, .hero .hero-year,
  .hero .hero-year-line { animation: none; opacity: 1; transform: none; filter: none; }
}

/* ---- hamburger button — hidden on desktop, shown ≤900px ---- */
.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  background: transparent; border: 0; padding: 0;
  cursor: pointer;
  margin-left: auto;
  position: relative;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-base) var(--ease);
}
.menu-toggle:hover,
.menu-toggle:focus-visible { background: rgba(250,175,55,0.10); outline: none; }
.menu-toggle .bar {
  display: block;
  position: absolute; left: 50%;
  width: 22px; height: 2px;
  background: var(--accent);
  border-radius: 1px;
  transform-origin: center;
  transition: transform 280ms var(--ease), opacity 200ms var(--ease), top 280ms var(--ease);
}
.menu-toggle .bar:nth-child(1) { top: 14px; transform: translateX(-50%); }
.menu-toggle .bar:nth-child(2) { top: 21px; transform: translateX(-50%); }
.menu-toggle .bar:nth-child(3) { top: 28px; transform: translateX(-50%); }
.is-menu-open .menu-toggle .bar:nth-child(1) { top: 21px; transform: translateX(-50%) rotate(45deg); }
.is-menu-open .menu-toggle .bar:nth-child(2) { opacity: 0; transform: translateX(-50%) scaleX(0.4); }
.is-menu-open .menu-toggle .bar:nth-child(3) { top: 21px; transform: translateX(-50%) rotate(-45deg); }

/* ---- mobile drawer (offcanvas) — hidden on desktop ---- */
.mobile-drawer-backdrop,
.mobile-drawer { display: none; }

@media (max-width: 900px) {
  /* compact bar: hide desktop nav + theme, show hamburger */
  .site-header .nav,
  .site-header .theme-switch { display: none; }
  .site-header .inner {
    padding: 10px 16px; gap: 12px;
    /* keep the bar above the drawer overlay so the close-icon stays tappable */
    position: relative; z-index: 210;
  }
  .menu-toggle { display: block; }
  .brand .tag { display: none; }
  .brand .logo-wrap { height: 80px; margin: -10px 0 -22px; }
  .site-header.is-scrolled .brand .logo-wrap { height: 52px; margin: -4px 0 -10px; }

  /* backdrop fades in over page */
  .mobile-drawer-backdrop {
    display: block;
    position: fixed; inset: 0;
    background: rgba(5, 8, 18, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 190;
    opacity: 0; visibility: hidden;
    transition: opacity 280ms var(--ease), visibility 280ms var(--ease);
  }
  .site-header.is-menu-open .mobile-drawer-backdrop { opacity: 1; visibility: visible; }

  /* drawer slides down from the header */
  .mobile-drawer {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 195;
    padding: 96px 20px 28px;
    background:
      radial-gradient(ellipse 100% 60% at 50% 0%, rgba(250,175,55,0.06), transparent 60%),
      linear-gradient(180deg, #07101e, #050a14);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border-gold);
    box-shadow: 0 24px 48px -16px rgba(0,0,0,0.7);
    transform: translateY(-110%);
    transition: transform 360ms var(--ease);
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
  }
  .site-header.is-menu-open .mobile-drawer { transform: translateY(0); }

  .mobile-nav { display: flex; flex-direction: column; gap: 2px; margin: 0 0 22px; }
  .mobile-nav-link {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 14px;
    border-radius: 10px;
    font-family: var(--font-sans);
    font-size: 16px;
    color: var(--fg-1);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    border: 1px solid transparent;
    transition: background var(--dur-base) var(--ease),
                border-color var(--dur-base) var(--ease),
                color var(--dur-base) var(--ease),
                transform 120ms var(--ease);
    opacity: 0; transform: translateY(8px);
  }
  .site-header.is-menu-open .mobile-nav-link {
    animation: mobileNavIn 380ms var(--ease-out) forwards;
    animation-delay: calc(120ms + var(--i, 0) * 45ms);
  }
  .mobile-nav-link:active { transform: scale(0.98); }
  .mobile-nav-link.active {
    color: var(--accent);
    background: rgba(250,175,55,0.06);
    border-color: var(--border-gold);
  }
  .mobile-nav-bullet {
    color: var(--accent);
    font-size: 12px;
    opacity: 0.55;
    transition: opacity var(--dur-base) var(--ease);
  }
  .mobile-nav-link.active .mobile-nav-bullet { opacity: 1; }

  .mobile-theme {
    display: flex; gap: 6px;
    padding: 6px;
    border: 1px solid var(--border-gold);
    border-radius: 999px;
    background: rgba(255,255,255,0.02);
    margin: auto auto 0;
    max-width: 280px;
    width: 100%;
    opacity: 0; transform: translateY(8px);
  }
  .site-header.is-menu-open .mobile-theme {
    animation: mobileNavIn 380ms var(--ease-out) forwards;
    animation-delay: calc(120ms + 7 * 45ms);
  }
  .mobile-theme button {
    flex: 1;
    background: transparent;
    border: 0;
    padding: 10px 14px;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--fg-2);
    cursor: pointer;
    transition: all var(--dur-base) var(--ease);
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-theme button.active {
    background: var(--gold-gradient);
    color: #2a1c00;
    box-shadow: var(--inner-gold);
  }

  /* ---- day theme: светлая плашка вместо тёмной ---- */
  .theme-day .mobile-drawer {
    background:
      radial-gradient(ellipse 100% 60% at 50% 0%, rgba(250,175,55,0.10), transparent 60%),
      linear-gradient(180deg, #F8FBFF, #EFF4FF);
    box-shadow: 0 24px 48px -16px rgba(11, 27, 58, 0.18);
  }
  .theme-day .mobile-drawer-backdrop {
    background: rgba(11, 27, 58, 0.35);
  }
  .theme-day .mobile-theme {
    background: rgba(11, 27, 58, 0.04);
  }
}

@keyframes mobileNavIn {
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .mobile-drawer { transition: none; }
  .site-header.is-menu-open .mobile-nav-link,
  .site-header.is-menu-open .mobile-theme { animation: none; opacity: 1; transform: none; }
}

/* ---- play button (history video) ---- */
.play-btn {
  margin-top: 32px;
  display: inline-flex; align-items: center; gap: 14px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--fg-1);
  font-family: var(--font-sans);
  padding: 0;
}
.play-btn .play-ring {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(250,175,55,0.08);
  border: 1.5px solid var(--accent);
  color: var(--accent);
  transition: all var(--dur-base) var(--ease);
  box-shadow: 0 0 0 rgba(250,175,55,0), inset 0 0 0 1px rgba(255,231,154,0.25);
}
.play-btn:hover .play-ring {
  box-shadow: 0 0 28px rgba(250,175,55,0.55), inset 0 0 0 1px rgba(255,231,154,0.5);
  transform: scale(1.06);
  background: rgba(250,175,55,0.15);
}
.play-btn .play-label {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-2);
}
.play-btn:hover .play-label { color: var(--accent); }
.play-btn-lg .play-ring { width: 72px; height: 72px; }

/* ---- video modal ---- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(5, 8, 18, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: fadeIn 220ms var(--ease);
}
.theme-day .modal-backdrop { background: rgba(11, 27, 58, 0.55); }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
.modal {
  position: relative;
  width: 100%; max-width: 960px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  box-shadow: var(--shadow-3), var(--glow-gold);
  padding: 24px;
}
.modal-close {
  /* z-index удерживает кнопку над любыми позиционированными потомками
     (.modal-video, .news-modal-hero), которые иначе перекрывали её. */
  position: absolute; top: 12px; right: 12px;
  z-index: 3;
  width: 36px; height: 36px; border-radius: 50%;
  /* насыщенная тёмная подложка + видимая золотая рамка — кнопка читается
     поверх любой фоновой картинки модалки. */
  background: rgba(5, 8, 18, 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-gold-strong, var(--border-gold));
  color: var(--fg-1); cursor: pointer;
  font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45), 0 0 0 1px rgba(250,175,55,0.15) inset;
  transition: all var(--dur-base) var(--ease);
}
.modal-close:hover {
  background: var(--gold-gradient-h);
  color: var(--fg-on-gold);
  border-color: var(--border-gold-strong, var(--accent));
  transform: scale(1.05);
}
.theme-day .modal-close { background: rgba(255,255,255,0.92); color: var(--c-ink, #0B1B3A); }
.modal-video { aspect-ratio: 16/9; width: 100%; border-radius: 8px; overflow: hidden; position: relative; background: #000; }
.modal-video-player {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}
.video-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.55)),
    url('../../assets/castle-night.png') center/cover;
}
.theme-day .video-placeholder {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0.55)),
    url('../../assets/castle-day.png') center/cover;
}
.video-placeholder-icon { color: var(--accent); filter: drop-shadow(0 0 20px rgba(250,175,55,0.5)); }
.video-placeholder-title { margin-top: 18px; font-family: var(--font-serif); font-size: 24px; color: var(--fg-1); }
.video-placeholder-sub { margin-top: 8px; font-size: 13px; color: var(--fg-2); letter-spacing: 0.1em; }

/* ---- council premium portraits (180x180 squares) ---- */
/* padding-top оставляет место короне/иконке роли (position: absolute; top: -18…-22)
   — иначе она наезжает на заголовок/подзаголовок секции сверху. */
.council-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  justify-items: center;
  padding-top: 32px;
}
@media (max-width: 900px) { .council-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .council-grid { grid-template-columns: 1fr; } }
.council-card {
  text-align: center;
  max-width: 220px;
  width: 100%;
}
.portrait {
  position: relative;
  width: 180px; height: 180px;
  margin: 0 auto;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  overflow: visible;
  box-shadow:
    inset 0 0 0 3px #FAAF37,
    inset 0 0 0 4px rgba(0,0,0,0.4),
    inset 0 0 0 5px rgba(250,175,55,0.4),
    0 12px 32px rgba(0,0,0,0.5),
    0 0 28px rgba(250,175,55,0.25);
}
.portrait-frame {
  position: absolute; inset: -8px;
  border: 2px solid rgba(250,175,55,0.3);
  border-radius: 12px;
  pointer-events: none;
}
.portrait-corners::before,
.portrait-corners::after,
.portrait-frame::before,
.portrait-frame::after {
  content: ''; position: absolute;
  width: 18px; height: 18px;
  border: 2px solid #FAAF37;
  pointer-events: none;
}
.portrait-frame::before { top: -10px; left: -10px; border-right: 0; border-bottom: 0; }
.portrait-frame::after { top: -10px; right: -10px; border-left: 0; border-bottom: 0; }
.portrait-corners::before { bottom: -10px; left: -10px; border-top: 0; border-right: 0; }
.portrait-corners::after { bottom: -10px; right: -10px; border-top: 0; border-left: 0; }

/* when a live apeha avatar is loaded — use cover */
.portrait.has-avatar {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.portrait.has-avatar::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(14,16,58,0) 55%, rgba(14,16,58,0.55) 100%);
  pointer-events: none;
}
.portrait-letter {
  font-family: var(--font-display);
  font-size: 88px; font-weight: 700;
  color: rgba(255,231,154,0.95);
  text-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 0 24px rgba(250,175,55,0.4);
  line-height: 1;
}
.portrait-crown {
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  width: 44px; height: 22px;
  color: #FAAF37;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6)) drop-shadow(0 0 8px rgba(250,175,55,0.7));
}
.council-name-row {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 24px;
  max-width: 100%;
  flex-wrap: nowrap;
}
.council-clan-logo {
  width: 18px; height: 18px;
  border-radius: 3px;
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.council-name {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  letter-spacing: 0.08em;
  background: var(--gold-text-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Ник всегда в одну строку; длинные ники ужимаются модификатором --long
     (см. ниже), чтобы таблица/сетка не плыла. */
  white-space: nowrap;
}
/* Модификатор для длинных ников (≥ 13 символов) — ужимаем шрифт
   и кернинг, чтобы ник поместился в одну строку и карточка не плыла.
   Применяется из JSX на основании длины ника. */
.council-name--long { font-size: 14px; letter-spacing: 0.03em; }
.council-name--xlong { font-size: 12px; letter-spacing: 0.02em; }

.council-info-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  color: var(--fg-muted);
  border-radius: 50%;
  flex: 0 0 auto;
  transition: color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.council-info-link:hover { color: var(--accent); transform: scale(1.12); }
.council-info-icon { width: 18px; height: 18px; }
.council-role { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-2); margin-top: 6px; }
.council-stats { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); margin-top: 10px; }
/* Звёзды побед — отдельный ряд под именем/уровнем (без рейтинга, он на портрете). */
.council-power {
  margin-top: 8px;
  display: flex; align-items: center; justify-content: center;
}

/* Боевой рейтинг арены — оверлей в правом нижнем углу портрета поверх аватарки.
   «Стеклянный» бейдж с тёмной подложкой и золотой рамкой, чтобы читался
   и на светлой, и на тёмной части аватарки. */
.portrait-rating {
  position: absolute;
  right: 6px; bottom: 6px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px 4px 8px;
  border-radius: 999px;
  background: rgba(8, 12, 28, 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(250, 175, 55, 0.7);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.5),
    0 0 14px rgba(250, 175, 55, 0.25);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  z-index: 3;
  pointer-events: none;
}
.portrait-rating-icon {
  color: #FAAF37;
  font-size: 13px;
  filter: drop-shadow(0 0 4px rgba(250, 175, 55, 0.6));
}
.portrait-rating-val {
  font-weight: 700;
  color: #FFE79A;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.portrait--large .portrait-rating {
  right: 8px; bottom: 8px;
  padding: 5px 11px 5px 10px;
  font-size: 13px;
}
.portrait--large .portrait-rating-icon { font-size: 14px; }
.council-status { margin-top: 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.council-online { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.council-location {
  font-size: 11px;
  font-family: var(--font-serif); font-style: italic;
  color: var(--fg-muted);
  line-height: 1.35;
  max-width: 220px;
  display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Метка «когда мы видели бойца последний раз онлайн». Источник — наш state
   (clan-pulse.json), формируется в /api/profile. Стилистика — мелким курсивом,
   приглушённым тоном; единый формат «видели DD MMM в HH:MM». */
.council-last-seen {
  font-size: 10px;
  font-family: var(--font-serif); font-style: italic;
  color: var(--fg-3, #5d5872);
  letter-spacing: 0.02em;
  line-height: 1.3;
  margin-top: 2px;
  opacity: 0.85;
}
.theme-day .council-last-seen { color: rgba(40, 30, 70, 0.55); }
.council-battle {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #E24E4E;
  text-decoration: none;
  padding: 3px 10px;
  border: 1px solid rgba(226,78,78,0.45);
  border-radius: 999px;
  transition: all var(--dur-base) var(--ease);
}
.council-battle:hover { background: rgba(226,78,78,0.12); border-color: #E24E4E; }

/* ---- Pyramid layout: Глава в центре и чуть выше, заместитель слева, советник справа.
   Используется и в «Совете клана» на главной, и в «Составе клана». ---- */
.council-grid--pyramid {
  grid-template-columns: repeat(3, 1fr);
  max-width: 880px;
  margin: 0 auto;
  gap: 40px;
  align-items: start;
}
.council-grid--pyramid > .council-card:nth-child(1) {  /* Глава */
  grid-column: 2 / 3; grid-row: 1;
  transform: translateY(-28px);
}
.council-grid--pyramid > .council-card:nth-child(2) {  /* Заместитель */
  grid-column: 1 / 2; grid-row: 1;
}
.council-grid--pyramid > .council-card:nth-child(3) {  /* Советник */
  grid-column: 3 / 4; grid-row: 1;
}
@media (max-width: 820px) {
  .council-grid--pyramid { grid-template-columns: 1fr; max-width: 320px; }
  .council-grid--pyramid > .council-card:nth-child(1),
  .council-grid--pyramid > .council-card:nth-child(2),
  .council-grid--pyramid > .council-card:nth-child(3) {
    grid-column: 1 / 2; transform: none;
  }
  .council-grid--pyramid > .council-card:nth-child(1) { grid-row: 1; }
  .council-grid--pyramid > .council-card:nth-child(2) { grid-row: 2; }
  .council-grid--pyramid > .council-card:nth-child(3) { grid-row: 3; }
}

/* ---- Roster page: leadership (enlarged council cards) ---- */
.council-grid--leadership { }  /* совместимость: крупные карточки задаются через .council-card--large */

.council-card--large { max-width: 260px; }
.portrait--large {
  width: 220px; height: 220px;
  box-shadow:
    inset 0 0 0 3px #FAAF37,
    inset 0 0 0 4px rgba(0,0,0,0.4),
    inset 0 0 0 5px rgba(250,175,55,0.4),
    0 16px 40px rgba(0,0,0,0.55),
    0 0 38px rgba(250,175,55,0.3);
}
.portrait--large .portrait-letter { font-size: 108px; }
.council-card--large .council-name { font-size: 22px; }
.council-card--large .council-role { font-size: 12px; letter-spacing: 0.24em; }

/* ---- Star rating (Турнир Победителей) ---- */
.stars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 10px;
  line-height: 1;
}
.stars .star {
  position: relative;
  width: 14px; height: 14px;
  display: inline-block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45));
}
.stars .star-outline,
.stars .star-fill {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.stars-count {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(250, 175, 55, 0.9);
}
.stars--empty .stars-count { color: rgba(226, 78, 78, 0.8); }
.council-card--large .stars .star { width: 16px; height: 16px; }
.council-card--large .stars-count { font-size: 12px; }

/* ---- Compact role icon (для отдельных оружейных иконок) ---- */
.portrait-crown--compact {
  width: 28px;
  height: 28px;
  top: -22px;
}

/* ---- Roster page: rank-and-file grid + free slots ---- */
/* padding-top — резерв под иконки оружия над портретами (top: -18…-22). */
.roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 40px 28px;
  justify-items: center;
  padding-top: 32px;
}

/* Free-slot card — same skeleton as council-card, but hollow */
.council-card--free { opacity: 0.92; }
.portrait--free {
  background: rgba(11, 22, 44, 0.25);
  cursor: pointer;
  box-shadow:
    inset 0 0 0 2px rgba(250,175,55,0.28),
    inset 0 0 0 3px rgba(0,0,0,0.4),
    inset 0 0 0 4px rgba(250,175,55,0.12),
    0 6px 20px rgba(0,0,0,0.35);
  transition: all var(--dur-base) var(--ease);
}
.portrait--free::after {
  /* пунктирный «призрачный» внутренний контур — видно, что место свободно */
  content: '';
  position: absolute; inset: 6px;
  border: 1px dashed rgba(250, 175, 55, 0.4);
  border-radius: 4px;
  pointer-events: none;
}
.portrait--free:hover,
.portrait--free:focus-visible {
  outline: none;
  background: rgba(250, 175, 55, 0.08);
  box-shadow:
    inset 0 0 0 2px #FAAF37,
    inset 0 0 0 3px rgba(0,0,0,0.4),
    inset 0 0 0 4px rgba(250,175,55,0.35),
    0 12px 32px rgba(0,0,0,0.55),
    0 0 28px rgba(250,175,55,0.35);
}
.portrait--free:hover .portrait-free-plus,
.portrait--free:focus-visible .portrait-free-plus { color: var(--accent); transform: scale(1.08); }
.portrait-free-plus {
  font-family: var(--font-display);
  font-size: 96px; font-weight: 300;
  color: rgba(250, 175, 55, 0.45);
  line-height: 1;
  transition: all var(--dur-base) var(--ease);
  user-select: none;
}
.council-name--muted {
  color: var(--fg-muted) !important;
  -webkit-text-fill-color: var(--fg-muted) !important;
  background: none !important;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.council-join-btn {
  font-size: 11px;
  padding: 6px 14px;
  letter-spacing: 0.14em;
  margin-top: 4px;
}

/* ---- Join modal: сужает .modal под форму заявки ---- */
.modal-join { max-width: 560px; padding: 32px; }
.modal-join .section-header h2 { font-size: 28px; }
.modal-join .form {
  box-shadow: none;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  max-width: none;
}

/* ---- Citadel alliance block ---- */
.citadel {
  background: var(--bg-overlay);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  padding: 32px;
  box-shadow: var(--shadow-2), var(--inner-gold);
}
.citadel-head {
  display: flex; align-items: center; gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-1);
  margin-bottom: 24px;
}
.citadel-crest {
  position: relative; flex-shrink: 0;
  width: 80px; height: 90px;
  filter: drop-shadow(0 4px 14px rgba(250,175,55,0.35));
}
.citadel-crest-emblem {
  position: absolute; top: 50%; left: 50%;
  width: 32px; height: 32px;
  transform: translate(-50%, -50%);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.citadel-members { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 700px) { .citadel-members { grid-template-columns: 1fr; } .citadel-head { flex-direction: column; text-align: center; gap: 14px; } }
.citadel-member {
  display: flex; align-items: center; gap: 18px;
  padding: 18px;
  background: rgba(11,22,44,0.35);
  border: 1px solid var(--border-gold);
  border-radius: 10px;
}
.cm-logo {
  flex-shrink: 0;
  width: 48px; height: 48px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(250,175,55,0.10), rgba(0,0,0,0.45));
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border: 1px solid var(--border-gold);
  box-shadow: inset 0 0 0 1px rgba(14,16,58,0.6), 0 1px 6px rgba(0,0,0,0.35);
}
/* 16×16 native pixel art scaled 2× → sharp integer multiple, no blur, no chunky mess. */
.cm-emblem {
  width: 32px; height: 32px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.cm-name { font-family: var(--font-serif); font-size: 22px; font-weight: 600; color: var(--fg-1); margin-bottom: 4px; }
.cm-role { margin-bottom: 6px; }
.cm-meta { font-size: 12px; color: var(--fg-muted); }
.cm-meta a { color: var(--fg-link); }

/* ---- Alliance CTA «Вступить в союз» ------------------------------
   Лежит внутри .citadel ниже members-grid. Вёрстка — flex: текст слева,
   кнопка справа. На мобилке схлопывается в столбик.
   Визуально это «приглашение», а не просто кнопка — отсюда своя
   декоративная полоса-акцент и тёплый фон. */
.alliance-cta {
  margin-top: 22px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  background:
    linear-gradient(90deg, rgba(250,175,55,0.08), rgba(250,175,55,0.02) 60%, transparent),
    rgba(11,22,44,0.35);
  border: 1px dashed rgba(250,175,55,0.35);
  border-radius: 10px;
}
.alliance-cta-body { flex: 1; min-width: 0; }
.alliance-cta-title {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--fg-1);
  margin-bottom: 4px;
}
.alliance-cta-sub {
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.45;
}
.alliance-cta-btn { flex-shrink: 0; }

@media (max-width: 640px) {
  .alliance-cta {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 12px;
    padding: 16px;
  }
  .alliance-cta-btn { width: 100%; justify-content: center; }
}

/* ---- Alliance form — live-валидация игрового ника ----------------
   Показывается под полем «Игровой ник» в модалке AllianceJoinModal.
   Три состояния: checking / error / ok — у каждого свой цвет рамки. */
.alliance-nick-status {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.03);
  transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.alliance-nick-status.is-checking {
  color: var(--fg-muted);
  border-color: rgba(250,175,55,0.2);
}
.alliance-nick-status.is-err {
  color: #FF9A9A;
  background: rgba(180,40,40,0.08);
  border-color: rgba(220,80,80,0.4);
}
.alliance-nick-status.is-ok {
  color: var(--fg-1);
  background: rgba(56,197,138,0.08);
  border-color: rgba(56,197,138,0.35);
}

.alliance-nick-preview {
  display: flex;
  align-items: center;
  gap: 12px;
}
.alliance-nick-avatar {
  width: 44px; height: 44px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--avatar-bg);
  border: 1px solid var(--border-gold);
  flex-shrink: 0;
}
.alliance-nick-avatar--fallback {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--accent);
}
.alliance-nick-body { min-width: 0; }
.alliance-nick-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 15px;
  color: var(--fg-1);
  margin-bottom: 2px;
}
.alliance-nick-clan-logo {
  width: 16px; height: 16px;
  object-fit: contain;
}
.alliance-nick-check {
  color: #38C58A;
  font-weight: 700;
}
.alliance-nick-sub {
  font-size: 12px;
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}

/* ---- Friends of the clan block (not in Цитадель, just friendly) ---- */
/* Push the "Друзья клана" ornament away from the Цитадель card above,
   and tighten the gap to the first friend card so the ornament visually
   belongs to the friends section, not the alliance block. */
.friends-section { margin-top: 48px; }
.friends-section > .ornament { margin-bottom: 24px; }
.friends-block { margin-top: 0; }
.friends-grid {
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}
.friend-card {
  flex: 1 1 320px;
  max-width: 560px;
  display: flex; align-items: center; gap: 22px;
  padding: 22px 26px;
  background: var(--bg-overlay);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  box-shadow: var(--shadow-2), var(--inner-gold);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.friend-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-2), 0 0 22px rgba(250,175,55,0.25), var(--inner-gold);
}
/* Solo state — one card looks cleaner when it's presented as a featured card
   (wider, centered, with gentle gold glow) rather than a grid item stranded
   on the left of an otherwise-empty row. */
.friends-section.is-solo .friends-grid { justify-content: center; }
.friends-section.is-solo .friend-card {
  flex: 0 1 auto;
  min-width: 360px;
  padding: 28px 32px;
  background: linear-gradient(180deg, rgba(250,175,55,0.06) 0%, rgba(250,175,55,0) 100%), var(--bg-overlay);
}
.friends-empty,
.enemies-empty {
  text-align: center;
  padding: 40px 24px;
  border: 1px dashed var(--border-gold);
  border-radius: 12px;
  background: rgba(250,175,55,0.04);
  color: var(--fg-muted);
}
.friends-empty-icon,
.enemies-empty-icon {
  font-size: 28px;
  color: var(--accent);
  margin-bottom: 10px;
  opacity: 0.8;
}
.friends-empty-text,
.enemies-empty-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
}

/* ---- Diplomacy page: shared group header + separator between Союзники and Враги ---- */
.diplomacy-page .diplomacy-group + .diplomacy-group {
  margin-top: 72px;
  padding-top: 56px;
  border-top: 1px solid var(--border-1);
}
.diplomacy-group-head {
  text-align: center;
  margin: 0 auto 32px;
  max-width: 720px;
}
.diplomacy-group-head .eyebrow {
  display: block;
  margin-bottom: 12px;
  color: var(--accent);
}
.diplomacy-group-head h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.1;
  margin: 0;
  background: var(--gold-gradient-h);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.diplomacy-group-head p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 12px auto 0;
  max-width: 520px;
}

/* ---- Enemies list ---- */
.enemies-group { position: relative; }
.enemies-tabs {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 24px;
}
.enemies-tabs button {
  background: transparent;
  border: 1px solid var(--border-gold);
  color: var(--fg-2);
  padding: 8px 18px;
  border-radius: 999px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease);
  display: inline-flex; align-items: center; gap: 8px;
}
.enemies-tabs button.active {
  background: var(--gold-gradient-h);
  color: var(--fg-on-gold);
  border-color: var(--border-gold-strong);
  box-shadow: 0 2px 8px rgba(250,175,55,0.3);
}
.enemies-tabs .tab-count {
  background: rgba(14,16,58,0.25);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  letter-spacing: 0.05em;
}
.enemies-tabs button.active .tab-count { background: rgba(14,16,58,0.25); color: var(--fg-on-gold); }
.enemies-alert {
  text-align: center;
  background: rgba(220, 72, 72, 0.1);
  border: 1px solid rgba(220, 72, 72, 0.35);
  color: #FF9B9B;
  padding: 12px 18px;
  border-radius: 8px;
  margin-bottom: 24px;
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0.04em;
}
.enemies-alert b { color: #FFD5D5; }
.enemies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 32px;
  justify-items: center;
}
/* ======================================================================
   Enemy card — большой формат, аналог CouncilCard, но в кровавой эстетике.
   Квадратный портрет 180×180 в малиновой рамке, ниже — имя/уровень и
   статус-чипы. Угловой штамп на портрете (череп для мёртвого, прицел —
   для цели, щит — для онлайн).
   ====================================================================== */
.enemy-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  max-width: 240px; width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  transition: transform var(--dur-base) var(--ease);
}
.enemy-card:hover { transform: translateY(-2px); }
.enemy-card.is-dead { opacity: 0.78; }

/* Квадратный портрет 180×180 с малиновой рамкой. Зеркально повторяет
   .portrait у CouncilCard, но в кровавой палитре. */
.enemy-portrait {
  position: relative;
  width: 180px; height: 180px;
  margin: 0 auto;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  overflow: visible;
  background: radial-gradient(circle at 50% 35%, rgba(58, 18, 18, 0.7), rgba(14, 5, 5, 0.95));
  background-size: cover; background-position: center;
  box-shadow:
    inset 0 0 0 3px #B22222,
    inset 0 0 0 4px rgba(0, 0, 0, 0.5),
    inset 0 0 0 5px rgba(180, 30, 30, 0.45),
    0 12px 32px rgba(0, 0, 0, 0.55),
    0 0 28px rgba(180, 30, 30, 0.28);
  transition: box-shadow var(--dur-base) var(--ease);
}
.enemy-card.is-online .enemy-portrait {
  box-shadow:
    inset 0 0 0 3px #C8472A,
    inset 0 0 0 4px rgba(0, 0, 0, 0.5),
    inset 0 0 0 5px rgba(220, 90, 60, 0.5),
    0 12px 32px rgba(0, 0, 0, 0.55),
    0 0 28px rgba(220, 90, 60, 0.35);
}
.enemy-card.is-exposed .enemy-portrait {
  box-shadow:
    inset 0 0 0 3px #E04A2A,
    inset 0 0 0 4px rgba(0, 0, 0, 0.5),
    inset 0 0 0 5px rgba(255, 100, 80, 0.55),
    0 12px 32px rgba(0, 0, 0, 0.6),
    0 0 36px rgba(255, 80, 60, 0.55);
  animation: enemyPulse 2.4s ease-in-out infinite;
}
@keyframes enemyPulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.08); }
}
.enemy-card.is-dead .enemy-portrait {
  box-shadow:
    inset 0 0 0 3px rgba(120, 30, 30, 0.65),
    inset 0 0 0 4px rgba(0, 0, 0, 0.55),
    inset 0 0 0 5px rgba(80, 20, 20, 0.4),
    0 10px 26px rgba(0, 0, 0, 0.55);
  filter: grayscale(0.55) brightness(0.7);
}
.enemy-portrait.has-avatar { background-size: cover; background-position: center; }

/* Углы рамки — диагональные «прицельные» штрихи в малиновом тоне.
   Аналог .portrait-frame/.portrait-corners у Совета. */
.enemy-portrait-frame {
  position: absolute; inset: -8px;
  border: 2px solid rgba(180, 30, 30, 0.4);
  border-radius: 12px;
  pointer-events: none;
}
.enemy-portrait-corners::before,
.enemy-portrait-corners::after,
.enemy-portrait-frame::before,
.enemy-portrait-frame::after {
  content: ''; position: absolute;
  width: 18px; height: 18px;
  border: 2px solid #C8472A;
  pointer-events: none;
}
.enemy-portrait-frame::before { top: -10px; left: -10px; border-right: 0; border-bottom: 0; }
.enemy-portrait-frame::after  { top: -10px; right: -10px; border-left: 0; border-bottom: 0; }
.enemy-portrait-corners::before { bottom: -10px; left: -10px; border-top: 0; border-right: 0; }
.enemy-portrait-corners::after  { bottom: -10px; right: -10px; border-top: 0; border-left: 0; }

.enemy-portrait-letter {
  font-family: var(--font-display);
  font-size: 88px; font-weight: 700;
  color: rgba(255, 200, 200, 0.85);
  text-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 0 20px rgba(180, 30, 30, 0.6);
  line-height: 1;
}

/* Капля крови — над портретом (как корона у Совета). */
.enemy-ornament {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 30px;
  filter: drop-shadow(0 2px 6px rgba(220, 60, 60, 0.6));
  pointer-events: none;
  z-index: 2;
}
.enemy-card.is-exposed .enemy-ornament {
  filter: drop-shadow(0 0 10px rgba(255, 80, 80, 0.85));
}

/* Угловой штамп статуса — в правом нижнем углу портрета.
   Скруглённый «значок»: череп для мёртвого, прицел для цели, щит для онлайн. */
.enemy-portrait-stamp {
  position: absolute;
  right: -8px; bottom: -8px;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 12, 28, 0.92);
  border: 2px solid currentColor;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6), 0 0 16px currentColor;
  z-index: 3;
}
.enemy-portrait-stamp.is-dead    { color: #B22222; }
.enemy-portrait-stamp.is-target  { color: #FF5A3A; animation: enemyPulse 1.8s ease-in-out infinite; }
.enemy-portrait-stamp.is-online  { color: #FAAF37; }
.enemy-portrait-stamp svg { display: block; }

.enemy-body {
  margin-top: 22px;
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
}
.enemy-name-row {
  display: inline-flex; align-items: center; gap: 4px;
  max-width: 100%;
}
.enemy-name {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  letter-spacing: 0.10em;
  background: linear-gradient(90deg, #6B0F0F 0%, #B22222 30%, #E66060 50%, #B22222 70%, #6B0F0F 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
/* Длинные ники — уменьшаем шрифт, чтобы всё помещалось в одну строку.
   Те же пороги, что у .council-name (12 / 16 символов). */
.enemy-name--long  { font-size: 14px; letter-spacing: 0.05em; }
.enemy-name--xlong { font-size: 12px; letter-spacing: 0.03em; }
.enemy-card.is-dead .enemy-name { filter: grayscale(0.8); }

/* Рейтинг ⚡ на портрете врага — в левом нижнем углу (правый занят штампом).
   Цвет — кровавое золото, чтобы бейдж сразу читался как «вражеский». */
.portrait-rating--enemy {
  left: 6px; right: auto;
  border-color: rgba(178, 34, 34, 0.7);
  background: rgba(20, 6, 6, 0.85);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.5),
    0 0 14px rgba(178, 34, 34, 0.35);
}
.portrait-rating--enemy .portrait-rating-icon {
  color: #FFE079;
  filter: drop-shadow(0 0 4px rgba(255, 100, 80, 0.5));
}
.portrait-rating--enemy .portrait-rating-val { color: #FFD5D5; }

/* Локация / ссылка на бой — отдельная строка под чипами. */
.enemy-locale {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-2);
  letter-spacing: 0.04em;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.enemy-location { color: var(--fg-2); }
/* Метка «когда враг последний раз был онлайн» — единый формат, тихая
   приглушённая подпись под чипами. Источник — data/enemies.json (lastOnlineAt). */
.enemy-last-seen {
  margin-top: 8px;
  font-family: var(--font-serif); font-style: italic;
  font-size: 11px;
  color: rgba(184, 130, 130, 0.65); /* кровавая палитра, мягкий тон */
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.theme-day .enemy-last-seen { color: rgba(120, 30, 30, 0.55); }
.enemy-battle {
  color: #FF8A4A;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.enemy-battle:hover { color: #FFC890; text-decoration: underline; text-underline-offset: 3px; }
.enemy-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
  letter-spacing: 0.06em;
}
.enemy-chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  margin-top: 6px;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--border-1);
  background: rgba(14,16,58,0.25);
  color: var(--fg-2);
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-status.is-online { color: #38C58A; border-color: rgba(56,197,138,0.35); }
.chip-status.is-offline { color: var(--fg-muted); }
.chip-immunity.tone-safe { color: #38C58A; border-color: rgba(56,197,138,0.35); }
.chip-immunity.tone-alert { color: #FF8A8A; border-color: rgba(255,138,138,0.4); background: rgba(220,72,72,0.1); }
.chip-immunity.tone-muted { color: var(--fg-muted); }
.chip-clan img { width: 14px; height: 14px; image-rendering: pixelated; image-rendering: crisp-edges; }

/* «Мёртв · 2д 11ч» — ярче, чем обычные чипы, чтобы взгляд сразу падал. */
.chip-dead {
  color: #FF8A8A;
  border-color: rgba(220, 60, 60, 0.55);
  background: linear-gradient(90deg, rgba(120, 16, 16, 0.45), rgba(50, 8, 8, 0.5));
  letter-spacing: 0.06em;
}

/* «Цель в зоне» — кричащий, тёплый, золото-кровь. Появляется только когда
   враг онлайн без иммунитета — короткое окно для атаки. */
.chip-target {
  color: #FFE079;
  border-color: rgba(255, 180, 80, 0.6);
  background: linear-gradient(90deg, rgba(180, 50, 30, 0.55), rgba(140, 28, 20, 0.45));
  text-shadow: 0 0 8px rgba(255, 120, 80, 0.4);
  letter-spacing: 0.08em;
}
.friend-body { min-width: 0; }
/* Text links inside a friend-card (not icon-links) — dotted underline in link blue.
   Icon-links get their own minimalist style below. */
.friend-card .cm-meta a:not(.tg-link):not(.clan-info-link) {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  transition: color var(--dur-base) var(--ease);
}
.friend-card .cm-meta a:not(.tg-link):not(.clan-info-link):hover { color: var(--accent); }
/* Unified icon-links in clan cards — match the minimal style used by the
   Совет cards: no background, no border, muted neutral tint, accent on hover.
   Scoped under .cm-meta to beat the generic `.cm-meta a { color: --fg-link }` rule. */
.cm-meta .tg-link,
.cm-meta .clan-info-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  color: var(--fg-muted);
  vertical-align: middle;
  margin-left: 6px;
  transition: color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.cm-meta .tg-link:hover,
.cm-meta .clan-info-link:hover {
  color: var(--accent);
  transform: scale(1.12);
}
.cm-meta .tg-link svg,
.cm-meta .clan-info-link svg { width: 18px; height: 18px; }

/* ---- timeline ---- */
.timeline { position: relative; padding-left: 0; }
.timeline::before {
  content: ''; position: absolute;
  left: 130px; top: 8px; bottom: 8px; width: 1px;
  background: linear-gradient(180deg, transparent, var(--border-gold), transparent);
}
.tl-row {
  display: grid; grid-template-columns: 120px 20px 1fr;
  gap: 16px; align-items: flex-start;
  margin-bottom: 22px;
}
.tl-year {
  text-align: right;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--gold-text-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-top: 6px;
  white-space: nowrap;
}
.tl-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--bg), 0 0 12px rgba(250,175,55,0.55);
  margin-top: 8px;
  justify-self: center;
}
.tl-card {
  background: var(--bg-overlay);
  border: 1px solid var(--border-gold);
  border-radius: 8px;
  padding: 14px 18px;
  transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.tl-card:hover { border-color: var(--accent); box-shadow: 0 4px 18px rgba(250,175,55,0.12); }
.tl-card h4 { font-family: var(--font-serif); font-size: 19px; }
@media (max-width: 600px) {
  .timeline::before { left: 86px; }
  .tl-row { grid-template-columns: 78px 14px 1fr; gap: 10px; margin-bottom: 18px; }
  .tl-year { font-size: 12px; padding-top: 4px; }
  .tl-card { padding: 12px 14px; }
  .tl-card h4 { font-size: 16px; }
}

/* ---- chronicle chapter ---- */
.chronicle-chapter { margin-top: 64px; }
.chronicle-chapter--finale {
  margin-top: 32px;
  padding: 36px 28px 28px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(250,175,55,0.12), transparent 65%),
    var(--bg-overlay);
  border: 1px solid var(--border-gold);
  border-radius: 14px;
  box-shadow: var(--shadow-2), var(--inner-gold), 0 0 40px rgba(250,175,55,0.12);
}
.chronicle-chapter--finale .chapter-title {
  background: var(--gold-text-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.chronicle-chapter--finale .chapter-era { color: var(--accent); }
.chronicle-chapter--finale .tl-card {
  border-color: var(--accent);
  background: rgba(250,175,55,0.05);
  box-shadow: 0 4px 22px rgba(250,175,55,0.18);
}
.chronicle-chapter--finale .tl-card h4 {
  background: var(--gold-text-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}
.chronicle-chapter--finale .tl-dot {
  width: 16px; height: 16px;
  box-shadow: 0 0 0 3px var(--bg), 0 0 22px rgba(250,175,55,0.85);
}
.chronicle-chapter:first-of-type { margin-top: 48px; }
.chapter-head { text-align: center; margin-bottom: 36px; }
.chapter-era {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.chapter-title {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--fg-1);
}
.chapter-years {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.16em;
  color: var(--fg-muted);
  margin-bottom: 12px;
}
.chapter-lede {
  max-width: 560px; margin: 0 auto;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--fg-2);
  line-height: 1.5;
}

/* ---- founder card ---- */
.founder-card {
  display: flex; gap: 28px; align-items: center;
  padding: 28px;
  margin: 0 auto 16px;
  max-width: 780px;
  background: var(--bg-overlay);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  box-shadow: var(--shadow-2), var(--inner-gold);
  position: relative;
}
.founder-avatar {
  position: relative; flex-shrink: 0;
  width: 140px; height: 140px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--avatar-bg);
  box-shadow:
    inset 0 0 0 3px #FAAF37,
    inset 0 0 0 4px rgba(0,0,0,0.45),
    0 10px 28px rgba(0,0,0,0.5),
    0 0 24px rgba(250,175,55,0.28);
  image-rendering: -webkit-optimize-contrast;
}
.founder-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.founder-avatar::after {
  content: ''; position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,231,154,0.18), transparent 55%),
    linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.25));
}
.founder-body { flex: 1; min-width: 0; }
.founder-label {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.founder-name {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.founder-name-text {
  background: var(--gold-text-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.founder-name-race {
  font-size: 18px;
  letter-spacing: 0;
  font-weight: 600;
}
.founder-info-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  color: var(--fg-muted);
  border-radius: 50%;
  text-decoration: none;
  align-self: center;
  flex: 0 0 auto;
  transition: color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.founder-info-link:hover { color: var(--accent); transform: scale(1.12); }
.founder-info-link svg { width: 22px; height: 22px; }
.founder-text {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--fg-2);
  line-height: 1.55;
}
@media (max-width: 620px) {
  .founder-card { flex-direction: column; text-align: center; gap: 18px; padding: 22px; }
  .founder-avatar { width: 110px; height: 110px; }
  .founder-name { font-size: 22px; }
}

/* =================================================================== */
/* ---- Shared page hero (Устав, История, Состав, Новости, …) ---- */
/* =================================================================== */
.page-hero {
  padding: 64px 0 40px;
  text-align: center;
  position: relative;
  border-bottom: 1px solid var(--border-gold);
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, rgba(250,175,55,0.08), transparent 70%),
    var(--bg);
  transition: padding var(--dur-base) var(--ease);
}
.page-hero .eyebrow {
  color: var(--accent);
  letter-spacing: 0.28em;
  display: block;
  margin-bottom: 10px;
  max-height: 2em;
  overflow: hidden;
  transition: opacity var(--dur-base) var(--ease),
              max-height var(--dur-base) var(--ease),
              margin-bottom var(--dur-base) var(--ease);
}
.page-hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: 0.02em;
  margin: 0 0 12px;
  background: var(--gold-gradient-h);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.3));
  transition: font-size var(--dur-base) var(--ease),
              margin-bottom var(--dur-base) var(--ease);
}
.theme-night .page-hero-title { filter: drop-shadow(0 0 20px rgba(250,175,55,0.3)); }
.page-hero-subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--fg-2);
  margin: 0 auto 28px;
  max-width: 640px;
  line-height: 1.5;
  max-height: 200px;
  overflow: hidden;
  transition: opacity var(--dur-base) var(--ease),
              max-height var(--dur-base) var(--ease),
              margin-bottom var(--dur-base) var(--ease);
}
.page-hero .ornament {
  max-height: 60px;
  overflow: hidden;
  transition: opacity var(--dur-base) var(--ease),
              max-height var(--dur-base) var(--ease),
              margin-bottom var(--dur-base) var(--ease);
}

/* Scrolled state — collapses to a compact title bar so content rises sooner. */
.page-hero.is-scrolled { padding: 18px 0 14px; }
.page-hero.is-scrolled .eyebrow {
  opacity: 0;
  max-height: 0;
  margin-bottom: 0;
}
.page-hero.is-scrolled .page-hero-title {
  font-size: clamp(20px, 2.4vw, 28px);
  margin-bottom: 0;
}
.page-hero.is-scrolled .page-hero-subtitle {
  opacity: 0;
  max-height: 0;
  margin-bottom: 0;
}
.page-hero.is-scrolled .ornament {
  opacity: 0;
  max-height: 0;
  margin-bottom: 0;
}

/* =================================================================== */
/* ---- Mobile polish — global ---- */
/* =================================================================== */

/* Smooth scrolling on hash navigation. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media (max-width: 640px) {
  /* Kill the blue tap-flash on iOS / Chrome Android. */
  a, button, input, select, textarea, [role="button"] {
    -webkit-tap-highlight-color: transparent;
  }

  /* Hero typography — smaller display so titles don't dominate the screen. */
  .page-hero { padding: 28px 0 22px; }
  .page-hero-title { font-size: clamp(28px, 9vw, 40px) !important; }
  .page-hero-subtitle { font-size: 15px; padding: 0 8px; }
  .page-hero .eyebrow { font-size: 11px; }
  .page-hero .ornament { margin-bottom: 18px; max-width: 100%; padding: 0 16px; }
  .page-hero .ornament .glyph { font-size: 13px; letter-spacing: 0.22em; }

  /* Section vertical rhythm — tighter on small screens. */
  .section { padding: 44px 0; }
  .section-tight { padding: 28px 0; }

  /* Buttons feel pressable on touch — bigger hit area, snappy active scale. */
  .btn { padding: 14px 22px; font-size: 13px; min-height: 48px; }
  .btn-primary:active,
  .btn-secondary:active,
  .btn-ghost:active { transform: scale(0.97); }

  /* Section headers tighter so cards rise sooner. */
  .section-header { margin-bottom: 28px; }
  .section-header h2 { font-size: clamp(24px, 7vw, 32px); }

  /* Long URLs and unbreakable strings shouldn't overflow narrow screens. */
  body { word-wrap: break-word; overflow-wrap: break-word; }

  /* Container side padding more generous on phones. */
  .container { padding: 0 18px; }
}

/* Press-feedback for any clickable card/link — feels alive on touch. */
@media (hover: none) and (pointer: coarse) {
  .card:active,
  .news-card:active,
  .council-card:active,
  .citadel-card:active,
  .friends-card:active,
  .stat:active,
  .tl-card:active {
    transform: scale(0.985);
    transition: transform 120ms var(--ease);
  }
  /* Disable hover-only effects that get stuck after tap. */
  .btn-primary:hover { transform: none; }
}

/* Focus-visible ring for keyboard nav — light gold, accessible. */
:where(a, button, input, select, textarea, [role="button"]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =================================================================== */
/* ---- Устав (document body) ---- */
/* =================================================================== */
.charter { padding-bottom: 96px; }

/* document body */
.charter-doc {
  max-width: 820px;
  margin: 0 auto;
  padding: 64px 32px 0;
  font-family: var(--font-serif);
  color: var(--fg-1);
  line-height: 1.7;
}
.charter-section { margin-bottom: 72px; }
.charter-section-head {
  display: flex; align-items: baseline; gap: 20px;
  padding-bottom: 18px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border-gold);
  position: relative;
}
.charter-section-head::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(250,175,55,0.35) 50%, transparent);
}
.charter-roman {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 42px;
  background: var(--gold-gradient-h);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  flex: 0 0 auto;
  letter-spacing: 0.04em;
  min-width: 60px;
}
.charter-section-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 3vw, 34px);
  color: var(--fg-1);
  margin: 0;
  letter-spacing: 0.02em;
}

/* numbered list */
.charter-list,
.charter-sublist {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: clause;
}
.charter-list > li {
  counter-increment: clause;
  position: relative;
  padding-left: 44px;
  margin-bottom: 20px;
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--fg-1);
  line-height: 1.65;
}
.charter-list > li::before {
  content: counter(clause) '.';
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--accent);
  min-width: 32px;
  letter-spacing: 0.02em;
}
.charter-sublist {
  margin: 14px 0 8px;
  padding-left: 0;
}
.charter-sublist > li {
  counter-increment: clause;
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  font-size: 16px;
  color: var(--fg-2);
  line-height: 1.6;
}
.charter-sublist > li::before {
  content: '◆';
  position: absolute;
  left: 6px;
  top: 1px;
  color: var(--accent);
  font-size: 10px;
  opacity: 0.8;
}
.charter-doc a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed rgba(250,175,55,0.4);
  transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.charter-doc a:hover {
  color: var(--fg-1);
  border-bottom-color: var(--fg-1);
}

/* document footer */
.charter-foot {
  margin-top: 80px;
  text-align: center;
  padding-top: 32px;
}
.charter-sign {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 32px;
  line-height: 1.8;
}
.charter-foot .btn { margin-top: 12px; }

@media (max-width: 640px) {
  .page-hero { padding: 64px 0 40px; }
  .page-hero-subtitle { font-size: 18px; }
  .charter-doc { padding: 40px 20px 0; }
  .charter-section { margin-bottom: 48px; }
  .charter-section-head { gap: 14px; }
  .charter-roman { font-size: 32px; min-width: 44px; }
  .charter-list > li { padding-left: 34px; font-size: 15px; }
  .charter-sublist > li { font-size: 14px; }
}

/* =================================================================== */
/* ---- News page — shared look with home News block ---- */
/* =================================================================== */

/* home News CTA row: jump to full news page */
.news-cta-row {
  display: flex; justify-content: center;
  margin-top: 48px;
}

/* Filters: pill row */
.news-filters {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px;
  margin: 0 0 48px;
}
.news-filter {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--border-gold);
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all var(--dur-base) var(--ease);
}
.news-filter:hover {
  color: var(--accent);
  background: rgba(250,175,55,0.08);
  border-color: var(--accent);
}
.news-filter.active {
  color: var(--fg-on-gold);
  background: var(--gold-gradient-h);
  border-color: var(--border-gold-strong);
  box-shadow: var(--inner-gold);
}
.news-filter-count {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--fg-muted);
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-1);
  transition: all var(--dur-base) var(--ease);
}
.news-filter.active .news-filter-count {
  color: var(--fg-on-gold);
  background: rgba(11,27,58,0.25);
  border-color: rgba(11,27,58,0.35);
}

/* Featured card — same palette as card/.news-card but wide and bold */
.news-featured {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 0;
  background: var(--bg-overlay);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-2), var(--inner-gold);
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
  margin-bottom: 40px;
}
.news-featured:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-3), var(--glow-gold);
}
.news-featured-media {
  position: relative;
  min-height: 340px;
  background-size: cover;
  background-position: center;
}
.news-featured-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.45) 100%);
}
.news-featured-flag {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  font-family: var(--font-sans);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
  background: var(--gold-gradient-h);
  color: var(--fg-on-gold);
  box-shadow: 0 2px 10px rgba(250,175,55,0.4);
}
.news-featured-body {
  padding: 36px 36px 32px;
  display: flex; flex-direction: column;
  justify-content: center;
}
.news-featured-body .tag-row { margin-bottom: 14px; }
.news-featured-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.15;
  letter-spacing: 0.02em;
  margin: 0 0 12px;
  background: var(--gold-text-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.news-featured-meta {
  font-family: var(--font-sans);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 18px;
}
.news-featured-excerpt {
  font-family: var(--font-serif);
  font-size: 16px; line-height: 1.6;
  color: var(--fg-2);
  margin: 0 0 22px;
}
.news-featured .more {
  color: var(--accent); font-weight: 600; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none;
  align-self: flex-start;
  transition: color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.news-featured .more:hover { color: var(--fg-1); transform: translateX(2px); }

.news-grid-rest { margin-top: 8px; }

.news-empty {
  text-align: center;
  padding: 72px 24px;
  border: 1px dashed var(--border-gold);
  border-radius: 12px;
  background: rgba(250,175,55,0.03);
}
.news-empty .eyebrow { color: var(--accent); display: block; margin-bottom: 10px; }
.news-empty p {
  font-family: var(--font-serif); font-style: italic;
  color: var(--fg-2);
  margin: 0;
}

.news-page-foot {
  margin-top: 72px;
  text-align: center;
}
.news-page-foot .btn { margin-top: 12px; }

@media (max-width: 820px) {
  .news-featured { grid-template-columns: 1fr; }
  .news-featured-media { min-height: 220px; }
  .news-featured-body { padding: 26px 22px 24px; }
}
@media (max-width: 520px) {
  .news-filter { padding: 8px 14px; font-size: 10px; }
}

/* ============================================================
   DealerWidget — плавающий блок «Наш дилер» в правом углу.
   Десктоп: компактная карточка 260px. Мобилка ≤640px: нижняя
   полоса во всю ширину, более плоская вёрстка.
   Уровни:
   - z-index 180 — над контентом, под модалкой (500) и шапкой (200
     у шапки, но шапка всегда сверху из-за sticky + backdrop).
   - Вход — slide-in из-за правого края с лёгким fade.
   ============================================================ */

.dealer-widget {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 180;
  width: 260px;
  padding: 14px 14px 14px 16px;
  display: grid;
  grid-template-columns: 64px 1fr;
  grid-template-areas:
    "icon    body"
    "actions actions";
  column-gap: 14px;
  row-gap: 12px;
  align-items: flex-start;

  background: linear-gradient(150deg,
    rgba(19, 98, 166, 0.22) 0%,
    rgba(11, 27, 58, 0.88) 45%,
    rgba(8, 20, 36, 0.92) 100%);
  border: 1px solid rgba(250, 175, 55, 0.45);
  border-radius: 14px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(250, 175, 55, 0.12) inset,
    0 0 22px rgba(250, 175, 55, 0.16);

  opacity: 0;
  transform: translate3d(20px, 20px, 0) scale(0.96);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
  pointer-events: none;
}
.dealer-widget.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  pointer-events: auto;
}

/* День: чуть светлее фон, ярче рамка */
.theme-day .dealer-widget {
  background: linear-gradient(150deg,
    rgba(181, 240, 255, 0.42) 0%,
    rgba(255, 255, 255, 0.82) 45%,
    rgba(239, 244, 255, 0.9) 100%);
  border-color: rgba(242, 198, 98, 0.7);
  box-shadow:
    0 16px 36px rgba(59, 107, 214, 0.22),
    0 0 0 1px rgba(242, 198, 98, 0.18) inset,
    0 0 20px rgba(242, 198, 98, 0.2);
}

.dealer-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(250, 175, 55, 0.25);
  background: rgba(255, 255, 255, 0.05);
  color: var(--fg-muted);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-base) var(--ease);
  padding: 0;
}
.dealer-close:hover {
  color: var(--accent);
  background: rgba(250, 175, 55, 0.12);
  border-color: rgba(250, 175, 55, 0.5);
}

.dealer-icon-wrap {
  grid-area: icon;
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 2px 6px rgba(250, 175, 55, 0.4));
}
.dealer-icon-svg { width: 64px; height: 64px; display: block; }

/* Когда с apeha пришёл аватар персонажа — показываем его вместо
   SVG-заглушки. Стиль перекликается с портретом Совета: золотая рамка,
   скруглённые углы, лёгкое внутреннее свечение. */
.dealer-portrait {
  display: block;
  width: 64px; height: 64px;
  border-radius: 8px;
  background-size: cover;
  background-position: center top;
  background-color: var(--avatar-bg);
  box-shadow:
    inset 0 0 0 2px #FAAF37,
    inset 0 0 0 3px rgba(0,0,0,0.4),
    inset 0 0 0 4px rgba(250,175,55,0.35),
    0 6px 14px rgba(0,0,0,0.45),
    0 0 14px rgba(250,175,55,0.18);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.dealer-portrait:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 2px #FFE79A,
    inset 0 0 0 3px rgba(0,0,0,0.4),
    inset 0 0 0 4px rgba(250,175,55,0.5),
    0 8px 18px rgba(0,0,0,0.5),
    0 0 22px rgba(250,175,55,0.35);
}
/* Когда аватар загружен — виджету не нужно своё drop-shadow вокруг иконки:
   внутри .dealer-portrait уже есть свечение, двойное выглядит перегруженно. */
.dealer-icon-wrap.has-avatar { filter: none; }

.dealer-body { grid-area: body; min-width: 0; }

.dealer-eyebrow {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 2px;
}
.dealer-nick-row {
  display: flex; align-items: center; gap: 6px;
  margin-top: 1px;
}
.dealer-clan-logo {
  width: 16px; height: 16px; object-fit: contain;
  flex-shrink: 0;
}
.dealer-nick {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--fg-1);
  text-decoration: none;
  line-height: 1.1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color var(--dur-base) var(--ease);
}
.dealer-nick:hover { color: var(--accent); }

.dealer-status {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 4px;
}

.dealer-actions {
  grid-area: actions;
  display: flex;
  gap: 6px;
}

.dealer-btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease);
  white-space: nowrap;
}
.dealer-btn-gold {
  background: var(--gold-gradient-h);
  color: var(--fg-on-gold);
  border: 1px solid rgba(250, 175, 55, 0.6);
  box-shadow: 0 2px 10px rgba(250, 175, 55, 0.22);
}
.dealer-btn-gold:hover {
  box-shadow: 0 4px 16px rgba(250, 175, 55, 0.45);
  transform: translateY(-1px);
}
.dealer-btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  color: var(--fg-1);
  border: 1px solid rgba(250, 175, 55, 0.3);
}
.dealer-btn-ghost:hover {
  background: rgba(250, 175, 55, 0.1);
  border-color: rgba(250, 175, 55, 0.55);
  color: var(--accent);
}
.theme-day .dealer-btn-ghost {
  background: rgba(11, 27, 58, 0.06);
  color: var(--fg-1);
}

/* Мобильная версия — компактная карточка, прижата к правому нижнему углу.
   Не тянем во всю ширину (раньше так футер полностью закрывался).
   Раскладка та же, что на десктопе: icon + body сверху, actions — снизу.
   Крестик остаётся в «пустом» верхнем углу над телом, не лезет на кнопку.
   На iPhone safe-area-bottom учитывается через env(). */
@media (max-width: 640px) {
  .dealer-widget {
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    width: 260px;
    max-width: calc(100vw - 20px);
    padding: 12px 14px;
    grid-template-columns: 56px 1fr;
    grid-template-areas:
      "icon body"
      "actions actions";
    column-gap: 12px;
    row-gap: 10px;
    border-radius: 12px;
    align-items: center;
  }
  .dealer-widget.is-visible { transform: translate3d(0, 0, 0) scale(1); }
  .dealer-icon-wrap { width: 56px; height: 56px; }
  .dealer-icon-svg { width: 56px; height: 56px; }
  .dealer-portrait { width: 56px; height: 56px; }
  .dealer-eyebrow { font-size: 8px; letter-spacing: 0.14em; }
  .dealer-nick { font-size: 14px; }
  .dealer-status { font-size: 9px; margin-top: 3px; }
  .dealer-btn {
    padding: 7px 8px;
    font-size: 10px;
    letter-spacing: 0.03em;
  }
  .dealer-btn svg { width: 13px; height: 13px; }
  .dealer-close {
    top: 6px; right: 6px;
    width: 22px; height: 22px;
    font-size: 11px;
  }
}

/* Снимаем анимацию входа, если пользователь просил reduce-motion */
@media (prefers-reduced-motion: reduce) {
  .dealer-widget { transition: opacity 200ms linear; transform: none; }
  .dealer-widget.is-visible { transform: none; }
}

/* ============================================================
   Roster — режим «Список» (альтернатива карточкам).
   Переключатель сверху страницы. Дальше — таблица в виде
   CSS-grid с фиксированными колонками: аватар, имя+роль, мета,
   рейтинг, турнир, статус. На мобиле перестраивается в плотные
   двухстрочные блоки.
   ============================================================ */

/* --- Переключатель режима --------------------------------- */
.roster-view-bar {
  padding: 18px 0 0;
  display: flex;
  justify-content: flex-end;
}
.roster-view-bar .container {
  display: flex;
  justify-content: flex-end;
}
.roster-view-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border-gold);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(6px);
}
.roster-view-switch button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  transition: all var(--dur-base) var(--ease);
}
.roster-view-switch button:hover { color: var(--fg-1); }
.roster-view-switch button.active {
  background: var(--gold-gradient-h);
  color: var(--fg-on-gold);
  box-shadow: 0 2px 8px rgba(250, 175, 55, 0.32);
}
.roster-view-switch svg { color: currentColor; flex-shrink: 0; }
@media (max-width: 520px) {
  .roster-view-switch button span { display: none; }
  .roster-view-switch button { padding: 8px 10px; }
}

/* --- Контейнер списка ------------------------------------- */
.roster-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* --- Шапка колонок (десктоп) ------------------------------ */
.roster-list-head {
  display: grid;
  grid-template-columns: 56px minmax(220px, 1.6fr) minmax(180px, 1.4fr) 110px 140px minmax(180px, 1.4fr);
  gap: 16px;
  padding: 0 16px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.roster-list-head .rh-rating,
.roster-list-head .rh-wins,
.roster-list-head .rh-status { text-align: center; }

/* --- Группа (Совет / Бойцы) ------------------------------- */
.roster-list-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--border-1);
  border-radius: 12px;
  background: rgba(11, 27, 58, 0.28);
  padding: 12px;
}
.theme-day .roster-list-group { background: rgba(255, 255, 255, 0.5); }

.rl-group-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 6px 8px 14px;
  border-bottom: 1px dashed rgba(250, 175, 55, 0.25);
  margin-bottom: 4px;
}
.rl-group-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.rl-group-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-muted);
  padding: 2px 8px;
  border: 1px solid var(--border-1);
  border-radius: 999px;
}

/* --- Строка списка ---------------------------------------- */
.roster-row {
  display: grid;
  grid-template-columns: 56px minmax(220px, 1.6fr) minmax(180px, 1.4fr) 110px 140px minmax(180px, 1.4fr);
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: rgba(11, 27, 58, 0.22);
  transition: background var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}
.theme-day .roster-row { background: rgba(255, 255, 255, 0.55); }
.roster-row:hover {
  background: rgba(250, 175, 55, 0.08);
  border-color: rgba(250, 175, 55, 0.35);
  transform: translateY(-1px);
}
.roster-row.is-online { border-color: rgba(56, 197, 138, 0.28); }
.roster-row.is-leader { border-color: rgba(250, 175, 55, 0.35); }
.roster-row.is-leader .rr-nick { background: var(--gold-text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.roster-row.is-dead { opacity: 0.7; filter: grayscale(0.35); }

/* Аватар */
.rr-avatar {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(250,175,55,0.15), rgba(11,27,58,0.6));
  background-size: cover; background-position: center;
  border: 1px solid var(--border-gold);
  color: var(--fg-2);
  font-family: var(--font-display);
  font-size: 18px;
  text-decoration: none;
  flex-shrink: 0;
  transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.rr-avatar:hover { box-shadow: 0 0 14px rgba(250, 175, 55, 0.45); transform: scale(1.04); }
.rr-avatar.has-avatar { background-color: var(--avatar-bg); }
.rr-avatar.has-avatar > span { display: none; }

/* Иконка роли (корона/мечи/свиток) — маленькая, в углу аватара */
.rr-avatar-corner {
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 11px;
  color: var(--accent);
  filter: drop-shadow(0 0 4px rgba(250, 175, 55, 0.5));
}
.rr-avatar-corner svg { width: 100%; height: 100%; }

/* Имя + роль (две строки) */
.rr-name { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rr-nick-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rr-clan-logo {
  width: 14px; height: 14px;
  object-fit: contain;
  flex-shrink: 0;
}
.rr-nick {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rr-nick--long  { font-size: 15px; }
.rr-nick--xlong { font-size: 13px; }
.rr-info {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  color: var(--fg-muted);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease);
}
.rr-info:hover { color: var(--accent); }
.rr-info svg { width: 16px; height: 16px; }
.rr-role {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.roster-row:not(.is-leader) .rr-role { color: var(--fg-muted); }

/* Мета (уровень/раса/класс) */
.rr-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-2);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Рейтинг ⚡ */
.rr-rating {
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: #FFE79A;
  white-space: nowrap;
}
.rr-rating-icon { color: var(--accent); font-size: 13px; }
.rr-rating .rr-dim { color: var(--fg-muted); font-weight: 400; }

/* Турнир — звёзды + число. Звёзды и число — на одной базовой линии,
   ровно по центру колонки, чтобы строка не «гуляла». */
.rr-wins {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
}
.rr-wins .stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.rr-wins .star { width: 12px; height: 12px; position: relative; line-height: 0; }
.rr-wins .star-outline,
.rr-wins .star-fill { width: 100%; height: 100%; position: absolute; inset: 0; display: block; }
.rr-wins-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-2);
  min-width: 22px;
  text-align: right;
  line-height: 1;
}

/* Статус — две строки в одной колонке, обе центрированы.
   Первая строка: ● + "Онлайн" одной flex-row (без переноса).
   Вторая (опциональная): локация мелким серым.
   Колонка целиком отцентрирована по горизонтали и вертикали row'а. */
.rr-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-1);
  min-width: 0;
  width: 100%;
}
.rr-status-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.rr-status-dot {
  flex-shrink: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  display: block;
}
.rr-status-dot.is-on   { background: #38C58A; box-shadow: 0 0 6px rgba(56,197,138,0.6); }
.rr-status-dot.is-off  { background: var(--fg-muted); }
.rr-status-dot.is-dead { background: #B22222; box-shadow: 0 0 6px rgba(178,34,34,0.6); }
.rr-status-label {
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
}
.rr-where {
  font-size: 11px;
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.2;
}
.rr-last-seen {
  font-size: 10px;
  font-family: var(--font-serif); font-style: italic;
  color: var(--fg-3, #5d5872);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.2;
  opacity: 0.85;
}
.theme-day .rr-last-seen { color: rgba(40, 30, 70, 0.55); }

/* --- Адаптив: планшет → две колонки рядов ----------------- */
@media (max-width: 980px) {
  .roster-list-head { display: none; }
  .roster-row {
    grid-template-columns: 56px 1fr;
    grid-template-areas:
      "avatar  name"
      "avatar  meta"
      "rating  wins"
      "status  status";
    row-gap: 6px;
    column-gap: 14px;
    padding: 14px;
  }
  .rr-avatar  { grid-area: avatar; align-self: start; }
  .rr-name    { grid-area: name; }
  .rr-meta    { grid-area: meta; }
  .rr-rating  { grid-area: rating; justify-content: flex-start; padding-top: 4px; border-top: 1px dashed rgba(250,175,55,0.18); }
  .rr-wins    { grid-area: wins; justify-content: flex-end; padding-top: 4px; border-top: 1px dashed rgba(250,175,55,0.18); }
  .rr-status  { grid-area: status; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 6px; }
  .rr-where   { margin-left: 0; }
}

/* --- Адаптив: телефон → ещё плотнее ------------------------ */
@media (max-width: 520px) {
  .roster-row {
    grid-template-columns: 44px 1fr;
    column-gap: 12px;
    padding: 12px;
  }
  .rr-avatar { width: 40px; height: 40px; }
  .rr-nick { font-size: 15px; }
  .rr-meta { font-size: 11px; }
  .rl-group-title { padding: 4px 6px 10px; }
}

/* ============================================================================
   ТОП КЛАНА — страница `/#/top` + виджет на главной.
   Структура: трофейные карточки → селекторы → шапка → строки/карточки → футер.
   На десктопе строка идёт grid-таблицей (5 колонок), на мобиле — карточный
   список (тот же DOM, другой layout).
   ============================================================================ */

.top-trophies {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.top-trophy {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--border-gold, rgba(250,175,55,0.35));
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(11,16,40,0.55), rgba(11,16,40,0.25));
  position: relative;
  overflow: hidden;
}
.top-trophy::before {
  content: '';
  position: absolute; inset: 0 -40% auto auto;
  width: 80%; height: 100%;
  background: radial-gradient(ellipse at right, rgba(250,175,55,0.18), transparent 70%);
  pointer-events: none;
}
.top-trophy-icon { font-size: 38px; line-height: 1; flex-shrink: 0; filter: drop-shadow(0 2px 6px rgba(250,175,55,0.35)); }
.top-trophy-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
/* Компактный портрет в трофейной карточке — переиспользуем тот же класс .portrait,
   что и в CouncilCard (Состав), чтобы все портреты на сайте были в одном стиле:
   квадрат со скруглением 8px, золотая рамка, угловые corner-маркеры.
   Только размер меньше + рамка тоньше. */
.portrait--trophy {
  width: 92px; height: 92px;
  margin: 0 0 0 auto;
  flex-shrink: 0;
  box-shadow:
    inset 0 0 0 2px #FAAF37,
    inset 0 0 0 3px rgba(0,0,0,0.4),
    inset 0 0 0 4px rgba(250,175,55,0.4),
    0 8px 20px rgba(0,0,0,0.4),
    0 0 18px rgba(250,175,55,0.25);
}
.portrait--trophy .portrait-frame {
  inset: -6px;
  border-radius: 10px;
}
.portrait--trophy .portrait-frame::before,
.portrait--trophy .portrait-frame::after,
.portrait--trophy .portrait-corners::before,
.portrait--trophy .portrait-corners::after {
  width: 12px; height: 12px;
  border-width: 1.5px;
}
.portrait--trophy .portrait-frame::before  { top: -8px; left: -8px; }
.portrait--trophy .portrait-frame::after   { top: -8px; right: -8px; }
.portrait--trophy .portrait-corners::before { bottom: -8px; left: -8px; }
.portrait--trophy .portrait-corners::after  { bottom: -8px; right: -8px; }
.portrait--trophy .portrait-letter {
  font-size: 38px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6), 0 0 14px rgba(250,175,55,0.35);
}
.top-trophy-meta .eyebrow { color: var(--accent); font-size: 11px; }
.top-trophy-title {
  margin: 0; font-family: var(--font-display, var(--font-serif));
  font-size: 18px; letter-spacing: 0.02em;
  background: var(--gold-text-gradient);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.top-trophy-body {
  margin: 0;
  color: var(--fg-2);
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.top-trophy-metric {
  color: var(--accent);
  font-family: var(--font-display, var(--font-serif));
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.theme-day .top-trophy-metric { color: #6B4410; }
/* Внутри трофейной карточки блок ника — компактнее, без верхнего отступа. */
.top-trophy-body .top-nick { font-size: 16px; }
.top-trophy-body .top-nick-meta { font-size: 12px; }

.theme-day .top-trophy {
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.25));
  border-color: #C98A22;
}
/* Пустая трофейная карточка — приглушаем, чтобы не путали «+0 побед» с реальным результатом. */
.top-trophy--empty { opacity: 0.55; }
.top-trophy--empty .top-trophy-icon { filter: grayscale(0.6); }
.top-trophy-empty {
  font-style: italic;
  color: var(--fg-2);
  font-size: 13px;
}

/* Инфо-плашка про накопление статистики — показывается, пока дельты/ачивки пустые. */
.top-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  margin: 0 0 16px;
  border: 1px dashed rgba(47,171,255,0.35);
  border-radius: 10px;
  background: rgba(47,171,255,0.06);
  color: var(--fg-2);
  font-size: 13px;
  line-height: 1.55;
}
.theme-day .top-info { background: rgba(47,171,255,0.08); border-color: rgba(47,171,255,0.45); }
.top-info-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.top-info b { color: var(--fg-1, #FFE79A); }

/* --- Селекторы --- */
.top-controls {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding: 16px;
  border: 1px solid var(--border-1, rgba(188,199,222,0.18));
  border-radius: 12px;
  background: rgba(11,16,40,0.35);
}
.theme-day .top-controls { background: rgba(255,255,255,0.55); border-color: rgba(0,0,0,0.08); }
.top-control { display: flex; flex-direction: column; gap: 4px; min-width: 160px; flex: 1 1 160px; }
.top-control-label {
  font-family: var(--font-sans, sans-serif);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-2);
}
.top-control select,
.top-control input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(11,16,40,0.6);
  color: var(--fg-1, #FFE79A);
  border: 1px solid var(--border-gold, rgba(250,175,55,0.35));
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
}
.theme-day .top-control select,
.theme-day .top-control input[type="date"] { background: #fff; color: #2a2a2a; border-color: #C98A22; }

/* --- Заголовок таблицы --- */
.top-list-head,
.top-row {
  display: grid;
  grid-template-columns: 56px minmax(220px, 1.6fr) 140px 110px 1fr;
  align-items: center;
  gap: 12px;
}
.top-list-head {
  padding: 8px 16px;
  border-bottom: 1px dashed rgba(250,175,55,0.25);
  margin-bottom: 8px;
  font-family: var(--font-sans, sans-serif);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-2);
}

.top-list { display: flex; flex-direction: column; gap: 8px; }
.top-row {
  padding: 12px 16px;
  border: 1px solid rgba(250,175,55,0.12);
  border-radius: 10px;
  background: rgba(11,16,40,0.45);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.top-row:hover {
  transform: translateY(-1px);
  border-color: rgba(250,175,55,0.32);
  box-shadow: 0 4px 16px rgba(250,175,55,0.08);
}
.theme-day .top-row { background: rgba(255,255,255,0.55); }
.top-row--top3 { border-color: rgba(250,175,55,0.45); background: linear-gradient(90deg, rgba(250,175,55,0.06), rgba(11,16,40,0.45)); }
.theme-day .top-row--top3 { background: linear-gradient(90deg, rgba(250,175,55,0.18), rgba(255,255,255,0.55)); }

.top-cell { display: flex; align-items: center; min-width: 0; }
.top-cell--place { justify-content: center; }
.top-cell--nick  { gap: 12px; min-width: 0; }
.top-cell--value { justify-content: flex-end; font-variant-numeric: tabular-nums; }
.top-cell--delta { justify-content: flex-end; }
.top-cell--badges { justify-content: flex-start; }

.top-place {
  font-size: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  font-family: var(--font-display, var(--font-serif));
  color: var(--accent);
}
.top-place--1, .top-place--2, .top-place--3 { font-size: 26px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }

.top-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--border-gold, rgba(250,175,55,0.35));
  background: linear-gradient(135deg, #3B6BD6, #0E103A);
  display: flex; align-items: center; justify-content: center;
}
.top-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.top-avatar-fallback { color: #FFE79A; font-family: var(--font-display, var(--font-serif)); font-size: 18px; }

.top-nick-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Ряд «[Race] Ник {ℹ}» — ник не кликабельный, кликабельна только иконка.
   Единый формат с CouncilCard/RosterRow (см. CLAUDE.md → «Единый формат ника»). */
.top-nick-row { display: inline-flex; gap: 8px; align-items: center; min-width: 0; }
.top-nick {
  display: inline-flex; gap: 6px; align-items: baseline;
  color: var(--fg-1, #FFE79A);
  font-family: var(--font-display, var(--font-serif));
  font-size: 17px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.top-nick--gold {
  background: var(--gold-text-gradient);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.top-nick-race { font-family: monospace; font-size: 12px; }
.top-nick-name { font-style: italic; }
.top-nick-meta { color: var(--fg-2); font-size: 12px; }
/* Кликабельный значок «ℹ» — копия .council-info-link для единого формата ника. */
.top-info-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  color: var(--fg-muted);
  border-radius: 50%;
  flex: 0 0 auto;
  text-decoration: none;
  transition: color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.top-info-link:hover { color: var(--accent); transform: scale(1.12); }
.top-info-link svg { width: 16px; height: 16px; }

.top-value {
  font-family: var(--font-display, var(--font-serif));
  font-size: 22px;
  color: var(--fg-1, #FFE79A);
}
.top-value--gold {
  background: var(--gold-text-gradient);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.top-delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-sans, monospace);
  font-size: 14px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.top-delta--up   { color: #38C58A; background: rgba(56,197,138,0.10); border-color: rgba(56,197,138,0.35); }
.top-delta--down { color: #BCC7DE; background: rgba(188,199,222,0.08); border-color: rgba(188,199,222,0.25); }
.top-delta--zero { color: var(--fg-2); padding: 0; border: none; background: none; }

.top-badges { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.top-badge {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px 7px;
  font-size: 13px;
  border-radius: 999px;
  background: rgba(250,175,55,0.12);
  border: 1px solid rgba(250,175,55,0.32);
  color: var(--accent);
}
.top-badge-glyph { font-size: 14px; line-height: 1; }
.top-badge-count { font-size: 12px; font-variant-numeric: tabular-nums; }
.top-badges-empty { color: var(--fg-2); font-size: 13px; opacity: 0.5; }

.top-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--fg-2);
  border: 1px dashed rgba(250,175,55,0.22);
  border-radius: 10px;
  background: rgba(11,16,40,0.25);
}
.top-empty .eyebrow { color: var(--accent); margin-bottom: 6px; display: block; }
.top-empty p { margin: 0; font-style: italic; }
.top-empty--err { border-color: rgba(226,101,101,0.35); background: rgba(226,101,101,0.06); }

.top-foot { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 28px; }
.top-foot-hint { margin: 0; color: var(--ink-muted, #8A93AB); font-size: 13px; letter-spacing: 0.05em; font-style: italic; }

/* --- Виджет «Лидеры клана» на главной --- */
.top-home-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.top-home-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(250,175,55,0.22);
  border-radius: 12px;
  background: rgba(11,16,40,0.45);
}
.theme-day .top-home-card { background: rgba(255,255,255,0.55); }
.top-home-card--p1 { border-color: rgba(250,175,55,0.6); }
.top-home-card--p2 { border-color: rgba(195,200,210,0.45); }
.top-home-card--p3 { border-color: rgba(204,140,80,0.42); }
.top-home-place { font-size: 22px; }
.top-home-avatar {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  border: 1px solid var(--border-gold, rgba(250,175,55,0.35));
  background: linear-gradient(135deg, #3B6BD6, #0E103A);
  display: flex; align-items: center; justify-content: center;
}
.top-home-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.top-home-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
/* TopHomeWidget теперь использует <PlayerNickBlock /> — стили .top-home-nick
   удалены за ненужностью. Если что-то ещё пишет этот класс — это регрессия. */
.top-home-value {
  font-family: var(--font-display, var(--font-serif));
  font-size: 22px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.top-home-unit { font-size: 13px; color: var(--fg-2); margin-left: 4px; font-style: italic; }

/* --- Адаптив: планшет --- */
@media (max-width: 980px) {
  .top-trophies { grid-template-columns: 1fr; }
  .top-home-grid { grid-template-columns: 1fr; }
  .top-list-head { display: none; }
  .top-row {
    grid-template-columns: 56px 1fr 110px;
    grid-template-areas:
      'place nick   value'
      'place badges delta';
    row-gap: 6px;
    column-gap: 12px;
    padding: 12px 14px;
  }
  .top-cell--place  { grid-area: place; align-self: center; }
  .top-cell--nick   { grid-area: nick; }
  .top-cell--value  { grid-area: value; justify-content: flex-end; }
  .top-cell--delta  { grid-area: delta; justify-content: flex-end; }
  .top-cell--badges { grid-area: badges; }
}

/* --- Адаптив: телефон --- */
@media (max-width: 520px) {
  .top-row {
    grid-template-columns: 44px 1fr;
    grid-template-areas:
      'place nick'
      'place value'
      '.     delta'
      '.     badges';
    row-gap: 4px;
    padding: 12px;
  }
  .top-place { font-size: 20px; }
  .top-avatar { width: 36px; height: 36px; }
  .top-nick { font-size: 15px; }
  .top-value { font-size: 18px; }
  .top-controls { gap: 10px; }
  .top-control { min-width: 100%; }
}

/* ==========================================================================
   Контакты — связь с советом клана. Одна крупная карточка.
   ========================================================================== */
.contacts-card {
  position: relative;
  padding: 56px 48px 48px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(250,175,55,0.10), transparent 55%),
    var(--bg-2);
  border: 1px solid var(--border-gold);
  box-shadow: 0 30px 80px -32px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(250,175,55,0.05);
  text-align: center;
}
.contacts-card-emblem {
  width: 220px;
  height: 220px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 8px 28px rgba(70,130,200,0.35)) drop-shadow(0 4px 16px rgba(250,175,55,0.25));
}
.contacts-card-emblem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
@media (max-width: 720px) {
  .contacts-card-emblem { width: 160px; height: 160px; margin-bottom: 18px; }
}
.contacts-card-title {
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-size: 30px;
  letter-spacing: 0.02em;
  background: var(--gold-text-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.contacts-card-handle {
  margin: 0 0 22px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.contacts-card-lead {
  max-width: 520px;
  margin: 0 auto 28px;
  font-family: var(--font-serif);
  font-size: 16px;
  font-style: italic;
  line-height: 1.7;
  color: var(--fg-2);
}
.contacts-card-cta {
  display: inline-block;
  padding: 14px 36px;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.contacts-steps {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  text-align: left;
}
.contacts-steps li {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: start;
  gap: 18px;
  padding: 18px 22px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
}
.contacts-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gold-gradient-h);
  color: var(--fg-on-gold);
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  box-shadow: var(--inner-gold);
}
.contacts-steps h4 {
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--fg-1);
}
.contacts-steps p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-2);
}
.contacts-steps a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed var(--accent);
}
.contacts-steps a:hover { color: var(--fg-1); }
.contacts-note {
  max-width: 540px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.65;
  color: var(--fg-muted);
}
.contacts-note code {
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(250,175,55,0.10);
  border: 1px solid rgba(250,175,55,0.25);
  color: var(--accent);
  font-size: 13px;
}
@media (max-width: 720px) {
  .contacts-card { padding: 36px 22px 32px; border-radius: 14px; }
  .contacts-card-title { font-size: 24px; }
  .contacts-card-lead { font-size: 15px; }
  .contacts-steps li { grid-template-columns: 44px 1fr; gap: 14px; padding: 14px 16px; }
  .contacts-step-num { width: 36px; height: 36px; font-size: 18px; }
}

/* ============================================================================
   Last-seen — «последний раз: город Ковчег» в карточках оффлайн-бойцов.
   Источник: profile.lastSeen (apeha-строка вида «не в игре, город Ковчег»,
   склеенная без префикса «не в игре»). Рендерится отдельной мелкой строкой
   под council-last-seen (timestamp) — два поля дополняют друг друга.
   ============================================================================ */
.council-last-loc {
  font-size: 10.5px;
  font-family: var(--font-serif); font-style: italic;
  color: var(--fg-muted);
  letter-spacing: 0.02em;
  line-height: 1.3;
  margin-top: 1px;
  max-width: 220px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  opacity: 0.9;
}
.theme-day .council-last-loc { color: rgba(40, 30, 70, 0.6); }