/* ═══════════════════════════════════════════════════════════════════════
   CADENA DE INGENIO · la hoja de la casa · 07/09/2026

   Hermana de `mudanza.20260907.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 sólo 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 misma que en la mudanza: 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 tablero de taller, 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 taller es la madera clara del banco de trabajo; el oro marca
   lo elegido, igual que la correa en la mudanza. Con las tres guardas
   (día, `prefers-color-scheme`, `data-tema`) para que el mando manual de
   Mis llaves también mande aquí. */
:root{
  --ing-taller:#E9EADF; --ing-taller-linea:#CFD3C0; --ing-taller-tinta:#48584A;
  --ing-oro:#8F6A14; --ing-oro-tenue:rgba(143,106,20,.14);
}
/* AQUÍ VIVÍAN «--ing-tablero-tinta» Y «--ing-tablero-vidrio», y se han
   ido enteros el 07/09/2026: existían sólo para que el rótulo del
   objetivo, que flotaba ENCIMA del lienzo, no se diera la vuelta de
   noche. El rótulo se ha bajado a la tarjeta (ver `.stage-caption` más
   abajo), así que ya usa la tinta de la tarjeta y esos dos tonos no los
   necesitaba nadie. Es la lección de La Torre dicha entera: si algo de
   la interfaz estorba encima del lienzo, se baja — un problema menos,
   no un token más. Lo que de verdad tenga que ir encima del lienzo, que
   lo pinte el lienzo, con su color escrito en el JS (que es lo que hace
   tablero.js con la ficha de piezas). */
@media (prefers-color-scheme:dark){
  :root:not([data-tema="dia"]){
    --ing-taller:#242A24; --ing-taller-linea:#3B443A; --ing-taller-tinta:#B4C3AF;
    --ing-oro:#E0B45A; --ing-oro-tenue:rgba(224,180,90,.16);
  }
}
:root[data-tema="noche"]{
  --ing-taller:#242A24; --ing-taller-linea:#3B443A; --ing-taller-tinta:#B4C3AF;
  --ing-oro:#E0B45A; --ing-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}
/* 23 y no 25: «Cadena de Ingenio» es de los nombres largos de la casa
   (tres palabras) y a 25 se acercaba al 60% del ancho en un iPhone, que
   es donde La Gran Mudanza se leía como un bloque. 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(--ing-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}
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}
.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 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 tablero: la ventana al taller ───────────────────────────────── */
.stage-card{background:var(--ing-taller);border:1px solid var(--ing-taller-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(--ing-taller-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(--ing-taller-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 el tablero ocupa media pantalla de un iPhone, así que
   la pantalla se quedaba pillada al intentar bajar a elegir quién juega.
   Visto en el iPhone simulado el 07/09/2026. 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 cae ENCIMA del lienzo, que es de día siempre:
   por eso su tinta es la que no se da la vuelta (ver arriba). */
/* EL RÓTULO DEL OBJETIVO VA DEBAJO DEL LIENZO, NO FLOTANDO ENCIMA. Iba
   pegado al borde de abajo y ahí es donde el tablero escribe LLEGADA y
   HAZLA SONAR, justo bajo la cesta y la campana: en un iPhone se
   tapaban. Y además el lienzo es de DÍA SIEMPRE, así que un rótulo de
   la tarjeta encima se daba la vuelta de noche. Debajo desaparecen las
   dos averías de golpe. */
.stage-caption{margin:0;padding:11px 16px 0;text-align:center;
   color:var(--ing-taller-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(--ing-taller-linea);
   margin:0 16px;padding:13px 0 14px}
.telemetry>div{padding-left:14px;border-left:1px solid var(--ing-taller-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(--ing-taller-tinta);opacity:.8;margin-bottom:5px}
.telemetry strong{display:block;font-size:calc(13.5px * var(--sb-tx, 1));font-weight:650;
   color:var(--ing-taller-tinta);line-height:1.25}
/* Las tres galletas del tablero: pista, ejemplo y sonido. Van dentro de
   la tarjeta porque son del tablero, no del panel de la derecha. */
.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(--ing-taller-linea);color:var(--ing-taller-tinta)}
.chip[aria-pressed=true]{background:var(--ing-oro-tenue);border-color:var(--ing-oro);color:var(--ing-oro)}
.playbar{display:flex;gap:7px;align-items:center;padding:12px 16px 14px;
   border-top:1px solid var(--ing-taller-linea)}
.playbar span{margin-right:auto;font-size:calc(15px * var(--sb-tx, 1));font-weight:750;
   font-variant-numeric:tabular-nums;color:var(--ing-taller-tinta)}
.playbar button{min-height:40px;padding:9px 12px;font-size:calc(11.5px * var(--sb-tx, 1))}
.playbar [aria-pressed=true]{background:var(--ing-oro-tenue);border-color:var(--ing-oro);color:var(--ing-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 12px}
.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(--ing-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}
/* El objetivo del reto, dicho entero (09/09/2026). No es adorno: la
   familia montó la cadena entera sin saber que la canica NO hace sonar
   la campana, y el juego no se lo dijo en ninguna parte. Va en la ficha
   del reto, antes de empezar, y con la trampa debajo en letra pequeña
   —lo que NO cuenta es tan parte del reto como lo que sí—. */
.description .objetivo{display:block;margin-top:9px;padding:8px 11px;border-radius:11px;
   background:var(--ing-oro-tenue);color:var(--ing-oro);font-weight:800;font-size:calc(12.5px * var(--sb-tx, 1))}
.description .trampa{display:block;margin-top:6px;font-style:normal;font-weight:600;
   font-size:calc(11.5px * var(--sb-tx, 1));line-height:1.5;opacity:.85}
.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(--ing-oro);background:var(--ing-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)}
.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(--ing-taller);color:var(--ing-taller-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(--ing-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 probando: 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 tablero 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 TALLER 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.
   ═══════════════════════════════════════════════════════════════════════ */
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ántas pruebas 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(--ing-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}
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 tablero, hasta
   el 10/09/2026. 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}