:root{
  --papel:#0d0c0a;
  --tinta:#e8e2d4;
  --tenue:#8a8474;
  --ambar:#d9a441;
  --rojo:#a8342a;
  --linea:#2a2721;
  --mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
}

*{box-sizing:border-box}

html,body{margin:0;padding:0;background:var(--papel);color:var(--tinta);
  font-family:var(--mono);font-size:15px;line-height:1.65;
  -webkit-text-size-adjust:100%;}

body{min-height:100dvh;display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);}

/* grano de papel viejo */
.grano{position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.035;
  background-image:radial-gradient(circle at 50% 50%, #fff 1px, transparent 1px);
  background-size:3px 3px;mix-blend-mode:overlay;}

/* ── cabecera ── */
header{padding:22px 20px 14px;border-bottom:1px solid var(--linea);}
.dam{font-size:26px;letter-spacing:.42em;font-weight:700;color:var(--tinta);}
.sub{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--tenue);margin-top:3px;}
.exp{display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin-top:14px;font-size:11px;color:var(--tenue);letter-spacing:.06em;}
.sello{border:1.5px solid var(--rojo);color:var(--rojo);padding:2px 8px;
  font-size:9px;letter-spacing:.18em;transform:rotate(-3deg);border-radius:2px;
  opacity:.85;white-space:nowrap;}

.digitos{display:flex;gap:9px;margin-top:16px;}
.dig{width:32px;height:40px;border:1px solid var(--linea);border-radius:2px;
  display:grid;place-items:center;font-size:19px;color:var(--tenue);
  background:#000;transition:.4s;}
.dig.lleno{color:var(--ambar);border-color:var(--ambar);
  box-shadow:0 0 14px rgba(217,164,65,.18);}
.dig.nuevo{animation:sellar .7s ease-out;}
@keyframes sellar{0%{transform:scale(1.5) rotate(-8deg);opacity:0}60%{transform:scale(.95)}100%{transform:none;opacity:1}}

/* ── cuerpo ── */
main{flex:1;padding:26px 20px 34px;max-width:640px;width:100%;margin:0 auto;}

.doc{white-space:pre-wrap;font-size:14.5px;line-height:1.8;}
.doc.grande{font-size:15.5px}

.titulo{font-size:13px;letter-spacing:.22em;color:var(--ambar);
  text-transform:uppercase;margin-bottom:4px;}
.subtitulo{font-size:10px;letter-spacing:.14em;color:var(--tenue);
  text-transform:uppercase;margin-bottom:20px;}

.regla{height:1px;background:var(--linea);margin:24px 0;}

.pregunta{margin:26px 0 18px;white-space:pre-wrap;font-size:16px;line-height:1.7;}
.contador{font-size:10px;letter-spacing:.14em;color:var(--tenue);
  text-transform:uppercase;margin-bottom:6px;}

/* ── formulario ── */
form{display:flex;flex-direction:column;gap:12px;margin-top:8px;}
input[type=text]{background:#000;border:1px solid var(--linea);color:var(--tinta);
  font-family:var(--mono);font-size:17px;padding:14px 15px;border-radius:2px;width:100%;}
input[type=text]:focus{outline:none;border-color:var(--ambar);
  box-shadow:0 0 0 1px rgba(217,164,65,.25);}

button{background:transparent;border:1px solid var(--tenue);color:var(--tinta);
  font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  padding:13px 18px;border-radius:2px;cursor:pointer;transition:.18s;}
button:hover,button:active{border-color:var(--ambar);color:var(--ambar);}
button.principal{border-color:var(--ambar);color:var(--ambar);}
button:disabled{opacity:.3;cursor:not-allowed;}

.botonera{display:flex;gap:12px;}
.botonera button{flex:1;font-size:15px;padding:16px;}

/* ── avisos ── */
.aviso{border-left:2px solid var(--rojo);padding:10px 14px;margin:18px 0;
  color:#d99b93;font-size:14px;background:rgba(168,52,42,.07);}
.pista{border-left:2px solid var(--ambar);padding:10px 14px;margin:12px 0;
  color:var(--ambar);font-size:14px;background:rgba(217,164,65,.06);}
.pista b{display:block;font-size:9px;letter-spacing:.18em;opacity:.7;
  text-transform:uppercase;margin-bottom:3px;font-weight:400;}

.bloqueo{text-align:center;padding:30px 16px;border:1px dashed var(--linea);
  border-radius:2px;margin:22px 0;}
.bloqueo .reloj{font-size:34px;color:var(--rojo);letter-spacing:.06em;margin:8px 0;}
.bloqueo .txt{font-size:12px;color:var(--tenue);letter-spacing:.1em;text-transform:uppercase;}

/* ── espera ── */
.espera{text-align:center;padding:20px 0;}
.espera .reloj{font-size:30px;color:var(--ambar);margin:14px 0 6px;letter-spacing:.05em;}
.espera .etiqueta{font-size:10px;letter-spacing:.2em;color:var(--tenue);text-transform:uppercase;}

/* ── imágenes ── */
.marco{border:1px solid var(--linea);padding:8px;background:#000;margin:20px 0;border-radius:2px;}
.marco img{width:100%;display:block;border-radius:1px;}

/* ── morse ── */
.neon{position:relative;background:#000;border:1px solid var(--linea);
  padding:14px;border-radius:2px;margin:20px 0;}
.neon img{width:100%;display:block;opacity:.06;transition:opacity 60ms linear;}
.neon img.on{opacity:1;filter:drop-shadow(0 0 22px rgba(233,120,255,.55));}
.morse-ctrl{display:flex;gap:10px;margin-top:12px;}
.morse-ctrl button{flex:1;font-size:11px;padding:10px;}

/* ── ruta ── */
.paradas{display:flex;gap:8px;margin:20px 0;}
.parada{flex:1;height:4px;background:var(--linea);border-radius:2px;}
.parada.ok{background:var(--ambar);}

/* ── final ── */
.combinacion{font-size:40px;letter-spacing:.3em;color:var(--ambar);text-align:center;
  margin:26px 0;text-shadow:0 0 26px rgba(217,164,65,.35);}

footer{padding:0 20px 26px;font-size:10px;color:var(--tenue);
  letter-spacing:.1em;text-align:center;}

.parpadeo{animation:parp 1.1s steps(2,end) infinite;}
@keyframes parp{0%,100%{opacity:1}50%{opacity:0}}