/* Base : plein écran, polices, jetons de couleur communs.
   Règle d'interaction : #ui et les racines de modules ont pointer-events: none ;
   seuls les éléments interactifs (boutons, zones tactiles, écrans) remettent pointer-events: auto. */
:root {
  --font-display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --font-body: 'Barlow', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --c-bg: #0b0e12;
  --c-panel: rgba(12, 16, 22, 0.72);
  --c-text: #eef1f4;
  --c-muted: #9aa4ae;
  --c-accent: #f2b705;
  --c-accent-2: #ff8a00;
  --c-ally: #3aa0ff;
  --c-enemy: #ff3b30;
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
[hidden] { display: none !important; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  overscroll-behavior: none;
}
#gl {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  outline: none;
}
#ui {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}
button { font-family: inherit; }

/* Démarrage */
.boot {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background:
    radial-gradient(120% 90% at 50% 110%, rgba(242, 183, 5, 0.10), transparent 60%),
    linear-gradient(180deg, #10151c, #07090c);
  transition: opacity 0.35s ease;
}
.boot--out { opacity: 0; }
.boot__brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(40px, 9vw, 96px);
  letter-spacing: 0.08em;
  color: #fff;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
}
.boot__sub {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-top: -10px;
}
.boot__bar {
  width: min(56vw, 520px);
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.boot__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c-accent), var(--c-accent-2));
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 0.2s linear;
}
.boot__label, .boot__tap {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 14px;
  color: var(--c-muted);
}
.boot__tap {
  color: #fff;
  font-size: 18px;
  animation: boot-pulse 1.4s ease-in-out infinite;
}
@keyframes boot-pulse { 50% { opacity: 0.35; } }

/* Erreurs */
.err {
  position: fixed;
  left: calc(8px + var(--safe-l));
  bottom: 8px;
  z-index: 100;
  max-width: 70vw;
  pointer-events: auto;
  padding: 8px 10px;
  background: rgba(120, 10, 10, 0.88);
  color: #fff;
  font: 500 12px/1.35 var(--font-body);
  border-left: 3px solid #ff5a4f;
}

/* Infos des vues de développement */
.dev-info {
  position: fixed;
  right: 8px;
  bottom: 8px;
  z-index: 60;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.55);
  color: #cfd6dc;
  font: 500 11px var(--font-body);
}

/* Invite de rotation (téléphone en portrait) */
.rotate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #07090c;
  color: #fff;
  font: 600 16px var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rotate svg { color: var(--c-accent); }
@media (orientation: portrait) and (pointer: coarse) {
  .rotate { display: flex; }
}

/* Éditeur de disposition (src/ui/layout-editor.js, styles de base dans hud.css) : corrections vues sur
   téléphone 812 x 375. Le panneau de 394 px coupait sa rangée d'outils (déplacement du panneau,
   PAR DÉFAUT, ENREGISTRER) : il s'élargit et ses rangées passent à la ligne au besoin. Par-dessus une
   partie, l'image figée du jeu restait très visible derrière les éléments : fond sombre presque opaque
   (sans flou : aucun coût de rendu sur téléphone), les silhouettes du décor restent devinables. */
.le .le-panel { width: min(96vw, max(calc(var(--h) * 105), 560px)); }
.le .le-panel__row { flex-wrap: wrap; row-gap: max(calc(var(--h) * 0.8), 4px); }
.le .le-panel__row > * { flex-shrink: 0; }
.le .le-panel__hint { flex: 1 1 14em; min-width: 0; }
body .le.is-over-game {
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(39, 49, 59, 0.86) 0%, rgba(21, 27, 33, 0.9) 60%, rgba(12, 16, 20, 0.94) 100%);
}
/* Libellé d'un élément collé au bord (classes posées par layout-editor.js) : aligné sur le bord intérieur */
.le .le-item.is-edge-r .le-item__lbl { left: auto; right: 0; transform: none; }
.le .le-item.is-edge-l .le-item__lbl { left: 0; transform: none; }

/* HUD en partie + commandes tactiles (docs/ui-spec.md parties A, B, D).
   Unité --h = 1 % de la hauteur d'écran (réglée en px par le JS). Racines en pointer-events: none,
   seuls les éléments interactifs remettent pointer-events: auto. Animations en transform / opacity. */

/* ------------------------------------------------------------------ racine */
.hud {
  --h: 1vh;
  --a: #FFC21A;
  --a-hi: #FFD23F;
  --a-lo: #FFB000;
  --ally: #3EA2FF;
  --ally-d: #1C6BD0;
  --enemy: #FF4136;
  --enemy-d: #C0232B;
  --self: #FFD43B;
  --kill: #FF2A2A;
  --muted: #AAB3BD;
  --muted2: #6C7783;
  --good: #58D66B;
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  --fs-xs: max(calc(var(--h) * 1.8), 9px);
  --fs-s: max(calc(var(--h) * 2.2), 10px);
  --fs-m: max(calc(var(--h) * 2.6), 12px);
  --tsh: 0 calc(var(--h) * 0.15) calc(var(--h) * 0.45) rgba(0, 0, 0, 0.7);
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  font-family: var(--font-display);
  font-weight: 600;
  color: #fff;
  text-shadow: var(--tsh);
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  line-height: 1.15;
}
.hud *, .hud *::before, .hud *::after { box-sizing: border-box; }
:where(.hud) button {
  font: inherit;
  color: inherit;
  text-shadow: inherit;
  border: 0;
  margin: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
:where(.hud, .tc) .ico { display: block; width: 100%; height: 100%; overflow: visible; }
.hud-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ------------------------------------------------------ couches plein écran */
.hud-blood { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
.hud-blood::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse farthest-corner at 50% 50%, rgba(90, 0, 0, 0) 52%, rgba(90, 0, 0, 0.3) 70%, rgba(62, 0, 0, 0.78) 100%);
}
.hud-blood__splat { position: absolute; inset: 0; background-size: 100% 100%; background-repeat: no-repeat; }
.hud-blood__pulse {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(ellipse farthest-corner at 50% 50%, rgba(120, 0, 0, 0) 45%, rgba(120, 0, 0, 0.32) 100%);
}
.hud-blood.is-low .hud-blood__pulse { animation: hud-heart 0.91s ease-in-out infinite; }
@keyframes hud-heart { 0%, 100% { opacity: 0.2; } 18% { opacity: 1; } 40% { opacity: 0.45; } 55% { opacity: 0.85; } }

.hud-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); }

/* ------------------------------------------------------------- mini-carte */
.hud-mm {
  position: absolute;
  left: calc(var(--sl) + var(--h) * 5);
  top: calc(var(--st) + var(--h) * 3);
  width: calc(var(--h) * 28);
  height: calc(var(--h) * 28);
  border-radius: calc(var(--h) * 0.8);
  overflow: hidden;
  box-shadow: 0 0 0 max(1px, calc(var(--h) * 0.25)) rgba(255, 255, 255, 0.3), 0 calc(var(--h) * 0.4) calc(var(--h) * 1.8) rgba(0, 0, 0, 0.35);
}
.hud-mm canvas { display: block; width: 100%; height: 100%; }

/* ----------------------------------------------- emblème, scores, minuteur */
.hud-score {
  position: absolute;
  left: calc(var(--sl) + var(--h) * 35);
  top: calc(var(--st) + var(--h) * 3);
  height: calc(var(--h) * 11);
  display: flex;
  align-items: center;
  gap: calc(var(--h) * 1.3);
  padding: 0 calc(var(--h) * 3) 0 calc(var(--h) * 1);
  background: linear-gradient(90deg, rgba(8, 11, 15, 0.5), rgba(8, 11, 15, 0.3) 62%, rgba(8, 11, 15, 0));
  --cut: calc(var(--h) * 1);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
}
.hud-score__emb { flex: none; width: calc(var(--h) * 7); height: calc(var(--h) * 7.6); filter: drop-shadow(0 calc(var(--h) * 0.2) calc(var(--h) * 0.4) rgba(0, 0, 0, 0.5)); }
.hud-score__bars { display: flex; flex-direction: column; gap: calc(var(--h) * 1.1); width: calc(var(--h) * 21); }
.hud-score__line { display: flex; align-items: center; gap: calc(var(--h) * 0.9); height: calc(var(--h) * 3.4); }
.hud-score__track {
  position: relative;
  flex: 1;
  height: calc(var(--h) * 2.3);
  background: rgba(255, 255, 255, 0.13);
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--h) * 0.8) 100%, 0 100%);
}
.hud-score__track i {
  position: absolute;
  inset: 0;
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 0.35s ease-out;
}
.hud-score__line--A .hud-score__track i { background: linear-gradient(90deg, rgba(28, 107, 208, 0.95), #3EA2FF); }
.hud-score__line--B .hud-score__track i { background: linear-gradient(90deg, rgba(192, 35, 43, 0.95), #FF4136); }
.hud-score__line b {
  width: calc(var(--h) * 4.6);
  font-size: max(calc(var(--h) * 3.4), 13px);
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hud-score__line--A b { color: #D9ECFF; }
.hud-score__line--B b { color: #FFD9D6; }
.hud-score__time { display: flex; flex-direction: column; align-items: center; gap: calc(var(--h) * 0.4); margin-left: calc(var(--h) * 0.6); }
.hud-score__clock {
  font-size: max(calc(var(--h) * 3.8), 14px);
  font-weight: 700;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hud-score__clock.is-urgent { color: var(--enemy); animation: hud-pulse 1s ease-in-out infinite; }
.hud-score__lim { font-size: var(--fs-xs); color: var(--muted); letter-spacing: 0.1em; line-height: 1; }
/* Chrono placé à part par le joueur (éditeur de disposition) : sa propre plaque, centrée par translate(-50 %) */
.hud-score__time.is-free {
  position: absolute;
  margin: 0;
  padding: calc(var(--h) * 0.8) calc(var(--h) * 1.4);
  background: linear-gradient(180deg, rgba(8, 11, 15, 0.5), rgba(8, 11, 15, 0.34));
  --cut: calc(var(--h) * 0.8);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
/* Sonde des marges de sécurité (encoche), lue par le HUD */
.hud-probe {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  visibility: hidden;
  pointer-events: none;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
@keyframes hud-pulse { 50% { opacity: 0.45; } }

/* ------------------------------------------------------- fil des éliminations */
.hud-feed {
  position: absolute;
  left: calc(var(--sl) + var(--h) * 36);
  top: calc(var(--st) + var(--h) * 16);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--h) * 0.5);
}
.hud-feed__row {
  display: flex;
  align-items: center;
  gap: calc(var(--h) * 0.8);
  height: max(calc(var(--h) * 3.6), 15px);
  padding: 0 calc(var(--h) * 1.3);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3));
  --cut: calc(var(--h) * 0.6);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  font-size: var(--fs-s);
  font-weight: 600;
  white-space: nowrap;
}
.hud-feed__gun { display: block; flex: none; }
.hud-feed__gun .ico--rifle { width: max(calc(var(--h) * 6), 26px); height: max(calc(var(--h) * 1.9), 8px); color: rgba(255, 255, 255, 0.9); }
.hud-feed__gun .ico:not(.ico--rifle) { width: max(calc(var(--h) * 2.6), 11px); height: max(calc(var(--h) * 2.6), 11px); color: rgba(255, 255, 255, 0.9); }
.hud-feed__hs { display: block; width: max(calc(var(--h) * 2.3), 10px); height: max(calc(var(--h) * 2.3), 10px); color: #fff; }
.hud-feed__row.anim-a { animation: hud-feed-a 5.3s linear both; }
.hud-feed__row.anim-b { animation: hud-feed-b 5.3s linear both; }
@keyframes hud-feed-a { 0% { opacity: 0; transform: translateX(calc(var(--h) * -3)); } 3% { opacity: 1; transform: none; } 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hud-feed-b { 0% { opacity: 0; transform: translateX(calc(var(--h) * -3)); } 3% { opacity: 1; transform: none; } 94% { opacity: 1; } 100% { opacity: 0; } }
.hud .is-self { color: var(--self); }
.hud .is-ally { color: var(--ally); }
.hud .is-enemy { color: var(--enemy); }
.hud .is-sys { color: rgba(255, 255, 255, 0.8); }

/* ------------------------------------------------------- haut droite */
.hud-tr {
  position: absolute;
  right: calc(var(--sr) + max(calc(var(--h) * 3.7), 10px));
  top: calc(var(--st) + max(calc(var(--h) * 2), 7px));
  height: max(calc(var(--h) * 6), 32px);
  display: flex;
  align-items: center;
  gap: max(calc(var(--h) * 1.7), 12px);
}
.hud-rbtn {
  position: relative;
  display: grid;
  place-items: center;
  width: max(calc(var(--h) * 6), 32px);
  height: max(calc(var(--h) * 6), 32px);
  border-radius: 50%;
  background: rgba(10, 14, 18, 0.42);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.92);
  transition: transform 0.12s ease-out, background-color 0.12s;
}
.hud-rbtn:active { transform: scale(0.94); background: rgba(255, 255, 255, 0.22); transition-duration: 0.06s; }
/* Zone sensible élargie à 46 px sans changer le visuel */
.hud-rbtn::before { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 46px); height: max(100%, 46px); transform: translate(-50%, -50%); border-radius: 50%; }
.hud-rbtn .ico { width: 56%; height: 56%; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)); }
.hud-net {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  margin-right: calc(var(--h) * 1.2);
  color: var(--good);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hud-net i { width: max(calc(var(--h) * 0.45), 2px); background: currentColor; border-radius: 1px; }
.hud-net i:nth-child(1) { height: max(calc(var(--h) * 0.8), 3px); }
.hud-net i:nth-child(2) { height: max(calc(var(--h) * 1.3), 5px); }
.hud-net i:nth-child(3) { height: max(calc(var(--h) * 1.8), 7px); margin-right: calc(var(--h) * 0.5); }
.hud-net span { line-height: 1; }
.hud-net small { font-size: max(calc(var(--h) * 1.4), 8px); margin-left: 2px; line-height: 1; opacity: 0.85; }
.hud-net.is-mid { color: var(--a); }
.hud-net.is-mid i:nth-child(3) { opacity: 0.3; }
.hud-net.is-bad { color: var(--enemy); }
.hud-net.is-bad i:nth-child(2), .hud-net.is-bad i:nth-child(3) { opacity: 0.3; }

/* ------------------------------------------------------- arme + munitions */
.hud-weapon {
  position: absolute;
  right: calc(var(--sr) + var(--h) * 70);
  bottom: calc(var(--sb) + var(--h) * 7);
  width: max(calc(var(--h) * 22), 96px);
  height: max(calc(var(--h) * 9), 36px);
  display: flex;
  align-items: center;
  gap: calc(var(--h) * 1);
  padding: 0 calc(var(--h) * 1.5) 0 calc(var(--h) * 1.2);
  background: linear-gradient(180deg, rgba(10, 14, 18, 0.5), rgba(10, 14, 18, 0.36));
  --cut: calc(var(--h) * 1);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.hud-weapon::after {
  content: '';
  position: absolute;
  left: 0;
  right: var(--cut);
  bottom: 0;
  height: max(calc(var(--h) * 0.3), 2px);
  background: var(--a);
}
.hud-weapon__gun { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--h) * 0.3); width: 56%; text-align: left; }
.hud-weapon__ico { display: block; width: 100%; }
.hud-weapon__ico .ico--rifle { width: 100%; height: max(calc(var(--h) * 3.9), 16px); color: rgba(255, 255, 255, 0.92); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6)); }
.hud-weapon__name { font-size: var(--fs-xs); color: var(--muted); letter-spacing: 0.1em; line-height: 1; }
.hud-weapon__ammo { display: flex; align-items: baseline; margin-left: auto; font-variant-numeric: tabular-nums; line-height: 1; }
.hud-weapon__ammo b { font-size: max(calc(var(--h) * 4.6), 18px); font-weight: 700; }
.hud-weapon__ammo span { font-size: max(calc(var(--h) * 2.4), 10px); color: var(--muted); margin-left: 1px; }
.hud-weapon.is-low .hud-weapon__ammo b { color: var(--enemy); }
.hud-weapon.is-melee .hud-weapon__gun { width: auto; }
.hud-weapon__rbar { position: absolute; left: var(--cut); right: 0; top: 0; height: max(calc(var(--h) * 0.4), 2px); background: rgba(255, 255, 255, 0.15); }
.hud-weapon__rbar i { position: absolute; inset: 0; background: var(--a); transform-origin: 0 50%; transform: scaleX(0); }
/* Verrou entre deux tirs (fusil à verrou, événement weaponCycle) : même barre que le rechargement, teinte neutre */
.hud-weapon__rbar.is-cycle i { background: #C7CCD2; }
/* Abandon d'arme (appui = armé, second appui = confirmé) */
.hud-weapon.is-droppable { cursor: pointer; }
.hud-weapon__dropmsg {
  position: absolute;
  left: var(--cut);
  right: 0;
  bottom: 100%;
  margin-bottom: max(calc(var(--h) * 0.6), 3px);
  padding: max(calc(var(--h) * 0.5), 2px) max(calc(var(--h) * 1), 4px);
  background: var(--enemy-d);
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  animation: hud-pulse 0.7s ease-in-out infinite;
}
.hud-weapon.is-drop-armed { box-shadow: inset 0 0 0 max(calc(var(--h) * 0.3), 1.5px) var(--enemy); }

/* Compteur de grenades létales : pastille discrète au-dessus des munitions, alignée à droite de la carte arme */
.hud-gchip {
  --cut: calc(var(--h) * 0.7);
  position: absolute;
  right: calc(var(--sr) + var(--h) * 70);
  bottom: calc(var(--sb) + var(--h) * 7 + max(calc(var(--h) * 9), 36px) + max(calc(var(--h) * 0.7), 3px));
  height: max(calc(var(--h) * 3.6), 17px);
  display: flex;
  align-items: center;
  gap: max(calc(var(--h) * 0.6), 3px);
  padding: 0 max(calc(var(--h) * 1.1), 5px) 0 max(calc(var(--h) * 0.8), 4px);
  background: linear-gradient(180deg, rgba(10, 14, 18, 0.5), rgba(10, 14, 18, 0.36));
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
.hud-gchip__ico { display: block; width: max(calc(var(--h) * 2.6), 12px); height: max(calc(var(--h) * 2.6), 12px); color: rgba(255, 255, 255, 0.92); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55)); }
.hud-gchip b { font-size: max(calc(var(--h) * 2.4), 11px); font-weight: 700; }
.hud-gchip__key {
  padding: 1px max(calc(var(--h) * 0.45), 3px);
  font-size: max(calc(var(--h) * 1.5), 8px);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.hud-gchip__fuse { position: absolute; left: 0; right: var(--cut); bottom: 0; height: max(calc(var(--h) * 0.3), 2px); background: rgba(255, 255, 255, 0.15); }
.hud-gchip__fuse i { position: absolute; inset: 0; background: var(--a); transform-origin: 0 50%; transform: scaleX(1); }
.hud-gchip.is-zero b { color: var(--enemy); }
.hud-gchip.is-zero .hud-gchip__ico { opacity: 0.4; }
.hud-gchip.is-cooking b, .hud-gchip.is-cooking .hud-gchip__ico, .hud-gchip.is-cooking .hud-gchip__key { color: var(--a); }
.hud-gchip.is-late .hud-gchip__fuse i { background: var(--enemy); }
.hud-gchip { cursor: pointer; }

/* Sélecteur du type de grenade (touche la pastille) : rangée de puces au-dessus du centre bas, hors des pouces */
.hud-gtypes {
  position: absolute;
  left: 50%;
  bottom: calc(var(--sb) + var(--h) * 24);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: max(calc(var(--h) * 0.9), 4px);
  padding: max(calc(var(--h) * 0.9), 4px);
  background: rgba(10, 14, 18, 0.82);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
  --cut: calc(var(--h) * 1);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.hud-gtype {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: max(calc(var(--h) * 0.4), 2px);
  min-width: max(calc(var(--h) * 11), 48px);
  padding: max(calc(var(--h) * 0.8), 4px) max(calc(var(--h) * 0.8), 4px);
  background: rgba(255, 255, 255, 0.06);
}
.hud-gtype__ico { display: block; width: max(calc(var(--h) * 4.4), 22px); height: max(calc(var(--h) * 4.4), 22px); }
.hud-gtype__name { font-size: max(calc(var(--h) * 1.7), 9px); font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; color: var(--muted); }
.hud-gtype.is-on { background: rgba(255, 194, 26, 0.16); box-shadow: inset 0 calc(max(calc(var(--h) * 0.35), 2px) * -1) 0 var(--a); }
.hud-gtype.is-on .hud-gtype__name, .hud-gtype.is-on .hud-gtype__ico { color: var(--a); }

/* Tactile sur écran étroit (tablette 4:3, 3:2) : carte arme et compteur glissent à droite pour laisser libre
   le bouton grenade (58 h du bord gauche, disque max(4,5 h ; 23 px), écart max(2 h ; 8 px)). Sans effet au
   format téléphone (70 h). Miroir de hudWeaponBox (hud-logic.js), vérifié par tools/test_touch_layout.mjs. */
.hud--touch .hud-weapon,
.hud--touch .hud-gchip {
  right: min(calc(var(--sr) + var(--h) * 70),
    calc(100% - var(--sl) - var(--h) * 58 - max(calc(var(--h) * 4.5), 23px) - max(calc(var(--h) * 2), 8px) - max(calc(var(--h) * 22), 96px)));
}

.hud-weapon, .hud-health, .hud-gchip { transition: opacity 0.25s; }
.hud.is-dead .hud-weapon, .hud.is-dead .hud-health, .hud.is-dead .hud-xhair, .hud.is-dead .hud-gchip { opacity: 0; }

/* ------------------------------------------------------- santé + série */
.hud-health {
  position: absolute;
  left: 50%;
  bottom: calc(var(--sb) + var(--h) * 3.6);
  width: calc(var(--h) * 48);
  transform: translateX(-50%);
}
.hud-health__streak { display: flex; gap: 2px; height: max(calc(var(--h) * 0.5), 2px); margin-bottom: calc(var(--h) * 0.8); }
.hud-health__streak i { flex: 1; background: rgba(255, 255, 255, 0.16); transition: background-color 0.2s; }
.hud-health__streak i.is-on { background: var(--a); box-shadow: 0 0 4px rgba(255, 194, 26, 0.5); }
.hud-health__track { position: relative; height: max(calc(var(--h) * 1), 3px); background: rgba(255, 255, 255, 0.18); overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); }
.hud-health__track i { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.92); transform-origin: 0 50%; transition: transform 0.15s linear; }
.hud-health.is-low .hud-health__track i { background: var(--enemy); animation: hud-pulse 0.83s ease-in-out infinite; }

/* ------------------------------------------------------- réticule */
.hud-xhair {
  --xt: max(calc(var(--h) * 0.3), 2px);
  --xl: max(calc(var(--h) * 1.7), 7px);
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transition: opacity 0.1s linear;
}
.hud-xhair i {
  position: absolute;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
  will-change: transform;
}
.hud-xhair__t, .hud-xhair__b { width: var(--xt); height: var(--xl); left: calc(var(--xt) / -2); }
.hud-xhair__t { top: calc(var(--xl) * -1); }
.hud-xhair__b { top: 0; }
.hud-xhair__l, .hud-xhair__r { height: var(--xt); width: var(--xl); top: calc(var(--xt) / -2); }
.hud-xhair__l { left: calc(var(--xl) * -1); }
.hud-xhair__r { left: 0; }
.hud-xhair.is-enemy i { background: var(--enemy); }

/* --------------------------------------------------- lunette plein écran (fusil de précision) */
/* Vue très zoomée sur tout l'écran (la caméra du monde fait le zoom) : pas de masque noir opaque.
   Anneau fin du tube, vignettage léger des bords, réticule fin à piquets épais et graduations. */
.hud-scope {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.1s linear;
  /* vignettage léger : centre intact, bords assombris de 45 % au plus */
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.18) 72%, rgba(0, 0, 0, 0.45) 100%);
}
.hud-scope__circle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--h) * 96);
  height: calc(var(--h) * 96);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  /* anneau du tube : liseré sombre fin et reflet doux vers l'intérieur */
  box-shadow: 0 0 0 max(calc(var(--h) * 0.35), 1.5px) rgba(10, 12, 10, 0.7), inset 0 0 max(calc(var(--h) * 3), 10px) rgba(0, 0, 0, 0.28);
}
.hud-scope__circle::after {
  /* point central discret (lumineux) */
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(calc(var(--h) * 0.45), 3px);
  height: max(calc(var(--h) * 0.45), 3px);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #ff3a22;
  box-shadow: 0 0 max(calc(var(--h) * 0.5), 3px) rgba(255, 60, 30, 0.8);
}
.hud-scope__v, .hud-scope__h { position: absolute; background: rgba(12, 14, 12, 0.9); }
/* fils fins interrompus au centre (le point reste dégagé) */
.hud-scope__v { left: 50%; top: 0; bottom: 0; width: max(calc(var(--h) * 0.14), 1px); margin-left: calc(max(calc(var(--h) * 0.14), 1px) / -2);
  -webkit-mask: linear-gradient(to bottom, #000 0, #000 47%, transparent 47%, transparent 53%, #000 53%);
  mask: linear-gradient(to bottom, #000 0, #000 47%, transparent 47%, transparent 53%, #000 53%); }
.hud-scope__h { top: 50%; left: 0; right: 0; height: max(calc(var(--h) * 0.14), 1px); margin-top: calc(max(calc(var(--h) * 0.14), 1px) / -2);
  -webkit-mask: linear-gradient(to right, #000 0, #000 47%, transparent 47%, transparent 53%, #000 53%);
  mask: linear-gradient(to right, #000 0, #000 47%, transparent 47%, transparent 53%, #000 53%); }
/* piquets épais depuis l'anneau (gauche, droite, bas, haut plus court) */
.hud-scope__tick { position: absolute; background: rgba(12, 14, 12, 0.92); }
.hud-scope__tick--t, .hud-scope__tick--b { left: 50%; width: max(calc(var(--h) * 0.8), 3px); margin-left: calc(max(calc(var(--h) * 0.8), 3px) / -2); }
.hud-scope__tick--t { top: 0; height: 20%; }
.hud-scope__tick--b { bottom: 0; height: 30%; }
.hud-scope__tick--l, .hud-scope__tick--r { top: 50%; height: max(calc(var(--h) * 0.8), 3px); width: 30%; margin-top: calc(max(calc(var(--h) * 0.8), 3px) / -2); }
.hud-scope__tick--l { left: 0; }
.hud-scope__tick--r { right: 0; }
/* graduations sur les fils (entre le centre et les piquets) */
.hud-scope__mils { position: absolute; inset: 0; }
.hud-scope__mils i { position: absolute; background: rgba(12, 14, 12, 0.85); }
.hud-scope__mils .v { left: 50%; width: max(calc(var(--h) * 0.9), 4px); height: max(calc(var(--h) * 0.12), 1px); transform: translate(-50%, -50%); }
.hud-scope__mils .h { top: 50%; height: max(calc(var(--h) * 0.9), 4px); width: max(calc(var(--h) * 0.12), 1px); transform: translate(-50%, -50%); }

/* ------------------------------------------------------- marqueur d'impact */
.hud-hit {
  --hl: max(calc(var(--h) * 1.5), 6px);
  --ht: max(calc(var(--h) * 0.35), 2px);
  --hr: max(calc(var(--h) * 1.3), 5px);
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  opacity: 0;
  will-change: transform, opacity;
}
.hud-hit.is-head { --hl: max(calc(var(--h) * 1.8), 7px); }
.hud-hit i {
  position: absolute;
  left: 0;
  top: calc(var(--ht) / -2);
  width: var(--hl);
  height: var(--ht);
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
  transform-origin: 0 50%;
}
.hud-hit i:nth-child(1) { transform: rotate(45deg) translateX(var(--hr)); }
.hud-hit i:nth-child(2) { transform: rotate(135deg) translateX(var(--hr)); }
.hud-hit i:nth-child(3) { transform: rotate(225deg) translateX(var(--hr)); }
.hud-hit i:nth-child(4) { transform: rotate(315deg) translateX(var(--hr)); }
.hud-hit.is-kill i { background: var(--kill); }

/* ------------------------------------------------- indicateurs de dégâts */
.hud-dmg { position: absolute; inset: 0; }
.hud-dmg__arc {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--h) * 39.2);
  height: calc(var(--h) * 39.2);
  margin: calc(var(--h) * -19.6) 0 0 calc(var(--h) * -19.6);
  will-change: transform, opacity;
}
.hud-dmg__arc svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 2px rgba(80, 0, 0, 0.6)); }

/* ------------------------------------------------- grenade proche (A.3.18) */
/* Chaque indicateur tourne autour du réticule (rayon 12,5 h, entre le réticule et les arcs de dégâts) ;
   l'icône est contre-tournée pour rester droite, la flèche pointe vers la grenade. */
.hud-gwarn { position: absolute; inset: 0; }
.hud-gwarn__slot { position: absolute; left: 50%; top: 50%; width: 0; height: 0; will-change: transform, opacity; }
.hud-gwarn__arm {
  --gw: max(calc(var(--h) * 4.4), 22px);
  --ga: max(calc(var(--h) * 1.3), 7px);
  position: absolute;
  left: calc(var(--gw) / -2);
  top: calc(var(--h) * -12.5 - var(--gw) / 2);
  width: var(--gw);
  height: var(--gw);
  transform-origin: 50% 50%;
}
.hud-gwarn__ico {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  color: var(--enemy);
  background: rgba(10, 14, 18, 0.5);
  box-shadow: inset 0 0 0 max(calc(var(--h) * 0.25), 1.5px) rgba(255, 65, 54, 0.85), 0 0 calc(var(--h) * 1) rgba(255, 40, 30, 0.35);
  will-change: transform;
}
.hud-gwarn__ico .ico { width: 68%; height: 68%; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6)); }
.hud-gwarn__arrow {
  position: absolute;
  left: 50%;
  top: calc(var(--ga) * -1 - 2px);
  width: calc(var(--ga) * 1.5);
  height: var(--ga);
  margin-left: calc(var(--ga) * -0.75);
  background: var(--enemy);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.hud-gwarn__slot.is-close .hud-gwarn__arm { animation: hud-gw-pulse 0.45s ease-in-out infinite alternate; }
@keyframes hud-gw-pulse { from { transform: scale(1); } to { transform: scale(1.16); } }
.hud.is-dead .hud-gwarn { opacity: 0; }

/* ------------------------------------------------------- pseudos */
.hud-tags { position: absolute; inset: 0; }
.hud-tag { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.hud-tag__in {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  white-space: nowrap;
  font-size: max(calc(var(--h) * 2.2), 10px);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.95), 0 1px 2px rgba(0, 0, 0, 0.8);
}
.hud-tag__chev {
  width: max(calc(var(--h) * 1.5), 7px);
  height: max(calc(var(--h) * 1.1), 5px);
  background: var(--ally);
  clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 42%, 50% 100%, 0 42%);
  filter: drop-shadow(0 0 1px #000);
}
.hud-tag.is-ally .hud-tag__in { color: var(--ally); }
.hud-tag.is-enemy .hud-tag__in { color: var(--enemy); }
.hud-tag.is-enemy .hud-tag__chev { display: none; }
.hud-tag.is-far .hud-tag__name { display: none; }

/* ------------------------------------------------------- messages centraux */
.hud-ammomsg {
  position: absolute;
  left: 0;
  right: 0;
  top: 57%;
  text-align: center;
  font-size: max(calc(var(--h) * 2.5), 12px);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--a);
  animation: hud-blink 1s ease-in-out infinite;
}
.hud-ammomsg.is-bad { color: var(--enemy); animation: none; }
@keyframes hud-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.hud-teammsg {
  position: absolute;
  left: 50%;
  top: 14.5%;
  margin-left: calc(var(--h) * -40);
  width: calc(var(--h) * 80);
  padding: calc(var(--h) * 0.8) 0;
  text-align: center;
  font-size: max(calc(var(--h) * 2.5), 12px);
  font-weight: 700;
  letter-spacing: 0.12em;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.45) 25%, rgba(0, 0, 0, 0.45) 75%, rgba(0, 0, 0, 0));
}
.hud-teammsg.anim-a { animation: hud-msg-a 2.6s ease-out both; }
.hud-teammsg.anim-b { animation: hud-msg-b 2.6s ease-out both; }
@keyframes hud-msg-a { 0% { opacity: 0; transform: scaleX(0.6); } 8% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hud-msg-b { 0% { opacity: 0; transform: scaleX(0.6); } 8% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }

/* Médailles */
.hud-medal {
  position: absolute;
  left: 0;
  right: 0;
  top: 19%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: 50% 35%;
}
.hud-medal__burst {
  position: absolute;
  top: calc(var(--h) * -4);
  left: 50%;
  width: calc(var(--h) * 18);
  height: calc(var(--h) * 18);
  margin-left: calc(var(--h) * -9);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 62%);
  opacity: 0;
}
.hud-medal__icon { position: relative; width: max(calc(var(--h) * 10), 40px); height: max(calc(var(--h) * 10), 40px); filter: drop-shadow(0 calc(var(--h) * 0.3) calc(var(--h) * 0.6) rgba(0, 0, 0, 0.55)); }
.hud-medal__name {
  position: relative;
  margin-top: calc(var(--h) * 0.6);
  font-size: max(calc(var(--h) * 2.8), 13px);
  font-weight: 800;
  letter-spacing: 0.1em;
}
.hud-medal.anim-a { animation: hud-medal-a 1.6s both; }
.hud-medal.anim-b { animation: hud-medal-b 1.6s both; }
.hud-medal.anim-a .hud-medal__burst { animation: hud-burst-a 0.5s ease-out both; }
.hud-medal.anim-b .hud-medal__burst { animation: hud-burst-b 0.5s ease-out both; }
@keyframes hud-medal-a { 0% { opacity: 0; transform: scale(1.6); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); } 12.5% { opacity: 1; transform: scale(1); } 81% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.96); } }
@keyframes hud-medal-b { 0% { opacity: 0; transform: scale(1.6); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); } 12.5% { opacity: 1; transform: scale(1); } 81% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.96); } }
@keyframes hud-burst-a { 0% { opacity: 0; transform: scale(0.3); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } }
@keyframes hud-burst-b { 0% { opacity: 0; transform: scale(0.3); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } }

/* Popups de score */
.hud-pop {
  position: absolute;
  left: 0;
  right: 0;
  top: 62%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--h) * 0.3);
}
.hud-pop__victim { display: flex; align-items: center; gap: calc(var(--h) * 0.8); color: var(--enemy); font-size: max(calc(var(--h) * 2.4), 11px); font-weight: 700; }
.hud-pop__victim .ico { width: max(calc(var(--h) * 2.8), 12px); height: max(calc(var(--h) * 2.8), 12px); color: #fff; }
.hud-pop__total {
  font-size: max(calc(var(--h) * 4.2), 18px);
  font-weight: 800;
  color: var(--a);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hud-pop__lines { display: flex; flex-direction: column; align-items: center; gap: calc(var(--h) * 0.2); }
.hud-pop__line { display: flex; align-items: baseline; gap: calc(var(--h) * 1); line-height: 1.1; }
.hud-pop__label { font-size: max(calc(var(--h) * 2.3), 11px); font-weight: 700; letter-spacing: 0.08em; }
.hud-pop__pts { font-size: max(calc(var(--h) * 3.4), 15px); font-weight: 800; color: var(--a); font-variant-numeric: tabular-nums; }
.hud-pop__line.anim-a { animation: hud-popl-a 1.7s ease-out both; }
.hud-pop__line.anim-b { animation: hud-popl-b 1.7s ease-out both; }
.hud-pop__victim.anim-a, .hud-pop__total.anim-a { animation: hud-popl-a 1.9s ease-out both; }
.hud-pop__victim.anim-b, .hud-pop__total.anim-b { animation: hud-popl-b 1.9s ease-out both; }
@keyframes hud-popl-a { 0% { opacity: 0; transform: scale(1.4); } 11% { opacity: 1; transform: scale(1); } 30% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(calc(var(--h) * -2)); } }
@keyframes hud-popl-b { 0% { opacity: 0; transform: scale(1.4); } 11% { opacity: 1; transform: scale(1); } 30% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(calc(var(--h) * -2)); } }

/* Protection d'apparition */
.hud-prot {
  position: absolute;
  left: 0;
  right: 0;
  top: 75.5%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--h) * 1);
  color: #9ED8FF;
}
.hud-prot .ico { width: max(calc(var(--h) * 3.4), 14px); height: max(calc(var(--h) * 3.4), 14px); }
.hud-prot__txt { display: flex; flex-direction: column; gap: calc(var(--h) * 0.6); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; }
.hud-prot__bar { position: relative; display: block; width: calc(var(--h) * 22); height: max(calc(var(--h) * 0.5), 2px); background: rgba(255, 255, 255, 0.2); }
.hud-prot__bar i { position: absolute; inset: 0; background: #9ED8FF; transform-origin: 0 50%; }

/* Compte à rebours et bannière */
.hud-count { position: absolute; left: 0; right: 0; top: 27%; text-align: center; }
.hud-count__lbl { font-size: max(calc(var(--h) * 2.8), 13px); font-weight: 700; letter-spacing: 0.16em; }
.hud-count b {
  display: block;
  margin-top: calc(var(--h) * 0.5);
  font-size: calc(var(--h) * 14);
  font-weight: 800;
  color: var(--a);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 calc(var(--h) * 0.3) calc(var(--h) * 1.5) rgba(0, 0, 0, 0.6);
}
.hud-count b.anim-a { animation: hud-num-a 0.25s ease-out both; }
.hud-count b.anim-b { animation: hud-num-b 0.25s ease-out both; }
@keyframes hud-num-a { 0% { transform: scale(1.5); opacity: 0.2; } 100% { transform: scale(1); opacity: 1; } }
@keyframes hud-num-b { 0% { transform: scale(1.5); opacity: 0.2; } 100% { transform: scale(1); opacity: 1; } }

.hud-banner {
  position: absolute;
  left: 0;
  right: 0;
  top: 25%;
  padding: calc(var(--h) * 1.8) 0;
  text-align: center;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.62) 28%, rgba(0, 0, 0, 0.62) 72%, rgba(0, 0, 0, 0));
}
.hud-banner::before, .hud-banner::after {
  content: '';
  position: absolute;
  left: 30%;
  right: 30%;
  height: max(calc(var(--h) * 0.25), 1px);
  background: linear-gradient(90deg, rgba(255, 194, 26, 0), var(--a), rgba(255, 194, 26, 0));
}
.hud-banner::before { top: 0; }
.hud-banner::after { bottom: 0; }
.hud-banner__title { font-size: max(calc(var(--h) * 4.6), 18px); font-weight: 800; letter-spacing: 0.1em; }
.hud-banner__sub { margin-top: calc(var(--h) * 0.6); font-family: var(--font-body); font-size: max(calc(var(--h) * 2.3), 11px); font-weight: 500; color: #dfe4ea; }
.hud-banner.anim-a { animation: hud-msg-a 2.6s ease-out both; }
.hud-banner.anim-b { animation: hud-msg-b 2.6s ease-out both; }

/* Écran de mort */
.hud-death {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--sb) + 13%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--h) * 1.6);
}
.hud-death.anim-a { animation: hud-in-a 0.3s ease-out both; }
.hud-death.anim-b { animation: hud-in-b 0.3s ease-out both; }
@keyframes hud-in-a { from { opacity: 0; transform: translateY(calc(var(--h) * 2)); } to { opacity: 1; transform: none; } }
@keyframes hud-in-b { from { opacity: 0; transform: translateY(calc(var(--h) * 2)); } to { opacity: 1; transform: none; } }
.hud-death__card {
  position: relative;
  width: calc(var(--h) * 62);
  min-width: 250px;
  padding: calc(var(--h) * 1.6) calc(var(--h) * 3);
  text-align: center;
  background: linear-gradient(90deg, rgba(10, 14, 18, 0), rgba(10, 14, 18, 0.82) 16%, rgba(10, 14, 18, 0.82) 84%, rgba(10, 14, 18, 0));
}
.hud-death__card::before {
  content: '';
  position: absolute;
  left: 16%;
  right: 16%;
  top: 0;
  height: max(calc(var(--h) * 0.3), 2px);
  background: var(--enemy-d);
}
.hud-death__by { font-size: max(calc(var(--h) * 2.2), 10px); letter-spacing: 0.2em; color: var(--muted); font-weight: 700; }
.hud-death__name { margin-top: calc(var(--h) * 0.4); font-size: max(calc(var(--h) * 4.4), 18px); font-weight: 800; color: var(--enemy); letter-spacing: 0.02em; line-height: 1.05; }
.hud-death__info { display: flex; justify-content: center; align-items: center; gap: calc(var(--h) * 3); margin-top: calc(var(--h) * 0.8); font-size: var(--fs-s); color: #dfe4ea; }
.hud-death__gun { display: flex; align-items: center; gap: calc(var(--h) * 0.8); }
.hud-death__gun .ico--rifle { width: max(calc(var(--h) * 7), 30px); height: max(calc(var(--h) * 2.2), 10px); color: #fff; }
.hud-death__respawn { font-size: max(calc(var(--h) * 2.6), 12px); font-weight: 700; letter-spacing: 0.14em; }
.hud-death__respawn b { color: var(--a); font-size: 1.25em; margin-left: 0.2em; }
.hud-death__tap {
  margin-top: calc(var(--h) * -0.4);
  padding: calc(var(--h) * 0.7) calc(var(--h) * 2.6);
  font-size: max(calc(var(--h) * 2.4), 12px);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--a);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 20%, rgba(0, 0, 0, 0.5) 80%, rgba(0, 0, 0, 0));
  animation: hud-tap-in 0.25s ease-out both, hud-blink 1.3s 0.25s ease-in-out infinite;
}
@keyframes hud-tap-in { from { opacity: 0; transform: translateY(calc(var(--h) * 1)); } to { opacity: 1; transform: none; } }

/* Bureau : invitation à verrouiller le pointeur */
.hud-click {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translateX(-50%);
  padding: calc(var(--h) * 1.6) calc(var(--h) * 3.2);
  text-align: center;
  white-space: nowrap;
  background: rgba(8, 11, 15, 0.74);
  --cut: calc(var(--h) * 1.2);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.hud-click__title { font-size: max(calc(var(--h) * 3.4), 16px); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--a); animation: hud-blink 1.6s ease-in-out infinite; }
.hud-click__keys { margin-top: calc(var(--h) * 0.8); font-family: var(--font-body); font-weight: 500; font-size: max(calc(var(--h) * 1.8), 10px); line-height: 1.7; color: #cfd6dc; text-shadow: none; }

/* Carte agrandie */
.hud-bigmap {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  background: rgba(7, 9, 12, 0.8);
  pointer-events: auto;
}
.hud-bigmap__box { display: flex; flex-direction: column; align-items: center; gap: calc(var(--h) * 1.2); }
.hud-bigmap__title { font-size: max(calc(var(--h) * 3.2), 14px); font-weight: 800; letter-spacing: 0.14em; }
.hud-bigmap canvas {
  display: block;
  width: min(calc(var(--h) * 70), 80vw);
  height: min(calc(var(--h) * 70), 80vw);
  border-radius: calc(var(--h) * 0.8);
  box-shadow: 0 0 0 max(1px, calc(var(--h) * 0.25)) rgba(255, 255, 255, 0.3);
}
.hud-bigmap__hint { font-family: var(--font-body); font-size: var(--fs-xs); color: var(--muted2); text-shadow: none; }

/* ------------------------------------------------------- tableau des scores */
.hud-board {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  background: rgba(4, 6, 9, 0.5);
  pointer-events: auto;
  text-shadow: none;
}
.hud-board__panel {
  width: 70%;
  min-width: min(560px, 96vw);
  max-width: 96vw;
  max-height: 88%;
  display: flex;
  flex-direction: column;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, rgba(16, 21, 27, 0.95), rgba(10, 14, 18, 0.95));
  --cut: calc(var(--h) * 1.6);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.hud-board__head { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--h) * 1.5) calc(var(--h) * 2.6); border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.hud-board__mode { font-size: max(calc(var(--h) * 2.6), 12px); font-weight: 800; letter-spacing: 0.08em; }
.hud-board__mode span { margin-left: calc(var(--h) * 1.6); color: var(--muted); font-weight: 600; }
.hud-board__clock { font-size: max(calc(var(--h) * 3), 14px); font-weight: 700; font-variant-numeric: tabular-nums; }
.hud-board__cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--h) * 1.8); padding: calc(var(--h) * 1.6) calc(var(--h) * 2.6); overflow: hidden; }
.hud-board__teamhead {
  display: flex;
  align-items: center;
  gap: calc(var(--h) * 1);
  height: max(calc(var(--h) * 5.2), 24px);
  padding: 0 calc(var(--h) * 1.4);
  font-size: max(calc(var(--h) * 2.6), 12px);
  font-weight: 800;
  letter-spacing: 0.1em;
}
.hud-board__team--A .hud-board__teamhead { background: linear-gradient(90deg, #1C6BD0, rgba(28, 107, 208, 0.2)); }
.hud-board__team--B .hud-board__teamhead { background: linear-gradient(90deg, #C0232B, rgba(192, 35, 43, 0.2)); }
.hud-board__teamhead .ico--emblem { width: max(calc(var(--h) * 3.6), 16px); height: max(calc(var(--h) * 3.6), 16px); }
.hud-board__teamhead b { margin-left: auto; font-size: max(calc(var(--h) * 3.4), 15px); font-variant-numeric: tabular-nums; }
.hud-board__thead, .hud-board__row {
  display: grid;
  grid-template-columns: calc(var(--h) * 3.2) 1fr calc(var(--h) * 4.4) calc(var(--h) * 4.4) calc(var(--h) * 4.4) calc(var(--h) * 7.5);
  align-items: center;
  gap: calc(var(--h) * 0.6);
  padding: 0 calc(var(--h) * 1.4);
  text-align: center;
}
.hud-board__thead { height: max(calc(var(--h) * 3.6), 16px); font-size: max(calc(var(--h) * 1.8), 9px); color: var(--muted); letter-spacing: 0.1em; }
.hud-board__thead span:nth-child(2), .hud-board__row span:nth-child(2) { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-board__row {
  height: max(calc(var(--h) * 4.8), 20px);
  margin-bottom: 2px;
  font-size: max(calc(var(--h) * 2.3), 11px);
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, 0.045);
}
.hud-board__row span:first-child { color: var(--muted); }
.hud-board__row span:last-child { font-weight: 700; }
.hud-board__row.is-me { background: rgba(255, 194, 26, 0.12); box-shadow: inset max(calc(var(--h) * 0.4), 2px) 0 0 var(--a); color: var(--self); }
.hud-board__row.is-dead { opacity: 0.5; }
.hud-board__hint { padding: 0 0 calc(var(--h) * 1.3); text-align: center; font-family: var(--font-body); font-size: var(--fs-xs); color: var(--muted2); }

/* ------------------------------------------------------- menu des paramètres */
.hud-menu { position: absolute; inset: 0; z-index: 5; pointer-events: auto; text-shadow: none; }
.hud-menu__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.3); }
.hud-menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: max(40%, 330px);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  padding-right: var(--sr);
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, rgba(16, 21, 27, 0.97), rgba(10, 14, 18, 0.97));
  box-shadow: calc(var(--h) * -0.5) 0 calc(var(--h) * 3) rgba(0, 0, 0, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  animation: hud-slide-in 0.2s ease-out both;
}
.hud-menu__scrim { animation: hud-fade-in 0.2s ease-out both; }
@keyframes hud-slide-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes hud-fade-in { from { opacity: 0; } to { opacity: 1; } }
.hud-menu__head { display: flex; align-items: center; gap: max(calc(var(--h) * 1.2), 8px); padding: max(calc(var(--h) * 1.8), 8px) calc(var(--h) * 2.6) calc(var(--h) * 0.6); }
.hud-menu__title { margin-right: auto; }
.hud-menu__fs {
  display: flex;
  align-items: center;
  gap: max(calc(var(--h) * 0.8), 5px);
  height: max(calc(var(--h) * 5.4), 32px);
  padding: 0 max(calc(var(--h) * 1.4), 9px);
  font-size: max(calc(var(--h) * 1.9), 10px);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  white-space: nowrap;
}
.hud-menu__fs:active { background: rgba(255, 194, 26, 0.18); }
.hud-menu__fsico { display: block; width: max(calc(var(--h) * 2.4), 14px); height: max(calc(var(--h) * 2.4), 14px); }
.hud-menu__fsico .ico { width: 100%; height: 100%; }
.hud-menu__title { font-size: max(calc(var(--h) * 3.4), 15px); font-weight: 800; letter-spacing: 0.1em; }
.hud-menu__x { flex: none; display: grid; place-items: center; width: max(calc(var(--h) * 5.4), 36px); height: max(calc(var(--h) * 5.4), 36px); color: #fff; background: rgba(255, 255, 255, 0.07); border-radius: 50%; }
.hud-menu__x .ico { width: 46%; height: 46%; }
.hud-menu__tabs { display: flex; gap: calc(var(--h) * 2.4); padding: 0 calc(var(--h) * 2.6); border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.hud-menu__tabs button {
  min-height: 32px;
  padding: calc(var(--h) * 1.4) 0 calc(var(--h) * 1.1);
  font-size: max(calc(var(--h) * 2.2), 11px);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
  box-shadow: inset 0 calc(var(--h) * -0.4) 0 transparent;
  transition: color 0.2s, box-shadow 0.2s;
}
.hud-menu__tabs button.is-on { color: var(--a); box-shadow: inset 0 calc(max(calc(var(--h) * 0.4), 2px) * -1) 0 var(--a); }
.hud-menu__body { flex: 1; min-height: 0; overflow-y: auto; padding: calc(var(--h) * 1) calc(var(--h) * 2.6); touch-action: pan-y; overscroll-behavior: contain; }
.hud-row { padding: calc(var(--h) * 1.3) 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.hud-row__label { margin-bottom: calc(var(--h) * 0.9); font-family: var(--font-body); font-size: max(calc(var(--h) * 2.1), 11px); font-weight: 500; color: #dfe4ea; }
.hud-slider { --p: 0.5; display: flex; align-items: center; gap: calc(var(--h) * 1); }
.hud-slider__step {
  flex: none;
  display: grid;
  place-items: center;
  width: max(calc(var(--h) * 4.6), 32px);
  height: max(calc(var(--h) * 4.6), 32px);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.hud-slider__step .ico { width: 48%; height: 48%; }
.hud-slider__step:active { background: rgba(255, 255, 255, 0.2); }
.hud-slider__range {
  flex: 1;
  min-width: 0;
  height: max(calc(var(--h) * 4.6), 32px);
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  touch-action: pan-x;
  cursor: pointer;
}
.hud-slider__range::-webkit-slider-runnable-track {
  height: max(calc(var(--h) * 0.6), 3px);
  background: linear-gradient(90deg, var(--a) calc(var(--p) * 100%), rgba(255, 255, 255, 0.18) calc(var(--p) * 100%));
}
.hud-slider__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: max(calc(var(--h) * 3), 16px);
  height: max(calc(var(--h) * 3), 16px);
  margin-top: calc((max(calc(var(--h) * 0.6), 3px) - max(calc(var(--h) * 3), 16px)) / 2);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.hud-slider__range::-moz-range-track { height: max(calc(var(--h) * 0.6), 3px); background: rgba(255, 255, 255, 0.18); }
.hud-slider__range::-moz-range-progress { height: max(calc(var(--h) * 0.6), 3px); background: var(--a); }
.hud-slider__range::-moz-range-thumb { width: max(calc(var(--h) * 3), 16px); height: max(calc(var(--h) * 3), 16px); border: 0; border-radius: 50%; background: #fff; }
.hud-slider__val {
  flex: none;
  min-width: max(calc(var(--h) * 7.5), 40px);
  padding: calc(var(--h) * 0.6) calc(var(--h) * 0.8);
  text-align: center;
  font-size: max(calc(var(--h) * 2.3), 12px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.hud-seg { display: flex; gap: 2px; }
.hud-seg button {
  flex: 1;
  min-height: 32px;
  padding: calc(var(--h) * 1.1) calc(var(--h) * 0.6);
  font-size: max(calc(var(--h) * 2), 10px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.07);
  transition: background-color 0.15s, color 0.15s;
}
.hud-seg button.is-on { color: var(--a); background: rgba(255, 194, 26, 0.13); box-shadow: inset 0 calc(max(calc(var(--h) * 0.35), 2px) * -1) 0 var(--a); }
.hud-menu__note { margin: calc(var(--h) * 1.2) 0; font-family: var(--font-body); font-size: max(calc(var(--h) * 1.8), 10px); line-height: 1.45; color: var(--muted); }
.hud-menu__note b { color: #fff; }
.hud-menu__foot { display: flex; gap: calc(var(--h) * 1.2); padding: calc(var(--h) * 1.4) calc(var(--h) * 2.6) calc(var(--h) * 1.4 + var(--sb)); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.hud-btn {
  flex: 1;
  height: max(calc(var(--h) * 6.4), 38px);
  font-size: max(calc(var(--h) * 2.3), 11px);
  font-weight: 800;
  letter-spacing: 0.08em;
  --cut: calc(var(--h) * 1);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: transform 0.12s ease-out, filter 0.12s;
}
.hud-btn:active { transform: scale(0.97); filter: brightness(0.92); }
.hud-btn--ghost { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
.hud-btn--danger { background: #C0232B; }
.hud-btn--danger.is-armed { background: #FF4136; animation: hud-pulse 0.8s ease-in-out infinite; }
.hud-btn--accent { width: 100%; flex: none; display: block; color: #15171A; background: linear-gradient(180deg, var(--a-hi), var(--a-lo)); }

/* ================================================== commandes tactiles */
.tc {
  --h: 1vh;
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.tc-probe {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  visibility: hidden;
  pointer-events: none;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.tc-vis { position: absolute; inset: 0; pointer-events: none; opacity: var(--tc-alpha, 0.75); transition: opacity 0.25s; }
.tc.is-off .tc-vis { opacity: 0; }
.tc-btn { position: absolute; }
.tc-btn__mover { width: 100%; height: 100%; will-change: transform; }
.tc-btn__mover.is-free { transition: transform 0.12s ease-out; }
.tc-btn__face {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(10, 14, 18, 0.35);
  box-shadow: inset 0 0 0 max(calc(var(--h) * 0.35), 1.5px) rgba(255, 255, 255, 0.55);
  transition: transform 0.12s ease-out, background-color 0.12s ease-out, box-shadow 0.12s ease-out, color 0.12s;
}
.tc-btn__face .ico { width: 50%; height: 50%; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)); }
.tc-btn.is-down .tc-btn__face {
  transform: scale(0.94);
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 0 max(calc(var(--h) * 0.35), 1.5px) rgba(255, 255, 255, 0.85);
  transition-duration: 0.06s;
}
.tc-btn--fire.is-down .tc-btn__face {
  box-shadow: inset 0 0 0 max(calc(var(--h) * 0.4), 2px) rgba(255, 255, 255, 0.9), 0 0 calc(var(--h) * 1.2) rgba(255, 255, 255, 0.28);
}
.tc-btn--fire .tc-btn__face .ico { width: 46%; height: 46%; }
.tc-btn.is-on .tc-btn__face { color: #FFC21A; box-shadow: inset 0 0 0 max(calc(var(--h) * 0.35), 1.5px) #FFC21A; background: rgba(40, 30, 0, 0.35); }
.tc-btn.is-off { opacity: 0.35; }
.tc-ring { position: absolute; inset: -6%; width: 112%; height: 112%; transform: rotate(-90deg); opacity: 0; transition: opacity 0.15s; }
.tc-ring circle { fill: none; stroke: #FFC21A; stroke-width: 2.6; stroke-dasharray: 100; stroke-dashoffset: 100; }
.tc-btn.is-reloading .tc-ring { opacity: 1; }
.tc-btn.is-reloading .tc-btn__face { color: #FFC21A; }

/* Grenade létale (A.3.10) : pastille de compteur en bas à droite, anneau de mèche qui se vide pendant la cuisson */
.tc-btn.is-hidden { display: none; }
.tc-btn__mover { position: relative; }
.tc-badge {
  position: absolute;
  right: -8%;
  bottom: -8%;
  min-width: max(calc(var(--h) * 3), 16px);
  height: max(calc(var(--h) * 3), 16px);
  padding: 0 3px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(10, 14, 18, 0.7);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28);
  color: #fff;
  font-family: var(--font-display);
  font-size: max(calc(var(--h) * 2), 10px);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tc-badge.is-zero { color: #FF4136; }
.tc-ring--fuse circle { stroke-dashoffset: 0; }
.tc-btn--gren.is-cooking .tc-ring { opacity: 1; }
.tc-btn--gren.is-cooking .tc-btn__face { color: #FFC21A; box-shadow: inset 0 0 0 max(calc(var(--h) * 0.35), 1.5px) #FFC21A; background: rgba(40, 30, 0, 0.35); }
.tc-btn--gren.is-late .tc-ring circle { stroke: #FF4136; }
.tc-btn--gren.is-late .tc-btn__face { color: #FF4136; }
/* Bouton Annuler : 13 h au-dessus du bouton létal, visible seulement pendant la cuisson */
.tc-btn--gcancel { opacity: 0; transition: opacity 0.1s; }
.tc-btn--gcancel.is-shown { opacity: 1; }
.tc-btn--gcancel .tc-btn__face .ico { width: 44%; height: 44%; }
.tc-btn--gcancel.is-hover .tc-btn__face {
  transform: scale(1.08);
  background: rgba(255, 65, 54, 0.42);
  box-shadow: inset 0 0 0 max(calc(var(--h) * 0.4), 2px) #FF4136;
}

.tc-joy { position: absolute; left: 0; top: 0; will-change: transform; transition: opacity 0.15s; }
.tc-joy.is-rest { opacity: 0.4; transition: opacity 0.15s, transform 0.15s ease-out; }
.tc-joy__base {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10, 14, 18, 0.18), rgba(10, 14, 18, 0.32));
  box-shadow: inset 0 0 0 max(calc(var(--h) * 0.3), 1.5px) rgba(255, 255, 255, 0.4);
}
.tc-joy__marks { position: absolute; inset: 0; width: 100%; height: 100%; fill: rgba(255, 255, 255, 0.5); }
.tc-joy__knob {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.5));
  box-shadow: inset 0 0 0 max(calc(var(--h) * 0.25), 1px) rgba(255, 255, 255, 0.8), 0 0 calc(var(--h) * 1) rgba(0, 0, 0, 0.25);
  transform: translate(-50%, -50%);
  will-change: transform;
}
.tc-joy.is-rest .tc-joy__knob { transition: transform 0.15s ease-out; }
.tc-lock {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(10, 14, 18, 0.42);
  box-shadow: inset 0 0 0 max(calc(var(--h) * 0.3), 1.5px) rgba(255, 255, 255, 0.6);
  opacity: 0;
  transition: opacity 0.1s, background-color 0.1s, color 0.1s, box-shadow 0.1s;
  will-change: transform;
}
.tc-lock .ico { width: 64%; height: 64%; }
.tc-lock.is-shown { opacity: 1; }
.tc-lock.is-hover { color: #FFC21A; background: rgba(255, 194, 26, 0.2); box-shadow: inset 0 0 0 max(calc(var(--h) * 0.4), 2px) #FFC21A; }
.tc-lock.is-locked { color: #15171A; background: #FFC21A; box-shadow: 0 0 calc(var(--h) * 1.2) rgba(255, 194, 26, 0.45); }

/* ======================================== éditeur de disposition (src/ui/layout-editor.js) */
.le-open > .hud, .le-open > .tc { visibility: hidden; }
.le {
  --h: 1vh;
  --a: #FFC21A;
  --a-hi: #FFD23F;
  --a-lo: #FFB000;
  --muted: #AAB3BD;
  --bad: #FF4136;
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  font-family: var(--font-display);
  font-weight: 600;
  color: #fff;
  line-height: 1.15;
  background: radial-gradient(120% 90% at 50% 40%, #27313B 0%, #151B21 60%, #0C1014 100%);
}
.le.is-over-game { background: rgba(8, 11, 15, 0.62); }
.le *, .le *::before, .le *::after { box-sizing: border-box; }
.le button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.le [hidden] { display: none !important; }
.le-probe {
  position: absolute; left: 0; top: 0; width: 0; height: 0; visibility: hidden; pointer-events: none;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
/* Grille d'aide : traits fins tous les 5 h, plus marqués tous les 25 h, axes du centre */
.le-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(255, 194, 26, 0.28) calc(50% - 0.5px), rgba(255, 194, 26, 0.28) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(0deg, transparent calc(50% - 0.5px), rgba(255, 194, 26, 0.28) calc(50% - 0.5px), rgba(255, 194, 26, 0.28) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px calc(var(--h) * 25)),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px calc(var(--h) * 25)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px calc(var(--h) * 5)),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px calc(var(--h) * 5));
}
.le-guide { position: absolute; pointer-events: none; background: var(--a); opacity: 0.8; }
.le-guide--x { top: 0; bottom: 0; left: calc(50% - 0.5px); width: 1px; }
.le-guide--y { left: 0; right: 0; top: calc(50% - 0.5px); height: 1px; }
.le-stage { position: absolute; inset: 0; }

/* Éléments fantômes */
.le-item { position: absolute; cursor: grab; }
.le.is-dragging .le-item { cursor: grabbing; }
.le-item__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(10, 14, 18, 0.5);
  box-shadow: inset 0 0 0 max(calc(var(--h) * 0.35), 1.5px) rgba(255, 255, 255, 0.6);
  transition: box-shadow 0.12s, background-color 0.12s;
}
.le-item--btn .le-item__face, .le-item--joy .le-item__face { border-radius: 50%; }
.le-item--btn .le-item__face .ico { width: 50%; height: 50%; }
.le-item--fire .le-item__face { background: rgba(10, 14, 18, 0.62); }
.le-item--joy .le-item__face { background: rgba(10, 14, 18, 0.32); }
.le-item__knob {
  width: 42%;
  height: 42%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 max(calc(var(--h) * 0.3), 1px) rgba(255, 255, 255, 0.7);
}
.le-item__lbl {
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: max(calc(var(--h) * 0.5), 2px);
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: max(calc(var(--h) * 2), 10px);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}
.le-item.is-low .le-item__lbl { top: auto; bottom: 100%; margin: 0 0 max(calc(var(--h) * 0.5), 2px); }
.le-item--box .le-item__face {
  grid-auto-flow: column;
  gap: max(calc(var(--h) * 0.8), 4px);
  padding: 0 max(calc(var(--h) * 1), 4px);
  font-size: max(calc(var(--h) * 2.4), 11px);
  font-weight: 700;
  letter-spacing: 0.05em;
  --cut: calc(var(--h) * 0.9);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.le-item--box .le-item__face .ico { width: max(calc(var(--h) * 3.4), 14px); height: max(calc(var(--h) * 3.4), 14px); }
.le-item--box .le-item__face .ico--rifle { width: max(calc(var(--h) * 9), 36px); height: max(calc(var(--h) * 3), 12px); }
.le-item--box small { font-size: 0.75em; color: var(--muted); }
.le-item--minimap .le-item__face { grid-auto-flow: row; align-content: center; }
.le-item--clock .le-item__face { grid-auto-flow: row; gap: 0; align-content: center; padding: 0; }
.le-item--ammo .le-item__face { align-content: end; padding-bottom: max(calc(var(--h) * 1.2), 5px); }
.le-item__chip {
  position: absolute;
  right: max(calc(var(--h) * 1), 4px);
  top: max(calc(var(--h) * 0.6), 3px);
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 0.8em;
}
.le-item__chip .ico { width: max(calc(var(--h) * 2.4), 11px) !important; height: max(calc(var(--h) * 2.4), 11px) !important; }
.le-item__bars { display: grid; gap: max(calc(var(--h) * 0.6), 3px); width: max(calc(var(--h) * 12), 40px); }
.le-item__bars i { height: max(calc(var(--h) * 1.4), 5px); background: linear-gradient(90deg, #1C6BD0, #3EA2FF); }
.le-item__bars i + i { background: linear-gradient(90deg, #C0232B, #FF4136); width: 70%; }
.le-emb { width: max(calc(var(--h) * 5), 20px); height: max(calc(var(--h) * 5.4), 22px); }
.le-item--fixed { cursor: default; pointer-events: none; }
.le-item--fixed .le-item__face { background: rgba(10, 14, 18, 0.3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.5); }
.le-item--fixed .le-item__lbl { color: rgba(255, 255, 255, 0.45); }
.le-item--menu .le-item__face .ico, .le-item--feed .le-item__face .ico { width: max(calc(var(--h) * 3.4), 14px); height: max(calc(var(--h) * 3.4), 14px); }
.le.no-grid .le-grid { display: none; }
.le .le-btn.is-on { color: var(--a); box-shadow: inset 0 calc(max(calc(var(--h) * 0.35), 2px) * -1) 0 var(--a); }
.le-item--health .le-item__face { clip-path: none; }
.le .le-btn { white-space: nowrap; }
/* ordre de superposition : style.zIndex posé par l'éditeur (dernier déplacé au-dessus) */
.le-item.is-sel .le-item__face { background: rgba(40, 30, 0, 0.55); box-shadow: inset 0 0 0 max(calc(var(--h) * 0.45), 2px) var(--a), 0 0 0 max(calc(var(--h) * 0.4), 2px) rgba(255, 194, 26, 0.25); color: var(--a); }
.le-item.is-sel .le-item__lbl { color: var(--a); }
/* chevauchement toléré : simple liseré orange (le dernier élément déplacé passe au-dessus) */
.le-item.is-overlap:not(.is-sel) .le-item__face { box-shadow: inset 0 0 0 max(calc(var(--h) * 0.35), 1.5px) #FF9F1C; }

/* Panneau d'outils : au centre (zone du réticule, libre de commandes) ou en haut / en bas */
.le-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: min(96vw, max(calc(var(--h) * 105), 380px));
  display: grid;
  gap: max(calc(var(--h) * 1), 4px);
  padding: max(calc(var(--h) * 1.4), 6px) max(calc(var(--h) * 2), 9px);
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, rgba(14, 19, 25, 0.94), rgba(10, 14, 18, 0.9));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 calc(var(--h) * 1) calc(var(--h) * 4) rgba(0, 0, 0, 0.5);
  --cut: calc(var(--h) * 1.4);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: opacity 0.15s;
}
.le-panel[data-dock="top"] { top: max(calc(var(--h) * 1.5), 6px); transform: translate(-50%, 0); }
.le-panel[data-dock="bottom"] { top: auto; bottom: max(calc(var(--h) * 1.5), 6px); transform: translate(-50%, 0); }
.le.is-dragging .le-panel { opacity: 0.18; pointer-events: none; }
.le-panel__row { display: flex; align-items: center; gap: max(calc(var(--h) * 1.2), 6px); min-height: max(calc(var(--h) * 6.4), 30px); }
.le-panel__title { display: flex; align-items: center; gap: max(calc(var(--h) * 0.8), 4px); margin-right: auto; font-size: max(calc(var(--h) * 2.8), 13px); font-weight: 800; letter-spacing: 0.08em; color: var(--a); }
.le-panel__title .ico { width: max(calc(var(--h) * 3.6), 16px); height: max(calc(var(--h) * 3.6), 16px); }
.le-panel__hint { flex: 1; font-family: var(--font-body); font-size: max(calc(var(--h) * 2), 11px); color: var(--muted); }
.le-panel__name { min-width: max(calc(var(--h) * 16), 70px); font-size: max(calc(var(--h) * 2.6), 12px); font-weight: 800; letter-spacing: 0.05em; color: var(--a); }
.le-panel__foot { justify-content: flex-end; }
.le-panel__warn { margin-right: auto; font-family: var(--font-body); font-size: max(calc(var(--h) * 1.9), 10px); color: #FFB45C; }
@media (max-height: 460px) { .le-panel__title span, .le-size > span { display: none; } }
.le-seg { display: flex; gap: 2px; }
.le .le-seg button, .le .le-btn {
  min-height: max(calc(var(--h) * 6.4), 30px);
  padding: 0 max(calc(var(--h) * 1.8), 8px);
  display: inline-flex;
  align-items: center;
  gap: max(calc(var(--h) * 0.6), 3px);
  font-size: max(calc(var(--h) * 2.1), 10px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.07);
  transition: background-color 0.15s, color 0.15s, transform 0.12s;
}
.le .le-seg button.is-on { color: var(--a); background: rgba(255, 194, 26, 0.13); box-shadow: inset 0 calc(max(calc(var(--h) * 0.35), 2px) * -1) 0 var(--a); }
.le-btn .ico { width: max(calc(var(--h) * 2.6), 12px); height: max(calc(var(--h) * 2.6), 12px); }
.le .le-btn:active, .le .le-seg button:active { transform: scale(0.96); }
.le .le-btn--icon { padding: 0; width: max(calc(var(--h) * 6.4), 30px); justify-content: center; }
.le .le-btn--sm { padding: 0 max(calc(var(--h) * 1.2), 6px); }
.le .le-btn--ghost { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.04); }
.le .le-btn--accent { color: #15171A; background: linear-gradient(180deg, var(--a-hi), var(--a-lo)); font-weight: 800; }
.le-size { display: flex; align-items: center; gap: max(calc(var(--h) * 0.6), 3px); flex: 1; font-size: max(calc(var(--h) * 1.9), 10px); font-weight: 700; letter-spacing: 0.08em; color: var(--muted); }
.le-size input {
  flex: 1;
  min-width: 60px;
  height: max(calc(var(--h) * 6.4), 30px);
  margin: 0;
  accent-color: #FFC21A;
  background: transparent;
  touch-action: none;
}
.le-size output { min-width: max(calc(var(--h) * 7), 34px); text-align: right; font-size: max(calc(var(--h) * 2.3), 11px); color: #fff; font-variant-numeric: tabular-nums; }
.hud-menu__layout { width: 100%; display: flex; align-items: center; justify-content: center; gap: max(calc(var(--h) * 1), 5px); margin-top: calc(var(--h) * 1.4); }
.hud-menu__layout .ico { width: max(calc(var(--h) * 3), 14px); height: max(calc(var(--h) * 3), 14px); }

/* Écrans hors partie : salon, équipement, opérateurs, modes, paramètres, recherche, chargement, résultats.
   Unité --u = 1 % de la hauteur (bornée par la largeur pour les écrans 16:9 et 4:3). Angles coupés = signature. */
.scr {
  --u: min(1vh, 0.5vw);
  --cut: calc(var(--u) * 1.2);
  --gl: max(calc(var(--u) * 4), calc(env(safe-area-inset-left, 0px) + var(--u) * 1.5));
  --gr: max(calc(var(--u) * 4), calc(env(safe-area-inset-right, 0px) + var(--u) * 1.5));
  --gt: max(calc(var(--u) * 2), env(safe-area-inset-top, 0px));
  --gb: max(calc(var(--u) * 3), env(safe-area-inset-bottom, 0px));
  --bg0: #07090c;
  --bg1: #0e1217;
  --panel: rgba(16, 21, 27, 0.88);
  --panel-2: #1a212a;
  --line: rgba(255, 255, 255, 0.12);
  --t1: #f1f3f5;
  --t2: #aab3bd;
  --t3: #6c7783;
  --acc: #ffc21a;
  --acc-hi: #ffd23f;
  --acc-lo: #ffb000;
  --on-acc: #15171a;
  --ally: #3ea2ff;
  --ally-d: #1c6bd0;
  --enemy: #ff4136;
  --enemy-d: #c0232b;
  --self: #ffd43b;
  --good: #58d66b;
  --fs-2xs: max(9px, calc(var(--u) * 1.45));
  --fs-xs: max(9.5px, calc(var(--u) * 1.65));
  --fs-s: max(10px, calc(var(--u) * 1.9));
  --fs-m: max(11px, calc(var(--u) * 2.2));
  --fs-l: max(12px, calc(var(--u) * 2.6));
  --cond: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --body: 'Barlow', 'Segoe UI', Roboto, Arial, sans-serif;
  --clip: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  /* Tailles planchers en px : un téléphone en paysage sans plein écran descend à ~330 px de haut */
  --tap: max(calc(var(--u) * 5.2), 30px);
  --chat-h: max(calc(var(--u) * 4.8), 26px);
  --chat-w: max(calc(var(--u) * 65.5), 236px);
  --tabs-h: max(calc(var(--u) * 4.4), 26px);
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  color: var(--t1);
  font-family: var(--body);
  font-size: var(--fs-m);
  line-height: 1.2;
}
:where(.scr) *, :where(.scr) *::before, :where(.scr) *::after { box-sizing: border-box; }
:where(.scr) button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
:where(.scr) button:disabled { cursor: default; }
:where(.scr) :is(h1, h2, h3, p, dl, dd) { margin: 0; }
.scr-ico { width: 1em; height: 1em; display: inline-block; flex: none; vertical-align: -0.12em; }
.scr-rifle { display: block; width: 100%; height: auto; }
.scr-emb { width: 1em; height: 1em; flex: none; display: inline-block; }
.scr-emb--a { color: var(--ally); }
.scr-emb--b { color: var(--enemy); }
.scr-pic { display: block; overflow: hidden; background: #11161c; }
.scr-pic img, .scr-pic svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.scr-gunpic { display: block; }
.scr-gunpic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.scr-gunpic svg { display: block; width: 100%; height: 100%; color: rgba(233, 237, 240, 0.8); }

.scr-screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: auto;
  touch-action: none;
}
.scr-screen.is-active { animation: scr-in 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes scr-in { from { opacity: 0; transform: translateX(calc(var(--u) * 3)); } }

/* --- Petits composants ----------------------------------------------------------------- */
.scr-chip {
  display: inline-flex;
  align-items: center;
  height: calc(var(--u) * 2.5);
  padding: 0 calc(var(--u) * 0.9);
  font: 700 var(--fs-xs) / 1 var(--cond);
  letter-spacing: 0.06em;
  color: var(--t1);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  white-space: nowrap;
}
.scr-chip--dim { color: var(--t2); background: rgba(0, 0, 0, 0.3); }
.scr-req {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  font: 700 var(--fs-2xs) / 1 var(--cond);
  letter-spacing: 0.04em;
  color: var(--t2);
  white-space: nowrap;
}
.scr-req .scr-ico { color: var(--acc); }
.scr-soon {
  display: inline-block;
  padding: calc(var(--u) * 0.3) calc(var(--u) * 0.7);
  font: 700 var(--fs-2xs) / 1 var(--cond);
  letter-spacing: 0.08em;
  color: var(--t2);
  background: rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}
.scr-dot {
  position: absolute;
  top: calc(var(--u) * 0.6);
  right: calc(var(--u) * 0.6);
  width: calc(var(--u) * 1.3);
  height: calc(var(--u) * 1.3);
  min-width: 6px;
  min-height: 6px;
  border-radius: 50%;
  background: #ff4136;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45);
}
.scr-xpbar {
  position: relative;
  display: inline-block;
  width: calc(var(--u) * 18);
  height: max(3px, calc(var(--u) * 0.6));
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.scr-xpbar i {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--acc-lo), var(--acc-hi));
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 0.6s ease-out;
}
.scr-rarity {
  display: inline-flex;
  align-items: center;
  height: calc(var(--u) * 2.4);
  padding: 0 calc(var(--u) * 0.9);
  font: 700 var(--fs-2xs) / 1 var(--cond);
  letter-spacing: 0.1em;
  color: #15171a;
  background: #a3abb4;
}
.scr-tag {
  display: inline-flex;
  align-items: center;
  height: calc(var(--u) * 2.4);
  padding: 0 calc(var(--u) * 0.9);
  font: 700 var(--fs-2xs) / 1 var(--cond);
  letter-spacing: 0.08em;
  color: var(--t2);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.scr-dots i {
  display: inline-block;
  width: 0.28em;
  height: 0.28em;
  margin-left: 0.18em;
  background: currentColor;
  animation: scr-dot 1.2s infinite;
}
.scr-dots i:nth-child(2) { animation-delay: 0.4s; }
.scr-dots i:nth-child(3) { animation-delay: 0.8s; }
@keyframes scr-dot { 0%, 100% { opacity: 0.2; } 30% { opacity: 1; } }

.scr-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 0.9);
  height: max(calc(var(--u) * 7.4), 34px);
  min-width: calc(var(--u) * 24);
  padding: 0 calc(var(--u) * 3);
  font: 800 var(--fs-l) / 1 var(--cond);
  letter-spacing: 0.1em;
  text-align: center;
  clip-path: var(--clip);
  transition: transform 0.12s, filter 0.12s;
}
.scr-btn:active:not(:disabled) { transform: scale(0.96); filter: brightness(0.9); }
.scr-btn--primary {
  color: var(--on-acc);
  background: linear-gradient(180deg, var(--acc-hi), var(--acc-lo));
}
.scr-btn--ghost {
  color: var(--t1);
  background: rgba(10, 14, 18, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}
.scr-btn--done {
  color: var(--t2);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.scr-btn--done .scr-ico { color: var(--good); }
.scr-btn--sm { height: max(calc(var(--u) * 5), 30px); min-width: 0; padding: 0 calc(var(--u) * 2); font-size: var(--fs-m); }
.scr-btn--inline { margin-top: calc(var(--u) * 1.6); }

.scr-toast {
  position: absolute;
  top: calc(var(--gt) + var(--u) * 11);
  left: 50%;
  z-index: 40;
  max-width: 80vw;
  padding: calc(var(--u) * 1.1) calc(var(--u) * 2.4);
  font: 600 var(--fs-m) / 1.2 var(--body);
  color: var(--t1);
  background: rgba(10, 14, 18, 0.94);
  border-left: max(3px, calc(var(--u) * 0.4)) solid var(--acc);
  transform: translateX(-50%);
  pointer-events: none;
  white-space: nowrap;
}
.scr-toast.is-in { animation: scr-toast 0.2s ease-out both; }
@keyframes scr-toast { from { opacity: 0; transform: translate(-50%, calc(var(--u) * -1.5)); } }

/* --- En-tête des menus ------------------------------------------------------------------ */
.scr-head {
  position: absolute;
  top: var(--gt);
  left: var(--gl);
  right: var(--gr);
  height: calc(var(--u) * 8);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.8);
  z-index: 3;
}
.scr-back {
  flex: none;
  width: max(calc(var(--u) * 6.4), 34px);
  height: max(calc(var(--u) * 6.4), 34px);
  display: grid;
  place-items: center;
  font-size: max(calc(var(--u) * 3.2), 17px);
  background: rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: var(--clip);
}
.scr-back:active { background: rgba(255, 194, 26, 0.2); }
.scr-title {
  font: 800 max(18px, calc(var(--u) * 4.2)) / 1 var(--cond);
  letter-spacing: 0.06em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}
.scr-head__right { margin-left: auto; display: flex; align-items: center; gap: calc(var(--u) * 1.4); }

/* Portefeuille */
.scr-wallet { display: flex; gap: calc(var(--u) * 1.2); }
.scr-cur {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.8);
  height: max(calc(var(--u) * 4.6), 26px);
  min-width: calc(var(--u) * 19);
  padding-left: calc(var(--u) * 1);
  background: rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  clip-path: var(--clip);
}
.scr-cur__ico { font-size: max(calc(var(--u) * 2.8), 14px); }
.scr-cur--cr .scr-cur__ico { color: var(--acc); }
.scr-cur--tk .scr-cur__ico { color: #35d0ff; }
.scr-cur b {
  flex: 1;
  font: 700 var(--fs-l) / 1 var(--cond);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.scr-cur__add {
  width: max(calc(var(--u) * 4.6), 26px);
  height: 100%;
  display: grid;
  place-items: center;
  font-size: max(calc(var(--u) * 2.2), 12px);
  color: var(--on-acc) !important;
  background: linear-gradient(180deg, var(--acc-hi), var(--acc-lo)) !important;
}

/* --- Salon ------------------------------------------------------------------------------ */
.scr-lobby__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 9, 12, 0.85) 0, rgba(7, 9, 12, 0) 17%),
    linear-gradient(0deg, rgba(7, 9, 12, 0.7) 0, rgba(7, 9, 12, 0) 26%),
    linear-gradient(90deg, rgba(7, 9, 12, 0.6) 0, rgba(7, 9, 12, 0) 26%),
    linear-gradient(270deg, rgba(7, 9, 12, 0.72) 0, rgba(7, 9, 12, 0.3) 30%, rgba(7, 9, 12, 0) 44%);
}
.scr-top {
  position: absolute;
  top: calc(var(--gt) - var(--u) * 0.5);
  left: var(--gl);
  right: var(--gr);
  height: calc(var(--u) * 9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 2);
  z-index: 3;
}
.scr-profile { display: flex; align-items: center; gap: calc(var(--u) * 1.4); min-width: 0; }
.scr-avatar {
  position: relative;
  width: calc(var(--u) * 7.4);
  height: calc(var(--u) * 7.4);
  flex: none;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 194, 26, 0.9), rgba(255, 194, 26, 0.15) 60%);
  clip-path: var(--clip);
}
.scr-avatar .scr-pic { width: 100%; height: 100%; clip-path: var(--clip); }
.scr-avatar__lvl {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: calc(var(--u) * 3);
  padding: calc(var(--u) * 0.2) calc(var(--u) * 0.4);
  font: 800 var(--fs-2xs) / 1 var(--cond);
  text-align: center;
  color: var(--on-acc);
  background: var(--acc);
}
.scr-profile__txt { display: flex; flex-direction: column; gap: calc(var(--u) * 0.7); min-width: 0; }
.scr-profile__name {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.8);
  font: 700 max(14px, calc(var(--u) * 3)) / 1 var(--cond);
  letter-spacing: 0.02em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}
.scr-profile__name b { overflow: hidden; text-overflow: ellipsis; max-width: calc(var(--u) * 26); }
.scr-profile__edit { font-size: 0.7em; color: var(--t2); }
.scr-profile__lvl { display: flex; align-items: center; gap: calc(var(--u) * 1); white-space: nowrap; }
.scr-profile__lvl em { font: italic 700 var(--fs-s) / 1 var(--cond); color: var(--acc); letter-spacing: 0.04em; }
.scr-profile__lvl small { font: 600 var(--fs-2xs) / 1 var(--cond); color: var(--t3); font-variant-numeric: tabular-nums; }
.scr-top__right { display: flex; align-items: center; gap: calc(var(--u) * 1.6); }
.scr-topicons { display: flex; gap: calc(var(--u) * 0.9); }
.scr-iconbtn {
  position: relative;
  width: var(--tap);
  height: var(--tap);
  display: grid;
  place-items: center;
  font-size: max(calc(var(--u) * 2.7), 15px);
  color: var(--t1);
  background: rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: var(--clip);
}
.scr-iconbtn:active { background: rgba(255, 194, 26, 0.2); }
.scr-iconbtn .scr-dot { top: calc(var(--u) * 0.5); right: calc(var(--u) * 0.5); width: calc(var(--u) * 1); height: calc(var(--u) * 1); }
.scr-fsbtn { color: var(--t2); }
.scr-fsbtn .scr-ico { font-size: 0.92em; }

.scr-side {
  position: absolute;
  left: var(--gl);
  top: calc(var(--gt) + var(--u) * 13);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.1);
  z-index: 2;
}
.scr-sidebtn {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.2);
  width: max(calc(var(--u) * 33), 128px);
  height: max(calc(var(--u) * 6.2), 27px);
  padding: 0 calc(var(--u) * 1.2) 0 calc(var(--u) * 1.3);
  background: linear-gradient(90deg, rgba(16, 21, 27, 0.9), rgba(16, 21, 27, 0.5));
  box-shadow: inset max(2px, calc(var(--u) * 0.35)) 0 0 rgba(255, 255, 255, 0.14);
  clip-path: var(--clip);
}
.scr-sidebtn:active { background: rgba(255, 194, 26, 0.16); }
.scr-sidebtn__ico { font-size: calc(var(--u) * 2.9); color: rgba(241, 243, 245, 0.62); display: grid; }
.scr-sidebtn__lbl {
  flex: 1;
  font: 700 var(--fs-m) / 1 var(--cond);
  letter-spacing: 0.05em;
  color: rgba(241, 243, 245, 0.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scr-sidebtn .scr-dot { top: calc(var(--u) * 0.7); right: calc(var(--u) * 0.7); }
.scr-sidebtn__lock { font-size: calc(var(--u) * 1.8); color: var(--t3); }

.scr-dock {
  position: absolute;
  left: var(--gl);
  bottom: calc(var(--gb) + var(--chat-h) + var(--u) * 1.4);
  display: flex;
  gap: calc(var(--u) * 1.1);
  z-index: 2;
}
.scr-tile {
  position: relative;
  width: max(calc(var(--u) * 21), 84px);
  height: max(calc(var(--u) * 12), 50px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 2px;
  padding: 0 calc(var(--u) * 1.2) max(calc(var(--u) * 1), 4px);
  overflow: hidden;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, rgba(26, 33, 42, 0.92), rgba(12, 16, 20, 0.92));
  box-shadow: inset 0 max(2px, calc(var(--u) * 0.3)) 0 rgba(255, 194, 26, 0), inset 0 0 0 1px var(--line);
  clip-path: var(--clip);
  transition: box-shadow 0.15s;
}
.scr-tile:active { box-shadow: inset 0 max(2px, calc(var(--u) * 0.3)) 0 var(--acc), inset 0 0 0 1px var(--line); }
.scr-tile__art { position: absolute; inset: 0 0 max(calc(var(--u) * 4.6), 22px) 0; display: grid; place-items: center; background: radial-gradient(60% 70% at 55% 55%, rgba(170, 190, 215, 0.16), rgba(170, 190, 215, 0) 100%); }
.scr-tile__gun { width: 92%; height: 82%; }
.scr-tile__art--op { inset: 0; }
.scr-tile__pic { position: absolute; right: 0; top: 0; width: 64%; height: 100%; opacity: 0.92; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); }
.scr-tile__sil { width: 76%; color: rgba(233, 237, 240, 0.35); }
.scr-tile__wr { position: absolute; right: 12%; top: 16%; font-size: calc(var(--u) * 3); color: var(--acc); }
.scr-tile__cap {
  position: relative;
  z-index: 1;
  font: 800 var(--fs-m) / 1 var(--cond);
  letter-spacing: 0.06em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.scr-tile__sub {
  position: relative;
  z-index: 1;
  font: 700 var(--fs-xs) / 1 var(--cond);
  letter-spacing: 0.06em;
  color: var(--acc);
}
.scr-chat {
  position: absolute;
  left: var(--gl);
  bottom: calc(var(--gb) - var(--u) * 0.6);
  width: var(--chat-w);
  height: var(--chat-h);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.1);
  padding: 0 calc(var(--u) * 1.4);
  font: 500 var(--fs-s) / 1 var(--body);
  color: var(--t2);
  background: rgba(0, 0, 0, 0.45);
  clip-path: var(--clip);
  z-index: 2;
}
.scr-chat > span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr-chat .scr-ico { font-size: calc(var(--u) * 2.4); }
.scr-chat__mic { color: var(--t3); }

.scr-opname {
  position: absolute;
  /* sous l'opérateur, sans jamais toucher la barre de discussion */
  left: max(44%, calc(var(--gl) + var(--chat-w) + 70px));
  bottom: calc(var(--gb) + var(--u) * 0.2);
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 0.8);
  transform: translateX(-50%);
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}
.scr-opname__emb { font-size: calc(var(--u) * 2.4); align-self: center; display: grid; }
.scr-opname b { font: 800 var(--fs-l) / 1 var(--cond); letter-spacing: 0.14em; }
.scr-opname small { font: 600 var(--fs-xs) / 1 var(--cond); letter-spacing: 0.12em; color: var(--t2); }
.scr-lobby .scr-drag-hint { display: none; }

.scr-modepanel {
  position: absolute;
  right: var(--gr);
  top: calc(var(--gt) + var(--u) * 11);
  width: clamp(calc(var(--u) * 62), 33vw, calc(var(--u) * 78));
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.3);
  z-index: 2;
}
.scr-mtabs { display: flex; border-bottom: 1px solid var(--line); }
.scr-mtabs button {
  position: relative;
  flex: 1 1 auto;
  height: max(calc(var(--u) * 4.6), 26px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 0.5);
  padding: 0 calc(var(--u) * 0.8);
  font: 700 var(--fs-s) / 1 var(--cond);
  letter-spacing: 0.06em;
  color: var(--t3);
  white-space: nowrap;
}
.scr-mtabs button .scr-ico { font-size: 0.95em; }
.scr-mtabs .is-on { color: var(--acc); }
.scr-mtabs .is-on::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -1px;
  height: max(2px, calc(var(--u) * 0.4));
  background: var(--acc);
}
.scr-modecard {
  position: relative;
  display: block;
  height: calc(var(--u) * 22.5);
  overflow: hidden;
  background: #151b22 linear-gradient(135deg, #1d2530, #0e1217);
  clip-path: var(--clip);
}
.scr-modecard__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 62% 46%;
  transition: transform 0.4s;
}
.scr-modecard:active .scr-modecard__img { transform: scale(1.04); }
.scr-modecard::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 9, 12, 0.94) 0, rgba(7, 9, 12, 0.7) 44%, rgba(7, 9, 12, 0.05) 88%);
  box-shadow: inset max(2px, calc(var(--u) * 0.4)) 0 0 var(--acc), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  pointer-events: none;
}
.scr-modecard__txt {
  position: absolute;
  z-index: 1;
  left: calc(var(--u) * 2.2);
  top: calc(var(--u) * 1.8);
  bottom: calc(var(--u) * 1.8);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.scr-modecard__kicker {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.6);
  font: 700 var(--fs-xs) / 1 var(--cond);
  letter-spacing: 0.14em;
  color: var(--acc);
}
.scr-modecard__title {
  font: 800 max(15px, calc(var(--u) * 3.6)) / 0.95 var(--cond);
  letter-spacing: 0.02em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}
.scr-modecard__map {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1);
  font: 700 var(--fs-m) / 1 var(--cond);
  letter-spacing: 0.12em;
  color: var(--t1);
}
.scr-modecard__chev {
  position: absolute;
  z-index: 1;
  right: calc(var(--u) * 1.4);
  bottom: calc(var(--u) * 1.4);
  width: max(calc(var(--u) * 4.2), 20px);
  height: max(calc(var(--u) * 4.2), 20px);
  display: grid;
  place-items: center;
  font-size: calc(var(--u) * 2.2);
  color: var(--on-acc);
  background: var(--acc);
  clip-path: var(--clip);
}
/* Bouton CARTE posé sur le bas de la carte de mode, à gauche du chevron : ouvre directement le choix
   de carte (Sélection du mode, onglet CARTES). Même hauteur que le chevron. */
.scr-mapbtn {
  --h: max(calc(var(--u) * 4.2), 22px);
  position: relative;
  z-index: 3;
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.8);
  height: var(--h);
  max-width: 62%;
  margin: calc(-1 * (var(--u) * 1.3 + var(--u) * 1.4 + var(--h))) calc(var(--u) * 1.4 + var(--h) + var(--u) * 0.8) calc(var(--u) * 1.4) 0;
  padding: 0 calc(var(--u) * 1.2);
  font: 700 var(--fs-m) / 1 var(--cond);
  letter-spacing: 0.1em;
  color: var(--t1);
  background: rgba(7, 9, 12, 0.78);
  box-shadow: inset 0 0 0 1px rgba(255, 194, 26, 0.55);
  clip-path: var(--clip);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.scr-mapbtn small { font: 700 var(--fs-xs) / 1 var(--cond); letter-spacing: 0.14em; color: var(--acc); }
.scr-mapbtn b { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr-mapbtn .scr-ico { flex: none; color: var(--acc); }
.scr-mapbtn:active { background: rgba(255, 194, 26, 0.2); }
@media (hover: hover) { .scr-mapbtn:hover { background: rgba(30, 36, 44, 0.92); } }
.scr-seg {
  display: flex;
  height: max(calc(var(--u) * 5), 28px);
  background: rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: var(--clip);
}
.scr-seg button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 0.6);
  font: 700 var(--fs-s) / 1 var(--cond);
  letter-spacing: 0.08em;
  color: var(--t3);
  white-space: nowrap;
}
.scr-seg .is-on {
  color: var(--acc);
  background: linear-gradient(180deg, rgba(255, 194, 26, 0.04), rgba(255, 194, 26, 0.16));
  box-shadow: inset 0 calc(var(--u) * -0.4) 0 var(--acc);
}
.scr-seg .scr-req { margin-left: calc(var(--u) * 0.4); }
.scr-squad { display: flex; justify-content: flex-end; gap: calc(var(--u) * 1.1); margin-top: calc(var(--u) * 0.6); }
.scr-squad__me, .scr-squad__slot {
  width: max(calc(var(--u) * 5.4), 26px);
  height: max(calc(var(--u) * 5.4), 26px);
  border-radius: 50%;
  flex: none;
}
.scr-squad__me { overflow: hidden; box-shadow: 0 0 0 max(2px, calc(var(--u) * 0.3)) var(--acc); }
.scr-squad__me .scr-pic { width: 100%; height: 100%; }
.scr-squad__slot {
  display: grid;
  place-items: center;
  font-size: calc(var(--u) * 2.2);
  color: rgba(255, 255, 255, 0.65);
  background: rgba(0, 0, 0, 0.4);
  border: 1px dashed rgba(255, 255, 255, 0.45);
}

.scr-playzone {
  position: absolute;
  right: var(--gr);
  bottom: var(--gb);
  width: clamp(calc(var(--u) * 54), 28vw, calc(var(--u) * 66));
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.2);
  z-index: 2;
}
.scr-playzone::before {
  content: '';
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: -30%;
  height: 90%;
  background: radial-gradient(50% 50% at 50% 60%, rgba(255, 180, 0, 0.22), rgba(255, 180, 0, 0));
  pointer-events: none;
}
.scr-play {
  position: relative;
  height: calc(var(--u) * 13);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--on-acc);
  background:
    repeating-linear-gradient(-60deg, rgba(0, 0, 0, 0.06) 0 2px, transparent 2px 9px) right / 34% 100% no-repeat,
    linear-gradient(180deg, var(--acc-hi), var(--acc-lo));
  clip-path: polygon(calc(var(--u) * 1.8) 0, 100% 0, 100% calc(100% - var(--u) * 1.8), calc(100% - var(--u) * 1.8) 100%, 0 100%, 0 calc(var(--u) * 1.8));
  transition: transform 0.1s, filter 0.1s;
}
.scr-play:active:not(:disabled) { transform: scale(0.97); filter: brightness(0.92); }
.scr-play > span { grid-area: 1 / 1; }
.scr-play__label {
  font: 800 max(24px, calc(var(--u) * 6)) / 1 var(--cond);
  letter-spacing: 0.14em;
  padding-left: 0.14em;
}
.scr-play__search, .scr-play__found { display: none; }
.scr-play__shine {
  position: absolute;
  top: -40%;
  left: 0;
  width: 22%;
  height: 180%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  transform: translateX(-150%) skewX(-22deg);
  animation: scr-shine 3.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes scr-shine {
  0% { transform: translateX(-150%) skewX(-22deg); }
  17%, 100% { transform: translateX(560%) skewX(-22deg); }
}
.scr-mm {
  display: none;
  padding: calc(var(--u) * 1.3) calc(var(--u) * 1.8);
  background: rgba(10, 14, 18, 0.88);
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: var(--clip);
}
.scr-mm__head {
  display: flex;
  align-items: baseline;
  font: 800 var(--fs-l) / 1 var(--cond);
  letter-spacing: 0.08em;
}
.scr-mm__pips { display: flex; gap: calc(var(--u) * 0.5); margin: calc(var(--u) * 1.1) 0; }
.scr-mm__pips i {
  flex: 1;
  height: calc(var(--u) * 3.4);
  display: grid;
  place-items: center;
  font-size: calc(var(--u) * 2);
  color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
  transition: color 0.2s, background 0.2s;
}
.scr-mm__pips i:nth-child(6) { margin-left: calc(var(--u) * 0.8); }
.scr-mm__pips i.is-on { color: var(--on-acc); background: var(--t1); animation: scr-pop 0.25s ease-out; }
@keyframes scr-pop { from { transform: scale(1.12); } }
.scr-mm__row { display: flex; justify-content: space-between; font: 600 var(--fs-xs) / 1 var(--cond); letter-spacing: 0.06em; color: var(--t2); }
.scr-mm__row b { color: var(--t1); font-variant-numeric: tabular-nums; }
/* Écran de recherche : avertissement du salon (lecture seule), code de salon, diagnostic réseau */
.scr-mm__notice, .scr-mm__diag {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 0.8);
  margin-top: calc(var(--u) * 0.9);
  font: 600 var(--fs-xs) / 1.25 var(--body);
}
.scr-mm__notice { padding: calc(var(--u) * 0.7) calc(var(--u) * 0.9); color: #ffd98a; background: rgba(255, 170, 40, 0.1); box-shadow: inset 2px 0 0 #ffb02e; }
.scr-mm__diag { color: var(--t3); font-family: var(--cond); letter-spacing: 0.04em; }
.scr-mm__notice .scr-ico, .scr-mm__diag .scr-ico { flex: none; margin-top: 0.1em; }
.scr-mm__notice[hidden], .scr-mm__diag[hidden], .scr-mm__salon[hidden] { display: none; }
.scr-mm__salon {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1);
  margin-top: calc(var(--u) * 0.9);
  font: 600 var(--fs-xs) / 1 var(--cond);
  letter-spacing: 0.1em;
  color: var(--t2);
}
.scr-mm__salon b { font: 800 var(--fs-l) / 1 var(--cond); letter-spacing: 0.18em; color: var(--acc); user-select: all; }
.scr-mm__salon .scr-btn { margin-left: auto; }

.scr-lobby.is-searching .scr-squad { display: none; }
.scr-lobby.is-searching .scr-mm { display: block; }
.scr-lobby.is-searching .scr-side,
.scr-lobby.is-searching .scr-dock,
.scr-lobby.is-searching .scr-mtabs,
.scr-lobby.is-searching .scr-modecard,
.scr-lobby.is-searching .scr-seg,
.scr-lobby.is-searching .scr-profile,
.scr-lobby.is-searching .scr-topicons { opacity: 0.4; pointer-events: none; }
.scr-lobby.is-searching .scr-play {
  color: var(--acc);
  background: rgba(16, 21, 27, 0.94);
  box-shadow: inset 0 0 0 max(2px, calc(var(--u) * 0.3)) var(--acc);
}
.scr-lobby.is-searching .scr-play__label,
.scr-lobby.is-searching .scr-play__shine { display: none; }
.scr-lobby.is-searching .scr-play__search {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 0.5);
}
.scr-play__search small { font: 700 var(--fs-s) / 1 var(--cond); letter-spacing: 0.24em; color: var(--acc); }
.scr-play__search b { font: 800 max(20px, calc(var(--u) * 4.8)) / 1 var(--cond); color: var(--t1); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }
.scr-lobby.is-found .scr-play {
  color: var(--on-acc);
  background: linear-gradient(180deg, var(--acc-hi), var(--acc-lo));
  animation: scr-found 0.6s ease-out;
}
.scr-lobby.is-found .scr-play__search { display: none; }
.scr-lobby.is-found .scr-play__found { display: block; font: 800 max(18px, calc(var(--u) * 4.2)) / 1 var(--cond); letter-spacing: 0.1em; }
.scr-lobby.is-found .scr-mm__head { color: var(--acc); }
.scr-lobby.is-found .scr-dots { display: none; }
.scr-lobby.is-found .scr-mm__pips i.is-on { background: var(--acc); }
@keyframes scr-found { 0% { filter: brightness(2.2); } 100% { filter: brightness(1); } }

.scr-season {
  position: absolute;
  left: var(--gl);
  top: calc(var(--gt) + var(--u) * 51);
  width: calc(var(--u) * 33);
  height: calc(var(--u) * 11.5);
  overflow: hidden;
  background: #151b22;
  box-shadow: inset 0 0 0 1px rgba(255, 194, 26, 0.35);
  clip-path: var(--clip);
  z-index: 2;
}
.scr-season__img { position: absolute; inset: 0; background-size: cover; background-position: 30% 60%; filter: saturate(0.8); }
.scr-season::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 9, 12, 0.94) 0, rgba(7, 9, 12, 0.72) 60%, rgba(7, 9, 12, 0.35));
  pointer-events: none;
}
.scr-season__txt {
  position: absolute;
  z-index: 1;
  left: calc(var(--u) * 1.4);
  top: calc(var(--u) * 1.2);
  right: calc(var(--u) * 1.4);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.6);
}
.scr-season__txt small { font: 700 var(--fs-2xs) / 1 var(--cond); letter-spacing: 0.2em; color: var(--acc); }
.scr-season__txt b { font: 800 var(--fs-l) / 1 var(--cond); letter-spacing: 0.06em; white-space: nowrap; }
.scr-season__tier { display: flex; align-items: center; gap: calc(var(--u) * 1); margin-top: calc(var(--u) * 0.4); }
.scr-season__tier em { font: 700 var(--fs-2xs) / 1 var(--cond); font-style: normal; letter-spacing: 0.08em; color: var(--t2); white-space: nowrap; }
.scr-season__tier strong { color: var(--t1); }
.scr-season__tier .scr-xpbar { flex: 1; width: auto; }
.scr-season__days {
  position: absolute;
  z-index: 1;
  top: calc(var(--u) * 1);
  right: calc(var(--u) * 1.2);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.4);
  font: 700 var(--fs-2xs) / 1 var(--cond);
  color: var(--t2);
}
.scr-lobby.is-searching .scr-season { opacity: 0.4; pointer-events: none; }
@media (max-height: 360px) { .scr-season { display: none; } }

/* --- Menus : fonds ----------------------------------------------------------------------- */
.scr-menu-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 9, 12, 0.88) 0, rgba(7, 9, 12, 0) 22%),
    linear-gradient(90deg, rgba(7, 9, 12, 0.82) 0, rgba(7, 9, 12, 0.35) 30%, rgba(7, 9, 12, 0) 42%),
    linear-gradient(270deg, rgba(7, 9, 12, 0.82) 0, rgba(7, 9, 12, 0.3) 34%, rgba(7, 9, 12, 0) 46%),
    linear-gradient(0deg, rgba(7, 9, 12, 0.6) 0, rgba(7, 9, 12, 0) 24%);
}
.scr-drag-hint {
  position: absolute;
  left: 50%;
  bottom: calc(var(--gb) + var(--u) * 0.5);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.7);
  font: 600 var(--fs-xs) / 1 var(--cond);
  letter-spacing: 0.08em;
  color: var(--t3);
  transform: translateX(-50%);
  pointer-events: none;
  white-space: nowrap;
}

/* --- Équipement --------------------------------------------------------------------------- */
.scr-ltabs, .scr-ftabs {
  position: absolute;
  top: calc(var(--gt) + var(--u) * 9.4);
  left: var(--gl);
  right: var(--gr);
  display: flex;
  gap: calc(var(--u) * 0.7);
  overflow: hidden;
  z-index: 2;
}
.scr-ltabs button, .scr-ftabs button {
  position: relative;
  flex: none;
  height: var(--tabs-h);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.7);
  padding: 0 calc(var(--u) * 1.8);
  font: 700 var(--fs-s) / 1 var(--cond);
  letter-spacing: 0.06em;
  color: var(--t3);
  background: rgba(0, 0, 0, 0.45);
  clip-path: var(--clip);
  white-space: nowrap;
}
.scr-ltabs .is-on, .scr-ftabs .is-on {
  color: var(--t1);
  background: linear-gradient(180deg, rgba(255, 194, 26, 0.08), rgba(255, 194, 26, 0.22));
  box-shadow: inset 0 calc(var(--u) * -0.4) 0 var(--acc);
}
.scr-ltabs .is-on .scr-ico { color: var(--acc); }
.scr-ftabs .scr-emb { font-size: calc(var(--u) * 2.6); }
.scr-slots {
  position: absolute;
  left: var(--gl);
  top: calc(var(--gt) + var(--u) * 11.2 + var(--tabs-h));
  width: calc(var(--u) * 52);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1);
  z-index: 2;
}
.scr-slot {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.2);
  min-height: calc(var(--u) * 7);
  /* le contenu démarre sous la légende, même quand la police plancher dépasse l'unité */
  padding: calc(max(calc(var(--u) * 0.9), 3px) + var(--fs-2xs) + max(calc(var(--u) * 0.8), 3px)) calc(var(--u) * 1.4) calc(var(--u) * 1) calc(var(--u) * 1.4);
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, rgba(20, 26, 33, 0.92), rgba(11, 15, 19, 0.92));
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: var(--clip);
  text-align: left;
  width: 100%;
}
.scr-slot__cap {
  position: absolute;
  top: max(calc(var(--u) * 0.9), 3px);
  left: calc(var(--u) * 1.4);
  font: 700 var(--fs-2xs) / 1 var(--cond);
  letter-spacing: 0.14em;
  color: var(--t2);
}
.scr-slot--primary { height: calc(var(--u) * 16); align-items: flex-end; }
.scr-slot--primary.is-on {
  background:
    radial-gradient(70% 90% at 70% 50%, rgba(255, 194, 26, 0.12), rgba(255, 194, 26, 0) 70%),
    linear-gradient(180deg, rgba(24, 30, 38, 0.95), rgba(12, 16, 20, 0.95));
  box-shadow: inset max(2px, calc(var(--u) * 0.45)) 0 0 var(--acc), inset 0 0 0 1px rgba(255, 194, 26, 0.35);
}
.scr-slot__gun { position: absolute; right: calc(var(--u) * 1.2); top: calc(var(--u) * 2.2); width: 64%; height: calc(var(--u) * 10.5); }
.scr-slot__foot { position: relative; display: flex; flex-direction: column; gap: calc(var(--u) * 0.4); }
.scr-slot__foot b { font: 800 max(15px, calc(var(--u) * 3.4)) / 1 var(--cond); letter-spacing: 0.04em; }
.scr-slot__foot small { font: 700 var(--fs-2xs) / 1 var(--cond); letter-spacing: 0.1em; color: var(--t2); }
.scr-slot__foot em { font: italic 700 var(--fs-2xs) / 1 var(--cond); color: var(--acc); letter-spacing: 0.06em; }
.scr-corner::before, .scr-corner::after {
  content: '';
  position: absolute;
  width: calc(var(--u) * 1.6);
  height: calc(var(--u) * 1.6);
  border-color: rgba(255, 194, 26, 0.7);
  border-style: solid;
}
.scr-corner::before { top: calc(var(--u) * 0.6); right: calc(var(--u) * 0.6); border-width: 2px 2px 0 0; }
.scr-corner::after { bottom: calc(var(--u) * 0.6); right: calc(var(--u) * 0.6); border-width: 0 2px 2px 0; }
.scr-slot--locked { height: calc(var(--u) * 7); justify-content: flex-end; color: var(--t3); }
.scr-slot__lock { display: flex; align-items: center; gap: calc(var(--u) * 0.8); font-size: calc(var(--u) * 2.4); }
.scr-slotrow { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 1); }
.scr-slot--small { min-height: calc(var(--u) * 8.4); }
.scr-slot--small small { font: 600 var(--fs-2xs) / 1.1 var(--cond); color: var(--t2); letter-spacing: 0.02em; }
.scr-slot__ico { font-size: calc(var(--u) * 3.2); color: var(--t1); }
.scr-slot.is-dim { opacity: 0.62; }
.scr-slot--perks { min-height: calc(var(--u) * 7.8); }
.scr-perks { display: flex; gap: calc(var(--u) * 1); }
.scr-perks i { width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2); display: grid; place-items: center; font-size: calc(var(--u) * 3.2); color: var(--t3); }
.scr-slot--op { min-height: calc(var(--u) * 9.6); padding-bottom: calc(var(--u) * 0.9); }
.scr-slot__pic { width: calc(var(--u) * 5.2); height: calc(var(--u) * 5.2); flex: none; clip-path: var(--clip); }
.scr-slot__opname { flex: 1; display: flex; flex-direction: column; gap: calc(var(--u) * 0.3); }
.scr-slot__opname b { font: 800 var(--fs-l) / 1 var(--cond); letter-spacing: 0.1em; }
.scr-slot__opname small { font: 600 var(--fs-2xs) / 1 var(--cond); color: var(--ally); letter-spacing: 0.1em; }
.scr-slot__chev { font-size: calc(var(--u) * 2.4); color: var(--t2); }

.scr-gunhead {
  position: absolute;
  top: calc(var(--gt) + var(--u) * 11.2 + var(--tabs-h));
  left: calc(var(--gl) + var(--u) * 56);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.8);
  pointer-events: none;
  z-index: 1;
}
.scr-gunhead__name { font: 800 max(26px, calc(var(--u) * 6.6)) / 0.9 var(--cond); letter-spacing: 0.02em; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }
.scr-gunhead__sub { display: flex; align-items: center; gap: calc(var(--u) * 1); font: 700 var(--fs-s) / 1 var(--cond); letter-spacing: 0.12em; color: var(--t2); }
.scr-gunhead__lvl { display: flex; align-items: center; gap: calc(var(--u) * 1); }
.scr-gunhead__lvl em { font: italic 700 var(--fs-s) / 1 var(--cond); color: var(--acc); }
.scr-gunhead__lvl .scr-xpbar { width: calc(var(--u) * 16); }

.scr-stats {
  position: absolute;
  right: var(--gr);
  top: calc(var(--gt) + var(--u) * 11.2 + var(--tabs-h));
  width: clamp(calc(var(--u) * 54), 30vw, calc(var(--u) * 64));
  padding: calc(var(--u) * 1.5) calc(var(--u) * 2) calc(var(--u) * 1.8);
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, rgba(16, 21, 27, 0.92), rgba(10, 14, 18, 0.92));
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: var(--clip);
  z-index: 2;
}
.scr-stats__title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: calc(var(--u) * 1);
  margin-bottom: calc(var(--u) * 0.6);
  border-bottom: 1px solid var(--line);
  font: 800 var(--fs-m) / 1 var(--cond);
  letter-spacing: 0.14em;
}
.scr-stats__title small { font: 700 var(--fs-xs) / 1 var(--cond); color: var(--t3); letter-spacing: 0.1em; }
.scr-stat {
  display: grid;
  grid-template-columns: minmax(calc(var(--u) * 15), max-content) 1fr calc(var(--u) * 4.4);
  align-items: center;
  gap: calc(var(--u) * 1.2);
  height: calc(var(--u) * 4.6);
}
.scr-stat__lbl { font: 700 var(--fs-xs) / 1 var(--cond); letter-spacing: 0.06em; color: var(--t2); white-space: nowrap; }
.scr-stat__bar {
  position: relative;
  height: max(4px, calc(var(--u) * 0.9));
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(0, 0, 0, 0.5) calc(10% - 1px) 10%),
    rgba(255, 255, 255, 0.15);
}
.scr-stat__bar i {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #cfd5da, #f4f6f8);
  transform-origin: 0 50%;
  transform: scaleX(var(--v));
  animation: scr-grow 0.6s ease-out both;
  animation-delay: calc(var(--i) * 60ms + 0.1s);
}
@keyframes scr-grow { from { transform: scaleX(0); } }
.scr-stat__val { font: 700 var(--fs-l) / 1 var(--cond); text-align: right; font-variant-numeric: tabular-nums; }
.scr-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 0.9) calc(var(--u) * 1.6);
  margin-top: calc(var(--u) * 1.4);
  padding-top: calc(var(--u) * 1.2);
  border-top: 1px solid var(--line);
}
.scr-specs dt { font: 600 var(--fs-2xs) / 1 var(--cond); letter-spacing: 0.1em; color: var(--t3); text-transform: uppercase; }
.scr-specs dd { margin-top: calc(var(--u) * 0.3); font: 600 var(--fs-s) / 1.1 var(--body); color: var(--t1); }

.scr-attach {
  position: absolute;
  left: calc(var(--gl) + var(--u) * 56);
  bottom: var(--gb);
  display: flex;
  gap: calc(var(--u) * 1);
  z-index: 2;
}
.scr-att {
  position: relative;
  width: max(calc(var(--u) * 11), 48px);
  height: max(calc(var(--u) * 11), 44px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 0.6);
  text-align: center;
  background: rgba(12, 16, 20, 0.88);
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: var(--clip);
}
.scr-att__ico { font-size: calc(var(--u) * 3); color: var(--t2); display: grid; }
.scr-att__cap { font: 700 var(--fs-2xs) / 1 var(--cond); letter-spacing: 0.08em; color: var(--t2); }
.scr-att__name { font: 700 var(--fs-2xs) / 1 var(--cond); color: var(--acc); }
.scr-att__lock { position: absolute; top: calc(var(--u) * 0.8); right: calc(var(--u) * 0.8); font-size: calc(var(--u) * 1.8); color: var(--t3); }
.scr-att.is-locked .scr-att__ico { color: var(--t3); }
.scr-att.is-on { box-shadow: inset 0 calc(var(--u) * -0.4) 0 var(--acc), inset 0 0 0 1px rgba(255, 194, 26, 0.4); }
.scr-att.is-on .scr-att__ico { color: var(--t1); }

.scr-foot {
  position: absolute;
  right: var(--gr);
  bottom: var(--gb);
  display: flex;
  gap: calc(var(--u) * 1.2);
  z-index: 2;
}
.scr-loadout .scr-drag-hint--gun { left: 47%; bottom: calc(var(--gb) + var(--u) * 13); }

/* --- Équipement réel (primaire, secondaire, mêlée, grenade) -------------------------------- */
.scr-eqrows {
  position: absolute;
  left: var(--gl);
  top: calc(var(--gt) + var(--u) * 11.2 + var(--tabs-h));
  width: calc(var(--u) * 52);
  bottom: calc(var(--gb) + var(--u) * 9);
  overflow-y: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
  z-index: 2;
}
.scr-eqrow__lbl { font: 700 var(--fs-2xs) / 1 var(--cond); letter-spacing: 0.14em; color: var(--t2); margin-bottom: calc(var(--u) * 0.8); }
.scr-eqchips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 0.9); }
.scr-eqchip {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.3);
  min-width: calc(var(--u) * 12);
  padding: calc(var(--u) * 1) calc(var(--u) * 1.6);
  text-align: left;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, rgba(20, 26, 33, 0.9), rgba(11, 15, 19, 0.9));
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: var(--clip);
}
.scr-eqchip b { font: 800 var(--fs-s) / 1 var(--cond); letter-spacing: 0.03em; }
.scr-eqchip small { font: 700 var(--fs-2xs) / 1 var(--cond); color: var(--t2); letter-spacing: 0.08em; }
.scr-eqchip.is-on {
  background:
    radial-gradient(120% 140% at 20% 0%, rgba(255, 194, 26, 0.14), rgba(255, 194, 26, 0) 70%),
    linear-gradient(180deg, rgba(24, 30, 38, 0.95), rgba(12, 16, 20, 0.95));
  box-shadow: inset max(2px, calc(var(--u) * 0.4)) 0 0 var(--acc), inset 0 0 0 1px rgba(255, 194, 26, 0.35);
}
.scr-eqchip.is-on b { color: var(--acc); }
.scr-eqchip__check { position: absolute; top: calc(var(--u) * 0.8); right: calc(var(--u) * 0.8); width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); color: var(--acc); }
.scr-eqstats { position: static; }
.scr-eqscreen .scr-gunhead { top: calc(var(--gt) + var(--u) * 11.2 + var(--tabs-h)); }
.scr-eqscreen .scr-stats { top: calc(var(--gt) + var(--u) * 15.2 + var(--tabs-h)); }

/* --- Opérateurs --------------------------------------------------------------------------- */
.scr-menu-shade--op {
  background:
    linear-gradient(180deg, rgba(7, 9, 12, 0.88) 0, rgba(7, 9, 12, 0) 22%),
    linear-gradient(90deg, rgba(7, 9, 12, 0.85) 0, rgba(7, 9, 12, 0.4) 24%, rgba(7, 9, 12, 0) 36%),
    linear-gradient(270deg, rgba(7, 9, 12, 0.85) 0, rgba(7, 9, 12, 0.4) 26%, rgba(7, 9, 12, 0) 38%),
    linear-gradient(0deg, rgba(7, 9, 12, 0.6) 0, rgba(7, 9, 12, 0) 24%);
}
.scr-opgrid {
  position: absolute;
  left: var(--gl);
  top: calc(var(--gt) + var(--u) * 11.2 + var(--tabs-h));
  display: grid;
  grid-template-columns: repeat(2, calc(var(--u) * 14));
  grid-auto-rows: calc(var(--u) * 18);
  gap: calc(var(--u) * 1);
  z-index: 2;
}
.scr-opcard {
  position: relative;
  overflow: hidden;
  background: #151b22;
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: var(--clip);
}
.scr-opcard__pic { position: absolute; inset: 0; }
.scr-opcard::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(7, 9, 12, 0.92) 0, rgba(7, 9, 12, 0) 45%);
  pointer-events: none;
}
.scr-opcard__name {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: calc(var(--u) * 1.4);
  text-align: center;
  font: 800 var(--fs-s) / 1 var(--cond);
  letter-spacing: 0.1em;
}
.scr-opcard__rar { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: max(3px, calc(var(--u) * 0.6)); }
.scr-rar--common { background: #a3abb4; }
.scr-rar--rare { background: #3a8dff; }
.scr-rar--epic { background: #a35cff; }
.scr-rar--legend { background: linear-gradient(90deg, #ffb020, #ff9500); }
.scr-opcard.is-locked .scr-opcard__pic { filter: grayscale(1) brightness(0.28) contrast(1.2); }
.scr-opcard__lock { position: absolute; z-index: 1; left: 50%; top: 42%; font-size: calc(var(--u) * 3); color: rgba(255, 255, 255, 0.55); transform: translate(-50%, -50%); }
.scr-opcard.is-locked .scr-opcard__name { color: var(--t3); }
.scr-opcard.is-on { box-shadow: inset 0 0 0 max(2px, calc(var(--u) * 0.35)) var(--acc); }
.scr-opcard__tag {
  position: absolute;
  z-index: 1;
  top: calc(var(--u) * 0.6);
  right: calc(var(--u) * 0.6);
  width: calc(var(--u) * 2.8);
  height: calc(var(--u) * 2.8);
  display: grid;
  place-items: center;
  font-size: calc(var(--u) * 1.8);
  color: var(--on-acc);
  background: var(--acc);
}
.scr-opinfo {
  position: absolute;
  right: var(--gr);
  top: calc(var(--gt) + var(--u) * 11.2 + var(--tabs-h));
  width: clamp(calc(var(--u) * 50), 27vw, calc(var(--u) * 60));
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.2);
  z-index: 2;
}
.scr-opinfo__fac { display: flex; align-items: center; gap: calc(var(--u) * 0.8); font: 700 var(--fs-s) / 1 var(--cond); letter-spacing: 0.16em; color: var(--ally); }
.scr-opinfo__fac .scr-emb { font-size: calc(var(--u) * 2.8); }
.scr-opinfo__name { font: 800 max(28px, calc(var(--u) * 7)) / 0.9 var(--cond); letter-spacing: 0.06em; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }
.scr-opinfo__tags { display: flex; gap: calc(var(--u) * 0.8); flex-wrap: wrap; }
.scr-opinfo__bio {
  font: 500 var(--fs-s) / 1.35 var(--body);
  color: var(--t2);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.scr-specs--op { grid-template-columns: 1fr; margin-top: 0; }
.scr-specs--op div { display: flex; justify-content: space-between; gap: calc(var(--u) * 2); }
.scr-specs--op dd { margin: 0; text-align: right; }

/* --- Sélection du mode -------------------------------------------------------------------- */
.scr-modes, .scr-settings {
  background:
    radial-gradient(90% 70% at 70% 0%, rgba(255, 194, 26, 0.06), rgba(255, 194, 26, 0) 60%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.015) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #0e1217, #07090c);
}
.scr-htabs { display: flex; gap: calc(var(--u) * 2.4); margin-left: calc(var(--u) * 3); align-self: stretch; }
.scr-htabs button {
  position: relative;
  font: 700 var(--fs-l) / 1 var(--cond);
  letter-spacing: 0.1em;
  color: var(--t3);
}
.scr-htabs .is-on { color: var(--acc); }
.scr-htabs .is-on::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--u) * 0.6);
  height: max(2px, calc(var(--u) * 0.4));
  background: var(--acc);
}
.scr-cats {
  position: absolute;
  left: var(--gl);
  top: calc(var(--gt) + var(--u) * 10.5);
  width: max(calc(var(--u) * 30), 132px);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.9);
}
.scr-cats button {
  height: max(calc(var(--u) * 6), 28px);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1);
  padding: 0 calc(var(--u) * 1.6);
  font: 700 var(--fs-m) / 1 var(--cond);
  letter-spacing: 0.06em;
  color: var(--t3);
  background: rgba(255, 255, 255, 0.03);
  clip-path: var(--clip);
  white-space: nowrap;
}
.scr-cats .is-on {
  color: var(--acc);
  background: rgba(255, 194, 26, 0.09);
  box-shadow: inset max(2px, calc(var(--u) * 0.4)) 0 0 var(--acc);
}
.scr-modegrid, .scr-mapgrid {
  position: absolute;
  left: calc(var(--gl) + max(calc(var(--u) * 33), 142px));
  right: var(--gr);
  top: calc(var(--gt) + var(--u) * 10.5);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--u) * 1.3);
  max-height: calc(100% - var(--gt) - var(--gb) - var(--u) * 27);
}
.scr-mcard, .scr-mapcard {
  position: relative;
  aspect-ratio: 16 / 8.6;
  overflow: hidden;
  background: #151b22;
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: var(--clip);
}
.scr-mcard__img, .scr-mapcard__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 55% 45%;
}
.scr-mcard::after, .scr-mapcard::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(7, 9, 12, 0.95) 0, rgba(7, 9, 12, 0.2) 45%, rgba(7, 9, 12, 0) 70%);
  pointer-events: none;
}
.scr-mcard.is-locked .scr-mcard__img { filter: grayscale(1) brightness(0.22) contrast(1.15); }
.scr-mcard:nth-child(2) .scr-mcard__img { background-position: 10% 30%; }
.scr-mcard:nth-child(3) .scr-mcard__img { background-position: 90% 60%; }
.scr-mcard:nth-child(4) .scr-mcard__img { background-position: 30% 80%; }
.scr-mcard:nth-child(5) .scr-mcard__img { background-position: 75% 20%; }
.scr-mcard:nth-child(6) .scr-mcard__img { background-position: 0% 60%; }
.scr-mcard__big { position: absolute; z-index: 1; left: 50%; top: 44%; font-size: calc(var(--u) * 9); color: rgba(255, 255, 255, 0.16); transform: translate(-50%, -50%); }
.scr-mcard.is-on { box-shadow: inset 0 0 0 max(2px, calc(var(--u) * 0.35)) var(--acc); }
.scr-mcard__ico {
  position: absolute;
  z-index: 1;
  left: calc(var(--u) * 1);
  top: calc(var(--u) * 1);
  width: calc(var(--u) * 4.4);
  height: calc(var(--u) * 4.4);
  display: grid;
  place-items: center;
  font-size: calc(var(--u) * 2.6);
  background: rgba(7, 9, 12, 0.72);
  clip-path: var(--clip);
}
.scr-mcard.is-on .scr-mcard__ico { color: var(--acc); }
.scr-mcard__name, .scr-mapcard__name {
  position: absolute;
  z-index: 1;
  left: calc(var(--u) * 1.2);
  right: calc(var(--u) * 1.2);
  bottom: calc(var(--u) * 1.1);
  font: 800 var(--fs-m) / 1.05 var(--cond);
  letter-spacing: 0.04em;
}
.scr-mcard.is-locked .scr-mcard__name { color: var(--t2); }
.scr-mcard__check {
  position: absolute;
  z-index: 1;
  right: calc(var(--u) * 1);
  top: calc(var(--u) * 1);
  width: calc(var(--u) * 3.6);
  height: calc(var(--u) * 3.6);
  display: grid;
  place-items: center;
  font-size: calc(var(--u) * 2.2);
  color: var(--on-acc);
  background: var(--acc);
  border-radius: 50%;
}
.scr-mcard__lock {
  position: absolute;
  z-index: 1;
  right: calc(var(--u) * 1);
  top: calc(var(--u) * 1);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.6);
  padding: calc(var(--u) * 0.5) calc(var(--u) * 0.8);
  font-size: calc(var(--u) * 1.8);
  color: var(--t2);
  background: rgba(7, 9, 12, 0.75);
}
.scr-mcard__lock .scr-soon { background: none; padding: 0; }
/* Choix de carte : autant de vignettes que de cartes au registre (src/maps/index.js), --cols posé par
   screens-menus.js (2 pour 1 ou 2 cartes, puis une seule rangée jusqu'à 4, au-delà 4 par rangée). */
.scr-mapgrid { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); align-items: start; overflow-y: auto; }
.scr-mapcard { aspect-ratio: 16 / 9.4; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.scr-mapgrid.is-dense .scr-mapcard { aspect-ratio: 4 / 3; }
/* Cadre de sélection peint au-dessus de la vignette (l'ombre interne de la carte passe sous l'image) */
.scr-mapcard::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--line);
}
.scr-mapcard.is-on::before { box-shadow: inset 0 0 0 max(2px, calc(var(--u) * 0.4)) var(--acc); }
.scr-mapcard .scr-mapcard__img { transition: filter 0.2s ease, transform 0.35s ease; background-color: #1c232b; }
.scr-mapcard:not(.is-on) .scr-mapcard__img { filter: brightness(0.62) saturate(0.8); }
.scr-mapcard.is-on .scr-mapcard__img { transform: scale(1.04); }
.scr-mapcard:not(:disabled):active .scr-mapcard__img { filter: brightness(1.05); }
@media (hover: hover) {
  .scr-mapcard:not(.is-on):not(:disabled):hover .scr-mapcard__img { filter: brightness(0.9); }
}
.scr-mapcard.is-on .scr-mapcard__name { color: var(--acc); }
.scr-mapcard .scr-mcard__check, .scr-mapcard .scr-mcard__lock { z-index: 3; }
.scr-mapcard.is-locked { opacity: 0.45; filter: grayscale(0.6); }
.scr-mapcard:disabled { cursor: default; }
.scr-mapcard__name { bottom: calc(var(--u) * 3.6); font-size: max(16px, calc(var(--u) * 4)); letter-spacing: 0.08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr-mapcard__sub { position: absolute; z-index: 1; left: calc(var(--u) * 1.2); right: calc(var(--u) * 1.2); bottom: calc(var(--u) * 1.2); font: 600 var(--fs-xs) / 1.15 var(--body); color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr-mapgrid.is-dense .scr-mapcard__name { font-size: max(14px, calc(var(--u) * 3)); }
.scr-mapnote { display: flex; align-items: center; gap: calc(var(--u) * 1); font: 500 var(--fs-s) / 1.3 var(--body); color: var(--t3); }
.scr-modedesc {
  position: absolute;
  left: calc(var(--gl) + max(calc(var(--u) * 33), 142px));
  right: calc(var(--gr) + var(--u) * 46);
  bottom: var(--gb);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.8);
  padding: calc(var(--u) * 1.3) calc(var(--u) * 1.8);
  background: rgba(16, 21, 27, 0.8);
  box-shadow: inset max(2px, calc(var(--u) * 0.4)) 0 0 var(--acc);
}
.scr-modedesc__title { display: flex; align-items: center; gap: calc(var(--u) * 1); flex-wrap: wrap; font: 800 var(--fs-l) / 1 var(--cond); letter-spacing: 0.04em; }
.scr-modedesc__title > .scr-ico { color: var(--acc); }
.scr-modedesc p { font: 500 var(--fs-s) / 1.35 var(--body); color: var(--t2); }
.scr-modes .scr-foot .scr-btn { min-width: calc(var(--u) * 38); height: calc(var(--u) * 8.4); }

/* --- Paramètres ----------------------------------------------------------------------------- */
.scr-stabs {
  position: absolute;
  top: calc(var(--gt) + var(--u) * 9.4);
  left: var(--gl);
  right: var(--gr);
  display: flex;
  gap: calc(var(--u) * 0.6);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.scr-stabs button {
  position: relative;
  flex: none;
  height: max(calc(var(--u) * 5.2), 30px);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.8);
  padding: 0 calc(var(--u) * 2);
  font: 700 var(--fs-m) / 1 var(--cond);
  letter-spacing: 0.08em;
  color: var(--t3);
  white-space: nowrap;
}
.scr-stabs .is-on { color: var(--t1); background: linear-gradient(180deg, rgba(255, 194, 26, 0), rgba(255, 194, 26, 0.12)); }
.scr-stabs .is-on .scr-ico { color: var(--acc); }
.scr-stabs .is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: max(2px, calc(var(--u) * 0.4)); background: var(--acc); }
.scr-sbody {
  position: absolute;
  top: calc(var(--gt) + var(--u) * 11.2 + max(calc(var(--u) * 5.2), 30px));
  left: var(--gl);
  right: var(--gr);
  bottom: var(--gb);
  overflow-y: auto;
  padding: calc(var(--u) * 2) calc(var(--u) * 3);
  background: rgba(16, 21, 27, 0.75);
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: var(--clip);
  touch-action: pan-y;
  scrollbar-width: thin;
}
.scr-sub { font: 700 var(--fs-xs) / 1 var(--cond); letter-spacing: 0.18em; color: var(--t3); margin-bottom: calc(var(--u) * 0.8); }
.scr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 3);
  min-height: max(calc(var(--u) * 9), 46px);
  border-bottom: 1px solid var(--line);
}
.scr-row__lbl { display: flex; flex-direction: column; gap: calc(var(--u) * 0.5); min-width: 0; }
.scr-row__lbl b { font: 600 var(--fs-l) / 1.1 var(--body); }
.scr-row__lbl small { font: 500 var(--fs-xs) / 1.2 var(--body); color: var(--t3); }
.scr-slider { display: flex; align-items: center; gap: calc(var(--u) * 1); width: min(calc(var(--u) * 64), 56%); flex: none; }
.scr-slider__step {
  width: max(calc(var(--u) * 4.8), 30px);
  height: max(calc(var(--u) * 4.8), 30px);
  display: grid;
  place-items: center;
  flex: none;
  font-size: max(calc(var(--u) * 2), 12px);
  background: rgba(255, 255, 255, 0.08);
  clip-path: var(--clip);
}
.scr-slider__step:active { background: rgba(255, 194, 26, 0.3); }
.scr-slider__track { position: relative; flex: 1; min-width: 60px; height: max(calc(var(--u) * 4.8), 30px); }
.scr-slider__track::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: max(3px, calc(var(--u) * 0.6));
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-50%);
}
.scr-slider__fill {
  position: absolute;
  left: 0;
  top: 50%;
  width: calc(var(--p, 0.5) * 100%);
  height: max(3px, calc(var(--u) * 0.6));
  background: var(--acc);
  transform: translateY(-50%);
  pointer-events: none;
}
.scr-slider__knob {
  position: absolute;
  left: calc(var(--p, 0.5) * 100%);
  top: 50%;
  width: max(calc(var(--u) * 3), 16px);
  height: max(calc(var(--u) * 3), 16px);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 max(2px, calc(var(--u) * 0.4)) rgba(255, 194, 26, 0.35), 0 1px 4px rgba(0, 0, 0, 0.6);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.scr-slider__track input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  touch-action: none;
}
.scr-slider__val {
  width: max(calc(var(--u) * 8), 40px);
  height: max(calc(var(--u) * 4.4), 26px);
  display: grid;
  place-items: center;
  flex: none;
  font: 700 var(--fs-m) / 1 var(--cond);
  font-variant-numeric: tabular-nums;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 0 1px var(--line);
}
.scr-segs { display: flex; flex: none; gap: 2px; }
.scr-segs button {
  height: max(calc(var(--u) * 4.8), 30px);
  min-width: calc(var(--u) * 12);
  padding: 0 calc(var(--u) * 1.6);
  font: 700 var(--fs-s) / 1 var(--cond);
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--t2);
  background: rgba(255, 255, 255, 0.07);
}
.scr-segs button:first-child { clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut)); }
.scr-segs button:last-child { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }
.scr-segs .is-on { color: var(--on-acc); background: linear-gradient(180deg, var(--acc-hi), var(--acc-lo)); }
.scr-segs--4 button { min-width: calc(var(--u) * 10); }
.scr-note { margin-top: calc(var(--u) * 1.2); font: 500 var(--fs-xs) / 1.35 var(--body); color: var(--t3); }
.scr-note b { color: var(--t2); }
.scr-note.is-bad { color: #ff5a4f; }
.scr-namebox { display: flex; align-items: center; gap: calc(var(--u) * 1); flex: none; }
.scr-namebox__pic { width: calc(var(--u) * 5); height: calc(var(--u) * 5); clip-path: var(--clip); }
.scr-namebox__pic .scr-pic { width: 100%; height: 100%; }
.scr-input {
  width: max(calc(var(--u) * 32), 120px);
  height: max(calc(var(--u) * 5), 30px);
  padding: 0 calc(var(--u) * 1.4);
  font: 600 var(--fs-l) / 1 var(--body);
  color: var(--t1);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0;
  outline: none;
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
}
.scr-input:focus { border-color: var(--acc); }
.scr-profilestats { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 1); margin-top: calc(var(--u) * 2); }
.scr-profilestats div { padding: calc(var(--u) * 1.2); background: rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; gap: calc(var(--u) * 0.6); }
.scr-profilestats small { font: 700 var(--fs-2xs) / 1 var(--cond); letter-spacing: 0.14em; color: var(--t3); }
.scr-profilestats b { font: 800 var(--fs-l) / 1 var(--cond); font-variant-numeric: tabular-nums; }

/* --- Démarrage ------------------------------------------------------------------------------ */
.scr-boot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1.6);
  background: radial-gradient(120% 90% at 50% 110%, rgba(255, 194, 26, 0.1), transparent 60%), linear-gradient(180deg, #10151c, #07090c);
}
.scr-boot__brand { font: italic 800 calc(var(--u) * 14) / 1 var(--cond); letter-spacing: 0.08em; }
.scr-boot__line { width: calc(var(--u) * 30); height: calc(var(--u) * 0.4); background: var(--acc); }
.scr-boot__sub { font: 600 var(--fs-m) / 1 var(--cond); letter-spacing: 0.4em; color: var(--acc); }
.scr-boot__bar { position: absolute; left: var(--gl); bottom: var(--gb); width: calc(var(--u) * 60); height: calc(var(--u) * 0.6); background: rgba(255, 255, 255, 0.12); }
.scr-boot__bar i { display: block; height: 100%; background: var(--acc); transform-origin: 0 50%; transform: scaleX(0); transition: transform 0.2s linear; }
.scr-boot__ver { position: absolute; right: var(--gr); bottom: var(--gb); font: 600 var(--fs-xs) / 1 var(--cond); color: var(--t3); }

/* --- Chargement ----------------------------------------------------------------------------- */
.scr-loading { background: #07090c; }
.scr-loading__art {
  position: absolute;
  inset: -3%;
  background: #1b2027 center 45% / cover no-repeat;
  animation: scr-kenburns 14s ease-out both;
}
@keyframes scr-kenburns { from { transform: scale(1.09) translateX(1%); } to { transform: scale(1.0) translateX(0); } }
.scr-loading__shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(46% 42% at 50% 55%, rgba(7, 9, 12, 0.62), rgba(7, 9, 12, 0) 100%),
    linear-gradient(180deg, rgba(7, 9, 12, 0.75) 0, rgba(7, 9, 12, 0.15) 26%, rgba(7, 9, 12, 0.4) 52%, rgba(7, 9, 12, 0.94) 100%),
    radial-gradient(120% 100% at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.55) 100%);
}
.scr-loading__head {
  position: absolute;
  top: calc(var(--gt) + var(--u) * 2);
  left: var(--gl);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.8);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}
.scr-loading__mode { display: flex; align-items: center; gap: calc(var(--u) * 0.8); font: 800 var(--fs-l) / 1 var(--cond); letter-spacing: 0.1em; color: var(--acc); }
.scr-loading__map { font: 800 max(30px, calc(var(--u) * 8.5)) / 0.9 var(--cond); letter-spacing: 0.05em; }
.scr-loading__obj { display: flex; align-items: center; gap: calc(var(--u) * 0.8); font: 600 var(--fs-m) / 1 var(--body); color: var(--t2); }
.scr-vs {
  position: absolute;
  left: 50%;
  top: calc(var(--gt) + var(--u) * 27);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2.6);
  transform: translateX(-50%);
}
.scr-team { width: calc(var(--u) * 46); }
.scr-team__head {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1);
  margin-bottom: calc(var(--u) * 1);
  font: 800 var(--fs-l) / 1 var(--cond);
  letter-spacing: 0.16em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.9);
}
.scr-team__head .scr-emb { font-size: calc(var(--u) * 3.2); }
.scr-team--a .scr-team__head { color: var(--ally); }
.scr-team--b .scr-team__head { color: var(--enemy); justify-content: flex-end; }
.scr-team__list { display: flex; flex-direction: column; gap: calc(var(--u) * 0.9); }
.scr-pcard {
  position: relative;
  height: calc(var(--u) * 6.6);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.2);
  padding: 0 calc(var(--u) * 1.4) 0 calc(var(--u) * 0.7);
  background: linear-gradient(90deg, rgba(28, 107, 208, 0.62), rgba(12, 22, 36, 0.78));
  box-shadow: inset max(2px, calc(var(--u) * 0.45)) 0 0 var(--ally);
  clip-path: var(--clip);
  animation: scr-slide-l 0.35s ease-out both;
}
.scr-team--b .scr-pcard {
  flex-direction: row-reverse;
  padding: 0 calc(var(--u) * 0.7) 0 calc(var(--u) * 1.4);
  background: linear-gradient(270deg, rgba(192, 35, 43, 0.62), rgba(34, 12, 14, 0.78));
  box-shadow: inset calc(max(2px, calc(var(--u) * 0.45)) * -1) 0 0 var(--enemy);
  animation-name: scr-slide-r;
}
.scr-pcard:nth-child(2) { animation-delay: 0.05s; }
.scr-pcard:nth-child(3) { animation-delay: 0.1s; }
.scr-pcard:nth-child(4) { animation-delay: 0.15s; }
.scr-pcard:nth-child(5) { animation-delay: 0.2s; }
@keyframes scr-slide-l { from { opacity: 0; transform: translateX(calc(var(--u) * -4)); } }
@keyframes scr-slide-r { from { opacity: 0; transform: translateX(calc(var(--u) * 4)); } }
.scr-pcard__pic { width: calc(var(--u) * 5.2); height: calc(var(--u) * 5.2); flex: none; clip-path: var(--clip); }
.scr-pcard__pic .scr-pic { width: 100%; height: 100%; }
.scr-pcard__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 0.4); }
.scr-team--b .scr-pcard__txt { align-items: flex-end; }
.scr-pcard__txt b { font: 700 var(--fs-l) / 1 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.scr-pcard__txt small { font: 700 var(--fs-2xs) / 1 var(--cond); letter-spacing: 0.08em; color: var(--t2); }
.scr-pcard__pct { font: 700 var(--fs-m) / 1 var(--cond); font-variant-numeric: tabular-nums; color: var(--t2); min-width: 3.4em; text-align: right; }
.scr-team--b .scr-pcard__pct { text-align: left; }
.scr-pcard.is-ready .scr-pcard__pct { color: var(--good); }
.scr-pcard.is-wait .scr-pcard__txt b { color: var(--t3); font-weight: 600; animation: scr-dot 1.4s infinite; }
.scr-pcard.is-wait .scr-pcard__pic { opacity: 0.35; }
.scr-pcard.is-me { background: linear-gradient(90deg, rgba(40, 125, 230, 0.85), rgba(18, 40, 70, 0.85)); }
.scr-pcard.is-me .scr-pcard__txt b { color: var(--self); }
.scr-vs__mid span {
  display: block;
  font: italic 800 max(26px, calc(var(--u) * 7)) / 1 var(--cond);
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.8);
  margin-top: calc(var(--u) * 4);
}
.scr-loading__foot {
  position: absolute;
  left: 50%;
  bottom: var(--gb);
  width: min(calc(var(--u) * 108), 84%);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1);
}
.scr-tip { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1); font: 500 var(--fs-s) / 1.3 var(--body); color: var(--t2); text-align: center; }
.scr-tip b { flex: none; padding: calc(var(--u) * 0.3) calc(var(--u) * 0.8); font: 800 var(--fs-2xs) / 1 var(--cond); letter-spacing: 0.14em; color: var(--on-acc); background: var(--acc); }
.scr-loading__bar { height: max(3px, calc(var(--u) * 0.6)); background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.scr-loading__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--acc-lo), var(--acc-hi)); transform-origin: 0 50%; transform: scaleX(0); }
.scr-loading__pct { display: flex; justify-content: space-between; font: 700 var(--fs-xs) / 1 var(--cond); letter-spacing: 0.14em; color: var(--t3); }
.scr-loading__pct b { color: var(--t1); font-variant-numeric: tabular-nums; }

/* --- Fin de partie -------------------------------------------------------------------------- */
.scr-results { background: rgba(7, 9, 12, 0.5); }
.scr-res__bg {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.015) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(10, 13, 17, 0.9), rgba(7, 9, 12, 0.96));
  opacity: 0;
  transition: opacity 0.4s;
}
.scr-results.is-win .scr-res__bg { background-color: transparent; box-shadow: inset 0 calc(var(--u) * 30) calc(var(--u) * 40) calc(var(--u) * -30) rgba(255, 194, 26, 0.16); }
.scr-results.is-loss .scr-res__bg { box-shadow: inset 0 calc(var(--u) * 30) calc(var(--u) * 40) calc(var(--u) * -30) rgba(255, 65, 54, 0.16); }
.scr-results.is-board .scr-res__bg { opacity: 1; }
.scr-banner {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 9, 12, 0.45);
  transition: opacity 0.35s, visibility 0.35s;
}
.scr-results.is-board .scr-banner { opacity: 0; visibility: hidden; pointer-events: none; }
.scr-banner__band {
  position: relative;
  width: 100%;
  padding: calc(var(--u) * 3) 0 calc(var(--u) * 3.4);
  text-align: center;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.74) 24%, rgba(0, 0, 0, 0.74) 76%, rgba(0, 0, 0, 0));
}
.scr-banner__word {
  font: 800 max(56px, calc(var(--u) * 16)) / 0.9 var(--cond);
  letter-spacing: 0.1em;
  padding-left: 0.1em;
  color: #fff;
  animation: scr-banner 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.scr-results.is-win .scr-banner__word { color: var(--acc); text-shadow: 0 0 calc(var(--u) * 3) rgba(255, 194, 26, 0.35); }
.scr-results.is-loss .scr-banner__word { color: var(--enemy); text-shadow: 0 0 calc(var(--u) * 3) rgba(255, 65, 54, 0.3); }
@keyframes scr-banner { from { opacity: 0; transform: scale(1.3); filter: blur(8px); } }
.scr-banner__score {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: calc(var(--u) * 1.6);
  margin-top: calc(var(--u) * 1.4);
  font: 800 max(20px, calc(var(--u) * 4.6)) / 1 var(--cond);
  font-variant-numeric: tabular-nums;
  animation: scr-fade 0.4s 0.25s both;
}
.scr-banner__score i { font-style: normal; color: var(--t3); }
.scr-banner__reason { margin-top: calc(var(--u) * 0.8); font: 700 var(--fs-s) / 1 var(--cond); letter-spacing: 0.2em; color: var(--t2); animation: scr-fade 0.4s 0.35s both; }
@keyframes scr-fade { from { opacity: 0; } }
.is-a { color: var(--ally); }
.is-b { color: var(--enemy); }
.scr-banner__line {
  position: absolute;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 194, 26, 0), rgba(255, 194, 26, 0.9), rgba(255, 194, 26, 0));
  animation: scr-line 0.5s 0.1s ease-out both;
}
.scr-results.is-loss .scr-banner__line { background: linear-gradient(90deg, rgba(255, 65, 54, 0), rgba(255, 65, 54, 0.9), rgba(255, 65, 54, 0)); }
.scr-banner__line--t { top: 0; }
.scr-banner__line--b { bottom: 0; }
@keyframes scr-line { from { transform: scaleX(0); } }
.scr-banner__flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: scr-flash 0.3s ease-out; pointer-events: none; }
@keyframes scr-flash { 0% { opacity: 0.15; } 100% { opacity: 0; } }

.scr-res { position: absolute; inset: 0; opacity: 0; transform: translateY(calc(var(--u) * 2)); transition: opacity 0.4s 0.1s, transform 0.4s 0.1s; }
.scr-results.is-board .scr-res { opacity: 1; transform: none; }
.scr-res__head {
  position: absolute;
  top: var(--gt);
  left: var(--gl);
  right: var(--gr);
  height: calc(var(--u) * 9);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 3);
}
.scr-res__word { font: 800 max(26px, calc(var(--u) * 6.4)) / 1 var(--cond); letter-spacing: 0.08em; }
.scr-results.is-win .scr-res__word { color: var(--acc); }
.scr-results.is-loss .scr-res__word { color: var(--enemy); }
.scr-res__score { display: flex; align-items: center; gap: calc(var(--u) * 1.2); font: 800 max(20px, calc(var(--u) * 4.6)) / 1 var(--cond); font-variant-numeric: tabular-nums; }
.scr-res__score i { font-style: normal; color: var(--t3); }
.scr-res__team { display: flex; align-items: center; gap: calc(var(--u) * 0.6); font: 800 var(--fs-s) / 1 var(--cond); letter-spacing: 0.14em; }
.scr-res__team .scr-emb { font-size: calc(var(--u) * 2.8); }
.scr-res__meta { margin-left: auto; display: flex; gap: calc(var(--u) * 1.4); font: 700 var(--fs-xs) / 1 var(--cond); letter-spacing: 0.12em; color: var(--t2); white-space: nowrap; }
.scr-res__meta span + span::before { content: ''; display: inline-block; width: 4px; height: 4px; margin-right: calc(var(--u) * 1.4); vertical-align: middle; background: var(--t3); }
.scr-res__main {
  position: absolute;
  top: calc(var(--gt) + var(--u) * 10.5);
  left: var(--gl);
  right: var(--gr);
  bottom: calc(var(--gb) + var(--u) * 9.4);
  display: flex;
  gap: calc(var(--u) * 1.6);
}
.scr-res__boards {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  align-content: center;
  gap: calc(var(--u) * 1.3);
}
.scr-board {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: rgba(12, 16, 20, 0.9);
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: var(--clip);
}
.scr-board__head {
  flex: none;
  height: calc(var(--u) * 5.4);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.9);
  padding: 0 calc(var(--u) * 1.4);
  font: 800 var(--fs-m) / 1 var(--cond);
  letter-spacing: 0.14em;
}
.scr-board__head .scr-emb { font-size: calc(var(--u) * 2.8); color: #fff; }
.scr-board__head b { margin-left: auto; font-size: max(16px, calc(var(--u) * 3.4)); font-variant-numeric: tabular-nums; }
.scr-board--a .scr-board__head { background: linear-gradient(90deg, rgba(28, 107, 208, 0.9), rgba(28, 107, 208, 0.28)); }
.scr-board--b .scr-board__head { background: linear-gradient(90deg, rgba(192, 35, 43, 0.9), rgba(192, 35, 43, 0.28)); }
.scr-board__cols, .scr-brow {
  display: grid;
  grid-template-columns: max(12px, calc(var(--u) * 2.8)) minmax(0, 1fr) repeat(3, max(34px, calc(var(--u) * 5.6))) max(40px, calc(var(--u) * 7.4));
  align-items: center;
  gap: calc(var(--u) * 0.5);
  padding: 0 calc(var(--u) * 1.2);
}
.scr-board__cols { flex: none; height: calc(var(--u) * 3.2); font: 700 var(--fs-2xs) / 1 var(--cond); letter-spacing: 0.08em; color: var(--t3); }
.scr-board__cols span:nth-child(n + 3), .scr-brow > span:nth-child(n + 3) { text-align: center; }
.scr-board__cols span:last-child, .scr-brow > span:last-child { text-align: right; }
.scr-brow {
  position: relative;
  height: clamp(calc(var(--u) * 4.6), calc((100vh - var(--u) * 58) / 5), calc(var(--u) * 6.6));
  font: 600 var(--fs-s) / 1 var(--cond);
  font-variant-numeric: tabular-nums;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.scr-brow:nth-child(odd) { background: rgba(255, 255, 255, 0.025); }
.scr-brow__n { color: var(--t3); }
.scr-brow__who { display: flex; align-items: center; gap: calc(var(--u) * 0.8); min-width: 0; }
.scr-brow__who b { font: 600 var(--fs-s) / 1 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr-brow__pic { width: calc(var(--u) * 4); height: calc(var(--u) * 4); flex: none; }
.scr-brow__sc { font-weight: 800; }
.scr-brow.is-me { background: linear-gradient(90deg, rgba(255, 212, 59, 0.26), rgba(255, 212, 59, 0.06)); box-shadow: inset max(2px, calc(var(--u) * 0.4)) 0 0 var(--self); }
.scr-brow.is-me .scr-brow__who b { color: var(--self); }
.scr-mvptag {
  flex: none;
  padding: calc(var(--u) * 0.25) calc(var(--u) * 0.6);
  font: 800 var(--fs-2xs) / 1 var(--cond);
  font-style: normal;
  letter-spacing: 0.06em;
  color: var(--on-acc);
  background: var(--acc);
  clip-path: polygon(18% 0, 82% 0, 100% 50%, 82% 100%, 18% 100%, 0 50%);
}
.scr-mystats {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2.4);
  padding: calc(var(--u) * 1.1) calc(var(--u) * 1.6);
  background: rgba(0, 0, 0, 0.4);
  box-shadow: inset max(2px, calc(var(--u) * 0.4)) 0 0 var(--self);
}
.scr-mystats__cap { flex: none; font: 800 var(--fs-xs) / 1.1 var(--cond); letter-spacing: 0.14em; color: var(--self); width: max(70px, calc(var(--u) * 13)); }
.scr-mystats div { display: flex; flex-direction: column; gap: calc(var(--u) * 0.4); }
.scr-mystats small { font: 700 var(--fs-2xs) / 1 var(--cond); letter-spacing: 0.08em; color: var(--t3); white-space: nowrap; }
.scr-mystats b { font: 800 var(--fs-l) / 1 var(--cond); font-variant-numeric: tabular-nums; }
.scr-res__side {
  width: clamp(calc(var(--u) * 54), 29vw, calc(var(--u) * 66));
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--u) * 1.2);
}
.scr-mvp {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.5);
  min-height: calc(var(--u) * 15);
  padding: calc(var(--u) * 1.2);
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(255, 194, 26, 0.26), rgba(255, 194, 26, 0) 60%),
    rgba(12, 16, 20, 0.92);
  box-shadow: inset 0 0 0 1px rgba(255, 194, 26, 0.35);
  clip-path: var(--clip);
}
.scr-mvp__badge {
  position: absolute;
  z-index: 1;
  left: calc(var(--u) * 0.8);
  top: calc(var(--u) * 0.8);
  padding: calc(var(--u) * 0.5) calc(var(--u) * 1.2);
  font: 800 var(--fs-m) / 1 var(--cond);
  letter-spacing: 0.08em;
  color: var(--on-acc);
  background: var(--acc);
  clip-path: polygon(14% 0, 86% 0, 100% 50%, 86% 100%, 14% 100%, 0 50%);
}
.scr-mvp__pic { width: calc(var(--u) * 12.5); height: calc(var(--u) * 12.5); flex: none; clip-path: var(--clip); }
.scr-mvp__pic .scr-pic { width: 100%; height: 100%; }
.scr-mvp__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 0.6); }
.scr-mvp__txt b { font: 800 max(15px, calc(var(--u) * 3.2)) / 1 var(--cond); letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr-mvp__txt small { font: 700 var(--fs-2xs) / 1 var(--cond); letter-spacing: 0.1em; color: var(--t2); }
.scr-mvp__kda { font: 600 var(--fs-xs) / 1 var(--cond); letter-spacing: 0.06em; color: var(--t3); }
.scr-mvp__kda b { font-size: var(--fs-m); color: var(--t1); }
.scr-like {
  position: absolute;
  right: calc(var(--u) * 1);
  bottom: calc(var(--u) * 1);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.6);
  height: calc(var(--u) * 3.8);
  padding: 0 calc(var(--u) * 1.1);
  font: 700 var(--fs-2xs) / 1 var(--cond);
  letter-spacing: 0.08em;
  color: var(--t1);
  background: rgba(255, 255, 255, 0.1);
  clip-path: var(--clip);
}
.scr-like b { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.scr-like.is-on { color: var(--on-acc); background: var(--acc); }
.scr-rewards {
  padding: calc(var(--u) * 1.2) calc(var(--u) * 1.6);
  background: rgba(12, 16, 20, 0.9);
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: var(--clip);
}
.scr-rewards__title { font: 800 var(--fs-xs) / 1 var(--cond); letter-spacing: 0.18em; color: var(--t3); margin-bottom: calc(var(--u) * 0.6); }
.scr-rw { display: flex; justify-content: space-between; align-items: center; height: calc(var(--u) * 3.5); font: 500 var(--fs-s) / 1 var(--body); color: var(--t2); }
.scr-rw b { display: flex; align-items: center; gap: calc(var(--u) * 0.5); font: 800 var(--fs-m) / 1 var(--cond); color: var(--t1); font-variant-numeric: tabular-nums; }
.scr-rw--xp b { color: var(--acc); }
.scr-rw--cr .scr-ico { color: var(--acc); }
.scr-lvl { display: flex; align-items: center; gap: calc(var(--u) * 1); height: calc(var(--u) * 3.4); font: 700 var(--fs-2xs) / 1 var(--cond); letter-spacing: 0.06em; color: var(--t2); }
.scr-lvl b { color: var(--t1); }
.scr-lvl__bar { position: relative; flex: 1; height: max(4px, calc(var(--u) * 0.8)); background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.scr-lvl__bar i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--acc-lo), var(--acc-hi)); transform-origin: 0 50%; transform: scaleX(0); }
.scr-levelup {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.8);
  height: calc(var(--u) * 3.6);
  margin: calc(var(--u) * 0.4) 0;
  padding: 0 calc(var(--u) * 1.2);
  font: 800 var(--fs-s) / 1 var(--cond);
  letter-spacing: 0.1em;
  color: var(--on-acc);
  background: linear-gradient(90deg, var(--acc-hi), var(--acc-lo));
  animation: scr-pop 0.3s ease-out;
}
.scr-levelup b { margin-left: auto; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 0.3em; }
.scr-res__foot {
  position: absolute;
  left: var(--gl);
  right: var(--gr);
  bottom: var(--gb);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(var(--u) * 1.2);
}
.scr-res__hint { margin-right: auto; font: 600 var(--fs-xs) / 1 var(--cond); letter-spacing: 0.08em; color: var(--t3); }

/* --- Ajustements par format --------------------------------------------------------------- */
@media (max-aspect-ratio: 17/9) {
  .scr-sidebtn { width: calc(var(--u) * 28); }
  .scr-tile { width: calc(var(--u) * 19); }
  .scr-chat { width: calc(var(--u) * 59.2); }
  .scr-opname { left: 46%; }
  .scr-mystats { gap: calc(var(--u) * 1.6); }
}
@media (max-aspect-ratio: 3/2) {
  .scr-res__meta { display: none; }
  .scr-mystats__cap { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scr-play__shine, .scr-loading__art { animation: none; }
}
.scr-mm__salon .scr-btn--sm { height: max(calc(var(--u) * 3.8), 24px); padding: 0 calc(var(--u) * 1.4); font-size: var(--fs-xs); }