/* =========================================================
   PLAY — страница PvP (ФИНАЛ)
   ========================================================= */

html, body {
  overflow-x: hidden;
  height: auto;
  min-height: 100%;
}

.play {
  max-width: 1500px;
  margin: 0 auto;
  padding: 100px 24px 40px;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

/* =========================================================
   Layout: игроки | доска | управление
   ========================================================= */
.play-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 320px;
  gap: var(--gap-lg);
  align-items: stretch;
  min-height: calc(100vh - 160px);
}
@supports (height: 100dvh) {
  .play-layout {
    min-height: calc(100dvh - 160px);
  }
}

/* =========================================================
   Левая колонка — игроки
   ========================================================= */
.play-players {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--gap-md);
  min-width: 0;
}

/* КАРТОЧКА ИГРОКА */
.play-player {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 16px 16px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  aspect-ratio: 1 / 1;
  justify-content: center;
  text-align: center;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease, opacity .25s ease;
}
.play-player.active {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(181, 114, 44, 0.18), 0 12px 28px rgba(181, 114, 44, 0.12);
  transform: translateY(-2px);
}
.play-player.disconnected {
  opacity: .6;
  border-color: var(--c-danger);
}

.play-player-avatar-wrap { position: relative; flex-shrink: 0; }

.play-player-avatar {
  position: relative;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent-deep));
  color: var(--c-paper);
  font-family: var(--f-sans);
  font-size: 28px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  z-index: 1;
  box-shadow: 0 6px 18px rgba(138, 82, 28, 0.25);
}
.play-player-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.play-player-avatar-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease;
  pointer-events: none;
}
.play-player.active .play-player-avatar-ring {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 6px rgba(181, 114, 44, 0.12);
  animation: ringPulse 2s ease-in-out infinite;
}
@keyframes ringPulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(181, 114, 44, 0.12); }
  50%      { box-shadow: 0 0 0 10px rgba(181, 114, 44, 0.05); }
}

.play-player-info {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0; width: 100%; align-items: center;
}
.play-player-name {
  font-size: 15px; font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}

.play-player-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 100px;
  background: rgba(44, 24, 16, 0.06);
  font-size: 10px; font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
.play-player-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  opacity: .5;
  flex-shrink: 0;
  transition: opacity .25s ease, box-shadow .25s ease;
}
.play-player.active .play-player-badge {
  background: rgba(181, 114, 44, 0.15);
  color: var(--c-accent-deep);
}
.play-player.active .play-player-dot {
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(181, 114, 44, 0.25);
}
.play-player.disconnected .play-player-badge {
  background: rgba(181, 61, 61, 0.12);
  color: var(--c-danger);
}

.play-player-clock {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 100px;
  background: rgba(44, 24, 16, 0.06);
  font-family: var(--f-mono);
  font-size: 22px; font-weight: 700;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: .5px;
  width: 100%; max-width: 140px;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.play-player-clock i { font-size: 14px; opacity: .5; flex-shrink: 0; }
.play-player.active .play-player-clock {
  background: linear-gradient(135deg, #d4a44a, #b5722c);
  color: #fff;
  box-shadow: 0 4px 14px rgba(181, 114, 44, 0.35);
}
.play-player.active .play-player-clock i { opacity: .9; }
.play-player-clock.low {
  background: rgba(181, 61, 61, 0.12);
  color: var(--c-danger);
}
.play-player.active .play-player-clock.low {
  background: linear-gradient(135deg, #d96060, #8a2a2a);
  color: #fff;
  animation: clockPulse 1s infinite;
}
@keyframes clockPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

/* =========================================================
   Центр — доска
   ========================================================= */
.play-center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}
.play .board-frame {
  height: auto;
  width: 100%;
  max-width: min(100%, calc(100dvh - 160px));
  max-height: calc(100dvh - 160px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  padding: 8px;
}

/* Вспышки над доской */
.play .board-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 100;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease;
}
.play .board-flash.visible { opacity: 1; }
.play .board-flash-text {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: clamp(36px, 8vw, 96px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6), 0 0 40px rgba(0,0,0,0.4);
  animation: flashPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  opacity: 0;
  text-align: center;
  padding: 0 16px;
  line-height: 1.1;
}
.play .board-flash.visible .board-flash-text { opacity: 1; }
.play .board-flash.win { background: radial-gradient(circle at center, rgba(212, 165, 116, 0.85) 0%, rgba(181, 114, 44, 0.7) 50%, rgba(138, 82, 28, 0.5) 100%); }
.play .board-flash.win .board-flash-text { color: #fff8e7; }
.play .board-flash.lose { background: radial-gradient(circle at center, rgba(181, 61, 61, 0.85) 0%, rgba(120, 30, 30, 0.7) 50%, rgba(80, 20, 20, 0.5) 100%); }
.play .board-flash.draw { background: radial-gradient(circle at center, rgba(120, 110, 100, 0.8) 0%, rgba(90, 80, 70, 0.6) 50%, rgba(60, 50, 40, 0.4) 100%); }
.play .board-flash.draw .board-flash-text { color: #f0e8d8; }
.play .board-flash.check { background: radial-gradient(circle at center, rgba(220, 130, 40, 0.75) 0%, rgba(180, 90, 20, 0.55) 50%, rgba(140, 60, 10, 0.35) 100%); }
@keyframes flashPop {
  0%   { transform: scale(0.4); opacity: 0; }
  50%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.play .board-frame.pulse { animation: playFramePulse 0.9s ease 3; }
@keyframes playFramePulse {
  0%, 100% { box-shadow: var(--sh-board); }
  50% { box-shadow: 0 0 0 4px rgba(212, 165, 116, 0.6), 0 0 40px rgba(212, 165, 116, 0.4), var(--sh-board); }
}
.play .sq.in-check {
  background: rgba(200, 50, 50, 0.55) !important;
  box-shadow: inset 0 0 0 3px rgba(255, 80, 80, 0.8);
  animation: playCheckPulse 1s infinite;
}
@keyframes playCheckPulse {
  0%, 100% { background: rgba(200, 50, 50, 0.55); }
  50%      { background: rgba(220, 70, 70, 0.75); }
}

/* =========================================================
   Правая колонка: кнопки + история
   ========================================================= */
.play-side {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  position: sticky;
  top: 90px;
  height: max-content !important;
  max-height: none !important;
}

.play-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-soft);
}

.play-controls .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 18px;
  border-radius: 10px;
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .15s ease;
  text-decoration: none;
}
.play-controls .btn.is-disabled, .play-controls .btn:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
.play-controls .btn-primary { background: var(--c-ink); color: var(--c-paper); box-shadow: 0 4px 14px rgba(44, 24, 16, 0.18); }
.play-controls .btn-primary:hover { background: var(--c-accent-deep); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(138, 82, 28, 0.3); }
.play-controls .btn-primary:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(44, 24, 16, 0.2); }
.play-controls .btn-ghost { background: transparent; color: var(--c-ink); border-color: var(--c-line-strong); }
.play-controls .btn-ghost:hover { background: rgba(44, 24, 16, 0.05); border-color: var(--c-ink); }
.play-controls .btn-ghost:active { background: rgba(44, 24, 16, 0.08); }
.play-controls .btn i { font-size: 14px; opacity: 0.9; }
.play-controls .btn-primary i { color: var(--c-accent); }

/* ВЫБОР ВРЕМЕНИ */
.mario-time-list {
  list-style: none;
  margin: 0 0 4px;
  padding: 4px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mario-time-list[hidden] { display: none; }
.mario-time-item {
  width: 100%;
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--c-ink-soft);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.mario-time-item i { font-size: 13px; opacity: .7; text-align: center; }
.mario-time-item small { font-family: var(--f-mono); font-size: 12px; font-weight: 500; opacity: .55; letter-spacing: .02em; }
.mario-time-item:hover { background: rgba(44, 24, 16, 0.05); color: var(--c-ink); }
.mario-time-item.active { background: var(--c-accent); color: var(--c-paper); }
.mario-time-item.active i, .mario-time-item.active small { opacity: .9; color: var(--c-paper); }

.play-status {
  text-align: center;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--c-ink-muted);
  letter-spacing: 1px;
  min-height: 18px;
  padding: 0 4px;
}

/* История ходов */
.play-history {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: max-content !important;
  flex: none !important;
  justify-content: flex-start !important;
  padding-bottom: 16px !important;
}
.play-history[hidden] { display: none; }
.play-side-head {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-line);
}

.moves-list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; 
  gap: 4px;
  font-family: var(--f-mono);
  font-size: 14px;
  line-height: 1.7;
  flex: none !important;
  height: 155px !important;
  min-height: 155px !important;
  max-height: 155px !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
}
.moves-empty { color: var(--c-ink-muted); font-size: 13px; text-align: center; margin-top: 20px; font-family: var(--f-sans); }

.move-row {
  display: grid;
  grid-template-columns: 32px 1fr 1fr;
  gap: 4px;
  align-items: center;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  transition: background var(--t-fast);
}
.move-row:hover { background: rgba(44, 24, 16, 0.04); }
.move-row.current { background: rgba(181, 114, 44, 0.15); color: var(--c-accent-deep); }
.move-num { color: var(--c-ink-muted); font-size: 13px; text-align: right; padding-right: 6px; opacity: 0.7; }
.move-white, .move-black { font-weight: 500; color: var(--c-ink); }

/* =========================================================
   Кнопки звонка в шапке
   ========================================================= */
.nav-call { display: inline-flex; gap: 6px; align-items: center; padding: 4px; background: rgba(44, 24, 16, 0.06); border: 1px solid var(--c-line); border-radius: var(--r-sm); }
.nav-call[hidden] { display: none; }
.nav-call-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); color: var(--c-ink); background: transparent; transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast); font-size: 14px; }
.nav-call-btn:hover { background: rgba(44, 24, 16, 0.1); }
.nav-call-btn:active { transform: scale(0.94); }
.nav-call-btn.active { background: var(--c-accent); color: var(--c-paper); }
.nav-call-btn-end { color: var(--c-danger); }
.nav-call-btn-end:hover { background: var(--c-danger); color: var(--c-paper); }
.nav-call-btn[hidden] { display: none; }
.nav-call-mobile { margin-top: 12px; align-self: flex-start; }

/* =========================================================
   Оверлеи и модалки
   ========================================================= */
.play-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(26, 15, 10, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: fadeIn 0.25s ease; }
.play-overlay[hidden] { display: none; }
.play-overlay-card { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 40px 32px; max-width: 420px; width: 100%; text-align: center; box-shadow: var(--sh-deep); animation: popIn 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.play-overlay-title { font-family: var(--f-sans); font-size: 26px; font-weight: 700; color: var(--c-ink); margin-bottom: 8px; line-height: 1.2; }
.play-overlay-sub { font-size: 15px; color: var(--c-ink-soft); line-height: 1.5; margin-bottom: 24px; }
.play-overlay-actions { display: flex; gap: 12px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.play-end-icon { font-size: 64px; line-height: 1; margin-bottom: 16px; color: var(--c-accent); display: inline-flex; align-items: center; justify-content: center; }
.play-end-icon i { font-size: inherit; line-height: 1; }
.play-end-icon.win  { color: var(--c-accent); }
.play-end-icon.lose { color: var(--c-danger); }
.play-end-icon.draw { color: var(--c-ink-muted); }

.play-spinner { width: 56px; height: 56px; margin: 0 auto 24px; border: 4px solid var(--c-line); border-top-color: var(--c-accent); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.play-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--c-ink); color: var(--c-paper); padding: 12px 24px; border-radius: var(--r-sm); font-size: 14px; z-index: 9500; box-shadow: var(--sh-card); animation: toastIn 0.3s ease; }
.play-toast[hidden] { display: none; }
@keyframes toastIn { from { transform: translate(-50%, 20px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* =========================================================
   CALL VIDEOS — перетаскиваемый блок
   ========================================================= */
.call-videos { position: fixed; top: 100px; right: 24px; z-index: 8000; width: 280px; background: rgba(26, 15, 10, 0.92); border: 1px solid rgba(244, 232, 207, 0.15); border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow: hidden; user-select: none; transition: box-shadow .2s ease; }
.call-videos[hidden] { display: none; }
.call-videos.dragging { box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7); transition: none; }
.call-videos-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: rgba(244, 232, 207, 0.06); border-bottom: 1px solid rgba(244, 232, 207, 0.08); user-select: none; cursor: grab; touch-action: none; }
.call-videos-head:active { cursor: grabbing; }
.call-videos-head .call-videos-btn, .call-videos-head .call-videos-drag { cursor: pointer; touch-action: auto; }
.call-videos-drag { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; border: none; background: transparent; color: rgba(244, 232, 207, 0.5); font-size: 12px; flex-shrink: 0; transition: background .15s ease, color .15s ease; }
.call-videos-drag:hover { background: rgba(244, 232, 207, 0.1); color: #f4e8cf; }
.call-videos-title { font-family: var(--f-sans, sans-serif); font-size: 11px; font-weight: 600; color: rgba(244, 232, 207, 0.65); letter-spacing: 0.5px; text-transform: uppercase; flex: 1; }
.call-videos-controls { display: flex; gap: 4px; flex-shrink: 0; }
.call-videos-btn { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; border: none; background: transparent; color: rgba(244, 232, 207, 0.6); cursor: pointer; font-size: 11px; transition: background .15s ease, color .15s ease; }
.call-videos-btn:hover { background: rgba(244, 232, 207, 0.1); color: #f4e8cf; }
.call-videos-body { display: flex; flex-direction: column; gap: 4px; padding: 6px; max-height: 400px; overflow: hidden; transition: max-height .25s ease, padding .25s ease, opacity .25s ease; }
.call-videos.collapsed .call-videos-body { max-height: 0; padding: 0 6px; opacity: 0; }
.call-videos video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: #000; box-shadow: none; border: none; }

/* =========================================================
   PROMOTION MODAL
   ========================================================= */
.promo-overlay { position: fixed; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(28, 16, 8, 0.35), rgba(28, 16, 8, 0.65)); display: flex; align-items: center; justify-content: center; z-index: 100; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: promoFadeIn .18s ease-out; }
.promo-overlay[hidden] { display: none; }
@keyframes promoFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes promoPopIn { 0% { opacity: 0; transform: translateY(12px) scale(0.96); } 60% { opacity: 1; transform: translateY(-2px) scale(1.01); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
.promo-modal { position: relative; background: linear-gradient(180deg, #fbf1dc 0%, #f5e6cf 100%); border: 1px solid rgba(181, 114, 44, 0.35); border-radius: 16px; padding: 20px 22px 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 1px 0 rgba(255, 255, 255, 0.8) inset; animation: promoPopIn .28s cubic-bezier(.2, .9, .3, 1.2); text-align: center; }
.promo-modal::before { content: ''; position: absolute; top: 0; left: 16px; right: 16px; height: 2px; border-radius: 0 0 2px 2px; background: linear-gradient(90deg, transparent, var(--c-accent, #b5722c) 20%, #e8b969 50%, var(--c-accent, #b5722c) 80%, transparent); }
.promo-title { font-family: 'Cormorant Garamond', var(--f-serif, serif); font-size: 15px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--c-ink-soft, #5a4536); margin-bottom: 14px; position: relative; }
.promo-title::after { content: ''; display: block; width: 32px; height: 1px; margin: 8px auto 0; background: linear-gradient(90deg, transparent, var(--c-accent), transparent); opacity: .6; }
.promo-choices { display: flex; gap: 10px; }
.promo-btn { position: relative; width: 64px; height: 64px; border-radius: 12px; border: 1.5px solid rgba(181, 114, 44, 0.25); background: linear-gradient(180deg, #ffffff 0%, #f3e9d6 100%); cursor: pointer; font-size: 32px; color: #3a2418; display: flex; align-items: center; justify-content: center; transition: all .18s cubic-bezier(.2, .9, .3, 1.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 10px rgba(138, 82, 28, 0.10); -webkit-tap-highlight-color: transparent; }
.promo-btn i { pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15)); }
.promo-btn:hover { transform: translateY(-3px) scale(1.04); border-color: var(--c-accent, #b5722c); box-shadow: 0 0 0 3px rgba(181, 114, 44, 0.15), 0 10px 22px rgba(138, 82, 28, 0.25); }
.promo-btn:active { transform: translateY(-1px) scale(1.01); }
.promo-overlay[data-color="w"] .promo-btn { color: #4a3520; }
.promo-overlay[data-color="b"] .promo-btn { color: #1a1108; }
.promo-btn[data-piece="q"]:hover { border-color: #d4a44a; }
.promo-btn[data-piece="r"]:hover { border-color: #8a521c; }
.promo-btn[data-piece="b"]:hover { border-color: #4a6d8a; }
.promo-btn[data-piece="n"]:hover { border-color: #6d5a8a; }



.play-player.is-premium {
  background: linear-gradient(135deg, #fff6e6 0%, #f5d79f 50%, #e8b969 100%) !important;
  border-color: #d4a44a !important;
  box-shadow: 0 4px 15px rgba(212, 164, 74, 0.3) !important;
}

/* Опционально: делаем текст чуть темнее для контраста */
.play-player.is-premium .play-player-name {
  color: #5a3a10;
}
.play-player.is-premium .play-player-badge {
  background: rgba(255, 255, 255, 0.5);
}

/* =========================================================
   БЕЙДЖ PREMIUM
   ========================================================= */
.premium-badge {
  display: none; /* по умолчанию скрыт */
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 12px;
  background: linear-gradient(135deg, #f5d79f 0%, #d4a44a 100%);
  color: #4a2a1a;
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 100px;
  box-shadow: 0 2px 8px rgba(212, 164, 74, 0.4);
  margin: 4px 0;
  width: max-content;
}

.premium-badge i {
  font-size: 10px;
  color: #8a521c;
}

/* Показываем бейдж, если у карточки есть класс is-premium */
.play-player.is-premium .premium-badge {
  display: flex;
}

/* Скрываем, если hidden */
.premium-badge[hidden] {
  display: none !important;
}

/* =========================================================
   Адаптив
   ========================================================= */
@media (max-width: 1200px) {
  .play-layout { grid-template-columns: 180px minmax(0, 1fr) 280px; gap: var(--gap-md); }
  .play-player-avatar { width: 52px; height: 52px; font-size: 22px; }
  .play-player-clock { font-size: 24px; }
}

@media (max-width: 900px) {
  .play { min-height: auto; padding-top: calc(80px + env(safe-area-inset-top)); padding-bottom: calc(24px + env(safe-area-inset-bottom)); padding-left: calc(12px + env(safe-area-inset-left)); padding-right: calc(12px + env(safe-area-inset-right)); }
  .play-layout { grid-template-columns: 1fr; min-height: 0; gap: var(--gap-md); }
  .play-center { order: 1; width: 100%; max-width: 100%; min-width: 0; min-height: 0; overflow: hidden; }
  .play-players { order: 2; flex-direction: row; gap: var(--gap-sm); }
  .play-side { order: 3; position: static; max-height: none; }
  
  .play .board-frame { height: auto; width: 100%; max-width: min(100%, calc(100dvh - 320px), 560px); max-height: none; aspect-ratio: 1 / 1; margin: 0 auto; padding: 8px; }
  
  .play-player { aspect-ratio: auto; flex: 1; padding: 12px; }
  .play-player-avatar { width: 44px; height: 44px; font-size: 18px; }
  .play-player-clock { font-size: 20px; padding: 6px 10px; }
  .play-history { max-height: 240px; }
  .call-videos { top: auto; bottom: 16px; right: 16px; width: 200px; }
  
  /* УВЕЛИЧЕНИЕ ФИГУР НА МОБИЛЬНЫХ */
  .play .board-frame .sq,
  #pvpBoardFrame .sq,
  .analysis-board .sq {
    font-size: clamp(22px, 6vw, 38px) !important;
  }
}

@media (max-width: 700px) {
  .play .board-frame { max-width: min(100%, calc(100dvh - 340px), 520px); }
  .play-player { padding: 10px 8px; }
  .play-player-avatar { width: 36px; height: 36px; font-size: 15px; }
  .play-player-clock { font-size: 16px; padding: 4px 8px; min-width: 60px; }
  .play-player-name { font-size: 13px; }
  .play-player-status { font-size: 10px; letter-spacing: 0.5px; }
  .play-overlay-card { padding: 32px 24px; }
  .play-overlay-title { font-size: 22px; }
  .play-end-icon { font-size: 48px; }
}

@media (max-width: 640px) {
  .call-videos { width: calc(100% - 24px); max-width: 320px; top: 90px; right: 12px; bottom: auto; left: auto; }
  .play-player-avatar .plan-ribbon { height: 12px; }
  .play-player-avatar .plan-ribbon span { font-size: 6px; line-height: 12px; letter-spacing: 1px; }
}

@media (max-height: 700px) and (min-width: 901px) {
  .play .board-frame { max-height: calc(100vh - 140px); }
  .play-layout { min-height: calc(100vh - 140px); }
}

@media (max-width: 900px) and (orientation: landscape) {
  .play { padding-top: calc(60px + env(safe-area-inset-top)); padding-bottom: 8px; }
  .play .board-frame { max-width: min(100%, calc(100dvh - 140px), 480px); max-height: calc(100dvh - 140px); }
  .play-layout { grid-template-columns: 1fr; gap: var(--gap-sm); }
  .play-players { flex-direction: row; order: 2; }
  .play-side { order: 3; }
}

@media (max-width: 480px) {
  .play { padding-top: calc(72px + env(safe-area-inset-top)); }
  .play .board-frame { max-width: min(100%, calc(100dvh - 360px), 440px); padding: 6px; }
  .play-player-avatar { width: 32px; height: 32px; font-size: 13px; }
  .play-player-clock { font-size: 14px; padding: 4px 6px; }
  .play-player-name { font-size: 12px; }
  .play-player-status { font-size: 9px; }
  .play-overlay-card { padding: 24px 18px; }
  .play-overlay-title { font-size: 20px; }
  .play-end-icon { font-size: 40px; }
  .moves-list { font-size: 12px; }
  .play-history { max-height: 200px; }
  .promo-modal { padding: 16px 16px 14px; border-radius: 14px; }
  .promo-btn { width: 56px; height: 56px; font-size: 26px; border-radius: 10px; }
  .promo-choices { gap: 8px; }
  .promo-title { font-size: 13px; margin-bottom: 12px; }
  
  .play .board-frame .sq,
  #pvpBoardFrame .sq,
  .analysis-board .sq {
    font-size: clamp(24px, 7vw, 42px) !important;
  }
}

@media (max-width: 380px) {
  .play-player-avatar { width: 28px; height: 28px; font-size: 12px; }
  .play-player-clock { font-size: 13px; }
  .play .board-frame { padding: 4px; }
  .play-overlay-title { font-size: 18px; }
  .play-end-icon { font-size: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .play *, .call-videos * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

[hidden] { display: none !important; }

/* =========================================================
   Кнопки действий и прочее
   ========================================================= */
.play-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.play-action { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--c-line-strong); background: transparent; color: var(--c-ink); font-family: var(--f-sans); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s ease; white-space: nowrap; }
.play-action i { font-size: 12px; opacity: .75; }
.play-action.neutral:hover { background: rgba(44, 24, 16, 0.05); border-color: var(--c-ink); }
.play-action.danger { color: var(--c-danger); border-color: rgba(181, 61, 61, 0.4); }
.play-action.danger i { opacity: .9; }
.play-action.danger:hover { background: rgba(181, 61, 61, 0.08); border-color: var(--c-danger); }
.play-action[hidden] { display: none; }
#opponentBar { cursor: pointer; }
#opponentBar:hover { border-color: var(--c-accent); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(181, 114, 44, 0.15); }

.play-action.mario-action { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 10px 12px; border-radius: 8px; border: none; background: linear-gradient(135deg, #b58863 0%, #8a6136 100%); color: #fff; font-family: var(--f-sans); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s ease, transform .15s ease, box-shadow .15s ease; box-shadow: 0 4px 12px rgba(181, 136, 99, .3); white-space: nowrap; }
.play-action.mario-action:hover:not(:disabled) { background: linear-gradient(135deg, #a3784f 0%, #7a562f 100%); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(181, 136, 99, .4); }
.play-action.mario-action:active:not(:disabled) { transform: translateY(0); }
.play-action.mario-action:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.play-action.mario-action i { font-size: 12px; opacity: .9; }
.play-action.mario-action[hidden] { display: none; }

/* ============================================================
   МАРИО · БАННЕР ПОВЕРХ ДОСКИ
   ============================================================ */
.mario-banner { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 20; background: linear-gradient(135deg, #2c1810 0%, #1f1008 100%); color: #f5e6d3; border-radius: 12px; padding: 12px 14px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); border: 1px solid rgba(181, 136, 99, 0.3); animation: marioBannerIn 0.25s cubic-bezier(0.22, 1, 0.36, 1); backdrop-filter: blur(6px); }
.mario-banner[hidden] { display: none; }
@keyframes marioBannerIn { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.mario-banner-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mario-banner-avatar { width: 28px; height: 28px; border-radius: 8px; background: #b58863; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.mario-banner-eval { font-family: var(--f-mono); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: #86efac; }
.mario-banner-eval.neg  { color: #fca5a5; }
.mario-banner-eval.even { color: #cbd5e1; }
.mario-banner-side { flex: 1; font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; color: rgba(245, 230, 211, 0.65); }
.mario-banner-close { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); color: #f5e6d3; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 12px; transition: background 0.15s; flex-shrink: 0; }
.mario-banner-close:hover { background: rgba(255, 255, 255, 0.14); }
.mario-banner-body { display: flex; flex-direction: column; gap: 6px; }
.mario-banner-row { display: flex; align-items: baseline; gap: 10px; font-family: var(--f-mono); font-size: 12px; }
.mario-banner-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: rgba(245, 230, 211, 0.45); min-width: 70px; flex-shrink: 0; }
.mario-banner-value { color: #f5e6d3; font-weight: 600; word-break: break-word; }
.mario-banner-pv { font-weight: 500; color: rgba(245, 230, 211, 0.85); line-height: 1.5; }
@media (max-width: 640px) { .mario-banner { top: 8px; left: 8px; right: 8px; padding: 10px 12px; } .mario-banner-eval { font-size: 16px; } .mario-banner-row { font-size: 11px; } }

/* =========================================================
   PLANS — модалка подписок
   ========================================================= */
.plans-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(26, 15, 10, 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.plans-overlay[hidden] { display: none !important; }
.plans-modal { width: 100%; max-width: 680px; max-height: 92vh; background: #ffffff !important; border: 1px solid #e5e0d8; border-radius: 24px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; overflow: hidden; }
.plans-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid #e5e0d8; flex-shrink: 0; background: #ffffff; }
.plans-title { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #2c1810; }
.plans-title i { color: #b5722c; font-size: 20px; }
.plans-close { width: 36px; height: 36px; border-radius: 50%; background: transparent; color: #7a6b63; border: 1px solid #e5e0d8; font-size: 16px; cursor: pointer; transition: all .2s ease; display: flex; align-items: center; justify-content: center; }
.plans-close:hover { background: #f5f3eb; color: #2c1810; }
.plans-body { padding: 32px 32px 24px; overflow-y: auto; background: #ffffff; }
.plans-intro { font-size: 15px; color: #7a6b63; text-align: center; max-width: 480px; margin: 0 auto 28px; line-height: 1.5; }
.plans-grid, .plans-grid-single { display: block; }
.plan-card { position: relative; display: flex; flex-direction: column; padding: 32px; background: #ffffff !important; border: 1px solid #e5e0d8; border-radius: 20px; box-shadow: 0 12px 32px rgba(181, 114, 44, 0.08); }
.plan-card.featured { border: 1px solid #e5e0d8; }
.plan-head h3 { display: none; }
.plan-price { font-family: monospace; font-size: 36px; font-weight: 700; color: #2c1810; line-height: 1; margin: 0; }
.plan-price span { font-size: 16px; font-weight: 500; color: #7a6b63; }
.plan-period { font-size: 13px; color: #7a6b63; margin-top: 6px; margin-bottom: 24px; }
.plan-desc { margin: 0 0 24px; font-size: 15px; line-height: 1.6; color: #2c1810; padding-bottom: 24px; border-bottom: 1px dashed #e5e0d8; }
.plan-features { list-style: none; padding: 0; margin: 0 0 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.plan-features li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.4; color: #2c1810; }
.plan-features li i { color: #4a7c4a; font-size: 14px; margin-top: 2px; flex-shrink: 0; }
.plan-actions { display: flex; gap: 12px; margin-top: auto; }
.plan-btn { padding: 16px; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all .2s ease; text-align: center; }
.plan-btn.secondary { flex: 1; background: transparent; border: 1px solid #e5e0d8; color: #7a6b63; }
.plan-btn.secondary:hover { background: #f5f3eb; color: #2c1810; }
.plan-btn.primary { flex: 2; background: #2c1810; border: 1px solid #2c1810; color: #ffffff; }
.plan-btn.primary:hover:not(:disabled) { background: #8a521c; border-color: #8a521c; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(138, 82, 28, 0.3); }
.plan-btn:disabled { opacity: .5; cursor: not-allowed; }
.plans-footnote { text-align: center; font-size: 12px; color: #9aa3b2; margin-top: 24px; line-height: 1.5; }
@media (max-width: 640px) { .plan-features { grid-template-columns: 1fr; } .plan-actions { flex-direction: column; } .plans-body { padding: 20px; } .plan-card { padding: 20px; } }
.cancel-btn { display: block; width: max-content; margin: 16px auto 0; padding: 12px 32px; background: #ffffff; border: 1px solid #e5e0d8; color: #2c1810; font-family: inherit; font-size: 14px; font-weight: 600; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; }
.cancel-btn:hover { background: #f5f3eb; border-color: #2c1810 }
#movesList { height: 300px; max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
#movesList::-webkit-scrollbar { width: 6px; }
#movesList::-webkit-scrollbar-track { background: transparent; }
#movesList::-webkit-scrollbar-thumb { background: #e5e0d8; border-radius: 4px; }

.play-end-actions { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--sh-soft); margin-top: 12px; animation: fadeIn 0.3s ease; }
.play-end-actions[hidden] { display: none !important; }
.play-end-actions .btn { width: 100%; justify-content: center; }

.mario-analysis-box { margin-top: 12px; padding: 12px; background: #fdfbf7; border: 1px solid #e5e0d8; border-radius: 8px; animation: fadeIn 0.3s ease; }
.mario-analysis-box[hidden] { display: none !important; }
.mario-analysis-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #9aa3b2; font-weight: 700; margin-bottom: 8px; }

/* =========================================================
   ТЕМЫ И ФИГУРЫ — игровая доска
   ========================================================= */
#pvpBoardFrame, .play .board-frame { --board-light: var(--c-board-light); --board-dark: var(--c-board-dark); --board-frame: var(--c-board-frame); --piece-white: #ffffff; --piece-black: #1a1a1a; border-color: var(--board-frame); }
#pvpBoardFrame .sq.light, .play .board-frame .sq.light { background: var(--board-light); }
#pvpBoardFrame .sq.dark, .play .board-frame .sq.dark  { background: var(--board-dark); }
#pvpBoardFrame .piece.white, .play .board-frame .piece.white { color: var(--piece-white); }
#pvpBoardFrame .piece.black, .play .board-frame .piece.black { color: var(--piece-black); }

/* ТЕМЫ ДОСКИ */
#pvpBoardFrame.theme-classic, .play .board-frame.theme-classic { --board-light: var(--c-board-light); --board-dark: var(--c-board-dark); --board-frame: var(--c-board-frame); --hl-color: rgba(181, 114, 44, 0.6); --hl-capture: rgba(220, 38, 38, 0.4); }
#pvpBoardFrame.theme-marble, .play .board-frame.theme-marble { --board-light: #e8ddc8; --board-dark: #a89a88; --board-frame: #5a4a3a; --hl-color: rgba(138, 82, 28, 0.6); --hl-capture: rgba(180, 40, 40, 0.5); }
#pvpBoardFrame.theme-neon, .play .board-frame.theme-neon { --board-light: #1a2b4a; --board-dark: #0d1626; --board-frame: #4affff; --hl-color: rgba(74, 255, 255, 0.7); --hl-capture: rgba(255, 74, 255, 0.6); }
#pvpBoardFrame.theme-gothic, .play .board-frame.theme-gothic { --board-light: #3a2f26; --board-dark: #1a1208; --board-frame: var(--c-accent); --hl-color: rgba(200, 50, 50, 0.6); --hl-capture: rgba(255, 20, 20, 0.7); }
#pvpBoardFrame.theme-space, .play .board-frame.theme-space { --board-light: #2a3a5a; --board-dark: #10182a; --board-frame: #5a7aaa; --hl-color: rgba(138, 114, 255, 0.7); --hl-capture: rgba(255, 114, 200, 0.6); }
#pvpBoardFrame.theme-wood, .play .board-frame.theme-wood { --board-light: #f0d9b5; --board-dark: #b58863; --board-frame: #6b4423; --hl-color: rgba(212, 165, 116, 0.7); --hl-capture: rgba(180, 60, 40, 0.5); }
#pvpBoardFrame.theme-green, .play .board-frame.theme-green { --board-light: #eeeed2; --board-dark: #769656; --board-frame: #4a6b2a; --hl-color: rgba(118, 150, 86, 0.7); --hl-capture: rgba(200, 50, 50, 0.5); }
#pvpBoardFrame.theme-blue, .play .board-frame.theme-blue { --board-light: #dee3e6; --board-dark: #8ca2ad; --board-frame: #4a6572; --hl-color: rgba(74, 101, 114, 0.7); --hl-capture: rgba(200, 60, 60, 0.5); }
#pvpBoardFrame.theme-ice, .play .board-frame.theme-ice { --board-light: #eaf6fb; --board-dark: #7fb3d5; --board-frame: #3a7ca5; --hl-color: rgba(58, 124, 165, 0.6); --hl-capture: rgba(220, 80, 80, 0.5); }
#pvpBoardFrame.theme-emerald, .play .board-frame.theme-emerald { --board-light: #e8f0e4; --board-dark: #4a7c59; --board-frame: #2d4a36; --hl-color: rgba(74, 124, 89, 0.7); --hl-capture: rgba(200, 50, 50, 0.5); }
#pvpBoardFrame.theme-coral, .play .board-frame.theme-coral { --board-light: #ffe8d6; --board-dark: #e07a5f; --board-frame: #a04530; --hl-color: rgba(160, 69, 48, 0.6); --hl-capture: rgba(220, 30, 30, 0.6); }
#pvpBoardFrame.theme-midnight, .play .board-frame.theme-midnight { --board-light: #3a3a52; --board-dark: #1a1a2e; --board-frame: #0a0a18; --hl-color: rgba(100, 100, 200, 0.7); --hl-capture: rgba(200, 50, 100, 0.6); }

/* НАБОРЫ ФИГУР */
#pvpBoardFrame.pieces-classic, .play .board-frame.pieces-classic { --piece-white: #ffffff; --piece-black: #1a1a1a; --hl-color: rgba(181, 114, 44, 0.6); --hl-capture: rgba(220, 38, 38, 0.4); }
#pvpBoardFrame.pieces-gold, .play .board-frame.pieces-gold { --piece-white: #f4d78a; --piece-black: var(--c-accent-deep); --hl-color: rgba(244, 215, 138, 0.7); --hl-capture: rgba(138, 82, 28, 0.6); }
#pvpBoardFrame.pieces-gold .piece.white, .play .board-frame.pieces-gold .piece.white { filter: drop-shadow(0 1px 3px rgba(244, 215, 138, .6)); }
#pvpBoardFrame.pieces-gold .piece.black, .play .board-frame.pieces-gold .piece.black { filter: drop-shadow(0 1px 2px rgba(138, 82, 28, .5)); }
#pvpBoardFrame.pieces-neon, .play .board-frame.pieces-neon { --piece-white: #4affff; --piece-black: #ff4aff; --hl-color: rgba(74, 255, 255, 0.8); --hl-capture: rgba(255, 74, 255, 0.8); }
#pvpBoardFrame.pieces-neon .piece.white, .play .board-frame.pieces-neon .piece.white { filter: drop-shadow(0 0 8px rgba(74, 255, 255, .9)); }
#pvpBoardFrame.pieces-neon .piece.black, .play .board-frame.pieces-neon .piece.black { filter: drop-shadow(0 0 8px rgba(255, 74, 255, .9)); }
#pvpBoardFrame.pieces-warm, .play .board-frame.pieces-warm { --piece-white: var(--c-board-light); --piece-black: #4a2a1a; --hl-color: rgba(240, 217, 181, 0.7); --hl-capture: rgba(180, 60, 40, 0.5); }
#pvpBoardFrame.pieces-warm .piece.white, .play .board-frame.pieces-warm .piece.white { filter: drop-shadow(0 1px 2px rgba(44, 24, 16, .5)); }
#pvpBoardFrame.pieces-silver, .play .board-frame.pieces-silver { --piece-white: #e8e8e8; --piece-black: #4a4a4a; --hl-color: rgba(200, 200, 200, 0.7); --hl-capture: rgba(200, 80, 80, 0.5); }
#pvpBoardFrame.pieces-ice, .play .board-frame.pieces-ice { --piece-white: #ffffff; --piece-black: #5a9bc4; --hl-color: rgba(90, 155, 196, 0.6); --hl-capture: rgba(220, 80, 80, 0.5); }
#pvpBoardFrame.pieces-ice .piece.white, .play .board-frame.pieces-ice .piece.white { filter: drop-shadow(0 0 4px rgba(90, 155, 196, .5)); }
#pvpBoardFrame.pieces-emerald, .play .board-frame.pieces-emerald { --piece-white: #f0fff4; --piece-black: #2d6a4f; --hl-color: rgba(45, 106, 79, 0.7); --hl-capture: rgba(200, 50, 50, 0.5); }
#pvpBoardFrame.pieces-emerald .piece.white, .play .board-frame.pieces-emerald .piece.white { filter: drop-shadow(0 1px 2px rgba(45, 106, 79, .4)); }
#pvpBoardFrame.pieces-coral, .play .board-frame.pieces-coral { --piece-white: #fff8f0; --piece-black: #c1440e; --hl-color: rgba(193, 68, 14, 0.6); --hl-capture: rgba(220, 30, 30, 0.6); }
#pvpBoardFrame.pieces-coral .piece.white, .play .board-frame.pieces-coral .piece.white { filter: drop-shadow(0 1px 2px rgba(193, 68, 14, .4)); }

/* SETTINGS ROW + SWITCH */
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; transition: background .15s; }
.setting-row:last-child { border-bottom: none; }
.setting-row:hover { background: rgba(44, 24, 16, .02); }
.setting-info { min-width: 0; flex: 1; }
.setting-name { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--c-ink, #2c1810); font-size: 15px; }
.setting-desc { font-size: 13px; color: var(--c-ink-muted, #9a8a7a); margin-top: 4px; }
.switch { position: relative; width: 48px; height: 26px; flex-shrink: 0; }
.switch input { display: none; }
.switch-slider { position: absolute; inset: 0; background: rgba(44, 24, 16, .15); border-radius: 999px; cursor: pointer; transition: background .2s; }
.switch-slider::before { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #f4e8cf; border-radius: 50%; transition: transform .25s cubic-bezier(.2, .9, .3, 1.2); box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.switch input:checked + .switch-slider { background: var(--c-accent, #b5722c); }
.switch input:checked + .switch-slider::before { transform: translateX(22px); }
.play-controls .setting-row { padding: 12px 14px; gap: 12px; margin: 4px 0 12px; border: 1px solid var(--c-line, rgba(44, 24, 16, .12)); border-radius: 10px; background: rgba(44, 24, 16, .04); }
.play-controls .setting-row .setting-name { font-size: 14px; }
.play-controls .setting-row .setting-desc { font-size: 11px; margin-top: 2px; line-height: 1.3; }
@media (max-width: 900px) {
  .play-controls .setting-row { padding: 10px 12px; gap: 10px; }
  .play-controls .setting-row .setting-name { font-size: 13px; }
  .play-controls .setting-row .setting-desc { font-size: 10px; }
  .switch { width: 42px; height: 24px; }
  .switch-slider::before { width: 18px; height: 18px; }
  .switch input:checked + .switch-slider::before { transform: translateX(18px); }
  .play-history { background: var(--c-paper) !important; border: 1px solid var(--c-line) !important; border-radius: var(--r-md) !important; padding: 16px !important; margin-bottom: 24px !important; }
  .play-side-head[data-i18n="play.feedbackTitle"] { margin-top: 16px !important; padding-top: 16px !important; border-top: 1px dashed var(--c-line) !important; }
  .play-feedback { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 16px 0 !important; }
  .player-private-message { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; }
}

.play-side-head[data-i18n="play.feedbackTitle"] { margin-top: 0 !important; padding-top: 16px !important; }
.play-feedback { height: max-content !important; margin: 0 !important; padding: 16px 0 0 0 !important; border: none !important; }

/* =========================================================
   ПОДСВЕТКА ХОДОВ (PvP) — КАК НА LICHESS (ФИНАЛ)
   ========================================================= */

.play .board-frame .sq, #pvpBoardFrame .sq, .play .board-frame .sq:focus, .play .board-frame .sq:active {
  outline: none !important;
  border: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* 1. ВЫБРАННАЯ ФИГУРА */
.play .board-frame .sq.selected, #pvpBoardFrame .sq.selected {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

/* 2. ТОЧКА НА ПУСТОЙ КЛЕТКЕ */
.play .board-frame .sq.valid-move::after, #pvpBoardFrame .sq.valid-move::after {
  content: '';
  position: absolute;
  width: 30%; height: 30%;
  border-radius: 50%; 
  pointer-events: none;
  z-index: 5;
  transition: transform 0.1s ease, opacity 0.1s ease;
  background-color: rgba(0, 0, 0, 0.2) !important;
}
.play .board-frame .sq.dark.valid-move::after, #pvpBoardFrame .sq.dark.valid-move::after {
  background-color: rgba(0, 0, 0, 0.3) !important;
}
.play .board-frame .sq.valid-move:hover::after, #pvpBoardFrame .sq.valid-move:hover::after {
  transform: scale(1.2);
  opacity: 0.9;
}

/* 3. ВЗЯТИЕ */
.play .board-frame .sq.valid-capture, #pvpBoardFrame .sq.valid-capture {
  background-color: rgba(0, 0, 0, 0.2) !important;
}
.play .board-frame .sq.valid-capture::after, #pvpBoardFrame .sq.valid-capture::after {
  display: none !important; 
}

/* 4. ПОСЛЕДНИЙ ХОД — на основе цвета темной клетки, без бордеров */
.play .board-frame .sq.last-move, #pvpBoardFrame .sq.last-move {
  background-color: color-mix(in srgb, var(--board-dark, #74625c) 80%, black) !important;
}
.play .board-frame .sq.light.last-move, #pvpBoardFrame .sq.light.last-move {
  background-color: color-mix(in srgb, var(--board-dark, #74625c) 60%, white) !important;
}

/* Кнопка записи (красная при записи) */
.nav-call-btn-record i { color: inherit !important; }
.nav-call-btn-record.recording-active i {
  color: #e74c3c !important; 
  animation: recordPulse 1s infinite !important;
}
@keyframes recordPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* =========================================================
   СТИЛЬНЫЙ БЛОК ЗВОНКА (в правой колонке)
   ========================================================= */
.play-call-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-soft);
  margin-bottom: 8px;
  width: 100%;           /* <-- ВОТ ЭТО ЗАСТАВИТ РАСТЯНУТЬСЯ */
  box-sizing: border-box; /* чтобы padding не ломал ширину */
}
.play-call-wrapper[hidden] {
  display: none !important;
}

/* Кнопки внутри */
.play-call-wrapper .nav-call-btn {
  flex: 1 1 0% !important;      /* Жестко делим поровну */
  width: auto !important;       /* Отменяем фиксированные 36px */
  max-width: none !important;   
  height: 40px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--c-ink-soft);
  font-size: 15px;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  margin: 0 !important;
}

/* Наведение */
.play-call-wrapper .nav-call-btn:hover {
  background: rgba(44, 24, 16, 0.05);
  color: var(--c-ink);
}

/* Активное состояние (когда микрофон или видео включены) */
.play-call-wrapper .nav-call-btn.active {
  background: rgba(181, 114, 44, 0.12);
  color: var(--c-accent-deep);
  border-color: rgba(181, 114, 44, 0.2);
}

/* Кнопка записи (красная точка) */
#recordBtn i {
  font-size: 12px;
  color: var(--c-danger);
}
#recordBtn.recording-active i {
  animation: recordPulse 1s infinite;
}

/* Кнопка сброса (отбой) */
.play-call-wrapper .nav-call-btn-end {
  color: var(--c-danger);
}
.play-call-wrapper .nav-call-btn-end:hover {
  background: rgba(181, 61, 61, 0.1);
}

.play-side > .nav-call {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding: 6px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-soft);
}
.play-side > .nav-call[hidden] {
  display: none !important;
}
.play-side > .nav-call .nav-call-btn {
  flex: 1 1 0% !important;
  width: auto !important;
  height: 40px;
}

/* Заглушки (недоступные кнопки) */
.play-call-wrapper .nav-call-btn.is-muted,
.play-side > .nav-call .nav-call-btn.is-muted {
  opacity: 0.45;
  color: var(--c-ink-muted);
  cursor: not-allowed;
}

.play-call-wrapper .nav-call-btn.is-muted:hover,
.play-side > .nav-call .nav-call-btn.is-muted:hover {
  background: rgba(44, 24, 16, 0.03); /* Без яркого эффекта при наведении */
  color: var(--c-ink-muted);
}

/* =========================================================
   МОДАЛКА ВЫБОРА ВРЕМЕНИ (Стиль: Premium Wood)
   ========================================================= */

#timeSelectOverlay .play-overlay-title {
  font-family: var(--f-sans); 
  font-size: 28px;
  letter-spacing: 0.5px;
}

#timeSelectOverlay .play-overlay-card {
  background: var(--c-paper);
  border: 1px solid var(--c-line-strong);
  box-shadow: 0 24px 60px rgba(44, 24, 16, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}   

.time-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 28px;
}

.time-card {
  position: relative;
  /* background: linear-gradient(180deg, #fffcf5 0%, #f4ebd9 100%); */
  border: 1px solid rgba(181, 114, 44, 0.25);
  border-radius: 14px;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
  /* box-shadow: 0 4px 12px rgba(44, 24, 16, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8); */
  overflow: hidden;
}

/* Эффект при наведении */
.time-card:hover {
  transform: translateY(-3px);
  border-color: #b5722c;
  /* box-shadow: 0 8px 24px rgba(181, 114, 44, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8); */
  /* background: linear-gradient(180deg, #ffffff 0%, #f8f0e1 100%); */
}

.time-card:active {
  transform: translateY(-1px);
}

/* Текст (цифры) */
.time-card-val {
  font-size: 34px;
  font-weight: 700;
  color: #2c1810;
  font-family: var(--f-sans); /* Используем ваш моно-шрифт */
  line-height: 1;
  letter-spacing: -1px;
  position: relative;
  z-index: 2;
}

/* Текст (название режима) */
.time-card-name {
  font-size: 11px;
  color: #8a6b5e;
  margin-top: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 600;
  position: relative;
  z-index: 2;
}

/* Декоративный элемент (шахматная фигура на фоне) */
.time-card::before {
  content: '\f439'; /* Код иконки шахматного коня (fa-chess-knight) в FontAwesome */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  right: -10px;
  bottom: -15px;
  font-size: 80px;
  color: rgba(181, 114, 44, 0.05); /* Еле заметный фон */
  z-index: 1;
  pointer-events: none;
  transform: rotate(-15deg);
  transition: all 0.3s ease;
}

/* При наведении конь становится чуть заметнее */
.time-card:hover::before {
  color: rgba(181, 114, 44, 0.1);
  transform: rotate(-10deg) scale(1.05);
}

/* Индивидуальные цвета для разных режимов */
.time-card[data-tc="bullet"]:hover { border-color: #b5722c }
.time-card[data-tc="bullet"]::before { content: '\f0e7'; }

.time-card[data-tc="rapid"]:hover { border-color: #b5722c }
.time-card[data-tc="rapid"]::before { content: '\f017'; }

.time-card[data-tc="classical"]:hover { border-color: #b5722c }
.time-card[data-tc="classical"]::before { content: '\f19c'; }