/* RPlife — landing pre-login */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Sora:wght@500;600;700;800&display=swap');

:root {
    --rp-gold: #f5c542;
    --rp-gold-2: #ff9f1c;
    --rp-cyan: #4ec2ff;
    --rp-ink: #eef3ff;
    --rp-muted: #9aa8c7;
}

html,
body.rp-landing {
    min-height: 100%;
    background: #d9f3ff;
    color: #123047;
    font-family: Outfit, Nunito, system-ui, sans-serif;
}

.rp-landing {
    position: relative;
    overflow-x: hidden;
}

.rp-landing::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(980px 560px at 6% -12%, rgba(255, 225, 74, 0.55), transparent 58%),
        radial-gradient(860px 500px at 100% 0%, rgba(78, 194, 255, 0.5), transparent 54%),
        radial-gradient(720px 440px at 78% 110%, rgba(47, 224, 138, 0.28), transparent 56%),
        url('/assets/images/background-light.jpg') right bottom / 70% auto no-repeat,
        linear-gradient(165deg, #c8efff 0%, #eef9ff 38%, #fff4c8 72%, #d9ffe8 100%);
}

.rp-landing::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(201, 239, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 42%, rgba(255, 244, 200, 0.1) 100%);
    pointer-events: none;
}

.rp-glass {
    background: rgba(16, 28, 48, 0.92);
    border: 1px solid rgba(18, 48, 71, 0.22);
    box-shadow: 0 18px 50px rgba(15, 45, 69, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    color: #f4f8ff;
}

.rp-glass-hover {
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.rp-glass-hover:hover {
    transform: translateY(-4px);
    border-color: rgba(245, 197, 66, 0.35);
    box-shadow: 0 22px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(245, 197, 66, 0.12);
}

.rp-title {
    font-family: Sora, Outfit, sans-serif;
    letter-spacing: -0.04em;
    background: linear-gradient(110deg, #0b2238 0%, #0e4a78 42%, #123047 100%);
    background-size: 180% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: #0b2238;
    -webkit-text-fill-color: transparent;
    animation: rp-shimmer 7s ease-in-out infinite;
}

@keyframes rp-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.rp-orb {
    position: fixed;
    border-radius: 999px;
    filter: blur(42px);
    opacity: 0.65;
    pointer-events: none;
    z-index: 0;
    animation: rp-float 9s ease-in-out infinite;
}

.rp-orb--gold {
    width: 22rem;
    height: 22rem;
    top: -5rem;
    left: -4rem;
    background: rgba(255, 225, 74, 0.55);
    animation: rp-float 8s ease-in-out infinite, rp-orb-drift 16s ease-in-out infinite alternate;
}

.rp-orb--cyan {
    width: 24rem;
    height: 24rem;
    top: 4rem;
    right: -6rem;
    background: rgba(78, 194, 255, 0.42);
    animation: rp-float 10s ease-in-out infinite, rp-orb-drift 18s ease-in-out infinite alternate-reverse;
    animation-delay: -3s, -2s;
}

.rp-orb--mint {
    width: 18rem;
    height: 18rem;
    bottom: -4rem;
    left: 28%;
    background: rgba(47, 224, 138, 0.32);
    animation: rp-float 11s ease-in-out infinite, rp-orb-drift 20s ease-in-out infinite alternate;
    animation-delay: -5s, -4s;
}

@keyframes rp-orb-drift {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(6%, -8%) scale(1.12); }
}

.rp-sky {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(980px 560px at 6% -12%, rgba(255, 225, 74, 0.55), transparent 58%),
        radial-gradient(860px 500px at 100% 0%, rgba(78, 194, 255, 0.5), transparent 54%),
        radial-gradient(720px 440px at 78% 110%, rgba(47, 224, 138, 0.28), transparent 56%),
        url('/assets/images/background-light.jpg') right bottom / 70% auto no-repeat,
        linear-gradient(165deg, #c8efff 0%, #eef9ff 38%, #fff4c8 72%, #d9ffe8 100%);
    background-color: #d9f3ff;
}

@keyframes rp-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-16px); }
}

.rp-hotel {
    animation: rp-bob 6.5s ease-in-out infinite;
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.45));
}

@keyframes rp-bob {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-12px) rotate(1deg); }
}

.rp-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #32f08a;
    box-shadow: 0 0 0 0 rgba(50, 240, 138, 0.7);
    animation: rp-pulse 1.8s ease-out infinite;
}

@keyframes rp-pulse {
    0% { box-shadow: 0 0 0 0 rgba(50, 240, 138, 0.65); }
    70% { box-shadow: 0 0 0 10px rgba(50, 240, 138, 0); }
    100% { box-shadow: 0 0 0 0 rgba(50, 240, 138, 0); }
}

.rp-input {
    width: 100%;
    border-radius: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(7, 10, 20, 0.72);
    color: #fff;
    padding: 0.78rem 0.95rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.rp-input::placeholder {
    color: #7d8bab;
}

.rp-input:focus {
    border-color: rgba(245, 197, 66, 0.7);
    box-shadow: 0 0 0 3px rgba(245, 197, 66, 0.18);
}

.rp-btn-gold {
    background: linear-gradient(180deg, #ffe566 0%, #ffcc1a 42%, #f5a400 100%);
    color: #1a1200;
    border: 2px solid #ffe9a6;
    box-shadow: 0 10px 24px rgba(245, 197, 66, 0.28);
}

.rp-enter-cta,
a.rp-enter-cta,
button.rp-enter-cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #fff36a 0%, #ffd21a 45%, #f59e00 100%) !important;
    color: #14100a !important;
    border: 3px solid #123047 !important;
    border-radius: 999px !important;
    padding: 0.8rem 1.55rem !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.1;
    box-shadow:
        0 4px 0 #0d2238,
        0 12px 24px rgba(15, 45, 69, 0.28),
        0 0 0 4px rgba(255, 210, 26, 0.28) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
    animation: rp-enter-glow 2.4s ease-in-out infinite;
}

.rp-enter-cta:hover,
a.rp-enter-cta:hover,
button.rp-enter-cta:hover {
    filter: brightness(1.06);
    transform: translateY(-2px) scale(1.04);
    color: #14100a !important;
}

@keyframes rp-enter-glow {
    0%, 100% {
        box-shadow:
            0 4px 0 #0d2238,
            0 12px 24px rgba(15, 45, 69, 0.28),
            0 0 0 4px rgba(255, 210, 26, 0.22);
    }
    50% {
        box-shadow:
            0 4px 0 #0d2238,
            0 14px 28px rgba(245, 166, 0, 0.45),
            0 0 0 7px rgba(255, 210, 26, 0.38);
    }
}

.rp-btn-gold:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.rp-btn-ghost {
    background: #ffffff;
    color: #123047 !important;
    border: 2px solid #123047;
    box-shadow: 0 4px 0 #0d2238, 0 8px 18px rgba(15, 45, 69, 0.12);
}

.rp-btn-ghost:hover {
    background: #e8f6ff;
    border-color: #0b6ea8;
    color: #0b2238 !important;
}

.rp-tab-active {
    background: rgba(255, 255, 255, 0.16);
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(245, 197, 66, 0.55);
}

.rp-hotel {
    mix-blend-mode: normal;
    filter: drop-shadow(0 18px 28px rgba(15, 45, 69, 0.28));
}

.rp-badge-tile {
    background: rgba(8, 16, 32, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.rp-badge-tile:hover {
    transform: translateY(-3px) scale(1.04);
    border-color: rgba(245, 197, 66, 0.4);
    background: rgba(245, 197, 66, 0.08);
}

.rp-avatar-ring {
    box-shadow: 0 0 0 2px rgba(245, 197, 66, 0.55), 0 8px 18px rgba(0, 0, 0, 0.35);
}

/* Community faces: stack leggero su desktop, griglia pulita su mobile */
.rp-community-faces {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.rp-community-face {
    position: relative;
    margin-left: -0.7rem;
    flex-shrink: 0;
}

.rp-community-face:first-child {
    margin-left: 0;
}

.rp-community-row {
    gap: 0;
}

@media (max-width: 767px) {
    .rp-title {
        font-size: 2.45rem !important;
        line-height: 1.05 !important;
    }

    header .rp-btn-gold,
    header .rp-enter-cta {
        padding: 0.55rem 0.9rem !important;
        font-size: 0.72rem !important;
    }

    .rp-community-row {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.85rem;
    }

    .rp-community-faces {
        flex-wrap: wrap;
        gap: 0.4rem;
        max-width: 100%;
    }

    .rp-community-face {
        margin-left: 0 !important;
        width: 2.65rem !important;
        height: 2.65rem !important;
    }

    .rp-community-copy {
        margin-left: 0 !important;
        max-width: 100% !important;
        font-size: 0.875rem;
        line-height: 1.45;
    }

    .rp-discord__head {
        flex-wrap: wrap;
        gap: 0.55rem;
        padding: 0.85rem 0.9rem;
    }

    .rp-discord__online {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
    }

    .rp-discord__title {
        font-size: 1rem !important;
    }

    .rp-friends-strip {
        flex-wrap: wrap;
        gap: 0.65rem;
        padding: 0.7rem 0.85rem;
    }

    .rp-friends-strip__avatars {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
        max-width: 100%;
    }

    .rp-friends-strip__avatar {
        margin-left: 0 !important;
    }

    .rp-cms-header .rp-enter-cta,
    .rp-cms-header .rp-btn-gold {
        padding: 0.55rem 0.85rem !important;
        font-size: 0.7rem !important;
        white-space: nowrap;
    }

    .rp-cms-header img.h-11 {
        height: 2.35rem;
    }

    .rp-topbar {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .rp-me-hero {
        border-radius: 18px !important;
    }

    .navigation-icon {
        width: 18px !important;
        height: 18px !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        flex-shrink: 0;
    }
}

.rp-cms-header {
    position: relative;
    z-index: 40;
    background: rgba(255, 255, 255, 0.28);
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 10px 30px rgba(15, 45, 69, 0.08);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

html.dark body.site-bg,
html.dark main.site-bg,
html.dark body.flex.min-h-screen,
html.dark body.rp-landing,
html.dark #app,
html.dark #app.dark\:bg-gray-900,
body.site-bg,
body.rp-landing,
main.site-bg,
#app,
#app.bg-gray-100 {
    background: transparent !important;
    background-color: transparent !important;
}

html.app,
html.app.dark,
html.dark {
    background-color: #d9f3ff !important;
}

.rp-cms-header,
nav.relative,
main.site-bg,
#app,
footer {
    position: relative;
    z-index: 1;
}

.rp-me-hero,
.me-backdrop {
    border-radius: 28px !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    background-color: rgba(10, 14, 28, 0.42) !important;
    box-shadow: 0 18px 50px rgba(15, 45, 69, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.rp-topbar {
    position: relative;
    z-index: 45;
    background: rgba(255, 255, 255, 0.88);
    border-bottom: 1px solid rgba(18, 48, 71, 0.1);
    box-shadow: 0 8px 24px rgba(15, 45, 69, 0.08);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    color: #123047;
}

html.dark .rp-topbar,
html.dark .rp-topbar .dark\:text-white,
html.dark .rp-topbar .dark\:text-gray-200,
html.dark .rp-topbar .dark\:text-gray-400,
.rp-topbar,
.rp-topbar span,
.rp-topbar button {
    color: #123047 !important;
}

.rp-currency-chip {
    display: none;
    align-items: center;
    gap: 0.55rem;
    min-width: 7.5rem;
    padding: 0.35rem 0.85rem 0.35rem 0.4rem;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(18, 48, 71, 0.12);
    box-shadow: 0 6px 16px rgba(15, 45, 69, 0.1);
}

@media (min-width: 768px) {
    .rp-currency-chip {
        display: inline-flex;
    }
}

.rp-currency-chip__icon.nav-credit-icon,
.rp-currency-chip__icon.nav-ducket-icon,
.rp-currency-chip__icon.nav-diamond-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
    background-size: 15px 15px;
    background-repeat: no-repeat;
    background-position: center;
}

.rp-topbar .rp-user-chip.text-red-700,
html.dark .rp-topbar .rp-user-chip {
    color: #123047 !important;
}

.rp-currency-chip__meta {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.rp-currency-chip__amount {
    font-weight: 800;
    font-size: 0.95rem;
    color: #0b2236 !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.rp-currency-chip__label {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5b738c !important;
}

.rp-user-chip {
    display: inline-flex !important;
    align-items: center;
    gap: 0.15rem;
    padding: 0.15rem 0.65rem 0.15rem 0.15rem;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(18, 48, 71, 0.12);
    box-shadow: 0 6px 16px rgba(15, 45, 69, 0.1);
    color: #123047 !important;
}

.rp-user-chip__name,
html.dark .rp-user-chip,
html.dark .rp-user-chip span,
html.dark .rp-user-chip button {
    color: #123047 !important;
    font-weight: 800;
}

html.dark nav.bg-white,
html.dark nav.dark\:bg-gray-900,
nav.relative.bg-white {
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom: 1px solid rgba(18, 48, 71, 0.1) !important;
    box-shadow: 0 8px 18px rgba(15, 45, 69, 0.06);
    backdrop-filter: blur(16px);
}

html.dark .nav-item,
html.dark nav .nav-item,
html.dark nav button,
.nav-item,
nav button {
    color: #123047 !important;
    font-weight: 800;
}

html.dark .nav-item:hover,
.nav-item:hover {
    color: #0b6ea8 !important;
    background: rgba(78, 194, 255, 0.16);
}

html.dark nav [x-ref="panel"],
nav [x-ref="panel"] {
    background: #ffffff !important;
    color: #123047 !important;
    border: 1px solid rgba(18, 48, 71, 0.12);
    box-shadow: 0 16px 32px rgba(15, 45, 69, 0.16);
}

html.dark nav [x-ref="panel"] a,
html.dark nav .dropdown-item,
nav [x-ref="panel"] a,
nav .dropdown-item {
    color: #123047 !important;
}

.rp-cms-header {
    background: rgba(255, 255, 255, 0.78);
    border-bottom: 1px solid rgba(18, 48, 71, 0.08);
}

footer,
.footer {
    background: #123047 !important;
    color: #e8f3ff !important;
}

/* Light sky: keep all CMS text dark even if html.dark is on */
body.rp-landing {
    --rp-ink: #123047;
    --rp-muted: #34526c;
    --rp-card: #ffffff;
    --rp-card-border: rgba(18, 48, 71, 0.14);
    --rp-nav-bg: rgba(255, 255, 255, 0.96);
    --rp-nav-text: #123047;
    --rp-friends-bg: linear-gradient(135deg, #ffffff 0%, #d9f5ff 55%, #fff3c4 100%);
    --rp-friends-border: #2f8ec4;
    --rp-friends-text: #0f2d45;
}

body.rp-landing main h1,
body.rp-landing main h2,
body.rp-landing main h3,
body.rp-landing main h4,
body.rp-landing .text-slate-800 {
    color: #123047 !important;
}

/* Card scure (.rp-glass): titoli e testo chiari — altrimenti il blu scuro non si legge */
body.rp-landing main .rp-glass h1,
body.rp-landing main .rp-glass h2,
body.rp-landing main .rp-glass h3,
body.rp-landing main .rp-glass h4,
body.rp-landing main .rp-glass .text-white,
body.rp-landing main .rp-glass .text-white\/85,
body.rp-landing main .rp-glass .text-white\/80,
body.rp-landing main .rp-glass .text-white\/75,
body.rp-landing main .rp-glass .text-white\/70 {
    color: #f4f8ff !important;
}

body.rp-landing main .rp-glass .text-gold,
body.rp-landing main .rp-glass .group:hover .text-gold,
body.rp-landing main .rp-glass .group-hover\:text-gold:hover {
    color: #f5c542 !important;
}

body.rp-landing main .rp-glass .text-cyan-300 {
    color: #7dd3fc !important;
}

body.rp-landing main .rp-glass .text-emerald-300 {
    color: #6ee7b7 !important;
}

body.rp-landing .rp-news-link {
    color: #0b2238 !important;
    font-weight: 800;
    font-size: 0.9rem;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: #123047;
}

body.rp-landing .rp-news-link:hover {
    color: #0b6ea8 !important;
    text-decoration-color: #0b6ea8;
}

html.dark body.rp-landing main .dark\:text-white,
html.dark body.rp-landing main .dark\:text-gray-200,
html.dark body.rp-landing main .dark\:text-gray-300,
html.dark body.rp-landing main .dark\:text-gray-400,
html.dark body.rp-landing main p,
html.dark body.rp-landing main small {
    color: #123047 !important;
}

html.dark body.rp-landing main .dark\:text-gray-500,
html.dark body.rp-landing main .text-gray-500 {
    color: #3d5a73 !important;
}

html.dark body.rp-landing main .dark\:bg-gray-800,
html.dark body.rp-landing main .dark\:bg-gray-900,
html.dark body.rp-landing main .dark\:bg-gray-700,
body.rp-landing main .bg-white {
    background-color: #ffffff !important;
    color: #123047 !important;
}

html.dark body.rp-landing main .dark\:border-gray-900,
html.dark body.rp-landing main .dark\:border-gray-700 {
    border-color: rgba(18, 48, 71, 0.12) !important;
}

/* Staff: scenic card, full avatar, readable text */
.staff-rank-badge,
.staff-content-section .staff-rank-badge {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.staff-rank-badge img {
    position: relative;
    opacity: 1 !important;
    filter: drop-shadow(0 1px 2px rgba(30, 52, 74, 0.25));
}

.staff-content-section {
    --staff-section-accent: #4aa3d9;
    border: 1px solid color-mix(in srgb, var(--staff-section-accent) 28%, rgba(255, 255, 255, 0.75)) !important;
    box-shadow:
        0 16px 36px color-mix(in srgb, var(--staff-section-accent) 16%, rgba(18, 36, 54, 0.1)),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
    background:
        radial-gradient(90% 80% at 0% 0%, color-mix(in srgb, var(--staff-section-accent) 34%, #ffffff) 0%, transparent 55%),
        radial-gradient(70% 70% at 100% 100%, color-mix(in srgb, var(--staff-section-accent) 22%, #fff4d6) 0%, transparent 58%),
        linear-gradient(160deg,
            color-mix(in srgb, var(--staff-section-accent) 14%, #f7fbff) 0%,
            color-mix(in srgb, var(--staff-section-accent) 8%, #eef6fb) 48%,
            color-mix(in srgb, var(--staff-section-accent) 18%, #e4f0f8) 100%) !important;
}

.staff-content-section__head {
    border-bottom: 1px solid color-mix(in srgb, var(--staff-section-accent) 18%, rgba(255, 255, 255, 0.6));
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--staff-section-accent) 22%, rgba(255, 255, 255, 0.55)) 0%,
            color-mix(in srgb, var(--staff-section-accent) 8%, rgba(255, 255, 255, 0.35)) 100%);
}

.staff-content-section__title {
    color: #152433 !important;
}

.staff-content-section__subtitle {
    color: color-mix(in srgb, var(--staff-section-accent) 35%, #5a6d7e) !important;
}

.staff-content-section__body {
    position: relative;
}

.rp-staff-card {
    --staff-accent: #4aa3d9;
    position: relative;
    display: block;
    height: 112px;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--staff-accent) 34%, rgba(255, 255, 255, 0.7)) !important;
    box-shadow:
        0 14px 30px color-mix(in srgb, var(--staff-accent) 22%, rgba(18, 36, 54, 0.12)),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    background:
        radial-gradient(90% 120% at 8% 110%, color-mix(in srgb, var(--staff-accent) 55%, #ffffff) 0%, transparent 55%),
        radial-gradient(70% 90% at 92% -10%, color-mix(in srgb, var(--staff-accent) 38%, #ffe8a8) 0%, transparent 58%),
        radial-gradient(55% 70% at 58% 120%, color-mix(in srgb, var(--staff-accent) 28%, #9ad7ff) 0%, transparent 60%),
        linear-gradient(125deg,
            color-mix(in srgb, var(--staff-accent) 18%, #f4f8fc) 0%,
            color-mix(in srgb, var(--staff-accent) 10%, #eef6fb) 42%,
            color-mix(in srgb, var(--staff-accent) 22%, #dceef8) 100%) !important;
    color: #152433 !important;
}

.rp-staff-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(105deg,
            transparent 0%,
            transparent 34%,
            rgba(255, 255, 255, 0.28) 52%,
            rgba(255, 255, 255, 0.72) 78%,
            rgba(255, 255, 255, 0.88) 100%),
        repeating-linear-gradient(
            -18deg,
            transparent 0 10px,
            rgba(255, 255, 255, 0.07) 10px 11px
        );
    opacity: 0.95;
}

.rp-staff-card::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    z-index: 5;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--staff-accent) 55%, #ffffff),
        var(--staff-accent) 45%,
        color-mix(in srgb, var(--staff-accent) 70%, #1a3044)
    );
    box-shadow: 2px 0 12px color-mix(in srgb, var(--staff-accent) 35%, transparent);
}

.rp-staff-card__avatar {
    position: absolute;
    left: 2px;
    bottom: -4px;
    z-index: 2;
    width: 70px;
    height: 112px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    filter: drop-shadow(0 6px 12px rgba(30, 52, 74, 0.28));
    transition: transform 180ms ease;
}

.rp-staff-card__avatar:hover {
    transform: translateY(-4px) scale(1.04);
}

.rp-staff-card__avatar img {
    width: 64px;
    height: 110px;
    max-width: none;
    object-fit: contain;
    object-position: bottom center;
    pointer-events: none;
}

.rp-staff-card__body {
    position: absolute;
    left: 72px;
    right: 8px;
    top: 8px;
    bottom: 8px;
    transform: none;
    z-index: 3;
    min-width: 0;
    padding: 10px 40px 10px 12px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background:
        radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--staff-accent) 42%, #fff6d8) 0%, transparent 55%),
        radial-gradient(90% 120% at 0% 100%, color-mix(in srgb, var(--staff-accent) 36%, #cfe9ff) 0%, transparent 58%),
        linear-gradient(125deg,
            color-mix(in srgb, var(--staff-accent) 28%, #ffffff) 0%,
            color-mix(in srgb, var(--staff-accent) 16%, #fff8ec) 45%,
            color-mix(in srgb, var(--staff-accent) 32%, #e8f4ff) 100%) !important;
    border: 1px solid color-mix(in srgb, var(--staff-accent) 30%, rgba(255, 255, 255, 0.85));
    box-shadow:
        0 8px 18px color-mix(in srgb, var(--staff-accent) 18%, rgba(30, 52, 74, 0.08)),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.rp-staff-card__name,
body.rp-landing .rp-staff-card .rp-staff-card__name,
html.dark body.rp-landing main .rp-staff-card p.rp-staff-card__name {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.15;
    color: #152433 !important;
    text-shadow: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rp-staff-card__motto,
body.rp-landing .rp-staff-card .rp-staff-card__motto,
html.dark body.rp-landing main .rp-staff-card p.rp-staff-card__motto {
    margin: 0.25rem 0 0;
    font-size: 0.86rem;
    font-weight: 600;
    font-style: italic;
    color: #4a5d70 !important;
    text-shadow: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rp-staff-card__rank,
body.rp-landing .rp-staff-card .rp-staff-card__rank,
html.dark body.rp-landing main .rp-staff-card p.rp-staff-card__rank {
    margin: 0.4rem 0 0;
    display: inline-block;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--staff-accent) 14%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--staff-accent) 42%, #ffffff);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--staff-accent) 72%, #152433) !important;
    text-shadow: none;
}

.rp-staff-card__badge {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 4;
    width: 28px;
    height: 28px;
    object-fit: contain;
    background: transparent !important;
    opacity: 1 !important;
    filter: drop-shadow(0 1px 2px rgba(30, 52, 74, 0.25));
    animation: none !important;
}

.rp-staff-card__status {
    position: absolute;
    right: 18px;
    bottom: 16px;
    z-index: 4;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--staff-accent) 25%, rgba(30, 52, 74, 0.12));
}

.rp-staff-card__status.is-online {
    background: #22c55e;
}

.rp-staff-card__status.is-offline {
    background: #f43f5e;
}

body.rp-landing .rp-me-hero,
body.rp-landing .rp-me-hero h1,
body.rp-landing .rp-me-hero p,
body.rp-landing .rp-me-hero span,
html.dark body.rp-landing .rp-me-hero,
html.dark body.rp-landing .rp-me-hero h1,
html.dark body.rp-landing .rp-me-hero p,
html.dark body.rp-landing .rp-me-hero span {
    color: #fff !important;
}

body.rp-landing .rp-me-hero__eyebrow {
    color: #ffe14a !important;
}

/* Classifiche */
.rp-lb-intro {
    margin-bottom: 0.25rem;
}

.rp-lb-intro__eyebrow {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #c98910 !important;
}

.rp-lb-intro__title {
    margin: 0.2rem 0 0;
    font-size: 1.85rem;
    font-weight: 800;
    color: #123047 !important;
}

.rp-lb-intro__sub {
    margin: 0.35rem 0 0;
    max-width: 40rem;
    color: #3d5a73 !important;
    font-weight: 600;
}

.rp-lb-card {
    background: #ffffff;
    border: 1px solid rgba(18, 48, 71, 0.12);
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(15, 45, 69, 0.08);
    overflow: hidden;
}

.rp-lb-card__head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.95rem 1.05rem;
    background: #fff6c8;
    border-bottom: 3px solid #123047;
    color: #0b2238;
}

.rp-lb-card__title,
body.rp-landing main .rp-lb-card__title,
html.dark body.rp-landing main .rp-lb-card__title,
body.rp-landing main .rp-lb-card__head p,
.rp-lb-card__head p {
    margin: 0 !important;
    font-size: 1.08rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.01em;
    line-height: 1.3;
    color: #0b2238 !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

.rp-lb-card__icon {
    width: 18px;
    height: 18px;
    image-rendering: pixelated;
}

.rp-lb-card__list {
    list-style: none;
    margin: 0;
    padding: 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.rp-lb-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 58px;
    padding: 0.35rem 0.55rem;
    border-radius: 12px;
    background: #f4f8fc;
}

.rp-lb-row--1 { background: linear-gradient(90deg, #fff4c8, #f4f8fc); }
.rp-lb-row--2 { background: linear-gradient(90deg, #e8eef5, #f4f8fc); }
.rp-lb-row--3 { background: linear-gradient(90deg, #ffe3c8, #f4f8fc); }

.rp-lb-row__place {
    width: 1.5rem;
    text-align: center;
    font-weight: 800;
    color: #123047;
}

.rp-lb-row__avatar {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    overflow: hidden;
    background: #dff4ff;
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(15, 45, 69, 0.16);
    flex-shrink: 0;
}

.rp-lb-row__avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
}

.rp-lb-row__meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.rp-lb-row__name,
body.rp-landing .rp-lb-row__name,
html.dark body.rp-landing main .rp-lb-row a {
    font-weight: 800;
    color: #123047 !important;
    text-decoration: none;
}

.rp-lb-row__value,
body.rp-landing .rp-lb-row__value,
html.dark body.rp-landing main .rp-lb-row span {
    font-size: 0.8rem;
    font-weight: 700;
    color: #3d5a73 !important;
}

.rp-lb-empty {
    padding: 1rem;
    text-align: center;
    color: #3d5a73 !important;
    font-weight: 600;
}

/* —— Discord widget (stesso linguaggio delle card classifiche) —— */
.rp-discord {
    background: #ffffff !important;
    border: 1px solid rgba(18, 48, 71, 0.12);
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(15, 45, 69, 0.08);
    overflow: hidden;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.rp-discord__head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.95rem 1.05rem;
    background: #fff6c8;
    border-bottom: 3px solid #123047;
    color: #0b2238;
}

.rp-discord__icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    image-rendering: pixelated;
    flex-shrink: 0;
    border-radius: 999px;
    background: #5865f2;
    box-shadow: 0 2px 6px rgba(15, 45, 69, 0.18);
    opacity: 1 !important;
}

.rp-discord__titles {
    min-width: 0;
    flex: 1;
}

.rp-discord__title {
    margin: 0 !important;
    font-size: 1.08rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.01em;
    line-height: 1.25;
    color: #0b2238 !important;
}

.rp-discord__sub {
    margin: 0.1rem 0 0 !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: #3d5a73 !important;
}

.rp-discord__online {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    background: rgba(18, 48, 71, 0.08);
    font-size: 0.72rem;
    font-weight: 800;
    color: #123047 !important;
}

.rp-discord__dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
}

.rp-discord__body {
    padding: 0.7rem 0.85rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.rp-discord__users {
    max-height: 168px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.rp-discord__empty {
    margin: 0 !important;
    padding: 0.55rem 0.35rem;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    line-height: 1.45;
    color: #3d5a73 !important;
}

.rp-discord__user {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 48px;
    padding: 0.35rem 0.55rem;
    border-radius: 12px;
    background: #f4f8fc;
}

.rp-discord__avatar {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    overflow: visible;
    flex-shrink: 0;
    background: #dff4ff;
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(15, 45, 69, 0.14);
}

.rp-discord__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    object-fit: cover;
}

.rp-discord__status {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 11px;
    height: 11px;
    border-radius: 999px;
    border: 2px solid #fff;
}

.rp-discord__status--online { background: #16a34a; }
.rp-discord__status--idle { background: #e9b124; }
.rp-discord__status--dnd { background: #dc2626; }

.rp-discord__meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.rp-discord__name {
    margin: 0 !important;
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    color: #123047 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-discord__game {
    margin: 0 !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #3d5a73 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-discord__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.72rem 1rem;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffe14a 0%, #f5c542 100%);
    border: 2px solid #123047;
    box-shadow: 0 4px 0 #123047;
    color: #0b2238 !important;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.rp-discord__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 0 #123047;
    color: #0b2238 !important;
}

.rp-discord__cta:active {
    transform: translateY(1px);
    box-shadow: 0 2px 0 #123047;
}

.navigation-icon.discord {
    background-image: url("/assets/images/icons/navigation/discord.png");
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 1 !important;
}


/* Download CTA — always dark text on light chip */
.rp-download-cta {
    background: #f7f4ee !important;
    border: 1px solid rgba(18, 48, 71, 0.22) !important;
    color: #0a1a28 !important;
    font-weight: 800 !important;
}
.rp-download-cta svg {
    color: #c98910 !important;
    fill: currentColor;
}
.rp-download-platforms {
    color: #123047 !important;
    font-weight: 800 !important;
    opacity: 1 !important;
}