/* Geolite - NAIPE DE GALA (v0.3.35): el sistema de interfaz nuevo. Lo aprobo el usuario en la Mesa de diseno (2026-10-09) y sustituye, pantalla a pantalla,
   a las trece recetas de panel y los seis botones principales de antes. Se estrena en la pausa (js/game.js, veilMenu); las demas pantallas se pasan una a una.
   Reglas:
   - Retícula de 12 columnas sobre el lienzo de diseno (escala 1 = 1280x720 o 1280x800 en Deck): margen 40, medianil 16. Todo panel empieza y acaba en una columna.
   - Tres superficies: contenedor (fieltro de gala con marco de laton), naipe (papel: lo que se lee) y cartel (protagonista o modal, con bombillas).
   - Esquinas de escalon de pixel (2 px de diseno), sombras duras sin difuminar, medidas pares para que a 1x y 1,5x caigan en pixel entero.
   - Letra: Jersey 15 para titulos y texto (minimo 18 px), Silkscreen solo en encabezados de seccion (16 px). Son los minimos de Steam Deck (css/legible.css).
   - Un unico boton principal por pantalla, abajo o al final del carril, con su tecla; el peligro nunca es el boton grande.
   - Modales: una sola fisica (entrada Foco con movimiento mixto: lo grande entra suave, la luz y los detalles a saltos; salida en 0,18 s). */

:root {
  --gx-o: #0a140f;                 /* contorno */
  --gx-rim: #d4a04a; --gx-rim-hi: #ffe39a; --gx-rim-lo: #6e4514;   /* laton */
  --gx-felt-1: #245a41; --gx-felt-2: #173d2c; --gx-felt-3: #0e271c; /* fieltro de gala */
  --gx-paper: #f6efdc; --gx-paper-lo: #cdbd97; --gx-ink: #16241c; --gx-ink-2: #56665a;
  --gx-txt: #f3eddc; --gx-txt-2: #b9c6b6; --gx-ttl: #fff3d6; --gx-acc: #ffcf66;
  --gx-red: #fe5f55; --gx-red-hi: #ffa59b; --gx-red-lo: #9e2a26;
  --gx-gold: #f8b449; --gx-gold-hi: #fff0b8; --gx-gold-lo: #b5651b;
  --gx-line: rgba(243, 237, 220, .14);
  --gx-card: linear-gradient(180deg, #fffaec 0, #f6efdc 26%, #efe4c8 100%); --gx-print: rgba(181, 101, 27, .34);   /* naipe: cartulina lisa (sin grano) y su filete impreso */
  --gx-p: 2px;                                                     /* un pixel del sistema (2 px de diseno: 2 a escala 1, 3 a 1,5) */
  --gx-notch: polygon(2px 0, calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px), 0 2px, 2px 2px);
  --gx-in: .42s; --gx-out: .18s; --gx-ease: cubic-bezier(.2, 1.1, .4, 1); --gx-ease-out: cubic-bezier(.4, 0, 1, 1);
}

/* ---------------------------------------------------------------- escenario escalado (misma escala --k que menus, Campamento y veredicto) */
.gx-stage { position: absolute; inset: 0; zoom: var(--k); --vh: calc(1vh / var(--k)); --vw: calc(1vw / var(--k)); font-family: var(--sans); color: var(--gx-txt); text-align: left; }
.gx-grid { position: absolute; left: 40px; right: 40px; top: 32px; bottom: 32px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; }

/* ---------------------------------------------------------------- tipografia */
.gx-eyb { font-family: var(--mono); font-size: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--gx-acc); line-height: 1.1; }
.gx-t-xl { font-family: var(--serif); font-weight: 400; font-size: 84px; line-height: .86; color: var(--gx-ttl); text-shadow: 0 4px 0 #050b08, 0 0 20px rgba(255, 196, 100, .22); margin: 0; }
.gx-t-l { font-family: var(--serif); font-weight: 400; font-size: 60px; line-height: .9; color: var(--gx-ttl); text-shadow: 0 4px 0 #050b08, 0 0 20px rgba(255, 196, 100, .22); margin: 0; }
.gx-t-m { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: .95; color: var(--gx-ttl); text-shadow: 0 4px 0 #050b08; margin: 0; }
.gx-lead { font-size: 24px; line-height: 1.12; color: var(--gx-txt-2); margin: 0; }
.gx-body { font-size: 22px; line-height: 1.15; margin: 0; }
.gx-note { font-size: 18px; line-height: 1.2; color: var(--gx-txt-2); margin: 0; }

/* ---------------------------------------------------------------- superficies */
.gx-sh { filter: drop-shadow(0 6px 0 rgba(2, 6, 4, .72)); }
.gx-pnl { position: relative; clip-path: var(--gx-notch); padding: 26px 26px 24px;
  background: url(../assets/dados/felt.png) 0 0 / 32px 32px, radial-gradient(130% 90% at 50% 0%, var(--gx-felt-1) 0%, var(--gx-felt-2) 55%, var(--gx-felt-3) 100%);
  box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 0 0 6px var(--gx-rim), inset 0 0 0 8px var(--gx-o), inset 0 40px 56px -40px rgba(255, 214, 140, .14); image-rendering: pixelated; }
.gx-pnl > * { position: relative; z-index: 1; }
.gx-pnl::before { content: ""; position: absolute; inset: 2px; z-index: 0; pointer-events: none;
  background: linear-gradient(var(--gx-o), var(--gx-o)) 0 0 / 2px 2px no-repeat, linear-gradient(var(--gx-o), var(--gx-o)) 100% 0 / 2px 2px no-repeat, linear-gradient(var(--gx-o), var(--gx-o)) 0 100% / 2px 2px no-repeat, linear-gradient(var(--gx-o), var(--gx-o)) 100% 100% / 2px 2px no-repeat,
    linear-gradient(var(--gx-rim-hi), var(--gx-rim-hi)) 2px 0 / calc(100% - 4px) 2px no-repeat, linear-gradient(var(--gx-rim-lo), var(--gx-rim-lo)) 2px 100% / calc(100% - 4px) 2px no-repeat; }
.gx-paper { position: relative; clip-path: var(--gx-notch); padding: 16px 18px 18px; color: var(--gx-ink); --gx-txt-2: var(--gx-ink-2); --gx-line: rgba(22, 36, 28, .16); --gx-acc: var(--gx-gold-lo);
  background: var(--gx-card); box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 -4px 0 2px var(--gx-paper-lo); }
.gx-paper::after { content: ""; position: absolute; inset: 8px 8px 10px; pointer-events: none; clip-path: var(--gx-notch); box-shadow: inset 0 0 0 2px var(--gx-print); }
.gx-paper::before { content: ""; position: absolute; inset: 2px; pointer-events: none;
  background: linear-gradient(var(--gx-o), var(--gx-o)) 0 0 / 2px 2px no-repeat, linear-gradient(var(--gx-o), var(--gx-o)) 100% 0 / 2px 2px no-repeat, linear-gradient(var(--gx-o), var(--gx-o)) 0 100% / 2px 2px no-repeat, linear-gradient(var(--gx-o), var(--gx-o)) 100% 100% / 2px 2px no-repeat, linear-gradient(#fffaf0, #fffaf0) 2px 0 / calc(100% - 4px) 2px no-repeat; }

/* cifras en columna, como en caja: nombre ..... valor */
.gx-lead-row { display: grid; grid-template-columns: auto minmax(12px, 1fr) auto; gap: 8px; align-items: baseline; font-size: 22px; line-height: 1.1; }
.gx-lead-row s { text-decoration: none; border-bottom: 2px dotted currentColor; opacity: .32; transform: translateY(-5px); }
.gx-lead-row b { font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gx-lead-row b small { font-size: 1em; opacity: .5; }
.gx-bar { position: relative; height: 12px; background: #ded2b4; box-shadow: inset 0 0 0 2px var(--gx-o); }
.gx-bar i { position: absolute; inset: 0 auto 0 0; max-width: 100%; background: var(--gx-rim); box-shadow: inset 0 2px 0 var(--gx-rim-hi), inset 0 0 0 2px var(--gx-o); }
.gx-hr { height: 2px; background: var(--gx-line); }

/* ---------------------------------------------------------------- botones (placa de laton con tornillos, naipe, fieltro con anillo, rojo) */
.gx-acts { display: flex; gap: 12px; filter: drop-shadow(0 4px 0 rgba(2, 6, 4, .78)); }
.gx-acts.col { flex-direction: column; }
.gx-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 6px 24px 8px; margin: 0;
  font-family: var(--sans); font-weight: 400; font-size: 26px; line-height: 1; color: var(--gx-ink); text-align: left; white-space: nowrap; cursor: pointer; border: 0; clip-path: var(--gx-notch);
  box-shadow: inset 0 0 0 2px var(--gx-o); background: linear-gradient(var(--h) 0 4px, var(--m) 4px calc(100% - 6px), var(--l) calc(100% - 6px));
  --h: #fffaf0; --m: var(--gx-paper); --l: #c2b28c; transition: transform .12s steps(2, end), filter .12s; }
.gx-btn.wide { width: 100%; justify-content: space-between; }
.gx-btn.sm { min-height: 44px; padding: 4px 16px 6px; font-size: 22px; gap: 8px; }
.gx-btn:hover, .gx-btn.pad-hov { transform: translateY(-2px); filter: brightness(1.06); }
.gx-btn:active { transform: translateY(2px); filter: brightness(.96); }
.gx-btn.pri { --h: var(--gx-gold-hi); --m: var(--gx-gold); --l: var(--gx-gold-lo);
  background: radial-gradient(circle at 10px 10px, #fff4c8 0 1px, #6b4410 1.5px 2.5px, transparent 3px), radial-gradient(circle at calc(100% - 10px) 10px, #fff4c8 0 1px, #6b4410 1.5px 2.5px, transparent 3px),
    linear-gradient(var(--h) 0 4px, var(--m) 4px calc(100% - 6px), var(--l) calc(100% - 6px)); }
.gx-btn.gho { --h: #2f6a4f; --m: #1a4533; --l: #0b2118; color: var(--gx-txt); box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 0 0 4px rgba(212, 160, 74, .55); }
.gx-btn.dan { --h: var(--gx-red-hi); --m: var(--gx-red); --l: var(--gx-red-lo); color: #fff; }
.gx-btn.gho.armed { --h: var(--gx-red-hi); --m: var(--gx-red); --l: var(--gx-red-lo); color: #fff; box-shadow: inset 0 0 0 2px var(--gx-o); white-space: normal; line-height: 1.05; }
.gx-btn.wide > span:first-child { min-width: 0; white-space: normal; line-height: 1.05; }
.gx-btn .gx-k { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.gx-btn kbd.k-kb { font-family: var(--mono); font-size: 16px; line-height: 1; padding: 3px 5px 2px; box-shadow: inset 0 0 0 2px currentColor; opacity: .75; background: none; color: inherit; }
.gx-btn .gl { margin: -6px 0; }
/* foco de teclado y mando: anillo blanco interior que parpadea a saltos (se ve sobre laton, papel y fieltro) */
.gx-btn:focus { outline: none; }
.gx-btn:focus-visible::after, html[data-input="pad"] .gx-btn:focus::after { content: ""; position: absolute; inset: 5px; box-shadow: inset 0 0 0 2px #fff; animation: gx-focus 1.2s steps(2, end) infinite; pointer-events: none; }
@keyframes gx-focus { 50% { opacity: .3; } }

/* ---------------------------------------------------------------- velo, foco de luz y entrada (Foco con movimiento mixto) */
.gx-veil { position: absolute; inset: 0; background: url(../assets/dados/felt.png) 0 0 / 32px 32px, radial-gradient(ellipse 90% 80% at 62% 8%, #173b2b 0%, #0b1d15 52%, #050c08 100%); image-rendering: pixelated; }
.gx-spot { position: absolute; top: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 55% 100% at 50% 0%, rgba(255, 226, 160, .2), rgba(255, 226, 160, .07) 55%, transparent 80%); }
.gx-layer.gx-in .gx-veil { animation: gx-fade .26s ease-out both; }
.gx-layer.gx-in .gx-spot { animation: gx-spot .32s steps(4, end) .15s both; }
.gx-layer.gx-in .gx-from-left { animation: gx-from-left var(--gx-in) var(--gx-ease) .06s both; }
.gx-layer.gx-in .gx-from-top { animation: gx-from-top .6s var(--gx-ease) .22s both; }
.gx-layer.gx-in .gx-pop { animation: gx-pop .2s steps(2, end) .3s both; }
.gx-layer.gx-out { pointer-events: none; animation: gx-fade-out var(--gx-out) var(--gx-ease-out) both; }
.gx-layer.gx-out .gx-from-left { animation: gx-to-left var(--gx-out) var(--gx-ease-out) both; }
@keyframes gx-fade { from { opacity: 0; } }
@keyframes gx-fade-out { to { opacity: 0; } }
@keyframes gx-spot { 0% { opacity: 0; } 34% { opacity: .5; } 50% { opacity: .15; } 100% { opacity: 1; } }
@keyframes gx-from-left { from { opacity: 0; transform: translateX(-48px); } }
@keyframes gx-to-left { to { opacity: 0; transform: translateX(-24px); } }
@keyframes gx-from-top { 0% { transform: translateY(-120%) rotate(4deg); } 62% { transform: translateY(4%) rotate(-1.5deg); } 82% { transform: translateY(-1%) rotate(.6deg); } 100% { transform: none; } }
@keyframes gx-pop { from { visibility: hidden; } }
.gx-layer.gx-in .gx-spot, .gx-layer .gx-spot.on { opacity: 1; }
html.reduce-motion .gx-layer *, html.reduce-motion .gx-layer { animation-duration: 0s !important; animation-delay: 0s !important; }

/* ---------------------------------------------------------------- PAUSA (Carril): el estado de la partida y el menu a la izquierda, el crupier bajo su foco a la derecha.
   El velo es opaco a proposito: con el mapa a la vista se podria pausar para buscar el sitio sin reloj */
#veil.gx { display: block; background: none; text-align: left; }
.gx-pause .gx-railw { grid-column: 1 / 5; grid-row: 1; min-height: 0; }
.gx-pause.solo .gx-railw { grid-column: 5 / 9; }                                  /* sin crupier (Clasico, Campamento): el carril va al centro */
.gx-pause .gx-grid { top: 24px; bottom: 24px; }
.gx-pause .gx-rail { height: 100%; min-height: 0; display: grid; grid-template-rows: auto auto 1fr auto; grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 22px; padding-bottom: 20px; }   /* cabe en 16:9 en los 12 idiomas (en ruso, la entradilla ocupa 3 lineas) */
.gx-pause .gx-rail > *, .gx-pause .gx-paper > * { min-width: 0; } .gx-pause .gx-t-l, .gx-pause .gx-lead { overflow-wrap: anywhere; }
.gx-pause.solo .gx-railw { align-self: center; } .gx-pause.solo .gx-rail { height: auto; }      /* centrado, el carril mide lo que lleva: sin hueco vacio */
.gx-pause .gx-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .gx-pause .gx-head > * { grid-column: 1 / -1; }
.gx-pause .gx-head .gx-eyb { grid-column: 1; grid-row: 1; align-self: center; }                 /* los corazones, en la esquina del encabezado */
.gx-pause .gx-head .gx-hearts { grid-column: 2; grid-row: 1; display: flex; gap: 4px; } .gx-pause .gx-hearts .ic { width: 28px; height: 28px; }
.gx-pause .gx-paper { display: grid; gap: 10px; }
.gx-pause .gx-menu { align-self: start; }
.gx-pause .gx-foot { display: grid; gap: 10px; }
.gx-pause .gx-foot .gx-btn { align-self: start; justify-self: start; }
.gx-pause .gx-spot { left: 52%; right: 0; height: 100%; }
.gx-pause .gx-dealer { position: absolute; right: 56px; bottom: 0; display: flex; justify-content: center; align-items: flex-end; width: 44%; height: 100%; pointer-events: none; }
.gx-pause .gx-dealer .dealer.big { pointer-events: auto; }
.gx-pause .gx-dealer .dl-face .cr-cv { top: auto; bottom: 0; transform: translateX(-50%); }   /* de pie en el suelo, bajo su foco (no flotando en medio de su hueco) */
@media (max-width: 899px), (max-height: 519px) {                                  /* movil: el carril ocupa el ancho y el crupier no sale */
  .gx-pause .gx-grid { left: 16px; right: 16px; top: 16px; bottom: 16px; }
  .gx-pause .gx-railw, .gx-pause.solo .gx-railw { grid-column: 1 / -1; }
  .gx-pause .gx-dealer, .gx-pause .gx-spot { display: none; }
}

/* ---------------------------------------------------------------- VEREDICTO (v0.3.37): titular | ticket de caja | ficha y crupier, y los botones abajo a la derecha.
   .vd sigue siendo la raiz que ajusta A.fitK (zoom con la escala de la pantalla); aqui se rehace entera sobre la reticula de 12 columnas */
#dlg.verdict > .gx-vd { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 20px;
  max-width: none; min-height: 100%; margin: 0; padding: 32px 40px; align-items: center; color: var(--gx-txt); text-align: left; }
.gx-vd-head { grid-column: 1 / 5; grid-row: 1; display: grid; gap: 12px; align-content: center; min-width: 0; }
.gx-vd-head .gx-t-xl { font-size: 72px; overflow-wrap: anywhere; text-wrap: balance; }
.gx-vd-head .gx-lead { max-width: 30ch; }
.gx-vd-head .gx-lead .ic { width: 22px; height: 22px; vertical-align: -4px; }
.gx-vd-meter { position: relative; height: 16px; margin-top: 6px; background: #0b2118; box-shadow: inset 0 0 0 2px var(--gx-o); }
.gx-vd-meter i { position: absolute; inset: 0 auto 0 0; background: var(--gx-red); box-shadow: inset 0 2px 0 var(--gx-red-hi), inset 0 0 0 2px var(--gx-o); }
.gx-vd-meter.full i { background: var(--gx-rim); box-shadow: inset 0 2px 0 var(--gx-rim-hi), inset 0 0 0 2px var(--gx-o); }
.gx-vd-meter em { position: absolute; top: -6px; bottom: -6px; width: 4px; margin-left: -2px; background: var(--gx-txt); box-shadow: 0 0 0 2px var(--gx-o); }   /* el objetivo */
.gx-vd-mid { grid-column: 5 / 9; grid-row: 1; min-width: 0; align-self: center; }
.gx-vd.wide .gx-vd-mid { grid-column: 5 / 11; } .gx-vd.wide .gx-vd-side { grid-column: 11 / 13; }   /* diez lugares sin crupier (Clasico): el ticket gana dos columnas */

/* el ticket: papel con los bordes perforados, filas como en caja y el sello encima */
.gx-vd-ticket { display: grid; gap: 8px; padding: 26px 22px 30px; box-shadow: inset 0 -4px 0 var(--gx-paper-lo);
  clip-path: polygon(0 8px, 2% 0, 4% 8px, 6% 0, 8% 8px, 10% 0, 12% 8px, 14% 0, 16% 8px, 18% 0, 20% 8px, 22% 0, 24% 8px, 26% 0, 28% 8px, 30% 0, 32% 8px, 34% 0, 36% 8px, 38% 0, 40% 8px, 42% 0, 44% 8px, 46% 0, 48% 8px, 50% 0, 52% 8px, 54% 0, 56% 8px, 58% 0, 60% 8px, 62% 0, 64% 8px, 66% 0, 68% 8px, 70% 0, 72% 8px, 74% 0, 76% 8px, 78% 0, 80% 8px, 82% 0, 84% 8px, 86% 0, 88% 8px, 90% 0, 92% 8px, 94% 0, 96% 8px, 98% 0, 100% 8px, 100% calc(100% - 8px), 98% 100%, 96% calc(100% - 8px), 94% 100%, 92% calc(100% - 8px), 90% 100%, 88% calc(100% - 8px), 86% 100%, 84% calc(100% - 8px), 82% 100%, 80% calc(100% - 8px), 78% 100%, 76% calc(100% - 8px), 74% 100%, 72% calc(100% - 8px), 70% 100%, 68% calc(100% - 8px), 66% 100%, 64% calc(100% - 8px), 62% 100%, 60% calc(100% - 8px), 58% 100%, 56% calc(100% - 8px), 54% 100%, 52% calc(100% - 8px), 50% 100%, 48% calc(100% - 8px), 46% 100%, 44% calc(100% - 8px), 42% 100%, 40% calc(100% - 8px), 38% 100%, 36% calc(100% - 8px), 34% 100%, 32% calc(100% - 8px), 30% 100%, 28% calc(100% - 8px), 26% 100%, 24% calc(100% - 8px), 22% 100%, 20% calc(100% - 8px), 18% 100%, 16% calc(100% - 8px), 14% 100%, 12% calc(100% - 8px), 10% 100%, 8% calc(100% - 8px), 6% 100%, 4% calc(100% - 8px), 2% 100%, 0 calc(100% - 8px)); }
.gx-vd-ticket::before, .gx-vd-ticket::after { display: none; }   /* el ticket es de caja: sin filete de naipe */
.gx-vd-th { display: grid; justify-items: center; gap: 2px; text-align: center; padding-bottom: 2px; }
.gx-vd-rows { display: grid; gap: 6px; }
.gx-vd-rows.two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }   /* diez lugares (Clasico): dos columnas para que quepa sin encoger */
.gx-vd-ticket .gx-lead-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-vd-ticket .gx-lead-row span i { font-style: normal; color: var(--gx-ink-2); }
.gx-vd-ticket .gx-lead-row.big { font-size: 26px; } .gx-vd-ticket .gx-lead-row.big b { font-size: 40px; line-height: 1; }
.gx-vd-ticket .gx-lead-row .ic { width: 22px; height: 22px; vertical-align: -4px; margin-right: 6px; image-rendering: pixelated; }
.gx-vd-ticket .vl-half b, .gx-vd-ticket .vl-broke { opacity: .6; } .gx-vd-ticket .vl-broke .ic { filter: grayscale(1); }
.gx-vd-ticket .vl-bet span { color: var(--gx-gold-lo); } .gx-vd-ticket .vl-lost b { color: #c0392b; }
.gx-vd-ticket .odo { height: 1em; }
.gx-vd-stamp { justify-self: center; margin-top: 10px; max-width: 92%; padding: 4px 18px 0; font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: .95; text-align: center; text-wrap: balance;
  color: #c3332a; box-shadow: inset 0 0 0 4px #c3332a; transform: rotate(-7deg); mix-blend-mode: multiply; opacity: .9; }
.gx-vd-stamp.no { color: #7b3a8f; box-shadow: inset 0 0 0 4px #7b3a8f; transform: rotate(5deg); }

/* ficha (medalla) y crupier; la tarjeta del IQ en el Clasico */
.gx-vd-side { grid-column: 9 / 13; grid-row: 1; display: grid; justify-items: center; align-content: center; gap: 14px; min-width: 0; }
.gx-vd-medal { position: relative; width: 120px; height: 120px; filter: drop-shadow(0 6px 0 rgba(2, 6, 4, .7)); }
.gx-vd-medal > .ic { width: 100%; height: 100%; image-rendering: pixelated; }
.gx-vd-crown { position: absolute; top: -18%; right: -10%; width: 44%; transform: rotate(14deg); } .gx-vd-crown .ic { width: 100%; height: auto; }
.gx-vd-dealer { width: 100%; display: grid; justify-items: center; min-height: 0; } .gx-vd-dealer:empty { display: none; }
.gx-vd .dealer.inline { flex-direction: column; align-items: center; gap: 10px; transform: none; }
.gx-vd .dealer.inline .dl-face { width: 224px; height: 224px; order: 2; }
.gx-vd .dealer.inline .dl-face > .cr-cv:not(.mini) { top: auto; bottom: 0; transform: translateX(-50%); }
.gx-vd .dealer.inline .dl-bubble { margin: 0; max-width: min(100%, 380px); font-size: calc(22px * var(--dll, 1)); text-align: center; order: 1; transform-origin: 50% 100%; padding-bottom: 20px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(50% + 10px) calc(100% - 12px), 50% 100%, calc(50% - 10px) calc(100% - 12px), 0 calc(100% - 12px)); }
.gx-vd-iq { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 14px; width: min(100%, 320px); }
.gx-vd-iq > .ic, .gx-vd-iq > img { grid-row: span 2; width: 56px; height: 56px; image-rendering: pixelated; }
.gx-vd-iq .odo { font-family: var(--serif); font-size: 56px; line-height: 1; height: 1em; }
.gx-vd-iq em { grid-column: 1 / -1; padding-top: 6px; border-top: 2px dotted var(--gx-line); font-style: normal; font-size: 22px; color: #c3332a; }

/* los botones: discretos a la izquierda, los de verdad a la derecha (el principal, el ultimo) */
.gx-vd-acts { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.gx-vd-acts .gx-acts { flex-wrap: wrap; justify-content: flex-end; } .gx-vd-acts .gx-acts:last-child { margin-left: auto; }
.gx-vd-acts .gx-acts:empty { display: none; }

/* entrada: el titular desde la izquierda, el ticket sale de la caja y sus filas se imprimen una a una; el sello cae al final */
.gx-vd.gx-in .gx-vd-mid { animation: gx-print .5s var(--gx-ease) .15s both; }
.gx-vd.gx-in .gx-vd-in { animation: gx-pop .16s steps(2, end) var(--d, .5s) both; }
.gx-vd.gx-in .gx-vd-stamp { animation: gx-stamp .3s steps(3, end) 1.5s both; }
.gx-vd.gx-in .gx-vd-stamp.no { animation-name: gx-stamp-no; }
.gx-vd.gx-in .gx-vd-medal { animation: gx-pop .2s steps(2, end) .3s both; }
.gx-vd.gx-in .gx-vd-acts { animation: gx-fade .3s ease-out .9s both; }
@keyframes gx-print { from { clip-path: inset(0 0 100% 0); transform: translateY(-24px); } to { clip-path: inset(0 0 -40px 0); transform: none; } }
@keyframes gx-stamp { 0% { opacity: 0; transform: rotate(-7deg) scale(1.8); } 60% { opacity: .9; transform: rotate(-7deg) scale(.94); } 100% { opacity: .9; transform: rotate(-7deg) scale(1); } }
@keyframes gx-stamp-no { 0% { opacity: 0; transform: rotate(5deg) scale(1.8); } 60% { opacity: .9; transform: rotate(5deg) scale(.94); } 100% { opacity: .9; transform: rotate(5deg) scale(1); } }
html.reduce-motion .gx-vd *, html.reduce-motion .gx-vd { animation-duration: 0s !important; animation-delay: 0s !important; }

/* ventana estrecha o movil: una columna (titular, ticket, crupier, botones) y se desplaza */
@media (max-width: 899px), (max-height: 519px) {
  #dlg.verdict > .gx-vd { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding: 18px 16px 24px; align-content: start; }
  .gx-vd-head, .gx-vd-mid, .gx-vd-side, .gx-vd-acts { grid-column: 1; grid-row: auto; }
  .gx-vd-head .gx-t-xl { font-size: 48px; }
  .gx-vd-side { grid-template-columns: auto minmax(0, 1fr); justify-items: start; }
  .gx-vd-medal { width: 72px; height: 72px; } .gx-vd .dealer.inline .dl-face { width: 96px; height: 96px; }
  .gx-vd-rows.two { grid-template-columns: minmax(0, 1fr); }
  .gx-vd-acts .gx-btn { flex: 1 1 auto; }
}

/* ---------------------------------------------------------------- AJUSTES (v0.3.38): el libro de la casa. Antes iba sin escalar (a 1080p ocupaba un tercio
   de la pantalla) y con tarjetas oscuras translucidas; ahora escala con --k como el resto de pantallas, el indice ocupa 3 columnas y el contenido 9
   sobre un panel de fieltro con marco de laton. Solo cambia el aspecto: el marcado y la logica son los de siempre (index.html, js/game.js, js/controles.js) */
#settings { zoom: var(--k); --vh: calc(1vh / var(--k)); --vw: calc(1vw / var(--k));
  font-family: var(--sans); color: var(--gx-txt);
  background: url(../assets/dados/felt.png) 0 0 / 32px 32px, radial-gradient(ellipse 90% 80% at 50% 0%, #173b2b 0%, #0b1d15 55%, #050c08 100%); image-rendering: pixelated; }
#settings::after { opacity: .035; }
#settings .set-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; align-items: center; padding: 16px 40px 0; border-bottom: 0; background: none; }
#settings .set-back { grid-column: 1 / 4; justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 16px 8px; border-radius: 0; clip-path: var(--gx-notch);
  font-family: var(--sans); font-size: 24px; letter-spacing: 0; text-transform: none; color: var(--gx-ink); filter: drop-shadow(0 4px 0 rgba(2, 6, 4, .78));
  background: linear-gradient(#fffaf0 0 4px, var(--gx-paper) 4px calc(100% - 6px), #c2b28c calc(100% - 6px)); box-shadow: inset 0 0 0 2px var(--gx-o); transition: transform .12s steps(2, end); }
#settings .set-back:hover { transform: translateY(-2px); background: linear-gradient(#fffaf0 0 4px, #fffaf0 4px calc(100% - 6px), #c2b28c calc(100% - 6px)); }
#settings .set-back .ic { width: 22px; height: 22px; filter: brightness(0) saturate(100%) invert(10%) sepia(18%) saturate(900%) hue-rotate(95deg); }
html[data-glyph="kb"] #settings .set-back::after { content: "Esc"; font-family: var(--mono); font-size: 16px; line-height: 1; padding: 3px 5px 2px; box-shadow: inset 0 0 0 2px currentColor; opacity: .75; }
#settings .set-title { grid-column: 4 / 10; justify-self: start; gap: 14px; }
#settings .set-title h1 { font-family: var(--serif); font-weight: 400; font-size: 56px; line-height: .9; letter-spacing: 0; color: var(--gx-ttl); text-shadow: 0 4px 0 #050b08, 0 0 20px rgba(255, 196, 100, .22); }
#settings .set-h-ic .ic { width: 40px; height: 40px; }
#settings .set-ver { grid-column: 10 / 13; font-size: 16px; color: var(--gx-txt-2); }
#settings .set-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; padding: 14px 40px 12px; max-width: none; width: 100%; margin: 0; }

/* el indice: fichas de seccion; la abierta es un naipe con el filo de laton */
:root body #settings .set-nav { grid-column: 1 / 4; width: auto; gap: 8px; align-self: start; }
:root body #settings .set-nav button { min-height: 76px; padding: 10px 14px 12px; gap: 14px; border-radius: 0; clip-path: var(--gx-notch); transform: none;
  background: rgba(5, 12, 9, .5); box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 0 0 4px rgba(212, 160, 74, .28); }
:root body #settings .set-nav button:hover:not(.on) { background: rgba(212, 160, 74, .12); transform: translateX(2px); }
:root body #settings .set-nav button.on { background: var(--gx-card);
  box-shadow: inset 0 0 0 2px var(--gx-o), inset 8px 0 0 2px var(--gx-rim), inset 0 -4px 0 2px var(--gx-paper-lo); }
#settings .set-nav button.on::before { display: none; }
:root body #settings .set-nav-ic .ic { width: 40px; height: 40px; }
#settings .set-nav-t { gap: 2px; }
#settings .set-nav-t { min-width: 0; } #settings .set-nav-t b { font-family: var(--sans); font-weight: 400; font-size: 24px; line-height: 1; color: var(--gx-txt); overflow-wrap: anywhere; }
:root body #settings .set-nav-t small { font-family: var(--sans); font-size: 18px; letter-spacing: 0; text-transform: none; line-height: 1.1; color: var(--gx-txt-2); }
#settings .set-nav button.on .set-nav-t b { color: var(--gx-ink); } :root body #settings .set-nav button.on .set-nav-t small { color: var(--gx-ink-2); }

/* el contenido: un panel de fieltro con marco de laton; las tarjetas de antes son secciones separadas por un filete */
#settings .set-panes { grid-column: 4 / 13; min-height: 0; padding: 18px 24px 16px; clip-path: var(--gx-notch);
  background: radial-gradient(130% 90% at 50% 0%, var(--gx-felt-1) 0%, var(--gx-felt-2) 55%, var(--gx-felt-3) 100%);
  box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 0 0 6px var(--gx-rim), inset 0 0 0 8px var(--gx-o), inset 0 40px 56px -40px rgba(255, 214, 140, .14);
  scrollbar-color: var(--gx-rim) transparent; }
#settings .set-grid { gap: 6px 32px; }
/* v0.3.172: la pestana que no cabe aprieta primero sus aires (js/game.js, fitSet); la letra no cambia. Lo que aun no quepa se desplaza, como siempre */
#settings .set-panes.tight .set-grid { row-gap: 0; } #settings .set-panes.tight .set-card { padding-bottom: 8px; }
:root body #settings .set-panes.tight .set-card > h3 { margin-bottom: 8px; } :root body #settings .set-panes.tight .set-note { margin-top: 4px; } :root body #settings .set-panes.tight .row-btn { margin-bottom: 2px; }
#settings .set-panes.tight .dl-file .dlf-h { margin-bottom: 4px; } #settings .set-panes.tight .dlf { row-gap: 2px; }
#settings .set-card { padding: 2px 0 14px; border-radius: 0; background: none; box-shadow: none; border-bottom: 2px solid var(--gx-line); }
#settings .set-card:last-child, #settings .set-col > .set-card:last-child { border-bottom: 0; }
:root body #settings .set-card > h3 { font-family: var(--mono); font-size: 16px; letter-spacing: .08em; color: var(--gx-acc); margin: 0 0 12px; }
#settings .set-card h3 > em { font-family: var(--sans); font-size: 18px; letter-spacing: 0; color: var(--gx-txt-2); }
:root body #settings .set-note { font-family: var(--sans); font-size: 18px; line-height: 1.2; color: var(--gx-txt-2); margin-top: 10px; }
#settings .set-card .row-sw, #settings .set-card .fader { padding: 9px 0; border-bottom: 2px solid var(--gx-line); }
#settings .set-card .row-sw:last-child, #settings .set-card .fader:last-child { border-bottom: 0; }
#settings .rs-t label, #settings .fader label, #settings .stp-l { font-family: var(--sans); font-weight: 400; font-size: 24px; line-height: 1.05; }
:root body #settings .rs-t > small { font-family: var(--sans); font-size: 18px; line-height: 1.15; color: var(--gx-txt-2); }
#settings .fader output { font-family: var(--sans); font-size: 22px; color: var(--gx-rim-hi); }

/* interruptor, selector, deslizador, botones pequenos y casillas: los del sistema (esquinas de pixel, laton, papel) */
#settings .sw { width: 64px; height: 34px; border-radius: 0; clip-path: var(--gx-notch); background: #0b2118; box-shadow: inset 0 0 0 2px var(--gx-o); }
#settings .sw i { top: 6px; left: 6px; width: 22px; height: 22px; border-radius: 0; background: #b9c6b6; box-shadow: inset 0 -3px 0 #7f8e80; }
#settings .sw[aria-checked="true"] { background: var(--gx-gold); box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 2px 0 2px var(--gx-gold-hi); }
#settings .sw[aria-checked="true"] i { left: 36px; background: #fffaf0; box-shadow: inset 0 -3px 0 #c2b28c; }
#settings .seg { border-radius: 0; clip-path: var(--gx-notch); background: #0b2118; box-shadow: inset 0 0 0 2px var(--gx-o); }
#settings .seg button { font-family: var(--sans); font-size: clamp(18px, 5.4cqw, 22px); letter-spacing: 0; text-transform: none; color: var(--gx-txt-2); padding: 8px 4px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#settings .seg.s4 button { font-size: 18px; white-space: normal; line-height: 1; hyphens: auto; overflow-wrap: anywhere; }
#settings .seg button.on { color: var(--gx-ink); } #settings .seg button:hover:not(.on) { color: var(--gx-txt); }
#settings .seg > i { border-radius: 0; background: var(--gx-rim); box-shadow: inset 0 2px 0 var(--gx-rim-hi), inset 0 -2px 0 var(--gx-rim-lo), 0 0 0 2px var(--gx-o); }
#settings input[type=range]::-webkit-slider-runnable-track { height: 12px; border-radius: 0; background: linear-gradient(to right, var(--gx-rim) var(--p, 50%), #0b2118 var(--p, 50%)); box-shadow: inset 0 0 0 2px var(--gx-o); }
#settings input[type=range]::-webkit-slider-thumb { width: 22px; height: 30px; margin-top: -9px; border-radius: 0; clip-path: var(--gx-notch); background: linear-gradient(#fffaf0 0 4px, var(--gx-paper) 4px calc(100% - 5px), #c2b28c calc(100% - 5px)); box-shadow: inset 0 0 0 2px var(--gx-o); }
#settings .ftrack { opacity: .5; }
#settings .mini-btn, #settings .chip-t { border-radius: 0; clip-path: var(--gx-notch); font-family: var(--sans); font-size: 20px; letter-spacing: 0; text-transform: none; color: var(--gx-ink);
  background: linear-gradient(#fffaf0 0 3px, var(--gx-paper) 3px calc(100% - 4px), #c2b28c calc(100% - 4px)); box-shadow: inset 0 0 0 2px var(--gx-o); padding: 4px 12px 6px; }
#settings .mini-btn:hover, #settings .chip-t:hover { background: linear-gradient(#fff4c8 0 3px, var(--gx-gold) 3px calc(100% - 4px), var(--gx-gold-lo) calc(100% - 4px)); color: var(--gx-ink); }
#settings .chip-t { width: 40px; height: 34px; padding: 0; } #settings .chip-t.on { background: linear-gradient(#fff4c8 0 3px, var(--gx-gold) 3px calc(100% - 4px), var(--gx-gold-lo) calc(100% - 4px)); }
#settings .mini-btn.done { background: #3f9b62; color: #fff; }
#settings .stp-c { border-radius: 0; clip-path: var(--gx-notch); background: #0b2118; box-shadow: inset 0 0 0 2px var(--gx-o); }
#settings .stp-b { border-radius: 0; clip-path: var(--gx-notch); background: var(--gx-rim); box-shadow: inset 0 2px 0 var(--gx-rim-hi), inset 0 -2px 0 var(--gx-rim-lo); }
#settings .stp-b:hover:not(:disabled) { background: var(--gx-gold-hi); }
#settings .stp-v { font-family: var(--sans); font-weight: 400; font-size: 24px; color: var(--gx-rim-hi); }
#settings .stp-tag, #settings .sn-no { font-family: var(--mono); font-size: 16px; color: var(--gx-txt-2); }
#settings .kslot { height: 28px; border-radius: 0; clip-path: var(--gx-notch); font-family: var(--mono); font-size: 16px; color: var(--gx-ink);
  background: var(--gx-paper); box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 -3px 0 2px #c2b28c; }
#settings .kb-r { padding: 2px 0; border-bottom: 2px solid var(--gx-line); } :root body #settings .kb-h { font-family: var(--sans); font-size: 18px; letter-spacing: 0; text-transform: none; color: var(--gx-txt-2); }
#settings .kb-r > span:first-child, #settings .kb-r > b:first-child { font-family: var(--sans); font-size: 20px; }
#settings .kslot.empty { background: #0b2118; color: var(--gx-txt-2); box-shadow: inset 0 0 0 2px var(--gx-o); }
#settings .kslot.lock { opacity: .8; }

/* Datos: los botones de la casa (papel) y los de borrar (rojo, se arman con un primer clic) */
:root body #settings .row-btn { justify-content: center; min-height: 44px; padding: 5px 14px 7px; margin-bottom: 6px; border: 0; border-radius: 0; clip-path: var(--gx-notch);
  font-family: var(--sans); font-size: 22px; letter-spacing: 0; text-transform: none; color: var(--gx-ink); white-space: normal; line-height: 1.05; text-align: center;
  background: linear-gradient(#fffaf0 0 4px, var(--gx-paper) 4px calc(100% - 6px), #c2b28c calc(100% - 6px)); box-shadow: inset 0 0 0 2px var(--gx-o); }
:root body #settings .row-btn > span { font-size: 22px; }
:root body #settings .row-btn:hover { background: linear-gradient(#fff4c8 0 4px, var(--gx-gold) 4px calc(100% - 6px), var(--gx-gold-lo) calc(100% - 6px)); }
:root body #settings .row-btn.danger { color: #ffd2cd; background: #2a0d0b; box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 0 0 4px var(--gx-red); }
:root body #settings .row-btn.danger:hover, :root body #settings .row-btn.danger.armed { color: #fff; background: linear-gradient(var(--gx-red-hi) 0 4px, var(--gx-red) 4px calc(100% - 6px), var(--gx-red-lo) calc(100% - 6px)); box-shadow: inset 0 0 0 2px var(--gx-o); }

/* idiomas: rejilla de 6, el elegido en papel */
#settings .langgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
#settings .langgrid button { padding: 12px 6px 10px; gap: 8px; border: 0; border-radius: 0; clip-path: var(--gx-notch); font-family: var(--sans); font-size: 20px; letter-spacing: 0; text-transform: none;
  color: var(--gx-txt); background: #0b2118; box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 0 0 4px rgba(212, 160, 74, .25); transform: none; }
#settings .langgrid button:hover { background: rgba(212, 160, 74, .16); }
#settings .langgrid button.on { color: var(--gx-ink); background: var(--gx-card); box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 -4px 0 2px var(--gx-paper-lo); }
#settings .lang-flag { width: 40px; box-shadow: 0 0 0 2px var(--gx-o); border-radius: 0; }

/* tu nombre: un papel donde se escribe */
#settings .sn-row input { height: 52px; border-radius: 0; clip-path: var(--gx-notch); font-family: var(--sans); font-size: 26px; color: var(--gx-ink);
  background: var(--gx-paper); box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 4px 0 2px #ded2b4; }

/* el pie con los atajos: teclas de papel */
#settings .set-keys { border-top: 2px solid var(--gx-line); font-family: var(--sans); font-size: 18px; color: var(--gx-txt-2); padding: 10px 40px 14px calc(88px + (100% - 256px) / 4); justify-content: flex-start; }   /* bajo el panel (columna 4): la esquina de abajo a la izquierda es del crupier */
#settings .set-keys kbd { border-radius: 0; font-family: var(--mono); font-size: 16px; color: var(--gx-ink); background: var(--gx-paper); box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 -2px 0 2px #c2b28c; padding: 3px 7px 2px; }

/* el aviso de reasignar del crupier (#rbOv) y sus cajas: tambien carteles del sistema */
#settings .rb-box { border-radius: 0; clip-path: var(--gx-notch); background: radial-gradient(130% 90% at 50% 0%, var(--gx-felt-1) 0%, var(--gx-felt-2) 55%, var(--gx-felt-3) 100%);
  box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 0 0 8px var(--gx-rim), inset 0 0 0 10px var(--gx-o); }

@media (max-width: 899px), (max-height: 519px) {
  #settings .set-top { padding: 12px 16px 0; } #settings .set-title h1 { font-size: 40px; }
  #settings .set-body { grid-template-columns: minmax(0, 1fr); padding: 12px 16px; }
  :root body #settings .set-nav { grid-column: 1; flex-direction: row; overflow-x: auto; } #settings .set-panes { grid-column: 1; }
  #settings .langgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #settings .set-keys { padding: 10px 16px 12px; justify-content: center; }
}

/* ---------------------------------------------------------------- PERFIL (v0.3.41): el libro de logros (js/hub.js, profile). 12 columnas:
   la ficha de socio (papel, cifras en columna) y el indice de tramos en las columnas 1-4; el libro (5-12), una pagina por tramo con una fila
   por logro: su ficha (gris si aun no la tienes), el nombre, COMO SE CONSIGUE y el progreso o la fecha. Solo la lista de la pagina se desplaza,
   fila a fila. Fondo de fieltro opaco: el mapa de detras no compite con la letra (y deja de dibujarse, A.coverMap) */
.pf-screen { z-index: 1; }
.pf-grid12 { grid-template-rows: auto minmax(0, 1fr); row-gap: 16px; }
.pf-head { grid-column: 1 / -1; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; gap: 24px; min-width: 0; }
.pf-head #hubBack .ic { width: 22px; height: 22px; }
.pf-h { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.pf-hic .ic { display: block; width: 48px; height: 48px; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(2, 6, 4, .7)); }
.pf-sum { grid-column: 4; display: grid; grid-template-columns: auto auto 160px; align-items: center; gap: 12px; }
.pf-sum b { font-family: var(--sans); font-weight: 400; font-size: 40px; line-height: 1; color: var(--gx-ttl); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-sum b i { font-style: normal; font-size: 24px; color: var(--gx-txt-2); }
.pf-head .menu-tools { grid-column: 5; }

.pf-left { grid-column: 1 / 5; grid-row: 2; min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; }
.pf-socio { display: grid; gap: 5px; padding: 14px 18px 16px; }
.pf-name { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: .95; color: var(--gx-ink); overflow-wrap: anywhere; }
.pf-since { font-size: 18px; line-height: 1.1; color: var(--gx-ink-2); }
.pf-stat { font-size: 18px; line-height: 1.05; }
.pf-stat s { transform: translateY(-4px); }
.pf-idx { display: grid; gap: 3px; align-content: start; min-height: 0; overflow-y: auto; padding: 2px; }   /* v0.3.62: ocho filas (con Mesas): a 16:9 caben sin desplazar */
.pf-ix { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 36px; padding: 3px 14px 3px 10px; border: 0; cursor: pointer; text-align: left;
  font-family: var(--sans); font-size: 20px; line-height: 1; color: var(--gx-txt); clip-path: var(--gx-notch); background: #0b2118; box-shadow: inset 0 0 0 2px rgba(212, 160, 74, .35); }
.pf-ix .ic { display: block; width: 32px; height: 32px; image-rendering: pixelated; }
.pf-ix span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-ix i { font-style: normal; font-size: 18px; color: var(--gx-txt-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-ix:hover:not(.on) { background: #143326; }
.pf-ix.on { cursor: default; color: var(--gx-ink); background: var(--gx-card); box-shadow: inset 8px 0 0 var(--gx-rim), inset 0 0 0 2px var(--gx-o); }
.pf-ix.on i { color: var(--gx-ink-2); }
.pf-ix.hot:not(.on) { box-shadow: inset 0 0 0 2px var(--gx-rim); } .pf-ix.hot:not(.on) i, .pf-ix.full:not(.on) i { color: var(--gx-rim-hi); }
.pf-ix:focus { outline: none; }
.pf-ix:focus-visible::after, html[data-input="pad"] .pf-ix:focus::after { content: ""; position: absolute; inset: 4px; box-shadow: inset 0 0 0 2px #fff; animation: gx-focus 1.2s steps(2, end) infinite; pointer-events: none; }

.pf-right { grid-column: 5 / 13; grid-row: 2; min-width: 0; min-height: 0; }
.pf-book { height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 10px; padding: 16px 22px 18px; }
.pf-bh { display: grid; grid-template-columns: 48px minmax(0, 1fr) 200px; gap: 14px; align-items: center; }
.pf-bic .ic { display: block; width: 48px; height: 48px; image-rendering: pixelated; }
.pf-bt { display: grid; gap: 4px; min-width: 0; }
.pf-bt .gx-t-m { color: var(--gx-ink); text-shadow: none; overflow-wrap: anywhere; }
.pf-bc { display: grid; gap: 6px; justify-items: end; }
.pf-bc b { font-family: var(--sans); font-weight: 400; font-size: 34px; line-height: 1; color: var(--gx-ink); font-variant-numeric: tabular-nums; } .pf-bc b i { font-style: normal; font-size: 22px; color: var(--gx-ink-2); }
.pf-bc .gx-bar { width: 100%; }
.pf-rows { list-style: none; margin: 0; padding: 0 12px 0 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y proximity; display: grid; align-content: start; }
.pf-row { scroll-snap-align: start; display: grid; grid-template-columns: 64px minmax(0, 1fr) 176px; gap: 16px; align-items: center; padding: 6px 0; border-bottom: 2px solid var(--gx-line); }
.pf-row:last-child { border-bottom: 0; }
.pf-chip { display: block; width: 64px; height: 64px; filter: drop-shadow(0 3px 0 rgba(22, 36, 28, .35)); }
.pf-chip .ic { image-rendering: pixelated; }
.pf-row:not(.got) .pf-chip img { filter: grayscale(1) brightness(.62); }
.pf-tx { display: grid; gap: 3px; min-width: 0; }
.pf-tx b { font-family: var(--sans); font-weight: 400; font-size: 24px; line-height: 1; color: var(--gx-ink); overflow-wrap: anywhere; }
.pf-tx i { font-style: normal; font-size: 18px; line-height: 1.15; color: #3f5045; overflow-wrap: anywhere; text-wrap: pretty; }   /* sin A.squeeze (data-nosq): media cada texto al abrir */
.pf-row.hid .pf-tx b { letter-spacing: .2em; }
.pf-row.hid .pf-tx i { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px; align-items: center; }   /* la pista del crupier: su cara y su frase */
.pf-tx .pf-hint { display: block; width: 52px; height: 52px; image-rendering: pixelated; }
.pf-mt { display: grid; gap: 6px; justify-items: end; min-width: 0; font-size: 18px; color: var(--gx-ink-2); }
.pf-mt b { font-family: var(--sans); font-weight: 400; font-size: 20px; line-height: 1; color: var(--gx-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-mt .gx-bar { width: 100%; height: 10px; }
.pf-got { display: inline-flex; align-items: center; gap: 6px; color: #8a5a12; white-space: nowrap; }
.pf-got .ic { width: 22px; height: 22px; image-rendering: pixelated; } .pf-got em { font-style: normal; font-size: 18px; }
.pf-empty { padding: 28px 8px; font-size: 22px; line-height: 1.2; color: var(--gx-ink-2); }
/* el crupier comenta el Perfil abajo a la derecha (js/dealer.js, screenSay "prof"): a la izquierda estan la ficha y el indice */
.dealer.screen.prof { left: auto; right: 20px; flex-direction: row-reverse; transform: translateX(140%); }
.dealer.screen.prof.in { transform: none; }
.dealer.screen.prof .dl-face { width: 130px; height: 130px; }
.dealer.screen.prof .dl-bubble { max-width: 420px; margin-bottom: 36px; }
@media (max-width: 899px), (max-height: 519px) {                                  /* movil: una columna y la pantalla entera se desplaza */
  .pf-screen { overflow-y: auto; }
  .pf-grid12 { position: static; padding: 14px 16px 20px; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 12px; }
  .pf-head { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; } .pf-sum { display: none; } .pf-head .menu-tools { grid-column: 3; } .pf-h { font-size: 40px; }
  .pf-left, .pf-right { grid-column: 1; grid-row: auto; } .pf-idx { overflow: visible; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-book { height: auto; } .pf-rows { overflow: visible; }
  .pf-row { grid-template-columns: 48px minmax(0, 1fr); } .pf-chip { width: 48px; height: 48px; } .pf-mt { grid-column: 2; justify-items: start; } .pf-bh { grid-template-columns: 40px minmax(0, 1fr); } .pf-bc { grid-column: 1 / -1; justify-items: start; }
}

/* ---------------------------------------------------------------- RETO DIARIO (v0.3.45): la mano sobre la mesa (js/hub.js, daily). 12 columnas: la mesa de
   fieltro (1-8) con la mano del dia en tres naipes que dicen que hace cada carta, la ruta y los tres intentos como fichas que se gastan; la pizarra de
   papel (9-12) con Hoy y Ayer, tus cifras y la cuenta atras. Mayusculas espaciadas solo en encabezados de seccion */
.dia-screen { z-index: 1; }
.dia-grid { grid-template-rows: auto minmax(0, 1fr); row-gap: 16px; }
.dia-head { grid-column: 1 / -1; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 24px; min-width: 0; }
.dia-head #hubBack .ic { width: 22px; height: 22px; }
.dia-h { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.dia-hic .ic { display: block; width: 48px; height: 48px; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(2, 6, 4, .7)); }
.dia-meta { justify-self: stretch; display: flex; justify-content: flex-end; align-items: center; gap: 12px; min-width: 0; overflow: hidden; } .dia-meta > * { flex: none; } .dia-meta > .dia-date { flex: 0 1 auto; }   /* sin sitio, la fecha se corta (nunca pisa el titulo) */
.dia-date { font-size: 22px; color: var(--gx-txt-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dia-date::first-letter { text-transform: uppercase; }
.dia-seed { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 2px 14px 4px 10px; background: #0b2118; box-shadow: inset 0 0 0 2px rgba(212, 160, 74, .55); font-size: 22px; color: var(--gx-rim-hi); white-space: nowrap; cursor: help; }
.dia-seed .ic { width: 24px; height: 24px; image-rendering: pixelated; } .dia-seed b { font-weight: 400; letter-spacing: .06em; }
.dia-ptag { align-self: center; padding: 4px 12px 6px; clip-path: var(--gx-notch); background: var(--gx-rim); color: var(--gx-ink); font-size: 20px; box-shadow: inset 0 2px 0 var(--gx-rim-hi), inset 0 -2px 0 var(--gx-rim-lo); white-space: nowrap; }
.dia-other .ic, .dia-today .ic { width: 22px; height: 22px; image-rendering: pixelated; }
.dia-head .menu-tools { grid-column: 4; }

.dia-left { grid-column: 1 / 9; grid-row: 2; min-width: 0; min-height: 0; }
.dia-mesa { height: 100%; display: grid; grid-template-rows: auto auto auto 1fr; gap: 12px; padding: 18px 22px 20px; min-height: 0; }
.dia-mh { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-width: 0; } .dia-mh h3 { cursor: help; white-space: nowrap; } .dia-mh .dia-date { text-align: right; }
.dia-mano { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dia-nk { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: center; gap: 8px 12px; padding: 12px 16px 16px; min-width: 0; clip-path: none; }   /* piezas pequenas con contorno: sin recorte (no se nota y cuesta en la primera apertura) */
.dia-art, .dia-asc { position: relative; display: block; width: 48px; height: 48px; }
.dia-art .ic, .dia-asc .ic { display: block; width: 48px; height: 48px; image-rendering: pixelated; }
.dia-asc em { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-family: var(--serif); font-size: 28px; line-height: 1; color: #3a2404; text-shadow: 0 2px 0 #ffe9a8; }
.dia-nt { display: grid; gap: 2px; min-width: 0; overflow: hidden; }
.dia-nt b { min-width: 0; font-family: var(--sans); font-weight: 400; font-size: 22px; line-height: 1; color: var(--gx-ink); }
.dia-nk > i { grid-column: 1 / -1; align-self: start; font-style: normal; font-size: 18px; line-height: 1.15; color: #3f5045; text-wrap: pretty; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }   /* mas de 4 lineas (algun idioma): el resto, en la ayuda del naipe */
/* la ruta del dia: el plano de la Aventura con las piezas del sistema (esquinas de pixel, fieltro y laton) */
.dia-ruta .rd.plan { --s: 36px; --sb: 44px; --gap: 6px; gap: 12px; margin: 0; }
.dia-ruta .rd.plan .rd-n.inf em { display: none; }   /* solo el simbolo (su nombre, en la ayuda): "Бесконечный" ensanchaba la columna y los jefes se salian */
.dia-ruta .rd.plan .rd-act, .dia-ruta .rd.plan .rd-inf { border-radius: 0; padding: 8px 12px 8px; background: #0b2118; box-shadow: inset 0 0 0 2px rgba(212, 160, 74, .35); }
.dia-ruta .rd.plan .rd-h b { font-size: 16px; letter-spacing: .08em; color: var(--gx-acc); }
.dia-ruta .rd.plan .rd-h i { font-family: var(--sans); font-size: 18px; }
.dia-ruta .rd.plan .rd-ic { border-radius: 0; }   /* casillas pequenas sin recorte: a este tamano el escalon apenas se ve y cada recorte cuesta en la primera apertura */
.dia-ruta .rd.plan .rd-ic .ic { width: 32px; height: 32px; } .dia-ruta .rd.plan .rd-n.boss .rd-ic .ic { width: 40px; height: 40px; }
.dia-ruta .rd.plan .rd-n em { font-size: 16px; margin-top: 4px; }

/* los tres intentos: tres fichas */
.dia-int { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 20px; min-height: 0; }
.dia-fichas { display: flex; gap: 18px; }
.dia-fi { position: relative; display: grid; justify-items: center; align-content: end; gap: 2px; min-width: 96px; padding: 4px 2px 2px; border: 0; background: none; color: var(--gx-txt); font-family: var(--sans); text-align: center; }
.dia-chip { position: relative; display: block; width: 64px; height: 64px; transition: transform .2s cubic-bezier(.2, .9, .3, 1); }
.dia-chip .ic { display: block; width: 64px; height: 64px; image-rendering: pixelated; filter: drop-shadow(0 4px 0 rgba(2, 6, 4, .6)); }
.dia-chip em { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-family: var(--serif); font-size: 34px; line-height: 1; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .55); }
.dia-fi b { font-weight: 400; font-size: 26px; line-height: 1; color: var(--gx-ttl); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dia-fi i { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 18px; line-height: 1.1; color: var(--gx-txt-2); white-space: nowrap; }
.dia-fi i .ic { width: 16px; height: 16px; }
.dia-fi.used .dia-chip .ic { filter: grayscale(.55) brightness(.72) drop-shadow(0 4px 0 rgba(2, 6, 4, .6)); }
.dia-fi.next .dia-chip { filter: drop-shadow(0 0 12px rgba(255, 207, 102, .6)); } .dia-fi.next i { color: var(--gx-rim-hi); }
.dia-fi.free { opacity: .55; }
.dia-fi.live .dia-chip { animation: dia-live 1.6s ease-in-out infinite; } .dia-fi.live i { color: #ff9d94; }
@keyframes dia-live { 50% { transform: translateY(-4px); } }
button.dia-fi { cursor: pointer; } button.dia-fi:hover .dia-chip { transform: translateY(-4px); } button.dia-fi i { color: var(--gx-rim-hi); }
button.dia-fi:focus { outline: none; }
button.dia-fi:focus-visible::after, html[data-input="pad"] button.dia-fi:focus::after { content: ""; position: absolute; inset: -4px; box-shadow: inset 0 0 0 2px #fff; animation: gx-focus 1.2s steps(2, end) infinite; pointer-events: none; }
.dia-tot { display: grid; justify-items: end; gap: 10px; min-width: 0; }
.dia-sum { display: flex; align-items: baseline; gap: 12px; cursor: help; } .dia-sum span { font-size: 20px; color: var(--gx-txt-2); }
.dia-sum b { font-family: var(--serif); font-weight: 400; font-size: 56px; line-height: .85; color: var(--gx-ttl); text-shadow: 0 4px 0 #050b08, 0 0 20px rgba(255, 196, 100, .22); font-variant-numeric: tabular-nums; }
.dia-go { display: grid; justify-items: end; gap: 4px; } .dia-sub { font-size: 18px; color: var(--gx-txt-2); text-align: right; text-wrap: balance; }
.dia-done { display: flex; align-items: center; gap: 12px; padding: 8px 18px 10px 12px; clip-path: var(--gx-notch); background: rgba(212, 160, 74, .16); box-shadow: inset 0 0 0 2px var(--gx-rim); }
.dia-done .ic { width: 40px; height: 40px; } .dia-done span { display: grid; } .dia-done b { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1; color: var(--gx-ttl); } .dia-done i { font-style: normal; font-size: 18px; color: var(--gx-txt-2); }
/* la pizarra del dia */
.dia-right { grid-column: 9 / 13; grid-row: 2; min-width: 0; min-height: 0; }
.dia-board { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; gap: 10px; padding: 14px 16px 16px; }
.dia-board .dr-tabs { display: flex; } .dia-board .dr-tabs button { flex: 1 1 0; justify-content: center; min-width: 0; }
.dia-screen .dia-board .lb { margin: 0; min-height: 0; overflow: hidden; }
.dia-screen .dia-board .lb-src, .dia-screen .dia-board .lb-load, .dia-screen .dia-board .lb-empty { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 18px; letter-spacing: 0; text-transform: none; color: var(--gx-ink-2); }
.dia-screen .dia-board .lb-src .ic { width: 22px; height: 22px; margin: 0; }
.dia-screen .dia-board .lb ol { display: grid; gap: 0; }
.dia-screen .dia-board .lb li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; min-height: 32px; padding: 1px 8px; border-radius: 0; background: none; border-bottom: 2px solid var(--gx-line); font-family: var(--sans); font-size: 20px; line-height: 1; color: var(--gx-ink); }
.dia-screen .dia-board .lb li .lb-n { opacity: 1; font-size: 18px; color: var(--gx-ink-2); text-align: center; } .dia-screen .dia-board .lb li .lb-n .ic { width: 24px; height: 24px; margin: 0; }
.dia-screen .dia-board .lb .lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--sans); font-size: 20px; }
.dia-screen .dia-board .lb-tries { display: inline-flex; gap: 4px; } .dia-screen .dia-board .lb-tries i { width: 9px; height: 9px; background: #ded2b4; box-shadow: inset 0 0 0 2px var(--gx-o); } .dia-screen .dia-board .lb-tries i.on { background: var(--gx-red); }
.dia-screen .dia-board .lb li b { font-weight: 400; font-variant-numeric: tabular-nums; }
.dia-screen .dia-board .lb li.me { background: var(--gx-rim); box-shadow: inset 0 2px 0 var(--gx-rim-hi), inset 0 -2px 0 var(--gx-rim-lo); border-bottom: 0; }
.dia-screen .dia-board .lb li.me .lb-n { color: var(--gx-ink); }
.dia-screen .dia-board .lb li.lb-gap { display: block; min-height: 0; padding: 0; border: 0; background: none; text-align: center; line-height: .8; letter-spacing: .3em; color: var(--gx-ink-2); }
.dia-screen .dia-board .lb li.jump { cursor: pointer; }
.dia-screen .dia-board .dr-pager .pd-pgl { font-size: 20px; color: var(--gx-ink); } .dia-screen .dia-board .dr-pager .pd-pgl em { color: var(--gx-ink-2); }
.dia-stats { display: grid; gap: 2px; } .dia-stats .gx-lead-row { font-size: 18px; } .dia-stats .gx-lead-row s { transform: translateY(-4px); }
.dia-clock { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 18px; color: var(--gx-ink-2); cursor: help; }
.dia-clock .ic { width: 28px; height: 28px; image-rendering: pixelated; } .dia-clock b { margin-left: auto; font-family: var(--sans); font-weight: 400; font-size: 26px; color: var(--gx-ink); font-variant-numeric: tabular-nums; }
.dia-today { justify-self: start; }
@media (max-width: 899px), (max-height: 519px) {                                  /* movil: una columna y la pantalla entera se desplaza */
  .dia-screen { overflow-y: auto; }
  .dia-grid { position: static; padding: 14px 16px 20px; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 12px; }
  .dia-head { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; } .dia-meta { grid-column: 1 / -1; grid-row: 2; justify-self: start; flex-wrap: wrap; } .dia-head .menu-tools { grid-column: 3; grid-row: 1; } .dia-h { font-size: 40px; }
  .dia-left, .dia-right { grid-column: 1; grid-row: auto; } .dia-mano { grid-template-columns: minmax(0, 1fr); } .dia-ruta { overflow-x: auto; }
  .dia-int { grid-template-columns: minmax(0, 1fr); } .dia-tot { justify-items: start; } .dia-board { height: auto; } .dia-screen .dia-board .lb { overflow: visible; }
}

/* ---------------------------------------------------------------- CLASICO (v0.3.46): carta de campanas (js/hub.js, campaigns). 12 columnas: los 12 naipes de
   campana sobre el fieltro (1-7) y la ficha de papel de la elegida (8-12) con su nivel de salida y el boton. Sin desplazar: cabe tambien en la Deck */
.cl-screen { z-index: 1; }
.cl-grid { grid-template-rows: auto minmax(0, 1fr); row-gap: 16px; }
.cl-head { grid-column: 1 / -1; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 24px; min-width: 0; }
.cl-head #hubBack .ic { width: 22px; height: 22px; }
.cl-h { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.cl-hic .ic { display: block; width: 48px; height: 48px; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(2, 6, 4, .7)); }
.cl-meds { justify-self: end; display: flex; align-items: center; gap: 18px; min-width: 0; }
.cl-mc { display: inline-flex; align-items: center; gap: 6px; font-size: 28px; color: var(--gx-ttl); }
.cl-mc .ic { width: 36px; height: 36px; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(2, 6, 4, .6)); } .cl-mc b { font-weight: 400; font-variant-numeric: tabular-nums; }
.cl-of { font-size: 20px; color: var(--gx-txt-2); white-space: nowrap; }
.cl-head .menu-tools { grid-column: 4; }

.cl-left { grid-column: 1 / 8; grid-row: 2; min-width: 0; min-height: 0; }
.cl-mesa { height: 100%; padding: 18px 20px 20px; min-height: 0; }
.cl-cards { height: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 12px; }
.cl-card { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 6px; min-width: 0; min-height: 0; padding: 8px 8px 10px; border: 0; cursor: pointer; text-align: left;
  background: var(--gx-card); color: var(--gx-ink); box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 -4px 0 2px var(--gx-paper-lo); font-family: var(--sans);
  transition: transform .18s cubic-bezier(.2, .9, .3, 1); }   /* sin clip-path: con su contorno oscuro de 2 px el escalon no se ve, y recortar 12 naipes costaba 5 fotogramas al abrir */
.cl-artbox { position: relative; display: block; min-width: 0; min-height: 0; overflow: hidden; background: var(--gx-o); box-shadow: 0 0 0 2px var(--gx-o); }   /* la portada entera, centrada; js/hub.js (clFit) le da escala entera y sitio */
.cl-art { position: absolute; left: 0; top: 0; display: block; width: var(--cl-aw, 100%); height: var(--cl-ah, 100%); object-fit: contain; image-rendering: pixelated; }
.cl-card b { height: 2em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: 400; font-size: 20px; line-height: 1; min-width: 0; }   /* dos lineas: cortado con "…", en ruso "Eventos" y "Personajes" quedaban iguales */
.cl-pips { display: flex; gap: 3px; } .cl-pips i { flex: 1 1 0; height: 8px; background: #ded2b4; box-shadow: inset 0 0 0 2px var(--gx-o); } .cl-pips i.on { background: var(--gx-gold-lo); }   /* niveles jugados: ocre oscuro, que se distinga del papel */
.cl-card .cl-md { position: absolute; right: 4px; top: 4px; }
.cl-md .ic { display: block; width: 32px; height: 32px; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)); }
.cl-card:hover:not(.sel) { transform: translateY(-2px); }
.cl-card.sel { background: var(--gx-rim); box-shadow: inset 0 2px 0 var(--gx-rim-hi), inset 0 -4px 0 var(--gx-rim-lo), inset 0 0 0 2px var(--gx-o); cursor: default; }
.cl-card.sel .cl-pips i { background: #e8c27a; } .cl-card.sel .cl-pips i.on { background: var(--gx-ink); }
.cl-card:focus { outline: none; }
.cl-card:focus-visible::after, html[data-input="pad"] .cl-card:focus::after { content: ""; position: absolute; inset: 4px; box-shadow: inset 0 0 0 2px #fff; animation: gx-focus 1.2s steps(2, end) infinite; pointer-events: none; }

.cl-right { grid-column: 8 / 13; grid-row: 2; min-width: 0; min-height: 0; }
.cl-ficha { height: 100%; display: grid; grid-template-rows: auto auto auto 1fr auto auto; gap: 10px; padding: 16px 20px 18px; min-height: 0; }
.cl-big { justify-self: center; display: block; width: 270px; height: 180px; image-rendering: pixelated; box-shadow: 0 0 0 3px var(--gx-o); }
.cl-ft { display: flex; align-items: center; gap: 12px; min-width: 0; } .cl-ft .gx-t-m { color: var(--gx-ink); text-shadow: none; overflow-wrap: break-word; min-width: 0; } .cl-ft .cl-md .ic { width: 40px; height: 40px; }
.cl-d { color: #3f5045; text-wrap: pretty; }
.cl-rec { display: grid; gap: 2px; align-content: start; } .cl-rec .gx-lead-row { font-size: 20px; }
.cl-start { display: grid; gap: 8px; }
.cl-lvs { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; }
.cl-lv { position: relative; display: grid; place-items: center; height: 40px; padding: 0; border: 0; cursor: pointer; font-family: var(--sans); font-size: 22px; line-height: 1; color: var(--gx-ink);
  background: #ede3c9; box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 -3px 0 2px var(--gx-paper-lo); transition: transform .15s cubic-bezier(.2, .9, .3, 1); }
.cl-lv:hover:not(:disabled):not(.on) { transform: translateY(-2px); }
.cl-lv:disabled { cursor: default; background: #0b2118; color: rgba(185, 198, 182, .35); box-shadow: inset 0 0 0 2px rgba(212, 160, 74, .18); }
.cl-lv.on { cursor: default; background: var(--gx-rim); box-shadow: inset 0 2px 0 var(--gx-rim-hi), inset 0 -3px 0 var(--gx-rim-lo), inset 0 0 0 2px var(--gx-o); }
.cl-lv:focus { outline: none; }
.cl-lv:focus-visible::after, html[data-input="pad"] .cl-lv:focus::after { content: ""; position: absolute; inset: 3px; box-shadow: inset 0 0 0 2px #fff; animation: gx-focus 1.2s steps(2, end) infinite; pointer-events: none; }
.cl-go { justify-self: end; }
@media (max-width: 899px), (max-height: 519px) {                                  /* movil: una columna y la pantalla entera se desplaza */
  .cl-screen { overflow-y: auto; }
  .cl-grid { position: static; padding: 14px 16px 20px; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 12px; }
  .cl-head { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; } .cl-meds { grid-column: 1 / -1; grid-row: 2; justify-self: start; } .cl-head .menu-tools { grid-column: 3; grid-row: 1; } .cl-h { font-size: 40px; }
  .cl-left, .cl-right { grid-column: 1; grid-row: auto; } .cl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; } .cl-ficha { height: auto; }
}

/* ---------------------------------------------------------------- AVENTURA (v0.3.47): la mesa de salida (js/hub.js, adventure). 12 columnas: la mesa de fieltro
   (1-8) con las cuatro barajas como naipes (retrato, que trae, kit, doblones y provisiones y, si esta cerrada, como se abre) y la ruta; el boleto de papel
   (9-12) con las seis fichas de Ascension, lo que hace la elegida, tus cifras y los botones. Sin desplazar: cabe tambien en la Deck */
.av-screen { z-index: 1; }
.av-grid { grid-template-rows: auto minmax(0, 1fr); row-gap: 16px; }
.av-head { grid-column: 1 / -1; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 24px; min-width: 0; }
.av-head #hubBack .ic { width: 22px; height: 22px; }
.av-h { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.av-hic .ic { display: block; width: 48px; height: 48px; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(2, 6, 4, .7)); }
.av-rel { justify-self: end; display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-size: 22px; color: var(--gx-txt-2); }
.av-rel .ic { flex: none; width: 32px; height: 32px; image-rendering: pixelated; } .av-rel span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-head .menu-tools { grid-column: 4; }

.av-left { grid-column: 1 / 9; grid-row: 2; min-width: 0; min-height: 0; }
.av-mesa { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; padding: 16px 16px 18px; min-height: 0; }
.av-mh { margin: 0; }   /* el mismo rotulo que "Ascension" en el boleto */
/* los cuatro naipes comparten filas (subgrid): retratos, nombres, kits y "se abre" a la misma altura en los cuatro */
.av-decks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto minmax(0, 1fr) auto auto; gap: 6px 10px; min-height: 0; }
.av-dk { position: relative; grid-row: 1 / span 5; display: grid; grid-template-rows: subgrid; min-width: 0; min-height: 0; padding: 12px 10px 14px; border: 0; cursor: pointer; text-align: left;
  background: var(--gx-card); color: var(--gx-ink); box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 -4px 0 2px var(--gx-paper-lo); font-family: var(--sans);
  transition: transform .18s cubic-bezier(.2, .9, .3, 1); }   /* sin clip-path, como los naipes del Clasico: con su contorno oscuro el escalon no se ve */
.av-art { justify-self: center; display: block; width: 128px; height: 128px; }   /* retratos de 64 px: x2 (si no caben, .tight los deja a x1) */
.av-art > .ic { display: block; width: 128px; height: 128px; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(2, 6, 4, .35)); }
.av-lock { position: absolute; right: 8px; top: 8px; }   /* en la esquina del naipe */ .av-lock .ic { display: block; width: 32px; height: 32px; image-rendering: pixelated; }
.av-dk > b { align-self: start; min-width: 0; font-weight: 400; font-size: 24px; line-height: 1; text-wrap: balance; }
.av-dd { align-self: stretch; min-height: 0; font-style: normal; font-size: 18px; line-height: 1.15; color: #3f5045; text-wrap: pretty; overflow: hidden; }
.av-dd.trim { align-self: start; display: -webkit-box; -webkit-box-orient: vertical; }   /* no cabe ni con retratos de 64: lineas enteras y "…" (js/hub.js, avFit) */
.av-decks.tight .av-art, .av-decks.tight .av-art > .ic { width: 64px; height: 64px; }
.av-kit { display: flex; align-items: center; gap: 2px; min-height: 28px; }   /* kit y doblones/provisiones en una linea (3 cartas como mucho: cabe) */
.av-kit .ic.kit { display: block; width: 28px; height: 28px; image-rendering: pixelated; }
.av-sts { display: inline-flex; gap: 6px; margin-left: auto; padding-left: 4px; }
.av-st { display: inline-flex; align-items: center; gap: 2px; font-size: 20px; line-height: 1; font-variant-numeric: tabular-nums; } .av-st .ic { width: 20px; height: 20px; image-rendering: pixelated; }
.av-how { display: grid; gap: 2px; padding-top: 6px; border-top: 2px dashed rgba(22, 36, 28, .25); font-size: 18px; line-height: 1.1; color: var(--gx-ink); text-wrap: pretty; cursor: help; }
.av-how .gx-eyb { color: var(--gx-gold-lo); }
.av-dk:hover:not(.sel):not(.lk) { transform: translateY(-2px); }
.av-dk.sel { background: var(--gx-rim); box-shadow: inset 0 2px 0 var(--gx-rim-hi), inset 0 -4px 0 var(--gx-rim-lo), inset 0 0 0 2px var(--gx-o); cursor: default; } .av-dk.sel .av-dd { color: var(--gx-ink); }
.av-dk.lk { background: #d9cfb3; cursor: default; } .av-dk.lk .av-art > .ic { filter: grayscale(1) brightness(.75); opacity: .7; } .av-dk.lk .av-kit { opacity: .75; }
.av-dk:focus { outline: none; }
.av-dk:focus-visible::after, html[data-input="pad"] .av-dk:focus::after { content: ""; position: absolute; inset: 4px; box-shadow: inset 0 0 0 2px #fff; animation: gx-focus 1.2s steps(2, end) infinite; pointer-events: none; }
.av-ruta { min-width: 0; }

.av-right { grid-column: 9 / 13; grid-row: 2; min-width: 0; min-height: 0; }
.av-boleto { height: 100%; display: grid; grid-template-rows: auto auto auto auto minmax(0, 1fr); gap: 12px; padding: 16px 20px 18px; min-height: 0; }
.av-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.av-asc { position: relative; display: grid; place-items: center; height: 60px; padding: 0; border: 0; background: none; cursor: pointer; font-family: var(--sans); transition: transform .15s cubic-bezier(.2, .9, .3, 1); }
.av-asc .ic { display: block; width: 48px; height: 48px; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(2, 6, 4, .45)); }
.av-asc em { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-family: var(--serif); font-size: 30px; line-height: 1; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .55); }
.av-asc:hover:not(.on):not([aria-disabled]) { transform: translateY(-2px); }
.av-asc.on { background: rgba(212, 160, 74, .35); box-shadow: inset 0 -4px 0 var(--gx-rim-lo); cursor: default; }
.av-asc[aria-disabled] { cursor: default; } .av-asc[aria-disabled] .ic { filter: grayscale(1) brightness(.7); opacity: .55; } .av-asc[aria-disabled] em { opacity: .6; }
.av-asc:focus { outline: none; }
.av-asc:focus-visible::after, html[data-input="pad"] .av-asc:focus::after { content: ""; position: absolute; inset: 2px; box-shadow: inset 0 0 0 2px var(--gx-ink); animation: gx-focus 1.2s steps(2, end) infinite; pointer-events: none; }
.av-ad { display: grid; gap: 4px; padding: 10px 14px 12px; background: #efe4c8; box-shadow: inset 0 0 0 2px rgba(22, 36, 28, .2); min-width: 0; }
.av-ax { display: flex; justify-content: space-between; gap: 12px; font-size: 18px; line-height: 1.1; color: var(--gx-gold-lo); } .av-ax > span:last-child { white-space: nowrap; cursor: help; }
.av-ad b { font-weight: 400; font-size: 26px; line-height: 1; color: var(--gx-ink); text-wrap: balance; }
.av-ad i { font-style: normal; font-size: 18px; line-height: 1.15; color: #3f5045; text-wrap: pretty; }
.av-stats { display: grid; gap: 2px; } .av-stats .gx-lead-row { font-size: 20px; } .av-stats .gx-lead-row s { transform: translateY(-4px); }
.av-go { align-self: end; display: grid; gap: 8px; min-width: 0; }
.av-sub { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; font-size: 18px; line-height: 1.1; color: var(--gx-ink-2); text-align: center; }
.av-sub > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .av-sub .sb-coin { width: 18px; height: 18px; margin: 0; image-rendering: pixelated; }
.av-new .av-ns { flex: none; font-size: 18px; opacity: .8; white-space: nowrap; } .av-new.armed .av-ns { display: none; }
@media (max-width: 899px), (max-height: 519px) {                                  /* movil: una columna y la pantalla entera se desplaza */
  .av-screen { overflow-y: auto; }
  .av-grid { position: static; padding: 14px 16px 20px; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 12px; }
  .av-head { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; } .av-rel { grid-column: 1 / -1; grid-row: 2; justify-self: start; } .av-head .menu-tools { grid-column: 3; grid-row: 1; } .av-h { font-size: 40px; }
  .av-left, .av-right { grid-column: 1; grid-row: auto; } .av-decks { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; } .av-dk { grid-row: auto; grid-template-rows: auto auto 1fr auto auto; }
  .av-ruta { overflow-x: auto; } .av-boleto { height: auto; }
}

/* ---------------------------------------------------------------- CAMPAMENTO (v0.3.48): el boleto de la ronda (js/adventure.js, renderShop). 12 columnas:
   el fieltro (1-8) con las cartas rectas y del mismo tamano, la Barra en tres placas iguales y la mochila; a la derecha (9-12) el boleto de papel
   de la proxima ronda y, debajo, el boton. La descripcion de cada carta va siempre entera (usuario): si no cabe, crece la fila y A.fitK baja la escala
   de la mesa entera; nunca se corta. Fieltro opaco: el mapa de detras deja de dibujarse (A.coverMap). El marco de oro de la legendaria y su
   secuencia en el cofre siguen en css/campamento.css (PAN DE ORO) */
.table.mesa.gx-camp { position: relative; height: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto minmax(min-content, 1fr) auto auto;
  column-gap: 16px; row-gap: 12px; padding: 12px 40px 16px; text-align: left; color: var(--gx-txt); font-family: var(--sans);
  background: url(../assets/dados/felt.png) 0 0 / 32px 32px, radial-gradient(ellipse 90% 80% at 50% 0%, #173b2b 0%, #0b1d15 52%, #050c08 100%); image-rendering: pixelated; }
.gx-camp > .tb-head { grid-column: 1 / -1; grid-row: 1; }
.gx-camp > .tb-shop { grid-column: 1 / 9; grid-row: 2; }
.gx-camp > .tb-sup { grid-column: 1 / 9; grid-row: 3; }
/* la tienda no baja de su alto: lo que crece con el idioma es el texto de la Barra, que ajusta su letra (A.adv.supFit) */
.gx-camp > .tb-shop { min-height: var(--shop-min, 336px); }
.gx-camp > .tb-tray { grid-column: 1 / 9; grid-row: 4; }
.gx-camp > .tb-next { grid-column: 9 / 13; grid-row: 2 / 4; }
.gx-camp > .go2-wrap { grid-column: 9 / 13; grid-row: 4; }
.gx-camp.chest > .tb-shop { grid-row: 2 / 4; }
.gx-camp .no { animation: nope .35s; }   /* sin doblones: la pieza tiembla (hub.css) */

/* cabecera: el acto y el titulo (con la ficha de la Ascension), la ruta y, a la derecha, el menu y los doblones */
.gx-camp .tb-head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 20px; min-width: 0; }
.gx-camp .tb-title { display: grid; gap: 2px; min-width: 0; }
.gx-camp .tb-title .tag { margin: 0; padding: 0; white-space: normal; text-wrap: balance; line-height: 1.05; background: none; box-shadow: none; border-radius: 0; }
.gx-camp .tb-trow { display: flex; align-items: center; gap: 12px; min-width: 0; }
.gx-camp .tb-trow h2 { white-space: nowrap; }
.gx-camp .tb-asc { position: relative; flex: none; width: 32px; height: 32px; cursor: help; }
.gx-camp .tb-asc .ic { display: block; width: 32px; height: 32px; filter: drop-shadow(0 2px 0 rgba(2, 6, 4, .6)); }
.gx-camp .tb-asc em { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-family: var(--serif); font-size: 20px; line-height: 1; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .6); }
.gx-camp .tb-head > .rd { justify-self: center; }
.gx-camp .tb-right { justify-self: end; display: flex; align-items: center; gap: 12px; }
.gx-camp .tb-menu .ic { width: 20px; height: 20px; }
.gx-camp .tb-coins { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 18px 2px 12px; clip-path: var(--gx-notch); background: #0b2118;
  box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 0 0 5px var(--gx-rim), inset 0 0 0 7px var(--gx-o); }
.gx-camp .tb-coins .ic { width: 32px; height: 32px; }
.gx-camp .tb-coins b { font-family: var(--serif); font-weight: 400; font-size: 36px; line-height: 1; color: var(--gx-ttl); font-variant-numeric: tabular-nums; }
.gx-camp .rd.bar .rd-ic { border-radius: 0; }   /* casillas de la ruta con esquina de pixel (sin recorte: pequenas y con contorno) */

/* la tienda: las cartas rectas y del mismo tamano (filas compartidas: arte, nombre, texto y precio a la misma altura) y el mazo de Cambiar cartas */
.gx-camp .tb-shop { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 14px 14px; }
.gx-camp .tb-note { margin: 0; font-size: 20px; line-height: 1.1; color: var(--gx-acc); text-align: center; text-wrap: balance; }
.gx-camp .shop-flash { position: absolute; left: 50%; top: 6px; z-index: 6; transform: translateX(-50%); margin: 0; padding: 4px 14px 6px; white-space: nowrap; font-family: var(--sans); font-size: 20px; letter-spacing: 0;
  color: #fff; background: var(--gx-red); clip-path: var(--gx-notch); box-shadow: inset 0 0 0 2px var(--gx-o); }
.gx-camp .offers { flex: 1 1 auto; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)) auto; grid-template-rows: auto auto 1fr auto; column-gap: 12px; row-gap: 6px; padding: 0; }   /* 1fr = nunca por debajo de su texto */
.gx-camp .offers > .tb-empty { grid-column: 1 / -1; grid-row: 1 / -1; align-self: center; margin: 0; font-size: 24px; text-align: center; color: var(--gx-txt-2); }
.gx-camp .offer.pc { --rc: #b7bfc4; --rcd: #56665a; --i: 0; position: relative; grid-row: 1 / span 4; display: grid; grid-template-rows: subgrid; justify-items: stretch; min-width: 0; width: auto; height: auto; max-height: none; margin: 0; padding: 10px 10px 10px;
  overflow: visible; border: 0; border-radius: 0; transform: none; text-align: center; color: var(--gx-ink); cursor: default;
  background: linear-gradient(var(--rc), var(--rc)) 0 0 / 100% 6px no-repeat, var(--gx-card); box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 -4px 0 2px var(--gx-paper-lo);
  animation: cp-deal .5s var(--gx-ease) both, cp-bob 5.2s ease-in-out infinite; animation-delay: calc(var(--i) * 90ms), calc(var(--i) * 420ms + .6s); transition: transform .18s var(--gx-ease); }
.gx-camp .offers > :nth-child(2) { --i: 1; } .gx-camp .offers > :nth-child(3) { --i: 2; } .gx-camp .offers > :nth-child(4) { --i: 3; } .gx-camp .offers > :nth-child(5) { --i: 4; }
@keyframes cp-deal { from { opacity: 0; translate: 46px -34px; rotate: 5deg; } }   /* repartidas desde el mazo; acaban rectas */
@keyframes cp-bob { 50% { translate: 0 -3px; } }
.gx-camp.again .offers > .offer.pc:not(.sold) { animation-name: cp-bob; animation-duration: 5.2s; animation-timing-function: ease-in-out; animation-delay: calc(var(--i) * 420ms + .6s); }   /* repintado sin reparto: las cartas no vuelven a entrar */
.gx-camp .offer.pc:hover:not(.sold) { transform: translateY(-6px); z-index: 4; }
.gx-camp .offer.pc.r1 { --rc: #4fb6a0; --rcd: #17765f; } .gx-camp .offer.pc.r2 { --rc: #c78bf0; --rcd: #7a3fb0; } .gx-camp .offer.pc.r3 { --rc: #ffd95a; --rcd: #8a5a12; }
.gx-camp .offer.pc.otool { --rc: #6c8cff; --rcd: #2d55a8; } .gx-camp .offer.pc.life { --rc: #fe5f55; --rcd: #9e2a26; }
/* la rareza, como etiqueta sobre el arte (la de la legendaria es su placa de laton, en css/campamento.css) */
.gx-camp .offer.pc .of-r { position: absolute; left: 10px; top: 10px; z-index: 2; max-width: calc(100% - 20px); padding: 2px 8px 4px; font-family: var(--sans); font-size: 18px; line-height: 1; letter-spacing: 0; text-transform: none; text-align: left;
  color: var(--gx-ink); background: var(--rc); box-shadow: inset 0 0 0 2px var(--gx-o); }
.gx-camp .offer.pc .of-ico { position: relative; display: grid; place-items: center; height: 108px; min-height: 0; margin: 0; padding: 26px 0 0; border: 0; border-radius: 0; overflow: hidden;
  background: url(../assets/dados/felt.png) 0 0 / 32px 32px, #1a4533; box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 6px 0 rgba(0, 0, 0, .22); }
.gx-camp .offer.pc .of-ico .ic { position: static; width: 72px; height: 72px; transform: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45)); }
.gx-camp .offer.pc .of-n { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1; text-wrap: balance; }
.gx-camp .offer.pc .of-n em { display: block; margin-top: 2px; font-style: normal; font-size: 18px; color: var(--rcd); }
.gx-camp .offer.pc > p { align-self: start; margin: 0; font-size: 18px; line-height: 1.12; color: #3f5045; text-wrap: pretty; }
.gx-camp .offers.cp1 .offer.pc > p { font-size: 17px; line-height: 1.1; } .gx-camp .offers.cp2 .offer.pc > p { font-size: 16px; line-height: 1.08; }   /* A.adv.supFit, solo si ni asi cabe */
.gx-camp .offer.pc .buy { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 36px; margin: 0; padding: 0 10px 2px; border: 0; border-radius: 0; cursor: pointer; white-space: nowrap;
  font-family: var(--sans); font-size: 24px; line-height: 1; color: var(--gx-ttl); background: #0b2118; clip-path: var(--gx-notch);
  box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 0 0 4px rgba(212, 160, 74, .55); transition: transform .12s steps(2, end), filter .12s; }
.gx-camp .offer.pc .buy .ic { width: 22px; height: 22px; }
.gx-camp .offer.pc .buy:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.15); }
.gx-camp .offer.pc .buy:disabled { cursor: default; opacity: .7; }
.gx-camp .offer.pc .buy:focus { outline: none; } .gx-camp .offer.pc .buy:focus-visible, html[data-input="pad"] .gx-camp .offer.pc .buy:focus { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px var(--gx-o); }
.gx-camp.chest .offer.pc .buy { color: var(--gx-ink); background: linear-gradient(var(--gx-gold-hi) 0 4px, var(--gx-gold) 4px calc(100% - 6px), var(--gx-gold-lo) calc(100% - 6px)); box-shadow: inset 0 0 0 2px var(--gx-o); }
.gx-camp .offer.pc.sold { opacity: .45; filter: grayscale(.7); animation: none; }
.gx-camp .offer.swap-src { box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 -4px 0 2px var(--gx-paper-lo), 0 0 0 3px var(--gx-gold), 0 0 22px rgba(248, 180, 73, .55); }
/* la legendaria: su marco de oro (campamento.css), botando suave como las demas (antes a saltos) */
.gx-camp .offers > .offer.pc.r3 { animation-timing-function: var(--gx-ease), ease-in-out; }
.gx-camp .offer.pc.r3 .of-ico { padding-top: 14px; }
.table.mesa.gx-camp .offer.pc.r3 .of-r { left: -10px; right: -10px; width: fit-content; margin-inline: auto; translate: none; max-width: calc(100% + 20px); padding: 3px 8px 4px; font-weight: 400; letter-spacing: .02em; white-space: normal; text-align: center; line-height: 1.05; }   /* la placa de laton pisa el borde y sobresale un poco; con "vende una..." parte en dos lineas */   /* la placa de laton cabe en la carta */
/* el mazo de Cambiar cartas, boca abajo al final de la fila */
.gx-camp .offers > .tb-actions { grid-row: 1 / -1; display: flex; align-items: center; min-width: 0; padding: 0; }
.gx-camp .tb-deck { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 88px; height: min(100%, 200px); padding: 12px 6px 14px; margin-right: 6px; border: 0; cursor: pointer; text-align: center;
  color: var(--gx-txt); font-family: var(--sans); font-size: 18px; line-height: 1.05; background: repeating-linear-gradient(45deg, rgba(255, 217, 138, .1) 0 4px, transparent 4px 10px), #17553a;
  box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 0 0 4px var(--gx-rim), inset 0 0 0 6px #0f3727, 3px 3px 0 0 #0f3727, 3px 3px 0 2px var(--gx-o), 6px 6px 0 0 #0f3727, 6px 6px 0 2px var(--gx-o); transition: transform .18s var(--gx-ease); }
.gx-camp .tb-deck:hover { transform: translateY(-3px); }
.gx-camp .tb-deck .tb-dk .ic { width: 36px; height: 36px; }
.gx-camp .tb-deck em { display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px 3px 4px; font-style: normal; font-size: 20px; color: var(--gx-ink); background: var(--gx-gold); box-shadow: inset 0 0 0 2px var(--gx-o); }
.gx-camp .tb-deck em .ic { width: 18px; height: 18px; }
.gx-camp .tb-deck:focus { outline: none; } .gx-camp .tb-deck:focus-visible, html[data-input="pad"] .gx-camp .tb-deck:focus { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px var(--gx-rim), 3px 3px 0 0 #0f3727, 6px 6px 0 0 #0f3727; }

/* la Barra: suministro, juego de casino y apuesta en la misma placa (icono, nombre y precio arriba; lo que hace, debajo a todo lo ancho;
   los botones de elegir, si hay varios, en su propia linea). El juego de casino, ademas, con su tapete y su cenefa */
.gx-camp .tb-sup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; min-width: 0; margin: 0; }
.gx-camp .tb-sup.no-cas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gx-camp .tb-sup.no-cas .sup-void { display: none; }
.gx-camp .sup-void { display: block; box-shadow: inset 0 0 0 2px rgba(212, 160, 74, .18); }   /* hueco: esa ronda no toca apuesta */
.gx-camp .sup { --pc: #0f2a1e; position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-rows: auto auto auto; align-content: start; align-items: center; gap: 2px 8px;
  min-width: 0; min-height: 0; max-width: none; margin: 0; padding: 8px 10px 10px; border: 0; border-radius: 0; cursor: pointer; text-align: left; color: var(--gx-txt); font-family: var(--sans); transform: none;
  clip-path: var(--gx-notch); background: url(../assets/dados/felt.png) 0 0 / 32px 32px, var(--pc); box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 0 0 4px rgba(212, 160, 74, .45); transition: filter .15s; }
.gx-camp .sup::before, .gx-camp .sup::after { content: none; }
.gx-camp .sup:hover:not(.done) { filter: brightness(1.08); }
.gx-camp .sup:focus { outline: none; } .gx-camp .sup:focus-visible, html[data-input="pad"] .gx-camp .sup:focus { box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 0 0 4px #fff; }
.gx-camp .sp-ic { grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 0; background: none; box-shadow: none; }
.gx-camp .sp-ic .ic { width: 32px; height: 32px; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45)); }
.gx-camp .sp-t { display: contents; }
.gx-camp .sp-t > b { grid-column: 2; grid-row: 1; min-width: 0; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1; color: var(--gx-ttl); text-shadow: 0 2px 0 rgba(0, 0, 0, .4); text-transform: none; letter-spacing: 0; }
.gx-camp .sp-t > i { grid-column: 1 / -1; grid-row: 2; font-style: normal; font-size: 18px; line-height: 1.12; color: var(--gx-txt-2); text-wrap: pretty; }
/* A.adv.supFit: si el texto de las placas no cabe en el alto de la Barra, baja la letra por niveles (sf1-sf3) en vez de encoger las cartas */
.gx-camp .tb-sup.sf1 .sp-t > i { font-size: 17px; line-height: 1.1; } .gx-camp .tb-sup.sf2 .sp-t > i { font-size: 16px; line-height: 1.08; } .gx-camp .tb-sup.sf3 .sp-t > i { font-size: 15px; line-height: 1.05; }
.gx-camp .sup > em { grid-column: 3; grid-row: 1; justify-self: end; font-style: normal; }
.gx-camp .sup > .bt-pick { grid-column: 1 / -1; grid-row: 3; justify-self: end; display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: 4px; }   /* una sola fila (3 botones de la Oferta: antes saltaban a dos y la Barra crecia 34 px) */
.gx-camp .sp-p { display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 8px 1px 4px; font-family: var(--sans); font-size: 20px; color: var(--gx-ink); background: var(--gx-gold);
  box-shadow: inset 0 0 0 2px var(--gx-o); white-space: nowrap; }
.gx-camp .sp-p .ic { width: 18px; height: 18px; }
.gx-camp .sup .bt-stake { cursor: pointer; } .gx-camp .sup .bt-stake:hover { filter: brightness(1.12); }
.gx-camp .sup .bt-go { color: var(--gx-ink); }
/* comprado o apostado: la placa pasa a papel y le cae el sello de la casa */
.gx-camp .sup.on { --pc: #efe4c8; color: var(--gx-ink); background: var(--gx-card); box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 -4px 0 2px var(--gx-paper-lo); }
.gx-camp .sup.on .sp-t > b { color: var(--gx-ink); text-shadow: none; } .gx-camp .sup.on .sp-t > i { color: var(--gx-ink-2); }
.gx-camp .sp-on { padding: 2px 8px 3px; font-family: var(--sans); font-size: 18px; color: #b3322a; background: rgba(255, 255, 255, .35); box-shadow: inset 0 0 0 2px #b3322a; transform: rotate(-6deg); white-space: nowrap; }
.gx-camp .sup.fresh .sp-on { animation: sp-stamp .32s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes sp-stamp { from { transform: rotate(-6deg) scale(1.9); opacity: 0; } to { transform: rotate(-6deg) scale(1); opacity: 1; } }
/* los botones de las apuestas: papel; rojo, negro y verde en la ruleta; cara y cruz en la moneda */
.gx-camp .sup .bt-c { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 28px; padding: 0 7px 2px; border: 0; border-radius: 0; cursor: pointer; white-space: nowrap;
  font-family: var(--sans); font-weight: 400; font-size: 20px; line-height: 1; letter-spacing: 0; text-transform: none; text-shadow: none; color: var(--gx-ink); clip-path: var(--gx-notch);
  background: linear-gradient(#fffaf0 0 3px, var(--gx-paper) 3px calc(100% - 4px), #c2b28c calc(100% - 4px)); box-shadow: inset 0 0 0 2px var(--gx-o); transition: transform .12s steps(2, end); }
.gx-camp .sup .bt-c:hover { transform: translateY(-2px); } .gx-camp .sup .bt-c:active { transform: translateY(1px); }
.gx-camp .sup .bt-c:focus { outline: none; } .gx-camp .sup .bt-c:focus-visible, html[data-input="pad"] .gx-camp .sup .bt-c:focus { box-shadow: inset 0 0 0 2px #fff; }
.gx-camp .sup .bt-cr { color: #fff; background: #c8322a; } .gx-camp .sup .bt-cb { color: #fff; background: #1d1f26; } .gx-camp .sup .bt-cg { color: #fff; background: #1b8a4a; }
.gx-camp .sup .bt-ct { color: #fff; background: #3f7fd4; }
.gx-camp .sup .bt-ch, .gx-camp .sup .bt-di, .gx-camp .sup .bt-gl, .gx-camp .sup .bt-pl, .gx-camp .sup .bt-ra, .gx-camp .sup .bt-cu, .gx-camp .sup .bt-cs {
  background: linear-gradient(var(--gx-gold-hi) 0 3px, var(--gx-gold) 3px calc(100% - 4px), var(--gx-gold-lo) calc(100% - 4px)); }
.gx-camp .sup .bt-n { gap: 4px; } .gx-camp .sup .bt-n span { display: inline-flex; align-items: center; gap: 2px; font-size: 18px; color: var(--gx-ink-2); }
.gx-camp .sup .bt-n span .ic { width: 16px; height: 16px; }
.gx-camp .sup .bt-res { display: grid; justify-items: end; gap: 2px; font-family: var(--sans); font-size: 18px; line-height: 1.05; color: var(--gx-txt-2); text-align: right; }
.gx-camp .sup .bt-res b { font-weight: 400; font-size: 20px; color: var(--gx-ttl); text-transform: none; letter-spacing: 0; }
.gx-camp .sup.done { cursor: default; }
.gx-camp .sup.done.win { --pc: #3b2c12; box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 0 0 4px var(--gx-gold); } .gx-camp .sup.done.win .bt-res b { color: var(--gx-gold); }
.gx-camp .sup.done.lose { filter: saturate(.6) brightness(.9); }
.gx-camp .sup.spinning .sp-ic .ic { animation: bt-spin .28s linear infinite; }
@keyframes bt-spin { to { transform: rotate(360deg); } }
/* el juego de casino: el cartel de la Barra. Cada juego con su tapete y su cenefa arriba y abajo (v0.3.49, usuario: "cada juego tenia su cuadrado
   representativo con su color"), dentro del marco de laton de la placa de gala */
.gx-camp .sup.cas { --sb: none; --sb2: var(--sb); padding: 20px 12px 18px; box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 0 0 4px var(--gx-rim);
  background: url(../assets/dados/felt.png) 0 0 / 32px 32px, radial-gradient(120% 100% at 50% 0%, #2e4320, #13261b 72%); }
.gx-camp .sup.cas::before { content: ""; position: absolute; left: 4px; right: 4px; top: 4px; bottom: 4px; pointer-events: none; image-rendering: pixelated;
  background: var(--sb) top left / var(--sbs, 100% 10px) repeat-x, var(--sb2) bottom left / var(--sbs2, var(--sbs, 100% 10px)) repeat-x; }
.gx-camp .sup.cas .sp-ic .ic { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .55)); }
.gx-camp .sup.cas.done.win { box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 0 0 4px var(--gx-gold-hi), 0 0 0 0 transparent; }
/* Rojo o negro: fieltro verde, casillas rojas y negras y el cero verde en el centro */
.gx-camp .sup.bt-red { background: radial-gradient(ellipse at 50% 40%, #1d7a45 0%, #0b3a21 78%);
  --sb: repeating-linear-gradient(90deg, #c8322a 0 12px, #14161d 12px 24px); --sb2: repeating-linear-gradient(90deg, #14161d 0 12px, #c8322a 12px 24px); --sbs: 100% 10px; }
.gx-camp .sup.bt-red::after { content: ""; position: absolute; left: 50%; top: 4px; width: 12px; height: 10px; margin-left: -6px; background: #1fa65a; box-shadow: 0 0 6px #6dffa0; pointer-events: none; }
/* Moneda al aire: azul de noche y el canto estriado de la moneda */
.gx-camp .sup.bt-coin { background: radial-gradient(ellipse at 50% 40%, #28508a 0%, #0e2147 80%); --sb: repeating-linear-gradient(90deg, #f6c453 0 3px, #8a5a12 3px 6px); --sbs: 100% 10px; }
/* Ruleta de premios: ciruela y los colores de la rueda */
.gx-camp .sup.bt-wheel { background: radial-gradient(ellipse at 50% 40%, #6a2878 0%, #2a0f33 80%); --sbs: 100% 10px;
  --sb: repeating-linear-gradient(90deg, #f2b63d 0 12px, #1f9a58 12px 24px, #c9362c 24px 36px, #23252e 36px 48px); --sb2: repeating-linear-gradient(90deg, #23252e 0 12px, #c9362c 12px 24px, #1f9a58 24px 36px, #f2b63d 36px 48px); }
/* Los tres cubiletes: burdeos y rombos de oro (el diamante del crupier) */
.gx-camp .sup.bt-cups { background: radial-gradient(ellipse at 50% 40%, #8a1f3f 0%, #3b0a1e 80%); --sb: url(../assets/trile/cenefa.png); --sbs: 12px 10px; }
/* Duelo de dados: verde azulado de mesa de dados */
.gx-camp .sup.bt-dice { background: radial-gradient(ellipse at 50% 40%, #138079 0%, #06302f 80%); --sb: url(../assets/dados/cenefa.png); --sbs: 66px 10px; }
/* El globo: el cielo del atardecer */
.gx-camp .sup.bt-globo { background: linear-gradient(180deg, #1f2f86 0%, #4a3fa8 40%, #b8488a 78%, #ff9a5e 100%); --sb: url(../assets/globo/cenefa_top.png); --sbs: 24px 11px; --sb2: url(../assets/globo/cenefa_bot.png); --sbs2: 24px 9px; }
.gx-camp .sup.bt-globo .sp-t > b { text-shadow: 0 2px 0 #1a0a40; } .gx-camp .sup.bt-globo .sp-t > i { color: #f3eddc; text-shadow: 0 1px 0 rgba(26, 10, 64, .8); }
/* Lluvia de fichas: azul de agua */
.gx-camp .sup.bt-plk { background: radial-gradient(ellipse at 50% 40%, #12909e 0%, #07323d 82%); --sb: url(../assets/plinko/cenefa.png); --sbs: 16px 10px; }
/* Rasca y gana: carton crema del boleto, con la letra en tinta */
.gx-camp .sup.bt-rasca { background: radial-gradient(ellipse at 50% 38%, #fbf1d4 0%, #e7d4a2 55%, #c4a468 100%); --sb: url(../assets/rasca/cenefa.png); --sbs: 12px 10px; }
.gx-camp .sup.bt-rasca .sp-t > b { color: #4a2308; text-shadow: 0 1px 0 rgba(255, 255, 255, .7); } .gx-camp .sup.bt-rasca .sp-t > i { color: rgba(58, 32, 10, .88); }
.gx-camp .sup.bt-rasca .bt-res, .gx-camp .sup.bt-rasca .bt-res b { color: #4a2308; } .gx-camp .sup.bt-rasca.done.win .bt-res b { color: #8a1f3f; }

/* la mochila: reliquias, herramientas y provisiones dentro de la reticula */
.gx-camp .tb-tray { display: flex; align-items: flex-start; gap: 26px; min-width: 0; margin: 0; padding: 10px 18px 10px; }
.gx-camp .tray-col { display: grid; gap: 4px; min-width: 0; }
.gx-camp .tray-col > h4 { display: flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; }
.gx-camp .tray-col > h4 b { font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1; letter-spacing: 0; color: var(--gx-txt); }
.gx-camp .tray-row { display: flex; align-items: flex-end; gap: 8px; min-height: 0; }
.gx-camp .tr-card { position: relative; flex: none; width: 48px; height: 60px; }
.gx-camp .tr-face { position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; cursor: pointer; background: var(--gx-card);
  box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 0 0 4px var(--rc, #b7bfc4), inset 0 -4px 0 4px rgba(22, 36, 28, .1); transition: transform .18s var(--gx-ease); }
.gx-camp .tr-face .ic { width: 36px; height: 36px; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(22, 36, 28, .35)); }
.gx-camp .tr-relic { --rc: #b7bfc4; } .gx-camp .tr-relic.r1 { --rc: #4fb6a0; } .gx-camp .tr-relic.r2 { --rc: #c78bf0; } .gx-camp .tr-relic.r3 { --rc: #ffd95a; }
.gx-camp .tr-relic:hover .tr-face, .gx-camp .tr-face.pk-on { transform: translateY(-4px); }
.gx-camp .tr-face:focus { outline: none; } .gx-camp .tr-face:focus-visible, html[data-input="pad"] .gx-camp .tr-face:focus { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px var(--rc, #b7bfc4); }
.gx-camp .tr-slot { flex: none; position: relative; width: 48px; height: 60px; background: rgba(10, 20, 15, .35); box-shadow: inset 0 0 0 2px rgba(212, 160, 74, .22); }
.gx-camp .tr-slot.pact::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff7b6b, #a8231b 70%); box-shadow: 0 0 0 2px var(--gx-o); }   /* el hueco del Pacto, lacrado */
.gx-camp .tr-tool .tr-face { --rc: #6c8cff; cursor: default; } .gx-camp .tr-tool .tr-face .ic { width: 32px; height: 32px; margin-top: -10px; }
.gx-camp .tr-pips { position: absolute; left: 0; right: 0; bottom: 7px; display: flex; justify-content: center; gap: 2px; }
.gx-camp .tr-pips i { width: 6px; height: 6px; background: #c2372e; box-shadow: 0 0 0 1px var(--gx-o); }
.gx-camp .tr-none { font-style: normal; font-size: 18px; color: var(--gx-txt-2); padding-bottom: 18px; }
.gx-camp .tr-prov .hearts { gap: 4px; align-items: center; height: 60px; }
.gx-camp .tr-prov .hearts .hp .ic { width: 30px; height: 30px; }
/* el Pacto, fuera de los huecos: lacre de cera junto al contador */
.gx-camp .tr-relic.tr-pact { flex: none; align-self: center; width: 22px; height: 22px; margin: -6px 0 -6px 2px; }
.gx-camp .tr-pact .tr-face { border-radius: 50%; background: radial-gradient(circle at 36% 32%, #ff7b6b, #c2372e 48%, #8e1f19 78%); box-shadow: 0 0 0 2px var(--gx-o), inset 0 0 0 2px rgba(255, 217, 138, .55); }
.gx-camp .tr-pact .tr-face .ic { width: 16px; height: 16px; }
/* la Ventaja lleva un sello dorado (solo cabe una) */
.gx-camp .tr-relic.vtg .tr-face::after { content: ""; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; background: var(--gx-gold); box-shadow: 0 0 0 2px var(--gx-o); }
/* mochila llena: las reliquias esperan a que elijas cual vendes (con lo que te dan por ella) */
.gx-camp .tr-relic.swap-pick .tr-face { outline: 3px solid #c2372e; outline-offset: 1px; animation: swap-pick 1s ease-in-out infinite; cursor: pointer; }
.gx-camp .tr-relic.swap-pick::after { content: attr(data-sv); position: absolute; top: -12px; left: 50%; transform: translateX(-50%); z-index: 3; padding: 0 6px 1px 20px; white-space: nowrap; pointer-events: none;
  font-family: var(--sans); font-size: 16px; line-height: 1.2; color: #fff; background: #c2372e url(../assets/icons/coin.webp) 4px 50% / 13px 13px no-repeat; box-shadow: 0 0 0 2px var(--gx-o); }
@keyframes swap-pick { 50% { outline-color: #ffd98a; } }

/* el boleto de la proxima ronda (papel, columna derecha): el tema o el jefe y el objetivo, fijos arriba (.nr-top); debajo (.nr-body), cada reto con su
   soborno, Barajar y las rondas del Ojo en el cielo. v0.3.64: mide SIEMPRE lo que su hueco (contain: size: su contenido ya no estira las filas de la
   mesa ni la hace bajar de escala). Si no cabe, js/adventure.js (ticketFit) lo aprieta (.c1, luego .c2) y, si ni asi, el cuerpo se desplaza (.sc) */
.gx-camp > .tb-next { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; margin: 0; padding: 16px 18px 18px; contain: size; }
.gx-camp .nr-top { flex: none; }
.gx-camp .nr-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; padding-bottom: 2px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; scrollbar-width: none; }
.gx-camp .nr-body::-webkit-scrollbar { display: none; }
.gx-camp .nr-body > * { flex: none; }
.gx-camp > .tb-next:has(> .nr.boss:first-child) { background: linear-gradient(#c2372e, #c2372e) 0 0 / 100% 6px no-repeat, var(--gx-card); }
.gx-camp .nr { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.gx-camp .nr-k { display: block; } .gx-camp .nr-k i { font-style: normal; margin: 0 6px; opacity: .55; }
.gx-camp .nr-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gx-camp .nr-badge { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 0; background: #0b2118; box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 0 0 4px rgba(212, 160, 74, .55); }
.gx-camp .nr-badge .ic { width: 30px; height: 30px; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45)); }
.gx-camp .nr-ttl { display: grid; gap: 2px; min-width: 0; }
.gx-camp .nr-sub { font-style: normal; font-size: 18px; line-height: 1.1; color: var(--gx-ink-2); }
.gx-camp .nr-name { min-width: 0; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: .95; color: var(--gx-ink); text-shadow: none; text-wrap: balance; }
.gx-camp .nr-goal { font-size: 22px; } .gx-camp .nr-goal .of-was { opacity: .55; margin-right: 4px; text-decoration-thickness: 2px; }
.gx-camp .nr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.gx-camp .nr-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "ic name buy" "ic desc desc"; gap: 3px 10px; align-items: center; padding: 8px 0 10px; border-top: 2px solid var(--gx-line); border-radius: 0; background: none; box-shadow: none; }
.gx-camp .nr-ic { grid-area: ic; align-self: start; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 0; background: #17553a; box-shadow: inset 0 0 0 2px var(--gx-o); }
.gx-camp .nr-ic .ic { width: 22px; height: 22px; image-rendering: pixelated; }
.gx-camp .nr-row.k-map .nr-ic { background: #27306b; } .gx-camp .nr-row.k-ptr .nr-ic { background: #6b2f4e; } .gx-camp .nr-row.k-rule .nr-ic { background: #6b5a1f; } .gx-camp .nr-row.k-wall .nr-ic { background: #6b1f4f; }
.gx-camp .nr-rn { grid-area: name; min-width: 0; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1; color: var(--gx-ink); }
.gx-camp .nr-rn .ch-lv { font-style: normal; font-size: 18px; letter-spacing: 1px; line-height: 1; color: var(--gx-gold-lo); margin-left: 2px; }
.gx-camp .nr-row > p { grid-area: desc; margin: 0; font-size: 18px; line-height: 1.12; color: #3f5045; text-wrap: pretty; }
.gx-camp .nr-buy { grid-area: buy; justify-self: end; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 4px 0 10px; border: 0; border-radius: 0; cursor: pointer; white-space: nowrap;
  font-family: var(--sans); font-size: 18px; line-height: 1; letter-spacing: 0; text-transform: none; color: var(--gx-txt); clip-path: var(--gx-notch);
  background: linear-gradient(#2f6a4f 0 3px, #1a4533 3px calc(100% - 4px), #0b2118 calc(100% - 4px)); box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 0 0 4px rgba(212, 160, 74, .55); transition: transform .12s steps(2, end); }
.gx-camp .nr-buy:hover { transform: translateY(-2px); } .gx-camp .nr-buy:active { transform: translateY(1px); }
.gx-camp .nr-buy:focus { outline: none; } .gx-camp .nr-buy:focus-visible, html[data-input="pad"] .gx-camp .nr-buy:focus { box-shadow: inset 0 0 0 2px #fff; }
.gx-camp .nr-p { display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 6px 1px 4px; font-style: normal; font-size: 18px; color: var(--gx-ink); background: var(--gx-gold); box-shadow: inset 0 0 0 2px var(--gx-o); }
.gx-camp .nr-p .ic { width: 16px; height: 16px; }
.gx-camp .nr-have { grid-area: buy; justify-self: end; font-style: normal; font-family: var(--mono); font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: #17765f; white-space: nowrap; }
.gx-camp .nr-have.nr-seal { color: #b3322a; }
.gx-camp .nr-row.done { opacity: .6; grid-template-areas: "ic name buy"; }
.gx-camp .nr-clean { margin: 0; font-size: 20px; line-height: 1.15; color: var(--gx-ink-2); }
.gx-camp .nr-shuffle { align-self: flex-start; max-width: 100%; flex-wrap: wrap; row-gap: 2px; margin-top: 2px; }   /* en ruso, "gratis" baja a otra linea en vez de salirse del papel */ .gx-camp .nr-shuffle .ic { width: 22px; height: 22px; }
.gx-camp .nr-shuffle em { display: inline-flex; align-items: center; gap: 2px; font-style: normal; } .gx-camp .nr-shuffle em .ic { width: 18px; height: 18px; }
/* el jefe: su nombre en rojo y su casilla con la chistera */
.gx-camp .nr.boss .nr-k { color: #b3322a; } .gx-camp .nr.boss .nr-name { color: #8e1f19; }
.gx-camp .nr.boss .nr-badge { background: radial-gradient(circle at 50% 38%, #c03a4f, #6e1a28 72%); box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 0 0 4px #fe5f55; }
/* despues (Ojo en el cielo): cada ronda siguiente en una fila baja, con sus fichas */
.gx-camp .nr.far { grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 4px 10px; margin-top: 2px; padding-top: 10px; border-top: 2px dashed var(--gx-line); }
.gx-camp .nr.far .nr-badge { width: 30px; height: 30px; } .gx-camp .nr.far .nr-badge .ic { width: 22px; height: 22px; }
.gx-camp .nr.far .nr-ttl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; }
.gx-camp .nr.far .nr-k { font-family: var(--mono); font-size: 16px; letter-spacing: .04em; text-transform: uppercase; color: var(--gx-gold-lo); }
.gx-camp .nr.far .nr-name { font-size: 20px; }
.gx-camp .nr.far .nr-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.gx-camp .nr.far .nr-n { font-size: 18px; color: var(--gx-ink-2); }
.gx-camp .nr-chips .ch-chip, .gx-camp .nr-chips .ch-chip > b { font-family: var(--serif); font-size: 18px; font-weight: 400; letter-spacing: .01em; text-transform: none; }
.gx-camp .nr-chips .ch-chip { padding: 2px 6px 3px 4px; gap: 3px; border-radius: 0; } .gx-camp .nr-chips .ch-chip .ic { width: 16px; height: 16px; } .gx-camp .nr-chips .ch-chip .ch-lv { font-size: 16px; letter-spacing: 1px; }
/* boleto apretado (.c1): los mismos textos al mismo tamano, con menos aire entre filas (cuatro retos de dos lineas caben sin desplazarse) */
.gx-camp > .tb-next.c1 { gap: 6px; padding-top: 14px; padding-bottom: 16px; }
.gx-camp > .tb-next.c1 .nr { gap: 5px; } .gx-camp > .tb-next.c1 .nr-body { gap: 6px; }
.gx-camp > .tb-next.c1 .nr-top .nr-badge { width: 30px; height: 30px; } .gx-camp > .tb-next.c1 .nr-top .nr-badge .ic { width: 22px; height: 22px; }
.gx-camp > .tb-next.c1 .nr-top .nr-name { font-size: 24px; }
.gx-camp > .tb-next.c1 .nr-row { gap: 2px 10px; padding: 4px 0 6px; } .gx-camp > .tb-next.c1 .nr-row > p { line-height: 1.05; }
.gx-camp > .tb-next.c1 .nr-buy { height: 28px; }
.gx-camp > .tb-next.c1 .nr-shuffle { min-height: 36px; margin-top: 0; padding-top: 2px; padding-bottom: 4px; }
.gx-camp > .tb-next.c1 .nr.far { margin-top: 0; padding-top: 6px; }
/* muy apretado (.c2): el ultimo paso antes de desplazarse (unos 35 px mas con cuatro retos) */
.gx-camp > .tb-next.c2 { gap: 5px; padding-top: 12px; padding-bottom: 14px; }
.gx-camp > .tb-next.c2 .nr { gap: 4px; } .gx-camp > .tb-next.c2 .nr-body { gap: 4px; }
.gx-camp > .tb-next.c2 .nr-row { gap: 1px 10px; padding: 3px 0 4px; }
.gx-camp > .tb-next.c2 .nr-buy { height: 26px; } .gx-camp > .tb-next.c2 .nr-p { height: 22px; }
.gx-camp > .tb-next.c2 .nr-shuffle { min-height: 32px; padding-top: 1px; padding-bottom: 3px; }
.gx-camp > .tb-next.c2 .nr.far { padding-top: 4px; }
/* boleto que se desplaza (.sc): los bordes se funden por donde queda papel (.up, .dn), una barra fina en el margen y la pestana con los que faltan */
.gx-camp > .tb-next.sc .nr-body { --fu: 0px; --fd: 0px; --ft: 0px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fu), #000 calc(100% - var(--fd)), transparent calc(100% - var(--ft))); mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fu), #000 calc(100% - var(--fd)), transparent calc(100% - var(--ft))); }
.gx-camp > .tb-next.sc.up .nr-body { --fu: 16px; } .gx-camp > .tb-next.sc.dn .nr-body { --fd: 58px; --ft: 26px; }   /* tras la pestana no se lee nada: el papel ya esta en blanco a su altura */
.gx-camp .nr-bar { display: none; position: absolute; z-index: 2; right: 12px; width: 4px; pointer-events: none; background: rgba(22, 36, 28, .12); }
.gx-camp .nr-bar b { position: absolute; left: 0; right: 0; top: 0; background: var(--gx-ink-2); will-change: transform; }
.gx-camp > .tb-next.sc .nr-bar { display: block; }
.gx-camp .nr-more { display: none; position: absolute; z-index: 3; left: 50%; bottom: 14px; transform: translateX(-50%); align-items: center; gap: 6px; height: 24px; margin: 0; padding: 0 10px 1px; border: 0; border-radius: 0; cursor: pointer;
  font-family: var(--sans); font-size: 18px; line-height: 1; color: var(--gx-paper); background: var(--gx-ink); clip-path: var(--gx-notch); }
.gx-camp > .tb-next.sc.dn .nr-more { display: inline-flex; }
.gx-camp .nr-more:hover { filter: brightness(1.5); } .gx-camp .nr-more:focus { outline: none; }
.gx-camp .nr-more i { width: 10px; height: 6px; background: currentColor; clip-path: polygon(0 0, 100% 0, 100% 2px, 8px 2px, 8px 4px, 6px 4px, 6px 100%, 4px 100%, 4px 4px, 2px 4px, 2px 2px, 0 2px); animation: nr-more 1s steps(1, end) infinite; }
.gx-camp .nr-more b { font-weight: 400; } .gx-camp .nr-more b:empty { display: none; }
@keyframes nr-more { 50% { transform: translateY(2px); } }

/* estoy listo: abajo a la derecha, con la ficha de la ronda que viene. v0.3.76: sin luces alrededor (ni bombillas ni la luz que latia detras) */
.gx-camp > .go2-wrap { position: relative; isolation: isolate; display: flex; min-width: 0; }
/* la sombra dura, detras del boton */
.gx-camp > .go2-wrap::after { content: ""; position: absolute; inset: 4px 0 -4px; z-index: -1; pointer-events: none; clip-path: var(--gx-notch); background: rgba(2, 6, 4, .78); }
/* v0.3.76: una capa vacia e invisible que cubre el boton y 10 px mas. No pinta nada: esta para el compositor. Las bombillas que rodeaban el boton
   hacian ese papel sin saberlo: al quitarlas, la entrada del Campamento pasaba de perder 5-7 fotogramas a 9-10; con esta capa pierde 4-5
   (medido en tres tandas con la base al lado). Si algun dia deja de ayudar, se quita y no se nota nada */
.gx-camp > .go2-wrap::before { content: ""; position: absolute; inset: -10px; z-index: 2; pointer-events: none; opacity: .001; will-change: opacity; }
.gx-camp .go2 { flex: 1 1 auto; justify-content: flex-start; gap: 12px; min-width: 0; max-width: none; min-height: 0; margin: 0; padding: 8px 18px 10px 12px; white-space: normal; }
.gx-camp .go2-chip { flex: none; display: grid; place-items: center; width: 56px; height: 56px; }
.gx-camp .go2-chip > .ic, .gx-camp .go2-chip .ic.blindchip { width: 56px; height: 56px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .4)); }
.gx-camp .go2-chip .bc-base { animation: chip-turn 9s linear infinite; }
.gx-camp .go2-t { flex: 1 1 auto; display: grid; gap: 4px; min-width: 0; }
.gx-camp .go2-t b { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: .95; }
.gx-camp .go2-t i { font-style: normal; font-size: 18px; line-height: 1.1; opacity: .85; }
.gx-camp .go2-t i .ic { width: 16px; height: 16px; vertical-align: -2px; }
.gx-camp .go2.doom { --h: var(--gx-red-hi); --m: var(--gx-red); --l: var(--gx-red-lo); color: #fff; }
.gx-camp .go2.skip { --h: #fffaf0; --m: var(--gx-paper); --l: #c2b28c; }
.gx-camp.lg-seq > .go2-wrap { opacity: 0; transition: opacity .3s; }

/* el crupier sentado a la mesa: en el rincon derecho de la mochila, junto al boton, con el globo hacia arriba y a la izquierda (js/dealer.js, campRoom) */
.dealer.camp.seat { left: auto; right: var(--cr); align-items: flex-end; }
.dealer.camp.seat .dl-bubble { transform-origin: calc(100% - var(--hf) / 2) 100%;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - var(--hf) / 2 + 10px) calc(100% - 12px), calc(100% - var(--hf) / 2) 100%, calc(100% - var(--hf) / 2 - 10px) calc(100% - 12px), 0 calc(100% - 12px)); }

/* reducir movimiento: sin cartas que botan ni se reparten, bombillas quietas y sin ficha que gira */
html.reduce-motion .gx-camp .offer.pc { animation: none; }
html.reduce-motion .gx-camp .go2-chip .bc-base,
html.reduce-motion .gx-camp .tr-relic.swap-pick .tr-face, html.reduce-motion .gx-camp .sup.fresh .sp-on, html.reduce-motion .gx-camp .sup.spinning .sp-ic .ic, html.reduce-motion .gx-camp .nr-more i { animation: none; }
html.reduce-motion .gx-camp .nr-body { scroll-behavior: auto; }

/* movil y ventanas muy pequenas (aqui la pantalla se desplaza): todo en una columna */
@media (max-width: 899px), (max-height: 519px) {
  .table.mesa.gx-camp { height: auto; min-height: 100%; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding: 14px 16px 20px; }
  .gx-camp > * { grid-column: 1 !important; grid-row: auto !important; }
  .gx-camp > .tb-next { contain: none; } .gx-camp .nr-body { overflow: visible; }   /* aqui el boleto mide lo que su contenido (se desplaza la pagina) */
  .gx-camp .tb-head { grid-template-columns: minmax(0, 1fr) auto; } .gx-camp .tb-head > .rd { grid-column: 1 / -1; grid-row: 2; justify-self: start; max-width: 100%; overflow-x: auto; }
  .gx-camp .tb-head > .tb-right { grid-column: 2; grid-row: 1; }
  .gx-camp .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: auto; row-gap: 12px; }
  .gx-camp .offer.pc { grid-row: auto; grid-template-rows: 108px auto 1fr auto; } .gx-camp .offers > .tb-actions { grid-column: 1 / -1; grid-row: auto; justify-content: center; }
  .gx-camp .tb-deck { flex-direction: row; width: auto; height: auto; }
  .gx-camp .tb-sup, .gx-camp .tb-sup.no-cas { grid-template-columns: minmax(0, 1fr); } .gx-camp .sup-void { display: none; }
  .gx-camp .tb-tray { flex-wrap: wrap; }
}

/* ===================================================================================================== LA SALA (v0.3.52, js/casa.js)
   La luz de la sala: una imagen pequena (una celda por cada 2-4 px) escalada sin suavizar: bandas de pixel. Cambia con un fundido cuando cambia
   la pantalla; nada por fotograma.
   v0.3.58: va SIEMPRE pegada al fondo de la pantalla y por detras de todas sus piezas (js/casa.js la cuelga de #app en partida, de #layer en la
   portada, el veredicto y los cuadros, y de #intro en la intro): z-index -1 dentro de su contenedor = encima de su fondo y debajo de todo lo demas.
   Nunca tapa una carta, un boton, una pestana ni al crupier, y no hacen falta recortes de luz alrededor de nada */
#sala { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
#app > #sala { z-index: auto; }                                             /* en partida: sobre el mapa (va tras la vineta) y por debajo del HUD */
#intro::before { z-index: -1; }                                             /* el telon de la intro, por debajo de la luz; el cartel y el crupier, por encima */
#sala.hidden { display: none; }
#sala { transition: opacity .25s ease; } #sala.mute { opacity: 0; }                /* la Enciclopedia: un aparato con su propia pantalla; la luz de la sala no entra */
#sala canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: 0; }
#sala canvas.d { transition: opacity .55s ease; will-change: opacity; }
#sala canvas.d.on { opacity: 1; }
/* v0.3.54 (la sala responde): la luz que sube (el mismo mapa, en calido: solo enciende la penumbra), el velo de la lampara que baja y el haz del barrido.
   Los tres se animan desde js/casa.js solo con opacidad y transform */
#sala canvas.g { will-change: opacity; }
#sala .veil { position: absolute; inset: 0; background: #020908; opacity: 0; will-change: opacity; }
#sala .beam { position: absolute; top: -10%; left: 0; width: 46vw; height: 120%; opacity: 0; will-change: transform, opacity;
  background: linear-gradient(90deg, transparent, rgba(255, 230, 172, .13) 20%, rgba(255, 240, 200, .38) 50%, rgba(255, 230, 172, .13) 80%, transparent); }
/* llega el jefe: la luz roja de la penumbra late como un corazon (dos golpes por segundo y silencio) */
#sala.boss canvas.g { animation: sala-latido 1s steps(1, end) infinite; animation-delay: var(--lt, 0ms); }
@keyframes sala-latido { 0% { opacity: .42; } 14% { opacity: 0; } 24% { opacity: .3; } 36% { opacity: 0; } 100% { opacity: 0; } }
html.reduce-motion #sala.boss canvas.g, html.soft-flash #sala.boss canvas.g { animation: none; opacity: .08; }
html.reduce-motion #sala.boss canvas.g { animation: none; opacity: .08; }
#sala::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease; background: radial-gradient(ellipse 75% 70% at 50% 47%, transparent 58%, rgba(2, 9, 8, .42) 100%); }
#sala.neutral::before { opacity: 1; }                                       /* entre una pantalla y otra: penumbra neutra mientras llega la luz nueva */
#sala.neutral canvas { transition-duration: .28s; }
html.sala-soft #sala::before { background: radial-gradient(ellipse 75% 70% at 50% 47%, transparent 58%, rgba(2, 9, 8, .22) 100%); }
html.sala-on .vignette { display: none; }                                  /* la vineta de siempre vuelve con las luces apagadas */

/* bombillas de la casa en las piezas clave (A.bulbs, js/art.js): el cartel de la ronda y la Barra. v0.3.76: los botones principales del veredicto
   y del Campamento ya no las llevan */
.gx-vd-head { position: relative; align-self: center; }
.gx-vd-head > .mqw { --mqi: -18px; --mqb: 7px; --mqr: -10px; } .gx-vd-head > .mqw > * { left: -16px; width: calc(100% + 26px); }   /* a la derecha no pasa del medianil: no roza el ticket */
.gx-vd.lose .gx-vd-head .mq-lit, .gx-vd.lose .gx-vd-head .mq-all, .gx-vd.lose .gx-vd-head .mq-aura { display: none; }                         /* ronda fallida: el cartel se queda apagado */
/* .gx-mq: un boton con su marco de bombillas. El veredicto ya no lo usa (v0.3.76); lo sigue usando el Duelo de fichas (js/duelo.js) */
.gx-mq { position: relative; display: inline-flex; }
.gx-mq > .mqw { --mqi: -8px; --mqb: 6px; --mqr: -3px; }
.gx-camp .tb-sup { position: relative; }
.gx-camp .tb-sup > .mqw { --mqi: -6px; --mqb: 5px; --mqr: -1px; } .gx-camp .tb-sup > .mqw > .mqb { z-index: 2; }
@media (max-width: 899px), (max-height: 519px) { .gx-camp .tb-sup > .mqw { display: none; } }

/* (v0.3.72: la escena del jefe y sus bombillas rojas se fueron con las ilustraciones de la intro; ahora late la sala y su lampara es roja: css/escena.css) */

/* ---------------------------------------------------------------- BOTONES DE ESQUINA (v0.3.67): el engranaje de los menus, Apagar y Notas del parche.
   Eran cuadrados oscuros redondeados; ahora son el boton de fieltro con anillo de laton del sistema (como .gx-btn.gho), con su esquina de pixel.
   La sombra dura la pone su contenedor (.menu-tools); el de las Notas va suelto en la portada y no la lleva */
html[data-skin] body .menu-gear { width: 44px; height: 44px; border: 0; border-radius: 0; clip-path: var(--gx-notch); color: var(--gx-txt);
  background: linear-gradient(#2f6a4f 0 4px, #1a4533 4px calc(100% - 6px), #0b2118 calc(100% - 6px)); box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 0 0 4px rgba(212, 160, 74, .55);
  transition: transform .12s steps(2, end), filter .12s; }
html[data-skin] body .menu-gear:hover, html[data-skin] body .menu-gear.pad-hov, html[data-skin] body .menu-gear:focus-visible { transform: translateY(-2px); filter: brightness(1.12); color: var(--gx-txt); box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 0 0 4px rgba(212, 160, 74, .55); outline: none; }
html[data-skin] body .menu-gear:active { transform: translateY(2px); filter: brightness(.96); }
html[data-skin] body .menu-gear:focus-visible, html[data-input="pad"] body .menu-gear:focus { box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 0 0 4px #fff; }
html[data-skin] body .menu-gear .ic { width: 28px; height: 28px; transition: transform .3s var(--spring); }
html[data-skin] body .menu-gear:not(.menu-quit):not(.menu-patch):hover .ic { transform: rotate(60deg); }                       /* el engranaje sigue girando al pasar */
html[data-skin] body .menu-gear.menu-quit:hover, html[data-skin] body .menu-gear.menu-quit:focus-visible { color: var(--gx-red-hi); }
html[data-skin] body .menu-gear.menu-patch { background: linear-gradient(#2f6a4f 0 4px, #1a4533 4px calc(100% - 6px), #0b2118 calc(100% - 6px)); }
html[data-skin] body .menu-gear.menu-patch .ic { width: 30px; height: 30px; }
.menu-tools { filter: drop-shadow(0 4px 0 rgba(2, 6, 4, .78)); }
@media (max-width: 899px) { html[data-skin] body .menu-gear { width: 40px; height: 40px; } }
@media (max-height: 520px) and (orientation: landscape) { html[data-skin] body .menu-gear { width: 36px; height: 36px; } html[data-skin] body .menu-gear .ic { width: 24px; height: 24px; } }

/* ---------------------------------------------------------------- MESAS DEL MAPA (v0.3.62): la pagina "Mesas" del libro del Perfil (js/hub.js, mesasPage)
   y el estreno de una mesa recien ganada (js/mesas.js). El catalogo y lo que es tuyo: js/skins.js (A.mesas).
   La pagina: seis tarjetas en dos columnas, cada una con la captura de su mesa, lo que es (o como se gana, si aun no es tuya) y su estado.
   La que llevas puesta va enmarcada en laton; las que no tienes, en gris, como los logros sin conseguir */
.ms-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; align-content: start; min-height: 0; padding: 4px 2px 0; }
.ms-card { position: relative; display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; margin: 0; border: 0; text-align: left; font: inherit; color: var(--gx-ink);
  background: none; box-shadow: inset 0 0 0 2px var(--gx-line); cursor: pointer; }
.ms-card.lk, .ms-card.on { cursor: default; }
.ms-card.got:hover, .ms-card.got.pad-hov { background: #fffaf0; box-shadow: inset 0 0 0 2px var(--gx-o); }
.ms-card.on { background: #fffaf0; box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 0 0 5px var(--gx-rim), inset 0 0 0 7px var(--gx-o); }
.ms-card:focus { outline: none; }
.ms-card:focus-visible::after, html[data-input="pad"] .ms-card:focus::after { content: ""; position: absolute; inset: 9px; box-shadow: 0 0 0 2px var(--gx-o); animation: gx-focus 1.2s steps(2, end) infinite; pointer-events: none; }
.ms-th { position: relative; display: block; aspect-ratio: 16 / 9; box-shadow: 0 0 0 2px var(--gx-o), 0 4px 0 2px rgba(22, 36, 28, .3); }
.ms-th img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ms-card.lk .ms-th img { filter: grayscale(1) brightness(.56) contrast(.9); }
.ms-tx { display: grid; gap: 5px; min-width: 0; justify-items: start; }
.ms-tx b { font-family: var(--sans); font-weight: 400; font-size: 26px; line-height: 1; color: var(--gx-ink); overflow-wrap: anywhere; }
.ms-tx i { font-style: normal; font-size: 18px; line-height: 1.15; color: #3f5045; text-wrap: pretty; overflow-wrap: anywhere; }
/* el estado, como una etiqueta sobre la captura (abajo a la izquierda): en uso = laton; usar = papel; cerrada = tinta */
.ms-st { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); font-style: normal; font-family: var(--mono); font-size: 16px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; padding: 5px 7px 4px;
  color: var(--gx-ink); background: var(--gx-paper); box-shadow: 0 0 0 2px var(--gx-o); }
.ms-card.on .ms-st { background: var(--gx-rim); box-shadow: inset 0 2px 0 var(--gx-rim-hi), inset 0 -2px 0 var(--gx-rim-lo), 0 0 0 2px var(--gx-o); }
.ms-card.lk .ms-st { color: var(--gx-paper-lo); background: var(--gx-ink); }
.ms-note { margin: 10px 2px 0; font-size: 18px; line-height: 1.15; color: var(--gx-ink-2); }
/* v0.3.132: con las de la boutique ya no caben todas: de 6 en 6, con las paginas en la cabecera; las de la boutique que no tienes, en gris
   como las cerradas pero con su etiqueta de laton (llevan a la boutique) */
.pf-bh.ms-bh { grid-template-columns: 48px minmax(0, 1fr) auto 200px; }
.ms-pg { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 18px; color: var(--gx-ink-2); }
.ms-pg i { font-style: normal; font-variant-numeric: tabular-nums; }
.ms-pg .gx-btn { min-width: 56px; font-size: 26px; }
.ms-pg .gx-btn[disabled] { opacity: .35; pointer-events: none; }
.ms-card.lk.shop { cursor: pointer; }
.ms-card.lk.shop:hover, .ms-card.lk.shop.pad-hov { background: #fffaf0; box-shadow: inset 0 0 0 2px var(--gx-o); }
.ms-card.lk.shop .ms-th img { filter: grayscale(.85) brightness(.7) contrast(.95); }
.ms-card.lk.shop .ms-st { color: var(--gx-ink); background: var(--gx-gold); }
@media (max-width: 899px), (max-height: 519px) { .pf-bh.ms-bh { grid-template-columns: 40px minmax(0, 1fr); } .ms-pg { grid-column: 1 / -1; justify-self: start; } }
@media (max-width: 899px), (max-height: 519px) { .ms-grid { grid-template-columns: minmax(0, 1fr); } }

/* el estreno. La portada se aparta (y vuelve) con un fundido, y con ella la luz de la sala, que vive dentro de #layer: la mesa se ve entera.
   La capa va encima de #layer (z 4) y debajo de avisos, pausa y Ajustes; el crupier, delante de todo */
body.ms-on #layer { opacity: 0; pointer-events: none; }
body.ms-on #layer, body.ms-off #layer { transition: opacity .28s ease; }
.ms-est { position: absolute; inset: 0; z-index: 8; overflow: hidden; }
.ms-old { position: absolute; left: 0; overflow: hidden; transform-origin: 0 50%; will-change: transform; }
.ms-old-in { position: absolute; left: 0; top: 0; transform-origin: 0 50%; will-change: transform; }
.ms-shot { position: absolute; left: 0; display: block; }
.ms-veil { position: absolute; inset: 0; background: #020908; opacity: 0; will-change: opacity; }
.ms-beam { position: absolute; left: 0; opacity: 0; will-change: transform, opacity;
  background: linear-gradient(90deg, transparent, rgba(255, 230, 172, .13) 20%, rgba(255, 240, 200, .38) 50%, rgba(255, 230, 172, .13) 80%, transparent); }
.ms-plw { position: absolute; left: 40px; right: 40px; bottom: 44px; display: grid; justify-items: center; visibility: hidden; }
.ms-est.plac .ms-plw { visibility: visible; }
.ms-plac { width: max-content; min-width: 480px; max-width: min(760px, 100%); display: grid; gap: 10px; justify-items: center; text-align: center; padding: 24px 32px 24px; }
.ms-plac .gx-t-l { color: var(--gx-ink); text-shadow: none; text-wrap: balance; }
.ms-how { margin: 0; font-size: 22px; line-height: 1.15; color: #3f5045; text-wrap: balance; }
.ms-more { margin: 0; font-size: 18px; line-height: 1.15; color: var(--gx-ink-2); text-wrap: balance; }
.ms-plac .gx-acts { margin-top: 6px; flex-wrap: wrap; justify-content: center; }
.ms-plac .gx-note { text-wrap: balance; }
.ms-est.gx-layer.gx-in .ms-plw > .gx-sh { animation: ms-rise var(--gx-in) var(--gx-ease) both; }
@keyframes ms-rise { from { opacity: 0; transform: translateY(40px); } }