/* The demo origin's own stylesheet — the landing page, plus the controls the transform injects
   into the 3D view. It is NOT the game's style.css: that file belongs to pages this image does
   not contain, and shipping it would carry the look of nine screens nobody can reach. The
   palette is copied deliberately, so the landing and the view read as one product.

   It lives in `assets/` and NOT in `site/`, because `render-demo.mjs` wipes `site/` on every
   run — which it did, once, to this exact file. Generated output and hand-written files do not
   share a directory. */
:root {
  --bg: #04080e; --panel: #0a1420; --line: #16293c;
  --ink: #dbe7f2; --faint: #8ba3ba; --accent: #5fd8dc;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
main { max-width: 780px; margin: 0 auto; padding: 56px 22px 80px; }

/* The language switcher. Plain links and no JavaScript at all: this page exists to be read by
   somebody who may not be able to read the language it opened in, so the one control that fixes
   that must not depend on a script loading. Five short names wrap on a phone rather than
   scrolling sideways, and each is a 44px target on a coarse pointer. */
.langs {
  display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center;
  max-width: 780px; margin: 0 auto; padding: 14px 22px 0;
  font-size: 14px; color: var(--faint);
}
.langs a, .langs span {
  padding: 8px 10px; border-radius: 7px; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 36px;
}
.langs a { color: var(--faint); border: 1px solid transparent; }
.langs a:hover { color: var(--ink); border-color: var(--line); }
/* The current language is stated, not offered — and it is marked by more than colour, so it
   still reads for somebody who cannot distinguish the two. */
.langs span[aria-current] { color: var(--ink); background: var(--panel); font-weight: 600; }
@media (pointer: coarse) { .langs a, .langs span { min-height: 44px; } }
h1 { font-size: clamp(28px, 5vw, 40px); line-height: 1.15; margin: 0 0 18px; }
h2 { font-size: 20px; margin: 40px 0 10px; color: var(--accent); }
.lede { font-size: 18px; color: var(--faint); }
ul { padding-left: 20px; } li { margin: 10px 0; }
b { color: #fff; }
a { color: var(--accent); }
.cta {
  display: inline-block; margin: 14px 14px 0 0; padding: 13px 20px; border-radius: 9px;
  background: var(--accent); color: #04121a; font-weight: 700; text-decoration: none;
  min-height: 44px; line-height: 1.3;         /* 44px of target on a coarse pointer */
}
.plain { display: inline-block; margin-top: 14px; padding: 13px 0; }

/* ── The controls injected into view.html ─────────────────────────────────── */
/* A NOTE, not a modal: a stranger's first act on this page must not be dismissing something.
   Fixed, so it survives the 3D view's own scrolling panels, and inset-aware because an
   installed-app-style top bar otherwise sits under a phone's status bar. */
#demoBar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap;
  padding: 8px calc(12px + env(safe-area-inset-right)) 8px calc(12px + env(safe-area-inset-left));
  padding-top: calc(8px + env(safe-area-inset-top));
  background: rgba(10, 20, 32, .92); border-bottom: 1px solid var(--line);
  font-size: 14px; color: var(--faint);
}
#demoBar a { color: var(--accent); font-weight: 700; text-decoration: none; }
.demo-nav .demo-cta {
  background: var(--accent); color: #04121a !important; font-weight: 700;
  border-radius: 8px; padding: 10px 12px; margin-bottom: 6px;
}
/* The refusal a visitor meets when they try to act: one sentence, one way forward. */
#demoWall {
  position: fixed; z-index: 60; left: 50%; bottom: 22px; transform: translateX(-50%);
  max-width: min(520px, calc(100vw - 24px));
  padding: 14px 18px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--accent); color: var(--ink);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .6); font-size: 15px;
}
#demoWall a { font-weight: 700; }
#demoWall[hidden] { display: none; }