:root{
  --bg:#030503;
  --fg:#b8ffbf;
  --dim:#5f9d68;
  --glow:rgba(108,255,129,.22);
  --danger:#ff8c8c;
  --bright:#e0ffe3;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#000}
body{
  overflow:hidden;
  color:var(--fg);
  background:
    radial-gradient(circle at center, rgba(20,55,24,.14), transparent 58%),
    #010201;
  font-family:"Courier New",Courier,monospace;
}

/* ---------- CRT shell ---------- */
#crt{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
}
#crt::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.025) 0px,
    rgba(255,255,255,.025) 1px,
    transparent 2px,
    transparent 4px
  );
  mix-blend-mode:screen;
  opacity:.55;
  z-index:10;
}
#crt::after{
  content:"";
  position:absolute; inset:-10%;
  pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.65) 100%);
  z-index:11;
}
.screen{
  position:relative;
  z-index:2;
  width:min(1040px,95vw);
  height:min(760px,92vh);
  border:1px solid rgba(139,255,151,.12);
  border-radius:18px;
  padding:28px 30px;
  box-shadow:
    inset 0 0 70px rgba(76,255,99,.035),
    0 0 60px rgba(49,255,78,.035);
  text-shadow:0 0 7px rgba(116,255,136,.27);
  overflow:hidden;
  transition:filter .6s ease;
}
.screen.darkened{filter:brightness(.55) saturate(.7)}
.screen.redshift{filter:hue-rotate(-110deg) saturate(1.4)}

.noise{
  position:absolute;inset:0;pointer-events:none;z-index:9;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation:noise .2s steps(2) infinite;
}
@keyframes noise{
  0%{transform:translate(0,0)}
  25%{transform:translate(1%,-1%)}
  50%{transform:translate(-1%,1%)}
  75%{transform:translate(.5%,1%)}
}

.status{
  position:absolute;
  right:24px;top:14px;
  font-size:12px;
  color:rgba(154,255,166,.38);
  z-index:3;
}
.chapter{
  position:absolute;
  left:30px;top:14px;
  font-size:12px;
  letter-spacing:.18em;
  color:rgba(154,255,166,.38);
  z-index:3;
}

/* ---------- output ---------- */
#output{
  height:calc(100% - 54px);
  overflow:auto;
  scrollbar-width:none;
  white-space:pre-wrap;
  line-height:1.46;
  font-size:clamp(15px,1.6vw,19px);
  letter-spacing:.02em;
  padding-top:10px;
}
#output::-webkit-scrollbar{display:none}
.line{min-height:1.46em}
.dim{color:var(--dim)}
.danger{color:var(--danger); text-shadow:0 0 8px rgba(255,120,120,.35)}
.choice{color:var(--bright)}
.center{text-align:center}
.title{
  font-size:clamp(24px,4vw,46px);
  letter-spacing:.24em;
  margin:8px 0 20px;
}
.ending-banner{
  margin:18px 0 6px;
  padding:10px 0;
  border-top:1px dashed rgba(184,255,191,.25);
  border-bottom:1px dashed rgba(184,255,191,.25);
  letter-spacing:.2em;
  text-align:center;
}

/* ASCII drawings inside the terminal */
.art-wrap{
  overflow-x:auto;
  scrollbar-width:none;
  margin:6px 0 14px;
  display:flex;
  justify-content:center;
}
.art-wrap::-webkit-scrollbar{display:none}
.art{
  margin:0;
  white-space:pre;
  line-height:1.08;
  letter-spacing:0;
  font-size:clamp(8px,1.12vw,14px);
  color:#cbffd1;
  text-shadow:0 0 8px rgba(118,255,138,.3);
  user-select:none;
}
.art .row{display:block;animation:draw .22s ease-out both}
@keyframes draw{
  from{opacity:0;filter:brightness(3);transform:translateX(-4px)}
  to{opacity:1;filter:none;transform:none}
}
.art.red{color:#ffb3b3;text-shadow:0 0 8px rgba(255,110,110,.35)}
.art.gold{color:#fff1b8;text-shadow:0 0 10px rgba(255,220,120,.35)}
.art.flicker{animation:flick 2.4s infinite}
.animated-art .art{min-height:9em;display:flex;align-items:center}
.progress-line{font-size:.86em;white-space:pre;overflow:hidden}
@keyframes flick{
  0%,100%{opacity:1} 42%{opacity:1} 43%{opacity:.55} 44%{opacity:1} 71%{opacity:.8} 72%{opacity:1}
}

/* Clickable choices */
.choices{
  display:flex;
  flex-wrap:wrap;
  gap:6px 18px;
  margin:10px 0 6px;
  white-space:normal;
}
.opt{
  background:transparent;
  border:0;
  padding:2px 0;
  color:var(--bright);
  font:inherit;
  letter-spacing:inherit;
  text-shadow:inherit;
  cursor:pointer;
  text-align:left;
}
.opt::before{content:"> "; color:var(--dim)}
.opt:hover,.opt:focus-visible{color:#fff;outline:0;text-decoration:underline;text-underline-offset:4px}
.opt[disabled]{opacity:.35;cursor:default;text-decoration:none}

/* ---------- prompt ---------- */
.prompt{
  height:46px;
  display:flex;
  align-items:center;
  gap:10px;
  border-top:1px solid rgba(157,255,169,.1);
  margin-top:8px;
  padding-top:10px;
}
.cursor{
  display:inline-block;
  width:10px;height:1.05em;
  background:var(--fg);
  box-shadow:0 0 8px var(--glow);
  animation:blink .86s steps(1) infinite;
  vertical-align:-.1em;
}
@keyframes blink{50%{opacity:0}}
/* The real input is invisible; the text is mirrored into spans so the
   block cursor sits right after what you typed. */
.typed-line{
  position:relative;
  flex:1;
  min-width:0;
  height:100%;
  display:flex;
  align-items:center;
  overflow:hidden;
  white-space:pre;
  text-transform:uppercase;
}
#input{
  position:absolute;
  inset:0;
  width:100%;
  opacity:0;
  background:transparent;
  border:0;
  outline:0;
  font:inherit;
  color:transparent;
  caret-color:transparent;
}
.typed-line .cursor{flex-shrink:0}
#input:disabled ~ .cursor{animation:none;opacity:.25}

/* ---------- click to play ---------- */
#start{
  position:absolute;
  inset:0;
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:22px;
  background:transparent;
  border:0;
  color:var(--fg);
  font:inherit;
  text-shadow:inherit;
  cursor:pointer;
}
.start-logo{
  font-size:clamp(28px,6vw,64px);
  letter-spacing:.3em;
  margin-right:-.3em;
}
.start-cta{
  font-size:clamp(16px,2vw,22px);
  letter-spacing:.18em;
  color:var(--bright);
  animation:blink 1.1s steps(1) infinite;
}
.start-hint{
  font-size:12px;
  letter-spacing:.12em;
  color:rgba(184,255,191,.42);
}
#start:hover .start-cta,#start:focus-visible .start-cta{animation:none;color:#fff}
#start:focus-visible{outline:0}

.flash{animation:flash .12s linear 1}
@keyframes flash{from{filter:brightness(2.5)}to{filter:none}}
.shake{animation:shake .16s linear 2}
@keyframes shake{
  0%,100%{transform:translate(0)}
  25%{transform:translate(2px,-1px)}
  50%{transform:translate(-2px,1px)}
  75%{transform:translate(1px,2px)}
}
.glitch{animation:glitch .35s steps(3) 2}
@keyframes glitch{
  0%{transform:translate(0);filter:none}
  33%{transform:translate(-3px,1px) skewX(2deg);filter:hue-rotate(90deg)}
  66%{transform:translate(3px,-1px) skewX(-2deg);filter:invert(.1)}
  100%{transform:translate(0);filter:none}
}
.collapse{animation:collapse .48s cubic-bezier(.7,0,.9,.2) 1 both}
@keyframes collapse{
  0%{transform:scale(1);filter:brightness(1)}
  55%{transform:scaleY(.025) scaleX(1.02);filter:brightness(4)}
  100%{transform:scaleY(.001) scaleX(0);filter:brightness(8)}
}
.blackout{animation:blackout .7s steps(2) 1}
@keyframes blackout{
  0%,30%{filter:brightness(1)}
  31%,75%{filter:brightness(0)}
  76%,88%{filter:brightness(2)}
  89%,100%{filter:brightness(1)}
}

/* ---------- prelude ---------- */
#prelude{
  position:absolute;
  inset:28px 30px 28px 30px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index:4;
  text-align:center;
}
#asciiWrap{
  flex:1;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
#ascii{
  margin:0;
  white-space:pre;
  line-height:1.06;
  letter-spacing:0;
  font-size:clamp(7px,1.08vw,14px);
  color:#cbffd1;
  text-shadow:0 0 8px rgba(118,255,138,.28);
  user-select:none;
}
#preludeText{
  min-height:54px;
  padding-top:12px;
  color:var(--fg);
  font-size:clamp(15px,1.5vw,20px);
}
#skipHint{
  color:rgba(184,255,191,.42);
  font-size:12px;
  letter-spacing:.12em;
  padding-top:8px;
}
.hidden{display:none !important;}

@media (max-width:600px){
  #crt{padding:10px}
  .screen{padding:26px 16px 16px;border-radius:9px}
  #output{font-size:15px}
  #prelude{inset:18px 16px 18px 16px}
  .chapter{left:16px}
  .status{right:16px}
  .status{max-width:55%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .art{font-size:clamp(5px,1.9vw,10px)}
}
@media (prefers-reduced-motion:reduce){
  .noise,.art .row,.art.flicker,.flash,.shake,.glitch,.collapse,.blackout{animation:none}
  .screen{transition:none}
}