/* kingscorner/public/css/game.css — only what is specific to Kings
   Corner's table. Page chrome, seats, cards, tray, lobby and reveal rows
   all come from the shared kit stylesheets.

   The board (stock in the middle, four side piles, four King corners)
   is a 3×3 cross that needs a tall felt, so this game swaps the kit's
   wide oval for a taller one and inscribes the board in it. Seats sit
   on the rail top / right / bottom / left (see seatAngles in game.js). */

:root {
  --kc-card-w: 62px;
  --kc-card-h: 88px;
  --kc-card-font: 19px;
}

/* Taller oval: same idea as the shared formula (width from the height
   left over after the chrome), different ratio. Browsers with container
   units size it from the space #game-table actually has, so it keeps
   its shape when the round-over panel squeezes it. */
.table-felt {
  --tbl-felt-chrome: 380px;
  width: max(220px, min(94%, calc((100dvh - var(--tbl-felt-chrome)) * 0.8)));
  aspect-ratio: 0.8 / 1;
}
@supports (width: 1cqw) {
  #game-table { container-type: size; }
  .table-felt { width: max(180px, min(94cqw, calc(100cqh * 0.8))); }
}

/* Seat tokens here are taller (a row of card backs), so the rail overhang
   the kit reserves above/below the felt grows a little. */
#game-table { padding: 46px 38px; }

/* The largest rectangle that fits in the oval is ~60% × 80% of it. Cards
   scale with that box (container units) so the 3×3 cross always fits. */
#table-center {
  position: absolute;
  left: 20%; right: 20%; top: 10%; bottom: 10%;
  display: block;
  container-type: size;
}
@supports (width: 1cqw) {
  #kc-board {
    --kc-card-w: clamp(30px, min(30cqw, 17cqh), 64px);
    --kc-card-h: calc(var(--kc-card-w) * 1.42);
    --kc-card-font: calc(var(--kc-card-w) * 0.3);
  }
}
#kc-board {
  --cell-w: calc(var(--kc-card-w) + 10px);
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "nw n ne"
    "w stock e"
    "sw s se";
  gap: 4px 4px;
}
.pile-cell {
  position: relative;
  min-height: 0;
  min-width: 0;
  border-radius: 10px;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.pile-cell.interactive { cursor: pointer; }
.pile-stack {
  position: absolute;
  inset: 0;
  /* Cards fan downward; the step shrinks as the pile grows so the
     bottom (playable) card always stays inside the cell. */
  --step: clamp(3px, calc((100% - var(--kc-card-h)) / max(var(--n) - 1, 1)), 18px);
}
.pile-stack .pile-card {
  position: absolute;
  left: 50%;
  top: calc(var(--step) * var(--i));
  transform: translateX(-50%);
}
#kc-board .pcard, .kc-drag-ghost .pcard {
  width: var(--kc-card-w); height: var(--kc-card-h); font-size: var(--kc-card-font);
}
#kc-board .pcard .pc-suit, .kc-drag-ghost .pcard .pc-suit { font-size: calc(var(--kc-card-font) + 2px); }

/* Empty slot outline. Corners announce they want a King. */
.pile-cell.empty::before {
  content: '';
  position: absolute;
  left: 50%; top: 0;
  transform: translateX(-50%);
  width: var(--kc-card-w); height: var(--kc-card-h);
  border: 2px dashed rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  box-sizing: border-box;
}
.pile-cell.corner.empty::after {
  content: 'K';
  position: absolute;
  left: 50%; top: calc(var(--kc-card-h) / 2);
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(var(--kc-card-font) + 4px);
  color: rgba(255, 255, 255, 0.3);
}
/* .target = a legal destination for whatever's picked up; .picked = the
   side pile being moved; .pickable = a side pile that could move now. */
.pile-cell.target::before { border-color: var(--tbl-accent, #ffd700); border-style: solid; }
.pile-cell.target { box-shadow: 0 0 0 3px rgba(255, 228, 56, 0.55); background: rgba(255, 228, 56, 0.10); }
.pile-cell.target:hover { transform: translateY(-2px); }
.pile-cell.picked { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.10); }
.pile-cell.pickable .pile-card:last-child .pcard { box-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 0 0 2px rgba(255, 255, 255, 0.35); }
.pile-cell.shake { animation: kc-shake 0.3s ease; }
@keyframes kc-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.pile-cell.drag-over { box-shadow: 0 0 0 4px var(--accent); background: rgba(255, 228, 56, 0.22); transform: translateY(-2px); }

/* Drag ghost — the card(s) following the pointer. */
.kc-drag-ghost {
  position: fixed;
  z-index: 900;
  pointer-events: none;
  transform: scale(1.06) rotate(-2deg);
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.5));
}
.kc-drag-ghost .pile-card { position: absolute; left: 0; }
.drag-source-hidden { visibility: hidden; }
/* Pointer-driven drag: the browser must not claim the gesture for scrolling. */
#hand-area .kc-card, .pile-stack .pile-card { touch-action: none; }

#stock-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0; min-height: 0;
}
#stock-card.empty { background: transparent; border: 2px dashed rgba(255, 255, 255, 0.28); box-shadow: none; }
#stock-count { font-size: 0.66rem; color: rgba(255, 255, 255, 0.75); text-shadow: 0 1px 3px rgba(0,0,0,0.8); white-space: nowrap; }

/* ── Hand ─────────────────────────────────────────────────────────── */
#hand-area { gap: 8px; }
#hand-area .kc-card { position: relative; }
/* Big hands fan with overlap instead of wrapping into a second row. */
#hand-area.kc-many { gap: 0; }
#hand-area.kc-many .kc-card + .kc-card { margin-left: -14px; }
#hand-area.kc-lots .kc-card + .kc-card { margin-left: -24px; }
#hand-area .kc-card.selectable { cursor: pointer; }
#hand-area .kc-card.selectable .pcard { transition: transform 0.12s, box-shadow 0.12s; }
#hand-area .kc-card.selectable:hover .pcard { transform: translateY(-4px); }
#hand-area .kc-card.playable .pcard { box-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 0 0 2px rgba(255, 228, 56, 0.45); }
#hand-area .kc-card.selected .pcard { transform: translateY(-10px); box-shadow: 0 6px 14px rgba(0,0,0,0.35), 0 0 0 3px var(--accent); }
#hand-area .kc-card.selectable:not(.playable) .pcard { opacity: 0.8; }

/* ── Seat tokens ──────────────────────────────────────────────────── */
.tk-badge.kc-dealer { background: var(--accent); color: var(--on-accent); }
.tk-seat.sitting-out { opacity: 0.6; }
.tk-muted { font-size: 0.66rem; color: var(--tbl-text-muted); }

/* ── Lobby / results ──────────────────────────────────────────────── */
.kc-lobby-target { margin: 6px 0 0; text-align: center; font-size: 0.82rem; color: var(--tbl-text-mid); }
.kc-lobby-target b { color: var(--accent); }
.round-result-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 0 auto 6px;
  max-width: 420px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--tbl-panel-border);
  font-size: 0.85rem;
}
.round-result-row.winner { border-color: #43a047; }
.rr-name { font-weight: 700; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-detail { color: var(--tbl-text-muted); flex: 1; }
.rr-points { font-weight: 700; min-width: 32px; text-align: right; color: #43a047; }
.rr-points.loss { color: var(--danger); }
.rr-total { font-family: var(--font-display); font-weight: 800; min-width: 34px; text-align: right; }
.kc-standings { width: 100%; }

@media (max-width: 480px) {
  :root { --kc-card-w: 44px; --kc-card-h: 62px; --kc-card-font: 14px; }
  #table-center { left: 18%; right: 18%; }
  #hand-area { gap: 5px; }
  #hand-area .pcard { width: 46px; height: 66px; font-size: 15px; }
  #hand-area.kc-many .kc-card + .kc-card { margin-left: -12px; }
  #hand-area.kc-lots .kc-card + .kc-card { margin-left: -20px; }
}
@media (max-width: 380px) {
  :root { --kc-card-w: 40px; --kc-card-h: 56px; --kc-card-font: 13px; }
}

/* Wide screens: between rounds the results panel shares the column with
   the felt; give the board the larger share so it stays readable (the
   panel scrolls). Phones keep the kit's even split. */
@media (min-width: 900px) {
  #game-table { flex: 2 1 0; }
}