#stage { flex: 1; min-height: 0; }
#view { outline: none; }
#readout {
  position: absolute; left: 12px; top: 12px; padding: 8px 12px; border-radius: 8px;
  background: rgba(16, 16, 16, .75); font: 12px/1.5 ui-monospace, Consolas, monospace; white-space: pre;
  pointer-events: none;
}
/* Where a round will go: the middle of the view, which is where the camera looks. */
#reticle {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; pointer-events: none;
  background:
    linear-gradient(#fff, #fff) center / 2px 2px no-repeat,
    linear-gradient(#fff, #fff) left center / 6px 2px no-repeat, linear-gradient(#fff, #fff) right center / 6px 2px no-repeat,
    linear-gradient(#fff, #fff) center top / 2px 6px no-repeat, linear-gradient(#fff, #fff) center bottom / 2px 6px no-repeat;
  filter: drop-shadow(0 0 1px #000); opacity: .85;
}
#hud, #mission, #tally, #generic { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* The scripts' fade to a colour and back (`game.screenFade`), over the view, the HUD and a mission's card. */
#fade { position: absolute; inset: 0; pointer-events: none; }
/* The tape player's page lies over the view as the HUD does. */
#tape, #tape canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Under a mission's card, and where the game has a film, which is not played, the mission's canvas is dark over
   the whole of the view and the HUD, however wide the window. */
#mission.film { background: #000; }
/* Over a film being played: the colour its script has the view go to, and under that the words of what is said. */
#film-fade { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
#film-page { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#film-words {
  position: absolute; left: 12%; right: 12%; bottom: 7%; pointer-events: none; text-align: center;
  color: #fff; font: 600 clamp(14px, 2.6vh, 28px) / 1.25 sans-serif; text-shadow: 0 0 3px #000, 0 1px 2px #000, 0 0 8px #000;
}
/* While a film is played nothing of the game's own is over it. */
body.filming #hud, body.filming #reticle, body.filming #readout { visibility: hidden; }
/* Behind a box that asks or tells, the whole window is dimmed as the page dims its own screen: black, 100 of 255. */
#mission.dim { background: rgb(0 0 0 / 39%); }
#map, #pause { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The EMPIRE page and those under it lie over the big map, which keeps the mouse; so do the map's prompts and its legend, over those. */
#empire, #empire canvas, #legend, #legend canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* The game's loading screen is on black, over everything of the place that is not yet to be seen. */
#loading { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; pointer-events: none; }
/* The game from its start shows none of the sandbox's figures. */
[data-page="game"] #readout { display: none; }
/* Nor the mouse's arrow over the game, once the folder is chosen: the pause menu, which is pointed at, keeps it. */
[data-page="game"] #stage:has(#welcome[hidden]) :is(#view, #map) { cursor: none; }
/* The sandbox's debug menu: what used to be put there with him at the start, asked for instead. */
#debug {
  position: absolute; right: 12px; top: 12px; width: 290px; max-height: calc(100% - 24px); box-sizing: border-box;
  overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3a3a3a transparent;
  border-radius: 8px; background: rgba(16, 16, 16, .96); border: 1px solid var(--line); font-size: 12px;
}
/* A part of it, shut to its heading or open: the heading says what is so either way. */
#debug details + details { border-top: 1px solid var(--line); }
#debug summary {
  display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; cursor: pointer; user-select: none; list-style: none;
  color: var(--muted); text-transform: uppercase; letter-spacing: .6px; font-size: 11px; font-weight: 600;
}
#debug summary::-webkit-details-marker { display: none; }
#debug summary::before { content: '\25B8'; width: 8px; font-size: 10px; }
#debug details[open] > summary::before { content: '\25BE'; }
#debug summary:hover, #debug details[open] > summary { color: var(--text); }
/* What is there now, beside the heading of what puts it there. */
#debug summary span {
  margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 400;
}
#debug summary span.on { color: var(--accent); }
/* A row of it: its buttons share the width, so the rows line up down the menu. */
#debug details > div { display: flex; gap: 6px; margin: 0 12px 6px; }
#debug details > :last-child { margin-bottom: 12px; }
#debug button, #debug select, #debug input { font: inherit; padding: 4px 8px; min-width: 0; }
#debug button { flex: 1; white-space: nowrap; }
#debug button.short { flex: none; }
#debug select { flex: 1; width: 100%; }
#debug input { width: 56px; box-sizing: border-box; color: var(--text); background: #1b1b1b; border: 1px solid var(--line); border-radius: 6px; }
#debug input[type="range"] { width: 100%; padding: 0; border: 0; background: none; accent-color: var(--accent); }
#debug input[type="text"] { flex: 1; width: auto; }
/* A heading within a part, over the rows that go together. */
#debug h4 { display: flex; align-items: center; gap: 8px; margin: 10px 12px 6px; font-size: 11px; font-weight: 400; color: var(--muted); }
#debug h4::after { content: ''; flex: 1; height: 1px; background: var(--line); }
#debug p { margin: 0 12px 6px; color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }
#debug p.on { color: var(--text); }
/* What he has, a thing to a line: its name, and how much of it. */
#debug dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0 12px 10px; font-variant-numeric: tabular-nums; }
#debug dt { color: var(--muted); }
#debug dd { margin: 0; text-align: right; color: var(--text); }
/* What the debug menu draws over the view: lines and words, under the menus. */
#debug-draw { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* A button that turns something over says which way it is: lit and ON, or dim and OFF. */
#debug button[aria-pressed] { display: flex; align-items: center; gap: 8px; text-align: left; }
#debug button[aria-pressed]::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #3a3a3a; }
#debug button[aria-pressed]::after { content: 'OFF'; margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: .6px; color: var(--muted); }
#debug button[aria-pressed="true"] { border-color: var(--accent); background: #3a1015; color: var(--accent); }
#debug button[aria-pressed="true"]::before { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
#debug button[aria-pressed="true"]::after { content: 'ON'; color: var(--accent); }
#debug button:disabled { opacity: .45; cursor: default; border-color: var(--line); }
/* The button that puts the menu up, while it is up. */
#debug-toggle[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }