:root {
  --bg: #040806;
  --panel: #07110c;
  --fg: #39ff88;
  --dim: #1f8a4e;
  --faint: #0e3a22;
  --warn: #ffcc33;
  --bad: #ff3b5c;
  --guard: #6ee7ff;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --pixel: 'VT323', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(ellipse at center, #07160e 0%, var(--bg) 70%);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 15px;
  overflow: hidden;
}
button { font-family: var(--pixel); font-size: 20px; cursor: pointer; }
b { color: #fff; font-weight: 600; }
.dim { color: var(--dim); }

/* CRT scanlines */
.crt {
  pointer-events: none; position: fixed; inset: 0; z-index: 50;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
  animation: flicker 6s infinite;
}
@keyframes flicker { 0%,100% { opacity: .85; } 50% { opacity: 1; } 51% { opacity: .7; } 52% { opacity: 1; } }

#app { height: 100dvh; display: flex; flex-direction: column; max-width: 1200px; margin: 0 auto; padding: 12px 16px; gap: 12px; }

header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--faint); padding-bottom: 8px; }
.logo { font-family: var(--pixel); font-size: 34px; letter-spacing: 4px; text-shadow: 0 0 8px var(--fg); }
.cursor { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hud { display: flex; gap: 10px; align-items: center; font-family: var(--pixel); font-size: 20px; flex-wrap: wrap; }
.hud button { background: transparent; color: var(--fg); border: 1px solid var(--dim); padding: 0 10px; }
.hud button:hover { background: var(--faint); }

main { flex: 1; display: grid; grid-template-columns: 280px 1fr; gap: 12px; min-height: 0; }

#guard {
  background: var(--panel); border: 1px solid var(--faint); padding: 14px; overflow-y: auto;
  box-shadow: inset 0 0 30px rgba(57,255,136,.05);
}
#gAvatar { color: var(--guard); font-size: 13px; line-height: 1.15; margin: 0 0 8px; text-shadow: 0 0 6px var(--guard); white-space: pre; }
#gName { font-family: var(--pixel); font-size: 32px; margin: 0; color: var(--guard); letter-spacing: 2px; }
#gTitle { margin: 0 0 8px; font-size: 13px; }
#gBrief { font-size: 13px; line-height: 1.5; }

.meter { margin: 12px 0; }
.meter label { display: flex; justify-content: space-between; font-family: var(--pixel); font-size: 18px; }
.bar { height: 12px; border: 1px solid var(--dim); padding: 1px; }
.bar i { display: block; height: 100%; width: 0; background: var(--fg); transition: width .4s, background .4s; }
.bar.trust i { background: var(--guard); }
#shields { display: flex; gap: 6px; }
#shields span { flex: 1; text-align: center; border: 1px solid var(--guard); color: var(--guard); font-family: var(--pixel); font-size: 16px; padding: 2px 0; }
#shields span.down { border-color: var(--bad); color: var(--bad); text-decoration: line-through; opacity: .6; }

#hintBtn { width: 100%; background: transparent; color: var(--warn); border: 1px dashed var(--warn); padding: 6px; margin-top: 8px; }
#hintBtn:hover { background: rgba(255,204,51,.08); }
#hintBtn small { font-size: 15px; opacity: .8; }
.hint { color: var(--warn); font-size: 13px; line-height: 1.5; }

#terminal { display: flex; flex-direction: column; min-height: 0; background: var(--panel); border: 1px solid var(--faint); }
#log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 88%; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.msg .who { font-family: var(--pixel); font-size: 17px; display: block; opacity: .8; }
.msg.guard { color: var(--guard); }
.msg.you { align-self: flex-end; color: #fff; text-align: right; }
.msg.you .who { color: var(--fg); }
.msg.sys { align-self: center; color: var(--warn); font-family: var(--pixel); font-size: 19px; text-align: center; max-width: 100%; }
.msg.sys.bad { color: var(--bad); }
.msg.typing .body::after { content: '▋'; animation: blink .6s steps(1) infinite; }
.leak { background: var(--warn); color: #000; padding: 0 4px; font-weight: 600; animation: pulse 1s 3; }
@keyframes pulse { 50% { box-shadow: 0 0 14px var(--warn); } }

form { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--faint); }
form input {
  flex: 1; min-width: 0; background: transparent; border: none; border-bottom: 1px solid var(--dim);
  color: #fff; font-family: var(--mono); font-size: 15px; padding: 6px 2px; outline: none;
}
form input:focus { border-bottom-color: var(--fg); }
form button { background: var(--fg); color: #000; border: none; padding: 4px 14px; }
form button:hover { filter: brightness(1.15); }
form button:disabled { opacity: .4; cursor: wait; }
.prompt { font-family: var(--pixel); font-size: 24px; }
#codeForm { background: rgba(255,204,51,.04); }
#codeForm label { font-family: var(--pixel); font-size: 19px; color: var(--warn); }
#codeForm input { text-transform: uppercase; letter-spacing: 2px; }
#codeForm button { background: var(--warn); }
#codeForm.ready { animation: ready 1.2s infinite; }
@keyframes ready { 50% { background: rgba(255,204,51,.18); } }

/* Overlays */
.overlay {
  position: fixed; inset: 0; z-index: 40; display: none; align-items: center; justify-content: center;
  background: rgba(2,6,4,.94); padding: 16px; overflow-y: auto;
}
.overlay.show { display: flex; }
.panel { max-width: 640px; width: 100%; text-align: center; margin: auto; padding: 16px 0; }
.panel h1 { font-family: var(--pixel); font-size: clamp(56px, 14vw, 110px); margin: 0; letter-spacing: 6px; line-height: 1; }
.panel h2 { font-family: var(--pixel); font-size: 48px; margin: 0; }
.tag { font-family: var(--pixel); font-size: 26px; letter-spacing: 8px; margin: 4px 0 18px; color: var(--guard); }
.story { line-height: 1.6; }
.story p { margin: 4px 0; }
.how { text-align: left; list-style: none; padding: 12px 16px; border: 1px solid var(--faint); line-height: 1.6; font-size: 14px; }
.big { background: var(--fg); color: #000; border: none; padding: 8px 28px; font-size: 28px; margin-top: 14px; box-shadow: 0 0 20px rgba(57,255,136,.4); }
.big:hover { filter: brightness(1.15); }
.ok { color: var(--fg); text-shadow: 0 0 10px var(--fg); }

#sectorMap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
#sectorMap button {
  background: transparent; color: var(--fg); border: 1px solid var(--dim); padding: 8px 4px; font-size: 18px; line-height: 1.1;
}
#sectorMap button small { display: block; color: var(--warn); font-size: 16px; }
#sectorMap button:disabled { opacity: .3; cursor: not-allowed; }
#sectorMap button:not(:disabled):hover { background: var(--faint); }

.stars { font-size: 44px; color: var(--warn); letter-spacing: 8px; margin: 8px 0; }
.stars .off { color: var(--faint); }
.technique { border: 1px solid var(--guard); padding: 14px 18px; text-align: left; margin-top: 12px; }
.technique h3 { font-family: var(--pixel); font-size: 30px; color: var(--guard); margin: 0 0 6px; }
.technique p { line-height: 1.6; margin: 6px 0; }
.defense { color: var(--warn); font-size: 14px; }
.rank { font-family: var(--pixel); font-size: 34px; color: var(--warn); margin: 10px 0 0; }
.endlist { text-align: left; border: 1px solid var(--faint); padding: 10px 16px; margin: 14px 0; font-size: 14px; line-height: 1.8; }
.endlist span { color: var(--warn); float: right; }

/* Glitch title */
.glitch { position: relative; text-shadow: 0 0 12px var(--fg); }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; opacity: .8; }
.glitch::before { color: var(--bad); animation: g1 2.5s infinite steps(2); clip-path: inset(0 0 60% 0); }
.glitch::after { color: var(--guard); animation: g2 3s infinite steps(2); clip-path: inset(55% 0 0 0); }
@keyframes g1 { 0%,90%,100% { transform: none; } 92% { transform: translate(-4px, 1px); } 96% { transform: translate(3px, -1px); } }
@keyframes g2 { 0%,85%,100% { transform: none; } 88% { transform: translate(4px, 0); } 94% { transform: translate(-3px, 1px); } }

/* Lockdown flash */
#lockdown { position: fixed; inset: 0; z-index: 45; display: none; align-items: center; justify-content: center; background: rgba(255,59,92,.25); }
#lockdown.show { display: flex; animation: alarm .3s 5 alternate; }
#lockdown div { font-family: var(--pixel); font-size: clamp(40px, 10vw, 80px); color: var(--bad); text-align: center; text-shadow: 0 0 20px var(--bad); }
#lockdown small { display: block; font-size: 24px; }
@keyframes alarm { from { background: rgba(255,59,92,.1); } to { background: rgba(255,59,92,.4); } }

body.shake #app { animation: shake .4s; }
@keyframes shake { 20% { transform: translate(-6px, 2px); } 40% { transform: translate(5px, -2px); } 60% { transform: translate(-4px, 1px); } 80% { transform: translate(3px, 0); } }

/* Mobile */
@media (max-width: 760px) {
  body { font-size: 14px; }
  #app { padding: 8px 12px; gap: 8px; }
  .logo { font-size: 26px; }
  .hud { font-size: 17px; gap: 6px; }
  main { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  #guard { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; padding: 10px; max-height: 36dvh; }
  #gAvatar { grid-row: span 3; font-size: 10px; margin: 0; }
  #gName { font-size: 26px; }
  #gBrief, .meter, #hintBtn, #hintText { grid-column: 1 / -1; }
  #gBrief { margin: 6px 0 0; }
  .meter { margin: 6px 0; }
  #codeForm label { font-size: 16px; }
  #sectorMap { grid-template-columns: repeat(2, 1fr); }
  .msg { max-width: 95%; }
}