/* ============================================================
   W.O.P.R. CRT — 1983 military green phosphor terminal
   ============================================================ */
:root{
  --phos:#ccffdd;            /* main phosphor green — næsten hvidgrøn */
  --phos-dim:#a8ffb4;
  --phos-dark:#6ee88a;
  --phos-glow:rgba(160,255,180,.55);
  --amber:#ffd35c;
  --red:#ff6b6b;
  --cyan:#8beeff;
  --bg:#04140b;
  --font:'VT323','Courier New',monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#000;overflow:hidden}
body{font-family:var(--font);color:var(--phos)}

#kbd{position:fixed;left:-2000px;top:0;width:1px;height:1px;opacity:.01}

#crt-frame{height:100%;width:100%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center,#0a0a0a 0%,#000 80%)}
#screen{
  position:relative;width:100%;height:100%;overflow:hidden;
  background:var(--bg);
  display:flex;flex-direction:column;
}
@media(min-width:900px){
  #crt-frame{padding:18px}
  #screen{
    width:min(100%,1400px);height:min(100%,940px);
    border-radius:26px;
    box-shadow:0 0 0 6px #101010, 0 0 0 9px #050505,
      0 0 60px rgba(90,255,110,.16), inset 0 0 40px rgba(0,0,0,.35);
  }
}

/* ---------- text glow ---------- */
/* TEKSTEN SKAL LIGGE OVER CRT-OVERLAYS (z 10-13) — ellers mørklægger
   de semi-transparente lag de tynde glyffer og alt bliver ulæseligt. */
#output,#promptline,#statusbar{position:relative;z-index:20}
#output,#promptline,#gameview,#statusbar,#gvtext{
  -webkit-text-stroke:.55px currentColor;
  text-shadow:0 0 1px currentColor,0 0 2px currentColor,0 0 8px var(--phos-glow);
}
#output{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:14px 16px 4px;
  font-size:clamp(26px,3.4vmin,44px);line-height:1.3;
  scrollbar-width:thin;scrollbar-color:var(--phos-dark) transparent}
#output::-webkit-scrollbar{width:6px}
#output::-webkit-scrollbar-thumb{background:var(--phos-dark)}
#output .line{white-space:pre-wrap;word-break:break-word}
#output .line.dim{color:var(--phos-dim)}
#output .line.dark{color:var(--phos-dark)}
#output .line.bright{color:#ccffdd}
#output .line.amber{color:var(--amber);text-shadow:0 0 7px rgba(255,194,51,.55)}
#output .line.red{color:var(--red);text-shadow:0 0 8px rgba(255,85,85,.6)}
#output .line.cyan{color:var(--cyan);text-shadow:0 0 7px rgba(110,232,255,.55)}
#output .line.center{text-align:center}
#output .line.big{font-size:1.35em;letter-spacing:.06em}
#output .line.blink{animation:blinkline 1s steps(2,start) infinite}
@keyframes blinkline{to{visibility:hidden}}

/* ---------- prompt ---------- */
#promptline{padding:2px 16px 10px;font-size:clamp(26px,3.4vmin,44px);display:flex;gap:.5ch;
  min-height:1.4em}
#cursor{animation:cursorblink 1.05s steps(2,start) infinite}
@keyframes cursorblink{to{visibility:hidden}}

/* ---------- status bar ---------- */
#statusbar{flex:0 0 auto;display:flex;gap:2.2ch;align-items:baseline;flex-wrap:wrap;
  padding:6px 14px;border-bottom:1px solid var(--phos-dark);
  font-size:clamp(16px,2.2vmin,24px);color:var(--phos-dim);letter-spacing:.08em}
#statusbar .sb-brand{color:var(--phos);letter-spacing:.14em}
#statusbar .clickable{cursor:pointer}
#statusbar .clickable:hover{color:#b8ffc0}
#sb-defcon{color:var(--amber)}

/* ---------- game view ---------- */
#gameview{position:absolute;inset:0;background:rgba(3,9,4,.94);z-index:20;
  display:flex;flex-direction:column;padding:10px 14px}
/* VIGTIGT: hidden-attr skal vinde over display:flex — ellers ligger
   et 94% sort slør over hele terminalen og mørklægger al tekst! */
#gameview[hidden]{display:none}
#gv-title{text-align:center;font-size:clamp(16px,2.4vmin,26px);letter-spacing:.28em;
  color:var(--phos);padding:6px 0;border-bottom:1px dashed var(--phos-dark)}
#gv-body{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:6px}
#gv{max-width:100%;max-height:100%;image-rendering:pixelated;
  filter:drop-shadow(0 0 10px rgba(57,255,74,.25))}
#gvtext{font-family:var(--font);font-size:clamp(11px,1.9vmin,19px);line-height:1.15;
  color:var(--phos);white-space:pre;text-shadow:0 0 5px var(--phos-glow);
  overflow:auto;max-height:100%}
#gv-hud{flex:0 0 auto;display:flex;justify-content:space-between;gap:1em;
  border-top:1px dashed var(--phos-dark);padding-top:6px;
  font-size:clamp(12px,1.8vmin,18px);color:var(--phos-dim)}

/* ---------- touch pad ---------- */
#touchpad:not([hidden]){position:fixed;right:14px;bottom:14px;z-index:20;display:grid;
  grid-template-columns:repeat(3,54px);grid-template-rows:repeat(2,54px);gap:6px}
#touchpad button{background:rgba(3,9,4,.7);border:1px solid var(--phos-dark);
  color:var(--phos);font-size:20px;border-radius:8px;font-family:var(--font)}
#touchpad button:active{background:rgba(57,255,74,.25)}

/* ---------- CRT overlays ---------- */
.scanlines{position:absolute;inset:0;pointer-events:none;z-index:10;
  background:repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 3px,
    rgba(0,0,0,.09) 4px, rgba(0,0,0,.09) 5px)}
.scanlines::after{content:"";position:absolute;left:0;right:0;height:110px;
  background:linear-gradient(to bottom,rgba(57,255,74,0),rgba(57,255,74,.06),rgba(57,255,74,0));
  animation:scanroll 7s linear infinite}
@keyframes scanroll{from{top:-120px}to{top:100%}}
.flicker{position:absolute;inset:0;pointer-events:none;z-index:11;background:rgba(90,255,110,.02);
  animation:flick 4.7s steps(60) infinite}
@keyframes flick{
  0%{opacity:.55}7%{opacity:.35}13%{opacity:.6}27%{opacity:.4}33%{opacity:.65}
  44%{opacity:.38}51%{opacity:.58}63%{opacity:.42}72%{opacity:.62}86%{opacity:.36}100%{opacity:.55}}
.vignette{position:absolute;inset:0;pointer-events:none;z-index:12;
  background:radial-gradient(ellipse at center,rgba(0,0,0,0) 70%,rgba(0,0,0,.28) 100%)}
.glass{position:absolute;inset:0;pointer-events:none;z-index:13;opacity:.5;
  background:radial-gradient(ellipse 38% 26% at 30% 16%,rgba(140,255,160,.07),transparent 70%)}
body.glitch #screen{animation:glitchshake .28s steps(4)}
@keyframes glitchshake{
  0%{transform:translate(0)}25%{transform:translate(-3px,2px) skewX(.4deg)}
  50%{transform:translate(2px,-2px)}75%{transform:translate(-1px,1px) skewX(-.4deg)}100%{transform:translate(0)}}

/* ---------- power overlay ---------- */
#power-overlay{position:fixed;inset:0;background:#000;z-index:50;display:flex;
  align-items:center;justify-content:center;transition:opacity .7s}
#power-overlay.off{opacity:0;pointer-events:none}
#power-box{text-align:center;max-width:92vw}
.power-art{color:var(--phos);font-family:var(--font);
  font-size:clamp(12px,2.6vmin,26px);text-shadow:0 0 10px var(--phos-glow);
  animation:hum 3s ease-in-out infinite}
@keyframes hum{50%{opacity:.82}}
.power-sub{color:var(--phos-dim);letter-spacing:.18em;margin-top:14px;
  font-size:clamp(11px,1.7vmin,16px)}
.power-sub.dim{color:var(--phos-dark)}
.power-sub.small{font-size:clamp(9px,1.3vmin,12px);margin-top:26px}
#power-btn{margin-top:34px;font-family:var(--font);font-size:clamp(18px,2.6vmin,28px);
  letter-spacing:.2em;color:#0a0f0a;background:var(--phos);border:none;cursor:pointer;
  padding:.4em 1.2em;box-shadow:0 0 24px var(--phos-glow);animation:pulse 1.6s ease-in-out infinite}
#power-btn:hover{background:#b8ffc0}
@keyframes pulse{50%{box-shadow:0 0 8px var(--phos-glow)}}

@media(prefers-reduced-motion:reduce){
  .flicker,.scanlines::after,.power-art,#power-btn{animation:none}
  body.glitch #screen{animation:none}
}
@media(max-width:560px){
  #output{font-size:22px;padding:8px 10px}
  #promptline{font-size:22px;padding:2px 10px 8px}
  #statusbar{font-size:14px;gap:1.2ch}
}