/* OUTBREAK ZERO — interface en pixel art : cadres en bois, plaques sombres, police pixel. */
/* Typographie pixel (polices libres SIL OFL, fournies dans client/fonts). */
@font-face { font-family: "Pixelify Sans"; src: url("/client/fonts/PixelifySans.ttf?v=a853be07e4") format("truetype"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Jersey 10"; src: url("/client/fonts/Jersey10.ttf?v=a853be07e4") format("truetype"); font-weight: 400; font-display: swap; }

:root {
  --bg: #0e0c0d;
  --ink: #efe3c8;
  --text: #efe3c8;
  --muted: #b5a68a;
  --dim: #85785f;
  --amber: #f0b030;
  --amber2: #ffd27a;
  --red: #d14a3c;
  --green: #6fbf4a;
  --blue: #4aa3df;
  --wood: #80603e;
  --leather: #262020;
  --line: #3d332c;
  --px: "Pixelify Sans", "Trebuchet MS", system-ui, sans-serif;
  --title: "Jersey 10", "Pixelify Sans", Impact, sans-serif;
  --head: var(--title);
  --body: var(--px);
  color-scheme: dark;
  /* Cadres « 9 tranches » et icônes en SVG pixelisé (crispEdges), agrandis ×2 sans flou. */
  --f-panel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath fill='%23120e10' d='M1 0h10v1h1v10h-1v1H1v-1H0V1h1z'/%3E%3Cpath fill='%23b08a55' d='M1 1h10v10H1z'/%3E%3Cpath fill='%235a3f28' d='M2 2h9v9H2z'/%3E%3Cpath fill='%2380603e' d='M2 2h8v8H2z'/%3E%3Cpath fill='%2316110f' d='M3 3h6v6H3z'/%3E%3Cpath fill='%23262020' d='M4 4h4v4H4z'/%3E%3C/svg%3E");
  --f-hud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath fill='%230d0b0c' d='M1 0h10v1h1v10h-1v1H1v-1H0V1h1z'/%3E%3Cpath fill='%236f7a82' d='M1 1h10v10H1z'/%3E%3Cpath fill='%232c3238' d='M2 2h9v9H2z'/%3E%3Cpath fill='%2348525a' d='M2 2h8v8H2z'/%3E%3Cpath fill='%23111316' d='M3 3h6v6H3z'/%3E%3Cpath fill='%231c2024' d='M4 4h4v4H4z'/%3E%3C/svg%3E");
  --f-slot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Cpath fill='%230b090a' d='M1 0h6v1h1v6h-1v1H1v-1H0V1h1z'/%3E%3Cpath fill='%234a3e36' d='M1 1h6v6H1z'/%3E%3Cpath fill='%23120f0e' d='M1 1h6v1H2v5H1z'/%3E%3Cpath fill='%23221c1a' d='M2 2h4v4H2z'/%3E%3C/svg%3E");
  --f-slotsel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Cpath fill='%230b090a' d='M1 0h6v1h1v6h-1v1H1v-1H0V1h1z'/%3E%3Cpath fill='%23ffd27a' d='M1 1h6v6H1z'/%3E%3Cpath fill='%23c08020' d='M2 2h5v5H2z'/%3E%3Cpath fill='%232a2018' d='M2 2h4v4H2z'/%3E%3C/svg%3E");
  --f-slotpick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Cpath fill='%230b090a' d='M1 0h6v1h1v6h-1v1H1v-1H0V1h1z'/%3E%3Cpath fill='%237fc4ff' d='M1 1h6v6H1z'/%3E%3Cpath fill='%232b5c9a' d='M2 2h5v5H2z'/%3E%3Cpath fill='%231a2230' d='M2 2h4v4H2z'/%3E%3C/svg%3E");
  --f-plate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Cpath fill='rgba%2810%2C8%2C9%2C.92%29' d='M1 0h6v1h1v6h-1v1H1v-1H0V1h1z'/%3E%3Cpath fill='rgba%28120%2C96%2C64%2C.95%29' d='M1 1h6v6H1z'/%3E%3Cpath fill='rgba%2820%2C16%2C15%2C.86%29' d='M2 2h4v4H2z'/%3E%3C/svg%3E");
  --f-btn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' shape-rendering='crispEdges'%3E%3Cpath fill='%23120e10' d='M1 0h4v1h1v4h-1v1H1v-1H0V1h1z'/%3E%3Cpath fill='%23c9a46a' d='M1 1h4v4H1z'/%3E%3Cpath fill='%235a412a' d='M2 2h3v3H2z'/%3E%3Cpath fill='%238a6844' d='M2 2h2v2H2z'/%3E%3C/svg%3E");
  --f-btnhover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' shape-rendering='crispEdges'%3E%3Cpath fill='%23120e10' d='M1 0h4v1h1v4h-1v1H1v-1H0V1h1z'/%3E%3Cpath fill='%23e2c088' d='M1 1h4v4H1z'/%3E%3Cpath fill='%236b4e32' d='M2 2h3v3H2z'/%3E%3Cpath fill='%23a07a50' d='M2 2h2v2H2z'/%3E%3C/svg%3E");
  --f-btndown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' shape-rendering='crispEdges'%3E%3Cpath fill='%23120e10' d='M1 0h4v1h1v4h-1v1H1v-1H0V1h1z'/%3E%3Cpath fill='%235a412a' d='M1 1h4v4H1z'/%3E%3Cpath fill='%23c9a46a' d='M2 2h3v3H2z'/%3E%3Cpath fill='%237a5a3a' d='M2 2h2v2H2z'/%3E%3C/svg%3E");
  --f-btnprimary: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' shape-rendering='crispEdges'%3E%3Cpath fill='%23120e10' d='M1 0h4v1h1v4h-1v1H1v-1H0V1h1z'/%3E%3Cpath fill='%23ffe2a0' d='M1 1h4v4H1z'/%3E%3Cpath fill='%239a5e14' d='M2 2h3v3H2z'/%3E%3Cpath fill='%23e8a030' d='M2 2h2v2H2z'/%3E%3C/svg%3E");
  --f-btnprimaryhover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' shape-rendering='crispEdges'%3E%3Cpath fill='%23120e10' d='M1 0h4v1h1v4h-1v1H1v-1H0V1h1z'/%3E%3Cpath fill='%23fff0c8' d='M1 1h4v4H1z'/%3E%3Cpath fill='%23a8681a' d='M2 2h3v3H2z'/%3E%3Cpath fill='%23f6b848' d='M2 2h2v2H2z'/%3E%3C/svg%3E");
  --f-btndanger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' shape-rendering='crispEdges'%3E%3Cpath fill='%23120e10' d='M1 0h4v1h1v4h-1v1H1v-1H0V1h1z'/%3E%3Cpath fill='%23f0907a' d='M1 1h4v4H1z'/%3E%3Cpath fill='%236b1f1a' d='M2 2h3v3H2z'/%3E%3Cpath fill='%23b8392e' d='M2 2h2v2H2z'/%3E%3C/svg%3E");
  --f-btnghost: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' shape-rendering='crispEdges'%3E%3Cpath fill='%23120e10' d='M1 0h4v1h1v4h-1v1H1v-1H0V1h1z'/%3E%3Cpath fill='%234a3e36' d='M1 1h4v4H1z'/%3E%3Cpath fill='%231a1514' d='M2 2h3v3H2z'/%3E%3Cpath fill='%232a2220' d='M2 2h2v2H2z'/%3E%3C/svg%3E");
  --f-input: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' shape-rendering='crispEdges'%3E%3Cpath fill='%23120e10' d='M1 0h4v1h1v4h-1v1H1v-1H0V1h1z'/%3E%3Cpath fill='%233d332c' d='M1 1h4v4H1z'/%3E%3Cpath fill='%230e0b0a' d='M1 1h4v1H2v3H1z'/%3E%3Cpath fill='%231a1513' d='M2 2h2v2H2z'/%3E%3C/svg%3E");
  --f-inputfocus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' shape-rendering='crispEdges'%3E%3Cpath fill='%23120e10' d='M1 0h4v1h1v4h-1v1H1v-1H0V1h1z'/%3E%3Cpath fill='%23e8a030' d='M1 1h4v4H1z'/%3E%3Cpath fill='%230e0b0a' d='M1 1h4v1H2v3H1z'/%3E%3Cpath fill='%231a1513' d='M2 2h2v2H2z'/%3E%3C/svg%3E");
  --f-track: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' shape-rendering='crispEdges'%3E%3Cpath fill='%230b090a' d='M1 0h4v1h1v4h-1v1H1v-1H0V1h1z'/%3E%3Cpath fill='%233a302a' d='M1 1h4v4H1z'/%3E%3Cpath fill='%230f0c0b' d='M2 2h2v2H2z'/%3E%3C/svg%3E");
  --i-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Cpath fill='%2316121a' d='M1 1h2v1h2V1h2v1h1v3h-1v1h-1v1h-1v1H3V7H2V6H1V5H0V2h1z'/%3E%3Cpath fill='%23d14a3c' d='M1 2h2v1h2V2h2v3H6v1H5v1H3V6H2V5H1z'/%3E%3Cpath fill='%23ff9a8a' d='M2 2h1v1H2z'/%3E%3C/svg%3E");
  --i-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Cpath fill='%2316121a' d='M3 0h4v1H6v1H5v1h3v1H7v1H6v1H5v1H4v1H2V7h1V6h1V5H0V4h1V3h1V2h1z'/%3E%3Cpath fill='%23f0c040' d='M3 1h3v1H5v1H4v1h3v1H6v1H5v1H4V6H3v1h1V5H1V4h1V3h1z'/%3E%3C/svg%3E");
  --i-food: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Cpath fill='%2316121a' d='M3 0h4v1h1v4H7v1H5v1H4v1H1V7H0V4h1V3h1V1h1z'/%3E%3Cpath fill='%23c0703a' d='M3 1h4v4H6v1H4V5H3V4H2V2h1z'/%3E%3Cpath fill='%23e8b07a' d='M4 1h2v1H4z'/%3E%3Cpath fill='%23efe3c8' d='M1 5h2v2H1z'/%3E%3C/svg%3E");
  --i-drop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Cpath fill='%2316121a' d='M3 0h2v1h1v2h1v1h1v3H7v1H1V7H0V4h1V3h1V1h1z'/%3E%3Cpath fill='%234aa3df' d='M3 1h2v2h1v1h1v3H1V4h1V3h1z'/%3E%3Cpath fill='%23bfe6ff' d='M2 4h1v2H2z'/%3E%3C/svg%3E");
  --i-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Cpath fill='%2316121a' d='M2 1h4v1h1v1h1v2H7v1H6v1H2V6H1V5H0V3h1V2h1z'/%3E%3Cpath fill='%23f0c040' d='M2 2h4v1h1v2H6v1H2V5H1V3h1z'/%3E%3Cpath fill='%23fff0b0' d='M2 3h1v1H2z'/%3E%3C/svg%3E");
  --i-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' shape-rendering='crispEdges'%3E%3Cpath fill='%2316121a' transform='translate%281 1%29' d='M3 0h3v1h-3zM1 1h4v1h-4zM1 2h3v1h-3zM0 3h3v1h-3zM0 4h3v1h-3zM1 5h3v1h-3zM1 6h4v1h-4zM3 7h3v1h-3z'/%3E%3Cpath fill='%23e2e6f6' d='M3 0h3v1h-3zM1 1h4v1h-4zM1 2h3v1h-3zM0 3h3v1h-3zM0 4h3v1h-3zM1 5h3v1h-3zM1 6h4v1h-4zM3 7h3v1h-3z'/%3E%3Cpath fill='%239aa0c8' d='M0 3h1v2H0z'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Cpath fill='%2316121a' d='M6 1h2v2H7v1H6v1H5v1H4v1H2V6H1V5H0V3h2v1h1V3h1V2h1V1h1z'/%3E%3Cpath fill='%237fe07f' d='M6 2h1v1H6v1H5v1H4v1H3V5H2V4H1h1v1h1V4h1V3h1z'/%3E%3C/svg%3E");
  --i-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Cpath fill='%2316121a' d='M0 0h8v8H0z'/%3E%3Cpath fill='%233a302a' d='M1 1h6v6H1z'/%3E%3Cpath fill='%231a1513' d='M2 2h4v4H2z'/%3E%3C/svg%3E");
  --i-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Cpath fill='%2316121a' d='M0 0h3v1h2V0h3v3H7v2h1v3H5V7H3v1H0V5h1V3H0z'/%3E%3Cpath fill='%23e8d8c0' d='M1 1h1v1h1v1h2V2h1V1h1v1H6v1H5v2h1v1h1v1H6V6H5V5H3v1H2v1H1V6h1V5h1V3H2V2H1z'/%3E%3C/svg%3E");

}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 400 16px/1.35 var(--px); overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: none; }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
img, canvas { image-rendering: pixelated; }
h1, h2, h3 { font-family: var(--title); font-weight: 400; margin: 0; letter-spacing: .04em; }
h2 { font-size: 30px; line-height: 1; color: var(--amber2); text-shadow: 2px 2px 0 #120e10; }
h3 { font-size: 22px; line-height: 1; color: var(--muted); margin: 14px 0 8px; text-shadow: 2px 2px 0 #120e10; }
p { margin: 0 0 10px; }
a { color: var(--amber2); }
::selection { background: var(--amber); color: #120e10; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #120e10; }
::-webkit-scrollbar-thumb { background: #5a412a; border: 2px solid #120e10; }

#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: none; }
body:not(.menu-bg) #game { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='23' shape-rendering='crispEdges'%3E%3Cpath fill='%2316121a' d='M10 0h3v8h-3zM10 15h3v8h-3zM0 10h8v3H0zM15 10h8v3h-8zM10 10h3v3h-3z'/%3E%3Cpath fill='%23f0e6c8' d='M11 1h1v6h-1zM11 16h1v6h-1zM1 11h6v1H1zM16 11h6v1h-6zM11 11h1v1h-1z'/%3E%3C/svg%3E") 11 11, crosshair; }
#app { position: fixed; inset: 0; overflow: auto; z-index: 5; }
#app:empty { pointer-events: none; }
.boot { display: grid; place-items: center; height: 100%; font-family: var(--title); font-size: 34px; letter-spacing: .2em; color: var(--muted); }

/* ------------------------------------------------------------------ cadres */
.frame, .card, .modal, .gpanel { border: 8px solid transparent; border-image: var(--f-panel) 4 fill / 8px / 0 stretch; background: none; }
.slotframe { border: 6px solid transparent; border-image: var(--f-slot) 3 fill / 6px / 0 stretch; }
.plate { border: 6px solid transparent; border-image: var(--f-plate) 3 fill / 6px / 0 stretch; padding: 2px 8px; display: inline-flex; align-items: center; gap: 8px; text-shadow: 2px 2px 0 #120e10; }
.plate.small { font-size: 14px; padding: 0 6px; }

/* ------------------------------------------------------------------ boutons & champs */
.btn { appearance: none; border: 4px solid transparent; border-image: var(--f-btn) 2 fill / 4px / 0 stretch; background: none; color: var(--ink); padding: 0 14px; min-height: 42px; cursor: pointer; font-family: var(--px); font-weight: 600; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; text-shadow: 2px 2px 0 #3a2818; }
.btn:hover { border-image-source: var(--f-btnhover); }
.btn:active { border-image-source: var(--f-btndown); transform: translateY(2px); }
.btn.primary { border-image-source: var(--f-btnprimary); color: #2a1606; text-shadow: 1px 1px 0 #ffe2a0; }
.btn.primary:hover { border-image-source: var(--f-btnprimaryhover); }
.btn.danger { border-image-source: var(--f-btndanger); color: #fff0e8; text-shadow: 2px 2px 0 #5a1612; }
.btn.ghost { border-image-source: var(--f-btnghost); color: var(--muted); }
.btn.small { min-height: 34px; padding: 0 10px; font-size: 14px; }
.btn.block { width: 100%; }
.btn:disabled { filter: grayscale(.9) brightness(.6); cursor: not-allowed; transform: none; }
.btn.loading { filter: brightness(.8); }
.icon-btn, .xbtn { appearance: none; border: 4px solid transparent; border-image: var(--f-btnghost) 2 fill / 4px / 0 stretch; background: none; color: var(--ink); width: 36px; height: 36px; cursor: pointer; font-size: 16px; display: grid; place-items: center; padding: 0; }
.icon-btn:hover, .xbtn:hover { border-image-source: var(--f-btndanger); }
:focus-visible { outline: 2px dashed var(--amber2); outline-offset: 3px; }
.input, select.input { width: 100%; min-height: 44px; border: 4px solid transparent; border-image: var(--f-input) 2 fill / 4px / 0 stretch; background: none; padding: 0 10px; color: var(--ink); font-family: var(--px); }
.input:focus { border-image-source: var(--f-inputfocus); outline: none; }
select.input option { background: #1a1513; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 14px; color: var(--muted); }
.hint { font-size: 14px; color: var(--dim); }
.err { color: #ff8a7a; font-size: 14px; min-height: 18px; }
.ok-text { color: var(--green); }
.muted { color: var(--muted); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.row.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.grow { flex: 1; min-width: 0; }
.check { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--amber); }
.tabs { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; }
.tab { flex: 1; appearance: none; border: 4px solid transparent; border-image: var(--f-btnghost) 2 fill / 4px / 0 stretch; background: none; color: var(--muted); min-height: 38px; cursor: pointer; font-family: var(--px); font-weight: 600; white-space: nowrap; padding: 0 10px; }
.tab.on { border-image-source: var(--f-btn); color: var(--ink); text-shadow: 2px 2px 0 #3a2818; }
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; background: var(--red); color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 0 0 2px #120e10; }
.tag { display: inline-block; font-size: 13px; padding: 1px 6px; background: #1a1513; box-shadow: 0 0 0 2px #120e10, inset 0 0 0 1px #4a3e36; color: var(--muted); }
.tag.amber { color: var(--amber2); box-shadow: 0 0 0 2px #120e10, inset 0 0 0 1px #8a6a20; }
.tag.red { color: #ff9a8a; box-shadow: 0 0 0 2px #120e10, inset 0 0 0 1px #8a2a22; }
.tag.green { color: #9fe08f; box-shadow: 0 0 0 2px #120e10, inset 0 0 0 1px #3a6a2c; }
kbd { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border: 4px solid transparent; border-image: var(--f-btn) 2 fill / 4px / 0 stretch; font: 700 14px var(--px); color: var(--ink); margin-right: 8px; text-shadow: 1px 1px 0 #3a2818; }

/* ------------------------------------------------------------------ écrans (menus) */
.screen { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: max(20px, env(safe-area-inset-top)) 16px 20px; background: transparent; }
body.menu-bg #app { background: radial-gradient(ellipse at 50% 40%, rgba(14,12,13,0) 30%, rgba(14,12,13,.55) 100%); }
.card { padding: 18px; }
.logo { font-family: var(--title); font-size: clamp(48px, 10vw, 92px); line-height: .85; letter-spacing: .06em; color: #e8dcc0; text-shadow: 4px 4px 0 #120e10, 0 0 0 #000; }
.logo b { color: var(--red); font-weight: 400; text-shadow: 4px 4px 0 #120e10; }
.logo small { display: block; font-family: var(--px); font-size: 15px; letter-spacing: .3em; color: var(--muted); margin-top: 10px; text-shadow: 2px 2px 0 #120e10; }
.auth { width: min(440px, 100%); }
.auth .logo { text-align: center; margin-bottom: 18px; }
.menu-wrap { width: min(1180px, 100%); display: grid; grid-template-columns: minmax(280px, 400px) 1fr; gap: 18px; align-items: start; }
.menu-main { display: flex; flex-direction: column; gap: 8px; }
.menu-main .btn { justify-content: flex-start; min-height: 56px; font-family: var(--title); font-size: 28px; font-weight: 400; padding: 0 16px; letter-spacing: .05em; }
.menu-main .btn .sub { margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 48%; font-family: var(--px); font-size: 13px; color: var(--muted); font-weight: 400; letter-spacing: 0; text-shadow: none; }
.menu-main .btn.primary .sub { color: #5a3a10; }
.side { display: grid; gap: 14px; }
.profile-card { display: flex; gap: 14px; align-items: center; }
.avatar { width: 72px; height: 72px; flex: none; box-shadow: 0 0 0 2px #120e10, 0 0 0 4px #80603e, 0 0 0 6px #120e10; image-rendering: pixelated; }
.avatar.sm { width: 44px; height: 44px; }
.avatar.xs { width: 34px; height: 34px; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 12px; }
.stat { border: 6px solid transparent; border-image: var(--f-slot) 3 fill / 6px / 0 stretch; padding: 4px 6px; }
.stat b { display: block; font-family: var(--title); font-size: 30px; font-weight: 400; line-height: 1; color: var(--amber2); }
.stat span { font-size: 13px; color: var(--muted); }
.list { display: flex; flex-direction: column; gap: 6px; }
.item { display: flex; align-items: center; gap: 12px; padding: 4px 6px; min-height: 52px; border: 6px solid transparent; border-image: var(--f-slot) 3 fill / 6px / 0 stretch; }
.item .name { font-weight: 700; }
.item .meta { font-size: 13px; color: var(--muted); }
.item .actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.dot { width: 10px; height: 10px; display: inline-block; background: #555; flex: none; box-shadow: 0 0 0 2px #120e10; }
.dot.online { background: var(--green); }
.dot.in_game { background: var(--amber); }
.dot.party { background: var(--blue); }
.dot.busy { background: var(--red); }
.empty { color: var(--dim); text-align: center; padding: 16px; font-size: 15px; }
.panel-scroll { max-height: min(60vh, 520px); overflow: auto; padding-right: 4px; }

/* Créateur */
.creator { width: min(1100px, 100%); display: grid; grid-template-columns: minmax(260px, 400px) 1fr; gap: 18px; }
.preview { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.preview canvas { width: 100%; max-width: 320px; height: auto; aspect-ratio: 4 / 5; box-shadow: 0 0 0 2px #120e10, 0 0 0 6px #80603e, 0 0 0 8px #120e10; }
.preview .portrait { width: 96px; height: 96px; aspect-ratio: 1; }
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 6px; }
.opt { appearance: none; border: 6px solid transparent; border-image: var(--f-slot) 3 fill / 6px / 0 stretch; background: none; padding: 2px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; color: var(--muted); min-height: 96px; }
.opt canvas { width: 60px; height: 60px; }
.opt.on { border-image-source: var(--f-slotsel); color: var(--ink); }
.opt.locked { filter: grayscale(1) brightness(.5); }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.sw { appearance: none; width: 30px; height: 30px; border: 0; cursor: pointer; box-shadow: 0 0 0 2px #120e10, inset 0 -4px 0 rgba(0,0,0,.3), inset 0 4px 0 rgba(255,255,255,.18); }
.sw.on { box-shadow: 0 0 0 2px #120e10, 0 0 0 4px var(--amber2), 0 0 0 6px #120e10; }

/* Modales */
.modal-back { position: fixed; inset: 0; background: rgba(8,6,8,.72); display: grid; place-items: center; z-index: 50; padding: 12px; }
.modal { width: min(580px, 100%); max-height: calc(100vh - 24px); overflow: auto; }
.modal.wide { width: min(940px, 100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 8px 10px; position: sticky; top: 0; z-index: 1; background: #262020; box-shadow: 0 2px 0 #120e10, 0 4px 0 #3d332c; }
.modal-head h2 { font-size: 30px; }
.modal-body { padding: 12px 10px 10px; }

/* Notifications */
.toasts { position: fixed; top: calc(max(8px, env(safe-area-inset-top)) + 52px); left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; width: min(560px, 92vw); }
.toast { border: 6px solid transparent; border-image: var(--f-plate) 3 fill / 6px / 0 stretch; padding: 4px 10px 4px 12px; animation: tin .2s steps(3); pointer-events: auto; font-size: 15px; text-shadow: 2px 2px 0 #120e10; box-shadow: inset 4px 0 0 var(--blue); }
.toast-warn { box-shadow: inset 4px 0 0 var(--amber); }
.toast-error { box-shadow: inset 4px 0 0 var(--red); }
.toast-good { box-shadow: inset 4px 0 0 var(--green); }
.toast.out { opacity: 0; transition: opacity .3s steps(3); }
@keyframes tin { from { transform: translateY(-10px); opacity: 0; } }
.invite-pop { position: fixed; right: 16px; bottom: 16px; z-index: 60; width: min(380px, 92vw); }

/* ------------------------------------------------------------------ HUD en jeu */
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; font-size: 15px; text-shadow: 2px 2px 0 #120e10; }
#hud .pe, #hud .gpanel, #hud .chat input { pointer-events: auto; }

/* Fiche du survivant */
.pcard { position: absolute; top: max(8px, env(safe-area-inset-top)); left: 8px; display: flex; gap: 6px; padding: 2px; border-image-source: var(--f-hud); width: 300px; }
.pcard.shake { animation: shake .26s steps(4); }
@keyframes shake { 25% { transform: translate(-3px, 1px); } 50% { transform: translate(3px, -1px); } 75% { transform: translate(-2px, 0); } }
.pcard .portrait { width: 84px; height: 84px; flex: none; display: grid; place-items: center; padding: 0; }
.pcard .portrait canvas { width: 72px; height: 72px; }
.pinfo { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pname { font-family: var(--title); font-size: 24px; line-height: 20px; color: var(--amber2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pxbar { display: flex; align-items: center; gap: 4px; height: 14px; }
.pxbar .ico { width: 16px; height: 16px; flex: none; background-size: 16px 16px; image-rendering: pixelated; }
.pxbar.hp .ico { background-image: var(--i-heart); }
.pxbar.st .ico { background-image: var(--i-bolt); }
.pxbar.food .ico { background-image: var(--i-food); }
.pxbar.water .ico { background-image: var(--i-drop); }
.track { position: relative; flex: 1; height: 14px; border: 4px solid transparent; border-image: var(--f-track) 2 fill / 4px / 0 stretch; }
.track > i { position: absolute; left: 0; top: 0; bottom: 0; display: block; transition: width .25s steps(5); background-image: repeating-linear-gradient(90deg, transparent 0 6px, rgba(0,0,0,.28) 6px 8px); }
.track > b { position: absolute; right: 2px; top: -5px; font-size: 11px; line-height: 14px; font-weight: 700; color: #fff; }
.pxbar.hp .track > i, .mini.hp .track > i { background-color: #c4473a; box-shadow: inset 0 2px 0 #ff8a7a, inset 0 -2px 0 #7a221c; }
.pxbar.st .track > i { background-color: #d8a830; box-shadow: inset 0 2px 0 #ffe080, inset 0 -2px 0 #8a6414; }
.pxbar.food .track > i, .mini.food .track > i { background-color: #c0703a; box-shadow: inset 0 2px 0 #f0a870, inset 0 -2px 0 #7a3e18; }
.pxbar.water .track > i, .mini.water .track > i { background-color: #3a8ccc; box-shadow: inset 0 2px 0 #8fd0ff, inset 0 -2px 0 #1e4f7a; }
.pxbar.low .track { animation: blink .8s steps(2) infinite; }
@keyframes blink { 50% { filter: brightness(1.8); } }
.status { display: flex; gap: 4px; flex-wrap: wrap; min-height: 0; }
.status .tag { font-size: 11px; padding: 0 4px; }

/* Horloge */
.hud-top { position: absolute; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; gap: 6px; align-items: center; }
.clock b { font-family: var(--title); font-size: 26px; font-weight: 400; line-height: 26px; color: var(--ink); }
.sky { width: 20px; height: 20px; background-size: 20px 20px; image-rendering: pixelated; }
.sky.sun { background-image: var(--i-sun); }
.sky.moon { background-image: var(--i-moon); }

/* Clans, règles */
.clantag { display: inline-grid; place-items: center; min-width: 44px; padding: 0 6px; height: 26px; font-family: var(--title); font-size: 22px; line-height: 1; background: #1a1513; box-shadow: 0 0 0 2px #120e10; }
.rdetails summary { cursor: pointer; padding: 6px 0; color: var(--amber2); }
.rules { gap: 8px; }
.rsec { padding: 2px 8px 6px; }
.rsec h3 { margin: 4px 0 6px; font-size: 20px; }
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 14px; align-items: end; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ptable { display: grid; gap: 2px; }
.prow { display: grid; grid-template-columns: 1fr 96px 96px 96px; align-items: center; gap: 6px; padding: 3px 4px; }
.prow:nth-child(odd) { background: rgba(255,255,255,.03); }
.prow.head { font-weight: 700; color: var(--amber2); }
.prow small { display: block; font-size: 12px; }
.pcell { display: grid; place-items: center; }
.pcell input { width: 20px; height: 20px; accent-color: var(--amber); }
.item.me { border-image-source: var(--f-slotsel); }
.rank { font-family: var(--title); font-size: 28px; color: var(--amber2); width: 44px; text-align: center; }
@media (max-width: 640px) { .prow { grid-template-columns: 1fr 60px 60px 60px; font-size: 13px; } }

/* Discrétion */
.stealth { position: absolute; right: calc(50% + 172px); bottom: calc(max(8px, env(safe-area-inset-bottom)) + 14px); font-size: 14px; }
.stealth.spotted { color: #ff9a8a; animation: blink .6s steps(2) infinite; }
.stealth.hidden { color: #b8d8a0; }

/* PvP */
.plate.pvp { color: #ffb0a0; box-shadow: inset 0 -2px 0 #d14a3c; }
.killfeed { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.kf { font-size: 13px; }
.kf b { color: #ffb0a0; font-weight: 600; }
.kf.mine { box-shadow: inset 3px 0 0 var(--amber); }

/* Mini-carte, équipe, objectifs */
.hud-right { position: absolute; top: max(8px, env(safe-area-inset-top)); right: 8px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.mapframe { position: relative; border-image-source: var(--f-hud); padding: 0; }
.minimap { display: block; width: 168px; height: 168px; background: #0d0b0c; }
.compass { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); font-family: var(--title); font-size: 20px; line-height: 16px; color: var(--amber2); background: #120e10; padding: 0 4px; }
.team { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.mate { font-size: 14px; }
.quests { border-image-source: var(--f-hud); padding: 0 4px 2px; width: 220px; font-size: 13px; }
.qtitle { font-family: var(--title); font-size: 22px; line-height: 22px; color: var(--amber2); }
.q { display: flex; gap: 6px; align-items: center; color: var(--ink); line-height: 18px; }
.q i { width: 12px; height: 12px; flex: none; background: var(--i-box) center / 12px 12px; image-rendering: pixelated; }
.q.done { color: var(--dim); text-decoration: line-through; }
.q.done i { background-image: var(--i-check); }
.qlist { display: flex; flex-direction: column; gap: 4px; font-size: 16px; }
.qlist .q i { width: 16px; height: 16px; background-size: 16px 16px; }

/* Barre rapide, arme, invites */
.hotbar { position: absolute; left: 50%; transform: translateX(-50%); bottom: max(8px, env(safe-area-inset-bottom)); display: flex; gap: 4px; }
.slot { appearance: none; width: 60px; height: 60px; border: 6px solid transparent; border-image: var(--f-slot) 3 fill / 6px / 0 stretch; background: none; position: relative; display: grid; place-items: center; cursor: pointer; padding: 0; color: var(--ink); }
.slot:hover { filter: brightness(1.25); }
.slot.sel { border-image-source: var(--f-slotsel); }
.slot.sel::after { content: ""; position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); border: 5px solid transparent; border-bottom-color: var(--amber2); }
.slot.picked { border-image-source: var(--f-slotpick); }
.slot.hot { box-shadow: 0 2px 0 rgba(240,176,48,.35); }
.slot img { width: 40px; height: 40px; pointer-events: none; image-rendering: pixelated; }
.slot .q { position: absolute; right: -2px; bottom: -4px; font-size: 14px; font-weight: 700; color: #fff; text-shadow: 2px 2px 0 #120e10, -1px -1px 0 #120e10; }
.slot .q.mag { color: var(--amber2); }
.slot .k { position: absolute; left: -2px; top: -5px; font-size: 12px; color: var(--muted); text-shadow: 1px 1px 0 #120e10; }
.slot .dur { position: absolute; left: 2px; right: 2px; bottom: -2px; height: 3px; background: #120e10; }
.slot .dur i { display: block; height: 100%; background: var(--green); }
.pxicon { image-rendering: pixelated; }
.weapon { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(max(8px, env(safe-area-inset-bottom)) + 70px); font-size: 15px; gap: 6px; white-space: nowrap; }
.weapon img { width: 28px; height: 28px; }
.weapon b { font-family: var(--title); font-size: 26px; font-weight: 400; line-height: 22px; color: var(--amber2); }
.weapon b.reload { color: var(--muted); font-size: 18px; }
.prompt { position: absolute; left: 50%; bottom: calc(max(8px, env(safe-area-inset-bottom)) + 112px); transform: translateX(-50%); font-size: 16px; white-space: nowrap; padding: 2px 10px 2px 4px; animation: tin .15s steps(2); }
.progress { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -96px); flex-direction: column; gap: 4px; min-width: 200px; }
.progress .track { width: 100%; }
.progress .track > i { background-color: var(--green); box-shadow: inset 0 2px 0 #b8f0a0; }
.chat { position: absolute; left: 8px; bottom: calc(max(8px, env(safe-area-inset-bottom)) + 4px); width: min(400px, 40vw); display: flex; flex-direction: column; gap: 4px; }
.chat-log { max-height: 190px; overflow: hidden; display: flex; flex-direction: column; gap: 1px; font-size: 15px; padding: 4px 6px; }
.chat-log.open { background: rgba(14,12,13,.75); box-shadow: 0 0 0 2px #120e10, 0 0 0 4px #3d332c; }
.chat-log .ln { transition: opacity 1s steps(4); }
.chat-log .ln.fade { opacity: 0; }
.chat-log b { color: var(--amber2); font-weight: 600; }
.chat-log .party b { color: #8fd0ff; }
.chat-log .sys { color: #c9bca0; }
.vignette { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(160,0,10,0) 55%, rgba(160,0,10,.45) 100%); transition: opacity .25s steps(3); }
.vignette.hurt { opacity: 1; transition: none; }
.center-msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none; }
.death .big { font-family: var(--title); font-size: clamp(54px, 10vw, 104px); line-height: .9; color: #e8dcc0; text-shadow: 4px 4px 0 #120e10; }
.death .big.red { color: #ff7a6a; }
.death .small { color: var(--muted); margin-top: 6px; font-size: 18px; }
.net-warn { position: absolute; top: 70px; left: 50%; transform: translateX(-50%); color: #ff9a8a; }

/* Fenêtres en jeu */
.gpanel { position: absolute; pointer-events: auto; display: flex; flex-direction: column; max-height: calc(100vh - 24px); }
.gpanel.inv { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(860px, 96vw); }
.gpanel.craft { width: min(720px, 96vw); }
.gpanel.struct { width: min(620px, 96vw); }
.gpanel.pause { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, 94vw); }
.gpanel.full { inset: max(8px, env(safe-area-inset-top)) 8px 8px 8px; max-height: none; }
.ptitle { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 4px 8px 6px; margin-bottom: 8px; box-shadow: 0 2px 0 #120e10, 0 4px 0 #4a3a2a; flex: none; }
.pbody { overflow: auto; padding: 2px 6px 6px; flex: 1; min-height: 0; }
.gpanel.full .pbody { display: flex; flex-direction: column; }
.grid-slots { display: grid; grid-template-columns: repeat(5, 60px); gap: 4px; }
.inv-cols { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.inv-cols h3 { margin-top: 0; font-size: 20px; }
.invchar { display: flex; flex-direction: column; gap: 6px; width: 140px; }
.figure { width: 140px; height: 170px; padding: 0; }
.mini { display: flex; flex-direction: column; gap: 1px; font-size: 13px; color: var(--muted); }
.mini .track { flex: none; }
.mini.wide { width: 100%; }
.item-info { margin-top: 10px; padding: 4px 8px; font-size: 15px; }
.item-info b { font-size: 18px; color: var(--amber2); }
.item-info .stats { margin-top: 4px; }
.loot { min-width: 0; }
.recipes { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.recipe { display: flex; gap: 10px; align-items: center; padding: 2px 6px; }
.recipe.ok { border-image-source: var(--f-slotsel); }
.recipe .out { position: relative; width: 48px; height: 48px; display: grid; place-items: center; flex: none; }
.recipe .out .q { position: absolute; right: -4px; bottom: -4px; font-weight: 700; }
.recipe b { font-size: 17px; }
.needs { display: flex; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--ink); margin-top: 2px; }
.need { display: inline-flex; align-items: center; gap: 2px; }
.need img { width: 24px; height: 24px; }
.need.miss { color: #ff8a7a; }
.need.miss img { filter: grayscale(.8) brightness(.7); }
.need.tool { color: var(--muted); }
.need.tool.miss { color: #ff8a7a; }
.bigicon { width: 76px; height: 76px; display: grid; place-items: center; flex: none; padding: 0; }
.claimhead { display: flex; gap: 10px; align-items: center; padding: 4px 8px; }
.cname { font-family: var(--title); font-size: 28px; line-height: 1; color: var(--amber2); }
.perks { margin: 8px 0; padding-left: 20px; font-size: 14px; color: var(--muted); }
.perks li { margin: 2px 0; }
.upgrade { display: flex; gap: 10px; align-items: center; padding: 4px 8px; margin: 8px 0; }
.mapwrap { flex: 1; min-height: 0; padding: 0; display: flex; }
.mapcanvas { width: 100%; height: 100%; display: block; background: #0b0a0a; cursor: crosshair; touch-action: none; }

/* Commandes tactiles */
.touch { position: absolute; inset: 0; pointer-events: none; }
.joy { position: absolute; left: max(18px, env(safe-area-inset-left)); bottom: calc(max(18px, env(safe-area-inset-bottom)) + 78px); width: 140px; height: 140px; border-radius: 50%; background: rgba(18,14,16,.35); box-shadow: 0 0 0 3px #120e10, 0 0 0 6px rgba(128,96,62,.7), 0 0 0 9px #120e10; pointer-events: auto; touch-action: none; }
.joy .knob { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: #80603e; box-shadow: 0 0 0 3px #120e10, inset 0 4px 0 #b08a55, inset 0 -4px 0 #5a3f28; }
.tbtns { position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 80px); display: grid; grid-template-columns: repeat(4, 62px); gap: 10px; pointer-events: auto; }
.tbtn { width: 62px; height: 62px; border: 4px solid transparent; border-image: var(--f-btn) 2 fill / 4px / 0 stretch; background: none; color: var(--ink); font: 700 13px var(--px); touch-action: none; display: grid; place-items: center; text-align: center; line-height: 1.1; padding: 0; text-shadow: 2px 2px 0 #3a2818; }
.tbtn.big { border-image-source: var(--f-btndanger); }
.tbtn.on { border-image-source: var(--f-btnprimary); color: #2a1606; text-shadow: none; }
.tmenu { position: absolute; top: calc(max(8px, env(safe-area-inset-top)) + 46px); left: 50%; transform: translateX(-50%); display: flex; gap: 6px; pointer-events: auto; }

/* Deux colonnes dès que l'écran est en paysage (téléphone couché, télé) : tout tient en hauteur. */
@media (max-width: 900px) and (orientation: portrait) {
  .menu-wrap, .creator { grid-template-columns: 1fr; }
}
@media (max-width: 900px) and (orientation: landscape) {
  .menu-wrap, .creator { grid-template-columns: minmax(220px, 1fr) 1.4fr; gap: 10px; }
}
@media (max-width: 900px) {
  .pcard { width: 230px; }
  .pcard .portrait { width: 64px; height: 64px; }
  .pcard .portrait canvas { width: 52px; height: 52px; }
  .pname { font-size: 20px; }
  .minimap { width: 112px; height: 112px; }
  .quests { display: none; }
  .slot { width: 52px; height: 52px; }
  .slot img { width: 34px; height: 34px; }
  .grid-slots { grid-template-columns: repeat(5, 52px); }
  .chat { width: min(300px, 60vw); bottom: calc(max(8px, env(safe-area-inset-bottom)) + 64px); }
  .hide-sm { display: none; }
  .invchar { display: none; }
  h2 { font-size: 26px; }
}
/* Curseurs (volume...) */
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 10px; background: #120e10; box-shadow: inset 0 0 0 2px #3d332c; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 22px; margin-top: -6px; background: #e8a030; box-shadow: 0 0 0 2px #120e10, inset 0 3px 0 #ffe2a0, inset 0 -3px 0 #9a5e14; }
input[type=range]::-moz-range-track { height: 10px; background: #120e10; box-shadow: inset 0 0 0 2px #3d332c; }
input[type=range]::-moz-range-thumb { width: 16px; height: 22px; border: 0; border-radius: 0; background: #e8a030; box-shadow: 0 0 0 2px #120e10; }

/* Écrans bas (téléphone en paysage) : HUD compact. */
@media (max-height: 540px) {
  .pcard { width: 214px; }
  .pcard .portrait { width: 58px; height: 58px; }
  .pcard .portrait canvas { width: 46px; height: 46px; }
  .pname { font-size: 18px; line-height: 16px; }
  .pxbar, .pxbar .track { height: 11px; }
  .pxbar .ico { width: 12px; height: 12px; background-size: 12px 12px; }
  .track > b { display: none; }
  .status { display: none; }
  .minimap { width: 104px; height: 104px; }
  .quests { display: none; }
  .clock b { font-size: 20px; line-height: 18px; }
  .plate { padding: 0 6px; }
  .slot { width: 48px; height: 48px; }
  .slot img { width: 32px; height: 32px; }
  .grid-slots { grid-template-columns: repeat(5, 48px); }
  .gpanel.inv, .gpanel.struct, .gpanel.craft { top: 50%; max-height: calc(100vh - 12px); }
  h2 { font-size: 24px; }
  .ptitle { padding-bottom: 4px; margin-bottom: 4px; }
}
@media (pointer: coarse) {
  .weapon { display: none; }
  .chat { left: 50%; transform: translateX(-50%); bottom: auto; top: calc(max(8px, env(safe-area-inset-top)) + 44px); width: min(44vw, 420px); }
  .chat-log { max-height: 54px; font-size: 12px; }
  .chat-log.open { max-height: 120px; }
  .toasts { top: calc(max(8px, env(safe-area-inset-top)) + 104px); width: min(420px, 50vw); }
  .toast { font-size: 12px; padding: 2px 8px; }
  .toast:nth-last-child(n+3) { display: none; }
  .tmenu { left: 8px; transform: none; top: calc(max(8px, env(safe-area-inset-top)) + 84px); }
  .tmenu .tbtn { width: auto; height: 32px; padding: 0 8px; font-size: 12px; }
  .joy { width: 124px; height: 124px; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 40px); }
  .tbtns { grid-template-columns: repeat(4, 56px); gap: 8px; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 62px); }
  .tbtn { width: 56px; height: 56px; font-size: 12px; }
  .prompt { bottom: calc(max(8px, env(safe-area-inset-bottom)) + 64px); }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ===================================================================== v3 : survie, monde, social */
.tag.blue { color: #a8d8ff; box-shadow: 0 0 0 2px #120e10, inset 0 0 0 1px #2c5a8a; }
.tag.steel { color: #d8dee2; box-shadow: 0 0 0 2px #120e10, inset 0 0 0 1px #6f7d88; }
.slot[class*=" r-"]::before { content: ""; position: absolute; inset: -3px; box-shadow: inset 0 0 0 2px var(--rar), 0 0 6px var(--rar); pointer-events: none; opacity: .75; }
.slot.r-epic::before { animation: rarpulse 1.6s steps(4) infinite; }
@keyframes rarpulse { 50% { opacity: .35; } }
.mini.fat .track > i { background-color: #8a7ab0; box-shadow: inset 0 2px 0 #b8a8e0, inset 0 -2px 0 #4a3a6a; }
.mini.cold .track > i { background-color: #7fb8e0; box-shadow: inset 0 2px 0 #c8e8ff, inset 0 -2px 0 #2c5a8a; }
.mini.fuel .track > i { background-color: #e2c34a; box-shadow: inset 0 2px 0 #fff0a0, inset 0 -2px 0 #8a6a20; }
.equip { display: grid; grid-template-columns: repeat(2, 52px); gap: 4px; justify-content: center; margin: 6px 0; }
.equip .slot { width: 52px; height: 52px; }
.equip .slot img { width: 32px; height: 32px; }
.equip .slot.empty { opacity: .65; }
.eqlbl { font-size: 11px; color: var(--muted); text-align: center; line-height: 1; }
.horde-banner { position: absolute; top: calc(max(8px, env(safe-area-inset-top)) + 132px); left: 8px; color: #ffb0a0; font-family: var(--title); font-size: 22px; letter-spacing: 1px; box-shadow: inset 0 -3px 0 #d14a3c; animation: blink 1.4s steps(2) infinite; white-space: nowrap; }
.radio { position: absolute; bottom: calc(max(8px, env(safe-area-inset-bottom)) + 156px); left: 50%; transform: translateX(-50%); max-width: min(620px, 86vw); font-size: 15px; color: #c8f0c0; font-style: italic; white-space: normal; }
.radio .rico { font-style: normal; font-size: 20px; }
.vehgauge { position: absolute; right: 12px; bottom: calc(max(8px, env(safe-area-inset-bottom)) + 14px); flex-direction: column; align-items: stretch; gap: 4px; min-width: 170px; font-size: 14px; }
.vehgauge b { font-family: var(--title); font-size: 20px; font-weight: 400; color: var(--amber2); }
.vehgauge .mini { display: flex; flex-direction: row; align-items: center; gap: 6px; }
.vehgauge .mini .track { flex: 1; }
.tuto { position: absolute; left: 8px; bottom: calc(max(8px, env(safe-area-inset-bottom)) + 220px); width: min(380px, 70vw); display: flex; align-items: center; gap: 10px; font-size: 15px; z-index: 3; animation: tin .2s steps(3); pointer-events: auto; }
.tuto .tico { font-family: var(--title); font-size: 26px; color: var(--amber2); width: 28px; text-align: center; }
.tuto .grow { flex: 1; }
.tuto .tskip { background: none; border: 0; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; }
.recap { padding: 18px 26px; max-width: min(560px, 92vw); pointer-events: auto; }
.recap .big { font-size: clamp(40px, 8vw, 76px); }
.recap .cause { font-size: 20px; color: #ff9a8a; margin: 6px 0 12px; }
.recap .rstats { display: flex; gap: 18px; justify-content: center; margin-bottom: 10px; }
.recap .rstats div { display: flex; flex-direction: column; }
.recap .rstats b { font-family: var(--title); font-size: 30px; font-weight: 400; color: var(--amber2); }
.recap .rstats span { color: var(--muted); font-size: 14px; }
.skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.skill { padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.skill .lvl { font-family: var(--title); font-size: 20px; color: var(--amber2); }
.skill .pips { display: flex; gap: 3px; }
.skill .pips i { flex: 1; height: 6px; background: #2a2224; box-shadow: 0 0 0 1px #120e10; }
.skill .pips i.on { background: var(--amber2); }
.skill .eff { color: #b8f0b0; font-size: 13px; }
.emotes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.btn.emote { flex-direction: column; padding: 8px 4px; font-size: 13px; }
.btn.emote .em { font-size: 26px; line-height: 1.1; }
.notes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.note .linkish { background: none; border: 0; color: #c8fff4; font: inherit; cursor: pointer; padding: 0; }
.xbtn.small { width: 22px; height: 22px; font-size: 12px; }
@media (max-height: 540px), (pointer: coarse) {
  .tuto { bottom: auto; top: calc(max(8px, env(safe-area-inset-top)) + 146px); width: min(300px, 38vw); font-size: 12px; gap: 6px; }
  .tuto .tico { font-size: 18px; width: 16px; }
  .horde-banner { font-size: 14px; top: 104px; }
  .radio { bottom: auto; top: 50px; font-size: 13px; }
  .vehgauge { bottom: auto; top: 50%; min-width: 130px; font-size: 12px; }
  .emotes { grid-template-columns: repeat(4, 1fr); }
}
#hud.panel-open .tuto { display: none; }

/* ===================================================================
   Toujours à l'écran, sans barre de défilement (ui/fit.ts ajuste le zoom)
   =================================================================== */
html, body, * { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }
#app { overflow: hidden; }
.screen { height: 100%; overflow: hidden; }
#game { height: 100dvh; width: 100dvw; }
.fit-open, .fit-open .pbody, .fit-open .panel-scroll, .fit-open .modal-body { max-height: none !important; overflow: visible !important; }
.fit-open .pbody { flex: none; }

/* ---- Plein écran */
.fs-btn { appearance: none; cursor: pointer; font: 700 18px/1 system-ui, sans-serif; color: var(--ink); }
.fs-btn.corner { position: fixed; z-index: 60; top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); width: 44px; height: 44px; border: 6px solid transparent; border-image: var(--f-slot) 3 fill / 6px / 0 stretch; background: none; }
body:not(.menu-bg) .fs-btn.corner { display: none; }
.hud-top .fs-btn { pointer-events: auto; min-width: 34px; }
.fs-btn.on { color: var(--amber2); }

/* ---- Consoles et manette : jamais de boutons tactiles, focus bien visible */
html.console .touch, html[data-device="pad"] .touch, html[data-device="mouse"] .touch { display: none !important; }
html[data-device="pad"] :focus { outline: 3px solid #ffd27a !important; outline-offset: 2px; }
html[data-device="pad"] .slot:focus { filter: brightness(1.35); }
html[data-device="pad"] body:not(.menu-bg) #game { cursor: none; }

/* ---- Inventaire : onglets de fenêtre, glisser-déposer */
.wtabs { display: flex; gap: 6px; align-items: center; margin: 0 0 8px; }
.wtabs .wtab { flex: 1; text-align: center; }
.padkey { font: 700 12px/1 var(--px); padding: 3px 6px; border: 2px solid var(--muted); color: var(--muted); border-radius: 4px; white-space: nowrap; }
.slot { touch-action: none; -webkit-user-select: none; user-select: none; }
.slot.dragging { opacity: .35; }
.slot.drop-over { filter: brightness(1.5); outline: 2px solid var(--amber2); outline-offset: -4px; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 300; width: 44px; height: 44px; display: grid; place-items: center; pointer-events: none; filter: drop-shadow(0 3px 0 rgba(0,0,0,.65)); }
.drag-ghost img { width: 40px; height: 40px; image-rendering: pixelated; }

/* ---- Aide de combat (arme en main) */
.weapon .ctl { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; letter-spacing: 0; }

/* Écran couché et peu haut (téléphone en paysage, petite télé) : les fenêtres passent sur deux colonnes. */
@media (orientation: landscape) and (max-height: 600px) {
  .modal .modal-body > .stack > .stack { display: block; columns: 2; column-gap: 18px; }
  .modal .modal-body > .stack > .stack > * { break-inside: avoid; margin-bottom: 8px; }
  .modal .modal-body > .stack > .stack > h3 { break-after: avoid; }
}
/* Une fenêtre est ouverte : le bouton plein écran du coin ne doit pas cacher sa croix de fermeture. */
body:has(.modal-back) .fs-btn.corner { display: none; }