/* Board and status overlay */
.board {
  position: relative;
  width: var(--board-size);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--board);
  touch-action: none;
  user-select: none;
}
canvas { display: block; width: 100%; height: 100%; }
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-content: safe center;
  gap: 0.5rem;
  padding: 1.5rem;
  overflow: auto;
  text-align: center;
  background: color-mix(in srgb, var(--board) 82%, transparent);
}
.overlay[hidden] { display: none; }
.choices { display: flex; flex-direction: column; gap: 0.625rem; width: 100%; }
.choices[hidden] { display: none; }

/* Perk cards and floor arrival */
.choice {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 0.875rem;
  width: 100%;
  padding: 0.75rem 0.875rem;
  border-radius: 1rem;
  text-align: left;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.12);
  transition: transform 0.15s, background-color 0.15s;
  animation: card-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(var(--i) * 90ms);
}
.choice-text { display: flex; flex-direction: column; }
.choice .label { color: inherit; opacity: 0.85; }
.choice[data-rarity] {
  --perk-accent: var(--text);
  border: 1px solid color-mix(in srgb, var(--perk-accent) 55%, var(--surface));
}
.choice[data-rarity="rare"] { --perk-accent: var(--perk-rare); }
.choice[data-rarity="epic"] { --perk-accent: var(--perk-epic); }
.choice-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.5rem; }
.perk-rarity {
  color: var(--perk-accent);
  font-size: 0.65rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.choice:active { transform: scale(0.98); }
.choice.is-chosen { animation: card-chosen 0.32s ease forwards; }
.choice.is-dismissed { animation: card-out 0.3s ease forwards; }
@media (hover: hover) { .choice:hover { transform: translateY(-2px); } }
@keyframes card-in { from { opacity: 0; transform: translateY(1rem) scale(0.96); } }
@keyframes card-chosen { to { transform: scale(1.04); box-shadow: 0 0 0 2px var(--head), 0 8px 22px rgb(0 0 0 / 0.2); } }
@keyframes card-out { to { opacity: 0; transform: translateY(0.5rem) scale(0.96); } }
@media (prefers-reduced-motion: reduce) { .choice, .choice.is-chosen, .choice.is-dismissed { animation: none; transition: none; } }
.overlay h1 { margin: 0; font-size: 1.75rem; }
.overlay p { margin: 0 0 0.75rem; color: var(--muted); }
.overlay.floor-intro h1 {
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 780;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  animation: floor-title-in 0.52s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.overlay.floor-intro #hint {
  animation: floor-hint-in 0.52s ease 0.12s both;
}
@keyframes floor-title-in {
  from { opacity: 0; transform: translateY(0.65rem) scale(0.94); letter-spacing: 0.18em; }
}
@keyframes floor-hint-in {
  from { opacity: 0; transform: translateY(0.4rem); }
}
@media (prefers-reduced-motion: reduce) {
  .overlay.floor-intro h1,
  .overlay.floor-intro #hint { animation: none; }
}