/* BRASA 0.1 · E01 · mostrador NPC dentro del juego. Copia ACOTADA de referencia_B03D/css/mostrador.css (B03D, arte
   MOSTRADOR_ARTE_01 sin cambios): cada selector va bajo dialog.comercio-juego y no afecta al resto del juego.
   Generado por herramientas/e01-css-mostrador.py; NO editar a mano: las reglas propias de la integración van al final. */
dialog.comercio-juego { --tinta: #2a1d12; --papel: #f3e7cf; --pergamino: #ecd9ae; --madera-oscura: #2a1a10; --oro: #c99a4a;
  --feliz: #3f9b4f; --neutral: #c9a13a; --inquieto: #e07b28; --enfadado: #c0392b; }
dialog.comercio-juego * { box-sizing: border-box; }
/* (B03D: html { font-size: calc(16px * var(--texto)) } — omitida: el texto sigue al navegador) */ dialog.comercio-juego { -webkit-text-size-adjust: 100%; }
dialog.comercio-juego { margin: 0; background: #17120d; color: #efe6cf; font: 1rem/1.35 system-ui, -apple-system, "Segoe UI", sans-serif; overflow-x: hidden; }
dialog.comercio-juego button, dialog.comercio-juego select, dialog.comercio-juego input { font: inherit; }
dialog.comercio-juego button { min-height: 44px; min-width: 44px; cursor: pointer; }
dialog.comercio-juego button:disabled { cursor: not-allowed; }
dialog.comercio-juego :focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px #1c1309; }
dialog.comercio-juego .oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
dialog.comercio-juego [hidden] { display: none !important; }
dialog.comercio-juego .aviso { margin: 0; padding: .15rem .6rem; font-size: .8rem; color: #d9b98a; text-align: center; }
dialog.comercio-juego .pagina { padding: 0 .35rem .6rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; justify-items: center; }
/* ---------- Marco del juego ---------- */
dialog.comercio-juego .juego { position: relative; width: 100%; max-width: 1000px; display: flex; flex-direction: column; border: 3px solid var(--madera-oscura); border-radius: 10px; overflow: clip; background: #4e3425; container: juego / inline-size; }
/* Escritorio: el marco completo cabe en la ventana a 100 % (alto ≈ 0,667 × ancho + barra superior). */
@media (min-width: 700px) and (min-aspect-ratio: 1 / 1) {
dialog.comercio-juego .juego { width: min(100%, calc((var(--cm-alto, 100vh) - 4.5rem) * 1.45)); }
 }
dialog.comercio-juego .juego > * { --ap: calc(100cqw / 180); --ox: 0px; --fondo: url('../assets/mostrador/fondo-mobile.png'); --mesa: url('../assets/mostrador/mesa-mobile.png'); --oclusor: url('../assets/mostrador/oclusor-mobile.png'); --ext: url('../assets/mostrador/frente-extension-mobile.png');
  --ancho-arte: 180; --y-mesa: 135; --y-frente: 182; --alto-arte: 300; --frente-min: 80; --cara-x: 46; --cara-y: 30; --cliente-y: 6; }
@container juego (max-width: 340px) {
dialog.comercio-juego .juego > * { --ap: calc(100cqw / 160); --ox: calc(-10 * 100cqw / 160); }
 }
/* recorte de layout.json */
@container juego (min-width: 600px) {
dialog.comercio-juego .juego > * { --ap: calc(100cqw / 360); --fondo: url('../assets/mostrador/fondo-desktop.png'); --mesa: url('../assets/mostrador/mesa-desktop.png'); --oclusor: url('../assets/mostrador/oclusor-desktop.png'); --ext: url('../assets/mostrador/frente-extension-desktop.png');
  --ancho-arte: 360; --y-mesa: 130; --y-frente: 177; --alto-arte: 240; --frente-min: 63; --cara-x: 52; --cara-y: 34; --cliente-y: 2; }
 }
/* Barra superior: fama; con el mostrador abierto, tiempo restante y «Cerrar tienda». */
dialog.comercio-juego .hud { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; padding: .25rem .45rem; background: #24170e; border-bottom: 2px solid #120b06; }
dialog.comercio-juego .fama, dialog.comercio-juego .reloj { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; padding: 0 .6rem; border-radius: 99px; background: rgba(0, 0, 0, .35); color: #f6e3b4; font-weight: 700; }
dialog.comercio-juego .fama { color: #ffd77a; }
dialog.comercio-juego .reloj { margin-left: auto; }
dialog.comercio-juego .hud .mini { margin-left: auto; }
dialog.comercio-juego .reloj + .mini { margin-left: 0; }
/* Escena: fondo y cliente detrás de la mesa. */
dialog.comercio-juego .escena { position: relative; flex: none; height: calc(var(--y-mesa) * var(--ap)); overflow: hidden; image-rendering: pixelated;
  background: #3a2a1c var(--fondo) var(--ox) 0 / calc(var(--ancho-arte) * var(--ap)) auto no-repeat; }
dialog.comercio-juego .cliente { position: absolute; left: 50%; bottom: calc(-1 * var(--cliente-y) * var(--ap)); height: calc(116 * var(--ap)); width: auto; translate: -50% 0; image-rendering: pixelated; transform: translateX(160%); }
dialog.comercio-juego .escena[data-fase="fuera"] .cliente { visibility: hidden; }
dialog.comercio-juego .escena[data-fase="entrando"] .cliente { transform: translateX(0); transition: transform .7s cubic-bezier(.2, .8, .3, 1); animation: cm-vaiven .35s ease-in-out 2; }
dialog.comercio-juego .escena[data-fase="quieto"] .cliente { transform: translateX(0); }
dialog.comercio-juego .escena[data-fase="saliendo"] .cliente { transform: translateX(-160%); transition: transform .55s ease-in; }
@keyframes cm-vaiven { 0%, 100% { translate: -50% 0; } 50% { translate: -50% -3px; } }
dialog.comercio-juego.reducido .escena .cliente { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
dialog.comercio-juego .escena .cliente { transition: none !important; animation: none !important; }
 }
/* Cara de ánimo: UNA, junto al cliente (a su derecha, nunca sobre su cara); color y emoji del mismo valor. */
dialog.comercio-juego .cara { position: absolute; top: calc(var(--cara-y) * var(--ap)); left: min(calc(50% + var(--cara-x) * var(--ap)), calc(100% - 2.7em)); font-size: 1.5rem; width: 2.2em; height: 2.2em; display: grid; place-items: center;
  border-radius: 50%; background: rgba(20, 12, 6, .78); border: 4px solid var(--color-animo, #888); line-height: 1; }
dialog.comercio-juego .cara span { font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif; }
dialog.comercio-juego [data-animo="feliz"] { --color-animo: var(--feliz); }
dialog.comercio-juego [data-animo="neutral"] { --color-animo: var(--neutral); }
dialog.comercio-juego [data-animo="inquieto"] { --color-animo: var(--inquieto); }
dialog.comercio-juego [data-animo="enfadado"] { --color-animo: var(--enfadado); }
/* Mesa: la franja del tablero (fondo + mesa + oclusor del arte); el marco pequeño de negociación sobre el tapete. */
dialog.comercio-juego .mesa { flex: none; min-height: calc((var(--y-frente) - var(--y-mesa)) * var(--ap)); display: grid; place-items: center; padding: .2rem .35rem; image-rendering: pixelated;
  background: var(--oclusor) var(--ox) calc(-1 * var(--y-mesa) * var(--ap)) / calc(var(--ancho-arte) * var(--ap)) auto no-repeat,
    var(--mesa) var(--ox) calc(-1 * var(--y-mesa) * var(--ap)) / calc(var(--ancho-arte) * var(--ap)) auto no-repeat,
    var(--fondo) var(--ox) calc(-1 * var(--y-mesa) * var(--ap)) / calc(var(--ancho-arte) * var(--ap)) auto no-repeat, #5f402b; }
dialog.comercio-juego .negociacion { display: grid; grid-template-columns: auto minmax(0, max-content) auto; grid-template-areas: "menos objeto mas"; align-items: center; gap: .35rem .5rem;
  padding: .2rem .35rem; border: 4px solid var(--color-animo, #a17a50); border-radius: 10px; background: rgba(28, 18, 10, .55); max-width: 100%; }
dialog.comercio-juego .negociacion #menos { grid-area: menos; }
dialog.comercio-juego .negociacion #mas { grid-area: mas; }
dialog.comercio-juego .negociacion .objeto { grid-area: objeto; }
dialog.comercio-juego .objeto { display: flex; align-items: center; justify-content: center; gap: .4rem; flex-wrap: wrap; min-width: 0; }
dialog.comercio-juego .objeto img { width: calc(16 * 3px); height: calc(16 * 3px); image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)); }
dialog.comercio-juego .objeto output { padding: .15rem .5rem; background: var(--papel); color: var(--tinta); border: 2px solid #3b2616; border-radius: 6px; font-weight: 800; font-size: 1.15rem; white-space: nowrap; }
/* Marco estrecho para el tamaño del texto: pieza e importe arriba, −10 % / +10 % debajo (mismo marco). */
@container juego (max-width: 24em) {
dialog.comercio-juego .cara { top: 4px; left: auto; right: 4px; font-size: 1.25rem; }
/* esquina superior, más pequeña: lejos de la cabeza */
dialog.comercio-juego .negociacion { grid-template-columns: 1fr 1fr; grid-template-areas: "objeto objeto" "menos mas"; width: 100%; }
dialog.comercio-juego .objeto output { white-space: normal; }

}
/* Frente de la mesa: respuesta de una línea, «Ofrecer» o las dos opciones, y Piezas / ? en las esquinas. */
dialog.comercio-juego .frente { flex: 1 0 auto; min-height: calc(var(--frente-min) * var(--ap)); display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .3rem .45rem .35rem; image-rendering: pixelated;
  background: var(--oclusor) var(--ox) calc(-1 * var(--y-frente) * var(--ap)) / calc(var(--ancho-arte) * var(--ap)) auto no-repeat,
    var(--ext) var(--ox) calc((var(--alto-arte) - var(--y-frente)) * var(--ap)) / calc(var(--ancho-arte) * var(--ap)) auto repeat-y, #4e3425; }
dialog.comercio-juego .respuesta { margin: 0; min-height: 1.35em; max-width: 100%; text-align: center; font-weight: 700; color: #fff1cf; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
dialog.comercio-juego .respuesta.molesto { color: #ffc2b4; }
dialog.comercio-juego .acciones { display: flex; justify-content: center; width: 100%; }
dialog.comercio-juego .acciones .placa { width: min(100%, 18rem); font-size: 1.15rem; }
dialog.comercio-juego .opciones { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; width: 100%; }
dialog.comercio-juego .opcion { flex: 1 1 13rem; max-width: 22rem; display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .35rem .6rem; text-align: center; }
dialog.comercio-juego .opcion-titulo { font-size: 1.08rem; font-weight: 800; }
dialog.comercio-juego .opcion-linea { font-size: .85rem; font-weight: 600; }
dialog.comercio-juego .disponibles, dialog.comercio-juego .auto-titulo { flex: 1 1 100%; margin: 0; text-align: center; font-size: .9rem; color: #f6e8c6; text-shadow: 0 1px 2px #000; }
dialog.comercio-juego .secundarios { margin-top: auto; width: 100%; display: flex; justify-content: space-between; gap: .4rem; }
/* Placas: botones HTML reales con aspecto de madera/pergamino; foco, pulsado y deshabilitado visibles. */
dialog.comercio-juego .placa, dialog.comercio-juego .mini { background: linear-gradient(#f1dfb6, #d8bd85); color: var(--tinta); border: 2px solid #2a1a10; border-radius: 6px; font-weight: 700; box-shadow: 0 3px 0 #2a1a10, inset 0 1px 0 #fff6dd; padding: .3rem .7rem; }
dialog.comercio-juego .placa.principal { background: linear-gradient(#f2c76c, #c99a4a); }
dialog.comercio-juego .placa:hover:not(:disabled), dialog.comercio-juego .mini:hover:not(:disabled) { filter: brightness(1.07); }
dialog.comercio-juego .placa:active:not(:disabled), dialog.comercio-juego .mini:active:not(:disabled) { translate: 0 2px; box-shadow: 0 1px 0 #2a1a10; }
dialog.comercio-juego .placa:disabled, dialog.comercio-juego .mini:disabled { background: #9a8a6a; border-style: dashed; box-shadow: none; opacity: .65; }
dialog.comercio-juego .mini { font-size: .9rem; padding: .2rem .6rem; }
dialog.comercio-juego .mini.redondo { border-radius: 50%; }
/* ---------- Cajón de Piezas y libro de ayuda (dentro del marco) ---------- */
dialog.comercio-juego .bandeja { position: absolute; inset: 0; z-index: 4; overflow: auto; overscroll-behavior: contain; background: var(--pergamino); color: var(--tinta); padding: 0 .7rem .7rem; border: 5px solid var(--madera-oscura); }
dialog.comercio-juego .bandeja > header { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; margin: 0 -.7rem .4rem; padding: .35rem .7rem; background: var(--pergamino); border-bottom: 2px solid #5a3a22; }
dialog.comercio-juego .bandeja h2 { margin: 0; font-size: 1.15rem; }
dialog.comercio-juego .nota { font-size: .88rem; color: #4a3a26; }
dialog.comercio-juego .nota-fuerte { font-weight: 700; color: #7a2a1f; }
dialog.comercio-juego .ayuda-lista { padding-left: 1.2rem; }
dialog.comercio-juego .ayuda-lista li { margin-bottom: .35rem; }
dialog.comercio-juego .lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
dialog.comercio-juego .lista li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; background: #f7ecd2; border-radius: 8px; padding: .25rem .5rem; min-height: 44px; }
dialog.comercio-juego .lista label { display: flex; align-items: center; gap: .5rem; flex: 1 1 12rem; min-height: 44px; overflow-wrap: anywhere; }
dialog.comercio-juego .lista input[type="checkbox"] { width: 22px; height: 22px; flex: none; }
dialog.comercio-juego .lista img { width: 32px; height: 32px; image-rendering: pixelated; }
dialog.comercio-juego .base { font-weight: 700; }
dialog.comercio-juego .marca { font-size: .8rem; padding: .05rem .45rem; border-radius: 99px; background: #d8c8a2; white-space: nowrap; }
dialog.comercio-juego .marca.expuesta { background: #e7c27a; }
dialog.comercio-juego .marca.auto { background: #a8d0b2; }
dialog.comercio-juego .marca.vendida { background: #c9c9c9; }
dialog.comercio-juego .marca.bloq { background: #e6a99c; }
dialog.comercio-juego .marca.visita { background: #f0b35c; }
dialog.comercio-juego .pie-bandeja { margin-top: .6rem; display: grid; gap: .3rem; justify-items: start; }

/* ---------- Integración E01 (propio): diálogo sobre el marco del juego, como el hogar H01 ---------- */
dialog.comercio-juego { box-sizing: border-box; position: fixed; inset: var(--cm-top, 0px) auto auto var(--cm-left, 0px); width: var(--cm-width, 100%); height: var(--cm-height, 100%);
  max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; overflow: auto; overscroll-behavior: contain; font-size: 1rem; }
dialog.comercio-juego::backdrop { background: #0e0a07; }
dialog.comercio-juego .pagina { padding: 0 .35rem .6rem; min-height: 100%; align-content: start; }
dialog.comercio-juego .objeto .itemicon { display: inline-grid; place-items: center; width: 48px; height: 48px; }
dialog.comercio-juego .objeto .itemicon img, dialog.comercio-juego .objeto .itemicon svg { width: 48px; height: 48px; image-rendering: pixelated; }
dialog.comercio-juego .lista .itemicon, dialog.comercio-juego .lista .itemicon img, dialog.comercio-juego .lista .itemicon svg { width: 32px; height: 32px; image-rendering: pixelated; }
dialog.comercio-juego .historial { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
dialog.comercio-juego .historial li { background: #f7ecd2; border-radius: 8px; padding: .3rem .5rem; overflow-wrap: anywhere; }
dialog.comercio-juego .bloqueo { margin: 0; font-weight: 700; color: #ffd0c4; text-align: center; text-shadow: 0 1px 2px #000; }
/* Coordinador: .hud global fija48px; permitir filas reales al ampliar texto. */
dialog.comercio-juego .hud { height: auto; min-height: 44px; flex-shrink: 0; }
dialog.comercio-juego .hud .volver-juego { margin-left: 0; }  /* «‹ Lonja» a la izquierda; el reloj sigue empujando a la derecha */
dialog.comercio-juego .placa, dialog.comercio-juego .mini { text-align: center; justify-content: center; } /* sin heredar la alineación de los botones del juego */
@container juego (max-width: 24em) { dialog.comercio-juego .negociacion .placa { padding-inline: .35rem; } }
/* Entrada en la Lonja (fuera del diálogo, en el panel del juego). */
.comercio-entrada:not(:empty) { display: grid; gap: .25rem; margin: .6rem 0; }
.comercio-entrada button { min-height: 44px; }