/* ==========================================================================
   Hearts — page styles
   ========================================================================== */

:root {
  --bg: #041019;
  --felt: #1e7f4c;
  --felt-dark: #0f5531;
  --felt-edge: #073321;
  --accent: #ffcf40;
  --accent-soft: rgba(255, 207, 64, 0.16);
  --accent-strong: #ffe58e;
  --danger: #ff5d7a;
  --text: #f6f7ff;
  --muted: #c2c6db;
  --card-bg: #fdfdfd;
  --card-border: rgba(0, 0, 0, 0.18);
  --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.7);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

body {
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.app {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-height: 100vh;
}

/* --- Top bar: centered title, actions flanking --- */

.top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 0.4rem 0.25rem 0.6rem;
}

.top-side {
  display: flex;
  align-items: center;
  gap: 10px;
}

.top-side-left { justify-content: flex-start; }
.top-side-right { justify-content: flex-end; }

.top-center {
  text-align: center;
}

.top-center h1 {
  margin: 0 0 4px;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.top-subline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  line-height: 1.4;
  align-items: center;
  justify-content: center;
}

.top-subline .dot {
  color: var(--muted);
  opacity: 0.6;
}

.muted {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.target-label {
  color: #d0d7ff;
  font-weight: 600;
}

.top-newgame {
  padding: 6px 16px;
}

/* --- Buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 0.45rem 0.95rem;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  color: var(--text);
  transition: background 0.15s ease, border-color 0.15s ease,
    transform 0.08s ease, box-shadow 0.1s ease;
}

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #523400;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12),
              0 10px 24px rgba(0, 0, 0, 0.7);
}

.btn.ghost {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(6, 11, 26, 0.9);
}

.btn:disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}

.btn:not(:disabled):hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.04);
}

.btn.primary:not(:disabled):hover {
  background: var(--accent-strong);
}

/* Hide button icon on very small screens so the label stays readable */
@media (max-width: 480px) {
  .top-right .btn .icon { display: none; }
}

/* --- Score bar --- */

.score-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  background: rgba(3, 9, 18, 0.9);
  border-radius: 0.9rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.score-item {
  display: flex;
  flex-direction: column;
  padding: 0.4rem 0.5rem;
  border-radius: 0.7rem;
  background: rgba(10, 18, 32, 0.85);
}

.score-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.15rem;
}

.score-name {
  font-size: 0.75rem;
  color: var(--muted);
}

.score-round {
  font-size: 0.7rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--accent-strong);
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
  display: inline-block;
}

.score-round.bump {
  animation: round-bump 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes round-bump {
  0%   { transform: scale(1);    background: rgba(255,255,255,0.06); }
  35%  { transform: scale(1.6);  background: rgba(255,93,122,0.85); color: #fff; }
  100% { transform: scale(1);    background: rgba(255,255,255,0.06); }
}

/* Highlight the player's own score cell */
.score-item-you {
  background: rgba(255, 207, 64, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 207, 64, 0.22);
}
.score-item-you .score-name {
  color: var(--accent-strong);
  font-weight: 600;
}

.score-value {
  font-size: 1rem;
  font-weight: 600;
  transition: transform 0.2s ease, color 0.2s ease;
}

.score-value.updated,
.seat-round-seat.updated {
  transform: scale(1.25);
  color: var(--accent-strong);
}

/* --- Table --- */

.table-wrapper {
  margin-top: 0.1rem;
  background: radial-gradient(circle at 10% 0, #1b5c35, #032015 60%);
  border-radius: 1.3rem;
  padding: 1.1rem;
  border: 1px solid rgba(0, 0, 0, 0.7);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex: 1 1 auto;
}

.table-felt {
  position: relative;
  border-radius: 1.1rem;
  /* Layered felt:
     1. Subtle fabric-grain noise (SVG turbulence)
     2. Soft diagonal weave stripes
     3. Radial vignette from felt color to its dark variant */
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.018) 0 2px,
      transparent 2px 5px
    ),
    radial-gradient(ellipse at center, var(--felt) 0%, var(--felt-dark) 78%);
  background-size: 220px 220px, auto, auto;
  border: 10px solid var(--felt-edge);
  box-shadow:
    inset 0 0 80px rgba(0, 0, 0, 0.6),
    inset 0 0 160px rgba(0, 0, 0, 0.35),
    0 12px 40px rgba(0, 0, 0, 0.55);
  flex: 1 1 auto;
  min-height: 320px;
  overflow: hidden;
}

/* Soft inner vignette overlay for extra depth without affecting children */
.table-felt::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(0, 0, 0, 0.35) 100%
  );
}

/* --- Seats --- */

.seat {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--muted);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.seat-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.45rem 0.85rem 0.5rem;
  border-radius: 0.85rem;
  background: linear-gradient(180deg, rgba(20, 28, 50, 0.85), rgba(5, 10, 22, 0.85));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.seat-name {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.seat-meta {
  display: flex;
  gap: 0.35rem;
  font-size: 0.66rem;
}

.seat-tricks {
  padding: 0.08rem 0.5rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.seat-round-seat {
  display: none;
}

.seat-active .seat-header {
  background: linear-gradient(180deg, rgba(58, 42, 19, 0.95), rgba(20, 14, 4, 0.95));
  border-color: rgba(255, 207, 64, 0.65);
  animation: seat-active-pulse 2.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.seat-active .seat-name {
  color: var(--accent-strong);
}

/* Breathy pulse: glow + subtle scale breath (1 → 1.025 → 1) */
@keyframes seat-active-pulse {
  0%,100% {
    box-shadow:
      0 0 0 2px rgba(255, 207, 64, 0.4),
      0 0 16px rgba(255, 207, 64, 0.2),
      0 6px 18px rgba(0, 0, 0, 0.6);
    transform: translateY(-1px) scale(1);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(255, 207, 64, 0.8),
      0 0 32px rgba(255, 207, 64, 0.55),
      0 0 52px rgba(255, 207, 64, 0.25),
      0 6px 18px rgba(0, 0, 0, 0.6);
    transform: translateY(-2px) scale(1.025);
  }
}

.seat-collecting .seat-header {
  box-shadow: 0 0 0 1px var(--accent-soft), 0 0 20px rgba(0, 0, 0, 0.9);
  background: rgba(0, 0, 0, 0.7);
  animation: seatWinPulse 0.55s ease-out;
}

@keyframes seatWinPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
  40%  { box-shadow: 0 0 18px 6px rgba(255, 255, 255, 0.25); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* Seat positions */
.seat-north { top: 0.6rem; left: 50%; transform: translateX(-50%); }
.seat-south { bottom: 0.6rem; left: 50%; transform: translateX(-50%); }
.seat-west  { left: 0.6rem; top: 50%; transform: translateY(-50%); }
.seat-east  { right: 0.6rem; top: 50%; transform: translateY(-50%); }

/* --- Table cards / status badge --- */

.table-card-slot {
  margin-top: 0.35rem;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-table {
  transform: translateY(0);
}

.table-status-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 207, 64, 0.35);
  box-shadow:
    0 0 22px rgba(0, 0, 0, 0.55),
    0 0 0 4px rgba(0, 0, 0, 0.25);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-strong);
  pointer-events: none;
  max-width: 260px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* --- Hand --- */

.hand-section {
  margin-top: 0.8rem;
  padding: 0.7rem 0.9rem 0.9rem;
  border-radius: 1rem;
  background: radial-gradient(circle at top, #11192f, #050913);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.7);
  position: relative;
}

.hand {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 1.25rem;
  min-height: 100px;
}

/* --- Cards --- */

.card {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 76px;
  padding: 0.2rem;
  border-radius: 0.6rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.55);
  color: #222;
  font-size: 1.25rem;
  font-weight: 600;
  user-select: none;
}

.card span {
  pointer-events: none;
}

.card-hand {
  cursor: default;
  outline: none;
  transform: scale(1.22);
  transform-origin: bottom;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
              border-color 0.18s ease, background 0.18s ease;
}

.card-hand.card-playable {
  cursor: pointer;
  border-color: rgba(255, 207, 64, 0.9);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.8),
              0 0 0 1px rgba(255, 207, 64, 0.5);
}

.card-hand.card-playable:hover {
  transform: scale(1.22) translateY(-6px);
}

.card-hand.card-disabled {
  opacity: 0.42;
  filter: grayscale(0.6) brightness(0.75);
  cursor: default;
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.card-hand.card-disabled:hover {
  transform: none;
}

/* --- Card play + collect animations --- */

.card-play-enter {
  animation: card-play-in 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* "Slam down from above" with settle wobble */
@keyframes card-play-in {
  0%   { transform: translateY(-34px) scale(1.18) rotate(-7deg); opacity: 0; filter: drop-shadow(0 18px 14px rgba(0,0,0,0.7)); }
  28%  { opacity: 1; }
  55%  { transform: translateY(4px) scale(0.94) rotate(3deg);    opacity: 1; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.9)); }
  75%  { transform: translateY(-2px) scale(1.03) rotate(-1deg);  }
  100% { transform: translateY(0) scale(1) rotate(0deg);         opacity: 1; filter: drop-shadow(0 7px 14px rgba(0,0,0,0.55)); }
}

.card-collect {
  pointer-events: none;
}

/* "Gather, then fling" — brief scale wobble before flight toward
   the winning seat's name plaque (target computed at runtime via --cx/--cy). */
.card-collect-to-target {
  animation: card-collect-to-target 0.8s cubic-bezier(0.5, 0, 0.2, 1) forwards;
}

@keyframes card-collect-to-target {
  0%   { transform: translate(0, 0) scale(1) rotate(0);                                  opacity: 1; }
  15%  { transform: translate(0, -2px) scale(1.1) rotate(2deg);                          opacity: 1; }
  25%  { transform: translate(0, 0) scale(1.07) rotate(-2deg);                           opacity: 1; }
  100% { transform: translate(var(--cx, 0), var(--cy, 0)) scale(0.18) rotate(-10deg);    opacity: 0; }
}

/* --- Center overlays (Next hand / Winner) --- */

.center-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 70;
}

.center-overlay.hidden {
  display: none;
}

.center-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.center-overlay.animating::before {
  opacity: 1;
}

.center-overlay-box {
  position: relative;
  z-index: 71;
  min-width: 280px;
  max-width: 380px;
  padding: 1.6rem 1.6rem 1.3rem;
  border-radius: 1.2rem;
  background: radial-gradient(circle at 30% 0%, #1f2a47, #060913);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  text-align: center;
  opacity: 0;
  transform: translateY(16px) scale(0.92);
}

.center-overlay.animating .center-overlay-box {
  animation: overlay-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes overlay-in {
  0%   { opacity: 0; transform: translateY(24px) scale(0.88); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1);       }
}

.center-overlay-title {
  font-size: 1.55rem;
  font-weight: 800;
  margin-bottom: 0.55rem;
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, #ffffff 0%, #c6cee6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.center-overlay-text {
  font-size: 0.92rem;
  color: var(--muted);
  margin-bottom: 1.1rem;
  line-height: 1.4;
}

.center-overlay-box .btn.primary {
  font-size: 0.9rem;
  padding: 0.6rem 1.3rem;
}

/* Celebrate variant (you win!) — warm golden gradient + glow */
.center-overlay.celebrate .center-overlay-box {
  background:
    radial-gradient(circle at 30% 0%, #3a2a13, #0b0910),
    radial-gradient(circle at 50% 100%, rgba(255, 207, 64, 0.25), transparent 60%);
  border-color: rgba(255, 207, 64, 0.5);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.95),
    0 0 80px rgba(255, 207, 64, 0.35),
    0 0 0 1px rgba(255, 207, 64, 0.15) inset;
}

.center-overlay.celebrate .center-overlay-title {
  background: linear-gradient(180deg, #ffe58e 0%, #ffb347 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px rgba(255, 207, 64, 0.4);
  animation: title-shimmer 2.5s ease-in-out infinite;
}

@keyframes title-shimmer {
  0%,100% { filter: brightness(1); }
  50%     { filter: brightness(1.18); }
}

/* Confetti (tasteful — only runs when celebrating) */
.confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 72;
  opacity: 0;
}

.center-overlay.celebrate.animating .confetti {
  opacity: 1;
}

.confetti span {
  position: absolute;
  top: -10%;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
}

.center-overlay.celebrate.animating .confetti span {
  animation: confetti-fall 3.2s cubic-bezier(0.1, 0.6, 0.4, 1) forwards;
}

/* Stagger + randomize 20 pieces */
.confetti span:nth-child(1)  { left:  6%; background: #ffcf40; animation-delay: 0.05s; transform: rotate(12deg);  }
.confetti span:nth-child(2)  { left: 12%; background: #ff5d7a; animation-delay: 0.22s; transform: rotate(-8deg);  }
.confetti span:nth-child(3)  { left: 18%; background: #6c8cff; animation-delay: 0.11s; transform: rotate(20deg);  }
.confetti span:nth-child(4)  { left: 24%; background: #5ce1a4; animation-delay: 0.38s; transform: rotate(-15deg); }
.confetti span:nth-child(5)  { left: 30%; background: #ffcf40; animation-delay: 0.02s; transform: rotate(5deg);   }
.confetti span:nth-child(6)  { left: 36%; background: #ff5d7a; animation-delay: 0.28s; transform: rotate(-22deg); }
.confetti span:nth-child(7)  { left: 42%; background: #6c8cff; animation-delay: 0.14s; transform: rotate(10deg);  }
.confetti span:nth-child(8)  { left: 48%; background: #5ce1a4; animation-delay: 0.33s; transform: rotate(-6deg);  }
.confetti span:nth-child(9)  { left: 54%; background: #ffcf40; animation-delay: 0.19s; transform: rotate(18deg);  }
.confetti span:nth-child(10) { left: 60%; background: #ff5d7a; animation-delay: 0.06s; transform: rotate(-12deg); }
.confetti span:nth-child(11) { left: 66%; background: #6c8cff; animation-delay: 0.41s; transform: rotate(8deg);   }
.confetti span:nth-child(12) { left: 72%; background: #5ce1a4; animation-delay: 0.16s; transform: rotate(-19deg); }
.confetti span:nth-child(13) { left: 78%; background: #ffcf40; animation-delay: 0.29s; transform: rotate(14deg);  }
.confetti span:nth-child(14) { left: 84%; background: #ff5d7a; animation-delay: 0.08s; transform: rotate(-4deg);  }
.confetti span:nth-child(15) { left: 90%; background: #6c8cff; animation-delay: 0.35s; transform: rotate(22deg);  }
.confetti span:nth-child(16) { left:  9%; background: #5ce1a4; animation-delay: 0.45s; transform: rotate(-10deg); }
.confetti span:nth-child(17) { left: 27%; background: #ffcf40; animation-delay: 0.52s; transform: rotate(16deg);  }
.confetti span:nth-child(18) { left: 45%; background: #ff5d7a; animation-delay: 0.48s; transform: rotate(-7deg);  }
.confetti span:nth-child(19) { left: 63%; background: #6c8cff; animation-delay: 0.55s; transform: rotate(11deg);  }
.confetti span:nth-child(20) { left: 81%; background: #5ce1a4; animation-delay: 0.62s; transform: rotate(-17deg); }

@keyframes confetti-fall {
  0%   { top: -10%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 110%; opacity: 0; }
}

/* --- Passing phase --- */

.card-hand.card-pass-selectable {
  cursor: pointer;
  border-color: rgba(108, 140, 255, 0.9);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.8),
              0 0 0 1px rgba(108, 140, 255, 0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-hand.card-pass-selectable:hover {
  transform: scale(1.22) translateY(-4px);
}

.card-hand.card-pass-selected {
  transform: scale(1.22) translateY(-10px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
}

.card-pass-incoming {
  animation: card-pass-in 0.4s ease-out;
}

@keyframes card-pass-in {
  0%   { transform: translateY(-10px) scale(0.9); opacity: 0; }
  60%  { transform: translateY(0) scale(1.04);     opacity: 1; }
  100% { transform: translateY(0) scale(1);        opacity: 1; }
}

/* Redesigned pass panel — centered floating overlay above the table */
.pass-controls {
  position: fixed;
  left: 50%;
  top: 61%;
  transform: translate(-50%, -50%);
  z-index: 60;
  display: flex;
  justify-content: center;
  pointer-events: none;
  animation: pass-panel-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pass-panel-in {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.8) translateY(10px); }
  60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.04) translateY(0); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) translateY(0); }
}

.pass-panel {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0.9rem 0.75rem 1.05rem;
  border-radius: 1.1rem;
  background: linear-gradient(180deg, rgba(30, 42, 85, 0.97), rgba(8, 13, 32, 0.97));
  border: 1px solid rgba(108, 140, 255, 0.55);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(108, 140, 255, 0.15),
    0 0 40px rgba(108, 140, 255, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  max-width: calc(100vw - 1.5rem);
  flex-wrap: wrap;
}

.pass-panel-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.pass-dir-icon {
  width: 1.4em;
  height: 1.4em;
  color: rgba(170, 195, 255, 0.95);
  transition: transform 0.25s ease;
}

.pass-panel-labels {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pass-panel-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pass-panel-sub {
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
}

.pass-slots {
  display: flex;
  gap: 0.35rem;
}

.pass-slot {
  width: 34px;
  height: 48px;
  border-radius: 0.35rem;
  border: 1px dashed rgba(108, 140, 255, 0.5);
  background: rgba(0, 0, 0, 0.35);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.pass-slot.filled {
  border: none;
  background: transparent;
}

.pass-slot-card {
  width: 100%;
  height: 100%;
  border-radius: 0.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--card-bg);
  color: #222;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55);
  animation: slot-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slot-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Suit colors for slot cards */
.pass-slot-card.card-heart {
  background: linear-gradient(135deg, #b0002a, #ff2d55);
  color: #fff;
}
.pass-slot-card.card-spade {
  background: linear-gradient(135deg, #0c0c0c, #2a2a2a);
  color: #fff;
}
.pass-slot-card.card-diamond {
  background: #fff;
  border: 1px solid #d32f2f;
  color: #d32f2f;
}
.pass-slot-card.card-club {
  background: #fff;
  border: 1px solid #111;
  color: #111;
}

.pass-confirm-btn {
  padding: 0.55rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 700;
  gap: 0.4rem;
}

.pass-confirm-btn:disabled {
  background: rgba(108, 140, 255, 0.25);
  border-color: rgba(108, 140, 255, 0.25);
  color: rgba(255, 255, 255, 0.45);
  opacity: 1;
}

.pass-confirm-btn.ready {
  background: linear-gradient(180deg, #7ea4ff, #4a6bff);
  border-color: #7ea4ff;
  color: #fff;
  animation: pass-ready-pulse 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

@keyframes pass-ready-pulse {
  0%,100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(108,140,255,0.65), 0 6px 18px rgba(74,107,255,0.45);
  }
  45% {
    transform: scale(1.06);
    box-shadow: 0 0 0 12px rgba(108,140,255,0), 0 10px 26px rgba(74,107,255,0.6);
  }
  70% {
    transform: scale(0.98);
    box-shadow: 0 0 0 14px rgba(108,140,255,0), 0 4px 14px rgba(74,107,255,0.3);
  }
}

/* --- Suit colours --- */

.card-heart.card-hand,
.card-heart.card-table,
.card-heart.card-lead {
  background: linear-gradient(135deg, #b0002a, #ff2d55);
  color: #ffffff;
  border: none;
}
.card-heart.card-hand span,
.card-heart.card-table span,
.card-heart.card-lead span {
  color: #ffffff;
}

.card-spade.card-hand,
.card-spade.card-table,
.card-spade.card-lead {
  background: linear-gradient(135deg, #0c0c0c, #2a2a2a);
  color: #ffffff;
  border: none;
}
.card-spade.card-hand span,
.card-spade.card-table span,
.card-spade.card-lead span {
  color: #ffffff;
}

.card-diamond.card-hand,
.card-diamond.card-table,
.card-diamond.card-lead {
  background: #ffffff;
  border: 2px solid #d32f2f;
  color: #d32f2f;
}
.card-diamond.card-hand span,
.card-diamond.card-table span,
.card-diamond.card-lead span {
  color: #d32f2f;
}

.card-club.card-hand,
.card-club.card-table,
.card-club.card-lead {
  background: #ffffff;
  border: 2px solid #111111;
  color: #111111;
}
.card-club.card-hand span,
.card-club.card-table span,
.card-club.card-lead span {
  color: #111111;
}

/* --- Queen of Spades highlight --- */

.card-queen-spades {
  position: relative;
}

.card-queen-pulse {
  animation: queen-pulse 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* Slow, ominous red breath — dread builds then exhales */
@keyframes queen-pulse {
  0%,100% {
    box-shadow:
      0 0 0 2px rgba(255, 93, 122, 0.75),
      0 0 18px rgba(255, 93, 122, 0.35),
      0 0 18px rgba(0, 0, 0, 0.9);
  }
  45% {
    box-shadow:
      0 0 0 3px rgba(255, 45, 85, 1),
      0 0 38px rgba(255, 45, 85, 0.85),
      0 0 60px rgba(255, 45, 85, 0.4),
      0 0 18px rgba(0, 0, 0, 0.9);
  }
}

.card-queen-spades::after {
  content: "+13";
  position: absolute;
  bottom: -6px;
  right: -8px;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff2d55, #b0002a);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

/* --- Hearts-broken dramatic center burst --- */

.hearts-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hearts-burst-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    rgba(255, 60, 90, 0.6) 0%,
    rgba(255, 60, 90, 0.3) 28%,
    rgba(255, 60, 90, 0) 62%
  );
  animation: hearts-flash 1s ease-out forwards;
}

@keyframes hearts-flash {
  0%   { opacity: 0; transform: scale(0.6); }
  12%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.15); }
}

/* Expanding shock ring */
.hearts-burst::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  border: 3px solid rgba(255, 60, 90, 0.85);
  box-shadow:
    0 0 30px rgba(255, 60, 90, 0.5),
    inset 0 0 20px rgba(255, 60, 90, 0.4);
  animation: hearts-ring 1s cubic-bezier(0.1, 0.8, 0.25, 1) forwards;
}

@keyframes hearts-ring {
  0%   { transform: scale(0.3); opacity: 0; border-width: 6px; }
  15%  { opacity: 1; }
  100% { transform: scale(6); opacity: 0; border-width: 1px; }
}

.hearts-burst-heart {
  position: relative;
  font-size: 7rem;
  color: #ff2d55;
  text-shadow:
    0 0 40px rgba(255, 60, 90, 0.9),
    0 0 80px rgba(255, 60, 90, 0.55);
  animation: hearts-burst-heart 1.15s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes hearts-burst-heart {
  0%   { transform: scale(0.15) rotate(-25deg); opacity: 0; }
  22%  { transform: scale(1.35) rotate(6deg);   opacity: 1; }
  38%  { transform: scale(1.05) rotate(-4deg);  opacity: 1; }
  52%  { transform: scale(1.15) rotate(2deg);   opacity: 1; }
  70%  { transform: scale(1.08) rotate(-1deg);  opacity: 0.95; }
  100% { transform: scale(1.3) rotate(0deg);    opacity: 0; }
}

/* --- Flying score indicator (+N flies to winning seat) --- */

.flying-score {
  position: absolute;
  pointer-events: none;
  font-size: 1.6rem;
  font-weight: 800;
  color: #ff5d7a;
  text-shadow:
    0 0 12px rgba(255, 93, 122, 0.9),
    0 2px 6px rgba(0, 0, 0, 0.9);
  z-index: 45;
  transform: translate(-50%, -50%);
  animation: flying-score-travel 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  will-change: transform, opacity;
}

.flying-score-queen {
  color: #ffe58e;
  font-size: 2rem;
  text-shadow:
    0 0 18px rgba(255, 207, 64, 0.9),
    0 2px 6px rgba(0, 0, 0, 0.9);
}

@keyframes flying-score-travel {
  0% {
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0;
  }
  15% {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 1;
  }
  30% {
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 1;
  }
  45% {
    transform: translate(-50%, -50%) scale(1.05);
    opacity: 1;
  }
  /* Arc mid-point: half way in x/y plus a lift upward */
  72% {
    transform:
      translate(
        calc(-50% + var(--fx) * 0.55),
        calc(-50% + var(--fy) * 0.55 - 28px)
      )
      scale(0.85);
    opacity: 1;
  }
  100% {
    transform:
      translate(calc(-50% + var(--fx)), calc(-50% + var(--fy)))
      scale(0.5);
    opacity: 0;
  }
}

/* --- Hearts-broken indicator (top-left of felt) --- */

.hearts-indicator {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  padding: 0.28rem 0.55rem;
  border-radius: 0.55rem;
  font-size: 1.1rem;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  z-index: 10;
  color: #ffffff;
}

.hearts-indicator-closed::before {
  content: "♡";
  color: #ffffff88;
}

.hearts-indicator-open::before {
  content: "♥";
  color: #ff3a3a;
}

.hearts-indicator-open {
  animation: heartsFloating 0.9s ease-out;
}

@keyframes heartsFloating {
  0%   { transform: scale(0.8) translateY(-3px); opacity: 0; }
  60%  { transform: scale(1.2) translateY(0);    opacity: 1; }
  100% { transform: scale(1) translateY(0);      opacity: 1; }
}

/* --- Lead suit indicator (top-right of felt) — pill style --- */

.lead-suit-indicator {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.6rem 0.3rem 0.55rem;
  border-radius: 999px;
  background: rgba(6, 11, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
}

.lead-suit-indicator.hidden {
  display: none;
}

.lead-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.lead-suit {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
}

.lead-suit.card-heart   { color: #ff4a66; text-shadow: 0 0 8px rgba(255,74,102,0.6); }
.lead-suit.card-diamond { color: #ff6a8a; text-shadow: 0 0 8px rgba(255,106,138,0.5); }
.lead-suit.card-spade   { color: #e8eaf0; text-shadow: 0 0 8px rgba(255,255,255,0.4); }
.lead-suit.card-club    { color: #c8ccd6; text-shadow: 0 0 8px rgba(255,255,255,0.3); }

.lead-suit-indicator.pop {
  animation: leadSuitPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes leadSuitPop {
  0%   { transform: scale(0.6) translateY(-4px); opacity: 0; }
  60%  { transform: scale(1.08) translateY(0);   opacity: 1; }
  100% { transform: scale(1) translateY(0);      opacity: 1; }
}

/* --- Currently-winning card highlight ---
   Split: .card-winning-glow = always-on ring + star + intro anim,
          .card-winning-pulse = infinite breathing pulse. */

.card.card-winning-glow {
  box-shadow:
    0 0 0 2px rgba(255, 207, 64, 0.95),
    0 0 18px rgba(255, 207, 64, 0.7),
    0 0 36px rgba(255, 207, 64, 0.35),
    0 10px 22px rgba(0, 0, 0, 0.7);
  position: relative;
}

/* Ring burst — only plays when the winner actually changes */
.card-winning-appear::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 10px;
  border: 2px solid rgba(255, 207, 64, 0.9);
  box-shadow: 0 0 24px rgba(255, 207, 64, 0.6);
  opacity: 0;
  pointer-events: none;
  animation: winning-ring-appear 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes winning-ring-appear {
  0%   { transform: scale(1.3); opacity: 0; }
  50%  { transform: scale(0.92); opacity: 1; }
  100% { transform: scale(1);    opacity: 0; }
}

.card-winning-glow::before {
  content: "★";
  position: absolute;
  top: -8px;
  right: -8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffdf7a, #ffbe2e);
  color: #523400;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5), 0 0 10px rgba(255,207,64,0.7);
  z-index: 2;
}

.card-winning-appear::before {
  animation: winning-star-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes winning-star-pop {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
  60%  { transform: scale(1.25) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0);      opacity: 1; }
}

/* Glow breathing only — no scale bob on the card itself */
.card-winning-pulse {
  animation: winning-card-glow-pulse 2s ease-in-out infinite;
}

@keyframes winning-card-glow-pulse {
  0%,100% {
    box-shadow:
      0 0 0 2px rgba(255, 207, 64, 0.9),
      0 0 16px rgba(255, 207, 64, 0.55),
      0 0 30px rgba(255, 207, 64, 0.25),
      0 10px 22px rgba(0, 0, 0, 0.7);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(255, 223, 122, 1),
      0 0 26px rgba(255, 207, 64, 0.9),
      0 0 50px rgba(255, 207, 64, 0.45),
      0 10px 22px rgba(0, 0, 0, 0.7);
  }
}

/* --- Seat tricks bump --- */

.seat-tricks.bump {
  animation: seat-bump 0.35s ease-out;
}

@keyframes seat-bump {
  0%   { transform: translateY(0) scale(1);       color: var(--muted); }
  40%  { transform: translateY(-4px) scale(1.12); color: #ffeb3b; }
  100% { transform: translateY(0) scale(1);       color: var(--muted); }
}

/* --- Modal --- */

.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.hidden {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.modal-content {
  position: relative;
  z-index: 51;
  width: min(420px, 90vw);
  max-height: 80vh;
  border-radius: 1rem;
  background: radial-gradient(circle at 0 0, #192039, #050711);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: var(--shadow-soft);
  padding: 0.85rem 0.95rem 0.9rem;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
}

.modal-header h2 {
  font-size: 1rem;
  margin: 0;
}

.modal-close {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.modal-close .icon {
  width: 1.2em;
  height: 1.2em;
}

.modal-body {
  font-size: 0.85rem;
  color: var(--muted);
  overflow-y: auto;
  margin-bottom: 0.6rem;
}

.modal-body ul {
  padding-left: 1.1rem;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
}

/* --- Responsive --- */

@media (max-width: 900px) {
  .table-felt { min-height: 280px; }
}

@media (max-width: 640px) {
  .app { padding: 0.75rem; gap: 0.6rem; }

  .top {
    gap: 0.4rem;
    padding: 0.35rem 0.2rem;
  }
  .top-center h1 { font-size: 1.2rem; margin-bottom: 2px; }
  .top-subline { font-size: 11px; gap: 6px; }
  .muted { font-size: 11px; }

  .score-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    padding: 0.55rem 0.6rem;
  }

  .score-item { padding: 0.5rem 0.6rem; }

  .table-wrapper {
    margin-top: 0.35rem;
    padding: 0.55rem;
  }

  .table-felt {
    border-width: 6px;
    min-height: 52vh;
  }

  .seat-header {
    padding: 0.35rem 0.55rem;
  }

  .table-status-badge {
    font-size: 0.72rem;
    padding: 0.3rem 0.7rem;
    max-width: 220px;
  }

  .hand-section {
    margin-top: 0.55rem;
    padding: 0.65rem 0.7rem 0.8rem;
  }

  .hand {
    gap: 0.55rem;
  }

  .card {
    width: 46px;
    height: 64px;
    font-size: 0.9rem;
  }

  .pass-controls {
    top: auto;
    bottom: 28%;
    transform: translate(-50%, 0);
    width: calc(100vw - 1rem);
  }
  @keyframes pass-panel-in {
    0%   { opacity: 0; transform: translate(-50%, 0) scale(0.85); }
    60%  { opacity: 1; transform: translate(-50%, 0) scale(1.04); }
    100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  }
  .pass-panel {
    gap: 0.55rem;
    padding: 0.55rem 0.6rem;
    width: 100%;
    justify-content: space-between;
  }
  .pass-panel-label { font-size: 0.78rem; }
  .pass-panel-sub { font-size: 0.65rem; }
  .pass-slot { width: 28px; height: 40px; }
  .pass-slot-card { font-size: 0.68rem; }
  .pass-confirm-btn { padding: 0.5rem 0.85rem; font-size: 0.8rem; }
  .pass-confirm-btn span { display: none; }

  .hearts-burst-heart { font-size: 5rem; }
  .flying-score { font-size: 1.3rem; }
  .flying-score-queen { font-size: 1.6rem; }

  .center-overlay-box {
    min-width: 240px;
    padding: 1.2rem 1.1rem 1rem;
  }
  .center-overlay-title { font-size: 1.3rem; }
  .center-overlay-text { font-size: 0.85rem; }
}