/* The table: the computers' seats, name tags, and fans of cards, the deck and discard pile with
   the badge on the top card, and the Take button (see table.js). Your hand is in cards.css. */

/* The table. Computers sit left, top, and right; the piles are in the middle; your hand
   is at the bottom. The side columns share whatever room the piles leave. */
.table {
  --card-width: 110px;
  --small-card-width: 70px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas:
    "top  top   top"
    "left piles right"
    "left action right"
    "you  you   you";
  align-items: center;
  text-align: center;
}
.seat[data-seat="top"] { grid-area: top; }
.seat[data-seat="left"] { grid-area: left; }
.seat[data-seat="right"] { grid-area: right; }
.piles { grid-area: piles; }
.turn-action { grid-area: action; }
.you { grid-area: you; }

/* Deck and discard pile, side by side in the middle of the table */
.piles {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin: 28px 24px 0;
}

/* The Pokéball orbit (see orbit.js, which sizes it and puts the ball at whoever's turn it is): a
   dotted ring around the piles, under everything else on the table, with a stop facing each
   player. A short yellow arrow runs from the ball the way play goes. Nothing on it moves. */
.table { position: relative; isolation: isolate; }
.orbit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: visible;
  pointer-events: none;
}
.orbit-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 3;
  stroke-dasharray: 1 9;
  stroke-linecap: round;
}
.orbit-stop { fill: rgba(255, 255, 255, 0.3); }
.orbit-arrow {
  fill: none;
  stroke: var(--yellow);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 8 9;
  filter: drop-shadow(0 0 6px rgba(255, 210, 63, 0.6));
}
.orbit-arrowhead path {
  fill: none;
  stroke: var(--yellow);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The ball, always upright (orbit.js puts it in place with a transform): a Pokéball in pale
   grays from the ring's own colors, so it doesn't compete with the cards. (Solid colors, so the
   ring doesn't show through it.) */
.orbit-ball {
  --ball-size: 34px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: var(--ball-size);
  height: var(--ball-size);
  pointer-events: none;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45));
}
.orbit-ball svg { display: block; width: 100%; height: 100%; }
.orbit-ball-bottom, .orbit-ball-top, .orbit-ball-button { stroke: #444c62; }
.orbit-ball-bottom, .orbit-ball-button, .orbit-ball-dot { fill: #969db0; }
.orbit-ball-top { fill: #737b90; }
.orbit-ball-shine { stroke: rgba(255, 255, 255, 0.3); }
.orbit-ball-dot { stroke: #7f879b; }

.discard { position: relative; cursor: default; transition: box-shadow 0.3s; }
.discard-wrap { position: relative; }
/* The cards under the top of the pile, each lying at its own angle (set by table.js) */
.discard-under { position: absolute; inset: 0; pointer-events: none; }
.discard-under .card { position: absolute; inset: 0; }

/* The badge on the top card. Waiting: a big red circle with what's in the stack, sitting on
   the card's corner and pulsing. Used: a small grey tag along the bottom of the card. */
.pile-badge {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(30, 37, 56, 0.88);
  color: white;
  font-size: 0.95rem;
  font-weight: bold;
  white-space: nowrap;
  pointer-events: none;
}
/* "Picking a color…" wraps onto two lines when the card is too narrow for it */
.pile-badge.picking { width: max-content; max-width: 90%; white-space: normal; text-align: center; }
.pile-badge.waiting {
  left: auto;
  right: -18px;
  top: -18px;
  bottom: auto;
  transform: none;
  display: grid;
  place-items: center;
  min-width: 58px;
  height: 58px;
  padding: 0 8px;
  background: var(--alert);
  border: 3px solid white;
  font-size: 1.4rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  animation: badge-pulse 1s ease-in-out infinite;
}
@keyframes badge-pulse {
  50% { transform: scale(1.12); }
}
/* A glowing ring in the declared color around a wild on top of the pile */
.discard[data-color] { box-shadow: 0 0 0 6px var(--glow), 0 0 28px 8px var(--glow); }
/* A wild still waiting for its color: a ring made of all four colors, the way they sit on the
   wild cards (red top left, blue top right, yellow bottom left, green bottom right). It sits
   behind the top card and sticks out around it, lying the same way (table.js turns it with the
   card). The gradient goes clockwise from the top: top right, bottom right, bottom left, top left. */
.table { --four-colors: conic-gradient(var(--blue) 0 25%, var(--green) 0 50%, var(--yellow) 0 75%, var(--red) 0); }
.pile-ring {
  position: absolute;
  inset: -6px;
  border-radius: 13px;
  background: var(--four-colors);
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.35));
  pointer-events: none;
}
/* A pile nobody can play on while there's a stack on the other one */
.discard-wrap { transition: opacity 0.3s, filter 0.3s; }
.discard-wrap.locked { opacity: 0.45; filter: grayscale(0.7); }

/* The deck can be tapped, and dragged (onto your hand, to draw) */
.deck { cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.deck:hover { transform: translateY(-6px); }
.deck.disabled { cursor: default; transform: none; }
/* Run out: just a faint outline of where it was, until the pile goes back into it */
.deck.empty { opacity: 0.25; filter: grayscale(1); }

/* Under the piles: a button to take a stack aimed at you, or to pass after drawing a card you
   could play */
.turn-action {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 14px;
  min-height: 48px;
  margin-top: 46px; /* room above it for the Pokéball orbit around the piles */
}
.turn-action.empty { visibility: hidden; }
.turn-button { font-size: 1.1rem; padding: 8px 22px; }

/* Name tags: a pill with the player's name (and a card count for computers).
   It lights up yellow on that player's turn. */
.name-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  padding: 4px 5px 4px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  font-size: 1.05rem;
  transition: background 0.2s, color 0.2s;
}
.name-tag:not(:has(.name-tag-count)) { padding-right: 14px; }
.name-tag-count {
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-weight: bold;
}
.seat.active .name-tag,
.name-tag.active { background: var(--yellow); color: var(--ink-on-yellow); }
.seat.active .name-tag-count { background: rgba(0, 0, 0, 0.12); }

/* A stack is aimed at this player: the tag goes red and shows what's coming ("+6", "Skip") */
.name-tag.targeted,
.seat.active .name-tag.targeted {
  background: var(--alert);
  color: white;
  animation: targeted 1s ease-in-out infinite;
}
.name-tag.targeted .name-tag-count { background: rgba(255, 255, 255, 0.2); }
.name-tag-stack {
  padding: 2px 9px;
  border-radius: 999px;
  background: white;
  color: var(--alert);
  font-weight: bold;
}
@keyframes targeted {
  50% { box-shadow: 0 0 0 5px rgba(230, 25, 75, 0.45); }
}

/* Still picking a color for their wild (the game goes on meanwhile): a ring made of all four
   colors, like the one on the pile */
.name-tag.picking { position: relative; }
.name-tag.picking::before {
  content: "";
  position: absolute;
  inset: -4px;
  padding: 3px;
  border-radius: 999px;
  background: var(--four-colors);
  /* Just the ring: the middle is cut out */
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

/* Down to one card: "Uno!" takes the card count's place */
.name-tag.uno .name-tag-count { display: none; }
.name-tag-uno {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink-on-yellow);
  font-weight: bold;
}
/* On a yellow tag (that player's turn), the colors swap so it still stands out */
.seat.active .name-tag:not(.targeted) .name-tag-uno,
.name-tag.active:not(.targeted) .name-tag-uno { background: var(--ink-on-yellow); color: var(--yellow); }

/* A computer's seat: name tag above a fan of card backs */
.seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
/* (Bubbles pop up over seats and name tags: see motion.css) */
.seat, .you .name-tag { position: relative; }
.seat[data-seat="top"] { margin-top: 8px; }

/* The fan: each card back sits in a slot narrower than the card, so the cards overlap.
   A small hand is spread out (up to 70% of each card showing at 3 cards or fewer), and the
   cards close up as the hand grows, down to 40% at 10 cards or more (--cards is set by table.js).
   When there isn't room, the slots (not the cards) shrink and the fan squeezes together. */
.fan {
  --width: var(--small-card-width);
  --height: calc(var(--width) * var(--card-image-height) / var(--card-image-width));
  --bob: translateY(-6px);
  --spread: clamp(0.4, 0.83 - var(--cards, 10) * 0.043, 0.7);
  display: flex;
  justify-content: center;
  max-width: 100%;
}
.fan .slot { display: block; flex: 0 1 calc(var(--width) * var(--spread)); min-width: 0; min-height: 0; }
.fan .slot:last-child { flex: 0 0 var(--width); }
.fan .card { width: var(--width); max-width: none; border-radius: 5px; }

/* While a computer is thinking, its cards bob in a little wave */
.seat.active .slot { animation: bob 0.9s ease-in-out infinite; }
.seat.active .slot:nth-child(odd) { animation-delay: -0.45s; }
@keyframes bob {
  50% { transform: var(--bob); }
}

/* On wider screens the left and right computers' fans run down the side of the table,
   with the cards turned to face the middle */
@media (min-width: 641px) {
  .seat[data-seat="left"] .fan,
  .seat[data-seat="right"] .fan {
    flex-direction: column;
    align-items: center;
    max-height: 300px;
  }
  .seat[data-seat="left"] .slot,
  .seat[data-seat="right"] .slot { width: var(--height); }
  /* --fan-turn is how far the cards are turned. table.js reads it too, for cards flying to them */
  .seat[data-seat="left"] { --fan-turn: 90deg; }
  .seat[data-seat="right"] { --fan-turn: -90deg; }
  .seat[data-seat="left"] .card { transform-origin: top left; transform: translateX(var(--height)) rotate(var(--fan-turn)); }
  .seat[data-seat="right"] .card { transform-origin: top left; transform: translateY(var(--width)) rotate(var(--fan-turn)); }
  .seat[data-seat="left"] .fan { --bob: translateX(6px); }
  .seat[data-seat="right"] .fan { --bob: translateX(-6px); }
}

/* On big screens the top bar floats over the corners (see base.css), so the whole table moves
   up. The top computer keeps clear of the two buttons: its fan squeezes rather than sliding
   under them (the padding is how far the buttons reach into the table). */
@media (min-width: 900px) {
  .seat[data-seat="top"] { padding: 0 clamp(0px, 714px - 50vw, 164px); }
  /* The top computer's name tag lines up with the two buttons, as if they're all sitting on one
     line: its bottom is level with the bottom of their darker ledge. Below it, the usual gap. */
  .seat[data-seat="top"] .name-tag { margin-top: 16px; }
  /* The piles sit a little lower, nearer the middle of the screen, without moving anything
     else. The turn button under them comes along, keeping the orbit's room above it. */
  .piles { top: 15px; }
  .turn-action { position: relative; top: 15px; }
  /* A little room between the top of the screen and the top computer */
  .table { padding-top: 10px; }
  /* With no one up top, the side computers' name tags would land on the buttons: start them
     just below */
  .table[data-computers="2"] { padding-top: 74px; }
}

/* Tablets: with two piles (after Nincada's split), the deck and piles sit closer together, so the
   orbit still fits around them between the side computers */
@media (min-width: 641px) and (max-width: 899px) {
  .piles:has(.discard-wrap[data-pile="1"]:not([hidden])) { gap: 18px; }
}

/* Phones: all the computers sit in a row along the top, in turn order */
@media (max-width: 640px) {
  .table {
    --card-width: 80px;
    --small-card-width: 44px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 10px;
    grid-template-areas:
      "left  top   right"
      "piles piles piles"
      "action action action"
      "you   you   you";
  }
  .table[data-computers="1"] { --small-card-width: 50px; }
  .table[data-computers="1"] .seat[data-seat="top"] { grid-column: 1 / -1; }
  .seat[data-seat="top"] { margin-top: 0; }
  .fan .card { border-radius: 4px; }
  .name-tag { font-size: 0.9rem; margin: 6px 0; white-space: nowrap; }
  .table:not([data-computers="1"]) .name-tag { gap: 4px; padding: 3px 3px 3px 9px; font-size: 0.8rem; }
  .table:not([data-computers="1"]) .name-tag-count { min-width: 22px; padding: 1px 6px; }
  /* A "+2" on a name tag is no taller than the card count, so nothing below shifts when one shows */
  .table:not([data-computers="1"]) .name-tag-stack { padding: 1px 6px; }
  /* Three names in a row leave no room for "Uno!" in the tag: it sits on the tag's corner instead */
  .table:not([data-computers="1"]) .seat .name-tag { position: relative; }
  .table:not([data-computers="1"]) .seat .name-tag-uno {
    position: absolute;
    top: -9px;
    right: -6px;
    padding: 0 5px;
    font-size: 0.65rem;
    line-height: 1.4;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  }
  /* With the count hidden, the name needs its own room on the right (unless a "+2" follows it) */
  .table:not([data-computers="1"]) .seat .name-tag.uno:not(.targeted) { padding-right: 9px; }
  /* A little more room above and below the piles, for the Pokéball orbit around them */
  .piles { gap: 24px; margin: 44px 0 0; }
  .turn-action { margin-top: 38px; }
  .orbit-ball { --ball-size: 26px; }
  .pile-badge.waiting { min-width: 46px; height: 46px; right: -12px; top: -12px; font-size: 1.1rem; }
  .pile-badge { font-size: 0.75rem; bottom: 5px; padding: 2px 8px; }
  .pile-ring { border-radius: 11px; }
}

/* Very narrow phones: no room for card counts next to three names */
@media (max-width: 359px) {
  .table:not([data-computers="1"]) .name-tag-count { display: none; }
  .table:not([data-computers="1"]) .name-tag { padding-right: 9px; }
}