/* HANDSHAKE — hoja de estilo única.
   Dirección: editorial oscura, tipografía técnica, un solo acento. Sin tarjetas anidadas. */

@font-face{
  font-family:'Inter';
  src:url('assets/fonts/Inter-var.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('assets/fonts/JetBrainsMono-var.woff2') format('woff2');
  font-weight:100 800; font-style:normal; font-display:swap;
}

:root{
  --tinta:#0A0B0D;
  --tinta-alta:#12161A;
  --linea:#252B32;
  --linea-tenue:#1A1F24;
  --texto:#E9EBEC;
  --tenue:#8A929A;
  --senal:#FFB020;
  --ok:#3ED598;
  --mal:#FF6B6B;

  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --texto-ui:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --r:6px;
  --ancho:640px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;touch-action:manipulation}

body{
  margin:0;
  background:var(--tinta);
  color:var(--texto);
  font-family:var(--texto-ui);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Fondo: una sola retícula tenue, nada de degradados ni orbes. */
body::before{
  content:'';
  position:fixed; inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right,var(--linea-tenue) 1px,transparent 1px),
    linear-gradient(to bottom,var(--linea-tenue) 1px,transparent 1px);
  background-size:64px 64px;
  opacity:.35;
  mask-image:radial-gradient(120% 80% at 50% 0%,#000 10%,transparent 75%);
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000 10%,transparent 75%);
}

.marco{
  position:relative;
  max-width:var(--ancho);
  margin:0 auto;
  padding:calc(env(safe-area-inset-top,0px) + 24px) 20px calc(env(safe-area-inset-bottom,0px) + 40px);
  min-height:100vh;
  min-height:100dvh;
}

.vista{display:none}
.vista--activa{display:block;animation:entra .28s ease-out both}
@keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ───────────── tipografía base ───────────── */
h1,h2,h3{margin:0;font-weight:640;letter-spacing:-.02em;line-height:1.15}
p{margin:0}

.entradilla{
  color:var(--tenue);
  font-size:.97rem;
  max-width:46ch;
}
.entradilla--ajustada{margin:4px 0 26px}

.datos-mono{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tenue);
  margin-top:22px;
}

.nota{
  margin-top:26px;
  padding-top:18px;
  border-top:1px solid var(--linea-tenue);
  color:var(--tenue);
  font-size:.9rem;
  max-width:46ch;
}

.pie{
  margin-top:38px;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#5D646B;
}

/* ───────────── portada ───────────── */
.portada{padding-top:14px}
.marca{margin-bottom:22px}
.marca svg{display:block}

#t-inicio{
  font-size:clamp(2.6rem,13vw,3.6rem);
  letter-spacing:-.035em;
}
.portada .entradilla{margin-top:16px}

/* Punto que viaja entre los dos signos: el apretón de manos. */
.marca svg path{stroke-linecap:butt;stroke-linejoin:miter}

/* ───────────── filas de menú y bloques ───────────── */
.menu,.bloques{
  margin-top:44px;
  border-top:1px solid var(--linea);
}

.menu__fila,.bloque__fila{
  display:grid;
  grid-template-columns:34px 1fr 24px;
  gap:14px;
  align-items:center;
  width:100%;
  padding:18px 2px;
  border:0;
  border-bottom:1px solid var(--linea);
  background:none;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .16s ease,padding .16s ease;
}
.menu__fila:active,.bloque__fila:active{background:var(--tinta-alta)}
@media(hover:hover){
  .menu__fila:hover,.bloque__fila:hover{background:var(--tinta-alta);padding-left:10px;padding-right:10px}
  .menu__fila:hover .menu__flecha{color:var(--senal);transform:translateX(3px)}
}

.menu__num,.bloque__num{
  font-family:var(--mono);
  font-size:.76rem;
  color:var(--senal);
  padding-top:2px;
}
.menu__texto{display:block}
.menu__texto strong,.bloque__texto strong{
  display:block;
  font-weight:600;
  font-size:1.06rem;
  letter-spacing:-.01em;
}
.menu__texto span,.bloque__texto span{
  display:block;
  color:var(--tenue);
  font-size:.84rem;
  margin-top:3px;
}
.menu__flecha{
  color:#4E555C;
  font-size:1rem;
  text-align:right;
  transition:transform .16s ease,color .16s ease;
}

.bloque__texto{display:block}
.mini{
  display:block;
  height:2px;
  background:var(--linea);
  margin-top:10px;
  position:relative;
}
.mini i{
  position:absolute;inset:0 auto 0 0;
  background:var(--senal);
  width:0;
}
.bloque__estado{
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--tenue);
  text-align:right;
}
.bloque__fila.hecho .bloque__estado{color:var(--ok)}
/* las filas del progreso no son pulsables: sin efecto de hover */
.bloque__fila--inactiva{cursor:default}
@media(hover:hover){
  .bloque__fila--inactiva:hover{background:none;padding-left:2px;padding-right:2px}
}

/* ───────────── barra superior ───────────── */
.barra{
  display:grid;
  grid-template-columns:40px 1fr auto;
  gap:10px;
  align-items:center;
  margin-bottom:22px;
  min-height:40px;
}
.barra__titulo{font-size:1.15rem}
.barra__xp{
  font-family:var(--mono);
  font-size:.74rem;
  color:var(--tenue);
  letter-spacing:.06em;
  white-space:nowrap;
}
.atras{
  width:40px;height:40px;
  display:grid;place-items:center;
  border:1px solid var(--linea);
  border-radius:var(--r);
  background:none;
  color:var(--texto);
  font-size:1.1rem;
  line-height:1;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.atras:active{background:var(--tinta-alta)}

.barra--juego{grid-template-columns:40px 1fr auto}
.barra__centro{display:block;min-width:0}
.barra__etiqueta{
  display:block;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tenue);
  margin-bottom:7px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.barra__progreso{display:block;height:2px;background:var(--linea)}
.barra__progreso i{display:block;height:100%;width:0;background:var(--senal);transition:width .25s ease}

/* ───────────── pregunta ───────────── */
.pregunta{
  font-size:clamp(1.32rem,5.6vw,1.6rem);
  font-weight:620;
  letter-spacing:-.02em;
  line-height:1.3;
  margin-bottom:20px;
  max-width:32ch;
}
.pregunta code{
  font-family:var(--mono);
  font-size:.86em;
  font-weight:500;
  background:var(--tinta-alta);
  border:1px solid var(--linea-tenue);
  border-radius:4px;
  padding:1px 5px;
  overflow-wrap:anywhere;
}

.ctx{
  margin:0 0 22px;
  border:1px solid var(--linea);
  border-left:3px solid var(--senal);
  border-radius:0 var(--r) var(--r) 0;
  background:#0D1114;
  overflow:hidden;
}
.ctx__eti{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--tenue);
  padding:8px 12px 0;
}
.ctx pre{
  margin:0;
  padding:8px 12px 12px;
  overflow-x:auto;
  font-family:var(--mono);
  font-size:.76rem;
  line-height:1.6;
  color:#C7CDD3;
  white-space:pre;
}

/* ───────────── opciones ───────────── */
.opciones{display:grid;gap:8px;margin:0}

.opcion{
  display:grid;
  grid-template-columns:20px 1fr;
  gap:12px;
  align-items:start;
  width:100%;
  padding:14px 15px;
  border:1px solid var(--linea);
  border-radius:var(--r);
  background:none;
  color:inherit;
  font:inherit;
  font-size:.95rem;
  line-height:1.45;
  text-align:left;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .16s ease,background .16s ease;
}
.opcion__letra{
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--tenue);
  padding-top:3px;
}
.opcion__texto{display:block;min-width:0}
.opcion code{
  font-family:var(--mono);
  font-size:.86em;
  background:var(--tinta-alta);
  border-radius:3px;
  padding:1px 4px;
  overflow-wrap:anywhere;
}

@media(hover:hover){
  .opcion:hover{border-color:#3A424A;background:var(--tinta-alta)}
}

.opciones.bloqueada .opcion{cursor:default}
.opciones.bloqueada .opcion:hover{border-color:var(--linea);background:none}

.opcion.correcta{
  border-color:var(--ok);
  border-left-width:3px;
  background:rgba(62,213,152,.07);
}
.opcion.correcta .opcion__letra{color:var(--ok)}
.opcion.fallada{
  border-color:var(--mal);
  border-left-width:3px;
  background:rgba(255,107,107,.07);
}
.opcion.fallada .opcion__letra{color:var(--mal)}
.opciones.bloqueada .opcion.apagada{opacity:.4}

/* ───────────── por qué ───────────── */
.porque{
  margin-top:20px;
  padding-left:16px;
  border-left:2px solid var(--senal);
  animation:entra .22s ease-out both;
}
.porque__eti{
  font-family:var(--mono);
  font-size:.64rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--senal);
  display:block;
  margin-bottom:7px;
}
.porque p{font-size:.95rem;color:#D3D7DA;max-width:52ch}
.porque p strong{color:var(--texto)}
.porque code{
  font-family:var(--mono);
  font-size:.86em;
  background:var(--tinta-alta);
  border-radius:3px;
  padding:1px 4px;
  overflow-wrap:anywhere;
}
.pista{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--linea-tenue);
  color:var(--tenue);
  font-size:.86rem;
  max-width:52ch;
}

/* ───────────── botón principal ───────────── */
.acciones{margin-top:24px}
.boton{
  display:block;
  width:100%;
  min-height:52px;
  padding:15px 20px;
  border:0;
  border-radius:var(--r);
  background:var(--senal);
  color:#0A0B0D;
  font:inherit;
  font-weight:640;
  font-size:1rem;
  letter-spacing:-.01em;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:filter .16s ease;
}
.boton:active{filter:brightness(.9)}
.boton:disabled{opacity:.35;cursor:default}
.boton--seco{
  background:none;
  border:1px solid var(--linea);
  color:var(--texto);
  margin-top:10px;
}

/* ───────────── ordenar pasos ───────────── */
.orden{margin:0}
.orden__eti{
  font-family:var(--mono);
  font-size:.64rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--tenue);
  display:block;
  margin:0 0 9px;
}
.orden__lista{display:grid;gap:8px;margin:0 0 22px}
.paso{
  display:grid;
  grid-template-columns:22px 1fr;
  gap:12px;
  align-items:start;
  width:100%;
  padding:13px 15px;
  border:1px solid var(--linea);
  border-radius:var(--r);
  background:none;
  color:inherit;
  font:inherit;
  font-size:.92rem;
  text-align:left;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.paso__marca{
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--tenue);
  padding-top:2px;
}
.paso.colocado{
  border-color:#3A424A;
  background:var(--tinta-alta);
}
.paso.colocado .paso__marca{color:var(--senal)}
.paso.usado{opacity:.3}
.paso.correcta{border-color:var(--ok);background:rgba(62,213,152,.07)}
.paso.correcta .paso__marca{color:var(--ok)}
.paso.fallada{border-color:var(--mal);background:rgba(255,107,107,.07)}
.paso.fallada .paso__marca{color:var(--mal)}

/* ───────────── resultado ───────────── */
.cifra-grande{
  font-family:var(--mono);
  font-size:clamp(3.4rem,20vw,5rem);
  font-weight:300;
  line-height:1;
  letter-spacing:-.04em;
  color:var(--senal);
}
.cifra-grande span{font-size:.34em;color:var(--tenue);margin-left:6px;letter-spacing:0}
.resultado__titulo{font-size:1.3rem;margin:16px 0 6px}
.resultado .entradilla{margin-bottom:26px}

.repaso{margin-top:30px;border-top:1px solid var(--linea);padding-top:18px}
.repaso__eti{
  font-family:var(--mono);
  font-size:.64rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--tenue);
  display:block;
  margin-bottom:14px;
}
.repaso__item{
  padding:14px 0;
  border-bottom:1px solid var(--linea-tenue);
}
.repaso__item p{font-size:.9rem;color:#D3D7DA}
.repaso__item em{
  display:block;
  font-style:normal;
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--tenue);
  margin-top:6px;
}

/* ───────────── progreso ───────────── */
.cifras{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--linea);
  margin-bottom:34px;
}
.cifras__celda{
  padding:18px 0;
  border-bottom:1px solid var(--linea);
}
.cifras__celda:nth-child(odd){border-right:1px solid var(--linea);padding-right:14px}
.cifras__celda:nth-child(even){padding-left:14px}
.cifras__n{
  font-family:var(--mono);
  font-size:1.7rem;
  font-weight:400;
  letter-spacing:-.03em;
  display:block;
  line-height:1.1;
}
.cifras__n small{font-size:.55em;color:var(--tenue);margin-left:3px}
.cifras__l{
  display:block;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tenue);
  margin-top:7px;
}

.enlace-peligro{
  display:block;
  margin:36px auto 0;
  padding:10px;
  border:0;
  background:none;
  color:#6B727A;
  font:inherit;
  font-size:.8rem;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.enlace-peligro:active{color:var(--mal)}

/* ───────────── reglas ───────────── */
.reglas{
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:r;
  border-top:1px solid var(--linea);
}
.reglas li{
  counter-increment:r;
  position:relative;
  padding:20px 0 20px 44px;
  border-bottom:1px solid var(--linea);
  color:var(--tenue);
  font-size:.95rem;
}
.reglas li::before{
  content:counter(r,decimal-leading-zero);
  position:absolute;
  left:0;top:21px;
  font-family:var(--mono);
  font-size:.74rem;
  color:var(--senal);
}
.reglas strong{color:var(--texto);font-weight:620}

/* ───────────── reloj ───────────── */
.reloj{
  font-family:var(--mono);
  font-size:.8rem;
  color:var(--senal);
  letter-spacing:.04em;
}
.reloj.apurado{color:var(--mal)}

/* ───────────── accesibilidad y varios ───────────── */
:focus-visible{outline:2px solid var(--senal);outline-offset:3px;border-radius:3px}
.solo-lectores{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

@media (min-width:520px){
  .opciones{gap:10px}
  .menu__fila,.bloque__fila{padding:20px 2px}
}