/* =============================================================================
   ZHAIMER — Premium game table (Stage B)
   Purely decorative: background-image, box-shadow, and border only.
   Deliberately avoids touching width/height/padding/margin/gap on .table,
   .midrow, .pile, or .player-block, since fitTableToScreen() in game.js
   measures those boxes to compute the mobile scale factor — changing box
   size here would silently break that calculation.
   ============================================================================= */

/* ---------- Felt table surface, in the active theme's own palette ---------- */
/* Uses --bg/--panel/--teal/--brass-soft, which every theme (Memory Lab,
   Secret Agent, Holographic, Living Nature, and the default) already
   defines at html[data-theme="..."] level. This is what makes the table
   surface automatically match whichever theme is active, instead of one
   fixed color for every theme. */
.table{
  position:relative;
  background:
    radial-gradient(ellipse at 50% 38%, color-mix(in srgb, var(--teal) 6%, transparent) 0%, transparent 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.012) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.012) 0 2px, transparent 2px 5px),
    radial-gradient(ellipse at 50% 45%, var(--panel) 0%, var(--bg2) 60%, var(--bg) 100%);
}

/* ---------- Soft spotlight behind the draw/discard piles ---------- */
.midrow{
  position:relative;
}
.midrow::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:min(320px, 80%);
  height:130%;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center, color-mix(in srgb, var(--brass-soft) 12%, transparent) 0%, color-mix(in srgb, var(--brass-soft) 4%, transparent) 45%, transparent 75%);
  pointer-events:none;
  z-index:0;
}
/* ---------- Faint circular "memory arena" motif behind the piles ----------
   Concentric rings + a soft cross-glow reminiscent of a brain/neural core,
   built entirely from gradients (no image asset, no dimension impact). */
.midrow::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:min(560px, 130%); height:min(560px, 260%);
  transform:translate(-50%,-50%);
  background:
    repeating-radial-gradient(circle at center,
      transparent 0, transparent 38px,
      color-mix(in srgb, var(--teal) 5%, transparent) 39px, transparent 41px,
      transparent 78px, color-mix(in srgb, var(--brass-soft) 5%, transparent) 79px, transparent 81px);
  opacity:.5;
  pointer-events:none;
  z-index:0;
  border-radius:50%;
}
@media (prefers-reduced-motion: reduce){ .midrow::after{ opacity:.3; } }
.midrow > *{ position:relative; z-index:1; }

/* ---------- Clearer separation between draw and discard piles ---------- */
.midrow{ position:relative; }
.midrow .pile:first-child::after{
  content:"";
  position:absolute;
  right:-11px; top:10%;
  width:1px; height:80%;
  background:linear-gradient(to bottom, transparent, color-mix(in srgb, var(--brass-soft) 30%, transparent), transparent);
}
.midrow .pile{ position:relative; }

/* ---------- Player seats: subtle felt-inset feel, no dimension change ---------- */
.player-block{
  box-shadow:0 3px 10px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.02), inset 0 12px 20px -14px rgba(0,0,0,0.4);
}

/* ---------- Smooth (non-continuous) transition when the active seat changes ---------- */
.player-block{
  transition:transform .18s ease, box-shadow .25s ease, border-color .25s ease;
}

@media (prefers-reduced-motion: reduce){
  .table{ background:var(--bg); }
}