/* ═══════════════════════════════════════════════════════════════
   VAULT 84 — Terminal UI
   Palette:
     --bg       #020f07   deep black-green
     --surface  #041208   card/panel bg
     --border   #14fdce   phosphor green
     --hi       #14fdce   bright values
     --dim      #3d9970   secondary text
     --muted    #1e5c3a   very muted / decorative
     --warn     #ff8800
     --crit     #ff2222
     --ore      #d4e800
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap');

:root {
  --bg:      #020f07;
  --surface: #041208;
  --border:  #14fdce;
  --hi:      #14fdce;   /* bright phosphor — values, active */
  --dim:     #5ecba8;   /* secondary — labels, keys — raised from #3d9970 */
  --muted:   #2a7a55;   /* decorative borders, very secondary — raised from #1a4a2e */
  --warn:    #ff8800;
  --crit:    #ff2222;
  --ore:     #d4e800;
  --glow:    rgba(20,253,206,0.12);
  --font:    'VT323', monospace;
}

/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #1a1a1a;
  color: var(--hi);
  font-family: var(--font);
  font-size: 22px;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  line-height: 1.25;
  overflow: hidden;
}

/* ── CRT Monitor shell ─────────────────────────────────────────── */
.frame {
  position: absolute;
  inset: 1.5% 2%;
  border-radius: 1.8rem;
  border: 0.9rem solid;
  border-top-color:    #0d0d0d;
  border-left-color:   #080808;
  border-right-color:  #080808;
  border-bottom-color: #181818;
  box-shadow:
    /* Deep inner vignette — corners go very dark */
    inset 0 0 160px rgba(0,0,0,0.97),
    inset 0 0 60px  rgba(0,0,0,0.85),
    /* Outer monitor shadow */
    0 0 80px rgba(0,0,0,0.95),
    0 0 20px rgba(0,0,0,0.8);
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
}

/* ── Scanlines ─────────────────────────────────────────────────── */
/* Fine horizontal lines — visible but not oppressive */
.scanlines {
  position: absolute;
  inset: 0;
  border-radius: 1.8rem;
  background: repeating-linear-gradient(
    to bottom,
    transparent       0px,
    transparent       2px,
    rgba(0,0,0,0.18)  2px,
    rgba(0,0,0,0.18)  3px
  );
  pointer-events: none;
  z-index: 11;
}

/* ── Phosphor glow overlay ─────────────────────────────────────── */
/* Sits behind content: warm green bloom across the whole screen  */
.glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 90% 80% at 50% 48%,
    rgba(20, 253, 206, 0.13)  0%,
    rgba(20, 253, 206, 0.07) 45%,
    rgba(10, 120,  80, 0.04) 70%,
    transparent              100%
  );
  pointer-events: none;
  z-index: 1;
  animation: glow-breathe 6s ease-in-out infinite;
}

@keyframes glow-breathe {
  0%, 100% { opacity: 0.85; }
  50%       { opacity: 1.0;  }
}

/* ── CRT output panel ───────────────────────────────────────────── */
.output {
  position: absolute;
  inset: 0;
  background: var(--bg);
  color: var(--hi);
  font-family: var(--font);
  pointer-events: auto;
  overflow: hidden;
  z-index: 3;
  border-radius: 1rem;

  /* Phosphor text glow — two layers for depth, not five */
  text-shadow:
    0 0 6px  rgba(20, 253, 206, 0.55),
    0 0 18px rgba(20, 253, 206, 0.18);
}

/* ── Dim text always stays legible with its own softer glow ─────── */
/* Any element coloured --dim gets a matching green glow            */
h2,
.label,
.key,
.value-dim,
.panel-title,
.nav-list li a,
.hud-label,
.stat-row .key,
.dept-hint {
  text-shadow:
    0 0 5px  rgba(94, 203, 168, 0.50),
    0 0 14px rgba(94, 203, 168, 0.18);
}

/* ── Flicker — rare and subtle, just like a real CRT ──────────── */
@keyframes crt-flicker {
  0%,  19%  { opacity: 1;    }
  20%        { opacity: 0.96; }
  20.5%      { opacity: 1;    }
  60%,  79%  { opacity: 1;    }
  80%        { opacity: 0.97; }
  80.3%      { opacity: 1;    }
  95%,  97%  { opacity: 1;    }
  96%        { opacity: 0.94; }
  100%       { opacity: 1;    }
}

/* Separate rolling-line shimmer on the scanlines layer */
@keyframes scanline-roll {
  from { background-position: 0 0; }
  to   { background-position: 0 100vh; }
}

.scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(20, 253, 206, 0.03) 50%,
    transparent 100%
  );
  background-size: 100% 120px;
  animation: scanline-roll 8s linear infinite;
  pointer-events: none;
}

.noclick { pointer-events: none; }

/* ── Game layout ────────────────────────────────────────────────── */
.piece {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  animation: crt-flicker 12s ease-in-out infinite;
}

/* ── Scrollable game content ──────────────────────────────────── */
.game-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 1.5rem 1.5rem 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--muted) transparent;
}
.game-container::-webkit-scrollbar { width: 4px; }
.game-container::-webkit-scrollbar-track { background: transparent; }
.game-container::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 2px; }

/* ── Typography ─────────────────────────────────────────────────── */
h1 {
  font-size: 2.8rem;
  font-weight: normal;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
  line-height: 1;
  /* no extra glow on headings — the base text-shadow is enough */
}

h2 {
  font-size: 1.4rem;
  letter-spacing: 3px;
  color: var(--dim);
  font-weight: normal;
  margin-bottom: 1rem;
}

p { margin-bottom: 0.2rem; }

.label {
  color: var(--dim);
  font-size: 0.82rem;
  letter-spacing: 1px;
}

.value-hi  { color: var(--hi);   }
.value-dim { color: var(--dim);  }
.value-warn { color: var(--warn); }
.value-crit { color: var(--crit); }
.value-ore  { color: var(--ore);  }

/* ── Links ─────────────────────────────────────────────────────── */
a, a:visited {
  color: var(--hi);
  text-decoration: none;
  border-bottom: 1px solid var(--muted);
}
a:hover, a:focus, a:active {
  background: var(--hi);
  color: var(--bg);
  border-bottom-color: var(--hi);
}

/* ── Navigation bar ─────────────────────────────────────────────── */
.nav-bar {
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border-bottom: 1px solid var(--muted);
  padding: 0;
  flex-shrink: 0;
}

.nav-list {
  display: flex;
  list-style: none;
  gap: 0;
  flex-wrap: wrap;
}

.nav-list li {
  position: relative;
}

.nav-list li a {
  display: block;
  padding: 0.55rem 1rem;
  font-size: 0.9rem;
  letter-spacing: 2px;
  color: var(--dim);
  border-bottom: none;
  border-right: 1px solid var(--muted);
  transition: color 0.2s ease, text-shadow 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.nav-list li a:hover,
.nav-list li a:focus {
  background: linear-gradient(90deg, rgba(20,253,206,0.08) 0%, transparent 100%);
  color: var(--hi);
  text-shadow: 0 0 8px rgba(20,253,206,0.4);
  box-shadow: inset 2px 0 0 var(--hi);
}

.nav-list li a.active {
  color: var(--hi);
  background: rgba(20,253,206,0.07);
  border-bottom: 2px solid var(--hi);
}

/* ── HUD bar ────────────────────────────────────────────────────── */
.hud-bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--muted);
  font-size: 0.8rem;
  letter-spacing: 1px;
  flex-shrink: 0;
  height: 28px;
}

.hud-item {
  padding: 0 0.8rem;
  border-right: 1px solid var(--muted);
  color: var(--dim);
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.hud-item span {
  color: var(--hi);
  margin-left: 4px;
}

.hud-item.alert span { color: var(--crit); }

.hud-item.hud-osc {
  flex: 1;
  padding: 4px 8px;
  display: flex;
  align-items: center;
}
.hud-item.hud-osc canvas {
  width: 100%;
  height: 30px;
  display: block;
}

/* ── Department page layout ────────────────────────────────────── */
.dept-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 1.5rem;
  padding-top: 1.2rem;
  height: 100%;
}

@media (max-width: 900px) {
  .dept-layout {
    grid-template-columns: 1fr;
  }
}

.dept-main { min-width: 0; }
.dept-sidebar { display: flex; flex-direction: column; gap: 0.75rem; }

/* ── 3D Preview panel ─────────────────────────────────────────── */
.dept-3d-panel {
  border: 1px solid var(--muted);
  background: #020f07;
  display: flex;
  flex-direction: column;
}

.dept-canvas {
  width: 100%;
  height: 200px;
  display: block;
}

.dept-canvas-label {
  padding: 0.3rem 0.6rem;
  font-size: 0.82rem;
  letter-spacing: 2px;
  color: var(--dim);
  border-top: 1px solid var(--muted);
  text-align: center;
}

.dept-canvas-hint {
  font-size: 0.7rem;
  color: var(--muted);
  text-align: center;
  padding: 0 0 0.3rem 0;
  letter-spacing: 1px;
}

/* ── Info cards / panels ────────────────────────────────────────── */
.panel {
  border: 1px solid var(--muted);
  background: var(--surface);
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.6rem;
}

.panel-title {
  color: var(--dim);
  font-size: 0.78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--muted);
  padding-bottom: 3px;
}

/* ── Stat row ───────────────────────────────────────────────────── */
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.25rem;
  gap: 1rem;
}

.stat-row .key {
  color: var(--dim);
  font-size: 0.88rem;
  letter-spacing: 1px;
  white-space: nowrap;
  flex-shrink: 0;
}

.stat-row .val {
  color: var(--hi);
  text-align: right;
  flex-shrink: 0;
}

/* ── Progress bar ───────────────────────────────────────────────── */
.bar-track {
  width: 100%;
  height: 8px;
  background: var(--muted);
  border: 1px solid var(--muted);
  margin: 4px 0 8px 0;
  position: relative;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: var(--hi);
  transition: width 0.4s ease, background 0.4s ease;
}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  background: transparent;
  border: 1px solid var(--hi);
  color: var(--hi);
  padding: 6px 18px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 1rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: background 0.1s, color 0.1s;
  display: inline-block;
}

.btn:hover:not(:disabled) {
  background: var(--hi);
  color: var(--bg);
}

.btn:disabled {
  border-color: var(--muted);
  color: var(--muted);
  cursor: not-allowed;
}

.btn-primary {
  background: var(--hi);
  color: var(--bg);
}
.btn-primary:hover { background: #0cc9a0; }

.btn-danger  { border-color: var(--crit); color: var(--crit); }
.btn-danger:hover:not(:disabled) { background: var(--crit); color: var(--bg); }

.btn-warn    { border-color: var(--warn); color: var(--warn); }
.btn-warn:hover:not(:disabled)  { background: var(--warn); color: var(--bg); }

.btn-group { display: flex; gap: 6px; flex-wrap: wrap; }

.btn-sm { padding: 3px 10px; font-size: 0.88rem; }

/* ── Separator ─────────────────────────────────────────────────── */
.sep {
  border: none;
  border-top: 1px solid var(--muted);
  margin: 0.75rem 0;
}

/* ── Alert banner ──────────────────────────────────────────────── */
.alert-banner {
  display: none;
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  padding: 0.4rem 1.8rem;
  border: 1px solid var(--crit);
  background: rgba(2, 0, 0, 0.97);
  color: var(--crit);
  font-size: 1rem;
  letter-spacing: 2px;
  white-space: nowrap;
}

/* ── Input / Range ─────────────────────────────────────────────── */
.terminal-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hi);
  color: var(--hi);
  font-family: var(--font);
  font-size: 1.2rem;
  padding: 4px 6px;
  width: 100%;
  max-width: 320px;
}
.terminal-input:focus { outline: none; box-shadow: 0 2px 0 var(--hi); }

input[type="range"] { accent-color: var(--hi); }

/* ── Status dot ─────────────────────────────────────────────────── */
.dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}
.dot-ok   { background: var(--hi); }
.dot-warn { background: var(--warn); }
.dot-crit { background: var(--crit); }
.dot-off  { background: var(--muted); }

/* ── Nav link ───────────────────────────────────────────────────── */
.terminal-link {
  color: var(--hi);
  font-family: var(--font);
  font-size: 1rem;
  text-decoration: none;
  border-bottom: 1px solid var(--muted);
}

/* ── Sidebar mini-stat ─────────────────────────────────────────── */
.mini-stats p {
  font-size: 0.85rem;
  color: var(--dim);
  margin-bottom: 0.2rem;
}
.mini-stats p span { color: var(--hi); }

/* ── Dev menu ───────────────────────────────────────────────────── */
#dev-menu {
  position: absolute;
  bottom: 0.75rem;
  right: 1rem;
  opacity: 0.25;
  font-size: 0.8rem;
}

/* ── Blink animation ────────────────────────────────────────────── */
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.blink { animation: blink 1s step-start infinite; }



/* ── Disabled items ────────────────────────────────────────────── */
.disabled {
  color: var(--muted);
  text-decoration: line-through;
  text-shadow: none !important;
}

/* ── Selection ─────────────────────────────────────────────────── */
::selection {
  background: rgba(20, 253, 206, 0.2);
  color: var(--hi);
}

/* ── Misc ───────────────────────────────────────────────────────── */
.noisy {
  background-image: none; /* add noise texture if available */
}

@keyframes blink-cursor {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
.cursor { animation: blink-cursor 1s step-start infinite; }

/* ═══════════════════════════════════════════════════════════════
   CRT MONITOR SHELL & CONTROLS
   ═══════════════════════════════════════════════════════════════ */

.monitor-shell {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #1a1a1a;
}

.monitor-shell .frame {
  position: relative !important;
  flex: 1 1 0 !important;
  inset: auto !important;
  top: auto !important; left: auto !important;
  right: auto !important; bottom: auto !important;
  margin: 1.2% 2% 0 2%;
  border-radius: 1.4rem;
  min-height: 0;
  overflow: hidden !important;
}

/* ── Control panel strip ────────────────────────────────────── */
.crt-controls {
  flex-shrink: 0;
  height: 56px;
  margin: 0.4% 2% 1% 2%;
  border-radius: 1.4rem;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(255,255,255,0.012) 2px,
      rgba(255,255,255,0.012) 3px
    ),
    linear-gradient(to bottom, #2a2a2a 0%, #1a1a1a 100%);
  border-top: 2px solid #111;
  box-shadow:
    inset 0  2px 4px rgba(255,255,255,0.04),
    inset 0 -2px 6px rgba(0,0,0,0.6),
    0 6px 20px rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  gap: 1rem;
}

.ctrl-cluster { display: flex; align-items: center; gap: 10px; }

/* ── Power button — round ───────────────────────────────────── */
.power-btn {
  width:  38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #111;
  background: radial-gradient(circle at 35% 30%, #3a3a3a, #1a1a1a);
  box-shadow:
    0 2px 6px rgba(0,0,0,0.8),
    inset 0 1px 2px rgba(255,255,255,0.08),
    0 0 0 3px #141414,
    0 0 0 4px #2a2a2a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.1s, transform 0.1s;
  color: #555;
  font-size: 16px;
  padding: 0;
}
.power-btn:hover {
  box-shadow:
    0 2px 6px rgba(0,0,0,0.8),
    inset 0 1px 2px rgba(255,255,255,0.08),
    0 0 0 3px #141414,
    0 0 0 4px #2a2a2a,
    0 0 12px rgba(20,253,206,0.3);
  color: #14fdce;
}
.power-btn:active {
  transform: scale(0.93);
  box-shadow:
    0 1px 3px rgba(0,0,0,0.9),
    inset 0 2px 4px rgba(0,0,0,0.5),
    0 0 0 3px #141414,
    0 0 0 4px #2a2a2a;
}
.power-btn.off .power-icon { color: #333; }

/* ── LEDs ────────────────────────────────────────────────────── */
.led-stack {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.led {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #1a1a1a;
  border: 1px solid #111;
  transition: background 0.1s, box-shadow 0.1s;
}
.led-power {
  background: #14fdce;
  box-shadow: 0 0 4px #14fdce, 0 0 8px rgba(20,253,206,0.5);
  animation: led-breathe 3s ease-in-out infinite;
}
.led-power.led-off { background: #1a1a1a; box-shadow: none; animation: none; }
.led-disk  { background: #331800; }
.led-disk.led-active  { background: #ff8800; box-shadow: 0 0 4px #ff8800, 0 0 8px rgba(255,136,0,0.5); }
.led-net   { background: #0a2010; }
.led-net.led-active   { background: #14fdce; box-shadow: 0 0 4px #14fdce; }

@keyframes led-breathe {
  0%, 100% { box-shadow: 0 0 3px #14fdce, 0 0 6px rgba(20,253,206,0.4); }
  50%      { box-shadow: 0 0 5px #14fdce, 0 0 12px rgba(20,253,206,0.7); }
}

/* ── Center label ────────────────────────────────────────────── */
.ctrl-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  opacity: 0.5;
}
.monitor-model {
  font-family: 'VT323', monospace;
  font-size: 0.85rem;
  color: #888;
  letter-spacing: 3px;
}
.monitor-sub {
  font-family: 'VT323', monospace;
  font-size: 0.65rem;
  color: #555;
  letter-spacing: 2px;
}

/* ── Circular dials ──────────────────────────────────────────── */
.dial-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: ns-resize;
  user-select: none;
}
.dial {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #3c3c3c, #141414);
  border: 2px solid #0d0d0d;
  box-shadow:
    0 2px 5px rgba(0,0,0,0.8),
    inset 0 1px 2px rgba(255,255,255,0.07),
    0 0 0 2px #111,
    0 0 0 3px #252525;
  position: relative;
  transition: box-shadow 0.15s;
}
.dial:hover {
  box-shadow:
    0 2px 5px rgba(0,0,0,0.8),
    inset 0 1px 2px rgba(255,255,255,0.07),
    0 0 0 2px #111,
    0 0 0 3px #252525,
    0 0 10px rgba(20,253,206,0.15);
}
.dial-marker {
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 8px;
  background: #14fdce;
  border-radius: 1px;
  box-shadow: 0 0 4px rgba(20,253,206,0.6);
  transition: opacity 0.8s ease, box-shadow 0.8s ease;
}
.dial-label {
  font-family: 'VT323', monospace;
  font-size: 0.6rem;
  color: #555;
  letter-spacing: 1.5px;
  text-align: center;
}



/* ═══════════════════════════════════════════════════════════════
   TUTORIAL OVERLAY
   ═══════════════════════════════════════════════════════════════ */

#tutorial-overlay {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0);
  transition: background 0.4s ease;
  pointer-events: none; padding: 1rem;
}
#tutorial-overlay.tut-visible  { background: rgba(0,0,0,0.88); pointer-events: all; }
#tutorial-overlay.tut-hiding   { background: rgba(0,0,0,0);    pointer-events: none; }

.tut-paper {
  position: relative;
  width: min(700px, 94vw); max-height: 90vh;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
  background: linear-gradient(to bottom right, #f8f3e5, #ece5c8);
  border-radius: 2px;
  padding: 2.6rem 3rem 2.2rem 3rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15), 0 10px 35px rgba(0,0,0,0.4), 0 25px 70px rgba(0,0,0,0.3);
  font-family: 'Courier New', Courier, monospace; color: #1a1208;
  transform: translateY(-50px) rotate(-1.2deg); opacity: 0;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), opacity 0.4s ease;
  border-left: 5px solid #ddd5b0;
}
.tut-paper::before {
  content: ''; position: absolute; left: 4rem; top: 0; bottom: 0;
  width: 1px; background: rgba(200,70,50,0.3); pointer-events: none;
}
#tutorial-overlay.tut-visible .tut-paper { transform: translateY(0); opacity: 1; }
#tutorial-overlay.tut-hiding  .tut-paper { transform: translateY(35px) rotate(0.8deg); opacity: 0; }

.tut-paper::-webkit-scrollbar       { width: 6px; }
.tut-paper::-webkit-scrollbar-track { background: #e5ddb8; }
.tut-paper::-webkit-scrollbar-thumb { background: #b0a060; border-radius: 3px; }

/* Header */
.tut-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.tut-stamp  { font-family:'VT323',monospace; font-size:1.1rem; color:rgba(175,25,15,0.65); border:2px solid rgba(175,25,15,0.45); padding:2px 9px; letter-spacing:3px; transform:rotate(-9deg); margin-top:0.3rem; white-space:nowrap; flex-shrink:0; }
.tut-title-block { text-align:center; flex:1; }
.tut-logo   { font-size:0.72rem; letter-spacing:4px; color:#6a5820; margin-bottom:4px; }
.tut-title  { font-size:1.4rem; font-weight:900; letter-spacing:2px; color:#0f0a04; }
.tut-sub    { font-size:0.78rem; color:#7a6830; letter-spacing:0.5px; margin-top:3px; }
.tut-doc-num{ font-size:0.68rem; color:#7a6830; text-align:right; line-height:1.7; white-space:nowrap; flex-shrink:0; }

/* Body */
.tut-intro  { font-size:0.9rem; line-height:1.8; color:#1a1208; margin-bottom:1rem; }
.tut-intro p { margin-bottom:0.55rem; }
.tut-intro strong { font-weight:bold; color:#0f0804; }
.tut-rule   { border:none; border-top:1px solid #c5b070; margin:1rem 0; }
.tut-section-label { font-size:0.72rem; letter-spacing:2.5px; color:#7a6030; margin-bottom:0.75rem; font-weight:bold; }

/* Dept grid */
.tut-grid   { display:grid; grid-template-columns:1fr 1fr; gap:0.85rem 1.4rem; margin-bottom:0.4rem; }
@media (max-width:500px) { .tut-grid { grid-template-columns:1fr; } }
.tut-dept   { display:flex; gap:0.6rem; align-items:flex-start; }
.tut-dept-badge {
  flex-shrink:0; width:28px; height:28px;
  border:1.5px solid currentColor; border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  opacity:0.80; margin-top:1px; padding:3px;
}
.tut-dept-badge svg { width:100%; height:100%; display:block; }
.tut-dept-name  { font-size:0.75rem; font-weight:900; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:3px; }
.tut-dept-desc  { font-size:0.82rem; line-height:1.6; color:#2a1e0a; }

/* Tip */
.tut-tip-box  { font-size:0.84rem; line-height:1.65; color:#3a2a08; background:rgba(160,130,50,0.10); border-left:3px solid rgba(160,120,30,0.5); padding:0.6rem 0.9rem; margin-bottom:1.2rem; }
.tut-tip-label{ display:block; font-size:0.65rem; letter-spacing:2.5px; color:#7a5a18; font-weight:bold; margin-bottom:3px; }
.tut-tip-box strong { font-weight:bold; color:#1a1208; }

/* ── Signature block ─────────────────────────────────────────── */
.tut-signature-block {
  margin: 0.6rem 0 1.4rem 0;
  padding: 0.9rem 1.1rem;
  border: 1px dashed #c0a860;
  background: rgba(245,240,220,0.5);
}
.tut-sig-label {
  font-size: 0.7rem; letter-spacing: 1.5px; color: #8a6828;
  margin-bottom: 0.75rem; text-transform: uppercase;
}

/* Sign prompt — the blank line + button */
.tut-sign-line {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.75rem; color: #6a5020;
}
.tut-sign-x    { font-size: 1.1rem; opacity: 0.5; }
.tut-sign-dash { font-size: 1rem; letter-spacing: 2px; opacity: 0.4; }

.tut-sign-btn {
  display: block; width: 100%;
  padding: 0.65rem;
  background: transparent;
  color: #5a4010;
  font-family: 'VT323', monospace;
  font-size: 1.1rem; letter-spacing: 2px;
  border: 1.5px solid #b0901a;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  position: relative; overflow: hidden;
}
.tut-sign-btn:hover {
  background: rgba(160,120,20,0.12);
  color: #3a2a08;
  box-shadow: 0 0 10px rgba(180,140,20,0.25);
}
.tut-sign-btn:active { background: rgba(160,120,20,0.22); transform: scale(0.99); }

/* Ripple on click */
.tut-sign-btn::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(180,140,20,0.3) 0%, transparent 70%);
  opacity: 0; transition: opacity 0.3s;
}
.tut-sign-btn:active::after { opacity: 1; }

/* ── The actual SVG signature ────────────────────────────────── */
.tut-signed { padding-top: 0.2rem; }

.tut-sig-svg {
  width: 100%; max-width: 360px; height: 72px; overflow: visible;
  display: block;
}

.tut-sig-text {
  font-family: 'Dancing Script', Georgia, serif !important;
  font-size: 38px; fill: #1a1208;
  opacity: 0;
  animation: sig-appear 0.25s ease 0.1s forwards;
}

.tut-sig-underline {
  stroke: #2a1a08; stroke-width: 1.5px; stroke-linecap: round; fill: none;
  stroke-dasharray: 280; stroke-dashoffset: 280;
  animation: sig-draw 0.6s ease 0.2s forwards;
}

@keyframes sig-appear { to { opacity: 1; } }
@keyframes sig-draw   { to { stroke-dashoffset: 0; } }

.tut-sig-meta { font-size: 0.68rem; color: #9a7838; letter-spacing: 1px; margin-top: 0.25rem; }

/* ── Begin button ────────────────────────────────────────────── */
.tut-close {
  display: block; width: 100%;
  padding: 0.85rem;
  background: #1a1208; color: #f5f0dc;
  font-family: 'VT323', monospace;
  font-size: 1.15rem; letter-spacing: 2.5px;
  border: none; border-radius: 2px; cursor: pointer;
  transition: background 0.15s, opacity 0.4s ease;
}
.tut-close:hover { background: #2e2010; }

/* Pulse animation once it becomes available */
.tut-close-ready {
  animation: btn-pulse 1s ease 0s 2;
}
@keyframes btn-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(180,150,60,0.6); }
  50%  { box-shadow: 0 0 0 8px rgba(180,150,60,0); }
  100% { box-shadow: 0 0 0 0 rgba(180,150,60,0); }
}

/* ── Paperclip (div-based, no pseudo-element bugs) ───────────── */
.tut-clip-wrap {
  position: absolute; top: -6px; left: 2.2rem;
  width: 22px; height: 52px;
  pointer-events: none;
}
.tut-clip-outer {
  position: absolute; top: 0; left: 0;
  width: 22px; height: 52px;
  border: 2.5px solid #b09848;
  border-bottom: none;
  border-radius: 11px 11px 0 0;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.22);
}
.tut-clip-inner {
  position: absolute; top: 8px; left: 3px;
  width: 16px; height: 36px;
  border: 2px solid #b09848;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
}

.tut-fold-crease {
  position: absolute; top: 34%; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, rgba(150,130,70,0.22) 20%, rgba(150,130,70,0.22) 80%, transparent);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   NAV BADGES — state indicators on nav links
═══════════════════════════════════════════════════════════════ */
.nav-badge {
  position: absolute;
  top: 4px; right: 4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  font-size: 0px;
  z-index: 10;
}
.nav-dot-crit    { background: #ff2222; box-shadow: 0 0 6px #ff2222; }
.nav-dot-warn    { background: #ff8800; box-shadow: 0 0 6px #ff8800; }
.nav-dot-offline { background: #555;    box-shadow: 0 0 4px #333; }
.nav-badge-pulse { animation: badgePulse 0.7s ease-in-out infinite alternate; }
@keyframes badgePulse {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0.3; transform: scale(0.6); }
}

/* ── Nav keyboard hints ──────────────────────────────────────── */
.nav-key-hint {
  font-size: 0.58rem;
  color: var(--hi);
  opacity: 0.9;
  letter-spacing: 0;
  border: 1px solid var(--muted);
  border-radius: 2px;
  padding: 0 4px;
  line-height: 1.5;
  margin-left: 3px;
  flex-shrink: 0;
}
@media (max-width: 768px) { .nav-key-hint { display: none; } }

/* ═══════════════════════════════════════════════════════════════
   HUD TEMPERATURE BAR
═══════════════════════════════════════════════════════════════ */
.hud-temp-item { flex-direction: column; align-items: flex-start; gap: 1px; }
.hud-temp-val  { font-size: 1rem; }
.hud-temp-bar-wrap {
  width: 60px; height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px; overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  position: relative;
  top: -1px;
}
.hud-temp-bar {
  display: block; height: 100%; width: 40%;
  background: #14fdce;
  transition: width 0.5s ease, background 0.5s ease;
  border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   EVENT LOG BAR — bottom terminal strip, minimizable
═══════════════════════════════════════════════════════════════ */
.event-log-bar {
  flex-shrink: 0;
  background: rgba(2, 15, 7, 0.97);
  border-top: 1px solid #0d3a20;
  z-index: 5;
  font-family: 'VT323', monospace;
  transition: height 0.22s cubic-bezier(0.4,0,0.2,1);
  height: 92px;
  overflow: hidden;
}
.event-log-bar.log-minimized {
  height: 22px;
}
.log-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: #2a7a55;
  letter-spacing: 2px;
  padding: 3px 10px;
  border-bottom: 1px solid #0d3a20;
  cursor: pointer;
  user-select: none;
  height: 22px;
  box-sizing: border-box;
}
.log-header:hover { color: #5ecba8; }
.log-header-label { flex: 1; }
.log-toggle-arrow {
  font-size: 0.65rem;
  color: #2a7a55;
  transition: transform 0.2s;
  display: inline-block;
}
.log-minimized .log-toggle-arrow { transform: rotate(180deg); }

/* Unread dot */
.log-unread-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ff8800;
  box-shadow: 0 0 5px #ff8800;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.2s;
  animation: logDotPulse 0.8s ease-in-out infinite alternate;
}
.log-unread-dot.visible { opacity: 1; }
@keyframes logDotPulse {
  from { opacity: 1; box-shadow: 0 0 5px #ff8800; }
  to   { opacity: 0.3; box-shadow: 0 0 2px #ff8800; }
}
/* Crit dot — red */
.log-unread-dot.dot-crit {
  background: #ff2222;
  box-shadow: 0 0 5px #ff2222;
  animation: logDotPulseCrit 0.5s ease-in-out infinite alternate;
}
@keyframes logDotPulseCrit {
  from { opacity: 1; box-shadow: 0 0 8px #ff2222; }
  to   { opacity: 0.2; box-shadow: 0 0 2px #ff2222; }
}

.log-body {
  padding: 3px 10px 4px 10px;
  overflow-y: auto;
  flex: 1;
}
.log-lines {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.log-line {
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.log-ts {
  color: #2a7a55;
  margin-right: 8px;
  font-size: 0.72rem;
}

/* padding-bottom no longer needed — log is in normal flow */

/* ═══════════════════════════════════════════════════════════════
   PERIMETER SENSOR ZONES
═══════════════════════════════════════════════════════════════ */
.sensor-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 4px;
  border: 1px solid #0d3a20;
  border-radius: 4px;
  background: rgba(0,0,0,0.3);
  font-family: 'VT323', monospace;
  color: #2a7a55;
  letter-spacing: 1px;
  transition: border-color 0.2s, background 0.2s;
  cursor: default;
}
.sensor-zone.sensor-alert {
  border-color: #ff8800;
  background: rgba(255,136,0,0.08);
  color: #ff8800;
  animation: sensorAlert 0.5s ease-in-out infinite alternate;
}
@keyframes sensorAlert {
  from { box-shadow: 0 0 0 transparent; }
  to   { box-shadow: 0 0 8px rgba(255,136,0,0.4); }
}
.sensor-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #1a4a2e;
  transition: background 0.2s, box-shadow 0.2s;
}
.sensor-alert .sensor-dot {
  background: #ff8800;
  box-shadow: 0 0 6px #ff8800;
}

/* ═══════════════════════════════════════════════════════════════
   THREAT ROWS — coloured border by type
═══════════════════════════════════════════════════════════════ */
.threat-row { border-radius: 3px; }

/* HUD sec pulse */
@keyframes hudSecPulse {
  from { opacity: 1; }
  to   { opacity: 0.4; }
}

/* ── Difficulty screen ──────────────────────────────────────────── */
.diff-card:hover {
  background: rgba(20,253,206,0.04) !important;
}

/* ── Notifications ──────────────────────────────────────────────── */
#notif-container {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 5px;
  pointer-events: none;
  max-width: 220px;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile & Tablet
   Strategy: CSS-only, no JS changes.
   - ≤768px (mobile): remove CRT bezel, full-screen terminal
   - ≤480px (small mobile): tighter spacing, smaller fonts
   ═══════════════════════════════════════════════════════════════ */

/* ── Tablet (≤900px) — already handled for dept-layout above ── */

/* ── Mobile (≤768px) ─────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Remove bezel — full screen terminal on mobile */
  body { overflow: auto; }

  .monitor-shell {
    background: var(--bg);
  }

  /* Remove the physical CRT frame border/shadow on mobile */
  .monitor-shell .frame {
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Hide CRT control strip on mobile — no room */
  .crt-controls { display: none !important; }

  /* Frame fills full viewport */
  .monitor-shell .frame {
    flex: 1 1 0 !important;
    min-height: 0;
  }

  /* Scanlines/glow still apply but rounded corners removed */
  .scanlines { border-radius: 0 !important; }

  /* ── Nav: scrollable horizontally on mobile ── */
  .nav-bar { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .nav-list { flex-wrap: nowrap; }
  .nav-list li a { padding: 0.5rem 0.7rem; font-size: 0.8rem; letter-spacing: 1px; white-space: nowrap; }

  /* ── HUD bar: wrap on mobile ── */
  .hud-bar { flex-wrap: wrap; font-size: 0.72rem; }
  .hud-item { padding: 4px 8px; }

  /* ── Game container: less padding ── */
  .game-container { padding: 0 0.75rem 1rem 0.75rem; }

  /* ── Dept layout: single column ── */
  .dept-layout {
    grid-template-columns: 1fr !important;
    gap: 0.75rem;
  }
  .dept-sidebar { flex-direction: column; }

  /* ── Dept 3D panel: shorter on mobile ── */
  .dept-canvas { height: 140px !important; }
  .dept-3d-panel { min-height: 0; }

  /* ── Typography ── */
  h1 { font-size: 2rem !important; }
  h2 { font-size: 0.8rem !important; }

  /* ── Panels ── */
  .panel { padding: 0.6rem 0.75rem; }
  .panel-title { font-size: 0.7rem; }

  /* ── Stat rows ── */
  .stat-row { font-size: 0.8rem; gap: 0.5rem; }

  /* ── Buttons ── */
  .btn { font-size: 0.85rem; padding: 5px 12px; }

  /* ── Event log ── */
  .event-log-bar { font-size: 0.7rem; }
  .log-header { padding: 3px 8px; }

  /* ── Status screen facility map ── */
  #facility-map { transform: scale(0.85); transform-origin: top left; }

  /* ── Security camera: full width on mobile ── */
  #sec-cam-canvas { max-height: 200px !important; }

  /* ── Workshop grid: single column ── */
  .dept-main > div[style*="grid-template-columns:1fr 1fr"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

/* ── Small mobile (≤480px) ───────────────────────────────────── */
@media (max-width: 480px) {

  body { font-size: 18px; }

  .nav-list li a { padding: 0.4rem 0.55rem; font-size: 0.72rem; letter-spacing: 0; }
  .hud-bar { font-size: 0.65rem; }
  .hud-item { padding: 3px 6px; }

  h1 { font-size: 1.6rem !important; }

  .game-container { padding: 0 0.5rem 0.75rem 0.5rem; }

  .panel { padding: 0.5rem; }

  /* Oscilloscope narrower */
  #hud-oscilloscope { max-width: 120px; }

  /* Nav: even more compact */
  .nav-list li a { padding: 0.35rem 0.45rem; font-size: 0.65rem; }

  /* Dept 3D panel hidden on very small screens to save space */
  .dept-3d-panel { display: none; }

  /* Stat rows tighter */
  .stat-row { font-size: 0.72rem; }

  /* Buttons */
  .btn { font-size: 0.8rem; padding: 4px 10px; }
  .btn-sm { font-size: 0.72rem; padding: 2px 7px; }

  /* Security screen: stack cam + threats vertically */
  #sec-cam-canvas { max-height: 160px !important; }

  /* Lore + difficulty screens */
  .piece.output { padding: 0.75rem !important; }
}

/* ── Touch improvements ──────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* Bigger tap targets on touch devices */
  .btn { min-height: 38px; }
  .nav-list li a { min-height: 40px; display: flex; align-items: center; }
  .cam-btn { min-height: 36px; }

  /* Remove hover effects that don't make sense on touch */
  .btn:hover:not(:disabled) { background: transparent; color: inherit; }
  .nav-list li a:hover { background: transparent; color: var(--dim); }
  .nav-list li a.active:hover { background: rgba(20,253,206,0.07); color: var(--hi); }
}

/* ── Security screen responsive ─────────────────────────────── */
@media (max-width: 600px) {
  .sec-split { flex-direction: column !important; }
  .sec-cam-col { flex: none !important; width: 100% !important; }
}

/* ── Difficulty screen mobile fixes ─────────────────────────── */
@media (max-width: 768px) {
  /* Remove excess centering space — stick to top */
  #diff-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }

  /* Difficulty wrapper — top-aligned not centred vertically */
  .piece.output[style*="justify-content:center"] {
    justify-content: flex-start !important;
    padding-top: 1.2rem !important;
    overflow-y: auto;
  }
}

/* ── Nav bar mobile — wrap into 2 rows ───────────────────────── */
@media (max-width: 768px) {
  .nav-bar { overflow-x: visible !important; }
  .nav-list {
    flex-wrap: wrap !important;
    width: 100%;
  }
  .nav-list li { flex: 1 1 auto; }
  .nav-list li a {
    padding: 0.45rem 0.4rem !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.5px !important;
    text-align: center;
    border-right: 1px solid var(--muted);
    border-bottom: 1px solid var(--muted);
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .nav-list li { flex: 1 1 25%; } /* ~4 per row */
  .nav-list li a {
    font-size: 0.6rem !important;
    padding: 0.4rem 0.2rem !important;
    letter-spacing: 0 !important;
  }
}

/* ── HUD bar mobile — prevent overflow ──────────────────────── */
@media (max-width: 768px) {
  .hud-bar {
    height: auto !important;
    min-height: 26px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hud-bar::-webkit-scrollbar { display: none; }
  .hud-item { white-space: nowrap; flex-shrink: 0; font-size: 0.68rem; padding: 4px 6px; }
  /* Hide oscilloscope on small screens — it breaks layout */
  .hud-item.hud-osc { display: none; }
}

/* ── Nav icons mobile — icon only, hide text ─────────────────── */
@media (max-width: 768px) {
  .nav-label { display: none; }
  .nav-list li { flex: 1 1 auto; min-width: 0; }
  .nav-list li a {
    justify-content: center;
    padding: 0.5rem 0.3rem !important;
    gap: 0 !important;
  }
  .nav-list li a span[style*="width:13px"] {
    width: 16px !important;
    height: 16px !important;
    opacity: 1 !important;
  }
}

/* ── Start/Welcome screens — force full height centering mobile ─ */
@media (max-width: 768px) {
  /* Ensure .game div fills frame height */
  .game {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
  }
  /* piece output fills .game and centres content */
  .piece.output {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    overflow-y: auto;
  }
  /* Start/welcome/loader — keep vertical centering */
  .piece.output[style*="justify-content:center"] {
    justify-content: center !important;
    min-height: 100%;
  }
}

/* ── Music player HUD ───────────────────────────────────────── */
.hud-music {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  border-left: 1px solid var(--muted);
  cursor: pointer;
  transition: background 0.15s;
  margin-left: auto;
}
.hud-music:hover { background: rgba(20,253,206,0.05); }
@media (max-width: 768px) { .hud-music { display: none; } }

/* ── Language toggle switch ──────────────────────────────────── */
.lang-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: 10px;
}

.lang-opt {
  font-family: 'VT323', monospace;
  font-size: 0.6rem;
  letter-spacing: 1.5px;
  color: #1c2e1c;
  transition: color 0.2s, text-shadow 0.2s;
  user-select: none;
  cursor: pointer;
}

.lang-opt.lang-active {
  color: #14fdce;
  text-shadow: 0 0 5px rgba(20,253,206,0.8), 0 0 10px rgba(20,253,206,0.3);
  animation: lang-opt-breathe 3s ease-in-out infinite;
}

@keyframes lang-opt-breathe {
  0%, 100% { text-shadow: 0 0 4px rgba(20,253,206,0.6), 0 0 8px rgba(20,253,206,0.2); }
  50%       { text-shadow: 0 0 8px rgba(20,253,206,1),   0 0 16px rgba(20,253,206,0.5); }
}

.lang-switch {
  display: block;
  cursor: pointer;
  position: relative;
}

#lang-input { display: none; }

.lang-rocker {
  display: block;
  width: 34px;
  height: 16px;
  background: radial-gradient(ellipse at 40% 30%, #2e2e2e, #0f0f0f);
  border: 2px solid #0d0d0d;
  border-radius: 3px;
  position: relative;
  box-shadow:
    0 2px 5px rgba(0,0,0,0.8),
    inset 0 1px 2px rgba(255,255,255,0.05),
    0 0 0 1px #1a1a1a;
}

/* knob always glows — toggle is always active (one lang always selected) */
.lang-knob {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle at 38% 32%, #3c3c3c, #161616);
  border: 1px solid rgba(20,253,206,0.45);
  border-radius: 2px;
  transition: left 0.12s ease;
  box-shadow: 0 0 5px rgba(20,253,206,0.38), 0 1px 3px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.07);
  animation: lang-knob-breathe 3s ease-in-out infinite;
}

@keyframes lang-knob-breathe {
  0%, 100% { box-shadow: 0 0 4px rgba(20,253,206,0.3),  0 1px 3px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.07); }
  50%       { box-shadow: 0 0 7px rgba(20,253,206,0.65), 0 1px 3px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.07); }
}

#lang-input:checked + .lang-rocker .lang-knob {
  left: 19px;
}

@media (max-width: 768px) {
  .lang-toggle-wrap { display: none; }
}

/* ── Per-element language glitch animation ───────────────────── */
@keyframes lang-glitch {
  0%   { filter:brightness(1);   transform:translateX(0);    opacity:1;   clip-path:none; }
  18%  { filter:brightness(2.8); transform:translateX(-2px); opacity:0.6; clip-path:inset(8% 0 24% 0); }
  36%  { filter:brightness(0.2); transform:translateX(3px);  opacity:0.8; clip-path:inset(30% 0 4% 0); }
  54%  { filter:brightness(1.9); transform:translateX(-1px); opacity:1;   clip-path:none; }
  72%  { filter:brightness(1);   transform:translateX(2px);  opacity:0.9; }
  88%  { filter:brightness(1.3); transform:translateX(-1px); opacity:1;   }
  100% { filter:brightness(1);   transform:translateX(0);    opacity:1;   clip-path:none; }
}
.lang-glitch {
  animation: lang-glitch 0.28s ease forwards;
  display: inline-block;
}