/* cyberscape world "grid": the surroundings for a page built on the widgets. Optional. Adds a dark sky with
 * drifting stars, a neon floor grid, a framed viewport with corner brackets, a brand link, a readout
 * area at the bottom for the nav, and a row of gizmos bottom left. It also folds the chrome away
 * while a face fills the screen or a shelf shows more than one cube. Everything is a class
 * you can drop, and every colour comes from the same --scape-* tokens the widgets use. */

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body.scape-world {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(0, 255, 255, 0.12), transparent 60%),
    linear-gradient(180deg, #01070b 0%, var(--scape-deep) 55%, var(--scape-ink) 100%);
  color: var(--scape-text); font-family: var(--scape-font); font-weight: 500; font-size: 18px; line-height: 1.45;
  overflow: hidden; -webkit-font-smoothing: antialiased;
}
.scape-world a { color: var(--scape-neon); text-decoration: none; border-bottom: 1px solid var(--scape-neon-soft); }
.scape-world a:hover, .scape-world a:focus-visible { border-bottom-color: var(--scape-neon); text-shadow: 0 0 8px var(--scape-neon); }
.scape-world :focus-visible { outline: 2px solid var(--scape-neon); outline-offset: 3px; }
.scape-world h1, .scape-world h2, .scape-world h3 { font-family: var(--scape-display-font); letter-spacing: 1.5px; margin: 0; }

/* Stars */
.scape-stars, .scape-stars::before, .scape-stars::after {
  position: absolute; inset: 0; content: ""; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,0.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 80% 20%, rgba(255,255,255,0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 80%, rgba(255,255,255,0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 75% 45%, rgba(255,255,255,0.8) 50%, transparent 51%);
  animation: scape-drift 60s linear infinite; opacity: .8;
}
.scape-stars::before { filter: blur(1px); animation-duration: 90s; opacity: .6; }
.scape-stars::after { filter: blur(2px); animation-duration: 120s; opacity: .4; }
@keyframes scape-drift { from { transform: translateY(0); } to { transform: translateY(200px); } }

/* Floor grid receding under the widgets */
.scape-floor {
  position: fixed; left: -50vw; right: -50vw; bottom: -10vh; height: 60vh; pointer-events: none;
  background-image: linear-gradient(var(--scape-neon-faint) 1px, transparent 1px), linear-gradient(90deg, var(--scape-neon-faint) 1px, transparent 1px);
  background-size: 80px 80px; transform-origin: 50% 0; transform: perspective(600px) rotateX(72deg);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 70%, transparent 100%);
  opacity: .7;
}

/* Outer neon frame with corner brackets: <div class="scape-frame"><i></i><i></i><i></i><i></i></div> */
.scape-frame { position: fixed; inset: 22px; border: 1px solid rgba(0, 255, 255, 0.22); box-shadow: 0 0 20px rgba(0, 255, 255, 0.12) inset; pointer-events: none; }
.scape-frame i { position: absolute; width: 60px; height: 60px; }
.scape-frame i::before, .scape-frame i::after { content: ""; position: absolute; background: var(--scape-neon); box-shadow: 0 0 12px var(--scape-neon), 0 0 30px var(--scape-neon); }
.scape-frame i::before { width: 60px; height: 2px; }
.scape-frame i::after { width: 2px; height: 60px; }
.scape-frame i:nth-child(1) { top: -2px; left: -2px; } .scape-frame i:nth-child(1)::before, .scape-frame i:nth-child(1)::after { left: 0; top: 0; }
.scape-frame i:nth-child(2) { top: -2px; right: -2px; } .scape-frame i:nth-child(2)::before, .scape-frame i:nth-child(2)::after { right: 0; top: 0; }
.scape-frame i:nth-child(3) { bottom: -2px; left: -2px; } .scape-frame i:nth-child(3)::before, .scape-frame i:nth-child(3)::after { left: 0; bottom: 0; }
.scape-frame i:nth-child(4) { bottom: -2px; right: -2px; } .scape-frame i:nth-child(4)::before, .scape-frame i:nth-child(4)::after { right: 0; bottom: 0; }

.scape-brand { position: fixed; top: 40px; left: 44px; font: 600 14px var(--scape-display-font); letter-spacing: 1.5px; color: var(--scape-neon); text-shadow: 0 0 10px var(--scape-neon); z-index: 3; }

/* The shelf fills the window with room for the readout below */
.scape-world scape-shelf { position: fixed; inset: 0; padding-bottom: 110px; --scape-shelf-margin: 64px; }
.scape-world scape-cube { --scape-size: min(62vmin, 560px, calc((100svh - 250px) / 1.12)); --scape-expand-top: 92px; --scape-expand-bottom: 120px; }

/* Readout at the bottom: the default cube's nav and a hint. Other cubes' navs (class scape-second) take
   the same spot when they stand alone; a shelf showing several moves every nav under its cube. */
.scape-readout { position: fixed; left: 0; right: 0; bottom: 40px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; transition: opacity .4s; }
.scape-readout > * { pointer-events: auto; }
.scape-hint { font-size: 14px; color: var(--scape-muted); }
.scape-world scape-nav.scape-second { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 3; }
.scape-world scape-gizmo { position: fixed; left: 48px; bottom: 30px; z-index: 3; }
.scape-world scape-gizmo.scape-second { left: 158px; }
.scape-world scape-gizmo.scape-third { left: 268px; }
.scape-world scape-gizmo::part(label) { font-size: 11px; letter-spacing: 2px; }

/* Fold the chrome away while a face fills the screen or a shelf shows several cubes */
body.scape-world:has(scape-cube[expanded]) scape-gizmo { opacity: 0; pointer-events: none; }
body.scape-world:has(scape-cube[expanded]) .scape-hint { display: none; }
body.scape-world:has(scape-shelf[multi]) .scape-hint, body.scape-world:has(.scape-readout scape-nav[dormant]) .scape-hint { visibility: hidden; }

/* Phones: no frame, no gizmo, no hint, faces fill the screen (pair with always-expanded on the cube) */
@media (max-width: 720px) {
  .scape-world scape-cube { --scape-size: min(82vmin, 520px); --scape-expand-top: 80px; --scape-expand-bottom: 110px; }
  .scape-world scape-face::part(expand) { display: none; }
  .scape-brand { top: 34px; left: 36px; font-size: 12px; }
  .scape-frame, .scape-world scape-gizmo, .scape-hint { display: none; }
  .scape-readout, .scape-world scape-nav.scape-second { bottom: 28px; }
  .scape-world scape-nav::part(name) { font-size: 12px; min-width: 110px; letter-spacing: 3px; }
  .scape-world scape-nav::part(tab) { font-size: 9px; letter-spacing: 1.5px; }
  body.scape-world { font-size: 16px; }
  .scape-world scape-face::part(header) { margin: 0 18px; padding: 14px 0 8px; }
  .scape-world scape-face::part(body) { padding: 10px 18px 18px; }
}
@media (max-width: 1100px) and (min-width: 721px) { .scape-world scape-nav.scape-second::part(name) { min-width: 100px; } }
@media (prefers-reduced-motion: reduce) { .scape-world scape-cube { --scape-turn: 250ms; } .scape-stars, .scape-stars::before, .scape-stars::after { animation: none; } }