/* ================================================================
   ESCAPE THE MATRIX — Stylesheet
   Futuristic cyberpunk terminal aesthetic
   ================================================================

   TABLE OF CONTENTS
   -----------------
   1.  CSS Variables (Design Tokens)
   2.  Reset & Base
   3.  Custom Cursor
   4.  Matrix Rain Canvas
   5.  CRT & Scanline Overlay
   6.  Screen Manager
   7.  Boot Screen
   8.  Main Menu
   9.  Buttons
   10. Difficulty Selection
   11. Game Layout — Header
   12. Game Layout — Terminal Panel
   13. Game Layout — Side Panel
   14. Firewall Node Grid (Level 4)
   15. Glitch Effect
   16. Result Screens (Victory / Game Over)
   17. AI Message
   18. Achievement Popup
   19. Level-Specific: Scan Result (L1) & Password Slots
   20. Animations (Keyframes)
   21. Responsive / Media Queries
   ================================================================ */

/* ── 1. CSS Variables (Design Tokens) ─────────────────────────── */
:root {
  /* Palette */
  --g: #00ff41; /* Matrix green */
  --gd: #00cc33; /* Green dark */
  --gdk: #001a05; /* Green very dark */
  --c: #00d4ff; /* Cyan */
  --cd: #007a93; /* Cyan dark */
  --r: #ff0040; /* Red */
  --rd: #990026; /* Red dark */
  --o: #ff8c00; /* Orange / warning */
  --bg: #000; /* Background black */
  --bgp: rgba(0, 12, 2, 0.88);

  /* Borders / fills */
  --b: rgba(0, 255, 65, 0.25);
  --bb: rgba(0, 255, 65, 0.6);

  /* Typography */
  --fm: "Share Tech Mono", "Courier New", monospace;
  --fh: "Orbitron", monospace;

  /* Glow shadows */
  --sg:
    0 0 8px rgba(0, 255, 65, 0.6), 0 0 20px rgba(0, 255, 65, 0.3),
    0 0 40px rgba(0, 255, 65, 0.1);
  --sc: 0 0 8px rgba(0, 212, 255, 0.6), 0 0 20px rgba(0, 212, 255, 0.3);
  --sr: 0 0 8px rgba(255, 0, 64, 0.6), 0 0 20px rgba(255, 0, 64, 0.3);
}

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

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 255, 65, 0.15) transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--g);
  font-family: var(--fm);
  font-size: 14px;
}

/* ── 3. Custom Cursor ─────────────────────────────────────────── */
.cur {
  position: fixed;
  width: 10px;
  height: 10px;
  background: var(--g);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  box-shadow: var(--sg);
  transition:
    width 0.15s,
    height 0.15s;
  mix-blend-mode: screen;
}

/* ── 4. Matrix Rain Canvas ────────────────────────────────────── */
#mc {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.12;
}

/* ── 5. CRT & Scanline Overlay ────────────────────────────────── */
.crt {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.06) 2px,
    rgba(0, 0, 0, 0.06) 4px
  );
}

.crt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 55%,
    rgba(0, 0, 0, 0.7) 100%
  );
}

/* Scrolling scanline */
.scl {
  position: fixed;
  top: -4px;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(0, 255, 65, 0.04);
  z-index: 2;
  animation: scl 10s linear infinite;
}

/* ── 6. Screen Manager ────────────────────────────────────────── */
#app {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
}

.scr {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.scr.on {
  display: flex;
}

/* ── 7. Boot Screen ───────────────────────────────────────────── */
#sboot {
  justify-content: flex-start;
  padding: 50px 40px;
  font-size: 13px;
  line-height: 1.9;
  align-items: flex-start;
}

/* Boot logo */
.blogo {
  font-family: var(--fh);
  font-size: clamp(22px, 5vw, 52px);
  font-weight: 900;
  color: var(--g);
  text-shadow: var(--sg);
  letter-spacing: 0.12em;
  margin-bottom: 40px;
  width: 100%;
  text-align: center;
}

/* Boot log container */
.blog {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

/* Boot log line — hidden until revealed */
.bl {
  opacity: 0;
  transform: translateX(-15px);
  transition:
    opacity 0.25s,
    transform 0.25s;
}

.bl.v {
  opacity: 1;
  transform: translateX(0);
}

/* Boot log inline status badges */
.bl .px {
  color: var(--c);
}
.bl .ok {
  color: var(--g);
  margin-left: 8px;
}
.bl .er {
  color: var(--r);
  margin-left: 8px;
}
.bl .wn {
  color: var(--o);
  margin-left: 8px;
}

/* Boot progress bar */
.bpw {
  width: 100%;
  max-width: 720px;
  margin: 28px auto 0;
}

.bpl {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--cd);
}

.pbw {
  height: 4px;
  background: rgba(0, 255, 65, 0.08);
  border: 1px solid var(--b);
  overflow: hidden;
}

.pbf {
  height: 100%;
  background: var(--g);
  box-shadow: var(--sg);
  width: 0%;
  transition: width 0.25s ease;
}

/* ── 8. Main Menu ─────────────────────────────────────────────── */
#smenu {
  text-align: center;
}

.mlogo {
  font-family: var(--fh);
  font-size: clamp(28px, 7vw, 80px);
  font-weight: 900;
  color: var(--g);
  text-shadow: var(--sg);
  letter-spacing: 0.15em;
  line-height: 1.1;
  margin-bottom: 8px;
  animation: pg 3s ease-in-out infinite;
}

.msub {
  font-family: var(--fh);
  font-size: clamp(9px, 1.5vw, 12px);
  color: var(--cd);
  letter-spacing: 0.4em;
  margin-bottom: 50px;
}

.mbtns {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}

.msave {
  margin-top: 30px;
  font-size: 11px;
  color: rgba(0, 255, 65, 0.35);
  letter-spacing: 0.15em;
}

/* ── 9. Buttons ───────────────────────────────────────────────── */
.btn {
  font-family: var(--fh);
  font-size: 12px;
  letter-spacing: 0.2em;
  padding: 13px 40px;
  background: transparent;
  border: 1px solid var(--gd);
  color: var(--g);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.2s;
  min-width: 260px;
  text-align: center;
  text-transform: uppercase;
  clip-path: polygon(
    0 0,
    calc(100% - 12px) 0,
    100% 12px,
    100% 100%,
    12px 100%,
    0 calc(100% - 12px)
  );
}

/* Hover shimmer sweep */
.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 255, 65, 0.12),
    transparent
  );
  transition: left 0.3s;
}

.btn:hover::before {
  left: 100%;
}

.btn:hover {
  border-color: var(--g);
  box-shadow:
    var(--sg),
    inset 0 0 20px rgba(0, 255, 65, 0.06);
  text-shadow: var(--sg);
}

.btn:active {
  transform: scale(0.97);
}

/* Button colour variants */
.btn-r {
  border-color: var(--rd);
  color: var(--r);
}
.btn-r:hover {
  border-color: var(--r);
  box-shadow: var(--sr);
  text-shadow: var(--sr);
}

.btn-c {
  border-color: var(--cd);
  color: var(--c);
}
.btn-c:hover {
  border-color: var(--c);
  box-shadow: var(--sc);
  text-shadow: var(--sc);
}

/* Small button variant */
.btn-sm {
  min-width: 120px;
  padding: 8px 20px;
  font-size: 10px;
}

/* ── 10. Difficulty Selection ─────────────────────────────────── */
#sdiff {
  text-align: center;
}

.dgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 700px;
  margin: 36px auto;
}

/* Difficulty card base */
.dc {
  padding: 22px 18px;
  border: 1px solid var(--b);
  cursor: pointer;
  transition: all 0.2s;
  background: var(--bgp);
  clip-path: polygon(
    0 0,
    calc(100% - 10px) 0,
    100% 10px,
    100% 100%,
    10px 100%,
    0 calc(100% - 10px)
  );
}

/* Difficulty card colours */
.dc.easy {
  border-color: rgba(0, 212, 255, 0.3);
  color: var(--c);
}
.dc.easy:hover,
.dc.easy.sel {
  border-color: var(--c);
  box-shadow: var(--sc);
  background: rgba(0, 212, 255, 0.05);
}

.dc.med {
  border-color: rgba(0, 255, 65, 0.3);
  color: var(--g);
}
.dc.med:hover,
.dc.med.sel {
  border-color: var(--g);
  box-shadow: var(--sg);
  background: rgba(0, 255, 65, 0.05);
}

.dc.hard {
  border-color: rgba(255, 0, 64, 0.3);
  color: var(--r);
}
.dc.hard:hover,
.dc.hard.sel {
  border-color: var(--r);
  box-shadow: var(--sr);
  background: rgba(255, 0, 64, 0.05);
}

.dn {
  font-family: var(--fh);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}

.dd {
  font-size: 11px;
  line-height: 1.7;
  opacity: 0.65;
}

/* ── 11. Game Layout — Header ─────────────────────────────────── */
#sgame {
  flex-direction: column;
  padding: 0;
  align-items: stretch;
  justify-content: flex-start;
}

.ghdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 18px;
  border-bottom: 1px solid var(--b);
  background: rgba(0, 8, 1, 0.95);
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 8px;
}

.hl {
  display: flex;
  align-items: center;
  gap: 16px;
}

.glogo {
  font-family: var(--fh);
  font-size: 13px;
  font-weight: 700;
  color: var(--g);
  letter-spacing: 0.1em;
}

.mbdg {
  font-size: 10px;
  padding: 3px 10px;
  border: 1px solid var(--cd);
  color: var(--c);
  letter-spacing: 0.15em;
  clip-path: polygon(
    0 0,
    calc(100% - 6px) 0,
    100% 6px,
    100% 100%,
    6px 100%,
    0 calc(100% - 6px)
  );
}

.hr {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.hst {
  font-size: 10px;
  color: rgba(0, 255, 65, 0.5);
  display: flex;
  align-items: center;
  gap: 5px;
}

.hst .v {
  color: var(--g);
}
.hst .v.wn {
  color: var(--o);
}
.hst .v.dng {
  color: var(--r);
  animation: blk 0.5s infinite;
}

/* Icon button (sound / menu) */
.ibtn {
  background: none;
  border: 1px solid var(--b);
  color: rgba(0, 255, 65, 0.5);
  cursor: pointer;
  padding: 4px 10px;
  font-size: 10px;
  font-family: var(--fm);
  transition: all 0.2s;
}

.ibtn:hover {
  border-color: var(--g);
  color: var(--g);
}

/* Main game body grid */
.gbdy {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 290px;
  overflow: hidden;
  min-height: 0;
}

/* ── 12. Game Layout — Terminal Panel ─────────────────────────── */
.tpnl {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--b);
  overflow: hidden;
  background: var(--bgp);
}

/* Terminal title bar */
.ttbar {
  padding: 7px 14px;
  border-bottom: 1px solid var(--b);
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(0, 8, 1, 0.8);
  flex-shrink: 0;
}

/* macOS-style traffic dots */
.tdot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.tdot-r {
  background: #ff5f57;
}
.tdot-y {
  background: #febc2e;
}
.tdot-g {
  background: #28c840;
}

.ttitle {
  font-family: var(--fh);
  font-size: 10px;
  color: rgba(0, 255, 65, 0.4);
  letter-spacing: 0.1em;
  flex: 1;
  text-align: center;
}

/* Terminal output area */
.tout {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  font-size: 12.5px;
  line-height: 1.75;
  scroll-behavior: smooth;
}

.tout::-webkit-scrollbar {
  width: 3px;
}
.tout::-webkit-scrollbar-track {
  background: transparent;
}
.tout::-webkit-scrollbar-thumb {
  background: rgba(0, 255, 65, 0.15);
}

/* Terminal line types */
.tl {
  margin-bottom: 1px;
  word-break: break-word;
}
.tl.cmd {
  color: var(--g);
}
.tl.out {
  color: rgba(0, 255, 65, 0.65);
}
.tl.suc {
  color: var(--g);
  text-shadow: 0 0 6px rgba(0, 255, 65, 0.4);
}
.tl.err {
  color: var(--r);
}
.tl.wrn {
  color: var(--o);
}
.tl.inf {
  color: var(--c);
}
.tl.ai {
  color: var(--c);
}
.tl.sys {
  color: rgba(0, 255, 65, 0.35);
  font-size: 11px;
}
.tl.hl {
  color: #fff;
}
.tl.emp {
  height: 12px;
}

/* Command prompt symbols */
.psym {
  color: var(--g);
  margin-right: 4px;
}
.pusr {
  color: var(--cd);
}

/* Input area */
.tia {
  padding: 9px 14px;
  border-top: 1px solid var(--b);
  display: flex;
  align-items: center;
  background: rgba(0, 3, 0, 0.95);
  flex-shrink: 0;
}

.tpr {
  color: var(--g);
  margin-right: 7px;
  white-space: nowrap;
  font-size: 13px;
  user-select: none;
}

.ti {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--g);
  font-family: var(--fm);
  font-size: 13px;
  caret-color: transparent;
}

/* Blinking block cursor */
.cblk {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: var(--g);
  box-shadow: var(--sg);
  animation: blk 1s step-end infinite;
  vertical-align: middle;
  margin-left: 1px;
}

/* ── 13. Game Layout — Side Panel ─────────────────────────────── */
.spnl {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: rgba(0, 3, 0, 0.92);
}

.spnl::-webkit-scrollbar {
  width: 3px;
}
.spnl::-webkit-scrollbar-thumb {
  background: rgba(0, 255, 65, 0.1);
}

/* Side section block */
.ss {
  padding: 14px;
  border-bottom: 1px solid var(--b);
}

/* Section label with line */
.sst {
  font-family: var(--fh);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: rgba(0, 255, 65, 0.4);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sst::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--b);
}

/* Mission steps list */
.msteps {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mstep {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  padding: 7px 8px;
  border: 1px solid transparent;
  transition: all 0.3s;
  position: relative;
}

.mstep.done {
  border-color: rgba(0, 255, 65, 0.2);
  background: rgba(0, 255, 65, 0.04);
  color: rgba(0, 255, 65, 0.6);
}
.mstep.act {
  border-color: var(--g);
  background: rgba(0, 255, 65, 0.07);
  animation: sp 2s ease-in-out infinite;
}
.mstep.lck {
  opacity: 0.25;
}

.snum {
  width: 18px;
  height: 18px;
  border: 1px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-family: var(--fh);
  flex-shrink: 0;
}

.mstep.act .snum {
  animation: blk 1s infinite;
}

/* Trace bar */
.tbw {
  height: 6px;
  background: rgba(255, 0, 64, 0.08);
  border: 1px solid rgba(255, 0, 64, 0.2);
  overflow: hidden;
  margin-top: 8px;
}

.tbf {
  height: 100%;
  background: linear-gradient(90deg, var(--g) 0%, var(--o) 50%, var(--r) 100%);
  background-size: 200% 100%;
  transition: width 0.6s ease;
}

.tv {
  font-size: 11px;
  margin-top: 4px;
  text-align: right;
}
.tv.s {
  color: var(--g);
}
.tv.w {
  color: var(--o);
}
.tv.d {
  color: var(--r);
}

/* Attempt dots */
.adots {
  display: flex;
  gap: 5px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.adot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid var(--g);
  background: rgba(0, 255, 65, 0.15);
  transition: all 0.3s;
}

.adot.used {
  background: var(--r);
  border-color: var(--r);
  box-shadow: var(--sr);
}

/* Countdown timer display */
.tdsp {
  font-family: var(--fh);
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.08em;
  margin-top: 6px;
  color: var(--g);
  text-shadow: var(--sg);
  transition: color 0.3s;
}

.tdsp.wn {
  color: var(--o);
  text-shadow: 0 0 10px rgba(255, 140, 0, 0.5);
}
.tdsp.dng {
  color: var(--r);
  text-shadow: var(--sr);
  animation: shk 0.25s infinite;
}

/* ── 14. Firewall Node Grid (Level 4) ─────────────────────────── */
.ng {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

.fn {
  padding: 9px 12px;
  border: 1px solid var(--b);
  cursor: pointer;
  transition: all 0.18s;
  text-align: center;
  font-size: 11px;
  font-family: var(--fh);
  letter-spacing: 0.1em;
  clip-path: polygon(
    0 0,
    calc(100% - 7px) 0,
    100% 7px,
    100% 100%,
    7px 100%,
    0 calc(100% - 7px)
  );
  user-select: none;
}

.fn:hover {
  border-color: var(--c);
  background: rgba(0, 212, 255, 0.06);
  box-shadow: var(--sc);
  color: var(--c);
}
.fn.act {
  border-color: var(--g);
  background: rgba(0, 255, 65, 0.12);
  box-shadow: var(--sg);
  color: var(--g);
  animation: nf 0.3s;
}
.fn.err {
  border-color: var(--r);
  background: rgba(255, 0, 64, 0.1);
  box-shadow: var(--sr);
  color: var(--r);
  animation: nf 0.3s;
}
.fn.dis {
  pointer-events: none;
  opacity: 0.4;
}

/* Sequence display dots */
.seqd {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0;
}

.sn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--b);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fh);
  font-size: 11px;
  clip-path: polygon(
    0 0,
    calc(100% - 5px) 0,
    100% 5px,
    100% 100%,
    5px 100%,
    0 calc(100% - 5px)
  );
  transition: all 0.2s;
}

.sn.on {
  border-color: var(--g);
  background: rgba(0, 255, 65, 0.2);
  box-shadow: var(--sg);
  color: var(--g);
}

/* ── 15. Glitch Effect ────────────────────────────────────────── */
.glitch {
  position: relative;
  display: inline-block;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.glitch::before {
  color: var(--c);
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  animation: g1 4s infinite;
}

.glitch::after {
  color: var(--r);
  clip-path: polygon(0 66%, 100% 66%, 100% 100%, 0 100%);
  animation: g2 4s infinite;
}

/* ── 16. Result Screens (Victory / Game Over) ─────────────────── */
#svic,
#sgov {
  text-align: center;
}

.rst {
  max-width: 580px;
  animation: fi 0.6s ease;
}

.rtit {
  font-family: var(--fh);
  font-size: clamp(22px, 5vw, 56px);
  font-weight: 900;
  letter-spacing: 0.15em;
  line-height: 1.1;
  margin-bottom: 16px;
}

.rtit.suc {
  color: var(--g);
  text-shadow: var(--sg);
  animation: pg 2s infinite;
}
.rtit.fal {
  color: var(--r);
  text-shadow: var(--sr);
}

.rtxt {
  font-size: 12px;
  color: rgba(0, 255, 65, 0.65);
  line-height: 2.2;
  margin-bottom: 36px;
  letter-spacing: 0.04em;
}

.rbtns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Generic screen title / divider */
.stit {
  font-family: var(--fh);
  font-size: clamp(13px, 2.5vw, 22px);
  color: var(--g);
  letter-spacing: 0.2em;
  margin-bottom: 6px;
  text-shadow: 0 0 10px rgba(0, 255, 65, 0.4);
}

.sdiv {
  width: 100%;
  max-width: 500px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--g), transparent);
  margin: 14px auto;
}

/* ── 17. AI Message ───────────────────────────────────────────── */
.aim {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 7px 10px;
  border-left: 2px solid var(--c);
  background: rgba(0, 212, 255, 0.04);
  margin: 6px 0;
  font-size: 12px;
  color: var(--c);
}

.ail {
  font-family: var(--fh);
  font-size: 9px;
  letter-spacing: 0.15em;
  flex-shrink: 0;
  margin-top: 2px;
  font-weight: 700;
}

/* ── 18. Achievement Popup ────────────────────────────────────── */
.ach {
  position: fixed;
  top: 70px;
  right: 20px;
  padding: 10px 16px;
  border: 1px solid var(--g);
  background: rgba(0, 8, 1, 0.97);
  box-shadow: var(--sg);
  font-size: 11px;
  z-index: 500;
  transform: translateX(200%);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  clip-path: polygon(
    0 0,
    calc(100% - 8px) 0,
    100% 8px,
    100% 100%,
    8px 100%,
    0 calc(100% - 8px)
  );
}

.ach.sh {
  transform: translateX(0);
}

.acht {
  font-family: var(--fh);
  font-size: 9px;
  color: var(--c);
  letter-spacing: 0.2em;
  margin-bottom: 3px;
}

/* ── 19. Level-Specific Elements ──────────────────────────────── */

/* Scan result chars (Level 1) */
.scanr {
  display: flex;
  gap: 8px;
  margin: 8px 0;
  flex-wrap: wrap;
}

.sc-char {
  width: 22px;
  height: 28px;
  border: 1px solid var(--b);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: all 0.3s;
  font-family: var(--fh);
}

.sc-char.rev {
  border-color: var(--g);
  background: rgba(0, 255, 65, 0.12);
  color: var(--g);
  box-shadow: 0 0 6px rgba(0, 255, 65, 0.3);
}
.sc-char.hit {
  border-color: var(--o);
  background: rgba(255, 140, 0, 0.1);
  color: var(--o);
}
.sc-char.mis {
  border-color: rgba(255, 0, 64, 0.3);
  color: rgba(255, 0, 64, 0.4);
}

/* Password slots */
.pwslots {
  display: flex;
  gap: 6px;
  margin: 10px 0;
}

.pws {
  width: 28px;
  height: 36px;
  border: 1px solid var(--b);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-family: var(--fh);
  transition: all 0.3s;
}

.pws.k {
  border-color: var(--g);
  color: var(--g);
  background: rgba(0, 255, 65, 0.1);
}

/* ── 20. Animations (Keyframes) ───────────────────────────────── */

/* Scanline scroll */
@keyframes scl {
  0% {
    top: -4px;
  }
  100% {
    top: 100%;
  }
}

/* Logo pulse glow */
@keyframes pg {
  0%,
  100% {
    text-shadow:
      0 0 10px rgba(0, 255, 65, 0.5),
      0 0 20px rgba(0, 255, 65, 0.2);
  }
  50% {
    text-shadow:
      0 0 20px rgba(0, 255, 65, 0.9),
      0 0 50px rgba(0, 255, 65, 0.5),
      0 0 90px rgba(0, 255, 65, 0.2);
  }
}

/* Blink */
@keyframes blk {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* Mission step pulse */
@keyframes sp {
  0%,
  100% {
    border-color: var(--g);
  }
  50% {
    border-color: rgba(0, 255, 65, 0.3);
  }
}

/* Timer shake */
@keyframes shk {
  0%,
  100% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(-2px);
  }
  70% {
    transform: translateX(2px);
  }
}

/* Node flash */
@keyframes nf {
  0% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

/* Glitch channels */
@keyframes g1 {
  0%,
  88%,
  100% {
    transform: none;
    opacity: 0;
  }
  89% {
    transform: translateX(-3px);
    opacity: 1;
  }
  91% {
    transform: translateX(3px);
    opacity: 1;
  }
  93% {
    transform: none;
    opacity: 0;
  }
}

@keyframes g2 {
  0%,
  83%,
  100% {
    transform: none;
    opacity: 0;
  }
  84% {
    transform: translateX(3px);
    opacity: 1;
  }
  86% {
    transform: translateX(-3px);
    opacity: 1;
  }
  88% {
    transform: none;
    opacity: 0;
  }
}

/* Result screen entrance */
@keyframes fi {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── 21. Responsive / Media Queries ───────────────────────────── */
@media (max-width: 800px) {
  .gbdy {
    grid-template-columns: 1fr;
  }
  .spnl {
    display: none;
  }
  .blogo {
    font-size: 18px;
  }
}

@media (max-width: 500px) {
  .dgrid {
    grid-template-columns: 1fr;
  }
  .mlogo {
    font-size: 22px;
  }
}