/* ============================================================
   RUMMY SUPREME — CSS Overrides
   Overrides game-v2.css for rummy layout.
   ============================================================ */

/* ── Root / theme ── */
:root {
  --rm-gold:   #c4a35a;
  --rm-gold2:  #e8c07a;
  --rm-green:  #1c6040;
  --rm-dark:   #020a04;
  --rm-felt:   #1c6040;
  --rm-red:    #c0302a;
  --rm-blue:   #4a7fd4;
  --rm-panel:  rgba(2,10,4,.92);
}

/* ── Lobby title ── */
.lobby-title {
  font-family: Cinzel, serif !important;
  letter-spacing: 4px;
}

/* ══════════════════════════════════════════
   FULL-SCREEN RUMMY GAME LAYOUT
   Overrides the flex-row backgammon layout
   ══════════════════════════════════════════ */

/* Hide the backgammon side panels entirely */
.gm-panel-left,
.gm-panel-right {
  display: none !important;
}

/* Game container: full screen, no padding */
.game-container {
  background: #020a04 !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* Board area: take full width */
.gm-board-area {
  flex: 1 !important;
  max-width: 100% !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100dvh !important;
  padding: 0 !important;
  background: transparent !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Board container: remove ALL backgammon transforms, fill space */
.board-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;           /* ← removes rotateX(8deg) tilt */
  filter: none !important;              /* ← removes drop-shadow */
  perspective: none !important;
  transform-style: flat !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;          /* ← keep cards inside */
  position: relative !important;
  border-radius: 0 !important;
  display: block !important;
}

/* gameBoard: fill the board container completely */
#gameBoard {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: #020a04 !important;
  overflow: hidden !important;
}

/* ── Hide all backgammon-only elements ── */
.board-doubling-cube,
.bar-pieces,
.bg-pip,
#doubleBtn,
#diceArea,
.dice-area,
#floatingConfirm,
#undoFloating,
#btnConfirm,
#btnConfirm2,
#btnUndo,
#btnUndo2,
#vsHeader,
#specCountBadge,
#barWhite,
#barBlack,
#boardCanvas,
.bg-board,
.bg-bar,
.bg-home {
  display: none !important;
}

/* ── Turn banner ── */
.turn-banner {
  background: rgba(2,10,4,.88) !important;
  border: 1px solid rgba(196,163,90,.15) !important;
  color: var(--rm-gold2) !important;
  font-family: Rubik, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .5px;
  border-radius: 20px;
  padding: 5px 14px !important;
  display: none !important; /* Board3D renders turn info inline */
  text-align: center;
}

/* ── Exit button ── */
.gm-exit {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  z-index: 100 !important;
  color: rgba(196,163,90,.4) !important;
  background: rgba(2,8,4,.7) !important;
  border: 1px solid rgba(196,163,90,.15) !important;
  border-radius: 50% !important;
  width: 28px !important; height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}
.gm-exit:hover { color: var(--rm-gold) !important; }

/* ── Loading screen ── */
#loadingScreen { background: #020a04 !important; }

/* ── Lobby quick-match button ── */
.btn-play-now,
.g-btn-primary {
  background: linear-gradient(135deg,#1e5c3a,#0f3020) !important;
  border-color: rgba(74,184,117,.25) !important;
}

/* ── Bottom safe area for iPhone ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #rmHandArea { padding-bottom: max(6px, env(safe-area-inset-bottom)); }
}

/* ── Animate fadeIn ── */
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }

/* ── Responsive ── */
@media (max-width: 380px) {
  .rm-act-btn { font-size:9px; padding:6px 1px; }
}
@media (max-height: 580px) {
  #rmHandArea { height: 100px; }
}