/* Threshold Scene — white-field intro */
#threshold{
  position:fixed; inset:0; background:#fff; color:#111; z-index:9999;
  display:flex; align-items:center; justify-content:center; pointer-events:auto;
  font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif;
}
/* Allow the inlined WORK ORDER.svg to size nicely */
#threshold svg{ display:block; width:100vw; height:auto; max-width:none; pointer-events:auto; }
/* Force Work Order SVG text to black for readability and parity with PNG */
#threshold svg text, 
#threshold svg tspan{
  fill:#000 !important;
  stroke:none !important;
}

/* Shift Clock Overlay */
#shift-clock{
  position:fixed; inset:0; background:#ffffff; z-index:10000;
  display:grid; place-items:center; pointer-events:none;
  opacity:0; transition: opacity .6s ease;
}
#shift-clock svg{ display:block; width:100vw; height:auto; max-width:none; }
#shift-clock[aria-hidden="false"]{ opacity:1; }
#shift-clock .clock{
  font: 400 clamp(28px, 6vw, 64px)/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color:#000; letter-spacing:.06em; opacity:0; transform: translateY(6px);
  transition: opacity .8s ease, transform .8s ease;
}
#shift-clock .clock.show{ opacity:1; transform: translateY(0); }

/* HUD clock (initially hidden; fades in with HUD) */
.hud-clock{ font: 400 14px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color:#111; opacity:0; transition: opacity .6s ease; }
.hud-clock.show{ opacity:1; }
#threshold .inner{ position:relative; width:min(960px, 88vw); text-align:center; }
#threshold .paper-grain{ position:absolute; inset:-20vh -20vw; pointer-events:none; opacity:.06;
  background-image: radial-gradient(rgba(0,0,0,.1) 1px, transparent 1px);
  background-size: 2px 2px;
  filter: contrast(110%) brightness(103%);
}
#threshold .lines{ margin: 0 0 28px 0; }
#threshold .line{ opacity:0; transform: translateY(4px); color:#111; font-weight:600; letter-spacing:.2px; }
#threshold .line.emph{ font-weight:700; }
#threshold .title-block{ margin: 22px 0 24px; }
#threshold .title{ font-weight:800; letter-spacing:1.5px; margin:0; }
#threshold .subtitle{ margin:.25rem 0 0; color:#333; }

#threshold .actions{ display:flex; gap:16px; justify-content:center; margin-top:22px; flex-wrap:wrap; }
.th-btn{ position:relative; background:#fff; color:#111; border:1px solid #ddd; padding:10px 16px; font-weight:700; letter-spacing:.2px; cursor:pointer; }
.th-btn.primary{ border-color:#111; }
.th-btn::after{ content:""; position:absolute; inset:4px; border:1px solid transparent; transition: border-color .2s ease; }
.th-btn:hover::after{ border-color:#111; }

/* Crisis overlays */
.th-overlay{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.th-overlay[aria-hidden="true"]{ opacity:0; transform: translateX(0); transition: opacity .35s ease, transform .35s ease; }
.th-overlay[aria-hidden="false"]{ opacity:1; pointer-events:auto; }
.th-overlay .card{ background: rgba(0,0,0,.06); color:#111; padding:22px 26px; border-radius:8px; box-shadow: 0 10px 30px rgba(0,0,0,.12); max-width: 720px; }
.th-overlay.from-left[aria-hidden="false"]{ transform: translateX(0); animation: slideInLeft .35s ease both; }
.th-overlay.from-right[aria-hidden="false"]{ transform: translateX(0); animation: slideInRight .35s ease both; }
@keyframes slideInLeft{ from{ transform: translateX(-18px); } to{ transform: translateX(0); } }
@keyframes slideInRight{ from{ transform: translateX(18px); } to{ transform: translateX(0); } }

/* Hide game HUD while threshold or shift clock is active */
#threshold + #game #hud{ display:none; } /* original immediate sibling */
#threshold ~ #game #hud{ display:none; }  /* tolerate inserted nodes between */
#shift-clock[aria-hidden="false"] ~ #game #hud{ display:none; }
/* Show HUD during gameplay (was previously forced hidden) */
#game #hud{ display:grid !important; }
/* ===========================
   Zone 1 — Disassembly Bay
   Base styles (drop in as zone1.css)
   =========================== */

:root{
  --bg-0:#0e1116;
  --bg-1:#121722;
  --bg-2:#161c28;
  --ink-0:#e9eef9;
  --ink-1:#a9b3c7;
  --accent:#7bd3ff;
  --accent-2:#ffc86b;
  --danger:#ff6b6b;
  --ok:#72e0a8;
  --panel:#151b27cc;
  --panel-solid:#1a2130;
  --glass:#0b1019b3;
  --shadow:0 10px 28px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);
  --radius-1:12px;
  --radius-2:18px;
  --gap:14px;
  --hud-h:56px;
  --dock-h:0px; /* dock removed */
  /* Right HUD width + gap are set dynamically from JS; defaults below */
  --hud-w:320px;
  --hud-gap:10px;
  --fx: drop-shadow(0 6px 18px rgba(0,0,0,.35));
  /* Blackline theme tokens (white base) */
  --bp-bg-0:#ffffff;
  --bp-bg-1:#ffffff;
  --bp-grid:rgba(0,0,0,.06);
  --bp-stroke:#111111;
  --bp-ink:#111111;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  /* Neutral white background to preserve artwork appearance */
  background:#ffffff;
  color:var(--ink-0);
  font:400 16px/1.4 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  overflow:hidden;
}

/* ===========================
   SVG HUD OVERLAY (Illustrator export)
   =========================== */
#hud-overlay{
  position:fixed; inset:auto 0 auto 0; top:0; z-index:10040;
  width:100vw; height:auto; pointer-events:none; /* click-through */
  display:none; /* hide legacy overlay now that new HUD is used */
}
#hud-overlay svg{
  display:block; width:100vw; height:auto; max-width:none;
  pointer-events:none; shape-rendering:geometricPrecision; text-rendering:geometricPrecision;
}

/* Removed PNG titlebar styles; SVG HUD overlay supersedes them */

/* ===========================
   GAME WRAPPER
   =========================== */

#game{
  position:relative;
  height:100dvh;
  display:block; /* no grid rows — let viewport control its own height */
}

/* ===========================
   HUD / TOP BAR
   =========================== */

/* Light HUD on white */
#hud{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:var(--gap);
  padding:0 16px;
  background:#ffffff;
  color:#111;
  border-bottom:1px solid #e6e6e6;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  position:relative;
  z-index:3;
}

#hud .hud-left{display:flex;gap:10px;align-items:center}
#hud .hud-left strong{letter-spacing:.5px}
#hud .hud-center{opacity:.8;display:flex;gap:18px;justify-content:center;color:#444;font-size:13px}

/* Materials display with full labels */
.materials-display{
  display:inline-flex;
  gap:12px;
  font-size:14px;
  align-items:center;
}
.material-item{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.material-label{
  opacity:0.85;
  font-weight:normal;
}
.material-item b{
  font-weight:700;
  transition: color 0.2s ease, transform 0.2s ease;
}

/* HUD pulse targets (for material changes and home completions) */
.hud-pulse-target{
  transition: color 0.25s ease, transform 0.25s ease;
}

.tb-box{ display:inline-flex; gap:8px; align-items:center; padding:4px 8px; border:1px solid #111; border-radius:4px; color:#111; background:#fff; font-size:12px; }
.tb-box em{ font-style:normal; opacity:.8; letter-spacing:.06em; }
.tb-box b{ font-weight:700; color:#000; letter-spacing:.06em; }
#tb-inline{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.hud-zones{ display:flex; gap:6px; align-items:center; margin-left:16px; }
.zone-btn{
  appearance:none; border:1px solid #d0d7e2; color:#0f1726; background:#f6f7fb;
  padding:6px 10px; border-radius:8px; font:600 12px/1.1 ui-sans-serif, system-ui;
  letter-spacing:.4px; cursor:pointer; transition: transform .06s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.zone-btn:hover{ border-color:#98a6c3; background:#eef1f7; box-shadow:0 4px 14px rgba(0,0,0,.08) }
.zone-btn:active{ transform: translateY(1px) scale(.99) }
.zone-btn.active{ border-color:#0b6cf9; background:#e6f0ff; box-shadow:0 0 0 1px rgba(11,108,249,.12) inset; }

/* Zone HUD sidebar (vertical blueprint) */
#zone-strip{
  position:fixed; z-index:10050; pointer-events:auto;
  /* Pinned to viewport right; detached from carousel */
  top: 10px; right: 10px; bottom: 10px;
  display:flex; flex-direction:column; gap:10px;
  color: var(--bp-ink);
  background:
    repeating-linear-gradient(to right, var(--bp-grid) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(to bottom, var(--bp-grid) 0 1px, transparent 1px 16px),
    linear-gradient(180deg, var(--bp-bg-1), var(--bp-bg-0));
  border:1px solid var(--bp-stroke);
  box-shadow: 0 6px 18px rgba(0,0,0,.08), inset 0 0 0 1px rgba(0,0,0,.06);
  padding:12px; border-radius:0;
  width: min(26vw, 360px);
  height: calc(100dvh - 20px);
  font-family: 'OCR A Extended', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
#zone-strip *, #zone-strip .tb-box em, #zone-strip .tb-box b{
  font-family: 'OCR A Extended', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
#zone-strip #tb-inline{ display:flex; flex-direction:column; gap:8px; align-items:stretch; }
#zone-strip .tb-box{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 10px; border:1px solid rgba(0,0,0,.6);
  background: #ffffff;
  color: var(--bp-ink);
  border-radius:0;
  position:relative;
}
#zone-strip .tb-box::after{
  content:""; position:absolute; left:0; top:50%; width:24px; height:1px; background: rgba(11,108,249,.35);
  transform: translateY(-50%);
}
#zone-strip .tb-box em{ font-style:normal; opacity:.82; letter-spacing:.06em; color: var(--bp-ink); }
#zone-strip .tb-box b{ font-weight:700; color:#111; letter-spacing:.08em; }
/* Material boxes with pulse effect */
#zone-strip .tb-box.tb-material b{
  transition: color 0.25s ease;
}
/* Homes box with pulse and scale effect */
#zone-strip .tb-box.tb-homes b{
  transition: color 0.25s ease, transform 0.25s ease;
}
.tb-pulse-target{
  transition: color 0.25s ease;
}
#zone-strip .zones-col{ 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 6px; 
}
#zone-strip .zone-btn{
  appearance:none; background:#ffffff; color: var(--bp-ink);
  border:1px dashed var(--bp-stroke); border-radius:0; padding:8px 10px;
  font-weight:700; letter-spacing:.08em; cursor:pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.06), inset 0 0 0 1px rgba(0,0,0,.06);
}
#zone-strip .zone-btn:hover{ box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.12); }
#zone-strip .zone-btn.active{ background: rgba(0,0,0,.06); border-style: solid; }
#shift-clock[aria-hidden="false"] ~ #zone-strip{ display:none; }
#threshold ~ #zone-strip{ display:none; }

@media (max-width: 860px){
  #zone-strip{ top:10px; right:10px; bottom:10px; transform:none; max-width: 92vw; row-gap:8px; }
}
#hud .hud-right{display:flex;gap:8px;justify-content:flex-end;align-items:center;color:#111}
#hud .sep{opacity:.4;margin:0 4px;color:#999}
#hud b{color:#111}

/* ===========================
   VIEWPORT / CANVASES
   =========================== */

#viewport{
  position:relative;
  overflow:hidden;
  /* Match page background */
  background:#ffffff;
  outline:none;
  /* Full viewport height; Titlebar overlays on top */
  height: 100dvh;
}

#world, #fx{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

#fx{pointer-events:none;}

/* Player avatar and voice layer (DOM) */
#player-avatar{position:absolute;z-index:5;pointer-events:none;transform:translate(-50%,-100%)}
#voices{position:absolute;inset:0;z-index:6;pointer-events:none}
.voice.heavy{font-weight:800}
.voice{position:absolute}
.voice::after{
  content:"";
  position:absolute;
  left:50%; bottom:-6px; transform:translateX(-50%);
  width:0;height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:6px solid var(--bg, rgba(0,0,0,.7));
}

/* ===========================
   DOCK / BOTTOM BAR
   =========================== */

/* Dock removed */

/* Buttons */
button{
  appearance:none;
  border:1px solid #27324a;
  color:var(--ink-0);
  background:linear-gradient(180deg,#1a2233,#131a28);
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  transition: transform .06s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  box-shadow: var(--shadow);
}
button:hover{border-color:var(--accent); box-shadow:0 8px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(123,211,255,.15) inset}
button:active{transform:translateY(1px) scale(.99)}
button:disabled{opacity:.45; cursor:not-allowed; filter:grayscale(.3)}

#btn-continue{background:linear-gradient(180deg,#1f2b43,#102033);border-color:#2a3b59}
#btn-continue:not(:disabled):hover{border-color:var(--ok);box-shadow:0 8px 24px rgba(0,0,0,.45), 0 0 0 1px rgba(114,224,168,.18) inset}
/* Top HUD actions cluster */
#hud .hud-actions{display:inline-flex; gap:10px; margin-left:8px}

/* Red buttons with white text (HUD + Cancel buttons) */
#btn-help,
#btn-reset,
#btn-continue,
#cut-cancel,
#torque-cancel{
  background: linear-gradient(180deg, #e02626, #c41010);
  border-color: #b20f0f;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
  box-shadow: 0 6px 16px rgba(204,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.06);
}
#btn-help:hover,
#btn-reset:hover,
#btn-continue:hover:not(:disabled),
#cut-cancel:hover,
#torque-cancel:hover{
  background: linear-gradient(180deg, #f02a2a, #cc1212);
  border-color: #8f0c0c;
  box-shadow: 0 10px 28px rgba(204,0,0,.32), 0 0 0 1px rgba(255,255,255,.08) inset;
}
#btn-help:active,
#btn-reset:active,
#btn-continue:active:not(:disabled),
#cut-cancel:active,
#torque-cancel:active{
  background: linear-gradient(180deg, #c61919, #a90d0d);
  transform: translateY(1px) scale(.99);
}
#btn-help:disabled,
#btn-reset:disabled,
#btn-continue:disabled{
  opacity:.55;
  filter:saturate(.8) grayscale(.1);
}

/* ===========================
   OVERLAYS / MODALS
   =========================== */

.overlay{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  background: radial-gradient(1200px 800px at 50% 40%, rgba(8,12,20,.75), rgba(5,7,12,.85));
  backdrop-filter: blur(2px);
  opacity:0;
  pointer-events:none;
  transition: opacity .22s ease;
  z-index:10;
}
.overlay[aria-hidden="false"]{opacity:1; pointer-events:auto}

/* Lighter overlay mask for minigames so the world stays visible */
#overlay-cut,
#overlay-bolt,
#overlay-hold{
  background: radial-gradient(1200px 800px at 50% 40%, rgba(255,255,255,.65), rgba(255,255,255,.35));
  backdrop-filter: blur(2px) saturate(1.05);
  /* Center the minigame content within the left region (viewport minus HUD) */
  padding-right: calc(var(--hud-w, 320px) + var(--hud-gap, 10px));
  justify-items: center;
  align-items: center;
}

.card{
  width:min(720px, calc(100% - 40px));
  padding:22px 22px 18px;
  border-radius: var(--radius-2);
  background: linear-gradient(180deg, #ffffff, #f6f6f6);
  border:1px solid #27324a;
  box-shadow: var(--shadow);
  color:#111;
}
.card.wide{width:min(1100px, calc(100% - 40px))}
.card h2{
  margin:0 0 8px;
  font-weight:700;
  letter-spacing:.4px;
}
.card .sub{margin:0 0 14px; color:var(--ink-1)}
.card .tip{color:var(--ink-1)}
.card .actions{display:flex; gap:12px; justify-content:flex-end; margin-top:14px}
.card .close{
  background: linear-gradient(180deg, #e02626, #c41010);
  border-color: #b20f0f;
  color:#fff;
}
.card .close:hover{ background: linear-gradient(180deg, #f02a2a, #cc1212); border-color:#8f0c0c }
.card .close:active{ background: linear-gradient(180deg, #c61919, #a90d0d) }

/* Precision cutting canvas */
#cut-canvas{
  width:100%;
  height:420px;
  background:#fafafa; /* bright drafting surface */
  border-radius:12px;
  border:1px solid #243048;
  box-shadow:0 8px 30px rgba(0,0,0,.08), inset 0 0 0 1px rgba(0,0,0,.04);
}

/* Hold the Frame canvas */
#hold-canvas{
  width:100%;
  height:420px;
  background:#f7f8fa;
  border-radius:12px;
  border:1px solid #e3e6ef;
  box-shadow:0 8px 30px rgba(0,0,0,.08), inset 0 0 0 1px rgba(0,0,0,.03);
}

/* Bolt sequence */
.sequence{
  font:600 28px/1.1 ui-sans-serif, system-ui;
  letter-spacing:.18em;
  text-align:center;
  padding:14px 12px;
  background:#0a111c;
  border:1px solid #263149;
  border-radius:12px;
  margin:10px 0 12px;
}
.progress{
  position:relative;height:10px;border-radius:999px;background:#0a1220;border:1px solid #27324a;overflow:hidden
}
.progress>span{position:absolute;inset:0; width:0%; background:linear-gradient(90deg, var(--accent), #5fb9ff);}

/* Sequential Torque UI */
#torque-canvas{
  width:100%;
  max-width:520px;
  height:auto;
  background:#fafafa;
  border:1px solid #e8e8e8;
  border-radius:12px;
  box-shadow:0 8px 30px rgba(0,0,0,.08), inset 0 0 0 1px rgba(0,0,0,.04);
  display:block;
  margin:8px auto 10px;
}
#torque-readout{
  text-align:center;
  color:#cc0000;
  font-weight:600;
  letter-spacing:.4px;
  margin-top:4px;
}

/* ===========================
   UTILITIES
   =========================== */

.sr-only{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0
}

.hidden{display:none!important}

kbd{
  background:#0e1726;border:1px solid #2a3857;border-bottom-color:#22304a;border-radius:6px;padding:2px 6px;font:600 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas;color:#bcd2ff
}

/* Subtle hover glow for interactive moments (JS can toggle .glow on the viewport) */
#viewport.glow{box-shadow:0 0 0 2px rgba(123,211,255,.25) inset}

/* Responsive tweaks */
@media (max-width: 860px){
  :root{ --hud-h: 64px; --dock-h: 0px }
  #hud{grid-template-columns: 1fr auto; grid-auto-columns: 1fr; grid-auto-flow: column}
  #hud .hud-center{display:none}
  .card.wide{width:min(96vw,1000px)}
}
























/* ===========================
   ADD-ON PACK — INTERACTION POLISH
   (append to the end of zone1.css)
   =========================== */

/* --- Hotspot hint pips (JS will position/animate them) --- */
.hotspot-pip{
  position:absolute;
  width:16px; height:16px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #fff 0 25%, var(--accent) 26% 100%);
  box-shadow:0 0 12px rgba(123,211,255,.65), 0 0 2px rgba(255,255,255,.6) inset;
  transform:translate(-50%, -50%) scale(.95);
  animation: pipPulse 1.6s ease-in-out infinite;
  pointer-events:none;
  z-index:2;
}
@keyframes pipPulse{
  0%,100%{ transform:translate(-50%,-50%) scale(.95); opacity:.85 }
  50%{ transform:translate(-50%,-50%) scale(1.12); opacity:1 }
}

/* Optional ring target while hovering a hotspot */
.hotspot-ring{
  position:absolute;
  width:64px;height:64px;border-radius:50%;
  border:2px dashed rgba(123,211,255,.55);
  transform:translate(-50%,-50%);
  animation: ringSpin 8s linear infinite;
  pointer-events:none; z-index:2;
}
@keyframes ringSpin{ to{ transform:translate(-50%,-50%) rotate(360deg) }}

/* --- Avatar placeholder (simple circle you’ll steer with WASD) --- */
#avatar{
  position:absolute;
  width:24px;height:24px;border-radius:50%;
  background:linear-gradient(180deg,#ffd1a6,#f7a56d);
  border:2px solid #212a3f;
  box-shadow:0 6px 16px rgba(0,0,0,.45);
  transform:translate(-50%, -50%);
  z-index:2;
}
#avatar::after{
  content:"";
  position:absolute; inset:-6px;
  border-radius:50%;
  border:2px solid rgba(114,224,168,.18);
  animation: avatarPing 1.8s ease-out infinite;
}
@keyframes avatarPing{
  0%{ transform:scale(.8); opacity:.6 }
  80%{ transform:scale(1.4); opacity:0 }
  100%{ transform:scale(1.4); opacity:0 }
}

/* --- Tooltip for contextual prompts --- */
.tooltip{
  position:absolute;
  transform:translate(-50%, calc(-100% - 14px));
  background:var(--panel);
  color:var(--ink-0);
  border:1px solid #2b3957;
  border-radius:10px;
  padding:8px 10px;
  font-size:12px;
  white-space:nowrap;
  pointer-events:none;
  box-shadow:var(--shadow);
  z-index:4;
}
.tooltip::after{
  content:"";
  position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
  width:10px;height:10px; background:var(--panel);
  border-right:1px solid #2b3957; border-bottom:1px solid #2b3957;
  transform-origin:50% 50%; transform:translateX(-50%) rotate(45deg);
}

/* --- Toast notifications (bottom-center) --- */
#toasts{
  pointer-events:none;
  position:absolute; left:50%; bottom:calc(var(--dock-h) + 12px);
  transform:translateX(-50%);
  display:flex; flex-direction:column; gap:10px;
  z-index:9;
}
.toast{
  pointer-events:auto;
  background:var(--panel);
  border:1px solid #28324a;
  border-left:4px solid var(--accent);
  padding:10px 14px;
  border-radius:10px;
  min-width:260px;
  box-shadow:var(--shadow);
  animation: toastIn .22s ease forwards;
}
.toast.ok{ border-left-color:var(--ok) }
.toast.warn{ border-left-color:var(--danger) }
@keyframes toastIn{
  from{ opacity:0; transform:translateY(8px) }
  to{ opacity:1; transform:translateY(0) }
}

/* --- Inventory badge pill in the dock --- */
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background:var(--panel);
  border:1px solid #27324a;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
.badge .dot{
  width:10px; height:10px; border-radius:50%;
  background:var(--ok); box-shadow:0 0 0 2px rgba(114,224,168,.18);
}

/* --- Minimal mini-map (top-right, toggleable) --- */
/* Minimap inside sidebar (blueprint frame + corner brackets) */
#minimap{ position:relative; width:100%; aspect-ratio: 16 / 11; background:#ffffff; border:1px solid var(--bp-stroke); border-radius:0; box-shadow:0 6px 18px rgba(0,0,0,.08), inset 0 0 0 1px rgba(0,0,0,.06); overflow:hidden; flex: 0 0 auto; }
#minimap:hover{ cursor:pointer; }
#minimap .cta{
  position:absolute; left:6px; right:6px; bottom:6px;
  display:none; align-items:center; justify-content:center; text-align:center;
  padding:8px 10px; background:rgba(255,255,255,.95);
  color:#111; text-decoration:none; font-weight:800; letter-spacing:.06em;
  border:1px solid #111; border-radius:0; box-shadow:0 2px 8px rgba(0,0,0,.08);
}
#minimap:hover .cta{ display:flex; }
#minimap::before, #minimap::after{
  content:""; position:absolute; width:18px; height:18px; border:2px solid var(--bp-stroke); opacity:.85; pointer-events:none;
}
#minimap::before{ right:6px; top:6px; border-left:none; border-bottom:none; border-radius:0; }
#minimap::after{ left:6px; bottom:6px; border-right:none; border-top:none; border-radius:0; }
#minimap canvas{ width:100%; height:100%; display:block; }

/* Hide old horizontal HUD now that vertical blueprint HUD is active */
#game #hud{ display:none !important; }

/* --- Focus glow for keyboard users --- */
:focus-visible{ outline-color:#111; outline-offset:2px; }

/* --- Optional grid overlay for debugging camera vs world --- */
.debug-grid{
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;
}