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;
}

.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)
  );
}

.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;
}
.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 {
  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;
  transform: none;
  background: none;
}
.handmade-pixel-art .planet-bg-art,
.handmade-pixel-art .planet-stars-art {
  position: absolute;
  left: var(--scene-left);
  width: var(--scene-width);
  height: calc(500px * var(--pixel-scale));
  max-width: none;
  display: block;
  image-rendering: pixelated;
  pointer-events: 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 #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;
}

.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 {
  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;
  }
}

.handmade-pixel-art .world-heading {
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  .handmade-pixel-art .world-heading {
    will-change: auto;
  }
}

.handmade-pixel-art .star-twinkle {
  animation: star-twinkle 4.1s linear infinite;
  animation-play-state: paused;
  will-change: opacity;
}
.handmade-pixel-art .star-twinkle-2 {
  animation-duration: 4.1s;
  animation-delay: -1.3s;
}
.handmade-pixel-art .star-twinkle-3 {
  animation-duration: 5.3s;
  animation-delay: -4.1s;
}
.handmade-pixel-art .star-twinkle-4 {
  animation-duration: 6.7s;
  animation-delay: -6.7s;
}
.handmade-pixel-art .stars-playing .star-twinkle {
  animation-play-state: running;
}
@keyframes star-twinkle {
  0%,
  100% {
    opacity: 0.08;
  }
  14% {
    opacity: 0.22;
  }
  22% {
    opacity: 0.85;
  }
  25% {
    opacity: 0.3;
  }
  29% {
    opacity: 1;
  }
  34% {
    opacity: 0.16;
  }
  47% {
    opacity: 0.45;
  }
  51% {
    opacity: 0.95;
  }
  54% {
    opacity: 0.28;
  }
  59% {
    opacity: 0.8;
  }
  66% {
    opacity: 0.08;
  }
  81% {
    opacity: 0.2;
  }
  86% {
    opacity: 0.9;
  }
  90% {
    opacity: 0.18;
  }
}
@media (prefers-reduced-motion: reduce) {
  .handmade-pixel-art .star-twinkle {
    animation: none;
    opacity: 0.8;
    will-change: auto;
  }
}

.star-node-field {
  position: absolute;
  left: var(--scene-left);
  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?v=c1e68686b7ca") 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;
    animation-timing-function: steps(1, end);
  }
  3% {
    opacity: 1;
    background-position-x: calc(-0px * var(--pixel-scale));
    animation-timing-function: steps(1, end);
  }
  4% {
    opacity: 0.65;
    background-position-x: calc(-11px * var(--pixel-scale));
    animation-timing-function: steps(1, end);
  }
  5% {
    opacity: 1;
    background-position-x: calc(-22px * var(--pixel-scale));
    animation-timing-function: steps(1, end);
  }
  6% {
    opacity: 0.8;
    background-position-x: calc(-33px * var(--pixel-scale));
    animation-timing-function: steps(1, end);
  }
  7% {
    opacity: 1;
    background-position-x: calc(-44px * var(--pixel-scale));
    animation-timing-function: steps(1, end);
  }
  8% {
    opacity: 0.55;
    background-position-x: calc(-55px * var(--pixel-scale));
    animation-timing-function: steps(1, end);
  }
  9% {
    opacity: 1;
    background-position-x: calc(-66px * var(--pixel-scale));
    animation-timing-function: steps(1, end);
  }
  10% {
    opacity: 0.7;
    background-position-x: calc(-66px * var(--pixel-scale));
    animation-timing-function: steps(1, end);
  }
  11% {
    opacity: 1;
    background-position-x: calc(-55px * var(--pixel-scale));
    animation-timing-function: steps(1, end);
  }
  12% {
    opacity: 0.6;
    background-position-x: calc(-44px * var(--pixel-scale));
    animation-timing-function: steps(1, end);
  }
  13% {
    opacity: 1;
    background-position-x: calc(-33px * var(--pixel-scale));
    animation-timing-function: steps(1, end);
  }
  14% {
    opacity: 0.75;
    background-position-x: calc(-22px * var(--pixel-scale));
    animation-timing-function: steps(1, end);
  }
  15% {
    opacity: 1;
    background-position-x: calc(-11px * var(--pixel-scale));
    animation-timing-function: steps(1, end);
  }
  16% {
    opacity: 1;
    background-position-x: calc(-0px * var(--pixel-scale));
    animation-timing-function: steps(1, end);
  }
  17%,
  100% {
    opacity: 0;
    background-position-x: 0;
  }
}

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

.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;
  }
}

.handmade-pixel-art .world-section {
  overflow: visible;
  clip-path: inset(-240px 0 0);
}
.handmade-pixel-art .world-space-layer {
  mix-blend-mode: normal;
  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);
}

.planet > .planet-lighting-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  image-rendering: pixelated;
  pointer-events: none;
}

/* keep globe glow separate from normal map lighting */
.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));
}
.planet-glow img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  image-rendering: pixelated;
}

/* godrays are exported without blending apply color dodge here */
.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: 0.2;
  }
  25% {
    opacity: 0.35;
  }
  55% {
    opacity: 0.65;
  }
  80% {
    opacity: 0.38;
  }
}
@media (prefers-reduced-motion: reduce) {
  .handmade-pixel-art .godrays {
    animation: none;
    opacity: 0.35;
  }
}

/* title textures share the cropped sprite registration */
.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;
}