.game-table {
  --game-card-width: min(68vw, calc(48dvh * 0.75), 270px);
  --game-card-height: calc(var(--game-card-width) * 4 / 3);
  --deck-anchor-y: 45dvh;
  --hint-flow-gap: 28px;

  position: relative;
  display: block;
  height: 100dvh;
  min-height: 100dvh;
  overflow: clip;
  color: var(--color-ink);
}

.game-table:is(
    [data-status="drawing"],
    [data-status="cardBack"],
    [data-status="flipping"],
    [data-status="cardFront"],
    [data-status="discarding"]
  ) {
  --hint-flow-gap: 54px;
}

.game-table__header {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto var(--touch-target);
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch-target);
  min-width: 0;
}

.game-table__brand-lockup {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.game-table__brand-mark {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  opacity: 0.78;
}

.game-table__brand {
  min-width: 0;
  margin: 0;
  color: var(--color-navy-900);
  font-family: var(--font-serif);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
  line-height: var(--line-height-tight);
  white-space: nowrap;
}

.game-table__progress {
  margin: 0;
  color: var(--color-navy-900);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
  line-height: var(--line-height-tight);
  white-space: nowrap;
}

.game-table__workspace {
  position: absolute;
  z-index: 1;
  inset: 0;
  min-width: 0;
  min-height: 0;
}

.game-table__stage {
  position: absolute;
  top: var(--deck-anchor-y);
  inset-inline: 0;
  display: grid;
  height: var(--game-card-height);
  margin-block-start: calc(var(--game-card-height) / -2);
  min-width: 0;
  min-height: 0;
  overflow: visible;
  isolation: isolate;
  place-items: center;
}

.game-table__hint-region {
  position: absolute;
  top: calc(
    var(--deck-anchor-y) + (var(--game-card-height) / 2) +
      var(--hint-flow-gap)
  );
  inset-inline-start: max(
    var(--screen-gutter),
    env(safe-area-inset-left)
  );
  inset-inline-end: max(
    var(--screen-gutter),
    env(safe-area-inset-right)
  );
  display: grid;
  min-height: 56px;
  align-content: start;
  justify-items: center;
}

.game-table__deck {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
}

.game-table__deck-button {
  position: relative;
  display: block;
  width: var(--game-card-width);
  aspect-ratio: var(--card-aspect-ratio);
  padding: 0;
  border: 0;
  border-radius: var(--card-radius);
  background: transparent;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

.table-deck__proxy {
  position: absolute;
  z-index: var(--stack-order);
  inset: 0;
  width: 100%;
  pointer-events: none;
  transform:
    translate3d(var(--stack-x), var(--stack-y), 0)
    rotate(var(--stack-rotation));
  transform-origin: 50% 82%;
}

/*
 * Deck depletion. The Renderer publishes data-deck-layer per proxy; only
 * opacity is touched here so GSAP keeps sole ownership of transform, and the
 * rule lives in the stylesheet so the animations' clearProps cannot wipe it.
 */
.table-deck__proxy[data-deck-layer="retired"] {
  opacity: 0;
}

/*
 * The fade is armed on dealt statuses only. Entrance and shuffle drive proxy
 * opacity through GSAP per frame, so a transition there would fight them.
 * Arming it during `drawing` and `discarding` as well means the transition is
 * already in place when the depth changes on entering the next stable state.
 */
.game-table:is(
    [data-status="readyToDraw"],
    [data-status="drawing"],
    [data-status="cardBack"],
    [data-status="flipping"],
    [data-status="cardFront"],
    [data-status="discarding"]
  )
  .table-deck__proxy {
  transition: opacity 320ms var(--ease-standard);
}

.table-deck__proxy:not(:last-child) {
  --card-contact-shadow-resting-color: rgb(6 21 34 / 9%);
  --card-floating-shadow-resting:
    0 5px 13px rgba(6, 21, 34, 0.09),
    0 1px 3px rgba(6, 21, 34, 0.06);
}

.game-table__active-card,
.game-table__discard-region,
.game-table__panel {
  position: absolute;
  inset: 0;
}

.game-table__active-card {
  z-index: 2;
  display: grid;
  pointer-events: none;
  place-items: center;
}

.game-table__active-card > .card-root {
  width: var(--game-card-width);
  transform: translate3d(0, 26px, 0);
}

.game-table__discard-region {
  z-index: 0;
  pointer-events: none;
}

.game-table__panel {
  z-index: 3;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-4);
  padding-inline: var(--screen-gutter);
}

@media (max-width: 359px) and (max-height: 640px) {
  .game-table {
    --deck-anchor-y: 44.8dvh;
  }
}

/*
 * Below the 320px minimum supported viewport the Header can only be
 * reached through heavy browser zoom. The decorative mark yields first so
 * the wordmark keeps its single editorial line and never paints over
 * Progress; the reserved secondary slot stays untouched.
 */
@media (max-width: 300px) {
  .game-table__header {
    gap: var(--space-2);
  }

  .game-table__brand-mark {
    display: none;
  }

  .game-table__brand {
    font-size: 0.75rem;
    letter-spacing: 0.03em;
  }
}

@media (min-width: 768px) {
  .game-table {
    --game-card-width: min(42vw, calc(54dvh * 0.75), 300px);
  }
}