/* Key Choice Event modal — shared layout for every key_choice Event
   (Wonder, and future ones). Icon on top, prompt, stacked choice buttons.
   Palette flows through the styles.css design tokens; reading text >= 1rem
   per CLAUDE.md. See ui/events/KeyChoiceEventModal.js. */

.kc-event {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  text-align: center;
  /* Fill the half-screen sheet body so the choice row's margin-top:auto has
     slack to push it to the floor. flex:1 0 auto = grow to fill, never shrink
     below content. Mirrors .funeral-modal / .battle-modal. */
  flex: 1 0 auto;
}

.kc-event-icon {
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* When the icon carries a rays halo (attachIconRays adds .icon-rays-host), the
   glow radiates ~1rem beyond the 4rem icon. As the FIRST child of the sheet
   body, the icon sits at the body's top clip edge, so the halo's top was shaved
   by the body's overflow (a hard line just under the title). Drop the icon a
   touch so the full halo clears the clip and renders intact, the way the badge
   / NPC ray icons always keep breathing room so the VFX is never cut. Scoped to
   .icon-rays-host so a ray-less key-choice icon isn't pushed down. */
.kc-event-icon.icon-rays-host {
  margin-top: 1.25rem;
}
.kc-event-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.kc-event-text {
  font-size: 1.1rem;
  line-height: 1.45;
  color: var(--font-color-1);
  margin: 0;
}

/* Full-width stacked choices, mirroring the War Result spoils fork
   (.battle-spoils-actions / .battle-spoils-btn). The button LOOK comes from
   the standard .button-primary / .button-secondary classes — kc-event-choice
   only stretches them to full width.

   Bottom-anchored: margin-top:auto drops the row to the sheet floor (thumb
   reach); position:sticky bottom:0 keeps it pinned when the prompt is long
   enough to scroll. No backing box — the opaque button pills carry themselves,
   and any overflowing prose simply scrolls behind them. */
.kc-event-choices {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-self: stretch;
  margin-top: auto;
  position: sticky;
  bottom: 0;
}
.kc-event-choice { width: 100%; }
.kc-event-choice:disabled { opacity: 0.5; cursor: not-allowed; }