/* ============================================================
   MAFIA STYLE — Main Stylesheet
   Premium dark + gold club aesthetic. Bootstrap 5.3 semantic colors
   (--bs-*) are re-themed once below so every .btn-success/.bg-danger-subtle/
   .text-warning etc. across the whole app inherits the new palette without
   per-template edits — only the handful of rules that hardcode a color
   directly (buttons, avatars, rarity, elo, podium) need explicit updates.
   ============================================================ */

:root {
  /* ── Base palette ─────────────────────────────────────────── */
  --ms-bg:             #0D0D0D;
  --ms-surface:        #1B1B1B;
  --ms-surface-raised: #242424;
  --ms-surface-alt:    #2B2B2B;
  --ms-border:         rgba(199,165,82,.14);

  --ms-text:           #F3E9D2;  /* ivory */
  --ms-text-dim:       #D9D2C1;  /* dimmer ivory */
  --ms-muted:          #8A8A8A;  /* silver gray */

  --ms-gold:           #C7A552;  /* primary accent */
  --ms-gold-light:     #D4B06A;  /* champagne — hover/highlight */
  --ms-gold-dark:      #B89246;
  --ms-gold-glow:      rgba(199,165,82,.16);

  --ms-wine:           #7B0F0F;  /* danger/deep accent */
  --ms-wine-light:     #8E1C1C;

  --ms-radius: 10px;

  /* ── Re-theme Bootstrap's own semantic variables ─────────────
     Bootstrap 5.3 drives .btn-*/.bg-*/.text-*/.border-*/.alert-* off
     these — overriding them here cascades the palette everywhere
     without touching individual templates. */
  --bs-body-bg: var(--ms-bg);
  --bs-body-color: var(--ms-text);
  --bs-border-color: var(--ms-border);
  --bs-emphasis-color: var(--ms-text);
  --bs-secondary-color: var(--ms-muted);
  --bs-tertiary-bg: var(--ms-surface-raised);

  /* Bootstrap's <a> reboot rule reads --bs-link-color-rgb (not the hex
     var) for its color — both must be set. Left at Bootstrap's default
     blue until now, which is why any plain link without an explicit
     .text-* class (e.g. a player name with no cosmetic nickname color
     equipped) rendered blue instead of the theme's ivory/gold. */
  --bs-link-color: var(--ms-text);              --bs-link-color-rgb: 243,233,210;
  --bs-link-hover-color: var(--ms-gold-light);   --bs-link-hover-color-rgb: 212,176,106;

  --bs-primary: var(--ms-gold);          --bs-primary-rgb: 199,165,82;
  --bs-danger:  var(--ms-wine);          --bs-danger-rgb: 123,15,15;
  --bs-warning: var(--ms-gold-light);    --bs-warning-rgb: 212,176,106;
  /* "success" в этой палитре — золото, а не corporate-зелёный: победа
     и статус в MAFIA STYLE выражаются золотом, не зелёной галочкой. */
  --bs-success: var(--ms-gold);          --bs-success-rgb: 199,165,82;
  --bs-info:    var(--ms-muted);         --bs-info-rgb: 138,138,138;
  --bs-secondary: var(--ms-muted);       --bs-secondary-rgb: 138,138,138;
}

/* Base */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ms-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Деликатная фоновая текстура — едва заметное золотое свечение сверху +
     тончайшие диагональные линии. Настолько слабо (2-3% альфа), чтобы
     читалось подсознательно, а не как узор. Фиксирован к вьюпорту
     (attachment: fixed), чтобы не скроллился вместе с длинным контентом
     и не создавал видимых "швов" между секциями. */
  background-color: var(--ms-bg);
  background-image:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(199,165,82,.05), transparent 60%),
    repeating-linear-gradient(135deg, rgba(199,165,82,.015) 0px, rgba(199,165,82,.015) 1px, transparent 1px, transparent 64px);
  background-attachment: fixed;
}

main { flex: 1; }

h1, h2, h3, h4, h5, h6, .navbar-brand, .display-5 {
  font-family: 'Playfair Display', Georgia, serif;
  letter-spacing: .01em;
}

/* ── Brand mark ──────────────────────────────────────────────── */
.brand-monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--ms-gold);
  border-radius: 4px;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ms-gold);
  letter-spacing: 0;
  flex-shrink: 0;
}

.brand-monogram-lg {
  width: 64px;
  height: 64px;
  font-size: 1.75rem;
  border-width: 1.5px;
}

.brand-wordmark {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ms-text);
}

.brand-tagline {
  font-size: .75rem;
  letter-spacing: .22em;
  color: var(--ms-gold);
}

/* ============================================================
   Navbar — grouped dropdown architecture (see base.html)
   ============================================================
   Primary nav collapses from 9 flat links + 4 admin links down to
   Главная + 3 topical dropdowns ("mega menus") + a separately-styled
   admin dropdown, so growth means adding a row inside an existing
   dropdown instead of a new top-level item competing for width.
   ============================================================ */

#main-nav {
  background: rgba(13,13,13,.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ms-border);
  transition: padding .25s ease, box-shadow .25s ease;
  padding-top: .5rem;
  padding-bottom: .5rem;
}

/* Scroll-shrink — toggled by main.js; shrinks the chrome + brand once
   the page has scrolled, freeing vertical space and reading as a more
   "app-like" persistent bar (Steam/Battle.net do this too). */
#main-nav.is-scrolled {
  padding-top: .2rem;
  padding-bottom: .2rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
#main-nav.is-scrolled .brand-monogram { width: 28px; height: 28px; font-size: .85rem; }

.navbar-brand { transition: none; }
.brand-monogram { transition: width .25s ease, height .25s ease, font-size .25s ease; }

#main-nav .nav-link {
  color: var(--ms-muted) !important;
  font-size: .875rem;
  font-weight: 500;
  border-radius: 8px;
  padding: .5rem .7rem !important;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: color .2s, background .2s;
}

#main-nav .nav-link:hover,
#main-nav .nav-link.active {
  color: var(--ms-gold-light) !important;
  background: rgba(199,165,82,.08);
}

#main-nav .nav-link i { font-size: .95rem; line-height: 1; }

/* Animated underline — scales in from center, Riot/FACEIT-style accent
   instead of a flat background swap alone. */
.nav-link--underline { position: relative; }
.nav-link--underline::after {
  content: "";
  position: absolute;
  left: .7rem; right: .7rem; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--ms-gold-light);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}
.nav-link--underline:hover::after,
.nav-link--underline.active::after { transform: scaleX(1); }

/* Dropdown caret — de-emphasized, spins on open rather than sitting as
   static Bootstrap chevron clutter. */
#main-nav .dropdown-toggle::after {
  margin-left: .3rem;
  vertical-align: .1em;
  transition: transform .2s ease;
  opacity: .6;
}
#main-nav .dropdown-toggle[aria-expanded="true"]::after,
#main-nav .dropdown-toggle.show::after { transform: rotate(180deg); }

/* ── Mega dropdown panel ──────────────────────────────────────── */

.nav-mega {
  --stagger: 0ms;
  min-width: 250px;
  padding: .5rem;
  animation: nav-mega-in .18s ease both;
}
@keyframes nav-mega-in {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.nav-mega__item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .5rem .6rem;
  border-radius: 8px;
  color: var(--ms-text);
  text-decoration: none;
  opacity: 0;
  animation: nav-mega-item-in .22s ease forwards;
  animation-delay: var(--stagger);
}
.nav-mega li:nth-child(1) .nav-mega__item { --stagger: .02s; }
.nav-mega li:nth-child(2) .nav-mega__item { --stagger: .06s; }
.nav-mega li:nth-child(3) .nav-mega__item { --stagger: .1s; }
.nav-mega li:nth-child(4) .nav-mega__item { --stagger: .14s; }
.nav-mega li:nth-child(5) .nav-mega__item { --stagger: .18s; }
@keyframes nav-mega-item-in {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}

.nav-mega__item:hover, .nav-mega__item:focus {
  background: rgba(199,165,82,.1);
  color: var(--ms-text);
}
.nav-mega__item:hover .nav-mega__icon {
  background: var(--ms-gold);
  color: #0D0D0D;
  transform: scale(1.08);
}

.nav-mega__icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(199,165,82,.12);
  color: var(--ms-gold-light);
  font-size: .95rem;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.nav-mega__text { display: flex; flex-direction: column; line-height: 1.25; }
.nav-mega__title { font-size: .85rem; font-weight: 600; }
.nav-mega__desc { font-size: .7rem; color: var(--ms-muted); }

/* Admin dropdown — distinct wine/gold accent so it visually reads as a
   separate, higher-privilege surface rather than "one more menu". */
.nav-dropdown--admin > .nav-link { color: var(--ms-gold-light) !important; }
.nav-mega--admin {
  border-color: rgba(212,176,106,.35);
  box-shadow: 0 12px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(212,176,106,.08);
}
.nav-mega--admin .nav-mega__icon {
  background: rgba(212,176,106,.16);
}

@media (prefers-reduced-motion: reduce) {
  .nav-mega, .nav-mega__item { animation: none !important; opacity: 1 !important; }
  .nav-link--underline::after, #main-nav .dropdown-toggle::after,
  .brand-monogram, #main-nav { transition: none !important; }
}

/* Mobile — dropdowns render as static in-place sections inside the
   collapsed menu (Bootstrap default); just tone down the mega-item
   entrance animation delay so it doesn't feel sluggish stacked full-width. */
@media (max-width: 991.98px) {
  .nav-mega {
    min-width: 0;
    box-shadow: none;
    border: none;
    background: rgba(199,165,82,.03);
    margin: .25rem 0 .5rem;
    animation: none;
  }
  .nav-mega__item { animation: none; opacity: 1; }
  .nav-link--underline::after { display: none; }
}

/* Cards */
.card {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--ms-border);
  padding: .875rem 1.25rem;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .02em;
}

.card-footer {
  background: transparent;
  border-top: 1px solid var(--ms-border);
  padding: 1rem 1.25rem;
}

/* Tables */
.table {
  color: var(--ms-text);
  font-size: .875rem;
}

.table > thead > tr > th {
  background: rgba(199,165,82,.05);
  color: var(--ms-muted);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ms-border);
  padding: .75rem 1rem;
  white-space: nowrap;
}

.table > tbody > tr > td {
  padding: .75rem 1rem;
  border-bottom: 1px solid rgba(199,165,82,.06);
  vertical-align: middle;
}

.table-hover > tbody > tr:hover > td {
  background: rgba(199,165,82,.04);
}

/* Hero section — fluid sizing so it never overflows narrow screens */
.hero-section {
  padding: clamp(1.5rem, 5vw, 3rem) 0 1rem;
  margin-bottom: 2rem;
  position: relative;
}

.hero-section h1,
.hero-section .display-5 {
  font-size: clamp(1.75rem, 4.5vw + 1rem, 3rem);
}

.hero-slogan {
  color: var(--ms-text-dim);
  font-size: clamp(.9rem, .8rem + .4vw, 1.05rem);
  letter-spacing: .02em;
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem .75rem;
  margin-top: 1rem;
}

.hero-stat {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .85rem;
  border-radius: 99px;
  background: var(--ms-surface-raised);
  border: 1px solid var(--ms-border);
  font-size: .78rem;
  color: var(--ms-muted);
}
.hero-stat i { color: var(--ms-gold-light); font-size: .85rem; }
.hero-stat strong { color: var(--ms-text); font-weight: 700; }

/* ============================================================
   Homepage — unified panel language + composition helpers
   ============================================================
   .panel is a semantic alias over the existing .card (same visuals) so
   every homepage block — table cards, rich list, activity feed, titles
   showcase — reads as one consistent surface language (item 9 of the
   redesign brief) instead of a mix of bare Bootstrap tables and custom
   components with slightly different radii/shadows/hover behavior.
   ============================================================ */

.panel {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.panel:hover {
  box-shadow: 0 10px 28px rgba(0,0,0,.4);
  border-color: rgba(199,165,82,.22);
}

.panel-header {
  position: relative;
}
.panel-header__title {
  font-weight: 600;
  font-size: .95rem;
}

/* Entrance animation — sections fade/slide in on load, staggered via a
   per-element --d custom property. Pure CSS, fires once on paint. */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up {
  animation: fade-in-up .55s cubic-bezier(.2,.7,.3,1) both;
  animation-delay: var(--d, 0ms);
}

/* Stat card numbers — a light "pop" on load rather than a real JS
   counter, per "без тяжёлых JS-анимаций". */
@keyframes stat-pop {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}
.stat-card .stat-value { animation: stat-pop .4s ease .1s both; }
.stat-icon { font-size: 1.1rem; display: block; opacity: .85; }

/* ── Топ богачей — coin-themed list instead of a plain table ─────────── */

.rich-list { display: flex; flex-direction: column; gap: .35rem; }

.rich-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem .75rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ms-text);
  border: 1px solid transparent;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.rich-row:hover {
  background: rgba(199,165,82,.07);
  border-color: var(--ms-border);
  transform: translateX(2px);
  color: var(--ms-text);
}

.rich-row__rank {
  width: 26px;
  text-align: center;
  font-size: .85rem;
  color: var(--ms-muted);
  flex-shrink: 0;
}
.rich-row__name { flex: 1; font-weight: 500; font-size: .875rem; }
.rich-row__coins {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-weight: 700;
  color: var(--ms-gold-light);
  font-size: .85rem;
  background: rgba(199,165,82,.1);
  padding: .2rem .55rem;
  border-radius: 99px;
}
.rich-row__coins i { color: var(--ms-gold); }

.rich-row--top1 { background: rgba(212,176,106,.07); border-color: rgba(212,176,106,.25); }
.rich-row--top2 { background: rgba(184,184,184,.05); border-color: rgba(184,184,184,.18); }
.rich-row--top3 { background: rgba(176,141,87,.06); border-color: rgba(176,141,87,.2); }

/* ── Активность клуба — timeline лента ─────────────────────────────── */

.activity-feed { display: flex; flex-direction: column; gap: .15rem; }

.activity-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem .5rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ms-text-dim);
  transition: background .18s ease;
}
.activity-item:hover { background: rgba(199,165,82,.06); color: var(--ms-text); }

.activity-item__icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(138,138,138,.12);
  color: var(--ms-muted);
  font-size: .85rem;
}
.activity-item__icon--rare      { background: rgba(184,184,184,.14); color: #B8B8B8; }
.activity-item__icon--epic      { background: rgba(142,28,28,.16); color: var(--ms-wine-light); }
.activity-item__icon--legendary,
.activity-item__icon--ultra     { background: rgba(212,176,106,.16); color: var(--ms-gold-light); }
.activity-item__icon--mythic    { background: rgba(157,78,221,.14); color: #9d4edd; }

.activity-item__text { font-size: .85rem; line-height: 1.4; }
.activity-item__text strong { color: var(--ms-text); }

.titles-grid--compact { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

/* ============================================================
   Топ игроков / Последние игры — analytics-product density
   ============================================================
   Deliberately restrained: existing --ms-* palette only, 1px hairline
   borders, no gradients/glass/neon. Tabular-nums keeps every numeric
   column visually aligned like a real data product (Stripe/Linear/F1
   timing), not a Bootstrap table with numbers in prose font.
   ============================================================ */

.tabular-nums { font-variant-numeric: tabular-nums; }

/* Город/Мафия win-rate meter — a single thin two-color bar, not a chart */
.side-meter {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .68rem;
  color: var(--ms-muted);
}
.side-meter__bar {
  width: 64px;
  height: 4px;
  border-radius: 99px;
  background: var(--ms-wine-light);
  overflow: hidden;
}
.side-meter__fill {
  height: 100%;
  background: var(--ms-gold-light);
}

.rank-table thead th {
  font-size: .65rem;
}

.rank-row { transition: background .15s ease; }
.rank-row:hover td { background: rgba(199,165,82,.04); }

/* Top-3 — a thin left accent + slightly stronger rank badge, reusing the
   same gold/silver/bronze ladder as .podium-1/2/3 elsewhere on the site
   (consistency, not a new color language) instead of medal emoji. */
.rank-row--top1 td:first-child { box-shadow: inset 3px 0 0 var(--ms-gold-light); }
.rank-row--top2 td:first-child { box-shadow: inset 3px 0 0 #B8B8B8; }
.rank-row--top3 td:first-child { box-shadow: inset 3px 0 0 #B08D57; }
.rank-row--top1 .rank-badge { color: var(--ms-gold-light); font-weight: 700; }
.rank-row--top2 .rank-badge { color: #B8B8B8; font-weight: 700; }
.rank-row--top3 .rank-badge { color: #B08D57; font-weight: 700; }

.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  color: var(--ms-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: .8rem;
}

.streak-chip {
  display: inline-block;
  padding: .1rem .45rem;
  border-radius: 5px;
  font-size: .72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.streak-chip--win  { color: var(--ms-gold-light); background: rgba(199,165,82,.1); }
.streak-chip--loss { color: var(--ms-wine-light); background: rgba(142,28,28,.12); }

.form-sparkline { display: block; margin-left: auto; opacity: .9; }
.form-sparkline polyline {
  fill: none;
  stroke: var(--ms-gold-light);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Последние игры — event feed, not a spreadsheet ──────────────────── */

.game-feed { display: flex; flex-direction: column; gap: .3rem; }

.game-event {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .65rem .75rem;
  border-radius: 8px;
  border: 1px solid transparent;
  border-left: 2px solid var(--ms-border);
  text-decoration: none;
  color: var(--ms-text);
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.game-event:hover {
  background: rgba(199,165,82,.05);
  border-color: var(--ms-border);
  transform: translateX(2px);
  color: var(--ms-text);
}
.game-event--city  { border-left-color: var(--ms-gold-light); }
.game-event--mafia { border-left-color: var(--ms-wine-light); }

.game-event__side-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: .85rem;
  background: rgba(138,138,138,.1);
  color: var(--ms-muted);
}
.game-event--city  .game-event__side-icon { background: rgba(199,165,82,.12); color: var(--ms-gold-light); }
.game-event--mafia .game-event__side-icon { background: rgba(142,28,28,.14); color: var(--ms-wine-light); }

.game-event__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.game-event__title { font-size: .85rem; font-weight: 600; }
.game-event__winner { font-weight: 400; color: var(--ms-muted); }
.game-event__highlight {
  font-size: .72rem;
  color: var(--ms-gold-light);
  display: flex;
  align-items: center;
  gap: .3rem;
}

.game-event__meta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .72rem;
  color: var(--ms-muted);
}
.game-event__players { display: inline-flex; align-items: center; gap: .25rem; }

@media (max-width: 767.98px) {
  .side-meter { display: none; }
  .rank-table th:nth-child(4), .rank-table td:nth-child(4),
  .rank-table th:nth-child(8), .rank-table td:nth-child(8) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fade-in-up, .stat-card .stat-value { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Stat cards */
.stat-card {
  background: var(--ms-surface-raised) !important;
  border: 1px solid var(--ms-border) !important;
  border-radius: var(--ms-radius) !important;
  transition: transform .2s, box-shadow .2s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}

.stat-icon { font-size: 1.5rem; }

.stat-value {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.15rem, 1rem + 1vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: .25rem;
}

.stat-label {
  font-size: .7rem;
  color: var(--ms-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Podium */
.podium {
  border-radius: var(--ms-radius);
  transition: transform .2s;
}

.podium:hover { transform: translateY(-3px); }

.podium-1 {
  border-top: 3px solid var(--ms-gold-light) !important;
  background: rgba(212,176,106,.06) !important;
}

.podium-2 {
  border-top: 3px solid #B8B8B8 !important;
}

.podium-3 {
  border-top: 3px solid #B08D57 !important;
}

/* Forms */
.form-control, .form-select {
  background: var(--ms-surface-raised);
  border: 1px solid var(--ms-border);
  color: var(--ms-text);
  border-radius: 8px;
  font-size: .875rem;
}

.form-control:focus, .form-select:focus {
  background: var(--ms-surface-raised);
  border-color: var(--ms-gold);
  color: var(--ms-text);
  box-shadow: 0 0 0 3px var(--ms-gold-glow);
}

.form-control::placeholder { color: var(--ms-muted); }

/* Buttons — .btn-danger is used throughout the app as the PRIMARY call-to-
   action color (not literal "danger"), so it's re-themed to gold. Actual
   danger semantics (delete/cancel/validation) flow through Bootstrap's
   --bs-danger variable above (.btn-outline-danger, .text-danger, .alert-danger). */
.btn-danger {
  background: var(--ms-gold);
  border-color: var(--ms-gold);
  color: #0D0D0D;
  font-weight: 600;
}

.btn-danger:hover, .btn-danger:focus {
  background: var(--ms-gold-light);
  border-color: var(--ms-gold-light);
  color: #0D0D0D;
}

.btn-outline-secondary {
  color: var(--ms-muted);
  border-color: var(--ms-border);
}

.btn-outline-secondary:hover {
  color: var(--ms-text);
  background: rgba(199,165,82,.08);
  border-color: var(--ms-gold);
}

/* Badges */
.badge {
  font-weight: 500;
  font-size: .75rem;
}

.bg-success-subtle { background: rgba(199,165,82,.12) !important; }
.bg-warning-subtle { background: rgba(212,176,106,.12) !important; }
.bg-secondary-subtle { background: rgba(138,138,138,.12) !important; }
.bg-danger-subtle  { background: rgba(123,15,15,.16) !important; }

/* Alerts */
.alert {
  border-radius: var(--ms-radius);
  font-size: .875rem;
}

/* Progress */
.progress {
  background: rgba(255,255,255,.06);
  border-radius: 99px;
}

/* Footer */
.footer {
  background: transparent;
  font-size: .8rem;
}

.footer-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ms-gold) 50%, transparent);
  opacity: .35;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(199,165,82,.25); border-radius: 99px; }

/* ============================================================
   Tournament extensions
   ============================================================ */

.tournament-card {
  transition: transform .2s, box-shadow .2s;
}
.tournament-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}

/* ELO color indicators — muted gold/wine, no bright green/red */
.elo-up   { color: var(--ms-gold-light); }
.elo-down { color: var(--ms-wine-light); }
.elo-flat { color: var(--ms-muted); }

/* Stage pipeline */
.stage-pipeline {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0;
}

/* ============================================================
   Shop / Achievements — rarity accents (silver → wine → gold ladder,
   no blue/purple — stays inside the approved palette)
   ============================================================ */

.rarity-common    { border-top: 3px solid var(--ms-muted) !important; }
.rarity-rare      { border-top: 3px solid #B8B8B8 !important; }
.rarity-epic      { border-top: 3px solid var(--ms-wine-light) !important; }
.rarity-legendary { border-top: 3px solid var(--ms-gold-light) !important; background: rgba(212,176,106,.06) !important; }
.rarity-mythic    { border-top: 3px solid #9d4edd !important; background: rgba(157,78,221,.07) !important; }

/* Ultra — единственная редкость с анимированным акцентом, отражает
   её премиальный статус (уникальный, перекупаемый предмет). */
@keyframes rarity-ultra-pulse {
  0%, 100% { border-top-color: #ffd700; }
  50%      { border-top-color: #ff3b3b; }
}
.rarity-ultra {
  border-top: 3px solid #ffd700 !important;
  background: rgba(255,215,0,.07) !important;
  animation: rarity-ultra-pulse 2.5s ease-in-out infinite;
}

.achievement-locked { opacity: .45; filter: grayscale(1); }

.equip-slot-badge {
  position: absolute; top: 8px; right: 8px;
}

/* ============================================================
   Achievements — epic cards
   ============================================================
   Same restrained gold/wine/silver rarity ladder as the accent rules
   above (no blue/purple), just with a lot more chrome: glowing icon
   medallion, corner seal on unlock, a slow shine sweep for Legendary,
   and a deliberately mysterious treatment for hidden+locked cards.
   ============================================================ */

:root {
  --achv-common:    var(--ms-muted);
  --achv-rare:      #B8B8B8;
  --achv-epic:      var(--ms-wine-light);
  --achv-legendary: var(--ms-gold-light);
}

.achv-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.25rem;
}

.achv-progress-wrap {
  flex: 1 1 220px;
  min-width: 180px;
}

.achv-progress-track {
  position: relative;
  height: 8px;
  border-radius: 99px;
  background: var(--ms-surface-alt);
  overflow: hidden;
  border: 1px solid var(--ms-border);
}

.achv-progress-fill {
  position: relative;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--ms-gold-dark), var(--ms-gold-light));
  transition: width .6s ease;
}

.achv-progress-fill::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.35) 50%, transparent 80%);
  background-size: 200% 100%;
  animation: achv-progress-shine 2.8s ease-in-out infinite;
}

@keyframes achv-progress-shine {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.achv-filter-pill {
  border: 1px solid var(--ms-border);
  background: var(--ms-surface);
  color: var(--ms-text-dim);
  border-radius: 99px;
  padding: .3rem .85rem;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
.achv-filter-pill:hover {
  border-color: var(--ms-gold);
  color: var(--ms-text);
}
.achv-filter-pill.active {
  background: var(--ms-gold);
  border-color: var(--ms-gold);
  color: #0D0D0D;
}

.achv-section-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 1.05rem;
  margin: 1.75rem 0 .9rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--ms-border);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.achv-section-title:first-child { margin-top: 0; }

.achv-section-count {
  font-size: .72rem;
  font-weight: 500;
  color: var(--ms-muted);
}

.achv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .85rem;
}

.achv-card {
  position: relative;
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  padding: 1.1rem 1rem;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  --accent: var(--achv-common);
}

.achv-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
  opacity: .9;
}

.achv-card--rare      { --accent: var(--achv-rare); }
.achv-card--epic      { --accent: var(--achv-epic); }
.achv-card--legendary { --accent: var(--achv-legendary); background: rgba(212,176,106,.05); }

.achv-card.is-unlocked:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 0 20px color-mix(in srgb, var(--accent) 35%, transparent);
  z-index: 2;
}

/* Legendary unlocked — a slow diagonal shine sweeps across the card,
   the site's one deliberately "showy" flourish, reserved for the rarest
   tier so it still reads as special rather than noisy chrome everywhere. */
.achv-card--legendary.is-unlocked::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(212,176,106,.16) 50%, transparent 70%);
  background-size: 250% 250%;
  animation: achv-legendary-shine 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes achv-legendary-shine {
  0%, 100% { background-position: 200% 200%; }
  50%      { background-position: -50% -50%; }
}

.achv-card__head {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .6rem;
}

.achv-card__icon {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 35%, var(--ms-surface-raised)), var(--ms-surface-raised));
  color: var(--accent);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 45%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
}

.achv-card__name {
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.25;
  margin-bottom: .15rem;
}

.achv-card__rarity {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent);
  font-weight: 600;
}

.achv-card__category {
  color: var(--ms-muted);
  font-size: .68rem;
  margin-bottom: .5rem;
}

.achv-card__desc {
  color: var(--ms-text-dim);
  font-size: .8rem;
  line-height: 1.4;
  min-height: 2.2em;
  margin-bottom: .75rem;
}

.achv-card__footer {
  font-size: .76rem;
}

.achv-card__unlocked-flag {
  color: var(--ms-gold-light);
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: .5rem;
}

/* Wax-seal style corner badge on unlocked cards */
.achv-card__seal {
  position: absolute;
  top: -10px; right: -10px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, var(--ms-gold-light), var(--ms-gold-dark));
  color: #1a1400;
  border-radius: 50%;
  font-size: .85rem;
  box-shadow: 0 3px 10px rgba(0,0,0,.5);
}

/* Locked — muted and grayscale, but not flattened to invisible; a small
   lock badge replaces the seal so the state reads at a glance. */
.achv-card.is-locked {
  opacity: .55;
  filter: grayscale(.85);
}
.achv-card.is-locked .achv-card__icon {
  background: var(--ms-surface-alt);
  color: var(--ms-muted);
  border-color: var(--ms-border);
  filter: none;
}
.achv-card.is-locked::before { opacity: .35; }

/* Hidden + locked ("mystery") — distinct from a plain locked card: a slow
   pulsing glow on the icon hints something special is behind it, without
   spoiling what. Deliberately not grayscaled as hard as a regular locked
   card so it still invites curiosity. */
.achv-card.is-mystery {
  opacity: .8;
  filter: none;
}
.achv-card.is-mystery .achv-card__icon {
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--ms-gold) 30%, var(--ms-surface-raised)), var(--ms-surface-raised));
  color: var(--ms-gold-light);
  border-color: color-mix(in srgb, var(--ms-gold) 45%, transparent);
  animation: achv-mystery-pulse 2.4s ease-in-out infinite;
}
@keyframes achv-mystery-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ms-gold) 35%, transparent); }
  50%      { box-shadow: 0 0 12px 3px color-mix(in srgb, var(--ms-gold) 35%, transparent); }
}

/* ============================================================
   Titles showcase (профиль — "Титулы клуба")
   ============================================================
   Two independent color signals, on purpose:
     - flavor (category)  -> card border/glow/icon tint
     - rarity              -> small corner dot, readable at a glance
     without needing to read any text. Deliberately its own muted
     jewel-tone palette (blue/purple/orange/teal) rather than reusing
     the achievement rarity ladder above — titles are a small, curated
     showcase and read better with more color variety than the site's
     restrained gold/wine system chrome.
   ============================================================ */

:root {
  --flavor-defense:    #5B8DC9;
  --flavor-intellect:  #9B72CF;
  --flavor-streak:     #D98A4A;
  --flavor-rating:     var(--ms-gold);
  --flavor-aggression: #C15C56;
  --flavor-special:    #4FB8AE;

  --title-common:    #6FA37D;
  --title-rare:      #5B8DC9;
  --title-epic:      #9B72CF;
  --title-legendary: #D98A4A;
  --title-mythic:    #C15C56;
}

.titles-showcase {
  border-radius: var(--ms-radius);
  background: var(--ms-surface-raised);
  border: 1px solid var(--ms-border);
  padding: 1.25rem;
}

.titles-showcase__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
}

.titles-showcase__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0;
}

.titles-showcase__subtitle {
  color: var(--ms-muted);
  font-size: .75rem;
}

.titles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: .75rem;
}

/* ── Card ─────────────────────────────────────────────────────── */

.title-card {
  position: relative;
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  padding: .9rem .8rem;
  cursor: default;
  overflow: visible;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  --flavor: var(--flavor-special);
}

.title-card::before {
  /* цветной верхний акцент — тонкая полоса, а не заливка всей карточки */
  content: "";
  position: absolute;
  top: 0; left: .8rem; right: .8rem;
  height: 2px;
  background: var(--flavor);
  border-radius: 0 0 2px 2px;
  opacity: .85;
}

.title-card:hover,
.title-card:focus-within {
  transform: translateY(-4px) scale(1.03);
  border-color: var(--flavor);
  box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 0 0 1px color-mix(in srgb, var(--flavor) 45%, transparent),
              0 0 22px color-mix(in srgb, var(--flavor) 30%, transparent);
  z-index: 2;
}

.title-card--defense    { --flavor: var(--flavor-defense); }
.title-card--intellect  { --flavor: var(--flavor-intellect); }
.title-card--streak     { --flavor: var(--flavor-streak); }
.title-card--rating     { --flavor: var(--flavor-rating); }
.title-card--aggression { --flavor: var(--flavor-aggression); }
.title-card--special    { --flavor: var(--flavor-special); }

.title-card__icon {
  font-size: 1.9rem;
  line-height: 1;
  margin-bottom: .5rem;
  color: var(--flavor);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--flavor) 55%, transparent));
}

.title-card__name {
  font-weight: 600;
  font-size: .85rem;
  line-height: 1.25;
  margin-bottom: .15rem;
}

.title-card__desc {
  color: var(--ms-muted);
  font-size: .72rem;
  line-height: 1.3;
  min-height: 1.7em;
}

.title-card__equipped-flag {
  position: absolute;
  top: -8px; right: -6px;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ms-gold);
  color: #0D0D0D;
  border-radius: 50%;
  font-size: .7rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}

/* Rarity — small corner dot, independent of the flavor border color */
.title-card__rarity-dot {
  position: absolute;
  top: .7rem; right: .7rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--ms-surface);
}
.title-card__rarity-dot--common    { background: var(--title-common); }
.title-card__rarity-dot--rare      { background: var(--title-rare); }
.title-card__rarity-dot--epic      { background: var(--title-epic); }
.title-card__rarity-dot--legendary { background: var(--title-legendary); box-shadow: 0 0 0 2px var(--ms-surface), 0 0 6px var(--title-legendary); }
.title-card__rarity-dot--mythic,
.title-card__rarity-dot--ultra     { background: var(--title-mythic); box-shadow: 0 0 0 2px var(--ms-surface), 0 0 6px var(--title-mythic); }

/* Season nomination — deliberately more "prestigious" than a regular
   title: gradient gold frame + ribbon corner, per requirement that
   nominations read as a step above ordinary titles. */
.title-card--nomination {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ms-surface), var(--ms-surface)) padding-box,
    linear-gradient(135deg, var(--ms-gold-light), var(--ms-gold-dark) 60%, var(--ms-gold-light)) border-box;
}
.title-card--nomination::before { background: linear-gradient(90deg, var(--ms-gold-light), var(--ms-gold)); opacity: 1; }
.title-card--nomination .title-card__icon { color: var(--ms-gold-light); filter: drop-shadow(0 0 8px var(--ms-gold-glow)); }
.title-card--nomination:hover,
.title-card--nomination:focus-within {
  box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 0 22px var(--ms-gold-glow);
}

.title-card__season-chip {
  display: inline-block;
  margin-top: .35rem;
  padding: .1rem .45rem;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .03em;
  border-radius: 99px;
  background: rgba(199,165,82,.14);
  color: var(--ms-gold-light);
}

/* Club-wide showcase (главная) — кто держит титул, а не "мой" список */
.title-card__holder {
  display: block;
  margin-top: .5rem;
  padding-top: .4rem;
  border-top: 1px solid var(--ms-border);
  font-size: .76rem;
  font-weight: 600;
  color: var(--ms-text);
  text-decoration: none;
}
.title-card__holder:hover { color: var(--flavor); }

/* Locked / "live race" preview — a title the viewer is currently
   leading but hasn't been formally awarded yet (season still open). */
.title-card--live {
  border-style: dashed;
  border-color: var(--flavor);
  background: color-mix(in srgb, var(--flavor) 6%, var(--ms-surface));
}
.title-card--live::before { display: none; }

@keyframes title-live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--flavor) 45%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--flavor) 0%, transparent); }
}
.title-card--live .title-card__icon { animation: title-live-pulse 2.2s ease-in-out infinite; }

.title-card__live-flag {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-top: .35rem;
  font-size: .62rem;
  font-weight: 600;
  color: var(--flavor);
}
.title-card__live-flag .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--flavor);
  animation: title-live-blink 1.4s ease-in-out infinite;
}
@keyframes title-live-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* Newly-awarded — one-shot intro flash + settle, plays once on load for
   any title granted in the last 48h. Pure CSS, no JS/websocket needed. */
@keyframes title-new-flash {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0); transform: scale(.94); opacity: 0; }
  35%  { box-shadow: 0 0 32px 6px var(--ms-gold-glow); opacity: 1; }
  60%  { box-shadow: 0 0 20px 2px var(--ms-gold-glow); transform: scale(1.02); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); transform: scale(1); }
}
.title-card--new {
  animation: title-new-flash 1.6s ease-out 1;
}
.title-card--new::after {
  content: "Новый!";
  position: absolute;
  top: -9px; left: .8rem;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .05rem .4rem;
  border-radius: 99px;
  background: var(--ms-gold);
  color: #0D0D0D;
  animation: title-new-flash 1.6s ease-out 1;
}

/* Tooltip — pure CSS, no JS init required */
.title-card__tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translate(-50%, 4px);
  min-width: 190px;
  background: var(--ms-bg);
  border: 1px solid var(--flavor);
  border-radius: 8px;
  padding: .55rem .7rem;
  font-size: .68rem;
  color: var(--ms-text-dim);
  box-shadow: 0 8px 24px rgba(0,0,0,.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 5;
}
.title-card__tooltip::after {
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--flavor);
}
.title-card:hover .title-card__tooltip,
.title-card:focus-within .title-card__tooltip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.title-card__tooltip-row + .title-card__tooltip-row { margin-top: .2rem; }
.title-card__tooltip-row strong { color: var(--ms-text); }

.title-card__actions {
  margin-top: .5rem;
}
.title-card__actions .btn { font-size: .68rem; padding: .15rem .5rem; }

/* ── Stat panel (right side) ─────────────────────────────────────── */

.titles-stat-panel {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  padding: 1rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.titles-stat-panel__total {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ms-gold-light);
}
.titles-stat-panel__total small {
  font-family: 'Inter', sans-serif;
  font-size: .7rem;
  font-weight: 500;
  color: var(--ms-muted);
  margin-left: .3rem;
}

.titles-stat-panel__rarity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .72rem;
  color: var(--ms-text-dim);
}
.titles-stat-panel__rarity-row .dot {
  width: 8px; height: 8px; border-radius: 50%;
  margin-right: .4rem;
  display: inline-block;
}

.titles-toggle-more {
  grid-column: 1 / -1;
  background: transparent;
  border: 1px dashed var(--ms-border);
  border-radius: var(--ms-radius);
  color: var(--ms-muted);
  font-size: .78rem;
  padding: .6rem;
  transition: border-color .2s, color .2s;
}
.titles-toggle-more:hover { border-color: var(--ms-gold); color: var(--ms-gold-light); }

.title-card--extra { display: none; }
.titles-grid.titles-grid--expanded .title-card--extra { display: block; }

@media (prefers-reduced-motion: reduce) {
  .title-card, .title-card__icon, .title-card--new, .title-card--new::after,
  .title-card--live .title-card__icon, .title-card__live-flag .dot {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 576px) {
  .titles-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: .5rem; }
  .titles-showcase { padding: 1rem; }
}

/* ============================================================
   Auth extensions
   ============================================================ */

.user-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ms-gold); color: #0D0D0D;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700; flex-shrink: 0;
}

.avatar-circle {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--ms-gold); color: #0D0D0D;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 700; flex-shrink: 0;
}

/* Косметическая рамка вокруг аватара (профиль + предпросмотр в магазине) */
.profile-frame {
  border: 3px solid var(--ms-border);
  border-radius: 50%;
}

.avatar-sm {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ms-gold); color: #0D0D0D;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; flex-shrink: 0;
}

/* Dropdown dark theme */
.dropdown-menu {
  background: var(--ms-surface-raised);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
}

.dropdown-item {
  color: var(--ms-text);
  font-size: .875rem;
  border-radius: 6px;
  margin: 1px 4px;
  padding: .45rem .75rem;
}

.dropdown-item:hover, .dropdown-item:focus {
  background: rgba(199,165,82,.08);
  color: var(--ms-text);
}

.dropdown-item.text-danger:hover { background: rgba(123,15,15,.14); }

.dropdown-divider { border-color: var(--ms-border); }
.dropdown-header  { color: var(--ms-muted); font-size: .75rem; }

/* Input group dark */
.input-group-text {
  background: var(--ms-surface-raised);
  border-color: var(--ms-border);
  color: var(--ms-muted);
}

.form-control.border-start-0:focus,
.form-control.border-end-0:focus {
  border-color: var(--ms-gold);
}

/* ============================================================
   Chart containers — fixed-height fluid-width wrapper so Chart.js
   canvases never drive layout width on narrow screens (used with
   options.maintainAspectRatio = false in the chart JS)
   ============================================================ */

.chart-container {
  position: relative;
  width: 100%;
  height: 220px;
}

@media (max-width: 576px) {
  .chart-container { height: 180px; }
}

/* ============================================================
   Personalization effects (shop items — ShopItem.data.effect)
   Named, curated set — admin picks one from the shop item form,
   no raw CSS/JS ever entered by hand. Color-parameterized effects
   read the color from a CSS custom property set inline by the
   template (--fx-color / --fx-color-2), so one class works for
   any item's chosen color.
   ============================================================ */

@keyframes fx-pulse-glow {
  0%, 100% { box-shadow: 0 0 6px 1px var(--fx-color, var(--ms-gold)); }
  50%      { box-shadow: 0 0 16px 5px var(--fx-color, var(--ms-gold)); }
}
.fx-frame-glow {
  animation: fx-pulse-glow 2s ease-in-out infinite;
}

@keyframes fx-spin {
  to { transform: rotate(360deg); }
}

@keyframes fx-text-glow {
  0%, 100% { text-shadow: 0 0 4px var(--fx-color, var(--ms-gold)); }
  50%      { text-shadow: 0 0 12px var(--fx-color, var(--ms-gold)), 0 0 4px var(--fx-color, var(--ms-gold)); }
}
.fx-nick-glow {
  animation: fx-text-glow 2s ease-in-out infinite;
}

@keyframes fx-rainbow-shift {
  to { background-position: 200% center; }
}
.fx-nick-shimmer {
  background-size: 200% auto;
  animation: fx-rainbow-shift 2s linear infinite;
}

/* ── Themed presets (fire/ice/electric/toxic/shadow/holy/rainbow) ──────────
   Each theme = its own palette + its own animation character (fire
   flickers irregularly, ice glints calmly, electric jitters, toxic
   bubbles slowly, shadow breathes smokily, holy radiates steadily) —
   not just a recolored version of the same generic pulse. Frame side
   uses a spinning gradient ring (::before) + a pulsing glow on the
   element itself; nick side uses an animated gradient-clipped text
   fill + a matching glow. Selected via data.theme in the shop item
   form — colors are fixed per theme, not admin-configurable, so every
   "🔥 Огонь" item looks the same and actually reads as fire. */

.fx-frame-themed {
  position: relative;
  border-color: transparent !important;
}
.fx-frame-themed::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  padding: 3px;
  background: var(--fx-ring, conic-gradient(from 0deg, var(--ms-gold), var(--ms-gold)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: fx-spin var(--fx-ring-speed, 3s) linear infinite;
  z-index: -1;
}
.fx-nick-themed {
  background: var(--fx-text-gradient);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 🔥 Fire — fast, irregular flicker; warm reds/oranges/yellows */
@keyframes fx-fire-flicker {
  0%   { box-shadow: 0 0 8px 2px #ff3d00; }
  20%  { box-shadow: 0 0 15px 4px #ff9100; }
  38%  { box-shadow: 0 0 6px 1px #ff3d00; }
  55%  { box-shadow: 0 0 19px 5px #ffea00; }
  72%  { box-shadow: 0 0 9px 2px #ff9100; }
  88%  { box-shadow: 0 0 16px 4px #ff3d00; }
  100% { box-shadow: 0 0 8px 2px #ff3d00; }
}
.fx-frame-theme-fire {
  --fx-ring: conic-gradient(from 0deg, #ff3d00, #ff9100, #ffea00, #ff3d00);
  --fx-ring-speed: 1.4s;
  animation: fx-fire-flicker 1.1s ease-in-out infinite;
}
.fx-nick-theme-fire {
  --fx-text-gradient: linear-gradient(90deg, #ff3d00, #ff9100, #ffea00, #ff3d00);
  animation: fx-rainbow-shift 1.3s linear infinite, fx-fire-text-glow 1.1s ease-in-out infinite;
}
@keyframes fx-fire-text-glow {
  0%, 100% { text-shadow: 0 0 4px #ff3d00; }
  50%      { text-shadow: 0 0 10px #ff9100, 0 0 3px #ffea00; }
}

/* ❄️ Ice — calm, crisp glint; cool blues/white */
@keyframes fx-ice-glint {
  0%, 100% { box-shadow: 0 0 6px 1px #4fc3f7; }
  50%      { box-shadow: 0 0 15px 3px #b3e5fc, 0 0 4px 2px #ffffff; }
}
.fx-frame-theme-ice {
  --fx-ring: conic-gradient(from 0deg, #4fc3f7, #b3e5fc, #ffffff, #4fc3f7);
  --fx-ring-speed: 4s;
  animation: fx-ice-glint 2.4s ease-in-out infinite;
}
.fx-nick-theme-ice {
  --fx-text-gradient: linear-gradient(90deg, #4fc3f7, #b3e5fc, #ffffff, #4fc3f7);
  animation: fx-rainbow-shift 2.6s ease-in-out infinite, fx-ice-text-glow 2.4s ease-in-out infinite;
}
@keyframes fx-ice-text-glow {
  0%, 100% { text-shadow: 0 0 5px rgba(79,195,247,.55); }
  50%      { text-shadow: 0 0 10px rgba(179,229,252,.8); }
}

/* ⚡ Electric — sudden jittery sparks; cyan/violet/white */
@keyframes fx-electric-flicker {
  0%, 18%, 22%, 44%, 48%, 100% { box-shadow: 0 0 7px 1px #00e5ff; opacity: 1; }
  20% { box-shadow: none; opacity: .35; }
  46% { box-shadow: 0 0 18px 5px #d500f9, 0 0 5px 2px #ffffff; opacity: 1; }
  70%, 74% { box-shadow: 0 0 15px 4px #00e5ff; }
  72% { opacity: .5; }
}
.fx-frame-theme-electric {
  --fx-ring: conic-gradient(from 0deg, #00e5ff, #d500f9, #00e5ff);
  --fx-ring-speed: 1.8s;
  animation: fx-electric-flicker 1.7s steps(1) infinite;
}
.fx-nick-theme-electric {
  --fx-text-gradient: linear-gradient(90deg, #00e5ff, #d500f9, #00e5ff);
  animation: fx-rainbow-shift .8s linear infinite;
  text-shadow: 0 0 6px #00e5ff;
}

/* ☠️ Toxic — slow bubbling pulse; acid greens */
@keyframes fx-toxic-bubble {
  0%, 100% { box-shadow: 0 0 6px 1px #1b5e20; }
  50%      { box-shadow: 0 0 17px 4px #76ff03; }
}
.fx-frame-theme-toxic {
  --fx-ring: conic-gradient(from 0deg, #1b5e20, #76ff03, #00e676, #1b5e20);
  --fx-ring-speed: 5s;
  animation: fx-toxic-bubble 2.3s ease-in-out infinite;
}
.fx-nick-theme-toxic {
  --fx-text-gradient: linear-gradient(90deg, #1b5e20, #76ff03, #00e676, #1b5e20);
  animation: fx-rainbow-shift 2.3s ease-in-out infinite;
  text-shadow: 0 0 6px rgba(118,255,3,.5);
}

/* 🌑 Shadow — slow smoky breathe; deep purples/black */
@keyframes fx-shadow-pulse {
  0%, 100% { box-shadow: 0 0 6px 2px #4a148c; }
  50%      { box-shadow: 0 0 18px 6px #1a0033; }
}
.fx-frame-theme-shadow {
  --fx-ring: conic-gradient(from 0deg, #8e24aa, #2a0845, #4a148c, #8e24aa);
  --fx-ring-speed: 6s;
  animation: fx-shadow-pulse 3s ease-in-out infinite;
}
.fx-nick-theme-shadow {
  --fx-text-gradient: linear-gradient(90deg, #b388ff, #4a148c, #8e24aa, #b388ff);
  animation: fx-rainbow-shift 3s ease-in-out infinite;
  text-shadow: 0 0 8px rgba(74,20,140,.7);
}

/* ✨ Holy — steady radiant glow; warm gold/white */
@keyframes fx-holy-radiant {
  0%, 100% { box-shadow: 0 0 8px 2px #ffd54f; }
  50%      { box-shadow: 0 0 20px 6px #fff8e1, 0 0 8px 3px #ffd54f; }
}
.fx-frame-theme-holy {
  --fx-ring: conic-gradient(from 0deg, #fff176, #ffd54f, #fff8e1, #fff176);
  --fx-ring-speed: 5s;
  animation: fx-holy-radiant 2.5s ease-in-out infinite;
}
.fx-nick-theme-holy {
  --fx-text-gradient: linear-gradient(90deg, #fff176, #ffd54f, #fff8e1, #fff176);
  animation: fx-rainbow-shift 2.5s ease-in-out infinite;
  text-shadow: 0 0 8px rgba(255,213,79,.6);
}

/* 🌈 Rainbow — full spectrum cycle */
.fx-frame-theme-rainbow {
  --fx-ring: conic-gradient(from 0deg, #ff3b3b, #ffb13b, #f8e34e, #3bff6e, #3bd1ff, #7a3bff, #ff3bd1, #ff3b3b);
  --fx-ring-speed: 3s;
}
.fx-nick-theme-rainbow {
  --fx-text-gradient: linear-gradient(90deg, #ff3b3b, #ffb13b, #f8e34e, #3bff6e, #3bd1ff, #7a3bff, #ff3bd1, #ff3b3b);
  animation: fx-rainbow-shift 3s linear infinite;
}

/* 🌌 Galaxy — slow swirl + twinkling multi-color flicker (stars) */
@keyframes fx-galaxy-twinkle {
  0%, 100% { box-shadow: 0 0 8px 2px #6a0dad, 0 0 2px 1px #00d4ff; }
  30%      { box-shadow: 0 0 14px 3px #ff2d95, 0 0 3px 1px #6a0dad; }
  60%      { box-shadow: 0 0 10px 2px #00d4ff, 0 0 3px 1px #ff2d95; }
  85%      { box-shadow: 0 0 16px 4px #6a0dad, 0 0 4px 2px #00d4ff; }
}
.fx-frame-theme-galaxy {
  --fx-ring: conic-gradient(from 0deg, #1a0b3d, #6a0dad, #ff2d95, #00d4ff, #1a0b3d);
  --fx-ring-speed: 6s;
  animation: fx-galaxy-twinkle 3s ease-in-out infinite;
}
.fx-nick-theme-galaxy {
  --fx-text-gradient: linear-gradient(90deg, #6a0dad, #ff2d95, #00d4ff, #6a0dad);
  animation: fx-rainbow-shift 4s ease-in-out infinite, fx-galaxy-text-twinkle 3s ease-in-out infinite;
}
@keyframes fx-galaxy-text-twinkle {
  0%, 100% { text-shadow: 0 0 4px #6a0dad; }
  40%      { text-shadow: 0 0 10px #ff2d95; }
  70%      { text-shadow: 0 0 8px #00d4ff; }
}

/* 💎 Diamond — sharp bright glint flash on silver/white (faster, crisper than ice) */
@keyframes fx-diamond-glint {
  0%, 100% { box-shadow: 0 0 5px 1px #c0c0c0; }
  15%      { box-shadow: 0 0 18px 4px #ffffff, 0 0 6px 2px #a0e9ff; }
  30%      { box-shadow: 0 0 5px 1px #c0c0c0; }
}
.fx-frame-theme-diamond {
  --fx-ring: conic-gradient(from 0deg, #ffffff, #c0c0c0, #a0e9ff, #ffffff, #c0c0c0, #ffffff);
  --fx-ring-speed: 2.5s;
  animation: fx-diamond-glint 1.8s ease-in-out infinite;
}
.fx-nick-theme-diamond {
  --fx-text-gradient: linear-gradient(90deg, #ffffff, #c0c0c0, #a0e9ff, #ffffff);
  animation: fx-rainbow-shift 1.6s linear infinite, fx-diamond-text-glint 1.8s ease-in-out infinite;
}
@keyframes fx-diamond-text-glint {
  0%, 100% { text-shadow: 0 0 3px #c0c0c0; }
  15%      { text-shadow: 0 0 10px #ffffff, 0 0 4px #a0e9ff; }
  30%      { text-shadow: 0 0 3px #c0c0c0; }
}

/* 🩸 Blood — heartbeat double-thump rhythm, not a smooth pulse */
@keyframes fx-blood-heartbeat {
  0%, 100% { box-shadow: 0 0 5px 1px #4a0000; }
  10%      { box-shadow: 0 0 16px 4px #ff0000; }
  20%      { box-shadow: 0 0 5px 1px #4a0000; }
  30%      { box-shadow: 0 0 20px 5px #ff0000; }
  45%      { box-shadow: 0 0 5px 1px #4a0000; }
}
.fx-frame-theme-blood {
  --fx-ring: conic-gradient(from 0deg, #4a0000, #8b0000, #ff0000, #4a0000);
  --fx-ring-speed: 4s;
  animation: fx-blood-heartbeat 1.8s ease-in-out infinite;
}
.fx-nick-theme-blood {
  --fx-text-gradient: linear-gradient(90deg, #4a0000, #8b0000, #ff0000, #4a0000);
  animation: fx-rainbow-shift 2s linear infinite, fx-blood-text-heartbeat 1.8s ease-in-out infinite;
}
@keyframes fx-blood-text-heartbeat {
  0%, 100% { text-shadow: 0 0 3px #4a0000; }
  10%      { text-shadow: 0 0 10px #ff0000; }
  20%      { text-shadow: 0 0 3px #4a0000; }
  30%      { text-shadow: 0 0 12px #ff0000; }
  45%      { text-shadow: 0 0 3px #4a0000; }
}

/* 🐛 Glitch — RGB channel split + digital jitter (steps(), not eased —
   deliberately jumpy/broken-looking, distinct mechanic from every other
   theme: transform+filter jump instead of a glow pulse) */
@keyframes fx-glitch-text {
  0%, 89%, 100% { text-shadow: none; transform: translate(0,0) skew(0deg); }
  90% { text-shadow: -2px 0 #ff0055, 2px 0 #00fff9; transform: translate(-1px,0) skew(-2deg); }
  92% { text-shadow: 2px 0 #ff0055, -2px 0 #00fff9; transform: translate(1px,0) skew(2deg); }
  94% { text-shadow: -1px 0 #ff0055, 1px 0 #00fff9; transform: translate(0,0) skew(0deg); }
  96%, 100% { text-shadow: none; transform: translate(0,0); }
}
.fx-nick-theme-glitch {
  --fx-text-gradient: linear-gradient(90deg, #00fff9, #ffffff, #ff0055, #00fff9);
  animation: fx-rainbow-shift 3s linear infinite, fx-glitch-text 2.5s steps(1) infinite;
  display: inline-block;
}
@keyframes fx-glitch-frame {
  0%, 89%, 100% { transform: translate(0,0); filter: none; }
  90% { transform: translate(-2px,1px); filter: hue-rotate(90deg); }
  93% { transform: translate(2px,-1px); filter: hue-rotate(-90deg); }
  96% { transform: translate(0,0); filter: none; }
}
.fx-frame-theme-glitch {
  --fx-ring: conic-gradient(from 0deg, #00fff9, #ff0055, #ffffff, #00fff9);
  --fx-ring-speed: 4s;
  animation: fx-glitch-frame 2.5s steps(1) infinite;
}

/* ⭐⭐⭐⭐⭐ MYTHIC ULTRA — Aurora
   Три слоя: (1) сам обод — плавная смена цвета северного сияния +
   редкая "вспышка яркости" (как настоящий всплеск активности
   сияния); (2) ::before — волнующийся "занавес" света через
   анимированный clip-path (форма меняется, не просто вращается —
   имитация живой, колышущейся завесы); (3) ::after — редкие
   звёздные точки, мерцающие асинхронно на фоне. */
@keyframes fx-aurora-ultra-flow {
  0%, 100% { box-shadow: 0 0 8px 2px #00ffa2; border-color: #00ffa2 !important; }
  33%      { box-shadow: 0 0 14px 3px #00c2ff; border-color: #00c2ff !important; }
  66%      { box-shadow: 0 0 14px 3px #b967ff; border-color: #b967ff !important; }
}
@keyframes fx-aurora-ultra-surge {
  0%, 88%, 100% { filter: brightness(1); }
  91%           { filter: brightness(1.6); }
  94%           { filter: brightness(1); }
}
@keyframes fx-aurora-ultra-curtain {
  0%, 100% { clip-path: polygon(0% 30%, 20% 45%, 40% 25%, 60% 50%, 80% 20%, 100% 40%, 100% 60%, 80% 40%, 60% 70%, 40% 45%, 20% 65%, 0% 50%); transform: rotate(0deg); }
  50%      { clip-path: polygon(0% 50%, 20% 25%, 40% 55%, 60% 20%, 80% 50%, 100% 25%, 100% 45%, 80% 65%, 60% 40%, 40% 70%, 20% 40%, 0% 65%); transform: rotate(5deg); }
}
@keyframes fx-aurora-ultra-twinkle {
  0%, 100% { opacity: .25; }
  50%      { opacity: 1; }
}
.fx-frame-theme-aurora {
  position: relative;
  animation: fx-aurora-ultra-flow 4s ease-in-out infinite, fx-aurora-ultra-surge 7s ease-in-out infinite;
}
.fx-frame-theme-aurora::before {
  content: "";
  position: absolute; inset: -9px; border-radius: 50%;
  background: conic-gradient(from 0deg, #00ffa2, #00c2ff, #b967ff, #00ffa2);
  opacity: .65;
  animation: fx-aurora-ultra-curtain 9s ease-in-out infinite;
  pointer-events: none;
}
.fx-frame-theme-aurora::after {
  content: "";
  position: absolute; inset: -11px; border-radius: 50%;
  background:
    radial-gradient(circle 1px at 20% 15%, #fff, transparent),
    radial-gradient(circle 1px at 70% 10%, #fff, transparent),
    radial-gradient(circle 1px at 45% 90%, #fff, transparent),
    radial-gradient(circle 1px at 90% 70%, #fff, transparent);
  animation: fx-aurora-ultra-twinkle 3.2s ease-in-out infinite;
  pointer-events: none;
}
.fx-nick-theme-aurora {
  --fx-text-gradient: linear-gradient(90deg, #00ffa2, #00c2ff, #b967ff, #00ffa2);
  animation: fx-rainbow-shift 5s ease-in-out infinite, fx-aurora-ultra-surge 7s ease-in-out infinite;
  text-shadow: 0 0 8px rgba(0,255,162,.4);
}

/* 🌀 Vortex — fast, high-energy psychedelic spin */
@keyframes fx-vortex-pulse {
  0%, 100% { box-shadow: 0 0 8px 2px #7000ff; }
  50%      { box-shadow: 0 0 18px 5px #ff00e5, 0 0 6px 2px #00e5ff; }
}
.fx-frame-theme-vortex {
  --fx-ring: conic-gradient(from 0deg, #ff00e5, #7000ff, #00e5ff, #ff00e5, #7000ff, #00e5ff, #ff00e5);
  --fx-ring-speed: 0.9s;
  animation: fx-vortex-pulse 1s ease-in-out infinite;
}
.fx-nick-theme-vortex {
  --fx-text-gradient: linear-gradient(90deg, #ff00e5, #7000ff, #00e5ff, #ff00e5);
  animation: fx-rainbow-shift 0.7s linear infinite;
  text-shadow: 0 0 8px #7000ff;
}

/* ============================================================
   MYTHIC TIER — 27 premium presets, each a distinct mechanism
   (not a recolor of the same pulse). Built on the shared
   .fx-frame-themed / .fx-nick-themed base (ring + gradient text),
   several add a genuine second layer via ::after (orbiting
   particles, radiating rays, falling snow, sparks) for real
   depth. transform/opacity used wherever possible for GPU-cheap
   animation at club scale.
   ============================================================ */

/* ⭐⭐⭐⭐⭐ MYTHIC ULTRA — Void
   Три независимых слоя: (1) сам обод — тяжёлое гравитационное сжатие
   с настоящим "коллапсом" в середине цикла; (2) ::before — спираль
   частиц, засасываемых внутрь и исчезающих в нуле (inflow, не
   декоративное вращение на месте); (3) ::after — тонкая, абсолютно
   непредсказуемая по времени "трещина реальности" (pulse event) —
   короткая яркая вспышка на случайном участке обода. */
@keyframes fx-void-ultra-collapse {
  0%, 38%   { transform: scale(1);   box-shadow: 0 0 7px 1px #1a0033, inset 0 0 6px 2px #000; border-color: #3d0a5c !important; }
  50%       { transform: scale(.9);  box-shadow: 0 0 3px 0 #000, inset 0 0 12px 5px #000;     border-color: #0d0018 !important; }
  62%, 100% { transform: scale(1);   box-shadow: 0 0 11px 2px #3d0a5c, inset 0 0 6px 2px #000; border-color: #3d0a5c !important; }
}
@keyframes fx-void-ultra-inflow {
  0%   { transform: rotate(0deg)   scale(1);   opacity: .9; }
  65%  { transform: rotate(230deg) scale(.5);  opacity: .5; }
  100% { transform: rotate(360deg) scale(.15); opacity: 0; }
}
@keyframes fx-void-ultra-tear {
  0%, 89%, 100% { opacity: 0; transform: rotate(15deg) scaleY(.2); }
  91%  { opacity: 1; transform: rotate(15deg) scaleY(1); }
  93%  { opacity: .2; }
  95%  { opacity: 1; transform: rotate(-40deg) scaleY(1); }
  97%  { opacity: 0; transform: rotate(-40deg) scaleY(.2); }
}
.fx-frame-theme-void {
  position: relative;
  border-color: #1a0033 !important;
  animation: fx-void-ultra-collapse 3.8s cubic-bezier(.55,0,.45,1) infinite;
}
.fx-frame-theme-void::before {
  content: "";
  position: absolute; inset: -10px; border-radius: 50%;
  background:
    radial-gradient(circle 1.5px at 50% 4%,  #b967ff, transparent),
    radial-gradient(circle 1px   at 89% 28%, #9d4edd, transparent),
    radial-gradient(circle 1.5px at 76% 88%, #7000ff, transparent),
    radial-gradient(circle 1px   at 18% 90%, #b967ff, transparent),
    radial-gradient(circle 1px   at 6% 38%,  #7000ff, transparent);
  animation: fx-void-ultra-inflow 3.8s cubic-bezier(.55,0,.45,1) infinite;
  pointer-events: none;
}
.fx-frame-theme-void::after {
  content: "";
  position: absolute; inset: -3px; border-radius: 50%;
  background: conic-gradient(from 45deg, transparent 0deg, #e0aaff 3deg, #fff 4deg, #e0aaff 5deg, transparent 7deg);
  filter: blur(.5px);
  animation: fx-void-ultra-tear 6.5s linear infinite;
  pointer-events: none;
}
.fx-nick-theme-void {
  --fx-text-gradient: linear-gradient(90deg, #3d0a5c, #1a0033, #7000ff, #1a0033, #3d0a5c);
  background-size: 300% auto;
  animation: fx-rainbow-shift 4.5s cubic-bezier(.55,0,.45,1) infinite, fx-void-ultra-text 3.8s cubic-bezier(.55,0,.45,1) infinite;
}
@keyframes fx-void-ultra-text {
  0%, 38%   { text-shadow: 0 0 4px #1a0033; }
  50%       { text-shadow: 0 0 2px #000; }
  62%, 100% { text-shadow: 0 0 11px #7000ff, 0 0 3px #b967ff; }
}

/* ⭐⭐⭐⭐⭐ Mythic — Black Hole
   Аккреционный диск: быстрое вращающееся кольцо + яркий
   пульсирующий ободок на грани "горизонта событий". */
@keyframes fx-blackhole-rim {
  0%, 100% { box-shadow: 0 0 5px 1px #000, 0 0 2px 1px #ff9d00; }
  50%      { box-shadow: 0 0 3px 0px #000, 0 0 14px 4px #ffcc00, 0 0 4px 2px #ff5500; }
}
.fx-frame-theme-blackhole {
  --fx-ring: conic-gradient(from 0deg, #000 0%, #000 60%, #ff5500 75%, #ffcc00 82%, #ff5500 90%, #000 100%);
  --fx-ring-speed: 1.1s;
  animation: fx-blackhole-rim 1.9s ease-in-out infinite;
}
.fx-nick-theme-blackhole {
  --fx-text-gradient: linear-gradient(90deg, #000, #ff5500, #ffcc00, #ff5500, #000);
  animation: fx-rainbow-shift 1.4s linear infinite;
  text-shadow: 0 0 8px #ff5500;
}

/* ⭐⭐⭐⭐⭐ MYTHIC ULTRA — Event Horizon (Black Hole)
   Три слоя: (1) сам обод — тёмное ядро с тяжёлым внутренним
   давлением (inset shadow), почти неподвижное между вспышками;
   (2) ::before — быстро вращающийся аккреционный диск
   (conic-gradient, огненно-оранжевый, отдельная скорость от всего
   остального в наборе); (3) ::after — тонкая дуга гравитационного
   линзирования, "выгибающаяся" неравномерно + редкая мощная
   вспышка-флэр на пределе горизонта (pulse event). */
@keyframes fx-horizon-core {
  0%, 85%, 100% { box-shadow: inset 0 0 8px 3px #000, 0 0 4px 1px #1a0d00; }
  90%           { box-shadow: inset 0 0 10px 4px #000, 0 0 22px 6px #ffcc00, 0 0 8px 3px #ff5500; }
  95%           { box-shadow: inset 0 0 8px 3px #000, 0 0 10px 3px #ff5500; }
}
@keyframes fx-horizon-disk {
  to { transform: rotate(360deg); }
}
@keyframes fx-horizon-lensing {
  0%   { transform: rotate(0deg);   opacity: .7; }
  33%  { transform: rotate(140deg); opacity: 1; }
  66%  { transform: rotate(210deg); opacity: .5; }
  100% { transform: rotate(360deg); opacity: .7; }
}
.fx-frame-theme-event_horizon {
  position: relative;
  border-color: #000 !important;
  animation: fx-horizon-core 4.2s ease-in-out infinite;
}
.fx-frame-theme-event_horizon::before {
  content: "";
  position: absolute; inset: -5px; border-radius: 50%;
  padding: 3px;
  background: conic-gradient(from 0deg, #1a0d00 0%, #ff5500 20%, #ffcc00 30%, #fff6d8 35%, #ffcc00 40%, #ff5500 55%, #1a0d00 75%, #1a0d00 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: fx-horizon-disk .9s linear infinite;
  pointer-events: none;
}
.fx-frame-theme-event_horizon::after {
  content: "";
  position: absolute; inset: -9px; border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: #00fff2;
  border-right-color: rgba(0,255,242,.3);
  filter: blur(.4px);
  animation: fx-horizon-lensing 3.4s ease-in-out infinite;
  pointer-events: none;
}
.fx-nick-theme-event_horizon {
  --fx-text-gradient: linear-gradient(90deg, #1a0d00, #ff5500, #ffcc00, #fff6d8, #ffcc00, #ff5500, #1a0d00);
  background-size: 300% auto;
  animation: fx-rainbow-shift 1.4s linear infinite, fx-horizon-text 4.2s ease-in-out infinite;
}
@keyframes fx-horizon-text {
  0%, 85%, 100% { text-shadow: 0 0 4px #1a0d00; }
  90%           { text-shadow: 0 0 16px #ffcc00, 0 0 6px #ff5500; }
  95%           { text-shadow: 0 0 8px #ff5500; }
}

/* ⭐⭐⭐⭐⭐ Mythic — Nebula
   Мягкие дрейфующие облака цвета через смещение нескольких
   radial-gradient пятен независимо друг от друга. */
@keyframes fx-nebula-drift {
  0%, 100% { background-position: 0% 50%, 100% 50%; }
  50%      { background-position: 100% 50%, 0% 50%; }
}
.fx-frame-theme-nebula {
  --fx-ring: conic-gradient(from 0deg, #ff6ec7, #6a5acd, #20b2aa, #ff6ec7);
  --fx-ring-speed: 7s;
  animation: fx-nebula-glow 3.5s ease-in-out infinite;
}
@keyframes fx-nebula-glow {
  0%, 100% { box-shadow: 0 0 10px 2px #6a5acd; }
  50%      { box-shadow: 0 0 16px 4px #ff6ec7, 0 0 6px 2px #20b2aa; }
}
.fx-nick-theme-nebula {
  background-image: radial-gradient(circle at 0% 50%, #ff6ec7, transparent 60%),
                     radial-gradient(circle at 100% 50%, #20b2aa, transparent 60%),
                     linear-gradient(90deg, #6a5acd, #ff6ec7, #20b2aa, #6a5acd);
  background-size: 200% 200%, 200% 200%, 300% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: fx-nebula-drift 5s ease-in-out infinite, fx-rainbow-shift 6s linear infinite;
}

/* ⭐⭐⭐⭐⭐ Mythic — Celestial
   Золотое гало + орбитальные звёздные точки, вращающиеся
   отдельным слоем от самого кольца (параллакс). */
@keyframes fx-celestial-halo {
  0%, 100% { box-shadow: 0 0 8px 2px #fff4cc; }
  50%      { box-shadow: 0 0 18px 5px #ffe680, 0 0 6px 2px #ffffff; }
}
@keyframes fx-celestial-orbit {
  to { transform: rotate(360deg); }
}
.fx-frame-theme-celestial {
  --fx-ring: conic-gradient(from 0deg, #ffe680, #fff4cc, #ffffff, #ffe680);
  --fx-ring-speed: 4s;
  animation: fx-celestial-halo 2.8s ease-in-out infinite;
}
.fx-frame-theme-celestial::after {
  content: "";
  position: absolute; inset: -11px; border-radius: 50%;
  background:
    radial-gradient(circle 1.5px at 50% 4%, #fff, transparent),
    radial-gradient(circle 1px at 90% 40%, #fff, transparent),
    radial-gradient(circle 1.5px at 15% 75%, #ffe680, transparent),
    radial-gradient(circle 1px at 65% 95%, #fff, transparent);
  animation: fx-celestial-orbit 6s linear infinite;
  pointer-events: none;
}
.fx-nick-theme-celestial {
  --fx-text-gradient: linear-gradient(90deg, #ffe680, #fff4cc, #ffffff, #ffe680);
  animation: fx-rainbow-shift 3s ease-in-out infinite;
  text-shadow: 0 0 8px rgba(255,230,128,.6);
}

/* ⭐⭐⭐⭐⭐ MYTHIC ULTRA — Cosmos
   Три слоя: (1) сам обод — глубокий космос, тихий дрейф + редкая
   "сверхновая" (яркая вспышка, pulse event, наложена ВТОРОЙ
   анимацией поверх первой); (2) ::before — звёздное поле с
   неравномерным, "живым" мерцанием (micro variation, не синхронный
   пульс всех точек разом); (3) ::after — две кометы, пролетающие
   по кольцу в разные моменты цикла (energy motion). */
@keyframes fx-cosmos-ultra-drift {
  0%, 100% { box-shadow: 0 0 6px 1px #1b0b3d; }
  50%      { box-shadow: 0 0 13px 3px #3d1a6e; }
}
@keyframes fx-cosmos-ultra-supernova {
  0%, 94%, 100% { filter: brightness(1); }
  96%           { filter: brightness(1.8); }
}
@keyframes fx-cosmos-ultra-twinkle {
  0%, 100% { opacity: .4; }
  20%      { opacity: 1; }
  45%      { opacity: .3; }
  70%      { opacity: .9; }
  90%      { opacity: .5; }
}
@keyframes fx-cosmos-ultra-comets {
  0%, 40%, 100% { opacity: 0; transform: rotate(0deg); }
  42%  { opacity: 1; }
  50%  { opacity: 1; transform: rotate(160deg); }
  52%  { opacity: 0; }
  80%, 82% { opacity: 1; transform: rotate(320deg); }
  90%  { opacity: 1; transform: rotate(400deg); }
  92%  { opacity: 0; }
}
.fx-frame-theme-cosmos {
  position: relative;
  animation: fx-cosmos-ultra-drift 4s ease-in-out infinite, fx-cosmos-ultra-supernova 9s ease-in-out infinite;
}
.fx-frame-theme-cosmos::before {
  content: "";
  position: absolute; inset: -9px; border-radius: 50%;
  background:
    radial-gradient(circle 1px at 15% 20%, #fff, transparent),
    radial-gradient(circle 1px at 55% 8%,  #fff, transparent),
    radial-gradient(circle 1px at 85% 30%, #fff, transparent),
    radial-gradient(circle 1px at 30% 80%, #fff, transparent),
    radial-gradient(circle 1px at 70% 88%, #fff, transparent);
  animation: fx-cosmos-ultra-twinkle 3.5s ease-in-out infinite;
  pointer-events: none;
}
.fx-frame-theme-cosmos::after {
  content: "";
  position: absolute; inset: -10px; border-radius: 50%;
  background: radial-gradient(circle 2px at 92% 8%, #fff, rgba(255,255,255,.5) 3px, transparent 5px);
  animation: fx-cosmos-ultra-comets 7s linear infinite;
  pointer-events: none;
}
.fx-nick-theme-cosmos {
  --fx-text-gradient: linear-gradient(90deg, #1b0b3d, #3d1a6e, #05010f, #3d1a6e);
  background-size: 300% auto;
  animation: fx-rainbow-shift 5s ease-in-out infinite, fx-cosmos-ultra-supernova-text 9s ease-in-out infinite;
  text-shadow: 0 0 6px #3d1a6e;
}
@keyframes fx-cosmos-ultra-supernova-text {
  0%, 94%, 100% { text-shadow: 0 0 6px #3d1a6e; }
  96%           { text-shadow: 0 0 18px #fff, 0 0 8px #b967ff; }
}

/* ⭐⭐⭐⭐⭐ Mythic — Comet
   Яркая голова + затухающий хвост, непрерывно облетающие кольцо
   (в отличие от Cosmos — постоянное движение, не редкий пролёт). */
.fx-frame-theme-comet {
  --fx-ring: conic-gradient(from 0deg, transparent 0%, transparent 70%, #7dd8ff 85%, #ffffff 92%, #7dd8ff 96%, transparent 100%);
  --fx-ring-speed: 1.6s;
  animation: fx-comet-glow 1.6s linear infinite;
}
@keyframes fx-comet-glow {
  0%, 100% { box-shadow: 0 0 4px 1px #1a3a4a; }
  50%      { box-shadow: 0 0 10px 2px #7dd8ff; }
}
.fx-nick-theme-comet {
  --fx-text-gradient: linear-gradient(90deg, #1a3a4a, #7dd8ff, #ffffff, #1a3a4a);
  animation: fx-rainbow-shift 1.4s linear infinite;
  text-shadow: 0 0 6px #7dd8ff;
}

/* ⭐⭐⭐⭐⭐ MYTHIC ULTRA — Meteor Shower
   Три слоя: (1) сам обод — тёмное ночное небо, почти неподвижное
   между событиями; (2) ::before — ДВА независимых метеора,
   прочерчивающих след по разным траекториям и с разной скоростью
   (clip-path полоса + translate, не одна вспышка на месте); (3)
   ::after — вспышка удара (impact flash) в момент "приземления",
   и отдельно — редкий "звёздный дождь", где вспышки идут кластером. */
@keyframes fx-meteor-trail-a {
  0%   { transform: translate(-30px, -30px) rotate(45deg); opacity: 0; }
  8%   { opacity: 1; }
  22%  { transform: translate(30px, 30px) rotate(45deg); opacity: 0; }
  100% { transform: translate(30px, 30px) rotate(45deg); opacity: 0; }
}
@keyframes fx-meteor-trail-b {
  0%, 40%  { transform: translate(28px, -32px) rotate(-40deg); opacity: 0; }
  48%      { opacity: 1; }
  62%      { transform: translate(-28px, 30px) rotate(-40deg); opacity: 0; }
  100%     { transform: translate(-28px, 30px) rotate(-40deg); opacity: 0; }
}
@keyframes fx-meteor-impact {
  0%, 20%, 100% { opacity: 0; transform: scale(.3); box-shadow: none; }
  22%  { opacity: 1; transform: scale(1); box-shadow: 0 0 18px 6px #ff9d00, 0 0 6px 3px #fff; }
  30%  { opacity: 0; transform: scale(1.4); }
  60%, 62% { opacity: 1; transform: scale(1); box-shadow: 0 0 22px 7px #ffcc00, 0 0 8px 3px #fff; }
  70%  { opacity: 0; transform: scale(1.4); }
}
.fx-frame-theme-meteor {
  position: relative;
  border-color: #2b1400 !important;
  animation: fx-meteor-ambient 5s ease-in-out infinite;
}
@keyframes fx-meteor-ambient {
  0%, 100% { box-shadow: 0 0 4px 1px #2b1400; }
  50%      { box-shadow: 0 0 7px 1px #4a2600; }
}
.fx-frame-theme-meteor::before {
  content: "";
  position: absolute; inset: -14px; border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 46%, #fff 49%, #ff9d00 50%, transparent 53%) no-repeat,
    linear-gradient(-40deg, transparent 46%, #fff 49%, #ffcc00 50%, transparent 53%) no-repeat;
  background-size: 60% 3px, 55% 3px;
  background-position: 20% 20%, 75% 25%;
  animation: fx-meteor-trail-a 2.6s ease-in infinite, fx-meteor-trail-b 2.6s ease-in infinite;
  pointer-events: none;
}
.fx-frame-theme-meteor::after {
  content: "";
  position: absolute; inset: 30%; border-radius: 50%;
  animation: fx-meteor-impact 2.6s ease-in infinite;
  pointer-events: none;
}
.fx-nick-theme-meteor {
  --fx-text-gradient: linear-gradient(90deg, #2b1400, #4a2600, #ff9d00, #4a2600, #2b1400);
  background-size: 300% auto;
  animation: fx-rainbow-shift 3s linear infinite, fx-meteor-text 2.6s ease-in infinite;
}
@keyframes fx-meteor-text {
  0%, 20%, 100% { text-shadow: 0 0 3px #2b1400; }
  22%  { text-shadow: 0 0 16px #ff9d00, 0 0 4px #fff; }
  30%  { text-shadow: 0 0 3px #2b1400; }
  60%, 62% { text-shadow: 0 0 18px #ffcc00, 0 0 5px #fff; }
  70%  { text-shadow: 0 0 3px #2b1400; }
}

/* ⭐⭐⭐⭐⭐ Mythic — Inferno
   Более агрессивный, многослойный огонь: быстрый неровный
   flicker кольца + отдельный слой поднимающихся угольков. */
@keyframes fx-inferno-flicker {
  0%   { box-shadow: 0 0 8px 2px #8b0000; }
  15%  { box-shadow: 0 0 18px 5px #ff2200; }
  30%  { box-shadow: 0 0 6px 1px #8b0000; }
  45%  { box-shadow: 0 0 22px 6px #ffaa00; }
  60%  { box-shadow: 0 0 9px 2px #ff2200; }
  75%  { box-shadow: 0 0 16px 4px #8b0000; }
  90%  { box-shadow: 0 0 20px 5px #ffaa00; }
  100% { box-shadow: 0 0 8px 2px #8b0000; }
}
@keyframes fx-ember-rise {
  0%   { transform: translateY(0) scale(1); opacity: .9; }
  100% { transform: translateY(-14px) scale(.3); opacity: 0; }
}
.fx-frame-theme-inferno {
  --fx-ring: conic-gradient(from 0deg, #8b0000, #ff2200, #ffaa00, #ff2200, #8b0000);
  --fx-ring-speed: 1s;
  animation: fx-inferno-flicker .9s ease-in-out infinite;
}
.fx-frame-theme-inferno::after {
  content: "";
  position: absolute; inset: -6px; border-radius: 50%;
  background:
    radial-gradient(circle 1.5px at 20% 90%, #ffaa00, transparent),
    radial-gradient(circle 1px at 55% 95%, #ff2200, transparent),
    radial-gradient(circle 1.5px at 80% 88%, #ffaa00, transparent);
  animation: fx-ember-rise 1.4s ease-out infinite;
  pointer-events: none;
}
.fx-nick-theme-inferno {
  --fx-text-gradient: linear-gradient(90deg, #8b0000, #ff2200, #ffaa00, #ff2200, #8b0000);
  animation: fx-rainbow-shift .9s linear infinite, fx-fire-text-glow .9s ease-in-out infinite;
}

/* ⭐⭐⭐⭐⭐ MYTHIC ULTRA — Phoenix (эволюция Inferno)
   Три слоя: (1) сам обод — тёплое золотое "дыхание жизни", ровное
   и живое; (2) ::before — крыло из поднимающихся угольков (5 точек
   вместо 2, разный размер/задержка/дальность полёта — плотный рой,
   а не пара частиц); (3) ::after — редкая мощная вспышка
   "возрождения": элемент на миг гаснет почти до нуля и тут же
   взрывается ослепительным бело-золотым светом (pulse event). */
@keyframes fx-phoenix-lifebreath {
  0%, 100% { box-shadow: 0 0 8px 2px #ff6a00; border-color: #ff6a00 !important; }
  50%      { box-shadow: 0 0 20px 5px #ffd700, 0 0 6px 2px #ff2200; border-color: #ffd700 !important; }
}
@keyframes fx-phoenix-embers {
  0%   { transform: translateY(6px) scale(.5) rotate(0deg);   opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateY(-26px) scale(1.15) rotate(20deg); opacity: 0; }
}
@keyframes fx-phoenix-rebirth {
  0%, 78%, 100% { opacity: 0; transform: scale(.4); }
  80%  { opacity: .2; transform: scale(.2); }
  84%  { opacity: 1; transform: scale(1.5); box-shadow: 0 0 30px 10px #fff6d8, 0 0 14px 5px #ffd700; }
  92%  { opacity: 0; transform: scale(2.2); }
}
.fx-frame-theme-phoenix {
  position: relative;
  animation: fx-phoenix-lifebreath 2.2s ease-in-out infinite;
}
.fx-frame-theme-phoenix::before {
  content: "";
  position: absolute; inset: -8px; border-radius: 50%;
  background:
    radial-gradient(circle 1.5px at 22% 94%, #ffd700, transparent),
    radial-gradient(circle 1px   at 40% 90%, #ff6a00, transparent),
    radial-gradient(circle 1.5px at 58% 95%, #fff6d8, transparent),
    radial-gradient(circle 1px   at 72% 88%, #ff2200, transparent),
    radial-gradient(circle 1.5px at 85% 93%, #ffd700, transparent);
  animation: fx-phoenix-embers 1.8s ease-out infinite;
  pointer-events: none;
}
.fx-frame-theme-phoenix::after {
  content: "";
  position: absolute; inset: -6px; border-radius: 50%;
  background: radial-gradient(circle, #fff6d8 0%, #ffd700 35%, transparent 70%);
  animation: fx-phoenix-rebirth 6s ease-in-out infinite;
  pointer-events: none;
}
.fx-nick-theme-phoenix {
  --fx-text-gradient: linear-gradient(90deg, #ff2200, #ff6a00, #ffd700, #ff6a00, #ff2200);
  background-size: 300% auto;
  animation: fx-rainbow-shift 2s linear infinite, fx-phoenix-text-rebirth 6s ease-in-out infinite;
}
@keyframes fx-phoenix-text-rebirth {
  0%, 78%, 100% { text-shadow: 0 0 8px #ffd700; }
  84%  { text-shadow: 0 0 20px #fff6d8, 0 0 8px #ffd700; }
}

/* ⭐⭐⭐⭐⭐ MYTHIC ULTRA — Dragon Soul
   Три слоя, вращающиеся НЕЗАВИСИМО (counter-rotation): (1) сам
   обод — тяжёлое, медленное дыхание древнего зверя; (2) ::before —
   чешуйчатый узор (repeating-conic-gradient), вращается ПО часовой;
   (3) ::after — душа-энергия дракона, вращается ПРОТИВ часовой на
   другой скорости — при наложении даёт живое, "дышащее" ощущение
   двух independent систем, а не одного вращения. Редкий "рык" —
   резкий вспышка-импульс с лёгким "ударом" по масштабу. */
@keyframes fx-dragon-breathe {
  0%, 82%, 100% { box-shadow: 0 0 6px 1px #0b3d0b; transform: scale(1); }
  50%           { box-shadow: 0 0 16px 4px #1a6e1a, 0 0 4px 2px #ffd700; transform: scale(1.015); }
  86%           { box-shadow: 0 0 26px 8px #ffd700, 0 0 10px 4px #ff6a00; transform: scale(1.06); }
  90%           { box-shadow: 0 0 10px 2px #1a6e1a; transform: scale(1); }
}
@keyframes fx-dragon-scales-spin {
  to { transform: rotate(360deg); }
}
@keyframes fx-dragon-soul-spin {
  to { transform: rotate(-360deg); }
}
.fx-frame-theme-dragon {
  position: relative;
  border-color: #0b3d0b !important;
  animation: fx-dragon-breathe 5.5s ease-in-out infinite;
}
.fx-frame-theme-dragon::before {
  content: "";
  position: absolute; inset: -6px; border-radius: 50%;
  padding: 3px;
  background: repeating-conic-gradient(from 0deg, #0b3d0b 0deg 8deg, #1a6e1a 8deg 14deg, #ffd700 14deg 16deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: fx-dragon-scales-spin 14s linear infinite;
  pointer-events: none;
}
.fx-frame-theme-dragon::after {
  content: "";
  position: absolute; inset: -11px; border-radius: 50%;
  padding: 2px;
  background: conic-gradient(from 90deg, transparent, #39ff6a 15%, transparent 30%, transparent 60%, #ffd700 75%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: blur(.5px);
  animation: fx-dragon-soul-spin 8s linear infinite;
  pointer-events: none;
}
.fx-nick-theme-dragon {
  --fx-text-gradient: linear-gradient(90deg, #0b3d0b, #1a6e1a, #ffd700, #1a6e1a, #0b3d0b);
  background-size: 300% auto;
  animation: fx-rainbow-shift 4s ease-in-out infinite, fx-dragon-roar-text 5.5s ease-in-out infinite;
}
@keyframes fx-dragon-roar-text {
  0%, 82%, 100% { text-shadow: 0 0 6px #1a6e1a; }
  86%           { text-shadow: 0 0 18px #ffd700, 0 0 6px #ff6a00; }
  90%           { text-shadow: 0 0 8px #1a6e1a; }
}

/* ⭐⭐⭐⭐⭐ Mythic — Frozen
   Грани льда через резкую вспышку (имитация преломления света в
   кристалле), холоднее и жёстче, чем спокойный Ice. */
@keyframes fx-frozen-facet {
  0%, 100% { box-shadow: 0 0 5px 1px #a8e0ff; }
  10%      { box-shadow: 0 0 20px 5px #ffffff, 0 0 6px 2px #a8e0ff; }
  20%      { box-shadow: 0 0 5px 1px #a8e0ff; }
}
.fx-frame-theme-frozen {
  --fx-ring: conic-gradient(from 0deg, #a8e0ff, #ffffff, #6ec6ff, #a8e0ff, #ffffff, #a8e0ff);
  --fx-ring-speed: 3s;
  animation: fx-frozen-facet 2.6s ease-in-out infinite;
}
.fx-nick-theme-frozen {
  --fx-text-gradient: linear-gradient(90deg, #a8e0ff, #ffffff, #6ec6ff, #a8e0ff);
  animation: fx-rainbow-shift 2s linear infinite, fx-frozen-text 2.6s ease-in-out infinite;
}
@keyframes fx-frozen-text {
  0%, 100% { text-shadow: 0 0 3px #6ec6ff; }
  10%      { text-shadow: 0 0 12px #ffffff; }
}

/* ⭐⭐⭐⭐⭐ Mythic — Blizzard
   Лёд + отдельный слой падающего снега (частицы дрейфуют вниз
   и в стороны, зацикленно). */
@keyframes fx-blizzard-snow {
  0%   { transform: translate(0, -6px); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(-4px, 14px); opacity: 0; }
}
.fx-frame-theme-blizzard {
  --fx-ring: conic-gradient(from 0deg, #dff6ff, #6ec6ff, #ffffff, #dff6ff);
  --fx-ring-speed: 5s;
  animation: fx-ice-glint 2.6s ease-in-out infinite;
}
.fx-frame-theme-blizzard::after {
  content: "";
  position: absolute; inset: -8px; border-radius: 50%;
  background:
    radial-gradient(circle 1.5px at 25% 10%, #fff, transparent),
    radial-gradient(circle 1px at 60% 5%, #fff, transparent),
    radial-gradient(circle 1.5px at 85% 15%, #fff, transparent);
  animation: fx-blizzard-snow 2s linear infinite;
  pointer-events: none;
}
.fx-nick-theme-blizzard {
  --fx-text-gradient: linear-gradient(90deg, #dff6ff, #6ec6ff, #ffffff, #dff6ff);
  animation: fx-rainbow-shift 3s ease-in-out infinite;
  text-shadow: 0 0 6px rgba(110,198,255,.7);
}

/* ⭐⭐⭐⭐⭐ Mythic — Storm
   Тёмные тучи + случайные вспышки молний (нерегулярный, рваный
   timing — имитация настоящей грозы, а не метронома). */
@keyframes fx-storm-lightning {
  0%, 78%, 82%, 100% { box-shadow: 0 0 6px 1px #2b2b3d; }
  79%  { box-shadow: 0 0 24px 6px #e8e8ff, 0 0 8px 3px #9d9dff; }
  80%  { box-shadow: 0 0 6px 1px #2b2b3d; }
  81%  { box-shadow: 0 0 18px 4px #e8e8ff; }
}
.fx-frame-theme-storm {
  --fx-ring: conic-gradient(from 0deg, #1a1a2b, #2b2b3d, #4d4d6e, #1a1a2b);
  --fx-ring-speed: 4s;
  animation: fx-storm-lightning 3.6s linear infinite;
}
.fx-nick-theme-storm {
  --fx-text-gradient: linear-gradient(90deg, #1a1a2b, #4d4d6e, #9d9dff, #1a1a2b);
  animation: fx-rainbow-shift 4s ease-in-out infinite, fx-storm-text 3.6s linear infinite;
}
@keyframes fx-storm-text {
  0%, 78%, 82%, 100% { text-shadow: 0 0 3px #2b2b3d; }
  79%  { text-shadow: 0 0 14px #e8e8ff; }
}

/* ⭐⭐⭐⭐⭐ MYTHIC ULTRA — Thunder God
   Три слоя: (1) сам обод — тёмное грозовое небо + редкий мощный
   "удар молнии" на весь элемент (pulse event); (2) ::before —
   собственное быстро вращающееся электрическое кольцо (energy
   motion, независимое от общего механизма); (3) ::after — два
   РАЗНЫХ зигзаг-разряда (clip-path меняет форму между появлениями,
   не один и тот же контур) в разные моменты цикла. */
@keyframes fx-thunder-crackle {
  0%, 76%, 100% { box-shadow: 0 0 6px 1px #1a0033; border-color: #1a0033 !important; }
  78%  { box-shadow: 0 0 4px 0 #000;                border-color: #00e5ff !important; }
  80%  { box-shadow: 0 0 20px 5px #00e5ff;          border-color: #00e5ff !important; }
  82%  { box-shadow: 0 0 6px 1px #1a0033;           border-color: #1a0033 !important; }
  96%  { box-shadow: 0 0 28px 8px #ffffff, 0 0 10px 4px #00e5ff; border-color: #ffffff !important; }
  98%  { box-shadow: 0 0 6px 1px #1a0033;           border-color: #1a0033 !important; }
}
@keyframes fx-thunder-ring-spin {
  to { transform: rotate(360deg); }
}
@keyframes fx-thunder-bolt {
  0%, 76%, 100% { opacity: 0; clip-path: polygon(48% 0%, 58% 32%, 50% 38%, 64% 70%, 54% 74%, 62% 100%, 40% 55%, 50% 50%, 38% 30%, 46% 28%); }
  78%  { opacity: 1; }
  80%  { opacity: .3; }
  82%, 93% { opacity: 0; }
  96%  { opacity: 1; clip-path: polygon(40% 0%, 52% 28%, 44% 32%, 60% 60%, 48% 64%, 58% 100%, 32% 50%, 42% 46%, 30% 26%, 38% 24%); }
  97%  { opacity: .2; }
  98%  { opacity: 1; }
  99%, 100% { opacity: 0; }
}
.fx-frame-theme-thunder_god {
  position: relative;
  border-color: #1a0033 !important;
  animation: fx-thunder-crackle 4.5s steps(1) infinite;
}
.fx-frame-theme-thunder_god::before {
  content: "";
  position: absolute; inset: -6px; border-radius: 50%;
  padding: 3px;
  background: conic-gradient(from 0deg, #1a0033, #00e5ff, #1a0033, #00e5ff, #1a0033);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: fx-thunder-ring-spin 1.2s linear infinite;
  pointer-events: none;
}
.fx-frame-theme-thunder_god::after {
  content: "";
  position: absolute; inset: -11px;
  background: linear-gradient(180deg, #ffffff, #00e5ff);
  animation: fx-thunder-bolt 4.5s steps(1) infinite;
  pointer-events: none;
}
.fx-nick-theme-thunder_god {
  --fx-text-gradient: linear-gradient(90deg, #1a0033, #00e5ff, #ffffff, #00e5ff, #1a0033);
  background-size: 300% auto;
  animation: fx-rainbow-shift 1s linear infinite, fx-thunder-text-crackle 4.5s steps(1) infinite;
}
@keyframes fx-thunder-text-crackle {
  0%, 76%, 100% { text-shadow: 0 0 8px #00e5ff; }
  78%  { text-shadow: 0 0 2px #000; }
  80%  { text-shadow: 0 0 18px #00e5ff; }
  96%  { text-shadow: 0 0 22px #ffffff, 0 0 8px #00e5ff; }
}

/* ⭐⭐⭐⭐⭐ Mythic — Ocean
   Плавное, тягучее перетекание волн — самый "медленный и мягкий"
   ритм в наборе, намеренный контраст с Storm/Thunder God. */
.fx-frame-theme-oceanic {
  --fx-ring: conic-gradient(from 0deg, #003b5c, #0088aa, #66d9e8, #0088aa, #003b5c);
  --fx-ring-speed: 6s;
  animation: fx-ocean-swell 5s ease-in-out infinite;
}
@keyframes fx-ocean-swell {
  0%, 100% { box-shadow: 0 0 6px 1px #003b5c; }
  50%      { box-shadow: 0 0 14px 3px #66d9e8; }
}
.fx-nick-theme-oceanic {
  --fx-text-gradient: linear-gradient(90deg, #003b5c, #0088aa, #66d9e8, #0088aa, #003b5c);
  animation: fx-rainbow-shift 5s ease-in-out infinite;
  text-shadow: 0 0 6px rgba(102,217,232,.5);
}

/* ⭐⭐⭐⭐⭐ Mythic — Tidal
   Расходящиеся кольца-волны (box-shadow "выстреливает" наружу
   и гаснет), а не просто свечение на месте. */
@keyframes fx-tidal-ripple {
  0%   { box-shadow: 0 0 0 0 rgba(102,217,232,.6); }
  70%  { box-shadow: 0 0 0 10px rgba(102,217,232,0); }
  100% { box-shadow: 0 0 0 0 rgba(102,217,232,0); }
}
.fx-frame-theme-tidal {
  --fx-ring: conic-gradient(from 0deg, #003b5c, #0088aa, #66d9e8, #003b5c);
  --fx-ring-speed: 5s;
  animation: fx-tidal-ripple 2s ease-out infinite;
}
.fx-nick-theme-tidal {
  --fx-text-gradient: linear-gradient(90deg, #003b5c, #66d9e8, #0088aa, #003b5c);
  animation: fx-rainbow-shift 3s ease-in-out infinite;
  text-shadow: 0 0 6px #66d9e8;
}

/* ⭐⭐⭐⭐⭐ Mythic — Royal Gold
   Жидкое золото: узкая яркая полоса "сплава", медленно
   стекающая по кругу — металлический блеск, не свечение. */
.fx-frame-theme-royalgold {
  --fx-ring: conic-gradient(from 0deg, #7a5c1e, #c7a552, #fff6d8, #c7a552, #7a5c1e, #c7a552, #7a5c1e);
  --fx-ring-speed: 3.5s;
  animation: fx-royalgold-shine 3s ease-in-out infinite;
}
@keyframes fx-royalgold-shine {
  0%, 100% { box-shadow: 0 0 6px 1px #7a5c1e; }
  50%      { box-shadow: 0 0 16px 4px #fff6d8, 0 0 4px 2px #c7a552; }
}
.fx-nick-theme-royalgold {
  --fx-text-gradient: linear-gradient(90deg, #7a5c1e, #c7a552, #fff6d8, #c7a552, #7a5c1e);
  animation: fx-rainbow-shift 2.5s linear infinite;
  text-shadow: 0 0 8px rgba(199,165,82,.7);
}

/* ⭐⭐⭐⭐⭐ Mythic — Prismatic
   Спектральное разложение света: быстрый узкий градиент,
   имитирующий призму — чище и "стеклянней" радуги. */
.fx-frame-theme-prismatic {
  --fx-ring: conic-gradient(from 0deg, #ff0000, #ff9d00, #fff700, #00ff6a, #00d9ff, #6a00ff, #ff00d9, #ff0000);
  --fx-ring-speed: 2s;
  animation: fx-prismatic-flash 1.5s ease-in-out infinite;
}
@keyframes fx-prismatic-flash {
  0%, 100% { box-shadow: 0 0 6px 1px #ffffff; filter: saturate(1); }
  50%      { box-shadow: 0 0 16px 4px #ffffff; filter: saturate(1.6); }
}
.fx-nick-theme-prismatic {
  --fx-text-gradient: linear-gradient(90deg, #ff0000, #ff9d00, #fff700, #00ff6a, #00d9ff, #6a00ff, #ff00d9, #ff0000);
  animation: fx-rainbow-shift 1.2s linear infinite;
  text-shadow: 0 0 6px #ffffff;
  filter: saturate(1.4);
}

/* ⭐⭐⭐⭐⭐ Mythic — Crystal
   Фиолетово-ледяная грань с резким "клик"-бликом через
   ease-in-out с длинной паузой — ощущение твёрдого кристалла. */
@keyframes fx-crystal-flash {
  0%, 80%, 100% { box-shadow: 0 0 5px 1px #6a4dff; }
  85%  { box-shadow: 0 0 18px 5px #ffffff, 0 0 6px 2px #a68bff; }
  90%  { box-shadow: 0 0 5px 1px #6a4dff; }
}
.fx-frame-theme-crystal {
  --fx-ring: conic-gradient(from 0deg, #6a4dff, #a68bff, #ffffff, #6a4dff, #a68bff);
  --fx-ring-speed: 3s;
  animation: fx-crystal-flash 3.4s ease-in-out infinite;
}
.fx-nick-theme-crystal {
  --fx-text-gradient: linear-gradient(90deg, #6a4dff, #a68bff, #ffffff, #6a4dff);
  animation: fx-rainbow-shift 2.5s linear infinite, fx-crystal-text 3.4s ease-in-out infinite;
}
@keyframes fx-crystal-text {
  0%, 80%, 100% { text-shadow: 0 0 3px #6a4dff; }
  85%  { text-shadow: 0 0 12px #ffffff; }
}

/* ⭐⭐⭐⭐⭐ Mythic — Emerald
   Глубокий изумруд с медленным внутренним пульсом — насыщенный,
   "тяжёлый" камень, не яркий неон. */
@keyframes fx-emerald-pulse {
  0%, 100% { box-shadow: 0 0 6px 1px #024d1f; }
  50%      { box-shadow: 0 0 16px 4px #00c853, 0 0 4px 2px #69ffb0; }
}
.fx-frame-theme-emerald {
  --fx-ring: conic-gradient(from 0deg, #024d1f, #00c853, #69ffb0, #00c853, #024d1f);
  --fx-ring-speed: 4s;
  animation: fx-emerald-pulse 3s ease-in-out infinite;
}
.fx-nick-theme-emerald {
  --fx-text-gradient: linear-gradient(90deg, #024d1f, #00c853, #69ffb0, #024d1f);
  animation: fx-rainbow-shift 3.5s ease-in-out infinite;
  text-shadow: 0 0 8px rgba(0,200,83,.6);
}

/* ⭐⭐⭐⭐⭐ Mythic — Liquid Metal
   Узкая яркая полоса хрома, быстро скользящая по кругу — почти
   монохромный, металлический, а не цветной эффект. */
.fx-frame-theme-liquidmetal {
  --fx-ring: conic-gradient(from 0deg, #2b2b2b, #9e9e9e, #ffffff, #9e9e9e, #2b2b2b, #9e9e9e, #2b2b2b);
  --fx-ring-speed: 1.8s;
  animation: fx-liquidmetal-sheen 2.2s ease-in-out infinite;
}
@keyframes fx-liquidmetal-sheen {
  0%, 100% { box-shadow: 0 0 5px 1px #2b2b2b; filter: brightness(1); }
  50%      { box-shadow: 0 0 14px 3px #ffffff; filter: brightness(1.3); }
}
.fx-nick-theme-liquidmetal {
  --fx-text-gradient: linear-gradient(90deg, #2b2b2b, #9e9e9e, #ffffff, #9e9e9e, #2b2b2b);
  animation: fx-rainbow-shift 1.6s linear infinite;
  text-shadow: 0 0 6px rgba(255,255,255,.5);
}

/* ⭐⭐⭐⭐⭐ MYTHIC ULTRA — Arcane Rune Circle
   Три слоя, вращающиеся В РАЗНЫЕ стороны (counter-rotation —
   настоящий магический круг, а не одно вращающееся кольцо): (1) сам
   обод — ровное мистическое свечение + редкая яркая вспышка
   "произнесённого заклинания" (pulse event); (2) ::before —
   рунная насечка (repeating-conic-gradient), вращается ПО часовой;
   (3) ::after — внешние точки-сигилы, вращаются ПРОТИВ часовой,
   на другой скорости. */
@keyframes fx-arcane-pulse {
  0%, 85%, 100% { box-shadow: 0 0 6px 2px #4b0082; border-color: #4b0082 !important; }
  90%           { box-shadow: 0 0 26px 8px #e0aaff, 0 0 10px 4px #9d4edd; border-color: #e0aaff !important; }
  95%           { box-shadow: 0 0 10px 3px #9d4edd; border-color: #9d4edd !important; }
}
@keyframes fx-arcane-runes-spin {
  to { transform: rotate(360deg); }
}
@keyframes fx-arcane-sigils-spin {
  to { transform: rotate(-360deg); }
}
.fx-frame-theme-arcane {
  position: relative;
  border-color: #4b0082 !important;
  animation: fx-arcane-pulse 4.5s ease-in-out infinite;
}
.fx-frame-theme-arcane::before {
  content: "";
  position: absolute; inset: -6px; border-radius: 50%;
  padding: 3px;
  background: repeating-conic-gradient(from 0deg, #4b0082 0deg 10deg, #9d4edd 10deg 16deg, #e0aaff 16deg 18deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: fx-arcane-runes-spin 9s linear infinite;
  pointer-events: none;
}
.fx-frame-theme-arcane::after {
  content: "";
  position: absolute; inset: -12px; border-radius: 50%;
  background:
    radial-gradient(circle 1.5px at 50% 2%,  #e0aaff, transparent),
    radial-gradient(circle 1.5px at 98% 50%, #9d4edd, transparent),
    radial-gradient(circle 1.5px at 50% 98%, #e0aaff, transparent),
    radial-gradient(circle 1.5px at 2% 50%,  #9d4edd, transparent),
    radial-gradient(circle 1px   at 85% 15%, #fff, transparent),
    radial-gradient(circle 1px   at 15% 85%, #fff, transparent);
  animation: fx-arcane-sigils-spin 6s linear infinite;
  pointer-events: none;
}
.fx-nick-theme-arcane {
  --fx-text-gradient: linear-gradient(90deg, #4b0082, #9d4edd, #e0aaff, #4b0082);
  background-size: 300% auto;
  animation: fx-rainbow-shift 3s ease-in-out infinite, fx-arcane-cast-text 4.5s ease-in-out infinite;
}
@keyframes fx-arcane-cast-text {
  0%, 85%, 100% { text-shadow: 0 0 8px #9d4edd; }
  90%           { text-shadow: 0 0 20px #e0aaff, 0 0 8px #9d4edd; }
  95%           { text-shadow: 0 0 10px #9d4edd; }
}

/* ⭐⭐⭐⭐⭐ Mythic — Runic
   Сегментированное кольцо (repeating-conic-gradient — "рунная"
   насечка) с медленным вращением и холодным синим свечением. */
.fx-frame-theme-runic {
  --fx-ring: repeating-conic-gradient(from 0deg, #0d1b4d 0deg 12deg, #3355ff 12deg 20deg, #9db4ff 20deg 22deg);
  --fx-ring-speed: 12s;
  animation: fx-runic-glow 3s ease-in-out infinite;
}
@keyframes fx-runic-glow {
  0%, 100% { box-shadow: 0 0 6px 1px #0d1b4d; }
  50%      { box-shadow: 0 0 14px 3px #3355ff; }
}
.fx-nick-theme-runic {
  --fx-text-gradient: linear-gradient(90deg, #0d1b4d, #3355ff, #9db4ff, #3355ff, #0d1b4d);
  animation: fx-rainbow-shift 4s ease-in-out infinite;
  text-shadow: 0 0 6px #3355ff;
}

/* ⭐⭐⭐⭐⭐ Mythic — Necromancer
   Ядовито-зелёный дым с очень медленным, зловещим "дыханием" —
   самый тяжёлый и мрачный ритм из тёмной группы тем. */
@keyframes fx-necro-breathe {
  0%, 100% { box-shadow: 0 0 6px 2px #0d1a0d; }
  50%      { box-shadow: 0 0 18px 5px #39a845, 0 0 5px 2px #0d1a0d; }
}
.fx-frame-theme-necromancer {
  --fx-ring: conic-gradient(from 0deg, #0d1a0d, #1f4d1f, #39a845, #1f4d1f, #0d1a0d);
  --fx-ring-speed: 7s;
  animation: fx-necro-breathe 4s ease-in-out infinite;
}
.fx-nick-theme-necromancer {
  --fx-text-gradient: linear-gradient(90deg, #0d1a0d, #1f4d1f, #39a845, #1f4d1f, #0d1a0d);
  animation: fx-rainbow-shift 5s ease-in-out infinite;
  text-shadow: 0 0 8px rgba(57,168,69,.6);
}

/* ⭐⭐⭐⭐⭐ Mythic — Chaos
   Непредсказуемый многоцветный flicker + лёгкое случайное
   дрожание — единственная тема с постоянным jitter transform. */
@keyframes fx-chaos-flicker {
  0%   { box-shadow: 0 0 8px 2px #ff0055; transform: translate(0,0); }
  15%  { box-shadow: 0 0 4px 1px #00e5ff; transform: translate(1px,-1px); }
  30%  { box-shadow: 0 0 14px 4px #ffea00; transform: translate(-1px,1px); }
  45%  { box-shadow: 0 0 6px 1px #7000ff; transform: translate(1px,1px); }
  60%  { box-shadow: 0 0 16px 4px #00ff6a; transform: translate(0,-1px); }
  75%  { box-shadow: 0 0 5px 1px #ff0055; transform: translate(-1px,0); }
  90%  { box-shadow: 0 0 12px 3px #00e5ff; transform: translate(1px,0); }
  100% { box-shadow: 0 0 8px 2px #ff0055; transform: translate(0,0); }
}
.fx-frame-theme-chaos {
  --fx-ring: conic-gradient(from 0deg, #ff0055, #ffea00, #00ff6a, #00e5ff, #7000ff, #ff0055);
  --fx-ring-speed: 1.2s;
  animation: fx-chaos-flicker 1.1s steps(8) infinite;
}
.fx-nick-theme-chaos {
  --fx-text-gradient: linear-gradient(90deg, #ff0055, #ffea00, #00ff6a, #00e5ff, #7000ff, #ff0055);
  animation: fx-rainbow-shift .6s steps(8) infinite;
  text-shadow: 0 0 6px #ff0055;
}

/* ⭐⭐⭐⭐⭐ MYTHIC ULTRA — Divine Emperor Gold
   Три слоя, разные механики: (1) сам обод — величавое ровное
   сияние + редкая мощная вспышка "императорского указа" (pulse
   event); (2) ::before — медленно вращающиеся лучи света
   (repeating-conic-gradient — угловая механика); (3) ::after —
   бегущий блик "жидкого золота" через background-position sweep
   (линейная механика, принципиально другая от вращения лучей). */
@keyframes fx-divine-radiance {
  0%, 88%, 100% { box-shadow: 0 0 10px 2px #ffd54f; border-color: #ffd54f !important; }
  92%           { box-shadow: 0 0 30px 10px #fff8e1, 0 0 12px 5px #ffd54f; border-color: #fff8e1 !important; }
  96%           { box-shadow: 0 0 14px 4px #ffd54f; border-color: #ffd54f !important; }
}
@keyframes fx-divine-rays-spin {
  to { transform: rotate(360deg); }
}
@keyframes fx-divine-shimmer-sweep {
  0%   { background-position: -150% 0; }
  100% { background-position: 250% 0; }
}
.fx-frame-theme-divine {
  position: relative;
  border-color: #ffd54f !important;
  animation: fx-divine-radiance 5s ease-in-out infinite;
}
.fx-frame-theme-divine::before {
  content: "";
  position: absolute; inset: -7px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, #fff8e1 0deg 4deg, transparent 4deg 20deg);
  animation: fx-divine-rays-spin 10s linear infinite;
  pointer-events: none;
}
.fx-frame-theme-divine::after {
  content: "";
  position: absolute; inset: -4px; border-radius: 50%;
  padding: 3px;
  background: linear-gradient(120deg, #7a5c1e 30%, #fff6d8 48%, #ffffff 50%, #fff6d8 52%, #7a5c1e 70%);
  background-size: 300% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: fx-divine-shimmer-sweep 2.5s linear infinite;
  pointer-events: none;
}
.fx-nick-theme-divine {
  --fx-text-gradient: linear-gradient(90deg, #fff8e1, #ffd54f, #ffffff, #ffd54f, #fff8e1);
  background-size: 300% auto;
  animation: fx-rainbow-shift 3s ease-in-out infinite, fx-divine-decree-text 5s ease-in-out infinite;
}
@keyframes fx-divine-decree-text {
  0%, 88%, 100% { text-shadow: 0 0 10px rgba(255,213,79,.7); }
  92%           { text-shadow: 0 0 24px #fff8e1, 0 0 10px #ffd54f; }
}

/* ═══════════════════════════════════════════════════════════════
   👑 ADMIN — ROYAL POWER · LEGENDARY EDITION
   Чистый CSS. Слои:
   1) Обод      — кованый металл: дыхание расплава + глубинные тени
   2) Overload  — редкий перегрев до бело-раскалённого (<300ms)
   3) Shockwave — расширяющаяся ударная волна (outline, редкая)
   4) ::before  — ДВА независимых противовращающихся ореола
                  (разные скорости, разные цвета, screen-blend)
   5) ::after   — орбитальные частицы (золотая пыль + плазма)
                  с несинхронным "потрескиванием" разрядов
   6) Никнейм   — жидкий металл + bloom-дыхание +
                  хроматическая аберрация во время всплеска
   Тайминги: 3.7 / 5.3 / 7.9 / 11.2 / 13.8 / 17.6 / 23.1s —
   ни один слой не совпадает по фазе, петля почти незаметна.
   ═══════════════════════════════════════════════════════════════ */

/* — Анимируемые углы конических градиентов (GPU-friendly) — */
@property --fx-admin-a1 {
  syntax: '<angle>'; initial-value: 0deg; inherits: false;
}
@property --fx-admin-a2 {
  syntax: '<angle>'; initial-value: 180deg; inherits: false;
}

/* ── 1. ОБОД: кованый королевский металл ─────────────────────── */
@keyframes fx-admin-forge {
  0%, 100% {
    border-color: #ffcf4d;
    box-shadow:
      inset 0 0 2px 1px rgba(255,255,255,.95),   /* полированная кромка */
      inset 0 0 9px 2px rgba(122,62,0,.55),      /* глубинная янтарная тень */
      0 0 5px 1px #ffd700,                        /* ядро свечения */
      0 0 16px 4px rgba(255,183,0,.55),           /* средний ореол */
      0 0 42px 10px rgba(255,140,0,.22);          /* дальняя аура */
  }
  27% {
    border-color: #fff3c4;
    box-shadow:
      inset 0 0 3px 1px rgba(255,255,255,1),
      inset 0 0 7px 2px rgba(140,70,0,.45),
      0 0 7px 2px #fff8dd,
      0 0 20px 5px rgba(255,210,80,.6),
      0 0 48px 12px rgba(255,170,0,.25);
  }
  52% {
    border-color: #ff9d2e;
    box-shadow:
      inset 0 0 2px 1px rgba(255,240,200,.9),
      inset 0 0 11px 3px rgba(90,30,0,.65),
      0 0 6px 1px #ffb340,
      0 0 15px 4px rgba(255,120,40,.5),
      0 0 38px 9px rgba(230,90,20,.2);
  }
  76% {
    border-color: #ff4d3a;
    box-shadow:
      inset 0 0 3px 1px rgba(255,255,255,.95),
      inset 0 0 9px 2px rgba(120,10,0,.6),
      0 0 7px 2px #ff3b3b,
      0 0 19px 5px rgba(255,60,60,.55),
      0 0 44px 11px rgba(255,40,40,.22);
  }
}

/* ── 2. OVERLOAD: перегрев до бело-раскалённого (~270ms) ─────── */
@keyframes fx-admin-overload {
  0%, 86.5%, 100% { filter: brightness(1) saturate(1) contrast(1); }
  87.5%           { filter: brightness(2.2) saturate(1.6) contrast(1.15); }
  88.1%           { filter: brightness(1.15) saturate(1.1) contrast(1); }
  88.7%           { filter: brightness(1.8) saturate(1.4) contrast(1.1); }
  89.5%           { filter: brightness(1) saturate(1) contrast(1); }
}

/* ── 3. SHOCKWAVE: ударная волна, синхронизирована с перегрузкой ── */
@keyframes fx-admin-shockwave {
  0%, 87%  { outline: 2px solid rgba(255,215,0,0);   outline-offset: 0px; }
  87.6%    { outline: 2px solid rgba(255,235,150,.85); outline-offset: 3px; }
  89.5%    { outline: 1px solid rgba(255,120,60,0);  outline-offset: 34px; }
  100%     { outline: 2px solid rgba(255,215,0,0);   outline-offset: 0px; }
}

.fx-frame-theme-admin {
  position: relative;
  border-width: 2px !important;
  animation:
    fx-admin-forge      7.9s  ease-in-out infinite,
    fx-admin-overload  13.8s  ease-in-out infinite,
    fx-admin-shockwave 13.8s  linear      infinite;
  will-change: filter;
}

/* ── 4. ДВОЙНОЙ ОРЕОЛ: два потока энергии навстречу друг другу ── */
@keyframes fx-admin-halo-cw  { to { --fx-admin-a1: 360deg; } }
@keyframes fx-admin-halo-ccw { to { --fx-admin-a2: -180deg; } }
@keyframes fx-admin-halo-breathe {
  0%, 100% { opacity: .5;  filter: blur(1px) saturate(1.1); }
  50%      { opacity: .75; filter: blur(2.5px) saturate(1.35); }
}

.fx-frame-theme-admin::before {
  content: "";
  position: absolute; inset: -11px; border-radius: 50%;
  background:
    /* поток 1: плотный золотой, по часовой */
    conic-gradient(from var(--fx-admin-a1),
      rgba(255,215,0,.95) 0%, rgba(255,59,59,.7) 12%,
      transparent 22%, rgba(255,248,221,.9) 34%,
      transparent 46%, rgba(255,183,0,.8) 58%,
      transparent 70%, rgba(255,59,59,.65) 84%,
      rgba(255,215,0,.95) 100%),
    /* поток 2: рваный алый, против часовой, с разрывами */
    conic-gradient(from var(--fx-admin-a2),
      transparent 0%, rgba(255,80,60,.55) 8%, transparent 15%,
      transparent 38%, rgba(255,240,180,.6) 45%, transparent 52%,
      transparent 71%, rgba(255,120,40,.5) 79%, transparent 88%);
  mix-blend-mode: screen;
  animation:
    fx-admin-halo-cw      17.6s linear      infinite,
    fx-admin-halo-ccw     23.1s linear      infinite,
    fx-admin-halo-breathe  5.3s ease-in-out infinite;
  pointer-events: none;
}

/* ── 5. ЧАСТИЦЫ: орбитальная пыль + рваные электрические вспышки ── */
@keyframes fx-admin-orbit { to { transform: rotate(360deg); } }
@keyframes fx-admin-crackle {
  /* псевдослучайные проценты — петля не читается глазом */
  0%, 100% { opacity: .35; }
  6%       { opacity: .9; }
  9%       { opacity: .3; }
  23%      { opacity: .65; }
  26%      { opacity: 1; }
  28%      { opacity: .25; }
  47%      { opacity: .8; }
  51%      { opacity: .4; }
  64%      { opacity: 1; }
  66%      { opacity: .3; }
  81%      { opacity: .7; }
  84%      { opacity: .95; }
  87%      { opacity: .35; }
}

.fx-frame-theme-admin::after {
  content: "";
  position: absolute; inset: -15px; border-radius: 50%;
  background:
    radial-gradient(circle 2.2px at 12% 22%, #fff8dd 40%, transparent 70%),
    radial-gradient(circle 1.3px at 78% 9%,  #ffd700 40%, transparent 70%),
    radial-gradient(circle 1.8px at 93% 48%, #ff5a3c 40%, transparent 70%),
    radial-gradient(circle 1.1px at 71% 88%, #ffffff 40%, transparent 70%),
    radial-gradient(circle 2px   at 31% 93%, #ffb340 40%, transparent 70%),
    radial-gradient(circle 1.4px at 6%  64%, #ff3b3b 40%, transparent 70%),
    radial-gradient(circle 1px   at 52% 4%,  #fff3c4 40%, transparent 70%),
    radial-gradient(circle 1.6px at 88% 76%, #ffd700 40%, transparent 70%);
  filter: drop-shadow(0 0 3px rgba(255,200,80,.8));
  animation:
    fx-admin-orbit   23.1s linear      infinite,
    fx-admin-crackle  3.7s ease-in-out infinite;
  pointer-events: none;
}

/* ── 6. НИКНЕЙМ: жидкий металл + bloom + хроматическая аберрация ── */
@keyframes fx-admin-nick-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes fx-admin-nick-bloom {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(255,200,60,.5))
                     drop-shadow(0 0 14px rgba(255,110,40,.2)); }
  50%      { filter: drop-shadow(0 0 8px rgba(255,225,120,.75))
                     drop-shadow(0 0 22px rgba(255,140,50,.35)); }
}
@keyframes fx-admin-nick-aberration {
  0%, 86.5%, 100% { text-shadow: 0 0 0 transparent; letter-spacing: .5px; }
  87.5% {
    text-shadow:
      -2px 0 rgba(0,229,255,.85),
       2px 0 rgba(255,0,60,.85),
       0 0 18px rgba(255,255,255,.9);
    letter-spacing: 1.2px;
  }
  88.3% { text-shadow: 1px 0 rgba(0,229,255,.4), -1px 0 rgba(255,0,60,.4); letter-spacing: .6px; }
  89.5% { text-shadow: 0 0 0 transparent; letter-spacing: .5px; }
}

.fx-nick-theme-admin {
  --fx-text-gradient: linear-gradient(100deg,
    #7a4a00 0%, #ffd700 14%, #fff8dd 24%, #ffd700 34%,
    #ff8a3c 48%, #ff3b3b 56%, #ffcf4d 70%,
    #ffffff 78%, #ffd700 88%, #7a4a00 100%);
  background: var(--fx-text-gradient);
  background-size: 320% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
  animation:
    fx-admin-nick-flow        5.3s ease-in-out infinite,
    fx-admin-nick-bloom       7.9s ease-in-out infinite,
    fx-admin-nick-aberration 13.8s ease-in-out infinite,
    fx-admin-overload        13.8s ease-in-out infinite;
  will-change: filter;
}

/* ── Уважение к настройкам пользователя ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fx-frame-theme-admin,
  .fx-frame-theme-admin::before,
  .fx-frame-theme-admin::after,
  .fx-nick-theme-admin {
    animation-duration: 60s;
  }
}

/* ⭐⭐⭐⭐⭐ Mythic — Spirit
   Полупрозрачный призрачный дрейф — плавное затухание/появление
   всего элемента (единственная тема, анимирующая opacity целиком). */
@keyframes fx-spirit-fade {
  0%, 100% { opacity: .55; box-shadow: 0 0 6px 1px #cfe8ff; }
  50%      { opacity: 1; box-shadow: 0 0 14px 3px #ffffff; }
}
.fx-frame-theme-spirit {
  --fx-ring: conic-gradient(from 0deg, #cfe8ff, #ffffff, #a0c8ff, #cfe8ff);
  --fx-ring-speed: 6s;
  animation: fx-spirit-fade 3.2s ease-in-out infinite;
}
.fx-nick-theme-spirit {
  --fx-text-gradient: linear-gradient(90deg, #cfe8ff, #ffffff, #a0c8ff, #cfe8ff);
  animation: fx-rainbow-shift 4s ease-in-out infinite, fx-spirit-fade 3.2s ease-in-out infinite;
}

/* ⭐⭐⭐⭐⭐ Mythic — Ghost
   Похож на Spirit, но резче и холоднее: быстрое мерцание
   "то видно — то нет" вместо плавного дыхания. */
@keyframes fx-ghost-flicker {
  0%, 40%, 60%, 100% { opacity: 1; }
  45%, 55% { opacity: .25; }
}
.fx-frame-theme-ghost {
  --fx-ring: conic-gradient(from 0deg, #e6f7ff, #ffffff, #b0dfff, #e6f7ff);
  --fx-ring-speed: 4s;
  animation: fx-ghost-flicker 2.4s ease-in-out infinite, fx-ice-glint 3s ease-in-out infinite;
}
.fx-nick-theme-ghost {
  --fx-text-gradient: linear-gradient(90deg, #e6f7ff, #ffffff, #b0dfff, #e6f7ff);
  animation: fx-rainbow-shift 3s ease-in-out infinite, fx-ghost-flicker 2.4s ease-in-out infinite;
}

/* ⭐⭐⭐⭐⭐ Mythic — Blood Moon
   Тёмно-красное затмение с ярким серпом-бликом, вспыхивающим
   на краю кольца — не пульс по всему кругу, а локальная вспышка. */
@keyframes fx-bloodmoon-crescent {
  0%, 100% { box-shadow: 0 0 6px 2px #3d0000; }
  50%      { box-shadow: 4px -2px 14px 2px #ff3b3b, 0 0 4px 1px #3d0000; }
}
.fx-frame-theme-bloodmoon {
  --fx-ring: conic-gradient(from 0deg, #3d0000, #8b0000, #ff3b3b, #8b0000, #3d0000);
  --fx-ring-speed: 5s;
  animation: fx-bloodmoon-crescent 3s ease-in-out infinite;
}
.fx-nick-theme-bloodmoon {
  --fx-text-gradient: linear-gradient(90deg, #3d0000, #8b0000, #ff3b3b, #8b0000, #3d0000);
  animation: fx-rainbow-shift 4s ease-in-out infinite;
  text-shadow: 0 0 8px #8b0000;
}

/* ⭐⭐⭐⭐⭐ Mythic — Eclipse
   Тёмный диск + яркая тонкая корона — высокий контраст между
   почти-чёрным ядром и ослепительным ободком. */
@keyframes fx-eclipse-corona {
  0%, 100% { box-shadow: 0 0 3px 1px #000, 0 0 6px 2px #fff8d6; }
  50%      { box-shadow: 0 0 2px 0px #000, 0 0 16px 4px #fff8d6, 0 0 5px 2px #ffb347; }
}
.fx-frame-theme-eclipse {
  --fx-ring: conic-gradient(from 0deg, #000 0%, #000 80%, #ffb347 88%, #fff8d6 92%, #ffb347 96%, #000 100%);
  --fx-ring-speed: 3s;
  animation: fx-eclipse-corona 2.6s ease-in-out infinite;
}
.fx-nick-theme-eclipse {
  --fx-text-gradient: linear-gradient(90deg, #000, #ffb347, #fff8d6, #ffb347, #000);
  animation: fx-rainbow-shift 2.2s linear infinite;
  text-shadow: 0 0 8px #ffb347;
}

/* ⭐⭐⭐⭐⭐ Mythic — Solar
   Пульсирующие солнечные лучи (repeating-conic-gradient) с
   мощной, широкой вспышкой — самый "горячий/яркий" свет в наборе. */
.fx-frame-theme-solar {
  --fx-ring: repeating-conic-gradient(from 0deg, #ffef99 0deg 6deg, #ffb300 6deg 18deg);
  --fx-ring-speed: 4s;
  animation: fx-solar-flare 2.4s ease-in-out infinite;
}
@keyframes fx-solar-flare {
  0%, 100% { box-shadow: 0 0 10px 2px #ffb300; }
  50%      { box-shadow: 0 0 26px 8px #ffef99, 0 0 10px 4px #ff7a00; }
}
.fx-nick-theme-solar {
  --fx-text-gradient: linear-gradient(90deg, #ff7a00, #ffb300, #ffef99, #ffb300, #ff7a00);
  animation: fx-rainbow-shift 2s ease-in-out infinite;
  text-shadow: 0 0 10px #ffb300;
}

/* ⭐⭐⭐⭐⭐ Mythic — Cyberpunk
   Неоновые сканлайны (repeating-linear-gradient) поверх кольца
   через mix-blend-mode + RGB-сдвиг ника — техно-эстетика. */
.fx-frame-theme-cyberpunk {
  --fx-ring: conic-gradient(from 0deg, #ff00aa, #00fff2, #ff00aa);
  --fx-ring-speed: 1.5s;
  animation: fx-cyberpunk-pulse 1.3s steps(2) infinite;
}
@keyframes fx-cyberpunk-pulse {
  0%, 100% { box-shadow: 0 0 6px 1px #ff00aa; }
  50%      { box-shadow: 0 0 14px 3px #00fff2; }
}
.fx-frame-theme-cyberpunk::after {
  content: "";
  position: absolute; inset: -4px; border-radius: 50%;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.15) 0px, rgba(255,255,255,.15) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.fx-nick-theme-cyberpunk {
  --fx-text-gradient: linear-gradient(90deg, #ff00aa, #00fff2, #ff00aa);
  animation: fx-rainbow-shift 1s linear infinite, fx-glitch-text 3s steps(1) infinite;
}

/* ⭐⭐⭐⭐⭐ Mythic — Quantum
   Мерцающее облако вероятности: несколько независимых точек
   мигают асинхронно (разные animation-delay) — "неопределённость". */
@keyframes fx-quantum-flicker-1 { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes fx-quantum-flicker-2 { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
.fx-frame-theme-quantum {
  --fx-ring: conic-gradient(from 0deg, #00e5ff, #ff00e5, #00e5ff);
  --fx-ring-speed: 3s;
  animation: fx-quantum-flicker-1 1.7s ease-in-out infinite;
}
.fx-frame-theme-quantum::after {
  content: "";
  position: absolute; inset: -10px; border-radius: 50%;
  background:
    radial-gradient(circle 1.5px at 20% 30%, #00e5ff, transparent),
    radial-gradient(circle 1.5px at 75% 20%, #ff00e5, transparent),
    radial-gradient(circle 1.5px at 40% 80%, #ff00e5, transparent),
    radial-gradient(circle 1.5px at 85% 70%, #00e5ff, transparent);
  animation: fx-quantum-flicker-2 1.1s ease-in-out infinite;
  pointer-events: none;
}
.fx-nick-theme-quantum {
  --fx-text-gradient: linear-gradient(90deg, #00e5ff, #ff00e5, #00e5ff);
  animation: fx-rainbow-shift 1.5s ease-in-out infinite, fx-quantum-flicker-1 1.7s ease-in-out infinite;
}

/* ⭐⭐⭐⭐⭐ Mythic — Void Emperor
   Императорская тьма: медленный властный пульс + периодические
   вспышки-"короны" фиолетового света на ободе. */
@keyframes fx-voidemperor-crown {
  0%, 75%, 100% { box-shadow: 0 0 6px 2px #1a0033; }
  80%  { box-shadow: 0 0 22px 6px #a000ff, 0 0 6px 2px #1a0033; }
  85%  { box-shadow: 0 0 6px 2px #1a0033; }
}
.fx-frame-theme-voidemperor {
  --fx-ring: conic-gradient(from 0deg, #000, #1a0033, #a000ff, #1a0033, #000);
  --fx-ring-speed: 5s;
  animation: fx-voidemperor-crown 3.4s ease-in-out infinite;
}
.fx-nick-theme-voidemperor {
  --fx-text-gradient: linear-gradient(90deg, #000, #1a0033, #a000ff, #1a0033, #000);
  animation: fx-rainbow-shift 4s ease-in-out infinite;
  text-shadow: 0 0 10px #a000ff;
}

/* ⭐⭐⭐⭐⭐ Mythic — Stardust
   Пастельная космическая пыль: медленный дрейф + мягкое,
   почти незаметное мерцание частиц — самый "нежный" эффект. */
@keyframes fx-stardust-drift {
  0%, 100% { box-shadow: 0 0 6px 1px #ffd6f5; }
  50%      { box-shadow: 0 0 12px 3px #d6e5ff; }
}
.fx-frame-theme-stardust {
  --fx-ring: conic-gradient(from 0deg, #ffd6f5, #d6e5ff, #e5d6ff, #ffd6f5);
  --fx-ring-speed: 9s;
  animation: fx-stardust-drift 4.5s ease-in-out infinite;
}
.fx-frame-theme-stardust::after {
  content: "";
  position: absolute; inset: -9px; border-radius: 50%;
  background:
    radial-gradient(circle 1px at 30% 20%, #fff, transparent),
    radial-gradient(circle 1px at 70% 60%, #fff, transparent),
    radial-gradient(circle 1px at 50% 90%, #fff, transparent);
  animation: fx-celestial-orbit 10s linear infinite;
  pointer-events: none;
}
.fx-nick-theme-stardust {
  --fx-text-gradient: linear-gradient(90deg, #ffd6f5, #d6e5ff, #e5d6ff, #ffd6f5);
  animation: fx-rainbow-shift 6s ease-in-out infinite;
  text-shadow: 0 0 6px rgba(230,213,255,.6);
}

/* ⭐⭐⭐⭐⭐ Mythic — Wildfire
   Ещё более хаотичный огонь, чем Inferno: направление "языков"
   как будто рвётся в разные стороны (asymmetric conic angles). */
@keyframes fx-wildfire-rage {
  0%   { box-shadow: 3px -2px 10px 2px #ff2200; }
  20%  { box-shadow: -3px 2px 16px 4px #ffaa00; }
  40%  { box-shadow: 2px 3px 8px 1px #ff2200; }
  60%  { box-shadow: -2px -3px 18px 5px #ffea00; }
  80%  { box-shadow: 3px 1px 12px 3px #ffaa00; }
  100% { box-shadow: 3px -2px 10px 2px #ff2200; }
}
.fx-frame-theme-wildfire {
  --fx-ring: conic-gradient(from 30deg, #ff2200, #ffaa00, #ffea00, #ff2200, #ffaa00);
  --fx-ring-speed: .8s;
  animation: fx-wildfire-rage .7s linear infinite;
}
.fx-nick-theme-wildfire {
  --fx-text-gradient: linear-gradient(90deg, #ff2200, #ffaa00, #ffea00, #ff2200);
  animation: fx-rainbow-shift .7s linear infinite;
  text-shadow: 0 0 8px #ffaa00;
}

/* ⭐⭐⭐⭐⭐ Mythic — Abyss
   Тяжёлое, медленное давление глубины — самый долгий цикл
   пульса во всей библиотеке, почти статичный до пика. */
@keyframes fx-abyss-pressure {
  0%, 85%, 100% { box-shadow: 0 0 5px 1px #001a1a; }
  92%  { box-shadow: 0 0 16px 4px #003d3d, 0 0 4px 2px #00807a; }
}
.fx-frame-theme-abyss {
  --fx-ring: conic-gradient(from 0deg, #000d0d, #001a1a, #00807a, #001a1a, #000d0d);
  --fx-ring-speed: 10s;
  animation: fx-abyss-pressure 6s ease-in-out infinite;
}
.fx-nick-theme-abyss {
  --fx-text-gradient: linear-gradient(90deg, #000d0d, #001a1a, #00807a, #001a1a, #000d0d);
  animation: fx-rainbow-shift 7s ease-in-out infinite;
  text-shadow: 0 0 6px #00807a;
}

/* ⭐⭐⭐⭐⭐ Mythic — Radiant
   Спокойное ангельское сияние — мягче и медленнее Divine, без
   лучей, просто идеально ровное дыхание светом. */
@keyframes fx-radiant-breathe {
  0%, 100% { box-shadow: 0 0 8px 2px #fff8e1; }
  50%      { box-shadow: 0 0 18px 5px #ffffff; }
}
.fx-frame-theme-radiant {
  --fx-ring: conic-gradient(from 0deg, #ffffff, #fff8e1, #ffe9a8, #fff8e1, #ffffff);
  --fx-ring-speed: 6s;
  animation: fx-radiant-breathe 4s ease-in-out infinite;
}
.fx-nick-theme-radiant {
  --fx-text-gradient: linear-gradient(90deg, #ffffff, #fff8e1, #ffe9a8, #fff8e1, #ffffff);
  animation: fx-rainbow-shift 5s ease-in-out infinite;
  text-shadow: 0 0 8px rgba(255,255,255,.6);
}

/* ⭐⭐⭐⭐⭐ Mythic — Infernal
   Демонический огонь: тёмный, почти чёрный фон с редкими,
   резкими вспышками раскалённых углей — тлеющий, не пылающий. */
@keyframes fx-infernal-smolder {
  0%, 88%, 100% { box-shadow: 0 0 4px 1px #1a0000; }
  91%  { box-shadow: 0 0 18px 5px #ff2200, 0 0 5px 2px #1a0000; }
  94%  { box-shadow: 0 0 4px 1px #1a0000; }
}
.fx-frame-theme-infernal {
  --fx-ring: conic-gradient(from 0deg, #1a0000, #4d0000, #ff2200, #4d0000, #1a0000);
  --fx-ring-speed: 4s;
  animation: fx-infernal-smolder 3.6s ease-in-out infinite;
}
.fx-nick-theme-infernal {
  --fx-text-gradient: linear-gradient(90deg, #1a0000, #4d0000, #ff2200, #4d0000, #1a0000);
  animation: fx-rainbow-shift 4s ease-in-out infinite, fx-infernal-text 3.6s ease-in-out infinite;
}
@keyframes fx-infernal-text {
  0%, 88%, 100% { text-shadow: 0 0 3px #1a0000; }
  91%  { text-shadow: 0 0 12px #ff2200; }
}

/* ============================================================
   Тематические анимированные ФОНЫ профиля (profile_customization:
   background, data.theme). Сознательно другая механика, чем у рамок/
   ников: ровный "льющийся" градиент на всю площадь баннера, без колец
   и частиц — это задник под читаемым текстом профиля, а не hero-
   элемент, поэтому спокойствие здесь — часть дизайна, не недоработка.
   Затемняющая полупрозрачная подложка (::before) держит контраст
   текста одинаковым независимо от того, насколько яркая тема выбрана.
   Скорость перетекания у каждой темы разная — быстрые/энергичные
   темы (Хаос, Электричество) текут быстрее спокойных (Бездна, Тьма),
   тот же принцип характера, что и у рамок/ников этих тем. */
.fx-bg-themed {
  position: relative;
  background-image: var(--fx-bg-gradient) !important;
  background-size: 250% 250% !important;
  animation: fx-bg-flow var(--fx-bg-speed, 10s) ease-in-out infinite;
}
.fx-bg-themed::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(13, 13, 13, .5);
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
.fx-bg-themed > * {
  position: relative;
  z-index: 1;
}
@keyframes fx-bg-flow {
  0%, 100% { background-position: 0% 30%; }
  50%      { background-position: 100% 70%; }
}

.fx-bg-theme-fire          { --fx-bg-gradient: linear-gradient(120deg, #8b0000, #ff2200, #ffaa00, #ff2200, #8b0000); --fx-bg-speed: 6s; }
.fx-bg-theme-ice           { --fx-bg-gradient: linear-gradient(120deg, #4fc3f7, #b3e5fc, #ffffff, #4fc3f7); --fx-bg-speed: 10s; }
.fx-bg-theme-electric      { --fx-bg-gradient: linear-gradient(120deg, #00e5ff, #d500f9, #00e5ff); --fx-bg-speed: 3s; }
.fx-bg-theme-toxic         { --fx-bg-gradient: linear-gradient(120deg, #1b5e20, #76ff03, #00e676, #1b5e20); --fx-bg-speed: 8s; }
.fx-bg-theme-shadow        { --fx-bg-gradient: linear-gradient(120deg, #8e24aa, #2a0845, #4a148c, #8e24aa); --fx-bg-speed: 12s; }
.fx-bg-theme-holy          { --fx-bg-gradient: linear-gradient(120deg, #fff176, #ffd54f, #fff8e1, #fff176); --fx-bg-speed: 9s; }
.fx-bg-theme-rainbow       { --fx-bg-gradient: linear-gradient(120deg, #ff3b3b, #ffb13b, #f8e34e, #3bff6e, #3bd1ff, #7a3bff, #ff3bd1); --fx-bg-speed: 5s; }
.fx-bg-theme-galaxy        { --fx-bg-gradient: linear-gradient(120deg, #1a0b3d, #6a0dad, #ff2d95, #00d4ff, #1a0b3d); --fx-bg-speed: 9s; }
.fx-bg-theme-diamond       { --fx-bg-gradient: linear-gradient(120deg, #ffffff, #c0c0c0, #a0e9ff, #ffffff); --fx-bg-speed: 7s; }
.fx-bg-theme-blood         { --fx-bg-gradient: linear-gradient(120deg, #4a0000, #8b0000, #ff0000, #4a0000); --fx-bg-speed: 8s; }
.fx-bg-theme-glitch        { --fx-bg-gradient: linear-gradient(120deg, #00fff9, #ffffff, #ff0055, #00fff9); --fx-bg-speed: 4s; }
.fx-bg-theme-vortex        { --fx-bg-gradient: linear-gradient(120deg, #ff00e5, #7000ff, #00e5ff, #ff00e5); --fx-bg-speed: 3s; }

.fx-bg-theme-blackhole     { --fx-bg-gradient: linear-gradient(120deg, #000000, #ff5500, #ffcc00, #000000); --fx-bg-speed: 5s; }
.fx-bg-theme-nebula        { --fx-bg-gradient: linear-gradient(120deg, #ff6ec7, #6a5acd, #20b2aa, #ff6ec7); --fx-bg-speed: 10s; }
.fx-bg-theme-celestial     { --fx-bg-gradient: linear-gradient(120deg, #ffe680, #fff4cc, #ffffff, #ffe680); --fx-bg-speed: 9s; }
.fx-bg-theme-comet         { --fx-bg-gradient: linear-gradient(120deg, #1a3a4a, #7dd8ff, #ffffff, #1a3a4a); --fx-bg-speed: 6s; }
.fx-bg-theme-inferno       { --fx-bg-gradient: linear-gradient(120deg, #8b0000, #ff2200, #ffaa00, #8b0000); --fx-bg-speed: 4s; }
.fx-bg-theme-frozen        { --fx-bg-gradient: linear-gradient(120deg, #a8e0ff, #ffffff, #6ec6ff, #a8e0ff); --fx-bg-speed: 7s; }
.fx-bg-theme-blizzard      { --fx-bg-gradient: linear-gradient(120deg, #dff6ff, #6ec6ff, #ffffff, #dff6ff); --fx-bg-speed: 8s; }
.fx-bg-theme-storm         { --fx-bg-gradient: linear-gradient(120deg, #1a1a2b, #2b2b3d, #4d4d6e, #1a1a2b); --fx-bg-speed: 10s; }
.fx-bg-theme-oceanic       { --fx-bg-gradient: linear-gradient(120deg, #003b5c, #0088aa, #66d9e8, #003b5c); --fx-bg-speed: 11s; }
.fx-bg-theme-tidal         { --fx-bg-gradient: linear-gradient(120deg, #003b5c, #0088aa, #66d9e8, #003b5c); --fx-bg-speed: 9s; }
.fx-bg-theme-royalgold     { --fx-bg-gradient: linear-gradient(120deg, #7a5c1e, #c7a552, #fff6d8, #7a5c1e); --fx-bg-speed: 8s; }
.fx-bg-theme-prismatic     { --fx-bg-gradient: linear-gradient(120deg, #ff0000, #ff9d00, #fff700, #00ff6a, #00d9ff, #6a00ff, #ff00d9); --fx-bg-speed: 4s; }
.fx-bg-theme-crystal       { --fx-bg-gradient: linear-gradient(120deg, #6a4dff, #a68bff, #ffffff, #6a4dff); --fx-bg-speed: 8s; }
.fx-bg-theme-emerald       { --fx-bg-gradient: linear-gradient(120deg, #024d1f, #00c853, #69ffb0, #024d1f); --fx-bg-speed: 9s; }
.fx-bg-theme-liquidmetal   { --fx-bg-gradient: linear-gradient(120deg, #2b2b2b, #9e9e9e, #ffffff, #2b2b2b); --fx-bg-speed: 6s; }
.fx-bg-theme-runic         { --fx-bg-gradient: linear-gradient(120deg, #0d1b4d, #3355ff, #9db4ff, #0d1b4d); --fx-bg-speed: 11s; }
.fx-bg-theme-necromancer   { --fx-bg-gradient: linear-gradient(120deg, #0d1a0d, #1f4d1f, #39a845, #0d1a0d); --fx-bg-speed: 12s; }
.fx-bg-theme-chaos         { --fx-bg-gradient: linear-gradient(120deg, #ff0055, #ffea00, #00ff6a, #00e5ff, #7000ff); --fx-bg-speed: 3s; }
.fx-bg-theme-spirit        { --fx-bg-gradient: linear-gradient(120deg, #cfe8ff, #ffffff, #a0c8ff, #cfe8ff); --fx-bg-speed: 10s; }
.fx-bg-theme-ghost         { --fx-bg-gradient: linear-gradient(120deg, #e6f7ff, #ffffff, #b0dfff, #e6f7ff); --fx-bg-speed: 9s; }
.fx-bg-theme-bloodmoon     { --fx-bg-gradient: linear-gradient(120deg, #3d0000, #8b0000, #ff3b3b, #3d0000); --fx-bg-speed: 10s; }
.fx-bg-theme-eclipse       { --fx-bg-gradient: linear-gradient(120deg, #000000, #ffb347, #fff8d6, #000000); --fx-bg-speed: 9s; }
.fx-bg-theme-solar         { --fx-bg-gradient: linear-gradient(120deg, #ff7a00, #ffb300, #ffef99, #ff7a00); --fx-bg-speed: 6s; }
.fx-bg-theme-cyberpunk     { --fx-bg-gradient: linear-gradient(120deg, #ff00aa, #00fff2, #ff00aa); --fx-bg-speed: 3s; }
.fx-bg-theme-quantum       { --fx-bg-gradient: linear-gradient(120deg, #00e5ff, #ff00e5, #00e5ff); --fx-bg-speed: 4s; }
.fx-bg-theme-voidemperor   { --fx-bg-gradient: linear-gradient(120deg, #000000, #1a0033, #a000ff, #000000); --fx-bg-speed: 12s; }
.fx-bg-theme-stardust      { --fx-bg-gradient: linear-gradient(120deg, #ffd6f5, #d6e5ff, #e5d6ff, #ffd6f5); --fx-bg-speed: 11s; }
.fx-bg-theme-wildfire      { --fx-bg-gradient: linear-gradient(120deg, #ff2200, #ffaa00, #ffea00, #ff2200); --fx-bg-speed: 3s; }
.fx-bg-theme-abyss         { --fx-bg-gradient: linear-gradient(120deg, #000d0d, #001a1a, #00807a, #000d0d); --fx-bg-speed: 14s; }
.fx-bg-theme-radiant       { --fx-bg-gradient: linear-gradient(120deg, #ffffff, #fff8e1, #ffe9a8, #ffffff); --fx-bg-speed: 9s; }
.fx-bg-theme-infernal      { --fx-bg-gradient: linear-gradient(120deg, #1a0000, #4d0000, #ff2200, #1a0000); --fx-bg-speed: 10s; }

.fx-bg-theme-void          { --fx-bg-gradient: linear-gradient(120deg, #000000, #3d0a5c, #1a0033, #7000ff, #000000); --fx-bg-speed: 8s; }
.fx-bg-theme-aurora        { --fx-bg-gradient: linear-gradient(120deg, #00ffa2, #00c2ff, #b967ff, #00ffa2); --fx-bg-speed: 9s; }
.fx-bg-theme-event_horizon { --fx-bg-gradient: linear-gradient(120deg, #1a0d00, #ff5500, #ffcc00, #fff6d8, #1a0d00); --fx-bg-speed: 4s; }
.fx-bg-theme-thunder_god   { --fx-bg-gradient: linear-gradient(120deg, #1a0033, #00e5ff, #1a0033); --fx-bg-speed: 3s; }
.fx-bg-theme-phoenix       { --fx-bg-gradient: linear-gradient(120deg, #ff2200, #ff6a00, #ffd700, #ff2200); --fx-bg-speed: 5s; }
.fx-bg-theme-dragon        { --fx-bg-gradient: linear-gradient(120deg, #0b3d0b, #1a6e1a, #ffd700, #0b3d0b); --fx-bg-speed: 10s; }
.fx-bg-theme-cosmos        { --fx-bg-gradient: linear-gradient(120deg, #1b0b3d, #3d1a6e, #05010f, #1b0b3d); --fx-bg-speed: 10s; }
.fx-bg-theme-meteor        { --fx-bg-gradient: linear-gradient(120deg, #4a2600, #ff9d00, #4a2600); --fx-bg-speed: 6s; }
.fx-bg-theme-arcane        { --fx-bg-gradient: linear-gradient(120deg, #4b0082, #9d4edd, #e0aaff, #4b0082); --fx-bg-speed: 8s; }
.fx-bg-theme-divine        { --fx-bg-gradient: linear-gradient(120deg, #fff8e1, #ffd54f, #ffffff, #fff8e1); --fx-bg-speed: 7s; }
.fx-bg-theme-admin         { --fx-bg-gradient: linear-gradient(120deg, #7a4a00, #ffd700, #fff8dd, #ff3b3b, #7a4a00); --fx-bg-speed: 6s; }

@keyframes fx-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.fx-badge-bounce { display: inline-block; animation: fx-bounce .8s ease-in-out infinite; }

@keyframes fx-badge-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.25); }
}
.fx-badge-pulse { display: inline-block; animation: fx-badge-pulse 1s ease-in-out infinite; }

@keyframes fx-shake {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-10deg); }
  75%      { transform: rotate(10deg); }
}
.fx-badge-shake { display: inline-block; animation: fx-shake .5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .fx-frame-glow, .fx-frame-rainbow::before, .fx-nick-glow,
  .fx-nick-rainbow, .fx-nick-shimmer, .fx-badge-bounce,
  .fx-badge-pulse, .fx-badge-shake {
    animation: none;
  }
}

/* ============================================================
   Player comparison — versus page (profile/compare.html)
   ============================================================
   Two sides, two colors, consistently applied everywhere on the page:
   gold = player A, the site's existing "defense" jewel-tone blue = player B
   (same blue already used for the Sheriff title flavor — not a new color
   introduced just for this page).
   ============================================================ */

:root {
  --cmp-a: var(--ms-gold-light);
  --cmp-b: var(--flavor-defense, #5B8DC9);
}

.cmp-hero {
  position: relative;
  background: var(--ms-surface-raised);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  padding: 1.75rem 1.25rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.cmp-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--cmp-a) 10%, transparent), transparent 45%, transparent 55%, color-mix(in srgb, var(--cmp-b) 10%, transparent));
  pointer-events: none;
}

.cmp-hero__row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

.cmp-hero__side {
  text-align: center;
  min-width: 0;
}

.cmp-hero__name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmp-hero__side--a .cmp-hero__name { color: var(--cmp-a); }
.cmp-hero__side--b .cmp-hero__name { color: var(--cmp-b); }

.cmp-hero__rank { color: var(--ms-muted); font-size: .8rem; margin-top: .15rem; }

.cmp-hero__elo {
  font-size: 1.9rem;
  font-weight: 800;
  margin-top: .4rem;
  font-variant-numeric: tabular-nums;
}
.cmp-hero__side--a .cmp-hero__elo { color: var(--cmp-a); }
.cmp-hero__side--b .cmp-hero__elo { color: var(--cmp-b); }

.cmp-hero__vs {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--ms-muted);
  letter-spacing: .1em;
  padding: 0 .5rem;
}

.cmp-hero__gap {
  text-align: center;
  margin-top: 1.25rem;
  font-size: .95rem;
  color: var(--ms-text-dim);
}
.cmp-hero__gap strong { font-weight: 700; }

.cmp-score-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: .9rem auto 0;
  padding: .35rem 1rem;
  border-radius: 99px;
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  font-weight: 700;
  font-size: .9rem;
}
.cmp-score-pill__a { color: var(--cmp-a); }
.cmp-score-pill__b { color: var(--cmp-b); }
.cmp-score-pill__sep { color: var(--ms-muted); font-weight: 400; }

/* ── Duel category cards (combines the "winner card" + proportional bar) ── */

.cmp-duel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .85rem;
  margin-bottom: 1.5rem;
}

.cmp-duel-card {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  padding: 1rem;
}

.cmp-duel-card__label {
  color: var(--ms-muted);
  font-size: .78rem;
  margin-bottom: .6rem;
}

.cmp-duel-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .5rem;
  margin-bottom: .4rem;
}
.cmp-duel-row:last-child { margin-bottom: 0; }

.cmp-duel-row__value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: .9rem;
  white-space: nowrap;
}
.cmp-duel-row--a .cmp-duel-row__value { color: var(--cmp-a); }
.cmp-duel-row--b .cmp-duel-row__value { color: var(--cmp-b); }

.cmp-duel-bar-track {
  height: 8px;
  border-radius: 99px;
  background: var(--ms-surface-alt);
  overflow: hidden;
}
.cmp-duel-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .5s ease;
}
.cmp-duel-row--a .cmp-duel-bar-fill { background: var(--cmp-a); }
.cmp-duel-row--b .cmp-duel-bar-fill { background: var(--cmp-b); }

.cmp-duel-card--winner-a { border-color: color-mix(in srgb, var(--cmp-a) 45%, var(--ms-border)); }
.cmp-duel-card--winner-b { border-color: color-mix(in srgb, var(--cmp-b) 45%, var(--ms-border)); }

.cmp-duel-card__winner-tag {
  float: right;
  font-size: .7rem;
}

/* ── Achievement-style comparison cards ── */

.cmp-achv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .85rem;
  margin-bottom: 1.5rem;
}

.cmp-achv-card {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  padding: 1rem;
  text-align: center;
}

.cmp-achv-card__icon { font-size: 1.4rem; margin-bottom: .4rem; }

.cmp-achv-card__label {
  color: var(--ms-muted);
  font-size: .76rem;
  margin-bottom: .5rem;
}

.cmp-achv-card__values {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-size: 1.3rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.cmp-achv-card__values .cmp-a { color: var(--cmp-a); }
.cmp-achv-card__values .cmp-b { color: var(--cmp-b); }
.cmp-achv-card__values .cmp-vs-sep { color: var(--ms-muted); font-size: .85rem; font-weight: 400; }

/* ── Rule-based analysis block ── */

.cmp-analysis {
  background: var(--ms-surface-raised);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.cmp-analysis__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  margin-bottom: .75rem;
}

.cmp-analysis__summary { margin-bottom: 1rem; }

.cmp-analysis__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.cmp-analysis__col-title {
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: .4rem;
}
.cmp-analysis__col-title--strengths { color: var(--ms-gold-light); }
.cmp-analysis__col-title--weaknesses { color: var(--ms-muted); }

.cmp-analysis__list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: .85rem;
}
.cmp-analysis__list li { margin-bottom: .3rem; }

.cmp-analysis__probability {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ms-border);
  text-align: center;
}
.cmp-analysis__probability-value {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--ms-gold-light);
}

.cmp-chart-container { position: relative; height: 280px; }

@media (max-width: 576px) {
  .cmp-hero__name { font-size: 1.05rem; }
  .cmp-hero__elo { font-size: 1.4rem; }
  .cmp-analysis__cols { grid-template-columns: 1fr; }
}

/* ============================================================
   Hall of Fame — titles/nominations.html
   ============================================================
   Same rarity ladder as achievements (common/rare/epic/legendary,
   no blue/purple) but with real size hierarchy this time: legendary
   cards are visibly bigger, not just a differently-colored top bar.
   ============================================================ */

.hof-hero {
  position: relative;
  text-align: center;
  padding: 2.5rem 1.5rem;
  border-radius: var(--ms-radius);
  background:
    radial-gradient(ellipse at center top, rgba(212,176,106,.14), transparent 65%),
    var(--ms-surface-raised);
  border: 1px solid var(--ms-border);
  overflow: hidden;
}
.hof-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent, var(--ms-gold) 20%, var(--ms-gold) 80%, transparent);
  height: 1px;
  top: 0;
  opacity: .5;
}
.hof-hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent, var(--ms-gold) 20%, var(--ms-gold) 80%, transparent);
  height: 1px;
  bottom: 0;
  opacity: .5;
}

.hof-hero__label {
  font-size: .72rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ms-muted);
  margin-bottom: 1rem;
}

.hof-hero__icon {
  font-size: 2.4rem;
  filter: drop-shadow(0 0 14px rgba(212,176,106,.5));
  margin-bottom: .5rem;
}

.hof-hero__name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800;
  font-size: 2rem;
  color: var(--ms-gold-light);
  text-shadow: 0 0 24px rgba(212,176,106,.35);
}

.hof-hero__title {
  color: var(--ms-text-dim);
  font-size: .95rem;
  margin-top: .15rem;
  margin-bottom: 1rem;
}

.hof-hero__facts {
  display: inline-block;
  font-size: .85rem;
  color: var(--ms-muted);
  padding: .4rem 1.1rem;
  border-radius: 99px;
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
}

/* ── Tiered grid — legendary cards span 2 columns and read taller ──────── */

.hof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-auto-rows: minmax(150px, auto);
  gap: 1rem;
}

.hof-card {
  position: relative;
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  padding: 1.1rem;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display: flex;
  flex-direction: column;
  --accent: var(--ms-muted);
}

.hof-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 0 20px color-mix(in srgb, var(--accent) 30%, transparent);
  z-index: 2;
}

.hof-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
  border-radius: var(--ms-radius) var(--ms-radius) 0 0;
}

.hof-card--rare {
  --accent: #B8B8B8;
}

.hof-card--epic {
  --accent: var(--ms-wine-light);
  grid-column: span 1;
}

.hof-card--legendary {
  --accent: var(--ms-gold-light);
  background: rgba(212,176,106,.05);
  grid-column: span 2;
  padding: 1.5rem;
}
@media (min-width: 768px) {
  .hof-card--legendary { grid-row: span 1; }
  .hof-card--legendary .hof-card__name { font-size: 1.25rem; }
  .hof-card--legendary .hof-card__icon { font-size: 2rem; }
}

.hof-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: .5rem;
}

.hof-card__icon {
  font-size: 1.5rem;
  color: var(--accent);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 45%, transparent));
}

.hof-card__rarity {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--accent);
  font-weight: 600;
}

.hof-card__name {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: .25rem;
}

.hof-card__desc {
  color: var(--ms-muted);
  font-size: .78rem;
  margin-bottom: .75rem;
  flex-grow: 1;
}

.hof-card__holder {
  font-weight: 700;
  color: var(--ms-gold-light);
  margin-bottom: .15rem;
}

.hof-card__record {
  font-size: 1.3rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin-bottom: .6rem;
}

.hof-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem .9rem;
  font-size: .7rem;
  color: var(--ms-muted);
  margin-top: auto;
}

/* ── Modal: podium + history ── */

.hof-modal {
  background: var(--ms-surface-raised);
  border: 1px solid var(--ms-border);
  color: var(--ms-text);
}

.hof-podium {
  background: var(--ms-surface);
  border-radius: var(--ms-radius);
  padding: .75rem;
}

.hof-podium__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .6rem;
  padding: .5rem .25rem;
  border-bottom: 1px solid var(--ms-border);
}
.hof-podium__row:last-child { border-bottom: none; }

.hof-podium__row--first {
  background: rgba(212,176,106,.08);
  border-radius: 8px;
  border-bottom: none;
}

.hof-podium__medal { font-size: 1.2rem; }
.hof-podium__name { font-weight: 600; }
.hof-podium__value {
  color: var(--ms-gold-light);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hof-history__title {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ms-muted);
  margin: 1rem 0 .5rem;
}

.hof-history__list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 220px;
  overflow-y: auto;
}
.hof-history__list li {
  padding: .4rem 0;
  border-bottom: 1px solid var(--ms-border);
  font-size: .85rem;
}
.hof-history__list li:last-child { border-bottom: none; }
.hof-history__item--past { color: var(--ms-muted); }

.hof-history__date {
  color: var(--ms-muted);
  font-size: .75rem;
  margin-right: .5rem;
}

@media (max-width: 576px) {
  .hof-card--legendary { grid-column: span 1; padding: 1.1rem; }
  .hof-hero__name { font-size: 1.4rem; }
}

/* ── Season cover: progress + live leader + live stat row ──────────────── */

.season-cover {
  background: var(--ms-surface-raised);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  padding: 1.5rem;
}

.season-cover__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.season-cover__eyebrow {
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ms-muted);
  margin-bottom: .25rem;
}

.season-cover__name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--ms-gold-light);
}

.season-cover__leader { text-align: right; }
.season-cover__leader-label {
  font-size: .72rem;
  color: var(--ms-muted);
  margin-bottom: .1rem;
}
.season-cover__leader-name {
  display: block;
  font-weight: 700;
  color: var(--ms-text);
  text-decoration: none;
}
.season-cover__leader-name:hover { color: var(--ms-gold-light); }
.season-cover__leader-score {
  color: var(--ms-gold-light);
  font-weight: 700;
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
}

.season-cover__progress-track {
  position: relative;
  height: 8px;
  border-radius: 99px;
  background: var(--ms-surface-alt);
  overflow: hidden;
  border: 1px solid var(--ms-border);
}
.season-cover__progress-fill {
  position: relative;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--ms-gold-dark), var(--ms-gold-light));
  transition: width .6s ease;
}
.season-cover__progress-fill::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.35) 50%, transparent 80%);
  background-size: 200% 100%;
  animation: achv-progress-shine 2.8s ease-in-out infinite;
}
.season-cover__progress-label {
  font-size: .76rem;
  color: var(--ms-muted);
  margin-top: .4rem;
}

.season-cover__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--ms-border);
}
.season-cover__stat {
  display: flex;
  flex-direction: column;
}
.season-cover__stat strong {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ms-text);
  font-variant-numeric: tabular-nums;
}
.season-cover__stat span {
  font-size: .72rem;
  color: var(--ms-muted);
}

/* ── Rivalry line inside a nomination card ── */

.season-rivalry {
  margin-top: .6rem;
  padding-top: .6rem;
  border-top: 1px dashed var(--ms-border);
  font-size: .78rem;
  color: var(--ms-text-dim);
}
.season-rivalry__gap {
  float: right;
  color: var(--ms-muted);
}

/* ── Season history — mini Hall of Fame per season ──────────────────────── */

.season-history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

.season-history-card {
  position: relative;
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  padding: 1.1rem;
}
.season-history-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--ms-gold);
  opacity: .6;
  border-radius: var(--ms-radius) var(--ms-radius) 0 0;
}

.season-history-card__name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: .6rem;
}

.season-history-card__champion {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  background: rgba(212,176,106,.08);
  border-radius: 8px;
  padding: .5rem .7rem;
  margin-bottom: .75rem;
  flex-wrap: wrap;
}
.season-history-card__champion-icon { font-size: 1.1rem; }
.season-history-card__champion-name {
  font-weight: 700;
  color: var(--ms-gold-light);
  text-decoration: none;
}
.season-history-card__champion-name:hover { text-decoration: underline; }

.season-history-card__awards {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.season-history-card__award {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
}
.season-history-card__award i { color: var(--ms-muted); width: 16px; text-align: center; }
.season-history-card__award-role { color: var(--ms-muted); min-width: 60px; }
.season-history-card__award-name { font-weight: 600; }

/* ============================================================
   Fantasy — fantasy/index.html
   ============================================================ */

.fantasy-hero {
  position: relative;
  text-align: center;
  padding: 2.25rem 1.5rem;
  border-radius: var(--ms-radius);
  background:
    radial-gradient(ellipse at center top, rgba(212,176,106,.14), transparent 65%),
    var(--ms-surface-raised);
  border: 1px solid var(--ms-border);
  margin-bottom: 1.5rem;
}

.fantasy-hero__icon { font-size: 2rem; margin-bottom: .5rem; }

.fantasy-hero__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800;
  font-size: 1.7rem;
  color: var(--ms-gold-light);
}

.fantasy-hero__subtitle {
  color: var(--ms-text-dim);
  font-size: .9rem;
  max-width: 480px;
  margin: .4rem auto 1.25rem;
}

.fantasy-hero__stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .6rem;
}

.fantasy-hero__stat {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: 99px;
  padding: .45rem 1.1rem;
  font-size: .85rem;
  color: var(--ms-text-dim);
}
.fantasy-hero__stat strong {
  color: var(--ms-gold-light);
  font-variant-numeric: tabular-nums;
}

/* ── All-time Fantasy leaderboard strip ── */

.fantasy-leaders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .75rem;
  margin-bottom: 1.5rem;
}

.fantasy-leader-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  padding: .85rem 1rem;
}

.fantasy-leader-card__medal { font-size: 1.4rem; }
.fantasy-leader-card__name { font-weight: 700; flex-grow: 1; }
.fantasy-leader-card__value {
  color: var(--ms-gold-light);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Giant active-series event cards ── */

.fantasy-events {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.fantasy-event-card {
  position: relative;
  background: linear-gradient(160deg, rgba(123,15,15,.12), var(--ms-surface-raised));
  border: 1px solid rgba(193,84,58,.35);
  border-radius: var(--ms-radius);
  padding: 1.5rem;
  overflow: hidden;
}

.fantasy-event-card__badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--ms-wine);
  color: var(--ms-text);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .25rem .7rem;
  border-radius: 99px;
  margin-bottom: .75rem;
}

.fantasy-event-card__name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800;
  font-size: 1.35rem;
  margin-bottom: .1rem;
}

.fantasy-event-card__parent {
  color: var(--ms-muted);
  font-size: .82rem;
  margin-bottom: 1rem;
}

.fantasy-event-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  margin-bottom: 1rem;
  font-size: .85rem;
}
.fantasy-event-card__stats span strong {
  color: var(--ms-gold-light);
  font-variant-numeric: tabular-nums;
}

.fantasy-event-card__picks {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1.1rem;
}
.fantasy-event-card__pick-chip {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: 99px;
  padding: .25rem .7rem;
  font-size: .76rem;
}

.fantasy-event-card .fantasy-user-draft {
  background: rgba(0,0,0,.2);
  border-radius: var(--ms-radius);
  padding: .6rem .85rem;
  margin-bottom: .9rem;
}

/* ── Regular tournament cards ── */

.fantasy-card {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius);
  padding: 1.1rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.fantasy-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .8rem;
  font-size: .78rem;
  color: var(--ms-muted);
  margin: .5rem 0 .75rem;
}
.fantasy-card__stats strong { color: var(--ms-text-dim); font-variant-numeric: tabular-nums; }

.fantasy-card__picks {
  font-size: .74rem;
  color: var(--ms-muted);
  margin-bottom: .75rem;
}

/* ── "Как это работает" strip ── */

.fantasy-how {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.fantasy-how__step {
  text-align: center;
  padding: 1rem;
}

.fantasy-how__icon {
  width: 44px; height: 44px;
  margin: 0 auto .6rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ms-surface-alt);
  border: 1px solid var(--ms-border);
  color: var(--ms-gold-light);
  font-size: 1.1rem;
}

.fantasy-how__label { font-size: .82rem; color: var(--ms-text-dim); }

/* ── Draft leaderboard: expandable "who picked whom" rows ── */

.fantasy-board-row td { transition: background-color .15s ease; }
.fantasy-board-row[data-bs-toggle="collapse"] { cursor: pointer; }
.fantasy-board-row[data-bs-toggle="collapse"]:hover td { background-color: var(--ms-surface-alt); }

.fantasy-board-row--rank-1 { border-left: 3px solid var(--ms-gold-light); }
.fantasy-board-row--rank-2 { border-left: 3px solid #B8B8B8; }
.fantasy-board-row--rank-3 { border-left: 3px solid var(--ms-wine-light); }

.fantasy-board-row__chevron {
  transition: transform .2s ease;
  color: var(--ms-muted);
}
.fantasy-board-row[aria-expanded="true"] .fantasy-board-row__chevron {
  transform: rotate(180deg);
}

.fantasy-board-detail__inner {
  background: rgba(0,0,0,.18);
  padding: .85rem 1.25rem;
}
.fantasy-board-detail__picks {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.fantasy-pick-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: 99px;
  padding: .3rem .4rem .3rem .8rem;
  font-size: .8rem;
}
.fantasy-pick-chip__points {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--ms-surface-alt);
  border-radius: 99px;
  padding: .1rem .55rem;
  font-size: .74rem;
}

@media (max-width: 576px) {
  .fantasy-hero__title { font-size: 1.3rem; }
  .fantasy-event-card__name { font-size: 1.1rem; }
}

/* ============================================================
   Mobile-first refinements
   ============================================================ */

@media (max-width: 576px) {
  .card-body { padding: 1rem; }
  .stat-card.p-3 { padding: .75rem !important; }
  .hero-section { padding: 1.25rem 0 .5rem; }
  .brand-monogram-lg { width: 52px; height: 52px; font-size: 1.4rem; }
  .table > thead > tr > th,
  .table > tbody > tr > td { padding: .5rem .6rem; }
  .container-xxl { padding-left: .75rem; padding-right: .75rem; }
}