@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&family=JetBrains+Mono:wght@500&display=swap');

/* ════════════════════════════════════════════════════════════════
   Содержание:
   1. Data grids
   2. History (контейнер, таймлайн, карточки раундов)
   3. Mahjong radio / indicator / tile
   4. Round cards
   5. Score cards
   6. History animations
   7. Score delta
   8. Misc (форма, перенос раунда, marquee)
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   1. Data grids (CSS Grid вместо table)
   ════════════════════════════════════════════════════════════════ */

/* ── 1.1 Контейнер и базовые строки ── */







/* ── 1.2 Ячейки ── */





/* ── 1.3 Модификаторы ── */



/* ════════════════════════════════════════════════════════════════
   2. History
   ════════════════════════════════════════════════════════════════ */

/* ── 2.1 Контейнер ── */

#history {
  --history-timeline-color: var(--color-timeline-dot);
  --history-timeline-line: var(--color-timeline-line);
  --history-rail-width: 12px;
  --history-rail-gap: calc(var(--history-shell-pad-x) - var(--history-rail-width));
  --history-timeline-inset: var(--history-shell-pad-x);
  --history-dot-offset-y: 44px;
  --history-line-dot-gap: 10px;
  --history-group-gap: 40px;
  --history-section-pad-x: 14px;

  max-height: 83vh;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--history-group-gap);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 1px 2px 10px 0px;
}

#history::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

#historyScore {
  padding: 20px 20px 20px 10px;
}

#historyScore .historyScore-title {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: calc(100% - 36px);
  margin: 0 0 20px;
  box-sizing: border-box;
}



.history-shell {
  padding: 0px 18px 0px 0px;
  position: relative;
  overflow: visible;
}

/* ── 2.2 Таймлайн ── */

#history .round-group {
  display: grid;
  grid-template-columns: var(--history-rail-width) minmax(0, 1fr);
  column-gap: 16px;
  align-items: stretch;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  width: calc(100% + var(--history-timeline-inset));
  margin: 0 0 0 calc(-1 * var(--history-timeline-inset));
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  overflow: visible;
}

.history-timeline-rail {
  position: relative;
  padding: 0px 9px;
  align-self: stretch;
  min-height: 100%;
  z-index: 1;
}

.history-timeline-rail .history-timeline-dot {
  position: absolute;
  top: var(--history-dot-offset-y);
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
}

.history-timeline-rail::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--history-dot-offset-y) + var(--history-line-dot-gap));
  bottom: calc(-1 * (var(--history-group-gap) + var(--history-dot-offset-y) - var(--history-line-dot-gap)));
  z-index: 0;
  width: 2px;
  transform: translateX(-50%);
  background: var(--color-timeline-line);
  pointer-events: none;
}

#history .round-group:last-child .history-timeline-rail::after {
  display: none;
}

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

  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.history-timeline-dot::before {
  content: "";
  position: relative;
  z-index: 1;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-timeline-dot);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.history-timeline-dot.is-active::before {
  width: 6px;
  height: 6px;
  box-shadow:
    0 0 0 2px var(--history-timeline-ring-bg),
    0 0 0 4px var(--history-timeline-color);
}

/* ── 2.3 Карточка раунда: оболочка и заголовок ── */

.history-round-body {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: var(--round-panel-height, 0px);
  overflow: hidden;
  border-radius: 20px;
  background: var(--color-surface-alt);
  box-shadow: var(--color-section-box-shadow);
  box-sizing: border-box;
}

.history-round-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 14px 20px;
}

.history-round-header .history-round-title {
  margin: 0;
}

.history-round-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: fit-content;
  max-width: calc(100% - 48px);
  min-height: 36px;
  padding: 0px 10px;
  font-weight: 600;
  font-size: 20px;
  color: var(--color-heading);
}

.history-round-actions {
  position: absolute;
  top: 20px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ── 2.4 Пустое состояние ── */

.history-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  margin: -11px -20px 24px 10px;
  padding: 24px;
  border: 1px dashed var(--color-border);
  border-radius: 20px;
  color: var(--color-text-muted);
  text-align: center;
  font-size: 15px;
}

.history-empty[hidden] {
  display: none !important;
}

/* ── 2.5 Плитка победителя ── */

.history-winner-tile {
  width: 23px;
  height: 28px;
  flex-shrink: 0;
  font-size: 16px;
  border-color: #c9a84a;
  border-bottom-color: #9a7828;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 70%) 0%, transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fff8e6 48%, #f0d98a 100%);
  box-shadow:
    0 1px 2px rgb(0 0 0 / 28%),
    0 2px 6px rgb(0 0 0 / 18%),
    inset 0 1px 0 rgb(255 255 255 / 80%);
}

.history-winner-tile .mahjong-tile-icon__label {
  font-size: 16px;
  color: #9b1212;
  text-shadow: 0 1px 0 rgb(255 255 255 / 55%);
}

.history-winner-tile .mahjong-tile-icon__face {
  box-shadow: inset 0 0 0 1px rgb(180 140 50 / 35%);
}

/* ── 2.6 Карточки игроков ── */

.history-player-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  flex: 1 1 auto;
  align-content: stretch;
  width: auto;
  margin: 0px var(--history-section-pad-x) 18px;
}

.history-player-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--color-grid-head-round) 10%, rgb(255 255 255 / 58%));
  border-radius: 18px;
  background: var(--color-surface);
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    var(--elev-2),
    inset 0 1px 0 rgb(255 255 255 / 42%);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.history-player-card--winner {
  border-color: color-mix(in srgb, var(--color-gold) 34%, var(--color-border));
  background: var(--color-surface);
  box-shadow:
    var(--elev-2),
    0 0 0 1px color-mix(in srgb, var(--color-gold) 16%, transparent),
    0 0 20px rgb(224 188 81 / 16%),
    inset 0 1px 0 rgb(255 255 255 / 48%);
}

.history-player-card--winner::before,
.history-player-card--plain::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  background-size: auto, cover;
  background-position: center, calc(100% + 0px) 25%;
  background-repeat: no-repeat;
}

.history-player-card--plain::before {
  background-image:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--color-grid-head-round) 38%, #8aa89a) 0%,
      color-mix(in srgb, var(--color-grid-head-round) 20%, transparent) 48%,
      rgb(255 255 255 / 28%) 100%
    ),
    url("../img/patterns/history-card-underlay.svg?v=11");
}

.history-player-card--winner::before {
  background-image:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--color-gold) 34%, #c8b888) 0%,
      color-mix(in srgb, var(--color-gold) 18%, transparent) 48%,
      rgb(255 255 255 / 30%) 100%
    ),
    url("../img/patterns/history-card-underlay-winner.svg?v=14");
}

.history-player-card__head,
.history-player-card__stats {
  position: relative;
  z-index: 1;
}

.history-player-card__head {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 14px 14px 20px;
}

.history-player-card__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  text-shadow:
    0 1px 4px rgb(0 0 0 / 85%),    0 0 1px rgb(0 0 0 / 40%);
}

.history-player-card__wind {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ffffff;
  line-height: 1;
  text-shadow:
    0 1px 4px rgb(0 0 0 / 85%),    0 0 1px rgb(0 0 0 / 40%);
}

.history-player-card__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: auto 0 0;
  padding: 12px 12px 14px;
  background: var(--surface-glass);
  border: 1px solid var(--surface-glass-border);
  border-bottom: none;
  backdrop-filter: blur(2px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-radius: 16px 16px 17px 17px;
  box-shadow: var(--surface-glass-shadow);
}

.history-player-card__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.history-player-card__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-muted) 82%, var(--color-heading));
}

.history-player-card__value {
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-heading);
}

.history-player-card .score-delta {
  min-width: 40px;
  width: 40px;
  padding: 4px 8px;
  font-size: 16px;
  box-shadow: none;
}

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

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

.history-player-card .score-delta.zero {
  background: rgb(103 103 103 / 10%);
}

.history-player-card .score-delta.positive::before,
.history-player-card .score-delta.negative::before {
  content: none;
  display: none;
}

/* ── 2.7 Действия раунда (edit / delete) ── */

.history-round-body > .history-round-actions .history-edit-btn,
.history-round-body > .history-round-actions .history-delete-btn {
  position: static;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-muted);
  opacity: 1;
  transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) {
  .history-round-body > .history-round-actions {
    opacity: 0;
    pointer-events: none;
  }

  .history-round-body:hover > .history-round-actions,
  .history-round-body > .history-round-actions:focus-within {
    opacity: 1;
    pointer-events: auto;
  }
}

.history-round-body > .history-round-actions .history-edit-btn:hover {
  background: rgb(200 146 20 / 12%);
  color: var(--color-settings-active);
}

.history-round-body > .history-round-actions .history-delete-btn:hover {
  background: rgb(175 76 76 / 12%);
  color: var(--color-red);
}

.history-round-body > .history-round-actions .history-edit-btn i,
.history-round-body > .history-round-actions .history-delete-btn i {
  font-size: 12px;
}

.history-round-body > .history-round-actions .history-edit-btn:active,
.history-round-body > .history-round-actions .history-delete-btn:active {
  transform: scale(0.94);
}

.history-edit-btn,
.history-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
  box-sizing: border-box;
}

.history-edit-btn i,
.history-delete-btn i {
  margin: 0;
  line-height: 1;
  pointer-events: none;
}

/* ── 2.8 Иконка победителя ── */





/* ════════════════════════════════════════════════════════════════
   3. Mahjong radio / indicator / tile
   ════════════════════════════════════════════════════════════════ */

/* ── 3.1 Radio ── */



.mahjong-radio-input {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* ── 3.2 Индикатор выбора ── */











/* ── 3.3 Плитка в индикаторе ── */



/* ── 3.4 Иконка плитки ── */

.mahjong-tile-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid #d4bc78;
  border-bottom-width: 2px;
  border-bottom-color: #b8963a;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 52%) 0%, transparent 32%),
    linear-gradient(180deg, #fffef9 0%, #f8ecd0 52%, #e8d4a0 100%);
  transform-origin: center center;
  backface-visibility: hidden;
}

.mahjong-tile-icon__face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgb(214 193 140 / 28%);
}

.mahjong-tile-icon__label {
  color: #b71c1c;
  font-family: 'JetBrains Mono', 'Segoe UI', sans-serif;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 0 rgb(255 255 255 / 35%);
}

/* ════════════════════════════════════════════════════════════════
   4. Round cards
   ════════════════════════════════════════════════════════════════ */

/* ── 4.1 Контейнер и сетка ── */

#roundTable.round-cards {
  --round-card-tags-height: 44px;
  margin-top: 0px;
  border-radius: 20px;
  overflow: visible;
  background-color: var(--color-surface-alt);
  box-shadow: var(--color-section-box-shadow);
  min-height: var(--round-panel-height, 0px);
  box-sizing: border-box;
}

.round-cards__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0px 14px 14px;
}

/* ── 4.2 Базовая карточка и анимация входа ── */

.round-card {
  display: flex;
  flex-direction: column;
  top: 0px;
  gap: 0;
  min-width: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--color-grid-head-round) 10%, rgb(255 255 255 / 58%));
  border-radius: 18px;
  background: var(--color-surface);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    var(--elev-2),
    inset 0 1px 0 rgb(255 255 255 / 42%);
  transition: 
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        top 0.15s ease;  /* Добавлен transition для top */
  animation: roundCardEnter 0.52s cubic-bezier(0.22, 1.18, 0.36, 1) both;
}

.round-card:nth-child(1) { animation-delay: 0.14s; }
.round-card:nth-child(2) { animation-delay: 0.24s; }
.round-card:nth-child(3) { animation-delay: 0.34s; }
.round-card:nth-child(4) { animation-delay: 0.44s; }

/* Карточка с эффектом "всплытия" и легким наклоном */
@keyframes roundCardEnter {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.82) rotate(-2deg);
    filter: blur(6px);
  }
  55% {
    opacity: 1;
    transform: translateY(-8px) scale(1.03) rotate(1deg);
    filter: blur(0);
  }
  80% {
    transform: translateY(3px) scale(0.99) rotate(-0.5deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

.round-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(
      145deg,
      rgb(255 255 255 / 46%) 0%,
      rgb(255 255 255 / 20%) 7%,
      rgb(255 255 255 / 6%) 13%,
      transparent 12%
    ),
    linear-gradient(
      145deg,
      transparent 88%,
      rgb(255 255 255 / 8%) 90%,
      rgb(255 255 255 / 22%) 100%
    )
}

/* Стеклянный блик на карточках очков (как у round-card) */
.score-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(
      145deg,
      rgb(255 255 255 / 46%) 0%,
      rgb(255 255 255 / 20%) 7%,
      rgb(255 255 255 / 6%) 13%,
      transparent 12%
    ),
    linear-gradient(
      145deg,
      transparent 88%,
      rgb(255 255 255 / 8%) 90%,
      rgb(255 255 255 / 22%) 100%
    );
}

/* Пробегающий блик при наведении на карточки очков */
.score-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    115deg,
    transparent 42%,
    rgb(255 255 255 / 22%) 50%,
    transparent 58%
  );
  transform: translateX(-130%);
  transition: transform 0.7s ease;
}

@media (hover: hover) {
  .score-card:hover::before {
    transform: translateX(130%);
  }
}

/* ── 4.3 Подложка и состояние победителя ── */

.round-card__underlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--color-grid-head-round) 38%, #8aa89a) 0%,
      color-mix(in srgb, var(--color-grid-head-round) 20%, transparent) 48%,
      rgb(255 255 255 / 28%) 100%
    ),
    url("../img/patterns/round-card-underlay.svg?v=12") right top / cover no-repeat;
}

.round-card.selected-winner .round-card__underlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--color-gold) 34%, #c8b888) 0%,
      color-mix(in srgb, var(--color-gold) 16%, transparent) 48%,
      rgb(255 255 255 / 30%) 100%
    ),
    url("../img/patterns/round-card-underlay-winner.svg?v=14") right top / cover no-repeat;
}

@media (hover: hover) {
  .round-card:hover {
    border-color: color-mix(in srgb, var(--color-grid-head-round) 18%, rgb(255 255 255 / 68%));
    box-shadow:
      var(--elev-3),
      inset 0 1px 0 rgb(255 255 255 / 60%);
    top: -2px;
  }

  .round-card.selected-winner:hover {
    border-color: color-mix(in srgb, var(--color-gold) 44%, rgb(255 255 255 / 66%));
    box-shadow:
      var(--elev-3),
      0 0 0 1px color-mix(in srgb, var(--color-gold) 16%, transparent),
      0 0 26px rgb(224 188 81 / 22%),
      inset 0 1px 0 rgb(255 255 255 / 60%);
  }
}

.round-card.selected-winner {
  border-color: color-mix(in srgb, var(--color-gold) 36%, rgb(255 255 255 / 60%));
  background: var(--color-surface);
  box-shadow:
    var(--elev-2),
    0 0 0 1px color-mix(in srgb, var(--color-gold) 20%, transparent),
    0 0 22px rgb(224 188 81 / 18%),
    inset 0 1px 0 rgb(255 255 255 / 50%);
  transform: translateY(-2px);
}

/* ── 4.4 Эффект блика при выборе ── */

.round-card--selecting::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 32%,
    rgb(255 255 255 / 18%) 42%,
    rgb(255 248 220 / 58%) 49%,
    rgb(255 255 255 / 72%) 50%,
    rgb(255 248 220 / 58%) 51%,
    rgb(255 255 255 / 18%) 60%,
    transparent 70%
  );
  transform: translateX(-130%);
  animation: roundCardShine 0.56s ease-out forwards;
  pointer-events: none;
  z-index: 2;
}

.round-card--selecting > * {
  position: relative;
  z-index: 1;
}

@keyframes roundCardShine {
  to {
    transform: translateX(130%);
  }
}

/* Stronger shine on light theme — glass is brighter than dark. */
body:not(.dark) .round-card--selecting::before {
  background: linear-gradient(
    105deg,
    transparent 28%,
    rgb(255 255 255 / 45%) 40%,
    rgb(255 250 230 / 88%) 47%,
    rgb(255 255 255 / 100%) 50%,
    rgb(255 250 230 / 88%) 53%,
    rgb(255 255 255 / 45%) 60%,
    transparent 72%
  );
}

/* ── 4.5 Шапка: заголовок, теги, ветер ── */

.round-card__header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 14px 20px 18px;
}

.round-card__title-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: calc(1.2em + 6px + var(--round-card-tags-height));
}

.round-card__name {
  margin: 0;
  width: 100%;
  max-width: 100%;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-shadow:
    0 1px 4px rgb(0 0 0 / 85%),
    0 0 1px rgb(0 0 0 / 40%);
}

.round-card__name.is-marquee {
  text-align: left;
}

.round-card__tags {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  min-height: var(--round-card-tags-height);
  overflow: visible;
  flex-shrink: 0;
  box-sizing: border-box;
}

.round-card__tag {
  padding: 2px 8px;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 999px;
  background: rgb(255 255 255 / 20%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 10px;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.25;
  white-space: nowrap;
  flex-shrink: 0;
  text-shadow:
    0 1px 2px rgb(0 0 0 / 40%),
    0 0 1px rgb(0 0 0 / 30%);
}

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

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

.round-card__wind {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
}

.round-card__wind .app-select--wind .app-select__trigger,
.round-card__wind .app-select--wind .app-select__value {
  color: #ffffff;
  text-shadow:
    0 1px 4px rgb(0 0 0 / 85%),
    0 0 1px rgb(0 0 0 / 45%);
}

.round-card__wind .app-select--wind .app-select__trigger:hover,
.round-card__wind .app-select--wind .app-select__trigger:focus-visible,
.round-card__wind .app-select--wind .app-select__trigger:active {
  background: transparent;
  color: #ffffff;
  border: none;
  box-shadow: none;
}

.round-card__wind .app-select--wind {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 0;
}

.round-card__wind .app-select--wind .app-select__trigger {
  left: 0;
  transform: none;
  min-height: 44px;
  justify-content: center;
}

.round-card__wind .app-select--wind .app-select__trigger:active {
  transform: none;
}

/* ── 4.6 Тело: очки ── */

.round-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 12px 12px 14px;
  background: var(--surface-glass);
  border: 1px solid var(--surface-glass-border);
  border-bottom: none;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-radius: 16px 16px 17px 17px;
  box-shadow: var(--surface-glass-shadow);
}

.round-card__label {
  display: block;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-text-muted);
}

.round-card__score {
  min-width: 0;
}

.round-card__score .number-input-wrapper {
  width: 100%;
}

.number-input-wrapper--round-card input[type="number"] {
  width: 100%;
  box-sizing: border-box;
}

.round-card__score input[type="number"] {
  min-height: 44px;
  padding: 5px;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
}

/* ── 4.7 Панель инструментов очков ── */

.round-card__score-toolbar {
  display: flex;
  gap: 4px;
  margin-top: 10px;
  padding: 3px;
  border-radius: 11px;
  min-width: 0;
}

.round-card__score-tool {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0px;
  margin-top: 0px;
  min-width: 0;
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.round-card__score-tool-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.round-card__score-tool i {
  font-size: 12px;
  flex-shrink: 0;
  opacity: 0.88;
}

.round-card__score-toolbar--icons-only .round-card__score-tool-label {
  display: none;
}

.round-card__score-toolbar--icons-only .round-card__score-tool {
  gap: 0;
  padding: 5px;
}

.round-card__score-toolbar--icons-only .round-card__score-tool i {
  font-size: 13px;
  opacity: 1;
}

.round-card__score-tool:hover {
  color: var(--color-heading);
}

.round-card__score-tool--hand:hover {
  background: color-mix(in srgb, var(--color-grid-head-round) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-grid-head-round) 38%, transparent);
  color: var(--color-green-dark);
}

.round-card__score-tool--number:hover {
  background: color-mix(in srgb, var(--color-blue) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-blue) 38%, transparent);
  color: var(--color-blue-dark);
}

.round-card__score-tool--number.is-active {
  background: var(--color-surface);
  border-color: color-mix(in srgb, var(--color-blue) 36%, transparent);
  color: var(--color-teal);
  box-shadow: 0 1px 3px rgb(15 23 42 / 10%);
}

.round-card__score-tool:active {
  transform: scale(0.97);
}

/* ── 4.8 Переключатель маджонг (победа) ── */

.round-card__mahjong {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-top: auto;
}

.round-card__mahjong-btn {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  cursor: pointer;
}

.round-card__mahjong-btn .mahjong-radio-input {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.round-card__mahjong-face {
  position: relative;
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px 8px 42px;
  border: 1px dashed color-mix(in srgb, var(--color-grid-head-round) 26%, var(--color-border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-grid-head-round) 6%, var(--color-panel));
  box-sizing: border-box;
  transition: border-color 0.25s ease, border-style 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

.round-card__mahjong-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 32px;
  margin-top: 0;
  perspective: 520px;
  transform: translateY(-50%);
  transform-origin: center center;
}

.round-card__mahjong-tile {
  width: 24px;
  height: 30px;
  font-size: 17px;
  opacity: 0.20;
  filter: saturate(0.6);
  transform: rotate(0deg);
  transition: opacity 0.25s ease, transform 0.25s ease, filter 0.25s ease;
}

.round-card__mahjong-tile--win {
  animation: mahjongTileReveal 0.68s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transition: none;
}

@keyframes mahjongTileReveal {
  0% {
    opacity: 0;
    transform: rotateY(-88deg) rotateZ(12deg) scale(0.94) translateY(8px);
    filter: brightness(1.3);
  }

  25% {
    opacity: 1;
    transform: rotateY(10deg) rotateZ(-2deg) scale(1.38) translateY(-1px);
    filter: brightness(1.08);
  }

  100% {
    opacity: 1;
    transform: rotateY(0deg) rotate(-20deg) scale(1) translateY(0);
    filter: none;
  }
}

@keyframes winnerTilePop {
  0% {
    opacity: 0;
    transform: rotate(-28deg) scale(0.55) translateY(6px);
    filter: blur(2px);
  }

  65% {
    opacity: 1;
    transform: rotate(-8deg) scale(1.14) translateY(-2px);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: rotate(-12deg) scale(1) translateY(0);
    filter: none;
  }
}

@keyframes winnerTileIdleRound {
  0%,
  100% {
    transform: rotate(-20deg) translateY(0) scale(1);
  }

  45% {
    transform: rotate(-16deg) translateY(-2px) scale(1.06);
  }

  70% {
    transform: rotate(-22deg) translateY(1px) scale(1.02);
  }
}

.round-card__mahjong-copy {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 28px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
}

.round-card__mahjong-off,
.round-card__mahjong-on {
  grid-area: 1 / 1;
  max-width: 100%;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.round-card__mahjong-off {
  color: var(--color-text-muted);
  opacity: 1;
  visibility: visible;
}

.round-card__mahjong-on {
  color: #212020b8;
  font-weight: 700;
  opacity: 0;
  visibility: hidden;
}

.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) 40%, var(--color-border));
  background: color-mix(in srgb, var(--color-grid-head-round) 10%, var(--color-surface));
}

.round-card__mahjong-btn:active .round-card__mahjong-face {
  transform: scale(0.98);
}

.round-card__mahjong-btn .mahjong-radio-input:checked + .round-card__mahjong-face {
  border-style: solid;
  border-color: color-mix(in srgb, var(--color-gold) 48%, var(--color-border));
  background-color: rgb(200 168 75 / 20%);
  box-shadow: 0 0 0 3px rgb(255 191 0 / 23%);
  transition: border-color 0.2s ease, border-style 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.round-card__mahjong-btn .mahjong-radio-input:checked + .round-card__mahjong-face::before {
  content: "";
  position: absolute;
  inset: 0;
  top: 2px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0.45;
  background-image: url("../img/patterns/history-card-winner.svg");
  background-size: 20px 20px;
}

.round-card__mahjong-btn .mahjong-radio-input:checked + .round-card__mahjong-face .round-card__mahjong-icon {
  z-index: 1;
}

.round-card__mahjong-btn .mahjong-radio-input:checked + .round-card__mahjong-face .round-card__mahjong-copy {
  position: relative;
  z-index: 1;
}

.round-card__mahjong-btn .mahjong-radio-input:checked + .round-card__mahjong-face .round-card__mahjong-tile:not(.round-card__mahjong-tile--win) {
  opacity: 1;
  filter: none;
  animation: winnerTileIdleRound 2.5s ease-in-out infinite;
}

.round-card__mahjong-btn .mahjong-radio-input:checked + .round-card__mahjong-face .round-card__mahjong-off {
  opacity: 0;
  visibility: hidden;
}

.round-card__mahjong-btn .mahjong-radio-input:checked + .round-card__mahjong-face .round-card__mahjong-on {
  opacity: 1;
  visibility: visible;
}

/* ════════════════════════════════════════════════════════════════
   5. Score cards
   ════════════════════════════════════════════════════════════════ */

/* ── 5.1 Таблица и заголовок сводки ── */

#scoreTable {
    padding: 14px;
    border-radius: 20px;
    overflow: visible;
    background-color: var(--color-surface-alt);
    box-shadow: var(--color-section-box-shadow);
}

#scoreSummary h2,
#scoreSummary .scoreSummary-title {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0 10px;
  margin: 15px 0 15px;
  box-sizing: border-box;
}

.scoreSummary-title__center {
  grid-column: 2;
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
}

.scoreSummary-title__chart {
  grid-column: 3;
  justify-self: end;
  align-self: center;
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  margin: 0px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  line-height: 1;
  z-index: 1;
}

.scoreSummary-title__chart i {
  margin: 0 !important;
  font-size: 13px;
  line-height: 1;
}

/* ── 5.2 Сетка и базовая карточка ── */

.score-cards__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.score-card {
  cursor: pointer;
  position: relative;
  top: 0px;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  min-height: 168px;
  padding: 0;
  border-radius: 18px;
  border: 1px solid rgb(255 255 255 / 58%);
  background: var(--color-surface);
  text-align: center;
  box-shadow:
    var(--elev-2),
    inset 0 1px 0 rgb(255 255 255 / 42%);
  transition: 
  border-color 0.25s ease, 
  box-shadow 0.25s ease, 
  transform 0.25s ease, 
  top 0.12s ease;
  animation: roundCardEnter 0.52s cubic-bezier(0.22, 1.18, 0.36, 1) both;
}

.score-card:nth-child(1) { animation-delay: 0.14s; }
.score-card:nth-child(2) { animation-delay: 0.24s; }
.score-card:nth-child(3) { animation-delay: 0.34s; }
.score-card:nth-child(4) { animation-delay: 0.44s; }

/* ── 5.3 Подложки по местам ── */

.score-card__underlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--color-scores) 40%, #8ea3b8) 0%,
      color-mix(in srgb, var(--color-scores-soft) 24%, transparent) 48%,
      rgb(255 255 255 / 28%) 100%
    ),
    url("../img/patterns/score-card-underlay-place-2.svg?v=5") right top / cover no-repeat;
}

.score-card--place-2 .score-card__underlay {
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--color-scores) 40%, #8ea3b8) 0%,
      color-mix(in srgb, var(--color-scores-soft) 24%, transparent) 48%,
      rgb(255 255 255 / 28%) 100%
    ),
    url("../img/patterns/score-card-underlay-place-2.svg?v=5") right top / cover no-repeat;
}

.score-card--place-3 .score-card__underlay {
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--color-scores) 40%, #8ea3b8) 0%,
      color-mix(in srgb, var(--color-scores-soft) 24%, transparent) 48%,
      rgb(255 255 255 / 28%) 100%
    ),
    url("../img/patterns/score-card-underlay-place-3.svg?v=5") right top / cover no-repeat;
}

.score-card--place-4 .score-card__underlay {
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--color-scores) 40%, #8ea3b8) 0%,
      color-mix(in srgb, var(--color-scores-soft) 24%, transparent) 48%,
      rgb(255 255 255 / 28%) 100%
    ),
    url("../img/patterns/score-card-underlay-place-4.svg?v=5") right top / cover no-repeat;
}

.score-card--leader .score-card__underlay {
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--color-gold) 34%, #c8b888) 0%,
      color-mix(in srgb, var(--color-gold) 16%, transparent) 48%,
      rgb(255 255 255 / 30%) 100%
    ),
    url("../img/patterns/score-card-underlay-leader.svg?v=8") right top / cover no-repeat;
    background-position: right top;
}

.score-card > :not(.score-card__underlay) {
  position: relative;
  z-index: 1;
}

/* ── 5.4 Стили мест (leader / place-2/3/4) ── */

@media (hover: hover) {
  .score-card:hover {
    top: -2px;
    border-color: color-mix(in srgb, var(--color-scores) 38%, var(--color-border));
    box-shadow:
      var(--elev-3),
      inset 0 1px 0 rgb(255 255 255 / 52%);
    transform: translateY(-2px);
  }

  .score-card--leader:hover {
    border-color: #c49212;
    box-shadow:
      var(--elev-3),
      0 0 0 1px color-mix(in srgb, #d4a017 30%, transparent),
      0 0 26px rgb(224 188 81 / 24%),
      inset 0 1px 0 rgb(255 255 255 / 60%);
  }

  .score-card--place-2:hover {
    border-color: #87919c;
    box-shadow:
      var(--elev-3),
      0 0 0 2px color-mix(in srgb, #9aa3ad 44%, transparent),
      inset 0 1px 0 rgb(255 255 255 / 55%);
  }

  .score-card--place-3:hover {
    border-color: #a86830;
    box-shadow:
      var(--elev-3),
      0 0 0 2px color-mix(in srgb, #c17a3a 42%, transparent),
      inset 0 1px 0 rgb(255 255 255 / 55%);
  }

  .score-card--place-4:hover {
    border-color: #7a828d;
    box-shadow:
      var(--elev-3),
      0 0 0 2px color-mix(in srgb, #7c8691 44%, transparent),
      inset 0 1px 0 rgb(255 255 255 / 55%);
  }
}

.score-card--leader {
  border-width: 1px;
  border-color: color-mix(in srgb, #d4a017 46%, rgb(255 255 255 / 60%));
  box-shadow:
    var(--elev-2),
    0 0 0 1px color-mix(in srgb, #d4a017 30%, transparent),
    0 0 22px rgb(224 188 81 / 18%),
    inset 0 1px 0 rgb(255 255 255 / 55%);
}

.score-card--place-2 {
  border-color: #9aa3ad;
  box-shadow:
    var(--elev-2),
    0 0 0 2px color-mix(in srgb, #9aa3ad 36%, transparent),
    inset 0 1px 0 rgb(255 255 255 / 48%);
}

.score-card--place-3 {
  border-color: #b36219;
  box-shadow: var(--elev-2), 0 0 0 2px 
    color-mix(in srgb, #b53200 34%, transparent), inset 0 1px 0 rgb(255 255 255 / 48%);
}

.score-card--place-4 {
  border-color: #8b939e;
  box-shadow:
    var(--elev-2),
    0 0 0 2px color-mix(in srgb, #7c8691 36%, transparent),
    inset 0 1px 0 rgb(255 255 255 / 48%);
}

/* ── 5.5 Содержимое карточки ── */

.score-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 72px;
  padding: 14px 12px 20px;
  box-sizing: border-box;
}

.score-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 12px 10px 14px;
  background: var(--surface-glass);
  border: 1px solid var(--surface-glass-border);
  border-bottom: none;
  backdrop-filter: blur(6px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-radius: 16px 16px 17px 17px;
  box-shadow: var(--surface-glass-shadow);
}

.score-card__name {
  margin: 0;
  width: 100%;
  max-width: 100%;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  text-shadow:
    0 1px 4px rgb(0 0 0 / 85%),    
    0 0 1px rgb(0 0 0 / 40%)
}

.score-card__name.is-marquee {
  text-align: left;
}

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

.score-card__value-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 48px;
  box-sizing: border-box;
}

.score-card__value {
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  font-size: 28px;
  text-shadow: 0px 0px 1px #6b4c18;
  font-weight: 700;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--color-heading);
  line-height: 1;
}

.score-card--leader .score-card__value {
  color: #ba9119;
}

.score-card__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-muted) 82%, var(--color-heading));
}

/* ── 5.6 Иконки лидера (корона, орбиты, искры) ── */

.score-card__leader-icons {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
}

.score-card__leader-icons .score-card__leader-crown,
.score-card__leader-icons .score-card__leader-orbit,
.score-card__leader-icons .score-card__leader-spark {
  position: absolute;
  display: block;
  margin: 0;
}

.score-card__leader-icons .score-card__leader-crown {
  top: 50%;
  font-size: 18px;
  line-height: 1;
  color: var(--color-gold);
  z-index: 2;
  will-change: transform, opacity;
  text-shadow: 0 0 4px rgb(186 145 25 / 35%);
  animation: leaderCrownFlow 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.score-card__leader-orbit {
    position: absolute;
    top: 5px;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    border: 1px dashed rgba(128, 95, 6, 0.247);
    animation: spinOrbit 6s linear infinite;
}
.score-card__leader-orbit--1 { width: 45px; top: 0px; height: 45px; animation-duration: 5s; }
.score-card__leader-orbit--2 { width: 55px; top: -5px; height: 55px; animation-duration: 7s; animation-direction: reverse; }
.score-card__leader-orbit--3 { width: 35px; height: 35px; animation-duration: 4.5s; }

.score-card__leader-spark {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    color: #fcd34d;
    filter: drop-shadow(0 0 8px #fbbf24);
}
.score-card__leader-spark--1 { font-size: 9px; top: 5px; }
.score-card__leader-spark--2 { font-size: 7px; top: 2px; }
.score-card__leader-spark--3 { font-size: 6px; top: 3px; }

@keyframes spinOrbit {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.score-card__leader-icons .score-card__leader-spark--1 {
  text-shadow: 0px 0px 1px #493512;
  color: var(--color-gold);
  animation: leaderStarTwinkle1 4.4s linear infinite;
}

.score-card__leader-icons .score-card__leader-spark--2 {
  text-shadow: 0px 0px 1px #493512;
  color: #ffd34f;
  animation: leaderStarTwinkle2 3.1s linear infinite;
  animation-delay: -1.15s;
}

.score-card__leader-icons .score-card__leader-spark--3 {
  text-shadow: 0px 0px 1px #493512;
  color: #d4a84a;
  animation: leaderStarTwinkle3 5.2s linear infinite;
  animation-delay: -2.6s;
}

@keyframes leaderCrownFlow {
  0% {
    transform: translate(0, -50%) rotate(-6deg) scale(1);
    opacity: 0.8;
  }

  50% {
    transform: translate(2px, -50%) rotate(4deg) scale(1.1);
    opacity: 1;
  }

  100% {
    transform: translate(0, -50%) rotate(-6deg) scale(1);
    opacity: 0.8;
  }
}

@keyframes leaderOrbitSpin1 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes leaderOrbitSpin2 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}

@keyframes leaderOrbitSpin3 {
  from {
    transform: rotate(120deg);
  }

  to {
    transform: rotate(480deg);
  }
}

/* lower half (through bottom) = in front of crown; upper half = behind crown */
@keyframes leaderOrbitDepthFront {
  0%,
  45% {
    z-index: 3;
  }

  50%,
  95% {
    z-index: 1;
  }

  100% {
    z-index: 3;
  }
}

/* counter-clockwise: rises over the top (behind), then comes around the bottom (front) */
@keyframes leaderOrbitDepthBack {
  0%,
  12% {
    z-index: 3;
  }

  20%,
  62% {
    z-index: 1;
  }

  70%,
  100% {
    z-index: 3;
  }
}

@keyframes leaderStarTwinkle1 {
  0% {
    transform: translate(-50%, -50%) translateX(15px) rotate(0deg) scale(0.92);
    opacity: 1;
  }

  20% {
    transform: translate(-50%, -50%) translateX(15px) rotate(-72deg) scale(1.18);
    opacity: 1;
  }

  45% {
    transform: translate(-50%, -50%) translateX(15px) rotate(-162deg) scale(0.88);
    opacity: 0.75;
  }

  70% {
    transform: translate(-50%, -50%) translateX(15px) rotate(-252deg) scale(1.12);
    opacity: 0.9;
  }

  100% {
    transform: translate(-50%, -50%) translateX(15px) rotate(-360deg) scale(0.92);
    opacity: 1;
  }
}

@keyframes leaderStarTwinkle2 {
  0% {
    transform: translate(-50%, -50%) translateX(12px) rotate(0deg) scale(1.15);
    opacity: 1;
  }

  25% {
    transform: translate(-50%, -50%) translateX(12px) rotate(90deg) scale(0.82);
    opacity: 0.8;
  }

  55% {
    transform: translate(-50%, -50%) translateX(12px) rotate(198deg) scale(1.22);
    opacity: 1;
  }

  80% {
    transform: translate(-50%, -50%) translateX(12px) rotate(288deg) scale(0.9);
    opacity: 0.85;
  }

  100% {
    transform: translate(-50%, -50%) translateX(12px) rotate(360deg) scale(1.15);
    opacity: 1;
  }
}

@keyframes leaderStarTwinkle3 {
  0% {
    transform: translate(-50%, -50%) translateX(10px) rotate(-120deg) scale(0.95);
    opacity: 0.85;
  }

  30% {
    transform: translate(-50%, -50%) translateX(10px) rotate(-228deg) scale(1.2);
    opacity: 1;
  }

  60% {
    transform: translate(-50%, -50%) translateX(10px) rotate(-336deg) scale(0.8);
    opacity: 0.7;
  }

  100% {
    transform: translate(-50%, -50%) translateX(10px) rotate(-480deg) scale(0.95);
    opacity: 0.85;
  }
}

/* ── 5.7 Иконка короны ── */

.crown-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.crown-icon__img {
  display: block;
  width: 100%;
  height: 100%;
}

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

/* ── 5.8 Подсветка максимального результата ── */





@keyframes glowMaxCrownIdle {
  0%,
  100% {
    transform: translateX(-50%) translateY(0) rotate(-4deg) scale(1);
  }

  45% {
    transform: translateX(-50%) translateY(-2px) rotate(4deg) scale(1.08);
  }

  70% {
    transform: translateX(-50%) translateY(1px) rotate(-2deg) scale(1.02);
  }
}

@keyframes winnerCrownIdle {
  0%,
  100% {
    transform: translateY(0) rotate(-4deg) scale(1);
  }

  45% {
    transform: translateY(-2px) rotate(4deg) scale(1.08);
  }

  70% {
    transform: translateY(1px) rotate(-2deg) scale(1.02);
  }
}

/* ════════════════════════════════════════════════════════════════
   6. History animations
   ════════════════════════════════════════════════════════════════ */

/* ── 6.1 Базовое состояние и появление ── */

.round-group {
  margin-bottom: 8px;
  opacity: 0;
  transform: translateY(-14px) scale(0.98);
  transform-origin: top center;
}

#history .round-group.appear {
  animation: historyRoundEnter 0.58s cubic-bezier(0.22, 1.12, 0.36, 1) forwards;
}

#history .round-group.appear-instant {
  opacity: 1;
  transform: none;
  filter: none;
  animation: none;
}

#history .round-group.appear-instant .history-player-card,
#history .round-group.appear-instant .history-round-title,
#history .round-group.appear-instant .history-player-card .score-delta {
  opacity: 1;
  transform: none;
  animation: none;
  filter: none;
}

#history .round-group.appear-instant:first-child .history-timeline-dot {
  opacity: 1;
  transform: translate(-50%, -50%);
  animation: none;
  filter: none;
}

#history .round-group.appear:first-child .history-timeline-dot {
  animation: historyDotPop 0.45s cubic-bezier(0.2, 1.2, 0.3, 1) 0.12s both;
}

#history .round-group.appear:first-child .history-player-card {
  opacity: 0;
  animation: historyCardEnter 0.52s cubic-bezier(0.22, 1.18, 0.36, 1) both;
  cursor: pointer;
}

#history .round-group.appear:first-child .history-player-card:nth-child(1) { animation-delay: 0.14s; }
#history .round-group.appear:first-child .history-player-card:nth-child(2) { animation-delay: 0.24s; }
#history .round-group.appear:first-child .history-player-card:nth-child(3) { animation-delay: 0.34s; }
#history .round-group.appear:first-child .history-player-card:nth-child(4) { animation-delay: 0.44s; }

#history .round-group.appear:first-child .history-player-card .score-delta {
  animation: historyDeltaPop 0.38s cubic-bezier(0.2, 1.2, 0.3, 1) both;
}

#history .round-group.appear:first-child .history-player-card:nth-child(1) .score-delta { animation-delay: 0.28s; }
#history .round-group.appear:first-child .history-player-card:nth-child(2) .score-delta { animation-delay: 0.38s; }
#history .round-group.appear:first-child .history-player-card:nth-child(3) .score-delta { animation-delay: 0.48s; }
#history .round-group.appear:first-child .history-player-card:nth-child(4) .score-delta { animation-delay: 0.58s; }

#history .round-group.appear:first-child .history-player-card--winner {
  animation-name: historyWinnerCardEnter;
}

#history .round-group.appear:first-child .history-round-title {
  animation: historyTitleEnter 0.4s cubic-bezier(0.22, 1.1, 0.36, 1) 0.05s both;
}

/* ── 6.2 Удаление (disperse / collapse) ── */

#history .round-group.removing {
  pointer-events: none;
  opacity: 1;
  transform: none !important;
  filter: none;
  animation: none !important;
  will-change: height, margin-bottom, min-height;
}

#history .round-group.removing.appear,
#history .round-group.removing.appear-instant {
  animation: none !important;
  opacity: 1;
  transform: none !important;
  filter: none;
}

#history .round-group.removing .history-player-card,
#history .round-group.removing .history-round-title,
#history .round-group.removing .history-player-card .score-delta {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

#history .round-group.removing .history-timeline-dot {
  animation: none !important;
  opacity: 1 !important;
  transform: translate(-50%, -50%) !important;
  filter: none !important;
}

#history .round-group.removing--disperse .history-round-body {
  animation: historyDisperseFade 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

#history .round-group.removing--disperse .history-timeline-rail {
  animation: historyRailFade 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

#history .round-group.removing--collapse {
  overflow: hidden;
  transition:
    height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    min-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    margin-bottom 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 6.3 Keyframes ── */

/* Плавное появление с мягким подскоком */
@keyframes historyRoundEnter {
  0% {
    opacity: 0;
    transform: translateY(-24px) scale(0.92);
    filter: blur(2px);
  }
  60% {
    opacity: 1;
    transform: translateY(4px) scale(1.01);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Появление заголовка со сдвигом и fade */
@keyframes historyTitleEnter {
  0% {
    opacity: 0;
    transform: translateX(-16px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Пружинистое появление точки с overshoot */
@keyframes historyDotPop {
  0% {
    transform: translate(-50%, -50%) scale(0) rotate(-30deg);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5) rotate(5deg);
    opacity: 1;
  }
  80% {
    transform: translate(-50%, -50%) scale(0.9) rotate(-2deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Карточка с эффектом "всплытия" и легким наклоном */
@keyframes historyCardEnter {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.82) rotate(-2deg);
    filter: blur(6px);
    box-shadow: var(--elev-3),
      inset 0 3px 0 rgb(255 255 255 / 52%);
  }
  55% {
    opacity: 1;
    transform: translateY(-8px) scale(1.03) rotate(1deg);
    filter: blur(0);
    box-shadow: var(--elev-3),
      inset 0 2px 0 rgb(255 255 255 / 52%);
  }
  80% {
    transform: translateY(3px) scale(0.99) rotate(-0.5deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    box-shadow: var(--elev-2),
    inset 0 1px 0 rgb(255 255 255 / 42%);
  }
}

/* Карточка победителя с драматичным эффектом */
@keyframes historyWinnerCardEnter {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.78) rotate(-4deg);
    filter: blur(8px);
    box-shadow: var(--elev-3),
      inset 0 3px 0 rgb(255 255 255 / 52%);
  }
  50% {
    opacity: 1;
    transform: translateY(-12px) scale(1.05) rotate(2deg);
    filter: blur(0);
    box-shadow: var(--elev-3),
      inset 0 2px 0 rgb(255 255 255 / 52%);
  }
  75% {
    transform: translateY(4px) scale(0.98) rotate(-1deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    box-shadow: var(--elev-2),
    inset 0 1px 0 rgb(255 255 255 / 42%);
  }
}

/* Числовое изменение с эффектом "пульса" */
@keyframes historyDeltaPop {
  0% {
    opacity: 0;
    transform: scale(0.4) rotate(-10deg);
  }
  60% {
    opacity: 1;
    transform: scale(1.25) rotate(3deg);
  }
  85% {
    transform: scale(0.92) rotate(-1deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* Исчезновение с размытием и смещением */
@keyframes historyDisperseFade {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
  40% {
    opacity: 0.6;
    transform: scale(1.04) translateY(-8px);
    filter: blur(4px);
  }
  100% {
    opacity: 0;
    transform: scale(1.1) translateY(-20px);
    filter: blur(12px);
  }
}

/* Плавное затухание с легким сжатием */
@keyframes historyRailFade {
  0% {
    opacity: 1;
    transform: scaleY(1);
  }
  50% {
    opacity: 0.3;
    transform: scaleY(0.98);
  }
  100% {
    opacity: 0;
    transform: scaleY(0.95);
  }
}

/* ════════════════════════════════════════════════════════════════
   7. Score delta
   ════════════════════════════════════════════════════════════════ */

/* ── 7.1 База ── */

.score-delta {
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 4px 12px;
  border-radius: 40px;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* ── 7.2 Состояния ── */

.score-delta.positive {
  background: var(--color-delta-positive-bg);
  color: var(--color-positive);
  box-shadow: 0 1px 0px 1px var(--color-delta-positive-shadow);
}

.score-delta.negative {
  background: var(--color-delta-negative-bg);
  color: var(--color-negative);
  box-shadow: 0px 1px 0px 1px var(--color-delta-negative-shadow);
}

.score-delta.zero {
  color: var(--color-text-muted);
  background: var(--color-delta-zero-bg);
}

.score-delta.positive::before,
.score-delta.negative::before {
  content: "▲";
  font-size: 12px;
  margin-right: 4px;
  display: inline-block;
}

.score-delta.negative::before {
  content: "▼";
}

/* ════════════════════════════════════════════════════════════════
   8. Misc
   ════════════════════════════════════════════════════════════════ */

/* ── 8.1 Форма ── */

input[type="file"] {
  display: none;
}

.input-group input,
.input-group button {
  width: 48%;
}

/* ── 8.2 Анимация переноса раунда ── */

#roundTable.round-table--transferring {
  box-shadow: 0 16px 40px rgb(0 0 0 / 22%);
  animation: roundTransferGhost 0.82s cubic-bezier(0.4, 0.05, 0.2, 1) forwards;
}

@keyframes roundTransferGhost {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }

  20% {
    transform: translate(0, -40px) scale(1);
    opacity: 1;
  }

  100% {
    transform: translate(120%, 0px) scale(1);
    opacity: 0;
  }
}

/* ── 8.3 Бегущая строка имени ── */

.name-marquee {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.name-marquee__text {
  display: inline-block;
  max-width: none;
  white-space: nowrap;
  will-change: transform;
  padding: 2px 5px;
}

.name-marquee.is-marquee {
  text-overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3px, #000 calc(100% - 3px), transparent);
  mask-image: linear-gradient(90deg, transparent 0, #000 3px, #000 calc(100% - 3px), transparent);
}

.name-marquee.is-marquee .name-marquee__text {
  animation: nameMarqueeScroll var(--marquee-duration, 4.5s) ease-in-out infinite alternate;
  padding-inline: 2px;
}

@keyframes nameMarqueeScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-1 * var(--marquee-distance, 0px)));
  }
}