/* DEAD CIRCUIT — HUD and menu styles (owned by src/hud.js).

   Look: equipment nameplates on a switchgear cabinet. Flat, stencilled, square corners, thin
   keylines, hazard stripes only where something is wrong. Ink, sodium amber and warning red in
   play; cold teal belongs to the menus only (pale green-teal is the colour of the eyes hunting
   you, so nothing on screen during play uses it).

   Sizes are authored in px at 1080p and multiplied by --px, which hud.js sets on resize
   (0.75 at 720p … 2 at 4K). Anything that moves every frame is moved by hud.js through
   transform / opacity only; nothing in here animates layout. */

#hud {
  --px: 1px;
  --ink: #e8e2d4;
  --ink-dim: rgba(232, 226, 212, 0.55);
  --ink-faint: rgba(232, 226, 212, 0.2);
  --amber: #ffd166;
  --danger: #ff3b30;
  --teal: #36bcc4; /* cold teal, kept on the blue side (B >= G) so it never reads as zombie-eye teal */
  --teal-dim: rgba(54, 188, 196, 0.45);
  --coil: #7fe8ff;
  --void: #050607;
  --plate: rgba(6, 8, 10, 0.55);
  --edge: rgba(6, 8, 10, 0.55);
  --edge-hard: rgba(6, 8, 10, 0.88); /* the reticle must survive a flashlight hot spot on a white wall */
  --track: rgba(232, 226, 212, 0.16);
  --lift: 0 0 2px rgba(6, 8, 10, 0.95), 0 1px 0 rgba(6, 8, 10, 0.8), 0 0 7px rgba(6, 8, 10, 0.55);
  --stripe-amber: repeating-linear-gradient(-45deg, var(--amber) 0 calc(var(--px) * 6), transparent calc(var(--px) * 6) calc(var(--px) * 12));
  --stripe-danger: repeating-linear-gradient(-45deg, var(--danger) 0 calc(var(--px) * 6), transparent calc(var(--px) * 6) calc(var(--px) * 12));
  --font-ui: "DIN Alternate", "Bahnschrift", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-display: "DIN Condensed", "Bahnschrift", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, Menlo, monospace;

  contain: strict;
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--ink);
  text-shadow: var(--lift);
  -webkit-font-smoothing: antialiased;
}
#hud *,
#hud *::before,
#hud *::after {
  box-sizing: border-box;
}

/* ============================================================ in-game layer */

.dc-game,
.dc-blocks {
  position: absolute;
  inset: 0;
}

.dc-lab {
  font-size: max(10px, calc(var(--px) * 12));
  line-height: calc(var(--px) * 14);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-dim);
}

.dc-key {
  display: inline-grid;
  place-items: center;
  min-width: calc(var(--px) * 24);
  height: calc(var(--px) * 24);
  padding: 0 calc(var(--px) * 6);
  border: 1px solid var(--ink);
  background: var(--plate);
  box-shadow: 0 0 0 1px var(--edge);
  font-size: max(10px, calc(var(--px) * 13));
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
  text-shadow: none;
}
.dc-key-s {
  min-width: calc(var(--px) * 17);
  height: calc(var(--px) * 17);
  padding: 0 calc(var(--px) * 3);
  border-color: var(--ink-dim);
  font-size: max(9px, calc(var(--px) * 10));
  color: var(--ink-dim);
}

/* ---- cycle counter: top left. Geometry is mirrored in hud.js resize() (banner landing). */
.dc-round {
  position: absolute;
  left: calc(var(--px) * 56);
  top: calc(var(--px) * 40);
  opacity: 0;
  will-change: opacity;
}
.dc-round .dc-lab {
  height: calc(var(--px) * 14);
  margin-bottom: calc(var(--px) * 6);
}
.dc-round-frame {
  display: grid;
  place-items: center;
  width: calc(var(--px) * 64);
  height: calc(var(--px) * 52);
  border: 1px solid var(--ink-dim);
  background: rgba(6, 8, 10, 0.4);
  box-shadow: 0 0 0 1px var(--edge);
}
.dc-round-num {
  position: relative;
  font-size: calc(var(--px) * 40);
  font-weight: 700;
  line-height: 1;
  will-change: transform;
}
.dc-round-ink,
.dc-round-amb {
  display: block;
}
.dc-round-amb {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--amber);
  opacity: 0;
}
.dc-brk {
  position: absolute;
  left: calc(var(--px) * 76);
  top: calc(var(--px) * 41);
  width: calc(var(--px) * 30);
  height: calc(var(--px) * 10);
}
.dc-brk-post {
  position: absolute;
  top: calc(var(--px) * 3);
  width: calc(var(--px) * 4);
  height: calc(var(--px) * 4);
  background: var(--ink-dim);
  box-shadow: 0 0 0 1px var(--edge);
}
.dc-brk-a {
  left: 0;
}
.dc-brk-b {
  left: calc(var(--px) * 24);
}
.dc-brk-lever {
  position: absolute;
  left: calc(var(--px) * 2);
  top: calc(var(--px) * 4);
  width: calc(var(--px) * 24);
  height: 2px;
  background: var(--ink-dim);
  box-shadow: 0 0 0 1px var(--edge);
  transform-origin: 0 50%;
  transform: rotate(-36deg);
  will-change: transform;
}
.dc-brk.is-closed .dc-brk-lever,
.dc-brk.is-closed .dc-brk-post {
  background: var(--amber);
}

/* ---- power-up timers: top centre */
.dc-timers {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--px) * 40);
  display: flex;
  justify-content: center;
  gap: calc(var(--px) * 22);
}
.dc-timer {
  width: calc(var(--px) * 176);
  will-change: opacity;
}
.dc-timer-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  white-space: nowrap;
}
.dc-timer-n {
  font-size: max(10px, calc(var(--px) * 13));
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dc-timer-s {
  font-size: calc(var(--px) * 22);
  font-weight: 700;
  color: var(--ink);
}
.dc-timer-bar {
  position: relative;
  height: max(3px, calc(var(--px) * 3));
  margin-top: calc(var(--px) * 5);
  overflow: hidden;
  background: var(--track);
  box-shadow: 0 0 0 1px var(--edge);
}
.dc-timer-fill {
  position: absolute;
  inset: 0;
  background: currentColor;
  transform-origin: 0 50%;
  will-change: transform;
}

/* ---- ammo cluster: bottom right */
.dc-ammo {
  position: absolute;
  right: calc(var(--px) * 56);
  bottom: calc(var(--px) * 48);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  contain: layout style;
}
.dc-alt {
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 8);
  margin-bottom: calc(var(--px) * 14);
  opacity: 0;
  font-size: max(10px, calc(var(--px) * 12));
  font-weight: 600;
  letter-spacing: 0.12em;
  white-space: nowrap;
  color: var(--ink-dim);
}
.dc-wname {
  position: relative;
  padding-bottom: calc(var(--px) * 5);
  border-top: 1px solid var(--ink-dim);
  padding-top: calc(var(--px) * 8);
  min-width: calc(var(--px) * 120);
  text-align: right;
}
.dc-wname-t {
  font-size: max(10px, calc(var(--px) * 13));
  font-weight: 600;
  letter-spacing: 0.16em;
  white-space: nowrap;
}
.dc-wname-oc {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: currentColor;
  box-shadow: 0 0 0 1px var(--edge);
}
.dc-ammo.is-oc .dc-wname-oc {
  display: block;
}
.dc-count {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  margin-top: calc(var(--px) * 4);
}
.dc-mag {
  will-change: transform;
}
.dc-mag-n {
  display: block;
  font-size: calc(var(--px) * 56);
  font-weight: 700;
  line-height: 1;
  will-change: opacity;
}
.dc-count-sep {
  align-self: center;
  width: max(1px, calc(var(--px) * 1.5));
  height: calc(var(--px) * 26);
  margin: 0 calc(var(--px) * 9) 0 calc(var(--px) * 12);
  background: var(--ink-dim);
  box-shadow: 0 0 0 1px var(--edge);
  transform: skewX(-16deg);
}
.dc-res {
  font-size: calc(var(--px) * 24);
  font-weight: 700;
  color: var(--ink-dim);
}
.dc-magbar {
  position: relative;
  width: calc(var(--px) * 120);
  height: max(3px, calc(var(--px) * 3));
  margin-top: calc(var(--px) * 6);
  overflow: hidden;
  background: var(--track);
  box-shadow: 0 0 0 1px var(--edge);
}
.dc-magbar-fill {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform-origin: 100% 50%;
  will-change: transform;
}
.dc-magbar-seg {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, transparent calc(100% - 1px), rgba(6, 8, 10, 0.95) 0);
  background-size: 10% 100%;
}
.dc-hazard {
  width: calc(var(--px) * 120);
  height: max(4px, calc(var(--px) * 4));
  margin-top: 3px;
  background: var(--stripe-amber);
  opacity: 0;
}
.dc-pips {
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 5);
  margin-top: calc(var(--px) * 8);
}
.dc-pips .dc-key {
  margin-right: calc(var(--px) * 4);
}
.dc-pip {
  width: calc(var(--px) * 8);
  height: calc(var(--px) * 13);
  border: 1px solid var(--ink-dim);
  box-shadow: 0 0 0 1px var(--edge);
  opacity: 0.5;
}
.dc-pip.is-on {
  border-color: var(--ink);
  background: var(--ink);
  opacity: 1;
}
/* magazine states: colour is never the only cue (stripe appears, number pulses from hud.js) */
.dc-ammo.is-low .dc-mag-n {
  color: var(--amber);
}
.dc-ammo.is-low .dc-magbar-fill {
  background: var(--amber);
}
.dc-ammo.is-crit .dc-mag-n,
.dc-ammo.is-empty .dc-mag-n {
  color: var(--danger);
}
.dc-ammo.is-crit .dc-magbar-fill {
  background: var(--danger);
}
.dc-ammo.is-crit .dc-hazard,
.dc-ammo.is-empty .dc-hazard {
  opacity: 1;
}
.dc-ammo.is-empty .dc-hazard {
  background: var(--stripe-danger);
}
.dc-ammo.res-low .dc-res {
  color: var(--amber);
}
.dc-ammo.res-none .dc-res {
  color: var(--danger);
}
.dc-ammo.is-flash .dc-mag-n {
  color: #fff;
}

/* ---- points, stims, vitals: bottom left */
.dc-left {
  position: absolute;
  left: calc(var(--px) * 56);
  bottom: calc(var(--px) * 48);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  contain: layout style;
}
.dc-stims {
  display: flex;
  gap: calc(var(--px) * 6);
  height: calc(var(--px) * 28);
  margin-bottom: calc(var(--px) * 14);
}
.dc-stim {
  display: grid;
  place-items: center;
  width: calc(var(--px) * 28);
  height: calc(var(--px) * 28);
  border: 1px solid currentColor;
  background: rgba(6, 8, 10, 0.62);
  box-shadow: 0 0 0 1px var(--edge);
  will-change: transform;
}
.dc-stim svg {
  width: 74%;
  height: 74%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.dc-pts {
  position: relative;
  border-top: 1px solid var(--ink-dim);
  padding-top: calc(var(--px) * 8);
  min-width: calc(var(--px) * 160);
}
.dc-pts-n {
  margin-top: calc(var(--px) * 4);
  font-size: calc(var(--px) * 34);
  font-weight: 700;
  line-height: 1.05;
  white-space: nowrap;
  color: var(--amber);
  transform-origin: 0 80%;
  will-change: transform;
}
.dc-pts.is-deny .dc-pts-n {
  color: var(--danger);
}
/* multi-kill tag: takes the place of the POINTS label for a moment */
.dc-flow {
  position: absolute;
  left: 0;
  top: calc(var(--px) * 7);
  opacity: 0;
  font-size: max(12px, calc(var(--px) * 16));
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  white-space: nowrap;
  color: var(--amber);
  transform-origin: 0 50%;
  will-change: transform, opacity;
}
/* popups start level with the number, clear of the stim chips above, and rise */
.dc-pops {
  position: absolute;
  left: calc(var(--px) * 142);
  top: calc(var(--px) * 44);
  width: 0;
  height: 0;
}
.dc-pop {
  position: absolute;
  left: 0;
  top: calc(var(--px) * -9);
  opacity: 0;
  font-size: calc(var(--px) * 17);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
  transform-origin: 0 50%;
  contain: layout style;
  will-change: transform, opacity;
}
.dc-pop.t-kill,
.dc-pop.t-crit,
.dc-pop.t-bonus {
  color: var(--amber);
}
.dc-pop.t-crit::after {
  /* a headshot or knife kill carries a marker as well as a size */
  content: '';
  display: inline-block;
  width: 0.36em;
  height: 0.36em;
  margin-left: 0.3em;
  background: currentColor;
  transform: rotate(45deg) translateY(-0.24em);
}
.dc-pop.t-spend {
  color: var(--danger);
}
.dc-hp {
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 9);
  margin-top: calc(var(--px) * 8);
}
.dc-hp-bar {
  position: relative;
  width: calc(var(--px) * 160);
  height: max(4px, calc(var(--px) * 4));
  overflow: hidden;
  background: var(--track);
  box-shadow: 0 0 0 1px var(--edge);
}
.dc-hp.is-thick .dc-hp-bar {
  width: calc(var(--px) * 224);
}
.dc-hp-fill,
.dc-hp-ghost {
  position: absolute;
  inset: 0;
  transform-origin: 0 50%;
  will-change: transform;
}
.dc-hp-fill {
  background: var(--ink);
}
.dc-hp-ghost {
  background: var(--danger);
}
.dc-hp.is-hurt .dc-hp-fill {
  background: var(--danger);
}
.dc-hp.is-hurt .dc-hp-ghost {
  background: #fff;
}
.dc-hp.is-hurt .dc-lab {
  color: var(--danger);
}

/* ---- first-run key reminder: bottom centre */
.dc-brief {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--px) * 92);
  display: flex;
  justify-content: center;
  gap: calc(var(--px) * 26);
  opacity: 0;
  will-change: opacity;
}
.dc-brief-i {
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 4);
  white-space: nowrap;
}
.dc-brief-t {
  margin-left: calc(var(--px) * 5);
  font-size: max(10px, calc(var(--px) * 12));
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.dc-brief .dc-key {
  border-color: var(--ink-dim);
  color: var(--ink);
}

/* ---- stamina: bottom centre, only while it is not full */
.dc-stam {
  position: absolute;
  left: 50%;
  bottom: calc(var(--px) * 58);
  width: calc(var(--px) * 220);
  height: max(3px, calc(var(--px) * 3));
  margin-left: calc(var(--px) * -110);
  overflow: hidden;
  opacity: 0;
  background: var(--track);
  box-shadow: 0 0 0 1px var(--edge);
  will-change: opacity;
}
.dc-stam-fill {
  position: absolute;
  inset: 0;
  background: rgba(232, 226, 212, 0.85);
  transform-origin: 50% 50%;
  will-change: transform;
}
.dc-stam.is-low .dc-stam-fill {
  background: var(--amber);
}

/* ============================================================ screen centre */

.dc-center,
.dc-xh,
.dc-hm,
.dc-hm-in,
.dc-hm-out,
.dc-hm-set,
.dc-hm-arm {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}

/* ---- reticle. --xl / --xw / --xo / --xd / --xdo are whole pixels set per weapon class. */
.dc-xh {
  --xl: 8px;
  --xw: 2px;
  --xo: 1px;
  --xd: 2px;
  --xdo: 1px;
  opacity: 0;
  will-change: opacity;
}
.dc-xt,
.dc-xdot,
.dc-xbr,
.dc-xring {
  display: none;
  position: absolute;
}
.dc-xt,
.dc-xdot {
  background: var(--ink);
  box-shadow: 0 0 0 1px var(--edge-hard);
}
.dc-xt {
  will-change: transform;
}
.xh-ticks .dc-xt,
.xh-dot .dc-xdot,
.xh-ring .dc-xring,
.xh-coil .dc-xbr {
  display: block;
}
.dc-xt-r {
  left: 0;
  top: calc(var(--xo) * -1);
  width: var(--xl);
  height: var(--xw);
}
.dc-xt-l {
  left: calc(var(--xl) * -1);
  top: calc(var(--xo) * -1);
  width: var(--xl);
  height: var(--xw);
}
.dc-xt-u {
  left: calc(var(--xo) * -1);
  top: calc(var(--xl) * -1);
  width: var(--xw);
  height: var(--xl);
}
.dc-xt-d {
  left: calc(var(--xo) * -1);
  top: 0;
  width: var(--xw);
  height: var(--xl);
}
.dc-xdot {
  left: calc(var(--xdo) * -1);
  top: calc(var(--xdo) * -1);
  width: var(--xd);
  height: var(--xd);
}
/* on target: red, in every reticle style */
.dc-xh.is-hot .dc-xt,
.dc-xh.is-hot .dc-xdot {
  background: var(--danger);
}
.dc-xh.is-hot .dc-xbr {
  border-color: var(--danger);
}
.dc-xh.is-hot .dc-xring-fg {
  stroke: var(--danger);
}
/* coilgun: brackets that ride the real cone */
.dc-xbr {
  top: calc(var(--px) * -6);
  width: calc(var(--px) * 5);
  height: calc(var(--px) * 12);
  border: var(--xw) solid var(--ink);
  filter: drop-shadow(0 0 1px rgba(6, 8, 10, 0.9));
  will-change: transform;
}
.dc-xbr-l {
  left: calc(var(--px) * -5);
  border-right: 0;
}
.dc-xbr-r {
  left: 0;
  border-left: 0;
}
/* shotgun: four 50° arcs; pathLength is 360, so the dash pattern is in degrees */
.dc-xring {
  overflow: visible;
}
.dc-xring circle {
  fill: none;
  transform: rotate(-25deg);
}
.dc-xring-bg {
  stroke: var(--edge-hard);
  stroke-dasharray: 52 38;
  stroke-dashoffset: 1;
}
.dc-xring-fg {
  stroke: var(--ink);
  stroke-dasharray: 50 40;
}
/* coilgun charge gauge: a 16 px ring that fills clockwise from 12 o'clock */
.dc-xcoil {
  position: absolute;
  overflow: visible;
  opacity: 0;
  will-change: opacity;
}
.dc-xcoil circle {
  fill: none;
  stroke-width: 2;
  transform: rotate(-90deg);
}
.dc-xcoil .dc-xcoil-bg {
  stroke: rgba(6, 8, 10, 0.7);
  stroke-width: 4;
}
.dc-xcoil .dc-xcoil-track {
  stroke: rgba(232, 226, 212, 0.3);
  stroke-width: 1;
}
.dc-xcoil-cool {
  stroke: var(--ink-dim);
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}
.dc-xcoil-arc {
  stroke: var(--coil);
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}
.dc-xcoil .dc-xcoil-flash {
  stroke: #e6ffff;
  stroke-width: 3;
  opacity: 0;
}

/* ---- hit marker: static ticks on rotated arms; hud.js scales / fades the layers */
.dc-hm-in {
  will-change: transform;
}
.dc-hm-set {
  opacity: 0;
  will-change: opacity;
}
.dc-d0 {
  transform: rotate(45deg);
}
.dc-d1 {
  transform: rotate(135deg);
}
.dc-d2 {
  transform: rotate(225deg);
}
.dc-d3 {
  transform: rotate(315deg);
}
.dc-c1 {
  transform: rotate(90deg);
}
.dc-c2 {
  transform: rotate(180deg);
}
.dc-c3 {
  transform: rotate(270deg);
}
.dc-hm-tk {
  position: absolute;
  left: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.dc-hm-body .dc-hm-tk {
  top: calc(max(2px, var(--px) * 2) / -2);
  width: calc(var(--px) * 8);
  height: max(2px, calc(var(--px) * 2));
  background: #fff;
  transform: translateX(calc(var(--px) * 6));
}
.dc-hm-head .dc-hm-tk {
  top: calc(max(2px, var(--px) * 2) / -2);
  width: calc(var(--px) * 10);
  height: max(2px, calc(var(--px) * 2));
  background: var(--amber);
  transform: translateX(calc(var(--px) * 6));
}
.dc-hm-kill .dc-hm-tk {
  top: calc(max(3px, var(--px) * 3) / -2);
  width: calc(var(--px) * 12);
  height: max(3px, calc(var(--px) * 3));
  background: var(--danger);
  transform-origin: 0 50%;
  will-change: transform;
}
.dc-hm-crit .dc-hm-tk {
  top: calc(max(2px, var(--px) * 2) / -2);
  width: calc(var(--px) * 8);
  height: max(2px, calc(var(--px) * 2));
  background: var(--amber);
  will-change: transform;
}
.dc-xn {
  position: absolute;
  left: calc(var(--px) * 26);
  top: calc(var(--px) * 8);
  opacity: 0;
  font-size: max(11px, calc(var(--px) * 14));
  font-weight: 700;
  white-space: nowrap;
  color: var(--amber);
  transform-origin: 0 50%;
  will-change: transform, opacity;
}

/* ---- reload / no-ammo hint and reload progress: 64 px under the centre */
.dc-hint {
  position: absolute;
  left: 0;
  top: calc(var(--px) * 64);
  width: 0;
  height: 0;
  opacity: 0;
  will-change: transform, opacity;
}
.dc-hint-in {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
  transform: translateX(-50%);
}
.dc-hint-t {
  font-size: max(11px, calc(var(--px) * 13));
  font-weight: 700;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: var(--amber);
  text-shadow: 0 0 2px #000, 0 1px 0 rgba(0, 0, 0, 0.9), 0 0 6px rgba(0, 0, 0, 0.9);
}
.dc-hint.is-none .dc-hint-t {
  color: var(--danger);
}
.dc-hint-bar {
  display: none;
  position: relative;
  width: calc(var(--px) * 80);
  height: max(3px, calc(var(--px) * 3));
  overflow: hidden;
  background: rgba(232, 226, 212, 0.2);
  box-shadow: 0 0 0 1px var(--edge);
}
.dc-hint.is-bar .dc-hint-bar {
  display: block;
}
.dc-hint.is-bar .dc-hint-t {
  display: none;
}
.dc-hint-fill {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform-origin: 0 50%;
  will-change: transform;
}

/* ---- interaction prompt: 150 px under the centre */
.dc-prompt {
  position: absolute;
  left: 0;
  top: calc(var(--px) * 150);
  width: 0;
  height: 0;
  opacity: 0;
  will-change: transform, opacity;
}
/* A plate behind it: prompts are read against whatever the flashlight is burning out. */
.dc-prompt-in {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 10);
  padding: calc(var(--px) * 9) calc(var(--px) * 16) calc(var(--px) * 11) calc(var(--px) * 10);
  border: 1px solid rgba(232, 226, 212, 0.16);
  background: rgba(6, 8, 10, 0.62);
  white-space: nowrap;
  transform: translateX(-50%);
}
.dc-prompt-t {
  font-size: max(12px, calc(var(--px) * 18));
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dc-prompt-cost {
  margin-left: calc(var(--px) * 8);
  font-size: max(12px, calc(var(--px) * 19));
  font-weight: 700;
  color: var(--amber);
}
.dc-prompt-hold {
  display: none;
  margin-right: calc(var(--px) * -3);
  font-size: max(9px, calc(var(--px) * 11));
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--amber);
}
.dc-prompt.is-hold .dc-prompt-hold {
  display: inline;
}
.dc-prompt.is-hold .dc-key {
  border-color: var(--amber);
  color: var(--amber);
}
.dc-prompt.no-key .dc-key,
.dc-prompt.no-cost .dc-prompt-cost {
  display: none;
}
.dc-prompt.no-key .dc-prompt-in {
  padding-left: calc(var(--px) * 16);
}
.dc-prompt-stripe {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: max(4px, calc(var(--px) * 4));
  overflow: hidden;
}
.dc-prompt-stripe-in {
  position: absolute;
  left: calc(var(--px) * -40);
  right: calc(var(--px) * -40);
  top: 0;
  bottom: 0;
  background: var(--stripe-amber);
  will-change: transform;
}
.dc-prompt.is-hold .dc-prompt-stripe,
.dc-prompt.is-short .dc-prompt-stripe {
  display: block;
}
/* cannot afford: red cost, red stripe, everything else stands down */
.dc-prompt.is-short .dc-prompt-cost {
  color: var(--danger);
}
.dc-prompt.is-short .dc-prompt-stripe-in {
  background: var(--stripe-danger);
}
.dc-prompt.is-short .dc-prompt-t,
.dc-prompt.is-blocked .dc-prompt-t {
  color: var(--ink-dim);
}
.dc-prompt.is-short .dc-key,
.dc-prompt.is-blocked .dc-key {
  border-color: var(--ink-dim);
  color: var(--ink-dim);
}
.dc-prompt.is-blocked .dc-prompt-cost {
  color: var(--ink-dim);
}

/* ---- damage direction */
/* drawn pointing up; hud.js sizes the box and puts the transform origin on the screen centre */
.dc-arc {
  position: absolute;
  overflow: visible;
  opacity: 0;
  will-change: transform, opacity;
}
.dc-arc-core {
  fill: #ff2a1a;
}
.dc-arc-glow {
  fill: rgba(255, 42, 26, 0.26);
}
.dc-arc .dc-arc-w,
.dc-arc.is-wide .dc-arc-n {
  display: none;
}
.dc-arc.is-wide .dc-arc-w {
  display: inline;
}
.dc-edge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--px) * 8);
  opacity: 0;
  background: var(--danger);
  box-shadow: 0 0 calc(var(--px) * 46) calc(var(--px) * 12) rgba(255, 59, 48, 0.4);
  will-change: opacity;
}

/* ============================================================ notice line (22 % from the top) */

.dc-notice,
.dc-rb,
.dc-ban {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}
.dc-notice {
  left: 50%;
  top: 22%;
}
.dc-rb,
.dc-ban {
  opacity: 0;
}
.dc-rb {
  will-change: opacity;
}
.dc-rb-lab {
  position: absolute;
  left: 0;
  top: calc(var(--px) * -96);
  font-size: max(12px, calc(var(--px) * 18));
  font-weight: 600;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  white-space: nowrap;
  color: var(--ink-dim);
  transform: translateX(-50%);
  will-change: opacity;
}
.dc-rb-num {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.dc-rb-wipe {
  overflow: hidden;
  will-change: transform;
}
.dc-rb-wipe-in {
  position: relative;
  padding: 0 calc(var(--px) * 12);
  will-change: transform;
}
.dc-rb-sl {
  display: block;
  font-size: calc(var(--px) * 132);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 0 calc(var(--px) * 3) rgba(6, 8, 10, 0.9), 0 calc(var(--px) * 2) 0 rgba(6, 8, 10, 0.8);
  will-change: transform;
}
.dc-rb-sl.dc-sl1,
.dc-rb-sl.dc-sl2,
.dc-lost-sl.dc-sl1,
.dc-lost-sl.dc-sl2 {
  position: absolute;
  top: 0;
}
.dc-rb-sl.dc-sl1,
.dc-rb-sl.dc-sl2 {
  left: calc(var(--px) * 12);
}
.dc-lost-sl.dc-sl1,
.dc-lost-sl.dc-sl2 {
  left: 0;
}
/* three bands of one line of text; the bands overlap by a hair so no seam shows at rest */
.dc-sl0 {
  clip-path: inset(-10% -20% 65% -20%);
}
.dc-sl1 {
  clip-path: inset(34% -20% 33% -20%);
}
.dc-sl2 {
  clip-path: inset(66% -20% -10% -20%);
}
.dc-rb-rule {
  position: absolute;
  left: calc(var(--px) * -160);
  top: calc(var(--px) * 70);
  width: calc(var(--px) * 320);
  height: 2px;
  background: var(--amber);
  box-shadow: 0 0 0 1px var(--edge);
  transform-origin: 0 50%;
  transform: scaleX(0);
  will-change: transform, opacity;
}

.dc-ban {
  will-change: transform, opacity;
}
.dc-ban-c {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}
.dc-ban-row {
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 16);
}
.dc-ban-t {
  font-size: calc(var(--px) * 30);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: var(--acc, var(--ink));
}
.dc-ban-rule {
  width: calc(var(--px) * 72);
  height: 2px;
  background: var(--acc, var(--ink));
  box-shadow: 0 0 0 1px var(--edge);
  will-change: transform;
}
.dc-ban-rule-l {
  transform-origin: 100% 50%;
}
.dc-ban-rule-r {
  transform-origin: 0 50%;
}
.dc-ban-sub {
  margin-top: calc(var(--px) * 9);
  font-size: max(10px, calc(var(--px) * 12));
  font-weight: 600;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.dc-ban.no-sub .dc-ban-sub {
  display: none;
}
.dc-ban-x {
  margin-left: calc(var(--px) * 14);
  color: var(--amber);
}
.dc-ban.no-x .dc-ban-x {
  display: none;
}
.dc-ban.k-info .dc-ban-t {
  font-size: calc(var(--px) * 22);
  letter-spacing: 0.24em;
  text-indent: 0.24em;
}
.dc-ban.k-info .dc-ban-rule {
  width: calc(var(--px) * 44);
  height: 1px;
  background: var(--ink-dim);
}
.dc-ban.k-powerup {
  --acc: var(--amber);
}
.dc-ban.k-warn {
  --acc: var(--danger);
}
.dc-ban.k-warn .dc-ban-rule {
  height: max(4px, calc(var(--px) * 4));
  background: var(--stripe-danger);
  box-shadow: none;
}
.dc-ban.k-round .dc-ban-t {
  font-size: max(11px, calc(var(--px) * 14));
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: var(--ink);
}
.dc-ban.k-round .dc-ban-rule {
  width: calc(var(--px) * 36);
  height: 1px;
  background: var(--amber);
}

/* ============================================================ death: signal lost */

.dc-lost {
  display: none;
  position: absolute;
  inset: 0;
}
.dc-lost-scrim {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: var(--void);
  will-change: opacity;
}
.dc-tear {
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  background: rgba(232, 226, 212, 0.13);
  will-change: transform, opacity;
}
.dc-tear0 {
  top: 17%;
  height: calc(var(--px) * 3);
}
.dc-tear1 {
  top: 36%;
  height: calc(var(--px) * 26);
  background: rgba(232, 226, 212, 0.06);
}
.dc-tear2 {
  top: 53%;
  height: 2px;
  background: rgba(255, 59, 48, 0.55);
}
.dc-tear3 {
  top: 69%;
  height: calc(var(--px) * 10);
}
.dc-tear4 {
  top: 84%;
  height: calc(var(--px) * 2);
  background: rgba(232, 226, 212, 0.3);
}
/* a child of #hud placed after the menus: the headline of the game-over report as well */
.dc-lost-box {
  position: absolute;
  left: 0;
  right: 0;
  top: 13%;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  pointer-events: none;
}
.dc-lost-lab {
  margin-bottom: calc(var(--px) * 14);
  font-family: var(--font-mono);
  font-size: max(10px, calc(var(--px) * 12));
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: var(--ink-dim);
}
.dc-lost-title {
  position: relative;
  font-family: var(--font-display);
  font-size: calc(var(--px) * 108);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.dc-lost-sl {
  display: block;
  will-change: transform;
}
.dc-lost-rule {
  width: calc(var(--px) * 440);
  height: calc(var(--px) * 6);
  margin-top: calc(var(--px) * 10);
  background: var(--stripe-danger);
  transform: scaleX(0);
  will-change: transform;
}
.dc-lost-sub {
  margin-top: calc(var(--px) * 14);
  opacity: 0;
  font-family: var(--font-mono);
  font-size: max(11px, calc(var(--px) * 14));
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--danger);
  will-change: opacity;
}

/* ============================================================ menus */

.dc-menu {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: auto;
  cursor: default;
  text-shadow: none;
}
.dc-menu-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 6, 7, 0.95) 0%, rgba(5, 6, 7, 0.86) 34%, rgba(5, 6, 7, 0.46) 72%, rgba(5, 6, 7, 0.62) 100%);
}
.dc-menu.m-pause .dc-menu-scrim {
  background: linear-gradient(90deg, rgba(5, 6, 7, 0.95) 0%, rgba(5, 6, 7, 0.88) 40%, rgba(5, 6, 7, 0.72) 100%);
}
.dc-menu.m-gameover .dc-menu-scrim {
  background: rgba(5, 6, 7, 0.66);
  animation: dc-fade 0.6s both;
}

/* frame lines and captions */
.dc-chrome {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: max(9px, calc(var(--px) * 11));
  letter-spacing: 0.22em;
  white-space: nowrap;
  color: var(--ink-dim);
}
.dc-chrome::before,
.dc-chrome::after {
  content: '';
  position: absolute;
  left: calc(var(--px) * 56);
  right: calc(var(--px) * 56);
  height: 1px;
  background: var(--ink-faint);
}
.dc-chrome::before {
  top: calc(var(--px) * 64);
}
.dc-chrome::after {
  bottom: calc(var(--px) * 64);
}
.dc-chrome-tl,
.dc-chrome-tr,
.dc-chrome-bl,
.dc-chrome-br {
  position: absolute;
}
.dc-chrome-tl {
  left: calc(var(--px) * 56);
  top: calc(var(--px) * 40);
}
.dc-chrome-tr {
  right: calc(var(--px) * 56);
  top: calc(var(--px) * 40);
  color: var(--teal);
}
.dc-chrome-bl {
  left: calc(var(--px) * 56);
  bottom: calc(var(--px) * 36);
  width: calc(var(--px) * 190);
  height: calc(var(--px) * 9);
  background: var(--stripe-amber);
  opacity: 0.85;
}
.dc-chrome-br {
  right: calc(var(--px) * 56);
  bottom: calc(var(--px) * 35);
}
.dc-menu.m-gameover .dc-chrome-tl,
.dc-menu.m-gameover .dc-chrome-tr,
.dc-menu.m-gameover .dc-chrome::before {
  display: none;
}

.dc-scr {
  display: none;
  position: absolute;
  inset: 0;
}
.dc-menu.m-main .dc-scr-main,
.dc-menu.m-pause .dc-scr-pause,
.dc-menu.m-gameover .dc-scr-over {
  display: block;
}

/* the left column of the main and pause menus */
.dc-col {
  position: absolute;
  left: calc(var(--px) * 96);
  top: 50%;
  width: calc(var(--px) * 420);
  transform: translateY(-50%);
}
.dc-col > * {
  animation: dc-rise 0.42s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.dc-col > :nth-child(2) {
  animation-delay: 0.04s;
}
.dc-col > :nth-child(3) {
  animation-delay: 0.08s;
}
.dc-col > :nth-child(4) {
  animation-delay: 0.12s;
}
.dc-col > :nth-child(5) {
  animation-delay: 0.16s;
}
.dc-col > :nth-child(6) {
  animation-delay: 0.2s;
}
.dc-kicker {
  display: flex;
  align-items: center;
  margin-bottom: calc(var(--px) * 20);
  font-family: var(--font-mono);
  font-size: max(10px, calc(var(--px) * 12));
  letter-spacing: 0.3em;
  white-space: nowrap;
  color: var(--teal);
}
.dc-kicker::before {
  content: '';
  flex: none;
  width: calc(var(--px) * 8);
  height: calc(var(--px) * 8);
  margin-right: calc(var(--px) * 12);
  background: var(--teal);
}
.dc-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(var(--px) * 132);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}
.dc-title span {
  display: block;
}
.dc-title-b {
  color: var(--amber);
  animation: dc-sodium 7s steps(1) infinite;
}
.dc-title-sm {
  font-size: calc(var(--px) * 104);
  line-height: 0.95;
}
/* RESUME must sit exactly where PLAY was: the cursor comes back from pointer lock on the spot
   it left from, and that spot must never be RESTART. The pause column is vertically centred
   like the main one, so its top padding makes up for a title one line shorter (128.2) and for
   half-shifting by its extra button (54 + 10): 128.2 + 64 = 192.2. */
.dc-scr-pause .dc-col {
  padding-top: calc(var(--px) * 192.2);
}
/* the mark: a conductor whose switch has been left open */
.dc-trace {
  position: relative;
  width: calc(var(--px) * 400);
  height: calc(var(--px) * 22);
  margin: calc(var(--px) * 14) 0 calc(var(--px) * 16);
}
.dc-trace > div {
  position: absolute;
  top: calc(var(--px) * 16);
  height: 2px;
  background: var(--teal);
}
.dc-trace-l {
  left: 0;
  width: calc(var(--px) * 236);
}
.dc-trace-l::after,
.dc-trace-r::before {
  content: '';
  position: absolute;
  top: calc(var(--px) * -3);
  width: calc(var(--px) * 8);
  height: calc(var(--px) * 8);
  background: var(--teal);
}
.dc-trace-l::after {
  right: calc(var(--px) * -4);
}
.dc-trace-r::before {
  left: calc(var(--px) * -4);
}
.dc-trace > .dc-trace-sw {
  left: calc(var(--px) * 236);
  width: calc(var(--px) * 40);
  background: var(--amber);
  transform-origin: 0 50%;
  transform: rotate(-24deg);
}
.dc-trace-r {
  left: calc(var(--px) * 278);
  right: 0;
}
.dc-tagline {
  margin: 0 0 calc(var(--px) * 30);
  font-family: var(--font-mono);
  font-size: max(11px, calc(var(--px) * 14));
  line-height: 1.6;
  letter-spacing: 0.04em;
  white-space: pre-line;
  color: var(--ink-dim);
}
.dc-foot {
  margin-top: calc(var(--px) * 22);
  font-family: var(--font-mono);
  font-size: max(10px, calc(var(--px) * 11));
  letter-spacing: 0.14em;
  white-space: nowrap;
  text-transform: uppercase;
  color: rgba(232, 226, 212, 0.45);
}

/* buttons */
.dc-nav {
  display: flex;
  flex-direction: column;
  gap: calc(var(--px) * 10);
  width: calc(var(--px) * 340);
}
.dc-btn {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 14);
  width: 100%;
  height: calc(var(--px) * 54);
  margin: 0;
  padding: 0 calc(var(--px) * 18) 0 calc(var(--px) * 22);
  border: 1px solid var(--ink-faint);
  border-radius: 0;
  outline: none;
  background: rgba(6, 8, 10, 0.5);
  font: 700 calc(var(--px) * 20) / 1 var(--font-ui);
  letter-spacing: 0.2em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.1s, background-color 0.1s, color 0.1s;
}
.dc-btn::before {
  /* hazard tab: grows in when the button is selected */
  content: '';
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: calc(var(--px) * 8);
  background: var(--stripe-amber);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.1s;
}
.dc-btn-ix {
  font-family: var(--font-mono);
  font-size: max(9px, calc(var(--px) * 11));
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
}
.dc-btn-lb {
  flex: 1;
  transition: transform 0.1s;
}
.dc-btn-go {
  width: calc(var(--px) * 9);
  height: calc(var(--px) * 9);
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  opacity: 0;
  transform: rotate(45deg);
  transition: opacity 0.1s;
}
.dc-btn:hover,
.dc-btn:focus {
  border-color: var(--amber);
  background: rgba(255, 209, 102, 0.08);
  color: var(--amber);
}
.dc-btn:hover::before,
.dc-btn:focus::before {
  transform: scaleX(1);
}
.dc-btn:hover .dc-btn-lb,
.dc-btn:focus .dc-btn-lb {
  transform: translateX(calc(var(--px) * 6));
}
.dc-btn:hover .dc-btn-go,
.dc-btn:focus .dc-btn-go {
  opacity: 1;
}
.dc-btn:active {
  background: rgba(255, 209, 102, 0.18);
}
.dc-btn.is-on {
  border-color: var(--teal-dim);
}
.dc-btn.is-on .dc-btn-ix {
  color: var(--teal);
}
.dc-btn-pri {
  border-color: var(--amber);
  color: var(--amber);
}
.dc-btn-pri::before {
  transform: scaleX(1);
}
.dc-btn-pri:hover,
.dc-btn-pri:focus {
  background: var(--amber);
  color: #0a0b0c;
}
.dc-btn-pri:hover::before,
.dc-btn-pri:focus::before {
  background: repeating-linear-gradient(-45deg, #0a0b0c 0 calc(var(--px) * 6), transparent calc(var(--px) * 6) calc(var(--px) * 12));
}
.dc-btn-pri:hover .dc-btn-ix,
.dc-btn-pri:focus .dc-btn-ix {
  color: rgba(10, 11, 12, 0.6);
}
.dc-btn.dc-confirm,
.dc-btn.dc-confirm:hover,
.dc-btn.dc-confirm:focus {
  border-color: var(--danger);
  background: rgba(255, 59, 48, 0.1);
  color: var(--danger);
}
.dc-btn.dc-confirm::before {
  background: var(--stripe-danger);
  transform: scaleX(1);
}
/* RESUME while the browser still refuses to re-capture the mouse (RELOCK_MS in hud.js, which
   also removes the class when the wait is over) */
.dc-btn.dc-arming {
  opacity: 0.5;
  cursor: wait;
}
.dc-btn.dc-arming::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: currentColor;
  transform-origin: 0 50%;
  animation: dc-arm 1.3s linear both;
}

/* detail panel: field notes / controls / settings */
.dc-detail {
  display: none;
  position: absolute;
  left: calc(var(--px) * 640);
  top: 50%;
  width: min(calc(var(--px) * 680), calc(100% - var(--px) * 720));
  padding: calc(var(--px) * 26) calc(var(--px) * 30) calc(var(--px) * 28);
  border: 1px solid var(--ink-faint);
  background: rgba(6, 8, 10, 0.74);
  transform: translateY(-50%);
}
.dc-menu.m-main .dc-detail,
.dc-menu.m-pause .dc-detail {
  display: block;
}
.dc-detail::before,
.dc-detail::after {
  /* corner brackets */
  content: '';
  position: absolute;
  width: calc(var(--px) * 14);
  height: calc(var(--px) * 14);
  border: 2px solid var(--teal);
}
.dc-detail::before {
  left: -1px;
  top: -1px;
  border-right: 0;
  border-bottom: 0;
}
.dc-detail::after {
  right: -1px;
  bottom: -1px;
  border-left: 0;
  border-top: 0;
}
.dc-detail-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--px) * 16);
  margin-bottom: calc(var(--px) * 16);
  padding-bottom: calc(var(--px) * 13);
  border-bottom: 1px solid var(--ink-faint);
  font-family: var(--font-mono);
  white-space: nowrap;
}
.dc-detail-t {
  font-size: max(11px, calc(var(--px) * 13));
  letter-spacing: 0.32em;
  color: var(--teal);
}
.dc-detail-tag {
  font-size: max(9px, calc(var(--px) * 10.5));
  letter-spacing: 0.2em;
  color: rgba(232, 226, 212, 0.4);
}
.dc-pane {
  display: none;
}
.dc-detail.d-notes .dc-pane-notes,
.dc-detail.d-controls .dc-pane-controls,
.dc-detail.d-settings .dc-pane-settings {
  display: block;
}

.dc-note {
  display: grid;
  grid-template-columns: calc(var(--px) * 36) 1fr;
  row-gap: calc(var(--px) * 7);
  padding: calc(var(--px) * 13) 0;
  border-bottom: 1px dashed var(--ink-faint);
}
.dc-note:first-child {
  padding-top: calc(var(--px) * 2);
}
.dc-note:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.dc-note-ix {
  font-family: var(--font-mono);
  font-size: max(10px, calc(var(--px) * 12));
  line-height: calc(var(--px) * 16);
  color: var(--amber);
}
.dc-note-h {
  font-size: max(12px, calc(var(--px) * 16));
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.dc-note-p {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: max(11px, calc(var(--px) * 12.5));
  line-height: 1.55;
  color: rgba(232, 226, 212, 0.68);
}

.dc-keys {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(var(--px) * 26);
  row-gap: calc(var(--px) * 10);
}
.dc-krow {
  display: flex;
  align-items: center;
  gap: calc(var(--px) * 12);
  min-height: calc(var(--px) * 26);
}
.dc-knote {
  display: block;
  margin-top: calc(var(--px) * 3);
  font-family: var(--font-mono);
  font-size: max(9px, calc(var(--px) * 10.5));
  font-weight: 400;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--ink-dim);
}
.dc-kcaps {
  display: flex;
  flex: none;
  gap: calc(var(--px) * 4);
  min-width: calc(var(--px) * 112);
}
.dc-kdesc {
  font-size: max(11px, calc(var(--px) * 14));
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.25;
  text-transform: uppercase;
}

.dc-set {
  padding: calc(var(--px) * 8) 0 calc(var(--px) * 10);
}
.dc-set-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: calc(var(--px) * 9);
}
.dc-set-lab {
  font-size: max(11px, calc(var(--px) * 14));
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.dc-set-val {
  font-family: var(--font-mono);
  font-size: max(11px, calc(var(--px) * 13));
  letter-spacing: 0.06em;
  color: var(--amber);
}
.dc-range {
  -webkit-appearance: none;
  appearance: none;
  --f: 0.5;
  display: block;
  width: 100%;
  height: calc(var(--px) * 18);
  margin: 0;
  outline: none;
  background: transparent;
  cursor: pointer;
}
.dc-range::-webkit-slider-runnable-track {
  height: max(4px, calc(var(--px) * 4));
  background: linear-gradient(90deg, var(--teal) calc(var(--f) * 100%), rgba(232, 226, 212, 0.2) calc(var(--f) * 100%));
}
.dc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: calc(var(--px) * 10);
  height: calc(var(--px) * 18);
  margin-top: calc(max(4px, var(--px) * 4) / 2 - var(--px) * 9);
  border: 0;
  border-radius: 0;
  background: var(--ink);
}
.dc-range:hover::-webkit-slider-thumb,
.dc-range:focus::-webkit-slider-thumb {
  background: var(--amber);
}
.dc-range::-moz-range-track {
  height: max(4px, calc(var(--px) * 4));
  background: rgba(232, 226, 212, 0.2);
}
.dc-range::-moz-range-progress {
  height: max(4px, calc(var(--px) * 4));
  background: var(--teal);
}
.dc-range::-moz-range-thumb {
  width: calc(var(--px) * 10);
  height: calc(var(--px) * 18);
  border: 0;
  border-radius: 0;
  background: var(--ink);
}
.dc-toggles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--px) * 10);
  margin-top: calc(var(--px) * 12);
}
.dc-switch {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--px) * 10);
  margin: 0;
  padding: calc(var(--px) * 12) calc(var(--px) * 12) calc(var(--px) * 11);
  border: 1px solid var(--ink-faint);
  border-radius: 0;
  outline: none;
  background: transparent;
  font: inherit;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.1s;
}
.dc-switch .dc-set-lab {
  font-size: max(10px, calc(var(--px) * 12.5));
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.dc-switch:hover,
.dc-switch:focus-visible {
  border-color: var(--amber);
}
.dc-switch-st {
  display: flex;
  gap: calc(var(--px) * 3);
  font-family: var(--font-mono);
  font-size: max(9px, calc(var(--px) * 11));
  letter-spacing: 0.14em;
}
.dc-switch-st span {
  padding: calc(var(--px) * 4) calc(var(--px) * 7);
  border: 1px solid var(--ink-faint);
  color: rgba(232, 226, 212, 0.35);
}
.dc-switch[aria-checked='true'] .dc-switch-on {
  border-color: var(--teal);
  background: var(--teal);
  color: #06100e;
}
.dc-switch[aria-checked='false'] .dc-switch-off {
  border-color: var(--ink-dim);
  color: var(--ink);
}
.dc-link {
  -webkit-appearance: none;
  appearance: none;
  margin: calc(var(--px) * 16) 0 0;
  padding: 0 0 calc(var(--px) * 3);
  border: 0;
  border-bottom: 1px solid var(--ink-faint);
  border-radius: 0;
  outline: none;
  background: none;
  font-family: var(--font-mono);
  font-size: max(9px, calc(var(--px) * 11));
  letter-spacing: 0.2em;
  color: var(--ink-dim);
  cursor: pointer;
}
.dc-link:hover,
.dc-link:focus-visible {
  border-color: var(--amber);
  color: var(--amber);
}

/* game over: the report sits under the SIGNAL LOST block (see .dc-lost-box) */
.dc-over {
  position: absolute;
  left: 50%;
  top: calc(13% + var(--px) * 222);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(var(--px) * 800);
  transform: translateX(-50%);
}
.dc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  border-left: 1px solid var(--ink-faint);
  border-top: 1px solid var(--ink-faint);
}
.dc-stat {
  padding: calc(var(--px) * 16) calc(var(--px) * 20) calc(var(--px) * 15);
  border-right: 1px solid var(--ink-faint);
  border-bottom: 1px solid var(--ink-faint);
  background: rgba(6, 8, 10, 0.55);
  animation: dc-rise 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.dc-stat:nth-child(1) {
  animation-delay: 0.1s;
}
.dc-stat:nth-child(2) {
  animation-delay: 0.16s;
}
.dc-stat:nth-child(3) {
  animation-delay: 0.22s;
}
.dc-stat:nth-child(4) {
  animation-delay: 0.28s;
}
.dc-stat:nth-child(5) {
  animation-delay: 0.34s;
}
.dc-stat:nth-child(6) {
  animation-delay: 0.4s;
}
.dc-stat-l {
  font-family: var(--font-mono);
  font-size: max(9px, calc(var(--px) * 11));
  letter-spacing: 0.26em;
  white-space: nowrap;
  color: var(--ink-dim);
}
.dc-stat-v {
  display: flex;
  align-items: baseline;
  gap: calc(var(--px) * 10);
  margin-top: calc(var(--px) * 10);
  font-size: calc(var(--px) * 44);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.dc-stat.is-hero .dc-stat-v {
  color: var(--amber);
}
.dc-stat-x {
  font-family: var(--font-mono);
  font-size: max(9px, calc(var(--px) * 11));
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.dc-stats-x {
  margin: calc(var(--px) * 16) 0 calc(var(--px) * 26);
  font-family: var(--font-mono);
  font-size: max(9px, calc(var(--px) * 11.5));
  letter-spacing: 0.2em;
  white-space: nowrap;
  color: var(--ink-dim);
}
.dc-nav-row {
  flex-direction: row;
  width: auto;
  gap: calc(var(--px) * 14);
}
.dc-nav-row .dc-btn {
  width: calc(var(--px) * 270);
}

/* Entrances move, they never fade from nothing: a menu must be readable on the very first
   frame it exists, even if the page is not animating (a background tab, a capture). */
@keyframes dc-rise {
  from {
    transform: translateY(calc(var(--px) * 14));
  }
}
@keyframes dc-fade {
  from {
    opacity: 0;
  }
}
@keyframes dc-arm {
  from {
    transform: scaleX(0);
  }
}
/* a failing sodium lamp: almost always on */
@keyframes dc-sodium {
  0%,
  100% {
    opacity: 1;
  }
  41% {
    opacity: 0.35;
  }
  41.7% {
    opacity: 1;
  }
  43% {
    opacity: 0.6;
  }
  43.5% {
    opacity: 1;
  }
  78% {
    opacity: 0.5;
  }
  78.6% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dc-menu *,
  .dc-menu *::before,
  .dc-menu *::after {
    animation: none !important;
    transition: none !important;
  }
}