/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   PIXEL KEEP — the chosen redesign theme (CJ, 2026-08-28). A pure override layer loaded AFTER
   styles.css: repaints the legacy Castle build into the phosphor-warm pixel world approved on the
   design canvas. Remove this one <link> (and the Pixelify font link) in index.html to fall back to
   the stone-and-gold legacy skin untouched. Chrome classes for the coming feature layer (feed strip,
   notification bell, Configure button) live at the bottom so those elements are born themed.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
:root{
  --abyss:#060705; --basalt-900:#0E130D; --basalt-800:#141B12; --basalt-700:#1D2919; --basalt-600:#2B3C25;
  --mortar:#040503; --sandstone:#3E5434;
  --gold:#F0C24C; --gold-deep:#A8842E; --bronze:#7FA35E; --bronze-dark:#33482A;
  --solar:#FFB347; --aether:#58F08A;
  --text-hi:#EAF5DF; --text-mid:#A9BE97; --text-dim:#6C8060;
  --font-display:'Pixelify Sans',monospace; --font-body:'Pixelify Sans',monospace; --font-mono:'Pixelify Sans',monospace;
  --radius:0px;
}
body{
  background:var(--abyss);
  background-image:repeating-linear-gradient(0deg, rgba(88,240,138,.03) 0 1px, transparent 1px 4px);
  font-size:clamp(13px, 0.3vw + 10px, 17px);
}
/* square the world — pixel keeps have corners */
.map,.strip,.sidebar,.cell,.sprite,.rune-switch,.rune-seg,.vchip,.viewtoggle,.state,.event,
.henry-bubble,.henry-input input,.henry-input button,.sidetab{border-radius:0}
.map{border-width:2px;box-shadow:inset 0 0 0 1px var(--mortar), 6px 6px 0 rgba(0,0,0,.45)}
.strip,.sidebar{border-width:2px;box-shadow:inset 0 1px 0 rgba(240,194,76,.06), 5px 5px 0 rgba(0,0,0,.45)}
.cell{border-width:2px;box-shadow:inset 0 0 0 1px var(--mortar), 4px 4px 0 rgba(0,0,0,.45)}
.cell:hover{transform:translate(-2px,-2px);box-shadow:inset 0 0 0 1px var(--accent), 6px 6px 0 rgba(0,0,0,.5)}
.topbar h1{letter-spacing:.08em}
/* all-pixel type readability trims */
.sysline{font-size:13px;letter-spacing:.02em}
.cell .room-title{letter-spacing:.04em}
.cell .name,.cell .room,.managed{letter-spacing:.02em}
.state{letter-spacing:.05em;font-size:clamp(10px,0.62vw,12px)}
.metrics{font-size:clamp(10px,0.66vw,12.5px)}
.henry-bubble{font-size:13.5px;line-height:1.6}
.henry-input input{font-family:var(--font-body)}
.strip-h{font-size:clamp(10px,0.68vw,13px);letter-spacing:.08em}
.sidetab{font-size:11px;letter-spacing:.05em}
.map-hint{font-size:11px;letter-spacing:.1em}
.sub-pill,.subagents{font-family:var(--font-mono)}

/* ── feature-layer chrome (elements land in later build phases; themed from birth) ─────────────── */
.feedstrip{display:flex;align-items:center;gap:14px;padding:7px 14px;border-bottom:1px solid var(--bronze-dark);
  background:linear-gradient(90deg,color-mix(in srgb,var(--solar) 8%,transparent),transparent 60%);
  font-family:var(--font-mono);font-size:11.5px;color:var(--text-mid)}
.feedstrip .fs-title{font-family:var(--font-display);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--solar);flex:none}
.feedstrip .fs-items{display:flex;gap:16px;flex:1;min-width:0;overflow:hidden;white-space:nowrap}
.fs-btn{cursor:pointer;border:1px solid color-mix(in srgb,var(--ok) 40%,transparent);color:var(--ok);
  background:color-mix(in srgb,var(--ok) 10%,transparent);border-radius:0;padding:4px 12px;font-weight:600;flex:none}
.fs-btn.ghost{border-color:var(--bronze-dark);color:var(--text-mid);background:none}
.fs-items.fs-read{cursor:pointer}
.fs-items.fs-read:hover{color:var(--text-hi)}
.notif{position:relative;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border:2px solid var(--bronze-dark);border-radius:0;background:linear-gradient(180deg,var(--basalt-700),var(--basalt-800));color:var(--text-mid)}
.notif .nbadge{position:absolute;top:-7px;right:-7px;min-width:16px;height:16px;border-radius:0;background:var(--solar);color:var(--abyss);
  font-family:var(--font-mono);font-size:10px;font-weight:700;display:grid;place-items:center;padding:0 4px}
.cfg-btn{cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-mid);border:2px solid var(--bronze-dark);
  background:linear-gradient(180deg,var(--basalt-700),var(--basalt-800));border-radius:0;padding:6px 12px}

/* ── BOOT VEIL — the torch-lighting load moment (feature phase 9, 2026-08-30) ─────────────────────
   Full-viewport over everything until the first snapshot lands. Three wall torches catch light one
   after another (steps() flicker — pixel fire, not smooth fire), the crest breathes, the status line
   under them narrates the wake-up. app.js adds .bv-done → a stepped fade, then removes the node. */
.bootveil{display:flex;position:fixed;inset:0;z-index:10000;align-items:center;justify-content:center;
  background:var(--abyss);
  background-image:repeating-linear-gradient(0deg, rgba(88,240,138,.03) 0 1px, transparent 1px 4px)}
.bootveil.bv-done{opacity:0;transition:opacity .6s steps(6);pointer-events:none}
.bv-inner{display:flex;flex-direction:column;align-items:center;gap:10px;transform:translateY(-4vh)}
.bv-crest{font-size:44px;color:var(--gold);
  text-shadow:0 2px 0 var(--gold-deep), 0 0 18px rgba(240,194,76,.55), 0 0 40px rgba(240,194,76,.2);
  animation:bv-breathe 1.6s steps(3) infinite}
.bv-title{font-family:var(--font-display);font-size:34px;font-weight:700;letter-spacing:.14em;color:var(--gold);
  text-shadow:0 2px 0 var(--gold-deep), 0 0 16px rgba(240,194,76,.35)}
.bv-sub{font-family:var(--font-display);font-size:12px;letter-spacing:.3em;color:var(--bronze);margin-top:-6px}
.bv-torches{display:flex;gap:38px;margin-top:18px}
.bv-torch{position:relative;width:10px;height:30px;border:2px solid var(--mortar);
  background:linear-gradient(180deg,var(--sandstone),var(--bronze-dark) 60%,var(--basalt-800))}
.bv-torch i{position:absolute;left:50%;top:-13px;width:6px;height:6px;margin-left:-3px;background:var(--solar);
  opacity:0;animation:bv-catch .2s steps(1) forwards, bv-flame .45s steps(2) infinite}
/* torches catch one after another — the whole keep wakes left to right */
.bv-torch:nth-child(1) i{animation-delay:.25s,.25s}
.bv-torch:nth-child(2) i{animation-delay:.75s,.75s}
.bv-torch:nth-child(3) i{animation-delay:1.25s,1.25s}
.bv-status{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--text-dim);margin-top:14px;
  animation:bv-breathe 1.1s steps(2) infinite}
@keyframes bv-catch{to{opacity:1}}
@keyframes bv-flame{
  0%,100%{box-shadow:0 -6px 0 0 var(--gold), -4px -2px 0 0 var(--solar), 4px -4px 0 0 var(--gold-deep), 0 -12px 0 -1px rgba(255,179,71,.5)}
  50%{box-shadow:0 -7px 0 0 var(--solar), 4px -3px 0 0 var(--gold), -4px -5px 0 0 var(--gold-deep), 0 -13px 0 -1px rgba(240,194,76,.45)}
}
@keyframes bv-breathe{0%,100%{opacity:1}50%{opacity:.55}}

/* ── SCRYING LAB restyle (2026-08-31) — the star-map joins the keep ───────────────────────────────────
   Two halves: (1) --scry-* tokens repaint the CANVAS (scry.js reads them once at init — remove this
   <link> and the lab falls back to its built-in legacy palette untouched); (2) chrome overrides square
   the toolbar/tip/panel and swap the legacy atlas-blue accents for phosphor green + gold. */
:root{
  --scry-void:#060705; --scry-bg-core:#0B140A; --scry-bg-edge:#030402;
  --scry-text-hi:#EAF5DF; --scry-text-mid:#A9BE97; --scry-text-dim:#6C8060;
  --scry-acc1:#58F08A;  /* aether green — cyan slot + the scanline sweep */
  --scry-acc2:#E8863C;  /* deep ember orange */
  --scry-acc3:#9BE8C6;  /* pale phosphor mint (the old atlas-blue slot) */
  --scry-acc4:#7FD98A;  /* ok green */
  --scry-acc5:#FFB347;  /* solar amber */
  --scry-acc6:#F0C24C;  /* gold */
  --scry-acc7:#C8F5A8; --scry-acc8:#A8842E; --scry-red:#F5563D;
  --scry-font-display:'Pixelify Sans',monospace; --scry-font-mono:'Pixelify Sans',monospace;
}
.scry{background:radial-gradient(120% 90% at 50% 30%, #0B140A 0%, var(--abyss) 60%), var(--abyss)}
.scry-toolbar,.scry-btn,.scry-tip,.scry-panel,.sc-tag,.sc-path{border-radius:0}
.scry-toolbar{border-width:2px;box-shadow:inset 0 1px 0 rgba(240,194,76,.06), 5px 5px 0 rgba(0,0,0,.45)}
.scry-hint{color:var(--aether);text-shadow:0 0 8px color-mix(in srgb,var(--aether) 55%,transparent)}
.scry-btn{color:var(--aether);border:2px solid color-mix(in srgb,var(--aether) 40%,var(--basalt-600))}
.scry-btn:hover{border-color:var(--aether);box-shadow:inset 0 0 0 1px var(--mortar),0 0 14px color-mix(in srgb,var(--aether) 40%,transparent)}
.scry-tip{border:2px solid var(--aether);box-shadow:0 0 18px color-mix(in srgb,var(--aether) 30%,transparent), 5px 5px 0 rgba(0,0,0,.5)}
.scry-panel{border-width:2px;box-shadow:0 0 30px color-mix(in srgb,var(--accent,var(--aether)) 25%,transparent), 6px 6px 0 rgba(0,0,0,.5)}
#vc-scry.active{color:var(--abyss);background:linear-gradient(180deg,var(--aether),#2FA65C);border-color:var(--aether);
  box-shadow:0 0 16px color-mix(in srgb,var(--aether) 50%,transparent),inset 0 1px 0 rgba(255,255,255,.35)}