/* The Fate page: the reader's header, the style menu, the stage edge to edge, the reading's invitation and the Spin
   button within thumb's reach. Body text never below 1rem. */
body[data-page="fate"] { padding-left: 0; padding-right: 0; -webkit-tap-highlight-color: transparent; }
main.fate { display: flex; flex-direction: column; height: calc(100svh - env(safe-area-inset-top, 0px) - var(--bottom-clear));
  max-width: 720px; padding: 8px 0 0; }
main.fate > .brand, main.fate > .chooser, main.fate > .reading, main.fate > .spin-row {
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
main.fate > .brand { flex: none; }

/* The stage: every pixel the animation's; no visible edge, its ground the page's night. Each style draws in a layer of
   its own, and the outgoing one fades as the next begins. */
.fate .stage { position: relative; flex: 1 1 auto; min-height: 300px; overflow: hidden; touch-action: manipulation; }
.fate .stage .layer { position: absolute; inset: 0; transition: opacity 320ms ease; }
.fate .stage .layer.leaving { opacity: 0; }

.fate .reading { flex: none; padding-top: 4px; min-height: calc(3 * 1.4 * 1.1875rem + 8px); text-align: center; }
.fate .reading p { margin: 0; font: italic 500 1.1875rem/1.4 var(--serif); color: var(--body); opacity: 0; transform: translateY(6px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1); text-wrap: balance; }
.fate .reading p.shown { opacity: 1; transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.fate .spin-row { flex: none; display: flex; justify-content: center; padding-top: 12px; padding-bottom: 20px; }
.fate .spin { min-width: 200px; min-height: 56px; border-radius: 999px; border: 1px solid var(--gold); background: linear-gradient(180deg, #e2c25a, #b8922a);
  color: #1a1306; font: 600 1.125rem/1 var(--sans); letter-spacing: 0.04em; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(212,175,55,0.15), 0 8px 24px rgba(212,175,55,0.18); }
.fate .spin:disabled { opacity: 0.45; cursor: default; box-shadow: none; }
.fate .spin:not(:disabled):active { transform: translateY(1px); }

/* The style menu (src/fate/chooser.js): a brass-framed plaque that unfolds into a night-glass index (the owner,
   2026-10-20: "Please make it look thematically integrated."). */
.chooser { flex: none; position: relative; z-index: 5; padding-bottom: 6px; }
.chooser .plaque { width: 100%; min-height: 48px; display: grid; grid-template-columns: 26px 1fr 22px; align-items: center; gap: 10px;
  padding: 0 14px; border-radius: 12px; cursor: pointer; color: var(--paper); text-align: left;
  background: radial-gradient(120% 140% at 50% -40%, rgba(212,175,55,0.10), transparent 60%), linear-gradient(180deg, #111826, #0a0e16);
  border: 1px solid rgba(199,177,138,0.55);
  box-shadow: inset 0 0 0 3px #0a0e16, inset 0 0 0 4px rgba(212,175,55,0.22), 0 6px 18px rgba(0,0,0,0.35); }
.chooser .plaque .glyph { color: var(--gold); display: grid; place-items: center; }
.chooser .plaque .label { font: 600 1.125rem/1.2 var(--serif); font-variant: all-small-caps; letter-spacing: 0.09em; color: var(--paper);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chooser .plaque .chev { color: var(--brass); display: grid; place-items: center; transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1); }
.chooser.is-open .plaque .chev { transform: rotate(180deg); }
.chooser .plaque:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.chooser .plaque:active { box-shadow: inset 0 0 0 3px #0a0e16, inset 0 0 0 4px rgba(212,175,55,0.45), 0 0 0 1px rgba(212,175,55,0.25), 0 6px 18px rgba(0,0,0,0.35); }
.chooser .index { position: absolute; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); top: calc(100% - 2px);
  border-radius: 14px; padding: 6px 6px 8px;
  background: linear-gradient(180deg, rgba(13,19,30,0.96), rgba(6,9,15,0.97)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(199,177,138,0.5); box-shadow: inset 0 0 0 3px rgba(6,9,15,0.9), inset 0 0 0 4px rgba(212,175,55,0.16), 0 18px 40px rgba(0,0,0,0.6);
  opacity: 0; transform: translateY(-6px) scaleY(0.97); transform-origin: top center;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1); max-height: 64svh; overflow: auto; }
.chooser .index.shown { opacity: 1; transform: none; }
.chooser .crest, .chooser .rule { display: flex; align-items: center; gap: 10px; color: var(--gold); font-size: 0.75rem; }
.chooser .crest { padding: 4px 14px 2px; opacity: 0.85; }
.chooser .crest span, .chooser .rule span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(212,175,55,0.5), transparent); }
.chooser .rule { padding: 2px 22px; opacity: 0.7; list-style: none; }
.chooser ul { list-style: none; margin: 0; padding: 0; outline: none; }
.chooser [role=option] { display: grid; grid-template-columns: 26px 1fr 16px; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px;
  border-radius: 10px; cursor: pointer; color: var(--body); font: 500 1.1875rem/1.25 var(--serif); }
.chooser [role=option] .glyph { color: var(--brass); display: grid; place-items: center; }
.chooser [role=option] .mark { color: var(--gold); opacity: 0; font-size: 0.875rem; transition: opacity 160ms ease; }
.chooser [role=option].active, .chooser [role=option]:active { background: rgba(212,175,55,0.07); }
.chooser [role=option][aria-selected=true] { color: var(--gold); background: linear-gradient(90deg, rgba(212,175,55,0.13), rgba(212,175,55,0.02)); box-shadow: inset 2px 0 0 rgba(212,175,55,0.75); }
.chooser [role=option][aria-selected=true] .glyph { color: var(--gold); }
.chooser [role=option][aria-selected=true] .mark { opacity: 1; }
.chooser [role=option]:first-child .title { font-style: italic; }
@media (prefers-reduced-motion: reduce) {
  .chooser .index, .chooser .plaque .chev, .fate .stage .layer, .fate .reading p { transition: none; }
}