/* ---------------------------------------------------------------- LA CARTA DEL SOCIO (js/socio.js)
   La carta es un lienzo de pixel art a escala entera; encima van su sombra dura, el brillo de su edicion y el reflejo (las tres con la silueta
   del lienzo como mascara) y los textos. --sd = pixeles de diseno por pixel de arte; --ink = la tinta de su banda. */
.sc-host { position: relative; display: block; }
.sc-card { position: relative; display: block; }
.sc-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .3s cubic-bezier(.2, 1, .3, 1); will-change: transform; }
.sc-cv { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.sc-shadow, .sc-fx, .sc-glare { position: absolute; inset: 0; pointer-events: none; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.sc-shadow { transform: translate(calc(var(--sd) * 3px), calc(var(--sd) * 4px)); background: rgba(2, 6, 4, .62); }
.sc-glare { background: radial-gradient(circle at var(--gx, 30%) var(--gy, 18%), rgba(255, 255, 255, .45) 0, rgba(255, 255, 255, 0) 46%); mix-blend-mode: soft-light; opacity: 0; transition: opacity .25s; }
.sc-host:hover .sc-glare, button:hover > .sc-host .sc-glare, button:focus-visible > .sc-host .sc-glare, html[data-input="pad"] button:focus > .sc-host .sc-glare { opacity: 1; }
/* las ediciones: plata y oro, un reflejo que cruza con el raton; negra y leyenda, holograficas */
.fx-plata { background: linear-gradient(115deg, transparent 22%, rgba(255, 255, 255, .6) 38%, rgba(190, 210, 255, .38) 46%, transparent 60%) var(--gx, 20%) 0 / 260% 100% no-repeat; mix-blend-mode: overlay; }
.fx-oro { background: linear-gradient(115deg, transparent 20%, rgba(255, 246, 200, .72) 36%, rgba(255, 190, 60, .45) 46%, transparent 62%) var(--gx, 20%) 0 / 260% 100% no-repeat; mix-blend-mode: overlay; }
.fx-negra { background: linear-gradient(120deg, #ff4d6d, #ffd166, #06d6a0, #4cc9f0, #b5179e, #ff4d6d) var(--gx, 20%) 0 / 300% 100%; mix-blend-mode: overlay; opacity: .42; }
.fx-leyenda { background: linear-gradient(120deg, #ff4d6d, #ffd166, #06d6a0, #4cc9f0, #b5179e, #ff4d6d) var(--gx, 20%) var(--gy, 0%) / 300% 300%; mix-blend-mode: overlay; opacity: .62; }
/* los textos, sobre las bandas de la carta */
.sc-cat, .sc-name, .sc-tit, .sc-foot { position: absolute; box-sizing: border-box; pointer-events: none; font-family: var(--sans); font-weight: 400; line-height: 1; }
.sc-cat { display: flex; align-items: center; justify-content: center; padding: 0 calc(var(--sd) * 3px) calc(var(--sd) * .5px); white-space: nowrap; overflow: hidden; color: var(--ink); letter-spacing: .02em; text-align: center; }
.sc-cat.two { white-space: normal; line-height: .92; text-wrap: balance; }
.sc-name { display: block; padding: 0 calc(var(--sd) * 3px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; color: #16241c; line-height: calc(var(--sd) * 16px); }
.sc-tit { display: flex; align-items: center; justify-content: center; padding: 0 calc(var(--sd) * 3px); white-space: nowrap; overflow: hidden; color: #ffd98a; line-height: 1; text-shadow: 0 calc(var(--sd) * 1px) 0 #120e1c; }   /* el titulo, en la placa de cuero */
.sc-tit > span { display: inline-block; transform-origin: 50% 50%; }
.sc-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 calc(var(--sd) * 2px); color: var(--ink); }
.sc-lv { font-family: var(--mono); font-weight: 400; font-size: max(16px, calc(var(--sd) * 7px)); line-height: 1; padding: calc(var(--sd) * .5px) calc(var(--sd) * 2px) 0; color: #ffd98a; background: #16241c; white-space: nowrap; }
.sc-f { display: flex; align-items: center; gap: calc(var(--sd) * 1px); font-size: max(18px, calc(var(--sd) * 9.5px)); white-space: nowrap; }
.sc-f b { font-weight: 400; font-variant-numeric: tabular-nums; }
.sc-fi { display: block; image-rendering: pixelated; }
.sc-cat.sc-stamp { animation: sc-stamp .5s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes sc-stamp { from { transform: scale(1.9) rotate(-8deg); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
html.reduce-motion .sc-tilt { transition: none; transform: none !important; }
html.reduce-motion .sc-cat.sc-stamp { animation: none; }

/* la portada: arriba a la izquierda, en espejo con el crupier (sin el papel ni el giro de la tarjeta de antes) */
.hh-top .hh-socio-w.sc-v2 { width: auto; transform: none; filter: none; transition: none; }
.hh-top .hh-socio-w.sc-v2:hover, .hh-top .hh-socio-w.sc-v2:focus-within { transform: none; }
.hh-top .hh-socio.sc-v2 { display: block; width: auto; padding: 0; background: none; clip-path: none; box-shadow: none; border: 0; }
.hh-top .hh-socio.sc-v2:focus-visible { outline: none; box-shadow: none; }
.hh-top .hh-socio.sc-v2:focus-visible .sc-card, html[data-input="pad"] .hh-top .hh-socio.sc-v2:focus .sc-card { outline: 3px solid var(--gx-red); outline-offset: 4px; }
.hh-socio.sc-v2.gain .sc-f { animation: sc-gain .22s ease-in-out 6 alternate; transform-origin: 100% 50%; }
.hh-socio.sc-v2.gain .sc-fi { animation: sc-spin .44s ease-in-out 3; }
html.no-shake .hh-socio.sc-v2.gain .sc-f, html.no-shake .hh-socio.sc-v2.gain .sc-fi { animation: none; }

/* el Perfil: la carta en grande con las cifras al lado, y el icono a elegir */
.pf-carta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px 12px 18px 24px; }   /* v0.3.174: el mismo ancho total de antes, con mas aire a la izquierda para lo que asoma del marco */   /* v0.3.174: aire para lo que asoma del marco (terciopelo, laureles), sin pisar el borde del papel */
.pf-carta .pf-cc { display: block; }
.pf-carta .pf-cs { display: grid; gap: 5px; min-width: 0; }
.pf-carta .pf-since { font-size: 18px; }
/* el boton que abre «Tu carta» en la tienda */
#pfPick { margin-top: 8px; }
.sc-dress { justify-self: start; }
.sc-dress .ic { width: 26px; height: 26px; flex: none; image-rendering: pixelated; }
/* la columna izquierda se ensancha (5 de 12): carta y cifras lado a lado, y el indice de logros en dos columnas */
.pf-left.carta { grid-column: 1 / 6; }
.pf-grid12:has(.pf-left.carta) .pf-right { grid-column: 6 / 13; }
.pf-left.carta .pf-idx { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
.pf-left.carta .pf-ix { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; padding: 4px 10px 4px 8px; font-size: 19px; }   /* en dos columnas el nombre puede ir en dos lineas: nunca cortado */
.pf-left.carta .pf-ix .ic { width: 28px; height: 28px; }
.pf-left.carta .pf-ix span { white-space: normal; overflow: visible; text-overflow: clip; line-height: .95; text-wrap: balance; overflow-wrap: anywhere; }
.pf-left.carta .pf-ix i { font-size: 17px; }