/* ============================================================
   Les Loups de Mer — Feuille de style principale
   Thème : sombre nautique, bois vieilli, or maritime
   ============================================================ */

/* ── Variables ── */
:root {
    --gold:       #b8860b;
    --gold-light: #d4a017;
    --gold-pale:  #f0d080;
    --cream:      #f5e6c8;
    --sand:       #c8a878;
    --wood-dark:  #2a1a00;
    --wood-mid:   #4a2e0a;
    --wood-light: #7a4e1a;
    --ocean-deep: #05152a;
    --ocean-mid:  #0a2545;
    --ocean-surf: #1a4a6a;
    --teal:       #0d6e8a;
    --red-alert:  #c0392b;
    --green-ok:   #27ae60;
    --radius:     10px;
    --shadow:     0 8px 32px rgba(0,0,0,.6);
}
@import url(https://db.onlinewebfonts.com/c/a37922cddbb831f8955c2b9f177ce02b?family=Monarcha+W01+Regular); 
/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
    background-color: var(--ocean-deep);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
    color: var(--cream);
    font-family: 'Crimson Text', serif;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,.3); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }

/* ── Typography ── */
h1,h2,h3 { font-family: "Monarcha W01 Regular"; }

/* ============================================================
   PLATEAU DE JEU
   ============================================================ */
.game-layout {
    display: grid;
    grid-template-columns: 260px 1fr 260px;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    gap: 0;
}

/* ── Barre de statut (haut) ── */
.status-bar {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem 1.5rem;
    background: linear-gradient(90deg, rgba(42,26,0,.95) 0%, rgba(10,21,42,.95) 50%, rgba(42,26,0,.95) 100%);
    border-bottom: 1px solid rgba(184,134,11,.3);
    gap: 1rem;
    flex-wrap: wrap;
    position: sticky; top: 0; z-index: 100;
}

.status-bar .game-title {
     font-family: "Monarcha W01 Regular";
    font-size: 1.1rem;
    color: var(--gold);
    letter-spacing: .08em;
    white-space: nowrap;
}

.status-pills {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}

.pill {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(184,134,11,.2);
    border-radius: 20px;
    padding: .25rem .8rem;
    font-family: "Monarcha W01 Regular";
    font-size: .72rem;
    letter-spacing: .06em;
    color: var(--sand);
    display: flex; align-items: center; gap: .4rem;
}

.pill.highlight { border-color: var(--gold); color: var(--gold-pale); }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }

/* ── Panneau joueurs (gauche) ── */
.panel-players {
    background: linear-gradient(180deg, rgba(42,26,0,.9) 0%, rgba(20,10,0,.95) 100%);
    border-right: 1px solid rgba(184,134,11,.2);
    padding: 1rem .8rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.panel-title {
    font-family: "Monarcha W01 Regular";
    font-size: .75rem;
    letter-spacing: .18em;
    color: var(--gold);
    opacity: .8;
    text-transform: uppercase;
    text-align: center;
    padding-bottom: .6rem;
    border-bottom: 1px solid rgba(184,134,11,.2);
    margin-bottom: .4rem;
}

.player-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 8px;
    padding: .6rem .8rem;
    transition: border-color .2s, background .2s;
    cursor: default;
    position: relative;
    overflow: hidden;
    min-height: 80px;
}

/* Carte rôle en fond semi-transparent */
.role-card-bg {
    position: absolute;
    width: 120%;
    opacity: .18;
    pointer-events: none;
    z-index: 0;
    transition: opacity .3s;
    transform: rotate(9deg);
}
.role-card-bg img {
    width: 100%;
    border-radius: 6px;
    display: block;
    position: center;
}
.player-card.me:hover .role-card-bg { opacity: .32; }
.player-card.me .role-card-bg { opacity: .22; }

/* Ligne rôle + vies */
.p-role-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: .15rem;
}

/* Cœurs vies */
.p-vies { display: flex; gap: 2px; }
.heart { font-size: .85rem; line-height: 1; transition: color .2s; }
.heart.full  { color: #e74c3c; text-shadow: 0 0 6px rgba(231,76,60,.5); }
.heart.empty { color: rgba(255,255,255,.15); }

/* Cartes Homme à la mer : miniatures à côté du pseudo dans .p-name */
.p-pseudo-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hmm-name-card {
    width: 22px;
    height: 32px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid rgba(255,80,80,.6);
    box-shadow: 0 2px 6px rgba(200,0,0,.5), 0 0 4px rgba(255,50,50,.3);
    flex-shrink: 0;
    cursor: default;
    transition: transform .15s;
    vertical-align: middle;
}
.hmm-name-card:hover {
    transform: scale(1.25) translateY(-3px) !important;
    z-index: 10;
    position: relative;
}
.hmm-fallback {
    font-size: .85rem;
    color: rgba(255,100,100,.9);
    vertical-align: middle;
    margin-left: 2px;
}

.player-card.current-turn {
    border-color: var(--gold);
    background: rgba(184,134,11,.1);
    box-shadow: 0 0 12px rgba(184,134,11,.25);
}

.player-card.me {
    border-color: rgba(100,200,255,.3);
    background: rgba(0,100,180,.08);
}

.player-card.eliminated {
    opacity: .4;
    text-decoration: line-through;
}

.player-card .p-name {
    font-family: "Monarcha W01 Regular";
    font-size: .9rem;
    color: var(--cream);
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
    z-index: 1;
    flex-wrap: nowrap;
    overflow: visible;
}
.player-card .p-name .status-dot {
    flex-shrink: 0;
    margin-right: .45rem;
}

.player-card .p-role {
    font-family: 'Crimson Text', serif;
    font-style: italic;
    font-size: .82rem;
    color: var(--sand);
    opacity: .7;
    position: relative; z-index: 1;
}

.player-card .p-cards {
    font-size: .75rem;
    color: var(--sand);
    opacity: .5;
    margin-top: .2rem;
    position: relative; z-index: 1;
}

.status-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.online  { background: #4cff7e; box-shadow: 0 0 5px #4cff7e; }
.offline { background: #666; }
.turn-arrow {
    position: absolute; right: .6rem; top: 50%;
    transform: translateY(-50%);
    color: var(--gold); font-size: 1rem;
    animation: blink 1s ease infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }

/* ── Zone centrale ── */
.board-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    gap: 1rem;
    overflow-y: auto;
    background-image: url(../images/bggame.jpg);
    background-size: cover;
}

/* ── Cale ── */
.cale-section {
    width: 100%;
    max-width: 700px;
}

.section-label {
    font-family: "Monarcha W01 Regular";
    font-size: .8rem;
    letter-spacing: .2em;
    color: var(--gold);
    opacity: .8;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: .6rem;
    display: flex; align-items: center; justify-content: center; gap: .8rem;
}

.section-label::before,.section-label::after {
    content:''; flex:1; height:1px; background: rgba(184,134,11,.25);
}

.cale-container {
    background: linear-gradient(160deg, rgba(10,25,50,.8) 0%, rgba(5,15,30,.9) 100%);
    border: 1px solid rgba(184,134,11,.25);
    border-radius: 14px;
    padding: 4rem 1rem 1.8rem;
    min-height: 140px;
    max-width: fit-content;
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    box-shadow: inset 0 2px 10px rgba(0,0,0,.5), inset 0 -30px 40px rgba(0,0,0,.4);
}

.cale-empty {
    font-family: 'Crimson Text', serif;
    font-style: italic;
    color: var(--sand);
    opacity: .4;
    font-size: .95rem;
}

/* ── Cartes face cachée dans la cale ── */
.cale-face-cachee {
    width: 82px;
    height: 118px;
    border-radius: 9px;
    border: 1px solid rgba(100,160,255,.25);
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
    cursor: default;
}

.cale-face-cachee.face-visible {
    border-color: rgba(184,134,11,.4);
    box-shadow: 0 3px 12px rgba(0,0,0,.55), 0 0 8px rgba(184,134,11,.2);
}

.cale-face-cachee img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.cale-stack-wrap:hover .cale-face-cachee:last-of-type {
    transform: translateX(calc(-50% + 0px)) translateY(-8px) !important;
}

.cale-pile-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--gold);
    color: #1a0e00;
    border-radius: 50%;
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    font-family: "Monarcha W01 Regular";
    font-size: .65rem;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0,0,0,.5);
    z-index: 20;
}

.cale-total-badge {
    position: absolute;
    bottom: 6px; right: 8px;
    font-family: "Monarcha W01 Regular";
    font-size: .62rem;
    letter-spacing: .08em;
    color: var(--sand);
    opacity: .5;
}

.cale-count-badge {
    position: absolute;
    top: -15px;
    right: -15px;
    transform: translateX(-50%);
    background: var(--gold);
    color: #1a0e00;
    border-radius: 50%;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    font-family: "Monarcha W01 Regular";
    font-size: .75rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,.6);
    z-index: 30;
}

/* ── Mini-cartes (legacy fallback) ── */
.mini-card {
    width: 52px;
    height: 72px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.15);
    overflow: hidden;
    flex-shrink: 0;
    transition: transform .15s;
    cursor: default;
    position: relative;
}
.mini-card img { width: 100%; height: 100%; object-fit: cover; }
.mini-card:hover { transform: translateY(-4px) scale(1.05); }

/* ── Zone Brume ── */
.brume-zone {
    background: linear-gradient(135deg, rgb(55 72 88 / 80%), rgb(23 39 54 / 60%));
    border: 1px dashed rgba(200, 200, 255, .5);
    border-radius: 14px;
    padding: .8rem 1.2rem;
    text-align: center;
    min-width: 140px;
}

.brume-count {
    font-family: 'Cinzel Decorative', serif;
    font-size: 2rem;
    color: rgba(180,200,255,.8);
    text-shadow: 0 0 20px rgba(100,150,255,.4);
}

.brume-label {
    font-family: 'Crimson Text', serif;
    font-style: italic;
    font-size: .85rem;
    color: rgba(180,200,255,.5);
}

/* ── Zone de pêche (pioche) ── */
.pioche-zone {
    background: linear-gradient(160deg, rgba(0,60,80,.6), rgba(0,30,50,.8));
    border: 1px solid rgba(0,150,200,.2);
    border-radius: 14px;
    padding: .8rem 1.2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
    min-width: 100px;
}

.pioche-zone:hover {
    border-color: rgba(0,200,255,.5);
    box-shadow: 0 0 16px rgba(0,200,255,.15);
}

/* ── Objectif progress ── */
.objectif-bar {
    width: 100%;
    max-width: 700px;
    background: rgba(0,0,0,.4);
    border: 1px solid rgba(184,134,11,.2);
    border-radius: 30px;
    height: 18px;
    overflow: hidden;
    position: relative;
}

.objectif-fill {
    height: 100%;
    background: none;
    border-radius: 30px;
    transition: width .6s ease;
}

.objectif-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Monarcha W01 Regular";
    font-size: .65rem;
    letter-spacing: .1em;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,.8);
}

/* ── Main du joueur ── */
.hand-section {
    grid-column: 1 / -1;
    background: linear-gradient(0deg, rgba(42,26,0,.95) 0%, rgba(30,15,0,.9) 100%);
    border-top: 1px solid rgba(184,134,11,.3);
    padding: .8rem 1rem;
    display: flex;
    align-items: center;
    gap: .8rem;
    overflow-x: visible;
    min-height: 130px;
    position: sticky;
    bottom: 0;
    z-index: 50;
}

.hand-label {
    font-family: "Monarcha W01 Regular";
    font-size: .7rem;
    letter-spacing: .15em;
    color: var(--gold);
    opacity: .7;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    flex-shrink: 0;
}

.hand-cards {
    display: flex;
    gap: .6rem;
    flex-wrap: nowrap;
    padding-bottom: .2rem;
}

/* ── Carte joueur (main) ── */
.hand-card {
    width: 76px;
    height: 110px;
    border-radius: 10px;
    border: none;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    transition: transform .18s, border-color .18s, box-shadow .18s;
    user-select: none;
}

.hand-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.hand-card:hover:not(.disabled) {
    transform: translateY(-25px) scale(1.7);
    border-color: var(--gold);
    box-shadow: 0 12px 30px rgba(184,134,11,.5);
    z-index: 10;
}

.hand-card.selected {
    border-color: #4cff7e;
    box-shadow: 0 0 20px rgba(76,255,126,.5);
    transform: translateY(-10px);
}

.hand-card.obligatoire::after {
    content: '!';
    position: absolute;
    top: 3px; right: 5px;
    background: var(--red-alert);
    color: white;
    border-radius: 50%;
    width: 16px; height: 16px;
    display: flex; align-items: center; justify-content: center;
    font-family: "Monarcha W01 Regular";
    font-size: .65rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 5px #ff0000;
}

.hand-card.disabled {
    opacity: .4;
    cursor: not-allowed;
}

.fly-card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    will-change: transform, opacity;
}

.card-name-tooltip {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(0deg, rgba(0,0,0,.9) 0%, transparent 100%);
    padding: .3rem .25rem 1rem;
    font-family: "Monarcha W01 Regular";
    font-size: .45rem;
    letter-spacing: .04em;
    color: var(--cream);
    text-align: center;
    line-height: 1.2;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s;
}

.hand-card:hover .card-name-tooltip { opacity: 1; }

.hand-description {
    min-width: 250px;
    max-width: 280px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(184,134,11,.2);
    border-radius: 14px;
    padding: 1rem;
    color: var(--cream);
    font-family: Crimson Text, serif;
    font-size: .95rem;
    line-height: 1.4;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
    flex-shrink: 0;
}

.hand-description-title {
    font-family: Cinzel, serif;
    font-size: .75rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: .7rem;
}

.hand-description-text {
    color: rgba(255,255,255,.82);
    min-height: 4.5rem;
}

/* ── Panneau droite (chat + actions) ── */
.panel-right {
    background: linear-gradient(180deg, rgba(10,25,42,.95) 0%, rgba(5,15,30,.98) 100%);
    border-left: 1px solid rgba(184,134,11,.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    max-height: calc(100vh - 7rem);
}

.chat-box {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: .8rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.chat-msg {
    font-family: 'Crimson Text', serif;
    font-size: .88rem;
    line-height: 1.4;
    padding: .3rem .5rem;
    border-radius: 5px;
    word-break: break-word;
    transition: opacity .4s ease, max-height .4s ease, margin .4s ease, padding .4s ease;
    max-height: 12rem;
    overflow: hidden;
}

.chat-msg.fade-out {
    opacity: 0;
    max-height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.chat-msg .msg-author {
    font-family: "Monarcha W01 Regular";
    font-size: .7rem;
    color: var(--gold);
    letter-spacing: .05em;
}

.chat-msg.system {
    color: var(--sand);
    opacity: .7;
    font-style: italic;
    background: rgba(184,134,11,.05);
    border-left: 2px solid rgba(184,134,11,.3);
    padding-left: .6rem;
}

.chat-input-wrap {
    display: flex;
    gap: .4rem;
    padding: .6rem;
    border-top: 1px solid rgba(184,134,11,.15);
}

.chat-input {
    flex: 1;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(184,134,11,.2);
    border-radius: 6px;
    padding: .5rem .7rem;
    color: var(--cream);
    font-family: 'Crimson Text', serif;
    font-size: .95rem;
    outline: none;
}

.chat-input:focus { border-color: var(--gold); }

.btn-send {
    background: rgba(184,134,11,.3);
    border: 1px solid rgba(184,134,11,.4);
    border-radius: 6px;
    color: var(--gold);
    padding: .4rem .8rem;
    cursor: pointer;
    font-size: 1rem;
    transition: background .2s;
}

.btn-send:hover { background: rgba(184,134,11,.5); }

/* ── Actions bar ── */
.actions-bar {
    display: flex;
    gap: .5rem;
    padding: .6rem;
    border-top: 1px solid rgba(184,134,11,.15);
    flex-wrap: wrap;
    justify-content: center;
}

.btn-action {
    padding: .5rem .9rem;
    background: linear-gradient(135deg, var(--wood-dark) 0%, var(--wood-mid) 100%);
    border: 1px solid rgba(184,134,11,.35);
    border-radius: 7px;
    color: var(--sand);
    font-family: "Monarcha W01 Regular";
    font-size: .72rem;
    letter-spacing: .06em;
    cursor: pointer;
    transition: border-color .2s, color .2s, box-shadow .2s, transform .15s;
}

.btn-action:hover {
    border-color: var(--gold);
    color: var(--gold-pale);
    box-shadow: 0 4px 12px rgba(184,134,11,.3);
    transform: translateY(-1px);
}

.btn-action.danger {
    border-color: rgba(200,50,50,.4);
    color: #ff9090;
}

.btn-action.danger:hover {
    border-color: var(--red-alert);
    box-shadow: 0 4px 12px rgba(192,57,43,.3);
}

.btn-action.dissolve {
    border-color: rgba(180,0,0,.5);
    color: #ff6060;
    background: linear-gradient(135deg, rgba(80,0,0,.4) 0%, rgba(40,0,0,.5) 100%);
}

.btn-action.dissolve:hover {
    border-color: #cc0000;
    color: #ffaaaa;
    box-shadow: 0 4px 16px rgba(200,0,0,.4);
    background: linear-gradient(135deg, rgba(120,0,0,.5) 0%, rgba(60,0,0,.6) 100%);
}

.btn-action.help-btn {
    padding: .55rem .75rem;
    min-width: 2.7rem;
    font-size: 1rem;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    color: var(--cream);
}

.btn-action.help-btn:hover {
    background: rgba(255,255,255,.15);
    color: var(--gold-pale);
}

.help-list {
    margin: 1rem 0 1.2rem;
    padding-left: 1.1rem;
    color: var(--cream);
    line-height: 1.6;
}

.help-list li {
    margin-bottom: .55rem;
}

/* ── Modal ── */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.75);
    backdrop-filter: blur(4px);
    z-index: 500;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .25s;
}

.modal-overlay.open { opacity: 1; pointer-events: all; }

.modal-box {
    background: linear-gradient(160deg, rgba(42,26,0,.97) 0%, rgba(10,25,50,.97) 100%);
    border: 1px solid rgba(184,134,11,.4);
    border-radius: 16px;
    padding: 2rem;
    max-width: 420px;
    width: 90vw;
    box-shadow: 0 20px 60px rgba(0,0,0,.8);
    transform: translateY(20px);
    transition: transform .25s;
    text-align: center;
}

.modal-overlay.open .modal-box { transform: translateY(0); }

.modal-box h2 {
    font-family: 'Cinzel Decorative', serif;
    color: var(--gold);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.modal-box p {
    font-family: 'Crimson Text', serif;
    color: var(--sand);
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

/* Images de fond pour les modales */
.modal-voie-eau {
    background-image: url('../images/modal_voie_eau.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-reaction-voie-eau {
    background-image: url('../images/modal_voie_eau.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-ecope {
    background-image: url('../images/modal_ecope.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-corne-brume {
    background-image: url('../images/modal_corne_brume.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-jumelles {
    background-image: url('../images/modal_jumelles.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-port {
    background-image: url('../images/modal_port.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-dissolve {
    background-image: url('../images/modal_dissolve.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.confirm-actions {
    display: flex;
    justify-content: center;
    gap: .8rem;
    flex-wrap: wrap;
}

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

.target-btn {
    padding: .65rem 1rem;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(184,134,11,.25);
    border-radius: 8px;
    color: var(--cream);
    font-family: "Monarcha W01 Regular";
    font-size: .82rem;
    cursor: pointer;
    text-align: left;
    transition: background .2s, border-color .2s;
    display: flex; align-items: center; gap: .7rem;
    width: 100%;
}
.target-btn:hover { background: rgba(184,134,11,.15); border-color: var(--gold); }

/* Joueur éliminé dans la liste */
.target-btn.target-eliminated {
    opacity: .6;
    border-color: rgba(255,80,80,.2);
}
.target-btn.target-eliminated:hover {
    background: rgba(255,80,80,.08);
    border-color: rgba(255,80,80,.5);
    opacity: 1;
}

/* Option "déposer dans la cale" */
.target-btn.target-cale {
    border-color: rgba(100,160,255,.25);
    color: rgba(150,200,255,.8);
    font-style: italic;
    font-family: 'Crimson Text', serif;
    font-size: .92rem;
}
.target-btn.target-cale:hover {
    background: rgba(100,160,255,.08);
    border-color: rgba(100,160,255,.5);
    color: rgba(180,220,255,.9);
}

/* ── Fin de partie ── */
.end-screen {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.88);
    backdrop-filter: blur(8px);
    z-index: 300;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .5s;
}

.end-screen.open { opacity: 1; pointer-events: all; }

.end-box {
    background: linear-gradient(160deg, rgba(42,26,0,.98) 0%, rgba(5,15,30,.98) 100%);
    border: 2px solid var(--gold);
    border-radius: 20px;
    padding: 3rem;
    max-width: 500px;
    width: 90vw;
    text-align: center;
    box-shadow: 0 0 80px rgba(184,134,11,.3);
}

.end-box h1 {
    font-family: 'Cinzel Decorative', serif;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.end-box.equipage h1 { color: #4cff7e; text-shadow: 0 0 30px rgba(76,255,126,.5); }
.end-box.morues h1   { color: #ff6b6b; text-shadow: 0 0 30px rgba(255,107,107,.5); }

/* ── Toast ── */
.toast-container {
    position: fixed;
    top: 70px; right: 1rem;
    z-index: 400;
    display: flex; flex-direction: column; gap: .5rem;
    pointer-events: none;
}

.toast {
    background: rgba(10,25,50,.95);
    border: 1px solid rgba(184,134,11,.4);
    border-radius: 10px;
    padding: .7rem 1.1rem;
    font-family: 'Crimson Text', serif;
    font-size: .95rem;
    color: var(--cream);
    box-shadow: var(--shadow);
    animation: toastIn .3s ease, toastOut .3s ease 2.7s forwards;
    max-width: 280px;
}

@keyframes toastIn  { from { opacity:0; transform:translateX(30px); } to { opacity:1; transform:none; } }
@keyframes toastOut { from { opacity:1; } to { opacity:0; } }

/* ── Responsive — Tablette (≤900px) ── */
@media (max-width: 900px) {
    html { font-size: 15px; }
    .game-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto auto;
    }
    .panel-players { grid-row: 2; flex-direction: row; flex-wrap: wrap; }
    .panel-right   { grid-row: 5; height: 180px; }
    .board-center  { grid-row: 3; }
    .hand-section  { grid-row: 4; }
    .hand-description { min-width: 200px; max-width: 220px; }
    .status-bar { padding: .5rem 1rem; gap: .5rem; }
    .status-bar .game-title { font-size: .95rem; }
    .pill { font-size: .65rem; padding: .2rem .6rem; }
    .hand-card { width: 70px; height: 100px; }
    .hand-cards { gap: .4rem; }
}

/* ── Responsive — Mobile (≤600px) ── */
@media (max-width: 600px) {
    html { font-size: 14px; }
    .game-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto auto;
    }
    /* Barre de statut compacte */
    .status-bar {
        flex-direction: column;
        gap: .3rem;
        padding: .4rem .6rem;
    }
    .status-bar .game-title { font-size: .85rem; }
    .status-pills { justify-content: center; }
    .pill { font-size: .6rem; padding: .15rem .4rem; }
    #armatorBtns { width: 100%; flex-direction: column; }
    #armatorBtns .btn-action { font-size: .8rem; padding: .5rem 1rem; }
    
    /* Panneaux joueurs plus compacts */
    .panel-players { padding: .6rem .5rem; gap: .4rem; }
    .panel-title { font-size: .65rem; padding-bottom: .4rem; }
    .player-card { padding: .4rem .6rem; min-height: 70px; font-size: .85rem; }
    .player-card .p-pseudo-text { font-size: .9rem; }
    .player-card .p-role { font-size: .7rem; }
    .player-card .p-vies { font-size: .8rem; }
    .hmm-name-card { width: 24px !important; height: 24px !important; }
    
    /* Zone centrale compacte */
    .board-center { padding: .6rem .5rem; }
    .section-label { font-size: .7rem; }
    .cale-section { margin-bottom: .6rem; }
    .objectif-bar { height: 20px; }
    .objectif-text { font-size: .65rem; }
    .brume-count { font-size: 1.4rem; }
    .brume-label { font-size: .65rem; }
    .pioche-zone { font-size: .65rem; }
    #piocheCount { font-size: 1.3rem; margin: .1rem 0; }
    
    /* Rôle box */
    #myRoleBox { font-size: .75rem; padding: .4rem .8rem; }
    
    /* Chat/Panel droit plus compact */
    .panel-right { grid-row: 5; height: 150px; }
    .chat-box { font-size: .8rem; }
    .chat-input { font-size: .8rem; padding: .4rem .6rem; }
    .msg-author { font-size: .7rem; }
    
    /* Main compacte */
    .hand-section {
        grid-row: 4;
        gap: .4rem;
        padding: .6rem .5rem;
        min-height: auto;
    }
    .hand-label { font-size: .6rem; }
    .hand-cards { gap: .3rem; }
    .hand-card {
        width: 60px;
        height: 88px;
        border-radius: 8px;
    }
    .hand-card:hover:not(.disabled) {
        transform: translateY(-15px) scale(1.4);
    }
    .card-name-tooltip { font-size: .45rem; padding: .2rem .15rem .1rem; }
    .hand-description {
        display: none;
    }
    #notMyTurn { font-size: .8rem; padding: .3rem .6rem; }
    
    /* Modales adaptées */
    .modal-box {
        width: 90vw;
        max-width: none;
        max-height: 80vh;
        padding: .8rem;
    }
    .modal-box h2 { font-size: 1rem; }
    .modal-box p { font-size: .8rem; }
    .btn-action { font-size: .75rem; padding: .5rem .8rem; }
    .target-btn { font-size: .8rem; padding: .4rem .6rem; }
    
    /* Fin de partie */
    .end-box { padding: 1.2rem; }
    .end-box h1 { font-size: 1.2rem; }
    #endRoles { font-size: .75rem; }
    
    /* Scrollbar plus fine */
    ::-webkit-scrollbar { width: 4px; height: 4px; }
}

/* ── Responsive — Mobile index.php (≤600px) ── */
@media (max-width: 600px) {
    /* Lobby */
    .lobby-wrap { padding: 1rem .8rem; }
    .logo-title { margin-bottom: 1.6rem; }
    .logo-title h1 { font-size: clamp(1.6rem, 5vw, 2.8rem); }
    .logo-title .subtitle { font-size: 1rem; }
    
    /* Tabs */
    .lobby-tabs {
        max-width: 100%;
        border-radius: 8px 8px 0 0;
    }
    .tab-btn { 
        padding: .6rem .3rem; 
        font-size: .62rem;
    }
    
    /* Card panel */
    .card-panel {
        max-width: 100%;
        padding: 1.2rem;
        border-radius: 0 0 8px 8px;
    }
    
    /* Formulaires */
    .form-group { margin-bottom: .8rem; }
    .form-group label { font-size: .65rem; margin-bottom: .3rem; }
    .form-group input,
    .form-group select { 
        padding: .6rem .8rem; 
        font-size: .95rem;
    }
    .form-row { grid-template-columns: 1fr; gap: .7rem; }
    .input-code { font-size: 1.1rem !important; }
    
    /* Buttons */
    .btn-primary { 
        padding: .7rem; 
        font-size: .8rem;
        margin-top: .3rem;
    }
    
    /* Messages d'erreur */
    .error-msg { font-size: .75rem; }
    
    /* Salles d'attente */
    .waiting-room { padding: 1.2rem; }
    .code-display-wrap { margin-bottom: 1rem; }
    .room-code { 
        font-size: 1.4rem; 
        letter-spacing: .15em;
        padding: .6rem .8rem;
    }
    .copy-hint { font-size: .7rem; }
    .players-list { max-height: 200px; }
    .players-list li { font-size: .85rem; padding: .3rem 0; }
    
    /* Chat list */
    .public-list-content { max-height: 250px; }
    .public-game-item { 
        padding: .6rem; 
        font-size: .8rem;
    }
    
    /* Animations */
    @keyframes fadeDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: none; } }
    @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
}