/* ═══════════════════════════════════════════════════════════════════════
   LOS JUEGOS DE FÍSICA, TUMBADOS · lo que comparten los tres · 09/09/2026

   Aquí vive SÓLO lo que es igual en la mudanza, el ingenio y la torre:
   la tarjeta de «gira el móvil», la palanca y la forma de los botones de
   icono. La COLOCACIÓN —qué botón va en qué esquina de qué juego— está
   en la hoja de cada uno, porque los mandos no son los mismos.

   Los colores salen de los tokens de la casa y no se clavan aquí: estas
   piezas flotan encima del lienzo, que es de día siempre, así que los
   fondos son oscuros y translúcidos a propósito y la tinta va escrita
   clara en los dos temas. Es la lección del rótulo encima del lienzo
   (07/09/2026), dicha al derecho: lo que va encima del lienzo no toma
   prestada la tinta de la tarjeta.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── La invitación a girar ─────────────────────────────────────────────
   Calcada de la de la carrera (06/09/2026): mismo gesto del dibujo,
   misma ✕ que la calla para el resto de la sesión —no para siempre:
   quien cambie de postura merece que se lo recuerden otra vez—. */
.fGira{position:fixed;left:50%;transform:translateX(-50%);
   bottom:max(14px,env(safe-area-inset-bottom));z-index:60;
   display:flex;align-items:center;gap:11px;cursor:pointer;
   padding:9px 12px 9px 11px;border-radius:16px;border:0;
   background:rgba(38,45,38,.93);color:#F6F4EF;
   box-shadow:0 10px 26px rgba(0,0,0,.3);width:min(92vw,400px)}
.fGira.oculto{display:none}
.fGira span{display:block;flex:1 1 auto;min-width:0;font-size:calc(13px * var(--sb-tx, 1));font-weight:800;line-height:1.25;
   font-family:var(--sb-fuente-ui)}
.fGira small{display:block;font-size:calc(10.5px * var(--sb-tx, 1));font-weight:700;opacity:.72;
   margin-top:2px;line-height:1.3}
.fGira i{flex:none;width:20px;height:32px;border-radius:5px;border:2.5px solid #F6F4EF;
   display:block;animation:fGiraGira 2.6s ease-in-out infinite;transform-origin:center}
.fGira .fGiraNo{flex:none;margin-left:2px;width:26px;height:26px;border-radius:50%;border:0;
   background:rgba(246,244,239,.14);color:#F6F4EF;font-size:16px;line-height:1;cursor:pointer;
   font-family:inherit}
@keyframes fGiraGira{0%,32%{transform:rotate(0)}52%,78%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.fGira i{animation:none;transform:rotate(-90deg)}}

/* ── La palanca ───────────────────────────────────────────────────────
   Sólo existe tumbado y con una pieza en la mano; el resto del tiempo no
   está, ni siquiera para el dedo. Vive donde cae el pulgar izquierdo. */
.fPalanca{display:none}
body.apaisado.playing .fPalanca{display:block;position:fixed;z-index:40;
   left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));
   width:118px;height:118px;border-radius:50%;touch-action:none;
   background:rgba(38,45,38,.24);border:2px solid rgba(246,244,239,.5);
   box-shadow:0 8px 22px rgba(0,0,0,.18);
   -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.apaisado.playing.arrastrando .fPalanca{background:rgba(38,45,38,.34);
   border-color:rgba(246,244,239,.85)}
body.apaisado.playing .fPalanca i{position:absolute;left:50%;top:50%;width:52px;height:52px;
   margin:-26px 0 0 -26px;border-radius:50%;display:block;
   background:rgba(246,244,239,.9);border:1px solid rgba(38,45,38,.25);
   box-shadow:0 3px 10px rgba(0,0,0,.22);transition:transform .1s linear}
body.apaisado.playing .fPalanca.viva i{transition:none;background:#fff}
/* Sin pieza elegida la palanca se ve, pero apagada: una palanca que
   desaparece se lee como una avería, y una que no dice por qué no
   responde es peor. La hoja de cada juego enciende `.arrastrando`. */
body.apaisado.playing:not(.arrastrando) .fPalanca{opacity:.4}
/* Y mientras corre la prueba o rueda el camión no hay nada que empujar:
   la palanca se va del todo y deja ver el juego. Las clases las ponen
   los propios juegos («testing» en el ingenio y la torre, «driving» en
   la mudanza), así que aquí no hay ninguna lista escrita. */
body.apaisado.playing.testing .fPalanca,
body.apaisado.playing.driving .fPalanca{display:none}
@media (prefers-reduced-motion:reduce){body.apaisado.playing .fPalanca i{transition:none}}

/* ── El aviso de estado, arriba y con su interruptor (10/09/2026) ──────
   Antes cada juego lo dejaba pegado al borde de abajo, encima del
   tablero: tapaba justo el bulto o la pieza que se estaba mirando. El
   texto lo sigue escribiendo cada juego en su propio elemento —esto no
   toca eso—, pero el elemento que lleve la clase `fAyuda` sube aquí,
   bajo la cinta de piezas, donde no hay nada que tapar. Quien va
   primero (qué es, qué se pregunta) se queda en la fila de arriba con
   el tamaño de fábrica; quien va segundo (si cabe, la casilla de «ya lo
   hemos dicho») usa `#placement`/`.check` para bajar una fila. */
body.apaisado.playing .fAyuda{position:fixed;z-index:41;left:50%;transform:translateX(-50%);
   margin:0;max-width:min(58vw,420px);padding:6px 12px;border-radius:12px;
   background:rgba(38,45,38,.86);color:#F6F4EF;font-family:var(--sb-fuente-ui);
   font-size:calc(11px * var(--sb-tx, 1));font-weight:700;line-height:1.35;text-align:center;
   top:calc(max(10px,env(safe-area-inset-top)) + 122px)}
body.apaisado.playing label.fAyuda{display:flex;align-items:center;gap:7px;justify-content:center}
body.apaisado.playing #placement.fAyuda,body.apaisado.playing .check.fAyuda{
   top:calc(max(10px,env(safe-area-inset-top)) + 156px)}
/* !important a propósito: cada juego pone SU display (flex en el
   renglón del bulto, block en el resto) sobre `.fAyuda`, y esa hoja se
   carga después que ésta — sin el peso extra, el interruptor pierde el
   empate de especificidad y «ocultar» se queda sin efecto. */
body.apaisado.playing.sinAyuda .fAyuda{display:none !important}

/* El interruptor: un ojo fijo, junto a la flecha de volver, que apaga y
   enciende los avisos y se recuerda de una partida a otra.
   Hubo además una ✕ pegada al propio aviso, y se retiró el 11/09/2026:
   hacía exactamente lo mismo que el ojo —un botón más flotando encima
   del tablero para repetir una función que ya estaba—. Si vuelve a
   apetecer «cerrar esto de aquí», la respuesta es el ojo. */
.fAyudaBtn{display:none}
body.apaisado.playing .fAyudaBtn{display:grid;position:fixed;z-index:43;
   top:max(10px,env(safe-area-inset-top));
   left:calc(max(12px,env(safe-area-inset-left)) + 52px);
   width:44px;height:44px;border-radius:14px;place-items:center;border:0;
   background:rgba(38,45,38,.86);color:#F6F4EF;font-size:18px;cursor:pointer;
   border:1px solid rgba(246,244,239,.34);box-shadow:0 6px 16px rgba(0,0,0,.22);
   -webkit-touch-callout:none}
body.apaisado.playing.sinAyuda .fAyudaBtn{background:rgba(246,244,239,.92);color:#22301f}

/* ── El dato de la partida, en voz baja (11/09/2026) ───────────────────
   Tumbado se esconde la telemetría entera, y con ella se iba lo único
   que se mira para decidir: cuántos ensayos quedan (torre, ingenio) y
   cómo va repartida la carga (mudanza). Javi lo pidió «de forma muy
   sutil y discreta», así que es un renglón pequeño arriba a la derecha,
   bajo los iconos: más translúcido que el resto de piezas flotantes, sin
   sombra, y sordo al dedo —`pointer-events:none`— para no robarle un
   toque al tablero que tiene debajo. Qué elemento lo lleva y a qué
   altura, lo dice la hoja de cada juego; el aspecto es común.
   Tinta clara escrita a mano, no de los tokens: esto flota sobre el
   lienzo, que es de día siempre. */
body.apaisado.playing .fDato{position:fixed;z-index:40;pointer-events:none;
   right:max(12px,env(safe-area-inset-right));
   display:flex;align-items:baseline;gap:6px;margin:0;padding:3px 9px;border-radius:9px;
   background:rgba(38,45,38,.5);color:#F6F4EF;font-family:var(--sb-fuente-ui);
   text-align:right;max-width:min(46vw,260px)}
body.apaisado.playing .fDato small{font-size:calc(8px * var(--sb-tx, 1));font-weight:800;
   letter-spacing:.06em;opacity:.66;text-transform:uppercase}
body.apaisado.playing .fDato strong{font-size:calc(11px * var(--sb-tx, 1));font-weight:700;
   white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Los botones de icono ─────────────────────────────────────────────
   El texto de verdad sigue en el botón (es su nombre para quien lee la
   pantalla en voz alta); tumbado se apaga con font-size:0 y salen el
   icono de `data-ico` y el rótulo corto de `data-corto`. Así ningún
   botón pierde su nombre por caber en una esquina. */
body.apaisado .fBtn{font-size:0 !important;display:grid;place-items:center;gap:1px;
   width:56px;height:56px;padding:0;border-radius:17px;border:1px solid rgba(246,244,239,.34);
   background:rgba(38,45,38,.86);color:#F6F4EF;cursor:pointer;
   font-family:var(--sb-fuente-ui);line-height:1;
   box-shadow:0 6px 16px rgba(0,0,0,.22);-webkit-touch-callout:none}
body.apaisado .fBtn::before{content:attr(data-ico);font-size:22px;line-height:1}
body.apaisado .fBtn::after{content:attr(data-corto);font-size:8.5px;font-weight:800;
   letter-spacing:.02em;opacity:.82;line-height:1}
body.apaisado .fBtn:disabled{opacity:.34}
body.apaisado .fBtn.principal{background:var(--sb-acento);color:#F6F4EF;
   border-color:rgba(246,244,239,.5);width:64px;height:64px}
body.apaisado .fBtn.principal::before{font-size:25px}
body.apaisado .fBtn[aria-pressed="true"]{background:rgba(246,244,239,.92);color:#22301f}

/* La barra de mandos de la derecha, que los tres colocan igual. */
body.apaisado .fMandos{position:fixed;z-index:40;
   right:max(14px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));
   display:flex;align-items:flex-end;gap:9px;pointer-events:auto}

/* Y la cinta de arriba: volver, el reto y lo que se pide. */
body.apaisado .fTira{position:fixed;z-index:40;top:max(10px,env(safe-area-inset-top));
   left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));
   display:flex;align-items:center;gap:9px;pointer-events:none}
body.apaisado .fTira>*{pointer-events:auto}
body.apaisado .fTira .fRotulo{flex:1 1 auto;min-width:0;padding:6px 12px;border-radius:13px;
   background:rgba(38,45,38,.82);color:#F6F4EF;font-family:var(--sb-fuente-ui);
   font-size:calc(11.5px * var(--sb-tx, 1));font-weight:800;line-height:1.25;
   white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.apaisado .fTira .fRotulo b{font-weight:800}
body.apaisado .fTira .fRotulo span{font-weight:650;opacity:.78}

/* Tumbado y bajito —un iPhone de lado son 390 de alto— todo se encoge un
   punto para que el lienzo se quede con la pantalla. */
@media (orientation:landscape) and (max-height:420px){
  body.apaisado.playing .fPalanca{width:100px;height:100px}
  body.apaisado.playing .fPalanca i{width:46px;height:46px;margin:-23px 0 0 -23px}
  body.apaisado .fBtn{width:50px;height:50px;border-radius:15px}
  body.apaisado .fBtn::before{font-size:20px}
  body.apaisado .fBtn.principal{width:58px;height:58px}
}