/* ============================================================
   L'ASTA - stile comune a regia e schermo
   (colori, oro animato e carta FUT del 40° Torneo Sociale)
   ============================================================ */
:root {
  --nero: #05070A;
  --nero-2: #07080B;
  --oro: #E5C158;
  --oro-scuro: #C9A227;
  --oro-chiaro: #FFF1B8;
  --rosso: #C8102E;
  --rosso-chiaro: #FF8A9C;
  --verde: #22c55e;
  --testo: #ffffff;
  --tenue: rgba(255, 255, 255, 0.62);
  --linea: rgba(229, 193, 88, 0.2);
  --fut: 'DIN Condensed', 'Barlow Condensed', 'Bahnschrift SemiCondensed', 'Bahnschrift', 'Roboto Condensed', 'Arial Narrow', sans-serif;
  --corpo: 'Helvetica Neue', 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
  --pulsante-oro: linear-gradient(100deg, #C9A227, #FFF1B8 45%, #E5C158 60%, #C9A227);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--nero); color: var(--testo); font-family: var(--corpo); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
.fut { font-family: var(--fut); font-weight: 700; }
.cifre { font-variant-numeric: tabular-nums; }
@supports (text-box: trim-both cap alphabetic) {
  .taglia { text-box: trim-both cap alphabetic; }
}

/* oro che luccica */
@keyframes oro-scorre { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.oro-testo {
  padding: 0.1em 0 0.04em;
  background-image: linear-gradient(100deg, #9c7a16 0%, #E5C158 18%, #FFF6CF 30%, #E5C158 42%, #b8901f 58%, #FFF0B8 76%, #C9A227 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: oro-scorre 7s linear infinite;
}
@keyframes raggi-gira { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes punto-vivo { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); } 50% { box-shadow: 0 0 0 0.5em rgba(239, 68, 68, 0); } }
.punto-vivo { display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%; background: #ef4444; animation: punto-vivo 1.6s ease-in-out infinite; }

/* ============================================================
   LA CARTA FUT
   ============================================================ */
.carta {
  --maschera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 146' preserveAspectRatio='none'%3E%3Cpath d='M0 12C0 6 4 3 10 2.5L36 1C42 .6 46 0 50 0C54 0 58 .6 64 1L90 2.5C96 3 100 6 100 12L100 118C100 124 97 127 92 129.5L56 144.5C52 146 48 146 44 144.5L8 129.5C3 127 0 124 0 118Z'/%3E%3C/svg%3E");
  position: relative; width: 100%; aspect-ratio: 100 / 146; container-type: inline-size;
  font-family: var(--fut); font-weight: 700; color: var(--c-testo); user-select: none;
  filter: drop-shadow(0 2.4cqw 4cqw rgba(0, 0, 0, 0.55));
}
.carta[data-stile='oro'] { --c-fondo: linear-gradient(155deg, #FFF6C9 0%, #F2D57A 22%, #D4AF37 48%, #F7E39A 70%, #B8901F 100%); --c-testo: #2A1F05; --c-tenue: rgba(42,31,5,0.66); --c-bordo: rgba(255,250,220,0.95); --c-sagoma: rgba(90,64,6,0.34); --c-trama: rgba(255,255,255,0.12); --c-raggi: rgba(255,255,255,0.22); --c-cornice: #8A6A10; --c-luce: rgba(255,248,214,0.55); --c-fascia: linear-gradient(180deg, rgba(120,88,10,0), rgba(120,88,10,0.12)); }
.carta[data-stile='argento'] { --c-fondo: linear-gradient(155deg, #FFFFFF 0%, #E3E7EC 25%, #B9C0C9 52%, #EEF1F4 72%, #98A1AB 100%); --c-testo: #1B2129; --c-tenue: rgba(27,33,41,0.64); --c-bordo: rgba(255,255,255,0.95); --c-sagoma: rgba(40,48,58,0.3); --c-trama: rgba(255,255,255,0.18); --c-raggi: rgba(255,255,255,0.3); --c-cornice: #7D8792; --c-luce: rgba(255,255,255,0.6); --c-fascia: linear-gradient(180deg, rgba(60,70,80,0), rgba(60,70,80,0.1)); }
.carta[data-stile='bronzo'] { --c-fondo: linear-gradient(155deg, #F8D9BC 0%, #D9A06E 25%, #A8683A 55%, #E0AE80 75%, #7E4A22 100%); --c-testo: #2B1608; --c-tenue: rgba(43,22,8,0.66); --c-bordo: rgba(255,230,205,0.9); --c-sagoma: rgba(80,40,10,0.34); --c-trama: rgba(255,255,255,0.12); --c-raggi: rgba(255,240,225,0.22); --c-cornice: #6B3C18; --c-luce: rgba(255,230,205,0.5); --c-fascia: linear-gradient(180deg, rgba(90,45,15,0), rgba(90,45,15,0.12)); }
.carta[data-stile='totw'] { --c-fondo: radial-gradient(120% 80% at 50% 0%, #3A3220 0%, #15130E 45%, #050505 100%); --c-testo: #F3D77E; --c-tenue: rgba(243,215,126,0.75); --c-bordo: #E5C158; --c-sagoma: rgba(229,193,88,0.2); --c-trama: rgba(229,193,88,0.05); --c-raggi: rgba(229,193,88,0.14); --c-cornice: #C9A227; --c-luce: rgba(255,241,184,0.35); --c-fascia: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.35)); }
.carta[data-stile='rubino'] { --c-fondo: radial-gradient(130% 90% at 30% 0%, #FF5A72 0%, #C8102E 32%, #7A0A1E 62%, #2A0209 100%); --c-testo: #FFE8A3; --c-tenue: rgba(255,232,163,0.85); --c-bordo: #F3D77E; --c-sagoma: rgba(255,214,120,0.22); --c-trama: rgba(255,220,150,0.05); --c-raggi: rgba(255,214,120,0.16); --c-cornice: #E5C158; --c-luce: rgba(255,241,184,0.35); --c-fascia: linear-gradient(180deg, rgba(20,0,4,0), rgba(20,0,4,0.42)); }
.carta[data-stile='icona'] { --c-fondo: linear-gradient(155deg, #FFFFFF 0%, #FBF5E4 30%, #EADBB0 60%, #FFFBEF 80%, #CDB57A 100%); --c-testo: #3A2B05; --c-tenue: rgba(58,43,5,0.64); --c-bordo: #C9A227; --c-sagoma: rgba(160,125,40,0.3); --c-trama: rgba(201,162,39,0.08); --c-raggi: rgba(201,162,39,0.14); --c-cornice: #C9A227; --c-luce: rgba(255,255,255,0.7); --c-fascia: linear-gradient(180deg, rgba(201,162,39,0), rgba(201,162,39,0.1)); }
/* carta colorata con la maglia della squadra (dopo l'aggiudicazione) */
.carta[data-stile='squadra'] { --c-fondo: radial-gradient(130% 90% at 30% 0%, color-mix(in srgb, var(--maglia) 55%, white) 0%, var(--maglia) 34%, color-mix(in srgb, var(--maglia) 55%, black) 70%, color-mix(in srgb, var(--maglia) 22%, black) 100%); --c-testo: #FFE8A3; --c-tenue: rgba(255,232,163,0.85); --c-bordo: #F3D77E; --c-sagoma: rgba(255,255,255,0.2); --c-trama: rgba(255,255,255,0.05); --c-raggi: rgba(255,240,200,0.18); --c-cornice: #E5C158; --c-luce: rgba(255,241,184,0.35); --c-fascia: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.38)); }
.carta[data-stile='squadra'][data-chiara] { --c-testo: #2A1F05; --c-tenue: rgba(42,31,5,0.7); --c-sagoma: rgba(0,0,0,0.2); }

.carta .c-fondo { position: absolute; inset: 0; overflow: hidden; background: var(--c-fondo); -webkit-mask: var(--maschera) 0 0 / 100% 100% no-repeat; mask: var(--maschera) 0 0 / 100% 100% no-repeat; }
.carta .c-raggi { position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 62% 30%, var(--c-raggi) 0deg 5deg, transparent 5deg 15deg); -webkit-mask-image: radial-gradient(circle at 62% 30%, #000 0%, transparent 58%); mask-image: radial-gradient(circle at 62% 30%, #000 0%, transparent 58%); }
.carta .c-trama { position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, var(--c-trama) 0 1.5px, transparent 1.5px 9px); }
.carta .c-40 { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 92cqw; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--c-sagoma); transform: translateY(-6%); }
.carta .c-foto { position: absolute; right: 4%; top: 7%; width: 66%; height: 50.5%; }
.carta .c-foto img { width: 100%; height: 100%; object-fit: cover; object-position: top; -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent); }
.carta .c-foto svg { width: 100%; height: 100%; display: block; }
.carta .c-fascia { position: absolute; left: 0; right: 0; top: 56%; bottom: 0; background: var(--c-fascia); }
@keyframes riflesso { 0%, 55% { transform: translateX(-160%) skewX(-18deg); } 85%, 100% { transform: translateX(260%) skewX(-18deg); } }
.carta .c-riflesso { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.carta .c-riflesso::before { content: ''; position: absolute; top: -10%; bottom: -10%; left: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.42), transparent); animation: riflesso 6s ease-in-out infinite; animation-delay: var(--ritardo, 0s); }
.carta .c-cornice { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.carta .c-etichetta { position: absolute; top: 4.4%; left: 50%; transform: translateX(-50%); white-space: nowrap; text-transform: uppercase; font-size: 4.8cqw; letter-spacing: 0.2em; color: var(--c-tenue); }
.carta .c-sx { position: absolute; left: 7%; top: 11%; width: 25%; display: flex; flex-direction: column; align-items: center; }
.carta .c-ovr { font-size: 23cqw; line-height: 0.8; letter-spacing: -0.01em; }
.carta .c-ovr.lungo { font-size: 13cqw; line-height: 0.9; }
.carta .c-ovr.minimo { font-size: 9.5cqw; line-height: 1; }
.carta .c-ruolo { font-size: 9cqw; line-height: 1; margin-top: 1.8cqw; text-transform: uppercase; }
.carta .c-linea { display: block; margin: 2.6cqw 0 2.4cqw; height: 1px; width: 62%; background: var(--c-tenue); }
.carta .c-bandiera { display: flex; overflow: hidden; width: 11cqw; height: 7.4cqw; border-radius: 0.8cqw; box-shadow: 0 0.4cqw 1.2cqw rgba(0,0,0,0.35); }
.carta .c-bandiera i { flex: 1; }
.carta .c-bandiera i:nth-child(1) { background: #009246; }
.carta .c-bandiera i:nth-child(2) { background: #fff; }
.carta .c-bandiera i:nth-child(3) { background: #CE2B37; }
.carta .c-logo { margin-top: 2.6cqw; width: 14cqw; height: 14cqw; object-fit: contain; filter: drop-shadow(0 0.5cqw 1cqw rgba(0,0,0,0.35)); }
.carta .c-nome { position: absolute; left: 6%; right: 6%; top: 57.5%; text-align: center; }
.carta .c-nome b { display: block; font-weight: 700; font-size: 11.2cqw; line-height: 1; text-transform: uppercase; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carta .c-nome b.piccolo { font-size: 9.4cqw; }
.carta .c-nome b.minimo { font-size: 7.4cqw; }
.carta .c-filo { margin: 2.2cqw auto 0; height: 1px; width: 84%; background: linear-gradient(90deg, transparent, var(--c-tenue), transparent); }
.carta .c-stat { position: absolute; top: 69.5%; left: 13%; right: 13%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.carta .c-stat div { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.carta .c-stat span { font-size: 5.6cqw; color: var(--c-tenue); text-transform: uppercase; letter-spacing: 0.04em; }
.carta .c-stat strong { font-size: 10.5cqw; margin-top: 1.4cqw; font-variant-numeric: tabular-nums; white-space: nowrap; }
.carta .c-piede { position: absolute; left: 16%; right: 16%; top: 87.6%; display: flex; align-items: center; justify-content: center; gap: 1.6cqw; font-size: 4.8cqw; letter-spacing: 0.14em; color: var(--c-tenue); text-transform: uppercase; line-height: 1; white-space: nowrap; }
.carta .c-piede i { flex-shrink: 0; width: 3.2cqw; height: 3.2cqw; border-radius: 50%; box-shadow: 0 0 0 0.4cqw rgba(255,255,255,0.6); }
.carta .c-piede span { overflow: hidden; text-overflow: ellipsis; }

/* il dorso della carta */
.carta.retro { --c-testo: #E5C158; }
.carta.retro .c-fondo { background: radial-gradient(110% 70% at 50% 30%, #2B2416 0%, #12100B 55%, #050505 100%); }
.carta.retro .c-trama { background-image: repeating-linear-gradient(45deg, rgba(229,193,88,0.07) 0 1px, transparent 1px 8px), repeating-linear-gradient(-45deg, rgba(229,193,88,0.07) 0 1px, transparent 1px 8px); }
.carta.retro .c-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.carta.retro .c-centro b { font-size: 46cqw; line-height: 1; }
.carta.retro .c-centro span { margin-top: 5cqw; font-size: 6cqw; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(229,193,88,0.7); }

/* piccola carta-badge della categoria (tabellone, liste) */
.badge-cat { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--fut); font-weight: 700; line-height: 1; border-radius: 0.28em; }
.badge-cat[data-stile='oro'] { background: linear-gradient(155deg, #FFF6C9, #D4AF37 55%, #B8901F); color: #2A1F05; }
.badge-cat[data-stile='argento'] { background: linear-gradient(155deg, #FFFFFF, #B9C0C9 55%, #98A1AB); color: #1B2129; }
.badge-cat[data-stile='bronzo'] { background: linear-gradient(155deg, #F8D9BC, #A8683A 55%, #7E4A22); color: #FFF1E3; }
.badge-cat[data-stile='rubino'] { background: linear-gradient(155deg, #FF5A72, #C8102E 50%, #7A0A1E); color: #FFE8A3; }
.badge-cat[data-stile='totw'] { background: linear-gradient(155deg, #3A3220, #15130E); color: #F3D77E; box-shadow: inset 0 0 0 1px rgba(229,193,88,0.6); }
.badge-cat[data-stile='icona'] { background: linear-gradient(155deg, #FFFFFF, #EADBB0 55%, #CDB57A); color: #3A2B05; }

@media (prefers-reduced-motion: reduce) {
  .oro-testo, .carta .c-riflesso::before, .punto-vivo { animation: none !important; }
}