@font-face {
  font-family: "Chakra Petch";
  src: url("/assets/fonts/chakra-petch-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Chakra Petch";
  src: url("/assets/fonts/chakra-petch-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Chakra Petch";
  src: url("/assets/fonts/chakra-petch-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Jetons de l'univers DeadCircle : nuit profonde, neon cyan, vert de survie
   et l'echelle de rarete comme palette d'accent. */
:root {
  --dc-bg: #05080f;
  --dc-panel: rgba(8, 14, 24, 0.88);
  --dc-panel-soft: rgba(12, 22, 36, 0.62);
  --dc-line: rgba(88, 211, 255, 0.14);
  --dc-line-strong: rgba(88, 211, 255, 0.48);
  --dc-cyan: #58d3ff;
  --dc-blue: #58a6ff;
  --dc-green: #3fdc6a;
  --dc-mint: #7ee787;
  --dc-gold: #ffd36b;
  --dc-red: #ff4a4a;
  --dc-violet: #c65cff;
  --dc-ink: #eaf3ff;
  --dc-ink-dim: rgba(234, 243, 255, 0.64);
  --dc-ink-faint: rgba(234, 243, 255, 0.4);
  --dc-font-display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --dc-font-body: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --dc-ease-out: cubic-bezier(0.2, 0.9, 0.25, 1);
  color-scheme: dark;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--dc-bg);
  color: var(--dc-ink);
  font-family: var(--dc-font-body);
  -webkit-font-smoothing: antialiased;
}

body {
  height: 100vh;
}

::selection {
  background: rgba(88, 211, 255, 0.32);
}

button,
input {
  font: inherit;
}

:focus-visible {
  outline: 2px solid var(--dc-cyan);
  outline-offset: 2px;
}

kbd {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 1px solid rgba(234, 243, 255, 0.24);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: rgba(234, 243, 255, 0.06);
  color: var(--dc-ink);
  font: 600 11px/1 var(--dc-font-display);
}

#game {
  display: block;
  width: 100vw;
  height: 100vh;
  cursor: crosshair;
}

body.is-pointer-locked #game {
  cursor: none;
}

.menu-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(63, 220, 106, 0.12), transparent 55%),
    radial-gradient(circle at 18% 16%, rgba(88, 211, 255, 0.2), transparent 32%),
    linear-gradient(180deg, rgba(2, 6, 12, 0.62), rgba(3, 7, 13, 0.9)),
    url("/assets/images/ui/main_menu_background.png") center / cover no-repeat,
    var(--dc-bg);
  z-index: 20;
}

/* Anneau de balayage : le "cercle" de DeadCircle tourne en fond de chaque
   ecran de menu, tres lentement, sans jamais passer devant le contenu. */
.menu-screen::before,
.menu-screen::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  pointer-events: none;
}

.menu-screen::before {
  width: min(135vh, 1280px);
  aspect-ratio: 1;
  background:
    radial-gradient(circle, transparent 65.6%, rgba(88, 211, 255, 0.22) 65.8%, transparent 66.1%),
    repeating-conic-gradient(from 0deg, rgba(88, 211, 255, 0.26) 0deg 0.35deg, transparent 0.35deg 5deg);
  -webkit-mask: radial-gradient(circle, transparent 63.6%, #000 63.8%, #000 66.2%, transparent 66.4%);
  mask: radial-gradient(circle, transparent 63.6%, #000 63.8%, #000 66.2%, transparent 66.4%);
  transform: translate(-50%, -50%);
  animation: dc-spin 110s linear infinite;
}

.menu-screen::after {
  width: min(110vh, 1040px);
  aspect-ratio: 1;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(88, 211, 255, 0.22) 36deg, transparent 72deg);
  -webkit-mask: radial-gradient(circle, transparent 66%, #000 66.5%, #000 70%, transparent 70.5%);
  mask: radial-gradient(circle, transparent 66%, #000 66.5%, #000 70%, transparent 70.5%);
  transform: translate(-50%, -50%);
  animation: dc-spin 14s linear infinite;
  opacity: 0.8;
}

.menu-screen > * {
  position: relative;
  z-index: 1;
}

.menu-screen.hidden {
  display: none;
}

.levelup-screen {
  background:
    radial-gradient(circle at top, rgba(242, 204, 96, 0.18), transparent 38%),
    linear-gradient(180deg, rgba(13, 17, 23, 0.4), rgba(5, 8, 14, 0.55));
  pointer-events: none;
}

.menu-card {
  position: relative;
  box-sizing: border-box;
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 28px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(12, 22, 36, 0.94), rgba(6, 11, 20, 0.93));
  border: 1px solid var(--dc-line);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  scrollbar-color: rgba(88, 211, 255, 0.42) rgba(2, 8, 16, 0.45);
  scrollbar-width: thin;
  animation: dc-card-in 0.45s var(--dc-ease-out) both;
}

.menu-card::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(88, 211, 255, 0.7), rgba(63, 220, 106, 0.6), transparent);
  pointer-events: none;
}

.menu-card::-webkit-scrollbar,
.dex-grid::-webkit-scrollbar,
.weapon-dex-rarities::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

.menu-card::-webkit-scrollbar-track,
.dex-grid::-webkit-scrollbar-track,
.weapon-dex-rarities::-webkit-scrollbar-track {
  background: rgba(2, 8, 16, 0.45);
}

.menu-card::-webkit-scrollbar-thumb,
.dex-grid::-webkit-scrollbar-thumb,
.weapon-dex-rarities::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(88, 211, 255, 0.62), rgba(63, 185, 80, 0.34));
}

.menu-card h1 {
  margin: 0 0 8px;
  font-family: var(--dc-font-display);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.02;
}

.menu-card h2 {
  font-family: var(--dc-font-display);
}

.menu-card p {
  margin: 0 0 20px;
  color: var(--dc-ink-dim);
  line-height: 1.6;
}

.menu-hint {
  margin-top: -4px;
  font-size: 13px;
  color: rgba(121, 210, 255, 0.82);
}

.menu-eyebrow {
  margin-bottom: 10px;
  color: var(--dc-mint);
  font-family: var(--dc-font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.menu-card label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dc-ink-dim);
}

.menu-card input,
.menu-card button {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(240, 246, 252, 0.12);
  font: inherit;
}

.menu-card input {
  box-sizing: border-box;
  padding: 13px 15px;
  margin-bottom: 14px;
  background: rgba(2, 8, 16, 0.6);
  color: var(--dc-ink);
  font-size: 15px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.menu-card input::placeholder {
  color: var(--dc-ink-faint);
}

.menu-card input:focus {
  outline: none;
  border-color: var(--dc-line-strong);
  box-shadow: 0 0 0 3px rgba(88, 211, 255, 0.14), 0 0 22px rgba(88, 211, 255, 0.12);
}

/* Bouton principal : degrade cyan -> vert de l'univers, reflet qui balaie au
   survol. Les boutons secondaires restent sombres pour garder la hierarchie. */
.menu-card button {
  position: relative;
  overflow: hidden;
  padding: 13px 18px;
  background: linear-gradient(100deg, #58d3ff, #3fdc8a);
  border-color: rgba(190, 250, 255, 0.4);
  color: #04121c;
  font-family: var(--dc-font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, filter 0.18s ease;
}

.menu-card button:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 26px rgba(88, 211, 255, 0.24);
  filter: brightness(1.06);
}

.menu-card button:not(:disabled):active {
  transform: translateY(1px);
}

.menu-card button:disabled {
  opacity: 0.6;
  cursor: wait;
}

.end-run-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.secondary-menu-button {
  margin: 0 0 10px;
  background: rgba(88, 166, 255, 0.08) !important;
  border-color: rgba(88, 166, 255, 0.28) !important;
  color: #d9eeff !important;
  font-weight: 600 !important;
}

.menu-card button:hover,
.secondary-menu-button:hover {
  border-color: rgba(126, 249, 255, 0.6) !important;
  box-shadow: 0 0 18px rgba(88, 211, 255, 0.14);
}

.dex-card {
  width: min(1050px, calc(100vw - 32px));
}

.achievements-card {
  width: min(1180px, calc(100vw - 32px));
  border-color: rgba(188, 116, 255, 0.24);
  background:
    linear-gradient(180deg, rgba(11, 14, 26, 0.94), rgba(5, 8, 17, 0.94)),
    radial-gradient(circle at top right, rgba(188, 116, 255, 0.14), transparent 34%);
}

.options-card {
  width: min(520px, calc(100vw - 32px));
}

.options-section-title {
  margin: 18px 0 4px;
  color: #7ee787;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.audio-settings {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}

.audio-row {
  display: grid !important;
  grid-template-columns: 185px 1fr;
  align-items: center;
  gap: 14px;
  margin: 0 !important;
  padding: 10px 12px;
  border: 1px solid rgba(88, 211, 255, 0.16);
  border-radius: 8px;
  background: rgba(3, 11, 22, 0.58);
}

.audio-row input[type="range"] {
  margin: 0;
  padding: 0;
  accent-color: #58d3ff;
}

.audio-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.options-danger-zone {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 123, 114, 0.3);
}

.options-danger-zone > #quitRunButton {
  width: 100%;
  border-color: rgba(255, 123, 114, 0.7);
  color: #ffb0a7;
}

.options-confirm {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 123, 114, 0.5);
  background: rgba(64, 12, 18, 0.55);
  border-radius: 10px;
}

.options-confirm p {
  margin: 8px 0 14px;
  color: #f0c5c0;
  line-height: 1.4;
}

.secondary-menu-button.is-muted {
  border-color: rgba(255, 95, 95, 0.38) !important;
  color: #ffb7b7 !important;
}

.dex-progress {
  margin: 12px 0 18px;
  color: #7ec9ff;
  font-size: 14px;
}

.career-profile-panel {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid rgba(88, 211, 255, 0.16);
  border-radius: 8px;
  background: rgba(2, 8, 18, 0.66);
}

.career-profile-label {
  color: rgba(240, 246, 252, 0.62);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.career-profile-title {
  margin-top: 8px;
  color: #f5f9ff;
  font-size: 19px;
  font-weight: 800;
}

.profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.profile-badge,
.profile-badge-empty {
  min-height: 46px;
  padding: 7px 10px !important;
  border-radius: 8px !important;
  background: rgba(88, 166, 255, 0.08) !important;
  color: #d9eeff !important;
  border-color: rgba(88, 211, 255, 0.22) !important;
}

.profile-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto !important;
}

.profile-badge img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  user-select: none;
  -webkit-user-drag: none;
}

.profile-badge-empty {
  display: flex;
  align-items: center;
  color: rgba(240, 246, 252, 0.58) !important;
}

.achievement-tabs,
.dex-filter-bar {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.achievement-tabs {
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}

.achievement-tabs button,
.dex-filter-bar button {
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(88, 166, 255, 0.08);
  color: #cfe9ff;
  border-color: rgba(88, 211, 255, 0.16);
}

.achievement-tabs button.is-active,
.dex-filter-bar button.is-active {
  background: linear-gradient(135deg, rgba(88, 211, 255, 0.24), rgba(188, 116, 255, 0.22));
  border-color: rgba(88, 211, 255, 0.52);
  color: #ffffff;
  box-shadow: 0 0 18px rgba(88, 211, 255, 0.16), inset 0 0 0 1px rgba(240, 246, 252, 0.08);
}

.close-unlocks-panel {
  margin: 16px 0;
  padding: 14px;
  border: 1px solid rgba(188, 116, 255, 0.2);
  border-radius: 8px;
  background: rgba(17, 8, 31, 0.46);
}

.close-unlocks-list {
  display: grid;
  gap: 8px;
}

.close-unlock-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 14px;
  align-items: center;
  padding: 10px 12px !important;
  text-align: left;
  background: rgba(4, 12, 24, 0.62) !important;
  color: #f0f6fc !important;
  border-color: rgba(188, 116, 255, 0.2) !important;
}

.close-unlock-row i,
.achievement-progress,
.career-progress-bar {
  grid-column: 1 / -1;
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(240, 246, 252, 0.08);
}

.close-unlock-row small {
  grid-column: 1 / -1;
  color: rgba(240, 246, 252, 0.48);
  font-size: 12px;
  line-height: 1.3;
}

.close-unlock-row i b,
.achievement-progress span,
.career-progress-bar div {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #58d3ff, #bc74ff);
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  margin: 16px 0 18px;
}

.achievement-card {
  display: grid !important;
  grid-template-columns: 82px 1fr;
  gap: 14px;
  min-height: 150px;
  padding: 14px !important;
  text-align: left;
  background: rgba(8, 14, 26, 0.74) !important;
  color: #f0f6fc !important;
  border: 1px solid rgba(88, 211, 255, 0.14) !important;
  border-radius: 8px !important;
}

.achievement-card:hover {
  border-color: rgba(88, 211, 255, 0.42) !important;
  box-shadow: 0 0 24px rgba(88, 211, 255, 0.12);
}

.achievement-card img {
  width: 82px;
  height: 82px;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  align-self: start;
  user-select: none;
  -webkit-user-drag: none;
}

.achievement-unknown-badge {
  display: grid;
  width: 82px;
  height: 82px;
  place-items: center;
  align-self: start;
  border: 1px solid rgba(240, 246, 252, 0.08);
  clip-path: polygon(50% 0%, 92% 18%, 100% 58%, 72% 100%, 28% 100%, 0% 58%, 8% 18%);
  background: #010205;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 1), 0 0 8px rgba(0, 0, 0, 0.8);
  color: rgba(240, 246, 252, 0.35);
  font-size: 26px;
  font-weight: 900;
}

.achievement-detail-head .achievement-unknown-badge {
  width: 116px;
  height: 116px;
}

.achievement-completion-records {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 7px;
  margin-top: 14px;
}

.achievement-completion-records span {
  min-height: 30px;
  padding: 7px 9px;
  border: 1px solid rgba(88, 211, 255, 0.14);
  border-radius: 5px;
  background: rgba(7, 13, 25, 0.58);
  color: rgba(240, 246, 252, 0.68);
  font-size: 12px;
}

.achievement-completion-records span.is-unknown {
  color: rgba(240, 246, 252, 0.36);
  background: rgba(0, 0, 0, 0.5);
}

.achievement-card.is-locked img,
.achievement-detail-head img.is-locked,
.achievement-tier-node.is-locked img {
  filter: brightness(0.16) grayscale(1) contrast(1.45) drop-shadow(0 0 9px rgba(88, 211, 255, 0.16));
  opacity: 0.98;
  outline: 1px solid rgba(88, 211, 255, 0.12);
  border-radius: 999px;
}

.achievement-card-title {
  font-size: 18px;
  font-weight: 900;
}

.achievement-card-meta,
.achievement-progress-text {
  margin-top: 4px;
  color: #7ec9ff;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.achievement-card-desc {
  margin: 7px 0 9px;
  color: rgba(240, 246, 252, 0.68);
  font-size: 13px;
  line-height: 1.35;
}

.achievement-tier-markers {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.achievement-tier-markers span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 20px;
  border: 1px solid rgba(240, 246, 252, 0.12);
  border-radius: 5px;
  color: rgba(240, 246, 252, 0.48);
  font-size: 11px;
  font-weight: 900;
}

.achievement-tier-markers span.is-unlocked {
  color: #07111b;
  background: #58d3ff;
  border-color: #58d3ff;
}

.achievement-tier-markers span.is-next {
  color: #f0f6fc;
  border-color: rgba(188, 116, 255, 0.65);
}

/* --- Accomplissements : emblemes, progression, cascade (renderAchievementCard) --- */
.achievement-card {
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  animation: ach-card-in 460ms cubic-bezier(0.2, 0.9, 0.25, 1) calc(var(--i, 0) * 40ms) both;
}

.achievement-card:hover {
  transform: translateY(-2px);
}

.achievement-emblem {
  position: relative;
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  align-self: start;
}

.achievement-card.is-unlocked .achievement-emblem::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tier-color) 45%, transparent), transparent);
  filter: blur(6px);
  animation: dc-breathe 3.4s ease-in-out infinite;
}

.achievement-card.is-unlocked .achievement-emblem img {
  position: relative;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--tier-color) 55%, transparent));
}

/* Verrouille : silhouette acier lisible (la forme du badge donne envie). */
.achievement-card.is-locked .achievement-emblem img {
  filter: grayscale(1) brightness(0.42) contrast(1.15) drop-shadow(0 0 8px rgba(88, 211, 255, 0.18));
  outline: 0;
  opacity: 1;
}

.achievement-lock {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 26px;
  height: 26px;
  padding: 5px;
  border: 1px solid rgba(88, 211, 255, 0.4);
  border-radius: 50%;
  background: rgba(5, 10, 20, 0.92);
  fill: none;
  stroke: #9fdcff;
  stroke-width: 2;
  stroke-linecap: round;
}

.achievement-card.is-unlocked {
  border-color: color-mix(in srgb, var(--tier-color) 40%, transparent) !important;
}

.achievement-card.is-close {
  animation: ach-card-in 460ms cubic-bezier(0.2, 0.9, 0.25, 1) calc(var(--i, 0) * 40ms) both, ach-close 2.6s ease-in-out 1s infinite;
}

.achievement-card.is-close .achievement-progress-text {
  color: #7ee787;
}

.achievement-progress span,
.close-unlock-row i b {
  position: relative;
  overflow: hidden;
  transform-origin: left;
  animation: ach-bar-fill 900ms cubic-bezier(0.2, 0.9, 0.25, 1) calc(var(--i, 0) * 40ms + 200ms) both;
}

.achievement-progress span::after,
.close-unlock-row i b::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: ach-bar-shine 2.8s ease-in-out 1.2s infinite;
}

.achievement-tier-markers span {
  transition: transform 160ms ease;
}

.achievement-tier-markers span.is-unlocked {
  background: var(--tier-color, #58d3ff);
  border-color: var(--tier-color, #58d3ff);
  box-shadow: 0 0 10px color-mix(in srgb, var(--tier-color, #58d3ff) 45%, transparent);
}

.achievement-tier-markers span.is-next {
  border-color: var(--tier-color, #bc74ff);
  color: var(--tier-color, #f0f6fc);
  animation: ach-next 1.8s ease-in-out infinite;
}

.achievement-card.is-unknown .achievement-unknown-badge {
  animation: ach-unknown 3.2s steps(1) infinite;
}

.close-unlock-row {
  transition: transform 160ms ease, border-color 160ms ease;
}

.close-unlock-row:hover {
  transform: translateX(3px);
  border-color: rgba(188, 116, 255, 0.5) !important;
}

@keyframes ach-card-in {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes ach-bar-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes ach-bar-shine {
  0%, 60% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes ach-close {
  0%, 100% { box-shadow: 0 0 0 rgba(126, 231, 135, 0); border-color: rgba(88, 211, 255, 0.14); }
  50% { box-shadow: 0 0 22px rgba(126, 231, 135, 0.2); border-color: rgba(126, 231, 135, 0.5); }
}

@keyframes ach-next {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

/* Badge inconnu : un court « glitch » de temps en temps. */
@keyframes ach-unknown {
  0%, 92%, 100% { transform: none; color: rgba(240, 246, 252, 0.35); }
  94% { transform: translateX(2px); color: rgba(200, 85, 255, 0.8); }
  96% { transform: translateX(-2px); color: rgba(154, 247, 255, 0.8); }
}

@media (prefers-reduced-motion: reduce) {
  .achievement-card,
  .achievement-card.is-close,
  .achievement-progress span,
  .close-unlock-row i b,
  .achievement-progress span::after,
  .close-unlock-row i b::after,
  .achievement-tier-markers span.is-next,
  .achievement-card.is-unknown .achievement-unknown-badge,
  .achievement-card.is-unlocked .achievement-emblem::before {
    animation: none;
  }
}

.achievement-detail {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 30;
  width: min(780px, calc(100vw - 34px));
  max-height: calc(100vh - 34px);
  overflow: auto;
  transform: translate(-50%, -50%);
  padding: 22px;
  border: 1px solid rgba(188, 116, 255, 0.34);
  border-radius: 10px;
  background: rgba(6, 9, 19, 0.97);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.55), 0 0 48px rgba(188, 116, 255, 0.12);
}

.achievement-detail.hidden {
  display: none;
}

.achievement-detail-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px !important;
  height: 38px;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.07) !important;
  color: #f0f6fc !important;
}

.achievement-detail-head {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 18px;
  align-items: center;
  margin-right: 42px;
}

.achievement-detail-head img {
  width: 116px;
  height: 116px;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.achievement-detail-head h2 {
  margin: 0 0 8px;
  font-size: 30px;
}

.achievement-detail-head p {
  margin: 0;
  color: rgba(240, 246, 252, 0.72);
}

.achievement-tier-line {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 20px 0;
}

.achievement-tier-node {
  min-height: 118px;
  padding: 10px !important;
  background: rgba(7, 13, 25, 0.72) !important;
  color: #f0f6fc !important;
  border-color: rgba(88, 211, 255, 0.18) !important;
}

.achievement-tier-node img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.achievement-tier-node span {
  display: block;
  margin-top: 6px;
}

.achievement-detail-progress,
.career-end-section {
  padding: 13px;
  border: 1px solid rgba(88, 211, 255, 0.16);
  border-radius: 8px;
  background: rgba(3, 12, 24, 0.58);
}

.achievement-detail-actions {
  display: grid;
  grid-template-columns: minmax(180px, 260px);
  margin-top: 14px;
}

.career-end-section {
  margin: 0 0 12px;
}

.career-unlock-row,
.career-progress-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 9px;
  align-items: center;
  margin-top: 8px;
  color: rgba(240, 246, 252, 0.86);
}

.career-unlock-row img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.profile-card {
  max-width: 760px;
}

.player-profile-panel {
  display: grid;
  gap: 18px;
  margin: 18px 0 20px;
  padding: 18px;
  border: 1px solid rgba(88, 211, 255, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(88, 211, 255, 0.07), rgba(188, 116, 255, 0.06)),
    rgba(2, 8, 18, 0.74);
}

.player-profile-name {
  margin-top: 8px;
  color: #f5f9ff;
  font-size: 26px;
  font-weight: 900;
}

.profile-badge-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.profile-badge-slot {
  display: grid !important;
  grid-template-rows: 78px auto auto;
  place-items: center;
  min-height: 150px;
  padding: 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(88, 211, 255, 0.18) !important;
  background: rgba(7, 13, 25, 0.76) !important;
  color: #d9eeff !important;
  text-align: center;
}

.profile-badge-slot img {
  width: 78px;
  height: 78px;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  user-select: none;
  -webkit-user-drag: none;
}

.profile-badge-slot span {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 800;
}

.profile-badge-slot strong {
  margin-top: 4px;
  color: #7ec9ff;
  font-size: 13px;
}

.profile-badge-slot.is-empty {
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-style: dashed !important;
  color: rgba(240, 246, 252, 0.48) !important;
  background: rgba(240, 246, 252, 0.035) !important;
}

/* --- Profil : en-tete, rang, badges, statistiques (voir renderPlayerProfile) --- */
.profile-hero {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  margin-bottom: 14px;
  background:
    radial-gradient(circle at 12% 50%, color-mix(in srgb, var(--skin-accent, #58a6ff) 20%, transparent), transparent 46%),
    linear-gradient(135deg, rgba(88, 211, 255, 0.07), rgba(188, 116, 255, 0.06)),
    rgba(2, 8, 18, 0.74);
}

.profile-hero-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
}

.profile-hero-orbit {
  position: absolute;
  inset: 4px;
  border: 1px dashed color-mix(in srgb, var(--skin-accent, #58a6ff) 55%, transparent);
  border-radius: 50%;
  animation: dc-rotate 16s linear infinite;
}

.profile-hero-orbit::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--skin-accent, #58a6ff);
  box-shadow: 0 0 12px var(--skin-accent, #58a6ff);
}

.profile-hero-glow {
  position: absolute;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--skin-accent, #58a6ff) 40%, transparent);
  filter: blur(20px);
  animation: dc-breathe 3.2s ease-in-out infinite;
}

.profile-hero-avatar img {
  position: relative;
  width: 104px;
  height: 104px;
  object-fit: contain;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--skin-accent, #58a6ff) 50%, transparent));
  animation: dc-hover 4s ease-in-out infinite;
}

.profile-hero .player-profile-name {
  margin-top: 2px;
  font-size: 30px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.profile-rank {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.profile-rank-chip {
  justify-self: start;
  padding: 3px 10px;
  border: 1px solid color-mix(in srgb, var(--skin-accent, #58a6ff) 60%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--skin-accent, #58a6ff) 16%, transparent);
  color: #eaf6ff;
  font-family: var(--dc-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profile-rank-bar {
  position: relative;
  height: 6px;
  max-width: 320px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(240, 246, 252, 0.08);
}

.profile-rank-bar i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--dc-cyan), var(--dc-green));
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  animation: profile-bar-fill 1s cubic-bezier(0.2, 0.9, 0.25, 1) 0.35s both;
}

.profile-rank small {
  color: rgba(240, 246, 252, 0.56);
  font-size: 12px;
}

.profile-badges-panel {
  margin-bottom: 4px;
}

.profile-badges-panel .profile-badge-slots {
  margin-top: 8px;
}

.profile-badges-panel .profile-badge-slot {
  grid-template-rows: 58px auto auto;
  min-height: 112px;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.profile-badges-panel .profile-badge-slot img {
  width: 58px;
  height: 58px;
}

.profile-badges-panel .profile-badge-slot:hover {
  transform: translateY(-2px);
  border-color: rgba(88, 211, 255, 0.5) !important;
  box-shadow: 0 6px 20px rgba(88, 211, 255, 0.12);
}

.profile-badges-panel .profile-badge-slot.is-empty {
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}

.profile-badge-slot.is-empty b {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px dashed rgba(126, 231, 135, 0.6);
  border-radius: 50%;
  color: #7ee787;
  font-size: 18px;
}

.profile-stat-grid .profile-stat-card {
  position: relative;
  padding-left: 46px;
  transition: transform 160ms ease, border-color 160ms ease;
}

.profile-stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(88, 211, 255, 0.4);
}

.profile-stat-icon {
  position: absolute;
  top: 50%;
  left: 13px;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  fill: none;
  stroke: var(--dc-cyan);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}

.profile-stat-card strong {
  font-family: var(--dc-font-display);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}

.profile-stat-card em {
  color: rgba(240, 246, 252, 0.42);
  font-size: 13px;
  font-style: italic;
}

.profile-stat-card.is-pending .profile-stat-icon {
  stroke: rgba(240, 246, 252, 0.35);
}

/* Entree en cascade a chaque ouverture. */
.profile-card.is-entering .profile-hero,
.profile-card.is-entering .profile-badges-panel,
.profile-card.is-entering .profile-stat-card,
.profile-card.is-entering .recovery-panel {
  animation: profile-reveal 480ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

.profile-card.is-entering .profile-badges-panel {
  animation-delay: 90ms;
}

.profile-card.is-entering .profile-stat-card {
  animation-delay: calc(170ms + var(--i, 0) * 55ms);
}

.profile-card.is-entering .recovery-panel {
  animation-delay: 520ms;
}

@keyframes profile-reveal {
  from { transform: translateY(14px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes profile-bar-fill {
  from { transform: scaleX(0); }
}

@media (max-width: 600px) {
  .profile-hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .profile-rank-chip {
    justify-self: center;
  }

  .profile-rank-bar {
    width: 100%;
    margin: 0 auto;
  }

  .profile-badges-panel .profile-badge-slots {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .profile-badges-panel .profile-badge-slot {
    min-height: 88px;
    padding: 8px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-card.is-entering .profile-hero,
  .profile-card.is-entering .profile-badges-panel,
  .profile-card.is-entering .profile-stat-card,
  .profile-card.is-entering .recovery-panel,
  .profile-rank-bar i {
    animation: none;
  }
}

/* Code de recuperation (ecran Profil). */
.recovery-panel {
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid rgba(88, 211, 255, 0.16);
  border-radius: 10px;
  background: rgba(2, 8, 18, 0.58);
}

.recovery-hint,
.recovery-status {
  margin: 6px 0 10px;
  color: rgba(240, 246, 252, 0.68);
  font-size: 13px;
  line-height: 1.45;
}

.recovery-status:empty {
  display: none;
}

.recovery-status.is-error {
  color: #ff8a8a;
}

.recovery-status.is-success {
  color: #7ee787;
}

.recovery-code-row,
.recovery-actions,
.recovery-redeem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.recovery-code-row.hidden,
.recovery-redeem.hidden {
  display: none;
}

.recovery-code {
  padding: 8px 14px;
  border: 1px dashed rgba(88, 211, 255, 0.45);
  border-radius: 8px;
  color: #bff4ff;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 20px;
  letter-spacing: 0.12em;
  user-select: all;
}

.recovery-redeem input {
  flex: 1 1 180px;
  min-width: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.profile-stat-grid,
.leaderboard-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 14px 0 18px;
}

.profile-stat-card,
.leaderboard-summary > div {
  padding: 12px;
  border: 1px solid rgba(88, 211, 255, 0.16);
  border-radius: 10px;
  background: rgba(2, 8, 18, 0.58);
}

.profile-stat-card span,
.leaderboard-summary span {
  display: block;
  margin-bottom: 5px;
  color: rgba(240, 246, 252, 0.56);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.profile-stat-card strong,
.leaderboard-summary strong {
  color: #f5f9ff;
  font-size: 16px;
}

.leaderboard-summary-empty {
  grid-column: 1 / -1;
  color: rgba(240, 246, 252, 0.66);
}

.career-progress-row {
  grid-template-columns: 1fr auto;
}

.career-progress-row .career-progress-bar {
  grid-column: 1 / -1;
}

.dex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

#weaponDexGrid {
  display: block;
}

.weapon-dex-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 12px;
}

.enemy-dex-section,
.anomaly-dex-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  grid-column: 1 / -1;
}

.dex-section-title {
  grid-column: 1 / -1;
  margin: 8px 0 2px;
  color: rgba(126, 231, 135, 0.9);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.anomaly-dex-section {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid rgba(207, 95, 255, 0.28);
  border-radius: 8px;
  background:
    radial-gradient(circle at 20% 20%, rgba(194, 65, 255, 0.12), transparent 34%),
    rgba(9, 7, 18, 0.72);
}

.anomaly-dex-section .dex-section-title {
  color: #f0b7ff;
}

.anomaly-dex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
  grid-column: 1 / -1;
}

.dex-filter-bar {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
}

.dex-filter-bar > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dex-filter-bar button {
  width: auto;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(88, 166, 255, 0.08);
  color: #d9eeff;
}

.dex-filter-bar button.is-active {
  border-color: rgba(126, 249, 255, 0.62);
  background: rgba(88, 211, 255, 0.18);
  color: #f0fbff;
}

.dex-empty {
  padding: 18px;
  border: 1px solid rgba(240, 246, 252, 0.08);
  border-radius: 8px;
  color: rgba(240, 246, 252, 0.72);
  background: rgba(240, 246, 252, 0.035);
}

.dex-entry {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  min-height: 86px;
  padding: 9px;
  border: 1px solid rgba(240, 246, 252, 0.1);
  border-radius: 8px;
  background: rgba(240, 246, 252, 0.035);
}

.dex-entry.is-nemesis {
  border-color: rgba(255, 88, 88, 0.32);
}

.anomaly-dex-entry {
  border-color: rgba(207, 95, 255, 0.36);
  background: rgba(25, 8, 36, 0.48);
  box-shadow: inset 0 0 28px rgba(175, 65, 255, 0.06);
}

.anomaly-dex-entry.is-defeated {
  border-color: rgba(126, 249, 255, 0.42);
}

.weapon-dex-entry {
  grid-template-columns: 64px 1fr;
  min-width: 0;
  min-height: 154px;
  padding: 12px;
}

.weapon-dex-entry.is-splitter-bow {
  grid-template-columns: 70px 1fr;
  min-height: 164px;
}

.weapon-dex-entry.is-nemesis {
  box-shadow: inset 0 0 22px rgba(255, 70, 48, 0.08), 0 0 16px rgba(255, 70, 48, 0.08);
}

.weapon-dex-entry img {
  width: 64px;
  height: 92px;
  -webkit-user-drag: none;
  pointer-events: none;
  user-select: none;
}

.dex-entry img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  -webkit-user-drag: none;
  pointer-events: none;
  user-select: none;
}

.dex-entry.is-unknown img {
  filter: brightness(0) saturate(0) contrast(1.45) opacity(0.96) drop-shadow(0 0 10px rgba(0, 0, 0, 0.75));
}

.anomaly-dex-entry.is-unknown img {
  opacity: 1;
  filter: brightness(0) saturate(0) contrast(1.65) drop-shadow(0 0 12px rgba(0, 0, 0, 0.85));
}

.weapon-dex-entry img {
  width: 64px;
  height: 92px;
  object-fit: contain;
}

.weapon-dex-entry.is-splitter-bow img {
  width: 70px;
  height: 106px;
}

.weapon-dex-entry.is-unknown img {
  filter: brightness(0) saturate(0) opacity(0.58);
}

.weapon-dex-missing-art {
  display: block;
  width: 64px;
  height: 92px;
  pointer-events: none;
}

.weapon-dex-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 8px 0;
}

.weapon-dex-stats span {
  display: grid;
  gap: 2px;
  padding: 6px 7px;
  border: 1px solid rgba(88, 211, 255, 0.12);
  border-radius: 7px;
  background: rgba(3, 11, 22, 0.52);
  color: rgba(240, 246, 252, 0.54);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.weapon-dex-stats strong {
  color: #f0f6fc;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.dex-entry-title {
  margin-bottom: 3px;
  font-size: 13px;
  font-weight: 700;
}

.dex-entry-meta,
.dex-entry-desc {
  color: rgba(240, 246, 252, 0.68);
  font-size: 11px;
  line-height: 1.35;
}

/* Bandeau d'alerte : surtitre de categorie + titre, cadre en biseau et
   entree "impact" avec leger glitch. La couleur suit la categorie. */
.threat-announcement {
  --accent: #ffab35;
  position: fixed;
  top: 26px;
  left: 50%;
  z-index: 30;
  box-sizing: border-box;
  min-width: min(460px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  padding: 11px 44px 13px;
  transform: translateX(-50%);
  text-align: center;
  color: #fff;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 14%, rgba(6, 10, 18, 0.94)) 18%, rgba(6, 10, 18, 0.95) 50%, color-mix(in srgb, var(--accent) 14%, rgba(6, 10, 18, 0.94)) 82%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--accent) 75%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 0 40px color-mix(in srgb, var(--accent) 22%, transparent);
  clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 22px 100%);
  pointer-events: none;
}

.threat-announcement::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--accent) 38%, transparent) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: dc-banner-sweep 1.6s ease-out 0.2s both;
}

.threat-kicker {
  display: block;
  color: var(--accent);
  font: 600 11px/1.2 var(--dc-font-display);
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.threat-title {
  display: block;
  margin-top: 3px;
  font: 700 clamp(17px, 1.9vw, 23px)/1.15 var(--dc-font-display);
  letter-spacing: 0.04em;
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 70%, transparent);
}

.threat-announcement.is-live {
  animation: dc-banner-in 0.55s var(--dc-ease-out) both;
}

.threat-announcement.is-live .threat-title {
  animation: dc-glitch 0.5s steps(3) 0.08s both;
}

.threat-announcement.is-leaving {
  animation: dc-banner-out 0.4s ease-in both;
}

.threat-announcement.is-apex { --accent: #ffab35; }
.threat-announcement.is-nemesis { --accent: #ff4646; }
.threat-announcement.is-anomaly { --accent: #c65cff; }
.threat-announcement.is-mythic { --accent: #ff3030; }
.threat-announcement.is-supply { --accent: #ffc654; }
.threat-announcement.is-relic { --accent: #ff6a8a; }
.threat-announcement.is-victory { --accent: #ffd36b; }

.nemesis-bar {
  position: fixed;
  top: 88px;
  left: 50%;
  transform: translateX(-50%);
  width: min(440px, calc(100vw - 32px));
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(8, 12, 20, 0.88);
  border: 1px solid rgba(255, 75, 75, 0.38);
  text-align: center;
  font-size: 12px;
  color: #ffd6d6;
  animation: nemesisBarIn 280ms ease-out;
}

.nemesis-health {
  height: 7px;
  margin-top: 6px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.13);
}

.nemesis-health > div {
  height: 100%;
  background: linear-gradient(90deg, #ff3f4f, #ffac53);
  transition: width 140ms linear;
}

.nemesis-bar.anomaly {
  width: min(560px, calc(100vw - 32px));
  border-color: rgba(198, 90, 255, 0.6);
  color: #f0d5ff;
  box-shadow: 0 0 28px rgba(174, 77, 255, 0.18);
}

.nemesis-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.anomaly-segments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-top: 7px;
}

.anomaly-segments span {
  height: 3px;
  border-radius: 999px;
  background: rgba(240, 246, 252, 0.16);
}

.anomaly-segments span.is-active {
  background: linear-gradient(90deg, #66e8ff, #d95cff);
}

.anomaly-health > div {
  background: linear-gradient(90deg, #7df7ff, #b45cff, #ff72df);
}

@keyframes nemesisBarIn {
  from {
    opacity: 0;
    transform: translate(-50%, -8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

.hidden {
  display: none !important;
}

.language-picker,
.mode-picker,
.quality-picker,
.coop-picker,
.skin-picker {
  margin-bottom: 14px;
}

.language-label {
  margin-bottom: 8px;
  font-family: var(--dc-font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dc-ink-dim);
}

.language-options,
.mode-options,
.quality-options,
.coop-mode-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(2, 8, 16, 0.55);
  border: 1px solid rgba(234, 243, 255, 0.06);
}

.quality-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.coop-mode-options {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Controle segmente : l'option inactive est sobre, l'option active s'allume.
   (L'ancien style inversait la hierarchie : l'inactif portait le degrade.) */
.menu-card .language-option,
.menu-card .mode-option,
.menu-card .quality-option,
.menu-card .coop-mode-option,
.language-option,
.mode-option,
.quality-option,
.coop-mode-option {
  width: 100%;
  padding: 10px 8px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--dc-ink-dim);
  font-family: var(--dc-font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-align: center;
  cursor: pointer;
  box-shadow: none;
  transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.menu-card .language-option:not(.is-active):hover,
.menu-card .quality-option:not(.is-active):hover,
.menu-card .coop-mode-option:not(.is-active):hover {
  transform: none;
  color: var(--dc-ink);
  background: rgba(88, 211, 255, 0.06);
  border-color: rgba(88, 211, 255, 0.2) !important;
  box-shadow: none;
  filter: none;
}

.menu-card .language-option.is-active,
.menu-card .mode-option.is-active,
.menu-card .quality-option.is-active,
.menu-card .coop-mode-option.is-active,
.language-option.is-active,
.mode-option.is-active,
.quality-option.is-active,
.coop-mode-option.is-active {
  color: #f2fdff;
  border-color: rgba(88, 211, 255, 0.62);
  background: linear-gradient(180deg, rgba(88, 211, 255, 0.24), rgba(63, 220, 138, 0.1));
  box-shadow: 0 0 18px rgba(88, 211, 255, 0.22), inset 0 -2px 0 var(--dc-cyan);
}

.mode-description {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.45;
}

.skin-picker {
  padding: 14px;
  border: 1px solid var(--dc-line);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--skin-accent, #58a6ff) 26%, transparent), transparent 60%),
    rgba(2, 8, 16, 0.5);
}

.skin-preview-panel {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
}

.menu-card .skin-arrow,
.skin-arrow {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(240, 246, 252, 0.16);
  background: rgba(8, 13, 22, 0.84);
  color: var(--dc-ink);
  font-size: 26px;
  line-height: 1;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.menu-card .skin-arrow:hover,
.skin-arrow:hover {
  transform: translateY(-1px);
  border-color: var(--skin-accent, #58a6ff) !important;
  color: var(--skin-accent, #58a6ff);
  box-shadow: 0 0 16px color-mix(in srgb, var(--skin-accent, #58a6ff) 30%, transparent);
  filter: none;
}

.skin-preview-stage {
  position: relative;
  height: 138px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.skin-preview-orbit {
  position: absolute;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--skin-accent, #58a6ff) 55%, transparent);
  animation: dc-rotate 18s linear infinite;
}

.skin-preview-orbit::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--skin-accent, #58a6ff);
  box-shadow: 0 0 12px var(--skin-accent, #58a6ff);
}

.skin-preview-glow {
  position: absolute;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--skin-accent, #58a6ff) 38%, transparent);
  filter: blur(20px);
  opacity: 0.85;
  animation: dc-breathe 3.2s ease-in-out infinite;
}

.skin-preview-image {
  position: relative;
  width: 112px;
  height: 112px;
  object-fit: contain;
  transform: scale(1);
  opacity: 1;
  transition:
    transform 220ms ease,
    opacity 180ms ease,
    filter 220ms ease;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--skin-accent, #58a6ff) 50%, transparent));
  animation: dc-hover 4s ease-in-out infinite;
}

/* Changement de skin (voir playSkinSwapAnimation dans main.js). */
.skin-preview-image.is-arriving {
  animation: skin-swap-arrive 540ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

.skin-swap-ghost {
  position: absolute;
  width: 112px;
  height: 112px;
  object-fit: contain;
  pointer-events: none;
  animation: skin-swap-ghost 400ms cubic-bezier(0.55, 0, 0.8, 0.4) forwards;
}

.skin-swap-ring {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 2px solid var(--skin-accent, #58a6ff);
  box-shadow: 0 0 18px var(--skin-accent, #58a6ff), inset 0 0 12px var(--skin-accent, #58a6ff);
  pointer-events: none;
  animation: skin-swap-ring 520ms ease-out 110ms both;
}

.skin-swap-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--skin-accent, #58a6ff);
  box-shadow: 0 0 8px var(--skin-accent, #58a6ff);
  pointer-events: none;
  animation: skin-swap-spark 560ms cubic-bezier(0.15, 0.8, 0.3, 1) both;
}

.skin-preview-stage.is-swapping .skin-preview-orbit {
  animation-duration: 1.4s;
}

.skin-preview-stage.is-swapping .skin-preview-glow {
  animation: skin-swap-flare 600ms ease-out;
}

@keyframes skin-swap-ghost {
  from {
    transform: translateX(0) rotate(0deg) scale(1);
    opacity: 1;
  }
  to {
    transform: translateX(calc(var(--swap-dir, 1) * -54px)) rotate(calc(var(--swap-dir, 1) * -80deg)) scale(0.5);
    opacity: 0;
  }
}

@keyframes skin-swap-arrive {
  0% {
    transform: translateX(calc(var(--swap-dir, 1) * 54px)) rotate(calc(var(--swap-dir, 1) * 140deg)) scale(0.45);
    opacity: 0;
    filter: brightness(2.6) drop-shadow(0 0 22px var(--skin-accent, #58a6ff));
  }
  60% {
    transform: translateX(0) rotate(calc(var(--swap-dir, 1) * -10deg)) scale(1.12);
    opacity: 1;
    filter: brightness(1.5) drop-shadow(0 0 20px var(--skin-accent, #58a6ff));
  }
  100% {
    transform: translateX(0) rotate(0deg) scale(1);
    opacity: 1;
    filter: brightness(1) drop-shadow(0 0 14px color-mix(in srgb, var(--skin-accent, #58a6ff) 50%, transparent));
  }
}

@keyframes skin-swap-ring {
  from {
    transform: scale(0.4);
    opacity: 0.95;
  }
  to {
    transform: scale(2.1);
    opacity: 0;
  }
}

@keyframes skin-swap-spark {
  from {
    transform: translate(0, 0) scale(1.2);
    opacity: 1;
  }
  to {
    transform: translate(var(--x), var(--y)) scale(0.2);
    opacity: 0;
  }
}

@keyframes skin-swap-flare {
  0% {
    transform: scale(1);
    opacity: 0.85;
  }
  35% {
    transform: scale(1.7);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.85;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skin-preview-image.is-arriving,
  .skin-swap-ghost,
  .skin-swap-ring,
  .skin-swap-spark {
    animation: none;
  }
}

.skin-name {
  margin-top: 2px;
  color: var(--dc-ink);
  font-family: var(--dc-font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}

.skin-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}

.menu-card .skin-dot,
.skin-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(240, 246, 252, 0.28);
}

.menu-card .skin-dot.is-active,
.skin-dot.is-active {
  background: var(--skin-accent, #58a6ff);
  box-shadow: 0 0 12px var(--skin-accent, #58a6ff);
}

.player-color-picker {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.menu-card .player-color-dot,
.player-color-dot {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  background: var(--color);
  border: 2px solid rgba(240, 246, 252, 0.25);
}

.menu-card .player-color-dot:hover {
  transform: scale(1.12);
  filter: none;
}

.menu-card .player-color-dot.is-active,
.player-color-dot.is-active {
  border-color: #f0f6fc;
  box-shadow: 0 0 14px color-mix(in srgb, var(--color) 72%, transparent);
}

.coop-panel {
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid rgba(88, 166, 255, 0.16);
  border-radius: 14px;
  background: rgba(240, 246, 252, 0.035);
}

.coop-actions,
.join-room-inline,
.room-lobby-head,
.room-controls {
  display: grid;
  gap: 10px;
}

.join-room-inline,
.room-lobby-head,
.room-controls {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.join-room-inline input {
  margin-bottom: 0;
}

.room-lobby {
  margin-top: 10px;
}

.room-lobby-head {
  grid-template-columns: minmax(0, 1fr);
}

.room-share {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 8px;
}

.room-title {
  font-weight: 800;
  color: #f0f6fc;
}

.room-meta {
  margin-top: 4px;
  color: rgba(126, 201, 255, 0.86);
  font-size: 12px;
}

.room-slots {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

.room-slot {
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 72px;
  padding: 9px;
  border: 1px solid rgba(240, 246, 252, 0.1);
  border-radius: 8px;
  background: rgba(8, 13, 22, 0.62);
}

.room-slot img,
.room-slot-ghost {
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.room-slot-ghost {
  border-radius: 50%;
  background: rgba(0, 6, 13, 0.78);
}

.room-slot span {
  display: block;
  margin-top: 4px;
  color: rgba(240, 246, 252, 0.66);
  font-size: 12px;
}

.local-leaderboard {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(240, 246, 252, 0.08);
  border-radius: 8px;
  background: rgba(240, 246, 252, 0.04);
}

.leaderboard-card {
  width: min(820px, calc(100vw - 32px));
  border-color: rgba(126, 231, 135, 0.24);
  background:
    linear-gradient(180deg, rgba(7, 18, 22, 0.95), rgba(5, 8, 17, 0.95)),
    radial-gradient(circle at top right, rgba(126, 231, 135, 0.12), transparent 38%);
}

.leaderboard-tabs {
  display: grid;
  gap: 8px;
  margin: 18px 0 12px;
}

.leaderboard-tab-row {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 8px;
}

.leaderboard-run.is-you {
  border-color: rgba(88, 166, 255, 0.6) !important;
}

.leaderboard-you,
.leaderboard-victory {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  color: #07111b;
  background: #58a6ff;
}

.leaderboard-victory {
  background: #7ee787;
}

.leaderboard-tabs button {
  padding: 10px 8px;
  background: rgba(240, 246, 252, 0.05);
  color: rgba(240, 246, 252, 0.72);
}

.leaderboard-tabs button.is-active {
  background: linear-gradient(135deg, #7ee787, #58a6ff);
  color: #07111b;
}

.leaderboard-runs {
  display: grid;
  gap: 8px;
  min-height: 170px;
  margin-bottom: 18px;
}

.leaderboard-run {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px !important;
  text-align: left;
  background: rgba(4, 12, 24, 0.66) !important;
  color: #f0f6fc !important;
  border-color: rgba(126, 231, 135, 0.16) !important;
}

.leaderboard-run:hover {
  border-color: rgba(126, 231, 135, 0.5) !important;
  box-shadow: 0 0 20px rgba(126, 231, 135, 0.1);
}

.leaderboard-rank {
  color: #7ee787;
  font-weight: 800;
}

.leaderboard-run-main,
.leaderboard-run-meta {
  display: grid;
  gap: 3px;
}

.leaderboard-run-main strong {
  font-size: 18px;
}

.leaderboard-run small {
  color: rgba(240, 246, 252, 0.58);
  font-size: 12px;
}

.leaderboard-run-meta {
  text-align: right;
  color: rgba(240, 246, 252, 0.78);
  font-size: 13px;
}

/* --- Classement : podium, lignes, etats (voir showLeaderboardBoard) --------- */
.lb-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  padding: 18px 6px 0;
}

.lb-podium-slot {
  --medal: #cfd8e3;
  --plinth: 62px;
  --avatar: 84px;
  --tilt: 0deg;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #f0f6fc;
  font: inherit;
  text-align: center;
  cursor: default;
  animation: lb-rise 620ms cubic-bezier(0.2, 0.9, 0.25, 1) var(--delay, 0ms) both;
}

button.lb-podium-slot,
.menu-card button.lb-podium-slot {
  cursor: pointer;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #f0f6fc !important;
  padding: 0 !important;
  font: inherit;
  text-align: center;
}

.lb-podium-slot.rank-1 {
  --medal: #ffd166;
  --plinth: 92px;
  --avatar: 108px;
}

.lb-podium-slot.rank-3 {
  --medal: #e0925a;
  --plinth: 46px;
}

/* Les skins des cotes se tournent vers le centre du podium. */
.lb-podium-slot[data-side="0"] {
  --tilt: 32deg;
}

.lb-podium-slot[data-side="2"] {
  --tilt: -32deg;
}

.lb-podium-avatars {
  position: relative;
  display: flex;
  justify-content: center;
  height: var(--avatar);
  margin-bottom: 2px;
}

.lb-podium-avatars::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: calc(var(--avatar) * 1.1);
  height: calc(var(--avatar) * 0.26);
  margin-left: calc(var(--avatar) * -0.55);
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--medal) 55%, transparent), transparent);
  filter: blur(2px);
}

.lb-podium-avatars img,
.lb-row-avatars img {
  position: relative;
  object-fit: contain;
  transform: rotate(var(--tilt, 0deg));
}

.lb-podium-avatars img {
  width: calc(var(--avatar) / (1 + (var(--count) - 1) * 0.35));
  height: calc(var(--avatar) / (1 + (var(--count) - 1) * 0.35));
  margin-left: calc(var(--avatar) * -0.12 * min(var(--i), 1));
  align-self: flex-end;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--medal) 45%, transparent));
  animation: lb-avatar-drop 700ms cubic-bezier(0.3, 1.4, 0.5, 1) calc(var(--delay, 0ms) + 180ms + var(--i) * 70ms) both, lb-float 4.2s ease-in-out calc(var(--delay, 0ms) + 900ms) infinite;
}

.lb-podium-slot.rank-1 .lb-podium-avatars img {
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--medal) 70%, transparent));
}

.lb-podium-name {
  max-width: 100%;
  overflow: hidden;
  font-family: var(--dc-font-display);
  font-size: 16px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-podium-score {
  color: var(--medal);
  font-family: var(--dc-font-display);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 0 18px color-mix(in srgb, var(--medal) 55%, transparent);
}

.lb-podium-slot.rank-1 .lb-podium-score {
  font-size: 30px;
}

.lb-podium-meta {
  color: rgba(240, 246, 252, 0.56);
  font-size: 12px;
}

.lb-podium-plinth {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  width: 100%;
  height: var(--plinth);
  margin-top: 6px;
  border: 1px solid color-mix(in srgb, var(--medal) 55%, transparent);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--medal) 26%, transparent), rgba(4, 12, 24, 0.2));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--medal) 60%, transparent), 0 -6px 26px color-mix(in srgb, var(--medal) 16%, transparent);
  overflow: hidden;
  transform-origin: bottom;
  animation: lb-plinth 560ms cubic-bezier(0.2, 0.9, 0.25, 1) var(--delay, 0ms) both;
}

.lb-podium-plinth > span {
  color: var(--medal);
  font-family: var(--dc-font-display);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.lb-podium-slot.rank-1 .lb-podium-plinth::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 244, 214, 0.22) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: lb-shine 3.6s ease-in-out 1.4s infinite;
}

.lb-podium-slot.is-you .lb-podium-plinth {
  border-color: #58a6ff;
}

.lb-podium-slot.is-empty {
  visibility: hidden;
}

button.lb-podium-slot:hover .lb-podium-avatars img {
  transform: rotate(var(--tilt, 0deg)) scale(1.06);
}

.lb-rows {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.leaderboard-run.lb-row {
  grid-template-columns: 38px auto minmax(0, 1fr) auto;
  animation: lb-row-in 420ms cubic-bezier(0.2, 0.9, 0.25, 1) var(--delay, 0ms) both;
}

.lb-row .leaderboard-rank {
  color: rgba(240, 246, 252, 0.7);
  font-family: var(--dc-font-display);
  font-size: 15px;
}

.lb-row-avatars {
  display: flex;
}

.lb-row-avatars img {
  width: 34px;
  height: 34px;
  margin-left: calc(-12px * min(var(--i), 1));
  --tilt: 18deg;
}

.lb-row .leaderboard-run-main strong {
  overflow: hidden;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-row-score {
  display: grid;
  gap: 2px;
  color: #7ee787;
  font-family: var(--dc-font-display);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.lb-row-score small {
  color: rgba(240, 246, 252, 0.5);
  font-family: inherit;
  font-size: 11px;
}

.lb-skeleton {
  display: grid;
  gap: 8px;
}

.lb-skeleton span {
  height: 54px;
  border-radius: 12px;
  background: linear-gradient(100deg, rgba(240, 246, 252, 0.04) 30%, rgba(88, 211, 255, 0.1) 50%, rgba(240, 246, 252, 0.04) 70%);
  background-size: 250% 100%;
  animation: lb-skeleton 1.3s ease-in-out infinite;
}

.lb-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 26px 12px;
  text-align: center;
  animation: lb-row-in 420ms ease both;
}

.lb-empty strong {
  font-family: var(--dc-font-display);
  font-size: 17px;
}

.lb-empty small {
  color: rgba(240, 246, 252, 0.56);
  font-size: 13px;
}

.lb-empty-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  margin-bottom: 6px;
  border: 1px dashed rgba(126, 231, 135, 0.5);
  border-radius: 50%;
  animation: dc-rotate 14s linear infinite;
}

.lb-empty-ring span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #7ee787;
  box-shadow: 0 0 18px #7ee787;
  animation: dc-breathe 2.4s ease-in-out infinite;
}

@keyframes lb-rise {
  from { transform: translateY(34px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes lb-plinth {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes lb-avatar-drop {
  from { transform: translateY(-26px) rotate(var(--tilt, 0deg)) scale(0.6); opacity: 0; }
  to { transform: translateY(0) rotate(var(--tilt, 0deg)) scale(1); opacity: 1; }
}

@keyframes lb-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}

@keyframes lb-shine {
  0%, 55% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes lb-row-in {
  from { transform: translateX(-14px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes lb-skeleton {
  from { background-position: 100% 0; }
  to { background-position: -150% 0; }
}

@media (max-width: 600px) {
  .lb-podium {
    gap: 6px;
  }

  .lb-podium-slot {
    --avatar: 60px;
  }

  .lb-podium-slot.rank-1 {
    --avatar: 76px;
  }

  .lb-podium-score {
    font-size: 18px;
  }

  .lb-podium-slot.rank-1 .lb-podium-score {
    font-size: 22px;
  }

  .lb-podium-name {
    font-size: 13px;
  }

  .lb-podium-meta {
    display: none;
  }

  .leaderboard-run.lb-row {
    grid-template-columns: 30px auto minmax(0, 1fr) auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lb-podium-slot,
  .lb-podium-plinth,
  .lb-podium-avatars img,
  .leaderboard-run.lb-row,
  .lb-empty,
  .lb-podium-slot.rank-1 .lb-podium-plinth::after {
    animation: none;
  }
}

.leaderboard-detail {
  position: fixed;
  inset: 0;
  z-index: 42;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(1, 5, 10, 0.72);
}

.leaderboard-detail > div:last-child {
  position: relative;
  width: min(500px, calc(100vw - 32px));
  max-height: min(680px, calc(100vh - 32px));
  overflow: auto;
  padding: 24px;
  border: 1px solid rgba(126, 231, 135, 0.28);
  border-radius: 16px;
  background: #09131b;
}

.leaderboard-detail-achievements {
  margin-top: 18px;
  color: rgba(240, 246, 252, 0.78);
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .upgrade-panel:not(.hidden) {
    animation-name: dc-rise-in;
  }
}

@media (max-width: 560px) {
  .leaderboard-tab-row {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .leaderboard-run {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .leaderboard-run-meta {
    grid-column: 2;
    text-align: left;
  }
}

.leaderboard-title {
  margin-bottom: 6px;
  color: rgba(126, 231, 135, 0.9);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.leaderboard-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
}

.leaderboard-meta,
.leaderboard-empty {
  margin: 2px 0 6px;
  color: rgba(240, 246, 252, 0.66);
  font-size: 12px;
}

.summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px;
  margin: 4px 0 18px;
  text-align: left;
}

.summary-grid strong {
  text-align: right;
}

.run-recap-score {
  display: grid;
  gap: 2px;
  margin: 0 0 16px;
  padding: 14px;
  text-align: center;
  border: 1px solid rgba(126, 231, 135, 0.24);
  border-radius: 12px;
  background: radial-gradient(circle, rgba(126, 231, 135, 0.16), rgba(8, 14, 26, 0.42) 68%);
}

.run-recap-score > strong {
  color: #d8ffe0;
  font-size: clamp(30px, 7vw, 48px);
  letter-spacing: 0.04em;
}

.run-recap-section {
  margin: 14px 0;
  padding: 12px;
  border: 1px solid rgba(88, 166, 255, 0.14);
  border-radius: 10px;
  background: rgba(4, 12, 24, 0.44);
}

.upgrade-panel {
  position: fixed;
  top: 50%;
  right: 18px;
  z-index: 40;
  width: min(320px, calc(100vw - 28px));
  max-height: calc(100vh - 120px);
  overflow: auto;
  padding: 14px;
  border: 1px solid rgba(126, 249, 255, 0.28);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(6, 12, 20, 0.92), rgba(8, 18, 28, 0.84));
  box-shadow: 0 0 26px rgba(42, 218, 255, 0.12);
  transform: translateY(-50%);
  pointer-events: auto;
  backdrop-filter: blur(12px);
}

.upgrade-panel-header h2 {
  margin: 3px 0 5px;
  font-size: 22px;
  line-height: 1.08;
}

.upgrade-panel-header p {
  margin: 0 0 12px;
  color: rgba(240, 246, 252, 0.68);
  font-size: 13px;
  line-height: 1.35;
}

.upgrade-choices {
  display: grid;
  gap: 8px;
}

.upgrade-option {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  text-align: left;
  padding: 10px 11px;
  border-radius: 8px;
  border: 1px solid rgba(240, 246, 252, 0.12);
  background: rgba(240, 246, 252, 0.05);
  color: #f0f6fc;
  cursor: pointer;
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background 140ms ease;
}

.upgrade-option:hover {
  transform: translateY(-1px);
  border-color: rgba(126, 231, 135, 0.35);
  background: rgba(88, 166, 255, 0.12);
}

.upgrade-option-stat {
  border-color: rgba(88, 166, 255, 0.18);
}

.upgrade-option-special {
  border-color: rgba(255, 166, 87, 0.28);
  background: rgba(255, 166, 87, 0.07);
}

.upgrade-option:disabled {
  transform: none;
  opacity: 0.72;
  cursor: wait;
}

.upgrade-reroll {
  margin-top: 2px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(126, 249, 255, 0.28);
  background: rgba(17, 34, 48, 0.78);
  color: #c9fbff;
  cursor: pointer;
}

.upgrade-reroll:disabled {
  opacity: 0.48;
  cursor: default;
}

.upgrade-name {
  font-size: 14px;
  font-weight: 700;
}

.upgrade-desc {
  margin-top: 3px;
  color: rgba(240, 246, 252, 0.72);
  font-size: 12px;
  line-height: 1.35;
}

.upgrade-hotkey {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid rgba(126, 249, 255, 0.32);
  color: #c9fbff;
  background: rgba(126, 249, 255, 0.1);
  font-size: 13px;
  font-weight: 800;
}

.upgrade-content {
  min-width: 0;
}

.enchantment-screen {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  z-index: 55;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 42%, rgba(0, 184, 255, 0.16), transparent 38%), rgba(2, 7, 13, 0.82);
  backdrop-filter: blur(8px);
  pointer-events: auto;
}

.enchantment-screen.hidden { display: none; }
.enchantment-live-warning.hidden, .enchantment-reroll.hidden { display: none; }

.enchantment-shell {
  position: relative;
  box-sizing: border-box;
  width: min(1120px, 96vw);
  padding: 28px 30px 24px;
  border: 1px solid rgba(76, 218, 255, 0.38);
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(11, 23, 34, 0.98), rgba(3, 9, 16, 0.98));
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.7), inset 0 0 42px rgba(0, 190, 255, 0.06);
  text-align: center;
  overflow: hidden;
}

.enchantment-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(65, 220, 255, 0.08), transparent);
  transform: translateX(-100%);
  animation: enchant-scan 4s linear infinite;
  pointer-events: none;
}

@keyframes enchant-scan { to { transform: translateX(100%); } }

.enchantment-kicker {
  color: #55ddff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.24em;
}

.enchantment-shell h2 { margin: 8px 0 4px; font-size: clamp(24px, 3vw, 38px); }
.enchantment-shell > p { margin: 0 0 22px; color: #91a7b9; }
.enchantment-shell > .enchantment-live-warning { display: inline-block; margin: -12px 0 18px; padding: 4px 9px; border: 1px solid rgba(255, 173, 69, .24); border-radius: 999px; color: #ffc875; font-size: 11px; }

.enchantment-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(117, 222, 255, 0.3);
  background: rgba(3, 12, 21, 0.9);
  color: #dff9ff;
  font-size: 24px;
}

.enchantment-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

.enchantment-card {
  --category-color: #3ddcff;
  position: relative;
  min-height: 390px;
  padding: 24px 22px 22px;
  border: 1px solid color-mix(in srgb, var(--category-color), transparent 45%);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(18, 35, 49, 0.98), rgba(5, 12, 20, 0.98));
  color: #edfaff;
  overflow: hidden;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.enchantment-card:hover, .enchantment-card:focus-visible {
  transform: translateY(-6px);
  border-color: var(--category-color);
  box-shadow: 0 15px 40px color-mix(in srgb, var(--category-color), transparent 75%);
}

.enchantment-loadout-card { cursor: default; }
.enchantment-loadout-card:hover { transform: none; border-color: color-mix(in srgb, var(--category-color), transparent 28%); box-shadow: 0 10px 34px color-mix(in srgb, var(--category-color), transparent 84%); }
.enchantment-loadout-card.is-empty { border-style: dashed; background: linear-gradient(180deg, rgba(13, 27, 39, .82), rgba(5, 12, 20, .94)); }
.enchantment-loadout-card.is-empty .enchantment-art { opacity: .28; filter: grayscale(1); }
.enchantment-loadout-card.is-incompatible .enchantment-art { opacity: .48; filter: grayscale(.8); }
.enchantment-loadout-status { position: relative; display: inline-block; margin-top: 14px; padding: 5px 10px; border: 1px solid color-mix(in srgb, var(--category-color), transparent 46%); border-radius: 999px; color: var(--category-color); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.enchantment-loadout-status.is-ready { animation: enchant-ready-pulse 1.15s ease-in-out infinite; }
.enchantment-loadout-status.is-active { border-color: #ff526a; color: #ff8797; box-shadow: 0 0 16px rgba(255, 82, 106, .24); }

.enchantment-card:disabled { opacity: 0.55; cursor: wait; transform: none; }
.enchantment-card-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; opacity: 0.52; pointer-events: none; }
.enchantment-category { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--category-color); font-size: 11px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; }
.enchantment-category img { width: 30px; height: 30px; object-fit: contain; }
.enchantment-art { position: relative; display: block; width: min(210px, 72%); aspect-ratio: 1; margin: 9px auto 2px; object-fit: contain; filter: saturate(1.15) contrast(1.05); }
.enchantment-card h3 { position: relative; margin: 6px 0 8px; font-size: 22px; }
.enchantment-card p { position: relative; min-height: 52px; margin: 0; color: #a9bac8; font-size: 14px; line-height: 1.45; }
.enchantment-replacement { position: relative; display: inline-block; margin-top: 14px; padding: 5px 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: #c8d5de; font-size: 11px; }
.enchantment-incompatible { position: relative; display: block; margin-top: 8px; color: #ffb15c; font-size: 11px; font-weight: 800; }
.enchantment-hotkey { position: absolute; top: 16px; left: 16px; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: var(--category-color); color: #031019; font-weight: 900; }
.enchantment-reroll { margin-top: 18px; min-width: 190px; }
.enchantment-reroll:disabled { opacity: .4; }
.enchantment-seal {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 230px;
  margin: 12px auto 0;
  padding: 10px 16px;
  border: 1px dashed rgba(126, 249, 255, .46);
  border-radius: 10px;
  background: rgba(4, 22, 31, .86);
  color: #bdf6ff;
  text-align: center;
}
.enchantment-seal strong { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.enchantment-seal span { color: #7e9aaa; font-size: 11px; }
.enchantment-seal:hover { border-color: #7ef9ff; background: rgba(8, 39, 51, .94); box-shadow: 0 0 20px rgba(56, 214, 255, .16); }
.enchantment-seal:disabled { opacity: .45; cursor: wait; }
.enchantment-seal.hidden { display: none; }
.enchantment-menu-hint { margin-top: 12px; color: #6f8798; font-size: 12px; }
.enchantment-menu-hint kbd, .enchantment-notice kbd { padding: 2px 6px; border: 1px solid rgba(129,222,255,.35); border-radius: 4px; background: #07131e; color: #aeefff; }

.enchantment-hud {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 20;
  display: flex;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid rgba(74, 214, 255, .3);
  border-radius: 12px;
  background: rgba(3, 10, 18, .86);
  pointer-events: auto;
}
.enchantment-hud.hidden { display: none; }
.enchantment-hud-slot { position: relative; width: 34px; height: 34px; border: 1px solid rgba(125,174,199,.25); border-radius: 8px; overflow: hidden; background: #08121b; }
.enchantment-hud-slot img { width: 100%; height: 100%; object-fit: contain; }
.enchantment-hud-slot.is-empty img { opacity: .28; filter: grayscale(1); }
.enchantment-hud-slot.is-active { box-shadow: 0 0 15px rgba(255, 61, 61, .7); border-color: #ff5656; }
.enchantment-hud-slot.is-ready { animation: enchant-ready-pulse 1.15s ease-in-out infinite; border-color: #75efff; }
.enchantment-hud-slot.is-incompatible { opacity: .34; filter: grayscale(1); }
.enchantment-hud-slot small { position: absolute; right: 2px; bottom: 1px; min-width: 14px; padding: 1px 3px; border-radius: 5px; background: #ef334b; color: white; font-size: 9px; font-weight: 900; }
@keyframes enchant-ready-pulse { 50% { box-shadow: 0 0 18px rgba(88, 225, 255, .7); transform: translateY(-1px); } }

.enchantment-notice {
  position: fixed;
  left: 50%;
  bottom: 30px;
  z-index: 22;
  transform: translateX(-50%);
  border: 1px solid rgba(72, 221, 255, .55);
  background: rgba(4, 18, 29, .94);
  color: #dcfaff;
  box-shadow: 0 0 28px rgba(0, 191, 255, .18);
  pointer-events: auto;
  animation: enchant-notice-pulse 1.8s ease-in-out infinite;
}
.enchantment-notice.hidden { display: none; }
@keyframes enchant-notice-pulse { 50% { box-shadow: 0 0 42px rgba(0, 191, 255, .38); } }
.enchantment-dev-core { position: fixed; right: 18px; bottom: 72px; z-index: 80; padding: 7px 10px; border: 1px dashed #ffbf47; background: #181108; color: #ffd98a; pointer-events: auto; }
.enchantment-dev-core.hidden { display: none; }

@media (max-width: 820px) {
  .enchantment-screen { padding: 8px; align-items: start; overflow-y: auto; }
  .enchantment-shell { width: calc(100% - 16px); box-sizing: border-box; margin: 8px 0; padding: 22px 12px; }
  .enchantment-choices { grid-template-columns: 1fr; }
  .enchantment-card { min-height: 280px; display: grid; grid-template-columns: 104px 1fr; grid-template-rows: auto auto 1fr auto; text-align: left; gap: 4px 12px; padding: 18px; }
  .enchantment-art { grid-row: 1 / 5; width: 104px; align-self: center; }
  .enchantment-category, .enchantment-card h3, .enchantment-card p, .enchantment-replacement, .enchantment-incompatible, .enchantment-loadout-status { grid-column: 2; justify-content: flex-start; }
  .enchantment-card h3 { margin: 2px 0; }
  .enchantment-card p { min-height: 0; }
  .enchantment-hud { right: 8px; bottom: 8px; }
}

.upgrade-count {
  margin-bottom: 8px;
  color: rgba(126, 249, 255, 0.9);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .upgrade-panel {
    top: auto;
    right: 10px;
    bottom: 84px;
    left: 10px;
    width: auto;
    max-height: 44vh;
    transform: none;
  }
}

#overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

/* Vignettes d'ecran en calques composites (voir updateScreenOverlays). */
.fx-vignette,
.fx-danger,
.fx-danger::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fx-vignette {
  background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 58%, rgba(0, 3, 8, 0.5) 100%);
}

.fx-danger {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.fx-danger::before {
  content: "";
  background: radial-gradient(ellipse 70% 65% at 50% 50%, transparent 42%, rgba(255, 26, 40, 0.38) 78%, rgba(255, 26, 40, 0.7) 100%);
}

.fx-danger.is-active::before {
  animation: dc-heartbeat 0.9s ease-in-out infinite;
}

@keyframes dc-heartbeat {
  0%, 100% { opacity: 0.6; }
  14% { opacity: 1; }
  28% { opacity: 0.7; }
  42% { opacity: 0.95; }
}

.asset-loading-screen {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at center, rgba(18, 42, 66, 0.92), rgba(3, 8, 15, 0.98));
}

.asset-loading-screen.hidden {
  display: none;
}

.asset-loading-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  min-width: min(340px, 100%);
  padding: 26px 30px 24px;
  border: 1px solid var(--dc-line);
  border-radius: 18px;
  background: var(--dc-panel);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.42);
  text-align: center;
  color: var(--dc-ink);
}

.asset-loading-emblem {
  position: relative;
  width: 58px;
  height: 58px;
  margin-bottom: 4px;
}

.asset-loading-emblem span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--dc-cyan);
  border-right-color: rgba(88, 211, 255, 0.35);
  animation: dc-rotate 1.1s linear infinite;
}

.asset-loading-emblem span + span {
  inset: 10px;
  border-top-color: var(--dc-green);
  border-right-color: rgba(63, 220, 106, 0.3);
  animation-duration: 1.7s;
  animation-direction: reverse;
}

#assetLoadingTitle {
  font-family: var(--dc-font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.asset-loading-track {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(234, 243, 255, 0.08);
}

.asset-loading-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--dc-cyan), var(--dc-green));
  box-shadow: 0 0 12px rgba(88, 211, 255, 0.6);
  transition: width 0.2s ease-out;
}

.asset-loading-progress {
  color: rgba(126, 231, 135, 0.92);
  font-family: var(--dc-font-display);
  font-size: 13px;
  letter-spacing: 0.08em;
}

#hud,
#status {
  position: absolute;
  left: 16px;
  box-sizing: border-box;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(10, 18, 30, 0.84), rgba(6, 11, 20, 0.76));
  border: 1px solid var(--dc-line);
  border-radius: 14px;
  line-height: 1.4;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(10px);
}

#hud {
  top: 16px;
  width: 256px;
  padding: 12px 14px 13px;
}

#hud.is-waiting {
  width: auto;
  color: var(--dc-ink-dim);
  font-size: 13px;
}

.hud-pilot {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Badge de niveau : l'anneau exterieur est la jauge d'XP. */
.hud-level {
  --xp: 0;
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: conic-gradient(var(--dc-cyan) calc(var(--xp) * 1turn), rgba(234, 243, 255, 0.1) 0);
  box-shadow: 0 0 16px rgba(88, 211, 255, 0.18);
  transition: box-shadow 0.3s ease;
}

.hud-level::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #13233a, #060d17 72%);
}

.hud-level span,
.hud-level strong {
  position: relative;
  font-family: var(--dc-font-display);
  line-height: 1;
}

.hud-level span {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--dc-ink-dim);
}

.hud-level strong {
  margin-top: 1px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.hud-level.is-leveling {
  animation: dc-level-pulse 1.2s var(--dc-ease-out);
}

.hud-identity {
  min-width: 0;
}

.hud-mode {
  color: var(--dc-mint);
  font-family: var(--dc-font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.hud-name {
  overflow: hidden;
  font-family: var(--dc-font-display);
  font-size: 18px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hud-meter {
  margin-top: 10px;
}

.hud-meter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: var(--dc-ink-dim);
  font-family: var(--dc-font-display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hud-meter-head strong {
  color: var(--dc-ink);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.hud-meter-head small {
  color: var(--dc-ink-faint);
  font-size: 11px;
  font-weight: 600;
}

.hud-meter-track {
  position: relative;
  height: 10px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(234, 243, 255, 0.07);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55);
}

.hud-meter-fill,
.hud-meter-chip,
.hud-meter-shield {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  border-radius: inherit;
}

.hud-meter-chip {
  background: rgba(255, 238, 205, 0.85);
  transition: width 0.45s ease-in 0.35s;
}

.hud-health .hud-meter-fill {
  background: linear-gradient(90deg, #22b455, #7ee787);
  box-shadow: 0 0 12px rgba(63, 220, 106, 0.45);
  transition: width 0.14s ease-out, background 0.3s ease;
}

.hud-health .hud-meter-fill::after,
.hud-xp .hud-meter-fill::after {
  content: "";
  position: absolute;
  inset: 1px 2px auto;
  height: 35%;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.28);
}

.hud-meter-shield {
  background: repeating-linear-gradient(-45deg, rgba(158, 203, 255, 0.9) 0 4px, rgba(98, 160, 255, 0.65) 4px 8px);
  opacity: 0.85;
  transition: width 0.2s ease-out;
}

.hud-health.is-critical .hud-meter-fill {
  background: linear-gradient(90deg, #ff2a3a, #ff7b72);
  box-shadow: 0 0 14px rgba(255, 60, 60, 0.6);
  animation: dc-critical 0.7s ease-in-out infinite alternate;
}

.hud-health.is-critical .hud-meter-head strong {
  color: #ff8a8a;
}

.hud-xp .hud-meter-track {
  height: 6px;
}

.hud-xp .hud-meter-fill {
  background: linear-gradient(90deg, var(--dc-blue), var(--dc-cyan));
  box-shadow: 0 0 10px rgba(88, 211, 255, 0.55);
  transition: width 0.35s ease-out;
}

.hud-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 11px;
}

.hud-chip {
  min-width: 0;
  padding: 6px 8px 5px;
  border-radius: 9px;
  background: rgba(234, 243, 255, 0.04);
  border: 1px solid rgba(234, 243, 255, 0.06);
}

.hud-chip > span {
  display: block;
  overflow: hidden;
  color: var(--dc-ink-faint);
  font-family: var(--dc-font-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.hud-chip strong {
  display: block;
  margin-top: 1px;
  font-family: var(--dc-font-display);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hud-chip .hud-pips {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 18px;
}

.hud-chip .hud-pips i {
  width: 10px;
  height: 11px;
  background: linear-gradient(180deg, #ff8a95, #ff3b54);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  filter: drop-shadow(0 0 4px rgba(255, 70, 90, 0.8));
}

.hud-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--dc-ink-dim);
}

.hud-value {
  color: var(--dc-ink);
  font-weight: 700;
}

.hud-buffs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}

.hud-buff {
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 211, 107, 0.35);
  background: rgba(255, 211, 107, 0.08);
  color: #ffe7a8;
  font-family: var(--dc-font-display);
  font-size: 11px;
  font-weight: 600;
  animation: dc-pop-in 0.3s var(--dc-ease-out) both;
}

#debugOverlay {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 260px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(126, 231, 135, 0.22);
  background: rgba(6, 12, 20, 0.82);
  color: rgba(240, 246, 252, 0.88);
  font: 12px/1.45 Consolas, "Courier New", monospace;
  white-space: pre;
  backdrop-filter: blur(10px);
}

#debugOverlay.hidden {
  display: none;
}

#status {
  bottom: 16px;
  max-width: 380px;
  padding: 9px 14px;
  border-left: 3px solid var(--dc-cyan);
  font-size: 13px;
  animation: dc-toast-in 0.3s var(--dc-ease-out) both;
}

.weapon-hud {
  position: absolute;
  bottom: 16px;
  left: 50%;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  transform: translateX(-50%);
  padding: 7px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(10, 18, 30, 0.8), rgba(6, 11, 20, 0.72));
  border: 1px solid var(--dc-line);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
}

.weapon-hud.hidden {
  display: none;
}

/* Emplacements de gadgets : a droite des armes, a part des bonus de la carte.
   --gadget : couleur du gadget ; --cooldown : part restante de la recharge commune. */
.gadget-hud {
  display: flex;
  align-self: stretch;
  align-items: center;
  gap: 6px;
  padding-left: 8px;
  border-left: 1px solid var(--dc-line);
}

.gadget-slot,
.touch-gadget {
  --gadget: rgba(240, 246, 252, 0.3);
  --cooldown: 0;
  position: relative;
  overflow: hidden;
}

.gadget-slot {
  display: grid;
  place-items: center;
  width: 56px;
  height: 62px;
  margin: 0;
  padding: 0;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--gadget) 55%, transparent);
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--gadget) 22%, transparent), rgba(6, 11, 20, 0.2) 70%);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--gadget) 70%, transparent);
  color: #eaf3ff;
  cursor: pointer;
  transition: opacity 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.gadget-slot img,
.touch-gadget img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gadget) 60%, transparent));
  pointer-events: none;
}

.touch-gadget img {
  width: 34px;
  height: 34px;
}

.touch-button.touch-gadget {
  width: 50px;
  height: 50px;
}

.gadget-slot img:not([src]),
.touch-gadget img:not([src]) {
  visibility: hidden;
}

.gadget-slot kbd {
  position: absolute;
  top: 4px;
  left: 4px;
  min-width: 14px;
  height: 14px;
  font-size: 9px;
}

.gadget-slot-state,
.touch-gadget small {
  position: absolute;
  right: 5px;
  bottom: 3px;
  font-family: var(--dc-font-display);
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}

/* Balayage de la recharge commune, dans le sens des aiguilles d'une montre. */
.gadget-slot-cooldown {
  position: absolute;
  inset: 0;
  background: conic-gradient(rgba(3, 7, 13, 0.72) calc(var(--cooldown) * 360deg), transparent 0);
  pointer-events: none;
}

.gadget-slot.is-empty,
.touch-gadget.is-empty {
  border-style: dashed;
  border-color: rgba(234, 243, 255, 0.16);
  background: rgba(234, 243, 255, 0.02);
  box-shadow: none;
  opacity: 0.55;
}

.gadget-slot.is-busy,
.touch-gadget.is-busy {
  animation: gadget-busy 1.2s ease-in-out infinite;
}

/* Gadget deploye depuis cette case : icone en retrait + duree restante. */
.gadget-slot.is-spent img,
.touch-gadget.is-spent img {
  opacity: 0.45;
}

.gadget-slot.is-locked,
.touch-gadget.is-locked {
  filter: grayscale(1) brightness(0.6);
}

@keyframes gadget-busy {
  50% { box-shadow: inset 0 -2px 0 var(--gadget), 0 0 16px color-mix(in srgb, var(--gadget) 55%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .gadget-slot.is-busy,
  .touch-gadget.is-busy { animation: none; }
}

.weapon-slot {
  --rarity: #c9d1d9;
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: clamp(214px, 19vw, 268px);
  min-height: 62px;
  margin: 0;
  padding: 7px 12px 9px 8px;
  border-radius: 12px;
  border: 1px solid rgba(234, 243, 255, 0.07);
  background: rgba(234, 243, 255, 0.025);
  opacity: 0.6;
  transform: scale(0.94);
  transform-origin: bottom center;
  transition: opacity 0.18s ease, transform 0.18s var(--dc-ease-out), border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.weapon-slot.is-active {
  opacity: 1;
  transform: none;
  border-color: color-mix(in srgb, var(--rarity) 60%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--rarity) 18%, transparent), rgba(6, 11, 20, 0.1) 72%);
  box-shadow: 0 0 22px color-mix(in srgb, var(--rarity) 20%, transparent), inset 0 -2px 0 var(--rarity);
}

.weapon-slot-art {
  display: grid;
  place-items: center;
  width: 62px;
  height: 44px;
}

/* Les sprites d'armes sont verticaux (canon vers le haut) : on les couche
   pour qu'ils pointent vers la droite dans la case. */
.weapon-slot-art img {
  width: 40px;
  height: 60px;
  object-fit: contain;
  transform: rotate(90deg);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--rarity) 55%, transparent));
}

.weapon-slot-art img:not([src]) {
  visibility: hidden;
}

.weapon-slot.is-empty .weapon-slot-art {
  border: 1px dashed rgba(234, 243, 255, 0.14);
  border-radius: 10px;
}

.weapon-slot-body {
  min-width: 0;
}

.weapon-slot-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.weapon-slot-top kbd {
  min-width: 15px;
  height: 15px;
  font-size: 10px;
}

.weapon-slot-rarity {
  overflow: hidden;
  color: var(--rarity);
  font-family: var(--dc-font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.weapon-slot-name {
  overflow: hidden;
  margin-top: 2px;
  font-family: var(--dc-font-display);
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weapon-slot-meta {
  margin-top: 1px;
  color: var(--dc-ink-faint);
  font-size: 11px;
  white-space: nowrap;
}

.weapon-slot-ammo {
  text-align: right;
  font-family: var(--dc-font-display);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.weapon-slot-ammo strong {
  display: block;
  font-size: 24px;
  font-weight: 700;
}

.weapon-slot-ammo small {
  color: var(--dc-ink-faint);
  font-size: 11px;
  font-weight: 600;
}

.weapon-slot.is-low .weapon-slot-ammo strong {
  color: #ff6b6b;
  animation: dc-blink 0.6s ease-in-out infinite alternate;
}

.weapon-slot.is-reloading .weapon-slot-ammo strong {
  color: var(--rarity);
  font-size: 11px;
  letter-spacing: 0.14em;
}

.weapon-slot-reload {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 4px;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
}

.weapon-slot.is-reloading .weapon-slot-reload {
  background: rgba(234, 243, 255, 0.1);
}

.weapon-slot-reload > div {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--rarity);
  box-shadow: 0 0 8px var(--rarity);
  transition: width 0.1s linear;
}

.hud-title {
  margin-bottom: 10px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(126, 231, 135, 0.88);
}

.hud-section-title {
  margin: 12px 0 6px;
  color: rgba(121, 192, 255, 0.88);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hud-bar {
  margin: 7px 0 5px;
  height: 7px;
  border-radius: 999px;
  background: rgba(240, 246, 252, 0.08);
  overflow: hidden;
}

.hud-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #58a6ff, #3fb950);
}

@media (max-width: 900px) {
  .menu-screen {
    align-items: flex-start;
    padding: 12px 0;
    overflow: auto;
  }

  #menu .menu-card {
    width: min(520px, calc(100vw - 24px));
    display: block;
  }

  .menu-card h1 {
    font-size: 34px;
  }

  .audio-row {
    grid-template-columns: 1fr;
  }

  .audio-actions,
  .end-run-actions {
    grid-template-columns: 1fr;
  }

  .profile-badge-slots,
  .profile-stat-grid,
  .leaderboard-summary {
    grid-template-columns: 1fr;
  }

  .weapon-dex-cards {
    grid-template-columns: 1fr;
  }
}

/* Compteur de piles sur une carte d'amelioration : le joueur voit qu'il
   approche du plafond avant de depenser son choix de niveau. */
.upgrade-stack {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(88, 166, 255, 0.16);
  border: 1px solid rgba(88, 166, 255, 0.34);
  color: #9ecbff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  vertical-align: 2px;
}

.relic-loadout { margin-top: 18px; text-align: left; }
.relic-loadout h3 { margin: 0 0 4px; font-size: 14px; color: #e6edf3; }
.relic-loadout-subtitle { margin: 0 0 10px; color: #8295a6; font-size: 11px; line-height: 1.4; }
.relic-loadout ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; list-style: none; padding: 0; margin: 0; }
.relic-loadout li { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--relic-color), transparent 66%); border-radius: 8px; background: linear-gradient(135deg, color-mix(in srgb, var(--relic-color), transparent 91%), #08121b 62%); font-size: 12px; }
.relic-loadout-heading { display: flex; align-items: center; gap: 7px; color: var(--relic-color); }
.relic-loadout-dot { width: 8px; height: 8px; flex: 0 0 auto; border: 1px solid var(--relic-color); border-radius: 50%; box-shadow: 0 0 10px var(--relic-color); }
.relic-loadout li > span:not(.relic-loadout-heading) { color: #b8c7d6; line-height: 1.4; }
.relic-loadout-heading strong { color: var(--relic-color); }


/* ==========================================================================
   Menu principal : hero + colonne de lancement + carte pilote + navigation.
   Tout tient dans un ecran 1440 x 900 sans defilement.
   ========================================================================== */

#menu .menu-card.menu-home {
  width: min(1140px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  grid-template-areas:
    "hero hero"
    "launch side"
    "nav nav";
  gap: 18px 30px;
  padding: 26px 30px 24px;
}

.menu-hero {
  grid-area: hero;
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(234, 243, 255, 0.06);
}

.menu-hero-copy {
  min-width: 0;
}

.menu-hero .menu-eyebrow {
  margin-bottom: 4px;
}

#menu h1 {
  margin: 0;
  font-size: clamp(38px, 4.6vw, 58px);
  letter-spacing: 0.01em;
  color: #f4f9ff;
  text-shadow: 0 0 28px rgba(88, 211, 255, 0.28);
}

.menu-title-suffix {
  background: linear-gradient(90deg, var(--dc-cyan), var(--dc-green));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

#menu #menuSubtitle {
  margin: 6px 0 0;
  font-size: 15px;
}

/* Embleme : trois anneaux, le "cercle" du jeu en miniature. */
.menu-emblem {
  position: relative;
  flex: 0 0 auto;
  width: 78px;
  height: 78px;
}

.emblem-ring,
.emblem-core {
  position: absolute;
  border-radius: 50%;
}

.emblem-ring-outer {
  inset: 0;
  border: 2px dashed rgba(88, 211, 255, 0.55);
  animation: dc-rotate 16s linear infinite;
}

.emblem-ring-inner {
  inset: 11px;
  border: 3px solid transparent;
  border-top-color: var(--dc-cyan);
  border-left-color: var(--dc-green);
  box-shadow: 0 0 18px rgba(88, 211, 255, 0.35);
  animation: dc-rotate 3.2s linear infinite reverse;
}

.emblem-core {
  inset: 29px;
  background: radial-gradient(circle, #ff8a8a, #ff3b3b 60%, #8f1022);
  box-shadow: 0 0 18px rgba(255, 59, 59, 0.8);
  animation: dc-core 2.4s ease-in-out infinite;
}

.menu-launch {
  grid-area: launch;
  min-width: 0;
}

.menu-side {
  grid-area: side;
  min-width: 0;
}

#menu .coop-picker {
  margin-bottom: 12px;
}

#menu #loadoutHint {
  margin: 0 0 12px;
}

#menu #playButton {
  margin: 0 0 16px;
  min-height: 64px;
  border-radius: 6px 18px 6px 18px;
  font-size: 21px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow: 0 0 34px rgba(88, 211, 255, 0.3), inset 0 0 18px rgba(255, 255, 255, 0.12);
  animation: dc-play-glow 2.8s ease-in-out infinite;
}

#menu #playButton::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg);
  animation: dc-shine 3.6s ease-in-out infinite;
}

#menu #playButton::after {
  content: "\25B6";
  margin-left: 12px;
  font-size: 15px;
  vertical-align: 2px;
}

.menu-settings {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--dc-line);
  border-radius: 16px;
  background: rgba(2, 8, 16, 0.45);
}

.menu-settings .language-picker,
.menu-settings .quality-picker {
  margin: 0;
}

#menu .menu-settings .language-option,
#menu .menu-settings .quality-option {
  padding: 8px 6px;
  font-size: 13px;
}

#menu .skin-picker {
  margin-bottom: 12px;
}

.local-leaderboard {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(234, 243, 255, 0.07);
  border-radius: 14px;
  background: rgba(2, 8, 16, 0.45);
}

.menu-nav {
  grid-area: nav;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid rgba(234, 243, 255, 0.06);
}

#menu .menu-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 78px;
  margin: 0;
  padding: 12px 8px 10px;
  border-radius: 14px;
  font-size: 12.5px;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-align: center;
  background: linear-gradient(180deg, rgba(88, 166, 255, 0.1), rgba(88, 166, 255, 0.03)) !important;
}

#menu .menu-tile::before {
  content: "";
  width: 24px;
  height: 24px;
  background: var(--dc-cyan);
  -webkit-mask: var(--tile-icon) center / contain no-repeat;
  mask: var(--tile-icon) center / contain no-repeat;
  transition: transform 0.2s var(--dc-ease-out), background 0.2s ease;
}

#menu .menu-tile:hover::before {
  transform: translateY(-2px) scale(1.12);
  background: #b8f6ff;
}

#menu .menu-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(88, 211, 255, 0.16);
}

.menu-tile[data-icon="leaderboard"] { --tile-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21v-6h4v6M10 21V8h4v13M15 21v-9h4v9'/%3E%3Cpath d='M12 2.5l.9 1.8 2 .3-1.4 1.4.3 2-1.8-.9-1.8.9.3-2-1.4-1.4 2-.3z' stroke-width='1.4'/%3E%3C/svg%3E"); }
.menu-tile[data-icon="profile"] { --tile-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E"); }
.menu-tile[data-icon="achievements"] { --tile-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='M8.5 14l-1.5 8 5-3 5 3-1.5-8'/%3E%3Cpath d='M12 6.2l.9 1.8 2 .3-1.4 1.4.3 2-1.8-.9-1.8.9.3-2-1.4-1.4 2-.3z' stroke-width='1.3'/%3E%3C/svg%3E"); }
.menu-tile[data-icon="threats"] { --tile-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3c-4.4 0-8 3.2-8 7.4 0 2.4 1.2 4.4 3 5.7V20h10v-3.9c1.8-1.3 3-3.3 3-5.7C20 6.2 16.4 3 12 3z'/%3E%3Ccircle cx='9' cy='11' r='1.7'/%3E%3Ccircle cx='15' cy='11' r='1.7'/%3E%3Cpath d='M10 20v-2.5M14 20v-2.5'/%3E%3C/svg%3E"); }
.menu-tile[data-icon="arsenal"] { --tile-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Cpath d='M12 2v5M12 17v5M2 12h5M17 12h5'/%3E%3Ccircle cx='12' cy='12' r='1.2' fill='black'/%3E%3C/svg%3E"); }
.menu-tile[data-icon="options"] { --tile-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h9M17 6h3M4 12h3M11 12h9M4 18h11M19 18h1'/%3E%3Ccircle cx='15' cy='6' r='2'/%3E%3Ccircle cx='9' cy='12' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E"); }

/* Reglages d'affichage (options) */
.menu-card .audio-row {
  color: var(--dc-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}

.menu-card .toggle-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
}

.toggle-button strong {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(234, 243, 255, 0.08);
  color: var(--dc-ink-dim);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.toggle-button[aria-pressed="true"] strong {
  background: rgba(88, 211, 255, 0.22);
  color: #d8f8ff;
}

.visual-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.toggle-button[aria-pressed="true"] {
  border-color: rgba(88, 211, 255, 0.55) !important;
  background: linear-gradient(180deg, rgba(88, 211, 255, 0.2), rgba(63, 220, 138, 0.08)) !important;
  box-shadow: inset 0 -2px 0 var(--dc-cyan);
}

/* Barre de boss / Nemesis */
.nemesis-bar {
  font-family: var(--dc-font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: 10px;
  box-shadow: 0 0 30px rgba(255, 60, 60, 0.18);
}

.nemesis-health {
  height: 9px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.nemesis-health > div {
  box-shadow: 0 0 12px rgba(255, 90, 80, 0.6);
}

/* Panneau d'amelioration : entree glissee, cartes plus lisibles. */
.upgrade-panel:not(.hidden) {
  animation: dc-panel-in 0.35s var(--dc-ease-out) both;
}

.upgrade-panel {
  border-color: rgba(255, 211, 107, 0.34);
  box-shadow: 0 0 36px rgba(255, 211, 107, 0.12), 0 20px 60px rgba(0, 0, 0, 0.45);
}

.upgrade-panel .menu-eyebrow {
  color: var(--dc-gold);
}

.upgrade-panel-header h2 {
  font-family: var(--dc-font-display);
  font-weight: 700;
}

.upgrade-option {
  font-family: var(--dc-font-body);
  animation: dc-pop-in 0.32s var(--dc-ease-out) both;
}

.upgrade-option:nth-child(2) { animation-delay: 0.05s; }
.upgrade-option:nth-child(3) { animation-delay: 0.1s; }
.upgrade-option:nth-child(4) { animation-delay: 0.15s; }

.upgrade-option:hover {
  border-color: rgba(255, 211, 107, 0.5);
  background: linear-gradient(90deg, rgba(255, 211, 107, 0.14), rgba(88, 166, 255, 0.06));
  box-shadow: 0 0 20px rgba(255, 211, 107, 0.14);
}

.upgrade-name {
  font-family: var(--dc-font-display);
  font-size: 15px;
}

.upgrade-hotkey {
  font-family: var(--dc-font-display);
}

/* Ecrans de fin de run */
#gameOver .menu-card,
#victory .menu-card {
  width: min(560px, calc(100vw - 32px));
  text-align: center;
}

#gameOver .menu-card {
  border-color: rgba(255, 74, 74, 0.32);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6), 0 0 60px rgba(255, 60, 60, 0.12);
}

#gameOver .menu-card::before {
  background: linear-gradient(90deg, transparent, rgba(255, 74, 74, 0.8), transparent);
}

#gameOver .menu-eyebrow {
  color: #ff8a8a;
}

#gameOverTitle {
  font-size: clamp(40px, 6vw, 60px);
  text-transform: uppercase;
  color: #ffd6d6;
  text-shadow: 0 0 30px rgba(255, 60, 60, 0.55);
  animation: dc-title-slam 0.6s var(--dc-ease-out) both 0.1s;
}

#victory .menu-card {
  border-color: rgba(255, 211, 107, 0.34);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6), 0 0 60px rgba(255, 211, 107, 0.14);
}

#victory .menu-card::before {
  background: linear-gradient(90deg, transparent, rgba(255, 211, 107, 0.85), transparent);
}

#victory .menu-eyebrow {
  color: var(--dc-gold);
}

#victoryTitle {
  font-size: clamp(40px, 6vw, 60px);
  text-transform: uppercase;
  color: #fff3cf;
  text-shadow: 0 0 30px rgba(255, 211, 107, 0.6);
  animation: dc-title-slam 0.6s var(--dc-ease-out) both 0.1s;
}

#gameOverText,
#victoryText {
  text-align: left;
}

.run-recap-score {
  animation: dc-pop-in 0.5s var(--dc-ease-out) both 0.3s;
}

.run-recap-score > strong {
  font-family: var(--dc-font-display);
  text-shadow: 0 0 24px rgba(126, 231, 135, 0.45);
}

.run-recap-section {
  animation: dc-rise-in 0.45s var(--dc-ease-out) both;
}

.run-recap-section:nth-of-type(2) { animation-delay: 0.45s; }
.run-recap-section:nth-of-type(3) { animation-delay: 0.55s; }
.run-recap-section:nth-of-type(4) { animation-delay: 0.65s; }

.summary-grid strong {
  font-family: var(--dc-font-display);
  font-variant-numeric: tabular-nums;
}

.dex-entry-title,
.achievement-card-title,
.leaderboard-rank,
.player-profile-name,
.room-title,
.dex-section-title,
.options-section-title {
  font-family: var(--dc-font-display);
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes dc-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes dc-rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dc-core {
  0%, 100% { transform: scale(0.86); box-shadow: 0 0 12px rgba(255, 59, 59, 0.6); }
  50% { transform: scale(1.08); box-shadow: 0 0 24px rgba(255, 59, 59, 0.95); }
}

@keyframes dc-breathe {
  0%, 100% { transform: scale(0.92); opacity: 0.7; }
  50% { transform: scale(1.08); opacity: 0.95; }
}

@keyframes dc-hover {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}

@keyframes dc-card-in {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

@keyframes dc-play-glow {
  0%, 100% { box-shadow: 0 0 26px rgba(88, 211, 255, 0.24), inset 0 0 18px rgba(255, 255, 255, 0.1); }
  50% { box-shadow: 0 0 44px rgba(63, 220, 138, 0.36), inset 0 0 18px rgba(255, 255, 255, 0.16); }
}

@keyframes dc-shine {
  0%, 55% { left: -40%; }
  85%, 100% { left: 120%; }
}

@keyframes dc-banner-in {
  0% { opacity: 0; transform: translateX(-50%) translateY(-18px) scaleX(0.6); filter: brightness(2.2); }
  60% { opacity: 1; transform: translateX(-50%) translateY(2px) scaleX(1.03); filter: brightness(1.3); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scaleX(1); filter: none; }
}

@keyframes dc-banner-out {
  to { opacity: 0; transform: translateX(-50%) translateY(-10px) scaleX(0.94); }
}

@keyframes dc-banner-sweep {
  to { transform: translateX(120%); }
}

@keyframes dc-glitch {
  0% { transform: translateX(-6px); text-shadow: 3px 0 rgba(255, 0, 80, 0.8), -3px 0 rgba(0, 220, 255, 0.8); }
  33% { transform: translateX(4px); text-shadow: -3px 0 rgba(255, 0, 80, 0.8), 3px 0 rgba(0, 220, 255, 0.8); }
  66% { transform: translateX(-2px); }
  100% { transform: none; }
}

@keyframes dc-level-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 211, 107, 0.9); transform: scale(1); }
  30% { box-shadow: 0 0 0 10px rgba(255, 211, 107, 0), 0 0 30px rgba(255, 211, 107, 0.9); transform: scale(1.14); }
  100% { box-shadow: 0 0 16px rgba(88, 211, 255, 0.18); transform: scale(1); }
}

@keyframes dc-critical {
  from { opacity: 0.75; }
  to { opacity: 1; }
}

@keyframes dc-blink {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

@keyframes dc-pop-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: none; }
}

@keyframes dc-rise-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes dc-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes dc-panel-in {
  from { opacity: 0; transform: translate(24px, -50%); }
  to { opacity: 1; transform: translate(0, -50%); }
}

@keyframes dc-title-slam {
  0% { opacity: 0; transform: scale(1.6); letter-spacing: 0.3em; }
  60% { opacity: 1; transform: scale(0.96); }
  100% { opacity: 1; transform: none; }
}

/* ==========================================================================
   Adaptation ecrans et accessibilite
   ========================================================================== */

@media (max-height: 820px) and (min-width: 901px) {
  #menu .menu-card.menu-home {
    gap: 12px 26px;
    padding: 18px 26px;
  }

  .menu-emblem {
    width: 60px;
    height: 60px;
  }

  .emblem-ring-inner { inset: 8px; }
  .emblem-core { inset: 22px; }

  .skin-preview-stage {
    height: 112px;
  }

  #menu .menu-tile {
    min-height: 64px;
    padding: 9px 6px 8px;
  }
}

@media (max-width: 900px) {
  #menu .menu-card.menu-home {
    display: block;
    width: min(560px, calc(100vw - 24px));
    padding: 20px 18px;
  }

  .menu-hero {
    margin-bottom: 16px;
  }

  .menu-side {
    margin-top: 16px;
  }

  .menu-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 16px;
  }

  .visual-settings {
    grid-template-columns: 1fr;
  }

  .weapon-slot {
    width: min(44vw, 230px);
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }

  .weapon-slot-art {
    width: 44px;
  }

  #hud {
    width: 220px;
  }
}

@media (max-width: 760px) {
  .upgrade-panel:not(.hidden) {
    animation-name: dc-rise-in;
  }
}

@media (max-width: 560px) {
  .menu-card .coop-mode-option {
    padding: 9px 2px;
    font-size: 12px;
    letter-spacing: 0;
  }

  .menu-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .menu-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .weapon-slot-meta {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Les cartes cliquables (succes, runs, archives) gardent la police de
   lecture pour leurs descriptions ; seuls les titres passent en affichage. */
.menu-card .achievement-card,
.menu-card .leaderboard-run,
.menu-card .dex-entry,
.upgrade-option,
.enchantment-card {
  font-family: var(--dc-font-body);
  letter-spacing: normal;
}

/* Serie de kills (sous la minimap) */
.streak-hud {
  --streak: var(--dc-cyan);
  position: absolute;
  top: 208px;
  right: 18px;
  box-sizing: border-box;
  width: 176px;
  padding: 8px 12px 10px;
  border: 1px solid color-mix(in srgb, var(--streak) 45%, transparent);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(10, 18, 30, 0.84), rgba(6, 11, 20, 0.76));
  box-shadow: 0 0 22px color-mix(in srgb, var(--streak) 22%, transparent);
  text-align: center;
  transform-origin: top right;
  animation: dc-pop-in 0.25s var(--dc-ease-out) both;
}

.streak-hud[data-tier="1"] { --streak: var(--dc-gold); }
.streak-hud[data-tier="2"] { --streak: #ff9a3c; }
.streak-hud[data-tier="3"] { --streak: #ff4a6a; }

.streak-count {
  display: block;
  color: var(--streak);
  font: 700 34px/1 var(--dc-font-display);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px color-mix(in srgb, var(--streak) 70%, transparent);
}

.streak-hud.is-bump .streak-count {
  animation: dc-streak-bump 0.28s var(--dc-ease-out);
}

.streak-hud.is-milestone {
  animation: dc-streak-milestone 0.9s var(--dc-ease-out);
}

.streak-label {
  display: block;
  margin-top: 2px;
  color: var(--dc-ink-dim);
  font: 600 10px var(--dc-font-display);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.streak-timer {
  height: 4px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(234, 243, 255, 0.08);
}

.streak-timer > div {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--streak);
  box-shadow: 0 0 8px var(--streak);
}

@keyframes dc-streak-bump {
  0% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

@keyframes dc-streak-milestone {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--streak) 90%, transparent); }
  40% { box-shadow: 0 0 40px 6px color-mix(in srgb, var(--streak) 60%, transparent); }
  100% { box-shadow: 0 0 22px color-mix(in srgb, var(--streak) 22%, transparent); }
}

/* Fin de run : record et relance */
.run-recap-record {
  margin-top: 6px;
  color: var(--dc-ink-dim);
  font: 600 12px var(--dc-font-display);
  letter-spacing: 0.06em;
}

.run-recap-record.is-new {
  justify-self: center;
  padding: 4px 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffd36b, #ff9a3c);
  color: #1c1204;
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  box-shadow: 0 0 24px rgba(255, 211, 107, 0.55);
  animation: dc-record 1.6s ease-in-out 0.9s infinite, dc-pop-in 0.5s var(--dc-ease-out) 0.7s both;
}

@keyframes dc-record {
  0%, 100% { box-shadow: 0 0 18px rgba(255, 211, 107, 0.45); }
  50% { box-shadow: 0 0 34px rgba(255, 211, 107, 0.85); }
}

.end-run-hint {
  margin: 12px 0 0 !important;
  color: var(--dc-ink-faint) !important;
  font-size: 12px;
  text-align: center;
}

@media (max-width: 900px) {
  .streak-hud {
    top: 150px;
    width: 130px;
  }

  .streak-count {
    font-size: 26px;
  }
}

/* Les actions de fin de run restent visibles meme si le recap defile :
   "Rejouer" ne doit jamais etre sous la ligne de flottaison. */
#gameOver .end-run-actions,
#victory .end-run-actions {
  position: sticky;
  bottom: -28px;
  z-index: 2;
  margin: 8px -28px -28px;
  padding: 14px 28px 16px;
  background: linear-gradient(180deg, rgba(6, 11, 20, 0), rgba(6, 11, 20, 0.96) 26%);
}

#gameOver #playAgainButton,
#victory #victoryPlayAgainButton {
  grid-column: 1 / -1;
  min-height: 52px;
  font-size: 17px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.end-run-actions .end-run-hint {
  grid-column: 1 / -1;
  margin: 2px 0 0 !important;
}

/* Acces au build (touche B) : bien visible sous le panneau joueur. */
.hud-build {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 7px 9px;
  border: 1px solid rgba(74, 214, 255, 0.45);
  border-radius: 10px;
  background: rgba(0, 170, 255, 0.1);
  color: #dcfaff;
  font-family: var(--dc-font-display);
  font-size: 12.5px;
  font-weight: 700;
}
.hud-build kbd {
  min-width: 18px;
  padding: 2px 6px;
  border: 1px solid rgba(129, 222, 255, 0.6);
  border-radius: 5px;
  background: #07131e;
  color: #aeefff;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  box-shadow: 0 2px 0 rgba(129, 222, 255, 0.35);
}
.hud-build-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-build-icons { display: flex; gap: 3px; }
.hud-build-icons img { width: 20px; height: 20px; object-fit: contain; filter: drop-shadow(0 0 4px rgba(255, 200, 120, 0.5)); }
.hud-build.has-pending { border-color: #75efff; animation: enchant-notice-pulse 1.8s ease-in-out infinite; }

/* Contrat de secteur (sous la minimap). Le dore est reserve aux contrats. */
.contract-hud {
  --contract: #ffc24a;
  position: absolute;
  top: 208px;
  right: 18px;
  z-index: 12;
  box-sizing: border-box;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: 236px;
  padding: 9px 11px 10px 9px;
  border: 1px solid color-mix(in srgb, var(--contract) 50%, transparent);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(22, 16, 6, 0.86), rgba(8, 10, 16, 0.8));
  box-shadow: 0 0 22px color-mix(in srgb, var(--contract) 16%, transparent);
  color: var(--dc-ink);
  font-family: var(--dc-font-display);
  pointer-events: none;
  animation: dc-pop-in 0.25s var(--dc-ease-out) both;
}
.contract-hud.hidden { display: none; }
.contract-hud[data-tier="silver"] { --tier: #d6e2ee; }
.contract-hud[data-tier="bronze"] { --tier: #e0a070; }
.contract-hud[data-tier="gold"] { --tier: #ffd36b; }
.contract-hud[data-state="paused"] { opacity: 0.72; padding-bottom: 8px; }
.contract-hud[data-state="failed"],
.contract-hud[data-state="expired"],
.contract-hud[data-state="interrupted"] { --contract: #8b949e; }
.contract-hud[data-state="success"] { box-shadow: 0 0 30px rgba(255, 194, 74, 0.38); }
.contract-icon { flex: 0 0 auto; width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(255, 194, 74, 0.45)); }
.contract-hud[data-state="paused"] .contract-icon { width: 30px; height: 30px; }
.contract-body { flex: 1; min-width: 0; }
.contract-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.contract-kicker { color: var(--tier, var(--contract)); font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; }
.contract-streak { padding: 1px 6px; border-radius: 999px; background: rgba(255, 194, 74, 0.16); color: #ffe39a; font-size: 10px; font-weight: 700; }
.contract-title { display: block; margin-top: 2px; overflow: hidden; color: #ffe39a; font-size: 15px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.contract-title small { color: var(--dc-ink-dim); font-size: 11px; font-weight: 600; }
.contract-objective { display: flex; align-items: baseline; gap: 6px; margin-top: 5px; font-size: 12px; color: var(--dc-ink-dim); }
.contract-objective span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contract-objective b { color: var(--dc-ink); font-size: 14px; font-variant-numeric: tabular-nums; }
.contract-time { min-width: 26px; color: #ffe39a; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.contract-timer-row { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.contract-timer { position: relative; flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); }
.contract-star-marker { position: absolute; top: 50%; transform: translate(-50%, -55%); color: #fff4c8; font-size: 16px; line-height: 1; text-shadow: 0 0 2px #000, 0 0 3px #000, 0 1px 3px #000, 0 0 10px rgba(255, 211, 107, 0.9); }
.contract-timer i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #ff9a1f, var(--contract)); transition: width 0.2s linear; }
.contract-timer.is-charge i { background: linear-gradient(90deg, var(--contract), #fff2c8); }
.contract-timer.is-urgent i { background: #ff5a4a; animation: contract-urgent 0.6s ease-in-out infinite; }
.contract-detail { margin-top: 4px; color: var(--dc-ink-faint); font-size: 11px; line-height: 1.3; }
.contract-star { margin-top: 4px; color: #ffe39a; font-size: 11px; font-weight: 600; }
.contract-star.is-lost { color: var(--dc-ink-faint); text-decoration: line-through; }
.contract-paused { margin-top: 3px; color: var(--dc-ink-dim); font-size: 11px; }
.contract-result { margin-top: 4px; color: var(--contract); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.contract-reward { margin-top: 2px; color: #ffe39a; font-size: 18px; font-weight: 700; }
.contract-star-mark { color: #ffd36b; text-shadow: 0 0 10px rgba(255, 211, 107, 0.8); }
@keyframes contract-urgent { 50% { opacity: 0.45; } }

/* Serie de kills et contrat se partagent la colonne : la serie passe dessous. */
#contractHud:not(.hidden) ~ #streakHud { top: 356px; }

.threat-announcement.is-contract { --accent: #ffc24a; }
.threat-announcement.is-contract-failed { --accent: #8b949e; }

@media (max-width: 900px) {
  .contract-hud { top: 150px; width: 200px; }
  .contract-icon { width: 34px; height: 34px; }
  #contractHud:not(.hidden) ~ #streakHud { top: 290px; }
}

/* ENSŌ : arrivee (etape 1). Calques DOM au-dessus du canvas, jamais cliquables. */
.enso-layer { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.enso-layer.hidden { display: none; }
.enso-line {
  position: absolute;
  left: 50%;
  bottom: 21%;
  transform: translateX(-50%);
  width: min(760px, calc(100vw - 48px));
  margin: 0;
  color: #ece6da;
  font: 600 clamp(20px, 2.6vw, 32px)/1.3 "Times New Roman", Georgia, serif;
  letter-spacing: 0.03em;
  text-align: center;
  text-shadow: 0 0 2px #000, 0 0 14px rgba(0, 0, 0, 0.9), 2px 0 0 rgba(210, 58, 52, 0.45), -2px 0 0 rgba(236, 230, 218, 0.25);
  animation: enso-jitter 0.18s steps(2) infinite;
  transition: opacity 0.5s ease;
}
.enso-line.is-fading { opacity: 0; }
.enso-name {
  position: absolute;
  left: 50%;
  bottom: 9%;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 6px;
  opacity: 0;
  color: #ece6da;
  text-align: center;
  transition: opacity 0.6s ease;
}
.enso-name strong { font: 700 clamp(54px, 8.5vw, 118px)/0.9 "Times New Roman", Georgia, serif; letter-spacing: 0.12em; text-shadow: 0 0 30px rgba(236, 230, 218, 0.35); }
.enso-name span { color: rgba(236, 230, 218, 0.72); font: 500 clamp(15px, 1.6vw, 20px) "Times New Roman", Georgia, serif; letter-spacing: 0.3em; text-transform: uppercase; }
.enso-name.is-visible { opacity: 1; animation: enso-name-in 0.5s steps(4) both; }
.enso-cracks {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
  background:
    linear-gradient(112deg, transparent 48.6%, rgba(236, 230, 218, 0.55) 49%, transparent 49.4%),
    linear-gradient(64deg, transparent 58.7%, rgba(236, 230, 218, 0.4) 59%, transparent 59.3%),
    linear-gradient(158deg, transparent 22.8%, rgba(236, 230, 218, 0.45) 23%, transparent 23.3%),
    linear-gradient(28deg, transparent 80.8%, rgba(236, 230, 218, 0.35) 81%, transparent 81.3%),
    linear-gradient(141deg, transparent 67.8%, rgba(236, 230, 218, 0.3) 68%, transparent 68.3%);
}
body.enso-hud-1 .enso-cracks { opacity: 1; }
/* Dans le noir, plus rien ne doit passer devant ENSŌ : ni fissures, ni armes. */
body[data-enso-stage="void"] #weaponHud,
body[data-enso-stage="reveal"] #weaponHud { opacity: 0; transition: opacity 0.4s ease; }
body[data-enso-stage="void"] .enso-cracks,
body[data-enso-stage="reveal"] .enso-cracks,
body[data-enso-stage="combat"] .enso-cracks { opacity: 0; transition-duration: 0.3s; }
/* Pendant ENSŌ, le HUD se brise : l'annonce, le contrat et la serie disparaissent. */
body.enso-active #contractHud,
body.enso-active #streakHud,
body.enso-active #threatAnnouncement { display: none !important; }
body.enso-hud-1 #hud { animation: enso-hud-jitter 0.25s steps(2) infinite; }
body.enso-hud-2 #hud { clip-path: polygon(0 0, 78% 0, 62% 100%, 0 100%); opacity: 0.7; }
body.enso-hud-2 #hud .hud-build { display: none; }
/* Etape 2 : le combat. Barre d'integrite fine en haut, rien ne passe dessus. */
.enso-integrity {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(560px, calc(100vw - 32px));
  opacity: 0;
  transition: opacity 0.8s ease;
  color: #ece6da;
  z-index: 2;
}
.enso-integrity.is-visible { opacity: 1; }
.enso-integrity-label { font: 700 13px/1 "Times New Roman", Georgia, serif; letter-spacing: 0.3em; }
.enso-integrity strong { min-width: 48px; text-align: right; font: 600 14px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.enso-integrity-bar { position: relative; flex: 1; height: 6px; background: rgba(0, 0, 0, 0.55); outline: 1px solid rgba(236, 230, 218, 0.35); }
.enso-integrity-bar i { position: absolute; inset: 0 auto 0 0; width: 100%; background: #ece6da; transition: width 0.2s linear, background 0.4s ease; }
.enso-integrity[data-form="rien"] .enso-integrity-bar i { background: #6d675e; }
.enso-integrity-bar b { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: #0b0a09; outline: 1px solid rgba(236, 230, 218, 0.5); }
.enso-status {
  position: absolute;
  left: 50%;
  bottom: 132px;
  transform: translateX(-50%);
  width: min(620px, calc(100vw - 32px));
  text-align: center;
  margin: 0;
  color: rgba(236, 230, 218, 0.85);
  font: 500 16px/1.3 "Times New Roman", Georgia, serif;
  letter-spacing: 0.08em;
  text-shadow: 0 0 10px #000;
}
/* Etape 3 : recap commun, au-dessus du noir. */
.enso-recap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px));
  display: none;
  gap: 14px;
  justify-items: center;
  color: #ece6da;
  text-align: center;
  pointer-events: auto;
}
.enso-recap.is-visible { display: grid; animation: enso-recap-in 0.6s ease both; }
.enso-recap-title { margin: 0; color: rgba(236, 230, 218, 0.6); font: 600 12px/1 system-ui, sans-serif; letter-spacing: 0.28em; text-transform: uppercase; }
.enso-recap h2 { margin: 0; font: 700 clamp(34px, 5vw, 56px)/1 "Times New Roman", Georgia, serif; letter-spacing: 0.08em; }
.enso-recap-bar { position: relative; width: 100%; height: 10px; background: rgba(236, 230, 218, 0.1); outline: 1px solid rgba(236, 230, 218, 0.35); }
.enso-recap-bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: #ece6da; transition: width 1.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.enso-recap-bar b { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: rgba(236, 230, 218, 0.55); }
.enso-recap-meta { display: flex; gap: 16px; align-items: baseline; margin: 0; }
.enso-recap-meta strong { font: 700 28px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.enso-recap-meta span { color: rgba(236, 230, 218, 0.7); }
.enso-recap-players { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 6px; }
.enso-recap-players li { display: grid; grid-template-columns: 1fr auto auto 20px; gap: 14px; padding: 8px 12px; border: 1px solid rgba(236, 230, 218, 0.18); font: 500 14px/1.2 system-ui, sans-serif; text-align: left; font-variant-numeric: tabular-nums; }
.enso-recap-players li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enso-recap-players li.is-ready { border-color: rgba(236, 230, 218, 0.6); }
.enso-recap-ready { padding: 10px 26px; border: 1px solid #ece6da; background: transparent; color: #ece6da; font: 600 14px/1 system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.enso-recap-ready:hover { background: rgba(236, 230, 218, 0.1); }
.enso-recap.is-ready .enso-recap-ready { opacity: 0.4; pointer-events: none; }
.enso-recap-timer { margin: 0; color: rgba(236, 230, 218, 0.6); font: 500 13px/1 system-ui, sans-serif; }
body[data-enso-state="recap"] #hud,
body[data-enso-state="recap"] #weaponHud,
body[data-enso-state="recap"] .enso-integrity,
body[data-enso-state="recap"] .enso-line { opacity: 0 !important; }
@keyframes enso-recap-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); } }
/* Etape 5 : « REGLE : … » s'ecrit en grand, et l'Effacement. */
.enso-rule {
  position: absolute;
  left: 50%;
  top: 24%;
  transform: translate(-50%, -50%);
  margin: 0;
  opacity: 0;
  color: #ece6da;
  font: 700 clamp(28px, 4.4vw, 54px)/1.1 "Times New Roman", Georgia, serif;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 3px #000, 0 0 18px rgba(0, 0, 0, 0.9), 3px 0 0 rgba(210, 58, 52, 0.55);
  transition: opacity 0.2s ease;
}
.enso-rule.is-visible { opacity: 1; }
body.enso-erasing .enso-integrity { animation: enso-flicker 0.12s steps(2) infinite; }
body.enso-erased .enso-integrity,
body.enso-erased .enso-line { opacity: 0 !important; transition: opacity 0.3s ease; }
@keyframes enso-flicker { 50% { opacity: 0.2; transform: translate(calc(-50% + 3px), 1px); } }
/* Etape 6 : modificateurs de realite, annonces sous son nom. */
.enso-modifiers {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  margin: 0;
  opacity: 0;
  color: rgba(236, 230, 218, 0.85);
  font: 600 clamp(13px, 1.4vw, 17px)/1.2 system-ui, sans-serif;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-shadow: 0 0 10px #000;
  transition: opacity 0.5s ease;
}
.enso-modifiers.is-visible { opacity: 1; }
/* HUD etape 3 (1:50) : il ne reste que l'integrite, les traits de vie et les munitions au viseur. */
body.enso-hud-3 #hud,
body.enso-hud-3 #weaponHud { opacity: 0 !important; transition: opacity 0.6s ease; }
@keyframes enso-jitter { 50% { transform: translate(calc(-50% + 1px), -1px); } }
/* Debut du combat d'ENSŌ : le tableau de bord se corrompt puis se brise. */
body.enso-hud-broken #hud { pointer-events: none !important; animation: enso-hud-break 1.35s steps(1, end) forwards !important; }
@keyframes enso-hud-break {
  0% { transform: translate(0, 0); filter: none; clip-path: none; opacity: 1; }
  6% { transform: translate(6px, -2px) skewX(-8deg); filter: drop-shadow(-4px 0 rgba(255, 40, 60, 0.9)) drop-shadow(4px 0 rgba(60, 230, 255, 0.9)); }
  12% { transform: translate(-10px, 1px); clip-path: polygon(0 0, 100% 0, 100% 22%, 0 22%, 0 40%, 100% 40%, 100% 100%, 0 100%); filter: invert(1) hue-rotate(160deg); }
  18% { transform: translate(14px, 0) skewX(14deg); clip-path: polygon(0 10%, 100% 10%, 100% 38%, 0 38%, 0 62%, 100% 62%, 100% 80%, 0 80%); filter: drop-shadow(-8px 0 rgba(255, 40, 60, 1)) drop-shadow(8px 0 rgba(60, 230, 255, 1)) contrast(2); }
  24% { opacity: 0.15; transform: translate(-4px, 2px); }
  30% { opacity: 1; transform: translate(-22px, -3px) scaleX(1.08); clip-path: polygon(0 0, 64% 0, 64% 30%, 30% 30%, 30% 58%, 100% 58%, 100% 72%, 0 72%); filter: grayscale(1) brightness(1.8); }
  38% { transform: translate(18px, 4px) skewX(-18deg); clip-path: polygon(0 44%, 100% 44%, 100% 56%, 0 56%); filter: drop-shadow(-10px 0 rgba(255, 40, 60, 1)) drop-shadow(10px 0 rgba(60, 230, 255, 1)); }
  46% { opacity: 0.35; transform: translate(-6px, 0); clip-path: polygon(0 0, 100% 0, 100% 16%, 0 16%, 0 70%, 100% 70%, 100% 84%, 0 84%); filter: invert(1); }
  54% { opacity: 1; transform: translate(10px, -6px) rotate(-1.5deg); clip-path: polygon(8% 20%, 92% 12%, 70% 52%, 100% 90%, 20% 76%, 0 48%); filter: sepia(1) saturate(4) hue-rotate(-40deg) contrast(1.6); }
  64% { opacity: 0.1; }
  70% { opacity: 0.9; transform: translate(-30px, 2px) skewX(24deg) scaleY(0.6); clip-path: polygon(0 46%, 100% 46%, 100% 54%, 0 54%); filter: brightness(3) drop-shadow(-12px 0 rgba(255, 40, 60, 1)) drop-shadow(12px 0 rgba(60, 230, 255, 1)); }
  80% { opacity: 0.8; transform: translate(0, 0) scale(1.4, 0.04); clip-path: none; filter: brightness(4); }
  90% { opacity: 0.4; transform: translate(40px, 0) scale(0.2, 0.02); filter: brightness(5); }
  100% { opacity: 0; visibility: hidden; transform: scale(0, 0); filter: none; }
}
@keyframes enso-hud-jitter { 50% { transform: translate(1px, -1px); } }
@keyframes enso-name-in { 0% { opacity: 0; letter-spacing: 0.6em; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .enso-line, body.enso-hud-1 #hud { animation: none; }
  body.enso-hud-broken #hud { animation: none !important; opacity: 0; visibility: hidden; }
}

/* Salle : l'action attendue (« Je suis pret » ou « Lancer ») est aussi visible que Jouer. */
#menu .room-controls {
  grid-template-columns: minmax(0, 1fr);
}

#menu .room-action-button {
  min-height: 58px;
  border-radius: 6px 16px 6px 16px;
  font-size: 18px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#menu .room-action-button.is-call-to-action {
  box-shadow: 0 0 34px rgba(88, 211, 255, 0.35), inset 0 0 18px rgba(255, 255, 255, 0.12);
  animation: dc-play-glow 2.8s ease-in-out infinite;
}

#menu .room-action-button.is-ready {
  background: rgba(126, 231, 135, 0.14);
  color: #7ee787;
  border: 1px solid rgba(126, 231, 135, 0.55);
  font-size: 15px;
  letter-spacing: 0.08em;
}

/* ------------------------------------------------------------------ */
/* Telephone / tablette : commandes tactiles et HUD compact.          */
/* ------------------------------------------------------------------ */
body.is-touch {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  height: 100dvh;
}

body.is-touch #game,
.touch-controls,
.touch-zone {
  touch-action: none;
}

.touch-controls {
  position: fixed;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  font-family: var(--dc-font-display, "Chakra Petch", system-ui, sans-serif);
}

.touch-controls.hidden {
  display: none;
}

.touch-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: auto;
}

.touch-zone-move {
  left: 0;
  width: 50%;
}

.touch-zone-aim {
  right: 0;
  width: 50%;
}

/* Sticks : anneau technique (lignes et graduations comme le menu), visibles en
   « fantome » au repos pour que l'on comprenne ou poser les pouces. */
.touch-stick {
  position: fixed;
  left: 0;
  top: 0;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  border: 1.5px solid rgba(88, 211, 255, 0.5);
  background: radial-gradient(circle, rgba(8, 20, 34, 0.15) 45%, rgba(8, 20, 34, 0.5) 100%);
  box-shadow: 0 0 22px rgba(88, 211, 255, 0.18);
  opacity: 0.34;
  transition: opacity 0.14s ease;
  pointer-events: none;
  --tick: rgba(88, 211, 255, 0.55);
}

/* Graduations sur le pourtour, comme les cadrans du menu. */
.touch-stick::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, var(--tick) 0 2deg, transparent 2deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 78%, #000 79%);
  mask: radial-gradient(circle, transparent 78%, #000 79%);
}

.touch-stick.is-active {
  opacity: 1;
}

.touch-stick span {
  position: absolute;
  left: 36px;
  top: 36px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(178, 244, 255, 0.9);
  background: radial-gradient(circle at 35% 30%, rgba(178, 244, 255, 0.55), rgba(24, 92, 128, 0.55));
  box-shadow: 0 0 16px rgba(88, 211, 255, 0.6);
}

.touch-stick-aim {
  border-color: rgba(255, 184, 107, 0.55);
  box-shadow: 0 0 22px rgba(255, 150, 60, 0.16);
  --tick: rgba(255, 184, 107, 0.6);
}

.touch-stick-aim span {
  border-color: rgba(255, 224, 170, 0.95);
  background: radial-gradient(circle at 35% 30%, rgba(255, 214, 150, 0.6), rgba(150, 70, 20, 0.55));
  box-shadow: 0 0 16px rgba(255, 160, 70, 0.6);
}

.touch-stick em {
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  transform: translateX(-50%);
  white-space: nowrap;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(214, 240, 255, 0.85);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: opacity 0.3s ease;
}

body.touch-tutorial .touch-stick em,
body.touch-tutorial .touch-stick {
  opacity: 0.85;
}

body.touch-tutorial .touch-stick {
  animation: dc-touch-hint 1.6s ease-in-out infinite;
}

@keyframes dc-touch-hint {
  0%, 100% { box-shadow: 0 0 10px rgba(88, 211, 255, 0.15); }
  50% { box-shadow: 0 0 30px rgba(88, 211, 255, 0.55); }
}

.touch-action-buttons {
  position: absolute;
  right: calc(12px + env(safe-area-inset-right));
  bottom: calc(12px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 50px repeat(2, 58px);
  grid-template-areas:
    "gadget0 interact reload"
    "gadget1 swap .";
  align-items: end;
  gap: 10px;
  pointer-events: none;
}

.touch-top-buttons {
  position: absolute;
  top: calc(8px + env(safe-area-inset-top));
  left: 50%;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
  pointer-events: none;
}

/* Boutons : meme langage que les boutons du menu (coins taillés, liseré cyan). */
.touch-button {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  width: 58px;
  height: 58px;
  margin: 0;
  padding: 0;
  border-radius: 6px 16px 6px 16px;
  border: 1px solid rgba(88, 211, 255, 0.42);
  background: linear-gradient(160deg, rgba(14, 30, 48, 0.82), rgba(5, 11, 20, 0.78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 18px rgba(0, 0, 0, 0.35);
  color: #d6f0ff;
  pointer-events: auto;
  touch-action: none;
  opacity: 0.88;
  transition: transform 0.08s ease, background 0.12s ease;
}

.touch-button svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.touch-button small {
  max-width: 54px;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(178, 244, 255, 0.8);
}

.touch-button[data-touch-action="interact"] { grid-area: interact; }
.touch-button[data-touch-action="reload"] { grid-area: reload; }
.touch-button[data-touch-action="swap"] { grid-area: swap; }
.touch-button[data-touch-action="gadget0"] { grid-area: gadget0; }
.touch-button[data-touch-action="gadget1"] { grid-area: gadget1; }

.touch-button-main {
  border-color: rgba(126, 231, 135, 0.55);
  color: #d8ffe0;
}

.touch-button-main small {
  color: rgba(126, 231, 135, 0.9);
}

.touch-button-small {
  width: 44px;
  height: 36px;
  border-radius: 6px 12px 6px 12px;
}

.touch-button-small svg {
  width: 18px;
  height: 18px;
}

.touch-button.is-pressed {
  transform: scale(0.92);
  background: linear-gradient(160deg, rgba(88, 211, 255, 0.45), rgba(20, 60, 90, 0.7));
  opacity: 1;
}

/* HUD plus compact : on garde l'essentiel lisible sans cacher l'arene. */
body.is-touch #hud {
  transform: scale(0.64);
  transform-origin: top left;
  left: calc(8px + env(safe-area-inset-left));
  top: calc(8px + env(safe-area-inset-top));
}

/* « Voir mon build » et les emplacements d'arme deviennent des boutons,
   au-dessus des zones des sticks. */
body.is-touch #hud,
body.is-touch .weapon-hud,
body.is-touch .enchantment-notice {
  z-index: 16;
}

body.is-touch #hud .hud-build,
body.is-touch .weapon-hud .weapon-slot,
body.is-touch .weapon-hud .gadget-slot,
body.is-touch .enchantment-notice {
  pointer-events: auto;
  cursor: pointer;
}

body.is-touch .weapon-hud {
  bottom: calc(4px + env(safe-area-inset-bottom));
  transform: translateX(-50%) scale(0.66);
  transform-origin: bottom center;
}

/* Aucune touche clavier affichee sur telephone. */
body.is-touch kbd,
body.is-touch .upgrade-hotkey,
body.is-touch .enchantment-hotkey,
body.is-touch .enchantment-menu-hint,
body.is-touch .enchantment-hud {
  display: none !important;
}

body.is-touch .streak-hud,
body.is-touch .contract-hud {
  transform: scale(0.74);
  transform-origin: top right;
}

body.is-touch .threat-announcement {
  zoom: 0.8;
}

/* Petits ecrans a l'horizontale : menus et panneaux a l'echelle du telephone. */
@media (max-height: 520px) {
  body.is-touch .menu-card:not(.menu-home),
  body.is-touch .enchantment-shell,
  body.is-touch .upgrade-panel,
  body.is-touch .enso-recap {
    zoom: 0.72;
  }

  body.is-touch .menu-card:not(.menu-home) {
    max-height: calc((100dvh - 16px) / 0.72);
  }

  body.is-touch #menu .menu-card.menu-home {
    zoom: 0.84;
    max-height: calc((100dvh - 12px) / 0.84);
  }

  body.is-touch .enchantment-shell {
    max-height: calc((100dvh - 16px) / 0.72);
    overflow: auto;
  }

  body.is-touch .menu-card {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* Le jeu se joue a l'horizontale : en portrait, on le demande poliment. */
.rotate-hint {
  display: none;
}

@media (orientation: portrait) {
  body.is-touch.in-game .rotate-hint {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgba(3, 7, 13, 0.94);
    color: #e6f7ff;
    font-weight: 700;
    text-align: center;
  }

  .rotate-hint-icon {
    font-size: 54px;
    animation: dc-rotate-hint 1.8s ease-in-out infinite;
  }
}

@keyframes dc-rotate-hint {
  0%, 30% { transform: rotate(0deg); }
  60%, 100% { transform: rotate(-90deg); }
}

/* Telephone a l'horizontale (faible hauteur) : menu en deux colonnes compactes,
   « Jouer » visible sans defiler. */
@media (max-height: 520px) and (orientation: landscape) {
  .menu-card {
    max-height: calc(100dvh - 12px);
    padding: 14px 16px;
  }

  #menu .menu-card.menu-home {
    display: grid;
    width: min(900px, calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-areas:
      "hero side"
      "launch side"
      "nav nav";
    gap: 8px 16px;
    padding: 12px 16px;
  }

  #menu .menu-hero {
    margin: 0;
    gap: 10px;
  }

  #menu .menu-hero p,
  #menu #loadoutHint,
  #menu .skin-preview-orbit {
    display: none;
  }

  #menu .menu-hero h1 {
    font-size: 26px;
  }

  .menu-emblem {
    width: 38px;
    height: 38px;
  }

  #menu input {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  #menu #playButton {
    min-height: 48px;
    margin-bottom: 8px;
    font-size: 17px;
  }

  .skin-preview-stage {
    height: 84px;
  }

  #menu .menu-side {
    margin: 0;
  }

  #menu .menu-nav {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-top: 4px;
  }

  #menu .menu-tile {
    min-height: 46px;
    padding: 6px 4px;
    font-size: 10px;
  }

  #menu .local-leaderboard {
    display: none;
  }
}

/* La legende du stick de visee passe au-dessus : en bas, la barre d'armes la cachait. */
.touch-stick-aim em {
  top: auto;
  bottom: calc(100% + 6px);
}

/* Telephone : les gadgets passent sur deux boutons a portee du pouce ;
   la barre d'armes n'en garde pas de doublon. */
body.is-touch .gadget-hud {
  display: none;
}

.touch-gadget {
  border-color: color-mix(in srgb, var(--gadget) 65%, transparent);
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--gadget) 24%, transparent), rgba(5, 11, 20, 0.8) 72%);
}

/* Arsenal et Archives : une carte par arme / ennemi, pastilles de rareté ou de rang. */
.dx-progress { height: 6px; margin: 0 0 14px; border-radius: 99px; background: rgba(240, 246, 252, 0.08); overflow: hidden; }
.dx-progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--c), #f0f6fc); box-shadow: 0 0 12px var(--c); }
.dx-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; }
.dx-card, .dx-anomaly {
  position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 14px; min-width: 0;
  border: 1px solid color-mix(in srgb, var(--c, #5a6878) 38%, transparent); border-radius: 12px;
  background: radial-gradient(circle at 48px 50%, color-mix(in srgb, var(--c, #5a6878) 16%, transparent), transparent 62%), rgba(240, 246, 252, 0.03);
  box-shadow: inset 0 0 24px color-mix(in srgb, var(--c, #5a6878) 7%, transparent);
  transition: border-color 0.2s, transform 0.2s;
}
.dx-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 70%, transparent); }
.dx-card.is-unknown { --c: #3a4654; }
.dx-card-art { display: grid; place-items: center; }
.dx-card-art img { max-width: 88px; max-height: 88px; object-fit: contain; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c, #5a6878) 55%, transparent)); }
.dx-weapon .dx-card-art img { max-height: 120px; }
.is-unknown .dx-card-art img { filter: brightness(0) opacity(0.55); }
.dx-card-body { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.dx-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dx-card-head h3, .dx-anomaly h3 { margin: 0; font-size: 1.05rem; color: #f0f6fc; }
.dx-tag { padding: 2px 8px; border-radius: 99px; font-size: 0.72rem; font-weight: 700; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent); }
.dx-card-count { margin-left: auto; font-size: 0.78rem; color: rgba(240, 246, 252, 0.55); font-variant-numeric: tabular-nums; }
.dx-card-desc { margin: 0; font-size: 0.84rem; line-height: 1.4; color: rgba(240, 246, 252, 0.72); }
.dx-muted { color: rgba(240, 246, 252, 0.45); }
.dx-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.dx-stats span { display: flex; flex-direction: column; min-width: 74px; padding: 5px 9px; border-radius: 8px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(240, 246, 252, 0.5); background: rgba(0, 0, 0, 0.25); }
.dx-stats strong { font-size: 0.98rem; letter-spacing: 0; text-transform: none; color: #f0f6fc; font-variant-numeric: tabular-nums; }
.dx-pips { display: flex; gap: 6px; flex-wrap: wrap; }
.menu-card button.dx-pip, button.dx-pip {
  display: flex; flex-direction: column; align-items: center; gap: 2px; width: 62px; padding: 5px 2px !important;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent) !important; border-radius: 8px;
  background: color-mix(in srgb, var(--c) 8%, rgba(0, 0, 0, 0.3)) !important; box-shadow: none !important;
  color: #f0f6fc !important; font: inherit; cursor: pointer; transition: transform 0.15s, background 0.15s;
}
button.dx-pip img { width: 28px; height: 28px; object-fit: contain; }
button.dx-pip .dx-pip-label { font-size: 0.6rem; color: var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
button.dx-pip strong { font-size: 0.78rem; font-variant-numeric: tabular-nums; }
button.dx-pip:hover:not(:disabled) { transform: translateY(-2px); }
.menu-card button.dx-pip.is-selected, button.dx-pip.is-selected { background: color-mix(in srgb, var(--c) 24%, rgba(0, 0, 0, 0.3)) !important; box-shadow: 0 0 12px color-mix(in srgb, var(--c) 45%, transparent) !important; border-color: var(--c) !important; }
.menu-card button.dx-pip.is-unknown, button.dx-pip.is-unknown { --c: #4a5664; cursor: default; opacity: 0.6; }
button.dx-pip.is-unknown img { filter: brightness(0); }
.dx-favorite { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 16%, transparent), transparent); }
.dx-favorite img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 0 8px var(--c)); }
.dx-favorite div { display: flex; flex-direction: column; }
.dx-favorite span { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c); }
.dx-favorite strong { color: #f0f6fc; }
.dx-favorite em { font-style: normal; font-size: 0.8rem; color: rgba(240, 246, 252, 0.6); }
.dx-section-count { float: right; color: rgba(240, 246, 252, 0.55); letter-spacing: 0; }
.dx-anomaly { --c: #cf5fff; grid-template-columns: 80px 1fr; }
.dx-anomaly.is-unknown { --c: #5a3a6e; }
.dx-anomaly.is-defeated { --c: #7ef9ff; box-shadow: 0 0 22px rgba(126, 249, 255, 0.14), inset 0 0 28px rgba(126, 249, 255, 0.08); }
.dx-anomaly .dx-card-art img { max-width: 72px; max-height: 72px; }
.dx-anomaly-status { font-size: 0.8rem; font-weight: 700; color: var(--c); }
.dx-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.dx-chips span { padding: 2px 8px; border-radius: 99px; font-size: 0.72rem; color: rgba(240, 246, 252, 0.75); background: rgba(0, 0, 0, 0.3); }
.dx-chips span.is-good { color: #7ef9ff; }
@media (max-width: 720px) {
  .dx-list { grid-template-columns: 1fr; }
  .dx-card { grid-template-columns: 64px 1fr; gap: 10px; padding: 10px; }
  .dx-card-art img { max-width: 60px; max-height: 60px; }
  button.dx-pip { width: 52px; }
}
.dex-grid > .dx-progress, .dex-grid > .dx-favorite, .dex-grid > .dx-list, .enemy-dex-section > .dx-list { grid-column: 1 / -1; }
.dx-pips { flex-wrap: nowrap; }
.menu-card button.dx-pip, button.dx-pip { flex: 1 1 0; min-width: 0; width: auto; max-width: 66px; }
.gadget-dex-section { grid-column: 1 / -1; margin-top: 18px; }
.gadget-dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 10px; }
.dx-anomaly.dx-gadget.is-defeated { box-shadow: 0 0 18px color-mix(in srgb, var(--c) 18%, transparent); }
.dx-gadget .dx-card-art img { max-width: 64px; max-height: 64px; }

/* Skins de prestige verrouilles */
.skin-preview-stage.is-locked .skin-preview-image { filter: grayscale(1) brightness(0.45); }
.skin-preview-stage.is-secret .skin-preview-image { filter: brightness(0); opacity: 0.75; }
.skin-preview-stage.is-locked::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 34px; transform: translate(-50%, -50%);
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Crect x='3' y='12' width='18' height='14' rx='3' fill='%23f0f6fc'/%3E%3Cpath d='M7 12V8a5 5 0 0 1 10 0v4' fill='none' stroke='%23f0f6fc' stroke-width='3'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.8)); pointer-events: none;
}
.skin-lock-info { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; margin-top: 4px; font-size: 0.74rem; color: #ffd166; text-align: center; }
.skin-lock-info[hidden] { display: none; }
.skin-lock-info em { font-style: normal; color: rgba(240, 246, 252, 0.6); font-variant-numeric: tabular-nums; }
.skin-lock-bar { flex-basis: 100%; height: 4px; border-radius: 99px; background: rgba(240, 246, 252, 0.1); overflow: hidden; }
.skin-lock-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffb703, #ffd166); }
.skin-dot.is-prestige { outline: 1px solid rgba(255, 209, 102, 0.55); outline-offset: 1px; }
.skin-dot.is-locked { opacity: 0.45; }

/* Revelation d'un skin de prestige */
.prestige-reveal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: radial-gradient(circle, color-mix(in srgb, var(--skin-accent) 22%, rgba(2, 6, 12, 0.92)), rgba(2, 6, 12, 0.94)); animation: prestige-fade 0.35s ease-out; }
.prestige-reveal.is-leaving { opacity: 0; transition: opacity 0.25s; }
.prestige-reveal-card { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.prestige-reveal-eyebrow { font-size: 0.8rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--skin-accent); animation: prestige-rise 0.6s 0.1s both; }
.prestige-reveal-stage { position: relative; width: min(300px, 70vw); aspect-ratio: 1; display: grid; place-items: center; }
.prestige-reveal-rays { position: absolute; inset: -20%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--skin-accent) 30%, transparent) 0deg 6deg, transparent 6deg 18deg); mask: radial-gradient(circle, #000 20%, transparent 68%); animation: prestige-spin 14s linear infinite, prestige-fade 1s both; }
.prestige-reveal-stage img { position: relative; width: 78%; filter: drop-shadow(0 0 28px color-mix(in srgb, var(--skin-accent) 70%, transparent)); animation: prestige-pop 0.9s cubic-bezier(0.2, 1.4, 0.4, 1) 0.15s both; }
.prestige-reveal h2 { margin: 0; font-family: var(--dc-font-display); font-size: clamp(1.8rem, 6vw, 2.8rem); color: #f0f6fc; text-shadow: 0 0 22px var(--skin-accent); animation: prestige-rise 0.6s 0.45s both; }
.prestige-reveal-actions { display: flex; gap: 10px; animation: prestige-rise 0.6s 0.7s both; }
.prestige-reveal-actions button { padding: 10px 22px; border-radius: 10px; font: inherit; font-weight: 700; cursor: pointer; border: 1px solid color-mix(in srgb, var(--skin-accent) 60%, transparent); background: rgba(2, 6, 12, 0.6); color: #f0f6fc; }
.prestige-reveal-actions .prestige-reveal-equip { background: var(--skin-accent); color: #0b0f14; }
@keyframes prestige-fade { from { opacity: 0; } }
@keyframes prestige-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes prestige-pop { from { opacity: 0; transform: scale(0.2) rotate(-200deg); } }
@keyframes prestige-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .prestige-reveal *, .prestige-reveal { animation: none !important; } }

/* Skin verrouille : l'animation d'arrivee ne doit pas lever le filtre qui le cache. */
@keyframes skin-swap-arrive-locked {
  0% {
    transform: translateX(calc(var(--swap-dir, 1) * 54px)) rotate(calc(var(--swap-dir, 1) * 140deg)) scale(0.45);
    opacity: 0;
  }
  60% {
    transform: translateX(0) rotate(calc(var(--swap-dir, 1) * -10deg)) scale(1.12);
    opacity: 1;
  }
  100% {
    transform: translateX(0) rotate(0deg) scale(1);
    opacity: 1;
  }
}
.skin-preview-stage.is-locked .skin-preview-image.is-arriving { animation-name: skin-swap-arrive-locked; }