/* ─────────── Juego (v29, 26-oct): panel VIII, lo último de la web ───────────
   Instrucciones a la izquierda, el juego a la derecha y el mensaje abajo como cierre discreto.
   El tablero usa la paleta clara fija en los tres modos, como la ventana de los perros: los sprites son tinta sobre papel. */
.panel.juego{display:flex; flex-direction:column; padding-bottom:0}
.panel.juego > .jg{margin-bottom:clamp(20px, 3.2vh, 40px)}
/* guincha negra del cierre: la misma barra del pie de antes, solo con lo esencial */
.jg-guincha{flex:none; display:grid; grid-template-columns:1fr auto 1fr}   /* el correo queda al centro de verdad */
.jg-guincha-der{justify-self:end; display:flex; align-items:center; gap:22px}
.jg-guincha a{color:inherit; text-decoration:none; transition:color .15s}
.jg-guincha a:hover{color:var(--on-ink)}
.jg-guincha-mail{text-transform:none; letter-spacing:.04em; font-size:11px}
.jg-guincha-redes{display:flex; gap:14px}
.jg-guincha-redes a{display:grid; place-items:center; padding:2px}
.jg-guincha-redes svg{display:block}
/* la ← del cierre: como las flechas del deck, en negativo */
.jg-guincha-volver{width:36px; height:30px; display:grid; place-items:center; padding:0; font:700 14px/1 var(--mono); color:var(--on-ink); background:none;
  border:1.5px solid color-mix(in srgb, var(--on-ink) 45%, transparent); border-radius:var(--radio-s,3px); cursor:pointer; transition:background .15s, color .15s}
.jg-guincha-volver:hover{background:var(--on-ink); color:var(--ink)}
/* con el juego activo se van las flechas flotantes (escritorio) y la barra de abajo (celular); la guincha llega al borde */
html.en-juego .ruler-arrows{visibility:hidden}
html.en-juego[data-deck="f"] .ruler{display:none}
[data-deck="h"] .panel.juego{padding-bottom:0}
.jg{--jg-w:460px; --jg-filo:var(--ink); flex:1; min-height:auto; display:grid;
  /* si las instrucciones no caben, la fila crece y el panel se recorre: nunca se encima el cierre */
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows:minmax(auto, 1fr) auto;
  column-gap:clamp(32px, 5vw, 96px); row-gap:20px}
.jg-instr{grid-column:1; grid-row:1; align-self:start; margin-block:auto; max-width:600px}   /* centrado que nunca se sale por arriba */
.jg-instr h2{margin:0 0 18px}
.jg-lead{font-size:clamp(16px, 1.15vw, 18px); line-height:1.5; color:var(--ink); max-width:44ch; margin:0 0 18px; text-wrap:pretty}
.jg-items{list-style:none; margin:0 0 18px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; max-width:600px}
.jg-items li{display:grid; grid-template-columns:54px 1fr; align-items:center; gap:10px}
.jg-items p{margin:0; font-size:12.5px; line-height:1.38; color:var(--ink-2); text-wrap:pretty}
.jg-items b{font-weight:700; color:var(--ink)}
/* miniaturas sobre papel claro fijo, como el tablero (en oscuro y rojo se leen igual) */
.jg-prev{display:flex; gap:2px; color:#15140F}
.jg-prev canvas, .jg-prev svg{display:block; width:26px; height:26px; flex:none; border-radius:var(--radio-s,3px); background:#F5F3EE; image-rendering:pixelated}
.jg-prev svg{padding:2px; box-sizing:border-box}
.jg-teclas{font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--mute); margin:0 0 16px}
.jg-teclas--tactil{display:none}
.jg-opciones{display:flex; gap:14px; align-items:flex-end}
.jg-opciones label{display:flex; flex-direction:column; gap:5px; font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute)}
.jg-opciones select{font-family:var(--mono); font-size:12px; color:var(--ink); background:var(--paper-2); border:1.5px solid var(--ink);
  border-radius:var(--radio-s,3px); padding:5px 8px}

.jg-zona{grid-column:2; grid-row:1 / span 2; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px}
.jg-hud{width:var(--jg-w); max-width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink)}
.jg-hud b{font-weight:700; color:var(--red-txt)}
.jg-hud > span{display:flex; align-items:center; gap:6px; white-space:nowrap}
.jg-vidas{min-width:44px; justify-content:flex-end}
.jg-vidas i{display:inline-block; width:16px; height:16px; background:currentColor; image-rendering:pixelated;   /* silueta del ratón en el color del texto */
  -webkit-mask:var(--jg-raton) center/contain no-repeat; mask:var(--jg-raton) center/contain no-repeat}
.jg-reloj{width:22px; height:22px; flex:none}
.jg-pausa{display:inline-flex; align-items:center; gap:6px; font:inherit; letter-spacing:inherit; text-transform:inherit; color:var(--ink);
  background:none; border:1.5px solid var(--ink); border-radius:var(--radio-s,3px); padding:4px 8px; cursor:pointer}
.jg-pausa:hover:not(:disabled){background:var(--ink); color:var(--paper)}
.jg-pausa:disabled{opacity:.3; cursor:default}
.jg-pausa svg{width:9px; height:9px; flex:none}
.jg-ico-seguir, .jg[data-estado="pausa"] .jg-ico-pausa{display:none}
.jg[data-estado="pausa"] .jg-ico-seguir{display:block}
@media (max-width:430px){ .jg-pausa-txt{display:none} .jg-pausa{padding:6px 8px} }
/* dentro del tablero, paleta clara fija (la carta y su botón no cambian con el modo de color) */
.jg-tablero{--paper:#F5F3EE; --paper-2:#FBFAF7; --paper-3:#E7E4DC; --ink:#15140F; --ink-2:#34322C; --mute:#66635B;
  --red:#E8342A; --red-deep:#C7281F; --red-fill:#E8342A; --red-fill-2:#C7281F; --on-ink:#F5F3EE;
  position:relative; width:var(--jg-w); height:var(--jg-w); max-width:100%; flex:none; border-radius:var(--radio,6px); overflow:hidden;
  background:#F5F3EE; color:#15140F; touch-action:none; outline:none;
  box-shadow:0 0 0 1.5px var(--jg-filo)}   /* en modo oscuro el marco de tinta se perdería contra el fondo */
.jg-tablero:focus-visible{box-shadow:0 0 0 1.5px var(--jg-filo), 0 0 0 4px var(--red-txt)}
.jg[data-estado="jugando"] .jg-tablero:focus-visible{box-shadow:0 0 0 1.5px var(--jg-filo)}
.jg-tablero canvas{display:block; width:100%; height:100%}
.jg-aviso{position:absolute; inset:0; display:grid; place-items:center; padding:16px; background:color-mix(in srgb, #F5F3EE 70%, transparent)}
.jg-aviso[hidden]{display:none}
.jg-carta{background:#F5F3EE; border:2px solid #15140F; border-radius:var(--radio,6px); padding:18px 22px; text-align:center; max-width:300px;
  display:flex; flex-direction:column; align-items:center; gap:10px}
.jg-carta[data-solo]{padding:0; border:0; background:none}
.jg-carta-tit{font-family:var(--grot); font-weight:900; font-stretch:125%; text-transform:uppercase; font-size:18px; letter-spacing:-.01em; line-height:.95; margin:0; color:#15140F}
.jg-carta-txt{font-size:13px; line-height:1.4; margin:0; color:#34322C}
.jg-carta-tit:empty, .jg-carta-txt:empty{display:none}
.jg-carta .btn{font-size:12px}
.jg-carta-botones{display:flex; flex-wrap:wrap; justify-content:center; gap:8px}
.jg-carta-botones [hidden]{display:none}   /* .btn trae su propio display */

.jg-cierre{grid-column:1; grid-row:2; align-self:end; margin:0; max-width:62ch; font-size:13px; line-height:1.5; color:var(--mute); text-wrap:pretty}
.jg-cierre b{font-weight:700; color:var(--ink)}

.jg-cruceta{display:none}
/* escritorio angosto (1024–1180): más ancho para las instrucciones */
@media (min-width:961px) and (max-width:1180px){
  .jg{grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); column-gap:32px}
}
/* pantallas bajas de escritorio (1280×720, 1366×768): título en una línea y leyenda más apretada */
@media (min-width:961px) and (max-height:820px){
  .panel.juego > .jg{margin-bottom:14px}
  .jg-instr h2{font-size:clamp(28px, 3vw, 40px); margin-bottom:8px}
  .jg-lead{font-size:14.5px; line-height:1.4; margin-bottom:10px}
  .jg-items{gap:4px 18px; margin-bottom:10px}
  .jg-items p{font-size:12px; line-height:1.3}
  .jg-teclas{margin-bottom:8px}
  .jg-opciones select{padding:3px 8px}
  .jg-cierre{font-size:12px; line-height:1.4}
}
@media (hover:none) and (pointer:coarse){
  .jg-teclas--teclado{display:none} .jg-teclas--tactil{display:block}
  .jg-opciones select{font-size:16px}   /* menos de 16 px hace zoom en iPhone */
  .jg-cruceta{display:grid; grid-template-columns:repeat(3,52px); grid-template-rows:repeat(3,52px); gap:5px; flex:none}
  .jg-cruceta button{display:grid; place-items:center; padding:0; border:1.5px solid var(--ink); border-radius:var(--radio-s,3px);
    background:var(--paper-2); color:var(--ink); -webkit-user-select:none; user-select:none; touch-action:none; -webkit-tap-highlight-color:transparent}
  .jg-cruceta button:active{background:var(--ink); color:var(--paper)}
  .jg-cruceta svg{width:18px; height:18px; transform:rotate(var(--r,0deg))}
  .jg-cruceta .jg-c-c{visibility:hidden}
}
@media (max-width:960px){
  /* en una columna: título, bajada y opciones; después el juego; las reglas y el cierre debajo */
  .jg{display:flex; flex-direction:column; align-items:stretch; gap:18px; flex:none; min-height:auto}   /* el panel se recorre hacia abajo */
  .jg-zona, .jg-instr > *, .jg-cierre{flex-shrink:0}
  .jg-instr{display:contents}
  .jg-instr h2{order:1; margin:0} .jg-lead{order:2; margin:0} .jg-teclas{order:3; margin:0} .jg-opciones{order:4}
  .jg-zona{order:5; justify-content:flex-start}
  .jg-items{order:6; margin:6px 0 0; grid-template-columns:1fr} .jg-cierre{order:7; align-self:auto}
  .jg-guincha{grid-template-columns:1fr auto; row-gap:10px; align-items:center}
  .jg-guincha > span, .jg-guincha-izq{grid-column:1 / -1}
  .jg-guincha-izq{flex-direction:column; align-items:flex-start}
  .jg-obvio{display:block; margin-top:4px}
}

/* checklist de lanzamiento (26-oct): Privacidad y Cookies junto al ©, en la columna izquierda de la guincha */
.jg-guincha-izq{display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 18px}
.jg-legal{display:inline-flex; gap:14px}
.jg-legal button{padding:0; border:0; background:none; font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; cursor:pointer; transition:color .15s}
.jg-legal button:hover{color:var(--on-ink)}