/* ════════════════════════════════════════════════════════════════
   dark-theme.css — тёмная тема (body.dark)
   Содержание:
   1.  Переменные темы
   2.  Фоновые пятна
   3.  Модальные окна (overlay)
   4.  Игровой стол
   5.  Секции и панель имён
   6.  Заголовки и панель настроек
   7.  Шестерёнки меню
   8.  Инпуты и поля ввода
   9.  Ветер раунда
   10. Таблицы данных
   11. Score cards
   12. История
   13. Round cards
   14. Маджонг-индикаторы и плитки
   15. Заголовки сводки
   16. Кнопки действий
   17. Правила
   18. Контент модалок
   19. Меню и иконки темы
   20. Калькулятор руки
   21. Коронка и glow
   22. Панель меню
   23. Edit-history и toast
   24. Серверные игры
   25. Подсветка якорей правил
   26. Адаптив ≤768px
   27. @keyframes
   ════════════════════════════════════════════════════════════════ */

/* ── 1. Переменные темы ── */

body.dark {
  --color-bg: #151a22;
  --color-section: rgba(21, 26, 34, 0.75);
  --color-text: #c2bbbe;
  --color-text-muted: #9aa8bc;
  --color-heading: #c2bbbe;
  --color-surface: #151a22;
  --color-surface-alt: rgb(33 41 56 / 70%);
  --color-panel: #2b3547;
  --color-border: #3c4a61;
  --color-input-bg: #2b3547;
  --color-input-text: #f1f5fb;
  --color-button-text: #cbd3df;
  --color-shadow: rgba(0, 0, 0, 0.5);
  --color-section-shadow: rgba(24, 23, 23, 0.836);
  --color-section-box-shadow: 0px 1px 1px 2px var(--color-section-shadow);
  --elev-1:
    0 1px 2px rgb(0 0 0 / 18%),
    0 1px 1px rgb(0 0 0 / 12%);
  --elev-2:
    0 2px 10px -2px rgb(0 0 0 / 28%),
    0 1px 3px rgb(0 0 0 / 16%);
  --elev-3:
    0 12px 28px -10px rgb(0 0 0 / 42%),
    0 4px 12px -4px rgb(0 0 0 / 24%);
  --surface-glass: rgb(33 41 56 / 78%);
  --surface-glass-border: rgb(255 255 255 / 8%);
  --surface-glass-shadow:
    inset 0 1px 0 rgb(255 255 255 / 8%),
    0 -10px 24px -12px rgb(0 0 0 / 28%);
  --color-teal-accent: #5eadcc;
  --color-scores: #38bdf8;
  --color-scores-deep: #179ed3;
  --color-scores-soft: #7dd3fc;
  --color-timeline-dot: #aab6c6cc;
  --color-settings-active: #e0bc51;
  --color-menu-label: #c2bbbe;
  --color-menu-icon: var(--color-menu-label);
  --color-menu-icon-hover: #e0bc51;
  --color-menu-label-hover: #e0bc51;
  --color-menu-item-hover-bg: #343f52;
  --menu-item-hover-inset-y: 3px;
  --menu-item-hover-inset-x: 8px;
  --menu-item-hover-inset-right: 4px;
  --menu-hover-duration: 0.48s;
  --menu-hover-ease: cubic-bezier(0.33, 1, 0.68, 1);
  --color-grid-head-round: #1f7a53;
  --color-grid-head-scores: #1378a0;
  --color-grid-head-scores-text: #ffffff;
  --color-grid-head-history: #e0bc51;
  --color-gold-light: #4a422e;
  --color-gold: #e0bc51;
  --color-modal-backdrop: rgba(0, 0, 0, 0.55);
  --color-positive: #81c784;
  --color-negative: #ef9a9a;
  --color-payment: #ff8a80;
  --color-blue-muted: #5a6b88;
  --color-delta-positive-bg: linear-gradient(135deg, rgb(27 94 32 / 43%) 0%, rgb(46 125 50 / 61%) 100%);
  --color-delta-negative-bg: linear-gradient(135deg, rgb(183 28 28 / 21%) 0%, rgb(198 40 40 / 45%) 100%);
  --color-delta-zero-bg: linear-gradient(135deg, #2b3547 0%, #212938 100%);
  --color-delta-positive-shadow: rgba(129, 199, 132, 0.22);
  --color-delta-negative-shadow: rgba(239, 154, 154, 0.22);
  --scrollbar-track: var(--color-panel);
  --scrollbar-thumb: var(--color-blue-muted);
  --scrollbar-thumb-hover: var(--color-teal-accent);
  --scrollbar-thumb-border: var(--color-panel);
  
  background: var(--color-bg);
  color: var(--color-text);
  /* overflow: hidden; */
}

/* ── 2. Фоновые пятна ── */

body.dark .background-spots {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

body.dark .spot {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform, top, left;
}

body.dark .spot-1 {
  background: radial-gradient(circle, rgba(130, 110, 235, 0.72) 0%, rgba(90, 70, 200, 0.3) 50%, transparent 80%);
}

body.dark .spot-2 {
  background: radial-gradient(circle, rgba(235, 95, 145, 0.66) 0%, rgba(200, 60, 115, 0.3) 50%, transparent 80%);
}

body.dark .spot-3 {
  background: radial-gradient(circle, rgba(70, 215, 175, 0.6) 0%, rgba(40, 170, 140, 0.3) 50%, transparent 80%);
}

body.dark .spot-4 {
  background: radial-gradient(circle, rgba(85, 175, 250, 0.66) 0%, rgba(50, 130, 220, 0.3) 50%, transparent 80%);
}

body.dark .spot-5 {
  background: radial-gradient(circle, rgba(240, 200, 95, 0.55) 0%, rgba(210, 170, 60, 0.24) 50%, transparent 80%);
}

/* ── 3. Модальные окна (overlay) ── */

body.dark .modal {
  background-color: var(--color-modal-backdrop);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
}

body.dark #modalOverlayRules.modal--layered {
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ── 4. Игровой стол ── */

body.dark .mahjong-table {
  border-bottom: 1px solid #3c4a61;
}

body.dark .mahjong-table__turns {
  color: rgb(159 212 234 / 52%);
}

body.dark .mahjong-table__board {
  box-shadow: 0 10px 24px rgb(0 0 0 / 35%);
}

body.dark .mahjong-table__felt {
  background:
    radial-gradient(circle at 50% 35%, rgb(255 255 255 / 6%) 0%, transparent 48%),
    radial-gradient(circle at 18% 78%, rgb(0 0 0 / 16%) 0%, transparent 34%),
    linear-gradient(160deg, #1f684c 0%, #195a41 38%, #124832 100%);
  border-color: #ffd166;
  box-shadow:
    inset 0 0 0 2px rgb(255 235 190 / 10%),
    inset 0 18px 36px rgb(0 0 0 / 22%);
}

body.dark .mahjong-table__center {
  background:
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 5%) 0%, transparent 62%),
    rgb(0 0 0 / 18%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%);
}

body.dark .mahjong-table label {
  color: var(--color-heading);
  background: #615a49f2;
  box-shadow: 0 1px 2px rgb(0 0 0 / 28%);
}

/* ── 5. Секции и панель имён ── */

body.dark .section {
  background-color: var(--color-section);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid rgb(255 255 255 / 12%);
  box-shadow: inset 0 1px 0 var(--color-section-shadow);
}

body.dark .playerNames__curtain {
  background: var(--color-bg);
  backdrop-filter: none;
}

body.dark.game-started .playerNames__curtain {
  background-color: #2129389c;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

body.dark .playerNames__actions {
  background: rgb(33 41 56 / 78%);
  border-color: #3c4a61;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

/* ── 6. Заголовки и панель настроек ── */

body.dark h2,
body.dark .section h2,
body.dark .playerNames h2,
body.dark .settings-panel-title__text {
  color: var(--color-heading);
}

body.dark .settings-panel-title__gear,
body.dark .settings-panel-title__cog--small {
  color: var(--color-heading);
  -webkit-text-stroke: 0;
  text-shadow: none;
}





/* ── 7. Шестерёнки меню ── */

body.dark .hamburger.open,
body.dark .hamburger.open:hover,
body.dark .menu-wrap:hover .hamburger.open,
body.dark .menu-wrap:hover .hamburger.open:hover,
body.dark .hamburger.open .settings-icon,
body.dark .hamburger.open .settings-icon__cog--main {
  color: var(--color-settings-active);
}

body.dark .hamburger.open .settings-icon__cog--small {
  color: #f0d078;
}





body.dark .settings-icon__cog--small {
  color: #d4a84a;
  -webkit-text-stroke: 0.7px rgb(100 70 8 / 65%);
  paint-order: stroke fill;
}





body.dark .hamburger.open .settings-icon__cog--main {
  -webkit-text-stroke: 1.45px rgb(90 62 6 / 90%);
  paint-order: stroke fill;
  text-shadow:
    0 0 1px rgb(80 55 5 / 65%),
    0 0 4px rgb(60 40 4 / 35%);
}

body.dark .hamburger.open .settings-icon__cog--small {
  -webkit-text-stroke: 1.1px rgb(90 62 6 / 85%);
  text-shadow: 0 0 2px rgb(80 55 5 / 50%);
}

body.dark .settings-icon.press-once .settings-icon__cog--main {
  -webkit-text-stroke: 1.45px rgb(90 62 6 / 90%);
  paint-order: stroke fill;
  text-shadow:
    0 0 1px rgb(80 55 5 / 70%),
    0 0 4px rgb(60 40 4 / 40%);
}

body.dark .settings-icon.press-once .settings-icon__cog--small {
  -webkit-text-stroke: 1.1px rgb(90 62 6 / 85%);
  paint-order: stroke fill;
  text-shadow: 0 0 2px rgb(80 55 5 / 55%);
}

/* ── 8. Инпуты и поля ввода ── */

body.dark select,
body.dark input[type="text"],
body.dark input[type="number"] {
  background-color: var(--color-input-bg);
  color: var(--color-input-text);
  border-color: var(--color-border);
}

body.dark .playerNames .mahjong-table input[type="text"] {
  border: 2px solid #5e5748;
}

body.dark.game-started .playerNames .mahjong-table input[type="text"] {
  background-color: #ffffff5c;
}

body.dark .playerNames .mahjong-table input[type="text"]:focus {
  border-width: 2px;
  border-color: var(--color-green);
}

/* ── 9. Ветер раунда ── */

/* body.dark #roundWindTitle {
  background-color: var(--color-panel);
} */

body.dark .roundWind-title__icons {
  color: #8aa7d8;
}

/* ── 10. Таблицы данных ── */











/* ── 11. Score cards ── */

body.dark .score-card {
  border-color: color-mix(in srgb, var(--color-scores) 28%, var(--color-border));
  background: var(--color-surface-alt);
  box-shadow:
    var(--elev-2),
    inset 0 1px 0 rgb(255 255 255 / 6%);
}

body.dark .score-card__underlay {
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--color-scores) 40%, #4a5c70) 0%,
      color-mix(in srgb, var(--color-scores) 20%, transparent) 48%,
      rgb(21 26 34 / 22%) 100%
    ),
    linear-gradient(rgb(6 8 12 / 38%)),
    url("../img/patterns/score-card-underlay-place-2.svg?v=5") right top / cover no-repeat;
  filter: brightness(1.1);
}

body.dark .score-card--place-2 .score-card__underlay {
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--color-scores) 40%, #4a5c70) 0%,
      color-mix(in srgb, var(--color-scores) 20%, transparent) 48%,
      rgb(21 26 34 / 22%) 100%
    ),
    linear-gradient(rgb(6 8 12 / 38%)),
    url("../img/patterns/score-card-underlay-place-2.svg?v=5") right top / cover no-repeat;
}

body.dark .score-card--place-3 .score-card__underlay {
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--color-scores) 40%, #4a5c70) 0%,
      color-mix(in srgb, var(--color-scores) 20%, transparent) 48%,
      rgb(21 26 34 / 22%) 100%
    ),
    linear-gradient(rgb(6 8 12 / 38%)),
    url("../img/patterns/score-card-underlay-place-3.svg?v=5") right top / cover no-repeat;
}

body.dark .score-card--place-4 .score-card__underlay {
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--color-scores) 40%, #4a5c70) 0%,
      color-mix(in srgb, var(--color-scores) 20%, transparent) 48%,
      rgb(21 26 34 / 22%) 100%
    ),
    linear-gradient(rgb(6 8 12 / 38%)),
    url("../img/patterns/score-card-underlay-place-4.svg?v=5") right top / cover no-repeat;
}

body.dark .score-card--leader .score-card__underlay {
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--color-gold) 38%, #5a5240) 0%,
      color-mix(in srgb, var(--color-gold) 18%, transparent) 48%,
      rgb(21 26 34 / 18%) 100%
    ),
    linear-gradient(rgb(6 8 12 / 34%)),
    url("../img/patterns/score-card-underlay-leader.svg?v=8") right top / cover no-repeat;
  background-position: right top;
}

body.dark .score-card--leader {
  border-width: 2px;
  border-color: #e0bc51;
  box-shadow:
    var(--elev-2),
    0 0 0 1px rgb(224 188 81 / 34%),
    0 0 22px rgb(224 188 81 / 18%),
    inset 0 1px 0 rgb(255 255 255 / 10%);
}

body.dark .score-card--place-2 {
  background: 
    linear-gradient(165deg, color-mix(in srgb, var(--color-scores) 52%, #4a5c70) 0%, 
    color-mix(in srgb, #006a99 28%, transparent) 48%, rgb(21 26 34 / 22%) 100%), 
    linear-gradient(rgb(6 8 12 / 38%)), url(../img/patterns/score-card-underlay-place-2.svg?v=5) right top / cover no-repeat;
  border-width: 2px;
  border-color: #b0bac6;
  box-shadow:
    var(--elev-2),
    0 0 0 2px rgb(176 186 198 / 26%),
    inset 0 1px 0 rgb(255 255 255 / 8%);
}

body.dark .score-card--place-3 {
  background: 
    linear-gradient(165deg, color-mix(in srgb, var(--color-scores) 52%, #4a5c70) 0%, 
    color-mix(in srgb, #006a99 28%, transparent) 48%, rgb(21 26 34 / 22%) 100%), 
    linear-gradient(rgb(6 8 12 / 38%)), url(../img/patterns/score-card-underlay-place-2.svg?v=5) right top / cover no-repeat;
  border-width: 2px;
  border-color: #d08a4a;
  box-shadow:
    var(--elev-2),
    0 0 0 2px rgb(208 138 74 / 26%),
    inset 0 1px 0 rgb(255 255 255 / 8%);
}

body.dark .score-card--place-4 {
  background: 
    linear-gradient(165deg, color-mix(in srgb, var(--color-scores) 52%, #4a5c70) 0%, 
    color-mix(in srgb, #006a99 28%, transparent) 48%, rgb(21 26 34 / 22%) 100%), 
    linear-gradient(rgb(6 8 12 / 38%)), url(../img/patterns/score-card-underlay-place-2.svg?v=5) right top / cover no-repeat;
  border-width: 2px;
  border-color: #8f98a3;
  box-shadow:
    var(--elev-2),
    0 0 0 2px rgb(143 152 163 / 26%),
    inset 0 1px 0 rgb(255 255 255 / 8%);
}

body.dark .score-card__body {
  background: var(--surface-glass);
  border-color: var(--surface-glass-border);
  box-shadow: var(--surface-glass-shadow);
}

body.dark .score-card--leader .score-card__value {
  color: var(--color-gold);
}

body.dark .score-card__leader-orbit {
  border-color: rgba(199, 149, 12, 0.281); 
}



body.dark .score-card__leader-icons .score-card__leader-crown {
  color: var(--color-gold);
}

body.dark .score-card__leader-icons .score-card__leader-spark--1 {
  color: var(--color-gold);
}

body.dark .score-card__leader-icons .score-card__leader-spark--2 {
  color: #fff1b0;
  filter: drop-shadow(0 0 3px rgb(224 188 81 / 85%));
}

body.dark .score-card__leader-icons .score-card__leader-spark--3 {
  color: #f0d078;
}

@media (hover: hover) {
  body.dark .score-card:hover {
    border-color: color-mix(in srgb, var(--color-scores) 40%, var(--color-border));
    box-shadow:
      var(--elev-3),
      inset 0 1px 0 rgb(255 255 255 / 8%);
  }

  body.dark .score-card--leader:hover {
    border-color: #f0d06a;
    box-shadow:
      var(--elev-3),
      0 0 0 1px rgb(224 188 81 / 40%),
      0 0 28px rgb(224 188 81 / 22%),
      inset 0 1px 0 rgb(255 255 255 / 12%);
  }

  body.dark .score-card--place-2:hover {
    border-color: #c5ced8;
    box-shadow:
      var(--elev-3),
      0 0 0 2px rgb(176 186 198 / 34%),
      inset 0 1px 0 rgb(255 255 255 / 10%);
  }

  body.dark .score-card--place-3:hover {
    border-color: #e09a58;
    box-shadow:
      var(--elev-3),
      0 0 0 2px rgb(208 138 74 / 34%),
      inset 0 1px 0 rgb(255 255 255 / 10%);
  }

  body.dark .score-card--place-4:hover {
    border-color: #a5aeb8;
    box-shadow:
      var(--elev-3),
      0 0 0 2px rgb(143 152 163 / 34%),
      inset 0 1px 0 rgb(255 255 255 / 10%);
  }
}

body.dark .score-card__name {
  border-color: transparent;
  background: transparent;
  color: #ffffff;
}

body.dark .score-card--leader .score-card__name {
  border-color: transparent;
  background: transparent;
  color: #ffffff;
}

/* ── 12. История ── */

body.dark #history {
  --history-timeline-color: var(--color-timeline-dot);
  --history-timeline-line: rgb(170 182 198 / 32%);
}

body.dark .history-timeline-dot {
  --history-timeline-ring-bg: var(--color-surface-alt);
}

body.dark .history-round-title {
  color: var(--color-heading);
}

body.dark .history-empty {
  border-color: #2e394b;
  color: var(--color-text-muted);
}

body.dark .historyScore-title__icons .historyScore-title__clock {
  color: var(--color-gold);
}

body.dark .historyScore-title__icons .historyScore-title__dot {
  color: #f0d078;
}

body.dark .historyScore-title__icons .historyScore-title__dot--2 {
  color: #d4a84a;
}

body.dark #history .round-group {
  background: none;
  box-shadow: none;
}

body.dark .history-timeline-rail .history-timeline-dot {
  --history-timeline-ring-bg: #191e27;
}

body.dark .history-round-body {
  background: var(--color-surface-alt);
  box-shadow: var(--color-section-box-shadow);
  border-color: rgb(52 211 153 / 18%);
}

body.dark .history-player-card {
  background: var(--color-surface-alt);
  border-color: color-mix(in srgb, var(--color-grid-head-round) 28%, #2e394b);
  box-shadow:
    var(--elev-2),
    inset 0 1px 0 rgb(255 255 255 / 6%);
}

body.dark .history-player-card--winner {
  background: var(--color-surface-alt);
  border-color: rgb(224 188 81 / 36%);
  box-shadow:
    var(--elev-2),
    0 0 0 1px rgb(224 188 81 / 16%),
    0 0 20px rgb(224 188 81 / 16%),
    inset 0 1px 0 rgb(255 255 255 / 8%);
}

body.dark .history-player-card--plain::before,
body.dark .history-player-card--winner::before {
  background-size: auto, auto, cover;
  background-position: center, center, calc(100% + 0px) 25%;
  filter: brightness(1.1);
}

body.dark .history-player-card--plain::before {
  background-image:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--color-grid-head-round) 40%, #456054) 0%,
      color-mix(in srgb, var(--color-grid-head-round) 20%, transparent) 48%,
      rgb(21 26 34 / 22%) 100%
    ),
    linear-gradient(rgb(6 8 12 / 38%)),
    url("../img/patterns/history-card-underlay.svg?v=11");
}

body.dark .history-player-card--winner::before {
  background-image:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--color-gold) 38%, #5a5240) 0%,
      color-mix(in srgb, var(--color-gold) 18%, transparent) 48%,
      rgb(21 26 34 / 18%) 100%
    ),
    linear-gradient(rgb(6 8 12 / 34%)),
    url("../img/patterns/history-card-underlay-winner.svg?v=14");
}

body.dark .edit-history-card {
  background: var(--color-surface-alt);
  border-color: color-mix(in srgb, var(--color-grid-head-round) 28%, #2e394b);
  box-shadow:
    var(--elev-2),
    inset 0 1px 0 rgb(255 255 255 / 6%);
}

body.dark .edit-history-card--winner {
  background: var(--color-surface-alt);
  border-color: rgb(224 188 81 / 36%);
  box-shadow:
    var(--elev-2),
    0 0 0 1px rgb(224 188 81 / 16%),
    0 0 20px rgb(224 188 81 / 16%),
    inset 0 1px 0 rgb(255 255 255 / 8%);
}

body.dark .history-player-card__stats {
  background: var(--surface-glass);
  border-color: var(--surface-glass-border);
  box-shadow: var(--surface-glass-shadow);
}

body.dark .history-player-card .score-delta.positive {
  background: rgb(46 125 50 / 22%);
}

body.dark .history-player-card .score-delta.negative {
  background: rgb(198 40 40 / 22%);
}

body.dark .history-player-card .score-delta.zero {
  background: rgb(43 53 71 / 90%);
}

body.dark .history-player-card__wind {
  color: #ffffff;
  border-color: transparent;
  background: transparent;
}

body.dark .history-round-body > .history-edit-btn {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
}

body.dark .history-round-body > .history-edit-btn:hover {
  background: rgb(224 188 81 / 14%);
  color: var(--color-gold);
}

body.dark .history-round-body > .history-delete-btn {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
}

body.dark .history-round-body > .history-delete-btn:hover {
  background: rgb(175 76 76 / 18%);
  color: #ff8a80;
}

/* ── 13. Round cards ── */

body.dark #roundTable.round-cards {
  background-color: var(--color-surface-alt);
  box-shadow: var(--color-section-box-shadow);
}

body.dark .round-card {
  background: var(--color-surface-alt);
  border-color: color-mix(in srgb, var(--color-grid-head-round) 28%, #2e394b);
  box-shadow:
    var(--elev-2),
    inset 0 1px 0 rgb(255 255 255 / 6%);
}

body.dark .round-card__underlay {
  background:
  linear-gradient(165deg, color-mix(in srgb, #185d3f 48%, #4a9572) 0%, 
  color-mix(in srgb, #17412f 28%, transparent) 48%, rgb(255 255 255 / 28%) 100%), 
  url(../img/patterns/round-card-underlay.svg?v=12) right top / cover no-repeat;
}

body.dark .round-card.selected-winner .round-card__underlay {
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--color-gold) 38%, #5a5240) 0%,
      color-mix(in srgb, var(--color-gold) 18%, transparent) 48%,
      rgb(21 26 34 / 18%) 100%
    ),
    linear-gradient(rgb(6 8 12 / 34%)),
    url("../img/patterns/round-card-underlay-winner.svg?v=14") right top / cover no-repeat;
  filter: brightness(1.08);
}

body.dark .round-card__body {
  background: var(--surface-glass);
  border-color: var(--surface-glass-border);
  box-shadow: var(--surface-glass-shadow);
}

@media (hover: hover) {
  body.dark .round-card:hover {
    border-color: color-mix(in srgb, var(--color-grid-head-round) 40%, #2e394b);
    box-shadow:
      var(--elev-3),
      inset 0 1px 0 rgb(255 255 255 / 8%);
  }

  body.dark .round-card.selected-winner:hover {
    border-color: rgb(224 188 81 / 40%);
    box-shadow:
      var(--elev-3),
      0 0 0 1px rgb(224 188 81 / 16%),
      0 0 24px rgb(224 188 81 / 20%),
      inset 0 1px 0 rgb(255 255 255 / 10%);
  }
}

body.dark .round-card.selected-winner {
  border-color: rgb(224 188 81 / 36%);
  background: var(--color-surface-alt);
  box-shadow:
    var(--elev-2),
    0 0 0 1px rgb(224 188 81 / 18%),
    0 0 20px rgb(224 188 81 / 16%),
    inset 0 1px 0 rgb(255 255 255 / 8%);
  transform: translateY(-2px);
}

body.dark .round-card__mahjong-btn .mahjong-radio-input:checked + .round-card__mahjong-face {
  border-style: solid;
  border-color: rgb(225 175 28 / 56%);
  background-color: rgb(224 188 81 / 12%);
  box-shadow: 0 0 0 2px rgb(80 74 55);
}

body.dark .round-card__mahjong-btn .mahjong-radio-input:checked + .round-card__mahjong-face::before {
  opacity: 0.72;
}

body.dark .round-card::after {
  background:
    linear-gradient(
      145deg,
      rgb(255 255 255 / 24%) 0%,
      rgb(255 255 255 / 10%) 7%,
      rgb(255 255 255 / 3%) 13%,
      transparent 5%
    ),
    linear-gradient(
      145deg,
      transparent 89%,
      rgb(255 255 255 / 2%) 90%,
      rgb(255 255 255 / 5%) 105%
    );
}

body.dark .round-card.selected-winner::after {
  background:
    linear-gradient(
      145deg,
      rgb(255 255 255 / 26%) 0%,
      rgb(255 248 220 / 12%) 7%,
      rgb(255 248 220 / 4%) 13%,
      transparent 20%
    ),
    linear-gradient(
      145deg,
      transparent 82%,
      rgb(224 188 81 / 6%) 90%,
      rgb(255 255 255 / 16%) 100%
    );
}

body.dark .score-card::after {
  background:
    linear-gradient(
      145deg,
      rgb(255 255 255 / 24%) 0%,
      rgb(255 255 255 / 10%) 7%,
      rgb(255 255 255 / 3%) 13%,
      transparent 5%
    ),
    linear-gradient(
      145deg,
      transparent 89%,
      rgb(255 255 255 / 2%) 90%,
      rgb(255 255 255 / 5%) 105%
    );
}

body.dark .round-card--selecting::before {
  background: linear-gradient(
    105deg,
    transparent 32%,
    rgb(255 255 255 / 6%) 42%,
    rgb(255 236 170 / 22%) 49%,
    rgb(255 255 255 / 28%) 50%,
    rgb(255 236 170 / 22%) 51%,
    rgb(255 255 255 / 6%) 60%,
    transparent 70%
  );
}

body.dark .round-card__tag--leader,
body.dark .round-card__tag--round {
  border-color: rgb(255 255 255 / 28%);
  background: rgb(0 0 0 / 30%);
  color: #ffffff;
}

body.dark .round-card__mahjong-face {
  background: color-mix(in srgb, var(--color-grid-head-round) 10%, #222a37);
  border-color: color-mix(in srgb, var(--color-grid-head-round) 28%, #3c4a61);
  border-style: dashed;
}

body.dark .round-card__mahjong-off {
  color: #94a3b8;
}

body.dark .round-card__mahjong-on {
  color: #e2e8f0;
}

body.dark .round-card__mahjong-btn:hover .mahjong-radio-input:not(:checked) + .round-card__mahjong-face {
  border-color: color-mix(in srgb, var(--color-grid-head-round) 42%, #3c4a61);
  background: color-mix(in srgb, var(--color-grid-head-round) 14%, #2a3445);
}

body.dark .round-card__score-tool {
  color: #94a3b8;
}

body.dark .round-card__score-tool:hover {
  color: #e2e8f0;
}

body.dark .round-card__score-tool--hand:hover {
  background: color-mix(in srgb, var(--color-grid-head-round) 18%, transparent);
  border-color: color-mix(in srgb, var(--color-grid-head-round) 42%, transparent);
  color: #9fd9b8;
}

body.dark .round-card__score-tool--number:hover {
  background: color-mix(in srgb, var(--color-blue) 18%, transparent);
  border-color: color-mix(in srgb, var(--color-blue) 42%, transparent);
  color: #9fd0e6;
}

body.dark .round-card__score-tool--number.is-active {
  background: #2a3445;
  border-color: color-mix(in srgb, var(--color-blue) 38%, transparent);
  color: #9fd0e6;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-blue) 22%, transparent);
}

/* ── 14. Маджонг-индикаторы и плитки ── */



body.dark .mahjong-tile-icon {
  border-color: rgb(224 188 81 / 62%);
  border-bottom-color: rgb(184 150 58 / 88%);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 18%) 0%, transparent 32%),
    linear-gradient(180deg, #fffef9 0%, #f3e3b3 52%, #dfc88a 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 28%),
    0 1px 0 rgb(0 0 0 / 18%);
}

body.dark .mahjong-tile-icon__face {
  box-shadow: inset 0 0 0 1px rgb(214 193 140 / 22%);
}

body.dark .mahjong-tile-icon__label {
  color: #c62828;
  text-shadow: 0 1px 0 rgb(255 255 255 / 30%);
}

body.dark .history-winner-tile.mahjong-tile-icon {
  border-color: #e0bc51;
  border-bottom-color: #c9a034;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 55%) 0%, transparent 34%),
    linear-gradient(180deg, #fffef6 0%, #f7e8b8 48%, #e8ce78 100%);
  box-shadow:
    0 1px 2px rgb(0 0 0 / 45%),
    0 3px 8px rgb(0 0 0 / 32%),
    inset 0 1px 0 rgb(255 255 255 / 70%);
}

body.dark .history-winner-tile .mahjong-tile-icon__face {
  box-shadow: inset 0 0 0 1px rgb(200 160 60 / 40%);
}

body.dark .history-winner-tile .mahjong-tile-icon__label {
  color: #b71c1c;
  text-shadow: 0 1px 0 rgb(255 255 255 / 45%);
}

body.dark .round-card__mahjong-tile {
  opacity: 0.2;
}

body.dark .round-card__mahjong-btn .mahjong-radio-input:checked + .round-card__mahjong-face .round-card__mahjong-tile {
  opacity: 1;
  filter: none;
}





/* ── 15. Заголовки сводки ── */

body.dark .scoreSummary-title__icons .scoreSummary-title__trophy {
  color: #6392ab;
  text-shadow:
    0 1px 0 rgb(255 255 255 / 16%),
    0 2px 4px rgb(95 118 140 / 28%);
}

body.dark .scoreSummary-title__icons .scoreSummary-title__star {
  color: #e3eef8;
  text-shadow: 0 1px 2px rgb(95 118 140 / 22%);
}

body.dark .scoreSummary-title__icons .scoreSummary-title__star--2 {
  color: #e3eef8;
}

/* ── 16. Кнопки действий ── */

body.dark button {
  background-color: rgb(33 41 56 / 52%);
  border-color: rgb(255 255 255 / 12%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 8%),
    0 2px 8px -3px rgb(15 23 42 / 30%);
}

body.dark .modal-content button,
body.dark .modal-actions button {
  background-color: rgb(33 41 56 / 32%);
}

body.dark button.blue.is-muted {
  border-color: var(--color-blue-muted);
  color: var(--color-text-muted);
}

body.dark button.blue.is-muted:hover {
  background-color: rgb(90 107 136 / 25%);
  color: var(--color-text);
}

body.dark button.green {
  color: #d8f0e4;
  border-color: #3d9a6e;
}

body.dark button.green:hover {
  background-color: rgba(31, 122, 83, 0.28);
  color: #9fd9b8;
}

body.dark button.red {
  color: #ffe8e8;
  border-color: #c07070;
}

body.dark button.red:hover {
  background-color: rgba(168, 90, 90, 0.28);
  color: #f0b8b8;
}

body.dark button.blue {
  color: #dceef8;
  border-color: #4ea3c4;
}

body.dark button.blue:hover {
  background-color: rgba(42, 143, 181, 0.28);
  color: #9fd0e6;
}

/* ── 18. Контент модалок ── */

body.dark .modal-content {
  background-color: #151a225e;
  border-color: rgb(255 255 255 / 12%);
}

body.dark .modal-window-header {
  background: var(--color-panel);
  border-bottom-color: var(--color-border);
}

body.dark .modal-content--window.modal-content--rules .modal-window-header,
body.dark .modal-content--window.modal-content--hand-calculator .modal-window-header,
body.dark .modal-content--window.modal-content--rules .modal-window-header .modal-title,
body.dark .modal-content--window.modal-content--hand-calculator .modal-window-header .modal-title {
  box-shadow: none;
  text-shadow: none;
}

body.dark .modal-window-control {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

body.dark .modal-window-header .modal-window-control:hover {
  background: var(--color-panel);
  color: var(--color-text);
}

body.dark .modal-title {
  color: var(--color-text);
}

body.dark .modal-text {
  background-color: var(--color-panel);
  color: #ffffff;
}

body.dark .preview-row,
body.dark .preview-payment-row {
  background: var(--color-panel);
}

body.dark .preview-section-title,
body.dark .preview-player,
body.dark .edit-history-card__label {
  color: var(--color-text);
}

body.dark .preview-subtitle,
body.dark .preview-modal-note,
body.dark .preview-empty {
  color: var(--color-text-muted);
}

body.dark .preview-payment-amount {
  color: var(--color-payment);
}

body.dark .preview-total {
  color: var(--color-heading);
}

/* ── 19. Меню и иконки темы ── */

body.dark .hamburger {
  color: var(--color-menu-icon);
}

body.dark .reload-button,
body.dark .save-button,
body.dark .load-button,
body.dark .server-games-button,
body.dark .rules-button,
body.dark .theme-button {
  color: var(--color-menu-icon);
}

body.dark .theme-icon-svg--sun {
  color: var(--color-gold);
}

body.dark .theme-icon-svg--dusk {
  color: #c4a45a;
}

body.dark .theme-icon-svg--moon {
  color: #a8b8e0;
}

body.dark .theme-icon-stars {
  fill: var(--color-gold);
}

body.dark .reload-button:hover,
body.dark .save-button:hover,
body.dark .load-button:hover,
body.dark .server-games-button:hover,
body.dark .rules-button:hover {
  color: var(--color-menu-icon-hover);
}

body.dark .theme-button:hover {
  color: #a8b8e0;
}

body.dark .menu-wrap:hover .theme-button:hover .menu-item-label {
  color: #a8b8e0;
}

/* ── 20. Калькулятор руки ── */

body.dark .calc-dropdown {
  background: #1e25326b;
  border: 1px solid #151a22;
  border-top: 3px solid #ffd166;
}

body.dark .app-select__menu {
  background: #1e2532c9;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid #151a22;
  border-top: 3px solid #ffd166;
}

body.dark .app-select__trigger {
  background: var(--color-input-bg);
  color: var(--color-input-text);
  border-color: var(--color-border);
}

body.dark .app-select--wind .app-select__trigger {
  border: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.dark .app-select--header-wind .app-select__trigger,
body.dark .app-select--header-wind .app-select__trigger:hover,
body.dark .app-select--header-wind .app-select__trigger:focus-visible {
  background: transparent;
  color: inherit;
  border: none;
  box-shadow: none;
}

body.dark .app-select__option {
  color: var(--color-input-text);
}

body.dark .app-select__option,
body.dark .calc-dropdown button,
body.dark .score-entry-menu__item {
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.dark .app-select__option:hover,
body.dark .app-select__option:focus-visible {
  background: rgb(224 188 81 / 14%);
  color: #f3df9b;
}

body.dark .app-select__option.is-selected {
  background: #3a3220;
  color: #f3df9b;
}

body.dark .app-select__menu--hand-decomposition .app-select__option.is-selected {
  background: #3a3220;
  color: #f3df9b;
  box-shadow: inset 3px 0 0 var(--color-gold);
}

body.dark .app-select__menu--hand-decomposition .app-select__option:hover,
body.dark .app-select__menu--hand-decomposition .app-select__option:focus-visible {
  background: rgb(224 188 81 / 14%);
  color: #f3df9b;
}

body.dark .dropdown-button {
  background: rgb(58 50 32 / 58%);
  border-color: rgb(224 188 81 / 40%);
  color: var(--color-gold);
}



body.dark .dropdown-button:hover {
  background: rgb(74 64 40 / 64%);
  border-color: rgb(224 188 81 / 62%);
  color: #f3df9b;
}



body.dark .score-entry-button {
  background: rgb(34 42 55 / 58%);
  border-color: #3c4a61;
  color: #cbd3df;
}

body.dark .score-entry-button:hover {
  background: rgb(224 188 81 / 14%);
  border-color: #3c4a61;
  color: #f3df9b;
}

body.dark .score-entry-button.is-active {
  background: rgb(224 188 81 / 24%);
  border-color: rgb(224 188 81 / 40%);
  color: #f3df9b;
}

body.dark .score-entry-menu {
  background: #1e2532c9;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-color: #3c4a61;
}

body.dark .score-entry-menu__item:hover,
body.dark .score-entry-menu__item:focus-visible {
  background: rgb(224 188 81 / 14%);
  color: #f3df9b;
}

body.dark .score-entry-menu__item[data-score-action="hand"] i,
body.dark .score-entry-menu__item[data-score-action="number"] i {
  color: #fb923c;
}

body.dark .hand-teaching-step:hover,
body.dark .hand-teaching-step--hover,
body.dark .hand-teaching-step--active {
  background: rgb(96 165 250 / 10%);
  border-color: rgb(96 165 250 / 24%);
}

body.dark .hand-teaching-step--active {
  box-shadow: inset 3px 0 0 #60a5fa;
}

body.dark .hand-condition input[type="checkbox"],
    body.dark .hand-teaching-toggle input[type="checkbox"] {
border-color: color-mix(in srgb, #fff 18%, var(--color-border));
  background: #151a22;
}

body.dark .hand-condition:hover,
    body.dark .hand-teaching-toggle:hover {
background: color-mix(in srgb, var(--color-teal-accent) 10%, #1e2532);
}

body.dark .hand-condition:has(input:checked),
    body.dark .hand-teaching-toggle:has(input:checked) {
background: color-mix(in srgb, var(--color-green) 16%, #1e2532);
}

body.dark .hand-condition--limited:has(input:checked) {
  background: color-mix(in srgb, var(--color-gold) 20%, #1e2532);
}

body.dark .hand-teaching-highlight {
  outline-color: #60a5fa;
  box-shadow: 0 0 0 4px rgb(96 165 250 / 16%);
}

body.dark .number-input-stepper {
  background: #222a37;
  border-color: #3c4a61;
}

body.dark .number-step-button {
  color: #cbd3df;
}

body.dark .number-step-button + .number-step-button {
  border-top-color: #3c4a61;
}

body.dark .number-step-button:hover {
  background: rgb(224 188 81 / 14%);
  color: #f3df9b;
}

body.dark .number-step-button:active {
  background: rgb(224 188 81 / 24%);
}

body.dark .dropdown-button.is-active {
  background: #b8942f;
  border-color: rgb(224 188 81 / 72%);
  color: #ffffff;
}

body.dark .hand-selected-tile,
body.dark .hand-tile-button {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 55%) 0%, rgb(255 255 255 / 12%) 32%, transparent 60%),
    linear-gradient(90deg, rgb(255 255 255 / 40%) 0%, transparent 12%, transparent 88%, rgb(120 90 20 / 16%) 100%),
    linear-gradient(180deg, #fffef9 0%, #f3e3b3 52%, #dfc88a 100%);
  border-color: rgb(224 188 81 / 62%);
  border-bottom-color: rgb(184 150 58 / 88%);
  box-shadow:
    inset 0 2px 2px rgb(255 255 255 / 40%),
    inset 1px 0 0 rgb(255 255 255 / 28%),
    inset -1px 0 0 rgb(120 90 20 / 14%),
    inset 0 -3px 4px rgb(120 90 20 / 18%),
    0 2px 0 rgb(0 0 0 / 30%),
    0 3px 0 rgb(0 0 0 / 14%),
    0 6px 14px rgb(0 0 0 / 26%);
}

body.dark .hand-selected-tile:hover,
body.dark .hand-tile-button:hover {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 62%) 0%, rgb(255 255 255 / 16%) 32%, transparent 60%),
    linear-gradient(90deg, rgb(255 255 255 / 44%) 0%, transparent 12%, transparent 88%, rgb(120 90 20 / 14%) 100%),
    linear-gradient(180deg, #fffef9 0%, #f3e3b3 52%, #dfc88a 100%);
  box-shadow:
    inset 0 2px 2px rgb(255 255 255 / 45%),
    inset 1px 0 0 rgb(255 255 255 / 32%),
    inset -1px 0 0 rgb(120 90 20 / 12%),
    inset 0 -3px 4px rgb(120 90 20 / 16%),
    0 3px 0 rgb(0 0 0 / 28%),
    0 4px 0 rgb(0 0 0 / 12%),
    0 7px 16px rgb(0 0 0 / 26%);
}

body.dark .hand-group-tile-face {
  border-color: rgb(224 188 81 / 55%);
  border-bottom-color: rgb(184 150 58 / 75%);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 16%) 0%, transparent 35%),
    linear-gradient(180deg, #fffef9 0%, #f3e6c4 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 28%),
    0 1px 4px rgb(0 0 0 / 22%);
}

body.dark .hand-tile-count,
body.dark .hand-selected-tile small {
  border-color: #fffdf7;
  box-shadow: 0 2px 8px rgb(0 0 0 / 45%);
}

body.dark .hand-selected-group__state--closed {
  color: #9fd4ea;
  border-color: rgb(94 173 204 / 28%);
  background: rgb(94 173 204 / 12%);
}

body.dark .hand-selected-group__state--open {
  color: #b8e6c0;
  border-color: rgb(76 175 80 / 32%);
  background: rgb(76 175 80 / 14%);
}

body.dark .hand-selected-tile--concealed:not(.hand-selected-tile--flip),
body.dark .hand-selected-tile--concealed:not(.hand-selected-tile--flip)::before {
  border-color: #1f5c48;
  border-bottom-color: #102820;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 12%) 0%, transparent 26%),
    linear-gradient(90deg, rgb(255 255 255 / 8%) 0%, transparent 14%, transparent 86%, rgb(0 0 0 / 20%) 100%),
    linear-gradient(165deg, #245646 0%, #163a2d 58%, #102820 100%);
  box-shadow:
    inset 0 2px 2px rgb(255 255 255 / 8%),
    inset 1px 0 0 rgb(255 255 255 / 6%),
    inset -1px 0 0 rgb(0 0 0 / 14%),
    inset 0 -3px 4px rgb(0 0 0 / 22%),
    0 2px 0 rgb(0 0 0 / 28%),
    0 3px 0 rgb(0 0 0 / 12%),
    0 5px 10px rgb(0 0 0 / 20%);
}

body.dark .hand-selected-tile--concealed:not(.hand-selected-tile--flip)::before {
  border-color: rgb(122 196 166 / 42%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%);
}

body.dark .hand-selected-tile--concealed:not(.hand-selected-tile--flip):hover {
  border-color: #1f5c48;
  border-bottom-color: #102820;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 15%) 0%, transparent 26%),
    linear-gradient(90deg, rgb(255 255 255 / 10%) 0%, transparent 14%, transparent 86%, rgb(0 0 0 / 18%) 100%),
    linear-gradient(165deg, #2a604c 0%, #184032 58%, #123026 100%);
  box-shadow:
    inset 0 2px 2px rgb(255 255 255 / 9%),
    inset 1px 0 0 rgb(255 255 255 / 7%),
    inset -1px 0 0 rgb(0 0 0 / 13%),
    inset 0 -3px 4px rgb(0 0 0 / 20%),
    0 2px 0 rgb(0 0 0 / 26%),
    0 3px 0 rgb(0 0 0 / 10%),
    0 6px 12px rgb(0 0 0 / 22%);
}

body.dark .hand-selected-tile--flip:not(.hand-selected-tile--concealed) {
  border: none;
  box-shadow:
    0 2px 0 rgb(0 0 0 / 30%),
    0 3px 0 rgb(0 0 0 / 14%),
    0 6px 14px rgb(0 0 0 / 26%) !important;
}

body.dark .hand-selected-tile--flip.hand-selected-tile--concealed {
  border: none;
  box-shadow:
    0 2px 0 rgb(0 0 0 / 28%),
    0 3px 0 rgb(0 0 0 / 12%),
    0 5px 10px rgb(0 0 0 / 20%) !important;
}

body.dark .hand-selected-tile--flip:not(.hand-selected-tile--concealed):hover {
  border-color: transparent;
  box-shadow:
    0 3px 0 rgb(0 0 0 / 28%),
    0 4px 0 rgb(0 0 0 / 12%),
    0 7px 16px rgb(0 0 0 / 26%) !important;
}

body.dark .hand-selected-tile--flip.hand-selected-tile--concealed:hover {
  border-color: transparent;
  box-shadow:
    0 2px 0 rgb(0 0 0 / 26%),
    0 3px 0 rgb(0 0 0 / 10%),
    0 6px 12px rgb(0 0 0 / 22%) !important;
}

body.dark .hand-selected-tile--flip.hand-selected-tile--toggle-open:not(.hand-selected-tile--concealed):hover::after {
  background: rgb(94 173 204 / 42%);
  opacity: 0.65;
}

body.dark .hand-selected-tile--flip.hand-selected-tile--toggle-open:not(.hand-selected-tile--concealed):hover .hand-selected-tile__face--front::before {
  border-color: rgb(94 173 204 / 80%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 28%);
}

body.dark .hand-selected-tile__face--right,
body.dark .hand-selected-tile__face--left {
  border-bottom-color: #c1a351;
  background: linear-gradient(180deg, #fdfaf0 0%, #f0ddae 50%, #e0c78e 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%), inset -1px 0 0 rgb(120 90 20 / 14%), inset 1px 0 0 rgb(255 255 255 / 25%);
}

body.dark .hand-selected-tile__face--front {
  border: 1px solid rgb(224 188 81 / 62%);
  border-bottom-width: 3px;
  border-bottom-color: rgb(184 150 58 / 88%);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 55%) 0%, rgb(255 255 255 / 12%) 32%, transparent 60%),
    linear-gradient(90deg, rgb(255 255 255 / 40%) 0%, transparent 12%, transparent 88%, rgb(120 90 20 / 16%) 100%),
    linear-gradient(180deg, #fffef9 0%, #f3e3b3 52%, #dfc88a 100%);
  box-shadow:
    inset 0 2px 2px rgb(255 255 255 / 40%),
    inset 1px 0 0 rgb(255 255 255 / 28%),
    inset -1px 0 0 rgb(120 90 20 / 14%),
    inset 0 -3px 4px rgb(120 90 20 / 18%);
}

body.dark .hand-selected-tile__face--front::before {
  content: '';
  position: absolute;
  inset: 2px;
  border: 1px solid rgb(181 160 105 / 85%);
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%);
  pointer-events: none;
}

body.dark .hand-selected-tile__face--back {
  border: 1px solid #1f5c48;
  border-bottom-width: 3px;
  border-bottom-color: #102820;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 12%) 0%, transparent 26%),
    linear-gradient(90deg, rgb(255 255 255 / 8%) 0%, transparent 14%, transparent 86%, rgb(0 0 0 / 20%) 100%),
    linear-gradient(165deg, #245646 0%, #163a2d 58%, #102820 100%);
  box-shadow:
    inset 0 2px 2px rgb(255 255 255 / 8%),
    inset 1px 0 0 rgb(255 255 255 / 6%),
    inset -1px 0 0 rgb(0 0 0 / 14%),
    inset 0 -3px 4px rgb(0 0 0 / 22%);
}

body.dark .hand-selected-tile__face--back::before {
  content: '';
  position: absolute;
  inset: 2px;
  border: 1px solid rgb(122 196 166 / 42%);
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%);
  pointer-events: none;
}

body.dark .hand-selected-tile--flip:not(.hand-selected-tile--concealed):hover .hand-selected-tile__face--front {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 62%) 0%, rgb(255 255 255 / 16%) 32%, transparent 60%),
    linear-gradient(90deg, rgb(255 255 255 / 44%) 0%, transparent 12%, transparent 88%, rgb(120 90 20 / 14%) 100%),
    linear-gradient(180deg, #fffef9 0%, #f3e3b3 52%, #dfc88a 100%);
  box-shadow:
    inset 0 2px 2px rgb(255 255 255 / 40%),
    inset 1px 0 0 rgb(255 255 255 / 28%),
    inset -1px 0 0 rgb(120 90 20 / 14%),
    inset 0 -3px 4px rgb(120 90 20 / 18%);
}

body.dark .hand-selected-tile--flip.hand-selected-tile--concealed:hover .hand-selected-tile__face--back {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 15%) 0%, transparent 26%),
    linear-gradient(90deg, rgb(255 255 255 / 10%) 0%, transparent 14%, transparent 86%, rgb(0 0 0 / 18%) 100%),
    linear-gradient(165deg, #2a604c 0%, #184032 58%, #123026 100%);
}

body.dark .hand-selected-group--sequence {
  border-color: rgb(94 196 232 / 32%);
  background: color-mix(in srgb, var(--color-scores) 14%, #1e2532);
}

body.dark .hand-selected-group--triple {
  border-color: rgb(129 199 132 / 32%);
  background: color-mix(in srgb, var(--color-green) 14%, #1e2532);
}

body.dark .hand-selected-group--quad {
  border-color: rgb(224 188 81 / 36%);
  background: color-mix(in srgb, var(--color-gold) 16%, #1e2532);
}

body.dark .hand-selected-group--pair {
  border-color: rgb(239 154 154 / 32%);
  background: color-mix(in srgb, #af4c4c 14%, #1e2532);
}

body.dark .hand-selected-group--bonus,
body.dark .hand-selected-group--extra {
  border-color: rgb(94 196 232 / 24%);
  background: color-mix(in srgb, var(--color-teal-accent) 10%, #1e2532);
}

body.dark .hand-tile-picker .hand-tile-family--symbols {
  border-color: rgb(239 154 154 / 28%);
  border-left-color: #ef9a9a;
  /* background: color-mix(in srgb, #b71c1c 10%, #1e2532); */
}

body.dark .hand-tile-picker .hand-tile-family--bamboo {
  border-color: rgb(129 199 132 / 28%);
  border-left-color: #81c784;
  /* background: color-mix(in srgb, #2e7d32 10%, #1e2532); */
}

body.dark .hand-tile-picker .hand-tile-family--dots {
  border-color: rgb(100 181 246 / 28%);
  border-left-color: #64b5f6;
  /* background: color-mix(in srgb, #1565c0 10%, #1e2532); */
}

body.dark .hand-tile-picker .hand-tile-family--honors {
  border-color: rgb(94 196 232 / 24%);
  border-left-color: #fa944a;
  /* background: color-mix(in srgb, var(--color-teal-accent) 10%, #1e2532); */
}

body.dark .hand-tile-picker .hand-tile-group-divider {
  background: color-mix(in srgb, #5ec4e8 32%, var(--color-border));
}









body.dark .hand-group-tiles--sequence {
  border-color: rgb(94 196 232 / 28%);
  background: color-mix(in srgb, var(--color-scores) 12%, #1e2532);
}

body.dark .hand-group-tiles--triple {
  border-color: rgb(129 199 132 / 28%);
  background: color-mix(in srgb, var(--color-green) 12%, #1e2532);
}

body.dark .hand-group-tiles--quad {
  border-color: rgb(224 188 81 / 32%);
  background: color-mix(in srgb, var(--color-gold) 14%, #1e2532);
}

body.dark .hand-group-tiles--pair {
  border-color: rgb(239 154 154 / 28%);
  background: color-mix(in srgb, #af4c4c 12%, #1e2532);
}

body.dark .hand-result-limited {
  border-color: rgb(245 158 11 / 28%);
  background: color-mix(in srgb, #f59e0b 16%, #1e2532);
}

body.dark .hand-result-limited strong,
body.dark .hand-result-score--limited strong {
  color: #fbbf24;
}

body.dark .hand-rule-link {
  color: #5ec4e8;
}

body.dark .roundWind-title__needle-s {
  fill: color-mix(in srgb, rgb(255 255 255) 80%, transparent);
}

/* ── 21. Коронка и glow ── */

body.dark .crown-icon__img--light {
  display: none;
}

body.dark .crown-icon__img--dark {
  display: block;
}





/* ── 22. Панель меню ── */

body.dark .menu-wrap {
  background-color: var(--color-section);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow: inset 0 1px 0 var(--color-section-shadow);
  border: 1px solid rgb(255 255 255 / 12%);
}

body.dark .reload-button,
body.dark .save-button,
body.dark .load-button,
body.dark .server-games-button,
body.dark .rules-button,
body.dark .theme-button,
body.dark .hamburger {
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ── 23. Edit-history и toast ── */

body.dark .edit-history-card__mahjong .round-card__mahjong-face {
  background: var(--color-panel);
  border-color: rgb(255 255 255 / 12%);
}

body.dark .toast-notification {
  background-color: color-mix(in srgb, var(--color-toast) 80%, transparent);
  border-color: rgb(255 255 255 / 18%);
}

/* ── 24. Серверные игры ── */

body.dark .server-games-item--current {
  border-color: rgb(129 199 132 / 45%);
  background: linear-gradient(135deg, rgb(129 199 132 / 14%) 0%, rgb(129 199 132 / 5%) 100%);
  box-shadow: inset 0 0 0 1px rgb(129 199 132 / 20%);
}

body.dark .server-games-item--current:hover {
  border-color: rgb(129 199 132 / 55%);
  background: linear-gradient(135deg, rgb(129 199 132 / 18%) 0%, rgb(129 199 132 / 7%) 100%);
  box-shadow: inset 0 0 0 1px rgb(129 199 132 / 26%), 0 4px 14px rgb(0 0 0 / 18%);
}

body.dark .server-games-item__badge {
  background: rgb(129 199 132 / 18%);
  color: #a5d6a7;
}

body.dark .server-games-item__delete {
  color: #ef9a9a;
}

body.dark .server-games-item__delete:hover {
  background: rgb(239 154 154 / 14%);
  border-color: rgb(239 154 154 / 30%);
  color: #ffcdd2;
}

/* ── 26. Адаптив ≤768px ── */

@media (max-width: 768px) {
  body.dark .menu-wrap {
    background: rgba(21, 26, 34, 0.96);
    border: 1px solid var(--color-border);
  }
}

/* ── 17. Правила ── */

body.dark .rules-toc {
  background: var(--color-panel);
  border-color: rgb(255 255 255 / 10%);
  box-shadow: 0 8px 18px rgb(0 0 0 / 28%);
}

body.dark .rules-toc a {
  background: #151a22;
  border-color: #3c4a61;
  color: var(--color-text);
}

body.dark .rules-toc a:hover,
body.dark .rules-toc a:focus-visible {
  border-color: rgb(94 173 204 / 45%);
  color: var(--color-teal-accent);
}

body.dark .rules-subsection {
  /* background: rgb(255 255 255 / 3%); */
  border-color: rgb(255 255 255 / 8%);
}

body.dark .rules-wind-grid li,
body.dark .rules-flow-list > li {
  background: rgb(255 255 255 / 4%);
  border-color: rgb(255 255 255 / 8%);
}

body.dark .rules-search input {
  color: var(--color-input-text);
}

body.dark .rules-suit-card,
body.dark .rules-glossary-item {
  border-color: rgb(255 255 255 / 8%);
}

body.dark .rules-glossary-tip {
  background: #232c3d;
  border-color: #3c4a61;
  box-shadow: 0 10px 24px -8px rgb(0 0 0 / 55%);
}

body.dark .rules-wall,
body.dark .rules-wind-order {
  border-color: rgb(255 255 255 / 10%);
  background: rgb(21 26 34 / 70%);
}

body.dark .rules-wall-table {
  fill: rgb(33 41 56 / 70%);
  stroke: rgb(255 255 255 / 10%);
}

body.dark .rules-wall-wind {
  fill: var(--color-heading);
}

body.dark .rules-back-to-top {
  background: color-mix(in srgb, var(--color-teal-accent) 12%, #232c3d);
}

body.dark .hand-group-tile-face--concealed {
  border-color: #6f5c32;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 8%) 0%, transparent 35%),
    linear-gradient(180deg, #174032 0%, #0d241c 100%);
}

body.dark .hand-group-tile-face--winning,
body.dark .hand-group-tile-face--from-wall,
body.dark .hand-group-tile-face--from-loose {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 12%),
    0 0 0 2px rgb(224 188 81 / 55%);
}

body.dark .hand-group-tile-face--from-discard {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 12%),
    0 0 0 2px rgb(23 158 211 / 55%);
}

body.dark .rules-tile-example {
background: rgb(224 188 81 / 10%);
}

body.dark .rules-subsection h4,
body.dark .rules-table-caption {
  color: var(--color-teal-accent);
  border-left-color: var(--color-teal-accent);
}

body.dark .rules-table-caption {
  border-left: none;
  padding-left: 0;
}

body.dark .rules-content section + section {
  border-top-color: rgb(255 255 255 / 10%);
}

body.dark .rules-table th,
body.dark .rules-table td {
  border-bottom-color: rgb(255 255 255 / 10%);
}

body.dark .rules-source a,
body.dark .rules-content a {
  color: var(--color-teal-accent);
}

/* ── 25. Подсветка якорей правил ── */

body.dark .rules-anchor-item--active {
  background: rgb(94 196 232 / 12%);
  border-left-color: rgb(94 196 232 / 85%);
}

body.dark .rules-anchor-item--highlight {
  animation-name: rules-anchor-highlight-dark;
}

@keyframes rules-anchor-highlight-dark {
  0%,
  30% {
    background: rgb(94 196 232 / 24%);
    border-left-color: rgb(94 196 232 / 95%);
  }

  100% {
    background: rgb(94 196 232 / 12%);
    border-left-color: rgb(94 196 232 / 85%);
  }
}

/* ── 27. Панель якорей поиска ── */

body.dark .rules-search-results {
  border-color: rgb(255 255 255 / 10%);
  box-shadow: 0 8px 18px rgb(0 0 0 / 28%);
}

body.dark .rules-search-results button {
  border-color: rgb(255 255 255 / 8%);
  background: rgb(255 255 255 / 4%);
}