/* ==========================================================================
   Bitcoin Puzzle Solver — retro 8-bit CRT · neon cyber-grid arcade theme
   --------------------------------------------------------------------------
   Pure presentation. Every selector below matches markup that already exists
   (or the classes app.js toggles at runtime: .invalid, .copied,
   .status[data-state], .log-<kind>, [hidden]). Nothing here changes how the
   scanner behaves, and no web font is loaded — the page stays fully offline.
   ========================================================================== */

:root {
  --bg: #0a0418;
  --card: rgba(18, 9, 40, 0.88);
  --card-2: rgba(11, 5, 26, 0.94);
  --inset: #07031a;
  --line: rgba(56, 242, 255, 0.16);
  --line-strong: rgba(56, 242, 255, 0.34);
  --text: #eafcff;
  --text-dim: #a3b8cf;
  --muted: #6d7f9a;

  --accent: #f7931a;
  --accent-2: #ffb347;            /* was undefined in the old theme: the
                                     .brand-mark gradient was silently invalid */
  --accent-soft: rgba(247, 147, 26, 0.16);

  --cyan: #38f2ff;                /* holographic UI */
  --green: #2bff7a;               /* TAME path */
  --green-soft: rgba(43, 255, 122, 0.14);
  --orange: #ff8a1f;              /* WILD path */
  --orange-soft: rgba(255, 138, 31, 0.14);
  --red: #ff5f7e;
  --amber: #fbbf24;

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  --radius: 2px;                  /* blocky arcade edges, not soft cards */
  --radius-sm: 2px;
  --pixel-shadow: 4px 4px 0 rgba(0, 0, 0, 0.75);
  --glow-cyan: 0 0 12px rgba(56, 242, 255, 0.35);
}

* { box-sizing: border-box; }

/* app.js toggles .hidden on the alert, notice and error nodes; any rule below
   that sets display: would otherwise defeat the attribute. */
[hidden] { display: none !important; }

html { color-scheme: dark; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------- perspective cyber grid ---- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(56, 242, 255, 0.055) 47px 48px),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(174, 120, 255, 0.05) 47px 48px),
    radial-gradient(1300px 760px at 50% -12%, rgba(56, 242, 255, 0.13), transparent 62%),
    radial-gradient(1000px 700px at 100% 105%, rgba(255, 138, 31, 0.09), transparent 60%),
    radial-gradient(900px 620px at -8% 100%, rgba(43, 255, 122, 0.07), transparent 60%);
}

/* --------------------------------------------------- CRT scanlines + tube -- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0 1px, transparent 1px 3px),
    radial-gradient(125% 105% at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.62) 100%);
  opacity: 0.5;
}

.shell {
  position: relative;
  z-index: 1;
  max-width: 1360px;
  margin: 0 auto;
  padding: 22px 24px 34px;
}

/* --------------------------------------------------------------- topbar -- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 14px; }

.brand-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 700;
  color: #170a02;
  background: linear-gradient(145deg, var(--accent-2), var(--accent));
  border: 1px solid rgba(255, 179, 71, 0.6);
  box-shadow: var(--pixel-shadow), 0 0 16px rgba(247, 147, 26, 0.45);
}

.brand-text h1 {
  margin: 0;
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 14px rgba(56, 242, 255, 0.5);
}

.brand-text p {
  margin: 2px 0 0;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-family: var(--mono);
}

.topbar-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.chip {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  color: var(--cyan);
  background: rgba(56, 242, 255, 0.06);
  white-space: nowrap;
}

.chip-quiet { border-style: dashed; color: var(--muted); background: transparent; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px 5px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: rgba(56, 242, 255, 0.05);
  color: var(--text-dim);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: var(--muted);
  box-shadow: 0 0 6px currentColor;
}

.status[data-state="running"] { color: var(--cyan); border-color: rgba(56, 242, 255, 0.5); background: rgba(56, 242, 255, 0.12); }
.status[data-state="running"] .status-dot { background: var(--cyan); animation: pulse 1.1s ease-in-out infinite; }
.status[data-state="paused"] { color: var(--amber); border-color: rgba(251, 191, 36, 0.5); background: rgba(251, 191, 36, 0.10); }
.status[data-state="paused"] .status-dot { background: var(--amber); }
.status[data-state="found"] { color: var(--green); border-color: rgba(43, 255, 122, 0.55); background: var(--green-soft); }
.status[data-state="found"] .status-dot { background: var(--green); box-shadow: 0 0 10px var(--green); animation: pulse 0.9s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(56, 242, 255, 0.5); }
  50% { opacity: 0.5; box-shadow: 0 0 0 5px rgba(56, 242, 255, 0); }
}

/* --------------------------------------------------------------- layout -- */
.layout {
  display: grid;
  grid-template-columns: 372px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.col-right { display: grid; gap: 18px; min-width: 0; }

/* ---------------------------------------------------------------- cards -- */
.card {
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow:
    inset 0 0 0 1px rgba(56, 242, 255, 0.05),
    0 0 24px rgba(56, 242, 255, 0.07),
    0 16px 40px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  backdrop-filter: blur(2px);
}

.card-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(56, 242, 255, 0.10), transparent 60%);
}

/* the neon underline that reads as the holographic edge */
.card-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 110px;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  box-shadow: 0 0 12px var(--cyan);
}

.card-head h2 {
  margin: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
}

.card-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--orange);
  background: var(--orange-soft);
}

.card-body { padding: 18px; display: grid; gap: 15px; }

/* --------------------------------------------------------------- fields -- */
.field { display: grid; gap: 6px; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.field label,
.modeset legend {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.modeset { border: 0; margin: 0; padding: 0; }

input[type="text"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: 9px 11px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text);
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}

input::placeholder,
textarea::placeholder { color: #4b5a75; }

input[type="text"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: var(--line-strong);
  box-shadow: var(--glow-cyan);
}

input.invalid,
textarea.invalid {
  border-color: var(--red);
  box-shadow: 0 0 12px rgba(255, 95, 126, 0.28);
}

textarea { resize: vertical; line-height: 1.55; }
select { cursor: pointer; }

.slider-row { display: flex; align-items: center; gap: 12px; }

.slider-row input[type="range"] {
  flex: 1;
  min-width: 0;
  height: 4px;
  appearance: none;
  background: rgba(56, 242, 255, 0.16);
  border-radius: 0;
  outline: none;
  cursor: pointer;
}

.slider-row input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 13px;
  height: 18px;
  border-radius: 1px;
  background: var(--cyan);
  border: 1px solid #0a0418;
  box-shadow: 0 0 10px rgba(56, 242, 255, 0.6);
  cursor: pointer;
}

.slider-row input[type="range"]::-moz-range-thumb {
  width: 13px;
  height: 18px;
  border-radius: 1px;
  background: var(--cyan);
  border: 1px solid #0a0418;
  box-shadow: 0 0 10px rgba(56, 242, 255, 0.6);
  cursor: pointer;
}

.slider-row input[type="range"]:focus-visible { box-shadow: 0 0 0 3px rgba(56, 242, 255, 0.22); }
.slider-row input[type="range"]:disabled { opacity: 0.5; cursor: not-allowed; }

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  color: var(--text-dim);
  cursor: pointer;
}

.check-row input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 2px 0 0;
  accent-color: var(--green);
  cursor: pointer;
}

.check-row input[type="checkbox"]:disabled { opacity: 0.5; cursor: not-allowed; }

.check-note { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.slider-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  flex: none;
  width: 32px;
}

.slider-span { color: var(--cyan); }

.slider-out,
.slider-key {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
}

.hint, .range-info, .workers-info {
  font-size: 11.5px;
  line-height: 1.62;
  color: var(--muted);
  margin: 0;
}

.hint code,
.hint strong { color: var(--text-dim); }
.hint code { font-family: var(--mono); color: var(--cyan); }

.range-info, .workers-info {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-dim);
}

.persist-note {
  border-left: 2px solid var(--line-strong);
  padding-left: 10px;
}

.field-error {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--red);
  text-shadow: 0 0 10px rgba(255, 95, 126, 0.4);
}

.notice {
  padding: 10px 12px;
  font-size: 12px;
  border: 1px solid rgba(251, 191, 36, 0.45);
  border-left-width: 3px;
  background: rgba(251, 191, 36, 0.09);
  color: var(--amber);
}

/* ------------------------------------------------------- mode segments -- */
.segments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.segment { position: relative; display: block; }

.segment input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.segment span {
  display: block;
  text-align: center;
  padding: 9px 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}

.segment:hover span { border-color: rgba(56, 242, 255, 0.4); color: var(--cyan); }

.segment input:checked + span {
  color: #170a02;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  border-color: rgba(255, 179, 71, 0.7);
  box-shadow: var(--pixel-shadow), 0 0 14px rgba(247, 147, 26, 0.4);
  font-weight: 700;
}

.segment input:focus-visible + span { box-shadow: 0 0 0 3px rgba(56, 242, 255, 0.3); }
.segment input:disabled + span { opacity: 0.45; cursor: not-allowed; }

/* -------------------------------------------------------------- actions -- */
.actions { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 9px; margin-top: 3px; }

.btn {
  padding: 11px 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform 0.08s, background 0.12s, border-color 0.12s, box-shadow 0.12s;
}

.btn:hover:not(:disabled) {
  background: rgba(56, 242, 255, 0.08);
  border-color: var(--line-strong);
  color: var(--cyan);
  box-shadow: var(--glow-cyan);
}

.btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* the arcade start button — gradient fill, hard pixel drop shadow */
.btn-primary {
  color: #170a02;
  font-weight: 700;
  background: linear-gradient(180deg, var(--accent-2), var(--green));
  border-color: rgba(43, 255, 122, 0.5);
  box-shadow: var(--pixel-shadow), 0 0 18px rgba(247, 147, 26, 0.28);
}

.btn-primary:hover:not(:disabled) {
  color: #170a02;
  background: linear-gradient(180deg, #ffc978, #6bffab);
  border-color: rgba(43, 255, 122, 0.7);
  box-shadow: var(--pixel-shadow), 0 0 24px rgba(43, 255, 122, 0.45);
}

.btn-ghost { color: var(--text-dim); }
.btn-ghost:hover:not(:disabled) {
  color: var(--red);
  border-color: rgba(255, 95, 126, 0.5);
  box-shadow: 0 0 12px rgba(255, 95, 126, 0.25);
}

.btn-mini {
  padding: 7px 11px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, box-shadow 0.12s;
}

.btn-mini:hover { color: var(--cyan); border-color: var(--line-strong); box-shadow: var(--glow-cyan); }

.preset-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.preset-row input[type="text"],
.preset-row input[type="number"] { flex: 1; min-width: 90px; }
.preset-row select { flex: 1; }

/* -------------------------------------------------------------- metrics -- */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.metric {
  display: grid;
  gap: 5px;
  padding: 14px;
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(56, 242, 255, 0.04);
  min-width: 0;
}

.metric-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.metric-value {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  overflow-wrap: anywhere;
}

.metric-value-lg { font-size: 24px; }

.metric-unit {
  font-size: 12px;
  color: var(--cyan);
  margin-left: 4px;
  letter-spacing: 0.08em;
}

.metric-foot {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.metric-progress .metric-value { color: var(--cyan); font-size: 22px; text-shadow: 0 0 14px rgba(56, 242, 255, 0.45); }

/* Time left: its own full-width row, value and basis side by side, because a
   countdown in days/hours/minutes/seconds does not fit a quarter-tile. */
.metric-left {
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 16px;
}
.metric-left .metric-label { grid-column: 1 / -1; }
.metric-left .metric-value { color: var(--cyan); }

/* segmented arcade progress bar */
.bar {
  position: relative;
  height: 12px;
  background: rgba(56, 242, 255, 0.08);
  border: 1px solid var(--line);
  border-radius: 1px;
  overflow: hidden;
}

.bar-fill {
  position: relative;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--green), var(--cyan));
  transition: width 0.35s linear;
}

.bar-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(7, 3, 26, 0.9) 6px 8px);
}

/* ------------------------------------------------------------ window map -- */
/* One tile per window the run is actually walking. Bounds, steps and worker
   slots all come from the live schedule, so a tile names the ground a worker
   was given — never an interval re-derived from the range width. */
.win-range {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-dim);
  /* break at spaces first; split a hex only if it cannot fit */
  overflow-wrap: break-word;
}

.win-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 8px;
}

.win-tile {
  display: grid;
  gap: 5px;
  padding: 8px 9px;
  min-width: 0;
  background: var(--inset);
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-strong);
  border-radius: 3px;
}

.win-tile.is-scan {
  border-color: rgba(56, 242, 255, 0.55);
  box-shadow: 0 0 12px rgba(56, 242, 255, 0.12);
}

.win-tile.is-clear { border-color: rgba(255, 95, 126, 0.32); opacity: 0.72; }

.win-tile.is-hit {
  border-color: var(--green);
  box-shadow: 0 0 14px rgba(43, 255, 122, 0.22);
}

.win-tile.is-queued,
.win-tile.is-idle,
.win-tile.is-ready { opacity: 0.82; }

.win-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.win-id {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text);
}

.win-state {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.is-scan .win-state { color: var(--cyan); }
.is-clear .win-state { color: #ff8ea3; }
.is-hit .win-state { color: var(--green); }

.win-hex {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.45;
  color: var(--text-dim);
  word-break: break-all;
}

.win-hex i {
  display: block;
  font-style: normal;
  color: var(--muted);
  /* a window's bounds are one token: never wrap them mid-number */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.win-bar {
  position: relative;
  height: 5px;
  background: rgba(56, 242, 255, 0.10);
  border-radius: 1px;
  overflow: hidden;
}

.win-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--cyan), var(--green));
  transition: width 0.3s linear;
}

.is-clear .win-bar i { background: #7b4050; }
.is-hit .win-bar i { background: var(--green); }

.win-meta,
.win-sub {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  line-height: 1.4;
  color: var(--muted);
}

.win-meta b { color: var(--text-dim); font-weight: 600; }

.win-foot {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.55;
  color: var(--muted);
}

/* ------------------------------------------------------ results / alert -- */
.alert {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 18px;
  border: 2px solid var(--green);
  background: linear-gradient(135deg, var(--green-soft), rgba(56, 242, 255, 0.10));
  box-shadow: 0 0 28px rgba(43, 255, 122, 0.35);
  overflow: hidden;
  animation: solved-burst 0.5s ease-out;
}

/* radiating SOLVED burst */
.alert::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 50%;
  width: 340px;
  height: 340px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(43, 255, 122, 0.35) 0%, transparent 68%);
  pointer-events: none;
  animation: solved-glow 1.6s ease-in-out infinite;
}

@keyframes solved-burst {
  0% { transform: scale(0.96); opacity: 0; }
  60% { transform: scale(1.02); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes solved-glow {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.alert-icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  font-size: 20px;
  font-weight: 700;
  color: #04140a;
  background: var(--green);
  border: 1px solid rgba(43, 255, 122, 0.8);
  box-shadow: var(--pixel-shadow), 0 0 18px rgba(43, 255, 122, 0.7);
}

.alert-text { position: relative; display: grid; gap: 2px; min-width: 0; }

.alert-text strong {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  text-shadow: 0 0 14px rgba(43, 255, 122, 0.6);
}

.alert-text span { font-size: 12px; color: var(--text-dim); font-family: var(--mono); }

.empty {
  margin: 0;
  padding: 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: rgba(7, 3, 26, 0.5);
}

.empty strong { color: var(--cyan); }

.result-list { margin: 0; display: grid; gap: 8px; }

.result-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(7, 3, 26, 0.6);
}

.result-row dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.result-row dd { margin: 0; display: flex; align-items: center; gap: 8px; min-width: 0; }

.result-row code {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--cyan);
  word-break: break-all;
  overflow-wrap: anywhere;
}

.result-row-key { border-color: rgba(255, 138, 31, 0.38); background: var(--orange-soft); }
.result-row-key code { color: var(--orange); text-shadow: 0 0 12px rgba(255, 138, 31, 0.5); }

.result-row span { font-family: var(--mono); font-size: 12.5px; color: var(--text-dim); }

.btn-copy {
  flex: none;
  padding: 5px 9px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}

.btn-copy:hover { color: var(--cyan); border-color: var(--line-strong); }
.btn-copy.copied { color: var(--green); border-color: rgba(43, 255, 122, 0.55); box-shadow: 0 0 12px rgba(43, 255, 122, 0.3); }

/* ------------------------------------------------------------------ log -- */
.log-wrap { display: grid; gap: 8px; }

.log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.log {
  list-style: none;
  margin: 0;
  padding: 8px 10px;
  height: 168px;
  overflow-y: auto;
  background: #05030f;
  border: 1px solid var(--line);
  border-left: 3px solid rgba(56, 242, 255, 0.35);
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 11.5px;
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 242, 255, 0.35) transparent;
}

.log::-webkit-scrollbar { width: 8px; }
.log::-webkit-scrollbar-thumb { background: rgba(56, 242, 255, 0.35); border-radius: 0; }

.log-item { display: flex; gap: 10px; padding: 3px 0; color: var(--text-dim); }
.log-time { color: #4a5a76; flex: none; }
.log-msg { word-break: break-word; }
.log-warn .log-msg { color: var(--amber); }
.log-success .log-msg { color: var(--green); }
.log-info .log-msg { color: var(--text-dim); }
.log-error .log-msg { color: var(--red); }

/* ---------------------------------------------------------------- footer -- */
/* full-width status ticker, echoing an arcade attract-mode strip */
.foot {
  margin-top: 22px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  border-radius: var(--radius-sm);
  background: rgba(7, 3, 26, 0.72);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: var(--muted);
  max-width: none;
}

.foot code { font-family: var(--mono); color: var(--cyan); }
.foot p { margin: 0; }

/* ══════════════════════════════════════════════════════════════════
   Game view — the arcade screen. Presentation only: app.js mirrors the
   console HUD into these nodes and enrols this device into the same
   multi-device pool the Configuration card drives.
   ══════════════════════════════════════════════════════════════════ */

.view-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.view-btn {
  padding: 7px 13px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.12s, background 0.12s, border-color 0.12s, box-shadow 0.12s;
}

.view-btn:hover { color: var(--cyan); }

.view-btn.is-active {
  color: var(--green);
  background: var(--green-soft);
  border-color: rgba(43, 255, 122, 0.45);
  box-shadow: 0 0 14px rgba(43, 255, 122, 0.2);
}

.view-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ==========================================================================
   Lattice view — HNP / LLL report
   --------------------------------------------------------------------------
   Layout only. Every figure in this view was printed by
   artifacts/lattice-attack.py; nothing is computed here, so nothing can drift.
   ========================================================================== */
.lat-layout { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.lat-layout .lat-wide { grid-column: 1 / -1; }

.lat-facts { display: grid; gap: 6px; margin: 0; }
.lat-fact {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 5px;
  border-bottom: 1px dashed var(--line);
}
.lat-fact:last-child { border-bottom: 0; }
.lat-fact dt { color: var(--muted); font-size: 11px; }
.lat-fact dd { margin: 0; font-family: var(--mono); font-size: 11.5px; text-align: right; }

.lat-matrix {
  margin: 0 0 10px;
  padding: 12px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.65;
  color: var(--text);
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.lat-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.lat-table th {
  text-align: left;
  padding: 6px 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.lat-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.lat-table tbody tr:last-child td { border-bottom: 0; }
.lat-ok { color: var(--green); }
.lat-no { color: #f2b544; }

/* ==========================================================================
   Arcade cockpit — the game view
   --------------------------------------------------------------------------
   Layout only: every panel below mirrors a node app.js already renders, or the
   coordinator this device actually connected to. Nothing here draws a device,
   a node, a rate or a key that the page does not have.
   ========================================================================== */

.cockpit {
  display: grid;
  gap: 14px 16px;
  grid-template-columns: minmax(180px, 0.8fr) minmax(320px, 2.2fr) minmax(220px, 0.95fr);
  grid-template-areas:
    "tl  head   global"
    "tl  stage  global"
    "hw  actions global";
  align-items: start;
}

.hud {
  padding: 14px 16px;
  background:
    linear-gradient(180deg, rgba(18, 44, 78, 0.55), rgba(6, 14, 28, 0.86));
  border: 1px solid rgba(56, 242, 255, 0.26);
  border-radius: 10px;
  box-shadow: inset 0 0 30px rgba(20, 90, 150, 0.16), 0 4px 22px rgba(0, 0, 0, 0.45);
}

.hud-tl { grid-area: tl; }
.hud-global { grid-area: global; }
.hud-hw { grid-area: hw; align-self: end; }

.hud-title {
  margin: 0 0 4px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #dff3ff;
  text-shadow: 0 0 12px rgba(120, 210, 255, 0.45);
}

.hud-sub {
  margin: 0 0 11px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.hud-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hud-line span { color: var(--text-dim); }
.hud-line b { color: #cfe8ff; font-weight: 700; text-align: right; }

/* STATUS: ACTIVE / PAUSED / VALIDATED */
.hud-state { margin-bottom: 2px; font-size: 12px; }
.hud-state b { color: var(--green); letter-spacing: 0.14em; text-shadow: 0 0 14px rgba(43, 255, 122, 0.55); }
.hud-state[data-state="paused"] b { color: var(--amber); text-shadow: 0 0 14px rgba(251, 191, 36, 0.5); }
.hud-state[data-state="found"] b { color: var(--accent-2); text-shadow: 0 0 18px rgba(255, 179, 71, 0.65); }
.hud-state[data-state="idle"] b { color: var(--muted); text-shadow: none; }

/* the headline rate, the cockpit's biggest number */
.hud-rate { display: grid; margin: 4px 0 13px; }
.hud-rate span {
  font-family: var(--mono);
  font-size: clamp(22px, 3.4vw, 30px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--accent-2);
  text-shadow: 0 0 20px rgba(247, 147, 26, 0.55);
}
.hud-rate em {
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 9px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.hud-kv {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.hud-kv span { color: var(--text-dim); }
.hud-kv b { color: var(--accent-2); }

.hud-note { margin: 10px 0 0; font-size: 10.5px; line-height: 1.5; color: var(--muted); }

/* ---------------------------------------------------------------- header -- */
.game-head { grid-area: head; text-align: center; padding: 2px 8px 0; }

.head-kicker {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(15px, 2.4vw, 21px);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffd24a;
  text-shadow: 0 0 26px rgba(255, 180, 40, 0.55), 0 0 6px rgba(255, 220, 120, 0.6);
}

.head-sub {
  margin: 6px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 18px rgba(56, 242, 255, 0.55);
}

/* ------------------------------------------------------------ range bar --- */
.stage-col { grid-area: stage; display: flex; flex-direction: column; gap: 9px; min-width: 0; }

.range-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }

.range-title {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #dff3ff;
}

.range-cover {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.range-track {
  position: relative;
  height: 15px;
  border-radius: 99px;
  background: rgba(8, 20, 38, 0.92);
  border: 1px solid rgba(56, 242, 255, 0.32);
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.75), 0 0 16px rgba(56, 242, 255, 0.12);
  overflow: hidden;
}

.range-fill {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #ffd24a, var(--accent));
  box-shadow: 0 0 20px rgba(247, 147, 26, 0.7);
  transition: width 0.5s ease-out;
}

/* the window this device is actually walking, inside the whole interval */
.range-window {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0%;
  background: repeating-linear-gradient(45deg, rgba(56, 242, 255, 0.4) 0 5px, transparent 5px 10px);
  border-left: 1px solid rgba(56, 242, 255, 0.9);
  border-right: 1px solid rgba(56, 242, 255, 0.9);
}

.range-ends {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.range-ends em { display: block; font-style: normal; font-size: 9px; color: var(--muted); letter-spacing: 0.16em; }
.range-ends b { color: var(--cyan); font-size: 11px; }
.range-ends span:last-child { text-align: right; }
.range-mid { color: var(--muted); font-size: 9.5px; }

.range-size { margin: 0; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* --------------------------------------------------------------- stage ---- */
.stage {
  position: relative;
  min-height: 240px;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(130% 95% at 50% 42%, #0b1a33 0%, #050a16 72%);
  border: 1px solid rgba(56, 242, 255, 0.24);
  box-shadow: inset 0 0 70px rgba(20, 90, 150, 0.28), 0 8px 30px rgba(0, 0, 0, 0.5);
}

#gStage { display: block; width: 100%; height: 100%; }

.stage-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 6px 11px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #04121a;
  background: var(--cyan);
  border-radius: 99px;
  box-shadow: 0 0 24px rgba(56, 242, 255, 0.8);
  animation: badge-bob 1.2s ease-in-out infinite;
}

@keyframes badge-bob { 50% { transform: translateY(-4px); } }

.stage-flag {
  position: absolute;
  left: 10px;
  bottom: 7px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(163, 184, 207, 0.5);
  pointer-events: none;
}

/* Legend for the live field: the two herd lanes and the DP crosses. */
.field-legend {
  position: absolute;
  right: 10px;
  bottom: 7px;
  display: flex;
  gap: 10px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(163, 184, 207, 0.55);
  pointer-events: none;
}
.field-legend span::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border-radius: 50%;
  vertical-align: middle;
}
.field-legend .fl-tame::before { background: rgba(120, 230, 255, 0.95); box-shadow: 0 0 8px rgba(120, 230, 255, 0.7); }
.field-legend .fl-wild::before { background: rgba(255, 196, 80, 0.95); box-shadow: 0 0 8px rgba(255, 196, 80, 0.7); }
.field-legend .fl-dp::before {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  width: 8px;
  height: 8px;
  border-left: 1.5px solid rgba(255, 196, 80, 0.95);
  border-top: 1.5px solid rgba(255, 196, 80, 0.95);
  transform: rotate(45deg);
}

/* --------------------------------------------------------- cooperation ---- */
.hud-global { display: flex; flex-direction: column; min-height: 0; }

.feed-title {
  margin: 12px 0 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
}

.feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 3px;
  align-content: start;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.5;
  color: #7fc7ee;
}

.feed li {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  animation: feed-in 0.35s ease-out;
}

.feed li b { color: #dff3ff; font-weight: 600; }
.feed li.is-hit { color: var(--accent-2); }
.feed li.is-hit b { color: #ffd24a; }
.feed li.is-stale { color: var(--red); }

@keyframes feed-in { from { opacity: 0; transform: translateY(-4px); } }

.feed-empty { margin: 0; font-size: 10px; line-height: 1.55; color: var(--muted); }

/* ------------------------------------------------------------ hardware ---- */
.hud-hw .meter {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 3px 8px;
  margin-bottom: 9px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.hud-hw .meter b { color: #cfe8ff; font-size: 10px; }

.meter-bar {
  grid-column: 1 / -1;
  height: 7px;
  border-radius: 99px;
  background: rgba(8, 20, 38, 0.92);
  border: 1px solid var(--line);
  overflow: hidden;
}

.meter-bar i {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--green), #9dffc4);
  transition: width 0.5s ease-out;
}

.meter-bar i.is-therm { background: linear-gradient(90deg, #2f9dff, #7fd4ff); }
.meter-bar i.is-therm.warn { background: linear-gradient(90deg, var(--amber), var(--red)); }

/* ------------------------------------------------------------- actions ---- */
.stage-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 2px;
}

.btn-arcade {
  padding: 10px 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #eafcff;
  background: linear-gradient(180deg, rgba(56, 242, 255, 0.16), rgba(56, 242, 255, 0.04));
  border: 1px solid rgba(56, 242, 255, 0.45);
  border-radius: 8px;
  box-shadow: 0 0 18px rgba(56, 242, 255, 0.16);
  cursor: pointer;
  transition: background 0.12s, box-shadow 0.12s, transform 0.08s;
}

.btn-arcade:hover { background: rgba(56, 242, 255, 0.22); box-shadow: 0 0 26px rgba(56, 242, 255, 0.3); }
.btn-arcade:active { transform: translateY(1px); }
.btn-arcade:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.btn-arcade[disabled] { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.btn-arcade.is-warn { color: var(--accent-2); border-color: rgba(255, 179, 71, 0.55); box-shadow: 0 0 20px rgba(255, 179, 71, 0.2); }

.boost {
  padding: 9px 13px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px dashed rgba(56, 242, 255, 0.3);
  border-radius: 8px;
}
.boost.is-on { color: var(--green); border-color: rgba(43, 255, 122, 0.5); box-shadow: 0 0 18px rgba(43, 255, 122, 0.18); }
.boost.is-warn { color: var(--amber); border-color: rgba(251, 191, 36, 0.5); }

/* -------------------------------------------------------------- drawer ---- */
.drawer {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  padding: 15px 16px;
  background: rgba(6, 14, 28, 0.86);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.drawer-col { display: grid; gap: 8px; align-content: start; }

.grid-cells {
  position: relative;
  overflow: hidden;
  width: min(100%, 250px);
  aspect-ratio: 1 / 1;
  background:
    repeating-linear-gradient(0deg, rgba(56, 242, 255, 0.3) 0 1px, transparent 1px 25px),
    repeating-linear-gradient(90deg, rgba(56, 242, 255, 0.3) 0 1px, transparent 1px 25px),
    rgba(7, 3, 26, 0.75);
  transform: perspective(700px) rotateX(52deg) rotateZ(45deg) scale(0.8);
  box-shadow: 0 0 26px rgba(56, 242, 255, 0.3);
}

/* One 25px tile per schedule slot. The gradients above draw the grid lines at
   the same 25px pitch, so tiles and lines stay registered as slots fill in. */
.grid-cells i {
  position: absolute;
  width: 25px;
  height: 25px;
  box-sizing: border-box;
  background: rgba(56, 242, 255, 0.08);
  border: 1px solid rgba(56, 242, 255, 0.14);
}

.grid-cells i.c-done {
  background: rgba(43, 255, 122, 0.58);
  border-color: rgba(43, 255, 122, 0.92);
  box-shadow: 0 0 9px rgba(43, 255, 122, 0.55);
}

.grid-cells i.c-live {
  background: rgba(56, 242, 255, 0.8);
  border-color: rgba(56, 242, 255, 1);
  box-shadow: 0 0 16px rgba(56, 242, 255, 0.95);
  animation: cell-pulse 0.9s steps(2, end) infinite;
}

@keyframes cell-pulse { 50% { opacity: 0.35; } }

.grid-sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.join {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  padding: 17px 19px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.btn-join {
  display: grid;
  gap: 3px;
  justify-items: center;
  padding: 15px 30px;
  font-family: var(--mono);
  color: #170a02;
  background: linear-gradient(180deg, var(--accent-2), var(--green));
  border: 3px solid #0b0520;
  border-radius: var(--radius);
  box-shadow: var(--pixel-shadow), 0 0 24px rgba(247, 147, 26, 0.4);
  cursor: pointer;
  transition: transform 0.08s, box-shadow 0.12s, filter 0.12s;
}

.btn-join-main { font-size: 16px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.btn-join-sub { font-size: 10px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; opacity: 0.8; }

.btn-join:hover { filter: brightness(1.08); box-shadow: var(--pixel-shadow), 0 0 32px rgba(43, 255, 122, 0.55); }
.btn-join:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75); }
.btn-join:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* Join code: a field and its button share one row, wrapping on narrow screens. */
.join-code {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.join-code .join-field { flex: 1 1 auto; min-width: 0; }
.join-code .btn { flex: 0 0 auto; }

#gJoinCode {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}

@media (max-width: 560px) {
  .join-code { flex-wrap: wrap; }
  .join-code .btn { width: 100%; }
}

.join-state {
  flex: 1 1 190px;
  margin: 0;
  align-self: center;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--green);
}

.join-panel {
  flex: 1 1 340px;
  display: grid;
  gap: 11px;
  padding: 14px;
  background: var(--inset);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}

.join-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.join-field input {
  width: 96px;
  padding: 7px 9px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
  background: rgba(7, 3, 26, 0.92);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

.join-field input:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }

.join-hint { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }

.join-actions { display: flex; gap: 9px; flex-wrap: wrap; }

.log-text {
  margin: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-dim);
  word-break: break-word;
}

.ticker {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding: 12px 15px;
  background: rgba(7, 3, 26, 0.92);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--glow-cyan);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.ticker-tag { color: var(--green); font-weight: 700; letter-spacing: 0.2em; }

.ticker-dot {
  width: 8px;
  height: 8px;
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
  animation: pulse 1.2s steps(2, end) infinite;
}

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 1120px) {
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 940px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .shell { padding: 16px 14px 28px; }
  .cockpit {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "tl" "head" "stage" "global" "hw" "actions";
  }
  .game-head { text-align: left; }
  .hud-hw { order: 3; }
}

@media (max-width: 560px) {
  .metrics { grid-template-columns: minmax(0, 1fr); }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .segments { grid-template-columns: minmax(0, 1fr); }
  .result-row { grid-template-columns: minmax(0, 1fr); }
  .metric-value { font-size: 22px; }
  .actions { grid-template-columns: minmax(0, 1fr); }
  .btn-join { width: 100%; }
  .join-panel { flex: 1 1 100%; }
  .stage-badge { right: 4px; }
  .hud-rate span { font-size: 24px; }
}

/* ------------------------------------------------- accessibility guard ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .alert::before { display: none; }
}

/* ------------------------------------------------------------------ *
 * Distributed coordinator panel (game view / join column).
 * ------------------------------------------------------------------ */
.coord {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line, #24303f);
  border-radius: 14px;
  background: var(--panel, rgba(12, 18, 26, 0.72));
}

.coord-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
}

.coord-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim, #8fa2b8);
}

.coord-chip {
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line, #24303f);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dim, #8fa2b8);
  background: transparent;
}

.coord-chip.is-on {
  color: var(--accent, #4fd1c5);
  border-color: var(--accent, #4fd1c5);
}

.coord-chip.is-live {
  color: #0b121a;
  background: var(--accent, #4fd1c5);
  border-color: var(--accent, #4fd1c5);
}

.coord-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--dim, #8fa2b8);
}

.coord-hint code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: var(--text, #e6edf5);
}

.coord-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.coord-field {
  display: flex;
  flex: 1 1 190px;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.coord-field span {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dim, #8fa2b8);
}

.coord-field input {
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 9px;
  border: 1px solid var(--line, #24303f);
  background: var(--input, rgba(6, 11, 18, 0.85));
  color: var(--text, #e6edf5);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
}

.coord-field input:focus {
  outline: none;
  border-color: var(--accent, #4fd1c5);
}

.coord-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.coord-state {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text, #e6edf5);
}

.coord-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  gap: 8px;
}

.coord-stats > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid var(--line, #24303f);
  background: rgba(6, 11, 18, 0.5);
}

.coord-stats span {
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dim, #8fa2b8);
}

.coord-stats b {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--text, #e6edf5);
}

.coord-bar {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(6, 11, 18, 0.8);
  border: 1px solid var(--line, #24303f);
}

.coord-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--accent, #4fd1c5);
  transition: width 0.35s ease;
}

@media (max-width: 560px) {
  .coord-row { flex-direction: column; }
  .coord-field { flex: 1 1 auto; }
  .coord-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ *
 * The find popup
 *
 * Full-screen, above everything, on a phone as much as on a desktop: the key
 * must be readable and copyable without hunting for a card. Fixed inset rather
 * than a centred box so a long WIF wraps inside the screen instead of widening
 * it. [hidden] already wins over display, so this is invisible until opened.
 * ------------------------------------------------------------------ */
.fm-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 18px 12px 28px;
  overflow-y: auto;
  background: rgba(4, 1, 12, 0.86);
  backdrop-filter: blur(3px);
}

.fm-card {
  width: 100%;
  max-width: 620px;
  margin: auto;
  padding: 18px 16px 16px;
  background: var(--card-2);
  border: 2px solid var(--green);
  border-radius: var(--radius);
  box-shadow: 0 0 38px rgba(43, 255, 122, 0.28), var(--pixel-shadow);
}

.fm-kicker {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
}

.fm-title {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.15;
  color: var(--text);
}

.fm-sub {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

.fm-list { margin: 0; }

.fm-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}

.fm-row dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.fm-row dd {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  min-width: 0;
}

.fm-row code {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--cyan);
  overflow-wrap: anywhere;
  word-break: break-all;
}

.fm-row-key code { color: var(--green); }

.fm-note {
  margin: 12px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

.fm-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

@media (min-width: 560px) {
  .fm-row { grid-template-columns: 132px 1fr; align-items: baseline; gap: 12px; }
}
/* ==========================================================================
   Game view — the scene, mounted in the dashboard
   --------------------------------------------------------------------------
   The Game tab used to navigate to a standalone page, which meant the console
   was unloaded to look at its own run. The scene now lives in a frame inside
   this page; the frame is fed the record the console publishes, so the two are
   the same run. The old in-page cockpit is retired but its markup stays (the
   console's view wiring reads those nodes), so it is hidden rather than cut.
   ========================================================================== */
.game-mount {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.game-frame {
  display: block;
  /* Width derived from the height cap rather than the other way round: with a
     plain 100% width the 1024/560 box would be taller than the max-height on a
     normal desktop and the canvas would scroll inside the frame. */
  width: 100%;
  max-width: calc((100vh - 176px) * 1024 / 560);
  aspect-ratio: 1024 / 560;
  margin: 0 auto;
  border: 0;
  border-radius: 10px;
  background: #030a14;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(56, 242, 255, 0.18);
}
.game-mount-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin: 0 2px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}
.game-mount-foot a { color: #7fe6ff; text-decoration: none; white-space: nowrap; }
.game-mount-foot a:hover { text-decoration: underline; }
.view#viewGame > .cockpit,
.view#viewGame > .ticker { display: none; }

@media (max-width: 700px) {
  .game-frame { max-width: none; }
  .game-mount-foot { flex-direction: column; gap: 4px; }
}

/* The strip inside a window tile: herd positions and distinguished points for
   the window being walked, plus the states the map is read by. Cleared ground
   is filled green and glows; ground no window covers stays a dashed outline. */
.win-field {
  position: relative;
  height: 12px;
  margin: 2px 0 1px;
  border-radius: 3px;
  background: rgba(120, 200, 255, 0.07);
  overflow: hidden;
}
.win-field[hidden] { display: none; }
.win-dot {
  position: absolute;
  top: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  transform: translateX(-50%);
}
.win-dot.is-tame { background: rgba(120, 230, 255, 0.95); box-shadow: 0 0 6px rgba(120, 230, 255, 0.8); }
.win-dot.is-wild { top: 6px; background: rgba(255, 196, 80, 0.95); box-shadow: 0 0 6px rgba(255, 196, 80, 0.8); }
.win-dot.is-dp {
  top: 1px;
  width: 5px;
  height: 5px;
  border-radius: 0;
  background: transparent;
  border: 1px solid rgba(120, 230, 255, 0.85);
}
.win-tile.is-clear {
  border-color: rgba(43, 255, 122, 0.85);
  box-shadow: 0 0 16px rgba(43, 255, 122, 0.22) inset, 0 0 10px rgba(43, 255, 122, 0.18);
}
.win-tile.is-clear .win-state { color: #2bff7a; }
.win-tile.is-clear .win-field { background: rgba(43, 255, 122, 0.12); }
.win-tile.is-queued,
.win-tile.is-idle { border-style: dashed; opacity: 0.85; }

/* ------------------------------------------------------------------ *
 * Confetti around the match popup
 *
 * Decoration only, and deliberately behind the card: the pieces are thrown
 * from the card's own edges and fall past it, so nothing ever covers the
 * key the popup exists to show. Hidden entirely for reduced-motion users.
 * ------------------------------------------------------------------ */
.fm-confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.fm-card {
  position: relative;
  z-index: 1;
}

/* Card fills the viewport: bring the paper in front so it is visible at all. */
.fm-confetti.fm-confetti--front { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .fm-confetti { display: none; }
}

/* The puzzle list marks solved puzzles green and open ones amber. */
.puzzle-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.puzzle-legend span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.lg-green { color: var(--green); }
.lg-amber { color: var(--amber); }

/* ==========================================================================
   Collision probe (P100 experiment panel)
   --------------------------------------------------------------------------
   Two counters side by side, because the whole point is the contrast: the
   green one is a key, the amber one is wasted work. Everything else is a
   readout and stays deliberately quiet.
   ========================================================================== */

.probe-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.probe-cell {
  display: grid;
  gap: 4px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  background: var(--inset);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.probe-cell > span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.probe-cell > b {
  font-family: var(--mono);
  font-size: 26px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.probe-cell > small { font-size: 11px; color: var(--text-dim); }

.probe-target > b { color: var(--green); text-shadow: 0 0 14px rgba(43, 255, 122, 0.35); }
.probe-internal > b { color: var(--amber); text-shadow: 0 0 14px rgba(251, 191, 36, 0.3); }

.probe-form { display: grid; gap: 10px; }

.probe-pick { display: grid; gap: 5px; }

.probe-pick > span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.probe-pick select {
  width: 100%;
  padding: 9px 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline: none;
}

.probe-pick select:focus-visible { border-color: var(--line-strong); box-shadow: var(--glow-cyan); }
.probe-pick select:disabled { opacity: 0.55; }

.probe-actions { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 9px; }

.probe-transfers { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

/* Scan-window drag bar: one track, the window shaded between two handles. Drag
   the band to slide it, drag an edge, or tap anywhere to bring the window there.
   Named scanwin-* because .win-bar already belongs to the kangaroo sub-range bar.
   touch-action: none keeps a phone from scrolling the page out from under a drag. */
.scanwin-bar { flex: 1; min-width: 0; padding: 8px 2px 6px; touch-action: none; user-select: none; }

.scanwin-track {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: var(--inset);
  border: 1px solid var(--line);
}

.scanwin-band {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: 0%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(56, 242, 255, 0.3), rgba(43, 255, 122, 0.3));
  border: 1px solid rgba(56, 242, 255, 0.55);
  cursor: grab;
}

.scanwin-bar.is-dragging .scanwin-band { cursor: grabbing; }

.scanwin-handle {
  position: absolute;
  top: 50%;
  width: 13px;
  height: 24px;
  margin-top: -12px;
  border-radius: 4px;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(56, 242, 255, 0.55);
  cursor: ew-resize;
}

.scanwin-handle-start { left: 0; transform: translateX(-50%); }
.scanwin-handle-end { left: 100%; transform: translateX(-50%); }

.scanwin-handle:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.probe-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.probe-range-cell { display: grid; gap: 3px; min-width: 0; }

.probe-range-cell > span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.probe-range-cell > code {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.45;
  color: var(--text);
  overflow-wrap: anywhere;
  word-break: break-all;
}

.probe-pass { display: grid; gap: 7px; }

.probe-pass-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.probe-pass-head > b {
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--green);
  text-shadow: 0 0 12px rgba(43, 255, 122, 0.3);
}

.probe-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--inset);
  border: 1px solid var(--line);
  overflow: hidden;
}

.probe-bar > i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green), var(--cyan));
  transition: width 0.25s linear;
}

.probe-pass-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 10px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
}

.probe-passes {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 8px;
  min-width: 0;
}

.probe-passes-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.probe-pass-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; min-width: 0; }

.probe-pass-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--inset);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text);
  white-space: nowrap;
}

.probe-pass-chip > b { color: var(--cyan); font-weight: 600; }

.probe-pass-empty {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
}

@media (max-width: 560px) {
  .probe-range { grid-template-columns: 1fr; }
}

.probe-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 12px;
  margin: 0;
}

.probe-stats > div { display: grid; gap: 2px; min-width: 0; }

.probe-stats dt {
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.probe-stats dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

@media (max-width: 620px) {
  .probe-pair, .probe-stats { grid-template-columns: 1fr 1fr; }
}

/* Victory banner: the one state in this panel that has to be unmissable. */
.probe-victory {
  display: grid;
  gap: 6px;
  padding: 12px 13px;
  border: 1px solid rgba(43, 255, 122, 0.55);
  background: var(--green-soft);
  box-shadow: 0 0 18px rgba(43, 255, 122, 0.18);
}

.probe-victory > strong {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
}

.probe-victory > code {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  overflow-wrap: anywhere;
}

.probe-victory > span { font-size: 11px; color: var(--text-dim); }
.probe-victory > button { justify-self: start; }

.probe-picks { display: grid; gap: 10px; }

.probe-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
}

.probe-toggle input {
  width: 15px;
  height: 15px;
  accent-color: var(--cyan);
  cursor: pointer;
}

@media (min-width: 520px) {
  .probe-picks { grid-template-columns: 1fr 1fr; }
}

/* Floating scan map: the reference scene, in the probe's own palette. */
.scanmap {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  width: min(600px, calc(100vw - 24px));
  border: 1px solid rgba(56, 242, 255, 0.35);
  border-radius: 14px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(38, 20, 70, 0.55), rgba(4, 7, 18, 0.97) 60%);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(56, 242, 255, 0.12);
  backdrop-filter: blur(6px);
  overflow: hidden;
  font-feature-settings: "tnum";
}

.scanmap[hidden] { display: none; }

.scanmap.is-min .scanmap-body { display: none; }
.scanmap.is-min { width: min(300px, calc(100vw - 24px)); }

.scanmap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px 7px 12px;
  cursor: grab;
  border-bottom: 1px solid rgba(56, 242, 255, 0.18);
  background: linear-gradient(90deg, rgba(56, 242, 255, 0.12), rgba(178, 77, 255, 0.10));
  touch-action: none;
}

.scanmap.is-drag .scanmap-head { cursor: grabbing; }

.scanmap-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}

.scanmap-title > b { flex: none; color: var(--cyan); font-weight: 600; white-space: nowrap; }

.scanmap-sub {
  flex: 1 1 auto;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scanmap-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: sm-blink 1.8s ease-in-out infinite;
}

@keyframes sm-blink { 50% { opacity: 0.35; } }

.scanmap-btns { display: flex; gap: 4px; }

.scanmap-btn {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(56, 242, 255, 0.28);
  background: rgba(56, 242, 255, 0.06);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.scanmap-btn:hover { border-color: var(--cyan); color: var(--cyan); }

.scanmap-body { padding: 2px 4px 6px; }

.scanmap-stage { position: relative; }

.scanmap-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* The eye and its iris, driven by the same animations the reference uses. */
.scanmap-svg .sm-eye { filter: drop-shadow(0 0 22px rgba(178, 77, 255, 0.55)); }
.scanmap-svg .sm-iris { transform-box: fill-box; transform-origin: center; }
.scanmap-svg .sm-iris.a { animation: sm-spin 9s linear infinite; }
.scanmap-svg .sm-iris.b { animation: sm-spin 6s linear infinite reverse; }
.scanmap-svg .sm-iris.c { animation: sm-spin 3.6s linear infinite; }
.scanmap-svg .sm-iris.d { animation: sm-pulse 2.4s ease-out infinite; }

@keyframes sm-spin { to { transform: rotate(360deg); } }

@keyframes sm-pulse {
  0% { transform: scale(0.5); opacity: 0.85; }
  100% { transform: scale(3.2); opacity: 0; }
}

.scanmap-svg .sm-eye-sweep { animation: sm-sweep 2.9s linear infinite; }

@keyframes sm-sweep {
  0% { transform: translateX(-170px); opacity: 0; }
  12% { opacity: 0.9; }
  88% { opacity: 0.9; }
  100% { transform: translateX(170px); opacity: 0; }
}

/* Kangaroos hop on the plane; the herd is what the numbers are about. */
.scanmap-svg .sm-kg {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: sm-hop 0.62s ease-in-out infinite;
  filter: drop-shadow(0 0 6px currentColor);
}

.scanmap-svg .sm-kg:nth-of-type(2n) { animation-duration: 0.54s; animation-delay: -0.2s; }
.scanmap-svg .sm-kg:nth-of-type(3n) { animation-duration: 0.7s; animation-delay: -0.38s; }

@keyframes sm-hop {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-9px) rotate(-7deg); }
}

.scanmap-svg .sm-flow { stroke-dasharray: 6 12; animation: sm-flow 1.3s linear infinite; }

@keyframes sm-flow { to { stroke-dashoffset: -18; } }

.scanmap-svg .sm-head { animation: sm-head 1.6s ease-in-out infinite; }

@keyframes sm-head {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

.scanmap-svg .sm-beam { animation: sm-beam 2.2s ease-in-out infinite; }
@keyframes sm-beam { 50% { opacity: 0.55; } }

/* The diamonds that float up off the plane when a point is left. */
.scanmap-floaters { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.scanmap-floaters .sm-dp {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: #fff;
  transform: rotate(45deg);
  box-shadow: 0 0 8px #eaffff;
  animation: sm-dp 2.6s ease-out forwards;
}

.scanmap-floaters .sm-dp.wild { background: #ffd84d; box-shadow: 0 0 8px #ffd84d; }

@keyframes sm-dp {
  0% { opacity: 0; transform: translateY(6px) rotate(45deg) scale(0.6); }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-96px) rotate(45deg) scale(0.5); }
}

.scanmap-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 0 8px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.scanmap-legend > span { display: inline-flex; align-items: center; gap: 5px; }

.scanmap-legend i { width: 8px; height: 8px; border-radius: 2px; }
.scanmap-legend .lg-tame { background: var(--cyan); border-radius: 50%; box-shadow: 0 0 6px var(--cyan); }
.scanmap-legend .lg-wild { background: #ffd84d; border-radius: 50%; box-shadow: 0 0 6px #ffd84d; }
.scanmap-legend .lg-dp { background: #fff; transform: rotate(45deg); width: 6px; height: 6px; }

@media (max-width: 560px) {
  .scanmap { right: 6px; left: 6px; bottom: 6px; width: auto; }
  .scanmap.is-min { right: 6px; left: auto; width: 260px; }
  .scanmap-legend { font-size: 9px; gap: 3px 9px; }
}

/* Text and marks inside the scan scene. */
.scanmap-svg .sm-pip { fill: #eaffff; filter: drop-shadow(0 0 4px #3ff3ff); }
.scanmap-svg .sm-pip.wild { fill: #ffd84d; filter: drop-shadow(0 0 4px #ffd84d); }
.scanmap-svg .sm-rowlab { font-family: var(--mono); font-size: 10px; fill: #8fb4c0; }
.scanmap-svg .sm-tick { font-family: var(--mono); font-size: 11px; fill: #8fb4c0; }
.scanmap-svg .sm-caption { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; fill: #8fb4c0; text-transform: uppercase; }
.scanmap-svg .sm-caption.dim { fill: rgba(143, 180, 192, 0.55); letter-spacing: 0.06em; }
.scanmap-svg .sm-caption.live { fill: #3dff9a; letter-spacing: 0.06em; }
.scanmap-svg .sm-caption.wild { fill: #ffd84d; letter-spacing: 0.06em; }
.scanmap-svg .sm-hex { font-family: var(--mono); font-size: 10px; fill: #8fb4c0; }
.scanmap-svg .sm-range { font-family: var(--mono); font-size: 10.5px; fill: #e8ffff; }
.scanmap-svg .sm-foot { font-family: var(--mono); font-size: 10px; fill: #6d7f9a; }
.scanmap-svg .sm-pill rect { fill: rgba(6, 14, 26, 0.9); stroke: #3ff3ff; stroke-width: 1.1; }
.scanmap-svg .sm-pill text { font-family: var(--mono); font-size: 10.5px; fill: #d9feff; letter-spacing: 0.04em; }
.scanmap-svg .sm-pill.wild rect { stroke: #ffd84d; }
.scanmap-svg .sm-pill.wild text { fill: #ffeaa8; }

.scanmap-svg .sm-wild { animation: sm-head 2.1s ease-in-out infinite; }

/* 48-bit blind experiment: the bench's own table, inside the probe panel. */
.probe-exp {
  margin: 14px 0 4px;
  padding: 10px 12px;
  border: 1px solid rgba(63, 243, 255, 0.18);
  border-radius: 10px;
  background: rgba(6, 14, 26, 0.55);
}
.probe-exp-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8fb4c0;
}
.probe-exp-head strong { color: #e8ffff; font-weight: 600; }
.probe-exp-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 11px; }
.probe-exp-table th,
.probe-exp-table td { padding: 4px 6px; text-align: right; border-bottom: 1px solid rgba(63, 243, 255, 0.1); }
.probe-exp-table th:first-child,
.probe-exp-table td:first-child,
.probe-exp-table th:nth-child(2),
.probe-exp-table td:nth-child(2) { text-align: left; }
.probe-exp-table th {
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8fb4c0;
}
.probe-exp-table td { color: #e8ffff; }
.probe-exp-table tbody tr:last-child td { border-bottom: 0; }
.probe-exp-extrap {
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.5;
  color: #8fb4c0;
}