* {
  box-sizing: border-box;
}

#win-confetti {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
}

[hidden] {
  display: none !important;
}

body {
  font-family: system-ui, sans-serif;
  margin: 0;
  padding: 0.6rem;
  background: #0b3d2e;
  color: #f5f5f0;
}

header {
  position: relative;
}
header h1 {
  margin: 0 0 0.5rem;
  font-size: 1.3rem;
  text-align: center;
}
#quit-game-btn {
  position: absolute;
  right: 0;
  top: 0;
  background: rgba(192, 57, 43, 0.85);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-weight: 600;
}
#quit-game-btn:hover {
  background: #c0392b;
}

/* Center the whole app within the window. */
main {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#game {
  align-self: stretch;
}

#identity-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 320px;
  margin-bottom: 1rem;
}

#cut-for-deal {
  max-width: none;
}

#cut-status {
  font-weight: 400;
  min-height: 1.4em;
  text-align: center;
  margin-top: 1.2rem;
}

#cut-spread {
  display: flex;
  padding: 1.5rem 1.5rem 2rem;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  margin-bottom: 1rem;
  overflow-x: auto;
}

.cut-card-back {
  position: relative;
  width: 70px;
  height: 98px;
  flex: 0 0 auto;
  cursor: pointer;
  transition: transform 0.15s ease;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
}

.cut-card-back:not(:first-child) {
  margin-left: -54px;
}

.cut-card-back:hover:not(.disabled) {
  transform: translateY(-16px);
  z-index: 2;
}

.cut-card-back.disabled {
  cursor: default;
  opacity: 0.35;
}

#cut-draws {
  display: flex;
  gap: 2.5rem;
  margin-bottom: 1rem;
}

.cut-draw-slot {
  text-align: center;
}

.cut-draw-label {
  font-weight: 600;
  margin-bottom: 0.4rem;
  opacity: 0.85;
}

.cut-draw-card {
  width: 70px;
  height: 98px;
  border: 1px dashed rgba(245, 245, 240, 0.3);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cut-draw-card img {
  width: 100%;
  height: 100%;
}

#cut-result-banner {
  font-size: 1.2rem;
  font-weight: 700;
}

#reconnecting-banner {
  font-weight: 600;
  opacity: 0.85;
}

#playing-as {
  opacity: 0.85;
}

#playing-as a {
  color: #ffd54f;
}

#lobby {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 320px;
}

#history-panel {
  border-top: 1px solid rgba(245, 245, 240, 0.2);
  padding-top: 0.6rem;
  margin-top: 0.4rem;
  max-height: 240px;
  overflow-y: auto;
}

.history-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(245, 245, 240, 0.1);
  font-size: 0.9rem;
}

.history-row .win {
  color: #8bd17c;
}

.history-row .loss {
  color: #e8593d;
}

#join-form {
  display: flex;
  gap: 0.5rem;
}

#room-code-input {
  flex: 1;
  text-transform: uppercase;
}

button {
  cursor: pointer;
  padding: 0.5rem 1rem;
}

#lobby-status {
  min-height: 1.2em;
}

#game {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 100%;
  width: 100%;
}

#table-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-template-rows: auto auto auto auto auto;
  grid-template-areas:
    'video opphand'
    'video playedtop'
    'video midrow'
    'video playedbot'
    'video myhand';
  gap: 0.45rem;
  align-items: center;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  padding: 0.75rem;
}

/* Left column holds the video box with the discard button beneath it, centered
   vertically so the video lines up with the deck/board in the middle row. */
#left-col {
  grid-area: video;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

#video-call {
  border: 1px solid rgba(245, 245, 240, 0.3);
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 3 / 4; /* standard portrait */
  width: 100%;
  position: relative;
  background: #0b0d0c;
}

#left-col #discard-btn,
#left-col #next-hand-btn {
  width: 100%;
}
#remote-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #0b0d0c;
}
#local-video {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 28%;
  max-width: 120px;
  border: 1px solid rgba(245, 245, 240, 0.5);
  border-radius: 6px;
  object-fit: cover;
  transform: scaleX(-1); /* mirror your own preview, like a selfie */
  background: #000;
}
.video-status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  color: rgba(245, 245, 240, 0.75);
  font-size: 0.85rem;
}
.video-controls {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: flex;
  gap: 6px;
}
.video-controls button {
  border: none;
  border-radius: 999px;
  width: 34px;
  height: 34px;
  font-size: 1rem;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.55);
}

/* Scores + status message overlaid on the top of the video box (message above scores). */
#video-hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  background: rgba(0, 0, 0, 0.5);
  padding: 5px 8px;
  text-align: center;
}
#video-hud #status-banner {
  margin: 0 0 3px;
  min-height: 1.2em;
  font-size: 0.85rem;
}
#video-hud #connection-banner {
  margin: 0 0 3px;
  font-size: 0.85rem;
}
#video-hud #scoreboard {
  display: flex;
  justify-content: center;
  gap: 1rem;
  font-size: 0.95rem;
}

.grid-opp-hand {
  grid-area: opphand;
}

.grid-my-hand {
  grid-area: myhand;
}

.grid-opp-hand,
.grid-my-hand {
  display: flex;
  gap: 0.4rem;
  min-height: 98px;
}

.grid-mid-row {
  grid-area: midrow;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
}

/* Deck sits centered over the 4 remaining (post-discard) hand cards: the 4-card
   span is 387px starting at the column's left edge, so its center is ~193px.
   Only the deck itself (92px) occupies the lane (left margin places its center at
   193px) — the board then starts right after the deck, giving it more room to the
   left and to expand. */
#deck-lane {
  flex: 0 0 auto;
  margin-left: 147px;
  width: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#played-top {
  grid-area: playedtop;
}

#played-bottom {
  grid-area: playedbot;
}

#played-top,
#played-bottom {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 129px;
}

.played-count {
  font-weight: 600;
  opacity: 0.8;
  white-space: nowrap;
  width: 70px;
}

#deck-area {
  position: relative;
  width: 92px;
  height: 129px;
  flex: 0 0 auto;
}

#deck-area .card-back {
  position: absolute;
  width: 92px;
  height: 129px;
}

#deck-area .card-back:nth-child(1) {
  top: 4px;
  left: 4px;
}

#deck-area .card-back:nth-child(2) {
  top: 2px;
  left: 2px;
}

#deck-area .card-back:nth-child(3) {
  top: 0;
  left: 0;
}

#deck-area .starter-card {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  opacity: 0;
  transform: scale(0.8);
  transition: transform 0.4s ease, opacity 0.4s ease;
}

#deck-area .starter-card.revealed {
  opacity: 1;
  transform: scale(1);
}

#board-wrap {
  flex: 1 1 auto;
  min-width: 420px;
  width: auto;
}

#board-svg {
  width: 100%;
  display: block;
}

#crib-area {
  justify-self: end; /* right side of the dealer's hand-row cell */
  align-self: center;
  position: relative;
  z-index: 2;
  width: 410px;
  height: 158px;
  border: 2px dashed rgba(245, 245, 240, 0.35);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#crib-area.active {
  border-color: #ffd54f;
  box-shadow: 0 0 12px rgba(255, 213, 84, 0.5);
}

.crib-label {
  font-weight: 600;
  opacity: 0.75;
  font-size: 0.85rem;
}

#crib-slots {
  display: flex;
  gap: 0.5rem;
  min-height: 129px;
}

#scoreboard {
  display: flex;
  gap: 1.5rem;
  font-size: 1.1rem;
}

.score-line .label {
  opacity: 0.7;
  margin-right: 0.4rem;
}

.score-line .label::before {
  content: '●';
  margin-right: 0.3rem;
}

.score-line.you .label::before {
  color: #c0392b;
}

.score-line.opp .label::before {
  color: #2d6cb5;
}

#status-banner {
  min-height: 1.4em;
  font-weight: 600;
}

#connection-banner {
  font-weight: 600;
  color: #e8a33d;
}

.cards-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

#hand-area {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-height: 90px;
}

.card,
.card-back {
  width: 92px;
  height: 129px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  border-radius: 8px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
  transition: transform 0.15s ease;
}

.card img,
.card-back img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.card-back {
  cursor: default;
}

.card.selected {
  outline: 3px solid #ffd54f;
  transform: translateY(-10px);
}

.card.dimmed {
  opacity: 0.45;
}

.deal-in {
  opacity: 0;
  transform: translateY(-40px) scale(0.7);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.deal-in.dealt {
  opacity: 1;
  transform: none;
}

.card:disabled {
  cursor: default;
}

#action-area button {
  margin-right: 0.5rem;
}

#show-result-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

#show-result-modal {
  background: #0f4a37;
  border: 1px solid rgba(245, 245, 240, 0.3);
  border-radius: 12px;
  padding: 1.5rem;
  width: 580px; /* fits four 92px hand cards + the cut card on one line */
  max-width: 95vw;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

#show-result-step-indicator {
  margin: 0 0 0.3rem;
  opacity: 0.7;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#show-result-heading {
  margin: 0 0 0.8rem;
}

#show-result-cards {
  margin-bottom: 0.8rem;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  overflow-x: auto; /* on a narrow screen, scroll rather than distort the cards */
}
/* Keep every card at its true aspect ratio even when 5 are shown. */
#show-result-cards .card,
#show-result-cards .cut-card-wrap { flex: 0 0 auto; }

/* The cut/starter card shown alongside a counted hand, marked so it reads as shared. */
.cut-card-wrap { position: relative; display: inline-flex; margin-left: 0.5rem; }
#show-result-cards .cut-card { outline: 2px solid #ffd54f; outline-offset: 1px; }
.cut-card-wrap .cut-label { position: absolute; top: -7px; right: -7px; background: #ffd54f; color: #1a1a1a; font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 1px 6px; border-radius: 999px; z-index: 1; }

#show-result-breakdown {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
  opacity: 0.85;
}

#show-result-ack-btn {
  width: 100%;
}

#show-result-ack-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

#game-over-banner {
  font-size: 1.4rem;
  font-weight: 700;
}

#play-again-area {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 240px;
  margin-top: 0.75rem;
}

#play-again-status {
  min-height: 1.2em;
  opacity: 0.85;
}

/* 1v1 board/count toggle (mirrors the 3-/4-player one). */
.score-toggle { margin-top: 6px; font-size: 0.75rem; padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.06); color: inherit; cursor: pointer; }
.score-toggle:hover { background: rgba(255, 255, 255, 0.14); }

/* Today's head-to-head results on the rematch screen. */
.play-again-results { margin: 0 0 0.4rem; font-size: 0.9rem; text-align: center; }
.play-again-results .tr-tally { margin-bottom: 0.3rem; }
.play-again-results .tr-games { display: flex; gap: 0.35rem; flex-wrap: wrap; justify-content: center; }
.play-again-results .tr-item { padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2); font-variant-numeric: tabular-nums; }
.play-again-results .tr-item.w { background: rgba(139, 209, 124, 0.25); }
.play-again-results .tr-item.l { background: rgba(192, 57, 43, 0.25); }

#points-popup {
  position: fixed;
  top: 28%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  background: #0f4a37;
  border: 2px solid #ffd54f;
  border-radius: 12px;
  padding: 1rem 2rem;
  text-align: center;
  z-index: 60;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

#points-popup.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.points-popup-amount {
  font-size: 2.2rem;
  font-weight: 800;
  color: #ffd54f;
}

.points-popup-reason {
  font-size: 1rem;
  opacity: 0.9;
  margin-top: 0.2rem;
}

/* Site footer (privacy / contact links) */
.site-footer {
  text-align: center;
  padding: 18px 12px 32px;
  font-size: 0.85rem;
}
.site-footer a { color: inherit; }
.site-footer span { margin: 0 8px; }
.footer-actions { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.footer-actions button { padding: 7px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.08); color: inherit; font-weight: 600; font-size: 0.85rem; cursor: pointer; }
.footer-actions button:hover { background: rgba(255,255,255,0.16); }
#footer-play-again { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.footer-links { opacity: 0.7; }

/* Play Again / Return to Lobby now live in the footer; hide the inline duplicates on the
   game-over screens (kept in the DOM so the footer forwards to their handlers, and so the
   today's-results / status text they sit next to still shows). */
#play-again-btn, #back-to-lobby-btn, #mp-play-again-btn, #mp-back-to-lobby-btn { display: none; }

/* Per-player zoom control (fixed, so it stays a constant size regardless of zoom). */
#zoom-control { position: fixed; left: 10px; bottom: 10px; z-index: 200; display: flex; align-items: center; gap: 6px;
  background: rgba(11,61,46,0.9); border: 1px solid rgba(255,255,255,0.25); border-radius: 999px; padding: 4px 10px; font-size: 0.85rem; }
#zoom-control button { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25); border-radius: 6px; color: inherit; cursor: pointer; padding: 1px 8px; line-height: 1.2; }
#zoom-control #zoom-range { width: 90px; }
#zoom-control #zoom-pct { width: 40px; text-align: center; opacity: 0.85; font-variant-numeric: tabular-nums; }
#zoom-control #zoom-fit { font-weight: 600; }
@media (max-width: 640px) { #zoom-control #zoom-range { width: 60px; } }

/* Match-history modal (opened from the footer). */
#history-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 400; }
#history-modal { background: #0f4a37; border: 1px solid rgba(245,245,240,0.3); border-radius: 12px; padding: 1.25rem; width: min(460px, 94vw); max-height: 82vh; overflow-y: auto; display: flex; flex-direction: column; gap: 0.6rem; }
#history-modal h3 { margin: 0; }
#history-modal-close { align-self: center; padding: 7px 16px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.08); color: inherit; font-weight: 600; cursor: pointer; }

/* Winning cards frozen on the game-over screen (and small in the chat winner strip). */
.winning-cards { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; margin: 0.4rem 0; }
.winning-cards .wc-label { font-weight: 600; opacity: 0.9; }
.winning-cards .wc-row { justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.winning-cards .wc-row .card { width: 62px; height: 87px; }
.winning-cards.wc-small { margin: 0; }
.winning-cards.wc-small .wc-row .card { width: 38px; height: 53px; }
.winning-cards.wc-small .wc-label { font-size: 0.78rem; }
#mp-chat-btn { background: #0f7a53; border-color: #0f7a53; color: #fff; }

/* Post-game full-screen chat mode. Videos fill as much of the screen as possible. */
#mp-chat { position: fixed; inset: 0; z-index: 120; background: #0b3d2e; display: flex; flex-direction: column; padding: 8px; gap: 6px; }
#mp-chat-winner { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; }
#mp-chat-winner .chat-winner-text { font-size: 1.3rem; font-weight: 700; }
/* Tiles stretch to fill both axes: rows grow to the available height, columns
   wrap only when a tile would fall below its min width. */
#mp-chat-grid { flex: 1 1 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); grid-auto-rows: 1fr; gap: 10px; align-items: stretch; justify-items: stretch; overflow: hidden; min-height: 0; }
#mp-chat-grid .mp-vwidget { width: 100%; max-width: none; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 0; }
/* The video itself takes all the tile height left over from the name/controls,
   and covers its box (no letterboxing) so it uses the full space. */
#mp-chat-grid .mp-opp-video, #mp-chat-grid .mp-self-video, #mp-chat-grid .mp-self-placeholder, #mp-chat-grid .mp-opp-hidden { width: 100%; height: 100%; min-height: 0; flex: 1 1 auto; aspect-ratio: auto; object-fit: cover; border-radius: 8px; }
#mp-chat-grid .mp-vname { flex: 0 0 auto; }
/* The 1v1 call (whole #video-call block) reparents into the grid too — keep it
   portrait but as tall as the row, centered. */
#mp-chat-grid #video-call { width: auto; max-width: 100%; height: 100%; max-height: 100%; margin: 0 auto; }
#mp-chat-actions { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
#mp-chat-actions button { padding: 8px 16px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.1); color: inherit; font-weight: 600; cursor: pointer; }
#chat-play-again { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }

/* ---- Auth (login / signup) in the identity form ---- */
#identity-form { max-width: 340px; margin: 0 auto; }
#auth-box { display: flex; flex-direction: column; gap: 8px; }
.auth-tabs { display: flex; gap: 4px; margin-bottom: 4px; }
.auth-tab { flex: 1; padding: 8px; background: transparent; border: none; border-bottom: 2px solid transparent; opacity: 0.6; cursor: pointer; font: inherit; color: inherit; }
.auth-tab.active { opacity: 1; border-bottom-color: currentColor; font-weight: 600; }
#auth-box input, #guest-box input { padding: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.06); color: inherit; font: inherit; }
#auth-submit { padding: 10px; border-radius: 8px; border: none; cursor: pointer; font: inherit; font-weight: 600; }
.auth-error { color: #ff6b6b; font-size: 0.85rem; margin: 2px 0 0; }
.auth-why { font-size: 0.8rem; opacity: 0.7; margin: 4px 0 0; }
.guest-divider { display: flex; align-items: center; text-align: center; opacity: 0.5; margin: 16px 0 12px; }
.guest-divider::before, .guest-divider::after { content: ''; flex: 1; border-top: 1px solid currentColor; }
.guest-divider span { padding: 0 10px; font-size: 0.8rem; }
#guest-box { display: flex; flex-direction: column; gap: 8px; }
#logout-link { margin-left: 6px; }

/* Match-history stats summary */
.history-stats { font-weight: 600; padding: 6px 0; margin-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.15); }
.history-empty { opacity: 0.7; font-size: 0.9rem; }

/* Auth: forgot-password link + info note */
.auth-forgot { background: transparent; border: none; color: inherit; opacity: 0.7; font: inherit; font-size: 0.8rem; cursor: pointer; padding: 2px; text-decoration: underline; }
.auth-note { color: #4ade80; font-size: 0.85rem; margin: 4px 0 0; }

/* ---- Game-mode select + N-player lobby ---- */
.mode-select { display: flex; gap: 6px; justify-content: center; margin: 10px 0 4px; flex-wrap: wrap; }
.mode-btn { padding: 8px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.06); color: inherit; font: inherit; cursor: pointer; }
.mode-btn.active { border-color: currentColor; font-weight: 600; background: rgba(255,255,255,0.14); }
.mode-btn.locked { opacity: 0.45; }
.mode-hint { font-size: 0.8rem; opacity: 0.7; text-align: center; margin: 4px 0; }
.room-roster { max-width: 340px; margin: 12px auto; text-align: left; }
.roster-title { font-weight: 600; margin: 8px 0 4px; }
.roster-list { list-style: none; padding: 0; margin: 0 0 8px; }
.roster-list li { padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
.team-picker { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.15); }
.team-row { display: flex; align-items: center; gap: 12px; padding: 3px 0; }
.team-row span { flex: 1; }
#set-teams-btn { margin-top: 8px; padding: 8px 14px; border-radius: 8px; border: none; background: #1d4ed8; color: #fff; font-weight: 600; cursor: pointer; }

/* ============================================================
   3-/4-player table (#game-mp). Separate from the 1v1 #table-grid
   layout above — opponents sit across the top, a single shared
   pegging pile in the middle, your hand at the bottom, and a
   compact per-seat score panel instead of the pegboard (P4).
   ============================================================ */
#game-mp {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
.mp-status { min-height: 1.4em; font-weight: 600; text-align: center; margin: 0.2rem 0; }

/* Compact score panel: one chip per seat, its accent colour set inline in JS. */
.mp-scorepanel { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; }
.mp-score-chip {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.95rem;
}
.mp-score-chip .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--seat-color, #ffd54f); flex: 0 0 auto; }
.mp-score-chip .nm { opacity: 0.85; }
.mp-score-chip .sc { font-weight: 700; font-variant-numeric: tabular-nums; }
.mp-score-chip.dealer .nm::after { content: ' (D)'; opacity: 0.7; font-size: 0.8em; }
.mp-score-chip.turn { background: rgba(255, 213, 79, 0.18); border-color: #ffd54f; box-shadow: 0 0 10px rgba(255, 213, 79, 0.35); }

/* 3-column GRID: [ left video col | cards | right video col ]. Grid tracks keep the
   videos and the cards in separate lanes, so a 5-card hand can never slide under a
   video. Content-sized + centered so the videos hug the cards. */
#mp-table {
  align-self: stretch;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  padding: 0.75rem;
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: stretch;     /* columns take the full height of the center cards */
  justify-content: center;
  gap: 0.75rem;
}
#mp-play { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; min-width: 0; }
.mp-video-col { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; min-height: 0; }
.mp-video-col:empty { display: none; }
.mp-vwidget { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.mp-vname { font-size: 0.8rem; opacity: 0.85; }

/* Left = upper-left opponent (top) + your self-view (bottom-aligned); right = the
   single upper-right opponent (top). Space-between spreads them to fill the height. */
#mp-video-left { justify-content: space-between; }
#mp-video-right { justify-content: flex-start; }

/* Every tile is IDENTICAL (a fixed 4:3 box, sized below), so the self-view is never a
   different size from the opponents regardless of how many control buttons it has. */

/* On a narrow screen, drop to compact stacked rows so it still fits. */
@media (max-width: 1040px) {
  #mp-table { display: flex; flex-direction: column; align-items: center; }
  .mp-video-col { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .mp-opp-video, .mp-self-video, .mp-self-placeholder, .mp-opp-hidden { width: 150px; height: 112px; }
}

/* Opponent panels across the top. */
.mp-opponents { display: flex; gap: 1.5rem; justify-content: center; align-items: flex-start; flex-wrap: wrap; width: 100%; }
.mp-opp { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.mp-opp-hand { display: flex; gap: 0.25rem; min-height: 84px; justify-content: center; }
/* Opponents' face-down cards render smaller than your own hand to save space. */
.mp-opp-hand .card-back { width: 58px; height: 82px; }

/* Seat identity chip (name + turn/dealer state), shared by opponents and you. */
.mp-seat-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid transparent; font-size: 0.9rem; white-space: nowrap;
}
.mp-seat-chip .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--seat-color, #ffd54f); }
.mp-seat-chip.turn { border-color: #ffd54f; background: rgba(255, 213, 79, 0.18); box-shadow: 0 0 8px rgba(255, 213, 79, 0.3); }
.mp-seat-chip.dealer .nm::after { content: ' (D)'; opacity: 0.7; font-size: 0.8em; }

/* Shared pegging pile with the running count above it. */
#mp-center { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; min-height: 96px; width: 100%; }
.mp-pile-count { font-weight: 600; opacity: 0.85; }
.mp-pile { justify-content: center; min-height: 84px; }
.mp-pile .card { width: 62px; height: 87px; }
/* Tint each played card's frame by whose it is (accent set inline in JS). */
.mp-pile .mp-played { border-radius: 8px; box-shadow: 0 0 0 2px var(--seat-color, transparent); }

#mp-midrow { display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; }
#mp-deck { position: relative; width: 74px; height: 104px; }
#mp-deck .card-back { position: absolute; width: 74px; height: 104px; }
#mp-deck .card-back:nth-child(1) { top: 4px; left: 4px; }
#mp-deck .card-back:nth-child(2) { top: 2px; left: 2px; }
#mp-deck .card-back:nth-child(3) { top: 0; left: 0; }
#mp-deck .starter-card { position: absolute; top: 0; left: 0; width: 74px; height: 104px; z-index: 5; opacity: 0; transform: scale(0.8); transition: transform 0.4s ease, opacity 0.4s ease; }
#mp-deck .starter-card.revealed { opacity: 1; transform: scale(1); }
#mp-crib { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.4rem 0.8rem; border: 2px dashed rgba(245, 245, 240, 0.3); border-radius: 8px; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
#mp-crib.active { border-color: #ffd54f; box-shadow: 0 0 10px rgba(255, 213, 79, 0.3); }
#mp-crib-slots { min-height: 84px; justify-content: center; }
#mp-crib-slots .card-back, #mp-crib-slots .card { width: 58px; height: 82px; }

#mp-myseat { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; width: 100%; }
.mp-hand { justify-content: center; min-height: 90px; }

#mp-actions { display: flex; gap: 0.5rem; justify-content: center; }
#mp-actions button { padding: 8px 16px; border-radius: 8px; border: none; background: #1d4ed8; color: #fff; font-weight: 600; cursor: pointer; }
#mp-actions button:disabled { opacity: 0.5; cursor: default; }

#mp-game-over-banner { font-size: 1.3rem; font-weight: 700; text-align: center; }
#mp-post-game { display: flex; gap: 0.5rem; justify-content: center; align-items: center; flex-wrap: wrap; }
#mp-post-game button { padding: 8px 16px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.08); color: inherit; font-weight: 600; cursor: pointer; }
#mp-post-game button:disabled { opacity: 0.5; cursor: default; }
#mp-play-again-btn { background: #1d4ed8; color: #fff; border: none; }
#mp-play-again-status { width: 100%; text-align: center; margin: 0; }

/* 3-player mini score-board (3 linear tracks) + per-player view toggle. */
#mp-score-view { display: flex; justify-content: center; }
.mp-score-toggle { font-size: 0.8rem; padding: 3px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.06); color: inherit; cursor: pointer; }
.mp-score-toggle:hover { background: rgba(255,255,255,0.12); }
#mp-board-wrap { width: 100%; max-width: 640px; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
#mp-board-svg { width: 100%; display: block; }
.mp-board-legend { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; font-size: 0.85rem; }
.mp-board-legend .lg { display: inline-flex; align-items: center; gap: 0.35rem; }
.mp-board-legend .dot { width: 10px; height: 10px; border-radius: 50%; }
.mp-board-legend .lg.turn { font-weight: 700; }

/* 3-player mesh video: one uniform tile per seat + a mirrored self-view. Size lives
   here (single source of truth); the #mp-table grid block above handles placement. */
.mp-opp-video { width: 236px; height: 177px; flex: 0 0 auto; border-radius: 8px; object-fit: cover; background: #0b0d0c; border: 1px solid rgba(245, 245, 240, 0.2); }
.mp-self-video { width: 236px; height: 177px; flex: 0 0 auto; border-radius: 8px; object-fit: cover; background: #0b0d0c; border: 1px solid rgba(255, 213, 79, 0.45); transform: scaleX(-1); }
.mp-self-placeholder { width: 236px; height: 177px; flex: 0 0 auto; border-radius: 8px; background: #0b0d0c; border: 1px dashed rgba(245, 245, 240, 0.3); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; opacity: 0.75; }

/* Per-opponent self-protection controls (mute / hide / block) + hidden-tile placeholder. */
.mp-opp-hidden { width: 236px; height: 177px; flex: 0 0 auto; border-radius: 8px; background: #0b0d0c; border: 1px dashed rgba(245, 245, 240, 0.3); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; opacity: 0.85; }
.mp-opp-av { display: flex; gap: 0.25rem; justify-content: center; margin-top: 0.15rem; }
.mp-opp-av button { font-size: 0.85rem; line-height: 1; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 6px; padding: 2px 7px; cursor: pointer; }
.mp-opp-av button:disabled { opacity: 0.45; cursor: default; }
.mp-opp-av .av-block.active { background: rgba(192, 57, 43, 0.35); border-color: #c0392b; }

/* Report dialog (P2). */
#mp-report-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 60; }
#mp-report-modal { background: #0f4a37; border: 1px solid rgba(245, 245, 240, 0.3); border-radius: 12px; padding: 1.25rem; width: min(420px, 92vw); display: flex; flex-direction: column; gap: 0.6rem; }
#mp-report-modal h3 { margin: 0; }
#mp-report-modal .rl { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; }
#mp-report-modal .rl-check { flex-direction: row; align-items: center; gap: 0.4rem; }
#mp-report-modal select, #mp-report-modal textarea { background: rgba(0, 0, 0, 0.25); color: inherit; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 6px; padding: 6px; font: inherit; }
#mp-report-modal textarea { min-height: 64px; resize: vertical; }
.mp-report-status { min-height: 1.2em; font-size: 0.85rem; opacity: 0.9; }
.mp-report-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
.mp-report-actions button { padding: 7px 14px; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; }
#mp-report-send { background: #c0392b; color: #fff; }
#mp-report-send:disabled { opacity: 0.5; cursor: default; }
#mp-report-cancel { background: rgba(255, 255, 255, 0.1); color: inherit; border: 1px solid rgba(255, 255, 255, 0.25); }

/* Full-screen block for a banned/suspended account (P3). */
#fatal-overlay { position: fixed; inset: 0; background: #0b3d2e; display: flex; align-items: center; justify-content: center; z-index: 9998; }
#fatal-overlay .fatal-box { max-width: 460px; text-align: center; padding: 1.5rem; }
#fatal-overlay h2 { margin-top: 0; }
.mp-video-controls { display: flex; gap: 0.5rem; justify-content: center; margin-top: 0.2rem; }
.mp-video-controls button { font-size: 1.05rem; line-height: 1; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 8px; padding: 5px 11px; cursor: pointer; }

@media (max-width: 640px) {
  .mp-opponents { gap: 0.75rem; }
  .mp-opp-hand .card-back { width: 40px; height: 56px; }
  .mp-pile .card { width: 48px; height: 67px; }
  .mp-opp-video, .mp-self-video, .mp-self-placeholder, .mp-opp-hidden { width: 150px; height: 112px; }
}