/* The home scene, behind everything.
 *
 * One fixed layer between the page's black and the interface: it never scrolls, never takes a tap,
 * and sits under every panel, dialog and button. Which picture shows is decided by the home scene
 * chosen in the Field Journal.
 *
 * All ten have their own picture, painted as pixel art with a calm middle: the sides are framed
 * (islands, trees, cliffs, clouds) and the centre is kept dark so the pet stands out in front.
 */
body::before{
  content:'';
  position:fixed;
  /* Taller than the screen on purpose. Phones leave a strip under the page (behind the browser's
     own bar, or the home indicator on a home-screen app) that a layer sized to the page never
     reaches, and it showed up as a band of a different colour under the nav. `lvh` is the tallest
     the screen ever gets, so the scene runs all the way to the bottom edge. */
  top:0;left:0;right:0;bottom:auto;
  height:100%;height:100lvh;
  z-index:0;                 /* above the page background, below all content */
  pointer-events:none;
  background:no-repeat center top / cover;
  background-image:var(--scene,none);
  image-rendering:pixelated;  /* the scenes are pixel art: keep every pixel square at any size */
  opacity:.24;
  transition:opacity .45s ease;
  /* Brightest in a wide circle around the pet, fading toward the edges and corners. */
  -webkit-mask-image:radial-gradient(ellipse 78% 46% at 50% 40%,#000 38%,rgba(0,0,0,.55) 100%);
  mask-image:radial-gradient(ellipse 78% 46% at 50% 40%,#000 38%,rgba(0,0,0,.55) 100%);
}
#app{position:relative;z-index:1}

/* The page is exactly one screen and does not bounce.
   Dragging past the edge on iOS rubber-bands the document, which reveals the bare page colour as a
   dark bar and stretches the fixed scene behind it. Nothing here is taller than the viewport, so
   the whole gesture is simply turned off; screens that genuinely scroll do it inside themselves. */
html,body{height:100%;overflow:hidden;overscroll-behavior:none;-webkit-overflow-scrolling:auto}
#app{height:100svh;max-height:100svh;overflow:hidden}
@supports(height:100dvh){#app{height:100dvh;max-height:100dvh}}
dialog{overscroll-behavior:contain}

/* Each home scene and its picture, in the order they are earned.
   The same rule feeds the backdrop and the little preview on each card in the Field Journal. */
:root[data-scene="night"],[data-art="night"]{--scene:url('scenes/night.png')}
:root[data-scene="hamlet"],[data-art="hamlet"]{--scene:url('scenes/hamlet.png')}
:root[data-scene="city"],[data-art="city"]{--scene:url('scenes/city.png')}
:root[data-scene="deepwood"],[data-art="deepwood"]{--scene:url('scenes/deepwood.png')}
:root[data-scene="greatwood"],[data-art="greatwood"]{--scene:url('scenes/greatwood.png')}
:root[data-scene="observatory"],[data-art="observatory"]{--scene:url('scenes/observatory.png')}
:root[data-scene="nightlights"],[data-art="nightlights"]{--scene:url('scenes/nightlights.png')}
:root[data-scene="storm"],[data-art="storm"]{--scene:url('scenes/storm.png')}
:root[data-scene="galaxy"],[data-art="galaxy"]{--scene:url('scenes/galaxy.png')}
:root[data-scene="coliseum"],[data-art="coliseum"]{--scene:url('scenes/coliseum.png')}
/* 13.3: the second story's four */
:root[data-scene="harvest"],[data-art="harvest"]{--scene:url('scenes/harvest.png')}
:root[data-scene="reef"],[data-art="reef"]{--scene:url('scenes/reef.png')}
:root[data-scene="ember"],[data-art="ember"]{--scene:url('scenes/ember.png')}
:root[data-scene="dunes"],[data-art="dunes"]{--scene:url('scenes/dunes.png')}

/* The painted scene behind the pet steps aside for the photograph. */
#home-scene{display:none}

/* The stage painted an opaque oval over the middle of the screen. Invisible against a black page,
   but it hid anything behind the interface, so it becomes a soft darkening: the pet keeps its pool
   of shade and the scene reads through it. */
.stage{background:radial-gradient(ellipse at 50% 42%,rgba(8,10,12,.55) 0%,rgba(8,10,12,.32) 45%,transparent 70%)}

/* No background at all: the game as it was, on plain dark. */
:root[data-scene="none"],[data-art="none"]{--scene:none}
:root[data-scene="none"] .stage{background:radial-gradient(ellipse at 50% 42%,#1c1723 0%,#1c1723 45%,transparent 70%)}

/* The preview on each scene card */
.scene-card .scene-preview{
  display:block;width:100%;aspect-ratio:9/13;border-radius:8px;
  background:var(--scene,#1c1723) no-repeat center top / cover;
  background-color:#1c1723;
  image-rendering:pixelated;
}
.scene-card.locked .scene-preview{filter:grayscale(.85) brightness(.4)}
.scene-card .scene-preview[data-art="none"]{background-image:none;position:relative}

/* ---- 11.2 · The living home -------------------------------------------------------------------------
   Home is one wide landscape now, painted live on a canvas behind everything (home-biome.js): each
   favourite stands on its own mountain top and swiping pans along the range. The scene picture, the
   veils over it and the stage's pool of shade all step aside while it's on. The home scene chosen in
   the Field Journal picks the landscape's look; "No background" keeps the plain dark home. */
#home-biome{position:fixed;top:0;left:0;width:100%;height:100%;height:100lvh;z-index:0;pointer-events:none;display:none}
body.biome-on #home-biome{display:block}
html body.biome-on::before,:root[data-theme] body.biome-on::before{display:none!important}
/* The veil over the scene becomes the landscape's vignette: darker toward the corners and the bottom,
   where the buttons are. It never moves, so the page composites it once instead of every frame. */
html body.biome-on::after,:root[data-theme] body.biome-on::after{display:block!important;
  background:linear-gradient(180deg,rgba(8,8,22,0) 58%,rgba(8,8,22,.78) 100%),radial-gradient(ellipse 95% 62% at 50% 40%,rgba(6,6,18,0) 30%,rgba(6,6,18,.5) 100%)!important}
html body.biome-on .stage,:root[data-theme] body.biome-on .stage{background:none!important}
body.biome-on #pet-glow,body.biome-on .ground{display:none!important}
body.biome-on .stage.pet-enter canvas{animation:none!important}
/* While the camera is moving the landscape draws everyone itself; the pal's own canvas takes over
   again the moment it settles. */
body.biome-on.biome-moving #play-canvas,body.biome-on.biome-moving #pet-canvas,body.biome-on.biome-moving .journey-frame{visibility:hidden}
/* Words over a landscape instead of the dark: a soft shadow keeps them easy to read. */
body.biome-on .pet-caption,body.biome-on #chest-info>.micro,body.biome-on #chest-info>h1,body.biome-on #chest-countdown,body.biome-on .gesture-hint,body.biome-on .home-links,body.biome-on .moon-line{text-shadow:0 1px 2px rgba(8,8,22,.9),0 0 10px rgba(8,8,22,.65)}
/* The arrows sit over the neighbours' mountains, so they go see-through until you reach for them. */
html body.biome-on .stage-arrow{background:rgba(12,14,34,.28)!important;border-color:rgba(255,255,255,.14)!important;box-shadow:none!important;opacity:.8}
html body.biome-on .stage-arrow:hover,html body.biome-on .stage-arrow:focus-visible{background:rgba(12,14,34,.55)!important;opacity:1}
/* Both canvases are drawn one pixel to a CSS pixel: scale them up square, so the pal looks the same
   whether the landscape or its own canvas is drawing it. */
#home-biome,body.biome-on #play-canvas{image-rendering:pixelated}
/* The chest page's words sit higher, over the mountain itself: a soft pool of shade under them. */
body.biome-on #chest-info{position:relative;isolation:isolate}
body.biome-on #chest-info::before{content:'';position:absolute;top:-36px;left:0;right:0;height:230px;z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(10,10,28,.8),rgba(10,10,28,.6) 50%,rgba(10,10,28,.2) 80%,rgba(10,10,28,0))}
body.biome-on .chest-page #chest-countdown,body.biome-on.chest-page #chest-countdown{color:#a9c4da}
/* The Field Journal's scene cards show the living landscape itself (painted by journal-ui.js). */
.scene-card canvas.scene-live{display:block;width:100%;height:auto;aspect-ratio:9/13;border-radius:8px;image-rendering:auto;background:#1c1723}
.scene-card.locked canvas.scene-live{filter:grayscale(.85) brightness(.4)}
/* 11.4.1: the pal's name and details sit over the sea of cloud, which is bright in some scenes. A soft
   pool of shade behind them (like the chest page's), and the quiet lines a step brighter. */
body.biome-on:not(.chest-page) .pet-caption{isolation:isolate}
/* 11.9: the pool stays inside the stage (it used to be wider and taller than the stage, which cut
   its soft edges off square at the sides and the bottom). */
body.biome-on:not(.chest-page) .pet-caption::before{content:'';position:absolute;left:50%;top:-14px;width:min(430px,100%);bottom:0;transform:translateX(-50%);z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(10,10,28,.72),rgba(10,10,28,.52) 55%,rgba(10,10,28,.18) 82%,rgba(10,10,28,0))}
html body.biome-on .pet-caption .pet-index,html body.biome-on .pet-caption .pet-level{color:#c3d3e4!important;opacity:1}
html body.biome-on .pet-caption .rarity-label b,html body.biome-on .pet-caption .rarity b{filter:brightness(1.18)}
html body.biome-on .pet-caption #pet-name{text-shadow:0 1px 2px rgba(8,8,22,.95),0 0 14px rgba(8,8,22,.8)!important}
/* 11.4.1: a pal on a quest stays on its mountain with a little map over its head. Tap it and its
   journey opens right there; tap the journey (or the line under the name) for the quest itself. */
body.biome-on.journey-away:not(.journey-open) .journey-frame{display:none}
body.biome-on.journey-open .journey-frame{pointer-events:auto;cursor:pointer;animation:journey-pop .22s ease-out both;z-index:4}
@keyframes journey-pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.reduced-motion body.journey-open .journey-frame{animation:none}
.journey-close{display:none;position:absolute;top:6px;right:6px;width:30px;height:30px;place-items:center;border-radius:9px;border:1px solid rgba(255,255,255,.18);background:rgba(12,14,34,.7);color:#f4efe3;font-size:13px;z-index:3;cursor:pointer}
body.biome-on.journey-open .journey-close{display:grid}
.away-watch{min-height:36px;padding:0 12px;border-radius:999px;border:1px solid rgba(169,196,218,.35);background:rgba(12,14,34,.5);color:#dae7f1;font-size:12px;letter-spacing:.01em;white-space:nowrap;cursor:pointer}
.away-watch:hover{border-color:rgba(218,231,241,.6)}
#gesture-hint [hidden]{display:none!important}