:root {
    --bg: #14161c;
    --panneau: #1c1f28;
    --carte-bg: #1c1f28;
    --bordure: #2b3040;
    --texte: #e6e8ee;
    --muted: #8b90a0;
    --accent: #d79416;
    --moi: #3f8cff;
    --danger: #e05a5a;
    --ok: #4caf7d;
    --carte-largeur: 130px;
    --carte-hauteur: 182px;
    --panneau-largeur: 450px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--bg);
    color: var(--texte);
    font-family: system-ui, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
}

body { margin: 0; height: 100vh; overflow: hidden; }

/* Stats royaume (ex-header, dans le panneau) */
.panneau_hud {
    --hud-soldat-btn-h: 18px;
    --hud-soldat-btn-gap: 2px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 2px 0;
}
.hud_bloc {
    flex: 0 0 auto;
    padding-left: 12px;
    min-width: 0;
    box-sizing: border-box;
}
.hud_bloc:first-child {
    padding-left: 0;
}
.hud_bloc.hud_bloc_actions {
    margin-left: 0;
    padding-left: 8px;
    padding-right: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 2px;
}
.hud_bloc.hud_soldats_zone {
    padding-left: 4px;
    flex-shrink: 0;
    position: relative;
    align-self: center;
    overflow: visible;
}
.hud_soldats_titre {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 3;
    margin-top: -7px;
    text-align: center;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--muted);
    pointer-events: none;
}
.hud_soldats_zone .hud_soldats_btns {
    position: relative;
    z-index: 1;
}
.hud_bloc.hud_col_ressources {
    width: 5rem;
    min-width: 5rem;
    max-width: 5rem;
    flex-shrink: 0;
    box-sizing: border-box;
}
.hud_col_ressources {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}
.hud_col_ressources .hud_ligne {
    justify-content: flex-start;
}
.hud_col_ressources .hud_icone {
    width: 0.9em;
    text-align: left;
}
.hud_or #hud_or,
.hud_pv #hud_pv {
    font-variant-numeric: tabular-nums;
}
.hud_or .hud_valeur {
    display: inline;
    white-space: nowrap;
}
.hud_or .hud_unite_suffix {
    margin-left: 0.25em;
}
.hud_or .hud_or_bonus.vide {
    display: none;
}
.hud_bloc.hud_bloc_groupe {
    padding-left: 6px;
}
.hud_unites_zone {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.hud_unite_row {
    position: relative;
    min-height: 1.2em;
    min-width: 0;
}
.hud_unite_row > .hud_ligne {
    flex-shrink: 0;
    width: 5.35rem;
    min-width: 5.35rem;
}
.hud_prod_file_ligne {
    position: absolute;
    left: 5.35rem;
    right: 0;
    top: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: visible;
    display: flex;
    align-items: baseline;
}
#hud_marchands_prod_file {
    left: calc(5.35rem + 2.3ch);
}
.hud_prod_file_inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 5px;
    overflow-x: hidden;
    overflow-y: visible;
    min-width: 0;
    width: 100%;
}
.hud_prod_item {
    flex-shrink: 0;
    display: inline-flex;
    align-items: baseline;
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--danger);
    white-space: nowrap;
    line-height: 1.15;
}
.hud_prod_tours {
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    margin-left: 0.5px;
    transform: translateY(-0.38em);
}
.hud_soldats_btns {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: var(--hud-soldat-btn-h) var(--hud-soldat-btn-h);
    gap: var(--hud-soldat-btn-gap);
    flex-shrink: 0;
}
.hud_soldats_btns button {
    padding: 0 7px;
    font-size: 10px;
    font-weight: 600;
    min-width: 26px;
    height: var(--hud-soldat-btn-h);
    line-height: 1;
    box-sizing: border-box;
    border: 1px solid transparent;
}
.hud_soldats_btns button:active {
    transform: none;
}
.hud_soldats_btns .hud_btn_grand.hud_btn_grand_verrouille {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.45);
}
.hud_soldats_btns .hud_btn_grand {
    grid-row: 1 / 3;
    grid-column: 2;
    font-size: 11px;
    width: 30px;
    min-width: 30px;
    max-width: 30px;
    padding: 0 1px;
    height: calc(var(--hud-soldat-btn-h) * 2 + var(--hud-soldat-btn-gap));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.hud_soldats_lot_libelle {
    display: block;
    max-width: 100%;
    line-height: 1;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hud_ligne {
    display: flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    color: var(--texte);
}
.hud_icone {
    font-size: 12px;
    line-height: 1;
    flex-shrink: 0;
}
.hud_valeur {
    font-variant-numeric: tabular-nums;
}
.hud_or,
.hud_or .hud_icone,
.hud_or .hud_valeur { color: var(--accent); }
.hud_pv,
.hud_pv .hud_icone,
.hud_pv .hud_valeur { color: #e05a5a; }
.hud_unite_nom {
    font-weight: 500;
}
.hud_unite_val {
    font-weight: 700;
    display: inline-block;
    min-width: 2.5ch;
    text-align: left;
    font-variant-numeric: tabular-nums;
}
.hud_stats_combat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    min-width: 0;
    font-size: 9px;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    align-self: center;
}
.hud_stat {
    display: flex;
    align-items: baseline;
    gap: 3px;
    white-space: nowrap;
}
.hud_stat_lbl {
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    flex-shrink: 0;
    min-width: 18px;
}
.hud_stat_att .hud_stat_lbl,
.hud_stat_att .hud_stat_score { color: var(--ok); }
.hud_stat_def .hud_stat_lbl,
.hud_stat_def .hud_stat_score { color: var(--moi); }
.hud_stat_vit .hud_stat_lbl,
.hud_stat_vit .hud_stat_score { color: #5ec4e8; }
.hud_stat_score {
    font-weight: 700;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.hud_stats_combat .hud_or_bonus {
    color: var(--muted);
    font-size: 7px;
}
.hud_btn_action {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 30px;
    min-width: 30px;
    height: calc(var(--hud-soldat-btn-h) * 2 + var(--hud-soldat-btn-gap));
    padding: 0;
    margin: 0;
    line-height: 0;
    align-self: center;
    color: var(--texte);
    border: 1px solid transparent;
    border-radius: 5px;
    background: var(--bordure);
    cursor: pointer;
}
.hud_btn_action:hover:not(:disabled) {
    background: #39405a;
}
.hud_btn_action.actif {
    color: #5a9fd4;
    background: rgba(90, 159, 212, 0.22);
}
.hud_btn_action:disabled {
    opacity: 0.45;
    cursor: default;
}
.hud_abandon_wrap {
    position: relative;
}
.hud_confirm_popup {
    position: fixed;
    z-index: 1000;
    min-width: 9.5rem;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid var(--bordure);
    background: var(--panneau);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.hud_confirm_texte {
    margin: 0 0 6px;
    font-size: 10px;
    line-height: 1.3;
    color: var(--texte);
    white-space: nowrap;
}
.hud_confirm_btns {
    display: flex;
    gap: 6px;
    justify-content: center;
}
.hud_confirm_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 5px;
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 0;
}
.hud_confirm_icone {
    display: block;
    width: 13px;
    height: 13px;
}
.hud_confirm_btn_vert {
    color: #fff;
    background: rgba(76, 175, 125, 0.35);
    border-color: rgba(76, 175, 125, 0.65);
}
.hud_confirm_btn_vert:hover {
    background: rgba(76, 175, 125, 0.55);
}
.hud_confirm_btn_rouge {
    color: #fff;
    background: rgba(224, 90, 90, 0.35);
    border-color: rgba(224, 90, 90, 0.65);
}
.hud_confirm_btn_rouge:hover {
    background: rgba(224, 90, 90, 0.55);
}
.hud_btn_abandonner {
    color: #fff;
}
.hud_btn_abandonner:hover:not(:disabled) {
    color: #fff;
}
.hud_action_icone {
    display: block;
    width: 14px;
    height: 15px;
    flex-shrink: 0;
}
.panneau_section_etat {
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-x: hidden;
    overflow-y: visible;
}
.panneau_section_etat.panneau_section_compact {
    padding: 5px 2px 0;
}
.panneau_section_etat > .section_corps.panneau_hud {
    padding-bottom: 4px;
    min-width: 0;
}
.hud_tour_barre {
    height: 3px;
    background: var(--bordure);
    margin: 0 -2px;
    overflow: hidden;
}
.hud_tour_barre_prog {
    height: 100%;
    width: 100%;
    background: var(--accent);
    transform-origin: left center;
}

.hud_label { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.hud_chiffre { font-weight: 700; font-size: 15px; }
.hud_chiffre_ligne { display: inline-flex; align-items: flex-start; }
.hud_or_bonus {
    vertical-align: super;
    font-size: 0.62em;
    font-weight: 700;
    color: var(--ok);
    margin-left: 1px;
    line-height: 1;
    white-space: nowrap;
}

button {
    background: var(--bordure);
    color: var(--texte);
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 13px;
}
button:hover { background: #39405a; }
button.mini { padding: 2px 8px; font-size: 11px; }
button.principal { background: var(--accent); color: #1a1204; font-weight: 700; }
button.principal:hover { background: #eab54e; }

/* Layout principal */
#jeu { height: 100%; position: relative; }

#zone_carte {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: var(--panneau-largeur);
    background: var(--carte-bg);
    overflow: visible;
}
#zone_carte.selection_active { z-index: 50; }
.overlay_tour {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: .04em;
    pointer-events: none;
    user-select: none;
}
.overlay_decompte_depart {
    position: absolute;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    pointer-events: none;
    user-select: none;
}
.overlay_decompte_libelle {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}
.overlay_decompte_sec {
    font-size: 42px;
    font-weight: 700;
    line-height: 1;
    color: var(--texte);
    font-variant-numeric: tabular-nums;
}
#carte {
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    user-select: none;
}

/* Popup de selection (deux panneaux cote a cote au-dessus du royaume) */
#panneau_selection,
#panneau_selection_moi {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, calc(-100% - 10px));
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    width: auto;
    background: none;
    border: none;
    padding: 0;
    z-index: 31;
    pointer-events: auto;
}
.selection_popup {
    min-width: 158px;
    border-radius: 8px;
    padding: 10px 12px;
}
.selection_popup_attaque {
    width: 168px;
    max-width: 168px;
    --sel-text: var(--texte);
    --sel-btn-fill: #9a4550;
    --sel-btn-fill-hover: #b85562;
    background: #452830;
    border: none;
    box-shadow: 0 6px 18px rgba(180, 50, 60, 0.16);
    color: var(--sel-text);
}
.selection_popup_moi {
    width: 220px;
    max-width: 220px;
    --sel-text: var(--texte);
    --sel-btn-fill: #39405a;
    --sel-btn-fill-hover: #4a5568;
    background: #2a3140;
    border: 1px solid #3a4254;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    color: var(--sel-text);
}
.selection_popup_moi .btn_trebuchet {
    background: var(--sel-btn-fill);
    border: none;
    color: var(--texte);
    padding: 9px 8px;
    min-height: 34px;
}
.selection_popup_moi .btn_trebuchet:hover:not(:disabled) {
    background: var(--sel-btn-fill-hover);
}
.selection_taunt_prestige {
    margin: 0 0 8px;
    font-size: 10px;
    line-height: 1.35;
    color: var(--muted);
}
.selection_btns_provoc {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: min(42vh, 220px);
    overflow-y: auto;
}
.selection_btns_provoc .btn_provoc {
    margin: 0;
    padding: 7px 8px;
    font-size: 11px;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    background: var(--sel-btn-fill);
    border: none;
    border-radius: 6px;
    color: var(--sel-text);
}
.selection_btns_provoc .btn_provoc:hover {
    background: var(--sel-btn-fill-hover);
}
.selection_popup_marchand {
    width: 182px;
    max-width: 182px;
    --sel-text: var(--texte);
    --sel-btn-fill: #3d8f62;
    --sel-btn-fill-hover: #4aa874;
    background: #243a30;
    border: none;
    box-shadow: 0 6px 18px rgba(60, 160, 100, 0.14);
    color: var(--sel-text);
}
.selection_popup_attaque .selection_label,
.selection_popup_attaque .selection_attaque_desc,
.selection_popup_attaque .selection_temps,
.selection_popup_marchand .selection_label,
.selection_popup_marchand .selection_marchand_desc,
.selection_popup_marchand .selection_temps,
.selection_popup_marchand .selection_marchands_comptes,
.selection_popup_marchand .selection_marchands_comptes strong {
    color: var(--sel-text, var(--texte));
}
.selection_section + .selection_section { margin-top: 10px; }
.selection_entete {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 6px;
}
.selection_label {
    font-size: 12px;
    font-weight: 700;
    color: var(--texte);
}
.selection_popup_attaque .selection_label {
    color: var(--texte);
}
.selection_popup_marchand .selection_label {
    color: var(--texte);
}
.selection_marchand_desc {
    margin: 0 0 8px;
    font-size: 10px;
    line-height: 1.35;
    color: var(--texte);
    white-space: normal;
    overflow-wrap: break-word;
}
.selection_credits_marchand {
    margin: 0 0 6px;
    font-size: 10px;
    font-weight: 600;
    color: var(--texte);
}
.selection_credits_marchand strong {
    font-weight: 700;
}
.selection_attaque_desc {
    margin: 0 0 8px;
    font-size: 10px;
    line-height: 1.35;
    color: var(--texte);
    white-space: normal;
    overflow-wrap: break-word;
}
.selection_raccourci_clavier {
    margin: 0 0 6px;
    font-size: 10px;
    line-height: 1.35;
    color: var(--muted);
}
.selection_popup_attaque .selection_raccourci_clavier {
    color: var(--sel-text, var(--texte));
}
.selection_raccourci_touche {
    flex-shrink: 0;
    min-width: 1.1em;
    margin-right: 4px;
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    font-variant-numeric: tabular-nums;
}
.selection_popup_attaque .btn_trebuchet .selection_raccourci_touche {
    color: rgba(255, 255, 255, 0.9);
}
.selection_popup_marchand .selection_raccourci_clavier {
    color: var(--sel-text, var(--texte));
}
.selection_temps {
    font-size: 11px;
    font-weight: 600;
    color: var(--sel-muted, var(--muted));
    white-space: nowrap;
}
.selection_popup_marchand .selection_temps {
    color: var(--texte);
}
.selection_popup_attaque .selection_temps {
    color: var(--texte);
}
.selection_fractions {
    display: flex;
    gap: 3px;
    border-radius: 0;
    overflow: visible;
    border: none;
}
.selection_fractions button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    border-radius: 5px;
    padding: 5px 2px;
    font-size: 11px;
    background: var(--sel-btn-fill, #39405a);
    border: none;
    color: var(--texte);
}
.selection_frac_soldats {
    font-size: 10px;
    font-weight: 600;
    opacity: 0.85;
}
.selection_fractions button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.selection_fractions button:last-child { border-right: none; }
.selection_fractions button:hover { background: var(--sel-btn-fill-hover, #4a5568); }
.selection_btns_marchand {
    display: flex;
    gap: 4px;
}
.selection_btns_marchand button {
    flex: 1;
    padding: 4px 6px;
    font-size: 11px;
    font-weight: 600;
    background: var(--sel-btn-fill);
    border: none;
    color: var(--texte);
}
.selection_btns_marchand button:hover {
    background: var(--sel-btn-fill-hover);
    color: #fff;
}
.selection_section_don {
    margin-top: 10px;
}
.selection_btns_don {
    display: flex;
    gap: 4px;
}
.selection_btns_don button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 6px;
    font-size: 11px;
    font-weight: 600;
    background: #8a6d1f;
    border: none;
    color: var(--texte);
}
.selection_btns_don button .hud_icone {
    font-size: 10px;
    color: var(--accent);
}
.selection_btns_don button:hover {
    background: #b8922a;
    color: #fff;
}
.selection_btns_don button:hover .hud_icone {
    color: var(--accent);
}
.selection_marchands_comptes {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 6px;
    margin-top: 8px;
    font-size: 10px;
    color: var(--texte);
    white-space: nowrap;
}
.selection_marchands_comptes strong {
    color: var(--texte);
    font-weight: 700;
}
.selection_popup_attaque .selection_fractions button {
    color: var(--texte);
}
.selection_popup_attaque .btn_attaque_ici {
    background: var(--sel-btn-fill);
    border: none;
    color: var(--texte);
}
.selection_popup_attaque .btn_attaque_ici:hover {
    background: var(--sel-btn-fill-hover);
    color: #fff;
}
.selection_popup_attaque .btn_trebuchet {
    background: var(--sel-btn-fill);
    border: none;
    color: var(--texte);
}
.selection_popup_attaque .btn_trebuchet:hover:not(:disabled) {
    background: var(--sel-btn-fill-hover);
}
#selection_btns_cartes_cible {
    display: contents;
}
.btn_attaque_ici {
    width: 100%;
    margin-top: 6px;
    padding: 4px 6px;
    font-size: 11px;
    font-weight: 600;
    background: var(--sel-btn-fill, #39405a);
    border: none;
    border-radius: 5px;
    color: var(--sel-muted, var(--muted));
    cursor: pointer;
    font-family: inherit;
}
.btn_attaque_ici:hover { background: var(--sel-btn-fill-hover, #4a5568); color: var(--texte); }
.btn_trebuchet {
    width: 100%;
    margin-top: 6px;
    padding: 4px 6px;
    font-size: 11px;
    font-weight: 600;
    background: var(--sel-btn-fill, #39405a);
    border: none;
    border-radius: 5px;
    color: var(--texte);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.btn_trebuchet:hover:not(:disabled) { background: var(--sel-btn-fill-hover, #4a5568); }
.btn_trebuchet:disabled {
    color: var(--muted);
    cursor: default;
}

/* Panneau droit (cartes) — overlay au-dessus de la carte */
#panneau {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: var(--panneau-largeur);
    border-left: 1px solid var(--bordure);
    display: flex;
    flex-direction: column;
    overflow: visible;
    z-index: 40;
}
.panneau_fond {
    position: absolute;
    inset: 0;
    background: rgba(28, 31, 40, .97);
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
body.carte-drag-active #panneau {
    z-index: 60;
}
#panneau:has(.carte_wrap.bouffon:hover) {
    z-index: 45;
}
.panneau_section {
    padding: 8px 10px;
    position: relative;
}
.panneau_section:has(.section_magasin) { z-index: 1; }
.panneau_section_main { z-index: 10; }
.panneau_section_etat { z-index: 8; }
.panneau_section.grandir { flex: 1; min-height: 0; }
.panneau_section_pub {
    flex-shrink: 0;
    padding: 8px 12px 10px;
    z-index: 1;
}
.panneau_pub_texte {
    margin: 0;
    font-size: 10px;
    line-height: 1.35;
    color: var(--muted);
    text-align: center;
    opacity: 0.65;
}
.panneau_section.grandir .section_ligne { height: 100%; }
.panneau_section.grandir .section_corps { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.panneau_section.grandir #notifications { flex: 1; min-height: 0; }

.section_ligne {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    min-height: 0;
}
.section_titre_v {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    user-select: none;
}
.section_corps {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.section_corps.panneau_hud {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    min-width: 0;
    width: 100%;
}
.section_col_gauche {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.section_magasin .section_corps {
    overflow: visible;
}
.panneau_magasin {
    display: flex;
    flex: 1;
    min-height: 0;
}
.panneau_resultat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: var(--carte-hauteur);
    padding: 12px 8px;
    text-align: center;
}
.resultat_titre {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.1;
}
.resultat_titre.victoire { color: #d4a84b; }
.resultat_titre.defaite { color: #c45c5c; }
.resultat_position {
    font-size: 22px;
    font-weight: 600;
    color: var(--texte);
    opacity: .9;
}
.resultat_stats {
    font-size: 12px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.resultat_stats_sep { opacity: .5; }
.resultat_btn_menu {
    margin-top: 6px;
    padding: 8px 28px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    background: var(--accent);
    color: #1a1204;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.resultat_btn_menu:hover { filter: brightness(1.08); }
#btn_reroll {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-size: 10px;
    font-weight: inherit;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    border-radius: 0;
    line-height: 1;
}
#btn_reroll:hover:not(:disabled) {
    background: none;
    color: var(--accent);
}
#btn_reroll:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.panneau_section_compact { padding: 5px 10px; }
.grille_cartes { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }

.section_corps_main { overflow: visible; }
.main_zone {
    position: relative;
    overflow: visible;
}
.stash_float {
    position: absolute;
    left: -40px;
    bottom: -20px;
    z-index: 40;
    pointer-events: none;
    overflow: visible;
}
.stash_apercu {
    position: relative;
    display: block;
    pointer-events: auto;
    width: calc(var(--carte-largeur) * 0.24 + 4px);
    height: calc(var(--carte-hauteur) * 0.24 + 4px);
    padding: 0;
    border: 1px solid rgba(120, 180, 255, .35);
    border-radius: 4px;
    background: linear-gradient(165deg, #1e2838 0%, #151c28 100%);
    cursor: pointer;
    overflow: hidden;
}
.stash_apercu:hover { border-color: rgba(120, 180, 255, .65); }
.stash_apercu:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stash_apercu_pile {
    position: absolute;
    inset: 2px;
    pointer-events: none;
}
.stash_carte_mini {
    position: absolute;
    bottom: 0;
    left: 0;
    width: var(--carte-largeur);
    height: var(--carte-hauteur);
    transform: scale(0.24);
    transform-origin: bottom left;
    pointer-events: none;
    isolation: isolate;
}
.stash_carte_mini .carte_ui {
    background: linear-gradient(160deg, #2d3d55 0%, #252d3d 100%);
    border-color: rgba(120, 180, 255, .55);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
    opacity: 1;
}
.stash_carte_mini .carte_ui.carte_desactivee,
.stash_carte_mini .carte_givre {
    opacity: 1;
}
.stash_carte_mini .carte_pied,
.stash_carte_mini .carte_actions,
.stash_carte_mini .carte_activer_bas { display: none !important; }
.stash_apercu.cache { display: none; }
.stash_badge {
    position: absolute;
    left: -4px;
    bottom: -4px;
    z-index: 10;
    min-width: 12px;
    height: 12px;
    padding: 0 3px;
    border-radius: 999px;
    background: #c93a3a;
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    line-height: 12px;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.stash_badge.cache { display: none; }
.stash_popup {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 8px 10px 12px;
    border-radius: 6px;
    border: 1px solid rgba(120, 180, 255, .35);
    background: linear-gradient(165deg, rgba(26, 34, 48, .97) 0%, rgba(18, 24, 32, .97) 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
    overflow: visible;
    pointer-events: auto;
}
.stash_popup.cache { display: none; }
.stash_popup_corps {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    max-width: 100%;
}
.stash_btn_tout_vendre {
    font-size: 10px;
    font-weight: 700;
    font-family: inherit;
    color: var(--danger);
    background: rgba(224, 90, 90, .15);
    border: 1px solid rgba(224, 90, 90, .45);
    border-radius: 4px;
    padding: 3px 8px;
    line-height: 1.2;
    cursor: pointer;
    flex-shrink: 0;
}
.stash_btn_tout_vendre:hover {
    background: rgba(224, 90, 90, .28);
}
.grille_stash_popup {
    min-height: var(--carte-hauteur);
    flex-shrink: 0;
}
.grille_main { min-height: var(--carte-hauteur); }

/* Main en eventail (4–5 cartes) */
.panneau_section_main {
    position: relative;
    padding-bottom: 14px;
}
.panneau_section_main,
.panneau_section_main .section_ligne,
.panneau_section_main .section_corps { overflow: visible; }
.grille_main.main_eventail {
    position: relative;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 0;
    overflow: visible;
    height: calc(var(--carte-hauteur) + 8px);
}
.grille_main.main_eventail_4 {
    width: calc(var(--carte-largeur) + 3 * (var(--carte-largeur) - 42px));
}
.grille_main.main_eventail_5 {
    width: calc(var(--carte-largeur) + 4 * (var(--carte-largeur) - 64px));
}
.grille_main.main_eventail .carte_slot {
    position: absolute;
    bottom: 0;
    margin: 0;
    transform-origin: 50% 100%;
    transition: left 180ms ease, transform 180ms ease;
}
.grille_main.main_eventail .carte_wrap.main:hover,
.grille_main.main_eventail .carte_wrap.stash_popup_carte:hover {
    z-index: 50;
}
.grille_main.main_eventail_4 .carte_wrap.main.bouffon[data-slot],
.grille_main.main_eventail_5 .carte_wrap.main.bouffon[data-slot] {
    z-index: 30 !important;
}
.grille_main.main_eventail .carte_wrap.main.bouffon:hover {
    z-index: 50 !important;
}

.grille_main.main_eventail_4 .carte_slot[data-slot="0"] { left: 0; transform: rotate(-16deg); z-index: 1; }
.grille_main.main_eventail_4 .carte_slot[data-slot="1"] { left: calc(1 * (var(--carte-largeur) - 42px)); transform: rotate(-5deg);  z-index: 2; }
.grille_main.main_eventail_4 .carte_slot[data-slot="2"] { left: calc(2 * (var(--carte-largeur) - 42px)); transform: rotate(5deg);   z-index: 3; }
.grille_main.main_eventail_4 .carte_slot[data-slot="3"] { left: calc(3 * (var(--carte-largeur) - 42px)); transform: rotate(16deg);  z-index: 4; }

.grille_main.main_eventail_5 .carte_slot[data-slot="0"] { left: 0; transform: rotate(-18deg); z-index: 1; }
.grille_main.main_eventail_5 .carte_slot[data-slot="1"] { left: calc(1 * (var(--carte-largeur) - 64px)); transform: rotate(-9deg);  z-index: 2; }
.grille_main.main_eventail_5 .carte_slot[data-slot="2"] { left: calc(2 * (var(--carte-largeur) - 64px)); transform: rotate(0deg);    z-index: 3; }
.grille_main.main_eventail_5 .carte_slot[data-slot="3"] { left: calc(3 * (var(--carte-largeur) - 64px)); transform: rotate(9deg);   z-index: 4; }
.grille_main.main_eventail_5 .carte_slot[data-slot="4"] { left: calc(4 * (var(--carte-largeur) - 64px)); transform: rotate(18deg);  z-index: 5; }

/* 5 cartes en éventail : fond opaque (la transparence se superpose mal) */
.grille_main.main_eventail_5 .carte_ui,
.carte_wrap.main .carte_ui,
.carte_wrap.magasin .carte_ui {
    background: linear-gradient(160deg, #2d3d55 0%, #252d3d 100%);
    border-color: rgba(120, 180, 255, .55);
}

/* Magasin en eventail (Grand bazar : 4+ cartes) */
#cartes_proposees.magasin_eventail {
    position: relative;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 0;
    overflow: visible;
    min-height: var(--carte-hauteur);
}
#cartes_proposees.magasin_eventail .carte_wrap.magasin:hover {
    z-index: 50;
}
#cartes_proposees.magasin_eventail_4 .carte_wrap.magasin.bouffon[data-slot],
#cartes_proposees.magasin_eventail_5 .carte_wrap.magasin.bouffon[data-slot] {
    z-index: 12;
}
#cartes_proposees.magasin_eventail_4 {
    width: calc(var(--carte-largeur) + 3 * (var(--carte-largeur) - 42px));
    margin-left: 14px;
}
#cartes_proposees.magasin_eventail_5 {
    width: calc(var(--carte-largeur) + 4 * (var(--carte-largeur) - 64px));
    margin-left: 14px;
}
#cartes_proposees.magasin_eventail .carte_slot {
    position: absolute;
    bottom: 0;
    margin: 0;
    transform-origin: 50% 100%;
}
#cartes_proposees.magasin_eventail_4 .carte_slot[data-slot="0"] { left: 0; transform: rotate(-16deg); z-index: 1; }
#cartes_proposees.magasin_eventail_4 .carte_slot[data-slot="1"] { left: calc(1 * (var(--carte-largeur) - 42px)); transform: rotate(-5deg);  z-index: 2; }
#cartes_proposees.magasin_eventail_4 .carte_slot[data-slot="2"] { left: calc(2 * (var(--carte-largeur) - 42px)); transform: rotate(5deg);   z-index: 3; }
#cartes_proposees.magasin_eventail_4 .carte_slot[data-slot="3"] { left: calc(3 * (var(--carte-largeur) - 42px)); transform: rotate(16deg);  z-index: 4; }
#cartes_proposees.magasin_eventail_5 .carte_slot[data-slot="0"] { left: 0; transform: rotate(-18deg); z-index: 1; }
#cartes_proposees.magasin_eventail_5 .carte_slot[data-slot="1"] { left: calc(1 * (var(--carte-largeur) - 64px)); transform: rotate(-9deg);  z-index: 2; }
#cartes_proposees.magasin_eventail_5 .carte_slot[data-slot="2"] { left: calc(2 * (var(--carte-largeur) - 64px)); transform: rotate(0deg);    z-index: 3; }
#cartes_proposees.magasin_eventail_5 .carte_slot[data-slot="3"] { left: calc(3 * (var(--carte-largeur) - 64px)); transform: rotate(9deg);   z-index: 4; }
#cartes_proposees.magasin_eventail_5 .carte_slot[data-slot="4"] { left: calc(4 * (var(--carte-largeur) - 64px)); transform: rotate(18deg);  z-index: 5; }

.grille_main, .carte_wrap.main, .carte_ui {
    user-select: none;
    -webkit-user-select: none;
}
.carte_wrap.main { cursor: grab; touch-action: none; }
.carte_wrap.main .carte_prix,
.carte_wrap.stash_popup_carte .carte_prix,
.carte_wrap.main .carte_action,
.carte_wrap.main .carte_amelio_option,
.carte_wrap.main .carte_btn_ameliorer,
.carte_wrap.main .carte_btn_annuler,
.carte_wrap.main .carte_activer_bas,
.carte_wrap.main .bouffon_recherche,
.carte_wrap.main .bouffon_acheter,
.carte_wrap.main .bouffon_liste { cursor: pointer; }
.grille_main:not(.main_eventail) .carte_slot {
    transition: transform 160ms ease;
}
.carte_drag_floating {
    position: fixed !important;
    z-index: 9999 !important;
    margin: 0 !important;
    left: 0;
    top: 0;
    width: var(--carte-largeur);
    height: var(--carte-hauteur);
    transform: none !important;
    opacity: 1;
    cursor: grabbing;
    pointer-events: none;
    transition: none !important;
    box-shadow: none;
    background: none;
    overflow: visible;
}
.carte_drag_floating .bouffon_apercu {
    display: none;
}
.carte_drag_placeholder {
    flex-shrink: 0;
    width: var(--carte-largeur);
    height: var(--carte-hauteur);
    border: 1px dashed rgba(217, 164, 65, 0.45);
    border-radius: 10px;
    box-sizing: border-box;
    background: rgba(217, 164, 65, 0.07);
}

/* Carte standard (format poker 5:7) */
.carte_wrap { display: block; position: relative; }
.carte_ui {
    position: relative;
    width: var(--carte-largeur);
    height: var(--carte-hauteur);
    background: linear-gradient(160deg, rgba(120, 180, 255, .18) 0%, #252d3d 100%);
    border: 1px solid rgba(120, 180, 255, .45);
    border-radius: 10px;
    padding: 10px 10px 8px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.carte_haut {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.carte_pied {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 4px;
    min-height: 22px;
}
.carte_pied_avec_amelioration {
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.carte_btn_ameliorer,
.carte_btn_annuler {
    font-size: 10px;
    font-weight: 700;
    font-family: inherit;
    border-radius: 4px;
    padding: 2px 5px;
    line-height: 1.2;
    cursor: pointer;
    z-index: 1;
}
.carte_btn_ameliorer {
    color: var(--accent);
    background: rgba(217, 164, 65, .15);
    border: 1px solid rgba(217, 164, 65, .45);
}
.carte_btn_annuler {
    color: var(--muted);
    background: rgba(160, 170, 190, .12);
    border: 1px solid rgba(160, 170, 190, .35);
}
.carte_wrap.main .carte_btn_ameliorer,
.carte_wrap.main .carte_btn_annuler {
    opacity: 0;
}
.carte_wrap.main:hover .carte_btn_ameliorer,
.carte_wrap.main:hover .carte_btn_annuler,
.carte_wrap.main.carte_mode_amelioration .carte_btn_ameliorer,
.carte_wrap.main.carte_mode_amelioration .carte_btn_annuler {
    opacity: 1;
}
.carte_wrap.main.carte_mode_amelioration .carte_prix {
    opacity: 1;
}
.carte_ameliorations {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
    flex: 1;
    justify-content: flex-start;
    min-height: 0;
    overflow-y: auto;
    overflow-anchor: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}
.carte_amelio_option {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    gap: 2px 0;
    width: 100%;
    font-size: 11px;
    font-weight: normal;
    font-family: inherit;
    color: var(--accent);
    background: rgba(217, 164, 65, .15);
    border: 1px solid rgba(217, 164, 65, .45);
    border-radius: 6px;
    padding: 4px 6px;
    line-height: 1.35;
    cursor: pointer;
    text-align: left;
    z-index: 1;
}
.carte_amelio_gain {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}
.carte_amelio_prix {
    flex: 1 0 100%;
    text-align: center;
}
.carte_amelio_option:disabled {
    opacity: .45;
    cursor: not-allowed;
}
.carte_amelio_option:hover:not(:disabled) {
    background: rgba(217, 164, 65, .28);
    border-color: #d9a441;
}
.carte_prix_wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}
.carte_prix_wrap.magasin_achat .carte_prix {
    position: relative;
}
.carte_prix_endette_sticker {
    display: none;
    position: absolute;
    top: -5px;
    right: -7px;
    transform: rotate(-14deg);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.15;
    padding: 2px 4px;
    color: #f5d9a8;
    background: linear-gradient(145deg, #6b3a12 0%, #4a2810 100%);
    border: 1px solid rgba(217, 164, 65, 0.75);
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    z-index: 3;
    white-space: nowrap;
}
.carte_prix_wrap.magasin_achat.endette .carte_prix_endette_sticker {
    display: block;
}
.carte_prix {
    position: static;
    font-size: 10px;
    font-weight: 700;
    font-family: inherit;
    color: var(--accent);
    background: rgba(217, 164, 65, .15);
    border: 1px solid rgba(217, 164, 65, .45);
    border-radius: 4px;
    padding: 2px 5px;
    line-height: 1.2;
    cursor: pointer;
    z-index: 1;
}
.carte_wrap.magasin .carte_prix { opacity: 1; }
.carte_wrap.main .carte_prix,
.carte_wrap.stash_popup_carte .carte_prix {
    opacity: 0;
    color: var(--danger);
    background: rgba(224, 90, 90, .15);
    border-color: rgba(224, 90, 90, .45);
}
.carte_wrap.main:hover .carte_prix,
.carte_wrap.stash_popup_carte:hover .carte_prix,
.stash_popup .carte_wrap.stash_popup_carte .carte_prix {
    opacity: 1;
}
.carte_actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding-top: 4px;
    flex-shrink: 0;
}
.carte_action {
    font-size: 10px;
    font-weight: 700;
    font-family: inherit;
    color: var(--accent);
    background: rgba(217, 164, 65, .15);
    border: 1px solid rgba(217, 164, 65, .45);
    border-radius: 4px;
    padding: 3px 8px;
    line-height: 1.2;
    cursor: pointer;
    z-index: 1;
}
.carte_action.actif {
    color: #f0d090;
    background: rgba(217, 164, 65, .28);
    border-color: #d9a441;
}
.carte_wrap.main.carte_wrap_notaire .carte_actions { opacity: 1; }
.carte_wrap.main .carte_actions { opacity: 0; }
.carte_wrap.main:hover .carte_actions { opacity: 1; }
.carte_nom {
    font-weight: 700;
    font-size: 13px;
    line-height: 1.25;
    word-break: break-word;
    flex-shrink: 0;
    text-align: left;
    color: #eef0f5;
}
.carte_niveau {
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--muted);
    margin-top: 2px;
    flex-shrink: 0;
    text-align: left;
}
.carte_desc {
    font-size: 11px;
    color: #c5cad6;
    line-height: 1.35;
    margin-top: 6px;
    flex: 1;
    min-height: 0;
    text-align: left;
    word-break: break-word;
    overflow-y: auto;
    overflow-anchor: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}
.carte_cd {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    margin-top: 4px;
}
.carte_en_cd .carte_cd { color: #8ec4ff; }
.carte_givre {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to top,
        rgba(80, 160, 240, 0.62) 0%,
        rgba(120, 190, 255, 0.28) 70%,
        rgba(140, 200, 255, 0.08) 100%
    );
    border-radius: 0 0 9px 9px;
    pointer-events: none;
    z-index: 2;
}
.carte_cd_fini {
    animation: carte_cd_bond 0.45s ease;
}
@keyframes carte_cd_bond {
    0%, 100% { transform: translateY(0); }
    35% { transform: translateY(-5px); }
    65% { transform: translateY(-2px); }
}
.carte_peste_compte {
    margin-top: 4px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--danger);
    text-transform: none;
}
.carte_ui.carte_peste_imminente {
    animation: carte_peste_tremble 0.32s ease-in-out infinite;
}
@keyframes carte_peste_tremble {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    20% { transform: translate(-1.5px, 1px) rotate(-0.7deg); }
    40% { transform: translate(1.5px, -1px) rotate(0.7deg); }
    60% { transform: translate(-1px, -1.5px) rotate(-0.5deg); }
    80% { transform: translate(1px, 1px) rotate(0.5deg); }
}
.carte_activer_bas {
    display: block;
    width: 100%;
    margin-top: 8px;
    font-size: 10px;
    font-weight: 700;
    font-family: inherit;
    color: var(--accent);
    background: rgba(217, 164, 65, .18);
    border: 1px solid rgba(217, 164, 65, .5);
    border-radius: 4px;
    padding: 4px 8px;
    line-height: 1.2;
    cursor: pointer;
    flex-shrink: 0;
    align-self: stretch;
}
.carte_activer_bas.actif {
    color: #f0d090;
    background: rgba(217, 164, 65, .28);
    border-color: #d9a441;
}
.carte_kw_or { color: var(--accent); font-weight: 600; }
.carte_kw_marchand { color: #9b8ec4; font-weight: 600; }
.carte_kw_soldat { color: var(--danger); font-weight: 600; }
.carte_kw_att { color: var(--ok); font-weight: 600; }
.carte_kw_def { color: var(--moi); font-weight: 600; }
.carte_kw_carte { color: #c4a0e0; font-weight: 600; }
.carte_kw_vitesse { color: #5ec4e8; font-weight: 600; }
.carte_kw_pv { color: #f07070; font-weight: 600; }
.carte_kw_tours { color: #8ec4ff; font-weight: 600; }
.carte_kw_lieues { color: #7ec8a0; font-weight: 600; }
.carte_kw_richesse { color: #d9a441; font-weight: 600; }
.carte_placeholder {
    border: 2px dashed var(--bordure);
    background: transparent;
    cursor: default;
    pointer-events: none;
}
.carte_placeholder:hover { border-color: var(--bordure); box-shadow: none; }

/* Bouffon du roi — choix de carte */
.carte_wrap.bouffon:not(.carte_drag_floating) { z-index: 30; }
.carte_wrap.bouffon:not(.carte_drag_floating):hover { z-index: 50; }
.bouffon_haut {
    gap: 0;
}
.bouffon_haut .carte_nom {
    margin-bottom: 0;
    line-height: 1.2;
}
.bouffon_recherche {
    width: 100%;
    box-sizing: border-box;
    font-size: 10px;
    padding: 3px 5px;
    margin-top: 2px;
    border-radius: 5px;
    border: 1px solid var(--bordure);
    background: #14181d;
    color: var(--texte);
    flex-shrink: 0;
}
.bouffon_recherche:focus {
    outline: none;
    border-color: rgba(120, 180, 255, .6);
}
.bouffon_liste {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-anchor: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 3px;
}
.bouffon_ligne {
    position: relative;
    padding: 0;
    font-size: 10px;
    line-height: 1.25;
    cursor: default;
    min-height: 16px;
}
.bouffon_ligne_nom {
    display: block;
    white-space: nowrap;
    overflow: visible;
    cursor: default;
}
.bouffon_acheter {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    box-sizing: border-box;
    width: 36px;
    z-index: 2;
    font-size: 9px;
    font-weight: 600;
    padding: 1px 0;
    margin: 0;
    border-radius: 3px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease, background 0.1s ease, border-color 0.1s ease;
}
.bouffon_ligne:hover .bouffon_acheter,
.bouffon_acheter:hover,
.bouffon_acheter:focus-visible {
    opacity: 1;
    pointer-events: auto;
    border-color: rgba(120, 180, 255, .35);
    background: rgba(28, 31, 40, .92);
    box-shadow: 0 0 0 1px rgba(120, 180, 255, .2);
}
.bouffon_acheter:hover {
    background: rgba(120, 180, 255, .22);
}
.bouffon_apercu {
    position: absolute;
    right: calc(100% + 10px);
    top: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
    z-index: 30;
}
.bouffon_apercu.visible {
    opacity: 1;
}
.bouffon_apercu .carte_ui {
    background: linear-gradient(160deg, #2d3d55 0%, #252d3d 100%);
    border-color: rgba(120, 180, 255, .55);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .45);
}

.magasin_attente {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 20px);
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    color: var(--muted);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    opacity: 0.55;
    box-shadow: none;
    pointer-events: none;
}

.carte_wrap.magasin,
.carte_wrap.main {
    position: relative;
}

.vide { color: var(--muted); font-size: 12px; font-style: italic; }

#notifications { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.notif {
    padding: 10px 12px;
    background: #0e1013;
    border-left: 3px solid var(--bordure);
    border-radius: 6px;
}
.notif.gain { border-left-color: var(--ok); }
.notif.perte { border-left-color: var(--danger); }

.notif_combat { padding: 8px 12px; cursor: pointer; }
.notif_combat:hover { background: #14181d; }
.notif_carte[data-adversaire] { cursor: pointer; }
.notif_carte[data-adversaire]:hover { background: #14181d; }
.notif_stats[data-adversaire] { cursor: pointer; }
.notif_stats[data-adversaire]:hover { background: #14181d; }
.notif_entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}
.notif_entete_gauche {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.notif_entete_sep { color: var(--muted); font-weight: 400; }
.notif_entete_attaque { color: var(--ok); }
.notif_entete_defense { color: var(--moi); }
.notif_entete_porc_epic { color: #c9783a; }
.notif_entete_pct { color: var(--texte); }
.notif_entete_or {
    display: flex;
    align-items: center;
    gap: 5px;
}
.notif_entete_or .notif_icone,
.notif_entete_or .notif_valeur {
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
}
.notif_entete_or.neutre .notif_icone,
.notif_entete_or.neutre .notif_valeur {
    color: var(--muted);
    font-weight: 600;
}
.notif_entete_or.gain .notif_icone,
.notif_entete_or.gain .notif_valeur {
    color: var(--ok);
}
.notif_combat_corps { display: flex; flex-direction: column; gap: 3px; }
.notif_grille {
    display: grid;
    grid-template-columns: max-content auto max-content 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 3px;
    align-items: center;
}
.notif_pos_joueur_lbl,
.notif_pos_joueur_stats { grid-column: 1; }
.notif_pos_sep_haut,
.notif_pos_sep_bas { grid-column: 2; }
.notif_pos_ennemi_lbl,
.notif_pos_ennemi_stats { grid-column: 3; }
.notif_pos_extras_haut,
.notif_pos_extras_bas { grid-column: 4; justify-self: end; }
.notif_pos_joueur_lbl,
.notif_pos_sep_haut,
.notif_pos_ennemi_lbl,
.notif_pos_extras_haut { grid-row: 1; }
.notif_pos_joueur_stats,
.notif_pos_sep_bas,
.notif_pos_ennemi_stats,
.notif_pos_extras_bas { grid-row: 2; }
.notif_labels_extra {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.notif_labels_extra_pv .notif_icone,
.notif_labels_extra_pv .notif_valeur { color: #e05a5a; }
.notif_labels_extra_effets .notif_valeur { color: #9b8ec4; font-size: 0.82em; }
.notif_labels_extra_effets .notif_effet_or {
    color: var(--accent);
    font-weight: 700;
}
.notif_extra_inactif .notif_icone,
.notif_extra_inactif .notif_valeur {
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
}
.notif_extra_detruit .notif_valeur {
    color: var(--danger);
    font-size: 13px;
    font-weight: 700;
}
.notif_label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
}
.notif_sep {
    color: var(--bordure);
    font-size: 12px;
    font-weight: 300;
    user-select: none;
}
.notif_bloc {
    display: flex;
    align-items: center;
    gap: 8px;
}
.notif_puissance {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.notif_soutien {
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    margin-left: 2px;
}
.notif_detail { display: flex; align-items: center; gap: 4px; }
.notif_icone {
    width: 16px;
    text-align: center;
    font-size: 12px;
    flex-shrink: 0;
    line-height: 1;
}
.notif_valeur { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.notif_detail_perte .notif_icone,
.notif_detail_perte .notif_valeur { color: var(--danger); }
.notif_detail_marchand .notif_icone,
.notif_detail_marchand .notif_valeur { color: #9b8ec4; }
.notif_detail_pv .notif_icone,
.notif_detail_pv .notif_valeur { color: #e05a5a; }

.notif_stats { padding: 8px 12px; }
.notif_entete_stats { color: #9b8ec4; }
.notif_stats_corps {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 6px;
}
.notif_detail_or .notif_icone,
.notif_detail_or .notif_valeur { color: var(--accent); }
.notif_detail_richesse .notif_icone,
.notif_detail_richesse .notif_valeur { color: #d9a441; }
.notif_detail_soldat .notif_icone,
.notif_detail_soldat .notif_valeur { color: var(--danger); }
.notif_detail_carte .notif_icone,
.notif_detail_carte .notif_valeur { color: #c4a0e0; }
.notif_detail_att .notif_icone,
.notif_detail_att .notif_valeur { color: var(--ok); }
.notif_detail_def .notif_icone,
.notif_detail_def .notif_valeur { color: var(--moi); }

.notif_carte { font-size: 13px; color: var(--muted); }

.notif_recap_cartes {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
}
.notif_recap_ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.notif_recap_ligne[data-adversaire] { cursor: pointer; }
.notif_recap_ligne[data-adversaire]:hover { color: var(--texte); }
.notif_recap_libelle { color: var(--muted); }
.notif_recap_or {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.notif_recap_or.gain .notif_icone,
.notif_recap_or.gain .notif_valeur { color: var(--accent); }
.notif_recap_or.perte .notif_icone,
.notif_recap_or.perte .notif_valeur { color: var(--danger); }

.popup_erreur,
.popup_succes {
    position: fixed;
    z-index: 200;
    transform: translate(-50%, calc(-100% - 10px));
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 6px;
    pointer-events: none;
    white-space: nowrap;
    max-width: 260px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
    opacity: 0;
    transition: opacity .25s ease;
}
.popup_erreur {
    background: rgba(224, 90, 90, .95);
}
.popup_succes {
    background: rgba(72, 160, 96, .95);
}
.popup_erreur.visible,
.popup_succes.visible { opacity: 1; }
.popup_erreur.sortie,
.popup_succes.sortie { opacity: 0; }

.cache { display: none !important; }

#popups_carte {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    overflow: visible;
}
#carte_infos {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 25;
}
.popup_royaume_wrap {
    position: absolute;
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    z-index: 20;
}
.popup_royaume_wrap.popup_royaume_actif,
.popup_royaume_wrap:hover {
    z-index: 200;
}
.popup_royaume_col {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}
.popup_royaume_col::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid var(--bordure);
    flex-shrink: 0;
}
.popup_royaume_icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: rgba(28, 31, 40, .95);
    border: 1px solid var(--bordure);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    cursor: default;
    padding: 0 4px;
    font-family: inherit;
    color: var(--texte);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    flex-shrink: 0;
}
.popup_royaume_icon.popup_royaume_icon_roi {
    width: auto;
    min-width: 28px;
    padding: 0 6px;
}
.popup_roi_or { color: var(--accent); }

.or_flottant_ui {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    font: bold 10px system-ui, sans-serif;
    color: rgba(212, 175, 55, 0.95);
    transform: translate(-50%, -100%);
    white-space: nowrap;
}
.popup_roi_tours {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
}
.popup_royaume_wrap.pigeons .popup_royaume_icon { color: #e05a5a; }
.popup_royaume_wrap.roi_colline .popup_royaume_icon { color: var(--accent); }
.popup_royaume_wrap.mercenaires .popup_royaume_icon { color: var(--ok); cursor: pointer; }
.popup_royaume_wrap.mercenaires .popup_royaume_icon:hover { border-color: var(--ok); }
.popup_royaume_wrap.mercenaires.mercenaires_ameliore .popup_royaume_icon { color: #e05a5a; }
.popup_royaume_wrap.mercenaires.mercenaires_ameliore .popup_royaume_icon:hover {
    border-color: #e05a5a;
}
.popup_royaume_wrap.mendiant .popup_royaume_icon { color: #9b8ec4; }
.popup_royaume_wrap.provoc {
    z-index: 50;
}
.popup_royaume_wrap.provoc.popup_royaume_actif,
.popup_royaume_wrap.provoc:hover {
    z-index: 220;
}
.popup_provoc_bulle {
    max-width: 200px;
    padding: 6px 8px;
    background: rgba(28, 31, 40, .96);
    border: 1px solid var(--bordure);
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    color: var(--texte);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}
.popup_carte_apercu {
    position: absolute;
    left: calc(100% + 6px);
    top: 0;
    width: var(--carte-largeur);
    height: var(--carte-hauteur);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 120ms ease, visibility 120ms ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .45);
    z-index: 201;
}
.popup_carte_apercu.apercu_gauche {
    left: auto;
    right: calc(100% + 6px);
    top: 0;
    transform: none;
}
.popup_carte_apercu.apercu_dessus {
    left: 50%;
    top: auto;
    bottom: calc(100% + 6px);
    transform: translateX(-50%);
}
.popup_carte_apercu.apercu_gauche.apercu_dessus {
    left: auto;
    right: calc(100% + 6px);
    transform: none;
}
.popup_carte_apercu.apercu_dessous {
    left: 50%;
    top: calc(100% + 6px);
    transform: translateX(-50%);
}
.popup_royaume_wrap:hover .popup_carte_apercu,
.popup_royaume_wrap.popup_royaume_actif .popup_carte_apercu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* legacy (supprime) */
.popup_royaume {
    display: none;
}
.carte_desactivee { filter: grayscale(1) brightness(0.82); }
.carte_wrap.main .carte_desactivee,
.carte_wrap.magasin .carte_desactivee {
    opacity: 1;
}
.carte_mini {
    width: 90px;
    min-height: 110px;
    font-size: 11px;
}
.notif_cartes_lues .grille_cartes,
.notif_stats .grille_cartes {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}

/* --- Page d'accueil --- */
body.page_accueil {
    min-height: 100vh;
    overflow: hidden;
    background: var(--carte-bg);
}

.accueil_bord {
    position: fixed;
    top: 0;
    bottom: 0;
    width: max(0px, calc((100vw - 1100px) / 2));
    background: var(--carte-bg);
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.accueil_bord_gauche { left: 0; }
.accueil_bord_droite { right: 0; }

.accueil_bord.motif_ascii > pre {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.accueil_bord_cartes {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 2;
    overflow: visible;
    pointer-events: none;
    --carte-largeur: 108px;
    --carte-hauteur: 151px;
}

.accueil_bord_cartes_gauche {
    left: 0;
}

.accueil_bord_cartes_droite {
    right: 0;
}

.accueil_bord_eventails {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: visible;
}

.accueil_eventail {
    position: absolute;
    left: 0;
    overflow: visible;
}

.accueil_bord_cartes_droite .accueil_eventail {
    left: auto;
    right: 0;
}

.accueil_eventail_haut {
    top: 0;
}

.accueil_eventail_bas {
    bottom: 0;
}

.accueil_eventail_5 {
    width: calc(var(--carte-largeur) + 4 * (var(--carte-largeur) - 64px));
    height: calc(var(--carte-hauteur) + 8px);
}

.accueil_bord_cartes_gauche .accueil_eventail {
    transform-origin: 0% 50%;
}

.accueil_bord_cartes_droite .accueil_eventail {
    transform-origin: 100% 50%;
}

.accueil_eventail .carte_slot {
    position: absolute;
    bottom: 0;
    margin: 0;
    transform-origin: 50% 100%;
}

.accueil_eventail_5 .carte_slot[data-slot="0"] { left: 0; transform: rotate(-18deg); z-index: 1; }
.accueil_eventail_5 .carte_slot[data-slot="1"] { left: calc(1 * (var(--carte-largeur) - 64px)); transform: rotate(-9deg);  z-index: 2; }
.accueil_eventail_5 .carte_slot[data-slot="2"] { left: calc(2 * (var(--carte-largeur) - 64px)); transform: rotate(0deg);    z-index: 3; }
.accueil_eventail_5 .carte_slot[data-slot="3"] { left: calc(3 * (var(--carte-largeur) - 64px)); transform: rotate(9deg);   z-index: 4; }
.accueil_eventail_5 .carte_slot[data-slot="4"] { left: calc(4 * (var(--carte-largeur) - 64px)); transform: rotate(18deg);  z-index: 5; }

.accueil_bord_cartes .carte_ui {
    opacity: 1;
    background-color: #252d3d;
    background: linear-gradient(160deg, #2d3d55 0%, #252d3d 100%);
    border-color: #5a8cc8;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.motif_ascii pre {
    margin: 0;
    padding: 0;
    font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 0;
    color: rgb(21, 21, 21);
    white-space: pre;
    user-select: none;
}

.accueil_scene {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(100%, 1100px);
    max-width: 11m00px;
    background: var(--carte-bg);
    overflow: visible;
    z-index: 1;
}

.accueil_carte {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
    box-sizing: border-box;
}

.accueil_provocs {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}

.accueil_provocs .popup_royaume_wrap {
    pointer-events: none;
}

.accueil_provoc_entree {
    opacity: 0;
    transition: opacity 260ms ease;
}

.accueil_provoc_entree.accueil_provoc_visible {
    opacity: 1;
}

.accueil_provoc_entree.accueil_provoc_sortie {
    opacity: 0;
    transition: opacity 280ms ease;
}

.accueil_fantome {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.accueil_fantome_pointeur {
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    will-change: transform;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.accueil_fantome_pointeur svg {
    display: block;
}

.accueil_version {
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    z-index: 2;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--danger);
    pointer-events: none;
    user-select: none;
}


.accueil {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.accueil_titre {
    position: absolute;
    top: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: min(96vw, 820px);
    pointer-events: none;
}

.accueil_titre_svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.accueil_titre_svg text {
    fill: var(--accent);
    font-family: system-ui, "Segoe UI", Roboto, sans-serif;
    font-size: 4.6rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    filter: drop-shadow(0 2px 24px rgba(217, 164, 65, 0.25));
}

.accueil_centre {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    pointer-events: auto;
}

.accueil_btn {
    min-width: 200px;
    padding: 0.75rem 2.25rem;
    font-size: 1.9rem;
    line-height: 1;
    font-weight: 700;
    color: var(--bg);
    background: var(--accent);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

.accueil_btn:hover:not(:disabled) {
    background: #e8b84d;
    transform: translateY(-1px);
}

.accueil_btn:active:not(:disabled) {
    transform: translateY(0);
}

.accueil_btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.accueil_btn_annuler {
    background: transparent;
    color: var(--texte);
    border: 1px solid var(--bordure);
}

.accueil_btn_annuler:hover:not(:disabled) {
    background: var(--panneau);
    color: var(--danger);
    border-color: var(--danger);
}

.accueil_statut {
    margin: 0;
    font-size: 1rem;
    color: var(--muted);
    min-height: 1.5em;
}

.accueil_file_bots {
    margin: 0.65rem 0 0;
    max-width: 22rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--muted);
    text-align: center;
}

.accueil_decompte {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 1.35rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--texte);
}

.accueil_file_bots_texte {
    display: block;
}

.accueil_btn_go {
    display: block;
    margin: 0.75rem auto 0;
    padding: 0.35rem 1.25rem;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--texte);
    background: var(--surface-2, #2a3140);
    border: 1px solid var(--border, #3a4254);
    border-radius: 6px;
    cursor: pointer;
}

.accueil_btn_go:hover:not(:disabled) {
    background: #343d50;
}

.accueil_btn_go:disabled {
    opacity: 0.45;
    cursor: default;
}

.accueil_points {
    display: inline-block;
    width: 1.25em;
    text-align: left;
}