/* ============================================================
   island.css: Small Forces, on its own.

   The tokens are copied from the site (site/css/tokens.css) so the
   island reads as part of the same house. The fonts are the site's
   own files, by the site's own addresses (/fonts/...): on the
   website (site/play/) the browser already has them from the
   site's pages, and nothing is downloaded twice; the copies in
   small-forces/fonts/ serve the standalone test page only and are
   never exported.
   ============================================================ */

@font-face { font-family: "Gloock"; src: url("/fonts/gloock-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Crimson Pro"; src: url("/fonts/crimson-pro-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Crimson Pro"; src: url("/fonts/crimson-pro-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/fonts/instrument-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/fonts/instrument-sans-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* the site's Chinese serif, for 金 in the way back to the site: only ever draws Chinese (unicode-range) */
@font-face { font-family: "LK Song"; src: url("/fonts/noto-serif-sc-900.woff2") format("woff2"); font-weight: 800 900; font-display: swap; unicode-range: U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF; }

:root {
  --velvet-950: #120405;
  --velvet-900: #1B070A;
  --velvet: #2A1015;
  --velvet-700: #3A1A1F;
  --velvet-600: #4B262B;
  --warm: #F7EFE4;
  --warm-muted: rgba(247, 239, 228, 0.72);
  --warm-faint: rgba(247, 239, 228, 0.46);
  --gold: #D4A853;
  --gold-bright: #EACB86;
  --gold-line: rgba(212, 168, 83, 0.34);
  --gold-glow: rgba(234, 203, 134, 0.26);
  --sky: #9CC7EC;
  --sky-line: rgba(156, 199, 236, 0.46);
  --sky-wash: rgba(156, 199, 236, 0.1);
  --font-display: "Gloock", "Bodoni 72", "Didot", "Georgia", serif;
  --font-text: "Crimson Pro", "Iowan Old Style", "Palatino", "Georgia", serif;
  --font-ui: "Instrument Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  --ease-grace: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-ui: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--velvet-900); color: var(--warm); }
body { font-family: var(--font-text); -webkit-font-smoothing: antialiased; overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 22px; border-radius: 999px;
  border: 1px solid rgba(247, 239, 228, 0.22);
  font: 700 0.95rem/1 var(--font-ui); letter-spacing: 0.02em; color: var(--warm); text-decoration: none;
  background: rgba(247, 239, 228, 0.04);
  transition: transform 420ms var(--ease-ui), border-color 420ms var(--ease-ui), background-color 420ms var(--ease-ui);
}
.btn:active { transform: translateY(1px) scale(0.985); }
.btn--gold { color: var(--velvet-900); background: linear-gradient(180deg, var(--gold-bright), var(--gold)); border-color: transparent; box-shadow: 0 14px 40px -18px rgba(234, 203, 134, 0.8); }
.btn--sky { color: var(--sky); border-color: var(--sky-line); background: var(--sky-wash); }
@media (hover: hover) and (pointer: fine) {
  .btn--sky:hover { border-color: var(--sky); }
  .btn--gold:hover { transform: translateY(-1px); }
}

/* ---------------- the way back to the site: the site's own home link (site/css/base.css .homelink) ---------------- */
.sitelink {
  position: fixed; top: max(14px, env(safe-area-inset-top)); left: var(--gutter); z-index: 3;
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 6px 16px 6px 8px; margin-left: -8px; border-radius: 999px;
  color: var(--warm); text-decoration: none;
  transition: background-color 550ms var(--ease-ui);
}
/* his mark, World Builder (2 October 2026), the same as the site's (site/img/lk-mark.webp, made by its tools/logo.py from his own logo file) */
.sitelink__mark { width: 40px; height: 40px; margin: -4px 0; filter: drop-shadow(0 4px 10px rgba(212, 168, 83, 0.28)); }
.sitelink__name { font: 400 1.08rem/1 var(--font-display); letter-spacing: 0.01em; }
@media (hover: hover) and (pointer: fine) { .sitelink:hover { background: rgba(247, 239, 228, 0.07); } }

/* ---------------- the entry screen ---------------- */
.entry {
  position: fixed; inset: 0; display: grid; place-items: center; padding: var(--gutter);
  background:
    radial-gradient(120% 80% at 50% 100%, rgba(217, 128, 74, 0.28), transparent 60%),
    radial-gradient(90% 70% at 50% 35%, var(--velvet-600), var(--velvet-900) 70%);
  transition: opacity 900ms var(--ease-grace), visibility 0s linear 900ms;
}
.entry.is-gone { opacity: 0; visibility: hidden; }
.entry__inner { width: min(640px, 100%); display: grid; justify-items: center; text-align: center; gap: 18px; }
.entry__shot {
  width: min(560px, 100%); aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden;
  background: radial-gradient(70% 60% at 50% 62%, #7a3b2c, #2A1015 72%);
  box-shadow: 0 60px 100px -40px rgba(18, 0, 3, 0.95), 0 0 0 1px rgba(234, 203, 134, 0.2);
}
.entry__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.entry__title { margin: 8px 0 0; font: 400 clamp(2.6rem, 1.6rem + 4vw, 4.6rem)/1 var(--font-display); letter-spacing: -0.01em; }
.entry__sub { margin: 0; font: italic 400 clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem)/1.35 var(--font-text); color: var(--warm-muted); }
.entry__how { margin: 0; font: 400 0.9rem/1.5 var(--font-ui); color: var(--warm-faint); letter-spacing: 0.02em; }
.entry__go { margin-top: 6px; }
.entry__load { width: 160px; height: 2px; border-radius: 2px; background: rgba(234, 203, 134, 0.18); overflow: hidden; opacity: 0; transition: opacity 400ms var(--ease-ui); }
.entry__load::after { content: ""; display: block; width: 40%; height: 100%; background: var(--gold-bright); animation: load 1.2s var(--ease-grace) infinite; }
.entry.is-loading .entry__load { opacity: 1; }
.entry.is-loading .entry__go { opacity: 0.5; pointer-events: none; }
@keyframes load { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.entry__facts { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; text-align: left; font: 400 1.1rem/1.45 var(--font-text); color: var(--warm-muted); }
.entry__facts li::before { content: "·"; color: var(--gold); margin-right: 10px; }

/* ---------------- the island ---------------- */
.stage { position: fixed; inset: 0; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; outline: none; }
.stage canvas { display: block; width: 100%; height: 100%; }
.stage[hidden] { display: none; }
/* the realistic island: built behind the instant one, then faded in over it */
.hifi { position: fixed; inset: 0; opacity: 0; pointer-events: none; transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1); }
.hifi.is-on { opacity: 1; pointer-events: auto; }
.hifi canvas { display: block; width: 100%; height: 100%; outline: none; }
.hud[hidden] { display: none; }

.hud { position: absolute; inset: 0; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud__top {
  position: absolute; top: max(14px, env(safe-area-inset-top)); left: var(--gutter); right: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; pointer-events: none;
}
.hud__top > * { pointer-events: auto; }
.hud__leave { min-height: 42px; padding: 0 16px; font-size: 0.86rem; color: #fff; border: 0; }
.hud__leave svg { width: 14px; height: 14px; }

.hud__sound svg { width: 18px; height: 18px; }
.hud__dots { display: flex; gap: 9px; padding: 11px 15px; border-radius: 999px; pointer-events: none; }
.hud__dots span { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--gold-line); transition: background-color 900ms var(--ease-grace), border-color 900ms var(--ease-grace), box-shadow 900ms var(--ease-grace); }
.hud__dots span.is-done { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 12px var(--gold-glow); }

.hud__bottom {
  position: absolute; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom));
  display: grid; justify-items: center; gap: 10px; padding: 0 var(--gutter); pointer-events: none;
}
.prompt {
  font: 700 0.92rem/1.2 var(--font-ui); letter-spacing: 0.02em; color: var(--warm);
  padding: 10px 16px; border-radius: 999px; background: rgba(27, 7, 10, 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--gold-line);
  opacity: 0; transform: translateY(8px); transition: opacity 500ms var(--ease-grace), transform 500ms var(--ease-grace);
}
.prompt.is-on { opacity: 1; transform: none; }
.prompt kbd { font: inherit; color: var(--gold-bright); }

.caption {
  width: min(620px, 100%); padding: 16px 20px 18px; border-radius: 18px;
  background: rgba(27, 7, 10, 0.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(247, 239, 228, 0.12);
  opacity: 0; transform: translateY(12px); transition: opacity 900ms var(--ease-grace), transform 900ms var(--ease-grace);
}
.caption.is-on { opacity: 1; transform: none; }
.caption__who { margin: 0 0 6px; font: 700 0.68rem/1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.caption__line { margin: 0; font: italic 400 clamp(1.08rem, 1rem + 0.4vw, 1.3rem)/1.4 var(--font-text); color: var(--warm); }
.caption__fact { margin: 10px 0 0; font: 400 0.9rem/1.5 var(--font-ui); color: var(--warm-muted); opacity: 0; transition: opacity 900ms var(--ease-grace) 900ms; }
.caption.is-on .caption__fact { opacity: 1; }
.caption__fact:empty { display: none; }
.caption.is-note .caption__who { display: none; }
.caption.is-note .caption__line { font: 400 0.98rem/1.45 var(--font-ui); font-style: normal; color: var(--warm-muted); }

.holdbtn {
  position: absolute; right: max(20px, env(safe-area-inset-right)); bottom: max(28px, env(safe-area-inset-bottom));
  width: 88px; height: 88px; border-radius: 50%;
  display: grid; place-items: center;
  font: 700 0.9rem/1 var(--font-ui); letter-spacing: 0.04em; color: var(--velvet-900);
  background: radial-gradient(circle at 50% 35%, var(--gold-bright), var(--gold) 70%);
  box-shadow: 0 16px 40px -14px rgba(234, 203, 134, 0.8);
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  opacity: 0; transform: scale(0.8); pointer-events: none;
  transition: opacity 400ms var(--ease-ui), transform 400ms var(--ease-ui);
}
.holdbtn.is-on { opacity: 1; transform: none; pointer-events: auto; }
.holdbtn.is-held { transform: scale(0.94); }
.holdbtn::before {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  background: conic-gradient(var(--warm) calc(var(--p, 0) * 1turn), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}
.stage:not(.is-touch) .holdbtn { display: none; }
.stage.is-touch .hud__bottom { padding-right: 120px; padding-left: var(--gutter); justify-items: start; }

/* the look button (his ask, 4 October 2026, the Apple design feel): press, hold and drag it to look around; let go
   and the view swings back behind Jarvis. Dark frosted glass (.glass) with its bright rim; held, it gives (0.97),
   glows sky blue, and a small dot inside follows the drag like a thumbstick. Its words show for the first seconds
   on the island, then only on hover or focus. */
.lookpad {
  position: absolute; right: var(--gutter); bottom: max(26px, env(safe-area-inset-bottom));
  width: 52px; height: 52px; border-radius: 50%; padding: 0;
  display: grid; place-items: center;
  cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: transform 500ms cubic-bezier(0.34, 1.36, 0.5, 1), box-shadow 300ms var(--ease-ui);
}
.lookpad svg { position: relative; z-index: 1; width: 24px; height: 24px; transition: opacity 250ms var(--ease-ui); }
.lookpad__nub {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--sky); box-shadow: 0 0 12px rgba(156, 199, 236, 0.85);
  opacity: 0; transition: opacity 250ms var(--ease-ui), transform 500ms cubic-bezier(0.34, 1.36, 0.5, 1);
}
.lookpad.is-held {
  --glass-bg: rgba(156, 199, 236, 0.26); cursor: grabbing; transform: scale(0.97);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 0 0 3px rgba(156, 199, 236, 0.32), 0 18px 50px -18px rgba(0, 0, 0, 0.55);
}
.lookpad.is-held svg { opacity: 0.3; }
.lookpad.is-held .lookpad__nub { opacity: 1; transition: opacity 150ms var(--ease-ui); }
.lookpad:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
.lookpad__tip {
  position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  white-space: nowrap; padding: 8px 12px; border-radius: 999px; pointer-events: none;
  font: 600 0.76rem/1 var(--font-ui); letter-spacing: 0.02em; color: #fff;
  background: rgba(18, 22, 28, 0.55); border: 1px solid rgba(255, 255, 255, 0.18);
  transition: opacity 600ms var(--ease-ui), transform 600ms var(--ease-ui);
}
.lookpad.is-quiet .lookpad__tip, .lookpad.is-held .lookpad__tip { opacity: 0; transform: translate(6px, -50%); }
@media (hover: hover) and (pointer: fine) {
  .lookpad:hover { transform: scale(1.06); }
  .lookpad.is-held:hover { transform: scale(0.97); }
  .lookpad.is-quiet:not(.is-held):hover .lookpad__tip { opacity: 1; transform: translateY(-50%); }
}
.lookpad.is-quiet:focus-visible .lookpad__tip { opacity: 1; transform: translateY(-50%); }
/* phones: a little larger, above where the gold button appears, clear of the thumb that walks */
.stage.is-touch .lookpad { width: 56px; height: 56px; right: max(36px, calc(env(safe-area-inset-right) + 16px)); bottom: calc(max(28px, env(safe-area-inset-bottom)) + 104px); }
@media (prefers-reduced-motion: reduce) { .lookpad, .lookpad__nub, .lookpad__tip { transition-duration: 150ms; } }

/* a ring under the thumb while steering */
.steer { position: absolute; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; border: 1px solid rgba(247, 239, 228, 0.3); pointer-events: none; opacity: 0; transition: opacity 250ms var(--ease-ui); }
.steer.is-on { opacity: 1; }
.stage:not(.is-touch) .steer.is-on { opacity: 0.7; }
.steer i { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: rgba(247, 239, 228, 0.22); }

/* the prompt fills with gold while you hold */
.prompt { background-image: linear-gradient(90deg, rgba(212, 168, 83, 0.4) calc(var(--p, 0) * 100%), transparent 0); }

/* ---------------- the card ---------------- */
.card {
  position: absolute; inset: 0; display: grid; place-items: center; padding: var(--gutter);
  background: rgba(18, 4, 5, 0.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transition: opacity 900ms var(--ease-grace), visibility 0s linear 900ms;
  overflow-y: auto; touch-action: pan-y;
}
.card.is-on { opacity: 1; visibility: visible; transition: opacity 900ms var(--ease-grace), visibility 0s; }
.card__panel {
  width: min(520px, 100%); padding: clamp(22px, 4vw, 34px); border-radius: 24px;
  background: linear-gradient(180deg, var(--velvet-700), var(--velvet));
  border: 1px solid rgba(234, 203, 134, 0.2); box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.9);
  display: grid; gap: 16px;
}
.card__title { margin: 0; font: 400 clamp(1.7rem, 1.3rem + 1.5vw, 2.3rem)/1.1 var(--font-display); }
.card__list { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.card__opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(247, 239, 228, 0.14); cursor: pointer; font: italic 400 1.15rem/1.3 var(--font-text); transition: border-color 400ms var(--ease-ui), background-color 400ms var(--ease-ui); }
.card__opt input { accent-color: var(--gold); width: 18px; height: 18px; margin: 0; }
.card__opt:has(input:checked) { border-color: var(--gold); background: rgba(212, 168, 83, 0.08); }
.card__row { display: flex; flex-wrap: wrap; gap: 10px; }
.card__img { display: block; width: auto; max-width: 100%; height: auto; max-height: min(52vh, 560px); margin: 0 auto; border-radius: 14px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9); }
.card__hint { margin: 0; font: 400 0.86rem/1.4 var(--font-ui); color: var(--warm-faint); }
.card__done[hidden], .card__pick[hidden] { display: none; }

@media (max-width: 560px) {
  .caption { padding: 13px 16px 15px; }
  .hud__dots { padding: 8px 11px; gap: 7px; }
  .hud__leave span { display: none; }
  .hud__leave { width: 42px; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 200ms !important; animation-duration: 1ms !important; }
}

/* ---------------- the visitor's controls: liquid glass (1 October 2026) ----------------
   Every control sits on the same glass (.glass, below): the tool buttons, the Menu pill, the zoom scale,
   the hours, the map and the menu card. The look of light bending at the rim follows Apple's Liquid Glass
   and dashersw/liquid-glass-js (MIT), done here in CSS alone so nothing more loads. */
.hud__tools { display: flex; gap: 8px; pointer-events: auto; align-items: center; }
.hud__tool, .hud__sound { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: transform 300ms var(--ease-ui), background-color 300ms var(--ease-ui); }
.hud__tool svg, .hud__sound svg { width: 20px; height: 20px; }
.hud__menu { height: 42px; padding: 0 16px 0 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font: 600 0.88rem/1 var(--font-ui); letter-spacing: 0.01em; cursor: pointer; }
.hud__menu svg { width: 18px; height: 18px; }
.hud__tool[aria-expanded="true"], .hud__menu[aria-expanded="true"] { --glass-bg: rgba(255, 255, 255, 0.28); }
@media (hover: hover) and (pointer: fine) { .hud__tool:hover, .hud__menu:hover, .hud__sound:hover { transform: scale(1.06); } }
.hud__hours { position: absolute; top: 66px; right: var(--gutter); display: flex; gap: 4px; padding: 5px; border-radius: 999px; }
.hud__hours[hidden], .hud__map[hidden], .jarvis[hidden], .menu[hidden] { display: none; }
.hud__hours button { font: 600 0.82rem/1 var(--font-ui); color: #fff; border-radius: 999px; padding: 10px 14px; cursor: pointer; transition: background-color 250ms var(--ease-ui), color 250ms var(--ease-ui); }
.hud__hours button:hover { background: rgba(255, 255, 255, 0.14); }
.hud__hours button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.92); color: #11151b; }

/* the zoom scale: a column of stops on the right edge, the chosen one lifted out in white */
.hud__zoom { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); display: grid; gap: 2px; padding: 5px; border-radius: 26px; }
.hud__zoom button { width: 42px; height: 34px; border-radius: 17px; font: 600 0.76rem/1 var(--font-ui); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.86); cursor: pointer; transition: background-color 250ms var(--ease-ui), color 250ms var(--ease-ui), transform 250ms var(--ease-ui); }
.hud__zoom button:hover { background: rgba(255, 255, 255, 0.14); }
.hud__zoom button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.94); color: #11151b; transform: scale(1.06); }
.stage.is-touch .hud__zoom { top: 42%; }

/* the map */
.hud__map { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(6, 10, 14, 0.32); }
.hud__mapcard { border-radius: 28px; padding: 18px 18px 14px; max-width: min(92vw, 480px); }
.hud__mapcard canvas { display: block; width: min(80vw, 440px); height: auto; aspect-ratio: 1; border-radius: 16px; }
.hud__maptitle { margin: 0 0 12px; font: 400 1.35rem/1.1 var(--font-display); color: #fff; }
.hud__maphelp { margin: 12px 0 0; font: 400 0.8rem/1.45 var(--font-ui); color: rgba(255, 255, 255, 0.74); }

/* the menu card: every control, written out */
.menu { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: var(--gutter); background: rgba(6, 10, 14, 0.36); overflow-y: auto; animation: menu-in 420ms var(--ease-grace); }
@keyframes menu-in { from { opacity: 0; } }
.menu__card { --glass-bg: rgba(16, 20, 26, 0.56); width: min(820px, 100%); padding: clamp(20px, 3.4vw, 32px); border-radius: 32px; display: grid; gap: 14px; animation: menu-card 520ms var(--ease-grace); }
@keyframes menu-card { from { transform: translateY(14px) scale(0.98); opacity: 0; } }
.menu__kicker { margin: 0; font: 700 0.7rem/1 var(--font-ui); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); }
.menu__title { margin: -4px 0 2px; font: 400 clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem)/1.1 var(--font-display); color: #fff; }
.menu__part { display: grid; gap: 6px; }
.menu__head { margin: 6px 0 2px; font: 700 0.72rem/1 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.58); }
.menu__list { margin: 0; display: grid; gap: 2px 28px; }
@media (min-width: 760px) { .menu__list { grid-template-columns: 1fr 1fr; } .menu__row:nth-child(2) { border-top: 0; } }
.menu__row { display: grid; grid-template-columns: 104px 1fr; gap: 12px; align-items: center; padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, 0.09); }
.menu__row:first-child { border-top: 0; }
.menu__row dt { display: flex; flex-wrap: wrap; gap: 5px; }
.menu__row dd { margin: 0; font: 400 0.86rem/1.38 var(--font-ui); color: rgba(255, 255, 255, 0.88); }
.menu kbd { display: inline-grid; place-items: center; min-width: 28px; height: 26px; padding: 0 8px; border-radius: 8px; font: 600 0.76rem/1 var(--font-ui); color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08)); border: 1px solid rgba(255, 255, 255, 0.26); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 6px -2px rgba(0, 0, 0, 0.4); }
.menu__note { margin: 4px 0 0; font: italic 400 1.02rem/1.4 var(--font-text); color: rgba(255, 255, 255, 0.82); }
.menu__close { justify-self: start; color: #11151b; background: rgba(255, 255, 255, 0.94); border-color: transparent; }
@media (max-width: 560px) { .menu__row { grid-template-columns: 1fr; gap: 6px; } .hud__menu span { display: none; } .hud__menu { width: 42px; padding: 0; justify-content: center; } }
/* while the mouse is captured for looking, the HUD stays out of the way */
.stage.is-looking .hud__top, .stage.is-looking .hud__zoom { opacity: 0.55; }
/* Jarvis's house, inside (js/island/house.js): its own canvas over the island, a glass card that invites
   people to have a Jarvis built, a way back out */
.hud.is-inside > *:not(.caption) { opacity: 0; pointer-events: none; }
.house { position: absolute; inset: 0; z-index: 4; }
.house__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.house__fade { position: absolute; inset: 0; background: #05080b; pointer-events: none; opacity: 1; transition: opacity 900ms var(--ease-grace); }
.house.is-on .house__fade { opacity: 0; }
.house.is-leaving .house__fade { opacity: 1; transition-duration: 600ms; }
.house__back { position: absolute; top: max(14px, env(safe-area-inset-top)); left: var(--gutter); min-height: 42px; padding: 0 18px; font-size: 0.86rem; color: #fff; border: 0; }
.house__hint { position: absolute; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); margin: 0; padding: 10px 16px; border-radius: 999px; font: 600 0.8rem/1.3 var(--font-ui); white-space: nowrap; max-width: calc(100% - 220px); overflow: hidden; text-overflow: ellipsis; animation: house-hint 9s var(--ease-ui) forwards; }
@keyframes house-hint { 0%, 80% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
.house__card { position: absolute; right: var(--gutter); bottom: max(20px, env(safe-area-inset-bottom)); width: min(380px, calc(100% - 2 * var(--gutter))); padding: 20px 22px 20px; border-radius: 26px; display: grid; gap: 8px; transition: transform 500ms var(--ease-grace); }
.house__kicker { margin: 0; font: 700 0.7rem/1 var(--font-ui); letter-spacing: 0.18em; text-transform: uppercase; color: #4BD5EE; }
.house__title { margin: 0; font: 400 1.55rem/1.12 var(--font-display); color: #fff; padding-right: 30px; }
.house__lede { margin: 0; font: 400 1rem/1.45 var(--font-text); color: rgba(255, 255, 255, 0.86); }
.house__does { margin: 2px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font: 400 0.84rem/1.42 var(--font-ui); color: rgba(255, 255, 255, 0.84); }
.house__does li { position: relative; padding-left: 16px; }
.house__does li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: #4BD5EE; box-shadow: 0 0 8px #4BD5EE; }
.house__close { margin: 4px 0 2px; font: italic 400 1rem/1.45 var(--font-text); color: #FFE7A6; }
.house__cta { justify-self: start; color: #11151b; background: linear-gradient(180deg, #FFE9A8, #FFD54C); border: 0; box-shadow: 0 10px 30px -12px rgba(255, 213, 76, 0.8); }
.house__fold { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); cursor: pointer; }
.house__fold::before { content: ""; position: absolute; inset: 0; margin: auto; width: 10px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-2px) rotate(45deg); transition: transform 400ms var(--ease-ui); }
/* folded: only the question and the button stay */
.house__card.is-folded { width: auto; max-width: calc(100% - 2 * var(--gutter)); }
.house__card.is-folded .house__lede, .house__card.is-folded .house__does, .house__card.is-folded .house__close { display: none; }
.house__card.is-folded .house__fold::before { transform: translateY(2px) rotate(-135deg); }
@media (max-width: 560px) { .house__hint { display: none; } .house__card { padding: 16px 18px; } .house__title { font-size: 1.3rem; } }
/* the realistic island loading behind the instant one */
.sharpening { position: absolute; left: var(--gutter); bottom: max(18px, env(safe-area-inset-bottom)); margin: 0; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 999px; background: rgba(27, 7, 10, 0.55); font: 600 0.74rem/1 "Instrument Sans", system-ui, sans-serif; letter-spacing: 0.06em; color: rgba(247, 239, 228, 0.85); pointer-events: none; transition: opacity 0.8s; z-index: 2; }
.sharpening i { position: relative; width: 64px; height: 3px; border-radius: 2px; background: rgba(247, 239, 228, 0.18); overflow: hidden; }
.sharpening i::after { content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, 0.03)); background: #D4A853; transition: transform 0.4s; }
.sharpening.is-done { opacity: 0; }

/* ---------------- liquid glass (1 October 2026): the loading card, the menu and every control panel ---------------- */
.glass {
  --glass-bg: rgba(255, 255, 255, 0.1);
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04) 42%, rgba(255, 255, 255, 0.07)),
    var(--glass-bg);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 18px 50px -18px rgba(0, 0, 0, 0.55);
}
.glass--dark { --glass-bg: rgba(18, 22, 28, 0.38); }
/* the rim where light bends: a brighter edge at the top left fading round, as liquid glass does */
:where(.glass) { position: relative; }
.glass { isolation: isolate; }
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; padding: 1px;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.06) 38%, rgba(255, 255, 255, 0.04) 62%, rgba(255, 255, 255, 0.34));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* ---------------- the loading screen ---------------- */
.loader {
  position: fixed; inset: 0; z-index: 5; overflow: hidden; background: #0d1a22;
  opacity: 0; transition: opacity 700ms var(--ease-grace);
}
.loader[hidden] { display: none; }
.loader.is-on { opacity: 1; }
.loader.is-done { opacity: 0; transition-duration: 1200ms; pointer-events: none; }
.loader__shot {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02); animation: loader-drift 60s linear forwards;
}
.loader::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 38%, transparent 55%, rgba(4, 10, 16, 0.55)), linear-gradient(180deg, transparent 55%, rgba(4, 10, 16, 0.5));
}
@keyframes loader-drift { to { transform: scale(1.12) translate(-1.5%, -1%); } }
.loader__card {
  position: absolute; z-index: 1; left: 50%; bottom: max(28px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(440px, calc(100% - 32px)); padding: 20px 22px 18px; border-radius: 26px;
  display: grid; gap: 8px; text-align: left;
}
.loader__title { margin: 0; font: 400 1.7rem/1.05 var(--font-display); letter-spacing: -0.01em; }
.loader__step { margin: 0; font: 600 0.92rem/1.3 var(--font-ui); color: rgba(255, 255, 255, 0.86); min-height: 1.3em; }
.loader__row { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.loader__bar { flex: 1; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.22); overflow: hidden; }
.loader__bar i { display: block; height: 100%; border-radius: inherit; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #fff, #ffe7b0); box-shadow: 0 0 12px rgba(255, 231, 176, 0.7); }
.loader__pct { font: 600 0.8rem/1 var(--font-ui); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.8); min-width: 3ch; text-align: right; }
.loader__note { margin: 4px 0 0; font: 400 0.82rem/1.45 var(--font-ui); color: rgba(255, 255, 255, 0.72); max-height: 0; opacity: 0; overflow: hidden; transition: opacity 600ms var(--ease-ui), max-height 600ms var(--ease-ui); }
.loader__note.is-on { max-height: 4em; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .loader__shot { animation: none; } }