/* ================= « Tenir la rue » et panneau de combat (ui/baston.js) ================= */
#cbt-hud { right: calc(var(--u) * 4); bottom: calc(var(--u) * 46); width: calc(var(--u) * 92); display: none; pointer-events: none; z-index: 3;
  font: calc(var(--u) * 4.2)/1.25 'Pixelify', monospace; padding: calc(var(--u) * 3) calc(var(--u) * 4) calc(var(--u) * 3.5); }
#cbt-hud.show { display: block; }
body:not([data-scene="game"]):not([data-scene="netgame"]) #cbt-hud { display: none !important; }
body:has(#phone.open) #cbt-hud { right: calc(var(--u-phone, var(--u)) * 86); }
/* l'aperçu des messages du téléphone passe au-dessus du panneau : on le décale ; dans « Tenir la rue », on le tait */
body:has(#phone-toast.show) #cbt-hud { bottom: calc(var(--u) * 64); }
body.baston-on #phone-toast { display: none !important; }
/* la fête de la victoire : on dégage l'écran */
body.baston-party #cbt-hud, body.baston-party #menu, body.baston-party #log, body.baston-party #hud-item, body.baston-party #keyhint { display: none !important; }
#cbt-hud .cb-title { font: calc(var(--u) * 4.2)/1.2 'Silk', monospace; color: var(--sun); text-transform: uppercase; margin-bottom: calc(var(--u) * 1.5); }
#cbt-hud .cb-obj { color: var(--paper); margin-bottom: calc(var(--u) * 1.5); }
#cbt-hud .cb-obj.done { color: var(--green); }
#cbt-hud .cb-row { display: grid; grid-template-columns: calc(var(--u) * 27) 1fr auto; align-items: center; gap: calc(var(--u) * 2); margin: calc(var(--u) * 1) 0; }
#cbt-hud .cb-row > span { font: calc(var(--u) * 3.4)/1 'Silk', monospace; color: var(--dim); text-transform: uppercase; }
#cbt-hud .cb-row > b { font-weight: 400; color: var(--paper); text-align: right; }
#cbt-hud .cb-row.bloc { grid-template-columns: calc(var(--u) * 27) auto 1fr; }
#cbt-hud .cb-row.bloc em { font-style: normal; color: var(--sun); text-align: right; }
#cbt-hud .cb-row.fronts { grid-template-columns: calc(var(--u) * 27) 1fr; }
#cbt-hud .cb-bar { display: block; height: calc(var(--u) * 3); background: var(--ink); box-shadow: 0 0 0 var(--u) var(--ink); position: relative; }
#cbt-hud .cb-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--green); transition: width .2s steps(4); }
#cbt-hud .cb-bar.crs i { background: #5a8cff; }
#cbt-hud .cb-bar.hold i { background: var(--sun); }
#cbt-hud .cb-bar.coh i { background: var(--orange); }
#cbt-hud .lives i { display: inline-block; width: calc(var(--u) * 4); height: calc(var(--u) * 4); margin-left: var(--u); background: var(--hi); box-shadow: 0 0 0 var(--u) var(--ink); }
#cbt-hud .lives i.on { background: var(--red); }
#cbt-hud .pills { display: flex; gap: calc(var(--u) * 1.5); justify-content: flex-end; flex-wrap: wrap; }
#cbt-hud .pills i { display: block; width: calc(var(--u) * 4); height: calc(var(--u) * 4); box-shadow: 0 0 0 var(--u) var(--ink); background: #e8e4da; }
#cbt-hud .pills i.foule { background: var(--sun); }
#cbt-hud .pills i.crs { background: #5a8cff; }
#cbt-hud .pills i.dispute { background: repeating-linear-gradient(90deg, #e8e4da 0 var(--u), #5a8cff var(--u) calc(var(--u) * 2)); }
#cbt-hud .pills i.place { width: calc(var(--u) * 7); }
#cbt-hud .cb-keys { font-size: calc(var(--u) * 3.6); color: var(--dim); margin: calc(var(--u) * .5) 0 calc(var(--u) * 1); }
#cbt-hud .cb-keys kbd { min-width: calc(var(--u) * 5); font-size: calc(var(--u) * 3.4); margin: 0 calc(var(--u) * .8) 0 calc(var(--u) * 1); }
#cbt-hud .cb-row.idle .cb-bar i { background: var(--dim); }
#cbt-hud .cb-hint { font-size: calc(var(--u) * 3.4); color: var(--dim); margin: 0 0 calc(var(--u) * 1); }
#cbt-hud .cb-row.warn > span, #cbt-hud .cb-row.warn > b { color: var(--red); }
#cbt-hud .cb-bar.warn i { background: var(--red); }
#cbt-hud .cb-score { margin-top: calc(var(--u) * 1.5); text-align: right; font: calc(var(--u) * 4.4)/1 'Silk', monospace; color: var(--sun); }

/* réglages et score */
#baston-box { width: calc(var(--u) * 190); }
#baston-best { margin: calc(var(--u) * 3) 0 0; font-size: calc(var(--u) * 4); }
#bastonfin-box { width: calc(var(--u) * 170); }
#bastonfin-box h2.win { color: var(--sun); }
#bastonfin-box h2.lose { color: #ffb3a8; }
.bf-table { width: 100%; border-collapse: collapse; margin: calc(var(--u) * 2) 0; font-size: calc(var(--u) * 4.4); }
.bf-table td { padding: calc(var(--u) * 1) calc(var(--u) * 2); background: var(--bg2); border-bottom: var(--u) solid var(--bg); }
.bf-table td:nth-child(2), .bf-table td:nth-child(3) { text-align: right; width: calc(var(--u) * 22); }
.bf-table tr.k td { color: var(--dim); }
.bf-table tr.tot td { font: calc(var(--u) * 5.4)/1.2 'Silk', monospace; color: var(--sun); background: #3d3456; }
.bf-best { text-align: right; color: var(--dim); margin-bottom: calc(var(--u) * 3); }
.bf-best.rec { color: var(--green); font-family: 'Silk', monospace; }