/* ================================================================
   PLAY PAGE REDESIGN — Елітний шаховий інтерфейс Gambit Club
   Повне покращення всіх розділів та компонентів
   ================================================================ */

/* ── ТОКЕНИ ДИЗАЙНУ ── */
:root {
  --pr-bg:          #030712;
  --pr-s1:          rgba(8, 16, 36, 0.96);
  --pr-s2:          rgba(14, 26, 54, 0.85);
  --pr-card:        rgba(255, 255, 255, 0.04);
  --pr-card-hov:    rgba(255, 255, 255, 0.08);
  --pr-border:      rgba(212, 175, 55, 0.16);
  --pr-border-sub:  rgba(255, 255, 255, 0.08);
  --pr-gold:        #d4af37;
  --pr-gold2:       #f59e0b;
  --pr-cyan:        #06b6d4;
  --pr-green:       #10b981;
  --pr-red:         #f43f5e;
  --pr-purple:      #8b5cf6;
  --pr-txt:         #f1f5f9;
  --pr-dim:         #94a3b8;
  --pr-mute:        #64748b;
  --pr-tb-h:        50px;
}

/* ── БАЗОВІ СТИЛІ ── */
body.has-bnav {
  background: var(--pr-bg) !important;
  color: var(--pr-txt) !important;
  overflow: hidden;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Скролбари */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); }
::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, 0.2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(212, 175, 55, 0.4); }

/* ══════════════════════════════════
   1. ТОПБАР (Desktop & Mobile)
   ══════════════════════════════════ */
.play-topbar {
  height: var(--pr-tb-h) !important;
  padding: 0 18px !important;
  background: rgba(3, 7, 18, 0.96) !important;
  border-bottom: 1px solid var(--pr-border) !important;
  backdrop-filter: blur(20px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.3) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 300 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

.play-topbar-logo {
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  background: linear-gradient(135deg, #ffe066 0%, #d4af37 50%, #60b4ff 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

.play-tb-pill {
  height: 28px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  border: 1px solid var(--pr-border-sub) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--pr-dim) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  transition: all 0.18s ease !important;
}
.play-tb-pill:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--pr-txt) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
.play-tb-pill.back {
  border-color: rgba(212, 175, 55, 0.25) !important;
  background: rgba(212, 175, 55, 0.06) !important;
  color: #fef08a !important;
}
.play-tb-pill.back:hover {
  background: rgba(212, 175, 55, 0.14) !important;
  border-color: rgba(212, 175, 55, 0.45) !important;
}
.play-tb-pill.gold {
  color: var(--pr-gold) !important;
  border-color: rgba(212, 175, 55, 0.3) !important;
  background: rgba(212, 175, 55, 0.08) !important;
}
.play-tb-pill.green {
  color: var(--pr-green) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
  background: rgba(16, 185, 129, 0.08) !important;
}
.play-tb-spacer { flex: 1 !important; }

.play-tb-av {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #020815 !important;
  background: linear-gradient(135deg, var(--pr-gold), var(--pr-gold2)) !important;
  text-decoration: none !important;
  border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 10px rgba(212, 175, 55, 0.3) !important;
  transition: transform 0.18s ease !important;
}
.play-tb-av:hover { transform: scale(1.06) !important; }

/* ══════════════════════════════════
   2. МАКЕТ ЕКРАНА ГРИ (Main Layout)
   ══════════════════════════════════ */
#game-fs-root {
  padding-top: var(--pr-tb-h) !important;
  height: 100vh !important;
  box-sizing: border-box !important;
}

.play-layout {
  height: calc(100vh - var(--pr-tb-h)) !important;
  display: flex !important;
  overflow: hidden !important;
  background: var(--pr-bg) !important;
}

/* ── ЛІВА ПАНЕЛЬ (Left Panel) ── */
@media (min-width: 769px) {
  .lp {
    width: 260px !important;
    background: var(--pr-s1) !important;
    border-right: 1px solid var(--pr-border) !important;
    display: flex !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
    padding: 12px !important;
    gap: 10px !important;
    overflow-y: auto !important;
  }
}

.lp-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--pr-border-sub) !important;
}
.lp-logo {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: var(--pr-txt) !important;
  text-decoration: none !important;
}
.lp-prof-av {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--pr-gold), var(--pr-gold2)) !important;
  color: #030712 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

/* Статистика в лівій панелі */
.lp-stats {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.lp-stat-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 12px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--pr-border-sub) !important;
  border-radius: 8px !important;
}
.lp-stat-lbl { font-size: 11.5px !important; color: var(--pr-dim) !important; font-weight: 600 !important; }
.lp-stat-val { font-size: 12.5px !important; font-weight: 800 !important; color: var(--pr-txt) !important; }

/* Карточка гравця в лівій панелі під час гри */
.pc {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--pr-border-sub) !important;
  border-radius: 10px !important;
  padding: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.pc-top {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.pc-av {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #dc2626, #991b1b) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}
.pc-av.me-av {
  background: linear-gradient(135deg, var(--pr-gold), var(--pr-gold2)) !important;
  color: #030712 !important;
}
.pc-name { font-size: 13px !important; font-weight: 800 !important; color: var(--pr-txt) !important; }
.pc-rat  { font-size: 11px !important; font-weight: 700 !important; color: var(--pr-gold) !important; }

.pc-timer {
  font-family: 'SF Mono', 'Fira Mono', monospace !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  letter-spacing: -0.5px !important;
  text-align: center !important;
  padding: 6px !important;
  border-radius: 8px !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid var(--pr-border-sub) !important;
  color: var(--pr-dim) !important;
  font-variant-numeric: tabular-nums !important;
}
.pc-timer:not(.off) {
  color: #ffffff !important;
  background: rgba(212, 175, 55, 0.12) !important;
  border-color: rgba(212, 175, 55, 0.45) !important;
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.2) !important;
}
.pc-timer.low {
  color: var(--pr-red) !important;
  background: rgba(244, 63, 94, 0.12) !important;
  border-color: rgba(244, 63, 94, 0.45) !important;
  animation: pr-low-flash 0.6s infinite !important;
}

/* Захоплені фігури посередині лівої панелі */
.lp-mid {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 8px !important;
  background: rgba(0, 0, 0, 0.25) !important;
  border-radius: 8px !important;
  border: 1px solid var(--pr-border-sub) !important;
}
.lp-cap-mid {
  font-size: 20px !important;
  line-height: 1.2 !important;
  min-height: 32px !important;
  display: flex !important;
  align-items: center !important;
  color: var(--pr-txt) !important;
  letter-spacing: 2px !important;
}

/* ── Особистий кабінет ліги ── */
.lkab {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.lkab-head {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: var(--pr-gold) !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid var(--pr-border-sub) !important;
}
.lkab-balance-card {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(16, 185, 129, 0.05)) !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 10px !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.lkab-bal-lbl { font-size: 9px !important; font-weight: 800 !important; text-transform: uppercase !important; color: var(--pr-dim) !important; letter-spacing: 0.5px !important; }
.lkab-bal-amt { font-size: 18px !important; font-weight: 900 !important; color: #fef08a !important; }
.lkab-btns { display: flex !important; gap: 6px !important; margin-top: 6px !important; }
.lkab-btn-top {
  flex: 1 !important;
  padding: 6px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  border: none !important;
  transition: all 0.15s ease !important;
}
.lkab-btn-top.fill { background: linear-gradient(135deg, #10b981, #059669) !important; color: #fff !important; }
.lkab-btn-top.out  { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid var(--pr-border-sub) !important; color: var(--pr-txt) !important; }
.lkab-btn-top:hover { opacity: 0.9 !important; transform: translateY(-1px) !important; }

.lkab-progress {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--pr-border-sub) !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
}
.lkab-prog-text { font-size: 11px !important; color: var(--pr-txt) !important; }
.lkab-prog-bar  { height: 6px !important; background: rgba(0, 0, 0, 0.4) !important; border-radius: 3px !important; overflow: hidden !important; }
.lkab-prog-fill { height: 100% !important; background: linear-gradient(90deg, #10b981, #d4af37) !important; border-radius: 3px !important; transition: width 0.4s ease !important; }

.lkab-card {
  border-radius: 8px !important;
  padding: 8px 10px !important;
  font-size: 11px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.lkab-card.yellow { background: rgba(245, 158, 11, 0.08) !important; border: 1px solid rgba(245, 158, 11, 0.25) !important; }
.lkab-card.green  { background: rgba(16, 185, 129, 0.08) !important; border: 1px solid rgba(16, 185, 129, 0.25) !important; }
.lkab-card.red    { background: rgba(244, 63, 94, 0.08) !important; border: 1px solid rgba(244, 63, 94, 0.25) !important; }
.lkab-card-title  { font-weight: 800 !important; color: var(--pr-txt) !important; }
.lkab-sponsor-link { color: var(--pr-green) !important; font-weight: 800 !important; cursor: pointer !important; text-decoration: underline !important; }

/* ══════════════════════════════════
   3. ЦЕНТРАЛЬНА КОЛОНКА (Дошка)
   ══════════════════════════════════ */
.board-col {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: transparent !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 10px 14px !important;
  gap: 8px !important;
}

:root {
  --bsz: min(calc(100vw - 560px), calc(100vh - 160px), 680px) !important;
}
@media (min-width: 769px) {
  body.league-bar-on { --bsz: min(calc(100vw - 560px), calc(100vh - 210px), 640px) !important; }
  body.regular-mode-on { --bsz: min(calc(100vw - 560px), calc(100vh - 180px), 660px) !important; }
}

#board-container {
  width: var(--bsz) !important;
  position: relative !important;
  background: linear-gradient(145deg, #1f140a, #0d0804) !important;
  border: 4px solid #3d240f !important;
  border-radius: 12px !important;
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.45),
    0 12px 30px rgba(0, 0, 0, 0.8),
    0 30px 80px rgba(0, 0, 0, 0.95),
    inset 0 1px 1px rgba(255, 230, 160, 0.25),
    0 0 45px rgba(212, 175, 55, 0.15) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease !important;
}

#board-container.league-3d {
  transform: perspective(1000px) rotateX(22deg) scale(0.9) !important;
  transform-origin: 50% 40% !important;
  transform-style: preserve-3d !important;
  box-shadow:
    0 0 0 1.5px rgba(212, 175, 55, 0.6),
    0 45px 95px rgba(0, 0, 0, 0.98),
    0 25px 40px rgba(0, 0, 0, 0.8),
    0 0 70px rgba(212, 175, 55, 0.35) !important;
}

#board {
  border-radius: 6px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5) !important;
}

#board::before {
  content: '' !important;
  position: absolute !important;
  inset: -60% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: conic-gradient(from 90deg, transparent 0%, transparent 65%, rgba(212, 175, 55, 0.14) 100%) !important;
  animation: pr-bbeam 8s linear infinite !important;
  border-radius: 50% !important;
}
@keyframes pr-bbeam { to { transform: rotate(360deg) } }

#rankStrip, #fileStrip {
  background: linear-gradient(180deg, #1a0f06, #0e0702) !important;
}
#rankStrip > span, #fileStrip > span {
  color: #f7e3c1 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 1), 0 0 8px rgba(212, 175, 55, 0.4) !important;
}

.sq.light {
  background: var(--sq-l, #dee3e6) !important;
  box-shadow: inset 0 0 14px rgba(255, 255, 255, 0.18) !important;
}
.sq.dark {
  background: var(--sq-d, #8ca2ad) !important;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.28) !important;
}
.sq.light.lastmove, .sq.dark.lastmove {
  background: rgba(212, 175, 55, 0.45) !important;
  box-shadow: inset 0 0 0 1.5px rgba(255, 235, 150, 0.8), 0 0 14px rgba(212, 175, 55, 0.4) !important;
}
.sq.light.selected, .sq.dark.selected {
  background: rgba(16, 185, 129, 0.55) !important;
  box-shadow: inset 0 0 0 2px #34d399, 0 0 20px rgba(52, 211, 153, 0.6) !important;
}

/* Realistic 3D piece depth & elevated physics */
.piece-img {
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6)) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45)) drop-shadow(0 1px 1px rgba(255, 255, 255, 0.15)) !important;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.22s ease !important;
  will-change: transform, filter;
}
.sq:hover .piece-img {
  transform: translateY(-6px) scale(1.12) !important;
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 16px rgba(212, 175, 55, 0.7)) !important;
}
.sq.sel .piece-img {
  transform: translateY(-9px) scale(1.2) !important;
  filter: drop-shadow(0 20px 28px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 20px rgba(52, 211, 153, 0.85)) !important;
}
.sq.check .piece-img {
  animation: kingCheckPulse 0.8s ease-in-out infinite !important;
  filter: drop-shadow(0 0 16px rgba(244, 63, 94, 0.95)) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.8)) !important;
}
@keyframes kingCheckPulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25%      { transform: scale(1.08) rotate(-4deg); }
  75%      { transform: scale(1.08) rotate(4deg); }
}

/* Тулбар над дошкою */
.board-toolbar {
  width: var(--bsz) !important;
  display: flex !important;
  align-items: center !important;
  padding: 6px 12px !important;
  gap: 8px !important;
  background: rgba(8, 16, 36, 0.85) !important;
  border: 1px solid var(--pr-border-sub) !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}
.opening-badge {
  flex: 1 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--pr-gold) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: left !important;
}
.tb-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--pr-border-sub) !important;
  color: var(--pr-dim) !important;
  border-radius: 6px !important;
  padding: 4px 9px !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.tb-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--pr-txt) !important;
  border-color: rgba(212, 175, 55, 0.35) !important;
}

/* Кнопки дій під дошкою */
#boardActions {
  width: var(--bsz) !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 0 !important;
  box-sizing: border-box !important;
}
#boardActions.active { display: flex !important; }

.ba-btn {
  height: 38px !important;
  flex: 1 !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  border: 1px solid var(--pr-border-sub) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--pr-txt) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: all 0.15s ease !important;
}
.ba-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
.ba-btn.red {
  border-color: rgba(244, 63, 94, 0.35) !important;
  color: #fda4af !important;
  background: rgba(244, 63, 94, 0.08) !important;
}
.ba-btn.red:hover {
  background: rgba(244, 63, 94, 0.2) !important;
  color: #fff !important;
}
.ba-btn.gold {
  border-color: rgba(212, 175, 55, 0.4) !important;
  color: var(--pr-gold) !important;
  background: rgba(212, 175, 55, 0.08) !important;
}
.ba-btn.gold:hover {
  background: rgba(212, 175, 55, 0.18) !important;
  color: #fff !important;
}

/* ══════════════════════════════════
   4. ПРАВА ПАНЕЛЬ ТА ВСІ РОЗДІЛИ (Right Panel & Sub-Tabs)
   ══════════════════════════════════ */
.rp {
  width: 290px !important;
  flex-shrink: 0 !important;
  background: var(--pr-s1) !important;
  border-left: 1px solid var(--pr-border) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Вкладки правої панелі */
.main-tabs {
  display: flex !important;
  background: rgba(4, 10, 24, 0.95) !important;
  border-bottom: 1px solid var(--pr-border) !important;
  padding: 4px 4px 0 !important;
  gap: 2px !important;
  flex-shrink: 0 !important;
}
.mtab {
  flex: 1 !important;
  height: 38px !important;
  padding: 0 4px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  color: var(--pr-dim) !important;
  cursor: pointer !important;
  border-radius: 6px 6px 0 0 !important;
  transition: all 0.16s ease !important;
  gap: 1px !important;
}
.mtab:hover {
  color: var(--pr-txt) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}
.mtab.active {
  color: var(--pr-gold) !important;
  border-bottom-color: var(--pr-gold) !important;
  background: rgba(212, 175, 55, 0.08) !important;
}
.mtab .ti { font-size: 14px !important; line-height: 1 !important; }
.mtab .tl { font-size: 9px !important; font-weight: 700 !important; line-height: 1 !important; }

.pb {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  padding: 12px !important;
  gap: 12px !important;
}
.pb.hidden { display: none !important; }

/* ── РОЗДІЛ 1: НОВА ГРА (#pb-new) ── */
.ng-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.ng-header h2 {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: var(--pr-txt) !important;
  margin: 0 !important;
}
.ng-header p {
  font-size: 11.5px !important;
  color: var(--pr-dim) !important;
  margin: 2px 0 0 !important;
}

.mode-toggle-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--pr-border-sub) !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
}
.mode-toggle {
  display: flex !important;
  gap: 4px !important;
  background: rgba(0, 0, 0, 0.3) !important;
  border-radius: 8px !important;
  padding: 3px !important;
}
.mode-btn {
  flex: 1 !important;
  padding: 6px !important;
  border-radius: 6px !important;
  border: none !important;
  background: transparent !important;
  color: var(--pr-dim) !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.mode-btn.active {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3) !important;
}
.mode-btn.regular.active {
  background: linear-gradient(135deg, var(--pr-gold), var(--pr-gold2)) !important;
  color: #030712 !important;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3) !important;
}

/* Контроль часу */
.tc-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}
.tc-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.18) !important;
  border-radius: 12px !important;
  padding: 12px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}
.tc-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0; right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
  pointer-events: none !important;
}
.tc-card:hover {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)) !important;
  border-color: rgba(212, 175, 55, 0.45) !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(212, 175, 55, 0.15) !important;
}
.tc-card.sel {
  background: linear-gradient(145deg, rgba(212, 175, 55, 0.18), rgba(212, 175, 55, 0.06)) !important;
  border-color: var(--pr-gold) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 175, 55, 0.35) !important;
  transform: translateY(-2px) !important;
}
.tc-card.sel::after {
  content: '✓' !important;
  position: absolute !important;
  top: 6px !important;
  right: 8px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  color: var(--pr-gold) !important;
}
.tc-card .tc-icon {
  font-size: 20px !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) !important;
  transition: transform 0.2s ease !important;
}
.tc-card:hover .tc-icon, .tc-card.sel .tc-icon {
  transform: scale(1.15) !important;
}
.tc-card .tc-min {
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #fff !important;
  letter-spacing: -0.2px !important;
}
.tc-card .tc-type {
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: var(--pr-dim) !important;
}
.tc-card.sel .tc-type {
  color: var(--pr-gold) !important;
}

/* Головна кнопка пошуку */
.btn-start-main {
  width: 100% !important;
  padding: 14px !important;
  background: linear-gradient(135deg, #f59e0b, #d4af37, #b45309) !important;
  background-size: 200% auto !important;
  border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 12px !important;
  color: #020817 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: 0.3px !important;
  cursor: pointer !important;
  box-shadow: 0 6px 24px rgba(212, 175, 55, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}
.btn-start-main:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  filter: brightness(1.08) !important;
}
.btn-start-main:active {
  transform: translateY(0) scale(0.99) !important;
}
.btn-start-main.searching {
  background: linear-gradient(135deg, #f43f5e, #be123c) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 6px 24px rgba(244, 63, 94, 0.45) !important;
}

/* Швидкі дії */
.ng-actions {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 6px !important;
}
.btn-ng-act {
  padding: 8px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--pr-border-sub) !important;
  border-radius: 8px !important;
  color: var(--pr-txt) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: all 0.15s ease !important;
}
.btn-ng-act:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(212, 175, 55, 0.3) !important;
}
.btn-ng-act.full { grid-column: span 2 !important; }

/* Статистика платформи в реальному часі */
.live-stats {
  display: flex !important;
  gap: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid var(--pr-border-sub) !important;
}
.ls-item {
  flex: 1 !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--pr-border-sub) !important;
  border-radius: 8px !important;
  padding: 8px !important;
  text-align: center !important;
}
.ls-val { font-size: 15px !important; font-weight: 900 !important; color: var(--pr-green) !important; }
.ls-lbl { font-size: 10px !important; font-weight: 600 !important; color: var(--pr-mute) !important; }

/* ── РОЗДІЛ 2: ІСТОРІЯ ПАРТІЙ (#pb-history) ── */
.hist-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--pr-border-sub) !important;
  border-radius: 10px !important;
  margin-bottom: 6px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.hist-row:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(212, 175, 55, 0.3) !important;
  transform: translateX(2px) !important;
}
.res-dot {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 900 !important;
  font-size: 11px !important;
  flex-shrink: 0 !important;
}
.rd-w { background: rgba(16, 185, 129, 0.15) !important; color: var(--pr-green) !important; border: 1px solid rgba(16, 185, 129, 0.35) !important; }
.rd-l { background: rgba(244, 63, 94, 0.15) !important; color: var(--pr-red) !important; border: 1px solid rgba(244, 63, 94, 0.35) !important; }
.rd-d { background: rgba(148, 163, 184, 0.15) !important; color: var(--pr-dim) !important; border: 1px solid rgba(148, 163, 184, 0.3) !important; }

/* ── РОЗДІЛ 3: ЕФІР / ПЕРЕГЛЯД (#pb-watch) ── */
.watch-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--pr-border-sub) !important;
  border-radius: 10px !important;
  margin-bottom: 6px !important;
  transition: all 0.15s ease !important;
}
.watch-row:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(6, 182, 212, 0.3) !important;
}
.wbtn {
  background: rgba(6, 182, 212, 0.12) !important;
  color: var(--pr-cyan) !important;
  border: 1px solid rgba(6, 182, 212, 0.3) !important;
  border-radius: 8px !important;
  padding: 5px 12px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.15s ease !important;
}
.wbtn:hover {
  background: rgba(6, 182, 212, 0.22) !important;
  color: #fff !important;
}

/* ── РОЗДІЛ 4: ПОШУК ГРАВЦІВ (#pb-players) ── */
.search-wrap { padding: 0 0 10px !important; }
.search-input {
  width: 100% !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--pr-border-sub) !important;
  border-radius: 10px !important;
  color: var(--pr-txt) !important;
  font-size: 13px !important;
  padding: 10px 14px !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease !important;
}
.search-input:focus { border-color: var(--pr-gold) !important; }
.player-result {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--pr-border-sub) !important;
  margin-bottom: 6px !important;
  transition: all 0.15s ease !important;
}
.player-result:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(212, 175, 55, 0.25) !important;
}
.pr-av {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
.pr-name { font-weight: 800 !important; font-size: 13px !important; color: var(--pr-txt) !important; }
.pr-rat  { font-size: 11px !important; font-weight: 700 !important; color: var(--pr-gold) !important; }
.pr-lvl  { font-size: 11px !important; color: var(--pr-mute) !important; }

/* ── РОЗДІЛ 5: ДРУЗІ (#pb-friends) ── */
.friend-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--pr-border-sub) !important;
  margin-bottom: 4px !important;
  font-size: 12px !important;
  transition: all 0.15s ease !important;
}
.friend-row:hover { background: rgba(255, 255, 255, 0.05) !important; }
.friend-av {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--pr-gold), var(--pr-gold2)) !important;
  color: #030712 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  position: relative !important;
  flex-shrink: 0 !important;
}
.f-online-dot {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: var(--pr-green) !important;
  border: 2px solid #030712 !important;
}
.fr-name { font-weight: 800 !important; flex: 1 !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.btn-challenge-fr {
  background: rgba(212, 175, 55, 0.12) !important;
  color: var(--pr-gold) !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.btn-challenge-fr:hover {
  background: rgba(212, 175, 55, 0.22) !important;
  color: #fff !important;
}
.fr-section-hdr {
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 6px 2px 2px !important;
}

/* ── РОЗДІЛ 6: ТУРНІРИ (#pb-tournaments) ── */
.tn-pb-btn {
  padding: 5px 12px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  border: 1px solid var(--pr-border-sub) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--pr-dim) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.tn-pb-btn.active {
  background: rgba(212, 175, 55, 0.15) !important;
  border-color: var(--pr-gold) !important;
  color: var(--pr-gold) !important;
}
.tn-pb-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--pr-border-sub) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.tn-pb-card:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(212, 175, 55, 0.3) !important;
}
.tn-pb-card-top {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.tn-pb-badge {
  padding: 2px 7px !important;
  border-radius: 6px !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}
.tn-pb-badge.active { background: rgba(16, 185, 129, 0.2) !important; color: var(--pr-green) !important; }
.tn-pb-badge.upcoming { background: rgba(245, 158, 11, 0.2) !important; color: var(--pr-gold2) !important; }
.tn-pb-badge.finished { background: rgba(148, 163, 184, 0.2) !important; color: var(--pr-dim) !important; }
.tn-pb-name { font-size: 13px !important; font-weight: 800 !important; color: var(--pr-txt) !important; }
.tn-pb-meta { font-size: 11px !important; color: var(--pr-dim) !important; display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }

/* ── РОЗДІЛ 7 & 8: ЛІГА ТА РЕЙТИНГ (#pb-league, #pb-leaguerating) ── */
.ldr-head {
  padding: 8px 12px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-bottom: 1px solid var(--pr-border-sub) !important;
}
.ldr-head.gold { color: var(--pr-gold) !important; }
.ldr-head.purple { color: #c084fc !important; }

/* ── РОЗДІЛ АКТИВНОЇ ГРИ (#pgame) ── */
#pgame {
  flex: 1 !important;
  display: none;
  flex-direction: column !important;
  overflow: hidden !important;
}
#pgame.on { display: flex !important; }

.ginfo {
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--pr-border-sub) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
.ginfo-opp { font-size: 14px !important; font-weight: 800 !important; color: var(--pr-txt) !important; }
.ginfo-tc  { font-size: 12px !important; font-weight: 700 !important; color: var(--pr-green) !important; }

.gtabs {
  display: flex !important;
  border-bottom: 1px solid var(--pr-border-sub) !important;
}
.gtab {
  flex: 1 !important;
  padding: 8px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: var(--pr-dim) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.gtab.active {
  color: var(--pr-gold) !important;
  border-bottom-color: var(--pr-gold) !important;
  background: rgba(212, 175, 55, 0.05) !important;
}

/* Список ходів */
.moves-pane {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 8px !important;
}
.move-row {
  display: flex !important;
  align-items: center !important;
  padding: 4px 6px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  gap: 4px !important;
}
.move-row:hover { background: rgba(255, 255, 255, 0.04) !important; }
.mr-num { color: var(--pr-mute) !important; width: 22px !important; text-align: right !important; font-weight: 700 !important; }
.mr-w, .mr-b {
  flex: 1 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  color: var(--pr-txt) !important;
  font-weight: 600 !important;
}
.mr-w:hover, .mr-b:hover, .mr-w.cur, .mr-b.cur {
  background: rgba(212, 175, 55, 0.2) !important;
  color: #fff !important;
}
.mr-tw, .mr-tb { font-size: 10px !important; color: var(--pr-mute) !important; min-width: 32px !important; text-align: right !important; }

/* Навігація по ходах */
.mv-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px !important;
  border-top: 1px solid var(--pr-border-sub) !important;
}
.mv-nav button {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--pr-border-sub) !important;
  color: var(--pr-txt) !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.mv-nav button:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(212, 175, 55, 0.3) !important;
}

/* Чат */
.chat-pane {
  flex: 1 !important;
  display: none;
  flex-direction: column !important;
  padding: 8px !important;
  gap: 6px !important;
  overflow: hidden !important;
}
.chat-pane.on { display: flex !important; }
.cmsgs {
  flex: 1 !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.cmsg { font-size: 11.5px !important; line-height: 1.4 !important; }
.cmsg .cn { font-weight: 800 !important; }
.cmsg .cn.me  { color: var(--pr-gold) !important; }
.cmsg .cn.opp { color: var(--pr-cyan) !important; }
.cmsg .cn.sys { color: var(--pr-mute) !important; font-style: italic !important; }

.chat-row {
  display: flex !important;
  gap: 6px !important;
  padding-top: 6px !important;
  border-top: 1px solid var(--pr-border-sub) !important;
}
.chat-row input {
  flex: 1 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--pr-border-sub) !important;
  border-radius: 8px !important;
  color: var(--pr-txt) !important;
  font-size: 12px !important;
  padding: 8px 10px !important;
  outline: none !important;
}
.chat-row button {
  background: linear-gradient(135deg, var(--pr-gold), var(--pr-gold2)) !important;
  color: #030712 !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

/* ══════════════════════════════════
   5. УНІФІКОВАНІ МОДАЛЬНІ ВІКНА (Modals & Overlays)
   ══════════════════════════════════ */
.eov, .chal-overlay, .inc-overlay, .modal-bg, .dc-ov, .pov {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9000 !important;
  background: rgba(2, 6, 18, 0.85) !important;
  backdrop-filter: blur(20px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
}
.eov.hidden, .chal-overlay.hidden, .inc-overlay.hidden, .modal-bg.hidden, .dc-ov.hidden, .pov.hidden {
  display: none !important;
}

.eob, .chal-box, .inc-box, .modal-box, .modal-box2, .dc-box, .pob {
  width: 100% !important;
  max-width: 400px !important;
  background: linear-gradient(165deg, rgba(14, 26, 56, 0.98), rgba(6, 12, 28, 0.98)) !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
  border-radius: 18px !important;
  padding: 24px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  box-sizing: border-box !important;
  animation: pr-modal-pop 0.3s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
@keyframes pr-modal-pop {
  from { opacity: 0; transform: scale(0.92) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ══════════════════════════════════
   6. МОБІЛЬНИЙ ЛЕЙАУТ (Mobile Responsive)
   ══════════════════════════════════ */
@media (max-width: 768px) {
  #playDesktopTopbar { display: none !important; }
  
  #mobileTopBar {
    height: 46px !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: rgba(3, 7, 18, 0.98) !important;
    border-bottom: 1px solid var(--pr-border) !important;
    z-index: 200 !important;
    flex-shrink: 0 !important;
  }
  
  #game-fs-root {
    padding-top: 0 !important;
    height: 100dvh !important;
  }
  
  .play-layout {
    height: calc(100dvh - 46px) !important;
    flex-direction: column !important;
  }
  
  .lp { display: none !important; }
  
  .board-col {
    padding: 4px 8px !important;
    gap: 4px !important;
    justify-content: space-between !important;
    flex: 1 !important;
    height: auto !important;
  }
  
  :root {
    --bsz: min(calc(100vw - 12px), calc(100dvh - 190px), 480px) !important;
  }
  
  .pstrip {
    width: var(--bsz) !important;
    height: 44px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    gap: 8px !important;
  }
  .pav { width: 32px !important; height: 32px !important; }
  .pname { font-size: 12.5px !important; }
  .ptimer { font-size: 18px !important; min-width: 70px !important; padding: 3px 6px !important; }
  
  .board-toolbar {
    width: var(--bsz) !important;
    padding: 4px 8px !important;
    height: 32px !important;
  }
  
  #boardActions.active {
    width: var(--bsz) !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(75px, 1fr)) !important;
    gap: 6px !important;
    padding: 4px 0 !important;
  }
  .ba-btn {
    height: 38px !important;
    font-size: 12px !important;
  }
  
  .rp {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: calc(85dvh) !important;
    border-radius: 18px 18px 0 0 !important;
    border-top: 1px solid var(--pr-border) !important;
    border-left: none !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.7) !important;
    z-index: 250 !important;
    transform: translateY(calc(100% - 44px)) !important;
    transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1) !important;
  }
  .rp.mob-open {
    transform: translateY(0) !important;
  }
  
  #mobHandle {
    height: 44px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: rgba(8, 16, 36, 0.98) !important;
    border-bottom: 1px solid var(--pr-border-sub) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
  }
  .mob-handle-bar {
    width: 36px !important;
    height: 4px !important;
    background: rgba(255, 255, 255, 0.25) !important;
    border-radius: 2px !important;
    position: absolute !important;
    top: 6px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

/* ══════════════════════════════════════════════════════════
   7. HIGH-END CINEMATIC SEARCH RADAR & MATCHMAKING OVERLAY
   ══════════════════════════════════════════════════════════ */
#boardSearchOv {
  display: none !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 50 !important;
  background: radial-gradient(circle at 50% 50%, rgba(10, 20, 48, 0.92) 0%, rgba(2, 6, 18, 0.98) 100%) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.8) !important;
  animation: bsoFadeIn 0.35s ease forwards !important;
}
#boardSearchOv.on { display: flex !important; }

@keyframes bsoFadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}

.bso-radar-container {
  width: 140px !important;
  height: 140px !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.bso-radar-ring {
  position: absolute !important;
  border-radius: 50% !important;
  border: 1px solid rgba(212, 175, 55, 0.2) !important;
  pointer-events: none !important;
}
.bso-radar-ring.r1 {
  width: 60px !important;
  height: 60px !important;
  border-color: rgba(212, 175, 55, 0.4) !important;
  animation: radarPulse 2.4s ease-out infinite !important;
}
.bso-radar-ring.r2 {
  width: 100px !important;
  height: 100px !important;
  border-color: rgba(212, 175, 55, 0.25) !important;
  animation: radarPulse 2.4s ease-out 0.8s infinite !important;
}
.bso-radar-ring.r3 {
  width: 136px !important;
  height: 136px !important;
  border-color: rgba(212, 175, 55, 0.15) !important;
  animation: radarPulse 2.4s ease-out 1.6s infinite !important;
}

@keyframes radarPulse {
  0%   { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(1.25); opacity: 0; }
}

.bso-radar-sweep {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 270deg, rgba(212, 175, 55, 0.05) 300deg, rgba(212, 175, 55, 0.5) 360deg) !important;
  animation: radarRotate 2s linear infinite !important;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.2) !important;
}
@keyframes radarRotate { to { transform: rotate(360deg); } }

.bso-radar-center {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, rgba(30, 20, 5, 0.95), rgba(15, 10, 3, 0.98)) !important;
  border: 1.5px solid var(--pr-gold) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.5), inset 0 0 10px rgba(212, 175, 55, 0.3) !important;
}
.bso-center-icon {
  font-size: 26px !important;
  line-height: 1 !important;
  color: #fff !important;
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.8)) !important;
  animation: iconLevitate 2.5s ease-in-out infinite !important;
}
@keyframes iconLevitate {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-3px) scale(1.08); }
}

.bso-content {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 16px !important;
}
.bso-badge {
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
  color: var(--pr-gold) !important;
  background: rgba(212, 175, 55, 0.12) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  padding: 3px 10px !important;
  border-radius: 12px !important;
  text-transform: uppercase !important;
  transition: all 0.3s ease !important;
}
.bso-badge.bot-mode {
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.15) !important;
  border-color: rgba(56, 189, 248, 0.45) !important;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.3) !important;
}
.bso-timer {
  font-family: 'Courier New', Courier, monospace, system-ui !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  color: var(--pr-gold) !important;
  letter-spacing: 1px !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
  border-radius: 8px !important;
  padding: 3px 12px !important;
  margin-top: 2px !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5) !important;
}
.bso-tc-badge {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  letter-spacing: 0.3px !important;
}
.bso-txt {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: 0.3px !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
}
.bso-sub {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--pr-dim) !important;
}
.bso-cancel {
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  color: #fca5a5 !important;
  border-radius: 10px !important;
  padding: 8px 24px !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}
.bso-cancel:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  color: #fff !important;
  border-color: rgba(239, 68, 68, 0.6) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.3) !important;
}

/* ══════════════════════════════════════════════════════════
   8. CINEMATIC DUEL VS COUNTDOWN STYLES
   ══════════════════════════════════════════════════════════ */
#_countdown_ov {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(2, 6, 18, 0.92) !important;
  backdrop-filter: blur(25px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(25px) saturate(1.3) !important;
  gap: 24px !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  animation: cdBackdropEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}
@keyframes cdBackdropEnter {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

._cd_backdrop_fx {
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.12) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

._cd_flash_flare {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 400px !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.8), #fff, rgba(212, 175, 55, 0.8), transparent) !important;
  transform: translate(-50%, -50%) !important;
  filter: blur(1px) !important;
  opacity: 0.7 !important;
  pointer-events: none !important;
}

._cd_match_badge {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 18px !important;
  border-radius: 20px !important;
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  color: #34d399 !important;
  font-size: 11.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.25) !important;
  z-index: 2 !important;
  animation: badgeSlideDown 0.5s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
@keyframes badgeSlideDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}
._cd_badge_dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #34d399 !important;
  box-shadow: 0 0 8px #34d399 !important;
  animation: livePulse 1.2s infinite ease-in-out !important;
}

._cd_vs_stage {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(16px, 4vw, 36px) !important;
  z-index: 2 !important;
  max-width: 580px !important;
  width: 100% !important;
}

._cd_player_card {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background: linear-gradient(160deg, rgba(16, 28, 60, 0.8), rgba(8, 14, 32, 0.95)) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 16px !important;
  padding: 20px 14px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  transition: transform 0.3s ease !important;
}
._cd_player_card._cd_me {
  border-color: rgba(212, 175, 55, 0.45) !important;
  animation: cardSlideLeft 0.55s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
._cd_player_card._cd_opp {
  border-color: rgba(244, 63, 94, 0.35) !important;
  animation: cardSlideRight 0.55s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
@keyframes cardSlideLeft {
  from { opacity: 0; transform: translateX(-30px) scale(0.9); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes cardSlideRight {
  from { opacity: 0; transform: translateX(30px) scale(0.9); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

._cd_avatar_wrap {
  position: relative !important;
  margin-bottom: 10px !important;
}
._cd_avatar_glow {
  position: absolute !important;
  inset: -4px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.5), transparent 70%) !important;
  animation: avatarGlowPulse 2s ease-in-out infinite !important;
}
._cd_avatar_glow.opp {
  background: radial-gradient(circle, rgba(244, 63, 94, 0.5), transparent 70%) !important;
}
@keyframes avatarGlowPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.15); }
}

._cd_avatar {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--pr-gold), var(--pr-gold2)) !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  color: #020815 !important;
  position: relative !important;
  z-index: 2 !important;
  overflow: hidden !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5) !important;
}
._cd_avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
._cd_avatar.opp {
  background: linear-gradient(135deg, #f43f5e, #be123c) !important;
  color: #fff !important;
}

._cd_player_name {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #fff !important;
  max-width: 120px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: center !important;
}
._cd_player_rat {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: var(--pr-gold) !important;
  margin-top: 3px !important;
}

._cd_vs_center {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  animation: vsCenterPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both !important;
}
@keyframes vsCenterPop {
  from { opacity: 0; transform: scale(0.4) rotate(-15deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}
._cd_vs_badge {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: var(--pr-gold) !important;
  text-shadow: 0 0 15px rgba(212, 175, 55, 0.8) !important;
  letter-spacing: 0.1em !important;
}
._cd_swords {
  font-size: 22px !important;
}

._cd_counter_wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  z-index: 2 !important;
}
._cd_counter_label {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.15em !important;
  color: var(--pr-mute) !important;
}
#_countdown_num {
  font-size: clamp(68px, 14vw, 110px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
  text-shadow: 0 0 35px rgba(212, 175, 55, 0.7), 0 0 70px rgba(212, 175, 55, 0.4) !important;
}

@keyframes cdPop {
  0%   { transform: scale(1.6); opacity: 0; }
  30%  { transform: scale(0.95); opacity: 1; }
  60%  { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}