/* Tableta, vertical y horizontal. Se carga con media query desde index.html:
   el teléfono nunca aplica nada de aquí, y pruebas/capturas.mjs lo comprueba.
   Mismo sistema del teléfono; cambian tamaños y acomodo, según las maquetas. */

/* ================= común ================= */
.app,.app:has(#inicio.activa){max-width:1240px;padding:22px 28px 40px}
.pantalla > .barra h2{font-size:25px}
.pantalla > .barra .volver{flex-basis:50px;width:50px;height:50px}
.pantalla > .barra .chip{font-size:15px;padding:7px 12px}
.contador-estrellas{font-size:17px}
.contador-estrellas .ico{font-size:24px}

/* pantallas que no cambian de forma: la columna del teléfono, centrada y un poco más ancha */
.reto-config,#t-juego,#t-final,.ajustes-caja{max-width:640px;margin-left:auto;margin-right:auto}
#tarjeta{max-width:420px}
#tarjeta:has(.album-detalle){width:min(460px,calc(100vw - 56px),calc((100dvh - 112px)*.7143))}

/* portada */
#inicio .sticker .emo{font-size:88px;height:90px}
#inicio .sticker .t{font-size:20px}
#inicio .sticker .d{font-size:14px}

/* operaciones (multi, división, sumas y restas): la casita y la columna crecen */
.operacion{--cw:62px}
.operacion .fila{height:64px}
.operacion .celda{font-size:38px}
.operacion .celda.mano{font-size:44px}
#division .divisor{font-size:38px;height:64px}
#multi .fila.chica{height:34px}
#multi .fila.chica .celda,#multi .celda.chico{font-size:22px}
#multi .celda.chico.mano{font-size:26px}
.operacion .celda .presta,.operacion .celda .llevada{font-size:20px}
.operacion .celda.con-llevadas{height:86px;padding-bottom:4px}
.operacion .celda.con-llevadas .llevada{top:8px}
.operacion .tablero{padding:28px}
.op-juego .btn{font-size:18px;padding:12px 22px}
.op-juego .fila-btn{justify-content:center}
.operacion .msg{font-size:20px}
.teclado button{font-size:32px;padding:0}
.teclado .del{font-size:24px}
.teclado .ok{font-size:26px}

/* memorama */
#memorama .carta .f{font-size:70px}
#memorama .carta .b{font-size:34px}

/* junta 3 */
#match .ficha{font-size:20px}

/* lluvia */
#caida .barra-caida{font-size:23px;padding:11px 16px}
#caida .pad button{font-size:32px;padding:0}

/* álbum: cartas más grandes, letras que se lean */
.rejilla-cartas .placa b{font-size:13px}
.rejilla-cartas .placa small{font-size:9.5px}
.rejilla-cartas .num{font-size:10px}

/* sobre: se ven las cuatro cartas a la vez, sin apilar */
#sobre-caja{max-width:1100px}
.sobre-caja{width:250px}
.mazo{height:auto;display:flex;justify-content:center;align-items:flex-end;flex-wrap:wrap;gap:30px;padding:14px 0}
/* el JS las apila y las encoge con transform en línea; aquí cada una tiene su lugar */
.mazo .carta{position:relative;left:auto;top:auto;transform:none!important;width:236px}
.mazo .aura{display:none}

/* ================= horizontal ================= */
@media (orientation: landscape){
  /* el fondo de nubes vertical se estira de más acostado */
  body,body:has(#inicio.activa){background-image:url(./nubes-horizontal.webp?v=51)}

  /* portada: Aventura a la izquierda y los retos de tres en tres a la derecha */
  #inicio{position:relative}
  #inicio .portada{grid-template-columns:118px 260px minmax(0,1fr) 124px;min-height:0;height:150px;padding:0;margin:0 0 18px}
  #inicio .zorro-cabecera{max-width:118px}
  #inicio .etiqueta{text-align:left}
  #inicio .logo-cuaderno{width:210px}
  #inicio .etiqueta .sub{margin:6px 0 0}
  #inicio .marcador{grid-column:4}
  #inicio .pie{position:absolute;top:52px;right:142px;margin:0}
  .app:has(#inicio.activa){padding-bottom:22px}
  /* Aventura ocupa la columna de la izquierda; a la derecha, cada grupo en una
     fila de cuatro, con su título encima y el álbum hasta abajo. */
  #inicio .stickers{grid-template-columns:360px repeat(4,minmax(0,1fr));
    grid-template-rows:auto minmax(150px,1fr) auto minmax(150px,1fr) auto;gap:12px 14px}
  #inicio .sticker.ancho:not(#sticker-album){grid-column:1;grid-row:1 / -1;min-height:0;margin-right:8px}
  /* la tarjeta la estira la rejilla, no su contenido: aquí el zorro cabe grande */
  #inicio .sticker.ancho:not(#sticker-album) .emo{font-size:268px;height:264px}
  #inicio .retos-titulo{grid-column:2 / -1;grid-row:1;margin:0;align-self:end}
  #inicio .retos-titulo.practica{grid-row:3}
  #inicio #sticker-album{grid-column:2 / -1;grid-row:5}

  /* aventura: el camino corre de izquierda a derecha */
  #aventura.activa{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"barra barra" "intro medallas" "mapa mapa" "mas mas";align-items:center;column-gap:24px}
  #aventura > .barra{grid-area:barra}
  #aventura .aventura-intro{grid-area:intro;text-align:left;margin:18px 0 12px}
  #aventura .medallero{grid-area:medallas;margin:0;min-width:220px}
  #aventura .mapa{grid-area:mapa}
  #aventura .mas-niveles{grid-area:mas;justify-self:end;width:auto;margin:0;padding:12px 22px}
  #aventura .mapa.horizontal{display:flex;align-items:center;height:470px;overflow-x:auto;overflow-y:hidden;padding:0 60px 0 30px;scrollbar-width:none}
  #aventura .mapa.horizontal::-webkit-scrollbar{display:none}
  #aventura .mapa.horizontal .nodo{flex:none;margin:0 28px 0 0}
  /* el tramo del camino sale del centro de la bola hacia la siguiente (--largo y --ruta los pone pintaMapa) */
  #aventura .mapa.horizontal .nodo:after{width:var(--largo,140px);height:8px;left:56px;top:44px;transform-origin:left center;
    background:repeating-linear-gradient(to right,#c1a0e1 0 9px,transparent 9px 17px)}

  /* multiplicación y división: el teclado se va a una columna a la derecha */
  .teclado{left:auto;right:max(28px,calc((100vw - 1240px)/2 + 28px));bottom:22px;width:380px;padding:18px;border:2px solid #fff;border-radius:28px}
  .teclado .rej{max-width:none;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:88px;gap:12px}
  .teclado button[data-k="0"]{grid-column:3;grid-row:4}
  .teclado .del{grid-column:1 / span 2!important;grid-row:4}
  .teclado .ok{grid-column:1 / -1!important;grid-row:5}
  /* la barra de arriba sigue a todo lo ancho; solo el juego deja lugar al teclado */
  body:has(#teclado.visible) .op-juego{margin-right:calc(380px + 26px)}

  /* memorama de 4 columnas */
  /* el ancho sale de la altura: tres filas tienen que caber sin bajar */
  #memorama .memo{max-width:min(760px,calc((100dvh - 190px) * 1.2));margin:0 auto;grid-template-columns:repeat(4,minmax(0,1fr))}

  /* junta 3: tablero a toda la altura y los controles al lado */
  #g-juego{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"tab meta" "tab msg" "tab btn" "tab pista" "tab .";grid-template-rows:auto auto auto auto 1fr;column-gap:28px;row-gap:18px;align-items:start}
  #match .m3{grid-area:tab;width:min(576px,calc((100dvh - 160px) * .85));max-width:none;margin:0}
  #match .meta{grid-area:meta;justify-content:flex-start;margin:0}
  #match .msg{grid-area:msg;text-align:left;margin:0}
  #match #g-juego .fila-btn{grid-area:btn;margin:0}
  #match .pista{grid-area:pista;margin:0}

  /* lluvia: cielo grande y el teclado de números al lado */
  #c-juego{display:grid;grid-template-columns:minmax(0,1fr) 330px;grid-template-areas:"cielo meta" "cielo pad" "cielo msg";grid-template-rows:1fr auto auto;column-gap:26px;row-gap:18px}
  #caida .cielo{grid-area:cielo;height:min(700px,calc(100dvh - 166px));min-height:420px}
  #caida .meta{grid-area:meta;align-self:end;margin:0}
  #caida .pad{grid-area:pad;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:82px;gap:12px;max-width:none;margin:0}
  #caida .msg{grid-area:msg;font-size:17px;margin:0}

  /* álbum: cabecera y botones en una columna, las cartas de 4 en 4 */
  #album.activa{display:grid;grid-template-columns:320px minmax(0,1fr);grid-template-areas:"barra barra" "cab pila" "cab rej" "acc rej";grid-template-rows:auto auto 1fr auto;column-gap:28px;row-gap:18px;align-items:start;padding-bottom:0}
  #album > .barra{grid-area:barra}
  #album .album-cabecera{grid-area:cab;flex-direction:column;align-items:stretch;flex-wrap:nowrap;margin:0;padding:18px;gap:14px}
  #album .album-selector{flex:none}
  #album .marcadores{width:100%;justify-content:space-between}
  #album .tabs-album{order:0;display:grid;grid-template-columns:1fr;gap:10px}
  #album .tabs-album .tab{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;font-size:17px}
  #album .pila-pendiente{grid-area:pila;margin:0}
  /* tres filas de cartas (alto = 1.4 × ancho) caben en la altura de la pantalla */
  #album .rejilla-cartas{grid-area:rej;grid-template-columns:repeat(4,min(148px,calc((100dvh - 200px) / 4.2)));justify-content:center;align-content:start;gap:14px;margin:0}
  .app:has(#album.activa){padding-bottom:22px}
  #album .album-acciones{grid-area:acc;position:static;transform:none;width:auto;padding:12px;border-radius:22px}
}

/* ================= vertical ================= */
@media (orientation: portrait){
  /* portada: Aventura en una tarjeta horizontal y los retos de tres en tres */
  #inicio .portada{grid-template-columns:150px minmax(0,1fr) 150px;min-height:176px}
  #inicio .zorro-cabecera{max-width:140px}
  #inicio .logo-cuaderno{max-width:290px;margin:0 auto}
  /* cada grupo cabe en una fila de cuatro */
  #inicio .stickers{grid-template-columns:repeat(4,minmax(0,1fr))}
  #inicio .sticker{min-height:152px}
  #inicio .sticker.ancho:not(#sticker-album){display:grid;grid-template-columns:auto 1fr;grid-template-areas:"emo t" "emo d" "emo cta";justify-items:start;align-content:center;column-gap:28px;min-height:206px;padding:0 36px;text-align:left;
    background:linear-gradient(#6d2fcda8,#7136cddd),url(./nubes-horizontal.webp?v=51) center/cover}
  #inicio .sticker.ancho:not(#sticker-album) .emo{grid-area:emo;font-size:190px;height:190px}
  #inicio .sticker.ancho:not(#sticker-album) .t{grid-area:t;font-size:44px}
  #inicio .sticker.ancho:not(#sticker-album) .d{grid-area:d;text-align:left;font-size:16px;margin:7px 0 18px}
  #inicio .sticker.ancho:not(#sticker-album) .aventura-cta{grid-area:cta}

  /* aventura: el camino del teléfono con más aire (las curvas las abre pintaMapa) */
  #aventura .aventura-intro{margin:18px 0 12px}
  #aventura .medallero{max-width:460px;margin-left:auto;margin-right:auto}

  /* operaciones: la casita todavía más grande y el teclado abajo, más alto */
  .operacion{--cw:72px}
  .operacion .fila{height:74px}
  .operacion .celda{font-size:44px}
  .operacion .celda.mano{font-size:50px}
  #division .divisor{font-size:44px;height:74px}
  .teclado{padding:18px 60px calc(26px + env(safe-area-inset-bottom))}
  .teclado .rej{max-width:700px;grid-auto-rows:76px;gap:12px}
  body:has(#teclado.visible) .app{padding-bottom:340px}

  /* memorama de 3 columnas, cartas grandes */
  #memorama .memo{max-width:690px;margin:0 auto}
  #memorama .carta .b{font-size:38px}

  /* junta 3 */
  #match .m3{max-width:684px}
  #match .ficha{font-size:23px}

  /* lluvia */
  #caida .cielo{height:min(690px,55vh)}
  #caida .pad{max-width:none;grid-auto-rows:80px;gap:12px}

  /* álbum de 4 columnas y la barra de botones abajo, más ancha */
  #album .rejilla-cartas{grid-template-columns:repeat(4,168px);justify-content:center;gap:14px}
  #album .album-acciones{width:min(100%,700px);padding-left:60px;padding-right:60px}
  #album .tabs-album .tab{font-size:17px}

  /* sobre: las cuatro cartas en 2×2 */
  .mazo{display:grid;grid-template-columns:repeat(2,250px);justify-content:center;align-items:start}
  .mazo .carta{width:250px}
}