/* ================= Multijoueur : salon, HUD réseau, chat, bilan commun =================
   Style pixel comme ui/menu.css : panneaux .px, var(--u), Pixelify (texte) et Silk (titres), aplats et trames. */

/* le HUD du jeu s'affiche aussi pour un client */
body[data-scene="netgame"] :is(#status, #log, #keyhint) { display: block !important; }
body[data-scene="netgame"] #top { display: flex !important; }
body[data-scene="netgame"] #menu.show, body[data-scene="netgame"] #keys.show, body[data-scene="netgame"] #perf-panel.show { display: block !important; }
body[data-scene="netgame"] #encircle.show, body[data-scene="netgame"] #hidden-banner.show { display: block !important; }
#net-panel, #net-chat, #net-say, #net-state { display: none; }
body:is([data-scene="netgame"], [data-scene="game"].net-on) #net-panel { display: block; }
body:is([data-scene="netgame"], [data-scene="game"].net-on) #net-chat { display: flex; }
#net-say.show { display: block !important; }
#net-state.show { display: block; }

/* ---------- salon ---------- */
#lobby-box { width: min(calc(var(--u) * 250), 94vw); max-height: 92vh; overflow: auto; }
#lobby-box h2 .lb-exp { font-size: calc(var(--u) * 4); color: var(--sun); text-shadow: none; vertical-align: middle; margin-left: calc(var(--u) * 2); padding: 0 var(--u); box-shadow: inset 0 0 0 var(--u) var(--sun); }
.lb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 6); margin-top: calc(var(--u) * 3); }
.lb-col { display: flex; flex-direction: column; gap: calc(var(--u) * 2); min-width: 0; }
.lb-lab { font: calc(var(--u) * 3.8)/1 'Silk', monospace; color: var(--dim); margin-top: calc(var(--u) * 2); }
.lb-in { font: calc(var(--u) * 5.2)/1.2 'Pixelify', monospace; color: var(--paper); background: var(--ink); border: 0; outline: 0; padding: calc(var(--u) * 1.5) calc(var(--u) * 2.5);
  box-shadow: inset 0 0 0 var(--u) var(--hi); width: 100%; user-select: text; }
.lb-in:focus { box-shadow: inset 0 0 0 var(--u) var(--sun); }
.lb-row { display: flex; gap: calc(var(--u) * 2); align-items: stretch; }
.lb-row .mi { width: auto; margin: 0; }
.lb-code { width: calc(var(--u) * 34); text-transform: uppercase; font-family: 'Silk', monospace; letter-spacing: var(--u); }
#lb-rooms { display: flex; flex-direction: column; gap: var(--u); max-height: calc(var(--u) * 70); overflow: auto; }
.lb-room { display: grid; grid-template-columns: calc(var(--u) * 22) 1fr auto auto; gap: calc(var(--u) * 3); align-items: center; text-align: left; border: 0; cursor: pointer;
  font: calc(var(--u) * 4.4)/1.2 'Pixelify', monospace; color: var(--paper); background: var(--bg2); padding: calc(var(--u) * 1.5) calc(var(--u) * 3); box-shadow: inset 0 0 0 var(--u) var(--ink); }
.lb-room:hover { background: var(--hi); }
.lb-room b { font: calc(var(--u) * 5)/1 'Silk', monospace; color: var(--sun); }
.lb-live { color: var(--red); font-family: 'Silk', monospace; font-size: calc(var(--u) * 3.4); }
.lb-none { padding: calc(var(--u) * 3) 0; }
.lb-refresh { width: auto; align-self: flex-start; font-size: calc(var(--u) * 4); padding-top: var(--u); padding-bottom: var(--u); }
.lb-err { color: #ffb4a8; margin: calc(var(--u) * 3) 0 0; }
.lb-wait { color: var(--dim); margin: calc(var(--u) * 6) 0; }
.lb-code-big { font: calc(var(--u) * 5)/1.3 'Silk', monospace; margin-top: calc(var(--u) * 2); }
.lb-code-big b { font-size: calc(var(--u) * 11); color: var(--sun); letter-spacing: calc(var(--u) * 1.5); text-shadow: var(--u) var(--u) 0 var(--ink); margin: 0 calc(var(--u) * 2); }
.lb-code-big .dim { font: calc(var(--u) * 4)/1.3 'Pixelify', monospace; }
#lb-players { display: flex; flex-direction: column; gap: var(--u); }
.lb-pl { display: grid; grid-template-columns: calc(var(--u) * 4) 1fr auto auto auto; gap: calc(var(--u) * 2.5); align-items: center; background: var(--bg2); padding: var(--u) calc(var(--u) * 3); box-shadow: inset 0 0 0 var(--u) var(--ink); }
.lb-pl.me { box-shadow: inset 0 0 0 var(--u) var(--sun); }
.lb-pl i, .np-pl i, .ne-tab i { display: block; width: calc(var(--u) * 4); height: calc(var(--u) * 4); box-shadow: 0 0 0 var(--u) var(--ink); }
.lb-pl b { color: var(--paper); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-host { font: calc(var(--u) * 3.2)/1 'Silk', monospace; color: var(--ink); background: var(--sun); padding: calc(var(--u) * .5) var(--u); }
.lb-ok { color: var(--green); font-family: 'Silk', monospace; font-size: calc(var(--u) * 3.6); }
.lb-off { color: var(--red); font-family: 'Silk', monospace; font-size: calc(var(--u) * 3.4); }
#lb-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--u) * 15), 1fr)); gap: calc(var(--u) * 1.5); }
.lb-role { display: flex; flex-direction: column; align-items: center; gap: var(--u); padding: calc(var(--u) * 1.5) 0; border: 0; cursor: pointer; background: var(--bg2); color: var(--paper);
  box-shadow: inset 0 0 0 var(--u) var(--ink), 0 var(--u) 0 var(--ink); font: calc(var(--u) * 3.2)/1 'Silk', monospace; }
.lb-role canvas { image-rendering: pixelated; height: calc(var(--u) * 22); }
.lb-role:hover { background: var(--hi); }
.lb-role.on { background: #3d3456; box-shadow: inset 0 0 0 var(--u) var(--sun), 0 var(--u) 0 var(--ink); }
.lb-role.on b { color: var(--sun); }
.lb-pitch { font-size: calc(var(--u) * 4.2); color: var(--dim); min-height: calc(var(--u) * 11); }
.lb-conf { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2) calc(var(--u) * 5); font: calc(var(--u) * 3.6)/1.6 'Silk', monospace; color: var(--dim); }
.lb-conf b { color: var(--paper); font-family: 'Pixelify', monospace; font-size: calc(var(--u) * 4.6); font-weight: 400; }
.lb-mini { font: calc(var(--u) * 3.6)/1 'Silk', monospace; padding: calc(var(--u) * .8) calc(var(--u) * 1.5); margin-left: var(--u); }
#lb-chat { height: calc(var(--u) * 82); overflow: auto; background: var(--ink); padding: calc(var(--u) * 2) calc(var(--u) * 3); box-shadow: inset 0 0 0 var(--u) var(--hi); font-size: calc(var(--u) * 4.4); user-select: text; }
#lb-chat div, #net-chat div { margin: calc(var(--u) * .5) 0; overflow-wrap: anywhere; }
#lb-chat b, #net-chat b { color: var(--sun); font-weight: 400; }
#lb-chat .sys, #net-chat .sys { color: var(--dim); }
#lb-chat .quick, #net-chat .quick { color: var(--orange); }
.lb-quick { display: flex; flex-wrap: wrap; gap: var(--u); }
.lb-quick .lb-mini { margin: 0; font-family: 'Pixelify', monospace; font-size: calc(var(--u) * 4); }

/* ---------- en partie ---------- */
#net-panel { right: calc(var(--u) * 4); top: calc(var(--u) * 20); width: calc(var(--u) * 92); font-size: calc(var(--u) * 4); padding: calc(var(--u) * 2.5) calc(var(--u) * 3); }
.np-head { display: flex; justify-content: space-between; font: calc(var(--u) * 3.8)/1.4 'Silk', monospace; color: var(--sun); margin-bottom: var(--u); }
.np-head b { font-weight: 400; }
.np-pl { display: grid; grid-template-columns: calc(var(--u) * 4) 1fr auto calc(var(--u) * 14); grid-template-rows: auto auto; gap: 0 calc(var(--u) * 2); align-items: center; padding: calc(var(--u) * .7) 0; }
.np-pl.me b { color: var(--sun); }
.np-pl b { font-weight: 400; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.np-pl .dim { font: calc(var(--u) * 3)/1 'Silk', monospace; }
.np-pl em { display: block; height: calc(var(--u) * 2); background: var(--ink); position: relative; }
.np-pl em::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--v); background: var(--red); }
.np-pl > span:last-child:not(.dim) { grid-column: 2 / 5; }
.np-bad { color: var(--red); font: calc(var(--u) * 3.2)/1.2 'Silk', monospace; animation: blink .5s steps(2) infinite; }
.np-goals { margin-top: calc(var(--u) * 1.5); padding-top: calc(var(--u) * 1.5); box-shadow: 0 calc(var(--u) * -1) 0 var(--hi); font-size: calc(var(--u) * 3.8); }
.np-goals b { color: var(--sun); font-weight: 400; }
.np-done { color: var(--green); } .np-fail { color: #ffb4a8; }
.np-stat { margin-top: calc(var(--u) * 1.5); font: calc(var(--u) * 2.9)/1.3 'Silk', monospace; color: var(--dim); }
#net-chat { position: fixed; left: calc(var(--u) * 4); bottom: calc(var(--u) * 52); width: min(calc(var(--u) * 150), 40vw); flex-direction: column; gap: var(--u); pointer-events: none; font-size: calc(var(--u) * 4.4); }
#net-chat div { background: rgba(20, 16, 24, .82); padding: calc(var(--u) * .5) calc(var(--u) * 2.5); width: fit-content; box-shadow: inset 0 0 0 var(--u) var(--ink); }
#net-say { position: fixed; left: calc(var(--u) * 4); bottom: calc(var(--u) * 44); width: min(calc(var(--u) * 150), 40vw); z-index: 12; }
#net-state { top: 30%; background: var(--red); color: #fff; padding: calc(var(--u) * 1.5) calc(var(--u) * 5); font: calc(var(--u) * 5)/1.4 'Silk', monospace; text-align: center; }
#net-pause .panel { width: calc(var(--u) * 140); }

/* ---------- bilan commun ---------- */
#netend-box { width: min(calc(var(--u) * 260), 96vw); max-height: 94vh; overflow: auto; }
.ne-team { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u) * 6); align-items: center; margin: calc(var(--u) * 3) 0; padding: calc(var(--u) * 3) calc(var(--u) * 4); background: var(--bg2); box-shadow: inset 0 0 0 var(--u) var(--ink); }
.ne-pts { display: flex; flex-direction: column; align-items: center; font: calc(var(--u) * 3.6)/1 'Silk', monospace; color: var(--dim); }
.ne-pts b { font-size: calc(var(--u) * 14); color: var(--sun); font-weight: 400; text-shadow: var(--u) var(--u) 0 var(--ink); margin: var(--u) 0; }
.ne-goals { display: flex; flex-direction: column; gap: var(--u); font-size: calc(var(--u) * 4.6); }
.ne-goals b { color: var(--sun); font-weight: 400; }
.ne-tab { width: 100%; border-collapse: collapse; font-size: calc(var(--u) * 4.4); margin: calc(var(--u) * 2) 0; }
.ne-tab th { font: calc(var(--u) * 3)/1.4 'Silk', monospace; color: var(--dim); text-align: left; font-weight: 400; padding: var(--u) calc(var(--u) * 1.5); }
.ne-tab td { padding: var(--u) calc(var(--u) * 1.5); box-shadow: 0 var(--u) 0 var(--bg2); }
.ne-tab tr.me td { color: var(--sun); }
.ne-tab td b { color: var(--sun); font-weight: 400; }
.ne-awards { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2) calc(var(--u) * 6); font: calc(var(--u) * 3.4)/1.5 'Silk', monospace; color: var(--dim); margin: calc(var(--u) * 2) 0; }
.ne-awards b { font: calc(var(--u) * 4.4)/1.3 'Pixelify', monospace; color: var(--paper); font-weight: 400; margin-left: var(--u); }
#netend-box .faits { margin: calc(var(--u) * 2) 0; padding-left: calc(var(--u) * 5); font-size: calc(var(--u) * 4.4); }
.ne-vs { margin-top: calc(var(--u) * 2); } .ne-pts b.ne-crs { color: var(--blue); }
.ne-crsline { font-size: calc(var(--u) * 4); color: var(--dim); margin: var(--u) 0; } .ne-crsline b { color: var(--blue); font-weight: 400; }
body[data-scene="netgame"] #hud-body { display: none; }

/* ---------- branche multibout : deux camps, campagne, entracte, vote ---------- */
#lb-roles { display: flex; flex-direction: column; gap: calc(var(--u) * 1.5); }
.lb-camp { display: grid; grid-template-columns: calc(var(--u) * 12) repeat(6, 1fr); gap: var(--u); align-items: stretch; }
.lb-camp-t { font: calc(var(--u) * 3)/1 'Silk', monospace; color: var(--dim); writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; padding: var(--u); background: var(--bg2); }
.lb-camp-crs .lb-camp-t { color: var(--blue); }
.lb-camp-crs .lb-role.on { box-shadow: inset 0 0 0 var(--u) var(--blue), 0 var(--u) 0 var(--ink); }
#netwait-box { width: min(calc(var(--u) * 250), 96vw); max-height: 94vh; overflow: auto; }
#netwait-box .tr-intro { font-size: calc(var(--u) * 4.4); color: var(--paper); margin: calc(var(--u) * 2) 0; }
.nw-tot { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.5) calc(var(--u) * 5); font-size: calc(var(--u) * 4.2); margin: var(--u) 0 calc(var(--u) * 3); }
.nw-tot i, .nw-tot span i { display: inline-block; width: calc(var(--u) * 2.5); height: calc(var(--u) * 2.5); margin-right: var(--u); }
.nw-tot b { color: var(--sun); font-weight: 400; }
.ne-fin { margin: calc(var(--u) * 2) 0; padding: calc(var(--u) * 3); background: var(--bg2); box-shadow: inset 0 0 0 var(--u) var(--ink); font-size: calc(var(--u) * 4.4); }
.ne-fin .fin-kicker { font: calc(var(--u) * 3.2)/1.4 'Silk', monospace; color: var(--dim); }
#net-vote { position: fixed; left: 50%; top: calc(var(--u) * 26); transform: translateX(-50%); z-index: 60; display: none; flex-direction: column; gap: var(--u); align-items: center;
  padding: calc(var(--u) * 3) calc(var(--u) * 5); background: rgba(20, 16, 30, .92); box-shadow: inset 0 0 0 var(--u) var(--sun), 0 var(--u) 0 var(--ink); font-size: calc(var(--u) * 4.4); color: var(--paper); max-width: 90vw; text-align: center; }
#net-vote.show { display: flex; }
#net-vote b { font: calc(var(--u) * 3.4)/1 'Silk', monospace; color: var(--sun); font-weight: 400; }
#net-vote .lb-mini.on { background: var(--sun); color: var(--ink); }
#net-goal { margin-top: var(--u); padding-top: var(--u); box-shadow: 0 calc(var(--u) * -.5) 0 var(--bg2); }
#net-goal .t { font: calc(var(--u) * 3)/1.3 'Silk', monospace; color: var(--sun); }
#net-phone { position: fixed; right: calc(var(--u) * 4); bottom: calc(var(--u) * 30); width: min(calc(var(--u) * 78), 44vw); max-height: 52vh; overflow: auto; display: none; z-index: 40;
  background: rgba(16, 14, 26, .94); box-shadow: inset 0 0 0 var(--u) var(--ink), 0 0 0 var(--u) #3a3352; padding: calc(var(--u) * 2); font-size: calc(var(--u) * 4); color: var(--paper); }
#net-phone.show { display: block; }
.nph-tabs { display: flex; gap: var(--u); margin-bottom: calc(var(--u) * 2); }
.nph-tabs button { flex: 1; border: 0; background: var(--bg2); color: var(--dim); font: calc(var(--u) * 3)/1.6 'Silk', monospace; cursor: pointer; }
.nph-tabs button.on { background: var(--sun); color: var(--ink); }
.nph-m { padding: var(--u) 0; box-shadow: 0 calc(var(--u) * .5) 0 var(--bg2); }
.nph-m b { color: var(--sun); font-weight: 400; margin-right: calc(var(--u) * 2); }
.nph-foot { margin-top: var(--u); font-size: calc(var(--u) * 3); }
#net-phone-badge { position: fixed; right: calc(var(--u) * 4); bottom: calc(var(--u) * 24); display: none; z-index: 39; font: calc(var(--u) * 3)/1.4 'Silk', monospace; color: var(--dim); background: rgba(16, 14, 26, .8); padding: var(--u) calc(var(--u) * 2); }
#net-phone-badge.show { display: block; } #net-phone-badge.new { color: var(--sun); }
.nph-act { border: 0; background: var(--sun); color: var(--ink); font: calc(var(--u) * 3)/1.6 'Silk', monospace; cursor: pointer; margin: var(--u) var(--u) var(--u) 0; padding: 0 calc(var(--u) * 1.5); }
.nph-via { display: flex; flex-wrap: wrap; gap: var(--u); margin-bottom: var(--u); }
.nph-via button { border: 0; background: var(--bg2); color: var(--dim); font: calc(var(--u) * 2.8)/1.6 'Silk', monospace; cursor: pointer; }
.nph-via button.on { background: var(--blue); color: var(--ink); } .nph-via button:disabled { opacity: .4; }
#net-phone h4 { font: calc(var(--u) * 3)/1.4 'Silk', monospace; color: var(--dim); margin: calc(var(--u) * 2) 0 var(--u); }