/* ── SHARED GAME PAGE STYLES ─────────────── */

.game-page { min-height: 100vh; padding-top: 72px; }

.game-header {
  background: var(--bg-surface);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: var(--sp-2) 0;
}
.game-header-inner {
  display: flex; align-items: center; justify-content: space-between;
}
.chip-display {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-card);
  border: 1px solid rgba(212,137,26,.3);
  border-radius: var(--r-sm);
  padding: 8px 16px;
}
.chip-icon { font-size: 1.1rem; }
#chip-count {
  font-family: var(--font-accent); font-size: 1.2rem; font-weight: 600;
  color: var(--clr-amber-light);
}

.game-container { padding-top: var(--sp-4); padding-bottom: var(--sp-6); }

/* ── POKER TABLE ──────────────────────────── */
.poker-table {
  margin-bottom: var(--sp-4);
}
.felt-bg {
  background: radial-gradient(ellipse 80% 70% at 50% 50%, #1B4D2F 0%, #0D2B1A 100%);
  border: 6px solid #0A1F12;
  border-radius: var(--r-xl);
  box-shadow: 0 0 60px rgba(0,0,0,.7), inset 0 0 40px rgba(0,0,0,.4);
  padding: var(--sp-4);
  position: relative; min-height: 360px;
  display: flex; flex-direction: column;
  align-items: center; gap: var(--sp-3);
}

.community-area { text-align: center; }
.area-label { font-size: .7rem; letter-spacing: .1em; color: rgba(255,255,255,.4); margin-bottom: 8px; font-family: var(--font-accent); }
.community-cards { display: flex; gap: 8px; justify-content: center; margin-bottom: var(--sp-1); }
.pot-display { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pot-value {
  font-family: var(--font-accent); font-size: 1.1rem; font-weight: 600;
  color: var(--clr-amber-light);
}

.opponent-area { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.player-area   { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: auto; }

.player-label {
  display: flex; align-items: center; gap: 8px;
  font-size: .85rem; color: rgba(255,255,255,.7);
}
.player-avatar { font-size: 1.3rem; }
.player-chips-mini { font-size: .75rem; color: var(--clr-amber-light); }

.opp-cards, .player-cards {
  display: flex; gap: 8px;
}

/* Playing cards */
.playing-card {
  width: 56px; height: 80px;
  background: #fff; border-radius: 6px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  padding: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
  position: relative;
  animation: cardDeal .3s ease;
}
@keyframes cardDeal {
  from { transform: translateY(-20px) rotate(5deg); opacity: 0; }
  to   { transform: translateY(0) rotate(0); opacity: 1; }
}
.playing-card.red { color: #C0392B; }
.playing-card.black { color: #1A1A18; }
.card-rank-top { font-size: .7rem; font-weight: 700; line-height: 1; align-self: flex-start; }
.card-suit-mid { font-size: 1.3rem; line-height: 1; }
.card-rank-bot { font-size: .7rem; font-weight: 700; line-height: 1; align-self: flex-end; transform: rotate(180deg); }

.card-back {
  width: 56px; height: 80px;
  background: linear-gradient(135deg, #0D2B1A, #1B4D2F);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  border: 2px solid rgba(255,255,255,.1);
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
}
.card-slot {
  width: 56px; height: 80px;
  background: rgba(0,0,0,.3);
  border-radius: 6px;
  border: 2px dashed rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: rgba(255,255,255,.2);
}

.action-bubble {
  background: var(--clr-stone-800);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 100px;
  padding: 4px 12px;
  font-size: .8rem; color: var(--text-secondary);
  animation: fadeIn .3s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.round-result {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 24px;
  background: rgba(0,0,0,.85);
  border-radius: var(--r-sm);
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 700;
  text-align: center; white-space: nowrap;
  backdrop-filter: blur(8px);
  animation: resultFade .4s ease;
  z-index: 10;
}
.round-result.win  { color: var(--clr-amber-light); border: 1px solid rgba(212,137,26,.4); }
.round-result.lose { color: var(--text-secondary);  border: 1px solid rgba(255,255,255,.1); }
@keyframes resultFade { from { opacity: 0; transform: translate(-50%,-60%); } to { opacity: 1; transform: translate(-50%,-50%); } }

/* ── SHARED CONTROLS ─────────────────────── */
.game-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3);
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-3);
}
.bet-section { display: flex; flex-direction: column; gap: 8px; }
.bet-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.bet-chip-btn {
  padding: 6px 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 100px;
  font-size: .8rem; font-weight: 600; color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--tr-fast);
}
.bet-chip-btn:hover { background: rgba(212,137,26,.15); border-color: rgba(212,137,26,.3); color: var(--clr-amber-light); }
.bet-chip-btn.active { background: var(--clr-amber); color: var(--text-on-amber); border-color: var(--clr-amber); }
.current-bet { font-size: .8rem; color: var(--text-muted); }
.action-buttons { display: flex; gap: 10px; flex-wrap: wrap; }

/* Hand guide */
.hand-guide {
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-surface);
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-3);
}
.hand-rank-list {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.hand-rank-list span {
  font-size: .75rem; color: var(--text-muted);
  padding: 4px 8px;
  background: rgba(255,255,255,.04);
  border-radius: 4px;
}

/* Disclaimer */
.game-disclaimer {
  padding: var(--sp-2);
  background: rgba(30,74,45,.15);
  border: 1px solid rgba(46,125,79,.2);
  border-radius: var(--r-sm);
}
.game-disclaimer p { font-size: .78rem; color: var(--text-muted); line-height: 1.5; }

/* Slot controls inline */
.slot-controls {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
}

@media (max-width: 600px) {
  .felt-bg { padding: var(--sp-2); border-radius: var(--r-lg); }
  .community-cards { gap: 4px; }
  .game-controls { flex-direction: column; align-items: stretch; }
}