html { --loading-green: #a5ff86; --accent: var(--loading-green); }
html[data-base="home"][data-world="B"] { --dark:#050707; background:#050707; }
html[data-base="home"] .scene-shade {
  background: linear-gradient(90deg,#02040470,transparent 40%,transparent 72%,#02040435),
    linear-gradient(0deg,#030505a0,transparent 28%,transparent 78%,#03050545);
}
html[data-base="home"] .texture {
  opacity: .12;
  background-image: radial-gradient(#050706 1.05px,transparent 1.15px);
  background-size: 4px 4px;
  mix-blend-mode: multiply;
  mask-image: radial-gradient(ellipse at 53% 46%, transparent 0 40%, #000 67%);
}
#scene-canvas { touch-action: none;z-index:0; }
html[data-base="home"][data-entry-ready="true"] #world { touch-action: pan-x pinch-zoom; }
#hero-foreground {
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  pointer-events:none;z-index:1;transform-origin:51.5% 45%;
  mask-image:url('./assets/reference/B-interior-mask.svg');
  -webkit-mask-image:url('./assets/reference/B-interior-mask.svg');
  mask-size:cover;-webkit-mask-size:cover;mask-position:center;-webkit-mask-position:center;
  mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;
}
#hero-foreground[hidden]{display:none}
html[data-world="B"][data-base="home"] .texture {opacity:0}
html[data-world="B"] #scene-canvas {transition:opacity .35s}
html[data-world="B"][data-base="home"] .scene-shade {z-index:2;background:linear-gradient(90deg,#02040435,transparent 34%,transparent 80%,#02040420)}
#scene-stage { background:#000;isolation:isolate;--home-plate-width:max(100vw,177.68vh); }
#explore-window {position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;}
#explore-window rect {pointer-events:none;}
html[data-base="home"][data-world="B"][data-entry-ready="true"] #explore-window rect {pointer-events:all;cursor:pointer;touch-action:manipulation;}
#scene-reveal {position:absolute;inset:0;z-index:0;pointer-events:none;background:#090909;}
html[data-base="home"][data-world="B"] #scene-reveal {
  mask-image:linear-gradient(#000,#000),url('./assets/reference/B-interior-mask.svg');
  mask-size:100% 100%,cover;mask-position:center;mask-repeat:no-repeat;mask-composite:exclude;
}
#scene-reveal canvas {
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
#scene-reveal[data-reveal="handoff"] {background:transparent;}
#scene-reveal[data-reveal="handoff"] + #load-status {opacity:0;}
html:not([data-base="home"]) #scene-reveal[data-reveal="handoff"] {visibility:hidden;}
.load-status {
  top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;
  width:min(86vw,calc(var(--home-plate-width) * .34));
  color:var(--loading-green);
  font:400 clamp(14px,min(4vw,calc(var(--home-plate-width) * .0155)),24px)/1.35 'Shrimp Departure Mono',monospace;
  letter-spacing:.04em;
  text-shadow:0 0 3px #000,0 1px 2px #000,0 0 8px #000;
  transition:opacity .25s;
}
.load-status #load-message {display:inline;font:inherit;animation:none;text-wrap:balance;}
.load-status #load-ellipsis {font-size:1em;margin-top:4px;}
#scene-reveal[data-reveal="error"] + #load-status #load-ellipsis {display:none;}
#retry-scene {
  pointer-events:auto;cursor:pointer;margin-top:.65em;padding:.35em .65em;
  border:1px solid currentColor;background:#090909;color:inherit;font:inherit;font-size:.75em;
}
@media (prefers-reduced-motion:reduce) {
  .load-status #load-ellipsis {animation:none;}
}
html[data-entry-ready="false"] #explore {visibility:hidden;pointer-events:none;}
html[data-base="scene"] #scene-canvas { cursor: grab; }
html[data-base="scene"] #scene-canvas.is-orbiting { cursor: grabbing; }
@media (max-aspect-ratio: 6/5) and (min-width: 601px) {
  html[data-base="home"][data-world="B"] #scene-stage {
    --home-plate-width:100vw;
    --home-inset: max(0px, calc((100% - 56.25vw) / 2));
    --home-edge: calc(var(--home-inset) * var(--home-frame, 1));
    /* Keep fractional raster edges of the foreground inside the stage crop. */
    clip-path: inset(calc((var(--home-inset) + 1px) * var(--home-frame, 1)) 0);
  }
  html[data-base="home"][data-world="B"] :is(#hero-foreground,#scene-reveal,#explore-window) {
    top: var(--home-inset); bottom: auto; height: 56.25vw;
  }
  html[data-base="home"][data-world="B"] #scene-stage:after {
    content: ''; position: absolute; inset: var(--home-edge) 0; pointer-events: none; opacity:var(--home-frame,1);
    background: linear-gradient(0deg,#050707,transparent 9%,transparent 91%,#050707);
  }
  html[data-base="home"] .scene-shade {
    background: linear-gradient(0deg,#020404ba,transparent 25%,transparent 70%,#02040485);
  }
}