/* codex.css — THE CODEX's PAGE on its hologram (codex-ui.js): light on the hologram's glass, no frame; its
   own pixels (the window's less a margin), placed by console-mode.js's transform. A hovered element wears
   `.hover` (the world cursor's: no :hover under the pointer lock) */
#consolePage { position: fixed; left: 0; top: 0; width: 960px; height: 396px; transform-origin: 0 0; z-index: 5; opacity: 0;
  color: #cdeeff; font-family: -apple-system, system-ui, sans-serif; overflow: hidden;
  /* the words alone: the glass under them and the entry's model are the game's, drawn at the page's corners
     (consoles.js page); its size the window's less a margin (console-mode.js) */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 1.5%, #000 98.5%, transparent), linear-gradient(to bottom, transparent, #000 2.5%, #000 97.5%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 1.5%, #000 98.5%, transparent), linear-gradient(to bottom, transparent, #000 2.5%, #000 97.5%, transparent);
  mask-composite: intersect; }
#consolePage[hidden] { display: none; }
.codex-page { display: flex; flex-direction: column; text-shadow: 0 0 6px rgba(140, 210, 255, 0.85); }
.codex-page::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(170, 225, 255, 0.05) 0 1px, transparent 1px 3px); }
.codex-page button { all: unset; cursor: none; }
.codex-page header { display: flex; align-items: center; gap: 36px; padding: 40px 64px 18px; letter-spacing: 0.24em; font-size: 14px; }
.codex-title { font-weight: 700; font-size: 22px; letter-spacing: 0.4em; color: #fff; }
.codex-page nav { display: flex; gap: 18px; flex: 1; }
.codex-page nav button, .codex-close { padding: 4px 10px; opacity: 0.6; }
.codex-page nav button.on { opacity: 1; color: #fff; box-shadow: inset 0 -1px 0 rgba(200, 240, 255, 0.9); }
.codex-page nav button.hover, .codex-close.hover { opacity: 1; background: rgba(170, 225, 255, 0.14); }
.codex-page main { flex: 1; display: flex; min-height: 0; padding: 12px 64px 48px; gap: 40px; }
.codex-list { width: 250px; flex: none; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; scrollbar-width: none; }
.codex-list button { padding: 9px 12px; font-size: 16px; letter-spacing: 0.08em; opacity: 0.65; }
.codex-list button small { display: block; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; }
.codex-list button.on { opacity: 1; color: #fff; background: rgba(170, 225, 255, 0.1); }
.codex-list button.hover { opacity: 1; background: rgba(170, 225, 255, 0.16); }
.codex-model { flex: 0 0 34%; min-width: 0; position: relative; }
.codex-model[hidden] { display: none; }
.codex-body { flex: 1; min-width: 0; overflow-y: auto; font-size: 15px; line-height: 1.55; padding-right: 12px; scrollbar-width: none; }
.codex-body h1 { margin: 0; font-size: 34px; font-weight: 600; letter-spacing: 0.12em; color: #fff; }
.codex-body h2 { margin: 2px 0 10px; font-size: 11px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.75; }
.codex-body h3 { margin: 14px 0 4px; font-size: 11px; letter-spacing: 0.3em; color: #fff; }
.codex-body p { margin: 0 0 8px; }
.codex-body ul { margin: 0; padding-left: 16px; }
.codex-lead { font-size: 18px; color: #fff; }
.codex-stats { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 6px 0 4px; }
.codex-stats dt { font-size: 10px; letter-spacing: 0.3em; opacity: 0.7; }
.codex-stats dd { margin: 0; font-size: 16px; color: #fff; }
.codex-cols { display: flex; gap: 26px; }
.codex-cols > div { flex: 1; }
.codex-note { font-style: italic; opacity: 0.85; border-left: 1px solid rgba(200, 240, 255, 0.5); padding-left: 10px; }
.codex-note span { font-style: normal; font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; opacity: 0.8; margin-right: 6px; }
/* a console engaged (body.console, console-mode.js): the page alone over the world, no HUD round it */
body.console #topBar, body.console #status, body.console #pilotCount, body.console #compass { visibility: hidden; }