/* Layout: the globe is the whole page. Full-bleed, no scrolling, as little on top of the map as possible. Single dark look by design. */
:root {
  --night: #060b14;
  --panel: #0b1522;
  --line: #1f3550;
  --fg: #e6edf6;
  --muted: #8ea3bb;
  --diesel: #e2a53c;
  --lit: #f5f8fd;
  --ice: #8fc3ff;
  --none: #5d6f84;
  --mine: #ff8a65;
  --display: "Saira Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme: dark;
  --sky: #6394e3;      /* the top of the Toronto shot's sky */
  --bleed: 0px;        /* how far the stage hangs below the visible area (iPhone, see html.bleed) */
  --lift: 0px;         /* how far the browser's own bottom toolbar covers the page */
  --top: 0px;          /* how far the stage starts above the visible area (iPhone, see html.bleed) */
}
@supports (height: 100lvh) { :root { --lift: calc(100lvh - 100svh); } }
html, body { background: var(--night); color: var(--fg); height: 100%; overflow: hidden; overscroll-behavior: none; }
html.sky, html.sky body, html.sky .stage { background: var(--sky); }
/* iPhone (html.bleed, set in the head): Safari only draws page content behind its clock bar and toolbar when
   the page is taller than the screen and scrolled, so the stage runs 160px past the screen and the page sits
   scrolled down 70px, locked. The controls are lifted by how far the stage hangs below the visible area. */
html.bleed { --bleed: 90px; --top: 70px; }
html.bleed, html.bleed body { height: auto; overflow: visible; }
html.bleed body { min-height: calc(100lvh + 160px); }
html.bleed .stage { position: absolute; height: calc(100lvh + 160px); }
html.bleed .card { max-height: calc(100svh - 120px); }
[hidden] { display: none !important; }
body { font-family: var(--body); font-size: 15px; line-height: 1.5; margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--diesel); margin: 0; }
h1 { font-family: var(--display); font-weight: 700; font-size: clamp(38px, 7vw, 68px); line-height: .95; letter-spacing: .01em; text-transform: uppercase; margin: 6px 0 8px; text-wrap: balance; }
.lede { margin: 0; color: var(--muted); max-width: 64ch; }
.lede b, .how b { color: var(--lit); font-weight: 600; }
.lede { color: var(--fg); font-size: 16.5px; }
.how { margin: 6px 0 0; color: var(--muted); max-width: 64ch; font-size: 14px; }
.consent { margin: 8px 0 0; font-size: 13px; color: var(--fg); border-left: 2px solid var(--diesel); padding-left: 10px; }

.stage { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; overflow: hidden; background: var(--night); }
#globe { position: absolute; inset: 0; }
.static { position: absolute; inset: 0; z-index: 1; background: var(--night); display: grid; grid-template-rows: 1fr auto; }
.static img { width: 100%; height: 100%; min-height: 0; object-fit: cover; display: block; }
.stage.nogl .play { display: none; }
.static p { margin: 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom) + var(--lift) + var(--bleed)); font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); }

.hud { position: absolute; top: 14px; left: 14px; z-index: 2; box-sizing: border-box; background: rgba(6,11,20,.78); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 8px; max-width: calc(100% - 28px); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: opacity .6s ease, transform .6s ease; }
.hud .at { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.hud .at b { color: var(--lit); font-weight: 500; }
.stats { display: grid; grid-template-columns: repeat(4, auto); gap: 4px 18px; }
.stat .v { font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1; color: var(--lit); font-variant-numeric: tabular-nums; }
.stat .k { font-size: 11.5px; color: var(--muted); max-width: 17ch; line-height: 1.3; }
.stat.hi { border-right: 1px solid var(--line); padding-right: 16px; }
.stat.hi .v { color: var(--ice); font-size: 34px; }

.card { position: absolute; left: 14px; bottom: calc(34px + env(safe-area-inset-bottom) + var(--lift) + var(--bleed)); z-index: 3; box-sizing: border-box; width: min(320px, calc(100% - 28px)); max-height: calc(100% - 48px); overflow: auto; background: rgba(11,21,34,.96); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 6px; }
.card h2 { font-family: var(--display); font-size: 22px; font-weight: 600; margin: 0; line-height: 1.05; padding-right: 24px; }
.card .prov { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.card dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 4px 0 0; font-size: 13px; }
.card dt { color: var(--muted); }
.card dd { margin: 0; text-align: right; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.card a { color: var(--ice); }
.card .verdict { font-size: 12.5px; margin-top: 4px; }
.card > button { position: absolute; top: 8px; right: 8px; background: transparent; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; line-height: 1; padding: 4px; }

.zoom { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); z-index: 2; display: grid; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: rgba(6,11,20,.78); }
.zoom button { width: 36px; height: 36px; font-family: var(--mono); font-size: 18px; line-height: 1; color: var(--fg); background: transparent; border: 0; cursor: pointer; }
.zoom button + button { border-top: 1px solid var(--line); }
.zoom button:hover { background: rgba(143,195,255,.12); }

button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }

/* Controls under the globe */
.controls { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: grid; gap: 12px; }
.controls .row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.controls label, .ctl-k { font-family: var(--display); font-size: 20px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.controls output { font-family: var(--mono); font-size: 22px; color: var(--lit); font-variant-numeric: tabular-nums; }
.controls output small { font-size: 13px; color: var(--muted); }
input[type="range"] { width: 100%; accent-color: var(--ice); height: 28px; margin: 0; }
.ticks { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: -6px; }
.ctls { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px 28px; border-top: 1px solid var(--line); padding-top: 12px; }
.ctl { display: grid; gap: 6px; align-content: start; }
.ctl-k { font-size: 16px; }
.ctl-n { font-size: 12px; color: var(--muted); }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { font-family: var(--mono); font-size: 12px; letter-spacing: .03em; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 8px; padding: 7px 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.seg button:hover { border-color: #2e4c6f; color: var(--fg); }
.seg button[aria-pressed="true"] { color: var(--night); background: var(--ice); border-color: var(--ice); }
.seg .cnt { opacity: .7; }
.mk { display: inline-block; width: 11px; height: 11px; }
.mk.dia { background: var(--ice); transform: rotate(45deg) scale(.82); border-radius: 1px; }
.mk.tri { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 11px solid var(--mine); }
.seg button[aria-pressed="true"] .mk.dia { background: var(--night); }
.seg button[aria-pressed="true"] .mk.tri { border-bottom-color: var(--night); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.legend i.glow { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.28); width: 7px; height: 7px; margin: 0 2px; }
.gen-note { margin: 0; font-size: 12px; color: var(--muted); }
.gen-note:empty { display: none; }

/* Tables */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: grid; gap: 10px; }
.sec { font-family: var(--display); font-size: 24px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; margin: 0; line-height: 1.05; }
.summary { margin: 0; max-width: 80ch; color: var(--fg); }
.summary:empty { display: none; }
.foot { margin: 0; font-size: 12.5px; color: var(--muted); max-width: 90ch; }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; min-width: 920px; border-collapse: collapse; font-size: 13px; }
.tbl.small { min-width: 620px; }
.tbl th { text-align: left; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; background: rgba(6,11,20,.5); }
.tbl td { padding: 8px 10px; border-bottom: 1px solid rgba(31,53,80,.6); vertical-align: top; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr[data-site], .tbl tbody tr[data-mine] { cursor: pointer; }
.tbl tbody tr[data-site]:hover, .tbl tbody tr[data-mine]:hover { background: rgba(143,195,255,.07); }
.tbl .num { text-align: right; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl td:nth-child(2), .tbl td:first-child { white-space: nowrap; }
.tbl tr.near td { color: var(--muted); }
.tbl tr.near b { color: var(--fg); font-weight: 500; }
.tbl tr.group td { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--diesel); background: rgba(226,165,60,.06); }
.tbl tr.empty td { color: var(--muted); }
.muted { color: var(--muted); }
.lit { color: var(--lit); font-weight: 600; }
.tag { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--night); background: var(--ice); border-radius: 4px; padding: 0 5px; margin-left: 4px; vertical-align: 1px; }

.notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 18px; }
.notes section { min-width: 0; }
.notes h3 { font-family: var(--display); font-size: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 6px; }
.notes p, .notes li { font-size: 13.5px; color: var(--muted); max-width: 65ch; }
.notes p { margin: 0 0 8px; }
.notes ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.notes a { color: var(--ice); text-underline-offset: 2px; word-break: break-word; }
.notes strong { color: var(--fg); font-weight: 600; }
.credit { font-size: 12px; color: var(--none); margin: 0; }

/* Cesium chrome */
#globe .cesium-viewer, #globe .cesium-widget { width: 100%; height: 100%; }
#globe .cesium-widget-credits { font-size: 10px; opacity: .75; }
#globe .cesium-viewer-bottom { left: 8px !important; right: 0; bottom: calc(4px + env(safe-area-inset-bottom) + var(--lift) + var(--bleed)) !important; }   /* Cesium sets these inline */
.loading { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .06em; pointer-events: none; }

/* Intro: the launch sequence over the Toronto shot (app.js countdown), in the opening title's language: heavy extended
   type over a line of light. PREPARE FOR LAUNCH, then 5 to 1 with the line burning down to its centre, then it
   launches by itself (the camera shake is app.js shakeStart). */
.play { position: absolute; left: 50%; bottom: calc(44px + env(safe-area-inset-bottom) + var(--lift) + var(--bleed)); z-index: 3; box-sizing: border-box; width: min(620px, calc(100vw - 48px)); height: clamp(116px, 12vw, 156px); margin: 0; padding: 0; border: 0; background: none; color: var(--lit); font: inherit; cursor: default; -webkit-tap-highlight-color: transparent; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%); transition: opacity .8s ease, visibility .8s; }
.stage.intro .play.counting { opacity: 1; visibility: visible; }
.play:focus-visible { outline: none; }
.lc-msg { position: absolute; left: 0; right: 0; bottom: 22px; display: block; text-align: center; white-space: nowrap; font-family: "Saira", var(--display); font-stretch: 125%; font-weight: 800; line-height: 1; text-transform: uppercase; color: var(--lit); text-shadow: 0 2px 22px rgba(0,0,0,.55); opacity: 0; transition: text-shadow .3s ease; }
.lc-msg span { display: inline-block; white-space: pre; }
.lc-prep { font-size: clamp(18px, 2.3vw, 32px); letter-spacing: .06em; padding-left: .06em; }
.lc-num { bottom: 16px; font-size: clamp(64px, 8.4vw, 120px); font-variant-numeric: tabular-nums; }
/* the line: a dim rail with the light on it (b); the light burns down to the centre over the count (app.js animates it,
   in step with the count's zero) */
.lc-line { position: absolute; left: 50%; bottom: 0; width: 0; height: 1px; transform: translateX(-50%); background: rgba(216,236,255,.26); transition: width .9s cubic-bezier(.16,1,.3,1); }
.lc-line > b { position: absolute; inset: 0; display: block; background: linear-gradient(90deg, rgba(160,205,255,0), #d8ecff 15%, #fff 50%, #d8ecff 85%, rgba(160,205,255,0)); box-shadow: 0 0 14px 1px rgba(143,195,255,.55); transition: transform .8s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
.play.counting .lc-line { width: 100%; }
.play.hold .lc-line { animation: lcWait 1.4s ease-in-out infinite; }
@keyframes lcWait { 50% { opacity: .35; } }
/* liftoff: the line runs out to the edges, like the title's, as the sequence goes */
.play.fired .lc-line { width: 100vw; transition: width .6s cubic-bezier(.6,0,.3,1); }
@media (prefers-reduced-motion: reduce) { .play.hold .lc-line { animation: none; } }
.stage:not(.intro) .play * { animation: none !important; }   /* nothing left running behind the globe */
/* Countdown in Liquid Glass (countglass.js, Ryan's "B1 smoked", Oct 14, 2026): Prepare for launch, 5 to 1 and Launch,
   cut from smoked glass, dead centre of what's visible. #play keeps the timing and the launch click; with the glass
   on (.cg) its old words and line stay hidden. Outside Chromium the glass is a darkened frost (no bend). */
.play.cg .lc-msg, .play.cg .lc-line { display: none; }
.cg-layer { position: absolute; left: 0; right: 0; top: var(--top); bottom: calc(var(--bleed) + var(--lift)); z-index: 3; pointer-events: none; }
.cg-g { position: absolute; left: 50%; top: 50%; translate: -50% -50%; opacity: 0; scale: 1.08; transition: opacity .4s ease, scale 1s cubic-bezier(.16,1,.3,1); }
.cg-g.on { opacity: 1; scale: 1; }
.cg-g.gone { opacity: 0; scale: .95; transition: opacity .32s ease, scale .32s ease; }
.cg-g > div { position: absolute; inset: 0; background-size: 100% 100%; }
.cg-glass { -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  background: linear-gradient(170deg, rgba(14,22,36,.36), rgba(8,14,24,.24) 55%, rgba(14,22,36,.3));
  -webkit-backdrop-filter: blur(6px) brightness(.48) saturate(1.35); backdrop-filter: blur(6px) brightness(.48) saturate(1.35); }
/* the dark fade at the foot of the shot that the launch sequence sits on */
.iv-scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 44%; z-index: 3; pointer-events: none; background: linear-gradient(to top, rgba(4,8,14,.72) 0%, rgba(4,8,14,.38) 42%, rgba(4,8,14,0) 100%); opacity: 0; transition: opacity 1.2s ease; }
.stage.intro .iv-scrim { opacity: 1; }
.stage.launched .iv-scrim { opacity: 0; transition-duration: .9s; }

/* Opening video (pre-rendered in Google Earth Studio). It covers the globe until the flight hands over. */
.intro-vid { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: var(--night); will-change: opacity; }
.iv-in { position: absolute; inset: 0; }
/* No autoplay (an iPhone in Low Power Mode): the still pans slowly side to side inside its crop, no zoom. */
.intro-vid.sway #vPoster { animation: ivPan 24s ease-in-out infinite; }
@keyframes ivPan {
  0%, 100% { object-position: 50% 50%; }
  25% { object-position: 47.5% 50%; }
  75% { object-position: 52.5% 50%; }
}
.intro-vid img, .intro-vid video, .intro-vid canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.intro-vid video.launch { z-index: 1; opacity: 0; }
/* iPhones won't play a video they consider hidden (opacity 0), so nothing is hidden that way: the still sits
   on top of the loop and fades out once the loop plays, and the chosen launch waits, visible, under the loop. */
#vHold, .intro-vid canvas.hold-canvas { z-index: 2; }
.intro-vid canvas.launch-canvas { z-index: 1; }
#vPoster { z-index: 3; transition: opacity .2s linear; }
.intro-vid.live #vPoster { opacity: 0; }
.vid-credit { position: absolute; z-index: 4; left: 12px; bottom: calc(8px + env(safe-area-inset-bottom) + var(--lift) + var(--bleed)); max-width: calc(50% - 190px); text-align: left; font-size: 10px; line-height: 1.3; color: rgba(255,255,255,.8); text-shadow: 0 1px 2px rgba(0,0,0,.7); pointer-events: none; }
.stage.vid .loading, .stage:has(#introVid) .loading { display: none; }
.stage.vid .zoom { opacity: 0; pointer-events: none; }
.stage.nogl #globe { display: none; }
/* No backdrop blur over the playing video: re-blurring every video frame costs smoothness. */
.stage.vid .hud { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(6,11,20,.86); }
@media (max-width: 640px) { .vid-credit { max-width: calc(100% - 24px); font-size: 9px; } }
/* Where the videos' own Google Earth logo is on screen (index.html fits it into the corner), that is the credit. */
.intro-vid .vid-credit { display: none; }   /* Ryan: no text credit over the opening */
.intro-vid .iv-fill.css-blur { filter: blur(10px); }   /* the launch shake's edge fill (app.js): a blurred copy of the shot behind it (blurred in the canvas itself where the browser can) */

@media (max-width: 760px) {
  .stats { grid-template-columns: repeat(2, auto); }
  .stat.hi { border-right: 0; padding-right: 0; }
}
@media (max-width: 640px) {
  .stats { gap: 6px 18px; }
  .card { left: 10px; width: calc(100% - 20px); }
  .play { bottom: calc(62px + env(safe-area-inset-bottom) + var(--lift) + var(--bleed)); width: calc(100vw - 40px); height: 120px; }
}

/* The trip to the Moon (app.js setupMoonTrip): a button by the globe swings the camera round to the Moon. */
.moon-go, .moon-back { position: absolute; top: 50%; z-index: 3; display: flex; align-items: center; gap: 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.24); background: rgba(6,11,20,.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 14px 40px rgba(0,0,0,.4); color: var(--fg); cursor: pointer; white-space: nowrap; font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s ease, transform .5s ease, visibility .5s, background .2s ease; }
.moon-go { top: calc(16px + env(safe-area-inset-top) + var(--top)); right: calc(16px + env(safe-area-inset-right)); gap: 6px; padding: 6px 8px 6px 6px; transform: translate(0, -8px); }
.moon-back { top: calc(16px + env(safe-area-inset-top) + var(--top)); left: calc(16px + env(safe-area-inset-left)); gap: 6px; padding: 6px 6px 6px 8px; transform: translate(0, -8px); }
.moon-go.on, .moon-back.on { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(0, 0); }
.moon-go:hover, .moon-back:hover { background: rgba(6,11,20,.78); }
.moon-go:focus-visible, .moon-back:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
.moon-go img, .moon-back img { width: 34px; height: 34px; border-radius: 50%; display: block; }
.moon-go svg, .moon-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.moon-view { position: absolute; left: 0; top: 0; z-index: 2; width: 0; height: 0; pointer-events: none; display: none; will-change: transform; --md: 320px; }
.moon-view.on { display: block; }
.moon-view img { position: absolute; left: calc(var(--md) / -2); top: calc(var(--md) / -2); width: var(--md); height: var(--md); display: block; }
.moon-soon { position: absolute; left: 0; bottom: calc(var(--md) / 2 + clamp(22px, 5vh, 44px)); margin: 0; transform: translateX(-50%); white-space: nowrap; font-family: "Michroma", var(--display); font-weight: 400; font-size: clamp(15px, 2.4vw, 30px); line-height: 1; letter-spacing: .34em; text-indent: .34em; text-transform: uppercase; color: var(--lit); text-shadow: 0 0 24px rgba(143,195,255,.35); opacity: 0; transition: opacity 1.4s ease, letter-spacing 1.8s cubic-bezier(.2,.7,.2,1), text-indent 1.8s cubic-bezier(.2,.7,.2,1); }
.moon-view.arrived .moon-soon { opacity: 1; letter-spacing: .22em; text-indent: .22em; }
.stage.vid .moon-go, .stage.intro .moon-go { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 640px) {
  .moon-go, .moon-back { font-size: 15px; }
  .moon-go { top: calc(12px + env(safe-area-inset-top) + var(--top)); right: calc(12px + env(safe-area-inset-right)); }
  .moon-back { top: calc(12px + env(safe-area-inset-top) + var(--top)); left: calc(12px + env(safe-area-inset-left)); }
}
@media (prefers-reduced-motion: reduce) { .moon-soon { transition: opacity .6s ease; } }

/* Remote sites (app.js setupSites): solid dots on the globe, a card with a Google Earth preview, and the visit. */
:root { --site: #a3121c; }
.site-dots { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s; }
.site-dots.on { opacity: 1; visibility: visible; }
.stage.visit .site-dots { transition: none; }   /* gone the moment a visit starts: they'd sit still while the globe flies */
.site-dot { position: absolute; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0; border: 0; background: transparent; cursor: pointer; pointer-events: auto; will-change: transform; -webkit-tap-highlight-color: transparent; }
.site-dots:not(.on) .site-dot { pointer-events: none; }
html.pov-open .site-dot { pointer-events: none; }   /* phone or laptop up: no hover cards or tips (they'd sit under it); a click there puts the device away */
.site-dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--site); box-shadow: 0 0 0 2px rgba(6,11,20,.6), 0 0 12px rgba(163,18,28,.55); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease; }
.site-dot:hover::before, .site-dot:focus-visible::before { transform: scale(1.4); }
.site-dot.sel::before { transform: scale(1.5); box-shadow: 0 0 0 2px var(--lit), 0 0 18px rgba(200,30,40,.8); }
.site-dot:focus-visible { outline: none; }
/* A site off screen: a smaller dot on the edge, with a chevron pointing its way (--ang from app.js). */
.site-dot.edge::before { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }
.site-dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border: solid var(--site); border-width: 2px 2px 0 0; opacity: 0; transform: rotate(var(--ang, 0rad)) translateX(11px) rotate(45deg); filter: drop-shadow(0 0 2px rgba(0,0,0,.8)); transition: opacity .25s ease; pointer-events: none; }
.site-dot.edge::after { opacity: 1; }
.site-dot.edge .tip { display: none; }
.site-dot .tip { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, 2px); white-space: nowrap; font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--lit); text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.6); opacity: 0; transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
@media (hover: hover) { .site-dot:hover .tip { opacity: 1; transform: translate(-50%, -2px); } }
@media (hover: hover) and (pointer: fine) {   /* the card itself opens on hover there (app.js hoverUI) */
  .site-dot .tip { display: none; }
  .site-dot { width: 22px; height: 22px; margin: -11px 0 0 -11px; }   /* hover area the size of the selected dot, so leaving it reads as leaving */
}
.site-dot.sel .tip { opacity: 0 !important; }
/* translate pins the card to its dot every frame (no transition, so it never trails the globe); transform only pops it in. */
.site-card { position: absolute; left: 0; top: 0; z-index: 4; width: 260px; box-sizing: border-box; padding: 6px; border-radius: 14px; border: 1px solid rgba(255,255,255,.22); background: rgba(6,11,20,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 18px 50px rgba(0,0,0,.5); color: var(--fg); opacity: 0; translate: var(--cx, 0px) var(--cy, 0px); transform: translateY(var(--dy, 8px)) scale(.97); transform-origin: var(--ox, 50%) var(--oy, 100%); transition: opacity .22s ease, transform .28s cubic-bezier(.2,.8,.2,1); will-change: transform, translate; }
.site-card.on { opacity: 1; transform: none; }
.site-card[hidden] { display: none; }
.sc-img { position: relative; border-radius: 9px; overflow: hidden; aspect-ratio: 16 / 9; background: #0b1522; }
.sc-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sc-body { display: flex; align-items: center; gap: 10px; padding: 9px 4px 3px 6px; }
.sc-text { flex: 1; min-width: 0; display: grid; gap: 3px; }
.sc-text b { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.02; letter-spacing: .05em; text-transform: uppercase; color: var(--lit); text-wrap: balance; }
.sc-text span { font-family: var(--mono); font-size: 11px; line-height: 1.3; color: var(--muted); letter-spacing: .03em; }
.sc-visit { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 8px 10px 8px 14px; border: 0; border-radius: 999px; background: var(--lit); color: var(--night); font-family: var(--display); font-weight: 700; font-size: 16px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: transform .15s ease, background .15s ease; }
.sc-visit:hover { background: #fff; transform: translateY(-1px); }
.sc-visit:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
.sc-visit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sc-visit.wait svg { animation: scWait 1s linear infinite; }
@keyframes scWait { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
/* The visit: the Google Earth shot sits over the globe, framed like the opening (index.html fitLogo). */
.site-vid { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: transparent; display: none; will-change: opacity; }
.site-vid.on { display: block; }
.site-vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; opacity: 0; }
.site-vid video.show { opacity: 1; }
.site-vid .sv-mix { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; display: none; }
.site-vid .sv-mix.on { display: block; }
.site-vid.logo-in .vid-credit { display: none; }
#svCredit { display: none !important; }   /* Ryan: no text credit over the site zoom-ins either */
/* The site's name, set in the upper-left quadrant (clear of the back button above it and of the phone and laptop,
   which come up from the bottom): coordinates over a short rule, the name, then where it is. */
.site-title { position: absolute; left: calc(clamp(28px, 6vw, 92px) + env(safe-area-inset-left)); top: calc(clamp(92px, 15vh, 150px) + env(safe-area-inset-top) + var(--top)); z-index: 3; margin: 0; max-width: min(62vw, 780px); display: grid; justify-items: start; gap: 10px; text-align: left; pointer-events: none; opacity: 0; transform: translate(-10px, 0); transition: opacity .9s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.site-title.on { opacity: 1; transform: none; }
.site-title i { display: flex; align-items: center; gap: 12px; font-style: normal; font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ice); text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.site-title i::before { content: ""; width: 34px; height: 1px; background: currentColor; box-shadow: 0 0 6px rgba(143,195,255,.6); transform-origin: left center; transform: scaleX(0); transition: transform 1s cubic-bezier(.2,.7,.2,1) .2s; }
.site-title.on i::before { transform: none; }
.site-title b { font-family: "Michroma", var(--display); font-weight: 400; font-size: clamp(19px, 2.5vw, 34px); line-height: 1.15; letter-spacing: .16em; text-transform: uppercase; color: var(--lit); text-shadow: 0 2px 18px rgba(0,0,0,.65), 0 0 2px rgba(0,0,0,.5); text-wrap: balance; clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.2,.7,.2,1) .15s; }
.site-title.on b { clip-path: inset(-20% -5% -20% 0); }
.site-title span { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(245,248,253,.85); text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.stage.visit .moon-go { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 640px) {
  .site-card { width: 236px; }
  .site-title { left: calc(20px + env(safe-area-inset-left)); top: calc(78px + env(safe-area-inset-top) + var(--top)); max-width: calc(100vw - 40px); gap: 7px; }
  .site-title b { font-size: 19px; letter-spacing: .12em; }
  .site-title i, .site-title span { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) { .site-card, .site-title, .site-title b, .site-title i::before { transition: opacity .3s ease; } }
/* Toronto's title over the opening (app.js torontoTitle): the ice coordinates vanish into a bright sky, so they go white */
.site-title.sky i { color: var(--lit); text-shadow: 0 1px 3px rgba(2,8,20,.6), 0 0 14px rgba(2,8,20,.35); }
.site-title.sky i::before { box-shadow: 0 1px 3px rgba(2,8,20,.5); }
.site-title.sky span { text-shadow: 0 1px 3px rgba(2,8,20,.6), 0 0 14px rgba(2,8,20,.35); }

/* The phone and laptop held in gloved hands (pov/pov.js, its own #pov layer over everything). No Put away button: a
   click anywhere off the device (or Esc) puts it away. The Moon button hides while a device is up. No model credits:
   only Cesium's and Google Earth's show. */
html.pov-open .moon-go { opacity: 0; visibility: hidden; pointer-events: none; }
#pov-credit { display: none !important; }
/* Ryan (Oct 14, 2026): no Cesium ion credit over the globe or the Moon; it shows only at a site. visibility, not display,
   so app.js creditsGap can still measure it. */
.stage:not(.visit) #globe .cesium-viewer-bottom { visibility: hidden; }
/* No hover words on the phone and laptop (pov.js draws a .pov-label over each one); the buttons keep their aria-labels. */
#pov .pov-label { display: none !important; }
/* The laptop peeks from the bottom-left corner and the phone from the bottom-right, with a clear strip between them
   (300 px, at most 42% of the width, from 700 px wide up). The map's credits sit in that strip, and at a site
   Google Earth's too: the video's own logo there is under the laptop. */
@media (min-width: 700px) {
  #globe .cesium-viewer-bottom { left: var(--cred-x, 50%) !important; right: auto !important; transform: translateX(-50%); }   /* --cred-x: the gap between the devices (app.js creditsGap) */
  html.pov-peek .site-vid.logo-in .vid-credit { display: block; }
  html.pov-peek .site-vid .vid-credit { left: var(--cred-x, 50%); transform: translateX(-50%); max-width: min(300px, 42vw); text-align: center; }
  /* no room between the devices: the map's credits go to the top centre (clear on the globe) */
  html.pov-peek:not(.pov-up) .stage.cred-top #globe .cesium-viewer-bottom { left: 50% !important; top: calc(28px + env(safe-area-inset-top) + var(--top)); bottom: auto !important; }
  /* with a device up the middle is taken and the bottom-left corner is clear: the credits go back there */
  html.pov-up #globe .cesium-viewer-bottom { left: 8px !important; transform: none; }
  html.pov-up .site-vid.logo-in .vid-credit { display: none; }
  html.pov-up .site-vid .vid-credit { left: 12px; transform: none; text-align: left; max-width: calc(50% - 190px); }
}
/* Under 700 px the phone peeks alone in the right 45%: the credits keep to the left of it, stacked. */
@media (max-width: 699px) {
  html.pov-peek:not(.pov-up) #globe .cesium-viewer-bottom { right: auto !important; max-width: calc(55vw - 20px); }
  html.pov-peek:not(.pov-up) .site-vid .vid-credit { max-width: calc(55vw - 24px); }
}

/* The opening title (index.html runs it): night, then a line of light under CSMC's leaf, which is drafted like a
   blueprint and flooded red from its stem while the wordmark slides in. The line runs out to
   the edges and the screen splits open along it onto Toronto, while the logo flies into the corner lockup (.brand). */
.reveal { position: absolute; inset: 0; z-index: 6; pointer-events: none; --lh: clamp(56px, 7.4vw, 104px); }
.rv-door { position: absolute; left: 0; right: 0; will-change: transform; transition: transform 1.05s cubic-bezier(.77,0,.18,1); }
.rv-top { top: 0; height: calc(var(--top) + (100% - var(--top) - var(--bleed) - var(--lift)) / 2); background: linear-gradient(to bottom, #03060b, #08111d); }
.rv-bot { bottom: 0; top: calc(var(--top) + (100% - var(--top) - var(--bleed) - var(--lift)) / 2); background: linear-gradient(to top, #03060b, #08111d); }
.rv-door::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(160,205,255,0), #cfe6ff 22%, #fff 50%, #cfe6ff 78%, rgba(160,205,255,0)); box-shadow: 0 0 16px 2px rgba(143,195,255,.55); opacity: 0; }
.rv-top::after { bottom: 0; }
.rv-bot::after { top: 0; }
.reveal.r5 .rv-top { transform: translateY(-101%); }
.reveal.r5 .rv-bot { transform: translateY(101%); }
.reveal.r5 .rv-door::after { animation: rvEdge 1.05s ease-out forwards; }
@keyframes rvEdge { 0% { opacity: 1; } 100% { opacity: 0; } }
.rv-view { position: absolute; left: 0; right: 0; top: var(--top); bottom: calc(var(--bleed) + var(--lift)); }
.rv-view::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(1100px, 140vw); height: clamp(180px, 40vh, 340px); transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(70,120,200,.22), rgba(70,120,200,0)); opacity: 0; transition: opacity 1.4s ease; }
.reveal.r1 .rv-view::before { opacity: 1; }
.reveal.r5 .rv-view::before { opacity: 0; transition-duration: .5s; }
.rv-card { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.rv-up { position: absolute; left: calc(var(--lh) * -2.3273); bottom: calc(var(--lh) * .24 + 6px); width: calc(var(--lh) * 4.6547); height: var(--lh); }
.rv-up svg, .brand-slot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.reveal .mark { opacity: 0; }   /* until the drawing is set up (index.html) */
.reveal.armed .mark { opacity: 1; }
.mark .bp-fx { transform-box: view-box; transform-origin: 72.73px 126.94px; }
.mark .ltr { transform-box: fill-box; }
.rv-line { position: absolute; left: 0; top: -.5px; width: 0; height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, rgba(160,205,255,0), #d8ecff 15%, #fff 50%, #d8ecff 85%, rgba(160,205,255,0)); box-shadow: 0 0 14px 1px rgba(143,195,255,.55); transition: width .6s cubic-bezier(.16,1,.3,1), opacity .2s ease; }
.reveal.r1 .rv-line { width: calc(var(--lh) * 4.6547 + 56px); }
.reveal.r4 .rv-line { width: 100vw; transition: width .5s cubic-bezier(.6,0,.3,1); }
.reveal.r5 .rv-line { opacity: 0; transition-duration: .1s; }

/* The corner lockup the logo lands in. It sits in the opening video's layer, so it goes when that does, and fades as
   soon as the launch starts. */
.brand { position: absolute; z-index: 5; top: calc(20px + env(safe-area-inset-top) + var(--top)); left: calc(22px + env(safe-area-inset-left)); display: flex; align-items: center; gap: 14px; pointer-events: none; transition: opacity .6s ease, transform .6s ease; }
.brand-slot { display: block; height: 34px; aspect-ratio: 647 / 139; filter: drop-shadow(0 1px 8px rgba(0,0,0,0)); transition: filter .6s ease; }
.intro-vid.branded .brand-slot { filter: drop-shadow(0 1px 8px rgba(0,0,0,.4)); }
.stage.launched .brand { opacity: 0; transform: translateY(-6px); }
@media (max-width: 640px) { .brand { top: calc(14px + env(safe-area-inset-top) + var(--top)); left: calc(14px + env(safe-area-inset-left)); gap: 10px; } .brand-slot { height: 22px; } }

/* ---------- Type: Tiempos Headline for headers, always italic; Avenir Next LT Pro Demi for everything else ----------
   Ryan's pick (Oct 14, 2026, type workshop option H). Headers use Tiempos Headline; until Klim web-license files are
   added (csmc/fonts/tiempos/, then an @font-face below), the stack falls back to Newsreader italic (Production Type,
   free). Avenir Next is the system font on Macs and iPhones, so it needs no file there; "OGN Demi" pins it to the Demi
   Bold cut at any weight. Elsewhere it falls back to the system UI font. */
@font-face { font-family: "OGN Demi"; font-weight: 100 900; src: local("Avenir Next LT Pro Demi"), local("AvenirNextLTPro-Demi"), local("Avenir Next Demi Bold"), local("AvenirNext-DemiBold"); }
:root {
  --serif: "Tiempos Headline", "Newsreader", Georgia, serif;
  --display: "OGN Demi", "Avenir Next", "Avenir Next LT Pro", "Segoe UI", system-ui, sans-serif;
  --body: "Avenir Next", "Avenir Next LT Pro", "Segoe UI", system-ui, sans-serif;
  --mono: "OGN Demi", "Avenir Next", "Avenir Next LT Pro", "Segoe UI", system-ui, sans-serif;
}
.lc-msg { font-family: var(--display); font-stretch: normal; font-weight: 600; }
h1, .sec, .notes h3, .card h2, .sc-text b, .site-title b, .moon-soon, .lc-num {
  font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; font-optical-sizing: auto;
}
h1 { letter-spacing: -.02em; }
.sec, .notes h3, .card h2 { letter-spacing: -.005em; }
.sc-text b { font-size: 24px; letter-spacing: -.005em; line-height: 1.04; }
.site-title b { font-size: clamp(26px, 3.4vw, 46px); line-height: 1.04; letter-spacing: -.012em; }
.moon-soon { font-weight: 300; font-size: clamp(24px, 3.6vw, 48px); letter-spacing: .05em; text-indent: 0; }
.moon-view.arrived .moon-soon { letter-spacing: -.008em; text-indent: 0; }
.lc-prep { font-size: clamp(16px, 1.9vw, 26px); letter-spacing: .14em; padding-left: .14em; }
.lc-num { font-weight: 300; }
@media (max-width: 640px) { .site-title b { font-size: 26px; letter-spacing: -.012em; } }

/* ---------- Site card: Apple Liquid Glass (csmc/glass.js) ----------
   Ryan's call (Oct 14, 2026): the site card is iOS 26 Liquid Glass. glass.js bends the globe through the card's rim
   (Chromium) and drives the light (--la, the light's angle in screen degrees), the press glow (--px, --py) and the
   adaptive dimming (--lum, how bright the globe is behind the card). Corners are concentric: inner radius = card
   radius - padding. */
@property --la { syntax: '<angle>'; inherits: true; initial-value: -135deg; }
@property --lum { syntax: '<number>'; inherits: true; initial-value: .2; }
.site-card {
  --r: 26px; --pad: 8px;
  width: 272px; padding: var(--pad); border: 0; border-radius: var(--r); isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02) 40%, rgba(255,255,255,.04)),
    rgba(8, 13, 22, calc(.08 + .44 * var(--lum)));
  -webkit-backdrop-filter: blur(14px) saturate(1.7) brightness(1.04); backdrop-filter: blur(14px) saturate(1.7) brightness(1.04);
  box-shadow:
    inset 0 0 0 .5px rgba(255,255,255,.2), inset 0 1px 1px rgba(255,255,255,.26), inset 0 -1px 1px rgba(255,255,255,.07),
    inset 0 0 22px rgba(255,255,255,.05),
    0 1px 2px rgba(0,0,0,.18), 0 10px 30px rgba(0,0,0,calc(.2 + .2 * var(--lum))), 0 26px 70px rgba(0,0,0,.26);
  transform: translateY(var(--dy, 8px)) scale(.94);
  transition: opacity .18s ease, transform .55s cubic-bezier(.2,1.3,.32,1), --la 1.1s cubic-bezier(.16,1,.3,1), --lum .45s linear;
}
.site-card.on { transform: none; }
.site-card.on.lg-press { transform: scale(1.016); transition-duration: .18s, .4s, 1.1s, .45s; }
.site-card.lg-swap { transition: opacity .12s cubic-bezier(.4,0,1,1) .02s, transform .14s cubic-bezier(.55,0,1,.45), --la 1.1s cubic-bezier(.16,1,.3,1), --lum .45s linear; }   /* another site picked: drops back into its dot fast */
.site-card.lg-refract { -webkit-backdrop-filter: url(#lgCard); backdrop-filter: url(#lgCard); }
.site-card::before {   /* rim light: brightest on the corner facing the light, and on the opposite one */
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: conic-gradient(from calc(var(--la) + 90deg), rgba(255,255,255,.95), rgba(255,255,255,.24) 38deg, rgba(255,255,255,.05) 90deg,
    rgba(255,255,255,.2) 142deg, rgba(255,255,255,.62) 180deg, rgba(255,255,255,.18) 222deg, rgba(255,255,255,.04) 270deg, rgba(255,255,255,.24) 322deg, rgba(255,255,255,.95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.site-card::after {   /* lit from within, starting under the pointer */
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--px, 50%) var(--py, 50%), rgba(255,255,255,.24), rgba(255,255,255,.07) 38%, rgba(255,255,255,0) 70%);
}
.site-card.lg-lit::after { animation: lgLit .95s cubic-bezier(.16,1,.3,1); }
.site-card.lg-sweep { animation: lgSweep 1.1s cubic-bezier(.16,1,.3,1); }
@keyframes lgLit { 0% { opacity: 0; } 10% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lgSweep { from { --la: -330deg; } to { --la: -135deg; } }
.site-card .sc-img { position: relative; z-index: 1; border-radius: calc(var(--r) - var(--pad)); box-shadow: 0 0 0 .5px rgba(255,255,255,.14), 0 2px 10px rgba(0,0,0,.22); }
.site-card .sc-body { position: relative; z-index: 1; padding: 11px 2px 2px 8px; }
.site-card .sc-text b { color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,.28); }
.site-card .sc-text span { color: rgba(236,242,250,.74); }
.site-card .sc-visit {
  padding: 10px 11px 10px 16px; border-radius: 999px; color: #0b1522;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(226,234,244,.93));
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 1px rgba(0,0,0,.08), 0 0 0 .5px rgba(255,255,255,.55), 0 4px 14px rgba(0,0,0,.26);
  transition: transform .45s cubic-bezier(.3,1.6,.4,1), box-shadow .2s ease, background .2s ease;
}
.site-card .sc-visit:hover { background: #fff; transform: scale(1.04); }
.site-card .sc-visit:active { transform: scale(.96); transition-duration: .12s; }
@media (max-width: 640px) { .site-card { width: 252px; --r: 24px; } }
@media (prefers-reduced-motion: reduce) {
  .site-card, .site-card.on.lg-press { transform: none; transition: opacity .3s ease; }
  .site-card.lg-sweep, .site-card.lg-lit::after { animation: none; }
}

/* ---------- The game button ("Let's go"): top left on the globe, shown and hidden with the Moon button (index.html) ----
   The corner it shares: Back to Canada takes it at a site, Back to Earth at the Moon.
   Same build as Put away. Until the game is in, a click shakes it and it reads "Not yet." for a moment. */
.game-go { position: absolute; z-index: 3; top: calc(16px + env(safe-area-inset-top) + var(--top)); left: calc(16px + env(safe-area-inset-left)); display: flex; align-items: center; gap: 4px; height: 48px; box-sizing: border-box; padding: 0 12px 0 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.24); background: rgba(6,11,20,.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 14px 40px rgba(0,0,0,.4); color: var(--fg); font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: .01em; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(0, -8px); transition: opacity .5s ease, transform .5s ease, visibility .5s, background .2s ease; }
.moon-go.on + .game-go { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.stage.vid .moon-go + .game-go, .stage.intro .moon-go + .game-go, .stage.visit .moon-go + .game-go, html.pov-open .moon-go + .game-go { opacity: 0; visibility: hidden; pointer-events: none; }
.stage:has(.game-hud.on) .moon-go + .game-go { opacity: 0; visibility: hidden; pointer-events: none; }   /* a game in play: the HUD's Menu does its job */
.game-go:hover { background: rgba(6,11,20,.78); }
.game-go:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
.game-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.game-go.nope { animation: ggNope .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes ggNope { 20% { transform: translateX(-5px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@media (max-width: 640px) { .game-go { top: calc(12px + env(safe-area-inset-top) + var(--top)); left: calc(12px + env(safe-area-inset-left)); font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .game-go { transition: none; } .game-go.nope { animation: none; } }
/* Let's Go in the site titles' face (Ryan, Oct 14, 2026): the serif italic at the weight of the site card's "CFS Alert", sized to the pill. */
.game-go { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 22px; letter-spacing: -.005em; font-optical-sizing: auto; padding-left: 17px; }
@media (max-width: 640px) { .game-go { font-size: 21px; } }

/* ---------- Glass buttons: the Moon, Back to Earth, Back to Canada, Let's Go (csmc/glass.js) ----------
   Ryan's call (Oct 14, 2026): the same Liquid Glass as the site card. glass.js bends the backdrop through each button
   (its own filter, set inline in Chromium; the frosted backdrop below is the fallback), drives the light (--la, --px,
   --py) and the classes: lg-sweep (light travels round the rim as it appears), lg-hover (swells and lights up under the
   pointer), lg-press and lg-lit (pressed). The hover scale uses `scale`, so the buttons' own transforms are untouched. */
.moon-go, .moon-back, .game-go {
  border-color: transparent; isolation: isolate;
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.03) 48%, rgba(255,255,255,.07)), rgba(10,16,26,.24);
  -webkit-backdrop-filter: blur(6px) saturate(1.8) brightness(1.08); backdrop-filter: blur(6px) saturate(1.8) brightness(1.08);
  box-shadow:
    inset 0 0 0 .5px rgba(255,255,255,.24), inset 0 1px 1px rgba(255,255,255,.34), inset 0 -1px 1px rgba(255,255,255,.1),
    inset 0 0 12px rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.32);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,1.3,.32,1), visibility .5s, scale .55s cubic-bezier(.2,1.5,.35,1),
    background .3s ease, box-shadow .3s ease, --la 1.1s cubic-bezier(.16,1,.3,1);
}
.moon-go:hover, .moon-back:hover, .game-go:hover { background: linear-gradient(180deg, rgba(255,255,255,.19), rgba(255,255,255,.05) 48%, rgba(255,255,255,.1)), rgba(10,16,26,.2); }
.moon-go.lg-hover, .moon-back.lg-hover, .game-go.lg-hover {
  scale: 1.06;
  box-shadow:
    inset 0 0 0 .5px rgba(255,255,255,.32), inset 0 1px 1px rgba(255,255,255,.44), inset 0 -1px 1px rgba(255,255,255,.14),
    inset 0 0 16px rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.2), 0 12px 30px rgba(0,0,0,.36);
}
.moon-go.lg-press, .moon-back.lg-press, .game-go.lg-press { scale: 1.1; }
.moon-go > *, .moon-back > *, .game-go > * { position: relative; z-index: 1; }
.moon-go, .moon-back, .game-go { text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.moon-go svg, .moon-back svg, .game-go svg { filter: drop-shadow(0 1px 3px rgba(0,0,0,.35)); }   /* legible over bright ground */
.moon-go::before, .moon-back::before, .game-go::before {   /* rim light: brightest on the side facing the light, and on the opposite one */
  content: ""; position: absolute; inset: -1px; z-index: 2; border-radius: inherit; padding: 1.1px; pointer-events: none;
  background: conic-gradient(from calc(var(--la) + 90deg), rgba(255,255,255,.95), rgba(255,255,255,.22) 40deg, rgba(255,255,255,.05) 90deg,
    rgba(255,255,255,.18) 140deg, rgba(255,255,255,.6) 180deg, rgba(255,255,255,.16) 220deg, rgba(255,255,255,.04) 270deg, rgba(255,255,255,.22) 320deg, rgba(255,255,255,.95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.moon-go::after, .moon-back::after, .game-go::after {   /* lit from within, under the pointer */
  content: ""; position: absolute; inset: -1px; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(circle at var(--px, 50%) var(--py, 50%), rgba(255,255,255,.3), rgba(255,255,255,.08) 45%, rgba(255,255,255,0) 75%);
}
.moon-go.lg-hover::after, .moon-back.lg-hover::after, .game-go.lg-hover::after { opacity: .75; }
.moon-go.lg-lit::after, .moon-back.lg-lit::after, .game-go.lg-lit::after { animation: lgLit .95s cubic-bezier(.16,1,.3,1); }
.moon-go.lg-sweep, .moon-back.lg-sweep, .game-go.lg-sweep { animation: lgSweep 1.1s cubic-bezier(.16,1,.3,1); }
.game-go.lg-sweep.nope { animation: lgSweep 1.1s cubic-bezier(.16,1,.3,1), ggNope .45s cubic-bezier(.36,.07,.19,.97); }   /* (keeps the shake) */
@media (prefers-reduced-motion: reduce) {
  .moon-go, .moon-back, .game-go { transition: opacity .3s ease, visibility .3s, background .3s ease; }
  .moon-go.lg-hover, .moon-back.lg-hover, .game-go.lg-hover, .moon-go.lg-press, .moon-back.lg-press, .game-go.lg-press { scale: none; }
  .moon-go.lg-sweep, .moon-back.lg-sweep, .game-go.lg-sweep, .moon-go.lg-lit::after, .moon-back.lg-lit::after, .game-go.lg-lit::after { animation: none; }
}

/* ---------- The CEO game: menu, HUD, decisions, news (csmc/game/ui.js; placeholders for now) ----------
   Liquid Glass like the site card: glass.js (OGN_GLASS.attach) bends the globe through each panel and drives the
   rim light (--la) and press glow; this block is the tint, rim and type. Let's Go opens the menu. */
.game-menu, .game-team, .game-hud, .game-ask, .gm-go, .gm-alt {
  isolation: isolate; color: var(--fg); border: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.02) 42%, rgba(255,255,255,.05)), rgba(8,13,22,.42);
  -webkit-backdrop-filter: blur(16px) saturate(1.7) brightness(1.04); backdrop-filter: blur(16px) saturate(1.7) brightness(1.04);
  box-shadow:
    inset 0 0 0 .5px rgba(255,255,255,.22), inset 0 1px 1px rgba(255,255,255,.3), inset 0 -1px 1px rgba(255,255,255,.08),
    inset 0 0 24px rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.2), 0 14px 40px rgba(0,0,0,.34), 0 30px 80px rgba(0,0,0,.28);
}
.game-menu::before, .game-team::before, .game-hud::before, .game-ask::before, .gm-go::before, .gm-alt::before {   /* rim light, as on the card */
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: conic-gradient(from calc(var(--la) + 90deg), rgba(255,255,255,.95), rgba(255,255,255,.24) 38deg, rgba(255,255,255,.05) 90deg,
    rgba(255,255,255,.2) 142deg, rgba(255,255,255,.62) 180deg, rgba(255,255,255,.18) 222deg, rgba(255,255,255,.04) 270deg, rgba(255,255,255,.24) 322deg, rgba(255,255,255,.95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.game-menu::after, .game-ask::after, .gm-go::after, .gm-alt::after {   /* lit from within, under the pointer */
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(circle at var(--px, 50%) var(--py, 50%), rgba(255,255,255,.22), rgba(255,255,255,.06) 40%, rgba(255,255,255,0) 72%);
}
.game-menu.lg-lit::after, .game-ask.lg-lit::after, .gm-go.lg-lit::after, .gm-alt.lg-lit::after { animation: lgLit .95s cubic-bezier(.16,1,.3,1); }
.gm-go.lg-hover::after, .gm-alt.lg-hover::after { opacity: .8; }
.game-menu.lg-sweep, .game-team.lg-sweep, .game-hud.lg-sweep, .game-ask.lg-sweep, .gm-go.lg-sweep, .gm-alt.lg-sweep { animation: lgSweep 1.1s cubic-bezier(.16,1,.3,1); }
.game-menu > *, .game-team > *, .game-hud > *, .game-ask > *, .gm-go > *, .gm-alt > * { position: relative; z-index: 1; }

.game-scrim { position: absolute; inset: 0; z-index: 19; background: radial-gradient(120% 90% at 50% 45%, rgba(3,6,12,.18), rgba(3,6,12,.55)); opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility .45s; }
.game-scrim.on { opacity: 1; visibility: visible; }
html #pov { transition: opacity .45s ease; }
html.gm-open #pov { opacity: 0; }   /* the devices sit on their own layer over the stage: under a menu or sheet they step out (dimmed, they still covered rows and buttons) */
html.gm-open #pov * { pointer-events: none !important; }
.game-menu {
  position: absolute; z-index: 20; left: 50%; top: 50%; width: min(540px, calc(100vw - 32px)); max-height: calc(100% - 48px); overflow: auto; box-sizing: border-box;
  padding: 34px 36px 30px; border-radius: 34px; opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, -50%) scale(.94); transition: opacity .2s ease, transform .6s cubic-bezier(.2,1.3,.32,1), visibility .2s, --la 1.1s cubic-bezier(.16,1,.3,1);
}
.game-menu.on { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, -50%); }
.gm-x { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: var(--fg); cursor: pointer; z-index: 3; transition: background .2s ease; }
.gm-x:hover { background: rgba(255,255,255,.16); }
.gm-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.gm-kicker { margin: 0 0 10px; font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ice); }
.gm-title { margin: 0 0 14px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 46px; line-height: 1; letter-spacing: -.012em; color: #fff; }
.gm-lede { margin: 0 0 24px; font-family: var(--body); font-size: 16px; line-height: 1.5; color: rgba(236,242,250,.82); text-wrap: pretty; }
.gm-steps { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 14px; counter-reset: gm; }
.gm-steps li { counter-increment: gm; display: grid; grid-template-columns: 34px 92px 1fr; align-items: baseline; font-family: var(--body); font-size: 14.5px; line-height: 1.45; color: rgba(236,242,250,.74); }
.gm-steps li::before { content: counter(gm, decimal-leading-zero); font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .12em; color: var(--muted); }
.gm-steps b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 21px; color: #fff; }
.gm-status { margin: -8px 0 18px; font-family: var(--body); font-size: 14px; color: var(--diesel); }
.gm-status:empty { display: none; }
.gm-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.gm-go, .gm-alt { position: relative; height: 52px; padding: 0 28px; border-radius: 999px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 23px; letter-spacing: -.005em; cursor: pointer;
  transition: scale .55s cubic-bezier(.2,1.5,.35,1), background .3s ease, box-shadow .3s ease, --la 1.1s cubic-bezier(.16,1,.3,1); }
.gm-go { color: #0b1522; background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(226,234,244,.93)); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 1px rgba(0,0,0,.08), 0 0 0 .5px rgba(255,255,255,.55), 0 6px 18px rgba(0,0,0,.3); }
.gm-go::after { background: radial-gradient(circle at var(--px, 50%) var(--py, 50%), rgba(143,195,255,.35), rgba(143,195,255,0) 70%); }
.gm-go.lg-hover, .gm-alt.lg-hover { scale: 1.05; }
.gm-go.lg-press, .gm-alt.lg-press { scale: 1.09; }
.gm-go:focus-visible, .gm-alt:focus-visible, .game-hud button:focus-visible, .game-ask button:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
.gm-alt[hidden] { display: none; }

.game-hud {
  position: absolute; z-index: 6; left: 50%; top: calc(16px + env(safe-area-inset-top) + var(--top)); display: flex; align-items: center; gap: 18px;
  height: 52px; box-sizing: border-box; padding: 0 8px 0 22px; border-radius: 999px; white-space: nowrap;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -8px); transition: opacity .4s ease, transform .5s cubic-bezier(.2,1.3,.32,1), visibility .4s, --la 1.1s cubic-bezier(.16,1,.3,1);
}
.game-hud.on { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.stage.vid .game-hud, .stage.intro .game-hud { opacity: 0; visibility: hidden; pointer-events: none; }
.gh-date { display: grid; line-height: 1; font-family: var(--serif); font-style: italic; font-size: 21px; color: #fff; }
.gh-date b { font-weight: 400; }
.gh-date i { margin-top: 4px; font-style: normal; font-family: var(--display); font-weight: 600; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.gh-date i:empty { display: none; }
.gh-num { display: grid; line-height: 1; }
.gh-num b { font-family: var(--display); font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; color: #fff; }
.gh-num i { margin-top: 3px; font-style: normal; font-family: var(--display); font-weight: 600; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.gh-burn b { color: rgba(236,242,250,.82); }
.game-hud.low .gh-cash b { color: var(--diesel); }
.gh-turn { display: flex; align-items: center; gap: 10px; padding: 3px 3px 3px 12px; border-radius: 999px; background: rgba(0,0,0,.22); }   /* the quarter's moves, then Next quarter */
.gh-menu { height: 30px; min-width: 34px; padding: 0 9px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-family: var(--display); font-weight: 600; font-size: 13px; cursor: pointer; transition: background .2s ease, color .2s ease; }
.gh-menu:hover { color: #fff; }
.gh-moves { display: flex; gap: 5px; }
.gh-moves i { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.38); transition: background .3s ease, box-shadow .3s ease; }
.gh-moves i.on { background: var(--ice); box-shadow: 0 0 8px rgba(143,195,255,.55); }
.gh-next { position: relative; overflow: hidden; height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(255,255,255,.92); color: #0b1522; cursor: pointer;
  font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; transition: background .2s ease, box-shadow .3s ease; }
.gh-next::before { content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, 0)); background: var(--ice); opacity: 0; transition: opacity .2s ease; }
.gh-next span { position: relative; }
.gh-next:hover { background: #fff; }
.gh-next.run { cursor: default; background: rgba(255,255,255,.6); }
.gh-next.run::before { opacity: 1; }
.gh-next.ready { animation: ghReady 1.8s ease-in-out infinite; }   /* out of moves: this is next */
@keyframes ghReady { 0%, 100% { box-shadow: 0 0 0 0 rgba(143,195,255,0); } 50% { box-shadow: 0 0 0 4px rgba(143,195,255,.38); } }
.gh-menu { height: 36px; padding: 0 16px; background: rgba(255,255,255,.1); color: var(--fg); font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 17px; }

.game-ask {
  position: absolute; z-index: 7; left: 50%; top: calc(84px + env(safe-area-inset-top) + var(--top)); width: min(440px, calc(100vw - 32px)); box-sizing: border-box;
  padding: 20px 22px 18px; border-radius: 28px; opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, -8px) scale(.96); transition: opacity .2s ease, transform .55s cubic-bezier(.2,1.3,.32,1), visibility .2s, --la 1.1s cubic-bezier(.16,1,.3,1);
}
.game-ask.on { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.ga-k { margin: 0 0 6px; font-family: var(--display); font-weight: 600; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--diesel); }
.ga-q { margin: 0 0 14px; font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.2; color: #fff; }
.ga-o { display: grid; gap: 8px; }
.ga-o button { text-align: left; padding: 11px 16px; border: 0; border-radius: 16px; background: rgba(255,255,255,.1); color: var(--fg); font-family: var(--body); font-size: 14.5px; line-height: 1.3; cursor: pointer; transition: background .2s ease; }
.ga-o button:hover { background: rgba(255,255,255,.2); }

.game-news { position: absolute; z-index: 6; left: 50%; top: calc(80px + env(safe-area-inset-top) + var(--top)); max-width: min(560px, calc(100vw - 32px)); margin: 0; transform: translateX(-50%);
  font-family: var(--body); font-size: 14px; line-height: 1.35; text-align: center; color: rgba(236,242,250,.9); text-shadow: 0 1px 10px rgba(0,0,0,.6); opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.game-news.on { opacity: 1; }
.game-ask.on ~ .game-news { opacity: 0; }

.game-dbg { position: fixed; z-index: 50; left: 12px; right: 12px; bottom: 12px; max-height: 42%; overflow: auto; padding: 10px 12px; border-radius: 12px; background: rgba(4,8,14,.88); color: var(--fg); font: 12px/1.5 ui-monospace, Menlo, monospace; }
.game-dbg div { margin-top: 4px; }
.game-dbg button { margin: 2px 4px 2px 0; padding: 3px 7px; border: 1px solid #2c4560; border-radius: 6px; background: #0b1522; color: var(--fg); font: inherit; cursor: pointer; }

@media (max-width: 640px) {
  .game-menu { padding: 28px 22px 22px; border-radius: 30px; }
  .gm-title { font-size: 38px; }
  .gm-lede { font-size: 15px; }
  .gm-steps li { grid-template-columns: 28px 74px 1fr; font-size: 13.5px; }
  .gm-steps b { font-size: 19px; }
  .game-hud { top: calc(68px + env(safe-area-inset-top) + var(--top)); gap: 12px; padding-left: 16px; height: 48px; }
  .gh-date { font-size: 18px; }
  .gh-burn { display: none; }
  .gh-next { padding: 0 10px; font-size: 10.5px; letter-spacing: .08em; }
  .gh-turn { gap: 8px; padding-left: 10px; }
  .gh-menu { padding: 0 12px; }
  .game-ask { top: calc(126px + env(safe-area-inset-top) + var(--top)); }
  .game-news { top: calc(124px + env(safe-area-inset-top) + var(--top)); }
}
@media (prefers-reduced-motion: reduce) {
  .game-menu, .game-hud, .game-ask { transition: opacity .3s ease, visibility .3s; }
  .game-menu.lg-sweep, .game-hud.lg-sweep, .game-ask.lg-sweep, .gm-go.lg-sweep, .gm-alt.lg-sweep, .gm-go.lg-hover, .gm-alt.lg-hover { animation: none; scale: none; }
}

/* ---------- The CEO game: the Team sheet (game/ui.js) ----------
   An org chart (you, then the COO, CFO and Chief Nuclear Officer, then three staff and three intern seats) beside the
   selected person's card, or the market for an open seat. Every card has the same four stats as bars out of 10
   (hollow segments: an intern's room to grow), 0.5 to 5 stars, and the contract. Faces: game/faces.js, style A/B/C. */
.game-team {
  position: absolute; z-index: 20; left: 50%; top: 50%; width: min(1120px, calc(100vw - 32px)); height: min(640px, calc(100% - 32px)); box-sizing: border-box;
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 16px; padding: 22px 24px 24px; border-radius: 36px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, -50%) scale(.95); transition: opacity .2s ease, transform .6s cubic-bezier(.2,1.3,.32,1), visibility .2s, --la 1.1s cubic-bezier(.16,1,.3,1);
}
.game-team.on { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, -50%); }
.gt-head { display: flex; align-items: center; gap: 18px; min-width: 0; padding-right: 48px; min-height: 40px; }
.gt-title { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 36px; line-height: 1; letter-spacing: -.012em; color: #fff; }
.gt-tip { flex: 1; min-width: 0; margin: 0; display: flex; align-items: center; gap: 10px; font-family: var(--body); font-size: 14px; line-height: 1.35; color: rgba(236,242,250,.82); }
.gt-tip b { font-family: var(--display); font-weight: 600; font-size: 10px; letter-spacing: .18em; color: var(--ice); margin-right: 4px; }
.gt-tip .warn { color: var(--diesel); }
.gt-faces { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(0,0,0,.22); }
.gt-faces span { padding: 0 6px 0 9px; font-family: var(--display); font-weight: 600; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.gt-faces button { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-family: var(--display); font-weight: 600; font-size: 12px; cursor: pointer; }
.gt-faces button.on { background: rgba(255,255,255,.9); color: #0b1522; }
.gt-x { top: 2px; right: 0; }
.gt-body { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 22px; min-height: 0; }
.gt-chart, .gt-side { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.gt-chart { padding: 4px 2px 2px; }
.gt-side { padding-right: 4px; }

/* the org chart: thin lines from you down to the three executives */
.gt-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gt-r-ceo { grid-template-columns: minmax(0, calc((100% - 20px) / 3)); justify-content: center; position: relative; padding-bottom: 14px; }
.gt-r-ceo::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 14px; background: rgba(143,195,255,.35); }
.gt-r-exec { position: relative; padding-top: 14px; }
.gt-r-exec::before { content: ""; position: absolute; top: 0; left: calc((100% - 20px) / 6); right: calc((100% - 20px) / 6); height: 1px; background: rgba(143,195,255,.35); }
.gt-r-exec .gt-tile::before { content: ""; position: absolute; left: 50%; top: -14px; width: 1px; height: 14px; background: rgba(143,195,255,.35); }
.gt-cap { margin: 22px 2px 10px; display: flex; align-items: baseline; gap: 10px; font-family: var(--serif); font-style: italic; font-size: 20px; color: #fff; }
.gt-cap span { font-family: var(--display); font-style: normal; font-weight: 600; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.gt-tile { position: relative; display: flex; align-items: center; gap: 11px; min-width: 0; padding: 8px 10px 8px 8px; border: 0; border-radius: 18px; text-align: left; color: var(--fg); cursor: pointer;
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.16); transition: background .2s ease, box-shadow .2s ease, transform .35s cubic-bezier(.2,1.5,.35,1); }
.gt-tile:hover { background: rgba(255,255,255,.11); }
.gt-tile:active { transform: scale(.98); }
.gt-tile.sel { background: rgba(255,255,255,.15); box-shadow: inset 0 0 0 1px rgba(143,195,255,.75); }
.gt-tile.empty { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.gt-tile.empty:hover { background: rgba(255,255,255,.06); }
.gt-tile.empty.sel { box-shadow: inset 0 0 0 1px rgba(143,195,255,.75); }
.gt-tile:focus-visible, .gt-faces button:focus-visible, .pc-act:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
.gt-t { display: grid; gap: 1px; min-width: 0; }
.gt-t b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 16.5px; line-height: 1.15; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt-t i { font-style: normal; font-family: var(--display); font-weight: 600; font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt-tile.empty .gt-t b { color: rgba(236,242,250,.82); }
.gt-t .pst { margin-top: 3px; }

/* faces: an ID-badge tint by seat */
.pf { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; overflow: hidden; background: #e8ecf1; color: #0b1522; font-family: var(--display); font-weight: 600; font-size: 14px; }
.pf img { width: 100%; height: 100%; display: block; }
.pf-ceo { background: #efe2bf; } .pf-exec { background: #dbe8f7; } .pf-staff { background: #e8ecf1; } .pf-intern { background: #f1e6d2; }
.pf-empty { background: rgba(255,255,255,.06); color: rgba(236,242,250,.7); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.pf-empty svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.pf-lg { width: 104px; height: 104px; border-radius: 24px; font-size: 26px; }
.pf-xs { width: 24px; height: 24px; border-radius: 7px; font-size: 9px; }

/* stars: 0.5 to 5 */
.pst { display: inline-flex; gap: 1px; }
.pst svg { width: 12px; height: 12px; }
.pst .s0 { fill: rgba(255,255,255,.16); }
.pst .s1 { fill: #f3c969; }
.pst-lg svg { width: 19px; height: 19px; }
.pst-lg { gap: 2px; margin-top: 8px; }

/* the card */
.pc { position: relative; display: grid; gap: 16px; padding: 18px 18px 16px; border-radius: 26px; background: rgba(255,255,255,.055); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.08); }
.pc-top { display: flex; align-items: center; gap: 16px; min-width: 0; }
.pc-id { min-width: 0; }
.pc-tier { margin: 0 0 4px; font-family: var(--display); font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ice); }
.pc-intern .pc-tier { color: #e9c98f; } .pc-ceo .pc-tier { color: #f3c969; }
.pc-name { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 30px; line-height: 1.02; letter-spacing: -.01em; color: #fff; }
.pc-meta { margin: 5px 0 0; font-family: var(--body); font-size: 13.5px; line-height: 1.3; color: rgba(236,242,250,.72); }
.pc-stats { margin: 0; display: grid; gap: 10px; }
.pc-stat { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; }
.pc-stat dt { font-family: var(--display); font-weight: 600; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pc-stat dd { margin: 0; display: flex; align-items: center; gap: 12px; }
.pc-bar { flex: 1; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; height: 9px; }
.pc-bar i { border-radius: 2px; background: rgba(255,255,255,.1); }
.pc-bar i.on { background: #e6edf6; }
.pc-bar i.pot { background: transparent; box-shadow: inset 0 0 0 1px rgba(143,195,255,.6); }
.pc-stat b { width: 20px; text-align: right; font-family: var(--display); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; color: #fff; }
.pc-stat.r-elite b { color: #f3c969; } .pc-stat.r-elite i.on { background: #f3e2b4; }
.pc-stat.r-strong b { color: var(--ice); }
.pc-stat.r-low b { color: var(--diesel); }
.pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.pc-pay { margin: 0; font-family: var(--body); font-size: 13.5px; line-height: 1.35; color: rgba(236,242,250,.66); }
.pc-pay b { font-family: var(--display); font-weight: 600; font-size: 16px; color: #fff; }
.pc-btns { display: flex; gap: 8px; flex: none; }
.pc-act { flex: none; height: 40px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 19px; color: #0b1522;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(226,234,244,.93)); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 1px rgba(0,0,0,.08), 0 4px 14px rgba(0,0,0,.26);
  transition: transform .45s cubic-bezier(.3,1.6,.4,1), background .2s ease; }
.pc-act:hover { transform: scale(1.04); background: #fff; }
.pc-act:active { transform: scale(.96); transition-duration: .12s; }
.pc-ghost { color: var(--fg); background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.2); }
.pc-ghost:hover { background: rgba(255,255,255,.18); }
.pc-note { margin: 0; font-family: var(--body); font-size: 13.5px; color: rgba(236,242,250,.66); }
.pc-err { margin: -6px 0 0; font-family: var(--body); font-size: 13px; color: var(--diesel); }
.gt-market { display: grid; gap: 12px; }
.gt-mk { margin: 2px 0 0; font-family: var(--display); font-weight: 600; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ice); }
.gt-mnote { margin: -6px 0 2px; font-family: var(--body); font-size: 13.5px; color: rgba(236,242,250,.66); }
.gh-menu.need { color: #fff; box-shadow: inset 0 0 0 1px var(--diesel); }
.gh-main svg { display: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
@media (max-width: 640px) {   /* the HUD fits a phone: no 2x, the menu as an icon */
  .game-hud { gap: 9px; padding: 0 5px 0 14px; max-width: calc(100vw - 20px); }
  .gh-date { font-size: 17px; }
  .gh-num b { font-size: 15.5px; }
  .gh-team, .gh-board { padding: 0 11px; font-size: 16px; }
  .gh-main { padding: 0 10px; }
  .gh-main span { display: none; }
  .gh-main svg { display: block; }
}

@media (max-width: 900px) {
  .game-team { width: calc(100vw - 20px); height: calc(100% - 20px); padding: 18px 14px 16px; border-radius: 30px; gap: 12px; }
  .gt-head { flex-wrap: wrap; gap: 10px 14px; }
  .gt-title { font-size: 30px; }
  .gt-tip { order: 3; flex-basis: 100%; font-size: 13px; }
  .gt-body { display: block; overflow: auto; overscroll-behavior: contain; }   /* one scrolling column: the chart, then the card or market */
  .gt-chart, .gt-side { overflow: visible; }
  .gt-side { margin-top: 18px; scroll-margin-top: 8px; }
  .gt-tile { flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 10px 4px 9px; }
  .gt-t { justify-items: stretch; text-align: center; width: 100%; }   /* (stretch, so long titles end in an ellipsis) */
  .gt-t b { font-size: 14.5px; }
  .gt-t i { font-size: 8.5px; letter-spacing: .1em; }
  .gt-t .pst { justify-self: center; }
  .pf-lg { width: 84px; height: 84px; border-radius: 20px; }
  .pc { padding: 16px 14px 14px; }
  .pc-name { font-size: 26px; }
  .pc-stat { grid-template-columns: 94px minmax(0, 1fr); }
  .pc-stat dt { font-size: 10px; letter-spacing: .1em; }
  .pc-foot { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .game-team { transition: opacity .3s ease, visibility .3s; }
  .game-team.lg-sweep { animation: none; }
}

/* ---------- The CEO game: Raise, Sites and the site panel (game/build.js) ----------
   Raise and Sites are sheets like Team (same glass, header and cards); the site panel comes up on the right when you
   land at a site in a game: its case against diesel, then where it's up to and the next move. */
.game-sheet, .game-site {
  isolation: isolate; color: var(--fg); border: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.02) 42%, rgba(255,255,255,.05)), rgba(8,13,22,.42);
  -webkit-backdrop-filter: blur(16px) saturate(1.7) brightness(1.04); backdrop-filter: blur(16px) saturate(1.7) brightness(1.04);
  box-shadow:
    inset 0 0 0 .5px rgba(255,255,255,.22), inset 0 1px 1px rgba(255,255,255,.3), inset 0 -1px 1px rgba(255,255,255,.08),
    inset 0 0 24px rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.2), 0 14px 40px rgba(0,0,0,.34), 0 30px 80px rgba(0,0,0,.28);
}
.game-sheet::before, .game-site::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: conic-gradient(from calc(var(--la) + 90deg), rgba(255,255,255,.95), rgba(255,255,255,.24) 38deg, rgba(255,255,255,.05) 90deg,
    rgba(255,255,255,.2) 142deg, rgba(255,255,255,.62) 180deg, rgba(255,255,255,.18) 222deg, rgba(255,255,255,.04) 270deg, rgba(255,255,255,.24) 322deg, rgba(255,255,255,.95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.game-sheet.lg-sweep, .game-site.lg-sweep { animation: lgSweep 1.1s cubic-bezier(.16,1,.3,1); }
.game-sheet > *, .game-site > * { position: relative; z-index: 1; }
.game-sheet {
  position: absolute; z-index: 20; left: 50%; top: 50%; width: min(880px, calc(100vw - 32px)); height: min(660px, calc(100% - 32px)); box-sizing: border-box;
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 16px; padding: 22px 24px 24px; border-radius: 36px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, -50%) scale(.95); transition: opacity .2s ease, transform .6s cubic-bezier(.2,1.3,.32,1), visibility .2s, --la 1.1s cubic-bezier(.16,1,.3,1);
}
.game-sheet.on { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, -50%); }
.gs-body { min-height: 0; overflow: auto; overscroll-behavior: contain; display: grid; gap: 10px; align-content: start; padding: 2px 4px 2px 2px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.gs-link { margin-left: 6px; height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(255,255,255,.9); color: #0b1522; font-family: var(--serif); font-style: italic; font-size: 15px; cursor: pointer; white-space: nowrap; }
.gs-goal { margin-left: 8px; font-family: var(--display); font-weight: 600; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ice); white-space: nowrap; }
.gx-k { margin: 0 0 4px; font-family: var(--display); font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ice); }
.gx-bar { display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
.gx-bar i { display: block; height: 100%; border-radius: inherit; background: var(--ice); transition: width .5s cubic-bezier(.16,1,.3,1); }

/* Raise: where the money stands, then one row per way in */
.gr-now { margin: 0 0 6px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gr-now div { padding: 12px 16px; border-radius: 18px; background: rgba(0,0,0,.18); }
.gr-now dt { font-family: var(--display); font-weight: 600; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.gr-now dd { margin: 4px 0 0; font-family: var(--display); font-weight: 600; font-size: 20px; font-variant-numeric: tabular-nums; color: #fff; }
.gr-row, .gsi-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 16px 18px; border-radius: 22px;
  background: rgba(255,255,255,.055); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.08); }
.gr-row.live { box-shadow: inset 0 0 0 1px rgba(143,195,255,.7); }
.gr-row.off .gr-l, .gr-row.off .gr-amt { opacity: .55; }
.gr-name { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 24px; line-height: 1.1; color: #fff; }
.gr-name span { color: rgba(236,242,250,.6); }
.gr-terms { margin: 7px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-family: var(--body); font-size: 13.5px; line-height: 1.35; color: rgba(236,242,250,.72); }
.gr-r { display: grid; justify-items: end; gap: 8px; min-width: 150px; }
.gr-amt { font-family: var(--display); font-weight: 600; font-size: 22px; font-variant-numeric: tabular-nums; color: #fff; }
.gr-no { font-family: var(--display); font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: right; }
.gr-no.done { color: var(--ice); }
.gr-prog { display: grid; justify-items: end; gap: 6px; width: 150px; }
.gr-prog .gx-bar { width: 100%; }
.gr-prog b { font-family: var(--display); font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ice); }
.gr-go { height: 38px; font-size: 18px; }
.gr-row .pc-err, .gsi-row .pc-err { grid-column: 1 / -1; margin: 0; }
.gr-past { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.gr-past li { display: grid; grid-template-columns: minmax(0, 1fr) 110px 110px; gap: 10px; padding: 9px 4px; border-top: 1px solid rgba(255,255,255,.07); font-family: var(--body); font-size: 14px; color: rgba(236,242,250,.8); }
.gr-past b { text-align: right; font-family: var(--display); font-weight: 600; font-size: 14px; color: #fff; }
.gr-past b.bad { color: var(--diesel); }

/* Sites: one row per globe site, its saving against diesel, Fly there */
.gsi-list { display: grid; gap: 10px; }
.gsi-row { grid-template-columns: minmax(0, 1fr) 220px auto; }
.gsi-row.ph-operating { box-shadow: inset 0 0 0 1px rgba(143,195,255,.7); }
.gsi-st { margin: 6px 0 0; font-family: var(--body); font-size: 13.5px; color: rgba(236,242,250,.62); }
.gsi-row.on .gsi-st { color: rgba(236,242,250,.9); }
.gsi-st.warn, .gsi-row.on .gsi-st.warn { color: var(--diesel); }
.gsi-l .gx-bar { margin-top: 8px; max-width: 280px; }
.gsi-m { display: grid; justify-items: end; text-align: right; }
.gsi-m b { font-family: var(--display); font-weight: 600; font-size: 20px; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; }
.gsi-m span { margin-top: 4px; font-family: var(--body); font-size: 12px; color: rgba(236,242,250,.62); }
.gsi-fly { height: 38px; font-size: 18px; }

/* the site panel: on the right while you're at a site in a game */
.game-site {   /* under the HUD, clear of the phone in the corner */
  position: absolute; z-index: 6; right: calc(28px + env(safe-area-inset-right)); top: calc(90px + env(safe-area-inset-top) + var(--top)); width: 330px; box-sizing: border-box; padding: 20px 22px 18px; border-radius: 30px;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate(12px, 0);
  transition: opacity .35s ease, transform .7s cubic-bezier(.16,1,.3,1), visibility .35s, --la 1.1s cubic-bezier(.16,1,.3,1);
}
.game-site.on { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.gx-big { margin: 4px 0 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 48px; line-height: 1; letter-spacing: -.015em; color: #fff; }
.gx-big span { font-size: 20px; color: rgba(236,242,250,.75); }
.gx-sub { margin: 8px 0 14px; font-family: var(--body); font-size: 14px; line-height: 1.4; color: rgba(236,242,250,.78); }
.gx-econ { margin: 0; display: grid; }
.gx-econ div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.08); }
.gx-econ dt { font-family: var(--display); font-weight: 600; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.gx-econ dd { margin: 0; font-family: var(--display); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; color: #fff; text-align: right; }
.gx-econ dd span { font-family: var(--body); font-weight: 400; font-size: 12px; color: rgba(236,242,250,.6); }
.gx-st { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.gx-st b { font-family: var(--body); font-weight: 500; font-size: 13.5px; line-height: 1.35; color: #fff; }
.gx-st.warn b { color: var(--diesel); }
.gx-note { margin: 8px 0 0; font-family: var(--body); font-size: 12.5px; line-height: 1.4; color: rgba(236,242,250,.6); }
.gx-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.gx-acts .pc-act { height: 40px; font-size: 18px; }
.game-site .pc-err { margin: 10px 0 0; }
@media (max-height: 760px) and (min-width: 641px) {   /* a laptop: tighter rows so it ends above the phone */
  .gx-big { font-size: 40px; }
  .gx-sub { margin: 6px 0 8px; font-size: 13px; }
  .gx-econ div { padding: 6px 0; }
  .gx-st { padding-top: 9px; }
  .gx-acts { margin-top: 10px; }
}

@media (max-width: 900px) {
  .game-sheet { width: calc(100vw - 20px); height: calc(100% - 20px); padding: 18px 14px 16px; border-radius: 30px; gap: 12px; }
  .game-sheet .gt-head { flex-wrap: wrap; gap: 10px 14px; }
  .game-sheet .gt-title { font-size: 30px; }
  .game-sheet .gt-tip { order: 3; flex-basis: 100%; flex-wrap: wrap; font-size: 13px; }
}
@media (max-width: 640px) {
  .gr-now dd { font-size: 16px; }
  .gr-now div { padding: 10px 12px; }
  .gr-row { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; }
  .gr-r { grid-auto-flow: column; justify-content: space-between; align-items: center; min-width: 0; }
  .gr-past li { grid-template-columns: minmax(0, 1fr) auto auto; }
  .gsi-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; padding: 14px; }
  .gsi-l { grid-column: 1 / -1; }
  .gsi-m { grid-row: 2; grid-column: 1; display: grid; justify-items: start; text-align: left; }
  .gsi-m b { font-size: 17px; }
  .gsi-r { grid-row: 2; grid-column: 2; align-self: center; }
  /* the HUD in two rows: the quarter, cash and End quarter, then Hire, Build, Raise and the menu (the race is in the briefing) */
  .game-hud { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; justify-content: stretch; align-items: center; gap: 7px 10px; height: auto; padding: 8px 8px 8px 16px; border-radius: 26px;
    width: min(420px, calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right))); box-sizing: border-box; }   /* (a set width: from left 50% it shrank to half the screen and $133M ran under End quarter) */
  .gh-date { grid-column: 1; grid-row: 1; } .gh-cash { grid-column: 2; grid-row: 1; } .gh-turn { grid-column: 3 / 5; grid-row: 1; justify-self: end; }
  .gh-race { display: none; }
  .gh-acts { grid-column: 1 / 4; grid-row: 2; }
  .gh-acts .gh-menu { flex: 1; padding: 0 10px; }
  .gh-main { grid-column: 4; grid-row: 2; padding: 0 10px; }
  .game-ask { top: calc(172px + env(safe-area-inset-top) + var(--top)); }
  .game-news { top: calc(170px + env(safe-area-inset-top) + var(--top)); }
  .stage:has(.game-hud.on) .site-title { top: calc(176px + env(safe-area-inset-top) + var(--top)); }
  .game-site { left: calc(10px + env(safe-area-inset-left)); right: calc(10px + env(safe-area-inset-right)); width: auto; top: auto;   /* above the phone in the corner */
    bottom: calc(116px + env(safe-area-inset-bottom) + var(--lift, 0px)); padding: 15px 16px 13px; border-radius: 26px; transform: translate(0, 12px); }
  .game-site.on { transform: none; }
  .gx-big { font-size: 34px; }
  .gx-sub { margin-bottom: 8px; font-size: 13px; }
  .gx-econ { grid-template-columns: 1fr 1fr; column-gap: 14px; }
  .gx-econ div { display: grid; gap: 2px; padding: 7px 0; }
  .gx-econ dd { text-align: left; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .game-sheet, .game-site { transition: opacity .3s ease, visibility .3s; }
  .game-sheet.lg-sweep, .game-site.lg-sweep { animation: none; }
}

/* ---------- The CEO game: the next move, texts and the recap (game/story.js) ----------
   The next move: one line under the HUD (sites running of the goal, then what to do next; a tap goes there). It gives
   way to the news line and to a decision. Texts: an investor's questions as a phone thread over everything, with three
   replies to pick from; the clock waits. The recap: the menu's glass with the run in numbers. */
.game-goal { position: absolute; z-index: 6; left: 50%; top: calc(80px + env(safe-area-inset-top) + var(--top)); transform: translateX(-50%); max-width: min(640px, calc(100vw - 32px));
  display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 4px 8px; border: 0; background: none; color: rgba(236,242,250,.92); font-family: var(--body); font-size: 14px; line-height: 1.35;
  text-shadow: 0 1px 10px rgba(0,0,0,.7), 0 0 2px rgba(0,0,0,.5); white-space: nowrap; cursor: pointer; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s ease, visibility .5s; }
.game-goal.on { opacity: 1; visibility: visible; pointer-events: auto; }
.game-goal b { flex: none; font-family: var(--display); font-weight: 600; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ice); }
.game-goal span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.game-goal:disabled { cursor: default; }
.game-goal:not(:disabled):hover span { text-decoration: underline; text-decoration-color: rgba(255,255,255,.45); text-underline-offset: 3px; }
.game-goal:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; border-radius: 6px; }
.game-news.on ~ .game-goal, .game-ask.on ~ .game-goal { opacity: 0; pointer-events: none; }
.stage.vid .game-goal, .stage.intro .game-goal, .stage.visit .game-goal, html.pov-open .game-goal { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 640px) {
  .game-goal { top: calc(170px + env(safe-area-inset-top) + var(--top)); flex-direction: column; align-items: center; gap: 2px; white-space: normal; text-align: center; font-size: 13px; }
}

.game-texts-scrim { position: absolute; inset: 0; z-index: 23; background: rgba(3,6,12,.42); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s; }
.game-texts-scrim.on { opacity: 1; visibility: visible; }
html.tx-open #pov { opacity: 0; }   /* the phone and laptop would sit over the replies */
.game-texts {
  position: absolute; z-index: 24; left: 50%; top: 50%; width: min(400px, calc(100vw - 24px)); height: min(640px, calc(100% - 40px)); box-sizing: border-box;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border-radius: 34px; isolation: isolate; color: var(--fg); border: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.02) 42%, rgba(255,255,255,.05)), rgba(8,13,22,.62);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.22), inset 0 1px 1px rgba(255,255,255,.3), 0 14px 40px rgba(0,0,0,.34), 0 30px 80px rgba(0,0,0,.3);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -48%) scale(.96);
  transition: opacity .2s ease, transform .55s cubic-bezier(.2,1.3,.32,1), visibility .2s, --la 1.1s cubic-bezier(.16,1,.3,1);
}
.game-texts.on { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, -50%); }
.game-texts::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: conic-gradient(from calc(var(--la) + 90deg), rgba(255,255,255,.9), rgba(255,255,255,.2) 38deg, rgba(255,255,255,.05) 90deg, rgba(255,255,255,.18) 142deg, rgba(255,255,255,.55) 180deg, rgba(255,255,255,.16) 222deg, rgba(255,255,255,.04) 270deg, rgba(255,255,255,.2) 322deg, rgba(255,255,255,.9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.game-texts.lg-sweep { animation: lgSweep 1.1s cubic-bezier(.16,1,.3,1); }
.game-texts > * { position: relative; z-index: 1; min-width: 0; }
.tx-head { display: flex; align-items: center; gap: 12px; padding: 18px 60px 14px 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.tx-av { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, #a7b1c2, #6b7789); color: #fff; font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: .02em; }
.tx-id { display: grid; gap: 2px; min-width: 0; }
.tx-id b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 21px; line-height: 1.05; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-id i { font-style: normal; font-family: var(--display); font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tx-x { top: 16px; right: 16px; }
.tx-x[hidden] { display: none; }
.tx-thread { list-style: none; margin: 0; padding: 16px 14px 10px; display: flex; flex-direction: column; gap: 6px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.tx-thread li { max-width: 82%; padding: 8px 13px; border-radius: 19px; font-family: var(--body); font-size: 14.5px; line-height: 1.35; color: #fff; overflow-wrap: anywhere; animation: txIn .34s cubic-bezier(.2,1.2,.3,1) both; }
.tx-them { align-self: flex-start; background: rgba(255,255,255,.15); border-bottom-left-radius: 6px; }
.tx-me { align-self: flex-end; background: #0a7cff; border-bottom-right-radius: 6px; }
.tx-them + .tx-me, .tx-me + .tx-them { margin-top: 6px; }
.tx-typing { display: flex; gap: 4px; padding: 12px 14px !important; }
.tx-typing i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.7); animation: txDot 1.05s ease-in-out infinite; }
.tx-typing i:nth-child(2) { animation-delay: .15s; } .tx-typing i:nth-child(3) { animation-delay: .3s; }
.tx-replies { display: grid; gap: 8px; padding: 12px 14px 18px; border-top: 1px solid rgba(255,255,255,.08); }
.tx-replies:empty { padding: 0; border-top: 0; }
.tx-k { margin: 0 2px 2px; font-family: var(--display); font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ice); }
.tx-k.tx-end { color: var(--ice); } .tx-k.tx-end.bad { color: var(--diesel); }
.tx-r { text-align: left; padding: 10px 14px; border: 0; border-radius: 18px; background: rgba(10,124,255,.14); box-shadow: inset 0 0 0 1px rgba(64,156,255,.6); color: #fff;
  font-family: var(--body); font-size: 14px; line-height: 1.32; cursor: pointer; transition: background .2s ease, transform .15s ease; animation: txIn .34s cubic-bezier(.2,1.2,.3,1) both; }
.tx-r:nth-child(3) { animation-delay: .05s; } .tx-r:nth-child(4) { animation-delay: .1s; }
.tx-r:hover { background: rgba(10,124,255,.3); }
.tx-r:active { transform: scale(.98); }
.tx-r:focus-visible, .tx-done:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
.tx-done { justify-self: start; }
@keyframes txIn { from { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes txDot { 0%, 70%, 100% { opacity: .3; transform: none; } 35% { opacity: 1; transform: translateY(-2px); } }
@media (max-width: 640px) { .game-texts { height: calc(100% - 24px); border-radius: 30px; } }

.game-recap { width: min(560px, calc(100vw - 32px)); }
.rc-head { margin: -2px 0 20px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 20px; line-height: 1.3; color: rgba(236,242,250,.9); text-wrap: pretty; }
.rc-stats { margin: 0 0 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; }
.rc-stats div { padding: 10px 0 9px; border-top: 1px solid rgba(255,255,255,.09); min-width: 0; }
.rc-stats dt { font-family: var(--display); font-weight: 600; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.rc-stats dd { margin: 4px 0 0; font-family: var(--display); font-weight: 600; font-size: 17px; line-height: 1.2; font-variant-numeric: tabular-nums; color: #fff; }
@media (max-width: 640px) { .rc-head { font-size: 18px; } .rc-stats dd { font-size: 15px; } }

.gsi-row.taken .gsi-l, .gsi-row.taken .gsi-m { opacity: .55; }
@media (prefers-reduced-motion: reduce) {
  .game-texts { transition: opacity .3s ease, visibility .3s; }
  .game-texts.lg-sweep, .tx-thread li, .tx-r, .tx-typing i { animation: none; }
}

/* ---------- The CEO game: game days (game/critical.js; the hearing and town hall in game/story.js) ----------
   The switch-on console: the menu's glass with the rods gauge, a trend of log power and three readouts; the period
   turns amber under 20 s and red under 10 s, where the reactor trips. The town hall and the Commission's hearing use
   the texts panel; their avatars get their own colour. The next-move line ends on the board's confidence; the recap
   gets a star score and, on a win, next season. */
html.cr-open #pov { opacity: 0; }   /* the phone and laptop would sit over the controls */
.game-crit { z-index: 22; width: min(640px, calc(100vw - 32px)); }
.game-crit .gm-lede { margin-bottom: 18px; }
.cr-panel { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 18px; margin: 0 0 14px; }
.cr-rods { display: grid; justify-items: center; align-content: start; gap: 6px; }
.cr-rod { position: relative; width: 20px; height: 176px; border-radius: 6px; background: rgba(0,0,0,.28); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.cr-rod i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 6px; background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.6)); }
.cr-rod s { position: absolute; left: -7px; right: -7px; height: 2px; margin-bottom: -1px; background: var(--diesel); }
.cr-rodv { margin-top: 4px; font-family: var(--display); font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; color: #fff; }
.cr-rods em { font-style: normal; font-family: var(--display); font-weight: 600; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); text-align: center; }
.cr-main { display: grid; gap: 10px; min-width: 0; align-content: start; }
.cr-trend { display: block; width: 100%; height: 136px; border-radius: 12px; background: rgba(0,0,0,.26); color: rgba(236,242,250,.94); }
.cr-read { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 14px; }
.cr-read div { padding-top: 8px; border-top: 1px solid rgba(255,255,255,.09); min-width: 0; }
.cr-read dt { font-family: var(--display); font-weight: 600; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cr-read dd { margin: 4px 0 0; font-family: var(--display); font-weight: 600; font-size: 17px; line-height: 1.2; font-variant-numeric: tabular-nums; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-per.warn, .cr-msg.warn { color: var(--diesel); }
.cr-per.bad { color: #ff5a4f; }
.cr-msg { margin: 0 0 18px; min-height: 2.8em; font-family: var(--body); font-size: 14.5px; line-height: 1.4; color: rgba(236,242,250,.86); }
.cr-acts { align-items: center; }
.cr-pull, .cr-in { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.cr-crew { margin-left: auto; padding: 6px 2px; border: 0; background: none; color: var(--muted); font-family: var(--body); font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cr-crew:hover { color: var(--fg); }
.cr-crew:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; border-radius: 4px; }
.game-crit.cr-alarm { animation: crAlarm .7s ease-in-out infinite alternate; }
@keyframes crAlarm { to { box-shadow: inset 0 0 0 2px rgba(255,90,79,.9), 0 14px 40px rgba(0,0,0,.34), 0 0 60px rgba(255,90,79,.35); } }
.cr-gens { display: flex; align-items: baseline; gap: 14px; margin: 6px 0 12px; }
.cr-gens b { font-family: var(--display); font-weight: 600; font-size: 64px; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; }
.cr-gens span { font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cr-done[hidden], .cr-live[hidden], .cr-after[hidden], .cr-fly[hidden] { display: none; }
.cr-where { margin: -8px 0 16px; }
.cr-fly { padding: 0; border: 0; background: none; color: var(--ice); font-family: var(--body); font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cr-fly:hover { color: #fff; }
.cr-fly:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; border-radius: 4px; }
html.cr-open .game-site { opacity: 0; pointer-events: none; }   /* landed for a switch-on: the site panel waits under the console */
@media (max-width: 640px) {
  .cr-panel { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; }
  .cr-rod { height: 150px; }
  .cr-trend { height: 112px; }
  .cr-read { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cr-read div:nth-child(3) { display: none; }   /* (the line under says sub- or critical) */
  .cr-read dd { font-size: 15px; }
  .cr-crew { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .game-crit.cr-alarm { animation: none; box-shadow: inset 0 0 0 2px rgba(255,90,79,.9); } }

.game-texts.tx-hearing .tx-av { background: linear-gradient(180deg, #55667f, #27334a); font-size: 11px; letter-spacing: .06em; }
.game-texts.tx-townhall .tx-av { background: linear-gradient(180deg, #c48b52, #7d5226); }
.game-texts.tx-offer .tx-av { background: linear-gradient(180deg, #6f8f7a, #3d5a47); }
.game-goal em { flex: none; font-style: normal; font-family: var(--display); font-weight: 600; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.game-goal em.low { color: var(--diesel); }
.game-goal em:empty { display: none; }
.rc-stars { margin: -4px 0 14px; }
.rc-next { display: flex; align-items: baseline; gap: 12px; margin: -6px 0 22px; }
.rc-next b { font-family: var(--display); font-weight: 600; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ice); }
.rc-next span { font-family: var(--serif); font-style: italic; font-size: 20px; color: #fff; }

/* ---------- The CEO game: quarters and the board (MyGM style) ----------
   A move's button says what it costs from the quarter's three moves; a candidate's card says what they'd add to the
   team. The Board sheet (game/build.js): confidence, this year's three goals (tap one to go work on it) and every
   season's grade. The year-end review (game/story.js): the grade, the goals hit and missed, the year in numbers. */
.pc-act .mv { margin-left: 9px; font-family: var(--display); font-style: normal; font-weight: 600; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; opacity: .55; vertical-align: 2px; }
.pc-act.nomove { opacity: .5; }
.pc-impact { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: -4px 0 0; font-family: var(--display); font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pc-impact b { font-weight: 600; color: var(--ice); }
.pc-impact i { font-style: normal; font-family: var(--body); font-weight: 400; font-size: 13px; letter-spacing: 0; text-transform: none; }
.gb-now dd span { font-family: var(--body); font-weight: 400; font-size: 13px; color: var(--muted); }
.gb-now dd.low { color: var(--diesel); }
.gb-g { font-family: var(--serif); font-style: italic; font-weight: 400; color: #fff; }
.gb-g.g-A { color: var(--ice); }
.gb-g.g-C, .gb-g.g-F { color: var(--diesel); }
.gr-now .gb-g { font-size: 26px; line-height: .8; }
.gr-past b.gb-g { font-size: 21px; line-height: 1; }
.gb-past li { grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; }
.gb-goals { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gb-goals li > * { box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 15px 16px; border: 0; border-radius: 18px;
  background: rgba(255,255,255,.055); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.14); text-align: left; color: inherit; font: inherit; }
.gb-goals button { cursor: pointer; transition: background .2s ease; }
.gb-goals button:hover { background: rgba(255,255,255,.1); }
.gb-goals button:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
.gb-goals b { font-family: var(--body); font-weight: 500; font-size: 15px; color: #fff; }
.gb-goals i, .rv-goals i { font-style: normal; font-family: var(--display); font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.gb-goals li.done i, .rv-goals li.done i { color: var(--ice); }
.gb-goals li.miss i, .rv-goals li.miss i { color: var(--diesel); }
.gb-mark { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
li.done > * > .gb-mark, .rv-goals li.done .gb-mark { box-shadow: none; background: var(--ice) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 7.8' fill='none' stroke='%230b1522' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
li.miss > * > .gb-mark, .rv-goals li.miss .gb-mark { box-shadow: inset 0 0 0 1.5px var(--diesel); }
.game-review { width: min(520px, calc(100vw - 32px)); }
.game-review .gm-title { font-size: 40px; }
.rv-grade { display: flex; align-items: center; gap: 18px; margin: -2px 0 10px; }
.rv-grade > b { font-size: 72px; line-height: .8; padding-right: 4px; }
.rv-grade p { margin: 0; display: grid; gap: 4px; font-family: var(--body); font-size: 14px; line-height: 1.35; color: rgba(236,242,250,.72); }
.rv-grade p strong { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 22px; line-height: 1.15; color: #fff; }
.rv-grade em { font-style: normal; font-weight: 600; color: var(--ice); }
.rv-grade em.down { color: var(--diesel); }
.rv-goals { list-style: none; margin: 0 0 12px; padding: 0; }
.rv-goals li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.09); font-family: var(--body); font-size: 14.5px; color: #fff; }
.rv-stats { margin-bottom: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 14px; }
.rv-stats dd { font-size: 15px; }
.rv-stats small { display: block; margin-top: 2px; font-family: var(--body); font-weight: 400; font-size: 11.5px; color: var(--muted); }
.rv-nexthead { margin: 0 0 6px; }
.rv-next { margin: 0 0 18px; padding-left: 18px; font-family: var(--body); font-size: 14px; line-height: 1.55; color: rgba(236,242,250,.86); }
@media (max-width: 640px) {
  .rv-grade > b { font-size: 64px; }
  .rv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rv-grade p strong { font-size: 19px; }
  .gb-now { grid-template-columns: 1fr 1fr; }
  .gb-now div:first-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .gh-next.ready { animation: none; box-shadow: 0 0 0 3px rgba(143,195,255,.38); } }
@media (min-width: 901px) and (max-width: 1240px) {   /* a narrower laptop: the one-row HUD tightens to clear Let's Go and the Moon */
  .game-hud { gap: 12px; padding-left: 18px; }
  .gh-race { display: none; }
  .gh-menu { padding: 0 12px; }
  .gh-main span { display: none; }
  .gh-main svg { display: block; }
}

/* ---------- The CEO game's turn: the HUD's three buttons and the race, the step line, the briefing, Build ----------
   One loop, MyGM style: a briefing opens each quarter (game/brief.js), you make three moves with Hire, Build and Raise,
   End quarter plays the months out. The race is the season on one track: the fill is now, the ice mark is when you'd
   switch on at today's pace, the amber one is the rival's date, the track's end is the deadline. */
.gh-acts { display: flex; gap: 6px; }
.gh-race { display: grid; gap: 7px; line-height: 1; }
.gh-race[hidden] { display: none; }
.gh-race > i { font-style: normal; font-family: var(--display); font-weight: 600; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.gh-track { position: relative; display: block; width: 116px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.14); }
.gh-track s { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: rgba(255,255,255,.55); transition: width .6s cubic-bezier(.16,1,.3,1); }
.gh-track::after { content: ''; position: absolute; right: -1px; top: -4px; width: 2px; height: 12px; border-radius: 1px; background: rgba(255,255,255,.6); }   /* the deadline */
.gh-track em { position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; transition: left .6s cubic-bezier(.16,1,.3,1); }
.gh-track em[hidden] { display: none; }
.gh-you { background: var(--ice); box-shadow: 0 0 0 2px rgba(6,11,20,.8), 0 0 8px rgba(143,195,255,.7); z-index: 1; }
.gh-you.late { background: #fff; box-shadow: 0 0 0 2px rgba(6,11,20,.8), 0 0 0 3.5px var(--diesel); }
.gh-them { background: var(--diesel); box-shadow: 0 0 0 2px rgba(6,11,20,.8); }
@media (max-width: 1240px) { .gh-race { display: none; } }   /* (narrower laptops and phones: the race is in the brief) */

/* the step line under the HUD: the road's six steps, the next move (a tap goes there), the board's chip */
.game-goal { cursor: default; align-items: center; }
.gg-go { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-shadow: inherit; cursor: pointer; text-align: left; }
.gg-go:disabled { cursor: default; }
.gg-go:not(:disabled):hover .gg-text { text-decoration: underline; text-decoration-color: rgba(255,255,255,.45); text-underline-offset: 3px; }
.gg-go:focus-visible, .gg-board:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; border-radius: 6px; }
.game-goal .gg-pips { flex: none; display: inline-flex; gap: 3px; overflow: visible; }
.gg-pips i { width: 12px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.22); }
.gg-pips i.done { background: var(--ice); }
.gg-pips i.now { background: #fff; box-shadow: 0 0 6px rgba(143,195,255,.8); }
.gg-board { flex: none; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--display); font-weight: 600; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); text-shadow: inherit; }
.gg-board:hover { color: #fff; }
.gg-board.low { color: var(--diesel); }
.gg-board[hidden] { display: none; }
@media (max-width: 640px) {
  .game-goal { flex-direction: column; gap: 4px; }
  .gg-go { flex-direction: column; gap: 4px; text-align: center; }
}

/* the briefing: the menu's glass, wider; last quarter on the left, this quarter on the right */
.game-brief { width: min(880px, calc(100vw - 32px)); padding: 26px 32px 22px; }
.game-brief .gm-title { font-size: 42px; }
.game-brief.bf-intro { width: min(600px, calc(100vw - 32px)); }
.bf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.bf-head .gm-title { margin: 0; }
.bf-cash { display: grid; justify-items: end; gap: 4px; text-align: right; }
.bf-cash b { font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; }
.bf-cash span { font-family: var(--display); font-weight: 600; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.bf-cash.low b, .bf-cash.low span { color: var(--diesel); }
.bf-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 26px; margin-bottom: 18px; }
.bf-cols > :only-child { grid-column: 1 / -1; }
.bf-col { min-width: 0; display: grid; align-content: start; gap: 10px; }
.bf-h { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 21px; color: #fff; }
.bf-money { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bf-money div { padding: 9px 12px; border-radius: 14px; background: rgba(0,0,0,.18); }
.bf-money dt { font-family: var(--display); font-weight: 600; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.bf-money dd { margin: 3px 0 0; font-family: var(--display); font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; color: #fff; white-space: nowrap; }
.bf-list { list-style: none; margin: 0; padding: 0; display: grid; }
.bf-list li { position: relative; padding: 7px 0 7px 16px; border-top: 1px solid rgba(255,255,255,.08); font-family: var(--body); font-size: 13.5px; line-height: 1.4; color: rgba(236,242,250,.86); }
.bf-list li::before { content: ''; position: absolute; left: 2px; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.35); }
.bf-list li.k-site::before { background: var(--ice); }
.bf-list li.k-raise::before, .bf-list li.k-goal::before { background: #fff; }
.bf-list li.k-rival::before, .bf-list li.k-bad::before, .bf-list li.k-stall::before { background: var(--diesel); }
.bf-quiet, .bf-more { margin: 0; font-family: var(--body); font-size: 13px; color: rgba(236,242,250,.55); }
.bf-list li.bf-x { display: none; }
.bf-all .bf-list li.bf-x { display: block; }
button.bf-more { justify-self: start; padding: 6px 0; border: 0; background: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(236,242,250,.3); }
button.bf-more:hover { color: #fff; }
.bf-list li.k-hearing::before, .bf-list li.k-townhall::before { background: #fff; }
.bf-road { display: grid; gap: 8px; }
.bf-road ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.bf-road li { display: grid; gap: 6px; }
.bf-road li i { display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,.14); }
.bf-road li span { font-family: var(--display); font-weight: 600; font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: rgba(236,242,250,.42); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf-road li.done i { background: var(--ice); } .bf-road li.done span { color: rgba(236,242,250,.7); }
.bf-road li.now i { background: #fff; box-shadow: 0 0 8px rgba(143,195,255,.7); } .bf-road li.now span { color: #fff; }
.bf-road p { margin: 0; font-family: var(--body); font-size: 14px; line-height: 1.4; color: rgba(236,242,250,.9); }
.bf-road p b { margin-right: 6px; font-family: var(--display); font-weight: 600; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ice); }
.bf-tip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: 16px; text-align: left; cursor: pointer;
  background: rgba(143,195,255,.1); box-shadow: inset 0 0 0 1px rgba(143,195,255,.42); color: #fff; font: inherit; transition: background .2s ease; }
.bf-tip:hover { background: rgba(143,195,255,.18); }
.bf-tip:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
.bf-who { font-family: var(--display); font-weight: 600; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ice); white-space: nowrap; }
.bf-say { font-family: var(--body); font-size: 14px; line-height: 1.4; }
.bf-arrow { font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--ice); }
.bf-sub { margin: 4px 0 0; font-family: var(--display); font-weight: 600; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.bf-goals { margin: 0; }
.bf-goals li { padding: 6px 0; font-size: 13.5px; }
.bf-race { margin: 0; font-family: var(--body); font-size: 13px; line-height: 1.45; color: rgba(236,242,250,.75); }
.bf-race b { margin-right: 6px; font-family: var(--display); font-weight: 600; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--diesel); }
.bf-left { gap: 14px; }
.bf-left > .bf-col { gap: 10px; }
.bf-review { display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 12px 14px 6px; border-radius: 18px; background: rgba(0,0,0,.2); }
.bf-review > b { font-size: 56px; line-height: .85; }
.bf-review > div { min-width: 0; flex: 1; }
.bf-review p { margin: 0 0 4px; font-family: var(--body); font-size: 13.5px; color: rgba(236,242,250,.75); }
.bf-review p strong { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 18px; line-height: 1.2; color: #fff; }
.bf-review em { font-style: normal; font-weight: 600; color: var(--ice); } .bf-review em.down { color: var(--diesel); }
.bf-review .rv-goals { margin: 0; }
.bf-review .rv-goals li { padding: 4px 0; font-size: 13px; }
html.gm-open .game-news, html.gm-open .game-goal { opacity: 0; visibility: hidden; }   /* (under a briefing or a sheet: they'd show through the glass) */
.game-brief .gm-actions { align-items: center; }
.bf-moves { font-family: var(--display); font-weight: 600; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.bf-lede { margin: 0 0 18px; font-family: var(--body); font-size: 16px; line-height: 1.5; color: rgba(236,242,250,.85); text-wrap: pretty; }
.bf-loop { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; counter-reset: bf; }
.bf-loop li { counter-increment: bf; display: grid; grid-template-columns: 30px 116px minmax(0, 1fr); align-items: baseline; font-family: var(--body); font-size: 14px; line-height: 1.45; color: rgba(236,242,250,.76); }
.bf-loop li::before { content: counter(bf, decimal-leading-zero); font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .12em; color: var(--muted); }
.bf-loop b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 20px; color: #fff; }
.bf-intro .bf-road { margin-bottom: 22px; }
@media (max-width: 760px) {
  .game-brief { padding: 24px 20px 20px; border-radius: 30px; }
  .bf-cols { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .bf-cols > .bf-col:last-child { order: -1; }   /* this quarter first on a phone */
  .bf-head .gm-title { font-size: 38px; }
  .bf-cash b { font-size: 24px; }
  .bf-loop li { grid-template-columns: 26px minmax(0, 1fr); }
  .bf-loop li span { grid-column: 2; }
  .bf-road li span { display: none; }   /* (too narrow for six names: the line under says which step it is) */
  .bf-review > b { font-size: 52px; }
}

/* Build: the road, the sites under way with their five phases, then the open sites */
.gb-road { margin: 2px 0 4px; padding: 14px 16px; border-radius: 20px; background: rgba(0,0,0,.18); }
.gb-phases { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 3px; }
.gb-phases li { padding: 3px 7px; border-radius: 999px; font-family: var(--display); font-weight: 600; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: rgba(236,242,250,.4); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.gb-phases li.done { color: var(--ice); box-shadow: inset 0 0 0 1px rgba(143,195,255,.45); }
.gb-phases li.now { color: #0b1522; background: #fff; box-shadow: none; }
.gsi-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 280px; }
.gsi-acts .pc-act { height: 38px; padding: 0 16px; font-size: 17px; }
.gsi-taken { margin: 4px 2px 0; font-family: var(--body); font-size: 13px; color: var(--diesel); }
.gt-cap span { font-family: var(--display); font-style: normal; font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 900px) {
  .gsi-acts { grid-column: 1 / -1; grid-row: 3; justify-content: flex-start; max-width: none; }
}

/* events as texts: a consequence under each reply, and the sender's colour */
.tx-r small { display: block; margin-top: 3px; font-size: 12px; color: rgba(236,242,250,.62); }
.game-texts.tx-event .tx-av { background: linear-gradient(180deg, #7b8aa3, #3c4a63); font-size: 13px; }

/* CEO game on iPhone (html.bleed): the stage runs under Safari's bars, so the game's panels centre on the part you can see and fit inside it */
html.bleed .game-menu, html.bleed .game-team, html.bleed .game-sheet, html.bleed .game-texts { top: calc(50% + (var(--top) - var(--bleed) - var(--lift)) / 2); }
html.bleed .game-menu { max-height: calc(100% - 48px - var(--top) - var(--bleed) - var(--lift)); }
html.bleed .game-team, html.bleed .game-sheet { height: min(660px, calc(100% - 20px - var(--top) - var(--bleed) - var(--lift))); }
html.bleed .game-texts { height: min(640px, calc(100% - 24px - var(--top) - var(--bleed) - var(--lift))); }

/* CEO game: a raised laptop (the brief on Slack, or opened by hand) sits over the HUD's middle, so the HUD and the step line step out until it's put away; the phone's game texts keep them (it's narrow, and "Playing Q3" matters there) */
html.pov-open:not(.tx-phone) .game-hud.on, html.pov-open:not(.tx-phone) .game-goal { opacity: 0; visibility: hidden; pointer-events: none; }

/* CEO game HUD: the race's label names its dots by colour, and the small labels hold up over bright ground (snow at a site) */
.gh-race > i b { font-weight: 700; }
.ghr-you { color: var(--ice); }
.ghr-them { color: var(--diesel); }
.game-hud .gh-date i, .game-hud .gh-num i, .game-hud .gh-race > i { color: rgba(236,242,250,.74); text-shadow: 0 1px 6px rgba(0,0,0,.55); }
.stage.visit .game-hud { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02) 42%, rgba(255,255,255,.04)), rgba(6,11,20,.62); }
.pc-pay .pc-warn { font-style: normal; color: var(--diesel); }   /* a signing that costs more than the cash in the bank */

/* CEO game recap on a wide, short screen (a 667px-tall laptop): three columns of stats so Keep building stays in view */
@media (min-width: 900px) {
  .game-recap { width: min(760px, calc(100vw - 32px)); }
  .rc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 18px; }
}
@media (min-width: 900px) and (max-height: 760px) {
  .game-recap { padding-top: 26px; padding-bottom: 22px; }
  .rc-head { margin-bottom: 14px; }
  .rc-stats div { padding: 8px 0 7px; }
  .rc-next { margin-bottom: 16px; }
}

/* CEO game HUD between phone and laptop widths (an iPad upright, a half-screen window): the phone's two rows, clear of the Moon button */
@media (min-width: 641px) and (max-width: 900px) {
  .game-hud { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; justify-content: stretch; align-items: center; gap: 8px 12px; height: auto; padding: 9px 9px 9px 18px; border-radius: 28px;
    width: min(540px, calc(100vw - 190px)); box-sizing: border-box; }
  .gh-date { grid-column: 1; grid-row: 1; } .gh-cash { grid-column: 2; grid-row: 1; } .gh-turn { grid-column: 3 / 5; grid-row: 1; justify-self: end; }
  .gh-race { display: none; }
  .gh-acts { grid-column: 1 / 4; grid-row: 2; }
  .gh-acts .gh-menu { flex: 1; padding: 0 10px; }
  .gh-main { grid-column: 4; grid-row: 2; padding: 0 12px; }
  .game-goal { top: calc(128px + env(safe-area-inset-top) + var(--top)); }
  .game-ask { top: calc(130px + env(safe-area-inset-top) + var(--top)); }
  .game-news { top: calc(128px + env(safe-area-inset-top) + var(--top)); }
}

/* CEO game panels while a game is on: centred in the room under the HUD (they sat on its bottom edge and the console
   sliced the cash), and the brief's and recap's buttons stay pinned in view when the panel has to scroll */
@media (min-width: 641px) {
  .stage:has(.game-hud.on) :is(.game-brief, .game-recap, .game-crit) { top: calc(50% + 38px + var(--top) / 2 - var(--bleed) / 2); max-height: calc(100% - 100px - var(--top) - var(--bleed)); }
  .stage:has(.game-hud.on) :is(.game-sheet, .game-team) { top: calc(50% + 38px); height: min(640px, calc(100% - 96px)); }   /* (the sheets too: the HUD peeked over their top edge) */
}
.game-brief .gm-actions { position: sticky; bottom: -22px; z-index: 3; margin: 0 -32px -22px; padding: 16px 32px 22px; }
.game-brief.bf-scroll .gm-actions { background: linear-gradient(to top, rgb(8,13,22) 78%, rgba(8,13,22,0)); }
@media (max-width: 640px) { .game-brief .gm-actions { bottom: -20px; margin: 0 -20px -20px; padding: 14px 20px 20px; } }

/* CEO game console on a short laptop screen (667px tall): a shorter rod and trend so the buttons sit inside the panel */
@media (min-width: 641px) and (max-height: 760px) {
  .game-crit { padding-top: 24px; padding-bottom: 20px; }
  .game-crit .gm-title { font-size: 34px; }
  .game-crit .gm-lede { margin-bottom: 12px; font-size: 14px; }
  .cr-rod { height: 128px; }
  .cr-trend { height: 96px; }
  .cr-msg { margin-bottom: 12px; min-height: 0; }
}
@media (min-width: 641px) and (max-width: 900px) {   /* the two-row HUD is taller: panels and sheets start lower */
  .stage:has(.game-hud.on) :is(.game-brief, .game-recap, .game-crit) { top: calc(50% + 62px); max-height: calc(100% - 148px); }
  .stage:has(.game-hud.on) :is(.game-sheet, .game-team) { top: calc(50% + 62px); height: min(640px, calc(100% - 144px)); }
}

/* CEO game panels that scroll: the rim light is drawn on the scrolling box, so it slid up through the text (the
   brief on a phone, the console). Those panels keep the plain inset edge instead; the console also tightens on a
   phone so it doesn't have to scroll at all. */
.game-brief.bf-scroll::before { display: none; }
@media (max-width: 640px) {
  .game-brief::before, .game-crit::before, .game-recap::before { display: none; }
  .game-crit { padding: 22px 18px 18px; }
  .game-crit .gm-title { font-size: 30px; }
  .game-crit .gm-lede { margin-bottom: 10px; font-size: 13.5px; }
  .cr-panel { grid-template-columns: 54px minmax(0, 1fr); gap: 12px; margin-bottom: 10px; }
  .cr-rod { height: 112px; }
  .cr-trend { height: 84px; }
  .cr-msg { margin-bottom: 10px; min-height: 0; font-size: 13.5px; }
  .cr-read dd { font-size: 15px; }
}

/* CEO game brief on a phone: January's grade comes first (it was under "This quarter", below the fold) */
@media (max-width: 760px) { .game-brief .bf-cols > .bf-col:has(.bf-review) { order: -2; } }

/* CEO game on a phone: under a panel (the brief, the console, the recap, a sheet) the HUD steps out, since its
   two rows peeked out from under the panel's top edge; and Build's five phase chips stay on one line */
@media (max-width: 640px) {
  html.gm-open .game-hud.on { opacity: 0; visibility: hidden; pointer-events: none; }
  .gb-phases { flex-wrap: nowrap; gap: 4px; }
  .gb-phases li { padding-left: 6px; padding-right: 6px; font-size: 8.5px; letter-spacing: .06em; }
}
/* CEO game on an upright iPad: sheets use the height there is (they were a 640px box with globe above and below) */
@media (min-width: 641px) and (max-width: 900px) and (min-height: 900px) {
  .stage:has(.game-hud.on) :is(.game-sheet, .game-team) { height: calc(100% - 180px); }
}
.bf-ends { margin: 0; font-family: var(--body); font-size: 13px; line-height: 1.4; color: var(--diesel); }   /* contracts running out this quarter, in the brief */

/* ---------- CEO game: the desk (game/desk.js, build.js) ----------
   National Defence's proposal is a sheet like Raise: the call, three choices as cards, Cosmic's package as a checklist
   and Submit. The Raise sheet adds the quarter's investor update and the funding radar's calls (a real program links
   its source); the brief adds what's waiting in Slack. */
.pp-call { padding: 16px 18px; border-radius: 22px; background: rgba(0,0,0,.18); }
.pp-lede { margin: 2px 0 0; max-width: 62ch; font-family: var(--body); font-size: 15px; line-height: 1.45; color: rgba(236,242,250,.9); }
.pp-src, .gr-src { color: var(--ice); text-decoration: none; }
.pp-src:hover, .gr-src:hover { text-decoration: underline; }
.gr-src { display: inline-block; margin-top: 6px; font-family: var(--body); font-size: 12.5px; }
.pp-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.pp-opts.pp-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pp-opt { display: grid; gap: 4px; justify-items: start; text-align: left; padding: 14px 16px; border: 0; border-radius: 18px; cursor: pointer; color: var(--fg);
  background: rgba(255,255,255,.055); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.16); transition: background .2s ease, box-shadow .2s ease; }
.pp-opt:hover { background: rgba(255,255,255,.1); }
.pp-opt.on { background: rgba(143,195,255,.14); box-shadow: inset 0 0 0 1.5px var(--ice); }
.pp-opt:disabled { opacity: .45; cursor: default; }
.pp-opt b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 20px; line-height: 1.1; color: #fff; }
.pp-opt span { font-family: var(--body); font-size: 13px; line-height: 1.35; color: rgba(236,242,250,.7); }
.pp-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pp-check li { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 12px; padding: 12px 16px; border-radius: 16px; background: rgba(255,255,255,.04);
  font-family: var(--body); font-size: 14px; line-height: 1.4; color: rgba(236,242,250,.88); }
.pp-check .gb-mark { margin-top: 1px; }
.pp-check li.ok .gb-mark { box-shadow: none; background: var(--ice) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 7.8' fill='none' stroke='%230b1522' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.pp-check li.part .gb-mark { box-shadow: inset 0 0 0 1.5px rgba(143,195,255,.6); }
.pp-check li.no .gb-mark { box-shadow: inset 0 0 0 1.5px var(--diesel); }
.pp-check li.no { color: var(--diesel); }
.pp-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 8px 0 4px; }
.pp-go > span { font-family: var(--body); font-size: 13.5px; color: rgba(236,242,250,.66); }
.pp-go .pc-err { flex-basis: 100%; }
.gr-lines { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 3px; font-family: var(--body); font-size: 13.5px; line-height: 1.35; color: rgba(236,242,250,.82); }
.gr-lines li.bad { color: var(--diesel); }
.gr-upd-acts { min-width: 0; }
.gr-upd-acts .gr-go { font-size: 16px; }
.bf-radar { margin: 0; font-family: var(--body); font-size: 13px; line-height: 1.4; color: var(--ice); }   /* what's waiting in Slack (or on the sheets), in the brief */
@media (max-width: 640px) {
  .pp-opts, .pp-opts.pp-3 { grid-template-columns: minmax(0, 1fr); }
  .pp-opt { padding: 12px 14px; }
  .pp-opt b { font-size: 18px; }
}

/* ---------- CEO game: the storyline (game/storyline.js; brief.js chapter cards, story.js epilogue) ----------
   A year opens on its chapter: big italic title over the scene, a dark scrim from below, gone in under four seconds
   (a click skips it). The recap ends on the ending's name and what became of everyone. */
.game-chapter { position: absolute; inset: 0; z-index: 30; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; pointer-events: none;
  background: radial-gradient(ellipse at 50% 55%, rgba(6,11,20,.62), rgba(6,11,20,.25) 60%, rgba(6,11,20,0) 85%); opacity: 0; transition: opacity .7s cubic-bezier(.16,1,.3,1); cursor: pointer; }
.game-chapter.on { opacity: 1; pointer-events: auto; }
.game-chapter .ch-k { margin: 0; font-family: var(--display); font-weight: 600; font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--ice);
  transform: translateY(8px); transition: transform 1s cubic-bezier(.16,1,.3,1); }
.game-chapter .ch-t { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(52px, 9vw, 112px); line-height: .95; letter-spacing: -.01em; color: #fff;
  text-shadow: 0 2px 30px rgba(0,0,0,.45); transform: translateY(14px) scale(.98); transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.game-chapter .ch-l { margin: 4px 0 0; max-width: 38ch; font-family: var(--body); font-size: 16px; line-height: 1.45; color: rgba(236,242,250,.86); transform: translateY(10px); transition: transform 1.3s cubic-bezier(.16,1,.3,1); }
.game-chapter.on .ch-k, .game-chapter.on .ch-t, .game-chapter.on .ch-l { transform: none; }
@media (prefers-reduced-motion: reduce) { .game-chapter, .game-chapter * { transition: none !important; } }
.rc-epi { margin: -6px 0 22px; display: grid; gap: 10px; }
.rc-end { margin: 0; display: grid; gap: 3px; }
.rc-end b { font-family: var(--display); font-weight: 600; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ice); }
.rc-end span { font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.3; color: #fff; }
.rc-epi ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.rc-epi li { position: relative; padding-left: 14px; font-family: var(--body); font-size: 13.5px; line-height: 1.4; color: rgba(236,242,250,.82); }
.rc-epi li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 1px; background: var(--ice); }

/* ---------- CEO game: HQ in Toronto (app.js OGN_HQ, game/places.js) ----------
   The camera goes where you are: the brief, hiring and raising happen at HQ, over the opening's Toronto loop; Build,
   End quarter, a site and the Moon cut back to the map. */
.hq-vid { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: var(--night); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .9s cubic-bezier(.65,0,.35,1), visibility 0s linear .9s; }
.hq-vid.on { opacity: 1; visibility: visible; transition: opacity .9s cubic-bezier(.65,0,.35,1), visibility 0s; }
.hq-vid.fast { transition: opacity .3s ease, visibility 0s linear .3s; }
.hq-vid img, .hq-vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hq-vid video { opacity: 0; transition: opacity .4s linear; }
.hq-vid.live video { opacity: 1; }
.hq-vid.on img, .hq-vid.on video { animation: hq-in 2.4s cubic-bezier(.16,1,.3,1) both; }
@keyframes hq-in { from { transform: scale(1.04); } to { transform: none; } }
.hq-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(4,8,14,.62) 0%, rgba(4,8,14,.22) 34%, rgba(4,8,14,0) 58%), linear-gradient(to bottom, rgba(4,8,14,.5) 0%, rgba(4,8,14,.2) 20%, rgba(4,8,14,0) 34%); }
.stage.at-hq .game-goal { text-shadow: 0 1px 3px rgba(2,8,20,.8), 0 0 18px rgba(2,8,20,.6); }   /* (the step line over a bright sky) */
.stage.at-hq .site-dots, .stage.at-hq .site-card { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
/* Google Earth's credit (the loop's own logo is cropped off): with the devices peeking, the bottom is theirs, so it sits
   under the HUD's step line; with one up, the bottom-left corner is clear again. */
@media (min-width: 700px) {
  html.pov-peek:not(.pov-up) .hq-vid .vid-credit { left: 50%; transform: translateX(-50%); top: calc(126px + env(safe-area-inset-top) + var(--top)); bottom: auto; max-width: min(760px, calc(100vw - 32px)); text-align: center; }
  html.pov-up .hq-vid .vid-credit { left: 12px; transform: none; text-align: left; max-width: calc(50% - 190px); }
}
@media (min-width: 700px) and (max-width: 900px) { html.pov-peek:not(.pov-up) .hq-vid .vid-credit { top: calc(184px + env(safe-area-inset-top) + var(--top)); } }
@media (max-width: 699px) { html.pov-peek:not(.pov-up) .hq-vid .vid-credit { max-width: calc(55vw - 24px); } }
@media (prefers-reduced-motion: reduce) { .hq-vid.on img, .hq-vid.on video { animation: none; } }
.stage.at-hq .game-hud { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02) 42%, rgba(255,255,255,.04)), rgba(6,11,20,.62); }   /* (over Toronto's bright sky, as at a site) */

/* Let's Go: the globe fades to black on the way to the desk (/csmc/desk/) */
html.to-desk body { opacity: 0; transition: opacity .45s cubic-bezier(.65,0,.35,1); }