/* Общие «чипы» тулбара: доска + классическое лобби (не «Роскошь»).
   Ambient (--ui-chip-*): тон фона — кожа днём, серый ночью.
   Action (--ui-action-*): кнопки; без фишки = ambient, с фишкой — mid/dark
   (как акцент .cell-claim-fill; класс html.ui-player-chip + --ui-player-*). */

:root {
  /* Ambient: кожа (приглушённая, без ярких бликов) */
  --ui-chip-border: rgba(70, 45, 22, 0.4);
  --ui-chip-fg: #f0e6d4;
  --ui-chip-bg:
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.08), transparent 48%),
    linear-gradient(165deg, #6a4e34 0%, #4a3220 55%, #322214 100%);
  --ui-chip-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 1px 4px rgba(0, 0, 0, 0.28);
  --ui-chip-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 2px 8px rgba(0, 0, 0, 0.32);
  /* Кнопки по умолчанию в тон ambient; переопределяются при ui-player-chip */
  --ui-action-border: var(--ui-chip-border);
  --ui-action-fg: var(--ui-chip-fg);
  --ui-action-bg: var(--ui-chip-bg);
  --ui-action-shadow: var(--ui-chip-shadow);
  --ui-action-shadow-hover: var(--ui-chip-shadow-hover);
  /* Совместимость со старыми именами в style.css */
  --toolbar-chip-border: var(--ui-chip-border);
  --toolbar-chip-fg: var(--ui-chip-fg);
  --toolbar-chip-bg: var(--ui-chip-bg);
  --toolbar-chip-shadow: var(--ui-chip-shadow);
  --toolbar-chip-shadow-hover: var(--ui-chip-shadow-hover);
}

html.game-theme-dark {
  /* Ambient (панель/аккаунт): серый */
  --ui-chip-border: rgba(160, 170, 190, 0.22);
  --ui-chip-fg: #d8dee8;
  --ui-chip-bg:
    radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.05), transparent 36%),
    linear-gradient(165deg, #3a3a3a 0%, #2c2c2c 55%, #1e1e1e 100%);
  --ui-chip-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 1px 5px rgba(0, 0, 0, 0.4);
  --ui-chip-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.45);
  /* Кнопки = как тумблер «Тёмная тема»: ночь + звёзды (не цвет фишки). */
  --ui-action-border: rgba(180, 200, 240, 0.35);
  --ui-action-fg: #e8eef8;
  --ui-action-bg:
    radial-gradient(1px 1px at 18% 32%, rgba(255, 255, 255, 0.9) 40%, transparent 60%),
    radial-gradient(1px 1px at 42% 22%, rgba(255, 255, 255, 0.9) 40%, transparent 60%),
    radial-gradient(1.2px 1.2px at 58% 58%, rgba(255, 255, 255, 0.9) 40%, transparent 60%),
    radial-gradient(1px 1px at 30% 72%, rgba(204, 221, 238, 0.9) 40%, transparent 60%),
    radial-gradient(1px 1px at 68% 70%, rgba(255, 255, 255, 0.9) 40%, transparent 60%),
    radial-gradient(circle at 28% 50%, rgba(255, 255, 255, 0.16), transparent 36%),
    linear-gradient(165deg, #1b2233 0%, #121722 55%, #0b0e16 100%);
  --ui-action-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 2px 10px rgba(0, 0, 0, 0.45);
  --ui-action-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 4px 14px rgba(0, 0, 0, 0.5);
}

/* Фишка выбрана — тон как акцент купленной компании (mid), к dark;
   только день; ночь — см. выше. */
html.ui-player-chip:not(.game-theme-dark) {
  --ui-action-border: var(--ui-player-border, rgba(255, 255, 255, 0.22));
  --ui-action-fg: var(--ui-player-fg, #f5f0e6);
  --ui-action-bg:
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.1), transparent 46%),
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--ui-player-mid) 55%, var(--ui-player-dark)) 0%,
      var(--ui-player-dark) 100%
    );
  --ui-action-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 1px 4px rgba(0, 0, 0, 0.3);
  --ui-action-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 2px 8px rgba(0, 0, 0, 0.34);
}

/* Кнопка-чип (action) */
.ui-chip,
.fullscreen-btn,
.toolbar-action-btn,
.board-switch-link,
body.lobby-theme-classic .lobby-auth-toggle,
body.lobby-theme-classic .lobby-account-logout,
body.lobby-theme-classic .lobby-auth-form button[type="submit"],
body.lobby-theme-classic .lobby-bot-menu button,
body.lobby-theme-classic .lobby-start-btn:not(.is-blocked),
body.lobby-theme-classic .lobby-capacity-btn,
body.lobby-theme-classic .lobby-auth-tab.is-active,
body.lobby-theme-classic .lobby-panel-send {
  border: 1px solid var(--ui-action-border);
  border-radius: 999px;
  background: var(--ui-action-bg);
  box-shadow: var(--ui-action-shadow);
  color: var(--ui-action-fg);
  font-weight: 600;
  transition:
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.25s ease,
    color 0.35s ease,
    transform 0.2s ease,
    opacity 0.2s ease,
    filter 0.2s ease;
}

.ui-chip:hover,
.fullscreen-btn:hover,
.toolbar-action-btn:hover,
.board-switch-link:hover,
body.lobby-theme-classic .lobby-auth-toggle:hover,
body.lobby-theme-classic .lobby-account-logout:hover,
body.lobby-theme-classic .lobby-auth-form button[type="submit"]:hover,
body.lobby-theme-classic .lobby-bot-menu button:hover,
body.lobby-theme-classic .lobby-start-btn:hover:not(.is-blocked),
body.lobby-theme-classic .lobby-capacity-btn:hover,
body.lobby-theme-classic .lobby-panel-send:hover {
  filter: none;
  transform: translateY(-1px);
  box-shadow: var(--ui-action-shadow-hover);
  border-color: var(--ui-action-border);
}

.ui-chip:active,
.fullscreen-btn:active,
.toolbar-action-btn:active,
body.lobby-theme-classic .lobby-start-btn:active:not(.is-blocked),
body.lobby-theme-classic .lobby-capacity-btn:active,
body.lobby-theme-classic .lobby-panel-send:active {
  transform: translateY(0);
  filter: none;
  box-shadow: var(--ui-action-shadow);
}

/* Галка-чип (тоже action — цвет фишки / тон фона) */
.ui-chip-toggle,
.debug-toggle,
body.lobby-theme-classic .lobby-sound-toggle:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ui-action-fg);
  cursor: pointer;
  user-select: none;
  padding: 5px 12px 5px 9px;
  border: 1px solid var(--ui-action-border);
  border-radius: 999px;
  background: var(--ui-action-bg);
  box-shadow: var(--ui-action-shadow);
  opacity: 1;
  transition:
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.25s ease,
    color 0.35s ease,
    transform 0.2s ease,
    opacity 0.2s ease,
    filter 0.2s ease;
}

.ui-chip-toggle:hover,
.debug-toggle:hover,
body.lobby-theme-classic .lobby-sound-toggle:hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: var(--ui-action-shadow-hover);
}

.ui-chip-toggle:active,
.debug-toggle:active {
  transform: translateY(0);
}

.ui-chip-toggle:not(:has(input:checked)):not(:has(input[type="color"])),
.debug-toggle:not(:has(input:checked)):not(:has(input[type="color"])),
body.lobby-theme-classic .lobby-sound-toggle:not(:has(input:checked)) {
  opacity: 0.72;
  filter: saturate(0.82) brightness(0.96);
}

.ui-chip-toggle input,
.debug-toggle input,
body.lobby-theme-classic .lobby-sound-toggle input {
  width: 14px;
  height: 14px;
  accent-color: #f0d78c;
  cursor: pointer;
  flex-shrink: 0;
}

/* Ступени громкости в чипе «Звуки» (0 / 25 / 50 / 75%) */
.sound-level-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  flex-shrink: 0;
}

.sound-level-bars i {
  width: 3px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.28;
}

.sound-level-bars i:nth-child(1) { height: 45%; }
.sound-level-bars i:nth-child(2) { height: 72%; }
.sound-level-bars i:nth-child(3) { height: 100%; }

.sound-chip[data-sound-step="1"] .sound-level-bars i:nth-child(-n + 1),
.sound-chip[data-sound-step="2"] .sound-level-bars i:nth-child(-n + 2),
.sound-chip[data-sound-step="3"] .sound-level-bars i {
  opacity: 1;
}

/* Лобби classic: мелкие отличия поверх общего чипа */
body.lobby-theme-classic .lobby-sound-toggle {
  justify-content: flex-start;
}

/* Чип-стили выше по specificity, чем UA [hidden] — галка Роскошь до входа. */
body.lobby-theme-classic .lobby-sound-toggle[hidden],
body.lobby-theme-classic .lobby-theme-toggle[hidden] {
  display: none !important;
}

body.lobby-theme-classic .lobby-auth-tab {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: #dce6f5;
  font-weight: 600;
}

body.lobby-theme-classic .lobby-auth-tab:hover {
  border-color: var(--ui-action-border);
  color: var(--ui-action-fg);
  background: rgba(92, 61, 36, 0.28);
}

html.ui-player-chip:not(.game-theme-dark) body.lobby-theme-classic .lobby-auth-tab:hover {
  background: rgba(0, 0, 0, 0.18);
}

body.lobby-theme-classic .lobby-start-btn:not(.is-blocked) {
  filter: none;
}

body.lobby-theme-classic .lobby-start-btn.is-blocked {
  border-color: rgba(160, 170, 190, 0.18);
  border-radius: 999px;
  background:
    radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.04), transparent 36%),
    linear-gradient(165deg, #32363e 0%, #252830 55%, #181a20 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 1px 4px rgba(0, 0, 0, 0.3);
  color: rgba(220, 226, 236, 0.65);
  opacity: 0.72;
}

/* Карточка аккаунта — ambient (не красим в цвет фишки). */
body.lobby-theme-classic .lobby-account {
  border: 1px solid var(--ui-chip-border);
  border-radius: 18px;
  background: var(--ui-chip-bg);
  box-shadow: var(--ui-chip-shadow);
  color: var(--ui-chip-fg);
}

body.lobby-theme-classic .lobby-account-stars {
  color: #ffe08a;
}

/* Тумблер солнце ↔ луна — тот же тон, что у кнопок (--ui-action-*). */
.theme-toggle {
  --theme-toggle-h: 2.15rem;
  --theme-toggle-w: 4.85rem;
  --theme-orb: 1.05rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
  width: var(--theme-toggle-w);
  height: var(--theme-toggle-h);
  margin: 0;
  padding: 0 6px 0 7px;
  border: 1px solid var(--ui-action-border);
  border-radius: 999px;
  background: var(--ui-action-bg);
  box-shadow: var(--ui-action-shadow);
  overflow: hidden;
  flex-shrink: 0;
  box-sizing: border-box;
  transition:
    background 0.45s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.2s ease;
}

.theme-toggle:hover {
  transform: translateY(-1px);
  box-shadow: var(--ui-action-shadow-hover);
}

.theme-toggle:active {
  transform: translateY(0);
}

.theme-toggle-auto {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.theme-toggle-auto input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #f0d78c;
  cursor: pointer;
}

.theme-toggle-switch {
  position: relative;
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  overflow: hidden;
  border-radius: 999px;
}

.theme-toggle-switch:focus-visible {
  outline: 2px solid rgba(240, 215, 140, 0.7);
  outline-offset: 1px;
}

.theme-toggle-sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.theme-toggle-until {
  position: absolute;
  top: 50%;
  /* Левый край switch ≈ правый край галки (+ gap). */
  left: 0;
  right: calc(var(--theme-orb) + 6px);
  transform: translateY(-50%);
  z-index: 0;
  max-width: 100%;
  box-sizing: border-box;
  font-size: clamp(0.42rem, calc(var(--theme-toggle-h) * 0.38), 0.72rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: rgba(138, 143, 152, 0.5); /* в 2 раза бледнее прежнего #8a8f98 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
  pointer-events: none;
}

.theme-toggle-until[hidden] {
  display: none !important;
}

/* Ночь: луна слева → «до» у правого края; всё равно под орбом. */
html.game-theme-dark .theme-toggle-until {
  left: calc(var(--theme-orb) + 6px);
  right: 0;
  text-align: right;
  color: rgba(180, 188, 204, 0.45);
}

.theme-toggle.is-auto {
  --theme-toggle-w: 6.4rem;
}

.theme-toggle-stars {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  background-image:
    radial-gradient(1px 1px at 18% 32%, #fff 40%, transparent 60%),
    radial-gradient(1px 1px at 42% 22%, #fff 40%, transparent 60%),
    radial-gradient(1.2px 1.2px at 58% 58%, #fff 40%, transparent 60%),
    radial-gradient(1px 1px at 30% 72%, #cde 40%, transparent 60%),
    radial-gradient(1px 1px at 68% 70%, #fff 40%, transparent 60%);
}

/* Звёзды уже в --ui-action-bg тёмной темы — слой на тумблере не дублируем. */
html.game-theme-dark .theme-toggle-stars {
  opacity: 0;
}

/* День: солнце справа; ночь: луна слева. */
.theme-toggle-orb {
  position: absolute;
  top: 50%;
  left: 72%;
  z-index: 2;
  width: var(--theme-orb);
  height: var(--theme-orb);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #e8d090 0%, #c9962e 48%, #9a6e14 100%);
  box-shadow:
    0 0 0 1px rgba(220, 180, 90, 0.2),
    0 0 5px rgba(200, 150, 50, 0.28);
  transform: translate(-50%, -50%);
  transition:
    left 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.45s ease,
    box-shadow 0.45s ease,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.theme-toggle-orb::before,
.theme-toggle-orb::after {
  content: '';
  position: absolute;
  inset: -0.28rem;
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      transparent 0 12deg,
      rgba(220, 180, 90, 0.45) 12deg 18deg,
      transparent 18deg 57deg,
      rgba(220, 180, 90, 0.38) 57deg 63deg,
      transparent 63deg 102deg,
      rgba(220, 180, 90, 0.45) 102deg 108deg,
      transparent 108deg 147deg,
      rgba(220, 180, 90, 0.38) 147deg 153deg,
      transparent 153deg 192deg,
      rgba(220, 180, 90, 0.45) 192deg 198deg,
      transparent 198deg 237deg,
      rgba(220, 180, 90, 0.38) 237deg 243deg,
      transparent 243deg 282deg,
      rgba(220, 180, 90, 0.45) 282deg 288deg,
      transparent 288deg 327deg,
      rgba(220, 180, 90, 0.38) 327deg 333deg,
      transparent 333deg 360deg
    );
  opacity: 0.55;
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}

.theme-toggle-orb::after {
  inset: -0.12rem;
  opacity: 0.28;
  filter: blur(0.4px);
}

html.game-theme-dark .theme-toggle-orb {
  top: 50%;
  left: 28%;
  background: radial-gradient(circle at 35% 32%, #e4e8f0 0%, #c4ccd8 48%, #9aa6b8 100%);
  box-shadow:
    inset -0.28rem -0.12rem 0 0 #1a2030,
    0 0 4px rgba(180, 200, 220, 0.16);
  transform: translate(-50%, -50%) rotate(-28deg) scale(1.05);
}

html.game-theme-dark .theme-toggle-orb::before,
html.game-theme-dark .theme-toggle-orb::after {
  opacity: 0;
  transform: scale(0.4) rotate(40deg);
}

/* Общая кастомная подсказка (лобби / доска) — не native title. */
.ui-chrome-tip {
  position: fixed;
  z-index: 240;
  min-width: 180px;
  max-width: min(92vw, 360px);
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(240, 215, 140, 0.65);
  background: rgba(18, 12, 6, 0.92);
  color: #f5e6c8;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  box-sizing: border-box;
}

.ui-chrome-tip[hidden] {
  display: none !important;
}

.ui-chrome-tip-title {
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 4px;
  color: #f0d78c;
}

.ui-chrome-tip-desc {
  font-size: 0.8rem;
  line-height: 1.35;
  color: #c9b08a;
}

/* Auth-bar classic: Роскошь / Звуки / день-ночь — одна ширина по max текста галок. */
body.lobby-theme-classic .lobby-auth-bar {
  align-items: flex-end;
}

body.lobby-theme-classic .lobby-auth-chip-toggles {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: max-content;
  max-width: 100%;
  gap: 6px;
}

body.lobby-theme-classic .lobby-auth-chip-toggles .lobby-sound-toggle,
body.lobby-theme-classic .lobby-auth-chip-toggles .theme-toggle {
  width: 100%;
  box-sizing: border-box;
}

body.lobby-theme-classic .lobby-auth-chip-toggles .theme-toggle {
  --theme-toggle-w: 100%;
  --theme-toggle-h: 2.15rem;
  min-height: 2.15rem;
}

body.lobby-theme-imperial .theme-toggle {
  display: none !important;
}

/* Classic rows: дерево в .lobby-row-wood (отдельный слой) — ночью filter как
   frame-wood; фишки/кнопки без filter. В Роскоши слой скрыт (войлок на блоке). */
body.lobby-theme-classic .lobby-row-block {
  background-image: none !important;
}

body.lobby-theme-classic .lobby-row-wood {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  transition: filter 0.45s ease;
}

html.game-theme-dark body.lobby-theme-classic .lobby-row-wood {
  filter: brightness(0.48) saturate(0.25) contrast(1.05);
}

body.lobby-theme-imperial .lobby-row-wood {
  display: none !important;
}

/* Классическое лобби + ночь: темнее фон, без кожи. */
html.game-theme-dark body.lobby-theme-classic {
  background-color: #1c1c1c;
  background-image:
    radial-gradient(ellipse 80% 55% at 50% 18%, rgba(50, 50, 50, 0.35), transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 90%, rgba(12, 12, 12, 0.55), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

html.game-theme-dark body.lobby-theme-classic .bg-leather-corner {
  opacity: 0 !important;
  animation: none;
}

html.game-theme-dark body.lobby-theme-classic .lobby-real-players,
html.game-theme-dark body.lobby-theme-classic .lobby-panel {
  border-color: rgba(0, 0, 0, 0.5);
  background:
    linear-gradient(
      165deg,
      rgba(86, 80, 74, 0.96) 0%,
      rgba(52, 48, 44, 0.95) 55%,
      rgba(30, 28, 26, 0.94) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    0 2px 8px rgba(0, 0, 0, 0.48);
}

html.game-theme-dark body.lobby-theme-classic .lobby-real-players {
  color: #ebe4d8;
}

/* Журнал + поле сообщения (аналог board message) — тот же перелив, что у панели. */
html.game-theme-dark body.lobby-theme-classic .lobby-panel-composer {
  border-color: rgba(0, 0, 0, 0.5);
  background:
    linear-gradient(
      165deg,
      rgba(86, 80, 74, 0.96) 0%,
      rgba(52, 48, 44, 0.95) 55%,
      rgba(30, 28, 26, 0.94) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    0 2px 8px rgba(0, 0, 0, 0.48);
}

html.game-theme-dark body.lobby-theme-classic .lobby-panel-input {
  color: #ebe4d8;
  caret-color: #ebe4d8;
}

html.game-theme-dark body.lobby-theme-classic .lobby-panel-input::placeholder {
  color: #9a9084;
}

html.game-theme-dark body.lobby-theme-classic .lobby-panel-entry,
html.game-theme-dark body.lobby-theme-classic .lobby-panel-sender {
  color: #ebe4d8;
}

html.game-theme-dark body.lobby-theme-classic .lobby-panel-empty {
  color: #b0a898;
}

html.game-theme-dark body.lobby-theme-classic .lobby-panel-scoreboard {
  scrollbar-color: rgba(210, 205, 195, 0.28) transparent;
}

html.game-theme-dark body.lobby-theme-classic .lobby-panel-scoreboard::-webkit-scrollbar-thumb {
  background: rgba(210, 205, 195, 0.28);
}

html.game-theme-dark body.lobby-theme-classic .lobby-panel-scoreboard::-webkit-scrollbar-thumb:hover {
  background: rgba(210, 205, 195, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .theme-toggle-orb,
  .theme-toggle-orb::before,
  .theme-toggle-orb::after,
  .theme-toggle-stars {
    transition: none !important;
  }
}

/* Тултип статистики игрока (лобби + доска): js/ui-chip.js */
.user-stats-tip {
  position: fixed;
  z-index: 25002;
  min-width: 196px;
  max-width: min(268px, calc(100vw - 24px));
  padding: 10px 12px;
  border: 1px solid rgba(240, 215, 140, 0.55);
  border-radius: 11px;
  background: rgba(22, 16, 10, 0.97);
  color: #f5e6c8;
  box-shadow: var(--lobby-shadow-lift, 0 10px 28px rgba(0, 0, 0, 0.45));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--lobby-font, "Segoe UI", system-ui, sans-serif);
  pointer-events: none;
}
.user-stats-tip[hidden] { display: none; }
.user-stats-tip-name {
  overflow: hidden;
  margin-bottom: 3px;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-stats-tip-stars {
  min-height: 1.2em;
  margin-bottom: 7px;
  color: #f0d77d;
  font-size: 0.82rem;
  letter-spacing: 1px;
  text-align: center;
}
.user-stats-tip-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 14px;
  font-size: 0.78rem;
  line-height: 1.35;
}
.user-stats-tip-grid span:nth-child(odd) { color: rgba(245, 230, 200, 0.72); }
.user-stats-tip-grid span:nth-child(even) {
  font-weight: 700;
  text-align: right;
}
.user-stats-tip-section {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid rgba(240, 215, 140, 0.22);
}
.user-stats-tip-section[hidden] { display: none; }
.user-stats-tip-section-title {
  margin-bottom: 6px;
  color: rgba(245, 230, 200, 0.72);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}
.user-stats-tip-dice-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2px;
  height: 56px;
}
.user-stats-tip-dice-chart[hidden] { display: none; }
.user-stats-tip-dice-col {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  height: 100%;
  gap: 2px;
}
.user-stats-tip-dice-bar-wrap {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  min-height: 0;
}
.user-stats-tip-dice-bar {
  width: 70%;
  min-height: 0;
  max-width: 14px;
  border-radius: 2px 2px 1px 1px;
  background: linear-gradient(
    180deg,
    rgba(240, 215, 140, 0.95) 0%,
    rgba(196, 140, 48, 0.88) 100%
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.user-stats-tip-dice-bar.is-empty {
  height: 2px !important;
  background: rgba(245, 230, 200, 0.18);
  box-shadow: none;
}
.user-stats-tip-dice-label {
  color: rgba(245, 230, 200, 0.62);
  font-size: 0.58rem;
  line-height: 1;
  text-align: center;
}
.user-stats-tip-section-empty {
  color: rgba(245, 230, 200, 0.55);
  font-size: 0.72rem;
  text-align: center;
}
.user-stats-tip-section-empty[hidden] { display: none; }
.user-stats-tip-guest {
  color: rgba(245, 230, 200, 0.72);
  font-size: 0.8rem;
  line-height: 1.35;
  text-align: center;
}