/* ==== Clasificacion (js/podio.js). v0.3.39, Naipe de gala (css/gala.css): pantalla completa sobre el fieltro. Cabecera con Cerrar, el titulo y los
   dos selectores (modo y periodo); a la izquierda (5 columnas) el podio: tres pilas de fichas cuyo alto mide la puntuacion; a la derecha (7 columnas)
   la pizarra de papel: del 4.o al 8.o, sus flechas y tu puesto. Pixel art: bordes duros, sombras planas y fichas a bandas de 7 px. ==== */

.pd-wrap { position: absolute; inset: 0; z-index: 6; pointer-events: auto; }
.pd-screen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr); column-gap: 16px; row-gap: 18px; padding: 24px 40px 32px; outline: none; }

/* ---------- cabecera ---------- */
.pd-head { grid-column: 1 / -1; display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 24px; }
.pd-x .ic { width: 22px; height: 22px; }
.pd-head h2 { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.pd-ic .ic { display: block; width: 48px; height: 48px; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(2, 6, 4, .7)); }
.pd-tabset { justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }

/* selector del sistema (dos o tres opciones; la elegida, en laton) */
.gx-seg { display: inline-flex; gap: 4px; padding: 4px; clip-path: var(--gx-notch); background: #0b2118; box-shadow: inset 0 0 0 2px var(--gx-o); }
.gx-seg button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 16px 6px; border: 0; cursor: pointer; font-family: var(--sans); font-size: 22px; line-height: 1; color: var(--gx-txt-2); background: none; }
.gx-seg button:hover:not(.on) { color: var(--gx-txt); background: rgba(212, 160, 74, .12); }
.gx-seg button.on { cursor: default; color: var(--gx-ink); 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); }
.gx-seg button:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.pd-mi .ic { display: block; width: 28px; height: 28px; image-rendering: pixelated; } .pd-mi .ic.ic-dealer_mini_s { width: 32px; height: 32px; margin: -2px; }   /* la cabeza del crupier a 32 px nativos */
.pd-mode:not(.on) .pd-mi .ic { filter: grayscale(.6) brightness(.8); }

/* ---------- cuerpo: podio | pizarra ---------- */
.pd-body { grid-column: 1 / -1; min-height: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; align-items: center; }
.pd-left { grid-column: 1 / 8; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
html body .pd-src { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--sans); font-size: 20px; letter-spacing: 0; text-transform: none; color: var(--gx-txt-2); }
.pd-src .ic { margin: 0; flex: none; width: 22px; height: 22px; } .pd-src em { font-style: normal; }
.pd-day { padding: 2px 10px 3px; clip-path: var(--gx-notch); background: rgba(212, 160, 74, .16); color: var(--gx-rim-hi); white-space: nowrap; } .pd-day::first-letter { text-transform: uppercase; }

/* el podio: 2.o, 1.o, 3.o sobre una tarima de laton; cada pila de fichas sube desde la tarima */
.pd-stage { position: relative; display: grid; grid-template-columns: 1fr 1.1fr 1fr; align-items: end; gap: 14px; padding: 0 12px 16px; }
.pd-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: var(--gx-rim); box-shadow: inset 0 0 0 2px var(--gx-o), inset 0 4px 0 2px var(--gx-rim-hi), 0 6px 0 rgba(2, 6, 4, .7); }
.pd-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; height: 100%; }
.pd-who { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; max-width: 100%; animation: gx-pop .2s steps(2, end) both; animation-delay: calc(var(--d) + .35s); }
.pd-crown .ic { display: block; width: 40px; height: 40px; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(2, 6, 4, .7)); }
.pd-medal .ic { display: block; width: 56px; height: 56px; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(2, 6, 4, .7)); }
.pd-name { max-width: 100%; padding: 2px 8px 3px; font-family: var(--sans); font-weight: 400; font-size: 24px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--gx-txt); }
.pd-col.me .pd-name { color: var(--gx-ink); background: var(--gx-rim); clip-path: var(--gx-notch); }
.pd-score { font-family: var(--sans); font-size: 26px; line-height: 1; color: var(--gx-rim-hi); font-variant-numeric: tabular-nums; }
.pd-step { position: relative; width: 78%; display: grid; justify-items: center; }
/* la pila: fichas de 7 px (canto claro, cuerpo, sombra), con luz a la izquierda y sombra a la derecha; el alto lo da la puntuacion (--h) */
.pd-chips { display: block; width: 100%; height: var(--h); transform-origin: 50% 100%; animation: pd-rise .5s steps(8, end) both; animation-delay: var(--d);
  background: repeating-linear-gradient(180deg, var(--hi) 0 2px, var(--base) 2px 5px, var(--lo) 5px 7px);
  box-shadow: inset 0 0 0 2px var(--gx-o), inset 8px 0 0 rgba(255, 255, 255, .12), inset -8px 0 0 rgba(0, 0, 0, .18), 6px 0 0 rgba(2, 6, 4, .35); }
.pd-step em { position: relative; z-index: 4; margin-top: 6px; font-style: normal; font-family: var(--serif); font-size: 40px; line-height: .8; color: var(--gx-ink); }
.pd-step em { display: none; }                                      /* el puesto lo cuenta la medalla; el numero sigue ahi para quien lo lee (el crupier) */
.pd-step .mqb { z-index: 3; }
.p1 { --d: .34s; --hi: #ffe7a0; --base: #f5a623; --lo: #9a4f17; }
.p2 { --d: .24s; --hi: #e3e6f0; --base: #9095ab; --lo: #4b4f6a; }
.p3 { --d: .14s; --hi: #e09a64; --base: #a45530; --lo: #5e2a22; }
.pd-col.empty .pd-chips, .pd-col.empty .pd-medal { filter: grayscale(1) brightness(.5); } .pd-col.empty .pd-name { opacity: .4; } .pd-col.empty .pd-crown { opacity: .35; filter: grayscale(1); }
@keyframes pd-rise { from { transform: scaleY(0); } }
.pd-body.wait .pd-chips { animation: none; transform: scaleY(0); } .pd-body.wait .pd-who { animation: none; visibility: hidden; }

/* ---------- la pizarra de papel ---------- */
.pd-board { grid-column: 8 / 13; min-width: 0; display: grid; gap: 12px; padding: 18px 22px 20px; }
.pd-bh, .pd-board .pd-list li { display: grid; grid-template-columns: 36px var(--bdw, 80px) minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.pd-bh.dy, .pd-board .pd-list.dy li:not(.free) { grid-template-columns: 36px var(--bdw, 80px) minmax(0, 1fr) auto auto; }
.pd-bh { padding: 0 12px 6px; border-bottom: 2px solid var(--gx-line); font-family: var(--sans); font-size: 18px; color: var(--gx-ink-2); }
.pd-bh > span:last-child { text-align: right; }
.pd-board .pd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.pd-board .pd-list li { min-height: 48px; padding: 4px 12px; border-bottom: 2px solid var(--gx-line); font-family: var(--sans); font-size: 24px; color: var(--gx-ink); animation: gx-pop .16s steps(2, end) both; animation-delay: calc(.45s + var(--i, 0) * 60ms); }
.pd-board .pd-list li.me { background: var(--gx-rim); box-shadow: inset 0 2px 0 var(--gx-rim-hi), inset 0 -2px 0 var(--gx-rim-lo); }
.pd-board .pd-list li.free { opacity: .4; animation: none; }
.pd-board .pd-list li .lb-n, .pd-board .pd-list li:nth-child(-n+3) .lb-n { opacity: 1; font-family: var(--sans); font-size: 22px; font-weight: 400; letter-spacing: 0; color: var(--gx-ink-2); font-variant-numeric: tabular-nums; } .pd-board .pd-list li.me .lb-n { color: var(--gx-ink); }
.pd-board .pd-list .lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--sans); font-size: 24px; letter-spacing: 0; text-transform: none; }
.pd-board .pd-list b { font-weight: 400; font-size: 26px; font-variant-numeric: tabular-nums; text-align: right; }
.pd-board .pd-list li.lb-gap { display: block; min-height: 0; padding: 0; border: 0; text-align: center; line-height: .8; letter-spacing: .3em; color: var(--gx-ink-2); animation: none; }
.pd-board .lb-tries { display: inline-flex; gap: 4px; } .pd-board .lb-tries i { width: 10px; height: 10px; background: #ded2b4; box-shadow: inset 0 0 0 2px var(--gx-o); } .pd-board .lb-tries i.on { background: var(--gx-red); }
.pd-body.wait .pd-board .pd-list li { animation: none; }
.pd-board .pd-list.turned li { animation: none; }   /* v0.3.43: al pasar pagina la lista entera se desliza (A.gala.turn), fluida; las filas no vuelven a aparecer a saltos */

/* paginas: flechas de papel y el tramo de puestos en medio */
.pd-pager { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.pd-pager.solo { visibility: hidden; }
.pd-pg { min-height: 44px; padding: 4px 14px 6px; } .pd-pg .ic { width: 22px; height: 22px; } .pd-pg.prev .ic { transform: scaleX(-1); }
.pd-pg:disabled { cursor: default; filter: saturate(.2) brightness(.7); transform: none; }
.pd-pgl { display: flex; align-items: baseline; justify-content: center; gap: 10px; min-width: 0; font-family: var(--sans); font-size: 22px; white-space: nowrap; color: var(--gx-ink); }
.pd-pgl b { font-weight: 400; } .pd-pgl em { font-style: normal; color: var(--gx-ink-2); }
.dr-pager .pd-pgl { color: var(--gx-txt); } .dr-pager .pd-pgl em { color: var(--gx-txt-2); }   /* el Reto diario la usa sobre fieltro oscuro (v0.3.39 la dejo en tinta de papel: no se veia) */

/* pie: tu puesto si no sales en la pagina, lo que te falta para el podio o como entrar */
.pd-foot:empty { display: none; }
.pd-hint { margin: 0; display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 6px 8px 6px 16px; color: var(--gx-ink); background: #ece2c8; box-shadow: inset 0 0 0 2px var(--gx-line); }
.pd-hint > span { font-family: var(--sans); font-size: 22px; line-height: 1.05; } .pd-hint .gx-btn { margin-left: auto; }
.pd-hint.top { background: var(--gx-rim); box-shadow: inset 0 2px 0 var(--gx-rim-hi), inset 0 -2px 0 var(--gx-rim-lo); } .pd-hint.top .ic { width: 22px; height: 22px; margin: 0; }
.pd-me.jump li:not(.lb-gap) { cursor: pointer; } .pd-me.jump li:not(.lb-gap):hover { filter: brightness(1.05); }

/* movil y ventanas pequenas: una columna (el podio encima de la pizarra) y se desplaza */
@media (max-width: 899px), (max-height: 519px) {
  .pd-screen { padding: 14px 16px 20px; overflow-y: auto; grid-template-rows: none; }
  .pd-head { grid-template-columns: auto minmax(0, 1fr); } .pd-tabset { grid-column: 1 / -1; justify-self: stretch; justify-content: flex-start; }
  .pd-body { grid-template-columns: minmax(0, 1fr); row-gap: 16px; } .pd-left, .pd-board { grid-column: 1; }
  .pd-head h2 { font-size: 40px; }
}

/* ==== v0.3.174 (maqueta «Marcos, títulos e iconos»): la carta de cada uno en el podio y su chapa en las filas (js/socio.js) ==== */
/* el podio, a 7 de las 12 columnas: tres cartas de 192 px de diseno (escala entera) sobre pilas de fichas mas bajas */
.pd-stage { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 0 4px 16px; }
.pd-col.card { gap: 6px; }
.pd-who.pd-cw { gap: 6px; }
.pd-card { display: block; }                                         /* la carta pone su tamano (js/socio.js mount) */
.pd-col.card .pd-score { font-size: 28px; }
.pd-body.wait .pd-card { visibility: hidden; }
/* las filas: puesto, chapa (80 px de arte a escala entera), nombre y titulo, puntos */
.pd-board .pd-list li { min-height: 48px; padding: 6px 12px 6px 8px; }
.pd-board .pd-list .lb-bd { display: block; min-width: 0; }
.pd-board .pd-list .lb-who { display: grid; gap: 4px; min-width: 0; }
.pd-board .pd-list .lb-tt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-style: normal; font-size: 16px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: #a8442e; }
.pd-board .pd-list li.me .lb-tt { color: var(--gx-ink); }
/* en el podio con cartas, el puesto va sobre su pila (sin la medalla, que ya no sale) */
.pd-col.card .pd-step em { display: block; position: absolute; left: 0; right: 0; bottom: calc(var(--h) / 2 - 18px); margin: 0; text-align: center; font-family: var(--sans); font-size: 40px; line-height: 1; color: #fff8e6; text-shadow: 0 3px 0 rgba(2, 6, 4, .75); pointer-events: none; }