/*
 * Negociazo: el diseño de la partida (estilo Arena)
 * El tablero 3D de fondo y, encima, cuatro paneles que se pliegan: los jugadores (izquierda), lo que puedes hacer
 * (derecha), tu turno con la mochila (abajo a la izquierda) y las demandas (abajo). Arriba, la barra de íconos
 * (cartilla, cámara, velocidad, música, sonido, ajustes y menú). Cada caja mide lo que su contenido, sin espacio
 * vacío. En el celular: los jugadores en fila arriba, el tablero al medio y el panel sube como hoja.
 */
:root { --panel: 340px; --izq: 240px; }
html, body { height: 100%; }
body { overflow: hidden; }
.p { position: fixed; inset: 0; }
.p-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.p-cargando { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 14px 20px; font: 400 22px 'Lilita One', sans-serif; }
.p-icono { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.p-icono.es-lleno { fill: currentColor; stroke: none; }

/* ---------- Arriba: la marca, cómo va la partida y la barra de íconos ---------- */
.p-arriba { position: absolute; left: 12px; top: 12px; display: flex; align-items: center; gap: 8px; max-width: calc(100% - var(--panel) - 400px); }
.p-marca { display: flex; flex: none; align-items: center; gap: 6px; padding: 3px 12px 3px 5px; text-decoration: none; background: #fff; border: 3px solid var(--tinta); border-radius: 999px; box-shadow: 0 4px 0 var(--tinta); }
.p-marca b { font: 400 19px 'Lilita One', sans-serif; color: var(--tinta); }
.p-estado { min-width: 0; padding: 6px 13px 5px; overflow: hidden; text-overflow: ellipsis; font-weight: 800; font-size: 14px; white-space: nowrap; background: #fff; border: 3px solid var(--tinta); border-radius: 999px; box-shadow: 0 4px 0 var(--tinta); }
.p-estado.es-ultima { background: var(--rosa); color: #fff; }
.p-iconos { position: absolute; top: 12px; right: calc(var(--panel) + 26px); display: flex; gap: 6px; padding: 5px; background: rgba(13, 16, 51, 0.28); border-radius: 999px; transition: right 0.25s; }
.p-boton-icono { position: relative; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; color: var(--tinta); background: #fff; border: 3px solid var(--tinta); border-radius: 50%; box-shadow: 0 3px 0 var(--tinta); cursor: pointer; transition: transform 0.1s; }
.p-boton-icono:hover { transform: translateY(-2px); }
.p-boton-icono:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tinta); }
.p-boton-icono:focus-visible { outline: 3px solid var(--rosa); outline-offset: 2px; }
.p-boton-icono[aria-pressed="true"] { background: var(--oro); }
.p-boton-icono.es-apagado { color: #8a92bd; background: #e3e8f8; }
.p-boton-icono.es-principal { background: var(--oro); }
/* La etiqueta que explica cada ícono, al pasar el mouse o con el teclado */
.p-boton-icono::after { content: attr(data-etiqueta); position: absolute; top: calc(100% + 8px); left: 50%; z-index: 5; padding: 4px 9px 3px; font: 800 12px 'Rubik', sans-serif; white-space: nowrap; color: #fff; background: var(--tinta); border-radius: 8px; transform: translateX(-50%) translateY(-4px); opacity: 0; pointer-events: none; transition: opacity 0.12s, transform 0.12s; }
.p-boton-icono:hover::after, .p-boton-icono:focus-visible::after { opacity: 1; transform: translateX(-50%); }
.p-separa { width: 2px; margin: 6px 2px; background: rgba(255, 255, 255, 0.45); border-radius: 2px; }

/* ---------- Las cabeceras que pliegan un panel ---------- */
.w-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; font: 800 11.5px 'Rubik', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--suave); }
.w-cabeza span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-plegar { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; color: var(--tinta); background: var(--hielo); border: 2.5px solid var(--tinta); border-radius: 9px; cursor: pointer; }
.w-plegar:hover { background: var(--oro); }
.w-plegar:focus-visible { outline: 3px solid var(--rosa); outline-offset: 2px; }
.w-plegar .p-icono { width: 16px; height: 16px; stroke-width: 3; transition: transform 0.2s; }
.es-plegado .w-plegar .p-icono { transform: rotate(180deg); }

/* ---------- Los jugadores, a la izquierda ---------- */
.p-jugadores { position: absolute; left: 12px; top: 66px; width: var(--izq); display: grid; gap: 6px; transition: width 0.2s; }
.p-jugadores > .w-cabeza { padding: 3px 4px 3px 12px; color: #fff; background: rgba(13, 16, 51, 0.35); border-radius: 12px; }
.p-jugadores > .w-cabeza .w-plegar { background: #fff; }
.p-jug-lista { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.p-jug { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 1px 9px; align-items: center; padding: 6px 10px 6px 6px; background: #fff; border: 3px solid var(--tinta); border-radius: 16px; box-shadow: 0 4px 0 var(--tinta); transition: transform 0.2s; }
.p-jug .n-avatar { grid-row: 1 / span 2; width: 44px !important; height: 44px !important; box-shadow: none; }
.p-jug-nombre { display: flex; align-items: center; gap: 6px; min-width: 0; font: 400 17px/1.1 'Lilita One', sans-serif; }
.p-jug-nombre span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-jug-nombre small { flex: none; padding: 1px 6px 0; font: 800 10px 'Rubik', sans-serif; letter-spacing: 0.06em; text-transform: uppercase; background: var(--hielo); border: 2px solid var(--tinta); border-radius: 999px; }
.p-jug-datos { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 11.5px; font-weight: 800; color: var(--suave); }
.p-jug-datos b { font: 400 18px 'Lilita One', sans-serif; color: var(--tinta); }
.p-jug-datos i { font-style: normal; padding: 0 6px; border-radius: 999px; background: var(--hielo); }
.p-jug-datos i.es-presta { background: #ffe1e6; color: #b3123a; }
.p-jug.es-turno { background: #fff8d6; transform: translateX(6px); box-shadow: 0 4px 0 var(--tinta), 0 0 0 4px var(--oro); }
.p-jug.es-turno::after { content: 'Juega'; position: absolute; right: -6px; top: -10px; padding: 1px 8px 0; font: 400 13px 'Lilita One', sans-serif; background: var(--oro); border: 2.5px solid var(--tinta); border-radius: 999px; }
.p-jug.es-cobra { animation: p-cobra 0.6s; }
.p-jug.es-paga { animation: p-paga 0.5s; }
@keyframes p-cobra { 30% { background: #c8f7d9; transform: translateX(6px) scale(1.04); } }
@keyframes p-paga { 30% { background: #ffe1e6; } }
/* Plegado: solo el dino y el dinero */
.p-jugadores.es-plegado { width: 96px; }
.p-jugadores.es-plegado > .w-cabeza span { display: none; }
.p-jugadores.es-plegado .p-jug { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 2px; padding: 6px 4px 5px; }
.p-jugadores.es-plegado .p-jug-datos { justify-content: center; }
.p-jugadores.es-plegado .p-jug .n-avatar { grid-row: auto; width: 34px !important; height: 34px !important; }
.p-jugadores.es-plegado .p-jug-nombre, .p-jugadores.es-plegado .p-jug-datos i { display: none; }
.p-jugadores.es-plegado .p-jug-datos b { font-size: 15px; white-space: nowrap; }
.p-jugadores.es-plegado .p-jug.es-turno::after { right: -8px; top: -9px; font-size: 11px; }

/* ---------- El panel de la derecha: lo que puedes hacer donde estás ---------- */
.p-panel { position: absolute; top: 12px; right: 12px; width: var(--panel); max-height: calc(100% - 24px); display: flex; flex-direction: column; overflow: hidden; transition: width 0.2s; }
.p-panel-contenido { display: flex; flex-direction: column; min-height: 0; }
.p-panel-plegar { position: absolute; top: 9px; right: 9px; z-index: 2; background: #fff; }
.p-panel .p-cabeza { padding-right: 48px; }
.p-panel-pestana { display: none; }
body.es-panel-plegado { --panel: 50px; }
body.es-panel-plegado .p-panel-contenido, body.es-panel-plegado .p-panel-plegar { display: none; }
body.es-panel-plegado .p-panel-pestana { display: grid; justify-items: center; gap: 10px; width: 100%; padding: 12px 0 14px; font: inherit; color: var(--tinta); background: #fff; border: 0; cursor: pointer; }
.p-panel-pestana span { writing-mode: vertical-rl; transform: rotate(180deg); font: 400 17px 'Lilita One', sans-serif; white-space: nowrap; }
.p-panel-pestana .p-icono { transform: rotate(-90deg); }
.p-panel-pestana i { width: 12px; height: 12px; background: var(--rosa); border: 2px solid var(--tinta); border-radius: 50%; animation: p-late 1s ease-in-out infinite; }
.p-panel-pestana i[hidden] { display: none; }
@keyframes p-late { 50% { transform: scale(1.35); } }
.p-cabeza { padding: 11px 16px 11px; color: #fff; background: var(--c, var(--tinta)); border-bottom: 3px solid var(--tinta); }
.p-cabeza small { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tc, #fff); }
.p-cabeza h2 { margin: 2px 0 0; font-size: 27px; line-height: 1; -webkit-text-stroke: 2.5px var(--tinta); paint-order: stroke fill; text-shadow: 0 3px 0 var(--tinta); }
.p-cabeza-fila { display: flex; align-items: center; gap: 10px; }
.p-cabeza-fila .n-avatar { width: 48px !important; height: 48px !important; }
.p-cuerpo { padding: 12px 14px 14px; overflow: auto; display: grid; gap: 10px; align-content: start; }
.p-cuerpo p { margin: 0; }
.p-nota { color: var(--suave); font-size: 13.5px; }
.p-sub { margin: 2px 0 0; font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--suave); }
.p-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.p-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 5px 8px 5px 5px; background: var(--hielo); border: 2.5px solid var(--tinta); border-radius: 13px; }
.p-fila > svg { flex: none; }
.p-fila b { display: block; font: 400 17px/1.1 'Lilita One', sans-serif; }
.p-fila small { display: block; font-size: 12px; font-weight: 700; color: var(--suave); }
.p-fila small.es-bueno { color: #0b7a3a; }
.p-fila small.es-falta { color: #d8243f; }
.p-fila.es-pide { background: #fff8d6; }
.p-fila.es-sugerida { box-shadow: 0 0 0 3px var(--verde); }
.p-fila.es-boton { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: transform 0.1s; }
.p-fila.es-boton:hover { transform: translateX(-3px); background: #fff8d6; }
.p-fila.es-boton:focus-visible { outline: 3px solid var(--rosa); outline-offset: 2px; }
.p-num { display: grid; place-items: center; width: 30px; height: 30px; font: 400 17px 'Lilita One', sans-serif; background: var(--oro); border: 2.5px solid var(--tinta); border-radius: 50%; }
.p-precio { font: 400 19px 'Lilita One', sans-serif; text-align: right; white-space: nowrap; }
.p-precio s { display: block; font: 700 12px 'Rubik', sans-serif; color: #8f9ad0; }
.p-receta { display: flex; align-items: center; gap: 2px; margin-top: 2px; }
.p-receta span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; }
.p-receta span.es-falta { opacity: 0.35; outline: 2px dashed #d8243f; outline-offset: -2px; }
.p-pasos { display: inline-flex; align-items: center; gap: 4px; }
.p-pasos button { width: 30px; height: 30px; padding: 0; font: 400 20px/1 'Lilita One', sans-serif; color: var(--tinta); background: #fff; border: 2.5px solid var(--tinta); border-radius: 9px; box-shadow: 0 3px 0 var(--tinta); cursor: pointer; }
.p-pasos button:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }
.p-pasos output { min-width: 18px; text-align: center; font: 400 19px 'Lilita One', sans-serif; }
.p-fila-acciones { display: grid; justify-items: end; gap: 4px; }
.p-total { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: #fff8d6; border: 2.5px solid var(--tinta); border-radius: 13px; }
.p-total b { font: 400 22px 'Lilita One', sans-serif; }
.p-aviso-panel { padding: 8px 11px; font-size: 13.5px; font-weight: 700; background: #e7fbef; border: 2.5px solid var(--tinta); border-radius: 12px; }
.p-aviso-panel.es-malo { background: #ffe1e6; }
/* La pista: la jugada que haría el Experto, con un botón para hacerla */
.p-pista { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: start; padding: 9px 11px; background: #e7fbef; border: 2.5px solid var(--tinta); border-radius: 13px; }
.p-pista .p-icono { width: 24px; height: 24px; margin-top: 1px; color: #0b7a3a; }
.p-pista p { font-size: 13.5px; font-weight: 700; }
.p-pista b { font-weight: 800; }
.p-pista .boton { grid-column: 2; justify-self: start; }
.p-registro { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.p-registro li { padding: 6px 10px; font-size: 14px; font-weight: 700; background: var(--hielo); border-radius: 11px; animation: p-entra 0.3s; }
.p-registro li b { font-weight: 800; }
@keyframes p-entra { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.p-cerrar-hoja, .solo-celular { display: none; }

/* ---------- Abajo: tu turno (con la mochila) y las demandas ---------- */
.p-abajo { position: absolute; left: 12px; right: calc(var(--panel) + 26px); bottom: 12px; display: flex; align-items: flex-end; gap: 12px; pointer-events: none; }
.p-abajo > * { pointer-events: auto; }
.p-turno { flex: none; width: 330px; display: grid; gap: 8px; padding: 9px 11px 11px; }
.p-etapas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; counter-reset: etapa; }
.p-etapas li { counter-increment: etapa; display: flex; align-items: center; gap: 4px; min-width: 0; padding: 3px 5px 2px; font-size: 11px; font-weight: 800; color: #8f9ad0; background: var(--hielo); border-radius: 8px; white-space: nowrap; overflow: hidden; }
.p-etapas li::before { content: counter(etapa); flex: none; display: grid; place-items: center; width: 16px; height: 16px; font: 400 11px 'Lilita One', sans-serif; color: #fff; background: #aeb6d8; border-radius: 50%; }
.p-etapas li.es-hecha { color: var(--suave); }
.p-etapas li.es-hecha::before { content: ''; background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%230d1033' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.p-etapas li.es-ahora { color: var(--tinta); background: #fff3c4; box-shadow: inset 0 0 0 2px var(--tinta); }
.p-etapas li.es-ahora::before { color: var(--tinta); background: var(--oro); }
.p-etapas[hidden] { display: none; }
.p-turno-fila { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
.p-dado { width: 54px; height: 54px; }
.p-dado svg { display: block; width: 100%; height: 100%; }
.p-mensaje { margin: 0; font-size: 14px; font-weight: 700; }
.p-mensaje b { font-weight: 800; }
.p-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.p-botones:empty { display: none; }
.p-botones .boton { padding: 8px 16px 7px; font-size: 19px; }
.p-botones .es-late { animation: p-late-boton 1.6s ease-in-out infinite; }
@keyframes p-late-boton { 50% { transform: translateY(-2px) scale(1.04); } }
.p-mochila-caja { display: grid; gap: 5px; padding: 5px 7px 7px; background: var(--hielo); border: 2.5px solid var(--tinta); border-radius: 13px; }
.p-mochila-caja > .w-cabeza .w-plegar { width: 24px; height: 24px; background: #fff; }
.p-mochila { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.p-mochila-caja.es-plegado .p-mochila .p-mochila-cosa, .p-mochila-caja.es-plegado .p-mochila-vacia { display: none; }
.p-mochila-dinero { padding: 2px 10px 1px; font: 400 20px 'Lilita One', sans-serif; background: var(--oro); border: 2.5px solid var(--tinta); border-radius: 10px; }
.p-mochila-cosa { position: relative; display: grid; place-items: center; width: 34px; height: 34px; background: #fff; border: 2px solid var(--tinta); border-radius: 10px; }
.p-mochila-cosa i { position: absolute; right: -6px; bottom: -6px; min-width: 18px; padding: 0 4px; font: 400 12px/16px 'Lilita One', sans-serif; font-style: normal; text-align: center; color: #fff; background: var(--tinta); border-radius: 999px; }
.p-mochila-cosa.es-producto { background: #fff8d6; }
.p-mochila-vacia { font-size: 12.5px; font-weight: 700; color: var(--suave); }
.p-mochila-presta { padding: 1px 8px 0; font-size: 12px; font-weight: 800; color: #b3123a; background: #ffe1e6; border: 2px solid var(--tinta); border-radius: 999px; }
.p-demandas { flex: 0 1 auto; min-width: 0; display: grid; gap: 6px; padding: 6px 10px 10px; }
.p-demandas.es-plegado { padding-bottom: 6px; }
.p-demandas.es-plegado .p-demandas-fila { display: none; }
.p-demandas-fila { display: flex; gap: 8px; overflow-x: auto; padding: 0 2px 2px; }
.p-dem { position: relative; flex: none; width: 104px; display: grid; justify-items: center; align-content: start; gap: 3px; padding: 0 0 7px; font: inherit; color: var(--tinta); text-align: center; background: #fff; border: 3px solid var(--tinta); border-radius: 13px; box-shadow: 0 4px 0 var(--tinta); cursor: pointer; overflow: hidden; transition: transform 0.12s; }
.p-dem:hover, .p-dem:focus-visible { transform: translateY(-4px); }
.p-dem:focus-visible { outline: 3px solid var(--rosa); outline-offset: 2px; }
.p-dem.es-nueva { animation: p-nueva 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.4); }
@keyframes p-nueva { from { transform: translateY(-30px) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
.p-dem-banda { justify-self: stretch; padding: 5px 4px 4px; font: 400 13.5px/1.1 'Lilita One', sans-serif; color: #fff; -webkit-text-stroke: 3px var(--tinta); paint-order: stroke fill; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--c); border-bottom: 3px solid var(--tinta); }
.p-dem-dibujo { margin-top: 3px; width: 52px; height: 52px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 22%, #fff); border: 2.5px solid var(--tinta); border-radius: 50%; }
.p-dem-nombre { font: 400 15px/1.1 'Lilita One', sans-serif; }
.p-dem-precio { padding: 1px 10px 0; font: 400 17px 'Lilita One', sans-serif; background: var(--oro); border: 2.5px solid var(--tinta); border-radius: 999px; }
.p-dem-precio.es-cambia { background: var(--verde); }
/* Lo que tienes para esa demanda */
.p-dem-tuya { position: absolute; top: 30px; right: 3px; padding: 0 5px; font: 800 10px/15px 'Rubik', sans-serif; color: var(--tinta); background: #fff; border: 2px solid var(--tinta); border-radius: 999px; }
.p-dem-tuya.es-lista { background: var(--verde); }
.p-dem.es-vacia { cursor: default; opacity: 0.55; background: var(--hielo); }
.p-temporada { flex: none; width: 124px; display: grid; align-content: start; gap: 3px; padding: 6px 8px 8px; font: inherit; color: var(--tinta); text-align: left; background: #fff8ec; border: 3px solid var(--tinta); border-top-width: 8px; border-radius: 13px; box-shadow: 0 4px 0 var(--tinta); cursor: pointer; }
.p-temporada small { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--suave); }
.p-temporada b { font: 400 16px/1.1 'Lilita One', sans-serif; }
.p-temporada span { font-size: 12px; font-weight: 700; color: var(--suave); }

/* ---------- Avisos grandes arriba (una venta, una temporada, la última ronda) ---------- */
.p-avisos { position: fixed; left: 50%; top: 74px; z-index: 35; display: grid; justify-items: center; gap: 8px; transform: translateX(calc(-50% - var(--panel) / 2 + var(--izq) / 2)); pointer-events: none; }
.p-aviso { padding: 10px 20px 8px; font: 400 22px 'Lilita One', sans-serif; text-align: center; color: var(--tinta); background: #fff; border: 3px solid var(--tinta); border-radius: 16px; box-shadow: 0 5px 0 var(--tinta); animation: p-aviso 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.4); }
.p-aviso small { display: block; font: 700 13px 'Rubik', sans-serif; color: var(--suave); }
.p-aviso.es-oro { background: var(--oro); }
.p-aviso.es-verde { background: var(--verde); }
.p-aviso.es-rosa { background: var(--rosa); color: #fff; }
.p-aviso.es-rosa small { color: #ffe1f1; }
.p-aviso.es-sale { animation: p-sale 0.35s forwards; }
@keyframes p-aviso { from { transform: translateY(-20px) scale(0.7); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes p-sale { to { transform: translateY(-14px); opacity: 0; } }

/* ---------- Capas: la carta en grande, la sorpresa, el taller, la cartilla, los ajustes, el menú y el final ---------- */
.p-capa { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; align-content: center; gap: 14px; padding: 16px; background: rgba(13, 16, 51, 0.6); }
.p-capa[hidden] { display: none; }
.p-capa img { display: block; width: min(300px, 72vw, 38vh); height: auto; border-radius: 6%; box-shadow: 0 10px 0 rgba(13, 16, 51, 0.6); animation: p-al-frente 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.p-capa img.es-ancha { width: min(440px, 88vw, 60vh); border-radius: 4%; }
.p-capa > p { margin: 0; color: #fff; font-weight: 800; text-shadow: 0 2px 0 var(--tinta); }
@keyframes p-al-frente { from { transform: scale(0.5) translateY(60px); opacity: 0; } to { transform: none; opacity: 1; } }
.p-sorpresa { width: min(330px, 86vw); padding: 0 0 18px; text-align: center; overflow: hidden; animation: p-voltea 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
@keyframes p-voltea { from { transform: perspective(700px) rotateY(90deg) scale(0.8); } to { transform: none; } }
.p-sorpresa-cabeza { padding: 14px 16px 12px; color: #fff; background: var(--c); border-bottom: 3px solid var(--tinta); }
.p-sorpresa-cabeza small { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.p-sorpresa-cabeza h2 { margin: 4px 0 0; font-size: 32px; line-height: 1; -webkit-text-stroke: 2.5px var(--tinta); paint-order: stroke fill; text-shadow: 0 3px 0 var(--tinta); }
.p-sorpresa-regalo { width: 92px; height: 92px; margin: 16px auto 6px; }
.p-sorpresa p { margin: 0 18px; font-size: 17px; font-weight: 700; }
.p-sorpresa .p-sorpresa-quien { margin-top: 10px; font-size: 13px; color: var(--suave); }
.p-sorpresa .boton { margin-top: 14px; }
.p-taller { width: min(420px, 90vw); padding: 0 0 16px; text-align: center; overflow: hidden; }
.p-taller-mesa { width: min(300px, 70vw); height: min(300px, 70vw); margin: 12px auto 0; background: radial-gradient(circle, #fff 0%, #eef3ff 70%); border: 3px dashed #c9d3f5; border-radius: 20px; }
.p-taller p { margin: 10px 16px 0; font-weight: 700; color: var(--suave); }
.m2p-escena { display: block; width: 100%; height: 100%; overflow: visible; cursor: pointer; }
.m2p-capa { position: fixed; inset: 0; z-index: 50; pointer-events: none; overflow: hidden; }
.m2p-vuelo { position: absolute; left: 0; top: 0; will-change: transform; filter: drop-shadow(0 4px 0 rgba(13,16,51,0.35)); }
.m2p-vuelo svg { display: block; width: 100%; height: 100%; }
.m2p-materia, .m2p-producto { display: block; }
/* Una ventana con título, botón de cerrar y, si hace falta, pestañas */
.p-modal { width: min(880px, 96vw); max-height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden; animation: p-al-frente 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.p-modal.es-chico { width: min(420px, 94vw); }
.p-modal-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px 10px 18px; color: #fff; background: var(--tinta); }
.p-modal-cabeza h2 { margin: 0; font-size: 25px; text-transform: uppercase; }
.p-modal-cabeza .p-boton-icono { width: 36px; height: 36px; box-shadow: none; }
.p-modal-cabeza .p-boton-icono::after { display: none; }
.p-pestanas { display: flex; gap: 6px; padding: 10px 14px 0; overflow-x: auto; border-bottom: 3px solid var(--tinta); background: var(--hielo); }
.p-pestanas button { flex: none; padding: 7px 13px 6px; font: 400 16px 'Lilita One', sans-serif; color: var(--tinta); background: #fff; border: 3px solid var(--tinta); border-bottom: 0; border-radius: 12px 12px 0 0; cursor: pointer; }
.p-pestanas button[aria-selected="true"] { background: var(--oro); transform: translateY(3px); }
.p-pestanas button:focus-visible { outline: 3px solid var(--rosa); outline-offset: -4px; }
.p-modal-cuerpo { padding: 14px 16px 18px; overflow: auto; display: grid; gap: 12px; align-content: start; }
.p-modal-cuerpo > p { margin: 0; }
.p-menu-botones { display: grid; gap: 10px; }
.p-menu-botones .boton { width: 100%; }
/* La cartilla */
.c-tabla-caja { overflow-x: auto; border: 3px solid var(--tinta); border-radius: 14px; }
.c-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.c-tabla th, .c-tabla td { padding: 6px 8px; text-align: center; border-bottom: 2px solid #dfe5fa; white-space: nowrap; }
.c-tabla thead th { font: 400 15px/1.1 'Lilita One', sans-serif; background: var(--hielo); border-bottom: 3px solid var(--tinta); }
.c-tabla thead th small { display: block; font: 700 11px 'Rubik', sans-serif; color: var(--suave); }
.c-tabla thead th i { display: block; height: 6px; margin: -6px -8px 5px; background: var(--c); }
.c-tabla tbody th { text-align: left; font: 400 15px 'Lilita One', sans-serif; }
.c-tabla tbody th span { display: inline-flex; align-items: center; gap: 6px; }
.c-tabla tbody tr:last-child th, .c-tabla tbody tr:last-child td { border-bottom: 0; }
.c-tabla td { font: 400 17px 'Lilita One', sans-serif; }
.c-tabla td s { display: block; font: 700 11px 'Rubik', sans-serif; color: #8f9ad0; }
.c-tabla td.es-barato { background: #d7f8e3; }
.c-tabla td.es-mesa { background: #fff3c4; box-shadow: inset 0 0 0 3px var(--oro); }
.c-tabla td.es-nada { color: #c3c9e6; }
.c-tabla td small { display: block; font: 800 10px 'Rubik', sans-serif; color: #8a6a00; }
.c-leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; font-weight: 700; color: var(--suave); }
.c-leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.c-leyenda i { width: 16px; height: 16px; border: 2px solid var(--tinta); border-radius: 4px; }
.c-leyenda i.es-mesa { box-shadow: inset 0 0 0 3px var(--oro); }
.c-productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.c-producto { display: grid; gap: 6px; padding: 10px 12px; background: var(--hielo); border: 3px solid var(--tinta); border-radius: 15px; }
.c-producto.es-pedido { background: #fff8d6; }
.c-producto-cabeza { display: flex; align-items: center; gap: 10px; }
.c-producto-cabeza b { font: 400 20px/1 'Lilita One', sans-serif; }
.c-producto-cabeza small { display: block; font-size: 11.5px; font-weight: 800; color: #8a6a00; }
.c-receta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font: 400 16px 'Lilita One', sans-serif; }
.c-receta span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.c-datos { display: grid; grid-template-columns: auto auto; gap: 2px 10px; justify-content: start; font-size: 13px; font-weight: 700; }
.c-datos dt { color: var(--suave); }
.c-datos dd { margin: 0; font-weight: 800; }
.c-datos dd.es-gana { color: #0b7a3a; }
.c-temporadas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.c-temp { padding: 8px 10px; background: #fff; border: 2.5px solid var(--tinta); border-top: 6px solid var(--c); border-radius: 12px; }
.c-temp b { display: block; font: 400 16px 'Lilita One', sans-serif; }
.c-temp span { font-size: 12.5px; font-weight: 700; color: var(--suave); }
.c-temp.es-ahora { background: #fff8d6; box-shadow: 0 0 0 3px var(--oro); }
.c-sorpresas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.c-sorpresas h3 { margin: 0 0 6px; font-size: 19px; }
.c-sorpresas ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.c-sorpresas li { padding: 7px 10px; background: #fff; border: 2.5px solid var(--tinta); border-left: 8px solid var(--c); border-radius: 11px; font-size: 13px; font-weight: 700; }
.c-sorpresas li b { display: block; font: 400 15px 'Lilita One', sans-serif; }
.c-reglas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.c-regla { padding: 10px 12px; background: var(--hielo); border: 3px solid var(--tinta); border-radius: 14px; font-size: 13.5px; font-weight: 600; }
.c-regla h3 { margin: 0 0 4px; font-size: 18px; }
.c-regla ol, .c-regla ul { margin: 0; padding-left: 18px; }
/* Los ajustes */
.a-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 12px; background: var(--hielo); border: 2.5px solid var(--tinta); border-radius: 13px; }
.a-fila b { font: 400 17px 'Lilita One', sans-serif; }
.a-fila small { grid-column: 1 / -1; font-size: 12.5px; font-weight: 700; color: var(--suave); }
.a-fila input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--tinta); }
.a-interruptor { position: relative; width: 52px; height: 30px; flex: none; }
.a-interruptor input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.a-interruptor span { position: absolute; inset: 0; background: #c9d0ea; border: 2.5px solid var(--tinta); border-radius: 999px; pointer-events: none; transition: background 0.15s; }
.a-interruptor span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; background: #fff; border: 2.5px solid var(--tinta); border-radius: 50%; transition: transform 0.15s; }
.a-interruptor input:checked + span { background: var(--verde); }
.a-interruptor input:checked + span::after { transform: translateX(22px); }
.a-interruptor input:focus-visible + span { outline: 3px solid var(--rosa); outline-offset: 2px; }
.a-opciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.a-opciones label input { position: absolute; opacity: 0; pointer-events: none; }
.a-opciones label span { display: inline-block; padding: 5px 11px 4px; font-weight: 800; font-size: 13.5px; background: #fff; border: 2.5px solid var(--tinta); border-radius: 11px; cursor: pointer; }
.a-opciones label input:checked + span { background: var(--oro); box-shadow: 0 3px 0 var(--tinta); }
.a-opciones label input:focus-visible + span { outline: 3px solid var(--rosa); outline-offset: 2px; }
/* El final */
.p-final-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.p-final-lista li { display: grid; grid-template-columns: 40px 60px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px 8px 8px; background: var(--hielo); border: 3px solid var(--tinta); border-radius: 16px; }
.p-final-lista li:first-child { background: #fff8d6; box-shadow: 0 0 0 4px var(--oro); }
.p-final-puesto { display: grid; place-items: center; width: 40px; height: 40px; font: 400 22px 'Lilita One', sans-serif; background: #fff; border: 3px solid var(--tinta); border-radius: 50%; }
.p-final-lista li:first-child .p-final-puesto { background: var(--oro); }
.p-final-lista .n-avatar { width: 60px !important; height: 60px !important; }
.p-final-lista b { display: block; font: 400 21px/1.1 'Lilita One', sans-serif; }
.p-final-lista small { display: block; font-size: 12.5px; font-weight: 700; color: var(--suave); }
.p-final-plata { font: 400 26px 'Lilita One', sans-serif; text-align: right; white-space: nowrap; }
.p-final-titulo { font: 400 30px/1.1 'Lilita One', sans-serif; text-align: center; }
.p-final-botones { grid-template-columns: 1fr 1fr; }

@media (max-width: 1400px) and (min-width: 1181px) { .p-temporada { display: none; } }
@media (max-width: 1180px) and (min-width: 821px) {
  :root { --panel: 310px; --izq: 200px; }
  .p-turno { width: 290px; }
  .p-dem { width: 94px; }
  .p-temporada, .p-separa { display: none; }
  .p-jug-nombre small { display: none; }
  .p-boton-icono { width: 38px; height: 38px; }
  .p-arriba { max-width: calc(100% - var(--panel) - 380px); }
}

/* ---------- El celular ---------- */
@media (max-width: 820px) {
  :root { --panel: 0px; --izq: 0px; }
  body.es-panel-plegado { --panel: 0px; }
  .p { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .p-lienzo { position: relative; grid-row: 3; grid-column: 1; }
  .p-arriba { position: static; grid-row: 1; margin: 8px 8px 0; max-width: none; padding-right: 0; }
  .p-marca b { display: none; }
  .p-estado { font-size: 12px; padding: 4px 9px 3px; }
  .p-iconos { position: static; grid-row: 1; grid-column: 1; justify-self: end; align-self: start; margin: 8px 8px 0 0; padding: 3px; gap: 4px; }
  .p-boton-icono { width: 34px; height: 34px; border-width: 2.5px; }
  .p-boton-icono .p-icono { width: 18px; height: 18px; }
  .p-boton-icono::after, .p-separa, .p-boton-icono[data-accion="todo"], .p-boton-icono[data-accion="girar"], .p-boton-icono[data-accion="rapido"], .p-boton-icono[data-accion="sonido"] { display: none; }
  .p-arriba { grid-column: 1; justify-self: start; max-width: calc(100% - 210px); }
  .p-jugadores { position: static; grid-row: 2; grid-column: 1; width: auto; margin: 8px 8px 0; }
  .p-jugadores > .w-cabeza { display: none; }
  .p-jug-lista { display: flex; gap: 4px; padding-top: 6px; }
  .p-jug { flex: 1 1 0; min-width: 0; grid-template-columns: 26px minmax(0, 1fr); gap: 0 4px; padding: 3px 5px 3px 3px; border-width: 2.5px; border-radius: 12px; box-shadow: 0 3px 0 var(--tinta); }
  .p-jug .n-avatar { width: 26px !important; height: 26px !important; border-width: 2px; }
  .p-jug-nombre { font-size: 11.5px; }
  .p-jug-nombre small, .p-jug-datos i { display: none; }
  .p-jug-datos b { font-size: 13px; white-space: nowrap; }
  .p-jug.es-turno { transform: none; }
  .p-jug.es-turno::after { display: none; }
  .p-abajo { position: static; grid-row: 4; grid-column: 1; flex-direction: column; align-items: stretch; gap: 6px; margin: 0 8px 8px; }
  .p-turno { width: auto; padding: 7px 9px 9px; gap: 6px; }
  .p-etapas li { font-size: 10px; padding: 2px 4px 1px; }
  .p-dado { width: 42px; height: 42px; }
  .p-mensaje { font-size: 13px; }
  .p-botones .boton { padding: 6px 12px 5px; font-size: 16px; }
  .p-mochila-cosa { width: 28px; height: 28px; }
  .p-mochila-cosa svg { width: 22px; height: 22px; }
  .p-mochila-dinero { font-size: 16px; }
  .p-demandas { padding: 5px 8px 8px; }
  .p-dem { width: 80px; gap: 2px; padding-bottom: 5px; }
  .p-dem-banda { font-size: 11.5px; padding: 4px 3px 3px; }
  .p-dem-dibujo { width: 38px; height: 38px; }
  .p-dem-dibujo svg { width: 30px; height: 30px; }
  .p-dem-nombre { font-size: 12.5px; }
  .p-dem-precio { font-size: 14px; padding: 0 7px; }
  .p-dem-tuya { top: 24px; }
  .p-temporada { width: 100px; padding: 4px 6px 6px; }
  .p-temporada b { font-size: 13.5px; }
  .p-temporada span { display: none; }
  .p-panel { position: fixed; top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; z-index: 30; max-height: 64vh; display: none; box-shadow: 0 -4px 0 rgba(13,16,51,0.25), 0 6px 0 var(--tinta); }
  .p-panel.es-abierta { display: flex; }
  .p-panel-plegar, body.es-panel-plegado .p-panel-pestana { display: none; }
  body.es-panel-plegado .p-panel-contenido { display: flex; }
  .p-cerrar-hoja { display: block; position: absolute; top: 8px; right: 8px; z-index: 2; padding: 4px 10px 3px; font-size: 14px; }
  .solo-celular { display: block; }
  .p-cabeza h2 { font-size: 22px; }
  .p-cabeza { padding: 8px 90px 8px 12px; }
  .p-avisos { top: 120px; transform: translateX(-50%); width: calc(100vw - 32px); }
  .p-aviso { font-size: 18px; padding: 8px 14px 6px; }
  .p-modal { width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; }
  .p-capa:has(.p-modal) { padding: 0; }
  .c-sorpresas { grid-template-columns: minmax(0, 1fr); }
  .p-final-lista li { grid-template-columns: 32px 46px minmax(0, 1fr) auto; gap: 8px; }
  .p-final-puesto { width: 32px; height: 32px; font-size: 18px; }
  .p-final-lista .n-avatar { width: 46px !important; height: 46px !important; }
  .p-final-plata { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .p-capa img, .p-sorpresa, .p-aviso, .p-dem.es-nueva, .p-modal, .p-botones .es-late, .p-panel-pestana i { animation: none; } }

/* ---------- El modo nocturno ----------
   Cielo azul noche con estrellas (los brillos del fondo), paneles oscuros con texto claro; el contorno sigue siendo de
   tinta y los colores de las marcas no cambian. En la escena, la luz de luna y los faroles los pone partida.js. */
body.es-noche { --suave: #aab4e8; --hielo: #262d6b; color-scheme: dark; }
body.es-noche.n-vivo { background: radial-gradient(ellipse at 50% 0%, #26338f 0%, #121a5c 42%, #050822 100%); background-color: #0b1140; }
body.es-noche.n-vivo::before { background: repeating-conic-gradient(from 0deg, rgba(160, 180, 255, 0.05) 0deg 9deg, transparent 9deg 18deg); }
body.es-noche .n-brillos i { animation-duration: calc(var(--t) * 1.4); }
body.es-noche .caja, body.es-noche .p-jug, body.es-noche .p-dem, body.es-noche .p-estado, body.es-noche .p-marca,
body.es-noche .p-boton-icono, body.es-noche .boton:not(.boton--oro):not(.boton--verde), body.es-noche .w-plegar,
body.es-noche .p-pasos button, body.es-noche .p-panel-pestana, body.es-noche .c-temp, body.es-noche .c-sorpresas li,
body.es-noche .a-opciones label span, body.es-noche .p-pestanas button:not([aria-selected="true"]) { color: #eef2ff; background: #1b2152; }
body.es-noche .p-marca b, body.es-noche .p-dem-nombre, body.es-noche .p-precio { color: #eef2ff; }
body.es-noche .p-fila, body.es-noche .p-mochila-caja, body.es-noche .a-fila, body.es-noche .c-producto, body.es-noche .c-regla, body.es-noche .p-etapas li, body.es-noche .p-pestanas, body.es-noche .c-tabla thead th { background: #262d6b; color: #eef2ff; }
body.es-noche .p-fila.es-pide, body.es-noche .c-producto.es-pedido, body.es-noche .p-total, body.es-noche .p-temporada, body.es-noche .p-jug.es-turno, body.es-noche .p-etapas li.es-ahora, body.es-noche .p-fila.es-boton:hover { background: #3a3266; color: #fff6d6; }
body.es-noche .p-pista, body.es-noche .p-aviso-panel { background: #173d3a; color: #e6fff3; }
body.es-noche .p-aviso-panel.es-malo { background: #4a1f36; }
body.es-noche .p-pista .p-icono { color: #6df0a8; }
body.es-noche .p-fila small.es-bueno, body.es-noche .c-datos dd.es-gana { color: #6df0a8; }
body.es-noche .p-fila small.es-falta { color: #ff8fa6; }
body.es-noche .p-registro li { background: #262d6b; color: #eef2ff; }
body.es-noche .p-mochila-cosa { background: #2d3577; }
body.es-noche .p-mochila-cosa.es-producto { background: #3a3266; }
body.es-noche .p-dem-dibujo { background: color-mix(in srgb, var(--c) 30%, #1b2152); }
body.es-noche .p-dem-tuya { background: #1b2152; color: #eef2ff; }
body.es-noche .p-dem-tuya.es-lista { background: var(--verde); color: var(--tinta); }
body.es-noche .p-sorpresa p, body.es-noche .p-taller p { color: #eef2ff; }
body.es-noche .p-taller-mesa { background: radial-gradient(circle, #2d3577 0%, #1b2152 70%); border-color: #3b4590; }
body.es-noche .c-tabla td { border-bottom-color: #2d3577; }
body.es-noche .c-tabla tbody th, body.es-noche .c-tabla td { color: #eef2ff; }
body.es-noche .c-tabla td.es-barato { background: #174a35; }
body.es-noche .c-tabla td.es-mesa { background: #4a3f12; }
body.es-noche .c-tabla td.es-nada { color: #4a5394; }
body.es-noche .c-tabla td small { color: #ffd76a; }
body.es-noche .c-producto-cabeza small { color: #ffd76a; }
body.es-noche .p-final-lista li { background: #262d6b; color: #eef2ff; }
body.es-noche .p-final-lista li:first-child { background: #3a3266; }
body.es-noche .p-final-puesto { background: #1b2152; color: #eef2ff; }
body.es-noche .p-jugadores > .w-cabeza { background: rgba(5, 8, 34, 0.55); }
body.es-noche .p-iconos { background: rgba(5, 8, 34, 0.45); }
body.es-noche .a-interruptor span { background: #3b4590; }
body.es-noche .p-jug-datos b, body.es-noche .p-jug-nombre { color: #eef2ff; }
body.es-noche .p-mochila-dinero, body.es-noche .p-dem-precio, body.es-noche .p-num, body.es-noche .p-jug.es-turno::after, body.es-noche .p-etapas li.es-ahora::before { color: var(--tinta); }
body.es-noche .p-jugadores > .w-cabeza .w-plegar, body.es-noche .p-mochila-caja > .w-cabeza .w-plegar, body.es-noche .p-panel-plegar { color: #eef2ff; background: #1b2152; }
/* De noche, las orillas de la pantalla se oscurecen un poco (la viñeta va sobre el tablero y bajo los paneles) */
.p-vineta { display: none; }
body.es-noche .p-vineta { display: block; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 55%, rgba(3, 5, 26, 0.5) 100%); }
@media (max-width: 820px) { body.es-noche .p-vineta { grid-row: 3; grid-column: 1; position: relative; } }


/* Las piezas de una receta con su nombre (U.pieza): la que tienes, verde con su marca; la que falta, punteada y con
   dónde está más barata. */
.p-receta-piezas { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 1px; }
.p-pieza { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 2px 3px; font: 700 12px/1.1 'Rubik', sans-serif; color: var(--tinta); background: #fff; border: 2px solid var(--tinta); border-radius: 999px; }
.p-pieza > svg:first-child, .p-pieza > span:first-child { flex: none; }
.p-pieza span { display: grid; }
.p-pieza small { font: 600 10px 'Rubik', sans-serif; color: var(--suave); }
.p-pieza.es-tiene { background: #dff7e8; }
.p-pieza.es-tiene > svg:last-child { width: 14px; height: 14px; fill: none; stroke: #10834a; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.p-pieza.es-falta { background: #fff4f6; border-style: dashed; border-color: #d8243f; }
/* La receta en cada carta de demanda: las piezas que tienes, encendidas. */
.p-dem-receta { display: flex; justify-content: center; gap: 3px; margin: 1px 0 2px; }
.p-dem-receta span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; opacity: 0.4; filter: grayscale(0.6); }
.p-dem-receta span.es-tiene { opacity: 1; filter: none; background: #dff7e8; box-shadow: inset 0 0 0 1.5px #10834a; }
/* El nombre debajo de cada cosa de la mochila. */
.p-mochila-cosa { width: auto; display: inline-flex; gap: 4px; padding: 0 10px 0 2px; }
.p-mochila-cosa small { font: 700 11.5px/1 'Rubik', sans-serif; color: var(--tinta); white-space: nowrap; }
body.es-noche .p-mochila-cosa small { color: #eef3ff; }
body.es-noche .p-pieza { color: var(--tinta); }
@media (max-width: 820px) { .p-mochila-cosa { width: 28px; padding: 0; display: grid; } .p-mochila-cosa small { display: none; } }

/* Las piezas y productos de cada rival en su tarjeta (compras visibles). */
.p-jug-cosas { display: flex; flex-wrap: wrap; gap: 3px; }
.p-jug-cosa { position: relative; display: grid; place-items: center; width: 24px; height: 24px; background: #fff; border: 2px solid var(--tinta); border-radius: 7px; }
.p-jug-cosa.es-producto { background: #fff8d6; }
.p-jug-cosa i { position: absolute; right: -5px; bottom: -5px; min-width: 14px; padding: 0 3px; font: 400 10px/13px 'Lilita One', sans-serif; font-style: normal; text-align: center; color: #fff; background: var(--tinta); border-radius: 999px; }
.p-jugadores.es-plegado .p-jug-cosas { display: none; }
body.es-noche .p-jug-cosa { background: #2d3577; }
body.es-noche .p-jug-cosa.es-producto { background: #3a3266; }

/* El tablero sereno (28 oct): a los amigos de Luis los mareaba tanto color junto. Es una opción de los ajustes; el
   colorido sigue siendo el de siempre. El tablero en 3D y los paneles bajan su saturación (los colores siguen ahí,
   apagados, para distinguir almacenes, fábricas y tiendas) y el fondo queda liso, sin rayos ni brillos. */
body.es-sereno.n-vivo { background: #46506e; }
body.es-sereno.n-vivo::before, body.es-sereno.n-vivo::after, body.es-sereno .n-brillos, body.es-sereno .p-vineta { display: none; }
body.es-sereno .p-lienzo { filter: saturate(0.3) contrast(0.95) brightness(1.04); }
body.es-sereno .p-jugadores, body.es-sereno .p-abajo, body.es-sereno .p-panel, body.es-sereno .p-iconos, body.es-sereno .p-arriba, body.es-sereno .p-capa > * { filter: saturate(0.42); }
body.es-sereno.es-noche.n-vivo { background: #151a30; }

/* La letra de la banda de cada carta de demanda: oscura y sin borde en todas, sobre el color de su tienda, para que el
   contraste sea el mismo en las cuatro (28 oct: con letra blanca, unas se leían fuerte y otras apagadas). */
.p-dem-banda { color: var(--tinta); -webkit-text-stroke: 0; }

/* La carta sorpresa con contraste parejo de día y de noche (28 oct): el rótulo de arriba en tinta sobre el verde o el
   rojo, y el resultado en una pastilla clara con letra oscura. */
.p-sorpresa-cabeza small { color: var(--tinta); }
.p-sorpresa .p-sorpresa-resultado { display: inline-block; margin: 10px 18px 0; padding: 5px 14px; font-size: 15px; font-weight: 800; color: var(--tinta); background: #dff7e8; border: 2.5px solid #10834a; border-radius: 999px; }
.p-sorpresa .p-sorpresa-resultado.es-mala { background: #ffe3e8; border-color: #d8243f; }
body.es-noche .p-sorpresa .p-sorpresa-resultado { color: var(--tinta); }
body.es-noche .p-sorpresa .p-sorpresa-quien { color: #c9d1f7; }