/* ═══════════════════════════════════════════════════════════════
   WOPR · tubo de rayos catódicos
   ═══════════════════════════════════════════════════════════════ */
:root{
  --fosforo:#48ff88;
  --fosforo-dim:#1f8a44;
  --ambar:#ffb000;
  --alerta:#ff3b30;
  --panel:#07120a;
  --linea:rgba(61,255,122,.22);
  --fuente:"Courier New", ui-monospace, SFMono-Regular, Menlo, monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:#000;color:var(--fosforo);
  font-family:var(--fuente);font-size:15.5px;line-height:1.5;
  overflow:hidden;-webkit-font-smoothing:antialiased;
}

#crt{
  position:fixed;inset:0;display:flex;flex-direction:column;
  background:radial-gradient(ellipse at center,#0a1a10 0%,#050d08 58%,#010402 100%);
  padding:14px 18px 10px;
}
#crt::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:26px;
  box-shadow:inset 0 0 120px 26px rgba(0,0,0,.72), inset 0 0 60px rgba(61,255,122,.05);
}
#scan{
  position:absolute;inset:0;pointer-events:none;z-index:5;opacity:.55;
  background:repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.35) 3px, rgba(0,0,0,0) 4px);
  mix-blend-mode:multiply;
}
#scan.off{display:none}
#flick{
  position:absolute;inset:0;pointer-events:none;z-index:6;background:rgba(61,255,122,.02);
  animation:parpadeo 5.5s infinite steps(2);
}
@keyframes parpadeo{0%,96%{opacity:0}97%{opacity:.5}98%{opacity:0}99%{opacity:.35}100%{opacity:0}}

/* ── cabecera ── */
header{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  border-bottom:1px solid var(--linea);padding-bottom:8px;flex:0 0 auto;
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  text-shadow:0 0 8px rgba(61,255,122,.55);
}
header b{font-weight:700;color:#8dffb0}
#hdr-right{display:flex;gap:16px;align-items:center}
#defcon{padding:1px 8px;border:1px solid var(--linea);border-radius:2px}
#defcon.d1{color:var(--alerta);border-color:var(--alerta);animation:latido 1s infinite}
#defcon.d2,#defcon.d3{color:var(--ambar);border-color:var(--ambar)}
@keyframes latido{50%{opacity:.25}}
#saveStatus{color:var(--fosforo-dim);font-size:11px}
#saveStatus.err{color:var(--alerta)}

/* ── área principal ── */
main{flex:1 1 auto;display:flex;flex-direction:row;align-items:stretch;min-height:0;padding-top:10px;gap:14px}
#term-col{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;min-height:0;gap:10px}
#board{
  display:none;width:min(100%, calc(38vh * 2));height:auto;aspect-ratio:2 / 1;
  flex:0 0 auto;margin:0 auto;
  border:1px solid var(--linea);background:rgba(3,12,6,.85);
  box-shadow:0 0 26px rgba(61,255,122,.09) inset;
  image-rendering:auto;
}
#board.on{display:block}
#screen{
  flex:1 1 auto;overflow-y:auto;overflow-x:hidden;min-height:0;
  padding:2px 4px 4px;white-space:pre-wrap;word-break:break-word;
  text-shadow:0 0 9px rgba(61,255,122,.55);
  scrollbar-width:thin;scrollbar-color:var(--fosforo-dim) transparent;
}
#screen::-webkit-scrollbar{width:8px}
#screen::-webkit-scrollbar-thumb{background:var(--fosforo-dim)}
#screen div{min-height:1.5em}
.dim{color:var(--fosforo-dim);text-shadow:none}
.ambar{color:var(--ambar);text-shadow:0 0 7px rgba(255,176,0,.45)}
.alerta{color:var(--alerta);text-shadow:0 0 8px rgba(255,59,48,.5)}
.brillo{color:#c8ffd8}
.ok{color:#8dffb0;text-shadow:0 0 10px rgba(141,255,176,.6)}
.titulo{color:#9dffbc;letter-spacing:.22em}
.eco{color:#1a6b34}
.linea{border-top:1px solid var(--linea);margin:6px 0;height:0;min-height:0!important}

/* ── entrada ── */
#inputline{
  display:flex;align-items:center;gap:8px;border-top:1px solid var(--linea);
  padding-top:8px;flex:0 0 auto;font-size:15px;
}
#prompt{color:#8dffb0;text-shadow:0 0 8px rgba(61,255,122,.6)}
#cmd{
  flex:1;background:transparent;border:0;outline:0;color:var(--fosforo);
  font:inherit;letter-spacing:.06em;text-transform:uppercase;caret-color:transparent;
  text-shadow:0 0 7px rgba(61,255,122,.5);
}
#cursor{width:9px;height:1.05em;background:var(--fosforo);box-shadow:0 0 9px rgba(61,255,122,.8);
  animation:parp 1.05s steps(2) infinite}
@keyframes parp{50%{opacity:0}}
#inputline.off{opacity:.25}
#inputline.off #cursor{animation:none;opacity:0}

footer{
  flex:0 0 auto;border-top:1px solid var(--linea);margin-top:8px;padding-top:6px;
  font-size:11px;color:var(--fosforo-dim);display:flex;justify-content:space-between;gap:12px;
  letter-spacing:.1em;
}
kbd{background:rgba(61,255,122,.12);border:1px solid var(--linea);padding:0 4px;border-radius:2px;color:#9dffbc}

@media (max-height:620px){
  body{font-size:13px}
  #board{width:min(100%, calc(32vh * 2))}
  footer{display:none}
}
@media (max-width:640px){
  #crt{padding:10px 10px 6px}
  header{font-size:10.5px;letter-spacing:.08em}
  #hdr-right{gap:8px}
  #saveStatus{display:none}
  body{font-size:13.5px}
  #board{width:min(100%, calc(30vh * 2))}
  footer{font-size:9.5px}
}


/* ═══════════════════════════════════════════════════════════════
   HUD lateral: DEFCON + WAR DIALER
   ═══════════════════════════════════════════════════════════════ */
#hud{
  flex:0 0 258px;width:258px;display:flex;flex-direction:column;gap:10px;
  min-height:0;font-size:11.5px;letter-spacing:.06em;
}
.hud-box{
  border:1px solid var(--linea);background:rgba(4,14,8,.72);
  padding:7px 9px 8px;position:relative;overflow:hidden;
  box-shadow:0 0 18px rgba(61,255,122,.05) inset;
}
.hud-box::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--fosforo-dim);opacity:.55;
}
.hud-h{
  font-size:9.5px;letter-spacing:.3em;color:var(--fosforo-dim);
  border-bottom:1px solid var(--linea);padding-bottom:4px;margin-bottom:7px;
  text-transform:uppercase;
}
#hud.n3 .hud-h,#hud.n2 .hud-h{color:var(--ambar)}
#hud.n1 .hud-h{color:var(--alerta)}

/* ── DEFCON ── */
#defconNum{
  font-size:40px;line-height:.95;font-weight:700;letter-spacing:.04em;
  color:#8dffb0;text-shadow:0 0 16px rgba(141,255,176,.5);
  transition:color .3s,text-shadow .3s;
}
#defconTxt{
  font-size:10px;letter-spacing:.28em;color:var(--fosforo-dim);
  margin-top:2px;text-transform:uppercase;
}
#defconBars{display:flex;gap:3px;margin-top:7px}
#defconBars i{
  flex:1;height:6px;background:rgba(61,255,122,.1);
  border:1px solid rgba(61,255,122,.18);transition:background .25s,box-shadow .25s;
}
#defconBars i.on{background:var(--fosforo);box-shadow:0 0 8px rgba(61,255,122,.7)}
#hudClock{
  margin-top:8px;padding-top:6px;border-top:1px solid var(--linea);
  color:var(--fosforo-dim);font-size:11px;letter-spacing:.16em;
}
#hud.n4 #defconNum{color:#8dffb0}
#hud.n3 #defconNum{color:var(--ambar);text-shadow:0 0 16px rgba(255,176,0,.5)}
#hud.n3 #defconBars i.on{background:var(--ambar);box-shadow:0 0 8px rgba(255,176,0,.7)}
#hud.n3 #defconTxt{color:var(--ambar)}
#hud.n2 #defconNum{color:var(--ambar);text-shadow:0 0 18px rgba(255,176,0,.65)}
#hud.n2 #defconBars i.on{background:var(--ambar);box-shadow:0 0 9px rgba(255,176,0,.8)}
#hud.n2 #defconTxt{color:var(--ambar)}
#hud.n1 #defconNum{
  color:var(--alerta);text-shadow:0 0 20px rgba(255,59,48,.75);
  animation:latido 1s infinite;
}
#hud.n1 #defconBars i.on{background:var(--alerta);box-shadow:0 0 10px rgba(255,59,48,.85)}
#hud.n1 #defconTxt{color:var(--alerta)}
#hud.n1 .hud-box{border-color:rgba(255,59,48,.4)}

/* ── WAR DIALER ── */
#dialerBox{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
#dialerList{
  flex:1 1 auto;min-height:0;overflow:hidden;
  font-size:11px;line-height:1.62;letter-spacing:.02em;
  display:flex;flex-direction:column;justify-content:flex-end;
}
#dialerList .fila{
  display:flex;justify-content:space-between;gap:6px;white-space:nowrap;
  color:#1f8a44;transition:color .15s;
}
#dialerList .fila .n{font-variant-numeric:tabular-nums}
#dialerList .fila .e{font-size:9.5px;letter-spacing:.12em;opacity:.85}
#dialerList .fila.sil{color:#155f30}
#dialerList .fila.por{color:var(--ambar)}
#dialerList .fila.mod{color:#8dffb0;text-shadow:0 0 9px rgba(141,255,176,.7)}
#dialerList .fila.act{color:#c8ffd8;text-shadow:0 0 8px rgba(200,255,216,.6)}
#dialerList .fila.act .e{opacity:1}
#dialerHits{
  display:flex;flex-direction:column;gap:0;font-size:10px;line-height:1.5;
  border-top:1px dashed rgba(61,255,122,.16);margin-top:5px;padding-top:5px;
}
#dialerHits:empty{display:none}
#dialerHits .hit{display:flex;justify-content:space-between;color:#8dffb0;letter-spacing:.04em}
#dialerHits .hit .h{color:rgba(31,138,68,.9);letter-spacing:.1em}
#dialerEstado{
  margin-top:7px;padding-top:6px;border-top:1px solid var(--linea);
  color:var(--fosforo-dim);font-size:10px;letter-spacing:.1em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#dialerEstado.hit{color:#8dffb0}
#dialerEstado.por{color:var(--ambar)}
#dialerStats{
  display:flex;justify-content:space-between;gap:8px;margin-top:5px;
  font-size:9.5px;color:var(--fosforo-dim);letter-spacing:.14em;
}
#dialerStats b{color:#8dffb0;font-weight:400}
#dialerPie{
  margin-top:5px;font-size:9px;letter-spacing:.16em;color:rgba(31,138,68,.85);
  border-top:1px solid rgba(61,255,122,.12);padding-top:4px;
}

@media (max-width:1080px){
  #hud{flex:0 0 224px;width:224px;font-size:11px}
  #defconNum{font-size:34px}
}
@media (max-width:900px){
  #hud{display:none}
}

/* ═══════════════════════════════════════════════════════════════
   EFECTOS · barrido, bloom, interferencia, impacto
   ═══════════════════════════════════════════════════════════════ */

/* ── barra de refresco vertical del tubo ── */
#roll{
  position:absolute;left:0;right:0;top:0;height:110px;pointer-events:none;z-index:7;
  background:linear-gradient(to bottom,
    rgba(72,255,136,0) 0%, rgba(72,255,136,.028) 45%,
    rgba(150,255,190,.075) 52%, rgba(72,255,136,.028) 60%, rgba(72,255,136,0) 100%);
  animation:roll 11s linear infinite;
}
@keyframes roll{0%{transform:translateY(-120px)}100%{transform:translateY(104vh)}}

/* ── scanlines con deriva: el tubo nunca está quieto ── */
#scan{
  background-size:100% 4px;
  animation:deriva 3.5s linear infinite;
}
@keyframes deriva{0%{background-position:0 0}100%{background-position:0 4px}}

/* ── bloom del fósforo ── */
#screen{text-shadow:0 0 5px rgba(72,255,136,.28), 0 0 16px rgba(72,255,136,.10)}
#screen .titulo{text-shadow:0 0 6px rgba(72,255,136,.55), 0 0 22px rgba(72,255,136,.22)}
#screen .brillo{text-shadow:0 0 4px currentColor, 0 0 14px currentColor}
#screen .alerta,#screen .error{text-shadow:0 0 6px rgba(255,59,48,.45), 0 0 18px rgba(255,59,48,.18)}
#screen .ambar{text-shadow:0 0 6px rgba(255,176,0,.40), 0 0 16px rgba(255,176,0,.14)}

/* ── cada línea nueva entra como si el cañón la dibujara ── */
#screen>div{animation:entraLinea .13s ease-out}
@keyframes entraLinea{from{opacity:.15;transform:translateY(2px)}to{opacity:1;transform:none}}

/* ── interferencia ── */
#crt.glitch{animation:jit .3s steps(3)}
@keyframes jit{
  0%{transform:none;filter:none}
  15%{transform:translate(-4px,1px);filter:hue-rotate(14deg) saturate(1.5)}
  35%{transform:translate(4px,-2px);filter:invert(.07) hue-rotate(-10deg)}
  55%{transform:translate(-3px,-1px);filter:brightness(1.25)}
  75%{transform:translate(3px,2px);filter:hue-rotate(8deg)}
  100%{transform:none;filter:none}
}
#crt.sacudir{animation:sac .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes sac{
  0%,100%{transform:none}
  20%{transform:translate(-7px,5px)}
  40%{transform:translate(6px,-4px)}
  60%{transform:translate(-4px,-5px)}
  80%{transform:translate(4px,3px)}
}

/* ── destello de impacto ── */
#flash{
  position:absolute;inset:0;pointer-events:none;z-index:9;opacity:0;
  background:#d8ffe6;mix-blend-mode:screen;
}
#flash.rojo{background:#ff2d1a}
#flash.verde{background:#48ff88}
#flash.on{animation:fl .55s ease-out}
@keyframes fl{0%{opacity:.8}25%{opacity:.28}100%{opacity:0}}

/* ── viñeta de guerra en DEFCON 1 ── */
#vig{
  position:absolute;inset:0;pointer-events:none;z-index:4;opacity:0;
  box-shadow:inset 0 0 150px 46px rgba(255,40,28,.5);
  transition:opacity .8s ease;
}
#crt.guerra #vig{opacity:1;animation:latir 1.9s ease-in-out infinite}
@keyframes latir{0%,100%{opacity:.30}50%{opacity:.85}}

/* ── la pantalla se apaga y vuelve: el tubo descarga ── */
#crt.apagon{animation:apagon .55s ease-in forwards}
@keyframes apagon{
  0%{filter:brightness(1)}
  35%{filter:brightness(.15) blur(1px);transform:scaleY(.004)}
  60%{filter:brightness(2.6) blur(2px);transform:scaleY(.004)}
  100%{filter:brightness(1);transform:scaleY(1)}
}

/* ═══════════════════════════════════════════════════════════════
   CODIGO DE LANZAMIENTO · la clave que se va formando
   ═══════════════════════════════════════════════════════════════ */
#codeBox{
  margin:0 0 6px;padding:2px 0 7px;
  border-bottom:1px solid rgba(61,255,122,.12);
}
#codeRow{display:flex;justify-content:center;align-items:stretch;gap:2px}
#codeRow .g{display:flex;gap:2px;flex:1 1 auto;min-width:0;margin:0 3px}
#codeRow .g:first-child{margin-left:0}
#codeRow .g:last-child{margin-right:0}

.celda{
  flex:1 1 0;min-width:0;height:28px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(61,255,122,.22);
  background:rgba(5,17,10,.75);
  font:700 14px/1 "Courier New",monospace;
  color:rgba(61,255,122,.16);
  position:relative;overflow:hidden;
  transition:border-color .2s,background .2s,color .2s;
}
.celda.on{
  border-color:rgba(141,255,176,.8);
  background:rgba(13,42,23,.92);
  color:#d8ffe4;
  text-shadow:0 0 9px rgba(141,255,176,.85);
}
.celda.nueva{animation:celdaIn .42s cubic-bezier(.2,1.5,.4,1)}
@keyframes celdaIn{
  0%{transform:scale(.55);background:#8dffb0;color:#02140a;box-shadow:0 0 18px rgba(141,255,176,.9)}
  100%{transform:scale(1)}
}
.celda.turbo{color:#ffe6a8;border-color:rgba(255,176,0,.55)}

#codeMeta{
  display:flex;justify-content:space-between;align-items:center;
  margin:6px 1px 3px;font-size:8.5px;letter-spacing:.12em;
  color:rgba(61,255,122,.42);
}
#codeChk{font-variant-numeric:tabular-nums}
#codeBar{
  height:4px;background:rgba(61,255,122,.08);
  border:1px solid rgba(61,255,122,.16);overflow:hidden;
}
#codeBar i{
  display:block;height:100%;width:0;background:#3dff7a;
  box-shadow:0 0 8px rgba(61,255,122,.8);
  transition:width .35s ease-out;
}
#codeEstado{
  margin-top:5px;text-align:center;
  font-size:8.5px;letter-spacing:.14em;line-height:1.4;
  color:rgba(61,255,122,.48);
  min-height:2.6em;
}
#codeEstado .k{color:rgba(141,255,176,.9)}

/* autorizado: la clave se vuelve roja y late, como el lanzamiento */
#codeBox.armado .celda.on{
  border-color:rgba(255,90,80,.9);
  background:rgba(52,8,6,.92);
  color:#ffd9d5;
  text-shadow:0 0 10px rgba(255,59,48,.95);
}
#codeBox.armado #codeBar i{background:#ff3b30;box-shadow:0 0 10px rgba(255,59,48,.9)}
#codeBox.armado #codeEstado{color:#ff9a92;text-shadow:0 0 12px rgba(255,59,48,.7);animation:latir 1.15s infinite}
@keyframes latir{50%{opacity:.42}}

/* el codigo viejo se descarta: las celdas caen */
#codeBox.reinicia .celda{animation:cae .5s ease-in forwards}
@keyframes cae{
  0%{transform:translateY(0);opacity:1}
  100%{transform:translateY(14px);opacity:0}
}

/* clave rechazada: el panel tiembla y las celdas se apagan */
#codeBox.fallo{animation:rechazo .34s ease-in-out 3}
#codeBox.fallo .celda{opacity:.28;filter:saturate(.2)}
#codeBox.fallo #codeEstado{color:#ff5a50;text-shadow:0 0 12px rgba(255,59,48,.85)}
#codeBox.fallo #codeBar i{background:#ff5a50;box-shadow:0 0 10px rgba(255,59,48,.8)}
@keyframes rechazo{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  75%{transform:translateX(4px)}
}

@media (max-width:1080px){
  .celda{height:23px;font-size:12px}
  #codeEstado{font-size:8px}
}