/* Écran d'arcade post-apo, nuit, rouille et sang. Mono-thème sombre volontaire. Interface PC : HUD dans les coins, jeu plein écran. */
:root {
  --bg: #0b0909;
  --panel: rgba(22, 16, 13, 0.9);
  --panel-solid: #19130f;
  --panel-2: #261c15;
  --edge: #4a3626;
  --edge-hi: #7a5a3a;
  --text: #eadfca;
  --muted: #a8977f;
  --blood: #c8321e;
  --blood-hi: #ff5a3a;
  --gold: #f0b83a;
  --toxic: #9ad040;
  --mary: #e8452c;
  --noopy: #c8904a;
  --pixel: "Press Start 2P", ui-monospace, "Courier New", monospace;
  --term: "VT323", ui-monospace, "Courier New", monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--text); overflow: hidden; font-family: var(--term); font-size: 20px; }
#game { position: fixed; inset: 0; display: block; image-rendering: pixelated; cursor: crosshair; }
body.playing #game { cursor: none; }
.layer { position: fixed; inset: 0; }
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; }
.dim { background: radial-gradient(ellipse at center, rgba(10,6,6,0.72), rgba(4,2,2,0.92)); }
.panel { background: var(--panel); border: 2px solid var(--edge); box-shadow: 0 0 0 2px #000, 6px 6px 0 rgba(0,0,0,0.5); }
h2 { font-family: var(--pixel); font-size: 18px; margin: 0; color: var(--gold); text-shadow: 3px 3px 0 #000; letter-spacing: 1px; font-weight: normal; }
h3 { font-family: var(--pixel); font-size: 11px; margin: 0 0 10px; color: var(--gold); font-weight: normal; letter-spacing: 1px; }
button.btn {
  font-family: var(--pixel); font-size: 12px; color: var(--text); background: var(--panel-2);
  border: 2px solid var(--edge); padding: 12px 18px; cursor: pointer; letter-spacing: 1px;
  box-shadow: 0 0 0 2px #000, 4px 4px 0 #000; text-transform: uppercase;
}
button.btn:hover, button.btn:focus-visible { border-color: var(--blood-hi); color: #fff; outline: none; background: #3a1a12; }
button.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 2px #000, 2px 2px 0 #000; }
button.btn.main { background: var(--blood); border-color: #ff8a5a; color: #fff; }
button.btn.main:hover { background: #e2462a; }
kbd { font-family: var(--term); font-size: 0.95em; background: #000; border: 1px solid var(--edge-hi); border-bottom-width: 3px; padding: 0 5px; color: #fff; border-radius: 2px; }

/* ---------- titre */
#title { background: linear-gradient(90deg, rgba(5,3,3,0.85) 0%, rgba(5,3,3,0.35) 30%, rgba(5,3,3,0.35) 70%, rgba(5,3,3,0.85) 100%); }
.poster { position: fixed; bottom: 0; height: min(94vh, 1150px); width: auto; filter: drop-shadow(8px 8px 0 rgba(0,0,0,0.6)); pointer-events: none; image-rendering: auto; }
.poster.m { left: max(0px, 4vw - 40px); }
.poster.n { right: max(0px, 4vw - 40px); }
.logo { text-align: center; position: relative; z-index: 1; }
.logo .l1 { font-family: var(--pixel); font-size: clamp(28px, 4.2vw, 64px); color: var(--blood-hi); line-height: 1.15;
  text-shadow: 4px 4px 0 #5a0a06, 8px 8px 0 #000, 0 0 40px rgba(255,80,40,0.4); }
.logo .amp { color: var(--gold); font-size: 0.55em; vertical-align: 0.35em; text-shadow: 3px 3px 0 #000; }
.logo .l2 { display: inline-block; margin-top: 18px; font-family: var(--pixel); font-size: clamp(14px, 1.6vw, 24px); color: #1a0e08; background: var(--gold);
  padding: 10px 18px 8px; transform: rotate(-2deg); box-shadow: 6px 6px 0 #000; letter-spacing: 3px; }
.menu { display: flex; flex-direction: column; gap: 12px; width: 300px; z-index: 1; margin-top: 18px; }
.hint { color: var(--muted); text-align: center; z-index: 1; font-size: 22px; }
.blink { animation: blink 1.4s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.35; } }
.foot { position: fixed; bottom: 14px; left: 0; right: 0; text-align: center; color: #6a5a4a; font-size: 18px; }

/* ---------- configuration */
#setup .wrap { width: min(1100px, 100%); padding: 24px 28px; display: flex; flex-direction: column; gap: 18px; }
.row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.tabs .btn[aria-pressed="true"] { background: var(--blood); border-color: #ff8a5a; color: #fff; }
.chars { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.char { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 12px; cursor: pointer; text-align: left; color: var(--text); font-family: var(--term); font-size: 20px; position: relative; background: var(--panel-2); border: 2px solid var(--edge); box-shadow: 0 0 0 2px #000; }
.char:hover { border-color: var(--edge-hi); }
.char .pic { width: 150px; height: 190px; overflow: hidden; background: #0e0a08; border: 1px solid #000; }
.char .pic img { width: 100%; height: auto; display: block; }
.char .nm { font-family: var(--pixel); font-size: 16px; margin: 4px 0 10px; }
.char dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; }
.char dt { color: var(--muted); } .char dd { margin: 0; }
.char .tag { position: absolute; top: -12px; right: 12px; font-family: var(--pixel); font-size: 10px; padding: 5px 7px; background: #000; color: var(--muted); border: 2px solid var(--edge); }
.char.p1 { border-color: var(--mary); } .char.p1 .tag { color: #fff; background: var(--mary); border-color: #000; }
.char.p2 { border-color: var(--noopy); } .char.p2 .tag { color: #1a0e08; background: var(--noopy); border-color: #000; }
.maps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.map { padding: 10px; cursor: pointer; text-align: left; color: var(--text); font-family: var(--term); font-size: 19px; position: relative; background: var(--panel-2); border: 2px solid var(--edge); box-shadow: 0 0 0 2px #000; }
.map:hover { border-color: var(--edge-hi); }
.map canvas { width: 100%; aspect-ratio: 16 / 10; display: block; image-rendering: pixelated; border: 1px solid #000; }
.map .nm { font-family: var(--pixel); font-size: 11px; margin: 10px 0 6px; line-height: 1.4; }
.map .ds { color: var(--muted); line-height: 1.05; }
.map .st { color: var(--gold); font-size: 22px; }
.map[aria-pressed="true"] { border-color: var(--gold); box-shadow: 0 0 0 2px #000, 0 0 0 4px rgba(240,184,58,0.35); }
.small { color: var(--muted); font-size: 19px; }
#setup .wrap { max-height: calc(100vh - 32px); overflow: auto; }
.loadout { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.lslot { width: 118px; padding: 8px 6px; background: #120d0a; border: 2px solid var(--edge); box-shadow: 0 0 0 2px #000; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 17px; line-height: 1; position: relative; }
.lslot img { width: 52px; height: 52px; image-rendering: pixelated; }
.lslot .k { position: absolute; left: 5px; top: 4px; font-family: var(--pixel); font-size: 8px; color: var(--muted); }
.lslot.empty { color: #5a4a3a; justify-content: center; }
.lslot .sz, .tcard .sz { font-family: var(--pixel); font-size: 8px; color: #1a0e08; background: var(--gold); padding: 2px 4px; }
#arsenal .wrap { width: min(1280px, 100%); max-height: calc(100vh - 32px); padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
#arsenal .cats { display: flex; gap: 6px; flex-wrap: wrap; }
#arsenal .cats .btn { font-size: 10px; padding: 8px 10px; }
#arsenal .cats .btn[aria-pressed="true"] { background: var(--blood); border-color: #ff8a5a; color: #fff; }
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; overflow: auto; padding: 4px 6px 4px 2px; min-height: 0; }
.tcard { display: grid; grid-template-columns: 60px 1fr; gap: 10px; padding: 8px; text-align: left; color: var(--text); font-family: var(--term); font-size: 18px; line-height: 1.05; background: var(--panel-2); border: 2px solid var(--edge); box-shadow: 0 0 0 2px #000; cursor: pointer; position: relative; }
.tcard:hover { border-color: var(--edge-hi); }
.tcard img { width: 60px; height: 60px; image-rendering: pixelated; background: #0e0a08; border: 1px solid #000; }
.tcard .nm { font-family: var(--pixel); font-size: 9px; line-height: 1.35; margin-bottom: 4px; }
.tcard .meta { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; flex-wrap: wrap; }
.tcard .cost { color: var(--gold); font-family: var(--pixel); font-size: 9px; }
.tcard .where { color: var(--muted); font-size: 16px; }
.tcard .ds { color: var(--muted); }
.tcard .st { color: #cfe0a0; font-size: 16px; margin-top: 3px; }
.tcard[aria-pressed="true"] { border-color: var(--gold); background: #2e2214; }
.tcard[aria-pressed="true"]::after { content: attr(data-n); position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; display: grid; place-items: center; font-family: var(--pixel); font-size: 10px; background: var(--gold); color: #1a0e08; border: 2px solid #000; }
.tcard.full { opacity: 0.45; }

.lab { margin: 0; min-width: 92px; }
#sModeDesc { margin-top: -8px; }
.chars.n1 { grid-template-columns: 1fr; max-width: 560px; }
.chars.n3, .chars.n4 { grid-template-columns: repeat(4, 1fr); gap: 12px; }
.chars.n3 .char, .chars.n4 .char { grid-template-columns: 1fr; font-size: 17px; }
.chars.n3 .char .pic, .chars.n4 .char .pic { width: 100%; height: 130px; }
.chars.n3 .char .nm, .chars.n4 .char .nm { font-size: 11px; }
.char { cursor: default; }
.char .pic img { object-position: top; }
.char .tag { white-space: nowrap; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; }
.cyc { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: var(--muted); font-family: var(--pixel); font-size: 9px; }
.cyc .btn { padding: 6px 10px; font-size: 10px; }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.maps { grid-template-columns: repeat(5, 1fr); gap: 10px; }
.map { font-size: 17px; padding: 8px; }
.map .nm { font-size: 9px; }
.map .lv { display: inline-block; background: var(--blood); color: #fff; padding: 2px 4px; margin-right: 6px; }
.map .st { font-size: 18px; }
.slot .who { position: absolute; right: 3px; top: 3px; display: flex; gap: 2px; }
.slot .who i { width: 6px; height: 6px; display: block; border: 1px solid #000; }
.pcard { transition: none; }
body.many .pcard { grid-template-columns: 56px 210px; }
body.many .pcard img.face { width: 56px; height: 56px; }
body.split .mini canvas { width: 190px; }

/* ---------- téléphone-manette */
.phonebtn { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.phonebtn i { width: 11px; height: 17px; border: 2px solid currentColor; border-radius: 3px; display: inline-block; position: relative; }
.phonebtn i::after { content: ''; position: absolute; left: 50%; bottom: 1px; width: 3px; height: 2px; margin-left: -1.5px; background: currentColor; }
.phwrap { width: min(980px, 100%); display: grid; grid-template-columns: 360px 1fr; gap: 28px; padding: 26px; align-items: start; }
.phqr { width: 360px; height: 360px; background: #f4ecdc; display: grid; place-items: center; box-shadow: 0 0 0 4px #000, 0 0 0 8px var(--gold), 10px 10px 0 8px rgba(0,0,0,0.5); position: relative; }
.phqr svg { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.phqr .phlogo { position: absolute; width: 74px; height: 74px; background: #000; border: 4px solid #f4ecdc; display: grid; place-items: center; font-family: var(--pixel); font-size: 11px; color: var(--gold); line-height: 1.4; text-align: center; }
.phspin { width: 40px; height: 40px; border: 5px solid #c8b890; border-top-color: var(--blood); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.phinfo { display: flex; flex-direction: column; gap: 12px; }
.phlead { margin: 0; font-size: 21px; line-height: 1.15; }
.phcode { display: flex; align-items: baseline; gap: 14px; font-family: var(--pixel); }
.phcode span { font-size: 10px; color: var(--muted); }
.phcode b { font-size: 30px; letter-spacing: 8px; color: var(--gold); font-weight: normal; text-shadow: 3px 3px 0 #000; }
.phurl { display: flex; gap: 8px; }
.phurl input { flex: 1; min-width: 0; font-family: var(--term); font-size: 18px; background: #0a0807; color: var(--text); border: 2px solid var(--edge); padding: 6px 10px; }
.phurl .btn { padding: 8px 12px; font-size: 10px; }
.phlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.phlist li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #120d0a; border: 2px solid var(--edge); font-size: 19px; }
.phlist li i { width: 10px; height: 10px; background: var(--toxic); box-shadow: 0 0 8px var(--toxic); }
.phlist li.empty { color: var(--muted); }
.phlist li b { font-family: var(--pixel); font-size: 9px; font-weight: normal; color: var(--gold); margin-left: auto; }
.phwarn { color: #ffb08a; }
.phnoqr { color: #2a1a10; font-family: var(--pixel); font-size: 11px; line-height: 1.8; text-align: center; padding: 24px; }
@media (max-width: 900px) { .phwrap { grid-template-columns: 1fr; } .phqr { width: 280px; height: 280px; margin: 0 auto; } }

/* ---------- multijoueur en ligne */
.onwrap { width: min(1240px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 22px 26px; display: flex; flex-direction: column; gap: 16px; }
.onstart { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; max-width: 360px; font-family: var(--pixel); font-size: 10px; color: var(--muted); }
.field input, .codein, #onSay { font-family: var(--term); font-size: 22px; background: #0a0807; color: var(--text); border: 2px solid var(--edge); padding: 8px 12px; outline: none; }
.field input:focus, .codein:focus, #onSay:focus { border-color: var(--gold); }
.codein { width: 170px; letter-spacing: 6px; text-transform: uppercase; font-family: var(--pixel); font-size: 16px; }
.onchoice { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ocard { background: var(--panel-2); border: 2px solid var(--edge); box-shadow: 0 0 0 2px #000; padding: 18px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.ocard p { margin: 0; color: var(--muted); font-size: 20px; line-height: 1.15; }
.onlobby { display: grid; grid-template-columns: 330px 1fr 300px; gap: 20px; align-items: start; }
.oncol { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.oncol h3 { margin: 0; }
.oninv { display: flex; gap: 14px; align-items: center; }
.oninv b { display: block; font-family: var(--pixel); font-size: 24px; letter-spacing: 6px; color: var(--gold); text-shadow: 3px 3px 0 #000; margin-top: 6px; font-weight: normal; }
.onqr { width: 120px; height: 120px; background: #f4ecdc; box-shadow: 0 0 0 3px #000, 0 0 0 6px var(--gold); flex: none; }
.onqr svg { width: 100%; height: 100%; display: block; }
.onme { display: grid; grid-template-columns: 110px 1fr; gap: 12px; background: var(--panel-2); border: 2px solid var(--edge); padding: 10px; align-items: start; }
.onme img { width: 110px; height: 150px; object-fit: cover; object-position: top; background: #0e0a08; border: 1px solid #000; }
.onme b { font-family: var(--pixel); font-size: 12px; font-weight: normal; }
.onme p { margin: 6px 0; }
.onme .btn.main, .onme .btn { margin-top: 10px; font-size: 10px; padding: 9px 10px; }
.oslots { display: flex; flex-direction: column; gap: 8px; }
.oslot { display: grid; grid-template-columns: 52px 1fr auto auto; gap: 12px; align-items: center; padding: 8px; background: var(--panel-2); border: 2px solid var(--edge); box-shadow: 0 0 0 2px #000; }
.oslot img { width: 52px; height: 52px; image-rendering: pixelated; object-fit: cover; background: #0e0a08; }
.oslot b { display: block; font-size: 21px; font-weight: normal; }
.oslot small { font-family: var(--pixel); font-size: 8px; }
.oslot .j { display: inline-block; font-family: var(--pixel); font-size: 8px; padding: 3px 5px; color: #000; background: var(--muted); margin-bottom: 4px; }
.oslot.me { background: #2e2214; }
.oslot.empty { grid-template-columns: auto 1fr; color: #6a5a4a; border-style: dashed; }
.oslot .rd { font-family: var(--pixel); font-size: 8px; color: #ff8a7a; }
.oslot .rd.ok { color: var(--toxic); }
.oslot .kick { padding: 6px 9px; font-size: 10px; }
.chatcol #onSay { font-size: 19px; }
.chatlog { height: 300px; overflow: auto; background: #0a0807; border: 2px solid var(--edge); padding: 8px 10px; font-size: 19px; line-height: 1.1; }
.chatlog p { margin: 0 0 6px; }
.chatlog b { color: var(--gold); font-weight: normal; }
.chatlog .sys { color: var(--muted); font-style: italic; }
@media (max-width: 1100px) { .onlobby { grid-template-columns: 1fr 1fr; } .chatcol { grid-column: span 2; } .onchoice { grid-template-columns: 1fr; } }
/* vue du joueur distant */
#remote { position: fixed; inset: 0; z-index: 5; font-family: var(--pixel); }
#rVideo { position: absolute; width: 2px; height: 2px; opacity: 0; pointer-events: none; }
#rCanvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; image-rendering: pixelated; }
#remote .pcard { position: fixed; }
#remote .res { pointer-events: none; }
.rpaused { position: fixed; left: 50%; top: 40%; transform: translateX(-50%); font-size: 14px; color: var(--gold); background: rgba(0,0,0,0.8); padding: 16px 20px; border: 2px solid var(--gold); }

/* ---------- paramètres */
.setwrap { width: min(920px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 24px 28px; display: flex; flex-direction: column; gap: 18px; }
.setgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.setgrid section { display: flex; flex-direction: column; gap: 12px; }
.rng { display: grid; grid-template-columns: 1fr 160px 56px; gap: 12px; align-items: center; font-size: 20px; }
.rng b { font-family: var(--pixel); font-size: 9px; color: var(--gold); font-weight: normal; text-align: right; }
.rng input { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; background: #0a0807; border: 2px solid var(--edge); outline: none; }
.rng input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 22px; background: var(--blood); border: 2px solid #000; box-shadow: 0 0 0 2px var(--edge-hi); cursor: pointer; }
.rng input::-moz-range-thumb { width: 14px; height: 20px; background: var(--blood); border: 2px solid #000; border-radius: 0; cursor: pointer; }
.rng input:focus-visible { border-color: var(--gold); }
.tog { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 20px; }
.tog .btn { min-width: 150px; font-size: 10px; padding: 9px 10px; }
.tog .btn[aria-pressed="true"] { background: #2a3a1a; border-color: var(--toxic); color: #e8ffd0; }
#setTest { align-self: flex-start; font-size: 10px; padding: 9px 12px; }
#fps { position: fixed; left: 50%; bottom: 4px; transform: translateX(-50%); font-family: var(--pixel); font-size: 9px; color: var(--toxic); text-shadow: 1px 1px 0 #000; z-index: 4; pointer-events: none; }
@media (max-width: 860px) { .setgrid { grid-template-columns: 1fr; } }

/* ---------- commandes */
#controls .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: min(1200px, 100%); }
#controls .col { padding: 16px; }
#controls dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 19px; line-height: 1.1; }
#controls dt { white-space: nowrap; }
#controls dd { margin: 0; color: var(--muted); }
.rules { width: min(1200px, 100%); padding: 14px 18px; font-size: 20px; line-height: 1.2; color: var(--muted); }
.rules b { color: var(--text); font-weight: normal; }

/* ---------- HUD */
#hud { pointer-events: none; font-family: var(--pixel); }
.box { background: var(--panel); border: 2px solid var(--edge); box-shadow: 0 0 0 2px #000; }
.res { position: fixed; left: 14px; top: 14px; display: flex; gap: 8px; }
.chip { display: flex; align-items: center; gap: 8px; padding: 8px 12px 7px 10px; font-size: 13px; font-variant-numeric: tabular-nums; }
.chip i { width: 14px; height: 14px; display: inline-block; }
.ico-heart { background: var(--blood); clip-path: polygon(50% 100%, 0 40%, 0 15%, 20% 0, 50% 18%, 80% 0, 100% 15%, 100% 40%); }
.ico-coin { background: var(--gold); border-radius: 50%; box-shadow: inset -3px -3px 0 #a86a10; }
.ico-skull { background: #e8dcc8; clip-path: polygon(15% 0, 85% 0, 100% 25%, 100% 65%, 80% 65%, 80% 100%, 20% 100%, 20% 65%, 0 65%, 0 25%); }
.chip.alert { border-color: var(--blood-hi); animation: blink 0.4s steps(2) 4; }
.phase { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 8px 10px 8px 16px; font-size: 11px; white-space: nowrap; }
.phase.build { border-color: var(--gold); color: var(--gold); }
.phase.wave { border-color: var(--blood); color: #ffb0a0; padding-right: 16px; }
.phase button { pointer-events: auto; font-size: 10px; padding: 8px 10px; }
.mini { position: fixed; right: 14px; top: 14px; padding: 6px; display: flex; flex-direction: column; gap: 6px; pointer-events: auto; }
.mini canvas { display: block; width: 260px; image-rendering: pixelated; background: #000; }
.mini .tools { display: flex; gap: 6px; justify-content: flex-end; }
.mini .tools button { font-family: var(--pixel); font-size: 9px; padding: 6px 8px; background: var(--panel-2); color: var(--text); border: 2px solid var(--edge); cursor: pointer; }
.mini .tools button:hover { border-color: var(--blood-hi); }
.mini .lbl { font-size: 9px; color: var(--muted); margin-right: auto; align-self: center; }
.pcard { position: fixed; bottom: 14px; display: grid; grid-template-columns: 72px 270px; gap: 10px; padding: 8px; }
.pcard img.face { width: 72px; height: 72px; image-rendering: pixelated; object-fit: cover; border: 2px solid; background: #0e0a08; }
.pcard .nm { font-size: 11px; display: flex; justify-content: space-between; align-items: baseline; }
.pcard .nm .k { color: var(--muted); font-size: 9px; }
.bar { height: 10px; background: #000; margin: 7px 0; border: 1px solid #000; position: relative; }
.bar > div { height: 100%; background: #5ad040; width: 100%; transition: width 0.12s linear; }
.pcard .line { white-space: nowrap; display: flex; justify-content: space-between; align-items: center; font-size: 9px; color: var(--muted); gap: 8px; }
.pcard .line img { width: 20px; height: 20px; image-rendering: pixelated; vertical-align: middle; }
.pcard .am { color: #fff; font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pcard .ab { display: flex; align-items: center; gap: 5px; }
.pcard .ab.cd { opacity: 0.45; }
.pcard .mode { margin-top: 6px; font-size: 8px; color: var(--muted); }
.pcard .mode.on { color: var(--gold); }
.pcard.down { filter: grayscale(1) brightness(0.6); }
.hotbar { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hotbar .hint { font-family: var(--pixel); font-size: 9px; color: var(--muted); padding: 6px 10px; text-shadow: 2px 2px 0 #000; }
.hotbar .hint.on { color: var(--gold); }
.slots { display: flex; gap: 6px; padding: 6px; transition: opacity 0.15s; }
.slots.off { opacity: 0.55; }
.slot { width: 58px; height: 66px; position: relative; background: #120d0a; border: 2px solid var(--edge); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 5px; pointer-events: auto; cursor: pointer; }
.slot img { width: 34px; height: 34px; image-rendering: pixelated; margin-bottom: 4px; }
.slot .c { font-size: 9px; color: var(--gold); font-variant-numeric: tabular-nums; }
.slot .n { position: absolute; left: 4px; top: 3px; font-size: 8px; color: var(--muted); }
.slot.poor .c { color: #7a5a4a; }
.slot.s1 { border-color: var(--mary); box-shadow: inset 0 0 0 2px var(--mary); }
.slot.s2 { border-color: var(--noopy); box-shadow: inset 0 0 0 2px var(--noopy); }
.slot.s1.s2 { box-shadow: inset 2px 2px 0 0 var(--mary), inset -2px -2px 0 0 var(--noopy); }
.slot.live { background: #2a1c10; }
.tip { font-family: var(--term); font-size: 19px; padding: 6px 12px; color: var(--text); max-width: 520px; text-align: center; }
.tip b { font-family: var(--pixel); font-size: 10px; color: var(--gold); font-weight: normal; margin-right: 6px; }
.banner { position: fixed; left: 0; right: 0; top: 24vh; text-align: center; pointer-events: none; }
.banner .t { font-family: var(--pixel); font-size: clamp(28px, 3.4vw, 54px); color: var(--blood-hi); text-shadow: 4px 4px 0 #4a0a06, 7px 7px 0 #000; }
.banner .s { font-size: 24px; max-width: 900px; margin-left: auto; margin-right: auto; color: var(--text); margin-top: 14px; text-shadow: 2px 2px 0 #000; }

/* ---------- fin + chargement */
#end .card { padding: 26px 34px; display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: 460px; }
#end .res2 { font-family: var(--pixel); font-size: 26px; text-shadow: 3px 3px 0 #000; }
#end .stars { font-size: 52px; letter-spacing: 10px; color: var(--gold); text-shadow: 3px 3px 0 #000; }
#end .stars .off { color: #3a2c22; }
#end dl { display: grid; grid-template-columns: auto auto; gap: 2px 30px; margin: 0; font-size: 22px; }
#end dt { color: var(--muted); } #end dd { margin: 0; text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
#loading { background: #0b0909; z-index: 50; }
#loading p { font-family: var(--pixel); font-size: 14px; color: var(--gold); }
@media (max-width: 1100px) { .poster { opacity: 0.35; } .mini canvas { width: 200px; } .pcard { grid-template-columns: 56px 180px; } .pcard img.face { width: 56px; height: 56px; } }
@media (prefers-reduced-motion: reduce) { .blink, .chip.alert { animation: none; } }