/* ================= Étape E5 : sac, jauges du corps, préparation, garde à vue ================= */
/* jauges discrètes dans le panneau d'état */
#hud-body { margin-top: calc(var(--u) * 1); }
.bar.mini { margin: var(--u) 0; }
.bar.mini span { font-size: calc(var(--u) * 3.4); color: var(--dim); }
.bar.mini i { height: calc(var(--u) * 2); }
#hud-thirst i { --c: #5fc8d8; } #hud-fat i { --c: #b48cff; }
.bar.mini.hot span { color: var(--orange); animation: blink .6s steps(2) infinite; }
#hud-bag { display: flex; align-items: center; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 1.5); font-size: calc(var(--u) * 3.8); color: var(--dim); }
#hud-bag kbd { margin-right: 0; margin-left: auto; font-size: calc(var(--u) * 3.4); }
#bag-kg { font: calc(var(--u) * 3.4)/1 'Silk', monospace; }
#hud-bleed { display: none; background: #a3161f; color: #fff; padding: 0 var(--u); font-size: calc(var(--u) * 3.4); box-shadow: 0 var(--u) 0 #4a080d; animation: blink .5s steps(2) infinite; }
#hud-bleed.show { display: inline-block; }

/* panneau du sac (Tab) */
#inv { right: calc(var(--u) * 4); top: 50%; transform: translateY(-50%); display: none; width: calc(var(--u) * 104); z-index: 5; }
#inv.show { display: block; }
#inv .inv-head { display: flex; align-items: center; gap: calc(var(--u) * 2); }
#inv .inv-head .t { color: var(--sun); font-size: calc(var(--u) * 5); }
#inv .inv-head kbd { margin: 0 0 0 auto; }
#inv .inv-kg { font: calc(var(--u) * 4)/1 'Silk', monospace; color: var(--dim); }
.inv-kgbar { height: calc(var(--u) * 3); margin: calc(var(--u) * 2) 0 calc(var(--u) * 3); background: var(--ink); position: relative; box-shadow: 0 0 0 var(--u) var(--ink); }
.inv-kgbar i { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, #7ee081 0 calc(var(--u) * 3), #4f9c52 calc(var(--u) * 3) calc(var(--u) * 4)); }
.inv-kgbar.full i { background: repeating-linear-gradient(90deg, #ffa62b 0 calc(var(--u) * 3), #a8660c calc(var(--u) * 3) calc(var(--u) * 4)); }
#inv .inv-body { display: flex; gap: calc(var(--u) * 3); align-items: flex-start; }
.inv-handbox { display: flex; flex-direction: column; align-items: center; gap: var(--u); }
.inv-cap { font-size: calc(var(--u) * 3.4); color: var(--dim); }
.inv-grid { display: grid; gap: var(--u); }
.inv-cell { position: relative; width: calc(var(--u) * 17); height: calc(var(--u) * 17); background: var(--bg2); display: grid; place-items: center; cursor: pointer;
  box-shadow: inset 0 0 0 var(--u) var(--ink), inset 0 calc(var(--u) * 2) 0 0 #241f31; }
.inv-cell:hover { background: var(--hi); }
.inv-cell.sel { box-shadow: inset 0 0 0 var(--u) var(--sun); background: #3d3456; }
.inv-cell.inv-hand { width: calc(var(--u) * 21); height: calc(var(--u) * 21); background: #3a2f22; box-shadow: inset 0 0 0 var(--u) var(--ink), inset 0 0 0 calc(var(--u) * 2) #6a5536; }
.inv-cell.inv-hand.sel { box-shadow: inset 0 0 0 var(--u) var(--sun); }
.inv-cell canvas { image-rendering: pixelated; pointer-events: none; }
.inv-cell b { position: absolute; right: var(--u); bottom: 0; font: calc(var(--u) * 3.6)/1.2 'Silk', monospace; color: var(--paper); text-shadow: var(--u) var(--u) 0 var(--ink); pointer-events: none; }
.inv-cell b.bat { left: var(--u); right: auto; top: 0; bottom: auto; color: var(--green); }
.inv-cell b.bat.low { color: var(--red); }
.inv-detail { margin-top: calc(var(--u) * 3); min-height: calc(var(--u) * 24); font-size: calc(var(--u) * 4.2); }
.inv-detail .nm { color: var(--sun); }
.inv-detail .dim, #inv .dim { color: var(--dim); }
.inv-detail .btns { margin-top: calc(var(--u) * 2); }
.inv-detail button[disabled] { background: var(--hi); color: var(--dim); cursor: default; box-shadow: inset 0 0 0 var(--u) var(--ink); }
.inv-trash { display: none; margin-top: calc(var(--u) * 2); padding: var(--u); text-align: center; font-size: calc(var(--u) * 3.6); color: #ffb4a8; box-shadow: inset 0 0 0 var(--u) #ff5a4e; }
#inv.dragging .inv-trash { display: block; }
.inv-ghost { position: fixed; pointer-events: none; image-rendering: pixelated; z-index: 30; }

/* ---------- écran « Avant la manif » ---------- */
#prep { z-index: 20; background: #17131f; overflow: auto; }
#prep .card { max-width: none; width: min(calc(var(--u) * 420), 98vw); padding: calc(var(--u) * 5) calc(var(--u) * 7); }
#prep h1 { font-size: calc(var(--u) * 11); }
#prep .sub { margin: calc(var(--u) * 1) 0 calc(var(--u) * 3); font-size: calc(var(--u) * 4.4); }
.prep-cols { display: grid; grid-template-columns: 1.05fr 1fr; gap: calc(var(--u) * 6); }
.prep-sec { margin-bottom: calc(var(--u) * 3); }
.prep-sec h3 { margin: 0 0 calc(var(--u) * 1.5); font: calc(var(--u) * 4.6)/1 'Silk', monospace; color: var(--sun); }
.prep-sec h3 small { font-size: calc(var(--u) * 3.4); color: var(--dim); margin-left: calc(var(--u) * 2); }
.prep-row { display: grid; grid-template-columns: calc(var(--u) * 18) 1fr auto; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * .5) var(--u); }
.prep-row:nth-child(odd) { background: #272135; }
.prep-row canvas { image-rendering: pixelated; justify-self: center; display: block; margin: 0 auto; }
.prep-row .nm { color: var(--paper); font-size: calc(var(--u) * 4.4); }
.prep-row .nt { color: var(--dim); font-size: calc(var(--u) * 3.6); }
.prep-row .ctr { display: flex; align-items: center; gap: var(--u); font: calc(var(--u) * 4.2)/1 'Silk', monospace; }
.prep-row .ctr b { min-width: calc(var(--u) * 6); text-align: center; color: var(--sun); }
.prep-row .ctr .kg { min-width: calc(var(--u) * 15); text-align: right; color: var(--dim); font-size: calc(var(--u) * 3.4); }
.prep-row button { padding: 0 calc(var(--u) * 1.5); min-width: calc(var(--u) * 7); }
.prep-row button[disabled], .prep-opt[disabled] { opacity: .35; cursor: default; }
.prep-kg { margin-top: calc(var(--u) * 2); display: grid; grid-template-columns: auto 1fr auto; gap: calc(var(--u) * 2); align-items: center; font: calc(var(--u) * 3.8)/1 'Silk', monospace; color: var(--dim); }
.prep-kg .inv-kgbar { margin: 0; }
.prep-opts { display: grid; gap: calc(var(--u) * 2); }
.prep-opts.c2 { grid-template-columns: repeat(2, 1fr); } .prep-opts.c3 { grid-template-columns: repeat(3, 1fr); } .prep-opts.c4 { grid-template-columns: repeat(4, 1fr); }
.prep-opt { display: flex; flex-direction: column; align-items: center; gap: var(--u); padding: calc(var(--u) * 2); text-align: center; color: var(--paper);
  background: var(--bg2); font: calc(var(--u) * 3.6)/1.25 'Pixelify', monospace; box-shadow: inset 0 0 0 var(--u) var(--ink), 0 var(--u) 0 var(--ink); }
.prep-opt b { font: calc(var(--u) * 3.8)/1.15 'Silk', monospace; color: var(--sun); }
.prep-opt span { color: var(--dim); }
.prep-opt canvas { image-rendering: pixelated; }
.prep-opt:hover { background: var(--hi); }
.prep-opt.sel { background: #3d3456; box-shadow: inset 0 0 0 var(--u) var(--sun), 0 var(--u) 0 var(--ink); }
.prep-opt.row { flex-direction: row; text-align: left; align-items: center; gap: calc(var(--u) * 2); }
.prep-opt.row div { display: flex; flex-direction: column; gap: calc(var(--u) * .5); }
.prep-foot { display: flex; align-items: center; gap: calc(var(--u) * 4); margin-top: calc(var(--u) * 2); padding-top: calc(var(--u) * 3); box-shadow: 0 calc(var(--u) * -1) 0 var(--hi); }
.prep-foot .sum { flex: 1; color: var(--dim); font-size: calc(var(--u) * 3.8); }
.prep-foot .sum b { color: var(--paper); }

/* ---------- garde à vue ---------- */
#custody { z-index: 25; background: #0e0b12; }
#custody .card { max-width: none; width: min(calc(var(--u) * 300), 96vw); padding: calc(var(--u) * 5) calc(var(--u) * 6); }
#custody .cu-art { display: block; width: 100%; image-rendering: pixelated; box-shadow: 0 0 0 var(--u) var(--ink); background: #000; }
#custody .cu-place { display: flex; justify-content: space-between; margin: calc(var(--u) * 3) 0 calc(var(--u) * 2); font: calc(var(--u) * 4.6)/1 'Silk', monospace; color: var(--sun); }
#custody .cu-place span:last-child { color: var(--dim); }
#custody .cu-text { min-height: calc(var(--u) * 26); font-size: calc(var(--u) * 4.8); line-height: 1.35; }
#custody .cu-text p { margin: 0 0 calc(var(--u) * 2); }
#custody .cu-text .reply { color: #c8e6ff; }
#custody .cu-text .say { color: var(--sun); }
#custody .cu-choices { display: grid; gap: var(--u); margin-top: calc(var(--u) * 2); }
#custody .cu-choices button { text-align: left; font: calc(var(--u) * 4.4)/1.3 'Pixelify', monospace; padding: var(--u) calc(var(--u) * 2.5); background: var(--bg2); color: var(--paper); box-shadow: inset 0 0 0 var(--u) var(--ink), 0 var(--u) 0 var(--ink); }
#custody .cu-choices button:hover, #custody .cu-choices button.focus { background: var(--hi); color: var(--sun); }
#custody .cu-choices button[disabled] { color: var(--dim); cursor: default; background: #231e2e; }
#custody .cu-choices button kbd { margin-right: calc(var(--u) * 2); }
#custody .cu-outcome { margin: calc(var(--u) * 2) 0; padding: calc(var(--u) * 2) calc(var(--u) * 3); background: #272135; box-shadow: inset calc(var(--u) * 2) 0 0 0 var(--c, var(--sun)); }
#custody .cu-outcome h2 { margin: 0 0 var(--u); font: calc(var(--u) * 7)/1 'Silk', monospace; color: var(--c, var(--sun)); }
#custody .cu-cons { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 2); }
#custody .cu-cons span { padding: 0 calc(var(--u) * 2); font: calc(var(--u) * 3.6)/1.6 'Silk', monospace; background: var(--ink); color: var(--dim); }
#custody .cu-cons span.on { background: #6d1712; color: #fff; }
#custody .cu-cons span.ok { background: #1d4a2d; color: #fff; }