/* Xalaria game client. Sizes in rem/em throughout, so it follows the reader's font size. */
:root {
  --bg: #07080c;
  --panel: #0c0e14;
  --ink: #e9e6df;
  --ink-2: #b8b5ad;
  --muted: #7b7d85;
  --faint: rgba(233, 230, 223, 0.06);
  --hair: rgba(233, 230, 223, 0.13);
  --accent: #e6b36a;
  --life: #7fd6b5;
  --craft: #8fb6f0;      /* vessels speaking */
  --trade: #c3a2ee;      /* merchants and shop assistants speaking */
  --federation: #d7dde6; /* the Intergalactic Federations announcing goodwill */
  --warn: #e58f7b;
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --col: 50rem;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); }
html { touch-action: manipulation; }   /* no double-tap zoom: tapping twice for the keyboard zoomed an iPhone's page past its prompt, with no way back to it (the user, 2026-10-20); a pinch still zooms */
/* Only the history's text can be selected (to copy what the game said); menus, choices, buttons and
   status lines behave as controls. */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.log { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
/* On a computer screen everything (text, controls and the column) is 15% larger, as two presses of ⌘+
   would make it; phones keep the standard size. Everything is in rem, so it scales together. */
@media (min-width: 48em) and (hover: hover) { html { font-size: 115%; } }
body { font: 400 0.9375rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

.app { height: 100vh; height: var(--app-h, 100dvh); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
.dock, .prompt, .tray, .near, .statusline { min-width: 0; }

/* Top bar */
.top { display: flex; align-items: baseline; gap: 1.5rem; padding: 1.1rem max(1.25rem, calc((100vw - var(--col)) / 2)) 0.9rem; border-bottom: 1px solid var(--faint); }
.mark { font: 300 0.95rem/1 var(--sans); letter-spacing: 0.55em; text-decoration: none; }
.who { flex: 1; min-width: 0; font: 300 0.75rem/1.2 var(--mono); color: var(--ink-2); display: flex; gap: 1rem; align-items: baseline; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.who .who-name { color: var(--ink); }
.who .who-title { color: var(--muted); }
.who .who-gc { margin-left: auto; color: var(--accent); }
.top-link { font-size: 0.75rem; color: var(--muted); text-decoration: none; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .top-link:hover { color: var(--ink); } }   /* a touch screen would keep it lit after a tap */

/* Transcript */
.log { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--hair) transparent; }
.log-inner { max-width: var(--col); margin: 0 auto; padding: 1.5rem 1.25rem 1.6rem; display: flex; flex-direction: column; gap: 0.7rem; }
.msg { white-space: pre-wrap; overflow-wrap: anywhere; animation: in 0.35s ease both; }
@keyframes in { from { opacity: 0; transform: translateY(0.25rem); } }
.msg.sys { color: var(--ink); }
.msg.onwards { margin: 0.5rem calc(50% - 50vw); padding: 0.6rem 1.25rem; text-align: center; font: 400 0.7rem/1.6 var(--mono); letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); background: rgba(230, 179, 106, 0.09); border-block: 1px solid rgba(230, 179, 106, 0.22); }   /* 'Journey onwards': a saved game taken up again, a band across the whole page */
.msg.goods { margin-top: 0.25rem; }   /* a shop's goods, read after the shopkeeper's words */
.msg.dim { color: var(--muted); font-size: 0.875rem; }
.past { margin: 0.2rem 0 1rem; }   /* the last session, folded away above the new one */
.past-head { display: block; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 0.55rem 0; cursor: pointer; font: 400 0.68rem/1.6 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.past-head::after { content: '  \25B8  show'; }
.past:not(.collapsed) .past-head::after { content: '  \25BE  hide'; }
.past.collapsed .past-body { display: none; }
.past-body { opacity: 0.5; padding-top: 0.4rem; }
.msg.purpose { font: 400 1.18rem/1.55 var(--serif); color: var(--ink); border-left: 2px solid var(--accent); padding: 0.35rem 0 0.45rem 1rem; margin: 0.6rem 0 0.7rem; }   /* the life's purpose, set apart from errands */
.msg.purpose small { display: block; font: 400 0.7rem/1.6 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.25rem; }
.msg.title { font: 300 1.9rem/1.2 var(--serif); letter-spacing: 0.01em; padding: 0.5rem 0 0.3rem; }
.msg.title small { display: block; font: 400 0.75rem/1.6 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 0.4rem; }
.msg.first-hint { font: 400 0.875rem/1.6 var(--mono); color: var(--accent); margin-top: 0.6rem; }   /* how to begin, for someone new */
.msg.first-begin { display: flex; flex-wrap: wrap; gap: 0.7rem 1rem; align-items: center; margin: 0.9rem 0 0.4rem; }
.msg.first-begin button { font: 500 0.9375rem/1 var(--mono); border-radius: 2rem; padding: 0.85rem 1.3rem; cursor: pointer; }
.msg.first-begin .begin-go { background: var(--accent); color: #0b0c10; border: 1px solid var(--accent); }
.msg.first-begin .begin-own { background: none; color: var(--ink); border: 1px solid rgba(255,255,255,0.25); }
.msg.long { font: 400 1.125rem/1.6 var(--serif); color: var(--ink); }
.msg.speaker { padding-left: 0.9rem; border-left: 1px solid var(--accent); }
.msg.speaker b { display: block; font: 500 0.625rem/1.6 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.msg.speaker q { font: italic 400 1.125rem/1.5 var(--serif); quotes: none; }
.msg.speaker.vessel { border-left-color: var(--life); }
.msg.speaker.vessel b { color: var(--life); }
.msg.speaker.other-vessel { border-left-color: var(--craft); }   /* (not ".craft": that is the nearby-vessel chip) */
.msg.speaker.other-vessel b { color: var(--craft); }
.msg.speaker.shop { border-left-color: var(--trade); }
.msg.speaker.federation { border-left-color: var(--federation); }
.msg.speaker.federation b { color: var(--federation); }
.msg.speaker.shop b { color: var(--trade); }
.msg.speaker.help p { margin: 0.15rem 0 0; color: var(--ink); max-width: 44rem; }   /* help: the clear type, not a quotation */
.msg.speaker.shiplog p.entry { display: grid; grid-template-columns: 2.6rem 1fr; gap: 0.5rem; margin-top: 0.4rem; }
.msg.speaker.shiplog .at { font: 400 0.75rem/1.9 var(--mono); color: var(--life); }   /* hours:minutes after the traveller left */
.msg.speaker.shiplog p.note { color: var(--muted); font-size: 0.875rem; }
.msg.user { color: var(--muted); font: 400 0.8125rem/1.5 var(--mono); margin-top: 0.5rem; padding-left: 2ch; text-indent: -2ch; }   /* running text, wrapping under the words (a long question no longer leaves the › alone on a line) */
.msg.user::before { content: "›"; color: var(--accent); margin-right: 1ch; }
.msg.user .k { color: var(--ink); }
.msg.user .w { color: var(--ink-2); }
.msg.ask { font: 400 0.8125rem/1.5 var(--mono); color: var(--accent); }
.msg.warn { color: var(--ink-2); }   /* an everyday refusal ("Insufficient gc."): quietly, not alarmed */
.msg.dire { color: var(--warn); }   /* red, kept for when the traveller is about to die */
.msg.speaker.dire { color: var(--ink); border-left-color: var(--warn); }
.msg.speaker.dire b { color: var(--warn); }
.msg.cmdlist { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; font: 400 0.8125rem/1.6 var(--mono); color: var(--ink-2); }
.msg.cmdlist span b { color: var(--ink); font-weight: 500; }
figure.art { margin: 0.4rem 0; position: relative; border-radius: 0.5rem; overflow: hidden; border: 1px solid var(--faint); max-width: 34rem; animation: in 0.5s ease both; }
figure.art img, figure.art canvas { display: block; width: 100%; height: auto; }
/* Scenes of the place you are at: the full width of the history, three times as wide as tall. */
figure.art.scene { max-width: none; border: 0; border-radius: 0; background: none; overflow: visible; }
figure.art.scene canvas { aspect-ratio: 3 / 1; height: auto; border-radius: 0.35rem; background: #05060a; opacity: 0; transition: opacity 1.2s ease; }
figure.art.scene figcaption { position: static; margin: 0.28rem 0 0; color: var(--muted); text-shadow: none; }   /* just below the picture */
figure.art.scene canvas.painted { opacity: 1; }
/* Between a world's wilderness and its city: the one fades out slowly and folds away; after a pause the other fades in slowly */
figure.art.scene { transition: max-height 1s ease, margin 1s ease; }
figure.art.scene.leaving canvas, figure.art.scene.leaving figcaption { opacity: 0 !important; transition: opacity 2.4s ease; }
figure.art.scene.gone { overflow: hidden; max-height: 0 !important; margin-top: 0; margin-bottom: 0; }
figure.art.scene.after canvas { transition: opacity 2.6s ease 3.6s; }
figure.art.scene.after figcaption { animation: sceneIn 2.6s ease 3.6s both; }
@keyframes sceneIn { from { opacity: 0; } to { opacity: 1; } }
figure.art figcaption { position: static; margin: 0.28rem 0 0; color: var(--muted); }   /* never over a picture: always just below it */
figure.map { max-width: 30rem; background: #000; }
.legend-keys { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; padding: 0.6rem 0.8rem; font: 400 0.75rem/1.5 var(--mono); color: var(--ink-2); border-top: 1px solid var(--faint); background: var(--panel); }
.legend-keys b { color: var(--accent); font-weight: 400; }

/* Dock: lines above the prompt, the prompt, and a status line below it */
.dock { padding: 0.5rem max(1.25rem, calc((100vw - var(--col)) / 2)) calc(0.6rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--faint); background: linear-gradient(to bottom, rgba(7, 8, 12, 0.6), var(--bg) 1.5rem); }

/* The tray: temporary lines, like Claude Code's progress above its prompt. They push the transcript up; nothing floats. */
.tray { display: grid; gap: 0.3rem; margin-bottom: 0.5rem; font: 400 0.75rem/1.4 var(--mono); }
.tray.empty { display: none; }   /* set by the client: Safari does not re-check :has(:empty) as text changes */
.tray-line { min-width: 0; animation: rise 0.25s ease both; }
.tray-line:empty { display: none; }
/* Where you are, always just above the craft nearby: the clearest line on the screen. */
.where { font: 600 1rem/1.3 var(--sans); color: var(--ink); letter-spacing: 0.01em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.where .verb { color: var(--accent); font-weight: 600; }
@keyframes rise { from { opacity: 0; transform: translateY(0.4rem); } }
.procs { display: grid; gap: 0.2rem; }
.proc { display: flex; align-items: center; gap: 0.75ch; color: var(--ink); transition: opacity 0.4s; animation: rise 0.25s ease both; }
.proc .spin { flex: none; color: var(--accent); display: inline-block; width: 1.2ch; text-align: center; animation: turn 2.6s linear infinite; }
.proc.done .spin { animation: none; color: var(--life); }
.proc.leaving { opacity: 0; }
@keyframes turn { to { transform: rotate(360deg); } }
.proc .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar { flex: none; width: 7rem; height: 0.15rem; border-radius: 0.2rem; background: var(--hair); overflow: hidden; margin-left: auto; }
.bar i { display: block; height: 100%; background: var(--accent); transition: width 0.9s linear; }
.proc.done .bar i { background: var(--life); }
.proc .pc { flex: none; color: var(--muted); min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; }
.near { display: flex; align-items: center; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); padding-right: 1.5rem; }
.near::-webkit-scrollbar { display: none; }
.craft { flex: none; display: inline-flex; align-items: baseline; gap: 0.45rem; padding: 0.22rem 0.6rem; border: 1px solid var(--hair); border-radius: 0.375rem; font: 400 0.75rem/1.3 var(--mono); color: var(--ink-2); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .craft:hover { border-color: var(--ink-2); color: var(--ink); } }   /* a touch screen would keep it lit after a tap */
.craft .k { color: var(--accent); }
.craft .a { font-size: 0.625rem; letter-spacing: 0.12em; color: var(--muted); }
.craft.station { border-style: dashed; }
.near-label { flex: none; font: 400 0.625rem/1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-right: 0.2rem; }
.note { color: var(--ink-2); }
.note::before { content: "› "; color: var(--muted); }
.note.warn { color: var(--warn); }

.prompt { border: 1px solid var(--hair); border-radius: 0.6rem; background: var(--panel); padding: 0.6rem 0.85rem 0.55rem; transition: border-color 0.2s; }
.prompt:not(.away) { border-color: rgba(230, 179, 106, 0.32); }

/* The terminal line: words typed by single keys, then the cursor */
.term { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.75ch; min-height: 1.6em; font: 400 1rem/1.6 var(--mono); cursor: text; }
.caret { color: var(--accent); }
.line { display: contents; }
.line > span { transition: opacity 0.16s; }
.line .w { color: var(--ink); }
.line .c { color: var(--muted); }
.line.clearing > span { opacity: 0; }
/* The cursor sits in the text, right after the last word or letter, on the same baseline. */
.tail { display: inline-block; flex: 1 1 12ch; min-width: 0; max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }   /* long typing wraps inside the box, the cursor with it (the user, 2026-10-20: on a phone it ran off to the right) */
.tail::before { content: "\200b"; }      /* gives the line a text baseline even before anything is typed */
.cursor { display: inline-block; width: 0.6em; height: 1.15em; vertical-align: -0.22em; background: var(--accent); animation: blink 1.06s steps(1) infinite; }
.ph { color: var(--muted); margin-left: 0.9ch; }
@keyframes blink { 50% { opacity: 0; } }
.prompt.waiting .cursor { animation: think 0.5s ease-in-out infinite alternate; }
@keyframes think { from { opacity: 0.25; } }
.prompt.away .cursor { animation: none; background: none; box-shadow: inset 0 0 0 1px var(--accent); }
/* The real field is invisible: it keeps focus and brings up phone keyboards. 1rem stops iOS zooming in. */
.sink { position: absolute; inset: 0; width: 100%; opacity: 0; border: 0; padding: 0; background: none; color: transparent; caret-color: transparent; font-size: 1rem; }

/* Beneath the line: the question and its choices, the quiet hint, or the full command menu */
/* A map answering the question sits just above the input box, which stays its own box below it,
   between the map and the status line. Zoom and drag look further, and ⤢ gives the full view. */
.mapdock:empty { display: none; }
.mapdock { margin: 0 0 0.45rem; }
.mapdock figure.orrery, .mapdock figure.orrery.starmap { height: clamp(10rem, 26vh, 16rem); min-height: 0; margin: 0; animation: none; }
.mapdock figure.orrery:not(.starmap) { height: clamp(9rem, 21vh, 13rem); }   /* the planetary system is a flatter picture */
figure.orrery.expanded { position: fixed !important; inset: 0 !important; width: auto !important; height: auto !important; margin: 0 !important; z-index: 60; border-radius: 0 !important; }
.mapdock .orr-title, .mapdock .orr-sub, figure.orrery.compact .orr-title, figure.orrery.compact .orr-sub,
figure.orrery.journey:not(.expanded) .orr-title, figure.orrery.journey:not(.expanded) .orr-sub { display: none; }       /* the typed line names the star */
/* A journey's map, wherever it is in the history: exactly the size and look it had in the input box. */
figure.orrery.journey:not(.expanded) { height: clamp(9rem, 21vh, 13rem); min-height: 0; }
figure.orrery.compact .orr-top, figure.orrery.journey:not(.expanded) .orr-top { padding: 0.5rem 0.6rem; }
figure.orrery.compact .orr-route, figure.orrery.journey:not(.expanded) .orr-route { padding: 0.25rem 0.5rem; left: 0.5rem; bottom: 0.5rem; }
figure.orrery.compact .orr-route b, figure.orrery.journey:not(.expanded) .orr-route b { font-size: 0.5625rem; }
figure.orrery.compact .orr-route span, figure.orrery.journey:not(.expanded) .orr-route span { font-size: 0.75rem; }
.mapdock .orr-top { padding: 0.5rem 0.6rem; }
/* One line under the typed line: the question, what the pointed-at star is (cut short as needed), and ⏎ cancel. */
.prompt.has-map .menu { max-height: none; overflow: visible; display: flex; align-items: baseline; flex-wrap: nowrap; gap: 0.1rem 1.2rem; }
.prompt.has-map .menu-q { flex: 1 1 auto; margin: 0; min-width: 0; }
.prompt.has-map .menu .opts { display: flex; flex: none; gap: 0 1rem; }
.prompt.has-map .menu-q.with-info { flex-wrap: nowrap; overflow: hidden; gap: 0.8rem; }
.prompt.has-map .menu-q .sm-info { display: flex; flex-wrap: nowrap; gap: 0.6rem; overflow: hidden; white-space: nowrap; flex: 1 1 auto; }
.prompt.has-map .menu-q .sm-info b { flex: none; font-size: 0.875rem; }
.prompt.has-map .menu-q .sm-info span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.prompt.has-map .menu-q .menu-q-text { flex: none; white-space: nowrap; }   /* the question whole, on one line, where there is room; the star's details give way (the user on desktop Chrome, 2026-10-21: "Learn about which star?" in a small column, two rows) */
.prompt.has-map .menu-q .sm-info { min-width: 0; }
/* A phone or a touch screen, the map docked (the user's iPhone, 2026-10-21: "p planets" and "n o" - the question squeezed to
   a word a line, the worlds running off the right and over cancel): there the map's worlds are listed as buttons too
   (xalaria-client.js renderMenu, touchList), so the row may not stay one line. The question keeps its line, with its
   cancel; the choices wrap beneath it, as many lines as they need. */
@media (max-width: 40em), (hover: none) and (pointer: coarse) {
  .prompt.has-map .menu { flex-wrap: wrap; row-gap: 0.35rem; }
  .prompt.has-map .menu-q { flex: 1 1 100%; }
  .prompt.has-map .menu .opts { flex: 1 1 100%; flex-wrap: wrap; gap: 0.15rem 1rem; }
}
@media (max-width: 40em) {   /* a phone (the user, 2026-10-20): the question with its cancel on one line, the star's details below it, whole - not three columns squeezed into one row */
  .prompt.has-map .menu-q.with-info { flex-wrap: wrap; row-gap: 0.3rem; }
  .prompt.has-map .menu-q .menu-q-text { flex: 1 1 auto; min-width: 0; white-space: normal; }
  .prompt.has-map .menu-q .sm-info { flex: 1 1 100%; flex-wrap: wrap; white-space: normal; gap: 0.1rem 0.5rem; overflow: visible; }
  .prompt.has-map .menu-q .sm-info span { white-space: normal; overflow: visible; text-overflow: clip; }
}
/* Above the input box the time controls are small, top right under the zoom buttons; the distance box sits lower left. */
.mapdock .orr-bar { top: 2.45rem; right: 0.55rem; left: auto; bottom: auto; flex-wrap: wrap; row-gap: 0.1rem; justify-content: flex-end; gap: 0.3rem; padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.mapdock .orr-ctl { opacity: 0.4; }                         /* quieter than the zoom buttons above it */
.mapdock .orr-when { order: 9; flex: 0 0 100%; justify-content: flex-end; font-size: 0.5625rem; opacity: 0.6; }   /* the date, faintly, under the controls */
.mapdock .orr-when .orr-date, .mapdock .orr-when .orr-rel { width: auto; }
.mapdock .orr-btn.now { margin-left: 0; }
.mapdock .orr-route { top: auto; bottom: 0.5rem; left: 0.5rem; padding: 0.25rem 0.5rem; }
.mapdock .orr-route b { font-size: 0.5625rem; } .mapdock .orr-route span { font-size: 0.75rem; }
@media (max-width: 40em) { .mapdock .orr-route { display: none; } }   /* phones: the history gives the distance and fuel */
/* Phones: a journey's distance box stays one small line, so it never covers the craft. */
@media (max-width: 40em) {
  figure.orrery.journey:not(.expanded) .orr-route, figure.orrery.compact .orr-route { max-width: 72%; padding: 0.2rem 0.45rem; }
  figure.orrery.journey:not(.expanded) .orr-route span, figure.orrery.compact .orr-route span { font-size: 0.625rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  figure.orrery.journey:not(.expanded) .orr-route b, figure.orrery.compact .orr-route b { font-size: 0.5rem; }
}
/* Full screen: the distance at the lower left, just above the time controls and clear of the zoom buttons. */
figure.orrery.expanded .orr-route, figure.orrery:fullscreen .orr-route { display: grid; top: auto; bottom: calc(3.6rem + env(safe-area-inset-bottom, 0px)); left: 0.8rem; }
@media (max-width: 40em) { figure.orrery.expanded .orr-route { bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px)); } }
/* On a journey there is no time bar: the distance sits at the very bottom of the map, out of the way. */
figure.orrery.journey .orr-route, figure.orrery.journey.expanded .orr-route { top: auto; bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px)); }
.orr-top .orr-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mapdock figure.orrery canvas, figure.orrery:fullscreen canvas, figure.orrery.expanded canvas { touch-action: none; }   /* pinch and drag belong to the map here */
.menu { margin-top: 0.4rem; font: 400 0.8125rem/1.5 var(--mono); color: var(--ink-2); max-height: 46vh; overflow-y: auto; scrollbar-width: thin; }
.menu:empty { display: none; }
.menu.enter > * { animation: in 0.22s ease both; }
.menu-q { font-size: 0.75rem; color: var(--accent); margin-bottom: 0.2rem; }
.menu-q.with-info { display: flex; align-items: baseline; gap: 0.4rem 1.2rem; flex-wrap: wrap; }
.menu-q-text { flex: none; }
/* A submenu's way back, before its question (the main menu has none): faintly boxed, in the question's colour. */
.menu-q.with-cancel { display: flex; align-items: center; gap: 0.4rem 0.75rem; flex-wrap: wrap; }
.menu-q.with-cancel .menu-q-text { flex: 1 1 10rem; min-width: 0; }
.menu-cancel { flex: none; display: inline-flex; align-items: baseline; gap: 0.35rem; margin: 0 0.25rem 0 0; padding: 0.22rem 0.6rem;
  font: inherit; font-size: 0.75rem; line-height: 1.2; color: var(--accent); background: none; border: 1px solid var(--hair); border-radius: 0.3rem; cursor: pointer; }
.menu-cancel b { font-family: var(--mono); font-weight: 500; font-size: 0.6875rem; color: var(--accent); opacity: 0.75; }
.menu-cancel:hover, .menu-cancel:focus-visible { border-color: rgba(230, 179, 106, 0.45); outline: none; }
@media (hover: none) { .menu-cancel { padding: 0.35rem 0.75rem; } }   /* (a comfortable touch) */
/* The star map's description, beside the question in the input area instead of over the map. */
.menu-q .sm-info { position: static; flex: 1 1 18rem; min-width: 0; padding: 0; margin: 0; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--muted); }
.menu-q .sm-info b { font-size: 0.9375rem; }
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0 1rem; }   /* (auto-fit: one choice, or a few, take the whole width) */
.opt { display: flex; gap: 1.2ch; align-items: baseline; min-width: 0; padding: 0.18rem 0.45rem; margin-left: -0.45rem; border-radius: 0.3rem; text-align: left; color: var(--ink-2); }
.opt b { flex: none; min-width: 1ch; font-weight: 400; color: var(--accent); }
.opt span { overflow-wrap: anywhere; }   /* a choice is never cut short: a long one wraps (the user, 28 October: "small winged creature from ...") */
.opt:focus-visible { background: var(--faint); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .opt:hover { background: var(--faint); color: var(--ink); } }
.quiet { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1.3rem; font-size: 0.75rem; color: var(--muted); }
.quiet b { font-weight: 400; color: var(--ink-2); }
.quiet .ask { color: var(--accent); }
.quiet .all { margin-left: auto; }
/* Typing words: the question in full, and (without a keyboard) a return button to send them */
.quiet .send-hint { margin-left: auto; }
.quiet .send-btn { margin-left: auto; padding: 0.5rem 1.1rem; border: 1px solid var(--accent); border-radius: 0.4rem; font: 400 0.875rem/1 var(--mono); color: var(--ink); }
.quiet .send-btn b { font-weight: 400; color: var(--accent); }
/* A name given at the start: the input area fades until the game answers (no cursor, no button, no words) */
.prompt { transition: border-color 0.2s, opacity 0.35s ease; }
.prompt.sent { opacity: 0.45; }
.prompt.sent .cursor { visibility: hidden; }
.prompt.sent.slow .menu::before { content: none; display: none; }   /* (the fade says it: not "Command center thinking") */
.prompt.sent.slow .menu > .quiet { display: flex; }
.quiet .pal-close { order: -1; margin-left: -0.45rem; margin-right: 0.6rem; font-size: 0.875rem; }   /* first, so a phone never scrolls it out of sight */
/* Suggested commands: as many as fit where you are, wrapping to a second line rather than hiding */
.quiet.suggest { flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.quiet.suggest .all { order: 99; }
.hint-cmd.named { color: var(--life); animation: named 2.4s ease-in-out infinite; }   /* the command the computer just named */
.hint-cmd.named b { color: var(--life); }
@keyframes named { 0%, 100% { text-shadow: none; } 50% { text-shadow: 0 0 10px rgba(127, 214, 181, 0.55); } }
@media (hover: hover) and (pointer: fine) { .hint-cmd:hover, .quiet .all:hover { color: var(--ink); } }   /* a touch screen would keep it lit after a tap */
@media (hover: hover) and (pointer: fine) { .hint-cmd:hover b, .quiet .all:hover b { color: var(--accent); } }   /* a touch screen would keep it lit after a tap */
.pal { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 0.5rem 1.2rem; margin-bottom: 0.45rem; }
.pal h3 { margin: 0.2rem 0 0.1rem; font: 500 0.625rem/1.6 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.pal .opt { width: 100%; }
.miss { font-size: 0.75rem; color: var(--warn); margin-bottom: 0.2rem; }

/* The finished line in the transcript */
.msg.user .w { color: var(--ink); }
.msg.user .c { color: var(--muted); }
.msg.user .q { color: var(--accent); opacity: 0.8; }

/* The status line below the prompt */
.statusline .ver { flex: none; font-size: 0.625rem; color: var(--muted); opacity: 0.6; }
.statusline { display: flex; align-items: center; gap: 0.3rem 1.2rem; margin-top: 0.5rem; font: 400 0.6875rem/1.4 var(--mono); color: var(--muted); }
.vicinity { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.55rem; color: var(--ink-2); }
.vicinity span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pulse { flex: none; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--life); box-shadow: 0 0 0.5rem var(--life); animation: pulse 2.4s ease-in-out infinite; }
.pulse.off { background: var(--warn); box-shadow: 0 0 0.5rem var(--warn); }
@keyframes pulse { 50% { opacity: 0.35; } }
.gauges { flex: none; display: flex; align-items: center; gap: 1.1rem; }
.meter { display: flex; gap: 0.45rem; align-items: baseline; }
.meter span { letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.625rem; }
.meter b { font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.meter.low b { color: var(--warn); }
.toggle { font-size: 0.8125rem; line-height: 1; width: 1.9rem; height: 1.9rem; border: 1px solid var(--hair); border-radius: 50%; color: var(--muted); }
.toggle[aria-pressed="true"] { color: var(--accent); border-color: rgba(230, 179, 106, 0.45); }
.toggle[aria-pressed="false"] { text-decoration: line-through; text-decoration-thickness: 1px; opacity: 0.7; }

.ended .prompt .term { opacity: 0.4; }
.ended .prompt .menu-q { color: var(--dim); }

/* Phones: one column of terminal, with everything in reach of a thumb */
@media (max-width: 40em) {
  .top { gap: 0.9rem; padding: calc(0.7rem + env(safe-area-inset-top)) 1rem 0.6rem; }
  .who .who-title, .top-link { display: none; }
  .log-inner { padding: 1rem 1rem 1.25rem; gap: 0.6rem; }
  .msg.title { font-size: 1.6rem; }
  .msg.long, .msg.speaker q { font-size: 1.0625rem; }
  figure.art, figure.map { max-width: none; margin-left: -1rem; margin-right: -1rem; border-radius: 0; border-left: 0; border-right: 0; }
  figure.art.scene canvas { border-radius: 0; }
  figure.art.scene figcaption, figure.art.starview figcaption { padding: 0 1rem; }
  figure.art.starview canvas { border-radius: 0; }
  .dock { padding: 0.45rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom)); }
  .prompt { padding: 0.55rem 0.7rem 0.5rem; border-radius: 0.5rem; }
  .menu { max-height: 38vh; max-height: 38dvh; }
  .mapdock figure.orrery, .mapdock figure.orrery.starmap { height: clamp(10rem, 30dvh, 15rem); }
  .mapdock figure.orrery:not(.starmap), figure.orrery.journey:not(.expanded) { height: clamp(9rem, 24dvh, 12rem); }
  /* Phones: choices flow across the screen and wrap, like words, rather than one to a line. */
  .opts, .opts.wide { display: flex; flex-wrap: wrap; gap: 0.15rem 1rem; }
  .opts .opt { width: auto; max-width: 100%; margin-left: 0; padding-left: 0; padding-right: 0; }
  .opts .opt span { white-space: normal; }
  .pal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem 0.6rem; }
  .quiet { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 0 1.1rem; -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); padding-right: 1.5rem; }
  .quiet::-webkit-scrollbar { display: none; }
  .quiet > * { flex: none; white-space: nowrap; }
  .quiet .all { order: -1; margin-left: 0; }
  .quiet.suggest { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; padding-right: 0; gap: 0.1rem 1.1rem; }
  .quiet.suggest .all { order: -1; }
  .quiet.words { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; padding-right: 0; gap: 0.5rem 1.1rem; align-items: center; }
  .quiet.words > * { white-space: normal; }
  .quiet.words .ask { flex: 1 1 100%; }
  .bar { width: 4.5rem; }
  .statusline { gap: 0.8rem; margin-top: 0.4rem; }
  .gauges { gap: 0.75rem; }
  .meter span { font-size: 0; letter-spacing: 0; }
  .meter span::before { content: attr(data-short); font-size: 0.625rem; letter-spacing: 0.1em; }
  .meter.level { display: none; }
}
/* Touch: taller targets; "tab" means nothing without a keyboard */
@media (hover: none) and (pointer: coarse) {
  .opt { padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .quiet button { padding: 0.35rem 0; }
  .quiet .all b { display: none; }
  .quiet .all::before { content: "☰ "; color: var(--accent); }
  .craft { padding: 0.4rem 0.7rem; }
}
@media (prefers-reduced-motion: reduce) { .msg, figure.art, .menu.enter > *, .tray-line, .proc { animation: none; } .pulse, .cursor, .proc .spin { animation: none; } }

/* Planetary system orrery (system-view.js) */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
figure.orrery { position: relative; margin: 0.4rem 0; width: 100%; height: min(34rem, 68vh); min-height: 20rem; border: 1px solid var(--faint); border-radius: 0.6rem; overflow: hidden; touch-action: none; animation: in 0.5s ease both;
  background: radial-gradient(ellipse at 50% 47%, #0d1018 0%, #06070b 70%); }
figure.orrery canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
figure.orrery.frozen { opacity: 0.75; }
figure.orrery.frozen .orr-bar, figure.orrery.frozen .orr-tools { display: none; }
figure.orrery.expanded { z-index: 80 !important; animation: none; }
.orr-back { display: none; }
figure.orrery.expanded .orr-back { display: block; position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(3.4rem + env(safe-area-inset-bottom, 0px)); z-index: 3;
  font: 500 0.8125rem/1 var(--sans, inherit); letter-spacing: 0.02em; color: var(--ink); background: rgba(10, 12, 18, 0.82); border: 1px solid var(--faint);
  border-radius: 999px; padding: 0.7rem 1.2rem; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
figure.orrery.expanded .orr-back:hover { border-color: var(--gold, #e8b04a); }
html.map-expanded, html.map-expanded body { overflow: hidden; }
figure.orrery.expanded, figure.orrery:fullscreen { position: fixed; inset: 0; z-index: 20; width: 100vw; height: 100vh; height: 100dvh; margin: 0; border-radius: 0; border: 0; }
.orr-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: baseline; gap: 0.7rem; padding: 0.7rem 0.8rem; pointer-events: none; }
.orr-title { font: 400 1.3rem/1 var(--serif); color: var(--ink); }
.orr-sub { font: 400 0.625rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.orr-tools { margin-left: auto; display: flex; gap: 0.3rem; pointer-events: none; }
/* Only the buttons themselves catch a tap: the gaps around them, and the time row's empty parts, pass it to the map beneath. */
.orr-bar { pointer-events: none; }
.orr-tools .orr-btn, .orr-bar .orr-btn, .orr-bar button { pointer-events: auto; }
.orr-bar { position: absolute; left: 0.6rem; right: 0.6rem; bottom: 0.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; padding: 0.35rem 0.45rem 0.35rem 0.8rem;
  background: rgba(9, 11, 17, 0.72); border: 1px solid var(--hair); border-radius: 1.4rem; backdrop-filter: blur(0.6rem); -webkit-backdrop-filter: blur(0.6rem); }
.orr-when { display: flex; align-items: baseline; gap: 0.55rem; font: 400 0.75rem/1 var(--mono); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.orr-date { display: inline-block; width: 11ch; }            /* fixed boxes: changing text never moves the controls */
.orr-rel { display: inline-block; width: 12ch; color: var(--muted); font-size: 0.6875rem; }
.orr-rates { display: flex; gap: 0.15rem; flex-wrap: wrap; }
.orr-btn { font: 400 0.6875rem/1 var(--mono); color: var(--muted); padding: 0.4rem 0.55rem; border: 1px solid transparent; border-radius: 1rem; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .orr-btn:hover { color: var(--ink); } }   /* a touch screen would keep it lit after a tap */
.orr-btn.on { color: var(--ink); border-color: var(--hair); background: var(--faint); }
.orr-btn.icon { font-size: 0.875rem; padding: 0.3rem 0.5rem; border-color: var(--hair); }
.orr-tools .orr-btn { border-color: var(--hair); background: rgba(9, 11, 17, 0.6); }
.orr-btn.now { margin-left: 0; color: var(--accent); border-color: rgba(230, 179, 106, 0.4); letter-spacing: 0.12em; text-transform: uppercase; }
/* Time controls, kept quiet: dim small marks that brighten when pointed at; Live is a green dot and word. */
.orr-ctl { display: flex; gap: 0; opacity: 0.55; transition: opacity 0.2s; }
.orr-bar:hover .orr-ctl, .orr-ctl:focus-within { opacity: 1; }
/* The play buttons always sit just left of Now/Live, whether or not the date is showing. */
.orr-ctl { margin-left: auto; }
.orr-ctl .orr-btn.icon { border-color: transparent; background: none; padding: 0.2rem 0.32rem; font-size: 0.75rem; }
.orr-ctl .orr-btn.icon.on { color: var(--ink); }
.orr-ratelbl { font: 400 0.625rem/1 var(--mono); color: var(--muted); white-space: nowrap; }
/* Parts that come and go (the date away from real time, the speed word) open and close smoothly. */
.orr-when, .orr-ratelbl { overflow: hidden; max-width: 22rem; opacity: 1; transition: max-width 0.4s ease, opacity 0.3s ease, margin 0.4s ease; }
.orr-ratelbl.none { max-width: 0; opacity: 0; margin-left: -0.3rem; }
.orr-btn.now { transition: color 0.3s, border-color 0.3s, background 0.3s, padding 0.3s; }
.orr-btn.now { font-size: 0.5625rem; padding: 0.25rem 0.45rem; min-width: 5.2em; text-align: center; }   /* one width for Live and Now */
.orr-btn.now.live { color: var(--life); border-color: transparent; background: none; padding-left: 0.2rem; }
.orr-btn.now.live::before { content: ""; display: inline-block; width: 0.38rem; height: 0.38rem; margin-right: 0.4rem; border-radius: 50%; background: var(--life); box-shadow: 0 0 0.4rem var(--life); vertical-align: 0.05em; }
/* The date only when away from real time, and quietly: in real time "Live" says it. */
.orr-bar.is-live .orr-when { max-width: 0; opacity: 0; margin-right: -0.3rem; }
figure.orrery.journey .orr-bar { opacity: 0; pointer-events: none; transition: opacity 0.6s ease; }   /* a journey runs in real time: no time bar at all */
.orr-when { color: var(--muted); font-size: 0.6875rem; }
.orr-clock:empty, .orr-rel:empty { display: none; }
.orr-route { position: absolute; left: 0.6rem; bottom: 3.6rem; display: grid; gap: 0.15rem; pointer-events: none; padding: 0.45rem 0.7rem; background: rgba(9, 11, 17, 0.72); border: 1px solid rgba(232, 234, 238, 0.25); border-radius: 0.5rem; backdrop-filter: blur(0.6rem); -webkit-backdrop-filter: blur(0.6rem); }
.orr-route.travel { border-color: rgba(230, 179, 106, 0.3); }   /* a journey: orange, as its line; a distance measured: light grey */
@media (max-width: 40em) { .orr-route { bottom: 5.6rem; } }
.orr-route b { font: 500 0.625rem/1.3 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: #e8eaee; }
.orr-route.travel b { color: var(--accent); }
.orr-route span { font: 400 0.8125rem/1.3 var(--mono); color: var(--ink); }
@media (max-width: 40em) {
  figure.orrery { height: min(30rem, 62vh); }
  .orr-rel { width: 10ch; }
  .orr-clock { display: none; }                    /* the date alone, so the time bar keeps to one line */
  .orr-bar { flex-wrap: nowrap; }
}

/* Star map (star-map.js): shares the orrery's frame, with a one-line reading strip along the bottom */
figure.orrery.starmap { height: min(40rem, 80vh); touch-action: manipulation; }   /* only taps: a drag scrolls the history */
.sm-info { position: absolute; left: 0.6rem; right: 0.6rem; bottom: 0.6rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.9rem; padding: 0.5rem 0.8rem;
  background: rgba(9, 11, 17, 0.72); border: 1px solid var(--hair); border-radius: 0.6rem; backdrop-filter: blur(0.6rem); -webkit-backdrop-filter: blur(0.6rem);
  font: 400 0.75rem/1.4 var(--mono); color: var(--ink-2); pointer-events: none; }
.sm-info b { font: italic 400 1rem/1.3 var(--serif); color: var(--ink); display: inline-flex; align-items: baseline; gap: 0.5rem; }
.sm-legend { color: var(--muted); }
figure.orrery.starmap.frozen .sm-info { display: none; }
@media (max-width: 40em) { figure.orrery.starmap { height: min(34rem, 72vh); } .sm-info { font-size: 0.6875rem; } }

/* Transcript history: the line between a previous visit and this one */
.msg.divider { display: flex; align-items: center; gap: 0.8rem; font: 400 0.625rem/1.6 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin: 0.6rem 0; }
.msg.divider::before, .msg.divider::after { content: ""; flex: 1; height: 1px; background: var(--faint); }

/* While the game answers, the choices stay in place, quietly dimmed. */
/* (the commands are never greyed while the game works: the player may press e again, or anything, at any time) */

/* The full-screen button (and, in full screen, the way back) in bright white: it should be obvious. */
.orr-btn.full { color: #fff !important; border-color: rgba(255, 255, 255, 0.85) !important; opacity: 1 !important; background: rgba(10, 12, 18, 0.7); display: inline-flex; align-items: center; justify-content: center; padding: 0.3rem 0.45rem; }
.orr-btn.full svg { display: block; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.8)); }
.orr-btn.full:hover { border-color: #fff !important; }

/* Phones held sideways (short and wide): every line of height counts, so the history keeps most of it.
   A slim header, the location and nearby craft on one line, a tighter input box, lower maps and pictures. */
@media (orientation: landscape) and (max-height: 520px) {
  .top { padding-top: max(0.7rem, env(safe-area-inset-top)); padding-bottom: 0.35rem; gap: 1rem; align-items: center; }
  .top, .dock { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }   /* (clear of a notch at the side) */
  /* The simulator and full-screen buttons kept off the very top edge and out of the corner (the user, 2026-10-16: on an
     iPhone held sideways, from the Home Screen, a tap on the simulator button did nothing; it sat flush with the top edge
     in the top-right corner, where iOS keeps its own swipe for Control Center). */
  .top .top-actions { padding-right: 0.6rem; }
  .top .sim-toggle { margin-top: 0.1rem; }
  .log-inner { padding-left: max(1.25rem, env(safe-area-inset-left)); padding-right: max(1.25rem, env(safe-area-inset-right)); }
  .top .mark, .top h1, .top .brand { font-size: 0.8rem; }
  .tray { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 1rem; row-gap: 0.15rem; margin-bottom: 0.3rem; }
  .tray .where { font-size: 0.875rem; }
  .tray .procs, .tray .note { grid-column: 1 / -1; }
  .prompt { padding: 0.35rem 0.7rem 0.3rem; }
  .prompt .menu { margin-top: 0.15rem; }   /* (the typed command on its own line, the choices beneath: side by side, they moved as one typed, the user) */
  .mapdock figure.orrery, .mapdock figure.orrery.starmap { height: clamp(6rem, 36dvh, 9rem); }
  .mapdock figure.orrery:not(.starmap), figure.orrery.journey:not(.expanded) { height: clamp(6rem, 32dvh, 8.5rem); }
  .statusline { margin-top: 0.2rem; }
  figure.art.scene canvas { max-height: 46dvh; width: auto; max-width: 100%; margin: 0 auto; }
  figure.orrery { height: min(26rem, 78dvh); min-height: 12rem; }
  .msg { margin-top: 0.35rem; margin-bottom: 0.35rem; }
}

/* The distance and cost of a trip to the world just chosen: secondary to the world's description above it. */
.msg.trip { font-size: 0.8125rem; color: var(--dim, #8a8f99); opacity: 0.85; }

/* A star reached: its surface across the whole width of the history. */
figure.art.starview { max-width: none; border: 0; border-radius: 0; background: none; overflow: visible; }
figure.art.starview figcaption { position: static; margin: 0.28rem 0 0; color: var(--muted); text-shadow: none; }   /* below the picture, as for worlds and stations */
figure.art.starview canvas { aspect-ratio: 3 / 1; border-radius: 0.35rem; }

/* The gravestone: a shard of clear crystal rendered as light would show it (js/crystal.js), sized to its inscription:
   the words are carved into it (a dark lip above each stroke, a catch of light below). Without WebGL, a faint glass. */
figure.grave { position: relative; margin: 0.9rem 0 1rem; display: flex; justify-content: center; animation: graveIn 1.8s ease both;
  filter: drop-shadow(0 0 20px rgba(120, 180, 255, 0.2)) drop-shadow(0 22px 30px rgba(0, 0, 0, 0.6)); }
.grave-stone { position: relative; width: min(100%, 26rem); padding: 31% 20% 14%; box-sizing: border-box; text-align: center;   /* padding %: of the width (crystal.js panel) */
  color: #e9f3ff; font-family: var(--serif); background: linear-gradient(170deg, rgba(150, 190, 240, 0.14), rgba(60, 90, 150, 0.1)) center / 76% 100% no-repeat; }
.grave-stone.cut { background: var(--crystal) center / 100% 100% no-repeat; }
.grave-text, .grave-text * { text-shadow: 0 -1px 0 rgba(5, 15, 40, 0.75), 0 1px 0 rgba(220, 240, 255, 0.28), 0 0 9px rgba(150, 200, 255, 0.3); }
.grave-rip { margin: 0 0 0.6rem; font: 400 0.66rem/1 var(--sans, system-ui); letter-spacing: 0.42em; text-transform: uppercase; color: #c9def5; }
.grave-name { font-size: 1.3rem; line-height: 1.12; color: #ffffff; overflow-wrap: anywhere; }
.grave-deeds { margin-top: 0.5rem; font: 400 0.82rem/1.45 var(--serif); color: #e4eefa; overflow-wrap: anywhere; }
.grave-arts { margin-top: 0.4rem; font: italic 400 0.78rem/1.4 var(--serif); color: #c9dbef; overflow-wrap: anywhere; }
.grave-how { margin-top: 0.45rem; font-size: 0.9rem; line-height: 1.33; font-style: italic; color: #d6e6f8; overflow-wrap: anywhere; }
.grave-score { margin-top: 0.7rem; padding-top: 0.55rem; border-top: 1px solid rgba(200, 230, 255, 0.24);
  font: 400 0.64rem/1 var(--mono, monospace); letter-spacing: 0.22em; text-transform: uppercase; color: #bcd6f2; }
@keyframes graveIn { from { opacity: 0; transform: translateY(1.2rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { figure.grave, .grave-stone::after, .grave-layer { animation: none; } }

/* The game has not answered yet (starting a game can take a while): the old choices make way for this. */
.prompt.slow .menu > * { display: none; }
.prompt.slow .menu::before { content: "Command center thinking\2026"; display: block; padding: 0.35rem 0; font: 400 0.875rem/1.4 var(--mono); letter-spacing: 0.06em;
  color: var(--accent, #e6b36a); animation: think 0.9s ease-in-out infinite alternate; }
.prompt.slow .menu { opacity: 1; }
/* A command named in text ('c communicate'), as the menu shows it: letter orange, word grey (the user, 2026-10-15). */
.cmd, .msg.speaker .cmd { white-space: nowrap; font: 400 0.86em/1 var(--mono); cursor: pointer; }   /* the menu's own type, inline in the words */
.cmd b, .msg.speaker .cmd b { display: inline; font: inherit; letter-spacing: 0; text-transform: none; color: var(--accent); }
.cmd span, .msg.speaker .cmd span { font: inherit; color: var(--ink-2); }
.cmd:hover span { color: var(--ink); }

/* The internal Universe Simulator (inner-sim.js): one icon at the top right, and the simulator over everything. */
.top-actions { display: flex; align-items: center; gap: 1rem; align-self: center; }
.sim-toggle { display: grid; place-items: center; width: 2rem; height: 2rem; margin: -0.4rem 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; transition: color 0.3s, background 0.3s; }
.sim-toggle[hidden] { display: none; }
/* Full screen (full-screen.js): beside the simulator's icon; where a browser cannot, a short note on the Home Screen. */
.fs-note { position: fixed; z-index: 70; max-width: min(20rem, calc(100vw - 24px)); padding: 0.85rem 1rem; border: 1px solid var(--hair); border-radius: 0.7rem;
           background: #0a0c12; color: var(--ink-2); font: 400 0.875rem/1.5 var(--sans, Inter, system-ui, sans-serif);
           opacity: 0; transform: translateY(-4px); transition: opacity 0.35s ease, transform 0.35s ease; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.fs-note.shown { opacity: 1; transform: none; }
.fs-note p { margin: 0; } .fs-note p + p { margin-top: 0.5rem; color: var(--muted); }
.fs-note b { font-weight: 500; color: var(--ink); }
.fs-share { white-space: nowrap; color: var(--ink); } .fs-share svg { vertical-align: -2px; }
@media (hover: hover) and (pointer: fine) { .sim-toggle:hover { color: var(--ink); background: var(--faint); } }
.inner-sim { position: fixed; inset: 0; z-index: 60; visibility: hidden; opacity: 0; transition: opacity 0.5s ease, visibility 0s linear 0.5s; background: #04050a; }
.inner-sim.open { visibility: visible; opacity: 1; transition: opacity 0.5s ease; }   /* (half a second, in and out: the user, 2026-10-18) */
.inner-sim iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #04050a; }
.inner-sim .sim-back { position: fixed; margin: 0; z-index: 2; color: var(--life); background: rgba(6, 7, 12, 0.45); }
@media (max-width: 40em) { .top-actions { gap: 0.6rem; } }
.inner-sim { overflow: hidden; touch-action: none; overscroll-behavior: none; }
.inner-sim .sim-wait { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; z-index: 1; pointer-events: none;
                       font: italic 400 1.1rem/1.4 var(--serif); color: var(--muted); transition: opacity 0.8s; }
.inner-sim .sim-wait.gone { opacity: 0; }
.inner-sim iframe { z-index: 0; }
/* The arrival: the simulator in the history's place only (inner-sim.js sets its box), the game's bars about it. */
.inner-sim.intro { inset: auto; z-index: 40; will-change: opacity; transform: translateZ(0); }   /* its own layer from first to last: the fade's start changes nothing in how it is drawn (iPhone, 2026-10-18) */
.inner-sim.intro iframe { transform: translateZ(0); }
html.sim-intro #logInner { visibility: hidden; }   /* the history rests unseen under the arrival's flight, which has the whole of its place (inner-sim.js) */
/* A first visit's cue (xalaria-client.js renderMenu): the command panel glows softly and says how to choose, until the
   first command is chosen (the user, 2026-10-21). */
.prompt.cue { border-color: rgba(230, 179, 106, 0.7); animation: cue-glow 2.8s ease-in-out infinite; }
@keyframes cue-glow { 0%, 100% { box-shadow: 0 0 0 1px rgba(230, 179, 106, 0.18), 0 0 14px rgba(230, 179, 106, 0.10); } 50% { box-shadow: 0 0 0 1px rgba(230, 179, 106, 0.42), 0 0 26px rgba(230, 179, 106, 0.22); } }
.ph.cue-ph { color: var(--accent); animation: cue-fade 3.2s ease-in-out infinite; }   /* the empty line's own words, after its ">", fading in and out */
@keyframes cue-fade { 0%, 100% { opacity: 0.2; } 45%, 55% { opacity: 0.95; } }
@media (prefers-reduced-motion: reduce) { .prompt.cue { animation: none; box-shadow: 0 0 0 1px rgba(230, 179, 106, 0.35); } .ph.cue-ph { animation: none; opacity: 0.85; } }
/* (the history stays seen beneath the arrival's flight, which keeps to the picture's band - inner-sim.js; it was hidden
   while the flight filled the history's place, 2026-10-16 to 2026-10-21) */
/* Waiting for its first frame, the arrival's layer is in the page but unseen and untouchable: hidden (visibility), a
   browser may stop drawing inside it, and the flight never began (the user, 2026-10-16: the home page's demo in Chrome). */
.inner-sim.intro:not(.open) { visibility: visible; opacity: 0; pointer-events: none; transition: none; }
.inner-sim.intro .sim-back { display: none; }
.inner-sim.intro .sim-wait { display: none; }