/* ============================================================
   Les Loups de Mer — Styles complémentaires (v2)
   Lobby Facebook / partage + règles de jeu (v2.1) + animation de brume
   ============================================================ */

/* ── Compte Facebook ── */
.compte-bar{display:none;align-items:center;gap:.8rem;flex-wrap:wrap;justify-content:center;width:100%;max-width:560px;margin-bottom:.9rem;padding:.55rem .9rem;background:rgba(10,20,40,.78);border:1px solid rgba(184,134,11,.25);border-radius:12px;backdrop-filter:blur(4px);position:relative;z-index:1}
.compte-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);flex-shrink:0}
.compte-avatar-ph{display:flex;align-items:center;justify-content:center;background:rgba(184,134,11,.2);font-size:1rem}
.compte-name{font-family:'Crimson Text',serif;font-size:1.02rem;color:var(--cream)}
.compte-hint{font-family:'Crimson Text',serif;font-style:italic;font-size:.85rem;color:var(--sand);opacity:.7}
.link-btn{background:none;border:none;color:#5bc8e8;font-family:'Cinzel',serif;font-size:.68rem;letter-spacing:.06em;cursor:pointer;text-decoration:underline;padding:0;margin-left:auto}
.btn-fb{display:inline-flex;align-items:center;gap:.55rem;padding:.6rem 1.1rem;background:#1877f2;color:#fff;border-radius:8px;text-decoration:none;font-family:'Cinzel',serif;font-size:.78rem;font-weight:700;letter-spacing:.06em;box-shadow:0 3px 12px rgba(24,119,242,.4);transition:filter .15s,transform .15s}
.btn-fb:hover{filter:brightness(1.1);transform:translateY(-1px)}
.p-avatar{width:22px;height:22px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1px solid rgba(184,134,11,.5)}
.lobby-flash{display:none;width:100%;max-width:560px;margin-bottom:.8rem;padding:.6rem .9rem;border-radius:8px;font-family:'Crimson Text',serif;font-size:1rem;text-align:center;background:rgba(76,255,126,.12);border:1px solid rgba(76,255,126,.3);color:#b9ffd0;position:relative;z-index:1}
.lobby-flash.show{display:block}
.lobby-flash.warn{background:rgba(255,170,60,.14);border-color:rgba(255,170,60,.4);color:#ffd9a0}

/* ── Invitation ── */
.invite-banner{display:flex;align-items:center;gap:.9rem;width:100%;max-width:560px;margin-bottom:.9rem;padding:.8rem 1.1rem;background:linear-gradient(135deg,rgba(24,119,242,.22),rgba(184,134,11,.2));border:1px solid rgba(91,200,232,.4);border-radius:12px;font-family:'Crimson Text',serif;font-size:1.02rem;color:var(--cream);position:relative;z-index:1;animation:fadeUp .6s ease both}
.invite-banner strong{font-family:'Cinzel',serif;font-size:.9rem;color:var(--gold-pale);letter-spacing:.04em}
.invite-ico{font-size:1.8rem}

/* ── Composition (livret p.4) ── */
.compo-box{margin:.2rem 0 1rem;padding:.6rem .9rem;border:1px dashed rgba(184,134,11,.3);border-radius:8px;background:rgba(0,0,0,.2);font-family:'Crimson Text',serif;font-size:.92rem;line-height:1.5;color:var(--sand);text-align:center}
.compo-box strong{color:var(--gold-pale)}

/* ── Partage ── */
.share-box{margin:0 0 1.1rem;padding:.8rem;border:1px solid rgba(91,200,232,.25);border-radius:10px;background:rgba(0,60,100,.12)}
.share-title{font-family:'Cinzel',serif;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:#5bc8e8;text-align:center;margin-bottom:.6rem}
.share-buttons{display:flex;gap:.45rem;flex-wrap:wrap;justify-content:center}
.share-btn{display:inline-flex;align-items:center;gap:.3rem;padding:.5rem .8rem;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:var(--cream);font-family:'Cinzel',serif;font-size:.68rem;letter-spacing:.05em;text-decoration:none;cursor:pointer;transition:filter .15s,transform .15s}
.share-btn:hover{filter:brightness(1.25);transform:translateY(-1px)}
.sb-fb{background:#1877f2;border-color:#1877f2;color:#fff}
.sb-ms{background:linear-gradient(135deg,#0099ff,#a033ff 60%,#ff5280);border-color:transparent;color:#fff}
.sb-wa{background:#25d366;border-color:#25d366;color:#052e16}
.sb-copy{border-color:rgba(184,134,11,.45);color:var(--gold-pale)}

/* ── Règles ── */
.rules-details{margin-top:1.3rem;border-top:1px solid rgba(184,134,11,.2);padding-top:.9rem;font-family:'Crimson Text',serif;color:var(--sand)}
.rules-details summary{cursor:pointer;font-family:'Cinzel',serif;font-size:.74rem;letter-spacing:.1em;color:var(--gold);outline:none}
.rules-details ul{margin:.7rem 0 0 1.1rem;line-height:1.55;font-size:.95rem}
.rules-details li{margin-bottom:.35rem}

/* ── Jeu : phases du tour ── */
.secret-tag{font-family:'Crimson Text',serif;font-style:italic;font-size:.7rem;letter-spacing:0;text-transform:none;opacity:.6}
.phase-hint{flex:1;min-width:140px;font-family:'Crimson Text',serif;font-style:italic;color:var(--sand);font-size:.98rem;padding:.4rem 1rem;line-height:1.35}
.phase-hint.mine{color:var(--gold-pale);font-style:normal;font-weight:600;text-shadow:0 0 12px rgba(184,134,11,.5)}
.hand-card.clickable{cursor:pointer}
.hand-card.dim{opacity:.55}
.card-modal-btns{display:flex;flex-direction:column;gap:.55rem;margin-top:1rem}
.card-modal-btns .btn-action{width:100%;padding:.7rem 1rem;font-size:.8rem}
.card-modal-btns .btn-action.secondary{opacity:.8}
.card-modal-btns .btn-action:disabled{opacity:.4;cursor:not-allowed}
.annonce-row{display:flex;align-items:center;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:.4rem}
.annonce-row label{font-family:'Cinzel',serif;font-size:.7rem;letter-spacing:.1em;color:var(--sand)}
.annonce-row select{padding:.5rem .7rem;background:#1a0e00;border:1px solid rgba(184,134,11,.4);border-radius:8px;color:var(--cream);font-family:'Crimson Text',serif;font-size:1rem}
.pending-timer{font-size:.95rem!important;margin-bottom:1rem!important}
.help-box{max-width:520px;max-height:85vh;overflow-y:auto;text-align:left}
.help-box h2{text-align:center}
.p-hmm{display:flex;gap:2px;margin-top:.15rem;position:relative;z-index:1}
.p-hmm .hmm-pip{font-size:.8rem;filter:drop-shadow(0 0 3px rgba(255,60,60,.7))}
.player-card .p-avatar{margin-right:.4rem}
.player-card.eliminated{text-decoration:none}
.player-card.eliminated .p-pseudo-text{text-decoration:line-through}
.player-card .p-revealed{font-family:'Crimson Text',serif;font-size:.8rem;color:#ff9090;position:relative;z-index:1}
.chat-msg.system{opacity:.9;color:var(--cream)}

/* ── Fin de partie : cale révélée ── */
.end-cale{display:flex;gap:.35rem;justify-content:center;flex-wrap:wrap;max-height:130px;overflow-y:auto;margin:.5rem 0}
.end-cale .ec{width:34px;height:48px;border-radius:5px;overflow:hidden;border:1px solid rgba(255,255,255,.2);background:rgba(184,134,11,.12);display:flex;align-items:center;justify-content:center;font-size:.55rem;color:var(--cream);text-align:center;line-height:1.1}
.end-cale .ec.plein{border-color:#4cff7e;box-shadow:0 0 8px rgba(76,255,126,.4)}
.end-cale .ec img{width:100%;height:100%;object-fit:cover}
.end-me{font-family:'Cinzel',serif;font-size:.9rem;letter-spacing:.08em}

@media (max-width:600px){
  .compte-bar{padding:.5rem .6rem;gap:.5rem}.btn-fb{font-size:.7rem;padding:.55rem .8rem}
  .share-btn{font-size:.62rem;padding:.45rem .6rem}.invite-banner{font-size:.9rem;padding:.65rem .8rem}
  .phase-hint{font-size:.85rem;padding:.2rem .4rem;flex-basis:100%}
  .hand-section{flex-wrap:wrap}.card-modal-btns .btn-action{font-size:.74rem}
}

/* ============================================================
   Brume jouée : flou d'écran de 3 secondes
   ============================================================ */
.brume-overlay{
    position:fixed;inset:0;z-index:350;pointer-events:none;opacity:0;overflow:hidden;
    background:radial-gradient(ellipse at 50% 55%,rgba(200,214,232,.50),rgba(130,150,180,.38) 55%,rgba(60,80,112,.55));
    -webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);
}
.brume-overlay.active{animation:brumeFog 3s ease-in-out forwards}
@keyframes brumeFog{
    0%  {opacity:0;-webkit-backdrop-filter:blur(0);    backdrop-filter:blur(0)}
    18% {opacity:1;-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
    78% {opacity:1;-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
    100%{opacity:0;-webkit-backdrop-filter:blur(0);    backdrop-filter:blur(0)}
}
.brume-cloud{position:absolute;width:70vmax;height:46vmax;border-radius:50%;filter:blur(40px);opacity:.55;
    background:radial-gradient(closest-side,rgba(235,242,250,.9),rgba(235,242,250,0))}
.brume-cloud-a{left:-30vmax;top:8vh}
.brume-cloud-b{right:-30vmax;bottom:2vh}
.brume-overlay.active .brume-cloud-a{animation:brumeDriftA 3s ease-in-out forwards}
.brume-overlay.active .brume-cloud-b{animation:brumeDriftB 3s ease-in-out forwards}
@keyframes brumeDriftA{from{transform:translateX(0)}to{transform:translateX(70vw)}}
@keyframes brumeDriftB{from{transform:translateX(0)}to{transform:translateX(-70vw)}}
.brume-overlay-img{position:absolute;left:50%;top:50%;width:min(80vw,900px);height:auto;max-height:80vh;object-fit:contain;
    transform:translate(-50%,-50%);opacity:0;pointer-events:none}
.brume-overlay.active .brume-overlay-img{animation:brumeImg 3s ease-in-out forwards}
@keyframes brumeImg{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}25%{opacity:1;transform:translate(-50%,-50%) scale(1)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.08)}}
.brume-zone.brume-pulse{animation:brumePulse 3s ease-in-out;position:relative;z-index:360}
@keyframes brumePulse{0%,100%{box-shadow:0 0 0 rgba(180,210,255,0)}30%,70%{box-shadow:0 0 34px 8px rgba(180,210,255,.7)}}
@media (prefers-reduced-motion:reduce){.brume-cloud{display:none}}

/* ── Cartes obligatoires (Brume / Voie d'eau) gardées en main ── */
.hand-card.must-play{animation:mustPlay 1.3s ease-in-out infinite}
@keyframes mustPlay{0%,100%{box-shadow:0 0 6px rgba(255,80,80,.45)}50%{box-shadow:0 0 22px 5px rgba(255,90,90,.9)}}

/* ── Vies : la fiche réagit quand on perd / regagne une vie ── */
.player-card.hit{animation:cardHit 1.5s ease both}
@keyframes cardHit{0%,100%{transform:none;box-shadow:none}10%,50%{transform:translateX(-5px);box-shadow:0 0 18px rgba(255,50,50,.8)}30%,70%{transform:translateX(5px);box-shadow:0 0 18px rgba(255,50,50,.8)}}
.player-card.hit .heart.empty:first-of-type,.player-card.hit .heart.empty{color:rgba(255,70,70,.9)}
.player-card.heal{animation:cardHeal 1.5s ease both}
@keyframes cardHeal{0%,100%{box-shadow:none}40%{box-shadow:0 0 20px rgba(76,255,126,.85)}}

/* ── Chat vocal ── */
.voice-panel{flex-shrink:0;padding:.55rem .7rem;border-bottom:1px solid rgba(184,134,11,.15);background:rgba(0,0,0,.22)}
.voice-bar{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.voice-btn{font-family:Cinzel,serif;font-size:.74rem;letter-spacing:.06em;border:1px solid rgba(184,134,11,.45);border-radius:8px;padding:.42rem .7rem;cursor:pointer;
    color:#f1e6c8;background:rgba(184,134,11,.18);transition:background .15s,transform .1s}
.voice-btn:hover:not(:disabled){background:rgba(184,134,11,.32)}
.voice-btn:active{transform:scale(.97)}
.voice-btn.join{flex:1;background:linear-gradient(180deg,#b8860b,#8a6408);color:#1a0e00;font-weight:700}
.voice-btn.live{flex:1;border-color:rgba(76,255,126,.5);background:rgba(76,255,126,.14);color:#aaf5c4}
.voice-btn.muted{flex:1;border-color:rgba(231,76,60,.6);background:rgba(231,76,60,.18);color:#ffb3a8}
.voice-btn.leave{opacity:.8}
.voice-tag{font-family:Cinzel,serif;font-size:.72rem;color:var(--sand,#c8a878);flex:1}
.voice-hint{width:100%;font:italic .76rem/1.3 'Crimson Text',serif;color:var(--sand,#c8a878);opacity:.75}
.voice-warn{width:100%;font:.8rem/1.35 'Crimson Text',serif;color:#ffd9a0;background:rgba(231,150,60,.14);border:1px solid rgba(231,150,60,.4);border-radius:8px;padding:.4rem .6rem}
.voice-mini{font-size:.8rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:6px;color:inherit;cursor:pointer;padding:.1rem .4rem}
.voice-list{display:flex;flex-direction:column;gap:.25rem;margin-top:.45rem;max-height:9.5rem;overflow-y:auto}
.voice-list:empty{display:none}
.voice-row{display:flex;align-items:center;gap:.4rem;font:.85rem 'Crimson Text',serif;color:#f1e6c8;padding:.12rem .25rem;border-radius:6px}
.voice-row .voice-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.25);flex-shrink:0;transition:background .1s,box-shadow .1s}
.voice-row.speaking .voice-dot{background:#4cff7e;box-shadow:0 0 8px 2px rgba(76,255,126,.8)}
.voice-row .voice-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voice-row .voice-name em{opacity:.5;font-size:.8em}
.voice-row .voice-state{font-size:.7rem;opacity:.55}
.voice-row input[type=range]{width:64px;accent-color:#b8860b}
/* fiches joueurs */
.player-card.in-voice .p-name::after{content:'🎧';margin-left:.35rem;font-size:.8em;opacity:.8}
.player-card.speaking{box-shadow:0 0 0 2px rgba(76,255,126,.85),0 0 16px 3px rgba(76,255,126,.55)}
.player-card.speaking .p-name::after{content:'🎙️';opacity:1}
@media (max-width:900px){
    .panel-right{height:auto;min-height:180px;max-height:none}
    .voice-list{max-height:6.5rem}
}
@media (prefers-reduced-motion:reduce){.voice-btn{transition:none}}

/* Éléments mobiles : invisibles sur bureau */
#mobileDock, .menu-btn, #mobileMenu, #sheetBackdrop, #cardPreview, .sheet-head, #mobileRetour { display: none; }

/* ============================================================
   MOBILE (≤ 900 px) — écran de jeu fixe, sans défilement de page
   ============================================================ */
@media (max-width: 900px) {
    #sheetBackdrop { display: block; }
    #cardPreview:not([hidden]) { display: block; }
    .menu-btn { display: block; }
    html, body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
    body.is-mobile { overflow: hidden; touch-action: manipulation; }
    button, .hand-card, .player-card { touch-action: manipulation; }

    .game-layout {
        display: flex; flex-direction: column;
        height: 100vh; height: 100dvh; min-height: 0; overflow: hidden;
    }

    /* 1 ── En-tête sur une seule ligne ── */
    .status-bar {
        flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start;
        gap: .4rem; min-height: 0; padding: .35rem .55rem; padding-top: calc(.35rem + env(safe-area-inset-top));
        padding-left: calc(.55rem + env(safe-area-inset-left)); padding-right: calc(.55rem + env(safe-area-inset-right));
        position: static; flex-shrink: 0;
    }
    .status-bar .game-title { display: none; }
    .status-pills { flex: 1; min-width: 0; flex-wrap: nowrap; gap: .3rem; justify-content: flex-start; overflow: hidden; }
    .status-pills .pill { font-size: .66rem; padding: .22rem .5rem; white-space: nowrap; flex-shrink: 0; }
    .status-pills .pill:nth-child(3) { display: none; }                       /* le code est dans le menu ☰ */
    .status-pills #pillTour { flex-shrink: 1; min-width: 0; overflow: hidden; }
    .status-pills #pillTourName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #statusObjectif { font-size: 0; }
    #statusObjectif::before { content: attr(data-n); font-size: .66rem; }
    #armatorBtns, .status-bar .help-btn { display: none !important; }          /* remplacés par le menu ☰ */
    .menu-btn {
        flex-shrink: 0; width: 38px; height: 34px; border-radius: 9px; font-size: 1.1rem; line-height: 1; cursor: pointer;
        color: var(--gold-pale, #f0d080); background: rgba(184,134,11,.16); border: 1px solid rgba(184,134,11,.4);
    }
    #mobileMenu {
        position: fixed; z-index: 400; top: calc(46px + env(safe-area-inset-top)); right: .5rem; width: min(86vw, 320px);
        background: #14202f; border: 1px solid rgba(184,134,11,.45); border-radius: 12px; padding: .5rem;
        box-shadow: 0 14px 40px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: .35rem;
    }
    #mobileMenu[hidden] { display: none; }
    .mm-code { font: .85rem 'Crimson Text', serif; color: var(--sand, #c8a878); padding: .3rem .4rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; word-break: break-all; }
    .mm-code strong { color: var(--gold, #b8860b); letter-spacing: .15em; font-family: Cinzel, serif; }
    .mm-copy { font-size: .75rem; padding: .3rem .6rem; border-radius: 7px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: inherit; cursor: pointer; }
    .mm-item { text-align: left; font-family: Cinzel, serif; font-size: .85rem; padding: .7rem .8rem; min-height: 44px; border-radius: 9px; cursor: pointer;
        color: #f1e6c8; background: rgba(255,255,255,.06); border: 1px solid rgba(184,134,11,.25); }
    .mm-item.danger { color: #ff9b8f; border-color: rgba(231,76,60,.5); }

    /* 4 ── Joueurs : bandeau horizontal compact ── */
    .panel-players {
        flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; flex-shrink: 0; gap: .4rem;
        padding: .4rem .55rem; border-right: 0; border-bottom: 1px solid rgba(184,134,11,.2); scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .panel-players::-webkit-scrollbar { display: none; }
    .panel-players .panel-title { display: none; }
    .player-card {
        flex: 0 0 auto; min-width: 112px; min-height: 0 !important; padding: .3rem .5rem !important; scroll-snap-align: start;
        display: flex; flex-direction: column; gap: .1rem; font-size: .8rem;
    }
    .player-card .role-card-bg, .player-card .turn-arrow { display: none; }
    .player-card .p-name { gap: .3rem; font-size: .88rem; }
    .player-card .p-avatar { width: 18px; height: 18px; }
    .player-card .p-pseudo-text { font-size: .88rem; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .player-card .p-role-line { display: flex; align-items: center; gap: .35rem; }
    .player-card .p-role { font-size: .68rem; }
    .player-card .p-vies { font-size: .72rem; letter-spacing: -1px; }
    .player-card .p-cards { font-size: .68rem; opacity: .75; }
    .player-card .p-revealed { font-size: .62rem; }
    .player-card.current-turn { box-shadow: 0 0 0 2px rgba(240,208,128,.9); }

    /* 6 ── Plateau : cale, brume, pioche en une rangée ── */
    .board-center { flex: 1; min-height: 0; overflow-y: auto; padding: .5rem .6rem; gap: .5rem; -webkit-overflow-scrolling: touch; }
    .board-center .cale-section:first-child .section-label { display: none; }
    .board-center .cale-section .section-label { font-size: .66rem; margin-bottom: .3rem; }
    .board-center .cale-section .secret-tag { display: none; }
    .objectif-bar { height: 22px; }
    .objectif-text { font-size: .66rem; }
    .board-center .cale-section > div[style*="display:flex"] { flex-direction: column; flex-wrap: nowrap !important; gap: .5rem !important; align-items: stretch !important; }
    /* la pile monte de 2 px par carte (jusqu'à 40 px) + pastille de compte : on garde de la place au-dessus et on n'écrête plus */
    .cale-container { justify-content: center; min-width: 0 !important; width: 100%; height: auto; min-height: 0; max-width: none; padding: 46px .5rem 12px; overflow: visible; }
    .cale-container .cale-stack-wrap { zoom: .8; }
    .cale-container .cale-count-badge { top: -14px; right: -14px; transform: none; }
    .board-center .cale-section > div[style*="display:flex"] > div:last-child { flex-direction: row !important; gap: .5rem !important; width: 100%; }
    .brume-zone, .pioche-zone { flex: 1; min-width: 0; padding: .35rem .4rem !important; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .brume-zone img { display: none; }
    .brume-count { font-size: 1.5rem; line-height: 1.1; }
    .brume-label { font-size: .62rem; text-align: center; }
    .pioche-zone > div:nth-child(1) { font-size: .6rem !important; }
    #piocheCount { font-size: 1.5rem !important; margin: 0 !important; line-height: 1.1; }
    .pioche-zone > div:nth-child(3) { font-size: .66rem !important; }
    #myRoleBox { font-size: .68rem !important; letter-spacing: .04em !important; padding: .3rem .6rem !important; border-radius: 8px !important; }

    #mobileRetour:not([hidden]) {
        display: block; width: 100%; max-width: 700px; min-height: 44px; padding: .6rem 1rem; border-radius: 10px; cursor: pointer;
        font: 700 .9rem Cinzel, serif; letter-spacing: .08em; color: #ffd9d3;
        background: linear-gradient(180deg, rgba(160,40,30,.55), rgba(110,25,20,.7)); border: 1px solid rgba(231,76,60,.7);
        box-shadow: 0 4px 14px rgba(0,0,0,.4);
    }
    #mobileRetour:active { filter: brightness(1.2); }

    /* 3 ── Dock fixe : Chat · Vocal · micro · actions ── */
    #mobileDock {
        flex-shrink: 0; display: flex; align-items: center; gap: .4rem; padding: .35rem .55rem;
        padding-left: calc(.55rem + env(safe-area-inset-left)); padding-right: calc(.55rem + env(safe-area-inset-right));
        background: rgba(10,18,32,.97); border-top: 1px solid rgba(184,134,11,.3);
    }
    .dk-btn { position: relative; flex-shrink: 0; width: 46px; height: 44px; border-radius: 11px; font-size: 1.15rem; line-height: 1; cursor: pointer;
        color: #f1e6c8; background: rgba(184,134,11,.14); border: 1px solid rgba(184,134,11,.4); }
    .dk-btn.on { border-color: rgba(76,255,126,.6); background: rgba(76,255,126,.14); }
    .dk-btn.dk-mic { border-color: rgba(76,255,126,.6); background: rgba(76,255,126,.16); }
    .dk-btn.dk-mic.muted { border-color: rgba(231,76,60,.7); background: rgba(231,76,60,.2); }
    .dk-btn.dk-mic.speaking { box-shadow: 0 0 0 2px rgba(76,255,126,.9), 0 0 14px rgba(76,255,126,.6); }
    .dk-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; font: 700 .68rem/18px Cinzel, serif;
        text-align: center; color: #fff; background: #e74c3c; box-shadow: 0 0 6px rgba(231,76,60,.8); }
    .dk-badge[hidden], .dk-btn[hidden] { display: none; }
    #dockActions { flex: 1; min-width: 0; display: flex; justify-content: flex-end; }
    #dockActions .actions-bar { border: 0; padding: 0; gap: .4rem; flex-wrap: nowrap; justify-content: flex-end; }
    #dockActions .btn-action { min-height: 44px; padding: .5rem .9rem; font-size: .82rem; white-space: nowrap; }

    /* 7 ── Main : cartes grandes, éventail léger, texte sous le doigt ── */
    .hand-section {
        position: static; flex-shrink: 0; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: .3rem; min-height: 0;
        padding: .35rem .55rem calc(.5rem + env(safe-area-inset-bottom)); padding-left: calc(.55rem + env(safe-area-inset-left)); padding-right: calc(.55rem + env(safe-area-inset-right));
        --card-w: min(27vw, 108px, 17dvh);
    }
    .hand-label, .hand-description { display: none !important; }
    #phaseHint { order: -1; flex: 0 0 auto; width: 100%; text-align: center; font-size: .82rem; line-height: 1.25; min-height: 2.1em; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0 .2rem; }
    .hand-cards { justify-content: center; align-items: flex-end; gap: 0; padding: .2rem 0 .1rem; overflow: visible; }
    .hand-card { width: var(--card-w); height: calc(var(--card-w) * 1.45); border-radius: 10px; margin: 0 -.4rem; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
    .hand-card:hover:not(.disabled) { transform: none; box-shadow: none; z-index: auto; }                    /* pas de zoom « survol » au doigt */
    .hand-card .card-name-tooltip { display: none; }
    .hand-cards .hand-card:nth-child(1):nth-last-child(3) { transform: rotate(-4deg) translateY(4px); }
    .hand-cards .hand-card:nth-child(3):nth-last-child(1) { transform: rotate(4deg) translateY(4px); }
    .hand-cards .hand-card:nth-child(2):nth-last-child(2) { z-index: 2; }
    .hand-card:active { filter: brightness(1.15); }

    /* 5 ── Tiroir Chat / Vocal (feuille du bas) ── */
    .panel-right.sheet {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 450; height: min(68vh, 560px); height: min(68dvh, 560px); max-height: none; width: auto;
        border-left: 0; border-top: 1px solid rgba(184,134,11,.5); border-radius: 18px 18px 0 0; box-shadow: 0 -16px 40px rgba(0,0,0,.6);
        transform: translateY(105%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s;
        padding-bottom: env(safe-area-inset-bottom);
    }
    body.sheet-open .panel-right.sheet { transform: none; visibility: visible; transition: transform .25s ease; }
    #sheetBackdrop { position: fixed; inset: 0; z-index: 440; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .2s; }
    body.sheet-open #sheetBackdrop { opacity: 1; pointer-events: auto; }
    .panel-right.sheet > .panel-title { display: none; }
    .sheet-head { display: flex; align-items: center; gap: .4rem; padding: .5rem .6rem; border-bottom: 1px solid rgba(184,134,11,.2); flex-shrink: 0; }
    .sheet-tab { flex: 1; min-height: 40px; font: .8rem Cinzel, serif; border-radius: 9px; cursor: pointer; color: var(--sand, #c8a878); background: transparent; border: 1px solid rgba(184,134,11,.25); }
    .sheet-tab.on { color: #1a0e00; background: linear-gradient(180deg, #d4a017, #b8860b); border-color: #d4a017; font-weight: 700; }
    .sheet-close { width: 40px; height: 40px; border-radius: 50%; font-size: 1rem; cursor: pointer; color: #f1e6c8; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); }
    .panel-right.sheet[data-tab="chat"] .voice-panel { display: none; }
    .panel-right.sheet[data-tab="vocal"] .chat-box, .panel-right.sheet[data-tab="vocal"] .chat-input-wrap { display: none; }
    .panel-right.sheet .voice-panel { flex: 1; overflow-y: auto; border-bottom: 0; }
    .panel-right.sheet .voice-list { max-height: none; }
    .panel-right.sheet .chat-box { overflow-y: auto; }
    .chat-input { font-size: 16px; }                           /* ≥16 px : évite le zoom automatique d'iOS */
    #chatInput { min-height: 44px; }

    /* Aperçu d'une carte (appui long) */
    #cardPreview { position: fixed; z-index: 500; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(78vw, 320px); text-align: center; padding: .9rem; pointer-events: none;
        background: rgba(8,14,26,.96); border: 1px solid rgba(184,134,11,.6); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.7); }
    #cardPreview[hidden] { display: none; }
    #cardPreview img { width: min(52vw, 210px); border-radius: 12px; display: block; margin: 0 auto .6rem; }
    #cardPreview .pv-name { font: 700 1rem Cinzel, serif; color: var(--gold-pale, #f0d080); margin-bottom: .3rem; }
    #cardPreview .pv-desc { font: .95rem/1.35 'Crimson Text', serif; color: #f1e6c8; }

    /* Fenêtres modales : jamais plus hautes que l'écran */
    .modal-box { max-height: 86vh; max-height: 86dvh; overflow-y: auto; }
    .target-btn, .card-modal-btns .btn-action, .modal-box .btn-action { min-height: 44px; }
    .toast-container { top: calc(54px + env(safe-area-inset-top)); right: .5rem; left: .5rem; }
}

/* Petits écrans en hauteur (iPhone SE, vieux Android) */
@media (max-width: 900px) and (max-height: 700px) {
    .cale-container { padding-top: 40px; }
    .cale-container .cale-stack-wrap { zoom: .62; }
    .hand-section { --card-w: min(24vw, 88px, 16dvh); }
    #phaseHint { font-size: .76rem; min-height: 1.9em; }
}

/* Paysage sur téléphone */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
    .status-bar { padding-top: .2rem; padding-bottom: .2rem; }
    .panel-players { padding: .25rem .5rem; }
    .player-card .p-cards, .player-card .p-role-line .p-role { display: none; }
    .cale-container { padding: 30px .5rem 6px; }
    .cale-container .cale-stack-wrap { zoom: .46; }
    .board-center .cale-section > div[style*="display:flex"] { flex-direction: row !important; align-items: stretch !important; }
    .board-center .cale-section > div[style*="display:flex"] > div:last-child { flex-direction: column !important; width: 150px; gap: .3rem !important; }
    .board-center .cale-section:first-child, #myRoleBox { display: none !important; }
    #mobileRetour:not([hidden]) { min-height: 36px; padding: .3rem .8rem; font-size: .78rem; }
    .brume-count, .pioche-zone #piocheCount { font-size: 1rem !important; }
    .brume-label, .pioche-zone > div:nth-child(1), .pioche-zone > div:nth-child(3) { display: none !important; }
    .hand-section { --card-w: min(14vw, 64px, 22dvh); flex-direction: row; align-items: center; padding-top: .2rem; padding-bottom: calc(.3rem + env(safe-area-inset-bottom)); }
    #phaseHint { order: 0; flex: 0 0 38%; width: 38%; text-align: left; justify-content: flex-start; font-size: .72rem; }
    .hand-cards { flex: 1; }
    .brume-count, #piocheCount { font-size: 1.1rem !important; }
    .panel-right.sheet { height: 86dvh; }
}