:root{
  --bg: #07050c;
  --bg-panel: #120a1e;
  --bg-panel-2: #170f26;
  --line: #3a2255;
  --green: #39ff9d;
  --green-dim: #1e8f5e;
  --pink: #ff2e9e;
  --pink-dim: #99175f;
  --purple: #b347ff;
  --purple-dim: #5c2499;
  --text: #f0e6fb;
  --text-dim: #a08ec4;
  --glow-green: 0 0 6px rgba(57,255,157,.55), 0 0 20px rgba(57,255,157,.18);
  --glow-pink: 0 0 6px rgba(255,46,158,.55), 0 0 20px rgba(255,46,158,.18);
  --glow-purple: 0 0 6px rgba(179,71,255,.55), 0 0 20px rgba(179,71,255,.18);
}
*{ box-sizing: border-box; }
html, body{
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  min-height: 100vh;
}
/* ---------- background texture ---------- */
.grid-bg{
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(179,71,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(179,71,255,.06) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse at 50% 20%, black 10%, transparent 75%);
  pointer-events: none;
}
.crt-overlay{
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,.16) 3px,
    rgba(0,0,0,0) 4px
  );
  opacity: .5;
  mix-blend-mode: multiply;
}
.crt-overlay::after{
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(0,0,0,.55) 100%);
}
/* ---------- layout ---------- */
.wrap{
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}
.titlebar{
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, #17101f, #0f0916);
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 9px 14px;
}
.titlebar-dots{ display: flex; gap: 6px; }
.titlebar-dots span{
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block;
  background: #3a4a55;
}
.titlebar-dots span:nth-child(1){ background: #ff5f57; }
.titlebar-dots span:nth-child(2){ background: #febc2e; }
.titlebar-dots span:nth-child(3){ background: #28c840; }
.titlebar-label{
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: .03em;
}
/* ---------- title ---------- */
h1.glitch{
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: clamp(28px, 5.2vw, 46px);
  text-align: center;
  color: var(--green);
  text-shadow: var(--glow-green);
  margin: 26px 0 4px;
  letter-spacing: .04em;
  position: relative;
}
h1.glitch::before,
h1.glitch::after{
  content: attr(data-text);
  position: absolute;
  left: 0; right: 0; top: 0;
  opacity: .7;
}
h1.glitch::before{
  color: var(--pink);
  clip-path: inset(0 0 55% 0);
  animation: glitch-a 5.5s infinite linear;
}
h1.glitch::after{
  color: var(--purple);
  clip-path: inset(60% 0 0 0);
  animation: glitch-b 4.2s infinite linear;
}
@keyframes glitch-a{
  0%, 92%, 100% { transform: translate(0,0); }
  93% { transform: translate(-3px,-1px); }
  94% { transform: translate(3px,1px); }
  95% { transform: translate(-2px,0); }
}
@keyframes glitch-b{
  0%, 90%, 100% { transform: translate(0,0); }
  91% { transform: translate(2px,1px); }
  92% { transform: translate(-3px,-1px); }
  93% { transform: translate(2px,0); }
}
.subhead{
  text-align: center;
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: .12em;
  margin: 0 0 24px;
}
/* ---------- HUD ---------- */
.hud{
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-panel), var(--bg-panel-2));
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 18px;
  box-shadow: inset 0 0 30px rgba(179,71,255,.04);
}
.hud-row{
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 12px;
  margin-bottom: 14px;
}
.hud-cell{ display: flex; flex-direction: column; gap: 3px; }
.hud-label{ font-size: 10px; letter-spacing: .1em; color: var(--text-dim); }
.hud-value{ font-size: 15px; color: var(--pink); text-shadow: var(--glow-pink); }
.meters{ display: flex; flex-direction: column; gap: 10px; }
.meter-label{
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.meter-track{
  height: 8px;
  background: #0d0714;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.meter-fill{
  height: 100%;
  width: 50%;
  transition: width .5s ease;
}
.meter-fill.risk{ background: linear-gradient(90deg, var(--purple-dim), var(--pink)); box-shadow: 0 0 8px rgba(255,46,158,.5); }
.meter-fill.trust{ background: linear-gradient(90deg, var(--green-dim), var(--green)); box-shadow: 0 0 8px rgba(57,255,157,.5); }
.meter-fill.ops{ background: linear-gradient(90deg, var(--pink), var(--purple)); box-shadow: 0 0 8px rgba(179,71,255,.5); }
/* ---------- terminal / scene ---------- */
.terminal{
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-panel), #0a0611);
  border-radius: 8px;
  padding: 26px 24px 24px;
  min-height: 320px;
  position: relative;
}
.terminal::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--pink), var(--purple), transparent);
  opacity: .6;
}
.scene-title{
  font-family: 'Orbitron', sans-serif;
  font-size: 15px;
  letter-spacing: .08em;
  color: var(--purple);
  text-shadow: 0 0 10px rgba(179,71,255,.45);
  margin: 0 0 14px;
  border-left: 3px solid var(--purple);
  padding-left: 10px;
}
.scene-text{
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  min-height: 90px;
  white-space: pre-wrap;
}
.result-box{
  display: none;
  border-left: 3px solid var(--pink);
  background: rgba(255,46,158,.08);
  padding: 12px 14px;
  margin: 10px 0 18px;
  border-radius: 0 6px 6px 0;
}
.result-box.show{ display: block; }
.result-tag{
  display: block;
  font-size: 10px;
  color: var(--pink);
  letter-spacing: .1em;
  margin-bottom: 6px;
}
.result-box p{ margin: 0; color: var(--text); font-size: 14px; line-height: 1.55; }
.choices{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.choice-btn{
  text-align: left;
  background: #120a1a;
  border: 1px solid var(--line);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  padding: 12px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s ease;
  line-height: 1.5;
}
.choice-btn:hover{
  border-color: var(--green);
  color: #eafff5;
  box-shadow: var(--glow-green);
  transform: translateX(2px);
}
.choice-key{
  color: var(--green);
  margin-right: 8px;
  font-weight: bold;
}
.continue-btn, .restart-btn{
  display: none;
  margin-top: 18px;
  background: transparent;
  border: 1px solid var(--green);
  color: var(--green);
  font-family: 'Orbitron', sans-serif;
  font-size: 13px;
  letter-spacing: .08em;
  padding: 11px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s ease;
}
.continue-btn.show, .restart-btn.show{ display: inline-block; }
.continue-btn:hover, .restart-btn:hover{
  background: var(--green);
  color: #04140c;
  box-shadow: var(--glow-green);
}
.footer{
  text-align: center;
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: .04em;
  margin-top: 22px;
}
@media (max-width: 560px){
  .hud-row{ gap: 10px; }
  .terminal{ padding: 20px 16px; }
}