/* ════════════════════════════════════════════════════════════
   GAME TABLE — desk.jpg-inspired layout
   - Body bg is red/blue (random)
   - Felt sits in the middle as a smaller rounded rectangle
   - Opponent decks live OUTSIDE the felt, on the body bg
   - Seat name pills sit on the felt's edge
   - Hakem indicated by a small crown inside the seat pill
   - Trick piles count won tricks per team
   ════════════════════════════════════════════════════════════ */

/* Reset default view padding for table only */
#view-table.view--active {
  display: block;
  padding: 0;
}

/* Table screen fills below the topbar */
.table-screen {
  position: absolute;
  top: 56px;        /* topbar height */
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ──────── HUD bars ──────── */
.hud {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 6px;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.15));
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
  flex-shrink: 0;
  z-index: 5;
}

.hud--bottom {
  margin-top: auto;
  border-bottom: 0;
  border-top: 1px solid rgba(212, 175, 55, 0.25);
  background: linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0.15));
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
}
.hud--bottom .turn-indicator { grid-column: 2; }

.hud-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 2px 8px;
  min-width: 0;
}
.hud-label {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-light);
  opacity: 0.75;
}
.hud-value {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--ivory);
  line-height: 1.1;
}
.hud-value--gold {
  color: var(--gold-light);
  text-shadow: 0 2px 8px rgba(212,175,55,0.35);
}
.hud-trump { font-size: 24px; }

.turn-indicator {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--gold-light);
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  flex: 1;
  min-width: 0;
}

/* ──────── Play Area ──────── */
.play-area {
  flex: 1;
  position: relative;
  padding: 70px 110px 50px;   /* room for opp decks outside felt */
  min-height: 0;
}

/* ──────── Felt (the table itself) — desktop default ──────── */
.felt {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12px;                /* fixed pixel radius (desktop) */
  background:
    radial-gradient(ellipse at center,
      rgba(20, 120, 90, 0.95) 0%,
      rgba(15, 92, 70, 0.95) 55%,
      rgba(10, 61, 47, 0.98) 100%);
  border: 5px solid #4a3414;
  box-shadow:
    inset 0 0 0 3px var(--gold-dark),
    inset 0 0 60px rgba(0, 0, 0, 0.45),
    0 14px 30px rgba(0,0,0,0.5);
}
.felt::before {
  content: '';
  position: absolute; inset: 12px;
  border-radius: 9px;                 /* matches inset offset (12 - 3 ≈ 9) */
  border: 1px solid rgba(212, 175, 55, 0.25);
  pointer-events: none;
}

/* ──────── Opponent face-down decks (OUTSIDE felt, on body bg) ──────── */
.opp-deck {
  position: absolute;
  display: flex;
  z-index: 4;
}
.opp-deck--north {
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  flex-direction: row;
}
.opp-deck--west {
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
}
.opp-deck--east {
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
}

.opp-deck .card {
  width: 38px;
  height: 54px;
  cursor: default;
  pointer-events: none;
  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}
.opp-deck--north .card { margin-inline-start: -30px; }
.opp-deck--north .card:first-child { margin-inline-start: 0; }
.opp-deck--west  .card,
.opp-deck--east  .card { margin-top: -44px; }
.opp-deck--west  .card:first-child,
.opp-deck--east  .card:first-child { margin-top: 0; }

/* Disable hover lift on opponent decks */
.opp-deck .card:hover {
  transform: none;
  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}

/* ──────── Seat name pills (sit on felt edge) ──────── */
.seat-pill {
  position: absolute;
  background: linear-gradient(180deg, var(--gold-light), var(--gold), var(--gold-dark));
  color: #2a1d05;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 14px;
  border: 1px solid #8a6d1f;
  box-shadow:
    0 3px 8px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.45);
  white-space: nowrap;
  z-index: 6;
}

.seat-pill--north { top: -14px;    left: 50%;  transform: translateX(-50%); }
.seat-pill--south { bottom: -14px; left: 50%;  transform: translateX(-50%); }

.seat-pill--west {
  left: 0;                                        /* center sits exactly on felt edge */
  top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center;
}
.seat-pill--east {
  right: 0;                                       /* center sits exactly on felt edge */
  top: 50%;
  transform: translate(50%, -50%) rotate(90deg);
  transform-origin: center;
}

.seat-pill.is-active        { animation: pillGlow      1.6s ease-in-out infinite; }
.seat-pill--west.is-active  { animation: pillGlowWest  1.6s ease-in-out infinite; }
.seat-pill--east.is-active  { animation: pillGlowEast  1.6s ease-in-out infinite; }

@keyframes pillGlow {
  0%,100% { box-shadow: 0 3px 8px rgba(0,0,0,0.45), 0 0 14px rgba(212,175,55,0.45); }
  50%     { box-shadow: 0 3px 8px rgba(0,0,0,0.45), 0 0 28px rgba(212,175,55,0.85); }
}
@keyframes pillGlowWest {
  0%,100% {
    transform: translate(-50%, -50%) rotate(-90deg);
    box-shadow: 0 3px 8px rgba(0,0,0,0.45), 0 0 14px rgba(212,175,55,0.45);
  }
  50% {
    transform: translate(-50%, -50%) rotate(-90deg);
    box-shadow: 0 3px 8px rgba(0,0,0,0.45), 0 0 28px rgba(212,175,55,0.85);
  }
}
@keyframes pillGlowEast {
  0%,100% {
    transform: translate(50%, -50%) rotate(90deg);
    box-shadow: 0 3px 8px rgba(0,0,0,0.45), 0 0 14px rgba(212,175,55,0.45);
  }
  50% {
    transform: translate(50%, -50%) rotate(90deg);
    box-shadow: 0 3px 8px rgba(0,0,0,0.45), 0 0 28px rgba(212,175,55,0.85);
  }
}

/* ──────── Hakem indicator (small black crown inside seat pill) ──────── */
.seat-pill.is-hakem::before {
  content: '♛';
  margin-inline-end: 5px;
  font-size: 14px;
  color: #1a1a1a;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6),
    0 -1px 0 rgba(0, 0, 0, 0.25);
  display: inline-block;
  vertical-align: middle;
  transform: translateY(-1px);
}

/* Subtle extra emphasis on the Hakem pill */
.seat-pill.is-hakem {
  box-shadow:
    0 3px 8px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 0 14px rgba(212, 175, 55, 0.4);
}

/* ──────── Trick area (center of felt) ──────── */
.trick-area {
  position: absolute;
  inset: 22%;
  display: grid;
  place-items: center;
}

/* ──────── Trick Piles (won-tricks indicator) ──────── */
/* DESKTOP: row layout (cards side-by-side) */
.trick-pile {
  position: absolute;
  display: flex;
  gap: 3px;
  z-index: 3;
  pointer-events: none;
  direction: ltr;
}
.trick-pile--us   { bottom: 14px; left:  18px; }
.trick-pile--them { top:    14px; right: 18px; }

.pile-card {
  position: relative;
  width: 28px;
  height: 38px;
  border-radius: 4px;
  background:
    repeating-linear-gradient(45deg,
      rgba(212,175,55,0.22) 0 4px,
      transparent 4px 8px),
    linear-gradient(180deg, #0f5c46, #0a3d2f);
  border: 1.5px solid var(--gold-dark);
  box-shadow:
    0 3px 6px rgba(0,0,0,0.4),
    inset 0 0 0 1px rgba(212,175,55,0.4);
  animation: pileCardIn 280ms cubic-bezier(.2,.7,.3,1.2);
}
.pile-card-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--gold-light);
  text-shadow:
    0 0 4px rgba(0,0,0,0.95),
    0 1px 2px rgba(0,0,0,0.8);
}
.trick-pile--them .pile-card-num { color: #ffd6d6; }

/* On desktop the per-card number is visible (numbered row) */
@keyframes pileCardIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.7); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ──────── Player hand (bottom strip, on body bg) ──────── */
/* z-index 1001 keeps the hand above modal backdrop blur (modal-host = 1000) */
.player-hand-wrap {
  flex-shrink: 0;
  padding: 6px 8px 10px;
  display: flex;
  justify-content: center;
  background: linear-gradient(0deg, rgba(0,0,0,0.18), transparent);
}
.player-hand {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  min-height: 108px;
  position: relative;
}
.player-hand .card {
  width: 78px;
  height: 108px;
  margin-inline-start: -40px;
  transition: transform 200ms cubic-bezier(.2,.7,.3,1),
              box-shadow 200ms ease;
  position: relative;
}
.player-hand .card:first-child   { margin-inline-start: 0; }
.player-hand .card:hover         { z-index: 30; }
.player-hand .card.card--selected{ z-index: 25; }

/* HUD bottom buttons stay small */
.hud--bottom .btn--small { flex-shrink: 0; }