/* Overrides + glue: bridges the new design's CSS with our extras (modals,
   buttons, chips, scene-level toggles for non-game pages). */

/* The new design fixes the body to overflow:hidden + 100vh. That's right
   for the game screen but wrong for pages with normal content scroll. */
body { overflow: auto; }
body.game-page { overflow: hidden; }

/* When inside .scene (game screen), suppress our standard header so the
   immersive layout takes over. */
.scene .libyan-border,
body:has(.scene) > header {
  display: none;
}
body:has(.scene) main { max-width: none; padding: 0; }

/* ── Profile cards (player + bot) ── */
.profile-card {
  background: linear-gradient(180deg, rgba(20,12,8,0.85), rgba(10,6,4,0.95));
  border: 2px solid rgba(201,169,97,0.35);
  border-radius: 14px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
  transition: all 300ms ease;
  min-width: 240px;
}
.profile-card.active {
  border-color: var(--libyan-gold);
  box-shadow: 0 0 20px rgba(255,215,0,0.4), 0 8px 20px rgba(0,0,0,0.5);
}
.profile-card .bot-info,
.profile-card .player-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.profile-card .player-score-row,
.profile-card .bot-score-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.profile-card .num {
  color: #FFD700;
  font-weight: 800;
  font-size: 22px;
  font-family: 'Reem Kufi', sans-serif;
  line-height: 1;
}
.profile-card .num-label {
  font-size: 9px;
  color: rgba(255,215,0,0.6);
  font-family: 'Cairo', sans-serif;
}
.profile-card .player-avatar,
.profile-card .bot-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 24px;
  flex-shrink: 0;
  box-shadow: inset 0 -4px 8px rgba(0,0,0,0.3), 0 0 0 2px rgba(201,169,97,0.4);
}
.profile-card .player-avatar {
  background: radial-gradient(circle at 35% 30%, #b8e0ff, #5a90c8 50%, #2a4870);
}
.profile-card .bot-avatar {
  background: radial-gradient(circle at 35% 30%, #f5d989, #c9a961 50%, #8a6e2f);
}

/* ── Breakdown chips ── */
.breakdown-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 6px;
  font-family: 'Cairo', sans-serif;
}
.breakdown-chips .chip {
  background: rgba(255,248,231,0.06);
  border: 1px solid rgba(201,169,97,0.25);
  border-radius: 6px;
  padding: 4px 6px;
  text-align: center;
  font-size: 10px;
  color: rgba(255,248,231,0.85);
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.breakdown-chips .chip b {
  font-family: 'Reem Kufi', sans-serif;
  font-size: 14px;
  color: #fff8e7;
}
.breakdown-chips .chip small {
  font-size: 9px;
  color: rgba(255,248,231,0.5);
}
.breakdown-chips .chip.gold b { color: #FFD700; }
.breakdown-chips .chip.red b { color: #ff8a8a; }
.breakdown-chips .chip.blue b { color: #a8d4ff; }

/* Variable point currently held by this side — soft glow */
.breakdown-chips .chip.holds-point {
  background: rgba(255,215,0,0.18);
  border-color: rgba(255,215,0,0.7);
  box-shadow: 0 0 10px rgba(255,215,0,0.35);
}
.breakdown-chips .chip.holds-point small { color: #FFD700; }

/* Permanent (locked-in) chip — solid border, distinct from live chips */
.breakdown-chips .chip.permanent {
  background: rgba(255,215,0,0.22);
  border: 1px solid rgba(255,215,0,0.85);
  box-shadow: inset 0 0 6px rgba(255,215,0,0.3);
}
.breakdown-chips .chip.permanent small { color: #fff8e7; }

/* Carte chip is dimmed until the deck empties (point not yet revealed) */
.breakdown-chips .chip.pending {
  opacity: 0.55;
  border-style: dashed;
}
.breakdown-chips .chip.revealed {
  opacity: 1;
}

/* ── Hayya ribbon on individual cards ── */
.card .hayya-ribbon {
  position: absolute;
  top: 6px; right: 6px;
  background: linear-gradient(135deg, #f6d76a 0%, #c89a2a 100%);
  color: #2a1a05;
  font-family: 'Reem Kufi', serif;
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 1px;
  padding: 2px 6px;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  pointer-events: none;
  z-index: 5;
}

/* ── card-face image fitting ── */
.card-face img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 10px;
  pointer-events: none;
  user-select: none;
}

/* 🇱🇾 Dealer-side deck position. The deck (الكارطة) sits next to whoever is
   dealing the round. Libyan rule: the player with the lower cumulative
   score deals next, so the deck shifts back-and-forth between the bot's
   row (top) and the player's row (bottom) at every round transition. */
#game-app[data-dealer="player"] .deck-column {
  align-self: end;
  padding-bottom: 6px;
}
#game-app[data-dealer="bot"] .deck-column {
  align-self: start;
  padding-top: 6px;
}
/* Soft glow on the deck reminding the player whose turn it is to deal. */
#game-app[data-dealer="player"] .deck-stack::before,
#game-app[data-dealer="bot"] .deck-stack::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 14px;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,215,0,0.18), transparent 70%);
  z-index: -1;
}

/* 🇱🇾 Profile badges — small pills sitting INSIDE the profile at the
   top-end. Used to be absolutely-positioned over the corners, but they
   collided with the bot's name on narrow viewports (the gold "الكارطة" badge
   landed right on top of the "بوت الكارطة" text). Now they live in a header
   row inside the profile so they never overlap text. */
.profile-badges {
  position: absolute;
  top: 3px;
  inset-inline-end: 8px;
  display: flex;
  gap: 6px;
  z-index: 6;
  pointer-events: none;
}
.profile-card { position: relative; padding-top: 18px !important; }

.dealer-badge {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #c9a961 0%, #f6d77e 50%, #c9a961 100%);
  color: #1a0e08;
  font-family: 'Reem Kufi', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.45),
    0 0 8px rgba(255,215,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.55);
  border: 1px solid rgba(120,70,20,0.55);
  white-space: nowrap;
  line-height: 1;
}
.dealer-badge-icon { font-size: 11px; line-height: 1; }
#game-app[data-dealer="player"] #player-dealer-badge,
#game-app[data-dealer="bot"] #bot-dealer-badge,
#game-app[data-dealer="partner"] #bot-dealer-badge,
#game-app[data-dealer="right"] #right-dealer-badge,
#game-app[data-dealer="left"] #left-dealer-badge {
  display: inline-flex;
}

/* 🇱🇾 Opener badge — sits next to the dealer badge inside the same header
   row so they read together: "★ الكارطة" + "▶ يبدأ" makes it crystal clear
   who has the kartah AND who plays first. Pulses gently to draw the eye to
   the opener (this is the actionable cue). Hidden once anyone has played
   their first card. */
.opener-badge {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1d6b3a 0%, #2da55a 50%, #1d6b3a 100%);
  color: #f4ffe8;
  font-family: 'Reem Kufi', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.45),
    0 0 8px rgba(45,165,90,0.45),
    inset 0 1px 0 rgba(255,255,255,0.4);
  border: 1px solid rgba(20,80,40,0.7);
  white-space: nowrap;
  line-height: 1;
  animation: opener-badge-pulse 1.6s ease-in-out infinite;
}
.opener-badge-icon { font-size: 10px; line-height: 1; transform: translateY(-0.5px); }
#game-app[data-opener="player"] #player-opener-badge,
#game-app[data-opener="bot"] #bot-opener-badge,
#game-app[data-opener="partner"] #bot-opener-badge,
#game-app[data-opener="right"] #right-opener-badge,
#game-app[data-opener="left"] #left-opener-badge {
  display: inline-flex;
}
@keyframes opener-badge-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 2px 6px rgba(0,0,0,0.45), 0 0 8px rgba(45,165,90,0.45), inset 0 1px 0 rgba(255,255,255,0.4); }
  50%      { transform: scale(1.06); box-shadow: 0 3px 8px rgba(0,0,0,0.5), 0 0 14px rgba(45,200,110,0.8), inset 0 1px 0 rgba(255,255,255,0.55); }
}

/* ── Hard interaction lock — applied to the whole game when it's not the
   player's turn or a move is mid-flight. The forfeit button is whitelisted
   so the user can always quit. */
#game-app.locked .player-hand,
#game-app.locked .table-cards,
#game-app.locked .table-cards-grid,
#game-app.locked .player-hand .card,
#game-app.locked .table-cards .card,
#game-app.locked #table-area,
#game-app.locked #table-area .card,
#game-app.locked #hand-area,
#game-app.locked #hand-area .card {
  pointer-events: none !important;
}
#game-app.locked .player-hand .card,
#game-app.locked #hand-area .card {
  filter: grayscale(0.4);
  opacity: 0.85;
}


/* ── Confirm action button ── */
.confirm-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 600;
  background: linear-gradient(180deg, #FFD700, #C9A961);
  color: #1A1A2E;
  font-family: 'Reem Kufi', sans-serif;
  font-weight: 800;
  font-size: 18px;
  padding: 14px 28px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 30px rgba(255,215,0,0.4);
  letter-spacing: 1px;
  transition: transform 200ms var(--ease-back, cubic-bezier(0.34,1.56,0.64,1));
}
.confirm-btn:hover { transform: scale(1.06); }
.confirm-btn.hidden { display: none; }

.forfeit-btn {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 600;
  width: 32px;
  height: 32px;
  background: rgba(139,38,53,0.55);
  color: #fff8e7;
  border: 1px solid rgba(255,107,117,0.4);
  border-radius: 50%;
  font-family: 'Cairo', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  line-height: 1;
  padding: 0;
  transition: all 200ms ease;
}
.forfeit-btn:hover {
  background: rgba(139,38,53,0.9);
  transform: scale(1.1);
}

/* ── Inline turn indicator: lives inside the deck column above the deck
   stack, so it never overlaps any profile card. ── */
.deck-column .turn-indicator {
  position: static;
  align-self: center;
  background: rgba(15, 20, 18, 0.85);
  border: 1px solid rgba(201, 169, 97, 0.4);
  border-radius: 999px;
  padding: 5px 12px;
  font-family: 'Reem Kufi', sans-serif;
  font-size: 11px;
  color: var(--libyan-gold);
  backdrop-filter: blur(8px);
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  pointer-events: none;
  transition: opacity 300ms ease;
  margin-bottom: 8px;
  white-space: nowrap;
}
.turn-indicator .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--libyan-gold);
  box-shadow: 0 0 8px var(--libyan-gold);
  animation: turn-pulse 1.2s ease-in-out infinite;
}
.turn-indicator.hidden { opacity: 0; }
.turn-indicator.bot { color: #ff8a8a; border-color: rgba(255, 138, 138, 0.4); }
.turn-indicator.bot .dot { background: #ff6b75; box-shadow: 0 0 8px #ff6b75; }

/* Hide the original `.turn-badge` (we removed it from markup but its CSS
   from new-design.css would still apply if anything used it). */
.turn-badge { display: none !important; }

/* ── Game modals (round end + game end) ──
   <dialog>::showModal centres natively via `margin: auto` over `inset: 0`.
   Our global `* { margin: 0 }` reset wipes that out, which used to pin the
   dialog to the inline-start corner (top-right in this RTL layout). The
   explicit `margin: auto` here restores native centering. */
.game-modal {
  margin: auto;
  background: linear-gradient(180deg, rgba(28,16,10,0.97), rgba(12,7,5,0.99));
  color: var(--ivory);
  border: 2px solid rgba(201,169,97,0.55);
  border-radius: 22px;
  padding: 36px 40px;
  max-width: 520px;
  width: min(90vw, 520px);
  box-shadow:
    0 30px 90px rgba(0,0,0,0.78),
    0 0 60px rgba(255,215,0,0.18),
    inset 0 1px 0 rgba(255,215,0,0.18);
  font-family: 'Cairo', sans-serif;
  /* Smooth entrance — overrides the default snap-in. */
  animation: gm-enter 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes gm-enter {
  from { opacity: 0; transform: translateY(20px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.game-modal::backdrop {
  background: radial-gradient(ellipse at center, rgba(20,5,10,0.82) 0%, rgba(0,0,0,0.95) 80%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.game-modal .modal-title {
  font-family: 'Reem Kufi', sans-serif;
  font-size: 32px;
  color: var(--libyan-gold-bright);
  text-align: center;
  margin-bottom: 16px;
  text-shadow: 0 0 20px rgba(255,215,0,0.4);
}
.game-modal .modal-subtitle {
  text-align: center;
  font-family: 'Amiri', serif;
  font-size: 22px;
  color: var(--ivory);
  margin-bottom: 24px;
}
.game-modal .modal-body {
  margin: 16px 0;
}
.game-modal .modal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}
.game-modal .btn-primary {
  background: linear-gradient(180deg, #FFD700, #C9A961);
  color: #1A1A2E;
  font-weight: 800;
  padding: 12px 28px;
  border-radius: 12px;
  border: none;
  font-family: 'Reem Kufi', sans-serif;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 1px;
}
.game-modal .btn-secondary {
  background: rgba(255,255,255,0.05);
  color: var(--ivory);
  border: 1px solid rgba(201,169,97,0.4);
  padding: 12px 24px;
  border-radius: 12px;
  font-family: 'Cairo', sans-serif;
  cursor: pointer;
  text-decoration: none;
}
.game-modal .trophy {
  font-size: 64px;
  text-align: center;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 24px rgba(255,215,0,0.5));
}

/* ── Game-end modal (win / loss) — polished art header + score split ── */
.end-modal { text-align: center; }
.end-modal-art {
  position: relative;
  height: 130px;
  margin: -8px 0 16px;
}
.end-modal-rays {
  position: absolute;
  inset: 0;
  background: conic-gradient(from 0deg,
    transparent 0deg,   rgba(255,215,0,0.35) 12deg, transparent 24deg,
    transparent 60deg,  rgba(255,215,0,0.30) 72deg, transparent 84deg,
    transparent 120deg, rgba(255,215,0,0.35) 132deg, transparent 144deg,
    transparent 180deg, rgba(255,215,0,0.30) 192deg, transparent 204deg,
    transparent 240deg, rgba(255,215,0,0.35) 252deg, transparent 264deg,
    transparent 300deg, rgba(255,215,0,0.30) 312deg, transparent 324deg,
    transparent 360deg);
  mask: radial-gradient(circle, transparent 38%, black 50%, black 100%);
  -webkit-mask: radial-gradient(circle, transparent 38%, black 50%, black 100%);
  filter: blur(1.5px);
  animation: end-rays 14s linear infinite;
}
.end-modal.lost .end-modal-rays {
  background: conic-gradient(from 0deg,
    transparent 0deg,   rgba(220,40,60,0.35) 12deg,  transparent 24deg,
    transparent 60deg,  rgba(220,40,60,0.30) 72deg,  transparent 84deg,
    transparent 120deg, rgba(220,40,60,0.35) 132deg, transparent 144deg,
    transparent 180deg, rgba(220,40,60,0.30) 192deg, transparent 204deg,
    transparent 240deg, rgba(220,40,60,0.35) 252deg, transparent 264deg,
    transparent 300deg, rgba(220,40,60,0.30) 312deg, transparent 324deg,
    transparent 360deg);
}
@keyframes end-rays { to { transform: rotate(360deg); } }
.end-modal-trophy {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 96px;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.6))
          drop-shadow(0 0 28px rgba(255,215,0,0.55));
  z-index: 1;
  animation: end-trophy-bob 2.6s ease-in-out infinite;
}
.end-modal.lost .end-modal-trophy {
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.6))
          drop-shadow(0 0 28px rgba(220,40,60,0.55));
}
@keyframes end-trophy-bob {
  0%, 100% { transform: translate(-50%,-50%) translateY(0) rotate(-3deg); }
  50%      { transform: translate(-50%,-50%) translateY(-8px) rotate(3deg); }
}
.end-modal .modal-title {
  font-size: 38px;
  margin-top: 4px;
  margin-bottom: 18px;
  letter-spacing: 8px;
}
.end-modal.won .modal-title {
  background: linear-gradient(180deg, #FFE680, #FFD700 50%, #B8860B);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 14px rgba(255,215,0,0.45));
}
.end-modal.lost .modal-title {
  background: linear-gradient(180deg, #ffb0b0, #c8242f 60%, #5a0e1a);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 14px rgba(220,40,60,0.4));
}
.end-modal-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 8px 0 18px;
}
.end-modal-score .ge-side {
  display: flex; flex-direction: column;
  gap: 4px; min-width: 80px;
}
.end-modal-score .ge-name {
  font-size: 12px;
  color: rgba(255,248,231,0.65);
  letter-spacing: 2px;
}
.end-modal-score .ge-num {
  font-family: 'Reem Kufi', sans-serif;
  font-weight: 800;
  font-size: 44px;
  color: rgba(255,248,231,0.85);
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}
.end-modal-score .ge-side.winner .ge-num {
  color: #FFD700;
  text-shadow: 0 0 18px rgba(255,215,0,0.7), 0 2px 12px rgba(0,0,0,0.55);
}
.end-modal-score .ge-vs {
  font-size: 28px;
  color: rgba(201,169,97,0.5);
  letter-spacing: 4px;
}
.end-modal .modal-subtitle {
  font-size: 16px;
  color: rgba(255,248,231,0.7);
  margin-bottom: 22px;
}

/* ── Forfeit confirmation modal ── */
.forfeit-modal {
  max-width: 420px;
  text-align: center;
  border-color: rgba(220,40,60,0.55);
  box-shadow:
    0 30px 90px rgba(0,0,0,0.78),
    0 0 60px rgba(220,40,60,0.25),
    inset 0 1px 0 rgba(255,180,180,0.18);
}
.forfeit-modal .forfeit-art {
  font-size: 56px;
  margin-bottom: 6px;
  color: #ff8c8c;
  filter: drop-shadow(0 6px 18px rgba(220,40,60,0.45));
}
.forfeit-modal .modal-title {
  font-size: 28px;
  letter-spacing: 6px;
  background: linear-gradient(180deg, #ffb0b0, #c8242f 70%, #5a0e1a);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.forfeit-modal .modal-subtitle {
  font-size: 15px;
  color: rgba(255,248,231,0.7);
}

/* Danger button (forfeit confirm) */
.game-modal .btn-danger {
  background: linear-gradient(180deg, #ff6b75, #c8242f 60%, #5a0e1a);
  color: #fff8e7;
  font-weight: 800;
  padding: 12px 26px;
  border-radius: 12px;
  border: none;
  font-family: 'Reem Kufi', sans-serif;
  font-size: 16px;
  cursor: pointer;
  letter-spacing: 1px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.45), 0 0 24px rgba(220,40,60,0.4);
}
.game-modal .btn-danger:hover { transform: translateY(-1px); }
.game-modal .round-end-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(201,169,97,0.2);
}
.game-modal .round-end-row .row-name {
  font-family: 'Reem Kufi', sans-serif;
  font-weight: 700;
  color: var(--libyan-gold);
  grid-column: 1 / 2;
}
.game-modal .round-end-row .row-stats {
  font-size: 12px;
  color: rgba(255,248,231,0.75);
  grid-column: 1 / 3;
  grid-row: 2;
}
.game-modal .round-end-row .row-score {
  grid-column: 2 / 3;
  grid-row: 1;
  font-family: 'Reem Kufi', sans-serif;
  color: var(--libyan-gold);
  font-weight: 800;
  font-size: 18px;
}

/* round-end breakdown — used by openRoundEndBreakdown() in points-hidden
   mode. Shows each side / each team-member's chips + total, all stacked
   vertically inside the round-end modal. */
.game-modal .round-end-row .reb-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'Reem Kufi', sans-serif;
  font-size: 1rem;
  margin-bottom: 6px;
}
.game-modal .round-end-row .reb-head strong {
  color: var(--libyan-gold-bright);
}
.game-modal .round-end-row .reb-total {
  font-size: 22px;
  font-weight: 800;
  color: var(--libyan-gold-bright);
  font-feature-settings: "tnum";
}
.game-modal .round-end-row .reb-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-bottom: 4px;
}
.game-modal .round-end-row .reb-sub {
  margin-top: 6px;
  padding: 6px 8px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(201, 169, 97, 0.18);
  border-radius: 8px;
}
.game-modal .round-end-row .reb-sub-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: rgba(255,248,231,0.85);
  margin-bottom: 4px;
}
.game-modal .round-end-row .reb-sub-head span {
  color: var(--libyan-gold);
  font-weight: 700;
}

/* ── Bot status / bubble bridge ── */
.bot-info .bot-name {
  font-family: 'Reem Kufi', 'Cairo', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--libyan-gold);
}
.bot-info .bot-status {
  font-size: 11px;
  color: rgba(255,248,231,0.55);
  min-height: 14px;
}

/* ── Card hover/select interactions (override tweaks for fan layout) ── */
.player-hand .card.hand-card.selected,
.player-hand .card.hand-card:hover {
  /* Custom prop set by JS fan layout */
}

/* ── Hand layout: flat side-by-side with a gap ──
   Removed the rotated fan because rotation made each card's hit-box
   overlap its neighbors, so clicks always landed on the topmost card.
   Now each card is independent and reliably clickable. */
.player-hand,
.bot-hand { gap: 10px; }
.player-hand .card,
.bot-hand .card {
  flex-shrink: 0;
  margin: 0 !important;
  transform-origin: 50% 50%;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.player-hand .card:hover {
  transform: translateY(-12px) !important;
  box-shadow: 0 6px 14px rgba(0,0,0,0.25), 0 0 24px rgba(201,169,97,0.45) !important;
  z-index: 200 !important;
}
.player-hand .card.selected {
  transform: translateY(-22px) scale(1.05) !important;
  box-shadow: 0 8px 16px rgba(0,0,0,0.28), 0 0 36px rgba(255,215,0,0.75) !important;
  z-index: 200 !important;
}

.bot-hand {
  align-items: flex-start;
  padding-top: 8px;
}

/* ── Felt sized to grow with viewport, single horizontal strip ── */
.felt {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  height: clamp(220px, 32vh, 360px) !important;
  max-height: 380px !important;
}
/* Table-zone needs to center the felt vertically when there's extra space */
.table-zone { align-items: center; }
/* Table cards: flex-wrap so they flow horizontally and wrap when needed,
   regardless of count. Override the original's `display: grid`. */
.table-cards-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 10px 14px;
  padding: 12px;
  width: 100%;
  height: 100%;
}
.table-cards {
  display: block !important;
  position: absolute;
  inset: 0;
  padding: 0;
}
/* Table cards specifically: scale down to fit more on small felts */
.table-cards .card {
  width: clamp(48px, 6.4vw, 88px) !important;
  height: clamp(72px, 9.6vw, 132px) !important;
}

/* ── Card sizing scales with viewport ── */
.card {
  width: clamp(56px, 7vw, 96px) !important;
  height: clamp(84px, 10.5vw, 144px) !important;
}

/* ── Capture-candidate / selected ring (FIXED) ──
   Use `outline` with `outline-offset` so the gold ring sits on the EDGES of
   the card with a small gap, not bleeding into the card content. */
.card.capture-candidate {
  /* Reset the prototype's `box-shadow` ring; keep only a soft glow. */
  animation: capture-ring 1.4s ease-in-out infinite !important;
  outline: 3px solid var(--libyan-gold) !important;
  outline-offset: 5px !important;
  border-radius: 10px;
  cursor: pointer;
  /* Override the prototype's box-shadow ring */
  box-shadow: 0 6px 16px rgba(0,0,0,0.45), 0 0 18px rgba(255,215,0,0.35) !important;
}
.card.capture-candidate:hover {
  transform: translateY(-10px) scale(1.06) !important;
  z-index: 50 !important;
}
@keyframes capture-ring {
  0%, 100% {
    outline-color: rgba(201, 169, 97, 0.85);
    box-shadow: 0 6px 16px rgba(0,0,0,0.45), 0 0 18px rgba(255,215,0,0.35) !important;
  }
  50% {
    outline-color: rgba(255, 215, 0, 1);
    box-shadow: 0 6px 16px rgba(0,0,0,0.45), 0 0 32px rgba(255,215,0,0.85) !important;
  }
}

.card.capture-selected {
  outline: 4px solid var(--libyan-gold-bright) !important;
  outline-offset: 5px !important;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.45), 0 0 36px rgba(255,215,0,0.85) !important;
  transform: translateY(-12px) scale(1.08) !important;
}

/* ── Responsive breakpoints ── */
@media (max-width: 1100px) {
  .scene { grid-template-rows: clamp(150px, 18vh, 200px) 1fr clamp(170px, 22vh, 230px); }
  .table-zone { grid-template-columns: 140px 1fr 0; padding: 0 16px; gap: 12px; }
  .deck-stack { width: 70px; height: 105px; }
  .deck-counter { width: 28px; height: 28px; font-size: 12px; top: -8px; right: -8px; }
  .profile-card { min-width: 200px; padding: 8px 10px; gap: 8px; }
  .profile-card .player-avatar,
  .profile-card .bot-avatar { width: 40px; height: 40px; font-size: 20px; }
  .breakdown-chips .chip b { font-size: 12px; }
  .breakdown-chips .chip small { font-size: 8px; }
}

@media (max-width: 800px) {
  /* Make table cards even smaller to fit 5+ horizontally */
  .table-cards .card {
    width: clamp(38px, 11vw, 64px) !important;
    height: clamp(57px, 16.5vw, 96px) !important;
  }
  .scene {
    grid-template-rows: minmax(140px, auto) 1fr minmax(150px, auto);
    overflow: hidden;
  }
  .bot-zone, .player-zone {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    padding: 4px 8px;
    gap: 6px;
    overflow: hidden;
  }
  .bot-zone .profile-with-pile,
  .player-zone .profile-with-pile {
    justify-self: center;
    grid-row: 1;
    flex-direction: row;
  }
  .bot-hand, .player-hand {
    grid-row: 2;
    height: clamp(80px, 12vh, 110px);
    align-self: end;
    align-items: flex-end !important;
  }
  .player-zone .player-hand { align-items: flex-start !important; }
  .table-zone { grid-template-columns: 80px 1fr 0; gap: 8px; padding: 0 8px; }
  .deck-stack { width: 56px; height: 84px; }
  .deck-counter { width: 24px; height: 24px; font-size: 11px; }
  .pile-label, .pile-sub { font-size: 10px; }
  .felt { max-width: 100%; height: 100%; min-height: 160px; padding: 10px; border-radius: 18px; }
  .felt::before, .felt::after { width: 36px; height: 36px; }
  .table-zone { align-items: stretch; }
  .deck-column { justify-self: end; align-self: center; }
  .table-cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(48px, max-content));
    gap: 6px 8px;
    padding: 6px;
  }
  .captures-pile { width: 56px; height: 78px; }
  .captures-pile .cp-stack { width: 48px; height: 70px; }
  .captures-pile .cp-count { font-size: 22px; }
  .profile-card { min-width: 180px; }
  .breakdown-chips { grid-template-columns: repeat(4, 1fr); gap: 2px; }
  .breakdown-chips .chip { padding: 2px 4px; }
  .turn-badge { padding: 5px 14px; font-size: 11px; top: 8px; }
  .forfeit-btn { padding: 4px 10px; font-size: 11px; top: 8px; }
  .confirm-btn { padding: 10px 18px; font-size: 14px; bottom: 16px; right: 16px; }
  .card { width: clamp(48px, 14vw, 72px) !important; height: clamp(72px, 21vw, 108px) !important; }
  .player-hand, .bot-hand { gap: 6px; }
}

@media (max-width: 500px) {
  /* Even smaller table cards on phones */
  .table-cards .card {
    width: clamp(34px, 12vw, 54px) !important;
    height: clamp(51px, 18vw, 81px) !important;
  }
  .scene { grid-template-rows: 210px 1fr 210px; }
  .bot-zone, .player-zone { padding: 2px 4px; gap: 2px; }
  /* Slightly shorter hand container so the face-down bot cards don't kiss
     the felt's top edge. Same on the player side for symmetry. */
  .bot-hand, .player-hand { height: clamp(72px, 11vh, 96px) !important; }
  .profile-card {
    min-width: 0;
    width: auto;
    padding: 4px 6px;
    gap: 6px;
    border-radius: 10px;
    border-width: 1px;
  }
  .profile-card .player-avatar,
  .profile-card .bot-avatar { width: 28px; height: 28px; font-size: 14px; }
  .profile-card .num { font-size: 16px; }
  .profile-card .num-label { font-size: 8px; }
  .profile-card .bot-name { font-size: 12px; }
  .profile-card .bot-status { font-size: 9px; }
  .breakdown-chips {
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin-top: 3px;
  }
  .breakdown-chips .chip { padding: 1px 3px; }
  .breakdown-chips .chip b { font-size: 11px; }
  .breakdown-chips .chip small { font-size: 7px; }
  .captures-pile { width: 44px; height: 60px; }
  .captures-pile .cp-stack { width: 40px; height: 56px; }
  .captures-pile .cp-count { font-size: 16px; }
  .captures-pile .cp-count-label,
  .captures-pile .cp-label { font-size: 7px; bottom: 2px; }
  .captures-pile .cp-label { bottom: -12px; }
  .player-hand, .bot-hand { gap: 4px; }
  .felt { height: 100%; min-height: 130px; padding: 6px; border-radius: 12px; }
  .felt::before, .felt::after { width: 28px; height: 28px; }
  .deck-stack { width: 42px; height: 64px; }
  .deck-counter { width: 20px; height: 20px; font-size: 10px; }
  .pile-label, .pile-sub { font-size: 8px; letter-spacing: 1px; }
  .table-cards-grid { padding: 4px; gap: 4px 6px; }
  .turn-badge { padding: 3px 10px; font-size: 10px; top: 4px; }
  .forfeit-btn { padding: 3px 8px; font-size: 10px; top: 4px; }
  .confirm-btn { padding: 8px 14px; font-size: 12px; bottom: 8px; right: 8px; }
  /* Tighter badges on phones — gives the bot/player hand back the vertical
     room it lost when we moved badges into the profile. */
  .profile-card { padding-top: 14px !important; }
  .profile-badges { top: 2px; gap: 4px; }
  .dealer-badge, .opener-badge { font-size: 9px; padding: 1px 6px; }
  .dealer-badge-icon, .opener-badge-icon { font-size: 9px; }
}

/* ── Final scene-mode hardening: hide site chrome, lock to viewport ── */
body:has(.scene) header,
body:has(.scene) .screens-nav { display: none !important; }
body:has(.scene) main { padding: 0 !important; max-width: none !important; }
body:has(.scene) footer { display: none !important; }
body:has(.scene) { overflow: hidden; height: 100vh; }

/* ── Remove zellij corner ornaments from felt (per user request) ── */
.felt::before,
.felt::after { display: none !important; }

/* ── Misc adjustments for non-scene pages ── */
body:not(:has(.scene)) {
  background:
    radial-gradient(ellipse at top, rgba(201, 169, 97, 0.08), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(139, 38, 53, 0.06), transparent 70%),
    #1A1A2E;
}