/* ═══════════════════════════════════════════════════════════════════════
   LA GRAN MUDANZA · la hoja de la casa · 06/09/2026 (tercera)

   REESCRITA ENTERA, y el porqué merece quedar escrito. La hoja que trajo
   Codex era elegante pero hablaba otro idioma: clavaba SU paleta encima
   de los tokens de la casa (`--sb-fondo:#f6f4ef` en :root, a pelo), con
   tres consecuencias que no se ven en una demo y sí en esta casa:

     · el modo noche sobrevivía DE CASUALIDAD — el bloque nocturno de
       sabai-tokens.css gana por especificidad (`:root:not(...)`), no
       porque esta hoja lo respetara — y todo lo clavado (el prado del
       escenario, sus textos) se quedaba de día en una página de noche;
     · el mando de tema de Mis llaves (data-tema) ni existía para ella;
     · botones de 13px, tarjetas de 24, una columna de 1192px con rejilla
       de escritorio… en una casa donde TODOS los juegos son una columna
       de 520 con galletas redondas. Se notaba que era de fuera.

   Y una avería funcional escondida en el CSS viejo: `.day{display:none}`
   por debajo de 850px — EN UN MÓVIL NO EXISTÍA LA PUERTA DE LA JORNADA:
   ni pactar, ni cerrar el día. El aparato de la casa es el móvil.

   La regla de esta hoja: LA CÁSCARA ES DE LA CASA (tokens, cabecera,
   galletas, columna de 520) y LA PERSONALIDAD ES DEL JUEGO (los rótulos
   editoriales en versalitas, la tira de telemetría, el prado del
   escenario, el lema en dos líneas). Elegante y con capas, no
   complicado. Como la carrera conserva su circuito a pleno sol, la
   ESCENA 3D sigue siendo de día también de noche — es una ventana, no
   una superficie — y lo que la enmarca sí cambia con el tema.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Los tonos propios del juego, en los dos temas ────────────────────
   Mismo patrón que el oro del impostor: un acento local con su pareja
   nocturna, NUNCA pisar un token de la casa. El prado es el verde del
   taller; el oro marca lo elegido y la correa. Con las tres guardas de
   sabai-tokens.css, para que el mando manual de tema también mande aquí. */
:root{
  --mud-prado:#E7ECE0; --mud-prado-linea:#CBD6C4; --mud-prado-tinta:#33503F;
  --mud-oro:#8F6A14; --mud-oro-tenue:rgba(143,106,20,.14);
}
/* AQUÍ VIVÍA «--mud-escena-tinta», y se ha ido entero el 07/09/2026 por
   la tarde. Existía por una sola razón: el rótulo del objetivo flotaba
   ENCIMA del lienzo, el lienzo del 3D es de día siempre (pinta su
   propio cielo, #dce5d8 en escena.js) y una tinta de la tarjeta ahí se
   daba la vuelta de noche — texto claro sobre fondo claro, que fue
   justo lo que se vio en el iPhone simulado esa mañana. El rótulo se
   ha bajado a la tarjeta (ver `.stage-caption`), así que usa la tinta
   de la tarjeta y el token no lo necesitaba nadie. Un problema menos,
   no un token más. Lo que de verdad tenga que ir encima del lienzo, que
   lo pinte el lienzo. */
@media (prefers-color-scheme:dark){
  :root:not([data-tema="dia"]){
    --mud-prado:#242B25; --mud-prado-linea:#3A453C; --mud-prado-tinta:#AFC6B2;
    --mud-oro:#E0B45A; --mud-oro-tenue:rgba(224,180,90,.16);
  }
}
:root[data-tema="noche"]{
  --mud-prado:#242B25; --mud-prado-linea:#3A453C; --mud-prado-tinta:#AFC6B2;
  --mud-oro:#E0B45A; --mud-oro-tenue:rgba(224,180,90,.16);
}

/* ── La base, calcada de los otros juegos ───────────────────────────── */
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%}
body{background:var(--sb-fondo);color:var(--sb-tinta);font-family:var(--sb-fuente-ui);
     -webkit-font-smoothing:antialiased;
     padding:max(16px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom))}
[hidden]{display:none!important}
.caja{max-width:520px;margin:0 auto}
header{position:relative;text-align:center;padding:14px 0 4px;margin-bottom:10px}
header a.atras{position:absolute;left:0;top:18px;text-decoration:none;color:var(--sb-tinta-suave);
   font-size:calc(20px * var(--sb-tx, 1));font-weight:600;padding:8px 12px 8px 2px}
header .sello{margin:0 auto 6px;--d:54px}
/* 22 Y NO 25, que es el de los demás juegos, y no es un capricho: «La
   Gran Mudanza» es EL NOMBRE MÁS LARGO DE LA CASA y a 25 ocupaba el 61%
   del ancho en un iPhone —el más ancho de los cinco—, así que se leía
   como un bloque aunque la letra midiera lo mismo que en «El impostor»
   (43%). Medido, no a ojo. Palabras cruzadas ya llevaba 24 por esto
   mismo; aquí hace falta un paso más porque son tres palabras largas
   con mayúscula. Con `balance` el corte cae donde no deja una palabra
   suelta si algún día alguien sube el tamaño de letra. */
header h1{margin:0;font-size:calc(22px * var(--sb-tx, 1));font-weight:700;letter-spacing:-.015em;
   text-wrap:balance}
header .sub{margin:4px 0 0;font-size:calc(13.5px * var(--sb-tx, 1));font-weight:600;color:var(--sb-tinta-suave)}

button,input,select{font:inherit}
button,a,input,select{touch-action:manipulation}
button{cursor:pointer;min-height:44px;border:1.5px solid var(--sb-linea);border-radius:999px;
   background:var(--sb-superficie);color:var(--sb-tinta);padding:11px 18px;
   font-size:calc(14px * var(--sb-tx, 1));font-weight:700}
button:disabled{opacity:.48;cursor:default}
button:active:not(:disabled){transform:scale(.97)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{
   outline:3px solid var(--mud-oro);outline-offset:3px}
.primary{background:var(--sb-acento);border-color:var(--sb-acento);color:var(--sb-fondo)}
.full{width:100%;margin-top:8px;padding:13px 14px;font-size:calc(15px * var(--sb-tx, 1))}
.text-button{border:none;background:none;padding:8px 0;min-height:44px;color:var(--sb-tinta-suave);
   font-size:calc(12px * var(--sb-tx, 1));font-weight:600;text-decoration:underline;text-underline-offset:4px}
/* Dos enlaces seguidos («Volver a los juegos» y «Cerrar esta mesa») se
   pegaban en una sola frase. La regla del 06/09: cada pieza respeta su
   hueco. */
.text-button+.text-button{margin-left:20px}

.notice{padding:12px 15px;background:var(--sb-aviso-tenue);color:var(--sb-aviso);
   border-radius:var(--sb-r);font-size:calc(13px * var(--sb-tx, 1));font-weight:650;margin:0 0 12px}
.micro{font-size:calc(12px * var(--sb-tx, 1));color:var(--sb-tinta-suave);line-height:1.55;margin:10px 0;font-weight:500}
label{display:block;color:var(--sb-tinta-suave);font-size:calc(12px * var(--sb-tx, 1));font-weight:700}
select,input{width:100%;margin-top:6px;background:var(--sb-fondo);border:1.5px solid var(--sb-linea);
   border-radius:var(--sb-r-md);padding:11px 12px;color:var(--sb-tinta);min-height:44px;
   font-size:calc(13.5px * var(--sb-tx, 1))}

/* ── Los rótulos editoriales: la voz propia de este juego ───────────── */
.eyebrow{display:block;font-size:calc(11px * var(--sb-tx, 1));font-weight:800;letter-spacing:.13em;
   text-transform:uppercase;color:var(--sb-tinta-suave)}
h2{font-size:calc(21px * var(--sb-tx, 1));line-height:1.22;letter-spacing:-.02em;margin:10px 0}
h3{font-size:calc(16px * var(--sb-tx, 1));margin:10px 0 6px}
p{line-height:1.55}

/* ── La entrada: el lema y la puerta de la jornada ──────────────────── */
.intro{margin:16px 0 14px;text-align:center}
/* Por debajo del título, siempre. Al bajar el h1 a 22 este lema se
   quedó MÁS GRANDE que el nombre del juego, que es la jerarquía al
   revés: lo primero que se lee tiene que ser dónde estás. */
.lema{font-size:calc(20px * var(--sb-tx, 1));letter-spacing:-.03em;line-height:1.22;margin:8px 0 6px}
.lema em{font-style:italic;color:var(--sb-acento)}
.intro p{color:var(--sb-tinta-suave);margin:0;font-size:calc(13.5px * var(--sb-tx, 1));font-weight:550}
/* La puerta de la jornada: el pacto, lo jugado hoy y el límite. En la
   hoja anterior desaparecía en móvil; ahora es una tarjeta de la casa y
   está SIEMPRE, que es donde se pacta y se cierra el día. */
.day{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin:12px 0 16px;
   background:var(--sb-superficie);border:1px solid var(--sb-linea);border-radius:var(--sb-r-lg);
   box-shadow:var(--sb-sombra);padding:13px 16px}
.day span,.day strong,.day small{display:block}
.day>div{flex:1;min-width:0}
.day span{font-size:calc(10px * var(--sb-tx, 1));font-weight:800;letter-spacing:.11em;
   text-transform:uppercase;color:var(--sb-tinta-suave)}
.day strong{font-size:calc(16px * var(--sb-tx, 1));font-weight:750;margin:3px 0 2px}
.day small{font-size:calc(11.5px * var(--sb-tx, 1));color:var(--sb-tinta-suave);font-weight:550;line-height:1.35}
.day i{flex:none;font-style:normal;font-weight:800;color:var(--sb-tinta-suave);font-size:calc(18px * var(--sb-tx, 1))}

/* ── El escenario: la ventana al taller ─────────────────────────────── */
.layout{display:block}
.stage-card{background:var(--mud-prado);border:1px solid var(--mud-prado-linea);
   border-radius:var(--sb-r-lg);box-shadow:var(--sb-sombra);overflow:hidden;margin-bottom:14px}
.stage-top{display:flex;justify-content:space-between;gap:8px;padding:14px 16px 0;align-items:center;
   color:var(--mud-prado-tinta);font-size:calc(12px * var(--sb-tx, 1));font-weight:700}
.badge{font-size:calc(8.5px * var(--sb-tx, 1));font-weight:800;letter-spacing:.09em;
   border:1px solid var(--mud-prado-linea);padding:5px 9px;border-radius:20px;white-space:nowrap}
.canvas-wrap{position:relative;height:min(330px, 72vw);margin-top:10px}
/* EL LIENZO NO SE QUEDA EL DEDO SI NO HAY NADA QUE ARRASTRAR
   (07/09/2026). Con `touch-action:none` a secas, pasar el dedo por
   encima del camión NO HACE SCROLL, y el escenario ocupa un tercio de
   la pantalla de un iPhone: la pantalla se quedaba pillada al intentar
   bajar a elegir el destino o a apuntarse. En el escritorio no se ve,
   porque ahí la rueda del ratón sí funciona.
   Sólo se lo queda mientras hay un bulto elegido, que es cuando
   arrastrar significa algo: la clase la pone `inventory()`. */
canvas{width:100%;height:100%;display:block;touch-action:pan-y}
body.arrastrando canvas{touch-action:none}
/* EL RÓTULO VA DEBAJO DEL LIENZO, NO FLOTANDO ENCIMA (07/09/2026).
   Iba pegado al borde de abajo, que es justo donde el 3D dibuja la
   carretera y las ruedas; y encima la escena es de DÍA SIEMPRE, así que
   una tinta de la tarjeta ahí se daba la vuelta de noche y hacía falta
   un token propio (`--mud-escena-tinta`) para taparlo. Debajo se
   arreglan las dos cosas de una vez: usa la tinta de la tarjeta y no
   tapa nada. Es la misma lección que en La Torre y en la Cadena. */
.stage-caption{margin:0;padding:11px 16px 0;text-align:center;
   color:var(--mud-prado-tinta);font-size:calc(11.5px * var(--sb-tx, 1));font-weight:650}

/* LA TIRA DE BULTOS: lo que trae el viaje elegido, antes de abrir mesa.
   Es la hermana de la ficha de piezas de la torre y de la cadena; aquí
   va en DOM y no pintada dentro del lienzo, porque el lienzo es 3D. */
.kit{padding:2px 16px 0}
.kit .eyebrow{display:block;margin-bottom:7px}
.kit-list{display:flex;flex-wrap:wrap;gap:6px}
.kit-list b{display:inline-flex;align-items:baseline;gap:5px;font-weight:700;
   font-size:calc(11.5px * var(--sb-tx, 1));border:1px solid var(--mud-prado-linea);
   border-radius:20px;padding:5px 10px;background:var(--mud-prado)}
.kit-list i{font-style:normal;font-weight:600;color:var(--sb-tinta-suave);
   font-size:calc(10.5px * var(--sb-tx, 1))}
#kitHint{margin:8px 0 0}

/* Las galletas del escenario, como en los otros dos de la colección. */
.stage-tools{display:flex;gap:7px;flex-wrap:wrap;padding:12px 16px 15px}
.chip{min-height:38px;padding:8px 13px;font-size:calc(11.5px * var(--sb-tx, 1));font-weight:700;
   background:transparent;border-color:var(--mud-prado-linea);color:var(--mud-prado-tinta)}
.chip[aria-pressed=true]{background:var(--mud-oro-tenue);border-color:var(--mud-oro);color:var(--mud-oro)}
body.driving .stage-tools,body.driving .kit{display:none}
#sceneFallback{position:absolute;inset:12px;background:var(--sb-superficie);color:var(--sb-tinta);
   border-radius:var(--sb-r);padding:18px;font-size:calc(13px * var(--sb-tx, 1));line-height:1.5}
/* La tira de telemetría: tres datos, una línea. Es de las cosas bonitas
   que trajo el juego y se queda tal cual era, con los tonos del prado. */
.telemetry{display:grid;grid-template-columns:1fr 1.3fr 1fr;border-top:1px solid var(--mud-prado-linea);
   margin:0 16px;padding:13px 0 15px}
.telemetry>div{padding-left:16px;border-left:1px solid var(--mud-prado-linea)}
.telemetry>div:first-child{padding-left:0;border:0}
.telemetry small{display:block;font-size:calc(8.5px * var(--sb-tx, 1));font-weight:800;
   letter-spacing:.13em;color:var(--mud-prado-tinta);opacity:.8;margin-bottom:5px}
.telemetry strong{font-size:calc(15px * var(--sb-tx, 1));font-weight:650;color:var(--mud-prado-tinta)}

/* ── El camino: la barra y los pedales ──────────────────────────────── */
.progress{height:6px;background:var(--mud-prado-linea);margin:0 16px;border-radius:99px;overflow:hidden}
.progress span{display:block;background:var(--sb-acento);height:100%;width:0}
.drive-row{display:flex;gap:8px;align-items:center;padding:14px 16px 4px}
.drive-row>span{flex:1;color:var(--mud-prado-tinta);font-size:calc(12px * var(--sb-tx, 1));font-weight:650}
.drive-row strong{font-size:calc(24px * var(--sb-tx, 1));font-variant-numeric:tabular-nums}
.drive-row small{font-size:calc(10.5px * var(--sb-tx, 1));font-weight:650}
.drive-row button{min-height:56px;font-weight:800;background:var(--sb-superficie)}
.drive-row #gas{background:var(--sb-acento);border-color:var(--sb-acento);color:var(--sb-fondo);padding:11px 22px}
.drive-row #brake{background:var(--sb-aviso-tenue);border-color:var(--sb-aviso);color:var(--sb-aviso)}
.drive-row #pause{flex:none;width:56px;padding:0}
#roadHUD>.micro{text-align:center;color:var(--mud-prado-tinta);margin:6px 14px 14px}

/* ── Los paneles: tarjetas de la casa ───────────────────────────────── */
.panel{background:var(--sb-superficie);border:1px solid var(--sb-linea);border-radius:var(--sb-r-lg);
   box-shadow:var(--sb-sombra);padding:18px;margin-bottom:14px}
.missions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 18px}
.mission{position:relative;text-align:left;border-radius:var(--sb-r);padding:12px 11px;min-height:96px;
   background:var(--sb-fondo);border-color:var(--sb-linea)}
.mission .em{font-size:calc(23px * var(--sb-tx, 1));display:block;margin-bottom:7px}
.mission b{font-size:calc(11.5px * var(--sb-tx, 1));line-height:1.3;display:block;font-weight:700}
.mission[aria-pressed=true]{border:2px solid var(--sb-acento);padding:11px 10px;
   background:var(--sb-acento-tenue)}
.mission[aria-pressed=true]:after{content:'✓';position:absolute;top:8px;right:10px;color:var(--sb-acento);font-weight:800}
.setup-fields{display:grid;gap:12px;margin-bottom:20px}
.people{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.person{min-height:40px;font-size:calc(12.5px * var(--sb-tx, 1));padding:8px 13px;
   display:flex;align-items:center;gap:7px}
.person:before{content:'';width:9px;height:9px;border-radius:50%;background:var(--person,var(--sb-tinta-suave));flex:none}
.person[aria-pressed=true]{background:var(--sb-acento-tenue);border-color:var(--sb-acento)}
.guest-row{display:flex;gap:6px;margin-top:10px}
.guest-row input{margin:0}
.guest-row button{flex:none;width:48px;padding:0}

/* ── El taller: turno, inventario y mandos ──────────────────────────── */
.inventory{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:15px 0}
.inventory button{padding:7px 2px;min-height:64px;font-size:calc(20px * var(--sb-tx, 1));
   border-radius:var(--sb-r);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.inventory small{display:block;font-size:calc(9px * var(--sb-tx, 1));font-weight:700;color:var(--sb-tinta-suave)}
.inventory button[aria-pressed=true]{border:2px solid var(--mud-oro);background:var(--mud-oro-tenue)}
.inventory button.loaded{background:var(--sb-acento-tenue);opacity:.8}
.item-line{display:flex;justify-content:space-between;gap:8px;align-items:baseline;
   font-size:calc(14px * var(--sb-tx, 1));font-weight:700;margin-top:4px}
.item-line span{font-size:calc(11px * var(--sb-tx, 1));color:var(--sb-tinta-suave);font-weight:600}
.move-controls{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:8px}
.move-controls button{padding:6px;min-height:48px;font-size:calc(19px * var(--sb-tx, 1));border-radius:var(--sb-r)}
.tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tools button{flex:1;min-width:0;font-size:calc(12px * var(--sb-tx, 1));padding:10px 8px}
.tools [aria-pressed=true]{background:var(--mud-oro-tenue);border-color:var(--mud-oro);color:var(--mud-oro)}
.check{display:flex;align-items:center;gap:9px;min-height:44px;font-size:calc(13.5px * var(--sb-tx, 1));
   color:var(--sb-tinta);font-weight:600}
.check input{width:20px;height:20px;min-height:0;flex:none;margin:0;accent-color:var(--sb-acento)}

/* ── El aprendizaje y el pie, en una línea de tres ──────────────────── */
.learning{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0 6px}
.learning>div{position:relative;padding-left:26px}
.learning span{position:absolute;left:0;top:2px;font-size:calc(11px * var(--sb-tx, 1));
   font-weight:800;color:var(--mud-oro)}
.learning strong{font-size:calc(12.5px * var(--sb-tx, 1));font-weight:750}
.learning p{font-size:calc(11px * var(--sb-tx, 1));color:var(--sb-tinta-suave);margin:4px 0;line-height:1.45}
footer{border-top:1px solid var(--sb-linea);text-align:center;padding-top:16px;margin-top:14px;
   font-size:calc(11.5px * var(--sb-tx, 1));color:var(--sb-tinta-suave);font-weight:550}

/* ── Las hojas (dialog) y el toast, con la piel de la casa ──────────── */
dialog{position:relative;border:1px solid var(--sb-linea);border-radius:var(--sb-r-lg);padding:26px 22px;
   background:var(--sb-superficie);color:var(--sb-tinta);width:min(480px,calc(100% - 24px));
   max-height:90dvh;overflow:auto;box-shadow:var(--sb-sombra-alta)}
dialog::backdrop{background:rgba(20,23,21,.55);backdrop-filter:blur(5px)}
dialog p,dialog li{font-size:calc(13.5px * var(--sb-tx, 1));line-height:1.65}
dialog .tools{justify-content:center}
.close{position:absolute;right:10px;top:10px;width:44px;min-height:44px;padding:0;background:transparent;
   border:none;font-size:calc(22px * var(--sb-tx, 1));color:var(--sb-tinta-suave)}
.reflection{background:var(--mud-prado);color:var(--mud-prado-tinta);padding:14px 16px;
   border-radius:var(--sb-r);font-weight:600}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--sb-tinta);
   color:var(--sb-fondo);border-radius:999px;padding:12px 20px;z-index:500;
   font-size:calc(13px * var(--sb-tx, 1));font-weight:650;max-width:90%;display:none;
   box-shadow:var(--sb-sombra-alta)}
.toast.on{display:block}

/* ── Jugando y conduciendo: menos ruido alrededor ───────────────────── */
body.playing .intro p,body.playing .learning{display:none}
body.playing .intro{margin:8px 0 10px}
body.playing .lema{font-size:calc(18px * var(--sb-tx, 1))}
body.driving .intro,body.driving .day,body.driving footer{display:none}

/* ══ ¿QUÉ HACE LA CORREA? · el plegable con su bache ═════════════════
   Ver la nota de la entrega de las 19:04: el botón no decía qué hacía y
   la diferencia sólo se veía en la carretera, que es tarde. El dibujo
   sólo se anima abierto, y sin movimiento enseña el final. */
.tiehelp{margin-top:12px;border-top:1px solid var(--sb-linea);padding-top:10px}
.tiehelp summary{cursor:pointer;min-height:44px;display:flex;align-items:center;
   font-size:calc(12px * var(--sb-tx, 1));font-weight:700;color:var(--sb-tinta-suave)}
.tiehelp summary::marker{color:var(--mud-oro)}
.tiedemo{background:var(--mud-prado);border-radius:var(--sb-r);padding:8px 6px;margin:6px 0 2px}
.tiedemo svg{display:block;width:100%;height:auto}
.tdRot{font:inherit;font-size:11px;font-weight:700;fill:var(--mud-prado-tinta);text-anchor:middle}
.tdCorrea{stroke:var(--mud-oro)}
.tdSin,.tdCon,.tdCamion{transform-box:fill-box;transform-origin:center}
.tiehelp[open] .tdCamion{animation:tdBache 3.6s ease-in-out infinite}
.tiehelp[open] .tdSin{animation:tdCae 3.6s ease-in-out infinite}
.tiehelp[open] .tdCon{animation:tdAguanta 3.6s ease-in-out infinite}
@keyframes tdBache{
  0%,30%{transform:translateY(0)} 36%{transform:translateY(-5px)}
  44%{transform:translateY(2px)} 52%,100%{transform:translateY(0)}}
@keyframes tdCae{
  0%,30%{transform:translate(0,0) rotate(0);opacity:1}
  42%{transform:translate(-13px,-3px) rotate(-9deg);opacity:1}
  56%{transform:translate(-44px,16px) rotate(-40deg);opacity:1}
  66%{transform:translate(-66px,44px) rotate(-72deg);opacity:0}
  67%{transform:translate(0,0) rotate(0);opacity:0}
  78%,100%{transform:translate(0,0) rotate(0);opacity:1}}
@keyframes tdAguanta{
  0%,30%{transform:translate(0,0) rotate(0)}
  40%{transform:translate(-3px,-1px) rotate(-2deg)}
  50%{transform:translate(1px,0) rotate(1deg)}
  60%,100%{transform:translate(0,0) rotate(0)}}

/* ── Poca luz de movimiento, y pantallas estrechas ──────────────────── */
@media (prefers-reduced-motion:reduce){
  button:active:not(:disabled){transform:none}
  .tiehelp[open] .tdCamion,.tiehelp[open] .tdSin,.tiehelp[open] .tdCon{animation:none}
  .tiehelp[open] .tdSin{transform:translate(-44px,16px) rotate(-40deg)}
}
@media (max-width:380px){
  .inventory{grid-template-columns:repeat(4,1fr);gap:4px}
  .learning{gap:10px}
  .drive-row{flex-wrap:wrap}
  .drive-row>span{flex-basis:100%}
}

/* ═══════════════════════════════════════════════════════════════════════
   EL CAMIÓN TUMBADO · 09/09/2026

   Lo mismo que en Cadena de Ingenio y Torre en Equipo, y por lo mismo:
   la escena del camión es ancha, de pie vive dentro de una columna de
   520 y se queda en un tercio de la pantalla. Tumbada cabe entera —la
   cámara es ortográfica y se adapta sola al ancho, así que no hay que
   tocar el 3D— y los mandos se van a donde caen los pulgares.

   Aquí NO se mueve ni un nodo del DOM: los botones se quedan donde
   están, con su `onclick` puesto, y esta hoja los coloca. La palanca y
   la tarjeta de «gira el móvil» las pone `/juego/fisica/apaisado.js`.

   Se enciende con `body.apaisado.playing`: tumbado Y con la mesa
   abierta. Eligiendo el destino manda la pantalla de siempre.
   ═══════════════════════════════════════════════════════════════════════ */
body.apaisado.playing{overflow:hidden}
body.apaisado.playing .intro,body.apaisado.playing .day,
body.apaisado.playing .learning,body.apaisado.playing footer,
body.apaisado.playing header h1,body.apaisado.playing header .sub,
body.apaisado.playing header .sello,body.apaisado.playing #demoNotice,
body.apaisado.playing .stage-top,
body.apaisado.playing .stage-caption,body.apaisado.playing #kit,
body.apaisado.playing #turnLabel,body.apaisado.playing #turnHint,
body.apaisado.playing #textState,body.apaisado.playing #tieHelp,
body.apaisado.playing .stage-tools,body.apaisado.playing #ready h3,
body.apaisado.playing #editing>p.micro:not(#placement),
body.apaisado.playing #ready>p.micro:not(#question),
body.apaisado.playing #roadHUD>p.micro{display:none}
body.apaisado.playing .caja{max-width:none;margin:0}
body.apaisado.playing header{margin:0;padding:0;height:0}
body.apaisado.playing .layout{display:block}

/* La escena se queda con la pantalla entera. El 3D no necesita nada
   más: `resize()` se mide sola en cada dibujo y la cámara se estira. */
body.apaisado.playing .stage-card{position:fixed;inset:0;z-index:1;margin:0;padding:0;
   border:0;border-radius:0;overflow:hidden}
body.apaisado.playing .canvas-wrap{position:absolute;inset:0;margin:0;height:auto}
body.apaisado.playing #scene{width:100%;height:100%;border-radius:0}

body.apaisado.playing .panel{background:none;border:0;box-shadow:none;padding:0;margin:0}

/* ── Arriba: volver, de quién es el turno ─────────────────────────── */
body.apaisado.playing header a.atras{position:fixed;z-index:42;
   left:max(12px,env(safe-area-inset-left));top:max(10px,env(safe-area-inset-top));
   width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
   background:rgba(38,45,38,.86);color:#F6F4EF;font-size:20px;
   border:1px solid rgba(246,244,239,.34);box-shadow:0 6px 16px rgba(0,0,0,.22)}
body.apaisado.playing #turnName{position:fixed;z-index:41;
   top:max(10px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);
   margin:0;max-width:min(52vw,340px);padding:8px 14px;border-radius:14px;
   background:rgba(38,45,38,.86);color:#F6F4EF;text-align:center;
   font-size:calc(13px * var(--sb-tx, 1));font-weight:800;line-height:1.2;
   white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Salir y cerrar la mesa, debajo de la flecha y en columna: a la
   derecha se comían la cinta de bultos. */
body.apaisado.playing #exit,body.apaisado.playing #cancel{position:fixed;z-index:41;
   left:max(12px,env(safe-area-inset-left));width:92px;text-align:left;margin:0;
   min-height:0;height:30px;line-height:1.15;
   font-size:calc(10px * var(--sb-tx, 1));padding:4px 9px;border-radius:9px;
   background:rgba(38,45,38,.7);color:#F6F4EF;border:1px solid rgba(246,244,239,.28)}
body.apaisado.playing #exit{top:calc(max(10px,env(safe-area-inset-top)) + 50px)}
body.apaisado.playing #cancel{top:calc(max(10px,env(safe-area-inset-top)) + 86px)}

/* ── La caja de bultos, en cinta ──────────────────────────────────── */
body.apaisado.playing #inventory{position:fixed;z-index:41;
   top:calc(max(10px,env(safe-area-inset-top)) + 50px);left:50%;transform:translateX(-50%);
   display:flex;grid-template-columns:none;margin:0;gap:6px;padding:5px;border-radius:14px;
   max-width:min(58vw,420px);overflow-x:auto;background:rgba(38,45,38,.7)}
body.apaisado.playing #inventory button{min-height:0;width:52px;height:48px;padding:3px 2px;
   flex:none;border-radius:11px;background:rgba(246,244,239,.9);color:#22301f;
   font-size:calc(10px * var(--sb-tx, 1))}

/* ── Abajo a la derecha: los mandos ───────────────────────────────── */
body.apaisado.playing #editing,body.apaisado.playing #ready,
body.apaisado.playing #roadHUD .drive-row{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;padding:0;border:0;background:none}
body.apaisado.playing #editing[hidden],body.apaisado.playing #ready[hidden]{display:none}
body.apaisado.playing .move-controls{display:contents}
body.apaisado.playing .move-controls [data-move]{display:none}
body.apaisado.playing #editing .tools{display:contents}

/* Lo que hay que leer sin soltar el pulgar: qué bulto es, cuánto pesa y
   si cabe ahí. Un «no cabe» mudo no enseña nada, así que no se esconde.
   Vivió aquí abajo, pegado al borde y encima del propio camión, hasta
   el 10/09/2026: tapaba la vajilla que se estaba mirando. La colocación
   —arriba, bajo la cinta de bultos, con su ojo y su ✕— es ahora COMÚN
   y vive en `/juego/fisica/apaisado.css` (busca `.fAyuda`); aquí sólo
   queda decir qué elemento la lleva. */
body.apaisado.playing .item-line.fAyuda{display:flex;gap:8px;justify-content:center;
   align-items:center}
body.apaisado.playing .item-line.fAyuda strong{font-size:calc(11.5px * var(--sb-tx, 1))}

/* De la tira de tres datos, tumbado sólo pasa el equilibrio de la carga
   —que es de lo que va el juego— a la esquina de arriba a la derecha.
   Aquí el rótulo «EQUILIBRIO» sobra y se calla: el valor se explica solo
   («Bien repartida», «Hacia atrás», «Carga alta»). El aspecto es común y
   vive en `/juego/fisica/apaisado.css` (`.fDato`). */
body.apaisado.playing .telemetry{display:contents}
body.apaisado.playing .telemetry>div:not(.fDato){display:none}
body.apaisado.playing .telemetry>.fDato{top:calc(max(10px,env(safe-area-inset-top)) + 60px)}
body.apaisado.playing .telemetry>.fDato small{display:none}

/* ── Y en la carretera: la barra de avance arriba y los pedales ───── */
body.apaisado.playing #roadHUD{position:static;background:none;border:0;padding:0}
body.apaisado.playing #roadHUD .progress{position:fixed;z-index:41;
   left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));
   bottom:max(8px,env(safe-area-inset-bottom));height:5px;border-radius:3px;
   background:rgba(38,45,38,.28)}
body.apaisado.playing #roadHUD .drive-row>span{align-self:center;padding:7px 12px;
   border-radius:12px;background:rgba(38,45,38,.86);color:#F6F4EF;
   font-size:calc(13px * var(--sb-tx, 1));font-weight:800;line-height:1.2;text-align:center}
body.apaisado.playing #roadHUD .drive-row>span small{font-size:calc(9px * var(--sb-tx, 1));
   font-weight:700;opacity:.78}

/* Mientras se conduce, el taller de colocar se aparta entero: sus
   mandos y los pedales viven en la MISMA esquina, y de pie no se
   pisaban porque iban uno debajo del otro. */
body.apaisado.playing.driving #workshop{display:none}