/* Made for Arcadia by Vyrriox */
:root {
    --arcadia-primary: #f59e0b;
    
    --arcadia-primary-rgb: 245, 158, 11;
    --arcadia-secondary: #78350f;
    
    --arcadia-bg-dark: #0f172a;
    
    --arcadia-bg-light: #1e293b;
    
    --arcadia-text: #f8fafc;
    --arcadia-bg-lighter: #1c1917;
    --arcadia-text-muted: #94a3b8;
    --arcadia-border: rgba(255, 255, 255, 0.1);

    --font-heading: 'JetBrains Mono', 'JetBrains Mono Fallback', monospace;
    --font-body: 'Inter', 'Inter Fallback', sans-serif;

    --footer-bg: rgba(12, 10, 9, 0.95);
    --glass-bg: rgba(15, 23, 42, 0.7);
    --glass-border: 1px solid rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
}

/* ============================================================
   ANTI-FOUT — polices de secours À MÉTRIQUES AJUSTÉES.
   Au chargement, le texte s'affiche d'abord dans une police système,
   puis bascule sur Inter/JetBrains une fois téléchargées. Sans ajustement,
   les deux polices n'occupent pas la même place → le texte "saute" (reflow
   visible quelques ms). Ici, on calque la police système (Arial) sur les
   métriques d'Inter / JetBrains Mono (size-adjust + ascent/descent/line-gap)
   pour que la bascule soit TOTALEMENT invisible : aucun décalage de mise en
   page. 100 % CSS, n'altère aucune fonctionnalité.
   ============================================================ */
@font-face {
    font-family: 'Inter Fallback';
    src: local('Arial');
    size-adjust: 107.40%;
    ascent-override: 90%;
    descent-override: 22.43%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'JetBrains Mono Fallback';
    src: local('Courier New');
    size-adjust: 91.50%;
    ascent-override: 115%;
    descent-override: 35%;
    line-gap-override: 0%;
}



::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track, var(--arcadia-bg-dark));
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb, linear-gradient(to bottom, var(--arcadia-primary), var(--arcadia-secondary)));
    border-radius: var(--scrollbar-thumb-radius, 5px);
    border: var(--scrollbar-thumb-border, 2px solid var(--arcadia-bg-dark));
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover, var(--arcadia-primary));
}

/* Réserve TOUJOURS la place de la barre de défilement, qu'elle soit visible ou
   non. Sans ça, les pages courtes (sans scrollbar) sont plus larges que les
   pages longues (avec scrollbar) -> le contenu et la navbar se décalaient
   latéralement à chaque changement de page (effet "la navbar bouge"). */
html {
    scrollbar-gutter: stable;
}

body {
    font-family: var(--font-body);
    color: var(--arcadia-text) !important;
    line-height: 1.6;
    margin: 0;
    overflow-x: hidden;
    background-color: #0f172a !important;
    position: relative;
    min-height: 100vh;
}

#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}


body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://www.arcadia-echoes-of-power.fr/storage/img/screenshot1.webp');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    filter: blur(8px) brightness(0.4);
    z-index: -10;
    pointer-events: none;
    transform: scale(1.1);
}

.hero::before,
.page-header::before {
    display: none;
    
}

.page-header {
    position: relative;
    z-index: 10;
    background: rgba(15, 23, 42, 0.4) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 0;
}

main {
    background-color: transparent !important;
    position: relative;
    flex: 1;
}


.is-home main {
    background: transparent !important;
    box-shadow: none !important;
}

.content-wrapper {
    padding-top: 5rem;
    padding-bottom: 8rem;
}


.home-content-bg {
    background: rgba(15, 23, 42, 0.92) !important;
    
    position: relative;
    z-index: 10;
    margin-top: -2px;
}

.is-home .hero-separator {
    box-shadow: 0 0 30px #0f172a;
    position: relative;
    z-index: 20;
}



.ambient-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: -5;
    pointer-events: none;
}

.blob {
    position: absolute;
    width: 500px;
    height: 500px;
    pointer-events: none;
}

.blob::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.75;
    animation: float-blob 20s infinite alternate ease-in-out;
    /* Force la composition GPU : le blob animé (blur 80px) reste sur sa propre
       couche au lieu de repeindre le thread principal à chaque frame. */
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Respecte la préférence "réduire les animations" + allège le mobile (coût GPU). */
@media (prefers-reduced-motion: reduce) {
    .blob::after { animation: none; }
}

.blob-1 {
    top: -100px;
    right: -100px;
    width: 600px;
    height: 600px;
}

.blob-1::after {
    background: radial-gradient(circle, rgba(245, 158, 11, 0.3) 0%, transparent 70%);
    animation-duration: 25s;
}

.blob-2 {
    bottom: 20%;
    left: -150px;
    width: 700px;
    height: 700px;
    transform: translateY(calc(var(--scroll-y, 0px) * -0.35));
}

.blob-2::after {
    background: radial-gradient(circle, rgba(120, 53, 15, 0.35) 0%, transparent 70%);
    animation-duration: 30s;
    animation-delay: -5s;
}

.blob-3 {
    top: 40%;
    right: 15%;
    width: 450px;
    height: 450px;
    transform: translateY(calc(var(--scroll-y, 0px) * 0.2));
}

.blob-3::after {
    background: radial-gradient(circle, rgba(245, 158, 11, 0.25) 0%, transparent 70%);
    animation-duration: 22s;
    animation-delay: -2s;
}


.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform, opacity;
}

.reveal-on-scroll.active {
    opacity: 1;
    transform: translateY(0);
}

.arcadia-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.arcadia-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(245, 158, 11, 0.2);
    transform: translateY(-5px);
}

.package-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.2) 0%, transparent 70%);
    z-index: -1;
    filter: blur(20px);
}



.top-supporter-badge {
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
    backdrop-filter: blur(10px);
    border-radius: 50px;
    padding: 0.5rem 1.25rem 0.5rem 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.top-supporter-badge:hover {
    border-color: var(--arcadia-primary) !important;
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
}


.stagger-1 {
    transition-delay: 0.1s;
}

.stagger-2 {
    transition-delay: 0.2s;
}

.stagger-3 {
    transition-delay: 0.3s;
}


@keyframes float-blob {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }

    50% {
        transform: translate(150px, 100px) scale(1.3) rotate(180deg);
    }

    100% {
        transform: translate(-50px, 150px) scale(1.1) rotate(360deg);
    }
}


.logo-animated {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    user-select: none;
}

/* Logo hero : les attributs width/height (640x478) reservent l'espace (anti-CLS)
   mais le rendu est borne par max-height inline. On force width/height:auto pour
   que le navigateur respecte le ratio intrinseque (sinon Lighthouse signale
   "image affichee dans un format incorrect"). */
#main-logo {
    width: auto;
    height: auto;
}

.logo-animated:hover {
    transform: scale(1.1) rotate(2deg);
    filter: brightness(1.15) drop-shadow(0 0 20px rgba(245, 158, 11, 0.4));
}

.logo-animated:active {
    transform: scale(0.95);
}


.hero {
    position: relative;
    border-bottom: none;
    min-height: 80vh;
    padding-top: 8rem;
    padding-bottom: 5rem;
}


.hero-separator {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--arcadia-primary), transparent);
    box-shadow: 0 0 15px var(--arcadia-primary);
    opacity: 0.95;
    position: relative;
    z-index: 50;
    margin-top: -1px;
    
}

main {
    background-color: transparent !important;
    
    position: relative;
    z-index: 10;
    flex: 1;
}


footer {
    background: var(--footer-bg);
    border-top: 2px solid var(--arcadia-secondary);
    padding-top: 4rem;
    position: relative;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    width: 100%;
}

@media (min-width: 1921px) {
    footer .container {
        max-width: 1600px;
    }
}

/* Navbar Responsive Mobile Fixes
   Breakpoint aligned with navbar-expand-xl (collapses below 1200px) so the
   collapsed/hamburger styling covers the whole collapsed range — prevents the
   horizontal menu from wrapping onto a 2nd line and growing the bar height. */
@media (max-width: 1199.98px) {
    .navbar-collapse {
        background: rgba(15, 23, 42, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        padding: 1.5rem;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        margin-top: 1rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }

    .navbar-nav {
        gap: 0.5rem;
    }

    .nav-item {
        display: block !important;
        width: 100%;
        text-align: center;
    }

    .nav-link {
        width: 100%;
        justify-content: center;
        padding: 0.75rem !important;
        border-radius: 8px;
    }
    
    .nav-link:hover, .nav-link.active {
        background: rgba(245, 158, 11, 0.1) !important;
    }

    .navbar-nav .nav-item.dropdown {
        position: static !important;
    }

    .navbar-nav .dropdown-menu {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        float: none !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
        padding: 0.25rem 0 0.5rem 0 !important;
        text-align: center;
        width: 100% !important;
    }

    .navbar-nav .dropdown-menu .dropdown-item {
        text-align: center;
        padding: 0.6rem 1rem !important;
        font-size: 0.8rem !important;
        color: var(--arcadia-text-muted) !important;
        border-radius: 8px;
    }

    .navbar-nav .dropdown-menu .dropdown-item:hover,
    .navbar-nav .dropdown-menu .dropdown-item:active,
    .navbar-nav .dropdown-menu .dropdown-item.active {
        background: rgba(245, 158, 11, 0.1) !important;
        color: var(--arcadia-primary) !important;
    }
}

footer::before {
    content: '';
    position: absolute;
    top: -2px;
    
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--arcadia-primary), transparent);
    box-shadow: 0 0 15px var(--arcadia-primary);
    opacity: 0.95;
    z-index: 100;
}


.footer-title {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2rem;
    font-size: 1.1rem;
    color: var(--arcadia-primary) !important;
}

.footer-link {
    color: var(--arcadia-text-muted);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
    margin-bottom: 1rem;
    font-weight: 500;
}

.footer-link:hover {
    color: var(--arcadia-primary);
    transform: translateX(8px);
}

.footer-link i {
    font-size: 0.9rem;
    color: var(--arcadia-primary);
}

.social-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--arcadia-text-muted);
    transition: all 0.3s ease;
    margin-right: 10px;
}

.social-icon:hover {
    background: var(--arcadia-primary);
    color: #000;
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(245, 158, 11, 0.4);
    border-color: var(--arcadia-primary);
}

.copyright-section {
    padding: 2.5rem 0;
    margin-top: 4rem;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

h1,
h2,
h3,
h4,
h5,
h6,
.minecraft-style {
    font-family: var(--font-heading);
    color: #fff;
    letter-spacing: -0.02em;
}

a {
    color: var(--arcadia-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: #fbbf24;
}


.container.content-wrapper {
    margin-top: -3rem;
    position: relative;
    z-index: 20;
}

.header-divider {
    width: 80px;
    height: 4px;
    background: var(--arcadia-primary);
    border-radius: 2px;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
}


.card {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: var(--glass-border) !important;
    border-radius: 12px !important;
    color: var(--arcadia-text) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

.card-header {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    font-family: var(--font-heading);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--arcadia-primary) !important;
}

.card-body {
    padding: 1.5rem !important;
}


.table {
    color: var(--arcadia-text) !important;
    --bs-table-bg: transparent !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.table thead th {
    background: rgba(245, 158, 11, 0.1) !important;
    color: var(--arcadia-primary) !important;
    font-family: var(--font-heading);
    border-bottom: 2px solid var(--arcadia-primary) !important;
}


.alert {
    background: rgba(15, 23, 42, 0.8) !important;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

.alert-info {
    border-left: 4px solid #0ea5e9 !important;
}

.alert-success {
    border-left: 4px solid #22c55e !important;
}

.alert-warning {
    border-left: 4px solid #f59e0b !important;
}

.alert-danger {
    border-left: 4px solid #ef4444 !important;
}


.pagination .page-link {
    background: var(--glass-bg) !important;
    border: var(--glass-border) !important;
    color: var(--arcadia-text) !important;
}

.pagination .page-item.active .page-link {
    background: var(--arcadia-primary) !important;
    border-color: var(--arcadia-primary) !important;
    color: #000 !important;
}



.copper-text {
    background: linear-gradient(135deg, #fcd34d 0%, #d97706 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 10px rgba(245, 158, 11, 0.2);
    font-weight: 700;
}


.arcadia-card,
.stat-card,
.voter-card,
.news-card {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: var(--glass-border);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.arcadia-card:hover,
.stat-card:hover,
.voter-card:hover,
.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
}


.btn-primary,
.btn-outline-warning {
    font-family: var(--font-heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.btn-primary {
    background: linear-gradient(135deg, var(--arcadia-primary) 0%, #d97706 100%);
    border: none;
    color: #000;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--arcadia-text-muted) !important;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    font-family: var(--font-heading);
}

.btn-secondary:hover {
    background: rgba(245, 158, 11, 0.1) !important;
    border-color: var(--arcadia-primary) !important;
    color: var(--arcadia-primary) !important;
    transform: translateY(-2px);
}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.hero p {
    font-size: 1.25rem;
    color: var(--arcadia-text-muted);
    max-width: 600px;
    margin: 0 auto 2.5rem;
}


input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
textarea,
select,
.form-control,
.form-select {
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    padding: 0.75rem 1.25rem;
    border-radius: 8px !important;
    transition: all 0.3s ease;
    color-scheme: dark;
    
}


select option,
.form-select option {
    background-color: #0f172a !important;
    color: #fff !important;
    padding: 10px;
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
    border-color: var(--arcadia-primary) !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2) !important;
    background: rgba(15, 23, 42, 0.8) !important;
    outline: none;
    color: #fff !important;
}


select:not([multiple]):not([size]),
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f59e0b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 16px 12px !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.5rem !important;
}


.input-group input[type="text"],
.input-group input[type="search"] {
    border-radius: 8px 0 0 8px !important;
}

.input-group .btn {
    border-radius: 0 8px 8px 0 !important;
    padding: 0 1.5rem;
    border: 1px solid var(--arcadia-primary);
    border-left: none;
}


.navbar {
    background: rgba(15, 23, 42, 0.98) !important;
    backdrop-filter: blur(12px);
    border-bottom: 2px solid rgba(255, 255, 255, 0.03);
    padding: 0.5rem 0;

    min-height: 70px;
    display: flex;
    align-items: center;
    z-index: 1000;

}

/* Desktop (≥1200px): lock the bar to a constant height so it can never grow.
   Below 1200px we intentionally let it expand when the hamburger menu opens
   (the dropdown panel needs the room), so the fixed height is desktop-only. */
@media (min-width: 1200px) {
    .navbar {
        height: 70px;
    }
}

/* Expanded (desktop ≥1200px) navbar: keep everything on a single row so the
   menu can never wrap onto a 2nd line and inflate the bar's height. Below
   1200px the navbar collapses to the hamburger menu (height stays 70px, the
   menu opens as an overlay panel — see the max-width:1199.98px block). */
@media (min-width: 1200px) {
    .navbar-expand-xl .navbar-collapse {
        flex-wrap: nowrap;
    }

    .navbar-expand-xl .navbar-nav {
        flex-wrap: nowrap;
    }
}

.navbar-brand {
    font-size: 1.1rem !important;
    font-weight: 950 !important;
    margin-right: auto;
    text-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
    letter-spacing: -0.02em;
}

@keyframes shimmer-text {
    0% {
        filter: brightness(1) drop-shadow(0 0 2px rgba(245, 158, 11, 0.5));
    }

    50% {
        filter: brightness(1.4) drop-shadow(0 0 12px rgba(245, 158, 11, 0.9));
    }

    100% {
        filter: brightness(1) drop-shadow(0 0 2px rgba(245, 158, 11, 0.5));
    }
}

.navbar .nav-link i,
.navbar .dropdown-item i {
    margin-right: 8px !important;
    font-size: 1.1em;
}

.navbar-nav {
    align-items: center;
}

.nav-item {
    display: flex;
    align-items: center;
    height: 100%;
}

.nav-link {
    font-weight: 700 !important;
    color: var(--arcadia-text-muted) !important;
    text-transform: uppercase;
    font-size: 0.8rem !important;
    letter-spacing: 0.05em;
    padding: 0.5rem 1rem !important;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    position: relative;
}

.nav-link:hover {
    color: var(--arcadia-primary) !important;
}

.nav-link.active {
    color: var(--arcadia-primary) !important;
    background: transparent !important;
}

/* Trait orange de l'élément actif : on l'applique en ::before (et NON ::after),
   car sur un menu déroulant (.dropdown-toggle) le ::after est déjà utilisé par
   Bootstrap pour la flèche ▾ (caret). Avec ::after, le trait ÉCRASAIT le caret
   → la flèche à droite de "SUPPORT"/"ACTUALITÉS" disparaissait quand on était
   sur une page du menu. ::before est libre → le caret reste visible. */
.nav-link.active::before {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 1rem;
    right: 1rem;
    height: 2px;
    background: var(--arcadia-primary);
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
    pointer-events: none;
}


.dropdown-menu {
    background: rgba(15, 23, 42, 0.98) !important;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px;
    padding: 0.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    margin-top: 10px !important;
}

.dropdown-item {
    color: var(--arcadia-text-muted) !important;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.6rem 1rem;
    border-radius: 4px;
    transition: all 0.2s;
}

.dropdown-item:hover,
.dropdown-item.active {
    background: rgba(245, 158, 11, 0.1) !important;
    color: var(--arcadia-primary) !important;
}
/* L'icône doit rester VISIBLE au survol / sur l'élément actif : elle prend la
   même teinte ambre que le texte (et non disparaître/se fondre). On force aussi
   un fond ambre LÉGER (et non le bleu plein de Bootstrap .active) pour garder le
   contraste de l'icône. */
.navbar .dropdown-item:hover i,
.navbar .dropdown-item.active i,
.navbar .dropdown-item:active i {
    color: var(--arcadia-primary) !important;
    opacity: 1 !important;
}
.navbar .dropdown-item.active,
.navbar .dropdown-item:active {
    background: rgba(245, 158, 11, 0.14) !important;
    color: var(--arcadia-primary) !important;
}

.dropdown-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}


/* ============================================================
   NAVBAR — menus déroulants animés (style moderne, fluide)
   ============================================================
   Bootstrap bascule juste display:none -> block (apparition sèche).
   On anime l'ouverture via la classe .show que Bootstrap pose déjà,
   sans toucher au JS. Effets : fade + léger slide/scale à l'ouverture,
   apparition en cascade des items, survol avec glissement + accent,
   et caret qui pivote. */

/* Desktop uniquement (le menu déroulant ; en mobile c'est un collapse). */
@media (min-width: 1200px) {

    /* Le parent sert d'ancre fixe : le menu se positionne par rapport à LUI,
       indépendamment des styles inline que Bootstrap/Popper pose ou retire à
       l'ouverture/fermeture (c'était la cause du "saut vers le haut"). */
    .navbar-nav .nav-item.dropdown {
        position: relative !important;
    }

    /* === ANIMATION (fondu) : sur TOUS les menus de la navbar, y compris le menu
       user à droite. État fermé : invisible, légèrement remonté. La position
       horizontale, elle, est gérée plus bas (centrée pour la nav, à droite pour
       le menu user) afin de ne pas casser l'alignement. === */
    .navbar-nav .dropdown-menu {
        display: block;                 /* présent pour pouvoir animer (au lieu du none/block sec) */
        opacity: 0;
        visibility: hidden;
        transform-origin: top center;
        pointer-events: none;
        transition: opacity 0.2s ease,
                    transform 0.2s ease,
                    visibility 0s linear 0.2s;   /* masqué APRÈS la sortie */
    }
    .navbar-nav .dropdown-menu.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity 0.28s ease,
                    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                    visibility 0s;
    }

    /* === POSITION des menus de NAVIGATION (centrés sous le toggle) ===
       On exclut le menu user (.dropdown-menu-end), géré par Popper à droite.
       Ancrage FIXE en !important pour écraser les top/left/transform inline de
       Popper : la position ne bouge JAMAIS -> seul le fondu joue, à l'ouverture
       comme à la fermeture (fini le "saut vers le haut"). */
    .navbar-nav .dropdown-menu:not(.dropdown-menu-end) {
        position: absolute !important;
        top: 100% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        margin-top: 10px !important;
        transform: translateX(-50%) translateY(8px) scale(0.98) !important;
    }
    .navbar-nav .dropdown-menu:not(.dropdown-menu-end).show {
        transform: translateX(-50%) translateY(0) scale(1) !important;
    }

    /* === POSITION du menu USER (.dropdown-menu-end, à droite) ===
       Ancré à droite, hors flux, sans centrage. L'anim de fondu (Y/scale)
       garde le même rythme mais sans translateX. */
    .navbar-nav .dropdown-menu.dropdown-menu-end {
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        left: auto !important;
        bottom: auto !important;
        margin-top: 10px !important;
        transform: translateY(8px) scale(0.98) !important;
        transform-origin: top right;
    }
    .navbar-nav .dropdown-menu.dropdown-menu-end.show {
        transform: translateY(0) scale(1) !important;
    }

    /* Items : la cascade (stagger) joue UNIQUEMENT à l'ouverture, via une
       animation @keyframes (et non une transition d'état). Comme c'est une
       animation déclenchée par .show, à la FERMETURE il ne reste AUCUN état
       caché sur les <li> : ils restent pleinement opaques et c'est le conteneur
       (opacity du menu) qui gère seul le fondu de sortie -> plus de saut. */
    .navbar-nav .dropdown-menu.show li {
        animation: arcDropItemIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .navbar-nav .dropdown-menu.show li:nth-child(1) { animation-delay: 0.03s; }
    .navbar-nav .dropdown-menu.show li:nth-child(2) { animation-delay: 0.07s; }
    .navbar-nav .dropdown-menu.show li:nth-child(3) { animation-delay: 0.11s; }
    .navbar-nav .dropdown-menu.show li:nth-child(4) { animation-delay: 0.15s; }
    .navbar-nav .dropdown-menu.show li:nth-child(5) { animation-delay: 0.19s; }
    .navbar-nav .dropdown-menu.show li:nth-child(6) { animation-delay: 0.23s; }
    .navbar-nav .dropdown-menu.show li:nth-child(7) { animation-delay: 0.27s; }
    .navbar-nav .dropdown-menu.show li:nth-child(8) { animation-delay: 0.31s; }
}

@keyframes arcDropItemIn {
    from { opacity: 0; transform: translateX(-7px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Caret (flèche ▾) qui pivote quand le menu est ouvert — sur desktop ET mobile. */
.navbar .dropdown-toggle::after {
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.navbar .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

/* Survol moderne des items : barre d'accent ambre qui grandit à gauche +
   léger glissement du contenu vers la droite. (Vaut pour desktop et mobile.) */
.navbar .dropdown-item {
    position: relative;
    overflow: hidden;
}
.navbar .dropdown-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 65%;
    background: var(--arcadia-primary);
    border-radius: 0 3px 3px 0;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: center;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    transform: translateX(4px);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.2s ease, color 0.2s ease;
}
.navbar .dropdown-item:hover::before,
.navbar .dropdown-item:focus::before,
.navbar .dropdown-item.active::before {
    transform: translateY(-50%) scaleY(1);
}

/* Respect de l'accessibilité : pas de mouvement si l'utilisateur l'a désactivé. */
@media (prefers-reduced-motion: reduce) {
    .navbar-nav .dropdown-menu,
    .navbar-nav .dropdown-menu.show,
    .navbar-nav .dropdown-menu li,
    .navbar-nav .dropdown-menu.show li,
    .navbar .dropdown-toggle::after,
    .navbar .dropdown-item,
    .navbar .dropdown-item::before {
        transition: none !important;
        transform: none !important;
    }
}


.section-title {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 2rem;
    position: relative;
    display: inline-block;
    padding-bottom: 1rem;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--arcadia-primary);
    border-radius: 2px;
}


/* --- Podium --- */
.podium-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 2rem;
    padding: 0 1rem;
}

.podium-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 1 200px;
}

.podium-player-info {
    text-align: center;
    margin-bottom: 12px;
    position: relative;
}

.podium-crown {
    font-size: 1.8rem;
    animation: crownBounce 2s ease-in-out infinite;
    margin-bottom: -5px;
}

@keyframes crownBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.podium-skin {
    /* mc-heads /body/<name>/120 renvoie un rendu de corps 100x240 (ratio 5/12).
       On ne fixait que la height -> la width retombait sur l'attribut HTML
       (60px), ratio incohérent -> skin aplati. On verrouille le ratio. */
    height: 100px;
    width: auto;
    aspect-ratio: 5 / 12;
    image-rendering: pixelated;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
    transition: transform 0.3s ease;
}

.podium-rank-1 .podium-skin {
    height: 120px;
}

.podium-player:hover .podium-skin {
    transform: scale(1.1);
}

.podium-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    margin: 8px 0 2px;
}

.podium-votes {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
}

.podium-block {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px 8px 0 0;
    position: relative;
    overflow: hidden;
}

.podium-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
}

.podium-rank {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.podium-gold {
    height: 120px;
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.25) 0%, rgba(120, 53, 15, 0.3) 100%);
    border: 1px solid rgba(245, 158, 11, 0.4);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.15);
}

.podium-gold::before {
    background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.6), transparent);
}

.podium-silver {
    height: 85px;
    background: linear-gradient(180deg, rgba(156, 163, 175, 0.2) 0%, rgba(75, 85, 99, 0.25) 100%);
    border: 1px solid rgba(156, 163, 175, 0.3);
}

.podium-silver::before {
    background: linear-gradient(90deg, transparent, rgba(156, 163, 175, 0.5), transparent);
}

.podium-bronze {
    height: 60px;
    background: linear-gradient(180deg, rgba(180, 83, 9, 0.2) 0%, rgba(120, 53, 15, 0.25) 100%);
    border: 1px solid rgba(180, 83, 9, 0.3);
}

.podium-bronze::before {
    background: linear-gradient(90deg, transparent, rgba(180, 83, 9, 0.5), transparent);
}

@media (max-width: 576px) {
    .podium-skin { height: 70px; }
    .podium-rank-1 .podium-skin { height: 85px; }
    .podium-gold { height: 90px; }
    .podium-silver { height: 65px; }
    .podium-bronze { height: 45px; }
    .podium-container { gap: 6px; }
    .podium-name { font-size: 0.8rem; }
}


.news-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    
    overflow: hidden;
}

.news-card-img {
    height: 200px;
    width: 100%;
    object-fit: cover;
    border-bottom: 1px solid var(--glass-border);
}

.news-card-body {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.news-card-title {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.news-card-excerpt {
    color: var(--arcadia-text-muted);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}


@keyframes heroLogoEntrance {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(-20px);
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
    }
}

@keyframes fadeInUpEntrance {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes zoomInEntrance {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.hero-animate {
    animation-duration: 1.2s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hero-logo-anim {
    animation-name: heroLogoEntrance;
}

.hero-text-anim {
    animation-name: fadeInUpEntrance;
}

.hero-stat-anim {
    animation-name: zoomInEntrance;
}


.delay-1 {
    animation-delay: 0.1s;
}

.delay-2 {
    animation-delay: 0.2s;
}

.delay-3 {
    animation-delay: 0.3s;
}

.delay-4 {
    animation-delay: 0.4s;
}

.delay-5 {
    animation-delay: 0.5s;
}

.delay-6 {
    animation-delay: 0.6s;
}


@keyframes fadeInUpSubtle {
    0% {
        opacity: 0;
        transform: translateY(10px);
        filter: blur(4px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes brandPremiumEntrance {
    0% {
        opacity: 0;
        transform: scale(0.9);
        filter: blur(8px);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

.brand-anim {
    animation-name: brandPremiumEntrance;
    animation-duration: 2s;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.navbar {
    
    animation: fadeIn 1s ease-out both;
}


.notification-dropdown {
    width: 300px;
    max-height: 450px;
    overflow-y: auto;
    overflow-x: hidden;
    background: rgba(15, 23, 42, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
}

.notification-unread {
    background: rgba(245, 158, 11, 0.04) !important;
    position: relative;
}

.notification-unread::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--arcadia-primary);
}

.notification-dropdown .dropdown-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    white-space: normal;
    transition: all 0.2s ease;
}

.notification-dropdown .dropdown-item:last-child {
    border-bottom: none;
}

.notification-dropdown .dropdown-item:hover {
    background: rgba(255, 165, 0, 0.1);
}

.extra-small {
    font-size: 0.75rem;
}

.bg-dark-50 {
    background: rgba(255, 255, 255, 0.03);
}


.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--arcadia-primary);
    border-radius: 10px;
}


.plyr {
    border-radius: 12px;
    overflow: hidden;
    --plyr-color-main: #d4af37;
    
    --plyr-video-background: rgba(15, 23, 42, 0.98);
    --plyr-menu-background: rgba(15, 23, 42, 0.98);
    --plyr-menu-color: #f8fafc;
    --plyr-tooltip-background: rgba(15, 23, 42, 0.9);
    --plyr-tooltip-color: #fff;
    --plyr-badge-background: #d4af37;
    --plyr-badge-text-color: #1a1a1a;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(212, 175, 55, 0.1);
}

.plyr--video .plyr__controls {
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75)) !important;
    padding-top: 40px !important;
}

.plyr__control--overlaid {
    background: rgba(212, 175, 55, 0.9) !important;
    color: #1a1a1a !important;
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.3);
}

.plyr__control--overlaid:hover {
    background: #e5c05c !important;
    transform: translate(-50%, -50%) scale(1.1) !important;
}

.plyr__progress__container input[type=range],
.plyr__volume input[type=range] {
    color: #d4af37 !important;
}





.feature-box {
    text-align: center;
    padding: 2rem;
    height: 100%;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.feature-box:hover {
    transform: translateY(-10px);
    border-color: var(--arcadia-primary);
    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.15);
}

.feature-icon-wrapper {
    width: 70px;
    height: 70px;
    background: rgba(245, 158, 11, 0.1);
    border: 2px solid var(--arcadia-primary);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: var(--arcadia-primary);
    font-size: 2rem;
    rotate: 45deg;
    transition: all 0.5s ease;
}

.feature-box:hover .feature-icon-wrapper {
    rotate: 405deg;
    background: var(--arcadia-primary);
    color: #000;
}

.feature-icon-wrapper i {
    rotate: -45deg;
}


.community-goal-card {
    background: linear-gradient(135deg, rgba(28, 25, 23, 0.9), rgba(120, 53, 15, 0.15));
    border: 1px solid rgba(245, 158, 11, 0.3);
    overflow: hidden;
}

.goal-progress-wrapper {
    position: relative;
    height: 32px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.goal-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #92400e, var(--arcadia-primary), #fbbf24);
    border-radius: 16px;
    position: relative;
    transition: width 2s cubic-bezier(0.2, 0.8, 0.2, 1);
    min-width: 30px;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.goal-progress-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    animation: progressShine 3s ease-in-out infinite;
}

@keyframes progressShine {
    0% { left: -60%; }
    100% { left: 160%; }
}

.goal-percent-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 0.85rem;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    z-index: 1;
}

.goal-stat {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
}


.staff-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.staff-card:hover {
    background: rgba(245, 158, 11, 0.05);
    border-color: var(--arcadia-primary);
}

.staff-avatar {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    border: 2px solid var(--arcadia-primary);
    padding: 2px;
    background: rgba(0, 0, 0, 0.2);
}

.staff-role {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--arcadia-primary);
    font-family: var(--font-heading);
}


.activity-item {
    background: rgba(255, 255, 255, 0.02);
    border-left: 3px solid var(--arcadia-primary);
    padding: 1rem;
    margin-bottom: 0.75rem;
    border-radius: 0 8px 8px 0;
    transition: all 0.2s ease;
}

.activity-item:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(5px);
}

.activity-time {
    font-size: 0.7rem;
    color: var(--arcadia-text-muted);
}



.list-group-item {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: var(--arcadia-text-muted) !important;
}

.list-group-item.active {
    background: rgba(245, 158, 11, 0.2) !important;
    border-color: var(--arcadia-primary) !important;
    color: var(--arcadia-primary) !important;
}

.list-group-item:hover:not(.active) {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}


.badge.bg-primary,
.badge[style*="background-color: blue"],
.badge[style*="background-color: #007bff"] {
    background-color: var(--arcadia-primary) !important;
    color: #000 !important;
}

.badge.bg-secondary {
    background-color: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--arcadia-text-muted) !important;
}


.changelog-item,
.changelog-post {
    background: var(--glass-bg) !important;
    border: var(--glass-border) !important;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.changelog-item .badge,
.changelog-post .badge {
    padding: 0.5rem 0.8rem;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
}



.modal-open main {
    /* Stay BELOW the modal backdrop (9990) so the whole page — including the
       shop banner & sidebar inside <main> — gets dimmed when a modal is open.
       The shop modal is moved out of <main> into <body> by JS on open (see the
       shop category views), so it isn't affected by this and stays clickable. */
    z-index: 1 !important;
}

.modal {
    z-index: 10000 !important;
    pointer-events: auto !important;
}

.modal-dialog {
    margin: 25vh auto !important;
    
    z-index: 10001 !important;
    max-width: 500px;
}

.modal-backdrop {
    z-index: 9990 !important;
    background-color: rgba(2, 6, 15, 0.92) !important;
    backdrop-filter: blur(8px) !important;
}
/* Bootstrap caps the backdrop at opacity .5 via .show — force it fully opaque
   so the page behind a modal is properly dimmed (the colour above does the rest). */
.modal-backdrop.show {
    opacity: 1 !important;
}

.modal-content {
    background: #0f172a !important;
    
    border: 1px solid var(--arcadia-primary) !important;
    border-radius: 12px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.9) !important;
    color: #fff !important;
}

.modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(245, 158, 11, 0.1);
}

.modal-title {
    font-family: var(--font-heading);
    color: var(--arcadia-primary);
    font-weight: 700;
    text-transform: uppercase;
}

.modal-body {
    padding: 0 2rem;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
}


body[class*="route-communitytube"] .card {
    background: var(--glass-bg) !important;
    border: var(--glass-border) !important;
    backdrop-filter: blur(12px) !important;
    border-radius: 12px !important;
    overflow: hidden;
    margin-bottom: 2rem;
    transition: all 0.3s ease;
}

body[class*="route-communitytube"] .card:hover {
    border-color: rgba(245, 158, 11, 0.4) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transform: translateY(-5px);
}


body[class*="route-communitytube"] .btn {
    padding: 0.5rem 1rem !important;
    
    font-size: 0.95rem !important;
    
    min-height: auto !important;
    line-height: 1.5 !important;
}

body[class*="route-communitytube"] .btn-primary,
body[class*="route-communitytube"] .btn-info,
body[class*="route-communitytube"] .btn-secondary {
    background: linear-gradient(135deg, var(--arcadia-primary), #d97706) !important;
    border: none !important;
    color: #000 !important;
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.5px;
}

body[class*="route-communitytube"] .btn-outline-primary {
    background: rgba(245, 158, 11, 0.1) !important;
    
    color: var(--arcadia-primary) !important;
    border: 1px solid var(--arcadia-primary) !important;
    font-family: var(--font-heading);
    font-weight: bold;
    text-transform: uppercase;
}

body[class*="route-communitytube"] .btn-outline-primary:hover {
    background: var(--arcadia-primary) !important;
    color: #000 !important;
}


body[class*="route-communitytube"] .bi-heart,
body[class*="route-communitytube"] .bi-heart-fill {
    color: inherit !important;
}


body[class*="route-communitytube"] a.btn-secondary,
body[class*="route-communitytube"] a.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.3);
    padding: 1.5rem;
}

.modal-header .btn-close {
    filter: invert(1);
    opacity: 0.8;
}


.modal .btn {
    padding: 0.8rem 2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.modal .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
}

.modal .btn-danger {
    background: #ef4444;
    border: none;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.modal .btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}


.table.shop-cart-table {
    background: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
}

.table.shop-cart-table thead th {
    background: rgba(245, 158, 11, 0.1) !important;
    color: var(--arcadia-primary);
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-size: 0.9rem;
    padding: 1.2rem;
    border: none;
}

.table.shop-cart-table td {
    padding: 1.5rem 1.2rem;
    vertical-align: middle;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #fff;
}


.shop-cart-table input[type="number"] {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-radius: 6px;
    padding: 0.4rem 0.8rem;
    max-width: 80px;
    transition: all 0.3s ease;
}

.shop-cart-table input[type="number"]:focus {
    border-color: var(--arcadia-primary) !important;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
    outline: none;
}


.shop-cart-table .btn-primary {
    background: linear-gradient(135deg, var(--arcadia-primary), #d97706) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
    font-family: var(--font-heading);
    font-weight: 700;
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
}

.shop-cart-table .btn-danger {
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.shop-cart-table .btn-danger:hover {
    background: #ef4444 !important;
    color: #fff !important;
    transform: translateY(-2px);
}


a[href*="clear"],
.shop-cart-clear {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: var(--arcadia-text-muted) !important;
    padding: 0.6rem 1.2rem !important;
    border-radius: 8px !important;
    font-size: 0.9rem;
    transition: all 0.3s ease !important;
    margin-top: 1rem;
}

a[href*="clear"]:hover,
.shop-cart-clear:hover {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #ef4444 !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    transform: translateX(3px);
}


.alert {
    position: fixed !important;
    bottom: 2rem !important;
    
    right: 2rem !important;
    
    width: 350px !important;
    max-width: 90vw !important;
    z-index: 10000 !important;
    background: rgba(15, 23, 42, 0.9) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-left: 5px solid transparent !important;
    border-radius: 12px !important;
    color: #fff !important;
    padding: 1rem 1.5rem !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6) !important;
    margin-bottom: 0 !important;
    overflow: hidden;
    animation: alertSlideLeft 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes alertSlideLeft {
    from {
        transform: translateX(50px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}


.alert-success {
    border-left-color: #10b981 !important;
    
    background: rgba(16, 185, 129, 0.05) !important;
}

.alert-success::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, #10b981, #059669);
}

.alert-danger {
    border-left-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.05) !important;
}

.alert-danger::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, #ef4444, #dc2626);
}

.alert-warning {
    border-left-color: var(--arcadia-primary) !important;
    background: rgba(245, 158, 11, 0.05) !important;
}

.alert-info {
    border-left-color: #3b82f6 !important;
    background: rgba(59, 130, 246, 0.05) !important;
}

.alert .btn-close {
    filter: invert(1);
    opacity: 0.5;
    transition: all 0.3s ease;
}

.alert .btn-close:hover {
    opacity: 1;
    transform: scale(1.1);
}


#app>.alert,
.container>.alert {
    margin: 0 !important;
    max-width: none !important;
}


main:empty,
.maintenance-container,
.error-container {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


h1+.card,
.maintenance-container .card {
    margin-top: 2rem;
    margin-bottom: 5rem;
}


.accordion-item {
    background: var(--glass-bg) !important;
    border: var(--glass-border) !important;
    backdrop-filter: blur(12px) !important;
    margin-bottom: 1rem;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.accordion-item:hover {
    border-color: rgba(245, 158, 11, 0.3) !important;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.accordion-button {
    background: transparent !important;
    color: #fff !important;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.1rem;
    padding: 1.5rem;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.accordion-button:not(.collapsed) {
    background: rgba(245, 158, 11, 0.1) !important;
    color: var(--arcadia-primary) !important;
    border-bottom-color: rgba(245, 158, 11, 0.2);
}

.accordion-button::after {
    filter: invert(1);
    background-size: 1.25rem;
    transition: all 0.3s ease;
}

.accordion-button:not(.collapsed)::after {
    filter: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f59e0b'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    transform: rotate(180deg);
}

.accordion-body {
    background: rgba(0, 0, 0, 0.2);
    color: var(--arcadia-text-muted);
    padding: 1.5rem;
    line-height: 1.7;
    font-size: 1rem;
    border-top: none;
}



body[class*="route-wiki"] .card {
    background: var(--glass-bg) !important;
    border: var(--glass-border) !important;
    backdrop-filter: blur(12px) !important;
    transition: all 0.3s ease;
    text-align: center;
    border-radius: 16px !important;
    overflow: hidden;
    margin-bottom: 2rem !important;
    
}

body[class*="route-wiki"] .card:hover {
    transform: translateY(-10px);
    border-color: var(--arcadia-primary) !important;
    box-shadow: 0 15px 30px rgba(245, 158, 11, 0.2);
}

body[class*="route-wiki"] .card-body {
    padding: 2.5rem !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}


body[class*="route-wiki"] .card i,
body[class*="route-wiki"] .card svg,
body[class*="route-wiki"] .card .fa,
body[class*="route-wiki"] .card .fas,
body[class*="route-wiki"] .card .far,
body[class*="route-wiki"] .card .bi {
    font-size: 3rem;
    color: var(--arcadia-primary) !important;
    
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.4));
    transition: all 0.3s ease;
}

body[class*="route-wiki"] .card:hover i {
    transform: scale(1.2) rotate(5deg);
    filter: drop-shadow(0 0 20px rgba(245, 158, 11, 0.8));
    color: #fff;
}


body[class*="route-wiki"] .card-title {
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-size: 1.5rem;
    letter-spacing: 1px;
    margin: 0;
}





/* --- News/Posts list page --- */
body[class*="route-posts-index"] .row {
    align-items: stretch;
}

body[class*="route-posts-index"] .card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

body[class*="route-posts-index"] .card img,
body[class*="route-posts-index"] .card .card-img-top {
    height: 220px;
    object-fit: cover;
    border-radius: 12px 12px 0 0;
}

body[class*="route-posts-index"] .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

body[class*="route-posts-index"] .card-body .btn,
body[class*="route-posts-index"] .card-body a.btn {
    margin-top: auto;
    align-self: flex-start;
}

body[class*="route-posts-index"] .card-footer {
    background: rgba(0, 0, 0, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
}

body[class*="route-posts-show"] .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}


body[class*="route-posts-show"] .arcadia-card:hover {
    transform: none !important;
    background: rgba(255, 255, 255, 0.03) !important;
    
    border-color: rgba(255, 255, 255, 0.08) !important;
    
    box-shadow: none !important;
}


.arcadia-card.static-card {
    background: var(--glass-bg) !important;
    
    backdrop-filter: blur(12px) !important;
    transition: none !important;
    
    transform: none !important;
    opacity: 1 !important;
}

.arcadia-card.static-card:hover {
    transform: none !important;
    background: var(--glass-bg) !important;
    
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    cursor: default;
    opacity: 1 !important;
}



.modal-header.bg-primary,
.modal-header {
    background: var(--glass-bg) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--arcadia-primary) !important;
}

.modal-content {
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(245, 158, 11, 0.2) !important;
}


.fc-button-primary {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--arcadia-text-muted) !important;
    text-transform: uppercase;
    font-family: var(--font-heading);
    font-weight: 600;
    transition: all 0.3s ease;
}

.fc-button-primary:hover,
.fc-button-primary:not(:disabled).fc-button-active,
.fc-button-primary:not(:disabled):active {
    background-color: var(--arcadia-primary) !important;
    border-color: var(--arcadia-primary) !important;
    color: #000 !important;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.4) !important;
}


.fc-event {
    background-color: rgba(245, 158, 11, 0.2) !important;
    border: 1px solid var(--arcadia-primary) !important;
    color: #fff !important;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.fc-event:hover,
.fc-event:focus {
    background-color: var(--arcadia-primary) !important;
    color: #000 !important;
    transform: scale(1.02);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
    z-index: 50;
}


.card-body .list-group-item {
    background: transparent !important;
    border: none !important;
    padding-left: 0;
}


.border-primary {
    border-color: var(--arcadia-primary) !important;
}


.modal-title {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}


/* --- Vote Page Styling --- */
body[class*='route-vote'] .d-flex {
    gap: 1rem;
    flex-wrap: wrap;
}

/* Vote site buttons */
body[class*='route-vote'] .btn {
    margin: 0.4rem !important;
    border-radius: 10px;
}

/* Vote page cards */
body[class*='route-vote'] .card {
    background: var(--glass-bg) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(12px);
}

body[class*='route-vote'] .card-header,
body[class*='route-vote'] .card-footer {
    background: rgba(0, 0, 0, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

body[class*='route-vote'] .card-header h2,
body[class*='route-vote'] .card-header h3,
body[class*='route-vote'] .card-header h4,
body[class*='route-vote'] .card-header h5 {
    font-family: var(--font-heading);
    color: var(--arcadia-primary) !important;
}

/* Vote timer badges */
body[class*='route-vote'] .badge {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Vote page progress bars */
body[class*='route-vote'] .progress,
body[class*='route-vote'] [role="progressbar"],
body[class*='route-vote'] .vote-goal-progress {
    height: 32px !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden !important;
    position: relative;
}

body[class*='route-vote'] .progress-bar,
body[class*='route-vote'] [role="progressbar"] > div,
body[class*='route-vote'] .vote-goal-progress > div {
    background: linear-gradient(90deg, #92400e, var(--arcadia-primary), #fbbf24) !important;
    border-radius: 16px !important;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    position: relative;
    overflow: hidden;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    font-family: var(--font-heading) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 100% !important;
}

body[class*='route-vote'] .progress-bar::after,
body[class*='route-vote'] [role="progressbar"] > div::after,
body[class*='route-vote'] .vote-goal-progress > div::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    animation: progressShine 3s ease-in-out infinite;
}

/* Vote page table / leaderboard */
body[class*='route-vote'] table {
    border-collapse: separate;
    border-spacing: 0;
}

body[class*='route-vote'] table th {
    background: rgba(0, 0, 0, 0.2) !important;
    color: var(--arcadia-primary) !important;
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

body[class*='route-vote'] table td {
    border-color: rgba(255, 255, 255, 0.04) !important;
    vertical-align: middle;
}

/* Vote fireworks container */
.vote-fireworks-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99999;
}

.vote-firework-burst {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: voteSparkBurst 1s ease-out forwards;
}

@keyframes voteSparkBurst {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--vfx), var(--vfy)) scale(0); opacity: 0; }
}

.vote-success-text {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-family: 'Metamorphous', serif;
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    z-index: 100000;
    pointer-events: none;
    animation: voteTextPop 2s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
    text-shadow: none;
}

@keyframes voteTextPop {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    20% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    40% { transform: translate(-50%, -50%) scale(1); }
    80% { opacity: 1; }
    100% { transform: translate(-50%, -60%) scale(0.8); opacity: 0; }
}

/* ============================================================
   SHOP REDESIGN — premium dark + copper, fully responsive.
   Scoped to .shop-* classes (theme overrides under
   views/vendor/shop) so nothing leaks to the rest of the site.
   Plugin logic untouched; presentation only.
   ============================================================ */

/* Hero header */
.shop-hero {
    padding: 1.5rem 0 1rem;
    border-bottom: 1px solid var(--arcadia-border);
}
.shop-hero-title {
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-bottom: .25rem;
}
.shop-hero-subtitle {
    color: var(--arcadia-text-muted);
    margin: 0;
    font-size: .95rem;
}

.shop-welcome,
.shop-category-intro {
    background: rgba(30, 41, 59, 0.55);
    border: 1px solid var(--arcadia-border);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
}
/* The admin text is often wrapped in headings (<h5> …) which inherit the
   monospace heading font and look cramped. Force the readable body font and
   comfortable spacing for the intro copy, regardless of the tag used. */
.shop-welcome,
.shop-welcome h1, .shop-welcome h2, .shop-welcome h3,
.shop-welcome h4, .shop-welcome h5, .shop-welcome h6, .shop-welcome p,
.shop-category-intro,
.shop-category-intro h1, .shop-category-intro h2, .shop-category-intro h3,
.shop-category-intro h4, .shop-category-intro h5, .shop-category-intro h6,
.shop-category-intro p {
    font-family: var(--font-body) !important;
}
.shop-welcome h1, .shop-welcome h2, .shop-welcome h3,
.shop-welcome h4, .shop-welcome h5, .shop-welcome h6, .shop-welcome p,
.shop-category-intro h1, .shop-category-intro h2, .shop-category-intro h3,
.shop-category-intro h4, .shop-category-intro h5, .shop-category-intro h6,
.shop-category-intro p {
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.65;
    letter-spacing: 0;
    margin: 0;
    color: var(--arcadia-text);
}
.shop-category-intro > *:not(:last-child),
.shop-welcome > *:not(:last-child) { margin-bottom: .6rem; }

/* ---- Product cards grid ---- */
.shop-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(30,41,59,0.85), rgba(15,23,42,0.85));
    border: 1px solid var(--arcadia-border);
    border-radius: 16px;
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    will-change: transform;
}
.shop-card:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--arcadia-primary-rgb), 0.55);
    box-shadow: 0 16px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(var(--arcadia-primary-rgb),0.25);
}
.shop-card.is-promo {
    border-color: rgba(var(--arcadia-primary-rgb), 0.45);
}

.shop-card-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    background: rgba(0,0,0,0.25);
    overflow: hidden;
}
.shop-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .35s ease;
}
.shop-card:hover .shop-card-img {
    transform: scale(1.06);
}
.shop-card-img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6rem;
    color: rgba(var(--arcadia-primary-rgb), 0.4);
}
.shop-card-badge {
    position: absolute;
    top: .7rem;
    left: .7rem;
    z-index: 2;
    background: linear-gradient(90deg, var(--arcadia-primary), #fbbf24);
    color: #0f172a;
    font-weight: 800;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .25rem .6rem;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(var(--arcadia-primary-rgb), 0.45);
}

.shop-card-body {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1rem 1.1rem 1.2rem;
    flex: 1 1 auto;
}
.shop-card-title {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0;
    color: var(--arcadia-text);
}
.shop-card-price {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin-top: auto;
}
.shop-card-price-now {
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--arcadia-primary);
}
.shop-card-price-old {
    color: var(--arcadia-text-muted);
    text-decoration: line-through;
    font-size: .9rem;
}
.shop-card-btn {
    width: 100%;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .6rem 1rem;
    border-radius: 10px;
}

/* ---- Product modal (two-column readable layout) ---- */
/* Centre the shop modal vertically & horizontally. The theme has a global
   `.modal-dialog { margin: 25vh auto !important }` that pushes modals down and
   would overflow a tall product modal — override it here so the popup is
   centred and fully on-screen. */
.modal-dialog.shop-modal {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
    margin: .5rem auto !important;
    max-width: 680px !important;
}
@media (max-width: 575.98px) {
    .modal-dialog.shop-modal { max-width: calc(100% - 1rem) !important; }
}
/* Belt-and-braces scroll lock: while a modal is open the page behind must not
   scroll (Bootstrap also sets this, but the theme z-index tweaks can interfere). */
body.modal-open { overflow: hidden !important; }
.shop-modal-content {
    position: relative;
    border: 1px solid rgba(var(--arcadia-primary-rgb), 0.25);
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(30,41,59,0.96), rgba(15,23,42,0.98));
    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
    max-height: 88vh;   /* never exceed the viewport — keeps the buy bar visible */
}
.shop-modal-close {
    position: absolute;
    top: .9rem;
    right: .9rem;
    z-index: 5;
    background-color: rgba(15,23,42,0.7);
    border-radius: 50%;
    padding: .55rem;
    opacity: .85;
}
.shop-modal-close:hover { opacity: 1; }

.shop-modal-grid {
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    overflow: hidden;
}
.shop-modal-visual {
    position: relative;
    flex: 0 0 auto;
    background:
        radial-gradient(120% 140% at 50% 0%, rgba(var(--arcadia-primary-rgb),0.14), transparent 60%),
        rgba(0,0,0,0.35);
    overflow: hidden;
    height: 200px;            /* compact banner — never eats the whole modal */
    display: flex;
    align-items: center;
    justify-content: center;
}
.shop-modal-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;      /* portrait skins are shown whole, not stretched */
    display: block;
}
.shop-modal-img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 4rem;
    color: rgba(var(--arcadia-primary-rgb), 0.4);
}
.shop-modal-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: linear-gradient(90deg, var(--arcadia-primary), #fbbf24);
    color: #0f172a;
    font-weight: 800;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .3rem .7rem;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(var(--arcadia-primary-rgb), 0.45);
}

.shop-modal-pane {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;      /* lets the inner description scroll instead of overflowing */
    padding: 1.4rem 1.7rem 1.3rem;
    min-width: 0;
}
.shop-modal-pane-head {
    flex: 0 0 auto;
    border-bottom: 1px solid var(--arcadia-border);
    padding-bottom: .85rem;
    margin-bottom: 1rem;
}
.shop-modal-title {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.2;
}
.shop-modal-desc {
    color: var(--arcadia-text);
    font-size: .95rem;
    line-height: 1.65;
    overflow-y: auto;
    padding-right: .6rem;
    margin-bottom: 1.2rem;
    flex: 1 1 auto;
    min-height: 0;   /* allow the flex child to shrink so it scrolls instead of overflowing */
}
.shop-modal-desc p { margin-bottom: .7rem; }
.shop-modal-desc p:last-child { margin-bottom: 0; }
.shop-modal-desc ul,
.shop-modal-desc ol { padding-left: 1.2rem; margin-bottom: .7rem; }
.shop-modal-desc li { margin-bottom: .35rem; }
.shop-modal-desc img { max-width: 100%; height: auto; border-radius: 8px; }
.shop-modal-desc h1, .shop-modal-desc h2, .shop-modal-desc h3,
.shop-modal-desc h4 { font-size: 1.05rem; font-weight: 800; margin: 1rem 0 .5rem; color: var(--arcadia-primary); }
.shop-modal-desc::-webkit-scrollbar { width: 8px; }
.shop-modal-desc::-webkit-scrollbar-thumb {
    background: rgba(var(--arcadia-primary-rgb), 0.4);
    border-radius: 8px;
}

.shop-modal-buy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--arcadia-border);
    flex: 0 0 auto;   /* always visible — never collapses under the scrolling desc */
}
.shop-modal-price {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.shop-modal-price-now {
    font-size: 1.7rem;
    font-weight: 900;
    color: var(--arcadia-primary);
    text-shadow: 0 0 16px rgba(var(--arcadia-primary-rgb), 0.4);
}
.shop-modal-price-old {
    color: var(--arcadia-text-muted);
    text-decoration: line-through;
    font-size: .9rem;
}
.shop-modal-price .shop-euro { font-size: .82rem; }
.shop-modal-action { margin-left: auto; }
.shop-modal-form {
    display: flex;
    align-items: flex-end;
    gap: .75rem;
    flex-wrap: wrap;
}
.shop-modal-field {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.shop-modal-field label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--arcadia-text-muted);
    margin: 0;
}
.shop-modal-field .form-control { width: 90px; }
.shop-modal-cta {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .7rem 1.6rem;
    border-radius: 12px;
    white-space: nowrap;
}
.shop-modal-notice {
    margin: 0;
    color: var(--arcadia-text-muted);
    font-size: .9rem;
}
.shop-modal-notice i { color: var(--arcadia-primary); margin-right: .3rem; }

@media (max-width: 767.98px) {
    /* Smaller image banner + full-width CTA so the buy bar stays in view. */
    .shop-modal-visual { height: 150px; }
    .shop-modal-pane { padding: 1.1rem 1.2rem 1.1rem; }
    .shop-modal-title { font-size: 1.25rem; }
    .shop-modal-buy { justify-content: center; }
    .shop-modal-action { margin-left: 0; width: 100%; }
    .shop-modal-cta { width: 100%; }
}

/* ---- Sidebar ---- */
.shop-cats .list-group-item {
    background: rgba(30,41,59,0.6);
    border-color: var(--arcadia-border);
    color: var(--arcadia-text);
    font-weight: 600;
    transition: background .18s ease, color .18s ease, padding-left .18s ease;
}
.shop-cats .list-group-item:hover {
    background: rgba(var(--arcadia-primary-rgb), 0.12);
    padding-left: 1.1rem;
}
.shop-cats .list-group-item.active {
    background: linear-gradient(90deg, rgba(var(--arcadia-primary-rgb),0.9), rgba(var(--arcadia-primary-rgb),0.6));
    border-color: transparent;
    color: #0f172a;
}
.shop-cats .list-group-item i {
    margin-right: .5rem;
    color: var(--arcadia-primary);
}
.shop-cats .list-group-item.active i {
    color: #0f172a;
}

.shop-userbox {
    background: linear-gradient(160deg, rgba(120,53,15,0.35), rgba(15,23,42,0.7));
    border: 1px solid rgba(var(--arcadia-primary-rgb), 0.3);
    border-radius: 16px;
    padding: 1.1rem;
}
.shop-userbox-head {
    display: flex;
    align-items: center;
    gap: .85rem;
}
.shop-userbox-avatar {
    border-radius: 12px;
    border: 2px solid rgba(var(--arcadia-primary-rgb), 0.6);
}
.shop-userbox-name {
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1.1;
}
.shop-userbox-balance {
    color: var(--arcadia-primary);
    font-weight: 700;
    font-size: .9rem;
}

.shop-side-card {
    background: rgba(30,41,59,0.55);
    border: 1px solid var(--arcadia-border);
    border-radius: 14px;
    overflow: hidden;
}
.shop-side-card .card-header {
    background: rgba(0,0,0,0.25);
    border-bottom: 1px solid var(--arcadia-border);
    font-weight: 700;
}
.shop-side-card .card-header i {
    color: var(--arcadia-primary);
    margin-right: .4rem;
}
.shop-side-avatar { border-radius: 10px; }
.shop-side-avatar-sm { border-radius: 7px; }
.shop-side-amount {
    color: var(--arcadia-primary);
    font-weight: 700;
}

/* Compact variant for the "top customer" / "recent payments" cards: smaller
   header, tighter rows, smaller avatars — less imposing in the sidebar. */
.shop-side-card--compact .card-header {
    padding: .6rem .9rem;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: rgba(var(--arcadia-primary-rgb), 0.06);
}
.shop-side-card--compact .card-body { padding: .7rem .9rem; }

/* Top-customer highlight: subtle copper glow + gold-ringed avatar. */
.shop-side-card--compact .card-body .shop-side-avatar {
    box-shadow: 0 0 0 2px rgba(var(--arcadia-primary-rgb), 0.5);
}
.shop-side-card--compact .card-body .shop-side-name { font-size: .98rem; }

.shop-side-card--compact .list-group-item {
    padding: .5rem .9rem;
    background: transparent;
    border-color: rgba(255,255,255,0.05);
    transition: background .15s ease;
}
.shop-side-card--compact .list-group-item:last-child { border-bottom: 0; }
.shop-side-card--compact .list-group-item:hover {
    background: rgba(var(--arcadia-primary-rgb), 0.07);
}
.shop-side-avatar-sm {
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    flex: 0 0 auto;
}
.shop-side-name {
    font-weight: 700;
    font-size: .88rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shop-side-meta { font-size: .72rem; color: var(--arcadia-text-muted); }
.shop-side-card--compact .shop-side-amount { font-size: .82rem; }
.min-w-0 { min-width: 0; }
.shop-goal-progress {
    height: 12px;
    background: rgba(0,0,0,0.35);
    border-radius: 999px;
    overflow: hidden;
}
.shop-goal-progress .progress-bar {
    background: linear-gradient(90deg, var(--arcadia-primary), #fbbf24);
}

/* ---- Cart ---- */
.shop-cart-card {
    background: rgba(30,41,59,0.55);
    border: 1px solid var(--arcadia-border);
    border-radius: 16px;
}
.shop-cart-total {
    color: var(--arcadia-primary);
    font-weight: 800;
}
.shop-cart-empty {
    padding: 2.5rem 1rem;
    color: var(--arcadia-text-muted);
}
.shop-cart-empty-icon {
    display: block;
    font-size: 3rem;
    color: rgba(var(--arcadia-primary-rgb), 0.5);
    margin-bottom: .75rem;
}

/* ---- Responsive (mobile → 4K) ---- */
@media (max-width: 575.98px) {
    .shop-hero-title { font-size: 1.5rem; }
    .shop-card-media { aspect-ratio: 16 / 9; }
    .shop-card-body { padding: .85rem .9rem 1rem; }
    .shop-card-price-now { font-size: 1.2rem; }
}
@media (min-width: 1600px) {
    /* On very wide screens, allow a denser grid for more products per row. */
    .shop-products > [class*="col-"] { flex: 0 0 auto; width: 25%; }
}
@media (min-width: 2200px) {
    .shop-products > [class*="col-"] { width: 20%; }
}

/* ---- Shop: prominent token balance ---- */
.shop-balance {
    margin-top: 1rem;
    padding: .85rem 1rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(var(--arcadia-primary-rgb),0.18), rgba(var(--arcadia-primary-rgb),0.05));
    border: 1px solid rgba(var(--arcadia-primary-rgb), 0.45);
    display: flex;
    flex-direction: column;
    gap: .15rem;
    text-align: center;
}
.shop-balance-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--arcadia-text-muted);
    font-weight: 700;
}
.shop-balance-label i { color: var(--arcadia-primary); }
.shop-balance-amount {
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1.1;
    color: var(--arcadia-primary);
    text-shadow: 0 0 18px rgba(var(--arcadia-primary-rgb), 0.4);
}

/* Consistent sidebar action buttons (no odd outline button anymore). */
.shop-userbox .btn-primary { font-weight: 700; }
.shop-btn-soft {
    background: rgba(var(--arcadia-primary-rgb), 0.14) !important;
    border-color: rgba(var(--arcadia-primary-rgb), 0.4) !important;
    color: var(--arcadia-primary) !important;
}
.shop-btn-soft:hover {
    background: rgba(var(--arcadia-primary-rgb), 0.24) !important;
    color: #fff !important;
}
.shop-btn-credit {
    box-shadow: 0 6px 18px rgba(var(--arcadia-primary-rgb), 0.35);
}

/* ---- Shop: section titles ---- */
.shop-section-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.shop-section-title i { color: var(--arcadia-primary); }
.shop-card-badge--hot {
    background: linear-gradient(90deg, #ef4444, #f59e0b);
    color: #fff;
}

/* ---- Shop: reassurance / terms strip ---- */
.shop-reassurance {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.25rem;
}
.shop-reassurance-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    background: rgba(30,41,59,0.55);
    border: 1px solid var(--arcadia-border);
    border-radius: 14px;
    padding: 1rem 1.1rem;
}
.shop-reassurance-item i {
    font-size: 1.4rem;
    color: var(--arcadia-primary);
    flex-shrink: 0;
    margin-top: .1rem;
}
.shop-reassurance-item strong {
    display: block;
    font-size: .92rem;
    margin-bottom: .1rem;
}
.shop-reassurance-item span {
    font-size: .82rem;
    color: var(--arcadia-text-muted);
}
.shop-reassurance-item a {
    color: var(--arcadia-primary);
    font-weight: 700;
    text-decoration: none;
}
.shop-reassurance-item a:hover { text-decoration: underline; }

@media (max-width: 767.98px) {
    .shop-reassurance { grid-template-columns: 1fr; }
}

/* ============================================================
   SHOP REDESIGN v2 — full-width banner, earn cards, sales count
   ============================================================ */

/* ---- Full-width hero banner (balance + goal) ---- */
.shop-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem 1.75rem;
    border-radius: 18px;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(var(--arcadia-primary-rgb),0.18), transparent 55%),
        linear-gradient(135deg, rgba(120,53,15,0.45), rgba(15,23,42,0.85));
    border: 1px solid rgba(var(--arcadia-primary-rgb), 0.3);
    box-shadow: 0 14px 40px rgba(0,0,0,0.4);
}
.shop-banner-intro { flex: 1 1 280px; }
.shop-banner-title { font-weight: 900; letter-spacing: -0.02em; margin: 0 0 .25rem; }
.shop-banner-subtitle { color: var(--arcadia-text-muted); margin: 0; font-size: .95rem; }

.shop-banner-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    flex: 1 1 420px;
    justify-content: flex-end;
}
.shop-banner-balance {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: .9rem 1.4rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--arcadia-primary-rgb),0.22), rgba(var(--arcadia-primary-rgb),0.06));
    border: 1px solid rgba(var(--arcadia-primary-rgb), 0.5);
    min-width: 220px;
}
.shop-banner-balance-label {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--arcadia-text-muted); font-weight: 700;
}
.shop-banner-balance-label i { color: var(--arcadia-primary); }
.shop-banner-balance-amount {
    font-size: 1.8rem; font-weight: 900; line-height: 1;
    color: var(--arcadia-primary); text-shadow: 0 0 20px rgba(var(--arcadia-primary-rgb), 0.45);
}
.shop-banner-credit { margin-top: .35rem; font-weight: 700; }

.shop-banner-goal {
    display: flex; flex-direction: column; gap: .5rem; justify-content: center;
    min-width: 240px; flex: 1 1 240px;
    padding: .9rem 1.2rem; border-radius: 14px;
    background: rgba(15,23,42,0.5); border: 1px solid var(--arcadia-border);
}
.shop-banner-goal-head {
    display: flex; justify-content: space-between; align-items: center;
    font-size: .85rem; color: var(--arcadia-text-muted);
}
.shop-banner-goal-head i { color: var(--arcadia-primary); margin-right: .3rem; }
.shop-banner-goal-head strong { color: var(--arcadia-text); }

/* ---- Sales count on best-seller cards ---- */
.shop-card-sales {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .78rem; font-weight: 700; color: #fbbf24;
}
.shop-card-sales i { font-size: .8rem; }

/* ---- "Earn tokens" cards ---- */
.shop-earn-intro { color: var(--arcadia-text-muted); margin: -.4rem 0 1rem; font-size: .9rem; }
.shop-earn-card {
    display: flex; flex-direction: column; gap: .4rem;
    padding: 1.25rem 1.2rem; height: 100%;
    border-radius: 16px; text-decoration: none;
    background: linear-gradient(180deg, rgba(30,41,59,0.85), rgba(15,23,42,0.85));
    border: 1px solid var(--arcadia-border);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.shop-earn-card:hover {
    transform: translateY(-5px);
    border-color: rgba(var(--arcadia-primary-rgb), 0.55);
    box-shadow: 0 14px 34px rgba(0,0,0,0.4);
}
.shop-earn-card > i {
    font-size: 1.8rem; color: var(--arcadia-primary); margin-bottom: .2rem;
}
.shop-earn-card-title { font-weight: 800; font-size: 1.05rem; color: var(--arcadia-text); }
.shop-earn-card-desc { font-size: .85rem; color: var(--arcadia-text-muted); flex: 1 1 auto; }
.shop-earn-card-cta {
    font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--arcadia-primary);
}
.shop-earn-card-cta i { transition: transform .2s ease; }
.shop-earn-card:hover .shop-earn-card-cta i { transform: translateX(4px); }

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
    .shop-banner-stats { justify-content: flex-start; }
}
@media (max-width: 575.98px) {
    .shop-banner { padding: 1.2rem; }
    .shop-banner-balance { min-width: 0; width: 100%; }
    .shop-banner-goal { min-width: 0; width: 100%; }
    .shop-banner-balance-amount { font-size: 1.5rem; }
}

/* ============================================================
   SHOP v3 — best-sellers single-row carousel + nicer goal
   ============================================================ */

/* Section head with arrows on the right */
.shop-featured-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: 1rem;
}
.shop-carousel-nav { display: flex; gap: .5rem; flex-shrink: 0; }
.shop-carousel-btn {
    width: 38px; height: 38px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(var(--arcadia-primary-rgb), 0.14);
    border: 1px solid rgba(var(--arcadia-primary-rgb), 0.4);
    color: var(--arcadia-primary); font-size: 1.1rem; cursor: pointer;
    transition: background .18s ease, transform .18s ease;
}
.shop-carousel-btn:hover { background: rgba(var(--arcadia-primary-rgb), 0.28); transform: translateY(-1px); }
.shop-carousel-btn:active { transform: translateY(0); }

/* Single-row scrollable track (scroll-snap, no library) */
.shop-carousel {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: .4rem .25rem 1rem;     /* breathing room for hover lift + glow */
    scroll-padding-left: .25rem;
    /* Scrollbar fully hidden — navigation is via the arrows / swipe / drag. */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* old Edge/IE */
}
.shop-carousel::-webkit-scrollbar { display: none; height: 0; }  /* Chrome/Safari */
.shop-carousel-item {
    flex: 0 0 clamp(230px, 30%, 280px);   /* fixed-ish width → all same size on one row */
    scroll-snap-align: start;
}
@media (max-width: 575.98px) {
    .shop-carousel-item { flex-basis: 78%; }   /* ~1 card + peek of next on phones */
}

/* ---- Redesigned month goal ---- */
.shop-goal {
    display: flex; flex-direction: column; gap: .55rem; justify-content: center;
    min-width: 240px; flex: 1 1 240px;
    padding: 1rem 1.25rem; border-radius: 14px;
    background: rgba(15,23,42,0.55); border: 1px solid var(--arcadia-border);
}
.shop-goal-top {
    display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
}
.shop-goal-label {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
    font-weight: 700; color: var(--arcadia-text-muted);
}
.shop-goal-label i { color: var(--arcadia-primary); margin-right: .35rem; }
.shop-goal-pct {
    font-size: 1.6rem; font-weight: 900; line-height: 1;
    color: var(--arcadia-primary); text-shadow: 0 0 16px rgba(var(--arcadia-primary-rgb), 0.4);
}
.shop-goal-bar {
    height: 14px; border-radius: 999px; overflow: hidden;
    background: rgba(0,0,0,0.4);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
.shop-goal-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--arcadia-secondary), var(--arcadia-primary), #fbbf24);
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(var(--arcadia-primary-rgb), 0.5);
    transition: width .6s ease;
}

/* ============================================================
   SHOP v4 — category menu as descriptive cards
   ============================================================ */
.shop-catmenu {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.shop-catmenu-item {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .8rem .9rem;
    border-radius: 14px;
    text-decoration: none;
    background: rgba(30,41,59,0.55);
    border: 1px solid var(--arcadia-border);
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.shop-catmenu-item:hover {
    transform: translateX(3px);
    background: rgba(var(--arcadia-primary-rgb), 0.10);
    border-color: rgba(var(--arcadia-primary-rgb), 0.45);
}
.shop-catmenu-item.active {
    background: linear-gradient(135deg, rgba(var(--arcadia-primary-rgb),0.22), rgba(var(--arcadia-primary-rgb),0.06));
    border-color: rgba(var(--arcadia-primary-rgb), 0.6);
}
.shop-catmenu-icon {
    flex-shrink: 0;
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 11px;
    background: rgba(var(--arcadia-primary-rgb), 0.14);
    color: var(--arcadia-primary);
    font-size: 1.25rem;
}
.shop-catmenu-item.active .shop-catmenu-icon {
    background: var(--arcadia-primary);
    color: #0f172a;
}
.shop-catmenu-text {
    display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1 1 auto;
}
.shop-catmenu-name {
    font-weight: 800; font-size: .95rem; color: var(--arcadia-text);
    line-height: 1.2;
}
.shop-catmenu-item.active .shop-catmenu-name { color: var(--arcadia-primary); }
.shop-catmenu-desc {
    font-size: .76rem; color: var(--arcadia-text-muted);
    line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.shop-catmenu-arrow {
    flex-shrink: 0; color: var(--arcadia-text-muted); font-size: .9rem;
    opacity: .5; transition: transform .18s ease, opacity .18s ease;
}
.shop-catmenu-item:hover .shop-catmenu-arrow { opacity: 1; transform: translateX(2px); color: var(--arcadia-primary); }
.shop-catmenu-sub { margin-left: 1rem; }
.shop-catmenu-sub .shop-catmenu-icon { width: 34px; height: 34px; font-size: 1rem; }

/* ============================================================
   SHOP v5 — euro equivalent next to ArcadiaToken amounts
   ============================================================ */
.shop-euro {
    display: inline-block;
    font-size: .8em;
    font-weight: 700;
    color: var(--arcadia-text-muted);
    opacity: .9;
    white-space: nowrap;
}
/* In price blocks, put the euro hint on its own line under the token amount */
.shop-card-price .shop-euro,
.shop-modal-price .shop-euro {
    display: block;
    margin-top: .1rem;
}
.shop-rate-note {
    display: block;
    margin-top: .4rem;
    font-size: .7rem;
    color: var(--arcadia-text-muted);
    opacity: .85;
}
.shop-rate-note i { color: var(--arcadia-primary); margin-right: .25rem; }

/* ============================================================
   SHOP CATEGORY PAGES v6 — richer hero, rarity tiers, featured.
   Presentation only (theme overrides); plugin logic untouched.
   ============================================================ */

/* ---- Category hero (header band with quick-buy balance) ---- */
.shop-cat-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem 1.75rem;
    border-radius: 18px;
    box-shadow: 0 14px 40px rgba(0,0,0,0.4);
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(var(--arcadia-primary-rgb), 0.18), transparent 55%),
        linear-gradient(135deg, rgba(30,41,59,0.9), rgba(15,23,42,0.92));
    border: 1px solid var(--arcadia-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.shop-cat-hero--rarity {
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(168,85,247,0.22), transparent 55%),
        radial-gradient(120% 160% at 100% 0%, rgba(245,158,11,0.18), transparent 55%),
        linear-gradient(135deg, rgba(30,41,59,0.9), rgba(15,23,42,0.92));
}
.shop-cat-hero-main {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    min-width: 0;
}
.shop-cat-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    border-radius: 16px;
    font-size: 1.9rem;
    color: var(--arcadia-primary);
    background: rgba(var(--arcadia-primary-rgb), 0.12);
    border: 1px solid rgba(var(--arcadia-primary-rgb), 0.3);
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.shop-cat-hero-title {
    font-weight: 900;
    letter-spacing: -0.02em;
    margin: 0 0 .2rem;
    font-size: 1.9rem;
    line-height: 1.1;
}
.shop-cat-hero-sub {
    margin: 0;
    color: var(--arcadia-text-muted);
    font-size: .92rem;
}
.shop-cat-hero-sub i { color: var(--arcadia-primary); margin-right: .3rem; }
.shop-cat-hero-balance {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: .9rem 1.4rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--arcadia-primary-rgb),0.22), rgba(var(--arcadia-primary-rgb),0.06));
    border: 1px solid rgba(var(--arcadia-primary-rgb), 0.5);
    min-width: 220px;
}
.shop-cat-hero-balance-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--arcadia-text-muted);
    font-weight: 700;
}
.shop-cat-hero-balance-label i { color: var(--arcadia-primary); }
.shop-cat-hero-balance-amount {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--arcadia-primary);
    text-shadow: 0 0 20px rgba(var(--arcadia-primary-rgb), 0.45);
    line-height: 1;
}
.shop-cat-hero-balance .shop-euro { font-size: .8rem; }
.shop-cat-hero-balance .btn { margin-top: .35rem; font-weight: 700; }

/* Stats cluster on the right of the category hero — same sizing as the
   home banner so both bands look identical across pages. */
.shop-cat-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    flex: 1 1 420px;
    justify-content: flex-end;
}
.shop-cat-hero-goal {
    min-width: 240px;
    flex: 1 1 240px;
    justify-content: center;
}
@media (max-width: 991.98px) {
    .shop-cat-hero-main { flex: 1 1 100%; }
    .shop-cat-hero-stats { width: 100%; flex: 1 1 100%; justify-content: flex-start; }
}

/* ---- Card description (one-liner under the title) ---- */
.shop-card-desc {
    margin: 0;
    color: var(--arcadia-text-muted);
    font-size: .85rem;
    line-height: 1.45;
}
.shop-card-price-free { color: #34d399 !important; }

/* ---- Featured spotlight card (small categories e.g. Grade) ---- */
.shop-card--featured {
    border-color: rgba(var(--arcadia-primary-rgb), 0.6);
    box-shadow: 0 0 0 1px rgba(var(--arcadia-primary-rgb), 0.35), 0 18px 44px rgba(0,0,0,0.5);
}
.shop-card--featured .shop-card-body {
    background: linear-gradient(180deg, rgba(var(--arcadia-primary-rgb),0.08), transparent 60%);
}
.shop-card-ribbon {
    position: absolute;
    z-index: 3;
    top: .75rem;
    right: -2.4rem;
    transform: rotate(38deg);
    background: linear-gradient(90deg, var(--arcadia-primary), #fbbf24);
    color: #0f172a;
    font-weight: 800;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .25rem 2.6rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* ---- Rarity tiers (lootbox keys): coloured edge + badge ---- */
.shop-card--rarity {
    position: relative;
    border-color: rgba(255,255,255,0.12);
}
.shop-card--rarity .shop-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 55%, var(--rarity-glow, transparent));
    opacity: .9;
}
.shop-card-badge--rarity {
    left: auto;
    right: .7rem;
    background: var(--rarity-grad, linear-gradient(90deg, var(--arcadia-primary), #fbbf24));
    color: var(--rarity-ink, #0f172a);
    box-shadow: 0 4px 14px var(--rarity-shadow, rgba(0,0,0,0.4));
}
.shop-card--rarity .shop-card-price-now { color: var(--rarity-accent, var(--arcadia-primary)); }
.shop-card--rarity:hover {
    border-color: var(--rarity-accent, rgba(var(--arcadia-primary-rgb),0.55));
    box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 0 1px var(--rarity-accent, transparent), 0 0 26px var(--rarity-glow, transparent);
}

/* tier palette — common (grey) → transcendent (rainbow/white) */
.rarity-common      { --rarity-accent:#9ca3af; --rarity-glow:rgba(156,163,175,.20); --rarity-grad:linear-gradient(90deg,#9ca3af,#d1d5db); --rarity-ink:#0f172a; --rarity-shadow:rgba(156,163,175,.4); }
.rarity-uncommon    { --rarity-accent:#34d399; --rarity-glow:rgba(52,211,153,.22); --rarity-grad:linear-gradient(90deg,#10b981,#34d399); --rarity-ink:#06281d; --rarity-shadow:rgba(52,211,153,.45); }
.rarity-rare        { --rarity-accent:#60a5fa; --rarity-glow:rgba(96,165,250,.24); --rarity-grad:linear-gradient(90deg,#3b82f6,#60a5fa); --rarity-ink:#08203f; --rarity-shadow:rgba(96,165,250,.45); }
.rarity-superior    { --rarity-accent:#38bdf8; --rarity-glow:rgba(56,189,248,.24); --rarity-grad:linear-gradient(90deg,#0ea5e9,#38bdf8); --rarity-ink:#06283a; --rarity-shadow:rgba(56,189,248,.45); }
.rarity-epic        { --rarity-accent:#a78bfa; --rarity-glow:rgba(167,139,250,.26); --rarity-grad:linear-gradient(90deg,#8b5cf6,#a78bfa); --rarity-ink:#1e0f3d; --rarity-shadow:rgba(167,139,250,.5); }
.rarity-legendary   { --rarity-accent:#fbbf24; --rarity-glow:rgba(251,191,36,.28); --rarity-grad:linear-gradient(90deg,#f59e0b,#fbbf24); --rarity-ink:#3a2606; --rarity-shadow:rgba(251,191,36,.5); }
.rarity-mythic      { --rarity-accent:#fb7185; --rarity-glow:rgba(251,113,133,.28); --rarity-grad:linear-gradient(90deg,#f43f5e,#fb7185); --rarity-ink:#3d0815; --rarity-shadow:rgba(251,113,133,.5); }
.rarity-divine      { --rarity-accent:#f0abfc; --rarity-glow:rgba(240,171,252,.30); --rarity-grad:linear-gradient(90deg,#d946ef,#f0abfc); --rarity-ink:#3a0a3d; --rarity-shadow:rgba(240,171,252,.55); }
.rarity-celestial   { --rarity-accent:#67e8f9; --rarity-glow:rgba(103,232,249,.32); --rarity-grad:linear-gradient(90deg,#22d3ee,#a5f3fc); --rarity-ink:#062d33; --rarity-shadow:rgba(103,232,249,.55); }
.rarity-transcendent { --rarity-accent:#fff; --rarity-glow:rgba(255,255,255,.30); --rarity-grad:linear-gradient(90deg,#f0abfc,#67e8f9,#fbbf24); --rarity-ink:#0f172a; --rarity-shadow:rgba(255,255,255,.5); }
.rarity-transcendent .shop-card-badge--rarity { color:#0f172a; }

@media (max-width: 575.98px) {
    .shop-cat-hero { padding: 1.1rem 1.1rem; }
    .shop-cat-hero-title { font-size: 1.45rem; }
    .shop-cat-hero-icon { width: 52px; height: 52px; flex-basis: 52px; font-size: 1.5rem; }
    .shop-cat-hero-balance { width: 100%; align-items: flex-start; }
}

/* ============================================================
   SHOP PLAYER PROFILE CARD — avatar, grade, grade expiry.
   ============================================================ */
.shop-profile {
    background: linear-gradient(180deg, rgba(30,41,59,0.9), rgba(15,23,42,0.92));
    border: 1px solid var(--arcadia-border);
    border-radius: 16px;
    padding: 1.1rem 1.1rem 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.shop-profile-head {
    display: flex;
    align-items: center;
    gap: .85rem;
}
.shop-profile-avatar {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    border-radius: 14px;
    object-fit: cover;
    background: rgba(0,0,0,0.3);
    border: 2px solid rgba(var(--arcadia-primary-rgb), 0.45);
    box-shadow: 0 6px 16px rgba(0,0,0,0.4);
    image-rendering: pixelated;   /* crisp Minecraft skins */
}
.shop-profile-id {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
}
.shop-profile-name {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--arcadia-text);
    line-height: 1.1;
    word-break: break-word;
}
.shop-profile-role {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    align-self: flex-start;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.shop-profile-vip,
.shop-profile-novip {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1rem;
    padding: .7rem .85rem;
    border-radius: 12px;
    text-decoration: none;
}
.shop-profile-vip {
    background: linear-gradient(135deg, rgba(52,211,153,0.16), rgba(16,185,129,0.08));
    border: 1px solid rgba(52,211,153,0.4);
}
.shop-profile-vip.is-soon {
    background: linear-gradient(135deg, rgba(251,191,36,0.18), rgba(245,158,11,0.08));
    border-color: rgba(251,191,36,0.5);
}
.shop-profile-vip > i {
    font-size: 1.6rem;
    color: #34d399;
    flex: 0 0 auto;
}
.shop-profile-vip.is-soon > i { color: var(--arcadia-primary); }
.shop-profile-vip > div,
.shop-profile-novip > div {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}
.shop-profile-vip strong,
.shop-profile-novip strong {
    font-size: .9rem;
    font-weight: 800;
    color: var(--arcadia-text);
}
.shop-profile-vip span { font-size: .85rem; color: var(--arcadia-text); }
.shop-profile-vip small {
    font-size: .72rem;
    color: var(--arcadia-text-muted);
    margin-top: .1rem;
}
.shop-profile-novip {
    background: linear-gradient(135deg, rgba(var(--arcadia-primary-rgb),0.16), rgba(120,53,15,0.18));
    border: 1px solid rgba(var(--arcadia-primary-rgb), 0.4);
    transition: transform .18s ease, border-color .18s ease;
}
.shop-profile-novip:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--arcadia-primary-rgb), 0.7);
}
.shop-profile-novip > i { font-size: 1.6rem; color: var(--arcadia-primary); flex: 0 0 auto; }
.shop-profile-novip strong { color: var(--arcadia-primary); }
.shop-profile-novip span { font-size: .82rem; color: var(--arcadia-text-muted); }

/* ============================================================
   SHOP — "don't buy a grade" notice for players above VIP.
   ============================================================ */
.shop-grade-warning {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-wrap: wrap;
    padding: 1.2rem 1.4rem;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(52,211,153,0.14), rgba(15,23,42,0.6));
    border: 1px solid rgba(52,211,153,0.45);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.shop-grade-warning-icon {
    font-size: 2.4rem;
    color: #34d399;
    flex: 0 0 auto;
}
.shop-grade-warning-body {
    flex: 1 1 280px;
    min-width: 0;
}
.shop-grade-warning-body strong {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--arcadia-text);
    margin-bottom: .35rem;
}
.shop-grade-warning-body p {
    margin: 0 0 .4rem;
    color: var(--arcadia-text);
    font-size: .92rem;
    line-height: 1.55;
}
.shop-grade-warning-cta {
    flex: 0 0 auto;
    font-weight: 800;
    white-space: nowrap;
    border-radius: 12px;
    padding: .65rem 1.3rem;
}
@media (max-width: 575.98px) {
    .shop-grade-warning { text-align: center; justify-content: center; }
    .shop-grade-warning-cta { width: 100%; }
}

/* ============================================================
   SHOP CART v2 — two-column checkout (items + sticky summary).
   Theme override; plugin logic untouched.
   ============================================================ */
.shop-cart-empty {
    background: rgba(30,41,59,0.55);
    border: 1px solid var(--arcadia-border);
    border-radius: 16px;
}
.shop-cart-empty-text { font-size: 1.05rem; }

/* ---- Items list ---- */
.shop-cart-items {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.shop-cart-item {
    display: grid;
    grid-template-columns: 64px 1fr auto auto auto;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1rem;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(30,41,59,0.85), rgba(15,23,42,0.85));
    border: 1px solid var(--arcadia-border);
    transition: border-color .2s ease;
}
.shop-cart-item:hover { border-color: rgba(var(--arcadia-primary-rgb),0.4); }
.shop-cart-item-media {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0,0,0,0.3);
    flex: 0 0 64px;
}
.shop-cart-item-media img { width: 100%; height: 100%; object-fit: cover; }
.shop-cart-item-media--placeholder {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    font-size: 1.6rem; color: rgba(var(--arcadia-primary-rgb), 0.4);
}
.shop-cart-item-info { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.shop-cart-item-name { font-weight: 800; color: var(--arcadia-text); }
.shop-cart-item-unit { font-size: .82rem; color: var(--arcadia-text-muted); }
.shop-cart-item-unit-label { opacity: .7; }
.shop-cart-item-qty { display: flex; flex-direction: column; gap: .2rem; align-items: center; }
.shop-cart-item-qty-label {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--arcadia-text-muted); margin: 0;
}
.shop-cart-item-qty input {
    width: 72px; text-align: center;
    background: rgba(0,0,0,0.3) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: #fff !important;
}
.shop-cart-item-qty input:focus {
    border-color: var(--arcadia-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--arcadia-primary-rgb),0.25) !important;
}
.shop-cart-item-total { text-align: right; min-width: 90px; }
.shop-cart-item-total-amount { font-weight: 900; color: var(--arcadia-primary); }
.shop-cart-item-remove {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 9px;
    color: #ef4444; background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.3); text-decoration: none;
    transition: all .2s ease;
}
.shop-cart-item-remove:hover { background: #ef4444; color: #fff; }

.shop-cart-items-actions { text-align: right; margin-top: 1rem; }
.shop-cart-clearform { margin-top: .85rem; }
.shop-cart-clear-btn {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .5rem 1.1rem; border-radius: 10px; cursor: pointer;
    font-size: .9rem; font-weight: 700;
    color: #f87171;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.45);
    transition: all .2s ease;
}
.shop-cart-clear-btn:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}

/* ---- Applied coupons / giftcards ---- */
.shop-cart-applied {
    margin-top: 1.25rem;
    padding: 1rem 1.2rem;
    border-radius: 14px;
    background: rgba(15,23,42,0.5);
    border: 1px solid var(--arcadia-border);
}
.shop-cart-applied-title {
    font-size: .8rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--arcadia-text-muted); margin: .5rem 0 .4rem;
}
.shop-cart-applied-title:first-child { margin-top: 0; }
.shop-cart-applied-row {
    display: flex; align-items: center; gap: .6rem;
    padding: .4rem 0; border-bottom: 1px solid var(--arcadia-border);
}
.shop-cart-applied-row:last-child { border-bottom: none; }
.shop-cart-applied-code { font-weight: 700; }
.shop-cart-applied-val { margin-left: auto; color: #34d399; font-weight: 700; }
.shop-cart-applied-remove {
    background: none; border: none; color: #ef4444; cursor: pointer; padding: .2rem .4rem;
}

/* ---- Sticky summary panel ---- */
.shop-cart-summary {
    position: sticky;
    top: 1.5rem;
    padding: 1.4rem 1.4rem 1.2rem;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(30,41,59,0.92), rgba(15,23,42,0.95));
    border: 1px solid rgba(var(--arcadia-primary-rgb), 0.3);
    box-shadow: 0 14px 40px rgba(0,0,0,0.4);
}
.shop-cart-summary-title {
    font-size: 1.1rem; font-weight: 900; margin: 0 0 1rem;
    padding-bottom: .8rem; border-bottom: 1px solid var(--arcadia-border);
}
.shop-cart-summary-line {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; margin-bottom: .6rem; color: var(--arcadia-text);
}
.shop-cart-summary-line--payable {
    padding-top: .6rem; border-top: 1px dashed var(--arcadia-border);
}
.shop-cart-summary-total { text-align: right; font-weight: 900; color: var(--arcadia-primary); font-size: 1.15rem; }
.shop-cart-summary-total .shop-euro { display: block; font-size: .78rem; font-weight: 500; }

.shop-cart-balance {
    display: flex; align-items: center; gap: .5rem;
    padding: .6rem .8rem; border-radius: 10px; margin: .8rem 0;
    font-size: .88rem;
}
.shop-cart-balance.is-ok { background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.35); }
.shop-cart-balance.is-ok i { color: #34d399; }
.shop-cart-balance.is-low { background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.4); }
.shop-cart-balance.is-low i { color: var(--arcadia-primary); }

.shop-cart-code { margin-top: .9rem; }
.shop-cart-code-label {
    display: block; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--arcadia-text-muted); margin-bottom: .3rem;
}
.shop-cart-code .form-control {
    background: rgba(0,0,0,0.3) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: #fff !important;
}
.shop-cart-checkout { margin-top: 1.2rem; }
.shop-cart-terms { margin-bottom: .8rem; }
.shop-cart-pay {
    font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
    padding: .8rem 1rem; border-radius: 12px;
}
.shop-cart-continue {
    display: block; text-align: center; margin-top: .9rem;
    color: var(--arcadia-text-muted); font-size: .88rem; text-decoration: none;
}
.shop-cart-continue:hover { color: var(--arcadia-primary); }

@media (max-width: 575.98px) {
    .shop-cart-item {
        grid-template-columns: 52px 1fr auto;
        grid-template-areas: "media info remove" "media qty total";
        row-gap: .5rem;
    }
    .shop-cart-item-media { grid-area: media; width: 52px; height: 52px; flex-basis: 52px; }
    .shop-cart-item-info { grid-area: info; }
    .shop-cart-item-remove { grid-area: remove; }
    .shop-cart-item-qty { grid-area: qty; align-items: flex-start; }
    .shop-cart-item-total { grid-area: total; align-self: center; }
}

/* ============================================================
   PROMO CODES — redeem page + shop sidebar field.
   ============================================================ */
.shop-promo-box .shop-promo-box-head,
.shop-promo-box-head {
    display: flex; align-items: center; gap: .5rem;
    font-weight: 800; margin-bottom: .6rem; color: var(--arcadia-primary);
}
.shop-promo-box {
    padding: 1rem 1.1rem;
}
.shop-promo-box .form-control {
    background: rgba(0,0,0,0.3) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: #fff !important;
}
.shop-promo-box .form-control:focus {
    border-color: var(--arcadia-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--arcadia-primary-rgb),0.25) !important;
}

/* ---- Dedicated /promocode page ---- */
.promo-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 1rem 0;
}
.promo-hero {
    text-align: center;
    padding: 1.5rem 1rem .5rem;
}
.promo-hero-icon {
    font-size: 3rem;
    color: var(--arcadia-primary);
    text-shadow: 0 0 24px rgba(var(--arcadia-primary-rgb),0.5);
}
.promo-hero-title {
    font-weight: 900; letter-spacing: -0.02em; margin: .6rem 0 .3rem;
}
.promo-hero-sub { color: var(--arcadia-text-muted); margin: 0; }

.promo-card {
    margin-top: 1.2rem;
    padding: 1.6rem;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(var(--arcadia-primary-rgb),0.14), rgba(15,23,42,0.7));
    border: 1px solid rgba(var(--arcadia-primary-rgb), 0.35);
    box-shadow: 0 14px 40px rgba(0,0,0,0.4);
}
.promo-form-label {
    display: block; font-weight: 700; margin-bottom: .5rem;
    text-transform: uppercase; letter-spacing: .04em; font-size: .8rem;
    color: var(--arcadia-text-muted);
}
.promo-card .form-control {
    background: rgba(0,0,0,0.35) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    color: #fff !important;
    font-weight: 700; letter-spacing: .05em;
}
.promo-card .form-control:focus {
    border-color: var(--arcadia-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--arcadia-primary-rgb),0.25) !important;
}
.promo-card .input-group-text {
    background: rgba(var(--arcadia-primary-rgb),0.15);
    border: 1px solid rgba(255,255,255,0.14);
    color: var(--arcadia-primary);
}

.promo-history {
    margin-top: 2rem;
}
.promo-history-title {
    font-size: 1.1rem; font-weight: 800; margin-bottom: .8rem;
}
.promo-history-list {
    border-radius: 14px; overflow: hidden;
    border: 1px solid var(--arcadia-border);
}
.promo-history-row {
    display: flex; align-items: center; gap: 1rem;
    padding: .7rem 1rem;
    background: rgba(30,41,59,0.5);
    border-bottom: 1px solid var(--arcadia-border);
}
.promo-history-row:last-child { border-bottom: none; }
.promo-history-code { font-weight: 700; color: var(--arcadia-text); }
.promo-history-amount { margin-left: auto; color: #34d399; font-weight: 800; white-space: nowrap; }
.promo-history-date { color: var(--arcadia-text-muted); font-size: .82rem; white-space: nowrap; }

@media (max-width: 575.98px) {
    .promo-history-row { flex-wrap: wrap; gap: .3rem .8rem; }
    .promo-history-amount { margin-left: 0; }
}

/* ============================================================
   SHOP OFFERS — credit packs + payment gateway selection.
   Premium look + trust signals. Plugin logic untouched.
   ============================================================ */
.offers-hero {
    padding: 1.4rem 1.6rem;
    border-radius: 18px;
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(var(--arcadia-primary-rgb),0.18), transparent 55%),
        linear-gradient(135deg, rgba(120,53,15,0.4), rgba(15,23,42,0.9));
    border: 1px solid rgba(var(--arcadia-primary-rgb), 0.3);
}
.offers-hero-title { font-weight: 900; letter-spacing: -0.02em; margin: 0 0 .3rem; }
.offers-hero-title i { color: var(--arcadia-primary); }
.offers-hero-sub { color: var(--arcadia-text-muted); margin: 0; font-size: .95rem; }

/* ---- Token pack cards ---- */
.offers-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: 1.4rem 1rem 1.2rem;
    border-radius: 16px;
    text-decoration: none;
    text-align: center;
    background: linear-gradient(180deg, rgba(30,41,59,0.88), rgba(15,23,42,0.9));
    border: 1px solid var(--arcadia-border);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.offers-card:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--arcadia-primary-rgb), 0.6);
    box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}
.offers-card--best {
    border-color: rgba(var(--arcadia-primary-rgb), 0.7);
    box-shadow: 0 0 0 1px rgba(var(--arcadia-primary-rgb),0.4), 0 14px 36px rgba(0,0,0,0.5);
}
.offers-card-ribbon {
    position: absolute; top: .7rem; right: -2.4rem;
    transform: rotate(38deg);
    background: linear-gradient(90deg, var(--arcadia-primary), #fbbf24);
    color: #0f172a; font-weight: 800; font-size: .62rem;
    text-transform: uppercase; letter-spacing: .05em;
    padding: .25rem 2.6rem; box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.offers-card-icon {
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--arcadia-primary-rgb), 0.14);
    border: 1px solid rgba(var(--arcadia-primary-rgb), 0.3);
    font-size: 1.7rem; color: var(--arcadia-primary); margin-bottom: .4rem;
}
.offers-card-icon img { max-width: 100%; max-height: 100%; object-fit: contain; }
.offers-card-tokens {
    font-size: 1.55rem; font-weight: 900; color: var(--arcadia-primary);
    line-height: 1; text-shadow: 0 0 16px rgba(var(--arcadia-primary-rgb),0.4);
}
.offers-card-tokens-label {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--arcadia-text-muted);
}
.offers-card-bonus {
    margin-top: .35rem; padding: .15rem .6rem; border-radius: 999px;
    font-size: .72rem; font-weight: 800;
    color: #34d399; background: rgba(52,211,153,0.14); border: 1px solid rgba(52,211,153,0.4);
}
.offers-card-price {
    margin-top: .7rem; padding-top: .6rem; width: 100%;
    border-top: 1px solid var(--arcadia-border);
    font-size: 1.25rem; font-weight: 900; color: var(--arcadia-text);
}

/* ---- Gateway selection ---- */
.offers-gateway {
    display: flex; flex-direction: column; align-items: center; gap: .6rem;
    padding: 1.6rem 1rem; border-radius: 16px; text-decoration: none;
    background: linear-gradient(180deg, rgba(30,41,59,0.88), rgba(15,23,42,0.9));
    border: 1px solid var(--arcadia-border);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.offers-gateway:hover {
    transform: translateY(-5px);
    border-color: rgba(var(--arcadia-primary-rgb), 0.6);
    box-shadow: 0 14px 36px rgba(0,0,0,0.45);
}
.offers-gateway-img { max-height: 48px; max-width: 80%; object-fit: contain; }
.offers-gateway-name { font-weight: 800; color: var(--arcadia-text); }
.offers-gateway-go { color: var(--arcadia-primary); font-size: 1.3rem; }

/* ---- Trust strip ---- */
.offers-trust {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2rem;
    margin-top: 2rem; padding: 1.1rem 1.2rem; border-radius: 14px;
    background: rgba(15,23,42,0.5); border: 1px solid var(--arcadia-border);
}
.offers-trust-item {
    display: flex; align-items: center; gap: .5rem;
    color: var(--arcadia-text); font-size: .9rem; font-weight: 600;
}
.offers-trust-item i { color: #34d399; font-size: 1.2rem; }
.offers-back {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .6rem 1.4rem; border-radius: 12px;
    color: var(--arcadia-text); text-decoration: none; font-weight: 700;
    background: rgba(30,41,59,0.7);
    border: 1px solid var(--arcadia-border);
    transition: all .2s ease;
}
.offers-back i { transition: transform .2s ease; }
.offers-back:hover {
    color: var(--arcadia-primary);
    border-color: rgba(var(--arcadia-primary-rgb), 0.5);
    background: rgba(var(--arcadia-primary-rgb), 0.1);
}
.offers-back:hover i { transform: translateX(-3px); }

/* ============================================================
   PAYMENT SUCCESS — animated balance "recharge" overlay.
   ============================================================ */
.recharge-overlay {
    position: fixed; inset: 0; z-index: 11000;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    background: rgba(2, 6, 15, 0.88);
    backdrop-filter: blur(10px);
    animation: rechargeFadeIn .35s ease both;
}
.recharge-overlay.is-closing { animation: rechargeFadeOut .35s ease both; }
@keyframes rechargeFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rechargeFadeOut { from { opacity: 1; } to { opacity: 0; } }

.recharge-confetti {
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 1;
}
.recharge-box {
    position: relative; z-index: 2;
    width: 100%; max-width: 440px; text-align: center;
    padding: 2.2rem 1.8rem 1.8rem;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(30,41,59,0.97), rgba(15,23,42,0.98));
    border: 1px solid rgba(var(--arcadia-primary-rgb), 0.4);
    box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 60px rgba(var(--arcadia-primary-rgb),0.15);
    animation: rechargePop .5s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes rechargePop { from { transform: scale(.85) translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }

.recharge-check {
    width: 72px; height: 72px; margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.4rem; color: #0f172a;
    background: linear-gradient(135deg, #34d399, #10b981);
    box-shadow: 0 0 0 8px rgba(52,211,153,0.18), 0 10px 30px rgba(16,185,129,0.5);
    animation: rechargeCheckPop .5s .15s cubic-bezier(.2,.9,.3,1.4) both;
}
@keyframes rechargeCheckPop { from { transform: scale(0); } to { transform: scale(1); } }

.recharge-title { font-weight: 900; font-size: 1.5rem; margin: 0 0 .3rem; }
.recharge-added {
    font-weight: 800; color: #34d399; font-size: 1.05rem; margin: 0 0 1.3rem;
}

.recharge-balance {
    display: flex; flex-direction: column; gap: .1rem; margin-bottom: 1rem;
}
.recharge-balance-label {
    font-size: .75rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--arcadia-text-muted); font-weight: 700;
}
.recharge-balance-amount {
    font-size: 2.6rem; font-weight: 900; line-height: 1;
    color: var(--arcadia-primary);
    text-shadow: 0 0 26px rgba(var(--arcadia-primary-rgb), 0.55);
    font-variant-numeric: tabular-nums;
}
.recharge-balance-unit {
    font-size: .8rem; color: var(--arcadia-text-muted); font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
}
.recharge-bar {
    height: 8px; border-radius: 999px; overflow: hidden;
    background: rgba(255,255,255,0.08); margin: 0 0 1.4rem;
}
.recharge-bar-fill {
    height: 100%; width: 0;
    background: linear-gradient(90deg, var(--arcadia-primary), #fbbf24);
    box-shadow: 0 0 14px rgba(var(--arcadia-primary-rgb), 0.6);
    transition: width .05s linear;
}
.recharge-close {
    font-weight: 800; padding: .75rem 1.6rem; border-radius: 12px;
    text-transform: uppercase; letter-spacing: .03em;
}

/* ===== Hat bags — highlighted cosmetic cards (push the sacs à chapeau) ===== */
.shop-card--hatbag {
    border-color: rgba(168, 85, 247, 0.35);
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(168, 85, 247, 0.12), transparent 60%),
        var(--arcadia-bg-dark, #0f172a);
}
.shop-card--hatbag:hover {
    border-color: rgba(168, 85, 247, 0.6);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 22px rgba(168, 85, 247, 0.25);
}
.shop-card-ribbon--hatbag {
    background: linear-gradient(90deg, #a855f7, #c084fc);
    color: #fff;
}

/* Short single-word labels ("Surprise", "Limité") sit comfortably in the same
   diagonal band as the default "POPULAIRE" ribbon — keep the proven geometry. */
.shop-card-ribbon--hatbag,
.shop-card-ribbon--limited,
.shop-card-ribbon--effect {
    font-size: .66rem;
    letter-spacing: .06em;
}
/* "Au choix" is two short words — shrink a touch so it stays on the band. */
.shop-card-ribbon--effect { font-size: .58rem; }

/* ===== Particle-effect cosmetics (Movement / Static): "Au choix" ribbon ===== */
.shop-card--effect {
    border-color: rgba(34, 211, 238, 0.35);
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(34, 211, 238, 0.12), transparent 60%),
        var(--arcadia-bg-dark, #0f172a);
}
.shop-card--effect:hover {
    border-color: rgba(34, 211, 238, 0.6);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 22px rgba(34, 211, 238, 0.28);
}
.shop-card-ribbon--effect {
    background: linear-gradient(90deg, #22d3ee, #0891b2);
    color: #042f2e;
}

/* ===== Limited edition — finite global stock (e.g. summer hat bag) ===== */
.shop-card--limited {
    border-color: rgba(251, 146, 60, 0.5);
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(251, 146, 60, 0.14), transparent 60%),
        var(--arcadia-bg-dark, #0f172a);
}
.shop-card--limited:hover {
    border-color: rgba(251, 146, 60, 0.75);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 26px rgba(251, 146, 60, 0.35);
}
.shop-card-ribbon--limited {
    background: linear-gradient(90deg, #f97316, #fbbf24);
    color: #1f1300;
    animation: limited-pulse 2.4s ease-in-out infinite;
}
@keyframes limited-pulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); }
    50%      { box-shadow: 0 4px 18px rgba(251, 146, 60, 0.7); }
}

/* ===== Bundle discount badge (green "saving" pill on the card media) ===== */
.shop-card-badge--bundle {
    left: auto;
    right: .7rem;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    color: #052e16;
    font-weight: 900;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.4);
}

/* ===================================================================== */
/* ===== Best-sellers carousel — premium look + animations ===== */
/* ===================================================================== */

/* Subtle ambient frame so the row reads as a "showcase" band. */
.shop-featured {
    position: relative;
    padding: 1.1rem 1.1rem .4rem;
    border-radius: 20px;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(var(--arcadia-primary-rgb), 0.10), transparent 55%),
        linear-gradient(180deg, rgba(30, 41, 59, 0.35), rgba(15, 23, 42, 0.15));
    border: 1px solid rgba(var(--arcadia-primary-rgb), 0.14);
    overflow: hidden;
}
/* Soft moving sheen across the whole band. */
.shop-featured::before {
    content: "";
    position: absolute;
    inset: -40% -10%;
    background: radial-gradient(closest-side, rgba(var(--arcadia-primary-rgb), 0.10), transparent 70%);
    pointer-events: none;
    animation: featured-drift 9s ease-in-out infinite alternate;
}
@keyframes featured-drift {
    0%   { transform: translate(-8%, -4%); }
    100% { transform: translate(8%, 4%); }
}
.shop-featured-head, .shop-carousel { position: relative; z-index: 1; }

/* The section title icon (flame) flickers gently. */
.shop-featured .shop-section-title i {
    color: #f59e0b;
    animation: flame-flicker 1.8s ease-in-out infinite;
    transform-origin: center bottom;
}
@keyframes flame-flicker {
    0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.5)); }
    50%      { transform: scale(1.12) rotate(-3deg); filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.9)); }
}

/* Rounder, glowing nav buttons. */
.shop-carousel-btn {
    width: 40px; height: 40px; border-radius: 50%;
    backdrop-filter: blur(4px);
}
.shop-carousel-btn:hover {
    background: rgba(var(--arcadia-primary-rgb), 0.35);
    box-shadow: 0 0 0 3px rgba(var(--arcadia-primary-rgb), 0.15), 0 6px 18px rgba(0, 0, 0, 0.45);
    transform: translateY(-2px);
}

/* ---- Cards: entrance, hover lift, image zoom, light sweep ---- */
.shop-carousel-item {
    opacity: 0;
    transform: translateY(14px);
    animation: carousel-in .55s cubic-bezier(.22, 1, .36, 1) forwards;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.shop-carousel-item:nth-child(1) { animation-delay: .04s; }
.shop-carousel-item:nth-child(2) { animation-delay: .12s; }
.shop-carousel-item:nth-child(3) { animation-delay: .20s; }
.shop-carousel-item:nth-child(4) { animation-delay: .28s; }
.shop-carousel-item:nth-child(5) { animation-delay: .36s; }
.shop-carousel-item:nth-child(n+6) { animation-delay: .44s; }
@keyframes carousel-in {
    to { opacity: 1; transform: translateY(0); }
}

.shop-carousel-item:hover {
    transform: translateY(-8px);
    border-color: rgba(var(--arcadia-primary-rgb), 0.6);
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.5), 0 0 26px rgba(var(--arcadia-primary-rgb), 0.28);
}

/* Image zooms in slightly on hover. */
.shop-carousel-item .shop-card-media { overflow: hidden; }
.shop-carousel-item .shop-card-img {
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.shop-carousel-item:hover .shop-card-img { transform: scale(1.08); }

/* Diagonal light sweep across the media on hover. */
.shop-carousel-item .shop-card-media::after {
    content: "";
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
    opacity: 0;
}
.shop-carousel-item:hover .shop-card-media::after {
    animation: card-sweep .8s ease;
}
@keyframes card-sweep {
    0%   { left: -75%; opacity: 0; }
    20%  { opacity: 1; }
    100% { left: 130%; opacity: 0; }
}

/* "POPULAIRE" badge: glowing pulse so it grabs the eye. */
.shop-card-badge--hot {
    background: linear-gradient(90deg, #ef4444, #f59e0b);
    color: #fff;
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6);
    animation: hot-pulse 2.2s ease-in-out infinite;
}
@keyframes hot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); }
    50%      { box-shadow: 0 0 16px 3px rgba(245, 158, 11, 0.55); }
}

/* Respect users who prefer no motion. */
@media (prefers-reduced-motion: reduce) {
    .shop-featured::before,
    .shop-featured .shop-section-title i,
    .shop-carousel-item,
    .shop-card-badge--hot { animation: none; }
    .shop-carousel-item { opacity: 1; transform: none; }
}

/* ===================================================================== */
/* ===== Bundle "unpack" intro overlay (modal animation) ===== */
/* ===================================================================== */
.shop-modal-content { position: relative; }   /* anchor the overlay */

.bundle-intro {
    position: absolute;
    inset: 0;
    z-index: 10;
    border-radius: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(var(--arcadia-primary-rgb), 0.18), transparent 60%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.97), rgba(15, 23, 42, 0.99));
    transition: opacity .4s ease, transform .4s ease;
}
.bundle-intro.is-gone {
    opacity: 0;
    transform: scale(1.04);
    pointer-events: none;
}

.bundle-intro-skip {
    position: absolute;
    top: .9rem; right: 1rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #cbd5e1;
    font-size: .78rem; font-weight: 700;
    padding: .3rem .8rem; border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.bundle-intro-skip:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* The pack that "opens": shakes, then bursts. */
.bundle-intro-pack {
    width: 84px; height: 84px;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.6rem; color: var(--arcadia-primary);
    border-radius: 20px;
    background: rgba(var(--arcadia-primary-rgb), 0.12);
    border: 1px solid rgba(var(--arcadia-primary-rgb), 0.4);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    animation: pack-pop .9s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes pack-pop {
    0%   { transform: scale(.6) rotate(-8deg); opacity: 0; }
    35%  { transform: scale(1.08) rotate(4deg); opacity: 1; }
    50%  { transform: scale(.96) rotate(-3deg); }
    62%  { transform: scale(1.04) rotate(2deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.bundle-intro-title {
    font-family: var(--font-heading, inherit);
    font-weight: 800;
    font-size: 1.1rem;
    color: #f8fafc;
    opacity: 0;
    animation: bi-fade .4s ease .2s both;
}

/* Items grid: each chip flies out of the pack with a delay (--bi-delay). */
.bundle-intro-items {
    display: flex; flex-wrap: wrap; gap: .55rem;
    align-items: center; justify-content: center;
    max-width: 460px;
}
.bundle-intro-item {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .4rem .8rem;
    border-radius: 999px;
    font-size: .82rem; font-weight: 700;
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    opacity: 0;
    transform: translateY(-26px) scale(.7);
    animation: item-burst .55s cubic-bezier(.34, 1.56, .64, 1) var(--bi-delay, 0s) both;
}
.bundle-intro-item i { color: var(--arcadia-primary); font-size: .95rem; }
.bundle-intro-item-qty {
    background: rgba(var(--arcadia-primary-rgb), 0.22);
    color: var(--arcadia-primary);
    border-radius: 999px;
    padding: 0 .45rem;
    font-size: .72rem; font-weight: 900;
}
@keyframes item-burst {
    0%   { opacity: 0; transform: translateY(-30px) scale(.55); }
    60%  { opacity: 1; transform: translateY(6px) scale(1.06); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Price reveal slides up after the items (--price-delay). */
.bundle-intro-price {
    display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
    justify-content: center;
    margin-top: .4rem;
    opacity: 0;
    transform: translateY(14px);
    animation: bi-rise .5s cubic-bezier(.22, 1, .36, 1) var(--price-delay, 1s) both;
}
.bundle-intro-price-old {
    color: #94a3b8; text-decoration: line-through; font-size: 1rem;
}
.bundle-intro-price-now {
    color: #22c55e; font-weight: 900; font-size: 1.5rem;
    text-shadow: 0 0 18px rgba(34, 197, 94, 0.4);
}
.bundle-intro-price-pct {
    background: linear-gradient(90deg, #22c55e, #16a34a);
    color: #052e16; font-weight: 900; font-size: .9rem;
    padding: .2rem .7rem; border-radius: 999px;
    animation: pct-pop .5s cubic-bezier(.34, 1.56, .64, 1) calc(var(--price-delay, 1s) + .15s) both;
}
@keyframes pct-pop {
    0%   { transform: scale(0); }
    70%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}
.bundle-intro-tip {
    font-size: .76rem; color: #94a3b8;
    opacity: 0;
    animation: tip-blink 1.4s ease var(--price-delay, 1s) infinite;
}
@keyframes tip-blink {
    0%, 100% { opacity: .35; }
    50%      { opacity: .9; }
}
@keyframes bi-fade { to { opacity: 1; } }
@keyframes bi-rise { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    .bundle-intro-pack, .bundle-intro-title, .bundle-intro-item,
    .bundle-intro-price, .bundle-intro-price-pct, .bundle-intro-tip { animation: none; opacity: 1; transform: none; }
}

/* ===================================================================== */
/* ===== Grade tier ribbons (Membre / VIP / VIP+ / MVP) ===== */
/* ===================================================================== */
/* These labels carry an icon + word, so widen the band like hatbag/limited. */
.shop-card-ribbon--membre,
.shop-card-ribbon--vip,
.shop-card-ribbon--vipplus,
.shop-card-ribbon--mvp {
    top: .95rem;
    right: -2.9rem;
    width: 10.5rem;
    text-align: center;
    padding: .26rem 0;
    font-size: .58rem;
    letter-spacing: .04em;
    transform: rotate(40deg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .28rem;
    white-space: nowrap;
}
.shop-card-ribbon--membre i,
.shop-card-ribbon--vip i,
.shop-card-ribbon--vipplus i,
.shop-card-ribbon--mvp i { font-size: .62rem; }

/* Membre — neutral grey "default" tag. */
.shop-card-ribbon--membre { background: linear-gradient(90deg, #64748b, #475569); color: #f1f5f9; }

/* VIP — gold "Populaire". */
.shop-card-ribbon--vip { background: linear-gradient(90deg, #f59e0b, #fbbf24); color: #3a2400; }
.shop-card--grade-vip { border-color: rgba(245, 158, 11, 0.4); }
.shop-card--grade-vip:hover {
    border-color: rgba(245, 158, 11, 0.7);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 22px rgba(245, 158, 11, 0.3);
}

/* VIP+ — cyan "Le top". */
.shop-card-ribbon--vipplus { background: linear-gradient(90deg, #22d3ee, #0891b2); color: #042f2e; }
.shop-card--grade-vipplus { border-color: rgba(34, 211, 238, 0.4); }
.shop-card--grade-vipplus:hover {
    border-color: rgba(34, 211, 238, 0.7);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 22px rgba(34, 211, 238, 0.3);
}

/* MVP — purple "Prestige" with a subtle pulse (the flagship). */
.shop-card-ribbon--mvp {
    background: linear-gradient(90deg, #a855f7, #7e22ce);
    color: #fff;
    animation: mvp-shimmer 2.6s ease-in-out infinite;
}
@keyframes mvp-shimmer {
    0%, 100% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); }
    50%      { box-shadow: 0 4px 18px rgba(168, 85, 247, 0.75); }
}
.shop-card--grade-mvp {
    border-color: rgba(168, 85, 247, 0.45);
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(168, 85, 247, 0.12), transparent 60%),
        var(--arcadia-bg-dark, #0f172a);
}
.shop-card--grade-mvp:hover {
    border-color: rgba(168, 85, 247, 0.75);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 26px rgba(168, 85, 247, 0.35);
}

@media (prefers-reduced-motion: reduce) {
    .shop-card-ribbon--mvp { animation: none; }
}

/* ===== Bundle "-X%" diagonal ribbon + green card glow ===== */
.shop-card-ribbon--save {
    background: linear-gradient(90deg, #22c55e, #16a34a);
    color: #052e16;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .04em;
}
.shop-card--savebundle { border-color: rgba(34, 197, 94, 0.38); }
.shop-card--savebundle:hover {
    border-color: rgba(34, 197, 94, 0.65);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 22px rgba(34, 197, 94, 0.3);
}

/* ===================================================================== */
/* ===== Vote page (/vote) — restyle + reset countdown + notify ===== */
/* ===================================================================== */
.vote-hero {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1.25rem;
    padding: 1.5rem 1.75rem;
    border-radius: 20px;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(var(--arcadia-primary-rgb), 0.18), transparent 55%),
        linear-gradient(180deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.4));
    border: 1px solid rgba(var(--arcadia-primary-rgb), 0.18);
}
.vote-hero-main { display: flex; align-items: center; gap: 1rem; }
.vote-hero-icon {
    flex: 0 0 auto;
    width: 60px; height: 60px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem; color: #0f172a;
    background: linear-gradient(135deg, var(--arcadia-primary), #fbbf24);
    box-shadow: 0 8px 24px rgba(var(--arcadia-primary-rgb), 0.35);
}
.vote-hero-title { margin: 0; font-size: 1.6rem; }
.vote-hero-sub { margin: .15rem 0 0; color: #94a3b8; font-size: .95rem; }

.vote-reset {
    display: flex; flex-direction: column; align-items: center; gap: .2rem;
    padding: .75rem 1.25rem; border-radius: 14px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 190px;
}
.vote-reset-label { font-size: .76rem; color: #94a3b8; text-align: center; }
.vote-reset-timer {
    font-family: var(--font-heading, monospace);
    font-size: 1.35rem; font-weight: 800;
    color: var(--arcadia-primary);
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
}

.vote-notify {
    display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1.25rem; border-radius: 14px;
    background: linear-gradient(90deg, rgba(var(--arcadia-primary-rgb), 0.12), rgba(var(--arcadia-primary-rgb), 0.04));
    border: 1px solid rgba(var(--arcadia-primary-rgb), 0.25);
}
.vote-notify-text {
    display: flex; align-items: center; gap: .6rem; color: #e2e8f0; font-size: .92rem;
    min-width: 0; /* allow the label to shrink instead of pushing controls onto a new line */
}
.vote-notify-text i { color: var(--arcadia-primary); font-size: 1.1rem; flex: 0 0 auto; }
/* Right-hand controls (select + toggle) always stay on one line. */
.vote-notify-controls {
    display: flex; align-items: center; gap: .6rem;
    flex: 0 0 auto; white-space: nowrap;
}
.vote-notify .form-check-input:checked { background-color: var(--arcadia-primary); border-color: var(--arcadia-primary); }

.vote-card-main { border-color: rgba(var(--arcadia-primary-rgb), 0.18); }
.vote-sites { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; align-items: stretch; }
.vote-site-btn {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .8rem 1.3rem; font-weight: 700;
    margin-right: 0 !important;
}
.vote-site-btn .vote-site-icon { font-size: 1rem; opacity: .85; }
.vote-site-btn .vote-timer:empty { display: none; }
.vote-site-btn.disabled { opacity: .65; }

.vote-section-card { border-color: rgba(255, 255, 255, 0.08); }
.vote-section-title { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.vote-section-title i { color: var(--arcadia-primary); }
.vote-table th, .vote-table td { vertical-align: middle; }
.vote-table tbody tr.vote-top-1 { background: rgba(245, 158, 11, 0.08); }
.vote-table tbody tr.vote-top-2 { background: rgba(203, 213, 225, 0.06); }
.vote-table tbody tr.vote-top-3 { background: rgba(205, 127, 50, 0.07); }
.vote-count-badge {
    display: inline-block; min-width: 2rem; text-align: center;
    padding: .15rem .6rem; border-radius: 999px;
    background: rgba(var(--arcadia-primary-rgb), 0.16);
    color: var(--arcadia-primary); font-weight: 800; font-size: .85rem;
}
.vote-reward-img { border-radius: 8px; margin-right: .5rem; }
.vote-user-count { color: #94a3b8; font-size: .9rem; }

@media (max-width: 575.98px) {
    .vote-hero { flex-direction: column; align-items: stretch; text-align: center; }
    .vote-hero-main { flex-direction: column; }
    .vote-reset { width: 100%; }
}

/* ===== Vote notifications wrap (web + in-game) ===== */
.vote-notify-wrap { display: grid; grid-template-columns: 1fr; gap: .6rem; }
@media (min-width: 768px) { .vote-notify-wrap { grid-template-columns: 1fr 1fr; } }
.vote-notify-hint { color: #94a3b8; font-size: .82em; }
.vote-notify-server {
    max-width: 10rem;
    color: #e2e8f0;
    font-weight: 600;
    background-color: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(var(--arcadia-primary-rgb), 0.35);
    border-radius: 10px;
    padding: .35rem 2rem .35rem .7rem;
    /* Custom copper chevron (replaces the white native one). */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .6rem center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.vote-notify-server:hover { border-color: rgba(var(--arcadia-primary-rgb), 0.6); }
.vote-notify-server:focus {
    border-color: var(--arcadia-primary);
    box-shadow: 0 0 0 3px rgba(var(--arcadia-primary-rgb), 0.2);
    outline: none;
    background-color: rgba(15, 23, 42, 0.95);
}
/* Dark dropdown options (honoured by most modern browsers). */
.vote-notify-server option {
    background-color: #0f172a;
    color: #e2e8f0;
}
.vote-notify .bi-controller { color: var(--arcadia-primary); }

/* Vote notify: on very small screens, stack label above controls cleanly. */
@media (max-width: 419.98px) {
    .vote-notify { flex-wrap: wrap; }
    .vote-notify-controls { width: 100%; justify-content: space-between; }
}

/* ===================================================================== */
/* ===== Vote podium — last month's top 3 with Minecraft skins ===== */
/* ===================================================================== */
.vote-podium-card { border-color: rgba(var(--arcadia-primary-rgb), 0.2); }
.vote-podium-sub { color: #94a3b8; font-size: .9rem; margin-bottom: 1.25rem; }

.vote-podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1rem;
    flex-wrap: nowrap;
}
.vote-podium-spot {
    display: flex; flex-direction: column; align-items: center;
    flex: 1 1 0; max-width: 200px; min-width: 0;
}
.vote-podium-medal { font-size: 1.8rem; line-height: 1; margin-bottom: .3rem; }

.vote-podium-skin-wrap {
    display: flex; align-items: flex-end; justify-content: center;
    height: 150px;
}
.vote-podium-1 .vote-podium-skin-wrap { height: 180px; }   /* winner taller */
.vote-podium-skin {
    /* mc-heads /player/<uuid> renvoie un rendu de corps 100x200 (ratio 1:2).
       On verrouille ce ratio via aspect-ratio + height:100% pour que la largeur
       se calcule TOUJOURS proportionnellement — sinon l'image s'aplatit. */
    height: 100%; width: auto;
    aspect-ratio: 1 / 2;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.55));
    image-rendering: pixelated;            /* crisp Minecraft pixels */
    transition: transform .25s ease;
}
.vote-podium-skin.is-head {                 /* fallback when body render fails */
    height: auto; width: 84px; aspect-ratio: 1 / 1; border-radius: 10px;
}
.vote-podium-spot:hover .vote-podium-skin { transform: translateY(-4px) scale(1.03); }

.vote-podium-name {
    margin-top: .5rem; font-weight: 800; color: #f8fafc;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vote-podium-votes {
    font-size: .82rem; color: var(--arcadia-primary); font-weight: 700; margin-bottom: .5rem;
}

.vote-podium-base {
    width: 100%; border-radius: 12px 12px 0 0;
    display: flex; align-items: center; justify-content: center;
    color: #0f172a; font-weight: 900; font-size: 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.15); border-bottom: none;
}
.vote-podium-base-1 { height: 96px; background: linear-gradient(180deg, #fde047, #f59e0b); }   /* gold */
.vote-podium-base-2 { height: 70px; background: linear-gradient(180deg, #f1f5f9, #cbd5e1); }   /* silver */
.vote-podium-base-3 { height: 50px; background: linear-gradient(180deg, #e0a16a, #cd7f32); }   /* bronze */
.vote-podium-rank { opacity: .85; }

/* Subtle glow halo behind the winner. */
.vote-podium-1 { position: relative; }
.vote-podium-1::before {
    content: ""; position: absolute; top: 1.5rem; left: 50%; transform: translateX(-50%);
    width: 130px; height: 130px; border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.28), transparent 70%);
    z-index: 0; pointer-events: none;
}
.vote-podium-1 > * { position: relative; z-index: 1; }

@media (max-width: 575.98px) {
    .vote-podium { gap: .4rem; }
    .vote-podium-skin-wrap { height: 110px; }
    .vote-podium-1 .vote-podium-skin-wrap { height: 132px; }
    .vote-podium-medal { font-size: 1.4rem; }
    .vote-podium-name { font-size: .85rem; }
    .vote-podium-base-1 { height: 70px; } .vote-podium-base-2 { height: 52px; } .vote-podium-base-3 { height: 38px; }
}

/* ===== Vote monthly rewards — sober ranked list ===== */
.vote-mr-list {
    list-style: none; margin: 1rem 0 0; padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px;
    overflow: hidden;
}
.vote-mr-row {
    display: flex; align-items: center; gap: 1rem;
    padding: .7rem 1rem;
}
.vote-mr-row:not(:last-child) { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.vote-mr-rank {
    flex: 0 0 auto; width: 2.2rem; text-align: center;
    font-weight: 800; font-size: 1.05rem; color: var(--rank, #94a3b8);
}
.vote-mr-rank sup { font-size: .6em; font-weight: 600; }
.vote-mr-1 { --rank: #f59e0b; }
.vote-mr-2 { --rank: #cbd5e1; }
.vote-mr-3 { --rank: #cd7f32; }
.vote-mr-pos { flex: 1 1 auto; color: #e5e7eb; font-weight: 500; }
.vote-mr-amount { flex: 0 0 auto; font-weight: 800; color: var(--arcadia-primary); font-size: 1rem; }
.vote-mr-amount small { font-size: .72rem; color: #94a3b8; font-weight: 500; }

/* ===== Vote rewards — clean rarity list ===== */
.vote-rewards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: .5rem .9rem;
    margin-top: 1rem;
}
.vote-reward-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.vote-reward-thumb {
    width: 30px; height: 30px; flex: 0 0 auto;
    object-fit: contain;
    image-rendering: pixelated;
}
.vote-reward-thumb--ph {
    display: flex; align-items: center; justify-content: center;
    color: var(--rarity); font-size: 1rem;
}
.vote-reward-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.3; }
.vote-reward-tier {
    font-size: .92rem; font-weight: 600; color: #e5e7eb;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vote-reward-tier::before {
    content: ""; display: inline-block;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--rarity); margin-right: .5rem; vertical-align: middle;
}
.vote-reward-bonus { font-size: .78rem; color: #94a3b8; }
.vote-reward-chance {
    flex: 0 0 auto; font-weight: 700; font-size: .9rem;
    color: #cbd5e1; font-variant-numeric: tabular-nums;
}

/* ============================================================
   HERO — Boutons d'appel à l'action (Jouer / Discord)
   Hiérarchie claire : CTA principal cuivre plein + flèche animée,
   Discord en ghost qui prend sa couleur de marque au survol.
   ============================================================ */
.hero-cta-group {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    padding: 14px 22px;
    border-radius: 14px;
    min-width: 250px;
    text-align: left;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
    will-change: transform;
}

.hero-cta-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 1.45rem;
    transition: transform .25s ease, background .25s ease;
}

.hero-cta-text { display: flex; flex-direction: column; line-height: 1.2; }
.hero-cta-title { font-weight: 700; font-size: 1.05rem; }
.hero-cta-sub { font-size: .78rem; opacity: .8; font-weight: 500; }
.hero-cta-arrow {
    flex: 0 0 auto; margin-left: auto; font-size: 1.1rem;
    transform: translateX(-4px); opacity: 0; transition: transform .25s ease, opacity .25s ease;
}

/* --- CTA principal : Jouer --- */
.hero-cta-play {
    background: linear-gradient(135deg, var(--arcadia-primary, #f59e0b), #d97706);
    color: #1a1206;
    box-shadow: 0 10px 26px rgba(var(--arcadia-primary-rgb, 245,158,11), .35);
}
.hero-cta-play .hero-cta-icon { background: rgba(26, 18, 6, .18); color: #1a1206; }
.hero-cta-play .hero-cta-sub { color: #4a3208; opacity: .9; }
.hero-cta-play:hover {
    color: #1a1206;
    transform: translateY(-3px);
    box-shadow: 0 16px 38px rgba(var(--arcadia-primary-rgb, 245,158,11), .55);
}
.hero-cta-play:hover .hero-cta-icon { transform: scale(1.08) rotate(-4deg); }
.hero-cta-play:hover .hero-cta-arrow { transform: translateX(0); opacity: 1; }
/* léger reflet qui balaie le bouton au survol */
.hero-cta-play { position: relative; overflow: hidden; }
.hero-cta-play::after {
    content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-18deg); transition: left .6s ease;
}
.hero-cta-play:hover::after { left: 140%; }

/* --- CTA secondaire : Discord (ghost) --- */
.hero-cta-discord {
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--arcadia-border, rgba(255,255,255,.14));
    color: var(--arcadia-text, #f8fafc);
}
.hero-cta-discord .hero-cta-icon { background: rgba(88, 101, 242, .15); color: #8b9aff; }
.hero-cta-discord .hero-cta-sub { color: var(--arcadia-text-muted, #94a3b8); }
.hero-cta-discord:hover {
    transform: translateY(-3px);
    border-color: rgba(88, 101, 242, .8);
    background: rgba(88, 101, 242, .12);
    color: #fff;
    box-shadow: 0 12px 30px rgba(88, 101, 242, .3);
}
.hero-cta-discord:hover .hero-cta-icon { background: #5865F2; color: #fff; transform: scale(1.08); }

@media (max-width: 575.98px) {
    .hero-cta { width: 100%; min-width: 0; }
    .hero-cta-group { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-cta, .hero-cta-icon, .hero-cta-arrow, .hero-cta-play::after { transition: none; }
    .hero-cta:hover { transform: none; }
    .hero-cta-play:hover::after { left: -120%; }
}

/* ============================================================
   Carte profil WIKI — fix visuel du badge de rang (« Apprenti »…)
   Le partial du plugin (wiki/_profile_card) pose .wiki-badge-pill sans
   forme propre → on lui donne un vrai look de pastille, et on soigne le
   conteneur. Défini ici (thème) pour survivre aux MAJ du plugin.
   ============================================================ */
.wiki-profile-badge {
    flex-direction: row !important;
    justify-content: center;
    align-items: center;
    gap: .55rem !important;
    flex-wrap: wrap;
    padding: .7rem 1rem !important;
    background: rgba(245, 158, 11, .1) !important;
    border: 1px solid rgba(245, 158, 11, .25);
    border-radius: 12px !important;
}
.wiki-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .9rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .9rem;
    line-height: 1.2;
    white-space: nowrap;
    /* La couleur de fond / texte / bordure vient du style inline du badge
       (styleAttribute() : une teinte par rang). On ne définit ici que la FORME
       pour ne pas écraser ces couleurs. */
}
.wiki-badge-pill i { font-size: .9rem; line-height: 1; }
.wiki-profile-badge small,
.wiki-profile-badge .text-muted {
    color: var(--arcadia-text-muted, #94a3b8) !important;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
}

/* ============================================================
   FIX modale « fade » : garantir qu'une modale ouverte (.show) est bien
   opaque/visible. Sur certains rendus la transition d'opacité du .fade
   pouvait laisser la modale à opacity:0 (écran sombre sans contenu).
   On force l'état visible quand .show est présent — sans effet sur le
   backdrop (qui a sa propre règle) ni sur les autres animations.
   ============================================================ */
.modal.fade.show {
    opacity: 1 !important;
}
.modal.fade.show .modal-dialog {
    transform: none !important;
}
/* Robustesse maximale : dès qu'une modale est affichée (display:block posé par
   Bootstrap au moment de l'ouverture), on neutralise toute transition d'opacité
   du .fade et on force l'état final visible, même si l'événement transitionend
   ne se déclenche pas (rendus où la modale restait à opacity:0 = fond sombre
   sans contenu). Le backdrop garde sa propre règle. */
.modal.show {
    opacity: 1 !important;
    transition: none !important;
}
.modal.show .modal-dialog {
    transform: none !important;
    transition: none !important;
}
.modal.show .modal-content {
    opacity: 1 !important;
}

/* Lien d'évitement (accessibilité Lighthouse) : caché tant qu'il n'a pas le focus
   clavier, puis visible en haut à gauche pour sauter directement au contenu. */
.arc-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
    background: var(--arcadia-primary, #f59e0b);
    color: #1a1205;
    font-weight: 700;
    padding: .6rem 1rem;
    border-radius: 0 0 .5rem 0;
    text-decoration: none;
}
.arc-skip-link:focus {
    left: 0;
    outline: 2px solid #fff;
}


/* ============================================================
   VIDÉO DE PRÉSENTATION — zoom au scroll (home)
   ============================================================
   Le lecteur grossit en arrivant au centre du viewport et rétrécit en s'en
   éloignant. L'échelle (--arc-video-scale) est calculée en JS (rAF) et posée
   en variable CSS ; la transition lisse les petites variations. */
.custom-video-player {
    transform: scale(var(--arc-video-scale, 1));
    transform-origin: center center;
    transition: transform 0.12s linear;
    will-change: transform;
}

/* Accessibilité : pas d'effet si l'utilisateur a désactivé les animations. */
@media (prefers-reduced-motion: reduce) {
    .custom-video-player {
        transform: none !important;
        transition: none !important;
    }
}


/* ============================================================
   TRANSITION DE PAGE — fondu doux (entrée + sortie)
   ============================================================
   Anime #main-content au chargement et avant de quitter la page.
   Ne s'active que si JS est dispo (.arc-js sur <html>) : sans JS, le
   contenu reste visible normalement (fallback sûr). Piloté par
   page-transition.js qui ajoute/retire arc-page-enter / arc-page-exit. */

/* État initial (caché) — UNIQUEMENT si JS présent, sinon contenu visible.
   FILET DE SÉCURITÉ : une animation auto-révélante ramène l'opacité à 1 après
   ~0.5s même si page-transition.js ne se charge jamais (404/réseau) -> jamais
   de page blanche. Le JS, lui, retire arc-page-init bien avant et joue l'entrée. */
.arc-js #main-content.arc-page-init {
    opacity: 0;
    animation: arcPageFailsafe 0.45s ease 0.5s forwards;
}
@keyframes arcPageFailsafe {
    to { opacity: 1; }
}

/* Entrée : fondu ultra-court, sans glissement (quasi invisible). */
.arc-js #main-content.arc-page-enter {
    animation: arcPageEnter 0.08s linear both;
}

/* Sortie : estompe minimal avant le rechargement. */
.arc-js #main-content.arc-page-exit {
    opacity: 0;
    transition: opacity 0.05s linear;
}

@keyframes arcPageEnter {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Accessibilité : aucun mouvement si l'utilisateur l'a désactivé. */
@media (prefers-reduced-motion: reduce) {
    .arc-js #main-content.arc-page-init,
    .arc-js #main-content.arc-page-enter,
    .arc-js #main-content.arc-page-exit {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
}