:root {
  --bg: #07080c;
  --ink-900: #0a0b10; --ink-800: #11131b; --ink-700: #1a1d29; --ink-600: #252a3a;
  --panel: rgba(14, 16, 24, 0.92);
  --panel-solid: #11131b;
  --line: #2a2f3d;
  --edge: rgba(200, 155, 60, 0.45);
  --text: #e8e6e3;
  --muted: #8f95a3;
  --gold: #e8c066; --gold-300: #f6dc9c; --gold-500: #c89b3c; --gold-700: #785a28;
  --blue: #3b9cff;
  --red: #ff4d5e;
  --green: #58d977;
  --display: 'Cinzel', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font: 15px/1.45 var(--ui); overflow: hidden; -webkit-font-smoothing: antialiased; }
.hidden { display: none !important; }
.muted { color: var(--muted); font-size: 12px; margin: 8px 0 0; }

button, input { font: inherit; color: inherit; }
button {
  background: #171b26; border: 1px solid var(--line); border-radius: 4px; padding: 9px 14px; cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.06s, box-shadow 0.15s, filter 0.15s;
}
button:hover:not(:disabled) { background: #1f2432; border-color: #3d4458; }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
button.ghost { background: transparent; }
input { background: rgba(0, 0, 0, 0.45); border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; width: 100%; }

/* Panneaux et boutons du menu : encre sombre, liseré d'or. */
.panel {
  background: linear-gradient(180deg, rgba(22, 25, 36, 0.94), rgba(11, 12, 18, 0.96));
  border: 1px solid var(--edge); border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 10px 30px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.panel-soft { background: rgba(10, 11, 16, 0.72); border: 1px solid rgba(200, 155, 60, 0.25); border-radius: 3px; backdrop-filter: blur(6px); }
.btn-gold, button.btn-gold {
  background: linear-gradient(180deg, #2a2f40, #161a25); border: 1px solid var(--gold-500); color: #f0e6d2;
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; font-size: 13px; box-shadow: inset 0 0 12px rgba(200, 155, 60, 0.15);
}
.btn-gold:hover:not(:disabled) { background: linear-gradient(180deg, #2f3548, #1a1f2c); border-color: var(--gold-300); color: #fff; box-shadow: inset 0 0 18px rgba(246, 220, 156, 0.25), 0 0 14px rgba(200, 155, 60, 0.35); }
.btn-primary, button.btn-primary, button.primary {
  background: linear-gradient(180deg, #1e6f8f, #0d3b52); border: 1px solid #5fd3ff; color: #e9fbff;
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; font-size: 13px;
  box-shadow: 0 0 16px rgba(95, 211, 255, 0.25), inset 0 0 14px rgba(95, 211, 255, 0.2);
}
.btn-primary:hover:not(:disabled), button.primary:hover:not(:disabled) { background: linear-gradient(180deg, #1e6f8f, #0d3b52); border-color: #5fd3ff; filter: brightness(1.2); box-shadow: 0 0 24px rgba(95, 211, 255, 0.45); }
.btn-primary:disabled, button.primary:disabled { opacity: 0.4; filter: grayscale(0.6); }
.big { padding: 14px 18px; font-size: 15px; }
.small { padding: 5px 12px; font-size: 11px; }
.input-dark { border-color: rgba(200, 155, 60, 0.4); color: #f0e6d2; outline: none; }
.input-dark:focus { border-color: var(--gold-300); box-shadow: 0 0 10px rgba(200, 155, 60, 0.3); }
.title-glow { text-shadow: 0 0 24px rgba(232, 192, 102, 0.45), 0 2px 0 #000; }
.eyebrow { margin: 0; color: var(--gold-500); letter-spacing: 0.34em; text-transform: uppercase; font-size: 12px; font-weight: 600; }
.cap { color: var(--gold); letter-spacing: 0.16em; text-transform: uppercase; font-size: 11px; font-weight: 600; }
.stack { display: flex; flex-direction: column; gap: 12px; }
@keyframes floatIn { from { opacity: 0; transform: translateY(-8px) scale(0.96); } to { opacity: 1; transform: none; } }
.anim-in { animation: floatIn 0.25s ease-out both; }
@keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 8px rgba(232, 192, 102, 0.35); } 50% { box-shadow: 0 0 22px rgba(232, 192, 102, 0.7); } }
.scroll-thin::-webkit-scrollbar { width: 6px; }
.scroll-thin::-webkit-scrollbar-thumb { background: rgba(200, 155, 60, 0.4); border-radius: 3px; }

.screen { position: fixed; inset: 0; }
/* Fond des menus : lueur bleue en bas à gauche, rouge en haut à droite, filets d'or, bords assombris. */
.backdrop {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.7) 100%),
    linear-gradient(135deg, transparent calc(50% - 1px), rgba(232, 192, 102, 0.07) 50%, transparent calc(50% + 1px)),
    radial-gradient(ellipse at 20% 80%, rgba(59, 156, 255, 0.22), transparent 55%),
    radial-gradient(ellipse at 85% 15%, rgba(255, 77, 94, 0.2), transparent 55%),
    radial-gradient(ellipse at 50% 50%, #1a1626 0%, #07080c 75%);
}
.backdrop::after { content: ''; position: absolute; inset: 5%; border: 1px solid rgba(232, 192, 102, 0.07); }

/* ---------- Accueil ---------- */
#home { display: grid; place-items: center; padding: 24px; overflow: auto; }
.home-wrap { position: relative; z-index: 1; display: flex; align-items: center; gap: 48px; width: min(1040px, 100%); }
.home-left { flex: 1; min-width: 0; }
h1 { font: 800 clamp(48px, 8vw, 88px)/1 var(--display); margin: 10px 0 0; color: var(--gold-300); letter-spacing: 0.01em; }
.tag { color: #a1a6b4; margin: 22px 0 0; max-width: 30em; }
.home-heroes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.home-heroes div { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: #a1a6b4; }
.home-panel { width: 380px; flex: none; padding: 28px; display: flex; flex-direction: column; gap: 8px; }
.home-panel label { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.home-panel #name { font-size: 18px; margin-bottom: 16px; }
#code { text-transform: uppercase; letter-spacing: 0.4em; font: 700 28px/1.2 ui-monospace, Menlo, monospace; text-align: center; }
.err { color: #ff8f86; min-height: 1.4em; margin: 6px 0 0; font-size: 13px; }
@media (max-width: 860px) { .home-wrap { flex-direction: column; align-items: stretch; gap: 24px; } .home-panel { width: auto; } }

/* ---------- Salon ---------- */
#lobby { display: flex; flex-direction: column; overflow: auto; }
.lobby-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 32px 0; flex-wrap: wrap; }
.codebtn { display: flex; align-items: center; gap: 14px; background: none; border: 0; padding: 4px 0 0; }
.codebtn:hover:not(:disabled) { background: none; }
.codebtn b { font: 700 46px/1 ui-monospace, Menlo, monospace; letter-spacing: 0.3em; color: var(--gold-300); }
.codebtn span { color: #a1a6b4; font-size: 13px; }
.codebtn:hover span { color: #fff; }
.head-actions { display: flex; gap: 10px; }
.lobby-grid { position: relative; z-index: 1; display: flex; gap: 22px; padding: 22px 32px 26px; flex: 1 0 auto; align-items: stretch; }
.teams { width: 350px; flex: none; display: flex; flex-direction: column; gap: 16px; }
.team { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.team.t0 { border-color: rgba(59, 156, 255, 0.4); } .team.t1 { border-color: rgba(255, 77, 94, 0.4); }
.team-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.team h3 { margin: 0; font: 600 20px/1.2 var(--display); }
.team.t0 h3 { color: #8fc6ff; } .team.t1 h3 { color: #ff9aa4; }
.team h3 small { font: 400 13px var(--ui); color: var(--muted); margin-left: 4px; }
.team ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.team li { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 3px; background: rgba(0, 0, 0, 0.35); border: 1px solid transparent; min-height: 54px; }
.team li.me { border-color: var(--gold-500); }
.team li.empty { background: transparent; border: 1px dashed rgba(120, 125, 140, 0.4); }
.team li.off { opacity: 0.5; }
.pn { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; overflow-wrap: anywhere; }
.pn small { color: var(--muted); font-size: 12px; }
.pn em { font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); margin-left: 5px; }
.pn .mini { display: inline-flex; gap: 3px; margin-left: 6px; font-size: 12px; }
.pn em.offl { color: #fbbf24; text-transform: none; letter-spacing: 0; font-size: 11px; }
.x { padding: 2px 9px; border-radius: 3px; }
.disc { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; font: 800 15px var(--display); color: #0c1116; flex: none;
  box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.3), inset 0 3px 6px rgba(255, 255, 255, 0.3), 0 0 0 2px rgba(200, 155, 60, 0.55); }
.disc.big { width: 54px; height: 54px; font-size: 24px; }
.picker { flex: 1; min-width: 0; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.picker h2 { font: 600 24px/1.2 var(--display); margin: 0; color: var(--gold-300); }
#heroGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.hcard { display: flex; align-items: center; gap: 12px; padding: 10px 12px; text-align: left; background: rgba(0, 0, 0, 0.3); border: 1px solid #3a3f4e; border-radius: 3px; }
.hcard:hover:not(:disabled) { background: rgba(0, 0, 0, 0.3); border-color: var(--gold-500); }
.hcard b { display: block; font: 600 17px/1.15 var(--display); }
.hcard small { color: var(--muted); font-size: 12px; }
.hcard.sel { border-color: var(--gold-300); background: rgba(120, 90, 40, 0.25); animation: pulseGlow 1.6s ease-in-out infinite; }
#heroInfo { flex: 1 1 auto; min-height: 120px; overflow-y: auto; }
#heroInfo .hname { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
#heroInfo h3 { margin: 0; font: 600 28px/1.2 var(--display); color: var(--gold-300); }
#heroInfo .sub { color: #a1a6b4; font-style: italic; }
#heroInfo .role { margin-left: auto; color: var(--muted); font-size: 12px; }
.statgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 10px; text-align: center; font-size: 12px; }
.statgrid div { background: rgba(0, 0, 0, 0.4); border-radius: 3px; padding: 6px 2px; }
.statgrid span { display: block; color: var(--muted); }
.statgrid b { font-weight: 600; }
.abgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.abrow { display: flex; gap: 10px; background: rgba(0, 0, 0, 0.35); border-radius: 3px; padding: 9px; font-size: 13px; }
.abrow .ic { width: 40px; height: 40px; flex: none; border-radius: 3px; background: var(--ink-700); border: 1px solid var(--gold-700); display: grid; place-items: center; font-size: 19px; }
.abrow b { font-weight: 600; }
.abrow b kbd { font: 700 12px var(--ui); color: var(--gold); margin-right: 6px; }
.abrow p { margin: 2px 0 0; color: #a1a6b4; font-size: 12px; line-height: 1.35; }
.abrow small { color: var(--muted); font-size: 11px; }
.loadout { border-top: 1px solid rgba(120, 90, 40, 0.4); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.loadrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.loadrow .cap { width: 150px; }
.slots { display: flex; gap: 8px; flex-wrap: wrap; }
.slotbtn { display: flex; align-items: center; gap: 8px; padding: 5px 10px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(120, 90, 40, 0.5); border-radius: 3px; font-size: 13px; text-align: left; }
.slotbtn:hover:not(:disabled) { background: rgba(0, 0, 0, 0.3); border-color: var(--gold); }
.slotbtn.on { border-color: #67e8f9; background: rgba(8, 51, 68, 0.4); }
.slotbtn .ic { font-size: 22px; }
.slotbtn small { display: block; font-size: 10px; color: var(--muted); }
.hint { color: var(--muted); font-size: 12px; }
.pickgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; background: rgba(0, 0, 0, 0.3); border-radius: 3px; padding: 8px; }
.pick { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; background: transparent; border-color: transparent; font-size: 11px; line-height: 1.2; text-align: center; }
.pick:hover:not(:disabled) { background: rgba(255, 255, 255, 0.05); }
.pick.sel { border-color: var(--gold-500); }
.pick .ic { font-size: 24px; }
#loadInfo { min-height: 2.7em; margin: 0; }
.lobby-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(120, 90, 40, 0.4); padding-top: 14px; flex-wrap: wrap; }
#lobbyMsg { color: #a1a6b4; font-size: 14px; }
@media (max-width: 980px) { .lobby-grid { flex-direction: column; } .teams { width: auto; flex-direction: row; } #heroGrid { grid-template-columns: repeat(2, 1fr); } .abgrid { grid-template-columns: 1fr; } .statgrid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Réglages ---------- */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(4, 5, 8, 0.72); padding: 16px; }
.modal-card { width: min(480px, 100%); padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.modal-card h2 { margin: 0 0 8px; font: 600 24px/1.2 var(--display); color: var(--gold-300); }
.opt { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(120, 90, 40, 0.3); cursor: pointer; }
.opt small { display: block; color: var(--muted); font-size: 12px; }
.opt input { width: 20px; height: 20px; accent-color: var(--gold-500); flex: none; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.modal-foot #quitGame { margin-right: auto; }
#settings .modal-card { width: min(620px, 100%); max-height: 92vh; overflow-y: auto; }
.set-head { display: flex; align-items: flex-end; gap: 22px; border-bottom: 1px solid rgba(120, 90, 40, 0.4); margin-bottom: 6px; }
.set-head h2 { margin: 0 0 8px; }
.set-head nav { display: flex; gap: 16px; }
.set-head nav button { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 0 2px 8px; font: 700 12px var(--ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.set-head nav button:hover { color: var(--text); }
.set-head nav button.on { color: var(--gold-300); border-bottom-color: var(--gold-300); }
.opt.col { flex-direction: column; align-items: stretch; gap: 6px; cursor: default; }
.opt .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.opt .row b { color: var(--muted); font-weight: 600; font-size: 13px; }
.opt input[type="range"] { width: 100%; height: auto; }
.seg { display: flex; border: 1px solid var(--gold-700); border-radius: 3px; overflow: hidden; }
.seg button { background: none; border: 0; padding: 5px 11px; font: 700 11px var(--ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.seg button:hover { color: #fff; }
.seg button.on { background: var(--gold-700); color: #fff; }
.keys-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 10px; font-size: 12px; color: var(--muted); }
.keygrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; max-height: 50vh; overflow-y: auto; padding-right: 4px; }
.keyrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(0, 0, 0, 0.3); border-radius: 3px; padding: 6px 10px; font-size: 13px; }
.keyrow button { min-width: 64px; padding: 4px 8px; border-radius: 3px; border: 1px solid var(--gold-700); background: #0b0d14; color: var(--gold-300); font: 700 13px ui-monospace, Menlo, monospace; cursor: pointer; }
.keyrow button:hover { border-color: var(--gold-300); }
.keyrow button.cap { border-color: #67e8f9; background: rgba(22, 78, 99, 0.5); color: #cffafe; animation: capPulse 1s ease-in-out infinite; }
@keyframes capPulse { 50% { opacity: 0.55; } }
.keys-note { display: block; margin-top: 10px; font-size: 12px; color: var(--muted); }
@media (max-width: 560px) { .keygrid { grid-template-columns: 1fr; } }

/* ---------- Coupure du réseau : voile et message bref ---------- */
#netVeil { z-index: 60; }
#netVeil .modal-card { width: min(440px, 100%); align-items: center; text-align: center; gap: 12px; }
#netVeil h2 { margin: 0; }
#netVeil p { margin: 0; color: #a1a6b4; }
.spin { width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(200, 155, 60, 0.25); border-top-color: var(--gold-300); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 61; background: var(--panel); border: 1px solid var(--edge); border-radius: 6px; padding: 8px 18px; font-size: 14px; pointer-events: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }

/* ---------- Jeu ---------- */
#game { user-select: none; -webkit-user-select: none; background: #000; }
#cv, #ov { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Mort : le monde passe en gris, en fondu, tant qu'on attend de revenir. */
#cv { transition: filter 0.6s; }
#cv.dead { filter: grayscale(0.85) brightness(0.75); }
/* Pastille d'un héros (fil des éliminations, tableau des scores, panneau de la cible) : initiale sur sa couleur, cerclée à celle de son camp. */
.hd { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 800 11px var(--ui); font-style: normal; color: #0c1116; flex: none; box-shadow: 0 0 0 2px var(--ring, #2a2f3d); }
.hd.r0 { --ring: var(--blue); } .hd.r1 { --ring: var(--red); } .hd.r2 { --ring: var(--gold-500); }
.hd.dead { filter: grayscale(1) brightness(0.6); }
.hd.npc { background: #1a2028; color: var(--text); font-size: 12px; }
#ov { pointer-events: none; }
#game > div, #mini { position: absolute; }

#top { top: 8px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 5px 14px; font-variant-numeric: tabular-nums; }
#top .k { font-size: 20px; min-width: 22px; text-align: center; }
.t0 { color: var(--blue); } .t1 { color: var(--red); }
#clock { font-weight: 600; }
#objs { color: var(--muted); font-size: 12px; border-left: 1px solid var(--line); padding-left: 12px; white-space: nowrap; }
.pips { display: flex; gap: 3px; }
.pips i { width: 9px; height: 9px; border-radius: 50%; display: block; }

/* Annonce : une seule grande bannière à la fois, aux couleurs de l'équipe concernée (or si elle est neutre). */
#announce { top: 100px; left: 50%; transform: translateX(-50%); pointer-events: none; width: min(940px, 92vw); text-align: center; }
#announce div { display: inline-block; padding: 9px 46px; font: 800 19px/1.3 var(--display); letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-300);
  border-top: 1px solid rgba(200, 155, 60, 0.6); border-bottom: 1px solid rgba(200, 155, 60, 0.6);
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.78) 16%, rgba(0, 0, 0, 0.78) 84%, transparent); text-shadow: 0 0 18px rgba(0, 0, 0, 0.9); animation: bannerIn 0.35s ease-out; }
#announce .t0 { color: #b5dbff; border-color: rgba(59, 156, 255, 0.65); } #announce .t1 { color: #ffb9b2; border-color: rgba(255, 77, 94, 0.65); }
@keyframes bannerIn { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: none; } }
#feed { top: 8px; right: 8px; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; pointer-events: none; font-size: 13px; }
#feed div { display: flex; align-items: center; gap: 7px; background: rgba(6, 10, 16, 0.8); border: 1px solid var(--line); padding: 4px 10px 4px 7px; border-radius: 6px; animation: pop 0.25s ease-out; }
#feed .vs { color: #ff6b77; font-size: 12px; }
#feed small { color: var(--muted); font-size: 11px; }
#feed .npc-name { color: var(--muted); }
#flash { bottom: 190px; left: 50%; transform: translateX(-50%); color: #ffd9a0; font-weight: 600; text-shadow: 0 2px 6px #000; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
#flash.on { opacity: 1; }
@keyframes pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Panneau de la cible : l'unité sélectionnée au clic gauche, sinon celle que survole le curseur. */
#target { left: 8px; top: 36px; width: 284px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; pointer-events: none; font-size: 12px; --tc: var(--gold-500); --tl: var(--gold-300); }
#target[data-team="0"] { --tc: var(--blue); --tl: #8fc6ff; } #target[data-team="1"] { --tc: var(--red); --tl: #ff9aa4; }
#target.picked { border-color: var(--gold-500); }
#target .thead { display: flex; align-items: center; gap: 10px; }
#target .hd { width: 34px; height: 34px; font-size: 16px; --ring: var(--tc); }
#target .tbody { flex: 1; min-width: 0; }
#tgName { display: block; font-size: 13px; font-weight: 600; color: var(--tl); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#target .tbar { height: 9px; margin-top: 4px; background: #070b0d; border: 1px solid #000; border-radius: 2px; overflow: hidden; }
#tgFill { display: block; height: 100%; width: 0; background: var(--tc); }
#tgInfo { margin-top: 6px; color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1.4; }
#tgInfo b { color: var(--text); font-weight: 600; }

#stats { left: 8px; bottom: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; display: grid; grid-template-columns: auto auto; gap: 2px 14px; font-size: 12px; font-variant-numeric: tabular-nums; }
#stats span { color: var(--muted); } #stats b { text-align: right; font-weight: 600; }

#bar { bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
#portrait.dead { filter: grayscale(1) brightness(0.65); }
#portrait { transition: filter 0.6s; width: 74px; height: 74px; border-radius: 50%; position: relative; display: grid; place-items: center; font: 800 30px var(--ui); color: #0c1116; border: 3px solid var(--line); box-shadow: inset 0 -10px 16px rgba(0, 0, 0, 0.3), inset 0 6px 10px rgba(255, 255, 255, 0.25); }
#plv { position: absolute; right: -6px; bottom: -4px; background: #0c1317; color: var(--text); border: 1px solid var(--gold); border-radius: 50%; width: 26px; height: 26px; display: grid; place-items: center; font: 700 13px var(--ui); }
#mid { display: flex; flex-direction: column; gap: 4px; width: 300px; }
#buffs { display: flex; gap: 6px; min-height: 22px; font-size: 12px; }
#buffs .rune { border-color: var(--gold-500); color: var(--gold-300); } #buffs .rune.off { opacity: 0.55; }
#buffs span { background: #0c1317; border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
#abilities { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.abw { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.abw .up { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); z-index: 3; width: 23px; height: 23px; padding: 0; border-radius: 50%; border: 1px solid var(--gold-300); background: linear-gradient(#d2a545, #8a6a24); color: #fff; font: 700 16px/1 var(--ui); cursor: pointer; animation: upPulse 1.3s ease-in-out infinite; }
.abw .up:hover { filter: brightness(1.25); }
@keyframes upPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232, 192, 102, 0.55); } 50% { box-shadow: 0 0 0 6px rgba(232, 192, 102, 0); } }
.abw .pips { display: flex; justify-content: center; gap: 3px; height: 4px; }
.abw .pips i { width: 9px; height: 4px; border-radius: 1px; background: #2a333b; }
.abw .pips i.on { background: var(--gold-300); box-shadow: 0 0 4px rgba(246, 220, 156, 0.7); }
#buffs .pts { border-color: var(--gold-300); color: #fff; background: rgba(138, 106, 36, 0.55); }
#tip b em { font: 600 11px var(--ui); color: var(--gold-300); margin-left: 6px; }
.ab { position: relative; height: 58px; border-radius: 10px; background: #0c1317; border: 1px solid #3a4f5b; display: grid; place-items: center; font-size: 26px; overflow: hidden; }
.ab .key { position: absolute; left: 4px; top: 2px; font: 700 11px var(--ui); color: var(--gold); }
.ab .cost { position: absolute; right: 4px; bottom: 2px; font: 600 10px var(--ui); color: #7fb2ff; }
.ab .cd { position: absolute; inset: 0; background: rgba(5, 8, 10, 0.78); display: none; place-items: center; font: 700 18px var(--ui); color: #fff; clip-path: inset(calc((1 - var(--p, 1)) * 100%) 0 0 0); }
.ab.oncd .cd { display: grid; }
.ab.oncd .ico { filter: grayscale(1); opacity: 0.6; }
.ab.nomana { border-color: #2a4a80; } .ab.nomana .ico { opacity: 0.45; }
.ab.locked .ico { filter: grayscale(1); opacity: 0.3; }
.ab.aim { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(227, 184, 92, 0.35); }
.gauge { position: relative; height: 16px; background: #070b0d; border-radius: 5px; overflow: hidden; border: 1px solid #1c272d; }
.gauge i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; }
.gauge b { position: relative; display: block; text-align: center; font: 600 11px/14px var(--ui); text-shadow: 0 1px 2px #000; font-variant-numeric: tabular-nums; }
.gauge.hp i { background: linear-gradient(#63e083, #2f9c50); }
.gauge.hp #shFill { background: linear-gradient(#f4f8fb, #c3d0da); }      /* bouclier : il prolonge la vie, en blanc */
.gauge.mp { height: 13px; } .gauge.mp i { background: linear-gradient(#5b9cf2, #2c62b8); } .gauge.mp b { line-height: 11px; font-size: 10px; }
.gauge.xp { height: 5px; } .gauge.xp i { background: var(--gold); }
#inv { display: flex; flex-direction: column; gap: 6px; }
#slots { display: grid; grid-template-columns: repeat(3, 38px); gap: 4px; }
.slot { width: 38px; height: 38px; border-radius: 4px; background: #0c1317; border: 1px solid var(--line); display: grid; place-items: center; font-size: 20px; overflow: hidden; }
.slot svg { display: block; }
.slot { position: relative; }
.slot::before { content: attr(data-k); position: absolute; top: 1px; left: 4px; font: 600 9px var(--ui); color: var(--muted); }
.slot[data-n]:not([data-n=""])::after, .it[data-n]:not([data-n=""])::before { content: attr(data-n); position: absolute; right: 3px; bottom: 1px; font: 700 11px var(--ui); color: #fff; text-shadow: 0 1px 2px #000; }
.slot.usable { cursor: pointer; border-color: #4d6a7a; }
#goldBtn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 8px; color: var(--gold); font-variant-numeric: tabular-nums; }
.invrow { display: flex; gap: 4px; }
.invrow #goldBtn { flex: 1; }
#wardBtn { position: relative; display: flex; align-items: center; gap: 4px; padding: 5px 7px; font-variant-numeric: tabular-nums; }
#wardBtn.empty span { filter: grayscale(1); opacity: 0.45; }
#wardBtn[data-cd]:not([data-cd=""])::after { content: attr(data-cd); position: absolute; left: 50%; top: -15px; transform: translateX(-50%); font: 600 10px var(--ui); color: var(--muted); white-space: nowrap; }
#sumcol { display: flex; flex-direction: column; gap: 5px; align-self: flex-end; }
#sums { display: flex; flex-direction: column; gap: 5px; }
.ab.sum { width: 42px; height: 42px; font-size: 21px; border-radius: 9px; cursor: pointer; }
#recallBtn { padding: 0; color: inherit; }
#recallBtn svg { display: block; }
#recallBtn.on { border-color: #8fd3ff; box-shadow: 0 0 0 2px rgba(143, 211, 255, 0.35); }
.ab.sum .cd { font-size: 13px; }
.sumtitle { margin-top: 14px; }
#sumGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.scard { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 4px 5px; font-size: 11px; line-height: 1.2; text-align: center; }
.scard .ic { font-size: 21px; }
.scard.sel { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.scard kbd { position: absolute; top: 3px; left: 5px; font: 700 10px var(--ui); color: var(--gold); }
#sumInfo { min-height: 2.6em; }
#goldBtn.can { border-color: var(--gold); }
#goldBtn.pop { animation: goldpop 0.45s ease-out; }
@keyframes goldpop {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(227, 184, 92, 0.7); }
  35% { transform: scale(1.14); }
  100% { transform: scale(1); box-shadow: 0 0 0 12px rgba(227, 184, 92, 0); }
}
#mine { color: var(--muted); font-size: 12px; border-left: 1px solid var(--line); padding-left: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
#mine b { color: var(--text); font-weight: 600; }
#mine i { font-style: normal; margin: 0 6px; }

/* Mini-carte : un cadre de laiton sombre, comme un instrument posé dans l'angle de l'écran. */
#mini { right: 8px; bottom: 8px; width: 264px; height: 264px; border: 2px solid #7c6a3e; border-radius: 4px; background: #090c0c; cursor: crosshair;
  box-shadow: 0 0 0 1px #0a0c0d, 0 0 0 3px #2a2416, inset 0 0 0 1px rgba(0, 0, 0, 0.7), 0 6px 22px rgba(0, 0, 0, 0.55); }

/* Boutique : catégories à gauche, grille d'objets au centre, fiche et recette à droite. */
#shop { inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(0, 0, 0, 0.55); }
.shop-card { width: min(1280px, 96vw); height: min(800px, 92vh); display: flex; flex-direction: column; }
.shop-card header { display: flex; align-items: center; gap: 16px; padding: 12px 22px; border-bottom: 1px solid rgba(120, 90, 40, 0.4); }
.shop-card h3 { margin: 0; font: 600 28px/1 var(--display); color: var(--gold-300); }
#shopSearch { width: 250px; padding: 7px 12px; font-size: 14px; }
#shopHint { flex: 1; color: #fcd9a0; font-size: 13px; }
#shopHint:not(:empty) { border: 1px solid rgba(245, 158, 11, 0.4); background: rgba(69, 39, 6, 0.4); border-radius: 3px; padding: 4px 12px; flex: 0 1 auto; }
.shop-gold { margin-left: auto; color: var(--gold-300); font-size: 22px; font-variant-numeric: tabular-nums; }
.shop-body { flex: 1; min-height: 0; display: flex; }
.shop-left { flex: 1.5; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid rgba(120, 90, 40, 0.3); }
#shopCats { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 20px 0; }
#shopCats button { padding: 5px 12px; font-size: 13px; border-radius: 3px; background: rgba(0, 0, 0, 0.3); border-color: #3a3f4e; }
#shopCats button.sel { border-color: var(--gold-300); color: var(--gold-300); background: rgba(120, 90, 40, 0.25); }
#shopGrid { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 20px; }
#shopGrid h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 9px; font: 700 11px var(--ui); letter-spacing: 0.25em; text-transform: uppercase; color: var(--fam, var(--muted)); }
#shopGrid h4::after { content: ''; flex: 1; height: 1px; background: var(--fam, var(--line)); opacity: 0.35; }
#shopGrid h4:not(:first-child) { margin-top: 20px; }
.cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 7px; background: rgba(0, 0, 0, 0.3); border: 1px solid #3a3f4e; border-radius: 3px; }
.tile:hover:not(:disabled) { background: rgba(0, 0, 0, 0.3); border-color: var(--gold-500); }
.tile svg { display: block; border-radius: 3px; }
.tile .nm { font-size: 12.5px; font-weight: 600; line-height: 1.15; text-align: center; }
.tile .pr { font-size: 12.5px; font-weight: 700; color: #7c8494; font-variant-numeric: tabular-nums; }
.tile.can .pr { color: var(--gold-300); }
.tile .pr s { font-weight: 400; font-size: 10px; color: #6b7280; margin-left: 4px; }
.tile.no .pr { color: #f87171; }                                           /* inabordable ou bloqué : prix en rouge, icône assombrie */
.tile.no svg { filter: brightness(0.5) saturate(0.6); }
.tile.dim { opacity: 0.38; }                                              /* pièce déjà intégrée à un composant possédé */
.tile.sel { border-color: var(--gold-300); box-shadow: 0 0 0 1px var(--gold-300), 0 0 14px rgba(200, 155, 60, 0.35); }
.tile.own::after { content: '✔'; position: absolute; top: 3px; right: 6px; font: 700 12px var(--ui); color: #34d399; }
.tile.mini { padding: 3px; }
.tile.mini.own::after { top: -6px; right: -6px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: #10b981; color: #000; font-size: 10px; }
.shop-tip { margin: 0; padding: 8px 20px; border-top: 1px solid rgba(120, 90, 40, 0.3); font-size: 12px; color: var(--muted); }
.shop-right { width: 410px; flex: none; display: flex; flex-direction: column; min-height: 0; }
#shopDetail { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
#shopDetail > * { flex: none; }      /* la fiche défile ; ses blocs ne s'écrasent pas (l'arbre de recette surtout) */
.dhead { display: flex; gap: 14px; align-items: center; }
.dhead svg { flex: none; border-radius: 4px; }
.dhead b { display: block; font: 600 22px/1.2 var(--display); }
.dhead small { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fam, var(--muted)); }
.dhead .price { display: block; margin-top: 3px; font-size: 19px; font-weight: 700; color: var(--gold-300); }
.dhead .price s { font-size: 13px; font-weight: 400; color: #6b7280; margin-left: 8px; }
#shopDetail h5 { margin: 4px 0 0; font: 700 11px var(--ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.treebox { display: flex; justify-content: center; overflow-x: auto; border: 1px solid rgba(120, 90, 40, 0.3); background: rgba(0, 0, 0, 0.3); border-radius: 3px; padding: 12px 8px; }
.node { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.node > small { font-size: 11px; color: var(--gold-300); font-variant-numeric: tabular-nums; }
.kids { display: flex; gap: 10px; margin-top: 4px; padding-top: 9px; border-top: 1px solid rgba(200, 155, 60, 0.45); }
.treenote { font-size: 11px; color: var(--muted); margin: 0; }
.treetotal { font-size: 12px; color: var(--muted); margin: 0; text-align: center; font-variant-numeric: tabular-nums; }
.treetotal span { color: #6ee7b7; } .treetotal b { color: var(--gold-300); }
.dstats { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.dstats li { background: rgba(0, 0, 0, 0.35); border-radius: 3px; padding: 6px 12px; font-size: 14px; color: #a7f3d0; }
.dstats li.passive { color: #e6d08a; font-size: 13px; line-height: 1.4; border: 1px solid rgba(200, 155, 60, 0.35); background: rgba(120, 90, 40, 0.12); }
.into { display: flex; flex-wrap: wrap; gap: 6px; }
.after div { display: flex; justify-content: space-between; padding: 2px 0; font-size: 13px; color: #a1a6b4; }
.after i { color: #555b6b; font-style: normal; margin: 0 6px; }
.after b { color: #6ee7b7; }
.shop-buy { padding: 0 20px 10px; }
.shop-buy button { width: 100%; }
.why { margin: 4px 0 0; min-height: 1.3em; text-align: center; font-size: 12px; color: #fca5a5; }
.shop-inv { border-top: 1px solid rgba(120, 90, 40, 0.3); padding: 12px 20px 16px; display: flex; flex-direction: column; gap: 8px; }
#shopInv { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
#shopInv .tile, #shopInv .empty { aspect-ratio: 1; padding: 3px; display: grid; place-items: center; border: 1px solid rgba(120, 90, 40, 0.6); background: rgba(0, 0, 0, 0.4); border-radius: 3px; }
#shopInv .tile:hover { border-color: #f87171; }
#shopInv .empty { border-style: dashed; opacity: 0.5; }
#shopInv .tile[data-n]:not([data-n=""])::before { content: attr(data-n); position: absolute; right: 3px; bottom: 1px; font: 700 12px var(--ui); color: #fff; text-shadow: 0 1px 2px #000; }
#shopUndo:disabled { opacity: 0.4; cursor: default; }
@media (max-width: 900px) { .shop-body { flex-direction: column; overflow: auto; } .shop-right { width: auto; } .shop-left { border-right: 0; } }
#score, #end { inset: 0; display: grid; place-items: center; background: rgba(4, 7, 9, 0.6); pointer-events: none; }
#end { pointer-events: auto; background: rgba(4, 7, 9, 0.8); }
.sbwrap { background: var(--panel-solid); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; width: min(1220px, 96vw); display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; text-align: left; }
.sbteam { min-width: 0; }
.sbwrap .who { display: flex; align-items: center; gap: 8px; }
.sbwrap .hd { width: 26px; height: 26px; font-size: 12px; }
.sbwrap .sm { display: inline-flex; flex-direction: column; font-size: 11px; line-height: 1.2; }
.sbwrap .nm { min-width: 0; line-height: 1.25; }
.sbwrap .nm b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.sbwrap .nm small { color: var(--muted); font-size: 11px; }
.sbwrap .rs { color: #ff8f86; margin-left: 4px; } .sbwrap .offl { color: #fbbf24; margin-left: 4px; }
.sbwrap .sbitems { white-space: nowrap; }
.sbwrap .sbitems svg { display: inline-block; vertical-align: middle; border-radius: 2px; }
@media (max-width: 1000px) { .sbwrap { grid-template-columns: 1fr; } }
.sbwrap h3 { margin: 10px 0 4px; font: 700 16px var(--display); }
.sbwrap h3 small { font: 400 12px var(--ui); color: var(--muted); margin-left: 8px; }
.sbwrap table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.sbwrap td, .sbwrap th { padding: 4px 6px; text-align: left; border-bottom: 1px solid #1a252b; }
.sbwrap th { color: var(--muted); font-weight: 500; font-size: 11px; }
.sbwrap tr.me td { background: rgba(227, 184, 92, 0.08); }
.endcard { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.endcard h1 { font-size: 72px; }
.endcard.win h1 { color: var(--gold); } .endcard.lose h1 { color: #9aa7ae; }
.endcard p { margin: 0; color: var(--muted); }
.endbtns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

#death { top: 34%; left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none; text-shadow: 0 2px 8px #000; }
#death b { display: block; font: 700 56px/1 var(--display); }
#death small { display: block; margin-top: 10px; font-size: 13px; color: #d7dde2; }
#recall { bottom: 200px; left: 50%; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; display: flex; align-items: center; gap: 10px; font-size: 13px; pointer-events: none; }
#recall i { display: block; width: 180px; height: 8px; background: #070b0d; border-radius: 4px; overflow: hidden; }
#recall b { display: block; height: 100%; background: var(--blue); }

#tip { background: #0b1114; border: 1px solid #3a4f5b; border-radius: 8px; padding: 8px 10px; width: 270px; font-size: 13px; pointer-events: none; z-index: 5; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }
#tip b { display: block; } #tip small { color: var(--muted); display: block; margin-top: 4px; }
#help { left: 50%; top: 46px; transform: translateX(-50%); width: min(880px, 84vw); text-align: center; line-height: 1.4; color: rgba(221, 230, 234, 0.55); font-size: 11px; pointer-events: none; text-shadow: 0 1px 3px #000; }

/* Délai du réseau (trois barres et la mesure, vert / jaune / rouge) et compteur d'images. */
#perf { left: 8px; top: 8px; display: flex; align-items: center; gap: 6px; pointer-events: none; font: 600 11px ui-monospace, Menlo, monospace; }
#net, #fps { color: rgba(221, 230, 234, 0.75); background: rgba(6, 10, 16, 0.6); border-radius: 4px; padding: 2px 7px; line-height: 15px; }
#net { display: flex; align-items: flex-end; gap: 2px; --c: #4ade80; }
#net i { display: block; width: 3px; border-radius: 1px; background: #3a4048; margin-bottom: 2px; }
#net i:nth-child(1) { height: 5px; } #net i:nth-child(2) { height: 8px; } #net i:nth-child(3) { height: 11px; }
#net i.on { background: var(--c); }
#net b { margin-left: 5px; font-weight: 600; color: var(--c); }
#net.mid { --c: #facc15; } #net.bad, #net.stall { --c: #ff4d5e; }
#net.stall { animation: capPulse 1s ease-in-out infinite; }
#gearBtn { position: absolute; right: 8px; bottom: 284px; width: 30px; height: 30px; padding: 0; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 16px; cursor: pointer; }
#gearBtn:hover { color: var(--gold-300); border-color: var(--gold-500); }
#chat { left: 8px; bottom: 214px; width: min(400px, 36vw); display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
#chatLog { display: flex; flex-direction: column; gap: 3px; font-size: 13px; line-height: 1.35; }
#chatLog div { background: rgba(6, 10, 16, 0.74); border-radius: 6px; padding: 3px 9px; width: fit-content; max-width: 100%; overflow-wrap: anywhere; transition: opacity 0.6s; }
#chatLog div:nth-last-child(n+6) { opacity: 0; }          /* saisie fermée : seuls les 5 derniers messages restent affichés */
#chat.open #chatLog div { opacity: 1; }
#chatLog em { color: var(--muted); font-style: normal; font-size: 11px; margin-right: 4px; }
#chatIn { pointer-events: auto; width: 100%; background: rgba(6, 10, 16, 0.9); border: 1px solid rgba(200, 155, 60, 0.4); border-radius: 8px; padding: 7px 10px; font: 13px var(--ui); }

@media (max-width: 1100px) { #stats { display: none; } #mini { width: 200px; height: 200px; } #gearBtn { bottom: 220px; } #help { display: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- Passif du héros, objets en recharge ---------- */
#passive { position: relative; width: 44px; height: 44px; flex: none; margin-bottom: 30px; border-radius: 50%; background: #0c1317; border: 2px solid var(--gold-700); display: grid; place-items: center; font-size: 21px; overflow: hidden; cursor: help; }
#passive .n { position: absolute; right: 3px; bottom: 0; font: 800 12px var(--ui); color: #fff; text-shadow: 0 1px 2px #000; }
#passive .cd { position: absolute; inset: 0; background: rgba(5, 8, 10, 0.78); display: none; place-items: center; font: 700 14px var(--ui); color: #fff; clip-path: inset(calc((1 - var(--p, 1)) * 100%) 0 0 0); }
#passive.oncd .cd { display: grid; }
#passive.oncd .ico { filter: grayscale(1); opacity: 0.6; }
#passive.armed { border-color: #fff; box-shadow: 0 0 14px rgba(255, 255, 255, 0.6); }
.slot.active { border-color: #67e8f9; }
.slot[data-cd]:not([data-cd=""]) svg { filter: grayscale(1) brightness(0.5); }
.slot[data-cd]:not([data-cd=""])::after { content: attr(data-cd); position: absolute; inset: 0; right: 0; bottom: 0; display: grid; place-items: center; background: rgba(5, 8, 10, 0.55); font: 700 14px var(--ui); color: #fff; }
#tip .tpas { display: block; margin-top: 5px; color: #e6d08a; font-size: 12px; line-height: 1.4; }

/* ---------- Salon : prêt / pas prêt ---------- */
#ready.on { filter: saturate(0.5) brightness(0.85); }
.pn em.rdy { color: #6ee7b7; border-color: rgba(110, 231, 183, 0.5); }
#lobby.locked #heroGrid, #lobby.locked .loadout, #lobby.locked [data-join] { opacity: 0.55; pointer-events: none; }

/* ---------- Écran de chargement ---------- */
#loading { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; background: radial-gradient(ellipse at 50% 40%, #171b2c, #06070c 70%); transition: opacity 0.35s; }
#loading.out { opacity: 0; pointer-events: none; }
.lteam { font: 600 15px var(--display); letter-spacing: 0.18em; text-transform: uppercase; }
.lteam.t0 { color: var(--blue); } .lteam.t1 { color: var(--red); }
.lrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.lcard { width: 132px; padding: 14px 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; border-radius: 6px; background: rgba(10, 12, 20, 0.85); border: 1px solid rgba(120, 90, 40, 0.5); text-align: center; }
.lcard.t0 { border-top: 3px solid var(--blue); } .lcard.t1 { border-top: 3px solid var(--red); }
.ldisc { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; font: 800 26px var(--ui); color: #0c1116; box-shadow: inset 0 -8px 14px rgba(0, 0, 0, 0.3); }
.lcard b { font: 600 15px var(--display); color: var(--gold-300); }
.lcard small { color: var(--muted); font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lcard i { font-style: normal; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.lcard.ok i { color: #6ee7b7; }
.lvs { display: flex; align-items: center; gap: 16px; width: min(560px, 80vw); color: var(--gold-300); font: 600 20px var(--display); letter-spacing: 0.2em; text-transform: uppercase; }
.lvs::before, .lvs::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-700), transparent); }
.lhint { margin: 4px 0 0; color: var(--muted); font-size: 13px; }