/* Ryan Dennis: Smile and Grow Rich (/3d/): the game's interface.
   Loaded after /styles.css (the shared colour tokens), and only by the 3D
   page, so the arcade never downloads it. The same two type tokens as the
   arcade, set for a 2027 interface (below), the --t-* scale, and tokens
   for every colour; see DESIGN.md section 7. */

/* Type. Inter (variable, self-hosted) for everything a player reads or
   presses; the arcade's pixel face only in the title's wordmark.
   --display is Inter held at one strong weight (the same file, declared
   at 650), so every label, heading and button speaks in one confident
   voice; --sans is Inter across its range for reading. Its optical size
   axis sharpens the large sizes on its own. */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Display";
  src: url("/assets/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 650;
  font-style: normal;
  font-display: swap;
}
body.g3d {
  --display: "Inter Display", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wordmark: "Press Start 2P", "Courier New", monospace;
  /* the scale, for Inter's proportions (the arcade's is set for VT323, which runs small) */
  --t-label:  clamp(0.75rem, 0.71rem + 0.15vw, 0.8125rem);
  --t-small:  clamp(0.8125rem, 0.78rem + 0.12vw, 0.875rem);
  --t-body:   clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
  --t-lede:   clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --t-figure: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --t-h2:     clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --t-h1:     clamp(2rem, 1.2rem + 3vw, 3.5rem);
  font-variant-numeric: tabular-nums;          /* clocks, countdowns and money hold still as they change */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Shell: the page, loader, crosshair, prompt, toasts, and the --g3d-* tokens
   ========================================================================== */
/* ==========================================================================
   3D MODE · Ryan Dennis: Smile and Grow Rich (/3d/)
   The game draws the world into a canvas; everything here is the DOM that
   sits over it: the loader, the HUD, panels and minigames. Same two type
   families and the same tokens as the arcade, with a translucent glass
   surface so the world shows through.
   ========================================================================== */
.g3d-page, .g3d-page body { height: 100%; overflow: hidden; }
body.g3d { margin: 0; padding: 0; background: var(--screen); color: var(--screen-ink); font-family: var(--sans); font-size: var(--t-body); }
body.g3d::after { display: none; }
.g3d-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; outline: none; }
.g3d-ui { position: fixed; inset: 0; pointer-events: none; }
.g3d-ui > * { pointer-events: auto; }
.g3d-hud { position: fixed; inset: 0; pointer-events: none; }
.g3d-hud[hidden] { display: none; }
.g3d-hud .g3d-live { pointer-events: auto; }
:root {
  --g3d-glass: rgba(10, 9, 22, 0.78);
  --g3d-glass-2: rgba(22, 20, 48, 0.9);
  --g3d-line: rgba(255, 244, 214, 0.22);
  --g3d-money: #3ddc84;
  --g3d-text-lift: 0 2px 14px rgba(4, 3, 10, 0.5);   /* a soft lift for headings and figures (hard pixel offsets are the title's alone) */
  --g3d-ease: cubic-bezier(0.22, 1, 0.36, 1);          /* entrances and transitions glide; only loops (blinks, bulbs) still step */
}

/* loader and fallback */
.g3d-loader, .g3d-fallback {
  position: fixed; inset: 0; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(ellipse at 50% 30%, #231c4d 0%, var(--screen) 70%);
}
.g3d-loader[hidden], .g3d-fallback[hidden] { display: none; }
.g3d-loader-card { width: min(560px, 100%); display: grid; gap: 16px; justify-items: center; text-align: center; }
.g3d-kicker { font-family: var(--wordmark); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); margin: 0; }
.g3d-title { font-family: var(--wordmark); font-size: clamp(1.3rem, 0.9rem + 2vw, 2.4rem); line-height: 1.3; margin: 0; color: var(--screen-ink); text-shadow: 4px 4px 0 var(--magenta); }
.g3d-sub { margin: 0; color: var(--screen-dim); max-width: 34rem; }
.g3d-bar { width: 100%; height: 18px; border: 3px solid var(--screen-ink); padding: 2px; }
.g3d-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--gold) 0 10px, var(--gold-deep) 10px 13px); transition: width 0.3s var(--g3d-ease); }
.g3d-status { margin: 0; color: var(--screen-dim); min-height: 1.4em; }
.g3d-start { display: grid; gap: 12px; justify-items: center; }
.g3d-start[hidden] { display: none; }
.g3d-keys { margin: 0; color: var(--screen-dim); font-size: var(--t-small); line-height: 1.8; }
.g3d-keys kbd, .g3d-hud kbd { background: transparent; color: var(--screen-ink); border-color: var(--g3d-line); font-size: calc(var(--t-label) * 0.92); }
.g3d-alt { margin: 0; color: var(--screen-dim); }
.g3d-alt .text-link, .g3d-loader .text-link { color: var(--cyan); }
.g3d-noscript { position: fixed; inset: auto 0 0 0; padding: 16px; background: var(--screen); text-align: center; }

/* crosshair, prompt, toasts */
.g3d-cross { position: fixed; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--screen-ink); box-shadow: 0 0 0 2px rgba(8, 7, 15, 0.6); }
.g3d-modal .g3d-cross { display: none; }
.g3d-prompt {
  position: fixed; left: 50%; top: calc(50% + 28px); translate: -50% 0; margin: 0;
  padding: 8px 14px; background: var(--g3d-glass); border: 2px solid var(--g3d-line);
  font-family: var(--display); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
}
.g3d-prompt[hidden] { display: none; }
.g3d-toasts { position: fixed; left: 50%; bottom: 96px; translate: -50% 0; display: grid; gap: 8px; justify-items: center; width: min(560px, 90vw); }
.g3d-toast { margin: 0; padding: 10px 16px; background: var(--g3d-glass-2); border: 2px solid var(--g3d-line); text-align: center; animation: g3d-rise 0.3s var(--g3d-ease) both; }
.g3d-toast-money { border-color: var(--g3d-money); color: var(--g3d-money); }
.g3d-toast-warn { border-color: var(--magenta); color: #ff9ab8; }
.g3d-toast-good { border-color: var(--gold); color: var(--gold); }
.g3d-toast.out { opacity: 0; transition: opacity 0.4s; }
@keyframes g3d-rise { from { opacity: 0; translate: 0 10px; } }

/* ==========================================================================
   The day and the work
   ========================================================================== */
/* 3D · loop (merged into styles.css at integration)
   The photo on the red steps: one soft camera flash over the world.
   Decorative only (aria-hidden), a single pulse, never repeated, and
   skipped entirely under reduced motion. */
.g3d-loop-flash {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  background: var(--screen-ink);
  opacity: 0;
  animation: g3d-loop-flash 0.6s ease-out both;
}
@keyframes g3d-loop-flash {
  0% { opacity: 0.8; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .g3d-loop-flash { display: none; }
}

/* ==========================================================================
   The pitch: the phone and its stories, the message meter
   ========================================================================== */
/* 3D · pitch (merged into styles.css at integration)
   ==========================================================================
   The pitch HUD: Ryan's phone, a modal story picker held up in the middle
   of the view, and the message meter in the dock (bottom centre: one big
   line saying what to do, the bar with its green band, the call and how
   much of the story has landed; the key hint under it).
   The arcade's pixel DNA for labels (--display), VT323 for reading
   (--sans). Every colour is a token: the site's palette, tints of it
   (color-mix), or a --pp-* token below; the tokens block is the only
   place a raw colour appears (test/pitch.test.mjs checks it).

   ui/pitch.js measures the room and sets, on .g3d-pitch:
     --pp-z        the phone's zoom (0.85 small windows .. 1.25 big ones)
     --pp-zm       the meter's zoom (0.8 .. 1.15)
     --pp-phone-h  the phone's tallest before zoom (the window's height,
                   less the edges)
     --pp-floor    the top of the HUD's needs row: the dock sits on it
     --pp-lane     the room between the minimap and the right edge
   and, on the meter's bar: --lo and --hi (the green band) and --lost (the
   floor), each 0..1 up the bar, and --danger (0..1, how close a loss is).
   Each has a fallback, so the HUD still reads before it is measured.
   ========================================================================== */
.g3d-pitch {
  --pp-edge: var(--g3d-hud-edge, 20px);
  /* type: Press Start 2P never under 10 px on screen, VT323 never under 16 px. The phone and the meter
     are drawn at a fixed size and zoomed with the window (--pp-z, --pp-zm): each re-declares these with
     its zoom as --pp-k, so a floor divided by the zoom still lands on screen at the floor */
  --pp-k: 1;
  --pp-micro: max(calc(10px / var(--pp-k)), calc(var(--t-label) * 0.85));
  --pp-name: max(calc(10.5px / var(--pp-k)), calc(var(--t-label) * 0.95));
  --pp-call: max(calc(10.5px / var(--pp-k)), calc(var(--t-label) * 1.1));
  --pp-call-big: max(calc(13px / var(--pp-k)), calc(var(--t-label) * 1.5));
  --pp-note: max(calc(16px / var(--pp-k)), calc(var(--t-body) * 0.72));
  --pp-msg: max(calc(17px / var(--pp-k)), calc(var(--t-body) * 0.86));
  --pp-do: max(calc(18px / var(--pp-k)), calc(var(--t-body) * 0.95));
  /* colour: the site's palette first; these for what it does not have */
  --pp-band: var(--g3d-money);
  --pp-band-deep: #1f9e5a;         /* the stripes in the progress bar */
  --pp-over: #ff5a6e;              /* overselling: a hot coral, readable on the dark glass */
  --pp-pink: #ff9ab8;              /* magenta, light enough for text on the dark glass */
  --pp-bad: var(--pp-pink);
  --pp-low: #b8b0ff;               /* the needle too low: a cool lavender */
  --pp-mint: #eafff2;              /* the band's edges, the needle in the green */
  --pp-needle-hot: #ffc2cb;
  --pp-hub: #0b0a17;
  --pp-shade: #04030a;             /* the ink under shadows */
  --pp-glass-solid: color-mix(in srgb, var(--screen) 90%, transparent);   /* up every frame of a call: no backdrop blur */
  --pp-scrim: color-mix(in srgb, var(--pp-shade) 42%, transparent);
  --pp-bezel-1: #3a3560;
  --pp-bezel-2: #14122a;
  --pp-bezel-3: #0a0918;
  --pp-bezel-edge: #07060e;
  --pp-key-1: #4a4480;
  --pp-key-2: #1b1838;
  --pp-island: #030208;
  --pp-screen-1: #221d52;
  --pp-screen-2: #0d0b1f;
  --pp-card: color-mix(in srgb, var(--screen-ink) 6%, transparent);
  --pp-card-hi: color-mix(in srgb, var(--screen-ink) 13%, transparent);
  --pp-line: var(--g3d-line);
  --pp-ink-shadow: 0 2px 0 color-mix(in srgb, var(--pp-shade) 70%, transparent);
  --pp-lift: 0 18px 40px color-mix(in srgb, var(--pp-shade) 50%, transparent);
  --pp-spring: cubic-bezier(0.2, 1.3, 0.3, 1);
  position: fixed; inset: 0; z-index: 12; pointer-events: none;
  font-family: var(--sans); color: var(--screen-ink);
}
.g3d-pitch[hidden] { display: none; }
.g3d-pitch-body, .g3d-pitch-meter {
  --pp-micro: max(calc(10px / var(--pp-k)), calc(var(--t-label) * 0.85));
  --pp-name: max(calc(10.5px / var(--pp-k)), calc(var(--t-label) * 0.95));
  --pp-call: max(calc(10.5px / var(--pp-k)), calc(var(--t-label) * 1.1));
  --pp-call-big: max(calc(13px / var(--pp-k)), calc(var(--t-label) * 1.5));
  --pp-note: max(calc(16px / var(--pp-k)), calc(var(--t-body) * 0.72));
  --pp-msg: max(calc(17px / var(--pp-k)), calc(var(--t-body) * 0.86));
  --pp-do: max(calc(18px / var(--pp-k)), calc(var(--t-body) * 0.95));
}
.g3d-pitch-body { --pp-k: var(--pp-z, 1); }
.g3d-pitch-meter { --pp-k: var(--pp-zm, 1); }
/* no specificity, so every class below sets its own margins */
:where(.g3d-pitch) :where(p, ol, ul, h2) { margin: 0; }

/* the HUD's key hints, its objective line and a guide tip step aside while the phone is out or a call
   is on: the phone and the meter say what the keys do now. Keyed to the pitch overlay itself, so they go
   the same frame it comes up (the HUD's own is-pitching class follows at its own pace) */
.g3d-hud:has(> .g3d-pitch:not([hidden])) .g3d-hud-keys,
.g3d-hud-layer.is-pitching .g3d-hud-keys { opacity: 0; visibility: hidden; }
.g3d-hud:has(> .g3d-pitch:not([hidden])) .g3d-hud-obj,
.g3d-hud:has(> .g3d-pitch:not([hidden])) .g3d-tip { opacity: 0; visibility: hidden; }

/* ------------------------------------------------------------ keycaps */
.g3d-pitch kbd {
  display: inline-grid; place-items: center; min-width: 22px; min-height: 20px; margin: 0 1px; padding: 2px 6px;
  font-family: var(--display); font-size: var(--pp-micro); line-height: 1; text-transform: uppercase;
  color: var(--screen-ink); background: color-mix(in srgb, var(--screen-ink) 10%, transparent);
  border: 1px solid var(--pp-line); border-bottom-width: 2px; vertical-align: 0.1em;
}
.g3d-pitch-sep { color: var(--screen-dim); }

/* ================================================================ the phone */
/* The world dims a little behind it; a click out there puts the phone away. */
.g3d-pitch-scrim { position: absolute; inset: 0; pointer-events: auto; background: var(--pp-scrim); animation: g3d-pitch-fade 0.2s ease both; }
.g3d-pitch-scrim[hidden], .g3d-pitch-phone[hidden] { display: none; }
@keyframes g3d-pitch-fade { from { opacity: 0; } }

/* Ryan holds the phone up in the middle of the view; its body is drawn 360 px wide and zoomed with the
   window, so everything on it grows together. It is as tall as its stories, up to the room it has. */
.g3d-pitch-phone {
  position: absolute; inset: 0; display: grid; place-items: center; padding: var(--pp-edge);
  pointer-events: none;
  animation: g3d-pitch-raise 0.45s var(--pp-spring) both;
}
@keyframes g3d-pitch-raise { from { opacity: 0; transform: translateY(60px); } }

.g3d-pitch-body {
  position: relative; display: flex; flex-direction: column; width: 360px;
  max-height: var(--pp-phone-h, min(760px, calc(100vh - 40px)));
  pointer-events: auto;
  zoom: var(--pp-z, 1);
  padding: 8px; border-radius: 40px;
  background: linear-gradient(150deg, var(--pp-bezel-1) 0%, var(--pp-bezel-2) 38%, var(--pp-bezel-3) 100%);
  box-shadow:
    inset 0 0 0 1.5px color-mix(in srgb, var(--screen-ink) 30%, transparent),
    inset 0 0 0 4px var(--pp-bezel-edge),
    0 30px 70px color-mix(in srgb, var(--pp-shade) 60%, transparent),
    10px 14px 0 color-mix(in srgb, var(--pp-shade) 35%, transparent);
}
.g3d-pitch-key { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--pp-key-1), var(--pp-key-2)); }
.g3d-pitch-key.is-a { left: -2px; top: 92px; height: 26px; }
.g3d-pitch-key.is-b { left: -2px; top: 128px; height: 46px; }
.g3d-pitch-key.is-c { right: -2px; top: 118px; height: 64px; }

.g3d-pitch-screen {
  position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 32px;
  background:
    radial-gradient(130% 55% at 50% -5%, color-mix(in srgb, var(--cyan) 16%, transparent) 0%, transparent 60%),
    radial-gradient(90% 50% at 110% 100%, color-mix(in srgb, var(--magenta) 14%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, var(--pp-screen-1) 0%, var(--pp-screen-2) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--screen-ink) 8%, transparent);
}
/* a soft glass reflection across the top of the screen */
.g3d-pitch-screen::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, color-mix(in srgb, var(--screen-ink) 7%, transparent) 0%, transparent 32%);
}

.g3d-pitch-status {
  flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 9px 16px 2px;
  font-family: var(--display); font-size: var(--pp-micro); line-height: 1; color: var(--screen-ink);
}
.g3d-pitch-time { justify-self: start; letter-spacing: 0.02em; }
.g3d-pitch-island { width: 66px; height: 19px; border-radius: 12px; background: var(--pp-island); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--screen-ink) 6%, transparent); }
.g3d-pitch-status-r { justify-self: end; display: inline-flex; align-items: center; gap: 6px; }
.g3d-pitch-sig { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 9px; }
.g3d-pitch-sig i { width: 2.5px; background: currentColor; }
.g3d-pitch-sig i:nth-child(1) { height: 3px; } .g3d-pitch-sig i:nth-child(2) { height: 5px; }
.g3d-pitch-sig i:nth-child(3) { height: 7px; } .g3d-pitch-sig i:nth-child(4) { height: 9px; }
/* the battery is Ryan's energy: every pitch costs one */
.g3d-pitch-batt { position: relative; width: 20px; height: 10px; padding: 1.5px; border: 1.5px solid color-mix(in srgb, var(--screen-ink) 75%, transparent); border-radius: 3px; }
.g3d-pitch-batt::after { content: ''; position: absolute; right: -4px; top: 2px; width: 2px; height: 3px; border-radius: 0 1px 1px 0; background: color-mix(in srgb, var(--screen-ink) 75%, transparent); }
.g3d-pitch-batt i { display: block; height: 100%; border-radius: 1px; background: var(--pp-band); transform-origin: left center; }
.g3d-pitch-batt.is-low i { background: var(--pp-over); }

/* who Ryan pitches for, where, and in what it pays */
.g3d-pitch-head {
  flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px;
  margin: 8px 12px 0; padding: 6px 4px 10px; border-bottom: 1px solid var(--pp-line);
}
/* the company's initials in its own colour, deep enough under the ink to read */
.g3d-pitch-avatar {
  --av: var(--cyan); --av-2: var(--gold);
  display: grid; place-items: center; width: 36px; height: 36px; margin-top: 1px; border-radius: 50%;
  font-family: var(--display); font-size: var(--pp-micro); color: var(--screen-ink);
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--screen-ink) 16%, transparent), transparent 55%), color-mix(in srgb, var(--av) 42%, var(--pp-hub));
  box-shadow: 0 0 0 2px var(--av-2), 0 0 0 3.5px var(--screen);
}
.g3d-pitch-who { min-width: 0; display: grid; gap: 6px; }
.g3d-pitch-title { font-family: var(--display); font-weight: 400; font-size: var(--pp-name); line-height: 1.35; color: var(--gold); }
.g3d-pitch-where { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: var(--pp-note); line-height: 1.35; color: var(--screen-dim); }
.g3d-pitch-where-co { color: var(--screen-ink); }
/* the angle: what Ryan is pitching, from the chapter */
.g3d-pitch-angle { flex: none; margin: 8px 16px 0; font-size: var(--pp-note); line-height: 1.35; color: var(--screen-ink); }
.g3d-pitch-angle[hidden] { display: none; }
.g3d-pitch-angle-k { font-family: var(--display); font-size: var(--pp-micro); letter-spacing: 0.04em; text-transform: uppercase; color: var(--cyan); }

/* the stories: a button each; the list scrolls when the window is short */
.g3d-pitch-stories {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  display: grid; align-content: start; gap: 8px; padding: 10px 12px 8px; list-style: none;
}
.g3d-pitch-story {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 10px;
  width: 100%; min-height: 44px; padding: 9px 11px 10px 9px; text-align: left;
  font-family: var(--sans); color: var(--screen-ink); cursor: pointer;
  background: var(--pp-card); border: 1px solid var(--pp-line); border-radius: 14px;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.g3d-pitch-story:hover { background: var(--pp-card-hi); border-color: color-mix(in srgb, var(--screen-ink) 45%, transparent); }
.g3d-pitch-story:focus { background: var(--pp-card-hi); border-color: var(--gold); }
.g3d-pitch-story:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.g3d-pitch-story:active, .g3d-pitch-story.is-chosen { transform: scale(0.98); }
.g3d-pitch-story-n { margin-top: 1px; }
.g3d-pitch-story-main { min-width: 0; display: grid; gap: 6px; }
.g3d-pitch-story-news { font-size: var(--pp-msg); line-height: 1.25; color: var(--screen-ink); text-wrap: balance; }
.g3d-pitch-story-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 7px; }
.g3d-pitch-story-kind { min-width: 0; font-size: var(--pp-note); line-height: 1.35; color: var(--screen-dim); }
.g3d-pitch-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; font-size: var(--pp-note); line-height: 1.35; color: var(--screen-dim); }
.g3d-pitch-fact b { font-weight: 400; color: var(--screen-ink); }
.g3d-pitch-diff { display: inline-flex; align-items: center; gap: 5px; }
.g3d-pitch-diff.is-easy { color: var(--pp-band); }
.g3d-pitch-diff.is-medium { color: var(--gold); }
.g3d-pitch-diff.is-hard { color: var(--pp-pink); }
.g3d-pitch-diff.is-easy b, .g3d-pitch-diff.is-medium b, .g3d-pitch-diff.is-hard b { color: inherit; }
/* pips: how hard a call is, and how busy the room is (Tidewater's depth) */
.g3d-pitch-pips { display: inline-flex; gap: 3px; }
.g3d-pitch-pips i { width: 7px; height: 7px; border: 1px solid currentColor; }
.g3d-pitch-pips i.is-on { background: currentColor; }
.g3d-pitch-pips.is-tier { color: var(--gold); }

/* a story's rarity */
.g3d-pitch-rar {
  flex: none; display: inline-block; padding: 2px 5px 1px; border-radius: 5px; border: 1px solid currentColor;
  font-family: var(--display); font-size: var(--pp-micro); line-height: 1.1; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--screen-dim);
}
.g3d-pitch-rar.is-uncommon { color: var(--cyan); }
.g3d-pitch-rar.is-rare { color: var(--gold); }
.g3d-pitch-rar.is-legendary { color: var(--pp-pink); box-shadow: 0 0 12px color-mix(in srgb, var(--magenta) 50%, transparent); }
.g3d-pitch-story.is-rare { border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.g3d-pitch-story.is-legendary { border-color: color-mix(in srgb, var(--pp-pink) 55%, transparent); }
.g3d-pitch-story.is-rare:focus, .g3d-pitch-story.is-legendary:focus { border-color: var(--gold); }

/* the foot: the keys, and the way out, on one row (two when narrow) */
.g3d-pitch-foot {
  flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px;
  margin: 0 14px 20px; padding-top: 9px; border-top: 1px solid var(--pp-line);
}
.g3d-pitch-keys { font-size: var(--pp-note); line-height: 1.25; color: var(--screen-dim); }
.g3d-pitch-away {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 14px;
  font-family: var(--sans); font-size: var(--pp-note); line-height: 1.35; color: var(--screen-ink); cursor: pointer;
  background: color-mix(in srgb, var(--screen-ink) 8%, transparent); border: 1px solid var(--pp-line); border-radius: 999px;
}
.g3d-pitch-away:hover { background: var(--pp-card-hi); }
.g3d-pitch-away:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
@media (pointer: coarse) { .g3d-pitch-away { min-height: 44px; } }
.g3d-pitch-home { position: absolute; left: 50%; bottom: 7px; width: 84px; height: 4px; margin-left: -42px; border-radius: 3px; background: color-mix(in srgb, var(--screen-ink) 55%, transparent); }

/* ================================================================ the dock */
/* Bottom centre, sat on the needs row, as wide as the lane right of the minimap. The hint line is its
   only child in flow; the meter stands on top of it. */
.g3d-pitch-dock {
  position: absolute; left: 50%; bottom: var(--pp-floor, calc(var(--pp-edge) + 62px)); transform: translateX(-50%);
  width: var(--pp-lane, min(760px, calc(100vw - 2 * 240px)));
  /* one column exactly as wide as the lane: an auto track would grow to the hint's unwrapped width,
     and the hint's max-width would never bite */
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center;
}

/* ---------------------------------------------------------------- the hint line */
.g3d-pitch-hint {
  max-width: 100%; display: flex; align-items: center; justify-content: center; gap: 4px 10px; white-space: nowrap;
  padding: 6px 14px; background: var(--pp-glass-solid); border: 1px solid var(--pp-line);
  font-size: calc(var(--t-body) * 0.86); line-height: 1.1; color: var(--screen-ink);
  transition: opacity 0.2s ease;
}
.g3d-pitch-hint > span { white-space: nowrap; }
/* too long for the lane even without its optional parts: one part to a line, no separators left dangling */
.g3d-pitch-hint.is-wrap { flex-direction: column; gap: 3px; white-space: normal; text-align: center; }
.g3d-pitch-hint.is-wrap .g3d-pitch-sep { display: none; }
.g3d-pitch-hint.is-wrap > span { white-space: normal; }
.g3d-pitch-hint:empty { opacity: 0; }

/* ================================================================ the meter */
/* One panel: the story, the line that says what to do, then the bar (the needle climbs while Space or
   the mouse is held and drops when let go; keep it in the green) beside the call and the progress. */
.g3d-pitch-meter {
  position: absolute; left: 50%; bottom: calc(100% + 8px);
  width: min(860px, calc(var(--pp-lane, 760px) / var(--pp-zm, 1)));
  zoom: var(--pp-zm, 1);
  display: grid; gap: 10px; padding: 12px 20px 16px;
  background: var(--pp-glass-solid); border: 1px solid var(--pp-line);
  /* the glow grows with the danger of losing it */
  box-shadow: var(--pp-lift), 0 0 calc(var(--danger, 0) * 34px) calc(var(--danger, 0) * 4px) color-mix(in srgb, var(--pp-over) 70%, transparent);
  opacity: 0; visibility: hidden; transform: translate(-50%, 16px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s 0.22s;
}
.g3d-pitch-meter.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.18s ease, transform 0.4s var(--pp-spring), visibility 0s; }
.g3d-pitch-mhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; font-size: var(--pp-note); line-height: 1.35; color: var(--screen-dim); text-align: center; }
.g3d-pitch-mtitle { font-weight: 400; color: var(--screen-ink); }

/* what to do, in one line (two when the window is narrow) */
.g3d-pitch-do {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 9px;
  padding: 7px 12px 8px; border-radius: 10px; background: color-mix(in srgb, var(--screen-ink) 7%, transparent);
  font-size: var(--pp-do); line-height: 1.3; color: var(--screen-ink); text-align: center;
}
.g3d-pitch-do > span { white-space: nowrap; }
.g3d-pitch-do b { font-weight: 400; color: var(--gold); }
.g3d-pitch-do b.is-green { color: var(--pp-band); }
.g3d-pitch-meter[data-zone="landed"] .g3d-pitch-do, .g3d-pitch-meter[data-zone="fell"] .g3d-pitch-do, .g3d-pitch-meter[data-zone="off"] .g3d-pitch-do { visibility: hidden; }

.g3d-pitch-play { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 22px; }
/* room on the left for the needle's pointer; the zone names on the right */
.g3d-pitch-gauge { display: grid; grid-template-columns: auto auto; gap: 16px; padding-left: 20px; }

/* the bar: the lost floor at the bottom, too soft, the green band, too much at the top */
.g3d-pitch-track {
  position: relative; width: 44px; height: 168px; border-radius: 8px;
  background: color-mix(in srgb, var(--screen-ink) 8%, transparent); border: 1px solid var(--pp-line);
}
.g3d-pitch-z { position: absolute; left: 0; right: 0; }
.g3d-pitch-z.is-lost { bottom: 0; height: calc(var(--lost, 0.11) * 100%); border-radius: 0 0 7px 7px; background: color-mix(in srgb, var(--pp-over) 32%, transparent); }
.g3d-pitch-z.is-low { bottom: calc(var(--lost, 0.11) * 100%); height: calc((var(--lo, 0.2) - var(--lost, 0.11)) * 100%); background: color-mix(in srgb, var(--pp-low) 20%, transparent); }
.g3d-pitch-z.is-band {
  bottom: calc(var(--lo, 0.2) * 100%); height: calc((var(--hi, 0.8) - var(--lo, 0.2)) * 100%);
  background: color-mix(in srgb, var(--pp-band) 55%, transparent);
  box-shadow: inset 0 2px 0 var(--pp-mint), inset 0 -2px 0 var(--pp-mint);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.g3d-pitch-meter[data-zone="band"] .g3d-pitch-z.is-band, .g3d-pitch-meter[data-zone="landed"] .g3d-pitch-z.is-band {
  background: color-mix(in srgb, var(--pp-band) 85%, transparent);
  box-shadow: inset 0 2px 0 var(--pp-mint), inset 0 -2px 0 var(--pp-mint), 0 0 16px color-mix(in srgb, var(--pp-band) 60%, transparent);
}
.g3d-pitch-z.is-over {
  top: 0; bottom: calc(var(--hi, 0.8) * 100%); border-radius: 7px 7px 0 0;
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--pp-over) 70%, transparent) 0 5px, color-mix(in srgb, var(--pp-over) 28%, transparent) 5px 10px);
}
/* the level under the needle, and the needle itself (moved by transform, never by `bottom`) */
.g3d-pitch-fill { position: absolute; left: 7px; right: 7px; bottom: 0; height: 100%; border-radius: 4px; transform-origin: 50% 100%; transform: scaleY(0); background: color-mix(in srgb, var(--screen-ink) 22%, transparent); }
.g3d-pitch-needle {
  --needle: var(--screen-ink);
  position: absolute; left: -7px; right: -7px; bottom: -3px; height: 6px; border-radius: 3px;
  background: var(--needle); will-change: transform;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--pp-shade) 80%, transparent), 0 2px 6px color-mix(in srgb, var(--pp-shade) 60%, transparent);
}
/* the pointer, from the left, into the bar */
.g3d-pitch-needle::after {
  content: ''; position: absolute; right: calc(100% + 2px); top: 50%; transform: translateY(-50%);
  border-style: solid; border-width: 8px 0 8px 11px; border-color: transparent transparent transparent var(--needle);
}
.g3d-pitch-meter[data-zone="band"] .g3d-pitch-needle { --needle: var(--pp-mint); }
.g3d-pitch-meter[data-zone="over"] .g3d-pitch-needle { --needle: var(--pp-needle-hot); }
.g3d-pitch-meter.is-push .g3d-pitch-needle { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--pp-shade) 80%, transparent), 0 0 12px color-mix(in srgb, var(--gold) 80%, transparent); }
/* the zones by name, beside the bar */
.g3d-pitch-zlabels { position: relative; min-width: 128px; height: 168px; }
.g3d-pitch-zlabels span {
  position: absolute; left: 0; transform: translateY(50%); white-space: nowrap;
  font-family: var(--display); font-size: var(--pp-micro); line-height: 1.2; letter-spacing: 0.03em; text-transform: uppercase;
}
.g3d-pitch-zlabels .is-over { bottom: calc((var(--hi, 0.8) + 1) / 2 * 100%); color: var(--pp-bad); }
.g3d-pitch-zlabels .is-band { bottom: calc((var(--lo, 0.2) + var(--hi, 0.8)) / 2 * 100%); color: var(--pp-band); }
.g3d-pitch-zlabels .is-low { bottom: calc((var(--lo, 0.2) + var(--lost, 0.11)) / 2 * 100%); color: var(--pp-low); }

/* the call, and what to do about it; then how much of the story has landed */
.g3d-pitch-side { min-width: 0; display: grid; align-content: center; gap: 18px; }
.g3d-pitch-call { display: grid; gap: 7px; min-height: 3.2em; }
.g3d-pitch-call b {
  display: block; transform-origin: left center;
  font-family: var(--display); font-weight: 400; font-size: var(--pp-call-big); line-height: 1.25;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--screen-ink); text-shadow: var(--pp-ink-shadow);
}
.g3d-pitch-call small { font-size: var(--pp-msg); line-height: 1.35; color: var(--screen-ink); }
.g3d-pitch-meter[data-zone="band"] .g3d-pitch-call b { color: var(--pp-band); }
.g3d-pitch-meter[data-zone="over"] .g3d-pitch-call b { color: var(--pp-bad); animation: g3d-pitch-throb 0.22s ease-in-out infinite alternate; }
.g3d-pitch-meter[data-zone="low"] .g3d-pitch-call b { color: var(--pp-low); }
.g3d-pitch-meter[data-zone="lost"] .g3d-pitch-call b { color: var(--pp-bad); }
.g3d-pitch-meter[data-zone="landed"] .g3d-pitch-call b, .g3d-pitch-meter[data-zone="fell"] .g3d-pitch-call b { animation: g3d-pitch-result 0.45s var(--pp-spring) both; }
.g3d-pitch-meter[data-zone="landed"] .g3d-pitch-call b { color: var(--pp-band); }
.g3d-pitch-meter[data-zone="landed"][data-tone="gold"] .g3d-pitch-call b { color: var(--gold); }
.g3d-pitch-meter[data-zone="landed"][data-tone="legend"] .g3d-pitch-call b { color: var(--pp-pink); }
.g3d-pitch-meter[data-zone="fell"] .g3d-pitch-call b { color: var(--pp-bad); }
@keyframes g3d-pitch-throb { to { transform: scale(1.06); } }
@keyframes g3d-pitch-result { from { opacity: 0; transform: scale(0.7); } }

.g3d-pitch-prog { display: grid; gap: 7px; }
.g3d-pitch-prog-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-family: var(--display); font-size: var(--pp-micro); line-height: 1; letter-spacing: 0.05em; text-transform: uppercase; color: var(--screen-dim);
}
.g3d-pitch-prog-top b { font-family: var(--sans); font-weight: 400; font-size: var(--pp-do); letter-spacing: 0; color: var(--screen-ink); font-variant-numeric: tabular-nums; }
.g3d-pitch-prog-bar { display: block; height: 20px; padding: 2px; border: 1px solid var(--pp-line); background: color-mix(in srgb, var(--pp-band) 12%, transparent); }
.g3d-pitch-prog-bar i {
  display: block; height: 100%; transform-origin: left center; transform: scaleX(0);
  background: repeating-linear-gradient(90deg, var(--pp-band) 0 10px, var(--pp-band-deep) 10px 13px);
  transition: transform 0.12s linear;
}
/* filling while the needle is in the green: the stripes march */
.g3d-pitch-meter.is-filling .g3d-pitch-prog-bar i { animation: g3d-pitch-march 0.5s linear infinite; }
@keyframes g3d-pitch-march { to { background-position: 13px 0; } }
.g3d-pitch-meter[data-zone="landed"] .g3d-pitch-prog-bar i { box-shadow: 0 0 14px color-mix(in srgb, var(--pp-band) 70%, transparent); }

/* a short window: the phone's status bar (decoration) makes room for the stories */
@media (max-height: 640px) {
  .g3d-pitch-status { display: none; }
  .g3d-pitch-head { margin-top: 12px; }
}

/* the win card has the stage, at once */
.g3d-pitch.is-card .g3d-pitch-hint, .g3d-pitch.is-card .g3d-pitch-meter { opacity: 0; visibility: hidden; transition: none; }

/* ================================================================ reduced motion */
/* The game's own setting (.is-still) and the OS setting agree: no animation, no springs, no
   slides; things only fade. */
.g3d-pitch.is-still *, .g3d-pitch.is-still *::before, .g3d-pitch.is-still *::after { animation: none !important; }
.g3d-pitch.is-still *, .g3d-pitch.is-still *::before, .g3d-pitch.is-still *::after {
  transition-property: opacity, visibility, color, background-color, border-color !important;
  transition-duration: 0.12s !important; transition-delay: 0s !important; transition-timing-function: linear !important;
}
.g3d-pitch.is-still .g3d-pitch-story:active, .g3d-pitch.is-still .g3d-pitch-story.is-chosen { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .g3d-pitch *, .g3d-pitch *::before, .g3d-pitch *::after { animation: none !important; }
  .g3d-pitch *, .g3d-pitch *::before, .g3d-pitch *::after {
    transition-property: opacity, visibility, color, background-color, border-color !important;
    transition-duration: 0.12s !important; transition-delay: 0s !important; transition-timing-function: linear !important;
  }
  .g3d-pitch-story:active, .g3d-pitch-story.is-chosen { transform: none; }
}

/* ==========================================================================
   Journey: tips, travel overlays, the keynote and Q&A chrome
   ========================================================================== */
/* 3D · journey (merged into styles.css at integration)
   The guide's tips, the travel overlays (the elevator, the drive, the
   nap), the keynote captions, the fade veil, and the stage's fallback
   panels. The art in the overlays (brushed steel, walnut, a dusk sky, a
   red car) is illustration, so its colours live as scoped tokens on
   .g3d-journey; every text colour is a site token. */

.g3d-journey {
  --j-steel-hi: #eef0f2;
  --j-steel: #b9bec6;
  --j-steel-lo: #6f7680;
  --j-seam: #1b1d22;
  --j-wood: #2e1c13;
  --j-wood-hi: #4d3122;
  --j-brass: #d9b45a;
  --j-led: #ff8a3d;
  --j-led-glow: rgba(255, 138, 61, 0.55);
  --j-dusk-1: #1a1340;
  --j-dusk-2: #5b2a86;
  --j-dusk-3: #ff6a5b;
  --j-dusk-4: #ffb35c;
  --j-tower-far: #2c2152;
  --j-tower-near: #150f2f;
  --j-road: #120f1d;
  --j-night-1: #0d1236;
  --j-night-2: #04050e;
  --j-dawn: #f7a86b;
  /* the floor indicator and the cab */
  --j-led-bg-1: #050506;
  --j-led-bg-2: #111114;
  --j-led-inset: rgba(255, 138, 61, 0.12);
  --j-lantern-off: #2a2a2e;
  --j-brush-hi: rgba(255, 255, 255, 0.06);
  --j-brush-lo: rgba(0, 0, 0, 0.05);
  --j-grain-dark: rgba(0, 0, 0, 0.18);
  --j-grain-lite: rgba(255, 255, 255, 0.04);
  --j-cop-grain: rgba(255, 255, 255, 0.07);
  --j-floorlight: rgba(255, 244, 214, 0.16);
  --j-floorlight-hi: rgba(255, 244, 214, 0.22);
  --j-drop: rgba(4, 3, 10, 0.55);
  /* the F80 and the road */
  --j-paint-hi: #ff5a4f;
  --j-paint: #e3212c;
  --j-paint-lo: #7d0b14;
  --j-glass-hi: #3a4a6e;
  --j-glass-lo: #0b0f1c;
  --j-intake: #5a0710;
  --j-tail: #ff2a3a;
  --j-tyre: #0c0c10;
  --j-rim: #2b2d33;
  --j-rim-edge: #9aa0aa;
  --j-spoke: #c5cad2;
  --j-car-shadow: rgba(0, 0, 0, 0.45);
  --j-canopy-edge: rgba(255, 244, 214, 0.35);
  --j-shine: rgba(255, 230, 220, 0.75);
  --j-streak: rgba(255, 244, 214, 0.55);
  --j-streak-cyan: rgba(46, 242, 255, 0.5);
  --j-beam: rgba(255, 244, 214, 0.3);
  /* scrims */
  --j-scrim: rgba(4, 3, 10, 0.35);
  --j-halo: rgba(4, 3, 10, 0.8);
  position: fixed; inset: 0; pointer-events: none; z-index: 30;
}
.g3d-journey > * { pointer-events: none; }
.g3d-travel[hidden], .g3d-jpanel[hidden], .g3d-veil[hidden] { display: none; }

/* the fade veil (only when post-processing is off) */
.g3d-veil { position: fixed; inset: 0; background: var(--screen); opacity: var(--veil, 0); }

/* ======================================================= the tip card */
.g3d-tip {
  position: fixed; left: 50%; bottom: var(--g3d-tip-bottom, 136px); translate: -50% 0; z-index: 5;
  width: min(520px, calc(100vw - 32px)); box-sizing: border-box; margin: 0;
  display: grid; gap: 6px 10px; padding: 10px 12px 12px 14px; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'head acts' 'text text';
  background: var(--g3d-glass-2); border: 2px solid var(--g3d-line); box-shadow: 4px 4px 0 var(--shadow);
  color: var(--screen-ink); pointer-events: auto; overflow: hidden;
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.25s var(--g3d-ease), transform 0.25s var(--g3d-ease);
}
.g3d-tip.is-on { opacity: 1; transform: none; }
.g3d-tip[hidden] { display: none; }
.g3d-tip-muted .g3d-tip, .g3d-photo .g3d-tip { visibility: hidden; }
/* over the pause menu the tip stays, above its scrim, so the mouse can reach it */
.g3d-tip-over .g3d-tip { z-index: 46; }
.g3d-tip.is-held .g3d-tip-timer { animation-play-state: paused; }
.g3d-tip-timer { position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--gold); transform-origin: left; }
.g3d-tip.is-on .g3d-tip-timer { animation: g3d-tip-time var(--tip-ms, 14000ms) linear both; }
@keyframes g3d-tip-time { to { transform: scaleX(0); } }
.g3d-tip-head { grid-area: head; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.g3d-tip-kicker { margin: 0; font-family: var(--display); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); }
.g3d-tip-text { grid-area: text; margin: 0; font-family: var(--sans); font-size: var(--t-body); line-height: 1.4; }
/* docked beside the pause menu, or on a narrow window: the buttons go under the tip */
.g3d-tip.is-docked { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'head' 'text' 'acts'; }
@media (max-width: 600px) {
  .g3d-tip { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'head' 'text' 'acts'; }
}
.g3d-tip-keys { display: inline-flex; gap: 4px; }
.g3d-tip-keys[hidden] { display: none; }
.g3d-tip kbd {
  display: inline-grid; place-items: center; min-width: 26px; min-height: 26px; box-sizing: border-box; padding: 3px 6px;
  font-family: var(--display); font-size: var(--t-label); color: var(--gold); background: var(--screen);
  border: 2px solid var(--gold); box-shadow: 2px 2px 0 var(--gold-deep);
}
.g3d-tip-actions { grid-area: acts; justify-self: end; display: flex; gap: 6px; }
.g3d-tip-btn {
  min-height: 28px; padding: 4px 10px; font-family: var(--display); font-size: var(--t-label); text-transform: uppercase;
  letter-spacing: 0.06em; cursor: pointer; border: 2px solid var(--g3d-line); background: transparent; color: var(--screen-ink);
}
.g3d-tip-ok { display: inline-flex; align-items: center; gap: 8px; background: var(--gold); color: var(--screen); border-color: var(--gold); box-shadow: 2px 2px 0 var(--gold-deep); }
.g3d-tip .g3d-tip-ok kbd { min-width: 20px; min-height: 20px; padding: 1px 4px; color: var(--screen); background: transparent; border: 2px solid var(--screen); box-shadow: none; }
.g3d-tip-btn:hover { border-color: var(--screen-ink); }
.g3d-tip-btn:focus-visible, .g3d-jask-choice:focus-visible, .g3d-jcard-go:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

/* ======================================================= the elevator */
.g3d-travel { position: fixed; inset: 0; overflow: hidden; color: var(--screen-ink); }
.g3d-lift { background: var(--j-seam); opacity: 0; transition: opacity 0.2s var(--g3d-ease); }
.g3d-lift.is-shown { opacity: 1; }
.g3d-lift-cab { position: absolute; inset: 0; }
/* the doors: two brushed-steel leaves meeting at a dark seam */
.g3d-lift-doors { position: absolute; left: 0; right: 0; top: 22vh; bottom: 0; overflow: hidden; }
.g3d-lift-door {
  position: absolute; top: 0; bottom: 0; width: 50%;
  background:
    repeating-linear-gradient(0deg, var(--j-brush-hi) 0 1px, var(--j-brush-lo) 1px 2px, transparent 2px 4px),
    linear-gradient(100deg, var(--j-steel-lo), var(--j-steel-hi) 32%, var(--j-steel) 52%, var(--j-steel-hi) 74%, var(--j-steel-lo));
  transition: transform 0.65s var(--g3d-ease);
}
.g3d-lift-door::after {
  /* light from the floors going by */
  content: ''; position: absolute; left: 0; right: 0; height: 40%; top: -40%;
  background: linear-gradient(180deg, transparent, var(--j-floorlight) 45%, var(--j-floorlight-hi) 50%, var(--j-floorlight) 55%, transparent);
  opacity: 0;
}
.g3d-lift.is-moving .g3d-lift-door::after { opacity: 1; animation: g3d-lift-sweep calc(0.9s / var(--speed, 0.6)) linear infinite; }
.g3d-lift[data-dir='up'] .g3d-lift-door::after { animation-direction: reverse; }
@keyframes g3d-lift-sweep { from { transform: translateY(0); } to { transform: translateY(350%); } }
.g3d-lift-door-l { left: 0; transform: translateX(-100%); box-shadow: inset -3px 0 0 var(--j-seam); }
.g3d-lift-door-r { right: 0; transform: translateX(100%); box-shadow: inset 3px 0 0 var(--j-seam); }
.g3d-lift.is-shown .g3d-lift-door { transform: none; }
.g3d-lift.is-open .g3d-lift-door-l { transform: translateX(-100%); }
.g3d-lift.is-open .g3d-lift-door-r { transform: translateX(100%); }
.g3d-lift.is-open { background: transparent; transition: background 0.3s var(--g3d-ease) 0.35s; }
.g3d-lift.is-open .g3d-lift-transom, .g3d-lift.is-open .g3d-lift-cop, .g3d-lift.is-open .g3d-lift-caption, .g3d-lift.is-open .g3d-lift-status { opacity: 0; transition: opacity 0.35s var(--g3d-ease); }
/* the transom: walnut and brass, the floor indicator in the middle */
.g3d-lift-transom {
  position: absolute; left: 0; right: 0; top: 0; height: 22vh; box-sizing: border-box;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 0 6vw;
  background:
    linear-gradient(180deg, transparent calc(100% - 10px), var(--j-brass) calc(100% - 10px) calc(100% - 6px), var(--j-seam) calc(100% - 6px)),
    repeating-linear-gradient(90deg, var(--j-grain-dark) 0 2px, transparent 2px 9px, var(--j-grain-lite) 9px 11px, transparent 11px 23px),
    linear-gradient(180deg, var(--j-wood-hi), var(--j-wood));
}
.g3d-lift-brand {
  margin: 0; justify-self: end; font-family: var(--display); font-size: var(--t-label); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--j-brass); text-shadow: 1px 1px 0 var(--j-seam);
}
.g3d-lift-window {
  display: grid; grid-template-columns: auto auto; align-items: center; gap: 18px; padding: 14px 26px 12px;
  background: linear-gradient(180deg, var(--j-led-bg-1), var(--j-led-bg-2)); border: 4px solid var(--j-brass); box-shadow: 4px 4px 0 var(--j-seam), inset 0 0 24px var(--j-led-inset);
}
.g3d-lift-floor {
  min-width: 2.2ch; text-align: right; font-family: var(--display); font-size: min(var(--t-h1), 12vh); line-height: 1;
  color: var(--j-led); text-shadow: 0 0 10px var(--j-led-glow), 0 0 2px var(--j-led);
}
.g3d-lift-arrow { width: 0; height: 0; border-left: 18px solid transparent; border-right: 18px solid transparent; border-top: 22px solid var(--j-led); filter: drop-shadow(0 0 6px var(--j-led-glow)); }
.g3d-lift[data-dir='up'] .g3d-lift-arrow { border-top: 0; border-bottom: 22px solid var(--j-led); }
.g3d-lift.is-moving .g3d-lift-arrow { animation: g3d-lift-blink 0.8s steps(2) infinite; }
@keyframes g3d-lift-blink { 50% { opacity: 0.35; } }
.g3d-lift-lantern { justify-self: start; width: 44px; height: 14px; background: var(--j-lantern-off); border: 3px solid var(--j-brass); }
.g3d-lift.is-arrived .g3d-lift-lantern { background: var(--gold); box-shadow: 0 0 18px var(--gold); }
.g3d-lift.is-arrived .g3d-lift-floor { animation: g3d-lift-blink 0.5s var(--g3d-ease) 2; }
/* the operating panel */
.g3d-lift-cop {
  position: absolute; right: 5vw; top: calc(22vh + 8vh); width: 132px; padding: 16px 14px; box-sizing: border-box;
  display: grid; grid-template-columns: 1fr 22px; gap: 12px;
  background:
    repeating-linear-gradient(0deg, var(--j-cop-grain) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, var(--j-steel-lo), var(--j-steel) 40%, var(--j-steel-hi) 60%, var(--j-steel-lo));
  border: 3px solid var(--j-seam); box-shadow: 6px 6px 0 var(--j-drop);
}
.g3d-lift-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.g3d-lift-button {
  display: grid; place-items: center; height: 30px; font-family: var(--display); font-size: var(--t-label); color: var(--receipt-ink);
  background: linear-gradient(180deg, var(--j-steel-hi), var(--j-steel)); border: 3px solid var(--j-steel-lo);
}
.g3d-lift-button.is-lit { border-color: var(--j-led); box-shadow: 0 0 10px var(--j-led-glow), inset 0 0 0 1px var(--j-led); }
.g3d-lift-gauge { position: relative; background: var(--j-seam); border: 2px solid var(--j-steel-lo); }
.g3d-lift-gauge-dot { position: absolute; left: 2px; right: 2px; height: 10px; top: calc(var(--k, 0) * (100% - 10px)); background: var(--j-led); box-shadow: 0 0 8px var(--j-led-glow); }
.g3d-lift[data-dir='up'] .g3d-lift-gauge-dot { top: calc((1 - var(--k, 0)) * (100% - 10px)); }
.g3d-lift-caption, .g3d-lift-status { position: absolute; left: 50%; translate: -50% 0; margin: 0; text-align: center; white-space: nowrap; }
.g3d-lift-caption {
  bottom: 12vh; padding: 10px 18px; font-family: var(--display); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.12em;
  background: var(--g3d-glass-2); border: 2px solid var(--g3d-line); box-shadow: 4px 4px 0 var(--shadow);
}
/* the world building below: the same glass chip as the caption, so it never sits bare on the steel */
.g3d-lift-status {
  bottom: calc(12vh - 52px); padding: 4px 12px; font-family: var(--sans); font-size: var(--t-body); color: var(--screen-ink);
  background: var(--g3d-glass-2); border: 2px solid var(--g3d-line);
}
.g3d-lift-status:empty { display: none; }

/* ======================================================= the drive */
.g3d-drive { background: var(--j-dusk-1); opacity: 0; transition: opacity 0.2s var(--g3d-ease); }
.g3d-drive.is-on { opacity: 1; }
.g3d-drive-sky { position: absolute; inset: 0; background: linear-gradient(180deg, var(--j-dusk-1) 0%, var(--j-dusk-2) 42%, var(--j-dusk-3) 74%, var(--j-dusk-4) 100%); }
.g3d-drive-far, .g3d-drive-near { position: absolute; left: 0; width: 200%; display: flex; }
.g3d-drive-far { bottom: 24vh; height: 42vh; }
.g3d-drive-near { bottom: 20vh; height: 30vh; }
.g3d-drive-skyline { width: 50%; height: 100%; flex: none; }
.g3d-drive-far .g3d-drive-tower { fill: var(--j-tower-far); }
.g3d-drive-near .g3d-drive-tower { fill: var(--j-tower-near); }
.g3d-drive-window { fill: var(--gold); opacity: 0.55; }
.g3d-drive-near .g3d-drive-window { opacity: 0.8; }
.g3d-drive.is-on .g3d-drive-far { animation: g3d-drive-pan 14s linear infinite; }
.g3d-drive.is-on .g3d-drive-near { animation: g3d-drive-pan 4.5s linear infinite; }
@keyframes g3d-drive-pan { to { transform: translateX(-50%); } }
.g3d-drive-road {
  position: absolute; left: 0; right: 0; bottom: 0; height: 20vh;
  background:
    linear-gradient(180deg, var(--j-brass) 0 3px, transparent 3px),
    repeating-linear-gradient(90deg, var(--screen-ink) 0 70px, transparent 70px 160px) 0 58% / 100% 5px no-repeat,
    var(--j-road);
}
.g3d-drive.is-on .g3d-drive-road { animation: g3d-drive-lane 0.35s linear infinite; }
@keyframes g3d-drive-lane { to { background-position: 0 0, -160px 58%, 0 0; } }
/* speed lines: each streak runs right to left across the whole width, its head bright, its tail fading */
.g3d-drive-lines {
  position: absolute; inset: 9vh 0 5vh 0; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.g3d-drive-streak { position: absolute; left: 100%; top: var(--y); width: var(--w); height: 2px; background: linear-gradient(90deg, var(--j-streak), transparent); }
.g3d-drive-streak.is-cyan { height: 1px; background: linear-gradient(90deg, var(--j-streak-cyan), transparent); }
.g3d-drive.is-on .g3d-drive-streak { animation: g3d-drive-streak var(--t, 0.5s) linear var(--d, 0s) infinite; }
@keyframes g3d-drive-streak { to { transform: translateX(calc(-100vw - 100%)); } }
/* reduced motion: a still frame with its speed lines drawn in place, like a comic panel */
.g3d-drive.g3d-still .g3d-drive-streak { left: var(--x, 50%); }
@media (prefers-reduced-motion: reduce) { .g3d-drive .g3d-drive-streak { left: var(--x, 50%); } }
.g3d-drive-carwrap { position: absolute; left: 50%; bottom: 7vh; width: min(52vw, 620px); translate: -58% 0; }
/* the tail light's trail behind, the headlights' throw ahead */
.g3d-drive-carwrap::before {
  content: ''; position: absolute; right: 96.6%; top: 56.5%; width: 36vw; height: 3px;
  background: linear-gradient(90deg, transparent, var(--j-tail)); opacity: 0.8;
}
.g3d-drive-carwrap::after {
  content: ''; position: absolute; left: 97%; top: 52%; width: 16vw; height: 20%;
  background: linear-gradient(90deg, var(--j-beam), transparent);
  clip-path: polygon(0 42%, 100% 0, 100% 100%, 0 58%);
}
.g3d-drive.is-on .g3d-drive-carwrap { animation: g3d-drive-in 0.9s var(--g3d-ease) both, g3d-drive-bob 0.24s steps(2) 0.9s infinite; }
@keyframes g3d-drive-in { from { transform: translateX(-70vw); } }
@keyframes g3d-drive-bob { 50% { transform: translateY(-2px); } }
.g3d-drive-car { display: block; width: 100%; height: auto; overflow: visible; }
.g3d-drive-shadow { fill: var(--j-car-shadow); }
.g3d-drive-paint-hi { stop-color: var(--j-paint-hi); }
.g3d-drive-paint { stop-color: var(--j-paint); }
.g3d-drive-paint-lo { stop-color: var(--j-paint-lo); }
.g3d-drive-glass-hi { stop-color: var(--j-glass-hi); }
.g3d-drive-glass-lo { stop-color: var(--j-glass-lo); }
.g3d-drive-canopy { stroke: var(--j-canopy-edge); stroke-width: 1.5; }
.g3d-drive-shine { fill: none; stroke: var(--j-shine); stroke-width: 2.5; }
.g3d-drive-intake { fill: var(--j-intake); }
.g3d-drive-tail { fill: var(--j-tail); filter: drop-shadow(0 0 6px var(--j-tail)); }
.g3d-drive-head { fill: var(--screen-ink); filter: drop-shadow(0 0 6px var(--screen-ink)); }
.g3d-drive-tyre { fill: var(--j-tyre); }
.g3d-drive-rim { fill: var(--j-rim); stroke: var(--j-rim-edge); stroke-width: 2; }
.g3d-drive-spokes rect { fill: var(--j-spoke); }
.g3d-drive-hub { fill: var(--j-brass); }
.g3d-drive.is-on .g3d-drive-spokes { animation: g3d-drive-spin 0.18s linear infinite; }
@keyframes g3d-drive-spin { to { transform: rotate(360deg); } }
.g3d-drive-card {
  position: absolute; left: 50%; top: 10vh; translate: -50% 0; display: grid; justify-items: center; gap: 12px; text-align: center;
  padding: 18px 28px 20px; background: var(--g3d-glass-2); border: 2px solid var(--g3d-line); box-shadow: 6px 6px 0 var(--shadow);
}
.g3d-drive.is-on .g3d-drive-card { animation: g3d-drive-sweep 0.6s var(--g3d-ease) 0.15s both; }
@keyframes g3d-drive-sweep { from { transform: translateX(45vw) skewX(-14deg); opacity: 0; } 60% { opacity: 1; } }
.g3d-drive-kicker { margin: 0; font-family: var(--display); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); }
.g3d-drive-route {
  margin: 0; display: flex; align-items: center; gap: 0.6em; font-family: var(--display); font-size: var(--t-h2); line-height: 1.2;
  text-transform: uppercase; text-shadow: var(--g3d-text-lift); white-space: nowrap;
}
/* the arrow is drawn, not a glyph (the pixel face has no arrow, so a fallback font sat low and thin) */
.g3d-drive-arrow {
  display: inline-block; flex: none; width: 1.3em; height: 0.8em; background: var(--gold);
  clip-path: polygon(0 36%, 56% 36%, 56% 0, 100% 50%, 56% 100%, 56% 64%, 0 64%);
}
.g3d-drive-dest { margin: 0; font-family: var(--sans); font-size: var(--t-lede); color: var(--screen-ink); }

/* ======================================================= the nap */
.g3d-nap { display: grid; place-content: center; justify-items: center; gap: 18px; padding: 24px; text-align: center; opacity: 0; transition: opacity 0.6s var(--g3d-ease); }
.g3d-nap.is-on { opacity: 1; }
.g3d-nap-night { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 30%, var(--j-night-1), var(--j-night-2) 75%); transition: filter 1.2s var(--g3d-ease); }
.g3d-nap-night::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, var(--j-dawn)); opacity: 0; transition: opacity 1.2s var(--g3d-ease); }
.g3d-nap.is-morning .g3d-nap-night::after { opacity: 0.85; }
.g3d-nap-moon { position: absolute; right: 18%; top: 14%; width: 56px; height: 56px; border-radius: 50%; box-shadow: -14px 6px 0 0 var(--screen-ink); }
.g3d-nap-star { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; background: var(--screen-ink); animation: g3d-nap-twinkle 2.4s steps(2) var(--d) infinite; }
@keyframes g3d-nap-twinkle { 50% { opacity: 0.25; } }
.g3d-nap-quote { margin: 0; max-width: 36rem; padding: 14px 20px; background: var(--g3d-glass); border-left: 4px solid var(--gold); text-align: left; }
.g3d-nap-quote[hidden] { display: none; }
.g3d-nap-quote p { margin: 0 0 6px; font-family: var(--sans); font-size: var(--t-lede); line-height: 1.2; }
.g3d-nap-quote cite { font-style: normal; font-family: var(--display); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); }
.g3d-nap-title { margin: 0; font-family: var(--display); font-size: var(--t-h2); line-height: 1.3; text-shadow: var(--g3d-text-lift); }
.g3d-nap-z { margin: 0; height: 3.2em; display: flex; align-items: flex-end; gap: 0.3em; font-family: var(--display); color: var(--cyan); }
.g3d-nap-z span { display: inline-block; animation: g3d-nap-z 2.4s steps(8) infinite; }
.g3d-nap-z span:nth-child(1) { font-size: var(--t-label); }
.g3d-nap-z span:nth-child(2) { font-size: var(--t-figure); animation-delay: 0.4s; }
.g3d-nap-z span:nth-child(3) { font-size: var(--t-h2); animation-delay: 0.8s; }
@keyframes g3d-nap-z { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-1.4em); opacity: 0; } }
.g3d-nap-clock { margin: 0; min-height: 1.5em; font-family: var(--display); font-size: var(--t-figure); color: var(--gold); text-shadow: var(--g3d-text-lift); }
.g3d-nap.is-morning .g3d-nap-z { visibility: hidden; }

/* ======================================================= keynote captions */
.g3d-stagecap { background: transparent; }
.g3d-stagecap-title {
  position: absolute; left: 50%; bottom: 14vh; translate: -50% 0; width: min(760px, 90vw); display: grid; justify-items: center; gap: 12px; text-align: center;
  opacity: 0; transform: translateY(14px); transition: opacity 0.4s var(--g3d-ease), transform 0.4s var(--g3d-ease);
}
.g3d-stagecap-title.is-on { opacity: 1; transform: none; }
.g3d-stagecap-kicker { margin: 0; padding: 6px 12px; font-family: var(--display); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold); background: var(--g3d-glass); }
.g3d-stagecap-head { margin: 0; font-family: var(--display); font-size: var(--t-h2); line-height: 1.3; text-shadow: var(--g3d-text-lift), 0 0 24px var(--j-halo); }
.g3d-stagecap-sub { margin: 0; padding: 4px 12px; font-family: var(--sans); font-size: var(--t-lede); background: var(--g3d-glass); }
.g3d-stagecap-lower {
  position: absolute; left: 4vw; bottom: 9vh; display: grid; gap: 4px; padding: 10px 18px 10px 16px;
  background: var(--g3d-glass-2); border-left: 6px solid var(--gold); box-shadow: 4px 4px 0 var(--shadow);
  opacity: 0; transform: translateX(-20px); transition: opacity 0.35s var(--g3d-ease), transform 0.35s var(--g3d-ease);
}
.g3d-stagecap-lower.is-on { opacity: 1; transform: none; }
.g3d-stagecap-name { margin: 0; font-family: var(--display); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.08em; }
.g3d-stagecap-role { margin: 0; font-family: var(--sans); font-size: var(--t-body); color: var(--screen-dim); }
.g3d-stagecap-line {
  position: absolute; left: 50%; bottom: 20vh; translate: -50% 0; max-width: min(820px, 88vw); margin: 0; padding: 10px 18px;
  font-family: var(--sans); font-size: var(--t-lede); line-height: 1.2; text-align: center;
  background: var(--g3d-glass-2); border: 2px solid var(--g3d-line); opacity: 0;
}
.g3d-stagecap-line.is-on { opacity: 1; animation: g3d-rise 0.3s var(--g3d-ease) both; }
.g3d-stagecap-line.is-narration { color: var(--screen-dim); }
.g3d-stagecap-line b { font-family: var(--display); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); margin-right: 0.4em; }
.g3d-stagecap-skip { position: absolute; right: 4vw; bottom: 9vh; margin: 0; display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-family: var(--sans); font-size: var(--t-body); background: var(--g3d-glass); opacity: 0; }
.g3d-stagecap-skip.is-on { opacity: 1; }
.g3d-stagecap-skip kbd { font-family: var(--display); font-size: var(--t-label); color: var(--screen-ink); border: 2px solid var(--g3d-line); padding: 4px 6px; background: transparent; }

/* the press Q&A chip: top centre, clear of the dialog and its notes */
.g3d-stagecap-qa {
  position: absolute; left: 50%; top: 4vh; translate: -50% 0; display: grid; justify-items: center; gap: 8px; width: max-content; max-width: min(900px, 92vw); box-sizing: border-box;
  padding: 10px 16px 12px; text-align: center; background: var(--g3d-glass-2); border: 2px solid var(--g3d-line); box-shadow: 4px 4px 0 var(--shadow);
  opacity: 0; transform: translateY(-10px); transition: opacity 0.3s var(--g3d-ease), transform 0.3s var(--g3d-ease);
}
.g3d-stagecap-qa.is-on { opacity: 1; transform: none; }
/* a small window: the dialog's notes card rises under the chip, so it steps aside, header only */
.g3d-stagecap-qa.is-compact { left: max(16px, 2vw); translate: 0 0; padding: 8px 12px; }
.g3d-stagecap-qa.is-compact .g3d-stagecap-qa-prep { display: none; }
.g3d-stagecap-qa-head { display: flex; align-items: center; gap: 14px; }
.g3d-stagecap-qa-k { margin: 0; font-family: var(--display); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); }
.g3d-stagecap-pips { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.g3d-stagecap-pips li { width: 12px; height: 12px; box-sizing: border-box; border: 2px solid var(--g3d-line); }
.g3d-stagecap-pips li.is-now { border-color: var(--gold); animation: g3d-lift-blink 1s steps(2) infinite; }
.g3d-stagecap-pips li.is-right { background: var(--gold); border-color: var(--gold); }
.g3d-stagecap-pips li.is-wrong { background: var(--magenta); border-color: var(--magenta); }
.g3d-stagecap-qa-prep { margin: 0; font-family: var(--sans); font-size: var(--t-body); line-height: 1.4; color: var(--screen-ink); }
.g3d-stagecap-qa-prep:empty { display: none; }
.g3d-stagecap-qa-prep b {
  display: inline-block; margin-right: 10px; padding: 3px 7px 2px; vertical-align: 2px;
  font-family: var(--display); font-size: var(--t-label); font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em;
}
.g3d-stagecap-qa-prep .is-prep { color: var(--screen); background: var(--gold); }
.g3d-stagecap-qa-prep .is-cold { color: var(--screen-ink); border: 2px solid var(--magenta); padding: 1px 5px 0; }

/* ======================================================= fallback panels */
.g3d-jpanel { position: fixed; inset: 0; display: grid; pointer-events: auto; background: var(--j-scrim); opacity: 0; transition: opacity 0.2s var(--g3d-ease); }
.g3d-jpanel.is-on { opacity: 1; }
.g3d-jask { align-items: end; justify-items: center; padding: 0 16px 6vh; }
.g3d-jask-card, .g3d-jcard-card {
  box-sizing: border-box; display: grid; gap: 12px; padding: 18px 20px; color: var(--screen-ink);
  background: var(--g3d-glass-2); border: 2px solid var(--g3d-line); box-shadow: 6px 6px 0 var(--shadow);
}
.g3d-jask-card { width: min(760px, 100%); }
.g3d-jask-who { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.g3d-jask-name { font-family: var(--display); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); }
.g3d-jask-role { font-family: var(--sans); font-size: var(--t-body); color: var(--screen-dim); }
.g3d-jask-q { margin: 0; font-family: var(--sans); font-size: var(--t-lede); line-height: 1.2; }
.g3d-jask-notes { padding: 10px 14px; background: var(--receipt); color: var(--receipt-ink); border-left: 6px solid var(--gold); }
.g3d-jask-notes[hidden] { display: none; }
.g3d-jask-notes p { margin: 0; font-family: var(--sans); font-size: var(--t-body); line-height: 1.4; }
.g3d-jask-notes .g3d-jask-notes-k { font-family: var(--display); font-size: var(--t-label); text-transform: uppercase; margin-bottom: 6px; }
.g3d-jask-timer { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.g3d-jask-timer[hidden] { display: none; }
.g3d-jask-timer i { height: 8px; background: var(--magenta); transform-origin: left; transform: scaleX(var(--left, 1)); border: 1px solid var(--g3d-line); }
.g3d-jask-secs { font-family: var(--display); font-size: var(--t-label); color: var(--screen-ink); }
.g3d-jask-choices { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.g3d-jask-choice {
  width: 100%; min-height: 44px; display: flex; gap: 12px; align-items: center; padding: 8px 12px; text-align: left; cursor: pointer;
  font-family: var(--sans); font-size: var(--t-body); line-height: 1.4; color: var(--screen-ink); background: var(--screen); border: 2px solid var(--g3d-line);
}
.g3d-jask-choice:hover { border-color: var(--gold); }
.g3d-jask-choice kbd { flex: none; font-family: var(--display); font-size: var(--t-label); color: var(--gold); border: 2px solid var(--gold); padding: 4px 6px; background: transparent; }
.g3d-jcard { place-items: center; padding: 16px; }
.g3d-jcard-card { width: min(560px, 100%); border-top: 6px solid var(--co, var(--gold)); }
.g3d-jcard-kicker { margin: 0; font-family: var(--display); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); }
.g3d-jcard-title { margin: 0; font-family: var(--display); font-size: var(--t-h2); line-height: 1.3; font-weight: 400; }
.g3d-jcard-body { display: grid; gap: 8px; }
.g3d-jcard-body p { margin: 0; font-family: var(--sans); font-size: var(--t-body); line-height: 1.2; }
.g3d-jcard-body .g3d-jcard-tag, .g3d-jcard-body .g3d-jcard-pay, .g3d-jcard-body .g3d-jcard-score { font-size: var(--t-lede); }
.g3d-jcard-pay { color: var(--g3d-money); }
.g3d-jcard-note { color: var(--screen-dim); }
.g3d-jcard-notes, .g3d-jcard-rev { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.g3d-jcard-rev li { display: flex; justify-content: space-between; gap: 12px; font-family: var(--sans); font-size: var(--t-body); border-bottom: 1px solid var(--g3d-line); }
.g3d-jcard-todo { color: var(--gold); }
.g3d-jcard-go { justify-self: end; min-height: 44px; }

/* ======================================================= cutscenes
   While a trip or the keynote runs (body.g3d-cinematic, journey/kit.js
   cinematic()), the crosshair, the interact prompt and the corner coffee
   button step out of the frame. */
.g3d-cinematic .g3d-cross, .g3d-cinematic .g3d-prompt, .g3d-cinematic .g3d-bmc { visibility: hidden; }

/* ======================================================= still */
.g3d-still, .g3d-still *, .g3d-still *::before, .g3d-still *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .g3d-journey *, .g3d-journey *::before, .g3d-journey *::after, .g3d-tip, .g3d-tip * { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Shops, menus and the crypto ATM
   ========================================================================== */
/* 3D · shops (merged into styles.css at integration)
   The shop, restaurant, cart and pantry sheet, and the crypto ATM.
   Each storefront dresses the one sheet in its own colours through
   --shop-* properties that ui/shop.js sets from game/shop/logic.js
   THEMES (every text pair there is tested for WCAG AA contrast). Square
   corners, hard pixel shadows, stepped motion, the two type families.
   The panels measure themselves and step down through .fit-1 … .fit-3
   until every card fits the viewport. */

.g3d-shop, .g3d-atm {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px;
  pointer-events: auto; font-family: var(--sans); font-size: var(--t-body); line-height: 1.4;
}
.g3d-shop [hidden], .g3d-atm [hidden] { display: none !important; }
.g3d-shop-scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--screen) 66%, transparent); animation: g3d-shop-dim 0.2s var(--g3d-ease); }
.g3d-shop :focus-visible, .g3d-atm :focus-visible { outline: 3px solid var(--shop-focus); outline-offset: 3px; }
/* Key caps: the site's kbd, recoloured for whatever surface they sit on. */
.g3d-shop kbd, .g3d-atm kbd { margin: 0; padding: 3px 6px; background: transparent; color: inherit; border-color: currentColor; line-height: 1.2; }

/* ---------------------------------------------------------------- sheet */
.g3d-shop-sheet {
  position: relative; display: flex; width: min(1120px, 100%); max-height: calc(100vh - 32px);
  padding: 4px; background: var(--shop-frame); box-shadow: 10px 10px 0 color-mix(in srgb, var(--screen) 85%, transparent);
  animation: g3d-shop-in 0.28s var(--g3d-ease);
}
.g3d-shop-inner {
  flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--shop-surface); color: var(--shop-text);
}
/* Slide only: text is at full contrast from the first frame. */
@keyframes g3d-shop-in { from { translate: 0 18px; } }
@keyframes g3d-shop-dim { from { opacity: 0; } }

.g3d-shop-head {
  flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px;
  padding: 10px 20px; background: var(--shop-head); color: var(--shop-head-text);
}
.g3d-shop-head :focus-visible { outline-color: var(--shop-head-text); }
.g3d-shop-kicker { margin: 0 0 5px; font-family: var(--display); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.08em; }
.g3d-shop-title { margin: 0; font-family: var(--display); font-size: var(--t-h2); line-height: 1.15; letter-spacing: 0.02em; }
.g3d-shop-tag { margin: 4px 0 0; font-size: var(--t-body); }

.g3d-shop-purse {
  position: relative; display: grid; justify-items: end; gap: 6px; min-width: 9.5rem; padding: 8px 12px;
  background: var(--screen); border: 3px solid var(--shop-head-text);
}
.g3d-shop-purse-k { font-family: var(--display); font-size: var(--t-label); text-transform: uppercase; color: var(--screen-dim); }
.g3d-shop-usd { font-family: var(--display); font-size: var(--t-figure); color: var(--g3d-money); font-variant-numeric: tabular-nums; }
.g3d-shop-purse-t { margin-top: -2px; font-size: var(--t-small); line-height: 1; color: var(--screen-dim); white-space: nowrap; }
.g3d-shop-delta {
  position: absolute; right: -3px; top: calc(100% + 4px); z-index: 3; padding: 5px 8px;
  font-family: var(--display); font-size: var(--t-label); color: var(--magenta); background: var(--screen); border: 2px solid var(--magenta);
  animation: g3d-shop-delta 1.2s var(--g3d-ease) forwards;
}
@keyframes g3d-shop-delta { 0% { opacity: 0; translate: 0 -10px; } 15% { opacity: 1; translate: 0 0; } 75% { opacity: 1; } 100% { opacity: 0; translate: 0 10px; } }

.g3d-shop-close, .g3d-atm-close {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; cursor: pointer;
  background: transparent; color: var(--shop-head-text); border: 3px solid currentColor;
  font-family: var(--display); font-size: var(--t-label); text-transform: uppercase;
}
.g3d-shop-close:hover { background: var(--shop-head-text); color: var(--shop-head); }

.g3d-shop-trim { flex: none; height: 12px; }

/* ---------------------------------------------------------------- keeper */
.g3d-shop-keeper { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 20px 2px; }
.g3d-shop-bust { width: 60px; height: 60px; display: block; image-rendering: pixelated; background: var(--shop-card); border: 3px solid var(--shop-line); }
.g3d-shop-bubble { position: relative; padding: 8px 14px 10px; background: var(--shop-card); border: 3px solid var(--shop-line); }
.g3d-shop-bubble::before, .g3d-shop-bubble::after { content: ''; position: absolute; background: var(--shop-line); }
.g3d-shop-bubble::before { left: -11px; top: 20px; width: 8px; height: 8px; }
.g3d-shop-bubble::after { left: -17px; top: 26px; width: 6px; height: 6px; }
.g3d-shop-who {
  margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  font-family: var(--display); font-size: var(--t-label); text-transform: uppercase; color: var(--shop-accent);
}
.g3d-shop-role { color: var(--shop-dim); text-transform: none; }
.g3d-shop-says { margin: 0; min-height: 1.1em; color: var(--shop-text); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
/* A new line nudges in; it never hides, so it reads even if motion stalls. */
.g3d-shop-says.is-new { animation: g3d-shop-say 0.3s var(--g3d-ease); }
@keyframes g3d-shop-say { from { translate: 6px 0; } }

.g3d-shop-side { display: grid; gap: 8px; justify-items: end; max-width: 27rem; }
.g3d-shop-needs { display: grid; gap: 8px; min-width: 15rem; }
.g3d-shop-need-row {
  margin: 0; display: grid; grid-template-columns: 5.2rem 1fr 2.2rem; align-items: center; gap: 8px;
  font-family: var(--display); font-size: var(--t-label); text-transform: uppercase; color: var(--shop-text);
}
.g3d-shop-bar { height: 14px; padding: 2px; border: 2px solid var(--shop-text); }
.g3d-shop-bar i { display: block; height: 100%; background: var(--shop-accent); transition: width 0.5s var(--g3d-ease); }
.g3d-shop-need-row b { font-weight: 400; text-align: right; }

/* What Ryan wears (or has on his office walls), and what it adds up to. */
.g3d-shop-kit { display: grid; gap: 6px; }
.g3d-shop-kit-head { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.g3d-shop-kit-k { flex: none; font-family: var(--display); font-size: var(--t-label); text-transform: uppercase; color: var(--shop-dim); }
.g3d-shop-kit.is-trying .g3d-shop-kit-k { color: var(--shop-accent); }
/* One line, always: trying things on never moves the cards. */
.g3d-shop-kit-fx { min-width: 0; max-width: 20rem; text-align: right; color: var(--shop-dim); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g3d-shop-kit-fx b { font-weight: 400; color: var(--shop-accent); }
.g3d-shop-kit-fx.is-preview { color: var(--shop-text); }
.g3d-shop-kit-slots { margin: 0; padding: 0; list-style: none; display: flex; gap: 6px; justify-content: flex-end; }
.g3d-shop-kit-slot {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px;
  background: var(--shop-stage); border: 2px solid var(--shop-line);
}
.g3d-shop-kit-slot.is-empty { border-style: dashed; background: transparent; }
.g3d-shop-kit-slot.is-trying { border: 2px dashed var(--shop-accent); box-shadow: 3px 3px 0 var(--shop-accent); }
.g3d-shop-kit-slot.is-trying .g3d-shop-kit-icon { animation: g3d-shop-bob 0.8s steps(2) infinite; }
/* Bought or put on: it drops into its slot. */
.g3d-shop-kit-slot.is-pop { border-color: var(--shop-ok); animation: g3d-shop-pop 0.42s var(--g3d-ease); }
@keyframes g3d-shop-pop { 0% { scale: 1.45; translate: 0 -8px; } 55% { scale: 0.92; translate: 0 1px; } 100% { scale: 1; translate: 0 0; } }
.g3d-shop-kit-art { display: contents; }
.g3d-shop-kit-icon { display: block; width: 48px; height: 48px; margin: -4px; image-rendering: pixelated; }
.g3d-shop-kit-letter { font-family: var(--display); font-size: var(--t-label); color: var(--shop-dim); }

/* ---------------------------------------------------------------- grid */
.g3d-shop-grid {
  flex: 1 1 auto; min-height: 0; overflow: auto; margin: 0; padding: 12px 20px 14px; list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-content: start;
}
/* When cards still scroll, soft edges say there is more above or below. */
.g3d-shop-grid.is-scroll {
  background:
    linear-gradient(var(--shop-surface) 30%, transparent) top / 100% 36px no-repeat local,
    linear-gradient(transparent, var(--shop-surface) 70%) bottom / 100% 36px no-repeat local,
    linear-gradient(color-mix(in srgb, var(--shop-text) 30%, transparent), transparent) top / 100% 12px no-repeat scroll,
    linear-gradient(transparent, color-mix(in srgb, var(--shop-text) 30%, transparent)) bottom / 100% 12px no-repeat scroll;
}
.g3d-shop[data-type="food"] .g3d-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3d-shop[data-kind="cart"] .g3d-shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.g3d-shop-card, .g3d-shop-dish {
  position: relative; background: var(--shop-card); border: 3px solid var(--shop-line);
  transition: translate 0.15s var(--g3d-ease), box-shadow 0.15s var(--g3d-ease);
}
.g3d-shop-card:hover, .g3d-shop-card:focus-within, .g3d-shop-dish:hover, .g3d-shop-dish:focus-within {
  translate: 0 -3px; box-shadow: 5px 5px 0 var(--shop-line);
}
.g3d-shop-card { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px 10px; }

.g3d-shop-stage { --stage: 100px; --icon: 96px; position: relative; display: grid; place-items: center; height: var(--stage); background: var(--shop-stage); overflow: hidden; }
.g3d-shop-icon { position: relative; z-index: 1; display: block; width: var(--icon); height: var(--icon); image-rendering: pixelated; }
.g3d-shop-card:hover .g3d-shop-icon, .g3d-shop-card:focus-within .g3d-shop-icon { animation: g3d-shop-bob 0.8s steps(2) infinite; }
@keyframes g3d-shop-bob { 50% { translate: 0 -3px; } }

/* The slot, as a tag in the corner of the display. */
.g3d-shop-slot {
  position: absolute; left: 0; top: 0; z-index: 2; margin: 0; padding: 4px 6px;
  font-family: var(--display); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--shop-dim); background: var(--shop-card);
}
.g3d-shop-stamp {
  position: absolute; right: 6px; top: 8px; z-index: 2; padding: 4px 6px; rotate: -8deg;
  font-family: var(--display); font-size: var(--t-label); text-transform: uppercase;
  color: var(--shop-ok); background: var(--shop-card); border: 3px solid currentColor;
}
.g3d-shop-stamp:empty { display: none; }
.is-stamping .g3d-shop-stamp { animation: g3d-shop-stamp 0.45s var(--g3d-ease); }
/* The stamp slams down; it is readable on every frame. */
@keyframes g3d-shop-stamp { 0% { scale: 1.5; rotate: -20deg; } 60% { scale: 0.9; rotate: -6deg; } 100% { scale: 1; rotate: -8deg; } }
.is-shaking { animation: g3d-shop-shake 0.36s var(--g3d-ease); }
@keyframes g3d-shop-shake { 20%, 60% { translate: -5px 0; } 40%, 80% { translate: 5px 0; } }

.g3d-shop-name { margin: 4px 0 0; font-family: var(--display); font-size: var(--t-label); line-height: 1.55; color: var(--shop-text); }
.g3d-shop-desc { --lines: 3; margin: 0; line-height: 1.4; color: var(--shop-dim); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lines); line-clamp: var(--lines); overflow: hidden; }
.g3d-shop-fx { margin: 2px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; line-height: 1.4; color: var(--shop-accent); }
.g3d-shop-fx li, .g3d-shop-gain span { position: relative; padding-left: 14px; }
.g3d-shop-fx li::before, .g3d-shop-gain span::before { content: ''; position: absolute; left: 0; top: 0.42em; width: 6px; height: 6px; background: currentColor; }
.g3d-shop-row {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-top: 8px; border-top: 2px dashed var(--shop-line);
}
.g3d-shop-price { margin: 0; font-family: var(--display); font-size: var(--t-figure); color: var(--shop-accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.g3d-shop-card.is-owned .g3d-shop-price { font-size: var(--t-label); color: var(--shop-dim); }
.g3d-shop-note { margin: 0; line-height: 1.4; color: var(--shop-dim); }

.g3d-shop-act {
  flex: none; min-height: 44px; min-width: 44px; padding: 10px 14px; cursor: pointer;
  font-family: var(--display); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--shop-button-text); background: var(--shop-button); border: 3px solid var(--shop-button);
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--screen) 55%, transparent); transition: translate 0.08s var(--g3d-ease), box-shadow 0.08s var(--g3d-ease);
}
.g3d-shop-act:hover { filter: brightness(1.08); }
.g3d-shop-act:active { translate: 2px 2px; box-shadow: 2px 2px 0 color-mix(in srgb, var(--screen) 55%, transparent); }
.g3d-shop-act.is-secondary, .g3d-shop-act.is-short { color: var(--shop-text); background: transparent; border-color: var(--shop-dim); box-shadow: none; }
.g3d-shop-act.is-short { border-style: dashed; }
.g3d-shop-act[aria-disabled="true"] { cursor: default; }

/* ---------------------------------------------------------------- menus */
.g3d-shop-dish { --plate: 88px; --icon: 72px; display: grid; grid-template-columns: var(--plate) minmax(0, 1fr) auto; align-items: center; gap: 10px 14px; padding: 10px 12px; }
.g3d-shop-plate { position: relative; display: grid; place-items: center; width: var(--plate); height: var(--plate); background: var(--shop-stage); }
.g3d-shop-plate .g3d-shop-icon { width: var(--icon); height: var(--icon); }
.g3d-shop-plate .g3d-shop-stamp { right: auto; left: -6px; top: -8px; }
.g3d-shop-dish:hover .g3d-shop-icon, .g3d-shop-dish:focus-within .g3d-shop-icon { animation: g3d-shop-bob 0.8s steps(2) infinite; }
.g3d-shop-dish-name {
  margin: 0 0 4px; display: flex; align-items: baseline; gap: 8px;
  font-family: var(--display); font-size: var(--t-label); line-height: 1.55; color: var(--shop-text);
}
.g3d-shop-dish-t { flex: 0 1 auto; }
.g3d-shop-dish > .g3d-shop-act { max-width: 9.5rem; line-height: 1.5; }
.g3d-shop-leader { flex: 1; min-width: 12px; border-bottom: 3px dotted var(--shop-line); translate: 0 -4px; }
.g3d-shop-dish .g3d-shop-desc { --lines: 2; }
.g3d-shop-dish .g3d-shop-price { font-size: var(--t-label); }
.g3d-shop-gain { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 2px 16px; color: var(--shop-accent); }
.g3d-shop-confirm { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 10px; border-top: 2px dashed var(--shop-line); }
.g3d-shop-warn { flex: 1 1 100%; margin: 0; color: var(--shop-text); }
.g3d-shop-dish.is-confirming { border-color: var(--shop-accent); box-shadow: 5px 5px 0 var(--shop-accent); }

.g3d-shop[data-kind="cart"] .g3d-shop-dish { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.g3d-shop[data-kind="cart"] .g3d-shop-dish-body { width: 100%; }
.g3d-shop[data-kind="cart"] .g3d-shop-gain { justify-content: center; }

/* ---------------------------------------------------------------- footer */
.g3d-shop-foot {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 20px 12px; border-top: 3px solid var(--shop-line);
}
.g3d-shop-news { min-width: 0; }
.g3d-shop-status { margin: 0; min-height: 1.1em; color: var(--shop-text); }
.g3d-shop-status[data-tone]:not([data-tone=""])::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 10px; background: var(--shop-accent); vertical-align: 0.12em; }
.g3d-shop-keys { margin: 0; flex: none; display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: var(--t-label); text-transform: uppercase; color: var(--shop-dim); }
.g3d-shop-status { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
/* Short of dollars: the way to the ATM takes the key legend's place. */
.g3d-shop-hint {
  flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; cursor: pointer;
  font-family: var(--display); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--shop-text); background: transparent; border: 3px solid var(--shop-accent);
}
.g3d-shop-hint:hover { color: var(--shop-button-text); background: var(--shop-button); border-color: var(--shop-button); }
/* A little map pin, in pixels. */
.g3d-shop-hint-pin { position: relative; width: 10px; height: 14px; }
.g3d-shop-hint-pin::before { content: ''; position: absolute; left: 0; top: 0; width: 10px; height: 10px; background: currentColor; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 50% 100%, 0 70%, 0 30%); }
.g3d-shop-hint-pin::after { content: ''; position: absolute; left: 4px; top: 12px; width: 2px; height: 2px; background: currentColor; }
.g3d-shop.is-cash-short .g3d-shop-keys { display: none; }

/* ---------------------------------------------------------------- storefronts */
/* Pravda: black lacquer, cream hairlines, a spotlight on each piece. */
.g3d-shop[data-kind="boutique"] .g3d-shop-head { border-bottom: 5px double var(--shop-head-text); }
.g3d-shop[data-kind="boutique"] .g3d-shop-title { text-transform: uppercase; letter-spacing: 0.42em; }
.g3d-shop[data-kind="boutique"] .g3d-shop-stage { background: radial-gradient(ellipse 55% 75% at 50% 12%, color-mix(in srgb, var(--screen-ink) 20%, transparent), transparent 70%), var(--shop-stage); }
.g3d-shop[data-kind="boutique"] .g3d-shop-stage::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: 8px; height: 6px; background: color-mix(in srgb, var(--screen-ink) 12%, transparent); }

/* Schnike: court orange, speed stripes, a slanted wordmark. */
.g3d-shop[data-kind="athletic"] .g3d-shop-title { text-transform: uppercase; font-style: normal; transform: skewX(-12deg); transform-origin: left; text-shadow: 4px 4px 0 var(--shop-stripe); }
.g3d-shop[data-kind="athletic"] .g3d-shop-trim { height: 10px; background: repeating-linear-gradient(115deg, var(--screen) 0 8px, var(--shop-head) 8px 22px, var(--shop-stripe) 22px 28px, var(--shop-head) 28px 42px); }
.g3d-shop[data-kind="athletic"] .g3d-shop-stage { background: linear-gradient(transparent 80%, var(--shop-head) 80% 84%, transparent 84%), repeating-linear-gradient(135deg, var(--shop-stage) 0 12px, var(--shop-card) 12px 24px); }

/* Basketball Gallery: a white wall, picture lights, museum labels. */
.g3d-shop[data-kind="gallery"] .g3d-shop-card { border-color: var(--shop-line); }
.g3d-shop[data-kind="gallery"] .g3d-shop-stage { background: var(--shop-stage); box-shadow: inset 0 0 0 6px var(--shop-card), inset 0 0 0 9px var(--shop-text); }
.g3d-shop[data-kind="gallery"] .g3d-shop-stage::before { content: ''; position: absolute; top: 9px; left: 50%; width: 46px; height: 6px; translate: -50% 0; background: var(--shop-text); z-index: 2; }
.g3d-shop[data-kind="gallery"] .g3d-shop-stage::after { content: ''; position: absolute; top: 15px; left: 15%; right: 15%; height: 75%; background: linear-gradient(color-mix(in srgb, var(--gold) 55%, transparent), transparent); clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); }
.g3d-shop[data-kind="gallery"] .g3d-shop-stage { --icon: 72px; }
.g3d-shop[data-kind="gallery"].fit-1 .g3d-shop-stage, .g3d-shop[data-kind="gallery"].fit-2 .g3d-shop-stage, .g3d-shop[data-kind="gallery"].fit-3 .g3d-shop-stage { --icon: 48px; }
.g3d-shop[data-kind="gallery"].fit-3 .g3d-shop-stage { box-shadow: inset 0 0 0 3px var(--shop-card), inset 0 0 0 5px var(--shop-text); }
.g3d-shop[data-kind="gallery"].fit-3 .g3d-shop-stage::before { display: none; }
.g3d-shop[data-kind="gallery"] .g3d-shop-name { border-left: 4px solid var(--shop-head); padding-left: 8px; }

/* Nonna Lucia's: a checked tablecloth around a cream menu. */
.g3d-shop[data-kind="pizzeria"] .g3d-shop-sheet { padding: 12px; background: repeating-conic-gradient(var(--shop-head) 0 25%, var(--shop-card) 0 50%) 0 0 / 24px 24px; }
.g3d-shop[data-kind="pizzeria"] .g3d-shop-trim { height: 6px; background: var(--shop-head); }
.g3d-shop[data-kind="pizzeria"] .g3d-shop-title { text-shadow: 3px 3px 0 color-mix(in srgb, var(--shop-text) 45%, transparent); }
.g3d-shop[data-kind="pizzeria"] .g3d-shop-plate { background: radial-gradient(circle at 50% 50%, var(--shop-card) 0 58%, var(--shop-line) 58% 63%, transparent 63%), var(--shop-stage); }

/* Broadway Prime: oxblood leather and a double gold rule. */
.g3d-shop[data-kind="steakhouse"] .g3d-shop-sheet { padding: 6px; background: linear-gradient(135deg, var(--shop-accent), var(--shop-line) 40%, var(--shop-accent) 60%, var(--shop-line)); }
.g3d-shop[data-kind="steakhouse"] .g3d-shop-inner {
  background: radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--shop-accent) 7%, transparent), transparent 55%),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--screen) 10%, transparent) 0 2px, transparent 2px 6px), var(--shop-surface);
}
.g3d-shop[data-kind="steakhouse"] .g3d-shop-head { box-shadow: inset 0 -3px 0 var(--shop-head-text), inset 0 -7px 0 var(--shop-head), inset 0 -9px 0 var(--shop-head-text); padding-bottom: 20px; }
.g3d-shop[data-kind="steakhouse"] .g3d-shop-title { text-transform: uppercase; letter-spacing: 0.16em; }
.g3d-shop[data-kind="steakhouse"] .g3d-shop-dish { box-shadow: inset 0 0 0 3px var(--shop-card), inset 0 0 0 5px var(--shop-line); }
.g3d-shop[data-kind="steakhouse"] .g3d-shop-dish:hover, .g3d-shop[data-kind="steakhouse"] .g3d-shop-dish:focus-within { box-shadow: inset 0 0 0 3px var(--shop-card), inset 0 0 0 5px var(--shop-accent), 5px 5px 0 var(--shop-line); }

/* Irie Pot: green and gold, with a festive striped frame. */
.g3d-shop[data-kind="jamaican"] .g3d-shop-sheet { padding: 8px; background: repeating-linear-gradient(135deg, var(--screen) 0 12px, var(--shop-accent) 12px 18px, var(--shop-head) 18px 30px, var(--shop-accent) 30px 36px); }
.g3d-shop[data-kind="jamaican"] .g3d-shop-trim { height: 8px; background: repeating-linear-gradient(90deg, var(--shop-accent) 0 24px, var(--screen) 24px 30px); }
.g3d-shop[data-kind="jamaican"] .g3d-shop-title { text-shadow: 3px 3px 0 var(--screen); }

/* Yusuf's cart: a striped, scalloped umbrella over a white menu board. */
.g3d-shop[data-kind="cart"] .g3d-shop-trim {
  height: 26px; background: repeating-linear-gradient(90deg, var(--shop-head) 0 32px, var(--shop-card) 32px 64px);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% 10px no-repeat, radial-gradient(circle 16px at 16px 10px, #000 97%, transparent) 0 0 / 32px 26px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% 10px no-repeat, radial-gradient(circle 16px at 16px 10px, #000 97%, transparent) 0 0 / 32px 26px repeat-x;
}
.g3d-shop[data-kind="cart"] .g3d-shop-inner { background: var(--shop-surface); }
.g3d-shop[data-kind="cart"] .g3d-shop-dish .g3d-shop-price { font-size: var(--t-figure); }

/* ---------------------------------------------------------------- fit */
/* Level 1: shorter displays, two lines of description, a tighter header. */
.g3d-shop.fit-1 .g3d-shop-head { padding-block: 8px; }
.g3d-shop.fit-1 .g3d-shop-kicker { margin-bottom: 3px; }
.g3d-shop.fit-1 .g3d-shop-keeper { padding-top: 8px; }
.g3d-shop.fit-1 .g3d-shop-stage { --stage: 80px; --icon: 72px; }
.g3d-shop.fit-1 .g3d-shop-desc { --lines: 2; }
.g3d-shop.fit-1 .g3d-shop-grid { padding-block: 10px; gap: 12px; }
.g3d-shop.fit-1 .g3d-shop-dish { --plate: 76px; --icon: 72px; padding-block: 8px; }
.g3d-shop.fit-1 .g3d-shop-foot { padding-block: 8px 10px; }
/* Level 2: smaller portraits and plates, one line of menu description. */
.g3d-shop.fit-2 .g3d-shop-bust { width: 48px; height: 48px; }
.g3d-shop.fit-2 .g3d-shop-tag { margin-top: 2px; }
.g3d-shop.fit-2 .g3d-shop-stage { --stage: 60px; --icon: 48px; }
.g3d-shop.fit-2 .g3d-shop-card { gap: 3px; padding-top: 6px; }
.g3d-shop.fit-2 .g3d-shop-row { padding-top: 6px; }
.g3d-shop.fit-2 .g3d-shop-act { min-height: 40px; padding-block: 8px; }
.g3d-shop.fit-2 .g3d-shop-dish { --plate: 60px; --icon: 48px; }
.g3d-shop.fit-2 .g3d-shop-dish .g3d-shop-desc { --lines: 1; }
.g3d-shop.fit-2 .g3d-shop-kit-slot { width: 36px; height: 36px; }
.g3d-shop.fit-2 .g3d-shop-kit-icon { width: 24px; height: 24px; margin: 0; }
.g3d-shop.fit-2 .g3d-shop-trim { height: 8px; }
.g3d-shop.fit-2[data-kind="cart"] .g3d-shop-trim { height: 18px; }
/* Level 3: descriptions down to one line, the key legend goes. */
.g3d-shop.fit-3 .g3d-shop-desc { --lines: 1; }
.g3d-shop.fit-3 .g3d-shop-keys { display: none; }
.g3d-shop.fit-3 .g3d-shop-title { font-size: var(--t-figure); }
.g3d-shop.fit-3 .g3d-shop-stage { --stage: 52px; --icon: 48px; }

/* ---------------------------------------------------------------- ATM */
.g3d-atm {
  --atm-body: color-mix(in srgb, var(--screen-dim) 16%, var(--screen));
  --atm-body-2: color-mix(in srgb, var(--screen-dim) 26%, var(--screen));
  --atm-screen: color-mix(in srgb, var(--grass-lo) 12%, var(--screen));
  --atm-ink: color-mix(in srgb, var(--grass-hi) 22%, var(--screen-ink));
  --atm-dim: color-mix(in srgb, var(--grass-hi) 55%, var(--screen-ink));
  --atm-line: color-mix(in srgb, var(--grass-lo) 55%, var(--screen));
  --shop-focus: var(--cyan);
}
.g3d-atm-kiosk {
  position: relative; display: grid; gap: 12px; width: min(880px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  padding: 16px 22px 14px; color: var(--screen-ink);
  background: linear-gradient(180deg, var(--atm-body-2), var(--atm-body) 60%);
  border: 4px solid var(--screen); box-shadow: inset 0 0 0 3px var(--gold-deep), 10px 10px 0 color-mix(in srgb, var(--screen) 85%, transparent);
  animation: g3d-shop-in 0.28s var(--g3d-ease);
}
.g3d-atm-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.g3d-atm-leds { display: grid; gap: 5px; }
.g3d-atm-leds i { display: block; width: 10px; height: 10px; background: var(--g3d-money); animation: g3d-atm-blink 1.6s steps(1) infinite; }
.g3d-atm-leds i:nth-child(2) { background: var(--gold); animation-delay: 0.5s; }
.g3d-atm-leds i:nth-child(3) { background: var(--magenta); animation-delay: 1s; }
@keyframes g3d-atm-blink { 50% { opacity: 0.25; } }
.g3d-atm-title { margin: 0; font-family: var(--display); font-size: var(--t-h2); line-height: 1.2; color: var(--gold); text-shadow: var(--g3d-text-lift); letter-spacing: 0.04em; }
.g3d-atm-where { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; color: var(--screen-dim); }
.g3d-atm-note { font-family: var(--display); font-size: var(--t-label); color: var(--screen-ink); }
.g3d-atm-close { color: var(--screen-ink); }
.g3d-atm-close:hover { background: var(--screen-ink); color: var(--screen); }

.g3d-atm-screen {
  position: relative; padding: 12px 16px; color: var(--atm-ink); background: var(--atm-screen);
  border: 4px solid var(--screen); box-shadow: inset 0 0 0 2px var(--atm-line), inset 0 0 48px color-mix(in srgb, var(--grass-hi) 12%, transparent);
}
.g3d-atm-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--screen) 20%, transparent) 0 1px, transparent 1px 4px); }
.g3d-atm-cash { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 2px dashed var(--atm-line); }
.g3d-atm-cash-k { font-family: var(--display); font-size: var(--t-label); text-transform: uppercase; color: var(--atm-dim); }
.g3d-atm-usd { font-family: var(--display); font-size: var(--t-figure); font-weight: 400; color: var(--g3d-money); font-variant-numeric: tabular-nums; }
.g3d-atm-cash.is-bump .g3d-atm-usd { animation: g3d-atm-bump 0.5s var(--g3d-ease); }
@keyframes g3d-atm-bump { 40% { scale: 1.12; } }

.g3d-atm-table { width: 100%; margin-top: 4px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.g3d-atm-table th, .g3d-atm-table td { padding: 5px 6px; text-align: left; font-weight: 400; vertical-align: middle; }
.g3d-atm-table thead th { font-family: var(--display); font-size: var(--t-label); text-transform: uppercase; color: var(--atm-dim); }
.g3d-atm-table tbody tr { border-top: 2px solid var(--atm-line); }
.g3d-atm-table tbody tr.is-empty .g3d-atm-bal, .g3d-atm-table tbody tr.is-empty .g3d-atm-worth { color: var(--atm-dim); }
.g3d-atm-tok { white-space: nowrap; }
.g3d-atm-coin { display: inline-block; width: 24px; height: 24px; margin-right: 10px; image-rendering: pixelated; vertical-align: middle; }
.g3d-atm-sym { font-family: var(--display); font-size: var(--t-label); color: var(--atm-ink); margin-right: 10px; vertical-align: middle; }
.g3d-atm-name { color: var(--atm-dim); vertical-align: middle; }
.g3d-atm-worth { color: var(--g3d-money); }
.g3d-atm-price { white-space: nowrap; }
.g3d-atm-badge { display: inline-block; margin-left: 4px; padding: 2px 4px; font-family: var(--display); font-size: var(--t-label); line-height: 1.2; color: var(--screen); vertical-align: 0.1em; }
.g3d-atm-badge.is-live { background: var(--g3d-money); }
.g3d-atm-badge.is-est { background: var(--gold); }
.g3d-atm-btns { display: flex; gap: 6px; justify-content: flex-end; }
.g3d-atm-btn {
  min-width: 54px; min-height: 40px; padding: 6px 8px; cursor: pointer;
  font-family: var(--display); font-size: var(--t-label); color: var(--atm-ink); background: var(--atm-screen); border: 3px solid var(--g3d-money);
}
.g3d-atm-btn:hover:not(:disabled), .g3d-atm-btn:focus-visible { background: var(--g3d-money); color: var(--screen); }
.g3d-atm-btn:disabled { cursor: not-allowed; color: var(--atm-dim); border-color: var(--atm-line); border-style: dashed; }
/* The result (announced) and the preview (what the pointed-at button
   would do) share the screen and never overwrite each other. */
.g3d-atm-lines { display: grid; gap: 2px; margin: 8px 0; min-height: 2.2em; }
.g3d-atm-line { margin: 0; min-height: 1.1em; color: var(--atm-ink); }
.g3d-atm-line[data-tone="good"] { color: var(--g3d-money); }
.g3d-atm-preview { margin: 0; min-height: 1.1em; color: var(--atm-dim); }
.g3d-atm-preview:not(:empty)::before { content: '› '; }
.g3d-atm-all {
  width: 100%; min-height: 44px; cursor: pointer; font-family: var(--display); font-size: var(--t-label); text-transform: uppercase;
  color: var(--screen); background: var(--gold); border: 3px solid var(--screen); box-shadow: 4px 4px 0 color-mix(in srgb, var(--screen) 50%, transparent);
}
.g3d-atm-all:active:not(:disabled) { translate: 2px 2px; box-shadow: 2px 2px 0 color-mix(in srgb, var(--screen) 50%, transparent); }
.g3d-atm-all:disabled { cursor: not-allowed; color: var(--atm-dim); background: transparent; border: 3px dashed var(--atm-line); box-shadow: none; }

.g3d-atm-slot { position: relative; height: 46px; display: grid; justify-items: center; }
.g3d-atm-mouth { width: 46%; height: 12px; margin-top: 6px; background: var(--screen); box-shadow: inset 0 3px 0 color-mix(in srgb, var(--screen) 80%, var(--screen-ink)), 0 0 0 3px var(--atm-body-2); }
.g3d-atm-bill {
  position: absolute; top: 14px; width: 38%; height: 0; overflow: hidden; display: grid; place-items: center;
  font-family: var(--display); font-size: var(--t-label); color: var(--screen);
  background: linear-gradient(90deg, var(--grass-lo) 0 8px, transparent 8px calc(100% - 8px), var(--grass-lo) calc(100% - 8px)),
    repeating-linear-gradient(90deg, var(--grass-hi) 0 10px, color-mix(in srgb, var(--grass-hi) 70%, var(--screen-ink)) 10px 20px);
  border: 0 solid var(--grass-lo);
}
.g3d-atm-bill.is-out { animation: g3d-atm-bill 1.8s var(--g3d-ease) forwards; }
@keyframes g3d-atm-bill { 0% { height: 0; } 25% { height: 32px; border-width: 2px; } 80% { height: 32px; opacity: 1; border-width: 2px; } 100% { height: 32px; opacity: 0; border-width: 2px; } }
.g3d-atm-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; color: var(--screen-dim); }
.g3d-atm-legend { margin: 0; }
.g3d-atm-legend .g3d-atm-badge { margin: 0 6px 0 0; }

/* The kiosk steps down the same way on short screens. */
.g3d-atm.fit-1 .g3d-atm-kiosk { gap: 8px; padding-block: 12px 10px; }
.g3d-atm.fit-1 .g3d-atm-table th, .g3d-atm.fit-1 .g3d-atm-table td { padding-block: 3px; }
.g3d-atm.fit-1 .g3d-atm-btn { min-height: 36px; }
.g3d-atm.fit-1 .g3d-atm-slot { height: 30px; }
.g3d-atm.fit-1 .g3d-atm-bill { top: 10px; }
.g3d-atm.fit-2 .g3d-atm-title { font-size: var(--t-figure); }
.g3d-atm.fit-2 .g3d-atm-screen { padding-block: 8px; }
.g3d-atm.fit-2 .g3d-atm-foot { display: none; }
.g3d-atm.fit-2 .g3d-atm-btn { min-height: 32px; }
.g3d-atm.fit-3 .g3d-atm-name { display: none; }
.g3d-atm.fit-3 .g3d-atm-slot { height: 22px; }
.g3d-atm.fit-3 .g3d-atm-mouth { margin-top: 2px; }
.g3d-atm.fit-3 .g3d-atm-bill { top: 6px; }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 960px) {
  .g3d-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3d-shop[data-type="food"] .g3d-shop-grid, .g3d-shop[data-kind="cart"] .g3d-shop-grid { grid-template-columns: 1fr; }
  .g3d-shop-keeper { grid-template-columns: auto 1fr; }
  .g3d-shop-side { grid-column: 1 / -1; justify-items: start; max-width: none; }
  .g3d-shop-kit-slots { justify-content: flex-start; }
  .g3d-shop-kit-fx { text-align: left; }
  .g3d-shop-head { grid-template-columns: minmax(0, 1fr) auto; }
  .g3d-shop-purse { grid-row: 2; justify-items: start; }
  .g3d-shop-keys { display: none; }
}

/* ---------------------------------------------------------------- calm */
.g3d-shop.is-calm *, .g3d-atm.is-calm *, .g3d-shop.is-calm .g3d-shop-sheet, .g3d-atm.is-calm .g3d-atm-kiosk { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .g3d-shop *, .g3d-atm *, .g3d-shop-sheet, .g3d-atm-kiosk { animation: none !important; transition: none !important; }
  .g3d-shop-card:hover, .g3d-shop-card:focus-within, .g3d-shop-dish:hover, .g3d-shop-dish:focus-within { translate: none; }
}

/* ==========================================================================
   HUD, pie menu, dialog, cards, minimap, Buy Me a Coffee, pause
   ========================================================================== */
/* 3D · hud (merged into styles.css at integration)
   ==========================================================================
   The HUD and the core panels: pie menu, dialogue, reward cards, minimap
   and the big map, Buy Me a Coffee, pause. The arcade's pixel DNA (Press
   Start 2P labels, VT323 reading, square corners, hard offset shadows)
   on translucent glass so the world shows through. Every colour here is a
   fixed "screen" constant (the 3D page is dark in both OS themes); focus
   rings are cyan on glass and ink on paper.
   ========================================================================== */
.g3d {
  --g3d-hud-edge: 20px;
  --g3d-hud-glass: rgba(10, 9, 22, 0.86);    /* denser than --g3d-glass: text holds 4.5:1 even over a sunlit wall */
  --g3d-hud-tiny: 0.6875rem;                   /* the smallest type in the game: 11 px */
  --g3d-hud-micro: calc(var(--t-label) * 0.9);
  --g3d-hud-small: calc(var(--t-body) * 0.84);
  --g3d-hud-money: calc(var(--t-figure) * 1.8);
  --g3d-hud-stamp: var(--t-h2);                /* the rubber-stamp grade letter */
  /* display sizes for the reward cards, fluid like the scale they extend */
  --g3d-hud-display: clamp(1.75rem, 0.9rem + 3vw, 3.25rem);      /* a company's name on its title card */
  --g3d-hud-headline: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);    /* a front-page headline, the notebook's title */
  --g3d-hud-title-l: clamp(1.3rem, 0.9rem + 1.7vw, 2.2rem);      /* a masthead, the ending's title */
  --g3d-hud-title: clamp(1.15rem, 0.85rem + 1.15vw, 1.8rem);     /* the keynote's title, the pause menu's */
  --g3d-hud-title-s: clamp(1rem, 0.8rem + 0.8vw, 1.4rem);        /* the keynote's verdict */
  --g3d-hud-mono: calc(var(--t-label) * 2);    /* a monogram in a portrait tile */
  --g3d-hud-velvet: #5c0f1c;                   /* Stuyvesant Hall's curtains */
  --g3d-hud-velvet-2: #2a0710;
  --g3d-hud-bulb: #ffe7a3;
  --g3d-hud-blur: blur(14px) saturate(1.3);
  --g3d-hud-hi: rgba(255, 244, 214, 0.08);
  --g3d-hud-tick: rgba(255, 244, 214, 0.62);
  --g3d-hud-lift: 0 14px 36px rgba(4, 3, 10, 0.45);
  --g3d-hud-hard: 4px 4px 0 rgba(4, 3, 10, 0.55);
  --g3d-hud-warm: #ffa35c;
  --g3d-hud-danger: #ff6b7a;
  --g3d-hud-smile: #ff8cb4;
  --g3d-hud-night: #b8c4ff;
  --g3d-hud-paper-2: #463f63;
  --g3d-hud-stamp-s: #b3122e;
  --g3d-hud-stamp-a: #5b21b6;
  --g3d-hud-stamp-b: #0b5cad;
  --g3d-hud-stamp-c: #57536b;
  --g3d-hud-pen: #0b5cad;
  --g3d-hud-margin: rgba(179, 18, 46, 0.5);
  --g3d-hud-well: #0b0a17;
  --g3d-hud-pink: #ff9ab8;
  --g3d-hud-note: #fff6c2;
  --g3d-hud-place: #ffe08a;
  --g3d-hud-person: #b8fbff;
  --g3d-hud-ring: #2a2440;
  --g3d-hud-hover: #2a2350;
  --g3d-hud-phone-1: #1d1947;
  --g3d-hud-phone-2: #0e0c20;
  --g3d-hud-paper-money: #17703f;
  --g3d-hud-qr: #ffffff;
}
@media (max-width: 900px) { .g3d { --g3d-hud-edge: 12px; } }

/* ---------------------------------------------------------------- glass */
.g3d .g3d-glass {
  position: relative;
  background: var(--g3d-hud-glass);
  -webkit-backdrop-filter: var(--g3d-hud-blur);
  backdrop-filter: var(--g3d-hud-blur);
  border: 1px solid var(--g3d-line);
  box-shadow: inset 0 1px 0 var(--g3d-hud-hi), var(--g3d-hud-lift);
}
/* pixel corner brackets: the arcade's frame, drawn in four hairline ticks */
.g3d .g3d-glass::before {
  content: ''; position: absolute; inset: -1px; pointer-events: none;
  background:
    linear-gradient(var(--g3d-hud-tick), var(--g3d-hud-tick)) left top / 8px 2px no-repeat,
    linear-gradient(var(--g3d-hud-tick), var(--g3d-hud-tick)) left top / 2px 8px no-repeat,
    linear-gradient(var(--g3d-hud-tick), var(--g3d-hud-tick)) right top / 8px 2px no-repeat,
    linear-gradient(var(--g3d-hud-tick), var(--g3d-hud-tick)) right top / 2px 8px no-repeat,
    linear-gradient(var(--g3d-hud-tick), var(--g3d-hud-tick)) left bottom / 8px 2px no-repeat,
    linear-gradient(var(--g3d-hud-tick), var(--g3d-hud-tick)) left bottom / 2px 8px no-repeat,
    linear-gradient(var(--g3d-hud-tick), var(--g3d-hud-tick)) right bottom / 8px 2px no-repeat,
    linear-gradient(var(--g3d-hud-tick), var(--g3d-hud-tick)) right bottom / 2px 8px no-repeat;
}
.g3d .g3d-px { display: inline-grid; place-items: center; line-height: 0; }
.g3d .g3d-px svg { display: block; }

/* keycaps inside the HUD and panels (the base kbd flips with the OS theme; these never do) */
.g3d .g3d-hud-layer kbd, .g3d .g3d-pie kbd, .g3d .g3d-dlg kbd, .g3d .g3d-rc kbd,
.g3d .g3d-map kbd, .g3d .g3d-pause kbd, .g3d .g3d-bmc kbd {
  display: inline-grid; place-items: center; min-width: 22px; min-height: 20px; margin: 0; padding: 2px 5px;
  font-family: var(--display); font-size: var(--g3d-hud-micro); line-height: 1; text-transform: uppercase;
  color: var(--screen-ink); background: rgba(255, 244, 214, 0.08);
  border: 1px solid var(--g3d-line); border-bottom-width: 2px;
}

/* focus: cyan on glass, ink on paper */
.g3d .g3d-hud-layer :focus-visible, .g3d .g3d-pie :focus-visible, .g3d .g3d-dlg :focus-visible,
.g3d .g3d-rc :focus-visible, .g3d .g3d-map :focus-visible, .g3d .g3d-pause :focus-visible, .g3d .g3d-bmc :focus-visible {
  outline: 3px solid var(--cyan); outline-offset: 2px;
}
.g3d .g3d-rc-news :focus-visible, .g3d .g3d-rc-notes :focus-visible, .g3d .g3d-dlg-notes :focus-visible { outline-color: var(--receipt-ink); }

/* the core's toasts: to the top centre, on glass, clear of the needs */
.g3d .g3d-toasts { top: calc(var(--g3d-hud-edge) + 4px); bottom: auto; width: min(520px, max(280px, calc(100vw - 720px))); z-index: 20; }
.g3d .g3d-toast {
  font-size: var(--t-body); line-height: 1.4; padding: 8px 14px;
  background: var(--g3d-glass-2); border-width: 1px;
  -webkit-backdrop-filter: var(--g3d-hud-blur); backdrop-filter: var(--g3d-hud-blur);
  box-shadow: var(--g3d-hud-lift);
}
.g3d .g3d-toast-money { color: var(--g3d-money); }

/* ============================================================== the HUD */
.g3d-hud-layer {
  position: fixed; inset: 0; pointer-events: none; z-index: 5;
  font-family: var(--sans); color: var(--screen-ink);
  transition: opacity 0.35s ease, visibility 0s;
}
.g3d-hud-layer.is-hidden, .g3d-hud-layer.is-forced-hidden { opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s 0.35s; }
.g3d-hud-layer p, .g3d-hud-layer ol, .g3d-hud-layer ul { margin: 0; }
.g3d-hud-label, .g3d-hud-kicker {
  font-family: var(--display); font-size: var(--g3d-hud-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--screen-dim);
}

/* top left: the company, the chapter, the clock */
.g3d-hud-tl { position: absolute; top: var(--g3d-hud-edge); left: var(--g3d-hud-edge); display: grid; gap: 8px; justify-items: start; }
.g3d-hud-co { padding: 12px 16px 12px 14px; min-width: 230px; max-width: 330px; }
.g3d-hud-company {
  display: flex; align-items: center; gap: 10px; margin-top: 8px;
  font-family: var(--display); font-size: var(--t-label); line-height: 1.45; color: var(--brand, var(--gold));
  text-shadow: 0 2px 0 rgba(4, 3, 10, 0.6);
}
.g3d-hud-swatch { display: inline-grid; grid-template-columns: 7px 7px; flex: none; box-shadow: 0 0 0 1px rgba(255, 244, 214, 0.45); }
.g3d-hud-swatch i { display: block; height: 14px; }
.g3d-hud-swatch i:first-child { background: var(--sw1); }
.g3d-hud-swatch i:last-child { background: var(--sw2); }
.g3d-hud-role { margin-top: 2px; font-size: var(--g3d-hud-small); line-height: 1.05; color: var(--screen-dim); }
.g3d-hud-progress { margin-top: 10px; }
.g3d-hud-pips { position: relative; display: inline-flex; align-items: center; gap: 10px; }
.g3d-hud-pips::before { content: ''; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; margin-top: -1px; background: rgba(255, 244, 214, 0.16); }
.g3d-hud-pip {
  position: relative; width: 16px; height: 16px; display: grid; place-items: center;
  background: var(--screen); border: 1px solid rgba(255, 244, 214, 0.4);
  font-family: var(--display); font-size: var(--g3d-hud-tiny); line-height: 1; color: var(--screen);
}
.g3d-hud-pip.is-done { background: var(--brand, var(--gold)); border-color: var(--brand, var(--gold)); box-shadow: 0 0 10px color-mix(in srgb, var(--brand, var(--gold)) 55%, transparent); }
.g3d-hud-pip.is-star { width: 20px; height: 20px; border: 0; background: transparent; color: rgba(255, 244, 214, 0.45); }
.g3d-hud-pip.is-star.is-done { color: var(--gold); box-shadow: none; filter: drop-shadow(0 0 6px rgba(255, 204, 51, 0.7)); }

.g3d-hud-clock { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; font-size: var(--t-body); line-height: 1; }
.g3d-hud-clock-ico { color: var(--gold); }
.g3d-hud-clock.is-night .g3d-hud-clock-ico { color: var(--g3d-hud-night); }
.g3d-hud-clock-paused { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; font-family: var(--display); font-size: var(--g3d-hud-micro); text-transform: uppercase; color: var(--gold); }
.g3d-hud-clock-paused[hidden] { display: none; }

/* top right: the wallet and the ledger feed */
.g3d-hud-tr { position: absolute; top: var(--g3d-hud-edge); right: var(--g3d-hud-edge); width: 264px; display: grid; gap: 8px; justify-items: stretch; }
.g3d-hud-wallet { padding: 10px 14px 10px; transition: box-shadow 0.4s ease, border-color 0.4s ease; }
.g3d-hud-wallet-head { display: flex; justify-content: space-between; align-items: center; }
.g3d-hud-src { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-size: var(--g3d-hud-micro); letter-spacing: 0.1em; text-transform: uppercase; }
.g3d-hud-src i { width: 7px; height: 7px; background: currentColor; }
.g3d-hud-src.is-live { color: var(--g3d-money); }
.g3d-hud-src.is-live i { box-shadow: 0 0 8px var(--g3d-money); animation: g3d-live 2.4s steps(2) infinite; }
.g3d-hud-src.is-est { color: var(--gold); }
.g3d-hud-src.is-est i { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
@keyframes g3d-live { 50% { opacity: 0.45; } }
.g3d-hud-usd { display: flex; align-items: baseline; margin-top: 4px; font-size: var(--g3d-hud-money); line-height: 1; color: var(--gold); text-shadow: 0 3px 0 rgba(4, 3, 10, 0.6); }
.g3d-hud-usd-sign { font-size: 0.72em; margin-right: 3px; }
.g3d-hud-token { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--g3d-line); font-size: var(--g3d-hud-small); line-height: 1; }
.g3d-hud-token-amt { display: inline-flex; align-items: baseline; gap: 0.35em; color: var(--screen-ink); }
.g3d-hud-token-odo[hidden] { display: none; }
.g3d-hud-token-sym { color: var(--screen-ink); }
.g3d-hud-token.is-worth .g3d-hud-token-sym { color: var(--screen-dim); }
.g3d-hud-src[hidden] { display: none; }
.g3d-hud-token-usd { color: var(--screen-dim); white-space: nowrap; }
.g3d-hud-wallet.is-bump-credit { animation: g3d-bump-credit 0.9s ease-out; }
.g3d-hud-wallet.is-bump-spend { animation: g3d-bump-spend 0.9s ease-out; }
@keyframes g3d-bump-credit { 20% { border-color: var(--g3d-money); box-shadow: inset 0 1px 0 var(--g3d-hud-hi), 0 0 0 1px var(--g3d-money), 0 0 28px rgba(61, 220, 132, 0.4); transform: translateY(1px); } }
@keyframes g3d-bump-spend { 20% { border-color: var(--g3d-hud-warm); box-shadow: inset 0 1px 0 var(--g3d-hud-hi), 0 0 0 1px var(--g3d-hud-warm), 0 0 28px rgba(255, 163, 92, 0.35); transform: translateY(1px); } }

/* the odometer: each digit a strip that rolls, right-hand digits first */
.g3d-odo-vis { display: inline-flex; }
.g3d-odo-d, .g3d-odo-c { display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: top; }
.g3d-odo-strip { display: flex; flex-direction: column; transition: transform 0.9s cubic-bezier(0.2, 0.85, 0.25, 1.04) var(--odo-delay, 0ms); will-change: transform; }
.g3d-odo-strip > span { display: block; height: 1em; line-height: 1; }

.g3d-hud-feed { display: grid; gap: 6px; }
.g3d-hud-feed-row {
  display: grid; grid-template-columns: 1fr auto; column-gap: 10px; row-gap: 1px; padding: 6px 10px 6px 12px;
  background: var(--g3d-glass-2); border: 1px solid var(--g3d-line); border-left: 3px solid var(--g3d-money);
  -webkit-backdrop-filter: var(--g3d-hud-blur); backdrop-filter: var(--g3d-hud-blur);
  font-size: var(--g3d-hud-small); line-height: 1.4;
  animation: g3d-feed-in 0.5s cubic-bezier(0.2, 1.1, 0.3, 1) var(--feed-delay, 0ms) both;
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.g3d-hud-feed-amt { color: var(--g3d-money); font-weight: 400; white-space: nowrap; }
.g3d-hud-feed-usd { color: var(--screen-ink); text-align: right; white-space: nowrap; }
.g3d-hud-feed-label { grid-column: 1 / -1; color: var(--screen-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g3d-hud-feed-row.is-spend { border-left-color: var(--g3d-hud-warm); }
.g3d-hud-feed-row.is-spend .g3d-hud-feed-amt { color: var(--g3d-hud-warm); }
.g3d-hud-feed-row.is-convert { border-left-color: var(--cyan); }
.g3d-hud-feed-row.is-convert .g3d-hud-feed-amt { color: var(--cyan); }
.g3d-hud-feed-row.is-out { opacity: 0; transform: translateX(16px); }
@keyframes g3d-feed-in { from { opacity: 0; transform: translateX(28px) scale(0.96); } }

/* bottom centre: the objective and the needs */
.g3d-hud-needs {
  position: absolute; left: 50%; bottom: var(--g3d-hud-edge); transform: translateX(-50%);
  width: min(760px, calc(100vw - 2 * 262px)); min-width: 360px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
}
.g3d-hud-obj {
  display: flex; align-items: center; gap: 10px; max-width: 100%; min-width: 0; padding: 6px 14px 6px 12px;
  background: var(--g3d-hud-glass); border: 1px solid var(--g3d-line);
  -webkit-backdrop-filter: var(--g3d-hud-blur); backdrop-filter: var(--g3d-hud-blur);
  font-size: var(--t-body); line-height: 1.4; color: var(--screen-ink);
  animation: g3d-rise-in 0.4s ease both;
}
.g3d-hud-obj[hidden] { display: none; }
.g3d-hud-obj-mark { flex: none; width: 8px; height: 8px; background: var(--cyan); transform: rotate(45deg); box-shadow: 0 0 8px var(--cyan); }
.g3d-hud-obj-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* how far, and which way: the arrow turns with Ryan (up is straight ahead) */
.g3d-hud-obj-dist { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-left: 2px; padding-left: 10px; border-left: 1px solid var(--g3d-line); color: var(--screen-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.g3d-hud-obj-dist[hidden] { display: none; }
.g3d-hud-obj-arrow { display: inline-grid; place-items: center; width: 16px; height: 16px; color: var(--cyan); will-change: transform; }
.g3d-hud-obj.is-easy .g3d-hud-obj-arrow { color: var(--gold); }
.g3d-hud-obj.is-easy { color: var(--gold); border-color: rgba(255, 204, 51, 0.55); }
.g3d-hud-obj.is-easy .g3d-hud-obj-mark { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.g3d-hud-layer.is-pitching .g3d-hud-obj { opacity: 0; }
.g3d-hud-meters { width: min(500px, 100%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 9px 16px 10px; }
.g3d-meter { --need: var(--gold); display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 6px; }
.g3d-meter.is-smile { --need: var(--g3d-hud-smile); }
.g3d-meter.is-buzz { --need: var(--cyan); }
.g3d-meter.is-low { --need: var(--g3d-hud-danger); }
.g3d-meter-ico { grid-row: 1; grid-column: 1; color: var(--need); }
.g3d-meter-label { grid-row: 1; grid-column: 2; justify-self: start; font-family: var(--display); font-size: var(--g3d-hud-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--screen-dim); }
.g3d-meter-val { grid-row: 1; grid-column: 3; font-size: var(--t-body); line-height: 1; color: var(--screen-ink); min-width: 2ch; text-align: right; }
.g3d-meter-low { grid-row: 1; grid-column: 2; justify-self: end; margin-right: 2px; padding: 2px 3px 1px; background: var(--g3d-hud-danger); color: var(--screen); font-family: var(--display); font-size: var(--g3d-hud-tiny); letter-spacing: 0.06em; text-transform: uppercase; }
.g3d-meter-low[hidden] { display: none; }
.g3d-meter-bar { grid-row: 2; grid-column: 1 / -1; position: relative; height: 6px; margin-top: 5px; overflow: hidden; background: rgba(255, 244, 214, 0.1); }
.g3d-meter-fill { position: absolute; inset: 0; transform-origin: left center; background: var(--need); box-shadow: 0 0 10px var(--need); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s; }
/* ten pixel segments */
.g3d-meter-bar::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(10, 9, 22, 0.95) calc(10% - 2px) 10%); }
.g3d-meter.is-low .g3d-meter-bar { animation: g3d-low 1.4s ease-in-out infinite; }
@keyframes g3d-low { 50% { box-shadow: 0 0 0 1px var(--g3d-hud-danger), 0 0 12px rgba(255, 107, 122, 0.7); } }
/* a need that jumps (an espresso, a smile back, the ovation) shows its change beside the value, Sims-style */
.g3d-meter-delta {
  grid-row: 1; grid-column: 2; justify-self: end; margin-right: 2px; opacity: 0; pointer-events: none;
  font-size: var(--t-body); line-height: 1; white-space: nowrap; color: var(--need);
  text-shadow: 0 0 10px color-mix(in srgb, var(--need) 55%, transparent);
}
.g3d-meter.is-down .g3d-meter-delta { color: var(--g3d-hud-warm); text-shadow: none; }
.g3d-meter.has-delta .g3d-meter-delta { opacity: 1; animation: g3d-delta 1.9s cubic-bezier(0.2, 1.2, 0.3, 1) both; }
.g3d-meter.has-delta .g3d-meter-low { visibility: hidden; }
.g3d-meter.has-delta:not(.is-down) .g3d-meter-fill { animation: g3d-gain 0.9s ease-out; }
@keyframes g3d-delta { 0% { opacity: 0; transform: translateY(8px) scale(0.7); } 14% { opacity: 1; transform: translateY(-2px) scale(1.12); } 26% { transform: none; } 78% { opacity: 1; } 100% { opacity: 0; transform: translateY(-5px); } }
@keyframes g3d-gain { 30% { filter: brightness(1.55); box-shadow: 0 0 16px var(--need); } }

/* a new objective shines once; the career card glows in a new company's colours; a pip pops when its work is done */
.g3d-hud-obj { position: relative; }
.g3d-hud-obj::after {
  --shine: 46, 242, 255;
  content: ''; position: absolute; inset: -1px; pointer-events: none; opacity: 0;
  border: 1px solid rgb(var(--shine));
  background: linear-gradient(105deg, transparent 38%, rgba(255, 244, 214, 0.28) 50%, transparent 62%) no-repeat 120% 0 / 260% 100%;
}
.g3d-hud-obj.is-easy::after { --shine: 255, 204, 51; }
.g3d-hud-obj.is-new { border-color: var(--cyan); transition: border-color 0.3s ease; }
.g3d-hud-obj.is-easy.is-new { border-color: var(--gold); }
.g3d-hud-obj.is-new::after { animation: g3d-obj-new 1.7s ease-out both; }
.g3d-hud-obj.is-new .g3d-hud-obj-mark { animation: g3d-obj-mark 0.75s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
@keyframes g3d-obj-new {
  0% { opacity: 0; background-position: 120% 0; box-shadow: 0 0 0 0 rgba(var(--shine), 0.6); }
  12% { opacity: 1; box-shadow: 0 0 0 3px rgba(var(--shine), 0.38), 0 0 28px rgba(var(--shine), 0.5); }
  45% { box-shadow: 0 0 0 2px rgba(var(--shine), 0.22), 0 0 18px rgba(var(--shine), 0.28); }
  62% { opacity: 1; background-position: -20% 0; }
  100% { opacity: 0; background-position: -20% 0; box-shadow: 0 0 0 7px rgba(var(--shine), 0); }
}
@keyframes g3d-obj-mark { from { transform: rotate(45deg); } 50% { transform: rotate(135deg) scale(1.7); } to { transform: rotate(225deg); } }
.g3d-hud-co.is-new { animation: g3d-co-new 1.7s ease-out; }
@keyframes g3d-co-new { 20% { border-color: var(--brand, var(--gold)); box-shadow: inset 0 1px 0 var(--g3d-hud-hi), 0 0 0 1px var(--brand, var(--gold)), 0 0 30px color-mix(in srgb, var(--brand, var(--gold)) 45%, transparent); } }
.g3d-hud-pip.is-pop { z-index: 1; animation: g3d-pip-pop 0.9s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
.g3d-hud-pip.is-star.is-pop { animation: g3d-star-pop 1.1s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
@keyframes g3d-pip-pop {
  0% { transform: scale(0.2); }
  45% { transform: scale(1.5); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, var(--gold)) 50%, transparent), 0 0 24px var(--brand, var(--gold)); }
  100% { transform: none; }
}
@keyframes g3d-star-pop { 0% { transform: scale(0.2) rotate(-90deg); } 50% { transform: scale(1.7) rotate(12deg); } 100% { transform: none; } }

/* bottom right: key hints, above the coffee button */
.g3d-hud-keys {
  position: absolute; right: var(--g3d-hud-edge); bottom: calc(var(--g3d-hud-edge) + 58px);
  display: grid; gap: 5px; justify-items: end;
  transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s;
}
.g3d-hud-keys.is-off { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s 0.5s; }
.g3d-hud-keys li {
  display: flex; align-items: center; gap: 8px; padding: 3px 10px 3px 4px;
  background: var(--g3d-hud-glass); border: 1px solid var(--g3d-line);
  -webkit-backdrop-filter: var(--g3d-hud-blur); backdrop-filter: var(--g3d-hud-blur);
  font-size: var(--g3d-hud-small); line-height: 1;
}
.g3d-hud-keys li[hidden] { display: none; }

/* while a panel holds the screen, the bottom of the HUD steps aside */
.g3d-hud-layer.is-busy .g3d-hud-needs, .g3d-hud-layer.is-busy .g3d-hud-keys { opacity: 0; visibility: hidden; transform: translate(-50%, 10px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s 0.25s; }
.g3d-hud-layer.is-busy .g3d-hud-keys { transform: translateY(10px); }
.g3d-hud-layer.is-busy .g3d-hud-feed { opacity: 0; }

/* ============================================================ minimap */
.g3d-mini { position: absolute; left: var(--g3d-hud-edge); bottom: var(--g3d-hud-edge); width: 200px; height: 200px; pointer-events: auto; }
.g3d-mini-open {
  display: block; width: 100%; height: 100%; padding: 0; cursor: zoom-in; overflow: hidden;
  background: var(--g3d-hud-well); border: 1px solid var(--g3d-line); border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(4, 3, 10, 0.6), var(--g3d-hud-lift);
}
.g3d-mini-open:hover { border-color: rgba(255, 244, 214, 0.5); }
.g3d-mini-canvas { display: block; width: 100%; height: 100%; }
.g3d-mini::after { content: ''; position: absolute; inset: 0; border-radius: 18px; pointer-events: none; box-shadow: inset 0 0 22px rgba(4, 3, 10, 0.8); }
.g3d-mini-name {
  /* a tab on top of the frame, so nothing on the map ever hides under it */
  position: absolute; left: 10px; bottom: calc(100% - 1px); z-index: 1; pointer-events: none;
  max-width: calc(100% - 20px); padding: 5px 9px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--g3d-hud-glass); border: 1px solid var(--g3d-line); border-bottom: 0; border-radius: 8px 8px 0 0;
  -webkit-backdrop-filter: var(--g3d-hud-blur); backdrop-filter: var(--g3d-hud-blur);
  font-family: var(--display); font-size: var(--g3d-hud-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--screen-ink);
}
.g3d-mini-name:empty { display: none; }
.g3d-mini-north {
  position: absolute; top: 8px; right: 8px; z-index: 1; width: 28px; height: 28px; padding: 0; cursor: pointer;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(8, 7, 15, 0.86); border: 1px solid var(--g3d-line); color: var(--gold);
}
.g3d-mini-north .g3d-px { transform: rotate(var(--north, 0rad)); }
.g3d-mini-north[aria-pressed="true"] { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.g3d-mini-expand { position: absolute; top: 8px; left: 8px; z-index: 1; width: 24px; height: 24px; display: grid; place-items: center; background: rgba(8, 7, 15, 0.86); color: var(--screen-ink); opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.g3d-mini:hover .g3d-mini-expand, .g3d-mini-open:focus-visible ~ .g3d-mini-expand { opacity: 1; }

/* the big map: sized to the window (never past it), the list the only thing that scrolls */
.g3d-map { position: fixed; inset: 0; z-index: 42; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; padding: 24px; pointer-events: auto; }
.g3d-map[hidden] { display: none; }
.g3d-map-scrim { position: absolute; inset: 0; background: rgba(8, 7, 15, 0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.g3d-map-box { width: min(1120px, 100%); height: min(740px, 100%); max-height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; padding: 16px 18px 18px; background: var(--g3d-glass-2); animation: g3d-pop-in 0.3s cubic-bezier(0.2, 1.2, 0.3, 1) both; }
.g3d-map-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.g3d-map-title { margin: 0; font-family: var(--display); font-size: var(--t-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.g3d-map-close, .g3d-bmc-close {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 10px; cursor: pointer;
  background: transparent; border: 1px solid var(--g3d-line); color: var(--screen-ink);
  font-family: var(--display); font-size: var(--g3d-hud-micro); text-transform: uppercase; letter-spacing: 0.08em;
}
.g3d-map-close:hover, .g3d-bmc-close:hover { border-color: var(--screen-ink); }
.g3d-map-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; min-height: 0; }
.g3d-map-view { position: relative; min-height: 0; overflow: hidden; background: var(--g3d-hud-well); border: 1px solid var(--g3d-line); border-radius: 14px; }
.g3d-map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.g3d-map-legend {
  position: absolute; left: 10px; bottom: 10px; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 10px 5px;
  background: rgba(8, 7, 15, 0.84); border: 1px solid var(--g3d-line); pointer-events: none;
  font-size: calc(var(--t-body) * 0.72); line-height: 1; color: var(--screen-dim);
}
.g3d-map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.g3d-map-legend span::before { content: ''; width: 8px; height: 8px; background: currentColor; }
.g3d-map-legend .is-you::before { background: var(--screen-ink); clip-path: polygon(50% 0, 100% 100%, 50% 72%, 0 100%); width: 9px; height: 10px; }
.g3d-map-legend .is-goal::before { background: var(--gold); transform: rotate(45deg) scale(0.85); }
.g3d-map-legend .is-pin::before { background: var(--magenta); border-radius: 50% 50% 50% 0; transform: rotate(-45deg) scale(0.9); }
.g3d-map-legend .is-person::before { background: var(--cyan); border-radius: 50%; }
.g3d-map-side { min-height: 0; display: grid; grid-template-rows: auto auto auto auto minmax(0, 1fr); align-content: start; }
.g3d-map-where-h { margin: 0; font-family: var(--display); font-size: var(--g3d-hud-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--screen-dim); }
.g3d-map-hint { margin: 6px 0 8px; font-size: var(--g3d-hud-small); line-height: 1.4; color: var(--screen-dim); }
.g3d-map-obj { margin: 0 0 8px; padding: 8px 10px; border: 1px solid rgba(255, 204, 51, 0.5); color: var(--gold); font-size: var(--g3d-hud-small); line-height: 1.4; }
.g3d-map-obj[hidden] { display: none; }
.g3d-map-status { margin: 0 0 6px; min-height: 0; font-size: var(--g3d-hud-small); line-height: 1.4; color: var(--g3d-hud-pink); }
.g3d-map-status:empty { display: none; }
/* the list: one button per place. Where the box reaches the corner (narrow windows), the list
   stops short of the coffee cup there, so no row ever sits under it */
.g3d-map-where { margin: 0; padding: 2px 4px 2px 2px; list-style: none; min-height: 0; overflow: auto; overscroll-behavior: contain; border-top: 1px solid var(--g3d-line); }
@media (max-width: 1250px) { .g3d-map-where { margin-bottom: 44px; } }
.g3d-map-where li { border-bottom: 1px solid var(--g3d-line); }
.g3d-map-where li.is-empty { padding: 8px 4px; font-size: var(--g3d-hud-small); color: var(--screen-dim); }
.g3d-map-go {
  width: 100%; min-height: 36px; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; column-gap: 8px; align-items: baseline;
  padding: 6px 6px 6px 4px; text-align: left; cursor: pointer; color: var(--screen-ink); background: transparent; border: 0;
  font-family: var(--sans); font-size: var(--g3d-hud-small); line-height: 1.4;
  transition: background-color 0.12s;
}
.g3d-map-go:hover { background: rgba(255, 244, 214, 0.07); }
.g3d-map-where-pin { grid-row: 1; grid-column: 1; align-self: center; width: 10px; height: 10px; border: 2px solid rgba(255, 244, 214, 0.35); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.g3d-map-go[aria-pressed="true"] { background: rgba(255, 61, 129, 0.14); }
.g3d-map-go[aria-pressed="true"] .g3d-map-where-pin { background: var(--magenta); border-color: var(--magenta); }
.g3d-map-where-name { grid-row: 1; grid-column: 2; min-width: 0; color: var(--screen-ink); }
.g3d-map-go.is-person .g3d-map-where-name { color: var(--g3d-hud-person); }
.g3d-map-go.is-place .g3d-map-where-name { color: var(--g3d-hud-place); }
.g3d-map-where-role { grid-row: 2; grid-column: 2 / -1; color: var(--screen-dim); font-size: 0.85em; }
.g3d-map-where-dist { grid-row: 1; grid-column: 3; color: var(--screen-dim); white-space: nowrap; }
@media (max-width: 900px) { .g3d-map-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 44%); } }

/* ============================================================= pie menu */
.g3d-pie { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; pointer-events: auto; font-family: var(--sans); }
.g3d-pie[hidden] { display: none; }
.g3d-pie-scrim { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(8, 7, 15, 0.2) 0, rgba(8, 7, 15, 0.66) 62%); animation: g3d-fade-in 0.2s ease both; }
.g3d-pie-ring { position: relative; width: 0; height: 0; }
.g3d-pie-guide { position: absolute; left: 0; top: 0; width: calc(var(--r) * 2); height: calc(var(--r) * 2); transform: translate(-50%, -50%); border-radius: 50%; border: 1px dashed rgba(255, 244, 214, 0.2); pointer-events: none; animation: g3d-pie-hub 0.35s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
.g3d-pie-spoke { position: absolute; left: 0; top: 0; width: var(--len, 0); height: 2px; margin-top: -1px; transform-origin: 0 50%; transform: rotate(var(--rot, 0rad)); background: linear-gradient(90deg, transparent 0 70px, rgba(255, 204, 51, 0.9)); opacity: 0; transition: opacity 0.15s ease; pointer-events: none; }
.g3d-pie-hub {
  position: absolute; left: 0; top: 0; width: 138px; height: 138px; transform: translate(-50%, -50%);
  display: grid; place-content: center; padding: 14px; text-align: center; border-radius: 50%;
  background: var(--g3d-glass-2); border: 1px solid var(--g3d-line);
  -webkit-backdrop-filter: var(--g3d-hud-blur); backdrop-filter: var(--g3d-hud-blur);
  box-shadow: inset 0 0 0 6px rgba(4, 3, 10, 0.35), var(--g3d-hud-lift);
  animation: g3d-pie-hub 0.3s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
/* a person's face at the centre, The Sims' way */
.g3d-pie-hub.has-face { width: 168px; height: 168px; padding: 16px; }
.g3d-pie-face { display: block; width: 48px; height: 48px; margin: 0 auto 6px; overflow: hidden; background: var(--g3d-hud-well); border: 2px solid var(--who, var(--gold)); box-shadow: var(--g3d-hud-hard); }
.g3d-pie-face[hidden] { display: none; }
.g3d-pie-title { margin: 0; font-family: var(--display); font-size: var(--g3d-hud-micro); line-height: 1.6; color: var(--screen-ink); letter-spacing: 0.04em; }
.g3d-pie-hint { margin: 6px 0 0; font-size: calc(var(--t-body) * 0.72); line-height: 1; color: var(--screen-dim); }
.g3d-pie-list { margin: 0; padding: 0; list-style: none; }
.g3d-pie-item { position: absolute; left: var(--x); top: var(--y); animation: g3d-pie-in 0.36s cubic-bezier(0.2, 1.35, 0.4, 1) both; animation-delay: calc(var(--i) * 32ms + 40ms); }
.g3d-pie.is-opening .g3d-pie-item { pointer-events: none; }
.g3d-pie-opt {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 16px 6px 8px;
  white-space: nowrap; cursor: pointer; color: var(--screen-ink);
  font-family: var(--sans); font-size: var(--t-body); line-height: 1.4;
  background: var(--g3d-glass-2); border: 1px solid var(--g3d-line);
  -webkit-backdrop-filter: var(--g3d-hud-blur); backdrop-filter: var(--g3d-hud-blur);
  box-shadow: var(--g3d-hud-hard);
  transition: transform 0.16s cubic-bezier(0.2, 1.4, 0.4, 1), border-color 0.12s, background-color 0.12s;
}
.g3d-pie-opt.is-center { transform: translate(-50%, -50%); }
.g3d-pie-opt.is-right { transform: translate(-18px, -50%); }
.g3d-pie-opt.is-left { transform: translate(calc(-100% + 18px), -50%); }
.g3d-pie-opt.is-center:is(:hover, :focus) { transform: translate(-50%, -50%) scale(1.06); }
.g3d-pie-opt.is-right:is(:hover, :focus) { transform: translate(-18px, -50%) scale(1.06); }
.g3d-pie-opt.is-left:is(:hover, :focus) { transform: translate(calc(-100% + 18px), -50%) scale(1.06); }
.g3d-pie-opt:is(:hover, :focus) { border-color: var(--gold); background: var(--g3d-hud-hover); }
.g3d-pie-opt:is(:hover, :focus) kbd { background: var(--gold); color: var(--screen); border-color: var(--gold); }
.g3d-pie-opt[disabled] { cursor: not-allowed; color: var(--screen-dim); }
.g3d-pie-sub { font-size: 0.8em; color: var(--screen-dim); }
.g3d-pie-opt.is-chosen { border-color: var(--gold); background: var(--gold); color: var(--screen); }
.g3d-pie.is-leaving .g3d-pie-item { animation: none; transition: opacity 0.15s ease; opacity: 0.25; }
.g3d-pie.is-leaving .g3d-pie-item:has(.is-chosen) { opacity: 1; }
.g3d-pie.is-leaving .g3d-pie-hub, .g3d-pie.is-leaving .g3d-pie-guide { opacity: 0; transition: opacity 0.15s; }
/* the options fly out from the centre; they start at 0.6 so even a frame caught mid-pop keeps a 24-pixel target */
@keyframes g3d-pie-in { from { opacity: 0; transform: translate(calc(-1 * var(--x)), calc(-1 * var(--y))) scale(0.6); } }
@keyframes g3d-pie-hub { from { opacity: 0; transform: translate(-50%, -50%) scale(0.55); } }

/* ============================================================= dialogue */
.g3d-dlg {
  position: fixed; left: 50%; bottom: var(--g3d-hud-edge); transform: translateX(-50%); z-index: 25;
  width: min(820px, calc(100vw - 2 * 262px)); min-width: min(560px, calc(100vw - 24px));
  pointer-events: auto; font-family: var(--sans); color: var(--screen-ink);
}
.g3d-dlg[hidden] { display: none; }
.g3d-dlg-box {
  display: grid; grid-template-columns: auto 1fr; column-gap: 18px; padding: 16px 18px 12px 16px;
  background: var(--g3d-glass-2); cursor: pointer;
  animation: g3d-dlg-in 0.4s cubic-bezier(0.2, 1.15, 0.3, 1) both;
}
.g3d-dlg-tile { position: relative; width: 96px; height: 96px; align-self: start; background: var(--g3d-hud-well); border: 2px solid var(--who, var(--gold)); box-shadow: var(--g3d-hud-hard); overflow: hidden; }
.g3d-portrait { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.g3d-dlg-mono { display: grid; place-items: center; width: 100%; height: 100%; font-family: var(--display); font-size: var(--g3d-hud-mono); color: var(--who, var(--gold)); }
.g3d-dlg-main { min-width: 0; }
.g3d-dlg-who { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.g3d-dlg-name { font-family: var(--display); font-size: var(--t-label); letter-spacing: 0.05em; color: var(--who, var(--gold)); }
.g3d-dlg-role { font-size: var(--g3d-hud-small); line-height: 1; color: var(--screen-dim); }
.g3d-dlg-role[hidden] { display: none; }
.g3d-dlg-text { margin: 8px 0 0; min-height: 2.3em; font-size: var(--t-lede); line-height: 1.3; color: var(--screen-ink); text-wrap: pretty; }
.g3d-dlg-rest { color: transparent; }
.g3d-dlg-choices { margin: 10px 0 2px; padding: 0; list-style: none; display: grid; gap: 6px; cursor: default; }
.g3d-dlg-choices[hidden] { display: none; }
.g3d-dlg-choices li { animation: g3d-rise-in 0.3s ease both; }
.g3d-dlg-choices li:nth-child(2) { animation-delay: 60ms; }
.g3d-dlg-choices li:nth-child(3) { animation-delay: 120ms; }
.g3d-dlg-choices li:nth-child(4) { animation-delay: 180ms; }
.g3d-dlg-choice {
  width: 100%; display: flex; align-items: flex-start; gap: 12px; padding: 8px 12px 8px 8px; min-height: 40px; text-align: left; cursor: pointer;
  font-family: var(--sans); font-size: var(--t-body); line-height: 1.4; color: var(--screen-ink);
  background: rgba(255, 244, 214, 0.05); border: 1px solid var(--g3d-line);
  transition: background-color 0.12s, border-color 0.12s, transform 0.12s;
}
.g3d-dlg-choice kbd { flex: none; margin-top: 1px; }
.g3d-dlg-choice:is(:hover, :focus) { background: rgba(255, 204, 51, 0.13); border-color: var(--gold); transform: translateX(3px); }
.g3d-dlg-choice:is(:hover, :focus) kbd { background: var(--gold); color: var(--screen); border-color: var(--gold); }
.g3d-dlg-choice.is-picked { background: var(--gold); color: var(--screen); }
.g3d-dlg-box.has-choices .g3d-dlg-foot { display: none; }
.g3d-dlg-foot { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 12px; min-height: 32px; margin-top: 4px; }
.g3d-dlg-count { font-family: var(--display); font-size: var(--g3d-hud-micro); color: var(--screen-dim); }
.g3d-dlg-next {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 12px; cursor: pointer;
  background: transparent; border: 1px solid var(--g3d-line); color: var(--gold);
  font-family: var(--display); font-size: var(--g3d-hud-micro); letter-spacing: 0.08em; text-transform: uppercase;
}
.g3d-dlg-next[hidden] { display: none; }
.g3d-dlg-next:hover { border-color: var(--gold); }
.g3d-dlg-caret { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid currentColor; animation: g3d-caret 1s steps(2) infinite; }
.g3d-dlg-box.is-typing .g3d-dlg-caret { animation: none; opacity: 0.5; }
@keyframes g3d-caret { 50% { transform: translateY(3px); } }
.g3d-dlg-timer { position: absolute; left: 0; right: 0; top: -1px; height: 4px; background: rgba(255, 244, 214, 0.12); pointer-events: none; }
.g3d-dlg-timer[hidden] { display: none; }
.g3d-dlg-timer i { display: block; height: 100%; background: var(--gold); transform-origin: left center; box-shadow: 0 0 10px var(--gold); }
.g3d-dlg-timer.is-late i { background: var(--g3d-hud-danger); box-shadow: 0 0 10px var(--g3d-hud-danger); }
.g3d-dlg-timer-label { position: absolute; right: 10px; top: 10px; font-family: var(--display); font-size: var(--g3d-hud-tiny); letter-spacing: 0.08em; text-transform: uppercase; color: var(--screen-dim); }
.g3d-dlg-timer.is-still i { box-shadow: none; opacity: 0.6; }
/* Ryan's notes: a sticky note above the box */
.g3d-dlg-notes {
  position: absolute; right: 14px; bottom: calc(100% + 14px); width: min(380px, 62%);
  padding: 12px 16px 14px; transform: rotate(1.3deg);
  background: var(--g3d-hud-note); color: var(--receipt-ink);
  background-image: repeating-linear-gradient(180deg, transparent 0 25px, rgba(11, 92, 173, 0.2) 25px 26px);
  background-position: 0 12px;
  box-shadow: 6px 6px 0 rgba(4, 3, 10, 0.5), 0 18px 40px rgba(4, 3, 10, 0.35);
  animation: g3d-note-in 0.45s cubic-bezier(0.2, 1.3, 0.3, 1) 0.15s both;
}
.g3d-dlg-notes[hidden] { display: none; }
.g3d-dlg-notes::before { content: ''; position: absolute; left: 50%; top: -10px; width: 70px; height: 20px; transform: translateX(-50%) rotate(-3deg); background: rgba(255, 244, 214, 0.55); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
.g3d-dlg-notes-h { margin: 0; font-family: var(--display); font-size: var(--g3d-hud-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--g3d-hud-stamp-s); }
.g3d-dlg-notes-body p { margin: 4px 0 0; font-size: var(--t-body); line-height: 26px; color: var(--receipt-ink); }
.g3d-dlg-notes-body .g3d-dlg-notes-t { color: var(--g3d-hud-pen); }
@keyframes g3d-dlg-in { from { opacity: 0; transform: translateY(24px) scale(0.98); } }
@keyframes g3d-note-in { from { opacity: 0; transform: translateY(16px) rotate(-4deg); } }

/* ================================================================ cards */
.g3d-rc { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 24px; overflow: auto; pointer-events: auto; font-family: var(--sans); color: var(--screen-ink); }
.g3d-rc[hidden] { display: none; }
.g3d-rc-scrim {
  position: fixed; inset: 0;
  background: radial-gradient(70% 60% at 50% 50%, rgba(12, 10, 28, 0.55) 0%, rgba(4, 3, 10, 0.88) 100%);
  -webkit-backdrop-filter: blur(9px) saturate(0.8); backdrop-filter: blur(9px) saturate(0.8);
  animation: g3d-fade-in 0.42s ease both;
}
.g3d-rc-stage { position: relative; max-width: 100%; margin: auto; }
.g3d-rc-stage.tone-full { position: fixed; inset: 0; margin: 0; }
.g3d-rc-stage.is-shake { animation: g3d-shake 0.36s var(--g3d-ease) both; }
@keyframes g3d-shake { 20% { transform: translate(-3px, 2px); } 40% { transform: translate(3px, -1px); } 60% { transform: translate(-2px, -2px); } 80% { transform: translate(2px, 1px); } }
.g3d-rc-foot { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.g3d-rc-go {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 14px 10px 18px; cursor: pointer;
  font-family: var(--display); font-size: var(--t-label); letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--gold); color: var(--screen); border: 3px solid var(--screen); box-shadow: var(--g3d-hud-hard);
  transition: transform 0.15s cubic-bezier(0.2, 1.5, 0.4, 1), box-shadow 0.15s;
}
.g3d-rc-go:hover { transform: translate(-1px, -2px); box-shadow: 6px 7px 0 rgba(4, 3, 10, 0.55); }
.g3d-rc-go:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(4, 3, 10, 0.55); }
.g3d .g3d-rc-go kbd { color: var(--screen); background: rgba(8, 7, 15, 0.12); border-color: rgba(8, 7, 15, 0.45); }

/* headline: a front page */
.g3d-rc-news {
  position: relative; width: min(760px, 94vw); padding: 20px 26px 20px;
  background-color: var(--receipt); color: var(--receipt-ink);
  background-image: radial-gradient(rgba(26, 20, 51, 0.07) 1px, transparent 1.3px);
  background-size: 4px 4px;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.6), 10px 10px 0 rgba(4, 3, 10, 0.4);
  transform: rotate(-1.1deg);
  animation: g3d-rc-news-in 0.7s cubic-bezier(0.2, 1.15, 0.3, 1) both;
}
.g3d-rc-news-top { margin: 0; display: flex; justify-content: space-between; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--receipt-ink); font-family: var(--display); font-size: var(--g3d-hud-micro); letter-spacing: 0.12em; text-transform: uppercase; }
.g3d-rc-news-outlet { margin: 12px 0 8px; text-align: center; font-family: var(--display); font-size: var(--g3d-hud-title-l); line-height: 1.15; letter-spacing: 0.02em; }
.g3d-rc-news-dateline { margin: 0; display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 4px double var(--receipt-ink); border-bottom: 1px solid var(--receipt-ink); font-size: var(--g3d-hud-small); line-height: 1.4; }
.g3d-rc-news-body { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 18px; margin-top: 14px; }
.g3d-rc-news-photo { margin: 0; }
.g3d-pressphoto { display: block; width: 208px; height: 130px; image-rendering: pixelated; border: 2px solid var(--receipt-ink); }
.g3d-rc-news-photo figcaption { margin-top: 5px; font-size: calc(var(--t-body) * 0.72); line-height: 1.4; color: var(--g3d-hud-paper-2); }
.g3d-rc-news-copy { position: relative; }
.g3d-rc-news-headline { margin: 0; padding-right: 112px; overflow-wrap: break-word; font-family: var(--sans); font-size: var(--g3d-hud-headline); line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.g3d-rc-news-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.g3d-rc-news-cols i { display: block; height: 5px; margin-bottom: 8px; background: rgba(26, 20, 51, 0.2); }
.g3d-rc-news-grade { position: absolute; top: -10px; right: -10px; display: grid; justify-items: center; gap: 12px; }
.g3d-rc-news.has-note .g3d-rc-news-headline { min-height: 128px; }
/* the pen note under the stamp: why the grade reads as it does */
.g3d-rc-news-note { margin: 0; transform: rotate(-4deg); text-align: center; white-space: nowrap; font-size: calc(var(--t-body) * 0.82); line-height: 1.4; color: var(--g3d-hud-pen); animation: g3d-rise-in 0.4s ease 1.35s both; }
.g3d-rc-news-note span { padding: 0 2px 2px; background: linear-gradient(transparent 62%, rgba(255, 204, 51, 0.45) 62%); }
.g3d-rc-news-note.is-shipped { color: var(--g3d-hud-stamp-c); }
.g3d-rc-news-stamp {
  --stamp: var(--g3d-hud-stamp-b);
  position: relative; display: grid; justify-items: center; padding: 8px 12px 7px;
  color: var(--stamp); border: 4px double var(--stamp); background: rgba(255, 253, 244, 0.72);
  transform: rotate(-11deg);
  animation: g3d-stamp 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) 0.82s both;
}
.g3d-rc-news-stamp.is-S { --stamp: var(--g3d-hud-stamp-s); }
.g3d-rc-news-stamp.is-A { --stamp: var(--g3d-hud-stamp-a); }
.g3d-rc-news-stamp.is-C { --stamp: var(--g3d-hud-stamp-c); }
.g3d-rc-news-stamp b { font-family: var(--display); font-size: var(--g3d-hud-stamp); line-height: 1; font-weight: 400; }
.g3d-rc-news-stamp > span:not(.sr-only) { margin-top: 5px; font-family: var(--display); font-size: var(--g3d-hud-micro); letter-spacing: 0.1em; text-transform: uppercase; }
.g3d-rc-news-stats { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 16px 0 0; padding-top: 10px; border-top: 1px solid rgba(26, 20, 51, 0.4); }
.g3d-rc-news-stats dt { font-family: var(--display); font-size: var(--g3d-hud-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--g3d-hud-paper-2); }
.g3d-rc-news-stats dd { margin: 3px 0 0; font-size: var(--t-body); line-height: 1; }
.g3d-rc-news-stats .is-pay dd { color: var(--g3d-hud-paper-money); }
.g3d-rc-news-link { margin-right: auto; display: inline-flex; align-items: center; min-height: 32px; font-size: var(--t-body); color: var(--receipt-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.g3d-rc-news-link:hover { color: var(--g3d-hud-stamp-b); }
@keyframes g3d-rc-news-in { from { opacity: 0; transform: rotate(-9deg) scale(1.28); } 60% { opacity: 1; } }
@keyframes g3d-stamp { 0% { opacity: 0; transform: scale(2.6) rotate(-2deg); } 70% { opacity: 1; transform: scale(0.94) rotate(-12deg); } 100% { opacity: 1; transform: scale(1) rotate(-11deg); } }

/* win: a phone notification */
.g3d-rc-win { width: min(390px, 92vw); animation: g3d-rise-in 0.5s cubic-bezier(0.2, 1.2, 0.3, 1) both; }
.g3d-rc-win-phone {
  position: relative; overflow: hidden; padding: 12px 16px 20px;
  background: linear-gradient(180deg, var(--g3d-hud-phone-1) 0%, var(--g3d-hud-phone-2) 100%);
  border: 2px solid rgba(255, 244, 214, 0.28); border-radius: 30px;
  box-shadow: inset 0 0 0 7px var(--screen), 0 34px 90px rgba(0, 0, 0, 0.6);
}
.g3d-rc-win-status { margin: 0; display: flex; justify-content: space-between; align-items: center; padding: 6px 12px 12px; font-family: var(--display); font-size: var(--g3d-hud-micro); color: var(--screen-ink); }
.g3d-rc-win-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.g3d-rc-win-bars i { width: 3px; background: currentColor; }
.g3d-rc-win-bars i:nth-child(1) { height: 3px; } .g3d-rc-win-bars i:nth-child(2) { height: 5px; } .g3d-rc-win-bars i:nth-child(3) { height: 7px; } .g3d-rc-win-bars i:nth-child(4) { height: 10px; }
.g3d-rc-win-ribbon {
  position: absolute; top: 20px; right: -50px; z-index: 2; margin: 0; padding: 7px 52px; transform: rotate(38deg);
  background: var(--gold); color: var(--screen); box-shadow: 0 4px 0 rgba(4, 3, 10, 0.45);
  font-family: var(--display); font-size: var(--g3d-hud-micro); letter-spacing: 0.08em; text-transform: uppercase;
  animation: g3d-ribbon 0.5s cubic-bezier(0.2, 1.4, 0.3, 1) 0.55s both;
}
.g3d-rc-win-note { padding: 12px 14px 14px; background: rgba(255, 244, 214, 0.1); border: 1px solid var(--g3d-line); border-radius: 18px; animation: g3d-drop 0.55s cubic-bezier(0.2, 1.3, 0.3, 1) 0.2s both; }
.g3d-rc-win-app { margin: 0; display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: var(--g3d-hud-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--screen-dim); }
.g3d-rc-win-app .g3d-px { color: var(--g3d-money); }
.g3d-rc-win-now { margin-left: auto; text-transform: none; }
.g3d-rc-win.is-record .g3d-rc-win-now, .g3d-rc-win.is-record .g3d-rc-win-bars { visibility: hidden; }
.g3d-rc-win-title { margin: 10px 0 0; font-family: var(--display); font-size: var(--t-label); line-height: 1.5; color: var(--screen-ink); }
.g3d-rc-win-body { margin: 4px 0 0; font-size: var(--t-lede); line-height: 1.3; color: var(--screen-ink); }
.g3d-rc-win-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.g3d-rc-win-chip { padding: 5px 7px 4px; border-radius: 6px; font-family: var(--display); font-size: var(--g3d-hud-tiny); line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; color: var(--screen); background: var(--screen-dim); animation: g3d-drop 0.45s cubic-bezier(0.2, 1.3, 0.3, 1) 0.6s both; }
.g3d-rc-win-chip.is-uncommon { background: var(--cyan); }
.g3d-rc-win-chip.is-rare { background: var(--gold); }
.g3d-rc-win-chip.is-legendary { background: var(--magenta); }
.g3d-rc-win-chip.is-first { background: var(--g3d-money); }
.g3d-rc-win-stats b .g3d-rc-win-grade { margin-left: 8px; vertical-align: 3px; }
.g3d-rc-win-stats { display: grid; grid-template-columns: 1fr 0.86fr 1.4fr; gap: 8px; margin: 14px 0 0; }
.g3d-rc-win-stats > div { padding: 9px 10px; background: rgba(255, 244, 214, 0.06); border: 1px solid var(--g3d-line); border-radius: 12px; min-width: 0; }
.g3d-rc-win-stats dt { font-family: var(--display); font-size: var(--g3d-hud-tiny); letter-spacing: 0.04em; text-transform: uppercase; color: var(--screen-dim); white-space: nowrap; }
.g3d-rc-win-stats dd { margin: 5px 0 0; }
.g3d-rc-win-stats b { display: block; font-weight: 400; font-size: var(--t-lede); line-height: 1; color: var(--screen-ink); overflow-wrap: anywhere; }
.g3d-rc-win-stats small { display: block; margin-top: 2px; font-size: calc(var(--t-body) * 0.72); color: var(--screen-dim); }
.g3d-rc-win-val b { color: var(--g3d-money); }
.g3d-rc-win-meter { display: block; height: 4px; margin-top: 7px; background: rgba(255, 244, 214, 0.14); overflow: hidden; }
.g3d-rc-win-meter i { display: block; height: 100%; background: var(--cyan); transform-origin: left center; animation: g3d-grow 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s both; }
.g3d-rc-win .g3d-rc-foot { justify-content: stretch; }
.g3d-rc-win .g3d-rc-go { width: 100%; justify-content: center; }
.g3d-rc-win-timer { position: absolute; left: 34px; right: 34px; bottom: 9px; height: 2px; background: rgba(255, 244, 214, 0.14); overflow: hidden; }
.g3d-rc-win-timer i { display: block; height: 100%; background: rgba(255, 244, 214, 0.6); transform-origin: left center; animation: g3d-timer var(--card-ms, 9000ms) linear both; }
.g3d-rc-stage.is-held .g3d-rc-win-timer { opacity: 0; transition: opacity 0.3s; }
.g3d-rc-win.is-record .g3d-rc-win-phone { border-color: var(--gold); box-shadow: inset 0 0 0 7px var(--screen), 0 0 40px rgba(255, 204, 51, 0.3), 0 34px 90px rgba(0, 0, 0, 0.6); }
@keyframes g3d-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes g3d-drop { from { opacity: 0; transform: translateY(-26px) scale(0.96); } }
@keyframes g3d-ribbon { from { opacity: 0; transform: rotate(38deg) translateY(-30px); } }

/* notes: Ryan's notebook */
.g3d-rc-notes {
  position: relative; width: min(580px, 92vw); padding: 0 30px 20px 72px;
  background-color: var(--receipt); color: var(--receipt-ink);
  background-image:
    linear-gradient(90deg, transparent 54px, var(--g3d-hud-margin) 54px 56px, transparent 56px),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(11, 92, 173, 0.22) 31px 32px);
  background-position: 0 0, 0 0;
  transform: rotate(0.8deg);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.6), 8px 8px 0 rgba(4, 3, 10, 0.45);
  animation: g3d-note-in 0.55s cubic-bezier(0.2, 1.2, 0.3, 1) both;
}
.g3d-rc-notes-rings { position: absolute; left: 14px; top: 22px; bottom: 22px; width: 22px; background: radial-gradient(circle at 11px 11px, var(--g3d-hud-ring) 0 6px, rgba(42, 36, 64, 0.25) 7px, transparent 8px) 0 0 / 22px 32px repeat-y; }
.g3d-rc-notes-title { margin: 0; height: 64px; display: flex; align-items: flex-end; padding-bottom: 2px; font-family: var(--sans); font-size: var(--g3d-hud-headline); line-height: 1.2; color: var(--g3d-hud-pen); }
.g3d-rc-notes-sub { margin: 0; height: 32px; line-height: 30px; font-family: var(--display); font-size: var(--g3d-hud-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--g3d-hud-stamp-s); }
.g3d-rc-notes-intro { margin: 0; font-size: var(--t-body); line-height: 32px; }
.g3d-rc-notes-list { margin: 0; padding: 0; list-style: none; }
.g3d-rc-notes-list li { animation: g3d-rise-in 0.4s ease both; }
.g3d-rc-notes-list li:nth-child(2) { animation-delay: 0.25s; }
.g3d-rc-notes-list li:nth-child(3) { animation-delay: 0.5s; }
.g3d-rc-notes-todo { margin: 0; font-size: var(--t-lede); line-height: 32px; }
.g3d-rc-notes-todo b { font-weight: 400; color: var(--g3d-hud-stamp-s); text-decoration: underline wavy rgba(179, 18, 46, 0.55); text-underline-offset: 5px; }
.g3d-rc-notes-box { display: inline-block; width: 16px; height: 16px; margin-right: 10px; vertical-align: -1px; border: 2px solid var(--receipt-ink); }
.g3d-rc-notes-note { margin: 0; padding-left: 26px; font-size: var(--t-body); line-height: 32px; color: var(--g3d-hud-paper-2); }
.g3d-rc-notes-sign { margin: 0; text-align: right; font-size: var(--t-lede); line-height: 32px; color: var(--g3d-hud-pen); }

/* chapter: a title card for a new company */
.g3d-rc-chap {
  position: fixed; inset: 0; display: grid; align-content: center; justify-items: center; gap: 14px; padding: 48px 24px; text-align: center; overflow: auto;
  background: radial-gradient(ellipse 75% 60% at 50% 42%, var(--c-glow) 0%, var(--c-bg) 72%);
  color: var(--screen-ink);
  animation: g3d-fade-in 0.6s ease both;
}
.g3d-rc-chap::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 2px, transparent 2px 4px); }
.g3d-rc-chap::after {
  /* the inset frame, notched round the coffee cup that folds into the bottom-right corner */
  --f: rgba(255, 244, 214, 0.16); --n: 58px;
  content: ''; position: absolute; inset: 18px; pointer-events: none;
  background:
    linear-gradient(var(--f), var(--f)) left top / 100% 2px no-repeat,
    linear-gradient(var(--f), var(--f)) left top / 2px 100% no-repeat,
    linear-gradient(var(--f), var(--f)) left bottom / calc(100% - var(--n)) 2px no-repeat,
    linear-gradient(var(--f), var(--f)) right top / 2px calc(100% - var(--n)) no-repeat,
    linear-gradient(var(--f), var(--f)) right 0 bottom calc(var(--n) - 2px) / var(--n) 2px no-repeat,
    linear-gradient(var(--f), var(--f)) right calc(var(--n) - 2px) bottom 0 / 2px var(--n) no-repeat;
}
@media (max-width: 900px) { .g3d-rc-chap::after { --n: 50px; } }
@media (min-width: 1760px) and (min-height: 980px) { .g3d-rc-chap::after { --n: 68px; } }
.g3d-rc-chap > * { position: relative; z-index: 1; }
.g3d-rc-chap-kicker { margin: 0; font-family: var(--display); font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-kicker); animation: g3d-rise-in 0.5s ease 0.3s both; }
.g3d-rc-chap-company { margin: 4px 0 0; max-width: 18ch; font-family: var(--display); font-size: var(--g3d-hud-display); line-height: 1.18; color: var(--screen-ink); text-shadow: var(--g3d-text-lift); animation: g3d-title-in 0.8s var(--g3d-ease) 0.55s both; }
.g3d-rc-chap-role { margin: 6px 0 0; padding: 8px 12px; font-family: var(--display); font-size: var(--t-label); letter-spacing: 0.08em; text-transform: uppercase; border: 2px solid rgba(255, 244, 214, 0.45); animation: g3d-rise-in 0.5s ease 1s both; }
.g3d-rc-chap-tag { margin: 2px 0 0; max-width: 34ch; font-size: var(--t-lede); line-height: 1.3; text-wrap: balance; animation: g3d-rise-in 0.5s ease 1.2s both; }
.g3d-rc-chap-intro { display: grid; gap: 6px; max-width: 52ch; margin-top: 10px; }
.g3d-rc-chap-intro p { margin: 0; font-size: var(--t-body); line-height: 1.4; text-wrap: balance; animation: g3d-rise-in 0.6s ease both; animation-delay: calc(1.7s + var(--i) * 1.25s); }
.g3d-rc-chap.is-all .g3d-rc-chap-intro p { animation-delay: 0s; }
.g3d-rc-chap .g3d-rc-foot { justify-content: center; margin-top: 18px; animation: g3d-rise-in 0.5s ease 1.4s both; }
@keyframes g3d-title-in { from { opacity: 0; letter-spacing: 0.4em; filter: blur(2px); } }

/* keynote: the verdict, staged. Velvet curtains, a spotlight and an LED wall in the chapter's
   colours, the marquee of Stuyvesant Hall, the three reporters' faces, and the applause meter.
   A pass brings the house up; a miss dims it. */
.g3d-rc-key {
  --c-glow: var(--gold); --c-shadow: var(--magenta); --c-ink: var(--gold);
  position: relative; isolation: isolate; overflow: hidden; width: min(700px, 94vw); padding: 26px 64px 20px; text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, #2a1734 0%, #120914 60%, #0a060c 100%);
  border: 1px solid rgba(255, 231, 163, 0.35);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.6), 10px 10px 0 rgba(4, 3, 10, 0.45);
  animation: g3d-pop-in 0.45s cubic-bezier(0.2, 1.2, 0.3, 1) both;
}
.g3d-rc-key > * { position: relative; z-index: 1; }
.g3d-rc-key > .g3d-rc-key-house { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.g3d-rc-key-house i { position: absolute; display: block; }
/* the LED wall behind the speaker, in the chapter's colour */
.g3d-rc-key-wall {
  left: 14%; right: 14%; top: 22px; height: 150px; opacity: 0.5;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0 1px, transparent 1px 6px),
    radial-gradient(80% 90% at 50% 40%, var(--c-glow), transparent 75%);
  -webkit-mask: linear-gradient(#000 55%, transparent); mask: linear-gradient(#000 55%, transparent);
}
/* the follow spot, from the grid above */
.g3d-rc-key-spot {
  left: 50%; top: -40px; width: 520px; height: 520px; margin-left: -260px;
  background: conic-gradient(from 160deg at 50% 0%, transparent 0deg, rgba(255, 238, 200, 0.2) 14deg, rgba(255, 238, 200, 0.12) 26deg, transparent 40deg);
  filter: blur(6px);
  animation: g3d-spot-in 0.9s ease 0.2s both;
}
.g3d-rc-key-curtain {
  top: 0; bottom: 0; width: 56px;
  background: repeating-linear-gradient(90deg, var(--g3d-hud-velvet-2) 0 3px, var(--g3d-hud-velvet) 3px 11px, #7a1a2a 11px 14px, var(--g3d-hud-velvet) 14px 18px);
  box-shadow: inset 0 -30px 40px rgba(0, 0, 0, 0.45);
}
.g3d-rc-key-curtain.is-l { left: 0; border-bottom-right-radius: 34px 90px; animation: g3d-curtain-l 0.8s cubic-bezier(0.2, 0.9, 0.2, 1) both; }
.g3d-rc-key-curtain.is-r { right: 0; border-bottom-left-radius: 34px 90px; animation: g3d-curtain-r 0.8s cubic-bezier(0.2, 0.9, 0.2, 1) both; }
.g3d-rc-key-valance { left: 0; right: 0; top: 0; height: 14px; background: repeating-linear-gradient(90deg, var(--g3d-hud-velvet) 0 18px, var(--g3d-hud-velvet-2) 18px 20px); border-bottom: 2px solid rgba(255, 204, 51, 0.55); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); }
@keyframes g3d-curtain-l { from { transform: translateX(170%) scaleX(2.6); transform-origin: left; } }
@keyframes g3d-curtain-r { from { transform: translateX(-170%) scaleX(2.6); transform-origin: right; } }
@keyframes g3d-spot-in { from { opacity: 0; } }
/* the marquee: the hall's name in a ring of bulbs */
.g3d-rc-key-marquee { margin: 10px auto 0; display: inline-block; padding: 6px; background: radial-gradient(circle, var(--g3d-hud-bulb) 0 1.6px, transparent 2.2px) 0 0 / 9px 9px; border-radius: 4px; }
.g3d-rc-key-marquee span {
  display: block; padding: 7px 14px 6px; background: #1a0c12; border: 1px solid rgba(255, 231, 163, 0.5);
  font-family: var(--display); font-size: var(--g3d-hud-micro); letter-spacing: 0.18em; text-transform: uppercase; color: var(--g3d-hud-bulb);
  text-shadow: 0 0 8px rgba(255, 204, 51, 0.6);
}
.g3d-rc-key.is-passed .g3d-rc-key-marquee { animation: g3d-bulbs 0.8s var(--g3d-ease) 1.2s 4; }
@keyframes g3d-bulbs { 50% { background-position: 4.5px 4.5px; } }
.g3d-rc-key-kicker { margin: 12px 0 0; font-family: var(--display); font-size: var(--g3d-hud-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--screen-dim); }
.g3d-rc-key-title { margin: 10px 0 0; font-family: var(--display); font-size: var(--g3d-hud-title); line-height: 1.35; color: var(--screen-ink); text-shadow: var(--g3d-text-lift); text-wrap: balance; }
.g3d-rc-key-score { margin: 8px 0 0; font-size: var(--t-lede); color: var(--screen-ink); }
.g3d-rc-key-score b { font-weight: 400; color: var(--gold); }
.g3d-rc-key-answers { margin: 16px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.g3d-rc-key-answers li {
  display: grid; justify-items: center; gap: 8px; padding: 12px 8px 10px;
  background: rgba(255, 244, 214, 0.05); border: 1px solid var(--g3d-line); border-top: 3px solid currentColor;
  animation: g3d-flip 0.5s cubic-bezier(0.2, 1.3, 0.3, 1) both; animation-delay: calc(0.45s + var(--i) * 0.35s);
}
.g3d-rc-key-answers .is-right { color: var(--g3d-money); }
.g3d-rc-key-answers .is-wrong { color: var(--g3d-hud-danger); }
.g3d-rc-key-face { position: relative; width: 56px; height: 56px; border: 2px solid currentColor; box-shadow: var(--g3d-hud-hard); background: var(--g3d-hud-well); }
.g3d-rc-key-face .g3d-portrait { width: 100%; height: 100%; }
.g3d-rc-key-q { display: grid; place-items: center; width: 100%; height: 100%; font-family: var(--display); font-size: var(--g3d-hud-micro); color: var(--screen-dim); }
.g3d-rc-key-mark { position: absolute; right: -9px; bottom: -9px; width: 24px; height: 24px; display: grid; place-items: center; background: currentColor; border: 2px solid var(--screen); animation: g3d-stamp-in 0.35s cubic-bezier(0.3, 1.6, 0.5, 1) both; animation-delay: calc(0.75s + var(--i) * 0.35s); }
.g3d-rc-key-mark .g3d-px { color: var(--screen); }
.g3d-rc-key-who b { display: block; font-weight: 400; font-size: var(--t-body); line-height: 1.4; color: var(--screen-ink); }
.g3d-rc-key-who small { display: block; font-size: calc(var(--t-body) * 0.75); color: var(--screen-dim); }
/* the applause meter */
.g3d-rc-key-meter { margin: 16px auto 0; display: flex; align-items: center; justify-content: center; gap: 10px; }
.g3d-rc-key-meter-k { font-family: var(--display); font-size: var(--g3d-hud-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--screen-dim); }
.g3d-rc-key-meter-bar { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--g3d-line); background: rgba(0, 0, 0, 0.35); }
.g3d-rc-key-meter-bar i { width: 14px; height: 12px; background: rgba(255, 244, 214, 0.1); }
.g3d-rc-key-meter-bar i.is-on { background: var(--gold); box-shadow: 0 0 8px rgba(255, 204, 51, 0.55); animation: g3d-seg-on 0.2s var(--g3d-ease) both; animation-delay: calc(1.5s + var(--i) * 0.07s); }
.g3d-rc-key-meter-bar i.is-on:nth-child(n+8) { background: var(--g3d-hud-warm); box-shadow: 0 0 8px rgba(255, 163, 92, 0.6); }
@keyframes g3d-seg-on { from { background: rgba(255, 244, 214, 0.1); box-shadow: none; } }
@keyframes g3d-stamp-in { from { opacity: 0; transform: scale(2.2) rotate(-12deg); } }
.g3d-rc-key-result { margin: 14px 0 0; font-family: var(--display); font-size: var(--g3d-hud-title-s); line-height: 1.4; color: var(--gold); text-shadow: 0 0 18px rgba(255, 204, 51, 0.35); animation: g3d-rise-in 0.5s ease 1.9s both; }
.g3d-rc-key-reward { margin: 12px auto 0; width: fit-content; display: grid; gap: 4px; justify-items: center; padding: 8px 22px 9px; border: 2px dashed rgba(255, 231, 163, 0.55); background: rgba(255, 231, 163, 0.06); animation: g3d-rise-in 0.5s ease 2.1s both; }
.g3d-rc-key-reward span { font-family: var(--display); font-size: var(--g3d-hud-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--screen-dim); }
.g3d-rc-key-reward b { font-weight: 400; font-size: var(--t-lede); color: var(--g3d-money); }
.g3d-rc-key-next { margin: 10px auto 0; max-width: 40ch; font-size: var(--t-body); color: var(--screen-dim); animation: g3d-rise-in 0.5s ease 1.9s both; }
.g3d-rc-key .g3d-rc-foot { justify-content: center; }
/* a miss: the house lights stay down, the spot narrows and greys */
.g3d-rc-key.is-failed { background: radial-gradient(120% 90% at 50% 0%, #1a1522 0%, #0c0a10 60%, #070609 100%); border-color: var(--g3d-line); }
.g3d-rc-key.is-failed .g3d-rc-key-wall { opacity: 0.16; filter: grayscale(0.8); }
.g3d-rc-key.is-failed .g3d-rc-key-spot { opacity: 0.45; filter: blur(6px) grayscale(1); }
.g3d-rc-key.is-failed .g3d-rc-key-curtain { filter: brightness(0.6) saturate(0.7); }
.g3d-rc-key.is-failed .g3d-rc-key-marquee { background: radial-gradient(circle, rgba(255, 231, 163, 0.28) 0 1.6px, transparent 2.2px) 0 0 / 9px 9px; }
.g3d-rc-key.is-failed .g3d-rc-key-marquee span { color: var(--screen-dim); text-shadow: none; border-color: var(--g3d-line); }
.g3d-rc-key.is-failed .g3d-rc-key-title { color: var(--screen-dim); text-shadow: var(--g3d-text-lift); }
.g3d-rc-key.is-failed .g3d-rc-key-result { color: var(--screen-ink); text-shadow: none; }
@keyframes g3d-flip { from { opacity: 0; transform: perspective(500px) rotateX(-80deg); } }

/* ending: the whole run */
.g3d-rc-end { width: min(740px, 94vw); padding: 24px 30px 20px; background: var(--g3d-glass-2); border: 1px solid var(--g3d-line); box-shadow: var(--g3d-hud-lift), var(--g3d-hud-hard); animation: g3d-pop-in 0.5s cubic-bezier(0.2, 1.2, 0.3, 1) both; }
.g3d-rc-end-kicker { margin: 0; font-family: var(--display); font-size: var(--g3d-hud-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--screen-dim); text-align: center; }
.g3d-rc-end-title { margin: 12px 0 0; text-align: center; font-family: var(--display); font-size: var(--g3d-hud-title-l); line-height: 1.3; color: var(--screen-ink); text-shadow: var(--g3d-text-lift); }
.g3d-rc-end-total { margin: 18px 0 6px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--g3d-line); }
.g3d-rc-end-total span { font-family: var(--display); font-size: var(--g3d-hud-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--screen-dim); }
.g3d-rc-end-total b { font-weight: 400; font-size: var(--g3d-hud-money); line-height: 1; color: var(--gold); }
.g3d-rc-end-rev { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.g3d-rc-end-rev li { display: grid; grid-template-columns: minmax(150px, 34%) 1fr 72px; gap: 12px; align-items: center; font-size: var(--g3d-hud-small); line-height: 1.4; }
.g3d-rc-end-co { display: flex; align-items: center; gap: 8px; color: var(--screen-ink); }
.g3d-rc-end-grade, .g3d-rc-win-grade { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 3px; font-family: var(--display); font-size: var(--g3d-hud-tiny); line-height: 1; color: var(--screen); background: var(--screen-dim); }
.g3d-rc-end-grade.is-S, .g3d-rc-win-grade.is-S { background: var(--gold); }
.g3d-rc-end-grade.is-A, .g3d-rc-win-grade.is-A { background: var(--g3d-money); }
.g3d-rc-end-grade.is-B, .g3d-rc-win-grade.is-B { background: var(--cyan); }
.g3d-rc-end-line { margin: 16px auto 0; max-width: 46ch; text-align: center; font-family: var(--display); font-size: var(--t-label); line-height: 1.6; color: var(--gold); }
.g3d-rc-end-bar { position: relative; height: 12px; background: rgba(255, 244, 214, 0.07); overflow: hidden; }
.g3d-rc-end-bar i { display: block; height: 100%; transform-origin: left center; animation: g3d-grow 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(0.45s + var(--i) * 0.09s); }
.g3d-rc-end-usd { font-weight: 400; text-align: right; color: var(--screen-ink); }
.g3d-rc-end-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 0 0; }
.g3d-rc-end-stats > div { padding: 10px; text-align: center; background: rgba(255, 244, 214, 0.05); border: 1px solid var(--g3d-line); }
.g3d-rc-end-stats dt { font-family: var(--display); font-size: var(--g3d-hud-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--screen-dim); }
.g3d-rc-end-stats dd { margin: 6px 0 0; font-size: var(--t-lede); line-height: 1; color: var(--gold); }
.g3d-rc-end-close { margin: 10px auto 0; max-width: 52ch; text-align: center; font-size: var(--t-body); line-height: 1.4; color: var(--screen-ink); }
.g3d-rc-end-link { color: var(--cyan); }
.g3d-rc-end-link:hover { color: var(--screen-ink); }
@keyframes g3d-grow { from { transform: scaleX(0); } }

/* confetti: square pixels, bursting then falling */
.g3d-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 41; overflow: hidden; }
.g3d-confetti i { position: absolute; left: var(--cx); top: var(--cy); width: var(--s); height: var(--s); opacity: 0; animation: g3d-bit 1.9s cubic-bezier(0.15, 0.7, 0.3, 1) var(--d) forwards; }
@keyframes g3d-bit {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  45% { opacity: 1; transform: translate(var(--x), var(--y)) rotate(calc(var(--r) * 0.5)); }
  100% { opacity: 0; transform: translate(calc(var(--x) * 1.15), calc(var(--y) + var(--fall))) rotate(var(--r)); }
}

/* ======================================================= buy me a coffee */
.g3d-bmc { position: fixed; right: var(--g3d-hud-edge); bottom: var(--g3d-hud-edge); z-index: 60; display: grid; justify-items: end; gap: 10px; font-family: var(--sans); color: var(--screen-ink); pointer-events: none; }
.g3d-bmc > * { pointer-events: auto; }
.g3d-bmc-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 5px 14px 5px 10px; cursor: pointer;
  font-family: var(--display); font-size: var(--g3d-hud-micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--screen-ink);
  background: var(--g3d-glass-2); border: 1px solid rgba(255, 204, 51, 0.6);
  -webkit-backdrop-filter: var(--g3d-hud-blur); backdrop-filter: var(--g3d-hud-blur);
  box-shadow: var(--g3d-hud-hard);
  transition: transform 0.18s cubic-bezier(0.2, 1.5, 0.4, 1), border-color 0.18s, box-shadow 0.18s;
}
.g3d-bmc-btn:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 4px 6px 0 rgba(4, 3, 10, 0.55), 0 0 20px rgba(255, 204, 51, 0.25); }
.g3d-bmc-btn:active { transform: translateY(1px); box-shadow: 1px 1px 0 rgba(4, 3, 10, 0.55); }
.g3d-bmc-btn[aria-expanded="true"] { border-color: var(--gold); }
.g3d-cup { margin-top: -4px; }
.g3d-steam rect { opacity: 0; animation: g3d-steam 2s steps(1) infinite; }
.g3d-steam .s2 { animation-delay: 1s; }
.g3d-bmc-btn:hover .g3d-steam rect { animation-duration: 1s; }
@keyframes g3d-steam { 0% { opacity: 0; transform: translateY(1px); } 20% { opacity: 1; transform: translateY(0); } 60% { opacity: 1; transform: translateY(-1px); } 80% { opacity: 0; } }
/* over a panel (and in photo mode) the button folds to its cup, so it never sits on the panel's
   content; the words stay for screen readers and come back on hover */
.g3d-modal .g3d-bmc:not(.is-open) .g3d-bmc-btn:not(:hover):not(:focus-visible) .g3d-bmc-text,
.g3d-bmc.is-photo .g3d-bmc-btn:not(:hover):not(:focus-visible) .g3d-bmc-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.g3d-modal .g3d-bmc:not(.is-open) .g3d-bmc-btn:not(:hover):not(:focus-visible),
.g3d-bmc.is-photo .g3d-bmc-btn:not(:hover):not(:focus-visible) { gap: 0; padding: 5px 9px; }
.g3d-bmc-pop {
  width: 290px; display: grid; gap: 10px; justify-items: center; padding: 16px 16px 12px; text-align: center;
  background: var(--g3d-glass-2); border: 1px solid var(--g3d-line);
  -webkit-backdrop-filter: var(--g3d-hud-blur); backdrop-filter: var(--g3d-hud-blur);
  box-shadow: var(--g3d-hud-lift), var(--g3d-hud-hard);
  animation: g3d-pop-up 0.3s cubic-bezier(0.2, 1.3, 0.3, 1) both; transform-origin: 100% 100%;
}
.g3d-bmc-pop[hidden] { display: none; }
.g3d-bmc-h { margin: 0; font-family: var(--display); font-size: var(--t-label); line-height: 1.4; color: var(--gold); }
.g3d-bmc-p { margin: 0; font-size: var(--g3d-hud-small); line-height: 1.4; color: var(--screen-ink); }
.g3d-bmc-qr { margin: 2px 0 0; padding: 10px 10px 6px; background: var(--g3d-hud-qr); box-shadow: var(--g3d-hud-hard); }
.g3d-bmc-qr img { display: block; width: 168px; height: 168px; }
.g3d-bmc-qr figcaption { margin-top: 4px; font-size: calc(var(--t-body) * 0.75); color: var(--receipt-ink); }
.g3d-bmc-link {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 10px 14px; text-decoration: none;
  font-family: var(--display); font-size: var(--g3d-hud-micro); letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--gold); color: var(--screen); border: 3px solid var(--screen); box-shadow: var(--g3d-hud-hard);
}
.g3d-bmc-link:hover { transform: translate(-1px, -2px); box-shadow: 5px 6px 0 rgba(4, 3, 10, 0.55); }
.g3d-bmc-close { min-height: 32px; }
@keyframes g3d-pop-up { from { opacity: 0; transform: translateY(12px) scale(0.94); } }

/* ================================================================ pause */
.g3d-pause { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; padding: 24px; overflow: auto; pointer-events: auto; font-family: var(--sans); color: var(--screen-ink); }
.g3d-pause[hidden] { display: none; }
.g3d-pause-scrim { position: fixed; inset: 0; background: radial-gradient(70% 70% at 50% 45%, rgba(18, 16, 42, 0.5), rgba(4, 3, 10, 0.85)); -webkit-backdrop-filter: blur(7px) saturate(0.85); backdrop-filter: blur(7px) saturate(0.85); animation: g3d-fade-in 0.3s ease both; }
.g3d-pause-box { width: min(470px, 100%); display: grid; gap: 14px; padding: 24px 26px 18px; text-align: center; background: var(--g3d-glass-2); animation: g3d-pop-in 0.35s cubic-bezier(0.2, 1.2, 0.3, 1) both; }
.g3d-pause-kick { margin: 0; font-family: var(--display); font-size: var(--g3d-hud-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.g3d-pause-title { margin: 0; font-family: var(--display); font-size: var(--g3d-hud-title); line-height: 1.4; font-weight: 400; color: var(--screen-ink); text-shadow: var(--g3d-text-lift); }
.g3d-pause-title-a, .g3d-pause-title-b { display: block; }
.g3d-pause-title-b { color: var(--gold); }
.g3d-pause-sub { margin: -4px 0 4px; font-size: var(--g3d-hud-small); line-height: 1.4; color: var(--screen-dim); }
.g3d-pause-resume {
  display: inline-flex; justify-content: center; align-items: center; gap: 12px; width: 100%; min-height: 52px; cursor: pointer;
  font-family: var(--display); font-size: var(--t-label); letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--gold); color: var(--screen); border: 3px solid var(--screen); box-shadow: var(--g3d-hud-hard);
  transition: transform 0.15s cubic-bezier(0.2, 1.5, 0.4, 1), box-shadow 0.15s;
}
.g3d-pause-resume:hover { transform: translate(-1px, -2px); box-shadow: 5px 6px 0 rgba(4, 3, 10, 0.55); }
.g3d-pause-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.g3d-pause-grid li[hidden] { display: none; }
.g3d-pause-item {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px 6px 12px; cursor: pointer;
  font-family: var(--sans); font-size: var(--t-body); line-height: 1.4; color: var(--screen-ink); text-align: left;
  background: rgba(255, 244, 214, 0.05); border: 1px solid var(--g3d-line);
  transition: background-color 0.12s, border-color 0.12s;
}
.g3d-pause-item:hover { background: rgba(255, 204, 51, 0.12); border-color: var(--gold); }
.g3d-pause-links { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid var(--g3d-line); }
.g3d-pause-links[hidden] { display: none; }
.g3d-pause-2d, .g3d-pause-reset { display: inline-flex; align-items: center; min-height: 36px; font-size: var(--t-body); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.g3d-pause-2d { color: var(--cyan); }
.g3d-pause-2d:hover { color: var(--screen-ink); }
.g3d-pause-reset { padding: 0; cursor: pointer; background: none; border: 0; font-family: var(--sans); color: var(--g3d-hud-pink); }
.g3d-pause-confirm { display: grid; gap: 8px; padding: 12px 14px; text-align: left; border: 1px solid rgba(255, 107, 122, 0.65); background: rgba(255, 61, 129, 0.08); }
.g3d-pause-confirm[hidden] { display: none; }
.g3d-pause-confirm-h { margin: 0; font-family: var(--display); font-size: var(--g3d-hud-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--g3d-hud-pink); }
.g3d-pause-confirm-p { margin: 0; font-size: var(--g3d-hud-small); line-height: 1.4; }
.g3d-pause-confirm-row { display: flex; gap: 8px; flex-wrap: wrap; }
.g3d-pause-danger, .g3d-pause-keep { min-height: 40px; padding: 6px 12px; cursor: pointer; font-family: var(--display); font-size: var(--g3d-hud-micro); text-transform: uppercase; letter-spacing: 0.04em; }
.g3d-pause-danger { background: var(--g3d-hud-danger); color: var(--screen); border: 3px solid var(--screen); }
.g3d-pause-keep { background: transparent; color: var(--screen-ink); border: 1px solid var(--g3d-line); }
.g3d-pause-hint { margin: -4px 0 0; font-size: var(--g3d-hud-small); color: var(--screen-dim); }
.g3d-pause-hint[hidden] { display: none; }
.g3d-pause-credits { margin: 0; font-size: calc(var(--t-body) * 0.7); line-height: 1.4; color: var(--screen-dim); }

/* ============================================================== shared */
@keyframes g3d-fade-in { from { opacity: 0; } }
@keyframes g3d-rise-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes g3d-pop-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } }

/* narrow windows: tighten the corners before anything collides */
@media (max-width: 1100px) {
  .g3d-hud-tr { width: 230px; }
  .g3d-hud-co { max-width: 270px; min-width: 200px; }
  .g3d-mini { width: 164px; height: 164px; }
  .g3d-bmc-btn:not(:hover):not(:focus-visible) .g3d-bmc-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .g3d-bmc-btn { gap: 0; padding: 5px 9px; }
}
@media (max-height: 640px) {
  .g3d-mini { width: 150px; height: 150px; }
  .g3d-hud-keys { display: none; }
}
/* a smaller minimap keeps its whole name: the tab tightens to the 8-pixel grid */
@media (max-width: 1100px), (max-height: 640px) {
  .g3d-mini-name { left: 8px; max-width: calc(100% - 8px); padding: 5px 6px 4px; font-size: var(--g3d-hud-tiny); letter-spacing: 0.02em; }
}
/* short windows: the tall panels tighten so their buttons stay in view */
@media (max-height: 620px) {
  .g3d-rc { padding: 12px; }
  .g3d-rc-foot { margin-top: 10px; }
  .g3d-rc-end { padding: 14px 24px 12px; }
  .g3d-rc-end-title { margin-top: 6px; }
  .g3d-rc-end-total { margin: 10px 0 4px; padding-bottom: 6px; }
  .g3d-rc-end-rev { gap: 1px; }
  .g3d-rc-end-stats { margin-top: 10px; }
  .g3d-rc-end-stats > div { padding: 6px 8px; }
  .g3d-rc-end-stats dd { margin-top: 3px; }
  .g3d-rc-end-line { margin-top: 8px; }
  .g3d-rc-end-close { margin-top: 6px; }
  .g3d-rc-key { padding: 16px 60px 14px; }
  .g3d-rc-key-marquee { margin-top: 2px; }
  .g3d-rc-key-answers { margin-top: 10px; }
  .g3d-rc-key-answers li { padding: 8px 6px; gap: 6px; }
  .g3d-rc-key-face { width: 44px; height: 44px; }
  .g3d-rc-key-meter { margin-top: 10px; }
  .g3d-rc-key-result { margin-top: 8px; }
  .g3d-pause { padding: 12px; }
  .g3d-pause-box { gap: 9px; padding: 14px 20px 12px; }
  .g3d-pause-title { font-size: var(--t-figure); }
  .g3d-pause-resume { min-height: 44px; }
  .g3d-pause-item { min-height: 38px; }
  .g3d-pause-links { padding-top: 2px; }
  .g3d-pause-hint { margin: -2px 0 0; }
  .g3d-map { padding: 12px; }
}

/* big screens: the corner pieces grow a notch so they read from the couch */
@media (min-width: 1760px) and (min-height: 980px) {
  .g3d-hud-tl, .g3d-hud-tr, .g3d-hud-needs, .g3d-hud-keys, .g3d-mini, .g3d-bmc { zoom: 1.2; }
}

/* reduced motion (the OS setting, or the game's own): nothing moves on its own */
@media (prefers-reduced-motion: reduce) {
  .g3d-hud-layer *, .g3d-pie *, .g3d-dlg *, .g3d-rc *, .g3d-map *, .g3d-pause *, .g3d-bmc *,
  .g3d-hud-layer *::before, .g3d-hud-layer *::after { animation: none !important; transition: none !important; }
  .g3d-confetti { display: none; }
  .g3d-steam rect { opacity: 0.8; }
}
.g3d-hud-still .g3d-hud-layer *, .g3d-hud-still .g3d-pie *, .g3d-hud-still .g3d-dlg *, .g3d-hud-still .g3d-rc *, .g3d-hud-still .g3d-map *, .g3d-hud-still .g3d-pause *, .g3d-hud-still .g3d-bmc *,
.g3d-hud-still .g3d-hud-layer *::before, .g3d-hud-still .g3d-hud-layer *::after,
.g3d-pie.is-still *, .g3d-dlg.is-still *, .g3d-rc.is-still * { animation: none !important; transition: none !important; }
.g3d-hud-still .g3d-confetti { display: none; }
.g3d-hud-still .g3d-steam rect { opacity: 0.8; }

/* ==========================================================================
   Direction chip: where to head in Times Square (ui/compass.js)
   ========================================================================== */
/* Top centre, on the HUD's glass: an arrow that turns with the camera, the
   kind spelled out (Objective, Open store, Waypoint) as well as tinted, the
   destination's name, how far and which side. It lives in the HUD layer,
   so it hides with it, steps aside under a panel, and the HUD's reduced-
   motion rules already hold it still. While it shows, the toasts that
   share the top centre drop below it. */
.g3d-compass {
  --compass: var(--gold);
  position: absolute; left: 50%; top: var(--g3d-hud-edge); translate: -50% 0; z-index: 1;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
  min-width: 232px; max-width: min(430px, calc(100vw - 600px)); box-sizing: border-box; padding: 7px 14px 7px 7px;
  background: var(--g3d-hud-glass); border: 1px solid var(--g3d-line); border-top: 2px solid var(--compass);
  -webkit-backdrop-filter: var(--g3d-hud-blur); backdrop-filter: var(--g3d-hud-blur);
  box-shadow: inset 0 1px 0 var(--g3d-hud-hi), var(--g3d-hud-lift);
  color: var(--screen-ink); pointer-events: none;
  animation: g3d-rise-in 0.3s ease both;
  transition: opacity 0.25s ease, visibility 0s;
}
.g3d-compass[hidden] { display: none; }
.g3d-compass.is-store { --compass: var(--cyan); }
.g3d-compass.is-waypoint { --compass: var(--g3d-hud-pink); }
.g3d-compass-dial {
  display: grid; place-items: center; width: 34px; height: 34px;
  background: var(--g3d-hud-well); border: 1px solid color-mix(in srgb, var(--compass) 55%, transparent);
}
.g3d-compass-arrow { display: grid; place-items: center; color: var(--compass); }
.g3d-compass-what { display: grid; gap: 3px; min-width: 0; }
.g3d-compass-kind { font-family: var(--display); font-size: var(--g3d-hud-micro); line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; color: var(--compass); }
.g3d-compass-name { font-size: var(--t-body); line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g3d-compass-where { display: grid; gap: 2px; justify-items: end; padding-left: 12px; border-left: 1px solid var(--g3d-line); white-space: nowrap; font-variant-numeric: tabular-nums; }
.g3d-compass-dist { font-size: var(--t-body); line-height: 1; }
.g3d-compass-side { font-size: var(--g3d-hud-small); line-height: 1; color: var(--screen-dim); }
.g3d-hud-layer.is-busy .g3d-compass { opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s 0.25s; }
.g3d .g3d-hud.has-compass .g3d-toasts { top: calc(var(--g3d-hud-edge) + 66px); }
/* too narrow to sit between the career card and the wallet: under the career card instead */
@media (max-width: 860px) { .g3d-compass { max-width: calc(100vw - 2 * var(--g3d-hud-edge)); top: calc(var(--g3d-hud-edge) + 176px); } }

/* ==========================================================================
   Minigames: stay on message, cut the fluff, pick the plan, vet the list
   ========================================================================== */
/* 3D · minigames (merged into styles.css at integration)
   ==========================================================================
   The work surface Ryan and a colleague share in a meeting room: a glass
   panel over the dimmed room, the colleague in a side column, and four
   games (message, edit, strategy, sort) drawn in the arcade's grammar:
   Press Start 2P labels, VT323 reading, square corners, hard offset
   shadows, receipt paper for anything written down. The 3D page is dark in
   both OS themes, so every colour is a token below, derived from the site
   tokens (--screen, --screen-ink, --gold, --cyan, --magenta, --receipt…)
   and sizes sit on the --t-* scale.
   ========================================================================== */
.g3d {
  /* glass and surfaces */
  --g3d-mg-glass: rgba(10, 9, 22, 0.86);                 /* denser than --g3d-glass: text holds 4.5:1 over a sunlit room */
  --g3d-mg-glass-2: rgba(20, 18, 44, 0.96);
  --g3d-mg-blur: blur(14px) saturate(1.25);
  --g3d-mg-soft: color-mix(in srgb, var(--screen-ink) 5%, transparent);
  --g3d-mg-hi: color-mix(in srgb, var(--screen-ink) 8%, transparent);
  --g3d-mg-hover: color-mix(in srgb, var(--screen-ink) 13%, transparent);
  --g3d-mg-track: color-mix(in srgb, var(--screen-ink) 12%, transparent);
  --g3d-mg-tick: color-mix(in srgb, var(--screen-ink) 62%, transparent);
  --g3d-mg-dashed: color-mix(in srgb, var(--screen-ink) 50%, transparent);
  --g3d-mg-ghost: color-mix(in srgb, var(--screen-ink) 58%, transparent);   /* words not said yet: dim, still ≥ 4.5:1 */
  --g3d-mg-portrait: #1c1a3d;
  /* scrims and shadows */
  --g3d-mg-scrim-soft: color-mix(in srgb, var(--screen) 30%, transparent);
  --g3d-mg-scrim: color-mix(in srgb, var(--screen) 62%, transparent);
  --g3d-mg-scrim-2: color-mix(in srgb, var(--screen) 74%, transparent);
  --g3d-mg-scrim-3: color-mix(in srgb, var(--screen) 86%, transparent);
  --g3d-mg-shade: color-mix(in srgb, var(--screen) 60%, transparent);
  --g3d-mg-shade-2: color-mix(in srgb, var(--screen) 85%, transparent);
  --g3d-mg-lift: 0 18px 48px color-mix(in srgb, var(--screen) 50%, transparent);
  --g3d-mg-hard: 4px 4px 0 var(--g3d-mg-shade);
  --g3d-mg-hard-sm: 2px 2px 0 var(--g3d-mg-shade);
  --g3d-mg-hard-lg: 7px 9px 0 var(--g3d-mg-shade);
  /* gold */
  --g3d-mg-gold-wash: color-mix(in srgb, var(--gold) 8%, transparent);
  --g3d-mg-gold-wash-2: color-mix(in srgb, var(--gold) 16%, transparent);
  --g3d-mg-gold-line: color-mix(in srgb, var(--gold) 50%, transparent);
  --g3d-mg-gold-glow: color-mix(in srgb, var(--gold) 60%, transparent);
  --g3d-mg-gold-hi: color-mix(in srgb, var(--gold) 72%, var(--screen-ink));
  --g3d-mg-pick: color-mix(in srgb, var(--gold) 30%, var(--receipt));
  --g3d-mg-tape: color-mix(in srgb, var(--gold) 55%, transparent);
  --g3d-mg-ink-wash: color-mix(in srgb, var(--screen) 10%, transparent);
  --g3d-mg-ink-line: color-mix(in srgb, var(--screen) 40%, transparent);
  /* the meter: in the band, oversold, losing the room */
  --g3d-mg-band: var(--g3d-money);
  --g3d-mg-band-soft: color-mix(in srgb, var(--g3d-mg-band) 30%, transparent);
  --g3d-mg-band-lit: color-mix(in srgb, var(--g3d-mg-band) 46%, transparent);
  --g3d-mg-band-glow: color-mix(in srgb, var(--g3d-mg-band) 45%, transparent);
  --g3d-mg-band-deep: color-mix(in srgb, var(--g3d-mg-band) 80%, var(--screen));
  --g3d-mg-over: var(--magenta);
  --g3d-mg-over-ink: #ff9ab8;
  --g3d-mg-over-wash: color-mix(in srgb, var(--magenta) 14%, transparent);
  --g3d-mg-over-stripe: color-mix(in srgb, var(--magenta) 30%, transparent);
  --g3d-mg-over-stripe-2: color-mix(in srgb, var(--magenta) 8%, transparent);
  --g3d-mg-over-glow: color-mix(in srgb, var(--magenta) 70%, transparent);
  --g3d-mg-over-line: color-mix(in srgb, var(--g3d-mg-over-ink) 55%, transparent);
  --g3d-mg-lost: #ff6b7a;
  --g3d-mg-lost-wash: color-mix(in srgb, var(--g3d-mg-lost) 22%, transparent);
  --g3d-mg-cyan-wash: color-mix(in srgb, var(--cyan) 5%, transparent);
  --g3d-mg-cyan-line: color-mix(in srgb, var(--cyan) 28%, transparent);
  /* paper: pen, rules, highlighter */
  --g3d-mg-pen: #b3122e;
  --g3d-mg-blue: #0b5cad;
  --g3d-mg-okink: #17703f;
  --g3d-mg-note: #57536b;
  --g3d-mg-rule: color-mix(in srgb, var(--g3d-mg-blue) 16%, transparent);
  --g3d-mg-paper-hover: color-mix(in srgb, var(--g3d-mg-blue) 12%, transparent);
  --g3d-mg-margin: color-mix(in srgb, var(--g3d-mg-pen) 40%, transparent);
  --g3d-mg-cardtop: color-mix(in srgb, var(--g3d-mg-pen) 55%, transparent);
  --g3d-mg-paper-wash: color-mix(in srgb, var(--receipt-ink) 6%, transparent);
  --g3d-mg-paper-track: color-mix(in srgb, var(--receipt-ink) 12%, transparent);
  --g3d-mg-paper-line: color-mix(in srgb, var(--receipt-ink) 35%, transparent);
  --g3d-mg-deck: color-mix(in srgb, var(--receipt) 82%, var(--gold-deep));
  --g3d-mg-hint-bg: #fff1b8;
  --g3d-mg-hint-ink: #6b4600;
  --g3d-mg-star: #8a5a00;
  --g3d-mg-stamp-s: #b3122e;
  --g3d-mg-stamp-a: #5b21b6;
  --g3d-mg-stamp-b: #0b5cad;
  --g3d-mg-stamp-c: #57536b;
  /* sizes on the scale */
  --g3d-mg-micro: calc(var(--t-label) * 0.92);
  --g3d-mg-small: var(--t-small);
  --g3d-mg-cap: calc(var(--t-label) * 0.9);
}

/* ============================================================== the layer */
.g3d-mg {
  --mg-brand: var(--gold); --mg-brand-2: var(--cyan);
  position: fixed; inset: 0; z-index: 62; pointer-events: auto;
  display: grid; place-items: center;
  padding: clamp(8px, 2.4vh, 28px) clamp(10px, 2.2vw, 36px);
  background: radial-gradient(ellipse 90% 80% at 50% 50%, var(--g3d-mg-scrim-soft), var(--g3d-mg-scrim-2));
  color: var(--screen-ink); font-family: var(--sans); font-size: var(--t-body);
}
.g3d-mg[hidden] { display: none; }
/* another panel (a dialogue, a card) is open on top: step aside until it closes
   (the HUD shares that panel's layer, so the work would sit under the HUD) */
.g3d-mg.is-covered { z-index: 0; visibility: hidden; }
.g3d-mg :where(p, h2, h3, ol, ul, dl, dd, figure, blockquote) { margin: 0; }
.g3d-mg :focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

.g3d-mg-panel {
  position: relative; width: min(1400px, 100%); height: min(860px, 100%);
  display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 10px;
  padding: 16px 20px 18px;
  background: var(--g3d-mg-glass);
  -webkit-backdrop-filter: var(--g3d-mg-blur); backdrop-filter: var(--g3d-mg-blur);
  border: 1px solid var(--g3d-line);
  box-shadow: inset 0 1px 0 var(--g3d-mg-hi), var(--g3d-mg-lift);
  animation: g3d-mg-in 0.38s cubic-bezier(0.2, 1, 0.3, 1) both;
}
/* the company's colours along the top edge, and pixel corner brackets */
.g3d-mg-panel::after {
  content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 4px; pointer-events: none;
  background: linear-gradient(90deg, var(--mg-brand) 0 72%, var(--mg-brand-2) 72% 100%);
}
.g3d-mg-panel::before {
  content: ''; position: absolute; inset: -1px; pointer-events: none;
  background:
    linear-gradient(var(--g3d-mg-tick), var(--g3d-mg-tick)) left bottom / 10px 2px no-repeat,
    linear-gradient(var(--g3d-mg-tick), var(--g3d-mg-tick)) left bottom / 2px 10px no-repeat,
    linear-gradient(var(--g3d-mg-tick), var(--g3d-mg-tick)) right bottom / 10px 2px no-repeat,
    linear-gradient(var(--g3d-mg-tick), var(--g3d-mg-tick)) right bottom / 2px 10px no-repeat;
}

/* labels, keycaps, icons */
.g3d-mg-label {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--display); font-size: var(--g3d-mg-micro); line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--screen-dim);
}
.g3d-mg-label.is-gold { color: var(--gold); }
.g3d-mg-icon { display: inline-grid; place-items: center; line-height: 0; flex: none; }
.g3d-mg-icon svg { display: block; }
.g3d-mg .g3d-mg-kbd {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 24px; min-height: 22px; margin: 0; padding: 3px 6px;
  font-family: var(--display); font-size: var(--g3d-mg-cap); line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap;
  color: var(--screen-ink); background: var(--g3d-mg-hi);
  border: 1px solid var(--g3d-line); border-bottom-width: 3px; border-radius: 0; box-shadow: none;
}
.g3d-mg-stars { display: inline-flex; align-items: center; gap: 2px; line-height: 0; }

/* buttons */
.g3d-mg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 42px; padding: 8px 14px;
  font-family: var(--display); font-size: var(--t-label); line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--screen-ink); background: var(--g3d-mg-hi);
  border: 1px solid var(--g3d-line); border-radius: 0; box-shadow: var(--g3d-mg-hard);
  cursor: pointer; transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.15s ease;
}
.g3d-mg-btn[hidden] { display: none; }
.g3d-mg-btn:hover { background: var(--g3d-mg-hover); }
.g3d-mg-btn:active { transform: translate(2px, 2px); box-shadow: var(--g3d-mg-hard-sm); }
.g3d-mg-btn:disabled { cursor: not-allowed; opacity: 0.5; box-shadow: none; transform: none; }
.g3d-mg-btn-gold { color: var(--screen); background: var(--gold); border-color: var(--gold); }
.g3d-mg-btn-gold:hover { background: var(--g3d-mg-gold-hi); }
.g3d-mg-btn-gold .g3d-mg-kbd { color: var(--screen); background: var(--g3d-mg-ink-wash); border-color: var(--g3d-mg-ink-line); }
.g3d-mg-btn-warn { color: var(--g3d-mg-over-ink); border-color: var(--g3d-mg-over); }
.g3d-mg-btn-warn:hover { background: var(--g3d-mg-over-wash); }

/* ============================================================== header */
.g3d-mg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; min-width: 0; }
.g3d-mg-titles { min-width: 0; }
.g3d-mg-kicker {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--display); font-size: var(--g3d-mg-micro); line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold);
}
.g3d-mg-swatch { display: inline-grid; grid-template-columns: 6px 6px; flex: none; box-shadow: 0 0 0 1px var(--g3d-mg-dashed); }
.g3d-mg-swatch i { display: block; height: 12px; background: var(--mg-brand); }
.g3d-mg-swatch i + i { background: var(--mg-brand-2); }
.g3d-mg-title {
  margin-top: 8px; font-family: var(--display); font-weight: 400;
  font-size: calc(var(--t-figure) * 0.78); line-height: 1.35; color: var(--screen-ink);
  text-shadow: var(--g3d-text-lift); text-wrap: balance;
}
.g3d-mg-with { margin-top: 4px; font-size: var(--t-body); line-height: 1.05; color: var(--screen-dim); }
.g3d-mg-with[hidden] { display: none; }
.g3d-mg-headside { display: flex; align-items: center; gap: 10px; flex: none; }
.g3d-mg-clock {
  display: grid; grid-template-columns: auto auto; align-items: center; gap: 4px 8px;
  padding: 6px 12px 7px; color: var(--gold);
  background: var(--g3d-mg-soft); border: 1px solid var(--g3d-line);
}
.g3d-mg-clock[hidden] { display: none; }
.g3d-mg-clocktext { font-size: calc(var(--t-body) * 1.55); line-height: 0.9; color: var(--screen-ink); font-variant-numeric: tabular-nums; min-width: 2.6ch; }
.g3d-mg-clockbar { grid-column: 1 / -1; height: 4px; background: var(--g3d-mg-track); overflow: hidden; }
.g3d-mg-clockbar i { display: block; height: 100%; background: var(--gold); transform-origin: left; }
.g3d-mg-clock.is-low { color: var(--g3d-mg-over-ink); border-color: var(--g3d-mg-over); animation: g3d-mg-throb 1s steps(2) infinite; }
.g3d-mg-clock.is-low .g3d-mg-clocktext { color: var(--g3d-mg-over-ink); }
.g3d-mg-clock.is-low .g3d-mg-clockbar i { background: var(--g3d-mg-over); }

/* brief and goal */
.g3d-mg-brief {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 8px 22px;
  padding: 8px 12px; background: var(--g3d-mg-soft); border-left: 3px solid var(--mg-brand);
}
.g3d-mg-brief p { display: flex; align-items: baseline; gap: 10px; font-size: var(--g3d-mg-small); line-height: 1.4; color: var(--screen-ink); }
.g3d-mg-tag {
  flex: none; padding: 3px 6px 2px; translate: 0 -2px;
  font-family: var(--display); font-size: calc(var(--t-label) * 0.72); line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--screen-dim); border: 1px solid var(--g3d-line);
}
.g3d-mg-tag.is-gold { color: var(--gold); border-color: var(--g3d-mg-gold-line); }

/* ============================================================== body */
.g3d-mg-bodywrap { position: relative; min-height: 0; }
.g3d-mg-body { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(216px, 19vw, 280px); gap: 14px; }
.g3d-mg-work { position: relative; min-width: 0; min-height: 0; }

/* paused while the window is away */
.g3d-mg-away {
  position: absolute; left: 50%; top: 10px; z-index: 2; translate: -50% 0;
  display: flex; align-items: center; gap: 10px; max-width: calc(100% - 24px); padding: 8px 14px;
  font-size: var(--g3d-mg-small); line-height: 1.4; color: var(--screen);
  background: var(--gold); box-shadow: var(--g3d-mg-hard); cursor: pointer;
}
.g3d-mg-away[hidden] { display: none; }

/* the colleague */
.g3d-mg-side {
  display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: hidden;
  padding: 12px; background: var(--g3d-mg-soft); border: 1px solid var(--g3d-line);
}
.g3d-mg-person { display: flex; align-items: center; gap: 12px; }
.g3d-mg-face, .g3d-mg-rface {
  flex: none; width: 72px; height: 72px; display: grid; place-items: center; overflow: hidden;
  background: var(--g3d-mg-portrait); border: 2px solid var(--g3d-line); box-shadow: var(--g3d-mg-hard);
}
.g3d-mg-face canvas, .g3d-mg-rface canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.g3d-mg-mono { font-family: var(--display); font-size: calc(var(--t-figure) * 0.7); color: var(--gold); }
.g3d-mg-who { font-family: var(--display); font-size: var(--t-label); line-height: 1.5; color: var(--screen-ink); }
.g3d-mg-role { margin-top: 2px; font-size: var(--g3d-mg-small); line-height: 1; color: var(--screen-dim); }
.g3d-mg-bubble {
  --tone: var(--receipt-ink);
  position: relative; flex: none; margin-top: 6px; padding: 11px 14px 12px; min-height: 3.6em;
  font-size: var(--t-body); line-height: 1.4; color: var(--receipt-ink);
  background: var(--receipt); border: 2px solid var(--receipt-ink); border-left: 6px solid var(--tone);
  box-shadow: var(--g3d-mg-hard);
}
.g3d-mg-bubble::before {
  content: ''; position: absolute; left: 22px; top: -12px; width: 0; height: 0;
  border: 10px solid transparent; border-top: 0; border-bottom: 12px solid var(--receipt-ink);
}
.g3d-mg-bubble::after {
  content: ''; position: absolute; left: 25px; top: -8px; width: 0; height: 0;
  border: 7px solid transparent; border-top: 0; border-bottom: 9px solid var(--receipt);
}
.g3d-mg-bubble[data-mood="good"] { --tone: var(--g3d-mg-okink); }
.g3d-mg-bubble[data-mood="bad"] { --tone: var(--g3d-mg-pen); }
.g3d-mg-bubble[data-mood="warn"] { --tone: var(--gold-deep); }
.g3d-mg-bubble.is-pop { animation: g3d-mg-pop 0.26s var(--g3d-ease) both; }
.g3d-mg-bio { margin-top: 2px; padding-left: 10px; font-size: var(--g3d-mg-small); line-height: 1.4; color: var(--screen-dim); border-left: 2px solid var(--g3d-line); }
.g3d-mg-bio[hidden] { display: none; }
.g3d-mg-keys {
  list-style: none; margin-top: auto; padding: 10px 0 0; display: grid; gap: 9px;
  border-top: 1px dashed var(--g3d-line); font-size: var(--g3d-mg-small); line-height: 1.4; color: var(--screen-dim);
}
.g3d-mg-keys li { display: grid; gap: 5px; }
.g3d-mg-ikeys { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.g3d-mg-chip {
  display: inline-grid; place-items: center; min-height: 22px; padding: 3px 7px;
  font-family: var(--display); font-size: var(--g3d-mg-cap); line-height: 1; text-transform: uppercase; white-space: nowrap;
  color: var(--screen); background: var(--g3d-mg-over-ink); box-shadow: var(--g3d-mg-hard-sm);
}

/* ============================================================== intro, result, confirm */
.g3d-mg-intro, .g3d-mg-result {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 8px;
  background: var(--g3d-mg-scrim);
}
.g3d-mg-intro[hidden], .g3d-mg-result[hidden], .g3d-mg-confirm[hidden] { display: none; }
.g3d-mg-icard, .g3d-mg-rcard, .g3d-mg-ccard {
  background: var(--g3d-mg-glass-2); border: 1px solid var(--g3d-line);
  box-shadow: var(--g3d-mg-lift), var(--g3d-mg-hard);
  animation: g3d-mg-rise 0.32s cubic-bezier(0.2, 1.2, 0.3, 1) both;
}
.g3d-mg-icard { width: min(640px, 100%); max-height: 100%; overflow: auto; padding: 20px 26px 22px; border-top: 4px solid var(--mg-brand); }
.g3d-mg-iname {
  margin: 10px 0 8px; font-family: var(--display); font-weight: 400;
  font-size: var(--t-figure); line-height: 1.3; color: var(--screen-ink);
  text-shadow: var(--g3d-text-lift);
}
.g3d-mg-igoal { margin-bottom: 14px; font-size: var(--t-lede); line-height: 1.3; color: var(--screen-ink); }
.g3d-mg-isteps { list-style: none; padding: 0; display: grid; gap: 10px; }
.g3d-mg-isteps li { display: grid; grid-template-columns: minmax(140px, 180px) 1fr; gap: 14px; align-items: center; font-size: var(--t-body); line-height: 1.4; color: var(--screen-ink); }
.g3d-mg-inote { margin-top: 14px; font-size: var(--g3d-mg-small); line-height: 1.4; color: var(--screen-dim); }
.g3d-mg-inote[hidden] { display: none; }
.g3d-mg-ifoot { display: flex; align-items: center; gap: 18px; margin-top: 18px; }
.g3d-mg-ihint { flex: 1; margin: 0; font-size: var(--g3d-mg-small); line-height: 1.3; color: var(--screen-dim); }
.g3d-mg-start { min-width: 150px; }

/* the result */
.g3d-mg-rcard {
  width: min(1000px, 100%); max-height: 100%; overflow: auto;
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 26px; padding: 22px 26px;
  border-top: 4px solid var(--mg-brand);
}
.g3d-mg-rleft { display: grid; align-content: start; justify-items: center; gap: 18px; padding-top: 8px; }
.g3d-mg-stamp {
  --stamp: var(--g3d-mg-stamp-b);
  width: 164px; aspect-ratio: 1; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 10px;
  color: var(--stamp); background: var(--receipt); border: 7px double var(--stamp);
  box-shadow: var(--g3d-mg-hard); rotate: -8deg;
  animation: g3d-mg-stamp 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) 0.15s both;
}
.g3d-mg-stamp[data-grade="S"] { --stamp: var(--g3d-mg-stamp-s); }
.g3d-mg-stamp[data-grade="A"] { --stamp: var(--g3d-mg-stamp-a); }
.g3d-mg-stamp[data-grade="C"] { --stamp: var(--g3d-mg-stamp-c); }
.g3d-mg-rletter { font-family: var(--display); font-weight: 400; font-size: calc(var(--t-figure) * 2.8); line-height: 1; }
.g3d-mg-rlabel { font-family: var(--display); font-size: var(--g3d-mg-micro); line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; }
.g3d-mg-rscore { display: grid; justify-items: center; gap: 4px; }
.g3d-mg-rscore b { font-weight: 400; font-size: calc(var(--t-body) * 2.2); line-height: 0.9; color: var(--screen-ink); }
.g3d-mg-rbonus {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 3px 8px;
  font-size: var(--g3d-mg-small); line-height: 1; white-space: nowrap; color: var(--g3d-mg-over-ink); border: 1px solid var(--g3d-mg-over-line);
}
.g3d-mg-rmain { min-width: 0; display: grid; align-content: start; gap: 14px; }
.g3d-mg-rverdict { font-family: var(--display); font-weight: 400; font-size: calc(var(--t-figure) * 0.8); line-height: 1.4; color: var(--screen-ink); }
.g3d-mg-rshow:empty { display: none; }
.g3d-mg-rstats { display: flex; flex-wrap: wrap; gap: 8px 30px; padding-top: 10px; border-top: 1px solid var(--g3d-line); }
.g3d-mg-rstats dt { font-family: var(--display); font-size: var(--g3d-mg-micro); line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; color: var(--screen-dim); }
.g3d-mg-rstats dd { margin-top: 2px; font-size: var(--t-body); line-height: 1; color: var(--screen-ink); }
.g3d-mg-rsay { display: flex; align-items: center; gap: 14px; }
.g3d-mg-rface { width: 56px; height: 56px; }
.g3d-mg-rline { font-size: var(--t-lede); line-height: 1.3; color: var(--screen-ink); }
.g3d-mg-rwho { margin-top: 3px; font-size: var(--g3d-mg-small); color: var(--screen-dim); }
.g3d-mg-rfoot { position: sticky; bottom: 0; display: flex; justify-content: flex-end; margin: 0 -8px -8px; padding: 8px; background: var(--g3d-mg-glass-2); }
.g3d-mg-continue { min-width: 180px; }

/* leave? */
.g3d-mg-confirm { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 16px; background: var(--g3d-mg-scrim-2); }
.g3d-mg-ccard { width: min(560px, 100%); padding: 22px 24px; border: 2px solid var(--g3d-mg-over); }
.g3d-mg-ccard h2 { font-family: var(--display); font-weight: 400; font-size: calc(var(--t-label) * 1.35); line-height: 1.4; color: var(--screen-ink); }
.g3d-mg-ccard p { margin-top: 8px; font-size: var(--t-body); line-height: 1.4; color: var(--screen-dim); }
.g3d-mg-cbtns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

/* ============================================================== message */
.g3d-mgm { position: relative; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; gap: 10px; }
.g3d-mgm-pin {
  position: relative; padding: 9px 16px 11px 18px;
  color: var(--receipt-ink); background: var(--receipt); border-left: 6px solid var(--mg-brand);
  box-shadow: var(--g3d-mg-hard);
}
.g3d-mgm-pin .g3d-mg-label { color: var(--g3d-mg-note); }
.g3d-mgm-pin .g3d-mg-label .g3d-mg-icon { color: var(--g3d-mg-pen); }
.g3d-mgm-msg { margin-top: 3px; font-size: calc(var(--t-lede) * 1.05); line-height: 1.3; }
.g3d-mgm-stage { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 12px; min-height: 0; }
.g3d-mgm-q, .g3d-mgm-a { min-height: 0; overflow: hidden; padding: 9px 14px 11px; border: 1px solid var(--g3d-line); }
.g3d-mgm-q { background: var(--g3d-mg-soft); border-left: 3px solid var(--gold); }
.g3d-mgm-q.is-new { animation: g3d-mg-slide 0.3s var(--g3d-ease) both; }
.g3d-mgm-askline { min-width: 0; }
.g3d-mgm-asker { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g3d-mgm-flag { flex: none; display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: var(--g3d-mg-over-ink); }
.g3d-mgm-flag[hidden] { display: none; }
.g3d-mgm-qtext { margin-top: 6px; font-size: calc(var(--t-lede) * 1.1); line-height: 1.2; color: var(--screen-ink); }
.g3d-mgm-qtext::before { content: 'Q. '; color: var(--gold); }
.g3d-mgm-qlog { list-style: none; margin-top: 10px; padding: 8px 0 0; display: grid; gap: 4px; border-top: 1px dashed var(--g3d-line); }
.g3d-mgm-qlog:empty { display: none; }
.g3d-mgm-qlog li { display: flex; align-items: baseline; gap: 8px; font-size: var(--g3d-mg-small); line-height: 1.4; color: var(--screen-dim); }
.g3d-mgm-qlog li:nth-child(n + 2) { opacity: 0.8; }
.g3d-mgm-qlog .g3d-mg-icon { color: var(--g3d-mg-band); translate: 0 1px; }
.g3d-mgm-a { position: relative; display: flex; flex-direction: column; background: var(--g3d-mg-cyan-wash); border-color: var(--g3d-mg-cyan-line); }
.g3d-mgm-wave { flex: 1 0 18px; min-height: 18px; max-height: 64px; margin-top: auto; padding-top: 10px; display: flex; align-items: flex-end; gap: 3px; }
.g3d-mgm-wave i { flex: 1; height: 100%; background: var(--cyan); opacity: 0.55; transform-origin: bottom; transform: scaleY(0.08); }
.g3d-mgm[data-zone="band"] .g3d-mgm-wave i { background: var(--g3d-mg-band); opacity: 0.8; }
.g3d-mgm[data-zone="over"] .g3d-mgm-wave i { background: var(--g3d-mg-over); opacity: 0.9; }
.g3d-mgm[data-zone="lost"] .g3d-mgm-wave i { background: var(--screen-dim); opacity: 0.35; }
/* the answer grows from the bottom: if it outgrows the box, the oldest words go first */
.g3d-mgm-atext { flex: 0 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; margin-top: 6px; font-size: var(--t-lede); line-height: 1.3; }
.g3d-mgm-aflow { display: block; }
.g3d-mgm-bridge { color: var(--cyan); }
.g3d-mgm-bridge.is-waiting { color: var(--screen-dim); }
.g3d-mgm-bridge.is-new { animation: g3d-mg-fade 0.25s ease both; }
.g3d-mgm-said { color: var(--screen-ink); }
.g3d-mgm-unsaid { color: var(--g3d-mg-ghost); }
.g3d-mgm-tail[data-kind="hype"] { color: var(--g3d-mg-over-ink); }
.g3d-mgm-tail[data-kind="um"] { color: var(--screen-dim); }

.g3d-mgm-callrow { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); gap: 18px; align-items: center; }
.g3d-mgm-call {
  font-family: var(--display); font-size: calc(var(--t-label) * 1.25); line-height: 1.4; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--gold); text-shadow: var(--g3d-text-lift);
}
.g3d-mgm-call[data-call="onmessage"] { color: var(--g3d-mg-band); }
.g3d-mgm-call[data-call="easeoff"], .g3d-mgm-call[data-call="losingthem"] { color: var(--g3d-mg-over-ink); animation: g3d-mg-throb 0.5s steps(2) infinite; }
.g3d-mgm-call[data-call="curveball"] { color: var(--cyan); animation: g3d-mg-throb 0.3s steps(2) infinite; }
.g3d-mgm-call[data-call="ready"] { color: var(--gold); }
.g3d-mgm-gauge { position: relative; padding: 22px 0 24px; }
.g3d-mgm-track { position: relative; height: 34px; background: var(--g3d-mg-soft); border: 1px solid var(--g3d-line); }
.g3d-mgm-zone { position: absolute; top: 0; bottom: 0; }
.g3d-mgm-zone b {
  position: absolute; left: 50%; bottom: -22px; translate: -50% 0; white-space: nowrap; font-weight: 400;
  font-family: var(--display); font-size: calc(var(--t-label) * 0.72); letter-spacing: 0.08em; text-transform: uppercase; color: var(--screen-dim);
}
.g3d-mgm-zone.is-lost { background: var(--g3d-mg-lost-wash); }
.g3d-mgm-zone.is-band { background: var(--g3d-mg-band-soft); box-shadow: inset 2px 0 0 var(--g3d-mg-band), inset -2px 0 0 var(--g3d-mg-band); }
.g3d-mgm-zone.is-band b { color: var(--g3d-mg-band); }
.g3d-mgm-zone.is-over { background: repeating-linear-gradient(135deg, var(--g3d-mg-over-stripe) 0 6px, var(--g3d-mg-over-stripe-2) 6px 12px); }
.g3d-mgm-zone.is-over b { color: var(--g3d-mg-over-ink); }
.g3d-mgm[data-zone="band"] .g3d-mgm-zone.is-band { background: var(--g3d-mg-band-lit); box-shadow: inset 2px 0 0 var(--g3d-mg-band), inset -2px 0 0 var(--g3d-mg-band), 0 0 22px var(--g3d-mg-band-glow); }
.g3d-mgm[data-zone="over"] .g3d-mgm-track { border-color: var(--g3d-mg-over); }
.g3d-mgm[data-zone="lost"] .g3d-mgm-track { border-color: var(--g3d-mg-lost); }
.g3d-mgm-fuse { position: absolute; top: -9px; height: 4px; background: var(--g3d-mg-hi); }
.g3d-mgm-fuse::after { content: ''; position: absolute; inset: 0; transform: scaleX(var(--f, 0)); transform-origin: left; background: var(--g3d-mg-over); }
.g3d-mgm-fuse.is-lost::after { transform-origin: right; background: var(--g3d-mg-lost); }
.g3d-mgm-needle { position: absolute; top: -9px; bottom: -9px; width: 0; will-change: left; }
.g3d-mgm-needle i {
  position: absolute; left: -3px; top: 0; bottom: 0; width: 6px; background: var(--gold);
  box-shadow: 0 0 0 2px var(--g3d-mg-shade-2), 0 0 14px var(--g3d-mg-gold-glow);
}
.g3d-mgm-needle::before {
  content: ''; position: absolute; left: -8px; top: -9px; width: 0; height: 0;
  border: 8px solid transparent; border-bottom: 0; border-top: 9px solid var(--gold);
}
.g3d-mgm.is-pushing .g3d-mgm-needle i { background: var(--g3d-mg-pick); }
.g3d-mgm-warn {
  position: absolute; top: -44px; translate: -50% 0; padding: 4px;
  display: grid; place-items: center; line-height: 0; color: var(--screen); background: var(--g3d-mg-over);
  box-shadow: var(--g3d-mg-hard);
}
.g3d-mgm-warn[hidden] { display: none; }
.g3d-mgm-warn[data-dir="down"] { background: var(--cyan); }
.g3d-mgm-warn[data-phase="warn"] { animation: g3d-mg-throb 0.2s steps(2) infinite; }

.g3d-mgm-bars { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.g3d-mgm-landed .g3d-mg-label, .g3d-mgm-obj .g3d-mg-label { justify-content: space-between; }
.g3d-mgm-num { font-family: var(--sans); font-size: var(--t-body); letter-spacing: 0; color: var(--g3d-mg-band); }
.g3d-mgm-meter { height: 14px; margin-top: 6px; background: var(--g3d-mg-hi); border: 1px solid var(--g3d-line); overflow: hidden; }
.g3d-mgm-meter i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--g3d-mg-band) 0 10px, var(--g3d-mg-band-deep) 10px 12px); transform-origin: left; transform: scaleX(0); }
.g3d-mgm-objs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.g3d-mgm-objs i {
  font-style: normal; font-size: var(--g3d-mg-small); line-height: 1.2; padding: 0 7px;
  color: var(--g3d-mg-over-ink); border: 1px solid var(--g3d-mg-over-line);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.g3d-mgm-objs i.is-gone { opacity: 0; transform: translateY(-8px) scale(0.85); }
.g3d-mgm-foot { display: flex; justify-content: center; }
.g3d-mgm-hold {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-width: min(360px, 100%); min-height: 56px; padding: 10px 20px;
  font-family: var(--display); font-size: var(--t-label); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold); background: var(--g3d-mg-gold-wash); border: 2px solid var(--gold); border-radius: 0;
  box-shadow: 5px 5px 0 var(--g3d-mg-shade); cursor: pointer; touch-action: none; user-select: none;
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}
.g3d-mgm-hold:hover { background: var(--g3d-mg-gold-wash-2); }
.g3d-mgm-hold.is-held { color: var(--screen); background: var(--gold); transform: translate(3px, 3px); box-shadow: var(--g3d-mg-hard-sm); }
.g3d-mgm-hold.is-held .g3d-mg-kbd { color: var(--screen); border-color: var(--g3d-mg-ink-line); background: var(--g3d-mg-ink-wash); }
/* the ready beat: nothing moves until the first push, and the button says so */
.g3d-mgm.is-ready .g3d-mgm-hold { background: var(--g3d-mg-gold-wash-2); animation: g3d-mg-beckon 1.1s ease-in-out infinite; }
.g3d-mgm.is-ready .g3d-mgm-needle i { background: var(--screen-dim); box-shadow: 0 0 0 2px var(--g3d-mg-shade-2); }
.g3d-mgm-land {
  position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; gap: 14px; padding: 24px 8%;
  text-align: center; background: var(--g3d-mg-scrim-3);
  animation: g3d-mg-fade 0.3s ease both;
}
.g3d-mgm-land[hidden] { display: none; }
.g3d-mgm-land blockquote p {
  font-size: calc(var(--t-h2) * 1.2); line-height: 1.2; color: var(--screen-ink); text-wrap: balance;
  animation: g3d-mg-stamp-soft 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) 0.1s both;
}
.g3d-mgm-land figcaption { font-family: var(--display); font-size: var(--g3d-mg-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.g3d-mgm-land figcaption::before { content: '— '; }
.g3d-mgm-quote { padding: 14px 18px 14px 22px; color: var(--receipt-ink); background: var(--receipt); border-left: 6px solid var(--mg-brand); box-shadow: var(--g3d-mg-hard); }
.g3d-mgm-quote blockquote p { font-size: calc(var(--t-lede) * 1.25); line-height: 1.2; }
.g3d-mgm-quote figcaption { margin-top: 8px; font-family: var(--display); font-size: var(--g3d-mg-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--g3d-mg-note); }
.g3d-mgm-quote figcaption::before { content: '— '; }
.g3d-mgm-quote.is-partial blockquote p { color: var(--g3d-mg-note); }
.g3d-mgm-cut { color: var(--g3d-mg-pen); }

/* ============================================================== edit */
.g3d-mge { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
.g3d-mge-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.g3d-mge-stat { display: grid; gap: 4px; }
.g3d-mge-stat.is-read { flex: 1; min-width: 180px; }
.g3d-mge-stat.is-read .g3d-mg-label { justify-content: space-between; }
.g3d-mge-rlabel { color: var(--screen-ink); }
.g3d-mge-count { font-size: calc(var(--t-body) * 1.1); line-height: 1; color: var(--screen-ink); font-variant-numeric: tabular-nums; }
.g3d-mge-count s { color: var(--screen-dim); }
.g3d-mge-count b, .g3d-mge-stat > b { font-weight: 400; font-size: calc(var(--t-body) * 1.1); line-height: 1; color: var(--gold); }
.g3d-mge-read { height: 12px; background: var(--g3d-mg-hi); border: 1px solid var(--g3d-line); overflow: hidden; }
.g3d-mge-read i { display: block; height: 100%; transform-origin: left; transform: scaleX(0.3); background: var(--g3d-mg-lost); transition: transform 0.3s var(--g3d-ease), background-color 0.3s; }
.g3d-mge[data-read="getting-there"] .g3d-mge-read i { background: var(--gold); }
.g3d-mge[data-read="tight"] .g3d-mge-read i, .g3d-mge[data-read="wire-ready"] .g3d-mge-read i { background: var(--g3d-mg-band); }
.g3d-mge-file { margin-left: auto; }
.g3d-mge-doc {
  position: relative; min-height: 0; overflow: auto; padding: 12px 22px 16px 50px;
  color: var(--receipt-ink); background-color: var(--receipt);
  background-image: linear-gradient(90deg, transparent 34px, var(--g3d-mg-margin) 34px 36px, transparent 36px);
  box-shadow: var(--g3d-mg-hard);
}
.g3d-mge-doc :focus-visible { outline-color: var(--g3d-mg-blue); }
.g3d-mge-dochead {
  display: flex; justify-content: space-between; gap: 14px; padding-bottom: 6px; border-bottom: 2px solid var(--receipt-ink);
  font-family: var(--display); font-size: var(--g3d-mg-micro); line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase;
}
.g3d-mge-title { margin: 10px 0 8px; font-family: var(--sans); font-weight: 400; font-size: calc(var(--t-lede) * 1.2); line-height: 1.2; }
.g3d-mge-sents { padding: 0 0 0 1.2em; display: grid; gap: 8px; }
.g3d-mge-sents li::marker { font-family: var(--display); font-size: calc(var(--t-label) * 0.8); color: var(--g3d-mg-note); }
.g3d-mge-line { font-size: calc(var(--t-body) * 1.12); line-height: 1.3; }
.g3d-mge-w {
  position: relative; display: inline-block; min-width: 24px; min-height: 28px; margin: 0; padding: 0 2px;
  font: inherit; line-height: 28px; color: inherit; text-align: center; vertical-align: baseline;
  background: none; border: 0; border-radius: 0; cursor: pointer;
}
.g3d-mge-w:hover { background: var(--g3d-mg-paper-hover); }
.g3d-mge-w::after {
  content: ''; position: absolute; left: -1px; right: -1px; top: 52%; height: 3px; pointer-events: none;
  background: var(--g3d-mg-pen); transform: scaleX(0); transform-origin: left; rotate: -3deg;
}
.g3d-mge-w.is-cut { color: var(--g3d-mg-note); cursor: default; }
.g3d-mge-w.is-cut:hover { background: none; }
.g3d-mge-w.is-cut::after { transform: scaleX(1); transition: transform 0.16s var(--g3d-ease); }
.g3d-mge-w.is-stet { animation: g3d-mg-shake 0.34s ease; }
.g3d-mge-w.is-stet::after { transform: scaleX(1); background: var(--g3d-mg-pen); animation: g3d-mge-unstrike 1s var(--g3d-ease) both; }
.g3d-mge-w.is-stet::before {
  content: 'stet'; position: absolute; left: 50%; top: -12px; translate: -50% 0; pointer-events: none;
  font-family: var(--display); font-size: calc(var(--t-label) * 0.7); line-height: 1; color: var(--g3d-mg-pen);
  animation: g3d-mg-fade 0.2s both;
}
.g3d-mge-clean { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; font-size: var(--t-body); line-height: 1.4; color: var(--g3d-mg-okink); animation: g3d-mg-slide 0.3s var(--g3d-ease) both; }
.g3d-mge-clean[hidden] { display: none; }
.g3d-mge-clean .g3d-mg-icon { translate: 0 1px; }
.g3d-mge.is-filed .g3d-mge-doc::after {
  content: 'Filed'; position: absolute; right: 18px; bottom: 14px; padding: 6px 10px; rotate: -9deg;
  font-family: var(--display); font-size: calc(var(--t-label) * 1.35); text-transform: uppercase; color: var(--g3d-mg-pen);
  border: 4px double var(--g3d-mg-pen); animation: g3d-mg-stamp 0.4s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
.g3d-mge-final { padding: 12px 18px; color: var(--receipt-ink); background: var(--receipt); box-shadow: var(--g3d-mg-hard); display: grid; gap: 6px; }
.g3d-mge-final .g3d-mg-label { font-size: var(--g3d-mg-micro); line-height: 1.4; color: var(--g3d-mg-note); }
.g3d-mge-final p { font-size: var(--t-body); line-height: 1.4; }
.g3d-mge-final mark { color: var(--g3d-mg-hint-ink); background: var(--g3d-mg-hint-bg); box-shadow: inset 0 -2px 0 var(--g3d-mg-star); }
.g3d-mge-final .g3d-mge-legend { margin-top: 4px; font-size: var(--g3d-mg-small); color: var(--g3d-mg-note); }

/* ============================================================== strategy */
.g3d-mgs { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) clamp(210px, 21vw, 290px); gap: 14px; }
.g3d-mgs-board {
  min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 14px; padding: 16px;
  background-color: var(--g3d-mg-soft);
  background-image: linear-gradient(var(--g3d-mg-soft) 1px, transparent 1px), linear-gradient(90deg, var(--g3d-mg-soft) 1px, transparent 1px);
  background-size: 24px 24px; border: 1px solid var(--g3d-line);
}
.g3d-mgs-card {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 14px 14px 16px; overflow: hidden;
  font: inherit; text-align: left; color: var(--receipt-ink); background: var(--receipt);
  border: 3px solid transparent; border-radius: 0; box-shadow: var(--g3d-mg-hard); cursor: pointer;
  rotate: var(--tilt, 0deg); transition: transform 0.12s ease, box-shadow 0.12s ease, rotate 0.12s ease, background-color 0.12s ease;
}
.g3d-mgs-card:nth-child(3n + 1) { --tilt: -0.8deg; }
.g3d-mgs-card:nth-child(3n + 2) { --tilt: 0.6deg; }
.g3d-mgs-card:nth-child(4n) { --tilt: -0.4deg; }
.g3d-mgs-card::before {
  content: ''; position: absolute; left: 50%; top: -3px; width: 52px; height: 12px; translate: -50% 0;
  background: var(--g3d-mg-tape);
}
.g3d-mgs-card:hover { transform: translateY(-3px); box-shadow: 6px 8px 0 var(--g3d-mg-shade); }
.g3d-mgs-card:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.g3d-mgs-card[aria-pressed="true"] {
  rotate: 0deg; transform: translateY(-4px); background: var(--g3d-mg-pick); border-color: var(--receipt-ink);
  box-shadow: var(--g3d-mg-hard-lg);
}
.g3d-mgs-card .g3d-mg-kbd { color: var(--receipt-ink); background: var(--g3d-mg-paper-wash); border-color: var(--g3d-mg-paper-line); }
.g3d-mgs-top { display: flex; align-items: center; gap: 10px; }
.g3d-mgs-ic { color: var(--receipt-ink); }
.g3d-mgs-hint { margin-left: auto; display: inline-grid; place-items: center; width: 26px; height: 26px; color: var(--g3d-mg-star); background: var(--g3d-mg-hint-bg); border: 1px solid var(--g3d-mg-star); }
.g3d-mgs-label { font-size: calc(var(--t-body) * 1.08); line-height: 1.4; }
.g3d-mgs-order { position: absolute; right: 10px; bottom: 8px; font-family: var(--display); font-size: var(--t-label); color: var(--g3d-mg-pen); }
.g3d-mgs-stamp {
  position: absolute; right: 10px; top: 12px; display: grid; place-items: center; padding: 6px 7px; rotate: 8deg;
  line-height: 0; color: var(--g3d-mg-star); background: var(--receipt);
  border: 3px double currentColor; animation: g3d-mg-stamp 0.35s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
.g3d-mgs-stamp[hidden] { display: none; }
.g3d-mgs-card[data-fit="0"] .g3d-mgs-stamp { color: var(--g3d-mg-pen); }
.g3d-mgs-card.is-revealed .g3d-mgs-hint { visibility: hidden; }
.g3d-mgs-card.is-revealed:not(.is-picked) { box-shadow: none; border: 2px dashed var(--g3d-mg-dashed); }
.g3d-mgs.is-locked .g3d-mgs-card { cursor: default; }
.g3d-mgs-plan { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 12px; background: var(--g3d-mg-soft); border: 1px solid var(--g3d-line); }
.g3d-mgs-plan.is-nudge { animation: g3d-mg-shake 0.34s ease; }
.g3d-mgs-plan .g3d-mg-label { color: var(--gold); }
.g3d-mgs-slots { list-style: none; padding: 0; display: grid; gap: 8px; }
.g3d-mgs-slot {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 10px; align-items: center;
  min-height: 56px; padding: 8px 10px; color: var(--screen-dim); border: 1px dashed var(--g3d-line);
}
.g3d-mgs-slot.is-filled { color: var(--screen-ink); background: var(--g3d-mg-gold-wash); border: 1px solid var(--gold); animation: g3d-mg-slide 0.25s var(--g3d-ease) both; }
.g3d-mgs-n { grid-row: 1 / span 2; font-family: var(--display); font-size: calc(var(--t-label) * 1.2); color: var(--gold); }
.g3d-mgs-slabel { font-size: var(--g3d-mg-small); line-height: 1.4; }
.g3d-mgs-sfit { font-family: var(--display); font-size: calc(var(--t-label) * 0.72); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.g3d-mgs-sfit:empty { display: none; }
.g3d-mgs-slot[data-fit="0"] .g3d-mgs-sfit, .g3d-mgs-slot[data-fit="1"] .g3d-mgs-sfit { color: var(--g3d-mg-over-ink); }
.g3d-mgs-count { font-size: var(--g3d-mg-small); color: var(--screen-dim); }
.g3d-mgs-lock { margin-top: auto; }
.g3d-mgs-final { display: grid; gap: 10px; }
.g3d-mgs-final ol { list-style: none; padding: 0; display: grid; gap: 6px; }
.g3d-mgs-final li {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 12px;
  color: var(--receipt-ink); background: var(--receipt); box-shadow: var(--g3d-mg-hard); font-size: var(--t-body); line-height: 1.4;
}
.g3d-mgs-fstars { display: inline-flex; color: var(--g3d-mg-star); }
.g3d-mgs-final li[data-fit="0"] .g3d-mgs-fstars { color: var(--g3d-mg-pen); }
.g3d-mgs-final em { font-style: normal; font-family: var(--display); font-size: calc(var(--t-label) * 0.72); letter-spacing: 0.08em; text-transform: uppercase; color: var(--g3d-mg-note); }
.g3d-mgs-missed { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: var(--g3d-mg-small); color: var(--screen-ink); }

/* ============================================================== sort */
.g3d-mgx { --n: 2; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; }
.g3d-mgx[data-bins="3"] { --n: 3; }
.g3d-mgx[data-bins="4"] { --n: 4; }
.g3d-mgx[data-bins="5"] { --n: 5; }
.g3d-mgx-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; }
.g3d-mgx-prompt { font-family: var(--display); font-size: calc(var(--t-figure) * 0.68); line-height: 1.4; color: var(--screen-ink); }
.g3d-mgx-meta { display: flex; align-items: flex-end; gap: 22px; font-size: var(--t-body); line-height: 1; color: var(--screen-dim); }
.g3d-mgx-streakbox, .g3d-mgx-pointsbox { display: grid; justify-items: end; gap: 3px; }
.g3d-mgx-streak { font-size: calc(var(--t-body) * 1.35); line-height: 0.9; color: var(--gold); }
.g3d-mgx.is-hot .g3d-mgx-streak { color: var(--g3d-mg-over-ink); text-shadow: 0 0 12px var(--g3d-mg-over-glow); }
.g3d-mgx-points { font-weight: 400; font-size: calc(var(--t-body) * 1.35); line-height: 0.9; color: var(--screen-ink); font-variant-numeric: tabular-nums; }
.g3d-mgx-stage { position: relative; min-height: 0; display: grid; place-items: center; }
.g3d-mgx-deck { position: absolute; left: 50%; top: 50%; width: min(520px, 88%); height: 150px; translate: -50% -46%; pointer-events: none; }
.g3d-mgx-deck i { position: absolute; inset: 0; background: var(--g3d-mg-deck); box-shadow: 3px 3px 0 var(--g3d-mg-shade); }
.g3d-mgx-deck i:nth-child(1) { rotate: -3deg; translate: -6px 8px; }
.g3d-mgx-deck i:nth-child(2) { rotate: 2deg; translate: 5px 5px; }
.g3d-mgx-deck i:nth-child(3) { rotate: -1deg; translate: 0 3px; }
.g3d-mgx-card {
  --dx: 0px; --dy: 0px; --rot: 0deg;
  position: relative; z-index: 1; width: min(540px, 90%); min-height: 168px; padding: 12px 20px 50px;
  color: var(--receipt-ink); background-color: var(--receipt);
  background-image: repeating-linear-gradient(transparent 0 33px, var(--g3d-mg-rule) 33px 34px);
  background-position: 0 44px; border-top: 3px solid var(--g3d-mg-cardtop);
  box-shadow: 6px 6px 0 var(--g3d-mg-shade);
  translate: var(--dx) var(--dy); rotate: var(--rot);
  cursor: grab; touch-action: none; user-select: none;
}
.g3d-mgx-card[hidden] { display: none; }
.g3d-mgx-card:focus { outline: none; }
.g3d-mgx-card:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
.g3d-mgx.is-done .g3d-mgx-deck { display: none; }
.g3d-mgx-card.is-drag { cursor: grabbing; z-index: 5; box-shadow: 12px 14px 0 var(--g3d-mg-shade); }
.g3d-mgx-card.is-drop { animation: g3d-mgx-drop 0.4s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
.g3d-mgx-card.is-fade { animation: g3d-mg-fade 0.2s ease both; }
.g3d-mgx-card.is-wrong { animation: g3d-mg-shake 0.36s ease; }
.g3d-mgx-card.is-fly { transition: translate 0.32s cubic-bezier(0.5, 0, 0.8, 0.5), rotate 0.32s ease, scale 0.32s ease, opacity 0.2s ease 0.14s; scale: 0.45; opacity: 0; }
.g3d-mgx-no { display: flex; align-items: center; gap: 7px; font-family: var(--display); font-size: var(--g3d-mg-micro); letter-spacing: 0.1em; color: var(--g3d-mg-note); }
.g3d-mgx-text { margin-top: 10px; font-size: calc(var(--t-lede) * 1.2); line-height: 1.2; text-wrap: balance; }
.g3d-mgx-hint { display: inline-block; margin-top: 10px; padding: 2px 8px; font-size: var(--g3d-mg-small); color: var(--g3d-mg-hint-ink); background: var(--g3d-mg-hint-bg); border: 1px dashed var(--g3d-mg-star); }
.g3d-mgx-hint[hidden] { display: none; }
.g3d-mgx-shot { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--g3d-mg-paper-track); }
.g3d-mgx-shot i { display: block; height: 100%; background: var(--g3d-mg-okink); transform-origin: left; }
.g3d-mgx-card.is-late .g3d-mgx-shot i { background: var(--g3d-mg-pen); }
.g3d-mgx-verdict {
  position: absolute; right: 16px; bottom: 16px; padding: 6px 8px 5px; rotate: -6deg;
  font-family: var(--display); font-size: var(--t-label); line-height: 1.2; background: var(--receipt); border: 3px double currentColor;
  animation: g3d-mg-stamp 0.32s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
.g3d-mgx-verdict[hidden] { display: none; }
.g3d-mgx-verdict[data-ok="yes"] { color: var(--g3d-mg-okink); }
.g3d-mgx-verdict[data-ok="no"] { color: var(--g3d-mg-pen); }
.g3d-mgx-bins { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 14px; }
.g3d-mgx-bin {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 8px 12px; align-items: center;
  min-height: 88px; padding: 12px 16px; font: inherit; text-align: left; color: var(--screen-ink);
  background: var(--g3d-mg-soft); border: 2px solid var(--g3d-line); border-radius: 0; box-shadow: var(--g3d-mg-hard); cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}
.g3d-mgx-bin:hover, .g3d-mgx-bin.is-target { border-color: var(--gold); background: var(--g3d-mg-gold-wash); }
.g3d-mgx-bin.is-target { transform: translateY(-3px); }
.g3d-mgx-bin:active { transform: translate(2px, 2px); }
.g3d-mgx-bin.is-hint { border-color: var(--gold); box-shadow: 0 0 0 4px var(--g3d-mg-gold-line), var(--g3d-mg-hard); }
.g3d-mgx-bin.is-hit { animation: g3d-mgx-hit 0.42s var(--g3d-ease) both; }
.g3d-mgx-bin.is-miss { animation: g3d-mg-shake 0.34s ease; }
.g3d-mgx-bintop { display: flex; gap: 5px; }
.g3d-mgx-binlabel { font-family: var(--display); font-size: var(--t-label); line-height: 1.4; text-transform: uppercase; letter-spacing: 0.04em; }
.g3d-mgx-count { grid-column: 2; grid-row: 1 / span 2; font-size: calc(var(--t-body) * 2.1); line-height: 0.9; color: var(--gold); font-variant-numeric: tabular-nums; }
.g3d-mgx-stack { position: absolute; right: 62px; top: 12px; display: flex; gap: 3px; pointer-events: none; }
.g3d-mgx-stack i { width: 12px; height: 16px; background: var(--receipt); box-shadow: 1px 1px 0 var(--g3d-mg-shade); }
.g3d-mgx-stack i.is-bad { background: var(--g3d-mg-over-ink); }
.g3d-mgx-final { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.g3d-mgx-final section { padding: 10px 14px; color: var(--receipt-ink); background: var(--receipt); box-shadow: var(--g3d-mg-hard); }
.g3d-mgx-final .g3d-mg-label { font-size: var(--g3d-mg-micro); line-height: 1.4; color: var(--g3d-mg-note); }
.g3d-mgx-final ul { list-style: none; padding: 0; margin-top: 6px; display: grid; gap: 4px; }
.g3d-mgx-final li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 2px 8px; align-items: baseline; font-size: var(--g3d-mg-small); line-height: 1.4; }
.g3d-mgx-final li .g3d-mg-icon { color: var(--g3d-mg-okink); }
.g3d-mgx-final li.is-bad .g3d-mg-icon { color: var(--g3d-mg-pen); }
.g3d-mgx-final li em { grid-column: 2; font-style: normal; color: var(--g3d-mg-pen); }

/* ============================================================== motion */
@keyframes g3d-mg-in { from { opacity: 0; transform: translateY(14px) scale(0.985); } }
@keyframes g3d-mg-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes g3d-mg-fade { from { opacity: 0; } }
@keyframes g3d-mg-pop { 0% { transform: scale(0.94); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes g3d-mg-slide { from { opacity: 0; transform: translateX(-10px); } }
@keyframes g3d-mg-throb { 50% { opacity: 0.55; } }
@keyframes g3d-mg-beckon { 50% { box-shadow: 5px 5px 0 var(--g3d-mg-shade), 0 0 0 6px var(--g3d-mg-gold-line); } }
@keyframes g3d-mg-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes g3d-mg-stamp { 0% { opacity: 0; scale: 2.4; } 70% { opacity: 1; scale: 0.94; } 100% { opacity: 1; scale: 1; } }
@keyframes g3d-mg-stamp-soft { 0% { opacity: 0; transform: scale(1.3); } 100% { opacity: 1; transform: scale(1); } }
@keyframes g3d-mge-unstrike { 0%, 55% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes g3d-mgx-drop { 0% { opacity: 0; transform: translateY(-60px) rotate(-6deg); } 100% { opacity: 1; transform: none; } }
@keyframes g3d-mgx-hit { 0% { background: var(--g3d-mg-band-lit); border-color: var(--g3d-mg-band); } 100% { background: var(--g3d-mg-soft); } }

@media (prefers-reduced-motion: reduce) {
  .g3d-mg *, .g3d-mg *::before, .g3d-mg *::after { animation: none !important; transition: none !important; }
}
.g3d-mg.is-still *, .g3d-mg.is-still *::before, .g3d-mg.is-still *::after { animation: none !important; transition: none !important; }
/* without motion, the ready beat still shows: a ring on the hold button */
.g3d-mg.is-still .g3d-mgm.is-ready .g3d-mgm-hold { box-shadow: 5px 5px 0 var(--g3d-mg-shade), 0 0 0 4px var(--g3d-mg-gold-line); }
@media (prefers-reduced-motion: reduce) {
  .g3d-mgm.is-ready .g3d-mgm-hold { box-shadow: 5px 5px 0 var(--g3d-mg-shade), 0 0 0 4px var(--g3d-mg-gold-line); }
}

/* ============================================================== smaller windows */
@media (max-height: 800px) {
  .g3d-mg-bio { display: none; }
}
@media (max-height: 760px) {
  .g3d-mg-panel { padding: 12px 16px 14px; gap: 8px; }
  .g3d-mg-title { margin-top: 6px; }
  .g3d-mg-face { width: 60px; height: 60px; }
  .g3d-mgm { gap: 8px; }
  .g3d-mgm-gauge { padding: 18px 0 22px; }
  .g3d-mgm-track { height: 28px; }
  .g3d-mgm-hold { min-height: 48px; }
  .g3d-mgx-bin { min-height: 74px; }
}
/* laptops at 1024 × 640 and browser zoom: the key list gives way (the intro
   card showed the controls), the colleague's name lives in the side column,
   and everything tightens */
@media (max-height: 680px) {
  .g3d-mg-keys, .g3d-mg-with { display: none; }
  .g3d-mg-panel { padding: 10px 14px 12px; }
  .g3d-mg-title { margin-top: 4px; }
  .g3d-mg-brief { padding: 6px 10px; gap: 4px 18px; }
  .g3d-mg-face { width: 52px; height: 52px; }
  .g3d-mg-side { gap: 10px; padding: 10px; }
  .g3d-mg-bubble { padding: 9px 12px 10px; }
  .g3d-mgm { gap: 6px; }
  .g3d-mgm-pin { padding: 6px 14px 7px 16px; }
  .g3d-mgm-msg { font-size: var(--t-lede); }
  .g3d-mgm-qtext { font-size: var(--t-lede); }
  .g3d-mgm-q, .g3d-mgm-a { padding: 6px 12px 7px; }
  .g3d-mgm-qlog { margin-top: 6px; padding-top: 6px; }
  .g3d-mgm-gauge { padding: 14px 0 20px; }
  .g3d-mgm-track { height: 22px; }
  .g3d-mgm-meter { height: 10px; margin-top: 4px; }
  .g3d-mgm-objs { margin-top: 4px; }
  .g3d-mgm-hold { min-height: 42px; }
  .g3d-mge-doc { padding: 8px 18px 12px 46px; }
  .g3d-mge-title { margin: 6px 0 4px; font-size: var(--t-lede); }
  .g3d-mge-sents { gap: 4px; }
  .g3d-mge-line { line-height: 1.4; }
  .g3d-mgs-board { gap: 10px; padding: 12px; }
  .g3d-mgs-card { padding: 10px 12px 12px; gap: 6px; }
  .g3d-mgs-slot { min-height: 46px; padding: 6px 8px; }
  .g3d-mgx { gap: 8px; }
  .g3d-mgx-bin { min-height: 60px; padding: 8px 12px; }
  .g3d-mgx-card { min-height: 132px; padding-bottom: 40px; }
  .g3d-mgx-deck { height: 120px; }
  .g3d-mg-icard { padding: 14px 20px 16px; }
  .g3d-mg-igoal { margin-bottom: 10px; }
  .g3d-mg-isteps { gap: 6px; }
  .g3d-mg-ifoot { margin-top: 12px; }
  /* the result: the colleague's line is already in the bubble beside it */
  .g3d-mg-rcard { padding: 16px 20px; gap: 18px; }
  .g3d-mg-rmain { gap: 10px; }
  .g3d-mg-rsay { display: none; }
  .g3d-mg-stamp { width: 136px; gap: 4px; }
  .g3d-mg-rletter { font-size: calc(var(--t-figure) * 2.3); }
}
@media (max-height: 580px) {
  .g3d-mg-kicker { display: none; }
  .g3d-mg-title { margin-top: 0; }
  .g3d-mgm-qlog, .g3d-mgm-wave { display: none; }
  .g3d-mgm-atext { font-size: var(--t-body); }
  .g3d-mgm-unsaid { display: none; }         /* the pinned message above shows it in full */
  .g3d-mgm-bars { gap: 12px; }
  .g3d-mgx-card { min-height: 116px; }
  .g3d-mg-icard { padding: 12px 18px 14px; }
  .g3d-mg-iname { margin: 6px 0 4px; }
  .g3d-mg-igoal { margin-bottom: 8px; font-size: var(--t-body); }
  .g3d-mg-isteps li { font-size: var(--t-small); }
  .g3d-mg-inote { margin-top: 8px; }
  .g3d-mg-ifoot { margin-top: 10px; }
}
/* narrow windows: the colleague keeps a slim column beside the work */
@media (max-width: 980px) {
  .g3d-mg-body { grid-template-columns: minmax(0, 1fr) clamp(158px, 19vw, 200px); gap: 10px; }
  .g3d-mg-keys, .g3d-mg-bio { display: none; }
  .g3d-mg-person { gap: 8px; }
  .g3d-mg-face { width: 44px; height: 44px; box-shadow: var(--g3d-mg-hard-sm); }
  .g3d-mg-who { font-size: var(--g3d-mg-micro); }
  .g3d-mg-role { font-size: var(--g3d-mg-small); }
  .g3d-mg-bubble { min-height: 0; padding: 8px 10px 9px; font-size: var(--t-small); }
  .g3d-mg-brief { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .g3d-mgm-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px; }
  .g3d-mgm-callrow { grid-template-columns: minmax(118px, 150px) minmax(0, 1fr); gap: 12px; }
  .g3d-mgm-hold { min-width: min(300px, 100%); }
  .g3d-mgs { grid-template-columns: minmax(0, 1fr) clamp(150px, 19vw, 190px); gap: 10px; }
  .g3d-mgs-board { gap: 10px; padding: 10px; }
  .g3d-mgs-card { padding: 10px; gap: 6px; }
  .g3d-mgs-label { font-size: var(--t-small); }
  .g3d-mgs-slot { min-height: 44px; padding: 6px 8px; grid-template-columns: 18px minmax(0, 1fr); gap: 2px 6px; }
  .g3d-mgx-top { flex-wrap: wrap; gap: 6px 14px; }
  .g3d-mg-rcard { grid-template-columns: 128px minmax(0, 1fr); gap: 16px; padding: 14px 16px; }
  .g3d-mg-stamp { width: 118px; border-width: 5px; }
  .g3d-mg-rletter { font-size: calc(var(--t-figure) * 2); }
  .g3d-mg-isteps li { grid-template-columns: minmax(110px, 150px) 1fr; gap: 10px; }
}
/* very narrow: the colleague sits under the work as a strip */
@media (max-width: 720px) {
  .g3d-mg-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .g3d-mg-side { flex-direction: row; align-items: center; }
  .g3d-mg-bubble { flex: 1; margin-top: 0; }
  .g3d-mg-bubble::before, .g3d-mg-bubble::after { display: none; }
  .g3d-mgs { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .g3d-mg-rcard { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Wallet, journal, settings, controls, photo mode
   ========================================================================== */
/* 3D · panels (merged into styles.css at integration)
   The menu book (wallet, journal, settings, controls), photo mode and
   the free-camera badge. Glass and pixels: a frosted sheet with a hard
   pixel border, gold corner brackets and hard offset shadows; labels
   in --display, reading in --sans. Every colour sits on the fixed
   "screen" tokens so the menus read the same in either theme.

   Type: the site's --t-* scale throughout. Reading text (VT323) is
   --t-small, --t-body or --t-lede; labels, keycaps, tags and buttons
   (Press Start 2P) are --t-label, never smaller. One scoped step sits
   between --t-label and --t-figure, for short display titles (company
   names on the timeline, step titles): --t-g3d-title, derived from the
   scale. */

.g3d {
  --t-g3d-title: calc(var(--t-label) * 1.3);
  --g3d-warm: #ff9ab8;          /* spending, warnings: 7:1 on the glass */
  --g3d-violet: #c3b2ff;
  --g3d-sheet: rgba(24, 21, 54, 0.95);
  --g3d-sheet-2: rgba(11, 10, 26, 0.96);
  --g3d-well: rgba(8, 7, 15, 0.42);
  --g3d-rule: rgba(255, 244, 214, 0.13);
  --g3d-edge: rgba(255, 244, 214, 0.42);  /* control borders: 4:1 on the glass */
  --g3d-shade: #04030a;         /* hard shadows, and the world dimmed behind a sheet */
  --g3d-deep: #0c0b1c;          /* the photo dock and the badges over the world */
  --g3d-hard: 4px 4px 0 color-mix(in srgb, var(--g3d-shade) 72%, transparent);
  --g3d-paper-dim: #463f63;     /* secondary ink on --receipt: 9:1 */
  --g3d-paper-link: #00606b;    /* links and B stamps on paper: 7:1 */
  --g3d-paper-gold: #7a4d00;    /* S stamps on paper: 7.6:1 */
  --g3d-paper-green: #17703f;   /* A stamps on paper: 6:1 */
  --g3d-paper-red: #a3124a;     /* the margin and the notes label: 7:1 */
  --g3d-key-top: #2e2a5e;       /* keycaps */
  --g3d-key-bottom: #1b1840;
  --g3d-field: #17153a;         /* selects, the confirm sheet */
  --g3d-gold-hi: #ffd95c;       /* gold buttons on hover */
  --g3d-rar-common: #d9d3f0;
}

/* ------------------------------------------------------------- the book */
.g3d .g3d-book {
  position: fixed; inset: 0; margin: auto;
  width: min(1060px, calc(100vw - 40px)); height: min(690px, calc(100vh - 40px));
  max-width: none; max-height: none; padding: 0; border: 0; overflow: visible;
  background: transparent; color: var(--screen-ink); pointer-events: auto;
  font-family: var(--sans); font-size: var(--t-body); line-height: 1.4;
}
.g3d .g3d-book:not([open]) { display: none; }
.g3d .g3d-book::backdrop { background: color-mix(in srgb, var(--g3d-shade) 50%, transparent); backdrop-filter: blur(3px) saturate(0.85); }
.g3d .g3d-book :where(p, h2, h3, ul, ol, dl, dd, figure) { margin: 0; }
.g3d .g3d-book :where(ul, ol) { list-style: none; padding: 0; }

.g3d .g3d-book-frame {
  position: relative; height: 100%;
  display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  background: linear-gradient(180deg, var(--g3d-sheet) 0%, var(--g3d-sheet-2) 100%);
  backdrop-filter: blur(18px) saturate(1.25);
  border: 3px solid var(--g3d-line);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--screen) 85%, transparent), 8px 8px 0 color-mix(in srgb, var(--g3d-shade) 70%, transparent), inset 0 1px 0 color-mix(in srgb, var(--screen-ink) 10%, transparent);
}
/* gold corner brackets, like a viewfinder drawn in pixels */
.g3d .g3d-book-frame::before {
  content: ''; position: absolute; inset: -3px; pointer-events: none; z-index: 2;
  background:
    linear-gradient(var(--gold), var(--gold)) left top / 15px 3px,
    linear-gradient(var(--gold), var(--gold)) left top / 3px 15px,
    linear-gradient(var(--gold), var(--gold)) right top / 15px 3px,
    linear-gradient(var(--gold), var(--gold)) right top / 3px 15px,
    linear-gradient(var(--gold), var(--gold)) left bottom / 15px 3px,
    linear-gradient(var(--gold), var(--gold)) left bottom / 3px 15px,
    linear-gradient(var(--gold), var(--gold)) right bottom / 15px 3px,
    linear-gradient(var(--gold), var(--gold)) right bottom / 3px 15px;
  background-repeat: no-repeat;
}
.g3d .g3d-book-frame.is-in { animation: g3d-pn-book-in 0.22s var(--g3d-ease) both; }
.g3d .g3d-book-panel.is-in { animation: g3d-pn-panel-in 0.16s var(--g3d-ease) both; }
@keyframes g3d-pn-book-in { from { opacity: 0; translate: 0 14px; } }
@keyframes g3d-pn-panel-in { from { opacity: 0; translate: 0 6px; } }

/* the menus along the top */
.g3d .g3d-book-top {
  display: flex; align-items: stretch; justify-content: space-between; gap: 12px;
  padding: 0 8px 0 10px; background: var(--g3d-well); border-bottom: 2px solid var(--g3d-line);
}
.g3d .g3d-book-nav { display: flex; align-items: stretch; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.g3d .g3d-book-sec {
  display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 10px 14px 7px;
  font-family: var(--display); font-size: var(--t-label); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--screen-dim); background: none; border: 0; border-bottom: 3px solid transparent; cursor: pointer; white-space: nowrap;
}
.g3d .g3d-book-sec:hover { color: var(--screen-ink); background: color-mix(in srgb, var(--screen-ink) 4%, transparent); }
.g3d .g3d-book-sec[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--gold) 10%, transparent)); }
.g3d .g3d-book-sec .g3d-pix-wrap { color: inherit; }
.g3d .g3d-book-x {
  display: inline-flex; align-items: center; gap: 8px; align-self: center; min-height: 36px; padding: 4px 10px;
  color: var(--screen-ink); background: none; border: 2px solid transparent; cursor: pointer;
}
.g3d .g3d-book-x:hover { border-color: var(--g3d-edge); }

/* the heading */
.g3d .g3d-book-head { padding: 14px 26px 10px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 8px 20px; }
.g3d .g3d-book-kicker { grid-column: 1 / -1; }
.g3d .g3d-book-kicker { font-family: var(--display); font-size: var(--t-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.g3d .g3d-book-title {
  font-family: var(--display); font-size: var(--t-figure); line-height: 1.25; font-weight: 400;
  color: var(--screen-ink); text-shadow: var(--g3d-text-lift);
}
.g3d .g3d-book-sub { color: var(--screen-dim); font-size: var(--t-small); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g3d .g3d-book-sub[hidden] { display: none; }

/* tabs */
.g3d .g3d-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 26px 12px; border-bottom: 2px dotted var(--g3d-rule); }
.g3d .g3d-tabs[hidden] { display: none; }
.g3d .g3d-tab {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 8px 12px;
  font-family: var(--display); font-size: var(--t-label); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--screen-dim); background: color-mix(in srgb, var(--screen-ink) 4%, transparent); border: 2px solid var(--g3d-line); cursor: pointer;
}
.g3d .g3d-tab:hover { color: var(--screen-ink); border-color: var(--g3d-edge); }
.g3d .g3d-tab[aria-selected="true"] { color: var(--screen); background: var(--gold); border-color: var(--gold); box-shadow: 3px 3px 0 color-mix(in srgb, var(--g3d-shade) 75%, transparent); }

/* the page */
.g3d .g3d-book-panel { overflow: auto; padding: 20px 26px 28px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--gold) 70%, transparent) transparent; overscroll-behavior: contain; }
.g3d .g3d-book-panel:focus-visible { outline-offset: -4px; }
.g3d .g3d-book-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; padding: 9px 26px;
  border-top: 2px solid var(--g3d-line); background: var(--g3d-well); color: var(--screen-dim); font-size: var(--t-small);
}
.g3d .g3d-book-foot > span { display: inline-flex; align-items: center; gap: 2px; }
.g3d .g3d-book-foot-note { margin-left: auto; color: var(--screen-ink); }
/* a confirmation from inside the book (equip, a time jump): the HUD toasts sit under the modal sheet */
.g3d .g3d-book-say {
  position: absolute; left: 50%; bottom: 62px; z-index: 3; translate: -50% 6px; margin: 0; max-width: calc(100% - 52px);
  padding: 8px 16px; pointer-events: none; opacity: 0; text-align: center;
  font-family: var(--sans); font-size: var(--t-body); line-height: 1.4; color: var(--screen-ink);
  background: var(--g3d-field); border: 2px solid var(--g3d-edge); box-shadow: 4px 4px 0 color-mix(in srgb, var(--g3d-shade) 75%, transparent);
  transition: opacity 0.18s var(--g3d-ease), translate 0.18s var(--g3d-ease);
}
.g3d .g3d-book-say:empty { padding: 0; border: 0; box-shadow: none; }
.g3d .g3d-book-say.is-on { opacity: 1; translate: -50% 0; }
.g3d .g3d-book-say.is-good { color: var(--g3d-money); border-color: var(--g3d-money); }

/* focus: cyan on the glass, ink on paper */
.g3d .g3d-book :focus-visible, .g3d .g3d-photo-layer :focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.g3d .g3d-clip :focus-visible, .g3d .g3d-notes :focus-visible { outline-color: var(--receipt-ink); }

/* -------------------------------------------------------------- the kit */
.g3d .g3d-key {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 6px; margin: 0 4px 0 0;
  font-family: var(--display); font-size: var(--t-label); line-height: 1; text-transform: none; letter-spacing: 0;
  color: var(--screen-ink); background: linear-gradient(180deg, var(--g3d-key-top), var(--g3d-key-bottom));
  border: 2px solid color-mix(in srgb, var(--screen-ink) 42%, transparent); border-bottom-width: 4px; border-radius: 0; vertical-align: middle;
}
.g3d .g3d-key.is-wide { padding: 0 9px; }
.g3d .g3d-key.is-glyph, .g3d .g3d-board-key.is-glyph { font-family: var(--sans); font-size: var(--t-small); }
.g3d .g3d-key-sm { min-width: 24px; height: 24px; padding: 0 5px; margin: 0; }
.g3d .g3d-pix-wrap { display: inline-flex; line-height: 0; flex: none; }
.g3d .g3d-pix { width: 18px; height: auto; image-rendering: pixelated; }
.g3d .g3d-label { font-family: var(--display); font-size: var(--t-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--screen-dim); font-weight: 400; }
.g3d .g3d-h3 {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  font-family: var(--display); font-size: var(--t-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--screen-ink); font-weight: 400;
}
.g3d .g3d-sec-h { margin: 28px 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--g3d-line); }
.g3d .g3d-sec-h .g3d-pix-wrap { color: var(--gold); }
.g3d .g3d-count { margin-left: auto; color: var(--gold); font-family: var(--display); font-size: var(--t-label); }
.g3d .g3d-dim { color: var(--screen-dim); }
.g3d .g3d-money { color: var(--g3d-money); }
.g3d .g3d-warm { color: var(--g3d-warm); }
.g3d .g3d-gold { color: var(--gold); }
.g3d .g3d-book b, .g3d .g3d-book strong { font-weight: 400; }
.g3d .g3d-lede { font-size: var(--t-lede); margin-bottom: 16px; }
.g3d .g3d-card { border: 2px solid var(--g3d-line); background: color-mix(in srgb, var(--screen-ink) 3.5%, transparent); padding: 14px 16px; margin: 0 0 16px; }
.g3d .g3d-card > .g3d-label { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.g3d .g3d-empty { padding: 26px 20px; text-align: center; color: var(--screen-dim); border: 2px dashed var(--g3d-rule); margin: 8px 0 16px; }
.g3d .g3d-note { display: flex; align-items: flex-start; gap: 12px; margin-top: 20px; padding: 12px 14px; border: 2px dashed var(--g3d-rule); color: var(--screen-dim); font-size: var(--t-small); }
.g3d .g3d-note .g3d-pix-wrap { color: var(--gold); margin-top: 2px; }
.g3d .g3d-note.is-top { margin: 0 0 16px; }
.g3d .g3d-note strong { color: var(--screen-ink); }
.g3d .g3d-tag {
  display: inline-block; margin-left: 8px; padding: 4px 6px 3px; vertical-align: middle; line-height: 1.1;
  font-family: var(--display); font-size: var(--t-label); letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold); border: 2px solid currentColor;
}
.g3d .g3d-tag-on { color: var(--g3d-money); }
.g3d .g3d-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.g3d .g3d-chip { display: inline-block; padding: 3px 10px; border: 2px solid color-mix(in srgb, var(--g3d-money) 55%, transparent); color: var(--g3d-money); font-size: var(--t-small); }
.g3d .g3d-swatch { display: inline-block; width: 12px; height: 12px; background: var(--c, var(--kc, var(--gold))); box-shadow: 2px 2px 0 color-mix(in srgb, var(--g3d-shade) 70%, transparent); flex: none; }

.g3d .g3d-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 8px 14px;
  font-family: var(--display); font-size: var(--t-label); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
  color: var(--gold); background: color-mix(in srgb, var(--gold) 6%, transparent); border: 2px solid var(--gold); box-shadow: 3px 3px 0 color-mix(in srgb, var(--g3d-shade) 70%, transparent); cursor: pointer;
}
.g3d .g3d-btn:hover { background: color-mix(in srgb, var(--gold) 16%, transparent); }
.g3d .g3d-btn:active { translate: 2px 2px; box-shadow: 1px 1px 0 color-mix(in srgb, var(--g3d-shade) 70%, transparent); }
.g3d .g3d-btn.is-quiet { color: var(--screen-ink); border-color: var(--g3d-edge); background: transparent; }
.g3d .g3d-btn-gold { color: var(--screen); background: var(--gold); border-color: var(--gold); }
.g3d .g3d-btn-gold:hover { background: var(--g3d-gold-hi); }
.g3d .g3d-btn-danger { color: var(--g3d-warm); border-color: var(--g3d-warm); background: color-mix(in srgb, var(--g3d-warm) 6%, transparent); }
.g3d .g3d-btn-danger:hover { background: color-mix(in srgb, var(--g3d-warm) 16%, transparent); }
.g3d .g3d-btn .g3d-key { flex: none; margin: 0 0 0 4px; }

.g3d .g3d-book select {
  min-height: 36px; padding: 2px 34px 2px 10px; font-family: var(--sans); font-size: var(--t-small); color: var(--screen-ink);
  background: var(--g3d-field) linear-gradient(135deg, transparent 50%, var(--gold) 50%) no-repeat right 12px center / 8px 8px;
  border: 2px solid var(--g3d-edge); border-radius: 0; appearance: none; cursor: pointer;
}
.g3d .g3d-book select option { background: var(--g3d-field); color: var(--screen-ink); }

/* tables */
.g3d .g3d-table { width: 100%; border-collapse: collapse; font-size: var(--t-body); }
.g3d .g3d-table thead th {
  padding: 0 10px 10px; text-align: left; font-family: var(--display); font-size: var(--t-label); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--screen-dim); font-weight: 400; border-bottom: 2px solid var(--g3d-line); white-space: nowrap;
}
.g3d .g3d-table td, .g3d .g3d-table tbody th, .g3d .g3d-table tfoot th, .g3d .g3d-table tfoot td { padding: 9px 10px; border-bottom: 2px dotted var(--g3d-rule); vertical-align: middle; text-align: left; font-weight: 400; }
.g3d .g3d-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.g3d .g3d-table tfoot th { font-family: var(--display); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.06em; color: var(--screen-dim); border-bottom: 0; }
.g3d .g3d-table tfoot td { font-family: var(--display); font-size: var(--t-g3d-title); border-bottom: 0; }
.g3d .g3d-table tbody tr:hover td, .g3d .g3d-table tbody tr:hover th { background: color-mix(in srgb, var(--screen-ink) 3%, transparent); }

/* ---------------------------------------------------------------- wallet */
.g3d .g3d-w-hero { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 20px 32px; align-items: end; padding: 4px 0 22px; border-bottom: 2px dotted var(--g3d-rule); margin-bottom: 14px; }
.g3d .g3d-w-big { font-family: var(--display); font-size: var(--t-h2); line-height: 1.2; color: var(--gold); text-shadow: var(--g3d-text-lift); margin: 10px 0 8px; }
.g3d .g3d-w-mix { display: grid; gap: 10px; }
.g3d .g3d-w-bar { display: flex; gap: 2px; height: 22px; padding: 3px; border: 2px solid var(--g3d-edge); background: var(--g3d-well); }
.g3d .g3d-w-bar i { display: block; width: var(--w); min-width: 3px; background: var(--c) repeating-linear-gradient(90deg, transparent 0 6px, color-mix(in srgb, var(--screen) 22%, transparent) 6px 8px); }
.g3d .g3d-w-bar i.is-empty { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--screen-ink) 8%, transparent) 0 6px, transparent 6px 12px); }
.g3d .g3d-w-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--t-small); }
.g3d .g3d-w-legend li { display: inline-flex; align-items: center; gap: 7px; }
.g3d .g3d-w-feed { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--screen-dim); font-size: var(--t-small); }
.g3d .g3d-live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-size: var(--t-label); letter-spacing: 0.04em; color: var(--screen-dim); vertical-align: middle; }
.g3d .g3d-live i { width: 8px; height: 8px; border: 2px solid currentColor; }
.g3d .g3d-live.is-live { color: var(--g3d-money); }
.g3d .g3d-live.is-live i { background: currentColor; animation: g3d-pn-blink 1.6s steps(2) infinite; }
.g3d .g3d-live.is-small { gap: 5px; }
.g3d .g3d-live.is-small i { width: 7px; height: 7px; }
@keyframes g3d-pn-blink { 50% { background: transparent; } }
.g3d .g3d-tok {
  display: inline-grid; place-items: center; min-width: 58px; height: 28px; padding: 0 6px; margin-right: 12px; vertical-align: middle;
  font-family: var(--display); font-size: var(--t-label); color: var(--screen); background: var(--c); box-shadow: 2px 2px 0 color-mix(in srgb, var(--g3d-shade) 75%, transparent);
}
.g3d .g3d-tok-name { display: inline-flex; flex-direction: column; vertical-align: middle; gap: 2px; }
.g3d .g3d-tok-name small { color: var(--screen-dim); font-size: var(--t-small); }
.g3d .g3d-tok-name .g3d-tag { margin: 2px 0 0; align-self: flex-start; }
.g3d .g3d-w-table tr.is-zero td, .g3d .g3d-w-table tr.is-zero .g3d-tok-name { color: var(--screen-dim); }
.g3d .g3d-w-table tr.is-now th { box-shadow: inset 4px 0 0 var(--gold); }
.g3d .g3d-w-table tr.is-now td, .g3d .g3d-w-table tr.is-now th { background: color-mix(in srgb, var(--gold) 5%, transparent); }

/* ---------------------------------------------------------------- ledger */
.g3d .g3d-rev-list { display: grid; gap: 8px; }
.g3d .g3d-rev-list li { display: grid; grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr) auto; align-items: center; gap: 14px; font-size: var(--t-small); }
.g3d .g3d-rev-bar { display: block; height: 14px; background: var(--g3d-well); border: 2px solid var(--g3d-rule); }
.g3d .g3d-rev-bar i { display: block; height: 100%; width: var(--w); background: var(--c) repeating-linear-gradient(90deg, transparent 0 6px, color-mix(in srgb, var(--screen) 25%, transparent) 6px 8px); }
.g3d .g3d-rev-total { margin-top: 10px; text-align: right; color: var(--screen-dim); }
.g3d .g3d-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 6px 0 14px; }
.g3d .g3d-filters label { font-family: var(--display); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.06em; color: var(--screen-dim); }
.g3d .g3d-filter-sum { margin-left: auto; color: var(--screen-dim); font-size: var(--t-small); }
.g3d .g3d-l-table td:nth-child(4) { color: var(--screen-ink); }
.g3d .g3d-when { white-space: nowrap; }
.g3d .g3d-when span, .g3d .g3d-when small { display: block; }
.g3d .g3d-when small, .g3d .g3d-est { color: var(--screen-dim); font-size: var(--t-small); }

/* ----------------------------------------------------------------- items */
.g3d .g3d-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.g3d .g3d-slot { border: 2px solid var(--g3d-line); padding: 12px 14px; background: color-mix(in srgb, var(--screen-ink) 3%, transparent); }
.g3d .g3d-slot.is-empty { border-style: dashed; background: transparent; }
.g3d .g3d-slot > header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; font-size: var(--t-small); }
.g3d .g3d-slot > header .g3d-label { color: var(--screen-ink); }
.g3d .g3d-slot-empty { font-size: var(--t-small); }
/* An item: the shop's pixel art in a lit well, then the name, what it is,
   what it does, and the one action, stacked beside it. */
.g3d .g3d-item { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 12px 0 8px; border-top: 2px dotted var(--g3d-rule); }
.g3d .g3d-item > p, .g3d .g3d-item > .g3d-btn { grid-column: 2; }
.g3d .g3d-item > .g3d-btn { justify-self: start; margin-top: 6px; }
.g3d .g3d-item-art {
  grid-column: 1; grid-row: 1 / span 4; display: grid; place-items: center; width: 52px; height: 52px;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--screen-ink) 12%, transparent), transparent 72%), var(--g3d-well);
  border: 2px solid var(--g3d-line); box-shadow: 3px 3px 0 color-mix(in srgb, var(--g3d-shade) 60%, transparent);
}
.g3d .g3d-item.is-on .g3d-item-art { border-color: var(--gold); }
.g3d .g3d-item-icon { display: block; width: 48px; height: 48px; image-rendering: pixelated; }
.g3d .g3d-item-letter { font-family: var(--display); font-size: var(--t-g3d-title); color: var(--screen-dim); }
.g3d .g3d-item:hover .g3d-item-icon, .g3d .g3d-item:focus-within .g3d-item-icon { animation: g3d-pn-bob 0.8s steps(2) infinite; }
@keyframes g3d-pn-bob { 50% { translate: 0 -2px; } }
.g3d .g3d-item-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--t-body); color: var(--screen-ink); }
.g3d .g3d-item-name .g3d-tag { margin-left: 0; }
.g3d .g3d-item-desc { font-size: var(--t-small); color: var(--screen-dim); }
.g3d .g3d-item-fx { font-size: var(--t-small); color: var(--g3d-money); }
.g3d .g3d-item.is-on .g3d-item-name { color: var(--gold); }

/* ------------------------------------------------------------ press book */
.g3d .g3d-records { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; }
.g3d .g3d-stat { border: 2px solid var(--g3d-line); padding: 12px 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 7%, transparent), transparent); display: grid; gap: 6px; align-content: start; }
.g3d .g3d-stat-v { font-family: var(--display); font-size: var(--t-figure); line-height: 1.2; color: var(--gold); text-shadow: var(--g3d-text-lift); }
.g3d .g3d-stat .g3d-dim { font-size: var(--t-small); }

.g3d .g3d-clips { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.g3d .g3d-clip {
  position: relative; display: flow-root; padding: 14px 16px 16px;
  color: var(--receipt-ink); box-shadow: 5px 5px 0 color-mix(in srgb, var(--g3d-shade) 75%, transparent);
  background: var(--receipt) repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in srgb, var(--receipt-ink) 4.5%, transparent) 23px 24px);
}
.g3d .g3d-clip-outlet {
  padding: 0 0 8px; margin-bottom: 10px; border-bottom: 4px double var(--receipt-ink);
  font-family: var(--display); font-size: var(--t-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--receipt-ink);
}
.g3d .g3d-clip-head { font-size: var(--t-lede); line-height: 1.3; color: var(--receipt-ink); }
.g3d .g3d-clip-meta { clear: both; display: flex; flex-wrap: wrap; gap: 2px 14px; padding-top: 10px; font-size: var(--t-small); color: var(--g3d-paper-dim); }
.g3d .g3d-clip-meta b { color: var(--receipt-ink); }
.g3d .g3d-clip-link { margin-top: 6px; display: inline-flex; align-items: center; min-height: 28px; color: var(--g3d-paper-link); font-size: var(--t-small); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.g3d .g3d-clip-link:hover { color: var(--receipt-ink); }
.g3d .g3d-stamp {
  display: inline-grid; place-items: center; font-family: var(--display); line-height: 1; color: var(--c-stamp, var(--gold)); border: 3px solid currentColor;
}
.g3d .g3d-clip .g3d-stamp {
  float: right; width: 50px; height: 50px; margin: 0 0 8px 12px; font-size: var(--t-figure); rotate: -9deg;
  border-width: 4px; outline: 2px solid currentColor; outline-offset: -9px;
}
.g3d .g3d-stamp-s { --c-stamp: var(--gold); }
.g3d .g3d-stamp-a { --c-stamp: var(--g3d-money); }
.g3d .g3d-stamp-b { --c-stamp: var(--cyan); }
.g3d .g3d-stamp-c { --c-stamp: var(--g3d-warm); }
.g3d .g3d-clip .g3d-stamp-s { --c-stamp: var(--g3d-paper-gold); }
.g3d .g3d-clip .g3d-stamp-a { --c-stamp: var(--g3d-paper-green); }
.g3d .g3d-clip .g3d-stamp-b { --c-stamp: var(--g3d-paper-link); }
.g3d .g3d-clip .g3d-stamp-c { --c-stamp: var(--brick); }
.g3d .g3d-stamp-sm { min-width: 30px; height: 30px; margin-left: 10px; font-size: var(--t-label); border-width: 2px; rotate: -6deg; }
.g3d .g3d-stamp-xs { min-width: 26px; height: 26px; margin-left: 4px; font-size: var(--t-label); border-width: 2px; }
.g3d .g3d-stamp-xs.is-none { --c-stamp: var(--screen-dim); border-style: dotted; }

.g3d .g3d-rarity-row { display: flex; flex-wrap: wrap; gap: 8px; margin: -2px 0 14px; }
.g3d .g3d-rar { --rc: var(--screen-dim); }
.g3d .g3d-rar-common { --rc: var(--g3d-rar-common); }
.g3d .g3d-rar-uncommon { --rc: var(--g3d-money); }
.g3d .g3d-rar-rare { --rc: var(--cyan); }
.g3d .g3d-rar-legendary { --rc: var(--gold); }
.g3d .g3d-rarity-row li { display: inline-flex; align-items: center; gap: 10px; padding: 4px 10px; border: 2px solid var(--rc); color: var(--rc); font-family: var(--display); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.04em; }
.g3d .g3d-rarity-row b { color: var(--screen-ink); }
.g3d .g3d-log { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 12px; }
.g3d .g3d-opp { display: grid; gap: 6px; align-content: start; padding: 10px 12px 12px; border: 2px solid var(--g3d-line); border-top: 4px solid var(--rc); background: color-mix(in srgb, var(--screen-ink) 4%, transparent); min-height: 128px; }
.g3d .g3d-opp-top { display: flex; justify-content: space-between; align-items: center; }
.g3d .g3d-rar-chip { font-family: var(--display); font-size: var(--t-label); letter-spacing: 0.04em; text-transform: uppercase; color: var(--rc); }
.g3d .g3d-opp-count { font-family: var(--display); font-size: var(--t-label); color: var(--screen-ink); }
.g3d .g3d-opp-title { font-size: var(--t-body); line-height: 1.4; color: var(--screen-ink); }
.g3d .g3d-opp-meta { font-size: var(--t-small); color: var(--screen-dim); }
.g3d .g3d-opp-meta b { color: var(--screen-ink); }
.g3d .g3d-opp.g3d-rar-legendary:not(.is-unseen) { box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent), 0 0 22px color-mix(in srgb, var(--gold) 16%, transparent); }
.g3d .g3d-opp.is-unseen { border-style: dashed; border-top-style: solid; background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--screen-ink) 3.5%, transparent) 0 6px, transparent 6px 12px); }
.g3d .g3d-opp.is-unseen .g3d-opp-title { font-family: var(--display); font-size: var(--t-g3d-title); letter-spacing: 0.2em; color: var(--screen-dim); }
.g3d .g3d-opp.is-unseen .g3d-opp-count { color: var(--screen-dim); }
.g3d .g3d-opp-hint { font-size: var(--t-small); color: var(--screen-dim); }

/* --------------------------------------------------------------- journal */
.g3d .g3d-ch-hero {
  position: relative; display: grid; gap: 6px; padding: 18px 22px 18px 30px; margin-bottom: 16px; overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--co) 55%, transparent);
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--co) 30%, transparent) 0%, color-mix(in srgb, var(--co) 8%, transparent) 60%, transparent 100%);
}
.g3d .g3d-ch-hero::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--co); }
.g3d .g3d-ch-hero::after {
  content: ''; position: absolute; right: -6px; top: 0; bottom: 0; width: 180px; pointer-events: none;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--co) 22%, transparent) 0 8px, transparent 8px 20px);
  mask-image: linear-gradient(90deg, transparent, #000 70%);
}
.g3d .g3d-ch-n { color: var(--screen-ink); }
.g3d .g3d-ch-co { font-family: var(--display); font-size: var(--t-h2); line-height: 1.25; color: var(--screen-ink); text-shadow: var(--g3d-text-lift); }
.g3d .g3d-ch-role { font-size: var(--t-body); color: var(--screen-ink); }
.g3d .g3d-ch-tag { font-size: var(--t-lede); color: var(--gold); }
.g3d .g3d-ch-pay { font-size: var(--t-small); color: var(--screen-dim); }
.g3d .g3d-ch-pay b { color: var(--screen-ink); }
.g3d .g3d-ch-pay b.g3d-money { color: var(--g3d-money); }
.g3d .g3d-next { border-color: var(--gold); box-shadow: inset 4px 0 0 var(--gold); }
.g3d .g3d-next .g3d-label { color: var(--gold); }
.g3d .g3d-next .g3d-pix-wrap { color: var(--gold); }
.g3d .g3d-next-text { font-size: var(--t-lede); color: var(--screen-ink); margin: 2px 0 6px; }
.g3d .g3d-next .g3d-dim { font-size: var(--t-small); }
.g3d .g3d-next.is-easy { background: color-mix(in srgb, var(--gold) 7%, transparent); }

.g3d .g3d-assign { display: grid; gap: 12px; }
.g3d .g3d-as { display: grid; gap: 8px; padding: 14px 16px; border: 2px solid var(--g3d-line); background: color-mix(in srgb, var(--screen-ink) 3%, transparent); }
.g3d .g3d-as.is-done { border-color: color-mix(in srgb, var(--g3d-money) 50%, transparent); }
.g3d .g3d-as.is-active { border-color: var(--gold); box-shadow: inset 4px 0 0 var(--gold); }
.g3d .g3d-as-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.g3d .g3d-as-n { display: inline-grid; place-items: center; width: 30px; height: 30px; font-family: var(--display); font-size: var(--t-label); color: var(--screen); background: var(--screen-dim); box-shadow: 2px 2px 0 color-mix(in srgb, var(--g3d-shade) 70%, transparent); }
.g3d .g3d-as.is-done .g3d-as-n { background: var(--g3d-money); }
.g3d .g3d-as.is-active .g3d-as-n { background: var(--gold); }
.g3d .g3d-as-title { font-family: var(--display); font-size: var(--t-label); line-height: 1.5; color: var(--screen-ink); }
.g3d .g3d-as-state { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.04em; color: var(--screen-dim); white-space: nowrap; }
.g3d .g3d-as-state.is-done { color: var(--g3d-money); }
.g3d .g3d-as-state.is-active { color: var(--gold); }
.g3d .g3d-as-brief { font-size: var(--t-body); color: var(--screen-ink); }
.g3d .g3d-as-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; font-size: var(--t-small); color: var(--screen-dim); }
.g3d .g3d-as-meta b { color: var(--screen-ink); }
.g3d .g3d-as-meta .g3d-chip { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 50%, transparent); padding: 1px 8px; }
.g3d .g3d-as-done { font-size: var(--t-small); color: var(--g3d-money); }
.g3d .g3d-as-hint { font-size: var(--t-small); color: var(--screen-dim); }
.g3d .g3d-as-hint.is-active { color: var(--gold); }

.g3d .g3d-key-card { margin-top: 16px; }
.g3d .g3d-kn-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.g3d .g3d-kn-top .g3d-label { display: inline-flex; align-items: center; gap: 10px; color: var(--screen-ink); }
.g3d .g3d-kn-top .g3d-pix-wrap { color: var(--gold); }
.g3d .g3d-pips { display: inline-flex; gap: 5px; }
.g3d .g3d-pips i { width: 14px; height: 14px; border: 2px solid var(--gold); }
.g3d .g3d-pips i.on { background: var(--gold); }
.g3d .g3d-kn-title { font-size: var(--t-lede); color: var(--gold); margin: 8px 0 4px; }
.g3d .g3d-kn-state { color: var(--screen-ink); }
.g3d .g3d-key-card.is-passed { border-color: color-mix(in srgb, var(--g3d-money) 55%, transparent); }
.g3d .g3d-key-card.is-ready { border-color: var(--gold); animation: g3d-pn-ready 2.4s steps(2) infinite; }
.g3d .g3d-key-card.is-missed { border-color: color-mix(in srgb, var(--g3d-warm) 55%, transparent); }
.g3d .g3d-key-card.is-early { border-style: dashed; border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
@keyframes g3d-pn-ready { 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 20%, transparent); } }

/* Ryan's notes: ruled paper */
.g3d .g3d-notes {
  color: var(--receipt-ink); border: 0; box-shadow: 5px 5px 0 color-mix(in srgb, var(--g3d-shade) 75%, transparent); padding: 16px 18px 18px 30px; position: relative;
  background: var(--receipt) repeating-linear-gradient(0deg, transparent 0 25px, color-mix(in srgb, var(--g3d-paper-link) 16%, transparent) 25px 26px);
}
.g3d .g3d-notes::before { content: ''; position: absolute; left: 18px; top: 0; bottom: 0; width: 2px; background: color-mix(in srgb, var(--g3d-paper-red) 45%, transparent); }
.g3d .g3d-notes .g3d-label { color: var(--g3d-paper-red); }
.g3d .g3d-notes .g3d-pix-wrap { color: var(--g3d-paper-red); }
.g3d .g3d-notes ul { display: grid; gap: 14px; margin-top: 12px; }
.g3d .g3d-notes li { display: grid; gap: 4px; }
.g3d .g3d-note-a { font-family: var(--display); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.04em; color: var(--g3d-paper-dim); }
.g3d .g3d-note-t { font-size: var(--t-body); line-height: 1.4; color: var(--receipt-ink); }
.g3d .g3d-notes .g3d-dim { color: var(--g3d-paper-dim); }

/* side quests */
.g3d .g3d-qs { display: grid; }
.g3d .g3d-q { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 11.5rem; align-items: center; gap: 14px; padding: 10px 0; border-top: 2px dotted var(--g3d-rule); }
.g3d .g3d-q:first-child { border-top: 0; }
.g3d .g3d-q-box { display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--g3d-edge); color: var(--screen); }
.g3d .g3d-q.is-done .g3d-q-box { background: var(--gold); border-color: var(--gold); }
.g3d .g3d-q-box .g3d-pix { width: 14px; }
.g3d .g3d-q-title { font-size: var(--t-body); color: var(--screen-ink); }
.g3d .g3d-q .g3d-dim { font-size: var(--t-small); }
.g3d .g3d-q-buzz { color: var(--gold); font-size: var(--t-small); white-space: nowrap; }
.g3d .g3d-q-state { font-family: var(--display); font-size: var(--t-label); line-height: 1.4; letter-spacing: 0.04em; text-transform: uppercase; color: var(--screen-dim); text-align: right; }
.g3d .g3d-q-state.is-done { color: var(--g3d-money); }

/* the career timeline */
.g3d .g3d-tl { display: grid; margin-top: 12px; }
.g3d .g3d-tl-i { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding-bottom: 16px; }
.g3d .g3d-tl-i::before { content: ''; position: absolute; left: 19px; top: 22px; bottom: -2px; width: 2px; background: var(--g3d-line); }
.g3d .g3d-tl-i:last-child::before { display: none; }
.g3d .g3d-tl-i.is-future::before { background: repeating-linear-gradient(180deg, var(--g3d-rule) 0 4px, transparent 4px 8px); }
.g3d .g3d-tl-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; margin: 2px 0 0 9px; background: var(--co, var(--screen-dim)); border: 3px solid var(--screen); box-shadow: 0 0 0 2px var(--co, var(--g3d-line)); color: var(--screen-dim); }
.g3d .g3d-tl-i.is-future .g3d-tl-dot { background: var(--screen); box-shadow: 0 0 0 2px var(--g3d-line); }
.g3d .g3d-tl-i.is-future .g3d-pix { width: 12px; }
.g3d .g3d-tl-i.is-current .g3d-tl-dot { animation: g3d-pn-ring 1.8s steps(3) infinite; }
@keyframes g3d-pn-ring { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--co) 45%, transparent); } }
.g3d .g3d-tl-body { display: grid; gap: 4px; padding: 10px 14px 12px; border: 2px solid var(--g3d-line); background: color-mix(in srgb, var(--screen-ink) 3%, transparent); }
.g3d .g3d-tl-i.is-current .g3d-tl-body { border-color: var(--co); background: color-mix(in srgb, var(--co) 10%, transparent); }
.g3d .g3d-tl-i.is-future .g3d-tl-body { border-style: dashed; background: transparent; }
.g3d .g3d-tl-body .g3d-label { display: flex; align-items: center; gap: 4px; }
.g3d .g3d-tl-body .g3d-tag { margin-left: 8px; }
.g3d .g3d-tl-co { font-family: var(--display); font-size: var(--t-g3d-title); line-height: 1.4; color: var(--screen-ink); }
.g3d .g3d-tl-co.is-sealed { font-family: var(--sans); font-size: var(--t-small); color: var(--screen-dim); }
.g3d .g3d-tl-role { font-size: var(--t-small); color: var(--screen-dim); }
.g3d .g3d-tl-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; font-size: var(--t-small); color: var(--screen-dim); margin-top: 4px; }
.g3d .g3d-tl-stats b { color: var(--screen-ink); }
.g3d .g3d-tl-stats b.g3d-money { color: var(--g3d-money); }
.g3d .g3d-tl-stats b.g3d-warm { color: var(--g3d-warm); }
.g3d .g3d-tl-grades { display: inline-flex; align-items: center; }

/* -------------------------------------------------------------- settings */
.g3d .g3d-sets { display: grid; }
.g3d .g3d-set {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 28px; align-items: center;
  margin: 0; padding: 14px 0; min-width: 0; border: 0; border-bottom: 2px dotted var(--g3d-rule);
}
.g3d .g3d-set > legend { float: left; padding: 0; grid-column: 1; }
.g3d .g3d-set > .g3d-set-hint { grid-column: 1; }
.g3d .g3d-set > .g3d-seg { grid-column: 2; grid-row: 1 / span 2; }
.g3d .g3d-set-text { display: grid; gap: 4px; }
.g3d .g3d-set-label { font-size: var(--t-body); color: var(--screen-ink); }
.g3d .g3d-set-hint { font-size: var(--t-small); color: var(--screen-dim); }
.g3d .g3d-set-ctl { display: inline-flex; align-items: center; justify-content: flex-end; gap: 12px; }
.g3d .g3d-set-out, .g3d .g3d-switch-state { min-width: 4.4em; text-align: right; font-family: var(--display); font-size: var(--t-label); color: var(--gold); }
.g3d .g3d-switch-state { min-width: 2.6em; text-align: left; color: var(--screen-dim); }

.g3d .g3d-book input[type="range"], .g3d .g3d-photo-dock input[type="range"] {
  width: min(280px, 30vw); height: 26px; margin: 0; background: transparent; appearance: none; cursor: pointer;
}
.g3d input[type="range"]::-webkit-slider-runnable-track {
  height: 10px; border: 2px solid var(--g3d-edge);
  background: linear-gradient(90deg, var(--gold) var(--fill, 50%), color-mix(in srgb, var(--screen-ink) 10%, transparent) var(--fill, 50%));
}
.g3d input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 16px; height: 24px; margin-top: -9px;
  background: var(--screen-ink); border: 3px solid var(--screen); box-shadow: 2px 2px 0 color-mix(in srgb, var(--g3d-shade) 85%, transparent);
}
.g3d input[type="range"]::-moz-range-track { height: 6px; border: 2px solid var(--g3d-edge); background: color-mix(in srgb, var(--screen-ink) 10%, transparent); }
.g3d input[type="range"]::-moz-range-progress { height: 6px; background: var(--gold); }
.g3d input[type="range"]::-moz-range-thumb { width: 12px; height: 20px; border: 3px solid var(--screen); border-radius: 0; background: var(--screen-ink); }
.g3d input[type="range"]:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

.g3d .g3d-switch {
  position: relative; width: 54px; height: 30px; margin: 0; appearance: none; cursor: pointer;
  background: var(--g3d-well); border: 2px solid var(--g3d-edge);
}
.g3d .g3d-switch::before {
  content: ''; position: absolute; top: 4px; left: 4px; width: 18px; height: 18px;
  background: var(--screen-dim); box-shadow: 2px 2px 0 color-mix(in srgb, var(--g3d-shade) 80%, transparent); transition: translate 0.12s var(--g3d-ease);
}
.g3d .g3d-switch:checked { background: color-mix(in srgb, var(--g3d-money) 22%, transparent); border-color: var(--g3d-money); }
.g3d .g3d-switch:checked::before { translate: 24px 0; background: var(--g3d-money); }
.g3d .g3d-switch:checked + .g3d-switch-state { color: var(--g3d-money); }
.g3d .g3d-switch:disabled { cursor: not-allowed; border-style: dashed; }
.g3d .g3d-switch:disabled::before { box-shadow: none; }
.g3d .g3d-set.is-forced .g3d-set-hint { color: var(--gold); }
.g3d .g3d-set-toggle .g3d-set-ctl { flex-direction: row; }

.g3d .g3d-seg { display: inline-flex; flex-wrap: wrap; border: 2px solid var(--g3d-edge); background: var(--g3d-well); }
.g3d .g3d-seg-i { position: relative; display: inline-flex; }
.g3d .g3d-seg-i + .g3d-seg-i { border-left: 2px solid var(--g3d-rule); }
.g3d .g3d-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.g3d .g3d-seg label, .g3d .g3d-seg-btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 36px; min-width: 52px; padding: 6px 12px;
  font-family: var(--display); font-size: var(--t-label); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--screen-dim); background: none; border: 0; cursor: pointer;
}
.g3d .g3d-seg-btn small { font-family: var(--sans); font-size: var(--t-small); letter-spacing: 0; text-transform: none; color: var(--screen-dim); }
.g3d .g3d-seg label:hover, .g3d .g3d-seg-btn:hover { color: var(--screen-ink); }
.g3d .g3d-seg input:checked + label, .g3d .g3d-seg-i.is-on label { color: var(--screen); background: var(--gold); }
.g3d .g3d-seg input:focus-visible + label { outline: 3px solid var(--cyan); outline-offset: 2px; position: relative; z-index: 1; }
.g3d .g3d-seg-i.is-near .g3d-seg-btn { color: var(--gold); box-shadow: inset 0 -3px 0 var(--gold); }
.g3d .g3d-set-time { grid-template-columns: minmax(0, 1fr) auto; }

.g3d .g3d-danger { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 24px; border: 2px dashed color-mix(in srgb, var(--g3d-warm) 55%, transparent); }
.g3d .g3d-danger .g3d-label { color: var(--g3d-warm); margin-bottom: 6px; }
.g3d .g3d-danger .g3d-dim { font-size: var(--t-small); }

.g3d .g3d-confirm {
  width: min(560px, calc(100vw - 40px)); padding: 22px 26px 22px; margin: auto;
  color: var(--screen-ink); background: var(--g3d-field); border: 3px solid var(--g3d-warm); box-shadow: 8px 8px 0 color-mix(in srgb, var(--g3d-shade) 80%, transparent);
  font-family: var(--sans); font-size: var(--t-body); pointer-events: auto;
}
.g3d .g3d-confirm::backdrop { background: color-mix(in srgb, var(--g3d-shade) 55%, transparent); }
.g3d .g3d-book .g3d-confirm > * + * { margin-top: 12px; }
.g3d .g3d-book .g3d-confirm-title { font-family: var(--display); font-size: var(--t-g3d-title); line-height: 1.6; font-weight: 400; margin-top: 10px; }
.g3d .g3d-book .g3d-confirm-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 22px; }

/* -------------------------------------------------------------- controls */
.g3d .g3d-board {
  --k: 30px; display: grid; gap: 4px; width: max-content; max-width: 100%; margin: 0 auto 20px; padding: 14px 16px;
  border: 2px solid var(--g3d-line); background: var(--g3d-well); box-shadow: var(--g3d-hard); overflow: hidden;
}
.g3d .g3d-board-row { display: flex; gap: 4px; }
.g3d .g3d-board-key, .g3d .g3d-board-gap { flex: none; width: calc(var(--u) * var(--k) + (var(--u) - 1) * 4px); height: var(--k); }
.g3d .g3d-board-key {
  display: grid; place-items: center; overflow: hidden; font-family: var(--display); font-size: var(--t-label); letter-spacing: -0.04em; color: var(--screen-dim);
  background: color-mix(in srgb, var(--screen-ink) 5%, transparent); border: 2px solid color-mix(in srgb, var(--screen-ink) 20%, transparent); border-bottom-width: 4px;
  transition: translate 0.1s var(--g3d-ease), background 0.1s var(--g3d-ease);
}
.g3d .g3d-board-key.is-move { --kc: var(--cyan); }
.g3d .g3d-board-key.is-act { --kc: var(--gold); }
.g3d .g3d-board-key.is-pitch { --kc: var(--g3d-warm); }
.g3d .g3d-board-key.is-panels { --kc: var(--g3d-money); }
.g3d .g3d-board-key.is-camera { --kc: var(--g3d-violet); }
.g3d .g3d-board-key[class*=" is-"] { color: var(--kc); border-color: var(--kc); }
.g3d .g3d-board-key.is-lit { color: var(--screen); background: var(--kc); translate: 0 -2px; }
.g3d .g3d-keygroups { display: grid; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); gap: 14px; }
.g3d .g3d-keygroup { padding: 12px 14px 14px; border: 2px solid var(--g3d-line); border-top: 4px solid var(--kc); background: color-mix(in srgb, var(--screen-ink) 3%, transparent); }
.g3d .g3d-keygroup.is-cyan { --kc: var(--cyan); }
.g3d .g3d-keygroup.is-gold { --kc: var(--gold); }
.g3d .g3d-keygroup.is-pink { --kc: var(--g3d-warm); }
.g3d .g3d-keygroup.is-green { --kc: var(--g3d-money); }
.g3d .g3d-keygroup.is-violet { --kc: var(--g3d-violet); }
.g3d .g3d-kg-h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-family: var(--display); font-size: var(--t-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--kc); font-weight: 400; }
.g3d .g3d-kg-list { display: grid; grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr); gap: 10px 16px; align-items: center; }
.g3d .g3d-kg-list dt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.g3d .g3d-kg-list dd { font-size: var(--t-small); line-height: 1.4; color: var(--screen-ink); }
.g3d .g3d-or { margin: 0 8px 0 4px; font-size: var(--t-small); color: var(--screen-dim); }

.g3d .g3d-mice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.g3d .g3d-mouse-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px; border: 2px solid var(--g3d-line); background: color-mix(in srgb, var(--screen-ink) 3%, transparent); }
.g3d .g3d-mouse-card h3 { color: var(--gold); margin-bottom: 8px; }
.g3d .g3d-mouse-card p { font-size: var(--t-small); }
.g3d .g3d-mouse-art { display: grid; place-items: center; height: 112px; background: var(--g3d-well); border: 2px solid var(--g3d-rule); }
.g3d .g3d-mouse .o { fill: var(--screen-ink); }
.g3d .g3d-mouse .b { fill: var(--g3d-key-top); }
.g3d .g3d-mouse .w { fill: var(--screen-dim); }
.g3d .g3d-mouse .hi { fill: var(--gold); }

.g3d .g3d-how { display: grid; gap: 14px; counter-reset: none; }
.g3d .g3d-how-step { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; padding: 14px 16px; border: 2px solid var(--g3d-line); background: color-mix(in srgb, var(--screen-ink) 3%, transparent); }
.g3d .g3d-how-step p { font-size: var(--t-body); }
.g3d .g3d-how-step p + p { margin-top: 6px; }
.g3d .g3d-how-n { display: grid; place-items: center; align-content: center; gap: 6px; width: 64px; height: 64px; font-family: var(--display); font-size: var(--t-figure); color: var(--screen); background: var(--gold); box-shadow: var(--g3d-hard); }
.g3d .g3d-how-n .g3d-pix { width: 20px; }
.g3d .g3d-how-title { font-family: var(--display); font-size: var(--t-g3d-title); line-height: 1.4; font-weight: 400; color: var(--screen-ink); }
.g3d .g3d-how-step .g3d-how-where { font-size: var(--t-label); color: var(--gold); margin: 6px 0 8px; }
.g3d .g3d-tips { margin-top: 18px; }
.g3d .g3d-tips ul { display: grid; gap: 6px; }
.g3d .g3d-tips li { position: relative; padding-left: 18px; font-size: var(--t-small); }
.g3d .g3d-tips li::before { content: ''; position: absolute; left: 0; top: 0.45em; width: 8px; height: 8px; background: var(--gold); }
.g3d .g3d-more { margin-top: 16px; border: 2px solid var(--g3d-line); padding: 0 14px; }
.g3d .g3d-more summary { display: flex; align-items: center; min-height: 40px; cursor: pointer; font-family: var(--display); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.06em; color: var(--screen-ink); }
.g3d .g3d-more[open] summary { border-bottom: 2px dotted var(--g3d-rule); margin-bottom: 12px; }
.g3d .g3d-more dl { padding-bottom: 14px; }
.g3d .g3d-more code { font-family: var(--sans); font-size: var(--t-small); color: var(--cyan); background: none; }

/* ------------------------------------------------------------ photo mode */
.g3d .g3d-photo-layer, .g3d-ui > .g3d-photo-layer { position: fixed; inset: 0; z-index: 40; pointer-events: none; outline: none; }
.g3d .g3d-photo-layer[hidden] { display: none; }
.g3d.g3d-photo .g3d-canvas { cursor: grab; }
.g3d.g3d-photo-drag .g3d-canvas { cursor: grabbing; }
.g3d .g3d-photo-dock {
  pointer-events: auto; position: absolute; left: 14px; top: 14px; width: 344px; max-width: calc(100vw - 28px); max-height: calc(100vh - 28px);
  display: flex; flex-direction: column; padding: 0;
  color: var(--screen-ink); font-family: var(--sans); font-size: var(--t-small);
  background: color-mix(in srgb, var(--g3d-deep) 78%, transparent); backdrop-filter: blur(16px) saturate(1.3);
  border: 2px solid var(--g3d-line); box-shadow: 6px 6px 0 color-mix(in srgb, var(--g3d-shade) 60%, transparent), inset 0 1px 0 color-mix(in srgb, var(--screen-ink) 8%, transparent);
}
.g3d .g3d-photo-dock::before {
  content: ''; position: absolute; inset: -2px; pointer-events: none;
  background:
    linear-gradient(var(--gold), var(--gold)) left top / 12px 2px, linear-gradient(var(--gold), var(--gold)) left top / 2px 12px,
    linear-gradient(var(--gold), var(--gold)) right bottom / 12px 2px, linear-gradient(var(--gold), var(--gold)) right bottom / 2px 12px;
  background-repeat: no-repeat;
}
.g3d .g3d-photo-dock[hidden] { display: none; }
.g3d .g3d-pscroll {
  display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 14px 14px 16px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--gold) 70%, transparent) transparent;
}
.g3d .g3d-photo-dock :where(p, h2) { margin: 0; }
.g3d .g3d-phead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.g3d .g3d-photo-title { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-size: var(--t-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); font-weight: 400; white-space: nowrap; }
.g3d .g3d-phide { display: inline-flex; align-items: center; gap: 2px; color: var(--screen-dim); white-space: nowrap; }
.g3d .g3d-photo-keys { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; color: var(--screen-ink); }
.g3d .g3d-photo-keys li { display: flex; align-items: center; gap: 2px; white-space: nowrap; }
.g3d .g3d-photo-dock .g3d-key { min-width: 24px; height: 24px; margin: 0 2px 0 0; }
.g3d .g3d-photo-help { color: var(--screen-dim); line-height: 1.4; }
/* the three tool tabs */
.g3d .g3d-ptabs { display: flex; gap: 4px; padding-top: 12px; border-top: 2px dotted var(--g3d-rule); }
.g3d .g3d-ptab {
  flex: 1; min-height: 34px; padding: 7px 8px 6px; font-family: var(--display); font-size: var(--t-label); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--screen-dim); background: color-mix(in srgb, var(--screen-ink) 4%, transparent); border: 2px solid var(--g3d-line); cursor: pointer;
}
.g3d .g3d-ptab:hover { color: var(--screen-ink); border-color: var(--g3d-edge); }
.g3d .g3d-ptab[aria-selected="true"] { color: var(--screen); background: var(--gold); border-color: var(--gold); box-shadow: 2px 2px 0 color-mix(in srgb, var(--g3d-shade) 75%, transparent); }
.g3d .g3d-ppanel { display: grid; align-content: start; gap: 8px; min-width: 0; }
.g3d .g3d-psub { font-family: var(--display); font-size: var(--t-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-top: 2px; }
.g3d .g3d-pbtns { display: flex; flex-wrap: wrap; gap: 4px; }
.g3d .g3d-pbtn {
  min-height: 32px; padding: 6px 6px 5px; font-family: var(--display); font-size: var(--t-label); letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap;
  color: var(--screen-ink); background: color-mix(in srgb, var(--screen-ink) 6%, transparent); border: 2px solid color-mix(in srgb, var(--screen-ink) 34%, transparent); cursor: pointer;
}
.g3d .g3d-pbtn:hover { border-color: var(--screen-ink); }
.g3d .g3d-pbtn[aria-pressed="true"] { color: var(--screen); background: var(--gold); border-color: var(--gold); }
.g3d .g3d-pbtn:active { translate: 1px 1px; }
.g3d .g3d-prange { display: flex; align-items: center; gap: 10px; }
.g3d .g3d-prange label { font-family: var(--display); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold); min-width: 3.4em; }
.g3d .g3d-prange output { font-family: var(--display); font-size: var(--t-label); color: var(--screen-ink); min-width: 5.6em; text-align: right; white-space: nowrap; }
.g3d .g3d-prange output.is-auto { color: var(--cyan); }
.g3d .g3d-photo-dock input[type="range"] { flex: 1; width: auto; min-width: 0; }
/* save and exit, side by side */
.g3d .g3d-pgo { display: flex; gap: 8px; padding-top: 12px; border-top: 2px dotted var(--g3d-rule); }
.g3d .g3d-psave, .g3d .g3d-pexit { min-height: 44px; padding: 8px 10px; }
.g3d .g3d-psave { flex: 1.6; justify-content: space-between; }
.g3d .g3d-pexit { flex: 1; justify-content: space-between; color: var(--screen-ink); border-color: var(--g3d-edge); background: transparent; }
.g3d .g3d-psave .g3d-key { color: var(--screen-ink); }

.g3d .g3d-photo-status {
  position: absolute; top: 16px; left: 50%; translate: -50% 0; margin: 0; padding: 8px 14px; white-space: nowrap;
  font-family: var(--display); font-size: var(--t-label); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--screen-ink); background: color-mix(in srgb, var(--g3d-deep) 82%, transparent); border: 2px solid var(--g3d-line);
}
.g3d .g3d-photo-status:empty { padding: 0; border: 0; background: none; }
.g3d .g3d-photo-flash { position: absolute; inset: 0; background: var(--receipt); opacity: 0; }
.g3d .g3d-photo-flash.is-on { animation: g3d-pn-flash 0.5s ease-out; }
@keyframes g3d-pn-flash { 0% { opacity: 0.85; } 100% { opacity: 0; } }
.g3d .g3d-photo-grid { position: absolute; inset: 0; display: none; }
.g3d .g3d-photo-grid.is-on { display: block; }
.g3d .g3d-photo-grid i { position: absolute; background: color-mix(in srgb, var(--screen-ink) 40%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--screen) 25%, transparent); }
.g3d .g3d-photo-grid i:nth-child(1) { left: 33.333%; top: 0; bottom: 0; width: 1px; }
.g3d .g3d-photo-grid i:nth-child(2) { left: 66.667%; top: 0; bottom: 0; width: 1px; }
.g3d .g3d-photo-grid i:nth-child(3) { top: 33.333%; left: 0; right: 0; height: 1px; }
.g3d .g3d-photo-grid i:nth-child(4) { top: 66.667%; left: 0; right: 0; height: 1px; }
.g3d .g3d-photo-thumb {
  position: absolute; top: 16px; right: 18px; width: 230px; margin: 0; padding: 8px 8px 10px; rotate: 2.5deg;
  background: var(--receipt); box-shadow: 6px 6px 0 color-mix(in srgb, var(--g3d-shade) 60%, transparent);
}
.g3d .g3d-photo-thumb[hidden] { display: none; }
.g3d .g3d-photo-thumb img { display: block; width: 100%; height: auto; border: 1px solid color-mix(in srgb, var(--receipt-ink) 30%, transparent); }
.g3d .g3d-photo-thumb figcaption { margin-top: 6px; font-size: var(--t-small); line-height: 1.4; color: var(--receipt-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g3d .g3d-photo-thumb.is-in { animation: g3d-pn-drop 0.36s var(--g3d-ease) both; }
@keyframes g3d-pn-drop { from { translate: 0 -24px; opacity: 0; } }
.g3d .g3d-photo-peek {
  position: absolute; left: 50%; top: 64px; translate: -50% 0; margin: 0; padding: 8px 14px; opacity: 0;
  font-family: var(--display); font-size: var(--t-label); text-transform: uppercase; color: var(--screen-ink); background: color-mix(in srgb, var(--g3d-deep) 82%, transparent); border: 2px solid var(--g3d-line);
}
.g3d .g3d-photo-peek.is-on { animation: g3d-pn-peek 2.6s var(--g3d-ease) both; }
@keyframes g3d-pn-peek { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* the free-camera badge */
.g3d .g3d-freecam, .g3d-ui > .g3d-freecam {
  position: fixed; top: 14px; left: 50%; translate: -50% 0; z-index: 35; margin: 0; pointer-events: none;
  display: flex; align-items: center; gap: 12px; padding: 7px 14px; white-space: nowrap;
  font-family: var(--display); font-size: var(--t-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--cyan);
  background: var(--g3d-glass); border: 2px solid var(--cyan); box-shadow: 4px 4px 0 color-mix(in srgb, var(--g3d-shade) 60%, transparent);
}
.g3d .g3d-freecam[hidden] { display: none; }
.g3d .g3d-freecam-dot { width: 10px; height: 10px; background: var(--magenta); animation: g3d-pn-rec 1.2s steps(2) infinite; }
@keyframes g3d-pn-rec { 50% { background: transparent; } }
.g3d .g3d-freecam-keys { display: inline-flex; align-items: center; gap: 14px; padding-left: 12px; border-left: 2px solid var(--g3d-line); font-family: var(--sans); font-size: var(--t-small); letter-spacing: 0; text-transform: none; color: var(--screen-ink); }
.g3d .g3d-freecam-keys > span { display: inline-flex; align-items: center; gap: 2px; }
.g3d .g3d-freecam-keys .g3d-key { min-width: 24px; height: 24px; margin: 0 2px 0 0; }
.g3d.g3d-photo .g3d-freecam { display: none; }

/* ------------------------------------------------------ size and motion */
@media (max-width: 900px) {
  .g3d .g3d-book { width: calc(100vw - 16px); height: calc(100vh - 16px); }
  .g3d .g3d-book-sec-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .g3d .g3d-w-hero { grid-template-columns: 1fr; }
  .g3d .g3d-records { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3d .g3d-mice { grid-template-columns: 1fr; }
  .g3d .g3d-q { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .g3d .g3d-q-state { grid-column: 2 / -1; text-align: left; }
  .g3d .g3d-set { grid-template-columns: 1fr; }
  .g3d .g3d-set > .g3d-seg { grid-column: 1; grid-row: auto; }
  .g3d .g3d-set-ctl { justify-content: flex-start; }
}
@media (max-height: 560px) {
  .g3d .g3d-book-head { padding-top: 10px; }
  .g3d .g3d-book-sub { display: none; }
}
@media (max-height: 600px) {
  .g3d .g3d-pscroll { gap: 8px; padding: 10px 12px 12px; }
  .g3d .g3d-photo-keys { display: none; }                  /* the help line and the Controls page still name the keys */
  .g3d .g3d-ptabs, .g3d .g3d-pgo { padding-top: 8px; }
  .g3d .g3d-psave, .g3d .g3d-pexit { min-height: 36px; }
}
/* Touch: every control is at least 44px (WCAG 2.5.5), switches and sliders included. */
@media (pointer: coarse) {
  .g3d .g3d-tab, .g3d .g3d-btn, .g3d .g3d-pbtn, .g3d .g3d-ptab, .g3d .g3d-book-sec, .g3d .g3d-book-x, .g3d .g3d-seg label, .g3d .g3d-seg-btn,
  .g3d .g3d-book select, .g3d .g3d-more summary, .g3d .g3d-clip-link { min-height: 44px; }
  .g3d .g3d-book input[type="range"], .g3d .g3d-photo-dock input[type="range"] { height: 44px; }
  .g3d .g3d-switch { width: 72px; height: 44px; }
  .g3d .g3d-switch::before { top: 5px; left: 5px; width: 30px; height: 30px; }
  .g3d .g3d-switch:checked::before { translate: 28px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .g3d .g3d-book *, .g3d .g3d-book, .g3d .g3d-photo-layer *, .g3d .g3d-freecam * { animation: none !important; transition: none !important; }
}
.g3d-reduced-motion .g3d .g3d-book *, .g3d-reduced-motion .g3d .g3d-book,
.g3d-reduced-motion .g3d .g3d-photo-layer *, .g3d-reduced-motion .g3d .g3d-freecam *,
.g3d .g3d-book.is-still, .g3d .g3d-book.is-still * { animation: none !important; transition: none !important; }