/* ============================================================================
   «На мосту» — королевский архив тактик Clash Royale. Собственная дизайн-система.
   Шрифты — assets/fonts/fonts.css (локально). Утилиты раскладки даёт Tailwind (assets/css/tailwind.css, собран заранее),
   всё, что формирует характер сайта, — здесь. Цвета задаются только токенами:
   тёмная тема в :root, светлая — в [data-theme="light"].
   ========================================================================= */

/* --- Токены: тёмная тема -------------------------------------------- */
:root {
  /* Чернильно-фиолетовая ночь турнира */
  --ink-900: #14112b;
  --ink-800: #1b1738;
  --ink-700: #241e49;

  /* Панели и текст */
  --vellum-panel: #211b44;
  --vellum-100: #f2eeff;   /* основной текст */
  --vellum-300: #c6bdea;   /* подзаголовки, лиды */
  --vellum-500: #9086bd;   /* подписи, метаданные */

  /* Золото корон — линии и акценты */
  --gold-400: #ffc93c;
  --gold-600: #c9962a;
  --gold-line: rgba(255, 201, 60, 0.24);

  /* Данные: эликсир — стоимость, синий — метрики */
  --elixir: #cf6bff;
  --royal: #5aa8ff;
  --ember: #ff7a5e;        /* предупреждения аудита */
  --moss: #5fbb45;         /* требование выполнено */

  --notch: 14px;           /* срезанный угол панелей */
  --rule: 1px solid var(--gold-line);

  /* Поверхности */
  --header-bg: rgba(20, 17, 43, .93);
  --slot-bg: rgba(12, 10, 28, .55);
  --tile-bg: linear-gradient(170deg, rgba(255,255,255,.045), rgba(0,0,0,.25));
  --tile-bg-hover: linear-gradient(170deg, rgba(224,180,87,.12), rgba(0,0,0,.3));
  --tile-line: rgba(242, 238, 255, .14);
  --field-bg: #171232;
  --meter-track: rgba(242, 238, 255, .12);
  --drawer-line: rgba(242, 238, 255, .08);
  --quiet-line: rgba(242, 238, 255, .2);
  --hairline-soft: rgba(242, 238, 255, .1);
  --panel-sheen: linear-gradient(170deg, rgba(207,107,255,.1), transparent 55%);
  --grain-opacity: .05;
  --grain-blend: overlay;
  --vignette: radial-gradient(120% 85% at 50% 0%, rgba(160,90,255,.22) 0%, transparent 58%),
              radial-gradient(100% 100% at 50% 100%, rgba(0,0,0,.55) 0%, transparent 60%);
  --scheme: dark;

  /* Арена */
  --arena-foe-1: #2b4a2c; --arena-foe-2: #1f3822;   /* трава половины соперника */
  --arena-my-1: #27432a;  --arena-my-2: #325537;    /* трава своей половины */
  --arena-river: #1f4d78;                            /* река */
  --arena-bridge: #7a5a2e;                           /* деревянные мосты */
  --arena-tower: #2b2118;
  --tower-stone: #6f6784; --tower-line: #1d1733; --tower-door: #2a2340;
  --tower-foe: #d2503a;  --tower-mine: #3f86d8;
  --badge-foe: #a83a28;  --badge-mine: #2a63ad;
  --crown: #ffc93c;      --crown-line: #c9962a;
  --card-art-bg: #191537;
  --title-shadow: rgba(0, 0, 0, .35);
  --btn-1: #8f37e8; --btn-2: #5f17ad; --btn-edge: #43107e;
}

/* --- Токены: светлая тема «дневной пергамент» ----------------------- */
[data-theme="light"] {
  /* Дневная арена: светлое поле, дерево, зелень */
  --ink-900: #e9f0d9;
  --ink-800: #dfe8c9;
  --ink-700: #cfdcb3;

  --vellum-panel: #fdfaf0;
  --vellum-100: #241a10;
  --vellum-300: #4a3823;
  --vellum-500: #6f5b3c;

  --gold-400: #86540e;
  --gold-600: #c08c2c;
  --gold-line: rgba(122, 82, 20, .3);

  --elixir: #8d1fa3;
  --royal: #1a5f97;
  --ember: #a6331f;
  --moss: #356b24;

  --header-bg: rgba(233, 240, 217, .95);
  --slot-bg: rgba(255, 253, 244, .8);
  --tile-bg: linear-gradient(170deg, rgba(255,255,255,.85), rgba(122,82,20,.07));
  --tile-bg-hover: linear-gradient(170deg, rgba(224,180,87,.35), rgba(255,255,255,.7));
  --tile-line: rgba(36, 26, 16, .18);
  --field-bg: #fffdf4;
  --meter-track: rgba(36, 26, 16, .14);
  --drawer-line: rgba(36, 26, 16, .12);
  --quiet-line: rgba(36, 26, 16, .24);
  --hairline-soft: rgba(36, 26, 16, .14);
  --panel-sheen: linear-gradient(170deg, rgba(255,255,255,.9), transparent 60%);
  --grain-opacity: .1;
  --grain-blend: multiply;
  --vignette: radial-gradient(120% 80% at 50% 0%, rgba(120,170,80,.18) 0%, transparent 60%);
  --scheme: light;
  --card-art-bg: #f1ead9;
  --title-shadow: rgba(122, 82, 20, .2);
  --btn-1: #3a7f1f; --btn-2: #2b6414; --btn-edge: #1e4a0d;

  --arena-foe-1: #b9d99a; --arena-foe-2: #a6c988;
  --arena-my-1: #c6e0a7;  --arena-my-2: #b0d193;
  --arena-river: #7fb6de;
  --arena-bridge: #c79a52;
  --arena-tower: #f3e6cd;
  --tower-stone: #ece2c8; --tower-line: #6b5227; --tower-door: #7a5c30;
  --tower-foe: #cc4c33;  --tower-mine: #2f76c4;
  --badge-foe: #a83320;  --badge-mine: #1f5793;
  --crown: #eaa61b;      --crown-line: #8a5a10;
}

/* --- Ресет (preflight у Tailwind отключён) --------------------------- */
*, *::before, *::after { box-sizing: border-box; }
img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }

/* --- База ------------------------------------------------------------ */
html { background: var(--ink-900); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink-900);
  color: var(--vellum-100);
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Зерно и виньетка на всём документе: «тёмная комната архива» */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
}
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: var(--vignette);
}
.layer { position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 3px; }

/* --- Типографика ----------------------------------------------------- */
.font-title { font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; letter-spacing: .05em; }
.font-mono  { font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; }
.tabular { font-variant-numeric: tabular-nums; }

h1, h2, h3, h4 {
  font-family: 'Nunito', system-ui, sans-serif; line-height: 1.2; margin: 0; font-weight: 800;
  letter-spacing: -.005em; overflow-wrap: break-word;
}
h1, h2 { text-shadow: 0 2px 0 var(--title-shadow); }
/* Переносы по слогам — только крупным титулам: там длинное слово
   («конфиденциальности») иначе вылезает за экран. */
h1, h2, h3 { hyphens: auto; }
h1 { font-size: clamp(2rem, 5.2vw, 3.4rem); letter-spacing: -.005em; }
h2 { font-size: clamp(1.45rem, 3.4vw, 2.1rem); }
h3 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); }

/* Каталожный шифр: моноширинная строка над каждым блоком */
.shelf-code {
  font-family: 'Nunito', system-ui, sans-serif; font-weight: 800;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--vellum-500);
  display: inline-flex; align-items: center; gap: .6rem;
}
.shelf-code::before {
  content: ''; width: 26px; height: 1px; background: var(--gold-600); display: inline-block;
}

/* Золочение — тонкое, только на титулах */
.gilded {
  background: linear-gradient(100deg, #a8792b 0%, #f0d089 38%, #e0b457 52%, #a8792b 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="light"] .gilded {
  background: linear-gradient(100deg, #7c5510 0%, #a9803a 45%, #8a6114 100%);
  -webkit-background-clip: text; background-clip: text;
}

/* --- Поверхности ----------------------------------------------------- */
/* Пергаментная панель вместо «карточки с тенью»: тёплая подложка, зерно,
   срезанный угол, золотые засечки. */
.vellum {
  position: relative;
  background: var(--panel-sheen), var(--vellum-panel);
  border: var(--rule);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
}
.vellum::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23p)' opacity='.5'/%3E%3C/svg%3E");
  opacity: .07;
}
/* Угловая засечка — деталь прежнего «архивного» оформления, выключена */
.corner-ticks::after { content: none; }

.hairline { height: 1px; background: linear-gradient(90deg, transparent, var(--gold-line) 15%, var(--gold-line) 85%, transparent); }

.rule-diamond { display: flex; align-items: center; gap: 1rem; color: var(--gold-600); }
.rule-diamond::before, .rule-diamond::after {
  content: ''; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
}

/* Корешок тома — от прежнего оформления, в игровом виде скрыт */
.spine { display: none; }
.spine--legacy {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: 'Nunito', system-ui, sans-serif; letter-spacing: .34em; text-transform: uppercase;
  font-size: 12px; color: var(--vellum-500);
  border-left: 1px solid var(--gold-line); border-right: 1px solid var(--gold-line);
  padding: 1.4rem .55rem;
  background: linear-gradient(180deg, rgba(224,180,87,.07), transparent 60%);
}

/* --- Действия: печать, ссылка, ярлык, поле ---------------------------- */
/* Кнопка как в игре: объём и нажатие вниз */
.seal {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  padding: .8rem 1.5rem; border: 0; border-radius: 12px;
  font-family: 'Nunito', system-ui, sans-serif; font-weight: 800;
  font-size: .85rem; letter-spacing: .05em; text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg, var(--btn-1), var(--btn-2));
  box-shadow: 0 4px 0 var(--btn-edge), 0 8px 16px rgba(0, 0, 0, .22);
  position: relative;
  transition: filter .2s ease, transform .1s ease, box-shadow .1s ease;
}
.seal:hover { filter: brightness(1.07); color: #fff; }
.seal:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--btn-edge); }
.seal--quiet {
  color: var(--vellum-100); background: none;
  box-shadow: inset 0 0 0 2px var(--quiet-line);
}
.seal--quiet:hover { filter: none; color: var(--vellum-100); box-shadow: inset 0 0 0 2px var(--vellum-300); }
.seal--quiet:active { box-shadow: inset 0 0 0 2px var(--vellum-300); }

/* Текстовая ссылка с прорастающим подчёркиванием */
.ink-link { position: relative; color: var(--gold-400); }
.ink-link::after {
  content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px;
  background: currentColor; transition: width .28s ease;
}
.ink-link:hover::after { width: 100%; }

/* Ярлык-фильтр справочника: тач-цель 44px и видимое активное состояние */
.chip {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .5rem .95rem; border-radius: 999px;
  font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; font-size: 12px;
  letter-spacing: .02em;
  color: var(--vellum-300); border: 1px solid var(--gold-line);
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.chip:hover { color: var(--vellum-100); border-color: var(--vellum-300); }
.chip[aria-pressed="true"] {
  color: var(--gold-400); border-color: var(--gold-400); background: rgba(224, 180, 87, .1);
}

/* Поле ввода: 16px на телефоне обязательны — иначе Safari на iOS
   масштабирует страницу при фокусе. */
.field {
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 16px; line-height: 1.2;
  width: 100%; min-height: 44px; padding: .6rem .75rem; border-radius: 10px;
  background: var(--field-bg);
  border: 1px solid var(--gold-line);
  color: var(--vellum-100);
  color-scheme: var(--scheme);       /* нативные спиннеры в тон теме */
  -webkit-text-fill-color: var(--vellum-100);
}
/* Автозаполнение браузера иначе заливает поле белым и топит текст */
.field:-webkit-autofill,
.field:-webkit-autofill:hover,
.field:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--field-bg) inset;
  -webkit-text-fill-color: var(--vellum-100);
  caret-color: var(--vellum-100);
}
.field:focus { outline: 2px solid var(--gold-400); outline-offset: 1px; }
.field::placeholder { color: var(--vellum-500); }

/* --- Навигация ------------------------------------------------------- */
/* Полки: горизонтальная прокрутка со снапом */
.rail {
  display: flex; gap: 1.25rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: .5rem;
  cursor: grab;
}
.rail::-webkit-scrollbar { display: none; }
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rail > * { scroll-snap-align: start; flex: 0 0 auto; }

/* Лента разделов под шапкой */
.nav-rail {
  display: flex; gap: .35rem; overflow-x: auto;
  scrollbar-width: none; scroll-snap-type: x proximity;
}
.nav-rail::-webkit-scrollbar { display: none; }
.nav-rail a {
  flex: 0 0 auto; scroll-snap-align: start;
  padding: .55rem .95rem;
  font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; font-size: 13.5px;
  letter-spacing: .01em; color: var(--vellum-500);
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.nav-rail a:hover { color: var(--vellum-100); }
.nav-rail a[aria-current="page"] { color: var(--gold-400); border-bottom-color: var(--gold-400); }

/* Ящик картотеки — мобильное меню */
.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(86vw, 360px); z-index: 70;
  background: var(--ink-800); border-left: 1px solid var(--gold-line);
  transform: translateX(100%); transition: transform .32s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
}
.drawer[data-open="true"] { transform: translateX(0); }
.drawer a {
  display: flex; align-items: baseline; gap: .8rem;
  padding: 1rem 1.5rem; border-bottom: 1px solid var(--drawer-line);
  font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; font-size: 1.05rem;
  color: var(--vellum-100);
}
.drawer a:hover { background: rgba(224,180,87,.07); }
#drawer-veil {
  position: fixed; inset: 0; z-index: 65; background: rgba(5,6,10,.7);
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
#drawer-veil[data-open="true"] { opacity: 1; pointer-events: auto; }

/* Переключатель темы: гранёный жетон между солнцем и луной */
.theme-switch {
  position: relative; display: inline-flex; align-items: center;
  width: 58px; height: 30px; padding: 0; flex: 0 0 auto;
  border: 1px solid var(--gold-line); background: var(--slot-bg);
  transition: border-color .25s ease, background-color .25s ease;
}
.theme-switch:hover { border-color: var(--gold-400); }
.theme-switch__icons {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: space-between; padding: 0 7px; pointer-events: none;
}
.theme-switch__icons svg { width: 13px; height: 13px; }
.theme-switch__icons .sun  { color: var(--gold-400); opacity: .45; transition: opacity .25s ease; }
.theme-switch__icons .moon { color: var(--vellum-300); opacity: 1; transition: opacity .25s ease; }
[data-theme="light"] .theme-switch__icons .sun  { opacity: 1; }
[data-theme="light"] .theme-switch__icons .moon { opacity: .4; }
.theme-switch__knob {
  position: absolute; top: 50%; left: 3px; width: 22px; height: 22px;
  transform: translateY(-50%);
  background: var(--gold-400);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
[data-theme="light"] .theme-switch__knob { transform: translate(28px, -50%); }

/* Переключатель рисуется 58×30, а нажимается по полю 66×46 — тач-цель */
.theme-switch::before { content: ''; position: absolute; inset: -8px -4px; }

/* Уведомление о cookie: плашка внизу, без «Принять» и «Отказаться» */
.cookie-notice {
  position: fixed; z-index: 80; left: 1rem; bottom: 1rem; border-radius: 14px;
  max-width: 540px; display: flex; align-items: center; gap: 1rem;
  padding: .85rem 1rem .85rem 1.1rem;
  background: var(--ink-800); border: 1px solid var(--gold-line);
  font-size: 14px; line-height: 1.5; color: var(--vellum-300);
}
.cookie-notice[hidden] { display: none; }
.cookie-notice p { margin: 0; }
.cookie-notice .seal { flex: 0 0 auto; padding: .6rem 1.1rem; }

/* Ряд карт в статье: те же плашки, что в справочнике */
.card-strip { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin: 0; padding: 0; }
.card-strip__item { width: 104px; text-align: center; }
/* внутри статьи у списков свои маркеры и отступы — здесь они не нужны */
.prose-royal .card-strip li { padding-left: 0; margin-bottom: 0; }
.prose-royal .card-strip li::before { content: none; }
.card-strip__item .card-art { border-radius: 9px; }
.card-strip__name {
  display: block; margin-top: .45rem; font-size: 12.5px; line-height: 1.3; color: var(--vellum-300);
}

/* Каталог карт: сетка плашек с подписью роли и редкости */
.card-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: .8rem; margin: 0; padding: 0;
}
.card-grid .card-tile { width: auto; }
.card-grid .card-tile[hidden] { display: none; }
.card-meta {
  display: block; margin-top: .1rem;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9.5px; line-height: 1.3;
  color: var(--vellum-500);
}

/* Рука карт на первом экране: лёгкий веер, как карты в бою */
.hero-hand { display: flex; align-items: flex-end; margin: 0 0 1.9rem; padding-left: .6rem; }
.hero-card {
  display: block; width: 76px; margin-left: -12px; border-radius: 8px; overflow: hidden;
  background: var(--card-art-bg);
  box-shadow: inset 0 0 0 2px var(--rar-color, var(--gold-line)), 0 6px 14px rgba(0, 0, 0, .35);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .25s ease;
}
.hero-card img { width: 100%; height: auto; display: block; }
.hero-hand .hero-card:nth-child(1) { --tilt: -9deg; }
.hero-hand .hero-card:nth-child(2) { --tilt: -6deg; }
.hero-hand .hero-card:nth-child(3) { --tilt: -3deg; }
.hero-hand .hero-card:nth-child(4) { --tilt: 0deg; z-index: 2; }
.hero-hand .hero-card:nth-child(5) { --tilt: 3deg; }
.hero-hand .hero-card:nth-child(6) { --tilt: 6deg; }
.hero-hand .hero-card:nth-child(7) { --tilt: 9deg; }
.hero-hand:hover .hero-card { transform: rotate(var(--tilt, 0deg)) translateY(-4px); }
@media (max-width: 767px) {
  .hero-card { width: 58px; margin-left: -10px; }
  .hero-hand .hero-card:nth-child(n+6) { display: none; }
}
@media (max-width: 359px) {
  .hero-card { width: 52px; }
  .hero-hand .hero-card:nth-child(n+5) { display: none; }
}

/* --- Главная: опись фонда --------------------------------------------- */
.stat-grid > div { display: flex; flex-direction: column; justify-content: space-between; }

/* --- Стол сборки ------------------------------------------------------ */
.slot {
  position: relative; aspect-ratio: 3 / 4; border-radius: 12px;
  border: 1px dashed rgba(224,180,87,.28);
  background: var(--slot-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .25rem; padding: .3rem;
  transition: border-color .2s ease, background-color .2s ease;
  cursor: pointer;
}
.slot[data-filled="true"] {
  border-style: solid; border-color: var(--rar-color, var(--gold-line));
  background: var(--vellum-panel); border-radius: 8px; gap: .15rem;
}
.slot-name { font-size: 9.5px; line-height: 1.15; color: var(--vellum-300); text-align: center; }
.slot:hover { border-color: var(--gold-400); }

/* Карта в справочнике: арт из игры в рамке по редкости и капля эликсира.
   Изображения принадлежат Supercell, используются по Fan Content Policy —
   только масштабирование, без правок самого арта. */
.card-tile {
  width: 96px; padding: .35rem .35rem .45rem;
  border: 1px solid var(--tile-line);
  border-radius: 10px;
  background: var(--tile-bg);
  text-align: center; cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, transform .15s ease;
}
.card-tile:hover { border-color: var(--rar-color, var(--gold-400)); background: var(--tile-bg-hover); }
.card-tile[aria-pressed="true"] {
  border-color: var(--rar-color, var(--gold-400));
  background: color-mix(in srgb, var(--rar-color, #e0b457) 16%, transparent);
}
.card-tile .cname {
  font-size: 10.5px; line-height: 1.25; color: var(--vellum-300);
  display: block; min-height: 2.5em; margin-top: .3rem;
}

/* Подложка арта: рамка редкости + монограмма под картинкой на случай,
   если изображение не загрузилось */
.card-art {
  position: relative; display: block; border-radius: 7px; overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--rar-color, #8d8168) 28%, transparent), transparent 70%),
    var(--card-art-bg);
  box-shadow: inset 0 0 0 2px var(--rar-color, var(--gold-line));
  aspect-ratio: 5 / 6;
}
.card-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.card-art .glyph {
  position: absolute; inset: 0; margin: auto; width: 100%; height: 100%;
  display: grid; place-items: center; font-size: 14px; opacity: .8;
}
.card-art .glyph::before { content: none; }
.card-art .elixir {
  position: absolute; top: 2px; left: 2px; z-index: 2;
  min-width: 17px; height: 17px; padding: 0 1px;
  display: grid; place-items: center;
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 700;
  color: #fff; background: linear-gradient(180deg, #d264f5, #9a2bd6);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 50% 50% 55% 55% / 60% 60% 45% 45%;
  text-shadow: 0 1px 1px rgba(0,0,0,.45);
}
.card-art--sm { width: 40px; margin: 0 auto; }
.card-art--sm .elixir { top: -3px; left: -4px; min-width: 15px; height: 15px; font-size: 9.5px; }

/* Цвета редкости — как ранги карт в игре */
.rar-common    { --rar-color: #9fb6c9; }
.rar-rare      { --rar-color: #f0913a; }
.rar-epic      { --rar-color: #b05cf0; }
.rar-legendary { --rar-color: #37c6dc; }
.rar-champion  { --rar-color: #f4c430; }

/* Жетон-монограмма (запасной вариант и схемы в статьях) */
.glyph {
  position: relative; width: 40px; height: 40px; margin: 0 auto .4rem;
  display: grid; place-items: center;
  font-family: 'Nunito', system-ui, sans-serif; font-size: 15px; font-weight: 700;
  letter-spacing: 0;
}
.glyph::before {
  content: ''; position: absolute; inset: 0; background: currentColor; opacity: .18;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.glyph > span { position: relative; }
.glyph--sm { width: 34px; height: 34px; margin: 0 0 .1rem; font-size: 13px; }

/* Роли карт: цвет несёт данные */
.role-win      { color: var(--gold-400); }
.role-tank     { color: #8fa3c4; }
.role-dps      { color: var(--ember); }
.role-swarm    { color: var(--moss); }
.role-aoe      { color: #e8b04b; }
.role-spell    { color: var(--elixir); }
.role-building { color: var(--royal); }
[data-theme="light"] .role-tank  { color: #46608a; }
[data-theme="light"] .role-aoe   { color: #8a6114; }
[data-theme="light"] .role-swarm { color: #3d6b2a; }
[data-theme="light"] .role-dps   { color: #a83a24; }

/* Аудит колоды и шкала средней стоимости */
.audit-line { display: flex; gap: .6rem; align-items: flex-start; font-size: 13px; line-height: 1.5; }
.audit-ok  { color: var(--moss); }
.audit-bad { color: var(--ember); }
.meter { height: 4px; background: var(--meter-track); position: relative; overflow: hidden; }
.meter > span { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--royal), var(--elixir)); }

/* Схема арены */
.arena-foe    { fill: url(#foeSide); }
.arena-my     { fill: url(#mySide); }
.arena-field  { stroke: var(--gold-line); }
.arena-river  { fill: var(--arena-river); stroke: var(--royal); stroke-opacity: .55; }
.arena-bridge { fill: var(--arena-bridge); stroke: var(--gold-600); stroke-opacity: .8; }
.tower-stone { fill: var(--tower-stone); stroke: var(--tower-line); stroke-width: 1.5; stroke-linejoin: round; }
.tower-band  { stroke: var(--tower-line); stroke-width: 1.2; }
.tower-band--foe  { fill: var(--tower-foe); }
.tower-band--mine { fill: var(--tower-mine); }
.tower-door  { fill: var(--tower-door); stroke: var(--tower-line); stroke-width: 1.2; }
.tower-crown { fill: var(--crown); stroke: var(--crown-line); stroke-width: 1.2; stroke-linejoin: round; }
.arena-badge rect { stroke: var(--tower-line); stroke-width: 1.2; }
.arena-badge text {
  fill: #fff; font-family: 'Nunito', system-ui, sans-serif; font-weight: 800;
  font-size: 11px; letter-spacing: .06em;
}
.arena-badge--foe  rect { fill: var(--badge-foe); }
.arena-badge--mine rect { fill: var(--badge-mine); }
.arena-stop-foe-1 { stop-color: var(--arena-foe-1); }
.arena-stop-foe-2 { stop-color: var(--arena-foe-2); }
.arena-stop-my-1  { stop-color: var(--arena-my-1); }
.arena-stop-my-2  { stop-color: var(--arena-my-2); }

/* --- Статья ----------------------------------------------------------- */
/* Колонка обязана уметь сжиматься (minmax(0,1fr)), иначе широкая таблица
   растягивает страницу на телефоне. */
.article-grid { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }

.prose-royal { max-width: 68ch; }
.prose-royal p { margin: 0 0 1.35rem; color: var(--vellum-100); }
.prose-royal h2 {
  margin: 2.8rem 0 1rem; padding-top: 1.4rem;
  border-top: var(--rule); color: #f2e7cd;
}
.prose-royal > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose-royal h3 { margin: 2rem 0 .8rem; color: var(--gold-400); font-size: 1.18rem; }
.prose-royal ul, .prose-royal ol { margin: 0 0 1.5rem; padding-left: 0; list-style: none; }
.prose-royal ol { counter-reset: royal-list; }
.prose-royal li { position: relative; padding-left: 1.9rem; margin-bottom: .75rem; }
.prose-royal ul > li::before {
  content: ''; position: absolute; left: .35rem; top: .72em;
  width: 7px; height: 7px; background: var(--gold-600); transform: rotate(45deg);
}
.prose-royal ol > li::before {
  counter-increment: royal-list; content: counter(royal-list) '.';
  position: absolute; left: 0; top: 0;
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 13px; color: var(--gold-400);
}
.prose-royal strong { color: #f7e9c6; font-weight: 600; }
.prose-royal blockquote {
  margin: 1.8rem 0; padding: .2rem 0 .2rem 1.4rem;
  border-left: 2px solid var(--gold-600);
  color: var(--vellum-300); font-style: italic;
}
.prose-royal a { color: var(--gold-400); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold-600); }

/* Врезка «на заметку» */
.aside-note {
  margin: 2rem 0; padding: 1.1rem 1.25rem; border-radius: 12px;
  border: var(--rule); background: rgba(91,135,232,.06);
  font-size: 15px; color: var(--vellum-300);
}
.aside-note .label {
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--royal); display: block; margin-bottom: .4rem;
}

/* Прогресс чтения — «золотая нить» */
#reading-thread {
  position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 60;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-400));
}

/* Таблицы: шире экрана — скроллятся внутри рамки */
.table-wrap {
  max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-left: 1px solid transparent; border-right: 1px solid transparent;
}
.table-royal { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 14px; }
.table-royal th, .table-royal td { padding: .65rem .8rem; border-bottom: 1px solid var(--hairline-soft); text-align: left; }
.table-royal th {
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--vellum-500); font-weight: 500;
}
.table-royal td.num { font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; color: var(--gold-400); }
.table-hint { display: none; }

/* Иллюстрации: векторные схемы на токенах темы, без растровой графики
   и игровых спрайтов. */
.figure-royal { margin: 2.6rem 0; }
.figure-royal svg { width: 100%; height: auto; display: block; }
.figure-royal .figure-royal__frame {
  padding: 1.1rem 1rem; border-radius: 14px;
  border: var(--rule);
  background: var(--panel-sheen), var(--vellum-panel);
}
.figure-royal figcaption {
  margin-top: .75rem; padding-left: .9rem;
  border-left: 2px solid var(--gold-600);
  font-family: 'Lora', Georgia, serif; font-size: 14px; line-height: 1.6;
  color: var(--vellum-500);
}
.prose-royal .figure-royal figcaption { margin-bottom: 0; }

.ill-panel   { fill: var(--slot-bg); stroke: var(--gold-line); }
.ill-line    { stroke: var(--gold-line); fill: none; }
.ill-rule    { stroke: var(--gold-600); fill: none; }
.ill-accent  { stroke: var(--gold-400); fill: none; }
.ill-accent-fill { fill: var(--gold-400); }
.ill-royal   { stroke: var(--royal); fill: none; }
.ill-royal-fill { fill: var(--royal); }
.ill-elixir  { fill: var(--elixir); }
.ill-ember   { stroke: var(--ember); fill: none; }
.ill-ember-fill { fill: var(--ember); }
.ill-moss-fill { fill: var(--moss); }
.ill-ghost   { fill: var(--vellum-500); opacity: .28; }
.ill-text {
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  fill: var(--vellum-300); font-size: 13px; letter-spacing: .04em;
}
.ill-text--dim   { fill: var(--vellum-500); font-size: 12px; }
.ill-text--gold  { fill: var(--gold-400); }
.ill-text--title {
  font-family: 'Nunito', system-ui, sans-serif; fill: var(--vellum-100);
  font-size: 15px; font-weight: 600; letter-spacing: .02em;
}
.ill-glyph {
  font-family: 'Nunito', system-ui, sans-serif; font-weight: 700;
  font-size: 15px; text-anchor: middle;
}

/* --- Служебное -------------------------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Адаптив ---------------------------------------------------------- */
@media (min-width: 768px) {
  .field { font-size: 13px; min-height: 0; padding: .5rem .7rem; }
  .chip  { min-height: 0; padding: .45rem .75rem; font-size: 10.5px; }
}

@media (min-width: 1024px) {
  .article-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
}

/* Самые узкие экраны: шапка должна помещаться целиком */
@media (max-width: 359px) {
  .wordmark { font-size: 12px; letter-spacing: .12em; }
  .wordmark-sub { display: none; }
  .theme-switch { width: 50px; }
  [data-theme="light"] .theme-switch__knob { transform: translate(20px, -50%); }
  #drawer-open { padding-left: .6rem; padding-right: .6rem; }
}

@media (max-width: 767px) {
  /* Нажимаемые элементы — не меньше комфортной тач-цели */
  .seal { min-height: 44px; padding: .8rem 1.2rem; }
  #drawer-open { min-height: 44px; }
  /* Переключатель темы на телефоне — такой же высоты, как соседняя кнопка */
  .theme-switch { height: 44px; }
  .theme-switch::before { content: none; }
  /* Логотип и ссылки подвала тоже дотягиваем до комфортного нажатия */
  header a[aria-label] { padding: .35rem 0; }
  #drawer-close { padding: .6rem .4rem; min-height: 44px; display: inline-flex; align-items: center; }
  footer nav a, footer [data-year] ~ a, a[href^="mailto"], a[href^="tel"] { display: inline-block; padding: .72rem 0; }
  .slot { min-height: 92px; }
  /* Ленты полок заканчиваются у края экрана, а не обрываются в отступе */
  .rail { scroll-padding-left: 1.25rem; }
  .cookie-notice {
    left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom));
    flex-direction: column; align-items: stretch; gap: .7rem;
  }
  .cookie-notice .seal { justify-content: center; }
  /* Подсказка о прокрутке таблицы — только на узких экранах */
  .table-hint {
    display: block; margin: .6rem 0 1.5rem;
    font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 10.5px;
    letter-spacing: .12em; text-transform: uppercase; color: var(--vellum-500);
  }
}

/* Ссылка-кнопка внутри таблицы: на телефоне по ней легко попасть пальцем */
.tbl-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin: -8px 0 -8px 6px;
  padding: 0 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1;
  color: var(--gold-500);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .15s ease, color .15s ease;
}
.tbl-link:hover,
.tbl-link:focus-visible { border-color: var(--gold-500); color: var(--vellum-100); }

/* Плитка каталога целиком стала ссылкой */
.card-tile__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  text-decoration: none;
  color: inherit;
}
.card-tile__link:hover .cname,
.card-tile__link:focus-visible .cname { color: var(--gold-400); }

/* Шапка страницы карты: арт слева, таблица характеристик справа */
.card-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  margin: 0 0 2rem;
}
.card-hero .card-art { width: 116px; height: 140px; flex: none; }
.card-hero table { width: 100%; border-collapse: collapse; font-size: 15px; }
.card-hero td { padding: .5rem .6rem; border-bottom: var(--rule); }
.card-hero td:first-child { color: var(--vellum-500); white-space: nowrap; }
.card-hero td:last-child { color: var(--vellum-200); font-family: var(--font-mono); font-size: 13.5px; }
@media (max-width: 520px) {
  .card-hero { grid-template-columns: 1fr; justify-items: start; }
  .card-hero .card-art { width: 100px; height: 120px; }
}