/* Scenery (js/scenes/): the title sky, the page backdrop behind every screen, and how scene
   SVGs sit in a frame. The battle field uses the same frame rules (css/battle.css). */

/* ---------- the title sky (scenes/sky.js): also the title screen's background ---------- */
.sky-scene {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  background: linear-gradient(#5ab8f5 0%, #8fd3ff 45%, #d7f1ff 75%, #f6fbff 100%);
}
.sky-scene .sun {
  position: absolute; top: 9%; right: 12%; width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle, #fff7c2 0 45%, #ffe27a 60%, rgba(255, 226, 122, 0) 72%);
}
.sky-scene .cloud {
  position: absolute; width: 130px; height: 38px; border-radius: 40px; background: #fff; opacity: .92;
  animation: title-drift 38s linear infinite;
}
.sky-scene .cloud::before, .sky-scene .cloud::after {
  content: ""; position: absolute; background: #fff; border-radius: 50%;
}
.sky-scene .cloud::before { width: 60px; height: 60px; left: 18px; top: -30px; }
.sky-scene .cloud::after { width: 46px; height: 46px; left: 64px; top: -20px; }
.sky-scene .cloud.c1 { top: 16%; left: -10%; }
.sky-scene .cloud.c2 { top: 34%; left: 45%; transform: scale(.7); animation-duration: 52s; animation-delay: -20s; }
.sky-scene .cloud.c3 { top: 62%; left: 10%; transform: scale(1.2); animation-duration: 64s; animation-delay: -40s; opacity: .8; }
@keyframes title-drift { from { translate: -40vw 0; } to { translate: 120vw 0; } }

.sky-scene .hills { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; }
.sky-scene .hill { position: absolute; bottom: -40%; border-radius: 50% 50% 0 0; }
.sky-scene .hill.h1 { left: -20%; width: 80%; height: 120%; background: #7fcf6a; }
.sky-scene .hill.h2 { right: -25%; width: 90%; height: 140%; background: #5fbb55; }
.sky-scene .hill.h3 { left: 25%; width: 60%; height: 90%; background: #4aa546; }

.sky-scene.still .cloud { animation: none; }
@media (prefers-reduced-motion: reduce) { .sky-scene .cloud { animation: none !important; } }

/* ---------- a scene SVG inside any frame (.scene-frame) ----------
   Scenes are 400×300 with the ground from y≈100. Tall frames (phones): the SVG fills the
   height and is cropped at the sides (xMidYMax slice), so the horizon sits a third of the way
   down. Wide frames (desktops): the SVG keeps 4:3 at the full width and is cropped top and
   bottom so the horizon still sits a third of the way down, instead of sliding to the top. */
.scene-frame { position: absolute; inset: 0; overflow: hidden; container-type: size; }
.scene-frame > svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
@supports (height: 1cqh) {
  .scene-frame > svg { height: max(100cqh, 75cqw); top: calc((100cqh - max(100cqh, 75cqw)) / 3); }
}

/* ---------- the page backdrop (#backdrop in index.html, scenes/index.js setBackdrop) ---------- */
.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #cfe9f7; }
.backdrop:empty { display: none; }
.backdrop .bd-layer { opacity: 0; transition: opacity .8s ease; }
.backdrop .bd-layer.on { opacity: 1; }
/* a gentle veil so the scenery stays behind the content */
.backdrop::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .12); }
.backdrop[data-scene="sky"]::after { display: none; }
/* the title screen draws its own sky; a battle covers the whole screen */
body.title-screen .backdrop, body.in-battle .backdrop { display: none; }
@media (prefers-reduced-motion: reduce) { .backdrop .bd-layer { transition: none; } }

/* ---------- legibility on the scenery ----------
   Cards stay solid white. Text that sits straight on the scenery (headings, hints, step bars,
   legends outside cards) gets a tight white halo and a darker colour, so it reads on the dark
   scenes (cave, burned, forest) as well as the bright ones. Anything with its own background
   resets it. The halo stays tight (1–2px): a wide soft glow reads as a grey smear around dark
   text on the dark scenes, which looks blurry. */
body.has-backdrop:not(.title-screen) { background: transparent; }
html:has(body.has-backdrop) { background: var(--bg); }
body.has-backdrop:not(.title-screen) main, .on-scenery {
  text-shadow: 0 0 1px #fff, 0 0 1px #fff, 0 0 2px #fff;
}
body.has-backdrop:not(.title-screen) main :is(.card, button, .btn, .role, .tile, .modal, .chip, .type, .tag, .battle, .map, .map-side, .log, .toast, input, select, textarea, table),
.on-scenery :is(.card, button, .btn, .role, .tile, .modal, .chip, .type, .tag, .battle, .map, .map-side, .log, .toast, input, select, textarea, table) {
  text-shadow: none;
}
/* muted text and step bars straight on the scenery are darker so the halo has something to frame
   (the dark full-screen map panel and battle logs keep their own light text) */
body.has-backdrop:not(.title-screen) main :is(.muted, .steps):not(:is(.card, .modal, .role, .tile, .battle, .map, .map-side, .log, button, .btn) *),
.on-scenery :is(.muted, .steps):not(:is(.card, .modal, .role, .tile, .battle, .map, .map-side, .log, button, .btn) *) { color: #343a46; }
/* hint lines and step bars ("1. Who? › 2. Which Pokemon?") straight on the scenery sit on a light
   pill instead of a glow, so they stay crisp on the dark scenes too (like the My Party header below) */
body.has-backdrop:not(.title-screen) main :is(p.muted, div.muted, .steps):not(:is(.card, .modal, .role, .tile, .battle, .map, .map-side, .log, button, .btn) *):not(.hub-head > *),
.on-scenery :is(p.muted, div.muted, .steps):not(:is(.card, .modal, .role, .tile, .battle, .map, .map-side, .log, button, .btn) *):not(.hub-head > *) {
  background: rgba(255, 255, 255, .88); text-shadow: none;
  width: fit-content; max-width: 100%; box-sizing: border-box;
  padding: 4px 10px; border-radius: 12px; box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

/* a see-through ghost button ("Back") straight on the scenery gets a light fill so it reads on
   the dark scenes (Burned Tower, Union Cave, Morty's gym) */
body.has-backdrop:not(.title-screen) main button.ghost:not(:is(.card, .modal, .tile, .battle, .map, .map-side, .log) *),
body.has-backdrop:not(.title-screen) main button.ghost:not(:is(.card, .modal, .tile, .battle, .map, .map-side, .log) *):hover {
  background: rgba(255, 255, 255, .9);
}

/* the My Party header line ("2/6 members · Leader …") sits straight on the scenery: a light
   pill keeps it readable on the dark scenes too */
body.has-backdrop:not(.title-screen) main .hub-head > .muted {
  background: rgba(255, 255, 255, .85); color: #343a46; text-shadow: none;
  padding: 3px 10px; border-radius: 999px; box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}