/* ================= « Ville vivante » (ui/ville.js, sim/ville.js, sim/metro.js) ================= */
#ville-hud { position: fixed; right: calc(var(--u) * 4); top: calc(var(--top-b, var(--u) * 20) + var(--u) * 4); width: calc(var(--u) * 78); display: none; pointer-events: none; z-index: 3;
  font: calc(var(--u) * 4.2)/1.3 'Pixelify', monospace; padding: calc(var(--u) * 3) calc(var(--u) * 4) calc(var(--u) * 3.5); color: var(--paper); }
#ville-hud.show { display: block; }
body:not([data-scene="game"]):not([data-scene="netgame"]) #ville-hud { display: none !important; }
body:has(#phone.open) #ville-hud { right: calc(var(--u-phone, var(--u)) * 86); }
#ville-hud .vv-k { font: calc(var(--u) * 4.2)/1.2 'Silk', monospace; color: var(--sun); margin-bottom: calc(var(--u) * 1); }
#ville-hud .vv-n b { font: calc(var(--u) * 6)/1 'Silk', monospace; color: var(--paper); font-weight: 400; }
#ville-hud .vv-n span { color: var(--dim); }
#ville-hud .vv-n span b { font-size: calc(var(--u) * 4.4); color: var(--green); }
#ville-hud .vv-bruit { display: flex; align-items: center; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 1.5); font: calc(var(--u) * 3.4)/1 'Silk', monospace; color: var(--dim); }
#ville-hud .vv-bruit i { display: flex; gap: calc(var(--u) * .8); }
#ville-hud .vv-bruit i b, #ville-hud .vv-bruit i u { display: block; width: calc(var(--u) * 3); height: calc(var(--u) * 3); background: var(--orange); box-shadow: 0 0 0 calc(var(--u) * .6) var(--ink); text-decoration: none; }
#ville-hud .vv-bruit i u { background: var(--bg2); }
#ville-hud .vv-next { margin-top: calc(var(--u) * 1.5); color: var(--green); }
#ville-hud .vv-pol { margin-top: calc(var(--u) * 1); font: calc(var(--u) * 3.4)/1.2 'Silk', monospace; color: #8fb4ff; }
/* le métro : consigne en bas de l'écran */
#metro-hint { position: fixed; left: 50%; bottom: calc(var(--u) * 26); transform: translateX(-50%); display: none; pointer-events: none; z-index: 3; max-width: calc(var(--u) * 170);
  font: calc(var(--u) * 4.4)/1.3 'Pixelify', monospace; padding: calc(var(--u) * 2.5) calc(var(--u) * 4); color: var(--paper); text-align: center; }
#metro-hint.show { display: block; }
#metro-hint b { color: var(--sun); font-weight: 400; }
body:not([data-scene="game"]) #metro-hint { display: none !important; }
#metro-fade { position: fixed; inset: 0; background: #08070c; opacity: 0; pointer-events: none; z-index: 20; }
#metro-fade .mf-t { position: absolute; left: 0; right: 0; top: 44%; text-align: center; font: calc(var(--u) * 7)/1.2 'Silk', monospace; color: var(--paper); }
#metro-fade .mf-s { position: absolute; left: 0; right: 0; top: 54%; text-align: center; font: calc(var(--u) * 4.4)/1.2 'Pixelify', monospace; color: var(--dim); }
/* réglages et récap */
#ville-box { width: calc(var(--u) * 190); }
#ville-best { margin: calc(var(--u) * 3) 0 0; font-size: calc(var(--u) * 4); }
#villefin-box { width: calc(var(--u) * 210); }
#villefin-box h2.win { color: var(--sun); }
#villefin-box h2.lose { color: #ffb3a8; }
#villefin-box .vf-cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: calc(var(--u) * 5); margin: calc(var(--u) * 2) 0; }
#villefin-box .vf-recap p { margin: 0 0 calc(var(--u) * 1.6); font-size: calc(var(--u) * 4.2); line-height: 1.3; }
#villefin-box .vf-recap b { color: var(--sun); font-weight: 400; }
#villefin-box .vf-time { list-style: none; margin: 0; padding: 0; font-size: calc(var(--u) * 3.8); color: var(--dim); max-height: calc(var(--u) * 70); overflow: hidden; }
#villefin-box .vf-time li { margin: 0 0 calc(var(--u) * .8); }
#villefin-box .vf-time li span { display: inline-block; width: calc(var(--u) * 20); color: var(--paper); font-family: 'Silk', monospace; font-size: calc(var(--u) * 3.2); }
@media (max-width: 760px) { #villefin-box .vf-cols { grid-template-columns: 1fr; } }
/* chez un client du multijoueur, sous le panneau de la partie */
body[data-scene="netgame"] #ville-hud { top: auto; bottom: calc(var(--u) * 46); }