/* Layout: one screen. Bar on top, the island in a 16:9 frame, god-power tiles underneath.
   A single committed night-sky look: the island supplies the colour, the chrome stays dark. */
:root {
  --ink: #0e2a2b;        /* page */
  --panel: #133637;      /* bars and cards */
  --panel-2: #1a4445;
  --line: #2d5d5a;
  --bone: #f7efdf;       /* text */
  --muted: #a8c5bd;
  --ember: #6fe3b4;      /* accent: fire, primary actions */
  --calm: #8fd6f0;
  --focus: #ffd47e;
  --alarm: #ff6470;
  --good: #9ee68f;
  --pixel: "Pixelify Sans", "Courier New", monospace;
  --body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font: 15px/1.45 var(--body);
  overflow: hidden;
}
button, input { font: inherit; color: inherit; }
kbd {
  font: 600 0.78em var(--pixel);
  padding: 0 0.35em;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: var(--panel-2);
  color: var(--bone);
  white-space: nowrap;
}
code { font-family: ui-monospace, Consolas, monospace; font-size: 0.9em; color: var(--focus); }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
[hidden] { display: none !important; }

.app {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
  padding-block: 8px;
  gap: 8px;
}

/* ---------- top bar ---------- */
.bar {
  display: flex;
  align-items: center;
  gap: 10px 16px;
  flex-wrap: nowrap;
  min-width: 0;
}
.brand {
  font: 700 18px/1 var(--pixel);
  letter-spacing: 0.02em;
  color: var(--bone);
  white-space: nowrap;
}
.brand span { color: var(--ember); }
.era-chip {
  font: 600 13px/1 var(--pixel);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: var(--ember);
  padding: 5px 8px 4px;
  border-radius: 3px;
  white-space: nowrap;
}
.objectives {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1 1 auto;
  min-width: 0;
}
.objectives::-webkit-scrollbar { display: none; }
.objectives li {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--panel);
  font: 13px/1.2 var(--pixel);
  white-space: nowrap;
  flex-shrink: 0;
}
.obj-label { color: var(--muted); }
.obj-value { font-variant-numeric: tabular-nums; }
.objectives li.is-done { border-color: color-mix(in srgb, var(--good) 60%, var(--line)); }
.objectives li.is-done .obj-value { color: var(--good); }
.objectives li.is-done .obj-value::after { content: " ✓"; }
.objectives li.is-bad .obj-value { color: var(--alarm); }
.bar-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.source {
  font: 12px var(--pixel);
  color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.source::before { content: ""; width: 7px; height: 7px; background: var(--alarm); }
.source[data-ok="1"]::before { background: var(--good); }
.clock { font: 600 14px var(--pixel); font-variant-numeric: tabular-nums; color: var(--muted); }
/* #85: signal truth next to the source chip */
.signal { font: 12px var(--pixel); white-space: nowrap; padding: 1px 6px; border: 1px solid var(--line); border-radius: 3px; }
.signal[data-level="good"] { color: var(--good); }
.signal[data-level="fair"] { color: var(--focus); }
.signal[data-level="poor"] { color: var(--alarm); border-color: color-mix(in srgb, var(--alarm) 55%, var(--line)); }
.tool {
  font: 600 12px var(--pixel);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 4px 8px;
  cursor: pointer;
}
.tool:hover { border-color: var(--muted); }
.tool[aria-pressed="true"] { border-color: var(--ember); }

/* ---------- stage ---------- */
.stage {
  position: relative;
  min-height: 0;
  container-type: size;
  display: grid;
  place-items: center;
}
.frame {
  position: relative;
  width: min(100cqw, calc(100cqh * 16 / 9));
  aspect-ratio: 16 / 9;
  max-width: 100%;
}
/* Labels, rings and charts drawn crisp above the WebGL canvas, unaffected by lighting. */
#textLayer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#screen {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--line), 0 18px 50px -20px rgba(0, 0, 0, 0.8);
  touch-action: none;
  cursor: crosshair;
}
body[data-reticle="1"] #screen { cursor: none; }   /* one cursor: the in-game reticle (#301) */

/* era intro card */
.banner {
  position: absolute; inset: 0;
  z-index: 28; /* above the coach panel (25): its Begin button must always be clickable (#182) */
  display: grid; place-items: center;
  background: rgba(6, 24, 24, 0.55);
  padding: 12px;
}
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 18px 20px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 4px 0 0 var(--ink), 0 20px 60px -20px rgba(0, 0, 0, 0.9);
}
.eyebrow {
  margin: 0 0 4px;
  font: 600 12px var(--pixel);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ember);
}
.card h2 { margin: 0 0 6px; font: 700 30px/1.05 var(--pixel); text-wrap: balance; }
.goal { margin: 0 0 10px; color: var(--bone); }
.how { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; color: var(--muted); font-size: 14px; }
.how b { font-family: var(--pixel); color: var(--bone); font-weight: 600; margin-right: 4px; }

.btn {
  font: 600 15px var(--pixel);
  padding: 8px 14px 7px;
  border-radius: 3px;
  border: 1px solid var(--line);
  border-bottom-width: 3px;
  background: var(--panel-2);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn:hover { border-color: var(--muted); }
.btn:active { transform: translateY(1px); border-bottom-width: 2px; }
.btn-primary { background: var(--ember); color: var(--ink); border-color: #3fae84; }
.btn-primary:hover { border-color: #2c8565; }
.btn-primary kbd { background: rgba(0, 0, 0, 0.15); color: var(--ink); border-color: rgba(0, 0, 0, 0.3); }

/* ---------- advisor ---------- */
.advisor {
  position: absolute;
  left: max(8px, calc((100cqw - min(100cqw, calc(100cqh * 16 / 9))) / 2 + 8px));
  bottom: max(8px, calc((100cqh - min(100cqh, calc(100cqw * 9 / 16))) / 2 + 14px));
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: min(440px, 62cqw);
  pointer-events: none;
  transition: opacity 0.4s;
}
.advisor.is-idle { opacity: 0.35; }
.advisor canvas {
  width: 56px; height: 56px;
  image-rendering: pixelated;
  border: 2px solid var(--ink);
  outline: 1px solid var(--line);
  flex: none;
}
.bubble {
  background: rgba(19, 54, 55, 0.94);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 10px 8px;
  min-width: 0;
}
.advisor[data-mood="panic"] .bubble { border-color: var(--alarm); }
.advisor[data-mood="happy"] .bubble { border-color: color-mix(in srgb, var(--good) 50%, var(--line)); }
.advisor-name { margin: 0; font: 600 11px var(--pixel); color: var(--ember); letter-spacing: 0.04em; }
.advisor-text { margin: 2px 0 0; font: 15px/1.3 var(--pixel); min-height: 1.3em; }

/* ---------- zoom cluster (inside the frame) ---------- */
.zoom {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(19, 54, 55, 0.9);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px;
}
.zbtn {
  width: 28px; height: 28px;
  font: 700 18px/1 var(--pixel);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  display: grid; place-items: center;
}
.zbtn:hover:not(:disabled) { border-color: var(--ember); }
.zbtn:disabled { opacity: 0.35; cursor: default; }
.zlabel {
  min-width: 72px;
  text-align: center;
  font: 600 12px var(--pixel);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bone);
  padding: 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

/* ---------- galaxy panel ---------- */
.galaxy-panel {
  position: absolute;
  z-index: 2;
  right: max(8px, calc((100cqw - min(100cqw, calc(100cqh * 16 / 9))) / 2 + 8px));
  top: max(8px, calc((100cqh - min(100cqh, calc(100cqw * 9 / 16))) / 2 + 8px));
  width: 232px;
  max-height: calc(100% - 60px);
  overflow-y: auto;
  background: rgba(19, 54, 55, 0.94);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px;
  display: grid;
  gap: 8px;
}
.galaxy-panel header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.galaxy-panel h3 { margin: 0; font: 700 15px var(--pixel); color: var(--bone); }
.btn-small { font-size: 13px; padding: 5px 9px 4px; }
.btn:disabled { opacity: 0.45; cursor: default; }
.planet-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mind-line { margin: 0; font-size: 11px; line-height: 1.35; color: var(--muted); }
.planet-chip {
  grid-area: chip;
  font: 600 10px/1 var(--pixel);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 2px 4px 1px;
  white-space: nowrap;
}
.planet-chip:empty { display: none; }
.planet-effect { grid-area: fx; font-size: 11px; line-height: 1.25; color: var(--bone); opacity: 0.85; font-variant-numeric: tabular-nums; }
.planet-effect:empty { display: none; }
.planet-row {
  width: 100%;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  grid-template-areas: "dot name chip" "dot meta meta" "fx fx fx" "bar bar bar";
  column-gap: 6px;
  row-gap: 1px;
  align-items: center;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 4px 6px 5px;
  cursor: pointer;
  min-width: 0;
}
.planet-row:hover { border-color: var(--muted); }
.planet-row[aria-current="true"] { border-color: var(--ember); }
.planet-dot { grid-area: dot; width: 8px; height: 8px; align-self: center; }
.planet-name { grid-area: name; font: 600 13px/1.1 var(--pixel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planet-meta { grid-area: meta; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planet-bar { grid-area: bar; height: 3px; margin-top: 3px; background: var(--ink); position: relative; }
.planet-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--focus); }
.galaxy-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 11px; line-height: 1.3; color: var(--muted); }
.galaxy-log li:first-child { color: var(--bone); }
/* planets (#68): world details in the galaxy panel */
.world-detail { display: grid; gap: 3px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 3px; font-size: 11px; line-height: 1.3; color: var(--muted); min-width: 0; }
.world-detail p { margin: 0; }
.wd-head { color: var(--bone); font: 600 12px/1.2 var(--pixel); }
.wd-line { overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.wd-stab { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px; }
.wd-bar { height: 3px; background: var(--ink); position: relative; }
.wd-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--calm); }
.wd-bar.is-low::after { background: var(--alarm); }
.wd-war { color: var(--alarm); }
.wd-miles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 3px; }
.wd-miles li { font: 600 10px/1 var(--pixel); color: var(--ember); border: 1px solid currentColor; border-radius: 2px; padding: 2px 4px 1px; }
.wd-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.wd-hist li::before { content: "· "; }
.wd-hist li.is-setback, .wd-hist li.is-conflict { color: var(--alarm); }
.wd-hist li.is-tier, .wd-hist li.is-milestone { color: var(--good); }
/* space war (#166): target a world, then raid, bombard or invade */
.war-orders { display: grid; gap: 4px; padding: 6px; background: var(--panel); border: 1px solid var(--alarm); border-radius: 3px; font-size: 11px; line-height: 1.3; color: var(--muted); min-width: 0; }
.war-orders[hidden] { display: none; }
.war-line { margin: 0; color: var(--bone); font-variant-numeric: tabular-nums; }
.war-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.war-btns .btn { padding: 4px 4px 3px; font-size: 12px; }

/* ---------- power tiles ---------- */
.powers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
}
.power {
  --level: 0%;
  --thr: -10%;
  --tint: var(--ember);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "icon name value" "icon sub sub" "meter meter meter";
  column-gap: 8px;
  row-gap: 2px;
  align-items: center;
  text-align: left;
  padding: 7px 10px 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.45;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  min-width: 0;
}
.power.is-active { opacity: 1; }
/* #178: a tile that does nothing in this era is disabled; one the campaign hasn't reached is hidden. */
.power[hidden] { display: none; }
.power:disabled { opacity: 0.25; cursor: not-allowed; }
.power[data-power="blink"] { --tint: var(--focus); }
.power[data-power="calm"] { --tint: var(--calm); }
.power[data-power="focus"] { --tint: var(--focus); }
.power[data-power="stress"] { --tint: var(--alarm); }
.power.invincible-power { --tint: var(--good); opacity: 1; }
.power.invincible-power[aria-pressed="false"] { opacity: 0.72; }
.power.invincible-power[aria-pressed="true"] { border-color: var(--good); background: color-mix(in srgb, var(--good) 10%, var(--panel)); }
.invincible-icon { display: grid; place-items: center; font-size: 22px; line-height: 1; }
.power-icon { grid-area: icon; width: 28px; height: 28px; image-rendering: pixelated; }
.power-name { grid-area: name; font: 700 15px/1 var(--pixel); color: var(--tint); }
.power-sub { grid-area: sub; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.power-value { grid-area: value; font: 600 14px var(--pixel); font-variant-numeric: tabular-nums; }
.meter {
  grid-area: meter;
  position: relative;
  height: 6px;
  margin-top: 4px;
  background: var(--ink);
  border: 1px solid var(--line);
}
.meter > span { position: absolute; inset: 0 auto 0 0; width: var(--level); background: var(--tint); transition: width 0.12s linear; }
.meter::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: var(--thr); width: 2px; background: var(--bone); }
.power.is-firing { border-color: var(--focus); box-shadow: 0 0 0 2px var(--focus); }
.power.is-hot { border-color: var(--alarm); }
.power:active { transform: translateY(1px); }

/* ---------- full-screen overlays ---------- */
.overlay {
  position: fixed; inset: 0;
  z-index: 50;
  overflow-y: auto;
  background:
    radial-gradient(1200px 500px at 50% 110%, rgba(111, 227, 180, 0.16), transparent 70%),
    radial-gradient(900px 420px at 50% -10%, rgba(143, 214, 240, 0.10), transparent 70%),
    var(--ink);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 28px;
  display: grid;
  place-items: center;
}
.fail-screen { background: rgba(6, 24, 24, 0.88); }
.fail-card {
  max-width: 520px;
  display: grid;
  gap: 14px;
}
.fail-body {
  display: grid;
  gap: 10px;
}
.fail-cause-box, .fail-advice-box {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}
.fail-advice-box {
  border-left: 3px solid var(--ember);
}
.fail-label {
  font: 600 11px var(--pixel);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.fail-cause, .fail-advice {
  margin: 0;
  font-size: 14px;
  color: var(--bone);
  line-height: 1.4;
}
.fail-advice {
  color: #ffd166;
  font-weight: 500;
}
.fail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.fail-feedback {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  display: grid;
  gap: 6px;
}
.feedback-link {
  background: none;
  border: none;
  padding: 0;
  font: 13px var(--system);
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
  text-align: left;
}
.feedback-link:hover {
  color: var(--bone);
}
.feedback-ack {
  margin: 0;
  font-size: 12px;
  color: #70d6ff;
  line-height: 1.3;
}
.title-inner { width: 100%; max-width: 760px; display: grid; gap: 18px; }
.title-inner h1 {
  margin: 0;
  font: 700 clamp(44px, 9vw, 92px)/0.95 var(--pixel);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.title-inner h1 span { color: var(--ember); }
.lede { margin: 0; font-size: 18px; max-width: 60ch; color: var(--bone); }
/* Planet size picker for the civ sandbox */
.size-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0; }
.size-pick-label { font: 600 12px var(--pixel); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-right: 4px; }
.size-pick button {
  font: 600 12px var(--pixel); color: var(--ink-text, #f2e8d5); background: transparent;
  border: 1px solid var(--line); border-radius: 3px; padding: 4px 8px; cursor: pointer;
}
.size-pick button:hover { border-color: var(--ember); }
.size-pick button[aria-checked="true"] { background: var(--ember); border-color: var(--ember); color: #102423; }
/* Planet setup: your mind makes four worlds, one card at a time like a pack opening (Alex). The
   centre card reads your mind, flips to show its world, then moves left into the row. */
.setup-inner { width: 100%; max-width: 1100px; display: grid; gap: 18px; justify-items: center; text-align: center; }
.setup-head { display: grid; gap: 6px; justify-items: center; }
.setup-head .eyebrow { margin: 0; font: 600 13px var(--pixel); color: var(--ember); letter-spacing: 0.08em; text-transform: uppercase; }
.setup-head h1 { margin: 0; font: 700 clamp(30px, 5.4vw, 56px)/1 var(--pixel); letter-spacing: -0.01em; }
.setup-hint { margin: 0; color: var(--muted); font-size: 15px; min-height: 1.4em; }
.pack-row { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; min-height: 330px; width: 100%; }
.pack-card { --w: 216px; --planet: var(--calm); width: var(--w); aspect-ratio: 5 / 7; flex: none; perspective: 1000px; font-size: calc(var(--w) / 14); }
.pack-card.is-done { --w: 132px; }
.pack-flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 560ms cubic-bezier(.2, .8, .2, 1); }
.pack-card.is-revealed .pack-flip { transform: rotateY(180deg); }
.pack-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 0.8em; border: 2px solid var(--line); background: var(--panel);
  display: grid; align-content: center; justify-items: center; gap: 0.5em; padding: 0.9em 0.8em; overflow: hidden;
}
.pack-back {
  background:
    repeating-linear-gradient(45deg, transparent 0 10px, rgba(255, 255, 255, 0.03) 10px 20px),
    linear-gradient(160deg, var(--panel-2), var(--panel));
}
.pack-q { font: 700 4em/1 var(--pixel); color: var(--ember); animation: pack-pulse 1.1s ease-in-out infinite; }
.pack-reading { margin: 0; font: 600 0.85em var(--pixel); color: var(--bone); }
.pack-meter { width: 80%; height: 0.45em; border: 1px solid var(--line); border-radius: 0.3em; overflow: hidden; background: var(--ink); }
.pack-meter i { display: block; width: var(--p, 0%); height: 100%; background: var(--ember); }
.pack-live { list-style: none; margin: 0.2em 0 0; padding: 0; width: 80%; display: grid; gap: 0.2em; font-size: 0.8em; }
.pack-live li { display: flex; justify-content: space-between; color: var(--muted); }
.pack-live b { font: 600 1em var(--pixel); color: var(--bone); font-variant-numeric: tabular-nums; }
.pack-front {
  transform: rotateY(180deg); border-color: var(--planet);
  background: linear-gradient(165deg, color-mix(in srgb, var(--planet) 30%, var(--panel)) 0%, var(--panel) 72%);
  align-content: start; gap: 0.35em;
}
.pack-card.is-revealed:not(.is-done) .pack-front { box-shadow: 0 0 0 2px var(--planet), 0 0 2.2em color-mix(in srgb, var(--planet) 55%, transparent); }
.pack-top { justify-self: stretch; display: flex; align-items: baseline; justify-content: space-between; }
.pack-rating { font: 700 2.3em/1 var(--pixel); color: var(--bone); }
.pack-ch { font: 600 0.75em var(--pixel); color: var(--planet); text-transform: uppercase; letter-spacing: 0.08em; }
.pack-orb {
  width: 4.2em; height: 4.2em; border-radius: 50%; margin: 0.2em 0;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.65), var(--planet) 34%, rgba(0, 0, 0, 0.45) 100%);
  box-shadow: 0 0 1.4em color-mix(in srgb, var(--planet) 50%, transparent);
}
.pack-front h2 { margin: 0; font: 700 1.25em/1.1 var(--pixel); }
.pack-sub { margin: 0; font-size: 0.78em; color: var(--muted); }
.pack-stats { margin: 0.3em 0 0; justify-self: stretch; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3em; border-top: 1px solid var(--line); padding-top: 0.45em; }
.pack-stats div { display: grid; gap: 0.1em; }
.pack-stats dt { font: 600 0.62em var(--pixel); color: var(--muted); letter-spacing: 0.08em; }
.pack-stats dd { margin: 0; font: 700 1.15em var(--pixel); color: var(--bone); font-variant-numeric: tabular-nums; }
.setup-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
@keyframes pack-pulse { 50% { opacity: 0.55; transform: scale(0.94); } }
@media (prefers-reduced-motion: reduce) {
  .pack-flip { transition: none; }
  .pack-q { animation: none; }
}
@media (max-width: 640px) {
  .pack-row { gap: 8px; min-height: 0; }
  .pack-card { --w: 168px; }
  .pack-card.is-done { --w: 74px; }
  .pack-card.is-done .pack-sub, .pack-card.is-done .pack-stats { display: none; }
}
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row label { font: 600 13px var(--pixel); color: var(--muted); }
.row input {
  flex: 1 1 200px; min-width: 0;
  background: var(--ink); border: 1px solid var(--line); border-radius: 3px; padding: 7px 9px;
  font-family: ui-monospace, Consolas, monospace; font-size: 14px;
}
/* Title menu: the name, one line, then a centred column of big buttons. Load, Sections and
   Calibrate slide in place of the menu with a Back button. */
.title-menu { max-width: 960px; justify-items: center; text-align: center; gap: 14px; }
.title-menu [hidden] { display: none !important; }
.tagline { margin: -4px 0 6px; font: 600 15px var(--pixel); color: var(--muted); }
.title-view { width: 100%; max-width: 380px; display: grid; gap: 10px; animation: title-in 160ms ease-out; }
@keyframes title-in { from { opacity: 0; transform: translateX(18px); } }
.title-view-head { margin: 0; font: 700 22px var(--pixel); color: var(--ember); }
.title-item { justify-content: center; flex-direction: column; gap: 2px; font-size: 20px; padding: 12px 16px 10px; width: 100%; }
.title-item:focus-visible, .title-back:focus-visible, .save-row .btn:focus-visible, .size-pick button:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}
.title-sub { font: 600 12px var(--body); opacity: 0.8; }
.title-back { justify-self: center; }
.section-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.section-grid .title-item { font-size: 16px; padding: 10px 10px 8px; }
.section-wide { grid-column: 1 / -1; }
.section-grid .size-pick { justify-content: center; margin: 0; }
.save-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 50vh; overflow-y: auto; }
.save-row { display: flex; gap: 6px; }
.save-open { flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; }
.save-name { font-size: 16px; }
.save-meta { font: 13px var(--body); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.save-del { flex: none; justify-content: center; min-width: 44px; color: var(--muted); }
.save-del[data-armed] { color: var(--ink); background: var(--alarm); border-color: var(--alarm); }
.title-status { margin: 0; color: var(--muted); font-size: 14px; }
.end-stats {
  margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px;
}
.end-stats div { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; min-width: 0; }
.end-stats dt { font-size: 12px; color: var(--muted); }
.end-stats dd { margin: 2px 0 0; font: 600 18px var(--pixel); font-variant-numeric: tabular-nums; }

/* ---------- model panel (judge overlay) ---------- */
.model-panel {
  position: fixed; z-index: 30;
  top: 8px; right: max(8px, env(safe-area-inset-right, 0px)); bottom: 8px;
  width: min(420px, calc(100vw - 16px));
  overflow-y: auto;
  background: rgba(16, 44, 45, 0.97);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 12px 14px;
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.9);
}
/* #90: reduced motion (Settings, or the system setting) stops CSS animations and transitions. */
body[data-reduced-motion="1"] *, body[data-reduced-motion="1"] *::before, body[data-reduced-motion="1"] *::after {
  animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important; scroll-behavior: auto !important;
}
.set-keys { margin: 0 0 4px; font-size: 12px; line-height: 1.6; }
/* ---------- settings panel (#186, #89): above every overlay, it can open from the title ---------- */
.settings-panel {
  position: fixed; z-index: 56;
  top: 8px; right: max(8px, env(safe-area-inset-right, 0px));
  width: min(380px, calc(100vw - 16px)); max-height: calc(100vh - 16px);
  overflow-y: auto;
  background: rgba(16, 44, 45, 0.98);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 12px 14px;
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.9);
}
.settings-panel header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.settings-panel h2 { margin: 0; font: 700 20px var(--pixel); }
.set-group { border-top: 1px solid var(--line); padding: 8px 0 4px; }
.set-group h3 { margin: 0 0 6px; font: 600 14px var(--pixel); color: var(--muted); }
.set-row { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 6px; font-size: 13px; cursor: pointer; }
.set-row small { display: block; color: var(--muted); font-size: 11px; }
.set-range { align-items: center; justify-content: space-between; }
.set-range input[type="range"] { flex: 1; }
.set-range input[type="number"] { width: 64px; }
.set-note { margin: 0 0 4px; font-size: 11px; color: var(--muted); }
.set-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.settings-panel footer { border-top: 1px solid var(--line); padding-top: 8px; }
.cam-live { color: var(--alarm); border-color: color-mix(in srgb, var(--alarm) 55%, var(--line)); }
/* "See the model of you" on the end screen (z 50) opens it above that overlay, not behind it (#173). */
body:has(#endScreen:not([hidden])) .model-panel { z-index: 55; }
.model-panel header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.model-panel h2 { margin: 0; font: 700 20px var(--pixel); }
.model-lede { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.model-stats { margin: 0 0 12px; display: grid; gap: 4px; }
.model-stats div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding: 3px 0; font-size: 13px; }
.model-stats dt { color: var(--muted); }
.model-stats dd { margin: 0; font-family: var(--pixel); font-variant-numeric: tabular-nums; text-align: right; }
.model-stats small { color: var(--muted); font-size: 11px; }
.model-live { display: grid; gap: 5px; margin-bottom: 12px; font-size: 12px; }
.model-live div { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 8px; color: var(--muted); }
.mbar { height: 8px; background: var(--ink); border: 1px solid var(--line); position: relative; }
.mbar > span { position: absolute; inset: 0 auto 0 0; transition: width 0.15s linear; }
.mbar.calm > span { background: var(--calm); }
.mbar.focus > span { background: var(--focus); }
.model-weights { overflow-x: auto; }
.model-weights table { border-collapse: collapse; font-size: 11px; font-variant-numeric: tabular-nums; }
.model-weights th, .model-weights td { padding: 3px 5px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.model-weights th { color: var(--muted); font-weight: 400; }
.model-weights td.pos { color: var(--good); }
.model-weights td.neg { color: var(--alarm); }

/* ---------- narrow screens ---------- */
@media (max-width: 760px) {
  body { overflow: auto; }
  .app { height: auto; min-height: 100%; grid-template-rows: auto auto auto; }
  .bar { flex-wrap: wrap; }
  .stage { container-type: inline-size; display: block; }
  .frame { width: 100%; }
  .advisor { position: static; margin-top: 8px; max-width: none; }
  .galaxy-panel { position: static; width: auto; max-height: none; margin-top: 8px; }
  .coach-panel { position: static; width: auto; max-width: none; margin-top: 8px; }
  .planet-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zbtn { width: 26px; height: 26px; }
  .zlabel { min-width: 56px; font-size: 11px; }
  .advisor.is-idle { opacity: 0.7; }
  .powers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bar-tools { margin-left: 0; }
  .objectives { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .meter > span, .mbar > span, .advisor { transition: none; }
}

/* ---------- camera (#33): opt-in webcam casts and mood ---------- */
.cam-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cam-btn::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.cam-btn[data-state="starting"]::before { background: var(--focus); }
.cam-btn[data-state="error"]::before { background: var(--alarm); opacity: 0.5; }
.cam-btn[data-live="1"] { border-color: var(--alarm); }
.cam-btn[data-live="1"]::before { background: var(--alarm); animation: cam-glow 1.6s ease-in-out infinite; }
@keyframes cam-glow { 50% { opacity: 0.3; } }

.cam-panel[hidden] { display: none !important; }
.cam-panel[data-live="1"] { border-color: color-mix(in srgb, var(--alarm) 55%, var(--line)); }
.cam-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cam-live { display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--pixel); color: var(--muted); }
.cam-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; }
.cam-panel[data-live="1"] .cam-live { color: var(--bone); }
.cam-panel[data-live="1"] .cam-live i { background: var(--alarm); animation: cam-glow 1.6s ease-in-out infinite; }
.cam-close { padding: 2px 6px; font-size: 11px; }
.cam-msg { margin: 0; font-size: 12px; line-height: 1.35; color: var(--bone); }
.cam-panel[data-state="error"] [data-cam-msg] { color: #ffb3c0; }
.cam-body { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px; align-items: start; }
.cam-fireball {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 4px;
}
.cam-fb-orb {
  width: 48px;
  height: 48px;
  image-rendering: pixelated;
  flex: none;
}
.cam-fb-meter {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  height: 8px;
}
.cam-fb-meter > i {
  display: block;
  height: 100%;
  background: var(--ink);
  border: 1px solid var(--line);
}
.cam-view {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.cam-video, .cam-hands { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.cam-mood { display: grid; gap: 3px; min-width: 0; }
.cam-mood-head { margin: 0 0 1px; font: 600 12px var(--pixel); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cam-mood-head b { color: var(--bone); font-weight: 600; }
.cam-mood-row { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.cam-bar { position: relative; height: 6px; background: var(--ink); border: 1px solid var(--line); }
.cam-bar > span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--muted); transition: width 0.12s linear; }
.cam-mood-row[data-emotion="joy"] .cam-bar > span { background: var(--good); }
.cam-mood-row[data-emotion="anger"] .cam-bar > span { background: var(--alarm); }
.cam-mood-row[data-emotion="surprise"] .cam-bar > span { background: var(--focus); }
.cam-mood-row[data-emotion="sadness"] .cam-bar > span { background: #7d9be6; }
.cam-panel[data-mood="joy"] [data-emotion="joy"],
.cam-panel[data-mood="anger"] [data-emotion="anger"],
.cam-panel[data-mood="surprise"] [data-emotion="surprise"],
.cam-panel[data-mood="sadness"] [data-emotion="sadness"] { color: var(--bone); font-weight: 700; }
.cam-now { margin: 0; font: 12px/1.3 var(--pixel); min-height: 1.3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cam-privacy { margin: 0; font-size: 11px; color: var(--muted); }
.cam-hands-toggle { display: flex; gap: 6px; align-items: center; margin: 6px 0 2px; font-size: 12px; }
.cam-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

@media (max-width: 760px) {
  /* The extra Camera button would push the tool row past a phone's width: let it wrap. */
  .bar-tools:has(.cam-btn) { flex-wrap: wrap; row-gap: 6px; }
  .cam-panel { position: static; width: auto; margin-top: 8px; }
  .cam-body { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .cam-btn::before, .cam-live i { animation: none !important; }
  .cam-bar > span { transition: none; }
}

/* ---------- camera debug (#67): Debug tab (` key) ---------- */
.dbg-btn { white-space: nowrap; }
.dbg-panel {
  position: absolute;
  z-index: 4;
  left: max(8px, calc((100cqw - min(100cqw, calc(100cqh * 16 / 9))) / 2 + 8px));
  top: max(8px, calc((100cqh - min(100cqh, calc(100cqw * 9 / 16))) / 2 + 8px));
  width: 252px;
  max-height: calc(100% - 16px);
  overflow-y: auto;
  display: grid;
  gap: 6px;
  padding: 8px;
  background: rgba(16, 44, 45, 0.95);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 12px 40px -16px rgba(0, 0, 0, 0.9);
  font-size: 11px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.dbg-head { display: flex; align-items: center; gap: 6px; }
.dbg-title { margin: 0; font: 700 13px var(--pixel); white-space: nowrap; }
.dbg-title kbd { font-size: 10px; }
.dbg-mode { flex: 1; min-width: 0; color: var(--muted); font: 11px var(--pixel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbg-close { padding: 2px 6px; font-size: 11px; }
.dbg-note { margin: 0; color: var(--focus); font-size: 10px; }
.dbg-cam { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; align-items: start; }
.dbg-thumb { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; background: var(--ink); border: 1px solid var(--line); border-radius: 3px; }
.dbg-rates, .dbg-brain { margin: 0; display: grid; gap: 4px; }
.dbg-rates dt, .dbg-brain dt { color: var(--muted); font: 600 10px var(--pixel); letter-spacing: 0.04em; text-transform: uppercase; }
.dbg-rates dd, .dbg-brain dd { margin: 0; color: var(--bone); overflow-wrap: anywhere; }
.dbg-brain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dbg-sec { display: grid; gap: 3px; padding-top: 6px; border-top: 1px solid var(--line); }
.dbg-row, .dbg-emo { margin: 0; display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 6px; color: var(--muted); }
.dbg-row b, .dbg-emo b { min-width: 0; color: var(--bone); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbg-row:has(.dbg-meter) { grid-template-columns: 56px 44px minmax(0, 1fr); }
.dbg-emo { grid-template-columns: 56px minmax(0, 1fr) 30px; }
.dbg-emo b { text-align: right; }
.dbg-meter { position: relative; height: 6px; background: var(--ink); border: 1px solid var(--line); }
.dbg-meter > span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--calm); }
.dbg-emo[data-emotion="joy"] .dbg-meter > span { background: var(--good); }
.dbg-emo[data-emotion="anger"] .dbg-meter > span { background: var(--alarm); }
.dbg-emo[data-emotion="surprise"] .dbg-meter > span { background: var(--focus); }
.dbg-emo[data-emotion="sadness"] .dbg-meter > span { background: #7d9be6; }
.dbg-panel[data-mood="joy"] .dbg-emo[data-emotion="joy"],
.dbg-panel[data-mood="anger"] .dbg-emo[data-emotion="anger"],
.dbg-panel[data-mood="surprise"] .dbg-emo[data-emotion="surprise"],
.dbg-panel[data-mood="sadness"] .dbg-emo[data-emotion="sadness"] { color: var(--bone); font-weight: 700; }
.dbg-cds { margin: 2px 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.dbg-cd { position: relative; display: grid; justify-items: center; padding: 2px 0 3px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.dbg-cd span { font-size: 13px; line-height: 1.15; }
.dbg-cd b { font-size: 10px; font-weight: 400; color: var(--muted); }
.dbg-cd i { position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--focus); }
.dbg-cd.is-cooling span { opacity: 0.45; filter: grayscale(1); }
.dbg-cd.is-cooling b { color: var(--focus); }
.dbg-cd.is-armed { border-color: var(--ember); }
.dbg-src { margin: 0; color: var(--muted); font-size: 10px; }

@media (max-width: 760px) {
  .dbg-panel { position: static; justify-self: stretch; width: auto; max-height: none; margin-top: 8px; }
  .dbg-cam { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
  .dbg-brain { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .dbg-brain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- EEG & biosensing side panel ---------- */
.eeg-panel[hidden] { display: none !important; }
.eeg-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.eeg-btn::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.eeg-btn[data-live="wait"] { border-color: var(--focus); }
.eeg-btn[data-live="wait"]::before { background: var(--focus); animation: cam-glow 1.2s ease-in-out infinite; }
.eeg-btn[data-live="1"] { border-color: var(--good); }
.eeg-btn[data-live="1"]::before { background: var(--good); animation: cam-glow 1.6s ease-in-out infinite; }

.eeg-panel {
  position: fixed;
  z-index: 32;
  top: 8px;
  right: max(8px, env(safe-area-inset-right, 0px));
  bottom: 8px;
  width: min(390px, calc(100vw - 16px));
  overflow-y: auto;
  background: rgba(16, 44, 45, 0.97);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 12px 14px;
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.9);
  display: grid;
  align-content: start;
  gap: 10px;
  font-size: 12px;
}
.eeg-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.eeg-head h2 { margin: 0; font: 700 19px var(--pixel); color: var(--bone); }
.eeg-sec {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px 10px;
  display: grid;
  gap: 6px;
}
.eeg-sec h3 { margin: 0; font: 600 13px var(--pixel); color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.eeg-sec-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; }
.eeg-status-row { display: flex; align-items: center; gap: 7px; }
.eeg-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--alarm); flex: none; }
.eeg-dot[data-ok="1"] { background: var(--good); }
.eeg-dot[data-ok="wait"] { background: var(--focus); }
.eeg-qual { margin-left: auto; font-family: var(--pixel); color: var(--muted); }
.eeg-url-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.eeg-adv { font-size: 11px; color: var(--muted); }
.eeg-adv summary { cursor: pointer; user-select: none; }
.eeg-adv input {
  width: 100%; margin-top: 4px;
  background: var(--ink); border: 1px solid var(--line); border-radius: 3px;
  padding: 5px 7px; font-family: ui-monospace, Consolas, monospace; font-size: 12px;
}
.eeg-msg { margin: 0; font-size: 11.5px; line-height: 1.35; color: var(--bone); }

.eeg-contacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.eeg-badge {
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 5px 4px;
  text-align: center;
  display: grid;
  gap: 2px;
  font-family: var(--pixel);
}
.eeg-badge b { font-size: 12px; color: var(--bone); }
.eeg-badge span { font-size: 10px; color: var(--muted); }
.eeg-badge[data-state="GOOD"] { border-color: color-mix(in srgb, var(--good) 65%, var(--line)); }
.eeg-badge[data-state="GOOD"] span { color: var(--good); }
.eeg-badge[data-state="FAIR"] { border-color: color-mix(in srgb, var(--focus) 65%, var(--line)); }
.eeg-badge[data-state="FAIR"] span { color: var(--focus); }
.eeg-badge[data-state="POOR"] { border-color: color-mix(in srgb, var(--alarm) 65%, var(--line)); }
.eeg-badge[data-state="POOR"] span { color: var(--alarm); }

.eeg-legend { font-size: 11px; font-family: var(--pixel); display: flex; gap: 6px; }
.eeg-legend i { font-style: normal; }
.eeg-scope, .eeg-imu-scope {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 3px;
  display: block;
}
.eeg-scope { height: 112px; }
.eeg-imu-scope { height: 60px; }
.eeg-imu-xyz {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.eeg-imu-xyz div {
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 4px 6px;
  display: grid;
  gap: 1px;
}
.eeg-imu-xyz span { font-size: 10px; color: var(--muted); }
.eeg-imu-xyz b { font: 600 11.5px ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; color: var(--bone); }

.eeg-calib-row { display: grid; grid-template-columns: 165px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.eeg-cursor-grid { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 8px; align-items: center; }
.eeg-pad {
  width: 136px; height: 84px;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 3px;
  display: block;
}
.eeg-cursor-controls { display: grid; gap: 5px; min-width: 0; }
.eeg-slider-lbl { display: grid; gap: 2px; font-size: 11px; color: var(--muted); }
.eeg-slider-lbl b { color: var(--bone); font-family: var(--pixel); }
.eeg-slider-lbl input[type="range"] { width: 100%; margin: 0; accent-color: var(--ember); }
.eeg-chk-row { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--bone); }
.eeg-chk-row label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.eeg-imu-mini {
  display: flex; justify-content: space-between; gap: 4px;
  background: var(--ink); border: 1px solid var(--line); border-radius: 3px;
  padding: 3px 6px; font-size: 10.5px; color: var(--muted);
}
.eeg-imu-mini b { font-family: var(--pixel); color: var(--bone); font-variant-numeric: tabular-nums; }

.eeg-bands { display: grid; gap: 5px; }
.eeg-band-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) 34px; align-items: center; gap: 6px; }
.eeg-band-lbl { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eeg-bar { height: 7px; background: var(--ink); border: 1px solid var(--line); position: relative; border-radius: 2px; overflow: hidden; }
.eeg-bar > span { position: absolute; inset: 0 auto 0 0; width: 0%; transition: width 0.12s linear; }
.eeg-band-val { font-family: var(--pixel); font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; }

.eeg-vitals, .eeg-imu {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 2px;
}
.eeg-imu { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.eeg-vitals div, .eeg-imu div {
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 4px 6px;
  display: grid;
  gap: 1px;
}
.eeg-vitals span, .eeg-imu span { font-size: 10px; color: var(--muted); }
.eeg-vitals b, .eeg-imu b { font: 600 13px var(--pixel); font-variant-numeric: tabular-nums; color: var(--bone); }
.eeg-btn-group { display: flex; gap: 5px; flex-wrap: wrap; }
.eeg-conn-row { display: flex; gap: 5px; flex-wrap: wrap; }
.eeg-log {
  margin-top: 6px;
  max-height: 92px;
  overflow-y: auto;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 5px 7px;
  font: 10.5px/1.35 ui-monospace, Consolas, monospace;
  color: var(--calm);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------- Full-screen Guided Calibration Wizard (Dot + Flash) ---------- */
.calib-wiz {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(9, 30, 30, 0.96);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 16px 24px;
  gap: 12px;
}
.calib-wiz[hidden] { display: none !important; }
.calib-wiz-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
}
.calib-wiz-step {
  font: 700 11px var(--pixel);
  color: var(--focus);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.calib-wiz-top h2 { margin: 2px 0 4px; font: 700 24px var(--pixel); color: var(--bone); }
.calib-wiz-top p { margin: 0; font-size: 13px; color: var(--muted); }
.calib-wiz-actions { display: flex; gap: 8px; align-items: center; }
/* The canvas scales down to the stage on both axes (#221): it used to keep its 500 px height on
   short screens and cover the stats line (Head Aim) and the log. Absolutely placed so the
   percentages resolve against the stage, and the bitmap keeps its 960:500 ratio. */
.calib-wiz-stage {
  position: relative;
  min-height: 0;
}
.calib-wiz-canvas {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: min(960px, 100%);
  max-height: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}
.calib-wiz-bottom {
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  gap: 6px;
}
.calib-wiz-stats {
  font: 600 13px var(--pixel);
  color: var(--bone);
}
.calib-wiz-log {
  margin: 0;
  max-height: 76px;
  overflow-y: auto;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 8px;
  font: 11px/1.35 ui-monospace, Consolas, monospace;
  color: var(--calm);
  white-space: pre-wrap;
}

/* Coach Panel (#123, #204) */
body[data-era="title"] .coach-panel { display: none !important; }
.coach-panel {
  position: absolute;
  right: max(12px, calc((100cqw - min(100cqw, calc(100cqh * 16 / 9))) / 2 + 12px));
  bottom: max(8px, calc((100cqh - min(100cqh, calc(100cqw * 9 / 16))) / 2 + 14px));
  left: auto;
  max-width: min(500px, 46cqw);
  z-index: 25;
  background: rgba(16, 46, 47, 0.94);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(8px);
  transition: all 0.2s ease;
}
.coach-panel.is-collapsed {
  max-width: fit-content;
}
.coach-panel.is-collapsed .coach-body { display: none; }
.coach-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  border-bottom: 1px solid rgba(45, 93, 90, 0.6);
}
.coach-panel.is-collapsed .coach-bar { border-bottom: none; }
.coach-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--bone);
  font: 700 12px var(--pixel);
  cursor: pointer;
  padding: 2px 4px;
}
.coach-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}
.coach-dot[data-ok="1"] { background: var(--good); box-shadow: 0 0 8px var(--good); }
.coach-dot[data-ok="wait"] { background: var(--focus); }
.coach-live-tag {
  font-size: 11px;
  color: var(--muted);
  font-weight: normal;
}
.coach-feedback {
  font: 600 11px var(--pixel);
  color: var(--focus);
  padding: 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.coach-feedback[data-tone="ok"] { color: var(--good); }
.coach-feedback[data-tone="bad"] { color: var(--heart); }
.coach-body {
  padding: 6px 10px 8px;
}
.coach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  justify-content: start;
  gap: 6px;
}
.coach-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 6px 7px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(14, 42, 43, 0.55);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.coach-card.is-live {
  border-color: var(--calm);
  background: rgba(143, 214, 240, 0.08);
}
.coach-card-head {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.coach-card-glyph { font-size: 13px; line-height: 1; }
.coach-card-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 11px var(--body);
  color: var(--bone);
}
.coach-card-head kbd { margin-left: auto; flex: none; font-size: 10px; padding: 1px 4px; }
.coach-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  background: #0e2a2b;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.coach-meter {
  flex: none;
  width: 80px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}
.coach-meter span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--ember);
  transition: width 0.08s ease;
}
.coach-instr {
  margin: 0;
  font-size: 10px;
  line-height: 1.3;
  color: var(--muted);
}

@container (max-width: 840px) {
  .coach-panel {
    /* Offset above bottom when container is narrow so advisor below remains completely visible (#204) */
    bottom: max(84px, calc((100cqh - min(100cqh, calc(100cqw * 9 / 16))) / 2 + 90px));
    right: max(12px, calc((100cqw - min(100cqw, calc(100cqh * 16 / 9))) / 2 + 12px));
    max-width: min(420px, calc(100cqw - 24px));
  }
}

/* ---------- loading screen (src/ui/loading.js) ---------- */
.loading-screen {
  position: absolute; inset: 0; z-index: 40;
  display: grid; place-items: center;
  background: var(--ink);
  transition: opacity 0.4s ease;
}
.loading-screen.is-done { opacity: 0; pointer-events: none; }
.ls-inner { display: grid; gap: 10px; width: min(360px, 86%); }
.ls-title { margin: 0; font: 700 26px var(--pixel); color: var(--bone); text-align: center; }
.ls-title span { color: var(--focus); }
.ls-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font: 14px var(--pixel); color: var(--muted); }
.ls-step.is-run { color: var(--bone); }
.ls-step.is-done { color: var(--good); }
.ls-step.is-fail { color: var(--focus); }
.ls-bar { height: 6px; border: 1px solid var(--line); border-radius: 3px; background: linear-gradient(90deg, var(--focus) var(--p, 8%), transparent 0); }
.ls-step.is-run::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--focus); animation: ls-blink 0.9s steps(2) infinite; }
.ls-hint { margin: 0; min-height: 1.2em; font-size: 12px; color: var(--muted); text-align: center; }
@keyframes ls-blink { to { opacity: 0.2; } }
/* #177: what a camera action just did, top centre of the map. */
.cause-toast {
  position: absolute; left: 50%; top: 8px; z-index: 22; transform: translateX(-50%);
  max-width: min(80%, 520px); margin: 0; padding: 4px 12px;
  background: rgba(16, 44, 45, 0.9); border: 1px solid var(--line); border-radius: 12px;
  font: 13px var(--pixel); color: var(--bone); text-align: center; pointer-events: none;
}
.cause-toast[data-tone="wait"] { color: var(--focus); }
.cause-toast[data-tone="joy"] { color: var(--good); }
.cause-toast[data-tone="surprise"] { color: var(--focus); border-color: var(--focus); }
/* #152: the joy buff and the surprise cooldown, in the top bar while a mood is live. */
.mood-chip { font: 12px var(--pixel); white-space: nowrap; padding: 1px 6px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); }
.mood-chip[data-tone="joy"] { color: var(--good); border-color: color-mix(in srgb, var(--good) 55%, var(--line)); }
.mood-chip[data-tone="surprise"] { color: var(--focus); border-color: var(--focus); }
.mood-chip[hidden] { display: none; }
.cause-toast[hidden] { display: none; }
.loading-pill {
  position: absolute; right: 8px; bottom: 8px; z-index: 30;
  max-width: 70%; padding: 4px 10px;
  background: rgba(16, 44, 45, 0.92); border: 1px solid var(--line); border-radius: 12px;
  font: 12px var(--pixel); color: var(--bone);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.loading-pill[data-kind="run"]::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--focus); animation: ls-blink 0.9s steps(2) infinite; }
.loading-pill[data-kind="done"] { color: var(--good); }
.loading-pill[data-kind="fail"] { color: var(--focus); }
@media (prefers-reduced-motion: reduce) {
  .loading-screen { transition: none; }
  .ls-step.is-run::after, .loading-pill[data-kind="run"]::before { animation: none; }
}