/* ---------------------------------------------------------------------------
   RONDA · lo que comparten todos los juegos de la casa
   ---------------------------------------------------------------------------
   Aquí viven los colores, el papel con trama, la cabecera de publicación, los
   botones y la cinta. Cada juego añade encima solo lo suyo — Madeja añade las
   fichas y los grupos; el que venga añadirá lo que necesite.

   La firma del diseño es el bloque impreso: filete de tinta y sombra dura de
   3 px que se hunde al pulsar. Si eso se quita, esto vuelve a parecer una
   aplicación cualquiera.
--------------------------------------------------------------------------- */
:root{
  /* Papel de imprenta, no fondo de aplicación. */
  --paper:#EFE9DA;
  --surface:#F7F3E8;
  --trama:rgba(24,23,18,.085);   /* la trama de puntos del papel */
  --tile:#F7F3E8;
  --tile-hover:#EDE6D5;
  --ink:#181712;
  --ink-2:#4C4638;
  --muted:#6E6653;
  --line:#181712;                /* el filete es tinta, no un gris */
  --line-suave:#B9B09A;
  --dura:#181712;                /* la sombra dura del bloque impreso */
  --sel:#181712;
  --sel-ink:#F7F3E8;

  --g0:#6F7A46;  /* olivo  */
  --g1:#BC8722;  /* ocre   */
  --g2:#38598B;  /* índigo */
  --g3:#A03F33;  /* rubia  */
  --on-g:#F7F3E8;

  --f-disp:"Fraunces",Georgia,serif;
  --f-tile:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --f-ui:"Barlow","Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#14130E; --surface:#1E1C15; --trama:rgba(237,231,214,.06);
    --tile:#242118; --tile-hover:#2E2A1F;
    --ink:#EDE7D6; --ink-2:#C3BBA6; --muted:#8C8471;
    --line:#7B7259; --line-suave:#3A3529; --dura:#000;
    --sel:#EDE7D6; --sel-ink:#14130E;
    --g0:#8B9860; --g1:#D5A247; --g2:#5E80B4; --g3:#C15F51; --on-g:#14130E;
  }
}
:root[data-theme="dark"]{
  --paper:#14130E; --surface:#1E1C15; --trama:rgba(237,231,214,.06);
  --tile:#242118; --tile-hover:#2E2A1F;
  --ink:#EDE7D6; --ink-2:#C3BBA6; --muted:#8C8471;
  --line:#7B7259; --line-suave:#3A3529; --dura:#000;
  --sel:#EDE7D6; --sel-ink:#14130E;
  --g0:#8B9860; --g1:#D5A247; --g2:#5E80B4; --g3:#C15F51; --on-g:#14130E;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--f-ui); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
  display:flex; flex-direction:column; align-items:center;
  padding:0 0 env(safe-area-inset-bottom);
}
/* La trama del papel va en una capa fija detrás de todo, no sobre el body.
   Pintada sobre el body, Safari en iPhone la vuelve a dibujar en cada píxel
   de desplazamiento —son miles de puntitos— y el teléfono se atasca al hacer
   scroll. Fija, se dibuja una vez y el scroll no la toca. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(var(--trama) .9px, transparent .9px);
  background-size:4px 4px
}

.app{width:100%;max-width:520px;display:flex;flex-direction:column;flex:1;padding:0 14px}

/* --- La cinta: cuatro hebras que se tiñen al resolverse ----------------- */
.cinta{display:flex;width:100%;height:7px;flex:none}
.cinta i{flex:1;background:var(--line-suave);transition:background .4s ease}
.cinta i.g0{background:var(--g0)} .cinta i.g1{background:var(--g1)}
.cinta i.g2{background:var(--g2)} .cinta i.g3{background:var(--g3)}

/* --- Cabecera de publicación -------------------------------------------- */
header{text-align:center;padding:20px 0 0}
.casa{
  font-family:var(--f-disp);font-size:16px;font-weight:600;color:var(--muted);
  display:flex;align-items:center;justify-content:center;gap:11px
}
.casa::before,.casa::after{content:"";height:1px;width:34px;background:var(--line-suave)}
h1{
  font-family:var(--f-disp);font-size:clamp(42px,13vw,64px);font-weight:900;
  letter-spacing:-.045em;line-height:.86;text-transform:uppercase;margin-top:6px
}
.sub{
  display:flex;align-items:center;justify-content:center;gap:10px;
  border-top:1.5px solid var(--ink);border-bottom:1px solid var(--line-suave);
  margin-top:12px;padding:5px 0;font-size:14px;color:var(--ink-2);font-weight:500
}
.sub .pleca{width:1px;height:12px;background:var(--line-suave);display:block}
.aviso{
  margin-top:12px;font-size:14px;color:var(--ink-2);background:var(--surface);
  border:1.5px solid var(--line);padding:7px 14px;display:inline-block
}

.instr{text-align:center;font-size:15px;color:var(--ink-2);margin:16px 0}

/* --- Botones -----------------------------------------------------------
   Los estilos valen para <button> y para <a class="b">: la salida hacia el
   siguiente juego es un enlace, y con el selector atado a button quedaba de
   24 px de alto, igual de invisible que el enlace del pie que vino a
   reemplazar.-- */
/* El renglón donde cada juego habla al jugador («Te falta una…», «Esa no está
   en la lista»). Reserva su alto aunque esté vacío: sin eso, el aviso empuja
   la pantalla hacia abajo cada vez que aparece. */
/* --- El recuadro final -------------------------------------------------
   Los tres juegos terminan igual: título, resultado, cuadro compartible y
   estadísticas. Vivía dentro de Madeja, así que Cifras y Revuelto lo
   mostraban sin marco y con las cifras apelotonadas. */
/* --- El recuadro final --------------------------------------------------- */
#final{
  margin-top:24px;padding:24px 20px;background:var(--surface);
  border:1.5px solid var(--line);box-shadow:4px 4px 0 var(--dura);
  text-align:center;animation:revelar .4s cubic-bezier(.2,.9,.3,1.25)
}
#final h2{font-family:var(--f-disp);font-size:31px;font-weight:900;letter-spacing:-.035em;margin-bottom:6px}
#final .r{font-size:15px;color:var(--ink-2);margin-bottom:18px}
pre.cuadro{font-family:var(--f-ui);font-size:25px;line-height:1.24;letter-spacing:3px;margin:0 0 18px;white-space:pre}
.stats{display:flex;justify-content:center;gap:28px;margin-top:20px;padding-top:16px;border-top:1.5px solid var(--line)}
.stats div{text-align:center}
.stats b{display:block;font-family:var(--f-disp);font-size:28px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.stats span{font-size:12.5px;color:var(--muted)}
@keyframes revelar{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* Cómo seguir después de terminar. Va antes que el recuadro de instalar
   porque es lo que la persona necesita en ese momento: saber que hay más
   juegos hoy y llegar a ellos de un toque. */
#siguiente{
  margin-top:20px;padding-top:18px;border-top:1.5px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:10px
}
#siguiente p{font-size:15px;color:var(--ink-2);margin:0}
#siguiente .b{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}

/* El pie deja de ser el único camino de vuelta, pero que se lea. */
footer a{font-weight:600}

/* Privacidad: tiene que estar, pero no competir con nada. Mismo gris y mismo
   tamaño que el texto del pie, sin negrita ni subrayado, al final de la línea.
   El relleno vertical es para que se pueda tocar con el dedo sin que se vea
   más grande. */
footer a.discreto{font-weight:400;text-decoration:none;color:var(--muted);padding:6px 0}
footer a.discreto::before{content:"·";margin:0 7px}
footer a.discreto:hover{text-decoration:underline}

/* El recuadro que ofrece instalar o invitar. Separado de lo de arriba: dentro
   de un juego cae debajo de las estadísticas, y en la portada debajo de la
   última tarjeta, que llevan filete y sombra dura. Pegado se lee como parte
   de la tarjeta anterior. */
#instalar{
  margin-top:24px;padding-top:18px;border-top:1px solid var(--line-suave);
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  text-align:center
}
#instalar p{font-size:14.5px;color:var(--ink-2);margin:0}
#instalar b{font-weight:600;color:var(--ink)}

#aviso{
  text-align:center;min-height:24px;margin-top:16px;
  font-size:15.5px;font-weight:600;color:var(--ink-2)
}

/* Los botones nunca pegados a lo de arriba: las fichas llevan sombra dura de
   3 px y sin este aire se ven encima de los botones. */
.acciones{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.b{
  font-family:var(--f-ui);font-size:15.5px;font-weight:600;
  min-height:48px;padding:12px 20px;
  border:1.5px solid var(--line);border-radius:3px;
  background:var(--surface);color:var(--ink);
  box-shadow:3px 3px 0 var(--dura);cursor:pointer;
  transition:background .13s,color .13s,opacity .13s,transform .09s,box-shadow .09s
}
.b:hover:not(:disabled){background:var(--tile-hover)}
.b:active:not(:disabled){transform:translate(3px,3px);box-shadow:0 0 0 var(--dura)}
/* Deshabilitado: el bloque ya está hundido, no un slab gris encima del papel. */
.b:disabled{opacity:.5;box-shadow:none;cursor:default;transform:translate(3px,3px)}
.b.p:disabled{background:var(--surface);color:var(--muted);border-color:var(--line-suave)}
.b.p{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.b.p:hover:not(:disabled){opacity:.88;background:var(--ink)}
.b:focus-visible{outline:3px solid var(--g2);outline-offset:3px}

footer{
  margin-top:auto;padding:26px 0 20px;text-align:center;font-size:13px;color:var(--muted);
  border-top:1px solid var(--line-suave);margin-top:34px
}
[hidden]{display:none!important}
a{color:inherit}
.casa a{text-decoration:none}
.casa a:hover{text-decoration:underline}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}