@charset "UTF-8";
/* assets/css/jeu.css — Thème Taverne Festive pour Beer Clicker (layout 3 colonnes) */

/* Supprime le carré bleu/gris translucide qu'Android (et iOS Safari) affichent
   sur les éléments tapés. Propriété ignorée par les navigateurs desktop, donc
   strictement aucun impact sur PC. */
html {
    -webkit-tap-highlight-color: transparent;
}

/* ── Icônes emoji (remplacées par images) ─────────────────────────────────── */
.icone-emoji {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
    object-fit: contain;
}
.stat-icone .icone-emoji,
.modal-prestige-titre .icone-emoji {
    width: 1.5em;
    height: 1.5em;
}

/* ── Variables ──────────────────────────────────────────────────────────────── */
:root {
    --or:         #f5a623;
    --or-vif:     #ffbf47;
    --or-dore:    #ffd700;
    --ambre:      #c8860a;
    --ambre-f:    #a06800;
    --cuivre:     #b87333;

    --fond:       #0d0804;
    --fond2:      #151008;
    --fond3:      #1c150b;
    --carte:      #1e160d;
    --carte2:     #2a1f12;
    --carte-hover:#342818;

    --bord:       #3d2a14;
    --bord-or:    #7a5a20;
    --bord-doux:  rgba(245, 166, 35, 0.15);

    --texte:      #f0deb0;
    --texte-clair:#fff5e0;
    --muted:      #9a7a50;

    --vert:       #5cb85c;
    --rouge:      #d9534f;
    --violet:     #9b59b6;
    --bps-clr:    #81c784;

    --shadow:     0 4px 24px rgba(0, 0, 0, 0.5);
    --shadow-or:  0 0 30px rgba(245, 166, 35, 0.15);
    --rayon:      10px;
    --rayon-lg:   16px;

    --trans:      0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset & Base ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 15px;
    scroll-behavior: smooth;
}

body.jeu {
    font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
    background-color: var(--fond);
    background-image:
        radial-gradient(ellipse at 30% 0%, rgba(80, 45, 10, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 100%, rgba(60, 30, 5, 0.3) 0%, transparent 50%),
        url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.012'%3E%3Cpath d='M0 0h80v80H0V0zm20 20v40h40V20H20zm20 35a15 15 0 1 0 0-30 15 15 0 0 0 0 30z'/%3E%3C/g%3E%3C/svg%3E");
    color: var(--texte);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.5;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body.jeu input,
body.jeu textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* ── Scrollbar ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--fond); }
::-webkit-scrollbar-thumb {
    background: var(--bord);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--bord-or); }

/* ── Style succès dans les toasts ────────────────────────────────────────── */
.toast.succes-notif {
    background: linear-gradient(135deg, rgba(42, 30, 6, 0.97), rgba(30, 22, 13, 0.97));
    border: 1px solid var(--or);
    border-left: 4px solid var(--or);
    padding: 0;
    overflow: hidden;
}

.notif-succes-contenu {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .9rem 1.2rem;
}

.notif-succes-icone {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

.notif-succes-icone img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    image-rendering: auto;
}

.notif-succes-titre {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--or);
    font-weight: 800;
}

.notif-succes-nom {
    font-size: .95rem;
    color: var(--texte-clair);
    font-weight: 700;
    margin-top: .1rem;
}

.notif-succes-desc {
    font-size: .75rem;
    color: var(--texte);
    margin-top: .15rem;
    font-style: italic;
}

.notif-succes-fermer {
    text-align: center;
    padding: .3rem;
    font-size: .65rem;
    color: var(--muted);
    border-top: 1px solid var(--bord-doux);
    transition: all var(--trans);
}

.toast.succes-notif:hover .notif-succes-fermer {
    color: var(--texte);
    background: rgba(245, 166, 35, 0.05);
}

/* ── Bière Dorée (flottante) ─────────────────────────────────────────────── */
#biere-doree-conteneur {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 500;
}

.biere-doree {
    position: absolute;
    width: 72px;
    height: 72px;
    cursor: pointer;
    pointer-events: all;
    opacity: 0;
    animation: flottement 2s ease-in-out infinite, fondu-entree 1s ease forwards;
}

.biere-doree::before {
    content: '';
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.55) 0%, rgba(245, 166, 35, 0.3) 40%, transparent 70%);
    animation: lueur-vacillante 1.2s ease-in-out infinite;
    pointer-events: none;
}

.biere-doree-img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 16px #f5a623) drop-shadow(0 0 32px #ffd700) drop-shadow(0 0 48px rgba(255, 215, 0, 0.3));
}

.biere-doree.fondu-sortie {
    animation: flottement 2s ease-in-out infinite, fondu-sortie 1s ease forwards;
}

@keyframes flottement {
    0%, 100% { transform: translateY(0) rotate(-3deg) scale(1); }
    50%      { transform: translateY(-15px) rotate(3deg) scale(1.05); }
}

@keyframes fondu-entree {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fondu-sortie {
    from { opacity: 1; }
    to   { opacity: 0; }
}


/* ── Panneau effets actifs (bas col-gauche) ─────────────────────────────── */
#effets-actifs {
    position: relative;
    z-index: 2;
    margin-top: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

#effets-actifs:empty { display: none; }

.effet-carte {
    background: linear-gradient(135deg, rgba(60, 40, 10, 0.8), rgba(30, 20, 5, 0.9));
    border: 1px solid rgba(245, 166, 35, 0.3);
    border-radius: 8px;
    padding: .5rem .7rem;
    animation: effet-carte-entree .4s ease;
}

.effet-carte-haut {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .35rem;
}

.effet-carte-icone {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.5));
}

.effet-carte-icone-txt {
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
}

.effet-carte-nom {
    flex: 1;
    font-size: .78rem;
    font-weight: 600;
    color: var(--or);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.effet-carte-temps {
    font-size: .75rem;
    font-weight: 700;
    color: var(--texte);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.effet-carte-barre-fond {
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
}

.effet-carte-barre {
    height: 100%;
    background: linear-gradient(90deg, var(--or), #ffd700);
    border-radius: 2px;
    transition: width 1s linear;
}

@keyframes effet-carte-entree {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* ── LAYOUT PRINCIPAL — 3 colonnes flexbox plein écran ─────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════ */
#jeu-conteneur {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

/* ── Colonne gauche — Zone de jeu ────────────────────────────────────────── */
#col-gauche {
    width: 25%;
    min-width: 300px;
    max-width: 380px;
    background:
        linear-gradient(180deg,
            rgba(35, 24, 12, 0.97) 0%,
            rgba(18, 12, 5, 0.98) 100%
        );
    border-right: 1px solid var(--bord);
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.4);
    padding: 1.8rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--bord) transparent;
    z-index: 5;
    flex-shrink: 0;
}

/* ── Colonne centrale — Visualisation empire ─────────────────────────────── */
#col-centre {
    flex: 1;
    background: var(--fond2);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 1rem 2rem 2rem;
    overflow-y: auto;
    position: relative;
}

/* ── Titres repliables ────────────────────────────────────────────────────── */
.titre-repliable {
    cursor: pointer;
    user-select: none;
    transition: opacity var(--trans);
}
.titre-repliable:hover { opacity: .8; }
.chevron-repli {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: baseline;
    position: relative;
    top: .1em;
    margin-left: .4em;
    transition: transform .25s ease;
}
.titre-repliable.replie .chevron-repli { transform: rotate(-90deg); }
.titre-repliable.replie { margin-bottom: .5rem; }

.contenu-repliable {
    transition: max-height .4s ease, opacity .3s ease;
    opacity: 1;
}
/* overflow:hidden uniquement à l'état replié ou pendant l'animation,
   pour ne pas rogner les transforms :hover des enfants (ex : translateY(-3px)
   sur .empire-batiment qui rognait le bord supérieur de la carte survolée). */
.contenu-repliable.replie,
.contenu-repliable.en-animation {
    overflow: hidden;
}
.contenu-repliable.replie {
    opacity: 0;
}

/* ── Miniatures empire (mode replié) ──────────────────────────────────────── */
.empire-miniatures {
    display: none;
    justify-content: center;
    gap: .5rem;
    padding: .3rem 0 .8rem;
    opacity: 0;
    transition: opacity .3s ease;
}
.empire-miniatures.visible {
    display: flex;
    opacity: 1;
}
.empire-miniatures img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: drop-shadow(0 0 4px rgba(245, 166, 35, 0.3));
}

#titre-empire {
    font-family: 'MedievalSharp', 'Georgia', serif;
    font-size: 1.8rem;
    color: var(--or);
    text-align: center;
    margin-bottom: 1.5rem;
    text-shadow: 0 0 20px rgba(245, 166, 35, 0.4), 0 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 1px;
}

/* Grille de visualisation des bâtiments achetés */
#grille-empire {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(95px, calc((100% - 4rem) / 5)), 1fr));
    gap: 1rem;
    align-content: start;
}

.empire-batiment {
    background: linear-gradient(135deg, var(--carte), var(--carte2));
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    padding: 1rem .6rem;
    text-align: center;
    transition: all var(--trans);
    position: relative;
    overflow: hidden;
}

.empire-batiment::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 30%, rgba(245, 166, 35, 0.06) 0%, transparent 60%);
    opacity: 0;
    transition: opacity var(--trans);
}

.empire-batiment:hover {
    border-color: var(--or);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), var(--shadow-or);
    transform: translateY(-3px);
}

.empire-batiment:hover::before { opacity: 1; }

.empire-batiment-icone {
    width: 64px;
    height: 64px;
    margin: 0 auto .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empire-batiment-icone img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    image-rendering: auto;
    filter: drop-shadow(0 2px 6px rgba(245, 166, 35, 0.2));
}

.empire-batiment-nom {
    font-weight: 700;
    font-size: .8rem;
    color: var(--texte-clair);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.empire-batiment-qte {
    font-family: 'MedievalSharp', serif;
    font-size: 1.3rem;
    color: var(--or-vif);
    margin-top: .2rem;
    text-shadow: 0 0 10px rgba(245, 166, 35, 0.3);
}

.empire-batiment-prod {
    font-size: .7rem;
    color: var(--bps-clr);
    font-weight: 600;
    margin-top: .15rem;
}

.empire-vide {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--muted);
    font-style: italic;
    padding: 3rem 1rem;
    font-size: .95rem;
}

/* ── Colonne droite — Boutique & options ──────────────────────────────────── */
#col-droite {
    width: 35%;
    min-width: 380px;
    max-width: 550px;
    background:
        linear-gradient(180deg,
            rgba(28, 21, 11, 0.98) 0%,
            rgba(13, 8, 4, 0.99) 100%
        );
    border-left: 1px solid var(--bord);
    box-shadow: -4px 0 30px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 100;
    flex-shrink: 0;
}

/* ── Onglets navigation (barre marron en haut) ───────────────────────────── */
#onglets-droite {
    background: linear-gradient(180deg, #3d2a14, #2a1c0d);
    border-bottom: 2px solid var(--bord-or);
    display: flex;
    padding: 0;
    gap: 0;
    flex-shrink: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.onglet {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--muted);
    padding: .7rem .6rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    font-size: .72rem;
    font-weight: 700;
    transition: all var(--trans);
    flex: 1;
    position: relative;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.onglet::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: var(--or);
    border-radius: 3px 3px 0 0;
    transition: all var(--trans);
    transform: translateX(-50%);
}

.onglet:hover {
    color: var(--texte);
    background: rgba(245, 166, 35, 0.05);
}

.onglet:hover::after {
    width: 60%;
}

.onglet.actif {
    color: var(--or);
}

.onglet.actif::after {
    width: 100%;
    background: linear-gradient(90deg, var(--ambre), var(--or), var(--ambre));
    box-shadow: 0 0 10px rgba(245, 166, 35, 0.3);
}

.onglet img {
    image-rendering: auto;
    object-fit: contain;
    transition: filter var(--trans);
}

.onglet:hover img, .onglet.actif img {
    filter: drop-shadow(0 0 4px rgba(245, 166, 35, 0.5));
}

/* ── Menu déroulant « Plus » ─────────────────────────────────────────────── */
.onglet-menu-plus {
    position: relative;
    flex: 1;
    display: flex;
}

.onglet-plus {
    width: 100%;
}

.menu-deroulant {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 180px;
    background: linear-gradient(180deg, #3d2a14, #2a1c0d);
    border: 1px solid var(--bord-or);
    border-top: none;
    border-radius: 0 0 var(--rayon) var(--rayon);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    z-index: 100;
    overflow: hidden;
}

.menu-deroulant.cache {
    display: none;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .6rem 1rem;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(245, 166, 35, 0.1);
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    cursor: pointer;
    transition: all var(--trans);
}

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

.menu-item:hover {
    color: var(--or);
    background: rgba(245, 166, 35, 0.08);
}

.menu-item.actif {
    color: var(--or);
    background: rgba(245, 166, 35, 0.12);
}

.menu-item img {
    image-rendering: auto;
    object-fit: contain;
}

/* ── Contenu des onglets (scrollable) ────────────────────────────────────── */
#contenu-onglets {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--bord) transparent;
}

.contenu-onglet {
    display: none;
    padding: 1rem;
    animation: fondu-onglet 0.3s ease;
}

.contenu-onglet.actif { display: block; }

@keyframes fondu-onglet {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Titres de section boutique ──────────────────────────────────────────── */
.titre-section-boutique {
    font-family: 'MedievalSharp', 'Georgia', serif;
    font-size: 1rem;
    color: var(--or);
    margin-bottom: .6rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--bord-doux);
    text-shadow: 0 0 10px rgba(245, 166, 35, 0.2);
    display: flex;
    align-items: center;
    gap: .4rem;
}

.icone-titre-section {
    width: 1.2em;
    height: 1.2em;
    object-fit: contain;
    vertical-align: middle;
}

#bloc-ameliorations {
    margin-bottom: 1.2rem;
}

/* ── Sélecteur quantité bâtiments ──────────────────────────────────────── */
#selecteur-quantite {
    margin-left: auto;
    display: flex;
    gap: .25rem;
}

.btn-qte {
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: 6px;
    color: var(--muted);
    padding: .15rem .5rem;
    font-size: .72rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--trans);
    line-height: 1.3;
}

.btn-qte:hover {
    border-color: var(--or);
    color: var(--texte);
}

.btn-qte.actif {
    background: linear-gradient(135deg, var(--ambre), var(--ambre-f));
    border-color: var(--or);
    color: #fff;
    box-shadow: 0 0 8px rgba(245, 166, 35, 0.25);
}

/* ── En-tête jeu (colonne gauche) ────────────────────────────────────────── */
#entete-jeu {
    position: relative;
    z-index: 2;
    text-align: center;
    border-bottom: 1px solid var(--bord-doux);
    width: 100%;
    background: url('../../images/nav/planche-titre.png') center / contain no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
}

#nom-taverne {
    font-family: 'MedievalSharp', 'Georgia', serif;
    font-size: 1.4rem;
    color: var(--or);
    cursor: pointer;
    text-shadow: 0 0 20px rgba(245, 166, 35, 0.4), 0 2px 4px rgba(0, 0, 0, 0.5);
    transition: all var(--trans);
    border: none;
    background: none;
    font-weight: 400;
    letter-spacing: 0.5px;
}

#nom-taverne:hover {
    text-shadow: 0 0 30px rgba(245, 166, 35, 0.7), 0 0 60px rgba(245, 166, 35, 0.3);
    color: var(--or-vif);
}

#input-nom-taverne {
    background: var(--fond2);
    border: 2px solid var(--bord-or);
    border-radius: var(--rayon);
    color: var(--texte);
    padding: .5rem 1rem;
    font-size: 1rem;
    width: 100%;
    text-align: center;
    outline: none;
    font-family: 'MedievalSharp', serif;
    transition: border-color var(--trans);
}

#input-nom-taverne:focus { border-color: var(--or); }

/* ── Compteurs ────────────────────────────────────────────────────────────── */
#compteurs {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: .5rem 0;
    width: 100%;
}

.compteur-principal {
    font-family: 'MedievalSharp', serif;
    font-size: 2.2rem;
    font-weight: 400;
    color: var(--or-vif);
    line-height: 1.1;
    text-shadow: 0 0 20px rgba(245, 166, 35, 0.3);
    animation: lueur-compteur 3s ease-in-out infinite;
}

@keyframes lueur-compteur {
    0%, 100% { text-shadow: 0 0 20px rgba(245, 166, 35, 0.3); }
    50%      { text-shadow: 0 0 30px rgba(245, 166, 35, 0.5), 0 0 60px rgba(245, 166, 35, 0.1); }
}

/* ── Compteur à rouleau (style station essence) ──────────────────────────── */
.compteur-rouleau {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: center;
    line-height: 1;
}

.rouleau-char {
    display: inline-block;
    height: 1em;
    line-height: 1;
    overflow: hidden;
    position: relative;
}

.rouleau-char::before,
.rouleau-char::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 18%;
    z-index: 1;
    pointer-events: none;
}
.rouleau-char::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.12), transparent);
}
.rouleau-char::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.12), transparent);
}

.rouleau-bande {
    display: block;
    transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.rouleau-bande span {
    display: block;
    height: 1em;
    line-height: 1;
}

.rouleau-texte {
    display: inline-block;
    line-height: 1;
}

.compteur-principal .unite {
    display: block;
    font-family: 'Nunito', sans-serif;
    font-size: .75rem;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: .3rem;
    text-shadow: none;
}

.compteur-secondaire {
    font-size: .9rem;
    color: var(--bps-clr);
    margin-top: .35rem;
    font-weight: 700;
}

.compteur-secondaire:last-child { color: var(--cuivre); }

.icone-compteur {
    height: 1.1em;
    width: auto;
    vertical-align: middle;
    margin-right: .15rem;
    margin-bottom: .15rem;
}

/* ── Zone de clic ─────────────────────────────────────────────────────────── */
#zone-clic {
    text-align: center;
    padding: .5rem 0;
    position: relative;
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 45%;
}

#btn-biere {
    background: none;
    border: none;
    cursor: pointer;
    padding: 1rem;
    border-radius: 50%;
    transition: transform 0.08s ease;
    display: inline-block;
    position: relative;
}

#btn-biere:active { transform: scale(.88); }

#btn-biere::before {
    content: '';
    position: absolute;
    inset: -15px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 166, 35, 0.12) 0%, transparent 70%);
    animation: respiration 3s ease-in-out infinite;
}

@keyframes respiration {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50%      { transform: scale(1.1); opacity: 1; }
}

#btn-biere::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: conic-gradient(from 0deg, transparent, rgba(245, 166, 35, 0.4), transparent, rgba(255, 215, 0, 0.3), transparent) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: rotation-anneau 6s linear infinite;
}

@keyframes rotation-anneau {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

#img-biere {
    width: 200px;
    height: 200px;
    object-fit: contain;
    image-rendering: auto;
    filter: drop-shadow(0 4px 15px rgba(245, 166, 35, 0.35));
    transition: filter 0.3s;
    position: relative;
    left: 7%;
    z-index: 1;
    animation: vacillement 2.5s ease-in-out infinite;
    transform-origin: bottom center;
}

@keyframes vacillement {
    0%   { transform: rotate(2deg); }
    50%  { transform: rotate(-2deg); }
    100% { transform: rotate(2deg); }
}

/* Lueur dorée vacillante derrière l'image quand un effet bière dorée est actif */
#btn-biere.lueur-doree-active::before {
    inset: -25px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.45) 0%, rgba(245, 166, 35, 0.25) 40%, transparent 70%);
    animation: lueur-vacillante 1.2s ease-in-out infinite;
}

@keyframes lueur-vacillante {
    0%   { opacity: 0.5; transform: scale(0.92); }
    25%  { opacity: 1;   transform: scale(1.12); }
    50%  { opacity: 0.55; transform: scale(1.0); }
    75%  { opacity: 0.95; transform: scale(1.18); }
    100% { opacity: 0.5; transform: scale(0.92); }
}

#btn-biere:hover #img-biere {
    filter:
        drop-shadow(0 4px 20px rgba(245, 166, 35, 0.6))
        drop-shadow(0 0 40px rgba(255, 215, 0, 0.2));
}

/* Bulles de bière ambiantes */
#bulles-ambiantes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.bulle-ambiante {
    position: absolute;
    bottom: -20px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%,
        rgba(255, 215, 0, 0.35),
        rgba(245, 166, 35, 0.15) 50%,
        rgba(200, 130, 20, 0.05) 100%);
    box-shadow:
        inset 0 -2px 4px rgba(255, 255, 255, 0.15),
        inset 0 2px 6px rgba(255, 215, 0, 0.1),
        0 0 8px rgba(255, 215, 0, 0.08);
    pointer-events: none;
    opacity: 0;
    animation: montee-bulle var(--bulle-duree, 6s) var(--bulle-delai, 0s) ease-in forwards;
}

@keyframes montee-bulle {
    0%   { opacity: 0; transform: translateY(0) translateX(0) scale(0.6); }
    8%   { opacity: var(--bulle-opacite, 0.5); transform: translateY(-5vh) translateX(var(--bulle-derive1, 5px)) scale(0.9); }
    30%  { opacity: var(--bulle-opacite, 0.5); transform: translateY(-25vh) translateX(var(--bulle-derive2, -8px)) scale(1); }
    60%  { opacity: calc(var(--bulle-opacite, 0.5) * 0.7); transform: translateY(-55vh) translateX(var(--bulle-derive1, 5px)) scale(1.02); }
    90%  { opacity: calc(var(--bulle-opacite, 0.5) * 0.3); transform: translateY(-85vh) translateX(var(--bulle-derive2, -8px)) scale(0.95); }
    100% { opacity: 0; transform: translateY(-100vh) translateX(0) scale(0.8); }
}

/* Ingrédients flottants (houblon & malt) */
#ingredients-flottants {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.ingredient-flottant {
    position: absolute;
    bottom: -40px;
    width: 28px;
    height: 28px;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
    animation: envol-ingredient 4s forwards;
    filter: drop-shadow(0 0 4px rgba(245, 166, 35, 0.25));
}

@keyframes envol-ingredient {
    0%   { opacity: 0; transform: translateY(0) translateX(0) rotate(0deg) scale(.7); }
    10%  { opacity: .65; }
    40%  { opacity: .5; transform: translateY(var(--palier1, -35vh)) translateX(var(--drift, 15px)) rotate(30deg) scale(.85); }
    70%  { opacity: .3; transform: translateY(var(--palier2, -60vh)) translateX(calc(var(--drift, 15px) * -1)) rotate(55deg) scale(.75); }
    100% { opacity: 0; transform: translateY(var(--palier3, -85vh)) translateX(var(--drift, 15px)) rotate(80deg) scale(.6); }
}

/* Particules de clic */
.particule-clic {
    position: fixed;
    font-family: 'MedievalSharp', 'Georgia', serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--or-vif);
    pointer-events: none;
    z-index: 600;
    text-shadow:
        0 0 12px rgba(255, 215, 0, 0.8),
        0 0 25px rgba(245, 166, 35, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.9);
    opacity: 0;
    transform: translateY(0) scale(1);
    transition: none;
}

.particule-clic.visible {
    animation: particule-envol 1.2s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

@keyframes particule-envol {
    0%   { opacity: 1; transform: translateY(0) scale(1.3) rotate(-5deg); }
    20%  { opacity: 1; transform: translateY(-20px) scale(1.5) rotate(3deg); }
    50%  { opacity: .9; transform: translateY(-50px) scale(1.2) rotate(-2deg); }
    100% { opacity: 0; transform: translateY(-100px) scale(.7) rotate(5deg); }
}

/* ── Toasts (bas centre de la colonne centrale) ──────────────────────────── */
#zone-toasts {
    position: fixed;
    bottom: 1rem;
    width: min(400px, calc(100vw - 2rem));
    max-width: 400px;
    display: flex;
    flex-direction: column-reverse;
    gap: .5rem;
    pointer-events: none;
    z-index: 9999;
}

.toast {
    background: linear-gradient(135deg, rgba(42, 31, 18, 0.95), rgba(30, 22, 13, 0.95));
    border: 1px solid var(--bord-or);
    border-radius: var(--rayon);
    padding: .6rem 1rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--texte);
    text-align: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 12px rgba(245, 166, 35, 0.08);
    pointer-events: all;
    animation: toast-entree 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toast.sortie {
    animation: toast-sortie 0.3s ease forwards;
}

@keyframes toast-entree {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toast-sortie {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(10px) scale(0.95); }
}

/* ── Capsule Chanceuse : chute depuis le haut (col-centre) ────────────────── */

.capsule-chute {
    position: fixed;
    top: -120px;
    width: 96px;
    height: 96px;
    pointer-events: auto;
    cursor: crosshair;
    z-index: 9999;
    transform: translate(-50%, 0) rotate(0deg);
    animation: capsule-chute var(--dur, 2s) cubic-bezier(.45,.05,.55,.95) forwards;
    filter: drop-shadow(0 4px 10px rgba(240, 200, 48, 0.85));
    will-change: transform, opacity;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

@keyframes capsule-chute {
    0%   { transform: translate(-50%, 0) rotate(0deg) scale(0.85); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translate(calc(-50% + var(--dx)), calc(100vh + 180px)) rotate(var(--rot)) scale(1.05); opacity: 0.9; }
}

/* Capsule touchée : ricochet rapide dans la direction opposée au clic */
.capsule-chute.capsule-touchee {
    animation: capsule-ricochet 0.8s cubic-bezier(.2,.6,.4,1) forwards !important;
    filter: drop-shadow(0 0 14px rgba(255, 220, 80, 0.95));
}

@keyframes capsule-ricochet {
    0%   { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
    12%  { transform: translate(calc(-50% + var(--kick-x)), calc(-50% + var(--kick-y))) rotate(35deg) scale(1.15); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--ric-x)), calc(-50% + var(--ric-y))) rotate(var(--spin-end)) scale(0.35); opacity: 0; }
}

/* Flash du point d'impact */
.capsule-impact-flash {
    position: fixed;
    width: 140px;
    height: 140px;
    pointer-events: none;
    z-index: 10001;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle,
        rgba(255, 255, 230, 1)  0%,
        rgba(255, 210, 90, 0.9) 25%,
        rgba(255, 140, 20, 0.5) 55%,
        rgba(255, 100, 0, 0)    75%);
    border-radius: 50%;
    animation: capsule-impact-flash 0.32s ease-out forwards;
    will-change: transform, opacity;
    mix-blend-mode: screen;
}

@keyframes capsule-impact-flash {
    0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
    55%  { transform: translate(-50%, -50%) scale(1.5); opacity: 0.95; }
    100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}

/* Trou de balle : apparaît au point d'impact et suit la capsule */
.capsule-trou {
    position: fixed;
    width: 56px;
    height: 56px;
    pointer-events: none;
    z-index: 10002;
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0;
    animation: capsule-trou 0.8s cubic-bezier(.2,.6,.4,1) forwards;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
    will-change: transform, opacity;
}

@keyframes capsule-trou {
    0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
    8%   { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
    15%  { transform: translate(calc(-50% + var(--kick-x)), calc(-50% + var(--kick-y))) scale(1.1); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--ric-x)), calc(-50% + var(--ric-y))) scale(0.8); opacity: 0; }
}

/* Éclats radiaux */
.capsule-debris {
    position: fixed;
    width: 7px;
    height: 7px;
    background: #ffd86b;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 6px rgba(255, 200, 60, 0.9);
    animation: capsule-debris 0.7s cubic-bezier(.2,.6,.4,1) forwards;
    will-change: transform, opacity;
}

@keyframes capsule-debris {
    0%   { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
    100% { transform: translate(calc(-50% + var(--debris-x)), calc(-50% + var(--debris-y))) scale(0.2); opacity: 0; }
}

.badge-capsule {
    height: 12px;
    width: auto;
    display: block;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

.icone-toast-doree {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-right: 4px;
    filter: drop-shadow(0 0 4px #ffd700);
}

/* ── Stats (onglet Stats) ────────────────────────────────────────────────── */
.titre-section-stats {
    font-family: 'MedievalSharp', 'Georgia', serif;
    font-size: 1rem;
    color: var(--or);
    margin-bottom: .6rem;
    text-shadow: 0 0 10px rgba(245, 166, 35, 0.2);
    display: flex;
    align-items: center;
    gap: .45rem;
}

.separateur-stats-classement {
    border: none;
    border-top: 1px solid var(--bord-doux);
    margin: 1rem 0;
}

/* ── Collection (Améliorations + Succès) ─────────────────────────────────── */
.titre-section-collection {
    font-family: 'MedievalSharp', 'Georgia', serif;
    font-size: 1rem;
    color: var(--or);
    margin-bottom: .6rem;
    text-shadow: 0 0 10px rgba(245, 166, 35, 0.2);
    display: flex;
    align-items: center;
    gap: .45rem;
}

.separateur-collection {
    border: none;
    border-top: 1px solid var(--bord-doux);
    margin: 1rem 0;
}

#stats-jeu {
    background: linear-gradient(135deg, var(--carte), var(--carte2));
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    padding: .9rem 1rem;
    font-size: .82rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.stat-ligne {
    display: flex;
    justify-content: space-between;
    padding: .35rem 0;
    border-bottom: 1px solid rgba(61, 42, 20, 0.4);
    color: var(--muted);
    transition: color var(--trans);
}

.stat-ligne:last-child { border-bottom: none; }
.stat-ligne span:last-child { color: var(--texte); font-weight: 700; }

.stat-ligne:hover {
    color: var(--texte);
}

/* ── Stats absurdes ───────────────────────────────────────────────────────── */
#stats-absurdes {
    background: linear-gradient(135deg, var(--carte), var(--carte2));
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    padding: .7rem 1rem;
    font-size: .8rem;
}

.stat-absurde {
    padding: .4rem 0;
    border-bottom: 1px solid rgba(61, 42, 20, 0.3);
    color: var(--muted);
    line-height: 1.4;
}

.stat-absurde:last-child { border-bottom: none; }

.stat-absurde .sa-valeur {
    color: var(--or);
    font-weight: 700;
}

.stat-absurde:hover {
    color: var(--texte);
}

/* ── Réglages ─────────────────────────────────────────────────────────────── */
#zone-reglages {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#reglages-son {
    background: linear-gradient(135deg, var(--carte), var(--carte2));
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    padding: .8rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.reglage-ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .85rem;
    color: var(--texte);
    gap: .5rem;
}

.reglage-ligne input[type="range"] {
    flex: 1;
    max-width: 140px;
    accent-color: var(--or);
    cursor: pointer;
}

/* ── Encart Aide ──────────────────────────────────────────────────────────── */
.encart-aide {
    background: linear-gradient(135deg, var(--carte), var(--carte2));
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    padding: 1rem 1.2rem;
    margin-top: .5rem;
}

.encart-aide h4 {
    margin: 0 0 .6rem 0;
    font-size: .95rem;
    color: var(--or);
}

.encart-aide p {
    font-size: .82rem;
    color: var(--texte);
    margin: 0 0 .5rem 0;
    line-height: 1.4;
}

.encart-aide ul {
    margin: .4rem 0 .6rem 1.2rem;
    padding: 0;
    font-size: .82rem;
    color: var(--texte);
    line-height: 1.5;
}

.encart-aide li {
    margin-bottom: .3rem;
}

.aide-astuce {
    font-style: italic;
    opacity: .85;
    margin-bottom: 0 !important;
}

/* ── Actions (prestige + save) ────────────────────────────────────────────── */
.btn-prestige {
    width: 100%;
    background: linear-gradient(135deg, #4a1d96, #7c3aed);
    border: 1px solid rgba(155, 89, 182, 0.5);
    border-radius: var(--rayon);
    color: #e9d5ff;
    padding: .8rem;
    font-size: .95rem;
    font-weight: 800;
    cursor: pointer;
    transition: all var(--trans);
    text-align: center;
    position: relative;
    overflow: hidden;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.btn-prestige::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 70%
    );
    animation: brillance-prestige 3s ease-in-out infinite;
}

@keyframes brillance-prestige {
    0%   { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}

.btn-prestige:hover {
    background: linear-gradient(135deg, #5b21b6, #8b5cf6);
    box-shadow: 0 0 25px rgba(139, 92, 246, 0.4), 0 0 50px rgba(139, 92, 246, 0.15);
    transform: translateY(-1px);
}

.btn-prestige:active { transform: translateY(0); }

.btn-prestige small {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    opacity: .8;
    margin-top: .25rem;
}

#actions-save {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

#actions-transfert {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin: .8rem 0 .6rem;
}

#actions-transfert .btn-action {
    padding: .7rem .5rem;
    font-size: .82rem;
}

#actions-transfert .btn-transfert-primaire {
    border-color: var(--or);
    color: var(--or);
    background: linear-gradient(135deg, rgba(245, 166, 35, 0.12), rgba(245, 166, 35, 0.04));
}

#actions-transfert .btn-transfert-primaire:hover {
    background: linear-gradient(135deg, rgba(245, 166, 35, 0.22), rgba(245, 166, 35, 0.10));
    color: #fff;
}

.btn-action {
    flex: 1;
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    color: var(--muted);
    padding: .55rem .4rem;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--trans);
    text-align: center;
}

.btn-action:hover {
    border-color: var(--or);
    color: var(--texte);
    background: var(--carte2);
    box-shadow: 0 0 15px rgba(245, 166, 35, 0.1);
}

.btn-action.btn-danger:hover {
    border-color: var(--rouge);
    color: var(--rouge);
    box-shadow: 0 0 15px rgba(217, 83, 79, 0.15);
}

/* ── Liste bâtiments (boutique) ──────────────────────────────────────────── */
#liste-batiments {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.batiment-item {
    background: linear-gradient(135deg, var(--carte), var(--carte2));
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    padding: .7rem .8rem;
    display: flex;
    align-items: center;
    gap: .7rem;
    cursor: pointer;
    transition: all var(--trans);
    position: relative;
    overflow: hidden;
}

.batiment-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(245, 166, 35, 0.03) 50%, transparent 100%);
    opacity: 0;
    transition: opacity var(--trans);
}

.batiment-item:hover {
    border-color: var(--or);
    background: linear-gradient(135deg, var(--carte2), var(--carte-hover));
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), var(--shadow-or);
    transform: translateX(4px);
}

.batiment-item:hover::before { opacity: 1; }

.batiment-item:active {
    transform: translateX(2px) scale(0.99);
}

.batiment-item.trop-cher {
    opacity: .45;
    cursor: not-allowed;
    filter: saturate(0.5);
}

.batiment-item.trop-cher:hover {
    border-color: var(--bord);
    background: linear-gradient(135deg, var(--carte), var(--carte2));
    box-shadow: none;
    transform: none;
}

.batiment-item.trop-cher::before { display: none; }

.batiment-icone {
    width: 48px;
    height: 48px;
    background: radial-gradient(circle, var(--fond2) 0%, var(--fond) 100%);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.batiment-icone::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent);
    border-radius: inherit;
}

.batiment-icone img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    image-rendering: auto;
    position: relative;
    z-index: 1;
}

.batiment-info { flex: 1; min-width: 0; position: relative; z-index: 1; }

.batiment-nom {
    font-weight: 800;
    color: var(--texte-clair);
    font-size: .85rem;
}

.batiment-desc {
    font-size: .7rem;
    color: var(--muted);
    margin-top: .1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.batiment-prod {
    font-size: .73rem;
    color: var(--bps-clr);
    margin-top: .15rem;
    font-weight: 600;
}

.batiment-droite {
    text-align: right;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.batiment-qte {
    font-family: 'MedievalSharp', serif;
    font-size: 1.2rem;
    color: var(--texte-clair);
    text-align: center;
    min-width: 36px;
    text-shadow: 0 0 10px rgba(245, 166, 35, 0.2);
}

.batiment-cout {
    display: flex;
    align-items: center;
    gap: .25rem;
    font-size: .8rem;
    font-weight: 700;
    color: var(--or);
    margin-top: .15rem;
}

/* ── Liste améliorations ─────────────────────────────────────────────────── */
#liste-ameliorations {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
    gap: .5rem;
}

.amelioration-item {
    background: linear-gradient(135deg, var(--carte), var(--carte2));
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    padding: .6rem .4rem;
    cursor: pointer;
    transition: all var(--trans);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.amel-nom {
    font-weight: 700;
    font-size: .7rem;
    line-height: 1.3;
    color: var(--muted);
}

.amel-icone {
    width: 44px;
    height: 44px;
    margin: 0 auto .3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.amel-icone img,
.amelioration-item > img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    image-rendering: auto;
    display: block;
}

.amelioration-item:hover {
    box-shadow: 0 0 20px rgba(245, 166, 35, 0.15);
    transform: translateY(-2px);
}

.amelioration-item:active { transform: translateY(-1px) scale(0.97); }

.amelioration-item.trop-cher {
    opacity: .35;
    cursor: not-allowed;
    filter: saturate(0);
}

.amelioration-item.trop-cher:hover {
    box-shadow: none;
    transform: none;
    opacity: .5;
}

.amel-tooltip {
    display: none;
}

.amel-tooltip-flottant {
    position: fixed;
    background: rgba(10, 7, 4, 0.97);
    border: 1px solid var(--bord-or);
    border-radius: var(--rayon);
    padding: .7rem .9rem;
    width: 220px;
    font-size: .8rem;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: none;
    text-align: left;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
}

.amel-tooltip-flottant.visible { opacity: 1; }

.amel-tooltip-flottant strong {
    color: var(--or);
    display: block;
    margin-bottom: 0;
    font-size: .85rem;
}

.amel-tooltip-flottant .eff { color: #ce93d8; }
.amel-tooltip-flottant .cout, .amel-tooltip-flottant em {
    display: block;
    margin-top: .45rem;
    padding-top: .35rem;
    border-top: 1px solid rgba(122, 90, 32, 0.5);
    color: var(--or-dore);
    font-size: .75rem;
    font-weight: 600;
    font-style: normal;
    letter-spacing: .02em;
}

/* ── Infobulle classement ─────────────────────────────────────────────────── */
.classement-tooltip { width: 240px; }
.cl-tooltip-table { width: 100%; border-collapse: collapse; margin-top: .3rem; }
.cl-tooltip-table td { padding: .15rem 0; font-size: .78rem; color: #ccc; }
.cl-tooltip-table .cl-tooltip-val { text-align: right; color: #fff; font-weight: 600; }
.cl-tooltip-table .cl-tooltip-sep td { border-top: 1px solid rgba(255,255,255,.15); padding-top: .35rem; margin-top: .2rem; }
.cl-tooltip-table .cl-tooltip-total td { border-top: 1px solid var(--bord-or); padding-top: .35rem; color: var(--or); font-weight: 700; font-size: .82rem; }
.classement-table tbody tr { cursor: default; }

.rien-disponible,
.vide-message {
    color: var(--muted);
    font-size: .88rem;
    padding: 2rem 1rem;
    text-align: center;
    font-style: italic;
}

/* ── Succès ───────────────────────────────────────────────────────────────── */
#liste-succes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
    gap: .5rem;
}

.succes-item {
    background: linear-gradient(135deg, var(--carte), var(--carte2));
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    padding: .6rem .4rem;
    text-align: center;
    transition: all var(--trans);
    position: relative;
    overflow: hidden;
}

.succes-icone {
    width: 44px;
    height: 44px;
    margin: 0 auto .3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

.succes-icone img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    image-rendering: auto;
}

.succes-nom {
    font-weight: 700;
    font-size: .7rem;
    line-height: 1.3;
    color: var(--muted);
}

.succes-item.obtenu {
    border-color: var(--or);
    background: linear-gradient(135deg, #2a1e06, var(--carte));
}

.succes-item.obtenu::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 40%,
        rgba(255, 215, 0, 0.06) 50%,
        transparent 60%
    );
    animation: brillance-succes 4s ease-in-out infinite;
}

@keyframes brillance-succes {
    0%   { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}

.succes-item.obtenu .succes-nom { color: var(--or); }

.succes-item.obtenu:hover {
    box-shadow: 0 0 20px rgba(245, 166, 35, 0.15);
    transform: translateY(-2px);
}

.succes-item.verrouille {
    opacity: .35;
    filter: saturate(0);
}

.succes-item.verrouille:hover {
    opacity: .5;
}

/* ── Améliorations achetées ────────────────────────────────────────────── */
#liste-ameliorations-achetees {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
    gap: .5rem;
}

.amel-achetee-item {
    background: linear-gradient(135deg, var(--carte), var(--carte2));
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    padding: .6rem .4rem;
    text-align: center;
    transition: all var(--trans);
    position: relative;
    overflow: hidden;
    border-color: var(--or);
    background: linear-gradient(135deg, #2a1e06, var(--carte));
}

.amel-achetee-item:hover {
    box-shadow: 0 0 20px rgba(245, 166, 35, 0.15);
    transform: translateY(-2px);
}

.amel-achetee-icone {
    width: 44px;
    height: 44px;
    margin: 0 auto .3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.amel-achetee-icone img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    image-rendering: auto;
}

.amel-achetee-nom {
    font-weight: 700;
    font-size: .7rem;
    line-height: 1.3;
    color: var(--or);
}

/* ── Modals ───────────────────────────────────────────────────────────────── */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fondu-modal 0.3s ease;
}

@keyframes fondu-modal {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal-corps {
    background: linear-gradient(135deg, var(--carte2), #1a1208);
    border: 2px solid var(--bord-or);
    border-radius: var(--rayon-lg);
    padding: 2rem 2.2rem;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(245, 166, 35, 0.08);
    animation: entree-modal 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes entree-modal {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-corps h3 {
    font-family: 'MedievalSharp', serif;
    color: var(--or);
    font-size: 1.5rem;
    margin-bottom: 1.2rem;
    text-shadow: 0 0 15px rgba(245, 166, 35, 0.3);
}

.modal-corps p {
    color: var(--texte);
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.modal-corps textarea {
    width: 100%;
    background: var(--fond);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    color: var(--texte);
    padding: .75rem;
    font-size: .85rem;
    font-family: 'Fira Code', 'Consolas', monospace;
    resize: vertical;
    margin-bottom: 1rem;
    transition: border-color var(--trans);
}

.modal-corps textarea:focus {
    border-color: var(--or);
    outline: none;
}

.modal-boutons {
    display: flex;
    gap: .75rem;
}

/* ── Modales Transfert de session (code de reprise) ──────────────────────── */
.modal-transfert-corps {
    max-width: 520px;
}

.modal-transfert-corps p {
    margin-bottom: .8rem;
}

.transfert-etape {
    margin-bottom: 1rem;
}

.transfert-loader {
    text-align: center;
    color: var(--muted);
    font-style: italic;
    padding: 1rem 0;
}

.transfert-instructions {
    color: var(--texte);
}

.transfert-code-boite {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    background: var(--fond);
    border: 2px solid var(--or);
    border-radius: var(--rayon);
    padding: 1rem 1.2rem;
    margin: .5rem 0 .75rem;
    box-shadow: 0 0 24px rgba(245, 166, 35, 0.15) inset;
}

.transfert-code-valeur {
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: .25em;
    color: var(--or);
    text-shadow: 0 0 12px rgba(245, 166, 35, 0.35);
    user-select: all;
    flex: 1;
    text-align: center;
}

.transfert-btn-copier {
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    color: var(--texte);
    padding: .55rem .9rem;
    cursor: pointer;
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    transition: all var(--trans);
}

.transfert-btn-copier:hover {
    border-color: var(--or);
    color: var(--or);
    background: var(--carte2);
}

.transfert-timer {
    text-align: center;
    color: var(--muted);
    font-size: .85rem;
    margin-bottom: .5rem !important;
}

.transfert-timer-expire {
    color: #e57373;
    font-weight: 600;
}

.transfert-note {
    font-size: .78rem;
    color: var(--muted);
    font-style: italic;
    line-height: 1.4;
}

.transfert-erreur {
    color: #e57373;
    font-weight: 600;
    text-align: center;
    padding: .8rem 0;
}

.transfert-input {
    width: 100%;
    background: var(--fond);
    border: 2px solid var(--bord);
    border-radius: var(--rayon);
    color: var(--or);
    padding: .9rem 1rem;
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-align: center;
    text-transform: uppercase;
    margin: .5rem 0 .75rem;
    transition: border-color var(--trans);
}

.transfert-input:focus {
    border-color: var(--or);
    outline: none;
    box-shadow: 0 0 12px rgba(245, 166, 35, 0.25);
}

@media (max-width: 520px) {
    .transfert-code-valeur { font-size: 1.4rem; letter-spacing: .15em; }
    .transfert-input { font-size: 1.15rem; letter-spacing: .15em; }
    .transfert-code-boite { flex-direction: column; gap: .6rem; padding: .8rem; }
}

/* ── Modal Brasserie (plein écran, non fermable pendant les mini-jeux) ──── */
#modal-brasserie {
    -webkit-user-select: none;
    user-select: none;
}

/* Mode allégé pendant un mini-jeu : on fige les animations et on masque du
   rendu tout ce qui se trouve derrière la modale plein écran. Le but est
   de libérer GPU/CPU pour la frame du mini-jeu. */
body.brasserie-minijeu-actif > :not(#modal-brasserie) {
    content-visibility: hidden;
}
body.brasserie-minijeu-actif > :not(#modal-brasserie),
body.brasserie-minijeu-actif > :not(#modal-brasserie) * {
    animation-play-state: paused !important;
    transition: none !important;
}

/* Idem pour la Roue de la Fortune : pendant qu'elle tourne, le clicker en fond
   continuait à animer bulles, ingrédients, compteurs, etc. — ce qui faisait
   sautiller le SVG en rotation. On gèle tout ce qui n'est pas l'overlay. */
body.roue-fortune-active > :not(#roue-fortune-overlay) {
    content-visibility: hidden;
}
body.roue-fortune-active > :not(#roue-fortune-overlay),
body.roue-fortune-active > :not(#roue-fortune-overlay) * {
    animation-play-state: paused !important;
    transition: none !important;
}

.modal-brasserie-corps {
    max-width: 1000px;
    width: 95%;
    height: 95vh;
    max-height: 95vh;
    overflow: hidden;
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
}

/* Conteneur dynamique — empile progression + étape verticalement. */
#modal-brasserie-contenu {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

#modal-brasserie-contenu .brass-progression { flex-shrink: 0; }

#modal-brasserie-contenu .brass-etape {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
body.brasserie-jeu-en-cours #modal-brasserie-contenu .brass-progression {
    display: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--ambre), var(--ambre-f));
    border: 1px solid var(--or);
    border-radius: var(--rayon);
    color: #fff;
    padding: .7rem 1.8rem;
    cursor: pointer;
    font-weight: 800;
    font-size: .9rem;
    transition: all var(--trans);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--or), var(--ambre));
    box-shadow: 0 0 20px rgba(245, 166, 35, 0.3);
    transform: translateY(-1px);
}

.btn-primary:active { transform: translateY(0); }

.btn-secondary {
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    color: var(--muted);
    padding: .7rem 1.8rem;
    cursor: pointer;
    transition: all var(--trans);
    text-decoration: none;
    display: inline-block;
    font-weight: 600;
    font-size: .9rem;
}

.btn-secondary:hover {
    border-color: var(--texte);
    color: var(--texte);
    background: var(--carte2);
}

/* ── Modal réinitialisation ───────────────────────────────────────────────── */
.reinit-checkbox-ligne {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.2rem;
    color: var(--texte);
    cursor: pointer;
    user-select: none;
}

.reinit-checkbox-ligne input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    border: 2px solid var(--bord-or);
    border-radius: 4px;
    background: var(--fond);
    cursor: pointer;
    position: relative;
    transition: all var(--trans);
}

.reinit-checkbox-ligne input[type="checkbox"]:checked {
    background: linear-gradient(135deg, var(--ambre), var(--ambre-f));
    border-color: var(--or);
    box-shadow: 0 0 8px rgba(245, 166, 35, 0.3);
}

.reinit-checkbox-ligne input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .85rem;
    font-weight: 900;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.reinit-checkbox-ligne input[type="checkbox"]:hover {
    border-color: var(--or);
    box-shadow: 0 0 12px rgba(245, 166, 35, 0.2);
}

.reinit-checkbox-ligne span {
    line-height: 1.3;
}

/* ── Utilitaires ──────────────────────────────────────────────────────────── */
.cache { display: none !important; }

/* ── Saint-Patrick ────────────────────────────────────────────────────────── */
body.saint-patrick {
    --fond:        #040e04;
    --fond2:       #081408;
    --fond3:       #0a1a0a;
    --carte:       #0c1e0c;
    --carte2:      #132613;
    --carte-hover: #1a3a1a;
    --bord:        #1a4a1a;
    --bord-or:     #2d7a2d;
    --or:          #4caf50;
    --or-vif:      #66cc66;
    --ambre:       #388e3c;
    --ambre-f:     #2e7d32;
    --texte:       #c8f5c8;
    --texte-clair: #e0ffe0;
    --cuivre:      #66bb6a;
}

/* ── Oktoberfest ─────────────────────────────────────────────────────────── */
body.oktoberfest {
    --fond:        #080408;
    --fond2:       #100810;
    --fond3:       #180c18;
    --carte:       #1a0e1a;
    --carte2:      #251425;
    --carte-hover: #301a30;
    --bord:        #3d1a3d;
    --bord-or:     #7a3a7a;
    --or:          #e040a0;
    --or-vif:      #ff60c0;
    --ambre:       #c03080;
    --ambre-f:     #a02868;
}

/* ── Pâques ──────────────────────────────────────────────────────────────── */
body.paques {
    --fond:        #060a08;
    --fond2:       #0a120e;
    --fond3:       #0e1812;
    --carte:       #0e1a14;
    --carte2:      #16241c;
    --carte-hover: #1e3028;
    --bord:        #2a4a38;
    --bord-or:     #4a8a60;
    --or:          #e87aa0;
    --or-vif:      #f5a0be;
    --ambre:       #d06888;
    --ambre-f:     #b85878;
    --texte:       #e0f0e8;
    --texte-clair: #f0fff5;
    --cuivre:      #80c8a0;
}

/* ── Œufs de Pâques (flottants) ──────────────────────────────────────────── */
.oeuf-paques {
    position: absolute;
    width: 74px;
    height: 74px;
    cursor: pointer;
    pointer-events: all;
    opacity: 0;
    animation: rebond-oeuf 1.8s ease-in-out infinite, fondu-entree 0.8s ease forwards;
    z-index: 501;
}

.oeuf-paques::before {
    content: '';
    position: absolute;
    inset: -22px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(80, 255, 120, 0.7) 0%, rgba(0, 220, 80, 0.4) 35%, rgba(0, 180, 60, 0.15) 60%, transparent 80%);
    animation: lueur-oeuf-etincelle 1s ease-in-out infinite;
    pointer-events: none;
}

.oeuf-paques img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 14px rgba(80, 255, 120, 0.8)) drop-shadow(0 0 30px rgba(0, 220, 80, 0.5)) drop-shadow(0 0 50px rgba(0, 180, 60, 0.3));
}

.oeuf-paques.fondu-sortie {
    animation: rebond-oeuf 1.8s ease-in-out infinite, fondu-sortie 1s ease forwards;
}

@keyframes rebond-oeuf {
    0%, 100% { transform: translateY(0) rotate(-5deg) scale(1); }
    50%      { transform: translateY(-12px) rotate(5deg) scale(1.08); }
}

@keyframes lueur-oeuf-etincelle {
    0%   { opacity: 0.6; transform: scale(0.9);  }
    20%  { opacity: 1;   transform: scale(1.15); }
    40%  { opacity: 0.7; transform: scale(1.0);  }
    60%  { opacity: 1;   transform: scale(1.2);  }
    80%  { opacity: 0.75; transform: scale(1.05); }
    100% { opacity: 0.6; transform: scale(0.9);  }
}

/* ── Compteur d'œufs dans le bandeau effets ──────────────────────────────── */
/* ── Compteur d'œufs (col-centre, au-dessus de l'empire) ─────────────────── */
#paques-compteur {
    background: linear-gradient(135deg, rgba(14, 26, 20, 0.95), rgba(22, 36, 28, 0.9));
    border: 1px solid rgba(232, 122, 160, 0.3);
    border-radius: 8px;
    padding: .5rem .8rem;
    margin-bottom: .5rem;
    animation: apparition-carte .3s ease;
}

.paques-compteur-titre {
    font-size: .75rem;
    font-weight: 600;
    color: var(--or, #e87aa0);
    margin-bottom: .4rem;
    display: flex;
    align-items: center;
    gap: .3rem;
}

.paques-compteur-grille {
    display: flex;
    gap: .35rem;
    justify-content: center;
    flex-wrap: wrap;
}

.paques-oeuf-slot {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(232, 122, 160, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
}

.paques-oeuf-slot img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: grayscale(1) opacity(0.25);
    transition: all .3s ease;
}

.paques-oeuf-slot.collecte {
    border-color: rgba(232, 122, 160, 0.5);
    background: rgba(232, 122, 160, 0.1);
}

.paques-oeuf-slot.collecte img {
    filter: none;
}

.paques-compteur-bonus {
    font-size: .65rem;
    font-weight: 400;
    color: rgba(224, 240, 232, 0.5);
    margin-left: auto;
}

.paques-compteur-bonus.actif {
    color: #f5a0be;
    font-weight: 600;
}

/* ── Lapin de Pâques (traverse le bas de l'écran) ───────────────────────── */
#lapin-paques {
    position: fixed;
    bottom: 0;
    width: 70px;
    height: 70px;
    image-rendering: auto;
    filter: drop-shadow(2px 3px 4px rgba(0,0,0,0.4));
    z-index: 51;
    cursor: crosshair;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* ── BRASSERIE LÉGENDAIRE — Prestige & Arbre de compétences ────────────── */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ── Jauge de prestige (col-gauche) ──────────────────────────────────────── */
#jauge-prestige {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: .6rem .8rem;
    background: linear-gradient(135deg, rgba(60, 30, 80, 0.3), rgba(30, 15, 50, 0.5));
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 8px;
    margin-top: .5rem;
    transition: all var(--trans);
}

#jauge-prestige.jauge-pret {
    border-color: rgba(139, 92, 246, 0.6);
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.2);
    animation: jauge-pulse 2s ease-in-out infinite;
}

@keyframes jauge-pulse {
    0%, 100% { box-shadow: 0 0 15px rgba(139, 92, 246, 0.2); }
    50%      { box-shadow: 0 0 25px rgba(139, 92, 246, 0.4), 0 0 50px rgba(139, 92, 246, 0.1); }
}

#jauge-prestige-entete {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: .35rem;
}

#jauge-prestige-label {
    font-size: .7rem;
    font-weight: 700;
    color: #c4b5fd;
    text-transform: uppercase;
    letter-spacing: .5px;
}

#jauge-prestige-barre-fond {
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}

#jauge-prestige-barre {
    height: 100%;
    background: linear-gradient(90deg, #7c3aed, #a78bfa, #c4b5fd);
    border-radius: 3px;
    transition: width 1s linear;
    position: relative;
}

#jauge-prestige-barre::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    animation: jauge-brillance 2s ease-in-out infinite;
}

@keyframes jauge-brillance {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

#jauge-prestige-texte {
    font-size: .72rem;
    font-weight: 700;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}


#jauge-prestige-texte.jauge-pret {
    color: #a78bfa;
    animation: jauge-texte-pulse 1.5s ease-in-out infinite;
}

@keyframes jauge-texte-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .6; }
}

/* ── Bouton d'action prestige dans la jauge ────────────────────────────── */
#jauge-prestige-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin-top: .5rem;
    padding: .5rem .8rem;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    border: 1px solid rgba(167, 139, 250, 0.5);
    border-radius: 6px;
    cursor: pointer;
    transition: all .2s ease;
    animation: jauge-action-entree .4s ease-out;
}

#jauge-prestige-action:hover {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    border-color: rgba(196, 181, 253, 0.7);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}

#jauge-prestige-action:active {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.3);
}

.jauge-action-icone {
    font-size: .85rem;
    animation: jauge-etoile-spin 3s linear infinite;
}

.jauge-action-texte {
    font-size: .7rem;
    font-weight: 700;
    color: #e9e5ff;
    text-transform: uppercase;
    letter-spacing: .5px;
}

@keyframes jauge-action-entree {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes jauge-etoile-spin {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25%      { transform: scale(1.2) rotate(10deg); }
    50%      { transform: scale(1) rotate(0deg); }
    75%      { transform: scale(1.2) rotate(-10deg); }
}

/* ── En-tête onglet prestige ─────────────────────────────────────────────── */
#prestige-entete {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .8rem 1rem;
    background: linear-gradient(135deg, rgba(60, 30, 80, 0.25), rgba(30, 15, 50, 0.35));
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: var(--rayon);
    margin-bottom: 1rem;
}

.prestige-rang-badge {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.15), transparent);
    border: 2px solid rgba(139, 92, 246, 0.3);
    font-size: 2rem;
}

.prestige-rang-badge img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.4));
}

.prestige-rang-badge.rang-maitre,
.prestige-rang-badge.rang-grand-maitre,
.prestige-rang-badge.rang-legende {
    border-color: var(--or-dore);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
}

.prestige-rang-badge.rang-legende {
    animation: badge-legende 3s ease-in-out infinite;
}

@keyframes badge-legende {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.2), 0 0 40px rgba(139, 92, 246, 0.1); }
    50%      { box-shadow: 0 0 30px rgba(255, 215, 0, 0.4), 0 0 60px rgba(139, 92, 246, 0.2); }
}

#prestige-rang-info {
    flex: 1;
    min-width: 0;
}

.prestige-rang-nom {
    font-family: 'MedievalSharp', 'Georgia', serif;
    font-size: 1.2rem;
    font-weight: 400;
    margin-bottom: .2rem;
}

.rang-apprenti      { color: #cd7f32; }
.rang-compagnon     { color: #c0c0c0; }
.rang-artisan       { color: var(--or-dore); }
.rang-maitre        { color: var(--or-dore); text-shadow: 0 0 10px rgba(255, 215, 0, 0.4); }
.rang-grand-maitre  { color: #b9f2ff; text-shadow: 0 0 15px rgba(185, 242, 255, 0.4); }
.rang-legende       { color: var(--or-dore); text-shadow: 0 0 15px rgba(255, 215, 0, 0.5), 0 0 30px rgba(139, 92, 246, 0.3); }

#prestige-points-resume {
    font-size: .78rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.prestige-pts-label { font-weight: 600; }
.prestige-pts-val { color: #c4b5fd; font-weight: 800; font-size: .85rem; }
.prestige-pts-sep { color: rgba(139, 92, 246, 0.3); }

/* ── Compteur dans l'onglet nav ──────────────────────────────────────────── */
#prestige-compteur {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: .55rem;
    font-weight: 800;
    color: #c4b5fd;
    line-height: 1;
    transition: all var(--trans);
}

#prestige-compteur.prestige-compteur-actif {
    background: linear-gradient(135deg, #7c3aed, #9b59b6);
    color: #fff;
    padding: .15rem .35rem;
    border-radius: 8px;
    font-size: .55rem;
    animation: compteur-pulse 2s ease-in-out infinite;
}

@keyframes compteur-pulse {
    0%, 100% { box-shadow: 0 0 4px rgba(139, 92, 246, 0.3); }
    50%      { box-shadow: 0 0 10px rgba(139, 92, 246, 0.6); }
}

/* ── Arbre de compétences ────────────────────────────────────────────────── */
#arbre-competences {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.arbre-branche {
    background: linear-gradient(135deg, var(--carte), var(--carte2));
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    overflow: hidden;
    transition: all var(--trans);
}

.arbre-branche:hover {
    border-color: var(--branche-couleur, var(--bord-or));
}

.branche-entete {
    padding: .6rem .8rem;
    background: linear-gradient(135deg, rgba(0,0,0,0.2), transparent);
    border-bottom: 1px solid var(--bord);
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.branche-icone {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: drop-shadow(0 0 6px var(--branche-couleur));
}

.branche-titre {
    font-family: 'MedievalSharp', 'Georgia', serif;
    font-size: .95rem;
    color: var(--branche-couleur);
    text-shadow: 0 0 10px var(--branche-couleur);
}

.branche-desc {
    font-size: .68rem;
    color: var(--muted);
    flex-basis: 100%;
}

.branche-noeuds {
    padding: .5rem .6rem;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Nœuds de compétence ─────────────────────────────────────────────────── */
.noeud-competence {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .6rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--trans);
    opacity: .4;
    filter: saturate(0.3);
    position: relative;
}

.noeud-competence.verrouille {
    opacity: .25;
    filter: saturate(0) brightness(0.7);
    cursor: not-allowed;
}

.noeud-competence.disponible {
    opacity: 1;
    filter: saturate(1);
    background: rgba(139, 92, 246, 0.08);
}

.noeud-competence.disponible:hover {
    background: rgba(139, 92, 246, 0.15);
    transform: translateX(4px);
}

.noeud-competence.debloque {
    opacity: 1;
    filter: saturate(1);
    cursor: default;
}

.noeud-icone-cercle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--fond);
    border: 2px solid var(--bord);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .7rem;
    font-weight: 800;
    color: var(--muted);
    transition: all var(--trans);
}

.noeud-competence.disponible .noeud-icone-cercle {
    border-color: var(--branche-couleur);
    color: var(--branche-couleur);
    box-shadow: 0 0 10px var(--branche-couleur);
    animation: noeud-dispo-pulse 2s ease-in-out infinite;
}

@keyframes noeud-dispo-pulse {
    0%, 100% { box-shadow: 0 0 8px var(--branche-couleur); }
    50%      { box-shadow: 0 0 16px var(--branche-couleur); }
}

.noeud-competence.debloque .noeud-icone-cercle {
    border-color: var(--branche-couleur);
    background: var(--branche-couleur);
    color: #fff;
    box-shadow: 0 0 12px var(--branche-couleur);
}

.noeud-competence.debloque .noeud-icone-cercle .noeud-cout::before {
    content: '✓';
}

.noeud-competence.debloque .noeud-icone-cercle .noeud-cout {
    font-size: 0;
}

.noeud-competence.debloque .noeud-icone-cercle .noeud-cout::before {
    font-size: .85rem;
}

.noeud-info {
    flex: 1;
    min-width: 0;
}

.noeud-nom {
    font-weight: 700;
    font-size: .78rem;
    color: var(--texte);
    transition: color var(--trans);
}

.noeud-competence.debloque .noeud-nom {
    color: var(--branche-couleur);
}

.noeud-desc {
    font-size: .68rem;
    color: var(--muted);
    line-height: 1.3;
}

/* ── Connecteurs entre nœuds ─────────────────────────────────────────────── */
.noeud-connecteur {
    width: 2px;
    height: 12px;
    background: var(--bord);
    margin-left: 23px;
    transition: background var(--trans);
}

.noeud-connecteur.actif {
    background: var(--branche-couleur);
    box-shadow: 0 0 6px var(--branche-couleur);
}

/* ── Zone d'action prestige ──────────────────────────────────────────────── */
#prestige-action-zone {
    margin-top: 1rem;
    padding-top: .8rem;
    border-top: 1px solid var(--bord);
}

/* ── Modal prestige améliorée ────────────────────────────────────────────── */
.modal-prestige-corps {
    max-width: 520px;
}

.modal-prestige-titre {
    text-align: center;
    font-size: 1.6rem !important;
}

.prestige-recap {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: 1.5rem;
}

.prestige-recap-ligne {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem .8rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    font-size: .85rem;
    color: var(--texte);
}

.prestige-recap-valeur {
    font-weight: 800;
    color: #c4b5fd;
    font-size: .95rem;
}

.prestige-recap-warn {
    border-left: 3px solid var(--rouge);
    color: var(--muted);
    font-size: .78rem;
}

.prestige-recap-keep {
    border-left: 3px solid var(--vert);
    color: var(--muted);
    font-size: .78rem;
}

.btn-prestige-confirmer {
    background: linear-gradient(135deg, #4a1d96, #7c3aed) !important;
    border-color: rgba(139, 92, 246, 0.5) !important;
    color: #e9d5ff !important;
}

.btn-prestige-confirmer:hover {
    background: linear-gradient(135deg, #5b21b6, #8b5cf6) !important;
    box-shadow: 0 0 25px rgba(139, 92, 246, 0.4) !important;
}

/* ── Effet Waouh Prestige ─────────────────────────────────────────────────── */

/* Overlay plein écran */
.prestige-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    overflow: hidden;
}

/* Fond d'explosion (image) */
.prestige-fond {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 120vmax; height: 120vmax;
    object-fit: cover;
    opacity: 0;
    animation: prestige-fond-anim 3.5s ease-out forwards;
}

@keyframes prestige-fond-anim {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-5deg); }
    15%  { opacity: .85; transform: translate(-50%, -50%) scale(1.05) rotate(0deg); }
    40%  { opacity: .7; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2) rotate(3deg); }
}

/* Cadre décoratif */
.prestige-cadre {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: min(90vw, 90vh); height: min(90vw, 90vh);
    object-fit: contain;
    opacity: 0;
    animation: prestige-cadre-anim 3.5s ease-out forwards;
    animation-delay: .2s;
    filter: drop-shadow(0 0 30px rgba(255, 215, 0, .6));
}

@keyframes prestige-cadre-anim {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(.5) rotate(-3deg); }
    20%  { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
    75%  { opacity: .9; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05) rotate(1deg); }
}

/* Flash doré initial */
.prestige-flash {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255, 215, 0, .9), rgba(139, 92, 246, .6), transparent 70%);
    opacity: 0;
    animation: prestige-flash-anim 1.2s ease-out forwards;
}

@keyframes prestige-flash-anim {
    0%   { opacity: 0; transform: scale(.8); }
    15%  { opacity: 1; transform: scale(1.1); }
    100% { opacity: 0; transform: scale(2); }
}

/* Onde de choc */
.prestige-shockwave {
    position: absolute;
    top: 50%; left: 50%;
    width: 60px; height: 60px;
    margin: -30px 0 0 -30px;
    border-radius: 50%;
    border: 4px solid rgba(255, 215, 0, .9);
    box-shadow: 0 0 40px 10px rgba(255, 215, 0, .5), inset 0 0 30px rgba(255, 215, 0, .3);
    opacity: 1;
    animation: prestige-shockwave-anim 1.4s cubic-bezier(.2, .8, .2, 1) forwards;
}

.prestige-shockwave-2 {
    animation-delay: .15s;
    border-color: rgba(139, 92, 246, .8);
    box-shadow: 0 0 40px 10px rgba(139, 92, 246, .4), inset 0 0 30px rgba(139, 92, 246, .2);
}

@keyframes prestige-shockwave-anim {
    0%   { transform: scale(1); opacity: 1; }
    100% { transform: scale(45); opacity: 0; }
}

/* Rayons de lumière */
.prestige-rayons {
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    animation: prestige-rayons-anim 2.5s ease-out forwards;
}

.prestige-rayons::before {
    content: '';
    position: absolute;
    top: -50vh; left: -3px;
    width: 6px; height: 100vh;
    background: linear-gradient(to bottom, transparent, rgba(255, 215, 0, .6), transparent);
    box-shadow: 0 0 20px rgba(255, 215, 0, .4);
}

@keyframes prestige-rayons-anim {
    0%   { opacity: 0; transform: rotate(var(--ray-angle)) scale(.3); }
    20%  { opacity: 1; transform: rotate(var(--ray-angle)) scale(1); }
    100% { opacity: 0; transform: rotate(calc(var(--ray-angle) + 30deg)) scale(1.5); }
}

/* Particules (images) */
.prestige-particule {
    position: absolute;
    top: 50%; left: 50%;
    width: 40px; height: 40px;
    object-fit: contain;
    opacity: 0;
    animation: prestige-particule-anim var(--p-dur, 2s) var(--p-delay, 0s) ease-out forwards;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, .8));
}

@keyframes prestige-particule-anim {
    0%   { opacity: 0; transform: translate(0, 0) scale(0) rotate(0deg); }
    15%  { opacity: 1; transform: translate(calc(var(--p-x) * .3), calc(var(--p-y) * .3)) scale(1.3) rotate(calc(var(--p-rot) * .3)); }
    60%  { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--p-x), var(--p-y)) scale(.4) rotate(var(--p-rot)); }
}

/* Pluie de particules dorées */
.prestige-etoile-pluie {
    position: absolute;
    top: -40px;
    width: 24px; height: 24px;
    object-fit: contain;
    opacity: 0;
    animation: prestige-pluie-anim var(--rain-dur, 2.5s) var(--rain-delay, 0s) ease-in forwards;
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, .6));
}

@keyframes prestige-pluie-anim {
    0%   { opacity: 0; transform: translateY(0) rotate(0deg); }
    10%  { opacity: 1; }
    80%  { opacity: .8; }
    100% { opacity: 0; transform: translateY(calc(100vh + 60px)) rotate(720deg); }
}

/* Texte central PRESTIGE */
.prestige-texte-central {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0);
    text-align: center;
    animation: prestige-texte-anim 3.5s cubic-bezier(.2, .8, .2, 1) forwards;
    animation-delay: .3s;
}

.prestige-texte-titre {
    font-family: 'MedievalSharp', serif;
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 900;
    color: transparent;
    background: linear-gradient(180deg, #ffd700, #ff8c00, #ffd700);
    background-clip: text;
    -webkit-background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 0 30px rgba(255, 215, 0, .8)) drop-shadow(0 4px 8px rgba(0, 0, 0, .6));
    letter-spacing: .15em;
    text-transform: uppercase;
}

.prestige-texte-points {
    font-size: clamp(1.2rem, 3vw, 2rem);
    color: #e9d5ff;
    margin-top: .5rem;
    font-weight: 700;
    text-shadow: 0 0 20px rgba(139, 92, 246, .8), 0 2px 4px rgba(0, 0, 0, .6);
    opacity: 0;
    animation: prestige-pts-anim 1.5s ease-out forwards;
    animation-delay: 1s;
}

.prestige-texte-rang {
    font-size: clamp(.9rem, 2vw, 1.3rem);
    color: #fbbf24;
    margin-top: .3rem;
    font-weight: 600;
    text-shadow: 0 0 15px rgba(251, 191, 36, .6), 0 2px 4px rgba(0, 0, 0, .6);
    opacity: 0;
    animation: prestige-pts-anim 1.5s ease-out forwards;
    animation-delay: 1.4s;
}

@keyframes prestige-texte-anim {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(-10deg); opacity: 0; }
    30%  { transform: translate(-50%, -50%) scale(1.15) rotate(2deg); opacity: 1; }
    45%  { transform: translate(-50%, -50%) scale(.95) rotate(-1deg); }
    60%  { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
    80%  { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(.8) rotate(0deg); opacity: 0; }
}

@keyframes prestige-pts-anim {
    0%   { opacity: 0; transform: translateY(20px) scale(.5); }
    40%  { opacity: 1; transform: translateY(-5px) scale(1.1); }
    60%  { transform: translateY(0) scale(1); }
    80%  { opacity: 1; }
    100% { opacity: 0; }
}

/* Tremblement d'écran */
.prestige-shake {
    animation: prestige-shake-anim .6s ease-out;
}

@keyframes prestige-shake-anim {
    0%, 100% { transform: translate(0); }
    10%  { transform: translate(-8px, 4px); }
    20%  { transform: translate(6px, -6px); }
    30%  { transform: translate(-5px, 3px); }
    40%  { transform: translate(4px, -3px); }
    50%  { transform: translate(-3px, 5px); }
    60%  { transform: translate(3px, -2px); }
    70%  { transform: translate(-2px, 2px); }
    80%  { transform: translate(1px, -1px); }
}

/* Vignette dramatique */
.prestige-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, .7) 100%);
    opacity: 0;
    animation: prestige-vignette-anim 3.5s ease-in-out forwards;
}

@keyframes prestige-vignette-anim {
    0%   { opacity: 0; }
    20%  { opacity: 1; }
    75%  { opacity: 1; }
    100% { opacity: 0; }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    #col-gauche { min-width: 260px; }
    #col-droite { min-width: 300px; }
    #grille-empire { grid-template-columns: repeat(auto-fill, minmax(max(95px, calc((100% - 3rem) / 4)), 1fr)); }
}

@media (max-width: 900px) {
    #jeu-conteneur {
        flex-direction: column;
    }

    #col-gauche,
    #col-droite {
        width: 100%;
        max-width: none;
        min-width: unset;
        position: static;
        height: auto;
    }

    #col-gauche {
        border-right: none;
        border-bottom: 2px solid var(--bord);
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
        padding: 1rem;
        gap: .6rem;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "entete   entete"
            "compteurs biere"
            "effets   effets"
            "jauge    jauge";
        align-items: center;
        overflow: hidden;
        position: relative;
    }

    #entete-jeu {
        grid-area: entete;
        width: 100%;
        padding-bottom: .4rem;
    }

    #entete-jeu h1 { font-size: 1.3rem; padding: .4rem .8rem; }

    #compteurs {
        grid-area: compteurs;
        width: auto;
        text-align: left;
        padding: 0;
    }

    #zone-clic {
        grid-area: biere;
        flex: 0;
        padding: 0;
        width: auto;
    }

    #img-biere { width: 100px; height: 100px; }

    #effets-actifs {
        grid-area: effets;
        margin-top: 0;
    }

    #zone-toasts { width: 100%; }

    #col-centre {
        min-height: 300px;
        padding: 1rem;
    }

    #col-droite {
        border-left: none;
        border-top: 2px solid var(--bord);
        box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.4);
    }

    #onglets-droite {
        overflow: visible;
        flex-wrap: nowrap;
    }

    #onglets-droite > .onglet {
        flex-shrink: 1;
        min-width: 0;
    }

    .onglet { font-size: .63rem; padding: .5rem .4rem; min-width: 0; }

    #jauge-prestige {
        grid-area: jauge;
    }

    #prestige-entete { flex-direction: column; text-align: center; gap: .5rem; }
    #prestige-points-resume { justify-content: center; }
}

@media (max-width: 500px) {
    html { font-size: 14px; }
    .compteur-principal { font-size: 1.6rem; }
    .compteur-secondaire { font-size: .8rem; }

    #col-gauche {
        padding: .8rem;
        gap: .5rem;
    }

    #img-biere { width: 80px; height: 80px; }

    #liste-ameliorations {
        grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
    }

    #liste-succes {
        grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
    }

    #actions-save { flex-direction: column; }
}


/* ── Classement ──────────────────────────────────────────────────────────────── */

.classement-intro {
    text-align: center;
    padding: 2rem 1rem;
}

.classement-intro p {
    color: var(--texte);
    margin-bottom: 0.5rem;
}

.classement-intro-detail {
    color: var(--muted);
    font-size: 0.85rem;
}

.btn-classement-inscrire {
    margin-top: 1rem;
    background: linear-gradient(135deg, var(--or), var(--ambre));
    color: var(--fond);
    font-weight: 700;
    padding: 0.7rem 1.5rem;
    border: none;
    border-radius: var(--rayon);
    cursor: pointer;
    font-size: 1rem;
    transition: var(--trans);
}

.btn-classement-inscrire:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(245, 166, 35, 0.4);
}

.classement-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.8rem;
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    margin-bottom: 0.8rem;
    color: var(--muted);
    font-size: 0.85rem;
}

.classement-mon-rang {
    color: var(--or);
}

.classement-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.classement-table thead th {
    background: var(--carte2);
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    padding: 0.5rem 0.4rem;
    text-align: center;
    border-bottom: 1px solid var(--bord);
}

.classement-table thead th.cl-nom {
    text-align: left;
}

.classement-table tbody td {
    padding: 0.5rem 0.4rem;
    text-align: center;
    color: var(--texte);
    border-bottom: 1px solid rgba(61, 42, 20, 0.4);
    vertical-align: middle;
}

.classement-table tbody td.cl-nom {
    text-align: left;
    font-weight: 600;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.classement-table tbody td.cl-score {
    color: var(--or);
    font-weight: 700;
}

.classement-table tbody td.cl-detail {
    color: var(--muted);
    font-size: 0.8rem;
}

.classement-table tbody tr:hover {
    background: var(--carte-hover);
}

.classement-table tbody tr.classement-moi {
    background: rgba(245, 166, 35, 0.1);
    border-left: 3px solid var(--or);
}

.classement-table tbody tr.classement-moi td.cl-nom {
    color: var(--or-vif);
}

/* Médailles */
.medaille {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-weight: 800;
    font-size: 0.75rem;
    color: var(--fond);
}

.medaille.or {
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

.medaille.argent {
    background: linear-gradient(135deg, #c0c0c0, #a0a0a0);
    box-shadow: 0 0 6px rgba(192, 192, 192, 0.4);
}

.medaille.bronze {
    background: linear-gradient(135deg, #cd7f32, #a0622a);
    box-shadow: 0 0 6px rgba(205, 127, 50, 0.4);
}

.classement-separateur {
    text-align: center;
    color: var(--muted);
    padding: 0.4rem 0;
    font-size: 1.2rem;
    letter-spacing: 0.3em;
}

.classement-moi-table {
    border-top: 1px solid var(--bord-or);
}

.classement-chargement,
.classement-erreur,
.classement-vide {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--muted);
}

.classement-erreur {
    color: var(--rouge);
}

#classement-rang-badge {
    background: linear-gradient(135deg, var(--or), var(--ambre));
    color: var(--fond);
    font-weight: 800;
    font-size: 0.65rem;
    padding: 1px 5px;
    border-radius: 8px;
    margin-left: 4px;
}

@media (max-width: 900px) {
    .cl-hide-mobile { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   BRASSERIE ARTISANALE — Mini-jeu
   ══════════════════════════════════════════════════════════════════════════════ */

#zone-brasserie {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--bord);
}

#titre-brasserie {
    font-family: 'MedievalSharp', 'Georgia', serif;
    font-size: 1.5rem;
    color: var(--or);
    text-align: center;
    margin-bottom: 1.2rem;
    text-shadow: 0 0 20px rgba(245, 166, 35, 0.4), 0 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 1px;
}
/* ── Résumé brasserie (mode replié) ───────────────────────────────────────── */
.brasserie-resume {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: .3rem 0 .8rem;
    opacity: 0;
    transition: opacity .3s ease;
}
.brasserie-resume.visible {
    display: flex;
    opacity: 1;
}
.brasserie-resume-cooldown {
    font-size: .85rem;
    color: var(--muted);
    font-style: italic;
}
.brasserie-resume-cooldown.brasserie-resume-pret {
    color: var(--or);
    font-style: normal;
    font-weight: 600;
}
.brasserie-resume-collection {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .4rem;
}
.brasserie-resume-collection img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: drop-shadow(0 0 4px rgba(245, 166, 35, 0.3));
}
.brasserie-resume-collection img.brasserie-resume-inconnu {
    opacity: .3;
    filter: grayscale(1);
}

#titre-brasserie .icone-emoji {
    width: .96em;
    height: .96em;
    vertical-align: baseline;
    position: relative;
    top: .1em;
}

/* ── Sélection d'ingrédients ─────────────────────────────────────────────── */

.brass-intro {
    text-align: center;
    color: var(--muted);
    font-size: .85rem;
    margin-bottom: 1rem;
}

.brass-categorie {
    margin-bottom: 1rem;
}

.brass-cat-titre {
    font-size: .9rem;
    color: var(--or);
    margin-bottom: .5rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.brass-ingredients {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.brass-ingredient {
    background: linear-gradient(135deg, var(--carte), var(--carte2));
    border: 2px solid var(--bord);
    border-radius: var(--rayon);
    padding: .5rem .7rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    transition: all var(--trans);
    color: var(--texte);
    font-size: .8rem;
    font-family: inherit;
}

.brass-ingredient img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    image-rendering: pixelated;
}

.brass-ingredient:hover:not(.brass-verrouille) {
    border-color: var(--or);
    background: var(--carte-hover);
}

.brass-ingredient.brass-selectionne {
    border-color: var(--or-vif);
    background: linear-gradient(135deg, rgba(245, 166, 35, 0.15), rgba(200, 134, 10, 0.1));
    box-shadow: 0 0 12px rgba(245, 166, 35, 0.2);
}

.brass-ingredient.brass-verrouille {
    opacity: .4;
    cursor: not-allowed;
    filter: grayscale(1);
}

.brass-seuil {
    font-size: .65rem;
    color: var(--muted);
    display: block;
    margin-top: 2px;
}

/* ── Recette + bouton lancer ─────────────────────────────────────────────── */

.brass-recette-zone {
    text-align: center;
    margin: 1rem 0;
    padding: 1rem;
    background: linear-gradient(135deg, var(--carte), var(--carte2));
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
}

.brass-recette-info {
    font-size: .9rem;
    margin-bottom: .8rem;
    color: var(--texte);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.brass-recette-icone {
    width: 36px;
    height: 36px;
    object-fit: contain;
    image-rendering: pixelated;
}

.brass-recette-libre {
    color: var(--muted);
    font-style: italic;
}

.brass-btn-lancer {
    font-size: 1.05rem;
    padding: .8rem 2.2rem;
    background: linear-gradient(135deg, var(--or), var(--ambre));
    color: var(--fond);
    font-weight: 700;
    border: 2px solid rgba(245, 166, 35, 0.5);
    border-radius: 10px;
    cursor: pointer;
    transition: all .15s ease;
    box-shadow: 0 3px 12px rgba(245, 166, 35, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    letter-spacing: .02em;
}

.brass-btn-lancer:hover:not(:disabled) {
    background: linear-gradient(135deg, #f5b800, var(--or));
    border-color: var(--or-vif);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(245, 166, 35, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.brass-btn-lancer:active:not(:disabled) {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 1px 6px rgba(245, 166, 35, 0.3);
}

.brass-btn-lancer:disabled {
    opacity: .35;
    cursor: not-allowed;
    filter: grayscale(0.6);
    box-shadow: none;
}

.brass-btn-lancer .brass-btn-icone {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.brass-cooldown {
    color: var(--muted);
    font-size: .82rem;
    margin-bottom: .6rem;
}

/* ── Collection ──────────────────────────────────────────────────────────── */

.brass-collection {
    margin-top: 1.5rem;
}

.brass-collection-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: .6rem;
    margin-top: .5rem;
}

.brass-collection-item {
    background: linear-gradient(135deg, var(--carte), var(--carte2));
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    padding: .6rem;
    padding-bottom: .4rem;
    text-align: center;
    overflow: hidden;
    transition: all var(--trans);
}

.brass-collection-item img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    image-rendering: pixelated;
    margin-bottom: .3rem;
}

.brass-collection-nom {
    display: block;
    font-size: .72rem;
    color: var(--texte);
    font-weight: 600;
}

.brass-collection-etoiles {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin-top: .2rem;
}

.brass-etoile {
    width: 14px;
    height: 14px;
    max-width: 14px;
    max-height: 14px;
    flex-shrink: 0;
}

.brass-collection-etoiles .brass-etoile {
    width: 16px;
    height: 16px;
    max-width: 16px;
    max-height: 16px;
}

.brass-decouvert {
    border-color: var(--bord-or);
}

.brass-decouvert:hover {
    border-color: var(--or);
    box-shadow: var(--shadow-or);
}

.brass-inconnu {
    opacity: .5;
    filter: grayscale(.5);
}

/* ── Progression des étapes ──────────────────────────────────────────────── */

.brass-progression {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
}

.brass-prog-etape {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .3rem .5rem;
    border-radius: 6px;
    font-size: .65rem;
    color: var(--muted);
    background: var(--carte);
    border: 1px solid var(--bord);
    min-width: 60px;
    transition: all var(--trans);
}

.brass-prog-etape.brass-prog-active {
    color: var(--or-vif);
    border-color: var(--or);
    background: linear-gradient(135deg, rgba(245, 166, 35, 0.1), transparent);
    box-shadow: 0 0 10px rgba(245, 166, 35, 0.2);
}

.brass-prog-etape.brass-prog-ok {
    color: var(--vert);
    border-color: var(--vert);
    background: linear-gradient(135deg, rgba(92, 184, 92, 0.08), transparent);
}

.brass-prog-icone {
    width: 20px;
    height: 20px;
    object-fit: contain;
    margin-bottom: 2px;
}

.brass-prog-score {
    font-size: .6rem;
    font-weight: 700;
    margin-top: 2px;
}

.brass-prog-fleche {
    color: var(--muted);
    font-size: .7rem;
}

/* ── Zone de jeu (étapes) ────────────────────────────────────────────────── */

.brass-etape {
    background: linear-gradient(135deg, var(--carte), var(--carte2));
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    padding: .8rem 1rem;
}

/* Iframe des mini-jeux — remplit l'espace disponible dans .brass-etape.
   Pas de hauteur fixe : flex:1 pour occuper tout le reste de la modale
   (canvas interne : min 500 px garantis par brasserie_theme.css). */
.brass-jeu-iframe {
    flex: 1 1 auto;
    min-height: 680px;
    width: 100%;
    max-width: 920px;
    border: 0;
    border-radius: var(--rayon);
    background: var(--carte);
    display: block;
    margin: .5rem auto 0;
    transition: opacity .3s ease;
}

/* État avant `load` — laisse la place à `.brass-chargement`. */
.brass-jeu-iframe-invisible {
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

/* ── Écran d'attente : chope de bière en CSS pur ───────────────────────── */

.brass-chargement {
    flex: 1 1 auto;
    min-height: 680px;
    width: 100%;
    max-width: 920px;
    margin: .5rem auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    border-radius: var(--rayon);
    border: 1px solid var(--bord);
    background:
        radial-gradient(ellipse at center, rgba(245, 166, 35, 0.10), transparent 60%),
        linear-gradient(135deg, var(--carte), var(--carte2));
    color: var(--texte);
}

/* Conteneur de la chope — la largeur inclut l'anse (à droite) */
.brass-chope {
    position: relative;
    width: 210px;
    height: 230px;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.5));
}

/* ── Verre ──────────────────────────────────────────────────────────────
   Effet "verre épais" via double box-shadow (reflets clairs à gauche,
   ombres à droite), fond très légèrement translucide. */
.brass-chope-verre {
    position: absolute;
    left: 0; top: 0;
    width: 150px;
    height: 100%;
    border: 3px solid rgba(245, 230, 200, 0.85);
    border-top-width: 4px;
    border-radius: 6px 6px 18px 18px;
    overflow: hidden;
    background:
        linear-gradient(90deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.02) 25%,
            rgba(0, 0, 0, 0.04) 70%,
            rgba(0, 0, 0, 0.20) 100%);
    box-shadow:
        inset 6px 0 10px rgba(255, 255, 255, 0.08),
        inset -8px 0 12px rgba(0, 0, 0, 0.25),
        inset 0 -4px 8px rgba(0, 0, 0, 0.35);
}

/* Reflet vertical épais (côté gauche) */
.brass-chope-reflet {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 5px;
    height: 78%;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.55),
        rgba(255, 255, 255, 0.10) 60%,
        transparent);
    border-radius: 3px;
    z-index: 5;
}

/* Reflet fin secondaire (côté gauche, plus décalé) */
.brass-chope-reflet-fin {
    position: absolute;
    top: 20px;
    left: 22px;
    width: 2px;
    height: 50%;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.35),
        transparent);
    border-radius: 2px;
    z-index: 5;
}

/* ── Anse ───────────────────────────────────────────────────────────────
   Arc en "C" inversé à droite du verre. */
.brass-chope-anse {
    position: absolute;
    left: 142px;
    top: 44px;
    width: 56px;
    height: 118px;
    border: 10px solid rgba(245, 230, 200, 0.85);
    border-left: 0;
    border-radius: 0 34px 34px 0;
    box-shadow:
        inset -3px 0 6px rgba(0, 0, 0, 0.25),
        inset 3px 0 4px rgba(255, 255, 255, 0.15);
}

/* ── Liquide ────────────────────────────────────────────────────────────
   Dégradé ambré riche (plus clair en haut, plus sombre au fond), qui
   monte avec une courbe easing naturelle. */
.brass-chope-liquide {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 0;
    background:
        linear-gradient(180deg,
            #F6B93B 0%,
            #E69B1A 18%,
            #C07A10 45%,
            #8E5C12 80%,
            #5C3A0E 100%);
    animation: brass-remplir 2.6s cubic-bezier(.4,.1,.5,1) infinite;
    overflow: visible;
}

/* Ligne de lumière horizontale juste sous la surface (effet ménisque) */
.brass-chope-liquide::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 220, 150, 0.6) 40%,
        rgba(255, 220, 150, 0.6) 60%,
        transparent);
}

/* ── Bulles dans le liquide ─────────────────────────────────────────────
   Petites sphères blanches qui montent du fond vers la surface. */
.brass-bulle {
    position: absolute;
    bottom: 2%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        rgba(255, 255, 255, 0.95),
        rgba(255, 255, 255, 0.30) 60%,
        rgba(255, 255, 255, 0.05));
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);
    opacity: 0;
    animation: brass-bulle-monte 2s ease-in infinite;
}
.brass-bulle.b1 { left: 18%; width: 5px;  height: 5px;  animation-delay: .1s; animation-duration: 1.6s; }
.brass-bulle.b2 { left: 42%; width: 7px;  height: 7px;  animation-delay: .5s; animation-duration: 2.0s; }
.brass-bulle.b3 { left: 62%; width: 4px;  height: 4px;  animation-delay: .9s; animation-duration: 1.4s; }
.brass-bulle.b4 { left: 78%; width: 6px;  height: 6px;  animation-delay: 1.3s; animation-duration: 1.8s; }
.brass-bulle.b5 { left: 30%; width: 8px;  height: 8px;  animation-delay: .3s; animation-duration: 2.2s; }
.brass-bulle.b6 { left: 55%; width: 5px;  height: 5px;  animation-delay: 1.7s; animation-duration: 1.5s; }

@keyframes brass-bulle-monte {
    0%   { bottom: 2%;  opacity: 0; transform: scale(.4) translateX(0); }
    15%  { opacity: 1; transform: scale(1) translateX(0); }
    50%  { transform: scale(1) translateX(3px); }
    85%  { opacity: 1; transform: scale(1.1) translateX(-2px); }
    100% { bottom: 96%; opacity: 0; transform: scale(1.2) translateX(1px); }
}

/* ── Mousse ──────────────────────────────────────────────────────────────
   Grappe de bulles rondes blanc-crème de tailles variables posées sur le
   haut du liquide. Chacune est une sphère avec un léger ombrage pour
   simuler le volume. */
.brass-mousse {
    position: absolute;
    top: -14px;
    left: -4px;
    right: -4px;
    height: 28px;
    pointer-events: none;
    z-index: 4;
}

.brass-mousse-bulle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%,
        #FFFFFF 0%,
        #FAF3DC 45%,
        #E6D9B3 85%,
        #C9B684 100%);
    box-shadow:
        inset -2px -3px 5px rgba(120, 90, 40, 0.18),
        inset 2px 2px 3px rgba(255, 255, 255, 0.65),
        0 1px 2px rgba(0, 0, 0, 0.12);
}

.brass-mousse-bulle.m1 { width: 16px; height: 16px; left:  2px; bottom:  4px; }
.brass-mousse-bulle.m2 { width: 22px; height: 22px; left: 16px; bottom:  0; }
.brass-mousse-bulle.m3 { width: 28px; height: 28px; left: 38px; bottom: -3px; }
.brass-mousse-bulle.m4 { width: 24px; height: 24px; left: 66px; bottom: -1px; }
.brass-mousse-bulle.m5 { width: 20px; height: 20px; left: 92px; bottom:  2px; }
.brass-mousse-bulle.m6 { width: 16px; height: 16px; left: 116px; bottom: 4px; }
.brass-mousse-bulle.m7 { width: 12px; height: 12px; left: 134px; bottom: 6px; }

@keyframes brass-remplir {
    0%   { height: 0; }
    55%  { height: 78%; }
    100% { height: 78%; }
}

.brass-chargement-texte {
    font-family: 'MedievalSharp', 'Georgia', serif;
    font-size: 1.15rem;
    letter-spacing: .06em;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
    animation: brass-chargement-points 1.6s ease-in-out infinite;
}

@keyframes brass-chargement-points {
    0%, 100% { opacity: 0.65; }
    50%      { opacity: 1; }
}

.brass-jeu-consigne {
    text-align: center;
    font-size: .85rem;
    color: var(--texte-clair);
    margin-bottom: 1rem;
    font-weight: 600;
}

.brass-btn-jeu {
    font-size: 1rem;
    padding: .7rem 1.8rem;
    background: linear-gradient(135deg, var(--or), var(--ambre));
    color: var(--fond);
    font-weight: 700;
    border: 2px solid rgba(245, 166, 35, 0.5);
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: all .15s ease;
    box-shadow: 0 3px 10px rgba(245, 166, 35, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    letter-spacing: .02em;
}

.brass-btn-jeu:hover:not(:disabled) {
    background: linear-gradient(135deg, #f5b800, var(--or));
    border-color: var(--or-vif);
    box-shadow: 0 4px 18px rgba(245, 166, 35, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

.brass-btn-jeu:active:not(:disabled) {
    transform: scale(0.95) translateY(0);
    box-shadow: 0 1px 4px rgba(245, 166, 35, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.brass-btn-jeu.brass-btn-maintien:active:not(:disabled) {
    background: linear-gradient(135deg, #ff8c00, #e67300);
    border-color: #ff8c00;
    box-shadow: 0 0 20px rgba(255, 140, 0, 0.5), inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.brass-btn-jeu:disabled {
    opacity: .35;
    cursor: not-allowed;
    filter: grayscale(0.6);
    box-shadow: none;
}

.brass-btn-jeu .brass-btn-icone {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ── Résultat d'étape ────────────────────────────────────────────────────── */

.brass-etape-resultat {
    text-align: center;
    animation: fondu-entree .3s ease;
}

.brass-etape-score-label {
    font-size: .85rem;
    color: var(--muted);
    margin-bottom: .3rem;
}

.brass-etape-score {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: .3rem;
}

.brass-etape-score .brass-etoile {
    width: 28px;
    height: 28px;
}

.brass-etape-score-nb {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--or-vif);
}

.brass-etape-stats {
    margin-top: .7rem;
    padding: .5rem 1rem;
    display: inline-block;
    font-size: .95rem;
    color: var(--texte-clair);
    background: var(--fond2);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
}

.brass-etape-message {
    margin-top: .5rem;
    font-size: .9rem;
    color: var(--muted);
    font-style: italic;
}

/* Décompte visuel des pénalités d'étoiles (mini-jeu Brassage et autres).
   Affiche ligne par ligne : étoiles gagnées au score, puis chaque pénalité
   avec sa cause et sa valeur (−1 ⭐), puis le total final. */
.brass-penalites-bloc {
    margin: .7rem auto 0;
    max-width: 520px;
    padding: .55rem .75rem;
    background: var(--fond2);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    text-align: left;
    font-style: normal;
}
.brass-penalites-ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .3rem .1rem;
    font-size: .88rem;
    color: var(--texte);
}
.brass-penalites-ligne + .brass-penalites-ligne {
    border-top: 1px solid var(--bord-doux);
}
.brass-penalites-libelle { flex: 1; }
.brass-penalites-etoiles {
    flex-shrink: 0;
    font-family: 'MedievalSharp', 'Georgia', serif;
    font-size: 1.05rem;
    letter-spacing: 2px;
}
.brass-penalites-base .brass-penalites-gagnees {
    color: var(--or-dore);
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
}
.brass-penalites-perte {
    background: rgba(220, 60, 40, 0.08);
}
.brass-penalites-perte .brass-penalites-libelle { color: var(--rouge, #e04848); }
.brass-penalites-perdue {
    color: #e04848;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: 1px;
}
.brass-penalites-total {
    margin-top: .2rem;
    padding-top: .45rem;
    border-top: 1px solid var(--or) !important;
    font-weight: 700;
}
.brass-penalites-total .brass-penalites-etoiles {
    color: var(--or-vif, var(--or));
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.7);
    font-size: 1.15rem;
}
.brass-penalites-astuce {
    margin-top: .55rem;
    font-size: .88rem;
    color: var(--muted);
    font-style: italic;
}


/* Grille des paliers d'étoiles (affichée si etoiles < 3) */
.brass-etape-seuils {
    margin: .8rem auto 0;
    max-width: 520px;
    padding: .6rem .9rem;
    background: var(--fond2);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    text-align: left;
}
.brass-etape-seuils-titre {
    font-family: 'MedievalSharp', 'Georgia', serif;
    color: var(--or);
    font-size: .9rem;
    text-align: center;
    margin-bottom: .4rem;
}
.brass-seuil {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .25rem .3rem;
    font-size: .85rem;
    border-radius: 4px;
}
.brass-seuil + .brass-seuil { border-top: 1px solid var(--bord-doux); }
.brass-seuil-etoiles {
    flex-shrink: 0;
    width: 48px;
    color: var(--or-dore);
    letter-spacing: 1px;
    font-size: .95rem;
}
.brass-seuil-desc { color: var(--texte); flex: 1; }
.brass-seuil-atteint .brass-seuil-desc { color: var(--vert); }
.brass-seuil-atteint .brass-seuil-etoiles { text-shadow: 0 0 6px rgba(255, 215, 0, 0.6); }
.brass-seuil-manque .brass-seuil-etoiles { color: var(--muted); }
.brass-seuil-manque .brass-seuil-desc { color: var(--muted); }

.brass-btn-suivant {
    margin-top: 1.2rem;
    padding: .6rem 1.6rem;
    font-family: 'MedievalSharp', 'Georgia', serif;
    font-size: 1rem;
    letter-spacing: .03em;
    color: var(--fond);
    background: linear-gradient(180deg, var(--or-vif), var(--ambre));
    border: 1px solid var(--bord-or);
    border-radius: var(--rayon);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform var(--trans), filter var(--trans);
}
.brass-btn-suivant:hover { transform: translateY(-1px); filter: brightness(1.08); }
.brass-btn-suivant:active { transform: translateY(0); }

/* ── Mini-jeu 1 : Maltage ────────────────────────────────────────────────── */

.brass-maltage {
    display: flex;
    align-items: center;
    gap: 2rem;
    justify-content: center;
    width: 100%;
}

.brass-jauge-verticale {
    position: relative;
    width: 50px;
    height: 220px;
    background: linear-gradient(to top, #2244aa, #884422, #cc2222);
    border-radius: 8px;
    border: 2px solid var(--bord);
    overflow: hidden;
}

.brass-jauge-zone-verte {
    position: absolute;
    left: 0;
    right: 0;
    background: rgba(76, 175, 80, 0.35);
    border-top: 2px solid var(--vert);
    border-bottom: 2px solid var(--vert);
    z-index: 1;
}

.brass-jauge-curseur {
    position: absolute;
    left: -4px;
    right: -4px;
    height: 4px;
    background: var(--or-vif);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(255, 191, 71, 0.6);
    z-index: 2;
    transition: bottom 0.05s linear;
}

.brass-jauge-labels {
    position: absolute;
    right: -40px;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: .6rem;
    color: var(--muted);
    width: 35px;
}

.brass-maltage-info {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    font-size: .85rem;
}

.brass-temp-display { color: var(--texte); font-weight: 600; }
.brass-temps-zone { color: var(--vert); }
.brass-temps-restant { color: var(--muted); }

/* ── Mini-jeu 2 : Brassage — Cuve ────────────────────────────────────────── */

.brass-brassage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.brass-cuve {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, #5c3a1a, #3a2210);
    border: 4px solid #7a5230;
    position: relative;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    overflow: hidden;
    box-shadow: inset 0 4px 20px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.brass-cuve:active { cursor: grabbing; }

.brass-cuve-liquide {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background: radial-gradient(circle at 45% 45%, #d4a030, #8b6914);
    opacity: 0.5;
    animation: brass-liquide-ondule 2s ease-in-out infinite;
}

@keyframes brass-liquide-ondule {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25%      { transform: scale(1.02) rotate(2deg); }
    50%      { transform: scale(0.98) rotate(-1deg); }
    75%      { transform: scale(1.01) rotate(1deg); }
}

.brass-cuve-centre {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: #5c3a1a;
    border: 1px solid #7a5230;
    z-index: 3;
}

.brass-palette {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 45%;
    margin-left: -3px;
    margin-top: -45%;
    background: linear-gradient(to bottom, #c8a06a, #8b6e3a);
    border-radius: 3px;
    transform-origin: bottom center;
    z-index: 2;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.brass-palette::after {
    content: '';
    position: absolute;
    top: 0;
    left: -5px;
    width: 16px;
    height: 20px;
    background: linear-gradient(135deg, #a07840, #6b4e28);
    border-radius: 3px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
}

.brass-brassage-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    width: 100%;
    max-width: 220px;
}

.brass-melange-barre-fond {
    width: 100%;
    height: 14px;
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: 7px;
    overflow: hidden;
}

.brass-melange-barre {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--ambre), var(--or), var(--or-vif));
    border-radius: 7px;
    transition: width .15s ease;
}

.brass-melange-label {
    font-weight: 600;
    color: var(--texte);
}

.brass-parfait { color: var(--or-vif); font-weight: 700; }
.brass-bien    { color: var(--vert);   font-weight: 600; }
.brass-rate    { color: var(--rouge);  font-weight: 600; }

/* ── Mini-jeu 3 : Ébullition ─────────────────────────────────────────────── */

.brass-ebullition {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.brass-timeline {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 50px;
    background: var(--carte);
    border: 2px solid var(--bord);
    border-radius: 8px;
    overflow: hidden;
}

.brass-timeline-barre {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(90deg, var(--carte), var(--carte2));
}

.brass-timeline-curseur {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: var(--or-vif);
    box-shadow: 0 0 8px rgba(255, 191, 71, 0.6);
    z-index: 3;
    will-change: transform;
}

.brass-timeline-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(245, 166, 35, 0.25);
    border-left: 2px solid var(--or);
    border-right: 2px solid var(--or);
    z-index: 1;
}

.brass-timeline-zone.brass-zone-ok {
    background: rgba(76, 175, 80, 0.3);
    border-color: var(--vert);
}

.brass-timeline-zone.brass-zone-moyen {
    background: rgba(255, 152, 0, 0.3);
    border-color: #ff9800;
}

.brass-timeline-zone.brass-zone-rate {
    background: rgba(217, 83, 79, 0.3);
    border-color: var(--rouge);
}

.brass-ebullition-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: .85rem;
}

/* ── Mini-jeu 4 : Fermentation ───────────────────────────────────────────── */

.brass-fermentation {
    width: 100%;
}

.brass-ferment-ecran {
    position: relative;
    width: 100%;
    height: 200px;
    background: radial-gradient(ellipse at center, #1a2a1a, #0a150a);
    border: 2px solid var(--bord);
    border-radius: var(--rayon);
    overflow: hidden;
    cursor: pointer;
    user-select: none;
}

.brass-ferment-texte {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--texte-clair);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    z-index: 1;
    pointer-events: none;
}

.brass-bulle-piege {
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255, 220, 140, 0.7), rgba(200, 150, 50, 0.5));
    border: 1.5px solid rgba(210, 170, 80, 0.5);
    cursor: pointer;
    animation: brass-bulle-monte 2s ease-out forwards;
    box-shadow: inset 0 -2px 4px rgba(180, 130, 30, 0.2), 0 0 6px rgba(245, 200, 80, 0.15);
    z-index: 2;
    opacity: .75;
}

.brass-bulle-piege.brass-bulle-cliquee {
    background: rgba(180, 80, 40, 0.4);
    border-color: rgba(180, 80, 40, 0.3);
    transform: scale(0.5);
    opacity: .2;
    pointer-events: none;
}

.brass-bulle-doree {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe08a, #d4a030);
    border: 2px solid rgba(220, 180, 60, 0.7);
    cursor: pointer;
    animation: brass-bulle-pop .3s ease, flottement 1.5s ease-in-out infinite;
    box-shadow: inset 0 -2px 4px rgba(180, 130, 30, 0.3), 0 0 10px rgba(245, 190, 60, 0.35);
    z-index: 3;
}

@keyframes brass-bulle-monte {
    0%   { transform: scale(0) translateY(0); opacity: 0; }
    15%  { transform: scale(1) translateY(0); opacity: .75; }
    100% { transform: scale(1) translateY(-20px); opacity: 0; }
}

@keyframes brass-bulle-pop {
    0%   { transform: scale(0); opacity: 0; }
    50%  { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

/* ── Mini-jeu 5 : Maturation (Memory) ────────────────────────────────────── */

.brass-memory {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .6rem;
    max-width: 400px;
    width: 100%;
}

.brass-carte {
    aspect-ratio: 1;
    perspective: 600px;
    cursor: pointer;
}

.brass-carte-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--rayon);
    backface-visibility: hidden;
    transition: transform .4s ease;
    font-size: .75rem;
}

.brass-carte {
    position: relative;
    min-height: 80px;
}

.brass-carte-dos {
    background: linear-gradient(135deg, var(--carte2), var(--carte));
    border: 2px solid var(--bord);
    font-size: 1.5rem;
    color: var(--muted);
    font-weight: 700;
    z-index: 2;
}

.brass-carte-image {
    background: linear-gradient(135deg, var(--carte), #2a2015);
    border: 2px solid var(--or);
    transform: rotateY(180deg);
    z-index: 1;
    gap: .3rem;
}

.brass-carte-image img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.brass-carte-image span {
    font-size: .65rem;
    color: var(--texte);
}

.brass-carte.brass-carte-retournee .brass-carte-dos {
    transform: rotateY(180deg);
}

.brass-carte.brass-carte-retournee .brass-carte-image {
    transform: rotateY(0deg);
}

.brass-carte.brass-carte-trouvee .brass-carte-dos {
    transform: rotateY(180deg);
}

.brass-carte.brass-carte-trouvee .brass-carte-image {
    transform: rotateY(0deg);
    border-color: var(--vert);
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
}

.brass-memory-info {
    text-align: center;
    font-size: .82rem;
    color: var(--muted);
    margin-top: .5rem;
}

/* ── Mini-jeu 6 : Conditionnement ────────────────────────────────────────── */

.brass-conditionnement {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    cursor: pointer;
    user-select: none;
}

.brass-bouteille {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
}

.brass-bouteille-corps {
    position: relative;
    width: 40px;
    height: 150px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--bord);
    border-radius: 4px 4px 8px 8px;
    overflow: hidden;
}

.brass-bouteille-cible {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--or-vif);
    z-index: 2;
    box-shadow: 0 0 6px rgba(255, 191, 71, 0.5);
}

.brass-bouteille-cible::before {
    content: '▶';
    position: absolute;
    left: -14px;
    top: -6px;
    font-size: .6rem;
    color: var(--or-vif);
}

.brass-bouteille-liquide {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, #c8860a, #f5a623);
    transition: none;
}

.brass-bouteille-label {
    font-size: .6rem;
    color: var(--muted);
}

.brass-conditionn-info {
    text-align: center;
    font-size: .82rem;
    color: var(--muted);
    margin-top: .5rem;
}

/* ── Résultat final ──────────────────────────────────────────────────────── */

.brass-resultat {
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--carte), var(--carte2));
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    animation: fondu-entree .5s ease;
}

.brass-resultat-biere {
    margin-bottom: 1rem;
}

.brass-resultat-icone {
    width: 80px;
    height: 80px;
    object-fit: contain;
    image-rendering: pixelated;
    margin-bottom: .5rem;
}

.brass-resultat-titre {
    font-size: 1.3rem;
    color: var(--or);
    margin: 0 0 .3rem;
}

.brass-resultat-qualite {
    font-size: 1rem;
    font-weight: 700;
    padding: .2rem .8rem;
    border-radius: 20px;
    display: inline-block;
}

.brass-qualite-chef     { color: #ffd700; background: rgba(255, 215, 0, 0.15); border: 1px solid #ffd700; }
.brass-qualite-excellent { color: var(--vert); background: rgba(76, 175, 80, 0.12); border: 1px solid var(--vert); }
.brass-qualite-correct  { color: var(--or); background: rgba(245, 166, 35, 0.12); border: 1px solid var(--or); }
.brass-qualite-rate     { color: var(--rouge); background: rgba(217, 83, 79, 0.12); border: 1px solid var(--rouge); }
.brass-qualite-infame  { color: #888; background: rgba(100, 100, 100, 0.15); border: 1px solid #666; }

.brass-resultat-details {
    margin: 1rem 0;
}

.brass-resultat-score {
    display: flex;
    justify-content: center;
    gap: .5rem;
    font-size: .85rem;
    color: var(--muted);
    margin-bottom: .3rem;
}

.brass-resultat-nb {
    color: var(--or-vif);
    font-weight: 700;
}

.brass-resultat-etoiles {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: .5rem;
}

.brass-resultat-etoiles .brass-etoile {
    width: 24px;
    height: 24px;
}

.brass-resultat-recompense {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--or-vif);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

.brass-resultat-ratage {
    margin-top: .8rem;
    padding: .7rem 1rem;
    font-size: .95rem;
    font-style: italic;
    line-height: 1.4;
    color: #e8d9a0;
    background: rgba(90, 40, 20, 0.35);
    border-left: 3px solid #c46a3a;
    border-radius: .4rem;
    text-align: center;
}

.brass-btn-retour {
    display: inline-block;
    margin-top: 1.4rem;
    padding: .8rem 2.2rem;
    font-family: 'MedievalSharp', 'Georgia', serif;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--fond);
    background: linear-gradient(180deg, var(--or-vif), var(--ambre));
    border: 2px solid var(--bord-or);
    border-radius: var(--rayon);
    cursor: pointer;
    box-shadow:
        0 4px 14px rgba(245, 166, 35, 0.35),
        0 2px 6px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: transform var(--trans), filter var(--trans), box-shadow var(--trans);
    animation: brass-btn-retour-pulse 2.4s ease-in-out infinite;
}

.brass-btn-retour:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow:
        0 6px 20px rgba(245, 166, 35, 0.5),
        0 3px 8px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.brass-btn-retour:active { transform: translateY(0); }

@keyframes brass-btn-retour-pulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(245, 166, 35, 0.35), 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
    50%      { box-shadow: 0 4px 22px rgba(255, 215, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
}

/* ── Décompte avant mini-jeu ────────────────────────────────────────────── */

.brass-decompte-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    z-index: 10;
    border-radius: var(--rayon);
}

.brass-decompte-chiffre {
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--or-vif);
    text-shadow: 0 0 20px rgba(245, 166, 35, 0.7), 0 2px 8px rgba(0,0,0,0.5);
    animation: brass-decompte-pulse .7s ease-out;
}

.brass-decompte-anim {
    animation: brass-decompte-pulse .7s ease-out;
}

@keyframes brass-decompte-pulse {
    0%   { transform: scale(1.8); opacity: 0; }
    40%  { transform: scale(1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* ── Responsive brasserie ────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .brass-ingredients { gap: .3rem; }
    .brass-ingredient { padding: .3rem .5rem; font-size: .72rem; }
    .brass-ingredient img { width: 24px; height: 24px; }
    .brass-memory { grid-template-columns: repeat(4, 1fr); gap: .4rem; }
    .brass-carte { min-height: 65px; }
    .brass-bouteille-corps { height: 110px; width: 32px; }
    .brass-conditionnement { gap: .5rem; }
    .brass-prog-etape { min-width: 45px; font-size: .55rem; padding: .2rem .3rem; }
    .brass-prog-fleche { display: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   JOURNAL DE LA TAVERNE — Style note manuscrite punaisée
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Conteneur ─────────────────────────────────────────────────────────── */
#zone-journal {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.2rem;
}

/* ── Deux punaises espacées ────────────────────────────────────────────── */
#journal-punaises {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 1rem;
    box-sizing: border-box;
    position: relative;
    z-index: 3;
    margin-bottom: -13px;
}

.journal-punaise {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #e55 25%, #c33 60%, #922 100%);
    box-shadow:
        0 2px 5px rgba(0,0,0,0.55),
        inset 0 1px 2px rgba(255,255,255,0.35);
}

.journal-punaise:first-child {
    margin-top: 7px;
}

/* Reflet métallique subtil */
.journal-punaise::after {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,0.45);
    margin: 3px 0 0 4px;
}

/* ── Papier (note manuscrite) ──────────────────────────────────────────── */
#journal-papier {
    position: relative;
    width: 100%;
    height: 4.5rem;
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(139, 109, 60, 0.03) 2px,
            rgba(139, 109, 60, 0.03) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 3px,
            rgba(139, 109, 60, 0.02) 3px,
            rgba(139, 109, 60, 0.02) 6px
        ),
        linear-gradient(
            168deg,
            #f5e6c8 0%,
            #eedbb0 25%,
            #e8d4a2 50%,
            #f0ddb4 75%,
            #ecdaa5 100%
        );
    border-radius: 2px;
    padding: .7rem 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-0.6deg);
    box-shadow:
        2px 3px 12px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(139, 109, 60, 0.15),
        inset 0 0 30px rgba(139, 109, 60, 0.06);
    border-left: 2px solid rgba(200, 80, 80, 0.25);
}

/* Ligne de cahier unique au milieu */
#journal-papier::before {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    top: 50%;
    height: 1px;
    background: rgba(120, 100, 70, 0.13);
    pointer-events: none;
}

/* Coin corné bas-droite */
#journal-papier::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 18px;
    height: 18px;
    background: linear-gradient(315deg, rgba(0,0,0,0.07) 0%, transparent 50%);
    pointer-events: none;
}

/* ── Zone de texte (2 lignes max) ──────────────────────────────────────── */
#journal-contenu {
    font-family: 'Segoe Script', 'Comic Sans MS', 'Brush Script MT', cursive;
    font-size: .95rem;
    line-height: 1.4;
    color: #3a2a14;
    text-align: center;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: break-word;
    word-break: break-word;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

#journal-contenu.journal-visible {
    opacity: 1;
    transform: translateY(0);
}

#journal-contenu.journal-sortie {
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* ── Messages standards (encre marron classique) ───────────────────────── */
.journal-msg-standard {
    color: #3a2a14;
}

/* ── Messages joueurs (papier bleuté, texte différent) ─────────────────── */
.journal-msg-joueur {
    color: #1a1a5c;
    font-weight: 700;
}

/* Fond du papier quand c'est un message joueur */
#journal-papier.journal-papier-joueur {
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(40, 60, 120, 0.03) 2px,
            rgba(40, 60, 120, 0.03) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 3px,
            rgba(40, 60, 120, 0.02) 3px,
            rgba(40, 60, 120, 0.02) 6px
        ),
        linear-gradient(
            168deg,
            #d4e4f7 0%,
            #c8daf0 25%,
            #bdd2ec 50%,
            #c5d8f0 75%,
            #bed0e8 100%
        );
    border-left-color: rgba(40, 80, 180, 0.35);
}

.journal-auteur {
    color: #c0392b;
    font-weight: 800;
    font-size: .9em;
    text-shadow: 0 0 1px rgba(192, 57, 43, 0.3);
}

.journal-auteur::after {
    content: ' — ';
    color: #c0392b;
    opacity: 0.5;
    font-weight: 400;
}


/* ══════════════════════════════════════════════════════════════════════════
   MODAL JOURNAL
   ══════════════════════════════════════════════════════════════════════════ */

.modal-journal-corps {
    max-width: 480px;
    text-align: center;
}

.modal-journal-decoration {
    margin-bottom: .5rem;
}

.modal-journal-etoiles {
    display: flex;
    justify-content: center;
    gap: .5rem;
    animation: journal-etoiles-pulse 2s ease-in-out infinite;
}

.modal-journal-etoiles .icone-emoji {
    width: 2rem;
    height: 2rem;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
}

@keyframes journal-etoiles-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.modal-journal-titre {
    font-size: 1.3rem;
    color: var(--or-vif);
    margin: 0 0 .5rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.modal-journal-intro {
    color: var(--texte);
    font-size: .9rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.modal-journal-corps textarea {
    width: 100%;
    background: var(--fond2);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    color: var(--texte-clair);
    font-size: .9rem;
    padding: .75rem;
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.3s;
}

.modal-journal-corps textarea:focus {
    outline: none;
    border-color: var(--or);
    box-shadow: 0 0 12px rgba(245, 166, 35, 0.2);
}

.modal-journal-compteur {
    text-align: right;
    font-size: .75rem;
    color: var(--muted);
    margin-top: .25rem;
    margin-bottom: .75rem;
}

.journal-chars-limite {
    color: var(--or) !important;
}

.journal-chars-max {
    color: var(--rouge) !important;
    font-weight: 700;
}

.btn-journal-publier {
    background: linear-gradient(135deg, var(--or) 0%, var(--ambre) 100%) !important;
    color: #1a1a1a !important;
    font-weight: 700;
    border: none;
}

.btn-journal-publier:hover {
    background: linear-gradient(135deg, var(--or-vif) 0%, var(--or) 100%) !important;
    box-shadow: 0 0 20px rgba(245, 166, 35, 0.4);
}

/* Animation shake pour textarea vide */
@keyframes journal-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.journal-erreur-shake {
    animation: journal-shake 0.4s ease;
    border-color: var(--rouge) !important;
}

/* ── Modal invitation classement ─────────────────────────────────────────── */

.modal-classement-invite-corps {
    text-align: center;
    max-width: 440px;
}

.modal-classement-invite-deco {
    margin-bottom: .8rem;
}

.modal-classement-invite-trophee {
    width: 64px;
    height: 64px;
    filter: drop-shadow(0 0 18px rgba(245, 166, 35, 0.5));
    animation: classement-invite-bounce 2s ease-in-out infinite;
}

@keyframes classement-invite-bounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-8px) scale(1.08); }
}

.modal-classement-invite-titre {
    font-size: 1.6rem !important;
    text-align: center;
}

.modal-classement-invite-texte {
    text-align: center;
    font-size: .92rem;
    color: var(--texte-dim);
    line-height: 1.7;
}

.modal-classement-invite-texte strong {
    color: var(--or);
}

.modal-classement-invite-avantages {
    list-style: none;
    padding: 0;
    margin: 0 0 1.4rem 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.modal-classement-invite-avantages li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .88rem;
    color: var(--texte);
    background: rgba(245, 166, 35, 0.06);
    border: 1px solid rgba(245, 166, 35, 0.15);
    border-radius: var(--rayon);
    padding: .5rem .8rem;
}

.modal-classement-invite-avantages li .icone-emoji {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.modal-classement-invite-boutons {
    justify-content: center;
}

.btn-classement-invite-oui {
    font-size: 1rem;
    padding: .8rem 2rem;
    background: linear-gradient(135deg, var(--or-vif, #f5a623) 0%, var(--or, #c8860a) 100%) !important;
    color: #1a1a1a !important;
    font-weight: 700;
    border: none;
    box-shadow: 0 0 20px rgba(245, 166, 35, 0.3);
    transition: box-shadow .2s, transform .15s;
}

.btn-classement-invite-oui:hover {
    box-shadow: 0 0 30px rgba(245, 166, 35, 0.5);
    transform: scale(1.04);
}

.btn-classement-invite-oui .icone-emoji {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 2px;
}

.modal-classement-invite-note {
    font-size: .72rem !important;
    color: var(--texte-dim) !important;
    opacity: .6;
    margin-top: .8rem;
    margin-bottom: 0 !important;
}

/* ── Roue de la Fortune : Icône cooldown ──────────────────────────────────── */
#roue-fortune-icone-zone {
    position: fixed;
    bottom: 16px;
    /* Décalé avant la largeur de #col-droite (width: 35%; min: 380px; max: 550px) */
    right: calc(clamp(380px, 35%, 550px) + 16px);
    z-index: 50;
    width: 60px;
    height: 60px;
    background: var(--fond2);
    border-radius: 50%;
}

/* Mobile : le layout passe en colonne unique, l'icône revient au coin bas-droit du viewport */
@media (max-width: 900px) {
    #roue-fortune-icone-zone {
        right: 16px;
        bottom: 16px;
    }
}

#roue-fortune-icone-zone.cache { display: none; }

#col-centre {
    position: relative;
}

#roue-icone-btn {
    position: relative;
    width: 60px;
    height: 60px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s, filter .15s;
}

#roue-icone-btn:hover {
    transform: scale(1.1);
}

#roue-icone-btn:active {
    transform: scale(0.95);
}

#roue-icone-anneau {
    position: absolute;
    inset: 0;
}

#roue-icone-progress {
    transition: stroke-dashoffset .5s linear;
}

.roue-icone-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    z-index: 1;
    filter: drop-shadow(0 0 4px rgba(212, 160, 23, 0.4));
}

.roue-icone-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    background: var(--or, #d4a017);
    color: #1a0e05;
    font-size: .6rem;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 9px;
    line-height: 1.2;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.roue-icone-badge.avec-capsule {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
}

.roue-icone-badge.avec-capsule > span {
    line-height: 1;
}

.roue-icone-temps {
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: .6rem;
    color: var(--muted, #a89070);
    white-space: nowrap;
    font-weight: 600;
}

.roue-icone-disponible .roue-icone-img {
    animation: roue-icone-pulse 1.5s ease-in-out infinite;
}

.roue-icone-disponible .roue-icone-temps {
    color: var(--or, #d4a017);
}

.roue-icone-indisponible {
    opacity: .5;
    filter: grayscale(0.6);
}

.roue-icone-indisponible:hover {
    transform: scale(1.0);
    cursor: default;
}

@keyframes roue-icone-pulse {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(212, 160, 23, 0.3)); }
    50%      { filter: drop-shadow(0 0 12px rgba(212, 160, 23, 0.8)); }
}

/* ── Roue de la Fortune : Overlay ────────────────────────────────────────── */
#roue-fortune-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    animation: roue-overlay-entree .3s ease-out;
    padding: 8px;
    /* overflow: hidden au lieu de overflow-y: auto pour éviter qu'Android
       Chrome auto-scroll à chaque tick de secteur (la rotation de la flèche
       décale momentanément son bounding-box et le navigateur tentait de
       ramener le contenu en vue). Le contenu est dimensionné pour toujours
       tenir grâce aux media queries portrait/paysage ci-dessous. */
    overflow: hidden;
    box-sizing: border-box;
    overscroll-behavior: contain;
}

/* Tant que la roue est ouverte, on bloque aussi le scroll du document
   (idem pattern de verrouillage de scroll d'un modal plein écran). */
body.roue-fortune-active {
    overflow: hidden;
}

#roue-fortune-overlay.cache {
    display: none;
}

@keyframes roue-overlay-entree {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.roue-fortune-modal {
    background: linear-gradient(135deg, #1a0e05, #2a1a0a);
    border: 2px solid var(--or, #d4a017);
    border-radius: 16px;
    padding: 1.5rem 2rem;
    text-align: center;
    box-shadow: 0 0 40px rgba(212, 160, 23, 0.3), 0 0 80px rgba(0, 0, 0, 0.5);
    animation: roue-modal-entree .4s cubic-bezier(.34, 1.56, .64, 1);
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    max-width: 100%;
    max-height: 100%;
}

@keyframes roue-modal-entree {
    from { transform: scale(0.5); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.roue-fortune-titre {
    font-family: 'MedievalSharp', 'Georgia', serif;
    font-size: 1.4rem;
    color: var(--or, #d4a017);
    margin: 0 0 1rem 0;
    text-shadow: 0 0 12px rgba(212, 160, 23, 0.4);
}

.roue-fortune-conteneur-roue {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 420px;
}

.roue-fortune-fleche {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: 50% 15%;
    height: 80px;
    width: auto;
    z-index: 2;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
    pointer-events: none;
}

.roue-fortune-fleche.percute {
    animation: roue-fleche-picot 160ms ease-out;
}

@keyframes roue-fleche-picot {
    0%   { transform: translateX(-50%) rotate(0deg); }
    25%  { transform: translateX(-50%) rotate(-14deg); }
    60%  { transform: translateX(-50%) rotate(4deg); }
    100% { transform: translateX(-50%) rotate(0deg); }
}

.roue-fortune-svg {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
    transition: none;
}

.roue-fortune-zone-texte {
    position: relative;
    width: 100%;
    min-height: 90px;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.roue-fortune-zone-texte > * {
    position: absolute;
    left: 0;
    right: 0;
    margin-top: 0;
}

.roue-fortune-instruction {
    font-size: .95rem;
    color: #ccc;
    animation: roue-pulse-instruction 1.2s ease-in-out infinite;
}

@keyframes roue-pulse-instruction {
    0%, 100% { opacity: .7; }
    50%      { opacity: 1; }
}

.roue-fortune-resultat {
    font-size: 1.1rem;
    color: #fff;
    padding: .8rem 1rem;
    background: rgba(212, 160, 23, 0.15);
    border: 1px solid rgba(212, 160, 23, 0.4);
    border-radius: 8px;
    animation: roue-resultat-entree .4s ease-out;
}

.roue-fortune-resultat.cache {
    display: none;
}

@keyframes roue-resultat-entree {
    from { transform: translateY(10px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.roue-fortune-secteur-icone {
    width: 32px;
    height: 32px;
    vertical-align: middle;
    object-fit: contain;
}

.roue-fortune-desc {
    font-size: .85rem;
    color: var(--muted, #a89070);
}

/* Mobile portrait : adapter la roue et le modal au viewport */
@media (max-width: 520px) {
    .roue-fortune-modal {
        padding: 0.8rem 0.7rem;
        border-radius: 12px;
    }
    .roue-fortune-titre {
        font-size: 1.1rem;
        margin: 0 0 0.5rem 0;
    }
    .roue-fortune-conteneur-roue {
        max-width: min(360px, calc(100vh - 180px));
    }
    .roue-fortune-fleche {
        height: 56px;
        top: -12px;
    }
    .roue-fortune-zone-texte {
        min-height: 70px;
        margin-top: 0.7rem;
    }
    .roue-fortune-instruction {
        font-size: 0.85rem;
    }
    .roue-fortune-resultat {
        font-size: 0.95rem;
        padding: 0.6rem 0.7rem;
    }
    .roue-fortune-secteur-icone {
        width: 26px;
        height: 26px;
    }
    .roue-fortune-desc {
        font-size: 0.78rem;
    }
}

/* Mobile paysage : viewport très bas, on contraint la roue par la hauteur
   pour qu'elle ne déborde plus du modal (et donc de l'écran). */
@media (orientation: landscape) and (max-height: 600px) {
    .roue-fortune-modal {
        padding: 0.5rem 0.9rem;
        border-radius: 10px;
    }
    .roue-fortune-titre {
        font-size: 0.95rem;
        margin: 0 0 0.3rem 0;
    }
    .roue-fortune-conteneur-roue {
        /* Réserve ~110px pour titre + zone-texte + paddings ; la roue
           prend tout le reste de la hauteur, plafonnée à 360px. */
        max-width: min(360px, calc(100vh - 110px));
    }
    .roue-fortune-fleche {
        height: 44px;
        top: -10px;
    }
    .roue-fortune-zone-texte {
        min-height: 44px;
        margin-top: 0.35rem;
    }
    .roue-fortune-instruction {
        font-size: 0.8rem;
    }
    .roue-fortune-resultat {
        font-size: 0.85rem;
        padding: 0.4rem 0.6rem;
    }
    .roue-fortune-secteur-icone {
        width: 22px;
        height: 22px;
    }
    .roue-fortune-desc {
        font-size: 0.72rem;
    }
}

/* ── Écran ivre ──────────────────────────────────────────────────────────── */
@keyframes ecran-ivre-anim {
    0%   { transform: scaleY(-1) rotate(0deg)    skewX(0deg)    translateX(0); }
    15%  { transform: scaleY(-1) rotate(0.5deg)  skewX(0.5deg)  translateX(3px); }
    30%  { transform: scaleY(-1) rotate(-0.3deg) skewX(-0.3deg) translateX(-2px); }
    45%  { transform: scaleY(-1) rotate(0.4deg)  skewX(0.2deg)  translateX(2px); }
    60%  { transform: scaleY(-1) rotate(-0.5deg) skewX(-0.4deg) translateX(-3px); }
    75%  { transform: scaleY(-1) rotate(0.2deg)  skewX(0.3deg)  translateX(1px); }
    100% { transform: scaleY(-1) rotate(0deg)    skewX(0deg)    translateX(0); }
}

#jeu-conteneur.ecran-ivre {
    animation: ecran-ivre-anim 2s ease-in-out infinite;
    filter: hue-rotate(15deg) saturate(1.3) blur(0.3px);
}

/* ── Optimisations mobile / tactile ─────────────────────────────────────────
   Cible les vrais appareils tactiles sans pointeur fin (téléphones / tablettes
   sans souris). Les laptops Windows tactiles gardent pointer:fine via leur
   trackpad et restent donc en mode "desktop" — aucun impact visuel sur PC.
   On désactive ici les primitives graphiques très lentes côté Android Chrome :
   backdrop-filter, filter:drop-shadow, et animations infinies de text-shadow /
   box-shadow / filter (qui forcent un repaint chaque frame). Les animations
   transform-only / opacity-only sont gardées (accélérées GPU partout). */
@media (hover: none) and (pointer: coarse) {
    /* backdrop-filter : accéléré GPU sur iOS, CPU/lent sur Android */
    .toast,
    .modal,
    #roue-fortune-overlay {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background-color: rgba(20, 14, 8, 0.95);
    }

    /* Compteur principal — text-shadow infini sur un élément réécrit 10×/s */
    .compteur-principal {
        animation: none !important;
    }

    /* Box-shadow / filter infinis (paint chaque frame) */
    #jauge-prestige.jauge-pret,
    .noeud-competence.disponible .noeud-icone-cercle,
    .prestige-rang-badge.rang-legende,
    #prestige-compteur.prestige-compteur-actif,
    .roue-icone-disponible .roue-icone-img {
        animation: none !important;
    }

    /* Anneau conic-gradient + mask rotatif sur le bouton bière : très coûteux */
    #btn-biere::after {
        animation: none !important;
        display: none;
    }

    /* Image bière : drop-shadow filter + vacillement permanent = repaint continu
       sur image 200×200. On coupe les deux ; le clic reste réactif. */
    #img-biere {
        filter: none;
        animation: none !important;
    }
    #btn-biere:hover #img-biere {
        filter: none;
    }
    /* Halo radial scalé en boucle derrière le bouton bière : suppression */
    #btn-biere::before {
        animation: none !important;
    }

    /* Ingrédients flottants : filter:drop-shadow → suppression */
    .ingredient-flottant {
        filter: none;
    }

    /* Bulles ambiantes : box-shadow multiples sur ~20-40 éléments → suppression */
    .bulle-ambiante {
        box-shadow: none;
    }

    /* Compteur à rouleau : la transition translateY crée 12+ couches GPU
       simultanées et le snap-back force des reflow. Snap instantané → cheap. */
    .rouleau-bande {
        transition: none !important;
    }

    /* Roue de la Fortune : drop-shadow sur SVG en rotation = repaint plein-frame
       sur Android. On coupe le filtre. (Pas de will-change ici : sur Android
       Chrome la promotion de layer peut au contraire augmenter le sursaut sur
       gros SVG, le freeze du fond ci-dessous suffit.) */
    .roue-fortune-svg,
    .roue-fortune-fleche {
        filter: none !important;
    }

    /* Onglets non actifs : skip layout/paint complet */
    #contenu-onglets > .contenu-onglet:not(.actif) {
        content-visibility: auto;
        contain-intrinsic-size: 0 600px;
    }
}

/* Respect du préréglage système "réduire les animations" :
   on coupe toute l'ambiance décorative. */
@media (prefers-reduced-motion: reduce) {
    #bulles-ambiantes,
    #ingredients-flottants {
        display: none !important;
    }
    .compteur-principal,
    #btn-biere::before,
    #btn-biere::after,
    #img-biere,
    #jauge-prestige.jauge-pret,
    .noeud-competence.disponible .noeud-icone-cercle,
    .prestige-rang-badge.rang-legende,
    #prestige-compteur.prestige-compteur-actif,
    .roue-icone-disponible .roue-icone-img {
        animation: none !important;
    }
}