:root{--bg:#0a0b0b;--panel:#111212;--line:#2a2d2c;--text:#e7e7e3;--muted:#90948e;--sand:#e0b86e;--green:#a9d18b;--blue:#96bdd4;--danger:#e49383}
*{box-sizing:border-box}
html{overflow-x:hidden}
body{margin:0;background:radial-gradient(ellipse at 50% -20%,#252725,#0a0b0b 60%);color:var(--text);font-family:"DM Mono",monospace;min-height:100vh;line-height:1.6;overflow-x:hidden}
.legal-shell{width:100%;min-width:0;max-width:760px;margin:0 auto;padding:35px 22px 60px}
.legal-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:28px}
.brand{display:inline-flex;align-items:center;gap:8px;font:700 14px Unbounded,sans-serif;text-decoration:none;color:#fff;line-height:1}
.brand img{width:26px;height:26px;object-fit:contain;filter:drop-shadow(0 0 7px #73dbe755)}
.legal-top nav{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.legal-top nav a{color:var(--muted);text-decoration:none;font-size:11px;letter-spacing:.4px}
.legal-top nav a:hover{color:var(--blue)}
/* Jerarquía de CTA (principal = volver a jugar gratis; secundario = apoyar
   el proyecto), consistente en todas las páginas fuera del juego. Ambos son
   objetivo táctil real (min-height ~44px), no sólo texto con padding. */
.cta-primary{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 14px;border:1px solid var(--sand);background:#241d0a;color:var(--sand)!important;font:700 10px Unbounded,sans-serif;letter-spacing:.3px;text-transform:uppercase}
.cta-primary:hover{background:#2f2610;color:#f0d38a!important}
.cta-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 12px;border:1px solid var(--line);color:var(--muted)!important;font-size:10px;letter-spacing:.3px;text-transform:uppercase}
.cta-secondary:hover{border-color:var(--blue);color:var(--blue)!important}
.cta-secondary.is-current{border-color:var(--muted);color:var(--text)!important;cursor:default;pointer-events:none}
.legal-future-banner{margin:0 0 24px;padding:14px 16px;border:1px solid var(--sand);background:#2a230f;color:var(--sand);font-size:11px;line-height:1.6;overflow-wrap:anywhere}
.legal-future-banner b{display:block;margin-bottom:4px;font:700 11px Unbounded,sans-serif;letter-spacing:.4px}
.legal-meta{color:var(--muted);font-size:9px;letter-spacing:.6px;text-transform:uppercase;margin-bottom:6px}
.legal-shell h1{font:700 22px/1.3 Unbounded,sans-serif;margin:0 0 22px;color:#fff;overflow-wrap:anywhere}
.legal-shell h2{font:600 14px/1.4 Unbounded,sans-serif;color:var(--sand);margin:32px 0 10px;overflow-wrap:anywhere}
.legal-shell h3{font:600 11px/1.4 "DM Mono";color:var(--blue);letter-spacing:.4px;text-transform:uppercase;margin:22px 0 8px;overflow-wrap:anywhere}
.legal-shell p{margin:0 0 12px;font-size:12.5px;color:#d6d6d1;overflow-wrap:anywhere}
.legal-shell ul,.legal-shell ol{margin:0 0 12px;padding-left:20px;font-size:12.5px;color:#d6d6d1}
.legal-shell li{margin-bottom:6px;overflow-wrap:anywhere}
.legal-shell a{color:var(--blue)}
.legal-shell strong{color:#fff}
.legal-shell code{overflow-wrap:anywhere;word-break:break-word}
.legal-shell img{max-width:100%;height:auto}
.legal-toc{border:1px solid var(--line);background:var(--panel);padding:14px 16px;margin:0 0 28px;font-size:11px;max-width:100%}
.legal-toc b{display:block;color:var(--sand);font:600 10px Unbounded,sans-serif;letter-spacing:.4px;margin-bottom:8px;text-transform:uppercase}
.legal-toc ol{margin:0;padding-left:18px}
.legal-toc a{color:var(--muted);text-decoration:none}
.legal-toc a:hover{color:var(--blue)}
.legal-block{border-left:2px solid var(--line);padding-left:14px;margin:14px 0}
.legal-block.blocking{border-left-color:var(--danger)}
.legal-block.pending{border-left-color:var(--sand)}
.legal-block b{color:#fff}
/* Contenedor de scroll horizontal para tablas -- la tabla conserva su
   semántica intacta; en viewports estrechos se puede desplazar en vez de
   comprimir el texto hasta hacerlo ilegible. */
.legal-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:12px 0 20px}
.legal-table{width:100%;min-width:480px;border-collapse:collapse;margin:0;font-size:11px}
.legal-table th,.legal-table td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.legal-table th{background:var(--panel);color:var(--sand);font-weight:600}
.legal-foot{margin-top:48px;padding-top:20px;border-top:1px solid var(--line)}
.legal-foot nav{display:flex;flex-wrap:wrap;gap:14px 18px;margin-bottom:12px}
.legal-foot nav a{color:var(--muted);text-decoration:none;font-size:11px;display:inline-flex;align-items:center;min-height:32px}
.legal-foot nav a:hover{color:var(--blue)}
.legal-foot p{color:#5f6461;font-size:10px;margin:0;overflow-wrap:anywhere}

a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:1px}

@media(max-width:600px){
  .legal-shell{padding:22px 16px 40px}
  .legal-shell h1{font-size:18px}
  /* Header: brand arriba, nav debajo en columna, CTAs a ancho completo con
     objetivo táctil real -- nunca comprimidos ni desbordando el viewport. */
  .legal-top{flex-direction:column;align-items:stretch;gap:14px}
  .legal-top nav{flex-direction:column;align-items:stretch;gap:10px}
  .cta-primary,.cta-secondary{width:100%;min-height:44px;font-size:11px}
  /* Footer: columna en vez de fila comprimida, separación táctil real entre enlaces. */
  .legal-foot nav{flex-direction:column;gap:4px}
  .legal-foot nav a{min-height:40px}
  /* Nunca <10px para información importante en móvil (versión/fecha de vigencia). */
  .legal-meta{font-size:10px}
}