/* ================= Mode mobile (ui/mobile.js, input/tactile.js) ================= */
html.mob { --sa-t: env(safe-area-inset-top, 0px); --sa-r: env(safe-area-inset-right, 0px); --sa-b: env(safe-area-inset-bottom, 0px); --sa-l: env(safe-area-inset-left, 0px);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
html.mob:not(.vt-on), html.mob:not(.vt-on) body { overscroll-behavior: none; }
html.mob #o { touch-action: none; cursor: default; }
html.mob :is(button, a, summary, .mi, .opt, .qd-c, .inv-cell, [data-i]) { touch-action: manipulation; -webkit-touch-callout: none; }

/* ---------- la couche des contrôles ---------- */
#tc { position: fixed; inset: 0; pointer-events: none; z-index: 6; display: none; }
html.tc-on #tc { display: block; }
#tc-joy { position: fixed; left: 0; bottom: 0; width: 44vw; height: 74vh; pointer-events: auto; touch-action: none; }
#tc-joy .tc-base, #tc-joy .tc-pouce { position: fixed; display: block; pointer-events: none; }
#tc-joy .tc-base { opacity: 0; background: rgba(20, 16, 24, .32); box-shadow: inset 0 0 0 3px rgba(255, 243, 214, .55), 0 0 0 3px rgba(20, 16, 24, .5);
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
#tc-joy .tc-pouce { opacity: 0; background: rgba(255, 243, 214, .72); box-shadow: inset 0 -4px 0 rgba(20, 16, 24, .35), inset 0 0 0 3px #141018;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
#tc-joy.on .tc-base, #tc-joy.on .tc-pouce { opacity: 1; }
#tc-joy.court .tc-pouce { background: rgba(255, 214, 10, .9); }
/* repère discret : où poser le pouce */
#tc-joy::after { content: ''; position: absolute; left: calc(var(--sa-l) + 9vh + 28px); bottom: calc(var(--sa-b) + 9vh + 28px); width: 18vh; height: 18vh; transform: translate(-50%, 50%);
  box-shadow: inset 0 0 0 2px rgba(255, 243, 214, .28); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); pointer-events: none; }
#tc-joy.on::after { display: none; }

/* boutons : gros, semi-transparents, pixel (coins coupés, pas d'arrondi) */
.tc-b { position: fixed; pointer-events: auto; touch-action: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  margin: 0; padding: 0; border: 0; color: #fff3d6; background: rgba(34, 29, 44, .58); user-select: none; -webkit-user-select: none;
  box-shadow: inset 0 0 0 3px rgba(20, 16, 24, .85), inset 0 5px 0 rgba(74, 63, 99, .7), inset 0 -4px 0 rgba(10, 8, 14, .6);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px); }
.tc-b canvas { image-rendering: pixelated; display: block; max-width: 56%; height: auto; pointer-events: none; }
.tc-b span { font: 9px/1 'Silk', monospace; letter-spacing: 0; text-transform: uppercase; color: #fff3d6; text-shadow: 1px 1px 0 #141018; white-space: nowrap; pointer-events: none; max-width: 96%; overflow: hidden; }
.tc-b.gros { background: rgba(196, 58, 50, .62); }
.tc-b.gros span { font-size: 10px; }
.tc-b.on { background: rgba(255, 214, 10, .78); transform: translateY(2px); }
.tc-b.on span { color: #141018; text-shadow: none; }
.tc-b[data-id="e"] { background: rgba(255, 214, 10, .42); }
.tc-b[data-id="lbd"].arme { background: rgba(255, 90, 78, .7); }
.tc-b[hidden] { display: none; }
/* accès rapides, en haut au centre */
#tc-top { position: fixed; top: calc(var(--sa-t) + 4px); left: 50%; transform: translateX(-50%); display: flex; gap: 4px; pointer-events: none; }
#tc-top .tc-b { position: relative; width: 44px; height: 44px; background: rgba(34, 29, 44, .55); }
#tc-top .tc-b span { display: none; }
#tc-top .tc-b canvas { max-width: 62%; }
#tc-top .tc-b.alerte { background: rgba(255, 90, 78, .8); animation: blink .6s steps(2) infinite; }
/* ordres du CRS */
#tc-ordres { position: fixed; display: none; flex-direction: column; gap: 4px; pointer-events: auto; }
#tc.ordres-on #tc-ordres { display: flex; }
.tc-ordre { min-width: 132px; min-height: 44px; padding: 0 12px; border: 0; font: 12px/1 'Silk', monospace; color: #fff3d6; background: rgba(34, 29, 44, .92); text-align: left;
  box-shadow: inset 0 0 0 3px #141018, inset 0 4px 0 #4a3f63; touch-action: manipulation; }
.tc-ordre:active { background: #ffd60a; color: #141018; }
/* appui long : un anneau qui se remplit sous le doigt */
#tc-long { position: fixed; width: 54px; height: 54px; margin: -27px 0 0 -27px; pointer-events: none; opacity: 0; box-shadow: inset 0 0 0 3px #ffd60a; transform: scale(1.4);
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
#tc-long.on { opacity: .85; transform: scale(.7); transition: transform .34s linear, opacity .1s; }
#tc-long.fait { opacity: 1; transform: scale(.7); box-shadow: inset 0 0 0 27px rgba(255, 214, 10, .45); transition: opacity .3s; }
/* contextes : dialogue, sac, écran superposé → les panneaux ont le doigt ; téléphone sorti → plus de boutons d'action */
#tc.bloque :is(#tc-joy, #tc-bts, #tc-ordres) { display: none !important; }
#tc.tel :is(#tc-bts, #tc-ordres) { display: none !important; }
body.ecran-on #tc, body:has(#qdlg.show) #tc-top, body:has(#custody.show) #tc { display: none !important; }

/* ---------- le HUD du bureau qui n'a pas de sens au doigt ---------- */
html.mob :is(#keyhint, #phone-icon, #ep-main, #pad-ind) { display: none !important; }
html.mob #ep-obj { left: calc(var(--sa-l) + var(--u) * 3); max-width: min(calc(var(--u) * 125), 36vw); }
html.mob #ep-want { right: calc(var(--sa-r) + var(--u) * 4); }
html.mob #ep-clock { right: calc(var(--sa-r) + var(--u) * 5); }
html.mob #ep-sante { left: calc(var(--sa-l) + var(--u) * 4); bottom: calc(var(--sa-b) + var(--u) * 3); }
/* l'aide H (gestes) : au milieu, lisible, se ferme au doigt */
html.mob #keys { left: 50% !important; top: calc(var(--sa-t) + 54px) !important; transform: translateX(-50%); max-width: min(92vw, 640px); max-height: calc(100vh - 70px - var(--sa-t)); overflow-y: auto;
  touch-action: pan-y; font-size: 13px; line-height: 1.35; z-index: 7; }
html.mob #keys .mob-g { display: inline-block; min-width: 108px; color: #ffd60a; font: 10px/1.6 'Silk', monospace; }
/* encart des actions de la cible : lignes de 44 px au doigt */
html.mob body.ep-on #menu { font-size: 15px; max-width: min(300px, 56vw); padding: 4px 8px; }
html.mob body.ep-on #menu .opt { min-height: 40px; display: flex; align-items: center; gap: 6px; padding: 2px 0; }
html.mob #menu .opt kbd { display: none; }

/* ---------- interfaces au doigt : cibles de 44 px, défilement tactile ---------- */
html.mob :is(.mi, #menu-list button, .sc-panel button, .px button:not(.tc-b):not(.tc-ordre), #prep button, .qd-c, .cu-choices button, #sc-bilan button) { min-height: 44px; }
html.mob :is(.sc-panel, #ep-situation, #prep, #opt-box, #slots-box, #sc-bilan .px, #qjournal, .crs-brief, .crs-rapport, #sc-credits .px, #lobby, .lb-box, #inv) { overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; }
html.mob .qd-c { display: flex; align-items: center; padding-top: 6px; padding-bottom: 6px; }
html.mob .inv-cell { min-width: 44px; min-height: 44px; }
html.mob input, html.mob textarea { font-size: 16px; } /* pas de zoom automatique d'iOS à la saisie */
/* le téléphone du jeu : grand, à droite (le pouce gauche garde le joystick) */
html.mob #phone { --u: var(--u-phone-mob, 2.4px) !important; bottom: calc(var(--sa-b) + 6px) !important; right: calc(var(--sa-r) + 10px) !important; }
html.mob #phone :is([data-i], .ph-home, .ph-head, .ph-status) { touch-action: manipulation; }

/* ---------- tourne ton téléphone ---------- */
#mob-tourne { display: none; position: fixed; inset: 0; z-index: 9999; background: #0d0b10; color: #fff3d6; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 24px; }
html.mob-tourne #mob-tourne { display: flex; }
#mob-tourne canvas { image-rendering: pixelated; width: 120px; height: 120px; animation: mob-tourne 2.4s steps(1) infinite; }
#mob-tourne b { font: 18px/1.2 'Silk', monospace; color: #ffd60a; }
#mob-tourne span { font: 17px/1.35 'Pixelify', monospace; max-width: 30ch; color: #d9ccb0; }
@keyframes mob-tourne { 0%, 45% { transform: rotate(0); } 50%, 95% { transform: rotate(-90deg); } }
/* iPhone : ajouter à l'écran d'accueil */
#mob-ios { left: 50%; top: calc(var(--sa-t, 0px) + 56px); transform: translateX(-50%); z-index: 9000; display: flex; align-items: center; gap: 10px; max-width: min(92vw, 560px); font-size: 15px; }
#mob-ios b { color: #ffd60a; font-size: 12px; white-space: nowrap; }
#mob-ios button { min-width: 44px; min-height: 44px; border: 0; font: 13px 'Silk', monospace; background: #ffd60a; color: #141018; }
#mob-ios .mob-partage { display: inline-block; width: 12px; height: 14px; margin: 0 2px; vertical-align: -2px; box-shadow: inset 0 0 0 2px #6ab8ff; clip-path: polygon(0 35%, 35% 35%, 35% 100%, 65% 100%, 65% 35%, 100% 35%, 100% 100%, 0 100%); }
/* accueil au doigt : la bande-annonce en direct (lourde) n'est pas proposée ; le lecteur vidéo, si */
.vt-tactile .vt-direct { display: none; }
/* aides au clavier des écrans (« ↑↓ choisir · ENTRÉE valider ») : sans objet au doigt */
html.mob .hints { display: none !important; }
/* « Nouvelle partie » : les encarts en une rangée qui défile au doigt, le détail toujours visible */
html.mob #camp-cards { justify-content: flex-start; gap: 8px; padding: calc(var(--sa-t) + 8px) calc(var(--sa-r) + 10px) calc(var(--sa-b) + 8px) calc(var(--sa-l) + 10px); overflow-y: auto; touch-action: pan-y; }
html.mob #camp-cards h2 { font-size: 18px; margin: 4px 0 0; }
html.mob .camp-row { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; max-width: 100%; width: 100%; padding: 8px 4px 6px; touch-action: pan-x pan-y; scroll-snap-type: x proximity; flex-shrink: 0; }
html.mob .ccard { flex: 0 0 auto; width: 150px; scroll-snap-align: center; }
html.mob .ccard canvas { width: 100%; height: auto; }
html.mob .ccard .pitch { font-size: 13px; min-height: 0; }
html.mob .ccard b { font-size: 11px; min-height: 0; }
html.mob #camp-detail { width: 100%; gap: 6px 14px; padding: 8px 12px; font-size: 14px; flex-shrink: 0; }
html.mob #camp-detail .acc { font-size: 14px; }
html.mob .camp-back { min-height: 44px; top: calc(var(--sa-t) + 6px); left: calc(var(--sa-l) + 6px); z-index: 2; }
/* écrans de la coquille : un panneau plus haut que l'écran défile au doigt au lieu d'être coupé */
html.mob #scenes .sc.show { overflow-y: auto; touch-action: pan-y; }
html.mob #scenes :is([id$="-box"], #prep, .px.panel) { max-height: calc(100dvh - var(--sa-t) - var(--sa-b) - 8px); overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; }
html.mob :is(#prep, #custody .px, .crs-brief, #crs-brief, #crs-rapport, #fin-box, #recit-box, #netwait-box) { max-height: calc(100dvh - 8px); overflow-y: auto; touch-action: pan-y; }
/* menu principal au téléphone : titre plus petit, liste en bas à gauche qui défile si besoin */
html.mob #sc-menu .foot { display: none; }
html.mob #sc-menu .title { left: calc(var(--sa-l) + 14px); top: calc(var(--sa-t) + 8px); }
html.mob #sc-menu .title canvas { width: min(320px, 38vw); height: auto; }
html.mob #sc-menu .tagline { font-size: 10px; margin-left: 4px; }
html.mob #menu-list { top: auto; bottom: calc(var(--sa-b) + 8px); left: calc(var(--sa-l) + 14px); width: min(330px, 46vw); max-height: calc(100dvh - 32vh - 16px); overflow-y: auto; touch-action: pan-y; padding: 8px; }
html.mob #menu-list .mi { margin: 4px 0; }
/* dialogues : les touches (« ENTRÉE continuer », « 1 ») n'ont pas de sens au doigt : on touche la ligne */
html.mob #qdlg kbd { display: none; }
html.mob #qdlg .qd-c { font-size: 15px; }
/* téléphone du jeu : listes et fils défilent au doigt ; l'aide clavier du bas disparaît */
html.mob #phone :is(.ph-list, .ph-thread, .ph-opts, .ph-post.big) { touch-action: pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
html.mob #phone .ph-hint { display: none; }
html.mob #phone .ph-row, html.mob #phone .ph-opts > * { min-height: calc(var(--u) * 11); }
/* client du multijoueur : son téléphone simplifié, grand, à droite ; la pastille des messages sous l'icône du téléphone */
html.mob #net-phone { right: calc(var(--sa-r) + 10px); bottom: calc(var(--sa-b) + 6px); top: 54px; width: min(340px, 46vw); max-height: none; touch-action: pan-y; font-size: 15px; }
html.mob #net-phone :is(button, [data-k], .np-row) { min-height: 40px; }
html.mob #net-phone-badge { right: auto; left: 50%; bottom: auto; top: calc(var(--sa-t) + 50px); transform: translateX(-50%); }