/* SEÑAL MUERTA — estilos del gabinete y del LCD */

:root{
  --lcd-bg:      #7d8f3e;
  --lcd-bg-lit:  #9db14e;
  --lcd-ink:     #14180b;
  --case:        #2b2b2e;
  --case-hi:     #3a3a3f;
  --case-lo:     #1a1a1c;
  --key:         #37373c;
  --key-hi:      #4a4a51;
  --room:        #08090a;
}

*{ box-sizing:border-box; }

html,body{
  height:100%;
  margin:0;
  background:var(--room);
  color:#5c5c5c;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}

/* ---------- habitación ---------- */

#room{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.2rem;
  padding:1rem;
  /* una sola fuente de luz, arriba a la izquierda, muy tenue */
  background:
    radial-gradient(120% 90% at 30% 0%, #17181a 0%, #0b0c0d 45%, #050506 100%);
}

#room::after{ /* viñeta */
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:radial-gradient(70% 60% at 50% 48%, transparent 40%, rgba(0,0,0,.85) 100%);
}

#hint{
  margin:0;
  font-size:.72rem;
  letter-spacing:.08em;
  color:#2e2f31;
  text-align:center;
  transition:opacity 1.2s;
}
#hint.gone{ opacity:0; }

/* ---------- gabinete del celular ---------- */

#phone{
  --w: min(310px, 82vw);
  width:var(--w);
  flex:0 0 auto;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.9));
}

#shell{
  background:linear-gradient(160deg,var(--case-hi) 0%,var(--case) 38%,var(--case-lo) 100%);
  border-radius:34px 34px 26px 26px;
  padding:14px 14px 16px;
  border:1px solid #45454b;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -2px 6px rgba(0,0,0,.6);
}

#speaker{
  width:44%; height:7px;
  margin:2px auto 8px;
  border-radius:4px;
  background:#111;
  box-shadow:inset 0 1px 2px #000, 0 1px 0 rgba(255,255,255,.06);
}

#brand{
  text-align:center;
  font-size:.52rem;
  letter-spacing:.32em;
  color:#6a6a70;
  margin-bottom:8px;
}

/* ---------- LCD ---------- */

#lcdFrame{
  background:#141416;
  border-radius:8px;
  padding:8px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.9);
}

#lcd{
  position:relative;
  background:var(--lcd-bg);
  border-radius:3px;
  padding:9px 8px;
  overflow:hidden;
  box-shadow:
    inset 0 0 18px rgba(20,24,11,.45),
    0 0 14px rgba(157,177,78,.10);
  transition:background .12s, box-shadow .3s;
}

#screen{
  /* la grilla es de 20x11: fijo el ancho en ch para que sean exactamente
     20 columnas con cualquier monoespaciada, y el font-size para que esas
     20 columnas ocupen ~92% del ancho útil del LCD */
  width:20ch;
  margin:0 auto;
  font-family:"DejaVu Sans Mono",'Courier New',ui-monospace,monospace;
  font-weight:700;
  font-size:calc((var(--w) - 60px) / 13);
  line-height:1.34;
  letter-spacing:0;
  color:var(--lcd-ink);
  white-space:pre;
  min-height:14.74em;   /* 11 filas */
  text-shadow:0 0 1px rgba(20,24,11,.5);
}

/* fila seleccionada: video invertido, como los Nokia */
#screen .inv{
  background:var(--lcd-ink);
  color:var(--lcd-bg);
}

#scanlines{
  position:absolute; inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,.11) 0px,
    rgba(0,0,0,.11) 1px,
    transparent 1px,
    transparent 3px);
  mix-blend-mode:multiply;
}

/* luz de fondo apagada -> pantalla oscura */
#lcd.dim{ background:#4e5a28; box-shadow:inset 0 0 26px rgba(0,0,0,.6); }
#lcd.dead{ background:#101110; box-shadow:none; }
#lcd.dead #screen{ color:#101110; }

/* parpadeo */
@keyframes flick{
  0%,100%{ opacity:1 }
  12%{ opacity:.25 }
  20%{ opacity:1 }
  34%{ opacity:.1 }
  40%{ opacity:.9 }
  58%{ opacity:.3 }
  66%{ opacity:1 }
}
#lcd.flick{ animation:flick .55s steps(1,end) 2; }

/* sacudón sutil en los glitches */
@keyframes jolt{
  0%,100%{ transform:translate(0,0) }
  25%{ transform:translate(-1px,1px) }
  50%{ transform:translate(1px,-1px) }
  75%{ transform:translate(-1px,-1px) }
}
#phone.jolt{ animation:jolt .09s infinite; }

/* ---------- teclado ---------- */

#keypad{ margin-top:12px; }

.krow{
  display:flex;
  gap:6px;
  margin-bottom:6px;
  justify-content:center;
  align-items:center;
}

.key{
  flex:1;
  appearance:none;
  border:1px solid #4d4d55;
  border-top-color:#5c5c66;
  background:linear-gradient(180deg,var(--key-hi),var(--key));
  color:#c9c9d0;
  border-radius:9px;
  padding:6px 2px;
  font-family:inherit;
  font-size:.78rem;
  line-height:1.05;
  cursor:pointer;
  user-select:none;
  box-shadow:0 2px 0 #17171a, 0 3px 5px rgba(0,0,0,.5);
  transition:transform .05s, box-shadow .05s, background .05s;
}
.key b{
  display:block;
  font-size:.46rem;
  font-weight:400;
  letter-spacing:.14em;
  color:#7b7b85;
  margin-top:1px;
}
.key:active,.key.down{
  transform:translateY(2px);
  box-shadow:0 0 0 #17171a, 0 1px 3px rgba(0,0,0,.5);
  background:linear-gradient(180deg,var(--key),var(--key-hi));
}
/* las contextuales no llevan texto impreso: sólo una barra en relieve,
   como en los aparatos de la época. El nombre lo pone el LCD. */
.key.soft{
  position:relative;
  height:30px;
  padding:0;
}
.key.soft::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:38%; height:3px;
  border-radius:2px;
  background:#6d6d76;
  box-shadow:0 1px 0 rgba(255,255,255,.08), inset 0 1px 1px rgba(0,0,0,.5);
}
.key.nav{ flex:none; width:38px; padding:2px 0; font-size:.62rem; }
#navcol{ display:flex; flex-direction:column; gap:3px; }
/* la tecla que viene trabada: hundida y apagada, sin brillo de relieve */
.key.stuck{
  background:linear-gradient(180deg,#2b2b30,#333338);
  color:#63636b;
  transform:translateY(1px);
  box-shadow:0 1px 0 #17171a, inset 0 2px 4px rgba(0,0,0,.55);
}
.key.stuck b{ color:#55555d; }
.key.stuck:active,.key.stuck.down{ transform:translateY(1px); }

.key.call{ color:#7fd08a; }
.key.hang{ color:#e0736c; transform:rotate(135deg); }
.key.hang:active,.key.hang.down{ transform:rotate(135deg) translateY(2px); }

/* ---------- portada y final ---------- */

#titlecard,#endcard{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:#000;
  z-index:20;
  text-align:center;
  transition:opacity .9s;
}
#endcard{ display:none; }
#titlecard.gone,#endcard.gone{ opacity:0; pointer-events:none; }

#titlecard h1{
  font-family:"DejaVu Sans Mono",'Courier New',monospace;
  font-size:clamp(2.2rem,9vw,3.6rem);
  line-height:.98;
  letter-spacing:.2em;
  margin:0 0 .6rem;
  color:#8b9a4e;
  text-shadow:0 0 26px rgba(139,154,78,.28);
}
.tc-sub{
  margin:0 0 2.4rem;
  font-size:.78rem;
  letter-spacing:.34em;
  color:#3d3d40;
}
.tc-note{
  margin-top:1.6rem;
  font-size:.66rem;
  letter-spacing:.22em;
  color:#2b2b2e;
}

#powerOn,#restart{
  appearance:none;
  background:transparent;
  border:1px solid #4a5228;
  color:#8b9a4e;
  padding:.75rem 2.4rem;
  border-radius:2px;
  font-family:"DejaVu Sans Mono",'Courier New',monospace;
  font-size:.8rem;
  letter-spacing:.26em;
  cursor:pointer;
  transition:background .25s,color .25s,border-color .25s;
}
#powerOn:hover,#restart:hover{ background:#8b9a4e; color:#000; border-color:#8b9a4e; }

#endText{
  font-family:"DejaVu Sans Mono",'Courier New',monospace;
  font-size:clamp(.9rem,3.4vw,1.15rem);
  line-height:2;
  letter-spacing:.16em;
  color:#6d7940;
  margin:0 0 2.6rem;
  white-space:pre-line;
}

/* pantallas bajas: bajamos el celular y escondemos la ayuda */
@media (max-height:660px){
  #phone{ --w: min(250px, 62vw); }
  #hint{ display:none; }
}