/*
 * layout.css
 * Game table geometry: the felt oval, player area positions, center zone,
 * trick area, info bar, hand containers, player labels, and bid displays.
 *
 * The .p-area positions (pos-bottom, pos-left, etc.) control where each player
 * sits around the table — see LAYOUTS in core/hand-layout.js for the JS counterpart.
 *
 * Reuse in another card game: replace the oval felt styling with your table design.
 * Keep the .p-area positioning system — it works for 2-5 players generically.
 */

/* ════════════════════════════════════════
   GAME TABLE
════════════════════════════════════════ */
#game-table {
  display: none; width: 100vw; height: 100vh; position: relative; overflow: visible;
}
#game-table.show { display: block; }

/* Deep felt oval */
#game-table::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 58vw; height: 58vh; border-radius: 50%;
  background:
    radial-gradient(ellipse at 38% 32%, #1a5c38 0%, #0e3d25 45%, #071a10 100%);
  border: 2px solid rgba(201,150,14,.15);
  box-shadow:
    0 0 0 8px rgba(0,0,0,.55),
    0 0 0 10px rgba(201,150,14,.05),
    0 0 80px rgba(0,0,0,.7) inset,
    0 0 40px rgba(34,212,180,.02) inset;
}
/* Rail stripe */
#game-table::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 63vw; height: 63vh; border-radius: 50%;
  background: transparent;
  border: 6px solid rgba(10,30,20,.8);
  box-shadow: 0 0 0 1px rgba(201,150,14,.08);
}

/* Player areas */
.p-area { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 5; overflow: visible; }
.p-area.pos-bottom   { bottom: 0; left: 0; right: 0; flex-direction: column-reverse; align-items: center; padding: 0 4px 8px; overflow: visible; }
.p-area.pos-top      { top: 10px; left: 0; right: 0; flex-direction: column-reverse; align-items: center; padding: 8px 4px 0; }
.p-area.pos-left     { left: 48px; top: 50%; transform: translateY(-50%); flex-direction: column; width: 100px; padding: 0 2px; }
.p-area.pos-right    { right: 48px; top: 50%; transform: translateY(-50%); flex-direction: column; width: 100px; padding: 0 2px; }
.p-area.pos-top-left  { top: 10px; left: 16px; right: 50%; flex-direction: column-reverse; align-items: center; padding: 8px 4px 0; }
.p-area.pos-top-right { top: 10px; left: 50%; right: 16px; flex-direction: column-reverse; align-items: center; padding: 8px 4px 0; }

/* Center zone */
#center-zone {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 4;
}

/* Trump glow orb — pulsing halo behind trick area */
#trump-glow {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 220px; height: 220px;
  border-radius: 50%;
  pointer-events: none; z-index: 1;
  opacity: 0;
  transition: opacity 1s ease, background 1s ease, box-shadow 1s ease;
}
#trump-glow.active {
  opacity: 1;
  animation: trumpPulse 3s ease-in-out infinite;
}
@keyframes trumpPulse {
  0%,100% { transform: translate(-50%,-50%) scale(1);   opacity: .55; }
  50%      { transform: translate(-50%,-50%) scale(1.12); opacity: .8; }
}

/* Deal card animation */
@keyframes dealFly {
  0%   { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--dr)) scale(.7); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
}
.deal-fly {
  animation: dealFly var(--dd) cubic-bezier(.22,1,.36,1) var(--ddelay) both;
}

/* Round-end sweep */
@keyframes cardSweep {
  0%   { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translate(var(--sx), var(--sy)) rotate(var(--sr)) scale(.4); }
}
.sweep-out {
  animation: cardSweep .7s cubic-bezier(.4,0,1,1) var(--sdelay) both !important;
}
#trick-area { position: relative; width: 280px; height: 210px; }
.trick-slot { position: absolute; display: flex; align-items: center; justify-content: center; }

/* Info bar */
#info-bar { display: flex; align-items: center; gap: 8px; }
#trump-badge {
  background: rgba(0,0,0,.65); backdrop-filter: blur(12px);
  border: 1px solid rgba(201,150,14,.25); border-radius: 20px;
  padding: 5px 14px; gap: 6px;
  display: flex; align-items: center;
  font-size: 11px; font-weight: 700; color: rgba(240,200,58,.9);
  letter-spacing: 1.5px; text-transform: uppercase;
  box-shadow: 0 2px 12px rgba(0,0,0,.5), 0 0 20px rgba(201,150,14,.06);
}
#trump-badge .ts { font-size: 17px; line-height: 1; }
#round-badge {
  background: rgba(0,0,0,.5); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.07); border-radius: 20px;
  padding: 5px 13px;
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,.4);
  letter-spacing: 1px; text-transform: uppercase;
}
#msg-bar {
  position: absolute;
  bottom: auto; top: calc(var(--opp-h) + 100px);
  left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.6); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.07); border-radius: 20px;
  padding: 6px 22px; min-width: 200px; text-align: center;
  font-size: 12px; font-weight: 600; color: rgba(255,245,210,.8);
  letter-spacing: .4px; white-space: nowrap;
  transition: color .3s; z-index: 6;
}

/* Hand layouts */
.my-hand { display: flex; align-items: flex-end; flex-wrap: wrap-reverse; justify-content: center; position: relative; gap: 5px; padding: 8px 8px 8px; z-index: 10; overflow: visible; max-width: 100%; }
.my-hand .pc { margin-left: 0; flex-shrink: 0; transition: transform .16s, box-shadow .16s; }
@media (hover: hover) {
  .my-hand .pc:hover { z-index: 20; }
}

.opp-hand-h { display: flex; align-items: flex-end; position: relative; gap: 2px; }
.opp-hand-h .pc { margin-left: 0; }

.opp-hand-v { display: flex; flex-direction: column; align-items: center; }
.opp-hand-v .pc { margin-top: -34px; }
.opp-hand-v .pc:first-child { margin-top: 0; }

/* ── Player labels ── */
.plabel {
  position: relative; z-index: 12;
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: rgba(255,255,255,.72);
  text-transform: uppercase; letter-spacing: 1.5px;
  padding: 5px 14px; border-radius: 20px; white-space: nowrap;
  border: 1px solid transparent;
  transition: all .25s;
}
.plabel .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.3); transition: all .25s;
}
.plabel.active {
  background: rgba(34,212,180,.1);
  border-color: rgba(34,212,180,.28);
  color: var(--teal);
  animation: activePulse 1.6s ease-in-out infinite;
}
.plabel.active .dot {
  background: var(--teal);
  box-shadow: 0 0 10px var(--teal);
  animation: dotBeat 1s ease-in-out infinite;
}
@keyframes activePulse { 0%,100%{box-shadow:0 0 10px rgba(34,212,180,.1)} 50%{box-shadow:0 0 24px rgba(34,212,180,.28)} }
@keyframes dotBeat { 0%,100%{transform:scale(1)} 50%{transform:scale(1.6)} }

/* Dealer pick roulette animation states */
.plabel.dealer-pick-active {
  background: rgba(255, 215, 0, 0.12);
  border-color: rgba(255, 215, 0, 0.5);
  color: #ffd700;
  transform: scale(1.06);
}
.plabel.dealer-pick-active .dot {
  background: #ffd700;
  box-shadow: 0 0 10px #ffd700;
}
.plabel.dealer-pick-winner {
  background: rgba(255, 215, 0, 0.2);
  border-color: #ffd700;
  color: #ffd700;
  animation: dealerWinnerPulse .5s ease-in-out infinite alternate;
  box-shadow: 0 0 24px rgba(255, 215, 0, 0.4);
}
.plabel.dealer-pick-winner .dot {
  background: #ffd700;
  box-shadow: 0 0 14px #ffd700;
}
@keyframes dealerWinnerPulse {
  from { box-shadow: 0 0 16px rgba(255,215,0,0.3); }
  to   { box-shadow: 0 0 36px rgba(255,215,0,0.7); }
}

.dealer-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold2); color: #1a0e00;
  font-size: 9px; font-weight: 900; letter-spacing: 0;
  box-shadow: 0 0 8px rgba(240,200,58,.45);
}
.pbid {
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.55);
  background: rgba(0,0,0,.45); padding: 3px 12px; border-radius: 10px;
  white-space: nowrap; letter-spacing: .3px;
  border: 1px solid rgba(255,255,255,.08);
}
.pbid .won { color: var(--teal); font-weight: 700; }
.pbid .bid { color: var(--gold2); font-weight: 700; }