/* =====================================================================================
   ARCADE JOUET : ÉCRAN DE JEU (2026-10-18, maquette « Écran de jeu simplifié », style B).
   Classement, barre d'XP, améliorations, mini-carte RONDE, grande carte, notifications et toasts,
   bandeau d'évolution, flotte, boutique d'escale du Port franc, menu ☰, pastilles restantes.
   Scopée `html body.ui-arcade` (CFG.UI_STYLE === 'arcade') + ids + !important : il faut battre les
   10 couches précédentes. Jetons --ar-* posés par css/accueil-arcade.css.
   Le DESSIN canvas (mini-carte, grande carte, pancarte centrale) lit CFG.UI_STYLE dans js/ui.js
   (UI.mmPal) et js/main.js (GAME.drawEventFlash).
   ⚠️ Les POSITIONS restent celles des feuilles existantes (PC + mobile, auditées au banc) sauf la
   taille de la mini-carte PC et la largeur du classement : ici on change la PEAU, pas l'ancrage.
   ===================================================================================== */

/* ---------- 0. police commune du HUD ---------- */
html body.ui-arcade #hud, html body.ui-arcade #hud *:not(svg):not(svg *),
html body.ui-arcade #minimap-modal, html body.ui-arcade #minimap-modal *,
html body.ui-arcade #gps-toasts, html body.ui-arcade #gps-toasts *,
html body.ui-arcade #quest-toast, html body.ui-arcade #quest-toast *,
html body.ui-arcade #chest-reward, html body.ui-arcade #chest-reward *,
html body.ui-arcade .event-card, html body.ui-arcade .event-card *,
html body.ui-arcade .event-journal, html body.ui-arcade .event-journal * { font-family: var(--ar-font) !important; }

/* ---------- 1. CLASSEMENT : 5 lignes lisibles, sans cadre lourd, ta ligne en JAUNE ---------- */
html body.ui-arcade #hud #leaderboard {
  background: transparent !important; background-image: none !important;
  border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  padding: 0 !important; min-width: 0 !important;
}
html body.ui-arcade:not(.vtouch) #hud #leaderboard { width: 224px !important; }
html body.ui-arcade.vtouch #hud #lb-list li { height: 22px !important; line-height: 22px !important; font-size: 11.5px !important; }
html body.ui-arcade.vtouch #hud #lb-list li::before { flex-basis: 17px !important; min-width: 17px !important; height: 17px !important; line-height: 17px !important; font-size: 10px !important; }
html body.ui-arcade #hud #leaderboard::before, html body.ui-arcade #hud #leaderboard::after { display: none !important; }
html body.ui-arcade #hud #leaderboard h3 {
  margin: 0 0 6px !important; padding: 0 4px !important; background: none !important; border: 0 !important;
  font-size: 13px !important; font-weight: 900 !important; letter-spacing: .04em !important; text-transform: uppercase !important;
  color: #fff !important; -webkit-text-stroke: 3px var(--ar-ink) !important; paint-order: stroke fill !important;
  text-shadow: 0 2px 0 var(--ar-ink) !important; text-align: right !important;
}
html body.ui-arcade #hud #leaderboard #lb-count { -webkit-text-stroke: 0 !important; text-shadow: none !important; color: #fff !important; opacity: .85 !important; font-size: 11px !important; text-transform: none !important; }
html body.ui-arcade #hud #leaderboard .lb-top5-badge {
  background: var(--ar-yellow) !important; color: var(--ar-ink-2) !important; -webkit-text-stroke: 0 !important; text-shadow: none !important;
  border: 2px solid var(--ar-ink-2) !important; border-radius: 999px !important; padding: 0 6px !important; margin-left: 6px !important; font-size: 10px !important;
}
html body.ui-arcade #hud #lb-list { margin: 0 !important; padding: 0 !important; display: grid !important; gap: 4px !important; }
html body.ui-arcade #hud #lb-list li {
  display: flex !important; align-items: center !important; gap: 6px !important;
  height: 26px !important; padding: 0 10px 0 6px !important; margin: 0 !important;
  background: rgba(26, 61, 85, 0.62) !important; background-image: none !important;
  border: 0 !important; border-radius: 13px !important; box-shadow: none !important;
  color: #fff !important; font-size: 13px !important; font-weight: 800 !important; line-height: 26px !important;
}
html body.ui-arcade #hud #lb-list li::before {
  content: attr(data-rank) !important; flex: 0 0 20px !important; height: 20px !important; min-width: 20px !important; margin: 0 !important;
  border-radius: 50% !important; background: rgba(255,255,255,0.18) !important; color: #fff !important;
  font-size: 11px !important; line-height: 20px !important; text-align: center !important;
}
html body.ui-arcade #hud #lb-list li.rank1::before { background: var(--ar-yellow) !important; color: var(--ar-ink-2) !important; }
html body.ui-arcade #hud #lb-list li.rank2::before { background: #e6eef3 !important; color: var(--ar-ink) !important; }
html body.ui-arcade #hud #lb-list li.rank3::before { background: #f0a76a !important; color: var(--ar-orange-d) !important; }
html body.ui-arcade #hud #lb-list li .lb-name { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; color: inherit !important; }
html body.ui-arcade #hud #lb-list li > span:last-child { flex: 0 0 auto !important; color: inherit !important; font-variant-numeric: tabular-nums !important; }
html body.ui-arcade #hud #lb-list li.me {
  background: var(--ar-yellow) !important; color: var(--ar-ink-2) !important;
  box-shadow: inset 0 0 0 2.5px var(--ar-ink-2), 0 3px 0 var(--ar-ink-2) !important;
}
html body.ui-arcade #hud #lb-list li.me::before { background: var(--ar-ink-2) !important; color: var(--ar-yellow) !important; }
html body.ui-arcade #hud #lb-list li.lb-sep { height: 12px !important; line-height: 8px !important; background: transparent !important; justify-content: center !important; color: #fff !important; }
html body.ui-arcade #hud #lb-list li.lb-sep::before { display: none !important; }
html body.ui-arcade #hud #lb-list .lb-arrow.up { color: var(--ar-green) !important; }
html body.ui-arcade #hud #lb-list .lb-arrow.down { color: var(--ar-red) !important; }
html body.ui-arcade #hud #lb-list li.me .lb-arrow.up { color: var(--ar-green-d) !important; }
html body.ui-arcade #hud #team-scores {
  background: var(--ar-cream) !important; color: var(--ar-ink) !important; border: 3px solid var(--ar-ink) !important;
  border-radius: 999px !important; box-shadow: 0 4px 0 var(--ar-ink) !important; font-weight: 900 !important;
}

/* ---------- 2. BARRE D'XP / NIVEAU / SCORE (bas centre) ---------- */
html body.ui-arcade #hud #xpbar-wrap { background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; }
html body.ui-arcade #hud #xpbar-name {
  color: #fff !important; font-size: 20px !important; font-weight: 900 !important;
  -webkit-text-stroke: 4px var(--ar-ink) !important; paint-order: stroke fill !important; text-shadow: 0 3px 0 var(--ar-ink) !important;
}
html body.ui-arcade #hud #xpbar {
  height: 24px !important; border-radius: 999px !important; overflow: hidden !important;
  background: rgba(26, 61, 85, 0.75) !important; background-image: none !important;
  border: 3px solid var(--ar-ink) !important; box-shadow: 0 4px 0 var(--ar-ink) !important;
}
html body.ui-arcade #hud #xpbar-fill {
  background: var(--ar-yellow) !important; background-image: linear-gradient(180deg, rgba(255,255,255,.45) 0 35%, transparent 35%) !important;
  border-radius: 999px !important; box-shadow: none !important;
}
html body.ui-arcade #hud #xpbar-label {
  color: #fff !important; font-size: 13px !important; font-weight: 900 !important; line-height: 18px !important;
  -webkit-text-stroke: 3px var(--ar-ink) !important; paint-order: stroke fill !important; text-shadow: none !important;
}
html body.ui-arcade #hud #xpbar-mult, html body.ui-arcade #hud #points-label {
  background: var(--ar-orange) !important; color: #fff !important; border: 2.5px solid var(--ar-orange-d) !important;
  border-radius: 999px !important; box-shadow: 0 3px 0 var(--ar-orange-d) !important; text-shadow: none !important; font-weight: 900 !important;
}
html body.ui-arcade #hud #pearl-hud {
  background: var(--ar-cream) !important; color: var(--ar-ink) !important; border: 3px solid var(--ar-ink) !important;
  border-radius: 999px !important; box-shadow: 0 4px 0 var(--ar-ink) !important; backdrop-filter: none !important;
}
html body.ui-arcade #hud #pearl-hud b { color: var(--ar-ink) !important; font-weight: 900 !important; }

/* ---------- 3. AMÉLIORATIONS façon diep : bas gauche, barres colorées par stat, touches 1-8 ---------- */
html body.ui-arcade #hud #stats-panel {
  background: rgba(26, 61, 85, 0.55) !important; background-image: none !important;
  border: 0 !important; border-radius: 16px !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 8px 10px !important;
}
html body.ui-arcade #hud #stats-panel::before, html body.ui-arcade #hud #stats-panel::after { display: none !important; }
html body.ui-arcade #hud #stats-panel h3 {
  color: #fff !important; font-size: 13px !important; font-weight: 900 !important; letter-spacing: .04em !important; text-transform: uppercase !important;
  -webkit-text-stroke: 3px var(--ar-ink) !important; paint-order: stroke fill !important; text-shadow: none !important; border: 0 !important; background: none !important;
}
html body.ui-arcade #hud #stats-panel #stat-quota {
  -webkit-text-stroke: 0 !important; background: var(--ar-yellow) !important; color: var(--ar-ink-2) !important;
  border: 2px solid var(--ar-ink-2) !important; border-radius: 999px !important; padding: 0 7px !important; font-size: 11px !important;
}
html body.ui-arcade #hud #stats-panel .stat-row { margin: 5px 0 !important; gap: 6px !important; }
html body.ui-arcade #hud #stats-panel .stat-bar {
  height: 22px !important; border-radius: 999px !important;
  background: rgba(10, 30, 44, 0.78) !important; border: 2.5px solid var(--ar-ink) !important; box-shadow: none !important;
}
html body.ui-arcade #hud #stats-panel .stat-fill { opacity: 1 !important; background: var(--c, var(--ar-blue)) !important; border-radius: 999px !important; }
html body.ui-arcade #hud #stats-panel .stat-name {
  height: 17px !important; line-height: 17px !important; font-size: 12px !important; font-weight: 900 !important; color: #fff !important;
  -webkit-text-stroke: 2.5px var(--ar-ink) !important; paint-order: stroke fill !important; text-shadow: none !important;
}
html body.ui-arcade #hud #stats-panel .stat-key {
  top: 1px !important; height: 15px !important; line-height: 15px !important; min-width: 15px !important;
  background: var(--ar-cream) !important; color: var(--ar-ink) !important; border-radius: 50% !important; font-weight: 900 !important; font-size: 10px !important;
}
html body.ui-arcade #hud #stats-panel .stat-plus {
  flex: 0 0 24px !important; width: 24px !important; height: 24px !important; line-height: 19px !important;
  background: var(--c, var(--ar-blue)) !important; color: #fff !important;
  border: 2.5px solid var(--ar-ink) !important; border-radius: 50% !important; box-shadow: 0 3px 0 var(--ar-ink) !important;
  -webkit-text-stroke: 1.5px var(--ar-ink) !important; paint-order: stroke fill !important;
}
html body.ui-arcade #hud #stats-panel .stat-plus:active:not(:disabled) { transform: translateY(2px) !important; box-shadow: 0 1px 0 var(--ar-ink) !important; }
html body.ui-arcade #hud #stats-panel .stat-plus.locked { opacity: .35 !important; box-shadow: none !important; }
html body.ui-arcade #hud #stat-pts-badge {
  color: var(--ar-yellow) !important; -webkit-text-stroke: 4px var(--ar-ink-2) !important; paint-order: stroke fill !important;
  text-shadow: 0 3px 0 var(--ar-ink-2) !important;
}
/* « visible quand il y a des points » : hors points (et hors épinglage), le panneau PC s'efface. */
/* (+ :not(.ht-open-stats) 2026-10-20 : le survol de l'onglet « Améliorations » (js/hud-marque-pages.js) doit pouvoir l'ouvrir) */
html body.ui-arcade.hud-simple:not(.vtouch):not(.has-stat-pts):not(.stats-pinned):not(.ht-open-stats) #hud #stats-panel { display: none !important; }

/* ---------- 4. MINI-CARTE : RONDE, plus petite, contour épais + ombre dure ---------- */
html body.ui-arcade #minimap {
  border-radius: 50% !important; border: 4px solid var(--ar-ink) !important;
  box-shadow: 0 5px 0 var(--ar-ink), 0 10px 18px rgba(0,0,0,.22) !important;
  background: #3a9cc0 !important; opacity: 1 !important;
}
html body.ui-arcade #minimap:hover { border-color: var(--ar-ink) !important; filter: brightness(1.06) !important; }
html body.ui-arcade:not(.vtouch) #minimap { width: 176px !important; height: 176px !important; right: 14px !important; bottom: 16px !important; }
html body.ui-arcade.vtouch #minimap { border-width: 3px !important; box-shadow: 0 3px 0 var(--ar-ink) !important; }
/* #mm-dot = flèche « MOI » (SVG .mm-me + halo, css/style.css) : plus de pastille blanche ici. */
html body.ui-arcade #mm-dot { background: none !important; border: 0 !important; box-shadow: none !important; }

/* ---------- 5. GRANDE CARTE (#minimap-modal) : même langage ---------- */
html body.ui-arcade #minimap-modal { background: rgba(26, 61, 85, 0.55) !important; backdrop-filter: none !important; }
html body.ui-arcade #minimap-modal #minimap-big-wrap {
  background: var(--ar-cream) !important; border: 4px solid var(--ar-ink) !important; border-radius: 24px !important;
  box-shadow: 0 7px 0 var(--ar-ink), 0 18px 30px rgba(0,0,0,.25) !important; padding: 14px !important; color: var(--ar-ink) !important;
}
html body.ui-arcade #minimap-modal #minimap-big {
  border: 4px solid var(--ar-ink) !important; border-radius: 18px !important; box-shadow: 0 5px 0 var(--ar-ink) !important; background: #2f87a6 !important;
}
html body.ui-arcade #minimap-modal .mm-tab {
  background: #fff !important; color: var(--ar-ink) !important; border: 3px solid var(--ar-ink) !important; border-radius: 999px !important;
  box-shadow: 0 3px 0 var(--ar-ink) !important; font-weight: 900 !important;
}
html body.ui-arcade #minimap-modal .mm-tab.selected { background: var(--ar-blue) !important; color: #fff !important; border-color: var(--ar-blue-d) !important; box-shadow: 0 3px 0 var(--ar-blue-d) !important; }
html body.ui-arcade #minimap-modal .mm-carte-side, html body.ui-arcade #minimap-modal .mm-carte-side *,
html body.ui-arcade #minimap-modal .mm-tabpane { color: var(--ar-ink) !important; background-color: transparent !important; }
html body.ui-arcade #minimap-modal .minimap-legend li { font-weight: 800 !important; }
html body.ui-arcade #minimap-modal .mm-k { border: 2px solid var(--ar-ink) !important; }
html body.ui-arcade #minimap-modal .panel-x {
  background: var(--ar-red) !important; color: #fff !important; border: 3px solid #7a1414 !important; border-radius: 50% !important;
  box-shadow: 0 3px 0 #7a1414 !important; font-weight: 900 !important;
}
html body.ui-arcade #minimap-modal button:not(.mm-tab):not(.panel-x) {
  background: var(--ar-yellow) !important; color: var(--ar-ink-2) !important; border: 3px solid var(--ar-ink-2) !important;
  border-radius: 12px !important; box-shadow: 0 3px 0 var(--ar-ink-2) !important; font-weight: 900 !important;
}
html body.ui-arcade #minimap-modal .mm-gps-btn.is-accept { background: var(--ar-green) !important; color: #fff !important; border-color: var(--ar-green-d) !important; box-shadow: 0 3px 0 var(--ar-green-d) !important; }
html body.ui-arcade #minimap-modal .mm-gps-btn.is-stop { background: var(--ar-red) !important; color: #fff !important; border-color: #7a1414 !important; box-shadow: 0 3px 0 #7a1414 !important; }

/* ---------- 6. NOTIFICATIONS ET TOASTS ---------- */
/* fil d'actus (killfeed) : petites pastilles marines, texte blanc gras */
html body.ui-arcade #hud #killfeed .feed-msg {
  background: rgba(26, 61, 85, 0.72) !important; background-image: none !important; color: #fff !important;
  border: 0 !important; border-radius: 999px !important; box-shadow: none !important; backdrop-filter: none !important;
  padding: 3px 10px !important; font-size: 12px !important; font-weight: 800 !important; text-shadow: none !important;
}
/* bandeau boss / annonce DOM (hors mode allégé) */
html body.ui-arcade #hud #boss-banner, html body.ui-arcade #hud #heli-notice, html body.ui-arcade #hud #gardien-radio {
  background: var(--ar-cream) !important; background-image: none !important; color: var(--ar-ink) !important;
  border: 4px solid var(--ar-ink) !important; border-radius: 18px !important; box-shadow: 0 5px 0 var(--ar-ink) !important;
  text-shadow: none !important; font-weight: 900 !important; backdrop-filter: none !important;
}
/* demandes de partage GPS */
html body.ui-arcade #gps-toasts .gps-toast {
  background: var(--ar-cream) !important; background-image: none !important; color: var(--ar-ink) !important;
  border: 4px solid var(--ar-ink) !important; border-radius: 18px !important; box-shadow: 0 5px 0 var(--ar-ink) !important; backdrop-filter: none !important;
}
html body.ui-arcade #gps-toasts .gps-toast * { color: var(--ar-ink) !important; text-shadow: none !important; }
html body.ui-arcade #gps-toasts .gps-toast-title { font-weight: 900 !important; }
html body.ui-arcade #gps-toasts .gps-toast-actions button, html body.ui-arcade #gps-toasts .mm-gps-btn {
  background: var(--ar-yellow) !important; color: var(--ar-ink-2) !important; border: 3px solid var(--ar-ink-2) !important;
  border-radius: 12px !important; box-shadow: 0 3px 0 var(--ar-ink-2) !important; font-weight: 900 !important;
}
html body.ui-arcade #gps-toasts .mm-gps-btn.is-accept { background: var(--ar-green) !important; color: #fff !important; border-color: var(--ar-green-d) !important; box-shadow: 0 3px 0 var(--ar-green-d) !important; }
/* quête accomplie */
html body.ui-arcade #quest-toast {
  background: var(--ar-cream) !important; background-image: none !important; color: var(--ar-ink) !important;
  border: 4px solid var(--ar-ink) !important; border-radius: 20px !important; box-shadow: 0 5px 0 var(--ar-ink) !important; backdrop-filter: none !important;
}
html body.ui-arcade #quest-toast .qt-title { color: var(--ar-green-d) !important; font-weight: 900 !important; text-shadow: none !important; }
html body.ui-arcade #quest-toast .qt-label { color: var(--ar-ink) !important; font-weight: 800 !important; text-shadow: none !important; }
html body.ui-arcade #quest-toast .qt-xp {
  background: var(--ar-yellow) !important; color: var(--ar-ink-2) !important; border: 3px solid var(--ar-ink-2) !important;
  border-radius: 999px !important; box-shadow: 0 3px 0 var(--ar-ink-2) !important; text-shadow: none !important; font-weight: 900 !important; padding: 2px 9px !important;
}
/* coffre ouvert */
html body.ui-arcade #chest-reward .chest-reward-card {
  background: var(--ar-cream) !important; background-image: none !important; color: var(--ar-ink) !important;
  border: 4px solid var(--ar-ink) !important; border-radius: 22px !important; box-shadow: 0 6px 0 var(--ar-ink) !important; backdrop-filter: none !important;
}
html body.ui-arcade #chest-reward .chest-reward-glow { display: none !important; }
html body.ui-arcade #chest-reward .chest-reward-head { color: var(--ar-ink) !important; font-weight: 900 !important; text-shadow: none !important; }
html body.ui-arcade #chest-reward .chest-reward-list li { color: var(--ar-ink) !important; font-weight: 800 !important; background: #fff !important; border: 2.5px solid var(--ar-ink) !important; border-radius: 12px !important; }
/* cartes d'événement + journal J : fond MARINE SOMBRE (contraste > 12:1), liseré jaune arcade — plus de
   carte crème claire qui éblouissait par-dessus la mer (retour Simon 2026-10-20) */
html body.ui-arcade .event-card, html body.ui-arcade .event-journal {
  background: rgba(9, 22, 36, 0.94) !important; background-image: none !important; color: #f4f8fb !important;
  border: 2px solid var(--ar-ink) !important; border-left: 4px solid var(--ar-yellow) !important; border-radius: 14px !important;
  box-shadow: 0 4px 0 rgba(0,0,0,0.35), 0 8px 18px rgba(0,0,0,0.35) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html body.ui-arcade .event-card .ev-title, html body.ui-arcade .event-journal .ev-title { color: #fff !important; font-weight: 900 !important; }
html body.ui-arcade .event-card dt, html body.ui-arcade .event-card .ev-foot,
html body.ui-arcade .event-journal small, html body.ui-arcade .event-journal em,
html body.ui-arcade .event-journal .ev-close { color: #aacde1 !important; }
html body.ui-arcade .event-card dd, html body.ui-arcade .event-journal p { color: #f4f8fb !important; }
html body.ui-arcade .event-card .ev-gain { color: var(--ar-yellow) !important; font-weight: 900 !important; }
html body.ui-arcade .event-journal li { background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(170,205,225,0.3) !important; border-radius: 10px !important; }

/* ---------- 7. BANDEAU D'ÉVOLUTION (cartes de coque) ---------- */
html body.ui-arcade #hud #shipyard-bar { background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; }
html body.ui-arcade #hud #shipyard-bar .sy-full {
  background: rgba(26, 61, 85, 0.55) !important; background-image: none !important; border: 0 !important;
  border-radius: 20px !important; box-shadow: none !important; backdrop-filter: none !important;
}
html body.ui-arcade #hud #shipyard-bar .sy-label {
  color: #fff !important; font-weight: 900 !important; -webkit-text-stroke: 3px var(--ar-ink) !important; paint-order: stroke fill !important; text-shadow: none !important;
}
html body.ui-arcade #hud #shipyard-bar .sy-card {
  border: 4px solid var(--ar-ink) !important; border-radius: 16px !important; box-shadow: 0 5px 0 var(--ar-ink) !important;
  transition: transform .12s ease !important;
}
html body.ui-arcade #hud #shipyard-bar .sy-card:hover { transform: translateY(-3px) !important; }
html body.ui-arcade #hud #shipyard-bar .sy-card:active { transform: translateY(3px) !important; box-shadow: 0 2px 0 var(--ar-ink) !important; }
html body.ui-arcade #hud #shipyard-bar .sy-card b { color: #fff !important; font-weight: 900 !important; -webkit-text-stroke: 3px var(--ar-ink) !important; paint-order: stroke fill !important; text-shadow: none !important; }
html body.ui-arcade #hud #shipyard-bar .sy-card .tier-chip {
  -webkit-text-stroke: 0 !important; background: var(--ar-yellow) !important; color: var(--ar-ink-2) !important;
  border: 2px solid var(--ar-ink-2) !important; border-radius: 999px !important;
}
html body.ui-arcade #hud #shipyard-bar .sy-collapsed {
  background: var(--ar-yellow) !important; background-image: none !important; color: var(--ar-ink-2) !important;
  border: 4px solid var(--ar-ink-2) !important; border-radius: 999px !important; box-shadow: 0 5px 0 var(--ar-ink-2) !important; font-weight: 900 !important;
}
html body.ui-arcade #hud #shipyard-bar .sy-collapsed * { color: var(--ar-ink-2) !important; text-shadow: none !important; }
html body.ui-arcade #hud #shipyard-bar .sy-collapsed-n, html body.ui-arcade #hud #shipyard-bar .sy-collapsed-key {
  background: var(--ar-orange) !important; color: #fff !important; border: 2px solid var(--ar-orange-d) !important; border-radius: 999px !important;
}

/* ---------- 8. PANNEAU DE FLOTTE ---------- */
html body.ui-arcade #hud #fleet-panel {
  background: var(--ar-cream) !important; background-image: none !important; color: var(--ar-ink) !important;
  border: 4px solid var(--ar-ink) !important; border-radius: 18px !important; box-shadow: 0 5px 0 var(--ar-ink) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html body.ui-arcade #hud #fleet-panel::before, html body.ui-arcade #hud #fleet-panel::after { display: none !important; }
html body.ui-arcade #hud #fleet-panel h3, html body.ui-arcade #hud #fleet-panel .fleet-name { color: var(--ar-ink) !important; font-weight: 900 !important; text-shadow: none !important; border: 0 !important; background: none !important; }
html body.ui-arcade #hud #fleet-panel #fleet-count { background: var(--ar-blue) !important; color: #fff !important; border: 2px solid var(--ar-blue-d) !important; border-radius: 999px !important; padding: 0 7px !important; }
html body.ui-arcade #hud #fleet-panel .fleet-role { color: var(--ar-blue-d) !important; text-shadow: none !important; }
html body.ui-arcade #hud #fleet-panel .fleet-row { background: #fff !important; border: 2.5px solid var(--ar-ink) !important; border-radius: 12px !important; box-shadow: 0 3px 0 var(--ar-ink) !important; }
html body.ui-arcade #hud #fleet-panel .fleet-nb, html body.ui-arcade #hud #fleet-panel .fleet-nb * { color: var(--ar-ink) !important; }
html body.ui-arcade #hud #fleet-panel button:not(.mob-panel-close) {
  background: var(--ar-green) !important; color: #fff !important; border: 2.5px solid var(--ar-green-d) !important;
  border-radius: 10px !important; box-shadow: 0 3px 0 var(--ar-green-d) !important; font-weight: 900 !important; text-shadow: none !important;
}
html body.ui-arcade #hud .mob-panel-close {
  background: var(--ar-red) !important; color: #fff !important; border: 3px solid #7a1414 !important; border-radius: 50% !important; box-shadow: 0 3px 0 #7a1414 !important;
}

/* ---------- 9. ESCALE du Port franc (#shop-bar) — REFONTE 2026-10-19 ----------
   Demande Simon : « la popup du port pour les achats est mal faite : couleur, éléments pas centrés,
   présentation, comportement au clic, achat ». Structure (index.html) : #shop-bar = VOILE plein
   écran (clic dessus = fermer) > #shop-box = fenêtre crème centrée : en-tête (#shop-head : titre,
   solde, compte à rebours, accroche, croix), corps défilant (#shop-bar-items : un intertitre + UNE
   grille régulière par rayon), toast d'achat (#shop-toast). Carte = catégorie/stock, icône, nom,
   effet, bouton-prix toujours en bas. États : achetable (vert), trop cher (prix rouge), au max
   (pointillés), en cours (« … »), acheté (flash vert). Le CSS du jeu empile ~10 couches sur
   .shop-card : tout est donc scopé `html body.ui-arcade #hud #shop-bar` et en !important. */
html body.ui-arcade #hud #shop-bar {
  position: fixed !important; inset: 0 !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: auto !important; max-width: none !important; height: auto !important; transform: none !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
  gap: 0 !important; margin: 0 !important; overflow: hidden !important;
  padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)) !important;
  background: rgba(16, 44, 64, .55) !important; background-image: none !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important;
  z-index: 60 !important; pointer-events: auto !important; cursor: default !important;
}
html body.ui-arcade #hud #shop-bar.hidden { display: none !important; }
html body.ui-arcade #hud #shop-bar, html body.ui-arcade #hud #shop-bar * { font-family: var(--ar-font) !important; box-sizing: border-box !important; text-shadow: none !important; -webkit-text-stroke: 0 !important; }
html body.ui-arcade #hud #shop-bar #shop-box {
  position: relative !important; display: flex !important; flex-direction: column !important;
  width: min(1040px, 100%) !important; max-height: 100% !important; min-height: 0 !important;
  margin: 0 auto !important; padding: 0 !important; overflow: hidden !important;
  background: var(--ar-cream) !important; color: var(--ar-ink) !important;
  border: 4px solid var(--ar-ink) !important; border-radius: 24px !important;
  box-shadow: 0 8px 0 var(--ar-ink), 0 18px 40px rgba(0, 0, 0, .28) !important;
}
/* --- en-tête : titre centré, pastilles (solde · appareillage), accroche ; croix à droite --- */
html body.ui-arcade #hud #shop-bar #shop-head {
  flex: 0 0 auto !important; display: flex !important; flex-direction: column !important; align-items: center !important;
  gap: 6px !important; padding: 14px 64px 12px !important; text-align: center !important;
  border-bottom: 3px solid rgba(26, 61, 85, .14) !important; background: none !important;
}
html body.ui-arcade #hud #shop-bar #shop-bar-title {
  order: 0 !important; display: block !important; position: static !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important; opacity: 1 !important; filter: none !important;
  color: var(--ar-ink) !important; font-size: clamp(18px, 3.2vw, 26px) !important; font-weight: 900 !important;
  line-height: 1.15 !important; letter-spacing: .02em !important; text-transform: uppercase !important; white-space: normal !important;
}
html body.ui-arcade #hud #shop-bar #shop-head-chips { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; }
html body.ui-arcade #hud #shop-bar #shop-bar-bal,
html body.ui-arcade #hud #shop-bar #shop-bar-dock {
  order: 0 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; position: static !important;
  margin: 0 !important; padding: 4px 12px !important; border-radius: 999px !important; opacity: 1 !important;
  font-size: 15px !important; font-weight: 900 !important; line-height: 1.2 !important; white-space: nowrap !important;
  color: var(--ar-ink) !important; background: #fff !important; border: 3px solid var(--ar-ink) !important; box-shadow: none !important;
  font-variant-numeric: tabular-nums !important;
}
html body.ui-arcade #hud #shop-bar #shop-bar-bal .shop-coin {
  display: inline-block !important; width: 14px !important; height: 14px !important; border-radius: 50% !important;
  background: radial-gradient(circle at 35% 35%, #fff, #cfe6f2 55%, #7fa6bd) !important; box-shadow: 0 0 0 2px rgba(26, 61, 85, .35) !important;
}
html body.ui-arcade #hud #shop-bar #shop-bar-dock[hidden] { display: none !important; }
html body.ui-arcade #hud #shop-bar #shop-bar-dock { font-size: 13px !important; font-weight: 800 !important; border-color: rgba(26, 61, 85, .35) !important; }
html body.ui-arcade #hud #shop-bar #shop-bar-dock.dock-warn { background: var(--ar-red) !important; border-color: #7a1414 !important; color: #fff !important; }
html body.ui-arcade #hud #shop-bar #shop-bar-hint {
  display: block !important; margin: 0 !important; padding: 0 !important; max-width: 640px !important;
  font-size: 13.5px !important; font-weight: 700 !important; line-height: 1.35 !important; color: var(--ar-ink) !important; opacity: .72 !important;
}
html body.ui-arcade #hud #shop-bar #shop-bar-hint:empty { display: none !important; }
html body.ui-arcade #hud #shop-bar .shop-bar-x {
  position: absolute !important; top: 12px !important; right: 12px !important; left: auto !important; z-index: 5 !important;
  width: 44px !important; height: 44px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 26px !important; font-weight: 900 !important; line-height: 1 !important; color: #fff !important;
  background: var(--ar-red) !important; border: 4px solid var(--ar-ink) !important; border-radius: 14px !important;
  box-shadow: 0 4px 0 var(--ar-ink) !important; transform: none !important; cursor: pointer !important;
}
html body.ui-arcade #hud #shop-bar .shop-bar-x:active { transform: translateY(3px) !important; box-shadow: 0 1px 0 var(--ar-ink) !important; }
/* --- corps défilant : un rayon = intertitre + grille --- */
html body.ui-arcade #hud #shop-bar #shop-bar-items {
  order: 0 !important; flex: 1 1 auto !important; min-height: 0 !important; width: 100% !important; max-width: none !important;
  display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important;
  justify-content: flex-start !important; gap: 14px !important; margin: 0 !important;
  padding: 14px 18px 18px !important; overflow-y: auto !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important;
}
html body.ui-arcade #hud #shop-bar .shop-sec { display: flex !important; flex-direction: column !important; flex: 0 0 auto !important; width: 100% !important; gap: 10px !important; margin: 0 !important; }
html body.ui-arcade #hud #shop-bar .shop-section {
  display: flex !important; align-items: baseline !important; justify-content: flex-start !important; flex-wrap: wrap !important;
  gap: 4px 10px !important; margin: 0 !important; padding: 0 2px 6px !important; flex-basis: auto !important;
  border: 0 !important; border-bottom: 3px solid var(--ar-orange) !important; border-radius: 0 !important; background: none !important;
  color: var(--ar-ink) !important; text-align: left !important;
}
html body.ui-arcade #hud #shop-bar .shop-section--fleet { border-bottom-color: var(--ar-blue) !important; }
html body.ui-arcade #hud #shop-bar .shop-section-ic { font-size: 18px !important; align-self: center !important; }
html body.ui-arcade #hud #shop-bar .shop-section b { font-size: 18px !important; font-weight: 900 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--ar-ink) !important; }
html body.ui-arcade #hud #shop-bar .shop-section small { font-size: 13px !important; font-weight: 700 !important; color: var(--ar-ink) !important; opacity: .65 !important; }
html body.ui-arcade #hud #shop-bar .shop-grid-items {
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)) !important;
  grid-auto-rows: 1fr !important; gap: 12px !important; margin: 0 !important; padding: 0 !important;
}
/* --- la carte --- */
html body.ui-arcade #hud #shop-bar .shop-card {
  position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important;
  width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important;
  padding: 10px 12px 12px !important; gap: 4px !important; text-align: center !important; opacity: 1 !important; filter: none !important;
  background: #fff !important; background-image: none !important; color: var(--ar-ink) !important;
  border: 3px solid var(--ar-ink) !important; border-radius: 18px !important; box-shadow: 0 4px 0 var(--ar-ink) !important;
  transform: none !important; transition: transform .1s ease, box-shadow .1s ease !important; animation: none !important;
}
html body.ui-arcade #hud #shop-bar .shop-card::before, html body.ui-arcade #hud #shop-bar .shop-card::after { display: none !important; }
html body.ui-arcade #hud #shop-bar .shop-card * { color: var(--ar-ink) !important; }
@media (hover: hover) {
  html body.ui-arcade #hud #shop-bar .shop-card.is-afford:hover { transform: translateY(-3px) !important; box-shadow: 0 7px 0 var(--ar-ink) !important; }
}
html body.ui-arcade #hud #shop-bar .shop-card .sc-top {
  display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; align-items: center !important; align-self: stretch !important;
  min-height: 20px !important; gap: 4px 6px !important; margin: 0 0 2px !important;
}
html body.ui-arcade #hud #shop-bar .shop-card .shop-cat,
html body.ui-arcade #hud #shop-bar .shop-card .shop-count {
  position: static !important; transform: none !important; display: inline-block !important; margin: 0 !important;
  padding: 2px 8px !important; border-radius: 999px !important; border: 0 !important; box-shadow: none !important;
  font-size: 11px !important; font-weight: 900 !important; letter-spacing: .06em !important; line-height: 1.3 !important; white-space: nowrap !important;
}
html body.ui-arcade #hud #shop-bar .shop-card .shop-cat { color: #fff !important; background: var(--ar-orange) !important; }
html body.ui-arcade #hud #shop-bar .shop-card--boost .shop-cat { background: #e0a400 !important; }
html body.ui-arcade #hud #shop-bar .shop-card--flotte .shop-cat { background: var(--ar-blue-d) !important; }
html body.ui-arcade #hud #shop-bar .shop-card--action .shop-cat { background: var(--ar-red) !important; }
html body.ui-arcade #hud #shop-bar .shop-card .shop-count { background: rgba(26, 61, 85, .1) !important; font-variant-numeric: tabular-nums !important; letter-spacing: 0 !important; }
html body.ui-arcade #hud #shop-bar .shop-card .shop-count:empty { display: none !important; }
html body.ui-arcade #hud #shop-bar .shop-card .shop-ic { display: block !important; font-size: 34px !important; line-height: 1.1 !important; margin: 0 !important; filter: none !important; }
html body.ui-arcade #hud #shop-bar .shop-card .sc-name { display: block !important; margin: 2px 0 0 !important; font-size: 16px !important; font-weight: 900 !important; line-height: 1.15 !important; }
html body.ui-arcade #hud #shop-bar .shop-card .sc-desc {
  display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important; overflow: hidden !important;
  min-height: 0 !important; margin: 0 !important; font-size: 12.5px !important; font-weight: 700 !important; line-height: 1.3 !important; opacity: .7 !important;
}
html body.ui-arcade #hud #shop-bar .shop-card .shop-starter {
  position: static !important; transform: none !important; display: inline-block !important; margin: 2px 0 0 !important;
  padding: 1px 8px !important; border-radius: 999px !important; border: 0 !important; box-shadow: none !important;
  font-size: 10.5px !important; font-weight: 900 !important; letter-spacing: .04em !important; line-height: 1.4 !important;
  color: var(--ar-green-d) !important; background: rgba(111, 208, 106, .22) !important; white-space: nowrap !important;
}
/* --- bouton-prix : toujours en bas, même taille partout, ≥ 44 px (doigt) --- */
html body.ui-arcade #hud #shop-bar .shop-card .sc-buy {
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important;
  align-self: stretch !important; width: 100% !important; min-height: 44px !important; margin: auto 0 0 !important; padding: 6px 10px !important;
  font-size: 16px !important; font-weight: 900 !important; letter-spacing: .02em !important; white-space: nowrap !important;
  color: #fff !important; background: var(--ar-green) !important; background-image: none !important; opacity: 1 !important;
  border: 3px solid var(--ar-green-d) !important; border-radius: 14px !important; box-shadow: 0 4px 0 var(--ar-green-d) !important;
  cursor: pointer !important; transform: none !important; transition: transform .08s ease, box-shadow .08s ease, filter .08s ease !important;
  touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important;
}
html body.ui-arcade #hud #shop-bar .shop-card .sc-buy * { color: inherit !important; }
html body.ui-arcade #hud #shop-bar .shop-card .sc-buy .shop-coin {
  display: inline-block !important; flex: 0 0 auto !important; width: 13px !important; height: 13px !important; border-radius: 50% !important;
  background: radial-gradient(circle at 35% 35%, #fff, #cfe6f2 55%, #7fa6bd) !important; box-shadow: 0 0 0 2px rgba(0, 0, 0, .18) !important;
}
@media (hover: hover) { html body.ui-arcade #hud #shop-bar .shop-card .sc-buy:not(:disabled):hover { filter: brightness(1.07) !important; } }
html body.ui-arcade #hud #shop-bar .shop-card .sc-buy:not(:disabled):active { transform: translateY(3px) !important; box-shadow: 0 1px 0 var(--ar-green-d) !important; }
html body.ui-arcade #hud #shop-bar .shop-card .sc-buy:focus-visible { outline: 4px solid var(--ar-yellow) !important; outline-offset: 2px !important; }
html body.ui-arcade #hud #shop-bar .shop-card .sc-buy:disabled { cursor: default !important; }
/* trop cher : carte normale, bouton crème au prix ROUGE (on voit ce qui manque) */
html body.ui-arcade #hud #shop-bar .shop-card.is-poor .sc-buy {
  color: #c62828 !important; background: var(--ar-cream) !important; border-color: rgba(26, 61, 85, .3) !important; box-shadow: 0 3px 0 rgba(26, 61, 85, .3) !important;
}
html body.ui-arcade #hud #shop-bar .shop-card.is-poor .sc-buy .shop-coin { opacity: .55 !important; }
/* au max / inutile : carte en retrait (pointillés), texte LISIBLE, bouton gris */
html body.ui-arcade #hud #shop-bar .shop-card.is-max { background: #f3efe4 !important; border-style: dashed !important; border-color: rgba(26, 61, 85, .45) !important; box-shadow: none !important; }
html body.ui-arcade #hud #shop-bar .shop-card.is-max .shop-ic { filter: grayscale(.7) !important; opacity: .75 !important; }
html body.ui-arcade #hud #shop-bar .shop-card.is-max .sc-buy {
  color: rgba(26, 61, 85, .7) !important; background: #e3e8ec !important; border-color: rgba(26, 61, 85, .25) !important; box-shadow: none !important;
}
html body.ui-arcade #hud #shop-bar .shop-card.is-max .sc-buy .shop-coin { display: none !important; }
/* en cours : « … » animé (verrou anti double achat) */
html body.ui-arcade #hud #shop-bar .shop-card .sc-buy.is-pending { color: transparent !important; position: relative !important; }
html body.ui-arcade #hud #shop-bar .shop-card .sc-buy.is-pending > * { visibility: hidden !important; }
html body.ui-arcade #hud #shop-bar .shop-card .sc-buy.is-pending::after {
  content: "" !important; position: absolute !important; left: 50% !important; top: 50% !important; width: 20px !important; height: 20px !important;
  margin: -10px 0 0 -10px !important; border-radius: 50% !important; border: 3px solid rgba(255, 255, 255, .45) !important; border-top-color: #fff !important;
  animation: shopSpin .7s linear infinite !important;
}
html body.ui-arcade #hud #shop-bar .shop-card.is-poor .sc-buy.is-pending::after,
html body.ui-arcade #hud #shop-bar .shop-card.is-max .sc-buy.is-pending::after { border-color: rgba(26, 61, 85, .25) !important; border-top-color: var(--ar-ink) !important; }
@keyframes shopSpin { to { transform: rotate(360deg); } }
/* acheté : flash vert */
html body.ui-arcade #hud #shop-bar .shop-card.is-bought { animation: shopBought 1s ease-out !important; }
@keyframes shopBought {
  0% { outline: 4px solid rgba(111, 208, 106, .95); outline-offset: 0; }
  100% { outline: 4px solid rgba(111, 208, 106, 0); outline-offset: 12px; }
}
html body.ui-arcade #hud #shop-bar .shop-card.is-bought .sc-buy { background: var(--ar-green-d) !important; color: #fff !important; }
/* --- toast d'achat (les bannières du HUD sont masquées pendant l'escale) --- */
html body.ui-arcade #hud #shop-bar #shop-toast {
  position: absolute !important; left: 50% !important; bottom: 16px !important; z-index: 6 !important;
  display: flex !important; align-items: center !important; gap: 8px !important; max-width: calc(100% - 32px) !important;
  padding: 8px 16px !important; border-radius: 999px !important; pointer-events: none !important;
  font-size: 15px !important; font-weight: 800 !important; white-space: nowrap !important; overflow: hidden !important;
  color: #fff !important; background: var(--ar-green-d) !important; border: 3px solid var(--ar-ink) !important; box-shadow: 0 4px 0 var(--ar-ink) !important;
  opacity: 0 !important; transform: translate(-50%, 12px) !important; transition: opacity .18s ease, transform .18s ease !important;
}
html body.ui-arcade #hud #shop-bar #shop-toast * { color: #fff !important; }
html body.ui-arcade #hud #shop-bar #shop-toast b { overflow: hidden !important; text-overflow: ellipsis !important; }
html body.ui-arcade #hud #shop-bar #shop-toast.show { opacity: 1 !important; transform: translate(-50%, 0) !important; }
html body.ui-arcade #hud #shop-bar #shop-toast .st-ok { font-weight: 900 !important; }
/* --- « Plus de perles » (recharge) à côté du solde --- */
html body.ui-arcade #hud #shop-bar #shop-bar-more {
  display: inline-flex !important; align-items: center !important; margin: 0 !important; padding: 4px 12px !important; min-height: 0 !important;
  font-size: 13px !important; font-weight: 900 !important; line-height: 1.2 !important; white-space: nowrap !important; cursor: pointer !important;
  color: var(--ar-ink-2) !important; background: var(--ar-yellow) !important; border: 3px solid var(--ar-ink-2) !important;
  border-radius: 999px !important; box-shadow: 0 3px 0 var(--ar-ink-2) !important; transform: none !important;
}
html body.ui-arcade #hud #shop-bar #shop-bar-more:active { transform: translateY(2px) !important; box-shadow: 0 1px 0 var(--ar-ink-2) !important; }
/* « Plus de perles » ouvre la Boutique PAR-DESSUS l'escale (#premium-panel z 44 < #shop-bar z 60) */
html body.ui-arcade.shop-open #premium-panel { z-index: 70 !important; }
/* --- « Il te manque N perles » (carte trop chère) --- */
html body.ui-arcade #hud #shop-bar .shop-card .sc-miss { display: block !important; margin: 2px 0 0 !important; font-size: 12px !important; font-weight: 800 !important; color: #c62828 !important; line-height: 1.2 !important; }
html body.ui-arcade #hud #shop-bar .shop-card .sc-miss:empty { display: none !important; }
/* --- toast « info » (refus du serveur) : encre, pas vert --- */
html body.ui-arcade #hud #shop-bar #shop-toast.is-info { background: var(--ar-ink) !important; }
/* --- onglets Arsenal / Flotte : téléphone seulement --- */
html body.ui-arcade #hud #shop-bar #shop-tabs { display: none !important; }
@media (max-width: 560px) {
  html body.ui-arcade #hud #shop-bar #shop-tabs:not([hidden]) {
    display: flex !important; flex: 0 0 auto !important; gap: 8px !important; margin: 0 !important; padding: 10px 10px 0 !important;
  }
  html body.ui-arcade #hud #shop-bar #shop-tabs button {
    flex: 1 1 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important;
    min-height: 44px !important; margin: 0 !important; padding: 0 10px !important; cursor: pointer !important;
    font-size: 16px !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: .04em !important;
    color: var(--ar-ink) !important; background: #fff !important; border: 3px solid rgba(26, 61, 85, .3) !important;
    border-radius: 14px !important; box-shadow: none !important; transform: none !important; touch-action: manipulation !important;
  }
  html body.ui-arcade #hud #shop-bar #shop-tabs button * { color: inherit !important; }
  html body.ui-arcade #hud #shop-bar #shop-tabs button.is-on { color: #fff !important; background: var(--ar-orange) !important; border-color: var(--ar-orange-d) !important; box-shadow: 0 3px 0 var(--ar-orange-d) !important; }
  html body.ui-arcade #hud #shop-bar #shop-tabs button[data-tab="fleet"].is-on { background: var(--ar-blue) !important; border-color: var(--ar-blue-d) !important; box-shadow: 0 3px 0 var(--ar-blue-d) !important; }
  /* un seul rayon visible ; l'onglet remplace l'intertitre */
  html body.ui-arcade #hud #shop-bar #shop-bar-items[data-tab="arsenal"] .shop-sec:not(.shop-sec--arsenal),
  html body.ui-arcade #hud #shop-bar #shop-bar-items[data-tab="fleet"] .shop-sec:not(.shop-sec--fleet),
  html body.ui-arcade #hud #shop-bar #shop-bar-items[data-tab] .shop-section { display: none !important; }
}
/* --- petits écrans --- */
@media (max-width: 560px) {
  html body.ui-arcade #hud #shop-bar { padding: max(6px, env(safe-area-inset-top, 0px)) 6px max(6px, env(safe-area-inset-bottom, 0px)) !important; }
  html body.ui-arcade #hud #shop-bar #shop-box { border-radius: 20px !important; border-width: 3px !important; height: 100% !important; }
  html body.ui-arcade #hud #shop-bar #shop-head { padding: 10px 56px 10px 14px !important; }
  html body.ui-arcade #hud #shop-bar #shop-bar-hint { font-size: 12.5px !important; }
  html body.ui-arcade #hud #shop-bar .shop-bar-x { top: 8px !important; right: 8px !important; }
  html body.ui-arcade #hud #shop-bar #shop-bar-items { padding: 10px 10px 72px !important; }
  html body.ui-arcade #hud #shop-bar .shop-grid-items { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  html body.ui-arcade #hud #shop-bar .shop-card { padding: 8px 8px 10px !important; }
  html body.ui-arcade #hud #shop-bar .shop-card .shop-ic { font-size: 28px !important; }
  html body.ui-arcade #hud #shop-bar .shop-card .sc-name { font-size: 14.5px !important; }
  html body.ui-arcade #hud #shop-bar .shop-card .sc-desc { font-size: 12px !important; }
  html body.ui-arcade #hud #shop-bar .shop-card .sc-buy { font-size: 15px !important; padding: 6px 6px !important; }
}
@media (max-height: 520px) {
  html body.ui-arcade #hud #shop-bar { padding: 6px max(10px, env(safe-area-inset-right, 0px)) 6px max(10px, env(safe-area-inset-left, 0px)) !important; }
  html body.ui-arcade #hud #shop-bar #shop-box { height: 100% !important; }
  html body.ui-arcade #hud #shop-bar #shop-head { padding: 8px 60px 8px !important; gap: 4px !important; }
  html body.ui-arcade #hud #shop-bar #shop-bar-hint { display: none !important; }
  html body.ui-arcade #hud #shop-bar #shop-bar-items { padding: 10px 12px 60px !important; }
  html body.ui-arcade #hud #shop-bar .shop-grid-items { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; }
  html body.ui-arcade #hud #shop-bar .shop-card .sc-desc { -webkit-line-clamp: 2 !important; }
}

/* ---------- 10. MENU ☰ EN JEU : bouton jouet + 4 entrées max ---------- */
html body.ui-arcade #hud #btn-hud-menu, html body.ui-arcade #hud #btn-mute,
html body.ui-arcade #hud .mob-toggle {
  background: var(--ar-cream) !important; background-image: none !important; color: var(--ar-ink) !important;
  border: 3px solid var(--ar-ink) !important; border-radius: 12px !important; box-shadow: 0 4px 0 var(--ar-ink) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html body.ui-arcade #hud #btn-hud-menu:active, html body.ui-arcade #hud #btn-mute:active { transform: translateY(3px) !important; box-shadow: 0 1px 0 var(--ar-ink) !important; }
html body.ui-arcade #hud #hud-menu {
  background: var(--ar-cream) !important; background-image: none !important; border: 4px solid var(--ar-ink) !important;
  border-radius: 18px !important; box-shadow: 0 6px 0 var(--ar-ink) !important; padding: 6px !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html body.ui-arcade #hud #hud-menu button {
  background: transparent !important; color: var(--ar-ink) !important; border: 0 !important; border-radius: 12px !important;
  font-weight: 900 !important; text-shadow: none !important; box-shadow: none !important;
}
html body.ui-arcade #hud #hud-menu button:hover, html body.ui-arcade #hud #hud-menu button:focus-visible { background: rgba(47,182,255,.18) !important; }
html body.ui-arcade #hud #hud-menu .hm-ic {
  background: var(--ar-blue) !important; color: #fff !important; border: 2px solid var(--ar-blue-d) !important; border-radius: 50% !important;
}
html body.ui-arcade #hud #hud-menu kbd { background: #fff !important; color: var(--ar-ink) !important; border: 2px solid var(--ar-ink) !important; border-radius: 6px !important; box-shadow: none !important; }
html body.ui-arcade #hud #hud-menu .hm-danger { color: #b81f1f !important; }
html body.ui-arcade #hud #hud-menu .hm-danger .hm-ic { background: var(--ar-red) !important; border-color: #7a1414 !important; }
/* 4 entrées : Emojis, Flotte, Paramètres, Quitter (PC). L'arbre a [Y]/[U], les améliorations
   s'ouvrent seules quand il y a des points, le thème et « une idée ? » vivent dans Paramètres.
   Tactile : Améliorations remplace Emojis (le tactile a son bouton d'émoji, #tc-emoji). */
html body.ui-arcade #hud #hud-menu [data-hud-act="tree"],
html body.ui-arcade #hud #hud-menu [data-hud-act="theme"],
html body.ui-arcade #hud #hud-menu [data-hud-act="feedback"],
html body.ui-arcade:not(.vtouch) #hud #hud-menu [data-hud-act="stats"],
html body.ui-arcade.vtouch #hud #hud-menu [data-hud-act="emoji"] { display: none !important; }

/* ---------- 11. PASTILLES RESTANTES : armement, boosts ---------- */
html body.ui-arcade #hud #arm-slots .arm-slot {
  background: var(--ar-cream) !important; background-image: none !important; color: var(--ar-ink) !important;
  border: 3px solid var(--ar-ink) !important; border-radius: 14px !important; box-shadow: 0 4px 0 var(--ar-ink) !important;
}
html body.ui-arcade #hud #arm-slots .arm-slot * { color: var(--ar-ink) !important; text-shadow: none !important; }
html body.ui-arcade #hud #arm-slots .arm-slot.selected, html body.ui-arcade #hud #arm-slots .arm-slot.active, html body.ui-arcade #hud #arm-slots .arm-slot.sel {
  background: var(--ar-yellow) !important; border-color: var(--ar-ink-2) !important; box-shadow: 0 4px 0 var(--ar-ink-2) !important;
}
html body.ui-arcade #hud #arm-slots .arm-n { background: var(--ar-orange) !important; color: #fff !important; border: 2px solid var(--ar-orange-d) !important; border-radius: 999px !important; }
html body.ui-arcade #hud #arm-tip { background: var(--ar-cream) !important; color: var(--ar-ink) !important; border: 3px solid var(--ar-ink) !important; border-radius: 12px !important; box-shadow: 0 3px 0 var(--ar-ink) !important; }
html body.ui-arcade #hud #boost-hud, html body.ui-arcade #hud #boost-dock { background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; }
html body.ui-arcade #hud #boost-hud > *, html body.ui-arcade #hud #boost-dock .boost-dock-btn {
  background: var(--ar-cream) !important; background-image: none !important; color: var(--ar-ink) !important;
  border: 3px solid var(--ar-ink) !important; border-radius: 999px !important; box-shadow: 0 3px 0 var(--ar-ink) !important; text-shadow: none !important;
}
html body.ui-arcade #hud #boost-hud > * *, html body.ui-arcade #hud #boost-dock .boost-dock-btn * { color: var(--ar-ink) !important; }
html body.ui-arcade #hud #weapon-chip, html body.ui-arcade #hud #quest-chip, html body.ui-arcade #hud #power-chip {
  background: var(--ar-cream) !important; background-image: none !important; color: var(--ar-ink) !important;
  border: 3px solid var(--ar-ink) !important; border-radius: 999px !important; box-shadow: 0 3px 0 var(--ar-ink) !important; text-shadow: none !important;
  backdrop-filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html body.ui-arcade #hud #shipyard-bar .sy-card { transition: none !important; }
}

/* PSEUDO VIP (grade Grand Amiral) : couleur or + graisse + liseré sombre, classement et barre d'XP. */
html body #hud #lb-list li .lb-name.vip, html body #hud #xpbar-name.vip,
html body.ui-arcade #hud #lb-list li .lb-name.vip, html body.ui-arcade #hud #xpbar-name.vip {
  color: var(--vipc, #ffd24a) !important; font-weight: 900 !important;
  text-shadow: 0 0 6px color-mix(in srgb, var(--vipc, #ffd24a) 55%, transparent), 0 1px 0 rgba(20,12,0,0.85), 0 -1px 0 rgba(20,12,0,0.6) !important;
}
html body #hud #lb-list li.me .lb-name.vip, html body.ui-arcade #hud #lb-list li.me .lb-name.vip { color: inherit !important; text-shadow: none !important; }

/* CLASSEMENT : rang réel devant chaque ligne (médailles 1-3), largeur stable, pseudos tronqués. Le ::before des
   thèmes est masqué : le rang vit maintenant dans le balisage (.lb-rk), lisible même en interface épurée. */
html body #hud #lb-list li::before, html body.ui-arcade #hud #lb-list li::before,
html body.in-game.in-game #hud #leaderboard #lb-list li::before { display: none !important; content: none !important; }
html body #hud #lb-list li { display: flex !important; align-items: center !important; gap: 6px !important; }
html body #hud #lb-list li .lb-rk {
  flex: 0 0 auto !important; min-width: 22px !important; text-align: center !important;
  font-weight: 800 !important; font-size: 12px !important; font-variant-numeric: tabular-nums !important; opacity: .95;
}
html body #hud #lb-list li .lb-name { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
html body #hud #lb-list li > span:last-child { flex: 0 0 auto !important; font-variant-numeric: tabular-nums !important; }