:root {
  color-scheme: dark;
  --cyan: #29e8ff;
  --cyan2: #0b7e9d;
  --violet: #a878ff;
  --red: #ff3158;
  --green: #77ffad;
  --ink: #05090f;
  --panel: rgba(7, 16, 28, .96);
  --line: rgba(64, 221, 255, .28);
}

* { box-sizing: border-box; }

html.resume-game body {
  background: #02060b;
}

html.resume-game #main-menu,
html.resume-game #game-shell {
  visibility: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  color: #eafcff;
  background:
    radial-gradient(circle at 50% 0%, #112c43 0, transparent 42%),
    #03070d;
  font-family: "Rajdhani", sans-serif;
}

button, textarea, input { font: inherit; }

.main-menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #02060b;
}

.main-menu::after {
  content: "LEARN THE CODE  •  REPAIR THE SYSTEM";
  position: absolute;
  left: 50%;
  bottom: 4.3%;
  z-index: 4;
  transform: translateX(-50%);
  padding: 4px 16px;
  color: #c9e6ec;
  background: rgba(2, 10, 16, .82);
  font: 600 clamp(10px, 1.15vw, 18px) "JetBrains Mono", monospace;
  letter-spacing: .28em;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(50, 220, 255, .8);
}

.menu-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
  transform: none;
}

.menu-logo {
  position: absolute;
  z-index: 2;
  top: clamp(14px, 2.3vh, 28px);
  right: clamp(14px, 2vw, 34px);
  width: clamp(145px, 12vw, 220px);
  height: auto;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 12px;
  background: white;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .48);
}

.menu-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(1, 4, 8, .72), transparent 38%),
    radial-gradient(circle at center, transparent 58%, rgba(0, 0, 0, .2));
  pointer-events: none;
}

.menu-content {
  position: absolute;
  right: clamp(28px, 5vw, 90px);
  bottom: clamp(32px, 7vh, 80px);
  width: min(390px, 80vw);
}

.menu-kicker {
  margin-bottom: 17px;
  color: #8deafa;
  font: 600 11px "JetBrains Mono", monospace;
  letter-spacing: .18em;
}

.menu-buttons { display: grid; gap: 10px; }
.menu-buttons button, .menu-inline {
  position: relative;
  padding: 14px 18px;
  overflow: hidden;
  color: #eafcff;
  text-align: left;
  border: 1px solid rgba(49, 226, 255, .42);
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(5, 25, 37, .95), rgba(5, 14, 24, .78));
  box-shadow: inset 3px 0 var(--cyan);
  cursor: pointer;
  font: 700 15px "JetBrains Mono", monospace;
  letter-spacing: .13em;
}
.menu-buttons button:hover, .menu-inline:hover {
  color: #031016;
  background: var(--cyan);
  box-shadow: 0 0 28px rgba(41, 232, 255, .42);
}
.menu-buttons button:disabled { opacity: .42; cursor: not-allowed; }
.menu-buttons button:disabled:hover { color: #eafcff; background: #07141eee; box-shadow: inset 3px 0 #54707a; }
.menu-footer { margin-top: 17px; color: #ffffff; font: 500 9px "JetBrains Mono", monospace; letter-spacing: .13em; }

#game-shell {
  height: 100vh;
  display: grid;
  grid-template-rows: 86px 1fr;
}

.hud {
  z-index: 2;
  display: grid;
  grid-template-columns: 1.4fr 1fr 160px;
  align-items: center;
  padding: 10px 24px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, #050a12 0%, #081828 50%, #050a12 100%);
  box-shadow: 0 8px 28px #000a;
}

.eyebrow, .objective span, .progress span {
  display: block;
  color: #76a8b8;
  font: 600 11px/1.2 "JetBrains Mono", monospace;
  letter-spacing: .17em;
}

h1 { margin: 2px 0 0; font-size: 28px; line-height: 1; letter-spacing: .08em; }
h1 span { color: var(--red); }
h1 b { color: var(--violet); font-size: 16px; margin-left: 10px; }
.objective { padding-left: 22px; border-left: 1px solid var(--line); }
.objective strong { color: #ffffff; font-size: 18px; }
.progress { text-align: right; }
.progress strong { color: white; font: 700 24px "JetBrains Mono", monospace; }
.progress i { color: #ffffff; font-style: normal; }

#world-wrap { min-height: 0; position: relative; display: grid; place-items: center; }
#world {
  display: block;
  width: min(100vw, calc((100vh - 86px) * 1.7778));
  max-height: calc(100vh - 86px);
  background: #c8a847;
  box-shadow: 0 0 60px #000;
}

.controls {
  position: absolute;
  left: 22px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font: 600 11px "JetBrains Mono", monospace;
  letter-spacing: .12em;
}

kbd {
  min-width: 30px;
  padding: 6px 8px;
  color: white;
  text-align: center;
  border: 1px solid #4fe6ff88;
  border-radius: 4px;
  background: #071824dd;
  box-shadow: inset 0 0 12px #20c9ff20;
  font: 700 12px "JetBrains Mono", monospace;
}

.prompt {
  position: absolute;
  left: 50%;
  bottom: 46px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border: 1px solid var(--cyan);
  border-radius: 5px;
  background: #04101aee;
  box-shadow: 0 0 24px #24dfff55;
  font: 700 12px "JetBrains Mono", monospace;
  letter-spacing: .15em;
}

.toast {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 18px;
  color: var(--green);
  border: 1px solid #77ffad66;
  background: #071a13ed;
  font: 600 13px "JetBrains Mono", monospace;
}
.toast.keycard-event {
  display:flex;align-items:center;gap:14px;padding:10px 20px 10px 12px;color:#fff;
  border-color:#ffca62;background:#10202ced;box-shadow:0 0 30px rgba(255,202,98,.3);
}
.toast.keycard-event::before { content:"";width:0;height:0;flex:0 0 auto; }

.hidden { display: none !important; }

.overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(0, 4, 9, .8);
  backdrop-filter: blur(5px);
}

.overlay.menu-overlay {
  z-index: 80;
  background: rgba(0, 4, 9, .9);
}

.elevator-overlay {
  background:
    radial-gradient(circle at 50% 18%, rgba(106, 220, 255, .14), transparent 32%),
    rgba(0, 4, 9, .9);
}
.elevator-cabin {
  position: relative;
  width: min(1180px, 95vw);
  height: min(740px, calc(100vh - 42px));
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 360px;
  grid-template-rows: 90px 1fr 64px;
  border: 2px solid #62798a;
  border-radius: 8px;
  background:
    linear-gradient(90deg, #111b23 0 2%, #293a46 2% 4%, #121c24 4% 96%, #293a46 96% 98%, #111b23 98%),
    #111a22;
  box-shadow: 0 32px 90px #000, inset 0 0 90px #000a;
}
.elevator-ceiling {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 2px solid #516b7d;
  background: linear-gradient(#3b4c58, #17232c);
}
.elevator-ceiling i {
  width: 160px;
  height: 12px;
  border-radius: 12px;
  background: #c9f8ff;
  box-shadow: 0 0 26px #5de8ff;
}
.elevator-display {
  position: absolute;
  z-index: 2;
  top: 108px;
  left: 50%;
  width: min(480px, 42vw);
  transform: translateX(-72%);
  padding: 12px 22px;
  text-align: center;
  border: 1px solid #4fe5ff88;
  background: #05131bed;
  box-shadow: 0 0 24px #22d5ff22;
}
.elevator-display span,
.elevator-display small { display: block; color: #8fb8c7; font-size: 11px; letter-spacing: .16em; }
.elevator-display strong { display: block; margin: 7px 0; color: #ffffff; font-size: 18px; }
.elevator-display small { color: #72f5a7; }
.elevator-doors {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-self: end;
  justify-self: center;
  width: min(660px, 92%);
  height: 84%;
  border: 5px solid #415563;
  border-bottom: 0;
  background: #101820;
  box-shadow: inset 0 0 50px #000;
}
.elevator-doors div:first-child { border-right: 2px solid #0a1015; background: linear-gradient(100deg, #24343f, #101920); }
.elevator-doors div:nth-child(2) { border-left: 2px solid #475a66; background: linear-gradient(80deg, #101920, #24343f); }
.elevator-doors span {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  color: #70e9ff55;
  font: 800 76px "JetBrains Mono", monospace;
  letter-spacing: .08em;
}
.elevator-panel {
  grid-column: 2;
  grid-row: 2 / 4;
  margin: 20px;
  padding: 18px;
  border: 2px solid #526a79;
  border-radius: 7px;
  background: linear-gradient(145deg, #1b2a34, #0c141b);
  box-shadow: inset 0 0 30px #0009;
}
.elevator-panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 13px;
  color: #ffffff;
  letter-spacing: .15em;
  border-bottom: 1px solid #526a79;
}
.elevator-panel .close { position: static; }
.floor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.floor-button {
  min-height: 72px;
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px;
  color: #ffffff;
  text-align: left;
  border: 1px solid #476273;
  border-radius: 5px;
  background: #101c24;
}
.floor-button b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid #67808f;
  border-radius: 50%;
  color: #ffffff;
  font-size: 16px;
}
.floor-button span { color: #b8c8d2; font-size: 9px; line-height: 1.45; letter-spacing: .06em; }
.floor-button.current {
  border-color: #69f3a2;
  background: #0c2b20;
  box-shadow: 0 0 15px #48e88b22;
  cursor: pointer;
}
.floor-button.current b { color: #82ffb5; border-color: #82ffb5; box-shadow: 0 0 12px #54ee9555; }
.floor-button.unlocked {
  border-color: #31dfff;
  background: #092633;
  box-shadow: 0 0 17px #29e8ff33;
  cursor: pointer;
}
.floor-button.unlocked b {
  color: #7ceeff;
  border-color: #42dff5;
  box-shadow: 0 0 12px #29e8ff44;
}
.floor-button.unlocked span { color: #ffffff; }
.floor-button:disabled { opacity: .48; cursor: not-allowed; }
.elevator-panel p { margin: 14px 2px 0; color: #8da2af; font-size: 10px; line-height: 1.5; }
.elevator-exit {
  grid-column: 1;
  grid-row: 3;
  align-self: center;
  justify-self: center;
  min-width: 220px;
  padding: 12px 22px;
  color: #ffffff;
  border: 1px solid #58dff7;
  background: #0b2732;
}

.battle-overlay {
  padding: 18px;
  background:
    radial-gradient(circle at 66% 28%, rgba(82, 30, 175, .22), transparent 30%),
    linear-gradient(rgba(0, 5, 14, .94), rgba(0, 3, 9, .98));
}
.battle-shell {
  width: min(1420px, 98vw);
  height: min(900px, calc(100vh - 34px));
  overflow: hidden;
  display: grid;
  grid-template-rows: 74px minmax(330px, 1fr) 295px;
  border: 1px solid #32dff477;
  border-radius: 8px;
  background:
    linear-gradient(rgba(17, 45, 68, .62) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 45, 68, .62) 1px, transparent 1px),
    #040c17;
  background-size: 52px 52px;
  box-shadow: 0 30px 100px #000, inset 0 0 80px #091d3a;
}
.battle-header {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid #36dff455;
  background: rgba(4, 12, 23, .96);
}
.battle-header span,
.battle-mission span,
.cybercards > span {
  color: #8eeeff;
  font: 700 11px "JetBrains Mono", monospace;
  letter-spacing: .14em;
}
.battle-header h2 { margin: 3px 0 0; color: #ffffff; font-size: 25px; }
.battle-header-status { display: flex; align-items: center; gap: 16px; }
.battle-header-status button,
.cybercards button,
#execute-battle-command {
  color: #ffffff;
  border: 1px solid #2edff2;
  border-radius: 4px;
  background: #092332;
  cursor: pointer;
}
.battle-header-status button { padding: 9px 13px; font-size: 11px; }
.battle-stage {
  min-height: 0;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
  padding: 18px;
  overflow: hidden;
}
.party-column {
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(3, 1fr) 52px;
  gap: 9px;
}
.party-member {
  min-height: 0;
  display: grid;
  grid-template-columns: 84px 1fr;
  align-items: center;
  overflow: hidden;
  padding: 6px 13px;
  border: 1px solid #34536a;
  border-left: 5px solid #34536a;
  border-radius: 6px;
  background: rgba(6, 20, 33, .94);
  opacity: .72;
  transition: .2s ease;
}
.party-member.active {
  opacity: 1;
  border-color: #4be9ff;
  border-left-color: #8effbd;
  box-shadow: 0 0 25px #2ddff32e;
  transform: translateX(5px);
}
.party-member img {
  width: 72px;
  height: 92px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 0 10px #24dfff55);
}
.party-member[data-member="operator"] img {
  width: 64px;
  height: 86px;
  object-fit: cover;
  object-position: 51% 12%;
}
.party-member div { display: grid; }
.party-member span { color: #7c9aae; font: 700 9px "JetBrains Mono", monospace; letter-spacing: .12em; }
.party-member strong { color: #ffffff; font-size: 19px; }
.party-member small { color: #bcd0dc; font: 10px "JetBrains Mono", monospace; }
.party-sync {
  display: grid;
  grid-template-columns: 82px 1fr 42px;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font: 700 9px "JetBrains Mono", monospace;
}
.party-sync div,
.enemy-hp {
  height: 9px;
  overflow: hidden;
  border-radius: 8px;
  background: #142533;
}
.party-sync i,
.enemy-hp i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #32dff3, #74ffac);
  transition: width .35s ease;
}
.enemy-zone {
  position: relative;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 30px 16px;
  border: 1px solid #5d42a688;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 44%, rgba(89, 40, 190, .34), transparent 34%),
    linear-gradient(180deg, rgba(3, 11, 24, .68), rgba(6, 12, 25, .94));
}
.enemy-zone::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 64px;
  height: 35px;
  border: 2px solid #9d63ff66;
  border-radius: 50%;
  box-shadow: 0 0 30px #8e4fff66, inset 0 0 20px #8e4fff33;
}
.simulation-badge {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 14px;
  padding: 7px 10px;
  color: #d4c3ff;
  border: 1px solid #a978ff77;
  background: #160d2fd9;
  font: 700 9px "JetBrains Mono", monospace;
  letter-spacing: .1em;
}
#battle-enemy {
  z-index: 1;
  width: min(350px, 55%);
  height: calc(100% - 48px);
  min-height: 220px;
  object-fit: contain;
  filter: drop-shadow(0 0 22px #6c3eff99);
  transition: transform .25s ease, opacity .3s ease;
}
#battle-enemy.hit { transform: translateX(9px) rotate(1deg); }
#battle-enemy.defeated { transform: scale(.85); opacity: .2; filter: grayscale(1); }
.enemy-zone h3 { z-index: 2; margin: -4px 0 7px; color: #ffffff; font-size: 20px; letter-spacing: .08em; }
.enemy-hp { z-index: 2; width: min(520px, 84%); height: 10px; }
.enemy-hp i { background: linear-gradient(90deg, #9f52ff, #ff3b85); }
#enemy-hp-value { z-index: 2; margin-top: 6px; color: #ffffff; font: 700 10px "JetBrains Mono", monospace; }
.battle-console {
  min-height: 0;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  grid-template-rows: auto 52px 1fr;
  gap: 10px 16px;
  padding: 15px 18px;
  border-top: 1px solid #30dff455;
  background: rgba(4, 10, 18, .97);
}
.battle-mission {
  display: grid;
  gap: 3px;
  padding: 10px 13px;
  border-left: 4px solid #72ffad;
  background: #0b1b27;
}
.battle-mission strong { color: #ffffff; font-size: 17px; }
.battle-mission small { color: #b5c8d4; }
.cybercards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}
.cybercards > span { grid-column: 1 / -1; }
.cybercards button {
  padding: 7px 8px;
  font: 700 11px "JetBrains Mono", monospace;
}
.cybercards button:hover,
.cybercards button:focus,
#execute-battle-command:hover { color: #081116; background: #65ebff; }
.battle-command-line {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 44px 1fr 126px;
  overflow: hidden;
  border: 1px solid #355166;
  border-radius: 5px;
  background: #02070d;
}
.battle-command-line label {
  display: grid;
  place-items: center;
  color: #74ffac;
  font: 700 14px "JetBrains Mono", monospace;
}
#battle-command {
  min-width: 0;
  padding: 9px;
  color: #ffffff;
  outline: 0;
  border: 0;
  background: transparent;
  font: 600 14px "JetBrains Mono", monospace;
}
#execute-battle-command { border: 0; border-left: 1px solid #2edff2; border-radius: 0; }
#execute-battle-command:disabled,
.cybercards button:disabled { opacity: .38; cursor: not-allowed; }
#battle-log {
  grid-column: 1 / -1;
  min-height: 0;
  overflow: auto;
  margin: 0;
  padding: 10px 13px;
  color: #a9f8c6;
  border: 1px solid #244252;
  background: #030a0f;
  font: 11px/1.45 "JetBrains Mono", monospace;
  white-space: pre-wrap;
}

.dialogue-panel {
  width: min(1000px, 94vw);
  height: min(560px, calc(100vh - 56px));
  min-height: 360px;
  display: grid;
  grid-template-columns: 260px 1fr;
  overflow: hidden;
  border: 1px solid #39dffb77;
  background: var(--panel);
  box-shadow: 0 0 70px #0085a633, inset 0 0 50px #071f2d;
}

.speaker-card {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: linear-gradient(#0b2635, #061019);
}

.speaker-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 55%, #04101c 88%);
  pointer-events: none;
}

.speaker-card img {
  width: 100%;
  height: calc(100% - 72px);
  padding: 8px 10px 0;
  object-fit: contain;
  object-position: center top;
}
.speaker-card span, .speaker-card strong { position: absolute; z-index: 2; left: 18px; }
.speaker-card span { bottom: 45px; color: var(--cyan); font: 600 9px "JetBrains Mono", monospace; letter-spacing: .12em; }
.speaker-card strong { right: 12px; bottom: 15px; font-size: 21px; line-height: 1.1; letter-spacing: .035em; white-space: nowrap; }

.dialogue-copy { display: flex; flex-direction: column; padding: 28px; }
.signal { color: var(--green); font: 600 11px "JetBrains Mono", monospace; letter-spacing: .15em; }
.dialogue-copy p {
  flex: 1;
  margin: 28px 0;
  color: #edf8fb;
  font: 400 21px/1.62 "Segoe UI", Arial, sans-serif;
  letter-spacing: .005em;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.hl-cache { color: #c792ff; font-weight: 800; text-shadow: 0 0 10px #9a64ff66; }
.hl-concept { color: #5de7ff; font-weight: 700; }
.hl-keyword, .syn-keyword { color: #ff79c6; font-weight: 650; }
.hl-function, .syn-function { color: #55dff7; }
.hl-string, .syn-string { color: #7ee787; }
.hl-number, .syn-number { color: #ffcb6b; }
.hl-escape { color: #ff9f66; font-weight: 700; }
.syn-comment { color: #748493; font-style: italic; }
.syn-variable { color: #f4f6a6; }
.actions { display: flex; justify-content: flex-end; gap: 12px; }
.actions button, .run {
  padding: 11px 19px;
  color: #021014;
  border: 0;
  border-radius: 3px;
  background: var(--cyan);
  font: 700 12px "JetBrains Mono", monospace;
  letter-spacing: .1em;
  cursor: pointer;
}

.lesson-panel {
  position: relative;
  width: min(920px, 94vw);
  max-height: 90vh;
  overflow: auto;
  padding: 34px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 0 70px #007da433;
}

.howto-panel { width: min(850px, 94vw); }
.howto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin: 25px 0; }
.howto-grid > div { min-height: 130px; padding: 19px; border: 1px solid #294859; background: #07141f; }
.howto-grid strong { display: block; margin: 14px 0 3px; color: var(--cyan); font: 700 14px "JetBrains Mono", monospace; }
.howto-grid p { margin: 0; color: #99b8c2; line-height: 1.45; }
.how-icon { display: inline-block; color: var(--violet); font: 700 20px "JetBrains Mono", monospace; }
.menu-inline { width: 100%; text-align: center; }

.close {
  color: #9bdce8;
  border: 0;
  background: none;
  font-size: 27px;
  cursor: pointer;
}
.lesson-panel > .close { position: absolute; top: 12px; right: 16px; }
.lesson-heading span { color: var(--violet); font: 700 11px "JetBrains Mono", monospace; letter-spacing: .15em; }
.lesson-heading h2 { margin: 5px 0; font-size: 35px; }
.lesson-heading p { color: #a8c8d1; font-size: 18px; }

.question {
  margin-top: 22px;
  padding: 22px;
  border: 1px solid #284959;
  background: #06111c;
}
.question h3 { margin-top: 0; font-size: 22px; white-space: pre-wrap; }
.answers { display: grid; gap: 10px; }
.answer {
  padding: 13px 16px;
  color: #dceff2;
  text-align: left;
  border: 1px solid #284859;
  border-radius: 3px;
  background: #0a1a27;
  cursor: pointer;
  font: 600 14px "JetBrains Mono", monospace;
}
.answer:hover { border-color: var(--cyan); background: #0c2938; }
.answer.wrong { border-color: var(--red); color: #ff9fb2; }

.fact-card {
  margin-top: 20px;
  padding: 22px;
  border-left: 4px solid var(--violet);
  background: linear-gradient(90deg, #17122c, #08121e);
  font: 15px/1.7 "JetBrains Mono", monospace;
}
.cache-page h3 { color: #ffffff; }
.cache-page p { color: #ffffff; }
.cache-page pre {
  overflow-x: auto;
  padding: 14px 16px;
  color: #d9e7f2;
  border: 1px solid #2a4255;
  border-radius: 4px;
  background: #081018;
  font: 14px/1.6 "JetBrains Mono", monospace;
}
.cache-example {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px 16px;
  margin-top: 20px;
  padding: 16px;
  border: 1px solid #365b6c;
  border-radius: 6px;
  background: #050c12;
}
.cache-example b {
  color: #ffffff;
  font: 700 11px "JetBrains Mono", monospace;
  letter-spacing: .14em;
}
.cache-example pre {
  min-height: 90px;
  margin: 0;
}
.cache-output {
  color: #8dffb7 !important;
  border-color: #315d46 !important;
  background: #07140d !important;
}
.kw { color: #ff78d1; }
.str { color: var(--green); }
.num { color: #ffbe63; }
.fn { color: var(--cyan); }

.ide-window {
  width: min(1480px, calc(100vw - 20px));
  height: min(900px, calc(100vh - 24px));
  display: grid;
  grid-template-rows: 42px 38px 1fr 52px;
  overflow: hidden;
  border: 1px solid #40586c;
  border-radius: 8px;
  background: #10151d;
  box-shadow: 0 30px 100px #000;
  font-family: "JetBrains Mono", monospace;
}
#ide.overlay { padding: 10px; }
.ide-topbar { display: flex; align-items: center; padding: 0 14px; color: #91a3b5; background: #171d26; }
.window-dots { display: flex; gap: 7px; margin-right: 18px; }
.window-dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5d5d; }
.window-dots i:nth-child(2) { background: #ffc65d; }
.window-dots i:nth-child(3) { background: #55d987; }
.ide-topbar .close { margin-left: auto; }
.ide-tabs { display: flex; background: #0c1118; }
.ide-tabs span { padding: 10px 18px; color: #7d8b98; font-size: 12px; }
.ide-tabs .active { color: #e5f8fb; border-top: 2px solid var(--violet); background: #141b24; }
.ide-main { min-height: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr); overflow: hidden; }
.ide-main aside { display: flex; flex-direction: column; gap: 10px; padding: 18px; color: #8c9cab; border-right: 1px solid #26303b; background: #111821; font-size: 12px; }
.ide-main aside strong { color: #c7d2dc; letter-spacing: .12em; }
.ide-main .file { color: #d9bbff; padding-left: 12px; }
.mission { margin-top: 30px; padding: 14px; color: #a8b9c7; border: 1px solid #304252; line-height: 1.6; }
.mission b { display: block; color: var(--green); margin-bottom: 7px; }
.mission code { color: #ffce7e; }
.ide-hint {
  margin-top: 12px;
  padding: 14px;
  color: #ffffff;
  border: 1px solid #8f72d8;
  background: #211b38;
  font-size: 11px;
  line-height: 1.55;
}
.ide-hint b { display: block; margin-bottom: 6px; color: #ffffff; }
.ide-hint span { color: #ffffff; }
.lesson-progress {
  margin: 18px 0 0;
  color: #ffffff;
  font: 700 12px "JetBrains Mono", monospace;
  letter-spacing: .08em;
}
.lesson-progress-track {
  height: 7px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 10px;
  background: #1b3441;
}
.lesson-progress-fill {
  height: 100%;
  background: #77ffad;
  transition: width .2s ease;
}
.cache-page {
  min-height: 300px;
  margin-top: 20px;
  padding: 24px;
  border: 1px solid #3c6170;
  background: #091722;
}
.cache-page h3 { margin: 0 0 12px; color: #ffffff; font-size: 25px; }
.cache-page p { color: #ffffff; font: 17px/1.65 "Segoe UI", Arial, sans-serif; }
.cache-page pre {
  overflow-x: auto;
  padding: 16px;
  color: #ffffff;
  border: 1px solid #345260;
  background: #050b11;
  font: 14px/1.65 "JetBrains Mono", monospace;
}
.cache-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
.cache-nav button {
  min-width: 125px;
  padding: 11px 18px;
  color: #ffffff;
  border: 1px solid #5fdcf2;
  background: #0b2634;
  cursor: pointer;
  font: 700 12px "JetBrains Mono", monospace;
}
.cache-nav button:disabled { opacity: .35; cursor: default; }

.quiz-feedback {
  min-height: 1.5em;
  margin: 16px 0 0;
  color: #ffffff;
  line-height: 1.5;
}

.answer.correct {
  border-color: #70ff9d;
  background: rgba(34, 125, 72, .55);
  color: #ffffff;
}
.editor-pane { min-width: 0; min-height: 0; overflow: hidden; display: grid; grid-template-rows: minmax(0, 1fr) minmax(170px, 24vh); }
.editor { min-height: 0; display: grid; grid-template-columns: 48px 1fr; padding-top: 18px; background: #0d1117; }
.line-number {
  overflow: hidden;
  padding-top: 0;
  color: #536172;
  text-align: center;
  white-space: pre;
  font: 14px/1.65 "JetBrains Mono", monospace;
}
.code-editor-wrap { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
#code-highlight,
#code-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
  margin: 0;
  padding: 0 18px;
  border: 0;
  white-space: pre;
  font: 15px/1.65 "JetBrains Mono", monospace;
  tab-size: 4;
}
#code-highlight {
  pointer-events: none;
  color: #dbe8f5;
  background: transparent;
}
#code-highlight code,
#code-highlight code span {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  font-variant-ligatures: none;
}
#code-input {
  z-index: 2;
  resize: none;
  color: transparent;
  caret-color: #ffffff;
  outline: 0;
  background: transparent;
  font-variant-ligatures: none;
}
#code-input::selection { color: transparent; background: rgba(55, 140, 190, .45); }
.console { min-height: 0; overflow: auto; border-top: 1px solid #293440; background: #090d12; }
.console.feedback-visible { animation: consoleFeedback 1s ease-out; }
@keyframes consoleFeedback { 0% { box-shadow: inset 0 0 0 2px var(--cyan); } 100% { box-shadow: inset 0 0 0 0 transparent; } }
.console-head { height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; color: #91a3b5; font-size: 11px; }
.console-head button { color: #738596; border: 0; background: none; cursor: pointer; }
#console-output { min-height: 100%; margin: 0; padding: 15px; overflow: auto; color: #a9bac8; font: 13px/1.5 "JetBrains Mono", monospace; white-space: pre-wrap; }
#console-output.success { color: var(--green); }
#console-output.error { color: #ff708a; }
.ide-footer { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-top: 1px solid #27323e; background: #141b23; color: #6f8495; font-size: 11px; }
.run { background: #48df87; }

@media (max-width: 760px) {
  .cache-example { grid-template-columns: 1fr; }
  .hud { grid-template-columns: 1fr auto; }
  .objective { display: none; }
  h1 b { display: block; margin: 4px 0 0; }
  .dialogue-panel { grid-template-columns: 150px 1fr; }
  .dialogue-copy p { font-size: 18px; }
  .ide-main { grid-template-columns: 1fr; }
  .ide-main aside { display: none; }
  .elevator-cabin { grid-template-columns: 1fr; grid-template-rows: 72px 1fr; overflow-y: auto; }
  .elevator-doors, .elevator-display, .elevator-exit { display: none; }
  .elevator-panel { grid-column: 1; grid-row: 2; }
  .battle-overlay { padding: 6px; }
  .battle-shell { height: calc(100vh - 12px); grid-template-rows: auto 1fr 330px; overflow-y: auto; }
  .battle-header { align-items: flex-start; gap: 8px; }
  .battle-header h2 { font-size: 18px; }
  .battle-header-status { flex-direction: column; gap: 5px; }
  .battle-stage { grid-template-columns: 1fr; overflow: visible; }
  .party-column { grid-template-columns: repeat(3, 1fr); grid-template-rows: 105px 38px; }
  .party-member { grid-template-columns: 42px 1fr; padding: 4px; }
  .party-member img { width: 40px; height: 70px; }
  .party-member small { display: none; }
  .party-sync { grid-column: 1 / -1; }
  .enemy-zone { min-height: 280px; }
  .battle-console { grid-template-columns: 1fr; grid-template-rows: auto auto 48px 100px; }
  .cybercards { grid-column: 1; }
  .howto-grid { grid-template-columns: 1fr; }
}

/* High-contrast readability: standard copy stays white on dark surfaces. */
.eyebrow,
.objective span,
.progress span,
.signal,
.speaker-card span,
.lesson-heading span,
.lesson-heading p,
.howto-grid p,
.ide-topbar,
.ide-tabs span,
.ide-main aside,
.ide-main aside strong,
.mission,
.console-head,
.console-head button,
#console-output,
.ide-footer {
  color: #ffffff;
}