/* ═══════════════════════════════════════════════════════════════════════
   TORRE EN EQUIPO · la hoja de la casa · 07/09/2026

   Hermana de `ingenio.20260907.css` y de `mudanza.20260906-3.css`, y por
   el mismo motivo: la hoja que vino con el juego era elegante pero
   hablaba otro idioma. Clavaba SU paleta encima de los tokens
   (`--paper`, `--surface`, `--ink` en `:root`, y `button{background:
   var(--surface)}` con un blanco literal), y eso en esta casa tiene tres
   consecuencias que no se ven en una demo:

     · de noche TODOS los botones quedaban blancos sobre una página
       oscura — no ilegibles, pero sí de otra aplicación;
     · el mando de tema de Mis llaves (`data-tema`) no existía para ella:
       el modo noche llegaba de rebote, por la especificidad del bloque
       `:root:not([data-tema="dia"])` de sabai-tokens.css;
     · rejilla de escritorio de 1280 con columna lateral de 330, en una
       casa donde todos los juegos son UNA COLUMNA DE 520 y el aparato de
       verdad es el móvil.

   La regla, la de siempre: LA CÁSCARA ES DE LA CASA (tokens, cabecera
   con sello, galletas, columna de 520) y LA PERSONALIDAD ES DEL JUEGO
   (los rótulos en versalitas, la tira de tres datos, el banco de
   trabajo, el lema en dos líneas).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Los tonos propios del juego, en los dos temas ────────────────────
   Un acento local con su pareja nocturna, NUNCA pisando un token de la
   casa. El banco es la piedra clara del taller; el oro marca lo elegido,
   igual que en los otros dos de la colección. Con las tres guardas (día,
   `prefers-color-scheme` y `data-tema`) para que el mando manual de Mis
   llaves también mande aquí. */
:root{
  --tor-banco:#E8E9DE; --tor-banco-linea:#CFD3C0; --tor-banco-tinta:#4A5850;
  --tor-oro:#8F6A14; --tor-oro-tenue:rgba(143,106,20,.14);
  --tor-alerta:#8C4A32;
}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="dia"]){
    --tor-banco:#242A26; --tor-banco-linea:#3B443C; --tor-banco-tinta:#B6C3B8;
    --tor-oro:#E0B45A; --tor-oro-tenue:rgba(224,180,90,.16);
    --tor-alerta:#E09A7C;
  }
}
:root[data-tema="noche"]{
  --tor-banco:#242A26; --tor-banco-linea:#3B443C; --tor-banco-tinta:#B6C3B8;
  --tor-oro:#E0B45A; --tor-oro-tenue:rgba(224,180,90,.16);
  --tor-alerta:#E09A7C;
}

/* ── 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}
/* «Torre en Equipo» son tres palabras, como «Cadena de Ingenio»: a 25 se
   acercaba al 60% del ancho de un iPhone. Con `balance`, si alguien sube
   el tamaño de letra el corte no deja una palabra suelta. */
header h1{margin:0;font-size:calc(23px * 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(--tor-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}
.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))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* ── 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}
p{line-height:1.55}

/* ── La entrada: el lema y la puerta de la jornada ──────────────────── */
.intro{margin:16px 0 14px;text-align:center}
.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 es una tarjeta de la casa y está SIEMPRE,
   también en un móvil: es donde se pacta y donde 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 banco de trabajo: la ventana al taller ──────────────────────── */
.stage-card{background:var(--tor-banco);border:1px solid var(--tor-banco-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(--tor-banco-tinta);font-size:calc(12px * var(--sb-tx, 1));font-weight:700}
.stage-top>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge{font-size:calc(8.5px * var(--sb-tx, 1));font-weight:800;letter-spacing:.09em;
   border:1px solid var(--tor-banco-linea);padding:5px 9px;border-radius:20px;white-space:nowrap;flex:none}
/* El plano es de 960 × 600. Con la proporción escrita aquí, el lienzo
   nunca sale con bandas: lo que mide la caja es lo que dibuja. */
.canvas-wrap{position:relative;margin-top:10px;aspect-ratio:8/5}
/* EL LIENZO NO SE QUEDA EL DEDO SI NO HAY NADA QUE ARRASTRAR. Con
   `touch-action:none` a secas, pasar el dedo por encima del tablero NO
   HACE SCROLL — y ocupa media pantalla de un iPhone, así que la página
   se quedaba pillada al intentar bajar a elegir quién juega. Sólo se lo
   queda mientras hay una pieza elegida, que es cuando arrastrar
   significa algo. */
canvas{width:100%;height:100%;display:block;touch-action:pan-y}
body.arrastrando canvas{touch-action:none}
/* EL RÓTULO DEL OBJETIVO NO VA ENCIMA DEL LIENZO, y es la lección de
   este juego. En Cadena de Ingenio cabía flotando abajo porque allí el
   tablero tiene aire; aquí el CIMIENTO está pegado al borde de abajo
   —tiene que estarlo: es el suelo de la torre— y el rótulo caía justo
   encima, tapándolo. Se vio a la primera en el iPhone simulado y en el
   escritorio no, porque allí la tarjeta es más alta.
   Puesto debajo del lienzo, además, deja de necesitar una tinta que no
   se dé la vuelta de noche: está sobre la tarjeta, así que usa la tinta
   de la tarjeta y ya está. Un problema menos, no un token más. */
.stage-caption{margin:0;padding:11px 16px 0;text-align:center;
   color:var(--tor-banco-tinta);font-size:calc(11.5px * var(--sb-tx, 1));font-weight:700}
.telemetry{display:grid;grid-template-columns:1.5fr 1fr 1fr;border-top:1px solid var(--tor-banco-linea);
   margin:0 16px;padding:13px 0 14px}
.telemetry>div{padding-left:14px;border-left:1px solid var(--tor-banco-linea);min-width:0}
.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:.12em;color:var(--tor-banco-tinta);opacity:.8;margin-bottom:5px}
.telemetry strong{display:block;font-size:calc(13.5px * var(--sb-tx, 1));font-weight:650;
   color:var(--tor-banco-tinta);line-height:1.25}
/* Las tres galletas del banco: pista, ejemplo y sonido. Van dentro de la
   tarjeta porque son del tablero, no del panel de abajo. */
.stage-tools{display:flex;gap:7px;flex-wrap:wrap;padding:0 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(--tor-banco-linea);color:var(--tor-banco-tinta)}
.chip[aria-pressed=true]{background:var(--tor-oro-tenue);border-color:var(--tor-oro);color:var(--tor-oro)}
.playbar{display:flex;gap:7px;align-items:center;padding:12px 16px 14px;
   border-top:1px solid var(--tor-banco-linea)}
.playbar span{margin-right:auto;font-size:calc(15px * var(--sb-tx, 1));font-weight:750;
   font-variant-numeric:tabular-nums;color:var(--tor-banco-tinta)}
.playbar button{min-height:40px;padding:9px 12px;font-size:calc(11.5px * var(--sb-tx, 1))}
.playbar [aria-pressed=true]{background:var(--tor-oro-tenue);border-color:var(--tor-oro);color:var(--tor-oro)}

/* ── 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}
.panel-title{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.tiny{font-size:calc(11px * var(--sb-tx, 1));color:var(--sb-tinta-suave);font-weight:650}
.missions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.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 .num{display:block;font-size:calc(11px * var(--sb-tx, 1));font-weight:800;
   letter-spacing:.1em;color:var(--tor-oro);margin-bottom:7px}
.mission b{font-size:calc(11.5px * var(--sb-tx, 1));line-height:1.3;display:block;font-weight:700}
.mission i{display:block;font-style:normal;font-size:calc(10px * var(--sb-tx, 1));font-weight:600;
   color:var(--sb-tinta-suave);margin-top:5px;line-height:1.3}
.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}
.description{font-size:calc(13px * var(--sb-tx, 1));line-height:1.55;color:var(--sb-tinta-suave);
   margin:0 0 16px;font-weight:550}
.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%;flex:none;
   background:var(--person,var(--sb-tinta-suave))}
.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(--tor-oro);background:var(--tor-oro-tenue)}
.inventory button.puesta{background:var(--sb-acento-tenue)}
.item-line{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-top:4px}
.item-line strong{font-size:calc(14px * var(--sb-tx, 1))}
.item-line button{min-height:38px;padding:8px 14px;font-size:calc(12px * var(--sb-tx, 1))}
.move-controls{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:10px}
.move-controls button{padding:6px;min-height:48px;font-size:calc(19px * var(--sb-tx, 1));border-radius:var(--sb-r)}
/* «Apoyar» es una ayuda de edición, no de física: por eso va con línea
   discontinua y no parece un mando más. */
#support{border-style:dashed;margin-top:10px}
.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)}
.question{background:var(--tor-banco);color:var(--tor-banco-tinta);padding:14px 16px;
   border-radius:var(--sb-r);font-weight:650;font-size:calc(13.5px * var(--sb-tx, 1));margin:0 0 4px}
.editor-foot{margin-top:12px;border-top:1px solid var(--sb-linea);padding-top:6px}

/* ── 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(--tor-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}
.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)}
.tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;justify-content:center}
.tools button{flex:1;min-width:0;font-size:calc(12.5px * var(--sb-tx, 1));padding:11px 8px}
.results p{background:var(--sb-fondo);border-radius:var(--sb-r);padding:11px 14px;margin:8px 0;
   font-size:calc(12.5px * var(--sb-tx, 1));font-weight:600}
.results strong{font-weight:800}
.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 ensayando: 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.testing .intro,body.testing .day,body.testing footer,body.testing .stage-tools{display:none}

@media (prefers-reduced-motion:reduce){
  button:active:not(:disabled){transform:none}
}
@media (max-width:380px){
  .inventory{gap:4px}
  .learning{gap:10px}
  .telemetry{grid-template-columns:1.4fr 1fr 1fr}
  .telemetry>div{padding-left:10px}
  .move-controls{gap:4px}
}
/* Móvil tumbado: el banco manda y lo demás se aparta. No es un modo
   aparte, sólo deja de robarle alto a la ventana. */
@media (max-height:500px) and (orientation:landscape){
  .intro,.learning,footer,.day{display:none}
  .caja{max-width:760px}
  .canvas-wrap{aspect-ratio:auto;height:min(58vh,320px)}
}

/* ═══════════════════════════════════════════════════════════════════════
   EL BANCO TUMBADO · 09/09/2026

   Lo pidió Javi tras jugar en el móvil: el tablero mide 960 × 600 y de
   pie vive dentro de una columna de 520, así que se queda en un tercio
   de la pantalla y los mandos son botones de texto apretados debajo.
   Tumbado cabe entero y los mandos se van a donde caen los pulgares.

   NO ES UNA PANTALLA APARTE. Es la misma, con los mismos botones y los
   mismos `onclick`: aquí no se mueve un solo nodo —eso deja un botón sin
   su manejador en cuanto el juego repinta el panel—, sólo se colocan. La
   palanca y la tarjeta de «gira el móvil» las pone `/juego/fisica/
   apaisado.js`, que es lo único que los tres juegos comparten.

   Se enciende con `body.apaisado.playing`: tumbado Y con la mesa
   abierta. Eligiendo el reto manda la pantalla de siempre, que es una
   lista y se lee mejor de pie.

   Igual que en Cadena de Ingenio, con una pieza más en la barra: aquí
   está también el botón de APOYAR, que en la torre se usa en cada
   turno. `#support` es hermano de `#editControls`, no hijo, así que se
   coloca aparte y se pone justo a la izquierda de la barra.
   ═══════════════════════════════════════════════════════════════════════ */
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 #turnLabel,
body.apaisado.playing #turnNote,body.apaisado.playing #editControls>p.micro:not(#position),
body.apaisado.playing #ready>p.micro,body.apaisado.playing #pieceName,
body.apaisado.playing .move-controls [data-move]{display:none}
body.apaisado.playing .caja{max-width:none;margin:0}
body.apaisado.playing header{margin:0;padding:0;height:0}

/* El lienzo se queda con la pantalla entera. */
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;aspect-ratio:auto;height:auto}
body.apaisado.playing #board{width:100%;height:100%;border-radius:0}

/* El panel deja de ser una tarjeta y pasa a ser una capa: cada mando
   flota donde toca y en medio no hay nada que tape el tablero. */
body.apaisado.playing .panel{background:none;border:0;box-shadow:none;padding:0;margin:0}
body.apaisado.playing #editControls,body.apaisado.playing #ready{display:block}
body.apaisado.playing #editControls[hidden],body.apaisado.playing #ready[hidden]{display:none}

/* ── Arriba: volver, de quién es el turno, las ayudas ─────────────── */
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}
body.apaisado.playing .stage-tools{position:fixed;z-index:42;padding:0;
   right:max(12px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));
   display:flex;gap:7px;flex-wrap:nowrap}
body.apaisado.playing .stage-tools .chip{min-height:0;width:44px;height:44px;padding:0;
   border-radius:14px;font-size:0;display:grid;place-items:center;
   background:rgba(38,45,38,.86);color:#F6F4EF;border:1px solid rgba(246,244,239,.34)}
body.apaisado.playing .stage-tools .chip::before{content:attr(data-ico);font-size:19px}
body.apaisado.playing #demoBtn{display:none}
/* La telemetría deja de ser una tira y se convierte en nada: sólo pasa
   el dato que se mira para decidir —cuántos ensayos quedan—, que vuela
   a la esquina de arriba a la derecha, bajo los iconos. 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)}
/* Cerrar la mesa y salir se van DEBAJO DE LA FLECHA, en columna: a la
   derecha se ponían al lado de la cinta de piezas y, en cuanto el reto
   trae ocho, se tocaban. Medido, no mirado. */
body.apaisado.playing .editor-foot{position:fixed;z-index:41;
   left:max(12px,env(safe-area-inset-left));top:calc(max(10px,env(safe-area-inset-top)) + 50px);
   display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:92px}
body.apaisado.playing .editor-foot button{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)}

/* ── La caja de piezas, 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(60vw,420px);overflow-x:auto;background:rgba(38,45,38,.7)}
body.apaisado.playing #inventory button{min-height:0;width:46px;height:46px;padding:3px 2px;
   font-size:calc(17px * var(--sb-tx, 1));flex:none;border-radius:11px;
   background:rgba(246,244,239,.9);color:#22301f}
body.apaisado.playing #inventory small{font-size:calc(7.5px * var(--sb-tx, 1))}
body.apaisado.playing #inventory button[aria-pressed=true]{border:2px solid var(--tor-oro)}

/* ── Abajo a la derecha: los mandos de la mano que no lleva palanca ── */
body.apaisado.playing #editControls,body.apaisado.playing #ready,
body.apaisado.playing #playbar{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 .item-line{display:contents}
/* Apoyar es hijo de #editControls en la torre, así que entra solo en la
   barra; sólo hay que quitarle el ancho completo que lleva de pie. */
body.apaisado.playing #support{margin:0}
body.apaisado.playing .move-controls{display:contents}
body.apaisado.playing #playbar #clock{margin:0;align-self:center;padding:7px 12px;
   border-radius:12px;background:rgba(38,45,38,.86);color:#F6F4EF;
   font-size:calc(14px * var(--sb-tx, 1))}

/* El renglón que dice por qué no cabe una pieza (o qué se pregunta antes
   de soltar): no puede irse a ninguna parte, así que no se esconde. Vivió
   aquí abajo, encima de la barra de mandos y del propio banco, hasta el
   10/09/2026 — se comía el cimiento. La colocación —arriba, bajo la
   cinta de piezas, con su ojo y su ✕— es ahora COMÚN, en
   `/juego/fisica/apaisado.css` (`.fAyuda`); `#position` y `#question`
   ya llevan esa clase en el HTML. */

/* Mientras corre la prueba, el panel de colocar se aparta entero: sus
   mandos y los de la prueba viven en la MISMA esquina, y de pie no se
   pisaban porque iban uno debajo del otro. Medido a 740 × 360. */
body.apaisado.playing.testing #editor{display:none}