/*
 * Magic16 — base: reset, the black "desktop", the Win98 app-window skeleton,
 * a taskbar spacer, and accessibility. The starry-night canvas sits behind
 * everything; the window floats on the desktop; a taskbar is fixed at the bottom.
 */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  /* the title bar + navbar are sticky: anything scrolled into view (anchors, keyboard focus,
     Layers → element) stops BELOW the whole chrome stack rather than underneath it */
  scroll-padding-top: calc(var(--title-h, 32px) + var(--menubar-h, 36px) + 8px); }
/* The page's real scroll container is the document (the app window grows with content
   and the body scrolls). During a Fluid transition #content's height is animated; without
   this, Chrome's scroll-anchoring would try to "keep content stable" by compensating the
   scroll offset, which visibly shoves the Magic16 window off the top of the viewport. The
   shell's viewport Y must stay pinned across navigation, so anchoring is disabled here and
   on the content well. */
html, body, .app, .content { overflow-anchor: none; }

body {
  min-height: 100vh;
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  line-height: 1.35;
  color: var(--ink);
  background: #000;   /* the .stars-bg layer (parallaxing gif) + canvas paint the sky */
  overflow-x: hidden;
}
/* Chrome (titlebars/menus/buttons/labels/pixel headings) = crisp MS Sans/pixel. */
.win__title, .menu-item, .cap-btn, .btn, .lozenge, .panel__title, .win__status,
.kicker, .g97-title, .neon-pill, .fn, .props__chip { font-family: var(--font-ui); }
.pixel, .brandmark, .dsi__name, .slamm-title { -webkit-font-smoothing: none; }

img { max-width: 100%; height: auto; display: block; }
.pixelated, #wallpaper, .pixel-img { image-rendering: pixelated; }

a { color: var(--link); }
a:visited { color: var(--link-visited); }

/* -- Desktop: centers the app window on the starry background -- */
.app {
  --app-pad-t: 26px; --app-pad-b: 40px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--app-pad-t) 20px var(--app-pad-b);
  position: relative;
}

/* -- The Win98 application window --
   RESPONSIVE: a bounded-fluid width (clamp) that stays compact on phones/tablets and grows
   on desktop, capped so a huge display doesn't strand a tiny window in dead space. The
   window is CONTENT-SIZED in height (flex:0 0 auto) — it fits its page + a little ocean
   breathing room (see .content min-height), instead of stretching to fill the viewport and
   leaving hundreds of px of empty water. Width is JS-animated on discrete size changes
   (shell-resize.js); the clamp tracks live during a continuous drag. */
.window {
  /* Larger large-display envelope so the (now design-scaled) UI has room: ~86vw growing to a
     1560px cap — a generous window on big screens while the starfield still frames it. */
  /* `min(…, 100%)` is load-bearing, not belt-and-braces. `vw` INCLUDES the vertical
     scrollbar, and the clamp's 340px floor can exceed a small phone's usable width
     outright — so on a 320px viewport (303px of usable client area once the scrollbar
     is taken) the window computed 312px and pushed 13px of horizontal scroll. `100%`
     resolves against .app's content box, which excludes the scrollbar, so the window
     can never be wider than the space it is actually in. */
  width: min(clamp(340px, 86vw, 1560px), 100%);
  /* TOP-aligned (margin:0 auto), NOT vertically centred: the navbar must sit at a constant
     viewport Y across pages of different heights (hard invariant + the choreography anchor
     guard). The window grows in width and is content-sized in height; the starfield frames
     it as atmosphere. Centring is intentionally avoided — it would move the navbar when the
     page height changes on navigation. */
  margin: 0 auto;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--face);
  /* raised 4-colour double bevel + drop shadow (Geo97 recipe) */
  border: 2px solid;
  border-color: var(--hilite) var(--dkshadow) var(--dkshadow) var(--hilite);
  box-shadow: inset 1px 1px 0 var(--light), inset -1px -1px 0 var(--shadow), var(--shadow-win);
  padding: 3px;
}

.win__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-top: 3px;
  /* sunken content well */
  background: var(--well);
  border: 2px solid;
  border-color: var(--shadow) var(--hilite) var(--hilite) var(--shadow);
}

.content {
  flex: 1 1 auto;
  /* Content-aware ocean stage: a tasteful minimum so a one-panel page still has breathing
     room, but the resting height is driven by the actual content (a page with more panels
     is naturally taller) — never a fixed slab of empty water on a tall screen. */
  min-height: clamp(160px, 26vh, 340px);
  overflow-y: auto;
  padding: calc(clamp(18px, 2vw, 32px) * var(--m16-scale));
  /* Ocean surface — every page sits on the same water background, consistently.
     Content lives in Win98 panel modules (opaque bodies) so text stays readable
     on top; the ocean shows in the gaps between modules. */
  background: #bfe4ec url("../../public/graphics/imported/water.gif") repeat;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
}
/* Smooth (never pixelated) rendering for photographic / character art. */
.ico__img, .props__standee, .vthumb img, .vplayer__poster img, .worldbanner__img { image-rendering: auto; }
/* Readable body prose (Verdana) — the pixel font is too small for paragraphs. */
.content p, .content li, .content dd, .lede, .props__blurb, .vplayer__desc, .work__title, .facts dd {
  font-family: var(--font-body);
}
.content p { font-size: var(--fs-body); }
/* Prose reading column: on a wide panel, keep paragraph line length sensible (~72ch) instead
   of one 180-character line. Visual/gallery/carousel content is exempt and uses the full width. */
.content p, .content li, .content dd, .lede { max-width: 74ch; }

.stack > * + * { margin-top: var(--pad-6); }

/* Headings */
h1, h2, h3 { line-height: 1.1; }
.page-title { font-family: var(--font-ui); font-weight: 700; font-size: var(--h2); color: var(--ink); }
.lede { font-size: var(--lede); color: var(--ink-soft); max-width: 62ch; line-height: 1.5; }

/* -- Accessibility -- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 4px 10px; background: #000; color: var(--lime); font-family: var(--font-ui);
}
.skip-link:focus { left: 0; }

/* KEYBOARD FOCUS RING. A single dotted BLACK outline is invisible on the site's dark
 * surfaces — the video poster sits on a #000 stage and the character portrait on the
 * deep-space stage, so tabbing to either showed nothing at all (audit E004).
 *
 * The fix is a DUAL ring that cannot depend on the surface being light: a dark inner
 * outline plus a white outer box-shadow halo. One of the two always contrasts,
 * whatever it lands on, and the pair still reads as a period-correct dotted Win98
 * focus rect rather than a modern glow. `currentColor` is deliberately NOT used —
 * that is exactly how a focus ring goes invisible on a surface that also sets colour.
 */
:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 2px dotted #000;
  outline-offset: 1px;
  box-shadow: 0 0 0 1px #fff, 0 0 0 4px rgba(0, 0, 0, 0.55);
}
/* On an explicitly dark surface, invert the pair so the bright half is innermost. */
:root[data-mode="dark"] :where(a, button, input, select, [tabindex]):focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 1px #000, 0 0 0 4px rgba(255, 255, 255, 0.5);
}

.noscript-note {
  margin: 16px; padding: 12px; background: var(--face);
  border: 2px solid; border-color: var(--hilite) var(--dkshadow) var(--dkshadow) var(--hilite);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}