/* =====================================================================
   La Taverne aux Jeux — interface TÉLÉPHONE (portrait)
   Activée par la classe body.m-phone (app.js, max 760 px de large, portrait).
   Principe : en haut les adversaires en pastilles compactes, au centre la
   zone de jeu, en bas ta main en grand, les boutons d’action juste au-dessus.
   ===================================================================== */

/* ---------- Coque commune ---------- */
body.m-phone { --card-h: min(23vh, 150px); --card-h-mid: min(15vh, 112px); }
body.m-phone .game .topbar { padding: 4px 6px; gap: 4px; min-height: 0; }
body.m-phone .game .topbar .title { font-size: 18px; max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.m-phone .game .topbar .chips { flex: 1 1 auto; min-width: 0; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; gap: 4px; }
body.m-phone .game .topbar .chips::-webkit-scrollbar { display: none; }
body.m-phone .game .topbar .chip { font-size: 11px; padding: 2px 8px; white-space: nowrap; flex: none; }
body.m-phone .game .topbar .spacer { display: none; }
body.m-phone .game .topbar .btn.small { padding: 5px 8px; font-size: 12px; }
body.m-phone .table-area { grid-template-columns: minmax(0, 1fr); }
body.m-phone .felt { padding: 6px 6px 4px; gap: 6px; justify-content: flex-start; }
body.m-phone .status { font-size: 15px; margin: 2px 0; }
body.m-phone .banner { font-size: 13px; padding: 6px 12px; }
body.m-phone .hand-bar { padding: 4px 6px calc(6px + env(safe-area-inset-bottom)); }
body.m-phone .hand-head { font-size: 11.5px; gap: 6px; padding: 0 2px; }
body.m-phone .hand-head > span:last-child:not(:first-child) { display: none; }
body.m-phone .hand { padding-top: 12px; }
body.m-phone .action-bar { margin: 0 0 4px; padding: 6px; gap: 6px; border-radius: 12px; }
body.m-phone .action-bar .btn { padding: 9px 13px; font-size: 14px; }
body.m-phone .action-bar > span { font-size: 12px; width: 100%; text-align: center; }
body.m-phone .modal { padding: 14px 12px; }
body.m-phone .modal.wide, body.m-phone .modal { width: min(100%, 560px); }

/* ---------- Adversaires en pastilles ---------- */
body.m-phone .opponents { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 5px; overflow: visible; width: 100%; flex-shrink: 0; }
body.m-phone .opponents .seat { min-width: 0; padding: 4px 6px 4px 4px; border-radius: 10px; display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 6px; row-gap: 1px; align-items: center; text-align: left; }
body.m-phone .opponents .seat .seat-top { grid-row: 1 / span 2; margin: 0; position: relative; }
body.m-phone .opponents .seat .avatar.seat-av { width: 32px; height: 32px; }
body.m-phone .opponents .seat .fan { position: absolute; right: -5px; bottom: -4px; min-height: 0; }
body.m-phone .opponents .seat .fan .card { display: none; }
body.m-phone .opponents .seat .fan .cnt { margin: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: #0d1b26; color: #fff; font-size: 10.5px; display: grid; place-items: center; box-shadow: 0 0 0 1.5px rgba(230,180,80,.8); }
body.m-phone .opponents .seat .nm { font-size: 12px; max-width: 100%; gap: 4px; }
body.m-phone .opponents .seat .nm .dot { width: 6px; height: 6px; }
body.m-phone .opponents .seat .bot-tag { display: none; }
body.m-phone .opponents .seat .stats { font-size: 10.5px; gap: 2px 6px; margin: 0; line-height: 1.2; }
body.m-phone .opponents .seat .badge { top: -7px; right: -4px; font-size: 12px; }
body.m-phone .opponents .seat .bubble { font-size: 10px; padding: 0 5px; }
body.m-phone .opponents .seat .btn.small { grid-column: 1 / -1; margin-top: 3px !important; padding: 3px 6px; font-size: 11px; }
body.m-phone .opponents .seat .starter-tag { font-size: 10px; }
body.m-phone .opponents .seat.turn { animation: none; box-shadow: 0 0 0 2px var(--gold), 0 0 12px rgba(230,180,80,.35); }

/* ---------- Roi des pirates ---------- */
body.m-phone .g-skullking .trick-zone { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 0; }
body.m-phone .g-skullking .trick { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 6px; max-width: 100%; }
body.m-phone .g-skullking .trick .played { display: flex; flex-direction: column; align-items: center; gap: 3px; width: calc(var(--card-h-mid) * var(--card-ar)); }
body.m-phone .g-skullking .trick .who { font-size: 10px; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: flex; align-items: center; gap: 3px; }
body.m-phone .g-skullking .trick .who .avatar { width: 16px; height: 16px; }
body.m-phone .g-skullking .bid-grid { gap: 6px; }
body.m-phone .g-skullking .mini-hand .card.small { --card-h: 74px; --card-w: calc(74px * var(--card-ar)); }

/* ---------- Belote ---------- */
body.m-phone .g-belote .cross { grid-template-columns: 74px minmax(0, 1fr) 74px; grid-template-rows: auto 1fr; grid-template-areas: "n n n" "w c e"; gap: 6px 4px; align-items: start; }
body.m-phone .g-belote .cross .c-n { justify-self: center; }
body.m-phone .g-belote .cross .c-w, body.m-phone .g-belote .cross .c-e { align-self: center; }
body.m-phone .g-belote .cross .seat { min-width: 0; padding: 4px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1px; }
body.m-phone .g-belote .cross .c-n .seat { flex-direction: row; gap: 6px; padding: 4px 10px 4px 4px; }
body.m-phone .g-belote .cross .seat .seat-top { margin: 0; }
body.m-phone .g-belote .cross .seat .avatar.seat-av { width: 34px; height: 34px; }
body.m-phone .g-belote .cross .fan { display: none; }
body.m-phone .g-belote .cross .seat .nm { font-size: 11.5px; max-width: 68px; justify-content: center; }
body.m-phone .g-belote .cross .c-n .seat .nm { max-width: 120px; }
body.m-phone .g-belote .cross .seat .stats { font-size: 10px; flex-direction: column; gap: 1px; align-items: center; margin: 0; }
body.m-phone .g-belote .cross .c-n .seat .stats { flex-direction: row; }
body.m-phone .g-belote .c-c { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%; }
body.m-phone .g-belote .contract-pill { font-size: 12px; padding: 3px 10px; }
body.m-phone .g-belote .live-score { gap: 6px; }
body.m-phone .g-belote .live-score .ls { padding: 2px 10px; min-width: 0; flex-direction: row; gap: 6px; align-items: baseline; }
body.m-phone .g-belote .live-score .ls b { font-size: 20px; }
body.m-phone .g-belote .live-score .ls small { font-size: 10px; }
body.m-phone .g-belote .hand-head { display: none; }
body.m-phone .g-belote .bid-center .turned .card.mid { --card-h-mid: 96px; }

/* ---------- Uno ---------- */
body.m-phone .g-uno .trick-zone { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; }
body.m-phone .g-uno .uno-center { margin-top: 4px; gap: 14px; }
body.m-phone .g-uno .color-ring { width: 54px; height: 54px; font-size: 11px; }
body.m-phone .g-uno .color-pick { gap: 8px; }

/* ---------- Sous Zéro ---------- */
body.m-phone .g-skyjo .sky-opps { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
body.m-phone .g-skyjo .sky-opps .seat { grid-template-columns: 26px minmax(0, 1fr); grid-template-rows: auto auto auto; }
body.m-phone .g-skyjo .sky-opps .seat .avatar.seat-av { width: 26px; height: 26px; }
body.m-phone .g-skyjo .sky-opps .sky-grid.mini { grid-column: 1 / -1; justify-self: center; margin-top: 3px; }
body.m-phone .g-skyjo .sky-grid.mini .card { --card-h: 22px; --card-w: calc(22px * var(--card-ar)); }
body.m-phone .g-skyjo .trick-zone { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; gap: 4px; }
body.m-phone .g-skyjo .uno-center { margin: 0; gap: 14px; padding: 0; }
body.m-phone .g-skyjo .uno-center .card.mid { --card-h-mid: 92px; }
body.m-phone .g-skyjo .sky-grid.big .card { --card-h: min(10.5vh, 84px); --card-w: calc(var(--card-h) * var(--card-ar)); }
body.m-phone .g-skyjo .sky-grid.big { gap: 5px; }

/* ---------- Petit bac ---------- */
body.m-phone .g-petitbac .pb-head { gap: 8px; }
body.m-phone .g-petitbac .pb-letter { width: 46px; height: 46px; font-size: 32px; }
body.m-phone .g-petitbac .pb-head .status { font-size: 13px; }
body.m-phone .g-petitbac .pb-timer { font-size: 20px; min-width: 46px; }
body.m-phone .g-petitbac .pb-sheet { grid-template-columns: 1fr; gap: 5px; padding: 8px; }
body.m-phone .g-petitbac .pb-row { display: grid; grid-template-columns: 34% 1fr; align-items: center; gap: 6px; }
body.m-phone .g-petitbac .pb-row > span { font-size: 12px; line-height: 1.15; }
body.m-phone .g-petitbac .pb-row input { padding: 9px 10px; font-size: 16px; min-width: 0; }
body.m-phone .g-petitbac .pb-stop { font-size: 18px; padding: 12px 26px; }
body.m-phone .g-petitbac .action-bar > span { display: none; }
body.m-phone .g-petitbac .pb-vote { overflow-x: auto; }
body.m-phone .g-petitbac .pb-help { font-size: 12px; margin: 2px 0 4px; }

/* ---------- Poker ---------- */
body.m-phone .g-poker .felt { padding: 6px; }
body.m-phone .pkm { width: 100%; flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
body.m-phone .pkm-opps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
body.m-phone .pkm-opps.n1 { grid-template-columns: minmax(0, 220px); justify-content: center; }
body.m-phone .pkm-opps.n3, body.m-phone .pkm-opps.n5, body.m-phone .pkm-opps.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.m-phone .pkm-seat { position: relative; padding: 5px 6px; border-radius: 10px; background: rgba(0,0,0,.3); border: 2px solid transparent; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.m-phone .pkm-seat.turn { border-color: var(--gold); box-shadow: 0 0 12px rgba(230,180,80,.35); }
body.m-phone .pkm-seat.won { border-color: #47c47e; background: rgba(71,196,126,.15); }
body.m-phone .pkm-seat.folded { opacity: .5; } body.m-phone .pkm-seat.out { opacity: .35; filter: grayscale(1); }
body.m-phone .pkm-top { display: flex; align-items: center; gap: 5px; min-width: 0; }
body.m-phone .pkm-av { width: 26px; height: 26px; flex: none; }
body.m-phone .pkm-nm { font-weight: 800; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
body.m-phone .pkm-marks { display: flex; gap: 2px; } body.m-phone .pkm-marks .dealer-btn, body.m-phone .pkm-marks .blind { position: static; transform: none; font-size: 9px; width: auto; height: auto; padding: 1px 4px; }
body.m-phone .pkm-mid, body.m-phone .pkm-bot { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; font-size: 11px; min-height: 0; }
body.m-phone .pkm-bot:empty { display: none; }
body.m-phone .pkm-bet { color: #ffd98a; font-weight: 800; }
body.m-phone .pkm-seat .bubble { font-size: 10px; padding: 0 6px; }
body.m-phone .pkm-seat .cat { font-size: 10px; color: var(--gold); font-weight: 800; }
body.m-phone .pkm-cards { position: absolute; right: 4px; top: 4px; display: flex; gap: 2px; }
body.m-phone .pkm-cards .card.pkm-card { --card-h: 30px; --card-w: calc(30px * var(--card-ar)); }
body.m-phone .pkm-cards:not(.hidden) .card.pkm-card { --card-h: 44px; --card-w: calc(44px * var(--card-ar)); }
body.m-phone .pkm-cards:not(.hidden) { top: auto; bottom: 4px; }
body.m-phone .pkm-cards .card .idx { display: flex; }
body.m-phone .pkm-felt { flex: 1; min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 22px; padding: 10px 6px; background: radial-gradient(ellipse at center, #22774f, #0e3d28 75%); box-shadow: inset 0 0 0 5px #5a3a18, inset 0 0 0 7px #c9a24a, inset 0 0 30px rgba(0,0,0,.5); }
body.m-phone .pkm-felt .pk-board { gap: 4px; }
body.m-phone .pkm-felt .pk-board .card.mid { --card-h-mid: min(11vh, 86px); }
body.m-phone .pkm-felt .pk-board .card .idx { display: flex; }
body.m-phone .pkm-felt .pk-pot { font-size: 14px; }
body.m-phone .pkm-felt .pk-win { gap: 4px; } body.m-phone .pkm-felt .pk-win-one { font-size: 13px; }
body.m-phone .g-poker .pk-hand .card { --card-h: min(17vh, 120px); --card-w: calc(var(--card-h) * var(--card-ar)); }
body.m-phone .g-poker .pk-actions { padding: 6px; }

/* ---------- Ajustements (2e passe) ---------- */
body.m-phone .game .topbar .title { display: none; }
body.m-phone .opponents .seat .nm { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.m-phone .opponents .seat .nm .dot { display: inline-block; vertical-align: middle; margin-right: 3px; }
/* Roi des pirates : plus de place pour le pli */
body.m-phone .g-skullking { --card-h-mid: min(17vh, 124px); }
/* Belote : noms des côtés lisibles */
body.m-phone .g-belote .cross { grid-template-columns: 80px minmax(0, 1fr) 80px; }
body.m-phone .g-belote .cross .seat { width: 100%; }
body.m-phone .g-belote .cross .seat .nm { display: block; max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
body.m-phone .g-belote .cross .seat .nm .dot { display: none; }
body.m-phone .g-belote .cross .seat .bot-tag { display: none; }
body.m-phone .g-belote { --card-h-mid: min(13vh, 104px); }
/* Poker : cartes montrées sur leur propre ligne, dos cachés inutiles masqués */
body.m-phone .pkm-cards.hidden { display: none; }
body.m-phone .pkm-cards:not(.hidden) { position: static; align-self: flex-end; margin-top: -2px; }
/* Sous Zéro : grilles adverses compactes, 3 par ligne */
body.m-phone .g-skyjo .sky-opps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
body.m-phone .g-skyjo .sky-opps .seat { padding: 3px; grid-template-columns: 22px minmax(0, 1fr); column-gap: 4px; }
body.m-phone .g-skyjo .sky-opps .seat .avatar.seat-av { width: 22px; height: 22px; }
body.m-phone .g-skyjo .sky-opps .seat .nm { font-size: 10.5px; }
body.m-phone .g-skyjo .sky-opps .seat .stats { font-size: 9.5px; }
body.m-phone .g-skyjo .sky-grid.mini { gap: 1px; }
body.m-phone .g-skyjo .sky-grid.mini .card { --card-h: 15px; --card-w: calc(15px * var(--card-ar)); border-radius: 2px; }
body.m-phone .g-skyjo .trick-zone .status { font-size: 13px; }
body.m-phone .g-skyjo .uno-center .card.mid { --card-h-mid: 84px; }
/* Petit bac : pas de bandeau vide */
body.m-phone .g-petitbac .action-bar:not(:has(.btn)) { display: none; }
body.m-phone .g-skyjo .sky-opp { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 3px 2px 4px; border-radius: 10px; background: rgba(0,0,0,.25); }
body.m-phone .g-skyjo .sky-opp .seat { background: none; width: 100%; padding: 0 2px; border: 0; }
body.m-phone .g-skyjo .sky-opp .seat.turn { box-shadow: none; }
body.m-phone .g-skyjo .sky-opp:has(.seat.turn) { box-shadow: 0 0 0 2px var(--gold), 0 0 10px rgba(230,180,80,.3); }
/* Poker : panneau de mise compact (2 lignes) et tapis qui se resserre */
body.m-phone .g-poker .pk-actions { flex-direction: column; gap: 5px; padding: 6px; }
body.m-phone .g-poker .pk-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; width: 100%; }
body.m-phone .g-poker .pk-acts .btn { padding: 9px 4px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.m-phone .g-poker .raise-box { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "amt quick"; gap: 6px; align-items: center; width: 100%; padding: 0; }
body.m-phone .g-poker .raise-box input[type=range] { display: none; }
body.m-phone .g-poker .raise-amount { grid-area: amt; gap: 4px; }
body.m-phone .g-poker .raise-amount .cv { width: 32px; height: 32px; }
body.m-phone .g-poker .ra-val { min-width: 62px; padding: 2px 6px; } body.m-phone .g-poker .ra-val b { font-size: 16px; } body.m-phone .g-poker .ra-val small { font-size: 9px; }
body.m-phone .g-poker .raise-quick { grid-area: quick; display: flex; gap: 4px; justify-content: flex-end; flex-wrap: nowrap; }
body.m-phone .g-poker .raise-quick .cv { padding: 6px 7px; font-size: 12px; }
body.m-phone .g-poker .raise-quick .btn { padding: 7px 10px; font-size: 13px; white-space: nowrap; }
body.m-phone .pkm-felt { min-height: 140px; padding: 6px; gap: 4px; }
body.m-phone .g-poker:has(.pk-actions) .pkm-felt .pk-board .card.mid { --card-h-mid: min(8.5vh, 70px); }
body.m-phone .g-poker:has(.pk-actions) .pk-hand .card { --card-h: min(12vh, 90px); }
body.m-phone .g-poker .pk-street { font-size: 13px; }
body.m-phone .pkm-felt .pk-pot { position: static; transform: none; margin: 0; padding: 3px 14px; }
body.m-phone .g-poker .raise-quick .cv { white-space: nowrap; }
@media (max-width: 400px) {
  body.m-phone .g-poker .raise-box { grid-template-columns: 1fr; grid-template-areas: "amt" "quick"; justify-items: center; }
  body.m-phone .g-poker .raise-quick { justify-content: center; }
}

/* =================== 2e lot : Président, Blackjack, Menteur, Le Pire du Pire, Nom de code =================== */
/* zones centrales qui occupent la place libre */
body.m-phone .g-president .trick-zone, body.m-phone .g-blackjack .trick-zone, body.m-phone .g-menteur .trick-zone, body.m-phone .g-blancmanger .trick-zone { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 0; }
/* barres d'action sur une ligne, textes d'aide masqués */
body.m-phone .g-president .action-bar, body.m-phone .g-menteur .action-bar { flex-wrap: nowrap; }
body.m-phone .g-president .action-bar > span, body.m-phone .g-menteur .action-bar > span { display: none; }
body.m-phone .g-president .action-bar .btn, body.m-phone .g-menteur .action-bar .btn { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Président ---------- */
body.m-phone .g-president { --card-h-mid: min(18vh, 132px); }
body.m-phone .g-president .pr-stack { min-height: calc(var(--card-h-mid) + 24px); }
body.m-phone .g-president .opponents .seat .stats .role { font-size: 10px; }

/* ---------- Blackjack ---------- */
body.m-phone .g-blackjack .bj-rule { display: none; }
body.m-phone .g-blackjack { --card-h-mid: min(14vh, 104px); }
body.m-phone .g-blackjack .bj-dealer { gap: 4px; }
body.m-phone .g-blackjack .bj-mini .card { --card-h: 40px; --card-w: calc(40px * var(--card-ar)); }
body.m-phone .g-blackjack .bj-hand .card { --card-h: min(19vh, 132px); --card-w: calc(var(--card-h) * var(--card-ar)); }
body.m-phone .g-blackjack .action-bar { flex-wrap: nowrap; }
body.m-phone .g-blackjack .action-bar .btn { flex: 1; min-width: 0; padding: 11px 6px; }
body.m-phone .g-blackjack .bj-bet { flex-direction: column; flex-wrap: wrap; }
body.m-phone .g-blackjack .bj-chipbtns { flex-wrap: wrap; justify-content: center; }

/* ---------- Menteur ---------- */
body.m-phone .g-menteur { --card-h-mid: min(13vh, 96px); }
body.m-phone .g-menteur .mt-row { gap: 12px; }
body.m-phone .g-menteur .mt-next { padding: 6px 12px; } body.m-phone .g-menteur .mt-next b { font-size: 30px; }
body.m-phone .g-menteur .mt-claim { font-size: 13px; padding: 4px 10px; }
body.m-phone .g-menteur .mt-reveal .card.mid { --card-h-mid: 74px; }
body.m-phone .g-menteur .mt-reveal .banner { font-size: 12px; }
body.m-phone .g-menteur .mt-liar { flex: 0 0 auto !important; }

/* ---------- Le Pire du Pire ---------- */
body.m-phone .g-blancmanger .trick-zone { justify-content: flex-start; overflow-y: auto; }
body.m-phone .g-blancmanger .bm-q { width: 100%; min-height: 0; padding: 14px 16px 10px; }
body.m-phone .g-blancmanger .bm-q-text { font-size: 17px; }
body.m-phone .g-blancmanger .bm-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 100%; }
body.m-phone .g-blancmanger .bm-a { width: auto; min-height: 64px; font-size: 13px; padding: 8px 10px; }
body.m-phone .g-blancmanger .bm-hand { gap: 6px; padding-top: 6px; }
body.m-phone .g-blancmanger .bm-card { --w: 104px; min-height: 104px; font-size: 12.5px; flex: none; }
body.m-phone .g-blancmanger .bm-free { flex-wrap: nowrap; }
body.m-phone .g-blancmanger .bm-free input { flex: 1; min-width: 0; font-size: 16px; }

/* ---------- Nom de code ---------- */
body.m-phone .g-nomdecode .nc-wrap { width: 100%; }
body.m-phone .g-nomdecode .nc-team { padding: 5px 8px; }
body.m-phone .g-nomdecode .nc-th b { font-size: 17px; }
body.m-phone .g-nomdecode .nc-members { font-size: 11.5px; }
body.m-phone .g-nomdecode .nc-score { font-size: 10.5px; }
body.m-phone .g-nomdecode .nc-grid { gap: 4px; }
body.m-phone .g-nomdecode .nc-word { min-height: 52px; font-size: 10.5px; padding: 2px; }
body.m-phone .g-nomdecode .nc-cluebar { flex-wrap: wrap; }
body.m-phone .g-nomdecode .nc-cluebar input { flex: 1 1 60%; min-width: 0; font-size: 16px; }
body.m-phone .g-nomdecode .nc-cluebar select { flex: 0 0 auto; }
body.m-phone .g-nomdecode .nc-cluebar .btn { flex: 1 1 100%; }
body.m-phone .g-nomdecode .hand-head { font-size: 11px; }

/* ---------- Reversi / Petits chevaux (téléphone) ---------- */
body.m-phone .oth-sides { gap: 6px; width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
body.m-phone .oth-side { padding: 4px 8px 4px 4px; gap: 6px; min-width: 0; }
body.m-phone .oth-side .avatar.sm { width: 28px; height: 28px; }
body.m-phone .oth-side b { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 80px; }
body.m-phone .oth-side small { font-size: 10px; }
body.m-phone .oth-count { font-size: 16px; margin-left: auto; }
body.m-phone .oth-board { padding: 5px; gap: 1.5px; }
body.m-phone .pc-seats { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
body.m-phone .pc-seat { padding: 4px 6px 4px 4px; gap: 6px; min-width: 0; }
body.m-phone .pc-seat .avatar.sm { width: 26px; height: 26px; }
body.m-phone .pc-seat b { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.m-phone .pc-seat small { font-size: 10px; }
body.m-phone .g-petitschevaux .hand-head > span:last-child { display: inline; font-size: 11px; }
body.m-phone .g-petitschevaux .hand-head { flex-wrap: wrap; }

/* Reversi : sur téléphone, la table est recadrée pour agrandir la grille */
body.m-phone .oth-board { background-size: 136%; padding: 7.4%; }
body.m-phone .oth-wrap { gap: 6px; }
/* Petits chevaux pirates : carte pleine largeur, dé dans un bandeau */
body.m-phone .pcm-wrap { flex-direction: column; gap: 6px; }
body.m-phone .pc-side { gap: 5px; }
body.m-phone .pc-side .pc-seats { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
body.m-phone .pc-seat-boat { width: 24px; }
body.m-phone .pc-dicebox { padding: 6px 8px; gap: 10px; }
body.m-phone .pc-dicebox .pc-die { width: 52px; height: 52px; }
body.m-phone .pc-dicebox .status { font-size: 14px; } body.m-phone .pc-dicebox small { font-size: 11px; }
body.m-phone .pcm-board-wrap { container-type: inline-size; }
body.m-phone .pcm-board { width: 100%; }
body.m-phone .pcm-boat { width: 7.4%; } body.m-phone .pcm-boat.port { width: 6.6%; }
body.m-phone .g-petitschevaux .felt { overflow-y: auto; }
body.m-phone .oth-board { background-size: 136%; }
body.m-phone .oth-grid { left: 8.1%; top: 8%; right: 8.4%; bottom: 8%; }

/* Dames / Dames chinoises (téléphone) */
body.m-phone .dm-board { background-size: 150%; }
body.m-phone .dm-grid { left: 7.6%; top: 7.6%; right: 7.7%; bottom: 7.7%; }
body.m-phone .dc-board { width: 100%; }
body.m-phone .g-dameschinoises .felt { overflow-y: auto; }
body.m-phone .dc-info { padding: 5px 8px; }

body.m-phone .ch-caps .ch-cap { width: 14px; height: 14px; }
body.m-phone .ch-moves { max-height: 30px; font-size: 11px; }

/* Le Troupeau (téléphone) */
body.m-phone .sqp-row { --card-h-mid: min(8.4vh, 70px); gap: 5px; padding: 3px 5px; }
body.m-phone .sqp-row-h { min-width: 26px; } body.m-phone .sqp-row-h b { font-size: 15px; } body.m-phone .sqp-row-h small { font-size: 10px; }
body.m-phone .sqp-row-c { gap: 3px; }
body.m-phone .sqp-slot b { font-size: 10px; }
body.m-phone .sqp-rv .card.small { --card-h: 54px; }
body.m-phone .g-sixquiprend .felt { overflow-y: auto; }
/* Le Troupeau téléphone : cartes révélées sur une ligne, main sur 2 rangées sans chevauchement */
body.m-phone .sqp-reveal { flex-wrap: nowrap; gap: 3px; overflow-x: auto; max-width: 100%; }
body.m-phone .sqp-rv span { font-size: 0; } body.m-phone .sqp-rv span .avatar { width: 16px; height: 16px; }
body.m-phone .sqp-rv .card.small { --card-h: 46px; }
body.m-phone .g-sixquiprend .hand { flex-wrap: wrap; justify-content: center; gap: 4px; padding-top: 6px; }
body.m-phone .g-sixquiprend .hand > .card { margin-left: 0 !important; --card-h: min(13vh, 96px); --card-w: calc(var(--card-h) * .671); }
body.m-phone .g-sixquiprend .hand .card.picked { transform: translateY(-6px); }
body.m-phone .sqp-row { --card-h-mid: min(7.6vh, 62px); }
body.m-phone .sqp-rv .card.small { --card-h: 50px; --card-w: calc(50px * .671); }
body.m-phone .g-sixquiprend .opponents { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
body.m-phone .g-sixquiprend .opponents .seat { grid-template-columns: 24px minmax(0, 1fr); padding: 2px 4px 2px 2px; column-gap: 4px; }
body.m-phone .g-sixquiprend .opponents .seat .avatar.seat-av { width: 24px; height: 24px; }
body.m-phone .g-sixquiprend .opponents .seat .nm { font-size: 10.5px; }
body.m-phone .g-sixquiprend .opponents .seat .stats { font-size: 10px; }
@media (max-height: 700px) { body.m-phone .g-sixquiprend .hand > .card { --card-h: 10.5vh; } body.m-phone .sqp-row { --card-h-mid: 6.6vh; } }

/* Kems / Pouilleux (téléphone) */
body.m-phone .km-mid { grid-template-columns: 1fr 1fr; grid-template-areas: "c c" "l r"; gap: 6px; }
body.m-phone .km-mid > .km-center { grid-area: c; } body.m-phone .km-mid > .km-seat:first-child { grid-area: l; } body.m-phone .km-mid > .km-seat:last-child { grid-area: r; }
body.m-phone .km-seat { padding: 5px 6px; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 6px; }
body.m-phone .km-av { width: 34px; height: 34px; }
body.m-phone .km-seat b { font-size: 12px; } body.m-phone .km-seat small { display: none; }
body.m-phone .km-bubble { width: 34px; height: 34px; font-size: 22px; top: -10px; right: -6px; }
body.m-phone .km-contre { font-size: 11px; padding: 3px 6px; margin: 0; }
body.m-phone .km-table .card.mid { --card-h-mid: min(14vh, 100px); }
body.m-phone .km-sign { width: 38px; height: 38px; font-size: 20px; }
body.m-phone .km-signs { gap: 4px; }
body.m-phone .km-actions > span { font-size: 11px; }
body.m-phone .pl-back { margin-left: calc(var(--card-h-mid) * -.45); }
body.m-phone .pl-got .card.small { --card-h: 64px; --card-w: calc(64px * var(--card-ar)); }

/* Yam's (téléphone) */
body.m-phone .g-yams .felt { overflow-y: auto; }
body.m-phone .ym-wrap { gap: 8px; }
body.m-phone .ym-tray { padding: 10px 10px; gap: 5px; }
body.m-phone .ym-die { width: 54px; height: 54px; }
body.m-phone .ym-sheet { padding: 6px 6px 8px; }
body.m-phone .ym-sheet table { font-size: 11px; width: 100%; } body.m-phone .ym-sheet th, body.m-phone .ym-sheet td { min-width: 30px; padding: 1px 3px; height: 21px; }
body.m-phone .ym-sheet td.l, body.m-phone .ym-sheet td.k { min-width: 0; }
body.m-phone .ym-sheet td.l small { display: none; } body.m-phone .ym-sheet td.k { font-size: 10px; }
body.m-phone .ym-sheet th.ttl { font-size: 20px; }
body.m-phone .ym-h { padding: 8px 2px 2px; } body.m-phone .ym-h span { font-size: 10px; max-width: 44px; }
body.m-phone .ym-sheet td.ink, body.m-phone .ym-sheet .ink { font-size: 12px; }
body.m-phone .ym-sheet tr.gap td { height: 5px; }
body.m-phone .ym-memo { display: none; }
body.m-phone .ym-tip { font-size: 10px; }
body.m-phone .ym-play .desc { font-size: 11px; margin: 0; }

/* 4 en ligne */
body.m-phone .p4-side .p4-tok.mini { width: 24px; height: 24px; margin-left: auto; }
body.m-phone .p4-wrap { gap: 6px; }

/* Dé menteur */
body.m-phone .pd-wrap { gap: 4px; justify-content: space-between; }
body.m-phone .pd-opps { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 30px 4px; padding: 30px 2px 0; }
body.m-phone .pd-opp { min-width: 0; width: auto; padding: 3px 2px 4px; gap: 1px; border-radius: 10px; }
body.m-phone .pd-cupbox { width: 60px; height: 52px; }
body.m-phone .pd-cup { width: 36px; }
body.m-phone .pd-n { width: 17px; min-width: 17px; height: 17px; font-size: 10px; right: 2px; border-width: 1.5px; }
body.m-phone .pd-under { width: 64px; gap: 1px; } body.m-phone .pd-opp .pd-die { width: 16px; height: 16px; }
body.m-phone .pd-name .avatar { display: none; } body.m-phone .pd-name b { font-size: 10px; max-width: 62px; }
body.m-phone .pd-pips { gap: 2px; } body.m-phone .pd-pips i { width: 5px; height: 5px; }
body.m-phone .pd-bubble { top: -22px; padding: 1px 6px; font-size: 11px; } body.m-phone .pd-bubble.call { font-size: 13px; }
body.m-phone .pd-bubble .pd-die { width: 16px; height: 16px; }
body.m-phone .pd-center { min-height: 0; gap: 2px; }
body.m-phone .pd-bid.big { font-size: 24px; gap: 5px; } body.m-phone .pd-bid.big .pd-die { width: 34px; height: 34px; }
body.m-phone .pd-cur { padding: 3px 14px; border-radius: 12px; } body.m-phone .pd-cur small { font-size: 10px; } body.m-phone .pd-cur.empty b { font-size: 16px; }
body.m-phone .pd-pal { font-size: 11px; padding: 2px 8px; }
body.m-phone .pd-stamp { font-size: 36px; } body.m-phone .pd-count { font-size: 15px; } body.m-phone .pd-count b { font-size: 22px; } body.m-phone .pd-verdict { font-size: 14px; } body.m-phone .pd-line { font-size: 12px; }
body.m-phone .pd-trail { display: none; }
body.m-phone .pd-wrap > .status { font-size: 13px; margin: 0; }
body.m-phone .pd-me { width: 100%; padding: 6px 4px; gap: 6px; flex-direction: column; border-radius: 12px; }
body.m-phone .pd-mycup { min-width: 0; flex-direction: row; gap: 6px; align-items: center; }
body.m-phone .pd-cup.mine { width: 40px; margin: 0; transform: rotate(-12deg); }
body.m-phone .pd-cup.mine.up { transform: rotate(-18deg); }
body.m-phone .pd-mydice { min-height: 46px; padding: 5px 7px; gap: 4px; } body.m-phone .pd-mydice .pd-die { width: 38px; height: 38px; }
body.m-phone .pd-controls { gap: 6px; width: 100%; }
body.m-phone .pd-pick { flex-wrap: nowrap; gap: 4px; }
body.m-phone .pd-qty { gap: 2px; } body.m-phone .pd-qty .btn { padding: 4px 9px; min-width: 0; } body.m-phone .pd-qty b { font-size: 22px; min-width: 26px; }
body.m-phone .pd-faces { gap: 2px; } body.m-phone .pd-face { padding: 2px; border-radius: 8px; } body.m-phone .pd-face .pd-die { width: 30px; height: 30px; } body.m-phone .pd-face i { font-size: 8px; bottom: -3px; }
body.m-phone .pd-x { display: none; }
body.m-phone .pd-acts { gap: 6px; flex-wrap: nowrap; } body.m-phone .pd-acts .btn { padding: 8px 10px; font-size: 14px; } body.m-phone .pd-dudo, body.m-phone .pd-calza { font-size: 17px !important; }
@media (max-width: 370px) { body.m-phone .pd-pick { flex-wrap: wrap; } body.m-phone .pd-face .pd-die { width: 34px; height: 34px; } }
@media (max-height: 700px) { body.m-phone .pd-cur small { display: none; } body.m-phone .pd-cupbox { height: 44px; } body.m-phone .pd-cup { width: 30px; } body.m-phone .pd-opps { row-gap: 26px; padding-top: 24px; } body.m-phone .pd-mydice .pd-die { width: 32px; height: 32px; } }
body.m-phone .lobby-tools .play-bots { width: 100%; font-size: 16px; padding: 12px; }
body.m-phone .lgc-grid { grid-template-columns: 1fr; gap: 6px; }
body.m-phone .lgc-role .card.lgc-card { --card-h: 64px; }
body.m-phone .lgc-txt b { font-size: 14px; } body.m-phone .lgc-txt small { -webkit-line-clamp: 2; font-size: 11px; }
body.m-phone .lgc-stats span { font-size: 12px; padding: 4px 9px; }
body.m-phone .nc-word.long { font-size: 9.5px; } body.m-phone .nc-word.xlong { font-size: 8.5px; }

/* Nom de code — Chacun pour soi (téléphone) : tout tient sur l'écran, même en 7×7 */
body.m-phone .ncs-wrap { gap: 5px; }
body.m-phone .ncs-players { gap: 3px; }
body.m-phone .ncs-p { font-size: 10.5px; padding: 1px 7px 1px 1px; gap: 4px; }
body.m-phone .ncs-p .avatar { width: 18px; height: 18px; }
body.m-phone .ncs-p .ncs-n { max-width: 70px; }
body.m-phone .ncs-wrap > .status { font-size: 13px; margin: 0; }
body.m-phone .ncs-top { gap: 8px; }
body.m-phone .ncs-clue { font-size: 15px; padding: 3px 12px; }
body.m-phone .ncs-clue span { min-width: 22px; height: 22px; font-size: 13px; }
body.m-phone .ncs-timer { height: 15px; width: 34vw; }
body.m-phone .ncs-timer b { line-height: 15px; font-size: 10px; }
body.m-phone .ncs-grid { gap: 3px; }
body.m-phone .ncs-grid .nc-word { min-height: calc(46vh / var(--side, 5)); font-size: calc(14px - var(--side, 5) * 0.75px); padding: 1px; border-radius: 6px; }
body.m-phone .ncs-tag { width: 14px; height: 14px; right: 1px; bottom: 1px; box-shadow: 0 0 0 1px #fff; }
body.m-phone .ncs-grid .nc-word.hint.bomb::before { font-size: 10px; top: 1px; left: 2px; }
body.m-phone .ncs-info { font-size: 11px; gap: 10px; }
body.m-phone .ncs-reveal { gap: 3px 6px; }
body.m-phone .ncs-chain { font-size: 11px; }

/* Tablette tenue verticalement : même interface, agrandie par le navigateur (voir index.html) ;
   l'écran est moins allongé qu'un téléphone, on profite de la place pour des cartes plus grandes. */
html.tab-portrait body.m-phone { --card-h: min(22vh, 176px); --card-h-mid: min(16vh, 132px); }
html.tab-portrait body.m-phone .home, html.tab-portrait body.m-phone .lobby { max-width: 620px; margin-left: auto; margin-right: auto; }