/* v13: HUD mais limpo. Por baixo do mapa: mapa · mochila · vista; depois uma linha de pílulas (dinheiro + fome, faíscas). */
#hudbtns { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:8px; }
#hudbtns button { width:auto; height:42px; border-radius:12px; }
#hudbtns button small { font-size:8.5px; }
#chips { display:flex; gap:6px; margin-top:6px; align-items:stretch; }
#wallet { flex:1; min-width:0; display:flex; align-items:center; gap:8px; margin:0; padding:5px 10px; border-radius:999px; }
#wallet .money { gap:5px; flex:none; }
#wallet .coin { width:16px; height:16px; font-size:9px; }
#wallet .money b { font-size:14px; }
#energy { flex:1; min-width:0; margin:0; gap:4px; }
#energy .bolt, #energy .bolt svg { width:13px; height:13px; }
#energy .bolt svg { fill:none; stroke:var(--ocre2,#ffd257); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; filter:none; }
#energy .bar { height:6px; border-radius:3px; min-width:28px; }
#energy .bar i { border-radius:3px; box-shadow:none; }
#energy .bar::after { display:none; }
#wallet .elabel { display:none; }
#wallet.low #energy .bolt svg { stroke:#ff8a7a; fill:none; }
#sparks { margin:0; padding:5px 9px; font-size:0; gap:4px; flex:none; }
#sparks .st, #sparks b { font-size:12px; }
#wallet .delta { top:-16px; }
@media (max-height:500px) {
  #hudbtns { gap:4px; margin-top:6px; } #hudbtns button { height:36px; } #hudbtns button small { display:none; }
  #chips { margin-top:4px; gap:4px; flex-wrap:wrap; } #chips #wallet { flex-basis:100%; } #chips #sparks { flex:1; justify-content:center; } #wallet { padding:3px 8px; gap:6px; } #wallet .money b { font-size:12.5px; } #sparks { padding:3px 7px; } #sparks .st, #sparks b { font-size:11px; }
}
body.touch.driving #chips { display:none; }