/* ==========================================================
   VUELVA USTED MAÑANA — La sala («lámina»)
   Pared, suelo, zócalo, luz, fluorescente, decorado, carteles,
   etiquetas y objetos tocables (hotspots). Solo el aspecto de la sala:
   su tamaño en cada pantalla lo decide ui-play.css.
   Todo vive en @layer scene; las animaciones llevan el prefijo scene-.
   Unidades cqw = ancho de la sala (.scene es contenedor inline-size).
   ========================================================== */

@layer scene {

  /* ---------------- Lámina ---------------- */
  /* Marco: un filete oscuro y --e2 separan las paredes claras (#ddd6c1 es 1,29:1 sobre el lienzo).
     Va en .scene-wrap, la ventana que recorta la sala: en horizontal y escritorio la caja
     (#sceneBox) es más grande que la lámina. */
  .scene-wrap {
    border-radius: var(--r-lg);
    background: var(--ink);
    box-shadow: 0 0 0 1px rgba(26, 24, 20, .35), var(--e2);
  }
  .scene {
    --wall: #ddd;
    --floor: #888;
    --floorH: 32%;
    container-type: inline-size;
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--wall);
    color: var(--ink);
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    /* Los colores de la sala son parte del dibujo: el modo de alto contraste no los toca */
    forced-color-adjust: none;
  }
  .scene.using .hs { cursor: crosshair; }

  /* Luz cenital: por encima del decorado, por debajo de los objetos (z 2). Sin viñeta. */
  .scene::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(110% 80% at 50% 0, rgba(255, 248, 225, .10), transparent 55%);
  }

  /* Pared: zócalo + luz + listones + color de la temporada */
  .scene .wall {
    position: absolute;
    inset: 0 0 var(--floorH) 0;
    background:
      linear-gradient(to top, color-mix(in srgb, var(--wall) 82%, #000) 0 3cqw, transparent 3cqw),
      linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(0, 0, 0, .08)),
      repeating-linear-gradient(90deg, transparent 0 7cqw, rgba(0, 0, 0, .025) 7cqw 7.2cqw),
      var(--wall);
  }
  /* Franja de techo */
  .scene .wall::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 5%;
    background: linear-gradient(rgba(0, 0, 0, .16), transparent);
  }
  /* Fluorescente de oficina: un único parpadeo al entrar (≤ 3 destellos por segundo, poco contraste) */
  .scene.tube .wall::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 3%;
    width: 18cqw;
    height: .7cqw;
    translate: -50% 0;
    border-radius: .35cqw;
    background: #fffbe8;
    box-shadow: 0 0 3cqw 1cqw rgba(255, 250, 220, .45), 0 .15cqw 0 rgba(0, 0, 0, .12);
    animation: scene-tube 600ms linear 1 both;
  }
  @keyframes scene-tube {
    0% { opacity: 1; }
    20% { opacity: .82; }
    40% { opacity: 1; }
    70% { opacity: .9; }
    100% { opacity: 1; }
  }

  /* Rodapié */
  .scene .baseboard {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--floorH);
    height: 1.1cqw;
    background: linear-gradient(rgba(255, 255, 255, .18) 0 18%, rgba(0, 0, 0, .4) 18%);
  }

  /* Suelo: el patrón de la temporada con sombra de horizonte (sin rotateX ni z-index) */
  .scene .floor {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--floorH);
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 42%, rgba(255, 255, 255, .04)),
      var(--floor);
  }
  .floor-tiles .floor {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .32), rgba(0, 0, 0, 0) 45%, rgba(255, 255, 255, .05)),
      repeating-linear-gradient(90deg, transparent 0 6cqw, rgba(0, 0, 0, .14) 6cqw 6.2cqw),
      repeating-linear-gradient(0deg, transparent 0 3.5cqw, rgba(0, 0, 0, .14) 3.5cqw 3.7cqw),
      var(--floor);
  }
  .floor-wood .floor {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .32), rgba(0, 0, 0, 0) 45%, rgba(255, 255, 255, .04)),
      repeating-linear-gradient(0deg, transparent 0 2.6cqw, rgba(0, 0, 0, .18) 2.6cqw 2.75cqw),
      repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 11cqw, rgba(0, 0, 0, .04) 11cqw 22cqw),
      var(--floor);
  }
  .floor-carpet .floor {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .36), rgba(0, 0, 0, 0) 45%, rgba(255, 255, 255, .03)),
      radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .06) 0 .3cqw, transparent .35cqw) 0 0 / 1.4cqw 1.4cqw,
      var(--floor);
  }

  /* ---------------- Decorado (no se toca: pointer-events none) ---------------- */
  .deco {
    position: absolute;
    z-index: 0;              /* contexto propio: las sombras ::before/::after (z -1) quedan sobre el suelo */
    pointer-events: none;
  }
  /* Emoji de decorado: algo desaturados para que los objetos tocables manden */
  .deco-emoji {
    translate: -50% -50%;
    line-height: 1;
    font-family: var(--emoji);
    white-space: nowrap;
    filter: saturate(.8) brightness(.97) drop-shadow(0 .2cqw .2cqw rgba(0, 0, 0, .2));
  }

  /* Mostrador: tablero, canto, frente con dos paneles y sombra de contacto */
  .deco-counter {
    border-radius: .5cqw .5cqw .25cqw .25cqw;
    background: linear-gradient(180deg, #a07c56 0 13%, #5a4330 13% 15%, #7a5b3e 15% 90%, #3a2a1c 90%);
    box-shadow: 0 .4cqw .8cqw rgba(0, 0, 0, .28);
  }
  .deco-counter::before {
    content: '';
    position: absolute;
    inset: 24% 4% 16%;
    border-radius: .3cqw;
    background: linear-gradient(90deg, transparent calc(50% - .18cqw), rgba(0, 0, 0, .28) calc(50% - .18cqw) calc(50% + .18cqw), transparent calc(50% + .18cqw));
    box-shadow: inset 0 0 0 .2cqw rgba(0, 0, 0, .16), inset 0 .25cqw 0 rgba(255, 255, 255, .07);
  }
  .deco-counter::after {
    content: '';
    position: absolute;
    left: -2%;
    right: -2%;
    bottom: -1cqw;
    height: 1.8cqw;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(0, 0, 0, .36), transparent);
  }

  /* Estantería: canto con brillo y sombra proyectada */
  .deco-shelf {
    border-radius: .3cqw;
    background: linear-gradient(180deg, #8a6a4a 0 22%, #6d5238 22% 80%, #4d3926 80%);
    box-shadow: 0 .8cqw 1cqw -.3cqw rgba(0, 0, 0, .45);
  }

  /* Ventana: alféizar de 1,2cqw y reflejo */
  .deco-window {
    background:
      linear-gradient(115deg, transparent 0 22%, rgba(255, 255, 255, .45) 22% 30%, transparent 30% 36%, rgba(255, 255, 255, .25) 36% 39%, transparent 39%),
      linear-gradient(180deg, #9fd3f5, #d8eefc);
    border: .7cqw solid #f4f1ea;
    border-bottom-width: 0;
    box-shadow: inset 0 0 0 .25cqw rgba(0, 0, 0, .15), 0 .4cqw .8cqw rgba(0, 0, 0, .22), 0 1.2cqw 0 -.1cqw #e6e0d2, 0 1.6cqw .6cqw -.2cqw rgba(0, 0, 0, .25);
  }
  .deco-window::before, .deco-window::after { content: ''; position: absolute; background: #f4f1ea; }
  .deco-window::before { left: 50%; top: 0; bottom: 0; width: .5cqw; translate: -50% 0; }
  .deco-window::after { top: 50%; left: 0; right: 0; height: .5cqw; translate: 0 -50%; }

  /* Bandera de España: pliegues, mástil con remate dorado y peana */
  .deco-flag {
    border-radius: .2cqw;
    background:
      linear-gradient(90deg, rgba(0, 0, 0, .14), rgba(255, 255, 255, .14) 28%, rgba(0, 0, 0, .1) 55%, rgba(255, 255, 255, .1) 80%, rgba(0, 0, 0, .12)),
      linear-gradient(180deg, #c2161f 0 25%, #f1bf00 25% 75%, #c2161f 75%);
    box-shadow: 0 .3cqw .6cqw rgba(0, 0, 0, .3);
  }
  /* Mástil de pared: soporte atornillado abajo, remate dorado arriba */
  .deco-flag::before {
    content: '';
    position: absolute;
    left: -1.05cqw;
    top: -1cqw;
    width: 1.2cqw;
    height: calc(100% + 5.5cqw);
    z-index: -1;
    background:
      linear-gradient(90deg, #5a4630, #9a7a52 45%, #5a4630) center top / .35cqw calc(100% - .5cqw) no-repeat,
      linear-gradient(180deg, #6f6a60, #3d3a35) center bottom / 1.2cqw .5cqw no-repeat;
    border-radius: .2cqw;
  }
  .deco-flag::after {
    content: '';
    position: absolute;
    left: -.45cqw;
    top: -1.55cqw;
    width: .7cqw;
    height: .7cqw;
    translate: -50% 0;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #f3dd84, var(--gold) 55%, #8a6d17);
    box-shadow: 0 .1cqw .2cqw rgba(0, 0, 0, .35);
  }

  /* Bandera de la UE: 12 estrellas en círculo (SVG en línea) */
  .deco-flag-eu {
    border-radius: .2cqw;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cg fill='%23FFD84D'%3E%3Cpath id='s' d='M30 7.2l.67 2.06h2.17l-1.75 1.27.67 2.06L30 11.32l-1.76 1.27.67-2.06-1.75-1.27h2.17z'/%3E%3Cuse href='%23s' transform='rotate(30 30 20)'/%3E%3Cuse href='%23s' transform='rotate(60 30 20)'/%3E%3Cuse href='%23s' transform='rotate(90 30 20)'/%3E%3Cuse href='%23s' transform='rotate(120 30 20)'/%3E%3Cuse href='%23s' transform='rotate(150 30 20)'/%3E%3Cuse href='%23s' transform='rotate(180 30 20)'/%3E%3Cuse href='%23s' transform='rotate(210 30 20)'/%3E%3Cuse href='%23s' transform='rotate(240 30 20)'/%3E%3Cuse href='%23s' transform='rotate(270 30 20)'/%3E%3Cuse href='%23s' transform='rotate(300 30 20)'/%3E%3Cuse href='%23s' transform='rotate(330 30 20)'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat,
      linear-gradient(90deg, rgba(0, 0, 0, .12), rgba(255, 255, 255, .1) 30%, rgba(0, 0, 0, .08) 60%, rgba(255, 255, 255, .08) 85%, rgba(0, 0, 0, .1)),
      var(--eu-blue);
    box-shadow: 0 .3cqw .6cqw rgba(0, 0, 0, .3);
  }

  /* Hemiciclo: filas de escaños alternas, pasillos y remate dorado */
  .deco-arc {
    left: 2%;
    right: 2%;
    top: 38%;
    height: 110%;
    border-radius: 50% 50% 0 0 / 40% 40% 0 0;
    background:
      repeating-conic-gradient(from -90deg at 50% 100%, transparent 0 14deg, rgba(0, 0, 0, .28) 14deg 15.2deg),
      repeating-radial-gradient(ellipse at 50% 100%, #3f6b3f 0 2.2cqw, #2f552f 2.2cqw 2.5cqw, #4a7a48 2.5cqw 4.4cqw, #2f552f 4.4cqw 4.8cqw);
    box-shadow: inset 0 0 0 .35cqw rgba(201, 162, 39, .85), inset 0 1.2cqw 2cqw rgba(0, 0, 0, .35);
  }

  /* Resto de primitivas (sin cambios de forma) */
  .deco-board { background: #a87b4f; border: .6cqw solid #6d4c2f; border-radius: .4cqw; box-shadow: 0 .4cqw .8cqw rgba(0, 0, 0, .3), inset 0 0 0 .15cqw rgba(0, 0, 0, .12); }
  .deco-screen { background: linear-gradient(160deg, #24313f, #0f161d); border: .5cqw solid #333; border-radius: .6cqw; box-shadow: 0 .4cqw .8cqw rgba(0, 0, 0, .35); }
  .deco-rug { background: var(--c, #8c2f2f); border-radius: 50%; box-shadow: inset 0 0 0 .5cqw rgba(255, 255, 255, .15); filter: saturate(.85); }
  .deco-column { background: linear-gradient(90deg, #cfcabf, #f4f1ea 40%, #bdb7aa); border-radius: .3cqw; box-shadow: 0 .3cqw .6cqw rgba(0, 0, 0, .25); }
  .deco-box { background: var(--c, #6d5238); border-radius: .4cqw; box-shadow: 0 .4cqw .8cqw rgba(0, 0, 0, .3), inset 0 .3cqw 0 rgba(255, 255, 255, .08); }

  /* Sombra de contacto de lo que está en el suelo (objetos y decorado).
     --shw / --shx: ancho visible (em) y centro de la imagen, medidos por tools/emoji-build.js */
  .hs.on-floor::before, .deco-emoji.on-floor::before {
    content: '';
    position: absolute;
    left: var(--shx, 50%);
    bottom: calc(var(--shw, .8) * -.1em);
    width: calc(var(--shw, .8) * 1.15em);
    height: calc(var(--shw, .8) * .2em);
    translate: -50% 0;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(0, 0, 0, .38), transparent);
    pointer-events: none;
  }

  /* ---------------- Objetos tocables ---------------- */
  .hs {
    position: absolute;
    z-index: 2;
    translate: -50% -50%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: .8cqw;
    background: none;
    color: inherit;
    font-family: var(--ui);
    line-height: 1;
    cursor: pointer;
    filter: drop-shadow(0 .45cqw .3cqw rgba(0, 0, 0, .35));
    transition: scale var(--d-fast) var(--ease-out), filter var(--d-fast) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
  }
  .hs.on-floor { filter: drop-shadow(0 .12cqw .2cqw rgba(0, 0, 0, .25)); }
  .hs-emoji { display: block; font-family: var(--emoji); white-space: nowrap; }
  .hs:active { scale: .94; }

  /* Silueta troquelada (pantallas táctiles con potencia de sobra): 3 sombras como máximo, estática */
  .scene.halo .hs:not(.sign) {
    filter: drop-shadow(0 0 max(1px, .12cqw) rgba(255, 255, 255, .95)) drop-shadow(0 0 max(1px, .1cqw) rgba(26, 24, 20, .55)) drop-shadow(0 .45cqw .3cqw rgba(0, 0, 0, .35));
  }
  .scene.halo .hs.on-floor:not(.sign) {
    filter: drop-shadow(0 0 max(1px, .12cqw) rgba(255, 255, 255, .95)) drop-shadow(0 0 max(1px, .1cqw) rgba(26, 24, 20, .55)) drop-shadow(0 .12cqw .2cqw rgba(0, 0, 0, .25));
  }

  /* Ratón: zona útil de al menos 24 px (los del suelo la amplían con relleno del emoji) */
  @media (pointer: fine) {
    .hs:not(.on-floor)::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      width: max(100%, 24px);
      height: max(100%, 24px);
      translate: -50% -50%;
    }
    .hs.on-floor .hs-emoji { padding: max(0px, calc((24px - 1em) / 2)); }
  }

  /* Encima o enfocado: crece un poco y brilla en cálido */
  @media (hover: hover) {
    .hs:hover {
      z-index: 5;
      scale: 1.08;
      filter: drop-shadow(0 0 .7cqw rgba(255, 238, 150, .95)) drop-shadow(0 .45cqw .3cqw rgba(0, 0, 0, .35));
    }
    .hs.sign:hover { filter: drop-shadow(0 0 .6cqw rgba(255, 238, 150, .9)); }
  }
  /* Anillo de foco: tinta discontinua sobre halo blanco → ≥ 3:1 sobre cualquier pared */
  .hs:focus-visible {
    z-index: 6;
    scale: 1.08;
    outline: max(3px, .3cqw) dashed var(--ink);
    outline-offset: max(4px, .45cqw);
    box-shadow: 0 0 0 max(7px, .7cqw) rgba(255, 255, 255, .92);
    filter: drop-shadow(0 0 .7cqw rgba(255, 238, 150, .95));
  }
  .hs.sign:focus-visible { box-shadow: 0 0 0 max(7px, .7cqw) rgba(255, 255, 255, .92), var(--e1); filter: none; }

  /* Etiqueta: al pasar el ratón, con foco de teclado (en todo dispositivo), .show-label y la Lupa */
  .hs::after {
    content: attr(data-label);
    position: absolute;
    left: 50%;
    top: 100%;
    z-index: 10;
    /* --tag-shift (ui-fx.js, con la Lupa): mete la píldora en la ventana visible de la sala */
    translate: calc(-50% + var(--tag-shift, 0px)) max(4px, .4cqw);
    padding: .38em .7em;
    border-radius: var(--r-xs);
    background: rgba(20, 18, 16, .92);
    color: #fff;
    font: 600 max(12px, 1.15cqw)/1.2 var(--ui);
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--d-fast) var(--ease-out);
  }
  .hs:focus-visible::after, .hs.show-label::after { opacity: 1; }
  /* Con foco, la etiqueta baja por debajo del anillo (desplazamiento + grosor) para no taparlo */
  .hs:focus-visible::after { translate: calc(-50% + var(--tag-shift, 0px)) calc(max(4px, .45cqw) + max(3px, .3cqw) + 3px); }
  @media (hover: hover) {
    .hs:hover::after { opacity: 1; }
  }
  @media (hover: none) {
    .hs:not(:focus-visible):not(.show-label)::after { display: none; }
  }

  /* Lupa: todo lo tocable se señala durante 2,5 s; lo no visto lleva un punto amarillo */
  .scene.reveal .hs::after { display: block; opacity: 1; }
  /* Con todas las etiquetas a la vez (salas densas: hemiciclo), cada una se estrecha para pisar
     menos a las vecinas y parte en dos líneas equilibradas (sin perder la pista: «Reloj de pared
     (14:35)»); la del objeto con foco o bajo el ratón se lee entera en una línea */
  .scene.reveal .hs:not(:focus-visible):not(:hover)::after {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    width: max-content;
    max-width: min(max(42cqw, 132px), var(--tag-max, 100cqw));
    overflow: hidden;
    white-space: normal;
    text-wrap: balance;
    text-align: center;
  }
  .scene.reveal .hs:not(.sign) { filter: drop-shadow(0 0 .8cqw var(--marker)) drop-shadow(0 0 .25cqw var(--marker)); }
  .scene.reveal .hs.sign { box-shadow: 0 0 0 max(3px, .35cqw) var(--marker), var(--e1); }
  .scene.reveal .hs.unseen > :first-child::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: max(10px, 1cqw);
    height: max(10px, 1cqw);
    translate: 35% -35%;
    border-radius: 50%;
    background: var(--marker);
    box-shadow: 0 0 0 2px var(--ink);
    pointer-events: none;
  }

  /* ---------------- Carteles (placas de señalética) ---------------- */
  .hs.sign {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: max(2px, .3cqw);
    width: max-content;
    min-width: var(--sw, 12cqw);
    max-width: max(26cqw, 150px);
    padding: max(4px, .55cqw) max(6px, .7cqw);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-xs);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--e1), 0 .45cqw .8cqw rgba(0, 0, 0, .22);
    text-align: center;
    filter: none;
  }
  .hs.sign b {
    display: block;
    font: 700 max(11px, 1.35cqw)/1.15 var(--ui);
    letter-spacing: .04em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
  }
  .hs.sign span {
    display: block;
    color: var(--ink-2);
    font: 500 max(10.5px, 1.15cqw)/1.2 var(--ui);
    overflow-wrap: anywhere;
  }
  .hs.sign span.sub-emoji {
    color: inherit;
    font-family: var(--emoji);
    font-size: max(22px, 3.6cqw);
    line-height: 1;
  }

  /* Salas estrechas (móvil, HUD en horizontal): las placas no pasan mucho de su ancho de diseño
     (--sw) y parten la línea, para no montarse sobre la vecina ni salirse por el borde */
  @container (max-width: 800px) {
    .hs.sign {
      max-width: max(calc(var(--sw, 12cqw) + 4cqw), 84px);
      padding-inline: max(4px, .6cqw);
    }
    .hs.sign b { letter-spacing: .02em; overflow-wrap: break-word; text-wrap: balance; }
    .hs.sign span { overflow-wrap: break-word; }
  }
  @container (max-width: 520px) {
    /* El suelo del título es 11 px (§1): aquí solo se aprieta el espaciado */
    .hs.sign b { letter-spacing: .01em; }
  }

  /* Etiqueta pegada a un objeto (p. ej. «DNI», «CERRADO») */
  .hs-tag {
    display: block;
    width: max-content;
    margin: .3cqw auto 0;
    padding: .2em .45em;
    border-radius: var(--r-xs);
    background: rgba(20, 18, 16, .8);
    color: #fff;
    font: 800 max(10px, 1.1cqw)/1.1 var(--ui);
    letter-spacing: .05em;
    white-space: nowrap;
  }

  /* ---------------- Estados de la sala ---------------- */
  /* Con un objeto en la mano: la sala lleva un marco de rotulador por dentro (estático). Es un
     contorno con desplazamiento negativo: se pinta encima de la lámina y no se mueve al deslizarla. */
  #sceneBox.using .scene-wrap {
    outline: 3px solid var(--marker);
    outline-offset: -3px;
    box-shadow: 0 0 0 1px rgba(26, 24, 20, .35), 0 0 0 3px var(--marker), 0 0 0 4px rgba(26, 24, 20, .3), var(--e2);
  }
  /* Trámite completado: la sala se apaga y deja de recibir toques */
  #sceneBox.won .scene { filter: saturate(.4) brightness(.92); transition: filter .4s var(--ease-std); }
  #sceneBox.won .hs { pointer-events: none; }

  /* ---------------- Colores forzados ---------------- */
  @media (forced-colors: active) {
    /* Los objetos son botones, pero forman parte del dibujo: conservan sus colores */
    .scene .hs { forced-color-adjust: none; }
    .hs:focus-visible, .hs:hover { outline: 2px solid Highlight; outline-offset: 2px; box-shadow: none; }
    .hs.sign { border-color: CanvasText; }
    .hs::after { forced-color-adjust: none; }
    #sceneBox.using .scene-wrap { outline: 3px solid Highlight; }
    /* El navegador pasa los emoji a su versión de texto (monocroma, casi negra sobre las paredes) en todo
       lo que no lleve forced-color-adjust: none. La sala es un dibujo, así que sus emoji siguen en color;
       el emoji de cada casilla de la bandeja (solo emoji, aria-hidden) también */
    .slot-emoji { forced-color-adjust: none; }
    .scene, .scene *, .slot-emoji { font-variant-emoji: emoji; }
  }
}

/* ==========================================================
   Profundidad y objetos como imagen (realismo y proporciones)
   - El motor pone --z: pared 10–19; suelo 100–240 según dónde apoya (más abajo = más delante);
     «on: mueble» = delante del mueble; «behind: mueble» = detrás (p. ej. funcionario tras el mostrador).
   - .scene aísla su apilamiento: nada de la sala se cuela por encima de la barra o el sello.
   ========================================================== */
@layer scene {
  .scene { isolation: isolate; }
  .deco { z-index: var(--z, 0); }
  .hs { z-index: var(--z, 2); }
  @media (hover: hover) { .hs:hover { z-index: 400; } }
  .hs:focus-visible { z-index: 410; }

  /* Las imágenes apoyan en la base de su caja (sin hueco de línea de texto) */
  .hs-emoji { display: flex; align-items: flex-end; line-height: 0; }
  .deco-emoji { display: inline-flex; align-items: flex-end; line-height: 0; }
  .hs .emo, .deco-emoji .emo { vertical-align: top; }

  /* Encima de un mueble: sombra de contacto corta sobre el tablero */
  .hs.on-surface::before, .deco-emoji.on-surface::before {
    content: '';
    position: absolute;
    left: var(--shx, 50%);
    bottom: calc(var(--shw, .7) * -.06em);
    width: calc(var(--shw, .7) * 1.08em);
    height: calc(var(--shw, .7) * .12em);
    translate: -50% 0;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(0, 0, 0, .34), transparent);
    pointer-events: none;
  }
  .hs.on-surface { filter: drop-shadow(0 .1cqw .15cqw rgba(0, 0, 0, .25)); }
}

/* Muebles extra para apoyar objetos con realismo (decor { kind, l, t, w, h, id }) */
@layer scene {
  /* Mesa: tablero fino y dos patas */
  .deco-table {
    background:
      linear-gradient(180deg, #a07c56 0 9%, #5a4330 9% 12%, transparent 12%),
      linear-gradient(90deg, transparent 4%, #6d5238 4% 8%, transparent 8% 92%, #6d5238 92% 96%, transparent 96%);
    filter: drop-shadow(0 .5cqw .4cqw rgba(0, 0, 0, .25));
  }
  /* Escritorio: tablero, cajonera a la derecha y faldón */
  .deco-desk {
    background:
      linear-gradient(180deg, #8f7a62 0 8%, #4f4234 8% 10%, transparent 10%),
      linear-gradient(90deg, transparent 0 66%, #6f5c47 66% 97%, transparent 97%),
      linear-gradient(180deg, transparent 10%, #5f4e3c 10% 40%, transparent 40%),
      linear-gradient(90deg, #5a4a39 0 3%, transparent 3%);
    filter: drop-shadow(0 .5cqw .4cqw rgba(0, 0, 0, .25));
  }
  .deco-desk::after {
    content: ''; position: absolute; right: 6%; width: 28%; top: 30%; height: 50%;
    background: repeating-linear-gradient(180deg, transparent 0 31%, rgba(0, 0, 0, .25) 31% 34%);
  }
  /* Armario/archivador alto con dos puertas */
  .deco-cabinet {
    border-radius: .3cqw;
    background: linear-gradient(90deg, transparent calc(50% - .12cqw), rgba(0, 0, 0, .3) calc(50% - .12cqw) calc(50% + .12cqw), transparent calc(50% + .12cqw)), var(--c, #8a8f96);
    box-shadow: inset 0 0 0 .25cqw rgba(0, 0, 0, .18), 0 .5cqw .9cqw rgba(0, 0, 0, .3);
  }
  /* Banco/sillas de espera en fila */
  .deco-bench {
    background:
      linear-gradient(180deg, var(--c, #4b5d73) 0 22%, transparent 22% 40%, var(--c, #4b5d73) 40% 55%, transparent 55%),
      linear-gradient(90deg, transparent 6%, #3a3a3a 6% 9%, transparent 9% 91%, #3a3a3a 91% 94%, transparent 94%);
    filter: drop-shadow(0 .4cqw .35cqw rgba(0, 0, 0, .25));
  }
  /* Peana / mueble bajo (para una tele, una impresora, una planta…) */
  .deco-pedestal {
    border-radius: .3cqw .3cqw .15cqw .15cqw;
    background: linear-gradient(180deg, color-mix(in srgb, var(--c, #6d5238) 80%, #fff) 0 12%, var(--c, #6d5238) 12%);
    box-shadow: 0 .5cqw .8cqw rgba(0, 0, 0, .28);
  }
  /* Soporte de pared (brazo para una tele o un altavoz) */
  .deco-bracket {
    background: linear-gradient(90deg, transparent 40%, #3c3c3c 40% 60%, transparent 60%), linear-gradient(180deg, #4a4a4a 0 30%, transparent 30%);
    border-radius: .2cqw;
  }
}

/* Más muebles genéricos (decor { kind, l, t, w, h, id, color }); medidas reales en docs/AUTORIA.md §7.5 */
@layer scene {
  /* Puerta con marco, dos cuarterones y manilla (≈ 210 × 90 cm) */
  .deco-door {
    border-radius: .3cqw .3cqw 0 0;
    background:
      radial-gradient(circle at 86% 54%, #e6c766 0 .35cqw, #8a6d17 .38cqw, transparent .45cqw),
      linear-gradient(180deg, transparent 6%, rgba(0, 0, 0, .14) 6% 7%, transparent 7% 44%, rgba(0, 0, 0, .14) 44% 45%, transparent 45% 51%, rgba(0, 0, 0, .14) 51% 52%, transparent 52% 93%, rgba(0, 0, 0, .14) 93% 94%, transparent 94%),
      linear-gradient(90deg, rgba(0, 0, 0, .12), transparent 12% 88%, rgba(0, 0, 0, .12)),
      var(--c, #8b6a4a);
    box-shadow: 0 0 0 .55cqw #e9e3d6, 0 0 0 .7cqw rgba(0, 0, 0, .18), 0 .4cqw .9cqw .5cqw rgba(0, 0, 0, .18);
  }
  /* Librería alta con baldas y lomos de colores */
  .deco-bookcase {
    border-radius: .3cqw;
    background:
      repeating-linear-gradient(180deg, transparent 0 calc(25% - .6cqw), var(--c, #6d5238) calc(25% - .6cqw) 25%),
      repeating-linear-gradient(90deg, #9c3b32 0 .9cqw, #2f5d8a .9cqw 1.6cqw, #d2a63a 1.6cqw 2.2cqw, #3d6b45 2.2cqw 3.1cqw, #7a4d8a 3.1cqw 3.6cqw, #c9c2b0 3.6cqw 4.4cqw, transparent 4.4cqw 4.9cqw),
      color-mix(in srgb, var(--c, #6d5238) 70%, #000);
    box-shadow: inset 0 0 0 .55cqw var(--c, #6d5238), 0 .5cqw .9cqw rgba(0, 0, 0, .3);
  }
  /* Sofá: respaldo, asiento, brazos y patas (≈ 85 cm de alto) */
  .deco-sofa {
    border-radius: 1.2cqw 1.2cqw .4cqw .4cqw;
    background:
      linear-gradient(180deg, transparent 0 45%, rgba(255, 255, 255, .12) 45% 50%, transparent 50% 88%, transparent 88%),
      linear-gradient(90deg, rgba(0, 0, 0, .22) 0 9%, transparent 9% 91%, rgba(0, 0, 0, .22) 91%),
      linear-gradient(180deg, var(--c, #6b7f9e) 0 88%, transparent 88%),
      linear-gradient(90deg, transparent 4%, #3a2c20 4% 7%, transparent 7% 93%, #3a2c20 93% 96%, transparent 96%);
    filter: drop-shadow(0 .5cqw .4cqw rgba(0, 0, 0, .28));
  }
  /* Atril / tribuna de oradores: frontal que se estrecha y tablero inclinado */
  .deco-lectern {
    clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%);
    background: linear-gradient(180deg, color-mix(in srgb, var(--c, #6d5238) 70%, #fff) 0 8%, #3a2a1c 8% 10%, var(--c, #6d5238) 10%);
    filter: drop-shadow(0 .5cqw .4cqw rgba(0, 0, 0, .3));
  }
  /* Tarima / escenario bajo: canto superior claro y frente */
  .deco-platform {
    background: linear-gradient(180deg, color-mix(in srgb, var(--c, #7a5b3e) 75%, #fff) 0 18%, var(--c, #7a5b3e) 18% 92%, rgba(0, 0, 0, .35) 92%);
    box-shadow: 0 .4cqw .8cqw rgba(0, 0, 0, .3);
  }
  /* Gradas / filas de butacas o escaños vistas de frente */
  .deco-seats {
    background:
      repeating-linear-gradient(90deg, transparent 0 .25cqw, rgba(0, 0, 0, .35) .25cqw .5cqw, transparent .5cqw 3cqw),
      repeating-linear-gradient(180deg, var(--c, #8c2f2f) 0 calc(33.33% - .9cqw), rgba(0, 0, 0, .45) calc(33.33% - .9cqw) 33.33%);
    border-radius: .4cqw .4cqw 0 0;
    box-shadow: 0 .4cqw .8cqw rgba(0, 0, 0, .3);
  }
  /* Telón o cortina con pliegues */
  .deco-curtain {
    background:
      repeating-linear-gradient(90deg, rgba(0, 0, 0, .28) 0, rgba(255, 255, 255, .1) 1.4cqw, rgba(0, 0, 0, .28) 2.8cqw),
      var(--c, #8c1f28);
    box-shadow: inset 0 1.2cqw 1cqw -.6cqw rgba(0, 0, 0, .4), 0 .4cqw .8cqw rgba(0, 0, 0, .25);
  }
  /* Mampara / biombo / cabina de votación: panel esmerilado sobre patas */
  .deco-partition {
    border-radius: .3cqw;
    background:
      linear-gradient(90deg, transparent 8%, #4a4a4a 8% 10%, transparent 10% 90%, #4a4a4a 90% 92%, transparent 92%) bottom / 100% 10% no-repeat,
      linear-gradient(180deg, color-mix(in srgb, var(--c, #d7dde2) 92%, #fff) 0 90%, transparent 90%);
    box-shadow: inset 0 0 0 .3cqw rgba(0, 0, 0, .18);
    filter: drop-shadow(0 .4cqw .4cqw rgba(0, 0, 0, .22));
  }
  /* Vitrina / mostrador expositor: zócalo y cristal con reflejo */
  .deco-vitrine {
    border-radius: .4cqw .4cqw .2cqw .2cqw;
    background:
      linear-gradient(115deg, transparent 0 30%, rgba(255, 255, 255, .35) 30% 36%, transparent 36%) top / 100% 55% no-repeat,
      linear-gradient(180deg, rgba(200, 230, 240, .45) 0 55%, #b7b9bc 55% 60%, var(--c, #8a8f96) 60%);
    box-shadow: inset 0 0 0 .25cqw rgba(0, 0, 0, .2), 0 .4cqw .8cqw rgba(0, 0, 0, .28);
  }
  /* Persiana metálica bajada */
  .deco-shutter {
    background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--c, #9aa0a6) 85%, #fff) 0 .6cqw, var(--c, #9aa0a6) .6cqw 1.3cqw, rgba(0, 0, 0, .3) 1.3cqw 1.45cqw);
    box-shadow: inset 0 1cqw 1cqw -.5cqw rgba(0, 0, 0, .35), 0 .3cqw .6cqw rgba(0, 0, 0, .25);
  }
}