/* ─────────────────────────────────────────────────────────────────────────
   Тема «berry» (2026-09-21, по макету владельца): тёплая кремовая бумага,
   белые скруглённые карточки с мягкой тенью, один бордовый акцент с
   градиентом. Заменяет прежнюю «lab.» (острые формы, оранжевый акцент).
   Палитра задаётся токенами :root ниже. Tailwind-утилиты синей/индиго/
   голубой гаммы ре-маппятся на неё через !important-оверрайды (тот же
   приём, что и тёмная тема, — без парных классов в шаблонах).
   ───────────────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  --paper:        #F3EEE4;  /* фон страницы */
  --surface:      #ffffff;  /* карточки */
  --surface-soft: #F7F2E8;  /* инпуты, чипы, мягкие плашки */
  --surface-mute: #ECE5D7;  /* нейтральный статус, дорожки прогресса */
  --line:         #E7DFCF;  /* тонкие рамки */
  --line-strong:  #D9D0BD;  /* рамки полей ввода */
  --ink:          #1E1B1A;  /* основной текст */
  --muted:        #7A7268;  /* вторичный текст */
  --muted-strong: #4B453F;

  --accent:        #B5203F; /* заливки, кнопки */
  --accent-2:      #7C1327; /* конец градиента */
  --accent-hover:  #9E1B37;
  --accent-ink:    #A11B37; /* акцентный текст на светлом (контраст ≥4.5) */
  --accent-tint:   #F8E6E7; /* очень светлая плашка */
  --accent-tint-2: #F0CFD3;
  --accent-border: #E8C4C9;
  --accent-grad:   linear-gradient(135deg, #C42A4B 0%, #8A1730 100%);
  --accent-glow:   0 8px 22px rgba(160, 30, 55, 0.32);

  --radius-card: 20px;
  --shadow-card: 0 2px 12px rgba(70, 45, 20, 0.07), 0 1px 2px rgba(70, 45, 20, 0.05);
  --shadow-float: 0 -6px 24px rgba(70, 45, 20, 0.10);
}

html { scrollbar-color: #c8c3b5 var(--paper); }
body { background: linear-gradient(180deg, #FBF9F4 0, var(--paper) 420px) fixed, var(--paper) !important; }

/* ─── Шрифты ──────────────────────────────────────────────────────────────
   Дисплей — Unbounded (геометрический, «лабораторный»), текст — IBM Plex Sans,
   технические подписи капсом — IBM Plex Mono. Все с кириллицей.
   ──────────────────────────────────────────────────────────────────────── */
:root {
  --font-sans:    'Commissioner', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Commissioner', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'Commissioner', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

body { font-family: var(--font-sans); }

/* заголовки и всё «чёрное» начертание → Unbounded */
h1, h2, h3, h4,
.font-black, .font-display {
  font-family: var(--font-display) !important;
  letter-spacing: -0.02em;
  font-weight: 800;
}
.text-xl.font-black { letter-spacing: -0.02em; }

/* мелкие технические подписи капсом → моноширинный */
.text-xs.uppercase,
.text-xs.tracking-widest,
.text-xs.tracking-wide,
.text-\[10px\].uppercase {
  font-family: var(--font-mono) !important;
  letter-spacing: 0.03em;
  font-weight: 600;
}

/* моноширинные цифры-счётчики (XP, таймер) читаемее в Plex Mono */
#xp-counter, .tabular-nums { font-family: var(--font-mono) !important; }

/* ── Бренд-токены ──────────────────────────────────────────────────────── */
.text-gradient { background: none; color: var(--ink); }   /* «Battle» в логотипе — как в макете, тем же чернилом */

.btn-gradient {
  background: var(--accent-grad);
  color: #fff;
  box-shadow: var(--accent-glow);
}
.btn-gradient:hover { filter: brightness(1.06); }

.logo-mark { background: none; box-shadow: none; color: var(--ink); }

.progress-track { background: var(--surface-mute); }
.progress-fill  { background: var(--accent-grad); }

.glow-border { box-shadow: var(--shadow-card); }
.glow-yellow { box-shadow: var(--shadow-card); }

/* ── Хедер ─────────────────────────────────────────────────────────────── */
header.site-header {
  background: var(--surface);
  border-color: var(--line) !important;
  box-shadow: 0 1px 0 rgba(70, 45, 20, 0.04);
}

/* карточки: белые, скруглённые, с мягкой тенью вместо тёмных рамок */
.bg-white.rounded-2xl, .bg-white.rounded-3xl, .bg-white.rounded-xl {
  box-shadow: var(--shadow-card);
}

/* ── Ре-маппинг Tailwind-утилит на новую палитру ──────────────────────── */
/* акцент вместо синего / индиго / голубого */
.bg-blue-50, .bg-indigo-50, .bg-sky-50               { background-color: var(--accent-tint) !important; }
.bg-blue-100                                          { background-color: var(--accent-tint-2) !important; }
.bg-blue-500, .bg-blue-600                            { background-color: var(--accent) !important; background-image: var(--accent-grad); }
.hover\:bg-blue-700:hover                             { background-color: var(--accent-hover) !important; }

.text-blue-400, .text-blue-500, .text-blue-600,
.text-blue-700, .text-blue-800, .text-blue-900,
.text-indigo-600, .text-indigo-700, .text-sky-700     { color: var(--accent-ink) !important; }

.border-blue-100, .border-blue-200, .border-blue-300,
.border-indigo-200, .border-sky-200                   { border-color: var(--accent-border) !important; }
.border-blue-400, .border-blue-500, .border-blue-600  { border-color: var(--accent) !important; }

.focus\:border-blue-400:focus                         { border-color: var(--accent) !important; }
.hover\:border-blue-200:hover                          { border-color: var(--accent-border) !important; }
.hover\:border-blue-300:hover                          { border-color: var(--accent-border) !important; }

/* градиентная плашка соло-челленджа → плоская тёплая */
.from-indigo-50 {
  --tw-gradient-from: var(--accent-tint) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(248 230 231 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-blue-50 { --tw-gradient-to: var(--accent-tint) var(--tw-gradient-to-position) !important; }

/* peer-checked (конфиг практики) */
.peer:checked ~ .peer-checked\:bg-blue-600           { background-color: var(--accent) !important; background-image: var(--accent-grad); box-shadow: var(--accent-glow); }
.peer:checked ~ .peer-checked\:bg-blue-50            { background-color: var(--accent-tint) !important; }
.peer:checked ~ .peer-checked\:border-blue-600,
.peer:checked ~ .peer-checked\:border-blue-400,
.peer:checked ~ .peer-checked\:border-blue-300       { border-color: var(--accent) !important; }
.peer:checked ~ .peer-checked\:text-blue-700         { color: var(--accent-ink) !important; }
.peer:checked ~ .peer-checked\:text-white            { color: #fff !important; }

/* янтарь (⚡ XP) остаётся золотым, как в макете; плашки — тёплые нейтрали */
.bg-amber-50                                           { background-color: var(--surface-soft) !important; }
.border-amber-200, .border-amber-300                  { border-color: var(--line) !important; }

/* тёплые нейтрали вместо холодного slate */
.text-slate-900                                        { color: var(--ink) !important; }
.text-slate-800, .text-slate-700                      { color: var(--muted-strong) !important; }
.text-slate-600, .text-slate-500                      { color: var(--muted) !important; }
.text-slate-400                                        { color: #A39A8C !important; }
.bg-slate-50                                           { background-color: var(--surface-soft) !important; }
.bg-slate-100                                          { background-color: var(--surface-mute) !important; }
.border-slate-200, .border-slate-300                  { border-color: var(--line) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   Формы: скруглённые поля с мягкой рамкой и акцентным фокус-рингом.
   (Прежнее правило «никаких скруглений» снято — новый дизайн владельца.)
   ───────────────────────────────────────────────────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,
textarea {
  border-radius: 14px !important;
  background-color: #fff !important;
  border: 1px solid var(--line-strong) !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(181, 32, 63, 0.16) !important;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
::placeholder { color: #9b968c !important; opacity: 1; }

/* внутри задания ФИПИ — не трогаем нативные поля движка проверки */
.task-embed input,
.task-embed select,
.task-embed textarea {
  border: revert !important;
  background-color: revert !important;
  box-shadow: none !important;
}

/* ── Задание в исходной вёрстке ФИПИ ──────────────────────────────────── */
.task-embed {
  color: #1b1b1b;
  font-size: 0.95rem;
  line-height: 1.5;
}
.task-embed table { width: 100%; border-collapse: collapse; }
.task-embed td, .task-embed th { padding: 6px 8px; }
.task-embed img { max-width: 100%; height: auto; }

/* ─────────────────────────────────────────────────────────────────────────
   Тёмная тема — упрощённый оверлей поверх светлой разметки. Тот же красный
   акцент, но чуть светлее для контраста на тёмном фоне.
   ───────────────────────────────────────────────────────────────────────── */
:root[data-theme='dark'] {
  color-scheme: dark;
  --surface:      #1E1A17;
  --surface-soft: #221C19;
  --surface-mute: #2E2824;  /* дорожки прогресса, нейтральные плашки */
  --line:         #2E2925;
  --line-strong:  #4A423B;
  --ink:          #F3EFE7;
  --muted:        #9A948A;
  --muted-strong: #CBC5B9;
  --accent-ink:   #F0708A;
  --shadow-card:  0 2px 12px rgba(0, 0, 0, 0.35);
}

:root[data-theme='dark'] body { background: #14100E !important; }

:root[data-theme='dark'] .bg-white,
:root[data-theme='dark'] .bg-slate-50 {
  background-color: #1E1A17 !important;
}

:root[data-theme='dark'] .bg-slate-100 {
  background-color: #2A2521 !important;
}

/* акцентные плашки в тёмной теме — тёмный тёпло-красный фон, не светлый */
:root[data-theme='dark'] .bg-blue-50,
:root[data-theme='dark'] .bg-indigo-50,
:root[data-theme='dark'] .bg-sky-50,
:root[data-theme='dark'] .bg-blue-100 {
  background-color: #2E1A20 !important;
}
:root[data-theme='dark'] .from-indigo-50 {
  --tw-gradient-from: #2E1A20 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(46 26 32 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
:root[data-theme='dark'] .to-blue-50 {
  --tw-gradient-to: #24151A var(--tw-gradient-to-position) !important;
}
:root[data-theme='dark'] .border-blue-100,
:root[data-theme='dark'] .border-blue-200,
:root[data-theme='dark'] .border-blue-300,
:root[data-theme='dark'] .border-indigo-200,
:root[data-theme='dark'] .border-sky-200 { border-color: #45262E !important; }

:root[data-theme='dark'] .border-slate-200,
:root[data-theme='dark'] .border-slate-300 {
  border-color: #2E2925 !important;
}

:root[data-theme='dark'] header.site-header {
  background: #14100E;
  border-color: #2E2925 !important;
}

:root[data-theme='dark'] .text-slate-900 { color: #F3EFE7 !important; }
:root[data-theme='dark'] .text-slate-700,
:root[data-theme='dark'] .text-slate-600 { color: #CBC5B9 !important; }
:root[data-theme='dark'] .text-slate-500 { color: #9A948A !important; }

/* в тёмной теме чёрные чернила-оверрайды сверху надо вернуть в светлые */
:root[data-theme='dark'] .bg-amber-50 { background-color: #24151A !important; }
:root[data-theme='dark'] .border-amber-200,
:root[data-theme='dark'] .border-amber-300 { border-color: #45262E !important; }

/* прочие светлые тинты (rose/orange/emerald) → тёмные в тёмной теме,
   иначе светлый текст на светлом фоне */
:root[data-theme='dark'] .bg-rose-50,
:root[data-theme='dark'] .bg-orange-50,
:root[data-theme='dark'] .bg-emerald-50 { background-color: #24151A !important; }
:root[data-theme='dark'] .bg-rose-100,
:root[data-theme='dark'] .bg-orange-100,
:root[data-theme='dark'] .bg-emerald-100 { background-color: #33202A !important; }
:root[data-theme='dark'] .from-rose-50 {
  --tw-gradient-from: #2E1A20 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(46 26 32 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
:root[data-theme='dark'] .to-orange-50 { --tw-gradient-to: #24151A var(--tw-gradient-to-position) !important; }
:root[data-theme='dark'] .border-rose-200,
:root[data-theme='dark'] .border-emerald-200,
:root[data-theme='dark'] .border-orange-200 { border-color: #45262E !important; }
:root[data-theme='dark'] .text-emerald-700 { color: #4ADE80 !important; }
:root[data-theme='dark'] .text-rose-700 { color: #FB7185 !important; }

/* выбранные пилюли конфига практики в тёмной теме */
:root[data-theme='dark'] .peer:checked ~ .peer-checked\:bg-blue-50 { background-color: #2E1A20 !important; }
:root[data-theme='dark'] .peer:checked ~ .peer-checked\:text-blue-700 { color: #F0708A !important; }


:root[data-theme='dark'] input:not([type="checkbox"]):not([type="radio"]),
:root[data-theme='dark'] select,
:root[data-theme='dark'] textarea {
  background-color: #1A1613 !important;
  border-color: #4A423B !important;
  color: #F3EFE7 !important;
}
:root[data-theme='dark'] input:not([type="checkbox"]):not([type="radio"]):focus,
:root[data-theme='dark'] select:focus,
:root[data-theme='dark'] textarea:focus {
  border-color: var(--accent-ink) !important;
  box-shadow: 0 0 0 3px rgba(240, 112, 138, 0.20) !important;
}

:root[data-theme='dark'] .task-embed { color: #1b1b1b; }


/* ─────────────────────────────────────────────────────────────────────────
   PWA / приложение на домашнем экране.
   Класс .standalone на <html> ставит inline-скрипт в base.html (iOS —
   navigator.standalone, Android — display-mode: standalone).
   ───────────────────────────────────────────────────────────────────────── */
[x-cloak] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* нет задержки/зума по двойному тапу, нет серой вспышки при нажатии */
a, button, [role="button"], label, summary, select, input {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* iOS Safari приближает страницу при фокусе в поле со шрифтом < 16px */
@media (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
  select, textarea { font-size: 16px; }
}

/* подсказка «установить приложение» — розовая карточка, как в макете */
.install-hint {
  margin: 12px 16px 0; border-radius: 18px;
  background: var(--accent-tint-2); color: var(--ink);
}
.install-hint .btn-gradient { border-radius: 12px; }
.install-hint-close {
  flex-shrink: 0; width: 28px; height: 28px; line-height: 1;
  color: var(--muted-strong); font-size: 14px;
}
:root[data-theme='dark'] .install-hint { background: #3A2029; color: #F3EFE7; }

/* выбор предмета: чип «🧪 ХИМИЯ ▾» + выпадающий список */
.subject-name { text-transform: uppercase; letter-spacing: 0.02em; font-weight: 700; }
.subject-emoji { font-size: 18px; line-height: 1; }
.subject-caret { color: var(--muted); transition: transform .15s ease; }
.subject-caret.is-open { transform: rotate(180deg); }
.subject-menu {
  min-width: 210px; padding: 6px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(70, 45, 20, 0.16);
}
.subject-option {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px;
  font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink);
}
.subject-option:hover { background: var(--surface-soft); }
.subject-option.is-current { background: var(--accent-tint); color: var(--accent-ink); }
:root[data-theme='dark'] .subject-menu { background: #1E1A17; border-color: #2E2925; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); }
:root[data-theme='dark'] .subject-option:hover { background: #2A2320; }
:root[data-theme='dark'] .subject-option.is-current { background: #3A2029; color: #F0708A; }

/* переключатель темы: сегмент «солнце | луна» */
.theme-switch {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px;
  background: var(--surface-mute); border: 1px solid var(--line);
}
.theme-switch button {
  width: 36px; height: 30px; border-radius: 999px; color: var(--muted);
  display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s;
}
.theme-switch button.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(70, 45, 20, 0.18); }
:root[data-theme='dark'] .theme-switch { background: #221C19; border-color: #2E2925; }
:root[data-theme='dark'] .theme-switch button { color: #9A948A; }
:root[data-theme='dark'] .theme-switch button.is-on { background: #3A322D; color: #F3EFE7; box-shadow: none; }

/* логотип-колба: в тёмной теме светлый */
:root[data-theme='dark'] .logo-mark { background: none; color: #F3EFE7; }
:root[data-theme='dark'] .text-gradient { color: #F3EFE7; }

/* элементы приложения скрыты на десктопе */
.tabbar, .tile-nav, .pwa-back { display: none; }

html.standalone {
  /* фон под «резиновым» оверскроллом и за вырезом — цвет темы, а не белый */
  background: var(--paper);
}
:root[data-theme='dark'].standalone { background: #14100E; }

/* приложение, а не сайт: не выделяем интерфейс, не вызываем контекстное меню
   на ссылках и кнопках; текст заданий выделять по-прежнему можно */
html.standalone .site-header,
html.standalone .tabbar,
html.standalone button {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
html.standalone body { overscroll-behavior-y: none; }

/* вырез/индикатор: боковые отступы в ландшафте, верх — под статус-баром */
html.standalone body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
html.standalone header.site-header { padding-top: env(safe-area-inset-top); }

/* «назад» — у iOS-PWA нет браузерной панели */
html.standalone .pwa-back.is-visible {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-right: -4px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 50%; color: var(--ink);
}
html.standalone[data-theme='dark'] .pwa-back.is-visible { color: #F3EFE7; border-color: #2E2925; }
@media (max-width: 767px) {
  /* кнопка «назад» и логотип — в одной строке */
  html.standalone .pwa-back.is-visible + a { flex-basis: calc(100% - 48px); }
}

/* ─────────────────────────────────────────────────────────────────────────
   Телефон (≤767px): раскладка из макета — компактная шапка, сетка плиток
   3×2 вместо пилюли-меню, плавающая нижняя панель вкладок.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  header.site-header nav.pill-nav { display: none; }
  body { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }

  /* шапка: логотип, ниже — чип предмета слева и тема+XP справа */
  .hdr-row { padding-top: 14px; padding-bottom: 12px; row-gap: 10px; }
  .hdr-row > a:first-of-type { flex-basis: 100%; }
  .hdr-row > .relative { order: 2; }
  .hdr-row > .ml-auto { order: 3; }
  .subject-chip { padding: 7px 14px; }

  /* плитки разделов */
  .tile-nav {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
    padding: 2px 16px 16px;
  }
  .tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 88px; padding: 10px 4px; border-radius: 18px; text-align: center;
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card);
    color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.15; text-decoration: none;
    transition: transform .12s ease;
  }
  .tile:active { transform: scale(0.97); }
  .tile-icon { font-size: 30px; line-height: 1; }
  .tile.is-active {
    background: var(--accent-grad); border-color: transparent; color: #fff; box-shadow: var(--accent-glow);
  }
  :root[data-theme='dark'] .tile { background: #221C19; border-color: #2E2925; color: #F3EFE7; box-shadow: none; }
  :root[data-theme='dark'] .tile.is-active { background: var(--accent-grad); border-color: transparent; }

  /* нижняя панель — плавающая, со скруглёнными верхними углами */
  .tabbar {
    display: flex; position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
    background: var(--surface); border-radius: 24px 24px 0 0; box-shadow: var(--shadow-float);
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  }
  .tab-link {
    flex: 1 1 0; min-width: 0; padding: 6px 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    color: var(--muted); font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap;
    text-decoration: none;
  }
  .tab-link > span.w-4 { width: 26px; height: 26px; }
  .tab-link.is-active { color: var(--accent-ink); }
  :root[data-theme='dark'] .tabbar { background: #1B1613; box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.45); }
  :root[data-theme='dark'] .tab-link { color: #9A948A; }
  :root[data-theme='dark'] .tab-link.is-active { color: #F0708A; }
}

/* Задание ФИПИ приходит с тёмным текстом и собственной вёрсткой: в тёмной теме
   ему нужна светлая «бумага», иначе текст сливается с фоном карточки. */
:root[data-theme='dark'] .task-embed { background-color: #F3EFE7 !important; }

/* ── Дуэль: экран поиска и плашка итога раунда ───────────────────────── */
.search-pulse {
  position: relative; width: 96px; height: 96px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 40px;
  background: var(--accent-tint); box-shadow: 0 0 0 0 rgba(181, 32, 63, 0.35);
  animation: search-pulse 1.6s ease-out infinite;
}
@keyframes search-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(181, 32, 63, 0.35); }
  100% { box-shadow: 0 0 0 36px rgba(181, 32, 63, 0); }
}
@media (prefers-reduced-motion: reduce) { .search-pulse { animation: none; } }

.duel-banner {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(30, 27, 26, 0.45);
}
.duel-banner[hidden] { display: none; }
.duel-banner-card {
  max-width: 360px; padding: 22px 26px; border-radius: 22px; text-align: center;
  font-size: 20px; font-weight: 800; line-height: 1.25; background: #fff; color: var(--ink);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
}
.duel-banner-card.is-win  { color: #0f7a4a; }
.duel-banner-card.is-loss { color: var(--accent-ink); }
:root[data-theme='dark'] .duel-banner-card { background: #1E1A17; }
:root[data-theme='dark'] .duel-banner-card.is-win  { color: #4ADE80; }
:root[data-theme='dark'] .duel-banner-card.is-loss { color: #F0708A; }

/* ── Плашка «Полигон»: фоновый узор из скрещённых мечей ──────────────── */
.polygon-banner { position: relative; overflow: hidden; }
.polygon-banner::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .08;
  background-repeat: repeat; background-size: 64px 64px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg stroke='%23A11B37' stroke-width='3' stroke-linecap='round' fill='none'%3E%3Cline x1='14' y1='14' x2='46' y2='46'/%3E%3Cline x1='46' y1='14' x2='14' y2='46'/%3E%3Cline x1='20' y1='20' x2='26' y2='14'/%3E%3Cline x1='40' y1='20' x2='34' y2='14'/%3E%3Cline x1='20' y1='40' x2='26' y2='46'/%3E%3Cline x1='40' y1='40' x2='34' y2='46'/%3E%3C/g%3E%3C/svg%3E");
}
.polygon-banner > * { position: relative; z-index: 1; }
:root[data-theme='dark'] .polygon-banner::before {
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg stroke='%23F0708A' stroke-width='3' stroke-linecap='round' fill='none'%3E%3Cline x1='14' y1='14' x2='46' y2='46'/%3E%3Cline x1='46' y1='14' x2='14' y2='46'/%3E%3Cline x1='20' y1='20' x2='26' y2='14'/%3E%3Cline x1='40' y1='20' x2='34' y2='14'/%3E%3Cline x1='20' y1='40' x2='26' y2='46'/%3E%3Cline x1='40' y1='40' x2='34' y2='46'/%3E%3C/g%3E%3C/svg%3E");
}