/* _content/RavenDungeon/Components/Layout/CultureFlag.razor.rz.scp.css */
/* Le drapeau remplit la vignette que lui donne son appelant : la taille ne se décide pas ici */
.flag[b-atnw88mq5x] {
    display: block;
    width: 100%;
    height: 100%;
}

.flag-fallback[b-atnw88mq5x] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: .65rem;
    font-weight: 700;
    color: var(--rd-text);
    background: var(--rd-surface-raised);
}
/* _content/RavenDungeon/Components/Layout/MainLayout.razor.rz.scp.css */
/* ==========================================================
   STRUCTURE DE PAGE

   Les règles de .top-row ont disparu avec la barre supérieure : elle était vide et ne
   servait qu'à réserver 3,5 rem sur chaque page. Attention, NavMenu garde SA propre
   .top-row, qui porte le nom du jeu — ce n'est pas la même.
   ========================================================== */

.page[b-agwclskry5] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-agwclskry5] {
    flex: 1;
    min-width: 0;
}

/*
    Barre latérale : dégradé du violet arcane vers le fond de page, et filet doré côté
    contenu — le seul trait d'or permanent de l'interface, qui pose l'identité sans
    concurrencer les actions.
*/
.sidebar[b-agwclskry5] {
    background-image: linear-gradient(180deg, var(--rd-arcane) 0%, var(--rd-bg) 75%);
    border-right: 1px solid var(--rd-border-soft);
    box-shadow: inset -1px 0 0 rgba(214, 158, 46, .25);
}

article[b-agwclskry5] {
    padding: 2rem 1.5rem;
}

    /*
        Le plateau de jeu occupe toute la surface : il pose sa propre mise en page et ses
        propres marges, celles de l'article le décaleraient.
    */
    article.full-bleed[b-agwclskry5] {
        padding: 0;
    }

@media (min-width: 641px) {
    .page[b-agwclskry5] {
        flex-direction: row;
    }

    .sidebar[b-agwclskry5] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    article[b-agwclskry5] {
        padding: 2.5rem 2rem;
    }

        article.full-bleed[b-agwclskry5] {
            padding: 0;
        }
}

/* ==========================================================
   BANDEAU D'ERREUR
   ========================================================== */

#blazor-error-ui[b-agwclskry5] {
    background: var(--rd-surface-raised);
    color: var(--rd-text);
    border-top: 1px solid var(--rd-danger);
    bottom: 0;
    box-shadow: 0 -1px 12px rgba(0, 0, 0, .5);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-agwclskry5] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/RavenDungeon/Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-ur64fbbvrt] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-ur64fbbvrt] {
    background-color: rgba(255, 255, 255, 0.5);
}

/*
    Enseigne du jeu, en haut de la barre latérale.
    À ne pas confondre avec la .top-row de MainLayout, qui a été supprimée : celle-ci
    porte le nom du jeu et reste.
*/
.top-row[b-ur64fbbvrt] {
    height: 3.5rem;
    background-color: rgba(0, 0, 0, .35);
    border-bottom: 1px solid var(--rd-border-soft);
}

.navbar-brand[b-ur64fbbvrt] {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--rd-font-display);
    font-size: 1.25rem;
    letter-spacing: .04em;
    color: var(--rd-text);
}

    .navbar-brand:hover[b-ur64fbbvrt] {
        color: var(--rd-text);
        text-decoration: none;
    }

.brand-mark[b-ur64fbbvrt] {
    font-size: 1.4rem;
    line-height: 1;
    color: var(--rd-gold);
    /* Halo discret : la seule source de lumière de l'enseigne */
    text-shadow: 0 0 12px rgba(214, 158, 46, .55);
}

/* Deuxième moitié du nom en or : la coupure fait le logotype, sans image */
.brand-name-accent[b-ur64fbbvrt] {
    color: var(--rd-gold);
}

/*
    Sélecteur de langue : une bande sous l'enseigne, drapeaux à droite.

    La langue courante est pleine et cerclée d'or ; l'autre est estompée et se ravive au
    survol. Estompée et non cachée : c'est elle qu'on vient chercher.
*/
.lang-switch[b-ur64fbbvrt] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .6rem;
    height: 2.5rem;
    padding: 0 1rem;
    background-color: rgba(0, 0, 0, .2);
    border-bottom: 1px solid var(--rd-border-soft);
}

.lang-flag[b-ur64fbbvrt] {
    display: block;
    width: 1.8rem;
    height: 1.2rem;
    border-radius: 3px;
    overflow: hidden;
    opacity: .5;
    filter: grayscale(.5);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
    transition: opacity .15s, filter .15s, box-shadow .15s, transform .15s;
}

    .lang-flag:hover[b-ur64fbbvrt],
    .lang-flag:focus-visible[b-ur64fbbvrt] {
        opacity: 1;
        filter: none;
        transform: translateY(-1px);
        outline: none;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .6);
    }

    .lang-flag.active[b-ur64fbbvrt] {
        opacity: 1;
        filter: none;
        box-shadow: 0 0 0 2px var(--rd-gold);
    }

/*
    Sur mobile, la bande rejoint la barre du haut, à gauche du bouton de menu : elle y
    reste visible menu fermé, sans ajouter une ligne à l'en-tête.
*/
@media (max-width: 640.98px) {
    .lang-switch[b-ur64fbbvrt] {
        position: absolute;
        top: .5rem;
        right: 5.25rem;
        padding: 0;
        background: none;
        border: none;
    }
}

.bi[b-ur64fbbvrt] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-ur64fbbvrt] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-ur64fbbvrt] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-ur64fbbvrt] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-ur64fbbvrt] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-ur64fbbvrt] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-ur64fbbvrt] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-ur64fbbvrt] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-ur64fbbvrt] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

/*
    Intertitre « Mes parties ».

    Il sépare ce qui est PERMANENT — les pages du site — de ce qui va et vient : une partie
    apparaît quand on la rejoint et disparaît quand elle est purgée. Sans lui, un nom de
    partie se lirait comme une rubrique de plus.
*/
.nav-section-title[b-ur64fbbvrt] {
    font-size: 0.72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rd-text-muted);
    opacity: .65;
    margin-top: .5rem;
    padding-bottom: .35rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-top: .9rem;
}

/*
    Le nom d'une partie est saisi librement : il déborderait la barre latérale, qui a une
    largeur fixe. Il est donc coupé à l'ellipse, avec le nom complet en infobulle — même
    parti pris que pour les stats, dont le libellé revient au survol.
*/
.nav-game-name[b-ur64fbbvrt] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.nav-item[b-ur64fbbvrt] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-ur64fbbvrt] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-ur64fbbvrt] {
        padding-bottom: 1rem;
    }

    .nav-item[b-ur64fbbvrt]  .nav-link {
        color: var(--rd-text-muted);
        background: none;
        border: none;
        border-radius: var(--rd-radius);
        /*
            UNE HAUTEUR PLANCHER ET UN INTERLIGNE NORMAL, et non l'inverse.

            La hauteur et l'interligne valaient tous deux 3 rem : un libellé trop long pour
            la barre — 250 px, dont environ 170 restent au texte — passait à la ligne avec
            48 px entre les deux, et les deux lignes SORTAIENT d'une boîte qui en fait 48 en
            tout. C'est ce qu'a révélé « Créer une nouvelle partie », le premier libellé de
            ce menu à ne pas tenir sur une ligne.

            La centrage vertical était déjà fait par `align-items`, donc l'interligne n'y
            servait à rien ; une entrée d'une seule ligne ne bouge pas d'un pixel. Un nom de
            partie, lui, ne passe toujours pas à la ligne — `.nav-game-name` le coupe à
            l'ellipse, une donnée saisie n'ayant aucune longueur prévisible.
        */
        min-height: 3rem;
        display: flex;
        align-items: center;
        line-height: 1.25;
        width: 100%;
        /*
            Filet transparent réservé dès le repos : l'entrée active en reçoit un doré, et
            le texte ne se décale pas au changement de page.
        */
        border-left: 3px solid transparent;
        padding-left: .75rem;
        transition: background-color .15s, color .15s, border-color .15s;
    }

/*
    Page courante : filet doré et fond légèrement chaud, plutôt que le voile blanc du
    modèle de départ, qui délavait la barre latérale.
*/
.nav-item[b-ur64fbbvrt]  a.active {
    background-color: rgba(214, 158, 46, .12);
    border-left-color: var(--rd-gold);
    color: var(--rd-text);
}

.nav-item[b-ur64fbbvrt]  .nav-link:hover {
    background-color: rgba(255, 255, 255, .06);
    border-left-color: var(--rd-border);
    color: var(--rd-text);
}

.nav-scrollable[b-ur64fbbvrt] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-ur64fbbvrt] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-ur64fbbvrt] {
        display: none;
    }

    .nav-scrollable[b-ur64fbbvrt] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus — l'enseigne (3,5 rem) et la bande des langues (2,5 rem) déduites */
        height: calc(100vh - 6rem);
        overflow-y: auto;
    }
}
/* _content/RavenDungeon/Components/Pages/Home.razor.rz.scp.css */
/* ==========================================================
   ACCUEIL

   La page occupe toute la surface, comme le plateau (voir MainLayout) : l'illustration
   doit aller jusqu'aux bords, et les marges de l'article l'auraient encadrée.
   ========================================================== */

/*
    L'illustration est en fond, sous un voile qui s'assombrit vers le bas : le titre garde
    les torches derrière lui, le texte et les invitations se lisent sur du presque noir.
    Le chemin est relatif au paquet de styles isolés, servi à la racine du site.
*/
.home[b-mdknpn1q8h] {
    min-height: 100vh;
    padding: 3rem 1.5rem;
    background:
        linear-gradient(180deg, rgba(14, 15, 18, .45) 0%, rgba(14, 15, 18, .75) 55%, rgba(18, 19, 23, .95) 100%),
        url('images/Background.webp') center top / cover no-repeat;
    background-color: var(--rd-bg);
}

/*
    L'ANNONCE DU SERVEUR, en tête de page.

    Elle emprunte le cadre d'un pilier — fond presque noir, filet doré en haut — parce qu'elle
    doit se lire sur l'illustration comme eux, et qu'un troisième style de bloc sur cette page
    n'aurait rien dit de plus. Le filet est en revanche PLEIN et non `--rd-border-soft` sur les
    côtés : un pilier décrit le jeu, celle-ci interrompt.

    ALIGNÉE À GAUCHE alors que le héros est centré : c'est un texte libre, qui peut faire
    plusieurs phrases, et une annonce centrée sur trois lignes se lit mal.

    `pre-wrap` EST LE SEUL POINT QUI COMPTE. Le texte vient d'une zone de saisie, donc il porte
    les retours à la ligne que l'administrateur a tapés — sans lui, HTML les écraserait tous en
    une seule espace et une annonce en deux paragraphes arriverait en un pavé. Le mot est bien
    `pre-wrap` et non `pre` : les longues lignes doivent continuer de se replier.

    `overflow-wrap` PARCE QUE C'EST DU TEXTE LIBRE : rien n'empêche d'y coller une adresse sans
    espace, qui déborderait le cadre sur mobile.
*/
.home-announcement[b-mdknpn1q8h] {
    max-width: 60rem;
    margin: 0 auto 2rem;
    background: rgba(14, 15, 18, .82);
    border: 1px solid var(--rd-border-soft);
    border-top: 2px solid var(--rd-gold);
    border-radius: var(--rd-radius);
    padding: 1rem 1.25rem;
    backdrop-filter: blur(2px);
}

    .home-announcement p[b-mdknpn1q8h] {
        margin: 0;
        color: var(--rd-text);
        line-height: 1.55;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

.home-hero[b-mdknpn1q8h] {
    max-width: 60rem;
    margin: 0 auto;
    text-align: center;
}

/* Le filet et la taille du h1 global s'effacent : ici le titre EST la page */
.home-title[b-mdknpn1q8h] {
    border-bottom: none;
    margin: 2rem 0 .75rem;
    padding: 0;
    font-size: clamp(2.6rem, 8vw, 5rem);
    letter-spacing: .06em;
    color: var(--rd-text);
    text-shadow: 0 4px 24px rgba(0, 0, 0, .85);
}

.home-title-accent[b-mdknpn1q8h] {
    color: var(--rd-gold-bright);
    text-shadow: 0 0 28px rgba(214, 158, 46, .45), 0 4px 24px rgba(0, 0, 0, .85);
}

.home-tagline[b-mdknpn1q8h] {
    font-size: 1.15rem;
    color: var(--rd-text-muted);
    text-shadow: 0 2px 8px rgba(0, 0, 0, .9);
    margin-bottom: 2.5rem;
}

.home-pillars[b-mdknpn1q8h] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    margin-bottom: 2.5rem;
    text-align: left;
}

.home-pillar[b-mdknpn1q8h] {
    background: rgba(14, 15, 18, .72);
    border: 1px solid var(--rd-border-soft);
    border-top: 2px solid var(--rd-gold);
    border-radius: var(--rd-radius);
    padding: 1rem 1.25rem;
    backdrop-filter: blur(2px);
}

    .home-pillar h2[b-mdknpn1q8h] {
        margin: 0 0 .5rem;
        font-size: 1.15rem;
        color: var(--rd-gold-bright);
    }

    .home-pillar p[b-mdknpn1q8h] {
        margin: 0;
        color: var(--rd-text);
        line-height: 1.5;
    }

.home-create[b-mdknpn1q8h] {
    padding: .7rem 2rem;
}

.home-invitations[b-mdknpn1q8h] {
    max-width: 48rem;
    margin: 3.5rem auto 0;
}

    .home-invitations h2[b-mdknpn1q8h] {
        margin-top: 0;
        text-shadow: 0 2px 8px rgba(0, 0, 0, .9);
    }

@media (min-width: 641px) {
    .home[b-mdknpn1q8h] {
        padding: 4rem 2rem;
    }
}