/* /Components/AddressField.razor.rz.scp.css */
.address-field[b-h0odjyyym7] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.address-search[b-h0odjyyym7] {
    position: relative;
}

.address-row[b-h0odjyyym7] {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.address-row .field[b-h0odjyyym7] {
    flex: 1;
    min-width: 10rem;
}

.address-suggestions[b-h0odjyyym7] {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 0.3rem;
    background: var(--color-paper);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lift);
    border: 1px solid rgba(20, 48, 31, 0.08);
    padding: 0.4rem;
    z-index: 20;
    max-height: 16rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.address-suggestion[b-h0odjyyym7] {
    display: block;
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-ink-900);
    text-align: left;
    cursor: pointer;
}

.address-suggestion:hover[b-h0odjyyym7] {
    background: var(--color-moss-100);
}
/* /Components/ClanDiscussion.razor.rz.scp.css */
.discussion[b-pah8nccmss] {
    display: flex;
    flex-direction: column;
    height: 32rem;
    max-height: 60vh;
}

.discussion-feed[b-pah8nccmss] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.2rem 0.2rem var(--space-2);
}

.discussion-post[b-pah8nccmss] {
    padding: 0.6rem 0.8rem;
    background: var(--color-moss-100);
    border-radius: var(--radius-md);
}

.discussion-post-header[b-pah8nccmss] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}

.discussion-author[b-pah8nccmss] {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-canopy-900);
}

/* Pseudo du chef mis en évidence en rouge dans la discussion (§ demande fonctionnelle). */
.discussion-author--leader[b-pah8nccmss] {
    color: var(--color-berry-600);
}

.discussion-time[b-pah8nccmss] {
    font-size: 0.75rem;
    color: var(--color-ink-600);
}

.discussion-delete-btn[b-pah8nccmss] {
    margin-left: auto;
    border: none;
    background: transparent;
    color: var(--color-ink-600);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.2rem;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.discussion-delete-btn:hover[b-pah8nccmss] {
    background: rgba(194, 59, 59, 0.12);
    color: var(--color-danger);
}

.discussion-body[b-pah8nccmss] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-ink-900);
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.discussion-compose[b-pah8nccmss] {
    display: flex;
    gap: 0.6rem;
    align-items: flex-end;
    padding-top: var(--space-2);
    border-top: 1px solid rgba(20, 48, 31, 0.08);
}

.discussion-compose textarea[b-pah8nccmss] {
    flex: 1;
    resize: none;
    min-height: 2.6rem;
    max-height: 8rem;
    box-sizing: border-box;
    font-family: var(--font-body);
    font-size: 0.9rem;
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius-md);
    border: 2px solid var(--color-sand-200);
    background: var(--color-moss-50);
    color: var(--color-ink-900);
}

.discussion-compose textarea:focus[b-pah8nccmss] {
    border-color: var(--color-leaf-500);
    background: var(--color-paper);
    outline: none;
}

@media (max-width: 640.98px) {
    .discussion[b-pah8nccmss] {
        height: 24rem;
    }
}
/* /Components/ComingSoonSection.razor.rz.scp.css */
.coming-soon-section[b-tnrs1yacbn] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.coming-soon-section p[b-tnrs1yacbn] {
    color: var(--color-ink-600);
    max-width: 48ch;
    margin-bottom: var(--space-2);
}

@media (max-width: 640.98px) {
    .coming-soon-section[b-tnrs1yacbn] {
        flex-direction: column;
        text-align: center;
    }
}
/* /Components/ConfirmDialog.razor.rz.scp.css */
.confirm-overlay[b-mj88usfv4k] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 32, 20, 0.55);
    padding: var(--space-4);
    z-index: 200;
}

/*
 * .card-leaf (global) fournit déjà le fond/la bordure/l'ombre/le liseré du haut — le dialogue reste
 * ainsi dans le thème du site plutôt que d'être une boîte générique. Largeur fluide bornée par
 * max-width : pas besoin de media query, ça tient sur téléphone comme sur grand écran.
 */
.confirm-box[b-mj88usfv4k] {
    width: 100%;
    max-width: 26rem;
}

.confirm-message[b-mj88usfv4k] {
    margin: 0 0 var(--space-3);
    color: var(--color-ink-900);
    font-size: 1rem;
    line-height: 1.5;
}

.confirm-actions[b-mj88usfv4k] {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    flex-wrap: wrap;
}

@media (max-width: 480px) {
    .confirm-actions[b-mj88usfv4k] {
        flex-direction: column-reverse;
    }

    .confirm-actions .btn[b-mj88usfv4k] {
        width: 100%;
    }
}
/* /Components/DescriptionEditor.razor.rz.scp.css */
.desc-editor[b-yppdwhysms] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.desc-toolbar[b-yppdwhysms] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.desc-tool-btn[b-yppdwhysms] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 2px solid var(--color-sand-200);
    background: var(--color-paper);
    color: var(--color-ink-900);
    font-family: var(--font-body);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.desc-tool-btn:hover[b-yppdwhysms] {
    background: var(--color-moss-100);
    border-color: var(--color-leaf-500);
}

.desc-toolbar-sep[b-yppdwhysms] {
    width: 1px;
    height: 1.4rem;
    background: rgba(20, 48, 31, 0.15);
    margin: 0 0.2rem;
}

.desc-color-btn[b-yppdwhysms] {
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border-radius: 50%;
    border: 2px solid var(--color-paper);
    box-shadow: 0 0 0 1px rgba(20, 48, 31, 0.15);
    cursor: pointer;
    transition: transform var(--transition-fast);
}

.desc-color-btn:hover[b-yppdwhysms] {
    transform: scale(1.15);
}

.desc-textarea[b-yppdwhysms] {
    width: 100%;
    box-sizing: border-box;
    min-height: 6rem;
    resize: vertical;
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius-md);
    border: 2px solid var(--color-sand-200);
    background: var(--color-moss-50);
    color: var(--color-ink-900);
}

.desc-textarea:focus[b-yppdwhysms] {
    border-color: var(--color-leaf-500);
    background: var(--color-paper);
    outline: none;
}

.desc-counter[b-yppdwhysms] {
    align-self: flex-end;
    font-size: 0.75rem;
    color: var(--color-ink-600);
}

.desc-preview[b-yppdwhysms] {
    padding: var(--space-2) var(--space-3);
    background: var(--color-moss-100);
    border-radius: var(--radius-md);
}

.desc-preview-label[b-yppdwhysms] {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-ink-600);
    margin-bottom: 0.3rem;
}

.desc-preview-body[b-yppdwhysms] {
    white-space: pre-wrap;
    overflow-wrap: break-word;
    font-size: 0.9rem;
    color: var(--color-ink-900);
}
/* /Components/PhotoUpload.razor.rz.scp.css */
.photo-upload[b-siwc9fvh13] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.photo-upload-name[b-siwc9fvh13] {
    font-size: 0.85rem;
    color: var(--color-ink-600);
    word-break: break-all;
}
/* /Components/Tabs.razor.rz.scp.css */
.tab-headers[b-pu20l89qb3] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-sand-200);
}

.tab-header[b-pu20l89qb3] {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.5rem 1.1rem;
    border-radius: var(--radius-pill);
    border: none;
    background: transparent;
    color: var(--color-ink-600);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.tab-header:hover[b-pu20l89qb3] {
    background: var(--color-moss-100);
    color: var(--color-canopy-900);
}

.tab-header.is-active[b-pu20l89qb3] {
    background: var(--color-leaf-500);
    color: white;
    box-shadow: var(--shadow-sm);
}

.tab-panel[b-pu20l89qb3] {
    animation: fade-in-up var(--transition-normal) ease both;
}
/* /Layout/MainLayout.razor.rz.scp.css */
/*
 * Mascottes en fond, très légères et dispersées — jamais alignées façon photo de groupe (ça ferait
 * bannière figée plutôt que texture d'ambiance), dans le même esprit que le bambou des coins (base.css).
 * Masquées sous 900px : peu de marge visible autour du contenu sur petit écran, ça ne ferait qu'encombrer.
 */
.bg-mascots[b-t8ejg9223z] {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.bg-mascot[b-t8ejg9223z] {
    position: absolute;
    height: auto;
    filter: saturate(0.9);
}

.bg-mascot--panda-roux[b-t8ejg9223z] {
    top: 10vh;
    left: 2vw;
    width: 10rem;
    opacity: 0.06;
    transform: rotate(-6deg);
}

.bg-mascot--chat-roux[b-t8ejg9223z] {
    top: 20vh;
    right: 3vw;
    width: 9rem;
    opacity: 0.05;
    transform: rotate(5deg);
}

.bg-mascot--panda[b-t8ejg9223z] {
    bottom: 14vh;
    left: 5vw;
    width: 12rem;
    opacity: 0.04;
    transform: rotate(4deg);
}

.bg-mascot--rhino[b-t8ejg9223z] {
    bottom: 18vh;
    right: 2vw;
    width: 13rem;
    opacity: 0.05;
    transform: rotate(-4deg);
}

.bg-mascot--serpent[b-t8ejg9223z] {
    top: 42vh;
    right: 10vw;
    width: 9rem;
    opacity: 0.06;
    transform: rotate(8deg);
}

@media (max-width: 900px) {
    .bg-mascots[b-t8ejg9223z] {
        display: none;
    }
}

.app-shell[b-t8ejg9223z] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-main[b-t8ejg9223z] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.content[b-t8ejg9223z] {
    padding: var(--space-4);
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

@media (min-width: 641px) {
    .content[b-t8ejg9223z] {
        padding: var(--space-5);
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.site-header[b-h4impxieni] {
    position: sticky;
    top: 0;
    z-index: 40;
    background: linear-gradient(180deg, var(--color-canopy-900) 0%, var(--color-canopy-700) 100%);
    box-shadow: var(--shadow-md);
}

.site-header-inner[b-h4impxieni] {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0.6rem var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.brand[b-h4impxieni] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.brand:hover[b-h4impxieni] {
    color: var(--color-leaf-300);
}

.brand[b-h4impxieni]  .mascot-img {
    width: 2.4rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

.nav-toggle[b-h4impxieni] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 2.4rem;
    height: 2.4rem;
    background: rgba(255, 255, 255, 0.14);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    margin-left: auto;
    padding: 0;
}

.nav-toggle span[b-h4impxieni] {
    display: block;
    height: 2px;
    margin: 0 6px;
    background: white;
    border-radius: 2px;
}

.main-nav[b-h4impxieni] {
    display: none;
}

/* .nav-link est posé sur des <NavLink> (rendus par un composant enfant) : sans ::deep, Blazor
   n'applique pas ces règles scopées à leur balise <a>, et le texte hérite du style global des
   liens — d'où le vert-sur-vert illisible constaté. */
.main-nav[b-h4impxieni]  .nav-link,
.nav-account-trigger[b-h4impxieni] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    border-radius: var(--radius-pill);
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    background: transparent;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.main-nav[b-h4impxieni]  .nav-link:hover,
.nav-account-trigger:hover[b-h4impxieni] {
    background: rgba(255, 255, 255, 0.16);
    color: white;
}

.main-nav[b-h4impxieni]  .nav-link.active {
    background: var(--color-leaf-500);
    color: white;
    box-shadow: var(--shadow-sm);
}

.chevron[b-h4impxieni] {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.8;
    transition: transform var(--transition-fast);
}

/*
 * Le libellé (NavLink) et la flèche sont deux zones cliquables distinctes : cliquer "Classements"
 * navigue directement sans ouvrir le sous-menu au passage — seule la flèche (au survol/focus) ouvre
 * le panneau. Le menu Compte n'a pas cette ambiguïté (pas de destination propre), il s'ouvre au
 * survol de tout le déclencheur.
 */
.nav-chevron-btn[b-h4impxieni] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    margin-left: -0.4rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.nav-chevron-btn:hover[b-h4impxieni],
.nav-chevron-btn:focus-visible[b-h4impxieni] {
    background: rgba(255, 255, 255, 0.16);
    color: white;
}

.nav-account-trigger:hover .chevron[b-h4impxieni],
.nav-account-trigger:focus-visible .chevron[b-h4impxieni] {
    transform: rotate(180deg);
}

.nav-account-trigger[b-h4impxieni] {
    padding: 0.35rem 0.8rem 0.35rem 0.35rem;
}

.nav-account-trigger[b-h4impxieni]  .mascot-img {
    width: 2.1rem;
    filter: none;
}

/* Panneau déroulant — carte flottante avec petite flèche pointant vers le déclencheur */
.nav-dropdown-panel[b-h4impxieni] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    background: var(--color-paper);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lift);
    border: 1px solid rgba(20, 48, 31, 0.08);
    padding: 0.5rem;
    min-width: 13rem;
}

.nav-dropdown-panel[b-h4impxieni]::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 1.5rem;
    width: 12px;
    height: 12px;
    background: var(--color-paper);
    border-left: 1px solid rgba(20, 48, 31, 0.08);
    border-top: 1px solid rgba(20, 48, 31, 0.08);
    transform: rotate(45deg);
    border-radius: 2px 0 0 0;
}

.nav-dropdown-panel--right[b-h4impxieni]::before {
    left: auto;
    right: 1.5rem;
}

.main-nav[b-h4impxieni]  .nav-dropdown-item,
.nav-dropdown-item[b-h4impxieni] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem 0.6rem 1rem;
    border-radius: var(--radius-sm);
    color: var(--color-ink-900);
    font-weight: 600;
    font-size: 0.9rem;
    background: transparent;
    border: none;
    text-align: left;
    text-decoration: none;
    width: 100%;
    cursor: pointer;
    font-family: var(--font-body);
    transition: background-color var(--transition-fast), padding-left var(--transition-fast);
}

.main-nav[b-h4impxieni]  .nav-dropdown-item::before,
.nav-dropdown-item[b-h4impxieni]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35rem;
    bottom: 0.35rem;
    width: 3px;
    border-radius: var(--radius-pill);
    background: var(--color-leaf-500);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.main-nav[b-h4impxieni]  .nav-dropdown-item:hover,
.nav-dropdown-item:hover[b-h4impxieni] {
    background: var(--color-moss-100);
    color: var(--color-canopy-900);
    padding-left: 1.15rem;
}

.main-nav[b-h4impxieni]  .nav-dropdown-item:hover::before,
.nav-dropdown-item:hover[b-h4impxieni]::before {
    opacity: 1;
}

.item-icon[b-h4impxieni] {
    font-size: 1rem;
}

.nav-auth[b-h4impxieni] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-auth[b-h4impxieni]  .nav-cta {
    padding: 0.5rem 1.1rem;
    font-size: 0.9rem;
}

@media (max-width: 959.98px) {
    .main-nav.is-open[b-h4impxieni] {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-canopy-700);
        padding: var(--space-2) var(--space-3) var(--space-3);
        box-shadow: var(--shadow-lift);
        max-height: calc(100vh - var(--topbar-height));
        overflow-y: auto;
    }

    .main-nav .nav-dropdown-panel[b-h4impxieni] {
        position: static;
        box-shadow: none;
        border: none;
        background: rgba(255, 255, 255, 0.08);
        margin: 0 0 0.3rem 0.75rem;
    }

    .main-nav .nav-dropdown-panel[b-h4impxieni]::before {
        display: none;
    }

    /* Sous-menus toujours dépliés à plat sur mobile — la flèche n'a pas d'utilité ici */
    .nav-chevron-btn[b-h4impxieni] {
        display: none;
    }

    .main-nav[b-h4impxieni]  .nav-dropdown-item,
    .main-nav .nav-dropdown-item[b-h4impxieni] {
        color: rgba(255, 255, 255, 0.85);
    }

    .main-nav[b-h4impxieni]  .nav-dropdown-item:hover,
    .main-nav .nav-dropdown-item:hover[b-h4impxieni] {
        background: rgba(255, 255, 255, 0.14);
        color: white;
    }

    .nav-dropdown[b-h4impxieni] {
        display: flex;
        flex-direction: column;
    }

    .nav-auth[b-h4impxieni] {
        flex-direction: column;
        align-items: stretch;
        margin-top: var(--space-2);
        padding-top: var(--space-2);
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }

    .nav-account-trigger[b-h4impxieni] {
        justify-content: flex-start;
    }
}

@media (min-width: 960px) {
    .nav-toggle[b-h4impxieni] {
        display: none;
    }

    .main-nav[b-h4impxieni] {
        display: flex;
        align-items: center;
        gap: 0.2rem;
        flex: 1;
    }

    .nav-dropdown[b-h4impxieni] {
        position: relative;
    }

    .nav-dropdown-panel[b-h4impxieni] {
        position: absolute;
        top: calc(100% + 0.7rem);
        left: 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px) scale(0.98);
        transform-origin: top left;
        transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
    }

    .nav-dropdown-panel--right[b-h4impxieni] {
        left: auto;
        right: 0;
        transform-origin: top right;
    }

    /* Sous-menus Jeux/Classements/Clans/Boutique : uniquement la flèche ouvre (cf. commentaire plus haut) */
    .nav-chevron-btn:hover ~ .nav-dropdown-panel[b-h4impxieni],
    .nav-chevron-btn:focus-visible ~ .nav-dropdown-panel[b-h4impxieni],
    .nav-dropdown-panel:hover[b-h4impxieni],
    .nav-dropdown-panel:focus-within[b-h4impxieni] {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    /* Menu Compte : pas de destination propre, tout le déclencheur ouvre au survol/focus */
    .nav-account:hover .nav-dropdown-panel[b-h4impxieni],
    .nav-account:focus-within .nav-dropdown-panel[b-h4impxieni] {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    .nav-auth[b-h4impxieni] {
        margin-left: auto;
    }
}
/* /Layout/NotificationBell.razor.rz.scp.css */
/*
 * Composant autonome : les classes .nav-dropdown/.nav-account de NavMenu.razor.css ne
 * s'appliquent pas ici (CSS scopée par fichier), donc on redéfinit le même langage visuel
 * (bouton pilule + panneau flottant au survol) en local plutôt que d'en dépendre.
 * .icon-trigger/.icon-badge (bouton rond + pastille) sont globaux (components.css), partagés
 * avec l'icône Messages de la bannière.
 */
.notif-bell[b-1wntqhaen4] {
    position: relative;
}

.notif-panel[b-1wntqhaen4] {
    position: absolute;
    top: calc(100% + 0.7rem);
    right: 0;
    width: 20rem;
    max-width: 85vw;
    max-height: 22rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    background: var(--color-paper);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lift);
    border: 1px solid rgba(20, 48, 31, 0.08);
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
    z-index: 50;
}

.notif-bell:hover .notif-panel[b-1wntqhaen4],
.notif-bell:focus-within .notif-panel[b-1wntqhaen4] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.notif-item[b-1wntqhaen4] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.6rem 0.7rem;
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    text-align: left;
    width: 100%;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-ink-900);
    transition: background-color var(--transition-fast);
}

.notif-item:hover[b-1wntqhaen4] {
    background: var(--color-moss-100);
}

.notif-item--unread[b-1wntqhaen4] {
    font-weight: 700;
}

.notif-dot[b-1wntqhaen4] {
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.35rem;
    border-radius: 50%;
    background: transparent;
}

.notif-item--unread .notif-dot[b-1wntqhaen4] {
    background: var(--color-leaf-500);
}

.notif-empty[b-1wntqhaen4] {
    padding: 0.9rem 0.7rem;
    color: var(--color-ink-600);
    font-size: 0.85rem;
    text-align: center;
}

/* .notif-see-all est posé sur un <NavLink> (composant enfant) : nécessite ::deep pour atteindre le <a> rendu. */
.notif-panel[b-1wntqhaen4]  .notif-see-all {
    margin-top: 0.2rem;
    border-top: 1px solid rgba(20, 48, 31, 0.08);
    padding-top: 0.6rem;
    display: block;
    text-align: center;
    text-decoration: none;
    color: var(--color-canopy-700);
    font-weight: 700;
    font-size: 0.85rem;
}

.notif-panel[b-1wntqhaen4]  .notif-see-all:hover {
    color: var(--color-canopy-900);
}
/* /Layout/PlayCounters.razor.rz.scp.css */
.play-counters[b-zdxk54wy1o] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.play-counter[b-zdxk54wy1o] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.14);
    color: white;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
}

.play-counter-icon[b-zdxk54wy1o] {
    font-size: 1.3rem;
    line-height: 1;
}

@media (max-width: 959.98px) {
    .play-counters[b-zdxk54wy1o] {
        order: -1;
        width: 100%;
        justify-content: center;
        margin-bottom: 0.4rem;
    }
}
/* /Pages/Clans/ClanDetailPage.razor.rz.scp.css */
.clan-header[b-khckzirk38] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.clan-header-info[b-khckzirk38] {
    flex: 1;
    min-width: 200px;
}

.clan-header-info h1[b-khckzirk38] {
    margin-bottom: 0.2rem;
}

.clan-header-info p[b-khckzirk38] {
    color: var(--color-ink-600);
}

/* flex-basis:100% dans .clan-header (flex-wrap:wrap) la fait passer sur sa propre ligne, sous la photo/le nom. */
.clan-description[b-khckzirk38] {
    flex-basis: 100%;
    padding-top: var(--space-2);
    border-top: 1px solid rgba(20, 48, 31, 0.08);
    color: var(--color-ink-900);
    font-size: 0.95rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.clan-photo--lg[b-khckzirk38] {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: var(--shadow-md);
    flex-shrink: 0;
}

.section-hint[b-khckzirk38] {
    color: var(--color-ink-600);
    font-size: 0.85rem;
    margin-top: -0.5rem;
}

.header-hint[b-khckzirk38] {
    margin-top: 0.4rem;
    font-size: 0.8rem;
}

.mission-list[b-khckzirk38], .member-list[b-khckzirk38] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: var(--space-2);
}

.member-row[b-khckzirk38] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.6rem 0.9rem;
    background: var(--color-moss-100);
    border-radius: var(--radius-md);
    flex-wrap: wrap;
}

/*
 * Grille à colonnes fixes : sans ça, la largeur des pastilles (score, récompense, statut)
 * varie avec leur propre texte et décale tout le bloc de droite d'une ligne à l'autre.
 * Des colonnes fixes garantissent l'alignement quel que soit le contenu.
 */
.mission-row[b-khckzirk38] {
    display: grid;
    grid-template-columns: 100px minmax(140px, 1fr) 100px 100px 160px;
    grid-template-areas: "difficulty title target reward status";
    align-items: center;
    column-gap: var(--space-2);
    padding: 0.6rem 0.9rem;
    background: var(--color-moss-100);
    border-radius: var(--radius-md);
}

/*
 * Positionnement par ordre (et non par classe) : le badge de difficulté "Facile"/"Moyen"
 * réutilise la classe .badge-k (même couleur que la récompense), donc cibler .badge-k
 * placerait les deux badges dans la même case de la grille.
 */
.mission-row > *:nth-child(1)[b-khckzirk38] {
    grid-area: difficulty;
    justify-content: center;
}

.mission-info[b-khckzirk38] {
    grid-area: title;
    display: flex;
    flex-direction: column;
}

.mission-row > *:nth-child(3)[b-khckzirk38] {
    grid-area: target;
    justify-content: center;
}

.mission-row > *:nth-child(4)[b-khckzirk38] {
    grid-area: reward;
    justify-content: center;
}

.mission-status[b-khckzirk38] {
    grid-area: status;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-canopy-700);
    text-align: right;
}

.member-pseudo[b-khckzirk38] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    flex: 1;
}

.member-pseudo-link[b-khckzirk38] {
    color: inherit;
    text-decoration: none;
}

.member-pseudo-link:hover[b-khckzirk38] {
    text-decoration: underline;
}

.member-row > .badge-k[b-khckzirk38] {
    min-width: 90px;
    justify-content: center;
    flex-shrink: 0;
}

.management-block[b-khckzirk38] {
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid rgba(111, 74, 44, 0.2);
}

.management-block:last-child[b-khckzirk38] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.management-block h3[b-khckzirk38] {
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.inline-field[b-khckzirk38] {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.inline-field input[b-khckzirk38] {
    flex: 1;
}

.btn.danger[b-khckzirk38] {
    color: var(--color-danger);
    border-color: var(--color-danger);
}

@media (max-width: 640.98px) {
    .mission-row[b-khckzirk38] {
        grid-template-columns: 88px 1fr;
        grid-template-areas:
            "difficulty title"
            "target reward"
            "status status";
        row-gap: 0.4rem;
    }

    .mission-row > *:nth-child(3)[b-khckzirk38],
    .mission-row > *:nth-child(4)[b-khckzirk38] {
        justify-self: start;
    }

    .mission-status[b-khckzirk38] {
        text-align: left;
    }
}
/* /Pages/Clans/ClanLeaderboard.razor.rz.scp.css */
.leaderboard-intro[b-3n4rv0tux1] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.leaderboard-intro p[b-3n4rv0tux1] {
    color: var(--color-ink-600);
    margin: 0;
}

.leaderboard-search-bar[b-3n4rv0tux1] {
    margin-bottom: var(--space-3);
}

.leaderboard-search-bar input[b-3n4rv0tux1] {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 0.65rem 1rem;
    border-radius: var(--radius-md);
    border: 2px solid var(--color-sand-200);
    background: var(--color-moss-50);
    color: var(--color-ink-900);
}

.leaderboard-search-bar input:focus[b-3n4rv0tux1] {
    border-color: var(--color-leaf-500);
    background: var(--color-paper);
    outline: none;
}

/*
 * Le défilement horizontal doit rester dans un conteneur interne : .card-leaf compte sur son
 * overflow:hidden pour masquer son halo décoratif qui dépasse volontairement du bord droit — lui
 * ajouter overflow-x:auto révélait ce halo comme un faux débordement (barre de défilement à vide).
 */
.leaderboard-table-scroll[b-3n4rv0tux1] {
    overflow-x: auto;
}

.leaderboard-table[b-3n4rv0tux1] {
    width: 100%;
    border-collapse: collapse;
    min-width: 32rem;
}

.leaderboard-table th[b-3n4rv0tux1] {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid rgba(20, 48, 31, 0.1);
}

.sort-btn[b-3n4rv0tux1] {
    border: none;
    background: transparent;
    padding: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-canopy-900);
    cursor: pointer;
    white-space: nowrap;
}

.leaderboard-row[b-3n4rv0tux1] {
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.leaderboard-row:hover[b-3n4rv0tux1] {
    background: var(--color-moss-100);
}

.leaderboard-row td[b-3n4rv0tux1] {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(20, 48, 31, 0.06);
}

.leaderboard-row--gold[b-3n4rv0tux1] {
    background: linear-gradient(90deg, rgba(224, 170, 46, 0.16), transparent);
}

.leaderboard-row--silver[b-3n4rv0tux1] {
    background: linear-gradient(90deg, rgba(148, 158, 150, 0.18), transparent);
}

.leaderboard-row--bronze[b-3n4rv0tux1] {
    background: linear-gradient(90deg, rgba(168, 105, 51, 0.16), transparent);
}

.col-rank[b-3n4rv0tux1] {
    width: 3rem;
}

.col-members[b-3n4rv0tux1] {
    width: 6rem;
}

.col-points[b-3n4rv0tux1] {
    width: 9rem;
}

.podium-medal[b-3n4rv0tux1] {
    font-size: 1.3rem;
}

.rank-number[b-3n4rv0tux1] {
    color: var(--color-ink-600);
    font-weight: 700;
    font-size: 0.85rem;
}

.leaderboard-clan[b-3n4rv0tux1] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
}

.leaderboard-avatar[b-3n4rv0tux1] {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    font-size: 1rem;
}

.leaderboard-sentinel[b-3n4rv0tux1] {
    display: flex;
    justify-content: center;
    padding: var(--space-3) 0 0.2rem;
}

.leaderboard-loading[b-3n4rv0tux1] {
    font-size: 0.85rem;
    color: var(--color-ink-600);
}
/* /Pages/Clans/ClanSearch.razor.rz.scp.css */
.clans-intro[b-ye388kni8z] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.clans-intro p[b-ye388kni8z] {
    color: var(--color-ink-600);
    margin: 0;
}

.my-clan-banner[b-ye388kni8z] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}

.my-clan-banner-info[b-ye388kni8z] {
    flex: 1;
}

.my-clan-banner-info p[b-ye388kni8z], .my-clan-banner h3[b-ye388kni8z] {
    margin: 0;
}

.search-bar[b-ye388kni8z] {
    margin-bottom: var(--space-3);
}

.search-bar input[b-ye388kni8z] {
    width: 100%;
    max-width: 24rem;
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 0.65rem 1rem;
    border-radius: var(--radius-pill);
    border: 2px solid var(--color-sand-200);
    background: var(--color-paper);
}

.search-bar input:focus[b-ye388kni8z] {
    border-color: var(--color-leaf-500);
    outline: none;
}

.empty-state[b-ye388kni8z] {
    color: var(--color-ink-600);
    font-style: italic;
}

.clans-grid[b-ye388kni8z] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-3);
}

.clan-card[b-ye388kni8z] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-ink-900);
}

.clan-card:hover[b-ye388kni8z] {
    color: var(--color-ink-900);
}

.clan-card h3[b-ye388kni8z] {
    margin: 0 0 0.2rem;
}

.clan-photo[b-ye388kni8z] {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

/* Rang du clan (classement inter-clans) — .card-wood est déjà position:relative, sert d'ancrage. */
.clan-rank-badge[b-ye388kni8z] {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9rem;
    height: 1.9rem;
    padding: 0 0.4rem;
    border-radius: var(--radius-pill);
    font-size: 1rem;
    font-weight: 800;
    box-shadow: var(--shadow-sm);
    z-index: 1;
}

.clan-rank-badge--1[b-ye388kni8z] {
    background: linear-gradient(135deg, var(--color-gold-300), var(--color-gold-500));
}

.clan-rank-badge--2[b-ye388kni8z] {
    background: linear-gradient(135deg, #e3e7e4, #b7c0ba);
}

.clan-rank-badge--3[b-ye388kni8z] {
    background: linear-gradient(135deg, var(--color-bark-400), var(--color-bark-600));
}

.clan-rank-badge--plain[b-ye388kni8z] {
    background: var(--color-moss-100);
    color: var(--color-ink-600);
    font-size: 0.8rem;
}
/* /Pages/Home.razor.rz.scp.css */
.hero[b-urtwhqk5ss] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.section-divider[b-urtwhqk5ss] {
    height: 48px;
    margin: var(--space-2) calc(var(--space-4) * -1) 0;
    background-image: url("img/decor/wave.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

@media (min-width: 641px) {
    .section-divider[b-urtwhqk5ss] {
        margin: var(--space-3) calc(var(--space-5) * -1) 0;
        height: 64px;
    }
}

.hero h1[b-urtwhqk5ss] {
    margin-bottom: 0.4rem;
}

.hero p[b-urtwhqk5ss] {
    color: var(--color-ink-600);
    max-width: 42ch;
}

.hero-actions[b-urtwhqk5ss] {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
    flex-wrap: wrap;
}

@media (max-width: 640.98px) {
    .hero[b-urtwhqk5ss] {
        flex-direction: column;
        text-align: center;
    }
}

.dashboard-grid[b-urtwhqk5ss] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
}

.dashboard-card[b-urtwhqk5ss] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}

.dashboard-card h3[b-urtwhqk5ss] {
    margin: 0;
}

.dashboard-card p[b-urtwhqk5ss] {
    color: var(--color-ink-600);
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
}

.dashboard-card--cta[b-urtwhqk5ss] {
    justify-content: space-between;
}
/* /Pages/Messages.razor.rz.scp.css */
/*
 * Disposition à deux volets (liste + fil de discussion), classique pour une messagerie. Sur desktop
 * les deux volets sont visibles côte à côte ; sur mobile un seul à la fois (la classe .has-selection,
 * posée dès qu'une conversation est ouverte ou en cours de composition, bascule de l'un à l'autre).
 */
.messages-layout[b-5dcdeukpal] {
    display: flex;
    gap: var(--space-3);
    height: calc(100vh - var(--topbar-height) - (var(--space-4) * 2));
    min-height: 26rem;
}

.messages-list-pane[b-5dcdeukpal] {
    display: flex;
    flex-direction: column;
    width: 22rem;
    flex-shrink: 0;
    background: var(--color-paper);
    border-radius: var(--radius-md);
    border: 1px solid rgba(20, 48, 31, 0.08);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.messages-search[b-5dcdeukpal] {
    position: relative;
    padding: var(--space-3);
    border-bottom: 1px solid rgba(20, 48, 31, 0.08);
}

.messages-search input[b-5dcdeukpal] {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius-md);
    border: 2px solid var(--color-sand-200);
    background: var(--color-moss-50);
    color: var(--color-ink-900);
}

.messages-search input:focus[b-5dcdeukpal] {
    border-color: var(--color-leaf-500);
    background: var(--color-paper);
    outline: none;
}

.messages-search-results[b-5dcdeukpal] {
    position: absolute;
    left: var(--space-3);
    right: var(--space-3);
    top: calc(100% - 0.4rem);
    background: var(--color-paper);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lift);
    border: 1px solid rgba(20, 48, 31, 0.08);
    padding: 0.4rem;
    z-index: 20;
    max-height: 16rem;
    overflow-y: auto;
}

.messages-search-result[b-5dcdeukpal] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-ink-900);
    text-align: left;
    cursor: pointer;
}

.messages-search-result:hover[b-5dcdeukpal] {
    background: var(--color-moss-100);
}

.conversation-list[b-5dcdeukpal] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.messages-list-pane .empty-state[b-5dcdeukpal] {
    text-align: center;
    padding: var(--space-4) var(--space-3);
    color: var(--color-ink-600);
}

.conversation-row[b-5dcdeukpal] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem var(--space-3);
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid rgba(20, 48, 31, 0.06);
    position: relative;
    transition: background-color var(--transition-fast);
}

.conversation-row:hover[b-5dcdeukpal] {
    background: var(--color-moss-100);
}

.conversation-row.is-active[b-5dcdeukpal] {
    background: var(--color-moss-100);
    box-shadow: inset 3px 0 0 var(--color-leaf-500);
}

.conversation-row-text[b-5dcdeukpal] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.conversation-row-text strong[b-5dcdeukpal] {
    font-size: 0.9rem;
}

.conversation-row--unread .conversation-row-text strong[b-5dcdeukpal] {
    color: var(--color-canopy-900);
}

.conversation-preview[b-5dcdeukpal] {
    font-size: 0.8rem;
    color: var(--color-ink-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-row--unread .conversation-preview[b-5dcdeukpal] {
    color: var(--color-ink-900);
    font-weight: 600;
}

.conversation-unread-badge[b-5dcdeukpal] {
    position: static;
    box-shadow: none;
    color: white;
    flex-shrink: 0;
}

.messages-thread-pane[b-5dcdeukpal] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-paper);
    border-radius: var(--radius-md);
    border: 1px solid rgba(20, 48, 31, 0.08);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.messages-thread-header[b-5dcdeukpal] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: var(--space-3);
    border-bottom: 1px solid rgba(20, 48, 31, 0.08);
}

.messages-thread-header h2[b-5dcdeukpal] {
    margin: 0;
    flex: 1;
    font-size: 1.1rem;
}

.messages-thread-header h2 a[b-5dcdeukpal] {
    color: inherit;
    text-decoration: none;
}

.messages-thread-header h2 a:hover[b-5dcdeukpal] {
    text-decoration: underline;
}

.messages-back[b-5dcdeukpal] {
    display: none;
    color: var(--color-canopy-700);
    text-decoration: none;
    font-size: 1.3rem;
    line-height: 1;
}

.messages-delete-btn[b-5dcdeukpal] {
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--color-moss-100);
    color: var(--color-ink-600);
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.messages-delete-btn:hover[b-5dcdeukpal] {
    background: rgba(194, 59, 59, 0.14);
    color: var(--color-danger);
    transform: scale(1.08);
}

.messages-thread[b-5dcdeukpal] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: var(--space-3);
}

.message-bubble[b-5dcdeukpal] {
    max-width: 70%;
    padding: 0.55rem 0.85rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    line-height: 1.4;
}

.message-bubble p[b-5dcdeukpal] {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.message-bubble--theirs[b-5dcdeukpal] {
    align-self: flex-start;
    background: var(--color-moss-100);
    color: var(--color-ink-900);
    border-bottom-left-radius: 0.25rem;
}

.message-bubble--mine[b-5dcdeukpal] {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--color-leaf-300), var(--color-leaf-500));
    color: var(--color-canopy-900);
    border-bottom-right-radius: 0.25rem;
}

.message-time[b-5dcdeukpal] {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.7rem;
    opacity: 0.7;
}

.messages-compose[b-5dcdeukpal] {
    display: flex;
    gap: 0.6rem;
    align-items: flex-end;
    padding: var(--space-3);
    border-top: 1px solid rgba(20, 48, 31, 0.08);
}

.messages-compose textarea[b-5dcdeukpal] {
    flex: 1;
    resize: none;
    min-height: 2.6rem;
    max-height: 8rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius-md);
    border: 2px solid var(--color-sand-200);
    background: var(--color-moss-50);
    color: var(--color-ink-900);
}

.messages-compose textarea:focus[b-5dcdeukpal] {
    border-color: var(--color-leaf-500);
    background: var(--color-paper);
    outline: none;
}

.messages-empty-selection[b-5dcdeukpal] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    color: var(--color-ink-600);
    text-align: center;
    padding: var(--space-4);
}

@media (max-width: 900px) {
    .messages-layout[b-5dcdeukpal] {
        height: calc(100vh - var(--topbar-height) - var(--space-4));
    }

    .messages-list-pane[b-5dcdeukpal] {
        width: 100%;
    }

    .messages-thread-pane[b-5dcdeukpal] {
        display: none;
    }

    .messages-layout.has-selection .messages-list-pane[b-5dcdeukpal] {
        display: none;
    }

    .messages-layout.has-selection .messages-thread-pane[b-5dcdeukpal] {
        display: flex;
    }

    .messages-back[b-5dcdeukpal] {
        display: inline-flex;
    }
}
/* /Pages/Notifications.razor.rz.scp.css */
.notif-page-header[b-uzl66ebvfn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}

.notif-page-actions[b-uzl66ebvfn] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btn.danger[b-uzl66ebvfn] {
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.notif-row[b-uzl66ebvfn] {
    cursor: pointer;
}

.notif-row--unread[b-uzl66ebvfn] {
    border-color: var(--color-leaf-500);
    box-shadow: inset 3px 0 0 var(--color-leaf-500);
}

.notif-time[b-uzl66ebvfn] {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--color-ink-600);
    font-weight: 400;
}

.notif-unread-dot[b-uzl66ebvfn] {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--color-leaf-500);
    flex-shrink: 0;
}

.notif-delete-btn[b-uzl66ebvfn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    flex-shrink: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-ink-600);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.notif-delete-btn:hover[b-uzl66ebvfn] {
    background: rgba(194, 59, 59, 0.12);
    color: var(--color-danger);
}
/* /Pages/PlayerLeaderboard.razor.rz.scp.css */
.leaderboard-intro[b-6ahsf4e12w] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.leaderboard-intro p[b-6ahsf4e12w] {
    color: var(--color-ink-600);
    margin: 0;
}

.leaderboard-search-bar[b-6ahsf4e12w] {
    margin-bottom: var(--space-3);
}

.leaderboard-search-bar input[b-6ahsf4e12w] {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 0.65rem 1rem;
    border-radius: var(--radius-md);
    border: 2px solid var(--color-sand-200);
    background: var(--color-moss-50);
    color: var(--color-ink-900);
}

.leaderboard-search-bar input:focus[b-6ahsf4e12w] {
    border-color: var(--color-leaf-500);
    background: var(--color-paper);
    outline: none;
}

/*
 * Le défilement horizontal reste dans un conteneur interne : .card-leaf compte sur son
 * overflow:hidden pour masquer son halo décoratif (voir même piège rencontré sur le classement
 * de clan) — lui ajouter overflow-x:auto directement révélerait ce halo comme faux débordement.
 */
.leaderboard-table-wrap[b-6ahsf4e12w] {
}

.leaderboard-table-scroll[b-6ahsf4e12w] {
    overflow-x: auto;
}

.leaderboard-table[b-6ahsf4e12w] {
    width: 100%;
    border-collapse: collapse;
    min-width: 40rem;
}

.leaderboard-table th[b-6ahsf4e12w] {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid rgba(20, 48, 31, 0.1);
}

.sort-btn[b-6ahsf4e12w] {
    border: none;
    background: transparent;
    padding: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-canopy-900);
    cursor: pointer;
    white-space: nowrap;
}

.leaderboard-row[b-6ahsf4e12w] {
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.leaderboard-row:hover[b-6ahsf4e12w] {
    background: var(--color-moss-100);
}

.leaderboard-row td[b-6ahsf4e12w] {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(20, 48, 31, 0.06);
}

.leaderboard-row--gold[b-6ahsf4e12w] {
    background: linear-gradient(90deg, rgba(224, 170, 46, 0.16), transparent);
}

.leaderboard-row--silver[b-6ahsf4e12w] {
    background: linear-gradient(90deg, rgba(148, 158, 150, 0.18), transparent);
}

.leaderboard-row--bronze[b-6ahsf4e12w] {
    background: linear-gradient(90deg, rgba(168, 105, 51, 0.16), transparent);
}

/* Ligne du joueur connecté — un liseré vert distinct des dégradés or/argent/bronze, cumulable avec eux. */
.leaderboard-row--me[b-6ahsf4e12w] {
    box-shadow: inset 3px 0 0 var(--color-leaf-500);
}

.leaderboard-me-pseudo[b-6ahsf4e12w] {
    color: var(--color-leaf-500);
    font-weight: 800;
}

.col-rank[b-6ahsf4e12w] {
    width: 3rem;
}

.col-clan[b-6ahsf4e12w] {
    width: 10rem;
}

.col-score[b-6ahsf4e12w] {
    width: 9rem;
}

.col-actions[b-6ahsf4e12w] {
    width: 6rem;
}

.podium-medal[b-6ahsf4e12w] {
    font-size: 1.3rem;
}

.rank-number[b-6ahsf4e12w] {
    color: var(--color-ink-600);
    font-weight: 700;
    font-size: 0.85rem;
}

.leaderboard-player[b-6ahsf4e12w] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
}

.no-clan[b-6ahsf4e12w] {
    color: var(--color-ink-600);
    font-size: 0.85rem;
    font-style: italic;
}

.leaderboard-actions[b-6ahsf4e12w] {
    display: flex;
    gap: 0.35rem;
    justify-content: flex-end;
}

.row-action-btn[b-6ahsf4e12w] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: var(--color-moss-100);
    cursor: pointer;
    font-size: 0.95rem;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.row-action-btn:hover:not(:disabled)[b-6ahsf4e12w] {
    background: var(--color-leaf-300);
    transform: scale(1.08);
}

.row-action-btn:disabled[b-6ahsf4e12w] {
    cursor: default;
    opacity: 0.7;
}

.leaderboard-sentinel[b-6ahsf4e12w] {
    display: flex;
    justify-content: center;
    padding: var(--space-3) 0 0.2rem;
}

.leaderboard-loading[b-6ahsf4e12w] {
    font-size: 0.85rem;
    color: var(--color-ink-600);
}
/* /Pages/PlayerProfilePage.razor.rz.scp.css */
.player-header[b-0gbkxults8] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}

.player-header-info[b-0gbkxults8] {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.player-header-info h1[b-0gbkxults8] {
    margin: 0;
}

.player-name--me[b-0gbkxults8] {
    color: var(--color-leaf-500);
}

.no-clan[b-0gbkxults8] {
    color: var(--color-ink-600);
    font-size: 0.85rem;
    font-style: italic;
}

.player-clan-link[b-0gbkxults8] {
    text-decoration: none;
}

/* flex-basis:100% dans .player-header (flex-wrap:wrap) la fait passer sur sa propre ligne, sous la photo/le nom — même pattern que .clan-description. */
.player-description[b-0gbkxults8] {
    flex-basis: 100%;
    padding-top: var(--space-2);
    border-top: 1px solid rgba(20, 48, 31, 0.08);
    color: var(--color-ink-900);
    font-size: 0.95rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.player-actions[b-0gbkxults8] {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.3rem;
}

.player-games h2[b-0gbkxults8] {
    margin-top: 0;
    font-size: 1.1rem;
}

.player-game-list[b-0gbkxults8] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.player-game-row[b-0gbkxults8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.9rem;
    background: var(--color-moss-100);
    border-radius: var(--radius-md);
}
/* /Pages/PlayerSearch.razor.rz.scp.css */
.player-search-intro[b-3k3q1i82bj] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.player-search-intro p[b-3k3q1i82bj] {
    color: var(--color-ink-600);
    margin: 0;
}

.player-search-bar[b-3k3q1i82bj] {
    margin-bottom: var(--space-3);
}

.player-search-bar input[b-3k3q1i82bj] {
    width: 100%;
    max-width: 24rem;
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 0.65rem 1rem;
    border-radius: var(--radius-pill);
    border: 2px solid var(--color-sand-200);
    background: var(--color-paper);
}

.player-search-bar input:focus[b-3k3q1i82bj] {
    border-color: var(--color-leaf-500);
    outline: none;
}

.player-search-results[b-3k3q1i82bj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-3);
}

.player-search-result[b-3k3q1i82bj] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-ink-900);
}

.player-search-result:hover[b-3k3q1i82bj] {
    color: var(--color-ink-900);
}
/* /Pages/Profil.razor.rz.scp.css */
.profile-header[b-atsm1csomd] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}

.profile-photo-block[b-atsm1csomd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.profile-header-info[b-atsm1csomd] {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.profile-header-info h1[b-atsm1csomd] {
    margin: 0;
}

.no-clan[b-atsm1csomd] {
    color: var(--color-ink-600);
    font-size: 0.85rem;
    font-style: italic;
}

.player-clan-link[b-atsm1csomd] {
    text-decoration: none;
}

/* Bornée + scrollable : l'historique d'achats grossit sans limite avec le temps (server-side plafonné à 50, voir StoreController), pas question de laisser la carte grandir à l'infini avec elle. */
.purchase-list[b-atsm1csomd] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: var(--space-2);
    max-height: 24rem;
    overflow-y: auto;
    padding-right: 0.3rem;
}

.purchase-row[b-atsm1csomd] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.6rem 0.9rem;
    background: var(--color-moss-100);
    border-radius: var(--radius-md);
    flex-wrap: wrap;
}

.purchase-info[b-atsm1csomd] {
    flex: 1;
    min-width: 10rem;
    display: flex;
    flex-direction: column;
}

.purchase-date[b-atsm1csomd] {
    font-size: 0.8rem;
    color: var(--color-ink-600);
}

.purchase-method[b-atsm1csomd] {
    font-size: 0.85rem;
    color: var(--color-ink-600);
}

.purchase-amount[b-atsm1csomd] {
    font-weight: 700;
    color: var(--color-canopy-900);
}
/* /Pages/Recharge.razor.rz.scp.css */
.store-intro[b-r0i42kcbn9] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}

.store-intro p[b-r0i42kcbn9] {
    color: var(--color-ink-600);
    margin: 0.3rem 0 0.6rem;
}

.pack-grid[b-r0i42kcbn9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.pack-card[b-r0i42kcbn9] {
    position: relative;
    cursor: pointer;
    text-align: center;
    border: 2px solid transparent;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.pack-card:hover[b-r0i42kcbn9] {
    transform: translateY(-2px);
}

.pack-card--selected[b-r0i42kcbn9] {
    border-color: var(--color-leaf-500);
}

.pack-badge[b-r0i42kcbn9] {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-paper);
    background: linear-gradient(135deg, var(--color-ember-400), var(--color-ember-600));
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-pill);
}

.pack-card h2[b-r0i42kcbn9] {
    margin: 0.4rem 0 0.2rem;
    font-size: 1.1rem;
}

.pack-credits[b-r0i42kcbn9] {
    color: var(--color-ink-600);
    margin: 0 0 0.4rem;
}

.pack-price[b-r0i42kcbn9] {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--color-canopy-900);
    margin: 0;
}

.payment-section h2[b-r0i42kcbn9] {
    margin-top: 0;
    font-size: 1.1rem;
}

.payment-methods[b-r0i42kcbn9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.payment-method-row[b-r0i42kcbn9] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    min-height: 2.6rem;
}

.payment-hint[b-r0i42kcbn9] {
    font-size: 0.8rem;
    color: var(--color-ink-600);
    font-style: italic;
}

.paypal-container[b-r0i42kcbn9] {
    width: 100%;
    max-width: 20rem;
}

.modal-backdrop[b-r0i42kcbn9] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 32, 20, 0.55);
    padding: var(--space-4);
    z-index: 200;
}

.modal-card[b-r0i42kcbn9] {
    width: 100%;
    max-width: 26rem;
}

.modal-card h2[b-r0i42kcbn9] {
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.modal-actions[b-r0i42kcbn9] {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: var(--space-2);
}

@media (max-width: 480px) {
    .modal-actions[b-r0i42kcbn9] {
        flex-direction: column-reverse;
    }

    .modal-actions .btn[b-r0i42kcbn9] {
        width: 100%;
    }
}
/* /Pages/RechargeSucces.razor.rz.scp.css */
.store-result[b-w4zpdex9xv] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.store-result h1[b-w4zpdex9xv] {
    margin: 0 0 0.4rem;
}

.store-result p[b-w4zpdex9xv] {
    color: var(--color-ink-600);
    margin: 0 0 0.8rem;
}