/* juego.css — PokéChaos en «modo juego»: el mundo a pantalla completa y cada sección como una ventana del juego.
   Ventanas al estilo de los juegos de Pokémon (marco blanco con franja azul y borde oscuro, pestaña roja con el
   título, letra pixelada). El interior sigue oscuro para que todo lo que ya había se lea igual que antes. */
@font-face{font-family:'Pixelify Sans';src:url(/fonts/pixelify-latin.woff2) format('woff2');font-weight:400 700;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Pixelify Sans';src:url(/fonts/pixelify-latin-ext.woff2) format('woff2');font-weight:400 700;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
/* (los números, de Jersey 10: en Pixelify el 5 parecía una S) */
@font-face{font-family:'Pixelify Sans';src:url(/fonts/jersey10-digitos.woff2) format('woff2');font-weight:400 700;unicode-range:U+0030-0039;size-adjust:112%}

:root{--pk-borde:#283050;--pk-franja:#6c8fd4;--pk-blanco:#fbfbf8;--pk-texto:#3a3a48;--pk-rojo:#e3350d;--pk-rojo-osc:#8a1c06;--pk-noche:#16213f;
  --gw-top:84px;--gw-bottom:20px;--gw-ancho:min(1100px,calc(100vw - 40px))}

/* ---------- El mundo a pantalla completa ---------- */
body.modo-juego{overflow:hidden;background:#0d1426}
body.modo-juego .sidebar{display:none!important}
/* (sin posición propia: si fuera «fixed» haría de contenedor de capas y el velo taparía también las ventanas) */
body.modo-juego .main-content{position:static;margin:0!important;padding:0!important;min-height:0;overflow:visible}
body.modo-juego #tab-lobby{display:block!important;position:fixed;inset:0;z-index:1;pointer-events:auto}
body.modo-juego #tab-lobby>div{height:100vh!important;height:100dvh!important;border-radius:0!important}

/* ---------- Ventanas ---------- */
body.modo-juego.ventana-abierta::before{content:'';position:fixed;inset:0;background:rgba(6,10,24,.55);z-index:30;animation:gwVelo .15s ease-out}
body.modo-juego .tab-panel.active:not(#tab-lobby){
  position:fixed;z-index:40;pointer-events:auto;
  top:var(--gw-top);bottom:var(--gw-bottom);left:50%;transform:translateX(-50%);width:var(--gw-ancho);
  overflow:auto;padding:24px 28px 28px;
  background:var(--pk-noche) repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 14px,transparent 14px 28px);
  border:4px solid #f2f2ee;border-radius:0 18px 18px 18px;
  box-shadow:0 0 0 4px var(--pk-borde),inset 0 0 0 3px var(--pk-franja),0 12px 0 4px rgba(0,0,0,.35);
  animation:gwAbrir .16s steps(4,end);scrollbar-color:var(--pk-franja) transparent
}
body.modo-juego .tab-panel.active:not(#tab-lobby)::-webkit-scrollbar{width:12px}
body.modo-juego .tab-panel.active:not(#tab-lobby)::-webkit-scrollbar-thumb{background:var(--pk-franja);border-radius:6px;border:3px solid var(--pk-noche)}
@keyframes gwAbrir{from{opacity:0;transform:translateX(-50%) scale(.96)}to{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes gwVelo{from{opacity:0}to{opacity:1}}

/* Pestaña roja con el título (como la Pokédex) y botón de volver */
#gw-barra{display:none}
body.modo-juego.ventana-abierta #gw-barra{display:flex;position:fixed;z-index:41;left:50%;transform:translateX(-50%);width:var(--gw-ancho);
  top:calc(var(--gw-top) - 50px);height:50px;align-items:flex-end;justify-content:space-between;pointer-events:none}
#gw-titulo{pointer-events:auto;background:var(--pk-rojo);color:#fff;font-family:'Pixelify Sans',monospace;font-size:24px;letter-spacing:1px;
  padding:8px 22px 9px;border:4px solid #f2f2ee;border-bottom:0;border-radius:14px 14px 0 0;box-shadow:0 0 0 4px var(--pk-borde);
  text-shadow:2px 2px 0 var(--pk-rojo-osc);position:relative;top:4px}
#gw-titulo::before{content:'';display:inline-block;width:16px;height:16px;margin-right:10px;vertical-align:-1px;border-radius:50%;
  background:linear-gradient(#fff 0 44%,#283050 44% 56%,#fff 56%);box-shadow:0 0 0 2px #283050}
#gw-cerrar{pointer-events:auto;margin-bottom:12px;background:var(--pk-blanco);color:var(--pk-texto);font-family:'Pixelify Sans',monospace;font-size:19px;
  padding:6px 14px 7px;border:4px solid var(--pk-borde);border-radius:12px;box-shadow:inset 0 0 0 3px var(--pk-franja),0 4px 0 rgba(0,0,0,.35);cursor:pointer;
  text-shadow:2px 2px 0 #cfd3dc}
#gw-cerrar:hover{transform:translateY(-1px)}
#gw-cerrar:active{transform:translateY(2px);box-shadow:inset 0 0 0 3px var(--pk-franja),0 2px 0 rgba(0,0,0,.35)}

/* Dentro de las ventanas: títulos con la letra del juego */
body.modo-juego .tab-panel .tab-title{font-family:'Pixelify Sans',monospace;font-weight:600;font-size:28px;letter-spacing:.5px;margin-bottom:18px;text-shadow:2px 2px 0 rgba(0,0,0,.4)}
body.modo-juego .tab-panel .section-title,body.modo-juego .tab-panel h2,body.modo-juego .tab-panel h3{font-family:'Pixelify Sans',monospace;font-weight:600;letter-spacing:.4px}

/* Avisos con aspecto de cuadro de diálogo */
body.modo-juego #toast-container{z-index:150;top:auto;bottom:22px;right:50%;transform:translateX(50%);align-items:center}
body.modo-juego .toast{background:var(--pk-blanco);color:var(--pk-texto);border:4px solid var(--pk-borde);border-radius:12px;
  box-shadow:inset 0 0 0 3px var(--pk-franja),0 4px 0 rgba(0,0,0,.35);font-family:'Pixelify Sans',monospace;font-size:18px;
  padding:12px 18px 13px;max-width:min(560px,92vw);text-shadow:1px 1px 0 #d4d8e0;transform:translateY(16px)}
body.modo-juego .toast.show{transform:translateY(0)}
body.modo-juego .toast-success{border-color:#1f6e3a;box-shadow:inset 0 0 0 3px #6cc48a,0 4px 0 rgba(0,0,0,.35)}
body.modo-juego .toast-error{border-color:var(--pk-rojo-osc);box-shadow:inset 0 0 0 3px #f08a74,0 4px 0 rgba(0,0,0,.35)}
body.modo-juego .toast-close{color:var(--pk-texto)}

/* ---------- Móvil ---------- */
@media (max-width:900px){
  :root{--gw-top:62px;--gw-bottom:8px;--gw-ancho:calc(100vw - 16px)}
  body.modo-juego .tab-panel.active:not(#tab-lobby){padding:16px 14px 20px}
  #gw-titulo{font-size:19px;padding:7px 14px 8px}
  #gw-cerrar{font-size:16px;margin-bottom:10px}
  #gw-cerrar span{display:none}
  body.modo-juego #toast-container{bottom:auto;top:12px}
}

/* ---------- Móvil y tableta: siempre en horizontal ---------- */
/* En vertical, «Gira el móvil» tapa el juego (solo con pantalla táctil y ya dentro del juego) */
#girar{display:none;position:fixed;inset:0;z-index:100000;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:24px;box-sizing:border-box;text-align:center;color:var(--pk-blanco);font-family:'Pixelify Sans',monospace;
  background:#0d1426 radial-gradient(circle at 50% 36%,#24386e 0,#0d1426 70%);
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;cursor:pointer}
@media (orientation:portrait){body.modo-juego.tactil #girar{display:flex}}
#girar .g-dibujo{position:relative;width:150px;height:150px;margin-bottom:8px}
#girar .g-flecha{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#ffd75e;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;
  animation:gFlecha 2.8s ease-in-out infinite}
#girar .g-movil{position:absolute;left:50%;top:50%;width:54px;height:92px;margin:-46px 0 0 -27px;box-sizing:border-box;border:5px solid var(--pk-blanco);
  border-radius:12px;background:linear-gradient(#6c8fd4,#3a5aa8);box-shadow:0 0 0 4px var(--pk-borde),0 6px 0 4px rgba(0,0,0,.35);
  animation:gMovil 2.8s ease-in-out infinite}
#girar .g-movil::before{content:'';position:absolute;left:50%;top:3px;width:14px;height:3px;margin-left:-7px;border-radius:2px;background:var(--pk-blanco);opacity:.8}
#girar .g-bola{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;
  background:linear-gradient(var(--pk-rojo) 0 44%,var(--pk-borde) 44% 56%,var(--pk-blanco) 56%);box-shadow:0 0 0 2px var(--pk-borde)}
#girar b{font-size:32px;font-weight:700;letter-spacing:1px;text-shadow:3px 3px 0 #000}
#girar p{margin:0;font-size:18px;color:#c9d3ea}
#girar small{margin-top:10px;font-size:15px;color:#ffd75e;animation:gLatido 1.6s ease-in-out infinite}
body.ios #girar small,body.en-app #girar small{display:none}
/* Si no gira: qué hacer (bloqueo de rotación, navegador de otra app, pantalla dividida) */
#girar .g-ayuda{max-width:300px;margin-top:14px;font-style:normal;font-size:14px;line-height:1.35;color:#9fb0d6}
#girar .g-ayuda:empty{display:none}
/* (en el iPhone no hay pantalla completa en el navegador: desde la pantalla de inicio, sí) */
#girar .g-ios{display:none;max-width:300px;margin-top:6px;font-style:normal;font-size:14px;line-height:1.35;color:#ffd75e}
body.ios:not(.app) #girar .g-ios{display:block}
@keyframes gMovil{0%,20%{transform:rotate(0)}45%,75%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
@keyframes gFlecha{0%,20%{transform:rotate(0);opacity:.95}45%,75%{transform:rotate(-90deg);opacity:.3}100%{transform:rotate(0);opacity:.95}}
@keyframes gLatido{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){#girar .g-movil,#girar .g-flecha,#girar small{animation:none}}

/* En horizontal, el mando (juego.js lo coloca): en los márgenes del juego o, si no caben, encima de sus bordes.
   Semitransparente; más opaco mientras se pulsa. */
#mando{display:none}
body.modo-juego.tactil #tab-lobby{touch-action:none}
body.modo-juego.tactil #mando{display:block;position:fixed;inset:0;z-index:6;pointer-events:none;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#mando .m-grupo{position:absolute;left:0;top:0;visibility:hidden;opacity:0;pointer-events:none;touch-action:none;-webkit-tap-highlight-color:transparent;
  transition:opacity .2s,visibility .2s,transform .18s ease-out}
#mando .m-grupo.visible{visibility:visible;opacity:1;pointer-events:auto}
#mando .m-grupo.sin-anim{transition:none}
#mando .m-tecla{position:absolute;display:flex;align-items:center;justify-content:center;box-sizing:border-box;font-style:normal;
  font-family:'Pixelify Sans',monospace;color:#fff;opacity:.45;transition:opacity .08s}
#mando .m-tecla.pulsado{opacity:.85}
/* Cruceta: clara y con el contorno oscuro (se ve sobre el fondo oscuro de los márgenes, sobre la hierba y sobre la
   arena o la nieve) */
.m-cruz .m-tecla{width:var(--u);height:var(--u);background:#e6ebf6;border:0 solid #18203a}
.m-cruz .m-arr{left:var(--u);top:0;border-radius:12px 12px 0 0;border-width:3px 3px 0}
.m-cruz .m-izq{left:0;top:var(--u);border-radius:12px 0 0 12px;border-width:3px 0 3px 3px}
.m-cruz .m-cen{left:var(--u);top:var(--u)}
.m-cruz .m-cen::after{content:'';width:34%;height:34%;border-radius:50%;background:#aab4cc}
.m-cruz .m-der{left:calc(var(--u) * 2);top:var(--u);border-radius:0 12px 12px 0;border-width:3px 3px 3px 0}
.m-cruz .m-aba{left:var(--u);top:calc(var(--u) * 2);border-radius:0 0 12px 12px;border-width:0 3px 3px}
.m-cruz [data-d]::after{content:'';border-style:solid;border-color:transparent}
.m-cruz .m-arr::after{border-width:0 10px 14px;border-bottom-color:#18203a}
.m-cruz .m-aba::after{border-width:14px 10px 0;border-top-color:#18203a}
.m-cruz .m-izq::after{border-width:10px 14px 10px 0;border-right-color:#18203a}
.m-cruz .m-der::after{border-width:10px 0 10px 14px;border-left-color:#18203a}
/* A y B (como en la consola: B abajo a la izquierda, A arriba a la derecha), con un aro oscuro por fuera */
.m-ab .m-tecla{width:var(--d);height:var(--d);border-radius:50%;font-size:calc(var(--d) * .44);font-weight:700;
  text-shadow:2px 2px 0 rgba(0,0,0,.55);box-shadow:inset 0 0 0 3px rgba(255,255,255,.65),0 0 0 3px #18203a}
.m-ab .m-a{right:3px;top:3px;background:var(--pk-rojo)}
.m-ab .m-b{left:3px;bottom:3px;background:#e6b422}
/* MENÚ y CHAT */
.m-pil .m-tecla{inset:0;border-radius:999px;background:#1e2436;color:#fff;font-size:17px;font-weight:700;letter-spacing:1px;
  box-shadow:inset 0 0 0 3px #e6ebf6,0 0 0 2px #0b1020;text-shadow:1px 1px 0 rgba(0,0,0,.6)}
.m-pil.estrecha .m-tecla{font-size:14px;letter-spacing:.5px}
.m-pil.activo .m-tecla{background:var(--pk-franja);opacity:.5}
.m-pil.activo .m-tecla.pulsado{opacity:.85}
.m-nuevos{display:none;position:absolute;right:-2px;top:-3px;min-width:20px;height:20px;padding:0 5px;box-sizing:border-box;border-radius:10px;
  background:var(--pk-rojo);color:#fff;font:700 12px/20px 'Pixelify Sans',monospace;font-style:normal;text-align:center;opacity:.95;pointer-events:none}
.m-nuevos.si{display:block}
/* Los avisos de la página, entre las columnas del mando: así no lo tapan */
body.modo-juego.tactil .toast{max-width:min(560px,var(--pkm-lienzo,92vw))}
/* Con el dedo, el botón de cerrar las ventanas, de 44 px como poco */
body.tactil #gw-cerrar{min-width:48px;min-height:44px}