/* ============================================================
   ROYAL POKER — Premium Dark Gold Theme
   ============================================================ */

/* ── Design Tokens (Design System v2 — premium) ────────────── */
:root {
  /* Paleta premium: preto profundo + verde poker + dourado */
  --green:        #00C853;
  --green-bright: #00E676;
  --green-glow:   rgba(0,230,118,0.30);
  --gold:         #F9A825;
  --gold-light:   #ffcb52;
  --gold-dark:    #c17e00;
  --gold-glow:    rgba(249,168,37,0.32);
  --neon-green:   #00E676;
  --neon-red:     #ff5252;
  --neon-blue:    #40c4ff;
  /* Fundos (8 → 33) */
  --bg-deep:      #090909;
  --bg-dark:      #111111;
  --bg-card:      #181818;
  --bg-panel:     #222222;
  --bg-elev:      #1e1e1e;
  --bg-glass:     rgba(24,24,24,0.72);
  --border-gold:  rgba(249,168,37,0.28);
  --border-subtle:rgba(255,255,255,0.08);
  --hairline:     rgba(255,255,255,0.06);
  --text-primary: #FFFFFF;
  --text-muted:   #a9b1bb;
  --text-dim:     #6b7480;
  --shadow-gold:  0 0 30px rgba(249,168,37,0.18);
  --shadow-deep:  0 18px 50px rgba(0,0,0,0.65);
  --shadow-1:     0 1px 2px rgba(0,0,0,0.4);
  --shadow-2:     0 4px 12px rgba(0,0,0,0.45);
  --shadow-3:     0 10px 30px rgba(0,0,0,0.55);
  /* Espaçamento — grid 8px */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; --sp-8: 48px;
  /* Raios padronizados */
  --radius-sm: 8px;  --radius: 14px; --radius-lg: 20px; --radius-xl: 28px;
  --radius-pill: 999px;
  --transition:   all .25s cubic-bezier(.4,0,.2,1);
  --ease-spring:  cubic-bezier(.34,1.56,.64,1);
  /* altura do menu inferior mobile */
  --mobilenav-h: 62px;
}

/* ── Reset & Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: 'Inter', 'Segoe UI', sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(245,158,11,0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(59,130,246,0.05) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(16,185,129,0.04) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ── Typography ─────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 { font-weight: 700; line-height: 1.2; }
.text-gold   { color: var(--gold); }
.text-muted  { color: var(--text-muted); }

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: var(--gold-dark); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ── Glass Card ─────────────────────────────────────────────── */
.glass-card {
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-deep), inset 0 1px 0 rgba(255,255,255,0.05);
}

.glass-card-sm {
  background: rgba(26,26,46,0.7);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn-gold {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #000;
  border: none;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: var(--transition);
  box-shadow: 0 4px 15px rgba(245,158,11,0.4);
}
.btn-gold:hover {
  background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(245,158,11,0.5);
}
.btn-gold:active { transform: translateY(0); }

.btn-outline-gold {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  font-weight: 600;
  transition: var(--transition);
}
.btn-outline-gold:hover {
  background: var(--gold);
  color: #000;
  box-shadow: 0 0 20px var(--gold-glow);
}

.btn-dark-glass {
  background: rgba(255,255,255,0.05);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  backdrop-filter: blur(10px);
  transition: var(--transition);
}
.btn-dark-glass:hover {
  background: rgba(255,255,255,0.1);
  color: var(--text-primary);
  border-color: var(--border-gold);
}

/* Game Action Buttons */
.btn-fold   { background: linear-gradient(135deg,#ef4444,#b91c1c); color:#fff; border:none; font-weight:700; }
.btn-check  { background: linear-gradient(135deg,#3b82f6,#1d4ed8); color:#fff; border:none; font-weight:700; }
.btn-call   { background: linear-gradient(135deg,#10b981,#047857); color:#fff; border:none; font-weight:700; }
.btn-raise  { background: linear-gradient(135deg,#f59e0b,#b45309); color:#000; border:none; font-weight:700; }
.btn-allin  { background: linear-gradient(135deg,#8b5cf6,#5b21b6); color:#fff; border:none; font-weight:700; }

.btn-fold:hover  { filter:brightness(1.2); transform:translateY(-2px); }
.btn-check:hover { filter:brightness(1.2); transform:translateY(-2px); }
.btn-call:hover  { filter:brightness(1.2); transform:translateY(-2px); }
.btn-raise:hover { filter:brightness(1.2); transform:translateY(-2px); }
.btn-allin:hover { filter:brightness(1.2); transform:translateY(-2px); box-shadow:0 0 25px rgba(139,92,246,0.6); }

/* ── Forms ──────────────────────────────────────────────────── */
.form-control, .form-select {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  transition: var(--transition);
}
.form-control:focus, .form-select:focus {
  background: rgba(255,255,255,0.08);
  border-color: var(--gold);
  color: var(--text-primary);
  box-shadow: 0 0 0 3px var(--gold-glow);
  outline: none;
}
.form-control::placeholder { color: var(--text-dim); }

.input-group-text {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
}

/* ── Navbar ─────────────────────────────────────────────────── */
.royal-navbar {
  background: rgba(8,8,18,0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-gold);
  padding: 0.75rem 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.royal-navbar .navbar-brand {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 0 20px var(--gold-glow);
  letter-spacing: 1px;
}

.royal-navbar .nav-link {
  color: var(--text-muted);
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: var(--transition);
}
.royal-navbar .nav-link:hover, .royal-navbar .nav-link.active {
  color: var(--gold);
  background: var(--gold-glow);
}

.balance-display {
  background: linear-gradient(135deg,rgba(245,158,11,0.15),rgba(245,158,11,0.05));
  border: 1px solid var(--border-gold);
  border-radius: 50px;
  padding: 0.4rem 1.2rem;
  color: var(--gold);
  font-weight: 700;
  font-size: 0.95rem;
}

/* ── POKER TABLE ─────────────────────────────────────────────── */
/* Tudo escala a partir de --u (unidade fluida): mesa perfeita em qualquer tela. */
#poker-table-wrapper {
  --u: clamp(7px, 1.15vw, 12px);          /* unidade base responsiva */
  --card-w: calc(var(--u) * 4.6);
  --card-h: calc(var(--card-w) * 1.4);
  --avatar: calc(var(--u) * 5.2);
  background:
    radial-gradient(ellipse at center, #1f4d22 0%, #123a15 55%, #0a250c 100%);
  border-radius: 46% / 50%;
  border: clamp(6px, 1vw, 12px) solid #7a5a12;
  box-shadow:
    0 0 0 3px #5a4209,
    0 0 0 7px #241a08,
    inset 0 0 90px rgba(0,0,0,0.55),
    0 24px 70px rgba(0,0,0,0.8),
    0 0 70px rgba(245,158,11,0.08);
  position: relative;
  /* largura limitada também pela altura da viewport (evita cortar assentos
     quando o painel de ação aparece embaixo). */
  width: min(100%, 900px, 112vh);
  aspect-ratio: 16 / 10;
  margin: 0 auto;
}

#poker-table-wrapper::before {
  content: '';
  position: absolute;
  inset: calc(var(--u) * 1.6);
  border-radius: 46% / 50%;
  border: 2px solid rgba(212,175,55,0.35);
  box-shadow: inset 0 0 40px rgba(0,0,0,0.4);
  pointer-events: none;
}

/* Table Logo */
#table-logo {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.09;
  font-size: calc(var(--u) * 3);
  font-weight: 900;
  color: #f5d97a;
  letter-spacing: 3px;
  pointer-events: none;
  white-space: nowrap;
}

/* Community Cards Area */
#community-cards {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: calc(var(--u) * 0.6);
  z-index: 10;
}

/* Pot Display (na mesa, abaixo das cartas) */
#pot-display {
  position: absolute;
  top: 64%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.72);
  border: 1px solid var(--border-gold);
  border-radius: 50px;
  padding: calc(var(--u)*0.3) calc(var(--u)*1.4);
  color: var(--gold);
  font-weight: 800;
  font-size: calc(var(--u) * 1.15);
  text-shadow: 0 0 10px var(--gold-glow);
  white-space: nowrap;
  z-index: 10;
}

/* ── PLAYING CARDS ──────────────────────────────────────────── */
.card-component {
  width: var(--card-w, 58px);
  height: var(--card-h, 82px);
  border-radius: calc(var(--card-w, 58px) * 0.12);
  border: 1px solid rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--card-w, 58px) * 0.08);
  font-weight: 900;
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease;
  cursor: default;
  user-select: none;
  flex: 0 0 auto;
}

.card-component.card-red {
  background: linear-gradient(150deg, #ffffff 0%, #fdf3f3 100%);
  color: #d1272b;
  box-shadow: 0 3px 10px rgba(0,0,0,0.45);
}

.card-component.card-black {
  background: linear-gradient(150deg, #ffffff 0%, #f2f2f4 100%);
  color: #16161f;
  box-shadow: 0 3px 10px rgba(0,0,0,0.45);
}

.card-component.card-back {
  background-color: #7a1122;
  background-image:
    repeating-linear-gradient( 45deg, rgba(249,200,90,.16) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, rgba(249,200,90,.16) 0 2px, transparent 2px 9px),
    radial-gradient(ellipse at 50% 50%, #9a1a30 0%, #6d0f1f 78%);
  border: 1px solid rgba(249,200,90,.55);
  box-shadow: 0 3px 10px rgba(0,0,0,0.55), inset 0 0 0 2px rgba(0,0,0,.25), inset 0 0 0 3px rgba(249,200,90,.35);
}

.card-component.card-back::after {
  content: '♠';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: calc(var(--card-w, 58px) * 0.52);
  height: calc(var(--card-w, 58px) * 0.52);
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: calc(var(--card-w, 58px) * 0.3);
  color: #f7d071;
  background: radial-gradient(circle at 50% 40%, rgba(0,0,0,.35), rgba(0,0,0,.1));
  border: 1.5px solid rgba(249,200,90,.6);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

.card-component .card-rank-top    { font-size: calc(var(--card-w, 58px) * 0.28); line-height: 1; }
.card-component .card-suit-center {
  font-size: calc(var(--card-w, 58px) * 0.5);
  text-align: center;
  line-height: 1;
}
.card-component .card-rank-bottom {
  font-size: calc(var(--card-w, 58px) * 0.28);
  line-height: 1;
  transform: rotate(180deg);
  align-self: flex-end;
}

/* Card deal animation — carta "voa" do dealer (centro) para o lugar */
@keyframes cardDeal {
  from { opacity: 0; transform: translate(-40%, -160%) rotate(-14deg) scale(0.6); }
  to   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
}
.card-deal-anim { animation: cardDeal 0.45s cubic-bezier(0.22,1.1,0.36,1) both; }

/* Card hover lift (só cartas abertas do jogador) */
.player-seat.seat-me .card-component:not(.card-back):hover {
  transform: translateY(-8px) scale(1.06);
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
  z-index: 5;
}

/* ── PLAYER SEATS ────────────────────────────────────────────── */
.player-seat {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 0.35);
  z-index: 20;
  transform: translate(-50%, -50%);
  transition: filter .2s ease;
}

.player-avatar-wrap {
  width: var(--avatar, 56px);
  height: var(--avatar, 56px);
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.25);
  overflow: hidden;
  position: relative;
  transition: var(--transition);
  background: var(--bg-card);
}

.player-seat.active .player-avatar-wrap {
  border-color: var(--gold);
  box-shadow: 0 0 18px var(--gold-glow), 0 0 36px rgba(245,158,11,0.18);
  animation: pulse-gold 1.4s ease-in-out infinite;
}

@keyframes pulse-gold {
  0%,100% { box-shadow: 0 0 14px var(--gold-glow); }
  50%      { box-shadow: 0 0 28px rgba(245,158,11,0.6), 0 0 56px rgba(245,158,11,0.2); }
}

.player-seat.folded { filter: grayscale(1) opacity(0.45); }

.player-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; }

.player-name {
  font-size: calc(var(--u) * 1);
  font-weight: 700;
  color: var(--text-primary);
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  max-width: calc(var(--avatar, 56px) * 1.9);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.player-chips {
  font-size: calc(var(--u) * 0.95);
  color: var(--gold);
  font-weight: 800;
  background: rgba(0,0,0,0.65);
  padding: 1px calc(var(--u)*0.7);
  border-radius: 20px;
  border: 1px solid var(--border-gold);
  white-space: nowrap;
}

/* Cartas dos OPONENTES: mini, ancoradas ATRÁS do topo do avatar (não empurram
   o layout nem estouram a borda da mesa). As MINHAS: grandes, em fluxo. */
/* Cartas dos oponentes: mini, ACIMA/atrás do avatar — NUNCA invadem o centro. */
.player-hole-cards,
.player-hole-cards.hc-left, .player-hole-cards.hc-right, .player-hole-cards.hc-top {
  position: absolute;
  left: 50%; right: auto; top: auto; bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: calc(var(--u) * -1.4);       /* encosta atrás do topo do avatar */
  display: flex; gap: 1px;
  z-index: 1;                                 /* atrás do avatar */
  pointer-events: none;
}
.player-hole-cards .card-component { --card-w: calc(var(--u) * 2.3); }
.player-hole-cards .card-component:first-child { transform: rotate(-8deg); }
.player-hole-cards .card-component:last-child  { transform: rotate(8deg); }
.player-avatar-wrap { z-index: 2; }           /* avatar cobre a base das cartas */

/* MINHAS cartas: container dedicado no rodapé-centro da mesa (fora do assento) */
#hero-cards {
  position: absolute;
  left: 50%; bottom: 3%;
  transform: translateX(-50%);
  display: none; gap: calc(var(--u) * 0.8);
  z-index: 40; pointer-events: none;
}
#hero-cards.show { display: flex; pointer-events: auto; }

/* ── Carta "peek" (deslizar p/ cima p/ espiar) ─────────────── */
.peek-card {
  --peek: 0;
  position: relative;
  width: calc(var(--u) * 6.6);
  aspect-ratio: 5 / 7;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  transform: translateY(calc(var(--peek) * -12px)) scale(calc(1 + var(--peek) * 0.05));
  transition: transform .18s cubic-bezier(.2,.8,.3,1);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.55));
}
.peek-card.peeking { transition: none; cursor: grabbing; }
.peek-card .peek-face { position: absolute; inset: 0; }
.peek-card .peek-face .card-component { width: 100%; height: 100%; --card-w: calc(var(--u) * 6.6); }
/* verso que cobre a face; ao arrastar, "levanta" pela base revelando a carta */
.peek-card .peek-cover {
  position: absolute; inset: 0; border-radius: calc(var(--u) * .55);
  transform-origin: bottom center;
  transform: rotateX(calc(var(--peek) * -118deg)) translateY(calc(var(--peek) * -4%));
  opacity: calc(1 - var(--peek) * .9);
  backface-visibility: hidden;
  background-color: #7a1122;
  background-image:
    repeating-linear-gradient( 45deg, rgba(249,200,90,.2) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, rgba(249,200,90,.2) 0 2px, transparent 2px 9px),
    radial-gradient(ellipse at 50% 50%, #9a1a30 0%, #6d0f1f 80%);
  border: 1px solid rgba(249,200,90,.55);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.22), inset 0 0 0 3px rgba(249,200,90,.35);
}
.peek-card .peek-cover::after {
  content:'👆'; position:absolute; left:50%; bottom:8%; transform:translateX(-50%);
  font-size: calc(var(--u) * 1.6); opacity:.85; filter: drop-shadow(0 1px 2px #000);
  animation: peekHint 1.4s ease-in-out infinite;
}
@keyframes peekHint { 0%,100%{ transform:translateX(-50%) translateY(0) } 50%{ transform:translateX(-50%) translateY(-5px) } }
.peek-card.is-revealed { --peek: 1; transform: translateY(-6px); }
.peek-card.is-revealed .peek-cover { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce){ .peek-card .peek-cover::after { animation: none; } }

.dealer-btn {
  position: absolute;
  bottom: -4px;
  right: -6px;
  width: calc(var(--avatar, 56px) * 0.38);
  height: calc(var(--avatar, 56px) * 0.38);
  min-width: 16px; min-height: 16px;
  background: radial-gradient(circle at 35% 30%, #fff, #d8d8d8);
  border-radius: 50%;
  font-size: calc(var(--u) * 0.9);
  font-weight: 900;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

/* Bet chip display */
.player-bet {
  font-size: calc(var(--u) * 0.9);
  background: rgba(245,158,11,0.22);
  border: 1px solid var(--gold);
  border-radius: 20px;
  padding: 1px calc(var(--u)*0.6);
  color: var(--gold);
  font-weight: 800;
  white-space: nowrap;
}

/* ── CHIPS ───────────────────────────────────────────────────── */
.chip {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px dashed rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 900;
  color: white;
  box-shadow: 0 3px 8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
  position: relative;
}

.chip-1     { background: radial-gradient(circle,#94a3b8,#64748b); }
.chip-5     { background: radial-gradient(circle,#ef4444,#b91c1c); }
.chip-25    { background: radial-gradient(circle,#3b82f6,#1d4ed8); }
.chip-100   { background: radial-gradient(circle,#10b981,#047857); }
.chip-500   { background: radial-gradient(circle,#f59e0b,#b45309); }
.chip-1000  { background: radial-gradient(circle,#8b5cf6,#5b21b6); }
.chip-5000  { background: radial-gradient(circle,#ec4899,#be185d); }
.chip-black { background: radial-gradient(circle,#374151,#111827); }

@keyframes chipSlide {
  from { transform: scale(0) rotate(-180deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}
.chip-anim { animation: chipSlide 0.5s cubic-bezier(0.34,1.56,0.64,1); }

/* ── ACTION PANEL ────────────────────────────────────────────── */
#action-panel {
  background: rgba(8,8,18,0.95);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--border-gold);
  padding: 16px;
}

.action-buttons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.action-buttons .btn { min-width: 110px; padding: 10px 20px; border-radius: 10px; font-size: 0.95rem; }

#raise-slider-wrap { display: none; }
#raise-slider-wrap.show { display: block; }

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--gold) 0%, var(--gold) var(--val, 50%), rgba(255,255,255,0.1) var(--val, 50%));
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  box-shadow: 0 0 10px var(--gold-glow);
}

/* ── LOBBY ───────────────────────────────────────────────────── */
.table-card {
  background: var(--bg-glass);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  transition: var(--transition);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.table-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(245,158,11,0.03) 100%);
  opacity: 0;
  transition: var(--transition);
}

.table-card:hover {
  border-color: var(--border-gold);
  transform: translateY(-4px);
  box-shadow: var(--shadow-gold), var(--shadow-deep);
}
.table-card:hover::before { opacity: 1; }

.table-category-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.badge-beginner    { background: rgba(16,185,129,0.2); color:#10b981; border:1px solid #10b98155; }
.badge-intermediate{ background: rgba(59,130,246,0.2); color:#3b82f6; border:1px solid #3b82f655; }
.badge-advanced    { background: rgba(245,158,11,0.2); color:#f59e0b; border:1px solid #f59e0b55; }
.badge-vip         { background: rgba(139,92,246,0.2); color:#8b5cf6; border:1px solid #8b5cf655; }
.badge-high_roller { background: rgba(236,72,153,0.2); color:#ec4899; border:1px solid #ec489955; }

.table-players-bar {
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}
.table-players-fill {
  height: 100%;
  background: linear-gradient(90deg,#10b981,#f59e0b);
  border-radius: 2px;
  transition: width 0.5s ease;
}

/* ── CHAT ────────────────────────────────────────────────────── */
#chat-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgba(8,8,18,0.9);
  border-left: 1px solid var(--border-subtle);
}

#chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-msg {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  animation: fadeInUp 0.2s ease;
}

@keyframes fadeInUp {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

.chat-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.chat-bubble {
  background: rgba(255,255,255,0.05);
  border-radius: 0 8px 8px 8px;
  padding: 6px 10px;
  max-width: 80%;
}

.chat-bubble .chat-user {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 2px;
}

.chat-bubble .chat-text {
  font-size: 0.82rem;
  color: var(--text-primary);
  word-break: break-word;
}

.chat-bubble.system {
  background: rgba(245,158,11,0.1);
  border: 1px solid rgba(245,158,11,0.2);
  border-radius: 8px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--gold);
}

.chat-input-wrap {
  padding: 10px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  gap: 8px;
}

#chat-input {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  color: var(--text-primary);
  padding: 8px 14px;
  font-size: 0.85rem;
}
#chat-input:focus { border-color: var(--border-gold); outline: none; }

/* ── ADMIN SIDEBAR ───────────────────────────────────────────── */
.admin-sidebar {
  width: 260px;
  height: 100vh;                /* fixo à viewport… */
  max-height: 100vh;
  overflow-y: auto;            /* …e rola por dentro (mostra TODOS os itens) */
  -webkit-overflow-scrolling: touch;   /* rolagem suave no iOS */
  overscroll-behavior: contain;
  background: var(--bg-dark);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  transition: transform var(--transition);
}
/* Impede o flexbox de COMPRIMIR os itens (bug clássico que mata a rolagem):
   com flex-shrink:0 o conteúdo transborda de verdade e a barra rola. */
.admin-sidebar > * { flex-shrink: 0; }
.admin-sidebar::-webkit-scrollbar { width: 5px; }
.admin-sidebar::-webkit-scrollbar-thumb { background: var(--gold-dark); border-radius: 3px; }

.admin-sidebar .logo {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 0 15px var(--gold-glow);
}

.admin-nav-item {
  padding: 0.75rem 1.25rem;
  color: var(--text-muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  border-left: 3px solid transparent;
  transition: var(--transition);
}

.admin-nav-item:hover, .admin-nav-item.active {
  color: var(--gold);
  background: rgba(245,158,11,0.08);
  border-left-color: var(--gold);
}

.admin-content {
  margin-left: 260px;
  min-height: 100vh;
  padding: 2rem;
}

/* ── KPI Cards ──────────────────────────────────────────────── */
.kpi-card {
  background: var(--bg-glass);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: var(--transition);
}
.kpi-card:hover {
  border-color: var(--border-gold);
  box-shadow: var(--shadow-gold);
}

.kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.kpi-value {
  font-size: 2rem;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1;
}

.kpi-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ── Toasts & Alerts ────────────────────────────────────────── */
.toast-container { position: fixed; top: 80px; right: 16px; z-index: 9999; }

.royal-toast {
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 12px 16px;
  color: var(--text-primary);
  min-width: 280px;
  animation: slideInRight 0.4s cubic-bezier(0.34,1.56,0.64,1);
}

@keyframes slideInRight {
  from { opacity:0; transform:translateX(100px); }
  to   { opacity:1; transform:translateX(0); }
}

.royal-toast.success { border-color: #10b98155; }
.royal-toast.error   { border-color: #ef444455; }
.royal-toast.warning { border-color: var(--border-gold); }

/* ── WIN Animation ───────────────────────────────────────────── */
@keyframes winPulse {
  0%,100% { transform: scale(1); }
  25%      { transform: scale(1.1); }
  50%      { transform: scale(1.05); }
  75%      { transform: scale(1.08); }
}

.win-anim { animation: winPulse 0.6s ease; }

.confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  overflow: hidden;
}

/* ── Timer Bar ──────────────────────────────────────────────── */
.timer-bar-wrap {
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}

.timer-bar {
  height: 100%;
  border-radius: 2px;
  transition: width 1s linear;
}

.timer-bar.green   { background: #10b981; }
.timer-bar.yellow  { background: #f59e0b; }
.timer-bar.red     { background: #ef4444; animation: blink 0.5s infinite; }

@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0.3;} }

/* ── Responsive ─────────────────────────────────────────────── */
/* A mesa e as cartas escalam sozinhas via --u (clamp/vw). Aqui só ajustamos
   layout geral e o painel de ações para telas pequenas. */
@media (max-width: 768px) {
  #poker-table-wrapper { --u: clamp(6px, 2.1vw, 11px); }
  .action-buttons .btn { min-width: 80px; padding: 9px 12px; font-size: 0.82rem; }
  .admin-sidebar { transform: translateX(-260px); }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-content { margin-left: 0; padding: 1rem; }
}

@media (max-width: 480px) {
  #poker-table-wrapper { --u: clamp(6px, 2.6vw, 10px); }
  .action-buttons { gap: 6px; }
  .action-buttons .btn { min-width: 0; flex: 1 1 28%; padding: 10px 6px; font-size: 0.78rem; }
}

/* ── Neon Glow Effects ──────────────────────────────────────── */
.neon-text-gold {
  color: var(--gold);
  text-shadow: 0 0 7px var(--gold), 0 0 21px var(--gold), 0 0 42px var(--gold-dark);
}

.neon-border {
  box-shadow: 0 0 5px var(--gold-glow), 0 0 20px var(--gold-glow), inset 0 0 5px var(--gold-glow);
}

/* ── Utility ─────────────────────────────────────────────────── */
.cursor-pointer { cursor: pointer; }
.blur-sm        { filter: blur(4px); }
.no-select      { user-select: none; }
.transition     { transition: var(--transition); }

.divider-gold {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 1.5rem 0;
}

/* ═══════════════════════════════════════════════════════════════
   CASINO / PPPoker ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════ */

/* Croupier em DESTAQUE no topo-centro (estilo WSOP): busto, SEM círculo,
   com fade suave embaixo p/ fundir na mesa. O layout dos assentos reserva
   um vão no topo, então nenhum jogador a sobrepõe. */
#dealer-figure {
  position: absolute;
  top: calc(var(--u, 10px) * -3.4);       /* sobe: a cabeça fica acima da borda */
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--u, 10px) * 9);
  height: auto;
  z-index: 6;
  pointer-events: none;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.6));
  opacity: 1;
  -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 74%, transparent 100%);
}
/* Foto real enviada pelo admin: busto (retrato), rosto no topo, sem círculo */
#dealer-figure.dealer-photo {
  width: calc(var(--u,10px) * 9.5);
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
  object-position: 50% 12%;               /* mostra o rosto */
  border: none;
  border-radius: calc(var(--u,10px) * 1.2) calc(var(--u,10px) * 1.2) 0 0;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}
@media (max-width: 560px){
  #dealer-figure { width: calc(var(--u,10px) * 8); top: calc(var(--u,10px) * -3); }
  #dealer-figure.dealer-photo { width: calc(var(--u,10px) * 8.6); }
}

/* Pote com fichas empilhadas */
#pot-display {
  display: flex;
  align-items: center;
  gap: calc(var(--u,10px) * 0.5);
  background: rgba(0,0,0,.55);
  border: 1px solid var(--border-gold);
  backdrop-filter: blur(4px);
}
.pot-chips { position: relative; display: inline-flex; height: calc(var(--u,10px) * 1.6); align-items: flex-end; }

/* Fichas (mini) — visual realista com borda tracejada */
.chip-stack { position: relative; display: inline-block; width: calc(var(--u,10px) * 1.5); height: calc(var(--u,10px) * 1.5); }
.mini-chip {
  position: absolute; left: 0;
  width: calc(var(--u,10px) * 1.5); height: calc(var(--u,10px) * 1.5);
  border-radius: 50%;
  background:
    repeating-conic-gradient(#ffffffcc 0deg 18deg, transparent 18deg 36deg),
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--c) 70%, #fff) 0 30%, var(--c) 32% 100%);
  border: 2px solid rgba(255,255,255,.55);
  box-shadow: 0 2px 4px rgba(0,0,0,.5), inset 0 0 0 2px color-mix(in srgb, var(--c) 60%, #000);
}

/* Aposta do jogador: fichas + valor. Ancorada (absolute) logo abaixo do
   assento para NÃO empurrar o layout nem sobrepor o avatar. */
.player-bet {
  position: absolute;
  top: calc(100% + calc(var(--u,10px) * 0.2));
  left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px;
  font-size: calc(var(--u,10px) * 0.9);
  background: rgba(0,0,0,.72);
  border: 1px solid var(--gold);
  border-radius: 20px;
  padding: 1px calc(var(--u,10px) * 0.55) 1px 2px;
  color: var(--gold); font-weight: 800; white-space: nowrap;
  z-index: 22;
}

/* Reação de emoji flutuando sobre o assento */
.emoji-float {
  position: absolute;
  top: calc(var(--u,10px) * -1.4); left: 50%;
  font-size: calc(var(--u,10px) * 2.6);
  transform: translateX(-50%);
  animation: emojiFloat 2.1s ease-out forwards;
  pointer-events: none; z-index: 60;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.5));
}
@keyframes emojiFloat {
  0%   { opacity: 0; transform: translate(-50%, 10px) scale(.4); }
  15%  { opacity: 1; transform: translate(-50%, -6px) scale(1.15); }
  70%  { opacity: 1; transform: translate(-50%, -34px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60px) scale(.9); }
}

/* ── Botões de ação estilo PPPoker (grandes, glossy, arredondados) ── */
#action-panel {
  background: linear-gradient(180deg, rgba(8,20,10,.96), rgba(4,10,5,.98));
  border-top: 1px solid var(--border-gold);
  box-shadow: 0 -8px 30px rgba(0,0,0,.5);
}
.action-buttons .btn {
  min-width: 118px;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .3px;
  text-transform: uppercase;
  box-shadow: 0 4px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .1s ease, filter .15s ease, box-shadow .1s ease;
}
.action-buttons .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-fold   { background: linear-gradient(180deg,#f26d6d,#c0392b); }
.btn-check  { background: linear-gradient(180deg,#5b9bf6,#1d4ed8); }
.btn-call   { background: linear-gradient(180deg,#2ee59d,#059669); color:#04231a; }
.btn-raise  { background: linear-gradient(180deg,#ffd54a,#d97706); color:#3b1d00; }
.btn-allin  { background: linear-gradient(180deg,#b18bff,#6d28d9); }

/* Slider de raise mais "casino" */
#raise-slider-wrap .btn-dark-glass { border-radius: 999px; font-weight: 700; }

/* Dealer button (D) mais bonito */
.dealer-btn {
  background: radial-gradient(circle at 35% 30%, #fff, #e2e2e2);
  border: 2px solid var(--gold);
  color: #7a5a12;
}

/* Selos SB/BB */
.player-seat .badge { border-radius: 6px; padding: 1px 5px; }

/* Assento ativo: brilho suave no avatar (o TIMER real é o #turn-ring) */
.player-seat.active .player-avatar-wrap {
  border-color: var(--green-bright);
}

/* ── Anel de contagem regressiva da vez (verde→dourado→vermelho) ── */
@property --tp   { syntax: '<percentage>'; inherits: true; initial-value: 100%; }
@property --tpc  { syntax: '<color>';      inherits: true; initial-value: #00E676; }
#turn-ring {
  position: absolute; left: 50%; top: 50%; width: 64px; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  pointer-events: none; z-index: 26; display: none;
  animation: turnDeplete var(--turn-dur, 30s) linear forwards;
}
#turn-ring.show { display: block; }
#turn-ring::before {            /* trilho de fundo */
  content:''; position:absolute; inset:0; border-radius:50%;
  background: conic-gradient(rgba(255,255,255,.14) 0 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-th,4px)), #000 calc(100% - var(--ring-th,4px)));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-th,4px)), #000 calc(100% - var(--ring-th,4px)));
}
#turn-ring::after {            /* arco que esvazia */
  content:''; position:absolute; inset:0; border-radius:50%;
  background: conic-gradient(var(--tpc) var(--tp), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-th,4px)), #000 calc(100% - var(--ring-th,4px)));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-th,4px)), #000 calc(100% - var(--ring-th,4px)));
  filter: drop-shadow(0 0 4px var(--tpc));
}
@keyframes turnDeplete {
  0%   { --tp: 100%; --tpc: #00E676; }
  55%  { --tpc: #F9A825; }
  100% { --tp: 0%;   --tpc: #ef4444; }
}

/* Card back mais elegante (padrão de losangos dourados) */
.card-component.card-back {
  background:
    repeating-linear-gradient(45deg, #7a1020 0 5px, #5a0c18 5px 10px);
  border: 1px solid rgba(212,175,55,.5);
}
.card-component.card-back::after { content: '♠'; color: rgba(212,175,55,.6); }

/* Banner de torneio/anúncio no topo da mesa */
#tournament-banner {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  z-index: 40; max-width: 92%;
  background: linear-gradient(90deg, #7a1020, #b8860b);
  color: #fff; font-weight: 700; font-size: .8rem;
  padding: 6px 18px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
  display: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: bannerPulse 2.5s ease-in-out infinite;
}
@keyframes bannerPulse { 0%,100%{ box-shadow:0 6px 20px rgba(0,0,0,.5);} 50%{ box-shadow:0 6px 30px rgba(245,158,11,.5);} }

/* ═══ NEON VERDE + BANNERS ═══════════════════════════════════════ */
:root { --neon: #22ff88; --neon-dim: #0f9d58; }

.neon-text-green { color:#eafff3; text-shadow:0 0 6px var(--neon),0 0 14px var(--neon),0 0 28px var(--neon-dim); }
.neon-border-green { border:1px solid var(--neon)!important; box-shadow:0 0 8px rgba(34,255,136,.5),inset 0 0 8px rgba(34,255,136,.25); border-radius:12px; }

/* Ativado via <body class="neon-green"> (toggle no admin → Aparência) */
body.neon-green .navbar-brand,
body.neon-green .text-gold { color:#d6ffe9!important; text-shadow:0 0 6px var(--neon),0 0 16px var(--neon-dim); }
body.neon-green .btn-gold { box-shadow:0 0 14px rgba(34,255,136,.55),0 4px 15px rgba(0,0,0,.4); }
body.neon-green .glass-card { border-color:rgba(34,255,136,.35); box-shadow:var(--shadow-deep),0 0 20px rgba(34,255,136,.12); }
body.neon-green .royal-navbar { border-bottom-color:rgba(34,255,136,.4); box-shadow:0 4px 24px rgba(34,255,136,.12); }
body.neon-green #poker-table-wrapper { box-shadow:0 0 0 3px #0f9d58,0 0 0 7px #063311,inset 0 0 90px rgba(0,0,0,.55),0 24px 70px rgba(0,0,0,.8),0 0 80px rgba(34,255,136,.25); }
body.neon-green .balance-display { border-color:rgba(34,255,136,.5); box-shadow:0 0 12px rgba(34,255,136,.3); }
body.neon-green .action-buttons .btn { box-shadow:0 4px 0 rgba(0,0,0,.35),0 0 16px rgba(34,255,136,.35),inset 0 1px 0 rgba(255,255,255,.35); }

/* Logo na mesa (imagem enviada pelo admin) */
#table-logo-img {
  position:absolute; top:40%; left:50%; transform:translate(-50%,-50%);
  max-width:34%; max-height:26%; opacity:.30; pointer-events:none; z-index:1;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));
}

/* ── Lobby banner slider (outdoor / Times Square) ── */
#lobby-billboard { position:relative; width:100%; border-radius:16px; overflow:hidden; margin-bottom:1.5rem;
  background:#0a0a14; border:1px solid var(--border-gold);
  box-shadow:0 10px 40px rgba(0,0,0,.5); }
#lobby-billboard .bb-track { display:flex; align-items:stretch; transition:transform .7s cubic-bezier(.4,0,.2,1); }
#lobby-billboard .bb-slide { min-width:100%; position:relative; display:flex; }
/* imagem INTEIRA (largura total, altura natural) — nunca corta o banner */
#lobby-billboard .bb-slide img { width:100%; height:auto; object-fit:contain; display:block; }
#lobby-billboard .bb-slide .bb-cap { position:absolute; left:0; right:0; bottom:0; padding:14px 20px;
  background:linear-gradient(0deg,rgba(0,0,0,.8),transparent); color:#fff; font-weight:800; font-size:1.1rem;
  text-shadow:0 2px 8px #000; }
#lobby-billboard .bb-dots { position:absolute; bottom:10px; right:14px; display:flex; gap:6px; z-index:3; }
#lobby-billboard .bb-dots span { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.45); cursor:pointer; transition:.2s; }
#lobby-billboard .bb-dots span.on { background:var(--gold); width:22px; border-radius:6px; }
#lobby-billboard .bb-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  background:rgba(0,0,0,.4); color:#fff; border:none; width:38px; height:38px; border-radius:50%; cursor:pointer; font-size:1.2rem; }
#lobby-billboard .bb-prev { left:10px; } #lobby-billboard .bb-next { right:10px; }

/* ═══ LEGIBILIDADE / CONTRASTE (tema escuro) ═════════════════════ */
body, .admin-content, .container, .container-fluid { color: var(--text-primary); }
p, span, div, li, td, th, label, small, dt, dd { color: inherit; }
.text-muted { color: var(--text-muted) !important; }
.text-dark, .text-black { color: var(--text-primary) !important; }
a { color: var(--gold-light); }
a:hover { color: var(--gold); }

/* Tabelas (muitas páginas usam .table sem .table-dark → texto preto no escuro) */
.table { color: var(--text-primary); --bs-table-color: var(--text-primary);
  --bs-table-bg: transparent; --bs-table-striped-color: var(--text-primary);
  --bs-table-hover-color: #fff; --bs-table-border-color: rgba(255,255,255,.08); }
.table > :not(caption) > * > * { color: var(--text-primary); border-color: rgba(255,255,255,.08); }
.table thead th { color: var(--text-muted); }
.table-hover > tbody > tr:hover > * { background: rgba(245,158,11,.07); color:#fff; }

/* Dropdowns / menus */
.dropdown-menu { background: var(--bg-card); border:1px solid var(--border-gold); }
.dropdown-item { color: var(--text-primary); }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(245,158,11,.12); color:#fff; }
.dropdown-divider { border-color: rgba(255,255,255,.1); }

/* Modais */
.modal-content { background: var(--bg-card); color: var(--text-primary); border:1px solid var(--border-gold); }
.modal-header, .modal-footer { border-color: rgba(255,255,255,.1); }

/* Formulários: opções de select e texto */
.form-control, .form-select { color: var(--text-primary) !important; }
.form-select option { background: var(--bg-card); color: var(--text-primary); }
.form-label, .form-check-label { color: #d7dee8; }
.form-control::placeholder { color: var(--text-dim); opacity:1; }

/* List groups */
.list-group-item { background: transparent; color: var(--text-primary); border-color: rgba(255,255,255,.08); }

/* Cards Bootstrap padrão (fundo branco) → escurece */
.card:not(.glass-card):not(.kpi-card) { background: var(--bg-card); color: var(--text-primary); border:1px solid var(--border-subtle); }
.card-body, .card-title, .card-text { color: var(--text-primary); }

/* Badges claras precisam de texto escuro (já ok) — badges escuras texto claro */
.badge.bg-secondary, .badge.bg-dark { color:#fff; }

/* Inputs de número/data com ícones brancos */
input[type=date]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator { filter: invert(.8); }

/* Nav tabs / pills */
.nav-tabs .nav-link, .nav-pills .nav-link { color: var(--text-muted); }
.nav-tabs .nav-link.active, .nav-pills .nav-link.active { color:#fff; }

/* ═══ LOBBY — estética premium de cassino ════════════════════════ */
.lobby-hero {
  position: relative; border-radius: 18px; overflow: hidden; margin-bottom: 1.5rem;
  padding: 1.6rem 1.8rem;
  background:
    radial-gradient(120% 140% at 15% 0%, rgba(245,158,11,.16), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(16,185,129,.14), transparent 55%),
    linear-gradient(120deg, #0c1f10, #0a0a16 60%);
  border: 1px solid var(--border-gold);
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.lobby-hero h2 { color:#fff; font-weight:900; letter-spacing:.5px; text-shadow:0 0 24px var(--gold-glow); }
.lobby-hero .suit-deco { position:absolute; right:-10px; top:-20px; font-size:9rem; opacity:.06; color:var(--gold); pointer-events:none; }

/* Stats cards com brilho */
.container-fluid .glass-card-sm { transition: var(--transition); }
.container-fluid .glass-card-sm:hover { border-color: var(--border-gold); transform: translateY(-2px); }

/* Table cards — feltro + brilho por categoria */
.table-card {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(31,77,34,.55), transparent 60%),
    var(--bg-glass);
  border: 1px solid rgba(255,255,255,.09);
}
.table-card::after {
  content:''; position:absolute; left:0; right:0; top:0; height:3px;
  background: linear-gradient(90deg, var(--gold), transparent);
  opacity:.7;
}
.table-card:hover { box-shadow: 0 0 0 1px var(--border-gold), 0 18px 40px rgba(0,0,0,.55), 0 0 30px rgba(245,158,11,.12); }
.table-card h6 { color:#fff !important; }
.table-players-bar { height:6px; border-radius:6px; overflow:hidden; }
.table-players-fill { height:100%; background: linear-gradient(90deg, #10b981, #f59e0b); border-radius:6px; }

/* Filtro de categorias tipo "pílula" */
.container-fluid .btn-outline-gold { border-color: rgba(245,158,11,.4); }

/* Rótulos legíveis nos cards */
.table-card .text-muted { color:#c3ccda !important; }

/* ═══ LOJA / MISSÕES / RANKING — polish ══════════════════════════ */
/* Itens da loja */
.shop-item { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.shop-item:hover { transform: translateY(-6px); border-color: var(--border-gold) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 0 26px rgba(245,158,11,.14); }
.shop-item .p-4 { transition: background .2s ease; }
.shop-item:hover .p-4 { background: linear-gradient(135deg, rgba(212,175,55,.16), rgba(0,0,0,0)) !important; }

/* Barras de progresso (Bootstrap .progress) tema escuro/dourado */
.progress { background: rgba(255,255,255,.08) !important; border-radius: 999px; height: 8px; overflow: hidden; }
.progress-bar { background: linear-gradient(90deg, #10b981, #f59e0b) !important; border-radius: 999px; }

/* Cards de missão */
.mission-card, .missions .glass-card { transition: transform .18s ease, box-shadow .18s ease; }
.missions .glass-card:hover { transform: translateY(-3px); }

/* Ranking — pódio com brilho e medalhas */
.container .glass-card[style*="border-top"] { box-shadow: 0 12px 34px rgba(0,0,0,.5), 0 0 24px rgba(245,158,11,.10); }
.rank-row { transition: background .15s ease; border-radius: 12px; }
.rank-row:hover { background: rgba(245,158,11,.06); }
.rank-medal { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-weight: 900; }
.rank-1 { background: linear-gradient(135deg,#ffe58a,#d4af37); color:#3a2a00; box-shadow:0 0 14px rgba(245,158,11,.5); }
.rank-2 { background: linear-gradient(135deg,#e8edf3,#9aa7b5); color:#26303a; }
.rank-3 { background: linear-gradient(135deg,#f0b892,#b5773f); color:#2a1600; }

/* Badge BOT no ranking (quando o admin ativa) */
.bot-tag { font-size:.6rem; font-weight:800; padding:1px 6px; border-radius:6px;
  background: rgba(139,92,246,.2); color:#c4b5fd; border:1px solid rgba(139,92,246,.4); }

/* Títulos de página com sublinhado dourado */
.page-title-underline { position:relative; display:inline-block; }
.page-title-underline::after { content:''; position:absolute; left:0; bottom:-6px; width:48px; height:3px;
  background: linear-gradient(90deg,var(--gold),transparent); border-radius:3px; }

/* Aposta na mesa (perto do pote) — sem sobrepor assentos */
.table-bet {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 3px;
  font-size: calc(var(--u,10px) * 0.9);
  background: rgba(0,0,0,.75);
  border: 1px solid var(--gold);
  border-radius: 20px;
  padding: 1px calc(var(--u,10px) * 0.55) 1px 2px;
  color: var(--gold); font-weight: 800; white-space: nowrap;
  z-index: 15;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
/* Selos SB/BB compactos ao lado do nome */
.seat-blind { font-size: calc(var(--u,10px) * 0.72); font-weight: 800; padding: 0 4px;
  border-radius: 5px; margin-left: 3px; vertical-align: middle; }
.seat-blind.sb { background: #3b82f6; color: #fff; }
.seat-blind.bb { background: #10b981; color: #04231a; }

/* Botão "Levantar da mesa" */
.btn-standup {
  background: linear-gradient(180deg,#4b5563,#1f2937);
  color: #fff; border: 1px solid rgba(255,255,255,.15); font-weight: 800;
  border-radius: 999px; box-shadow: 0 4px 0 rgba(0,0,0,.35);
}
.btn-standup:hover { filter: brightness(1.15); color:#fff; }
.btn-standup:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }

/* ═══ CARTAS COM IMAGEM REALISTA (Deck of Cards, self-hosted) ═══ */
img.card-component.card-face {
  object-fit: contain;
  background: #fff;
  border: none;
  padding: 0;
  border-radius: calc(var(--card-w, 58px) * 0.09);
  box-shadow: 0 3px 9px rgba(0,0,0,.45);
}
/* Verso das cartas — padrão premium desenhado em CSS (vinho + treliça dourada) */
.card-component.card-back {
  background-color: #7a1122 !important;
  background-image:
    repeating-linear-gradient( 45deg, rgba(249,200,90,.18) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, rgba(249,200,90,.18) 0 2px, transparent 2px 9px),
    radial-gradient(ellipse at 50% 50%, #9a1a30 0%, #6d0f1f 80%) !important;
  border: 1px solid rgba(249,200,90,.55) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.55), inset 0 0 0 2px rgba(0,0,0,.22), inset 0 0 0 3px rgba(249,200,90,.35) !important;
}
.card-component.card-back::after {
  content: '♠' !important;
  width: calc(var(--card-w, 58px) * 0.5); height: calc(var(--card-w, 58px) * 0.5);
  display: grid; place-items: center; border-radius: 50%;
  font-size: calc(var(--card-w, 58px) * 0.28); color: #f7d071;
  background: radial-gradient(circle at 50% 40%, rgba(0,0,0,.35), rgba(0,0,0,.08));
  border: 1.5px solid rgba(249,200,90,.6); text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
/* fallback: se a imagem 404, some (raro — tudo self-hosted) */
img.card-face.card-fallback { visibility: hidden; }

/* ═══════════════════════════════════════════════════════════════
   ROYAL POKER — DESIGN SYSTEM v2 (premium, mobile-first)
   Sobrescreve os componentes base com acabamento de app premium.
   ═══════════════════════════════════════════════════════════════ */

/* ── Base / tipografia ─────────────────────────────────────── */
body {
  background:
    radial-gradient(120% 80% at 50% -10%, #14210f 0%, transparent 55%),
    var(--bg-deep);
  color: var(--text-primary);
  font-family: 'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  letter-spacing: .1px;
  -webkit-font-smoothing: antialiased;
}
body::before {
  background:
    radial-gradient(ellipse at 15% 0%, rgba(0,230,118,.06) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 10%, rgba(249,168,37,.05) 0%, transparent 55%);
}
h1,h2,h3,h4,h5,h6 { letter-spacing: -.3px; }
.text-gold { color: var(--gold) !important; }
.text-success, .text-green { color: var(--green-bright) !important; }

/* Aparecimento suave das páginas */
@keyframes ds-page-in { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:none; } }
.container, .container-fluid, .admin-content > * { animation: ds-page-in .35s ease both; }

/* ── Cards premium (glassmorphism leve) ────────────────────── */
.glass-card, .kpi-card, .table-card, .shop-item, .glass-card-sm {
  background: linear-gradient(180deg, rgba(30,30,30,.92), rgba(17,17,17,.92));
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(14px) saturate(1.3);
}
.glass-card-sm { border-radius: var(--radius); }
.glass-card:hover, .kpi-card:hover { border-color: rgba(255,255,255,.14); }

/* ── Botões (padronizados, todos os estados) ───────────────── */
.btn {
  border-radius: var(--radius-pill);
  font-weight: 700;
  letter-spacing: .2px;
  transition: transform .12s var(--ease-spring), filter .15s ease, box-shadow .15s ease, background .2s ease;
  position: relative;
  overflow: hidden;
}
.btn:active { transform: scale(.97); }
.btn:disabled, .btn.disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.2); }
.btn:focus-visible { outline: 2px solid var(--green-bright); outline-offset: 2px; }
/* ripple */
.btn::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at var(--rx,50%) var(--ry,50%), rgba(255,255,255,.35) 0%, transparent 45%);
  opacity: 0; transition: opacity .5s ease;
}
.btn:active::after { opacity: 1; transition: none; }

.btn-gold {
  background: linear-gradient(180deg, #ffce5a 0%, var(--gold) 55%, #e08c00 100%);
  color: #1a1200; box-shadow: 0 6px 18px rgba(249,168,37,.28), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-gold:hover { color:#1a1200; filter: brightness(1.05); box-shadow: 0 10px 26px rgba(249,168,37,.4); transform: translateY(-1px); }

.btn-success, .btn-green {
  background: linear-gradient(180deg, var(--green-bright), var(--green) 60%, #009d43 100%);
  color: #04240f; border: none; box-shadow: 0 6px 18px rgba(0,230,118,.28), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-success:hover, .btn-green:hover { color:#04240f; filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,230,118,.4); }

.btn-outline-gold { border: 1.5px solid rgba(249,168,37,.55); color: var(--gold); background: transparent; }
.btn-outline-gold:hover { background: var(--gold); color:#1a1200; box-shadow: 0 0 22px var(--gold-glow); }

.btn-dark-glass {
  background: rgba(255,255,255,.05); border: 1px solid var(--hairline); color: var(--text-primary);
  backdrop-filter: blur(10px);
}
.btn-dark-glass:hover { background: rgba(255,255,255,.1); border-color: rgba(0,230,118,.4); color:#fff; }

.btn-danger { background: linear-gradient(180deg,#ff6b6b,#e53935); border:none; color:#fff; }

/* spinner dentro de botão */
.btn .spinner-border { width: 1rem; height: 1rem; border-width: .15em; }

/* ── Inputs / formulários ──────────────────────────────────── */
.form-control, .form-select {
  background: rgba(255,255,255,.04);
  border: 1.5px solid var(--hairline);
  color: #fff;
  border-radius: var(--radius);
  padding: .8rem 1rem;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.form-control:focus, .form-select:focus {
  background: rgba(255,255,255,.06);
  border-color: var(--green-bright);
  box-shadow: 0 0 0 3px var(--green-glow);
  color:#fff;
}
.form-control::placeholder { color: var(--text-dim); }
.input-group-text { background: rgba(255,255,255,.05); border:1.5px solid var(--hairline); color: var(--text-muted); border-radius: var(--radius); }
.form-check-input:checked { background-color: var(--green); border-color: var(--green); }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--green-glow); border-color: var(--green-bright); }

/* ── Navbar / header ───────────────────────────────────────── */
.royal-navbar {
  background: rgba(9,9,9,.82);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 6px 24px rgba(0,0,0,.4);
}
.royal-navbar .navbar-brand { color: var(--gold); letter-spacing: .5px; }
.royal-navbar .nav-link { border-radius: var(--radius-pill); color: var(--text-muted); font-weight:600; }
.royal-navbar .nav-link:hover { color:#fff; background: rgba(255,255,255,.06); }
.royal-navbar .nav-link.active { color: var(--green-bright); background: rgba(0,230,118,.1); }
.balance-display {
  background: linear-gradient(180deg, rgba(249,168,37,.16), rgba(249,168,37,.05));
  border: 1px solid var(--border-gold); border-radius: var(--radius-pill);
  color: var(--gold); font-weight: 800; box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}

/* ── Badges ────────────────────────────────────────────────── */
.badge { border-radius: var(--radius-pill); font-weight:700; letter-spacing:.2px; padding:.35em .7em; }
.badge.bg-success { background: rgba(0,230,118,.18)!important; color: var(--green-bright)!important; }
.badge.bg-secondary { background: rgba(255,255,255,.1)!important; color:#cbd3dc!important; }
.badge.bg-warning { background: rgba(249,168,37,.2)!important; color: var(--gold)!important; }

/* ── Tabelas modernas ──────────────────────────────────────── */
.table { --bs-table-bg: transparent; color: var(--text-primary); }
.table > :not(caption) > * > * { border-color: var(--hairline); padding: .85rem .75rem; }
.table thead th { color: var(--text-muted); text-transform: uppercase; font-size:.68rem; letter-spacing:.6px; border-bottom:1px solid var(--hairline); }
.table-hover > tbody > tr { transition: background .15s; }
.table-hover > tbody > tr:hover > * { background: rgba(0,230,118,.06); }

/* ── Dropdowns / menus ─────────────────────────────────────── */
.dropdown-menu {
  background: var(--bg-elev); border: 1px solid var(--hairline);
  border-radius: var(--radius); box-shadow: var(--shadow-3); padding: 6px;
  animation: ds-page-in .18s ease both;
}
.dropdown-item { border-radius: 10px; color: var(--text-primary); font-weight:500; }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(0,230,118,.12); color:#fff; }

/* ── Modais premium ────────────────────────────────────────── */
.modal-backdrop.show { opacity:.72; backdrop-filter: blur(6px); }
.modal-content {
  background: var(--bg-elev); color:#fff; border:1px solid var(--hairline);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-3);
}
.modal.fade .modal-dialog { transform: scale(.94) translateY(10px); transition: transform .25s var(--ease-spring), opacity .25s; }
.modal.show .modal-dialog { transform: none; }
.modal-header, .modal-footer { border-color: var(--hairline); }

/* ── Skeleton / shimmer / loading ──────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.12) 37%, rgba(255,255,255,.05) 63%);
  background-size: 400% 100%;
  animation: ds-shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}
@keyframes ds-shimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }
.spinner-modern {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.12); border-top-color: var(--green-bright);
  animation: ds-spin .7s linear infinite;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* ── Utilidades de animação ────────────────────────────────── */
.anim-fade { animation: ds-page-in .35s ease both; }
@keyframes ds-slide-up { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
@keyframes ds-scale-in { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:none} }
.anim-slide { animation: ds-slide-up .4s var(--ease-spring) both; }
.anim-scale { animation: ds-scale-in .3s var(--ease-spring) both; }

/* Scrollbar fina premium */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--green),var(--green-dark,#008f3a)); border-radius:8px; }

/* ═══ MENU INFERIOR MOBILE (estilo app) ═══════════════════════ */
#mobile-nav { display: none; }
@media (max-width: 768px) {
  #mobile-nav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
    height: calc(var(--mobilenav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(12,12,12,.92);
    backdrop-filter: blur(18px) saturate(1.4);
    border-top: 1px solid var(--hairline);
    box-shadow: 0 -8px 30px rgba(0,0,0,.5);
  }
  #mobile-nav a, #mobile-nav button {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; color: var(--text-dim); text-decoration: none; font-size: .62rem; font-weight: 700;
    letter-spacing: .2px; position: relative; transition: color .2s;
    background: transparent; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  #mobile-nav a i, #mobile-nav button i { font-size: 1.32rem; transition: transform .2s var(--ease-spring); }
  #mobile-nav a.active { color: var(--green-bright); }
  #mobile-nav a.active i { transform: translateY(-2px) scale(1.08); }
  #mobile-nav a.active::before {
    content:''; position:absolute; top:0; width:26px; height:3px; border-radius:0 0 4px 4px;
    background: var(--green-bright); box-shadow: 0 0 10px var(--green-glow);
  }
  #mobile-nav .mnav-cta { overflow: visible; }
  #mobile-nav .mnav-cta i {
    background: linear-gradient(180deg,#ffce5a,var(--gold)); color:#1a1200;
    width: 52px; height: 52px; border-radius: 50%; display:flex; align-items:center; justify-content:center;
    margin-top: -26px; box-shadow: 0 8px 20px rgba(249,168,37,.55), 0 0 0 5px rgba(12,12,12,.92); font-size: 1.5rem;
    transition: transform .15s var(--ease-spring);
  }
  #mobile-nav .mnav-cta:active i { transform: scale(.92); }
  /* Espaço para o conteúdo não ficar sob o menu */
  body:not(.no-mobilenav) { padding-bottom: calc(var(--mobilenav-h) + env(safe-area-inset-bottom,0px)); }
  /* Na navbar do topo, esconde os links (vão pro menu inferior) */
  .royal-navbar .navbar-collapse .navbar-nav { display: none !important; }
  .royal-navbar .navbar-toggler { display: none !important; }
}

/* ── Carteira bottom-sheet (mobile) ─────────────────────────── */
.wallet-sheet{position:fixed;inset:0;z-index:1200;display:none}
.wallet-sheet.is-open{display:block}
.wallet-sheet__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px);opacity:0;animation:wsFade .2s ease forwards}
.wallet-sheet__panel{position:absolute;left:0;right:0;bottom:0;background:#111;border-top-left-radius:22px;border-top-right-radius:22px;
  border-top:1px solid rgba(255,255,255,.08);padding:10px 16px calc(18px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -20px 50px rgba(0,0,0,.6);transform:translateY(100%);animation:wsUp .28s cubic-bezier(.22,1,.36,1) forwards}
@keyframes wsFade{to{opacity:1}}
@keyframes wsUp{to{transform:translateY(0)}}
.wallet-sheet__grip{width:42px;height:5px;border-radius:99px;background:rgba(255,255,255,.18);margin:6px auto 12px}
.wallet-sheet__title{color:#fff;font-weight:700;margin:0 4px 12px;font-size:1.05rem}
.wallet-sheet__item{display:flex;align-items:center;gap:14px;padding:14px;border-radius:16px;text-decoration:none;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);margin-bottom:10px;transition:.15s}
.wallet-sheet__item:active{transform:scale(.98);background:rgba(255,255,255,.06)}
.wallet-sheet__item .ws-ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:1.25rem;flex:0 0 auto}
.ws-ico--in{background:rgba(0,230,118,.14);color:var(--green-bright)}
.ws-ico--out{background:rgba(249,168,37,.15);color:var(--gold-light)}
.ws-ico--hist{background:rgba(120,140,255,.14);color:#9fb0ff}
.wallet-sheet__item .ws-txt{display:flex;flex-direction:column;line-height:1.25;flex:1}
.wallet-sheet__item .ws-txt b{color:#fff;font-size:1rem}
.wallet-sheet__item .ws-txt small{color:rgba(255,255,255,.5);font-size:.82rem}
.wallet-sheet__item .ws-arrow{color:rgba(255,255,255,.3);font-size:.9rem}
.wallet-sheet__cancel{width:100%;margin-top:6px;padding:14px;border-radius:14px;border:1px solid rgba(255,255,255,.1);
  background:transparent;color:rgba(255,255,255,.75);font-weight:600;cursor:pointer}
.wallet-sheet__cancel:active{background:rgba(255,255,255,.05)}
button.mnav-cta{border:none;font:inherit}

/* ── Abas Depositar/Sacar ────────────────────────────────────── */
.wallet-tabs{display:flex;gap:8px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);padding:6px;border-radius:16px}
.wallet-tab{flex:1;text-align:center;padding:11px;border-radius:11px;text-decoration:none;font-weight:700;
  color:rgba(255,255,255,.6);transition:.15s;font-size:.95rem}
.wallet-tab.is-active{background:linear-gradient(135deg,var(--green),var(--green-bright));color:#062;box-shadow:0 6px 18px var(--green-glow)}
.wallet-tab:not(.is-active):active{background:rgba(255,255,255,.06);color:#fff}

/* ── SweetAlert2 · tema Royal Poker premium ─────────────────── */
.swal2-container{backdrop-filter:blur(4px)}
.swal2-popup{
  background:linear-gradient(180deg,#161616,#0d0d0d)!important;color:#f1f5f9!important;
  border:1px solid rgba(249,168,37,.28)!important;border-radius:22px!important;
  box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.03) inset!important;
  padding:26px 22px 22px!important
}
.swal2-title{color:#fff!important;font-weight:800!important;font-size:1.35rem!important}
.swal2-html-container,.swal2-content{color:rgba(255,255,255,.72)!important;font-size:.98rem!important}
.swal2-icon{border-color:currentColor!important}
.swal2-icon.swal2-warning{color:#F9A825!important;border-color:rgba(249,168,37,.5)!important}
.swal2-icon.swal2-success{color:#00E676!important;border-color:rgba(0,230,118,.5)!important}
.swal2-icon.swal2-success [class^='swal2-success-line']{background-color:#00E676!important}
.swal2-icon.swal2-success .swal2-success-ring{border-color:rgba(0,230,118,.35)!important}
.swal2-icon.swal2-error{color:#ff5a5a!important;border-color:rgba(255,90,90,.5)!important}
.swal2-icon.swal2-error [class^='swal2-x-mark-line']{background-color:#ff5a5a!important}
.swal2-icon.swal2-info,.swal2-icon.swal2-question{color:#37b6ff!important;border-color:rgba(55,182,255,.5)!important}
.swal2-actions{gap:10px!important;margin-top:20px!important}
.swal2-styled{border-radius:13px!important;font-weight:800!important;padding:13px 26px!important;
  font-size:1rem!important;box-shadow:none!important;transition:.15s!important;margin:0!important}
.swal2-styled.swal2-confirm{
  background:linear-gradient(135deg,#F9A825,#ffcb52)!important;color:#3a2600!important;
  box-shadow:0 8px 22px rgba(249,168,37,.35)!important}
.swal2-styled.swal2-confirm:hover{filter:brightness(1.05)}
.swal2-styled.swal2-cancel{
  background:transparent!important;color:rgba(255,255,255,.7)!important;
  border:1px solid rgba(255,255,255,.16)!important}
.swal2-styled:focus{box-shadow:none!important;outline:none!important}
.swal2-styled.swal2-deny{background:linear-gradient(135deg,#e53935,#ff5a5a)!important;color:#fff!important}
.swal2-input,.swal2-textarea,.swal2-select{
  background:rgba(255,255,255,.04)!important;color:#fff!important;
  border:1px solid rgba(255,255,255,.14)!important;border-radius:11px!important}
.swal2-toast{background:linear-gradient(180deg,#161616,#0d0d0d)!important;border:1px solid rgba(255,255,255,.1)!important}
/* botão gold de confirmar por padrão quando o jogo passa confirmButtonColor verde */
.swal2-timer-progress-bar{background:rgba(249,168,37,.5)!important}

/* ── Camada de efeitos da mesa (embaralhar/distribuir/fichas) ── */
#fx-layer{position:absolute;inset:0;pointer-events:none;z-index:45;overflow:visible}
#fx-layer .fx{position:absolute;will-change:transform,opacity}
/* Carta (verso) usada no embaralhar e na distribuição */
.fx-card{
  width:calc(var(--u,10px) * 4.2);height:calc(var(--u,10px) * 5.9);border-radius:calc(var(--u,10px) * .7);
  background:
    repeating-linear-gradient(45deg,#7a1020 0 6px,#8f1528 6px 12px),
    radial-gradient(circle at 50% 50%,#b01b34,#6d0f1f);
  border:1.5px solid #f4d06a;
  box-shadow:0 3px 8px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,255,255,.12);
  transform:translate(-50%,-50%);
}
/* Baralho empilhado no centro durante o embaralhar */
.fx-deck{left:50%;top:42%}
.fx-deck .fx-card{position:absolute;left:0;top:0}
@keyframes fxRiffle{
  0%,100%{transform:translate(-50%,-50%) rotate(0) translateX(0)}
  25%{transform:translate(-50%,-50%) rotate(-7deg) translateX(-7px)}
  50%{transform:translate(-50%,-50%) rotate(0) translateX(0)}
  75%{transform:translate(-50%,-50%) rotate(7deg) translateX(7px)}
}
.fx-deck.shuffling .fx-card{animation:fxRiffle .34s ease-in-out}
/* Distribuição: a carta voa do baralho até o assento */
@keyframes fxDeal{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.7) rotate(0)}
  12%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.62) rotate(var(--dr))}
}
.fx-card.dealing{left:50%;top:42%;animation:fxDeal .5s cubic-bezier(.3,.7,.4,1) forwards}
/* Ficha voando do assento até o pote */
.fx-chip{
  width:calc(var(--u,10px) * 2.1);height:calc(var(--u,10px) * 2.1);border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#ffe08a,var(--c,#F9A825) 62%,#7a5200);
  border:2px dashed rgba(255,255,255,.75);box-shadow:0 3px 7px rgba(0,0,0,.5);
  transform:translate(-50%,-50%);
}
@keyframes fxChip{
  0%{opacity:0;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) scale(.6)}
  15%{opacity:1;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) scale(1)}
  100%{opacity:.9;transform:translate(-50%,-50%) scale(.75)}
}
.fx-chip.flying{left:50%;top:48%;animation:fxChip .55s cubic-bezier(.4,.2,.2,1) forwards}
/* Entrada das cartas comunitárias (flip) */
@keyframes fxFlipIn{
  0%{opacity:0;transform:translateY(-16px) rotateY(90deg) scale(.85)}
  60%{opacity:1}
  100%{opacity:1;transform:translateY(0) rotateY(0) scale(1)}
}
#community-cards .card-component.fx-flip{animation:fxFlipIn .42s cubic-bezier(.2,.8,.3,1) backwards}

/* ═══ AÇÕES DO JOGADOR — botões modernos/profissionais ═══════════ */
#action-panel { background: linear-gradient(0deg, rgba(0,0,0,.94), rgba(10,14,10,.72)); }
.rp-actions {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 10px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom,0px));
  max-width: 760px; margin: 0 auto;
}
.rp-btn {
  --c1:#3a4250; --c2:#232a34; --edge:#151a22; --ink:#fff;
  position: relative; border: none; cursor: pointer; color: var(--ink);
  border-radius: 15px; padding: 12px 6px 11px; font-weight: 800; letter-spacing:.3px;
  display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1;
  background: linear-gradient(180deg, var(--c1), var(--c2));
  box-shadow: 0 4px 0 var(--edge), 0 8px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
  -webkit-tap-highlight-color: transparent; overflow: hidden;
}
.rp-btn::before { /* brilho superior */
  content:''; position:absolute; inset:0 0 55% 0; border-radius:15px 15px 40% 40%;
  background: linear-gradient(180deg, rgba(255,255,255,.25), transparent); pointer-events:none;
}
.rp-btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--edge), 0 3px 10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2); }
.rp-btn:disabled { opacity:.4; filter: grayscale(.5); pointer-events:none; }
.rp-btn__ico { font-size: 1.25rem; }
.rp-btn__lbl { font-size: .82rem; display:flex; flex-direction:column; align-items:center; }
.rp-btn__lbl small { font-size:.66rem; font-weight:700; opacity:.85; }
.rp-btn--fold  { --c1:#ff6b6b; --c2:#d32f2f; --edge:#8e1616; }
.rp-btn--check { --c1:#42c98d; --c2:#1f9d63; --edge:#0f5f3a; --ink:#04240f; }
.rp-btn--call  { --c1:#3aa0ff; --c2:#1f6fd6; --edge:#124a94; }
.rp-btn--raise { --c1:#ffd166; --c2:#f0a500; --edge:#9a6a00; --ink:#2a1c00; }
.rp-btn--allin { --c1:#c77dff; --c2:#8b2fd6; --edge:#5a1a90; }
.rp-btn.is-active-turn { animation: rpPulse 1.2s ease-in-out infinite; }
@keyframes rpPulse { 0%,100%{ filter:brightness(1) } 50%{ filter:brightness(1.18) } }

/* Raise: slider + presets */
.rp-raise { max-width:760px; margin:0 auto; padding: 10px 16px 2px; }
.rp-raise__top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.rp-raise__presets { display:flex; gap:6px; }
.rp-chipbtn {
  border:1px solid rgba(249,168,37,.4); background:rgba(249,168,37,.1); color:#ffcf6b;
  font-weight:800; font-size:.74rem; padding:6px 10px; border-radius:999px; cursor:pointer; transition:.12s;
}
.rp-chipbtn:active, .rp-chipbtn.on { background:var(--gold); color:#231800; }
.rp-raise__val { color:#ffcf6b; font-weight:900; font-size:1.05rem; white-space:nowrap; }
.rp-slider { -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:999px;
  background: linear-gradient(90deg, var(--gold) var(--val,0%), rgba(255,255,255,.12) var(--val,0%)); outline:none; }
.rp-slider::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background: radial-gradient(circle at 40% 35%, #fff, var(--gold) 60%, #a56b00); border:2px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,.5); cursor:pointer; }
.rp-slider::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:var(--gold); border:2px solid #fff; cursor:pointer; }
#raise-slider-wrap { display:none; }
#raise-slider-wrap.show { display:block; }
@media (max-width:768px){
  .rp-btn { border-radius:13px; padding:10px 4px; }
  .rp-btn__lbl { font-size:.76rem; }
  .rp-btn__ico { font-size:1.15rem; }
  .rp-actions { gap:7px; padding:9px 9px calc(9px + env(safe-area-inset-bottom,0px)); }
}

/* ═══ BANNER VIP (lobby) ═════════════════════════════════════════ */
.vip-banner {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px; border-radius: 20px;
  background: linear-gradient(120deg, #1a1206 0%, #241a08 40%, #120e1f 100%);
  border: 1px solid rgba(249,168,37,.4);
  box-shadow: 0 12px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
.vip-banner.is-vip { border-color: rgba(0,230,118,.4); background: linear-gradient(120deg,#06180d,#0a2216 50%,#120e1f); }
.vip-banner__glow { position:absolute; inset:0; background:
  radial-gradient(120% 160% at 8% 0%, rgba(249,168,37,.22), transparent 55%); pointer-events:none; }
.vip-banner.is-vip .vip-banner__glow { background: radial-gradient(120% 160% at 8% 0%, rgba(0,230,118,.2), transparent 55%); }
.vip-banner__ico {
  flex: 0 0 auto; width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center;
  font-size: 1.9rem; color: #231800; z-index:1;
  background: linear-gradient(180deg,#ffde8a,#f0a500); box-shadow: 0 8px 20px rgba(249,168,37,.4);
}
.vip-banner.is-vip .vip-banner__ico { color:#04240f; background: linear-gradient(180deg,#7dffb4,#00c853); box-shadow:0 8px 20px rgba(0,230,118,.4); }
.vip-banner__txt { flex: 1; z-index:1; min-width: 0; }
.vip-banner__txt h5 { color:#fff; font-weight:900; margin:0 0 3px; font-size:1.15rem; }
.vip-banner__txt p { color: rgba(255,255,255,.68); margin:0; font-size:.86rem; line-height:1.35; }
.vip-banner__txt .txt-gold { background:linear-gradient(90deg,#ffde8a,#f0a500); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.vip-banner__btn {
  flex: 0 0 auto; z-index:1; text-decoration:none; white-space:nowrap;
  padding: 12px 22px; border-radius: 13px; font-weight: 900; cursor: pointer; border: none;
  background: linear-gradient(180deg,#ffde8a,#f0a500); color:#2a1c00;
  box-shadow: 0 8px 20px rgba(249,168,37,.4), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .12s ease, filter .15s ease;
}
.vip-banner.is-vip .vip-banner__btn { background: linear-gradient(180deg,#7dffb4,#00c853); color:#04240f; box-shadow:0 8px 20px rgba(0,230,118,.4); }
.vip-banner__btn:active { transform: translateY(2px); }
.vip-banner__btn:hover { filter: brightness(1.05); }
@media (max-width: 620px){
  .vip-banner { flex-wrap: wrap; }
  .vip-banner__btn { width: 100%; text-align:center; }
}

/* ═══ TEMAS COSMÉTICOS DA LOJA (baralho + feltro) ════════════════ */
/* Baralho Neon */
body.deck-neon .card-component.card-back {
  background-color:#0b1622 !important;
  background-image:
    repeating-linear-gradient(45deg, rgba(0,255,231,.22) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, rgba(255,0,200,.20) 0 2px, transparent 2px 9px),
    radial-gradient(ellipse at 50% 50%, #12324a 0%, #08111c 82%) !important;
  border-color: rgba(0,255,231,.6) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.55), inset 0 0 12px rgba(0,255,231,.25) !important;
}
body.deck-neon .card-component.card-back::after { color:#5ffbe6 !important; border-color:rgba(0,255,231,.6) !important; }
/* Baralho Clássico Azul */
body.deck-blue .card-component.card-back {
  background-color:#16224e !important;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.14) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.14) 0 2px, transparent 2px 8px),
    radial-gradient(ellipse at 50% 50%, #24356e 0%, #131d44 82%) !important;
  border-color: rgba(255,255,255,.4) !important;
}
body.deck-blue .card-component.card-back::after { color:#cdd8ff !important; border-color:rgba(255,255,255,.5) !important; }
/* Feltros */
body.felt-red   #poker-table-wrapper { background: radial-gradient(ellipse at center,#7d1f1f 0%,#5a1414 55%,#2c0a0a 100%) !important; }
body.felt-black #poker-table-wrapper { background: radial-gradient(ellipse at center,#2a2a2e 0%,#18181c 55%,#0a0a0c 100%) !important; }
body.felt-emerald #poker-table-wrapper { background: radial-gradient(ellipse at center,#0f7a4a 0%,#0a5c37 55%,#063d24 100%) !important; }
/* Tema Neon (mesa + brilho verde) */
body.theme-neon #poker-table-wrapper { box-shadow:0 0 0 3px #0f9d58,0 0 0 7px #063311,inset 0 0 90px rgba(0,0,0,.55),0 24px 70px rgba(0,0,0,.8),0 0 80px rgba(34,255,136,.3) !important; }

/* ============================================================
   ROYAL POKER — Premium Dark Gold Theme
   ============================================================ */

/* ── Design Tokens (Design System v2 — premium) ────────────── */
:root {
  /* Paleta premium: preto profundo + verde poker + dourado */
  --green:        #00C853;
  --green-bright: #00E676;
  --green-glow:   rgba(0,230,118,0.30);
  --gold:         #F9A825;
  --gold-light:   #ffcb52;
  --gold-dark:    #c17e00;
  --gold-glow:    rgba(249,168,37,0.32);
  --neon-green:   #00E676;
  --neon-red:     #ff5252;
  --neon-blue:    #40c4ff;
  /* Fundos (8 → 33) */
  --bg-deep:      #090909;
  --bg-dark:      #111111;
  --bg-card:      #181818;
  --bg-panel:     #222222;
  --bg-elev:      #1e1e1e;
  --bg-glass:     rgba(24,24,24,0.72);
  --border-gold:  rgba(249,168,37,0.28);
  --border-subtle:rgba(255,255,255,0.08);
  --hairline:     rgba(255,255,255,0.06);
  --text-primary: #FFFFFF;
  --text-muted:   #a9b1bb;
  --text-dim:     #6b7480;
  --shadow-gold:  0 0 30px rgba(249,168,37,0.18);
  --shadow-deep:  0 18px 50px rgba(0,0,0,0.65);
  --shadow-1:     0 1px 2px rgba(0,0,0,0.4);
  --shadow-2:     0 4px 12px rgba(0,0,0,0.45);
  --shadow-3:     0 10px 30px rgba(0,0,0,0.55);
  /* Espaçamento — grid 8px */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; --sp-8: 48px;
  /* Raios padronizados */
  --radius-sm: 8px;  --radius: 14px; --radius-lg: 20px; --radius-xl: 28px;
  --radius-pill: 999px;
  --transition:   all .25s cubic-bezier(.4,0,.2,1);
  --ease-spring:  cubic-bezier(.34,1.56,.64,1);
  /* altura do menu inferior mobile */
  --mobilenav-h: 62px;
}

/* ── Reset & Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: 'Inter', 'Segoe UI', sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(245,158,11,0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(59,130,246,0.05) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(16,185,129,0.04) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ── Typography ─────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 { font-weight: 700; line-height: 1.2; }
.text-gold   { color: var(--gold); }
.text-muted  { color: var(--text-muted); }

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: var(--gold-dark); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ── Glass Card ─────────────────────────────────────────────── */
.glass-card {
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-deep), inset 0 1px 0 rgba(255,255,255,0.05);
}

.glass-card-sm {
  background: rgba(26,26,46,0.7);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn-gold {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #000;
  border: none;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: var(--transition);
  box-shadow: 0 4px 15px rgba(245,158,11,0.4);
}
.btn-gold:hover {
  background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(245,158,11,0.5);
}
.btn-gold:active { transform: translateY(0); }

.btn-outline-gold {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  font-weight: 600;
  transition: var(--transition);
}
.btn-outline-gold:hover {
  background: var(--gold);
  color: #000;
  box-shadow: 0 0 20px var(--gold-glow);
}

.btn-dark-glass {
  background: rgba(255,255,255,0.05);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  backdrop-filter: blur(10px);
  transition: var(--transition);
}
.btn-dark-glass:hover {
  background: rgba(255,255,255,0.1);
  color: var(--text-primary);
  border-color: var(--border-gold);
}

/* Game Action Buttons */
.btn-fold   { background: linear-gradient(135deg,#ef4444,#b91c1c); color:#fff; border:none; font-weight:700; }
.btn-check  { background: linear-gradient(135deg,#3b82f6,#1d4ed8); color:#fff; border:none; font-weight:700; }
.btn-call   { background: linear-gradient(135deg,#10b981,#047857); color:#fff; border:none; font-weight:700; }
.btn-raise  { background: linear-gradient(135deg,#f59e0b,#b45309); color:#000; border:none; font-weight:700; }
.btn-allin  { background: linear-gradient(135deg,#8b5cf6,#5b21b6); color:#fff; border:none; font-weight:700; }

.btn-fold:hover  { filter:brightness(1.2); transform:translateY(-2px); }
.btn-check:hover { filter:brightness(1.2); transform:translateY(-2px); }
.btn-call:hover  { filter:brightness(1.2); transform:translateY(-2px); }
.btn-raise:hover { filter:brightness(1.2); transform:translateY(-2px); }
.btn-allin:hover { filter:brightness(1.2); transform:translateY(-2px); box-shadow:0 0 25px rgba(139,92,246,0.6); }

/* ── Forms ──────────────────────────────────────────────────── */
.form-control, .form-select {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  transition: var(--transition);
}
.form-control:focus, .form-select:focus {
  background: rgba(255,255,255,0.08);
  border-color: var(--gold);
  color: var(--text-primary);
  box-shadow: 0 0 0 3px var(--gold-glow);
  outline: none;
}
.form-control::placeholder { color: var(--text-dim); }

.input-group-text {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
}

/* ── Navbar ─────────────────────────────────────────────────── */
.royal-navbar {
  background: rgba(8,8,18,0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-gold);
  padding: 0.75rem 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.royal-navbar .navbar-brand {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 0 20px var(--gold-glow);
  letter-spacing: 1px;
}

.royal-navbar .nav-link {
  color: var(--text-muted);
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: var(--transition);
}
.royal-navbar .nav-link:hover, .royal-navbar .nav-link.active {
  color: var(--gold);
  background: var(--gold-glow);
}

.balance-display {
  background: linear-gradient(135deg,rgba(245,158,11,0.15),rgba(245,158,11,0.05));
  border: 1px solid var(--border-gold);
  border-radius: 50px;
  padding: 0.4rem 1.2rem;
  color: var(--gold);
  font-weight: 700;
  font-size: 0.95rem;
}

/* ── POKER TABLE ─────────────────────────────────────────────── */
#poker-table-wrapper {
  --u: clamp(7px, 1.15vw, 12px);
  --card-w: calc(var(--u) * 4.6);
  --card-h: calc(var(--card-w) * 1.4);
  --avatar: calc(var(--u) * 5.2);
  background:
    radial-gradient(ellipse at center, #1f4d22 0%, #123a15 55%, #0a250c 100%);
  border-radius: 46% / 50%;
  border: clamp(6px, 1vw, 12px) solid #7a5a12;
  box-shadow:
    0 0 0 3px #5a4209,
    0 0 0 7px #241a08,
    inset 0 0 90px rgba(0,0,0,0.55),
    0 24px 70px rgba(0,0,0,0.8),
    0 0 70px rgba(245,158,11,0.08);
  position: relative;
  width: min(100%, 900px, 112vh);
  aspect-ratio: 16 / 10;
  margin: 0 auto;
}

#poker-table-wrapper::before {
  content: '';
  position: absolute;
  inset: calc(var(--u) * 1.6);
  border-radius: 46% / 50%;
  border: 2px solid rgba(212,175,55,0.35);
  box-shadow: inset 0 0 40px rgba(0,0,0,0.4);
  pointer-events: none;
}

#table-logo {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.09;
  font-size: calc(var(--u) * 3);
  font-weight: 900;
  color: #f5d97a;
  letter-spacing: 3px;
  pointer-events: none;
  white-space: nowrap;
}

#community-cards {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: calc(var(--u) * 0.6);
  z-index: 10;
}

#pot-display {
  position: absolute;
  top: 64%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.72);
  border: 1px solid var(--border-gold);
  border-radius: 50px;
  padding: calc(var(--u)*0.3) calc(var(--u)*1.4);
  color: var(--gold);
  font-weight: 800;
  font-size: calc(var(--u) * 1.15);
  text-shadow: 0 0 10px var(--gold-glow);
  white-space: nowrap;
  z-index: 10;
}

/* ── PLAYING CARDS ──────────────────────────────────────────── */
.card-component {
  width: var(--card-w, 58px);
  height: var(--card-h, 82px);
  border-radius: calc(var(--card-w, 58px) * 0.12);
  border: 1px solid rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--card-w, 58px) * 0.08);
  font-weight: 900;
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease;
  cursor: default;
  user-select: none;
  flex: 0 0 auto;
}

.card-component.card-red {
  background: linear-gradient(150deg, #ffffff 0%, #fdf3f3 100%);
  color: #d1272b;
  box-shadow: 0 3px 10px rgba(0,0,0,0.45);
}

.card-component.card-black {
  background: linear-gradient(150deg, #ffffff 0%, #f2f2f4 100%);
  color: #16161f;
  box-shadow: 0 3px 10px rgba(0,0,0,0.45);
}

.card-component.card-back {
  background-color: #7a1122;
  background-image:
    repeating-linear-gradient( 45deg, rgba(249,200,90,.16) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, rgba(249,200,90,.16) 0 2px, transparent 2px 9px),
    radial-gradient(ellipse at 50% 50%, #9a1a30 0%, #6d0f1f 78%);
  border: 1px solid rgba(249,200,90,.55);
  box-shadow: 0 3px 10px rgba(0,0,0,0.55), inset 0 0 0 2px rgba(0,0,0,.25), inset 0 0 0 3px rgba(249,200,90,.35);
}

.card-component.card-back::after {
  content: '♠';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: calc(var(--card-w, 58px) * 0.52);
  height: calc(var(--card-w, 58px) * 0.52);
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: calc(var(--card-w, 58px) * 0.3);
  color: #f7d071;
  background: radial-gradient(circle at 50% 40%, rgba(0,0,0,.35), rgba(0,0,0,.1));
  border: 1.5px solid rgba(249,200,90,.6);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

.card-component .card-rank-top    { font-size: calc(var(--card-w, 58px) * 0.28); line-height: 1; }
.card-component .card-suit-center {
  font-size: calc(var(--card-w, 58px) * 0.5);
  text-align: center;
  line-height: 1;
}
.card-component .card-rank-bottom {
  font-size: calc(var(--card-w, 58px) * 0.28);
  line-height: 1;
  transform: rotate(180deg);
  align-self: flex-end;
}

@keyframes cardDeal {
  from { opacity: 0; transform: translate(-40%, -160%) rotate(-14deg) scale(0.6); }
  to   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
}
.card-deal-anim { animation: cardDeal 0.45s cubic-bezier(0.22,1.1,0.36,1) both; }

.player-seat.seat-me .card-component:not(.card-back):hover {
  transform: translateY(-8px) scale(1.06);
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
  z-index: 5;
}

/* ── PLAYER SEATS ────────────────────────────────────────────── */
.player-seat {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 0.35);
  z-index: 20;
  transform: translate(-50%, -50%);
  transition: filter .2s ease;
}

.player-avatar-wrap {
  width: var(--avatar, 56px);
  height: var(--avatar, 56px);
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.25);
  overflow: hidden;
  position: relative;
  transition: var(--transition);
  background: var(--bg-card);
}

.player-seat.active .player-avatar-wrap {
  border-color: var(--gold);
  box-shadow: 0 0 18px var(--gold-glow), 0 0 36px rgba(245,158,11,0.18);
  animation: pulse-gold 1.4s ease-in-out infinite;
}

@keyframes pulse-gold {
  0%,100% { box-shadow: 0 0 14px var(--gold-glow); }
  50%      { box-shadow: 0 0 28px rgba(245,158,11,0.6), 0 0 56px rgba(245,158,11,0.2); }
}

.player-seat.folded { filter: grayscale(1) opacity(0.45); }

.player-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; }

.player-name {
  font-size: calc(var(--u) * 1);
  font-weight: 700;
  color: var(--text-primary);
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  max-width: calc(var(--avatar, 56px) * 1.9);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.player-chips {
  font-size: calc(var(--u) * 0.95);
  color: var(--gold);
  font-weight: 800;
  background: rgba(0,0,0,0.65);
  padding: 1px calc(var(--u)*0.7);
  border-radius: 20px;
  border: 1px solid var(--border-gold);
  white-space: nowrap;
}

.player-hole-cards,
.player-hole-cards.hc-left, .player-hole-cards.hc-right, .player-hole-cards.hc-top {
  position: absolute;
  left: 50%; right: auto; top: auto; bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: calc(var(--u) * -1.4);
  display: flex; gap: 1px;
  z-index: 1;
  pointer-events: none;
}
.player-hole-cards .card-component { --card-w: calc(var(--u) * 2.3); }
.player-hole-cards .card-component:first-child { transform: rotate(-8deg); }
.player-hole-cards .card-component:last-child  { transform: rotate(8deg); }
.player-avatar-wrap { z-index: 2; }

#hero-cards {
  position: absolute;
  left: 50%; bottom: 3%;
  transform: translateX(-50%);
  display: none; gap: calc(var(--u) * 0.8);
  z-index: 40; pointer-events: none;
}
#hero-cards.show { display: flex; pointer-events: auto; }

/* ── Carta "peek" ─────────────── */
.peek-card {
  --peek: 0;
  position: relative;
  width: calc(var(--u) * 6.6);
  aspect-ratio: 5 / 7;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  transform: translateY(calc(var(--peek) * -12px)) scale(calc(1 + var(--peek) * 0.05));
  transition: transform .18s cubic-bezier(.2,.8,.3,1);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.55));
}
.peek-card.peeking { transition: none; cursor: grabbing; }
.peek-card .peek-face { position: absolute; inset: 0; }
.peek-card .peek-face .card-component { width: 100%; height: 100%; --card-w: calc(var(--u) * 6.6); }
.peek-card .peek-cover {
  position: absolute; inset: 0; border-radius: calc(var(--u) * .55);
  transform-origin: bottom center;
  transform: rotateX(calc(var(--peek) * -118deg)) translateY(calc(var(--peek) * -4%));
  opacity: calc(1 - var(--peek) * .9);
  backface-visibility: hidden;
  background-color: #7a1122;
  background-image:
    repeating-linear-gradient( 45deg, rgba(249,200,90,.2) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, rgba(249,200,90,.2) 0 2px, transparent 2px 9px),
    radial-gradient(ellipse at 50% 50%, #9a1a30 0%, #6d0f1f 80%);
  border: 1px solid rgba(249,200,90,.55);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.22), inset 0 0 0 3px rgba(249,200,90,.35);
}
.peek-card .peek-cover::after {
  content:'👆'; position:absolute; left:50%; bottom:8%; transform:translateX(-50%);
  font-size: calc(var(--u) * 1.6); opacity:.85; filter: drop-shadow(0 1px 2px #000);
  animation: peekHint 1.4s ease-in-out infinite;
}
@keyframes peekHint { 0%,100%{ transform:translateX(-50%) translateY(0) } 50%{ transform:translateX(-50%) translateY(-5px) } }
.peek-card.is-revealed { --peek: 1; transform: translateY(-6px); }
.peek-card.is-revealed .peek-cover { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce){ .peek-card .peek-cover::after { animation: none; } }

.dealer-btn {
  position: absolute;
  bottom: -4px;
  right: -6px;
  width: calc(var(--avatar, 56px) * 0.38);
  height: calc(var(--avatar, 56px) * 0.38);
  min-width: 16px; min-height: 16px;
  background: radial-gradient(circle at 35% 30%, #fff, #d8d8d8);
  border-radius: 50%;
  font-size: calc(var(--u) * 0.9);
  font-weight: 900;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

.player-bet {
  font-size: calc(var(--u) * 0.9);
  background: rgba(245,158,11,0.22);
  border: 1px solid var(--gold);
  border-radius: 20px;
  padding: 1px calc(var(--u)*0.6);
  color: var(--gold);
  font-weight: 800;
  white-space: nowrap;
}

/* ── CHIPS ───────────────────────────────────────────────────── */
.chip {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px dashed rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 900;
  color: white;
  box-shadow: 0 3px 8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
  position: relative;
}

.chip-1     { background: radial-gradient(circle,#94a3b8,#64748b); }
.chip-5     { background: radial-gradient(circle,#ef4444,#b91c1c); }
.chip-25    { background: radial-gradient(circle,#3b82f6,#1d4ed8); }
.chip-100   { background: radial-gradient(circle,#10b981,#047857); }
.chip-500   { background: radial-gradient(circle,#f59e0b,#b45309); }
.chip-1000  { background: radial-gradient(circle,#8b5cf6,#5b21b6); }
.chip-5000  { background: radial-gradient(circle,#ec4899,#be185d); }
.chip-black { background: radial-gradient(circle,#374151,#111827); }

@keyframes chipSlide {
  from { transform: scale(0) rotate(-180deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}
.chip-anim { animation: chipSlide 0.5s cubic-bezier(0.34,1.56,0.64,1); }

/* ── ACTION PANEL ────────────────────────────────────────────── */
#action-panel {
  background: rgba(8,8,18,0.95);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--border-gold);
  padding: 16px;
}

.action-buttons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.action-buttons .btn { min-width: 110px; padding: 10px 20px; border-radius: 10px; font-size: 0.95rem; }

#raise-slider-wrap { display: none; }
#raise-slider-wrap.show { display: block; }

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--gold) 0%, var(--gold) var(--val, 50%), rgba(255,255,255,0.1) var(--val, 50%));
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  box-shadow: 0 0 10px var(--gold-glow);
}

/* ── LOBBY ───────────────────────────────────────────────────── */
.table-card {
  background: var(--bg-glass);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  transition: var(--transition);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.table-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(245,158,11,0.03) 100%);
  opacity: 0;
  transition: var(--transition);
}

.table-card:hover {
  border-color: var(--border-gold);
  transform: translateY(-4px);
  box-shadow: var(--shadow-gold), var(--shadow-deep);
}
.table-card:hover::before { opacity: 1; }

.table-category-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.badge-beginner    { background: rgba(16,185,129,0.2); color:#10b981; border:1px solid #10b98155; }
.badge-intermediate{ background: rgba(59,130,246,0.2); color:#3b82f6; border:1px solid #3b82f655; }
.badge-advanced    { background: rgba(245,158,11,0.2); color:#f59e0b; border:1px solid #f59e0b55; }
.badge-vip         { background: rgba(139,92,246,0.2); color:#8b5cf6; border:1px solid #8b5cf655; }
.badge-high_roller { background: rgba(236,72,153,0.2); color:#ec4899; border:1px solid #ec489955; }

.table-players-bar {
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}
.table-players-fill {
  height: 100%;
  background: linear-gradient(90deg,#10b981,#f59e0b);
  border-radius: 2px;
  transition: width 0.5s ease;
}

/* ── CHAT ────────────────────────────────────────────────────── */
#chat-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgba(8,8,18,0.9);
  border-left: 1px solid var(--border-subtle);
}

#chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-msg {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  animation: fadeInUp 0.2s ease;
}

@keyframes fadeInUp {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

.chat-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.chat-bubble {
  background: rgba(255,255,255,0.05);
  border-radius: 0 8px 8px 8px;
  padding: 6px 10px;
  max-width: 80%;
}

.chat-bubble .chat-user {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 2px;
}

.chat-bubble .chat-text {
  font-size: 0.82rem;
  color: var(--text-primary);
  word-break: break-word;
}

.chat-bubble.system {
  background: rgba(245,158,11,0.1);
  border: 1px solid rgba(245,158,11,0.2);
  border-radius: 8px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--gold);
}

.chat-input-wrap {
  padding: 10px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  gap: 8px;
}

#chat-input {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  color: var(--text-primary);
  padding: 8px 14px;
  font-size: 0.85rem;
}
#chat-input:focus { border-color: var(--border-gold); outline: none; }

/* ── ADMIN SIDEBAR ───────────────────────────────────────────── */
.admin-sidebar {
  width: 260px;
  height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--bg-dark);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  transition: transform var(--transition);
}
.admin-sidebar > * { flex-shrink: 0; }
.admin-sidebar::-webkit-scrollbar { width: 5px; }
.admin-sidebar::-webkit-scrollbar-thumb { background: var(--gold-dark); border-radius: 3px; }

.admin-sidebar .logo {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 0 15px var(--gold-glow);
}

.admin-nav-item {
  padding: 0.75rem 1.25rem;
  color: var(--text-muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  border-left: 3px solid transparent;
  transition: var(--transition);
}

.admin-nav-item:hover, .admin-nav-item.active {
  color: var(--gold);
  background: rgba(245,158,11,0.08);
  border-left-color: var(--gold);
}

.admin-content {
  margin-left: 260px;
  min-height: 100vh;
  padding: 2rem;
}

/* ── KPI Cards ──────────────────────────────────────────────── */
.kpi-card {
  background: var(--bg-glass);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: var(--transition);
}
.kpi-card:hover {
  border-color: var(--border-gold);
  box-shadow: var(--shadow-gold);
}

.kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.kpi-value {
  font-size: 2rem;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1;
}

.kpi-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ── Toasts & Alerts ────────────────────────────────────────── */
.toast-container { position: fixed; top: 80px; right: 16px; z-index: 9999; }

.royal-toast {
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 12px 16px;
  color: var(--text-primary);
  min-width: 280px;
  animation: slideInRight 0.4s cubic-bezier(0.34,1.56,0.64,1);
}

@keyframes slideInRight {
  from { opacity:0; transform:translateX(100px); }
  to   { opacity:1; transform:translateX(0); }
}

.royal-toast.success { border-color: #10b98155; }
.royal-toast.error   { border-color: #ef444455; }
.royal-toast.warning { border-color: var(--border-gold); }

/* ── WIN Animation ───────────────────────────────────────────── */
@keyframes winPulse {
  0%,100% { transform: scale(1); }
  25%      { transform: scale(1.1); }
  50%      { transform: scale(1.05); }
  75%      { transform: scale(1.08); }
}

.win-anim { animation: winPulse 0.6s ease; }

.confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  overflow: hidden;
}

/* ── Timer Bar ──────────────────────────────────────────────── */
.timer-bar-wrap {
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}

.timer-bar {
  height: 100%;
  border-radius: 2px;
  transition: width 1s linear;
}

.timer-bar.green   { background: #10b981; }
.timer-bar.yellow  { background: #f59e0b; }
.timer-bar.red     { background: #ef4444; animation: blink 0.5s infinite; }

@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0.3;} }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  #poker-table-wrapper { --u: clamp(6px, 2.1vw, 11px); }
  .action-buttons .btn { min-width: 80px; padding: 9px 12px; font-size: 0.82rem; }
  .admin-sidebar { transform: translateX(-260px); }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-content { margin-left: 0; padding: 1rem; }
}

@media (max-width: 480px) {
  #poker-table-wrapper { --u: clamp(6px, 2.6vw, 10px); }
  .action-buttons { gap: 6px; }
  .action-buttons .btn { min-width: 0; flex: 1 1 28%; padding: 10px 6px; font-size: 0.78rem; }
}

/* ── Neon Glow Effects ──────────────────────────────────────── */
.neon-text-gold {
  color: var(--gold);
  text-shadow: 0 0 7px var(--gold), 0 0 21px var(--gold), 0 0 42px var(--gold-dark);
}

.neon-border {
  box-shadow: 0 0 5px var(--gold-glow), 0 0 20px var(--gold-glow), inset 0 0 5px var(--gold-glow);
}

/* ── Utility ─────────────────────────────────────────────────── */
.cursor-pointer { cursor: pointer; }
.blur-sm        { filter: blur(4px); }
.no-select      { user-select: none; }
.transition     { transition: var(--transition); }

.divider-gold {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 1.5rem 0;
}

/* ═══════════════════════════════════════════════════════════════
   CASINO / PPPoker ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════ */

#dealer-figure {
  position: absolute;
  top: calc(var(--u, 10px) * -3.4);
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--u, 10px) * 9);
  height: auto;
  z-index: 6;
  pointer-events: none;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.6));
  opacity: 1;
  -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 74%, transparent 100%);
}
#dealer-figure.dealer-photo {
  width: calc(var(--u,10px) * 9.5);
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
  object-position: 50% 12%;
  border: none;
  border-radius: calc(var(--u,10px) * 1.2) calc(var(--u,10px) * 1.2) 0 0;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}
@media (max-width: 560px){
  #dealer-figure { width: calc(var(--u,10px) * 8); top: calc(var(--u,10px) * -3); }
  #dealer-figure.dealer-photo { width: calc(var(--u,10px) * 8.6); }
}

#pot-display {
  display: flex;
  align-items: center;
  gap: calc(var(--u,10px) * 0.5);
  background: rgba(0,0,0,.55);
  border: 1px solid var(--border-gold);
  backdrop-filter: blur(4px);
}
.pot-chips { position: relative; display: inline-flex; height: calc(var(--u,10px) * 1.6); align-items: flex-end; }

.chip-stack { position: relative; display: inline-block; width: calc(var(--u,10px) * 1.5); height: calc(var(--u,10px) * 1.5); }
.mini-chip {
  position: absolute; left: 0;
  width: calc(var(--u,10px) * 1.5); height: calc(var(--u,10px) * 1.5);
  border-radius: 50%;
  background:
    repeating-conic-gradient(#ffffffcc 0deg 18deg, transparent 18deg 36deg),
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--c) 70%, #fff) 0 30%, var(--c) 32% 100%);
  border: 2px solid rgba(255,255,255,.55);
  box-shadow: 0 2px 4px rgba(0,0,0,.5), inset 0 0 0 2px color-mix(in srgb, var(--c) 60%, #000);
}

.player-bet {
  position: absolute;
  top: calc(100% + calc(var(--u,10px) * 0.2));
  left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px;
  font-size: calc(var(--u,10px) * 0.9);
  background: rgba(0,0,0,.72);
  border: 1px solid var(--gold);
  border-radius: 20px;
  padding: 1px calc(var(--u,10px) * 0.55) 1px 2px;
  color: var(--gold); font-weight: 800; white-space: nowrap;
  z-index: 22;
}

.emoji-float {
  position: absolute;
  top: calc(var(--u,10px) * -1.4); left: 50%;
  font-size: calc(var(--u,10px) * 2.6);
  transform: translateX(-50%);
  animation: emojiFloat 2.1s ease-out forwards;
  pointer-events: none; z-index: 60;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.5));
}
@keyframes emojiFloat {
  0%   { opacity: 0; transform: translate(-50%, 10px) scale(.4); }
  15%  { opacity: 1; transform: translate(-50%, -6px) scale(1.15); }
  70%  { opacity: 1; transform: translate(-50%, -34px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60px) scale(.9); }
}

#action-panel {
  background: linear-gradient(180deg, rgba(8,20,10,.96), rgba(4,10,5,.98));
  border-top: 1px solid var(--border-gold);
  box-shadow: 0 -8px 30px rgba(0,0,0,.5);
}
.action-buttons .btn {
  min-width: 118px;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .3px;
  text-transform: uppercase;
  box-shadow: 0 4px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .1s ease, filter .15s ease, box-shadow .1s ease;
}
.action-buttons .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-fold   { background: linear-gradient(180deg,#f26d6d,#c0392b); }
.btn-check  { background: linear-gradient(180deg,#5b9bf6,#1d4ed8); }
.btn-call   { background: linear-gradient(180deg,#2ee59d,#059669); color:#04231a; }
.btn-raise  { background: linear-gradient(180deg,#ffd54a,#d97706); color:#3b1d00; }
.btn-allin  { background: linear-gradient(180deg,#b18bff,#6d28d9); }

#raise-slider-wrap .btn-dark-glass { border-radius: 999px; font-weight: 700; }

.dealer-btn {
  background: radial-gradient(circle at 35% 30%, #fff, #e2e2e2);
  border: 2px solid var(--gold);
  color: #7a5a12;
}

.player-seat .badge { border-radius: 6px; padding: 1px 5px; }

.player-seat.active .player-avatar-wrap {
  border-color: var(--green-bright);
}

@property --tp   { syntax: '<percentage>'; inherits: true; initial-value: 100%; }
@property --tpc  { syntax: '<color>';      inherits: true; initial-value: #00E676; }
#turn-ring {
  position: absolute; left: 50%; top: 50%; width: 64px; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  pointer-events: none; z-index: 26; display: none;
  animation: turnDeplete var(--turn-dur, 30s) linear forwards;
}
#turn-ring.show { display: block; }
#turn-ring::before {
  content:''; position:absolute; inset:0; border-radius:50%;
  background: conic-gradient(rgba(255,255,255,.14) 0 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-th,4px)), #000 calc(100% - var(--ring-th,4px)));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-th,4px)), #000 calc(100% - var(--ring-th,4px)));
}
#turn-ring::after {
  content:''; position:absolute; inset:0; border-radius:50%;
  background: conic-gradient(var(--tpc) var(--tp), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-th,4px)), #000 calc(100% - var(--ring-th,4px)));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-th,4px)), #000 calc(100% - var(--ring-th,4px)));
  filter: drop-shadow(0 0 4px var(--tpc));
}
@keyframes turnDeplete {
  0%   { --tp: 100%; --tpc: #00E676; }
  55%  { --tpc: #F9A825; }
  100% { --tp: 0%;   --tpc: #ef4444; }
}

.card-component.card-back {
  background:
    repeating-linear-gradient(45deg, #7a1020 0 5px, #5a0c18 5px 10px);
  border: 1px solid rgba(212,175,55,.5);
}
.card-component.card-back::after { content: '♠'; color: rgba(212,175,55,.6); }

#tournament-banner {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  z-index: 40; max-width: 92%;
  background: linear-gradient(90deg, #7a1020, #b8860b);
  color: #fff; font-weight: 700; font-size: .8rem;
  padding: 6px 18px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
  display: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: bannerPulse 2.5s ease-in-out infinite;
}
@keyframes bannerPulse { 0%,100%{ box-shadow:0 6px 20px rgba(0,0,0,.5);} 50%{ box-shadow:0 6px 30px rgba(245,158,11,.5);} }

/* ═══ NEON VERDE + BANNERS ═══════════════════════════════════════ */
:root { --neon: #22ff88; --neon-dim: #0f9d58; }

.neon-text-green { color:#eafff3; text-shadow:0 0 6px var(--neon),0 0 14px var(--neon),0 0 28px var(--neon-dim); }
.neon-border-green { border:1px solid var(--neon)!important; box-shadow:0 0 8px rgba(34,255,136,.5),inset 0 0 8px rgba(34,255,136,.25); border-radius:12px; }

body.neon-green .navbar-brand,
body.neon-green .text-gold { color:#d6ffe9!important; text-shadow:0 0 6px var(--neon),0 0 16px var(--neon-dim); }
body.neon-green .btn-gold { box-shadow:0 0 14px rgba(34,255,136,.55),0 4px 15px rgba(0,0,0,.4); }
body.neon-green .glass-card { border-color:rgba(34,255,136,.35); box-shadow:var(--shadow-deep),0 0 20px rgba(34,255,136,.12); }
body.neon-green .royal-navbar { border-bottom-color:rgba(34,255,136,.4); box-shadow:0 4px 24px rgba(34,255,136,.12); }
body.neon-green #poker-table-wrapper { box-shadow:0 0 0 3px #0f9d58,0 0 0 7px #063311,inset 0 0 90px rgba(0,0,0,.55),0 24px 70px rgba(0,0,0,.8),0 0 80px rgba(34,255,136,.25); }
body.neon-green .balance-display { border-color:rgba(34,255,136,.5); box-shadow:0 0 12px rgba(34,255,136,.3); }
body.neon-green .action-buttons .btn { box-shadow:0 4px 0 rgba(0,0,0,.35),0 0 16px rgba(34,255,136,.35),inset 0 1px 0 rgba(255,255,255,.35); }

#table-logo-img {
  position:absolute; top:40%; left:50%; transform:translate(-50%,-50%);
  max-width:34%; max-height:26%; opacity:.30; pointer-events:none; z-index:1;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));
}

#lobby-billboard { position:relative; width:100%; border-radius:16px; overflow:hidden; margin-bottom:1.5rem;
  background:#0a0a14; border:1px solid var(--border-gold);
  box-shadow:0 10px 40px rgba(0,0,0,.5); }
#lobby-billboard .bb-track { display:flex; align-items:stretch; transition:transform .7s cubic-bezier(.4,0,.2,1); }
#lobby-billboard .bb-slide { min-width:100%; position:relative; display:flex; }
#lobby-billboard .bb-slide img { width:100%; height:auto; object-fit:contain; display:block; }
#lobby-billboard .bb-slide .bb-cap { position:absolute; left:0; right:0; bottom:0; padding:14px 20px;
  background:linear-gradient(0deg,rgba(0,0,0,.8),transparent); color:#fff; font-weight:800; font-size:1.1rem;
  text-shadow:0 2px 8px #000; }
#lobby-billboard .bb-dots { position:absolute; bottom:10px; right:14px; display:flex; gap:6px; z-index:3; }
#lobby-billboard .bb-dots span { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.45); cursor:pointer; transition:.2s; }
#lobby-billboard .bb-dots span.on { background:var(--gold); width:22px; border-radius:6px; }
#lobby-billboard .bb-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  background:rgba(0,0,0,.4); color:#fff; border:none; width:38px; height:38px; border-radius:50%; cursor:pointer; font-size:1.2rem; }
#lobby-billboard .bb-prev { left:10px; } #lobby-billboard .bb-next { right:10px; }

/* ═══ LEGIBILIDADE / CONTRASTE (tema escuro) ═════════════════════ */
body, .admin-content, .container, .container-fluid { color: var(--text-primary); }
p, span, div, li, td, th, label, small, dt, dd { color: inherit; }
.text-muted { color: var(--text-muted) !important; }
.text-dark, .text-black { color: var(--text-primary) !important; }
a { color: var(--gold-light); }
a:hover { color: var(--gold); }

.table { color: var(--text-primary); --bs-table-color: var(--text-primary);
  --bs-table-bg: transparent; --bs-table-striped-color: var(--text-primary);
  --bs-table-hover-color: #fff; --bs-table-border-color: rgba(255,255,255,.08); }
.table > :not(caption) > * > * { color: var(--text-primary); border-color: rgba(255,255,255,.08); }
.table thead th { color: var(--text-muted); }
.table-hover > tbody > tr:hover > * { background: rgba(245,158,11,.07); color:#fff; }

.dropdown-menu { background: var(--bg-card); border:1px solid var(--border-gold); }
.dropdown-item { color: var(--text-primary); }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(245,158,11,.12); color:#fff; }
.dropdown-divider { border-color: rgba(255,255,255,.1); }

.modal-content { background: var(--bg-card); color: var(--text-primary); border:1px solid var(--border-gold); }
.modal-header, .modal-footer { border-color: rgba(255,255,255,.1); }

.form-control, .form-select { color: var(--text-primary) !important; }
.form-select option { background: var(--bg-card); color: var(--text-primary); }
.form-label, .form-check-label { color: #d7dee8; }
.form-control::placeholder { color: var(--text-dim); opacity:1; }

.list-group-item { background: transparent; color: var(--text-primary); border-color: rgba(255,255,255,.08); }

.card:not(.glass-card):not(.kpi-card) { background: var(--bg-card); color: var(--text-primary); border:1px solid var(--border-subtle); }
.card-body, .card-title, .card-text { color: var(--text-primary); }

.badge.bg-secondary, .badge.bg-dark { color:#fff; }

input[type=date]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator { filter: invert(.8); }

.nav-tabs .nav-link, .nav-pills .nav-link { color: var(--text-muted); }
.nav-tabs .nav-link.active, .nav-pills .nav-link.active { color:#fff; }

/* ═══ LOBBY — estética premium de cassino ════════════════════════ */
.lobby-hero {
  position: relative; border-radius: 18px; overflow: hidden; margin-bottom: 1.5rem;
  padding: 1.6rem 1.8rem;
  background:
    radial-gradient(120% 140% at 15% 0%, rgba(245,158,11,.16), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(16,185,129,.14), transparent 55%),
    linear-gradient(120deg, #0c1f10, #0a0a16 60%);
  border: 1px solid var(--border-gold);
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.lobby-hero h2 { color:#fff; font-weight:900; letter-spacing:.5px; text-shadow:0 0 24px var(--gold-glow); }
.lobby-hero .suit-deco { position:absolute; right:-10px; top:-20px; font-size:9rem; opacity:.06; color:var(--gold); pointer-events:none; }

.container-fluid .glass-card-sm { transition: var(--transition); }
.container-fluid .glass-card-sm:hover { border-color: var(--border-gold); transform: translateY(-2px); }

.table-card {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(31,77,34,.55), transparent 60%),
    var(--bg-glass);
  border: 1px solid rgba(255,255,255,.09);
}
.table-card::after {
  content:''; position:absolute; left:0; right:0; top:0; height:3px;
  background: linear-gradient(90deg, var(--gold), transparent);
  opacity:.7;
}
.table-card:hover { box-shadow: 0 0 0 1px var(--border-gold), 0 18px 40px rgba(0,0,0,.55), 0 0 30px rgba(245,158,11,.12); }
.table-card h6 { color:#fff !important; }
.table-players-bar { height:6px; border-radius:6px; overflow:hidden; }
.table-players-fill { height:100%; background: linear-gradient(90deg, #10b981, #f59e0b); border-radius:6px; }

.container-fluid .btn-outline-gold { border-color: rgba(245,158,11,.4); }

.table-card .text-muted { color:#c3ccda !important; }

/* ═══ LOJA / MISSÕES / RANKING — polish ══════════════════════════ */
.shop-item { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.shop-item:hover { transform: translateY(-6px); border-color: var(--border-gold) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 0 26px rgba(245,158,11,.14); }
.shop-item .p-4 { transition: background .2s ease; }
.shop-item:hover .p-4 { background: linear-gradient(135deg, rgba(212,175,55,.16), rgba(0,0,0,0)) !important; }

.progress { background: rgba(255,255,255,.08) !important; border-radius: 999px; height: 8px; overflow: hidden; }
.progress-bar { background: linear-gradient(90deg, #10b981, #f59e0b) !important; border-radius: 999px; }

.mission-card, .missions .glass-card { transition: transform .18s ease, box-shadow .18s ease; }
.missions .glass-card:hover { transform: translateY(-3px); }

.container .glass-card[style*="border-top"] { box-shadow: 0 12px 34px rgba(0,0,0,.5), 0 0 24px rgba(245,158,11,.10); }
.rank-row { transition: background .15s ease; border-radius: 12px; }
.rank-row:hover { background: rgba(245,158,11,.06); }
.rank-medal { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-weight: 900; }
.rank-1 { background: linear-gradient(135deg,#ffe58a,#d4af37); color:#3a2a00; box-shadow:0 0 14px rgba(245,158,11,.5); }
.rank-2 { background: linear-gradient(135deg,#e8edf3,#9aa7b5); color:#26303a; }
.rank-3 { background: linear-gradient(135deg,#f0b892,#b5773f); color:#2a1600; }

.bot-tag { font-size:.6rem; font-weight:800; padding:1px 6px; border-radius:6px;
  background: rgba(139,92,246,.2); color:#c4b5fd; border:1px solid rgba(139,92,246,.4); }

.page-title-underline { position:relative; display:inline-block; }
.page-title-underline::after { content:''; position:absolute; left:0; bottom:-6px; width:48px; height:3px;
  background: linear-gradient(90deg,var(--gold),transparent); border-radius:3px; }

.table-bet {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 3px;
  font-size: calc(var(--u,10px) * 0.9);
  background: rgba(0,0,0,.75);
  border: 1px solid var(--gold);
  border-radius: 20px;
  padding: 1px calc(var(--u,10px) * 0.55) 1px 2px;
  color: var(--gold); font-weight: 800; white-space: nowrap;
  z-index: 15;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.seat-blind { font-size: calc(var(--u,10px) * 0.72); font-weight: 800; padding: 0 4px;
  border-radius: 5px; margin-left: 3px; vertical-align: middle; }
.seat-blind.sb { background: #3b82f6; color: #fff; }
.seat-blind.bb { background: #10b981; color: #04231a; }

.btn-standup {
  background: linear-gradient(180deg,#4b5563,#1f2937);
  color: #fff; border: 1px solid rgba(255,255,255,.15); font-weight: 800;
  border-radius: 999px; box-shadow: 0 4px 0 rgba(0,0,0,.35);
}
.btn-standup:hover { filter: brightness(1.15); color:#fff; }
.btn-standup:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }

img.card-component.card-face {
  object-fit: contain;
  background: #fff;
  border: none;
  padding: 0;
  border-radius: calc(var(--card-w, 58px) * 0.09);
  box-shadow: 0 3px 9px rgba(0,0,0,.45);
}
.card-component.card-back {
  background-color: #7a1122 !important;
  background-image:
    repeating-linear-gradient( 45deg, rgba(249,200,90,.18) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, rgba(249,200,90,.18) 0 2px, transparent 2px 9px),
    radial-gradient(ellipse at 50% 50%, #9a1a30 0%, #6d0f1f 80%) !important;
  border: 1px solid rgba(249,200,90,.55) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.55), inset 0 0 0 2px rgba(0,0,0,.22), inset 0 0 0 3px rgba(249,200,90,.35) !important;
}
.card-component.card-back::after {
  content: '♠' !important;
  width: calc(var(--card-w, 58px) * 0.5); height: calc(var(--card-w, 58px) * 0.5);
  display: grid; place-items: center; border-radius: 50%;
  font-size: calc(var(--card-w, 58px) * 0.28); color: #f7d071;
  background: radial-gradient(circle at 50% 40%, rgba(0,0,0,.35), rgba(0,0,0,.08));
  border: 1.5px solid rgba(249,200,90,.6); text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
img.card-face.card-fallback { visibility: hidden; }

/* ═══════════════════════════════════════════════════════════════
   ROYAL POKER — DESIGN SYSTEM v2 (premium, mobile-first)
   ═══════════════════════════════════════════════════════════════ */

body {
  background:
    radial-gradient(120% 80% at 50% -10%, #14210f 0%, transparent 55%),
    var(--bg-deep);
  color: var(--text-primary);
  font-family: 'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  letter-spacing: .1px;
  -webkit-font-smoothing: antialiased;
}
body::before {
  background:
    radial-gradient(ellipse at 15% 0%, rgba(0,230,118,.06) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 10%, rgba(249,168,37,.05) 0%, transparent 55%);
}
h1,h2,h3,h4,h5,h6 { letter-spacing: -.3px; }
.text-gold { color: var(--gold) !important; }
.text-success, .text-green { color: var(--green-bright) !important; }

@keyframes ds-page-in { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:none; } }
.container, .container-fluid, .admin-content > * { animation: ds-page-in .35s ease both; }

.glass-card, .kpi-card, .table-card, .shop-item, .glass-card-sm {
  background: linear-gradient(180deg, rgba(30,30,30,.92), rgba(17,17,17,.92));
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(14px) saturate(1.3);
}
.glass-card-sm { border-radius: var(--radius); }
.glass-card:hover, .kpi-card:hover { border-color: rgba(255,255,255,.14); }

.btn {
  border-radius: var(--radius-pill);
  font-weight: 700;
  letter-spacing: .2px;
  transition: transform .12s var(--ease-spring), filter .15s ease, box-shadow .15s ease, background .2s ease;
  position: relative;
  overflow: hidden;
}
.btn:active { transform: scale(.97); }
.btn:disabled, .btn.disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.2); }
.btn:focus-visible { outline: 2px solid var(--green-bright); outline-offset: 2px; }
.btn::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at var(--rx,50%) var(--ry,50%), rgba(255,255,255,.35) 0%, transparent 45%);
  opacity: 0; transition: opacity .5s ease;
}
.btn:active::after { opacity: 1; transition: none; }

.btn-gold {
  background: linear-gradient(180deg, #ffce5a 0%, var(--gold) 55%, #e08c00 100%);
  color: #1a1200; box-shadow: 0 6px 18px rgba(249,168,37,.28), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-gold:hover { color:#1a1200; filter: brightness(1.05); box-shadow: 0 10px 26px rgba(249,168,37,.4); transform: translateY(-1px); }

.btn-success, .btn-green {
  background: linear-gradient(180deg, var(--green-bright), var(--green) 60%, #009d43 100%);
  color: #04240f; border: none; box-shadow: 0 6px 18px rgba(0,230,118,.28), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-success:hover, .btn-green:hover { color:#04240f; filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,230,118,.4); }

.btn-outline-gold { border: 1.5px solid rgba(249,168,37,.55); color: var(--gold); background: transparent; }
.btn-outline-gold:hover { background: var(--gold); color:#1a1200; box-shadow: 0 0 22px var(--gold-glow); }

.btn-dark-glass {
  background: rgba(255,255,255,.05); border: 1px solid var(--hairline); color: var(--text-primary);
  backdrop-filter: blur(10px);
}
.btn-dark-glass:hover { background: rgba(255,255,255,.1); border-color: rgba(0,230,118,.4); color:#fff; }

.btn-danger { background: linear-gradient(180deg,#ff6b6b,#e53935); border:none; color:#fff; }

.btn .spinner-border { width: 1rem; height: 1rem; border-width: .15em; }

.form-control, .form-select {
  background: rgba(255,255,255,.04);
  border: 1.5px solid var(--hairline);
  color: #fff;
  border-radius: var(--radius);
  padding: .8rem 1rem;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.form-control:focus, .form-select:focus {
  background: rgba(255,255,255,.06);
  border-color: var(--green-bright);
  box-shadow: 0 0 0 3px var(--green-glow);
  color:#fff;
}
.form-control::placeholder { color: var(--text-dim); }
.input-group-text { background: rgba(255,255,255,.05); border:1.5px solid var(--hairline); color: var(--text-muted); border-radius: var(--radius); }
.form-check-input:checked { background-color: var(--green); border-color: var(--green); }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--green-glow); border-color: var(--green-bright); }

.royal-navbar {
  background: rgba(9,9,9,.82);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 6px 24px rgba(0,0,0,.4);
}
.royal-navbar .navbar-brand { color: var(--gold); letter-spacing: .5px; }
.royal-navbar .nav-link { border-radius: var(--radius-pill); color: var(--text-muted); font-weight:600; }
.royal-navbar .nav-link:hover { color:#fff; background: rgba(255,255,255,.06); }
.royal-navbar .nav-link.active { color: var(--green-bright); background: rgba(0,230,118,.1); }
.balance-display {
  background: linear-gradient(180deg, rgba(249,168,37,.16), rgba(249,168,37,.05));
  border: 1px solid var(--border-gold); border-radius: var(--radius-pill);
  color: var(--gold); font-weight: 800; box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}

.badge { border-radius: var(--radius-pill); font-weight:700; letter-spacing:.2px; padding:.35em .7em; }
.badge.bg-success { background: rgba(0,230,118,.18)!important; color: var(--green-bright)!important; }
.badge.bg-secondary { background: rgba(255,255,255,.1)!important; color:#cbd3dc!important; }
.badge.bg-warning { background: rgba(249,168,37,.2)!important; color: var(--gold)!important; }

.table { --bs-table-bg: transparent; color: var(--text-primary); }
.table > :not(caption) > * > * { border-color: var(--hairline); padding: .85rem .75rem; }
.table thead th { color: var(--text-muted); text-transform: uppercase; font-size:.68rem; letter-spacing:.6px; border-bottom:1px solid var(--hairline); }
.table-hover > tbody > tr { transition: background .15s; }
.table-hover > tbody > tr:hover > * { background: rgba(0,230,118,.06); }

.dropdown-menu {
  background: var(--bg-elev); border: 1px solid var(--hairline);
  border-radius: var(--radius); box-shadow: var(--shadow-3); padding: 6px;
  animation: ds-page-in .18s ease both;
}
.dropdown-item { border-radius: 10px; color: var(--text-primary); font-weight:500; }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(0,230,118,.12); color:#fff; }

.modal-backdrop.show { opacity:.72; backdrop-filter: blur(6px); }
.modal-content {
  background: var(--bg-elev); color:#fff; border:1px solid var(--hairline);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-3);
}
.modal.fade .modal-dialog { transform: scale(.94) translateY(10px); transition: transform .25s var(--ease-spring), opacity .25s; }
.modal.show .modal-dialog { transform: none; }
.modal-header, .modal-footer { border-color: var(--hairline); }

.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.12) 37%, rgba(255,255,255,.05) 63%);
  background-size: 400% 100%;
  animation: ds-shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}
@keyframes ds-shimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }
.spinner-modern {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.12); border-top-color: var(--green-bright);
  animation: ds-spin .7s linear infinite;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }

.anim-fade { animation: ds-page-in .35s ease both; }
@keyframes ds-slide-up { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
@keyframes ds-scale-in { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:none} }
.anim-slide { animation: ds-slide-up .4s var(--ease-spring) both; }
.anim-scale { animation: ds-scale-in .3s var(--ease-spring) both; }

::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--green),var(--green-dark,#008f3a)); border-radius:8px; }

/* ═══ MENU INFERIOR MOBILE (estilo app) ═══════════════════════ */
#mobile-nav { display: none; }
@media (max-width: 768px) {
  #mobile-nav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
    height: calc(var(--mobilenav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(12,12,12,.92);
    backdrop-filter: blur(18px) saturate(1.4);
    border-top: 1px solid var(--hairline);
    box-shadow: 0 -8px 30px rgba(0,0,0,.5);
  }
  #mobile-nav a, #mobile-nav button {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; color: var(--text-dim); text-decoration: none; font-size: .62rem; font-weight: 700;
    letter-spacing: .2px; position: relative; transition: color .2s;
    background: transparent; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  #mobile-nav a i, #mobile-nav button i { font-size: 1.32rem; transition: transform .2s var(--ease-spring); }
  #mobile-nav a.active { color: var(--green-bright); }
  #mobile-nav a.active i { transform: translateY(-2px) scale(1.08); }
  #mobile-nav a.active::before {
    content:''; position:absolute; top:0; width:26px; height:3px; border-radius:0 0 4px 4px;
    background: var(--green-bright); box-shadow: 0 0 10px var(--green-glow);
  }
  #mobile-nav .mnav-cta { overflow: visible; }
  #mobile-nav .mnav-cta i {
    background: linear-gradient(180deg,#ffce5a,var(--gold)); color:#1a1200;
    width: 52px; height: 52px; border-radius: 50%; display:flex; align-items:center; justify-content:center;
    margin-top: -26px; box-shadow: 0 8px 20px rgba(249,168,37,.55), 0 0 0 5px rgba(12,12,12,.92); font-size: 1.5rem;
    transition: transform .15s var(--ease-spring);
  }
  #mobile-nav .mnav-cta:active i { transform: scale(.92); }
  body:not(.no-mobilenav) { padding-bottom: calc(var(--mobilenav-h) + env(safe-area-inset-bottom,0px)); }
  .royal-navbar .navbar-collapse .navbar-nav { display: none !important; }
  .royal-navbar .navbar-toggler { display: none !important; }
}

/* ── Carteira bottom-sheet (mobile) ─────────────────────────── */
.wallet-sheet{position:fixed;inset:0;z-index:1200;display:none}
.wallet-sheet.is-open{display:block}
.wallet-sheet__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px);opacity:0;animation:wsFade .2s ease forwards}
.wallet-sheet__panel{position:absolute;left:0;right:0;bottom:0;background:#111;border-top-left-radius:22px;border-top-right-radius:22px;
  border-top:1px solid rgba(255,255,255,.08);padding:10px 16px calc(18px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -20px 50px rgba(0,0,0,.6);transform:translateY(100%);animation:wsUp .28s cubic-bezier(.22,1,.36,1) forwards}
@keyframes wsFade{to{opacity:1}}
@keyframes wsUp{to{transform:translateY(0)}}
.wallet-sheet__grip{width:42px;height:5px;border-radius:99px;background:rgba(255,255,255,.18);margin:6px auto 12px}
.wallet-sheet__title{color:#fff;font-weight:700;margin:0 4px 12px;font-size:1.05rem}
.wallet-sheet__item{display:flex;align-items:center;gap:14px;padding:14px;border-radius:16px;text-decoration:none;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);margin-bottom:10px;transition:.15s}
.wallet-sheet__item:active{transform:scale(.98);background:rgba(255,255,255,.06)}
.wallet-sheet__item .ws-ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:1.25rem;flex:0 0 auto}
.ws-ico--in{background:rgba(0,230,118,.14);color:var(--green-bright)}
.ws-ico--out{background:rgba(249,168,37,.15);color:var(--gold-light)}
.ws-ico--hist{background:rgba(120,140,255,.14);color:#9fb0ff}
.wallet-sheet__item .ws-txt{display:flex;flex-direction:column;line-height:1.25;flex:1}
.wallet-sheet__item .ws-txt b{color:#fff;font-size:1rem}
.wallet-sheet__item .ws-txt small{color:rgba(255,255,255,.5);font-size:.82rem}
.wallet-sheet__item .ws-arrow{color:rgba(255,255,255,.3);font-size:.9rem}
.wallet-sheet__cancel{width:100%;margin-top:6px;padding:14px;border-radius:14px;border:1px solid rgba(255,255,255,.1);
  background:transparent;color:rgba(255,255,255,.75);font-weight:600;cursor:pointer}
.wallet-sheet__cancel:active{background:rgba(255,255,255,.05)}
button.mnav-cta{border:none;font:inherit}

/* ── Abas Depositar/Sacar ────────────────────────────────────── */
.wallet-tabs{display:flex;gap:8px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);padding:6px;border-radius:16px}
.wallet-tab{flex:1;text-align:center;padding:11px;border-radius:11px;text-decoration:none;font-weight:700;
  color:rgba(255,255,255,.6);transition:.15s;font-size:.95rem}
.wallet-tab.is-active{background:linear-gradient(135deg,var(--green),var(--green-bright));color:#062;box-shadow:0 6px 18px var(--green-glow)}
.wallet-tab:not(.is-active):active{background:rgba(255,255,255,.06);color:#fff}

/* ── SweetAlert2 · tema Royal Poker premium ─────────────────── */
.swal2-container{backdrop-filter:blur(4px)}
.swal2-popup{
  background:linear-gradient(180deg,#161616,#0d0d0d)!important;color:#f1f5f9!important;
  border:1px solid rgba(249,168,37,.28)!important;border-radius:22px!important;
  box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.03) inset!important;
  padding:26px 22px 22px!important
}
.swal2-title{color:#fff!important;font-weight:800!important;font-size:1.35rem!important}
.swal2-html-container,.swal2-content{color:rgba(255,255,255,.72)!important;font-size:.98rem!important}
.swal2-icon{border-color:currentColor!important}
.swal2-icon.swal2-warning{color:#F9A825!important;border-color:rgba(249,168,37,.5)!important}
.swal2-icon.swal2-success{color:#00E676!important;border-color:rgba(0,230,118,.5)!important}
.swal2-icon.swal2-success [class^='swal2-success-line']{background-color:#00E676!important}
.swal2-icon.swal2-success .swal2-success-ring{border-color:rgba(0,230,118,.35)!important}
.swal2-icon.swal2-error{color:#ff5a5a!important;border-color:rgba(255,90,90,.5)!important}
.swal2-icon.swal2-error [class^='swal2-x-mark-line']{background-color:#ff5a5a!important}
.swal2-icon.swal2-info,.swal2-icon.swal2-question{color:#37b6ff!important;border-color:rgba(55,182,255,.5)!important}
.swal2-actions{gap:10px!important;margin-top:20px!important}
.swal2-styled{border-radius:13px!important;font-weight:800!important;padding:13px 26px!important;
  font-size:1rem!important;box-shadow:none!important;transition:.15s!important;margin:0!important}
.swal2-styled.swal2-confirm{
  background:linear-gradient(135deg,#F9A825,#ffcb52)!important;color:#3a2600!important;
  box-shadow:0 8px 22px rgba(249,168,37,.35)!important}
.swal2-styled.swal2-confirm:hover{filter:brightness(1.05)}
.swal2-styled.swal2-cancel{
  background:transparent!important;color:rgba(255,255,255,.7)!important;
  border:1px solid rgba(255,255,255,.16)!important}
.swal2-styled:focus{box-shadow:none!important;outline:none!important}
.swal2-styled.swal2-deny{background:linear-gradient(135deg,#e53935,#ff5a5a)!important;color:#fff!important}
.swal2-input,.swal2-textarea,.swal2-select{
  background:rgba(255,255,255,.04)!important;color:#fff!important;
  border:1px solid rgba(255,255,255,.14)!important;border-radius:11px!important}
.swal2-toast{background:linear-gradient(180deg,#161616,#0d0d0d)!important;border:1px solid rgba(255,255,255,.1)!important}
.swal2-timer-progress-bar{background:rgba(249,168,37,.5)!important}

/* ── Camada de efeitos da mesa (embaralhar/distribuir/fichas) ── */
#fx-layer{position:absolute;inset:0;pointer-events:none;z-index:45;overflow:visible}
#fx-layer .fx{position:absolute;will-change:transform,opacity}
.fx-card{
  width:calc(var(--u,10px) * 4.2);height:calc(var(--u,10px) * 5.9);border-radius:calc(var(--u,10px) * .7);
  background:
    repeating-linear-gradient(45deg,#7a1020 0 6px,#8f1528 6px 12px),
    radial-gradient(circle at 50% 50%,#b01b34,#6d0f1f);
  border:1.5px solid #f4d06a;
  box-shadow:0 3px 8px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,255,255,.12);
  transform:translate(-50%,-50%);
}
.fx-deck{left:50%;top:42%}
.fx-deck .fx-card{position:absolute;left:0;top:0}
@keyframes fxRiffle{
  0%,100%{transform:translate(-50%,-50%) rotate(0) translateX(0)}
  25%{transform:translate(-50%,-50%) rotate(-7deg) translateX(-7px)}
  50%{transform:translate(-50%,-50%) rotate(0) translateX(0)}
  75%{transform:translate(-50%,-50%) rotate(7deg) translateX(7px)}
}
.fx-deck.shuffling .fx-card{animation:fxRiffle .34s ease-in-out}
@keyframes fxDeal{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.7) rotate(0)}
  12%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.62) rotate(var(--dr))}
}
.fx-card.dealing{left:50%;top:42%;animation:fxDeal .5s cubic-bezier(.3,.7,.4,1) forwards}
.fx-chip{
  width:calc(var(--u,10px) * 2.1);height:calc(var(--u,10px) * 2.1);border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#ffe08a,var(--c,#F9A825) 62%,#7a5200);
  border:2px dashed rgba(255,255,255,.75);box-shadow:0 3px 7px rgba(0,0,0,.5);
  transform:translate(-50%,-50%);
}
@keyframes fxChip{
  0%{opacity:0;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) scale(.6)}
  15%{opacity:1;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) scale(1)}
  100%{opacity:.9;transform:translate(-50%,-50%) scale(.75)}
}
.fx-chip.flying{left:50%;top:48%;animation:fxChip .55s cubic-bezier(.4,.2,.2,1) forwards}
@keyframes fxFlipIn{
  0%{opacity:0;transform:translateY(-16px) rotateY(90deg) scale(.85)}
  60%{opacity:1}
  100%{opacity:1;transform:translateY(0) rotateY(0) scale(1)}
}
#community-cards .card-component.fx-flip{animation:fxFlipIn .42s cubic-bezier(.2,.8,.3,1) backwards}

/* ═══ AÇÕES DO JOGADOR — botões modernos/profissionais ═══════════ */
#action-panel { background: linear-gradient(0deg, rgba(0,0,0,.94), rgba(10,14,10,.72)); }
.rp-actions {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 10px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom,0px));
  max-width: 760px; margin: 0 auto;
}
.rp-btn {
  --c1:#3a4250; --c2:#232a34; --edge:#151a22; --ink:#fff;
  position: relative; border: none; cursor: pointer; color: var(--ink);
  border-radius: 15px; padding: 12px 6px 11px; font-weight: 800; letter-spacing:.3px;
  display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1;
  background: linear-gradient(180deg, var(--c1), var(--c2));
  box-shadow: 0 4px 0 var(--edge), 0 8px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
  -webkit-tap-highlight-color: transparent; overflow: hidden;
}
.rp-btn::before {
  content:''; position:absolute; inset:0 0 55% 0; border-radius:15px 15px 40% 40%;
  background: linear-gradient(180deg, rgba(255,255,255,.25), transparent); pointer-events:none;
}
.rp-btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--edge), 0 3px 10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2); }
.rp-btn:disabled { opacity:.4; filter: grayscale(.5); pointer-events:none; }
.rp-btn__ico { font-size: 1.25rem; }
.rp-btn__lbl { font-size: .82rem; display:flex; flex-direction:column; align-items:center; }
.rp-btn__lbl small { font-size:.66rem; font-weight:700; opacity:.85; }
.rp-btn--fold  { --c1:#ff6b6b; --c2:#d32f2f; --edge:#8e1616; }
.rp-btn--check { --c1:#42c98d; --c2:#1f9d63; --edge:#0f5f3a; --ink:#04240f; }
.rp-btn--call  { --c1:#3aa0ff; --c2:#1f6fd6; --edge:#124a94; }
.rp-btn--raise { --c1:#ffd166; --c2:#f0a500; --edge:#9a6a00; --ink:#2a1c00; }
.rp-btn--allin { --c1:#c77dff; --c2:#8b2fd6; --edge:#5a1a90; }
.rp-btn.is-active-turn { animation: rpPulse 1.2s ease-in-out infinite; }
@keyframes rpPulse { 0%,100%{ filter:brightness(1) } 50%{ filter:brightness(1.18) } }

.rp-raise { max-width:760px; margin:0 auto; padding: 10px 16px 2px; }
.rp-raise__top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.rp-raise__presets { display:flex; gap:6px; }
.rp-chipbtn {
  border:1px solid rgba(249,168,37,.4); background:rgba(249,168,37,.1); color:#ffcf6b;
  font-weight:800; font-size:.74rem; padding:6px 10px; border-radius:999px; cursor:pointer; transition:.12s;
}
.rp-chipbtn:active, .rp-chipbtn.on { background:var(--gold); color:#231800; }
.rp-raise__val { color:#ffcf6b; font-weight:900; font-size:1.05rem; white-space:nowrap; }
.rp-slider { -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:999px;
  background: linear-gradient(90deg, var(--gold) var(--val,0%), rgba(255,255,255,.12) var(--val,0%)); outline:none; }
.rp-slider::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background: radial-gradient(circle at 40% 35%, #fff, var(--gold) 60%, #a56b00); border:2px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,.5); cursor:pointer; }
.rp-slider::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:var(--gold); border:2px solid #fff; cursor:pointer; }
#raise-slider-wrap { display:none; }
#raise-slider-wrap.show { display:block; }
@media (max-width:768px){
  .rp-btn { border-radius:13px; padding:10px 4px; }
  .rp-btn__lbl { font-size:.76rem; }
  .rp-btn__ico { font-size:1.15rem; }
  .rp-actions { gap:7px; padding:9px 9px calc(9px + env(safe-area-inset-bottom,0px)); }
}

/* ═══ BANNER VIP (lobby) ═════════════════════════════════════════ */
.vip-banner {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px; border-radius: 20px;
  background: linear-gradient(120deg, #1a1206 0%, #241a08 40%, #120e1f 100%);
  border: 1px solid rgba(249,168,37,.4);
  box-shadow: 0 12px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
.vip-banner.is-vip { border-color: rgba(0,230,118,.4); background: linear-gradient(120deg,#06180d,#0a2216 50%,#120e1f); }
.vip-banner__glow { position:absolute; inset:0; background:
  radial-gradient(120% 160% at 8% 0%, rgba(249,168,37,.22), transparent 55%); pointer-events:none; }
.vip-banner.is-vip .vip-banner__glow { background: radial-gradient(120% 160% at 8% 0%, rgba(0,230,118,.2), transparent 55%); }
.vip-banner__ico {
  flex: 0 0 auto; width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center;
  font-size: 1.9rem; color: #231800; z-index:1;
  background: linear-gradient(180deg,#ffde8a,#f0a500); box-shadow: 0 8px 20px rgba(249,168,37,.4);
}
.vip-banner.is-vip .vip-banner__ico { color:#04240f; background: linear-gradient(180deg,#7dffb4,#00c853); box-shadow:0 8px 20px rgba(0,230,118,.4); }
.vip-banner__txt { flex: 1; z-index:1; min-width: 0; }
.vip-banner__txt h5 { color:#fff; font-weight:900; margin:0 0 3px; font-size:1.15rem; }
.vip-banner__txt p { color: rgba(255,255,255,.68); margin:0; font-size:.86rem; line-height:1.35; }
.vip-banner__txt .txt-gold { background:linear-gradient(90deg,#ffde8a,#f0a500); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.vip-banner__btn {
  flex: 0 0 auto; z-index:1; text-decoration:none; white-space:nowrap;
  padding: 12px 22px; border-radius: 13px; font-weight: 900; cursor: pointer; border: none;
  background: linear-gradient(180deg,#ffde8a,#f0a500); color:#2a1c00;
  box-shadow: 0 8px 20px rgba(249,168,37,.4), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .12s ease, filter .15s ease;
}
.vip-banner.is-vip .vip-banner__btn { background: linear-gradient(180deg,#7dffb4,#00c853); color:#04240f; box-shadow:0 8px 20px rgba(0,230,118,.4); }
.vip-banner__btn:active { transform: translateY(2px); }
.vip-banner__btn:hover { filter: brightness(1.05); }
@media (max-width: 620px){
  .vip-banner { flex-wrap: wrap; }
  .vip-banner__btn { width: 100%; text-align:center; }
}

/* ═══ TEMAS COSMÉTICOS DA LOJA (baralho + feltro) ════════════════ */
body.deck-neon .card-component.card-back {
  background-color:#0b1622 !important;
  background-image:
    repeating-linear-gradient(45deg, rgba(0,255,231,.22) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, rgba(255,0,200,.20) 0 2px, transparent 2px 9px),
    radial-gradient(ellipse at 50% 50%, #12324a 0%, #08111c 82%) !important;
  border-color: rgba(0,255,231,.6) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.55), inset 0 0 12px rgba(0,255,231,.25) !important;
}
body.deck-neon .card-component.card-back::after { color:#5ffbe6 !important; border-color:rgba(0,255,231,.6) !important; }
body.deck-blue .card-component.card-back {
  background-color:#16224e !important;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.14) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.14) 0 2px, transparent 2px 8px),
    radial-gradient(ellipse at 50% 50%, #24356e 0%, #131d44 82%) !important;
  border-color: rgba(255,255,255,.4) !important;
}
body.deck-blue .card-component.card-back::after { color:#cdd8ff !important; border-color:rgba(255,255,255,.5) !important; }
body.felt-red   #poker-table-wrapper { background: radial-gradient(ellipse at center,#7d1f1f 0%,#5a1414 55%,#2c0a0a 100%) !important; }
body.felt-black #poker-table-wrapper { background: radial-gradient(ellipse at center,#2a2a2e 0%,#18181c 55%,#0a0a0c 100%) !important; }
body.felt-emerald #poker-table-wrapper { background: radial-gradient(ellipse at center,#0f7a4a 0%,#0a5c37 55%,#063d24 100%) !important; }
body.theme-neon #poker-table-wrapper { box-shadow:0 0 0 3px #0f9d58,0 0 0 7px #063311,inset 0 0 90px rgba(0,0,0,.55),0 24px 70px rgba(0,0,0,.8),0 0 80px rgba(34,255,136,.3) !important; }

/* ═══════════════════════════════════════════════════════════════
   CACHETA - MOBILE FIRST - COMPLETO E OTIMIZADO
   ═══════════════════════════════════════════════════════════════ */

.cacheta-body { 
  overflow: hidden; 
  background: #071a0e;
  -webkit-tap-highlight-color: transparent;
}

#cch-layout { 
  display: flex; 
  flex-direction: column; 
  height: 100vh; 
  height: 100dvh; 
  overflow: hidden;
}

/* Header */
#cch-header {
  flex: 0 0 auto;
  display: flex; 
  align-items: center; 
  gap: 8px; 
  padding: 8px 12px;
  background: rgba(0,0,0,.9); 
  border-bottom: 1px solid var(--border-gold); 
  z-index: 5;
}

#cch-header .cch-title { 
  flex: 1; 
  display: flex; 
  flex-direction: column; 
  line-height: 1.15; 
  min-width: 0; 
}

.cch-badge { 
  font-size: .65rem; 
  color: #ffcf6b; 
}

.cch-bal { 
  color: var(--gold); 
  font-weight: 800; 
  font-size: .85rem; 
  white-space: nowrap; 
}

/* Mesa */
#cch-felt {
  position: relative; 
  flex: 1 1 auto; 
  min-height: 0; 
  overflow-y: auto;
  display: flex; 
  flex-direction: column; 
  align-items: center;
  justify-content: flex-start; 
  gap: 8px; 
  padding: 65px 8px 10px;
  background: radial-gradient(ellipse at 50% 34%, #12633a 0%, #0c4a2b 55%, #072016 100%);
  border-bottom: 3px solid #5a4209;
}

/* Croupier */
#cch-felt::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
  height: 130px;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(249,168,37,0.18), transparent 65%);
}

#cch-croupier {
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 85px;
  height: auto;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 8px 15px rgba(0,0,0,.6));
  -webkit-mask-image: linear-gradient(180deg,#000 76%,transparent 100%);
          mask-image: linear-gradient(180deg,#000 76%,transparent 100%);
}

#cch-croupier.has-photo { 
  width: 90px; 
  aspect-ratio: 3/4; 
  object-fit: cover; 
  object-position: 50% 12%;
  border-radius: 14px 14px 0 0; 
}

#cch-croupier.dealing { 
  animation: cchDealer .5s ease; 
}

@keyframes cchDealer { 
  0%,100%{ transform: translateX(-50%) rotate(0); } 
  30%{ transform: translateX(-50%) rotate(-3deg); } 
  60%{ transform: translateX(-50%) rotate(2deg); } 
}

/* Oponentes */
#cch-opponents { 
  display: flex; 
  gap: 8px; 
  justify-content: center; 
  flex-wrap: wrap; 
  width: 100%; 
  padding: 5px 0;
}

.cch-opp { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 2px; 
  min-width: 58px;
  max-width: 75px;
  padding: 6px 5px; 
  border-radius: 12px; 
  transition: .2s; 
  background: rgba(0,0,0,0.25);
}

.cch-opp.is-turn { 
  background: rgba(0,230,118,.14); 
  box-shadow: 0 0 0 2px rgba(0,230,118,.5); 
}

.cch-opp.is-winner { 
  background: rgba(249,168,37,.2); 
  box-shadow: 0 0 0 2px var(--gold); 
}

.cch-opp-cards { 
  display: flex; 
  height: 22px; 
}

.cch-opp-cards .card-component { 
  width: 16px; 
  height: 22px; 
  margin-left: -6px; 
  border-radius: 2px; 
}

.cch-opp-cards .card-component:first-child { 
  margin-left: 0; 
}

.cch-opp-av { 
  position: relative; 
  width: 38px; 
  height: 38px; 
}

.cch-opp-av img { 
  width: 100%; 
  height: 100%; 
  border-radius: 50%; 
  object-fit: cover; 
  border: 2px solid rgba(255,255,255,.25); 
}

.cch-opp.is-turn .cch-opp-av img { 
  border-color: var(--green-bright); 
}

.cch-ready-dot { 
  position: absolute; 
  right: -2px; 
  bottom: -2px; 
  width: 16px; 
  height: 16px; 
  border-radius: 50%;
  background: var(--green); 
  color: #04240f; 
  display: grid; 
  place-items: center; 
  font-size: .6rem; 
  border: 2px solid #0c4a2b; 
}

.cch-opp-name { 
  font-size: .65rem; 
  color: #fff; 
  font-weight: 700; 
  max-width: 65px; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap; 
}

.cch-opp-chips { 
  font-size: .65rem; 
  color: #ffcf6b; 
  font-weight: 700; 
}

.cch-waiting { 
  color: rgba(255,255,255,.6); 
  padding: 15px; 
  font-size: .8rem; 
}

/* Centro */
#cch-center { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 10px; 
  margin-top: auto;
  margin-bottom: auto;
}

.cch-pot { 
  background: rgba(0,0,0,.55); 
  border: 1px solid var(--border-gold); 
  color: #ffcf6b;
  font-weight: 800; 
  padding: 5px 15px; 
  border-radius: 999px; 
  font-size: .85rem; 
}

.cch-piles { 
  display: flex; 
  gap: 20px; 
}

.cch-pile { 
  position: relative; 
  background: none; 
  border: none; 
  cursor: pointer; 
  display: flex; 
  flex-direction: column;
  align-items: center; 
  gap: 4px; 
  padding: 0; 
  opacity: .85; 
  transition: .15s; 
}

.cch-pile.active { 
  opacity: 1; 
}

.cch-pile.active::after { 
  content: ''; 
  position: absolute; 
  inset: -4px -4px 14px; 
  border-radius: 10px;
  box-shadow: 0 0 0 2px var(--green-bright), 0 0 12px rgba(0,230,118,.5); 
  animation: cchPulse 1.2s infinite; 
}

@keyframes cchPulse { 
  0%,100%{opacity:.6} 
  50%{opacity:1} 
}

.cch-cardback, #cch-discard-card .card-component, .cch-empty {
  width: 48px; 
  height: 68px; 
  border-radius: 6px; 
}

.cch-cardback { 
  background-color:#7a1122; 
  background-image:
    repeating-linear-gradient(45deg, rgba(249,200,90,.2) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, rgba(249,200,90,.2) 0 2px, transparent 2px 9px),
    radial-gradient(ellipse at 50% 50%, #9a1a30, #6d0f1f 80%);
  border: 1px solid rgba(249,200,90,.55); 
  box-shadow: 0 3px 8px rgba(0,0,0,.5); 
}

.cch-empty { 
  display: grid; 
  place-items: center; 
  color: rgba(255,255,255,.4); 
  font-size: .65rem;
  border: 1.5px dashed rgba(255,255,255,.25); 
}

.cch-pile-lbl { 
  font-size: .68rem; 
  color: rgba(255,255,255,.8); 
  font-weight: 700; 
}

.cch-pile-lbl b { 
  color: #ffcf6b; 
}

#cch-msg { 
  color: rgba(255,255,255,.85); 
  font-size: .78rem; 
  text-align: center; 
  min-height: 18px; 
}

#cch-timer { 
  position: absolute; 
  top: 8px; 
  right: 8px; 
  background: rgba(0,0,0,.7); 
  color: #fff;
  font-weight: 800; 
  padding: 4px 10px; 
  border-radius: 999px; 
  font-size: .75rem; 
  border: 1px solid var(--green-bright); 
  z-index: 20;
}

#cch-timer.urgent { 
  border-color: #ef4444; 
  color: #ffcaca; 
  animation: cchPulse .5s infinite; 
}

#cch-timer.urgent #cch-timer-txt {
  color: #ff4444;
  animation: urgentBlink 0.5s infinite;
}

@keyframes urgentBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.cch-timer-hidden { 
  display: none !important; 
}

/* Minha área */
#cch-me { 
  flex: 0 0 auto; 
  background: linear-gradient(0deg, #041209, #08260f);
  padding: 8px 8px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 2px solid var(--border-gold); 
  z-index: 10; 
  min-height: 110px;
}

#cch-hand-tools { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 8px;
  padding: 0 2px 5px; 
}

.cch-tip { 
  color: rgba(255,255,255,.5); 
  font-size: .65rem; 
  display: inline-flex; 
  align-items: center; 
  gap: 4px; 
}

.cch-tool { 
  background: rgba(255,255,255,.08); 
  border: 1px solid rgba(249,168,37,.4); 
  color: #ffcf6b;
  font-weight: 800; 
  font-size: .72rem; 
  padding: 6px 12px; 
  border-radius: 999px; 
  cursor: pointer; 
  white-space: nowrap; 
}

.cch-tool:active { 
  background: rgba(249,168,37,.2); 
}

#cch-myhand { 
  display: flex; 
  justify-content: center; 
  gap: 3px; 
  flex-wrap: wrap; 
  margin-bottom: 8px; 
  padding: 4px 2px; 
  min-height: 55px;
}

/* Cartas na mão */
.cch-card { 
  cursor: pointer; 
  transition: transform .12s ease; 
  flex: 0 0 auto; 
  touch-action: manipulation;
}

.cch-card .card-component { 
  width: 42px; 
  height: 60px; 
  border-radius: 6px; 
}

.cch-card.selected { 
  transform: translateY(-12px); 
}

.cch-card.selected .card-component { 
  box-shadow: 0 0 0 3px var(--green-bright), 0 8px 18px rgba(0,0,0,.5); 
}

.cch-card.dragging { 
  transform: translateY(-16px) scale(1.08); 
  z-index: 20; 
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.6)); 
}

/* Destaque de trincas */
.cch-card.cch-highlight {
  animation: highlightPulse 1.5s ease-in-out infinite;
  filter: brightness(1.15);
}

.cch-card.cch-highlight .card-component {
  border: 2px solid #FFD700 !important;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
}

@keyframes highlightPulse {
  0%, 100% {
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
  }
}

/* Botões de ação */
#cch-actions { 
  display: flex; 
  gap: 6px; 
  justify-content: center; 
  align-items: center; 
  flex-wrap: wrap;
  min-height: 46px; 
}

.cch-btn { 
  border: none; 
  border-radius: 12px; 
  font-weight: 800; 
  font-size: .82rem; 
  padding: 12px 16px; 
  color: #fff;
  cursor: pointer; 
  box-shadow: 0 4px 0 rgba(0,0,0,.35), 0 6px 15px rgba(0,0,0,.4); 
  transition: transform .08s; 
  flex: 1 1 auto;
  min-width: 0;
  max-width: 160px;
  text-align: center;
}

.cch-btn:active { 
  transform: translateY(3px); 
}

.cch-btn:disabled { 
  opacity: .45; 
  pointer-events: none; 
}

.cch-btn-green { 
  background: linear-gradient(180deg,#42c98d,#1f9d63); 
  color: #04240f; 
}

.cch-btn-red { 
  background: linear-gradient(180deg,#ff6b6b,#d32f2f); 
}

.cch-btn-gold { 
  background: linear-gradient(180deg,#ffde8a,#f0a500); 
  color: #2a1c00; 
}

.cch-btn-gray { 
  background: linear-gradient(180deg,#4b5563,#232a34); 
}

.cch-btn.pulse { 
  animation: cchBtnPulse 1s infinite; 
}

@keyframes cchBtnPulse { 
  0%,100%{ filter:brightness(1); } 
  50%{ filter:brightness(1.2); } 
}

.cch-hint { 
  color: rgba(255,255,255,.8); 
  font-size: .82rem; 
  text-align: center; 
  padding: 6px; 
}

/* Vitória */
#cch-winner { 
  position: fixed; 
  inset: 0; 
  z-index: 3000; 
  display: grid; 
  place-items: center;
  background: rgba(0,0,0,.75); 
  backdrop-filter: blur(4px); 
}

#cch-winner.cch-hidden { 
  display: none; 
}

.cch-winner-card { 
  text-align: center; 
  background: linear-gradient(180deg,#161616,#0c0c0c);
  border: 1px solid var(--border-gold); 
  border-radius: 20px; 
  padding: 25px 20px; 
  width: 90%;
  max-width: 320px;
  animation: ds-scale-in .3s ease both; 
}

.cch-winner-ico { 
  font-size: 3rem; 
}

.cch-winner-card h3 { 
  color: var(--gold); 
  font-weight: 900; 
  margin: 6px 0; 
  font-size: 1.2rem;
}

.cch-winner-card p { 
  color: #fff; 
  margin: 0; 
}

.cch-winner-groups { 
  display: flex; 
  flex-direction: column; 
  gap: 6px; 
  margin: 12px 0; 
}

.cch-wgroup { 
  display: inline-flex; 
  flex-direction: column;
  align-items: center; 
  padding: 8px; 
  border-radius: 10px;
  background: rgba(0,230,118,.1); 
  border: 1px solid rgba(0,230,118,.3); 
}

.cch-wgroup .card-component { 
  width: 30px; 
  height: 42px; 
  border-radius: 4px; 
  margin: 1px;
}

.cch-wglabel { 
  font-size: .7rem; 
  color: var(--green-bright); 
  font-weight: 800; 
  margin-top: 4px;
}

/* Animações */
#cch-fx { 
  position: absolute; 
  inset: 0; 
  z-index: 15; 
  pointer-events: none; 
  overflow: visible; 
}

.cch-fxcard {
  position: absolute; 
  left: 50%; 
  top: 45px; 
  width: 30px; 
  height: 42px; 
  border-radius: 4px;
  background-color: #7a1122; 
  background-image:
    repeating-linear-gradient(45deg, rgba(249,200,90,.2) 0 2px, transparent 2px 7px),
    radial-gradient(ellipse at 50% 50%, #9a1a30, #6d0f1f 80%);
  border: 1px solid #f4d06a; 
  box-shadow: 0 3px 8px rgba(0,0,0,.55);
  transform: translate(-50%,-50%);
}

.cch-deck { 
  position: absolute; 
  left: 50%; 
  top: 45px; 
}

.cch-deck .cch-fxcard { 
  position: absolute; 
  left: 0; 
  top: 0; 
}

.cch-deck.shuffling .cch-fxcard { 
  animation: cchRiffle .34s ease-in-out; 
}

@keyframes cchRiffle { 
  0%,100%{transform:translate(-50%,-50%) rotate(0)} 
  25%{transform:translate(-50%,-50%) rotate(-8deg) translateX(-6px)} 
  75%{transform:translate(-50%,-50%) rotate(8deg) translateX(6px)} 
}

@keyframes cchDeal {
  0%{ opacity:0; transform: translate(-50%,-50%) scale(.7); }
  15%{ opacity:1; }
  100%{ opacity:0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.6) rotate(var(--dr)); }
}

.cch-fxcard.dealing { 
  animation: cchDeal .5s cubic-bezier(.3,.7,.4,1) forwards; 
}

/* ═══ HEADER DA MESA ═══ */
#game-header {
  display: flex !important; 
  align-items: center; 
  gap: 10px;
  background: linear-gradient(180deg, rgba(4,6,4,.96), rgba(10,14,10,.9)) !important;
  border-bottom: 1px solid var(--border-gold);
}

.gh-back { 
  flex: 0 0 auto; 
  width: 36px; 
  height: 36px; 
  border-radius: 10px; 
  display: grid; 
  place-items: center;
  background: rgba(255,255,255,.06); 
  border: 1px solid var(--hairline); 
  color: #fff; 
  font-size: 1.1rem; 
  text-decoration: none; 
}

.gh-back:active { 
  background: rgba(255,255,255,.14); 
  transform: scale(.94); 
}

.gh-title { 
  flex: 1; 
  min-width: 0; 
  display: flex; 
  flex-direction: column; 
  line-height: 1.12; 
}

.gh-name { 
  color: var(--gold); 
  font-weight: 800; 
  font-size: .9rem; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}

.gh-sub { 
  display: flex; 
  align-items: center; 
  gap: 6px; 
  margin-top: 2px; 
}

.gh-stakes { 
  color: rgba(255,255,255,.6); 
  font-size: .68rem; 
  font-weight: 700; 
  white-space: nowrap; 
}

.gh-stage { 
  font-size: .6rem; 
  font-weight: 800; 
  padding: 1px 8px; 
  border-radius: 999px; 
  white-space: nowrap;
  background: rgba(0,230,118,.16); 
  color: var(--green-bright); 
  text-transform: uppercase; 
  letter-spacing: .3px; 
}

.gh-right { 
  flex: 0 0 auto; 
  display: flex; 
  align-items: center; 
  gap: 6px; 
}

#game-header .balance-display { 
  padding: 6px 10px; 
  font-size: .8rem; 
  display: flex; 
  align-items: center; 
  gap: 5px; 
  white-space: nowrap; 
  border-radius: 999px; 
}

.gh-icon { 
  width: 36px; 
  height: 36px; 
  border-radius: 10px; 
  display: grid; 
  place-items: center; 
  border: 1px solid var(--hairline);
  background: rgba(255,255,255,.06); 
  color: #fff; 
  cursor: pointer; 
  padding: 0; 
  overflow: hidden; 
  flex: 0 0 auto; 
}

.gh-icon:active { 
  transform: scale(.94); 
}

.gh-avatar img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}

/* ═══ RESPONSIVO ═══ */
@media (min-width: 420px) {
  #cch-myhand .cch-card .card-component { 
    width: 48px; 
    height: 68px; 
  }
  
  .cch-btn {
    font-size: .88rem;
    padding: 13px 18px;
  }
}

@media (min-width: 720px) {
  #cch-felt, #cch-me { 
    max-width: 650px; 
    margin: 0 auto; 
    width: 100%; 
  }
  
  #cch-felt {
    padding: 80px 16px 15px;
  }
  
  #cch-croupier {
    width: 100px;
    top: -10px;
  }
  
  #cch-croupier.has-photo {
    width: 110px;
  }
  
  #cch-myhand .cch-card .card-component { 
    width: 56px; 
    height: 78px; 
  }
  
  .cch-btn {
    font-size: .95rem;
    padding: 14px 22px;
  }
  
  .cch-opp {
    min-width: 70px;
    max-width: 90px;
  }
  
  .cch-opp-av {
    width: 46px;
    height: 46px;
  }
}

@media (max-width: 460px) {
  #btn-sound { 
    display: none; 
  }
  
  .gh-name { 
    font-size: .85rem; 
  }
  
  #game-header .balance-display { 
    padding: 5px 8px; 
    font-size: .75rem; 
  }
}

/* Paisagem */
@media (orientation: landscape) and (max-height: 540px) {
  #cch-header { 
    padding: 4px 10px; 
  }
  
  #cch-felt { 
    padding-top: 8px; 
    gap: 4px; 
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  #cch-felt::before { 
    display: none; 
  }
  
  #cch-croupier { 
    width: 55px; 
    top: -5px; 
    left: auto; 
    right: 8px; 
    transform: none; 
  }
  
  #cch-croupier.has-photo { 
    width: 60px; 
  }
  
  #cch-croupier.dealing { 
    animation: none; 
  }
  
  .cch-fxcard,
  .cch-deck {
    top: 25px;
  }
  
  #cch-opponents { 
    gap: 4px; 
  }
  
  .cch-opp { 
    min-width: 48px; 
    padding: 3px 4px; 
  }
  
  .cch-opp-av { 
    width: 28px; 
    height: 28px; 
  }
  
  .cch-opp-cards { 
    height: 16px; 
  }
  
  .cch-opp-cards .card-component { 
    width: 12px; 
    height: 16px; 
    margin-left: -4px; 
  }
  
  .cch-opp-name { 
    font-size: .55rem; 
  }
  
  .cch-opp-chips { 
    font-size: .55rem; 
  }
  
  #cch-center { 
    margin-top: 4px; 
    gap: 4px; 
  }
  
  .cch-pot { 
    font-size: .7rem; 
    padding: 3px 10px; 
  }
  
  .cch-cardback, #cch-discard-card .card-component, .cch-empty { 
    width: 34px; 
    height: 48px; 
  }
  
  .cch-pile-lbl { 
    font-size: .58rem; 
  }
  
  #cch-msg { 
    font-size: .65rem; 
    min-height: 12px; 
  }
  
  #cch-me { 
    padding: 4px 8px calc(6px + env(safe-area-inset-bottom,0px)); 
    min-height: 80px;
  }
  
  #cch-hand-tools { 
    padding-bottom: 2px; 
  }
  
  .cch-tip { 
    display: none; 
  }
  
  #cch-myhand { 
    margin-bottom: 4px; 
    padding: 2px; 
  }
  
  #cch-myhand .cch-card .card-component { 
    width: 34px; 
    height: 48px; 
  }
  
  #cch-actions { 
    min-height: 36px; 
    gap: 4px;
  }
  
  .cch-btn { 
    padding: 8px 12px; 
    font-size: .72rem; 
  }
}

@media (prefers-reduced-motion: reduce) { 
  .cch-fxcard.dealing, 
  .cch-deck.shuffling .cch-fxcard, 
  #cch-croupier.dealing,
  .cch-card.cch-highlight,
  .cch-btn.pulse { 
    animation: none; 
  } 
}