/* wheelpreview.css - the SKIN PREVIEW dialog (js/wheelpreview.mjs), shared by
 * the player wheel and the staff prize cards.
 *
 * TOKEN-ONLY: the dialog, its backdrop and the stage ground are role tokens, so
 * the preview wears each owner's palette. The specimen itself is shopview.mjs's
 * walking stage; this sheet only gives its well a size, a ground, and the two
 * quiet states (on its way / unavailable) the shop's own wells show.
 */

.wpv {
  box-sizing: border-box;
  width: min(40rem, calc(100vw - 2rem));
  max-width: none;
  max-height: calc(100vh - 2rem);
  margin: auto;
  padding: 0;
  overflow: auto;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-s);
  box-shadow: var(--lift-2);
}
.wpv::backdrop { background: color-mix(in srgb, var(--bg-deep) 74%, transparent); }

.wpv-card { display: grid; gap: .9rem; padding: clamp(1rem, 3vw, 1.4rem); }

.wpv-head { display: flex; align-items: flex-start; gap: 1rem; }
.wpv-titles { flex: 1 1 auto; min-width: 0; }
.wpv-kicker {
  margin: 0 0 .2rem;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.wpv-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.wpv-sub { margin: .25rem 0 0; font-size: .9rem; color: var(--fg-dim); }
.wpv .wpv-close.btn {
  font-size: 1.35rem;
  letter-spacing: 0;
}
/* The terminal look opens every text button with a chevron; the dialog sits on
   <body>, outside the consoles that drop it, and a close mark is an icon, not a
   command (seen live on Everfall, 2026-09-15: "> x"). */
.wpv .wpv-close.btn::before { content: none; }
.wpv-close {
  flex: none;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0 .7rem;
  font-size: 1.3rem;
  line-height: 1;
}

.wpv-stagehost {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 60vh;
  overflow: hidden;
  border-radius: var(--r-s);
  background:
    radial-gradient(112% 88% at 50% 46%,
      transparent 40%, var(--veil-soft) 74%, var(--veil-mid) 100%),
    var(--surface-2);
}
.wpv-stage { position: absolute; inset: 0; }
.wpv-stage[data-view="idle"]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border: 1px solid var(--border-2);
  border-radius: var(--r-round, 50%);
}
.wpv-stage[data-view="missing"]::before {
  content: attr(data-missing-label);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  text-align: center;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.wpv-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--fg-mute);
}

.wpv-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .75rem;
}
.wpv-label { font-size: .85rem; color: var(--fg-dim); }
.wpv-note { margin: 0; font-size: .85rem; color: var(--fg-mute); }

@media (max-width: 520px) {
  .wpv-row { grid-template-columns: minmax(0, 1fr); }
}