/* Escribe Borracho — etapa 01
   Máquina de escribir punk: nada redondeado, todo un poco chueco. */

:root{
  --ink:#14110e;
  --ink-3:#1d1915;      /* tarjeta de muerte */
  --paper:#f2ede3;
  --text-light:#e6ddcc;
  --muted-dark:#b8ae9e;
  --muted:#7a7164;
  --red:#c93a32;
  --red-hover:#e0564d;
  --rule:#3a332b;       /* divisores punteados */
  --rule-2:#4a423a;     /* bordes de botón */
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--ink);
  color:var(--text-light);
  font-family:'Courier Prime',monospace;
}

a{color:var(--red);text-decoration:none}
a:hover{color:var(--red-hover)}

[hidden]{display:none !important}

button{font-family:'Courier Prime',monospace}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}

@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ---------- Pantalla: inicio ---------- */

.inicio{
  max-width:860px;
  margin:0 auto;
  padding:48px 32px 64px;
  display:flex;
  flex-direction:column;
  gap:36px;
}

.encabezado{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  flex-wrap:wrap;
}
.encabezado__marca{display:flex;flex-direction:column;gap:8px}
.encabezado img{height:24px;width:auto;align-self:flex-start;filter:invert(1);opacity:.8;margin-bottom:6px}
.encabezado__link{font-size:14px;margin-top:10px}

h1{
  font-family:'Special Elite',monospace;
  font-size:52px;
  line-height:1;
  color:var(--red);
  transform:rotate(-1.2deg);
  margin:0;
  font-weight:400;
}
.kicker{font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--muted)}

.duracion{display:flex;flex-direction:column;gap:18px}
.duracion__label{font-size:20px}
.duracion__opciones{display:flex;gap:12px;flex-wrap:wrap}

.min{
  font-size:17px;
  padding:10px 18px;
  cursor:pointer;
  background:transparent;
  color:var(--text-light);
  border:2px dashed var(--rule-2,#4a423a);
}
.min:nth-child(1){transform:rotate(-1.5deg)}
.min:nth-child(2){transform:rotate(1deg)}
.min:nth-child(3){transform:rotate(-0.8deg)}
.min:nth-child(4){transform:rotate(1.4deg)}
.min:nth-child(5){transform:rotate(-1.1deg)}
.min:nth-child(6){transform:rotate(0.7deg)}
.min[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:var(--paper)}

/* El interruptor del modo fresa: el mismo botón chueco que los minutos, para
   que se lea como parte de la misma decisión. Apagado va de contorno con la
   fresa en gris; prendido se rellena de rojo y la fresa se pone a color. Lo
   que pasa si le picas se explica en el renglón de abajo. */
.fresa{
  align-self:flex-start;
  display:flex;align-items:center;gap:10px;
  font-size:17px;padding:10px 18px;cursor:pointer;
  background:transparent;color:var(--text-light);
  border:2px dashed var(--rule-2);
  transform:rotate(-1.2deg);
}
.fresa__icono{font-size:19px;line-height:1;flex:none;filter:grayscale(1);opacity:.45}
.fresa:hover{border-color:var(--red);color:var(--red)}
.fresa[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:var(--paper)}
.fresa[aria-pressed="true"]:hover{background:var(--red-hover);border-color:var(--red-hover);color:var(--paper)}
/* Prendido, la fresa queda roja sobre rojo: un contorno claro la despega. */
.fresa[aria-pressed="true"] .fresa__icono{
  filter:drop-shadow(0 0 1.5px rgba(242,237,227,.95));opacity:1;
}
.fresa__nota{
  font-size:13px;line-height:1.7;color:var(--muted);
  max-width:520px;margin:-6px 0 0;
}
.fresa__nota b{color:var(--muted-dark);font-weight:400}

.empezar{
  align-self:flex-start;
  font-family:'Special Elite',monospace;
  font-size:26px;
  letter-spacing:4px;
  text-transform:uppercase;
  background:var(--red);
  color:var(--paper);
  border:2px solid var(--red);
  padding:14px 42px;
  cursor:pointer;
  transform:rotate(-1deg);
  margin-top:6px;
}
.empezar:hover{background:var(--red-hover);border-color:var(--red-hover)}

/* Aviso discreto: sobreviviste antes y el texto sigue guardado. */
.rescate{font-size:14px;color:var(--muted);margin:0}
.rescate button{
  background:transparent;border:none;color:var(--red);
  font-size:14px;cursor:pointer;text-decoration:underline;padding:0;
}
.rescate button:hover{color:var(--red-hover)}

.reglas{
  display:flex;
  flex-direction:column;
  gap:14px;
  border-top:2px dashed var(--rule);
  padding-top:28px;
  max-width:640px;
}
.regla{display:flex;gap:14px;align-items:baseline}
.regla b{color:var(--red);font-family:'Special Elite',monospace;white-space:nowrap;font-weight:400}
.regla span{font-size:15px;color:var(--muted-dark)}

.regla--fresa span b{color:var(--text-light);font-weight:400}

/* ---------- La bóveda: versiones donde fallaste ---------- */

.boveda{
  border-top:2px dashed var(--rule);
  padding-top:28px;
  display:flex;flex-direction:column;gap:14px;
}
.boveda__titulo{
  font-family:'Special Elite',monospace;font-size:26px;font-weight:400;
  color:var(--red);margin:0;transform:rotate(-0.8deg);
}
.boveda__nota{font-size:13px;color:var(--muted);line-height:1.7;max-width:640px;margin:0}
.boveda__lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}

.version{
  border:2px dashed var(--rule-2);
  padding:16px 18px;
  display:flex;flex-direction:column;gap:12px;
}
.version--abierta{border-color:var(--red)}
.version__cabeza{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap}
.version__fecha{font-size:13px;color:var(--muted);text-transform:lowercase}
.version__reloj{
  font-family:'Special Elite',monospace;font-size:15px;
  color:var(--muted-dark);white-space:nowrap;
}
.version--abierta .version__reloj{color:var(--red)}
.version__acciones{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.version__acciones .btn-punteado{font-size:13px;padding:6px 12px}
.version__acciones .btn-punteado:hover{border-color:var(--red);color:var(--red)}
.version__acciones .btn-plano{font-size:13px}
.version__texto{
  margin:0;padding:16px;
  background:var(--ink-3);
  font-family:'Courier Prime',monospace;font-size:15px;line-height:1.8;
  color:var(--text-light);
  white-space:pre-wrap;word-break:break-word;
  max-height:340px;overflow:auto;
}

/* El bloque de compartir se pinta solo (comun/compartir.js) y toma el color de
   aquí: por eso hereda el gris apagado, para no competir con el botón rojo. */
.compartir-caja{
  border-top:2px dashed var(--rule);
  padding-top:26px;
  color:var(--muted-dark);
}

.creditos img{height:15px;width:auto;display:block;filter:invert(1);opacity:.55;margin-bottom:14px}
.creditos p{font-size:13px;color:var(--muted);line-height:1.7;max-width:640px;margin:0}

/* ---------- Lo que se lee hasta abajo ----------
   Explica de qué va la app, para quien llegó de un buscador y todavía no sabe
   qué es esto. */

.explica{
  border-top:2px dashed var(--rule);
  padding-top:28px;
  max-width:640px;
  color:var(--muted-dark);
}
.explica h2{
  font-family:'Special Elite',monospace;font-weight:400;
  font-size:21px;line-height:1.25;color:var(--text-light);
  margin:26px 0 10px;
}
.explica h2:first-child{margin-top:0}
.explica p{font-size:14.5px;line-height:1.8;margin:0 0 12px}
.explica em{color:var(--text-light)}

/* ---------- Pantalla: escritura ---------- */

/* --alto-aviso lo pone aviso.js. Las pantallas fijas arrancan abajo de la
   barra para no quedar tapadas. */
.escritura{position:fixed;inset:0;top:var(--alto-aviso,0px);background:var(--ink);overflow:hidden}

.peligro{position:absolute;inset:0;pointer-events:none;z-index:4;box-shadow:inset 0 0 220px rgba(201,58,50,0)}
.barra{position:absolute;top:0;left:0;height:4px;background:var(--red);width:0;z-index:6;transition:width .2s linear}

.hud{
  position:absolute;top:16px;left:24px;z-index:6;
  font-size:15px;color:var(--muted);
  display:flex;gap:18px;align-items:baseline;
}
.hud__reloj{font-family:'Special Elite',monospace;font-size:20px;color:var(--text-light)}
.hud__palabras{letter-spacing:2px;text-transform:uppercase;font-size:11px}

.hud__fresa{
  letter-spacing:2px;text-transform:uppercase;font-size:11px;
  color:var(--red);border:1px dashed var(--red);padding:2px 8px;
}

.rendirse{
  position:absolute;top:16px;right:24px;z-index:6;
  background:transparent;border:none;color:var(--muted);
  font-size:13px;cursor:pointer;text-decoration:underline;
}

.escenario{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:30px;z-index:1;padding:40px;pointer-events:none;
}
.borroso{
  max-width:720px;max-height:200px;overflow:hidden;
  filter:blur(7px);opacity:.5;
  font-size:20px;line-height:1.6;text-align:center;
  white-space:pre-wrap;word-break:break-word;
}
.ultima{
  font-family:'Special Elite',monospace;
  font-size:clamp(96px,20vw,170px);
  line-height:1;color:var(--paper);
  min-height:180px;
}
.ultima--fantasma{opacity:.25}
.pista{font-size:15px;color:var(--muted);animation:blink 1.4s infinite;text-align:center}

/* El textarea real: invisible, encima de todo, imposible de esquivar. */
.captura{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:.01;background:transparent;color:transparent;caret-color:transparent;
  border:none;resize:none;z-index:5;font-size:16px;
}

/* ---------- Pantalla: muerte ---------- */

.muerte{
  position:fixed;inset:0;top:var(--alto-aviso,0px);background:var(--ink);
  display:flex;align-items:center;justify-content:center;z-index:10;padding:24px;
}
.muerte__tarjeta{
  border:2px dashed var(--red);
  background:var(--ink-3);
  padding:40px 48px;max-width:560px;
  display:flex;flex-direction:column;gap:16px;
  transform:rotate(-0.6deg);
}
.muerte__tarjeta h2{font-family:'Special Elite',monospace;font-size:40px;color:var(--red);line-height:1;margin:0;font-weight:400}
.muerte__tarjeta p{font-size:16px;line-height:1.7;color:var(--muted-dark);margin:0}
.muerte__tarjeta button{
  align-self:flex-start;
  font-family:'Special Elite',monospace;font-size:18px;
  letter-spacing:3px;text-transform:uppercase;
  background:var(--red);color:var(--paper);border:none;padding:10px 28px;cursor:pointer;
}
.muerte__tarjeta button:hover{background:var(--red-hover)}

.muerte__tarjeta--fresa{transform:rotate(0.7deg)}
.muerte__tarjeta--fresa h2{letter-spacing:3px}
.muerte__tarjeta--fresa p b{color:var(--text-light);font-weight:400}
.muerte__regano{font-size:14px !important;color:var(--muted) !important;border-left:2px dashed var(--rule-2);padding-left:14px}

/* ---------- Pantalla: sobreviviste ---------- */

.libre{position:fixed;inset:0;top:var(--alto-aviso,0px);background:var(--ink);display:flex;flex-direction:column;z-index:8}
.libre__barra{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:20px 28px;border-bottom:2px dashed var(--rule);flex-wrap:wrap;
}
.libre__titulo{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
.libre__titulo h2{font-family:'Special Elite',monospace;font-size:28px;color:var(--red);transform:rotate(-1deg);margin:0;font-weight:400}
.libre__titulo span{font-size:13px;color:var(--muted)}
.libre__acciones{display:flex;gap:14px;align-items:center;flex-wrap:wrap}

.btn-punteado{
  font-size:14px;background:transparent;color:var(--text-light);
  border:2px dashed var(--rule-2,#4a423a);padding:8px 16px;cursor:pointer;
}
.btn-punteado:hover{border-color:var(--red);color:var(--red)}

.btn-plano{
  font-size:14px;background:transparent;color:var(--muted);
  border:none;cursor:pointer;text-decoration:underline;
}
.btn-lleno{
  font-family:'Special Elite',monospace;font-size:16px;
  background:var(--red);color:var(--paper);padding:9px 20px;
  letter-spacing:2px;text-transform:uppercase;
}
.btn-lleno:hover{background:var(--red-hover);color:var(--paper)}

.libre__texto{
  flex:1;background:var(--ink);color:var(--text-light);
  border:none;outline:none;resize:none;
  padding:36px 15%;
  font-family:'Courier Prime',monospace;font-size:19px;line-height:1.8;
}

/* ---------- Chiquito ---------- */

@media (max-width:700px){
  .inicio{padding:36px 22px 56px;gap:28px}
  h1{font-size:38px}
  .empezar{font-size:22px;padding:12px 30px}
  .escenario{gap:18px;padding:24px}
  .ultima{min-height:120px}
  .borroso{max-height:120px;font-size:17px}
  .libre__texto{padding:24px 22px;font-size:17px}
  .hud{left:16px}
  .hud__fresa{display:none}
  .version__cabeza{flex-direction:column;gap:4px}
  .rendirse{right:16px}
}