@import url('./ritual-bloom.css');

/* Keep the underlying page from creating a second viewport scrollbar while drawing. */
html:has(#choiceStage.show), html:has(#shuffle.show),
body:not([data-ritual-hidden="true"]):has(#choiceStage.show), body:not([data-ritual-hidden="true"]):has(#shuffle.show) { overflow: hidden !important; }

/* Matching framing lets the final shuffle sweep mask the still-pose handoff. */
#choiceStage, #shuffle.pre-select {
  --portrait-width: min(100vw, calc(100dvh * 2 / 3));
  --portrait-height: min(100dvh, 150vw);
  --source-card-width: 80px;
  --source-card-height: 128px;
  --fan-bottom: max(54px, calc(env(safe-area-inset-bottom) + 44px));
  background: #230d1e !important;
}
#choiceStage .choice-scene,
#shuffle.pre-select .ritual-stage {
  width: 100% !important;
  height: 100dvh !important;
  border-radius: 0 !important;
  background: #230d1e url('../witch-animation-user.png') center / contain no-repeat !important;
}
#shuffle.pre-select .ritual-stage { background-image: url('../witch-flat-palms-v2.png') !important; }
#shuffle.pre-select .ritual-stage::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  background: #230d1e url('../witch-animation-user.png') center / contain no-repeat;
  animation: approvedPoseHandoff 4s cubic-bezier(.3, .7, .2, 1) both;
  pointer-events: none;
}
@keyframes approvedPoseHandoff {
  0%, 75% { clip-path: ellipse(0 0 at 50% 52%); }
  84% { clip-path: ellipse(30% 20% at 50% 52%); }
  97%, 100% { clip-path: ellipse(110% 110% at 50% 52%); }
}
#choiceStage .choice-scene::before,
#choiceStage.chosen .choice-scene::after {
  content: none !important;
  animation: none !important;
}
#shuffle.pre-select .witch,
#shuffle.pre-select .crystal,
#shuffle.pre-select .ritual-star,
#shuffle.pre-select .ritual-orbit {
  display: none !important;
}
/* Resample only existing artwork. Normal compositing permits a real dim trough;
   the shared portrait masks protect both witch poses and unrelated scenery. */
#choiceStage .ritual-art-glow,
#shuffle .ritual-art-glow,
#choiceStage .ritual-crystal-glow,
#shuffle .ritual-crystal-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--portrait-width);
  height: var(--portrait-height);
  transform: translate(-50%, -50%);
  background: url('../witch-animation-user.png') center / 100% 100% no-repeat;
  mask: url('ritual-art-glow-mask.svg') center / 100% 100% no-repeat;
  -webkit-mask: url('ritual-art-glow-mask.svg') center / 100% 100% no-repeat;
  mix-blend-mode: normal;
  filter: brightness(1.25) saturate(.75);
  opacity: .96;
  visibility: hidden;
  animation: none;
  pointer-events: none;
}
#choiceStage .ritual-art-glow { z-index: 1; }
/* Above the pose handoff (2), below the shuffling deck (5). */
#shuffle .ritual-art-glow { z-index: 3; }
#choiceStage .ritual-crystal-glow,
#shuffle .ritual-crystal-glow {
  z-index: 4;
  mask-image: url('ritual-crystal-glow-mask.svg');
  -webkit-mask-image: url('ritual-crystal-glow-mask.svg');
  opacity: .94;
}
#shuffle .ritual-crystal-glow { background-image: url('../witch-flat-palms-v2.png'); }
body:not([data-ritual-hidden="true"]):has(#home.active) #choiceStage.show[data-light-page="home"] .ritual-art-glow,
body:not([data-ritual-hidden="true"]):has(#home.active):has(#choiceStage[data-light-page="home"]) #shuffle.show.pre-select .ritual-art-glow,
body:not([data-ritual-hidden="true"]):has(#free.active) #choiceStage.show[data-light-page="free"] .ritual-art-glow,
body:not([data-ritual-hidden="true"]):has(#free.active):has(#choiceStage[data-light-page="free"]) #shuffle.show.pre-select .ritual-art-glow {
  visibility: visible;
  animation: approvedRitualBreath 1.4s ease-in-out infinite;
}
body:not([data-ritual-hidden="true"]):has(#home.active) #choiceStage.show[data-light-page="home"] .ritual-crystal-glow,
body:not([data-ritual-hidden="true"]):has(#home.active):has(#choiceStage[data-light-page="home"]) #shuffle.show.pre-select .ritual-crystal-glow,
body:not([data-ritual-hidden="true"]):has(#free.active) #choiceStage.show[data-light-page="free"] .ritual-crystal-glow,
body:not([data-ritual-hidden="true"]):has(#free.active):has(#choiceStage[data-light-page="free"]) #shuffle.show.pre-select .ritual-crystal-glow {
  visibility: visible;
  animation: approvedCrystalBreath 1.2s ease-in-out infinite;
}
@keyframes approvedRitualBreath {
  0%, 100% { filter: brightness(.65) saturate(.75); }
  50% { filter: brightness(2.15) saturate(.75); }
}
@keyframes approvedCrystalBreath {
  0%, 100% { filter: brightness(.58) saturate(.8); }
  50% { filter: brightness(2.1) saturate(.8); }
}
/* Independent portrait decorations: the artwork coordinates locate the sphere,
   while active-page gates stop these effects when navigation leaves this draw. */
#choiceStage .crystal-lightning,
#choiceStage .ritual-rising-lights {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--portrait-width);
  height: var(--portrait-height);
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  transition: none;
  pointer-events: none;
}
#choiceStage .crystal-lightning { z-index: 4; overflow: hidden; }
#choiceStage .ritual-rising-lights {
  z-index: 2;
  overflow: hidden;
  /* Protect the prompt and source fan, including short landscape safe areas. */
  clip-path: inset(max(108px, env(safe-area-inset-top)) 0 calc(var(--fan-bottom) + var(--source-card-height) + 48px) 0);
}
#choiceStage .crystal-arc {
  opacity: .32;
  filter: drop-shadow(0 0 2px #a9e5ff80);
  animation: none;
}
#choiceStage .ritual-light {
  fill: #d9f1ff;
  opacity: .35;
  filter: drop-shadow(0 0 2px #c8eaff80);
  animation: none;
}
body:not([data-ritual-hidden="true"]):has(#home.active) #choiceStage.show:not(.chosen)[data-light-page="home"] .crystal-lightning,
body:not([data-ritual-hidden="true"]):has(#free.active) #choiceStage.show:not(.chosen)[data-light-page="free"] .crystal-lightning,
body:not([data-ritual-hidden="true"]):has(#home.active) #choiceStage.show:not(.chosen)[data-light-page="home"] .ritual-rising-lights,
body:not([data-ritual-hidden="true"]):has(#free.active) #choiceStage.show:not(.chosen)[data-light-page="free"] .ritual-rising-lights {
  opacity: 1;
  visibility: visible;
}
body:not([data-ritual-hidden="true"]):has(#home.active) #choiceStage.show.chosen[data-light-page="home"] .crystal-lightning,
body:not([data-ritual-hidden="true"]):has(#free.active) #choiceStage.show.chosen[data-light-page="free"] .crystal-lightning,
body:not([data-ritual-hidden="true"]):has(#home.active) #choiceStage.show.chosen[data-light-page="home"] .ritual-rising-lights,
body:not([data-ritual-hidden="true"]):has(#free.active) #choiceStage.show.chosen[data-light-page="free"] .ritual-rising-lights {
  transition: opacity 250ms ease-out, visibility 0s 250ms;
}
body:not([data-ritual-hidden="true"]):has(#home.active) #choiceStage.show[data-light-page="home"] .crystal-arc,
body:not([data-ritual-hidden="true"]):has(#free.active) #choiceStage.show[data-light-page="free"] .crystal-arc {
  animation: approvedCrystalArc 1.2s ease-in-out infinite;
  animation-delay: var(--arc-delay);
}
body:not([data-ritual-hidden="true"]):has(#home.active) #choiceStage.show[data-light-page="home"] .ritual-light,
body:not([data-ritual-hidden="true"]):has(#free.active) #choiceStage.show[data-light-page="free"] .ritual-light {
  animation: approvedLightRise var(--rise-duration) linear infinite;
  animation-delay: var(--rise-delay);
}
body:not([data-ritual-hidden="true"]):has(#home.active) #choiceStage.show.chosen[data-light-page="home"] .crystal-arc,
body:not([data-ritual-hidden="true"]):has(#free.active) #choiceStage.show.chosen[data-light-page="free"] .crystal-arc,
body:not([data-ritual-hidden="true"]):has(#home.active) #choiceStage.show.chosen[data-light-page="home"] .ritual-light,
body:not([data-ritual-hidden="true"]):has(#free.active) #choiceStage.show.chosen[data-light-page="free"] .ritual-light { animation-play-state: paused; }
@keyframes approvedCrystalArc {
  0%, 100% { opacity: .04; }
  45%, 55% { opacity: .52; }
}
@keyframes approvedLightRise {
  0% { opacity: 0; transform: translate(0, 0); }
  18%, 72% { opacity: .5; }
  100% { opacity: 0; transform: translate(12px, -580px); }
}
@media (max-width: 700px) {
  #choiceStage .ritual-light:nth-child(n+15) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #choiceStage .crystal-lightning,
  #choiceStage .ritual-rising-lights { display: none; transition: none !important; }
  #choiceStage .crystal-arc,
  #choiceStage .ritual-light { animation: none !important; }
}
/* Whole-shell white-core streams with a faint pink trail, never round dots. */
#choiceStage .crystal-pink-radiance,
#shuffle .crystal-pink-radiance {
  position: absolute;
  z-index: 4;
  top: 50%; left: 50%;
  width: var(--portrait-width); height: var(--portrait-height);
  transform: translate(-50%, -50%);
  overflow: hidden;
  opacity: 0; visibility: hidden; transition: none;
  pointer-events: none;
  clip-path: inset(max(0px, calc(max(108px, env(safe-area-inset-top)) - (100dvh - var(--portrait-height)) / 2)) 0 0 0);
}
#choiceStage .crystal-energy-filament, #shuffle .crystal-energy-filament,
#choiceStage .crystal-energy-trail, #shuffle .crystal-energy-trail,
#choiceStage .crystal-energy-sheet, #shuffle .crystal-energy-sheet,
#choiceStage .crystal-energy-halo, #shuffle .crystal-energy-halo { animation: none; }
#choiceStage .crystal-energy-sheet, #shuffle .crystal-energy-sheet { transform-box: view-box; }
#choiceStage .crystal-gas-envelope, #shuffle .crystal-gas-envelope {
  animation: none;
  transform-box: view-box;
}
body:not([data-ritual-hidden="true"]):has(#home.active) #choiceStage.show[data-light-page="home"] .crystal-pink-radiance,
body:not([data-ritual-hidden="true"]):has(#home.active):has(#choiceStage[data-light-page="home"]) #shuffle.show.pre-select .crystal-pink-radiance,
body:not([data-ritual-hidden="true"]):has(#free.active) #choiceStage.show[data-light-page="free"] .crystal-pink-radiance,
body:not([data-ritual-hidden="true"]):has(#free.active):has(#choiceStage[data-light-page="free"]) #shuffle.show.pre-select .crystal-pink-radiance {
  opacity: 1; visibility: visible;
}
body:not([data-ritual-hidden="true"]):has(#home.active) #choiceStage.show[data-light-page="home"] .crystal-energy-filament,
body:not([data-ritual-hidden="true"]):has(#home.active):has(#choiceStage[data-light-page="home"]) #shuffle.show.pre-select .crystal-energy-filament,
body:not([data-ritual-hidden="true"]):has(#free.active) #choiceStage.show[data-light-page="free"] .crystal-energy-filament,
body:not([data-ritual-hidden="true"]):has(#free.active):has(#choiceStage[data-light-page="free"]) #shuffle.show.pre-select .crystal-energy-filament {
  animation: approvedEnergyStream var(--energy-duration) linear infinite;
  animation-delay: var(--energy-phase);
}
body:not([data-ritual-hidden="true"]):has(#home.active) #choiceStage.show[data-light-page="home"] .crystal-energy-trail,
body:not([data-ritual-hidden="true"]):has(#home.active):has(#choiceStage[data-light-page="home"]) #shuffle.show.pre-select .crystal-energy-trail,
body:not([data-ritual-hidden="true"]):has(#free.active) #choiceStage.show[data-light-page="free"] .crystal-energy-trail,
body:not([data-ritual-hidden="true"]):has(#free.active):has(#choiceStage[data-light-page="free"]) #shuffle.show.pre-select .crystal-energy-trail {
  animation: approvedEnergyStream var(--energy-duration) linear infinite;
  animation-delay: var(--energy-phase);
}
body:not([data-ritual-hidden="true"]):has(#home.active) #choiceStage.show[data-light-page="home"] .crystal-energy-sheet,
body:not([data-ritual-hidden="true"]):has(#home.active):has(#choiceStage[data-light-page="home"]) #shuffle.show.pre-select .crystal-energy-sheet,
body:not([data-ritual-hidden="true"]):has(#free.active) #choiceStage.show[data-light-page="free"] .crystal-energy-sheet,
body:not([data-ritual-hidden="true"]):has(#free.active):has(#choiceStage[data-light-page="free"]) #shuffle.show.pre-select .crystal-energy-sheet {
  animation: approvedEnergySheet var(--sheet-duration) ease-in-out infinite;
  animation-delay: var(--sheet-phase);
}
body:not([data-ritual-hidden="true"]):has(#home.active) #choiceStage.show[data-light-page="home"] .crystal-energy-halo,
body:not([data-ritual-hidden="true"]):has(#home.active):has(#choiceStage[data-light-page="home"]) #shuffle.show.pre-select .crystal-energy-halo,
body:not([data-ritual-hidden="true"]):has(#free.active) #choiceStage.show[data-light-page="free"] .crystal-energy-halo,
body:not([data-ritual-hidden="true"]):has(#free.active):has(#choiceStage[data-light-page="free"]) #shuffle.show.pre-select .crystal-energy-halo {
  animation: approvedEnergyHalo 1.2s ease-in-out infinite;
}
@keyframes approvedEnergyStream {
  from { stroke-dashoffset: 1000; }
  to { stroke-dashoffset: 0; }
}
@keyframes approvedEnergyHalo {
  0%, 100% { opacity: .26; }
  50% { opacity: .7; }
}
@keyframes approvedEnergySheet {
  0% { opacity: 0; d: var(--flame-low); transform: skewX(0deg) scale(.94, .90); }
  24% { opacity: calc(var(--sheet-opacity) * .8); d: var(--flame-left); transform: skewX(-4deg) scale(.98, .82); }
  51% { opacity: var(--sheet-opacity); d: var(--flame-high); transform: skewX(4deg) scale(1.06, 1.05); }
  76% { opacity: calc(var(--sheet-opacity) * .8); d: var(--flame-right); transform: skewX(-3deg) scale(.96, .87); }
  100% { opacity: 0; d: var(--flame-low); transform: skewX(0deg) scale(.94, .90); }
}
body:not([data-ritual-hidden="true"]):has(#home.active) #choiceStage.show[data-light-page="home"] .crystal-gas-envelope,
body:not([data-ritual-hidden="true"]):has(#home.active):has(#choiceStage[data-light-page="home"]) #shuffle.show.pre-select .crystal-gas-envelope,
body:not([data-ritual-hidden="true"]):has(#free.active) #choiceStage.show[data-light-page="free"] .crystal-gas-envelope,
body:not([data-ritual-hidden="true"]):has(#free.active):has(#choiceStage[data-light-page="free"]) #shuffle.show.pre-select .crystal-gas-envelope {
  animation: approvedGasEnvelope var(--envelope-duration) ease-in-out infinite;
  animation-delay: var(--envelope-phase);
}
/* Opacity stays full: both the steady floor and hot folds follow this moving
   air contour. Horizontal scale keeps a native fallback without moving the
   fixed neck, emitting sphere, or the sharp skin subtractions. */
@keyframes approvedGasEnvelope {
  0% { opacity: 1; d: var(--envelope-rest); transform: scale(1, 1); }
  23% { opacity: 1; d: var(--envelope-wide); transform: scale(1.025, 1); }
  49% { opacity: 1; d: var(--envelope-long); transform: scale(1.01, 1); }
  76% { opacity: 1; d: var(--envelope-curl); transform: scale(1.035, 1); }
  100% { opacity: 1; d: var(--envelope-rest); transform: scale(1, 1); }
}
@media (prefers-reduced-motion: reduce) {
  #choiceStage .crystal-gas-envelope, #shuffle .crystal-gas-envelope { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  #choiceStage .crystal-pink-radiance, #shuffle .crystal-pink-radiance { display: none; transition: none !important; }
  #choiceStage .crystal-energy-filament, #shuffle .crystal-energy-filament,
  #choiceStage .crystal-energy-trail, #shuffle .crystal-energy-trail,
  #choiceStage .crystal-energy-sheet, #shuffle .crystal-energy-sheet,
  #choiceStage .crystal-energy-halo, #shuffle .crystal-energy-halo { animation: none !important; }
}
/* The legacy shapes belong only to the existing two-second finale. */
#choiceStage:not(.chosen) .choice-hex,
#choiceStage:not(.chosen) .choice-orbit,
#choiceStage:not(.chosen) .choice-crystal { opacity: 0 !important; }
#shuffle.pre-select .deck {
  --shuffle-card-width: clamp(36px, calc(var(--portrait-width) * .105), 76px);
  --shuffle-split: calc(var(--portrait-width) * .15);
  --shuffle-origin-y: calc(50% - var(--portrait-height) * .018);
  --shuffle-end-y: calc(100% - var(--fan-bottom) - var(--source-card-height) * .5 - 24px);
  /* Triple only the flourish excursion; leave palm contact and the fan fixed.
     Rotated-card clearance caps the extra travel on short screens. */
  --shuffle-rise-limit: calc(50dvh - var(--portrait-height) * .018 - var(--shuffle-card-width) * .9 - 16px);
  --shuffle-fall-limit: calc(50dvh + var(--portrait-height) * .018 - var(--shuffle-card-width) * 2.2 - 16px);
  display: block;
  position: absolute;
  z-index: 5;
  inset: 0 !important;
  width: 100%;
  height: 100%;
  transform: none !important;
  pointer-events: none;
}
#shuffle.pre-select .deck i {
  position: absolute;
  top: var(--shuffle-origin-y);
  left: 50%;
  z-index: var(--shuffle-order);
  width: var(--shuffle-card-width);
  height: calc(var(--shuffle-card-width) * 1.6);
  margin: 0;
  border-radius: 7px;
  box-shadow: 0 6px 16px #17041280;
  border: 2px solid #fff5fa;
  box-sizing: border-box;
  background: #32192a url('../card-back.png') center / cover;
  transform-origin: 50% 100%;
  animation: approvedDeckShuffleLeft 4s cubic-bezier(.34, .04, .22, 1) both;
}
#shuffle.pre-select .deck i:nth-child(even) {
  animation-name: approvedDeckShuffleRight;
}
#shuffle.pre-select #shuffleStatus {
  right: 12px;
  bottom: max(18px, calc(50% - var(--portrait-height) * .39));
  left: 12px;
  margin: 0;
  color: #fff7fc;
  font-size: clamp(1rem, 3.8vw, 1.35rem);
  text-align: center;
  text-shadow: 0 2px 8px #240619;
}
@keyframes approvedDeckShuffleLeft {
  0%, 8% { transform: translate(calc(-50% - var(--shuffle-split) + var(--shuffle-layer) * 1px), calc(-100% - var(--shuffle-layer) * 1px)) rotate(-8deg) scaleY(.32); }
  20% { transform: translate(calc(-50% - var(--shuffle-split)), calc(-50% - min(calc(var(--shuffle-card-width) * 4.2 + var(--shuffle-layer) * 6px), var(--shuffle-rise-limit)))) rotate(-24deg); }
  32% { transform: translate(calc(-50% + var(--shuffle-split) * .8), calc(-50% - min(calc(var(--shuffle-card-width) * 1.5 + var(--shuffle-layer) * 9px), var(--shuffle-rise-limit)))) rotate(calc(25deg + var(--shuffle-layer) * 5deg)); }
  47% { transform: translate(calc(-50% - var(--shuffle-split) * .8), calc(-50% + clamp(calc(var(--shuffle-rise-limit) * -1), calc(var(--shuffle-card-width) * -5.1 + var(--shuffle-layer) * 15px), var(--shuffle-fall-limit)))) rotate(calc(-45deg - var(--shuffle-layer) * 8deg)); }
  62% { transform: translate(calc(-50% + var(--shuffle-split) * .3), calc(-50% - min(calc(var(--shuffle-card-width) * .9 + var(--shuffle-layer) * 12px), var(--shuffle-rise-limit)))) rotate(calc(20deg + var(--shuffle-layer) * 3deg)); }
  75% { width: var(--shuffle-card-width); height: calc(var(--shuffle-card-width) * 1.6); opacity: 1; top: var(--shuffle-origin-y); transform: translate(calc(-50% + var(--shuffle-layer) * .7px), calc(-50% - var(--shuffle-layer) * .6px)) rotate(0deg); }
  87% { opacity: var(--shuffle-fan-opacity); transform: translate(calc(-50% + var(--shuffle-fan-x) * .45), -50%) rotate(calc(var(--shuffle-fan-angle) * .6)) scale(1.18); }
  100% { top: var(--shuffle-end-y); width: var(--source-card-width); height: var(--source-card-height); opacity: var(--shuffle-fan-opacity); transform: translate(calc(-50% + var(--shuffle-fan-x)), calc(-50% + var(--shuffle-fan-y))) rotate(var(--shuffle-fan-angle)); }
}
@keyframes approvedDeckShuffleRight {
  0%, 8% { transform: translate(calc(-50% + var(--shuffle-split) - var(--shuffle-layer) * 1px), calc(-100% - var(--shuffle-layer) * 1px)) rotate(8deg) scaleY(.32); }
  20% { transform: translate(calc(-50% + var(--shuffle-split)), calc(-50% + clamp(calc(var(--shuffle-rise-limit) * -1), calc(var(--shuffle-card-width) * .6 - var(--shuffle-layer) * 6px), var(--shuffle-fall-limit)))) rotate(20deg); }
  32% { transform: translate(calc(-50% - var(--shuffle-split) * .8), calc(-50% - min(calc(var(--shuffle-card-width) * 3.6 + var(--shuffle-layer) * 9px), var(--shuffle-rise-limit)))) rotate(calc(-25deg - var(--shuffle-layer) * 5deg)); }
  47% { transform: translate(calc(-50% + var(--shuffle-split) * .8), calc(-50% + clamp(calc(var(--shuffle-rise-limit) * -1), calc(var(--shuffle-card-width) * -2.4 + var(--shuffle-layer) * 15px), var(--shuffle-fall-limit)))) rotate(calc(45deg + var(--shuffle-layer) * 8deg)); }
  62% { transform: translate(calc(-50% - var(--shuffle-split) * .3), calc(-50% - min(calc(var(--shuffle-card-width) * 1.8 + var(--shuffle-layer) * 12px), var(--shuffle-rise-limit)))) rotate(calc(-20deg - var(--shuffle-layer) * 3deg)); }
  75% { width: var(--shuffle-card-width); height: calc(var(--shuffle-card-width) * 1.6); opacity: 1; top: var(--shuffle-origin-y); transform: translate(calc(-50% - var(--shuffle-layer) * .7px), calc(-50% - var(--shuffle-layer) * .6px)) rotate(0deg); }
  87% { opacity: var(--shuffle-fan-opacity); transform: translate(calc(-50% + var(--shuffle-fan-x) * .45), -50%) rotate(calc(var(--shuffle-fan-angle) * .6)) scale(1.18); }
  100% { top: var(--shuffle-end-y); width: var(--source-card-width); height: var(--source-card-height); opacity: var(--shuffle-fan-opacity); transform: translate(calc(-50% + var(--shuffle-fan-x)), calc(-50% + var(--shuffle-fan-y))) rotate(var(--shuffle-fan-angle)); }
}

#choiceStage .card-fan {
  position: absolute;
  z-index: auto;
  inset: 0 !important;
  width: 100%;
  height: 100% !important;
  transform: none;
  display: block;
  pointer-events: none;
  --orbit-radius-x: calc(var(--portrait-width) * .42);
  --orbit-radius-y: calc(var(--portrait-height) * .065);
}
#choiceStage .orbit-card-ring { position: absolute; inset: 0; pointer-events: none; }
#choiceStage .orbit-witch-foreground {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: var(--portrait-width);
  height: var(--portrait-height);
  transform: translate(-50%, -50%);
  background: url('../witch-animation-user.png') center / contain no-repeat;
  /* Trace the crystal-pose silhouette; the matching still prevents ghost palms. */
  clip-path: polygon(52% 16.5%, 58% 18%, 60% 20%, 56% 20%, 60% 24%, 66% 25%, 71% 27%, 76% 27%, 76% 30%, 71% 33%, 64% 36%, 65% 40%, 68% 43%, 71% 47%, 75% 52%, 78% 61%, 83% 70%, 94% 80%, 100% 82%, 100% 100%, 0 100%, 0 82%, 8% 79%, 17% 69%, 22% 61%, 25% 54%, 29% 47%, 33% 43%, 35% 40%, 37% 37%, 30% 38%, 25% 36%, 26% 34%, 35% 31%, 43% 28%, 45% 24%, 48% 20%);
  pointer-events: none;
}
#choiceStage .selected-orbit-card {
  position: absolute;
  top: calc(50% + var(--portrait-height) * .11);
  left: 50%;
  width: clamp(44px, calc(var(--portrait-width) * .1), 56px);
  height: clamp(70.4px, calc(var(--portrait-width) * .16), 89.6px);
  border: 2px solid #fff5fc;
  border-radius: 7px;
  box-sizing: border-box;
  transform: translate(-50%, -50%) translate(calc(var(--orbit-x) * var(--orbit-radius-x)), calc(var(--orbit-y) * var(--orbit-radius-y))) scale(var(--orbit-scale));
  filter: brightness(var(--orbit-brightness));
  pointer-events: none;
}
#choiceStage .selected-orbit-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url('../card-back.png') center / cover;
  box-shadow: 0 0 9px #fff7, 0 0 18px #ffc4e28a;
  animation: approvedSelectedPulse 1.6s ease-in-out infinite;
}
#choiceStage .selected-orbit-card.is-flying {
  animation: approvedSelectedFlight .7s cubic-bezier(.22, .68, .3, 1) both;
}
@keyframes approvedSelectedFlight {
  from { transform: translate(-50%, -50%) translate(var(--flight-x), var(--flight-y)) scale(1); }
  to { transform: translate(-50%, -50%) translate(calc(var(--orbit-x) * var(--orbit-radius-x)), calc(var(--orbit-y) * var(--orbit-radius-y))) scale(var(--orbit-scale)); }
}
@keyframes approvedSelectedPulse {
  0%, 100% { opacity: .76; filter: brightness(.92); box-shadow: 0 0 8px #fff6, 0 0 16px #ffc4e273; }
  50% { opacity: 1; filter: brightness(1.12); box-shadow: 0 0 13px #fffc, 0 0 24px #ffd4ecad; }
}
#choiceStage .orbit-paused .selected-orbit-card::before { animation-play-state: paused; }
#choiceStage.finishing .selected-orbit-card { animation: approvedOrbitFinish 5s linear forwards; }
#choiceStage.finishing .selected-orbit-card.is-flying {
  animation: approvedSelectedFlight .7s cubic-bezier(.22, .68, .3, 1) both, approvedOrbitFinish 5s linear forwards;
}
@keyframes approvedOrbitFinish {
  0%, 80% { opacity: 1; }
  100% { opacity: 0; }
}

#choiceStage .selection-card-row {
  position: absolute;
  z-index: 9;
  bottom: var(--fan-bottom);
  left: 50%;
  width: var(--fan-width);
  height: calc(var(--source-card-height) + 24px);
  transform: translateX(-50%);
  display: block;
  padding: 0;
  overflow: visible;
  touch-action: pan-y;
  pointer-events: auto;
}
#choiceStage .selection-card-row > .fan-card {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--source-card-width) !important;
  height: var(--source-card-height) !important;
  box-sizing: border-box;
  padding: 0;
  border: 2px solid #fff5fa;
  border-radius: 7px;
  background: #32192a;
  opacity: 1 !important;
  transform: translateX(-50%) translate(var(--fan-x), var(--fan-y)) rotate(var(--fan-angle)) !important;
  transform-origin: 50% 100%;
  filter: none !important;
  animation: none !important;
  transition: none;
  box-shadow: 0 5px 12px #1d071baa !important;
  pointer-events: auto;
  cursor: pointer;
}
#choiceStage .selection-card-row > .fan-card[hidden] { display: none !important; }
#choiceStage .selection-card-row > .fan-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 5px;
  background: url('../card-back.png') center / cover;
  opacity: 1;
}
#choiceStage .selection-card-row > .fan-card.selected::before { opacity: .2; }
#choiceStage .selection-card-row > .fan-card.selected::after { content: none; animation: none; }
#choiceStage .selection-card-row > .fan-card:disabled { cursor: default; }
#choiceStage .fan-card:focus-visible,
#choiceStage button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
#choiceStage .selection-order-badge {
  position: absolute;
  z-index: 1;
  inset: 30px auto auto 6px;
  transform: rotate(calc(var(--fan-angle) * -1));
  min-width: 28px;
  height: 28px;
  padding: 0 3px;
  background: #fff7fc;
  color: #76264f;
  font-size: 20px;
  opacity: 1;
  text-shadow: none;
  box-shadow: 0 2px 8px #17041273;
}
#choiceStage .orbit-controls {
  position: absolute;
  z-index: 10;
  top: auto;
  right: max(12px, calc(50% - var(--portrait-width) / 2 + 12px));
  bottom: max(222px, calc(env(safe-area-inset-bottom) + 212px));
  left: auto;
  transform: none;
  display: flex;
  pointer-events: auto;
}
#choiceStage .selection-row-controls {
  position: absolute;
  z-index: 10;
  right: max(8px, calc(50% - var(--fan-width) / 2 - 46px));
  bottom: max(10px, env(safe-area-inset-bottom));
  left: max(8px, calc(50% - var(--fan-width) / 2 - 46px));
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
#choiceStage .orbit-controls button,
#choiceStage .selection-row-controls button {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #fff9;
  border-radius: 999px;
  background: #3c183de6;
  color: #fff;
  font: inherit;
  pointer-events: auto;
}
#choiceStage .choice-title {
  z-index: 11;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  width: min(90vw, 600px);
  box-sizing: border-box;
  padding: 10px 16px;
  background: #fff5fce8 !important;
  color: #6d3157 !important;
}
#choiceStage #currentSelectionPrompt {
  margin: 6px 0 0;
  font-size: clamp(.82rem, 2.5vw, 1rem);
  font-weight: 700;
  line-height: 1.45;
}
#choiceStage .selection-prompts {
  z-index: 11;
  top: 138px;
  right: 16px;
  bottom: auto;
  left: auto;
  transform: none;
  width: min(340px, calc((100vw - var(--portrait-width)) / 2 - 32px));
  max-height: calc(100dvh - 280px);
  box-sizing: border-box;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: #fff0f8;
  text-shadow: 0 2px 5px #170412, 0 0 9px #230d1e;
  overflow-y: auto;
  overscroll-behavior: contain;
  text-align: left;
  scrollbar-color: #c17a9e #34152e;
}
#choiceStage .selection-prompts b,
#choiceStage .selection-prompts strong,
#choiceStage .selection-prompts small { color: #ffe1f0; }
#choiceStage .has-detailed-prompts ol { display: block; }
#choiceStage .has-detailed-prompts li { padding: 8px 6px; margin: 0; font-size: .875rem; }
#choiceStage .has-detailed-prompts li strong,
#choiceStage .has-detailed-prompts li span { display: block; }
#choiceStage .has-detailed-prompts li[aria-current="step"] { border-radius: 0; background: none; color: #fff; }
#choiceStage .has-detailed-prompts li[aria-current="step"] strong { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
#choiceStage .selection-reason b { display: inline; font-size: inherit; }
#choiceStage .choice-hint { display: none; }

/* Keep the established two-second crystal and star finale concurrent with flight. */
#choiceStage .choice-crystal {
  position: absolute;
  z-index: 6;
  left: 50% !important;
  top: calc(50% + var(--portrait-height) * .06) !important;
  width: clamp(70px, calc(var(--portrait-width) * .19), 142px) !important;
  height: clamp(70px, calc(var(--portrait-width) * .19), 142px) !important;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 10%, #fffdf5 18%, #fff7d5aa 41%, transparent 73%) !important;
  transform: translate(-50%, -50%);
  opacity: .35;
  filter: drop-shadow(0 0 10px #fff) !important;
  animation: none !important;
  pointer-events: none;
}
#choiceStage .choice-hex,
#choiceStage .choice-orbit {
  position: absolute;
  z-index: 1;
  left: 50% !important;
  top: calc(50% - var(--portrait-height) * .18) !important;
  transform: translate(-50%, -50%);
  border: 2px solid #fff !important;
  opacity: .2;
  filter: drop-shadow(0 0 10px #fff) !important;
  animation: none;
  pointer-events: none;
}
#choiceStage .choice-hex {
  width: calc(var(--portrait-width) * .9) !important;
  height: calc(var(--portrait-width) * .9) !important;
  border-radius: 0 !important;
  clip-path: polygon(50% 0, 100% 75%, 0 75%, 50% 0, 100% 25%, 0 25%);
}
#choiceStage .choice-orbit { border-radius: 50%; }
#choiceStage .choice-orbit.outer { width: var(--portrait-width); height: var(--portrait-width); }
#choiceStage .choice-orbit.inner { width: calc(var(--portrait-width) * .72); height: calc(var(--portrait-width) * .72); }
#choiceStage.chosen .choice-crystal { animation: approvedWhiteCrystalBurst 2s ease-out forwards !important; }
#choiceStage.chosen .choice-hex,
#choiceStage.chosen .choice-orbit { animation: approvedStarFlight 2s cubic-bezier(.24, .73, .21, 1) forwards !important; }
@keyframes approvedWhiteCrystalBurst {
  0% { opacity: 1; }
  52% { opacity: 1; transform: translate(-50%, -50%) scale(1.8); filter: drop-shadow(0 0 35px #fff) drop-shadow(0 0 104px #fff); }
  90% { opacity: 1; }
  100% { opacity: .35; transform: translate(-50%, -50%) scale(7); }
}
@keyframes approvedStarFlight {
  0% { opacity: .8; transform: translate(-50%, -50%) scale(1); }
  30% { opacity: 1; transform: translate(-50%, -50%) scale(.28); }
  67% { opacity: 1; transform: translate(-50%, -50%) scale(1.55); filter: drop-shadow(0 0 32px #fff) drop-shadow(0 0 96px #fff); }
  90% { opacity: 1; }
  100% { opacity: .35; transform: translate(-50%, -50%) scale(3.5); filter: drop-shadow(0 0 55px #fff) drop-shadow(0 0 180px #fff); }
}
/* When side gutters cannot hold readable text, full prompts continue below
   the unchanged viewport-sized drawing canvas. The stage owns that scroll. */
@media (max-aspect-ratio: 4/3) {
  #choiceStage { overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: none; }
  #choiceStage::-webkit-scrollbar { display: none; width: 0; height: 0; }
  #choiceStage .choice-title { position: fixed; z-index: 12; }
  #choiceStage.show { align-items: start; }
  #choiceStage .choice-scene { overflow: visible; }
  #choiceStage .selection-prompts {
    top: 100dvh;
    right: auto;
    left: 0;
    width: 100%;
    max-height: none;
    padding: 24px max(20px, calc((100vw - 620px) / 2)) 32px;
    overflow: visible;
    background: #230d1e !important;
  }
  #choiceStage .selection-prompts > b { font-size: 1rem; }
  #choiceStage .selection-prompts ol { display: block; margin: 12px 0; }
  #choiceStage .selection-prompts li { font-size: .9rem; line-height: 1.65; }
}
@media (max-width: 700px) {
  #choiceStage .choice-title { width: calc(100vw - 24px); font-size: .85rem; }
}
@media (max-height: 480px) {
  #choiceStage, #shuffle.pre-select { --source-card-width: 64px; --source-card-height: 102.4px; --fan-bottom: calc(16px + env(safe-area-inset-bottom)); }
  #choiceStage .choice-title { width: min(var(--portrait-width), 560px); padding: 6px 12px; font-size: .8rem; }
  #choiceStage #currentSelectionPrompt { margin-top: 3px; font-size: .75rem; }
  #choiceStage .selection-prompts { top: 10px; max-height: calc(100dvh - var(--source-card-height) - var(--fan-bottom) - 42px); font-size: .75rem; }
  #choiceStage .selection-row-controls { bottom: 4px; }
  #choiceStage .orbit-controls { bottom: 188px; }
}
@media (max-height: 480px) and (max-aspect-ratio: 4/3) {
  #choiceStage .selection-prompts { top: 100dvh; max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
  #choiceStage .ritual-art-glow,
  #choiceStage .ritual-crystal-glow,
  #shuffle.pre-select .ritual-art-glow,
  #shuffle.pre-select .ritual-crystal-glow,
  #shuffle.pre-select .deck i,
  #shuffle.pre-select .ritual-stage::after,
  #choiceStage .selected-orbit-card,
  #choiceStage.finishing .selected-orbit-card,
  #choiceStage .selected-orbit-card::before,
  #choiceStage .choice-crystal,
  #choiceStage.chosen .choice-crystal,
  #choiceStage .choice-hex,
  #choiceStage.chosen .choice-hex,
  #choiceStage .choice-orbit,
  #choiceStage.chosen .choice-orbit {
    animation: none !important;
    transition: none !important;
  }
  #shuffle.pre-select .deck i { transform: translate(calc(-50% + var(--shuffle-layer) * .7px), calc(-50% - var(--shuffle-layer) * .6px)); }
  #shuffle.pre-select .ritual-stage::after { content: none; }
  #choiceStage .choice-crystal,
  #choiceStage .choice-hex,
  #choiceStage .choice-orbit { opacity: .35 !important; filter: none !important; }
  #choiceStage .ritual-art-glow,
  #choiceStage .ritual-crystal-glow,
  #shuffle.pre-select .ritual-art-glow,
  #shuffle.pre-select .ritual-crystal-glow { opacity: .66; filter: brightness(1.25) saturate(.75); }
}