/*
 * overlays.css
 * All overlay panels and modals: bid panel, round score overlay, winner podium,
 * settings modal, rules modal, leave confirmation, score history modal,
 * HUD buttons (leave, settings, fullscreen), disconnect notice,
 * particle/confetti/fireworks element styles, and all responsive breakpoints.
 *
 * Reuse in another card game:
 *   - Keep settings-modal, rules-modal, leave-modal structures
 *   - Replace bid-panel, score-overlay, winner-overlay with your game's UI
 *   - Keep the responsive breakpoints and particle CSS
 */

/* ════════════════════════════════════════
   BID PANEL
   Floats in the upper portion of the screen
   so the player's hand at bottom stays visible
════════════════════════════════════════ */
#bid-panel {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* Only cover top ~58% — hand stays visible below */
  bottom: 42%;
  z-index: 100;
  display: none; align-items: center; justify-content: center;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.78) 0%, rgba(0,0,0,.6) 75%, transparent 100%);
}
#bid-panel.show { display: flex; pointer-events: all; animation: overlayIn .28s cubic-bezier(.16,1,.3,1); }

.bp-inner {
  background: linear-gradient(150deg, #0a1c14 0%, #06110c 100%);
  border: 1px solid rgba(201,150,14,.28);
  border-radius: 22px; padding: 14px 20px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  min-width: 300px; max-width: 420px; width: 92%;
  pointer-events: all;
  box-shadow: 0 0 0 1px rgba(34,212,180,.04), 0 32px 80px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.03);
}
.bp-inner h3 {
  font-family: 'Playfair Display SC', serif;
  font-size: 15px; font-weight: 700; color: var(--gold2);
  letter-spacing: 4px; text-transform: uppercase; margin: 0;
}
.bp-inner .bp-prompt {
  font-size: 10px; font-weight: 500; color: rgba(255,255,255,.4);
  text-align: center; line-height: 1.5; letter-spacing: .3px; margin: 0;
}
.bp-info { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; }
.bp-info-chip {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px; padding: 3px 10px;
  font-size: 10px; font-weight: 600; color: rgba(255,255,255,.65);
  display: flex; align-items: center; gap: 4px; letter-spacing: .5px;
}
.bp-info-chip .chip-trump { font-size: 14px; }
.bp-info-chip.trump-chip { border-color: rgba(201,150,14,.3); color: var(--gold2); }

.bp-bids-so-far { width: 100%; display: flex; flex-direction: column; gap: 4px; }
.bp-bids-label { font-size: 9px; font-weight: 700; color: rgba(255,255,255,.25); letter-spacing: 3px; text-transform: uppercase; text-align: center; }
.bp-bid-rows { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; width: 100%; }
.bp-bid-row {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
  border-radius: 7px; padding: 4px 9px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 11px; font-weight: 600; transition: border-color .2s, background .2s;
  min-width: 60px;
}
.bp-bid-row .bp-bid-name { color: rgba(255,255,255,.55); font-size: 10px; text-align: center; }
.bp-bid-row .bp-bid-val { font-family: 'Playfair Display', serif; font-size: 14px; font-weight: 700; color: var(--gold2); }
.bp-bid-row.waiting .bp-bid-val { color: rgba(255,255,255,.18); font-size: 10px; font-style: italic; font-family: 'DM Sans', sans-serif; }
.bp-bid-row.done { border-color: rgba(201,150,14,.15); }
.bp-bid-row.done .bp-bid-name { color: rgba(255,255,255,.35); }
.bp-bid-row.current { background: rgba(34,212,180,.07); border-color: rgba(34,212,180,.35); }
.bp-bid-row.current .bp-bid-name { color: rgba(255,255,255,.9); font-weight: 700; }
.bp-order-num {
  min-width: 16px; height: 16px; border-radius: 4px;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.35);
  font-size: 9px; font-weight: 700; font-family: 'DM Sans', sans-serif;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bp-bid-row.current .bp-order-num { background: rgba(34,212,180,.2); color: rgba(34,212,180,.9); }
.bp-bid-row.done .bp-order-num { background: rgba(201,150,14,.12); color: rgba(201,150,14,.6); }
.bp-dealer-tag {
  display: inline-block; font-size: 8px; font-weight: 700; font-family: 'DM Sans', sans-serif;
  background: rgba(201,150,14,.18); color: var(--gold2);
  border: 1px solid rgba(201,150,14,.3); border-radius: 3px;
  padding: 0 3px; margin-left: 3px; vertical-align: middle; line-height: 14px;
}
.bp-bid-now { color: rgba(34,212,180,.9) !important; font-size: 13px !important; animation: bpBidNowPulse 1s ease-in-out infinite; }
@keyframes bpBidNowPulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* Bid number grid */
.bid-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; width: 100%; }
.bid-btn {
  padding: 13px 0;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  color: rgba(255,255,255,.8);
  font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700;
  cursor: pointer; transition: all .16s;
  position: relative; overflow: hidden;
}
.bid-btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--gold2), var(--gold));
  opacity: 0; transition: opacity .16s;
}
.bid-btn span { position: relative; z-index: 1; }
.bid-btn:hover {
  border-color: var(--gold); color: #0a0a00;
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 8px 20px rgba(201,150,14,.3);
}
.bid-btn:hover::before { opacity: 1; }
.bid-btn:active { transform: scale(.97); }

/* Bidding dim — hand always fully visible */
#game-table.bidding-mode #center-zone { opacity: .3; pointer-events: none; transition: opacity .3s; }
#game-table.bidding-mode .p-area { opacity: .3; transition: opacity .3s; }
#game-table.bidding-mode .p-area.my-area {
  opacity: 1;
  /* Subtle teal glow to signal "these are your cards to bid on" */
  filter: drop-shadow(0 0 16px rgba(34,212,180,.18));
  transition: opacity .3s, filter .3s;
}


/* ── Bid panel hide/show ── */
#bp-hide-btn {
  position: absolute; top: 10px; right: 13px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; padding: 4px 10px;
  color: rgba(255,255,255,.45); font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer;
  transition: all .15s;
}
#bp-hide-btn:hover { background: rgba(255,255,255,.12); color: rgba(255,255,255,.8); }

#bid-panel.collapsed {
  background: transparent; pointer-events: none;
}
#bid-panel.collapsed .bp-inner { display: none; }

/* Floating BID button near the active bidder label */
.bid-open-btn {
  display: none;
  position: absolute; z-index: 110;
  background: linear-gradient(135deg, #c9960e, #d4a017);
  border: none; border-radius: 20px;
  padding: 5px 13px; font-size: 11px; font-weight: 800;
  letter-spacing: 1.5px; color: #0a0700; cursor: pointer;
  box-shadow: 0 3px 12px rgba(201,150,14,.5);
  animation: bidPulse 1.2s ease-in-out infinite;
  white-space: nowrap; pointer-events: all;
  transform: translateX(-50%);
}
.bid-open-btn.visible { display: block; }
@keyframes bidPulse {
  0%,100% { box-shadow: 0 3px 12px rgba(201,150,14,.5); }
  50% { box-shadow: 0 3px 22px rgba(201,150,14,.9); transform: translateX(-50%) scale(1.05); }
}

/* ════════════════════════════════════════
   ROUND TRANSITION OVERLAY
════════════════════════════════════════ */
#round-transition {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0;
}
#round-transition.show { pointer-events: all; }

@keyframes rtFadeIn  { from { opacity:0 } to { opacity:1 } }
@keyframes rtFadeOut { from { opacity:1 } to { opacity:0 } }
@keyframes rtSuitPop {
  0%   { transform: scale(0.4) rotate(-15deg); opacity:0; }
  60%  { transform: scale(1.12) rotate(4deg);  opacity:1; }
  80%  { transform: scale(0.96) rotate(-2deg); }
  100% { transform: scale(1)    rotate(0deg);  opacity:1; }
}
@keyframes rtSlideUp {
  from { opacity:0; transform: translateY(22px); }
  to   { opacity:1; transform: translateY(0); }
}

#rt-inner {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center;
  width: 100%; height: 100%;
}

/* Full-screen color wash behind everything */
#rt-inner::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--rt-bg, rgba(0,0,0,.92));
  transition: background .1s;
}

#rt-round-label {
  position: relative;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 5px;
  text-transform: uppercase; color: rgba(255,255,255,.4);
  animation: rtSlideUp .4s .1s both;
}

#rt-suit-symbol {
  position: relative;
  font-size: clamp(80px, 18vw, 140px);
  line-height: 1;
  color: var(--rt-color, #fff);
  filter: drop-shadow(0 0 40px var(--rt-glow, rgba(255,255,255,.4)));
  animation: rtSuitPop .55s .25s both;
}

#rt-trump-name {
  position: relative;
  font-family: 'Playfair Display SC', serif;
  font-size: clamp(28px, 6vw, 52px);
  font-weight: 700; letter-spacing: 6px;
  color: var(--rt-color, #fff);
  filter: drop-shadow(0 0 20px var(--rt-glow, rgba(255,255,255,.3)));
  animation: rtSlideUp .4s .5s both;
}

#rt-cards-label {
  position: relative;
  font-size: 14px; font-weight: 600; letter-spacing: 3px;
  color: rgba(255,255,255,.5); text-transform: uppercase;
  animation: rtSlideUp .4s .65s both;
}

#rt-dealer-label {
  position: relative;
  font-size: 12px; font-weight: 500; letter-spacing: 2px;
  color: rgba(255,255,255,.3); text-transform: uppercase;
  animation: rtSlideUp .4s .75s both;
}

/* ════════════════════════════════════════
   SCORE OVERLAY
════════════════════════════════════════ */
#score-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.88); backdrop-filter: blur(10px);
  display: none; align-items: center; justify-content: center;
}
#score-overlay.show { display: flex; animation: overlayIn .32s cubic-bezier(.16,1,.3,1); }

.so-inner {
  background: linear-gradient(150deg, #0a1c14 0%, #06110c 100%);
  border: 1px solid rgba(201,150,14,.22);
  border-radius: 22px; padding: 32px 34px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  max-width: 600px; width: 96%; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 0 0 1px rgba(34,212,180,.03), 0 48px 120px rgba(0,0,0,.9);
}
.so-inner h2 {
  font-family: 'Playfair Display SC', serif;
  font-size: 24px; font-weight: 700; color: var(--gold2); letter-spacing: 5px;
}
.so-inner .round-result {
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,.55);
  text-align: center; line-height: 1.9;
}
.score-tbl { width: 100%; border-collapse: collapse; }
.score-tbl th {
  font-size: 9px; font-weight: 700; color: rgba(255,255,255,.28);
  letter-spacing: 2.5px; text-transform: uppercase;
  padding: 7px 14px; border-bottom: 1px solid rgba(255,255,255,.06); text-align: center;
}
.score-tbl th:first-child { text-align: left; }
.score-tbl td { padding: 10px 14px; text-align: center; font-weight: 600; font-size: 13px; color: rgba(255,255,255,.8); }
.score-tbl tr:nth-child(even) td { background: rgba(255,255,255,.02); }
.score-tbl .pos { color: var(--teal); font-weight: 700; }
.score-tbl .neg { color: var(--red2); font-weight: 700; }
.score-tbl .total-row { color: var(--gold2); font-family: 'Playfair Display', serif; font-weight: 700; font-size: 15px; border-left: 1px solid rgba(201,150,14,.15); }

/* Row reveal animation */
.score-row { will-change: opacity, transform; }

/* Exact-bid gold shimmer sweep */
@keyframes exactFlash {
  0%   { background: transparent; }
  30%  { background: rgba(201,150,14,.18); box-shadow: inset 0 0 20px rgba(201,150,14,.1); }
  100% { background: transparent; }
}
.score-row.exact-flash td { animation: exactFlash 1.2s ease forwards; }

.btn-next {
  padding: 13px 48px; border: none; border-radius: 10px;
  background: linear-gradient(135deg, var(--gold3) 0%, var(--gold2) 50%, var(--gold) 100%);
  color: #1a0e00; font-family: 'Playfair Display SC', serif;
  font-size: 14px; font-weight: 700; letter-spacing: 3px;
  cursor: pointer; text-transform: uppercase;
  box-shadow: 0 4px 0 var(--gold-dim), 0 6px 24px rgba(201,150,14,.3);
  transition: all .18s;
}
.btn-next:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--gold-dim), 0 12px 32px rgba(201,150,14,.45); }
.btn-next:active { transform: translateY(1px); box-shadow: 0 2px 0 var(--gold-dim), 0 4px 12px rgba(201,150,14,.2); }

.btn-lobby2 {
  padding: 8px 22px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px;
  background: transparent; color: rgba(255,255,255,.35);
  font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  cursor: pointer; transition: all .15s;
}
.btn-lobby2:hover { border-color: rgba(217,43,58,.4); color: var(--red2); }

/* ════════════════════════════════════════
   WINNER OVERLAY
════════════════════════════════════════ */
#winner-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: radial-gradient(ellipse 80% 70% at 50% 40%, rgba(30,20,5,.98) 0%, rgba(4,9,10,.99) 100%);
  backdrop-filter: blur(16px);
  display: none; align-items: center; justify-content: center;
  flex-direction: column;
}
#winner-overlay.show { display: flex; animation: overlayIn .45s cubic-bezier(.16,1,.3,1); }

#winner-inner {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  width: 100%; max-width: 680px; padding: 32px 24px 36px;
  max-height: 95vh; overflow-y: auto;
}

#winner-trophy-line {
  display: flex; align-items: center; gap: 18px;
}
#winner-trophy-icon { font-size: 48px; animation: trophyBounce 1.6s ease-in-out infinite; }
@keyframes trophyBounce {
  0%,100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-8px) rotate(4deg); }
}

#winner-overlay h1 {
  font-family: 'Playfair Display SC', serif;
  font-size: 48px; font-weight: 700; color: var(--gold2); letter-spacing: 6px;
  animation: winGlow 1.8s ease-in-out infinite alternate;
}
@keyframes winGlow {
  from { text-shadow: 0 0 18px rgba(201,150,14,.35), 0 0 40px rgba(201,150,14,.1); }
  to   { text-shadow: 0 0 36px rgba(201,150,14,.75), 0 0 70px rgba(201,150,14,.25), 0 0 120px rgba(201,150,14,.08); }
}
#winner-overlay .winner-name {
  font-family: 'Playfair Display', serif;
  font-size: 18px; font-weight: 700; color: rgba(255,255,255,.7); letter-spacing: 3px;
  margin-top: -10px;
}

/* ── Podium ── */
#podium-wrap {
  display: flex; align-items: flex-end; justify-content: center; gap: 10px;
  width: 100%; margin-top: 8px;
}
.podium-slot {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  flex: 1; max-width: 160px;
}
.podium-name-tag {
  font-size: 13px; font-weight: 700; color: rgba(255,255,255,.85);
  letter-spacing: .5px; margin-bottom: 6px;
  text-align: center; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0 4px;
}
.podium-name-tag.is-me { color: var(--gold2); }
.podium-score {
  font-family: 'Playfair Display', serif;
  font-size: 28px; font-weight: 700; color: var(--gold2);
  margin-bottom: 8px; line-height: 1;
}
.podium-medal { font-size: 28px; margin-bottom: 4px; }
.podium-block {
  width: 100%; border-radius: 10px 10px 0 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display SC', serif;
  font-size: 22px; font-weight: 700; letter-spacing: 2px;
  position: relative; overflow: hidden;
}
.podium-block::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, transparent 60%);
  pointer-events: none;
}
/* 1st place */
.podium-slot.rank-1 .podium-block { height: 120px; background: linear-gradient(160deg, #b8860b 0%, #daa520 50%, #b8860b 100%); color: #1a0e00; box-shadow: 0 0 40px rgba(201,150,14,.35), inset 0 1px 0 rgba(255,255,255,.3); }
.podium-slot.rank-1 .podium-score { font-size: 34px; }
/* 2nd place */
.podium-slot.rank-2 .podium-block { height: 82px; background: linear-gradient(160deg, #6b7280 0%, #9ca3af 50%, #6b7280 100%); color: #0a0a0a; box-shadow: 0 0 20px rgba(156,163,175,.2), inset 0 1px 0 rgba(255,255,255,.25); }
/* 3rd place */
.podium-slot.rank-3 .podium-block { height: 56px; background: linear-gradient(160deg, #7c3d12 0%, #b45309 50%, #7c3d12 100%); color: #fff8f0; box-shadow: 0 0 14px rgba(180,83,9,.2), inset 0 1px 0 rgba(255,255,255,.2); }
/* 4th+ */
.podium-slot.rank-other .podium-block { height: 40px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.35); box-shadow: none; }
.podium-slot.rank-other .podium-score { font-size: 20px; color: rgba(255,255,255,.55); }
.podium-slot.rank-other .podium-name-tag { color: rgba(255,255,255,.45); font-size: 11px; }

/* ── Streak flame indicator (on player label) ── */
.streak-flame {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 14px;
  margin-left: 4px;
  animation: flameFlicker 1.2s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 4px rgba(255,120,0,0.8));
}
.streak-count {
  font-size: 11px;
  font-weight: 800;
  color: #ffaa00;
  font-family: 'Playfair Display', serif;
  line-height: 1;
}
@keyframes flameFlicker {
  0%   { transform: scaleY(1)   rotate(-2deg); filter: drop-shadow(0 0 4px rgba(255,120,0,0.8)); }
  100% { transform: scaleY(1.1) rotate(2deg);  filter: drop-shadow(0 0 8px rgba(255,60,0,1));   }
}

/* ── Score milestone celebration ── */
.milestone-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8000;
  background: radial-gradient(ellipse at center, rgba(255,215,0,0.18) 0%, transparent 70%);
  animation: milestoneFlash .7s ease-out forwards;
}
@keyframes milestoneFlash {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
.milestone-banner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  z-index: 8001;
  animation: milestonePop 2.8s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes milestonePop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  12%  { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  20%  { transform: translate(-50%, -50%) scale(1); }
  75%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -55%) scale(0.95); }
}
.milestone-pts {
  font-family: 'Playfair Display SC', serif;
  font-size: 96px;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, #b8860b 0%, #ffd700 40%, #ffe97a 60%, #daa520 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 30px rgba(255,215,0,0.6));
  letter-spacing: -2px;
}
.milestone-label {
  font-family: 'Playfair Display SC', serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 0 20px rgba(255,215,0,0.5);
}
.milestone-name {
  font-size: 14px;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  margin-top: 4px;
}

/* ── End-of-game stats ── */
#end-stats {
  width: 100%;
  max-width: 620px;
  margin-top: 4px;
}
.end-stats-title {
  font-family: 'Playfair Display SC', serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.3);
  text-align: center;
  margin-bottom: 10px;
}
.end-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.end-stat-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 9px 12px;
  animation: statCardIn .4s cubic-bezier(.16,1,.3,1) both;
}
.end-stat-card:nth-child(1) { animation-delay: .1s; }
.end-stat-card:nth-child(2) { animation-delay: .2s; }
.end-stat-card:nth-child(3) { animation-delay: .3s; }
.end-stat-card:nth-child(4) { animation-delay: .4s; }
.end-stat-card:nth-child(5) { animation-delay: .5s; }
.end-stat-card:nth-child(6) { animation-delay: .6s; }
@keyframes statCardIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.end-stat-icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
}
.end-stat-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.end-stat-label {
  font-size: 9px;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  font-weight: 700;
}
.end-stat-value {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#winner-actions {
  display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 6px;
}

/* ════════════════════════════════════════
   SHARED OVERLAY ANIMATION
════════════════════════════════════════ */
@keyframes overlayIn { from{opacity:0;transform:scale(.95) translateY(10px)} to{opacity:1;transform:none} }

/* ════════════════════════════════════════
   TOAST
════════════════════════════════════════ */
#toast {
  position: fixed; top: 47%; left: 50%;
  transform: translate(-50%,-50%) scale(.75) translateY(12px);
  background: rgba(4,9,10,.96); backdrop-filter: blur(16px);
  border: 1px solid rgba(201,150,14,.28);
  border-radius: 12px; padding: 10px 28px;
  font-family: 'Playfair Display SC', serif;
  font-size: 15px; font-weight: 700; color: var(--gold2);
  letter-spacing: 3px; z-index: 70;
  pointer-events: none; opacity: 0; white-space: nowrap;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .22s;
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
}
#toast.show { transform: translate(-50%,-50%) scale(1) translateY(0); opacity: 1; }
#toast.green { border-color: rgba(34,212,180,.38); color: var(--teal); }

/* ════════════════════════════════════════
   SPEECH BUBBLE  (bot taunts)
════════════════════════════════════════ */
.speech-bubble {
  position: fixed;
  max-width: 200px;
  background: rgba(8, 18, 14, 0.96);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(201, 150, 14, 0.35);
  border-radius: 14px;
  padding: 8px 14px;
  font-family: 'Playfair Display SC', serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.3px;
  line-height: 1.45;
  white-space: normal;
  pointer-events: none;
  z-index: 72;
  opacity: 0;
  transform: scale(0.7);
  transform-origin: top left;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.7);
}
.speech-bubble.show {
  opacity: 1;
  animation: bubblePop 0.35s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes bubblePop {
  0%   { transform: scale(0.7); }
  60%  { transform: scale(1.08); }
  80%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}
/* Tail pointing up (bubble below the player label — top of screen) */
.speech-bubble.tail-top::before {
  content: '';
  position: absolute;
  top: -7px; left: 18px;
  border: 7px solid transparent;
  border-top: none;
  border-bottom-color: rgba(201, 150, 14, 0.35);
}
.speech-bubble.tail-top::after {
  content: '';
  position: absolute;
  top: -5px; left: 19px;
  border: 6px solid transparent;
  border-top: none;
  border-bottom-color: rgba(8, 18, 14, 0.96);
}
/* Tail pointing down (bubble above the player label — bottom of screen) */
.speech-bubble.tail-bottom::before {
  content: '';
  position: absolute;
  bottom: -7px; left: 18px;
  border: 7px solid transparent;
  border-bottom: none;
  border-top-color: rgba(201, 150, 14, 0.35);
}
.speech-bubble.tail-bottom::after {
  content: '';
  position: absolute;
  bottom: -5px; left: 19px;
  border: 6px solid transparent;
  border-bottom: none;
  border-top-color: rgba(8, 18, 14, 0.96);
}

/* ════════════════════════════════════════
   WEATHER PARTICLES
   Rain (Storm), Leaves (Forest), Bubbles (Ocean)
════════════════════════════════════════ */

/* ── Rain ── */
.weather-rain {
  position: absolute;
  width: 1.5px;
  background: linear-gradient(to bottom, transparent, rgba(180, 220, 255, 0.7));
  border-radius: 1px;
  pointer-events: none;
}
@keyframes weatherRainFall {
  to { transform: translate(30px, 105vh); opacity: 0; }
}

/* ── Leaves ── */
.weather-leaf {
  display: block;
  pointer-events: none;
  user-select: none;
  line-height: 1;
}
/* Outer: straight gravity drop */
@keyframes weatherLeafDrop {
  0%   { transform: translateY(0);      opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(108vh);  opacity: 0; }
}
/* Inner: smooth left-right sway — alternates so it never snaps */
@keyframes weatherLeafSway {
  from { transform: translateX(calc(var(--sway) * -1)); }
  to   { transform: translateX(var(--sway)); }
}
/* Inner: continuous spin independent of sway */
@keyframes weatherLeafSpin {
  from { rotate: 0deg; }
  to   { rotate: var(--spin); }
}

/* ── Bubbles ── */
.weather-bubble {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(120, 220, 255, 0.5);
  background: radial-gradient(circle at 35% 35%, rgba(200, 240, 255, 0.25), transparent 70%);
  pointer-events: none;
}
@keyframes weatherBubbleRise {
  0%   { transform: translateY(0)     translateX(0);            opacity: 1; }
  50%  { transform: translateY(-40vh) translateX(var(--drift)); opacity: 0.8; }
  100% { transform: translateY(-105vh) translateX(calc(var(--drift) * 0.5)); opacity: 0; }
}

/* ════════════════════════════════════════
   LEAVE BUTTON & MODAL
════════════════════════════════════════ */
/* ════════════════════════════════════════
   HUD TOP-RIGHT BUTTON GROUP
════════════════════════════════════════ */
#hud-top-right {
  position: fixed; top: 14px; right: 16px; z-index: 70;
  display: none; align-items: center; gap: 8px;
}
#hud-top-right.show { display: flex; }

#hud-top-right button {
  background: rgba(0,0,0,.5); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.1); border-radius: 20px;
  padding: 7px 14px; color: rgba(255,255,255,.45);
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700;
  cursor: pointer; transition: all .18s; letter-spacing: .5px;
  height: 32px; display: flex; align-items: center; white-space: nowrap;
}

#leave-btn { display: none; }
#leave-btn:hover { background: rgba(180,20,35,.45); color: white; border-color: rgba(217,43,58,.4); }
#leave-btn.show { display: flex; }
/* ════════════════════════════════════════
   SETTINGS BUTTON & MODAL
════════════════════════════════════════ */
#settings-btn { display: none; }
#settings-btn svg { transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
#settings-btn:hover { background: rgba(34,212,180,.2); color: var(--teal); border-color: rgba(34,212,180,.35); }
#settings-btn:hover svg { transform: rotate(90deg); }
#settings-btn.show { display: flex; }

#score-history-btn { display: none; }
#score-history-btn:hover { background: rgba(201,150,14,.2); color: var(--gold2); border-color: rgba(201,150,14,.35); }
#score-history-btn.show { display: flex; }

/* Score History Modal */
#score-history-modal {
  position: fixed; inset: 0; z-index: 250;
  background: rgba(0,0,0,.88); backdrop-filter: blur(10px);
  display: none; align-items: center; justify-content: center;
  padding: 16px;
}
#score-history-modal.show { display: flex; animation: overlayIn .32s cubic-bezier(.16,1,.3,1); }
#score-history-box {
  background: linear-gradient(150deg, #0a1c14 0%, #06110c 100%);
  border: 1px solid rgba(201,150,14,.22);
  border-radius: 22px; padding: 24px 28px 22px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  width: min(98vw, 1100px); max-height: 92vh;
  box-shadow: 0 0 0 1px rgba(34,212,180,.03), 0 48px 120px rgba(0,0,0,.9);
  position: relative; overflow: hidden;
}
#score-history-box h2 {
  font-family: 'Playfair Display SC', serif;
  font-size: 18px; font-weight: 700; color: var(--gold2); letter-spacing: 5px;
}
#score-history-close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none; color: rgba(255,255,255,.3);
  font-size: 18px; cursor: pointer; line-height: 1; padding: 4px 8px;
  transition: color .15s;
}
#score-history-close:hover { color: var(--red2); }
#score-history-sub {
  font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,.25); margin-top: -8px;
}
#score-history-content {
  width: 100%; overflow-x: auto; overflow-y: auto;
  max-height: calc(92vh - 110px);
}
.sh-tbl {
  width: 100%; border-collapse: collapse;
  table-layout: fixed;
}
.sh-tbl th {
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,.7);
  letter-spacing: 1px; text-transform: uppercase;
  padding: 7px 3px; border-bottom: 1px solid rgba(255,255,255,.08); text-align: center;
  white-space: nowrap; line-height: 1.4;
}
.sh-tbl th.sh-player-col { text-align: left; color: rgba(201,150,14,.7); padding-left: 6px; width: 100px; position: sticky; left: 0; background: rgba(10,28,20,.98); z-index: 3; }
.sh-tbl th.sh-round-col { width: 44px; }
.sh-tbl th.sh-total-col { width: 60px; }
.sh-tbl th .sh-trump-sub { font-size: 10px; opacity: .75; display: block; margin-top: 1px; }
.sh-tbl td { padding: 9px 3px; text-align: center; font-weight: 600; font-size: 14px; color: rgba(255,255,255,.7); line-height: 1.2; }
.sh-tbl td.sh-player-name { text-align: left; color: rgba(255,255,255,.95); font-size: 14px; padding-left: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-tbl td.sh-player-name { text-align: left; color: rgba(255,255,255,.95); font-size: 14px; padding-left: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: sticky; left: 0; background: #071510; z-index: 1; }
.sh-tbl tr:nth-child(even) td { background: rgba(255,255,255,.02); }
.sh-tbl tr:nth-child(even) td.sh-player-name { background: #081914; }
.sh-tbl tr:hover td.sh-player-name { background: #0e1e14; }
.sh-tbl .sh-pos { color: var(--teal); font-weight: 700; }
.sh-tbl .sh-neg { color: var(--red2); font-weight: 700; }
.sh-tbl .sh-zero { color: rgba(255,255,255,.55); }
.sh-tbl .sh-empty { color: rgba(255,255,255,.15); }
.sh-tbl .sh-total { color: var(--gold2); font-family: 'Playfair Display', serif; font-weight: 700; font-size: 16px; border-left: 1px solid rgba(201,150,14,.2); text-align: center; vertical-align: middle; }
.sh-tbl tr:hover td { background: rgba(201,150,14,.05); }
.sh-tbl thead tr th { background: rgba(10,28,20,.98); position: sticky; top: 0; z-index: 2; }
.sh-no-history {
  color: rgba(255,255,255,.3); font-size: 13px; font-style: italic; padding: 24px 0;
}
/* Legend row */
.sh-legend {
  display: flex; gap: 16px; font-size: 10px; font-weight: 600;
  color: rgba(255,255,255,.2); letter-spacing: .5px;
  border-top: 1px solid rgba(255,255,255,.05); padding-top: 10px; width: 100%;
  justify-content: center; flex-wrap: wrap;
}
.sh-legend span { display: flex; align-items: center; gap: 5px; }
.sh-legend .dot-teal { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex-shrink: 0; }
.sh-legend .dot-red  { width: 7px; height: 7px; border-radius: 50%; background: var(--red2); flex-shrink: 0; }
.sh-legend .dot-gold { width: 7px; height: 7px; border-radius: 50%; background: var(--gold2); flex-shrink: 0; }

#fullscreen-btn {
  position: fixed; bottom: 16px; right: 16px; z-index: 70;
  background: rgba(0,0,0,.45); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.1); border-radius: 50%;
  width: 36px; height: 36px;
  display: none; align-items: center; justify-content: center;
  color: rgba(255,255,255,.4); font-size: 16px;
  cursor: pointer; transition: all .18s; line-height: 1;
}
#fullscreen-btn:hover { background: rgba(34,212,180,.18); color: var(--teal); border-color: rgba(34,212,180,.35); }
#fullscreen-btn.show { display: flex; }

#lobby-settings-btn {
  position: absolute; top: 16px; right: 20px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.65); font-size: 18px;
  cursor: pointer; transition: color .18s, transform .35s, background .18s; z-index: 10;
}
#lobby-settings-btn svg { transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
#lobby-settings-btn:hover { color: var(--teal); background: rgba(34,212,180,.12); border-color: rgba(34,212,180,.3); }
#lobby-settings-btn:hover svg { transform: rotate(90deg); }

#lobby-rules-btn {
  position: absolute; top: 16px; left: 20px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px; padding: 6px 14px;
  display: flex; align-items: center; gap: 5px;
  color: rgba(255,255,255,.55); font-size: 11px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer; transition: all .18s; z-index: 10;
}
#lobby-rules-btn:hover { color: var(--gold2); background: rgba(201,150,14,.1); border-color: rgba(201,150,14,.3); }

/* Rules modal */
#rules-modal {
  display: none; position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,.78); backdrop-filter: blur(14px);
  align-items: center; justify-content: center;
}
#rules-modal.show { display: flex; }
#rules-box {
  background: linear-gradient(145deg, rgba(8,18,20,.99) 0%, rgba(10,24,20,.98) 100%);
  border: 1px solid rgba(201,150,14,.28);
  border-radius: 20px; padding: 36px 40px 32px;
  max-width: 560px; width: 92%;
  max-height: 82vh; overflow-y: auto;
  box-shadow: 0 40px 120px rgba(0,0,0,.9);
  animation: overlayIn .28s cubic-bezier(.16,1,.3,1);
  scrollbar-width: thin; scrollbar-color: rgba(201,150,14,.2) transparent;
}
#rules-box h2 {
  font-family: 'Playfair Display SC', serif;
  font-size: 22px; letter-spacing: 4px; text-transform: uppercase;
  background: linear-gradient(160deg, var(--gold3), var(--gold2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  margin: 0 0 6px; text-align: center;
}
#rules-box .rules-suits {
  text-align: center; font-size: 18px; opacity: .3; margin-bottom: 24px; letter-spacing: 8px;
}
.rules-section {
  margin-bottom: 20px;
}
.rules-section h3 {
  font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
  color: var(--teal); margin: 0 0 8px;
}
.rules-section p, .rules-section li {
  font-size: 13px; color: rgba(255,255,255,.72); line-height: 1.7; margin: 0 0 4px;
}
.rules-section ul { padding-left: 18px; margin: 0; }
.rules-section li { margin-bottom: 4px; }
.rules-highlight {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px;
}
.rules-chip {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; padding: 6px 12px;
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,.6);
}
.rules-chip span { color: var(--gold2); }
.rules-scoring-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: 13px; color: rgba(255,255,255,.65);
}
.rules-scoring-row:last-child { border-bottom: none; }
.rules-scoring-row .rs-val { font-weight: 700; }
.rs-good { color: #4cff91; }
.rs-bad  { color: #ff6b6b; }
#rules-close {
  display: block; margin: 24px auto 0;
  background: transparent; border: 1px solid rgba(201,150,14,.35);
  border-radius: 10px; padding: 10px 36px;
  color: var(--gold2); font-size: 11px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; cursor: pointer; transition: all .18s;
}
#rules-close:hover { background: rgba(201,150,14,.12); border-color: var(--gold2); }

#settings-modal {
  display: none; position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,.72); backdrop-filter: blur(12px);
  align-items: center; justify-content: center;
}
#settings-modal.show { display: flex; }
#settings-box {
  background: linear-gradient(145deg, #0c1e1a, #0a1814);
  border: 1px solid rgba(201,150,14,.25); border-radius: 20px;
  padding: 36px 36px 30px;
  min-width: 300px; max-width: 480px; width: 92%;
  box-shadow: 0 40px 80px rgba(0,0,0,.8);
  display: flex; flex-direction: column; gap: 26px;
}
#settings-box h2 {
  font-family: 'Playfair Display SC', serif;
  font-size: 18px; letter-spacing: 5px; color: var(--gold2);
  text-align: center; margin: 0;
}
.setting-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.setting-label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.7); letter-spacing: .5px; }
.toggle {
  position: relative; width: 46px; height: 26px; flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0; border-radius: 26px;
  background: rgba(255,255,255,.12); cursor: pointer; transition: background .2s;
}
.toggle-slider::before {
  content: ''; position: absolute;
  width: 20px; height: 20px; border-radius: 50%;
  left: 3px; top: 3px;
  background: rgba(255,255,255,.45); transition: transform .2s, background .2s;
}
.toggle input:checked + .toggle-slider { background: rgba(34,212,180,.35); }
.toggle input:checked + .toggle-slider::before { transform: translateX(20px); background: var(--teal); }
.rounds-pick { display: flex; gap: 8px; }
.rpick-btn {
  padding: 7px 22px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.45);
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all .18s;
}
.rpick-btn:hover { border-color: rgba(201,150,14,.4); color: var(--gold2); }
.rpick-btn.active {
  background: rgba(201,150,14,.15); border-color: var(--gold);
  color: var(--gold2); box-shadow: 0 0 10px rgba(201,150,14,.2);
}
.settings-close {
  align-self: center; margin-top: 2px;
  padding: 9px 36px; border-radius: 12px;
  background: rgba(34,212,180,.1); border: 1px solid rgba(34,212,180,.3);
  color: var(--teal); font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: 1px;
  cursor: pointer; transition: all .18s;
}
.settings-close:hover { background: rgba(34,212,180,.22); }

/* ── Theme section: tabs + panels ── */
.theme-section { display: flex; flex-direction: column; gap: 12px; }
.theme-section > .setting-label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.7); letter-spacing: .5px; }
.theme-tabs { display: flex; gap: 6px; }
.theme-tab {
  padding: 6px 20px; border-radius: 20px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05); color: rgba(255,255,255,.4);
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; transition: all .15s;
}
.theme-tab:hover { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.7); }
.theme-tab.active { background: rgba(34,212,180,.12); border-color: rgba(34,212,180,.4); color: var(--teal); }
.theme-panel .theme-pick { display: flex; flex-wrap: wrap; gap: 8px; }

/* Card preview inside tpick-btn */
.tpick-card-preview {
  width: 38px; height: 52px; border-radius: 5px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tpick-card-face {
  width: 100%; height: 100%; border-radius: 5px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font-family: 'DM Sans', sans-serif;
}
.tpick-rank { font-size: 13px; font-weight: 800; line-height: 1; }
.tpick-suit  { font-size: 18px; line-height: 1; }
.tpick-blk   { color: #111827; }

/* Card face styles per theme */
.tpick-classic  { background: linear-gradient(145deg,#fffef8,#f8f2e4); border: 1px solid rgba(0,0,0,.12); }
.tpick-colorful { background: linear-gradient(135deg,#bfdbfe 0%,#fda4af 50%,#86efac 100%); border: 1px solid rgba(0,0,0,.1); }
.tpick-neon     { background: linear-gradient(145deg,#0a0a18,#12122a); border: 1px solid rgba(96,165,250,.5); box-shadow: inset 0 0 12px rgba(59,130,246,.1), 0 0 8px rgba(96,165,250,.2); }
.tpick-gold     { background: linear-gradient(145deg,#1a1408,#0d0b05); border: 1px solid rgba(212,175,55,.5); }
.tpick-retro    { background: linear-gradient(160deg,#f2e8c9,#decca); border: 2px solid #8b6914; border-radius: 3px; box-shadow: 3px 3px 0 #5a3e08; }
.tpick-ice      { background: linear-gradient(145deg,#a8d4f5,#5ba3de); border: 1.5px solid rgba(255,255,255,.7); box-shadow: inset 0 0 10px rgba(120,190,255,.4), 1px 2px 6px rgba(30,100,200,.3); }
.tpick-holo     {
  background: linear-gradient(125deg, #fff0fb, #e8f0ff, #d0faff, #d4ffd4, #fffbd0, #ffddd0, #ffd0f0, #e0d0ff);
  background-size: 300% 300%;
  border: 1.5px solid rgba(255,255,255,.9);
  animation: holoShift 4s ease-in-out infinite;
}
.tpick-holo-text {
  animation: holoSymbol 4s ease-in-out infinite;
}
.tpick-fire {
  background: linear-gradient(180deg, #0d0500 0%, #2d1200 60%, #ff4400 100%);
  background-size: 100% 200%;
  animation: fireBaseRise 2s ease-in-out infinite alternate;
  border: 1.5px solid rgba(255,100,0,.6);
  box-shadow: 0 0 14px rgba(255,80,0,.45);
}
.tpick-fire-text {
  color: #fff8e7;
  filter: drop-shadow(0 0 4px rgba(255,180,0,.9)) drop-shadow(0 0 8px rgba(255,80,0,.7));
  animation: emberGlow 1.2s ease-in-out infinite alternate;
}


/* Table oval preview */
.tpick-table-preview {
  width: 52px; height: 34px; border-radius: 50%;
  border: 2px solid rgba(201,150,14,.2);
  flex-shrink: 0;
}
.tpick-table-felt    { background: radial-gradient(ellipse, #1a5c38 0%, #0e3d25 60%, #071a10 100%); }
.tpick-table-midnight{ background: radial-gradient(ellipse, #1a2a5c 0%, #0e1a3d 60%, #070a1a 100%); border-color: rgba(147,197,253,.2); }
.tpick-table-crimson { background: radial-gradient(ellipse, #5c1a1a 0%, #3d0e0e 60%, #1a0707 100%); border-color: rgba(239,68,68,.2); }
.tpick-table-desert  { background: radial-gradient(ellipse, #5c4a1a 0%, #3d300e 60%, #1a1507 100%); border-color: rgba(217,119,6,.2); }
.tpick-table-ocean   { background: radial-gradient(ellipse, #0a4a5c 0%, #063040 60%, #020f18 100%); border-color: rgba(34,211,238,.2); }
.tpick-table-forest  { background: radial-gradient(ellipse, #0d3318 0%, #071f0e 60%, #020a04 100%); border-color: rgba(74,222,128,.2); }
.tpick-table-storm   { background: radial-gradient(ellipse, #1a1f2e 0%, #0e1220 60%, #050710 100%); border-color: rgba(196,181,253,.2); }

.tpick-label { font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; margin-top: 2px; }


#leave-modal {
  display: none; position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,.7); backdrop-filter: blur(10px);
  align-items: center; justify-content: center;
}
#leave-modal.show { display: flex; animation: overlayIn .2s ease; }
#leave-modal-box {
  background: linear-gradient(150deg, #0a1c14 0%, #06110c 100%);
  border: 1px solid rgba(217,43,58,.35);
  border-radius: 20px; padding: 40px 42px 34px;
  text-align: center; max-width: 380px; width: 90%;
  box-shadow: 0 0 0 1px rgba(217,43,58,.08), 0 32px 80px rgba(0,0,0,.9);
}
#leave-modal-box h2 {
  font-family: 'Playfair Display SC', serif;
  font-size: 20px; font-weight: 700; color: #fff; letter-spacing: 3px;
  text-transform: uppercase; margin: 0 0 12px;
}
#leave-modal-box p { color: rgba(255,255,255,.4); font-size: 13px; line-height: 1.7; margin: 0 0 28px; }
.leave-modal-btns { display: flex; gap: 12px; }
.leave-modal-btns button {
  flex: 1; padding: 13px; border-radius: 10px; border: none;
  font-family: 'Playfair Display SC', serif;
  font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  cursor: pointer; transition: all .15s;
}
.leave-modal-btns button:active { transform: scale(.96); }
#leave-confirm-btn {
  background: linear-gradient(135deg, var(--red2), var(--red));
  color: #fff;
  box-shadow: 0 4px 0 #7a0e18, 0 6px 20px rgba(217,43,58,.3);
}
#leave-confirm-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #7a0e18, 0 10px 28px rgba(217,43,58,.45); }
#leave-stay-btn {
  background: rgba(255,255,255,.04); color: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.1);
}
#leave-stay-btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }

/* ════════════════════════════════════════
   CONFETTI
════════════════════════════════════════ */
.confetti-piece {
  position: fixed; width: 8px; height: 8px; border-radius: 2px;
  pointer-events: none; z-index: 250;
  animation: confettiFall 2.4s ease-in forwards;
}
@keyframes confettiFall { 0%{transform:translate(0,0) rotate(0);opacity:1} 100%{transform:translate(var(--cx),var(--cy)) rotate(720deg);opacity:0} }

.score-lbl { font-size: 11px; font-weight: 600; font-family: 'Playfair Display', serif; }
.score-lbl.pos { color: var(--teal); }
.score-lbl.neg { color: var(--red2); }
.score-lbl.zero { color: rgba(255,255,255,.3); }

/* Floating score delta animation */
.score-float {
  position: fixed;
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  pointer-events: none;
  z-index: 9999;
  white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
  animation: scoreFloat 1.8s cubic-bezier(.2,0,.4,1) forwards;
}
.score-float.pos { color: #4cff91; }
.score-float.neg { color: #ff6b6b; }
.score-float.zero { color: rgba(255,255,255,0.4); }
.score-float.exact {
  color: #ffd700;
  font-size: 28px;
  font-weight: 800;
  text-shadow: 0 0 12px rgba(255,215,0,0.8), 0 0 24px rgba(255,215,0,0.4), 0 2px 8px rgba(0,0,0,0.9);
}
@keyframes scoreFloat {
  0%   { opacity: 0; transform: translateY(0px) scale(0.6); }
  15%  { opacity: 1; transform: translateY(-10px) scale(1.15); }
  60%  { opacity: 1; transform: translateY(-52px) scale(1); }
  100% { opacity: 0; transform: translateY(-88px) scale(0.9); }
}

/* "EXACT!" banner that appears above the score float */
.exact-banner {
  position: fixed;
  font-family: 'Playfair Display SC', serif;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #fff;
  background: linear-gradient(135deg, #d4a017 0%, #ffd700 40%, #f0c040 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  pointer-events: none;
  z-index: 9999;
  white-space: nowrap;
  filter: drop-shadow(0 0 8px rgba(255,215,0,0.9));
  animation: exactBanner 2s cubic-bezier(.2,0,.4,1) forwards;
}
@keyframes exactBanner {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.5); }
  12%  { opacity: 1; transform: translate(calc(var(--bx) * 0.15), calc(var(--by) * 0.15)) scale(1.25); }
  40%  { opacity: 1; transform: translate(calc(var(--bx) * 0.6), calc(var(--by) * 0.6)) scale(1); }
  75%  { opacity: 1; transform: translate(calc(var(--bx) * 0.85), calc(var(--by) * 0.85)) scale(1); }
  100% { opacity: 0; transform: translate(var(--bx), var(--by)) scale(0.95); }
}

/* Pulse ring that expands from player area on exact bid */
.pulse-ring {
  position: fixed;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid var(--ring-color, #ffd700);
  pointer-events: none;
  z-index: 9997;
  transform: translate(-50%, -50%) scale(0);
  animation: pulseRing 1.2s cubic-bezier(.2,0,.6,1) forwards;
  box-shadow: 0 0 12px var(--ring-color, #ffd700);
}
@keyframes pulseRing {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0.9; }
  60%  { opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(3.5); opacity: 0; }
}

/* Exact-bid confetti burst (player-local) */
.bid-confetti {
  position: fixed;
  pointer-events: none;
  z-index: 9998;
}
.bid-confetti-piece {
  position: absolute;
  border-radius: 1px;
  opacity: 0;
  animation: bidConfettiBurst var(--dur) ease-out var(--delay) forwards;
}
@keyframes bidConfettiBurst {
  0%   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translate(var(--bx), var(--by)) rotate(var(--br)) scale(0.3); }
}
/* ════════════════════════════════════════
   FIREWORKS
════════════════════════════════════════ */
.fw-rocket {
  position: fixed; width: 4px; height: 14px; border-radius: 2px;
  pointer-events: none; z-index: 9999;
  animation: fwRise var(--rise-dur) cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes fwRise {
  0%   { opacity: 1; transform: translateY(0) scaleY(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(var(--rise-y)) scaleY(0.4); }
}
.fw-particle {
  position: fixed; width: var(--sz); height: var(--sz);
  border-radius: 50%; pointer-events: none; z-index: 9999;
  animation: fwBurst var(--dur) ease-out var(--delay) forwards;
}
@keyframes fwBurst {
  0%   { opacity: 1; transform: translate(0,0) scale(1); }
  60%  { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--px), var(--py)) scale(0.2); }
}
.rain-confetti-piece {
  position: fixed;
  pointer-events: none;
  z-index: 9997;
  border-radius: 2px;
  opacity: 0;
  animation: rainFall var(--rdur) ease-in var(--rdelay) forwards;
}
@keyframes rainFall {
  0%   { opacity: 0; transform: translate(0, -20px) rotate(0deg); }
  10%  { opacity: 1; }
  90%  { opacity: 0.8; }
  100% { opacity: 0; transform: translate(var(--rx), var(--ry)) rotate(var(--rr)); }
}


/* Non-host leave lobby button */
#leave-lobby-btn {
  width: 100%; padding: 10px 16px; border-radius: 10px;
  background: transparent; color: rgba(217,43,58,.7);
  border: 1px solid rgba(217,43,58,.25);
  font-family: 'Playfair Display SC', serif;
  font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  cursor: pointer; transition: all .18s; display: none; margin-top: 4px;
}
#leave-lobby-btn:hover { background: rgba(217,43,58,.12); border-color: rgba(217,43,58,.5); color: var(--red2); }

/* Host disband lobby button */
#disband-lobby-btn {
  width: 100%; padding: 10px 16px; border-radius: 10px;
  background: transparent; color: rgba(217,43,58,.7);
  border: 1px solid rgba(217,43,58,.25);
  font-family: 'Playfair Display SC', serif;
  font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  cursor: pointer; transition: all .18s; display: none; margin-top: 4px;
}
#disband-lobby-btn:hover { background: rgba(217,43,58,.12); border-color: rgba(217,43,58,.5); color: var(--red2); }


/* ════════════════════════════════════════
   LAST TRICK BUTTON & OVERLAY
════════════════════════════════════════ */
#last-trick-btn {
  background: rgba(0,0,0,.5); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.07); border-radius: 20px;
  padding: 5px 10px; color: rgba(255,255,255,.45);
  font-size: 16px; line-height: 1;
  cursor: pointer; transition: all .18s; display: none;
}
#last-trick-btn:hover { background: rgba(34,212,180,.15); color: var(--teal); border-color: rgba(34,212,180,.3); }
#last-trick-btn.show { display: block; }

#last-trick-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
}
#last-trick-overlay.show { display: flex; }

#last-trick-box {
  background: rgba(12,24,16,.97); border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px; padding: 24px 28px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  min-width: 260px; max-width: 90vw;
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
}
#last-trick-title {
  font-family: 'Playfair Display SC', serif;
  font-size: 13px; font-weight: 700; letter-spacing: 3px;
  color: rgba(255,255,255,.5); text-transform: uppercase;
}
#last-trick-winner {
  font-size: 13px; font-weight: 700; color: var(--teal);
  letter-spacing: .5px;
}
#last-trick-cards {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.lt-card-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.lt-player-name {
  font-size: 9px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: rgba(255,255,255,.35);
}
.lt-card-wrap.lt-winner .lt-player-name { color: var(--teal); }
.lt-card-wrap.lt-winner .pc { box-shadow: 0 0 0 2px var(--teal), 0 4px 16px rgba(34,212,180,.3); }

#last-trick-close {
  margin-top: 4px; padding: 7px 24px; border-radius: 12px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.5); font-family: 'DM Sans', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer; transition: all .15s;
}
#last-trick-close:hover { background: rgba(255,255,255,.1); color: white; }

/* Version badge */
.lobby-version {
  position: absolute; bottom: 14px; right: 18px;
  font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,.13); cursor: default; user-select: none;
  transition: color .2s;
}
.lobby-version:hover { color: rgba(201,150,14,.45); }
.lobby-version .v-tag {
  display: inline-flex; align-items: center; gap: 5px;
}
.lobby-version .v-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(34,212,180,.3); display: inline-block; }

/* ════════════════════════════════════════
   DISCONNECT NOTICE
════════════════════════════════════════ */
#disconnect-notice {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.78) translateY(14px);
  z-index: 9990; pointer-events: none; opacity: 0;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .25s;
}
#disconnect-notice.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) translateY(0);
}
.dc-inner {
  background: rgba(4,9,10,.97); backdrop-filter: blur(18px);
  border: 1px solid rgba(217,43,58,.5); border-radius: 16px;
  padding: 14px 32px 13px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  box-shadow: 0 0 0 1px rgba(217,43,58,.1), 0 16px 56px rgba(0,0,0,.8), 0 0 32px rgba(217,43,58,.1);
  min-width: 230px; text-align: center;
}
.dc-icon { font-size: 22px; line-height: 1; animation: dcPulse .7s ease-in-out 3; }
@keyframes dcPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.28)} }
.dc-name { font-family:'Playfair Display SC',serif; font-size:15px; font-weight:700; color:#ff6b6b; letter-spacing:3px; }
.dc-sub  { font-size:10px; font-weight:600; color:rgba(255,255,255,.35); letter-spacing:2px; text-transform:uppercase; }
.dc-replacing { font-size:11px; font-weight:600; color:rgba(34,212,180,.6); letter-spacing:1.5px;
  animation: dcFadeIn .4s ease both; }
@keyframes dcFadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }

/* Suit strip */
.lobby-suits { display: flex; gap: 18px; font-size: 18px; user-select: none; margin-top: -10px; }
.lobby-suits .s-s { color: rgba(80,130,200,.25); }
.lobby-suits .s-h { color: rgba(200,50,60,.22); }
.lobby-suits .s-d { color: rgba(200,80,50,.22); }
.lobby-suits .s-c { color: rgba(60,180,120,.22); }

/* ════════════════════════════════════════
   RESPONSIVE — Tablet (≤ 900px)
════════════════════════════════════════ */
@media (max-width: 900px) {
  :root { --card-w: 72px; --card-h: 104px; --opp-w: 34px; --opp-h: 50px; }
  .lobby-logo { font-size: 46px; letter-spacing: 6px; }
  #lobby { padding: 36px 32px 32px; max-width: 680px; }
  #trick-area { width: 240px; height: 180px; }
  .opp-hand-v .pc { margin-top: -30px; }
  .p-area.pos-left, .p-area.pos-right { width: 88px; }
  #game-table::before { width: 88vw; height: 80vh; }
  #game-table::after { width: 93vw; height: 85vh; }
}

/* ════════════════════════════════════════
   RESPONSIVE — Mobile (≤ 600px)
════════════════════════════════════════ */
@media (max-width: 600px) {
  :root {
    --card-w: clamp(38px, 10.5vw, 52px);
    --card-h: clamp(54px, 15vw, 74px);
    --opp-w: 24px; --opp-h: 36px;
  }
  .pc .cs { font-size: clamp(13px, 3.5vw, 18px); }
  .pc .tl, .pc .br { font-size: clamp(7px, 2vw, 9px); }
  .pc .tl .s, .pc .br .s { font-size: clamp(5px, 1.5vw, 7px); }
  .pc.sm .cs { font-size: 12px; }

  /* ── LOBBY ── */
  #lobby {
    padding: 48px 16px 20px; /* top padding for rules/settings absolute btns */
    min-width: unset; width: 96%; gap: 10px;
    border-radius: 18px;
  }
  .lobby-logo { font-size: 30px; letter-spacing: 3px; }
  .lobby-tagline { font-size: 8px; letter-spacing: 4px; margin-top: -10px; }
  .lobby-suits { font-size: 14px; gap: 10px; margin-top: -4px; }
  #lobby-body { flex-direction: column; gap: 14px; }
  #lobby-left, #lobby-right { min-width: unset; flex: unset; width: 100%; }
  .rcode-val { font-size: 24px; letter-spacing: 8px; }
  .lbtn { font-size: 11px; padding: 10px 12px; letter-spacing: 1.5px; }
  .lobby-input { padding: 10px 14px; font-size: 13px; }
  #lobby-rules-btn { top: 12px; left: 12px; padding: 5px 10px; font-size: 9px; }
  #lobby-settings-btn { top: 10px; right: 12px; width: 30px; height: 30px; font-size: 14px; }
  .lobby-version { font-size: 8px; bottom: 10px; right: 12px; }

  /* ── GAME TABLE ── */
  #game-table::before { width: 100vw; height: 100vh; border-radius: 0; }
  #game-table::after { display: none; }

  /* ── HUD top-right group: smaller on mobile ── */
  #hud-top-right { top: 10px; right: 10px; gap: 6px; }
  #hud-top-right button { padding: 5px 10px; font-size: 9px; letter-spacing: .3px; height: 26px; }
  /* Hide fullscreen on mobile */
  #fullscreen-btn { display: none !important; }

  /* ── Trick area ── */
  #trick-area { width: clamp(130px, 44vw, 170px); height: clamp(100px, 34vw, 130px); }
  #info-bar { gap: 4px; flex-wrap: wrap; justify-content: center; }
  #trump-badge { font-size: 9px; padding: 3px 8px; }
  #round-badge { font-size: 8px; padding: 3px 7px; }
  #msg-bar { font-size: 10px; padding: 4px 12px; min-width: 140px; bottom: auto; top: calc(var(--opp-h) + 56px); transform: translateX(-50%); }
  #center-zone { gap: 4px; }

  /* ── Hand: scrollable row, no overlap ── */
  .p-area.pos-bottom {
    overflow: visible;
    width: 100%;
  }
  .my-hand {
    flex-wrap: wrap-reverse;
    justify-content: center;
    overflow: visible;
    gap: 4px;
    padding: 6px 4px 8px;
    align-items: flex-end;
    width: 100%;
    box-sizing: border-box;
    /* Exactly 2 rows max: clip any 3rd row */
    max-height: calc(var(--card-h) * 2 + 4px + 14px);
  }
  .my-hand .pc { flex-shrink: 0; }
  .opp-hand-h .pc { margin-left: 0; }
  .opp-hand-v .pc { margin-top: -20px; }

  /* ── Side areas ── */
  .p-area.pos-left, .p-area.pos-right { width: 54px; }
  .plabel { font-size: 10px; padding: 3px 8px; letter-spacing: .5px; max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pbid { font-size: 10px; padding: 2px 7px; }

  /* ── Score overlay ── */
  .so-inner { padding: 18px 12px; }
  .so-inner h2 { font-size: 16px; letter-spacing: 2px; }
  .score-tbl th, .score-tbl td { font-size: 10px; padding: 4px 4px; }
  .btn-next { padding: 10px 22px; font-size: 11px; letter-spacing: 2px; }


  /* ── Score history modal: vertical layout ── */
  #score-history-box { padding: 20px 14px 16px; gap: 10px; border-radius: 16px; max-height: 95vh; }
  #score-history-box h2 { font-size: 15px; letter-spacing: 3px; }
  #score-history-sub { font-size: 9px; letter-spacing: 1px; }
  #score-history-content { max-height: calc(95vh - 100px); overflow-y: auto; overflow-x: hidden; }

  /* Vertical table: rounds = rows, players = columns */
  .sh-tbl { table-layout: auto; }
  .sh-tbl colgroup { display: none; } /* ignore fixed col widths on mobile */
  .sh-tbl thead { display: none; }   /* hide horizontal round headers */
  .sh-tbl tbody { display: block; width: 100%; }
  .sh-tbl tbody tr { display: grid; width: 100%; border-bottom: 1px solid rgba(255,255,255,.05); }
  /* Round label + one cell per player */
  .sh-tbl td { padding: 7px 4px; font-size: 11px; text-align: center; }
  .sh-tbl td.sh-player-name { display: none; } /* player names moved to a sticky top row instead */
  .sh-tbl td.sh-empty { color: rgba(255,255,255,.12); }
  .sh-tbl td.sh-total { border-left: none; border-top: 1px solid rgba(201,150,14,.2); font-size: 13px; }

  /* Mobile vertical header injected via JS — one row showing player names */
  .sh-mobile-header { display: grid; width: 100%; position: sticky; top: 0; z-index: 3;
    background: #071510; border-bottom: 1px solid rgba(201,150,14,.2); padding: 6px 0; }
  .sh-mobile-header-cell {
    font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: rgba(255,255,255,.35); text-align: center; padding: 0 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .sh-mobile-header-cell.is-me { color: var(--gold2); }
  .sh-mobile-round-label {
    font-size: 9px; font-weight: 700; color: rgba(255,255,255,.25);
    letter-spacing: 1px; text-transform: uppercase; text-align: left;
    padding: 7px 4px; display: flex; align-items: center; gap: 4px;
  }
  .sh-mobile-round-trump { font-size: 11px; opacity: .7; }
  .sh-legend { font-size: 9px; gap: 10px; }

  /* ── Winner overlay ── */
  #winner-overlay h1 { font-size: 30px; letter-spacing: 3px; }
  #winner-trophy-icon { font-size: 32px; }
  #winner-overlay .winner-name { font-size: 13px; letter-spacing: 1.5px; }
  .podium-slot { max-width: 90px; }
  .podium-name-tag { font-size: 10px; }
  .podium-score { font-size: 20px; }
  .podium-slot.rank-1 .podium-score { font-size: 24px; }
  .podium-slot.rank-1 .podium-block { height: 80px; }
  .podium-slot.rank-2 .podium-block { height: 56px; }
  .podium-slot.rank-3 .podium-block { height: 38px; }
  .podium-block { font-size: 16px; }
  .podium-medal { font-size: 20px; }

  /* ── Leave modal ── */
  #leave-modal-box { padding: 24px 18px 18px; }
  #leave-modal-box h2 { font-size: 14px; }

  /* ── BID PANEL: compact bottom sheet ── */
  #bid-panel {
    top: 0; left: 0; right: 0; bottom: 0;
    align-items: flex-start;
    background: rgba(0,0,0,.55);
  }
  .bp-inner {
    width: 100%; max-width: 100%;
    border-radius: 0 0 18px 18px;
    padding: 12px 12px 20px;
    gap: 7px;
    animation: bpSlideDown .28s cubic-bezier(.16,1,.3,1) both;
  }
  @keyframes bpSlideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }
  .bp-inner h3 { font-size: 12px; letter-spacing: 3px; margin-bottom: 0; }
  .bp-info { gap: 5px; }
  .bp-info-chip { font-size: 9px; padding: 3px 8px; }
  .bp-bids-so-far { width: 100%; }
  .bp-bids-label { font-size: 8px; letter-spacing: 2px; }
  .bp-bid-row { padding: 3px 7px; }
  .bp-bid-row .bp-bid-name { font-size: 10px; }
  .bp-bid-row .bp-bid-val { font-size: 12px; }
  .bp-bid-rows { gap: 4px; }
  .bid-grid { grid-template-columns: repeat(6, 1fr); gap: 4px; }
  .bid-btn { padding: 9px 0; font-size: 15px; border-radius: 7px; }
  .bp-inner .bp-prompt { font-size: 9px; }
  #bp-hide-btn { font-size: 8px; padding: 3px 8px; top: 8px; right: 10px; }

  /* During bidding */
  #game-table.bidding-mode .p-area.my-area {
    opacity: 1; z-index: 110; pointer-events: none;
  }
  #game-table.bidding-mode .p-area.my-area .my-hand .pc { pointer-events: none; }
  #game-table.bidding-mode .p-area:not(.my-area) { opacity: 0.2; }
  #game-table.bidding-mode #center-zone { opacity: 0.2; }
}

@media (max-width: 390px) {
  :root {
    --card-w: clamp(36px, 9.5vw, 46px);
    --card-h: clamp(52px, 13.5vw, 66px);
    --opp-w: 20px; --opp-h: 30px;
  }
  .pc .cs { font-size: clamp(11px, 3vw, 14px); }
  .pc .tl, .pc .br { font-size: clamp(6px, 1.8vw, 8px); }
  .pc .tl .s, .pc .br .s { font-size: 5px; }


  #trick-area { width: 120px; height: 92px; }
  #msg-bar { font-size: 9px; padding: 3px 10px; bottom: auto; top: calc(var(--opp-h) + 50px); transform: translateX(-50%); }
  .p-area.pos-left, .p-area.pos-right { width: 46px; }
  .plabel { font-size: 9px; max-width: 72px; }
  .bid-grid { grid-template-columns: repeat(6, 1fr); gap: 3px; }
  .bid-btn { padding: 8px 0; font-size: 13px; }
  .bp-inner { padding: 10px 10px 18px; gap: 6px; }
  .bp-inner h3 { font-size: 11px; letter-spacing: 2px; }
  #hud-top-right { right: 8px; }
}

@media (max-width: 320px) {
  :root { --card-w: 32px; --card-h: 46px; --opp-w: 16px; --opp-h: 24px; }
  .pc .cs { font-size: 10px; }
  .pc .tl, .pc .br { font-size: 5px; }
  .bid-btn { padding: 7px 0; font-size: 12px; }
}

/* ════════════════════════════════════════
   RESPONSIVE — Very small (≤ 320px)
════════════════════════════════════════ */
@media (max-width: 320px) {
  :root {
    --card-w: 32px; --card-h: 46px;
    --opp-w: 16px; --opp-h: 24px;
  }
  .pc .cs { font-size: 10px; }
  .pc .tl, .pc .br { font-size: 5px; }
  .bid-btn { padding: 7px 0; font-size: 13px; }
}