/*
 * Version téléphone (chargée après style.css). Les classes de <html> viennent de mobile.js :
 *   m-touch (écran tactile), m-phone (petit écran), m-portrait / m-landscape (orientation).
 * Principe : la salle d'abord. En-tête sur une ligne, commandes regroupées dans les coins, rien de collé au doigt.
 */

/* ---------- Tactile (téléphone ou tablette) ---------- */
html.m-touch { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
html.m-touch button, html.m-touch summary, html.m-touch .hb-slot { touch-action: manipulation; }
/* en dessous de 16 px, iOS zoome la page en touchant un champ */
html.m-touch input, html.m-touch select, html.m-touch textarea { font-size: 16px; }
/* les raccourcis clavier n'ont pas de sens au doigt */
html.m-touch button kbd, html.m-touch .prompt kbd, html.m-touch .hotbar-hint, html.m-touch .controls-hint { display: none; }

/* bouton menu des commandes de la salle (créé par mobile.js) : seulement au doigt ou sur petit écran */
.hud-menu { display: none; }
html.m-touch .hud-menu, html.m-phone .hud-menu { display: grid; place-items: center; }
.hud-menu svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.hall-hud:has(#missions-left:not([hidden]), #stats-free:not([hidden])) .hud-menu::after {
  content: ''; position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: #e74c3c;
}
html.m-touch .hall-hud, html.m-phone .hall-hud {
  top: auto; transform: none; right: calc(10px + env(safe-area-inset-right)); bottom: 74px;
  flex-direction: column-reverse; align-items: flex-end; gap: 6px;
}
html.m-touch .hall-hud > .hud-btn:not(.hud-menu):not(.fire-btn),
html.m-phone .hall-hud > .hud-btn:not(.hud-menu):not(.fire-btn) { display: none; }
html.m-touch .hall-hud.open > .hud-btn:not(.hud-menu):not(.fire-btn),
html.m-phone .hall-hud.open > .hud-btn:not(.hud-menu):not(.fire-btn) {
  display: block; min-width: 150px; padding: 11px 16px; text-align: left; font-size: 0.95rem; animation: m-pop 0.15s ease-out;
}
html.m-touch .hud-menu, html.m-phone .hud-menu { position: relative; width: 50px; height: 50px; padding: 0; border-radius: 50%; }
html.m-touch .hall-hud.open .hud-menu { background: rgba(232, 193, 90, 0.3); }
html.m-touch .fire-btn, html.m-phone .fire-btn {
  width: 64px; height: 64px; padding: 0; border-radius: 50%; font-size: 0.85rem;
  background: radial-gradient(circle, #d9452b, #8e1d0e); border-color: #ff9a8a;
}
@keyframes m-pop { from { opacity: 0; transform: translateY(6px); } }

/* ---------- Téléphone : en-tête sur une ligne ---------- */
html.m-phone .topbar {
  flex-wrap: nowrap; gap: 8px; padding: 6px calc(10px + env(safe-area-inset-right)) 6px calc(10px + env(safe-area-inset-left));
  padding-top: calc(6px + env(safe-area-inset-top));
}
html.m-phone .topbar h1 { font-size: 1.05rem; white-space: nowrap; flex: none; }
html.m-phone .topbar .name-field, html.m-phone .topbar .toggles, html.m-phone .conn.on { display: none; }
html.m-phone .stats { gap: 10px; margin-left: auto; }
html.m-phone .stat .label { font-size: 0.6rem; }
html.m-phone .stat .value { font-size: 1rem; }
html.m-phone .stat:nth-child(3) { display: none; } /* dernier gain */
html.m-phone .bank-btn { padding: 7px 12px; font-size: 0.9rem; flex: none; }
html.m-phone .top-tools { flex: none; }
html.m-phone .conn.off { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); z-index: 20; margin-top: 4px; font-size: 0.75rem; }
/* nom du joueur : déplacé dans les réglages (Mon compte) */
.set-name { display: flex; flex-direction: column; gap: 4px; }
.set-name input { width: 100%; }

/* bandeau des derniers drops : pas de place sur un téléphone */
html.m-phone .live-drops { display: none; }
html.m-phone .stage.with-drops .salon.floating, html.m-phone .stage.with-drops.seated.docked-side .salon.floating { left: calc(10px + env(safe-area-inset-left)); }

/* ---------- Téléphone : la salle ---------- */
/* en haut à gauche « Aller à » et le salon ; en haut à droite la mini-carte ; en bas joystick, action, barre, menu */
html.m-phone .quick-travel { top: 8px; left: calc(10px + env(safe-area-inset-left)); right: auto; max-width: 50%; overflow: visible; }
html.m-phone .quick-travel summary, html.m-phone .quick-travel button { padding: 7px 12px; font-size: 0.85rem; }
html.m-phone .salon.floating { top: 52px; bottom: auto; left: calc(10px + env(safe-area-inset-left)); width: min(300px, calc(100% - 170px)); }
html.m-phone .salon.floating.collapsed { width: auto; }
html.m-phone .salon.floating .feed { height: auto; max-height: 26vh; }
/* salon en haut de l'écran : les suggestions de mention s'ouvrent sous le champ */
html.m-phone .chat-suggest { bottom: auto; top: calc(100% + 4px); max-height: 40vh; }
html.m-touch .chat-suggest-item { min-height: 44px; }
html.m-phone .stage.seated .salon.floating { top: 8px; right: calc(10px + env(safe-area-inset-right)); left: auto; width: auto; max-width: calc(100% - 20px); }
html.m-phone .stage.seated .salon.floating:not(.collapsed) { width: min(320px, calc(100% - 20px)); }
html.m-phone .minimap { top: 8px; right: calc(10px + env(safe-area-inset-right)); width: 120px; height: 66px; }
html.m-phone .minimap-zoom { top: 80px; right: calc(10px + env(safe-area-inset-right)); }
html.m-phone .minimap-zoom button { width: 40px; height: 34px; }
html.m-phone .joystick { left: calc(14px + env(safe-area-inset-left)); bottom: 74px; width: 112px; height: 112px; }
/* action (prendre place, parler…) : au-dessus de la barre, entre le joystick et le menu */
html.m-phone .prompt {
  left: 136px; right: 72px; bottom: 74px; transform: none; width: auto; margin: 0 auto; max-width: max-content;
  padding: 12px 16px; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: m-pop 0.2s ease-out;
}
/* barre d'armes : tout en bas, défilante si besoin */
html.m-phone .hotbar { bottom: calc(6px + env(safe-area-inset-bottom)); max-width: calc(100% - 12px); }
html.m-phone .hotbar-row { gap: 4px; }
html.m-phone .hotbar-slots { padding: 4px; gap: 3px; }
html.m-phone .hb-slot { width: 44px; height: 44px; }
html.m-phone .hb-slot img { width: 40px; height: 30px; }
html.m-phone .hb-inv { padding: 0 10px; height: 54px; font-size: 0.8rem; }
html.m-phone .fx-toasts { top: 8px; max-width: calc(100vw - 150px); }

/* ---------- Téléphone : la fenêtre de jeu ---------- */
html.m-phone .panel-head { padding: 6px 10px; gap: 6px; }
html.m-phone .panel-head .game-title { font-size: 0.85rem; }
html.m-phone .panel-head button { padding: 7px 10px; font-size: 0.85rem; }
html.m-phone .game-view { padding: 10px 10px calc(14px + env(safe-area-inset-bottom)); }

/* ---------- Téléphone : fenêtres (réglages, boutique, inventaire…) ---------- */
html.m-phone dialog.bank { max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; }
html.m-phone .bank-inner { padding: 16px; }
html.m-touch .gf-swatch { width: 36px; height: 36px; }
html.m-touch .gf-chip { min-height: 36px; padding: 6px 12px; }
html.m-phone .set-row select { min-width: 0; width: 100%; }
html.m-phone .set-row:has(select) { flex-wrap: wrap; }
html.m-phone .help-cols { grid-template-columns: 1fr; gap: 4px; }

/* ---------- Écran d'accueil ---------- */
html.m-phone .splash { overflow-y: auto; align-items: safe center; }
html.m-phone .splash-title { font-size: clamp(2rem, 11vw, 3.4rem); }
html.m-phone .splash-help { display: none; }

/* ---------- Paysage : la hauteur est rare ---------- */
html.m-landscape .topbar { padding-top: 4px; padding-bottom: 4px; }
html.m-landscape .topbar h1 { font-size: 0.95rem; }
html.m-landscape .stat .label { display: none; }
html.m-landscape .bank-btn { padding: 5px 12px; }
html.m-landscape .top-tools .toggle { padding: 5px; }
html.m-landscape .hall-hud { bottom: 62px; }
html.m-landscape .joystick { bottom: 14px; width: 100px; height: 100px; }
html.m-landscape .prompt { bottom: 62px; left: 130px; }
html.m-landscape .hotbar { left: auto; right: calc(10px + env(safe-area-inset-right)); transform: none; max-width: calc(100% - 140px); }
html.m-landscape .hb-slot { width: 40px; height: 40px; }
html.m-landscape .hb-inv { height: 48px; }
html.m-landscape .salon.floating .feed { max-height: 34vh; }
html.m-landscape .minimap { width: 110px; height: 60px; }
html.m-landscape .minimap-zoom { top: 74px; }
/* assis : la table de jeu prend la plus grande part, la salle reste visible à gauche */
html.m-landscape .panel.dock-side { min-width: 0; width: 64% !important; }
html.m-landscape .splash-sub { display: none; }
html.m-landscape .splash-card { gap: 10px; }

/* ---------- Portrait : fenêtre de jeu en bas, plus haute ---------- */
html.m-portrait .panel.dock-bottom { border-radius: 16px 16px 0 0; }
html.m-portrait .panel .dock-switch [data-dock="side"] { display: none; }

/* menu « Aller à » : s'ouvre vers la droite, sur toute la largeur */
html.m-phone .qt-groups {
  left: 0; right: auto; width: calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right)); max-height: 62dvh;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}
html.m-phone .qt-group button { padding: 9px 10px; font-size: 0.9rem; }
html.m-phone .qt-menu > summary { padding: 8px 14px; }

/* ---------- Téléphone : roulette (roue plus petite, jetons et boutons sur une ligne) ---------- */
html.m-phone .panel .wheel-wrap { width: min(250px, 66cqw); }
html.m-phone .panel .controls { margin: 12px -6px 8px; padding: 6px; gap: 6px; flex-wrap: nowrap; flex-direction: column; align-items: stretch; }
html.m-phone .panel .chips, html.m-phone .panel .controls .buttons {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; padding: 6px 2px 2px; justify-content: flex-start;
}
html.m-phone .panel .chips::-webkit-scrollbar, html.m-phone .panel .controls .buttons::-webkit-scrollbar { display: none; }
html.m-phone .panel .chip-btn { flex: none; width: 42px; height: 42px; font-size: 0.72rem; border-width: 3px; }
html.m-phone .panel .controls .buttons { display: flex; }
html.m-phone .panel .controls .buttons button { flex: 1 0 auto; padding: 8px 10px; font-size: 0.85rem; }
html.m-landscape .panel .wheel-wrap { width: min(190px, 38cqw); }
html.m-landscape .panel .wheel-zone { flex-wrap: nowrap; }

/* ---------- Paysage : en-tête réduit au solde ; salon discret quand on est assis ---------- */
html.m-landscape .stat:nth-child(2) { display: none; }
html.m-landscape .stage.seated .salon.floating { left: calc(10px + env(safe-area-inset-left)); right: auto; top: 8px; max-width: 34%; }
html.m-landscape .stage.seated .salon.floating:not(.collapsed) { width: 34%; }

/* menu ☰ : boutons de même largeur ; en paysage, plus serrés pour tenir en hauteur */
html.m-touch .hall-hud.open > .hud-btn:not(.hud-menu):not(.fire-btn),
html.m-phone .hall-hud.open > .hud-btn:not(.hud-menu):not(.fire-btn) { width: 200px; }
html.m-landscape .hall-hud.open > .hud-btn:not(.hud-menu):not(.fire-btn) { padding: 7px 14px; font-size: 0.85rem; width: 180px; }
html.m-landscape .hall-hud { gap: 4px; }

/* roulette en portrait : petite roue à côté des informations, pour voir le tapis de mise sans défiler */
html.m-portrait .panel .wheel-zone { flex-wrap: nowrap; gap: 10px; }
html.m-portrait .panel .wheel-wrap { width: min(160px, 42cqw); }
html.m-portrait .panel .side { flex-basis: auto; min-width: 0; }

/* ---------- Tablette (tactile, grand écran) : le salon au-dessus du joystick ---------- */
html.m-touch:not(.m-phone) .stage:not(.seated) .salon.floating { bottom: 230px; }

/* ---------- Téléphone : craps (tapis compact, jetons toujours à portée) ---------- */
html.m-phone .craps-head { gap: 8px; margin-bottom: 8px; flex-wrap: nowrap; }
html.m-phone .craps-puck { min-width: 48px; height: 32px; font-size: 0.8rem; }
html.m-phone .craps-phase { font-size: 0.9rem; min-width: 0; }
html.m-phone .craps-dice { gap: 6px; }
html.m-phone .die { width: 38px; height: 38px; padding: 5px; gap: 2px; border-radius: 8px; }
html.m-phone .craps-felt { gap: 4px; padding: 8px; border-radius: 14px; border-width: 2px; }
html.m-phone .craps-zone { min-height: 52px; padding: 4px 2px; border-radius: 8px; }
html.m-phone .craps-zone b { font-size: 0.82rem; line-height: 1.1; }
html.m-phone .craps-zone small { font-size: 0.62rem; }
html.m-phone .craps-zone.field, html.m-phone .craps-zone.dont, html.m-phone .craps-zone.pass { min-height: 42px; }
html.m-phone .craps-zone.field small { font-size: 0.6rem; }
html.m-phone .cz-others { font-size: 0.55rem; right: 3px; top: 2px; }
html.m-phone .craps-view .controls.bj-controls {
  position: sticky; bottom: 0; z-index: 6; margin: 8px -6px; padding: 6px; flex-direction: row; flex-wrap: nowrap; align-items: center;
}
html.m-phone .craps-view .controls .chips { flex: 1; min-width: 0; }
html.m-phone .craps-view .controls .buttons { flex: none; padding: 0; }
html.m-phone .craps-view .controls .buttons button { padding: 8px; font-size: 0.75rem; white-space: normal; max-width: 90px; line-height: 1.1; }
html.m-phone .craps-view .message { margin: 6px 0 0; font-size: 0.85rem; }
html.m-landscape .craps-zone { min-height: 44px; }
html.m-landscape .craps-zone.field, html.m-landscape .craps-zone.dont, html.m-landscape .craps-zone.pass { min-height: 36px; }

/* ---------- Téléphone : échecs (l'échiquier tient dans la fenêtre) ---------- */
html.m-phone .chess-player { padding: 3px 8px; font-size: 0.85rem; }
html.m-phone .chess-game { gap: 4px; }
html.m-phone .chess-board { border-width: 4px; }
html.m-phone .chess-actions { flex-wrap: wrap; gap: 6px; }
html.m-phone .chess-lobby .buttons button { flex: 1; }
html.m-phone .chess-duel select { flex: 1 1 140px; min-width: 0; }
/* paysage : l'échiquier à gauche, à la hauteur de la fenêtre ; joueurs, message et boutons à droite */
html.m-landscape .chess-game {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; align-items: start; column-gap: 12px;
}
html.m-landscape .chess-board { grid-column: 1; grid-row: 1 / span 4; width: min(calc(100dvh - 110px), 58cqw); }
html.m-landscape .chess-game > :not(.chess-board) { grid-column: 2; margin: 0; max-width: none; }
html.m-landscape #chess-top { grid-row: 1; }
html.m-landscape #chess-bottom { grid-row: 2; }
html.m-landscape #chess-message { grid-row: 3; font-size: 0.85rem; text-align: left; }
html.m-landscape .chess-actions { grid-row: 4; justify-content: flex-start; }
html.m-portrait .craps-felt { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html.m-portrait .craps-zone { min-height: 48px; }