/* MENÚS DEL JUEGO (02-10, diseñador de interfaz). Paleta sacada del logo definitivo (letras doradas, pergamino, cinta
   azul) y del HUD del prototipo (crema y tinta marrón). Tipografía: Nunito (la del juego), en 800-900 para que se lea de
   un vistazo. Botones de 64-80 px de alto (tableta: dedo de niño), foco muy visible para teclado y mando. */
:root {
  --crema: #fff8ea; --pergamino: #f7e7c6; --pergamino-2: #ecd3a2; --oro-1: #ffe08c; --oro-2: #f3ae47; --oro-3: #c97b24;
  --azul: #2c4c9c; --azul-2: #1c3474; --tinta: #3b2a1a; --tinta-2: #7a5a3e; --naranja: #e58a4e; --verde: #6faa4b;
  --esc: 1;                                  /* tamaño del texto: Ajustes → Juego */
  --alto-bt: clamp(58px, 9.5vh, 80px);
}
html[data-texto="grande"] { --esc: 1.15; }
html[data-texto="muygrande"] { --esc: 1.32; }

#menuJuego { position: fixed; inset: 0; z-index: 50; display: none; font-family: Nunito, system-ui, sans-serif; color: var(--tinta);
  -webkit-tap-highlight-color: transparent; }
#menuJuego.abierto { display: block; }
#menuJuego button { font-family: inherit; -webkit-tap-highlight-color: transparent; }

/* ---------- fondos: portada (arranque) y Tuga dormida (menú) ---------- */
#menuJuego .fondos { position: absolute; inset: 0; overflow: hidden; background: #f3d9a6; }
#menuJuego .fondo { position: absolute; inset: -3%; background: center / cover no-repeat; opacity: 0; transition: opacity 1.2s ease;
  animation: respira 34s ease-in-out infinite alternate; will-change: transform; }
#menuJuego .f-portada { background-image: url(../../assets/menu/portada.jpg); }
@media (max-width: 1300px) and (max-height: 900px) { #menuJuego .f-portada { background-image: url(../../assets/menu/portada-1280.jpg); } }
#menuJuego .f-menu { background-image: url(../../assets/menu/fondo-menu.jpg); background-position: 45% center; }
#menuJuego[data-pantalla="arranque"] .f-portada, #menuJuego[data-pantalla="carga"] .f-portada { opacity: 1; }
#menuJuego:not([data-pantalla="arranque"]):not([data-pantalla="carga"]) .f-menu { opacity: 1; }
#menuJuego .velo { position: absolute; inset: 0; pointer-events: none; transition: background .6s;
  background: radial-gradient(ellipse 60% 70% at 85% 50%, rgba(255, 244, 220, .35), transparent 70%); }
#menuJuego[data-pantalla="arranque"] .velo { background: linear-gradient(to top, rgba(40, 25, 10, .35), transparent 30%), linear-gradient(to bottom right, rgba(255, 240, 210, .30), transparent 45%); }
@keyframes respira { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.06) translate(-1%, -.6%); } }

/* pausa: el juego se ve detrás, desenfocado y más apagado */
#menuJuego.pausa .fondos { background: transparent; }
#menuJuego.pausa .fondo { opacity: 0 !important; }
#menuJuego.pausa .velo { background: rgba(70, 45, 25, .38); -webkit-backdrop-filter: blur(7px) saturate(.9); backdrop-filter: blur(7px) saturate(.9); }
#menuJuego.pausa .luces { display: none; }

/* luciérnagas (como los puntos de luz del arte) */
#menuJuego .luces i { position: absolute; border-radius: 50%; background: radial-gradient(circle, #fffbe0 0 30%, rgba(255, 228, 140, .7) 45%, transparent 70%);
  animation-name: flota, titila; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-direction: alternate; pointer-events: none; }
@keyframes flota { from { transform: translate(0, 0); } to { transform: translate(28px, -46px); } }
@keyframes titila { from { opacity: .15; } to { opacity: .95; } }

/* ---------- capa de la pantalla ---------- */
#menuJuego .capa { position: absolute; inset: 0; }
#menuJuego .p { position: absolute; inset: 0; display: flex; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); box-sizing: border-box; }
#menuJuego .p.entra > * { animation: entra .42s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes entra { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- ARRANQUE ---------- */
#menuJuego .p-arranque { cursor: pointer; }
#menuJuego .logo { display: block; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 10px 18px rgba(60, 30, 5, .35)); }
#menuJuego .logo.grande { position: absolute; left: 3.5%; top: 4%; width: min(47vw, 82vh, 760px); animation: logoEntra 1s cubic-bezier(.2, 1.4, .4, 1) both, logoFlota 5s 1s ease-in-out infinite alternate !important; }
@keyframes logoEntra { from { opacity: 0; transform: scale(.6) rotate(-4deg); } to { opacity: 1; transform: none; } }
@keyframes logoFlota { from { transform: translateY(0) rotate(-.6deg); } to { transform: translateY(-8px) rotate(.6deg); } }
/* (04-10, Interfaz; director ~14:50 «el botón sale un poco a la izquierda y luego salta al centro») centrado SIN transform: left/right 0 +
   margin auto + width max-content. Antes era left 50% + translateX(-50%) y la animación de entrada («entra», que acaba en transform: none)
   le quitaba el -50 % hasta que empezaba el latido: se veía saltar. Ahora las animaciones solo escalan/suben desde su sitio. */
#menuJuego .empezar { position: absolute; left: 0; right: 0; margin: 0 auto; width: max-content; max-width: calc(100% - 32px); bottom: 7%; display: flex; align-items: center; gap: 14px;
  font-weight: 900; font-size: calc(clamp(20px, 2.4vw, 30px) * var(--esc)); color: var(--azul); background: linear-gradient(#fffdf6, #f8e9c8);
  border: 4px solid #fff; border-radius: 999px; padding: 14px 34px 14px 24px; cursor: pointer; white-space: nowrap;
  box-shadow: 0 0 0 4px var(--azul), 0 7px 0 4px var(--azul-2), 0 14px 26px rgba(30, 20, 5, .35);
  animation: entra .5s .9s both, latidoBt 1.6s 1.5s ease-in-out infinite !important; }
#menuJuego .empezar .ico { width: 1.5em; height: 1.5em; }
@keyframes latidoBt { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
#menuJuego .idiomas { position: absolute; right: max(16px, 2%); top: max(14px, 2.5%); display: flex; gap: 8px; }
#menuJuego .chip { font-weight: 800; font-size: calc(15px * var(--esc)); color: var(--tinta-2); background: rgba(255, 248, 234, .82); border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 999px; padding: 8px 14px; min-height: 44px; cursor: pointer; }
#menuJuego .chip.on { color: #fff; background: var(--azul); border-color: #fff; }
#menuJuego .version { position: absolute; left: 14px; bottom: 10px; font: 700 12px Nunito, sans-serif; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }

/* ---------- CARTA (panel de pergamino) ---------- */
#menuJuego .carta { margin: auto; position: relative; box-sizing: border-box; width: min(440px, 92vw); max-height: 100%; display: flex; flex-direction: column;
  background: radial-gradient(ellipse at 30% 0%, #fffdf5, var(--pergamino) 70%); border: 5px solid #fff; border-radius: 34px; padding: 22px 26px 26px;
  box-shadow: 0 0 0 3px var(--pergamino-2), 0 18px 40px rgba(60, 35, 10, .35); }
#menuJuego .p-principal { justify-content: flex-end; align-items: center; padding-right: max(4vw, 16px); }
#menuJuego .p-principal .carta { margin: 0; width: min(430px, 40vw); min-width: 330px; background: rgba(255, 249, 236, .9); }
#menuJuego .p-principal .logo { width: 100%; margin: -6px auto 10px; }
#menuJuego .carta.estrecha { width: min(430px, 92vw); }
#menuJuego .carta.ancha { width: min(780px, 94vw); height: min(820px, 100%); }
#menuJuego .titulo { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 14px; font-weight: 900;
  font-size: calc(clamp(24px, 3vw, 32px) * var(--esc)); color: var(--azul); text-align: center; }
#menuJuego .titulo .ico { width: 1.1em; height: 1.1em; }
#menuJuego .det { margin: 0 0 14px; text-align: center; font-weight: 700; font-size: calc(16px * var(--esc)); color: var(--tinta-2); }

/* ---------- BOTONES ---------- */
#menuJuego .botones { display: flex; flex-direction: column; gap: 18px; padding: 6px 8px 10px; }
#menuJuego .botones.fila { flex-direction: row; flex-wrap: wrap; justify-content: center; }
#menuJuego .botones.fila .bt { flex: 1 1 180px; }
#menuJuego .botones.pie { margin-top: auto; padding-top: 16px; }
#menuJuego .bt { position: relative; display: flex; align-items: center; gap: 14px; min-height: var(--alto-bt); padding: 8px 22px 8px 18px; cursor: pointer;
  font-weight: 900; font-size: calc(clamp(19px, 2.3vw, 26px) * var(--esc)); text-align: left; color: var(--azul);
  background: linear-gradient(#fffdf7, #f6e6c4); border: 4px solid #fff; border-radius: 999px;
  box-shadow: 0 0 0 3.5px var(--azul), 0 6px 0 3.5px var(--azul-2), 0 10px 18px rgba(40, 25, 5, .25);
  transition: transform .12s, box-shadow .12s, filter .12s; outline: none; }
#menuJuego .bt .ico { flex: none; width: 1.45em; height: 1.45em; padding: 6px; border-radius: 50%; background: rgba(44, 76, 156, .12); box-sizing: content-box; }
#menuJuego .bt .txt { display: flex; flex-direction: column; line-height: 1.1; }
#menuJuego .bt .txt small { font-size: .55em; font-weight: 800; color: rgba(255, 255, 255, .95); margin-top: 3px; }
#menuJuego .bt.primario { color: #fff; background: linear-gradient(var(--oro-1), var(--oro-2)); font-size: calc(clamp(22px, 2.8vw, 31px) * var(--esc));
  text-shadow: 0 2px 0 var(--azul), 2px 0 0 var(--azul), -2px 0 0 var(--azul), 0 -2px 0 var(--azul), 2px 2px 0 var(--azul), -2px 2px 0 var(--azul), 2px -2px 0 var(--azul), -2px -2px 0 var(--azul), 0 4px 0 var(--azul-2); }
#menuJuego .bt.primario .ico { background: rgba(255, 255, 255, .35); color: var(--azul); }
#menuJuego .bt.primario .txt small { text-shadow: 0 1px 0 var(--azul), 1px 0 0 var(--azul), -1px 0 0 var(--azul), 0 -1px 0 var(--azul); }
#menuJuego .bt.pequeno { font-size: calc(17px * var(--esc)); min-height: 52px; flex: 0 1 auto !important; color: var(--tinta-2); box-shadow: 0 0 0 3px var(--pergamino-2), 0 5px 0 3px #c9ab78; }
#menuJuego .bt.pequeno .ico { background: none; }
#menuJuego .bt:hover { filter: brightness(1.05); }
#menuJuego .bt:active { transform: translateY(5px); box-shadow: 0 0 0 3.5px var(--azul), 0 1px 0 3.5px var(--azul-2), 0 4px 8px rgba(40, 25, 5, .25); }
/* foco (teclado, mando y ratón encima): halo de luz y un poco más grande */
#menuJuego .bt:focus-visible, #menuJuego .bt:hover { transform: scale(1.04); }
#menuJuego .bt:focus-visible { box-shadow: 0 0 0 3.5px var(--azul), 0 6px 0 3.5px var(--azul-2), 0 0 0 10px rgba(255, 255, 255, .95), 0 0 30px 14px rgba(255, 206, 90, .9); }
#menuJuego .bt:focus-visible::after { content: ''; position: absolute; left: -30px; top: 50%; width: 0; height: 0; margin-top: -11px;
  border: 11px solid transparent; border-left: 16px solid var(--naranja); animation: senala .6s ease-in-out infinite alternate; }
@keyframes senala { from { transform: translateX(-4px); } to { transform: translateX(3px); } }

/* ---------- AJUSTES ---------- */
#menuJuego .ajustes .titulo { margin-bottom: 10px; }
#menuJuego .pestanas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 6px; border-radius: 26px; background: rgba(201, 160, 100, .22); outline: none; }
#menuJuego .pestanas button { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 70px; border: 0; border-radius: 20px; cursor: pointer;
  font-weight: 900; font-size: calc(15px * var(--esc)); color: var(--tinta-2); background: transparent; }
#menuJuego .pestanas button .ico { width: 30px; height: 30px; }
#menuJuego .pestanas button.on { color: #fff; background: var(--azul); box-shadow: 0 4px 0 var(--azul-2); }
#menuJuego .pestanas:focus-visible { box-shadow: 0 0 0 4px #fff, 0 0 22px 8px rgba(255, 206, 90, .9); }
#menuJuego .filas { flex: 1; overflow-y: auto; padding: 10px 6px 4px; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
#menuJuego .fila-aj { display: grid; grid-template-columns: 44px minmax(120px, 1fr) minmax(220px, 1.35fr); align-items: center; gap: 12px; min-height: 62px;
  padding: 4px 12px; margin: 2px 0; border-radius: 20px; }
#menuJuego .fila-aj:focus-within { background: rgba(255, 255, 255, .75); box-shadow: 0 0 0 3px rgba(255, 196, 80, .9); }
#menuJuego .fila-aj > .ico { width: 34px; height: 34px; color: var(--azul); }
#menuJuego .fila-aj .nom { font-weight: 800; font-size: calc(18px * var(--esc)); line-height: 1.15; }
#menuJuego .ctl { display: flex; align-items: center; gap: 10px; }
#menuJuego .ctl output { min-width: 2.2em; text-align: right; font-weight: 900; font-size: calc(16px * var(--esc)); color: var(--tinta-2); }
#menuJuego .ctl small { font-weight: 800; font-size: calc(13px * var(--esc)); color: var(--tinta-2); }
/* deslizador grande */
#menuJuego input[type=range] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 44px; margin: 0; background: transparent; cursor: pointer; outline: none; touch-action: none; }
#menuJuego input[type=range]::-webkit-slider-runnable-track { height: 16px; border-radius: 10px; background: linear-gradient(to right, var(--oro-2) 0 var(--f, 50%), #e7d3ad var(--f, 50%)); box-shadow: inset 0 2px 3px rgba(80, 50, 20, .25); }
#menuJuego input[type=range]::-moz-range-track { height: 16px; border-radius: 10px; background: #e7d3ad; box-shadow: inset 0 2px 3px rgba(80, 50, 20, .25); }
#menuJuego input[type=range]::-moz-range-progress { height: 16px; border-radius: 10px; background: var(--oro-2); }
#menuJuego input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 38px; height: 38px; margin-top: -11px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #fff3d6);
  border: 4px solid var(--azul); box-shadow: 0 3px 0 var(--azul-2); }
#menuJuego input[type=range]::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 4px solid var(--azul); box-shadow: 0 3px 0 var(--azul-2); }
#menuJuego input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 3px 0 var(--azul-2), 0 0 0 6px rgba(255, 206, 90, .9); }
/* elegir entre opciones (segmentos) */
#menuJuego .elige:not(.pestanas) { display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(201, 160, 100, .25); outline: none; }
#menuJuego .elige:not(.pestanas) button { flex: 1; min-height: 48px; min-width: 52px; padding: 4px 12px; border: 0; border-radius: 999px; cursor: pointer;
  font-weight: 900; font-size: calc(16px * var(--esc)); color: var(--tinta-2); background: transparent; transition: background .15s, color .15s; }
#menuJuego .elige:not(.pestanas) button.on { color: #fff; background: var(--azul); box-shadow: 0 3px 0 var(--azul-2); }
#menuJuego .elige:focus-visible { box-shadow: 0 0 0 4px #fff, 0 0 18px 6px rgba(255, 206, 90, .9); }
/* ciclo (estilo de música) */
#menuJuego .ciclo { justify-content: space-between; padding: 5px; border-radius: 999px; background: rgba(201, 160, 100, .25); outline: none; }
#menuJuego .ciclo button { width: 48px; height: 48px; flex: none; border: 0; border-radius: 50%; cursor: pointer; font-weight: 900; font-size: 30px; line-height: 1;
  color: #fff; background: var(--azul); box-shadow: 0 3px 0 var(--azul-2); }
#menuJuego .ciclo span { flex: 1; text-align: center; font-weight: 900; font-size: calc(16px * var(--esc)); }
#menuJuego .ciclo.apagado span { font-weight: 700; font-size: calc(13px * var(--esc)); color: var(--tinta-2); }
#menuJuego .ciclo.apagado button { opacity: .35; }
#menuJuego .ciclo:focus-visible { box-shadow: 0 0 0 4px #fff, 0 0 18px 6px rgba(255, 206, 90, .9); }
#menuJuego .ajustes .det { font-size: calc(14px * var(--esc)); margin: 6px 12px; text-align: left; }

/* ---------- CRÉDITOS y AYUDA ---------- */
#menuJuego .desliza { flex: 1; overflow-y: auto; text-align: center; padding: 6px 18px 20px; border-radius: 20px; outline: none; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
#menuJuego .desliza:focus-visible { box-shadow: inset 0 0 0 2px rgba(255, 196, 80, .55); }
#menuJuego .desliza .logo.medio { width: min(340px, 70%); margin: 4px auto 10px; }
#menuJuego .desliza h2 { margin: 6px 0 14px; font-size: calc(24px * var(--esc)); font-weight: 900; color: var(--azul); }
#menuJuego .desliza h3 { margin: 18px 0 4px; font-size: calc(15px * var(--esc)); font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--naranja); }
#menuJuego .desliza p { margin: 4px auto; max-width: 560px; font-weight: 700; font-size: calc(16px * var(--esc)); line-height: 1.4; }
#menuJuego .desliza .sello { display: inline-block; margin: 10px 0 2px; padding: 6px 14px; border-radius: 10px; background: #2b2b2b; color: #fff; font-weight: 800; letter-spacing: .02em; }
#menuJuego .desliza .gracias { margin-top: 26px; font-size: calc(22px * var(--esc)); font-weight: 900; color: var(--azul); }
#menuJuego .desliza .nota { font-size: calc(13px * var(--esc)); color: var(--tinta-2); }
#menuJuego .teclas { list-style: none; margin: 0; padding: 0 6px; flex: 1; overflow-y: auto; }
#menuJuego .teclas li { display: grid; grid-template-columns: minmax(150px, 1fr) 1.4fr; gap: 14px; align-items: center; padding: 10px 6px; border-bottom: 2px dashed rgba(201, 160, 100, .45);
  font-weight: 700; font-size: calc(18px * var(--esc)); }
#menuJuego kbd { justify-self: start; font: 900 calc(16px * var(--esc)) Nunito, sans-serif; color: var(--azul); background: #fff; border: 2px solid var(--pergamino-2); border-bottom-width: 5px; border-radius: 12px; padding: 6px 12px; }

/* ---------- DIÁLOGO y CARGA ---------- */
/* medallones con el arte VIGENTE (02-10, director: nunca la Tuga antigua): Tuga = retratos nuevos hechos desde
   arte/personajes/tuga/ficha.png (arte/interfaz/candidatas/tuga-nueva/); Ada = arte/personajes/ada/ada-v1-sinfondo.png */
#menuJuego .medalla { flex: none; width: 112px; height: 112px; margin: -78px auto 6px; border-radius: 50%; background: #fff center / cover no-repeat;
  border: 5px solid #fff; box-shadow: 0 0 0 3px var(--pergamino-2), 0 8px 16px rgba(60, 35, 10, .3); }
#menuJuego .medalla.tuga { background-image: url(../../assets/menu/tuga.webp); }
#menuJuego .medalla.ada { background-image: url(../../assets/menu/ada.webp); }
#menuJuego .guardada { display: flex; align-items: center; justify-content: center; gap: 6px; margin: -8px 0 -2px; font-weight: 800; font-size: calc(14px * var(--esc)); color: var(--tinta-2); }
#menuJuego .guardada .ico { width: 18px; height: 18px; color: var(--verde); }
#menuJuego .cargando { margin: auto auto 9%; width: min(480px, 90vw); text-align: center; padding: 20px 26px 24px; border-radius: 30px; background: rgba(255, 249, 236, .9);
  border: 4px solid #fff; box-shadow: 0 16px 34px rgba(60, 35, 10, .3); }
#menuJuego .medalla.anda { background-image: url(../../assets/menu/tuga-anda.webp); animation: tugaAnda .5s ease-in-out infinite alternate; }
@keyframes tugaAnda { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-6px) rotate(4deg); } }
#menuJuego .cargando .barra { height: 16px; border-radius: 10px; background: #ecdcc0; overflow: hidden; box-shadow: inset 0 2px 3px rgba(80, 50, 20, .25); }
#menuJuego .cargando .barra div { height: 100%; width: 3%; border-radius: 10px; background: linear-gradient(var(--oro-1), var(--oro-2)); transition: width .3s; }
#menuJuego .cargando .paso { margin: 8px 0 0; font-size: 12px; font-weight: 700; color: var(--tinta-2); min-height: 1em; }

/* ---------- botón de pausa en el juego ---------- */
#btnPausa { position: fixed; z-index: 7; left: 10px; bottom: 10px; display: none; align-items: center; gap: 8px; height: 52px; padding: 0 18px 0 12px; cursor: pointer;
  font: 900 calc(16px * var(--esc)) Nunito, sans-serif; color: var(--azul); background: rgba(255, 249, 236, .92); border: 3px solid #fff; border-radius: 999px;
  box-shadow: 0 0 0 2.5px var(--azul), 0 4px 0 2.5px var(--azul-2), 0 6px 14px rgba(60, 35, 10, .3); }
#btnPausa .ico { width: 26px; height: 26px; }
#btnPausa:active { transform: translateY(3px); }
body.con-menu.en-juego.juego-listo #btnPausa { display: flex; }
body.con-menu #btnOpciones { display: none !important; }
body.es-tactil #btnPausa { left: auto; bottom: auto; right: max(12px, env(safe-area-inset-right)); top: max(12px, env(safe-area-inset-top)); width: 64px; height: 64px; padding: 0; justify-content: center; }
body.es-tactil #btnPausa span { display: none; }
body.es-tactil #btnPausa .ico { width: 30px; height: 30px; }
body.con-menu.es-tactil #ayuda { top: 88px; }

/* ---------- tamaño del texto también en el juego (bocadillos, avisos, ayuda) ---------- */
html[data-texto="grande"] #bocadillo { font-size: 23px; } html[data-texto="muygrande"] #bocadillo { font-size: 27px; max-width: min(520px, 86vw); }
html[data-texto="grande"] #bocadillo .quien { font-size: 15px; } html[data-texto="muygrande"] #bocadillo .quien { font-size: 17px; }
html[data-texto="grande"] #avisoAccion { font-size: 18px; } html[data-texto="muygrande"] #avisoAccion { font-size: 21px; }
html[data-texto="grande"] .panel { font-size: 15px; } html[data-texto="muygrande"] .panel { font-size: 17px; }
html[data-texto="grande"] #ayuda { max-width: 340px; } html[data-texto="muygrande"] #ayuda { max-width: 400px; }

/* ---------- pantallas estrechas y verticales (tableta en vertical, móvil) ---------- */
@media (max-aspect-ratio: 4/3) {
  #menuJuego .logo.grande { left: 0; right: 0; margin: 0 auto; top: 7%; width: min(84vw, 620px); }
  #menuJuego .f-portada { background-position: 64% center; }
  #menuJuego .idiomas { top: auto; bottom: max(14px, 2%); left: 0; right: 0; margin: 0 auto; width: max-content; }   /* (04-10) sin transform: la animación de entrada lo pisaba (mismo salto que «empezar») */
  #menuJuego .empezar { bottom: calc(max(14px, 2%) + 70px); }
  #menuJuego .p-principal { justify-content: center; align-items: flex-end; padding: 16px 16px 5vh; }
  #menuJuego .p-principal .carta { width: min(460px, 92vw); min-width: 0; }
  #menuJuego .f-menu { background-position: 48% center; }
}
@media (max-width: 640px) {
  #menuJuego .fila-aj { grid-template-columns: 34px 1fr; }
  #menuJuego .fila-aj .ctl { grid-column: 1 / -1; }
  #menuJuego .pestanas button span { font-size: 12px; }
  #menuJuego .teclas li { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-height: 840px) {
  #menuJuego .fila-aj { min-height: 54px; }
  #menuJuego .pestanas button { min-height: 60px; }
  #menuJuego .ajustes .titulo { margin-bottom: 6px; }
  #menuJuego .carta.ancha { padding-top: 16px; }
}
@media (max-height: 560px) {
  #menuJuego .botones { gap: 12px; }
  #menuJuego .p-principal .logo { width: 72%; margin-bottom: 4px; }
  #menuJuego .carta { padding: 14px 18px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  #menuJuego .fondo, #menuJuego .luces i, #menuJuego .logo.grande, #menuJuego .empezar, #menuJuego .medalla.anda { animation: none !important; }
  #menuJuego .empezar { transform: none; }
}
#menuJuego.sin-animar * { animation: none !important; transition: none !important; }