/* ==========================================================================
   HUD en jeu — inspiré du mode « Raid hivernal » : rosters d'équipes, trois barres de score,
   chrono, vitesse / PV, compétences 1-2-3-Espace, cadeaux portés, mini-carte ronde.
   Toutes les tailles sont en em : elles suivent la hauteur de la fenêtre (--hs).
   ========================================================================== */
.hud {
  --hs: clamp(12px, 1.66vh, 19px);
  --paper: rgba(9, 15, 36, .7);
  --paper-hi: rgba(12, 20, 46, .86);
  --edge: rgba(246, 232, 205, .26);
  position: fixed; inset: 0; z-index: 5; pointer-events: none; font-weight: 600; font-size: var(--hs);
}
.hud > * { position: absolute; }
.hud [data-ui], .hud button { pointer-events: auto; }
.hud b { font-family: var(--font-num, 'Rajdhani'); font-variant-numeric: tabular-nums; }

/* --- Performances ----------------------------------------------------------------------------- */
.hud-perf { left: .9em; top: .55em; display: flex; gap: .9em; font-size: .86em; font-weight: 700; letter-spacing: .04em; color: rgba(236, 244, 255, .92); text-shadow: 0 1px 4px #000, 0 0 6px rgba(0, 0, 0, .8); }
.hud-perf span:empty { display: none; }
.hud-perf .bad { color: #ff8a8a; }

/* --- Rosters d'équipes ------------------------------------------------------------------------------ */
.hud-roster { top: 2.3em; width: 17.5em; display: flex; flex-direction: column; gap: .5em; }
.hud-roster.left { left: .9em; }
.hud-roster.right { right: .9em; top: 3.5em; }
.tpanel {
  padding: .22em .5em .42em .55em; border-radius: .6em; background: var(--paper); border: 1px solid var(--edge);
  border-left: .3em solid var(--tc); backdrop-filter: blur(5px); box-shadow: 0 .4em 1.2em rgba(0, 0, 0, .35);
}
.tpanel header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .12em; font-family: var(--font-display); font-weight: 800; font-size: .68em; letter-spacing: .22em; text-transform: uppercase; color: var(--tc); }
.tpanel header b { font-size: 1.5em; letter-spacing: .02em; }
.tpanel.mine { background: var(--paper-hi); box-shadow: 0 .4em 1.2em rgba(0, 0, 0, .35), 0 0 1.6em -.5em var(--tc); }
.prow { display: grid; grid-template-columns: 1.9em minmax(0, 1fr) 2.1em 2.4em; align-items: center; gap: .3em; padding: .05em .1em; border-radius: .3em; font-size: .94em; line-height: 1.25; }
.prow svg.cls { width: 1.8em; height: 1.05em; fill: none; stroke: var(--tc); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.prow .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.prow .k { display: inline-flex; align-items: center; justify-content: flex-end; gap: .15em; color: #ffd0d0; }
.prow .g { display: inline-flex; align-items: center; justify-content: flex-end; gap: .15em; color: #ffc680; }
.prow svg.ic { width: .85em; height: .85em; }
.prow.me { background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 38%, transparent), transparent); }
.prow.me .nm { font-weight: 800; }
.prow.dead { opacity: .42; }
.prow.dead .nm { text-decoration: line-through; }
.prow .g.has { color: #ffa94d; text-shadow: 0 0 .7em rgba(255, 150, 40, .7); }

/* --- Scores & objectif ------------------------------------------------------------------------------- */
.hud-score { left: 50%; top: .5em; transform: translateX(-50%); display: flex; align-items: center; gap: .8em; }
.sc-target { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 3.6em; height: 4.1em; border-radius: .8em; background: var(--paper-hi); border: 1px solid var(--edge); box-shadow: 0 .4em 1.2em rgba(0, 0, 0, .35); }
.sc-target svg { width: 1.3em; height: 1.3em; color: #ffb347; }
.sc-target b { font-size: 1.9em; line-height: 1; color: #fff; }
.sc-bars { display: flex; flex-direction: column; gap: .3em; padding: .45em .65em; border-radius: .7em; background: var(--paper); border: 1px solid var(--edge); backdrop-filter: blur(5px); box-shadow: 0 .4em 1.2em rgba(0, 0, 0, .35); }
.sbar { display: grid; grid-template-columns: .7em 21em 2.6em; align-items: center; gap: .6em; }
.sbar .dot { width: .7em; height: .7em; border-radius: .2em; background: var(--tc); box-shadow: 0 0 .6em var(--tc); }
.sbar-track { position: relative; height: 1em; border-radius: .3em; background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .2); overflow: hidden; }
.sbar-fill { position: absolute; inset: 0 auto 0 0; width: var(--v, 0%); background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 70%, #fff), var(--tc)); box-shadow: 0 0 .9em var(--tc); transition: width .55s var(--ease); }
.sbar-track::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(4% - 2px), rgba(5, 9, 22, .92) calc(4% - 2px), rgba(5, 9, 22, .92) 4%); }
.sbar b { text-align: right; font-size: 1.28em; line-height: 1; color: var(--tc); }
.sbar.mine .sbar-track { border-color: var(--tc); box-shadow: 0 0 .8em -.2em var(--tc); }
.sbar.bump b { animation: scoreBump .6s var(--ease); }
@keyframes scoreBump { 0% { transform: scale(1); } 35% { transform: scale(1.5); } 100% { transform: scale(1); } }

.hud-timer {
  right: .9em; top: .45em; display: inline-flex; align-items: center; gap: .55em; padding: .22em .85em .28em; border-radius: .7em;
  background: var(--paper-hi); border: 1px solid var(--edge); box-shadow: 0 .4em 1.2em rgba(0, 0, 0, .35);
  font-family: var(--font-num, 'Rajdhani'); font-weight: 700; font-size: 1.7em; letter-spacing: .06em; font-variant-numeric: tabular-nums;
}
.hud-timer svg { width: .8em; height: .8em; color: #ffd9a0; }
.hud-timer.is-low { color: var(--warn); border-color: rgba(255, 176, 32, .6); }
.hud-timer.is-low svg { color: var(--warn); }
.hud-timer.is-critical { color: var(--danger); border-color: rgba(255, 84, 112, .8); animation: critical 1s ease-in-out infinite; }
.hud-timer.is-critical svg { color: var(--danger); }
@keyframes critical { 0%, 100% { box-shadow: 0 .4em 1.2em rgba(0, 0, 0, .45); } 50% { box-shadow: 0 .4em 2em rgba(255, 84, 112, .6); } }

/* --- Événements actifs ----------------------------------------------------------------------------------- */
.hud-events { top: 6.9em; left: 50%; transform: translateX(-50%); display: flex; gap: .6em; }
.echip {
  --ec: #cfe6ff; position: relative; display: flex; align-items: center; gap: .6em; padding: .35em .95em .35em .7em; overflow: hidden; border-radius: 99px;
  background: var(--paper-hi); border: 1px solid var(--ec); box-shadow: 0 0 1.6em -.4em var(--ec);
  font-weight: 800; font-size: .82em; letter-spacing: .12em; text-transform: uppercase; animation: fadeUp .4s var(--ease) both;
}
.echip svg { color: var(--ec); }
.echip b { color: var(--ec); font-size: 1.2em; }
.echip i { position: absolute; left: 0; bottom: 0; height: .22em; width: var(--v, 100%); background: var(--ec); box-shadow: 0 0 .5em var(--ec); transition: width .25s linear; }
.echip.blizzard { --ec: #d4eaff; }
.echip.ice { --ec: #7fe4ff; }
.echip.tornado { --ec: #bfe6ff; }
.echip.tornado.warn { --ec: #ffa35c; animation: fadeUp .4s var(--ease) both, tornadoWarn .55s ease-in-out infinite alternate; }
@keyframes tornadoWarn { to { box-shadow: 0 0 2.4em -.1em var(--ec); } }

/* --- Fil des éliminations --------------------------------------------------------------------------------- */
.hud-feed { left: .9em; top: 14.8em; display: flex; flex-direction: column; align-items: flex-start; gap: .3em; max-width: 24em; }
.feed-item {
  display: flex; align-items: center; gap: .5em; padding: .25em .75em; border-radius: .55em;
  background: var(--paper); border: 1px solid var(--edge); font-weight: 700; font-size: .95em; letter-spacing: .02em;
  animation: feedIn .35s var(--ease) both, feedOut .5s ease-in 5.5s forwards; backdrop-filter: blur(5px);
}
.feed-item.mine { border-color: var(--gold); box-shadow: 0 0 1.4em -.4em var(--gold-glow); }
.feed-item svg { color: rgba(255, 255, 255, .6); width: 1em; height: 1em; }
.feed-item .gifts { display: inline-flex; align-items: center; gap: .25em; color: #ffb347; }
.feed-item .steal { color: #ffb347; }
.feed-item .storm { display: inline-flex; color: #bfe6ff; }
@keyframes feedIn { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
@keyframes feedOut { to { opacity: 0; transform: translateX(-20px); } }

/* --- Mini-carte ------------------------------------------------------------------------------------------------ */
.hud-mini { right: .9em; bottom: .9em; width: clamp(210px, 32vh, 330px); aspect-ratio: 1; }
.hud-mini canvas { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 .4em 1em rgba(0, 0, 0, .55)); }
.mini-cap { position: absolute; left: 12%; right: 12%; bottom: -.1em; display: flex; justify-content: space-between; padding: .1em .7em; border-radius: 99px; font-size: .74em; letter-spacing: .14em; text-transform: uppercase; color: rgba(214, 228, 255, .85); font-weight: 700; background: rgba(5, 10, 28, .7); }

/* --- Carte du char (en bas à gauche) ------------------------------------------------------------------------------- */
.hud-tank {
  left: .9em; bottom: .9em; width: 21em; display: flex; align-items: center; gap: .7em; padding: .5em .8em .55em .5em; border-radius: .9em;
  background: var(--paper-hi); border: 1px solid var(--edge); box-shadow: 0 .5em 1.4em rgba(0, 0, 0, .4); backdrop-filter: blur(5px);
}
.tk-icon { position: relative; flex: none; width: 6.4em; }
.tk-icon img { display: block; width: 100%; height: auto; filter: drop-shadow(0 .3em .3em rgba(0, 0, 0, .5)); }
.tk-name { position: absolute; left: 0; right: 0; bottom: -.35em; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: .6em; letter-spacing: .16em; text-transform: uppercase; color: var(--tc, #fff); text-shadow: 0 1px 3px #000; }
.tk-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3em; }
.tk-speed { display: flex; align-items: baseline; gap: .35em; }
.tk-speed b { font-size: 2.1em; line-height: 1; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.tk-speed small { font-size: .78em; font-weight: 700; letter-spacing: .1em; color: rgba(214, 228, 255, .75); }
.ice-tag {
  margin-left: auto; display: inline-flex; align-items: center; gap: .35em; padding: .12em .65em; border-radius: 99px; align-self: center;
  font-size: .7em; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #bfeaff; background: rgba(40, 110, 190, .55); border: 1px solid rgba(160, 225, 255, .8);
  box-shadow: 0 0 1em rgba(120, 210, 255, .5); opacity: 0; transform: scale(.85); transition: opacity .18s, transform .18s var(--ease);
}
.ice-tag svg { width: 1.1em; height: 1.1em; }
.ice-tag.on { opacity: 1; transform: none; }
.hp-bar { position: relative; height: 1.65em; overflow: hidden; border-radius: .45em; background: rgba(4, 8, 22, .85); border: 1px solid rgba(255, 255, 255, .28); }
.hp-bar i { position: absolute; inset: 0; width: var(--v, 100%); background: linear-gradient(180deg, #8af7b2, #2fbf6a); box-shadow: 0 0 1em rgba(61, 220, 132, .5); transition: width .22s var(--ease), background .3s; }
.hp-bar.mid i { background: linear-gradient(180deg, #ffe27a, #e6a817); box-shadow: 0 0 1em rgba(255, 200, 60, .45); }
.hp-bar.low i { background: linear-gradient(180deg, #ff8a9c, #e0344f); box-shadow: 0 0 1em rgba(255, 84, 112, .55); animation: lowBlink .8s ease-in-out infinite; }
.hp-bar u { position: absolute; inset: 0; background-image: linear-gradient(90deg, transparent calc(100% - 1.5px), rgba(4, 8, 22, .9) calc(100% - 1.5px)); background-size: calc(100% / var(--seg, 4)) 100%; }
.hp-bar b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.05em; letter-spacing: .06em; color: #fff; text-shadow: 0 1px 3px #000, 0 0 5px rgba(0, 0, 0, .8); }
.hp-bar.healing i { box-shadow: 0 0 1.4em rgba(120, 255, 160, .9); }
@keyframes lowBlink { 50% { opacity: .6; } }
.reload-bar { height: .3em; border-radius: 99px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.reload-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ffffff, #bfe3ff); transform-origin: left; }

/* --- Barillet : obus chargés, intervalle, rechargement ------------------------------------------------------------------ */
.ammo { display: flex; flex-direction: column; gap: .22em; }
.ammo-pips { display: flex; gap: .3em; }
.pip {
  flex: 1 1 0; max-width: 2.6em; height: .62em; border-radius: .2em; background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .22);
  transition: background .18s, box-shadow .18s, transform .18s var(--ease);
}
.pip.on { background: linear-gradient(180deg, #ffffff, #bfe3ff); border-color: #ffffff; box-shadow: 0 0 .7em rgba(180, 225, 255, .75); }
.ammo-pips[data-clip="1"] .pip { max-width: 4.8em; height: .72em; }
.ammo-meter { position: relative; display: flex; align-items: center; gap: .6em; }
.ammo-meter .reload-bar { flex: 1; }
.ammo-txt { flex: none; min-width: 6.4em; text-align: right; font-weight: 800; font-size: .72em; letter-spacing: .12em; color: rgba(214, 228, 255, .85); font-variant-numeric: tabular-nums; }
.ammo.reloading .reload-bar i { background: linear-gradient(90deg, #ff9a3d, #ffd36b); }
.ammo.reloading .ammo-txt { color: #ffb868; }
.ammo.empty .ammo-txt { color: #ff6b5a; animation: lowBlink .6s ease-in-out infinite; }

/* --- Compétences & cadeaux portés (bas, centre) -------------------------------------------------------------------------- */
.hud-bottom { left: 50%; bottom: .9em; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .55em; }
.cargo { display: flex; gap: .35em; padding: .22em .5em; border-radius: .6em; background: var(--paper); border: 1px solid var(--edge); }
.cslot { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: .45em; border: 1px solid rgba(255, 255, 255, .22); background: rgba(4, 8, 22, .6); color: rgba(255, 255, 255, .16); transition: transform .25s var(--ease), background .25s; }
.cslot svg { width: 1.15em; height: 1.15em; }
.cslot.full { background: linear-gradient(145deg, rgba(255, 176, 80, .45), rgba(255, 110, 40, .55)); border-color: #ffc88a; color: #fff; }
.cslot.gold { background: linear-gradient(145deg, rgba(255, 236, 140, .6), rgba(255, 170, 30, .7)); border-color: #fff0b0; color: #fff; box-shadow: 0 0 1em var(--gold-glow); }
.cslot.pop { animation: slotPop .4s var(--ease); }
@keyframes slotPop { 0% { transform: scale(.4); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
.cargo.full { box-shadow: 0 0 1.2em -.2em #ffb347; border-color: #ffb347; }

.abil { display: flex; gap: .7em; }
.ab {
  --ac: #7fd0ff; position: relative; width: 4.5em; height: 4.5em; border-radius: .8em; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(14, 22, 52, .9), rgba(7, 12, 30, .92)); border: 2px solid color-mix(in srgb, var(--ac) 50%, rgba(255, 255, 255, .22));
  box-shadow: 0 .4em 1em rgba(0, 0, 0, .4), inset 0 0 1.4em -.6em var(--ac);
}
.ab svg.ic { width: 2.3em; height: 2.3em; color: var(--ac); stroke-width: 1.7; filter: drop-shadow(0 0 .4em color-mix(in srgb, var(--ac) 60%, transparent)); }
.ab kbd { position: absolute; top: -.62em; left: -.45em; min-width: 1.6em; height: 1.6em; margin: 0; padding: 0 .4em; font-size: .78em; letter-spacing: .04em; background: linear-gradient(180deg, #2e4a7e, #1a2d57); border: 1px solid rgba(255, 255, 255, .45); border-bottom-width: 2px; color: #fff; }
.ab .cd { position: absolute; inset: 0; border-radius: .6em; background: conic-gradient(rgba(3, 6, 18, .72) calc(var(--cd, 0) * 360deg), transparent 0); }
.ab .cdn { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-num, 'Rajdhani'); font-weight: 700; font-size: 1.75em; color: #fff; text-shadow: 0 2px 6px #000, 0 0 8px #000; }
.ab .dur { position: absolute; left: .35em; right: .35em; bottom: .3em; height: .3em; border-radius: 99px; background: rgba(255, 255, 255, .18); overflow: hidden; display: none; }
.ab .dur i { display: block; height: 100%; width: var(--du, 0%); background: var(--ac); box-shadow: 0 0 .6em var(--ac); }
.ab.ready { box-shadow: 0 .4em 1em rgba(0, 0, 0, .4), 0 0 1.5em -.2em var(--ac), inset 0 0 1.4em -.5em var(--ac); animation: readyPulse 1.8s ease-in-out infinite; }
.ab.active { border-color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--ac) 38%, #0b1230), rgba(7, 12, 30, .92)); }
.ab.active .dur { display: block; }
.ab.empty { opacity: .26; filter: grayscale(1); }
.ab.silenced { border-color: #7ae860; }
.ab.silenced::before { content: ''; position: absolute; inset: 0; border-radius: .6em; background: repeating-linear-gradient(45deg, rgba(110, 230, 90, .35) 0 .3em, transparent .3em .7em); }
.ab.use { animation: abUse .35s var(--ease); }
@keyframes abUse { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes readyPulse { 0%, 100% { filter: none; } 50% { filter: brightness(1.18); } }

.hud-base {
  left: 50%; top: 10.4em; transform: translateX(-50%); display: flex; align-items: center; gap: .8em; padding: .3em 1.1em; border-radius: 99px;
  background: var(--paper-hi); border: 1px solid var(--bc, #7dffa0); box-shadow: 0 0 1.6em -.3em var(--bc, #7dffa0);
  font-weight: 800; font-size: .86em; letter-spacing: .2em; color: var(--bc, #7dffa0); animation: fadeUp .3s var(--ease) both;
}
.hud-base b { font-size: 1.25em; color: #fff; }
.hud-base.steal { --bc: #ffb347; }
.hud-base.enemy { --bc: #ff7a6a; }

.hud-alert {
  left: 50%; top: 12.9em; transform: translateX(-50%); display: flex; align-items: center; gap: .7em; padding: .4em 1.3em; border-radius: .6em;
  background: rgba(120, 12, 24, .88); border: 1px solid #ff8a8a; color: #fff; font-weight: 800; letter-spacing: .2em; font-size: .95em; animation: alertBlink .7s ease-in-out infinite;
}
@keyframes alertBlink { 50% { background: rgba(190, 24, 40, .94); box-shadow: 0 0 2em rgba(255, 70, 70, .7); } }

/* --- Indicateurs de distance (cadeau doré, base) ------------------------------------------------------------------------------- */
.hud-pointers { inset: 0; }
.ptr { --pc: #ffd34d; position: absolute; left: 0; top: 0; width: 5.2em; height: 5.2em; margin: -2.6em 0 0 -2.6em; display: grid; place-items: center; will-change: transform; }
.ptr .dots { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 14s linear infinite; }
.ptr .dots circle { fill: none; stroke: var(--pc); stroke-width: 2.6; stroke-dasharray: 3.4 6; stroke-linecap: round; filter: drop-shadow(0 0 .3em var(--pc)); }
.ptr-ico { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: .35em; background: rgba(8, 14, 34, .78); border: 1.5px solid var(--pc); color: var(--pc); box-shadow: 0 0 1.2em -.2em var(--pc); transform: rotate(45deg); }
.ptr-ico svg { width: 1.4em; height: 1.4em; transform: rotate(-45deg); }
.ptr b { position: absolute; top: calc(100% + .05em); left: 50%; transform: translateX(-50%); font-size: .95em; letter-spacing: .04em; color: #fff; text-shadow: 0 1px 4px #000, 0 0 8px #000; white-space: nowrap; }
.ptr-arrow { position: absolute; inset: -.6em; transform: rotate(var(--a, 0deg)); display: none; }
.ptr-arrow::after { content: ''; position: absolute; top: -.1em; left: 50%; margin-left: -.5em; border: .5em solid transparent; border-bottom: .8em solid var(--pc); filter: drop-shadow(0 0 .4em var(--pc)); }
.ptr.off .ptr-arrow { display: block; }
.ptr.off .dots { display: none; }
.ptr.golden { animation: glowPulse 1.6s ease-in-out infinite; border-radius: 50%; }

/* --- Annonces ----------------------------------------------------------------------------------------------------------------------- */
.hud-banner { top: 24%; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bn { --bc: var(--ice); display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; filter: drop-shadow(0 3px 12px rgba(4, 12, 32, .9)); animation: bnIn .55s var(--ease) both, bnOut .7s ease-in 3.3s forwards; }
.bn svg { width: 2.4em; height: 2.4em; color: var(--bc); filter: drop-shadow(0 0 14px var(--bc)); }
.bn h2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.5rem, 3.8vw, 2.9rem); letter-spacing: .3em; text-indent: .3em; color: var(--bc); text-shadow: 0 0 34px var(--bc), 0 4px 0 rgba(0, 0, 0, .4); -webkit-text-stroke: 1.5px rgba(5, 14, 36, .55); }
.bn p { font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .9), 0 0 3px rgba(0, 0, 0, .8); }
.bn.gold { --bc: var(--gold); }
.bn.cold { --bc: #8fd0ff; }
.bn.storm { --bc: #b4e2ff; }
.bn.go { --bc: var(--gold); }
@keyframes bnIn { from { opacity: 0; transform: scale(1.5); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes bnOut { to { opacity: 0; transform: translateY(-14px) scale(.96); } }

/* --- Écran de destruction ------------------------------------------------------------------------------------------------------------ */
.hud-death { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: radial-gradient(ellipse at center, rgba(24, 4, 12, .72) 0%, rgba(30, 4, 12, .4) 50%, rgba(30, 4, 12, .18) 100%); animation: fade .4s both; text-shadow: 0 2px 8px rgba(0, 0, 0, .9); }
.hud-death h2 { font-family: var(--font-display); font-weight: 900; font-size: 2.6rem; letter-spacing: .3em; text-indent: .3em; color: var(--danger); text-shadow: 0 0 30px rgba(255, 84, 112, .8); }
.hud-death p { font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.hud-death p b { color: #fff; }
.death-ring { position: relative; width: 120px; height: 120px; }
.death-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.death-ring .dr-bg { fill: rgba(8, 14, 32, .6); stroke: rgba(255, 255, 255, .15); stroke-width: 6; }
.death-ring .dr-fg { fill: none; stroke: var(--danger); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: calc(327 * (1 - var(--p, 0))); filter: drop-shadow(0 0 8px rgba(255, 84, 112, .7)); }
.death-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; font-size: 2.6rem; }
.death-classes { display: flex; gap: 10px; margin-top: 6px; pointer-events: auto; }
.death-classes button { display: flex; align-items: center; gap: 8px; padding: .35em 1em .35em .5em; border-radius: 12px; background: rgba(10, 22, 52, .8); border: 1px solid var(--line); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; transition: .2s var(--ease); }
.death-classes button img { width: 64px; height: auto; }
.death-classes button:hover { border-color: var(--line-hi); transform: translateY(-2px); }
.death-classes button.is-on { border-color: var(--ice); background: rgba(36, 80, 160, .55); box-shadow: 0 0 22px -6px var(--ice-glow); }

.hud-vignette {
  inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(255, 40, 70, calc(var(--hurt, 0) * .6)) 100%),
              radial-gradient(ellipse at center, transparent 58%, rgba(255, 40, 70, calc(var(--low, 0) * .38)) 100%);
}

.hud-hints { left: 50%; bottom: 11.8em; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 12px; background: var(--paper); border: 1px solid var(--edge); font-size: .92em; color: var(--text-2); transition: opacity 1.2s; backdrop-filter: blur(6px); text-align: center; }
.hud-hints:empty { display: none; }
.hud-hints.fade { opacity: 0; }

.hud-debug { left: .9em; top: 15em; padding: 8px 10px; border-radius: 8px; background: rgba(4, 10, 26, .78); border: 1px solid var(--line); font: 600 12px/1.4 ui-monospace, Consolas, 'Courier New', monospace; color: #bfe1ff; white-space: pre; }

/* verrouillage de la souris : clic pour reprendre le contrôle */
.hud-lock { inset: 0; display: grid; place-items: center; background: rgba(4, 8, 22, .5); pointer-events: auto; cursor: pointer; backdrop-filter: blur(2px); }
.hud-lock > div { display: flex; flex-direction: column; align-items: center; gap: .6em; padding: 1.3em 2.4em; border-radius: 1em; background: var(--paper-hi); border: 1px solid var(--edge); text-align: center; animation: float 3s ease-in-out infinite; }
.hud-lock svg { width: 3em; height: 3em; color: var(--ice); }
.hud-lock b { font-family: var(--font-display); font-size: 1.1em; letter-spacing: .16em; }
.hud-lock small { color: var(--text-2); letter-spacing: .08em; font-weight: 700; }

/* --- Tableau des scores (Tab) ----------------------------------------------------------------------------------------------------------- */
.scoreboard { left: 50%; top: 50%; width: min(960px, 94vw); max-height: 80vh; overflow: auto; transform: translate(-50%, -50%); padding: 18px; border-radius: 18px; background: linear-gradient(180deg, rgba(10, 20, 46, .92), rgba(6, 12, 30, .94)); border: 1px solid var(--line-hi); box-shadow: var(--shadow); backdrop-filter: blur(12px); animation: fade .15s both; z-index: 3; font-size: 17px; }
.sb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sb-team { border-radius: 14px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--tc) 40%, transparent); background: rgba(4, 10, 26, .5); }
.sb-team header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 36%, transparent), transparent); font-family: var(--font-display); font-weight: 800; letter-spacing: .2em; text-transform: uppercase; font-size: .82rem; }
.sb-team table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.sb-team th { padding: 5px 8px; text-align: right; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.sb-team th:first-child, .sb-team td:first-child { text-align: left; }
.sb-team td { padding: 5px 8px; text-align: right; font-size: .98rem; }
.sb-team td:first-child { font-family: var(--font-ui); font-size: .95rem; font-weight: 700; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-team tr.me td { background: rgba(255, 211, 77, .12); }
.sb-team tr.dead td:first-child { opacity: .55; text-decoration: line-through; }
.sb-foot { margin-top: 10px; text-align: center; color: var(--text-3); font-weight: 700; letter-spacing: .14em; font-size: .72rem; text-transform: uppercase; }

/* --- Étiquettes au-dessus des chars ------------------------------------------------------------------------------------------------------ */
#labels { position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.nt { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; will-change: transform; font-weight: 700; text-shadow: 0 1px 3px #000, 0 0 5px rgba(0, 0, 0, .9); }
.nt-n { color: var(--tc, #fff); font-size: 15px; letter-spacing: .02em; white-space: nowrap; }
.nt.mine .nt-n { color: #fff; }
.nt.tur .nt-n { font-size: 12px; opacity: .85; }
.nt-hp { display: block; width: 56px; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .65); border: 1px solid rgba(255, 255, 255, .35); overflow: hidden; }
.nt-hp b { display: block; height: 100%; width: 100%; background: linear-gradient(180deg, #8af7b2, #2fbf6a); transition: width .2s; }
.nt.low .nt-hp b { background: linear-gradient(180deg, #ff8a9c, #e0344f); }
.nt-cg { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; color: #ffb347; }
.nt-cg svg { width: 12px; height: 12px; }

/* --- Viseur & repère de canon -------------------------------------------------------------------------------------------------------------- */
#reticle { position: fixed; left: 50%; top: 50%; z-index: 6; width: 56px; height: 56px; margin: -28px 0 0 -28px; pointer-events: none; }
#reticle svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .9)); }
.rt-ring { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 1.8; }
.rt-ticks { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }
.rt-dot { fill: #fff; }
.rt-prog { fill: none; stroke: var(--ice); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 169.6; stroke-dashoffset: calc(169.6 * var(--p, 0)); transform: rotate(-90deg); transform-origin: 32px 32px; opacity: .95; }
#reticle.is-cool .rt-ring { stroke: rgba(255, 255, 255, .35); }
#reticle.is-reloading .rt-ring { stroke: rgba(255, 150, 70, .55); }
#reticle.is-reloading .rt-prog { stroke: #ff9a3d; }
.rt-hit { position: absolute; inset: 8px; opacity: 0; }
.rt-hit::before, .rt-hit::after { content: ''; position: absolute; left: 50%; top: 50%; width: 140%; height: 3px; margin: -1.5px 0 0 -70%; background: #ff4d5e; box-shadow: 0 0 8px #ff4d5e; border-radius: 3px; transform: rotate(45deg); }
.rt-hit::after { transform: rotate(-45deg); }
.rt-hit.show { animation: hitMark .28s ease-out; }
@keyframes hitMark { 0% { opacity: 1; transform: scale(1.5); } 100% { opacity: 0; transform: scale(.8); } }
#gunmark { position: fixed; left: 0; top: 0; z-index: 6; width: 26px; height: 26px; margin: -13px 0 0 -13px; pointer-events: none; will-change: transform; }
#gunmark svg { width: 100%; height: 100%; fill: none; stroke: #ffe28a; stroke-width: 2; filter: drop-shadow(0 0 2px #000); }
#gunmark svg circle { fill: #ffe28a; stroke: none; }

/* --- Obus du barillet en COURONNE autour du viseur (information du viseur, comme dans World of Tanks) ------------------------------------
   un obus par place du barillet, répartis régulièrement sur un cercle, pointe vers l'extérieur, le premier en haut puis dans le sens des aiguilles
   d'une montre : plein = prêt, creux = tiré, orange qui se remplit = en chargement. Petits : ils entourent le réticule sans le couvrir.
   --n : nombre d'obus · --i : rang de l'obus · --rr : rayon de la couronne · --a0 : décalage de départ */
.rt-ammo, .sc-ammo { position: absolute; left: 50%; top: 50%; width: 0; height: 0; --rr: 38px; --sw: 6.2px; --sh: 15px; --a0: 0deg; }
.rt-ammo[data-clip="1"] { --sw: 7.4px; --sh: 18px; }
.shell { position: absolute; left: calc(var(--sw) / -2); top: calc(var(--sh) / -2); width: var(--sw); height: var(--sh); overflow: visible; transform-origin: 50% 50%;
  transform: rotate(calc(var(--a0) + var(--i) * 360deg / var(--n, 5))) translateY(calc(var(--rr) * -1)); filter: drop-shadow(0 0 1.4px rgba(0, 0, 0, .95)); }
.shell svg { width: 100%; height: 100%; overflow: visible; transform-origin: 50% 50%; }
.sh-body { fill: rgba(8, 20, 4, .5); stroke: #9be83a; stroke-width: 2.8; stroke-linejoin: round; transition: stroke .15s, fill .15s; }
.sh-fill { fill: #8ef02e; clip-path: inset(calc((1 - var(--f, 0)) * 100%) 0 0 0); transition: clip-path .12s linear; }
.sh-hl { fill: rgba(255, 255, 255, .5); clip-path: inset(calc((1 - var(--f, 0)) * 100%) 0 0 0); }
.sh-band { fill: none; stroke: rgba(30, 80, 6, .85); stroke-width: 2; clip-path: inset(calc((1 - var(--f, 0)) * 100%) 0 0 0); }
.shell.on .sh-body { stroke: #3e9a10; }
.shell.loading .sh-body { stroke: #ffc24d; }
.shell.loading .sh-fill { fill: #ffb133; }
.shell.reloading .sh-body { stroke: #ffa63d; }
.shell.reloading .sh-fill { fill: #ff9a2e; }
.shell.pop svg { animation: shellPop .24s var(--ease); }
@keyframes shellPop { 0% { transform: scale(1.9); } 100% { transform: scale(1); } }
/* sous la lunette : la couronne entoure le centre de la croisée, entre les branches du réticule (décalée pour ne jamais tomber dessus) */
.sc-ammo { --rr: 50px; --sw: 6.8px; --sh: 16.5px; }
.sc-ammo[data-clip="5"] { --a0: 10deg; }
.sc-ammo[data-clip="3"] { --a0: 22deg; }
.sc-ammo[data-clip="1"] { --a0: 45deg; --sw: 7.6px; --sh: 18.5px; }
#reticle.is-locked .rt-ring { stroke: rgba(255, 112, 92, .9); }
#reticle.is-locked .rt-dot { fill: #ff7a5c; }

/* --- Verrouillage de cible : repère rouge sur l'ennemi (orange tant que le canon le rejoint) ----------------------------------------- */
#lockmark { --lc: #ff5a4a; position: fixed; left: 0; top: 0; z-index: 6; width: 64px; height: 64px; margin: -32px 0 0 -32px; pointer-events: none; will-change: transform; }
#lockmark svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 3px rgba(0, 0, 0, .9)) drop-shadow(0 0 9px color-mix(in srgb, var(--lc) 70%, transparent)); transition: transform .08s linear; }
.lm-corners { fill: none; stroke: var(--lc); stroke-width: 3.4; stroke-linecap: square; }
.lm-dot { fill: var(--lc); }
#lockmark.track { --lc: #ffb347; }
#lockmark.fresh svg { animation: lockIn .38s var(--ease); }
@keyframes lockIn { from { transform: scale(2.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lm-label { position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; white-space: nowrap; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; color: #fff; text-shadow: 0 1px 3px #000, 0 0 6px rgba(0, 0, 0, .85); }
.lm-label small { color: var(--lc); font-size: .7rem; letter-spacing: .12em; }
#lockhint { position: fixed; left: 50%; top: calc(50% + 78px); transform: translateX(-50%); z-index: 6; padding: .3em 1em; border-radius: 99px; background: rgba(8, 14, 34, .82); border: 1px solid rgba(255, 150, 120, .6); color: #ffd2c6; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; pointer-events: none; animation: fadeUp .25s var(--ease) both; white-space: nowrap; }

/* tempête de neige : voile blanc qui monte avec le blizzard */
#whiteout { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: var(--wo, 0); background: radial-gradient(ellipse at center, rgba(210, 226, 255, .15) 0%, rgba(225, 236, 255, .55) 100%); transition: opacity .3s; }

@media (max-width: 1100px) {
  .sbar { grid-template-columns: .7em 15em 2.4em; }
  .hud-roster { width: 15em; }
}
@media (max-width: 900px) {
  .hud-roster.right { display: none; }
}

.lock-btns { display: flex; gap: .6em; margin-top: .5em; }

.sb-team header span:last-child { font-family: var(--font-num, 'Rajdhani'); font-size: 1.25rem; letter-spacing: .04em; }
.death-classes kbd { margin: 0 .3em 0 0; }

/* --- Givre de la tornade : l'écran se couvre de glace et tourbillonne quand on est aspiré ---------------------------------- */
.hud-frost {
  position: absolute; inset: 0; pointer-events: none; opacity: var(--tn, 0); overflow: hidden;
  background: radial-gradient(ellipse at center, rgba(190, 230, 255, 0) 36%, rgba(170, 220, 255, .34) 72%, rgba(235, 248, 255, .82) 100%);
}
.hud-frost::after {
  content: ''; position: absolute; inset: -30%; opacity: .8;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .1) 0 5deg, transparent 5deg 15deg);
  -webkit-mask-image: radial-gradient(circle, transparent 26%, #000 82%); mask-image: radial-gradient(circle, transparent 26%, #000 82%);
  animation: frostSpin 2.2s linear infinite;
}
@keyframes frostSpin { to { transform: rotate(-360deg); } }

/* --- Boost de vitesse : traits qui filent vers les bords de l'écran ------------------------------------------------------------------ */
.hud-boost { position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity .25s; background: radial-gradient(ellipse at center, rgba(20, 80, 190, 0) 44%, rgba(20, 80, 190, .36) 100%); }
.hud-boost::before, .hud-boost::after {                      /* deux jeux de traits (blancs et bleus : visibles sur la neige comme dans la nuit) qui filent vers les bords */
  content: ''; position: absolute; inset: -25%;
  -webkit-mask-image: radial-gradient(circle, transparent 30%, #000 70%); mask-image: radial-gradient(circle, transparent 30%, #000 70%); animation: boostLines .42s linear infinite;
}
.hud-boost::before { background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .8) 0 .6deg, transparent .6deg 6.4deg); }
.hud-boost::after { background: repeating-conic-gradient(from 3deg, rgba(25, 90, 210, .55) 0 .9deg, transparent .9deg 5.2deg); animation-delay: -.21s; }
#hud.boosting .hud-boost { opacity: 1; }
@keyframes boostLines { from { transform: scale(.8); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }

/* --- Lunette de visée (clic droit, comme le mode franc-tireur de World of Tanks) ------------------------------------------------ */
#scope { --sc: #fff; position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: var(--k, 0); }
#scope[hidden] { display: none; }
.sc-mask { position: absolute; inset: 0; background: radial-gradient(ellipse 78% 88% at 50% 50%, transparent 56%, rgba(3, 8, 22, .45) 80%, rgba(3, 8, 22, .9) 100%); }
.sc-lines { position: absolute; left: 50%; top: 50%; width: min(100vh, 100vw); height: min(100vh, 100vw); transform: translate(-50%, -50%); overflow: visible; fill: none; stroke-linecap: round; filter: drop-shadow(0 0 1.2px rgba(0, 0, 0, .95)); }
.sc-post { stroke: var(--sc); stroke-width: 2.3; opacity: .92; stroke-linecap: butt; }
.sc-cross { stroke: var(--sc); stroke-width: .8; opacity: .92; }
.sc-dot { fill: #7dff9a; stroke: none; }
#scope.reloading .sc-dot { fill: #ffae42; }
.sc-fine { stroke: #7dff9a; stroke-width: .75; }
.sc-ticks path { stroke: var(--sc); stroke-width: .85; opacity: .92; }
.sc-ring { stroke: rgba(255, 255, 255, .2); stroke-width: .45; stroke-dasharray: 1.2 2.6; }
#scope.reloading .sc-fine { stroke: #ffae42; }
.sc-info {
  position: absolute; left: 50%; top: calc(50% + 24vmin); transform: translateX(-50%); display: flex; align-items: center; gap: .9em; padding: .18em .9em;
  border-radius: 99px; background: rgba(5, 10, 26, .66); border: 1px solid rgba(255, 255, 255, .28); font-family: var(--font-num, 'Rajdhani'); font-weight: 700;
  font-size: 1.05em; letter-spacing: .08em; color: #fff; text-shadow: 0 1px 3px #000; font-variant-numeric: tabular-nums;
}
.sc-zoom { color: #8fd3ff; }
.sc-reload { position: absolute; left: 50%; top: calc(50% + 24vmin + 2.5em); width: 11em; height: .28em; margin-left: -5.5em; border-radius: 99px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.sc-reload i { display: block; width: 100%; height: 100%; transform-origin: left; background: linear-gradient(90deg, #fff, #bfe3ff); }
#scope.reloading .sc-reload i { background: linear-gradient(90deg, #ff9a3d, #ffd36b); }
#reticle.is-scoped svg { display: none; }
#scope { font-size: clamp(12px, 1.66vh, 19px); }

/* touches larges (Espace) sur les tuiles de compétence */
.ab kbd.wide { padding: 0 .55em; letter-spacing: .08em; font-size: .62em; }
.ab.jump { --ac: #7fd0ff; }
.ab.boost { --ac: #ffb347; }

/* --- Discussion en partie ------------------------------------------------------------------------------------------------------------
   Les messages s'affichent à gauche, au-dessus de la carte du char, et y RESTENT (ils s'estompent, sans disparaître). Entrée ouvre la petite zone
   d'écriture juste dessous ; Entrée envoie le message ET referme la zone. Au-dessus : qui parle dans le vocal du groupe. */
.hud-chat { left: .9em; bottom: 8.7em; width: 24em; display: flex; flex-direction: column; gap: .35em; }
.chat-speakers { align-self: flex-start; display: inline-flex; align-items: center; gap: .55em; max-width: 100%; padding: .2em .75em .2em .55em; border-radius: 99px; background: var(--paper); border: 1px solid rgba(61, 220, 132, .45); font-size: .86em; font-weight: 700; color: #bff5d6; backdrop-filter: blur(4px); }
.chat-speakers .mic { display: inline-grid; place-items: center; color: var(--ok); }
.chat-speakers .mic.off { color: var(--danger); }
.chat-speakers .sp { display: flex; flex-wrap: wrap; gap: .1em .6em; min-width: 0; }
.chat-speakers .sp b { color: #fff; text-shadow: 0 0 .7em rgba(61, 220, 132, .8); }
.chat-speakers .sp em { font-style: normal; color: rgba(214, 228, 255, .6); font-weight: 600; }
.chat-log { display: flex; flex-direction: column; align-items: flex-start; gap: .18em; }
.chat-log .cl { max-width: 100%; padding: .16em .6em .2em; border-radius: .45em; background: rgba(6, 11, 28, .58); font-size: .94em; font-weight: 600; line-height: 1.25; color: #f1f6ff; text-shadow: 0 1px 2px rgba(0, 0, 0, .85); animation: chatIn .22s var(--ease) both; transition: opacity .8s; }
.chat-log .cl.sys { color: rgba(214, 228, 255, .78); font-style: italic; }
.chat-log .cl.old { opacity: .5; }
.chat-log.is-typing .cl.old { opacity: 1; }
.chat-form { display: flex; align-items: center; gap: .45em; width: 17em; padding: .25em .5em .25em .3em; border-radius: .55em; background: var(--paper-hi); border: 1px solid var(--ice); box-shadow: 0 0 1.2em -.3em var(--ice-glow); animation: chatIn .15s var(--ease) both; pointer-events: auto; }
.chat-tag { flex: none; padding: .12em .55em; border-radius: .35em; background: rgba(79, 178, 255, .25); color: var(--ice); font-size: .7em; font-weight: 800; letter-spacing: .12em; }
.chat-tag[data-ch="team"] { background: color-mix(in srgb, var(--tc, #fff) 28%, transparent); color: var(--tc, #fff); }
.chat-form input { flex: 1; min-width: 0; padding: .1em 0; border: 0; outline: none; background: transparent; color: #fff; font: inherit; font-weight: 600; caret-color: var(--ice); user-select: text; -webkit-user-select: text; }
.chat-form input::placeholder { color: rgba(214, 228, 255, .5); }
@keyframes chatIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }