/* Harvested from StoryBlocks cyoa-player choice surfaces (2026-07-25).
   Scoped under .vn-frame[data-mode=…] for the Bases Choices lab. */
.vn-frame {
  --bg: #0c0b0a;
  --panel: #161311;
  --panel-2: #1e1a16;
  --line: rgba(200,164,90,0.22);
  --ink: #f2ebe0;
  --ink-dim: rgba(242,235,224,0.72);
  --ink-faint: rgba(242,235,224,0.45);
  --accent: #c8a45a;
  --signal: #e07060;
  --risk: #d4a04a;
  --font-display: "Source Sans 3", "IBM Plex Sans", system-ui, sans-serif;
  --preview-card-radius: 0.78rem;
  --preview-chip-radius: 0.55rem;
  --preview-shell-radius: 0.72rem;
  --preview-tab-radius: 0.42rem;
  --preview-gap: 0.38rem;
  color: var(--ink);
  font-family: var(--font-display);
}
.choice-dock{
  flex: 0 0 auto;
  z-index: 1;
  padding: 0;
  background: transparent;
  position: relative;
}
.choice-dock[hidden]{ display: none !important; }
/* Universal full-bleed choice tiles: image fills the card; copy rides a
   bottom scrim. Applies to production Future Hand and every preview mode.
   Visual + body share one grid cell so split-column / stacked layouts cannot
   resurrect a side-by-side or image-above-text card. */
.vn-frame .future-choice,
.vn-frame .future-hand[data-count] .future-choice,
.vn-frame .future-hand[data-count] > .future-choice,
.vn-frame .future-choice,
.vn-frame .future-hand[data-count] .future-choice,
.vn-frame .future-hand[data-count] .future-choice.is-mobile-current{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  isolation: isolate;
  overflow: hidden !important;
  padding: 0 !important;
  background: #0c0b0a;
}
.vn-frame .future-choice-visual,
.vn-frame .future-choice-visual{
  grid-area: 1 / 1 !important;
  position: relative !important;
  inset: auto !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  border-radius: inherit;
  display: block !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 55% 30%, rgba(200,164,90,0.16), transparent 52%),
    linear-gradient(160deg, #1a1714, #0c0b0a);
}
.vn-frame .future-choice-visual::after{
  content: none !important;
}
.vn-frame .future-choice-image,
.vn-frame .future-choice-portrait,
.vn-frame .future-choice-image,
.vn-frame .future-choice-portrait{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center 28% !important;
  display: block !important;
}
.vn-frame .future-choice.has-portrait:not(.has-forecast):not(.has-ambient-forecast) .future-choice-portrait,
.vn-frame .future-choice.is-forecasting.has-portrait:not(.has-forecast):not(.has-ambient-forecast) .future-choice-portrait{
  opacity: 1 !important;
  filter: saturate(.9) contrast(1.04);
}
.vn-frame .future-choice.has-forecast .future-choice-portrait,
.vn-frame .future-choice.has-ambient-forecast .future-choice-portrait{ opacity: 0 !important; }
.vn-frame .future-choice.has-forecast .future-choice-image{
  opacity: 1 !important;
  filter: saturate(.95) contrast(1.05);
}
.vn-frame .future-choice.has-ambient-forecast:not(.has-forecast) .future-choice-image{
  opacity: .72 !important;
  filter: saturate(.75) contrast(1.02);
}
.vn-frame .future-choice.has-portrait .future-choice-glyph,
.vn-frame .future-choice.has-forecast .future-choice-glyph,
.vn-frame .future-choice.has-ambient-forecast .future-choice-glyph,
.vn-frame .future-choice.is-forecasting .future-choice-glyph{
  opacity: 0 !important;
}
.vn-frame .future-choice-body,
.vn-frame .future-choice-body{
  grid-area: 1 / 1 !important;
  grid-column: 1 / -1 !important;
  grid-row: 1 / -1 !important;
  position: relative !important;
  z-index: 2 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  justify-content: flex-end !important;
  padding: 1.6rem .55rem .48rem !important;
  background: linear-gradient(
    to top,
    rgba(8, 7, 6, 0.92) 0%,
    rgba(8, 7, 6, 0.72) 42%,
    rgba(8, 7, 6, 0.18) 72%,
    rgba(8, 7, 6, 0) 100%
  ) !important;
  pointer-events: none;
}
.vn-frame .future-choice-body > *{ pointer-events: auto; }
.vn-frame .future-choice .choice-label{
  color: #f4efe6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
.vn-frame .future-choice-intent,
.vn-frame .future-choice-signals,
.vn-frame .future-choice-forecast,
.vn-frame .future-choice .choice-lock{
  color: rgba(244, 239, 230, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.vn-frame .future-choice-forecast{
  display: block !important;
  position: absolute !important;
  left: .45rem; right: .45rem; bottom: auto; top: .35rem;
  z-index: 3;
  pointer-events: none;
}
/* Production / preview Future Hand fan: keep card size, force single-cell overlay. */
.vn-frame[data-mode="hand"] .future-hand[data-count] .future-choice{
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}
.vn-frame[data-mode="hand"] .future-choice-body,
.vn-frame[data-mode="hand"] .future-choice-visual{
  grid-column: 1 !important;
  grid-row: 1 !important;
}
.vn-frame[data-mode="hand"] .future-choice .choice-label{
  -webkit-line-clamp: 3;
  font-size: .72rem;
}
.vn-frame[data-mode="hand"] .future-choice.is-drawn .choice-label{
  -webkit-line-clamp: 4;
}
.future-hand{
  position: relative;
  display: block;
  height: 10.8rem;
  max-width: 42rem;
  margin: 0 auto;
  perspective: 900px;
}
.future-choice{
  position: absolute;
  left: var(--card-left, 50%);
  bottom: -1.35rem;
  z-index: calc(2 + var(--card-index));
  width: min(12.3rem, 28%);
  height: 12rem;
  padding: 0;
  overflow: hidden;
  transform: translateX(-50%) rotate(var(--card-turn));
  transform-origin: 50% 125%;
  border: 1px solid var(--line);
  border-radius: 0.78rem;
  color: var(--ink);
  background: var(--panel);
  box-shadow: 0 7px 20px rgba(0,0,0,0.48);
  cursor: pointer;
  text-align: left;
  opacity: 0.92;
  transition: transform .18s cubic-bezier(.2,.85,.25,1), opacity .12s ease,
              border-color .12s ease, box-shadow .12s ease;
}
.future-hand:hover .future-choice{ opacity: 0.82; }
.future-choice:hover,
.future-choice:focus-visible{
  z-index: 30;
  opacity: 1;
  transform: translateX(-50%) translateY(-0.7rem) rotate(0);
  border-color: var(--accent);
  box-shadow: 0 14px 32px rgba(0,0,0,0.62);
  outline: none;
}
.future-choice:active{
  transform: translateX(-50%) translateY(-0.55rem) rotate(0);
}
/* First click draws a card high from the dealt hand; a second click uses it. */
.future-choice.is-drawn{
  z-index: 40;
  opacity: 1;
  transform: translateX(-50%) translateY(-2.35rem) rotate(0);
  border-color: var(--accent);
  box-shadow: 0 19px 42px rgba(0,0,0,0.68);
}
.future-choice[data-risk="high"]{ border-color: var(--signal); }
.future-choice[data-risk="med"]{ border-color: var(--risk); }
.future-choice.choice-safety{ border-color: var(--accent); border-style: dashed; }
.future-hand[data-count="2"] .future-choice{ width: min(15.5rem, 44%); }
.future-hand[data-count="3"] .future-choice{ width: min(13.5rem, 34%); }
.future-choice.locked{ opacity: 0.58; cursor: not-allowed; }
/* Locked cards still expand-to-read on ribbon/hand/accordion — dim less when drawn. */
.future-choice.locked.is-drawn{
  opacity: 0.92;
  cursor: pointer;
}
.future-choice-visual{
  position: relative;
  display: grid;
  place-items: center;
  height: 6.35rem;
  overflow: hidden;
  color: var(--accent);
  background:
    radial-gradient(circle at 50% 45%, rgba(200,164,90,0.18), transparent 48%),
    linear-gradient(135deg, var(--panel-2), var(--bg));
}
.future-choice-visual::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 42%, var(--panel));
  pointer-events: none;
}
.future-choice-image{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.78) contrast(1.04);
  opacity: 0;
  transition: opacity .3s ease, transform .55s ease, filter .18s ease;
}
.future-choice-portrait{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 24%;
  filter: saturate(.72) contrast(1.02);
  opacity: 0;
  transition: opacity .25s ease;
}
.future-choice.has-portrait:not(.has-forecast):not(.has-ambient-forecast) .future-choice-portrait{ opacity: .62; }
.future-choice.has-forecast .future-choice-portrait,
.future-choice.has-ambient-forecast .future-choice-portrait{ opacity: 0; }
.future-choice.has-forecast .future-choice-image{ opacity: .72; }
/* Untaken sibling pregens cycling while this card's real forecast is still cooking. */
.future-choice.has-ambient-forecast:not(.has-forecast) .future-choice-image{ opacity: .5; filter: saturate(.7); }
.future-choice:hover .future-choice-image,
.future-choice:focus-visible .future-choice-image{ transform: scale(1.06); filter: saturate(1); }
.future-choice.has-forecast .future-choice-glyph,
.future-choice.has-ambient-forecast .future-choice-glyph,
.future-choice.has-portrait .future-choice-glyph{ opacity: 0; }
.future-choice-glyph{ position: relative; z-index: 1; transition: opacity .2s ease; }
.future-choice-forecast{
  position: absolute;
  left: .45rem; bottom: .2rem;
  z-index: 2;
  color: var(--ink-faint);
  font: italic .58rem var(--font-display);
  letter-spacing: .02em;
}
.future-choice-forecast:empty{ display: none; }
.future-choice.is-forecasting .future-choice-visual{
  background:
    linear-gradient(110deg, transparent 25%, rgba(255,255,255,.06) 40%, transparent 55%) 0/250% 100%,
    radial-gradient(circle at 50% 45%, rgba(200,164,90,.18), transparent 48%),
    var(--panel-2);
  animation: forecastShimmer 1.8s linear infinite;
}
@keyframes forecastShimmer { to { background-position: -250% 0, 0 0, 0 0; } }
.future-choice-body{
  display: flex;
  flex-direction: column;
  min-height: 5.65rem;
  padding: .42rem .55rem .5rem;
}
.future-choice-top{ display: flex; align-items: center; gap: .35rem; }
.future-choice .choice-key{
  flex: 0 0 auto;
  width: 1rem; height: 1rem;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  color: var(--accent-ink);
  background: var(--accent);
  font: 700 .62rem var(--font-display);
}
.future-choice-intent{
  color: var(--accent);
  font: 700 .58rem var(--font-display);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.future-choice .choice-label{
  display: -webkit-box;
  margin-top: .24rem;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: calc(.78rem * var(--reading-scale));
  line-height: 1.24;
}
.future-choice-signals{
  display: inline-flex;
  align-items: center;
  gap: .34rem;
  margin-top: auto;
  padding-top: .3rem;
  color: var(--ink-faint);
}
.future-choice-signals .choice-sig{ opacity: .82; }
.future-choice .choice-lock{
  display: inline-flex; align-items: center; gap: .25rem;
  margin-top: .25rem;
  color: var(--ink-faint);
  font-size: .62rem;
  line-height: 1.2;
}
.scene-choices.resolved{ margin-top: 0.7rem; }
.choice-signals{ display: inline-flex; align-items: center; gap: .3rem; color: var(--ink-faint); }
.choice-lock-icon{ color: var(--ink-faint); }
.choice-pager{ display: none; }
@media (max-width: 620px), (hover: none) {
  .choice-dock {
    min-width: 0;
    width: 100%;
  }
  .future-hand {
    display: block;
    gap: .5rem;
    width: 100%;
    height: auto;
    min-height: 0;
    max-width: none;
    margin: 0;
    padding: .35rem 0 1rem;
    overflow: visible;
  }
  .future-choice {
    position: relative;
    left: auto; bottom: auto;
    display: none;
    width: 100%;
    min-width: 0;
    height: 6.6rem;
    transform: none;
    grid-template-columns: minmax(0, 1fr);
    opacity: 1;
    min-height: 8.5rem;
    height: 8.5rem;
  }
  .future-choice.is-mobile-current { display: grid; }
  /* The desktop 2/3-card width selectors are more specific than the base
     mobile card rule. Reset them at equal specificity or a three-choice
     scene collapses every card to 34% of its grid cell. */
  .future-hand[data-count] .future-choice { width: 100%; }
  .future-hand:hover .future-choice { opacity: 1; }
  .future-choice:hover,
  .future-choice:focus-visible { transform: translateY(-1px); }
  .future-choice:active { transform: translateY(1px); }
  .future-choice.is-drawn {
    transform: translateY(-0.8rem);
    box-shadow: 0 15px 30px rgba(0,0,0,0.6);
  }
  .future-choice-visual { height: 100%; }
  .future-choice-body { min-height: 0; padding: .42rem .5rem; }
  .future-choice .choice-label { -webkit-line-clamp: 3; font-size: .74rem; }
  .future-choice-signals { gap: .2rem; padding-top: .15rem; }
  .future-choice-forecast { display: none; }
  .choice-pager {
    display: block;
    position: absolute;
    inset: .35rem 0 auto;
    height: 6.6rem;
    pointer-events: none;
  }
  .choice-pager-btn {
    position: absolute;
    top: 50%;
    width: 2.4rem;
    min-height: 44px;
    padding: 0;
    transform: translateY(-50%);
    color: var(--ink-dim);
    background: var(--panel);
    border-radius: 999px;
    font: 700 1.45rem/1 var(--font-display);
    pointer-events: auto;
  }
  .choice-pager-btn:first-child { left: 0; }
  .choice-pager-btn:last-child { right: 0; }
  .choice-pager-status {
    position: absolute;
    left: 50%;
    bottom: -.7rem;
    min-width: 2.8rem;
    transform: translateX(-50%);
    color: var(--accent);
    text-align: center;
    font: 700 .7rem var(--font-display);
    font-variant-numeric: tabular-nums;
  }
  .choice-dock .future-hand { width: calc(100% - 5.4rem); margin-inline: auto; }
}
@media (max-width: 340px) {
  .future-hand { padding-bottom: .4rem; }
  .future-choice {
    height: 6rem;
    grid-template-columns: minmax(0, 1fr);
  }
  .future-choice-body { padding: .45rem; }
  .future-choice .choice-label { -webkit-line-clamp: 3; font-size: .75rem; }
}
/* Hardware fallback for Safari's "desktop website" viewport. iOS may fail
   both mobile media-query branches while still exposing maxTouchPoints. */
.vn-frame .choice-dock{ min-width: 0; width: 100%; }
.vn-frame .future-hand{
  display: block; width: 100%; height: auto; min-height: 0; max-width: none;
  margin: 0; padding: .35rem 0 1rem; overflow: visible;
}
.vn-frame .future-choice,
.vn-frame .future-hand[data-count] .future-choice{
  position: relative; left: auto; bottom: auto; display: none;
  width: 100%; min-width: 0; height: 6.6rem; transform: none;
  grid-template-columns: minmax(0, 1fr); opacity: 1;
}
.vn-frame .future-hand[data-count] .future-choice.is-mobile-current{ display: grid; }
.vn-frame .future-choice:hover,
.vn-frame .future-choice:focus-visible{ transform: translateY(-1px); opacity: 1; }
.vn-frame .future-choice:active{ transform: translateY(1px); }
.vn-frame .future-choice.is-drawn{
  transform: translateY(-0.8rem);
  box-shadow: 0 15px 30px rgba(0,0,0,0.6);
}
.vn-frame .future-choice-visual{ height: 100%; }
.vn-frame .future-choice-body{ min-height: 0; padding: .42rem .5rem; }
.vn-frame .future-choice .choice-label{ -webkit-line-clamp: 3; font-size: .74rem; }
.vn-frame .future-choice-signals{ gap: .2rem; padding-top: .15rem; }
.vn-frame .future-choice-forecast{ display: none; }
.vn-frame .choice-pager{
  display: block; position: absolute; inset: .35rem 0 auto; height: 6.6rem;
  pointer-events: none;
}
.vn-frame .choice-pager-btn{
  position: absolute; top: 50%; width: 2.4rem; min-height: 44px; padding: 0;
  transform: translateY(-50%); color: var(--ink-dim); background: var(--panel);
  border-radius: 999px; font: 700 1.45rem/1 var(--font-display); pointer-events: auto;
}
.vn-frame .choice-pager-btn:first-child{ left: 0; }
.vn-frame .choice-pager-btn:last-child{ right: 0; }
.vn-frame .choice-pager-status{
  position: absolute; left: 50%; bottom: -.7rem; min-width: 2.8rem;
  transform: translateX(-50%); color: var(--accent); text-align: center;
  font: 700 .7rem var(--font-display); font-variant-numeric: tabular-nums;
}
.vn-frame .choice-dock .future-hand{ width: calc(100% - 5.4rem); margin-inline: auto; }

/* Production keeps the expressive dealt-hand direction on touch too. The
   /preview/ route now retains the former compact one-card pager above as a
   comparison and rollback lane. */
.vn-frame[data-mode="hand"] .choice-dock .future-hand{
  position: relative; display: block; width: 100%; height: 7.5rem;
  max-width: 30rem; margin: 0 auto; padding: 0; overflow: visible;
}
.vn-frame[data-mode="hand"] .future-hand[data-count] .future-choice{
  position: absolute; bottom: -.7rem; display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: min(11rem, 48vw); height: 7.3rem; min-width: 0;
  transform: translateX(-50%) rotate(var(--card-turn));
  transform-origin: 50% 125%;
}
.vn-frame[data-mode="hand"] .future-hand[data-count] .future-choice.is-drawn{
  z-index: 40;
  transform: translateX(-50%) translateY(-1.25rem) rotate(0);
}
.vn-frame[data-mode="hand"] .future-hand[data-count="2"] .future-choice:nth-child(1){ left: 34%; }
.vn-frame[data-mode="hand"] .future-hand[data-count="2"] .future-choice:nth-child(2){ left: 66%; }
.vn-frame[data-mode="hand"] .future-hand[data-count="3"] .future-choice:nth-child(1){ left: 24%; }
.vn-frame[data-mode="hand"] .future-hand[data-count="3"] .future-choice:nth-child(2){ left: 50%; }
.vn-frame[data-mode="hand"] .future-hand[data-count="3"] .future-choice:nth-child(3){ left: 76%; }
.vn-frame[data-mode="hand"] .future-hand[data-count="4"] .future-choice:nth-child(1){ left: 18%; }
.vn-frame[data-mode="hand"] .future-hand[data-count="4"] .future-choice:nth-child(2){ left: 39%; }
.vn-frame[data-mode="hand"] .future-hand[data-count="4"] .future-choice:nth-child(3){ left: 61%; }
.vn-frame[data-mode="hand"] .future-hand[data-count="4"] .future-choice:nth-child(4){ left: 82%; }
.vn-frame[data-mode="hand"] .future-choice-body{
  grid-column: 1; grid-row: 1; min-height: 0; height: 100%;
  justify-content: flex-end; padding: 1.4rem .4rem .45rem .45rem;
}
.vn-frame[data-mode="hand"] .future-choice-visual{
  grid-column: 1; grid-row: 1; height: 100%;
}
.vn-frame[data-mode="hand"] .future-choice .choice-label{ -webkit-line-clamp: 4; }
.vn-frame[data-mode="hand"] .choice-pager,
.vn-frame[data-mode="hand"] .choice-pager{
  display: none !important;
}
.vn-frame[data-mode="hand"] .choice-dock .future-hand,
.vn-frame[data-mode="hand"] .choice-dock .future-hand{
  width: 100%;
  margin-inline: auto;
}

/* Preview card lab — real choices, alternate surfaces. The selectors are
   inert on production because only /preview/ receives preview-card-lab. */
/* Faithful Figma concept structures. One block owns layout per mode (no
   dual skin/faithful eras). Tokens keep radius/signal chrome aligned. */
.vn-frame{
  --preview-card-radius: 0.78rem;
  --preview-chip-radius: 0.55rem;
  --preview-shell-radius: 0.72rem;
  --preview-tab-radius: 0.42rem;
  --preview-gap: 0.38rem;
}
.vn-frame .future-choice{
  border-radius: var(--preview-card-radius);
}

/* Shared corner signal chrome (accordion / reveal / gallery / open ribbon). */
.vn-frame .preview-corner-signals,
.vn-frame[data-mode="accordion"] .future-choice-signals,
.vn-frame[data-mode="reveal"] .future-choice-signals,
.vn-frame[data-mode="gallery"] .future-choice-signals{
  position: absolute; inset: .32rem .32rem auto auto; z-index: 4;
  width: auto; margin: 0; padding: .12rem; gap: .12rem;
  justify-content: flex-end; align-items: flex-start;
  background: none; border: 0; transform: none !important; pointer-events: none;
  color: var(--ink-dim);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
.vn-frame[data-mode="accordion"] .future-choice-signals .choice-sig,
.vn-frame[data-mode="reveal"] .future-choice-signals .choice-sig,
.vn-frame[data-mode="gallery"] .future-choice-signals .choice-sig{
  opacity: .92; width: 1rem; height: 1rem;
}

/* :where() gate contributes zero specificity so mode rules win layout. */


/* Multi-card experiments must beat touch one-up hide of non-current cards. */
.vn-frame[data-mode]:not([data-mode="compact"]):not([data-mode="stack"]):not([data-mode="hand"]):not([data-mode="deck"]):not([data-mode="oracle"]) .future-hand[data-count] .future-choice{
  display: grid !important;
}
.vn-frame[data-mode]:not([data-mode="compact"]):not([data-mode="stack"]):not([data-mode="hand"]):not([data-mode="deck"]):not([data-mode="oracle"]) .choice-dock .future-hand{
  width: 100%;
}
/* Lift is mode-owned; generic gate only supplies a tiny hover cue for static grids. */


/* Must beat html.touch-ui .choice-pager { display:block }. Compact alone keeps the pager. */
.vn-frame:not([data-mode="compact"]) .choice-pager,
.vn-frame:not([data-mode="compact"]) .choice-pager{
  display: none !important;
}
.vn-frame:not([data-mode="compact"]) .choice-dock .future-hand,
.vn-frame:not([data-mode="compact"]) .choice-dock .future-hand{
  width: 100% !important;
  margin-inline: 0;
}

.vn-frame .choice-dock .future-hand > [data-preview-chrome="1"]{ box-sizing: border-box; }
.vn-frame .preview-summary-copy{ display: flex; min-width: 0; flex-direction: column; gap: .16rem; }
.vn-frame .preview-summary-copy strong{
  color: var(--accent); font: 700 .66rem var(--font-display); letter-spacing: .08em; text-transform: uppercase;
}
.vn-frame .preview-summary-copy > span{ color: var(--ink); font-size: .8rem; line-height: 1.25; }
.vn-frame .choice-dock:not([hidden]) + .composer{ margin-top: 0; }
@keyframes preview-commit { 40% { transform: translateY(-.4rem) scale(1.02); opacity: 1; } 100% { transform: translateY(-.12rem) scale(.99); opacity: .3; } }
.vn-frame .future-hand.is-preview-committing{ pointer-events: none; }
.vn-frame .future-choice.is-preview-committing{ z-index: 50 !important; animation: preview-commit .1s ease-out both; }

/* Shared selected ring for multi-step staging (combo/market/zone/deck). */
.vn-frame[data-mode="combo"] .future-choice.is-preview-selected,
.vn-frame[data-mode="market"] .future-choice.is-preview-selected,
.vn-frame[data-mode="zone"] .future-choice.is-preview-selected,
.vn-frame[data-mode="deck"] .future-choice.is-preview-selected{
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
  opacity: 1;
}

/* A · accordion: one expanding row; touch expands via .is-drawn (peek-then-commit). */
.vn-frame[data-mode="accordion"] .choice-dock .future-hand{
  display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch;
  gap: var(--preview-gap); width: 100% !important; margin-inline: 0;
}
.vn-frame[data-mode="accordion"] .future-hand[data-count] > .future-choice{
  flex: 1 1 12%; grid-template-columns: minmax(0, 1fr); min-height: 5.2rem !important;
  opacity: .72; overflow: hidden;
  transition: flex .18s cubic-bezier(.2,.85,.25,1), opacity .1s ease, border-color .1s ease;
}
.vn-frame[data-mode="accordion"] .future-hand:hover > .future-choice,
.vn-frame[data-mode="accordion"] .future-hand:has(.is-drawn) > .future-choice{ opacity: .35; }
.vn-frame[data-mode="accordion"] .future-hand > .future-choice:hover,
.vn-frame[data-mode="accordion"] .future-hand > .future-choice:focus-visible,
.vn-frame[data-mode="accordion"] .future-hand > .future-choice.is-drawn{
  flex: 2.6 1 42%; opacity: 1; transform: none;
}
.vn-frame[data-mode="accordion"] .future-choice-visual{ height: 100%; }
.vn-frame[data-mode="accordion"] .future-choice-body{ min-height: 0; justify-content: flex-end !important; }
/* Collapsed chips keep a one-line ellipsis (parity with ribbon), not icon-only. */
.vn-frame[data-mode="accordion"] .future-choice:not(.is-drawn):not(:hover):not(:focus-visible) .choice-label{
  white-space: nowrap; -webkit-line-clamp: 1; display: block; overflow: hidden; text-overflow: ellipsis;
}
.vn-frame[data-mode="accordion"] .future-choice:not(.is-drawn):not(:hover):not(:focus-visible) .future-choice-signals{
  display: none !important;
}
/* Same corner affordances as reveal — no footer strip covering expanded label text. */
.vn-frame[data-mode="accordion"] .future-choice.is-drawn .choice-label,
.vn-frame[data-mode="accordion"] .future-choice:hover .choice-label,
.vn-frame[data-mode="accordion"] .future-choice:focus-visible .choice-label{
  white-space: normal; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}

/* B · reveal: 2×2 faces when count is 4; otherwise a 1×N row (usually 1×3). */
.vn-frame[data-mode="reveal"] .choice-dock .future-hand{
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .42rem;
  width: 100% !important; margin-inline: 0;
}
.vn-frame[data-mode="reveal"] .choice-dock .future-hand[data-count="4"]{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vn-frame[data-mode="reveal"] .choice-dock .future-hand[data-count="2"]{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vn-frame[data-mode="reveal"] .choice-dock .future-hand[data-count="1"]{
  grid-template-columns: minmax(0, 1fr);
}
.vn-frame[data-mode="reveal"] .future-hand[data-count] > .future-choice{
  position: relative; display: grid !important; grid-template-columns: minmax(0, 1fr) !important;
  min-height: 7.2rem !important; overflow: hidden;
}
.vn-frame[data-mode="reveal"] .future-choice-visual{ height: 100%; }
.vn-frame[data-mode="reveal"] .future-choice-body{ min-height: 0; }
/* Stat affordances sit as corner icons — no footer drawer covering the label. */

/* C · ribbon: chips and the real composer read as one fused control.
   Collapsed chips truncate; touch must expand via .is-drawn before commit. */
.vn-frame[data-mode="ribbon"] .choice-dock{
  padding: .38rem .38rem 0; border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--preview-shell-radius) var(--preview-shell-radius) 0 0; background: var(--panel);
}
.vn-frame[data-mode="ribbon"] .choice-dock .future-hand{
  display: flex; flex-direction: row; flex-wrap: nowrap; gap: .3rem; max-width: none; padding: 0;
  align-items: stretch; width: 100% !important; margin-inline: 0;
}
.vn-frame[data-mode="ribbon"] .future-hand[data-count] > .future-choice{
  flex: 1 1 10%; display: grid !important; grid-template-columns: minmax(0, 1fr) !important;
  width: auto; min-height: 3.4rem !important; min-width: 0;
  border-radius: var(--preview-chip-radius); overflow: hidden;
  transition: flex .18s cubic-bezier(.2,.85,.25,1), border-radius .12s ease, opacity .1s ease,
              width .18s cubic-bezier(.2,.85,.25,1), min-width .18s cubic-bezier(.2,.85,.25,1);
}
.vn-frame[data-mode="ribbon"] .future-hand:hover > .future-choice,
.vn-frame[data-mode="ribbon"] .future-hand:has(.is-drawn) > .future-choice{ opacity: .46; }
.vn-frame[data-mode="ribbon"] .future-hand > .future-choice:hover,
.vn-frame[data-mode="ribbon"] .future-hand > .future-choice:focus-visible,
.vn-frame[data-mode="ribbon"] .future-hand > .future-choice.is-drawn{
  flex: 3.2 1 48%; border-radius: var(--preview-chip-radius); opacity: 1; transform: none;
}
.vn-frame[data-mode="ribbon"] .future-choice-visual{
  min-width: 0; border-radius: inherit; height: 100%;
}
.vn-frame[data-mode="ribbon"] .future-choice-forecast{ display: none !important; }
.vn-frame[data-mode="ribbon"] .future-choice-body{
  padding: 1.1rem .5rem .35rem !important; min-height: 0; justify-content: flex-end !important;
}
.vn-frame[data-mode="ribbon"] .future-choice:not(.is-drawn):not(:hover):not(:focus-visible) .choice-label{
  white-space: nowrap; -webkit-line-clamp: 1; display: block; overflow: hidden; text-overflow: ellipsis;
}
.vn-frame[data-mode="ribbon"] .future-choice .future-choice-signals{ display: none; }
.vn-frame[data-mode="ribbon"] .future-choice.is-drawn .choice-label,
.vn-frame[data-mode="ribbon"] .future-choice:hover .choice-label,
.vn-frame[data-mode="ribbon"] .future-choice:focus-visible .choice-label{
  white-space: normal; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
/* Open ribbon uses the same corner signals as accordion/reveal. */
.vn-frame[data-mode="ribbon"] .future-choice.is-drawn .future-choice-signals,
.vn-frame[data-mode="ribbon"] .future-choice:hover .future-choice-signals,
.vn-frame[data-mode="ribbon"] .future-choice:focus-visible .future-choice-signals{
  display: flex;
  position: absolute; inset: .32rem .32rem auto auto; z-index: 4;
  width: auto; margin: 0; padding: .12rem; gap: .12rem;
  justify-content: flex-end; align-items: flex-start;
  background: none; border: 0; transform: none !important; pointer-events: none;
  color: var(--ink-dim);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
.vn-frame[data-mode="ribbon"] .composer{
  margin-top: 0; padding-top: .38rem; border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 var(--preview-shell-radius) var(--preview-shell-radius); background: var(--panel);
}
.vn-frame[data-mode="ribbon"] .composer-form input{ background: var(--bg); }

/* C2 · ribbon-portrait: same expand-then-commit fuse to the composer as C, but
   EVERY choice is a compact 3:4 portrait plate (not landscape bars that only
   go tall when drawn). Horizontal ribbon of equal tall cards; active peeks
   slightly larger without dominating the dock. */
.vn-frame[data-mode="ribbon-portrait"] .choice-dock{
  padding: .38rem .38rem 0; border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--preview-shell-radius) var(--preview-shell-radius) 0 0; background: var(--panel);
}
.vn-frame[data-mode="ribbon-portrait"] .choice-dock .future-hand{
  display: flex; flex-direction: row; flex-wrap: nowrap; gap: .35rem;
  max-width: none; padding: .1rem 0 .15rem; align-items: stretch;
  justify-content: center; width: 100% !important; margin-inline: 0;
}
.vn-frame[data-mode="ribbon-portrait"] .future-hand[data-count] > .future-choice{
  position: relative;
  flex: 1 1 0; display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  /* Compact portrait: all cards share 3:4; cap height so 3–4 fit the dock. */
  width: auto !important;
  max-width: 7.4rem;
  min-width: 0;
  height: auto !important;
  min-height: 0 !important;
  max-height: 10rem;
  aspect-ratio: 3 / 4;
  border-radius: var(--preview-card-radius, 0.78rem); overflow: hidden;
  align-self: stretch;
  transition: flex .18s cubic-bezier(.2,.85,.25,1), max-width .18s cubic-bezier(.2,.85,.25,1),
              max-height .18s cubic-bezier(.2,.85,.25,1), opacity .1s ease, box-shadow .12s ease;
}
.vn-frame[data-mode="ribbon-portrait"] .future-hand:hover > .future-choice,
.vn-frame[data-mode="ribbon-portrait"] .future-hand:has(.is-drawn) > .future-choice{ opacity: .55; }
.vn-frame[data-mode="ribbon-portrait"] .future-hand > .future-choice:hover,
.vn-frame[data-mode="ribbon-portrait"] .future-hand > .future-choice:focus-visible,
.vn-frame[data-mode="ribbon-portrait"] .future-hand > .future-choice.is-drawn{
  opacity: 1; transform: none;
  flex: 1.35 1 0;
  max-width: 8.6rem;
  max-height: 11.5rem;
  aspect-ratio: 3 / 4;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 32%, transparent);
}
/* Plate always visible under copy (portrait deck, not bar-then-expand). */
.vn-frame[data-mode="ribbon-portrait"] .future-choice-visual{
  min-width: 0; border-radius: inherit;
  display: block; position: absolute; inset: 0; z-index: 0; height: 100%;
}
.vn-frame[data-mode="ribbon-portrait"] .future-choice-image,
.vn-frame[data-mode="ribbon-portrait"] .future-choice-portrait{
  object-fit: cover;
  object-position: center 22%;
}
.vn-frame[data-mode="ribbon-portrait"] .future-choice-forecast{ display: none !important; }
.vn-frame[data-mode="ribbon-portrait"] .future-choice-body{
  position: relative; z-index: 1;
  padding: 1.6rem .4rem .4rem !important; min-height: 0; height: 100%;
  justify-content: flex-end !important;
  background: linear-gradient(to top, color-mix(in srgb, var(--panel) 92%, transparent) 0%,
    color-mix(in srgb, var(--panel) 48%, transparent) 42%, transparent 100%);
}
.vn-frame[data-mode="ribbon-portrait"] .future-choice.is-drawn .future-choice-body,
.vn-frame[data-mode="ribbon-portrait"] .future-choice:hover .future-choice-body,
.vn-frame[data-mode="ribbon-portrait"] .future-choice:focus-visible .future-choice-body{
  padding: 1.8rem .45rem .45rem !important;
}
.vn-frame[data-mode="ribbon-portrait"] .future-choice .choice-label{
  white-space: normal; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical;
  overflow: hidden; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  font-size: .82em;
}
.vn-frame[data-mode="ribbon-portrait"] .future-choice.is-drawn .choice-label,
.vn-frame[data-mode="ribbon-portrait"] .future-choice:hover .choice-label,
.vn-frame[data-mode="ribbon-portrait"] .future-choice:focus-visible .choice-label{
  -webkit-line-clamp: 4;
}
.vn-frame[data-mode="ribbon-portrait"] .future-choice .future-choice-signals{
  display: flex;
  position: absolute; inset: .28rem .28rem auto auto; z-index: 4;
  width: auto; margin: 0; padding: .1rem; gap: .1rem;
  justify-content: flex-end; align-items: flex-start;
  background: none; border: 0; transform: none !important; pointer-events: none;
  color: var(--ink-dim);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
.vn-frame[data-mode="ribbon-portrait"] .composer{
  margin-top: 0; padding-top: .38rem; border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 var(--preview-shell-radius) var(--preview-shell-radius); background: var(--panel);
}
.vn-frame[data-mode="ribbon-portrait"] .composer-form input{ background: var(--bg); }

/* E · branch gallery · full-bleed tile, copy on scrim, signals in free corner. */
.vn-frame[data-mode="gallery"] .choice-dock .future-hand{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem;
  width: 100% !important; max-width: 42rem !important; margin-inline: auto !important;
  height: auto !important; min-height: 0 !important; padding: .35rem !important;
}
.vn-frame[data-mode="gallery"] .choice-dock .future-hand[data-count="3"] > .future-choice:nth-child(3){
  grid-column: 1 / -1;
}
.vn-frame[data-mode="gallery"] .future-choice,
.vn-frame[data-mode="gallery"] .future-hand[data-count] .future-choice,
.vn-frame[data-mode="gallery"] .future-hand[data-count] > .future-choice,
.vn-frame[data-mode="gallery"] .future-choice,
.vn-frame[data-mode="gallery"] .future-hand[data-count] .future-choice,
.vn-frame[data-mode="gallery"] .future-hand[data-count] .future-choice.is-mobile-current{
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(11rem, 14rem) !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 11rem !important;
  height: 14rem !important;
  max-height: none !important;
  transform: none !important;
  isolation: isolate;
  overflow: hidden !important;
  padding: 0 !important;
  opacity: 1 !important;
  background: #0c0b0a !important;
  border-radius: var(--preview-card-radius);
}
.vn-frame[data-mode="gallery"] .future-choice-visual,
.vn-frame[data-mode="gallery"] .future-choice-visual{
  grid-area: 1 / 1 !important;
  position: relative !important;
  inset: auto !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  border-radius: inherit;
  display: block !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 55% 30%, rgba(200,164,90,0.16), transparent 52%),
    linear-gradient(160deg, #1a1714, #0c0b0a);
}
.vn-frame[data-mode="gallery"] .future-choice-visual::after{
  content: none !important;
}
.vn-frame[data-mode="gallery"] .future-choice-image,
.vn-frame[data-mode="gallery"] .future-choice-portrait,
.vn-frame[data-mode="gallery"] .future-choice-image,
.vn-frame[data-mode="gallery"] .future-choice-portrait{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center 28% !important;
  display: block !important;
}
.vn-frame[data-mode="gallery"] .future-choice.has-portrait:not(.has-forecast):not(.has-ambient-forecast) .future-choice-portrait,
.vn-frame[data-mode="gallery"] .future-choice.is-forecasting.has-portrait:not(.has-forecast):not(.has-ambient-forecast) .future-choice-portrait{
  opacity: 1 !important;
  filter: saturate(.9) contrast(1.04);
}
.vn-frame[data-mode="gallery"] .future-choice.has-forecast .future-choice-portrait,
.vn-frame[data-mode="gallery"] .future-choice.has-ambient-forecast .future-choice-portrait{ opacity: 0 !important; }
.vn-frame[data-mode="gallery"] .future-choice.has-forecast .future-choice-image{
  opacity: 1 !important;
  filter: saturate(.95) contrast(1.05);
}
.vn-frame[data-mode="gallery"] .future-choice.has-ambient-forecast:not(.has-forecast) .future-choice-image{
  opacity: .72 !important;
  filter: saturate(.75) contrast(1.02);
}
.vn-frame[data-mode="gallery"] .future-choice.has-portrait .future-choice-glyph,
.vn-frame[data-mode="gallery"] .future-choice.has-forecast .future-choice-glyph,
.vn-frame[data-mode="gallery"] .future-choice.has-ambient-forecast .future-choice-glyph,
.vn-frame[data-mode="gallery"] .future-choice.is-forecasting .future-choice-glyph{
  opacity: 0 !important;
}
.vn-frame[data-mode="gallery"] .future-choice-body,
.vn-frame[data-mode="gallery"] .future-choice-body{
  grid-area: 1 / 1 !important;
  position: relative !important;
  z-index: 2 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  justify-content: flex-end !important;
  padding: 2.4rem .7rem .65rem !important;
  background: linear-gradient(
    to top,
    rgba(8, 7, 6, 0.92) 0%,
    rgba(8, 7, 6, 0.72) 42%,
    rgba(8, 7, 6, 0.18) 72%,
    rgba(8, 7, 6, 0) 100%
  ) !important;
  pointer-events: none;
}
.vn-frame[data-mode="gallery"] .future-choice-body > *{
  pointer-events: auto;
}
.vn-frame[data-mode="gallery"] .future-choice .choice-label{
  color: #f4efe6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  -webkit-line-clamp: 4;
}
.vn-frame[data-mode="gallery"] .future-choice-intent,
.vn-frame[data-mode="gallery"] .future-choice-forecast{
  color: rgba(244, 239, 230, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.vn-frame[data-mode="gallery"] .future-choice-forecast,
.vn-frame[data-mode="gallery"] .future-choice-forecast{
  display: block !important;
  position: absolute !important;
  left: .55rem; right: 2.4rem; bottom: auto; top: .4rem;
  z-index: 3;
  pointer-events: none;
}

/* F · decision stack: icon tabs select the front card; confirmation is explicit. */
.vn-frame[data-mode="stack"] .choice-dock .future-hand.preview-stack-surface{
  display: block; width: 100%; max-width: 42rem; height: auto; padding: .35rem;
}
.preview-stack-shell{ display: grid; grid-template-columns: 2.8rem minmax(0,1fr); gap: .42rem; min-height: 9rem; }
.preview-stack-tabs{ display: flex; flex-direction: column; gap: .28rem; justify-content: center; }
.preview-stack-tab{
  display: grid; place-items: center; width: 2.55rem; height: 2.2rem; padding: 0;
  border: 1px solid var(--line); border-radius: var(--preview-tab-radius); color: var(--ink-faint); background: var(--panel); cursor: pointer;
}
.preview-stack-tab.is-active{ color: var(--accent); border-color: var(--accent); background: var(--panel-2); }
.preview-stack-cards{ position: relative; min-height: 9rem; }
.vn-frame[data-mode="stack"] .preview-stack-cards > .future-choice{
  position: absolute !important; inset: .15rem .55rem .15rem 0 !important; left: 0 !important; bottom: .15rem !important;
  display: grid !important; grid-template-columns: minmax(0,1fr) !important; width: auto !important; height: auto !important;
  min-height: 8.5rem !important; z-index: calc(20 - var(--preview-stack-depth)); pointer-events: none;
  opacity: calc(1 - var(--preview-stack-depth) * .1);
  transform: translate(calc(var(--preview-stack-depth) * .48rem),calc(var(--preview-stack-depth) * -.22rem)) rotate(calc(var(--preview-stack-depth) * -.55deg)) !important;
  transition: transform .16s cubic-bezier(.2,.85,.25,1), opacity .1s ease;
  border-radius: var(--preview-card-radius);
}
.vn-frame[data-mode="stack"] .preview-stack-cards > .future-choice.is-preview-active{ pointer-events: auto; border-color: var(--accent); }
.vn-frame[data-mode="stack"] .future-choice-visual{ height: 100%; }
.vn-frame[data-mode="stack"] .future-choice-body{ min-height: 0; justify-content: flex-end !important; }

/* G · retro command: list + inspector; commit is Choose this / Enter, not list click. */
.vn-frame[data-mode="retro"] .choice-dock .future-hand.preview-retro-surface{
  display: block; width: 100%; max-width: 42rem; padding: .3rem; background: transparent; border: 0;
}
.preview-retro-shell{
  display: grid; grid-template-columns: minmax(0,1fr) minmax(12rem,.78fr);
  border: 1px solid #728072; background: #090d0a; color: #d9e5d6;
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
  border-radius: 0;
}
.preview-retro-list{ border-right: 1px solid #728072; }
.vn-frame[data-mode="retro"] .preview-retro-list > .future-choice{
  display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100%; min-height: 4.2rem !important;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.vn-frame[data-mode="retro"] .preview-retro-list > .future-choice + .future-choice{ border-top: 1px dashed #314331; }
.vn-frame[data-mode="retro"] .preview-retro-list > .future-choice.is-preview-active{ background: #172217; }
.vn-frame[data-mode="retro"] .future-choice-visual{ height: 100%; }
.vn-frame[data-mode="retro"] .future-choice-body{ min-height: 0; padding: .38rem; }
.preview-retro-inspector{
  display: grid; grid-template-columns: 2.5rem minmax(0,1fr); gap: .55rem; align-content: center;
  min-height: 10rem; padding: .75rem;
}
.preview-retro-inspector > .future-choice-glyph{ color: #59d7d1; }
.preview-retro-inspector .preview-summary-copy strong{ color: #59d7d1; }
.preview-retro-inspector .preview-summary-copy > span{ color: #d9e5d6; }

/* Card-mode HUD. */
.preview-card-controls{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .4rem; padding: .35rem .5rem .55rem; color: var(--ink-dim);
  font: 600 .7rem var(--font-display); letter-spacing: .035em;
}
.preview-card-controls button{ min-height: 36px; }
/* Cost badge sits top-left so corner signals can keep top-right. */
.preview-card-cost{
  position: absolute; top: .4rem; left: .4rem; z-index: 5; display: grid;
  place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font: 700 .68rem var(--font-display);
}

/* 1 · deckbuilder: selectable fan; Play commits (card tap only selects). */
.vn-frame[data-mode="deck"] .choice-dock .future-hand.preview-deck-surface{
  display: block; width: 100%; max-width: 42rem; height: auto; padding: .3rem;
}
.preview-deck-hand{ display: flex; justify-content: center; align-items: flex-end; gap: .35rem; min-height: 9rem; padding: .6rem 0 .3rem; }
.vn-frame[data-mode="deck"] .preview-deck-hand > .future-choice{
  position: relative !important; left: auto !important; bottom: auto !important; display: grid !important;
  grid-template-columns: 1fr; width: 7.4rem !important; height: 9.2rem !important; min-height: 0 !important;
  flex: 0 1 7.4rem; transform: rotate(calc((var(--preview-deck-index) - 1.5) * 2.5deg)) translateY(.4rem) !important;
  transform-origin: 50% 120%; overflow: hidden; border-radius: var(--preview-card-radius);
  transition: transform .14s cubic-bezier(.2,.85,.25,1), border-color .1s ease, opacity .1s ease, box-shadow .1s ease;
}
.vn-frame[data-mode="deck"] .preview-deck-hand > .future-choice:hover,
.vn-frame[data-mode="deck"] .preview-deck-hand > .future-choice:focus-visible,
.vn-frame[data-mode="deck"] .preview-deck-hand > .future-choice.is-preview-selected{
  transform: rotate(0) translateY(-.75rem) !important;
}
.vn-frame[data-mode="deck"] .future-choice-visual{ height: 100% !important; }
.vn-frame[data-mode="deck"] .future-choice-body{
  min-height: 0 !important;
  justify-content: flex-end !important;
  padding: 2.2rem .42rem .42rem !important;
}
.vn-frame[data-mode="deck"] .future-choice .choice-label{
  font-size: .68rem; line-height: 1.2; -webkit-line-clamp: 3;
  color: #f4efe6; text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
.preview-deck-hud{ display: flex; justify-content: space-between; color: var(--ink-faint); font: 700 .68rem var(--font-display); }

/* 2 · combo chain: three explicit slots above compact move chips. */
.vn-frame[data-mode="combo"] .choice-dock .future-hand.preview-combo-surface{
  display: block; width: 100%; max-width: 42rem; padding: .35rem;
}
.preview-combo-slots{ display: flex; align-items: center; gap: .38rem; min-height: 3.8rem; margin-bottom: .42rem; }
.preview-combo-slot{
  display: grid; place-items: center; flex: 1; min-width: 0; min-height: 3.7rem; padding: .3rem;
  border: 1px dashed var(--line); border-radius: var(--preview-chip-radius); color: var(--ink-faint); background: var(--panel);
  font: 700 .6rem var(--font-display); letter-spacing: .06em; text-align: center; text-transform: uppercase;
}
.preview-combo-slot.is-filled{ border-style: solid; border-color: var(--accent); color: var(--accent); background: var(--panel-2); }
.preview-combo-plus{ color: var(--ink-faint); }
.preview-combo-choices{ display: flex; flex-wrap: wrap; gap: .3rem; }
.vn-frame[data-mode="combo"] .preview-combo-choices > .future-choice{
  position: relative; display: inline-grid !important; grid-template-columns: minmax(0, 1fr) !important; width: auto; min-height: 3.4rem !important;
  flex: 1 1 9.5rem; border-radius: var(--preview-chip-radius);
}
.vn-frame[data-mode="combo"] .future-choice-visual{ height: 100%; }
.vn-frame[data-mode="combo"] .future-choice-body{ min-height: 0; padding: .32rem .45rem; gap: .12rem; }
.vn-frame[data-mode="combo"] .future-choice .choice-label{
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; margin-top: .1rem; font-size: .72rem; line-height: 1.25;
}
.vn-frame[data-mode="combo"] .future-choice .future-choice-signals{ display: none; }
/* Selected = accent ring (shared rule); never dim as if spent. */

/* 3 · oracle: face-down back, flip to reveal, second activate commits. */
.vn-frame[data-mode="oracle"] .choice-dock .future-hand{ perspective: 900px; }
.vn-frame[data-mode="oracle"] .future-hand[data-count] > .future-choice{
  transform-style: preserve-3d; border-radius: var(--preview-card-radius);
  transition: transform .2s cubic-bezier(.2,.85,.25,1), border-color .1s ease !important;
}
.vn-frame[data-mode="oracle"] .future-choice:not(.is-preview-revealed){
  transform: rotateY(180deg) !important;
}
.vn-frame[data-mode="oracle"] .future-choice:not(.is-preview-revealed) .future-choice-visual,
.vn-frame[data-mode="oracle"] .future-choice:not(.is-preview-revealed) .future-choice-body{ visibility: hidden; }
.vn-frame[data-mode="oracle"] .future-choice:not(.is-preview-revealed)::after{
  content: '🜲'; position: absolute; inset: 0; z-index: 5; display: grid; place-items: center;
  visibility: visible; transform: rotateY(180deg);
  color: var(--accent); font-size: 1.6rem;
  background: radial-gradient(circle,color-mix(in srgb,var(--accent) 13%,transparent),transparent 58%),var(--panel);
  border-radius: inherit;
}
.vn-frame[data-mode="oracle"] .future-choice.is-preview-revealed{ transform: none !important; }

/* 4 · market: open row + drafted hand; both keep readable labels. */
.vn-frame[data-mode="market"] .choice-dock .future-hand.preview-market-surface{
  display: block; width: 100%; max-width: 42rem; padding: .35rem;
}
.preview-mode-section{ margin: .1rem 0 .32rem; color: var(--ink-faint); font: 700 .61rem var(--font-display); letter-spacing: .12em; text-transform: uppercase; }
.preview-market-row{ display: flex; gap: .35rem; margin-bottom: .48rem; }
.vn-frame[data-mode="market"] .preview-market-row > .future-choice{
  display: grid !important; grid-template-columns: 1fr; flex: 1 1 0; width: auto; min-height: 5.5rem !important;
  border-radius: var(--preview-card-radius);
}
.vn-frame[data-mode="market"] .preview-market-row .future-choice-visual{ height: 100% !important; }
.vn-frame[data-mode="market"] .preview-market-row .future-choice-body{
  min-height: 0; padding: 1.4rem .35rem .35rem !important; text-align: left; justify-content: flex-end !important;
}
.vn-frame[data-mode="market"] .preview-market-row .future-choice .choice-label,
.vn-frame[data-mode="market"] .preview-market-hand .future-choice .choice-label{
  display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; color: #f4efe6;
}
/* Signals only — never hide labels on hand chips. */
.vn-frame[data-mode="market"] .future-choice .future-choice-signals{ display: none; }
.preview-market-hand{
  display: flex; flex-wrap: wrap; gap: .3rem; min-height: 2.7rem; padding: .34rem;
  border: 1px solid var(--line); border-radius: var(--preview-chip-radius); background: var(--panel);
}
.vn-frame[data-mode="market"] .preview-market-hand > .future-choice{
  display: inline-grid !important; grid-template-columns: minmax(0, 1fr) !important; width: auto; min-height: 3.4rem !important; flex: 0 1 12rem;
  border-color: var(--accent); border-radius: var(--preview-chip-radius);
  animation: riseIn .22s ease-out both;
}
.vn-frame[data-mode="market"] .preview-market-hand .future-choice-visual{ height: 100%; }
.vn-frame[data-mode="market"] .preview-market-hand .future-choice-body{ min-height: 0; padding: .3rem; }
.preview-market-empty{ align-self: center; color: var(--ink-faint); font: italic .7rem var(--font-display); }

/* 5 · zone cast: named board + move palette. */
.vn-frame[data-mode="zone"] .choice-dock .future-hand.preview-zone-surface{
  display: block; width: 100%; max-width: 42rem; padding: .35rem;
}
.preview-zone-board{ display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .4rem; margin-bottom: .42rem; }
.preview-zone{
  display: flex; min-height: 4.2rem; flex-direction: column; justify-content: space-between; padding: .45rem .5rem;
  border: 1px dashed var(--line); border-radius: var(--preview-chip-radius); color: var(--ink-faint); background: var(--panel); text-align: left;
}
.preview-zone strong{ color: inherit; font: 700 .62rem var(--font-display); letter-spacing: .09em; text-transform: uppercase; }
.preview-zone span{ font-size: .73rem; }
.preview-zone.is-ready{ border-style: solid; border-color: var(--accent); color: var(--accent); cursor: pointer; background: var(--panel-2); }
.preview-zone.is-filled{ border-style: solid; color: var(--ink); background: color-mix(in srgb,var(--accent) 8%,var(--panel)); }
.preview-zone-choices{ display: flex; flex-wrap: wrap; gap: .3rem; }
.vn-frame[data-mode="zone"] .preview-zone-choices > .future-choice{
  display: inline-grid !important; grid-template-columns: minmax(0,1fr) !important; width: auto; min-height: 3.6rem !important; flex: 1 1 8rem;
  border-radius: var(--preview-chip-radius);
}
.vn-frame[data-mode="zone"] .preview-zone-choices .future-choice-visual{ height: 100%; }
.vn-frame[data-mode="zone"] .preview-zone-choices .future-choice-body{ min-height: 0; padding: .32rem .42rem; }
/* Intent stays visible; full text still on the button for the AT tree via intent + data. */
.vn-frame[data-mode="zone"] .preview-zone-choices .choice-label,
.vn-frame[data-mode="zone"] .preview-zone-choices .future-choice-signals{ display: none; }

@media (max-width: 620px) {
  .vn-frame[data-mode="accordion"] .future-choice,
  .vn-frame[data-mode="ribbon"] .future-choice,
  .vn-frame[data-mode="ribbon-portrait"] .future-choice,
  .vn-frame[data-mode="reveal"] .future-choice,
  .vn-frame[data-mode="gallery"] .future-choice {
    display: grid !important;
  }
  .vn-frame[data-mode="gallery"] .future-choice,
  .vn-frame[data-mode="gallery"] .future-hand[data-count] .future-choice,
  .vn-frame[data-mode="gallery"] .future-hand[data-count] > .future-choice,
  .vn-frame[data-mode="gallery"] .future-choice,
  .vn-frame[data-mode="gallery"] .future-hand[data-count] .future-choice,
  .vn-frame[data-mode="gallery"] .future-hand[data-count] .future-choice.is-mobile-current {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(10rem, 12.5rem) !important;
    min-height: 10rem !important;
    height: 12.5rem !important;
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
  }
  .vn-frame[data-mode="gallery"] .future-choice-visual,
  .vn-frame[data-mode="gallery"] .future-choice-body,
  .vn-frame[data-mode="gallery"] .future-choice-visual,
  .vn-frame[data-mode="gallery"] .future-choice-body {
    grid-area: 1 / 1 !important;
    width: 100% !important;
    height: 100% !important;
  }
  .vn-frame[data-mode="gallery"] .future-choice-image,
  .vn-frame[data-mode="gallery"] .future-choice-portrait,
  .vn-frame[data-mode="gallery"] .future-choice-image,
  .vn-frame[data-mode="gallery"] .future-choice-portrait {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .vn-frame[data-mode="gallery"] .choice-dock .future-hand,
  .vn-frame[data-mode="gallery"] .choice-dock .future-hand {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .4rem !important;
    width: 100% !important;
    margin-inline: 0 !important;
    height: auto !important;
  }
  .vn-frame[data-mode="gallery"] .choice-dock .future-hand[data-count="3"] > .future-choice:nth-child(3),
  .vn-frame[data-mode="gallery"] .choice-dock .future-hand[data-count="3"] > .future-choice:nth-child(3) {
    grid-column: 1 / -1;
  }
  .vn-frame[data-mode="accordion"] .choice-dock .future-hand {
    display: flex !important; flex-direction: row; flex-wrap: nowrap; gap: var(--preview-gap);
    overflow: hidden; width: 100% !important;
  }
  .vn-frame[data-mode="accordion"] .future-hand[data-count] > .future-choice {
    flex: 1 1 12%; width: auto !important; min-width: 0;
    grid-template-columns: minmax(0, 1fr) !important; min-height: 4rem !important;
    opacity: .72; overflow: hidden;
  }
  .vn-frame[data-mode="accordion"] .future-hand:has(.is-drawn) > .future-choice { opacity: .35; }
  .vn-frame[data-mode="accordion"] .future-hand[data-count] > .future-choice.is-drawn,
  .vn-frame[data-mode="accordion"] .future-hand[data-count] > .future-choice:focus-visible {
    flex: 2.6 1 42%; opacity: 1; transform: none; border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
  }
  .vn-frame[data-mode="reveal"] .choice-dock .future-hand {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .vn-frame[data-mode="reveal"] .choice-dock .future-hand[data-count="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vn-frame[data-mode="reveal"] .choice-dock .future-hand[data-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vn-frame[data-mode="reveal"] .choice-dock .future-hand[data-count="1"] {
    grid-template-columns: minmax(0, 1fr);
  }
  .vn-frame[data-mode="ribbon"] .choice-dock .future-hand {
    display: flex !important; flex-direction: row; flex-wrap: nowrap; grid-template-columns: none;
    gap: .3rem; overflow: hidden; width: 100% !important; margin-inline: 0;
    padding: .05rem 0 .2rem;
  }
  .vn-frame[data-mode="ribbon"] .future-hand[data-count] > .future-choice {
    flex: 1 1 10%; width: auto !important; min-width: 0; max-width: none;
    grid-template-columns: minmax(0, 1fr) !important; min-height: 3.15rem !important;
    border-radius: var(--preview-chip-radius); opacity: .72; overflow: hidden;
  }
  .vn-frame[data-mode="ribbon"] .future-hand:has(.is-drawn) > .future-choice { opacity: .42; }
  .vn-frame[data-mode="ribbon"] .future-hand[data-count] > .future-choice:focus-visible,
  .vn-frame[data-mode="ribbon"] .future-hand[data-count] > .future-choice.is-drawn {
    flex: 3.2 1 48%; min-width: 0; border-radius: var(--preview-chip-radius); opacity: 1; border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 32%, transparent);
  }
  .vn-frame[data-mode="ribbon"] .future-choice .future-choice-intent {
    font-size: .62rem; letter-spacing: .04em;
  }
  .vn-frame[data-mode="ribbon"] .future-choice:not(.is-drawn):not(:focus-visible) .choice-label {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: block; -webkit-line-clamp: unset;
  }
  .vn-frame[data-mode="ribbon"] .future-choice.is-drawn .choice-label,
  .vn-frame[data-mode="ribbon"] .future-choice:focus-visible .choice-label {
    white-space: normal; -webkit-line-clamp: 3; display: -webkit-box;
    -webkit-box-orient: vertical; text-overflow: clip;
  }
  /* Portrait ribbon: keep the horizontal deck of compact 3:4 cards on touch. */
  .vn-frame[data-mode="ribbon-portrait"] .choice-dock .future-hand {
    display: flex !important; flex-direction: row; flex-wrap: nowrap;
    gap: .3rem; overflow: hidden; width: 100% !important; margin-inline: 0;
    padding: .05rem 0 .15rem; align-items: stretch; justify-content: center;
  }
  .vn-frame[data-mode="ribbon-portrait"] .future-hand[data-count] > .future-choice {
    flex: 1 1 0; width: auto !important; max-width: 6.8rem;
    min-height: 0 !important; max-height: 9.2rem; height: auto !important;
    aspect-ratio: 3 / 4; opacity: .78; overflow: hidden;
  }
  .vn-frame[data-mode="ribbon-portrait"] .future-hand:has(.is-drawn) > .future-choice { opacity: .48; }
  .vn-frame[data-mode="ribbon-portrait"] .future-hand[data-count] > .future-choice:focus-visible,
  .vn-frame[data-mode="ribbon-portrait"] .future-hand[data-count] > .future-choice.is-drawn {
    flex: 1.35 1 0; max-width: 7.8rem; max-height: 10.5rem;
    aspect-ratio: 3 / 4; opacity: 1; border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 32%, transparent);
  }
  .vn-frame[data-mode="ribbon-portrait"] .future-choice .choice-label {
    white-space: normal; -webkit-line-clamp: 3; display: -webkit-box;
    -webkit-box-orient: vertical; overflow: hidden; text-overflow: clip;
  }
  .vn-frame[data-mode="ribbon-portrait"] .future-choice.is-drawn .choice-label,
  .vn-frame[data-mode="ribbon-portrait"] .future-choice:focus-visible .choice-label {
    -webkit-line-clamp: 4;
  }
  .preview-deck-hand { gap: 0; justify-content: space-around; min-height: 8rem; }
  .vn-frame[data-mode="deck"] .preview-deck-hand > .future-choice {
    width: 6.3rem !important; height: 8rem !important; flex-basis: 6.3rem; margin-inline: -.22rem;
  }
  .preview-combo-slots { gap: .22rem; }
  .preview-combo-plus { display: none; }
  .preview-stack-shell { grid-template-columns: 1fr; }
  .preview-stack-tabs { flex-direction: row; justify-content: center; }
  .preview-stack-cards { min-height: 8.5rem; }
  .vn-frame[data-mode="combo"] .preview-combo-choices > .future-choice { width: auto !important; min-height: 3.4rem !important; }
  .vn-frame[data-mode="zone"] .preview-zone-choices > .future-choice { width: auto !important; min-height: 2.55rem !important; }
  .preview-market-row { display: flex; }
  .preview-retro-shell { grid-template-columns: 1fr; }
  .preview-retro-list { border-right: 0; border-bottom: 1px solid #728072; }
  .preview-retro-inspector { min-height: 7.5rem; }
}