/* Native PSD artwork. Sizes and motion are snapped to whole pixels in world.js. */
html.handmade-pixel-art {
  --hero-edge: #0e182d;
  --shared-page-backdrop: #0e182d;
}
html.handmade-pixel-art main { background: var(--shared-page-backdrop); isolation: isolate; }
.handmade-pixel-art .native-slice,
.handmade-pixel-art #game-title img { image-rendering: pixelated; }
.handmade-pixel-art .native-slice { left: var(--scene-left); width: var(--scene-width); mask-image: none; -webkit-mask-image: none; }
.handmade-pixel-art #game-title,
.handmade-pixel-art[lang=ja] #game-title { z-index: 5; transform: none; }
.handmade-pixel-art #game-title img { filter: none; }
.handmade-pixel-art .hero-copy { z-index: 12; }
.handmade-pixel-art .hero-stage header,
.handmade-pixel-art .tool-bookmark { z-index: 13; }

/* Blend the completed scene, preserving opaque foreground silhouettes. */
.handmade-pixel-art .hero-stage {
  background: transparent;
  z-index: auto;
  mask-image: linear-gradient(to bottom,#000 calc(100% - 180px),transparent);
  -webkit-mask-image: linear-gradient(to bottom,#000 calc(100% - 180px),transparent);
}
.handmade-pixel-art .hero-stage::before { display: none; }
.handmade-pixel-art .hero-stage::after {
  content: ''; position: absolute; inset: 0; z-index: 10; pointer-events: none;
  background: var(--shared-page-backdrop);
  mask-image: linear-gradient(90deg,#000 var(--scene-left),transparent calc(var(--scene-left) + 128px),transparent calc(var(--scene-left) + var(--scene-width) - 128px),#000 calc(var(--scene-left) + var(--scene-width)));
  -webkit-mask-image: linear-gradient(90deg,#000 var(--scene-left),transparent calc(var(--scene-left) + 128px),transparent calc(var(--scene-left) + var(--scene-width) - 128px),#000 calc(var(--scene-left) + var(--scene-width)));
}
.handmade-pixel-art .hero-dissolve {
  display: block; z-index: 10; opacity: 1;
  background: linear-gradient(to bottom,
    #0e182d00 calc(var(--scene-height) - 720px),
    #0e182d0d calc(var(--scene-height) - 620px),
    #0e182d29 calc(var(--scene-height) - 500px),
    #0e182d59 calc(var(--scene-height) - 380px),
    #0e182d9e calc(var(--scene-height) - 270px),
    #0e182ddb calc(var(--scene-height) - 200px),
    #0e182d calc(var(--scene-height) - 160px));
}

/* Planet composition and separate parallax star layer. */
.handmade-pixel-art .world-chapter { z-index: auto; background: none; margin-top: calc(-1 * var(--world-overlap) - 32px); }
.handmade-pixel-art .world-chapter::before { display: none; }
.handmade-pixel-art .world-section {
  box-sizing: border-box; height: auto; min-height: calc(100vh - var(--tool-banner-height));
  padding: 22px 30px 76px; display: flex; flex-direction: column; justify-content: flex-start;
  isolation: isolate; background: transparent; overflow: clip;
}
.handmade-pixel-art .world-section::before,
.handmade-pixel-art .world-section::after { display: none; }
.handmade-pixel-art .world-heading { position: relative; inset: auto; z-index: 2; flex: none; transform: translateY(30px); }
.handmade-pixel-art .planet-stage {
  position: relative; inset: auto; width: 100%; max-width: 1700px;
  height: calc(100vh - var(--tool-banner-height) - 220px);
  min-height: calc(278px * var(--pixel-scale) + 40px); max-height: 650px;
  margin: 10px auto 0; flex: none;
}
.handmade-pixel-art .planet {
  width: calc(277px * var(--pixel-scale)); height: calc(278px * var(--pixel-scale));
  max-width: none; min-width: 0; aspect-ratio: auto;
  transform: translate3d(var(--planet-x,0px),calc(var(--planet-shift,0px) + var(--planet-y,0px)),0);
  will-change: transform;
}
.handmade-pixel-art .planet > img { width: 100%; height: auto; image-rendering: pixelated; filter: none; }
.handmade-pixel-art .world-space-layer {
  inset: 0; z-index: 0; opacity: 1; mix-blend-mode: normal; transform: none; background: none;
  mask-image: linear-gradient(transparent,#000 300px);
  -webkit-mask-image: linear-gradient(transparent,#000 300px);
}
.handmade-pixel-art .planet-bg-art,
.handmade-pixel-art .planet-stars-art {
  position: absolute; left: var(--scene-left); top: var(--space-art-top);
  width: var(--scene-width); height: calc(500px * var(--pixel-scale)); max-width: none;
  display: block; image-rendering: pixelated; pointer-events: none; transform: none;
}
.handmade-pixel-art .planet-bg-art {
  mask-image: linear-gradient(transparent,#000 400px),linear-gradient(90deg,transparent,#000 180px,#000 calc(100% - 180px),transparent);
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(transparent,#000 400px),linear-gradient(90deg,transparent,#000 180px,#000 calc(100% - 180px),transparent);
  -webkit-mask-composite: source-in;
}
.handmade-pixel-art .planet-stars-art { transform: translate3d(var(--stars-x,0px),calc(var(--star-shift,0px) + var(--stars-y,0px)),0); will-change: transform; }
.handmade-pixel-art #markers,
.handmade-pixel-art #settlement-cards,
.handmade-pixel-art .callout-line,
.handmade-pixel-art #town-nav,
.handmade-pixel-art .planet-instruction { display: none !important; }
.handmade-pixel-art .world-chapter footer { z-index: 30; isolation: isolate; }

/* Pixel UI assets and popup characters. */
.steam .steam-pixel-icon { display: block; flex: none; width: 46px; height: 46px; max-width: none; image-rendering: pixelated; object-fit: contain; }
.tool-download .download-pixel-icon { display: block; flex: none; width: 14px; height: 16px; image-rendering: pixelated; object-fit: contain; }
#notice[data-kind=steam] .steam-mascot { width: calc(52px * var(--pixel-scale)); height: calc(50px * var(--pixel-scale)); max-width: none; image-rendering: pixelated; }
#notice[data-kind=support] .steam-mascot { width: calc(39px * var(--pixel-scale)); height: calc(28px * var(--pixel-scale)); max-width: none; image-rendering: pixelated; }
.creator-sprite-stage img { width: calc(var(--native-sprite-width) * var(--pixel-scale)); height: calc(var(--native-sprite-height) * var(--pixel-scale)); max-width: none; image-rendering: pixelated; transition: none; }
.creators-dialog[open] .creator-card { animation-timing-function: steps(16,end); }
@media (prefers-reduced-motion: reduce) {
  .handmade-pixel-art .planet,
  .handmade-pixel-art .planet-stars-art { transform: none; will-change: auto; }
}

/* Scroll-driven heading entrance; its settled offset is 30px. */
.handmade-pixel-art .world-heading { will-change: transform, opacity; }
@media(prefers-reduced-motion:reduce){.handmade-pixel-art .world-heading{will-change:auto}}

/* Static base stars plus three independently timed, sparse twinkle groups. */
.handmade-pixel-art .planet-stars-art { transform: none; will-change: auto; }
.handmade-pixel-art .star-twinkle {
  animation: star-twinkle 5.7s ease-in-out infinite;
  animation-play-state: paused;
  will-change: opacity;
}
.handmade-pixel-art .star-twinkle-2 { animation-duration: 5.7s; animation-delay: -1.3s; }
.handmade-pixel-art .star-twinkle-3 { animation-duration: 7.9s; animation-delay: -4.1s; }
.handmade-pixel-art .star-twinkle-4 { animation-duration: 9.1s; animation-delay: -6.7s; }
.handmade-pixel-art .stars-playing .star-twinkle { animation-play-state: running; }
@keyframes star-twinkle {
  0%, 42%, 100% { opacity: .15; }
  58% { opacity: .65; }
  67% { opacity: 1; }
  77% { opacity: .4; }
  88% { opacity: .08; }
}
@media(prefers-reduced-motion:reduce){
  .handmade-pixel-art .star-twinkle { animation: none; opacity: .8; will-change: auto; }
}

/* Sparse sprite-sheet sparkles: seven native 11x11 frames, no parallax. */
.star-node-field {
  position: absolute; left: var(--scene-left); top: var(--space-art-top);
  width: var(--scene-width); height: calc(500px * var(--pixel-scale));
  pointer-events: none;
}
.star-node {
  position: absolute;
  left: calc(var(--node-x) * var(--pixel-scale));
  top: calc(var(--node-y) * var(--pixel-scale));
  width: calc(11px * var(--pixel-scale)); height: calc(11px * var(--pixel-scale));
  background: url('assets/planet-star-node.png') 0 0 / calc(77px * var(--pixel-scale)) calc(11px * var(--pixel-scale)) no-repeat;
  image-rendering: pixelated; opacity: 0;
  animation: star-node-spark 15s linear infinite;
  animation-play-state: paused;
}
.stars-playing .star-node { animation-play-state: running; }
@keyframes star-node-spark {
  0%, 2% { opacity: 0; background-position-x: 0; }
  3% { opacity: 1; background-position-x: 0; animation-timing-function: steps(6,end); }
  9% { opacity: 1; background-position-x: calc(-66px * var(--pixel-scale)); }
  10% { opacity: 1; background-position-x: calc(-66px * var(--pixel-scale)); animation-timing-function: steps(6,end); }
  16% { opacity: 1; background-position-x: 0; }
  17%, 100% { opacity: 0; background-position-x: 0; }
}

@media(prefers-reduced-motion:reduce){.star-node-field{display:none}.star-node{animation:none}}

/* The complete space backdrop shares stronger vertical scroll depth. */
.handmade-pixel-art .planet-bg-art,
.handmade-pixel-art .planet-stars-art,
.handmade-pixel-art .star-node-field {
  transform: translate3d(0,var(--star-shift,0px),0);
  will-change: transform;
}
@media(prefers-reduced-motion:reduce){
  .handmade-pixel-art .planet-bg-art,
  .handmade-pixel-art .planet-stars-art,
  .handmade-pixel-art .star-node-field { transform:none;will-change:auto; }
}

/* Let faint stars overlap the lower rocks, without revealing them in the opening view. */
.handmade-pixel-art .world-section {
  overflow: visible;
  clip-path: inset(-240px 0 0);
}
.handmade-pixel-art .world-space-layer {
  top: -240px;
  opacity: var(--space-reveal,0);
  mask-image: linear-gradient(transparent, #000 320px);
  -webkit-mask-image: linear-gradient(transparent, #000 320px);
}
.handmade-pixel-art .planet-bg-art,
.handmade-pixel-art .planet-stars-art,
.handmade-pixel-art .star-node-field { top: calc(var(--space-art-top) + 240px); }

/* Globe lighting fills its existing parallax container at native pixel density. */
.planet > .planet-lighting-canvas {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%; max-width: none;
  image-rendering: pixelated; pointer-events: none;
}

/* Authored, unlit glow behind the globe; same PSD registration and parallax parent. */
.planet > img { position:relative; z-index:1; }
.planet > .planet-lighting-canvas { z-index:1; }
.planet-glow { position:absolute; z-index:0; pointer-events:none;
  left:calc(0px * var(--pixel-scale)); top:calc(0px * var(--pixel-scale));
  width:calc(277px * var(--pixel-scale)); height:calc(278px * var(--pixel-scale));
}
.planet-glow img { display:block; width:100%; height:100%; max-width:none; image-rendering:pixelated; }

/* Raw PSD Godrays are composited behind the foreground with Color Dodge. */
.handmade-pixel-art .godrays {
  mix-blend-mode: color-dodge;
  opacity: 0;
  animation: godrays-breathe 8s ease-in-out infinite;
  animation-play-state: paused;
}
.handmade-pixel-art .godrays.godrays-playing { animation-play-state: running; }
@keyframes godrays-breathe {
  0%,100% { opacity:.2; }
  25% { opacity:.35; }
  55% { opacity:.65; }
  80% { opacity:.38; }
}
@media(prefers-reduced-motion:reduce){.handmade-pixel-art .godrays{animation:none;opacity:.35}}

/* Title maps retain the cropped sprite registration and shared language animation. */
.title-lighting-stack { display:block; position:relative; width:100%; line-height:0; }
#game-title .title-lighting-canvas { position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; pointer-events:none; }