:root {
    --paper: #F2EBDC;
    --ink: #1A1814;
    --blau: #004D98;
    --garnet: #A50044;
    --or: #E5B50F;
}
.icon-ui {
    width: 1.15em;
    height: 1.15em;
    display: inline-block;
    vertical-align: -0.18em;
    flex-shrink: 0;
}
.icon-game {
    width: 1.65em;
    height: 1.65em;
    display: inline-block;
    vertical-align: -0.32em;
    flex-shrink: 0;
}
html, body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #070A12;
    color: #F8FAFC;
    overflow-x: hidden;
    max-width: 100vw;
}
.font-display {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 0.05em;
}
.blaugrana-gradient {
    background: linear-gradient(135deg, #004D98 0%, #A50044 100%);
}
.card-hover {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(165, 0, 68, 0.3);
}
.kit-zoom-Transition {
    transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes quickPop {
    0% { transform: translate(-50%, -50%) scale(0.85); }
    50% { transform: translate(-50%, -50%) scale(1.12); }
    100% { transform: translate(-50%, -50%) scale(1); }
}
.pop-node { animation: quickPop 0.22s ease-out forwards; }

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.fade-in-up,
.animate-fade-in-up {
    animation: fadeInUp 0.2s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    .fade-in-up,
    .animate-fade-in-up,
    .pop-node,
    .card-hover,
    .kit-zoom-Transition {
        animation: none !important;
        transition: none !important;
    }
}

.senyera-stripe {
    background: linear-gradient(
        180deg,
        #EDBB00 0% 11.11%,
        #DA121A 11.11% 22.22%,
        #EDBB00 22.22% 33.33%,
        #DA121A 33.33% 44.44%,
        #EDBB00 44.44% 55.55%,
        #DA121A 55.55% 66.66%,
        #EDBB00 66.66% 77.77%,
        #DA121A 77.77% 88.88%,
        #EDBB00 88.88% 100%
    );
}

/* --- CARNET DE SOCI DIGITAL: TARGETA HORITZONTAL DE DUES CARES (3D FLIP) --- */
.soci-perspective {
    perspective: 1200px;
}
.card-3d-inner,
.soci-card-flipper {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.65s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.card-3d-inner.is-flipped,
.soci-card-flipper.is-flipped,
.is-flipped {
    transform: rotateY(180deg);
}
.card-face-front,
.card-face-back,
.soci-card-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.card-face-back,
.soci-card-back {
    transform: rotateY(180deg);
    background-color: #111111;
}

/* Fons dinàmics de la Cara A segons el Rang de l'usuari (1..5 sobre 300 PTS) */
.soci-surface-rank-1 {
    /* 0 - 90 pts: JUVENIL B (Pissarra metàl·lica) */
    background:
        radial-gradient(circle at 85% 18%, rgba(226, 232, 240, 0.18) 0%, transparent 48%),
        linear-gradient(135deg, #1E293B 0%, #0F172A 52%, #020617 100%);
}
.soci-surface-rank-2 {
    /* 91 - 160 pts: DEBUTANT AL CAMP NOU (Blau nit profund) */
    background:
        radial-gradient(circle at 85% 18%, rgba(56, 189, 248, 0.22) 0%, transparent 48%),
        linear-gradient(135deg, #002B5B 0%, #0F172A 55%, #020617 100%);
}
.soci-surface-rank-3 {
    /* 161 - 220 pts: TITULAR INDISCUTIBLE (Degradat blaugrana fosc regi) */
    background:
        radial-gradient(circle at 88% 15%, rgba(237, 187, 0, 0.18) 0%, transparent 45%),
        linear-gradient(135deg, #004D98 0%, #1a1025 50%, #A50044 100%);
}
.soci-surface-rank-4 {
    /* 221 - 265 pts: CAPITÀ DEL PRIMER EQUIP (Negre obsidiana amb detall Senyera i or) */
    background:
        radial-gradient(circle at 88% 16%, rgba(237, 187, 0, 0.24) 0%, transparent 48%),
        radial-gradient(circle at 12% 88%, rgba(165, 0, 68, 0.28) 0%, transparent 50%),
        linear-gradient(135deg, #05070E 0%, #0B1325 45%, #1A0812 100%);
}
@keyframes goldShimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.soci-surface-rank-5 {
    /* 266 - 300 pts: LLEGENDA 1899 · FALS 9 D'OR (Negre carbó i or vell) */
    background:
        radial-gradient(circle at 85% 18%, rgba(237, 187, 0, 0.35) 0%, transparent 46%),
        linear-gradient(125deg, #451A03 0%, #050508 42%, #1C1304 68%, #020617 100%);
    background-size: 100% 100%, 200% 200%;
    animation: goldShimmer 5s ease infinite;
}

::-webkit-scrollbar { height: 6px; width: 6px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 9999px; }