/* Parque Abierto · rediseño 2026 (capa final: va después de estilo.css y web.css)
   Fase 1 · «modo app» en móvil y tableta: con personaje, el juego ocupa la pantalla como una aplicación.
   body.app lo pone app.js (con personaje, pantalla estrecha o táctil). Nada de esto toca la pantalla completa (body.pc)
   ni el exterior (body.fz-on), que tienen su propia disposición. */

:root{
  --r-s:8px; --r-m:12px; --r-l:18px;
  --sombra-1:0 1px 0 rgba(255,255,255,.06) inset,0 6px 18px rgba(5,2,15,.35);
  --vidrio:rgba(18,12,38,.78);
  --vidrio-b:rgba(140,120,220,.28);
  --app-top:52px; --app-chat:48px;
}

/* ---------- la barra de arriba: una sola línea ---------- */
body.app:not(.pc) .wrap{padding-top:0;gap:0}
body.app:not(.pc) header{flex-direction:row!important;align-items:center!important;border-radius:0!important;position:sticky;top:0;z-index:30;flex-wrap:nowrap;gap:8px;min-height:var(--app-top);box-sizing:border-box;margin-inline:-16px;padding:6px 12px;padding-top:max(6px,env(safe-area-inset-top));background:rgba(13,9,28,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--vidrio-b)}
body.app:not(.pc) header>div:first-child{display:flex;align-items:center;min-width:0;flex:1 1 auto;overflow:hidden}
body.app:not(.pc) .h1-logo{font-size:20px;margin:0;white-space:nowrap}
body.app:not(.pc) .h1-logo .logo-m{width:30px;height:30px}
body.app:not(.pc) .lema-g,body.app:not(.pc) .lema{display:none}
body.app:not(.pc) .caja-top{width:auto!important;flex:none;flex-wrap:nowrap;gap:8px;padding:0;background:none;border:0;box-shadow:none;margin-left:auto}
body.app:not(.pc) .caja-top>div:first-child{display:none}
body.app:not(.pc) .cuenta-top{flex-direction:row;align-items:center;gap:8px}
body.app:not(.pc) .cuenta-top small,body.app:not(.pc) .cuenta-top .saldo{display:none}
body.app:not(.pc) .cuenta-top .saldo-st{font:700 17px/1 var(--f-display);color:#ffe27a;padding:7px 10px;border-radius:999px;background:rgba(255,198,46,.12);border:1px solid rgba(255,198,46,.35)}
body.app:not(.pc) .cuenta-top .fila-b{flex-wrap:nowrap;gap:6px}
body.app:not(.pc) .cuenta-top .fila-b .b2{min-height:34px;padding:4px 10px;font-size:14px;border-radius:999px}
body.app:not(.pc) .cuenta-top .fila-b .b2:first-child{display:none} /* «Recargar» está en Yo › Cuenta */

/* ---------- el juego, a toda la pantalla disponible ---------- */
body.app:not(.pc):not(.fz-on) main{margin-inline:-16px}
body.app:not(.pc):not(.fz-on) .marco{border:0;border-radius:0;box-shadow:none;background:#0d0820}
body.app:not(.pc):not(.fz-on) .visor{position:relative;height:calc(100dvh - var(--app-top) - var(--dk-h,56px) - var(--app-chat));min-height:220px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;background:#0d0820}
body.app:not(.pc):not(.fz-on) .visor::-webkit-scrollbar{display:none}
body.app:not(.pc):not(.fz-on) canvas#plaza{height:100%;width:auto;min-width:100%;max-width:none;aspect-ratio:16/9}
@supports not (height:100dvh){body.app:not(.pc):not(.fz-on) .visor{height:calc(100vh - var(--app-top) - var(--dk-h,56px) - var(--app-chat))}}
/* en una tableta en horizontal sobra anchura: el parque entero, sin recortar */
@media (orientation:landscape){body.app:not(.pc):not(.fz-on) canvas#plaza{min-width:0;width:auto;margin:0 auto}body.app:not(.pc):not(.fz-on) .visor{display:flex;justify-content:center}}

/* el sitio y el evento en directo: etiquetas sobre el juego, no bloques debajo */
body.app:not(.pc):not(.fz-on) .chip{position:absolute!important;top:8px;left:50%;transform:translateX(-50%);z-index:4;display:block;width:auto!important;max-width:min(58%,320px);box-sizing:border-box;padding:5px 12px;border-radius:999px;border:1px solid var(--vidrio-b)!important;background:var(--vidrio)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-align:center;box-shadow:none;pointer-events:none}
body.app:not(.pc):not(.fz-on) .chip b{display:block;font:600 15px/1.1 var(--f-display);color:var(--oro);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.app:not(.pc):not(.fz-on) .chip span{display:block;font-size:11px;line-height:1.2;color:var(--suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.app:not(.pc):not(.fz-on) .evb{position:absolute!important;top:54px;left:50%;transform:translateX(-50%);z-index:4;width:auto!important;max-width:min(78%,360px);padding:4px 12px;min-height:0;border-radius:999px;border:0!important;font-size:12px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 4px 12px rgba(0,0,0,.35)}
body.app:not(.pc):not(.fz-on) .anuncio{position:absolute!important;top:86px;left:8px;right:8px;z-index:4;width:auto!important;border-radius:var(--r-m);font-size:13px}
body.app:not(.pc):not(.fz-on) .pc-entra{display:none}

/* lo que se puede hacer en este sitio: una tira deslizable sobre la parte de abajo del juego */
body.app:not(.pc):not(.fz-on) .mundo-hud{position:absolute!important;left:0;right:0;bottom:8px;z-index:4;max-width:none;display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;padding:0 10px!important;background:none!important;border:0!important;scrollbar-width:none;justify-content:flex-start}
body.app:not(.pc):not(.fz-on) .mundo-hud::-webkit-scrollbar{display:none}
body.app:not(.pc):not(.fz-on) .mundo-hud>*{flex:none}
body.app:not(.pc):not(.fz-on) .mundo-hud .b2{min-height:36px;padding:6px 12px;font-size:14px;border-radius:999px;border:1px solid var(--vidrio-b);background:var(--vidrio);color:var(--claro);box-shadow:0 4px 10px rgba(0,0,0,.3);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
body.app:not(.pc):not(.fz-on) .mundo-hud .b2.oro{background:var(--oro);color:#1b1426;border-color:var(--oro)}
body.app:not(.pc):not(.fz-on) .mundo-n{display:none}

/* el chat: una línea compacta pegada al juego */
body.app:not(.pc):not(.fz-on) .chat-f{height:var(--app-chat);box-sizing:border-box;padding:6px 8px;gap:6px;border-top:1px solid var(--vidrio-b);background:#120c26;align-items:center}
body.app:not(.pc):not(.fz-on) .chat-f input{height:36px;border-radius:999px;border:1px solid var(--vidrio-b);background:#1c1538;color:var(--claro);padding:0 14px;font-size:15px}
body.app:not(.pc):not(.fz-on) .chat-f input::placeholder{color:#8a7cae}
body.app:not(.pc):not(.fz-on) .chat-f .b2{min-height:36px;padding:0 12px;border-radius:999px;font-size:14px}
body.app:not(.pc):not(.fz-on) .marco:not(.con-chat) .visor{height:calc(100dvh - var(--app-top) - var(--dk-h,56px))}

/* lo de debajo del juego (nombres, lista de vecinos) sigue ahí, con aire */
body.app:not(.pc) .barra{padding:12px 0 4px}

/* ---------- la barra de abajo: seis botones grandes ---------- */
@media (max-width:640px){
  body.app .dk{grid-auto-columns:minmax(0,1fr);padding:4px 4px calc(4px + env(safe-area-inset-bottom));background:rgba(13,9,28,.96);border-top:1px solid var(--vidrio-b);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  body.app .dk-b[data-g="acc"],body.app .dk-b[data-g="cosecha"]{display:none}
  body.app .dk-b{min-height:54px;font-size:12px;gap:4px;border-radius:var(--r-m)}
  body.app .dk-ic{width:22px;height:22px}
  body.app .dk-b[aria-expanded="true"]{background:rgba(255,198,46,.14);color:var(--oro);box-shadow:none}
  body.app .dk-b.dk-entra{background:var(--oro);color:#1b1426}
}

/* ---------- los paneles del menú: hojas que suben desde abajo ---------- */
@media (max-width:640px){
  .dk-p,body.pc .dk-p{border-radius:var(--r-l) var(--r-l) 0 0;border:0!important;box-shadow:0 -12px 40px rgba(0,0,0,.5)!important;overflow:hidden}
  .dk-p::before{content:'';display:block;width:42px;height:5px;border-radius:3px;background:rgba(255,255,255,.22);margin:8px auto 0;flex:none}
  .dk-cab{background:transparent;padding:6px 10px 8px 16px}
  .dk-tit{font-size:24px}
  .dk-x{width:40px;height:40px;border-radius:50%;border:1px solid var(--vidrio-b);font-size:22px;color:var(--claro)}
  .dk-s{border-radius:999px;border:1px solid var(--vidrio-b);padding:7px 14px;font-size:14px}
  .dk-s[aria-selected="true"]{background:var(--oro);color:#1b1426;border-color:var(--oro)}
  .dk-fondo{background:rgba(8,5,20,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
}

/* ---------- tableta en vertical: más aire ---------- */
@media (min-width:641px) and (max-width:1100px){
  body.app:not(.pc) .h1-logo{font-size:24px}
  body.app .dk-b{min-height:60px;font-size:14px}
}
@media (max-width:360px){body.app:not(.pc) .h1-logo .logo-t,body.app:not(.pc) .h1-logo span:not(.logo-m){display:none}}
/* la tira de acciones del sitio va por encima del chat y de la barra de abajo (las dos están dentro del marco) */
body.app:not(.pc):not(.fz-on) .mundo-hud{bottom:calc(var(--dk-h,56px) + var(--app-chat) + 8px)}
body.app:not(.pc):not(.fz-on) .marco:not(.con-chat) .mundo-hud{bottom:calc(var(--dk-h,56px) + 8px)}
/* móvil en horizontal: la altura manda; sin cabecera ni chat fijo (el chat sigue en «Ver chat» desde el menú) */
@media (orientation:landscape) and (max-height:500px){
  body.app:not(.pc):not(.fz-on){--app-top:0px;--app-chat:0px}
  body.app:not(.pc):not(.fz-on) header{display:none}
  body.app:not(.pc):not(.fz-on) .chat-f{display:none}
  body.app:not(.pc):not(.fz-on) .visor{height:calc(100dvh - var(--dk-h,40px))}
}
/* la barra de abajo siempre a la vista en modo app (también en la tableta) y el marco cuadra justo bajo la cabecera */
body.app:not(.pc):not(.fz-on) .dk{position:sticky;bottom:0;z-index:23}
body.app:not(.pc) .marco{scroll-margin-top:var(--app-top)}

/* =====================================================================
   Fase 2 · un solo estilo para todas las ventanas del juego
   (armería, mochila, yeguada, puerta de la muralla, fichas…: #velo .ficha)
   ===================================================================== */
.velo{align-items:center;padding:20px 16px;background:rgba(8,5,20,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.velo .ficha{display:flex;flex-direction:column;max-height:calc(100dvh - 40px);width:min(600px,100%);padding:0;overflow:hidden;border-radius:var(--r-l);border:1px solid var(--vidrio-b);box-shadow:0 24px 60px rgba(4,2,12,.6),inset 0 1px 0 rgba(255,255,255,.05)}
.velo .ficha>h2{flex:none;margin:0;padding:16px 64px 12px 20px;font:600 26px/1.1 var(--f-display);color:var(--oro);border-bottom:1px solid rgba(140,120,220,.18);background:linear-gradient(180deg,rgba(255,255,255,.035),transparent)}
.velo .ficha>.f-c{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 20px 20px}
/* cerrar: un botón redondo con su aspa (el texto «Cerrar» sigue ahí para los lectores de pantalla) */
.velo .ficha>.cerrar{top:12px;right:12px;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid var(--vidrio-b);background:rgba(255,255,255,.05);color:transparent;font-size:0;overflow:hidden;z-index:2}
.velo .ficha>.cerrar::after{content:'×';position:absolute;inset:0;display:grid;place-items:center;font:600 26px/1 var(--f-display);color:var(--claro)}
.velo .ficha>.cerrar:hover,.velo .ficha>.cerrar:focus-visible{background:var(--oro);border-color:var(--oro)}
.velo .ficha>.cerrar:hover::after,.velo .ficha>.cerrar:focus-visible::after{color:#1b1426}
/* las pestañas de las ventanas: un selector de píldoras, como en el menú */
:is(.rpg-tabs,.yg-tabs,.fz-tabs){display:flex;flex-wrap:wrap;gap:6px;height:auto;min-height:0;overflow:visible;padding-bottom:4px;margin-bottom:8px}
:is(.rpg-tabs,.yg-tabs,.fz-tabs)::-webkit-scrollbar{display:none}
:is(.rpg-tabs,.yg-tabs) .b3,#f-c .fz-tab{flex:none;height:auto!important;min-height:34px!important;line-height:1.1!important;align-self:auto;border-radius:999px!important;border:1px solid var(--vidrio-b)!important;background:rgba(255,255,255,.04)!important;color:var(--claro)!important;padding:8px 14px!important;font:600 14px/1 var(--f-display)!important;box-shadow:none!important}
:is(.rpg-tabs,.yg-tabs) .b3:is(.on,.oro),:is(.rpg-tabs,.yg-tabs) .b3[aria-selected="true"],:is(.rpg-tabs,.yg-tabs) .b3[aria-pressed="true"],#f-c .fz-tab.on{background:var(--oro)!important;border-color:var(--oro)!important;color:#1b1426!important}
/* las filas de las listas (objetos, armas, monturas…): tarjetas limpias */
.velo .ficha .rpg-it,.velo .ficha .yg-it,.dk-p .rpg-it{background:rgba(255,255,255,.035);border:1px solid rgba(140,120,220,.22)!important;border-radius:var(--r-m);padding:8px 10px}
.velo .ficha .rpg-h{margin:16px 0 8px;font:600 15px/1 var(--f-display);letter-spacing:.04em;color:var(--suave)}
.velo .ficha .b3{border-radius:10px;border-width:2px}
.velo .ficha .nota{color:var(--suave)}

/* en el móvil, las ventanas también suben desde abajo, como hojas */
@media (max-width:640px){
  .velo{align-items:flex-end;padding:0}
  .velo .ficha{width:100%;max-height:min(90dvh,calc(100dvh - 24px));border-radius:var(--r-l) var(--r-l) 0 0;border-width:1px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  .velo .ficha::before{content:'';display:block;flex:none;width:42px;height:5px;border-radius:3px;background:rgba(255,255,255,.22);margin:8px auto 0}
  .velo .ficha>h2{font-size:22px;padding:8px 60px 10px 16px}
  .velo .ficha>.cerrar{top:16px}
  .velo .ficha>.f-c{padding:12px 14px 18px}
}
@media (prefers-reduced-motion:no-preference){
  .velo:not([hidden]) .ficha{animation:v2-sube .18s ease-out}
  @keyframes v2-sube{from{transform:translateY(14px);opacity:.6}to{transform:none;opacity:1}}
}
/* el aspa no se queda dorada por tener el foco al abrir: solo un anillo */
.velo .ficha>.cerrar:focus{outline:none;box-shadow:none}
.velo .ficha>.cerrar:focus-visible{outline:2px solid var(--oro);outline-offset:2px;background:rgba(255,255,255,.05);border-color:var(--vidrio-b)}
.velo .ficha>.cerrar:focus-visible::after{color:var(--claro)}
.velo .ficha>.cerrar:hover{background:var(--oro);border-color:var(--oro)}
.velo .ficha>.cerrar:hover::after{color:#1b1426}
.velo .ficha>.f-c>*{flex-shrink:0}

/* =====================================================================
   Fase 3 · portada en el ordenador (y la parte de abajo en todas las pantallas)
   ===================================================================== */
html{scroll-behavior:smooth;scroll-padding-top:16px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.top-nav{display:none}
@media (min-width:901px){
  body:not(.app):not(.pc) header{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"logo nav cuenta" "lema lema cuenta" "lema2 lema2 cuenta";align-items:center;column-gap:28px;row-gap:6px;padding:14px 22px 18px;border:1px solid var(--vidrio-b);border-radius:var(--r-l);background:radial-gradient(90% 160% at 0% 0%,rgba(122,104,200,.22),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.03),transparent)}
  body:not(.app):not(.pc) header>div:first-child{display:contents}
  body:not(.app):not(.pc) .h1-logo{grid-area:logo;margin:0}
  body:not(.app):not(.pc) .lema-g{grid-area:lema;margin:10px 0 0;max-width:30ch;font-size:clamp(26px,2.6vw,36px);line-height:1.1}
  body:not(.app):not(.pc) .lema{grid-area:lema2;margin:0;color:var(--suave)}
  body:not(.app):not(.pc) .caja-top{grid-area:cuenta;align-self:stretch;flex-direction:column;align-items:stretch;justify-content:center;gap:10px;border:1px solid rgba(255,198,46,.35);border-radius:var(--r-m);background:rgba(13,9,28,.6);box-shadow:none;padding:12px 16px;min-width:230px}
  body:not(.app):not(.pc) .top-nav{grid-area:nav;display:flex;gap:4px;justify-self:start}
  .top-nav a{font:600 16px/1 var(--f-display);color:var(--claro);text-decoration:none;padding:9px 12px;border-radius:999px}
  .top-nav a:hover,.top-nav a:focus-visible{background:rgba(255,255,255,.07);color:var(--oro)}
  body.con-vecino:not(.app):not(.pc) .lema-g{font-size:20px;max-width:none}
}
/* los títulos de sección, todos iguales; las secciones, con aire */
.sec-cab h2,.esc-cab h2,.info>h2,.nuevo-c h2{font:600 clamp(26px,2.6vw,34px)/1.1 var(--f-display);letter-spacing:.01em;color:var(--claro);margin:0}
.sec-cab,.escaparate,.info,section.nuevo{scroll-margin-top:16px}
@media (min-width:901px){.sec-cab,.escaparate,.info{margin-top:28px}}
.sec-cab p,.esc-cab p{color:var(--suave);max-width:70ch}
/* la guía «cómo funciona»: una tarjeta sobria */
.guia{border-radius:var(--r-m)!important;border-width:1px!important;box-shadow:none!important}
/* preguntas frecuentes: acordeón limpio */
.info details{border:1px solid var(--vidrio-b);border-radius:var(--r-m);background:rgba(255,255,255,.025);padding:0;overflow:hidden}
.info details+details{margin-top:8px}
.info summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;font:600 17px/1.2 var(--f-display);color:var(--claro);cursor:pointer}
.info summary::-webkit-details-marker{display:none}
.info summary::after{content:'+';flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);color:var(--oro);font:600 20px/1 var(--f-display);transition:transform .15s}
.info details[open] summary::after{content:'–'}
.info details>p{margin:0;padding:0 18px 16px;color:var(--suave);line-height:1.55}
.info summary:hover{color:var(--oro)}
/* el pie: dos columnas en el ordenador, letra pequeña y legible */
.pie-web{margin-top:24px;border-top:1px solid var(--vidrio-b)!important;padding-top:22px!important;gap:10px!important;font-size:14px;line-height:1.55}
.pie-web>p:first-child{display:flex;flex-wrap:wrap;gap:6px 18px;font:600 15px/1.2 var(--f-display)}
.pie-web>p:first-child a{text-decoration:none}
.pie-web>p:first-child a:hover{color:var(--oro)}
.pie-web a{text-underline-offset:3px}
/* la barra de «Entrar» que flota abajo: más fina y elegante */
.cta{border-top:1px solid rgba(255,198,46,.5)!important;background:rgba(18,12,38,.94)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 -10px 30px rgba(0,0,0,.35)}
.cta .btn{border-radius:999px;box-shadow:0 4px 14px rgba(255,198,46,.25)!important}
/* las tarjetas de las ciudades, las capturas y los rasgos comparten radio y borde */
.vistas-g figure,.rasgos li,section.nuevo{border-radius:var(--r-m)!important}
.rasgos li{border-width:1px!important;background:rgba(255,255,255,.03)!important}
.info .faq{gap:8px}
.info details+details{margin-top:0}
.info .faq details{border:1px solid var(--vidrio-b)!important}
@media (min-width:901px){.info .faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:10px}}
.info summary{font-size:16px}
/* el móvil sin personaje (visitas): el mismo aspecto de etiquetas sobre el juego, sin la fila de chat (no pueden hablar) */
@media (max-width:640px){
  body:not(.app):not(.pc):not(.fz-on) .marco{border-radius:var(--r-m);overflow:hidden}
  body:not(.app):not(.pc):not(.fz-on) .chip{position:absolute!important;top:8px;left:50%;transform:translateX(-50%);z-index:4;width:auto!important;max-width:min(60%,300px);padding:5px 12px;border-radius:999px;border:1px solid var(--vidrio-b)!important;background:var(--vidrio)!important;text-align:center;pointer-events:none}
  body:not(.app):not(.pc):not(.fz-on) .chip b{display:block;font:600 15px/1.1 var(--f-display);color:var(--oro);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body:not(.app):not(.pc):not(.fz-on) .chip span{display:block;font-size:11px;color:var(--suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body:not(.app):not(.pc):not(.fz-on) .evb{position:absolute!important;top:54px;left:50%;transform:translateX(-50%);z-index:4;width:auto!important;max-width:80%;padding:4px 12px;min-height:0;border-radius:999px;border:0!important;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body:not(.con-vecino):not(.pc):not(.fz-on) .chat-f{display:none!important}
}

/* =====================================================================
   Ronda 2 · la portada para quien llega: botones arriba, página más corta en el móvil
   ===================================================================== */
/* con personaje en el móvil, lo de debajo del juego recupera su margen */
body.app:not(.pc):not(.fz-on) main>:not(.marco){margin-inline:16px}
/* los dos botones bajo el lema (solo visitas) */
.hero-b{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 2px}
.hero-b[hidden]{display:none}
.hero-b .btn{border-radius:999px;padding:12px 22px;font-size:17px;box-shadow:0 6px 18px rgba(255,198,46,.28)}
.hero-b .b3{border-radius:999px;display:inline-flex;align-items:center;justify-content:center;min-height:0;padding:11px 20px;font:600 16px/1.2 var(--f-display);text-decoration:none;background:transparent!important;color:var(--claro)!important;border:1px solid rgba(255,255,255,.28)!important;box-shadow:none!important}
.hero-b .b3:hover,.hero-b .b3:focus-visible{border-color:var(--oro)!important;color:var(--oro)!important}
body.app .hero-b{display:none}
@media (min-width:901px){
  body:not(.app):not(.pc) header{grid-template-areas:"logo nav cuenta" "lema lema cuenta" "lema2 lema2 cuenta" "hero hero cuenta"}
  body:not(.app):not(.pc) .hero-b{grid-area:hero}
}
@media (max-width:640px){
  .hero-b{margin-top:10px}
  .hero-b .btn{flex:1 1 100%;text-align:center;justify-content:center}
  .hero-b .b3{flex:1 1 100%}
  .hero-b .btn,.hero-b .b3{padding-block:10px}
}
/* los rasgos en el móvil: dos filas que se deslizan, en vez de dieciséis tarjetas en columna */
@media (max-width:640px){
  .rasgos{grid-template-columns:none!important;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:80%;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;margin-inline:-16px;padding:0 16px 8px;scroll-padding-inline:16px;scrollbar-width:thin}
  .rasgos li{scroll-snap-align:start;padding:12px 14px}
  .rasgos p{font-size:14px}
  .info-3{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-16px;padding:0 16px 8px;scroll-padding-inline:16px;scrollbar-width:thin}
  .info-3>div{scroll-snap-align:start}
}
.info-3>div{border-radius:var(--r-m)!important;border-width:1px!important;background:rgba(255,255,255,.03)!important}
.info{margin-inline:0!important;align-self:stretch}
/* las tiras de pestañas que no caben avisan de que hay más (degradado al borde) */
.tira-b.mas-d{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.tira-b.mas-i{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);mask-image:linear-gradient(90deg,transparent,#000 36px)}
.tira-b.mas-i.mas-d{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}

/* =====================================================================
   Ronda 2 · con personaje en el ordenador: cabecera de una línea y el juego entero a la vista
   (antes la barra del menú quedaba por debajo del borde de la pantalla en un portátil)
   ===================================================================== */
@media (min-width:901px){
  body.con-vecino:not(.app):not(.pc) header{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"logo lema cuenta";row-gap:0;column-gap:22px;padding:10px 14px 10px 18px}
  body.con-vecino:not(.app):not(.pc) .h1-logo{font-size:30px}
  body.con-vecino:not(.app):not(.pc) .h1-logo .logo-m{width:40px;height:40px}
  body.con-vecino:not(.app):not(.pc) .top-nav,body.con-vecino:not(.app):not(.pc) header .lema,body.con-vecino:not(.app):not(.pc) .hero-b{display:none}
  body.con-vecino:not(.app):not(.pc) .lema-g{margin:0;font-size:16px;line-height:1.35;align-self:center}
  body.con-vecino:not(.app):not(.pc) .caja-top{flex-direction:row;align-items:center;align-self:center;gap:16px;padding:8px 12px;min-width:0;border-color:var(--vidrio-b)}
  body.con-vecino:not(.app):not(.pc) .caja-top>div:first-child{display:flex;flex-direction:column;gap:2px}
  body.con-vecino:not(.app):not(.pc) .caja-top>div:first-child small{font-size:10px}
  body.con-vecino:not(.app):not(.pc) .caja-top output{font-size:20px;line-height:1}
  body.con-vecino:not(.app):not(.pc) .cuenta-top{flex-direction:row;flex-wrap:nowrap;align-items:center;gap:10px}
  body.con-vecino:not(.app):not(.pc) .cuenta-top>small{display:none}
  body.con-vecino:not(.app):not(.pc) .cuenta-top .saldo{font-size:17px}
  body.con-vecino:not(.app):not(.pc) .cuenta-top .saldo-st{font-size:17px;padding:6px 10px;border-radius:999px;background:rgba(255,198,46,.12);border:1px solid rgba(255,198,46,.35)}
  body.con-vecino:not(.app):not(.pc) .cuenta-top .fila-b{flex-wrap:nowrap;margin:0;flex-basis:auto}
  body.con-vecino:not(.app):not(.pc) .cuenta-top .b2{border-radius:999px;padding:6px 12px}
  /* el lienzo no pasa de lo que cabe: así el chat y la barra del menú se ven sin bajar */
  body.con-vecino:not(.app):not(.pc):not(.fz-on) .visor{display:flex;justify-content:center;background:#0d0820}
  body.con-vecino:not(.app):not(.pc):not(.fz-on) canvas#plaza{min-width:0;flex:none;width:min(100%,calc((100vh - var(--resto,250px))*16/9));min-width:min(100%,760px)}
}