@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; }
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; }
.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 { --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); }
.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%; }
#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: 8px max(12px, env(safe-area-inset-left, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)); overflow: hidden; }
.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; }
.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; border-radius: 12px; }
.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; border-radius: 50%; 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.pos { color: var(--bien); } .neto.neg { 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; border-radius: 10px; 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; }

.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.pos { color: var(--bien); } .rval.neg { 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 { --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) * 10); }
  .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); }
  .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); }
  .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; }
  .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; }
}