/* PokeEarth — Aether Foundation console
   Retrofuturistic 2000s CD-ROM skin: glossy white plastic, brushed gold,
   beveled chrome, LED clusters, an inset viewscreen with glass and scanlines.
   Type is the Bebe's PC pixel system: Press Start 2P labels, VT323 body. */

@font-face {
  font-family: "Press Start 2P";
  src: url("../assets/fonts/PressStart2P.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "VT323";
  src: url("../assets/fonts/VT323.ttf") format("truetype");
  font-display: swap;
}

:root {
  --space: #04060e;
  --space-2: #0a1020;
  --plastic: #f1eee4;
  --plastic-hi: #fdfcf8;
  --plastic-lo: #ddd8c6;
  --plastic-edge: #b7b09a;
  --ink: #2e2f36;
  --ink-dim: #6f7078;
  --gold: #c9a84c;
  --gold-pale: #ecdda6;
  --gold-deep: #8a6d2f;
  --gold-dark: #5f4b1e;
  --aqua: #7fd4e8;
  --aqua-deep: #2f97b4;
  --lcd-bg: #101613;
  --lcd-ink: #7dffc8;
  --hairline: rgba(138, 109, 47, 0.5);
  --well: #e6e1cf;        /* recessed panel wells */
  --well-2: #eae5d4;      /* inset chips and fact boxes */
  --edge-strong: #837c64; /* floating panel borders */
  --surround: #cfc8b0;    /* viewscreen bezel ring */
  --emboss: rgba(255, 255, 255, .85);
  --chassis-shadow: rgba(0, 0, 0, .6);
  --page-bg: #14151c;
  --dish-hi: #fdfcf6;
  --dish-lo: #9a927a;
  --pin-ring: #fff;
  --warp-core: rgba(255, 255, 255, 1);
  --warp-edge: rgba(252, 248, 238, .97);
  --paper-hi: #fffef9;    /* survey blueprint stock */
  --paper-mid: var(--plastic);
  --paper-lo: #e5e0cf;
  --bp-ink: rgba(46, 47, 54, .8);
  --bp-emboss: rgba(255, 255, 255, .9);
  --px: "Press Start 2P", monospace;
  --vt: "VT323", monospace;
  --display: var(--px);
  --body: var(--vt);
  --mono: var(--vt);

  /* raised plastic */
  --bevel-out:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -2px 3px rgba(80,70,40,.18),
    0 2px 5px rgba(10,10,20,.35);
  /* recessed well */
  --bevel-in:
    inset 0 2px 5px rgba(60,50,25,.3),
    inset 0 -1px 0 rgba(255,255,255,.85);
}

/* Night configuration: the same console cast in dark graphite. Gold trim and
   the LCD stay as they are — only the plastic changes, so the chassis reads
   as the same machine after hours. */
body[data-theme="dark"] {
  --plastic: #2b2d36;
  --plastic-hi: #3b3e4a;
  --plastic-lo: #202229;
  --plastic-edge: #14161c;
  --ink: #e6e3d8;
  --ink-dim: #8f9099;
  --gold-deep: #d9bb66;
  --gold-dark: #12140f;
  --aqua-deep: #6fd0e8;
  --hairline: rgba(201, 168, 76, 0.32);
  --well: #1c1e25;
  --well-2: #23252d;
  --edge-strong: #101218;
  --surround: #3a3d47;
  --emboss: rgba(255, 255, 255, .07);
  --chassis-shadow: rgba(0, 0, 0, .85);
  --page-bg: #0a0b10;
  --dish-hi: #565a67;
  --dish-lo: #0e1015;
  --pin-ring: #10121a;
  --warp-core: rgba(226, 236, 255, .96);
  --warp-edge: rgba(150, 180, 220, .9);
  /* blueprint becomes a backlit drafting screen rather than paper */
  --paper-hi: #23262f;
  --paper-mid: #191b22;
  --paper-lo: #101218;
  --bp-ink: rgba(226, 216, 178, .62);
  --bp-emboss: rgba(0, 0, 0, .5);

  --bevel-out:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -2px 3px rgba(0,0,0,.5),
    0 2px 5px rgba(0,0,0,.5);
  --bevel-in:
    inset 0 2px 5px rgba(0,0,0,.65),
    inset 0 -1px 0 rgba(255,255,255,.07);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: var(--body);
  background: var(--page-bg);
  color: var(--ink);
  overflow: hidden;
}

button { font-family: inherit; cursor: pointer; }

/* gold trim texture used on rails and title strips */
.gold-brush, .p-head::before {
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.22) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #dcc06a 0%, var(--gold) 45%, #a9883a 100%);
}

/* ---------- console chassis ---------- */

#console {
  position: fixed; inset: 8px;
  display: flex; flex-direction: column;
  border-radius: 14px;
  background: linear-gradient(170deg, var(--plastic-hi) 0%, var(--plastic) 40%, var(--plastic-lo) 100%);
  border: 1px solid var(--plastic-edge);
  box-shadow:
    inset 0 2px 0 var(--emboss),
    inset 0 -3px 6px rgba(0,0,0,.22),
    0 10px 40px var(--chassis-shadow);
  padding: 10px 12px 8px;
}

/* ---------- boot loader ---------- */

#boot {
  position: fixed; inset: 0; z-index: 60;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 100% 100% at 50% 40%, #232636, #101119 75%);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .7s ease, visibility .7s;
}
#boot.done { opacity: 0; visibility: hidden; }
.boot-window {
  width: 400px;
  border-radius: 8px;
  background: linear-gradient(175deg, var(--plastic-hi), var(--plastic) 60%, var(--plastic-lo));
  border: 1px solid var(--edge-strong);
  box-shadow: var(--bevel-out), 0 16px 50px rgba(0,0,0,.7);
  overflow: hidden;
}
.boot-titlebar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 8px 4px 10px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #dcc06a, var(--gold) 50%, #a9883a);
  border-bottom: 1px solid var(--gold-dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.boot-titletext {
  font-family: var(--px); font-size: 8px;
  letter-spacing: 0; color: #fff;
  text-shadow: 0 1px 1px rgba(95, 75, 30, .8);
}
.boot-titlebtns { display: flex; gap: 4px; }
.boot-titlebtns i {
  width: 11px; height: 11px; border-radius: 3px;
  background: linear-gradient(180deg, var(--plastic-hi), var(--plastic-lo));
  border: 1px solid var(--gold-dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.boot-body {
  padding: 26px 30px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
}
.boot-mark { width: 50px; height: 50px; margin-bottom: 4px; }
.boot-mark img {
  width: 100%; height: 100%;
  image-rendering: pixelated;
  filter: drop-shadow(0 1px 0 var(--emboss)) drop-shadow(0 2px 3px rgba(0,0,0,.4));
}
.boot-title {
  font-family: var(--px);
  font-size: 22px;
  letter-spacing: 0;
  background: linear-gradient(180deg, #e6cc7e 8%, #a9883a 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 var(--emboss)) drop-shadow(0 2px 2px rgba(0,0,0,.35));
}
.boot-sub {
  font-family: var(--vt);
  font-size: 15px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-dim);
}
.boot-bar {
  width: 100%; height: 16px; margin-top: 14px;
  border-radius: 4px;
  background: var(--well);
  box-shadow: var(--bevel-in);
  border: 1px solid var(--plastic-edge);
  overflow: hidden;
  padding: 2px;
}
#boot-fill {
  display: block; height: 100%; width: 0%;
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, var(--plastic) 7px 9px),
    linear-gradient(180deg, #e6cc7e, var(--gold) 55%, #a9883a);
  border-radius: 2px;
  transition: width .3s steps(6);
}
.boot-status {
  font-family: var(--vt); font-size: 15px; letter-spacing: 1px;
  color: var(--gold-deep);
  margin-top: 2px;
  min-height: 16px;
}
#boot-enter {
  margin-top: 14px;
  padding: 10px 20px;
  font-size: 8px;
  animation: boot-enter-in .35s ease-out;
}
#boot-enter[hidden] { display: none; }
@keyframes boot-enter-in {
  from { opacity: 0; transform: translateY(4px); }
}

/* ---------- top plate ---------- */

#topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 8px 14px 9px;
  border-radius: 9px;
  background: linear-gradient(180deg, var(--plastic-hi), var(--plastic) 55%, var(--plastic-lo));
  border: 1px solid var(--plastic-edge);
  box-shadow: var(--bevel-out);
  position: relative;
  z-index: 30;
}
.medallion {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, var(--dish-hi), var(--plastic-lo) 55%, var(--dish-lo));
  border: 1px solid var(--plastic-edge);
  box-shadow: var(--bevel-in);
  display: flex; align-items: center; justify-content: center;
}
.medallion img {
  width: 25px; height: 25px;
  image-rendering: pixelated;
  filter: drop-shadow(0 1px 0 var(--emboss));
}
/* Both pixel faces leave a lot of slack in their line boxes; line-height 1
   plus an explicit gap keeps the two lines reading as one lockup beside the
   medallion instead of two stacked labels. */
.brand-text {
  display: flex; flex-direction: column;
  line-height: 1;
  gap: 5px;
  white-space: nowrap;   /* the lockup must never wrap; it drives bar height */
  flex-shrink: 0;
}
.brand-org {
  font-family: var(--px);
  font-size: 11px; letter-spacing: 0; text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 1px 0 var(--emboss);
}
.brand-project {
  font-family: var(--vt);
  font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--gold-deep);
}
.crumbline {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 14px;
  border-radius: 7px;
  background: var(--well);
  box-shadow: var(--bevel-in);
}
#crumb {
  font-family: var(--px);
  font-size: 8px; letter-spacing: 0; text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 1px 0 var(--emboss);
}

.af-btn {
  background: linear-gradient(180deg, var(--plastic-hi) 0%, var(--plastic) 45%, var(--plastic-lo) 100%);
  border: 1px solid var(--gold-deep);
  border-radius: 6px;
  color: var(--gold-deep);
  font-family: var(--px);
  font-size: 7px; letter-spacing: 0; text-transform: uppercase;
  padding: 7px 13px;
  box-shadow: var(--bevel-out);
  text-shadow: 0 1px 0 var(--emboss);
  transition: filter .12s;
}
.af-btn:hover { filter: brightness(1.05); }
.af-btn:active {
  box-shadow: var(--bevel-in);
  background: linear-gradient(180deg, var(--plastic-lo), var(--plastic));
}
.af-btn.mini { padding: 5px 9px; }
/* muted reads as a switched-off, pressed-in key */
#snd-toggle[aria-pressed="false"],
#music-toggle[aria-pressed="false"] {
  color: var(--ink-dim);
  border-color: var(--plastic-edge);
  box-shadow: var(--bevel-in);
  text-decoration: line-through;
}
#theme-toggle[aria-pressed="true"] { box-shadow: var(--bevel-in); }
body[data-mode="globe"] #back-to-orbit { display: none; }

.cluster { margin-left: auto; display: flex; align-items: center; gap: 14px; }
/* the LED cluster is the first thing to go when the plate gets tight */
@media (max-width: 1180px) { .leds { display: none; } }
@media (max-width: 900px) { .crumbline { display: none; } }
.leds { display: flex; gap: 10px; }
.led {
  display: flex; align-items: center; gap: 4px;
  font-family: var(--px); font-size: 6px; letter-spacing: 0;
  color: var(--ink-dim);
}
.led i {
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, var(--gold) 60%, #7a5f24);
  border: 1px solid #6d5620;
  box-shadow: 0 0 5px rgba(201,168,76,.8), inset 0 1px 1px rgba(255,255,255,.6);
}
.led.blink i { animation: led-blink 2.4s steps(1) infinite; }
.led.flicker i {
  background: radial-gradient(circle at 35% 30%, #c8f4ff, var(--aqua-deep) 60%, #1a5b70);
  border-color: #17505f;
  box-shadow: 0 0 5px rgba(63,168,196,.8), inset 0 1px 1px rgba(255,255,255,.6);
  animation: led-flicker 1.1s steps(2) infinite;
}
@keyframes led-blink { 0%, 72% { opacity: 1; } 73%, 100% { opacity: .25; } }
@keyframes led-flicker { 0%, 40% { opacity: 1; } 41%, 55% { opacity: .3; } 56%, 100% { opacity: 1; } }

.readout {
  font-family: var(--vt); font-size: 16px; letter-spacing: 1px;
  color: var(--lcd-ink);
  text-shadow: 0 0 4px rgba(125,255,200,.55);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px),
    var(--lcd-bg);
  border: 1px solid #000;
  border-radius: 4px;
  box-shadow: var(--bevel-in), inset 0 0 12px rgba(0,0,0,.7);
  padding: 6px 11px;
  min-width: 216px; text-align: right;
  white-space: pre;
}
body[data-mode="region"] .readout { color: #2c4438; text-shadow: none; }

/* ---------- stages ---------- */

main { flex: 1; position: relative; margin-top: 8px; min-height: 0; }

#globe-stage, #region-stage { position: absolute; inset: 0; }

/* the viewscreen: recessed dark glass */
#globe-stage {
  border-radius: 10px;
  border: 1px solid #1a1408;
  box-shadow:
    0 0 0 3px var(--surround),
    0 0 0 4px var(--plastic-edge),
    inset 0 0 34px rgba(0,0,0,.85);
  overflow: hidden;
  background:
    radial-gradient(ellipse 120% 90% at 68% 38%, var(--space-2) 0%, var(--space) 62%),
    var(--space);
}
#globe-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
#globe-canvas:active { cursor: grabbing; }

/* CRT glass: scanlines, vignette, glare sweep */
.screen-glass {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 6;
  background:
    linear-gradient(115deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.03) 24%, transparent 38%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.1) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 108% 108% at 50% 50%, transparent 62%, rgba(0,0,0,.4) 100%);
}
body[data-mode="globe"] #region-stage { display: none; }
body[data-mode="region"] #globe-stage { display: none; }

/* ---------- globe labels ---------- */

#globe-labels {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
  z-index: 8;
}
.globe-label {
  position: absolute; top: 0; left: 0;
  opacity: 0;
  display: flex; align-items: center; gap: 6px;
  background: linear-gradient(180deg, var(--plastic-hi), var(--plastic) 55%, var(--plastic-lo));
  border: 1px solid var(--gold-dark);
  border-radius: 5px;
  padding: 5px 9px 4px 7px;
  font-family: var(--px);
  font-size: 7px; letter-spacing: 0; text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 1px 0 var(--emboss);
  box-shadow: var(--bevel-out);
  transition: opacity .15s linear, filter .15s;
  will-change: transform, opacity;
}
.globe-label:hover { filter: brightness(1.06); }
.globe-label .tick {
  width: 7px; height: 7px; flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, var(--gold) 65%, #7a5f24);
  border: 1px solid var(--gold-dark);
  transform: rotate(45deg);
}
.globe-label.home .tick {
  background: radial-gradient(circle at 35% 30%, #c8f4ff, var(--aqua-deep) 65%, #1a5b70);
  border-color: #17505f;
  box-shadow: 0 0 6px rgba(63,168,196,.9);
}

/* ---------- hover dossier card ---------- */

#hover-card {
  position: absolute; top: 16px; right: 16px; width: 246px;
  z-index: 9;
  background: linear-gradient(175deg, var(--plastic-hi), var(--plastic) 65%, var(--plastic-lo));
  border: 1px solid var(--edge-strong);
  border-radius: 7px;
  box-shadow: var(--bevel-out), 0 8px 26px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(-6px);
  transition: opacity .18s, transform .18s;
  pointer-events: none;
  overflow: hidden;
}
#hover-card.on { opacity: 1; transform: none; }
#hover-card::before {
  content: "INCOMING DOSSIER";
  display: block;
  padding: 5px 12px 4px;
  font-family: var(--px);
  font-size: 7px; letter-spacing: 0; color: #fff;
  text-shadow: 0 1px 1px rgba(95,75,30,.8);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #dcc06a, var(--gold) 50%, #a9883a);
  border-bottom: 1px solid var(--gold-dark);
}
.hc-kind {
  font-family: var(--vt);
  font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--gold-deep);
  margin: 12px 14px 4px;
}
.hc-name {
  font-family: var(--px);
  font-size: 13px;
  margin: 0 14px;
  text-shadow: 0 1px 0 var(--emboss);
}
.hc-meta { font-family: var(--vt); font-size: 14px; color: var(--ink-dim); margin: 6px 14px 0; }
.hc-hint {
  margin: 11px 0 0;
  padding: 7px 14px 9px;
  border-top: 1px dashed var(--hairline);
  font-family: var(--px);
  font-size: 6px; letter-spacing: 0; text-transform: uppercase;
  color: var(--aqua-deep);
}

/* ---------- layer dock ---------- */

#layer-dock {
  position: absolute; left: 16px; bottom: 16px;
  z-index: 9;
  width: 172px;
  padding: 10px 11px 11px;
  border-radius: 8px;
  background: linear-gradient(175deg, var(--plastic-hi), var(--plastic) 60%, var(--plastic-lo));
  border: 1px solid var(--edge-strong);
  box-shadow: var(--bevel-out), 0 8px 26px rgba(0,0,0,.55);
  display: flex; flex-direction: column; gap: 6px;
}
.dock-title {
  font-family: var(--px);
  font-size: 6.5px; letter-spacing: 0; text-transform: uppercase;
  color: var(--gold-deep);
  text-shadow: 0 1px 0 var(--emboss);
  padding-bottom: 6px; margin-bottom: 2px;
  border-bottom: 1px solid var(--hairline);
}
.af-switch {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--plastic-edge);
  border-radius: 5px;
  background: linear-gradient(180deg, var(--plastic-hi), var(--plastic) 60%, var(--plastic-lo));
  box-shadow: var(--bevel-out);
  font-family: var(--px);
  font-size: 6.5px; letter-spacing: 0; text-transform: uppercase;
  color: var(--ink-dim);
  padding: 6px 8px;
  text-shadow: 0 1px 0 var(--emboss);
}
.af-switch:active { box-shadow: var(--bevel-in); }
.af-switch i {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, #d8d3c0, #a8a28c 65%, #6d685a);
  background-color: #a8a28c;
  border: 1px solid #6d6854;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.5);
}
.af-switch[aria-pressed="true"] { color: var(--ink); }
.af-switch[aria-pressed="true"] i {
  background: radial-gradient(circle at 35% 30%, #ffe9a8, var(--gold) 60%, #7a5f24);
  border-color: #6d5620;
  box-shadow: 0 0 6px rgba(201,168,76,.9), inset 0 1px 1px rgba(255,255,255,.6);
}

/* ---------- audio levels: mirrors the layer dock, opposite corner ---------- */

#audio-dock {
  position: absolute; right: 16px; bottom: 16px;
  z-index: 9;
  width: 168px;
  padding: 10px 12px 12px;
  border-radius: 8px;
  background: linear-gradient(175deg, var(--plastic-hi), var(--plastic) 60%, var(--plastic-lo));
  border: 1px solid var(--edge-strong);
  box-shadow: var(--bevel-out), 0 8px 26px rgba(0,0,0,.55);
  display: flex; flex-direction: column; gap: 10px;
}
.vol { display: flex; flex-direction: column; gap: 7px; }
.vol span {
  font-family: var(--px);
  font-size: 6.5px; letter-spacing: 0; text-transform: uppercase;
  color: var(--ink-dim);
  text-shadow: 0 1px 0 var(--emboss);
}

/* a recessed slot with a beveled key riding in it */
.vol input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 14px;
  background: transparent;
  cursor: pointer;
}
.vol input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 4px;
  background: var(--well);
  border: 1px solid var(--plastic-edge);
  box-shadow: var(--bevel-in);
}
.vol input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 11px; height: 17px;
  margin-top: -6px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--plastic-hi), var(--plastic) 55%, var(--plastic-lo));
  border: 1px solid var(--gold-deep);
  box-shadow: var(--bevel-out);
}
.vol input[type="range"]:active::-webkit-slider-thumb {
  background: linear-gradient(180deg, var(--gold-pale), var(--gold));
}
.vol input[type="range"]::-moz-range-track {
  height: 8px; border-radius: 4px;
  background: var(--well);
  border: 1px solid var(--plastic-edge);
}
.vol input[type="range"]::-moz-range-thumb {
  width: 9px; height: 15px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--plastic-hi), var(--plastic-lo));
  border: 1px solid var(--gold-deep);
}

/* ---------- status bar ---------- */

#statusbar {
  margin-top: 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 9px 14px 9px 22px;
  border-radius: 7px;
  background: var(--well);
  box-shadow: var(--bevel-in);
  border: 1px solid var(--plastic-edge);
  position: relative;
}
#status-hint {
  font-family: var(--px);
  font-size: 7px; letter-spacing: 0;
  color: var(--gold-deep);
  text-shadow: 0 1px 0 var(--emboss);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#credits-open { flex-shrink: 0; }

/* ---------- analogue tape overlay ---------- */

/* Real VHS noise laid over the whole console. The footage is near-black with
   bright grain and dropout specks, so `screen` drops the black entirely and
   only the artefacts land on the UI. The filter crushes the base further —
   the source floor is about 14/255, not true black, which would otherwise
   wash the whole interface a flat grey. */
#vhs {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 45;              /* over the console, under dialogs and the boot loader */
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .3;
  filter: contrast(1.75) brightness(.72) saturate(.55);
}

/* a full-screen flicker is exactly what this preference is for */
@media (prefers-reduced-motion: reduce) {
  #vhs { display: none; }
}

/* ---------- credits dialog ---------- */

#credits {
  position: fixed; inset: 0; z-index: 55;
  display: flex; align-items: center; justify-content: center;
}
#credits[hidden] { display: none; }
.dialog-scrim {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px),
    rgba(4, 6, 14, .72);
}
.dialog {
  position: relative;
  width: min(520px, calc(100vw - 48px));
  max-height: min(680px, calc(100vh - 80px));
  display: flex; flex-direction: column;
  border-radius: 8px;
  background: linear-gradient(175deg, var(--plastic-hi), var(--plastic) 60%, var(--plastic-lo));
  border: 1px solid var(--edge-strong);
  box-shadow: var(--bevel-out), 0 20px 60px rgba(0,0,0,.7);
  overflow: hidden;
  animation: dialog-in .18s ease-out;
}
@keyframes dialog-in {
  from { transform: translateY(8px) scale(.98); opacity: 0; }
}
.dialog-titlebar {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 6px 4px 10px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #dcc06a, var(--gold) 50%, #a9883a);
  border-bottom: 1px solid var(--gold-dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.dialog-titletext {
  font-family: var(--px); font-size: 8px;
  color: #fff;
  text-shadow: 0 1px 1px rgba(95, 75, 30, .8);
}
.dialog-titlebtns button {
  width: 22px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--plastic-hi), var(--plastic-lo));
  border: 1px solid var(--gold-dark);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 var(--emboss);
  color: var(--ink);
  font-family: var(--vt); font-size: 22px; line-height: 1;
  padding-bottom: 3px;
}
.dialog-titlebtns button:hover { filter: brightness(1.08); }
.dialog-titlebtns button:active { box-shadow: var(--bevel-in); }
.dialog-body {
  padding: 20px 24px 26px;
  overflow-y: auto;
}

.cr-hero {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 16px; margin-bottom: 4px;
  border-bottom: 1px solid var(--hairline);
}
.cr-hero img { image-rendering: pixelated; flex-shrink: 0; }
.cr-wordmark {
  font-family: var(--px); font-size: 17px;
  background: linear-gradient(180deg, #e6cc7e 8%, #a9883a 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 var(--emboss));
}
.cr-version {
  font-family: var(--vt); font-size: 14px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--ink-dim);
  margin-top: 5px;
}
.cr-sec {
  font-family: var(--px); font-size: 7px; text-transform: uppercase;
  color: var(--gold-deep);
  text-shadow: 0 1px 0 var(--emboss);
  margin: 20px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hairline);
}
#credits p {
  font-family: var(--vt); font-size: 16px; line-height: 1.4;
  color: var(--ink);
  margin-bottom: 6px;
}
#credits p b { color: var(--gold-deep); font-weight: normal; }
.cr-list { display: grid; grid-template-columns: 128px 1fr; gap: 8px 14px; }
.cr-list dt {
  font-family: var(--px); font-size: 6px; text-transform: uppercase;
  color: var(--ink-dim);
  padding-top: 4px;
  line-height: 1.6;
}
.cr-list dd {
  font-family: var(--vt); font-size: 15px; line-height: 1.35;
  color: var(--ink);
}
.cr-list dd b { color: var(--gold-deep); font-weight: normal; }
.cr-note {
  font-size: 15px !important;
  color: var(--ink-dim) !important;
  margin-bottom: 12px !important;
}
.cr-legal {
  font-size: 14px !important;
  color: var(--ink-dim) !important;
}
#credits a {
  color: var(--aqua-deep);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
#credits a:hover { color: var(--gold-deep); }

/* ---------- warp transition ---------- */

#warp {
  position: fixed; inset: 0; z-index: 50;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(0deg, rgba(200,220,255,.12) 0 2px, transparent 2px 5px),
    radial-gradient(circle at 50% 50%, var(--warp-core), var(--warp-edge) 55%, var(--warp-core));
  opacity: 0;
  transition: opacity .42s ease;
}
#warp.on { opacity: 1; }
#warp .ring {
  width: 90px; height: 90px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  opacity: 0;
}
#warp.on .ring { animation: warp-ring .55s ease-out; }
@keyframes warp-ring {
  0% { transform: scale(.3); opacity: .9; }
  100% { transform: scale(9); opacity: 0; }
}

/* ---------- region stage ---------- */

#region-stage { display: flex; gap: 8px; }

#region-viewport {
  flex: 1; position: relative; overflow: hidden;
  cursor: grab;
  border-radius: 10px;
  border: 1px solid #1a1408;
  box-shadow:
    0 0 0 3px var(--surround),
    0 0 0 4px var(--plastic-edge),
    inset 0 0 34px rgba(0,0,0,.85);
  background:
    radial-gradient(ellipse 110% 80% at 40% 30%, #101830 0%, var(--space) 70%),
    var(--space);
}
#region-viewport.dragging { cursor: grabbing; }
#region-world {
  position: absolute; top: 0; left: 0;
  transform-origin: 0 0;
}
.region-art {
  display: block;
  user-select: none; -webkit-user-drag: none;
}
.region-art.pixel { image-rendering: pixelated; }

/* survey-blueprint placeholder */
.blueprint {
  position: relative;
  background:
    repeating-linear-gradient(0deg, transparent 0 79px, rgba(201,168,76,.16) 79px 80px),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(201,168,76,.16) 79px 80px),
    repeating-linear-gradient(0deg, transparent 0 399px, rgba(201,168,76,.35) 399px 400px),
    repeating-linear-gradient(90deg, transparent 0 399px, rgba(201,168,76,.35) 399px 400px),
    linear-gradient(160deg, var(--paper-hi) 0%, var(--paper-mid) 55%, var(--paper-lo) 100%);
}
.bp-frame {
  position: absolute; inset: 26px;
  border: 1px dashed rgba(138, 109, 47, .5);
  pointer-events: none;
}
.bp-crest {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.bp-crest img {
  width: 40%; height: auto;
  image-rendering: pixelated;
  opacity: .08;
}
.bp-center {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  text-align: center; pointer-events: none;
}
.bp-region {
  font-family: var(--px);
  font-size: 44px;
  letter-spacing: 6px; text-transform: uppercase;
  color: var(--bp-ink);
  padding-left: 6px;
  text-shadow: 0 3px 0 var(--bp-emboss);
}
.bp-status {
  margin-top: 16px;
  font-family: var(--px);
  font-size: 8px; letter-spacing: 0; text-transform: uppercase;
  color: var(--gold-deep);
}
.bp-meta {
  margin-top: 8px;
  font-family: var(--vt);
  font-size: 16px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-dim);
}
.bp-corner {
  position: absolute;
  font-family: var(--vt); font-size: 14px; letter-spacing: 1px;
  color: rgba(138, 109, 47, .65);
}
.bp-corner.tl { top: 34px; left: 38px; }
.bp-corner.tr { top: 34px; right: 38px; }
.bp-corner.bl { bottom: 34px; left: 38px; }
.bp-corner.br { bottom: 34px; right: 38px; }

/* POI pins */
.poi {
  position: absolute;
  background: none; border: none;
  transform: translate(-50%, -50%) scale(var(--pin-scale, 1));
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  z-index: 3;
}
.poi-diamond {
  width: 13px; height: 13px;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, var(--gold) 65%, #7a5f24);
  border: 2px solid var(--pin-ring);
  box-shadow: 0 0 0 1px var(--gold-dark), 0 2px 6px rgba(8,12,26,.5);
  transform: rotate(45deg);
  transition: transform .15s;
}
.poi:hover .poi-diamond { transform: rotate(45deg) scale(1.3); }
.poi.active .poi-diamond {
  background: radial-gradient(circle at 35% 30%, #c8f4ff, var(--aqua-deep) 65%, #1a5b70);
  box-shadow: 0 0 0 1px #17505f, 0 0 12px rgba(63,168,196,.8);
}
.poi-name {
  font-family: var(--px);
  font-size: 7px; letter-spacing: 0; text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 1px 0 var(--emboss);
  background: linear-gradient(180deg, var(--plastic-hi), var(--plastic) 60%, var(--plastic-lo));
  border: 1px solid var(--gold-dark);
  border-radius: 4px;
  padding: 3px 8px;
  white-space: nowrap;
  box-shadow: var(--bevel-out);
}
.poi.active .poi-name { color: var(--aqua-deep); border-color: #17505f; }

/* dossier panel: console side plate */
#region-panel {
  width: 392px; flex-shrink: 0;
  border-radius: 9px;
  background: linear-gradient(175deg, var(--plastic-hi), var(--plastic) 55%, var(--plastic-lo));
  border: 1px solid var(--edge-strong);
  box-shadow: var(--bevel-out);
  overflow-y: auto;
  overflow-x: hidden;
}
#region-panel::-webkit-scrollbar { width: 14px; }
#region-panel::-webkit-scrollbar-track {
  background: var(--well);
  border-left: 1px solid var(--plastic-edge);
  box-shadow: inset 1px 0 3px rgba(60,50,25,.2);
}
#region-panel::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--plastic-hi), var(--plastic) 50%, var(--plastic-lo));
  border: 1px solid var(--plastic-edge);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.p-head {
  padding: 0 0 16px;
  border-bottom: 1px solid var(--hairline);
}
.p-head::before {
  content: "";
  display: block;
  height: 22px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--gold-dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.p-back {
  display: block;
  background: none; border: none;
  font-family: var(--px);
  font-size: 6.5px; letter-spacing: 0; text-transform: uppercase;
  color: var(--aqua-deep);
  margin: 0 22px 12px; padding: 0;
}
.p-back:hover { color: var(--ink); }
.p-kind {
  font-family: var(--vt);
  font-size: 14px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold-deep); margin: 0 22px 6px;
}
.p-name {
  font-family: var(--px);
  font-size: 16px; line-height: 1.4;
  margin: 0 22px;
  text-shadow: 0 1px 0 var(--emboss);
}
.p-tag { font-family: var(--vt); font-size: 15px; color: var(--ink-dim); margin: 7px 22px 0; }
.p-body { padding: 18px 22px 36px; }
.p-facts {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
  margin-bottom: 18px;
}
.p-facts > div {
  background: var(--well-2);
  border: 1px solid var(--plastic-edge);
  border-radius: 6px;
  box-shadow: var(--bevel-in);
  padding: 8px 9px;
}
.p-facts dt {
  font-family: var(--px);
  font-size: 5.5px; letter-spacing: 0; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 5px;
}
.p-facts dd { font-family: var(--vt); font-size: 15px; }
.p-sec {
  font-family: var(--px);
  font-size: 7px; letter-spacing: 0; text-transform: uppercase;
  color: var(--gold-deep);
  text-shadow: 0 1px 0 var(--emboss);
  margin: 18px 0 9px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hairline);
}
.p-sec:first-child { margin-top: 0; }
.p-body p { font-family: var(--vt); font-size: 16px; line-height: 1.4; margin-bottom: 10px; }
.p-body p.dim { color: var(--ink-dim); }
.badge {
  display: inline-block;
  font-family: var(--px);
  font-size: 6px; letter-spacing: 0; text-transform: uppercase;
  padding: 3px 6px 2px; margin-right: 5px;
  border-radius: 4px;
  vertical-align: 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.badge.canon { background: linear-gradient(180deg, #f2e6bc, var(--gold-pale)); color: var(--gold-deep); border: 1px solid var(--gold-deep); }
.badge.fanon { background: linear-gradient(180deg, #d8f2f8, #b8e4ee); color: var(--aqua-deep); border: 1px solid var(--aqua-deep); }
.p-sites { display: flex; flex-direction: column; gap: 6px; }
.site {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, var(--plastic-hi), var(--plastic) 60%, var(--plastic-lo));
  border: 1px solid var(--plastic-edge);
  border-radius: 6px;
  box-shadow: var(--bevel-out);
  padding: 8px 11px;
  font-family: var(--vt);
  font-size: 16px; color: var(--ink);
  text-align: left;
  text-shadow: 0 1px 0 var(--emboss);
  transition: filter .12s;
}
.site:hover { filter: brightness(1.05); }
.site:active { box-shadow: var(--bevel-in); }
.site-kind {
  font-family: var(--px);
  font-size: 5.5px; letter-spacing: 0; text-transform: uppercase;
  color: var(--gold-deep);
  background: var(--well-2);
  box-shadow: var(--bevel-in);
  border-radius: 4px;
  padding: 3px 6px;
  min-width: 62px; text-align: center;
}
.mon-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.mon {
  display: flex; align-items: center; gap: 5px;
  background: var(--well-2);
  border: 1px solid var(--plastic-edge);
  border-radius: 6px;
  box-shadow: var(--bevel-in);
  padding: 3px 9px 3px 3px;
  font-family: var(--vt);
  font-size: 15px;
}
.mon img { width: 38px; height: 38px; image-rendering: pixelated; }