/* CarkedIt Online — Gameboard Component */

.gameboard {
  background: color-mix(in srgb, var(--color-white) 10%, transparent);
  border-radius: 10px;
  box-shadow: 0 4px 6px var(--color-shadow-sm), 0 2px 4px var(--color-shadow-sm);
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.gameboard__card-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-height: 0;
  container-type: size; /* size (not inline-size) so cqb gives card-area height */
}

.gameboard__hint {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  padding-top: 16px;
  flex-shrink: 0;
}

/* ── Active card — single prominent card in the gameboard ── */

.gameboard__active-card {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: inherit;
}

.gameboard__active-card[onclick] {
  cursor: pointer;
}

/* Inner slot: establishes the size container so 100cqh excludes label space */
.gameboard__active-card__slot {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  container-type: size;
}

/* Card/card-back inside slot: fill width or height, whichever is reached first */
.gameboard__active-card__slot > .card,
.gameboard__active-card__slot > .card-back,
.gameboard__active-card__slot > .card-flip {
  width: min(100cqw, calc(100cqh * 5 / 7));
}

.gameboard__active-card__label {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  text-transform: uppercase;
}

/* ── Played cards grid — row below the prompt card ── */

/* When played cards are present:
   - Active card: flex-basis = one natural card height (100cqi × 7/5), won't grow, can shrink
   - Played cards: flex-basis = 90px minimum, grows to fill all remaining space above
   - Slot capped at natural card height — card always fills slot edge-to-edge */
.gameboard__card-area--has-played .gameboard__active-card {
  flex: 0 1 calc(100cqi * 7 / 5);
  min-height: 0;
}

.gameboard__card-area--has-played .gameboard__active-card__slot {
  max-height: calc(100cqi * 7 / 5);
}

/* Played cards grid — fills all space remaining after the active card */
.gameboard__played-cards {
  flex: 1 0 90px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  pointer-events: none;
  width: 100%;
}

.gameboard__played-cards--cols-4 { grid-template-columns: repeat(4, 1fr); }

.gameboard__played-card {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

/* Card back: base has width:100% + aspect-ratio:5/7.
   max-height:100% triggers aspect-ratio transfer — when the cell is short,
   width shrinks so the card stays in ratio and never overflows the cell. */
.gameboard__played-card .card-back {
  max-height: 100%;
  border-radius: 8px;
}

/* Player name overlaid at the bottom of the card back */
.gameboard__played-card-label {
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  z-index: 2;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-90);
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 1px 3px var(--color-overlay-dim);
  pointer-events: none;
}

.gameboard__played-card--revealed {
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
  border: none;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.gameboard__played-card--revealed .card {
  width: 100%;
  height: 100%;
  border-radius: 14px;
}

.gameboard__played-card-player {
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  font-size: 8px;
  font-weight: 700;
  color: var(--color-text);
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 1px 3px var(--color-overlay-dim);
  z-index: 1;
}