/* Africa Uber V30 — interface.
   Sortie du HTML pour permettre une CSP sans 'unsafe-inline'.
   Identité : nuit d'Abidjan, or lagunaire, vert kent. Rien n'est repris d'une autre œuvre. */

:root {
  --bg: #0d0f12;
  --panel: rgba(12, 14, 17, 0.92);
  --stroke: rgba(255, 255, 255, 0.14);
  --text: #f2f4f7;
  --muted: rgba(242, 244, 247, 0.62);
  --gold: #e0a93f;
  --gold-soft: rgba(224, 169, 63, 0.16);
  --green: #3f9c6a;
  --danger: #e2574c;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

#game { position: fixed; inset: 0; }
#game canvas { display: block; touch-action: none; }

/* --- Écran de démarrage ------------------------------------------------------------- */
#boot {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: radial-gradient(120% 120% at 50% 0%, #1a2129 0%, #0d0f12 60%);
  transition: opacity .45s ease;
}
#boot.done { opacity: 0; pointer-events: none; }

/* Écran d'accueil à grandes tuiles (M6). Au-dessus du monde (qui continue de vivre derrière), sous l'écran de chargement. */
#accueil { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; justify-content: center; gap: 18px;
  padding: calc(16px + var(--safe-t)) calc(20px + var(--safe-r)) calc(16px + var(--safe-b, 0px)) calc(20px + var(--safe-l));
  background: linear-gradient(180deg, rgba(10, 12, 15, .82) 0%, rgba(10, 12, 15, .94) 100%); backdrop-filter: blur(6px); }
#accueil[hidden] { display: none; }
.accueil-entete { display: flex; align-items: center; gap: 14px; }
.accueil-logo { width: 54px; height: 54px; border-radius: 16px; background: var(--gold); color: #10130f; font-weight: 800; font-size: 22px; display: grid; place-items: center; }
.accueil-titre { font-size: 28px; font-weight: 800; letter-spacing: .5px; }
.accueil-sous { color: var(--muted); font-size: 14px; }
.accueil-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; max-width: 980px; }
.tuile { appearance: none; border: 1px solid var(--stroke); background: rgba(255, 255, 255, .06); color: #fff; border-radius: 18px;
  min-height: 104px; padding: 12px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 2px;
  font: inherit; text-align: left; cursor: pointer; transition: transform .12s ease, background .12s ease; }
.tuile:hover, .tuile:focus-visible { background: rgba(255, 255, 255, .12); transform: translateY(-2px); outline: 2px solid var(--gold); }
.tuile:active { transform: scale(.98); }
.tuile-principale { background: var(--gold); color: #10130f; border-color: transparent; grid-column: span 2; }
.tuile-principale .tuile-aide { color: rgba(16, 19, 15, .7); }
.tuile-ico { font-size: 28px; line-height: 1; margin-bottom: auto; }
.tuile-lib { font-size: 18px; font-weight: 700; }
.tuile-aide { font-size: 12px; color: var(--muted); }
.accueil-pied { color: var(--muted); font-size: 12px; }
@media (max-height: 460px) { #accueil { gap: 10px; } .accueil-titre { font-size: 20px; } .accueil-logo { width: 40px; height: 40px; font-size: 17px; }
  .accueil-tuiles { grid-template-columns: repeat(6, 1fr); gap: 8px; } .tuile { min-height: 78px; padding: 8px 10px; border-radius: 14px; } .tuile-ico { font-size: 20px; } .tuile-lib { font-size: 14px; } .tuile-aide { display: none; } .tuile-principale { grid-column: span 1; } }
.boot-card { text-align: center; padding: 24px; }
.boot-logo {
  width: 84px; height: 84px; margin: 0 auto 16px;
  border-radius: 24px; background: var(--gold); color: #10130f;
  display: grid; place-items: center;
  font-size: 30px; font-weight: 800; letter-spacing: 1px;
  box-shadow: 0 0 44px rgba(224, 169, 63, .35);
}
.boot-title { font-size: 22px; font-weight: 700; letter-spacing: .4px; }
.boot-sub { color: var(--muted); font-size: 13px; margin-top: 6px; min-height: 18px; }
.boot-bar { width: min(260px, 70vw); height: 4px; margin: 18px auto 0; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.boot-bar i { display: block; height: 100%; width: 0%; background: var(--gold); transition: width .25s ease; }

/* --- HUD ----------------------------------------------------------------------------- */
/* Mini-carte (cahier maître § 6 : en haut à gauche) : rues réelles OSM autour du joueur, cap, objectif de mission. */
#miniMap { position: fixed; z-index: 5; left: calc(10px + var(--safe-l)); top: calc(10px + var(--safe-t)); width: 132px; height: 132px;
  border-radius: 14px; border: 1px solid var(--stroke); background: rgba(13, 15, 18, .78); pointer-events: none; }
#miniMap[hidden] { display: none; }
#hud {
  position: fixed; z-index: 5;
  top: calc(10px + var(--safe-t)); left: calc(152px + var(--safe-l)); right: calc(10px + var(--safe-r));
  display: flex; gap: 8px; flex-wrap: wrap; pointer-events: none;
}
.card {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 7px 11px;
  font-size: 13px;
  display: flex; align-items: center; gap: 6px;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}
.card b { font-variant-numeric: tabular-nums; }
.card .ico { opacity: .9; }
.card .lbl, .card .unit { color: var(--muted); font-size: 11px; }
#serverCard b { color: var(--muted); }
#serverCard.online b { color: var(--green); }
#serverCard.error b { color: var(--danger); }

/* --- Menu ---------------------------------------------------------------------------- */
#menu {
  position: fixed; z-index: 6;
  left: calc(10px + var(--safe-l)); bottom: calc(10px + var(--safe-b));
  display: flex; gap: 7px; flex-wrap: wrap; max-width: min(640px, calc(100vw - 20px));
}
button {
  border: 1px solid var(--stroke);
  border-radius: 11px;
  padding: 9px 13px;
  background: rgba(255, 255, 255, .92);
  color: #14161a;
  font-weight: 650;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: transform .08s ease, filter .15s ease;
}
button:hover { filter: brightness(1.06); }
button:active { transform: translateY(1px) scale(.985); }
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
button[aria-busy="true"] { opacity: .6; cursor: progress; }
button[aria-busy="true"]::after { content: " …"; }
button.primary { background: var(--gold); color: #15180f; }
button.ghost { background: transparent; color: var(--text); }

/* --- Panneaux ------------------------------------------------------------------------- */
#panel, #abidjanPanel {
  position: fixed; z-index: 8;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  overflow: auto;
  overscroll-behavior: contain;
}
#panel {
  right: calc(10px + var(--safe-r)); top: calc(66px + var(--safe-t));
  width: min(380px, calc(100vw - 20px));
  max-height: min(70vh, 620px);
}
#abidjanPanel {
  left: calc(10px + var(--safe-l)); top: calc(66px + var(--safe-t));
  width: min(400px, calc(100vw - 20px));
  max-height: min(74vh, 660px);
  z-index: 20;
}
#panel[hidden], #abidjanPanel[hidden], #missionHud[hidden], #pointRouteHud[hidden], #orderHud[hidden], #driveHud[hidden], #msg[hidden], #touch[hidden], #hint[hidden] { display: none !important; }
h3 { margin: 4px 0 12px; font-size: 15px; letter-spacing: .2px; }
hr { border: 0; border-top: 1px solid var(--stroke); margin: 14px 0; }
p { margin: 8px 0; font-size: 13px; line-height: 1.45; }
.small { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.bar { height: 8px; background: rgba(255,255,255,.1); border-radius: 999px; overflow: hidden; }
.fill { height: 100%; background: var(--text); border-radius: 999px; transition: width .25s ease; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kv { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 4px 0; }
.kv span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; }

label { display: block; font-size: 12px; color: var(--muted); margin: 10px 0 4px; }
input[type=email], input[type=password] {
  width: 100%; padding: 9px 11px; font-size: 13px; font-family: inherit;
  color: var(--text); background: rgba(255,255,255,.06);
  border: 1px solid var(--stroke); border-radius: 10px;
}
input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
select {
  width: 100%; padding: 9px 11px; font-size: 13px; font-family: inherit;
  color: var(--text); background: rgba(255,255,255,.06);
  border: 1px solid var(--stroke); border-radius: 10px;
}
.notice { border-left: 3px solid var(--gold); background: var(--gold-soft); padding: 9px 11px; border-radius: 0 10px 10px 0; font-size: 12px; }

.commune {
  padding: 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
  margin: 7px 0; background: rgba(255,255,255,.04);
}
.commune b { display: block; font-size: 13.5px; }
.tag { font-size: 11px; color: var(--muted); }
.commune .row { margin-top: 8px; }
.activity { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.density { height: 7px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; margin: 6px 0 4px; }
.density i { display: block; height: 100%; background: var(--gold); }

/* --- Mission / conduite / messages ----------------------------------------------------- */
#missionHud {
  position: fixed; z-index: 5;
  left: calc(152px + var(--safe-l)); top: calc(10px + var(--safe-t) + 64px);
  max-width: min(340px, calc(100vw - 20px));
  flex-direction: column; align-items: flex-start; gap: 7px;
}
/* POINTS-GEOGRAPHIQUES : objectif courant de la livraison au point exact (sous la mission). */
#pointRouteHud { position: fixed; z-index: 5;
  left: calc(152px + var(--safe-l)); top: calc(10px + var(--safe-t) + 150px);
  max-width: min(340px, calc(100vw - 20px));
  flex-direction: column; align-items: flex-start; gap: 7px; margin-top: 6px; font-size: 12.5px; }
#orderHud { position: fixed; z-index: 5;
  left: calc(152px + var(--safe-l)); top: calc(10px + var(--safe-t) + 200px);
  max-width: min(340px, calc(100vw - 20px));
  flex-direction: column; align-items: flex-start; gap: 7px; margin-top: 6px; font-size: 12.5px; }


#missionHud > div { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
#driveHud {
  position: fixed; z-index: 5;
  right: calc(10px + var(--safe-r)); bottom: calc(96px + var(--safe-b));
}
#msg {
  position: fixed; z-index: 9;
  left: 50%; bottom: calc(104px + var(--safe-b)); transform: translateX(-50%);
  background: var(--panel); border: 1px solid var(--stroke);
  padding: 10px 16px; border-radius: 12px; font-size: 13px;
  max-width: min(520px, calc(100vw - 24px)); text-align: center;
  box-shadow: var(--shadow); backdrop-filter: blur(10px);
}
#hint {
  position: fixed; z-index: 7; left: 50%; bottom: calc(52vh); transform: translateX(-50%);
  background: rgba(0,0,0,.6); border: 1px solid var(--stroke);
  padding: 6px 12px; border-radius: 999px; font-size: 12.5px;
}

/* --- Commandes tactiles ----------------------------------------------------------------- */
#touch { position: fixed; inset: 0; z-index: 7; pointer-events: none; }
#stick {
  position: absolute; left: calc(22px + var(--safe-l)); bottom: calc(84px + var(--safe-b));
  width: 128px; height: 128px; border-radius: 50%;
  border: 1px solid var(--stroke); background: rgba(255,255,255,.07);
  pointer-events: auto; touch-action: none;
}
#stickNub {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%; background: rgba(255,255,255,.75);
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
#touchActions {
  position: absolute; right: calc(18px + var(--safe-r)); bottom: calc(84px + var(--safe-b));
  display: grid; grid-template-columns: repeat(2, 60px); gap: 8px; pointer-events: auto;
}
button.round {
  width: 60px; height: 60px; border-radius: 50%; padding: 0; font-size: 18px;
  background: rgba(255,255,255,.78);
}
#abidjanBtn {
  position: fixed; z-index: 21;
  right: calc(10px + var(--safe-r)); top: calc(66px + var(--safe-t));
}

@media (max-width: 720px) {
  #menu { gap: 6px; }
  #menu button { padding: 8px 10px; font-size: 12px; }
  .card { padding: 6px 9px; font-size: 12px; }
  #abidjanBtn { top: auto; bottom: calc(166px + var(--safe-b)); }
}

/* Un panneau ouvert masque le bouton Abidjan, qui le recouvrait (défaut d'origine). */
#panel:not([hidden]) ~ #abidjanBtn { display: none; }

/* Panneau Apparence (V30 rév. D) */
.look-title { margin: 12px 0 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.look-row button { min-height: 40px; }
.look-row button[aria-pressed="true"] { outline: 2px solid var(--gold); outline-offset: 1px; }

/* Résultat du banc d'essai (?bench=1) */
.bench-json { width: 100%; font: 11px/1.4 ui-monospace, monospace; background: rgba(0,0,0,.35); color: var(--text); border: 1px solid var(--stroke); border-radius: 8px; padding: 8px; }

/* --- Mise en page tactile (V30) --------------------------------------------------------
   Sur écran tactile, le menu passe sur une seule ligne défilante en bas, et les commandes
   tactiles sont placées au-dessus de lui : plus aucun bouton ne se recouvre. */
body.touch-mode #menu {
  right: calc(10px + var(--safe-r)); max-width: none;
  flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px;
}
body.touch-mode #menu::-webkit-scrollbar { display: none; }
body.touch-mode #menu button { flex: 0 0 auto; }
body.touch-mode #stick { bottom: calc(66px + var(--safe-b)); }
body.touch-mode #touchActions { bottom: calc(66px + var(--safe-b)); }
body.touch-mode #abidjanBtn {
  top: auto; right: auto;
  left: calc(22px + var(--safe-l)); bottom: calc(206px + var(--safe-b));
}
body.touch-mode #driveHud { bottom: calc(276px + var(--safe-b)); }
body.touch-mode #msg { bottom: calc(276px + var(--safe-b)); }

/* --- Jeu mobile en paysage, à deux mains (V30 rév. C) ------------------------------------
   Pouce gauche : joystick. Pouce droit : actions et glisser pour la caméra.
   Les boutons gardent la même place à pied et en voiture (mémoire du pouce) : seul leur
   contenu change. Rien n'est supprimé : le menu reste complet, ouvert par « ☰ Menu ». */
.touch-only { display: none; }
#touchTop, #rotatePrompt { display: none; }
#touchTop[hidden], #fullscreenBtn[hidden], #rotateFullscreen[hidden] { display: none !important; }
#touch button, #touchTop button, #menu button {
  touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
#touch { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* Boutons d'action : positions fixes dans une grille 2 × 2 (+ caméra). */
#touchActions { grid-template-areas: "cam b" "c d"; }
#touchActions [data-action="camera"] { grid-area: cam; }
#touchActions [data-k="shift"], #touchActions [data-action="brake"] { grid-area: b; }
#touchActions [data-k=" "] { grid-area: c; }
#touchActions [data-action="interact"] { grid-area: d; }
#touchActions [data-action="interact"] #interactVerb { font-size: 12px; font-weight: 800; line-height: 1.05; }
body:not(.in-vehicle) #touchActions [data-when="vehicle"],
body.in-vehicle #touchActions [data-when="foot"] { display: none; }

body.touch-mode #touchTop {
  display: flex; gap: 8px; position: fixed; z-index: 21;
  top: calc(8px + var(--safe-t)); right: calc(10px + var(--safe-r));
}
body.touch-mode #touchTop button { min-height: 44px; min-width: 44px; padding: 8px 12px; }

@media (orientation: landscape) {
  /* HUD compact sur une ligne, à gauche du bouton Menu. */
  body.touch-mode #miniMap { width: 88px; height: 88px; top: calc(8px + var(--safe-t)); border-radius: 10px; }
  body.touch-mode #hud { left: calc(104px + var(--safe-l)); right: calc(130px + var(--safe-r)); top: calc(8px + var(--safe-t)); gap: 5px; flex-wrap: nowrap; overflow: hidden; }
  body.touch-mode #hud .card { padding: 5px 8px; font-size: 12px; gap: 4px; }
  body.touch-mode #hud .lbl, body.touch-mode #hud .unit, body.touch-mode #hud #gps, body.touch-mode #hud .card:has(#gps) { display: none; }
  /* J14 (06/11/2026) : sur un téléphone étroit (iPhone SE, 667 px de large), la barre déborde de 45 à 53 px selon le
   * nombre de chiffres du compteur d'images : la carte FPS était coupée (invisible) et passait sous les boutons
   * Plein écran / Menu (chevauchement relevé par la suite mobile, une fois sur deux selon la valeur affichée).
   * Elle est retirée en dessous de 700 px : diagnostic, pas une commande ; le niveau de qualité reste dans Réglages. */
  @media (max-width: 700px) { body.touch-mode #hud #fpsCard { display: none; } }
  /* Menu : masqué pendant le jeu, ouvert en feuille au-dessus de la scène. */
  body.touch-mode #menu { display: none; }
  body.touch-mode.menu-open #menu {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
    left: 50%; right: auto; bottom: auto; top: calc(58px + var(--safe-t)); transform: translateX(-50%);
    width: min(520px, calc(100vw - 40px - var(--safe-l) - var(--safe-r)));
    padding: 12px; background: var(--panel); border: 1px solid var(--stroke); border-radius: 18px;
    box-shadow: var(--shadow); backdrop-filter: blur(14px); overflow: visible; z-index: 22;
  }
  body.touch-mode.menu-open #menu button { min-height: 44px; }
  body.touch-mode #abidjanBtn { display: none; }
  body.touch-mode .touch-only { display: inline-block; }
  /* Pouce gauche : joystick plus grand, posé bas à gauche. */
  body.touch-mode #stick {
    width: 136px; height: 136px;
    left: calc(26px + var(--safe-l)); bottom: calc(22px + var(--safe-b));
  }
  /* Pouce droit : boutons 64 px, bas à droite. */
  body.touch-mode #touchActions {
    right: calc(22px + var(--safe-r)); bottom: calc(22px + var(--safe-b));
    grid-template-columns: repeat(2, 64px); gap: 10px;
  }
  body.touch-mode #touchActions button.round { width: 64px; height: 64px; }
  body.touch-mode #missionHud { left: calc(104px + var(--safe-l)); top: calc(54px + var(--safe-t)); max-width: min(300px, 40vw); padding: 8px 10px; }
  body.touch-mode #driveHud { bottom: auto; top: calc(54px + var(--safe-t)); right: calc(10px + var(--safe-r)); }
  body.touch-mode #msg { bottom: calc(22px + var(--safe-b)); max-width: min(420px, calc(100vw - 420px)); }
  body.touch-mode #hint { bottom: calc(170px + var(--safe-b)); }
  body.touch-mode #panel, body.touch-mode #abidjanPanel { top: calc(58px + var(--safe-t)); max-height: calc(100vh - 80px - var(--safe-t) - var(--safe-b)); z-index: 23; }
}

@media (orientation: portrait) {
  /* Le jeu se joue en paysage : invitation à tourner, que l'on peut ignorer. */
  body.touch-mode:not(.portrait-ok) #rotatePrompt {
    display: grid; place-items: center; position: fixed; inset: 0; z-index: 40;
    background: rgba(8, 10, 13, .9); backdrop-filter: blur(6px); padding: 24px;
  }
  body.touch-mode #touchTop { display: none; }
  body.touch-mode.portrait-ok #touchTop { display: flex; }
  body.touch-mode.portrait-ok #menuToggle { display: none; }
}
.rotate-card { max-width: 340px; text-align: center; }
.rotate-card b { display: block; font-size: 18px; margin: 10px 0 6px; }
.rotate-card p { color: var(--muted); }
.rotate-card .row { justify-content: center; margin-top: 14px; }
.rotate-icon { font-size: 44px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* SERVICES-ROUTE : témoin de réserve de carburant. */
#driveFuel.reserve{color:#ff6b4a;font-weight:700}
#fuelAction,#towAction{margin-left:.3em}

/* RUE-COURANTE (références vidéo : « tu roules vraiment dans nos quartiers ») : nom de la rue réelle (OSM) sous le bandeau. */
#streetName { position: fixed; z-index: 4; left: 50%; transform: translateX(-50%); top: calc(58px + var(--safe-t));
  max-width: min(46vw, 460px); padding: 5px 14px; border-radius: 8px; background: #1d4f9c; color: #fff; font-weight: 800;
  font-size: 13px; letter-spacing: .4px; text-transform: uppercase; text-align: center; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; box-shadow: 0 2px 10px rgba(0,0,0,.35); pointer-events: none; }
#streetName small { display: block; font-size: 10px; font-weight: 600; opacity: .85; text-transform: none; letter-spacing: 0; }
#streetName[hidden] { display: none !important; }
@media (max-width: 700px) { #streetName { top: calc(52px + var(--safe-t)); font-size: 11px; max-width: 52vw; } }

/* INTERFACE-MOBILE (07/11/2026) : barre d'activités à icônes, guidage, menu à icônes, bandeau épuré. */
#quick { position: fixed; right: calc(10px + var(--safe-r, 0px)); top: calc(118px + var(--safe-t, 0px)); display: grid; grid-template-columns: repeat(2, 54px); gap: 6px; z-index: 6; }
#quick button { width: 54px; min-height: 50px; border-radius: 16px; border: 1px solid rgba(255,255,255,.18); background: rgba(16,22,30,.78); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 4px 2px; box-shadow: 0 4px 14px rgba(0,0,0,.25); backdrop-filter: blur(6px); }
#quick button:active { transform: scale(.94); background: rgba(41,182,246,.85); }
#quick .qi { font-size: 22px; line-height: 1; }
#quick .ql { font-size: 10px; font-weight: 700; letter-spacing: .02em; opacity: .9; }
#guideChip { position: fixed; left: 50%; transform: translateX(-50%); top: calc(102px + var(--safe-t, 0px)); z-index: 6; background: rgba(41,182,246,.92); color: #fff; border-radius: 999px; padding: 6px 8px 6px 14px; font-size: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.25); display: flex; align-items: center; gap: 6px; }
#guideChip[hidden] { display: none; }
#guideChip button { border: 0; background: rgba(0,0,0,.25); color: #fff; border-radius: 999px; width: 26px; height: 26px; padding: 0; }
#menu .mi { margin-right: 5px; }
#hud .lbl { display: none; }
body:not(.debug) #fpsCard, body:not(.debug) #gps { display: none; }
body:not(.debug) #hud .card:has(#gps) { display: none; }
@media (max-height: 520px) { #quick { gap: 5px; grid-template-columns: repeat(3, 48px); top: calc(112px + var(--safe-t, 0px)); } #quick button { width: 48px; min-height: 44px; } #quick .qi { font-size: 18px; } #quick .ql { font-size: 9px; } }

/* Commandes tactiles au volant : frein, marche arrière, klaxon, accélérateur (3 colonnes) ; lettres A/B/C à pied. */
body.in-vehicle #touchActions { grid-template-columns: repeat(3, 60px); grid-template-areas: "cam b r" "h d g"; }
#touchActions [data-k="w"] { grid-area: g; } #touchActions [data-k="s"] { grid-area: r; font-size: 14px; } #touchActions [data-action="horn"] { grid-area: h; }
#touchActions .gas { background: rgba(102, 205, 120, .9); font-size: 22px; }
#touchActions .kl { position: absolute; bottom: 4px; right: 9px; font-size: 10px; font-weight: 800; opacity: .7; }
#touchActions button.round { position: relative; }
/* Écran de jeu épuré : vie et réputation dans le Profil (menu), pas dans le bandeau. */
#hud .card:has(#healthHud), #hud .card:has(#rep) { display: none; }
body.debug #hud .card:has(#healthHud), body.debug #hud .card:has(#rep) { display: flex; }
#touchActions [data-action="interact"] #interactVerb { white-space: pre-line; }

/* COMMANDES-MOBILES (cahier du 07/11, § 6) : à pied, A (grand) en bas à droite, B (courir) à sa gauche, C (sauter) au-dessus ;
 * caméra petite. Au volant : ▲ accélérateur dans le coin, frein et marche arrière au-dessus, klaxon et A à gauche.
 * A est masqué quand aucune action n'est possible (jamais de bouton sans effet). */
#touchActions { grid-template-columns: 64px 76px; grid-template-areas: "cam c" "b d"; align-items: end; justify-items: center; }
#touchActions [data-action="camera"] { grid-area: cam; width: 48px; height: 48px; font-size: 15px; opacity: .85; }
#touchActions [data-k="shift"] { grid-area: b; } #touchActions [data-k=" "] { grid-area: c; }
#touchActions [data-action="interact"] { grid-area: d; width: 76px; height: 76px; }
body.in-vehicle #touchActions { grid-template-columns: 64px 64px 76px; grid-template-areas: "cam r b" "h d g"; }
body.in-vehicle #touchActions [data-action="brake"] { grid-area: b; }
body.in-vehicle #touchActions [data-k="s"] { grid-area: r; font-size: 15px; font-weight: 800; }
body.in-vehicle #touchActions [data-k="w"] { grid-area: g; width: 76px; height: 76px; font-size: 26px; }
body.in-vehicle #touchActions [data-action="interact"] { width: 60px; height: 60px; }
#touchActions [data-action="interact"].sans-action { visibility: hidden; }
/* Raccourcis d'activité : petits, regroupés sur le côté droit, sous le menu (§ 6 D). */
#quick { grid-template-columns: repeat(3, 44px); gap: 5px; top: calc(112px + var(--safe-t, 0px)); }
#quick button { width: 44px; min-height: 42px; border-radius: 12px; padding: 2px; }
#quick .qi { font-size: 17px; } #quick .ql { font-size: 8.5px; }
@media (max-height: 520px) { #quick { grid-template-columns: repeat(6, 40px); gap: 4px; top: calc(60px + var(--safe-t, 0px)); right: calc(150px + var(--safe-r, 0px)); } #quick button { width: 40px; min-height: 38px; } #quick .ql { display: none; } }