@font-face { font-family: 'Lucid Stakes'; font-weight: 400; src: url(fonts/lucid-stakes-400.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Lucid Stakes'; font-weight: 700; src: url(fonts/lucid-stakes-700.woff2) format('woff2'); font-display: swap; }

:root {
  --fondo: #120a22; --panel: #1d1236; --borde: #3a2766; --texto: #efe6ff; --suave: #a99cc9;
  --oro: #f2c94c; --rojo: #ff8a7a; --bien: #8be36a;
}
* { box-sizing: border-box; }
/* La partida nunca pasa del tamaño de la ventana: no hay scroll. */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 22px/1.3 'Lucid Stakes', 'Courier New', monospace; -webkit-text-size-adjust: 100%; touch-action: manipulation; }
[hidden] { display: none !important; }
/* El texto no se selecciona (ni con el mouse ni con una pulsación larga en el celular, que abre el menú de copiar y buscar); los campos de texto sí. */
html, body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
input, textarea, select { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
img, canvas { -webkit-user-drag: none; }
.pantalla { height: 100dvh; max-width: 1200px; margin: 0 auto; }
.dorado { color: var(--oro); font-weight: 700; }
.chico { color: var(--suave); font-size: 17px; }
.error { color: var(--rojo); min-height: 1.3em; margin: 8px 0; }
.etiqueta { display: block; color: var(--suave); font-size: 17px; margin-bottom: 6px; }
.fila { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- la entrada: centrada, en dos columnas, y escalada para que entre siempre en la ventana (sin barra lateral) ---------- */
#inicio.pantalla, #home.pantalla { --v: calc(min(100vw / 1000, 100dvh / 640, 1.25px) * var(--k, 1)); max-width: none; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: calc(var(--v) * 16); padding-top: calc(var(--v) * 16 + env(safe-area-inset-top, 0px)); }
.inicioCaja { width: calc(var(--v) * 760); max-width: 100%; text-align: center; }
#inicio h1.titulo { font-size: calc(var(--v) * 66); font-weight: 700; color: var(--oro); margin: 0; text-shadow: calc(var(--v) * 4) calc(var(--v) * 4) 0 #000; line-height: 1.1; }
#inicio .sub { color: var(--suave); font-size: calc(var(--v) * 22); margin: calc(var(--v) * 4) 0 calc(var(--v) * 22); }
#inicio .panel { background: var(--panel); border: 2px solid var(--borde); padding: calc(var(--v) * 16); text-align: left; }
#inicio .panelApodo { margin-bottom: calc(var(--v) * 14); }
#inicio .dosCol { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--v) * 14); align-items: stretch; }
#inicio .dosCol .panel { display: flex; flex-direction: column; gap: calc(var(--v) * 10); }
#inicio label { display: block; color: var(--suave); font-size: calc(var(--v) * 17); }
#inicio input, #inicio select { width: 100%; font: inherit; font-size: calc(var(--v) * 22); color: var(--texto); background: var(--fondo); border: 2px solid var(--borde); padding: calc(var(--v) * 8) calc(var(--v) * 10); margin: 0; }
#inicio input.codigo { text-transform: uppercase; letter-spacing: calc(var(--v) * 6); font-size: calc(var(--v) * 30); text-align: center; }
#inicio .nota { color: var(--suave); font-size: calc(var(--v) * 16); margin: 0; }
#inicio .vb { align-self: flex-start; max-width: 100%; }
.extrasInicio { display: flex; gap: calc(var(--v) * 10); justify-content: center; flex-wrap: wrap; margin: calc(var(--v) * 14) auto 0; }
#bInstalar, #bStats, #bAyudaInicio { display: block; margin: 0; }
#inicio .vb canvas { max-width: 100%; height: auto; }
#inicio .error { font-size: calc(var(--v) * 18); text-align: center; }

.vb { background: none; border: 0; padding: 0; margin: -6px; cursor: pointer; line-height: 0; display: inline-block; -webkit-tap-highlight-color: transparent; }
.vb:disabled { cursor: default; }
.vb canvas { display: block; }
.vb:focus-visible { outline: 2px dashed var(--oro); outline-offset: 0; }

/* ---------- la partida: cabecera, mesa y barra de acciones llenan justo la ventana ---------- */
#mesa.pantalla { display: flex; flex-direction: column; gap: 8px; max-width: none; padding: calc(8px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-left, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)); overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.cabecera { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 40px; padding: 0 6px; }
.zonaMesa { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; container-type: size; }
/* el hexágono es el más grande que entra en el espacio libre */
.mesaHex { position: relative; width: min(100cqw, 100cqh * 1.12, 1200px); aspect-ratio: 1.12 / 1; container-type: inline-size; }
#felt { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.mesaHex > :not(#felt) { position: absolute; z-index: 1; }
#puestos { inset: 0; pointer-events: none; }
.puesto { position: absolute; pointer-events: auto; }

.rotulo { top: 4%; left: 50%; transform: translateX(-50%); text-align: center; white-space: nowrap; }
.rotulo b { display: block; font-size: clamp(14px, 3.4cqw, 30px); color: #fff3c4; text-shadow: 2px 2px 0 rgba(0,0,0,.55); letter-spacing: 1px; }
.rotulo span { display: block; font-size: clamp(9px, 1.8cqw, 16px); color: #8fd1ad; }
.crupier { top: 15%; left: 50%; transform: translateX(-50%); text-align: center; }
.crupier .etiqueta { color: #bfe6cf; font-size: clamp(11px, 2cqw, 18px); margin-bottom: 4px; }
.mano { position: relative; display: inline-block; }
.cartas { display: flex; gap: 6px; justify-content: center; flex-wrap: nowrap; min-height: 10px; }
.cv { width: var(--cw, 70px); aspect-ratio: 96 / 134; height: auto; filter: drop-shadow(3px 3px 0 rgba(0,0,0,.5)); }
.crupier .cv, .yo .cv { --cw: clamp(34px, 8.4cqw, 76px); }
.zapato { position: absolute; left: calc(100% + 18px); top: 0; width: clamp(24px, 5.4cqw, 48px); aspect-ratio: 96 / 134; }
.farolin { position: absolute; right: calc(100% + 18px); top: -4px; width: clamp(34px, 7.4cqw, 66px); }
.farolin canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; filter: drop-shadow(3px 3px 0 rgba(0,0,0,.5)); transform-origin: 50% 100%; animation: flota 2.6s ease-in-out infinite; }
.farolin[data-expresion="susto"] canvas { animation: salto .5s ease-out 1, tiembla .12s linear .5s 12; }
.farolin[data-expresion="risa"] canvas, .farolin[data-expresion="guino"] canvas { animation: rebota .32s ease-in-out infinite; }
.farolin[data-expresion="triste"] canvas { animation: none; transform: translateY(2px) rotate(-4deg); }
@keyframes flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes salto { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(-10px) scale(1.12); } 100% { transform: translateY(0) scale(1); } }
@keyframes tiembla { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
@keyframes rebota { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .farolin canvas { animation: none !important; } }
.zapato canvas { position: absolute; left: 0; top: 0; width: 100%; height: auto; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.5)); }
.centro { top: 36.5%; left: 50%; transform: translateX(-50%); width: 44%; text-align: center; }
.estado { min-height: 1.3em; color: #fff3c4; font-size: clamp(11px, 2.1cqw, 19px); }
.barra { height: 6px; background: rgba(0,0,0,.35); margin-top: 4px; }
.barra div { height: 100%; width: 0; background: var(--oro); }

.yo, .puesto { display: flex; flex-direction: column; align-items: center; }
.yo { top: 46%; left: 50%; transform: translateX(-50%); text-align: center; min-width: 30%; padding: 6px 12px; }
.yo.turno, .puesto.turno { background: rgba(255, 224, 120, .16); box-shadow: 0 0 0 2px rgba(255, 243, 196, .55); }
.nombreFila { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; max-width: 100%; }
.nombre { min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(12px, 2.3cqw, 21px); }
.yo .nombre { color: var(--oro); }
.datos { color: #bfe6cf; font-size: clamp(10px, 1.8cqw, 16px); white-space: nowrap; }
.yo .cartas { margin: 6px 0; }
.puesto { transform: translate(-50%, -50%); text-align: center; width: 22%; min-width: 84px; padding: 4px; }
.puesto .cartas { order: -1; gap: 3px; margin-bottom: 3px; }
.puesto .cv { --cw: clamp(20px, 4.6cqw, 42px); filter: drop-shadow(2px 2px 0 rgba(0,0,0,.5)); }
.puesto.off { opacity: .5; }
.puesto .mas { display: none; width: clamp(28px, 6cqw, 52px); aspect-ratio: 1; margin: 0 auto; background: rgba(0,0,0,.2); color: rgba(255,255,255,.55); font-size: clamp(16px, 3.6cqw, 32px); line-height: 1.6; }
.puesto.vacio { opacity: .5; }
.puesto.vacio .mas { display: block; }
.puesto.vacio > :not(.mas) { display: none; }
.linea:empty { display: none; }
.estadoTxt { color: #bfe6cf; font-size: clamp(10px, 1.8cqw, 16px); white-space: nowrap; }
.ayuda { color: var(--oro); font-size: clamp(10px, 1.7cqw, 15px); }
.neto { font-weight: 700; font-size: clamp(13px, 2.8cqw, 24px); text-shadow: 2px 2px 0 rgba(0,0,0,.6); }
.neto.sube { color: var(--bien); } .neto.baja { color: var(--rojo); } .neto.cero { color: #fff3c4; }
.puesto { cursor: pointer; }
.puesto.sel { outline: 2px solid var(--oro); outline-offset: 1px; }
.donarBtn { position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); z-index: 8; }
.donarBtn:empty { display: none; }

.fichaFila { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.fichaC { width: var(--chip, 26px); height: auto; image-rendering: pixelated; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.5)); }
.yo .fichaC { --chip: clamp(24px, 4.2cqw, 38px); }
.puesto .fichaC { --chip: clamp(16px, 3cqw, 26px); }
.monto { color: var(--oro); font-weight: 700; font-size: clamp(11px, 2cqw, 18px); }

/* ---------- la barra de acciones (de alto fijo, así la mesa no salta entre las fases) ---------- */
.acciones { flex: none; display: flex; flex-wrap: nowrap; gap: 12px; justify-content: center; align-items: center; min-height: 82px; position: relative; }
.acciones .vb { flex: 0 1 auto; min-width: 0; }
.acciones .vb canvas { max-width: 100%; height: auto; }
.fichasSel { display: flex; gap: 8px; align-items: flex-end; flex: 0 1 auto; }
.fsel { background: rgba(255,255,255,.04); border: 2px solid transparent; padding: 4px 6px 2px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; font: inherit; color: var(--texto); }
.fsel .fichaC { --chip: 36px; }
.fsel.on { border-color: var(--oro); background: rgba(242, 201, 76, .14); transform: translateY(-3px); }
.fsel:disabled { opacity: .3; cursor: default; }
.fsel .monto { font-size: 14px; }
.aviso { position: absolute; left: 0; right: 0; bottom: -2px; text-align: center; color: var(--rojo); font-size: 14px; pointer-events: none; }

.modal { position: fixed; inset: 0; z-index: 40; background: rgba(6,3,14,.8); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal .caja { background: var(--panel); border: 2px solid var(--borde); padding: 16px; width: min(420px, 100%); max-height: 90dvh; overflow: auto; }
.cajaDonar { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cajaDonar .etiqueta { font-size: 19px; color: #fff3c4; margin: 0; }
.donarCifra canvas { max-width: 100%; height: auto; }
.donarPaso, .donarBotones { display: flex; gap: 14px; justify-content: center; align-items: center; }
.donarRapido { flex-wrap: wrap; justify-content: center; max-width: 100%; }
.fsel.todo { min-width: 56px; justify-content: center; align-self: stretch; }
.vuelo { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; display: flex; align-items: center; gap: 4px; }
.vuelo .fichaC { --chip: 34px; }
.vuelo .monto { font-size: 20px; text-shadow: 2px 2px 0 #000; }

/* ---------- habilidades, objetos y tienda ---------- */
.tile { width: var(--tile, 34px); height: var(--tile, 34px); image-rendering: pixelated; display: block; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.5)); }
.tileBtn { background: none; border: 0; padding: 0; cursor: pointer; line-height: 0; }
.tileBtn:hover .tile { filter: drop-shadow(2px 2px 0 rgba(0,0,0,.5)) brightness(1.25); }
.tileBtn.efecto .tile { animation: pulso 1.2s ease-in-out infinite; }
@keyframes pulso { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255,120,90,0)) brightness(1); } 50% { filter: drop-shadow(0 0 6px rgba(255,120,90,.95)) brightness(1.3); } }
.inv { display: flex; gap: 4px; justify-content: center; align-items: center; flex-wrap: nowrap; margin-top: 3px; }
.inv:empty { display: none; }
.inv .sep { width: 6px; }
.yo .inv { --tile: clamp(26px, 4.2cqw, 38px); margin-top: 6px; }
.puesto .inv { --tile: clamp(15px, 2.7cqw, 24px); }
.modalAlto { z-index: 50; }
.cajaObjeto, .cajaTienda { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cajaObjeto .tile { --tile: 64px; }
.cajaObjeto h3, .cajaTienda h3 { margin: 0; font-size: 22px; color: #fff3c4; }
.rareza { font-size: 15px; }
.rareza.comun { color: #d6cde6; } .rareza.raro { color: #8ed0ff; } .rareza.epico { color: var(--oro); }
.descripcion { color: var(--texto); font-size: 17px; line-height: 1.35; max-width: 340px; }
.nota2 { color: var(--suave); font-size: 15px; }
.objetivos { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.modal .cajaTienda { width: min(580px, 100%); }
.modal .cajaObjeto { width: min(380px, 100%); }
.cajaTienda .barra { width: 100%; }
.ofertas { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.oferta { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; text-align: left; background: rgba(255,255,255,.04); padding: 8px; border: 2px solid var(--borde); }
.oferta .tile { --tile: 48px; }
.oferta .nom { font-weight: 700; font-size: 18px; }
.oferta .desc { font-size: 14px; color: var(--suave); line-height: 1.3; }
.oferta .precio { color: var(--oro); font-weight: 700; font-size: 18px; text-align: center; margin-bottom: 4px; }
.oferta.comprada { opacity: .5; }
.misCosas { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; --tile: 40px; }

.parlante { width: 44px; height: auto; image-rendering: pixelated; display: block; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.5)); }
#bSonido:hover .parlante { filter: drop-shadow(2px 2px 0 rgba(0,0,0,.5)) brightness(1.3); }
#bSonido { padding: 4px; }
/* ---------- ranking y final de la partida ---------- */
#bRanking { padding: 4px; }
#bRanking:hover .parlante { filter: drop-shadow(2px 2px 0 rgba(0,0,0,.5)) brightness(1.3); }
.modal .cajaRanking { width: min(480px, 100%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cajaRanking h3 { margin: 0; font-size: 22px; color: #fff3c4; }
.filas { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.pos { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; text-align: left; background: rgba(255,255,255,.04); border: 2px solid transparent; padding: 6px 8px; position: relative; }
.pos.lider { border-color: var(--oro); background: rgba(242,201,76,.1); }
.pos.soy { outline: 2px dashed rgba(242,201,76,.5); outline-offset: -2px; }
.pos.off { opacity: .55; }
.pos .n { font-weight: 700; color: var(--suave); font-size: 20px; }
.pos.lider .n { color: var(--oro); }
.pos .nom { font-weight: 700; font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos .cant { font-weight: 700; color: var(--oro); font-size: 18px; }
.pos .barra { grid-column: 2 / -1; height: 8px; margin: 0; background: rgba(0,0,0,.45); }
.pos .barra div { background: linear-gradient(90deg, #b8861b, var(--oro)); }
.nota3 { color: var(--suave); font-size: 15px; }

#final { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#final .rfondo { background: rgba(6, 3, 14, .9); }
.rfin { max-height: 100dvh; overflow-y: auto; gap: 10px; width: min(560px, 100%); }
.rfin .rsub { margin: 0; }
.podio { display: flex; align-items: flex-end; justify-content: center; gap: 8px; width: 100%; margin: 4px 0; }
.escalon { display: flex; flex-direction: column; align-items: center; width: 31%; min-width: 0; }
.escalon .quien { font-weight: 700; font-size: 18px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.escalon .cuanto { color: var(--oro); font-size: 16px; }
.escalon .bloque { width: 100%; display: flex; align-items: flex-start; justify-content: center; padding-top: 6px; font-weight: 700; font-size: 26px; color: #1a1030; border: 3px solid #000; box-shadow: inset 4px 4px 0 rgba(255,255,255,.35), inset -4px -4px 0 rgba(0,0,0,.25); }
.escalon.p1 .bloque { height: 110px; background: var(--oro); }
.escalon.p2 .bloque { height: 78px; background: #d6d8e6; }
.escalon.p3 .bloque { height: 56px; background: #d98c4c; }
.escalon.p1 .quien { color: #fff3c4; font-size: 20px; }
.resto { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; color: var(--suave); font-size: 15px; }
.premios { width: 100%; display: flex; flex-direction: column; gap: 4px; background: rgba(0,0,0,.4); border: 2px solid var(--borde); padding: 8px 10px; text-align: left; }
.premios div { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; }
.premios .t { color: var(--suave); }
.premios .q { color: #fff3c4; font-weight: 700; text-align: right; }
.botonesFin { display: flex; gap: 14px; justify-content: center; margin-top: 4px; flex-wrap: wrap; }
@media (max-width: 700px) { .rfin { gap: 6px; } .escalon.p1 .bloque { height: 84px; } .escalon.p2 .bloque { height: 60px; } .escalon.p3 .bloque { height: 42px; } .escalon .quien { font-size: 15px; } .premios div { font-size: 13px; } .pos .nom, .pos .cant { font-size: 16px; } }

.vuelo.robo .monto { color: var(--rojo); }
.cv.espiada { opacity: .78; outline: 2px dashed var(--oro); outline-offset: -2px; }

/* ---------- el cartel grande al terminar la ronda ---------- */
#resultado { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; }
.rfondo { position: absolute; inset: 0; background: rgba(6, 3, 14, .84); }
.rluz { position: absolute; inset: 0; pointer-events: none; }
.rcentro { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 16px; }
.rcentro canvas { max-width: 94vw; height: auto; }
.rsub { color: #d9cfff; font-size: clamp(14px, 3.4vw, 22px); }
.rsub.grande { font-size: clamp(18px, 4.6vw, 30px); color: #fff3c4; }
.rdetalle { display: flex; flex-direction: column; gap: 6px; width: min(440px, 92vw); background: rgba(0,0,0,.4); border: 2px solid var(--borde); padding: 10px 12px; }
.rdet { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; text-align: left; }
.rdet .tile { --tile: 28px; }
.rdet .rnom { font-size: 16px; color: var(--texto); }
.rdet .rnota { font-size: 13px; color: var(--suave); }
.rdet .rval { font-weight: 700; font-size: 20px; text-shadow: 2px 2px 0 rgba(0,0,0,.6); }
.rval.sube { color: var(--bien); } .rval.baja { color: var(--rojo); } .rval.cero { color: #fff3c4; }
.rdet.base .rnom { color: var(--suave); }
.rdet.total { border-top: 2px solid var(--borde); padding-top: 6px; }
.rdet.total .rnom { font-weight: 700; color: #fff3c4; }
@media (max-width: 700px) { .rdet .rnom { font-size: 14px; } .rdet .rval { font-size: 18px; } .rdetalle { padding: 8px 10px; gap: 4px; } }
.rconf { position: absolute; pointer-events: none; z-index: 2; box-shadow: inset -2px -2px 0 rgba(0,0,0,.25); }

/* ---------- celular (columna, sin hexágono): todo se mide con --u, que escala con el ancho y el alto de la pantalla (pensado para 375 x 812) ---------- */
@media (max-width: 700px) {
  .pantalla { --u: calc(min(100vw / 375, 100dvh / 812) * var(--k, 1)); }
  #inicio.pantalla, #home.pantalla { --v: calc(min(100vw / 375, 100dvh / 700) * var(--k, 1)); }
  .inicioCaja { width: 100%; }
  #inicio .dosCol { grid-template-columns: 1fr; }
  #inicio .nota { display: none; }
  #inicio .sub { display: none; }
  #inicio h1.titulo { font-size: calc(var(--v) * 46); margin-bottom: calc(var(--v) * 12); }
  #inicio .panel { padding: calc(var(--v) * 10); }
  #inicio .panelApodo { margin-bottom: calc(var(--v) * 10); }
  #inicio .dosCol { gap: calc(var(--v) * 10); }
  #inicio .dosCol .panel { gap: calc(var(--v) * 6); }
  #inicio input, #inicio select { padding: calc(var(--v) * 6) calc(var(--v) * 8); font-size: calc(var(--v) * 20); }
  #inicio input.codigo { font-size: calc(var(--v) * 26); }
  .cabecera { min-height: calc(var(--u) * 40); }
  .datosSala .chico { font-size: calc(var(--u) * 15); }
  #mFicha { display: none; }
  .cabecera .fila { flex-wrap: nowrap; gap: calc(var(--u) * 6); align-items: center; }
  .parlante { width: calc(var(--u) * 28); }
  .datosSala b { font-size: calc(var(--u) * 20); }

  .zonaMesa { container-type: normal; align-items: stretch; }
  .mesaHex { width: 100%; height: 100%; aspect-ratio: auto; container-type: normal; display: flex; flex-direction: column; justify-content: space-between; gap: calc(var(--u) * 6);
    padding: calc(var(--u) * 20) calc(var(--u) * 12) calc(var(--u) * 14); overflow: hidden; }
  .mesaHex > :not(#felt) { position: relative; left: auto; top: auto; transform: none; width: auto; }
  .rotulo { display: none; }
  .crupier .etiqueta { font-size: calc(var(--u) * 13); margin-bottom: 2px; }
  .crupier .cv { --cw: calc(var(--u) * 52); }
  .zapato { width: calc(var(--u) * 26); left: calc(100% + var(--u) * 12); }
  .farolin { width: calc(var(--u) * 46); right: calc(100% + var(--u) * 12); }
  .estado { font-size: calc(var(--u) * 14); }
  .barra { height: calc(var(--u) * 5); }

  .yo { padding: calc(var(--u) * 6) calc(var(--u) * 10); min-width: 0; }
  .yo .nombre { font-size: calc(var(--u) * 17); }
  .yo .datos { font-size: calc(var(--u) * 13); }
  .yo .cv { --cw: calc(var(--u) * 62); }
  .yo .cartas { margin: calc(var(--u) * 4) 0; }
  .yo .fichaC { --chip: calc(var(--u) * 26); }
  .monto { font-size: calc(var(--u) * 14); }
  #puestos { position: relative; inset: auto; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 5); pointer-events: auto; }
  .puesto { position: relative; left: auto !important; top: auto !important; transform: none; width: auto; min-width: 0; padding: calc(var(--u) * 4) calc(var(--u) * 6); background: rgba(0,0,0,.2);
    display: grid; grid-template-columns: 1fr auto; grid-template-areas: "nom dat" "car fic" "lin inv"; align-items: center; column-gap: calc(var(--u) * 6); text-align: left; }
  .puesto.vacio { display: none; }
  .donarBtn { top: 2px; right: 2px; bottom: auto; left: auto; transform: none; }
  .puesto .nombreFila { display: contents; }
  .puesto .nombre { grid-area: nom; font-size: calc(var(--u) * 14); }
  .puesto .inv { grid-area: inv; justify-content: flex-end; --tile: calc(var(--u) * 16); margin-top: 0; gap: calc(var(--u) * 2); }
  .yo .inv { --tile: calc(var(--u) * 28); }
  .puesto .datos { grid-area: dat; font-size: calc(var(--u) * 12); text-align: right; }
  .puesto .cartas { grid-area: car; order: 0; margin: 0; justify-content: flex-start; gap: calc(var(--u) * 3); }
  .puesto .fichaFila { grid-area: fic; justify-self: end; }
  .puesto .linea { grid-area: lin; }
  .puesto .cv { --cw: calc(var(--u) * 24); }
  .puesto .fichaC { --chip: calc(var(--u) * 17); }
  .puesto .monto { font-size: calc(var(--u) * 12); }
  .puesto .ayuda, .puesto .estadoTxt { font-size: calc(var(--u) * 12); }
  .neto { font-size: calc(var(--u) * 16); } .yo .neto { font-size: calc(var(--u) * 20); }
  /* la línea de abajo mide siempre lo mismo (texto de estado o monto): así al terminar la ronda la mesa no crece ni se achica */
  .puesto .linea { line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: clip; min-width: 0; }
  .puesto .neto { font-size: calc(var(--u) * 14); }
  .estado { white-space: nowrap; overflow: hidden; }
  .puesto > * { min-width: 0; }

  .acciones { gap: calc(var(--u) * 10); min-height: calc(var(--u) * 84); }
  .fsel { padding: 3px 5px 1px; } .fsel .fichaC { --chip: calc(var(--u) * 32); } .fsel .monto { font-size: calc(var(--u) * 13); }
  .fichasSel { gap: calc(var(--u) * 6); }
  .acciones .vb:disabled { display: none; }   /* (solo se ve lo que se puede hacer ahora) */
}

/* ---------- ventana baja y ancha (celular acostado, ventanas chatas): la mesa a la izquierda, y a la derecha la cabecera y las acciones en columna ---------- */
@media (max-height: 540px) and (min-width: 701px) {
  #mesa.pantalla { display: grid; grid-template-columns: minmax(0, 1fr) 200px; grid-template-rows: auto 1fr; grid-template-areas: "mesa cab" "mesa acc"; gap: 6px 10px; padding: 6px 10px; }
  .zonaMesa { grid-area: mesa; height: 100%; }
  .cabecera { grid-area: cab; flex-direction: column; align-items: flex-end; gap: 4px; min-height: 0; padding: 0; }
  .cabecera .fila { flex-wrap: nowrap; justify-content: flex-end; gap: 6px; }
  .acciones { grid-area: acc; flex-direction: column; flex-wrap: nowrap; min-height: 0; overflow: hidden; gap: 6px; }
  .acciones .vb:disabled { display: none; }
  .fichasSel { flex-wrap: wrap; justify-content: center; }
  .fsel .fichaC { --chip: 28px; } .fsel .monto { font-size: 12px; }
  /* la mesa es chica: los tamaños siguen al ancho de la mesa, sin los mínimos */
  .rotulo span { display: none; }
  .rotulo b { font-size: max(9px, 3cqw); }
  .crupier .etiqueta { font-size: max(8px, 2cqw); }
  .crupier .cv, .yo .cv { --cw: 8.6cqw; }
  .farolin { width: 6.6cqw; right: calc(100% + 1.6cqw); }
  .puesto .cv { --cw: 4.8cqw; }
  .nombre { font-size: max(8px, 2.4cqw); }
  .datos, .estadoTxt, .ayuda, .estado, .monto { font-size: max(8px, 1.9cqw); }
  .yo .fichaC { --chip: 4cqw; } .puesto .fichaC { --chip: 3cqw; }
  .puesto { min-width: 0; width: 24%; padding: 2px; }
  .yo { padding: 3px 8px; }
}

/* ---------- reacciones rápidas ---------- */
#bReaccion { padding: 4px; }
#bReaccion:hover .parlante { filter: drop-shadow(2px 2px 0 rgba(0,0,0,.5)) brightness(1.3); }
.reacciones { position: fixed; top: 56px; right: 12px; z-index: 45; display: grid; grid-template-columns: repeat(3, auto); gap: 6px; padding: 8px; background: rgba(14,10,28,.95); border: 2px solid var(--borde); box-shadow: 4px 4px 0 rgba(0,0,0,.5); }
.reacciones[hidden] { display: none; }
.reacciones .reac { padding: 4px 6px; min-width: 40px; display: flex; align-items: center; justify-content: center; }
.reacciones .reac canvas { max-width: 56px; height: auto; image-rendering: pixelated; }
.globoReac { position: fixed; z-index: 75; pointer-events: none; filter: drop-shadow(3px 3px 0 rgba(0,0,0,.5)); }

/* ---------- evento de mesa ---------- */
.cartelera { top: 3%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 90%; }
.cartelera[hidden] { display: none; }
.evento { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; background: rgba(14,10,28,.9); border: 2px solid var(--oro); box-shadow: 3px 3px 0 rgba(0,0,0,.5); text-align: left; max-width: 90%; --tile: clamp(26px, 4.4cqw, 40px); }
.evento[hidden] { display: none; }
.evento .evTxt b { display: block; color: var(--oro); font-size: clamp(11px, 2cqw, 18px); }
.evento .evTxt span { display: block; color: #cfd8e8; font-size: clamp(9px, 1.5cqw, 14px); line-height: 1.2; }
.mesaHex.hayEvento .rotulo { visibility: hidden; }
@media (max-width: 700px) {
  .cartelera { transform: none; align-self: center; gap: calc(var(--u) * 3); }
  .evento { transform: none; align-self: center; gap: calc(var(--u) * 6); padding: calc(var(--u) * 3) calc(var(--u) * 8) calc(var(--u) * 3) calc(var(--u) * 3); --tile: calc(var(--u) * 30); }
  .evento .evTxt b { font-size: calc(var(--u) * 13); }
  .evento .evTxt span { font-size: calc(var(--u) * 10); }
}

/* ---------- estadísticas ---------- */
#stats { z-index: 80; }
.statFilas { width: 100%; display: flex; flex-direction: column; gap: 2px; }
.statFila { display: flex; justify-content: space-between; gap: 12px; padding: 3px 6px; background: rgba(255,255,255,.04); font-size: 15px; }
.statFila b { color: var(--oro); }
.statUlt { width: 100%; font-size: 13px; color: var(--suave); text-align: left; display: flex; flex-direction: column; gap: 2px; }
.statUlt span { color: #fff3c4; font-size: 15px; }

#imagen { z-index: 90; }
.imgRanking { max-width: 100%; max-height: 60vh; width: auto; height: auto; image-rendering: pixelated; border: 2px solid var(--borde); }

/* ---------- ayuda ---------- */
#bAyuda { padding: 4px; }
#bAyuda:hover .parlante { filter: drop-shadow(2px 2px 0 rgba(0,0,0,.5)) brightness(1.3); }
#ayuda { z-index: 95; }
.cajaAyuda { width: min(560px, 100%); max-height: 92vh; display: flex; flex-direction: column; }

/* láminas de la ayuda */
.cajaAyuda { width: min(560px, 100%); max-height: 94vh; display: flex; flex-direction: column; gap: 8px; }
.ayCuerpo { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 280px; justify-content: space-between; touch-action: pan-y; }
.ayTitulo { display: flex; justify-content: center; }
.ayRot { max-width: 100%; height: auto; image-rendering: pixelated; }
.ayEscena { width: 100%; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.ayPie { margin: 0; text-align: center; font-size: 14px; line-height: 1.35; color: #d8def0; max-width: 46ch; }
.ayFila { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.ayFila.chica .cv { --cw: 30px; }
.ayApila { display: flex; flex-direction: column; gap: 10px; align-items: center; width: 100%; }
.ayMano { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ayMano .cv { --cw: 46px; }
.ayCartas { display: flex; }
.ayNombre { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--suave); letter-spacing: 1px; }
.ayFarolin { width: 28px; height: auto; image-rendering: pixelated; }
.ayTotal { font-weight: 700; font-size: 16px; color: #fff3c4; min-width: 28px; text-align: center; padding: 1px 8px; background: rgba(255,255,255,.08); }
.ayTotal.ok { color: #8be36a; } .ayTotal.pas { color: #ff8a7a; }
.ayVs { color: var(--suave); font-weight: 700; font-size: 14px; }
.ayFlecha { color: var(--oro); font-size: 22px; font-weight: 700; }
.ayCol { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ayAyuda { font-size: 12px; color: var(--suave); text-align: center; max-width: 130px; line-height: 1.25; }
.ayBoton { pointer-events: none; }
.ayRes { display: flex; align-items: center; gap: 6px; }
.ayRes .fichaC { --chip: 26px; }
.ayChip { display: flex; }
.ayFicha { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; }
.ayMeta { display: flex; align-items: center; gap: 10px; width: 100%; }
.ayMetaCol { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 70px; }
.ayMetaCol b { color: var(--oro); font-size: 20px; } .ayMetaCol span { font-size: 12px; color: var(--suave); }
.ayMetaCol .fichaC { --chip: 40px; } .ayMetaCol .parlante { width: 56px; }
.ayBarra { flex: 1; height: 14px; background: rgba(0,0,0,.45); border: 2px solid var(--borde); position: relative; }
.ayBarraLlena { width: 4%; height: 100%; background: linear-gradient(90deg, #b8861b, var(--oro)); }
.aySeat { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 12px; background: rgba(255,255,255,.06); border: 2px solid var(--borde); font-size: 13px; }
.aySeat .fichaC { --chip: 30px; }
.ayOferta { display: flex; flex-direction: column; align-items: center; gap: 6px; --tile: 52px; padding: 8px; background: rgba(255,255,255,.05); border: 2px solid var(--borde); }
.ayGaleria { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.ayGrid { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; --tile: 48px; }
.ayTile { border: 2px solid transparent; padding: 2px; }
.ayTile.on { border-color: var(--oro); }
.ayInfo { min-height: 56px; width: 100%; padding: 6px 10px; background: rgba(255,255,255,.05); border: 2px solid var(--borde); text-align: left; display: flex; flex-direction: column; gap: 2px; }
.ayInfo b { color: #fff3c4; font-size: 15px; } .ayInfo span { color: var(--suave); font-size: 13px; line-height: 1.3; }
.ayInfo .ayHint { text-align: center; }
.ayTabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.ayTab { padding: 5px 7px; border: 2px solid var(--borde); background: rgba(255,255,255,.06); cursor: pointer; line-height: 0; }
.ayTab:hover { background: rgba(255,255,255,.12); }
.ayTab.on { border-color: var(--oro); background: rgba(255,214,102,.14); }
.ayTab .ayRot { image-rendering: pixelated; }
.ayNav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ayPuntos { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; flex: 1; }
.ayPunto { width: 10px; height: 10px; padding: 0; border: 0; background: rgba(255,255,255,.25); cursor: pointer; }
.ayPunto.on { background: var(--oro); }
.ayTres { flex-wrap: nowrap; gap: 3px; align-items: flex-start; }
.ayTres .ayMano .cv { --cw: 29px; }
.ayTres .ayCartas .cv { margin-left: -8px; }
.ayTres .ayCartas .cv:first-child { margin-left: 0; }
.ayFila.chica { flex-wrap: nowrap; gap: 6px; }
.ayFila.chica .ayMano .cv { --cw: 30px; }
.ayCol .parlante { width: 46px; }
.cajaAyuda { overflow: hidden; }
#inicio .creditos { margin: calc(var(--v) * 12) 0 0; color: var(--suave); opacity: .7; font-size: calc(var(--v) * 15); letter-spacing: 1px; }
.ayTabla { display: grid; grid-template-columns: 1fr auto 1fr 1fr; gap: 6px 6px; align-items: center; justify-items: center; width: 100%; }
.ayTabla .ayMano .cv { --cw: 30px; }
.ayTabla .ayCartas .cv { margin-left: -8px; }
.ayTabla .ayCartas .cv:first-child { margin-left: 0; }
.ayCab { font-size: 11px; color: var(--suave); letter-spacing: 1px; }
.ayTabla .ayRes { justify-content: center; }
.midiendo .donarBtn { display: none !important; }

/* quienes se fueron de la sala */
.pos.retirado { grid-template-columns: 28px 1fr auto; }
.pos.retirado .motivoRet { grid-column: 2 / -1; font-size: 12px; color: var(--suave); }
.idos { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--suave); text-align: center; }
#bCopiar, #bSalir { padding: 4px; }
#bCopiar:hover .parlante, #bSalir:hover .parlante { filter: drop-shadow(2px 2px 0 rgba(0,0,0,.5)) brightness(1.3); }

/* misión de la ronda */
.mision { display: flex; align-items: center; gap: 8px; padding: 2px 10px; background: rgba(14,10,28,.9); border: 2px solid #8be36a; box-shadow: 3px 3px 0 rgba(0,0,0,.5); font-size: clamp(10px, 1.8cqw, 15px); white-space: nowrap; }
.mision[hidden] { display: none; }
.mision .miTit { color: #8be36a; letter-spacing: 1px; font-size: .8em; }
.mision b { color: #fff3c4; }
.mision .miPremio { color: var(--suave); }
@media (max-width: 700px) { .mision { gap: calc(var(--u) * 6); padding: 0 calc(var(--u) * 8); font-size: calc(var(--u) * 12); } }

/* objetos que se pueden usar ahora */
.tileBtn.listo .tile { animation: listo 1.1s ease-in-out infinite; }
@keyframes listo { 0%, 100% { filter: drop-shadow(0 0 0 rgba(242,201,76,0)) brightness(1); transform: translateY(0); } 50% { filter: drop-shadow(0 0 7px rgba(242,201,76,1)) brightness(1.35); transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .tileBtn.listo .tile { animation: none; filter: drop-shadow(0 0 5px rgba(242,201,76,.9)); } }

/* avisos de objetos y misiones */
.avisos { position: fixed; left: 50%; top: 58px; transform: translateX(-50%); z-index: 72; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; width: min(92vw, 420px); }
.avisoObj { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; background: rgba(14,10,28,.96); border: 2px solid var(--oro); box-shadow: 3px 3px 0 rgba(0,0,0,.55); font-size: 14px; color: #fff3c4; --tile: 30px; max-width: 100%; }
.avisoObj.bloqueo { border-color: #8fd1ff; } .avisoObj.reflejo { border-color: #c79bff; } .avisoObj.mision, .avisoObj.regalo { border-color: #8be36a; }

/* ventana para crear la sala */
#config { z-index: 60; }
.cajaConfig { width: min(520px, 100%); max-height: 94vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.cajaConfig h3 { margin: 0; text-align: center; color: #fff3c4; font-size: 22px; }
.cfModos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cfModo { font: inherit; text-align: left; color: var(--suave); background: rgba(255,255,255,.04); border: 2px solid var(--borde); padding: 8px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.cfModo b { color: #fff3c4; font-size: 17px; } .cfModo span { font-size: 12px; line-height: 1.3; }
.cfModo.on { border-color: var(--oro); background: rgba(242,201,76,.1); }
.cfGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cfCampo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cfCampo label { font-size: 13px; color: var(--suave); }
.cfCampo select { width: 100%; font: inherit; font-size: 16px; color: var(--texto); background: var(--fondo); border: 2px solid var(--borde); padding: 6px 8px; margin: 0; min-width: 0; }
#config .nota { margin: 0; text-align: center; }
#config .botonesFin { margin-top: 2px; }
@media (max-width: 700px) { .cfModo b { font-size: 15px; } .cfModo span { font-size: 11px; } .cfCampo label { font-size: 12px; } }
.ayApila .mision { font-size: 14px; }
.ayTileChico { --tile: 44px; }
.ayTileChico .cv { --cw: 40px; }
.cajaConfig .nota, #config .nota { font-size: 13px; color: var(--suave); line-height: 1.3; }
.mesaHex.hayEvento .crupier { top: 18.5%; }

/* la ventana de reacción */
.ventana { position: fixed; left: 50%; top: 62px; transform: translateX(-50%); z-index: 66; width: min(92vw, 360px); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 12px; background: rgba(14,10,28,.97); border: 3px solid var(--oro); box-shadow: 4px 4px 0 rgba(0,0,0,.6); text-align: center; }
.ventana[hidden] { display: none; }
.ventana b { color: #fff3c4; font-size: 20px; }
.ventana > span { color: var(--suave); font-size: 14px; }
.ventanaObjs { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; --tile: 52px; }
.ventanaObj { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; color: #fff3c4; }
.ventanaBarra { width: 100%; height: 8px; background: rgba(0,0,0,.5); }
.ventanaBarra div { height: 100%; width: 100%; background: linear-gradient(90deg, #b8861b, var(--oro)); transition: width .25s linear; }
@media (max-width: 700px) { .ventana b { font-size: 17px; } }
.ayDef { flex-wrap: nowrap; gap: 4px; }
.ayDef .aySeat { padding: 4px 6px; font-size: 11px; --tile: 28px; }
.ayDef .tile { width: 34px; height: 34px; }
.ayDef .aySeat .tile { width: 26px; height: 26px; }
.ayDef .ayFlecha { font-size: 18px; }
.ayReac { gap: 12px; }
.ayReacFila { justify-content: space-between; width: 100%; }
.ayReacLab { flex: 0 0 38%; display: flex; justify-content: flex-start; }
.ayReacObjs { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.ayReacObjs .tile { width: 38px; height: 38px; }
.ayPunto { width: 8px; height: 8px; } .ayPuntos { gap: 4px; }
.ayReacFila { flex-direction: column; align-items: flex-start; gap: 4px; }
.ayReacFila .ayFlecha { display: none; }
.ayReacLab { flex: none; }

/* ---------- la página principal: los juegos ---------- */
#home h1.titulo { font-size: calc(var(--v) * 66); font-weight: 700; color: var(--oro); margin: 0; text-shadow: calc(var(--v) * 4) calc(var(--v) * 4) 0 #000; line-height: 1.1; }
#home .sub { color: var(--suave); font-size: calc(var(--v) * 22); margin: calc(var(--v) * 4) 0 calc(var(--v) * 22); }
#home .homeCaja { width: calc(var(--v) * 900); }
.juegos { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--v) * 14); }
.juego { position: relative; font: inherit; color: var(--texto); text-align: left; background: var(--panel); border: 2px solid var(--borde); padding: calc(var(--v) * 16); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: calc(var(--v) * 12); overflow: hidden; }
.juego:hover:not(:disabled) { border-color: var(--oro); background: #241748; }
.juego:focus-visible { outline: 2px dashed var(--oro); outline-offset: 2px; }
.juego.pronto { cursor: default; opacity: .6; filter: grayscale(1); }
.juegoInfo { display: flex; flex-direction: column; gap: calc(var(--v) * 4); text-align: center; }
.juegoInfo b { font-size: calc(var(--v) * 28); color: #fff3c4; }
.juegoDesc { font-size: calc(var(--v) * 16); color: var(--texto); line-height: 1.3; }
.juegoDatos { font-size: calc(var(--v) * 14); color: var(--suave); }
.iconoCaja { position: relative; width: calc(var(--v) * 120); height: calc(var(--v) * 96); display: flex; align-items: center; justify-content: center; }
.iconoCaja .cartaIcono { position: absolute; --cw: calc(var(--v) * 54); filter: drop-shadow(3px 3px 0 rgba(0,0,0,.5)); }
.iconoCaja .cartaIcono.a { transform: translateX(-35%) rotate(-10deg); } .iconoCaja .cartaIcono.b { transform: translateX(35%) rotate(8deg); }
.iconoCaja .dadoIcono { position: absolute; width: calc(var(--v) * 64) !important; height: calc(var(--v) * 64) !important; image-rendering: pixelated; filter: drop-shadow(3px 3px 0 rgba(0,0,0,.5)); }
.iconoCaja .dadoIcono.a { transform: translateX(-30%) rotate(-8deg); } .iconoCaja .dadoIcono.b { transform: translate(40%, 12%) rotate(10deg); width: calc(var(--v) * 54) !important; height: calc(var(--v) * 54) !important; }
.iconoCaja .iconoJuego { width: calc(var(--v) * 84) !important; height: calc(var(--v) * 84) !important; image-rendering: pixelated; }
.cinta { position: absolute; top: calc(var(--v) * 14); right: calc(var(--v) * -34); transform: rotate(35deg); background: var(--oro); color: #2a1a00; font-size: calc(var(--v) * 13); font-weight: 700; padding: calc(var(--v) * 2) calc(var(--v) * 40); letter-spacing: 1px; }
#home .extrasInicio, #inicio .extrasInicio { margin-top: calc(var(--v) * 16); }
#home .creditos { margin: calc(var(--v) * 12) 0 0; color: var(--suave); opacity: .7; font-size: calc(var(--v) * 15); letter-spacing: 1px; }
#home .vb canvas, #inicio .vb canvas { max-width: 100%; height: auto; }
#bVolver { display: block; margin: 0 auto calc(var(--v) * 8) 0; align-self: flex-start; }
#inicio .inicioCaja > .vb:first-child { display: block; margin: 0 0 calc(var(--v) * 6) 0; }
#campoClave { display: flex; flex-direction: column; gap: calc(var(--v) * 6); }
@media (max-width: 700px) {
  #home .homeCaja { width: 100%; }
  .juegos { grid-template-columns: 1fr; gap: calc(var(--v) * 8); }
  .juego { flex-direction: row; text-align: left; padding: calc(var(--v) * 8) calc(var(--v) * 12); gap: calc(var(--v) * 12); }
  .juegoInfo { text-align: left; gap: calc(var(--v) * 2); }
  .juegoInfo b { font-size: calc(var(--v) * 22); } .juegoDesc { font-size: calc(var(--v) * 13); } .juegoDatos { font-size: calc(var(--v) * 12); }
  .iconoCaja { width: calc(var(--v) * 84); height: calc(var(--v) * 64); flex: none; }
  .iconoCaja .cartaIcono { --cw: calc(var(--v) * 38); }
  .iconoCaja .dadoIcono { width: calc(var(--v) * 44) !important; height: calc(var(--v) * 44) !important; }
  .iconoCaja .dadoIcono.b { width: calc(var(--v) * 36) !important; height: calc(var(--v) * 36) !important; }
  .iconoCaja .iconoJuego { width: calc(var(--v) * 56) !important; height: calc(var(--v) * 56) !important; }
  .cinta { top: calc(var(--v) * 6); right: calc(var(--v) * -40); font-size: calc(var(--v) * 11); }
}

/* ---------- ventana de configuración: el diez mil ---------- */
.cfModos3 { grid-template-columns: 1fr; }
.cfClaveFila { grid-template-columns: 1fr; }
#cfGridDM { grid-template-columns: 1fr 1fr; }

/* ---------- la partida de diez mil ---------- */
#dm.pantalla { display: flex; flex-direction: column; gap: 8px; max-width: none; padding: calc(8px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-left, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)); overflow: hidden; }
#dm .datosSala { white-space: nowrap; }
.dmCuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.dmJugadores { flex: none; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: 100%; }
.dmJ { position: relative; min-width: 128px; padding: 4px 10px; background: rgba(255,255,255,.05); border: 2px solid var(--borde); display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 14px; }
.dmJ.turno { border-color: var(--oro); background: rgba(242,201,76,.12); }
.dmJ.soy .dmNombre::before { content: '★ '; color: var(--oro); }
.dmJ.off { opacity: .5; }
.dmNombre { color: #fff3c4; font-size: 15px; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dmTotal { color: var(--oro); font-size: 24px; font-weight: 700; line-height: 1; }
.dmMeta { color: var(--suave); font-size: 11px; }
.dmDadosMini { display: flex; gap: 2px; height: 12px; }
.dmDadosMini span { width: 10px; height: 10px; border: 1px solid rgba(0,0,0,.5); display: block; }
.dmFichas { color: #8be36a; font-size: 12px; }
.dmMesa { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; position: relative; }
.dmMesa canvas { display: block; image-rendering: pixelated; cursor: pointer; }
.dmCartel { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); max-width: 92%; padding: 6px 14px; background: rgba(14,10,28,.95); border: 3px solid var(--oro); box-shadow: 4px 4px 0 rgba(0,0,0,.6); text-align: center; display: flex; flex-direction: column; gap: 2px; z-index: 5; }
.dmCartel b { color: #fff3c4; font-size: 22px; } .dmCartel span { color: var(--suave); font-size: 14px; }
.dmCartel.malo { border-color: #ff8a7a; } .dmCartel.bueno { border-color: #8be36a; }
.dmCartel .barraV { height: 6px; background: rgba(0,0,0,.5); margin-top: 3px; } .dmCartel .barraV div { height: 100%; background: linear-gradient(90deg, #b8861b, var(--oro)); width: 100%; transition: width .25s linear; }
.dmReloj { flex: none; height: 8px; margin: 2px auto 4px; width: min(100%, 520px); background: rgba(0,0,0,.45); } .dmReloj div { height: 100%; width: 0; background: linear-gradient(90deg, #b8861b, var(--oro)); } .dmReloj div.apura { background: var(--rojo); }
.dmMis { flex: none; position: relative; display: flex; justify-content: center; width: 100%; }
.dmMisFila { display: flex; gap: 8px; justify-content: center; align-items: center; }
.dmMisFila button { display: block; padding: 3px; background: rgba(255,255,255,.05); border: 2px solid var(--borde); cursor: pointer; }
.dmMisFila button.on { border-color: var(--oro); background: rgba(242,201,76,.15); }
.dmMisFila canvas { display: block; }
.dmDadoInfo { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); width: min(92%, 380px); padding: 6px 12px; background: rgba(14,10,28,.97); border: 3px solid var(--oro); box-shadow: 4px 4px 0 rgba(0,0,0,.6); text-align: center; display: flex; flex-direction: column; gap: 2px; z-index: 6; }
.dmDadoInfo b { color: #fff3c4; font-size: 18px; } .dmDadoInfo span { color: var(--suave); font-size: 14px; }
.dmFlota { position: absolute; left: 50%; top: 38%; transform: translateX(-50%); color: #fff3c4; font-size: 38px; font-weight: 700; text-shadow: 3px 3px 0 rgba(0,0,0,.7); pointer-events: none; z-index: 4; animation: dmSube 1.1s ease-out forwards; white-space: nowrap; }
@keyframes dmSube { 0% { opacity: 0; transform: translate(-50%, 16px) scale(.6); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.25); } 40% { transform: translate(-50%, -4px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -46px) scale(1); } }
.dmInfo { flex: none; min-height: 1.4em; color: #fff3c4; font-size: 17px; text-align: center; }
.dmInfo .acum { color: var(--oro); font-weight: 700; } .dmInfo .mal { color: var(--rojo); } .dmInfo .bien { color: var(--bien); }
.dmAcciones { flex: none; display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; min-height: 82px; }
.dmAcciones .vb canvas { max-width: 100%; height: auto; }
.dadoSprite { image-rendering: pixelated; display: block; }
.dmTemporizador { height: 5px; width: min(520px, 90%); background: rgba(0,0,0,.45); flex: none; } .dmTemporizador div { height: 100%; background: linear-gradient(90deg, #b8861b, var(--oro)); width: 0; transition: width .25s linear; }
.cajaDM { width: min(560px, 100%); max-height: 94vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.cajaDM h3 { margin: 0; color: #fff3c4; font-size: 22px; }
.dmOfertas { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.dmOferta { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; text-align: left; background: rgba(255,255,255,.05); padding: 8px; border: 2px solid var(--borde); }
.dmOferta.comprada { opacity: .5; }
.dmOferta .nom { font-weight: 700; font-size: 18px; color: #fff3c4; } .dmOferta .desc { font-size: 13px; color: var(--suave); line-height: 1.3; } .dmOferta .precio { color: var(--oro); font-weight: 700; font-size: 18px; text-align: center; margin-bottom: 4px; }
.dmElegir { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.dmElegir button { background: rgba(255,255,255,.06); border: 2px solid var(--borde); padding: 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; font: inherit; font-size: 12px; color: var(--suave); }
.dmElegir button.on, .dmElegir button:hover { border-color: var(--oro); color: #fff3c4; }
.dmFin .filaR { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; width: 100%; padding: 4px 8px; background: rgba(255,255,255,.05); text-align: left; align-items: center; }
.dmFin .filaR.lider { outline: 2px solid var(--oro); }
.dmGlobo { position: fixed; z-index: 75; pointer-events: none; filter: drop-shadow(3px 3px 0 rgba(0,0,0,.5)); }
@media (max-width: 700px) {
  .dmJugadores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .dmJ { min-width: 0; padding: 2px 4px; gap: 0; }
  .dmMeta { display: none; } .dmJ.sinEntrar .dmTotal { color: var(--suave); }
  .dmFichas { font-size: 11px; } .dmDadosMini span { width: 8px; height: 8px; }
  .dmTotal { font-size: 19px; } .dmNombre { font-size: 13px; }
  .dmCartel b { font-size: 18px; } .dmCartel span { font-size: 12px; }
  .dmAcciones { min-height: 72px; gap: 8px; }
  .dmInfo { font-size: 15px; }
}

.ayDado { display: block; padding: 2px; border: 2px solid transparent; } .ayDado.marca { border-color: var(--oro); background: rgba(242,201,76,.15); }
.ayDados { display: flex; gap: 2px; flex-wrap: nowrap; justify-content: flex-start; flex: 1; }
.ayPuntos2 { justify-content: space-between !important; width: 100%; gap: 6px; padding: 1px 6px; background: rgba(255,255,255,.04); flex-wrap: nowrap !important; }
.ayPuntaje .ayDado { padding: 1px; }
.ayPuntaje { gap: 3px; }
.ayPuntaje .ayPuntos2 .ayRot { max-width: 60px; }
.cinta { right: calc(var(--v) * 8); top: calc(var(--v) * 8); transform: none; padding: calc(var(--v) * 2) calc(var(--v) * 10); }

.claveSala { color: var(--suave); font-size: 14px; letter-spacing: 1px; }
.claveSala:empty { display: none; }
.datosSala { display: flex; flex-direction: column; justify-content: center; line-height: 1.1; }
@media (max-width: 700px) { .claveSala { font-size: 11px; } }
.titulo .tituloMenor { display: block; font-size: .55em; opacity: .85; margin-bottom: .1em; }