/*
  enhancements.css — layered on top of style.css.
  Adds real fonts (Newsreader / JetBrains Mono / VT323 / Inter),
  HUD LED digits, boot splash, keyboard overlay, CRT toggle, refined rank-overlay,
  char-dialog typing bars, topbar brand glyph. Keeps warm-dark palette intact.

  Specificity: we override a few style.css rules by repeating the selector
  with matching specificity rather than bumping with !important.
*/

/* ---------- typography ---------- */

:root {
  --font-ui:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-brand: "Newsreader", ui-serif, Georgia, Cambria, "Times New Roman", serif;
  --font-lcd:   "VT323", "JetBrains Mono", ui-monospace, monospace;

  --chip-bg: rgba(26, 24, 20, 0.75);
  --chip-border: #2f2a23;
}

html, body {
  font-family: var(--font-ui);
  font-feature-settings: "cv02", "cv03", "cv11", "ss01";
  letter-spacing: -0.002em;
}

/* Code/mono, labels, eyebrows */
.brand-sub,
.hero-eyebrow,
.notice-tag,
.hud-val,
.kbd-eye,
.window-title,
.pill,
.chip,
.topnav a,
code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-feature-settings: "zero", "ss03";
}

/* LED/arcade digits in HUD and rank card */
.hud-val,
.rank-name,
.stat-num,
.boot-logo {
  font-family: var(--font-lcd);
  letter-spacing: 0.02em;
}

/* Brand serif italic stays — just swap font family */
.brand-name,
.hero-accent,
.hero-title {
  font-family: var(--font-brand);
}

/* ---------- topbar: brand glyph + glow polish ---------- */

.brand {
  position: relative;
  padding-left: 32px;
}
.brand::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%) rotate(-8deg);
  background:
    radial-gradient(circle at 35% 35%, rgba(229, 176, 124, 0.95), rgba(177, 90, 31, 0.5) 55%, transparent 75%),
    linear-gradient(135deg, #2a2118, #120f0b);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 220, 180, 0.06),
    0 0 14px var(--accent-glow);
}
.brand::after {
  /* tiny filament arc */
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(255, 210, 160, 0.75), transparent 60%);
  filter: blur(1px);
  pointer-events: none;
  animation: glow-pulse 3s ease-in-out infinite;
}

.brand-name {
  font-size: 23px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1;
  display: inline-block;
  transform: translateY(3px);
}

.topnav a {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  position: relative;
  padding: 6px 10px;
  transition: color 0.14s, background 0.14s;
  border-radius: 3px;
}
.topnav a:hover { background: var(--bg-hover); }
.topnav a.active {
  color: var(--accent);
  background: var(--accent-dim);
  box-shadow: inset 0 -1px 0 var(--accent);
}

/* ---------- HUD refinements ---------- */

.hud {
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(15, 13, 10, 0.85), rgba(10, 9, 7, 0.85));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02), 0 1px 0 rgba(0,0,0,0.4);
}

.hud-item {
  padding: 4px 9px;
  border-radius: 3px;
  gap: 6px;
  transition: background 0.14s, transform 0.14s;
}
.hud-item:hover { transform: translateY(-1px); }

.hud-val {
  font-size: 18px;
  line-height: 1;
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent-glow);
  min-width: 28px;
  text-align: right;
  padding-top: 2px; /* optical VT323 baseline */
}
.hud-streak .hud-val { color: #f2b56a; }
.hud-funken .hud-val { color: #e5b07c; }

.hud-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 3px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  transition: color 0.14s, background 0.14s;
  cursor: pointer;
  user-select: none;
}
.hud-chip:hover { color: var(--text); background: var(--bg-hover); }
.hud-chip[aria-pressed="true"] {
  color: var(--accent);
  background: var(--accent-dim);
  box-shadow: inset 0 0 0 1px var(--accent-soft);
}
.hud-chip[aria-pressed="false"] .fx-sfx-wave { opacity: 0.3; }
.hud-chip-lbl { padding-top: 1px; }

/* Override existing .hud-pulse with flashier LED tick */
.hud-val.hud-pulse {
  animation: hud-led-tick 0.55s var(--ease);
}
@keyframes hud-led-tick {
  0%   { color: #fff3dd; text-shadow: 0 0 14px rgba(255,220,160,0.95); transform: translateY(-2px) scale(1.08); }
  60%  { color: #ffd9a3; text-shadow: 0 0 11px var(--accent-glow-strong); }
  100% { color: var(--accent); text-shadow: 0 0 8px var(--accent-glow); transform: translateY(0) scale(1); }
}

/* ---------- boot splash ---------- */

.boot-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #05040a;
  display: grid;
  place-items: center;
  opacity: 1;
  transition: opacity 0.5s ease;
}
.boot-splash.boot-hidden {
  opacity: 0;
  pointer-events: none;
}
.boot-crt {
  position: relative;
  width: min(640px, 92vw);
  height: min(420px, 70vh);
  background:
    radial-gradient(120% 80% at 50% 40%, #1a160f 0%, #0a0805 70%, #020102 100%);
  border-radius: 18px;
  box-shadow:
    inset 0 0 80px rgba(0, 0, 0, 0.9),
    inset 0 0 180px rgba(120, 70, 20, 0.25),
    0 0 0 8px #0a0806,
    0 0 0 12px #1a1410,
    0 40px 80px rgba(0,0,0,0.7);
  overflow: hidden;
}
.boot-scanlines {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(transparent 50%, rgba(0,0,0,0.35) 50%);
  background-size: 100% 3px;
  mix-blend-mode: multiply;
  animation: scan-roll 6s linear infinite;
  pointer-events: none;
}
@keyframes scan-roll {
  0%   { background-position-y: 0; }
  100% { background-position-y: 60px; }
}
.boot-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(100% 80% at 50% 50%, transparent 55%, rgba(0,0,0,0.9) 100%);
  pointer-events: none;
}
.boot-content {
  position: relative;
  height: 100%;
  padding: 38px 44px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  color: #f3c889;
  text-shadow: 0 0 8px rgba(243, 200, 137, 0.55);
}
.boot-brand {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.boot-logo {
  font-family: var(--font-lcd);
  font-size: 38px;
  color: #ffcf8a;
  padding: 0 10px;
  border: 2px solid rgba(255, 207, 138, 0.7);
  border-radius: 4px;
  letter-spacing: 0.05em;
}
.boot-brand-name {
  font-family: var(--font-brand);
  font-style: italic;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: #ffe3bf;
}
.boot-tty {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.8;
}
.boot-line { opacity: 0; transform: translateY(4px); }
.boot-splash .boot-line { animation: boot-line 0.4s var(--ease) forwards; }
.boot-splash .boot-line:nth-child(1) { animation-delay: 0.15s; }
.boot-splash .boot-line:nth-child(2) { animation-delay: 0.5s; }
.boot-splash .boot-line:nth-child(3) { animation-delay: 0.85s; }
.boot-splash .boot-line:nth-child(4) { animation-delay: 1.2s; }
.boot-splash .boot-line:nth-child(5) { animation-delay: 1.6s; }
@keyframes boot-line {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.boot-ok { color: #9fe070; }
.boot-press { color: #ffcf8a; letter-spacing: 0.08em; }
.boot-cursor {
  display: inline-block;
  width: 9px;
  animation: blink 1s steps(2) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .boot-scanlines { animation: none; }
  .boot-splash .boot-line { animation: none; opacity: 1; transform: none; }
}

/* ---------- FX particles canvas ---------- */

.fx-particles {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}
.fx-particles canvas { width: 100% !important; height: 100% !important; }

/* ---------- keyboard overlay ---------- */

.kbd-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(5, 4, 3, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  animation: fade-in 0.18s var(--ease);
}
.kbd-overlay[hidden] { display: none; }
.kbd-card {
  width: min(540px, 92vw);
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  box-shadow: var(--shadow-md), 0 0 60px var(--accent-dim);
  padding: 18px 22px 22px;
  animation: slide-up 0.22s var(--ease);
}
.kbd-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border);
}
.kbd-eye {
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: lowercase;
}
.kbd-close {
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  padding: 0 4px;
  transition: color 0.14s;
}
.kbd-close:hover { color: var(--accent); }
.kbd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 22px;
  font-family: var(--font-mono);
  font-size: 12px;
}
.kbd-grid > div {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
}
.kbd-grid span { margin-left: auto; color: var(--text-muted); font-size: 11px; }

kbd {
  display: inline-block;
  min-width: 20px;
  padding: 2px 6px;
  background: var(--bg-inset);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
  box-shadow: 0 1px 0 rgba(0,0,0,0.4);
}

@media (max-width: 520px) {
  .kbd-grid { grid-template-columns: 1fr; }
}

/* ---------- char-dialog: typing bars, bubble tail, refined ---------- */

.char-bubble {
  position: relative;
}
.char-bubble::after {
  /* subtle highlight on top edge */
  content: "";
  position: absolute;
  left: 10px; right: 10px; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-soft) 50%, transparent);
  opacity: 0.4;
}

.char-typing {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  vertical-align: middle;
  margin-left: 2px;
}
.char-typing span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  animation: dot-bounce 1s infinite;
}
.char-typing span:nth-child(2) { animation-delay: 0.15s; }
.char-typing span:nth-child(3) { animation-delay: 0.3s; }

.char-name {
  display: flex;
  align-items: center;
  gap: 8px;
}
.char-name::before {
  content: "▸";
  color: var(--accent);
  font-size: 10px;
  line-height: 1;
}

/* ---------- rank-overlay: electrical arcs + LED name ---------- */

.rank-card {
  position: relative;
  overflow: hidden;
}
.rank-card::before {
  /* animated arc glow behind everything */
  content: "";
  position: absolute;
  inset: -40% -10%;
  background:
    radial-gradient(40% 30% at 30% 30%, var(--accent-glow), transparent 70%),
    radial-gradient(35% 25% at 70% 70%, rgba(255, 200, 140, 0.25), transparent 70%);
  filter: blur(18px);
  animation: rank-bg 6s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes rank-bg {
  from { transform: translate(0,0); opacity: 0.7; }
  to   { transform: translate(6%, -4%); opacity: 1; }
}
.rank-card > * { position: relative; z-index: 1; }

.rank-eyebrow {
  font-family: var(--font-mono);
  letter-spacing: 0.2em;
}

.rank-name {
  font-size: 48px;
  letter-spacing: 0.03em;
  color: var(--accent);
  text-shadow:
    0 0 20px var(--accent-glow-strong),
    0 0 40px var(--accent-glow);
}

.rank-progress-bar { position: relative; overflow: hidden; }
.rank-progress-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,220,160,0.55), transparent);
  animation: shimmer 2.2s linear infinite;
}

/* ---------- verdict polish ---------- */

.verdict.correct,
.verdict.right {
  box-shadow: 0 0 0 1px var(--success-glow) inset, 0 0 32px rgba(126, 176, 74, 0.18);
}
.verdict.wrong,
.verdict.incorrect {
  box-shadow: 0 0 0 1px var(--error-glow) inset, 0 0 32px rgba(209, 104, 85, 0.18);
  animation: shake 0.32s var(--ease);
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-2px); }
  80%      { transform: translateX(2px); }
}

/* ---------- CRT mode (optional toggle) ---------- */

body.crt-mode::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0.12) 0px,
      rgba(0,0,0,0.12) 1px,
      transparent 1px,
      transparent 3px
    ),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,0.45) 100%);
  mix-blend-mode: multiply;
  animation: crt-flicker 4s steps(2) infinite;
}
@keyframes crt-flicker {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.92; }
}

/* ---------- hero title: subtle arc underline ---------- */

.hero-title {
  letter-spacing: -0.02em;
}
.hero-accent {
  position: relative;
  display: inline-block;
}
.hero-accent::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.12em;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.55;
  filter: blur(0.3px);
}

/* ---------- footer polish ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(15, 13, 10, 0.6), rgba(8, 7, 5, 0.9));
}
.footer-heart {
  color: var(--accent);
  text-shadow: 0 0 10px var(--accent-glow);
}

/* ---------- workshop: back wall ---------- */

.ws-wall {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.ws-wall-texture {
  position: absolute;
  inset: 0;
  /* brick-concrete: staggered rows of dim blocks */
  background-color: #15120d;
  background-image:
    linear-gradient(180deg, #1c1812 0%, #14110c 60%, #0e0b07 100%),
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,0) 36px,
      rgba(0,0,0,0.38) 36px,
      rgba(0,0,0,0.38) 38px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,0) 88px,
      rgba(0,0,0,0.32) 88px,
      rgba(0,0,0,0.32) 90px
    );
  background-blend-mode: multiply, normal, normal;
  opacity: 0.55;
  mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,0.5) 14%, rgba(0,0,0,0.75) 55%, transparent 85%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,0.5) 14%, rgba(0,0,0,0.75) 55%, transparent 85%);
}
.ws-wall-grunge {
  position: absolute;
  inset: 0;
  /* stitchTiles='stitch' makes feTurbulence seamless at tile boundaries.
     Offsetting with x/y attrs also avoids obvious corner matching. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512'><filter id='g' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' stitchTiles='stitch' seed='7'/><feColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.06 0 0 0 0 0.04 0 0 0 0.7 0'/></filter><rect width='512' height='512' filter='url(%23g)'/></svg>");
  background-size: 512px 512px;
  opacity: 0.55;
  mix-blend-mode: multiply;
  mask-image: linear-gradient(180deg, transparent 10%, rgba(0,0,0,0.85) 60%, transparent 90%);
  -webkit-mask-image: linear-gradient(180deg, transparent 10%, rgba(0,0,0,0.85) 60%, transparent 90%);
}

/* wall-mounted outlets */
.ws-outlet {
  position: absolute;
  width: 28px;
  height: 38px;
  background: linear-gradient(180deg, #1f1b14, #141009);
  border: 1px solid #2f271d;
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 3px 10px rgba(0,0,0,0.6);
  opacity: 0.7;
}
.ws-outlet::before,
.ws-outlet::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, #050302, #0a0805 60%, #1a1610 100%);
  border: 1px solid #050302;
  border-radius: 50%;
  transform: translateX(-50%);
}
.ws-outlet::before { top: 9px; }
.ws-outlet::after  { bottom: 9px; }
.ws-outlet--a { top: 360px; left: 6%; }
.ws-outlet--b { top: 420px; right: 7%; }

.ws-switchbox {
  position: absolute;
  top: 280px;
  right: 17%;
  width: 56px;
  height: 80px;
  background: linear-gradient(180deg, #2a2218 0%, #1a140d 100%);
  border: 1px solid #3d3225;
  border-radius: 2px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 6px 14px rgba(0,0,0,0.55);
  opacity: 0.7;
}
.ws-switchbox::before {
  content: "";
  position: absolute;
  top: 6px; left: 6px; right: 6px;
  height: 3px;
  background: linear-gradient(90deg, #7eb04a, #d19a66, #7eb04a);
  border-radius: 1px;
  opacity: 0.55;
  filter: blur(0.3px);
}
.ws-switchbox::after {
  content: "";
  position: absolute;
  bottom: 8px; left: 50%;
  width: 16px; height: 22px;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, #0a0805, #1a140d);
  border: 1px solid #3d3225;
  border-radius: 1px;
}

/* wall clock */
.ws-clock {
  position: absolute;
  top: 260px;
  right: 7%;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #1e1a13 0%, #0c0a07 100%);
  border: 2px solid #2b2721;
  box-shadow:
    inset 0 0 0 1px rgba(255,220,180,0.04),
    inset 0 0 16px rgba(0,0,0,0.8),
    0 4px 14px rgba(0,0,0,0.6);
  opacity: 0.55;
}
.ws-clock-face {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      transparent 0 14deg, #645b48 14deg 15deg, transparent 15deg 29deg,
      #645b48 29deg 30deg, transparent 30deg 44deg, #645b48 44deg 45deg,
      transparent 45deg 59deg, #645b48 59deg 60deg, transparent 60deg 74deg,
      #645b48 74deg 75deg, transparent 75deg 89deg, #d19a66 89deg 91deg,
      transparent 91deg 104deg, #645b48 104deg 105deg, transparent 105deg 119deg,
      #645b48 119deg 120deg, transparent 120deg 134deg, #645b48 134deg 135deg,
      transparent 135deg 149deg, #645b48 149deg 150deg, transparent 150deg 164deg,
      #645b48 164deg 165deg, transparent 165deg 179deg, #d19a66 179deg 181deg,
      transparent 181deg 194deg, #645b48 194deg 195deg, transparent 195deg 209deg,
      #645b48 209deg 210deg, transparent 210deg 224deg, #645b48 224deg 225deg,
      transparent 225deg 239deg, #645b48 239deg 240deg, transparent 240deg 254deg,
      #645b48 254deg 255deg, transparent 255deg 269deg, #d19a66 269deg 271deg,
      transparent 271deg 284deg, #645b48 284deg 285deg, transparent 285deg 299deg,
      #645b48 299deg 300deg, transparent 300deg 314deg, #645b48 314deg 315deg,
      transparent 315deg 329deg, #645b48 329deg 330deg, transparent 330deg 344deg,
      #645b48 344deg 345deg, transparent 345deg 359deg, #d19a66 359deg 360deg);
  mask: radial-gradient(circle, transparent 68%, #000 70%);
  -webkit-mask: radial-gradient(circle, transparent 68%, #000 70%);
}
.ws-clock-hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  background: #cfc3a7;
  transform-origin: 50% 100%;
  border-radius: 2px;
}
.ws-clock-hand--h { width: 2.5px; height: 16px; transform: translateX(-50%) rotate(40deg); }
.ws-clock-hand--m { width: 2px;   height: 22px; transform: translateX(-50%) rotate(190deg); }
.ws-clock-hand--s { width: 1px;   height: 24px; background: var(--accent); transform: translateX(-50%) rotate(0deg); animation: ws-clock-sec 60s steps(60) infinite; transform-origin: 50% 100%; }
@keyframes ws-clock-sec {
  to { transform: translateX(-50%) rotate(360deg); }
}

@media (max-width: 1200px) {
  .ws-clock, .ws-switchbox { display: none; }
}
@media (max-width: 720px) {
  .ws-outlet { display: none; }
}

/* ---------- workshop: ceiling conduits ---------- */

.ws-conduit {
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  height: 30px;
  pointer-events: none;
  z-index: 1;
}
.ws-pipe {
  position: absolute;
  left: 0;
  right: 0;
  height: 5px;
  background:
    linear-gradient(180deg, #1a1611 0%, #3a3225 40%, #1a1611 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,220,180,0.08),
    0 2px 4px rgba(0,0,0,0.55);
  border-top: 1px solid #2b2721;
  border-bottom: 1px solid #05040a;
}
.ws-pipe--a { top: 4px; }
.ws-pipe--b {
  top: 16px;
  height: 3px;
  background: linear-gradient(180deg, #2a1f14 0%, #7a5835 50%, #2a1f14 100%);
  opacity: 0.55;
}
.ws-conduit-bracket {
  position: absolute;
  top: 0;
  width: 14px;
  height: 22px;
  background: linear-gradient(180deg, #211a13 0%, #3a3225 50%, #14100a 100%);
  border-radius: 2px 2px 0 0;
  box-shadow: 0 3px 6px rgba(0,0,0,0.5);
}

/* ---------- workshop: volumetric light cones ---------- */

.ws-light-cones {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.ws-cone {
  position: absolute;
  top: 140px;
  width: 280px;
  height: 520px;
  transform: translateX(-50%);
  background:
    radial-gradient(60% 100% at 50% 0%,
      rgba(255, 210, 150, 0.22) 0%,
      rgba(255, 180, 110, 0.12) 35%,
      rgba(209, 154, 102, 0.05) 70%,
      transparent 100%);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  filter: blur(8px);
  opacity: 0;
  transition: opacity 1.2s var(--ease);
  mix-blend-mode: screen;
}
.ws-cone[data-cone="1"] { left: calc(4% + 65px); }
.ws-cone[data-cone="2"] { left: calc(24% + 65px); opacity: 0; }
.ws-cone[data-cone="3"] { left: 50%; }
.ws-cone[data-cone="4"] { left: calc(76% - 65px); }
.ws-cone[data-cone="5"] { left: calc(96% - 65px); }
/* show cone only when corresponding lamp is lit */
body:has(.ws-lamp[data-lamp="1"].lit) .ws-cone[data-cone="1"] { opacity: 0.85; }
body:has(.ws-lamp[data-lamp="2"].lit) .ws-cone[data-cone="2"] { opacity: 0.7; }
body:has(.ws-lamp[data-lamp="3"].lit) .ws-cone[data-cone="3"] { opacity: 0.55; }
body:has(.ws-lamp[data-lamp="4"].lit) .ws-cone[data-cone="4"] { opacity: 0.7; }
body:has(.ws-lamp[data-lamp="5"].lit) .ws-cone[data-cone="5"] { opacity: 0.85; }

/* flicker-matched subtle jitter so cones feel alive */
@keyframes ws-cone-flicker {
  0%, 100% { filter: blur(8px) brightness(1); }
  50%      { filter: blur(8px) brightness(1.08); }
  73%      { filter: blur(8.5px) brightness(0.94); }
}
.ws-cone { animation: ws-cone-flicker 7.5s ease-in-out infinite; }
.ws-cone[data-cone="2"] { animation-delay: -1.2s; }
.ws-cone[data-cone="3"] { animation-delay: -2.4s; }
.ws-cone[data-cone="4"] { animation-delay: -3.6s; }
.ws-cone[data-cone="5"] { animation-delay: -4.8s; }

@media (max-width: 720px) {
  .ws-cone { width: 200px; height: 360px; }
}

/* ---------- workshop: floor props ---------- */

.ws-floor-props {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 220px;
  pointer-events: none;
  z-index: 1;
}
.ws-cable-coil {
  position: absolute;
  bottom: 28px;
  left: 440px;
  width: 110px;
  height: 58px;
  opacity: 0.7;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.7));
  background:
    radial-gradient(ellipse 52px 26px at 50% 50%,
      #2a2118 0%, #1c1610 50%, transparent 80%),
    radial-gradient(ellipse 42px 20px at 50% 48%,
      transparent 40%, #3a2f22 42%, #1a140e 60%, transparent 80%),
    radial-gradient(ellipse 32px 15px at 50% 46%,
      transparent 40%, #3a2f22 42%, #1a140e 60%, transparent 80%),
    radial-gradient(ellipse 22px 10px at 50% 44%,
      transparent 40%, #3a2f22 42%, #1a140e 60%, transparent 80%);
}
.ws-paint {
  position: absolute;
  border-radius: 50%;
  filter: blur(0.6px);
  mix-blend-mode: multiply;
}
.ws-paint--a {
  bottom: 50px;
  left: 320px;
  width: 38px;
  height: 22px;
  background: radial-gradient(ellipse, rgba(180, 100, 50, 0.4), transparent 70%);
}
.ws-paint--b {
  bottom: 76px;
  right: 380px;
  width: 24px;
  height: 14px;
  background: radial-gradient(ellipse, rgba(120, 150, 70, 0.35), transparent 70%);
}
.ws-toolshadow {
  position: absolute;
  bottom: 18px;
  right: 340px;
  width: 160px;
  height: 8px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.7), transparent 70%);
  filter: blur(3px);
  opacity: 0.6;
}

@media (max-width: 1100px) {
  .ws-cable-coil, .ws-paint--a, .ws-toolshadow { display: none; }
}

/* ---------- workshop: dust particles ---------- */

.ws-dust {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.ws-dust span {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255, 220, 180, 0.6);
  box-shadow: 0 0 4px rgba(255, 220, 180, 0.4);
  animation: ws-dust-float 18s linear infinite;
  opacity: 0;
}
.ws-dust span:nth-child(1) { left: 15%; top: 80%;  animation-duration: 22s; animation-delay: -3s; }
.ws-dust span:nth-child(2) { left: 30%; top: 90%;  animation-duration: 28s; animation-delay: -8s; }
.ws-dust span:nth-child(3) { left: 48%; top: 85%;  animation-duration: 24s; animation-delay: -14s; }
.ws-dust span:nth-child(4) { left: 62%; top: 92%;  animation-duration: 30s; animation-delay: -2s; }
.ws-dust span:nth-child(5) { left: 75%; top: 82%;  animation-duration: 26s; animation-delay: -18s; }
.ws-dust span:nth-child(6) { left: 88%; top: 88%;  animation-duration: 32s; animation-delay: -10s; }
.ws-dust span:nth-child(7) { left: 22%; top: 95%;  animation-duration: 20s; animation-delay: -6s; }
.ws-dust span:nth-child(8) { left: 55%; top: 78%;  animation-duration: 34s; animation-delay: -22s; }

@keyframes ws-dust-float {
  0%   { transform: translate(0, 0) scale(0.8);       opacity: 0; }
  10%  { opacity: 0.6; }
  50%  { transform: translate(20px, -280px) scale(1); opacity: 0.4; }
  90%  { opacity: 0.2; }
  100% { transform: translate(-10px, -580px) scale(0.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ws-dust span { animation: none; opacity: 0; }
  .ws-cone { animation: none; }
}

/* ---------- unlockables panel ---------- */

.unlocks-section {
  margin-top: 28px;
  animation: fade-in 0.3s var(--ease);
}
.unlocks-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: lowercase;
}
.unlocks-head::before { content: '// '; color: var(--text-dim); }
.unlocks-head-meta {
  font-size: 11px;
  color: var(--text-dim);
}
.unlocks-head-meta strong {
  color: var(--accent);
  font-weight: 500;
}
.unlocks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.unlock-tile {
  position: relative;
  padding: 14px 14px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: border-color 0.18s, transform 0.14s var(--ease), background 0.18s;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
}
.unlock-tile::before {
  /* corner notch */
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 12px; height: 12px;
  background: linear-gradient(135deg, transparent 50%, var(--border) 50%);
  opacity: 0.5;
}
.unlock-tile:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.unlock-tile.locked {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.5);
}
.unlock-tile.locked:hover { transform: none; }

.unlock-tile.unlocked {
  border-color: var(--border-strong);
}
.unlock-tile.active {
  border-color: var(--accent);
  background: var(--accent-dim);
  box-shadow: inset 0 0 0 1px var(--accent-soft), 0 0 20px rgba(209, 154, 102, 0.12);
}
.unlock-tile.active::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 3px; height: 100%;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  animation: glow-pulse 3s ease-in-out infinite;
}

.unlock-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.unlock-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--accent);
}
.unlock-tile.active .unlock-icon {
  background: rgba(209, 154, 102, 0.15);
  border-color: var(--accent-soft);
  box-shadow: 0 0 12px var(--accent-glow);
}
.unlock-icon svg { width: 18px; height: 18px; }

.unlock-title {
  flex: 1;
  min-width: 0;
}
.unlock-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.2;
}
.unlock-tile.locked .unlock-name { color: var(--text-muted); }

.unlock-cost {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin-top: 2px;
}
.unlock-cost .unlock-pad {
  display: inline-block;
  margin-right: 4px;
  color: var(--text-muted);
}
.unlock-tile.unlocked .unlock-cost { color: var(--success); }
.unlock-tile.unlocked .unlock-pad  { color: var(--success); }

.unlock-desc {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  min-height: 2.1em;
}

.unlock-state {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  text-transform: lowercase;
  letter-spacing: 0.05em;
}
.unlock-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 2px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  font-size: 10px;
}
.unlock-tile.active .unlock-chip {
  color: var(--accent);
  border-color: var(--accent-soft);
  background: var(--accent-dim);
}

/* toast on unlock action */
.unlock-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 10px 18px;
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  box-shadow: 0 0 30px var(--accent-glow), var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  z-index: 90;
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease);
}
.unlock-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- unlocked body classes: visual effects ---------- */

/* schematic overlay: soft electrical circuit lines behind content */
body.unlock-schematic .workshop-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'><g fill='none' stroke='%23d19a66' stroke-width='0.8' opacity='0.35'><path d='M40 80h120v40h80v60M300 40v80h60v100M60 300h180v-60h100M440 80h120v180M80 460h160v80M380 380v120h120'/><circle cx='240' cy='80' r='4'/><circle cx='240' cy='180' r='4'/><circle cx='360' cy='220' r='4'/><circle cx='560' cy='260' r='4'/><circle cx='380' cy='500' r='4'/><rect x='430' y='340' width='30' height='16' rx='1'/><rect x='150' y='270' width='20' height='10' rx='1'/><path d='M100 400 l12 -8 l0 16 z M300 430 l12 -8 l0 16 z' fill='%23d19a66' opacity='0.5'/></g></svg>");
  background-size: 600px 600px;
  opacity: 0.25;
  z-index: 3;
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}

/* fireflies: extra floating particles */
body.unlock-fireflies .ws-dust span {
  background: radial-gradient(circle, rgba(255,220,150,1) 0%, rgba(209,154,102,0.6) 50%, transparent 80%);
  box-shadow: 0 0 8px rgba(255, 200, 120, 0.8), 0 0 16px rgba(209, 154, 102, 0.4);
  width: 3px;
  height: 3px;
}
body.unlock-fireflies .ws-dust {
  opacity: 1;
}

/* golden accent: boost copper warmth */
body.unlock-golden {
  --accent:        #e8b771;
  --accent-hover:  #f5cd8f;
  --accent-glow:   rgba(232, 183, 113, 0.45);
  --accent-glow-strong: rgba(232, 183, 113, 0.65);
  --accent-soft:   rgba(232, 183, 113, 0.28);
  --accent-dim:    rgba(232, 183, 113, 0.12);
}

/* extra posters: show two additional wall posters */
body.unlock-extra-posters .workshop-stage::before {
  content: "";
  position: absolute;
  top: 240px;
  right: 30px;
  width: 180px;
  height: 250px;
  background:
    linear-gradient(180deg, #1b1710 0%, #0f0c08 100%);
  border: 1px solid #2b2721;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
  opacity: 0.55;
  background-image:
    linear-gradient(180deg, #1b1710 0%, #0f0c08 100%),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 22px,
      rgba(209,154,102,0.22) 22px,
      rgba(209,154,102,0.22) 23px
    );
  background-blend-mode: normal, overlay;
  transform: rotate(1.5deg);
  z-index: 0;
}
@media (max-width: 1400px) {
  body.unlock-extra-posters .workshop-stage::before { display: none; }
}

/* master-wrench: brand glyph gets a small wrench mark */
body.unlock-master-wrench .brand::before {
  background:
    radial-gradient(circle at 35% 35%, #ffe3bf, #c48c51 55%, transparent 75%),
    linear-gradient(135deg, #3a2a1a, #1a1008);
  box-shadow:
    inset 0 0 0 1px rgba(255, 230, 200, 0.12),
    0 0 18px rgba(232, 183, 113, 0.55);
}

/* scanlines-lite: thinner, softer than full CRT */
body.unlock-scanlines::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.06) 0px,
    rgba(0,0,0,0.06) 1px,
    transparent 1px,
    transparent 4px
  );
  mix-blend-mode: multiply;
}

@media (max-width: 640px) {
  .unlocks-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 440px) {
  .unlocks-grid { grid-template-columns: 1fr; }
}

/* ---------- responsive tweaks ---------- */

@media (max-width: 720px) {
  .hud-chip-lbl { display: none; }
  .hud-chip { padding: 4px 6px; }
  .brand::before { width: 18px; height: 18px; }
  .brand { padding-left: 26px; }
  .boot-content { padding: 26px 28px; gap: 16px; }
  .boot-tty { font-size: 12px; }
  .boot-logo { font-size: 30px; }
}