/* Anofelis Web — page joueur (board d'un siège, cahier §10.5).
   Même nuit, mêmes cartes que le tapis ; la disposition suit la proposition du cahier : entête (enquêteur,
   compteurs, slots, sac), piles à gauche, en jeu / en cours / menace au centre, la main en bas. */

.page-joueur .barre .lien { margin-left: 0.5rem; }

/* Avant le lancement, ou pour rejoindre le siège */
.attente-joueur { height: calc(100vh - 3rem); overflow-y: auto; padding: 1.5rem clamp(1rem, 4vw, 3rem) 3rem; }
.attente-joueur h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.attente-corps { display: grid; gap: 0.8rem; max-width: 46rem; }
.attente-corps .attente { margin: 0; color: var(--papier-2); }
.rejoindre { display: grid; gap: 0.6rem; padding: 0.9rem 1rem; border: 1px solid var(--filet); border-radius: 3px; background: var(--nuit-2); }
.rejoindre p { margin: 0; }

.champ-pin { width: 12rem; letter-spacing: 0.3em; font-size: 1.1rem; }

/* Board : cartes à 0,9 × la carte du tapis (retour de test : tout était trop petit) */
.board-joueur { --carte-l: 113px; --carte-h: 160px; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; height: calc(100vh - 3rem); background: var(--tapis-fond-2); font-size: 1.05rem; }
.board-joueur h2 { font-size: 1rem; color: var(--papier-2); margin: 0 0 0.4rem; }
.board-joueur .barre-phase { grid-column: auto; }

.onglets-sieges { display: flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.9rem 0; background: var(--nuit); border-bottom: 1px solid var(--filet); overflow-x: auto; }
.onglets-sieges .espace { flex: 1; }
.onglets-sieges .lecture-seule { font-size: 0.85rem; color: var(--papier-2); padding: 0.1rem 0.5rem; border: 1px dashed var(--filet); border-radius: 999px; margin-right: 0.5rem; }
.onglets-sieges .rejoindre { display: flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0; border: 0; background: none; }
.onglets-sieges .rejoindre p { font-size: 0.85rem; color: var(--papier-2); margin: 0; }
.onglets-sieges .rejoindre .ligne-boutons { margin: 0; display: flex; align-items: center; gap: 0.4rem; }
.onglets-sieges .champ-pin { width: 9rem; font-size: 0.95rem; padding: 0.2rem 0.5rem; letter-spacing: 0.2em; }
.onglets-sieges .rejoindre .bouton { padding: 0.25rem 0.7rem; }
.onglet { font: inherit; font-size: 1.05rem; padding: 0.35rem 0.9rem; background: none; color: var(--papier-2); border: 1px solid transparent; border-bottom: 0; border-radius: 3px 3px 0 0; cursor: pointer; display: flex; align-items: baseline; gap: 0.3rem; white-space: nowrap; }
.onglet .sous { font-size: 0.8rem; }
.onglet:hover { color: var(--papier); }
.onglet.courant { color: var(--papier); background: var(--tapis-fond-2); border-color: var(--filet); }
.onglet.moi .nom { color: var(--dorure-2); }

/* Entête compacte : enquêteur, compteurs en chips, tour et actions, slots, mise en place — une seule rangée */
.entete-joueur { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.4rem; padding: 0.4rem 0.9rem; background: var(--nuit); border-bottom: 1px solid var(--filet); border-left: 5px solid var(--faction, var(--papier-2)); }
.entete-joueur.lecture { border-left-style: dashed; }
.entete-joueur .identite { display: flex; gap: 0.6rem; align-items: center; }
.entete-joueur .portrait { width: 4.2rem; aspect-ratio: 7 / 5; object-fit: cover; border-radius: 4px; background: var(--tapis-fond-2); cursor: zoom-in; }
.entete-joueur .portrait.sans-image { display: grid; place-items: center; font-family: var(--serif); text-align: center; font-size: 0.8rem; padding: 0.2rem; }
.entete-joueur .fiche { display: grid; gap: 0; line-height: 1.2; }
.entete-joueur .fiche strong { font-size: 1.15rem; }
.entete-joueur .fiche .sous { font-size: 0.9rem; }
.entete-joueur .etoile { color: var(--dorure-2); }
/* Jauges de l'enquêteur : mêmes chips que sur les cartes (clic = +1, « − » au survol), en plus grand dans l'entête.
   Écart et marge à gauche ≥ 1.1em + 4px : la pastille s'allonge vers la gauche au survol sans rien déplacer (room.css, .jauge-inv). */
.compteurs-compacts { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; margin-left: 0.5rem; }
.entete-joueur .jauges-inv .chip { font-size: 1.15rem; gap: 4px; padding: 2px 8px 2px 2px; }
.entete-joueur .jauge-inv:not(.inactive):is(:hover, .ouverte) { margin-left: calc(-1.1em - 4px); padding-left: calc(1.1em + 6px); }
.entete-joueur .jauges-inv .chip img { width: 32px; height: 32px; }
.entete-joueur .jauges-inv .chip .chip-n { min-width: 1.6em; }
.tour-actions { display: flex; align-items: center; gap: 0.6rem; }
.tour-actions .actions-pips .pip { width: 0.95rem; height: 0.95rem; }
.slots { display: flex; flex-wrap: wrap; gap: 0.3rem 0.4rem; align-items: center; font-size: 0.95rem; }
.slots .slot { color: var(--papier-2); padding: 0.05rem 0.45rem 0.05rem 0.25rem; border: 1px solid var(--filet); border-radius: 999px; }
.slots .slot.main { padding-left: 0.5rem; }
.slots .slot.main .libelle { color: var(--papier); margin-right: 0.3rem; }
.slots .slot.occupe { color: var(--papier); border-color: var(--dorure); }
.slots .slot.depasse { color: var(--wip); border-color: var(--wip); }
.slots .slot img { width: 1.6rem; height: 1.6rem; }
.mise-en-place { display: grid; align-content: center; }
.mise-en-place .ligne-boutons { margin: 0; }
.mon-lieu { display: flex; flex-direction: column; gap: 0.5rem; }
.mon-lieu > #mon-lieu { display: grid; align-content: start; gap: 0.5rem; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
/* Sac du chaos : juste à droite de Play, par-dessus la bande Commit ; les jetons tirés s'étalent vers la droite sur les
   cartes engagées (retour de test du 2026-09-09). Le #chaos hors du bloc Commit (avant le premier rendu) reste invisible. */
.corps-board > #chaos { display: none; }
.bloc-cours { position: relative; }
.sac-joueur { position: absolute; left: 0.5rem; bottom: 0.5rem; z-index: 6; pointer-events: none; }   /* coin bas gauche de Commit */
.sac-joueur .chaos, .sac-joueur .sac { pointer-events: auto; }
.sac-joueur .sac { align-items: flex-end; }
.sac-joueur .tires { max-width: 40rem; margin: 0 0 0.3rem; }
.bloc-cours .bande { padding-left: 5.8rem; }
.board-joueur .sac-forme { width: 4.6rem; }
.board-joueur .sac-popover { left: 0; right: auto; bottom: calc(100% + 0.4rem); top: auto; z-index: 30; }

/* Corps : piles à gauche, en jeu au centre (Play, Commit et menace dessous), mon lieu à droite */
.corps-board { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; min-height: 0; }
/* Colonnes latérales : une carte + marge, sans barre de défilement horizontale (retour de test 1920 × 1080) */
.mon-lieu { padding: 0.7rem 0.9rem; background: var(--nuit); border-left: 1px solid var(--filet); overflow: visible; width: calc(var(--carte-l) + 3rem); box-sizing: border-box; }
.mon-lieu .lieu-carte { position: relative; margin-top: 1.1rem; width: 113px; }
.mon-lieu .lieu-carte .carte { --carte-l: 113px; --carte-h: 160px; }
/* Pions des enquêteurs présents : sur le lieu, à cheval sur son bord haut, comme sur le tapis (35 px, rangée). */
.mon-lieu .lieu-carte .pions-lieu .mini { position: absolute; top: -17px; width: 35px; height: 35px; border-width: 2px; cursor: default; }
.mon-lieu .lieu-nom { margin: 0; font-size: 0.95rem; color: var(--papier-2); }
/* Au-dessus de la main : bouton d'action (comme sur la page scénario), tour, phase — à droite de l'aide */
.main-joueur header .tour-main { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: 0.4rem; align-self: center; }
.main-joueur .tour-main .bouton.icone.petit { padding: 0.2rem 0.4rem; }
.main-joueur .tour-main .bouton.icone.petit svg { width: 1.15rem; height: 1.15rem; }
.mon-lieu .ligne-boutons { margin: 0; display: grid; gap: 0.3rem; }
.mon-lieu .ligne-boutons .bouton { padding-left: 0.4rem; padding-right: 0.4rem; white-space: normal; }
.mon-lieu .sur-le-lieu { display: grid; gap: 0.3rem; }
.mon-lieu .sur-le-lieu .carte { width: calc(var(--carte-l) * 0.62); height: calc(var(--carte-h) * 0.62); }
.mon-lieu .vide { font-size: 0.9rem; }
.piles-joueur { display: grid; align-content: start; gap: 0.9rem; padding: 0.7rem 0.9rem; background: var(--nuit); border-right: 1px solid var(--filet); overflow-y: auto; overflow-x: hidden; width: calc(var(--carte-l) + 3rem); box-sizing: border-box; }
.piles-joueur .pile { justify-self: start; margin-bottom: 0.6rem; }
.piles-joueur .badge { font-size: 0.95rem; width: 1.8rem; height: 1.8rem; }
.dialogue .actions-peek .auto-pay { color: var(--dorure-2); font-weight: 700; }
.piles-joueur .pile.hors-jeu .dos-bouton { width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
/* Étiquette cliquable sous la défausse et la pile hors jeu (règle commune dans room.css) : un peu plus grande sur le board */
.piles-joueur .etiquette-pile.cliquable { font-size: 0.75rem; }
.piles-joueur .pile.hors-jeu .dos-bouton .carte { pointer-events: none; }
.dos-pile.pioche-joueur { border-style: solid; }
/* Première rangée : la zone « In play », au moins haute de ses rangées de cartes (--jeu-h, posée par joueur.js). */
.jeu-joueur { display: grid; grid-template-rows: minmax(max(14rem, var(--jeu-h, 0px)), 1fr) auto; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: 0.6rem 0.8rem; padding: 0.7rem 0.9rem; overflow: auto; }
.bloc-jeu { grid-column: 1 / -1; display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 14rem; }
.bloc-play { display: grid; grid-template-rows: auto auto auto; gap: 0.3rem; justify-items: start; }
.case-play { width: calc(var(--carte-l) + 0.8rem); height: calc(var(--carte-h) + 0.8rem); display: grid; place-items: center; padding: 0.4rem; border: 1px dashed var(--dorure); border-radius: 4px; background: var(--zone); }
.case-play .vide { font-size: 0.85rem; text-align: center; }
.case-play.depot-ok { background: rgba(200, 162, 90, 0.12); }
.zone-jeu { position: relative; min-height: 12rem; border: 1px dashed var(--zone-filet); border-radius: 4px; background: radial-gradient(ellipse at 50% 40%, var(--tapis-fond) 0%, var(--tapis-fond-2) 75%); overflow-x: auto; overflow-y: hidden; }   /* une carte au-delà du bord droit (fenêtre plus étroite que celle du joueur) se rejoint par défilement */
.zone-jeu .carte { position: absolute; }
.zone-jeu > .vide { position: absolute; left: 0.6rem; top: 0.5rem; font-size: 0.9rem; }
.bloc-cours .bande, .bloc-menace .menace { align-items: center; min-height: calc(var(--carte-h) + 0.8rem); }
.bloc-cours .bande .bouton { margin-left: auto; align-self: flex-start; }

/* Main en bas */
.main-joueur { display: grid; gap: 0.3rem; padding: 0.5rem 0.9rem 0.7rem; background: var(--nuit); border-top: 1px solid var(--filet); }
.main-joueur header { display: flex; align-items: baseline; gap: 0.7rem; }
.main-joueur h2 { margin: 0; }
.eventail { display: flex; gap: 0.6rem; min-height: var(--carte-h); overflow-x: auto; padding: 0.4rem; border: 1px dashed var(--zone-filet); border-radius: 4px; background: var(--zone); }
.eventail .carte:hover { transform: translateY(-6px); }
.eventail .vide { align-self: center; font-size: 0.9rem; padding: 0 0.4rem; }

/* Code de siège (tapis et lobby) et deck importé (lobby) */
.code-siege { font-size: 0.85rem; color: var(--papier-2); }
.code-siege strong { color: var(--dorure-2); letter-spacing: 0.15em; font-weight: 500; }
.siege-lobby .code-siege { margin: 0.4rem 0 0; }
.siege header .lien-board { text-decoration: none; }
.import-deck { display: grid; gap: 0.35rem; }
.import-deck .champ-deck { width: 100%; box-sizing: border-box; }
.bloc-deck { margin-top: 0.6rem; padding: 0.5rem 0.6rem; border: 1px solid var(--filet); border-left: 3px solid var(--dorure); border-radius: 2px; background: var(--nuit); display: grid; gap: 0.25rem; }
.bloc-deck p { margin: 0; }
.bloc-deck .deck-nom a { color: var(--papier); font-weight: 500; }
.bloc-deck .sous.alerte { color: var(--wip); }
.faiblesse-pending { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.9rem; }
/* Cartes Anofelis (illustrations alternatives) : option à l'import, ligne du résumé */
.import-deck .choix-anofelis { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; cursor: pointer; }
.ligne-anofelis { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.9rem; }
.attente-joueur .bloc-deck { max-width: 32rem; }

/* Étape 2 : mise en place, mulligan, main, consultation */
.mise-en-place.mulligan { display: grid; gap: 0.3rem; }
.mise-en-place.mulligan .libelle { font-size: 0.9rem; color: var(--dorure-2); }
.main-joueur header .espace { flex: 1; }
.eventail .carte.choisie { outline: 3px solid var(--dorure-2); outline-offset: 2px; transform: translateY(-8px); }
.eventail .carte.choisie::after { content: "✓"; position: absolute; right: 4px; top: 4px; width: 1.3rem; height: 1.3rem; display: grid; place-items: center; font-weight: 700; color: var(--nuit); background: var(--dorure-2); border-radius: 50%; }
.carte.revelee::before { content: "shown"; position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 0; text-align: center; font-size: 0.65rem; color: var(--nuit); background: var(--dorure-2); border-radius: 0 0 4px 4px; z-index: 2; }
/* Consultation d'une pile : le nom sur sa ligne, les gestes carte par carte en dessous (lisible même à cinq gestes — 2026-09-11) */
.carte-peek .actions-peek { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; }
.dialogue .carte-peek figcaption:has(.actions-peek) { flex-direction: column; align-items: stretch; gap: 0.25rem; }
.pile.depot-ok .dos-pile { outline: 2px solid var(--dorure-2); }
.zone-jeu.depot-ok, .eventail.depot-ok { background: rgba(200, 162, 90, 0.12); }

/* Étape 3 : jouer, badges de slot, ressources négatives */
.slots .slot { display: inline-flex; align-items: center; gap: 0.25rem; }
.slots .slot img { width: 1.35rem; height: 1.35rem; }
.portrait-bloc { position: relative; }
.portrait-bloc .verso { position: absolute; right: 2px; bottom: 2px; font-size: 0.7rem; padding: 0 0.3rem; background: rgba(15, 26, 34, 0.85); border-radius: 2px; }
/* Tapis : case Play (une carte) à côté de la zone de menace du siège ; Commit volant au-dessus des pioches.
   La case fait exactement la taille de la carte, son cadre pointillé est dessiné en outline hors de la boîte et « Main N »
   est un badge de coin (comme le compte des pioches) : le siège garde la hauteur de la carte d'enquêteur (2026-09-10). */
.play-siege { position: relative; width: var(--carte-l); height: var(--carte-h); }
.play-siege .case-play { width: 100%; height: 100%; padding: 0; display: grid; place-items: center; outline: 1px dashed var(--dorure); outline-offset: 3px; border-radius: 4px; background: var(--zone); }
.play-siege .case-play.vide { outline-color: var(--zone-filet); }
.play-siege .badge-main { position: absolute; right: -8px; top: -8px; height: 1.4rem; padding: 0 0.45rem; display: grid; place-items: center; font-size: 0.75rem; font-weight: 700; white-space: nowrap; color: var(--nuit); background: var(--dorure-2); border-radius: 999px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
.commit-volant { position: absolute; left: 0.75rem; bottom: 10rem; z-index: 5; max-width: min(60vw, 52rem); padding: 0.45rem 0.6rem 0.5rem; background: rgba(30, 45, 51, 0.94); border: 1px solid var(--dorure); border-radius: 4px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); }
.commit-volant h2 { font-size: 0.95rem; margin: 0 0 0.35rem; color: var(--dorure-2); }
.commit-corps { display: flex; align-items: flex-start; gap: 0.8rem; }
.commit-groupes { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.commit-groupe { display: grid; gap: 0.2rem; }
.commit-groupe .etiquette { font-size: 0.8rem; color: var(--papier-2); }
.commit-cartes { display: flex; gap: 0.35rem; }
/* Totaux d'icônes de compétence (Commit, tapis et board) */
.totaux-competences { display: grid; gap: 0.25rem; align-content: start; padding-left: 0.6rem; border-left: 1px solid var(--filet); }
.total-competence { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 1.05rem; }
.total-competence img { width: 1.9rem; height: 1.9rem; }
.total-competence strong { min-width: 1.2rem; text-align: center; }
.bloc-cours .bande .totaux-competences { margin-left: auto; align-self: stretch; }
.bloc-cours .bande .bouton { margin-left: 0.6rem; }

/* Jauges et jetons plus lisibles sur le board */
.board-joueur .carte .chip { font-size: 0.9rem; gap: 3px; padding: 2px 6px 2px 2px; }
.board-joueur .carte .chip img { width: 24px; height: 24px; }
/* Loupe à droite quand sa place habituelle recouvrirait la carte survolée */
.loupe.a-droite { left: auto; right: 0.75rem; }
.board-joueur .tires .jeton-chaos-img { width: 2.6rem !important; height: 2.6rem !important; }

/* Cartes joueur : la pile de pions (Uses, etc.) en bas sur le texte de la carte, un peu à droite du milieu — elle ne
   cache plus le coût en haut à gauche (retour de test du 2026-09-09). */

/* Auto-pay : bouton « AP » au survol d'une carte de la main */
.eventail .carte .ap { position: absolute; right: 4px; top: 4px; z-index: 3; display: none; width: 2.1rem; height: 2.1rem; padding: 0; border: 2px solid var(--nuit); border-radius: 50%; background: var(--dorure); color: var(--nuit); font: 700 0.85rem/1 var(--sans, sans-serif); cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7); }
.eventail .carte:hover .ap, .eventail .carte:focus-within .ap { display: grid; place-items: center; }
.eventail .carte .ap:hover { filter: brightness(1.15); }
/* Ligne de statut (refus, informations) dans la barre de phase */
.barre-phase .statut { margin: 0 0 0 auto; font-size: 0.9rem; color: var(--wip); }
/* Jetons du chaos tirés dans la colonne de droite : petits, en grille, bornés */

/* Journal : lignes locales (refus, informations propres à ce client) */
.journal .entree.locale { border-left: 3px solid var(--wip); padding-left: 0.4rem; }

/* Jauge d'utilisations (chip) des cartes joueur : la taille du pion d'avant, le nombre lisible */
.carte.joueur .chip-uses img { width: 30px; height: 30px; }
.board-joueur .carte.joueur .chip-uses img { width: 44px; height: 44px; }
.board-joueur .carte.joueur .chip-uses { font-size: 1.05rem; }
.carte.joueur .chip-uses .chip-plus { font-weight: 700; }
/* Bouton Auto Play : visuel fourni par l'utilisateur (pile de jetons et flèche) sur une pastille dorée */
.eventail .carte .ap { width: 2.4rem; height: 2.4rem; background: var(--dorure) url("/img/autopay.png") center / 74% no-repeat; font-size: 0; }

/* Table d'essai « Tester un deck » (/test, cahier §13) : import du deck puis board joueur solo */
.attente-corps.test-deck { max-width: 52rem; margin: 0 auto; }
.attente-joueur:has(.test-deck) { padding: 2rem 1.5rem 3rem; }
.attente-joueur:has(.test-deck) .lobby-entete { max-width: 52rem; margin: 0 auto 1.5rem; }
.attente-corps.test-deck .statut { margin: 0; color: var(--wip); }
/* Filigrane (site.css) dans le lobby d'essai : posé dans `main#attente` (qui défile, le logo suit), dans la marge à
   gauche de la colonne centrée de 52 rem ; l'en-tête et le corps du lobby sont positionnés pour passer au-dessus —
   le lien n'est atteint que dans la marge. Sous 720 px, site.css le réduit. */
.attente-joueur:has(.test-deck) { position: relative; }
.attente-joueur .filigrane { top: -2rem; left: max(calc(50% - 49.5rem), -4rem); }
.attente-joueur:has(.test-deck) .lobby-entete, .attente-corps.test-deck { position: relative; }
@media (max-width: 720px) { .attente-joueur .filigrane { top: -2rem; left: -6rem; } }
.fiche-test { display: flex; gap: 0.9rem; align-items: center; border-left: 3px solid var(--faction, var(--filet)); padding-left: 0.9rem; }
.fiche-test .vignette { width: 158px; aspect-ratio: 7 / 5; object-fit: cover; border-radius: 4px; display: block; background: var(--tapis-fond-2); }
.fiche-test .fiche { display: grid; gap: 0.15rem; }
.barre .moi { display: flex; align-items: center; gap: 0.8rem; }