/* ════════════════════════════════════════════════════════════════════
   POKER OVERRIDE CSS
   This is a poker-only app (legacy backgammon/rummy code is here only
   for compatibility). We aggressively hide all 2-player UI so it never
   shows on top of the poker board.
════════════════════════════════════════════════════════════════════ */

/* When body is in poker-mode, hide the global app header + bottom nav
   so the poker board takes the entire screen. */
body.poker-mode .g-header,
body.poker-mode #gHeader,
body.poker-mode .g-footer,
body.poker-mode #gFooter,
body.poker-mode .lobby-header,
body.poker-mode .app-header,
body.poker-mode .app-footer {
  display: none !important;
}

/* Hide ALL legacy 2-player UI ALWAYS (this is a poker-only app) */
.gm-panel-left,
.gm-panel-right,
.gm-exit,
.gm-header,
.gm-vs-center,
.gm-player,
.gm-pcard,
.gm-panel-bet,
.gm-panel-controls,
.gm-panel-timer,
.gm-panel-pip,
.gm-panel-btn,
#vsHeader,
#specCountBadge,
#betDisplay,
#floatingConfirm,
#diceArea,
#doubleBtn,
.turn-banner,
#boardCanvas,
#barWhite,
#barBlack,
#myColorBanner,
#oppBar,
#myBar,
.game-controls {
  display: none !important;
}

/* Make the game container full-screen ONLY when it's the active page */
#page-game.active {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  max-height: none !important;
  border: none !important;
  background: transparent !important;
}

#page-game .game-container {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  border: none !important;
  background: transparent !important;
}

#page-game .gm-board-area {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: none !important;
  border: none !important;
  background: transparent !important;
}

#page-game #boardContainer {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  border: none !important;
  background: transparent !important;
}

#gameBoard {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  z-index: 200 !important;
  background: #000 !important;
  border: none !important;
}

/* Chat is allowed only when explicitly opened */
.game-chat:not(.open) {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   POKER LOBBY — clean, focused layout for a poker-only app.
   Replaces the cluttered rummy/backgammon multi-purpose lobby.
════════════════════════════════════════════════════════════════════ */
.pk-lobby {
  padding: 0 10px 130px;
  font-family: 'Outfit', 'Rubik', sans-serif;
  direction: rtl;
}

/* ── HERO — single big play button ─────────────────────────────── */
.pk-hero {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.04) inset;
  transition: transform .15s, box-shadow .2s;
}
.pk-hero:hover { box-shadow: 0 10px 32px rgba(0,0,0,.55), 0 0 24px rgba(212,168,71,.08), 0 1px 0 rgba(255,255,255,.04) inset; }
.pk-hero-deco { position: absolute; pointer-events: none; z-index: 2; }
.pk-hero-deco--tl { top: 6px; right: 6px; }
.pk-hero-deco--br { bottom: 6px; left: 6px; }
.pk-hero:active { transform: scale(.98); }
.pk-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(91,142,219,.30) 0%, transparent 60%),
    linear-gradient(135deg, rgba(20,40,68,.92) 0%, rgba(10,22,40,.95) 50%, rgba(5,12,24,.98) 100%);
}
.pk-hero-bg::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 80% 100%, rgba(140,180,230,.12) 0%, transparent 40%),
    repeating-linear-gradient(45deg, transparent 0, transparent 20px, rgba(255,255,255,.015) 20px, rgba(255,255,255,.015) 22px);
}
.pk-hero-content {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 22px 20px;
  color: #fff;
}
.pk-hero-icon {
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ── PREMIUM CASINO CHIP ─── SVG-based, crisp at any size ── */
.pk-chip-svg {
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.55))
          drop-shadow(0 1px 2px rgba(91,142,219,.35));
  flex-shrink: 0;
}
.pk-hero-text { flex: 1; }
.pk-hero-title {
  font-family: 'Cinzel', serif;
  font-size: 24px; font-weight: 800;
  letter-spacing: 4px;
  background: linear-gradient(180deg, #ffffff 0%, #c5d3e8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
  margin-bottom: 2px;
}
.pk-hero-sub {
  font-size: 12px;
  color: rgba(255,255,255,.55);
  letter-spacing: .5px;
}
.pk-hero-arrow {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.7);
  transition: all .2s;
}
.pk-hero:hover .pk-hero-arrow {
  background: rgba(91,142,219,.2);
  border-color: rgba(91,142,219,.4);
  color: #d6e1ee;
}

/* ── ACTION BAR — 3 secondary buttons ───────────────────────────── */
.pk-action-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.pk-action-btn {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px;
  background: linear-gradient(180deg, rgba(35,42,52,.85) 0%, rgba(15,20,28,.95) 100%);
  border: 1px solid rgba(140,160,190,.12);
  border-radius: 12px;
  color: #c5cfdd;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  overflow: hidden;
}
.pk-action-btn::after {
  /* Subtle accent line at the bottom that lights up per-button */
  content: '';
  position: absolute; left: 12%; right: 12%; bottom: 0;
  height: 2px; border-radius: 2px;
  background: var(--btn-accent, transparent);
  opacity: .55;
  transition: opacity .15s, height .15s;
}
.pk-action-btn:hover::after { opacity: 1; height: 3px; }
.pk-action-btn:hover {
  background: linear-gradient(180deg, rgba(45,52,65,.9), rgba(20,26,36,.98));
  border-color: rgba(180,200,230,.25);
  transform: translateY(-1px);
}
.pk-action-btn:active { transform: translateY(0); }
.pk-action-btn svg { color: var(--btn-icon, #8aa0c0); transition: color .15s, transform .15s; }
.pk-action-btn:hover svg { transform: scale(1.1); }

/* Per-button accent colors — break the monotony tastefully */
#btnCreateRoom            { --btn-accent: #5b8edb; --btn-icon: #7ba8e8; }      /* BLUE — create */
#btnCreateRoom:hover svg  { color: #a8c8f0; }

#btnJoinRoom              { --btn-accent: #4ade80; --btn-icon: #6cdc92; }     /* GREEN — go/join */
#btnJoinRoom:hover svg    { color: #90e8ad; }

.pk-action-btn--clubs     { --btn-accent: #d4a847; --btn-icon: #e8c47a; }     /* GOLD — community/premium */
.pk-action-btn--clubs:hover svg { color: #f0d99a; }

/* ── LIVE STATS — colored pills with iconography ─────────────────── */
.pk-live-stats {
  display: flex; gap: 6px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  justify-content: center;
}
.pk-stat-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(140,160,190,.1);
  border-radius: 999px;
  font-size: 11.5px;
  color: #a5b0c2;
}
.pk-stat-pill b {
  color: #e8eef8;
  font-weight: 700;
  font-size: 13px;
  margin-left: 1px;
}
.pk-stat-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.pk-stat-dot--live  { background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,.6); animation: pkLivePulse 2s infinite; }
.pk-stat-dot--play  { background: #fbbf24; box-shadow: 0 0 6px rgba(251,191,36,.5); }
.pk-stat-dot--wait  { background: #94a3b8; }
@keyframes pkLivePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

/* ── SECTION HEADERS ─────────────────────────────────────────────── */
.pk-section {
  margin: 18px 0 8px;
}
.pk-section-title {
  display: flex; align-items: center; gap: 8px;
  padding: 0 4px 8px;
  font-size: 13px; font-weight: 700;
  color: #a8b3c5;
  letter-spacing: 1.5px;
  border-bottom: 1px solid rgba(140,160,190,.08);
  margin-bottom: 12px;
}
.pk-section-title svg { color: #6a7a92; }

/* ── EMPTY STATE for poker tables ───────────────────────────────── */
.pkt-tables-empty {
  text-align: center;
  padding: 36px 16px;
  color: #707d8f;
  font-size: 13.5px;
  background: rgba(0,0,0,.18);
  border: 1px dashed rgba(140,160,190,.12);
  border-radius: 14px;
}
.pkt-tables-empty svg { display: block; margin: 0 auto 10px; }

/* ── HIDE legacy rummy-specific UI in lobby ─────────────────────── */
body.poker-mode #agentBanner,
body.poker-mode #miniLeaderboard,
body.poker-mode #liveGamesSection,
body.poker-mode .g-bet-row,
body.poker-mode .g-stats,
body.poker-mode .g-actions,
body.poker-mode .g-play-hero {
  display: none !important;
}

/* Hide rummy game mode selector if it leaks through */
#gameModeSelector { display: none !important; }
.gm-options, .gm-btn, .gm-label { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   ACCENT BADGES & DECORATIVE ICONS
   Color-coded variants used throughout the app to break the monotony
   and give visual cues without overwhelming. Pair with .accent-icon-*
   wrappers and SVG defs at #app-svg-defs.
   ═══════════════════════════════════════════════════════════════════ */

/* Generic accent surfaces */
.accent-gold   { color: #e8c47a; }
.accent-blue   { color: #7ba8e8; }
.accent-green  { color: #6cdc92; }
.accent-red    { color: #f08080; }
.accent-purple { color: #c290e8; }
.accent-silver { color: #b8c0d0; }

/* ICON BADGE — circular gradient background with icon inside.
   Use class `.acc-badge` + tone class `.acc-badge--gold` etc.
   Sizes: default 28px; .acc-badge--sm 22px; .acc-badge--lg 40px. */
.acc-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.15);
}
.acc-badge--sm { width: 22px; height: 22px; }
.acc-badge--lg { width: 40px; height: 40px; }
.acc-badge svg { width: 55%; height: 55%; }

.acc-badge--gold {
  background: radial-gradient(circle at 35% 30%, #f0d99a 0%, #c9944a 50%, #7a5410 100%);
  border: 1px solid rgba(255,210,140,.3);
}
.acc-badge--gold svg { color: #2a1808; }

.acc-badge--blue {
  background: radial-gradient(circle at 35% 30%, #a8c8f0 0%, #5b8edb 50%, #1e4488 100%);
  border: 1px solid rgba(170,200,240,.3);
}
.acc-badge--blue svg { color: #0d2348; }

.acc-badge--green {
  background: radial-gradient(circle at 35% 30%, #90e8ad 0%, #4ade80 50%, #1a6e3c 100%);
  border: 1px solid rgba(150,230,180,.3);
}
.acc-badge--green svg { color: #0a3018; }

.acc-badge--red {
  background: radial-gradient(circle at 35% 30%, #f8a8a8 0%, #ef5350 50%, #8a1818 100%);
  border: 1px solid rgba(250,170,170,.3);
}
.acc-badge--red svg { color: #3a0808; }

.acc-badge--purple {
  background: radial-gradient(circle at 35% 30%, #d8b0f0 0%, #ab5dc8 50%, #4a1868 100%);
  border: 1px solid rgba(220,180,240,.3);
}
.acc-badge--purple svg { color: #2a0a3a; }

.acc-badge--silver {
  background: radial-gradient(circle at 35% 30%, #f0f4fa 0%, #b0b8c8 50%, #555c68 100%);
  border: 1px solid rgba(220,225,235,.3);
}
.acc-badge--silver svg { color: #1a2030; }

/* STAT TILE — used in club stats etc. Has badge + value + label */
.acc-stat-tile {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(15,28,48,0.55), rgba(8,15,30,0.7));
  border: 1px solid rgba(91,142,219,0.14);
  border-radius: 12px;
  flex: 1; min-width: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.acc-stat-tile-text { display: flex; flex-direction: column; min-width: 0; }
.acc-stat-tile-val {
  font-family: 'Outfit', sans-serif;
  font-weight: 800; font-size: 18px;
  color: #f0f6ff; line-height: 1;
}
.acc-stat-tile-lbl {
  font-size: 10.5px; color: rgba(160,180,210,.65);
  margin-top: 3px; letter-spacing: .3px;
}

/* TIER PILL — for stake levels (micro/low/mid/high) */
.tier-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px;
  font-size: 10.5px; font-weight: 700;
  border-radius: 999px;
  letter-spacing: .3px;
}
.tier-pill--micro {
  background: linear-gradient(180deg, rgba(70,90,140,.35), rgba(40,55,90,.5));
  color: #b0c0e0; border: 1px solid rgba(120,150,200,.25);
}
.tier-pill--low {
  background: linear-gradient(180deg, rgba(74,222,128,.18), rgba(34,128,68,.3));
  color: #8ce8a8; border: 1px solid rgba(108,220,146,.3);
}
.tier-pill--mid {
  background: linear-gradient(180deg, rgba(91,142,219,.22), rgba(40,80,160,.35));
  color: #a8c8f0; border: 1px solid rgba(91,142,219,.4);
}
.tier-pill--high {
  background: linear-gradient(180deg, rgba(212,168,71,.22), rgba(122,84,16,.4));
  color: #f0d99a; border: 1px solid rgba(232,196,122,.4);
  box-shadow: 0 0 6px rgba(212,168,71,.2);
}
.tier-pill--vip {
  background: linear-gradient(180deg, rgba(194,84,200,.22), rgba(80,30,100,.4));
  color: #e0b0f0; border: 1px solid rgba(206,144,232,.4);
  box-shadow: 0 0 8px rgba(194,84,200,.25);
}

/* DECORATIVE CARD CORNER — small ornament for premium cards */
.deco-corner {
  position: absolute;
  pointer-events: none;
  opacity: .14;
}
.deco-corner svg { display: block; }

/* DIVIDER with optional centered icon */
.acc-divider {
  display: flex; align-items: center;
  margin: 18px 4px;
  gap: 10px;
}
.acc-divider::before, .acc-divider::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(91,142,219,.18), transparent);
}
.acc-divider-icon {
  color: rgba(170,180,200,.35);
  font-size: 12px;
}