/* Lightkeepers v0.17 startup art (js/loading-v017.js). Decoration only, over
   the inert page while body[data-boot] is not "ready"; it never takes taps or
   focus. Single-source theme: .ld-art and #boot-status.ld-on join the Moonlight
   token group in moonlight-v017.css, so every colour below is an existing token.
   Existing key art and Icon A only; no new images or fonts. */
.ld-art {
  --ld-accent: var(--gold-hot);
  position: fixed; inset: 0; z-index: 59; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: calc(24px + var(--safe-top, 0px)) 24px calc(120px + var(--safe-bottom, 0px));
  background: linear-gradient(180deg, var(--mk-milk), var(--mk-milk) 60%, var(--mk-milk-2));
}
/* Season accents reuse existing tokens; each keeps >= 4.5:1 on the milk ground. */
.ld-art[data-season="winter"] { --ld-accent: var(--mk-navy-2); }
.ld-art[data-season="spring"] { --ld-accent: var(--seat0-dark); }
.ld-art[data-season="summer"] { --ld-accent: var(--gold-hot); }
.ld-art[data-season="autumn"] { --ld-accent: var(--seat1-dark); }
.ld-frame {
  width: min(72vw, 320px, 42vh); aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden;
  background: radial-gradient(90% 60% at 60% 30%, var(--ink-3) 0%, var(--ink-1) 55%, var(--ink-0) 100%);
  border: 1px solid var(--line);
  box-shadow: 0 0 0 6px var(--mk-card), 0 0 0 7px color-mix(in srgb, var(--ld-accent) 45%, transparent), var(--mk-shadow);
}
.ld-keyart { display: block; width: 100%; height: 100%; object-fit: cover; }
.ld-icon { position: relative; z-index: 1; width: 64px; height: 64px; margin-top: -44px; border-radius: 16px; box-shadow: 0 0 0 3px var(--mk-card-2), var(--mk-shadow); }
.ld-season { margin: 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ld-accent); }
.ld-season:empty { display: none; }
body[data-boot="ready"] .ld-art:not([data-mg="ready"]) { display: none; }
/* Moon Gift leaves by itself even if the script dies: faded, then hidden. */
body[data-boot="ready"] .ld-art[data-mg="ready"] { animation: ld-mg-out .24s ease-in both; }

/* The existing status pill turns milky while the art shows. */
#boot-status.ld-on { color: var(--text); background: var(--glass-hi); border-color: var(--line); box-shadow: var(--mk-shadow); }
.ld-tip { max-width: 34ch; color: var(--muted); }
body[data-boot="slow"] .ld-tip { display: none; }
.ld-fault { display: none; }
#boot-status[data-fault] .ld-fault { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
#boot-status[data-fault] .ld-fault .btn { min-height: 44px; }
#boot-status[data-fault] .boot-text,
#boot-status[data-fault] .boot-slow,
#boot-status[data-fault] .ld-tip { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .ld-art { animation: ld-in .35s ease-out both; }
  .ld-frame { animation: ld-breathe 5s ease-in-out infinite alternate; }
}
@keyframes ld-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ld-breathe { from { transform: translateY(0); } to { transform: translateY(-4px); } }


/* v0.23.1 Moon Gift (js/loading-v017.js). One unedited sheet, the approved
   1536x1024 storyboard (lossless WebP, pixel-identical); CSS background
   position/size picks a panel. Opening panel centre x 392, ready x 1144: with
   the sheet drawn at the overlay height H (width 1.5H), centring x means
   50% +/- 0.3672H. H comes from container units of the fixed overlay itself
   (the dynamic viewport, not 100vh). The stage is at most 0.512H wide so the
   storyboard's corner labels stay out of view, and a band covers its baked
   caption: the live tip is the only text. Ready is a crossfade with a light
   bloom, run together with the overlay's 240 ms fade-out; not a hinge. */
.ld-art.ld-mg { --ld-h: 100vh; padding: 0; background: var(--ink-0); container-type: size; contain: strict; }
@supports (height: 1cqh) { .ld-art.ld-mg { --ld-h: 100cqh; } }
.ld-mg-stage {
  position: absolute; top: 0; bottom: 0; left: 50%; width: min(100%, calc(var(--ld-h) * .512));
  transform: translateX(-50%); overflow: hidden;
}
.ld-mg-open, .ld-mg-ready, .ld-mg-bloom, .ld-mg-band { position: absolute; inset: 0; }
.ld-mg-open, .ld-mg-ready {
  background-image: url("/assets/loading-v0231/moon-gift-storyboard.webp");
  background-repeat: no-repeat; background-size: auto 100%;
}
.ld-mg-open { background-position: calc(50% + var(--ld-h) * .3672) 0; }
.ld-mg-ready { background-position: calc(50% - var(--ld-h) * .3672) 0; opacity: 0; }
.ld-mg-bloom {
  opacity: 0;
  background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--tk-gold-hot) 70%, transparent) 0%, color-mix(in srgb, var(--tk-gold-hot) 32%, transparent) 16%, transparent 52%);
}
.ld-mg-band { top: auto; height: 17%; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ink-0) 94%, transparent) 30%, var(--ink-0) 60%); }
/* Not gated by the media query: the script only sets data-mg="ready" when
   motion is allowed (the game's saved setting wins, as in main.js). */
.ld-art[data-mg="ready"] .ld-mg-ready { animation: ld-mg-in .16s ease-out both; }
.ld-art[data-mg="ready"] .ld-mg-bloom { animation: ld-mg-bloom .24s ease-out both; }
@keyframes ld-mg-out { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
@keyframes ld-mg-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ld-mg-bloom { 0% { opacity: 0; } 50% { opacity: .8; } 100% { opacity: .4; } }