/* 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:
    border-color 220ms ease,
    box-shadow 220ms ease,
    background-color 220ms 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);
}
/* A second, static edge makes the active seat distinct without a pulse. */
#game-app .profile-card.active,
#game-app .side-profile.active {
  outline: 2px solid #f7e4a2;
  outline-offset: 2px;
}
.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;
  /* Score digits stay left-to-right inside the RTL layout, and tabular
     numerals lock the digit width so two-digit scores don't shift the
     surrounding label as the round progresses. */
  direction: ltr;
  font-feature-settings: "tnum";
}
.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 {
  /* Real profile picture for the human player. */
  background: url('/static/images/avatar-default.svg') center/cover no-repeat;
}
.profile-card .bot-avatar {
  /* Bot keeps its original gold radial — we want the 🤖 face on top. */
  background: radial-gradient(circle at 35% 30%, #f5d989, #c9a961 50%, #8a6e2f);
}
/* PVP / team_2v2 partner: NOT a bot — render the human-player look so
   real opponents/partners visually distinguish from the gold-gradient
   bot. Falls back to a burgundy gradient under the initials so a player
   without a profile picture still reads as "person, not bot." */
.profile-card .bot-avatar.pvp {
  background: radial-gradient(circle at 35% 30%, #b85e6a, #8b2635 55%, #4a141d);
  color: #fff8e7;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
/* Same treatment for the two side opponents in 2v2. The JS now also
   tags `.side-avatar.pvp` for these seats since they are always human
   in team_2v2 / PVP-spectate. */
.side-avatar.pvp {
  background: radial-gradient(circle at 35% 30%, #b85e6a, #8b2635 55%, #4a141d);
  color: #fff8e7;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* ── 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: 0;
  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 {
  opacity: 0.72;
}


.forfeit-btn {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 600;
  width: 40px;
  height: 40px;
  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: 15px;
  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);
}

/* (.turn-badge was removed from markup long ago. The defensive
   `display: none !important` rule that used to live here is no longer
   protecting anything — there is no markup it could re-style. Removed.) */

/* ── 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: center;
  align-items: baseline;
  font-family: 'Reem Kufi', sans-serif;
  font-size: 1rem;
  margin-bottom: 4px;
}
.game-modal .round-end-row .reb-head strong {
  color: var(--libyan-gold-bright);
}

/* 2026-05-28 points-UX: the round delta is the hero. Big gold number
   under a clear "نقاط الجولة" label, then a labelled cumulative line. */
.game-modal .round-end-row .reb-headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin: 2px 0 4px;
}
.game-modal .round-end-row .reb-headline-label {
  font-family: 'Reem Kufi', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 248, 231, 0.7);
}
.game-modal .round-end-row .reb-headline-pts {
  font-size: 34px;
  line-height: 1;
  font-weight: 900;
  color: var(--libyan-gold-bright);
  font-feature-settings: "tnum";
  direction: ltr;
}
.game-modal .round-end-row .reb-cum {
  text-align: center;
  font-size: 12px;
  color: rgba(255, 248, 231, 0.7);
  margin-bottom: 8px;
}
.game-modal .round-end-row .reb-cum strong {
  color: var(--libyan-gold);
  font-feature-settings: "tnum";
  direction: ltr;
  display: inline-block;
}

/* Per-category point lines (replaces the 4-up chip grid). Vertical
   list; each row is one point contributor. */
.game-modal .round-end-row .reb-chips {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 2px;
}
/* (The `.reb-sub` per-member sub-row rules were removed 2026-05-30 —
   2v2 round-end now shows the TEAM total + combined team category lines
   only, never a per-member split. Owner: "team as one person".) */

/* ── Redesigned round-end results (owner 2026-05-18): the two sides
   sit as side-by-side column cards (team1 | team2 in 2v2, أنت | الخصم
   in 1v1) in a responsive auto-fit grid. minmax(150px,1fr) makes it
   2-up where there's room and gracefully 1-up on a narrow phone — it
   can NEVER overflow the modal (a 1fr track caps at the container),
   so the 375px mobile-first rule holds without a media query. */
.game-modal .reb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  align-items: start;
  margin-bottom: 6px;
}
/* Each side becomes a self-contained card. Overrides the legacy
   `.round-end-row` grid (1fr auto) which auto-placed the reb-* blocks
   into the wrong cells — the actual cause of "النتائج تظهر بشكل سئ
   جداً". Scoped to `.reb-grid` so the prev-round modal's reuse of
   `.round-end-row` is untouched. */
.game-modal .reb-grid .round-end-row {
  display: flex;
  flex-direction: column;
  padding: 12px;
  border: 1px solid rgba(201, 169, 97, 0.28);
  border-bottom: 1px solid rgba(201, 169, 97, 0.28);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.26);
  min-width: 0;
}
/* The line list stays vertical inside the narrower column card (no
   grid override needed; .reb-chips is already flex-column). */

/* Point rows keep capture counts in the copy column and awarded points
   in the numeric column. شكبة uses green; dinari penalties use red. */
.game-modal .reb-chips .reb-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 248, 231, 0.10);
}
.game-modal .reb-chips .reb-line-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}
.game-modal .reb-chips .reb-line-mark {
  flex: 0 0 auto;
  width: 16px;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 248, 231, 0.4);
}
.game-modal .reb-chips .reb-line-label {
  flex: 0 0 auto;
  font-family: 'Reem Kufi', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 248, 231, 0.7);
  min-width: 0;
}
.game-modal .reb-chips .reb-line-meta {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 248, 231, 0.68);
  font-feature-settings: "tnum";
}
.game-modal .reb-chips .reb-line-pts {
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 800;
  color: var(--libyan-gold-bright);
  font-feature-settings: "tnum";
  direction: ltr;
}
.game-modal .reb-chips .reb-line-pts.dim {
  color: rgba(255, 248, 231, 0.68);
  font-weight: 600;
}
/* WON rows: gold border + bright mark/label. */
.game-modal .reb-chips .reb-line.is-won {
  background: linear-gradient(180deg, rgba(255,215,0,0.16), rgba(201,169,97,0.07));
  border-color: rgba(255, 215, 0, 0.5);
}
.game-modal .reb-chips .reb-line.is-won .reb-line-mark { color: #ffd700; }
.game-modal .reb-chips .reb-line.is-won .reb-line-label { color: #ffe9a8; }
/* LOST rows: muted. */
.game-modal .reb-chips .reb-line.is-lost {
  opacity: 1;
}
/* شكبة: green accent. */
.game-modal .reb-chips .reb-line.is-scopa {
  background: linear-gradient(180deg, rgba(120,200,120,0.18), rgba(40,120,60,0.08));
  border-color: rgba(120, 220, 130, 0.45);
}
.game-modal .reb-chips .reb-line.is-scopa .reb-line-mark,
.game-modal .reb-chips .reb-line.is-scopa .reb-line-label { color: #9be8a6; }
.game-modal .reb-chips .reb-line.is-scopa .reb-line-pts { color: #9be8a6; }
/* 8-dinari penalty: red accent. */
.game-modal .reb-chips .reb-line.is-penalty {
  background: rgba(220, 40, 60, 0.16);
  border-color: rgba(255, 120, 130, 0.42);
}
.game-modal .reb-chips .reb-line.is-penalty .reb-line-mark,
.game-modal .reb-chips .reb-line.is-penalty .reb-line-label,
.game-modal .reb-chips .reb-line.is-penalty .reb-line-pts { color: #ff9aa6; }

/* Ready panel inside the round-end breakdown modal (hidden-points
   PVP / 2v2). Shows every seat and a ✓/… indicator that flips live
   as peers press Ready. */
.game-modal .round-end-ready {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(201, 169, 97, 0.25);
  border-radius: 10px;
}
.game-modal .round-end-ready .reb-ready-title {
  font-family: 'Reem Kufi', sans-serif;
  font-size: 0.92rem;
  color: var(--libyan-gold-bright);
  margin-bottom: 8px;
}
.game-modal .round-end-ready .reb-ready-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.game-modal .round-end-ready .reb-ready-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px dashed rgba(255, 248, 231, 0.15);
  border-radius: 8px;
  transition: background 200ms ease, border-color 200ms ease;
}
.game-modal .round-end-ready .reb-ready-row.is-ready {
  background: rgba(31, 77, 58, 0.32);
  border: 1px solid rgba(120, 200, 100, 0.4);
}
.game-modal .round-end-ready .reb-ready-tick {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 248, 231, 0.08);
  color: rgba(255, 248, 231, 0.5);
  font-weight: 800;
  font-size: 0.9rem;
}
.game-modal .round-end-ready .reb-ready-row.is-ready .reb-ready-tick {
  background: #34c759;
  color: #0a1f10;
}
.game-modal .round-end-ready .reb-ready-name {
  font-family: 'Reem Kufi', sans-serif;
  color: rgba(255, 248, 231, 0.9);
  font-size: 0.95rem;
}

/* ── Round results debrief ─────────────────────────────────────────
   A fixed one-screen scoreboard. Both sides stay visible together:
   total score first, round points second, then the compact breakdown. */
.round-results-modal {
  width: min(calc(100vw - 12px), 760px);
  max-width: 760px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% -18%, rgba(255, 215, 0, 0.13), transparent 36%),
    linear-gradient(180deg, rgba(16, 17, 31, 0.99), rgba(7, 8, 18, 0.995));
  box-shadow:
    var(--shadow),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 48px rgba(201, 169, 97, 0.14);
}

.round-results-modal[open] {
  display: flex;
  height: fit-content;
  max-height: min(calc(100dvh - 12px), 720px);
  flex-direction: column;
}

.round-results-modal::backdrop {
  background:
    radial-gradient(circle at 50% 40%, rgba(31, 77, 58, 0.2), transparent 38%),
    rgba(2, 3, 8, 0.9);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.round-results-heading {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  padding: 8px 20px 7px;
  text-align: center;
  border-bottom: 1px solid var(--line-soft);
  background:
    linear-gradient(110deg, rgba(139, 38, 53, 0.12), transparent 42%),
    linear-gradient(250deg, rgba(31, 77, 58, 0.14), transparent 42%);
}

.round-results-heading::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    linear-gradient(90deg, transparent 49.5%, rgba(255, 255, 255, 0.04) 50%, transparent 50.5%);
}

.round-results-modal .round-results-kicker {
  position: relative;
  margin: 0;
  color: var(--gold);
  font-family: 'Reem Kufi', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
}

.round-results-modal .modal-title {
  position: relative;
  margin: 0;
  color: var(--ivory);
  font-size: clamp(1.12rem, 3.5vw, 1.42rem);
  line-height: 1.2;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.46);
}

.round-results-subtitle {
  position: relative;
  margin: 1px 0 0;
  color: rgba(255, 248, 231, 0.68);
  font-size: 0.64rem;
  line-height: 1.35;
}

.round-results-modal .round-results-body {
  display: flex;
  min-height: 0;
  flex: 0 1 auto;
  flex-direction: column;
  margin: 0;
  padding: 8px 10px;
  overflow: hidden;
  overscroll-behavior: none;
}

.round-results-modal .reb-grid {
  display: grid;
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
  margin: 0;
}

.round-results-modal .reb-grid.is-single-side {
  grid-template-columns: minmax(0, 420px);
  justify-content: center;
}

.round-results-modal .reb-grid .round-end-row {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  align-items: stretch;
  padding: 0 8px 7px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    var(--panel);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.round-results-modal .reb-grid .round-end-row.is-own-side {
  border-color: rgba(201, 169, 97, 0.52);
}

.round-results-modal .reb-grid .round-end-row.is-round-winner {
  border-color: rgba(255, 215, 0, 0.72);
  box-shadow:
    0 9px 24px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(255, 215, 0, 0.1);
}

.round-results-modal .reb-grid .round-end-row.is-round-winner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.16);
}

.round-results-modal .round-end-row .reb-head {
  display: flex;
  min-height: 33px;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  margin: 0 -8px 5px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, 0.2);
}

.round-results-modal .round-end-row .reb-head strong {
  overflow: hidden;
  color: var(--ivory);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.round-results-modal .reb-result-badge {
  flex: 0 0 auto;
  max-width: 70%;
  padding: 2px 5px;
  overflow: hidden;
  border: 1px solid rgba(255, 215, 0, 0.34);
  border-radius: 999px;
  background: rgba(255, 215, 0, 0.1);
  color: var(--gold-bright);
  font-family: 'Cairo', sans-serif;
  font-size: 0.52rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.round-results-modal .is-round-draw .reb-result-badge {
  border-color: rgba(255, 248, 231, 0.22);
  background: rgba(255, 248, 231, 0.07);
  color: rgba(255, 248, 231, 0.82);
}

.round-results-modal .reb-score-stack {
  display: grid;
  gap: 4px;
  margin-bottom: 5px;
}

.round-results-modal .reb-explanation {
  margin: 0;
  padding: 4px 6px;
  border-inline-start: 2px solid var(--gold);
  color: var(--ivory);
  background: rgba(0, 0, 0, 0.18);
  font-size: 0.68rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.round-results-modal .reb-total-block,
.round-results-modal .reb-round-block {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  border-radius: 9px;
}

.round-results-modal .reb-total-block {
  min-height: 42px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 215, 0, 0.28);
  background:
    linear-gradient(110deg, rgba(255, 215, 0, 0.14), rgba(201, 169, 97, 0.035));
}

.round-results-modal .reb-total-block .reb-score-label {
  color: rgba(255, 248, 231, 0.72);
  font-size: 0.64rem;
  line-height: 1.25;
}

.round-results-modal .reb-total-block strong {
  color: var(--gold-bright);
  font-family: 'Reem Kufi', sans-serif;
  font-size: clamp(1.45rem, 5.5vw, 2rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 0 18px rgba(255, 215, 0, 0.2);
}

.round-results-modal .reb-round-block {
  min-height: 30px;
  padding: 3px 8px;
  border: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, 0.2);
}

.round-results-modal .round-end-row .reb-headline-label {
  min-width: 0;
  color: rgba(255, 248, 231, 0.68);
  font-family: 'Cairo', sans-serif;
  font-size: 0.6rem;
  line-height: 1.25;
}

.round-results-modal .round-end-row .reb-headline-pts {
  max-width: 66%;
  overflow: hidden;
  color: var(--ivory);
  font-family: 'Reem Kufi', sans-serif;
  font-size: clamp(0.92rem, 3.6vw, 1.25rem);
  font-weight: 900;
  line-height: 1.1;
  direction: initial;
  text-overflow: ellipsis;
  unicode-bidi: plaintext;
  white-space: nowrap;
}

.round-results-modal .round-end-row .reb-headline-pts[data-result-score] {
  flex-shrink: 0;
  max-width: none;
  color: var(--gold-bright);
  line-height: 1.4;
  direction: ltr;
  font-variant-numeric: tabular-nums;
}

.round-results-modal .round-end-row .reb-headline-pts:not([data-result-score]) {
  font-size: 0.72rem;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}

.round-results-modal .reb-capture-summary {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  min-height: 50px;
  align-items: center;
  gap: 5px;
  margin: 0 0 5px;
  padding: 4px 5px;
  border: 1px solid rgba(201, 169, 97, 0.18);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(31, 77, 58, 0.22), rgba(0, 0, 0, 0.16));
}

.round-results-modal .reb-capture-fan {
  position: relative;
  width: 58px;
  height: 42px;
  justify-self: center;
}

.round-results-modal .reb-capture-fan .reb-captured-card {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 50%;
  width: 27px !important;
  min-width: 27px;
  height: 38px !important;
  margin-inline-start: -13px;
  padding: 0 !important;
  overflow: hidden;
  pointer-events: none;
  transform:
    translate(var(--reb-card-x, 0), var(--reb-card-y, 0))
    rotate(var(--reb-card-rot, 0));
  transform-origin: 50% 105%;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.34));
}

.round-results-modal .reb-capture-fan .reb-captured-card .card-face {
  border-radius: 4px;
}

.round-results-modal .reb-capture-fan .reb-captured-card .hayya-ribbon {
  display: none;
}

.round-results-modal .reb-captured-placeholder {
  display: grid;
  place-items: center;
  border: 1px solid rgba(8, 10, 18, 0.18);
  border-radius: 4px;
  background: linear-gradient(155deg, #fffdf7, #e8dcc4);
  color: #171923;
  font-family: Georgia, serif;
  font-size: 0.8rem;
  font-weight: 800;
}

.round-results-modal .reb-captured-placeholder:nth-child(1),
.round-results-modal .reb-captured-placeholder:nth-child(3) {
  color: var(--red-bright);
}

.round-results-modal .reb-capture-count {
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: 0;
  z-index: 8;
  display: grid;
  min-width: 21px;
  height: 21px;
  place-items: center;
  padding: 0 4px;
  border: 2px solid var(--midnight);
  border-radius: 999px;
  background: var(--gold-bright);
  color: var(--midnight-deep);
  font-family: 'Reem Kufi', sans-serif;
  font-size: 0.62rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.round-results-modal .reb-capture-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: 1.2;
}

.round-results-modal .reb-capture-label {
  color: var(--gold);
  font-size: 0.55rem;
  font-weight: 700;
}

.round-results-modal .reb-capture-copy strong {
  overflow: hidden;
  color: var(--ivory);
  font-family: 'Reem Kufi', sans-serif;
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.round-results-modal .reb-capture-copy small {
  overflow: hidden;
  color: rgba(255, 248, 231, 0.66);
  font-size: 0.52rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.round-results-modal .reb-details-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3px 3px;
  color: rgba(255, 248, 231, 0.56);
  font-size: 0.54rem;
  font-weight: 700;
}

.round-results-modal .round-end-row .reb-chips {
  display: grid;
  gap: 3px;
  margin: 0;
}

.round-results-modal .reb-chips .reb-line {
  display: grid;
  min-width: 0;
  min-height: 28px;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  padding: 3px 5px;
  border-color: rgba(255, 248, 231, 0.09);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.035);
}

.round-results-modal .reb-chips .reb-line-mark {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid rgba(255, 248, 231, 0.12);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.2);
  color: rgba(255, 248, 231, 0.64);
  font-size: 0.58rem;
}

.round-results-modal .reb-chips .reb-line-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.round-results-modal .reb-chips .reb-line-label,
.round-results-modal .reb-chips .reb-line-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.round-results-modal .reb-chips .reb-line-label {
  color: rgba(255, 248, 231, 0.9);
  font-family: 'Cairo', sans-serif;
  font-size: 0.64rem;
  font-weight: 800;
  line-height: 1.15;
}

.round-results-modal .reb-chips .reb-line-meta {
  color: rgba(255, 248, 231, 0.62);
  font-size: 0.5rem;
  line-height: 1.15;
}

.round-results-modal .reb-chips .reb-line-pts {
  min-width: 22px;
  color: var(--gold-bright);
  font-family: 'Reem Kufi', sans-serif;
  font-size: 0.76rem;
  text-align: end;
}

.round-results-modal .reb-chips .reb-line-pts.dim {
  color: rgba(255, 248, 231, 0.58);
}

.round-results-modal .reb-chips .reb-line.is-won {
  border-color: rgba(201, 169, 97, 0.36);
  background: linear-gradient(110deg, rgba(255, 215, 0, 0.11), rgba(201, 169, 97, 0.035));
}

.round-results-modal .reb-chips .reb-line.is-won .reb-line-mark {
  border-color: rgba(255, 215, 0, 0.32);
  background: rgba(255, 215, 0, 0.11);
  color: var(--gold-bright);
}

.round-results-modal .reb-chips .reb-line.is-lost {
  border-style: dashed;
}

.round-results-modal .reb-chips .reb-line.is-scopa {
  border-color: rgba(120, 220, 130, 0.42);
  background: linear-gradient(110deg, rgba(31, 77, 58, 0.55), rgba(31, 77, 58, 0.12));
}

.round-results-modal .reb-chips .reb-line.is-penalty {
  border-color: rgba(220, 40, 60, 0.42);
  background: linear-gradient(110deg, rgba(139, 38, 53, 0.46), rgba(139, 38, 53, 0.1));
}

.round-results-modal .reb-legend {
  display: none;
}

.round-results-modal .round-end-ready {
  flex: 0 0 auto;
  margin: 6px 0 0;
  padding: 5px 6px;
  border-color: var(--line);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.24);
}

.round-results-modal .round-end-ready .reb-ready-title {
  margin-bottom: 3px;
  color: var(--ivory);
  font-size: 0.62rem;
  line-height: 1.2;
  text-align: center;
}

.round-results-modal .round-end-ready .reb-ready-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
}

.round-results-modal .round-end-ready .reb-ready-row {
  min-width: 0;
  min-height: 26px;
  padding: 2px 5px;
  border-style: solid;
}

.round-results-modal .round-end-ready .reb-ready-name {
  overflow: hidden;
  font-family: 'Cairo', sans-serif;
  font-size: 0.58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.round-results-modal .round-results-actions {
  flex: 0 0 auto;
  margin: 0;
  padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line-soft);
  background: rgba(7, 8, 18, 0.97);
}

.round-results-modal .round-results-actions[hidden] {
  display: none !important;
}

.round-results-modal .round-results-actions .btn-primary {
  width: min(100%, 360px);
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid rgba(255, 238, 140, 0.42);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--midnight-deep);
  font-size: 0.84rem;
  letter-spacing: 0;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.28);
}

.round-results-modal .round-results-actions .btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 9px 22px rgba(0, 0, 0, 0.32), 0 0 16px rgba(255, 215, 0, 0.13);
}

.round-results-modal .round-results-actions .btn-primary:focus-visible {
  outline: 3px solid var(--ivory);
  outline-offset: 2px;
}

.round-results-modal .round-results-actions .btn-primary:disabled {
  cursor: wait;
  opacity: 0.74;
  background: linear-gradient(180deg, rgba(201, 169, 97, 0.72), rgba(138, 109, 46, 0.72));
  box-shadow: none;
}

/* One calm entrance per round. Ready updates leave these cards mounted,
   so the sequence does not restart while the players confirm. */
.round-results-modal .reb-grid.is-animating:not(.is-visible) > .round-end-row {
  opacity: 0;
  transform: translateY(12px) scale(0.98);
}

.round-results-modal .reb-grid.is-animating.is-visible > .round-end-row {
  animation: reb-result-side-in 480ms var(--mo-ease-out, ease-out) both;
  animation-delay: var(--reb-side-delay, 0ms);
}

.round-results-modal .reb-grid.is-animating.is-visible .reb-captured-card {
  animation: reb-result-card-gather 460ms var(--mo-ease-out, ease-out) both;
  animation-delay: var(--reb-card-delay, 180ms);
}

.round-results-modal .reb-grid.is-animating.is-visible .reb-line {
  animation: reb-result-line-in 300ms var(--mo-ease-out, ease-out) both;
  animation-delay: var(--reb-line-delay, 300ms);
}

.round-results-modal .reb-grid.is-animating.is-visible .is-round-winner {
  animation-name: reb-result-side-in, reb-result-winner-glow;
  animation-duration: 480ms, 700ms;
  animation-timing-function: var(--mo-ease-out, ease-out), ease-out;
  animation-fill-mode: both, both;
}

@keyframes reb-result-side-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes reb-result-card-gather {
  from {
    opacity: 0;
    transform: translate(0, -14px) rotate(0deg) scale(0.8);
  }
  to {
    opacity: 1;
    transform:
      translate(var(--reb-card-x, 0), var(--reb-card-y, 0))
      rotate(var(--reb-card-rot, 0)) scale(1);
  }
}

@keyframes reb-result-line-in {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes reb-result-winner-glow {
  0%, 100% { box-shadow: 0 9px 24px rgba(0, 0, 0, 0.3), 0 0 0 rgba(255, 215, 0, 0); }
  55% { box-shadow: 0 9px 24px rgba(0, 0, 0, 0.3), 0 0 24px rgba(255, 215, 0, 0.19); }
}

@media (max-width: 560px) {
  .round-results-modal {
    border-radius: 17px;
  }

  .round-results-heading {
    padding-inline: 10px;
  }

  .round-results-modal .round-results-body {
    padding: 6px;
  }

  .round-results-modal .reb-grid {
    gap: 5px;
  }

  .round-results-modal .reb-grid .round-end-row {
    padding-inline: 5px;
    border-radius: 11px;
  }

  .round-results-modal .round-end-row .reb-head {
    margin-inline: -5px;
    padding-inline: 5px;
  }

  .round-results-modal .reb-total-block,
  .round-results-modal .reb-round-block {
    padding-inline: 5px;
  }

  .round-results-modal .reb-capture-summary {
    grid-template-columns: 54px minmax(0, 1fr);
    padding-inline: 3px;
  }

  .round-results-modal .reb-capture-fan {
    width: 51px;
  }

  .round-results-modal .reb-chips .reb-line {
    grid-template-columns: 18px minmax(0, 1fr) auto;
    gap: 3px;
    padding-inline: 3px;
  }

  .round-results-modal .reb-chips .reb-line-mark {
    width: 18px;
    height: 18px;
  }

  .round-results-modal .round-results-actions {
    padding-inline: 6px;
  }

  .round-results-modal .round-results-actions .btn-primary {
    width: 100%;
  }
}

/* Keep point explanations and every scoring row ahead of decorative cards. */
@media (max-height: 640px) {
  .round-results-modal .round-results-kicker,
  .round-results-subtitle,
  .round-results-modal .reb-capture-summary {
    display: none;
  }
}

/* Short and landscape screens trade decorative capture detail for a
   two-column category grid. Every score stays visible without scrolling. */
@media (max-height: 520px) {
  .round-results-heading {
    padding-block: 7px 5px;
  }

  .round-results-modal .reb-details-head {
    display: none;
  }

  .round-results-modal .round-results-body {
    padding-block: 5px;
  }

  .round-results-modal .reb-grid .round-end-row {
    padding-bottom: 5px;
  }

  .round-results-modal .round-end-row .reb-head {
    min-height: 28px;
  }

  .round-results-modal .reb-score-stack {
    margin-bottom: 4px;
  }

  .round-results-modal .reb-total-block,
  .round-results-modal .reb-round-block {
    min-height: 35px;
    padding-block: 2px;
  }

  .round-results-modal .reb-total-block strong {
    font-size: 1.25rem;
  }

  .round-results-modal .round-end-row .reb-headline-label,
  .round-results-modal .reb-total-block .reb-score-label {
    font-size: 0.54rem;
  }

  .round-results-modal .round-end-row .reb-headline-pts {
    font-size: 0.78rem;
  }

  .round-results-modal .round-end-row .reb-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .round-results-modal .reb-chips .reb-line {
    min-height: 27px;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .round-results-modal .reb-chips .reb-line-mark,
  .round-results-modal .reb-chips .reb-line-meta {
    display: none;
  }

  .round-results-modal .round-end-ready {
    margin-top: 4px;
    padding-block: 3px;
  }

  .round-results-modal .round-end-ready .reb-ready-title {
    display: none;
  }

  .round-results-modal .round-results-actions {
    padding-block: 4px;
  }
}

@media (max-height: 520px) and (min-width: 600px) {
  .round-results-modal .round-end-ready .reb-ready-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .round-results-modal,
  .round-results-modal *,
  .round-results-modal *::before,
  .round-results-modal *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Per-player ping chip — small colored-dot + ms badge appended to
   each profile tile in PvP/team_2v2. Painted by paintPingChips()
   from `peer_pings` populated via the `player_ping` socket broadcast.
   Bot seats and vs_ai games render no chip. */
.ping-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  margin-top: 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(201, 169, 97, 0.22);
  font-family: 'Reem Kufi', 'Cairo', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 248, 231, 0.82);
  font-feature-settings: "tnum";
  /* Non-interactive — purely informational. */
  pointer-events: none;
  user-select: none;
}
.ping-chip .ping-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #888;
  flex-shrink: 0;
}
.ping-chip[data-quality="good"] .ping-dot  { background: #34c759; box-shadow: 0 0 6px rgba(52, 199, 89, 0.5); }
.ping-chip[data-quality="ok"]   .ping-dot  { background: #ffcc00; box-shadow: 0 0 6px rgba(255, 204, 0, 0.45); }
.ping-chip[data-quality="poor"] .ping-dot  { background: #ff6b6b; box-shadow: 0 0 6px rgba(255, 107, 107, 0.5); }
.ping-chip[data-quality="stale"] { opacity: 0.5; }
.ping-chip[data-quality="stale"] .ping-dot { background: #555; box-shadow: none; }
.ping-chip .ping-ms {
  letter-spacing: 0.2px;
}

/* ── Compact spectator banner (replaces the old full-width top
   bar that covered the bot's profile). Pinned to the bottom-left
   corner with a small leave button + a live ping readout the
   spectator wouldn't otherwise see (their RTT isn't broadcast to
   any seat). */
#spectator-banner .sb-label {
  font-weight: 700;
  white-space: nowrap;
}
#spectator-banner .sb-ping {
  font-feature-settings: "tnum";
  opacity: 0.85;
  white-space: nowrap;
}
#spectator-banner .sb-ping[hidden] { display: none; }
#spectator-banner .sb-leave {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 248, 231, 0.4);
  background: rgba(0, 0, 0, 0.28);
  color: #fff8e7;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
#spectator-banner .sb-leave:hover {
  background: rgba(0, 0, 0, 0.5);
}

/* ── Live spectator count chip — lives in the deck-column's natural
   flow below the round-info text ("الجولة N — الهدف M"). Painted
   by the `spectator_count` socket event. Hidden when no one's
   watching so the table stays clean in private matches.

   Inline (not fixed-positioned) so it cannot overlap the X /
   الجولات buttons or the bot's captures pile. The deck-column
   already has reserved vertical space below the round-info that
   the chip slots into cleanly. */
.spectator-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 6px;
  padding: 4px 10px;
  min-height: 24px;
  background: rgba(0, 0, 0, 0.42);
  color: #fff8e7;
  border: 1px solid rgba(201, 169, 97, 0.35);
  border-radius: 999px;
  font-family: 'Reem Kufi', 'Cairo', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  font-feature-settings: "tnum";
  pointer-events: none;
  user-select: none;
  /* Center within the narrow deck-column. */
  align-self: center;
}
.spectator-chip[hidden] { display: none !important; }
.spectator-chip .sc-icon {
  font-size: 0.95rem;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  line-height: 1;
}
@media (max-width: 500px) {
  .spectator-chip {
    min-height: 22px;
    padding: 3px 8px;
    font-size: 0.72rem;
    margin-top: 4px;
  }
  .spectator-chip .sc-icon { font-size: 0.85rem; }
}

/* ── Previous-rounds trigger — pinned to the FAR right corner,
   mirror-balanced with the forfeit X on the far left. Same vertical
   line, opposite horizontal edge. Hidden until at least one round
   has completed. Tappable — 44px touch target on mobile. The
   detailed breakdown lives behind the tap; nothing categorised is
   rendered on the table itself. */
.prev-rounds-btn {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  min-height: 32px;
  background: rgba(0, 0, 0, 0.55);
  color: var(--libyan-gold-bright, #f5e1a8);
  border: 1px solid rgba(201, 169, 97, 0.45);
  border-radius: 999px;
  font-family: 'Reem Kufi', 'Cairo', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, transform 120ms ease;
}
.prev-rounds-btn[hidden] { display: none !important; }
.prev-rounds-btn:hover {
  background: rgba(0, 0, 0, 0.7);
  border-color: rgba(255, 215, 0, 0.6);
}
.prev-rounds-btn:active { transform: scale(0.97); }
.prev-rounds-btn:focus-visible {
  outline: 2px solid rgba(255, 215, 0, 0.7);
  outline-offset: 2px;
}
.prev-rounds-btn .prb-icon {
  font-size: 0.95rem;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  line-height: 1;
}
.prev-rounds-btn .prb-label {
  white-space: nowrap;
  font-feature-settings: "tnum";
}
/* Mobile: ≥44px touch target. Forfeit X also moves to top:8px at
   this breakpoint — keep both buttons vertically aligned.
   The bot's captures-pile (`#bot-captures-pile`) sits at the same
   right edge directly below this button, so on narrow screens we
   drop the label and keep the icon only — a 44px circular button
   that doesn't crowd the pile's "فاضي" placeholder. */
@media (max-width: 500px) {
  .prev-rounds-btn {
    top: 8px;
    right: 8px;
    min-height: 44px;
    width: 44px;
    padding: 0;
    font-size: 0.85rem;
    justify-content: center;
    /* Circular icon-only button on mobile. */
    border-radius: 50%;
    gap: 0;
  }
  .prev-rounds-btn .prb-label { display: none; }
  .prev-rounds-btn .prb-icon { font-size: 1.15rem; }
}

/* ── (Legacy) Previous-round pill — distinctive surface on each profile tile.
   Three slots: round-number label, colored delta badge, and up to 3
   small category icons. Visually different from live score chips
   (icon strip + softer pill shape + secondary palette). Tappable
   ≥44px touch target on mobile.

   Layout: three inline flex children, no wrap on desktop, optional
   wrap on very narrow profiles. */
.prev-round-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 8px;
  margin-top: 6px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.5), rgba(40, 28, 8, 0.4));
  border: 1px solid rgba(201, 169, 97, 0.35);
  color: var(--libyan-gold-bright, #f5e1a8);
  font-family: 'Reem Kufi', 'Cairo', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, transform 120ms ease, box-shadow 200ms ease;
  font-feature-settings: "tnum";
  align-self: stretch;
  flex-wrap: wrap;
  text-align: center;
  position: relative;
}
.prev-round-pill::before {
  /* Bookend ribbon icon to anchor the pill visually as "history" */
  content: '📜';
  font-size: 0.85rem;
  opacity: 0.85;
  flex-shrink: 0;
}
.prev-round-pill:hover {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.65), rgba(70, 48, 12, 0.55));
  border-color: rgba(255, 215, 0, 0.55);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.prev-round-pill:active {
  transform: scale(0.97);
}
.prev-round-pill:focus-visible {
  outline: 2px solid rgba(255, 215, 0, 0.7);
  outline-offset: 2px;
}
.prev-round-pill.is-forfeit {
  border-color: rgba(220, 38, 38, 0.55);
}
.prev-round-pill .prp-label {
  font-size: 0.74rem;
  color: rgba(255, 248, 231, 0.85);
  flex-shrink: 0;
}
.prev-round-pill .prp-delta {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.85rem;
  font-feature-settings: "tnum";
  flex-shrink: 0;
}
.prev-round-pill .prp-delta.is-positive {
  background: rgba(52, 199, 89, 0.18);
  border: 1px solid rgba(52, 199, 89, 0.55);
  color: #b8f5c8;
}
.prev-round-pill .prp-delta.is-forfeit {
  background: rgba(220, 38, 38, 0.18);
  border: 1px solid rgba(220, 38, 38, 0.55);
  color: #ffb4b4;
}
.prev-round-pill .prp-icons {
  display: inline-flex;
  gap: 3px;
  flex-shrink: 0;
}
.prev-round-pill .prp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 0.78rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  /* Keep emoji rendering crisp; some Windows fonts need the fallback. */
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
/* Mobile (≤480px): bigger touch target, slightly larger text. */
@media (max-width: 480px) {
  .prev-round-pill {
    min-height: 44px;
    padding: 6px 10px;
    font-size: 0.85rem;
    gap: 8px;
  }
  .prev-round-pill .prp-delta {
    font-size: 0.95rem;
    padding: 3px 10px;
  }
  .prev-round-pill .prp-icon {
    width: 22px;
    height: 22px;
    font-size: 0.95rem;
  }
}
/* The pill is intentionally still visible in `hidden` points mode —
   the data it shows (last round's delta) was already revealed in
   the hidden-mode round-end modal. No privacy concern. */

/* ── Previous-round history ────────────────────────────────────────
   A page-at-a-time scoreboard. The fixed pager replaces the long row
   of round chips, so neither axis ever needs an inner scrollbar. */
.round-history-modal {
  width: min(calc(100vw - 12px), 760px);
  max-width: 760px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% -15%, rgba(201, 169, 97, 0.12), transparent 38%),
    linear-gradient(180deg, rgba(16, 17, 31, 0.995), rgba(7, 8, 18, 0.995));
  box-shadow: var(--shadow), 0 0 44px rgba(201, 169, 97, 0.12);
}

.round-history-modal[open] {
  display: flex;
  height: fit-content;
  max-height: min(calc(100dvh - 12px), 720px);
  flex-direction: column;
}

.round-history-modal::backdrop {
  background: rgba(2, 3, 8, 0.9);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.round-history-heading {
  flex: 0 0 auto;
  padding: 8px 18px 7px;
  text-align: center;
  border-bottom: 1px solid var(--line-soft);
  background:
    linear-gradient(110deg, rgba(139, 38, 53, 0.1), transparent 42%),
    linear-gradient(250deg, rgba(31, 77, 58, 0.13), transparent 42%);
}

.round-history-kicker {
  margin: 0;
  color: var(--gold);
  font-family: 'Reem Kufi', 'Cairo', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
}

.round-history-heading .modal-title {
  margin: 0;
  color: var(--ivory);
  font-size: clamp(1.1rem, 3.5vw, 1.4rem);
  line-height: 1.25;
}

.round-history-heading p:last-child {
  margin: 1px 0 0;
  color: rgba(255, 248, 231, 0.66);
  font-size: 0.63rem;
  line-height: 1.35;
}

#prev-round-modal #prev-round-body {
  display: flex;
  min-height: 0;
  flex: 0 1 auto;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 7px 9px;
  overflow: hidden;
  overscroll-behavior: none;
}

.prm-round-nav {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: minmax(72px, 0.7fr) minmax(112px, 1fr) minmax(72px, 0.7fr);
  align-items: center;
  gap: 6px;
}

.prm-nav-btn {
  min-width: 0;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid rgba(201, 169, 97, 0.34);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.26);
  color: var(--ivory);
  font-family: 'Reem Kufi', 'Cairo', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}

.prm-nav-btn:hover:not(:disabled),
.prm-nav-btn:focus-visible {
  border-color: var(--gold-bright);
  background: rgba(201, 169, 97, 0.14);
}

.prm-nav-btn:focus-visible {
  outline: 2px solid var(--ivory);
  outline-offset: 2px;
}

.prm-nav-btn:disabled {
  cursor: default;
  opacity: 0.35;
}

.prm-round-position {
  overflow: hidden;
  color: var(--gold-bright);
  font-family: 'Reem Kufi', 'Cairo', sans-serif;
  font-size: 0.78rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prm-sides {
  display: grid;
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  align-items: stretch;
}

.prm-side {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  padding: 0 7px 7px;
  overflow: hidden;
  border: 1px solid rgba(201, 169, 97, 0.22);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.18));
}

.prm-side.is-mine {
  border-color: rgba(120, 200, 100, 0.34);
  background: linear-gradient(180deg, rgba(31, 77, 58, 0.3), rgba(0, 0, 0, 0.2));
}

.prm-side.is-forfeit {
  border-color: rgba(220, 38, 38, 0.42);
  background: linear-gradient(180deg, rgba(70, 14, 14, 0.32), rgba(0, 0, 0, 0.22));
}

.prm-side-head {
  min-height: 31px;
  margin: 0 -7px 5px;
  padding: 5px 7px;
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, 0.2);
  color: rgba(255, 248, 231, 0.85);
  font-family: 'Reem Kufi', 'Cairo', sans-serif;
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prm-side-name {
  color: var(--gold-bright);
  font-weight: 800;
}

.prm-side.is-mine .prm-side-name {
  color: #b8f5c8;
}

.prm-side.is-forfeit .prm-side-name {
  color: #ffb4b4;
}

.prm-score-stack {
  display: grid;
  gap: 4px;
  margin-bottom: 6px;
}

.prm-total-block,
.prm-round-block {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 4px 7px;
  border-radius: 9px;
}

.prm-total-block {
  min-height: 43px;
  border: 1px solid rgba(255, 215, 0, 0.26);
  background: linear-gradient(110deg, rgba(255, 215, 0, 0.13), rgba(201, 169, 97, 0.03));
}

.prm-round-block {
  min-height: 31px;
  border: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, 0.2);
}

.prm-score-label {
  min-width: 0;
  color: rgba(255, 248, 231, 0.7);
  font-family: 'Cairo', sans-serif;
  font-size: 0.6rem;
  line-height: 1.2;
}

.prm-score-total,
.prm-score-round {
  overflow: hidden;
  color: var(--gold-bright);
  font-family: 'Reem Kufi', 'Cairo', sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prm-score-total {
  font-size: clamp(1.4rem, 5vw, 1.9rem);
}

.prm-score-round {
  max-width: 68%;
  color: var(--ivory);
  font-size: 0.84rem;
}

.prm-side.is-forfeit .prm-score-round {
  color: #ffb4b4;
}

.breakdown-chips.prm-chips-row {
  display: grid;
  min-height: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
}

.breakdown-chips.prm-chips-row .chip {
  display: flex;
  min-width: 0;
  min-height: 39px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 3px 2px;
  overflow: hidden;
  border-radius: 8px;
}

.breakdown-chips.prm-chips-row .chip b {
  font-size: 0.78rem;
  line-height: 1;
}

.breakdown-chips.prm-chips-row .chip small {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.52rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breakdown-chips.prm-chips-row .chip.permanent,
.breakdown-chips.prm-chips-row .prm-cats-empty {
  grid-column: 1 / -1;
}

.breakdown-chips.prm-chips-row .chip.permanent {
  min-height: 32px;
  padding-inline: 6px;
}

.prm-cats-empty {
  display: grid;
  min-height: 44px;
  place-items: center;
  padding: 6px;
  border: 1px dashed rgba(255, 248, 231, 0.12);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  color: rgba(255, 248, 231, 0.62);
  font-family: 'Reem Kufi', 'Cairo', sans-serif;
  font-size: 0.65rem;
  line-height: 1.35;
  text-align: center;
}

.prm-foot {
  flex: 0 0 auto;
  margin-top: 0;
  padding: 5px 8px;
  border: 1px solid rgba(201, 169, 97, 0.25);
  border-radius: 9px;
  background: rgba(201, 169, 97, 0.1);
  color: var(--gold-bright);
  font-family: 'Reem Kufi', 'Cairo', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}

.prm-foot.is-draw {
  border-color: rgba(255, 248, 231, 0.22);
  background: rgba(255, 248, 231, 0.07);
  color: var(--ivory);
}

.round-history-actions {
  flex: 0 0 auto;
  margin: 0;
  padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line-soft);
  background: rgba(7, 8, 18, 0.97);
}

.round-history-actions .btn-secondary {
  width: min(100%, 320px);
  min-height: 44px;
  padding: 8px 18px;
  border-radius: 12px;
  font-size: 0.82rem;
}

@media (max-width: 520px) {
  .round-history-modal {
    border-radius: 17px;
  }

  #prev-round-modal #prev-round-body {
    gap: 5px;
    padding-inline: 6px;
  }

  .prm-round-nav {
    grid-template-columns: minmax(64px, 0.65fr) minmax(104px, 1fr) minmax(64px, 0.65fr);
    gap: 4px;
  }

  .prm-sides {
    gap: 5px;
  }

  .prm-side {
    padding-inline: 5px;
    border-radius: 10px;
  }

  .prm-side-head {
    margin-inline: -5px;
    padding-inline: 5px;
  }

  .prm-total-block,
  .prm-round-block {
    padding-inline: 5px;
  }

  .breakdown-chips.prm-chips-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
  }

  .breakdown-chips.prm-chips-row .chip {
    min-height: 34px;
  }

  .round-history-actions {
    padding-inline: 6px;
  }

  .round-history-actions .btn-secondary {
    width: 100%;
  }
}

@media (max-height: 520px) {
  .round-history-heading {
    padding-block: 5px 4px;
  }

  .round-history-kicker,
  .round-history-heading p:last-child {
    display: none;
  }

  #prev-round-modal #prev-round-body {
    gap: 5px;
    padding-block: 5px;
  }

  .prm-score-stack {
    margin-bottom: 4px;
  }

  .prm-side-head {
    min-height: 27px;
    padding-block: 3px;
  }

  .prm-total-block,
  .prm-round-block {
    min-height: 29px;
    padding-block: 2px;
  }

  .prm-score-total {
    font-size: 1.1rem;
  }

  .prm-score-label {
    font-size: 0.53rem;
  }

  .breakdown-chips.prm-chips-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .breakdown-chips.prm-chips-row .chip {
    min-height: 27px;
  }

  .breakdown-chips.prm-chips-row .chip.permanent,
  .prm-cats-empty {
    min-height: 29px;
  }

  .round-history-actions {
    padding-block: 4px;
  }
}

@media (max-height: 520px) and (min-width: 600px) {
  .breakdown-chips.prm-chips-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .breakdown-chips.prm-chips-row .chip.permanent {
    grid-column: auto;
    min-height: 27px;
    padding-inline: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .round-history-modal,
  .round-history-modal * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* ── Game-end per-round summary. Lives inside an accordion in the
   end-modal so it doesn't bloat the modal on first paint. Each row
   shows the per-side delta + cumulative-after. The last row (`is-
   final`) is the grand total which matches the scoreline above. */
.game-modal .end-modal-rounds-wrap {
  margin: 8px 0 0;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(201, 169, 97, 0.22);
  border-radius: 10px;
  font-family: 'Reem Kufi', 'Cairo', sans-serif;
}
/* 2026-05-28 points-UX: the rounds list is no longer a <details>
   accordion — it's always visible (owner: "خاصة الجولات كاملة"). This
   is now a plain heading above the round-by-round table. */
.game-modal .end-modal-rounds-title {
  margin: 0 0 4px;
  color: var(--libyan-gold-bright, #f5e1a8);
  font-size: 0.95rem;
  font-weight: 800;
  font-family: 'Reem Kufi', 'Cairo', sans-serif;
}
.game-modal .end-modal-rounds {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
  /* Mobile bonus: the modal itself scrolls; this gives a second
     nested scroll for very long histories without making the
     modal grow taller than the viewport. */
}
.game-modal .game-end-round-row {
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  font-size: 0.85rem;
  color: rgba(255, 248, 231, 0.92);
}
.game-modal .game-end-round-row.is-final {
  border-color: rgba(201, 169, 97, 0.45);
  background: rgba(31, 47, 24, 0.32);
  color: var(--libyan-gold-bright, #f5e1a8);
}
.game-modal .game-end-round-row .ger-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.game-modal .game-end-round-row .ger-rnum {
  font-weight: 700;
  color: var(--libyan-gold-bright, #f5e1a8);
}
.game-modal .game-end-round-row .ger-deltas {
  font-feature-settings: "tnum";
}
.game-modal .game-end-round-row .ger-mine.is-winner,
.game-modal .game-end-round-row .ger-opp.is-winner {
  color: #f7d56b;
  font-weight: 700;
}
.game-modal .game-end-round-row .ger-sep {
  margin: 0 6px;
  color: rgba(255, 248, 231, 0.4);
}
.game-modal .game-end-round-row .ger-cumulative {
  margin-top: 4px;
  font-size: 0.78rem;
  color: rgba(255, 248, 231, 0.7);
  font-feature-settings: "tnum";
}
.game-modal .game-end-round-row .ger-cumulative strong {
  color: rgba(255, 248, 231, 0.95);
}

/* Itemized detail for the DECIDING (final) round — appended under that
   round's row in the game-end summary so each side sees its category
   breakdown (especially the شكبة) instead of only a bare +N delta. The
   match-ending round skips the round-end breakdown modal, so this is the
   only place a loser sees their scopa credited (player feedback
   2026-06-21). Reuses the .reb-line chip styles; only the container + the
   per-seat name need layout here. */
.game-modal .ger-itemized {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 6px;
  padding-top: 8px;
  border-top: 1px dashed rgba(201, 169, 97, 0.28);
}
.game-modal .ger-itemized .ger-seat-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #ffe9a8;
  margin-bottom: 2px;
}
.game-modal .ger-itemized .reb-chips {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* ── 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;
}
.bot-info .bot-status.is-ai-difficulty {
  width: max-content;
  padding: 1px 7px;
  border: 1px solid rgba(201, 169, 97, 0.28);
  border-radius: 999px;
  background: rgba(201, 169, 97, 0.1);
  color: #f4d98f;
  font-weight: 800;
  line-height: 1.35;
}

/* ── 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;
  outline: 3px solid #f7e4a2;
  outline-offset: 3px;
  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;
  animation: none !important;
}

/* Hand-card drag. Pointer Events drive both touch and mouse, while the fixed
   clone escapes the clipped mobile player zone and stays compositor-only. */
.player-hand .card.hand-card {
  touch-action: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
#game-app .player-hand .card.hand-card.drag-pressing {
  transform: translateY(-16px) scale(1.035) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.34), 0 0 28px rgba(255,215,0,0.5) !important;
}
.player-hand .card.hand-card.drag-origin {
  opacity: 0.18 !important;
  filter: saturate(0.55);
}
.card.card-drag-ghost {
  position: fixed !important;
  z-index: 720 !important;
  margin: 0 !important;
  pointer-events: none !important;
  transform-origin: 50% 60%;
  will-change: transform;
  filter: drop-shadow(0 22px 18px rgba(0,0,0,0.46));
  box-shadow: 0 0 0 2px rgba(255,215,0,0.7), 0 0 34px rgba(255,215,0,0.5) !important;
}
.card.card-drag-ghost.is-returning {
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms ease !important;
}

.felt.drag-ready {
  outline: 2px dashed rgba(255,215,0,0.48);
  outline-offset: -8px;
  transition: outline-color 160ms ease, outline-width 160ms ease;
}
.felt.drag-over {
  outline: 4px solid rgba(255,215,0,0.92);
  outline-offset: -9px;
}
.capture-cue {
  position: absolute;
  z-index: 90;
  top: clamp(8px, 2vh, 16px);
  left: 50%;
  width: max-content;
  max-width: calc(100% - 28px);
  padding: 6px 14px;
  border: 1px solid rgba(255,215,0,0.52);
  border-radius: 999px;
  background: rgba(20,14,5,0.92);
  color: #fff4bf;
  box-shadow: 0 8px 22px rgba(0,0,0,0.34);
  font-family: 'Cairo', sans-serif;
  font-size: clamp(10px, 1.3vw, 13px);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
  pointer-events: none;
  transform: translateX(-50%);
  animation: capture-cue-arrive 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.capture-cue[data-kind="forced"] { border-color: rgba(255,120,92,0.78); }
.capture-cue[data-kind="optional"] { border-color: rgba(105,210,255,0.72); }
.capture-cue[hidden] { display: none; }
@keyframes capture-cue-arrive {
  from { opacity: 0; transform: translate(-50%, 7px) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

#table-area .card.capture-preview-candidate {
  outline: 2px solid rgba(105,210,255,0.82) !important;
  outline-offset: 5px !important;
  border-radius: 10px;
  box-shadow: 0 7px 18px rgba(0,0,0,0.4), 0 0 20px rgba(105,210,255,0.38) !important;
  transition: transform 150ms ease, opacity 150ms ease, filter 150ms ease;
}
#table-area .card.capture-preview-target {
  outline: 4px solid var(--libyan-gold-bright) !important;
  outline-offset: 5px !important;
  transform: translateY(-10px) scale(1.075) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,0.48), 0 0 36px rgba(255,215,0,0.82) !important;
  z-index: 65 !important;
}
#table-area.capture-option-focused .card.capture-preview-muted {
  opacity: 0.46;
  filter: saturate(0.55) brightness(0.78);
}
#table-area .card.capture-incompatible {
  opacity: 0.44;
  filter: saturate(0.5) brightness(0.78);
}
#table-area .card.capture-rejected {
  animation: capture-rejected 280ms ease both !important;
}
@keyframes capture-rejected {
  0%, 100% { filter: none; }
  35% { filter: sepia(1) saturate(4) hue-rotate(320deg) brightness(0.82); }
  70% { filter: sepia(1) saturate(3) hue-rotate(320deg) brightness(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  #table-area .card.capture-rejected {
    animation: none !important;
    outline: 3px solid rgba(255,92,92,0.9) !important;
  }
}

/* A static destination glow communicates the last capture without repainting
   box-shadow on every frame for the entire round. */
.captures-pile.last-capturer .cp-top {
  animation: none;
}

.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: split into TWO balanced rows by JS (`.tc-row` children).
   The outer grid stacks the rows vertically; each row centers its
   cards horizontally. This produces the consistent split-row layout
   players expect:
       2 → 1+1    3 → 2+1    4 → 2+2    5 → 3+2    6 → 3+3   etc.

   Fallback: if cards are appended DIRECTLY (during the brief moment
   between a play animation and the next render() repaint), the
   grid's column rule keeps them centered with a wrap fallback so
   nothing visually breaks. */
.table-cards-grid {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: clamp(6px, 1.6vh, 14px);
  /* Generous inner padding keeps cards (and their capture-candidate
     outline + offset, ~8px) clear of the `.felt-inner` rounded
     overflow:hidden boundary. Without this cards near the felt
     corners were clipped. */
  padding: clamp(14px, 2.4vw, 22px);
  width: 100%;
  height: 100%;
  /* Defensive — keep the grid's own children inside its box even if
     a downstream animation transient drops a card a few pixels out. */
  box-sizing: border-box;
}
.table-cards-grid .tc-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: clamp(8px, 2vw, 14px);
  flex-wrap: nowrap;
  width: 100%;
}
/* Fallback for cards inserted by animations before the next render:
   if they end up as direct children of the grid (not inside a .tc-row),
   they still flow centered + wrap so we never get a horizontal scroll. */
.table-cards-grid > .card { margin: 4px; }
.table-cards {
  display: block !important;
  position: absolute;
  inset: 0;
  padding: 0;
}
/* Two table rows must fit inside the 32vh felt on wide, short screens.
   After reserving 60px for grid padding and the row gap, each card gets at
   most half the remaining height. The width guard preserves the 2:3 ratio. */
.table-cards .card {
  width: clamp(
    48px, min(6.4vw, calc(10.6667vh - 20px)), 88px
  ) !important;
  height: clamp(
    72px, min(9.6vw, calc(16vh - 30px)), 132px
  ) !important;
}

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

/* Card faces use a 240x334 SVG viewBox. Match that ratio so the image fills
   the frame without cropping, stretching, or letterbox bands. The game-app
   id intentionally outranks the mode-specific fixed heights below. */
#game-app .card {
  aspect-ratio: 120 / 167;
  height: auto !important;
  background: transparent;
  border: 0;
  overflow: visible;
}

/* ── 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 {
  /* Static gold highlight — no per-frame paint. The old `capture-ring` pulse
     animated `outline-color` + `box-shadow` on EVERY selectable table card for
     the whole turn (~60 repaints/s × N candidates = real mobile heat). A static
     outline + glow marks candidates just as clearly. `animation: none` also
     neutralizes the shadowed `capture-pulse` rule in _new-design.css. */
  animation: none !important;
  outline: 3px solid var(--libyan-gold) !important;
  outline-offset: 5px !important;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,0.45), 0 0 26px rgba(255,215,0,0.6) !important;
}
.card.capture-candidate:hover {
  transform: translateY(-10px) scale(1.06) !important;
  z-index: 50 !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;
  }
  /* Scoring chips can wrap the opponent profile onto a taller row. Let the
     hand cross its grid-track boundary so the card backs stay fully visible. */
  .scene:not([data-mode="team_2v2"]) .bot-zone {
    overflow: visible;
    z-index: 4;
  }
  .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;
    /* ≤800px: card width clamp(38,11vw,64). 18px clears the felt
       border-radius corners + the 8px capture-candidate outline. */
    padding: 18px;
  }
  .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 dimensions are pinned (40x40) in the base rule; only the
     icon size + top offset need tweaking on small viewports. */
  .forfeit-btn { font-size: 13px; top: 8px; }
  .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; }
  /* ≤500px: the felt mobile path has padding:6px + border-radius:12px,
     so cards within ~16px of any corner are clipped by the rounded
     .felt-inner overflow:hidden boundary. Plus the 8px capture-
     candidate outline ring widens the visible card footprint.
     16px of inner padding clears both. */
  .table-cards-grid { padding: 16px; gap: 4px 6px; }
  .turn-badge { padding: 3px 10px; font-size: 10px; top: 4px; }
  /* Dimensions stay 40x40 (touch target). Only icon size + top offset shift. */
  .forfeit-btn { font-size: 12px; top: 4px; }
  /* 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; }
}

/* ── 1v1 phone card enlargement (2026-07-06, player feedback:
   «الكارطة صغيرة في 1 ضد 1») ──
   Scoped to :not(team_2v2) so the separately-tuned 2v2 mobile block in
   _new-design.css stays byte-identical, and to ≤500px because 501px+
   already reaches the 72×108 caps. Placed AFTER the generic ≤500 block
   so equal-importance rules win on source order + specificity.

   Budget math (measured live at 375×667 before the change):
   * The hand row was using ~170 of 367px — the player's readable cards
     get the spare width: 53×79 → ~64×96 (+21%). Three-card hands:
     3×68 + gaps ≈ 220 « 367.
   * The bot's face-down backs DON'T grow — they carry no information,
     and keeping them small is what frees the vertical budget (standard
     card-game hierarchy: opponent backs subordinate to your hand).
   * Table cards 45×68 → ~52×78 (+16%); the deck column shrinks 80→56
     (it holds a 42px-wide deck), widening the felt 263 → ~291 so a
     4-per-row busy table (7-8 cards) fits: 4×52 + gaps + padding ≈ 258
     + capture-outline 16 ≈ 274 ≤ 291. The 5-per-row extreme (9-10
     table cards) clips the outer cards' edge a few px — the SAME
     accepted behaviour as before the change (it clipped 18px at the
     old sizes with the narrower felt).
   * Scene rows 210/1fr/210 → 210/1fr/228: the player zone's +18 comes
     out of the felt row's measured 27px of slack; two table rows of
     78 need 180 ≤ the felt's remaining ~200. Bot zone untouched (its
     unchanged backs still fit 210 exactly). */
@media (max-width: 500px) {
  .scene:not([data-mode="team_2v2"]) { grid-template-rows: 210px 1fr 228px; }
  .scene:not([data-mode="team_2v2"]) .player-hand .card {
    width: clamp(56px, 17vw, 68px) !important;
    height: clamp(84px, 25.5vw, 102px) !important;
  }
  .scene:not([data-mode="team_2v2"]) .player-hand {
    height: clamp(96px, 15vh, 104px) !important;
  }
  .scene:not([data-mode="team_2v2"]) .table-cards .card {
    width: clamp(40px, 14vw, 56px) !important;
    height: clamp(60px, 21vw, 84px) !important;
  }
  /* Crowded-row fallback: a 5-card row (9-10 cards on the table — the
     nobody-captured-for-ages extreme) doesn't fit the bigger size
     (~10px clipped per outer card). Drop just those rows back to the
     old compact size, which fits the widened felt with room to spare.
     `:has` has codebase precedent (body:has(.scene) below). */
  .scene:not([data-mode="team_2v2"]) .tc-row:has(> .card:nth-child(5)) .card {
    width: clamp(34px, 12vw, 45px) !important;
    height: clamp(51px, 18vw, 68px) !important;
  }
  /* Vertical grid padding 16→10: the 16px was corner-radius clip
     protection; rows are horizontally centered so their top/bottom
     edges sit mid-felt, away from the 12px-radius corners. Horizontal
     stays 16. */
  .scene:not([data-mode="team_2v2"]) .table-cards-grid { padding: 10px 16px; }
  .scene:not([data-mode="team_2v2"]) .table-zone {
    grid-template-columns: 56px 1fr 0;
  }
}

/* Mobile hand-selection clearance: bottom-aligning the cards reserves the
   hand row's spare height above them. The smaller lift remains obvious through
   its gold outline without covering the player profile. */
@media (max-width: 800px) {
  .scene:not([data-mode="team_2v2"]) .player-zone .player-hand {
    align-items: flex-end !important;
  }
  .scene:not([data-mode="team_2v2"]) .player-hand .card.selected {
    transform: translateY(-10px) scale(1.03) !important;
    outline: 2px solid rgba(255, 215, 0, 0.9);
    outline-offset: 3px;
  }
}

/* Short-screen guard: a mobile browser toolbar can reduce the usable portrait
   viewport to roughly 568px. Proportional rows keep all three game regions
   inside that dynamic viewport, while compact profile padding gives the hand
   enough room to show each card in full. */
@media (max-width: 500px) and (max-height: 639px) {
  .scene:not([data-mode="team_2v2"]) {
    grid-template-rows: minmax(0, 32fr) minmax(0, 33fr) minmax(0, 35fr);
  }
  .scene:not([data-mode="team_2v2"]) .player-hand {
    height: 80px !important;
  }
  .scene:not([data-mode="team_2v2"]) .player-hand .card {
    width: clamp(48px, 14vw, 72px) !important;
    height: clamp(72px, 21vw, 108px) !important;
  }
  .scene:not([data-mode="team_2v2"]) .table-cards .card {
    width: clamp(34px, 12vw, 54px) !important;
    height: clamp(51px, 18vw, 81px) !important;
  }
  .scene:not([data-mode="team_2v2"]) .felt {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }
  .scene:not([data-mode="team_2v2"]) .profile-card {
    padding-top: 10px !important;
    padding-bottom: 2px;
  }
  .scene:not([data-mode="team_2v2"]) .profile-card .player-info {
    padding-bottom: 0;
  }
  .scene:not([data-mode="team_2v2"]) .breakdown-chips {
    margin-top: 0;
  }
}

@media (max-width: 500px) and (max-height: 539px) {
  .scene:not([data-mode="team_2v2"]) .breakdown-chips {
    display: none !important;
  }
}

/* ── 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; }
/* `100vh` is the LAYOUT viewport on iOS Safari, which extends UNDER
   the dynamic address-bar/toolbar — fixed elements anchored at 100vh
   sit off-screen when the toolbar is visible, clipping the bottom
   player-hand. `100dvh` is the DYNAMIC viewport that shrinks with the
   toolbar; supported in iOS 15.4+ / Android Chrome 108+ — modern enough
   that the fallback rarely matters, but we keep `100vh` as the safety
   net for older browsers. */
html:has(#game-app),
body:has(#game-app) {
  width: 100%;
  max-width: 100%;
  height: 100%;
  overflow: hidden !important;
  overscroll-behavior: none;
}
body:has(#game-app) {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
}
#game-app {
  width: 100%;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  overflow: clip;
  overscroll-behavior: none;
}
#game-app.has-visual-viewport {
  height: var(--game-visual-height) !important;
  max-height: var(--game-visual-height) !important;
}

/* The table is an interaction surface, not selectable copy. This stops
   long-press/tap drags on player names from painting browser selection.
   Real text fields keep native selection and callouts. */
#game-app,
#game-app * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
#game-app input,
#game-app textarea,
#game-app [contenteditable="true"] {
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
}

/* Player zone always reserves the bottom safe-area, plus a small
   floor so the hand cards can't hug the very bottom edge even when
   the safe-area is 0 (desktop / non-notch devices). The fixed grid
   row at <500px (.scene grid-template-rows: 210px 1fr 210px) now
   subtracts this floor from the hand height, so the cards stay
   inside the visible viewport. */
.player-zone {
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px);
}
@media (max-width: 500px) {
  .player-zone {
    /* A bit more bottom floor on phones — many Android browsers
       have a 56px bottom toolbar that overlaps the layout viewport.
       The dvh swap above handles iOS; this floor catches Android. */
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 12px);
  }
}

/* ── Remove zellij corner ornaments from felt (per user request) ── */
.felt::before,
.felt::after { display: none !important; }
/* Team mode is bounded by the dynamic viewport. Deriving a square felt from
   width made the centre row taller than short screens and pushed both hands
   outside the viewport. */
.scene[data-mode="team_2v2"] {
  position: fixed;
  grid-template-columns: clamp(48px, 15vw, 72px) minmax(0, 1fr) clamp(48px, 15vw, 72px);
  grid-template-rows: auto auto minmax(0, 350px) auto;
  grid-template-areas:
    "communications communications communications"
    "partner partner partner"
    "leftrail felt rightrail"
    "you you you";
  gap: 6px;
  align-content: center;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  padding-top: max(56px, calc(env(safe-area-inset-top, 0px) + 56px));
  /* Keep the physical board from scrolling itself when an edge card receives
     focus; hidden remains the fallback for browsers without clip support. */
  overflow: hidden;
  overflow: clip;
}
.scene[data-mode="team_2v2"] .bot-zone,
.scene[data-mode="team_2v2"] .player-zone {
  min-height: 0;
  overflow: visible;
}
.scene[data-mode="team_2v2"] .bot-zone {
  position: relative;
  padding-top: 6px;
}
.scene[data-mode="team_2v2"] .bot-hand {
  height: auto !important;
  min-height: 0;
  padding-top: 0;
  align-items: center !important;
}
.scene[data-mode="team_2v2"] .player-hand {
  height: auto !important;
  min-height: 0;
  padding: 26px 0 2px;
  align-items: flex-start !important;
  overflow: visible;
}
.scene[data-mode="team_2v2"] .player-zone {
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px);
}

/* Dealer and opener badges are positioned relative to their own side seat. */
.scene[data-mode="team_2v2"] .side-profile {
  position: relative;
  padding-top: 20px;
}
.scene[data-mode="team_2v2"] .side-profile > .profile-badges {
  top: 3px;
  inset-inline: 4px;
  justify-content: center;
  gap: 2px;
}
.scene[data-mode="team_2v2"] .side-pile { margin-bottom: 12px; }

/* One score strip communicates team identity and whose turn it is. Repeated
   numbers on all four profiles added noise without conveying new state. */
.scene[data-mode="team_2v2"] .player-score-row,
.scene[data-mode="team_2v2"] .bot-score-row,
.scene[data-mode="team_2v2"] .side-score-row { display: none !important; }
.scene[data-mode="team_2v2"] #team-scoreline {
  display: flex;
  position: absolute;
  top: 2px;
  left: 50%;
  z-index: 5;
  margin: 0;
  min-height: 24px;
  max-width: calc(100% - 12px);
  padding: 2px 10px;
  gap: 7px;
  transform: translateX(-50%);
}
.scene[data-mode="team_2v2"] #team-scoreline[hidden] { display: none; }
.scene[data-mode="team_2v2"] .team-pill { min-width: 0; }
.scene[data-mode="team_2v2"] .team-pill-label {
  max-width: clamp(42px, 18vw, 150px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scene[data-mode="team_2v2"] .team-turn-label {
  max-width: clamp(72px, 26vw, 210px);
  overflow: hidden;
  padding-inline-start: 7px;
  border-inline-start: 1px solid rgba(201, 169, 97, 0.3);
  color: rgba(255, 248, 231, 0.78);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scene[data-mode="team_2v2"] .team-seat-role {
  color: rgba(255, 248, 231, 0.62);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}
.scene[data-mode="team_2v2"] .team-seat-role[data-role="partner"] { color: #ffe680; }
.scene[data-mode="team_2v2"] .team-seat-role[data-role="opponent"] { color: #ffb0b8; }

/* The felt consumes the bounded middle track instead of growing from its
   width. Three balanced rows are used by JavaScript for crowded tables. */
.scene[data-mode="team_2v2"] .table-zone {
  height: 100%;
  min-width: 0;
  min-height: 0;
}
.scene[data-mode="team_2v2"] .deck-column {
  right: max(12px, calc((100vw - 1120px) / 2));
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  width: 80px;
  align-items: center;
  transform: none;
}
.scene[data-mode="team_2v2"] .deck-stack { width: 42px; height: 60px; }
.scene[data-mode="team_2v2"] .deck-counter { width: 22px; height: 22px; font-size: 11px; }
.scene[data-mode="team_2v2"] .deck-column .pile-label,
.scene[data-mode="team_2v2"] .deck-column .pile-sub {
  font-size: 8px;
  line-height: 1.4;
  letter-spacing: 0;
}
.scene[data-mode="team_2v2"] .game-help-btn {
  top: max(12px, env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: auto;
}
.scene[data-mode="team_2v2"] .felt {
  flex: 1 1 auto;
  /* The shared felt has a maximum width. Auto margins keep that capped
     surface centred inside a wider RTL or LTR table column. */
  margin-inline: auto;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  aspect-ratio: auto;
  padding: 4px !important;
}
.scene[data-mode="team_2v2"] .felt-inner,
.scene[data-mode="team_2v2"] .felt.has-bg-image .felt-inner {
  height: 100%;
  min-height: 0;
  container-type: size;
  border-radius: 12px !important;
}
.scene[data-mode="team_2v2"] .table-cards {
  position: absolute;
  inset: 0;
  width: 100%;
}
.scene[data-mode="team_2v2"] .table-cards-grid {
  min-width: 0;
  min-height: 0;
  padding: clamp(6px, 1.5vw, 12px);
  gap: 4px;
}
.scene[data-mode="team_2v2"] .table-cards-grid .tc-row {
  min-width: 0;
  gap: 4px;
}
/* Size cards against the actual felt and rendered row count. A viewport-only
   width clips crowded tables on short windows, even when the board fits. */
#game-app[data-mode="team_2v2"] .table-cards .card {
  width: min(
    clamp(64px, 20cqw, 96px),
    calc((100cqw - 28px - (var(--table-columns, 2) - 1) * 4px) / var(--table-columns, 2)),
    calc((100cqh - 28px - (var(--table-rows, 2) - 1) * 4px) / var(--table-rows, 2) * 120 / 167)
  ) !important;
}

.game-communications { display: contents; }
/* Voice text and its optional playback button share an intrinsic row with chat,
   so either control growing reserves board space rather than covering a seat. */
.scene[data-mode="team_2v2"] .game-communications {
  grid-area: communications;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: max-content;
  max-width: min(360px, calc(100% - 24px));
  min-width: 0;
  justify-self: center;
  padding: 6px;
  border: 1px solid rgba(201, 169, 97, 0.2);
  border-radius: 16px;
  background: rgba(8, 15, 14, 0.58);
}
.scene[data-mode="team_2v2"] .game-voice-controls,
.scene[data-mode="team_2v2"] .game-text-chat-toggle {
  position: relative;
  inset: auto;
}
.scene[data-mode="team_2v2"] .game-voice-controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 44px;
  flex: 0 1 auto;
  width: auto;
  max-width: 280px;
  min-width: 0;
  column-gap: 8px;
  row-gap: 2px;
  text-align: start;
}
.scene[data-mode="team_2v2"] .game-voice-mic {
  grid-column: 3;
  grid-row: 1 / 3;
  width: 44px;
  min-height: 48px;
  border-radius: 12px;
}
.scene[data-mode="team_2v2"] .game-voice-mic svg { width: 20px; height: 20px; }
.scene[data-mode="team_2v2"] .game-voice-status,
.scene[data-mode="team_2v2"] .game-voice-audience {
  grid-column: 2;
  min-width: 0;
  max-width: 150px;
  overflow-wrap: anywhere;
}
.scene[data-mode="team_2v2"] .game-voice-status {
  grid-row: 1;
  align-self: end;
  padding: 0;
  background: none;
}
.scene[data-mode="team_2v2"] .game-voice-audience { grid-row: 2; align-self: start; }
.scene[data-mode="team_2v2"] .game-voice-listen {
  grid-column: 1;
  grid-row: 1 / 3;
  max-width: 100px;
  min-height: 44px;
}
.scene[data-mode="team_2v2"] .game-text-chat-toggle {
  flex: 0 0 auto;
}

/* Keep the four seats close to the board on wide monitors, with enough room
   for names and controls instead of stretching narrow rails to the edges. */
@media (min-width: 1000px) and (min-height: 641px) {
  .scene[data-mode="team_2v2"] {
    grid-template-columns: clamp(108px, 11vw, 144px) minmax(0, 780px) clamp(108px, 11vw, 144px);
    grid-template-rows: auto auto minmax(0, 320px) auto;
    justify-content: center;
    gap: 12px;
    padding: max(56px, calc(env(safe-area-inset-top, 0px) + 56px)) 20px 20px;
  }
  .scene[data-mode="team_2v2"] .bot-zone { padding-top: 6px; }
  .scene[data-mode="team_2v2"] .player-zone { flex-direction: row; gap: 18px; }
  .scene[data-mode="team_2v2"] .player-hand { width: auto; }
  .scene[data-mode="team_2v2"] .player-hand { padding-top: 18px; }
  .scene[data-mode="team_2v2"] .table-zone { max-height: 320px; align-self: center; }
  .scene[data-mode="team_2v2"] .felt { max-width: 780px; }
  .scene[data-mode="team_2v2"] .side-zone { gap: 10px; }
  .scene[data-mode="team_2v2"] .side-profile { padding: 24px 10px 10px; }
  .scene[data-mode="team_2v2"] .team-seat-role { font-size: 11px; }
  .scene[data-mode="team_2v2"] #team-scoreline {
    top: 8px;
    min-height: 36px;
    padding: 5px 16px;
    gap: 12px;
    font-size: 13px;
  }
  .scene[data-mode="team_2v2"] .team-turn-label { font-size: 12px; }
}
@media (max-width: 500px) {
  .scene[data-mode="team_2v2"] .table-cards .card {
    width: clamp(44px, 12vw, 54px) !important;
  }
}
@media (max-width: 340px) {
  .scene[data-mode="team_2v2"] .side-profile .dealer-badge-text,
  .scene[data-mode="team_2v2"] .side-profile .opener-badge-text {
    display: none;
  }
  .scene[data-mode="team_2v2"] .side-profile .dealer-badge,
  .scene[data-mode="team_2v2"] .side-profile .opener-badge {
    padding-inline: 4px;
  }
  .scene[data-mode="team_2v2"] {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    gap: 4px;
  }
  .scene[data-mode="team_2v2"] .table-cards-grid { padding: 8px; }
  .scene[data-mode="team_2v2"] .side-hand .card {
    width: 14px !important;
    height: 22px !important;
  }
  .scene[data-mode="team_2v2"] .profile-with-pile,
  .scene[data-mode="team_2v2"] .player-zone .profile-with-pile,
  .scene[data-mode="team_2v2"] .bot-zone .profile-with-pile { gap: 4px; }
  .scene[data-mode="team_2v2"] .profile-card { gap: 4px; padding-inline: 6px; }
  .scene[data-mode="team_2v2"] .profile-card .player-avatar,
  .scene[data-mode="team_2v2"] .profile-card .bot-avatar { width: 36px; height: 36px; }
  .scene[data-mode="team_2v2"] .captures-pile,
  .scene[data-mode="team_2v2"] .side-pile { width: 36px; height: 48px; }
  .scene[data-mode="team_2v2"] .captures-pile .cp-stack,
  .scene[data-mode="team_2v2"] .side-pile .cp-stack { width: 34px; height: 45px; }
  .scene[data-mode="team_2v2"] .bot-hand .card { width: 26px !important; }
  .scene[data-mode="team_2v2"] .side-avatar { width: 32px; height: 32px; }
  .scene[data-mode="team_2v2"] .side-name { font-size: 10px; }
  .scene[data-mode="team_2v2"] .side-profile .ping-chip {
    padding: 1px 3px;
    font-size: 0.58rem;
  }
}

/* Width-based desktop scaling is too large on landscape phones. Compact the
   four seats by height and give the remaining track to the table. */
@media (orientation: landscape) and (max-height: 640px) {
  .scene[data-mode="team_2v2"] {
    grid-template-columns: clamp(64px, 12vw, 112px) minmax(0, 1fr) clamp(64px, 12vw, 112px);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "partner partner partner"
      "leftrail felt rightrail"
      "you you you";
    gap: 4px;
    align-content: stretch;
    padding-top: max(38px, calc(env(safe-area-inset-top, 0px) + 38px));
  }
  /* Sharing the header's two halves leaves useful card height on short phones. */
  .scene[data-mode="team_2v2"] .bot-zone,
  .scene[data-mode="team_2v2"] .game-communications {
    width: calc(50% - 12px);
    align-self: center;
  }
  .scene[data-mode="team_2v2"] .bot-zone {
    justify-self: start;
    gap: 6px;
    padding: 6px 6px 2px;
  }
  .scene[data-mode="team_2v2"] .game-communications {
    grid-area: partner;
    justify-self: end;
    width: max-content;
    max-width: calc(50% - 72px);
    margin-right: 60px;
  }
  .scene[data-mode="team_2v2"] .player-zone {
    flex-direction: row;
    gap: 10px;
    padding: 2px max(48px, env(safe-area-inset-right, 0px)) max(4px, env(safe-area-inset-bottom, 0px)) max(48px, env(safe-area-inset-left, 0px));
  }
  .scene[data-mode="team_2v2"] .player-hand {
    flex: 0 1 auto;
    width: auto;
    padding-top: 24px;
  }
  .scene[data-mode="team_2v2"] .profile-card { gap: 5px; padding: 14px 6px 3px !important; }
  .scene[data-mode="team_2v2"] .profile-card .player-avatar,
  .scene[data-mode="team_2v2"] .profile-card .bot-avatar {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }
  .scene[data-mode="team_2v2"] .captures-pile,
  .scene[data-mode="team_2v2"] .side-pile { width: 34px; height: 44px; }
  .scene[data-mode="team_2v2"] .captures-pile .cp-stack,
  .scene[data-mode="team_2v2"] .side-pile .cp-stack { width: 31px; height: 41px; }
  .scene[data-mode="team_2v2"] .bot-hand .card { width: 24px !important; }
  .scene[data-mode="team_2v2"] .player-hand .card {
    width: clamp(44px, 7vw, 64px) !important;
    height: clamp(60px, 17dvh, 72px) !important;
  }
  .scene[data-mode="team_2v2"] .table-cards .card {
    width: clamp(44px, min(7vw, calc(16dvh - 10px)), 72px) !important;
    height: clamp(60px, min(10.5vw, calc(24dvh - 15px)), 108px) !important;
  }
  .scene[data-mode="team_2v2"] .side-zone {
    /* Tall rails must overflow toward the footer, not back into the header. */
    justify-content: flex-start;
    gap: 2px;
    padding: 1px;
  }
  .scene[data-mode="team_2v2"] .side-profile { gap: 1px; padding: 14px 2px 3px; }
  .scene[data-mode="team_2v2"] .side-avatar {
    width: 28px;
    height: 28px;
    font-size: 10px;
  }
  .scene[data-mode="team_2v2"] .side-name { font-size: 9px; }
  .scene[data-mode="team_2v2"] .side-hand .card { width: 18px !important; height: 26px !important; }
  .scene[data-mode="team_2v2"] .side-pile { margin-bottom: 8px; }
  .scene[data-mode="team_2v2"] .side-profile .ping-chip {
    margin-top: 0;
    padding: 0 3px;
    font-size: 0.56rem;
  }
  .scene[data-mode="team_2v2"] #team-scoreline {
    min-height: 20px;
    margin-top: 1px;
    padding: 1px 8px;
    font-size: 10px;
  }
  .scene[data-mode="team_2v2"] .deck-stack { width: 36px; height: 50px; }
}

/* The spectator count and emoji control share the physical left side. Reserve
   separate horizontal slots so neither blocks the other in either locale. */
.scene[data-mode="team_2v2"] #spectator-chip {
  right: auto;
  left: max(82px, calc(env(safe-area-inset-left, 0px) + 8px));
  bottom: max(8px, env(safe-area-inset-bottom, 0px));
}
@media (max-width: 600px) {
  .scene[data-mode="team_2v2"] #spectator-chip {
    left: max(72px, calc(env(safe-area-inset-left, 0px) + 8px));
  }
}

/* Native dialogs keep keyboard focus and the backdrop in the browser's top layer. */
dialog.emoji-picker { margin: 0; top: auto; color: inherit; }
dialog.emoji-picker:not([open]) { display: none; }
dialog.emoji-picker::backdrop,
.game-help-modal::backdrop { background: rgba(0, 0, 0, .6); }
.emoji-picker .emoji-picker-close {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(201, 169, 97, .6);
  border-radius: 10px;
  background: transparent;
  color: #fff4bf;
  font: inherit;
  cursor: pointer;
}
.emoji-picker .ep-title { min-height: 44px; display: flex; align-items: center; justify-content: center; padding-inline: 44px; }
.emoji-picker .pick-label { font-size: 10px; }
.emoji-picker .emoji-picker-close:focus-visible,
.rules-practice button:focus-visible,
.home-play-link:focus-visible { outline: 3px solid #fff4bf; outline-offset: 4px; }

.rules-practice [hidden] { display: none; }
.rules-practice-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rules-practice .btn { min-height: 44px; }
.rules-practice-exit { margin-top: 16px; }
.rules-practice-progress { color: #e8cf88; font-size: 13px; }
.rules-practice-card.rule-card { position: relative; cursor: pointer; font-family: inherit; }
.rules-practice-card.rule-card[aria-pressed="true"] { outline: 3px solid #e8cf88; outline-offset: 4px; }
.rules-practice-card.rule-card:disabled { cursor: default; opacity: 1; }
.practice-selection-mark { position: absolute; top: -10px; inset-inline-end: -10px; width: 24px; height: 24px; border-radius: 50%; background: #e8cf88; color: #171b18; font: bold 16px/24px sans-serif; }
.rules-practice-feedback { min-height: 3em; line-height: 1.7; }
.rules-practice-feedback[data-result="correct"] { color: #e8cf88; }

.home-play-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; }
.home-play-link { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 2px; color: #e8cf88; text-underline-offset: 5px; }
.home-play-link:hover { color: #fff4bf; }
.table-info { min-width: 0; }
.table-info .table-rules { margin: 6px 0; font-size: 12px; line-height: 1.7; color: #e5dcc7; overflow-wrap: anywhere; }
.table-seats-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.table-team-preview { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 8px; border: 1px solid rgba(201, 169, 97, .22); border-radius: 10px; background: rgba(0, 0, 0, .14); }
.table-preview-team-name { font-size: 12px; color: #e8cf88; overflow-wrap: anywhere; }
.table-preview-seat { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-width: 0; font-size: 12px; line-height: 1.5; }
.table-preview-seat bdi { overflow-wrap: anywhere; }
.table-preview-seat[data-empty="true"] { color: #b8b3aa; }
.table-preview-seat .badge-host { font-size: 10px; padding: 1px 5px; }

.game-help-btn {
  position: fixed;
  z-index: 110;
  right: max(8px, env(safe-area-inset-right, 0px));
  bottom: max(68px, calc(env(safe-area-inset-bottom, 0px) + 68px));
  width: 44px;
  min-height: 44px;
  padding: 2px;
  border: 1px solid #c9a961;
  border-radius: 12px;
  background: #171d1b;
  color: #e8cf88;
  font: 700 11px/1.4 'Cairo', sans-serif;
  cursor: pointer;
}
.game-help-btn:focus-visible { outline: 3px solid #fff4bf; outline-offset: 3px; }
.game-help-modal { width: min(420px, calc(100vw - 32px)); max-height: 80dvh; overflow-y: auto; box-sizing: border-box; padding: 24px; border: 1px solid #c9a961; border-radius: 18px; background: #171d1b; color: #f3ebd6; font-family: 'Cairo', sans-serif; line-height: 1.8; text-align: start; }
.game-help-modal h2 { margin-top: 0; color: #e8cf88; }
.game-help-modal a { color: #e8cf88; }
.game-help-modal .btn-secondary { min-height: 44px; }
.scene .game-voice-status,
.scene .game-voice-audience { font-size: 12px; line-height: 1.4; }
.scene .game-voice-listen { min-height: 44px; }
.final-deal-label { color: #e8cf88; font-size: 11px; line-height: 1.4; }
.final-deal-label[hidden] { display: none; }
.capture-cue { font-size: clamp(12px, 1.3vw, 13px); }
.capture-cue[data-kind="status"] { animation: none; }

/* ── 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;
}