/* Celestial Lexi modular backdrop
   Each motif is a small reusable piece; CSS owns its paint and placement. */
body.lexi-backdrop {
  --lx-canvas-top: #f8fcff;
  --lx-canvas-middle: #edf7ff;
  --lx-canvas-bottom: #fff4f8;
  --lx-glow-a: rgba(91, 187, 228, 0.3);
  --lx-glow-b: rgba(244, 158, 202, 0.24);
  --lx-glow-c: rgba(164, 144, 225, 0.17);
  --lx-line: rgba(72, 133, 188, 0.28);
  --lx-line-soft: rgba(116, 151, 199, 0.18);
  --lx-glass: rgba(255, 255, 255, 0.34);
  --lx-moon: #78bde6;
  --lx-petal: #ee9fc1;
  --lx-sakura: #dfa0c4;
  --lx-gold: #c79d4b;
  --lx-celestial: #6e79bd;
  --lx-header: rgba(249, 253, 255, 0.84);
  --lx-shadow: rgba(61, 105, 151, 0.12);
  --lx-detail-opacity: 0.58;
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  overflow-x: clip;
  background:
    radial-gradient(circle at -7% 12%, var(--lx-glow-a) 0 8%, transparent 31%),
    radial-gradient(circle at 106% 26%, var(--lx-glow-b) 0 7%, transparent 29%),
    radial-gradient(ellipse at 80% 102%, var(--lx-glow-c) 0 8%, transparent 36%),
    linear-gradient(155deg, var(--lx-canvas-top) 0%, var(--lx-canvas-middle) 48%, var(--lx-canvas-bottom) 100%);
  background-attachment: scroll;
}

body.lexi-backdrop[data-style="lavender-tea"] {
  --lx-canvas-top: #fbf8ff;
  --lx-canvas-middle: #eee6fa;
  --lx-canvas-bottom: #fff8f3;
  --lx-glow-a: rgba(181, 163, 223, 0.28);
  --lx-glow-b: rgba(232, 174, 201, 0.23);
  --lx-glow-c: rgba(150, 205, 228, 0.18);
  --lx-line: rgba(119, 96, 170, 0.26);
  --lx-line-soft: rgba(157, 135, 196, 0.17);
  --lx-glass: rgba(255, 252, 255, 0.36);
  --lx-moon: #a99cdb;
  --lx-petal: #e7a4c5;
  --lx-sakura: #cf9bc5;
  --lx-gold: #bc9650;
  --lx-celestial: #675aa1;
  --lx-header: rgba(255, 251, 255, 0.86);
  --lx-shadow: rgba(105, 78, 139, 0.12);
  --lx-detail-opacity: 0.52;
}

body.lexi-backdrop[data-style="midnight-aurora"] {
  --lx-canvas-top: #10182b;
  --lx-canvas-middle: #172844;
  --lx-canvas-bottom: #2f2149;
  --lx-glow-a: rgba(98, 199, 222, 0.29);
  --lx-glow-b: rgba(216, 111, 183, 0.23);
  --lx-glow-c: rgba(152, 132, 232, 0.3);
  --lx-line: rgba(98, 199, 222, 0.3);
  --lx-line-soft: rgba(181, 196, 240, 0.18);
  --lx-glass: rgba(205, 222, 255, 0.13);
  --lx-moon: #91d8e8;
  --lx-petal: #f1a7ca;
  --lx-sakura: #cf98d2;
  --lx-gold: #e4bd68;
  --lx-celestial: #a795ec;
  --lx-header: rgba(246, 249, 255, 0.9);
  --lx-shadow: rgba(4, 9, 28, 0.28);
  --lx-detail-opacity: 0.46;
  background:
    radial-gradient(ellipse 76% 105% at 50% 36%, rgba(247, 249, 255, 0.98) 0 43%, rgba(228, 233, 249, 0.88) 62%, transparent 79%),
    radial-gradient(circle at -5% 12%, var(--lx-glow-a) 0 9%, transparent 31%),
    radial-gradient(circle at 105% 26%, var(--lx-glow-b) 0 8%, transparent 29%),
    linear-gradient(155deg, var(--lx-canvas-top) 0%, var(--lx-canvas-middle) 52%, var(--lx-canvas-bottom) 100%);
}

body.lexi-backdrop::before,
body.lexi-backdrop::after {
  content: none;
}

.lexi-backdrop .hero::before {
  content: none;
}

.lexi-backdrop .site-header {
  border-bottom: 1px solid var(--lx-line);
  background: var(--lx-header);
  box-shadow: 0 14px 34px var(--lx-shadow), inset 0 -1px rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(1.22);
  -webkit-backdrop-filter: blur(20px) saturate(1.22);
}

.lexi-backdrop .style-picker {
  gap: 8px;
  padding: 4px 5px 4px 11px;
  border: 1px solid var(--lx-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 8px 22px var(--lx-shadow);
}

.lexi-backdrop .style-picker:hover,
.lexi-backdrop .style-picker:focus-within {
  border-color: rgba(82, 100, 157, 0.52);
  background: rgba(255, 255, 255, 0.84);
}

.lexi-backdrop .style-picker select {
  max-width: 154px;
  border: 0;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: inset 0 0 0 1px rgba(82, 100, 157, 0.18);
}

.lx-backdrop-host {
  position: relative;
  isolation: isolate;
}

.lx-backdrop-host > .lx-backdrop-scene {
  z-index: 0;
}

.lx-backdrop-host > :not(.lx-backdrop-scene) {
  position: relative;
  z-index: 1;
}

.lx-backdrop-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  overflow: clip;
  pointer-events: none;
  user-select: none;
}

.lx-piece {
  position: absolute;
  display: block;
  pointer-events: none;
  opacity: var(--lx-detail-opacity);
}

.lx-art {
  background: var(--lx-celestial);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.lx-crescent {
  width: clamp(92px, 10vw, 164px);
  aspect-ratio: 1;
  background: var(--lx-moon);
  -webkit-mask-image: url("backdrop/crescent.svg");
  mask-image: url("backdrop/crescent.svg");
}

.lx-sakura {
  width: clamp(210px, 28vw, 390px);
  aspect-ratio: 3 / 2;
  background: var(--lx-sakura);
  -webkit-mask-image: url("backdrop/sakura-sprig.svg");
  mask-image: url("backdrop/sakura-sprig.svg");
}

.lx-petal {
  width: clamp(28px, 3vw, 48px);
  aspect-ratio: 1;
  background: var(--lx-petal);
  -webkit-mask-image: url("backdrop/petal.svg");
  mask-image: url("backdrop/petal.svg");
}

.lx-charm {
  width: clamp(44px, 5vw, 70px);
  aspect-ratio: 6 / 17;
  background: var(--lx-gold);
  -webkit-mask-image: url("backdrop/charm-strand.svg");
  mask-image: url("backdrop/charm-strand.svg");
}

.lx-teacup {
  width: clamp(108px, 13vw, 178px);
  aspect-ratio: 21 / 17;
  background: var(--lx-gold);
  -webkit-mask-image: url("backdrop/teacup.svg");
  mask-image: url("backdrop/teacup.svg");
}

.lx-constellation {
  width: clamp(150px, 20vw, 280px);
  aspect-ratio: 5 / 3;
  background: var(--lx-celestial);
  -webkit-mask-image: url("backdrop/constellation.svg");
  mask-image: url("backdrop/constellation.svg");
}

.lx-frame {
  width: clamp(230px, 26vw, 390px);
  height: clamp(150px, 19vw, 280px);
  border: 1px solid var(--lx-line);
  border-radius: clamp(26px, 3vw, 44px);
  background: linear-gradient(145deg, var(--lx-glass), rgba(255, 255, 255, 0.08));
  box-shadow: 0 18px 48px var(--lx-shadow), inset 0 0 0 5px rgba(255, 255, 255, 0.22);
}

.lx-frame::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--lx-line-soft);
  border-radius: inherit;
}

.lx-frame--wide { transform: rotate(-5deg); }
.lx-frame--tall { width: clamp(150px, 16vw, 230px); height: clamp(230px, 28vw, 390px); transform: rotate(5deg); }

.lx-orbit {
  width: clamp(280px, 38vw, 560px);
  aspect-ratio: 1;
  border: 1px solid var(--lx-line);
  border-radius: 50%;
}

.lx-orbit::before {
  content: "";
  position: absolute;
  inset: 9%;
  border: 1px dashed var(--lx-line-soft);
  border-radius: inherit;
}

.lx-orbit::after {
  content: "";
  position: absolute;
  top: 18%;
  right: 11%;
  width: 11px;
  height: 11px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  background: var(--lx-gold);
  box-shadow: 0 0 0 1px var(--lx-line);
}

.lx-ribbon {
  width: clamp(260px, 34vw, 510px);
  height: clamp(110px, 13vw, 190px);
  clip-path: polygon(8% 0, 100% 14%, 92% 100%, 0 82%);
  background: linear-gradient(135deg, transparent, var(--lx-glass) 22% 78%, transparent);
  border-block: 1px solid var(--lx-line-soft);
  transform: rotate(-4deg);
}

.lx-star {
  width: clamp(18px, 2vw, 30px);
  aspect-ratio: 1;
  background: var(--lx-gold);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}

/* Home: moon-led framing around the hero, then a quiet celestial echo. */
.lx-scene--home-hero .lx-orbit { top: -24%; left: -18%; }
.lx-scene--home-hero .lx-crescent { top: -3%; left: -2%; transform: rotate(-16deg); }
.lx-scene--home-hero .lx-frame { top: -7%; right: -7%; }
.lx-scene--home-hero .lx-sakura { top: 4%; right: -11%; transform: rotate(8deg); opacity: 0.2; }
.lx-scene--home-hero .lx-ribbon { top: 37%; right: -5%; opacity: 0.3; }
.lx-scene--home-hero .lx-star { top: 11%; right: 35%; }
.lx-scene--home-hero .lx-petal { top: 23%; right: 5%; transform: rotate(28deg); }
.lx-scene--home-oracle .lx-orbit { bottom: -68%; left: -17%; }
.lx-scene--home-oracle .lx-constellation { top: -34%; right: -5%; opacity: 0.28; }
.lx-scene--home-oracle .lx-star { bottom: -4%; left: 48%; opacity: 0.32; }

/* Schedule: a slim celestial frame that leaves the dense calendar untouched. */
.lx-scene--schedule-intro .lx-orbit { top: -65%; left: -20%; }
.lx-scene--schedule-intro .lx-crescent { top: 5%; left: -2%; transform: rotate(-12deg); opacity: 0.28; }
.lx-scene--schedule-intro .lx-charm { top: -24%; right: -2%; opacity: 0.46; }
.lx-scene--schedule-intro .lx-frame { top: -19%; right: -8%; opacity: 0.26; }
.lx-scene--schedule-intro .lx-petal { top: 12%; right: 1%; transform: rotate(35deg); }
.lx-scene--schedule-intro .lx-star { bottom: 6%; left: 48%; opacity: 0.34; }

/* Games: angular glass and constellation first, orbit fragment at the spotlight. */
.lx-scene--games-intro .lx-frame { top: -15%; right: -8%; transform: rotate(4deg); opacity: 0.42; }
.lx-scene--games-intro .lx-constellation { top: -13%; right: -1%; opacity: 0.42; }
.lx-scene--games-intro .lx-ribbon { top: 45%; right: -6%; transform: rotate(6deg); opacity: 0.3; }
.lx-scene--games-intro .lx-star { top: 7%; left: 47%; }
.lx-scene--games-intro .lx-petal { bottom: 4%; right: 31%; transform: rotate(-28deg); }
.lx-scene--games-transition .lx-orbit { top: 7%; right: -27%; }
.lx-scene--games-transition .lx-crescent { top: 24%; right: -3%; transform: rotate(18deg); opacity: 0.22; }
.lx-scene--games-transition .lx-star { bottom: 0; left: 4%; opacity: 0.34; }

@media (max-width: 760px) {
  body.lexi-backdrop { --lx-detail-opacity: 0.34; }

  .lx-frame,
  .lx-ribbon,
  .lx-sakura,
  .lx-teacup,
  .lx-scene--home-oracle,
  .lx-scene--games-transition {
    display: none;
  }

  .lx-scene--home-hero .lx-orbit { display: block; width: 230px; top: -70px; right: -112px; left: auto; }
  .lx-scene--home-hero .lx-crescent { width: 78px; top: -10px; right: 8px; left: auto; }
  .lx-scene--home-hero .lx-petal,
  .lx-scene--home-hero .lx-star { display: none; }

  .lx-scene--schedule-intro .lx-orbit { width: 215px; top: -92px; right: -115px; left: auto; }
  .lx-scene--schedule-intro .lx-crescent { display: none; }
  .lx-scene--schedule-intro .lx-charm { width: 38px; top: -42px; right: 10px; opacity: 0.34; }
  .lx-scene--schedule-intro .lx-petal,
  .lx-scene--schedule-intro .lx-star { display: none; }

  .lx-scene--games-intro .lx-constellation { width: 145px; top: -35px; right: -16px; opacity: 0.3; }
  .lx-scene--games-intro .lx-petal { width: 24px; right: 6px; bottom: 8px; }
  .lx-scene--games-intro .lx-star { display: none; }
}

@media (max-width: 480px) {
  .calendar-page.lexi-backdrop .calendar-intro h1 span { display: none; }
}

@media (prefers-contrast: more) {
  .lx-backdrop-scene { opacity: 0.16; }
  .lexi-backdrop .site-header { background: var(--paper); }
}

@media print {
  body.lexi-backdrop { background: #fff; }
  .lx-backdrop-scene { display: none; }
}