/* Shared page backdrop stays identical in both appearance modes.
   Keep theme variables intact for speech bubbles, cards and controls. */
html {
  background: #030611 !important;
  isolation: isolate;
}
body {
  background: transparent !important;
}
html::before {
  content: "";
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  pointer-events: none;
  background: #030611 url("/assets/ale-galaxy-background.png") center center / cover no-repeat;
}

/* These two scenes use the selected page palette on a solid card. */
:root {
  --ale-scene-bg: #2a2626;
  --ale-scene-ink: #ddc5d0;
}
:root[data-appearance="day"] {
  --ale-scene-bg: #fbe89c;
  --ale-scene-ink: #3c0917;
}
.ale-landing-card,
.eats-loading {
  box-sizing: border-box;
  background: var(--ale-scene-bg);
  color: var(--ale-scene-ink);
  border: 1px solid var(--ale-scene-ink);
  border-radius: 24px;
  padding: clamp(16px, 4vw, 40px);
}
.ale-landing-card > .intro-section > h1,
.ale-landing-card .intro-copy,
.ale-landing-card .earth-copy,
.ale-landing-card .earth-line,
.ale-landing-card .zodiac-choice,
:root .eats-loading h2,
:root .eats-loading p,
:root #loading-message {
  color: var(--ale-scene-ink);
}
.ale-landing-card .earth-button,
.ale-landing-card .zodiac-choice {
  border-color: var(--ale-scene-ink);
}
.ale-landing-card .zodiac-choice input { accent-color: var(--ale-scene-ink); }
.ale-landing-card .earth-button,
.ale-landing-card .parrot { max-width: 100%; }
.eats-loading .eats-stage { width: min(100%, 400px); }

/* The location prompt uses the same day/night palette as the other scenes. */
.location-required-page {
  --card-bg: var(--ale-scene-bg);
  --card-ink: var(--ale-scene-ink);
  background: var(--ale-scene-bg);
  color: var(--ale-scene-ink);
  border-color: var(--ale-scene-ink);
}
:root h1 { color: #ddc5d0; }
:root .location-required-page h1,
:root .location-required-page p,
:root .location-required-page a,
:root .ale-landing-card h1 { color: var(--ale-scene-ink); }
.location-required-page .eats-coordinate-form button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  justify-self: center;
  min-height: 44px;
  padding: .7rem 1.15rem;
  border: 2px solid #3c0917;
  border-radius: 999px;
  background: #fff9df;
  color: #3c0917;
  font-weight: 700;
}
:root .location-required-page > a {
  display: inline-flex;
  align-items: center;
  min-height: auto;
  padding: 1px 6px;
  border: 2px outset var(--ale-scene-ink);
  border-radius: 0;
  background: var(--ale-scene-ink);
  color: var(--ale-scene-bg);
  font-weight: 400;
  text-decoration: none;
}

/* Account navigation and the ownership notice stay pink over the galaxy. */
.eats-account {
  --page-bg: #2a2626;
  --page-ink: #ddc5d0;
  --card-bg: #2a2626;
  --card-ink: #ddc5d0;
}
:root .eats-account,
:root .eats-account [data-account-identity],
:root .eats-account [data-account-status],
:root .eats-account a,
:root .eats-account button,
:root .eats-account h1,
:root .eats-account h2,
:root .eats-account h3,
:root .bottom-appearance,
:root footer.ale-copyright {
  color: #ddc5d0;
}
:root .eats-account .preference-options button[aria-pressed="true"] {
  background: #504049;
  color: #ddc5d0;
  border-color: #ddc5d0;
}

/* Speech stays centered, including descendants with page-specific typography. */
:is(.speech-bubble,.intro-speech,.daily-eats,.rules-bubble,.astrology-reading),
:is(.speech-bubble,.intro-speech,.daily-eats,.rules-bubble,.astrology-reading) * {text-align:center !important;}