/* The phone is the canvas: no site navigation, page footer, or scrolling shell. */
html, body { min-height: 100%; }
body { display: grid; place-items: center; overscroll-behavior: none; background: #090711; }
.app {
  width: 100%;
  height: 100svh;
  min-height: 600px;
  max-width: 430px;
  background:
    radial-gradient(ellipse 72% 41% at 50% 54%, rgba(127, 76, 83, .35), transparent 78%),
    radial-gradient(ellipse 97% 72% at 50% 23%, #3b2037 0%, #201327 49%, #100b18 100%);
}
.app::before { opacity: .13; }
.app::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 4, 12, .25), transparent 25%, transparent 67%, rgba(5, 4, 12, .53));
}
.moon-haze {
  top: 22%;
  width: 460px;
  background: radial-gradient(circle, rgba(166, 114, 107, .58), rgba(91, 47, 71, .29) 40%, transparent 70%);
  filter: blur(52px);
  opacity: .5;
}
.stars { opacity: .5; }
.astral-disc {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 560px;
  aspect-ratio: 1;
  opacity: .39;
  transform: translate(-50%, -50%);
  background: url("/static/astral-disc.svg") center / contain no-repeat;
  animation: astral-turn 80s linear infinite;
  transition: opacity 1.1s ease;
}
.app:not([data-stage="WELCOME"]) .astral-disc { opacity: .2; }

.app-top {
  position: absolute;
  z-index: 8;
  top: calc(env(safe-area-inset-top) + 28px);
  left: 50%;
  display: flex;
  align-items: center;
  gap: 13px;
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
}
.app-top-line { width: 22px; height: 1px; background: linear-gradient(90deg, transparent, rgba(222, 185, 129, .8)); }
.app-top-line:last-child { transform: rotate(180deg); }
.app-title { color: #e2c397; font-size: 10px; font-weight: 600; letter-spacing: .3em; }

.scene { flex: 1; width: 100%; max-width: none; min-height: 0; height: 100%; }
.opening-copy { top: 17%; width: calc(100% - 54px); }
.opening-copy h1 { font-size: clamp(52px, 13vw, 67px); line-height: .96; letter-spacing: -.026em; text-shadow: 0 10px 27px rgba(9, 4, 14, .22); }
.opening-copy h1 em { color: #ebd2ae; }
.opening-copy p { margin-top: 18px; color: #d8c4bb; font-size: 13px; letter-spacing: .055em; }

.reading-table { pointer-events: none; }
.table-halo { top: 56%; width: 100%; height: 40%; background: radial-gradient(ellipse, rgba(212, 167, 110, .16), transparent 68%); }
.app[data-stage="WELCOME"] .table-halo { opacity: 1; }
.deck { width: 128px; height: 203px; border: 0; padding: 0; background: transparent; }
.app[data-stage="WELCOME"] .deck {
  top: 55%;
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-5deg) scale(1.06);
  pointer-events: auto;
  cursor: pointer;
  filter: drop-shadow(0 28px 26px rgba(5, 2, 10, .58)) drop-shadow(0 0 28px rgba(204, 157, 105, .17));
}
.app[data-stage="WELCOME"] .deck .deck-face { animation: deck-breathe 4.5s ease-in-out infinite alternate; }
.app[data-stage="WELCOME"] .deck:hover { transform: translate(-50%, -52%) rotate(-4deg) scale(1.085); }
.app:not([data-stage="WELCOME"]) .deck { pointer-events: none; }
.deck-face { border-color: #281526; background: radial-gradient(circle at 50% 45%, #713c53 0%, #351b34 70%); box-shadow: inset 0 0 0 1px #d5aa77, inset 0 0 0 14px #3b2135, inset 0 0 40px rgba(8, 3, 15, .62); }
.deck-face:before { width: 105px; height: 105px; }
.deck-face:after { width: 72px; height: 72px; }
.deck-sigil { font-size: 54px; text-shadow: 0 0 16px rgba(233, 196, 141, .55); }

.welcome-action { bottom: calc(env(safe-area-inset-bottom) + 7%); width: calc(100% - 48px); }
.primary-button {
  min-height: 65px;
  padding: 0 24px;
  border: 1px solid rgba(255, 228, 184, .8);
  border-radius: 16px;
  background: linear-gradient(142deg, #efd6a8 0%, #cfab75 51%, #b98c58 100%);
  box-shadow: inset 0 1px 0 rgba(255, 247, 224, .7), 0 17px 32px rgba(9, 4, 16, .4), 0 2px 9px rgba(194, 145, 84, .14);
  color: #261522;
  font-size: 11px;
  letter-spacing: .17em;
}
.primary-button span { font-family: Georgia, serif; font-size: 24px; }
.welcome-action p { margin-top: 17px; color: #baa49f; font-size: 9px; letter-spacing: .17em; }

.stage-copy { top: 17%; font-size: 39px; }
.stage-copy small { margin-top: 13px; color: #d3b9aa; font-size: 9px; }
.app[data-stage="DEALING"] .card-slot, .app[data-stage="SELECTING"] .card-slot { top: 57%; }
.app[data-stage="DEALING"] .deck { top: 69%; }
.app[data-stage="SELECTING"] .deck { top: 87%; }
.card-slot { width: 96px; }
.card-back { border-color: #d5ad79; background: radial-gradient(circle, #76415a 0%, #321b35 73%); }
.app[data-stage="SELECTING"] .card-slot.selected { filter: drop-shadow(0 0 20px rgba(234, 187, 121, .54)); }

.app[data-stage="QUESTION"] .card-slot.selected,
.app[data-stage="DECIDING"] .card-slot.selected,
.app[data-stage="REVEALING"] .card-slot.selected,
.app[data-stage="RESULT"] .card-slot.selected { top: 27%; width: 113px; }
.app[data-stage="RESULT"] .card-slot.selected { top: 24%; }
.question-form { top: 55%; width: calc(100% - 48px); }
.question-form label { margin-bottom: 19px; font-size: 34px; }
.question-wrap { overflow: hidden; border: 1px solid rgba(224, 188, 148, .5); border-radius: 16px; background: rgba(18, 12, 27, .53); box-shadow: inset 0 2px 15px rgba(6, 2, 13, .2); }
textarea { height: 102px; padding: 19px 20px 27px; font-size: 15px; }
.decide-button { margin-top: 14px; }
.processing { top: 60%; }
.result { top: 52%; }
.result-prelude { color: #dec193; font-size: 9px; letter-spacing: .29em; }
.result h2 { margin-top: 5px; text-shadow: 0 9px 29px rgba(6, 2, 12, .35); }
.result-cards { margin-top: 12px; font-size: 22px; }
.interpretation { color: #e1d0c8; font-size: 13px; }
.text-button { margin-top: 26px; border-bottom-color: #caa678; color: #ead0aa; }

@keyframes astral-turn { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes deck-breathe { to { transform: translateY(-3px); } }

@media (min-width: 700px) {
  body { min-height: 100svh; background: radial-gradient(circle at 50% 45%, #2b1b31, #080710 70%); }
  .app { height: min(900px, calc(100svh - 36px)); min-height: 690px; border: 1px solid rgba(224, 184, 128, .19); border-radius: 29px; box-shadow: 0 32px 85px rgba(0, 0, 0, .55), 0 0 90px rgba(146, 76, 100, .11); }
  .scene { min-height: 0; }
  .opening-copy { top: 17%; }
  .welcome-action { bottom: 8%; }
  .question-form { top: 55%; }
  .result { top: 52%; }
  .app[data-stage="QUESTION"] .card-slot.selected,
  .app[data-stage="DECIDING"] .card-slot.selected,
  .app[data-stage="REVEALING"] .card-slot.selected,
  .app[data-stage="RESULT"] .card-slot.selected { width: 117px; }
}
@media (max-height: 740px) and (max-width: 699px) {
  .app { min-height: 560px; }
  .opening-copy { top: 14%; }
  .opening-copy h1 { font-size: 49px; }
  .app[data-stage="WELCOME"] .deck { top: 52%; transform: translate(-50%, -50%) rotate(-5deg) scale(.9); }
  .welcome-action { bottom: calc(env(safe-area-inset-bottom) + 4%); }
  .stage-copy { top: 14%; font-size: 34px; }
  .app[data-stage="DEALING"] .card-slot, .app[data-stage="SELECTING"] .card-slot { top: 56%; }
  .app[data-stage="QUESTION"] .card-slot.selected,
  .app[data-stage="DECIDING"] .card-slot.selected,
  .app[data-stage="REVEALING"] .card-slot.selected,
  .app[data-stage="RESULT"] .card-slot.selected { top: 23%; width: 100px; }
  .question-form { top: 48%; }
  .result { top: 47%; }
}
@media (max-height: 620px) and (max-width: 699px) {
  .opening-copy { top: 13%; }
  .opening-copy h1 { font-size: 44px; }
  .opening-copy p { margin-top: 11px; }
  .app[data-stage="WELCOME"] .deck { top: 51%; transform: translate(-50%, -50%) rotate(-5deg) scale(.77); }
  .welcome-action { bottom: calc(env(safe-area-inset-bottom) + 3%); }
  .welcome-action p { margin-top: 10px; }
}
@media (max-width: 350px) {
  .card-slot { width: 84px; }
  .app[data-stage="DEALING"] .spread, .app[data-stage="SELECTING"] .spread { transform: scale(.82); transform-origin: 50% 57%; }
}
@media (prefers-reduced-motion: reduce) {
  .astral-disc, .app[data-stage="WELCOME"] .deck .deck-face { animation: none; }
}