/* Sobrecarga - The table: seats, the tension zone and piles, the hand. */
/* ---------- Table ---------- */
#table{
  grid-area:table;position:relative;min-height:0;
  display:grid;gap:8px;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:
    "top  top    top"
    "left center right"
    "hand hand   hand";
  background:
    radial-gradient(620px 300px at 50% 42%,rgba(255,34,51,.055),transparent 70%),
    linear-gradient(180deg,#191920,#111114);
  border:1px solid var(--line);border-radius:16px;padding:10px;
  overflow:hidden;
}
/* circuit texture on the felt */
#table::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    repeating-linear-gradient(90deg,transparent 0 46px,rgba(255,255,255,.022) 46px 47px),
    repeating-linear-gradient(0deg,transparent 0 46px,rgba(255,255,255,.018) 46px 47px);
  -webkit-mask-image:radial-gradient(75% 70% at 50% 45%,#000 40%,transparent 100%);
  mask-image:radial-gradient(75% 70% at 50% 45%,#000 40%,transparent 100%);
}
.top-row{
  grid-area:top;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  gap:8px calc(24px * var(--s));min-width:0;
}
.seat[data-slot=left]{grid-area:left;align-self:center}
.seat[data-slot=right]{grid-area:right;align-self:center}
.seat.hidden{display:none}
.seat-box{
  border:1px solid var(--line-soft);border-radius:12px;background:rgba(10,10,13,.55);
  padding:8px 9px 7px;min-width:110px;position:relative;transition:.2s;
}
.seat-box.active{
  border-color:var(--red-dim);
  box-shadow:0 0 0 1px rgba(255,34,51,.3),0 0 26px rgba(255,34,51,.18);
  background:rgba(28,12,15,.6);
}
.seat-box.active::after{
  content:attr(data-badge);position:absolute;top:-8px;left:9px;   /* "TURNO" / "PENSANDO", set by table-view.js */
  background:var(--red);color:#12060a;font-family:var(--font-mono);font-size:calc(9px * var(--s));
  letter-spacing:.14em;padding:1px 5px;border-radius:3px;font-weight:700;
}
.seat-box.thinking .seat-name::after{
  content:"";display:inline-block;width:1.6em;text-align:left;
  animation:dots 1.1s steps(4,end) infinite;
}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.seat-head{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.seat-name{
  font-family:var(--font-mono);font-size:calc(11px * var(--s));letter-spacing:.12em;color:#cfcfd6;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.seat-count{
  margin-left:auto;font-family:var(--font-mono);font-size:calc(11px * var(--s));
  border:1px solid var(--line);border-radius:999px;padding:1px 7px;color:var(--red-soft);
  min-width:28px;text-align:center;
}
.seat-count.danger{border-color:var(--red);color:#fff;background:var(--red-dim);animation:pulse 1.1s infinite}
.fan{display:flex;align-items:center}
.fan .card{margin-right:calc(var(--card-w-sm) * -0.62)}
.fan .card:last-of-type{margin-right:0}

/* ---------- Center: tension zone + piles ---------- */
.center{
  grid-area:center;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:16px;min-height:0;position:relative;z-index:1;
}
.zone{
  width:min(100%,660px);border:1px dashed #33333d;border-radius:14px;
  padding:12px 12px;background:rgba(8,8,11,.42);position:relative;
}
.zone.hot{border-color:var(--red-dim);box-shadow:inset 0 0 40px rgba(255,34,51,.1)}
.zone-label{
  position:absolute;top:-9px;left:14px;background:var(--bg-2);padding:0 8px;
  font-family:var(--font-mono);font-size:calc(10px * var(--s));letter-spacing:.2em;color:var(--red-soft);
  text-transform:uppercase;
}
.zone-cards{
  display:flex;flex-wrap:wrap;gap:7px;justify-content:center;align-items:center;
  min-height:calc(var(--card-w-sm) * 1.4);
}
.zone-empty{font-family:var(--font-mono);font-size:calc(11px * var(--s));color:#5d5d68;letter-spacing:.1em}
.piles{display:flex;gap:24px;align-items:flex-start}
.pile{display:flex;flex-direction:column;align-items:center;gap:6px}
.pile-label{font-family:var(--font-mono);font-size:calc(9.5px * var(--s));letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.pile-slot{
  width:var(--card-w-sm);height:calc(var(--card-w-sm)*1.4);
  border:1px dashed #303039;border-radius:8px;display:grid;place-items:center;
  font-family:var(--font-mono);font-size:calc(9px * var(--s));color:#4e4e58;text-align:center;
}
.pile-count{font-family:var(--font-mono);font-size:calc(11px * var(--s));color:#b9b9c2}

/* ---------- Hand ---------- */
/* Your hand frames like a rival's seat-box: on your turn it turns red and
   carries the same badge (table-view.js renderHand), solo and online alike.
   The border is always there (transparent), so nothing moves when it lights. */
.hand-area{
  grid-area:hand;display:flex;flex-direction:column;gap:6px;z-index:1;position:relative;
  border:1px solid transparent;border-radius:12px;padding:6px 8px 4px;transition:.2s;
}
.hand-area.active{
  border-color:var(--red-dim);
  box-shadow:0 0 0 1px rgba(255,34,51,.3),0 0 26px rgba(255,34,51,.18);
  background:rgba(28,12,15,.6);
}
.hand-area.active::after{
  content:attr(data-badge);position:absolute;top:-8px;left:12px;
  background:var(--red);color:#12060a;font-family:var(--font-mono);font-size:calc(9px * var(--s));
  letter-spacing:.14em;padding:1px 5px;border-radius:3px;font-weight:700;
}
.hand-bar{display:flex;align-items:center;gap:10px;padding:0 4px}
.hand-bar .you{font-family:var(--font-mono);font-size:calc(11px * var(--s));letter-spacing:.14em;color:#cfcfd6}
.hand-bar .you b{color:var(--red-soft)}
#prompt{
  font-family:var(--font-mono);font-size:calc(11.5px * var(--s));letter-spacing:.06em;color:var(--red-soft);
  margin-left:auto;text-align:right;
}
#prompt.wait{color:var(--muted)}
.hand{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:flex-end;
  padding:10px 4px 4px;min-height:calc(var(--card-w)*1.4 + 16px);
}
/* A locked hand keeps pointer events so the action-card tooltips stay readable
   during bot turns; the click handler is what actually refuses the play. */
.hand.locked{opacity:.62;filter:saturate(.6)}
.hand.locked button.card{cursor:default}
.hand.locked button.card:hover,.hand.locked button.card:focus-visible{
  transform:none;border-color:#30303a;
  box-shadow:0 7px 16px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04);
}
.hand.discard-mode .card{border-color:var(--red-dim)}
.hand.discard-mode .card::after{
  content:"";position:absolute;inset:3px;border-radius:7px;
  border:1px dashed rgba(255,34,51,.55);pointer-events:none;
}