*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#000;color:#f6dfc1;overflow-x:hidden}
.district{position:relative;width:100%;margin:0;background:#000}
.viewport{position:relative;width:100%;aspect-ratio:2/1;overflow:hidden}
.scene{position:absolute;inset:0;width:100%;height:100%;isolation:isolate}
.scene>.art{display:block;width:100%;height:100%;image-rendering:pixelated}
.scene>.talakai-ground-r34,.scene>.talakai-lights-r34{z-index:2}
.scene>svg,.scene>canvas{pointer-events:none}
.district.paused *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.district *{animation:none!important}}

:root{--r34-bottom-inner:96.843292%;--r34-bottom-three:97.632469%;--r34-bottom-two:98.421646%;--r34-bottom-one:99.210823%;}
/* Existing stepped black-edge grammar; new bottom bands start at source row859, below Kade's boots. One mask covers base and effects together. */
@media (forced-colors: none) {
  html, body, .district, .viewport { background: #000 !important; }
  .district, .viewport { border: 0; box-shadow: none; }
  .scene, #game-ecosystem-art {
    --r34-edge-x: linear-gradient(to right,
      transparent 0 .1127%, rgba(0,0,0,.25) .1127% .2255%,
      rgba(0,0,0,.5) .2255% .4509%, rgba(0,0,0,.75) .4509% .6764%,
      #000 .6764% 99.3236%, rgba(0,0,0,.75) 99.3236% 99.5491%,
      rgba(0,0,0,.5) 99.5491% 99.7745%, rgba(0,0,0,.25) 99.7745% 99.8873%,
      transparent 99.8873% 100%);
    --r34-edge-y: linear-gradient(to bottom,
      transparent 0 .2255%, rgba(0,0,0,.25) .2255% .4509%,
      rgba(0,0,0,.5) .4509% .6764%, rgba(0,0,0,.75) .6764% .9019%,
      #000 .9019% var(--r34-bottom-inner),
      rgba(0,0,0,.75) var(--r34-bottom-inner) var(--r34-bottom-three),
      rgba(0,0,0,.5) var(--r34-bottom-three) var(--r34-bottom-two),
      rgba(0,0,0,.25) var(--r34-bottom-two) var(--r34-bottom-one),
      transparent var(--r34-bottom-one) 100%);
    -webkit-mask-image: var(--r34-edge-x), var(--r34-edge-y);
    mask-image: var(--r34-edge-x), var(--r34-edge-y);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
}