/* Fondo calabozo (sin antorchas, banners G) para Guía de combate y Configuración.
   Solo presentación: no toca lógica de guia-combate.js ni configuracion.js.
   Las url() son relativas a este archivo (guia-arcade/). v=20261028-fondo1 */
html body #pf-guia,
html body #pf-configuracion{
  background-color:#0e0a08;
  background-image:url('fondo-guia-config-desktop.webp?v=20261028-fondo1'),url('data:image/webp;base64,UklGRhoDAABXRUJQVlA4IA4DAACQFgCdASrhAJEAPtFoqlGoJiijo3YJgRAaCWc64p0O3aK+x7t3V55UW00UN+fdIvF1g+Fup7JHqG7vkGIcv6nxKMaVVVesCvjjTFJg0aPzAPJIqJz96VDre9mmyE0vGtLUVr+MdWWHJtVX2wNVaNRLpI4gRph5Qd9RF3hiTP7yApyHVr64xjkSH2n7Aweqv0LZYRdu/wdOuSg3yeaQ2NkWLFYvSvG5pXV9Sk3dPhG4IBkLjuUpxmtlnVr/0hAA/vEMGBmXmqF3xKmkh9L43526jodMlDCbxx/oCZa722o/x8zdI55zYWYwtW648HeegOGGwCg0NdnbPBkti/b6HsspgckU47DrTMVUgwn0zwgvXhuCl1zeem9I3sVYhQAR5DJfxw0FZ+JAOYMfrs6RE+CTsfC1ovIE9NT5GeU/MT04FrQYXYfZBHVtjR+ZaCtHjPFvcOYUNdkfgy4Ks1CiyhwNLRUvejxoU6Q7i3fWei/Ltm4hgrwZwPjZ9BQG8reyt7E8zuKdNRx77Vu9KjHRiHxOdANmP74BQBxqL7U6j1KHTpUnti/q+8fwiO+H2kk8chftOdfjgFYny+W/F6al8giAgW1aWDO2BOVeRG/ogAB5tVoxiLSsv2vu8K/YPLDyTEKHDlCjQDanQsRskhIoFgcJcl0NmSqLB8AELMk9M2DcCAE1+y91xDao6O1eSCDlHiDCpfCXUtRkMMZrjmFpCnzN8FnKBCnVjzBRl0GGFSBkSIq58Qu4zl3aDR/iiWI+ClibaYDk+UG+ocadnoPRMwEKXttTQxnSPOLtWR8CTlMQNalQQOh9ctjiQAThZR7rF5d+la1U6TquZFukNFlYAKl9M8h8vXnIGgBt1xME4uZaVVZ2TtrQ2EVN7YzPgMDthrch4wcQlQ2Len446X0Kor72Lg8CyOrSsVyKg0clOQOp678qeLoYy3vjFV4xpecxnOVUji8yA3Rnm2KIjpYkxl9nBA+zc/bzxiWtPkspT7Fp+WPqEDuum7+lqyn6lQCOBG6ns0hwbg4LzYsFPgAAAA==');
  background-size:cover;background-position:center 40%;background-repeat:no-repeat;
  image-rendering:pixelated;
}
/* quitar la viñeta oscura de bordes para que las G se vean (igual que el mock) */
html body #pf-guia::before,
html body #pf-configuracion::before{background:none}
/* escritorio más angosto que el fondo (1.55:1): ajustar al ancho para no recortar las G */
@media (min-width:601px) and (max-aspect-ratio:155/100){
  html body #pf-guia,
  html body #pf-configuracion{background-size:100% auto;background-position:center top}
}
/* escritorio: libera los banners G laterales (~9.5vw del fondo) */
@media (min-width:821px){
  html body #pf-guia,
  html body #pf-configuracion{padding-left:max(28px,12vw,env(safe-area-inset-left))!important;padding-right:max(28px,12vw,env(safe-area-inset-right))!important}
}
/* teléfono / vertical: fondo propio 960×2078 anclado arriba; las G cuelgan en las esquinas superiores */
@media (max-width:600px), (max-aspect-ratio:4/5){
  html body #pf-guia,
  html body #pf-configuracion{
    background-image:url('fondo-guia-config-phone.webp?v=20261028-fondo1'),url('data:image/webp;base64,UklGRoYDAABXRUJQVlA4IHoDAABwHgCdASqgAFoBPtFmqlKoJSinopLYgRAaCWlu1VHcAW/4wc7JH1vwYkNpp9Ov2ANMaAyE2xB7+QptpVSatUDhA53dsX86CGTFj1nP4wvQU+KmQvOPiLUoErWQE3OulDUwr8DZJFtkG4PWM+abLcHASUDgrB62eJLQkwFvCKQpiCMT2A0glRU2sO8Qpjcw+FL00uyfRzgoL8hz1lDtk+jmdC7aTcVzKA7g3vyu6bj+FSP+3HyuH2GqCtlT30rmEAnA5KoF/Ov3zXYygpEH6TINIQatinHicK14OxGgqE1FnprMJgipt5Ev3icUXb8nKE732sPi4RC93xqpyQAA/vlth3CLVhcKPuYy9I7DC5TI7az/6bUsZkTsNiO6nd8ycJcen/FCDn5dlxhqqFFXIQF3ywtKrmr4EHGsAkrOAaJf3XHProwaKZW36UM8UV4WbaFEeKvN3kVt5iR6R4wpwBa4bAaJgFjV5Q+nyDup0NC7spll8atGZoBCdUwOv9Mj+WNeiKE4vzbgfGZzQ3IGoU9iNEKuDy4sdhHepDQcSI6dBLaK6srHbzvnC4RoCQ4t3U7PDBlaNS7wZePUurgzz9cXUK8+iudRvo+zAFA2lXzA3uKOH6lkEQXGcqG++OyjNZKYaKdrCOo0NH5otNptwpVlQyTdMwJQIpX0MIMQ12D8UEWyvLW003zG12hAipGglb7aEUVwYRdi1Z0dS2l2kCeFRe4WcOROH4uTcLLyytddSTLYDDgOOA5yvCwHcuqDfo68DzvNcs1bgCVp8V+mTScGYUcq6VnuRyRQlRG02aVM7VuWKcR4fQ9YD4UMyFucUsKvLSsoI1THHtriayWAAwTwKXiqYDAb2Ooid6eRPsTEK6CM107QwrzxI6f7HdxMuHROFYJW0GdB5Dg7BR1CI4fKXCoy0BdbhvyUnryQ4lTkjz2qUd9uZqF3ssXdPcCoGi7R+g3QguZU0PqzEUqqJnvHEw7FodPl9rhSA6woDO0K+euz4nKwQMfxpusUQlUrdfdKGwkgAF8Lg7v4aGr6gduQSvFV3Ajv3Lj550o7GcMkB9osL3EhvMcEHhJ/xEEoYz6pPQAMAymZmjbYXEqGZBWZpsJMOcepjzuCpIAnX4mwIhu8U9rJsDC9+k8t0bFtflmAIR8EcaBfZMO0nGqAivID9TsQMUlesoAAAA==');
    background-size:cover;background-position:center top;
    align-items:stretch;
    padding-top:max(calc(31vw + 10px),env(safe-area-inset-top))!important;
  }
  html body #pf-guia .pf-g-dialog,
  html body #pf-configuracion .pf-config-dialog{height:100%!important;max-height:100%!important}
}
/* v=20261028-fondo3 · el padding lateral de las G angosta la guía: tarjetas TECLADO|MANDO
   - WASD: etiqueta "Dirección" arriba y la cruz W/A/S/D centrada como pad (sin desbordarse a la derecha)
   - columna de etiquetas más flexible para que los chips del mando no se salgan
   - 821–1180px: TECLADO y MANDO apilados (ya no caben lado a lado) */
@media (min-width:821px){
  html body #pf-guia .pf-g-dual .pf-g-row{grid-template-columns:clamp(72px,30%,104px) minmax(0,1fr)}
  html body #pf-guia .pf-g-dual .pf-g-row:has(.movement-grid){grid-template-columns:minmax(0,1fr);gap:12px}
  html body #pf-guia .pf-g-dual .pf-g-row:has(.movement-grid) .pf-g-keys{justify-content:center}
  html body #pf-guia .pf-g-dual .movement-grid{grid-template-columns:repeat(3,minmax(0,72px));justify-content:center;gap:8px 10px}
  html body #pf-guia .pf-g-dual .pf-g-keys:has(> .pf-g-keycell .pf-g-pad-dir){display:grid;grid-template-columns:repeat(2,max-content);justify-content:start}
  html body #pf-guia .pf-g-dual .pf-g-dpad-chip{max-width:100%;white-space:normal;text-align:left;line-height:1.2}
}
@media (min-width:821px) and (max-width:1180px){
  html body #pf-guia .pf-g-dual{grid-template-columns:minmax(0,1fr)}
}
/* v=20261028-porthdr1 · teléfono vertical: título + opciones suben al pasillo central entre los banners G
   (antes todo empezaba debajo de las G con padding-top 31vw+10px → hueco vacío arriba).
   Solo vertical/angosto; escritorio y horizontal sin cambios. */
@media (max-width:600px), (max-aspect-ratio:4/5){
  html:root body #pf-guia,
  html:root body #pf-configuracion{padding-top:max(8px,env(safe-area-inset-top))!important}
  html:root body #pf-guia .pf-g-header,
  html:root body #pf-configuracion .pf-config-heading{
    box-sizing:border-box;min-height:calc(31vw - 10px);margin:0 16vw!important;padding:2vw 0 4px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;gap:8px;text-align:center;position:relative}
  html:root body #pf-guia .pf-g-header > div,
  html:root body #pf-configuracion .pf-config-heading > div{flex:1 1 auto;min-width:0}
  html:root body #pf-guia h1,
  html:root body #pf-configuracion h1{font-size:clamp(22px,7vw,30px)!important;line-height:1.05!important;margin:0!important;text-align:center}
  html:root body #pf-guia .pf-g-header p,
  html:root body #pf-configuracion .pf-config-sub{display:none!important}
  html:root body #pf-guia-cerrar-arriba,
  html:root body #pf-config-cerrar-arriba{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;font-size:21px!important;flex:0 0 auto}
  html:root body #pf-guia .pf-g-tabs,
  html:root body #pf-configuracion .pf-config-tabs{padding-top:4px!important;margin-top:0!important}
}

/* v=20261029-fondofull1 · cel horizontal: panel a todo el ancho, sin bandas laterales de pancartas.
   El padding 12vw de escritorio (≥821px) también pegaba en iPhone landscape (~844px). */
@media (orientation:landscape) and (max-height:540px){
  html:root body #pf-guia,
  html:root body #pf-configuracion{
    padding-left:max(6px,env(safe-area-inset-left))!important;
    padding-right:max(6px,env(safe-area-inset-right))!important;
    background-size:cover!important;
    background-position:center center!important;
  }
  html:root body #pf-guia .pf-g-dialog,
  html:root body #pf-configuracion .pf-config-dialog{
    width:100%!important;max-width:100%!important;
  }
  html:root body #pf-guia .pf-g-body,
  html:root body #pf-configuracion .pf-config-body{
    max-width:none!important;padding-left:8px!important;padding-right:8px!important;
  }
  html:root body #pf-guia .pf-g-tabs,
  html:root body #pf-configuracion .pf-config-tabs{
    margin-left:0!important;margin-right:0!important;
  }
}

/* v=20261029-centro1 · fondo "de una": cada fondo lleva debajo una miniatura en línea (≈1 KB, 1/6)
   que se pinta al instante mientras la imagen completa (precargada) termina; nunca se ve el panel vacío.
   Título + pestañas centrados sobre el pasillo central del fondo (Guía y Configuración, todos los tamaños):
   la × sale del flujo (absoluta a la derecha) para que no empuje el título a la izquierda. */
html:root body #pf-guia .pf-g-header,
html:root body #pf-configuracion .pf-config-heading{
  position:relative!important;justify-content:center!important;text-align:center!important;
  padding-left:52px!important;padding-right:52px!important;
}
html:root body #pf-guia .pf-g-header > div,
html:root body #pf-configuracion .pf-config-heading > div{flex:0 1 auto;min-width:0;text-align:center}
html:root body #pf-guia .pf-g-header h1,
html:root body #pf-configuracion .pf-config-heading h1{text-align:center!important;text-wrap:balance}
html:root body #pf-guia .pf-g-header p,
html:root body #pf-configuracion .pf-config-sub{text-align:center!important;margin-left:auto;margin-right:auto}
html:root body #pf-guia-cerrar-arriba,
html:root body #pf-config-cerrar-arriba{position:absolute!important;right:0;top:50%;transform:translateY(-50%);margin:0!important}
html:root body #pf-guia .pf-g-tabs,
html:root body #pf-configuracion .pf-config-tabs{justify-content:center!important;justify-content:safe center!important}
/* vertical: pestañas en rejilla 2×2 ya simétricas; la 3ª de Configuración ocupa toda la fila */
@media (max-width:600px), (max-aspect-ratio:4/5){
  html:root body #pf-guia .pf-g-header,
  html:root body #pf-configuracion .pf-config-heading{padding-left:40px!important;padding-right:40px!important}
  html:root body #pf-guia h1,
  html:root body #pf-configuracion h1{font-size:clamp(18px,6.2vw,30px)!important;white-space:nowrap}
  html:root body #pf-guia-cerrar-arriba,
  html:root body #pf-config-cerrar-arriba{right:0}
}
/* cel horizontal: sin márgenes, × alineada con el título */
@media (orientation:landscape) and (max-height:540px){
  html:root body #pf-guia .pf-g-header,
  html:root body #pf-configuracion .pf-config-heading{padding-left:56px!important;padding-right:56px!important}
}

/* v=20261029-pulido3 · teléfono vertical angosto: la × ya no se pega al título.
   Relleno lateral = ancho de la × (38px) + 10px de aire, simétrico para que el título siga centrado;
   la letra se ajusta un poco al ancho para caber en una línea (si no cabe, parte en dos, nunca encima de la ×). */
@media (max-width:600px), (max-aspect-ratio:4/5){
  html:root body #pf-guia .pf-g-header,
  html:root body #pf-configuracion .pf-config-heading{padding-left:48px!important;padding-right:48px!important}
  html:root body #pf-guia .pf-g-header h1,
  html:root body #pf-configuracion .pf-config-heading h1{font-size:clamp(16px,5.5vw,28px)!important;white-space:normal!important;text-wrap:balance;overflow-wrap:normal}
}
@media (max-width:340px){
  html:root body #pf-guia .pf-g-header h1,
  html:root body #pf-configuracion .pf-config-heading h1{font-size:4.8vw!important}
}

/* v=20261029-legib1 · legibilidad: título "Guía de combate" más grande y con contorno,
   "N de 4 · Paso" sobre placa café oscura con contorno, botones Jugador 1/2 con más contraste.
   Título: Guía y Configuración igual (comparten cabecera). Placa del paso: también en Configuración.
   Botones Jugador 1/2: solo Guía (las opciones de Configuración no cambian). */
html:root body #pf-guia .pf-g-header h1,
html:root body #pf-configuracion .pf-config-heading h1{
  color:#fff6e0!important;font-weight:700!important;
  text-shadow:-1px -1px 0 #0e0a08,1px -1px 0 #0e0a08,-1px 1px 0 #0e0a08,1px 1px 0 #0e0a08,3px 3px 0 #8a6a1f,4px 4px 0 #0e0a08!important;
}
@media (min-width:601px) and (min-aspect-ratio:4/5) and (min-height:541px){
  html:root body #pf-guia .pf-g-header h1,
  html:root body #pf-configuracion .pf-config-heading h1{font-size:52px!important}
}
/* vertical: más grande, sin pegarse a la × (relleno 48px = × 38px + 10px de aire, de pulido3) */
@media (max-width:600px), (max-aspect-ratio:4/5){
  html:root body #pf-guia .pf-g-header h1,
  html:root body #pf-configuracion .pf-config-heading h1{font-size:clamp(17px,6.6vw,30px)!important;letter-spacing:0!important;white-space:nowrap!important}
}
@media (max-width:340px){
  html:root body #pf-guia .pf-g-header h1,
  html:root body #pf-configuracion .pf-config-heading h1{font-size:5.9vw!important}
}
/* cel horizontal: 21px → 26px */
@media (orientation:landscape) and (max-height:540px){
  html:root body #pf-guia .pf-g-header h1,
  html:root body #pf-configuracion .pf-config-heading h1{font-size:26px!important;line-height:1.1!important}
}

/* Paso "2 de 4 · Controles": placa café + contorno oscuro, dorado más claro y más grueso */
html:root body #pf-guia .pf-g-side-lbl,
html:root body #pf-configuracion .pf-config-side-lbl{
  box-sizing:border-box;color:#ffd75e!important;font-weight:700!important;
  padding:4px 12px 5px!important;border-left:4px solid #f7c94d;border-radius:6px;
  background:linear-gradient(90deg,rgba(14,10,8,.9) 0,rgba(14,10,8,.78) 60%,rgba(14,10,8,0) 100%);
  text-shadow:-1px -1px 0 #0e0a08,1px -1px 0 #0e0a08,-1px 1px 0 #0e0a08,1px 1px 0 #0e0a08,2px 2px 0 #0e0a08!important;
}
@media (orientation:landscape) and (max-height:540px){
  html:root body #pf-guia .pf-g-side-lbl,
  html:root body #pf-configuracion .pf-config-side-lbl{font-size:21px!important;padding:2px 10px 3px!important}
}
/* "Botones de" (Guía): crema en vez de gris apagado */
html:root body #pf-guia #pf-guia-jugador-lbl{color:#f7ecd4!important;font-weight:700!important;text-shadow:1px 1px 0 #0e0a08}
@media (orientation:landscape) and (max-height:540px){
  html:root body #pf-guia #pf-guia-jugador-lbl{font-size:13px!important}
}

/* Jugador 1 / Jugador 2 (Guía): letra más gruesa; no elegido = crema sobre café con borde, elegido = tinta sobre dorado */
html:root body #pf-guia .pf-g-seg{background:#0e0a08!important;border-color:#6a5540!important}
html:root body #pf-guia .pf-g-seg button{font-weight:700!important;letter-spacing:.02em}
html:root body #pf-guia .pf-g-seg button[aria-checked=false]{color:#fff6e0!important;background:#2a2118!important;box-shadow:inset 0 0 0 2px #5a4836!important;text-shadow:1px 1px 0 #0e0a08}
html:root body #pf-guia .pf-g-seg button[aria-checked=true]{color:#140f0c!important;background:#ffd04f!important;box-shadow:inset 0 0 0 2px #fff0b8,0 2px 0 #8a6a1f!important;text-shadow:none}
html:root body #pf-guia .pf-g-seg button[aria-checked=false]:hover{background:#3a2c20!important}
@media (orientation:landscape) and (max-height:540px){
  html:root body #pf-guia .pf-g-seg{max-width:300px!important}
  html:root body #pf-guia .pf-g-seg button{font-size:16px!important;min-height:36px!important}
}

/* v=20261029-sideout1 · cel horizontal: "N de 4 · Paso" (y "Botones de" / Jugador 1·2) fuera de la bandera G.
   El fondo va en cover y en horizontal escala por el ancho (1352×873), así que la bandera izquierda
   termina en ≈8.5vw (incluida la varilla). Se recorre la columna lateral para que empiece en ≈9.5vw,
   descontando el relleno que ya trae el panel (8px del cuerpo + max(6px, zona segura)). Mismo arreglo en Configuración. */
@media (orientation:landscape) and (max-height:540px){
  html:root body #pf-guia .pf-g-side,
  html:root body #pf-configuracion .pf-config-side{
    padding-left:max(0px,calc(9.5vw - 8px - max(6px,env(safe-area-inset-left))))!important;
    box-sizing:border-box!important;
  }
}
/* dos columnas (≥901px de ancho): en Configuración la columna lateral (230px) crece lo mismo que se recorrió,
   así "1 de 3 · Teclado" no se parte en dos líneas. En Guía (270px) ya cabe sin tocar la rejilla. */
@media (orientation:landscape) and (max-height:540px) and (min-width:901px){
  html:root body #pf-configuracion .pf-config-body{
    grid-template-columns:calc(230px + max(0px,calc(9.5vw - 8px - max(6px,env(safe-area-inset-left))))) minmax(0,1fr)!important;
  }
}
@media (orientation:landscape) and (max-height:540px) and (min-width:1181px){
  html:root body #pf-configuracion .pf-config-body{
    grid-template-columns:calc(270px + max(0px,calc(9.5vw - 8px - max(6px,env(safe-area-inset-left))))) minmax(0,1fr)!important;
  }
}