/* ═══ THE STAGE — swaps between TABLE (quadrant) and HANDS. Fixed height:
   both views occupy the same box so nothing below ever shifts. ═══ */
.stage {
  flex: 1;
  min-height: 0;
  max-width: var(--col-max);
  width: 100%;
  margin: 0 auto;
  padding: 0 7px;
  position: relative;
}

.stage-view {
  position: absolute;
  inset: 0 7px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 180ms ease, transform 220ms ease, visibility 0s linear 220ms;
}

.stage-view[data-active] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 180ms ease, transform 220ms ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .stage-view,
  .stage-view[data-active] {
    transition: none;
    transform: none;
  }
}

/* ── VIEW 1: table felt, three opponent rivers ── */
/* The felt stays a centred square, as in the original board. Column ratios are
   four quadrants around the centre, as on the original board. */
#view-table {
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
}

.table-area {
  position: relative;
  width: 100%;
  /* Fills the space the discard strip used to take, but capped at 1.2× its
     width so the open centre stays table-like instead of a dead band. */
  height: min(100%, calc(100cqw * 1.2));
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  align-content: space-between;
  column-gap: 2.4%;
  padding: 2.4%;
  background: #0d382c;
  background-image:
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.03) 0%, transparent 70%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.8);
  box-shadow: inset 0 8px 24px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Pinwheel: N top-left, E top-right, W bottom-left, S bottom-right —
   four quadrants about the centre, matching the shipping board. */
.zone-n { grid-area: 1 / 1; }
.zone-e { grid-area: 1 / 2; }
.zone-w { grid-area: 2 / 1; }
.zone-s { grid-area: 2 / 2; }
.zone-c {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 38%;
  aspect-ratio: 1 / 1;
}

/* Bottom-row seats read their nameplate below the river, as at a real table */
.zone-w .player-label,
.zone-s .player-label {
  order: 4;
  margin-bottom: 0;
  margin-top: 3px;
}

.subsquare {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* Top seats hug the top edge, bottom seats the bottom, so every nameplate
   stays welded to its own river instead of drifting across the felt. */
.zone-n,
.zone-e { justify-content: flex-start; }
.zone-w,
.zone-s { justify-content: flex-end; }

.player-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  min-height: 12px;
  flex: none;
}

.zone-n .player-label { color: #D3D1C7; }
.zone-w .player-label { color: #85B7EB; }
.zone-e .player-label { color: #F5C04A; }
.zone-s .player-label { color: #5DCAA5; }

.dir-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
  flex-shrink: 0;
}

.dir-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.label-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  line-height: 1;
  font-weight: 900;
  flex-shrink: 0;
}

.label-chip-dealer {
  width: 12px;
  height: 12px;
  font-size: 8px;
  background: linear-gradient(180deg, #ffe892 0%, var(--gold-light) 100%);
  border: 1px solid rgba(255, 232, 146, 0.95);
  color: #3b2705;
  font-family: var(--font-display);
}

.label-chip-riichi {
  padding: 1px 3px;
  font-size: 6px;
  letter-spacing: 0.05em;
  background: linear-gradient(180deg, #ffb0aa 0%, var(--red-light) 100%);
  border: 1px solid rgba(255, 176, 170, 0.95);
  color: #3b0808;
}

/* Rivers wrap rather than grid, because a laid-down riichi tile is wider than
   a standing one — flex lets that row hold five tiles instead of six, exactly
   as a real river does. Width is pinned to six standing tiles so the wrap
   point stays put. padding-left leaves room for the leftmost tile's side
   face, which sits outside its own box. */
.river-grid-h {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  gap: var(--tile-gap);
  padding-left: 4px;
  /* +4px because border-box makes padding-left eat into the width, which
     would drop the wrap point from six tiles per row to five */
  width: calc(6 * var(--tile-w) + 5 * var(--tile-gap) + 4px);
  flex: none;
  min-height: 0;
  overflow: hidden;
}

/* Each river hugs its own outer corner, so all four grow toward the centre.
   East and South additionally fill right-to-left. */
.zone-n .river-grid-h,
.zone-w .river-grid-h {
  align-self: flex-start;
  justify-content: flex-start;
}

.zone-e .river-grid-h,
.zone-s .river-grid-h {
  align-self: flex-end;
  justify-content: flex-start;
  direction: rtl;
}

.center-info-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.34) 0%, transparent 68%);
  border-radius: 50%;
}

.compass-rose {
  position: relative;
  width: 62%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid rgba(245, 233, 196, 0.15);
  color: rgba(245, 233, 196, 0.34);
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 800;
  line-height: 1;
}

.compass-rose::before,
.compass-rose::after {
  content: '';
  position: absolute;
  inset: 48% 10%;
  height: 1px;
  background: rgba(245, 233, 196, 0.12);
}

.compass-rose::before { transform: rotate(45deg); }
.compass-rose::after { transform: rotate(-45deg); }

/* Each seat letter sits in the corner of that seat's quadrant and is turned to
   face that player: North reads upside down from your side of the table, West
   and East read from the sides, South (you) reads upright.
   Order in the markup is N, E, S, W. */
.compass-rose span { position: absolute; }
.compass-rose span:nth-child(1) { top: 9%; left: 9%; transform: rotate(180deg); }
.compass-rose span:nth-child(2) { top: 9%; right: 9%; transform: rotate(90deg); }
.compass-rose span:nth-child(3) { bottom: 9%; right: 9%; }
.compass-rose span:nth-child(4) { bottom: 9%; left: 9%; transform: rotate(-90deg); }

/* ── VIEW 2: three opponent hands, stacked ── */
.hands-view {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 7px;
  background: linear-gradient(180deg, rgba(5, 28, 23, 0.85) 0%, rgba(2, 14, 12, 0.9) 100%);
  border-radius: 8px;
  border: 1px solid rgba(245, 233, 196, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.opp-row {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 5px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(245, 233, 196, 0.1);
  border-left: 3px solid rgba(245, 233, 196, 0.22);
}

.opp-row[data-riichi] {
  border-left-color: var(--red-light);
  background: rgba(226, 75, 74, 0.07);
}

.opp-row[data-active] {
  border-left-color: var(--gold-light);
  background: rgba(245, 192, 74, 0.08);
}

.opp-row-head {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 13px;
  flex: none;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.opp-row-name {
  color: var(--gold-cream);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opp-row-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
}

.opp-row-count {
  color: rgba(245, 233, 196, 0.55);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.opp-row-count b {
  color: var(--gold-cream);
  font-weight: 700;
}

.opp-row-score {
  color: var(--gold-pale);
  font-variant-numeric: tabular-nums;
}

.opp-row-tiles {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.opp-row-tiles::-webkit-scrollbar { display: none; }

.opp-backs {
  display: flex;
  align-items: flex-end;
  gap: var(--tile-gap);
  flex: none;
  /* room for the leftmost tile's 3D side face, which sits outside the box */
  padding-left: 4px;
}

.opp-melds {
  display: flex;
  gap: calc(var(--tile-gap) * 2);
  align-items: flex-end;
  padding-left: 9px;
  border-left: 1px dashed rgba(245, 233, 196, 0.22);
  flex: none;
}

.opp-melds:empty { display: none; }

.meld-set {
  display: flex;
  gap: var(--tile-gap);
  align-items: flex-end;
  flex: none;
}