/* Web de Santiboy Studios (portada del estudio). Identidad del logo: papel de arroz, tinta negra, azul de
   la ola y rojo del kimono. Sin fuentes ni recursos de terceros. El logo va siempre sobre «papel» claro,
   también en modo oscuro, porque su nombre está escrito en tinta negra. Cada juego tiene su propia web
   (por ejemplo /pugdoku/) con su estilo. */
:root {
  --papel: #f5efe3;
  --tarjeta: #fffdf8;
  --tinta: #1d1b19;
  --suave: #5c574f;
  --linea: #d9cfbd;
  --azul: #1f4fb5;
  --rojo: #a63f2b;
  --titulos: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --texto: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #12161f; --tarjeta: #1b2130; --tinta: #f2ede3; --suave: #b9b2a5; --linea: #313a4e;
    --azul: #7ea2ff; --rojo: #e08a72; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papel: #12161f; --tarjeta: #1b2130; --tinta: #f2ede3; --suave: #b9b2a5; --linea: #313a4e;
  --azul: #7ea2ff; --rojo: #e08a72; color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0; padding-inline: 16px; background: var(--papel); color: var(--tinta);
  font: 17px/1.6 var(--texto);
}
a { color: var(--azul); }
.cabecera, main, .pie { max-width: 46rem; margin-inline: auto; }
.cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 18px; }
.marca { font: 700 1.15rem var(--titulos); color: var(--tinta); text-decoration: none; letter-spacing: 0.02em; }
.menu a { font-weight: 600; text-decoration: none; padding: 10px 6px; }
.portada { text-align: center; padding-block: 8px 24px; }
.logo-papel {
  width: min(100%, 420px); margin: 0 auto 8px; padding: 14px; border-radius: 22px;
  background: #fffdf8; border: 1px solid #e3d8c4; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.logo-papel img { display: block; width: 100%; height: auto; }
h1, h2 { font-family: var(--titulos); line-height: 1.2; }
h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); margin: 18px 0 4px; }
h2 { font-size: 1.45rem; margin: 0 0 12px; }
.entradilla { color: var(--suave); margin: 0; font-size: 1.1rem; }
.bloque { padding-block: 22px; border-top: 1px solid var(--linea); }
.juego {
  display: flex; gap: 16px; align-items: center; padding: 14px; border-radius: 18px; text-decoration: none; color: inherit;
  background: var(--tarjeta); border: 1px solid var(--linea);
}
.juego:hover, .juego:focus-visible { border-color: var(--azul); }
.juego img { width: 88px; height: 88px; border-radius: 20px; flex: 0 0 auto; }
.juego-texto { display: grid; gap: 2px; min-width: 0; }
.juego-nombre { font: 700 1.3rem var(--titulos); color: var(--tinta); }
.sello { color: var(--rojo); font-weight: 700; font-size: 0.95rem; }
.correo { font-weight: 700; overflow-wrap: anywhere; }
.vacio { text-align: center; padding-block: 48px; border-top: 0; }
.pie { border-top: 1px solid var(--linea); padding-block: 20px 32px; color: var(--suave); font-size: 0.95rem; }
.pie nav { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.pie nav a { padding-block: 6px; }
.pie-nota { font-size: 0.85rem; }
.pendiente { background: #ffe58f; color: #1d1b19; }