/* Geolite - EL CLUB DE LA CASA (entrega 1, js/club.js): el recibo del Club en el veredicto y en el Duelo, la tarjeta de socio de la portada
   y la linea del Club en la ficha de socio del Perfil. Letra minima de la Deck: 16 px Silkscreen (--mono) y 18 px Jersey (--sans). */

/* ---------- el recibo: Club de la casa, +exp, la barra de nivel y lo que paga (cartulina lisa, como el ticket de caja) */
.gx-vd-club { padding: 14px 16px 16px; max-width: 360px; box-shadow: inset 0 -4px 0 var(--gx-paper-lo), 0 6px 0 rgba(2, 6, 4, .55); }
.gx-vd-club::before, .gx-vd-club::after { display: none; }
.du-club .gx-paper { padding: 14px 16px 16px; }
.du-club .gx-paper::before, .du-club .gx-paper::after { display: none; }
.club-tk { display: grid; gap: 10px; color: var(--gx-ink); }
.club-tk .ck-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.club-tk .ck-t { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-family: var(--mono); font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--gx-gold-lo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.club-tk .ck-g { font-weight: 400; font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ck-fi { width: 32px; height: 32px; image-rendering: pixelated; flex: none; display: inline-block; }
.ck-fi.sm { width: 24px; height: 24px; vertical-align: -5px; margin-left: 6px; }
.club-tk .ck-row { display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; gap: 10px; align-items: center; }
.club-tk .ck-lv { font-family: var(--mono); font-size: 16px; line-height: 1; padding: 4px 6px 3px; background: var(--gx-ink); color: var(--gx-acc); white-space: nowrap; }
.club-tk .ck-lv.nx { background: var(--gx-gold); color: var(--gx-ink); }
.club-tk .ck-bar { position: relative; height: 18px; background: #d8cba8; box-shadow: inset 0 0 0 2px var(--gx-ink); overflow: hidden; }
.club-tk .ck-bar i { position: absolute; left: 2px; top: 2px; bottom: 2px; max-width: calc(100% - 4px); background: repeating-linear-gradient(90deg, var(--gx-gold) 0 10px, var(--gx-gold-hi) 10px 12px); }
.club-tk .ck-pay { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; min-width: 0; }
.club-tk .ck-pay[hidden] { display: none; }
.club-tk .ck-up { flex: 1 1 12ch; min-width: 0; font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--gx-red-lo); text-wrap: balance; }
.club-tk .ck-f { font-weight: 400; font-size: 28px; line-height: 1; color: var(--gx-gold-lo); white-space: nowrap; font-variant-numeric: tabular-nums; }
.club-tk.hit .ck-pay { animation: ck-pop .55s cubic-bezier(.2, 1.5, .4, 1) both; }
.club-tk.hit .ck-lv.nx { animation: ck-glow .9s ease-out both; }
@keyframes ck-pop { from { transform: scale(.55) rotate(-5deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ck-glow { from { box-shadow: 0 0 0 0 rgba(255, 207, 102, .9); } to { box-shadow: 0 0 0 14px rgba(255, 207, 102, 0); } }

/* ---------- la tarjeta de socio de la portada: su sitio, arriba a la izquierda (la carta la dibuja js/socio.js; estilos en css/socio.css) */
.hh-top .hh-socio-w { position: absolute; left: 0; top: 74px; z-index: 2; }
@keyframes sc-gain { to { transform: scale(1.12); } }
@keyframes sc-spin { 50% { transform: scaleX(.2); } }

/* pantallas estrechas (la web en movil): la tarjeta deja de flotar */
@media (max-width: 900px) { .hh-top .hh-socio-w { position: static; margin: 8px auto 0; } }