:root {
  --bg: #050505;
  --panel: #111;
  --panel-2: #181818;
  --line: rgba(255, 255, 255, 0.18);
  --text: #f6f6f6;
  --muted: #a8a8a8;
  --p1: #32e6ff;
  --p2: #ff4ed7;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at 50% 15%, #1a1a1a 0, #080808 42%, #020202 100%);
  color: var(--text);
  font-family: "Courier New", Courier, monospace;
}

body {
  padding: 20px;
}

button,
input {
  font: inherit;
}

button {
  color: var(--text);
  background: #171717;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  padding: 9px 13px;
  cursor: pointer;
}

button:hover,
button:focus-visible {
  background: #242424;
  border-color: rgba(255, 255, 255, 0.62);
}

.app-shell {
  width: min(1500px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
}

.game-column,
.settings-panel,
.controls-card,
.scoreboard {
  min-width: 0;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 2px;
  font-size: clamp(1.3rem, 2vw, 2rem);
  letter-spacing: 0.12em;
}

.subtitle,
.settings-help {
  margin-bottom: 0;
  color: var(--muted);
}

.top-actions {
  display: flex;
  gap: 8px;
}

.scoreboard {
  display: grid;
  grid-template-columns: 1fr minmax(180px, 0.72fr) 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.player-card,
.match-card,
.controls-card,
.settings-panel {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(27, 27, 27, 0.96), rgba(10, 10, 10, 0.96));
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.36);
}

.player-card,
.match-card {
  min-height: 92px;
  padding: 12px;
}

.player-title {
  display: flex;
  gap: 8px;
  align-items: center;
}

.player-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 10px currentColor;
}

.player-one .player-dot {
  color: var(--p1);
  background: var(--p1);
}

.player-two .player-dot {
  color: var(--p2);
  background: var(--p2);
}

.player-two {
  text-align: right;
}

.player-two .player-title {
  justify-content: flex-end;
}

.score-line {
  margin-top: 5px;
  font-size: 1.35rem;
}

.cooldown-line {
  color: var(--muted);
  font-size: 0.82rem;
}

.match-card {
  text-align: center;
  display: grid;
  place-content: center;
  gap: 4px;
}

#timerDisplay {
  font-size: 1.55rem;
  font-weight: 700;
}

#roundMessage {
  min-height: 1.2em;
  color: #fff;
}

#builderDisplay {
  font-size: 0.72rem;
  color: var(--muted);
}

.corner-strip {
  display: flex;
  gap: 5px;
  margin-top: 7px;
}

.player-two .corner-strip {
  justify-content: flex-end;
}

.corner-chip {
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #666;
  font-size: 0.66rem;
}

.corner-chip.active.p1 {
  color: var(--p1);
  border-color: var(--p1);
  box-shadow: inset 0 0 8px rgba(50, 230, 255, 0.32);
}

.corner-chip.active.p2 {
  color: var(--p2);
  border-color: var(--p2);
  box-shadow: inset 0 0 8px rgba(255, 78, 215, 0.32);
}

.crt-frame {
  position: relative;
  border: 14px solid #202020;
  border-radius: 30px;
  overflow: hidden;
  background: #000;
  box-shadow:
    0 0 0 2px #050505,
    0 22px 60px rgba(0, 0, 0, 0.62),
    inset 0 0 28px rgba(255, 255, 255, 0.04);
}

.crt-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: 17px;
  box-shadow:
    inset 0 0 35px rgba(0, 0, 0, 0.86),
    inset 0 0 5px rgba(255, 255, 255, 0.13);
}

canvas {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* V109 — Performance de la couche CRT.

   Ces deux calques couvrent l'arène en permanence, au-dessus d'un canvas
   qui se repeint soixante fois par seconde.

   .scanlines portait mix-blend-mode: screen. Un mode de fusion au-dessus
   d'un canvas animé interdit au navigateur de promouvoir le calque : il
   doit refusionner toute la pile à CHAQUE image du canvas, sur le fil
   principal. C'était le poste le plus lourd du jeu côté navigateur, et il
   s'appliquait à tous les modes.

   .crt-glow animait son opacité toutes les 0,18 s en alternance, soit onze
   invalidations par seconde d'un dégradé plein écran.

   Correction : plus de fusion — les stries deviennent soustractives, ce qui
   est de toute façon plus proche d'un vrai tube — et le scintillement passe
   à un rythme lent, sur un calque promu. L'aspect change à peine ; le coût
   s'effondre. */

.scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.03) 0,
    rgba(255, 255, 255, 0.03) 1px,
    rgba(0, 0, 0, 0.09) 2px,
    rgba(0, 0, 0, 0.09) 4px
  );
  opacity: 0.62;
  /* Calque propre : il n'est plus repeint quand le canvas change. */
  transform: translateZ(0);
  will-change: transform;
  contain: strict;
}

.crt-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.028), rgba(0,0,0,0.3) 74%, rgba(0,0,0,0.75));
  /* 2,4 s au lieu de 0,18 s : la respiration du tube reste perceptible,
     mais on passe de onze invalidations par seconde à moins d'une. */
  animation: flicker 2.4s ease-in-out infinite alternate;
  will-change: opacity;
  contain: strict;
}

@keyframes flicker {
  from { opacity: 0.9; }
  to { opacity: 1; }
}

/* Économie d'énergie et de calcul : sur un appareil qui demande moins de
   mouvement, le scintillement disparaît complètement. */
@media (prefers-reduced-motion: reduce) {
  .crt-glow { animation: none; opacity: 0.95; }
}

.controls-card {
  margin-top: 10px;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.controls-card div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.controls-card span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.settings-panel {
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 16px;
}

.settings-panel h2 {
  margin-bottom: 5px;
}

.settings-help {
  margin-bottom: 14px;
  font-size: 0.8rem;
  line-height: 1.35;
}

fieldset {
  border: 1px solid var(--line);
  margin: 0 0 12px;
  padding: 11px;
}

legend {
  color: #fff;
  padding: 0 6px;
  font-weight: 700;
}

label {
  display: grid;
  grid-template-columns: 1fr 88px;
  gap: 10px;
  align-items: center;
  margin-bottom: 9px;
  color: #d6d6d6;
  font-size: 0.8rem;
}

label:last-child {
  margin-bottom: 0;
}

input[type="number"] {
  width: 100%;
  color: var(--text);
  background: #050505;
  border: 1px solid rgba(255, 255, 255, 0.23);
  border-radius: 4px;
  padding: 6px;
}

.check-row {
  grid-template-columns: 18px 1fr;
}

input[type="checkbox"] {
  accent-color: #fff;
}

.primary-btn {
  width: 100%;
  background: #f2f2f2;
  color: #050505;
  border-color: #fff;
  font-weight: 700;
}

.primary-btn:hover,
.primary-btn:focus-visible {
  color: #fff;
  background: #333;
}

.rules-summary {
  margin-top: 16px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.rules-summary h3 {
  color: var(--text);
  margin-bottom: 8px;
}

.rules-summary p {
  margin-bottom: 6px;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.78);
  display: grid;
  place-items: center;
  padding: 20px;
}

.modal.hidden {
  display: none;
}

.modal-card {
  width: min(420px, 100%);
  border: 2px solid #fff;
  background: #090909;
  padding: 26px;
  text-align: center;
  box-shadow: 0 0 40px rgba(255,255,255,0.14);
}

.modal-card p {
  color: #c8c8c8;
  line-height: 1.5;
}

@media (max-width: 1080px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .settings-panel {
    position: static;
    max-height: none;
  }
}

@media (max-width: 700px) {
  body {
    padding: 10px;
  }

  .topbar,
  .scoreboard,
  .controls-card {
    grid-template-columns: 1fr;
  }

  .topbar {
    align-items: flex-start;
  }

  .scoreboard {
    display: grid;
  }

  .player-two,
  .player-two .player-title {
    text-align: left;
    justify-content: flex-start;
  }

  .player-two .corner-strip {
    justify-content: flex-start;
  }

  .match-card {
    order: -1;
  }

  .controls-card {
    display: grid;
  }

  .crt-frame {
    border-width: 8px;
    border-radius: 18px;
  }
}


.hidden {
  display: none !important;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  font-size: 0.72rem;
  white-space: nowrap;
}

.status-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: #777;
}

.status-badge.online::before {
  background: #65ff8a;
  box-shadow: 0 0 10px rgba(101, 255, 138, 0.8);
}

.status-badge.waiting::before {
  background: #ffe45c;
  box-shadow: 0 0 10px rgba(255, 228, 92, 0.7);
}

.status-badge.offline::before {
  background: #777;
}

.network-card {
  width: min(660px, 100%);
  text-align: left;
}

.network-card > section > h2,
.network-card > section > p {
  text-align: center;
}

.mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 20px;
}

.mode-button {
  min-height: 130px;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}

.mode-button strong {
  font-size: 1rem;
}

.mode-button span {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.room-code-box {
  margin: 20px auto;
  max-width: 370px;
  padding: 18px;
  border: 1px dashed rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.035);
  text-align: center;
}

.room-code-box span {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  margin-bottom: 8px;
}

.room-code-box strong {
  display: block;
  font-size: clamp(1.8rem, 7vw, 3rem);
  letter-spacing: 0.18em;
}

.room-code-box.compact strong {
  font-size: 1.7rem;
}

.network-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
}

.network-actions .primary-btn {
  width: auto;
}

.network-note {
  margin-top: 16px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
  text-align: center;
}

.room-input-label {
  display: block;
  margin: 20px auto 7px;
  max-width: 360px;
  text-align: left;
}

.room-input {
  display: block;
  width: min(360px, 100%);
  margin: 0 auto 16px;
  padding: 13px 14px;
  color: #fff;
  background: #050505;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 5px;
  font-size: 1.35rem;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}

.network-error {
  margin: 16px 0 0;
  padding: 10px;
  border: 1px solid rgba(255, 90, 90, 0.55);
  background: rgba(255, 60, 60, 0.09);
  color: #ffb6b6;
  text-align: center;
  font-size: 0.8rem;
}

.settings-panel input:disabled,
.settings-panel button:disabled,
.top-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.player-card.local-player {
  outline: 1px solid rgba(255, 255, 255, 0.52);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .mode-grid {
    grid-template-columns: 1fr;
  }

  .mode-button {
    min-height: 92px;
  }

  .top-actions {
    flex-wrap: wrap;
  }

  .status-badge {
    order: -1;
    width: 100%;
    justify-content: center;
  }
}


/* =========================================================
   MODE PLEIN ÉCRAN / MODE IMMERSIF
   ========================================================= */

.app-shell:fullscreen,
.app-shell:-webkit-full-screen,
.app-shell.fullscreen-fallback {
  width: 100vw;
  max-width: none;
  min-height: 100vh;
  height: 100vh;
  margin: 0;
  padding:
    max(10px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% 15%, #1a1a1a 0, #080808 42%, #020202 100%);
  grid-template-columns: minmax(0, 1fr) 300px;
  overflow: hidden;
}

body.fullscreen-fallback-active {
  position: fixed;
  inset: 0;
  overflow: hidden;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

.app-shell:fullscreen .game-column,
.app-shell:-webkit-full-screen .game-column,
.app-shell.fullscreen-fallback .game-column {
  height: calc(100vh - 20px);
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.app-shell:fullscreen .crt-frame,
.app-shell:-webkit-full-screen .crt-frame,
.app-shell.fullscreen-fallback .crt-frame {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-shell:fullscreen .crt-frame canvas,
.app-shell:-webkit-full-screen .crt-frame canvas,
.app-shell.fullscreen-fallback .crt-frame canvas {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 250px);
  object-fit: contain;
}

.app-shell:fullscreen .settings-panel,
.app-shell:-webkit-full-screen .settings-panel,
.app-shell.fullscreen-fallback .settings-panel {
  top: 10px;
  max-height: calc(100vh - 20px);
}

.app-shell:fullscreen .controls-card,
.app-shell:-webkit-full-screen .controls-card,
.app-shell.fullscreen-fallback .controls-card {
  margin-bottom: 0;
}

@media (max-width: 1080px) {
  .app-shell:fullscreen,
  .app-shell:-webkit-full-screen,
  .app-shell.fullscreen-fallback {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .app-shell:fullscreen .settings-panel,
  .app-shell:-webkit-full-screen .settings-panel,
  .app-shell.fullscreen-fallback .settings-panel {
    position: static;
    max-height: none;
  }

  .app-shell:fullscreen .crt-frame canvas,
  .app-shell:-webkit-full-screen .crt-frame canvas,
  .app-shell.fullscreen-fallback .crt-frame canvas {
    max-height: calc(100vh - 310px);
  }
}

@media (max-width: 700px) {
  .app-shell:fullscreen,
  .app-shell:-webkit-full-screen,
  .app-shell.fullscreen-fallback {
    padding:
      max(5px, env(safe-area-inset-top))
      max(5px, env(safe-area-inset-right))
      max(5px, env(safe-area-inset-bottom))
      max(5px, env(safe-area-inset-left));
    overflow: hidden;
  }

  .app-shell:fullscreen .game-column,
  .app-shell:-webkit-full-screen .game-column,
  .app-shell.fullscreen-fallback .game-column {
    height: calc(100vh - 10px);
  }

  .app-shell:fullscreen .subtitle,
  .app-shell:-webkit-full-screen .subtitle,
  .app-shell.fullscreen-fallback .subtitle,
  .app-shell:fullscreen .controls-card,
  .app-shell:-webkit-full-screen .controls-card,
  .app-shell.fullscreen-fallback .controls-card,
  .app-shell:fullscreen .settings-panel,
  .app-shell:-webkit-full-screen .settings-panel,
  .app-shell.fullscreen-fallback .settings-panel {
    display: none;
  }

  .app-shell:fullscreen .topbar,
  .app-shell:-webkit-full-screen .topbar,
  .app-shell.fullscreen-fallback .topbar {
    margin-bottom: 5px;
    align-items: center;
  }

  .app-shell:fullscreen h1,
  .app-shell:-webkit-full-screen h1,
  .app-shell.fullscreen-fallback h1 {
    font-size: 0.92rem;
  }

  .app-shell:fullscreen .top-actions,
  .app-shell:-webkit-full-screen .top-actions,
  .app-shell.fullscreen-fallback .top-actions {
    gap: 4px;
  }

  .app-shell:fullscreen .top-actions button,
  .app-shell:-webkit-full-screen .top-actions button,
  .app-shell.fullscreen-fallback .top-actions button {
    padding: 6px 7px;
    font-size: 0.68rem;
  }

  .app-shell:fullscreen #networkBadge,
  .app-shell:-webkit-full-screen #networkBadge,
  .app-shell.fullscreen-fallback #networkBadge,
  .app-shell:fullscreen #networkBtn,
  .app-shell:-webkit-full-screen #networkBtn,
  .app-shell.fullscreen-fallback #networkBtn {
    display: none;
  }

  .app-shell:fullscreen .scoreboard,
  .app-shell:-webkit-full-screen .scoreboard,
  .app-shell.fullscreen-fallback .scoreboard {
    grid-template-columns: 1fr 0.82fr 1fr;
    gap: 4px;
    margin-bottom: 5px;
  }

  .app-shell:fullscreen .player-card,
  .app-shell:-webkit-full-screen .player-card,
  .app-shell.fullscreen-fallback .player-card,
  .app-shell:fullscreen .match-card,
  .app-shell:-webkit-full-screen .match-card,
  .app-shell.fullscreen-fallback .match-card {
    min-height: 64px;
    padding: 6px;
    font-size: 0.69rem;
  }

  .app-shell:fullscreen .score-line,
  .app-shell:-webkit-full-screen .score-line,
  .app-shell.fullscreen-fallback .score-line {
    font-size: 0.96rem;
  }

  .app-shell:fullscreen #timerDisplay,
  .app-shell:-webkit-full-screen #timerDisplay,
  .app-shell.fullscreen-fallback #timerDisplay {
    font-size: 1rem;
  }

  .app-shell:fullscreen .corner-chip,
  .app-shell:-webkit-full-screen .corner-chip,
  .app-shell.fullscreen-fallback .corner-chip {
    width: 16px;
    height: 16px;
  }

  .app-shell:fullscreen .crt-frame,
  .app-shell:-webkit-full-screen .crt-frame,
  .app-shell.fullscreen-fallback .crt-frame {
    flex: 1 1 auto;
    border-width: 6px;
  }

  .app-shell:fullscreen .crt-frame canvas,
  .app-shell:-webkit-full-screen .crt-frame canvas,
  .app-shell.fullscreen-fallback .crt-frame canvas {
    width: 100%;
    max-height: calc(100vh - 145px);
  }
}


/* HITBOX DU LOGO */
.hitbox-note {
  color: #65ff78;
  font-size: 0.75rem;
  line-height: 1.35;
}


/* COMPTE À REBOURS DU LOGO */
.logo-countdown-label {
  pointer-events: none;
}


/* ZONE ANTI-CAMPING */
.zone-setting-note {
  margin: 2px 0 0;
  color: #ffc45c;
  font-size: 0.72rem;
  line-height: 1.4;
}

.player-card.corner-zone-blocked {
  box-shadow:
    inset 0 0 0 1px rgba(255, 177, 49, 0.72),
    0 12px 34px rgba(0, 0, 0, 0.36);
}

.player-card.corner-zone-blocked .cooldown-line {
  color: #ffc45c;
}


/* =========================================================
   MODE 3 JOUEURS ET SÉLECTION DES COULEURS
   ========================================================= */

.scoreboard.three-players {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.player-three {
  text-align: right;
}

.player-three .player-title,
.player-three .corner-strip {
  justify-content: flex-end;
}

.player-card .player-dot {
  background: var(--player-color, #fff);
  color: var(--player-color, #fff);
}

.corner-chip.active {
  color: var(--chip-color, #fff);
  border-color: var(--chip-color, #fff);
  box-shadow: inset 0 0 8px color-mix(in srgb, var(--chip-color, #fff) 35%, transparent);
}

.color-setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.color-setup-card {
  border: 1px solid rgba(255,255,255,0.18);
  padding: 12px;
  background: rgba(255,255,255,0.025);
}

.color-setup-card h3 {
  margin-bottom: 10px;
  font-size: 0.9rem;
}

.color-choice {
  grid-template-columns: 1fr 58px;
}

input[type="color"],
.room-color-input {
  width: 58px;
  min-width: 58px;
  height: 34px;
  padding: 2px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 4px;
  background: #050505;
  cursor: pointer;
}

.room-color-input {
  display: block;
  margin: 6px 0 14px;
}

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

.mode-grid.expanded .mode-button:last-child {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .scoreboard.three-players {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .color-setup-grid,
  .mode-grid.expanded {
    grid-template-columns: 1fr;
  }

  .mode-grid.expanded .mode-button:last-child {
    grid-column: auto;
  }
}

@media (max-width: 700px) {
  .player-three,
  .player-three .player-title {
    text-align: left;
    justify-content: flex-start;
  }

  .player-three .corner-strip {
    justify-content: flex-start;
  }

  .app-shell:fullscreen .scoreboard.three-players,
  .app-shell:-webkit-full-screen .scoreboard.three-players,
  .app-shell.fullscreen-fallback .scoreboard.three-players {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


#logoSpeedDisplay {
  min-height: 1.1em;
  color: #a8a8a8;
  font-size: 0.72rem;
}


#cornerAssistDisplay {
  min-height: 1.1em;
  color: #9fd6ff;
  font-size: 0.72rem;
}


/* MODE SOLO CONTRE IA */
select {
  width: 100%;
  color: var(--text);
  background: #050505;
  border: 1px solid rgba(255, 255, 255, 0.23);
  border-radius: 4px;
  padding: 6px;
}

.solo-ai-card {
  border-color: rgba(255, 212, 106, 0.36);
}

.solo-ai-card h3,
.solo-mode-button strong {
  color: #ffd46a;
}

.player-card.ai-controlled {
  box-shadow:
    inset 0 0 0 1px rgba(255, 212, 106, 0.42),
    0 12px 34px rgba(0, 0, 0, 0.36);
}

.player-card.ai-controlled .player-title strong::after {
  content: " · IA";
  color: #ffd46a;
  font-size: 0.72em;
}


/* PANNEAU DE DIFFICULTÉ IA */
.difficulty-panel {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.difficulty-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.difficulty-panel-header strong {
  color: #fff;
  font-size: 0.82rem;
}

#difficultySelectedLabel {
  padding: 3px 8px;
  border: 1px solid rgba(255, 212, 106, 0.5);
  border-radius: 999px;
  color: #ffd46a;
  background: rgba(255, 212, 106, 0.08);
  font-size: 0.7rem;
  font-weight: 700;
}

.difficulty-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.difficulty-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 8px;
  min-height: 92px;
  padding: 10px;
  text-align: left;
  color: #d8d8d8;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
}

.difficulty-card:hover,
.difficulty-card:focus-visible {
  border-color: rgba(255, 212, 106, 0.58);
  background: rgba(255, 212, 106, 0.055);
}

.difficulty-card.selected {
  border-color: #ffd46a;
  background:
    linear-gradient(135deg, rgba(255, 212, 106, 0.13), rgba(255, 212, 106, 0.035));
  box-shadow:
    inset 0 0 0 1px rgba(255, 212, 106, 0.2),
    0 0 14px rgba(255, 212, 106, 0.08);
}

.difficulty-name {
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
}

.difficulty-card.selected .difficulty-name {
  color: #ffd46a;
}

.difficulty-stars {
  color: #ffd46a;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.difficulty-description {
  grid-column: 1 / -1;
  color: #a9a9a9;
  font-size: 0.68rem;
  line-height: 1.35;
}

.difficulty-details {
  min-height: 2.6em;
  margin: 10px 0 0;
  color: #c9c9c9;
  font-size: 0.72rem;
  line-height: 1.4;
}

@media (max-width: 620px) {
  .difficulty-grid {
    grid-template-columns: 1fr;
  }
}


/* CARROUSEL DES MODES DE JEU */
.mode-carousel {
  margin-top: 16px;
}

.mode-carousel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.mode-carousel-header strong {
  color: #fff;
  font-size: 0.9rem;
}

#modeCarouselCounter {
  min-width: 52px;
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: #cfcfcf;
  background: rgba(255, 255, 255, 0.035);
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
}

.mode-carousel-shell {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  gap: 8px;
  align-items: stretch;
}

.mode-carousel-viewport {
  overflow: hidden;
  border-radius: 7px;
  outline: none;
  touch-action: pan-y;
}

.mode-carousel-viewport:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 212, 106, 0.65);
}

.mode-carousel-track {
  display: flex;
  width: 100%;
  transition: transform 280ms ease;
  will-change: transform;
}

.mode-carousel-track .carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  min-height: 118px;
  margin: 0;
  box-sizing: border-box;
}

.carousel-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 7px;
  color: #fff;
  background: rgba(255, 255, 255, 0.035);
  font-size: 2rem;
  line-height: 1;
}

.carousel-arrow:hover,
.carousel-arrow:focus-visible {
  color: #ffd46a;
  border-color: rgba(255, 212, 106, 0.6);
  background: rgba(255, 212, 106, 0.07);
}

.carousel-arrow:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}

.mode-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 10px;
}

.mode-carousel-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: transparent;
}

.mode-carousel-dot.active {
  border-color: #ffd46a;
  background: #ffd46a;
  box-shadow: 0 0 8px rgba(255, 212, 106, 0.4);
}

.mode-carousel-help {
  margin: 8px 0 0;
  color: #8f8f8f;
  text-align: center;
  font-size: 0.66rem;
}

@media (max-width: 540px) {
  .mode-carousel-shell {
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    gap: 5px;
  }

  .carousel-arrow {
    min-width: 32px;
    font-size: 1.6rem;
  }

  .mode-carousel-track .carousel-slide {
    min-height: 132px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mode-carousel-track {
    transition: none;
  }
}


/* ACCORDÉON COMPACT DES MODES */
.mode-carousel,
.color-setup-grid {
  display: none !important;
}

.mode-accordion {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.mode-panel {
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.025);
  overflow: hidden;
}

.mode-panel.open {
  border-color: rgba(255, 212, 106, 0.48);
  background: rgba(255, 212, 106, 0.035);
}

.mode-panel-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
}

.mode-panel-toggle > span:first-child {
  display: grid;
  gap: 2px;
}

.mode-panel-toggle strong {
  color: #fff;
  font-size: 0.86rem;
}

.mode-panel-toggle small {
  color: #9d9d9d;
  font-size: 0.68rem;
}

.mode-panel.open .mode-panel-toggle strong {
  color: #ffd46a;
}

.mode-panel-chevron {
  color: #ffd46a;
  font-size: 1.2rem;
  transition: transform 180ms ease;
}

.mode-panel.open .mode-panel-chevron {
  transform: rotate(180deg);
}

.mode-panel-content {
  padding: 0 10px 10px;
}

.compact-settings-card {
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.16);
}

.compact-settings-card h3 {
  margin-bottom: 9px;
  color: #fff;
  font-size: 0.78rem;
}

.compact-settings-card .difficulty-panel {
  margin-top: 10px;
  padding-top: 10px;
}

.compact-settings-card .difficulty-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compact-mode-actions {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.compact-mode-actions.two-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compact-mode-actions .mode-button {
  min-height: 74px;
  width: 100%;
  margin: 0;
}

.compact-mode-actions .mode-button:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

@media (max-width: 620px) {
  .compact-mode-actions.two-columns,
  .compact-settings-card .difficulty-grid {
    grid-template-columns: 1fr;
  }

  .compact-mode-actions .mode-button:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .mode-panel-toggle {
    padding: 10px;
  }

  .mode-panel-content {
    padding: 0 8px 8px;
  }
}


/* CORRECTION DU MENU COUPÉ ET DU DÉFILEMENT */
#networkModal {
  overflow-y: auto;
  overflow-x: hidden;
  place-items: start center;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding:
    max(8px, env(safe-area-inset-top))
    max(8px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left));
}

#networkModal .network-card {
  width: min(660px, 100%);
  max-height: calc(100dvh - 16px);
  margin: auto;
  padding: clamp(12px, 2.4vw, 20px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-gutter: stable;
  box-sizing: border-box;
}

#networkModal .network-card::-webkit-scrollbar {
  width: 10px;
}

#networkModal .network-card::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.035);
}

#networkModal .network-card::-webkit-scrollbar-thumb {
  border: 2px solid #090909;
  border-radius: 999px;
  background: rgba(255, 212, 106, 0.62);
}

.mode-menu-header {
  position: sticky;
  top: -1px;
  z-index: 5;
  margin: -4px -4px 10px;
  padding: 4px 4px 10px;
  background: linear-gradient(to bottom, #090909 82%, rgba(9, 9, 9, 0));
}

.mode-menu-header h2 {
  margin-bottom: 4px;
  text-align: center;
}

.mode-menu-header p {
  margin: 0;
  text-align: center;
  font-size: 0.78rem;
}

.scroll-hint {
  display: block;
  margin-top: 5px;
  color: #ffd46a;
  text-align: center;
  font-size: 0.66rem;
}

.mode-accordion {
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.mode-panel-content {
  max-height: none;
  overflow: visible;
}

.compact-color-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.compact-color-row.three-colors {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.compact-color-row .color-choice {
  grid-template-columns: 1fr 50px;
  margin-bottom: 0;
}

.compact-color-row input[type="color"] {
  width: 50px;
  min-width: 50px;
}

.compact-note {
  margin: 7px 0 0;
  font-size: 0.68rem;
}

.compact-settings-card .difficulty-card {
  min-height: 68px;
  padding: 8px;
}

.compact-settings-card .difficulty-description {
  font-size: 0.62rem;
}

.compact-mode-actions .mode-button {
  min-height: 66px;
  padding: 10px 8px;
}

.compact-mode-actions .mode-button strong {
  font-size: 0.84rem;
}

.compact-mode-actions .mode-button span {
  font-size: 0.66rem;
}

@media (max-height: 720px) {
  #networkModal .network-card {
    max-height: calc(100dvh - 8px);
    padding: 10px;
  }

  .mode-menu-header p {
    display: none;
  }

  .scroll-hint {
    margin-top: 2px;
  }

  .mode-panel-toggle {
    padding: 8px 10px;
  }

  .mode-panel-content {
    padding: 0 7px 7px;
  }

  .compact-settings-card {
    padding: 8px;
  }

  .compact-settings-card .difficulty-panel {
    margin-top: 7px;
    padding-top: 7px;
  }

  .difficulty-details {
    margin-top: 6px;
    min-height: 0;
  }
}

@media (max-width: 620px) {
  #networkModal {
    padding: 4px;
  }

  #networkModal .network-card {
    width: 100%;
    max-height: calc(100dvh - 8px);
    padding: 10px;
  }

  .compact-color-row,
  .compact-color-row.three-colors {
    grid-template-columns: 1fr;
  }

  .compact-color-row .color-choice {
    grid-template-columns: 1fr 58px;
  }

  .compact-settings-card .difficulty-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .difficulty-description {
    display: none;
  }

  .difficulty-card {
    min-height: 52px !important;
  }

  .compact-mode-actions.two-columns {
    grid-template-columns: 1fr;
  }

  .compact-mode-actions .mode-button:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

@media (max-width: 390px) {
  .compact-settings-card .difficulty-grid {
    grid-template-columns: 1fr;
  }
}


html.mode-menu-open,
body.mode-menu-open {
  overflow: hidden;
}


/* STABILISATION DE LA ZONE DE MESSAGE SOUS LE TIMER */
.match-card {
  min-height: 132px;
  grid-template-rows:
    2rem
    2.7rem
    1.15rem
    1.15rem
    1.15rem;
  align-content: center;
  overflow: hidden;
}

#timerDisplay {
  min-height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

#roundMessage {
  width: 100%;
  height: 2.7rem;
  min-height: 2.7rem;
  max-height: 2.7rem;
  padding: 0 4px;
  display: -webkit-box;
  align-content: center;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: normal;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  line-height: 1.3rem;
  box-sizing: border-box;
}

#builderDisplay,
#logoSpeedDisplay,
#cornerAssistDisplay {
  width: 100%;
  min-width: 0;
  height: 1.15rem;
  min-height: 1.15rem;
  max-height: 1.15rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.15rem;
}

@media (max-width: 700px) {
  .match-card {
    min-height: 126px;
    grid-template-rows:
      1.9rem
      2.55rem
      1.1rem
      1.1rem
      1.1rem;
  }

  #roundMessage {
    height: 2.55rem;
    min-height: 2.55rem;
    max-height: 2.55rem;
    font-size: 0.78rem;
    line-height: 1.22rem;
  }

  #builderDisplay,
  #logoSpeedDisplay,
  #cornerAssistDisplay {
    height: 1.1rem;
    min-height: 1.1rem;
    max-height: 1.1rem;
    font-size: 0.66rem;
    line-height: 1.1rem;
  }
}


/* COMMANDES PERSONNALISABLES */
.controls-settings select {
  width: 100%;
  color: var(--text);
  background: #050505;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  padding: 7px;
}

.control-options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 10px 0 12px;
}

.control-options-grid label {
  min-width: 0;
}

.control-options-grid input[type="range"] {
  width: 100%;
}

.control-value {
  display: block;
  margin-top: 3px;
  color: #ffd46a;
  font-size: 0.68rem;
  text-align: right;
}

.control-table-wrap {
  width: 100%;
  margin-top: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.control-bindings-table {
  width: 100%;
  min-width: 410px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.7rem;
}

.control-bindings-table caption {
  margin-bottom: 6px;
  color: #fff;
  text-align: left;
  font-weight: 700;
}

.control-bindings-table th,
.control-bindings-table td {
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  text-align: center;
}

.control-bindings-table th {
  color: #bcbcbc;
  background: rgba(255, 255, 255, 0.035);
}

.key-bind-button {
  width: 100%;
  min-width: 48px;
  min-height: 34px;
  padding: 5px 6px;
  border-color: rgba(255, 212, 106, 0.34);
  color: #ffd46a;
  background: rgba(255, 212, 106, 0.045);
  font-size: 0.7rem;
}

.key-bind-button.listening {
  border-color: #65ff8a;
  color: #65ff8a;
  box-shadow: 0 0 10px rgba(101, 255, 138, 0.2);
  animation: control-listening-pulse 850ms ease-in-out infinite alternate;
}

@keyframes control-listening-pulse {
  from { opacity: 0.65; }
  to { opacity: 1; }
}

.global-bindings-table th {
  width: 23%;
}

.global-bindings-table td {
  width: 27%;
}

.control-settings-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.control-help {
  margin-bottom: 0;
  line-height: 1.45;
}

/* JOYSTICK VIRTUEL MOBILE / TABLETTE */
.virtual-joystick {
  --joystick-size: 135px;
  --knob-x: 0px;
  --knob-y: 0px;
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  right: auto;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 17;
  width: var(--joystick-size);
  height: calc(var(--joystick-size) + 24px);
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.55));
}

.virtual-joystick.right-side {
  left: auto;
  right: max(16px, env(safe-area-inset-right));
}

.virtual-joystick.hidden {
  display: none !important;
}

.virtual-joystick-label {
  height: 20px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffd46a;
  font-size: 0.7rem;
  font-weight: 800;
  text-shadow: 0 1px 4px #000;
}

.virtual-joystick-base {
  position: relative;
  width: var(--joystick-size);
  height: var(--joystick-size);
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.08) 0 17%, transparent 18%),
    rgba(10, 10, 10, 0.64);
  box-shadow:
    inset 0 0 24px rgba(255, 255, 255, 0.06),
    0 0 0 5px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  touch-action: none;
}

.virtual-joystick-cross::before,
.virtual-joystick-cross::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(255, 255, 255, 0.12);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.virtual-joystick-cross::before {
  width: 72%;
  height: 1px;
}

.virtual-joystick-cross::after {
  width: 1px;
  height: 72%;
}

.virtual-joystick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  height: 42%;
  border: 2px solid rgba(255, 212, 106, 0.9);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.3), transparent 26%),
    rgba(255, 212, 106, 0.28);
  box-shadow:
    0 0 14px rgba(255, 212, 106, 0.24),
    inset 0 0 12px rgba(255, 255, 255, 0.12);
  transform:
    translate(
      calc(-50% + var(--knob-x)),
      calc(-50% + var(--knob-y))
    );
  pointer-events: none;
  will-change: transform;
}

.virtual-joystick.active .virtual-joystick-base {
  border-color: rgba(255, 212, 106, 0.85);
}

@media (pointer: fine) and (hover: hover) {
  .virtual-joystick:not(.force-visible) {
    display: none !important;
  }
}

@media (max-width: 700px) {
  .control-options-grid {
    grid-template-columns: 1fr;
  }

  .control-bindings-table {
    min-width: 370px;
  }

  .virtual-joystick {
    bottom: max(12px, env(safe-area-inset-bottom));
  }
}


/* PANNEAU DE COSMÉTIQUES 8-BIT */
.cosmetic-settings select {
  width: 100%;
  color: var(--text);
  background: #050505;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  padding: 7px;
}

.cosmetic-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.65fr);
  gap: 10px;
  align-items: end;
  margin-bottom: 11px;
}

.cosmetic-current {
  min-height: 54px;
  display: grid;
  align-content: center;
  padding: 7px 9px;
  border: 1px solid rgba(255, 212, 106, 0.28);
  background: rgba(255, 212, 106, 0.035);
}

.cosmetic-current span {
  color: var(--muted);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cosmetic-current strong {
  margin-top: 2px;
  color: #ffd46a;
  font-size: 0.76rem;
}

.hat-cosmetic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.hat-cosmetic-card {
  min-width: 0;
  min-height: 90px;
  padding: 6px 4px;
  display: grid;
  place-items: center;
  gap: 3px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 5px;
  color: #cfcfcf;
  background: rgba(255, 255, 255, 0.025);
  text-align: center;
}

.hat-cosmetic-card:hover,
.hat-cosmetic-card:focus-visible {
  border-color: rgba(255, 212, 106, 0.55);
  background: rgba(255, 212, 106, 0.045);
}

.hat-cosmetic-card.selected {
  border-color: #ffd46a;
  color: #ffd46a;
  background: rgba(255, 212, 106, 0.075);
  box-shadow: inset 0 0 12px rgba(255, 212, 106, 0.07);
}

.hat-cosmetic-card span {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.64rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hat-cosmetic-preview {
  display: block;
  width: 72px;
  height: 54px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.cosmetic-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 9px;
}

.cosmetic-help {
  margin-bottom: 0;
  line-height: 1.45;
}

@media (max-width: 700px) {
  .cosmetic-toolbar {
    grid-template-columns: 1fr;
  }

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

  .hat-cosmetic-card {
    min-height: 84px;
  }
}


/* TAILLE DES CHAPEAUX COSMÉTIQUES */
.cosmetic-toolbar {
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.65fr) minmax(150px, 0.8fr);
}

.cosmetic-size-control {
  min-width: 0;
}

.cosmetic-size-control input[type="range"] {
  width: 100%;
}

@media (max-width: 850px) {
  .cosmetic-toolbar {
    grid-template-columns: 1fr;
  }
}


/* VOLETS COMPACTS DES PARAMÈTRES DE TEST */
#settingsForm {
  display: grid;
  gap: 8px;
}

.settings-accordion {
  margin: 0;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.018);
}

.settings-accordion-summary {
  min-height: 42px;
  padding: 9px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  color: #f2f2f2;
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.settings-accordion-summary::-webkit-details-marker {
  display: none;
}

.settings-accordion-summary::before {
  content: "▶";
  flex: 0 0 auto;
  color: #ffd46a;
  font-size: 0.68rem;
  transition: transform 150ms ease;
}

.settings-accordion[open] > .settings-accordion-summary::before {
  transform: rotate(90deg);
}

.settings-accordion[open] > .settings-accordion-summary {
  border-bottom: 1px solid var(--line);
  background: rgba(255, 212, 106, 0.055);
}

.settings-accordion-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 700;
}

.settings-accordion-hint {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.settings-accordion[open] .settings-accordion-hint {
  color: #ffd46a;
}

.settings-accordion-content {
  margin: 0;
  padding: 11px;
  border: 0;
  min-inline-size: 0;
}

#settingsForm > .primary-btn {
  margin-top: 4px;
}

/* PLEIN ÉCRAN LIMITÉ À L'ARÈNE */
.crt-frame:fullscreen,
.crt-frame:-webkit-full-screen,
.crt-frame.arena-fullscreen-fallback {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  display: grid;
  place-items: center;
  background: #000;
  box-shadow: none;
}

.crt-frame:fullscreen::before,
.crt-frame:-webkit-full-screen::before,
.crt-frame.arena-fullscreen-fallback::before {
  border-radius: 0;
}

.crt-frame:fullscreen canvas,
.crt-frame:-webkit-full-screen canvas,
.crt-frame.arena-fullscreen-fallback canvas {
  width: auto;
  height: auto;
  max-width: 100vw;
  max-height: 100vh;
  object-fit: contain;
}

.crt-frame.arena-fullscreen-fallback {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

body.arena-fullscreen-fallback-active {
  overflow: hidden;
}

body.arena-fullscreen-fallback-active .virtual-joystick {
  z-index: 1002;
}


/* CHOIX DE LA TAILLE DE L'ARÈNE AVANT LA PARTIE */
.arena-size-selector {
  margin: 10px 0 13px;
  padding: 11px;
  border: 1px solid rgba(255, 212, 106, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 212, 106, 0.045), rgba(255, 255, 255, 0.018));
}

.arena-size-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.arena-size-header strong {
  color: #fff;
  font-size: 0.84rem;
}

.arena-size-header p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.68rem;
}

#arenaSizeSelectedLabel {
  flex: 0 0 auto;
  color: #ffd46a;
  font-size: 0.68rem;
  text-align: right;
}

.arena-size-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.arena-size-card {
  min-width: 0;
  min-height: 112px;
  padding: 8px 7px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  color: #d0d0d0;
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(255, 255, 255, 0.16);
  text-align: center;
}

.arena-size-card:hover,
.arena-size-card:focus-visible {
  border-color: rgba(255, 212, 106, 0.58);
  background: rgba(255, 212, 106, 0.045);
}

.arena-size-card.selected {
  color: #ffd46a;
  border-color: #ffd46a;
  background: rgba(255, 212, 106, 0.08);
  box-shadow: inset 0 0 14px rgba(255, 212, 106, 0.07);
}

.arena-size-card strong {
  font-size: 0.77rem;
}

.arena-size-card > span:not(.arena-size-icon) {
  font-size: 0.67rem;
}

.arena-size-card small {
  max-width: 150px;
  color: var(--muted);
  font-size: 0.6rem;
  line-height: 1.25;
}

.arena-size-icon {
  position: relative;
  width: 50px;
  height: 29px;
  display: block;
  border: 2px solid currentColor;
  background:
    linear-gradient(135deg, transparent 46%, rgba(255,255,255,0.11) 47% 53%, transparent 54%);
  box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.06);
}

.arena-size-icon.small {
  width: 38px;
  height: 22px;
}

.arena-size-icon.large {
  width: 62px;
  height: 35px;
}

.arena-size-icon::before,
.arena-size-icon::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background: currentColor;
}

.arena-size-icon::before {
  left: 4px;
  top: 4px;
}

.arena-size-icon::after {
  right: 4px;
  bottom: 4px;
}

.arena-size-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.62rem;
  text-align: center;
}

@media (max-width: 620px) {
  .arena-size-header {
    align-items: flex-start;
    flex-direction: column;
  }

  #arenaSizeSelectedLabel {
    text-align: left;
  }

  .arena-size-grid {
    grid-template-columns: 1fr;
  }

  .arena-size-card {
    min-height: 82px;
    grid-template-columns: 68px 1fr;
    grid-template-rows: repeat(3, auto);
    justify-items: start;
    text-align: left;
  }

  .arena-size-card .arena-size-icon {
    grid-row: 1 / 4;
    align-self: center;
    justify-self: center;
  }

  .arena-size-card small {
    max-width: none;
  }
}


/* COULEUR DE L'ARÈNE AVANT LE LANCEMENT */
.arena-color-panel {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.24);
}

.arena-color-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.arena-color-heading strong {
  display: block;
  color: #fff;
  font-size: 0.78rem;
}

.arena-color-heading small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.61rem;
}

.arena-color-picker-label {
  min-width: 128px;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 38px;
  gap: 7px;
  color: #d7d7d7;
  font-size: 0.65rem;
}

#arenaColorPicker {
  width: 38px;
  height: 30px;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: #050505;
  cursor: pointer;
}

.arena-color-swatches {
  display: grid;
  grid-template-columns: repeat(6, minmax(34px, 1fr));
  gap: 6px;
}

.arena-color-swatch {
  position: relative;
  min-width: 0;
  height: 34px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  background: var(--arena-swatch-color, #000);
}

.arena-color-swatch::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.arena-color-swatch:hover,
.arena-color-swatch:focus-visible {
  border-color: rgba(255, 255, 255, 0.75);
}

.arena-color-swatch.selected {
  border-color: #ffd46a;
  box-shadow: 0 0 10px rgba(255, 212, 106, 0.28);
}

.arena-color-swatch[data-arena-color="#000000"] {
  --arena-swatch-color: #000000;
}

.arena-color-swatch[data-arena-color="#081426"] {
  --arena-swatch-color: #081426;
}

.arena-color-swatch[data-arena-color="#102617"] {
  --arena-swatch-color: #102617;
}

.arena-color-swatch[data-arena-color="#2a111a"] {
  --arena-swatch-color: #2a111a;
}

.arena-color-swatch[data-arena-color="#24162f"] {
  --arena-swatch-color: #24162f;
}

.arena-color-swatch[data-arena-color="#2a2410"] {
  --arena-swatch-color: #2a2410;
}

.arena-color-preview {
  position: relative;
  height: 34px;
  margin-top: 8px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.66);
  background: var(--arena-preview-color, #000000);
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.55);
}

.arena-color-preview span {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fff;
  box-shadow: 0 0 5px rgba(255,255,255,0.75);
}

.arena-color-preview span:nth-child(1) {
  left: 14%;
  top: 30%;
}

.arena-color-preview span:nth-child(2) {
  left: 49%;
  top: 56%;
}

.arena-color-preview span:nth-child(3) {
  right: 16%;
  top: 22%;
}

@media (max-width: 620px) {
  .arena-color-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .arena-color-picker-label {
    width: 100%;
    grid-template-columns: 1fr 50px;
  }

  #arenaColorPicker {
    width: 50px;
  }

  .arena-color-swatches {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* =========================================================
   VERSION MOBILE / TABLETTE EN PAYSAGE
   ========================================================= */

.arena-fullscreen-stage {
  position: relative;
  min-width: 0;
  width: 100%;
}

.fullscreen-exit-btn {
  display: none;
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  z-index: 1105;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.55);
  font-size: 1rem;
  line-height: 1;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.landscape-prompt {
  position: absolute;
  inset: 0;
  z-index: 40;
  padding:
    max(20px, env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.91);
  text-align: center;
}

.landscape-prompt.hidden {
  display: none !important;
}

.landscape-prompt strong {
  color: #ffd46a;
  font-size: 1rem;
}

.landscape-prompt p {
  max-width: 360px;
  margin: 0;
  color: #d7d7d7;
  font-size: 0.78rem;
  line-height: 1.45;
}

.landscape-prompt button {
  margin-top: 4px;
  border-color: rgba(255, 212, 106, 0.7);
  color: #ffd46a;
}

.landscape-device-icon {
  position: relative;
  width: 64px;
  height: 38px;
  border: 3px solid #ffd46a;
  border-radius: 7px;
  animation: landscape-device-tilt 1.4s ease-in-out infinite alternate;
}

.landscape-device-icon span {
  position: absolute;
  right: 4px;
  top: 50%;
  width: 3px;
  height: 8px;
  border-radius: 3px;
  background: #ffd46a;
  transform: translateY(-50%);
}

@keyframes landscape-device-tilt {
  from { transform: rotate(90deg) scale(0.92); }
  to { transform: rotate(0deg) scale(1); }
}

/* Le conteneur plein écran inclut désormais le joystick. */
.arena-fullscreen-stage:fullscreen,
.arena-fullscreen-stage:-webkit-full-screen,
.arena-fullscreen-stage.arena-fullscreen-fallback {
  position: fixed;
  inset: 0;
  z-index: 1100;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
}

.arena-fullscreen-stage:fullscreen .crt-frame,
.arena-fullscreen-stage:-webkit-full-screen .crt-frame,
.arena-fullscreen-stage.arena-fullscreen-fallback .crt-frame {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  display: grid;
  place-items: center;
  background: #000;
  box-shadow: none;
}

.arena-fullscreen-stage:fullscreen .crt-frame::before,
.arena-fullscreen-stage:-webkit-full-screen .crt-frame::before,
.arena-fullscreen-stage.arena-fullscreen-fallback .crt-frame::before {
  border-radius: 0;
}

.arena-fullscreen-stage:fullscreen canvas,
.arena-fullscreen-stage:-webkit-full-screen canvas,
.arena-fullscreen-stage.arena-fullscreen-fallback canvas {
  width: auto;
  height: auto;
  max-width: 100vw;
  max-height: 100dvh;
  object-fit: contain;
}

.arena-fullscreen-stage:fullscreen .fullscreen-exit-btn,
.arena-fullscreen-stage:-webkit-full-screen .fullscreen-exit-btn,
.arena-fullscreen-stage.arena-fullscreen-fallback .fullscreen-exit-btn {
  display: grid;
}

/* Joystick toujours au-dessus de l’arène et des effets CRT en plein écran. */
.arena-fullscreen-stage:fullscreen .virtual-joystick,
.arena-fullscreen-stage:-webkit-full-screen .virtual-joystick,
.arena-fullscreen-stage.arena-fullscreen-fallback .virtual-joystick {
  z-index: 1104;
}

body.arena-fullscreen-fallback-active {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0;
  background: #000;
}

/* Mise en page paysage dédiée aux appareils tactiles. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 900px) {
  html,
  body {
    min-height: 100dvh;
  }

  body {
    padding:
      max(4px, env(safe-area-inset-top))
      max(6px, env(safe-area-inset-right))
      max(4px, env(safe-area-inset-bottom))
      max(6px, env(safe-area-inset-left));
  }

  .app-shell {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .game-column {
    min-width: 0;
  }

  .topbar {
    margin-bottom: 6px;
    flex-direction: row;
    align-items: center;
  }

  .topbar h1 {
    font-size: clamp(0.9rem, 2.8vw, 1.35rem);
  }

  .topbar .subtitle {
    font-size: 0.65rem;
  }

  .top-actions {
    gap: 5px;
    flex-wrap: nowrap;
  }

  .top-actions button,
  .status-badge {
    min-height: 30px;
    padding: 5px 8px;
    font-size: 0.62rem;
  }

  .status-badge {
    width: auto;
    order: initial;
  }

  .scoreboard {
    grid-template-columns: 1fr minmax(170px, 0.82fr) 1fr;
    gap: 6px;
    margin-bottom: 6px;
  }

  .player-card,
  .match-card {
    min-height: 68px;
    padding: 7px 9px;
  }

  .player-title,
  .cooldown-line,
  .corner-strip {
    font-size: 0.65rem;
  }

  .score-line {
    margin-top: 2px;
    font-size: 1rem;
  }

  #timerDisplay {
    font-size: 1.1rem;
  }

  .arena-fullscreen-stage {
    width: 100%;
  }

  .crt-frame {
    width: 100%;
    max-height: calc(100dvh - 154px);
    border-width: 7px;
    border-radius: 16px;
  }

  .crt-frame canvas {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100dvh - 168px);
    margin: 0 auto;
  }

  .controls-card {
    display: none;
  }

  .settings-panel {
    position: static;
    max-height: none;
    padding: 10px;
  }

  .virtual-joystick {
    bottom: max(10px, env(safe-area-inset-bottom));
  }
}

/* Sur téléphone en paysage très bas, seuls les éléments essentiels restent visibles. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
  .topbar {
    margin-bottom: 4px;
  }

  .topbar > div:first-child {
    display: none;
  }

  .scoreboard {
    margin-bottom: 4px;
  }

  .player-card,
  .match-card {
    min-height: 56px;
    padding: 5px 7px;
  }

  .cooldown-line,
  .corner-strip,
  #builderDisplay,
  #logoSpeedDisplay,
  #cornerAssistDisplay {
    display: none;
  }

  .crt-frame {
    max-height: calc(100dvh - 76px);
  }

  .crt-frame canvas {
    max-height: calc(100dvh - 90px);
  }
}

/* L’avertissement de rotation est uniquement pertinent en portrait tactile. */
@media (pointer: coarse) and (orientation: portrait) and (max-width: 1100px) {
  .landscape-prompt:not(.hidden) {
    display: grid;
  }
}


/* En portrait plein écran, le message de rotation passe devant les contrôles. */
.arena-fullscreen-stage:fullscreen .landscape-prompt:not(.hidden),
.arena-fullscreen-stage:-webkit-full-screen .landscape-prompt:not(.hidden),
.arena-fullscreen-stage.arena-fullscreen-fallback .landscape-prompt:not(.hidden) {
  z-index: 1106;
}

.arena-fullscreen-stage:fullscreen .fullscreen-exit-btn,
.arena-fullscreen-stage:-webkit-full-screen .fullscreen-exit-btn,
.arena-fullscreen-stage.arena-fullscreen-fallback .fullscreen-exit-btn {
  z-index: 1107;
}


/* =========================================================
   MODE CHAOS
   ========================================================= */

.chaos-mode-panel {
  border-color: rgba(255, 76, 76, 0.35);
}

.chaos-mode-panel.open {
  box-shadow: inset 0 0 22px rgba(255, 76, 76, 0.05);
}

.chaos-loadout-card {
  border-color: rgba(255, 100, 70, 0.3);
  background:
    linear-gradient(180deg, rgba(75, 14, 18, 0.22), rgba(20, 10, 14, 0.32));
}

.chaos-loadout-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(145px, 0.55fr);
  gap: 12px;
  align-items: end;
  margin-bottom: 10px;
}

.chaos-loadout-header strong {
  color: #ff9a72;
  font-size: 0.85rem;
}

.chaos-loadout-header small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.65rem;
  line-height: 1.35;
}

.chaos-player-choice {
  margin: 0;
  grid-template-columns: 1fr;
  gap: 5px;
}

.chaos-player-choice select {
  width: 100%;
  color: #fff;
  background: #080506;
  border: 1px solid rgba(255, 120, 80, 0.38);
  padding: 7px;
}

.chaos-loadout-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 11px;
}

.chaos-loadout-slot {
  position: relative;
  min-width: 0;
  min-height: 78px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  border-color: rgba(255, 126, 80, 0.62);
  background: rgba(255, 80, 55, 0.08);
  color: #ffb18d;
}

.chaos-loadout-slot.empty {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.018);
  color: #777;
}

.chaos-slot-number {
  position: absolute;
  left: 6px;
  top: 5px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  font-size: 0.58rem;
}

.chaos-loadout-slot strong {
  font-size: 0.74rem;
}

.chaos-loadout-slot small {
  color: var(--muted);
  font-size: 0.57rem;
}

.chaos-skill-library {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.chaos-skill-card {
  min-width: 0;
  min-height: 82px;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.025);
  color: #ddd;
  text-align: left;
}

button.chaos-skill-card {
  cursor: pointer;
}

button.chaos-skill-card:hover,
button.chaos-skill-card:focus-visible,
.chaos-skill-card.selected {
  border-color: #ff825c;
  background: rgba(255, 80, 45, 0.09);
}

.chaos-skill-card.locked {
  opacity: 0.36;
  filter: grayscale(1);
}

.chaos-skill-card strong {
  display: block;
  color: #fff;
  font-size: 0.72rem;
}

.chaos-skill-card small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.58rem;
  line-height: 1.3;
}

.chaos-skill-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 130, 85, 0.62);
  background: rgba(255, 85, 50, 0.08);
  color: #ff9b70;
}

.dash-icon {
  position: relative;
  overflow: hidden;
}

.dash-icon i {
  position: absolute;
  height: 4px;
  background: currentColor;
  transform: skewX(-28deg);
}

.dash-icon i:nth-child(1) {
  width: 27px;
  top: 11px;
  left: 8px;
}

.dash-icon i:nth-child(2) {
  width: 21px;
  top: 20px;
  left: 12px;
}

.dash-icon i:nth-child(3) {
  width: 14px;
  top: 29px;
  left: 18px;
}

.locked-icon {
  font-size: 1.15rem;
  font-weight: 800;
}

.chaos-loadout-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 9px;
}

.chaos-mode-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.chaos-launch-button {
  border-color: rgba(255, 108, 70, 0.48);
}

.chaos-launch-button:hover,
.chaos-launch-button:focus-visible {
  border-color: #ff825c;
  background: rgba(255, 80, 45, 0.11);
}

/* Paramètres Dash */
.chaos-test-skill-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  padding: 8px;
  border: 1px solid rgba(255, 115, 75, 0.25);
  background: rgba(255, 75, 40, 0.055);
}

.chaos-test-skill-title strong {
  color: #ff9f79;
}

.chaos-test-skill-title small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.62rem;
}

.chaos-test-dash-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #ff825c;
  color: #ff825c;
  font-size: 1.2rem;
  font-weight: 900;
}

.chaos-settings-help {
  margin: 9px 0 0;
}

/* Touch buttons for equipped skills */
.chaos-touch-skills {
  position: fixed;
  right: max(15px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 1104;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  pointer-events: auto;
  touch-action: manipulation;
}

.chaos-touch-skills.hidden {
  display: none !important;
}

.virtual-joystick.right-side ~ .chaos-touch-skills {
  right: auto;
  left: max(15px, env(safe-area-inset-left));
}

.chaos-touch-skill-button {
  position: relative;
  width: 68px;
  height: 68px;
  padding: 7px 5px 4px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1px;
  border-radius: 50%;
  border: 2px solid rgba(255, 132, 82, 0.78);
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.2), transparent 25%),
    rgba(70, 14, 10, 0.77);
  color: #ffb08b;
  box-shadow:
    0 0 14px rgba(255, 70, 30, 0.22),
    inset 0 0 12px rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.chaos-touch-skill-button:active {
  transform: scale(0.92);
}

.chaos-touch-skill-button.cooldown {
  border-color: rgba(255, 255, 255, 0.2);
  color: #8d8d8d;
  filter: grayscale(0.8);
}

.chaos-touch-skill-button.empty {
  opacity: 0.34;
  border-style: dashed;
}

.chaos-touch-skill-button strong {
  font-size: 0.58rem;
}

.chaos-touch-skill-button small {
  color: currentColor;
  font-size: 0.52rem;
}

.chaos-touch-key {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #0a0707;
  border: 1px solid currentColor;
  font-size: 0.55rem;
}

/* Dash visual state */
.player-card.dash-active {
  box-shadow:
    0 0 0 1px #ff8a61,
    0 0 18px rgba(255, 90, 45, 0.34);
}

.chaos-bindings-table {
  min-width: 360px;
}

@media (max-width: 700px) {
  .chaos-loadout-header,
  .chaos-mode-actions {
    grid-template-columns: 1fr;
  }

  .chaos-skill-library {
    grid-template-columns: 1fr;
  }

  .chaos-loadout-slots {
    grid-template-columns: repeat(3, minmax(90px, 1fr));
    overflow-x: auto;
  }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 650px) {
  .chaos-touch-skills {
    bottom: max(9px, env(safe-area-inset-bottom));
  }

  .chaos-touch-skill-button {
    width: 58px;
    height: 58px;
  }
}


/* =========================================================
   SKILL CHAOS : REBOND
   ========================================================= */

.passive-skill-card {
  border-color: rgba(98, 219, 255, 0.28);
}

.passive-skill-card:hover,
.passive-skill-card:focus-visible,
.passive-skill-card.selected {
  border-color: #63dbff;
  background: rgba(45, 178, 255, 0.09);
}

.passive-skill-card strong {
  color: #a8ebff;
}

.rebound-icon {
  position: relative;
  overflow: hidden;
  color: #68dcff;
  border-color: rgba(104, 220, 255, 0.7);
  background: rgba(50, 165, 255, 0.08);
}

.rebound-icon i {
  position: absolute;
  display: block;
  height: 3px;
  background: currentColor;
  transform-origin: center;
}

.rebound-icon i:nth-child(1) {
  width: 28px;
  left: 4px;
  top: 25px;
  transform: rotate(-31deg);
}

.rebound-icon i:nth-child(2) {
  width: 18px;
  right: 3px;
  top: 13px;
  transform: rotate(48deg);
}

.rebound-icon b {
  position: absolute;
  left: 8px;
  top: 7px;
  width: 9px;
  height: 9px;
  border: 3px solid currentColor;
  border-left-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-35deg);
}

.chaos-loadout-slot[data-skill-id="rebound"] {
  border-color: rgba(99, 219, 255, 0.72);
  color: #9be8ff;
  background: rgba(50, 170, 255, 0.08);
}

.chaos-loadout-slot[data-skill-id="rebound"] small {
  color: #79cfe9;
}

.chaos-touch-skill-button.passive {
  border-color: rgba(99, 219, 255, 0.65);
  color: #a8ebff;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.2), transparent 25%),
    rgba(8, 49, 67, 0.82);
}

.player-card.rebound-active {
  box-shadow:
    0 0 0 1px #65ddff,
    0 0 20px rgba(60, 195, 255, 0.35);
}


/* =========================================================
   SKILL CHAOS : TACKLE
   ========================================================= */

.tackle-skill-card {
  border-color: rgba(255, 186, 70, 0.3);
}

.tackle-skill-card:hover,
.tackle-skill-card:focus-visible,
.tackle-skill-card.selected {
  border-color: #ffbd4b;
  background: rgba(255, 177, 45, 0.1);
}

.tackle-skill-card strong {
  color: #ffd38b;
}

.tackle-icon {
  position: relative;
  overflow: hidden;
  color: #ffbd4b;
  border-color: rgba(255, 189, 75, 0.72);
  background: rgba(255, 160, 35, 0.09);
}

.tackle-icon i {
  position: absolute;
  left: 4px;
  height: 4px;
  background: currentColor;
  transform: skewX(-28deg);
}

.tackle-icon i:nth-child(1) {
  top: 12px;
  width: 22px;
}

.tackle-icon i:nth-child(2) {
  top: 26px;
  width: 15px;
}

.tackle-icon b {
  position: absolute;
  right: 4px;
  top: 11px;
  width: 14px;
  height: 18px;
  border: 4px solid currentColor;
  border-left-width: 6px;
  transform: skewX(-12deg);
}

.chaos-loadout-slot[data-skill-id="tackle"] {
  border-color: rgba(255, 190, 75, 0.76);
  color: #ffd28a;
  background: rgba(255, 165, 35, 0.09);
}

.chaos-touch-skill-button[data-skill-id="tackle"] {
  border-color: rgba(255, 190, 75, 0.7);
  color: #ffd28a;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.2), transparent 25%),
    rgba(75, 46, 7, 0.84);
}

.tackle-test-title {
  margin-top: 14px;
  border-color: rgba(255, 189, 75, 0.3);
  background: rgba(255, 170, 40, 0.06);
}

.tackle-test-title strong {
  color: #ffd28a;
}

.tackle-test-icon {
  color: #ffbd4b;
  border-color: #ffbd4b;
}

.player-card.tackle-hit {
  box-shadow:
    0 0 0 1px #ffbd4b,
    0 0 22px rgba(255, 170, 45, 0.4);
}


/* =========================================================
   SKILL CHAOS : MUR DE FLAMME
   ========================================================= */

.flame-wall-skill-card {
  border-color: rgba(255, 112, 36, 0.36);
}

.flame-wall-skill-card:hover,
.flame-wall-skill-card:focus-visible,
.flame-wall-skill-card.selected {
  border-color: #ff7a2d;
  background: rgba(255, 82, 20, 0.11);
}

.flame-wall-skill-card strong {
  color: #ffb36b;
}

.flame-wall-icon {
  position: relative;
  overflow: hidden;
  color: #ff8a36;
  border-color: rgba(255, 122, 45, 0.72);
  background: rgba(255, 70, 20, 0.1);
}

.flame-wall-icon b {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 7px;
  height: 4px;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.flame-wall-icon i {
  position: absolute;
  bottom: 11px;
  width: 8px;
  border-radius: 50% 50% 45% 45%;
  background: currentColor;
  transform-origin: bottom center;
}

.flame-wall-icon i:nth-child(1) {
  left: 7px;
  height: 17px;
  transform: rotate(-14deg);
}

.flame-wall-icon i:nth-child(2) {
  left: 17px;
  height: 25px;
  background: #ffd15c;
}

.flame-wall-icon i:nth-child(3) {
  right: 7px;
  height: 15px;
  transform: rotate(15deg);
}

.flame-wall-test-title {
  border-color: rgba(255, 112, 36, 0.35);
  background: rgba(255, 70, 18, 0.07);
}

.flame-wall-test-icon {
  color: #ff8b36;
  border-color: #ff8b36;
}

.chaos-loadout-slot[data-skill-id="flame_wall"] {
  border-color: rgba(255, 120, 44, 0.78);
  color: #ffb16b;
  background: rgba(255, 73, 15, 0.09);
}

.chaos-touch-skill-button[data-skill-id="flame_wall"] {
  border-color: rgba(255, 117, 38, 0.76);
  color: #ffad66;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.23), transparent 25%),
    rgba(72, 22, 5, 0.86);
}

.chaos-touch-skill-button.mode-active[data-skill-id="flame_wall"] {
  color: #fff4b0;
  border-color: #ffcf55;
  box-shadow:
    0 0 20px rgba(255, 76, 20, 0.55),
    inset 0 0 17px rgba(255, 190, 50, 0.18);
  animation: flame-skill-pulse 0.65s ease-in-out infinite alternate;
}

@keyframes flame-skill-pulse {
  from { transform: scale(0.97); }
  to { transform: scale(1.04); }
}

.player-card.flame-wall-mode {
  box-shadow:
    0 0 0 1px #ff8a36,
    0 0 19px rgba(255, 78, 22, 0.38);
}

.player-card.flame-panic-active {
  animation: flame-panic-card 0.12s steps(2, end) infinite;
}

@keyframes flame-panic-card {
  0% { transform: translate(0, 0); }
  25% { transform: translate(1px, -1px); }
  50% { transform: translate(-1px, 1px); }
  75% { transform: translate(1px, 1px); }
  100% { transform: translate(-1px, -1px); }
}


/* OPTION PRIVÉE DU MUR DE FLAMME */
.flame-private-animation-row {
  margin-top: 10px;
  align-items: start;
}

.flame-private-animation-row > span {
  display: block;
  line-height: 1.3;
}

.flame-private-animation-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.61rem;
  font-weight: 400;
}

.player-card.flame-wall-mode-private {
  box-shadow:
    0 0 0 1px rgba(255, 138, 54, 0.78),
    inset 0 0 15px rgba(255, 92, 24, 0.09);
}


/* =========================================================
   SKILL CHAOS : MUR PORTAIL
   ========================================================= */

.portal-wall-skill-card {
  border-color: rgba(151, 95, 255, 0.4);
}

.portal-wall-skill-card:hover,
.portal-wall-skill-card:focus-visible,
.portal-wall-skill-card.selected {
  border-color: #a979ff;
  background: rgba(114, 61, 255, 0.12);
}

.portal-wall-skill-card strong {
  color: #d6b9ff;
}

.portal-wall-icon {
  position: relative;
  overflow: hidden;
  color: #b080ff;
  border-color: rgba(176, 128, 255, 0.72);
  background: rgba(93, 46, 190, 0.13);
}

.portal-wall-icon i {
  position: absolute;
  top: 9px;
  width: 12px;
  height: 23px;
  border: 3px solid currentColor;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}

.portal-wall-icon i:nth-child(1) {
  left: 4px;
}

.portal-wall-icon i:nth-child(2) {
  right: 4px;
}

.portal-wall-icon b {
  position: absolute;
  top: 19px;
  width: 10px;
  height: 3px;
  background: #78e5ff;
  box-shadow: 0 0 7px #78e5ff;
}

.portal-wall-icon b:nth-of-type(1) {
  left: 15px;
}

.portal-wall-icon b:nth-of-type(2) {
  right: 15px;
}

.portal-wall-test-title {
  border-color: rgba(159, 103, 255, 0.38);
  background: rgba(101, 52, 220, 0.08);
}

.portal-wall-test-icon {
  color: #b488ff;
  border-color: #b488ff;
}

.portal-test-option {
  margin-top: 8px;
  align-items: start;
}

.portal-test-option > span {
  line-height: 1.3;
}

.portal-test-option small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.61rem;
  font-weight: 400;
}

.chaos-loadout-slot[data-skill-id="portal_wall"] {
  border-color: rgba(170, 118, 255, 0.78);
  color: #d4b6ff;
  background: rgba(105, 55, 230, 0.1);
}

.chaos-touch-skill-button[data-skill-id="portal_wall"] {
  border-color: rgba(171, 119, 255, 0.8);
  color: #ddc6ff;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.22), transparent 25%),
    rgba(44, 21, 85, 0.88);
}

.chaos-touch-skill-button.mode-active[data-skill-id="portal_wall"] {
  border-color: #7de8ff;
  color: #f0e5ff;
  box-shadow:
    0 0 22px rgba(132, 79, 255, 0.62),
    inset 0 0 18px rgba(86, 223, 255, 0.18);
  animation: portal-skill-pulse 0.72s ease-in-out infinite alternate;
}

@keyframes portal-skill-pulse {
  from { transform: scale(0.97); filter: hue-rotate(0deg); }
  to { transform: scale(1.04); filter: hue-rotate(25deg); }
}

.player-card.portal-wall-mode {
  box-shadow:
    0 0 0 1px #ac78ff,
    0 0 20px rgba(126, 70, 255, 0.42);
}


/* =========================================================
   SKILL CHAOS : TRAP WALL
   Les murs posés gardent volontairement le rendu des murs normaux.
   ========================================================= */

.trap-wall-skill-card {
  border-color: rgba(102, 230, 160, 0.35);
}

.trap-wall-skill-card:hover,
.trap-wall-skill-card:focus-visible,
.trap-wall-skill-card.selected {
  border-color: #77e8a9;
  background: rgba(52, 190, 112, 0.09);
}

.trap-wall-skill-card strong {
  color: #a8f3c8;
}

.trap-wall-icon {
  position: relative;
  overflow: hidden;
  color: #78e9aa;
  border-color: rgba(120, 233, 170, 0.7);
  background: rgba(42, 155, 93, 0.1);
}

.trap-wall-icon i {
  position: absolute;
  left: 6px;
  right: 6px;
  height: 3px;
  background: currentColor;
}

.trap-wall-icon i:nth-child(1) {
  top: 13px;
}

.trap-wall-icon i:nth-child(2) {
  bottom: 12px;
}

.trap-wall-icon b {
  position: absolute;
  left: 17px;
  top: 8px;
  width: 9px;
  height: 26px;
  border-left: 3px dashed currentColor;
  transform: rotate(28deg);
}

.trap-wall-test-title {
  border-color: rgba(108, 229, 161, 0.34);
  background: rgba(45, 164, 99, 0.07);
}

.trap-wall-test-icon {
  color: #79e9aa;
  border-color: #79e9aa;
}

.chaos-loadout-slot[data-skill-id="trap_wall"] {
  border-color: rgba(112, 232, 166, 0.74);
  color: #aaf4ca;
  background: rgba(44, 170, 102, 0.08);
}

.chaos-touch-skill-button[data-skill-id="trap_wall"] {
  border-color: rgba(111, 233, 164, 0.75);
  color: #b1f6cf;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.2), transparent 25%),
    rgba(14, 66, 39, 0.86);
}

.chaos-touch-skill-button.mode-active[data-skill-id="trap_wall"] {
  border-color: #b8ffd7;
  box-shadow:
    0 0 20px rgba(71, 226, 137, 0.48),
    inset 0 0 16px rgba(131, 255, 185, 0.13);
}


/* =========================================================
   SKILL CHAOS : MOVING WALL
   ========================================================= */

.moving-wall-skill-card {
  border-color: rgba(91, 226, 255, 0.4);
}

.moving-wall-skill-card:hover,
.moving-wall-skill-card:focus-visible,
.moving-wall-skill-card.selected {
  border-color: #65e4ff;
  background: rgba(42, 184, 255, 0.11);
}

.moving-wall-skill-card strong {
  color: #a9f2ff;
}

.moving-wall-icon {
  position: relative;
  overflow: hidden;
  color: #75e8ff;
  border-color: rgba(117, 232, 255, 0.75);
  background: rgba(39, 151, 210, 0.12);
}

.moving-wall-icon i {
  position: absolute;
  left: 6px;
  right: 6px;
  height: 3px;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.moving-wall-icon i:nth-child(1) { top: 15px; }
.moving-wall-icon i:nth-child(2) { top: 26px; }

.moving-wall-icon b {
  position: absolute;
  right: 3px;
  width: 9px;
  height: 9px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  transform: rotate(45deg);
}

.moving-wall-icon b:nth-of-type(1) { top: 11px; }
.moving-wall-icon b:nth-of-type(2) { top: 22px; }

.moving-wall-test-title {
  border-color: rgba(90, 224, 255, 0.38);
  background: rgba(42, 170, 230, 0.08);
}

.moving-wall-test-icon {
  color: #6ee8ff;
  border-color: #6ee8ff;
}

.chaos-loadout-slot[data-skill-id="moving_wall"] {
  border-color: rgba(104, 230, 255, 0.78);
  color: #b5f4ff;
  background: rgba(37, 167, 225, 0.09);
}

.chaos-touch-skill-button[data-skill-id="moving_wall"] {
  border-color: rgba(96, 229, 255, 0.78);
  color: #b9f5ff;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.22), transparent 25%),
    rgba(10, 54, 70, 0.88);
}

.chaos-touch-skill-button.mode-active[data-skill-id="moving_wall"] {
  border-color: #ffffff;
  color: #eaffff;
  box-shadow:
    0 0 22px rgba(76, 224, 255, 0.62),
    inset 0 0 18px rgba(132, 245, 255, 0.18);
  animation: moving-wall-skill-pulse 0.7s ease-in-out infinite alternate;
}

@keyframes moving-wall-skill-pulse {
  from { transform: translateX(-1px) scale(0.98); }
  to { transform: translateX(2px) scale(1.04); }
}

.player-card.moving-wall-mode {
  box-shadow:
    0 0 0 1px #6ee8ff,
    0 0 20px rgba(75, 222, 255, 0.42);
}


/* MOVING WALL — CONTRÔLE ADVERSE ET ACCÉLÉRATION */
.moving-wall-cooldown-note {
  margin: 8px 0 12px;
  padding: 9px 10px;
  border: 1px solid rgba(80, 224, 255, 0.28);
  background: rgba(35, 170, 210, 0.055);
}
.moving-wall-cooldown-note strong {
  display: block;
  color: #9ff2ff;
  font-size: 0.72rem;
}
.moving-wall-cooldown-note small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.61rem;
  line-height: 1.35;
}
.chaos-touch-skill-button.moving-wall-recharging {
  box-shadow:
    0 0 12px rgba(92, 226, 255, 0.2),
    inset 0 0 12px rgba(92, 226, 255, 0.06);
}


/* =========================================================
   DÉCOR DE SALON DE NUIT EN PLEIN ÉCRAN
   ========================================================= */

.arena-fullscreen-stage {
  --room-parallax-x: 0px;
  --room-parallax-y: 0px;
  --room-look-x: 0;
  --room-look-y: 0;
  --room-tv-shift: 0px;
  --room-tv-width: min(86vw, 1480px);
  --room-scene-opacity: 0;
  --room-tv-scale: 1;
}

.fullscreen-room-scene {
  display: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  image-rendering: pixelated;
  opacity: var(--room-scene-opacity);
  transition: opacity 0.25s ease;
  background:
    linear-gradient(180deg, #101733 0%, #091224 24%, #06090f 58%, #030406 100%);
}

.fullscreen-room-scene * {
  box-sizing: border-box;
}

.fullscreen-room-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 16%, rgba(94, 150, 255, 0.22), transparent 16%),
    radial-gradient(circle at 74% 18%, rgba(148, 100, 255, 0.12), transparent 14%),
    linear-gradient(180deg, rgba(255,255,255,0.035), transparent 20%, transparent 78%, rgba(0,0,0,0.24));
  opacity: 0.9;
}

.fullscreen-room-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 12px,
      rgba(255, 255, 255, 0.015) 12px 13px
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0 12px,
      rgba(0, 0, 0, 0.04) 12px 13px
    );
  opacity: 0.4;
}

.room-night-wall {
  position: absolute;
  inset: 0;
  transform: translate(
    calc(var(--room-parallax-x) * 0.2),
    calc(var(--room-parallax-y) * 0.1)
  );
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), transparent 28%),
    linear-gradient(0deg, rgba(0,0,0,0.38), transparent 18%);
}

.room-window {
  position: absolute;
  top: 6.5%;
  left: 14%;
  width: min(22vw, 330px);
  aspect-ratio: 1.22 / 1;
  border: 8px solid #121e3c;
  outline: 4px solid #04070f;
  background:
    linear-gradient(180deg, #122449 0%, #0d1835 32%, #08101f 100%);
  box-shadow:
    0 0 0 6px rgba(0, 0, 0, 0.3),
    0 14px 40px rgba(0, 0, 0, 0.45),
    inset 0 0 0 4px rgba(255, 255, 255, 0.04);
  transform:
    translate(
      calc(var(--room-parallax-x) * -0.35),
      calc(var(--room-parallax-y) * -0.28)
    );
}

.room-window::before,
.room-window::after {
  content: "";
  position: absolute;
  background: #101c39;
}

.room-window::before {
  inset: 0 47%;
}

.room-window::after {
  inset: 47% 0;
}

.room-window-moon {
  position: absolute;
  width: 18%;
  aspect-ratio: 1;
  top: 14%;
  right: 18%;
  border-radius: 4px;
  background:
    radial-gradient(circle at 32% 32%, #fff1bd 0 24%, #ffd46a 25% 58%, #a5651c 59% 100%);
  box-shadow:
    0 0 18px rgba(255, 212, 106, 0.35),
    0 0 36px rgba(255, 212, 106, 0.18);
}

.room-window-stars,
.room-window-city {
  position: absolute;
  inset: 0;
}

.room-window-stars::before {
  content: "";
  position: absolute;
  inset: 8% 8% 10% 8%;
  background:
    radial-gradient(circle at 10% 24%, rgba(255,255,255,0.8) 0 1px, transparent 2px),
    radial-gradient(circle at 35% 10%, rgba(255,255,255,0.75) 0 1px, transparent 2px),
    radial-gradient(circle at 56% 28%, rgba(255,255,255,0.65) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 16%, rgba(255,255,255,0.9) 0 1px, transparent 2px),
    radial-gradient(circle at 18% 68%, rgba(255,255,255,0.75) 0 1px, transparent 2px),
    radial-gradient(circle at 74% 62%, rgba(255,255,255,0.6) 0 1px, transparent 2px),
    radial-gradient(circle at 90% 52%, rgba(255,255,255,0.78) 0 1px, transparent 2px);
  animation: roomStarBlink 2.1s steps(2, end) infinite alternate;
}

.room-window-city::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 36%;
  background:
    linear-gradient(90deg,
      transparent 0 2%,
      #13192a 2% 8%,
      transparent 8% 12%,
      #0d1220 12% 18%,
      transparent 18% 22%,
      #151b2d 22% 30%,
      transparent 30% 34%,
      #101624 34% 42%,
      transparent 42% 46%,
      #171e30 46% 54%,
      transparent 54% 58%,
      #121828 58% 66%,
      transparent 66% 70%,
      #0e1422 70% 78%,
      transparent 78% 82%,
      #161d2f 82% 90%,
      transparent 90% 100%);
  clip-path: polygon(
    0 100%, 0 36%, 5% 36%, 5% 18%, 12% 18%, 12% 48%, 18% 48%, 18% 24%, 26% 24%,
    26% 8%, 34% 8%, 34% 42%, 41% 42%, 41% 30%, 48% 30%, 48% 12%, 56% 12%, 56% 54%,
    63% 54%, 63% 22%, 71% 22%, 71% 40%, 78% 40%, 78% 16%, 86% 16%, 86% 48%, 92% 48%,
    92% 32%, 100% 32%, 100% 100%
  );
  opacity: 0.95;
}

.room-window-city::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 10%;
  height: 14%;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 12px,
      rgba(255, 212, 106, 0.85) 12px 14px,
      transparent 14px 24px,
      rgba(255, 255, 255, 0.7) 24px 26px,
      transparent 26px 38px
    );
  opacity: 0.55;
  filter: blur(0.4px);
}

.room-tv-stand {
  position: absolute;
  left: 8%;
  right: 12%;
  bottom: 10%;
  height: 14%;
  border-top: 6px solid #8a6138;
  background:
    linear-gradient(180deg, #46321d 0%, #2b1e14 100%);
  box-shadow:
    0 0 0 4px #1b120a,
    0 12px 0 rgba(0, 0, 0, 0.2),
    inset 0 6px 0 rgba(255,255,255,0.06);
  transform:
    translate(
      calc(var(--room-parallax-x) * 0.14),
      calc(var(--room-parallax-y) * 0.1)
    );
}

.room-tv-stand::before,
.room-tv-stand::after {
  content: "";
  position: absolute;
  bottom: -42%;
  width: 18%;
  height: 42%;
  background: linear-gradient(180deg, #362517 0%, #21150d 100%);
  box-shadow: inset 0 4px 0 rgba(255,255,255,0.05);
}

.room-tv-stand::before { left: 8%; }
.room-tv-stand::after { right: 8%; }

.room-drink {
  position: absolute;
  left: 58%;
  bottom: 22%;
  width: 54px;
  height: 72px;
  border: 4px solid #201207;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.45) 0 14%, rgba(255,255,255,0.08) 14% 16%, transparent 16% 100%),
    linear-gradient(180deg, rgba(163, 92, 255, 0.9) 0%, rgba(86, 36, 190, 0.9) 60%, rgba(35, 14, 75, 0.92) 100%);
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,0.08),
    0 8px 20px rgba(0,0,0,0.35);
  transform:
    translate(
      calc(var(--room-parallax-x) * 0.3),
      calc(var(--room-parallax-y) * 0.22)
    );
}

.room-drink::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 6px;
  right: 6px;
  height: 8px;
  background: #d9f1ff;
  opacity: 0.6;
}

.drink-straw {
  position: absolute;
  left: 62%;
  top: -18px;
  width: 6px;
  height: 28px;
  background: linear-gradient(180deg, #f7fafc 0 50%, #ff4ed7 50% 100%);
  transform: rotate(18deg);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.18);
}

.room-side-table {
  position: absolute;
  right: -4%;
  bottom: 6%;
  width: min(22vw, 360px);
  height: min(24vh, 200px);
  border-top: 6px solid #8a6138;
  background:
    linear-gradient(180deg, #52371f 0%, #352214 100%);
  box-shadow:
    0 0 0 4px #1c130b,
    inset 0 6px 0 rgba(255,255,255,0.05);
  transform:
    translate(
      calc(var(--room-parallax-x) * 0.4),
      calc(var(--room-parallax-y) * 0.2)
    );
}

.room-side-table::before,
.room-side-table::after {
  content: "";
  position: absolute;
  bottom: -34%;
  width: 14%;
  height: 34%;
  background: linear-gradient(180deg, #3a2718 0%, #22160d 100%);
}

.room-side-table::before { left: 12%; }
.room-side-table::after { right: 12%; }

.room-arcade-controller {
  position: absolute;
  left: 50%;
  bottom: -1%;
  width: min(30vw, 420px);
  height: min(19vh, 150px);
  border: 6px solid #1d1d22;
  background:
    linear-gradient(180deg, #4c3b68 0%, #302343 100%);
  box-shadow:
    0 0 0 5px #090a10,
    0 14px 34px rgba(0,0,0,0.5),
    inset 0 4px 0 rgba(255,255,255,0.06);
  transform:
    translate(
      calc(-50% + (var(--room-parallax-x) * 0.08)),
      calc(var(--room-parallax-y) * 0.15)
    );
}

.room-arcade-controller::before {
  content: "";
  position: absolute;
  left: 6%;
  top: 16%;
  width: 54px;
  height: 54px;
  border: 4px solid #1b0d05;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, #ffe59c 0 22%, #ff9a3d 23% 52%, #4b1b08 53% 100%);
  box-shadow:
    0 0 0 4px rgba(255,255,255,0.04),
    0 0 14px rgba(255, 154, 61, 0.22);
}

.controller-stick {
  position: absolute;
  left: calc(6% + 23px);
  top: 8%;
  width: 10px;
  height: 36px;
  background: #f5e1bf;
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.28),
    0 0 8px rgba(255,255,255,0.1);
}

.controller-top-row {
  position: absolute;
  right: 10%;
  top: 22%;
  display: flex;
  gap: 12px;
}

.controller-top-row span {
  width: 26px;
  height: 26px;
  display: block;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.25);
}

.controller-top-row span:nth-child(1) { background: #32e6ff; }
.controller-top-row span:nth-child(2) { background: #ff4ed7; }
.controller-top-row span:nth-child(3) { background: #ffd46a; }

.controller-base-shadow {
  position: absolute;
  inset: auto 12% -16px 12%;
  height: 18px;
  background: rgba(0,0,0,0.38);
  filter: blur(8px);
}

.room-hand {
  position: absolute;
  bottom: 3%;
  width: min(18vw, 250px);
  height: min(22vh, 200px);
  background:
    linear-gradient(180deg, #d2a279 0%, #9c6e48 58%, #6d472b 100%);
  box-shadow:
    0 0 0 5px #2a1a10,
    inset 0 5px 0 rgba(255,255,255,0.12);
  clip-path: polygon(
    16% 100%, 8% 82%, 12% 56%, 20% 44%, 27% 16%, 41% 4%, 53% 16%, 56% 38%,
    60% 10%, 73% 5%, 82% 18%, 80% 45%, 86% 20%, 98% 16%, 100% 36%, 95% 58%,
    94% 77%, 86% 100%
  );
}

.room-hand-left {
  left: 22%;
  transform:
    rotate(10deg)
    translate(
      calc(var(--room-parallax-x) * 0.22),
      calc(var(--room-parallax-y) * 0.22)
    );
}

.room-hand-right {
  right: 19%;
  transform:
    scaleX(-1)
    rotate(10deg)
    translate(
      calc(var(--room-parallax-x) * -0.22),
      calc(var(--room-parallax-y) * 0.22)
    );
}

.room-floor-glow {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -5%;
  height: 34%;
  background:
    radial-gradient(ellipse at center, rgba(15, 27, 58, 0.38), rgba(0,0,0,0) 70%);
  transform:
    translate(
      calc(var(--room-parallax-x) * 0.06),
      calc(var(--room-parallax-y) * 0.04)
    );
}

.fullscreen-tv-shell {
  position: relative;
  z-index: 2;
  width: fit-content;
  transform:
    translate3d(var(--room-tv-shift), 0, 0)
    scale(var(--room-tv-scale));
  transition: transform 0.28s ease;
}

.fullscreen-tv-shell::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -28px;
  width: 38%;
  height: 20px;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, #4e555d 0%, #171d24 100%);
  box-shadow:
    0 0 0 4px #07090d,
    0 12px 28px rgba(0,0,0,0.5);
  z-index: -1;
}

.fullscreen-tv-shell::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -54px;
  width: 18%;
  height: 28px;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, #4e555d 0%, #161c24 100%);
  box-shadow:
    0 0 0 4px #07090d,
    0 14px 30px rgba(0,0,0,0.45);
  z-index: -2;
}

@keyframes roomStarBlink {
  from { opacity: 0.5; }
  to { opacity: 1; }
}

.arena-fullscreen-stage:fullscreen,
.arena-fullscreen-stage:-webkit-full-screen,
.arena-fullscreen-stage.arena-fullscreen-fallback {
  --room-scene-opacity: 1;
  background:
    radial-gradient(circle at 50% 12%, #142145 0%, #0a1022 26%, #030508 76%, #010101 100%);
}

.arena-fullscreen-stage:fullscreen .fullscreen-room-scene,
.arena-fullscreen-stage:-webkit-full-screen .fullscreen-room-scene,
.arena-fullscreen-stage.arena-fullscreen-fallback .fullscreen-room-scene {
  display: block;
}

.arena-fullscreen-stage:fullscreen .crt-frame,
.arena-fullscreen-stage:-webkit-full-screen .crt-frame,
.arena-fullscreen-stage.arena-fullscreen-fallback .crt-frame {
  width: var(--room-tv-width);
  height: auto;
  max-width: min(86vw, 1500px);
  max-height: min(82dvh, 980px);
  border: 16px solid #343840;
  border-radius: 26px;
  background: #050505;
  box-shadow:
    0 0 0 5px #090b11,
    0 20px 58px rgba(0, 0, 0, 0.72),
    inset 0 0 28px rgba(255,255,255,0.03);
}

.arena-fullscreen-stage:fullscreen .crt-frame::before,
.arena-fullscreen-stage:-webkit-full-screen .crt-frame::before,
.arena-fullscreen-stage.arena-fullscreen-fallback .crt-frame::before {
  border-radius: 10px;
  box-shadow:
    inset 0 0 35px rgba(0, 0, 0, 0.88),
    inset 0 0 5px rgba(255, 255, 255, 0.15);
}

.arena-fullscreen-stage:fullscreen canvas,
.arena-fullscreen-stage:-webkit-full-screen canvas,
.arena-fullscreen-stage.arena-fullscreen-fallback canvas {
  width: 100%;
  max-width: var(--room-tv-width);
  height: auto;
  max-height: 75dvh;
  object-fit: contain;
}

.arena-fullscreen-stage.arena-size-small {
  --room-tv-width: min(56vw, 900px);
  --room-tv-shift: -10.5vw;
}

.arena-fullscreen-stage.arena-size-classic {
  --room-tv-width: min(64vw, 1080px);
  --room-tv-shift: -8.5vw;
}

.arena-fullscreen-stage.arena-size-large {
  --room-tv-width: min(78vw, 1460px);
  --room-tv-shift: 0px;
}

.arena-fullscreen-stage.arena-size-small .room-window {
  left: 12%;
  width: min(24vw, 340px);
}

.arena-fullscreen-stage.arena-size-classic .room-window {
  left: 13%;
  width: min(22vw, 332px);
}

.arena-fullscreen-stage.arena-size-large .room-window {
  left: 8.5%;
  width: min(19vw, 300px);
}

.arena-fullscreen-stage.arena-size-large .room-drink {
  left: 56%;
}

.arena-fullscreen-stage.arena-size-small .room-drink,
.arena-fullscreen-stage.arena-size-classic .room-drink {
  left: 61%;
}

@media (max-width: 1100px) {
  .arena-fullscreen-stage.arena-size-small {
    --room-tv-width: min(60vw, 820px);
    --room-tv-shift: -7vw;
  }

  .arena-fullscreen-stage.arena-size-classic {
    --room-tv-width: min(69vw, 980px);
    --room-tv-shift: -5vw;
  }

  .room-window {
    left: 8%;
  }

  .room-side-table {
    width: min(24vw, 280px);
  }

  .room-arcade-controller {
    width: min(36vw, 380px);
  }

  .room-hand {
    width: min(20vw, 220px);
    height: min(22vh, 160px);
  }
}

@media (max-width: 760px) {
  .room-window {
    top: 4%;
    width: min(28vw, 220px);
  }

  .room-side-table {
    width: 190px;
    height: 120px;
  }

  .room-arcade-controller {
    width: min(44vw, 280px);
    height: min(18vh, 110px);
  }

  .controller-top-row span {
    width: 20px;
    height: 20px;
  }

  .room-drink {
    width: 42px;
    height: 58px;
  }

  .room-hand {
    width: 150px;
    height: 110px;
  }
}


/* =========================================================
   MODE CHAOS EN LIGNE
   ========================================================= */

.chaos-online-launch-card {
  margin-top: 12px;
  padding: 11px;
  border: 1px solid rgba(169, 120, 255, 0.36);
  background:
    linear-gradient(
      135deg,
      rgba(112, 64, 224, 0.095),
      rgba(54, 223, 255, 0.04)
    );
  box-shadow:
    inset 0 0 20px rgba(140, 91, 255, 0.045);
}

.chaos-online-launch-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 12px;
  align-items: end;
  margin-bottom: 10px;
}

.chaos-online-launch-header > div > strong {
  display: block;
  color: #d8c1ff;
  font-size: 0.84rem;
}

.chaos-online-launch-header > div > small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.64rem;
  line-height: 1.35;
}

.chaos-online-color-choice {
  margin: 0;
  grid-template-columns: 1fr 48px;
}

.chaos-online-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.chaos-online-button {
  border-color: rgba(162, 112, 255, 0.48);
  background:
    radial-gradient(
      circle at 20% 10%,
      rgba(104, 230, 255, 0.09),
      transparent 32%
    ),
    rgba(89, 44, 179, 0.07);
}

.chaos-online-button:hover,
.chaos-online-button:focus-visible {
  border-color: #b98aff;
  box-shadow:
    0 0 18px rgba(132, 80, 255, 0.18),
    inset 0 0 14px rgba(94, 225, 255, 0.055);
}

.status-badge.chaos-online {
  color: #eadcff;
  border-color: rgba(178, 126, 255, 0.72);
  background: rgba(95, 47, 190, 0.17);
}

@media (max-width: 820px) {
  .chaos-online-launch-header {
    grid-template-columns: 1fr;
  }

  .chaos-online-actions {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   MODE ENTRAÎNEMENT CHAOS
   ========================================================= */

.chaos-training-launch-button {
  border-color: rgba(88, 233, 255, 0.62);
  background:
    radial-gradient(circle at 18% 12%, rgba(93, 232, 255, 0.13), transparent 36%),
    rgba(37, 158, 192, 0.075);
}

.chaos-training-launch-button:hover,
.chaos-training-launch-button:focus-visible {
  border-color: #7ff0ff;
  box-shadow:
    0 0 18px rgba(76, 228, 255, 0.18),
    inset 0 0 18px rgba(76, 228, 255, 0.055);
}

.chaos-training-panel {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 36;
  width: min(290px, calc(100% - 24px));
  padding: 10px;
  color: #eefcff;
  border: 2px solid rgba(103, 233, 255, 0.72);
  background: rgba(4, 12, 21, 0.91);
  box-shadow:
    0 0 24px rgba(64, 220, 255, 0.16),
    inset 0 0 20px rgba(70, 220, 255, 0.045);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  pointer-events: auto;
  image-rendering: pixelated;
}

.chaos-training-panel.hidden {
  display: none !important;
}

.chaos-training-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(105, 232, 255, 0.3);
}

.chaos-training-header strong {
  display: block;
  color: #8ff2ff;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.chaos-training-header small {
  display: block;
  margin-top: 2px;
  color: #9bb3bd;
  font-size: 0.58rem;
  line-height: 1.25;
}

.chaos-training-header small b {
  color: #ffd46a;
}

#chaosTrainingScore {
  flex: 0 0 auto;
  min-width: 64px;
  padding: 5px 7px;
  color: #ffd46a;
  border: 1px solid rgba(255, 212, 106, 0.52);
  background: rgba(255, 212, 106, 0.07);
  font: 800 0.7rem/1 "Courier New", monospace;
  text-align: center;
}

.chaos-training-toggles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
}

.chaos-training-toggles label {
  min-height: 40px;
  margin: 0;
  padding: 6px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.025);
  font-size: 0.64rem;
}

.chaos-training-skills {
  display: grid;
  gap: 5px;
}

.chaos-training-skills label {
  grid-template-columns: 45px minmax(0, 1fr);
  gap: 6px;
  margin: 0;
  color: #b7cbd1;
  font-size: 0.62rem;
}

.chaos-training-skills select {
  min-width: 0;
  width: 100%;
  padding: 5px;
  color: #f0fbff;
  border: 1px solid rgba(101, 230, 255, 0.35);
  background: #071019;
  font-size: 0.62rem;
}

.chaos-training-reset {
  width: 100%;
  margin-top: 8px;
  padding: 7px 8px;
  color: #091117;
  border-color: #8cefff;
  background: #8cefff;
  font-size: 0.65rem;
  font-weight: 800;
}

.scoreboard.single-player {
  grid-template-columns: minmax(150px, 0.7fr) minmax(210px, 1.3fr);
}

.arena-fullscreen-stage:fullscreen .chaos-training-panel,
.arena-fullscreen-stage:-webkit-full-screen .chaos-training-panel,
.arena-fullscreen-stage.arena-fullscreen-fallback .chaos-training-panel {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(62px, calc(env(safe-area-inset-right) + 12px));
  z-index: 1104;
}

@media (max-width: 760px), (max-height: 560px) {
  .chaos-training-panel {
    width: min(255px, calc(100% - 20px));
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    padding: 8px;
  }

  .chaos-training-toggles {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   SKILL CHAOS : BLIND
   ========================================================= */
.blind-skill-card {
  border-color: rgba(92, 106, 155, 0.56);
  background:
    radial-gradient(circle at 22% 18%, rgba(176, 193, 255, 0.08), transparent 32%),
    rgba(22, 26, 45, 0.08);
}

.blind-skill-card:hover,
.blind-skill-card:focus-visible,
.blind-skill-card.selected {
  border-color: #aebcff;
  box-shadow:
    0 0 18px rgba(119, 139, 255, 0.18),
    inset 0 0 16px rgba(190, 201, 255, 0.05);
}

.blind-skill-card strong { color: #cbd4ff; }

.blind-icon {
  position: relative;
  color: #bdc8ff;
  border-color: rgba(178, 193, 255, 0.76);
  background: rgba(24, 29, 55, 0.35);
  overflow: hidden;
}

.blind-icon i {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 15px;
  height: 14px;
  border: 3px solid currentColor;
  border-radius: 50%;
  box-shadow: 0 0 9px currentColor;
}

.blind-icon i:nth-child(2) {
  left: 17px;
  right: 17px;
  top: 19px;
  height: 6px;
  background: currentColor;
}

.blind-icon b {
  position: absolute;
  left: -5px;
  top: 21px;
  width: 58px;
  height: 5px;
  background: #111522;
  border-top: 2px solid #7587d8;
  border-bottom: 2px solid #7587d8;
  transform: rotate(-19deg);
  box-shadow: 0 0 8px rgba(126, 147, 255, 0.55);
}

.blind-test-title {
  border-color: rgba(137, 155, 239, 0.36);
  background: rgba(72, 87, 164, 0.07);
}

.blind-test-icon {
  color: #b9c5ff;
  border-color: #899bed;
}

.chaos-loadout-slot[data-skill-id="blind"] {
  border-color: rgba(147, 164, 245, 0.76);
  color: #cbd4ff;
  background: rgba(60, 73, 139, 0.11);
}

.chaos-touch-skill-button[data-skill-id="blind"] {
  border-color: rgba(151, 167, 247, 0.8);
  color: #d8deff;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,0.15), transparent 23%),
    rgba(20, 24, 44, 0.9);
}


/* =========================================================
   MODE AVENTURE ROGUELIKE INTÉGRÉ
   ========================================================= */

.adventure-badge {
  display: inline-block;
  padding: 3px 7px;
  margin-left: 5px;
  color: #160d03;
  background: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%);
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.35);
  font-size: 0.58rem;
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}

.adventure-mode-card {
  display: grid;
  gap: 10px;
}

.adventure-mode-intro {
  padding: 10px;
  border: 1px solid rgba(159, 103, 255, 0.26);
  background: rgba(78, 47, 130, 0.055);
}

.adventure-mode-intro strong {
  display: block;
  color: #d4b6ff;
  font-size: 0.78rem;
}

.adventure-mode-intro p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.65rem;
  line-height: 1.4;
}

.btn-adventure-launch {
  width: 100%;
  background: radial-gradient(circle at center, #1b152e 0%, #0d0614 100%) !important;
  border-color: #9f67ff !important;
  color: #d4b6ff !important;
}

.btn-adventure-launch:hover,
.btn-adventure-launch:focus-visible {
  border-color: #32e6ff !important;
  box-shadow: 0 0 14px rgba(50, 230, 255, 0.3);
  color: #fff !important;
}

.dvd-collection-box {
  padding: 10px;
  border: 1px dashed rgba(255,255,255,0.22);
  background: rgba(12, 12, 18, 0.82);
}

.dvd-collection-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.dvd-collection-header strong {
  display: block;
  color: #ffd46a;
  font-size: 0.75rem;
}

.dvd-collection-header small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.58rem;
}

.dvd-collection-header button {
  padding: 5px 7px;
  font-size: 0.58rem;
}

.dvd-collection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.dvd-item-locked,
.dvd-item-unlocked {
  min-width: 0;
  padding: 5px 6px;
  border: 1px solid rgba(255,255,255,0.09);
  font-size: 0.61rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dvd-item-locked {
  color: #555;
  text-decoration: line-through;
  background: rgba(255,255,255,0.015);
}

.dvd-item-unlocked {
  color: #ffd46a;
  font-weight: 700;
  background: rgba(255,212,106,0.045);
  text-shadow: 0 0 4px rgba(255, 212, 106, 0.25);
}

.adventure-hud {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 1103;
  min-width: min(280px, calc(100% - 80px));
  padding: 8px 10px;
  color: #fff;
  border: 2px solid rgba(255, 212, 106, 0.7);
  background: rgba(4, 5, 10, 0.78);
  box-shadow: 0 0 18px rgba(0,0,0,0.4);
  pointer-events: none;
  image-rendering: pixelated;
}

.adventure-hud.hidden { display: none !important; }

.adventure-hud-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #ffd46a;
  font-size: 0.68rem;
}

#adventureHudRoom {
  margin-top: 3px;
  color: #d4b6ff;
  font-size: 0.65rem;
}

#adventureHudHint {
  display: block;
  margin-top: 3px;
  max-width: 360px;
  color: #c7c7c7;
  font-size: 0.56rem;
  line-height: 1.35;
}

.arena-fullscreen-stage:not(:fullscreen):not(.arena-fullscreen-fallback) .adventure-hud {
  left: 10px;
  top: 10px;
  transform: scale(0.9);
  transform-origin: top left;
}

@media (max-width: 640px) {
  .dvd-collection-grid { grid-template-columns: 1fr; }
  .adventure-hud { min-width: 210px; }
}


/* =========================================================
   SKILL IRON WALL
   ========================================================= */

.iron-wall-skill-card {
  border-color: rgba(184, 198, 212, 0.4);
  background:
    linear-gradient(135deg, rgba(188, 202, 218, 0.07), rgba(30, 38, 48, 0.045));
}

.iron-wall-skill-card:hover,
.iron-wall-skill-card:focus-visible,
.iron-wall-skill-card.selected {
  border-color: #c4d1dd;
  box-shadow:
    0 0 15px rgba(180, 203, 222, 0.14),
    inset 0 0 12px rgba(255, 255, 255, 0.045);
}

.iron-wall-icon {
  position: relative;
  border-color: #aebdca !important;
  background:
    repeating-linear-gradient(
      90deg,
      #687784 0 4px,
      #b9c6d1 4px 7px,
      #4b5965 7px 11px
    ) !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.15),
    0 0 10px rgba(188, 210, 228, 0.16);
}

.iron-wall-icon i,
.iron-wall-icon b {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #e6edf3;
  box-shadow: 0 0 0 1px #3b4650;
}

.iron-wall-icon i:nth-child(1) { left: 4px; top: 4px; }
.iron-wall-icon i:nth-child(2) { right: 4px; top: 4px; }
.iron-wall-icon b:nth-of-type(1) { left: 4px; bottom: 4px; }
.iron-wall-icon b:nth-of-type(2) { right: 4px; bottom: 4px; }

.iron-wall-test-icon {
  color: #d9e3eb;
  border-color: rgba(190, 207, 220, 0.6);
  background: rgba(111, 129, 144, 0.16);
}

.iron-wall-setting-note {
  margin: -2px 0 12px;
  color: var(--muted);
  font-size: 0.62rem;
  line-height: 1.35;
}

.player-card.iron-wall-mode {
  box-shadow:
    inset 0 0 16px rgba(188, 205, 218, 0.055),
    0 0 10px rgba(188, 205, 218, 0.07);
}


/* BOMBER KID */
.bomber-kid-skill-card { border-color: rgba(255, 125, 42, 0.38); }
.bomber-kid-icon { position: relative; background: radial-gradient(circle, #ffcc68 0 18%, #ff6b20 19% 43%, #3a1710 44% 100%); }
.bomber-kid-icon i:first-child { position:absolute; width:5px; height:12px; left:50%; top:-5px; background:#ffd86a; transform:rotate(24deg); }
.bomber-kid-icon i:last-child { position:absolute; width:4px; height:4px; right:5px; top:5px; background:#fff1a6; box-shadow:-10px 9px 0 #ff7a20, 7px 12px 0 #ffb52e; }
.bomber-kid-icon b:first-of-type { position:absolute; inset:7px; border:2px solid rgba(255,255,255,.45); border-radius:50%; }
.bomber-kid-icon b:last-of-type { position:absolute; width:5px; height:5px; left:4px; bottom:5px; background:#2a1110; }
.bomber-kid-test-icon { color:#ff9a3d; text-shadow:0 0 10px rgba(255,110,30,.5); }
.bomber-knockback-row small { display:block; margin-top:2px; color:var(--muted); font-size:.6rem; }


/* FORESIGHT */
.foresight-skill-card {
  border-color: rgba(94, 244, 255, 0.34);
  background:
    radial-gradient(circle at 22% 18%, rgba(112, 245, 255, 0.09), transparent 34%),
    rgba(40, 85, 116, 0.055);
}

.foresight-icon {
  position: relative;
  border-color: rgba(120, 244, 255, 0.72);
  box-shadow: inset 0 0 11px rgba(80, 230, 255, 0.08);
}

.foresight-icon::before {
  content: "";
  position: absolute;
  left: 19%;
  right: 19%;
  top: 29%;
  height: 42%;
  border: 2px solid #9cf7ff;
  border-radius: 50% 50% 46% 46%;
  box-shadow: 0 0 8px rgba(100, 240, 255, 0.38);
}

.foresight-icon::after {
  content: "";
  position: absolute;
  left: 42%;
  top: 39%;
  width: 16%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 7px #69efff;
}

.foresight-icon i,
.foresight-icon b {
  position: absolute;
  display: block;
  height: 2px;
  background: #6beeff;
  opacity: 0.75;
}

.foresight-icon i:nth-child(1) { left: 8%; right: 66%; top: 20%; transform: rotate(28deg); }
.foresight-icon i:nth-child(2) { left: 66%; right: 8%; top: 20%; transform: rotate(-28deg); }
.foresight-icon b:nth-child(3) { left: 4%; right: 72%; bottom: 18%; transform: rotate(-22deg); }
.foresight-icon b:nth-child(4) { left: 72%; right: 4%; bottom: 18%; transform: rotate(22deg); }

.foresight-test-title {
  border-color: rgba(101, 238, 255, 0.28);
  background: rgba(62, 190, 220, 0.045);
}

.foresight-test-icon {
  color: #9df7ff;
  text-shadow: 0 0 8px rgba(80, 235, 255, 0.7);
}


/* =========================================================
   STRATÉGIES MODULAIRES DE L’IA
   ========================================================= */
.ai-strategy-settings fieldset {
  border-color: rgba(77, 221, 255, 0.28);
}

.ai-strategy-heading,
.ai-strategy-subheading {
  margin: 2px 0 12px;
  padding: 10px;
  border: 1px solid rgba(77, 221, 255, 0.24);
  background:
    linear-gradient(135deg, rgba(50, 230, 255, 0.065), rgba(120, 84, 255, 0.035));
}

.ai-strategy-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ai-strategy-heading strong,
.ai-strategy-subheading strong {
  display: block;
  color: #baf7ff;
  font-size: 0.78rem;
}

.ai-strategy-heading small,
.ai-strategy-subheading small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.63rem;
  line-height: 1.35;
}

#aiStrategyProfileSummary {
  flex: 0 0 auto;
  color: #ffd46a;
  font-size: 0.66rem;
  text-align: right;
}

.ai-strategy-subheading {
  margin-top: 16px;
  border-color: rgba(102, 255, 153, 0.26);
  background: rgba(66, 188, 116, 0.045);
}

.ai-strategy-reset-btn {
  width: 100%;
  margin-top: 8px;
  color: #baf7ff;
  border-color: rgba(77, 221, 255, 0.5);
  background: rgba(50, 230, 255, 0.045);
}

.ai-strategy-reset-btn:hover,
.ai-strategy-reset-btn:focus-visible {
  color: #fff;
  border-color: #32e6ff;
  box-shadow: 0 0 15px rgba(50, 230, 255, 0.16);
}


/* =========================================================
   IA — DÉFENSE CONTRE LES BARRIÈRES ENNEMIES
   ========================================================= */
.enemy-barrier-strategy-heading {
  border-left: 3px solid rgba(255, 104, 104, 0.72);
  padding-left: 10px;
}
.enemy-barrier-strategy-help {
  border: 1px dashed rgba(255, 104, 104, 0.25);
  padding: 8px;
  background: rgba(255, 82, 82, 0.035);
}


/* V29 — Stratégie IA : propres barrières */
.own-barrier-strategy-heading {
  border-left: 3px solid rgba(76, 225, 255, 0.72);
  padding-left: 9px;
  margin-top: 14px;
}
.own-barrier-strategy-help {
  border-color: rgba(76, 225, 255, 0.20);
}


/* =========================================================
   SECOND MODE PLEIN ÉCRAN — SALON TV CRT IMMERSIF
   La présentation classique existante reste inchangée.
   ========================================================= */

.crt-room-launch-btn {
  border-color: rgba(244, 177, 104, 0.5);
  background:
    linear-gradient(
      180deg,
      rgba(109, 69, 35, 0.15),
      rgba(27, 18, 17, 0.18)
    );
}

.crt-room-launch-btn:hover,
.crt-room-launch-btn:focus-visible,
.crt-room-launch-btn[aria-pressed="true"] {
  border-color: rgba(255, 201, 137, 0.92);
  box-shadow:
    0 0 16px rgba(255, 171, 91, 0.18),
    inset 0 0 12px rgba(255, 205, 150, 0.05);
}

.arena-fullscreen-stage {
  --crt-parallax-x: 0px;
  --crt-parallax-y: 0px;
  --crt-scene-scale: 1;
  --crt-light-level: 0.24;
  --crt-light-rgb: 105, 165, 255;
}

.immersive-crt-room {
  display: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(29, 27, 37, 0.55),
      #03040a 78%
    );
}

.immersive-crt-room::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 49% 48%,
      rgba(var(--crt-light-rgb), 0.14),
      transparent 30%
    );
  opacity: var(--crt-light-level);
  transition: opacity 100ms linear;
  pointer-events: none;
}

.immersive-crt-composition {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100vw, 177.93dvh);
  aspect-ratio: 2048 / 1149;
  transform:
    translate(-50%, -50%)
    translate(
      var(--crt-parallax-x),
      var(--crt-parallax-y)
    )
    scale(var(--crt-scene-scale));
  transform-origin: center;
  transition: transform 180ms ease-out;
  pointer-events: none;
}

.immersive-crt-reference {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.immersive-crt-room-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 49% 49%,
      rgba(var(--crt-light-rgb), 0.10),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      rgba(7, 9, 18, 0.05),
      rgba(3, 4, 10, 0.16)
    );
  opacity: calc(0.68 + var(--crt-light-level));
  mix-blend-mode: screen;
  pointer-events: none;
}

.immersive-crt-room-grain {
  position: absolute;
  inset: 0;
  opacity: 0.045;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.12) 0 1px,
      transparent 1px 3px
    );
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/*
  Coordonnées calibrées sur l'image de référence 2048 x 1149.
  La boîte correspond à la surface intérieure du tube cathodique.
*/
.fullscreen-presentation-crt
.immersive-crt-composition
.fullscreen-tv-shell {
  position: absolute;
  left: 27.05%;
  top: 20.15%;
  width: 45.55%;
  height: 56.35%;
  z-index: 4;
  display: grid;
  place-items: center;
  transform: none;
  transition: none;
  pointer-events: auto;
}

.fullscreen-presentation-crt
.immersive-crt-composition
.fullscreen-tv-shell::before {
  content: "";
  display: block;
  position: absolute;
  inset: -7%;
  width: auto;
  height: auto;
  left: -7%;
  bottom: -7%;
  transform: none;
  z-index: -1;
  border-radius: 18% / 14%;
  background:
    radial-gradient(
      ellipse at center,
      rgba(var(--crt-light-rgb), 0.42),
      transparent 67%
    );
  opacity: var(--crt-light-level);
  filter: blur(22px);
  box-shadow: none;
  pointer-events: none;
}

.fullscreen-presentation-crt
.immersive-crt-composition
.fullscreen-tv-shell::after {
  display: none;
}

.arena-fullscreen-stage.fullscreen-presentation-crt:fullscreen,
.arena-fullscreen-stage.fullscreen-presentation-crt:-webkit-full-screen,
.arena-fullscreen-stage.fullscreen-presentation-crt.arena-fullscreen-fallback {
  background: #020309;
}

.arena-fullscreen-stage.fullscreen-presentation-crt:fullscreen
.immersive-crt-room,
.arena-fullscreen-stage.fullscreen-presentation-crt:-webkit-full-screen
.immersive-crt-room,
.arena-fullscreen-stage.fullscreen-presentation-crt.arena-fullscreen-fallback
.immersive-crt-room {
  display: block;
}

/* Le décor plein écran classique de la V29 reste disponible,
   mais il est remplacé visuellement uniquement pendant Mode TV. */
.arena-fullscreen-stage.fullscreen-presentation-crt:fullscreen
.fullscreen-room-scene,
.arena-fullscreen-stage.fullscreen-presentation-crt:-webkit-full-screen
.fullscreen-room-scene,
.arena-fullscreen-stage.fullscreen-presentation-crt.arena-fullscreen-fallback
.fullscreen-room-scene {
  display: none !important;
}

.arena-fullscreen-stage.fullscreen-presentation-crt:fullscreen
.immersive-crt-composition
.crt-frame,
.arena-fullscreen-stage.fullscreen-presentation-crt:-webkit-full-screen
.immersive-crt-composition
.crt-frame,
.arena-fullscreen-stage.fullscreen-presentation-crt.arena-fullscreen-fallback
.immersive-crt-composition
.crt-frame {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  border: 0;
  border-radius: 12% / 9%;
  background:
    radial-gradient(
      ellipse at center,
      rgba(15, 12, 9, 0.98),
      rgba(2, 2, 2, 0.995) 78%
    );
  box-shadow:
    inset 0 0 28px rgba(0,0,0,0.82),
    inset 0 0 8px rgba(255,245,220,0.11);
}

.arena-fullscreen-stage.fullscreen-presentation-crt:fullscreen
.immersive-crt-composition
.crt-frame::before,
.arena-fullscreen-stage.fullscreen-presentation-crt:-webkit-full-screen
.immersive-crt-composition
.crt-frame::before,
.arena-fullscreen-stage.fullscreen-presentation-crt.arena-fullscreen-fallback
.immersive-crt-composition
.crt-frame::before {
  border-radius: 12% / 9%;
  box-shadow:
    inset 0 0 42px rgba(0, 0, 0, 0.7),
    inset 0 0 6px rgba(255, 240, 205, 0.12);
}

.arena-fullscreen-stage.fullscreen-presentation-crt:fullscreen
.immersive-crt-composition
canvas,
.arena-fullscreen-stage.fullscreen-presentation-crt:-webkit-full-screen
.immersive-crt-composition
canvas,
.arena-fullscreen-stage.fullscreen-presentation-crt.arena-fullscreen-fallback
.immersive-crt-composition
canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4% / 5%;
  filter:
    brightness(0.87)
    contrast(0.96)
    saturate(0.88);
  transform: scale(0.985);
  transform-origin: center;
}

/* Scanlines et verre restent des couches purement visuelles. */
.arena-fullscreen-stage.fullscreen-presentation-crt
.scanlines {
  z-index: 4;
  opacity: 0;
  pointer-events: none;
}

.arena-fullscreen-stage.fullscreen-presentation-crt.crt-scanlines-enabled
.scanlines {
  opacity: 0.14;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(0,0,0,0.07) 0 1px,
      transparent 1px 3px
    );
  mix-blend-mode: multiply;
}

.arena-fullscreen-stage.fullscreen-presentation-crt
.crt-glow {
  z-index: 5;
  opacity: 0;
  pointer-events: none;
}

.arena-fullscreen-stage.fullscreen-presentation-crt.crt-glass-enabled
.crt-glow {
  opacity: 0.20;
  background:
    linear-gradient(
      118deg,
      rgba(255,255,255,0.13) 0%,
      rgba(255,255,255,0.03) 24%,
      transparent 38%,
      transparent 73%,
      rgba(255,211,156,0.035) 100%
    );
  mix-blend-mode: screen;
}

/* Taille visuelle du décor selon l'arène, sans toucher aux coordonnées
   physiques du moteur. */
.arena-fullscreen-stage.fullscreen-presentation-crt.arena-size-small {
  --crt-scene-scale: 1.02;
}

.arena-fullscreen-stage.fullscreen-presentation-crt.arena-size-classic {
  --crt-scene-scale: 1.08;
}

.arena-fullscreen-stage.fullscreen-presentation-crt.arena-size-large {
  --crt-scene-scale: 1.17;
}

/* UI jouable devant le décor. */
.arena-fullscreen-stage.fullscreen-presentation-crt
.virtual-joystick,
.arena-fullscreen-stage.fullscreen-presentation-crt
.chaos-touch-skills,
.arena-fullscreen-stage.fullscreen-presentation-crt
.chaos-training-panel,
.arena-fullscreen-stage.fullscreen-presentation-crt
.adventure-hud,
.arena-fullscreen-stage.fullscreen-presentation-crt
.fullscreen-exit-btn {
  z-index: 20;
}

/* Tablet / mobile landscape: recentrer sur la TV en recadrant
   légèrement le décor, tout en gardant la même géométrie. */
@media (max-width: 1000px) and (orientation: landscape) {
  .arena-fullscreen-stage.fullscreen-presentation-crt {
    --crt-scene-scale: 1.15;
  }

  .arena-fullscreen-stage.fullscreen-presentation-crt.arena-size-large {
    --crt-scene-scale: 1.24;
  }

  .arena-fullscreen-stage.fullscreen-presentation-crt
  .immersive-crt-composition
  canvas {
    transform: scale(0.992);
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .arena-fullscreen-stage.fullscreen-presentation-crt {
    --crt-scene-scale: 1.12;
  }

  .arena-fullscreen-stage.fullscreen-presentation-crt
  .chaos-training-panel {
    transform: scale(0.88);
    transform-origin: top left;
  }
}

/* Réduction des mouvements : la scène reste parfaitement fixe. */
@media (prefers-reduced-motion: reduce) {
  .immersive-crt-composition {
    transition: none;
    transform:
      translate(-50%, -50%)
      scale(var(--crt-scene-scale));
  }
}

/* V31 — stratégie offensive de redirection */
.offensive-redirect-strategy-heading {
  margin-top: 18px;
  border-top: 1px solid rgba(255, 122, 76, 0.34);
  padding-top: 14px;
}
.offensive-redirect-strategy-heading strong {
  color: #ffb07c;
}
.offensive-redirect-strategy-help {
  color: rgba(255, 213, 188, 0.76);
}


/* V32 — repère visuel du second bloc offensif */
.movement-intercept-strategy-heading {
  margin-top: 1rem;
}


/* =========================================================
   V35 — Tiny Wall / Great Wall
   ========================================================= */

.tiny-wall-skill-card {
  border-style: dashed;
}

.great-wall-skill-card {
  border-width: 2px;
}

.wall-scale-icon {
  position: relative;
}

.wall-scale-icon i {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 5px;
  border-radius: 999px;
  transform: translate(-50%, -50%) rotate(-12deg);
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.tiny-wall-icon i {
  width: 24px;
}

.great-wall-icon i {
  width: 43px;
}

.wall-scale-icon b {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 22px;
  transform: translate(-50%, -50%);
  background: currentColor;
  opacity: 0.55;
}

.tiny-wall-icon::after,
.great-wall-icon::after {
  position: absolute;
  right: 2px;
  bottom: 1px;
  font: 700 10px/1 "Courier New", monospace;
}

.tiny-wall-icon::after {
  content: "−";
}

.great-wall-icon::after {
  content: "+";
}

.tiny-wall-test-icon,
.great-wall-test-icon {
  font-size: 17px;
}

.wall-scale-passive-note {
  margin: 8px 0 14px;
  padding: 9px 11px;
  border: 1px dashed rgba(255,255,255,0.2);
  border-radius: 8px;
  font-size: 0.78rem;
  opacity: 0.82;
}


/* V37 — IA offensive : Attaque des murs */
.wall-break-strategy-heading{border-left:3px solid rgba(255,94,76,.72);padding-left:10px;}
.wall-break-strategy-help{border:1px dashed rgba(255,104,82,.26);border-radius:8px;padding:9px 11px;background:rgba(255,78,62,.035);}


/* =========================================================
   V38 — IA offensive : Combo
   ========================================================= */

.combo-strategy-heading {
  border-left: 3px solid rgba(255, 218, 54, 0.78);
  padding-left: 10px;
}

.combo-strategy-help {
  border: 1px dashed rgba(255, 218, 54, 0.28);
  border-radius: 8px;
  padding: 9px 11px;
  background: rgba(255, 218, 54, 0.035);
}


/* =========================================================
   V39 — Entraînement : difficulté et stratégies IA
   ========================================================= */
.chaos-training-ai-config {
  display: grid;
  gap: 9px;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid rgba(84, 232, 255, 0.24);
  border-radius: 9px;
  background: rgba(20, 36, 48, 0.52);
}

.chaos-training-ai-config-head {
  display: grid;
  gap: 2px;
}

.chaos-training-ai-config-head > strong {
  letter-spacing: 0.08em;
  font-size: 0.78rem;
}

.chaos-training-ai-config-head > small,
.chaos-training-strategy-note {
  opacity: 0.72;
  font-size: 0.68rem;
  line-height: 1.3;
}

.chaos-training-difficulty-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(118px, 0.7fr);
  align-items: center;
  gap: 8px;
}

.chaos-training-strategy-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 2px;
}

.chaos-training-strategy-toolbar > span {
  font: 700 0.68rem/1.2 "Courier New", monospace;
  opacity: 0.84;
}

.chaos-training-strategy-toolbar > div {
  display: flex;
  gap: 6px;
}

.chaos-training-strategy-toolbar button {
  padding: 5px 7px;
  font-size: 0.65rem;
}

.chaos-training-strategy-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.chaos-training-strategy-group {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 7px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 7px;
  background: rgba(0,0,0,0.18);
}

.chaos-training-strategy-group-title {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  opacity: 0.72;
}

.chaos-training-strategy-row {
  padding: 5px 4px;
  border-radius: 5px;
}

.chaos-training-strategy-row > span {
  display: grid;
  gap: 1px;
}

.chaos-training-strategy-row strong {
  font-size: 0.68rem;
}

.chaos-training-strategy-row small {
  font-size: 0.58rem;
  opacity: 0.66;
}

.chaos-training-strategy-row.unavailable {
  opacity: 0.38;
  filter: grayscale(0.8);
}

@media (max-width: 760px) {
  .chaos-training-strategy-list {
    grid-template-columns: 1fr;
  }
  .chaos-training-difficulty-row {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   V40 — Black Hole
   ========================================================= */
.black-hole-skill-card { border-color: rgba(160, 92, 255, 0.42); }
.black-hole-icon { position: relative; }
.black-hole-icon i:first-child {
  position:absolute; width:19px; height:19px; border-radius:50%;
  left:50%; top:50%; transform:translate(-50%,-50%);
  background:#050308; box-shadow:0 0 0 3px rgba(130,55,225,.55),0 0 12px rgba(157,88,255,.75);
}
.black-hole-icon i:nth-child(2) {
  position:absolute; width:31px; height:13px; border:2px solid currentColor;
  border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-18deg);
  opacity:.7;
}
.black-hole-icon b {
  position:absolute; width:38px; height:2px; left:50%; top:50%;
  transform:translate(-50%,-50%) rotate(24deg); background:currentColor; opacity:.38;
}
.black-hole-setting-note {
  margin:8px 0 14px; padding:9px 11px; border-radius:8px;
  border:1px dashed rgba(160,92,255,.28); background:rgba(100,40,180,.045);
  font-size:.78rem; opacity:.86;
}

/* =========================================================
   SKILL MENU ICONS — custom imported art (V41)
   ========================================================= */
.chaos-skill-library .chaos-skill-icon {
  overflow: hidden;
  border: none;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: none;
}

.chaos-skill-library .chaos-skill-icon > i,
.chaos-skill-library .chaos-skill-icon > b {
  display: none !important;
}

.chaos-skill-library .dash-icon { background-image: url("assets/skill-icons/dash.png"); }
.chaos-skill-library .rebound-icon { background-image: url("assets/skill-icons/rebound.png"); }
.chaos-skill-library .tackle-icon { background-image: url("assets/skill-icons/tackle.png"); }
.chaos-skill-library .foresight-icon { background-image: url("assets/skill-icons/foresight.png"); }
.chaos-skill-library .tiny-wall-icon { background-image: url("assets/skill-icons/tiny_wall.png"); }
.chaos-skill-library .great-wall-icon { background-image: url("assets/skill-icons/great_wall.png"); }
.chaos-skill-library .flame-wall-icon { background-image: url("assets/skill-icons/flame_wall.png"); }
.chaos-skill-library .portal-wall-icon { background-image: url("assets/skill-icons/portal_wall.png"); }
.chaos-skill-library .trap-wall-icon { background-image: url("assets/skill-icons/trap_wall.png"); }
.chaos-skill-library .moving-wall-icon { background-image: url("assets/skill-icons/moving_wall.png"); }
.chaos-skill-library .black-hole-icon { background-image: url("assets/skill-icons/black_hole.png"); }
.chaos-skill-library .blind-icon { background-image: url("assets/skill-icons/blind.png"); }
.chaos-skill-library .iron-wall-icon { background-image: url("assets/skill-icons/iron_wall.png"); }
.chaos-skill-library .bomber-kid-icon { background-image: url("assets/skill-icons/bomber_kid.png"); }


/* =========================================================
   V45 — Mode 4 joueurs
   ========================================================= */
.scoreboard.four-players {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.scoreboard.four-players .match-card {
  order: 3;
}
.scoreboard.four-players .player-one { order: 1; }
.scoreboard.four-players .player-two { order: 2; }
.scoreboard.four-players .player-three { order: 4; }
.scoreboard.four-players .player-four { order: 5; }
.player-four { text-align: right; }
.player-four .player-title,
.player-four .corner-strip { justify-content: flex-end; }
.four-player-format-card,
.online-four-player-format {
  display: grid;
  gap: 7px;
  margin: 12px 0;
  padding: 11px;
  border: 1px solid rgba(255, 212, 59, 0.28);
  background: rgba(255, 212, 59, 0.035);
  border-radius: 8px;
}
.four-player-mode-button {
  border-color: rgba(255, 212, 59, 0.42);
}
.player-card[data-team="1"] { box-shadow: inset 0 0 0 1px rgba(50,230,255,.18), 0 12px 34px rgba(0,0,0,.36); }
.player-card[data-team="2"] { box-shadow: inset 0 0 0 1px rgba(255,78,215,.18), 0 12px 34px rgba(0,0,0,.36); }
@media (max-width: 1050px) {
  .scoreboard.four-players { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scoreboard.four-players .match-card { grid-column: 1 / -1; order: 0; }
  .scoreboard.four-players .player-one,
  .scoreboard.four-players .player-two,
  .scoreboard.four-players .player-three,
  .scoreboard.four-players .player-four { order: initial; }
}
@media (max-width: 700px) {
  .player-four,
  .player-four .player-title,
  .player-four .corner-strip { text-align: left; justify-content: flex-start; }
}


/* =========================================================
   V46 — Chaos 2v2 : règles de draft des skills
   ========================================================= */
.chaos-team-skill-rules-card {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(83, 235, 255, 0.26);
  border-radius: 12px;
  background: rgba(5, 19, 27, 0.72);
}

.chaos-team-skill-rules-head,
.chaos-team-skill-rules-footer,
.chaos-team-rule-column-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.chaos-team-skill-rules-head small,
.chaos-team-rule-column-title small {
  display: block;
  margin-top: 3px;
  opacity: 0.72;
}

.compact-rule-toggle {
  flex: 0 0 auto;
}

.chaos-team-skill-rules-grid,
.chaos-team-rule-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.chaos-team-rule-columns section {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
}

.chaos-team-skill-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.chaos-team-skill-rule-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 7px;
  font-size: 0.76rem;
  cursor: pointer;
}

.chaos-team-skill-rule-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chaos-team-skill-rule-chip:has(input:checked) {
  border-color: rgba(255, 198, 68, 0.54);
  background: rgba(255, 198, 68, 0.07);
}

.chaos-team-skill-rules-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

#chaosTeamSkillRulesSummary {
  font-size: 0.78rem;
  opacity: 0.82;
}

.chaos-skill-card.rule-blocked:not(.selected) {
  opacity: 0.38;
  filter: grayscale(0.72);
  cursor: not-allowed;
  border-style: dashed;
}

.chaos-skill-card.rule-blocked:not(.selected)::after {
  content: "BAN";
  position: absolute;
  right: 7px;
  top: 6px;
  padding: 2px 4px;
  border-radius: 4px;
  background: rgba(255, 78, 78, 0.88);
  color: #fff;
  font: 700 9px/1 "Courier New", monospace;
}

@media (max-width: 760px) {
  .chaos-team-skill-rules-grid,
  .chaos-team-rule-columns {
    grid-template-columns: 1fr;
  }
  .chaos-team-skill-check-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   V47 — Rebond : variante Traversée propulsive
   ========================================================= */
.rebound-test-title {
  border-left: 3px solid rgba(92, 232, 255, 0.72);
  padding-left: 10px;
}

.rebound-variant-note {
  margin: 8px 0 14px;
  padding: 9px 11px;
  border: 1px dashed rgba(92, 232, 255, 0.28);
  border-radius: 8px;
  background: rgba(92, 232, 255, 0.035);
  font-size: 0.78rem;
  opacity: 0.88;
}


/* V50 — Biome Forêt */
.biome-settings .settings-accordion-title{color:#9cff8f}.biome-settings fieldset{background:linear-gradient(180deg,rgba(18,55,27,.18),rgba(8,18,12,.06))}.forest-weight-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:8px}.forest-weight-grid label{display:grid;gap:5px}.biome-settings select,.biome-settings input{max-width:100%}


/* V50 — Accueil néon / CRT conservé */
.v50-home-screen{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:18px;background:radial-gradient(circle at 50% 20%,rgba(67,233,255,.14),transparent 35%),linear-gradient(rgba(1,4,11,.72),rgba(1,4,11,.92));backdrop-filter:blur(7px)}
.v50-home-screen.hidden{display:none!important}.v50-home-shell{width:min(1120px,96vw);padding:20px;border-radius:30px;background:linear-gradient(180deg,#151a25,#07090f);border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 80px rgba(0,0,0,.65),0 0 40px rgba(41,223,255,.12)}
.v50-home-tv{position:relative;overflow:hidden;padding:clamp(20px,3vw,34px);border-radius:22px;border:2px solid rgba(71,236,255,.62);background:linear-gradient(rgba(6,10,24,.72),rgba(6,8,18,.9));box-shadow:inset 0 0 70px rgba(0,0,0,.75),0 0 26px rgba(63,227,255,.22)}
.v50-home-tv:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,10,28,.38),rgba(8,5,22,.72)),radial-gradient(circle at 50% 120%,rgba(255,48,207,.28),transparent 45%);pointer-events:none}.v50-home-scanlines{position:absolute;inset:0;pointer-events:none;opacity:.18;background:repeating-linear-gradient(180deg,rgba(255,255,255,.08) 0 1px,transparent 1px 4px)}
.v50-home-logo,.v50-home-kicker,.v50-home-grid,.v50-home-bottom{position:relative;z-index:1}.v50-home-logo{text-align:center;font:900 clamp(2rem,5vw,4.3rem)/.95 "Courier New",monospace;letter-spacing:.04em;color:#f6f5ff;text-shadow:0 0 6px #fff,0 0 16px #50eaff,0 0 28px #ff4bd8}.v50-home-logo span{color:#ff7edc}.v50-home-logo b{color:#5eeeff}.v50-home-kicker{text-align:center;margin:14px 0 24px;color:#f4e9ce;font:700 1rem "Courier New",monospace;letter-spacing:.08em}
.v50-home-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.v50-mode{min-height:190px;padding:14px 12px;border-radius:18px;color:white;background:linear-gradient(180deg,rgba(9,14,32,.91),rgba(6,8,20,.97));border:2px solid currentColor;display:grid;place-items:center;align-content:center;gap:8px;text-align:center;box-shadow:0 0 20px color-mix(in srgb,currentColor 25%,transparent);transition:.16s}.v50-mode:hover,.v50-mode:focus-visible{transform:translateY(-4px) scale(1.02);filter:brightness(1.13)}.v50-mode i{font:900 1.5rem "Courier New",monospace;border:2px solid currentColor;border-radius:15px;min-width:70px;min-height:70px;display:grid;place-items:center;background:rgba(0,0,0,.32);box-shadow:inset 0 0 18px currentColor}.v50-mode strong{text-transform:uppercase;font:900 1rem "Courier New",monospace}.v50-mode small{color:#dce7f5}.v50-mode.adventure{color:#61e7ff}.v50-mode.solo{color:#75ff9a}.v50-mode.local{color:#ffd65d}.v50-mode.chaos{color:#ff5da8}.v50-mode.online{color:#63dfff}
.v50-home-bottom{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:space-between;gap:14px;color:#9bf28c;font:700 .86rem "Courier New",monospace}.v50-home-bottom button{padding:10px 14px;border-radius:12px;border:1px solid #52e9ff;background:rgba(7,18,30,.9);color:white}.biome-settings summary{background:linear-gradient(90deg,rgba(48,145,65,.15),rgba(30,220,99,.05))}
@media(max-width:900px){.v50-home-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:600px){.v50-home-grid{grid-template-columns:1fr 1fr}.v50-mode{min-height:150px}.v50-home-bottom{align-items:flex-start;flex-direction:column}}

/* =========================================================
   V51 — Écran compact de préparation avant lancement
   ========================================================= */
.launch-setup-modal {
  z-index: 42;
  background:
    radial-gradient(circle at 50% 15%, rgba(50, 230, 255, 0.10), transparent 36%),
    rgba(0, 0, 0, 0.84);
  backdrop-filter: blur(8px);
}

.launch-setup-card {
  width: min(780px, calc(100vw - 30px));
  max-height: min(900px, calc(100vh - 30px));
  overflow-y: auto;
  padding: 18px;
  text-align: left;
  border: 1px solid rgba(50, 230, 255, 0.36);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(10, 19, 31, 0.98), rgba(5, 10, 17, 0.99));
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 0 36px rgba(50,230,255,0.12),
    0 26px 70px rgba(0,0,0,0.65);
}

.launch-setup-header,
.launch-setup-section-title,
.launch-setup-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.launch-setup-header {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
}

.launch-setup-header h2 {
  margin: 3px 0 2px;
  font-size: 1.32rem;
}

.launch-setup-header p {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
}

.launch-setup-kicker {
  display: inline-block;
  color: #32e6ff;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.launch-setup-close {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: #fff;
}

.launch-setup-biome,
.launch-setup-arena {
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.018);
}

.launch-setup-biome {
  margin-bottom: 10px;
}

.launch-setup-section-title {
  margin-bottom: 9px;
}

.launch-setup-section-title strong {
  display: block;
  color: #fff;
  font-size: 0.84rem;
}

.launch-setup-section-title small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.62rem;
}

.launch-step-number {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(50,230,255,0.42);
  color: #32e6ff;
  font-size: 0.7rem;
  font-weight: 800;
}

.launch-biome-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.launch-biome-card {
  min-height: 94px;
  padding: 10px;
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  gap: 2px 9px;
  align-items: center;
  text-align: left;
  color: #ddd;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.13);
}

.launch-biome-card:hover,
.launch-biome-card:focus-visible {
  border-color: rgba(50,230,255,0.52);
  background: rgba(50,230,255,0.035);
}

.launch-biome-card.selected {
  color: #fff;
  border-color: #32e6ff;
  background: rgba(50,230,255,0.075);
  box-shadow: inset 0 0 18px rgba(50,230,255,0.06);
}

.launch-biome-card.forest.selected {
  border-color: #72e28b;
  background: rgba(76,181,102,0.09);
  box-shadow: inset 0 0 18px rgba(76,181,102,0.08);
}

.launch-biome-card strong {
  align-self: end;
  font-size: 0.8rem;
}

.launch-biome-card small {
  align-self: start;
  color: var(--muted);
  font-size: 0.59rem;
  line-height: 1.3;
}

.launch-biome-icon {
  grid-row: 1 / 3;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid currentColor;
  font-size: 1.2rem;
}

.launch-biome-icon.classic {
  color: #6bdcff;
}

.launch-biome-icon.forest {
  color: #72e28b;
}

.launch-biome-select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.launch-setup-card .arena-size-selector {
  margin: 0;
  border-color: rgba(255, 212, 106, 0.20);
  background: rgba(0,0,0,0.14);
}

.launch-setup-card .arena-size-header p,
.launch-setup-card .arena-color-heading small {
  font-size: 0.6rem;
}

.launch-setup-card .arena-size-note {
  display: none;
}

.arena-size-selector.four-player-locked::after {
  content: "4 joueurs : grande arène obligatoire";
  display: block;
  margin-top: 8px;
  padding: 6px 8px;
  color: #ffd46a;
  font-size: 0.62rem;
  text-align: center;
  border: 1px dashed rgba(255,212,106,0.30);
}

.arena-size-card.locked-by-four-player {
  opacity: 0.32;
  cursor: not-allowed;
}

.launch-setup-summary {
  margin: 10px 0;
  padding: 9px 11px;
  color: #b9f4ff;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
  border: 1px solid rgba(50,230,255,0.18);
  background: rgba(50,230,255,0.035);
}

.launch-setup-actions {
  justify-content: flex-end;
}

.launch-setup-actions button {
  min-width: 130px;
}

.launch-setup-explainer {
  margin: 4px 0 12px;
  padding: 9px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(50,230,255,0.14);
  background: rgba(50,230,255,0.025);
}

.launch-setup-explainer strong {
  color: #fff;
  font-size: 0.72rem;
}

.launch-setup-explainer small,
.biome-launch-note {
  color: var(--muted);
  font-size: 0.62rem;
}

@media (max-width: 620px) {
  .launch-setup-card {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    padding: 11px;
  }

  .launch-biome-grid {
    grid-template-columns: 1fr;
  }

  .launch-setup-header {
    align-items: flex-start;
  }

  .launch-setup-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .launch-setup-actions button {
    min-width: 0;
  }

  .launch-setup-explainer {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* V52 — paramètres de test protégés et repliables */
.app-shell.test-settings-collapsed {
  grid-template-columns: minmax(0, 1fr) 64px;
}

.settings-panel {
  transition: width 180ms ease, padding 180ms ease, min-height 180ms ease;
}

.settings-panel-gate {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.settings-code-gate {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  padding: 0;
  display: grid;
  place-items: center;
  gap: 0;
  border-radius: 12px;
  border: 1px solid rgba(50, 230, 255, 0.34);
  background: linear-gradient(180deg, rgba(20, 37, 48, 0.98), rgba(8, 15, 20, 0.98));
  box-shadow: inset 0 0 16px rgba(50, 230, 255, 0.08), 0 0 18px rgba(50, 230, 255, 0.08);
  color: #8ff4ff;
}

.settings-code-gate:hover,
.settings-code-gate:focus-visible {
  border-color: #32e6ff;
  box-shadow: inset 0 0 18px rgba(50, 230, 255, 0.16), 0 0 18px rgba(50, 230, 255, 0.2);
}

.settings-code-icon {
  display: block;
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: -0.08em;
  line-height: 1;
}

.settings-code-label {
  display: block;
  margin-top: -5px;
  font-size: 0.47rem;
  letter-spacing: 0.12em;
  color: #a8a8a8;
}

.settings-panel-gate-title {
  min-width: 0;
  flex: 1 1 auto;
}

.settings-panel-gate-title h2 {
  margin: 0 0 3px;
  font-size: 1.05rem;
}

.settings-panel-gate-title small {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.25;
}

.settings-collapse-btn {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 1.25rem;
}

.settings-protected-content {
  animation: test-settings-reveal 160ms ease-out both;
}

@keyframes test-settings-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.settings-panel.settings-panel-collapsed {
  width: 64px;
  min-height: 64px;
  padding: 8px;
  overflow: hidden;
  max-height: 64px;
}

.settings-panel.settings-panel-collapsed .settings-panel-gate {
  margin: 0;
  justify-content: center;
}

.settings-panel.settings-panel-collapsed .settings-panel-gate-title,
.settings-panel.settings-panel-collapsed .settings-collapse-btn,
.settings-panel.settings-panel-collapsed .settings-protected-content {
  display: none !important;
}

.settings-panel.settings-panel-locked .settings-code-gate {
  position: relative;
  color: #ffd56a;
  border-color: rgba(255, 213, 106, 0.36);
  box-shadow: inset 0 0 16px rgba(255, 213, 106, 0.08), 0 0 16px rgba(255, 213, 106, 0.08);
}

.settings-panel.settings-panel-locked .settings-code-gate::after {
  content: "🔒";
  position: absolute;
  right: -5px;
  top: -7px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #111;
  border: 1px solid rgba(255,255,255,0.18);
  font-size: 0.62rem;
}

.test-settings-unlock-modal {
  z-index: 3000;
}

.test-settings-unlock-card {
  width: min(420px, calc(100vw - 28px));
  text-align: center;
}

.test-settings-unlock-symbol {
  width: 62px;
  height: 62px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  border: 1px solid rgba(50, 230, 255, 0.42);
  color: #8ff4ff;
  background: rgba(50, 230, 255, 0.06);
  box-shadow: inset 0 0 18px rgba(50, 230, 255, 0.08), 0 0 20px rgba(50, 230, 255, 0.1);
  font-weight: 900;
  font-size: 1.1rem;
}

.test-settings-unlock-card form {
  display: grid;
  gap: 12px;
}

.test-settings-unlock-card label {
  display: grid;
  gap: 7px;
  text-align: left;
  color: #ddd;
}

#testSettingsCodeInput {
  width: 100%;
  padding: 11px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.22);
  background: #0c0c0c;
  color: #fff;
  outline: none;
}

#testSettingsCodeInput:focus {
  border-color: #32e6ff;
  box-shadow: 0 0 0 3px rgba(50, 230, 255, 0.1);
}

.test-settings-code-error {
  margin: 0;
  color: #ff7b8f;
  font-size: 0.82rem;
}

@media (max-width: 1080px) {
  .app-shell.test-settings-collapsed {
    grid-template-columns: 1fr;
  }

  .settings-panel.settings-panel-collapsed {
    justify-self: end;
    width: 64px;
    max-height: 64px;
  }
}

/* =========================================================
   V53 — CENTRAGE DES ARÈNES PETITE ET CLASSIQUE
   Les deux formats restent cadrés au centre de la zone de jeu.
   ========================================================= */

/* Affichage intégré : centre réellement le téléviseur / canvas
   dans toute la largeur disponible, sans modifier la géométrie du jeu. */
.arena-fullscreen-stage.arena-size-small:not(:fullscreen):not(.arena-fullscreen-fallback),
.arena-fullscreen-stage.arena-size-classic:not(:fullscreen):not(.arena-fullscreen-fallback) {
  display: grid;
  place-items: center;
}

.arena-fullscreen-stage.arena-size-small:not(:fullscreen):not(.arena-fullscreen-fallback) .fullscreen-tv-shell,
.arena-fullscreen-stage.arena-size-classic:not(:fullscreen):not(.arena-fullscreen-fallback) .fullscreen-tv-shell {
  justify-self: center;
  margin-inline: auto;
}

/* Présentation plein écran classique : les anciens décalages du décor
   sont neutralisés afin que l'arène soit exactement centrée. */
.arena-fullscreen-stage.arena-size-small,
.arena-fullscreen-stage.arena-size-classic {
  --room-tv-shift: 0px;
}

@media (max-width: 1100px) {
  .arena-fullscreen-stage.arena-size-small,
  .arena-fullscreen-stage.arena-size-classic {
    --room-tv-shift: 0px;
  }
}

/* Sécurise le centrage du shell pendant le plein écran classique. */
.arena-fullscreen-stage.arena-size-small:fullscreen .fullscreen-tv-shell,
.arena-fullscreen-stage.arena-size-classic:fullscreen .fullscreen-tv-shell,
.arena-fullscreen-stage.arena-size-small:-webkit-full-screen .fullscreen-tv-shell,
.arena-fullscreen-stage.arena-size-classic:-webkit-full-screen .fullscreen-tv-shell,
.arena-fullscreen-stage.arena-size-small.arena-fullscreen-fallback .fullscreen-tv-shell,
.arena-fullscreen-stage.arena-size-classic.arena-fullscreen-fallback .fullscreen-tv-shell {
  justify-self: center;
  align-self: center;
  margin-inline: auto;
}

/* ==========================================================================
   ==========================================================================
   V55 — REFONTE VISUELLE DE L'INTERFACE
   --------------------------------------------------------------------------
   Bloc ajouté en fin de feuille : il ne redéfinit que l'apparence
   (couleurs, bordures, halos, typographie, espacements de surface) des
   éléments déjà présents. Aucune structure de gameplay, aucun sélecteur
   plein écran / CRT n'est modifié ici — les règles existantes plus
   spécifiques (`.app-shell:fullscreen …`) continuent de primer.
   ==========================================================================
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. JETONS DE DESIGN
   -------------------------------------------------------------------------- */

:root {
  /* Palette néon */
  --neon-cyan: #43e9ff;
  --neon-blue: #4f8bff;
  --neon-magenta: #ff3ecb;
  --neon-pink: #ff7edc;
  --neon-violet: #a45cff;
  --neon-amber: #ffd166;
  --neon-green: #6bffa6;
  --neon-white: #eaf6ff;

  /* Fonds nuit */
  --ink-900: #04050f;
  --ink-800: #070a18;
  --ink-700: #0b1022;
  --ink-600: #101630;

  /* Surfaces & contours */
  --surface: linear-gradient(180deg, rgba(16, 22, 46, 0.94), rgba(7, 10, 24, 0.96));
  --surface-flat: rgba(10, 14, 32, 0.92);
  --edge: rgba(110, 180, 255, 0.22);
  --edge-strong: rgba(110, 200, 255, 0.44);
  --halo-soft: 0 0 18px rgba(67, 233, 255, 0.14);
  --halo-card: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(120, 190, 255, 0.05);

  /* Rayons harmonisés */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;

  /* Reprise des variables historiques, teintées nuit */
  --bg: var(--ink-900);
  --panel: #0a0f1f;
  --panel-2: #0f1630;
  --line: var(--edge);
  --text: #eef4ff;
  --muted: #93a8cc;
}

/* --------------------------------------------------------------------------
   2. FOND DE PAGE — nuit violette + grille rétro-futuriste
   -------------------------------------------------------------------------- */

html,
body {
  background:
    radial-gradient(120% 78% at 50% -8%, rgba(84, 40, 160, 0.42), transparent 62%),
    radial-gradient(90% 60% at 50% 108%, rgba(200, 30, 130, 0.24), transparent 64%),
    linear-gradient(180deg, #080a1c 0%, #05060f 46%, #030409 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(80, 160, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80, 160, 255, 0.055) 1px, transparent 1px);
  background-size: 46px 46px, 46px 46px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 20%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 30%, #000 20%, transparent 78%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.16;
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05) 0 1px,
    transparent 1px 3px
  );
}

.app-shell {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   3. BOUTONS — style borne d'arcade unifié
   -------------------------------------------------------------------------- */

button {
  position: relative;
  border-radius: var(--r-sm);
  border: 1px solid var(--edge);
  background: linear-gradient(180deg, rgba(22, 30, 58, 0.95), rgba(9, 13, 28, 0.95));
  color: var(--text);
  letter-spacing: 0.04em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    background 140ms ease,
    transform 120ms ease,
    color 140ms ease;
}

button:hover,
button:focus-visible {
  background: linear-gradient(180deg, rgba(34, 48, 88, 0.98), rgba(12, 18, 38, 0.98));
  border-color: var(--edge-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 16px rgba(67, 233, 255, 0.22);
}

button:focus-visible {
  outline: 2px solid rgba(120, 226, 255, 0.75);
  outline-offset: 2px;
}

button:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55);
}

button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  box-shadow: none;
}

.primary-btn {
  border-color: rgba(255, 126, 220, 0.6);
  background: linear-gradient(180deg, #ff62c8, #b8259a);
  color: #0a0512;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 20px rgba(255, 62, 203, 0.35);
}

.primary-btn:hover,
.primary-btn:focus-visible {
  color: #0a0512;
  background: linear-gradient(180deg, #ff87d7, #cf2fae);
  border-color: #ffa8e4;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 26px rgba(255, 62, 203, 0.55);
}

/* Champs de saisie assortis */
input[type="number"],
input[type="text"],
input[type="password"],
select,
textarea {
  border-radius: var(--r-sm);
  border: 1px solid var(--edge);
  background: rgba(4, 7, 18, 0.92);
  color: var(--text);
}

input[type="number"]:focus-visible,
input[type="text"]:focus-visible,
input[type="password"]:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--neon-cyan);
  box-shadow: 0 0 0 2px rgba(67, 233, 255, 0.2);
}

input[type="checkbox"] {
  accent-color: var(--neon-cyan);
}

/* --------------------------------------------------------------------------
   4. BARRE SUPÉRIEURE
   -------------------------------------------------------------------------- */

.topbar {
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--halo-card);
}

.topbar h1 {
  font-weight: 900;
  color: #fff;
  text-shadow:
    0 0 8px rgba(67, 233, 255, 0.55),
    0 0 22px rgba(255, 62, 203, 0.35);
}

.topbar .subtitle {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.top-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.top-actions button {
  font-size: 0.78rem;
  padding: 8px 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

#restartBtn {
  border-color: rgba(107, 255, 166, 0.42);
  color: #b9ffd6;
}

#restartBtn:hover,
#restartBtn:focus-visible {
  border-color: var(--neon-green);
  box-shadow: 0 0 16px rgba(107, 255, 166, 0.3);
}

#crtFullscreenBtn,
#fullscreenBtn {
  border-color: rgba(164, 92, 255, 0.42);
  color: #dcc6ff;
}

#crtFullscreenBtn:hover,
#fullscreenBtn:hover,
#crtFullscreenBtn:focus-visible,
#fullscreenBtn:focus-visible {
  border-color: var(--neon-violet);
  box-shadow: 0 0 16px rgba(164, 92, 255, 0.32);
}

.status-badge {
  border-color: var(--edge);
  background: rgba(6, 10, 24, 0.86);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}

.status-badge.online {
  border-color: rgba(107, 255, 166, 0.5);
  color: #b9ffd6;
}

.status-badge.waiting {
  border-color: rgba(255, 209, 102, 0.5);
  color: #ffe6a8;
}

/* --------------------------------------------------------------------------
   5. TABLEAU DES SCORES — hiérarchie renforcée
   -------------------------------------------------------------------------- */

.player-card,
.match-card,
.controls-card,
.settings-panel {
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--halo-card);
}

.player-card {
  position: relative;
  overflow: hidden;
}

/* Liseré néon aux couleurs du joueur */
.player-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: currentColor;
  opacity: 0.85;
  box-shadow: 0 0 14px currentColor;
}

.player-one { color: var(--p1); }
.player-two { color: var(--p2); }
.player-three { color: #ffd166; }
.player-four { color: #6bffa6; }

.player-card .player-title strong {
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.player-card .score-line {
  color: currentColor;
  font-weight: 900;
  font-size: 1.6rem;
  line-height: 1.05;
  text-shadow: 0 0 14px currentColor;
}

.player-card .score-line span {
  font-variant-numeric: tabular-nums;
}

.cooldown-line {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.cooldown-line span {
  color: #dceaff;
}

.match-card {
  border-color: rgba(164, 92, 255, 0.34);
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(164, 92, 255, 0.16), transparent 62%),
    var(--surface);
}

#timerDisplay {
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(67, 233, 255, 0.6);
}

#roundMessage {
  font-size: 0.84rem;
  letter-spacing: 0.05em;
  color: #f2f7ff;
}

#builderDisplay,
#logoSpeedDisplay,
#cornerAssistDisplay {
  font-size: 0.66rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.corner-chip {
  border-radius: 4px;
  border-color: var(--edge);
  background: rgba(4, 7, 18, 0.7);
}

/* --------------------------------------------------------------------------
   6. RAPPEL DES COMMANDES
   -------------------------------------------------------------------------- */

.controls-card {
  padding: 14px;
}

.controls-card strong {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--neon-cyan);
}

.controls-card span {
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   7. PANNEAU DE TEST — discret replié, lisible déplié
   -------------------------------------------------------------------------- */

.settings-panel {
  border-color: rgba(120, 190, 255, 0.16);
  background: linear-gradient(180deg, rgba(12, 17, 36, 0.9), rgba(6, 9, 20, 0.94));
}

.settings-panel.settings-panel-collapsed {
  width: 56px;
  min-height: 56px;
  max-height: 56px;
  padding: 6px;
  border-radius: 999px;
  border-color: rgba(120, 190, 255, 0.14);
  background: rgba(8, 12, 26, 0.72);
  box-shadow: none;
  opacity: 0.62;
}

.settings-panel.settings-panel-collapsed:hover,
.settings-panel.settings-panel-collapsed:focus-within {
  opacity: 1;
  border-color: var(--edge-strong);
  box-shadow: var(--halo-soft);
}

.settings-panel.settings-panel-collapsed .settings-code-gate {
  width: 42px;
  height: 42px;
  border-radius: 999px;
}

.settings-panel-gate-title h2 {
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neon-cyan);
}

.settings-accordion {
  border-radius: var(--r-md);
  overflow: hidden;
}

.settings-accordion-summary {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.74rem;
}

.settings-accordion[open] > .settings-accordion-summary {
  color: var(--neon-cyan);
  border-bottom: 1px solid var(--edge);
}

/* --------------------------------------------------------------------------
   8. MENU AVANCÉ DES MODES
   -------------------------------------------------------------------------- */

.modal {
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(64, 24, 120, 0.5), transparent 60%),
    rgba(2, 3, 10, 0.86);
}

.modal-card {
  border: 1px solid var(--edge-strong);
  border-radius: 20px;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(84, 40, 160, 0.32), transparent 58%),
    linear-gradient(180deg, #0d1226, #06080f);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.66),
    0 0 40px rgba(67, 233, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.modal-card h2 {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(67, 233, 255, 0.4);
}

.mode-menu-header h2 {
  color: #fff;
}

.launch-setup-explainer {
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 209, 102, 0.28);
  background: rgba(255, 209, 102, 0.05);
}

.mode-panel {
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  background: rgba(10, 15, 32, 0.6);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.mode-panel:hover {
  border-color: rgba(120, 200, 255, 0.36);
}

.mode-panel.open {
  border-color: rgba(255, 209, 102, 0.55);
  background: rgba(255, 209, 102, 0.045);
  box-shadow: 0 0 22px rgba(255, 209, 102, 0.12);
}

.mode-panel-toggle strong {
  letter-spacing: 0.06em;
}

.mode-button {
  border-radius: var(--r-md);
}

/* --------------------------------------------------------------------------
   9. ÉCRAN DE PRÉPARATION (biome · taille · couleur)
   -------------------------------------------------------------------------- */

.launch-setup-card {
  border-color: rgba(164, 92, 255, 0.42);
}

.launch-setup-kicker {
  color: var(--neon-cyan);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.launch-setup-biome,
.launch-setup-arena {
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  background: rgba(6, 10, 24, 0.55);
}

.launch-setup-section-title strong {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.launch-step-number {
  border: 2px solid var(--neon-cyan);
  border-radius: 999px;
  color: var(--neon-cyan);
  font-weight: 900;
  background: rgba(67, 233, 255, 0.08);
  box-shadow: 0 0 14px rgba(67, 233, 255, 0.24);
}

.launch-biome-card,
.arena-size-card {
  border-radius: var(--r-md);
  border: 2px solid var(--edge);
  background: linear-gradient(180deg, rgba(14, 20, 42, 0.9), rgba(6, 9, 20, 0.95));
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.launch-biome-card:hover,
.arena-size-card:hover,
.launch-biome-card:focus-visible,
.arena-size-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--edge-strong);
  box-shadow: 0 0 20px rgba(67, 233, 255, 0.2);
}

.launch-biome-card.selected,
.arena-size-card.selected {
  border-color: var(--neon-cyan);
  background: linear-gradient(180deg, rgba(20, 52, 74, 0.95), rgba(6, 14, 26, 0.96));
  box-shadow:
    0 0 24px rgba(67, 233, 255, 0.32),
    inset 0 0 24px rgba(67, 233, 255, 0.1);
}

.launch-biome-card.forest.selected {
  border-color: var(--neon-green);
  box-shadow:
    0 0 24px rgba(107, 255, 166, 0.32),
    inset 0 0 24px rgba(107, 255, 166, 0.1);
}

/* Pastille « sélectionné » explicite */
.launch-biome-card.selected::after,
.arena-size-card.selected::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--neon-cyan);
  color: #04121a;
  font-size: 0.7rem;
  font-weight: 900;
}

.launch-biome-card,
.arena-size-card {
  position: relative;
}

.launch-biome-card.forest.selected::after {
  background: var(--neon-green);
}

.arena-color-panel {
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  background: rgba(6, 10, 24, 0.5);
}

.arena-color-swatch {
  border-radius: var(--r-sm);
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.arena-color-swatch.selected {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(67, 233, 255, 0.55), 0 0 16px rgba(67, 233, 255, 0.4);
}

.launch-setup-summary {
  border: 1px dashed rgba(120, 200, 255, 0.4);
  border-radius: var(--r-md);
  background: rgba(67, 233, 255, 0.05);
  color: #dff3ff;
  letter-spacing: 0.06em;
}

.launch-setup-actions {
  gap: 10px;
}

/* --------------------------------------------------------------------------
   10. HUD EN JEU
   -------------------------------------------------------------------------- */

.chaos-touch-skill-button {
  border-radius: var(--r-md);
  border: 2px solid rgba(255, 62, 203, 0.45);
  background: linear-gradient(180deg, rgba(30, 10, 40, 0.9), rgba(8, 5, 16, 0.94));
  box-shadow: 0 0 18px rgba(255, 62, 203, 0.18);
}

.chaos-touch-skill-button strong {
  letter-spacing: 0.08em;
}

.chaos-touch-skill-button.empty {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
  opacity: 0.55;
}

.chaos-touch-key {
  color: var(--neon-amber);
  font-weight: 900;
}

.virtual-joystick-base {
  border-color: rgba(120, 200, 255, 0.4);
  box-shadow: 0 0 22px rgba(67, 233, 255, 0.18), inset 0 0 26px rgba(0, 0, 0, 0.6);
}

.virtual-joystick-knob {
  box-shadow: 0 0 18px rgba(67, 233, 255, 0.55);
}

.adventure-hud,
.chaos-training-panel {
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(12, 17, 36, 0.94), rgba(5, 8, 18, 0.96));
  box-shadow: var(--halo-card);
}

.adventure-hud-line strong {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--neon-cyan);
}

.chaos-training-header strong {
  letter-spacing: 0.1em;
  color: var(--neon-magenta);
}

.landscape-prompt {
  border: 1px solid var(--edge-strong);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(12, 17, 36, 0.96), rgba(5, 8, 18, 0.98));
  box-shadow: 0 0 40px rgba(67, 233, 255, 0.18);
}

/* --------------------------------------------------------------------------
   11. MENU PRINCIPAL (écran d'accueil arcade)
   -------------------------------------------------------------------------- */

.v50-home-screen {
  padding: clamp(8px, 2vmin, 20px);
  background:
    radial-gradient(circle at 50% 12%, rgba(67, 233, 255, 0.1), transparent 40%),
    linear-gradient(rgba(2, 3, 10, 0.86), rgba(2, 3, 10, 0.95));
  backdrop-filter: blur(8px);
  overflow: auto;
}

.v50-home-shell {
  width: min(1180px, 97vw);
  padding: clamp(8px, 1.4vmin, 16px);
  border-radius: 28px;
  border: 1px solid rgba(120, 190, 255, 0.16);
  background: linear-gradient(180deg, #12182c, #05070f);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.7),
    0 0 50px rgba(67, 233, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Cadre « écran » : fond nuit + grille, plus d'image de référence lourde. */
.v50-home-tv {
  padding: clamp(16px, 2.6vmin, 30px) clamp(14px, 2.6vmin, 32px) clamp(12px, 2vmin, 22px);
  border-radius: 20px;
  border: 2px solid rgba(71, 236, 255, 0.5);
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(164, 92, 255, 0.3), transparent 62%),
    radial-gradient(80% 60% at 50% 108%, rgba(255, 62, 203, 0.22), transparent 62%),
    linear-gradient(180deg, #0a0f22 0%, #070a18 55%, #05060f 100%);
  box-shadow:
    inset 0 0 90px rgba(0, 0, 0, 0.8),
    0 0 30px rgba(63, 227, 255, 0.18);
}

.v50-home-tv::before {
  display: none;
}

/* Grille rétro-futuriste en perspective */
.v50-home-grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image:
    linear-gradient(rgba(255, 62, 203, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 233, 255, 0.12) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px;
  -webkit-mask-image: radial-gradient(100% 78% at 50% 46%, transparent 26%, #000 100%);
  mask-image: radial-gradient(100% 78% at 50% 46%, transparent 26%, #000 100%);
}

.v50-home-scanlines {
  opacity: 0.16;
}

/* Angles néon type Tron */
.v50-home-corners i {
  position: absolute;
  width: 34px;
  height: 34px;
  border: 2px solid rgba(255, 126, 220, 0.7);
  filter: drop-shadow(0 0 8px rgba(255, 62, 203, 0.6));
}

.v50-home-corners i:nth-child(1) { top: 10px; left: 10px; border-width: 2px 0 0 2px; border-radius: 10px 0 0 0; }
.v50-home-corners i:nth-child(2) { top: 10px; right: 10px; border-width: 2px 2px 0 0; border-radius: 0 10px 0 0; border-color: rgba(67, 233, 255, 0.7); }
.v50-home-corners i:nth-child(3) { bottom: 10px; left: 10px; border-width: 0 0 2px 2px; border-radius: 0 0 0 10px; border-color: rgba(67, 233, 255, 0.7); }
.v50-home-corners i:nth-child(4) { bottom: 10px; right: 10px; border-width: 0 2px 2px 0; border-radius: 0 0 10px 0; }

.v50-home-head,
.v50-home-actions,
.v50-home-tagline,
.v50-home-corners {
  position: relative;
  z-index: 1;
}

/* Logo néon (même identité que l'écran d'intro) */
.v50-home-logo {
  display: grid;
  justify-items: center;
  gap: 0.06em;
  font-family: "Courier New", Courier, monospace;
  line-height: 1;
  text-shadow: none;
  color: inherit;
}

.v50-home-logo-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.16em;
  white-space: nowrap;
}

.v50-home-logo-line-1 { font-size: clamp(1.5rem, 4.6vw, 3.4rem); }
.v50-home-logo-line-2 { font-size: clamp(1.15rem, 3.5vw, 2.6rem); gap: 0.3em; letter-spacing: 0.1em; }

.v50-home-logo .v50-neon {
  position: relative;
  display: inline-block;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 0.05em var(--tube);
  text-shadow:
    0 0 0.1em var(--tube),
    0 0 0.34em var(--glow),
    0 0 0.8em color-mix(in srgb, var(--glow) 55%, transparent);
}

.v50-home-logo .v50-neon::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-stroke: 0.015em rgba(255, 255, 255, 0.92);
  text-shadow: none;
}

@supports not (-webkit-text-stroke: 1px red) {
  .v50-home-logo .v50-neon { color: var(--tube); }
  .v50-home-logo .v50-neon::before { display: none; }
}

.v50-neon-pink { --tube: #ff5ed6; --glow: #ff1fae; }
.v50-neon-cyan { --tube: #6ee6ff; --glow: #23c8ff; }
.v50-neon-amber { --tube: #ffb35a; --glow: #ff7a1f; }

.v50-home-disc {
  width: 0.9em;
  height: 0.9em;
  vertical-align: -0.08em;
  animation: v50-disc-spin 7s linear infinite;
  filter: drop-shadow(0 0 9px rgba(86, 236, 255, 0.7));
}

@keyframes v50-disc-spin { to { transform: rotate(360deg); } }

.v50-home-bot {
  width: 0.85em;
  height: 0.85em;
  flex: 0 0 auto;
}

.v50-home-bot-blue { color: #56ecff; filter: drop-shadow(0 0 7px rgba(86, 236, 255, 0.85)); }
.v50-home-bot-pink { color: #ff56cf; filter: drop-shadow(0 0 7px rgba(255, 86, 207, 0.85)); }

.v50-home-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9em;
  margin: clamp(10px, 1.6vmin, 16px) 0 clamp(14px, 2.4vmin, 24px);
  color: #d7e6ff;
  font: 700 clamp(0.62rem, 1.35vw, 0.82rem) "Courier New", monospace;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(67, 233, 255, 0.35);
}

.v50-home-kicker i {
  color: var(--neon-magenta);
  font-style: normal;
  letter-spacing: 0.1em;
  text-shadow: 0 0 8px rgba(255, 62, 203, 0.7);
}

/* --- Cartes de mode ----------------------------------------------------- */

.v50-home-grid {
  position: relative;
  z-index: 1;
  gap: clamp(8px, 1.2vw, 14px);
}

.v50-mode {
  position: relative;
  min-height: clamp(180px, 27vh, 262px);
  padding: clamp(10px, 1.5vmin, 16px) 10px clamp(12px, 1.8vmin, 18px);
  border-radius: 14px;
  border: 2px solid currentColor;
  background:
    linear-gradient(180deg, color-mix(in srgb, currentColor 12%, transparent), transparent 45%),
    linear-gradient(180deg, rgba(9, 14, 32, 0.94), rgba(5, 7, 18, 0.98));
  display: grid;
  grid-template-rows: 1fr auto auto auto;
  align-content: stretch;
  justify-items: center;
  gap: 6px;
  text-align: center;
  box-shadow:
    0 0 18px color-mix(in srgb, currentColor 22%, transparent),
    inset 0 0 26px color-mix(in srgb, currentColor 8%, transparent);
  transition:
    transform 160ms cubic-bezier(0.2, 0.9, 0.3, 1.3),
    box-shadow 160ms ease,
    filter 160ms ease;
}

/* Angles pixel lumineux */
.v50-mode::before,
.v50-mode::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  opacity: 0.85;
  pointer-events: none;
}

.v50-mode::before { top: 5px; left: 5px; border-width: 2px 0 0 2px; }
.v50-mode::after { bottom: 5px; right: 5px; border-width: 0 2px 2px 0; }

.v50-mode:hover,
.v50-mode:focus-visible,
.v50-mode.is-selected {
  transform: translateY(-5px);
  box-shadow:
    0 0 32px color-mix(in srgb, currentColor 45%, transparent),
    inset 0 0 34px color-mix(in srgb, currentColor 16%, transparent);
  filter: brightness(1.12);
}

.v50-mode:focus-visible {
  outline: none;
}

.v50-mode.is-selected {
  border-width: 3px;
}

.v50-mode-art {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 98px;
  aspect-ratio: 1;
  padding: 10px;
  border-radius: 12px;
  border: 2px solid color-mix(in srgb, currentColor 55%, transparent);
  background: rgba(0, 0, 0, 0.36);
  box-shadow: inset 0 0 22px color-mix(in srgb, currentColor 22%, transparent);
}

.v50-mode-art svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 6px color-mix(in srgb, currentColor 60%, transparent));
}

.v50-mode strong {
  font: 900 clamp(0.7rem, 1.35vw, 0.94rem) "Courier New", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: currentColor;
  text-shadow: 0 0 10px color-mix(in srgb, currentColor 70%, transparent);
}

.v50-mode small {
  color: #c9d9f0;
  font-size: clamp(0.58rem, 1vw, 0.72rem);
  line-height: 1.3;
}

.v50-mode-tag {
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 55%, transparent);
  background: color-mix(in srgb, currentColor 12%, transparent);
  color: currentColor;
  font-size: 0.54rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Tonalités par mode */
.v50-mode.adventure { color: #61e7ff; }
.v50-mode.solo { color: #75ff9a; }
.v50-mode.local { color: #ffd166; }
.v50-mode.chaos { color: #ff5da8; }
.v50-mode.online { color: #7ba6ff; }

/* Le Chaos vibre un peu plus fort. */
.v50-mode.chaos::before,
.v50-mode.chaos::after {
  animation: v50-chaos-blink 1.9s steps(1, end) infinite;
}

@keyframes v50-chaos-blink {
  0%, 74%, 100% { opacity: 0.85; }
  80%, 92% { opacity: 0.25; }
}

.v50-mode.online .v50-mode-art svg {
  animation: v50-online-spin 14s linear infinite;
}

@keyframes v50-online-spin {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}

/* --- Barre d'actions ---------------------------------------------------- */

.v50-home-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.4vw, 18px);
  margin-top: clamp(14px, 2.2vmin, 22px);
}

.v50-home-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 168px;
  justify-content: center;
  padding: 11px 20px;
  border-radius: 10px;
  border: 2px solid rgba(120, 200, 255, 0.4);
  background: linear-gradient(180deg, rgba(14, 24, 48, 0.92), rgba(6, 10, 22, 0.96));
  color: #e6f3ff;
  font: 900 0.78rem "Courier New", monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.v50-home-action:hover,
.v50-home-action:focus-visible {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 22px rgba(67, 233, 255, 0.3);
}

.v50-home-action.is-primary {
  border-color: rgba(107, 255, 166, 0.7);
  color: #dfffec;
  box-shadow: 0 0 22px rgba(107, 255, 166, 0.2);
}

.v50-home-action.is-primary:hover,
.v50-home-action.is-primary:focus-visible {
  border-color: var(--neon-green);
  box-shadow: 0 0 28px rgba(107, 255, 166, 0.45);
}

.v50-pad-key {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid currentColor;
  font-size: 0.66rem;
  font-weight: 900;
}

.v50-pad-key.key-a { color: #6bffa6; }
.v50-pad-key.key-b { color: #ff7a7a; }
.v50-pad-key.key-gear { color: #9fd4ff; border-style: dashed; }

.v50-home-tagline {
  margin: clamp(10px, 1.6vmin, 16px) 0 0;
  text-align: center;
  color: #8fd8ff;
  font: 700 clamp(0.6rem, 1.2vw, 0.78rem) "Courier New", monospace;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(67, 233, 255, 0.45);
}

.v50-home-tagline span {
  color: var(--neon-magenta);
}

/* --- Bandeau d'état ----------------------------------------------------- */

.v50-home-bottom {
  position: relative;
  z-index: 1;
  margin-top: clamp(12px, 2vmin, 18px);
  padding-top: clamp(10px, 1.6vmin, 14px);
  border-top: 1px solid rgba(120, 190, 255, 0.16);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #9bb6d8;
  font: 700 0.62rem "Courier New", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.v50-home-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(120, 190, 255, 0.2);
  background: rgba(8, 13, 28, 0.7);
}

.v50-home-chip i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--neon-green);
  box-shadow: 0 0 9px var(--neon-green);
}

.v50-home-chip-hint {
  border-style: dashed;
  color: #7d93b5;
}

.v50-home-chip-hint i { display: none; }

/* --------------------------------------------------------------------------
   12. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .v50-mode { min-height: clamp(160px, 24vh, 230px); }
}

@media (max-width: 900px) {
  .v50-home-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v50-home-action { min-width: 140px; }
}

@media (max-width: 620px) {
  .v50-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v50-mode { min-height: 158px; }
  .v50-mode-art { max-width: 74px; padding: 7px; }
  .v50-mode-tag { display: none; }
  .v50-home-actions { gap: 8px; }
  .v50-home-action { min-width: 0; flex: 1 1 auto; padding: 10px 12px; font-size: 0.68rem; letter-spacing: 0.1em; }
  .v50-home-bottom { font-size: 0.56rem; }
  .topbar { padding: 10px; }
  .top-actions button { font-size: 0.7rem; padding: 7px 9px; }
}

@media (max-width: 430px) {
  .v50-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v50-home-tv { padding: 14px 10px 12px; }
  .v50-home-chip-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .v50-home-disc,
  .v50-mode.chaos::before,
  .v50-mode.chaos::after,
  .v50-mode.online .v50-mode-art svg {
    animation: none !important;
  }

  .v50-mode:hover,
  .v50-mode:focus-visible,
  .v50-mode.is-selected {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   13. V55 — FINITIONS DU MENU AVANCÉ ET DES PANNEAUX DE MODE
   -------------------------------------------------------------------------- */

.mode-menu-header h2 {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 0 16px rgba(67, 233, 255, 0.45);
}

.mode-menu-header p {
  color: var(--muted);
}

.scroll-hint {
  border-radius: 999px;
  border: 1px dashed rgba(120, 190, 255, 0.28);
  color: #8fa9cc;
}

/* Bandeau explicatif : titre au-dessus, précision en dessous. */
.launch-setup-explainer {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 10px 13px;
}

.launch-setup-explainer strong {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neon-amber);
}

.launch-setup-explainer small {
  line-height: 1.45;
}

/* Boutons de lancement : la vraie action primaire de chaque volet. */
.mode-button {
  border: 2px solid rgba(120, 200, 255, 0.38);
  background: linear-gradient(180deg, rgba(16, 26, 52, 0.94), rgba(7, 11, 24, 0.97));
}

.mode-button strong {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.mode-button:hover,
.mode-button:focus-visible {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 24px rgba(67, 233, 255, 0.28);
}

.compact-mode-actions .mode-button {
  border-color: rgba(107, 255, 166, 0.5);
  background:
    linear-gradient(180deg, rgba(20, 48, 40, 0.94), rgba(6, 14, 22, 0.97));
  box-shadow: 0 0 20px rgba(107, 255, 166, 0.16);
}

.compact-mode-actions .mode-button strong {
  color: #d9ffe9;
  text-shadow: 0 0 12px rgba(107, 255, 166, 0.55);
}

.compact-mode-actions .mode-button:hover,
.compact-mode-actions .mode-button:focus-visible {
  border-color: var(--neon-green);
  box-shadow: 0 0 30px rgba(107, 255, 166, 0.42);
}

/* Cartes de difficulté */
.difficulty-card {
  border-radius: var(--r-md);
  border: 2px solid var(--edge);
  background: rgba(8, 12, 28, 0.7);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.difficulty-card:hover,
.difficulty-card:focus-visible {
  border-color: var(--edge-strong);
}

.difficulty-card.selected {
  border-color: var(--neon-amber);
  background: rgba(255, 209, 102, 0.07);
  box-shadow: 0 0 20px rgba(255, 209, 102, 0.22);
}

.difficulty-card.selected .difficulty-name {
  color: var(--neon-amber);
}

.adventure-badge {
  border-radius: 999px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Salons en ligne */
.room-code-box {
  border-radius: var(--r-md);
  border: 1px dashed rgba(120, 200, 255, 0.5);
  background: rgba(67, 233, 255, 0.05);
}

.room-code-box strong {
  color: var(--neon-cyan);
  letter-spacing: 0.24em;
  text-shadow: 0 0 16px rgba(67, 233, 255, 0.5);
}

/* Bibliothèque de skills du mode Chaos */
.chaos-skill-card,
.chaos-loadout-slot {
  border-radius: var(--r-md);
  border: 2px solid var(--edge);
  background: linear-gradient(180deg, rgba(14, 20, 42, 0.9), rgba(6, 9, 20, 0.95));
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.chaos-skill-card:hover,
.chaos-loadout-slot:hover,
.chaos-skill-card:focus-visible,
.chaos-loadout-slot:focus-visible {
  border-color: var(--edge-strong);
  transform: translateY(-2px);
}

.chaos-skill-card.selected,
.chaos-loadout-slot:not(.empty) {
  border-color: var(--neon-magenta);
  box-shadow: 0 0 20px rgba(255, 62, 203, 0.26);
}

.chaos-loadout-slot.empty {
  border-style: dashed;
  border-color: rgba(120, 190, 255, 0.2);
  opacity: 0.62;
}

/* --------------------------------------------------------------------------
   14. V55 — APERÇU DE L'ARÈNE
   -------------------------------------------------------------------------- */

.arena-color-preview {
  height: 48px;
  border-radius: 8px;
  border-color: rgba(120, 200, 255, 0.5);
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.7),
    0 0 16px rgba(67, 233, 255, 0.12);
}

/* Coins mis en valeur : c'est là que se joue la partie. */
.arena-color-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 0 0, rgba(67, 233, 255, 0.3), transparent 26px),
    radial-gradient(circle at 100% 0, rgba(255, 62, 203, 0.3), transparent 26px),
    radial-gradient(circle at 0 100%, rgba(255, 209, 102, 0.26), transparent 26px),
    radial-gradient(circle at 100% 100%, rgba(107, 255, 166, 0.26), transparent 26px);
}

.arena-color-preview span {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  z-index: 1;
}

.arena-color-preview span:nth-child(1) {
  background: var(--p1);
  box-shadow: 0 0 8px var(--p1);
}

.arena-color-preview span:nth-child(2) {
  background: #fff;
  box-shadow: 0 0 8px #fff;
}

.arena-color-preview span:nth-child(3) {
  background: var(--p2);
  box-shadow: 0 0 8px var(--p2);
}

/* --------------------------------------------------------------------------
   15. V55 — TRANSITIONS UI DISCRÈTES
   -------------------------------------------------------------------------- */

.modal:not(.hidden) > .modal-card {
  animation: v55-card-in 240ms cubic-bezier(0.16, 0.9, 0.28, 1) both;
}

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

.mode-panel-content:not([hidden]) {
  animation: v55-panel-in 200ms ease-out both;
}

@keyframes v55-panel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .modal:not(.hidden) > .modal-card,
  .mode-panel-content:not([hidden]) {
    animation: none;
  }

  .chaos-skill-card:hover,
  .chaos-loadout-slot:hover,
  .launch-biome-card:hover,
  .arena-size-card:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   16. V55 — GARDE-FOUS PLEIN ÉCRAN / TV CRT
   Le nouveau cadre de la barre supérieure est compacté dans les modes
   immersifs pour ne pas rogner la hauteur disponible de l'arène.
   -------------------------------------------------------------------------- */

.app-shell:fullscreen .topbar,
.app-shell:-webkit-full-screen .topbar,
.app-shell.fullscreen-fallback .topbar {
  padding: 7px 11px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(14, 20, 42, 0.8), rgba(6, 9, 20, 0.86));
}

.app-shell:fullscreen .topbar h1,
.app-shell:-webkit-full-screen .topbar h1,
.app-shell.fullscreen-fallback .topbar h1 {
  white-space: nowrap;
}

/* Le fond de page décoratif ne doit jamais passer devant l'arène. */
body.fullscreen-fallback-active::before,
body.fullscreen-fallback-active::after,
body.arena-fullscreen-fallback-active::before,
body.arena-fullscreen-fallback-active::after {
  display: none;
}

/* --------------------------------------------------------------------------
   17. V55 — CORRECTIFS D'USAGE DU MENU PRINCIPAL
   -------------------------------------------------------------------------- */

/* Pas de sélection de texte parasite lors des taps sur les cartes. */
.v50-home-screen {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 700px) {
  /* Les chevrons décoratifs se plaçaient mal une fois le titre replié. */
  .v50-home-kicker {
    gap: 0;
    letter-spacing: 0.14em;
  }

  .v50-home-kicker i {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   18. V55 — BARRE SUPÉRIEURE SUR ÉCRAN ÉTROIT
   Sous ~940 px le titre était compressé sur trois lignes par les boutons.
   On empile titre puis actions ; le cas « mobile en paysage » garde sa
   disposition compacte existante (min-height exclut ce scénario).
   -------------------------------------------------------------------------- */

@media (max-width: 940px) and (min-height: 560px) {
  .topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .topbar h1 {
    white-space: nowrap;
  }

  .top-actions {
    justify-content: flex-start;
  }

  .top-actions button {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   19. V55 — DERNIÈRES FINITIONS
   -------------------------------------------------------------------------- */

/* Le sélecteur de couleur suit désormais l'alignement de son libellé. */
.room-color-input {
  margin: 6px 0 14px;
  margin-inline: auto;
  border-color: var(--edge);
  border-radius: var(--r-sm);
  background: rgba(4, 7, 18, 0.92);
}

.room-input-label,
.room-input,
.room-color-input {
  max-width: 360px;
}

.room-input {
  letter-spacing: 0.22em;
  text-align: center;
}

/* Message de fin de partie : même traitement néon que le reste. */
#modal .modal-card h2 {
  color: #fff;
  text-shadow: 0 0 18px rgba(255, 62, 203, 0.5);
}

/* Focus visible cohérent sur toutes les cartes cliquables. */
.v50-mode:focus-visible,
.launch-biome-card:focus-visible,
.arena-size-card:focus-visible,
.difficulty-card:focus-visible,
.chaos-skill-card:focus-visible,
.mode-button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
}

/* Palier 3 colonnes : les deux dernières cartes sont recentrées plutôt que
   laissées alignées à gauche avec un vide à droite. */
@media (min-width: 621px) and (max-width: 900px) {
  .v50-home-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .v50-mode {
    grid-column: span 2;
  }

  .v50-mode:nth-child(4) {
    grid-column: 2 / span 2;
  }

  .v50-mode:nth-child(5) {
    grid-column: 4 / span 2;
  }
}

/* ========================================================================== 
   V57 — ÉCRANS DE MODE DÉSOLIDARISÉS
   Le menu CRT choisit le mode ; le modal suivant n'affiche que ses paramètres.
   ========================================================================== */

#networkModal .network-card.mode-focus-active {
  width: min(980px, calc(100vw - 24px));
  max-height: calc(100dvh - 20px);
}

.mode-specific-header {
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(91, 229, 255, 0.18);
}

.mode-specific-header-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.mode-specific-heading {
  min-width: 0;
  text-align: center;
}

.mode-specific-heading h2 {
  margin: 0 0 5px;
}

.mode-specific-heading p {
  margin: 0;
}

.mode-back-to-crt {
  min-width: 132px;
  padding: 9px 12px;
  border: 1px solid rgba(68, 231, 255, 0.46);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(7, 33, 50, 0.94), rgba(4, 13, 27, 0.98));
  color: #79efff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: inset 0 0 12px rgba(50, 230, 255, 0.08), 0 0 16px rgba(50, 230, 255, 0.08);
}

.mode-back-to-crt:hover,
.mode-back-to-crt:focus-visible {
  border-color: #68efff;
  color: #fff;
  box-shadow: inset 0 0 16px rgba(50, 230, 255, 0.14), 0 0 20px rgba(50, 230, 255, 0.18);
}

.network-card.mode-focus-active .mode-focus-explainer {
  display: none;
}

.network-card.mode-focus-active .mode-specific-stack {
  padding: 0 0 max(14px, env(safe-area-inset-bottom));
}

.network-card.mode-focus-active .mode-panel {
  display: none;
}

.network-card.mode-focus-active .mode-panel.mode-focus-selected {
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.network-card.mode-focus-active .mode-panel.mode-focus-selected > .mode-panel-toggle {
  display: none !important;
}

.network-card.mode-focus-active .mode-panel.mode-focus-selected > .mode-panel-content {
  display: block;
  padding: 6px 0 0;
  border: 0;
  background: transparent;
}

.network-card.mode-focus-active[data-focused-mode="adventure"] .mode-specific-header h2 {
  color: #59eaff;
}

.network-card.mode-focus-active[data-focused-mode="solo"] .mode-specific-header h2 {
  color: #72ff86;
}

.network-card.mode-focus-active[data-focused-mode="local"] .mode-specific-header h2 {
  color: #ffd45f;
}

.network-card.mode-focus-active[data-focused-mode="chaos"] .mode-specific-header h2 {
  color: #ff668f;
  text-shadow: 0 0 18px rgba(255, 78, 140, 0.52);
}

.network-card.mode-focus-active[data-focused-mode="online"] .mode-specific-header h2 {
  color: #65e9ff;
}

.network-card.mode-focus-active[data-focused-mode="chaos"] {
  width: min(1080px, calc(100vw - 24px));
}

.network-card.mode-focus-active[data-focused-mode="local"] {
  width: min(860px, calc(100vw - 24px));
}

@media (max-width: 700px) {
  .mode-specific-header-row {
    grid-template-columns: 1fr;
  }

  .mode-back-to-crt {
    justify-self: start;
    min-width: 0;
  }

  .mode-specific-heading {
    text-align: left;
  }

  .mode-specific-header h2,
  .mode-specific-header p {
    text-align: left;
  }

  #networkModal .network-card.mode-focus-active,
  .network-card.mode-focus-active[data-focused-mode="chaos"],
  .network-card.mode-focus-active[data-focused-mode="local"] {
    width: calc(100vw - 12px);
  }
}

/* ========================================================================== 
   V58 — PARCOURS CHAOS HIÉRARCHIQUE
   CHAOS / CHAOS EN LIGNE → sous-mode → skills → lancement
   ========================================================================== */

.chaos-flow-managed {
  --chaos-flow-cyan: #62e9ff;
  --chaos-flow-pink: #ff5a9b;
  --chaos-flow-violet: #9a63ff;
  --chaos-flow-panel: rgba(8, 12, 28, 0.96);
}

.chaos-flow-shell {
  display: grid;
  gap: 16px;
  margin-bottom: 14px;
}

.chaos-flow-stage {
  border: 1px solid rgba(255, 92, 155, 0.28);
  border-radius: 14px;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(151, 76, 255, 0.12), transparent 52%),
    linear-gradient(180deg, rgba(17, 13, 38, 0.98), rgba(6, 9, 22, 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 12px 34px rgba(0, 0, 0, 0.34),
    0 0 24px rgba(255, 78, 140, 0.07);
}

.chaos-flow-stage-heading {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.chaos-flow-stage-heading > strong {
  color: #fff;
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.chaos-flow-stage-heading > small {
  color: #b9bfd5;
  line-height: 1.45;
}

.chaos-flow-step,
.chaos-flow-final-kicker {
  color: #ff7aac;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.chaos-flow-stage-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.chaos-flow-back {
  min-width: 144px;
  padding: 9px 11px;
  border: 1px solid rgba(98, 233, 255, 0.32);
  border-radius: 8px;
  background: rgba(5, 18, 32, 0.94);
  color: #7cedff;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.chaos-flow-back:hover,
.chaos-flow-back:focus-visible {
  border-color: #71edff;
  color: #fff;
  box-shadow: 0 0 18px rgba(80, 225, 255, 0.15);
}

.chaos-flow-choice-grid {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.chaos-flow-branch-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.chaos-flow-variant-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.chaos-flow-choice {
  position: relative;
  min-height: 142px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 17px 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(17, 22, 49, 0.96), rgba(7, 10, 24, 0.98));
  color: #f7f5ff;
  text-align: center;
  box-shadow: inset 0 0 22px rgba(255, 255, 255, 0.025);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.chaos-flow-choice::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -24px;
  height: 48px;
  border-radius: 50%;
  background: currentColor;
  filter: blur(30px);
  opacity: 0.13;
  pointer-events: none;
}

.chaos-flow-choice:hover,
.chaos-flow-choice:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(255, 100, 170, 0.7);
  background: linear-gradient(180deg, rgba(29, 25, 62, 0.98), rgba(9, 12, 29, 0.99));
  box-shadow:
    inset 0 0 24px rgba(255, 80, 160, 0.05),
    0 0 24px rgba(255, 80, 160, 0.12);
  outline: none;
}

.chaos-flow-choice strong {
  font-size: 0.86rem;
  letter-spacing: 0.07em;
  line-height: 1.35;
}

.chaos-flow-choice small {
  color: #b9c0d6;
  line-height: 1.4;
}

.chaos-flow-choice-icon {
  min-width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  padding: 0 8px;
  border-radius: 10px;
  border: 1px solid currentColor;
  color: #ff69a3;
  background: rgba(255, 69, 150, 0.06);
  font-size: 1rem;
  font-weight: 900;
  text-shadow: 0 0 12px currentColor;
  box-shadow: inset 0 0 14px rgba(255, 86, 154, 0.08), 0 0 16px rgba(255, 86, 154, 0.08);
}

.chaos-flow-choice-local {
  color: #ff70a8;
  border-color: rgba(255, 88, 153, 0.42);
}

.chaos-flow-choice-online {
  color: #6cecff;
  border-color: rgba(88, 227, 255, 0.44);
}

.chaos-flow-choice-online .chaos-flow-choice-icon,
.chaos-flow-choice-join .chaos-flow-choice-icon {
  color: #6cecff;
  background: rgba(73, 221, 255, 0.07);
}

/* Les anciennes rangées de lancement restent dans le DOM : game.js conserve
   ainsi tous ses listeners. Elles servent désormais uniquement de cibles au
   bouton final de la V58 et ne sont plus affichées comme menu. */
.chaos-flow-managed > .chaos-mode-actions,
.chaos-flow-managed .chaos-online-actions {
  display: none !important;
}

/* Les réglages n'apparaissent qu'à l'étape 3. */
.chaos-flow-managed > .chaos-loadout-card,
.chaos-flow-managed > .chaos-four-player-format-card,
.chaos-flow-managed > .chaos-team-skill-rules-card,
.chaos-flow-managed > .chaos-online-launch-card,
.chaos-flow-managed > .chaos-flow-final-actions {
  display: none;
}

.chaos-flow-managed[data-chaos-flow-stage="skills"] > .chaos-loadout-card {
  display: block;
  animation: chaos-flow-reveal 230ms ease-out both;
}

.chaos-flow-managed[data-chaos-flow-stage="skills"].chaos-flow-local-four > .chaos-four-player-format-card {
  display: block;
  animation: chaos-flow-reveal 230ms ease-out both;
}

.chaos-flow-managed[data-chaos-flow-stage="skills"].chaos-flow-team-rules > .chaos-team-skill-rules-card {
  display: block;
  animation: chaos-flow-reveal 230ms ease-out both;
}

.chaos-flow-managed[data-chaos-flow-stage="skills"].chaos-flow-online-host > .chaos-online-launch-card {
  display: block;
  animation: chaos-flow-reveal 230ms ease-out both;
}

.chaos-flow-managed[data-chaos-flow-stage="skills"] > .chaos-flow-final-actions:not([hidden]) {
  display: flex;
  animation: chaos-flow-reveal 230ms ease-out both;
}

.chaos-flow-managed[data-chaos-flow-stage="skills"].chaos-flow-online-host:not(.chaos-flow-online-host-four)
  > .chaos-online-launch-card .online-four-player-format {
  display: none !important;
}

@keyframes chaos-flow-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.chaos-flow-final-actions {
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding: 15px 16px;
  border: 1px solid rgba(255, 92, 155, 0.28);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(26, 12, 38, 0.96), rgba(7, 18, 31, 0.96));
}

.chaos-flow-final-actions > div {
  display: grid;
  gap: 4px;
}

.chaos-flow-final-actions > div > strong {
  color: #fff;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
}

.chaos-flow-final-actions > div > small {
  color: #aeb7cd;
}

.chaos-flow-launch-btn {
  min-width: 250px;
  padding: 13px 16px;
  border-color: rgba(255, 93, 157, 0.55);
  color: #fff;
  background: linear-gradient(90deg, rgba(201, 35, 104, 0.68), rgba(86, 42, 180, 0.7));
  box-shadow: 0 0 20px rgba(255, 69, 145, 0.14);
}

.chaos-flow-launch-btn:hover,
.chaos-flow-launch-btn:focus-visible {
  border-color: #ff77ad;
  box-shadow: 0 0 28px rgba(255, 69, 145, 0.25);
}

/* Dans le parcours en ligne, la carte native sert seulement aux paramètres
   d'hôte (couleur / format 4 joueurs), jamais à re-proposer les sous-modes. */
.chaos-flow-managed .chaos-online-launch-card {
  margin-top: 14px;
}

.chaos-flow-managed .chaos-online-launch-card .chaos-online-launch-header > div > strong {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .chaos-flow-branch-grid,
  .chaos-flow-variant-grid {
    grid-template-columns: 1fr;
  }

  .chaos-flow-stage-toolbar {
    grid-template-columns: 1fr;
  }

  .chaos-flow-back {
    justify-self: start;
    min-width: 0;
  }

  .chaos-flow-choice {
    min-height: 116px;
  }

  .chaos-flow-final-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .chaos-flow-launch-btn {
    min-width: 0;
    width: 100%;
  }
}

/* =========================================================
   V59 — séparation stricte Chaos / Chaos en ligne
   ========================================================= */

/* Une branche choisie ne doit jamais laisser apparaître les commandes de
   l'autre branche, même si une règle CSS héritée évolue plus tard. */
.chaos-flow-managed.chaos-branch-local > .chaos-online-launch-card,
.chaos-flow-managed.chaos-branch-local [data-chaos-flow-options="online"] {
  display: none !important;
}

.chaos-flow-managed.chaos-branch-online > .chaos-four-player-format-card,
.chaos-flow-managed.chaos-branch-online [data-chaos-flow-options="local"] {
  display: none !important;
}

/* Les anciens boutons natifs restent cachés dans les deux branches : ils ne
   servent qu'aux listeners de game.js lorsqu'on valide CONTINUER. */
.chaos-flow-managed.chaos-branch-local > .chaos-mode-actions,
.chaos-flow-managed.chaos-branch-online > .chaos-mode-actions,
.chaos-flow-managed.chaos-branch-local .chaos-online-actions,
.chaos-flow-managed.chaos-branch-online .chaos-online-actions {
  display: none !important;
}

/* Identité visuelle claire : rose/magenta pour le Chaos local, cyan pour le
   Chaos réseau. */
.network-card[data-focused-mode="chaos"] .chaos-flow-managed.chaos-branch-local .chaos-flow-stage-heading strong {
  color: #ff77ad;
  text-shadow: 0 0 14px rgba(255, 78, 151, 0.28);
}

.network-card[data-focused-mode="chaos"] .chaos-flow-managed.chaos-branch-online .chaos-flow-stage-heading strong {
  color: #6cecff;
  text-shadow: 0 0 14px rgba(74, 224, 255, 0.28);
}

.chaos-flow-managed.chaos-branch-local[data-chaos-flow-stage="skills"] > .chaos-online-launch-card {
  display: none !important;
}

/* Dans Chaos en ligne, les paramètres d'hôte n'apparaissent que pour une
   variante d'hébergement. Rejoindre n'affiche donc aucune option d'hôte. */
.chaos-flow-managed.chaos-branch-online[data-chaos-flow-stage="skills"]:not(.chaos-flow-online-host)
  > .chaos-online-launch-card {
  display: none !important;
}


/* V60 — multitouch simultané : le joystick et le canvas peuvent chacun
   capturer leur propre doigt sans que le navigateur transforme le geste
   en scroll, zoom ou pinch. */
.arena-fullscreen-stage,
.fullscreen-tv-shell,
.crt-frame,
#gameCanvas,
.virtual-joystick,
.virtual-joystick-base {
  touch-action: none;
  overscroll-behavior: contain;
}

.dual-touch-help {
  margin-top: 10px;
  padding: 10px 12px;
  border-left: 3px solid rgba(50, 230, 255, 0.58);
  background: rgba(50, 230, 255, 0.055);
  line-height: 1.45;
}

/* =========================================================
   V61 — OPTIONS DE CONTRÔLE + DISPOSITION TACTILE
   ========================================================= */
.control-options-modal {
  z-index: 1420;
}

.control-options-card {
  width: min(980px, calc(100vw - 28px));
  max-height: min(90vh, 860px);
  overflow: auto;
  padding: 18px;
}

.control-options-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.control-options-header h2 {
  margin: 3px 0 5px;
}

.control-options-header p {
  margin: 0;
  color: var(--muted);
}

.control-options-card > .controls-settings {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
}

.control-options-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.touch-layout-settings,
.launch-setup-touch {
  border: 1px solid rgba(72, 222, 255, 0.25);
  background: linear-gradient(180deg, rgba(12, 27, 42, 0.84), rgba(6, 11, 21, 0.9));
  box-shadow: inset 0 0 22px rgba(50, 230, 255, 0.04);
}

.touch-layout-settings {
  padding: 13px;
  border-radius: 10px;
}

.touch-layout-settings-head {
  display: grid;
  gap: 4px;
  margin-bottom: 11px;
}

.touch-layout-settings-head small,
.launch-touch-note {
  color: var(--muted);
  line-height: 1.45;
}

.touch-layout-choice-grid,
.launch-touch-layout-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.touch-layout-choice,
.launch-touch-layout-card {
  min-height: 116px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  text-align: left;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(5, 9, 18, .86);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.touch-layout-choice:hover,
.touch-layout-choice:focus-visible,
.launch-touch-layout-card:hover,
.launch-touch-layout-card:focus-visible {
  border-color: rgba(50, 230, 255, .65);
}

.touch-layout-choice.selected,
.launch-touch-layout-card.selected {
  border-color: #32e6ff;
  box-shadow: inset 0 0 18px rgba(50, 230, 255, .12), 0 0 16px rgba(50, 230, 255, .12);
}

.touch-layout-choice > strong,
.launch-touch-layout-card > strong {
  align-self: end;
  color: #fff;
}

.touch-layout-choice > small,
.launch-touch-layout-card > small {
  align-self: start;
  color: var(--muted);
}

.touch-layout-preview {
  position: relative;
  grid-row: 1 / span 2;
  width: 96px;
  height: 58px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  background:
    linear-gradient(rgba(50,230,255,.07), rgba(255,78,215,.05)),
    #02050a;
  overflow: hidden;
  box-shadow: inset 0 0 14px rgba(50,230,255,.05);
}

.touch-layout-preview::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255,255,255,.08);
}

.touch-layout-preview .preview-stick {
  position: absolute;
  bottom: 9px;
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255,212,106,.9);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255,212,106,.25);
}

.touch-layout-preview .preview-skills {
  position: absolute;
  bottom: 15px;
  color: #ff8b6a;
  font-style: normal;
  font-size: 14px;
  letter-spacing: 1px;
  text-shadow: 0 0 6px rgba(255,78,55,.35);
}

.touch-layout-preview.joystick-left .preview-stick { left: 10px; }
.touch-layout-preview.joystick-left .preview-skills { right: 8px; }
.touch-layout-preview.joystick-right .preview-stick { right: 10px; }
.touch-layout-preview.joystick-right .preview-skills { left: 8px; }

.launch-setup-touch {
  margin-top: 14px;
  padding: 14px;
  border-radius: 12px;
}

.launch-setup-touch.hidden {
  display: none !important;
}

.launch-touch-note {
  margin: 10px 0 0;
  font-size: .78rem;
}

/* La position des skills Chaos suit toujours l'inverse du joystick. */
.virtual-joystick:not(.right-side) ~ .chaos-touch-skills {
  left: auto;
  right: max(15px, env(safe-area-inset-right));
}

.virtual-joystick.right-side ~ .chaos-touch-skills {
  right: auto;
  left: max(15px, env(safe-area-inset-left));
}

@media (max-width: 720px) {
  .control-options-card {
    width: calc(100vw - 16px);
    max-height: 94vh;
    padding: 13px;
  }

  .touch-layout-choice-grid,
  .launch-touch-layout-grid {
    grid-template-columns: 1fr;
  }

  .touch-layout-choice,
  .launch-touch-layout-card {
    min-height: 96px;
  }
}

@media (orientation: landscape) and (pointer: coarse) {
  .virtual-joystick {
    bottom: max(10px, env(safe-area-inset-bottom));
  }

  .chaos-touch-skills {
    bottom: max(10px, env(safe-area-inset-bottom));
  }
}

/* ========================================================================== 
   V63 — CHAOS EN LIGNE / UI DE RÉFÉRENCE
   Refonte purement visuelle inspirée du terminal néon fourni par l'utilisateur.
   Les boutons et leurs IDs restent inchangés : aucune logique réseau du jeu
   n'est dupliquée ici.
   ========================================================================== */

html.chaos-online-interface,
body.chaos-online-interface {
  --co-cyan: #59ecff;
  --co-cyan-soft: rgba(89, 236, 255, 0.34);
  --co-pink: #ff58bd;
  --co-pink-soft: rgba(255, 88, 189, 0.32);
  --co-violet: #9e65ff;
  --co-panel: rgba(5, 9, 24, 0.985);
}

/* Le voile reste sombre mais laisse respirer le HUD déjà existant autour du
   panneau, comme sur la référence. */
body.chaos-online-interface #networkModal {
  background:
    radial-gradient(circle at 50% 42%, rgba(28, 22, 73, 0.24), transparent 42%),
    rgba(0, 2, 8, 0.68);
  backdrop-filter: none;
}

body.chaos-online-interface #networkModal .network-card.mode-focus-active[data-focused-mode="chaos"] {
  position: relative;
  width: min(1160px, calc(100vw - 300px));
  max-height: calc(100dvh - 54px);
  padding: 18px 20px 22px;
  overflow-x: hidden;
  border: 1px solid rgba(99, 226, 255, 0.64);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(8, 10, 24, 0.985), rgba(4, 7, 18, 0.99));
  box-shadow:
    0 0 0 1px rgba(255, 75, 190, 0.22),
    0 0 28px rgba(74, 224, 255, 0.22),
    0 0 56px rgba(255, 70, 177, 0.12),
    inset 0 0 38px rgba(72, 205, 255, 0.055);
}

body.chaos-online-interface #networkModal .network-card.mode-focus-active[data-focused-mode="chaos"]::before,
body.chaos-online-interface #networkModal .network-card.mode-focus-active[data-focused-mode="chaos"]::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

body.chaos-online-interface #networkModal .network-card.mode-focus-active[data-focused-mode="chaos"]::before {
  inset: 7px;
  border-radius: 16px;
  border: 1px solid rgba(255, 82, 187, 0.14);
  box-shadow: inset 0 0 24px rgba(86, 230, 255, 0.04);
}

body.chaos-online-interface #networkModal .network-card.mode-focus-active[data-focused-mode="chaos"]::after {
  left: 7%;
  right: 7%;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--co-cyan), var(--co-pink), transparent);
  box-shadow: 0 0 12px rgba(83, 232, 255, 0.46);
  opacity: 0.72;
}

body.chaos-online-interface #networkModal .network-card.mode-focus-active[data-focused-mode="chaos"] > * {
  position: relative;
  z-index: 1;
}

/* En-tête central de la fenêtre. */
body.chaos-online-interface .mode-specific-header {
  padding: 1px 4px 14px;
  border-bottom: 1px solid rgba(101, 226, 255, 0.18);
}

body.chaos-online-interface .mode-specific-heading h2 {
  color: #ff70c8 !important;
  font-size: clamp(1.28rem, 2.2vw, 1.9rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow:
    0 0 9px rgba(255, 79, 188, 0.62),
    0 0 24px rgba(255, 79, 188, 0.22);
}

body.chaos-online-interface .mode-specific-heading p {
  color: #d8ddec;
  font-size: 0.78rem;
  line-height: 1.5;
}

body.chaos-online-interface .mode-back-to-crt,
body.chaos-online-interface .chaos-flow-back {
  border-color: rgba(87, 231, 255, 0.58);
  background:
    linear-gradient(180deg, rgba(9, 34, 51, 0.94), rgba(5, 14, 28, 0.98));
  color: #7af0ff;
  box-shadow:
    inset 0 0 13px rgba(69, 222, 255, 0.08),
    0 0 15px rgba(59, 222, 255, 0.08);
}

body.chaos-online-interface .mode-back-to-crt:hover,
body.chaos-online-interface .mode-back-to-crt:focus-visible,
body.chaos-online-interface .chaos-flow-back:hover,
body.chaos-online-interface .chaos-flow-back:focus-visible {
  border-color: #72efff;
  color: #fff;
  box-shadow:
    inset 0 0 15px rgba(69, 222, 255, 0.14),
    0 0 20px rgba(59, 222, 255, 0.2);
}

body.chaos-online-interface .scroll-hint {
  margin-top: 8px;
  border-color: rgba(145, 157, 188, 0.26);
  color: #d3d7e2;
  background: rgba(255,255,255,0.018);
}

/* Grande zone terminal dédiée au niveau 2 / réseau. */
body.chaos-online-interface .chaos-flow-managed.chaos-branch-online .chaos-flow-submode-stage {
  position: relative;
  padding: 22px 20px 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 83, 190, 0.42);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% -15%, rgba(111, 67, 255, 0.22), transparent 48%),
    linear-gradient(180deg, rgba(21, 12, 46, 0.96), rgba(6, 11, 29, 0.985));
  box-shadow:
    inset 0 0 0 1px rgba(86, 232, 255, 0.08),
    inset 0 0 38px rgba(134, 71, 255, 0.055),
    0 0 22px rgba(255, 61, 168, 0.075);
}

body.chaos-online-interface .chaos-flow-managed.chaos-branch-online .chaos-flow-submode-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--co-cyan) 0 45px, transparent 45px calc(100% - 45px), var(--co-pink) calc(100% - 45px)) top left / 100% 2px no-repeat,
    linear-gradient(90deg, var(--co-pink) 0 32px, transparent 32px calc(100% - 32px), var(--co-cyan) calc(100% - 32px)) bottom left / 100% 2px no-repeat;
  opacity: 0.58;
}

body.chaos-online-interface .chaos-flow-managed.chaos-branch-online .chaos-flow-stage-toolbar {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

body.chaos-online-interface .chaos-flow-managed.chaos-branch-online .chaos-flow-step {
  color: #ff7cc9;
  text-shadow: 0 0 12px rgba(255, 78, 183, 0.34);
}

body.chaos-online-interface .chaos-flow-managed.chaos-branch-online #chaosFlowSubmodeTitle {
  color: #69eaff;
  font-size: 1.08rem;
  text-shadow: 0 0 13px rgba(73, 224, 255, 0.34);
}

body.chaos-online-interface .chaos-flow-managed.chaos-branch-online #chaosFlowSubmodeHelp {
  color: #d0d6e6;
  font-size: 0.78rem;
}

/* Les quatre cartes sont les vrais boutons existants. */
body.chaos-online-interface .chaos-flow-managed.chaos-branch-online [data-chaos-flow-options="online"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

body.chaos-online-interface .chaos-flow-managed.chaos-branch-online [data-chaos-flow-options="online"] .chaos-flow-choice {
  isolation: isolate;
  min-height: 220px;
  padding: 20px 12px 17px;
  border: 1px solid rgba(91, 234, 255, 0.72);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 40%, rgba(94, 93, 255, 0.16), transparent 43%),
    linear-gradient(180deg, rgba(15, 24, 54, 0.98), rgba(7, 9, 25, 0.99));
  color: #fff;
  box-shadow:
    0 0 0 3px rgba(255, 69, 186, 0.16),
    0 0 0 5px rgba(66, 225, 255, 0.13),
    0 0 20px rgba(67, 225, 255, 0.18),
    inset 0 0 28px rgba(91, 223, 255, 0.05);
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
}

/* Vortex énergétique léger : uniquement des gradients, aucune animation
   permanente coûteuse. */
body.chaos-online-interface .chaos-flow-managed.chaos-branch-online [data-chaos-flow-options="online"] .chaos-flow-choice::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8px;
  border-radius: 13px;
  pointer-events: none;
  background:
    repeating-radial-gradient(ellipse at 50% 43%, transparent 0 10px, rgba(88, 97, 255, 0.08) 12px 14px, transparent 16px 25px),
    conic-gradient(from 18deg at 50% 45%, rgba(68, 218, 255, 0.13), transparent 18%, rgba(151, 83, 255, 0.12) 31%, transparent 49%, rgba(255, 72, 184, 0.11) 65%, transparent 82%, rgba(67, 228, 255, 0.1));
  opacity: 0.78;
  mask-image: radial-gradient(circle at 50% 46%, #000 0 58%, transparent 88%);
}

body.chaos-online-interface .chaos-flow-managed.chaos-branch-online [data-chaos-flow-options="online"] .chaos-flow-choice::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -3px;
  border-radius: 20px;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--co-cyan), transparent 24%, transparent 74%, var(--co-pink)) top left / 100% 3px no-repeat,
    linear-gradient(90deg, var(--co-pink), transparent 24%, transparent 74%, var(--co-cyan)) bottom left / 100% 3px no-repeat;
  filter: none;
  opacity: 0.82;
}

body.chaos-online-interface .chaos-flow-managed.chaos-branch-online [data-chaos-flow-options="online"] .chaos-flow-choice:hover,
body.chaos-online-interface .chaos-flow-managed.chaos-branch-online [data-chaos-flow-options="online"] .chaos-flow-choice:focus-visible {
  transform: translateY(-4px) scale(1.012);
  border-color: #a3f6ff;
  background:
    radial-gradient(circle at 50% 40%, rgba(119, 95, 255, 0.24), transparent 46%),
    linear-gradient(180deg, rgba(23, 31, 68, 0.99), rgba(9, 11, 30, 0.995));
  box-shadow:
    0 0 0 3px rgba(255, 75, 189, 0.28),
    0 0 0 6px rgba(72, 228, 255, 0.2),
    0 0 28px rgba(72, 228, 255, 0.34),
    0 0 34px rgba(255, 72, 183, 0.16),
    inset 0 0 30px rgba(118, 87, 255, 0.08);
}

body.chaos-online-interface .chaos-flow-managed.chaos-branch-online [data-chaos-flow-options="online"] .chaos-flow-choice:active {
  transform: translateY(-1px) scale(0.992);
}

body.chaos-online-interface .chaos-flow-managed.chaos-branch-online [data-chaos-flow-options="online"] .chaos-flow-choice-icon {
  position: relative;
  z-index: 3;
  min-width: 58px;
  height: 58px;
  margin-bottom: 3px;
  border: 1px solid rgba(255, 95, 196, 0.78);
  border-radius: 12px;
  color: #ff77cc;
  background: rgba(24, 12, 45, 0.76);
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  box-shadow:
    0 0 14px rgba(255, 75, 187, 0.2),
    inset 0 0 15px rgba(255, 76, 190, 0.08);
}

body.chaos-online-interface .chaos-flow-managed.chaos-branch-online [data-chaos-flow-variant="join"] .chaos-flow-choice-icon {
  border-color: rgba(89, 231, 255, 0.82);
  color: #72eeff;
  background: rgba(7, 30, 48, 0.78);
  box-shadow:
    0 0 14px rgba(74, 225, 255, 0.2),
    inset 0 0 15px rgba(74, 225, 255, 0.08);
}

body.chaos-online-interface .chaos-flow-managed.chaos-branch-online [data-chaos-flow-options="online"] .chaos-flow-choice strong {
  position: relative;
  z-index: 3;
  color: #fff;
  font-size: 0.83rem;
  letter-spacing: 0.07em;
  line-height: 1.55;
  text-shadow: 0 0 10px rgba(255,255,255,0.12);
}

body.chaos-online-interface .chaos-flow-managed.chaos-branch-online [data-chaos-flow-options="online"] .chaos-flow-choice small {
  position: relative;
  z-index: 3;
  max-width: 190px;
  color: #cdd2e2;
  font-size: 0.72rem;
  line-height: 1.5;
}

/* Étape skills : conserve le même terminal et améliore la continuité sans
   réécrire le tableau interactif. */
body.chaos-online-interface .chaos-flow-managed.chaos-branch-online[data-chaos-flow-stage="skills"] .chaos-flow-skills-heading,
body.chaos-online-interface .chaos-flow-managed.chaos-branch-online[data-chaos-flow-stage="skills"] > .chaos-loadout-card,
body.chaos-online-interface .chaos-flow-managed.chaos-branch-online[data-chaos-flow-stage="skills"] > .chaos-online-launch-card,
body.chaos-online-interface .chaos-flow-managed.chaos-branch-online[data-chaos-flow-stage="skills"] > .chaos-team-skill-rules-card,
body.chaos-online-interface .chaos-flow-managed.chaos-branch-online[data-chaos-flow-stage="skills"] > .chaos-flow-final-actions {
  border-color: rgba(86, 226, 255, 0.34);
  background:
    radial-gradient(circle at 50% 0%, rgba(113, 66, 255, 0.09), transparent 48%),
    linear-gradient(180deg, rgba(10, 13, 34, 0.98), rgba(5, 8, 22, 0.99));
}

body.chaos-online-interface .chaos-flow-managed.chaos-branch-online .chaos-flow-launch-btn {
  border-color: rgba(87, 232, 255, 0.62);
  background: linear-gradient(90deg, rgba(31, 156, 197, 0.72), rgba(187, 43, 153, 0.72));
  box-shadow: 0 0 22px rgba(76, 224, 255, 0.16);
}

/* Le HUD déjà fonctionnel devient visuellement plus proche de la référence
   lorsque Chaos en ligne est actif, sans modifier ses données. */
body.chaos-online-interface .scoreboard .player-card {
  border-color: rgba(86, 230, 255, 0.42);
  background:
    linear-gradient(180deg, rgba(9, 18, 40, 0.96), rgba(4, 8, 21, 0.98));
  box-shadow:
    inset 0 0 20px rgba(58, 226, 255, 0.05),
    0 0 16px rgba(58, 226, 255, 0.08);
}

body.chaos-online-interface .scoreboard .player-two {
  border-color: rgba(255, 83, 188, 0.42);
  box-shadow:
    inset 0 0 20px rgba(255, 72, 182, 0.05),
    0 0 16px rgba(255, 72, 182, 0.08);
}

/* Responsive : quatre cartes → deux → une, sans scroll horizontal de page. */
@media (max-width: 1280px) {
  body.chaos-online-interface #networkModal .network-card.mode-focus-active[data-focused-mode="chaos"] {
    width: min(1040px, calc(100vw - 32px));
  }

  body.chaos-online-interface .chaos-flow-managed.chaos-branch-online [data-chaos-flow-options="online"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  body.chaos-online-interface #networkModal .network-card.mode-focus-active[data-focused-mode="chaos"] {
    width: calc(100vw - 10px);
    max-height: calc(100dvh - 10px);
    padding: 13px 12px 18px;
    border-radius: 15px;
  }

  body.chaos-online-interface .chaos-flow-managed.chaos-branch-online .chaos-flow-submode-stage {
    padding: 15px 12px;
  }

  body.chaos-online-interface .chaos-flow-managed.chaos-branch-online .chaos-flow-stage-toolbar {
    grid-template-columns: 1fr;
  }

  body.chaos-online-interface .chaos-flow-managed.chaos-branch-online [data-chaos-flow-options="online"] {
    grid-template-columns: 1fr;
  }

  body.chaos-online-interface .chaos-flow-managed.chaos-branch-online [data-chaos-flow-options="online"] .chaos-flow-choice {
    min-height: 142px;
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-rows: auto auto;
    justify-items: start;
    align-content: center;
    text-align: left;
    column-gap: 12px;
  }

  body.chaos-online-interface .chaos-flow-managed.chaos-branch-online [data-chaos-flow-options="online"] .chaos-flow-choice-icon {
    grid-row: 1 / 3;
    margin: 0;
  }

  body.chaos-online-interface .chaos-flow-managed.chaos-branch-online [data-chaos-flow-options="online"] .chaos-flow-choice small {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.chaos-online-interface .chaos-flow-managed.chaos-branch-online [data-chaos-flow-options="online"] .chaos-flow-choice {
    transition: none;
  }
}

/* APPARENCE 8-BIT : SKINS + CHAPEAUX */
.cosmetic-group {
  margin-top: 14px;
}

.cosmetic-group-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.cosmetic-group-header strong {
  color: #f3f3f3;
  font-size: 0.78rem;
}

.cosmetic-group-header small {
  color: var(--muted);
  font-size: 0.64rem;
}

.skin-cosmetic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.skin-cosmetic-card,
.hat-cosmetic-card {
  cursor: pointer;
}

.skin-cosmetic-card {
  min-width: 0;
  min-height: 118px;
  padding: 8px 6px;
  display: grid;
  place-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  color: #d8d8df;
  background: rgba(255, 255, 255, 0.025);
  text-align: center;
}

.skin-cosmetic-card:hover,
.skin-cosmetic-card:focus-visible {
  border-color: rgba(183, 126, 255, 0.72);
  background: rgba(183, 126, 255, 0.07);
}

.skin-cosmetic-card.selected {
  border-color: #cd8cff;
  color: #efdcff;
  background: rgba(177, 108, 255, 0.12);
  box-shadow: inset 0 0 16px rgba(177, 108, 255, 0.12), 0 0 12px rgba(177, 108, 255, 0.12);
}

.skin-cosmetic-card span {
  font-size: 0.67rem;
  line-height: 1.3;
}

.skin-cosmetic-preview {
  display: block;
  width: 74px;
  height: 74px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.cosmetic-actions {
  gap: 8px;
  flex-wrap: wrap;
}

.cosmetic-actions button {
  flex: 1 1 180px;
}

.launch-setup-appearance {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.launch-appearance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.launch-appearance-player-card {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 12px;
  display: grid;
  gap: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025));
}

.launch-appearance-player-card strong {
  color: #f7f7f7;
}

.launch-appearance-player-card small {
  color: var(--muted);
  line-height: 1.45;
}

.launch-appearance-player-card label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.7rem;
}

.launch-appearance-player-card select {
  width: 100%;
  color: var(--text);
  background: #050505;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 6px;
  padding: 8px;
}

.launch-appearance-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  border-radius: 8px;
  background: radial-gradient(circle at center, rgba(141, 88, 255, 0.12), rgba(0,0,0,0));
}

.launch-appearance-preview canvas {
  width: 82px;
  height: 82px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.launch-appearance-note {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 700px) {
  .launch-appearance-grid {
    grid-template-columns: 1fr;
  }

  .skin-cosmetic-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* V66 — Skin Designer (paramètres de test uniquement) */
.skin-designer-content {
  display: grid;
  gap: 14px;
}

.skin-designer-intro {
  display: grid;
  gap: 4px;
}

.skin-designer-intro strong {
  color: #f6efff;
}

.skin-designer-intro small {
  color: var(--muted);
  line-height: 1.45;
}

.skin-designer-toolbar {
  display: grid;
  grid-template-columns: minmax(160px, 0.8fr) minmax(220px, 1.2fr);
  gap: 10px;
}

.skin-designer-toolbar label,
.skin-designer-controls label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.7rem;
}

.skin-designer-toolbar input[type="text"],
.skin-designer-toolbar input[type="file"] {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  color: var(--text);
  background: #050507;
  border: 1px solid rgba(196, 113, 255, 0.34);
  border-radius: 7px;
  padding: 9px 10px;
}

.skin-designer-workspace {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 14px;
  align-items: start;
}

.skin-designer-stage {
  position: relative;
  width: min(100%, 320px);
  aspect-ratio: 1;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid rgba(199, 111, 255, 0.5);
  border-radius: 12px;
  background:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px),
    radial-gradient(circle at center, rgba(150, 77, 255, 0.12), rgba(0,0,0,0.94) 66%);
  background-size: 16px 16px, 16px 16px, auto;
  box-shadow: inset 0 0 34px rgba(132, 72, 255, 0.1);
}

.skin-designer-stage::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 6px;
  height: 6px;
  border: 1px solid rgba(255,255,255,0.34);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#skinDesignerGuideCanvas,
.skin-designer-image,
.skin-designer-empty {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#skinDesignerGuideCanvas {
  pointer-events: none;
}

.skin-designer-image {
  object-fit: contain;
  transform-origin: center center;
  pointer-events: none;
  image-rendering: pixelated;
}

.skin-designer-image.hidden {
  display: none;
}

.skin-designer-empty {
  display: grid;
  place-items: center;
  padding: 30px;
  box-sizing: border-box;
  color: rgba(222, 201, 255, 0.52);
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  pointer-events: none;
}

.skin-designer-controls {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
}

.skin-designer-controls label {
  grid-template-columns: minmax(100px, 0.55fr) minmax(120px, 1fr) auto;
  align-items: center;
}

.skin-designer-controls input[type="range"] {
  width: 100%;
}

.skin-designer-controls .control-value {
  min-width: 54px;
  text-align: right;
  color: #e3c7ff;
}


.skin-designer-controls input[type="color"] {
  width: 100%;
  min-height: 38px;
  padding: 4px;
  border: 1px solid rgba(196, 113, 255, 0.34);
  border-radius: 8px;
  background: #050507;
  cursor: pointer;
}

.skin-designer-controls .color-value {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.skin-designer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.skin-designer-actions button {
  flex: 1 1 190px;
}

.skin-designer-library {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.skin-designer-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.skin-designer-saved-card {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(196, 113, 255, 0.25);
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
}

.skin-designer-saved-preview {
  position: relative;
  min-height: 90px;
  overflow: hidden;
  border-radius: 6px;
  background: radial-gradient(circle, rgba(133, 70, 255, 0.1), transparent 70%);
}

.skin-designer-saved-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.skin-designer-saved-card strong {
  color: #f2e8ff;
  font-size: 0.69rem;
  overflow-wrap: anywhere;
}


.skin-designer-color-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.skin-designer-color-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 7px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.56rem;
}

.skin-designer-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--swatch, #fff);
  box-shadow: 0 0 8px var(--swatch, #fff);
  display: inline-block;
}

.skin-designer-saved-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.skin-designer-saved-actions button {
  min-width: 0;
  padding-inline: 6px;
}

@media (max-width: 760px) {
  .skin-designer-toolbar,
  .skin-designer-workspace {
    grid-template-columns: 1fr;
  }

  .skin-designer-controls label {
    grid-template-columns: 1fr;
  }

  .skin-designer-controls .control-value {
    text-align: left;
  }
}

.skin-designer-content .settings-help.error {
  color: #ff829b;
}

/* V67 — Skin Designer : drag & drop, bibliothèque complète, pause auto */
.skin-designer-stage {
  cursor: pointer;
  outline: none;
}

.skin-designer-stage:focus-visible {
  border-color: rgba(120, 238, 255, 0.95);
  box-shadow: 0 0 0 2px rgba(50,230,255,0.18), inset 0 0 34px rgba(132,72,255,0.13);
}

.skin-designer-stage.drag-over {
  border-color: #72f0ff;
  box-shadow: 0 0 24px rgba(70, 227, 255, 0.26), inset 0 0 42px rgba(166, 80, 255, 0.22);
}

.skin-designer-empty {
  gap: 7px;
  align-content: center;
}

.skin-designer-empty strong {
  color: #eadcff;
  font-size: 0.82rem;
}

.skin-designer-empty span {
  color: #9feeff;
  font-size: 0.65rem;
}

.skin-designer-empty small {
  color: rgba(255,255,255,0.5);
  font-size: 0.58rem;
}

.skin-designer-drop-overlay {
  position: absolute;
  inset: 10px;
  z-index: 8;
  display: grid;
  place-items: center;
  border: 2px dashed rgba(114, 240, 255, 0.9);
  border-radius: 10px;
  color: #eafcff;
  background: rgba(4, 8, 18, 0.82);
  text-shadow: 0 0 10px rgba(114,240,255,0.8);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.skin-designer-stage.drag-over .skin-designer-drop-overlay {
  opacity: 1;
}

.skin-designer-file-field small {
  color: var(--muted);
  line-height: 1.4;
}

.skin-designer-library-tools {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 4px;
}

.skin-designer-library-tools button {
  font-size: 0.63rem;
}

.skin-designer-saved-card.is-builtin {
  border-color: rgba(75, 220, 255, 0.3);
}

.skin-designer-saved-card.is-equipped {
  box-shadow: inset 0 0 16px rgba(194, 96, 255, 0.14), 0 0 10px rgba(194, 96, 255, 0.14);
}

.skin-designer-saved-meta {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.skin-designer-saved-badge {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 6px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.52rem;
}

.skin-designer-saved-badge.builtin {
  color: #9defff;
  border-color: rgba(92,225,255,0.32);
}

.skin-designer-saved-badge.custom {
  color: #e6c6ff;
  border-color: rgba(199,118,255,0.32);
}


/* =========================================================
   V70 — Overlay de transition du biome forêt
   ========================================================= */
.forest-vine-overlay {
  position: fixed;
  inset: 0;
  z-index: 48;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
  overflow: hidden;
  background: transparent;
}

.forest-vine-overlay.visible {
  opacity: 1;
}

.forest-vine-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: transparent;
  mix-blend-mode: normal;
  filter: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.forest-vine-video.active {
  opacity: 1;
  visibility: visible;
}

/* La vidéo de rétractation est un fichier réellement inversé : aucun seek par frame. */
.forest-vine-overlay.reversing .forest-vine-video {
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .forest-vine-overlay {
    transition-duration: 80ms;
  }
}


/* =========================================================
   V73 — Lianes persistantes autour de l’arène de combat
   ========================================================= */
.forest-vine-overlay.arena-bound {
  position: absolute;
  inset: auto;
  z-index: 32;
  overflow: visible;
  border-radius: 18px;
  transition: opacity 220ms ease;
}

.forest-vine-overlay.arena-bound .forest-vine-video {
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
  pointer-events: none;
}

.arena-fullscreen-stage > .forest-vine-overlay.arena-bound {
  pointer-events: none;
}

/* =========================================================
   V75 — Scrollbars invisibles, défilement conservé
   ========================================================= */
/* Firefox + ancien moteur Microsoft : masque la barre sans désactiver le scroll. */
html,
body,
* {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

/* Chrome / Edge / Safari / Chromium : aucune barre visible, scroll intact. */
*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-corner {
  background: transparent !important;
  border: 0 !important;
}

/* Évite de réserver artificiellement une gouttière pour une scrollbar masquée. */
#networkModal .network-card {
  scrollbar-gutter: auto !important;
}


/* =========================================================
   V76 — Métamorphose naturelle progressive du menu Forêt
   ========================================================= */
.launch-setup-modal {
  --forest-theme-h: 118;
  --forest-theme-h2: 137;
  --forest-theme-earth-h: 43;
}

.launch-setup-modal,
.launch-setup-modal .launch-setup-card,
.launch-setup-modal .launch-setup-card button:not(.arena-color-swatch),
.launch-setup-modal .launch-setup-biome,
.launch-setup-modal .launch-setup-arena,
.launch-setup-modal .arena-color-panel,
.launch-setup-modal .launch-appearance-player-card,
.launch-setup-modal .launch-setup-summary,
.launch-setup-modal .launch-setup-touch,
.launch-setup-modal .launch-step-number,
.launch-setup-modal .launch-setup-kicker,
.launch-setup-modal .launch-setup-section-title strong,
.launch-setup-modal .launch-setup-section-title small,
.launch-setup-modal .launch-setup-header p,
.launch-setup-modal .launch-appearance-note {
  transition:
    background-color 1150ms cubic-bezier(.22,.75,.22,1),
    border-color 1050ms cubic-bezier(.22,.75,.22,1),
    color 900ms ease,
    box-shadow 1200ms cubic-bezier(.22,.75,.22,1),
    text-shadow 1000ms ease,
    filter 1100ms ease,
    opacity 900ms ease;
  transition-delay: var(--nature-delay, 0ms);
}

.launch-setup-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 16% 12%, hsl(var(--forest-theme-h2) 55% 34% / .20), transparent 38%),
    radial-gradient(circle at 84% 82%, hsl(var(--forest-theme-earth-h) 42% 29% / .13), transparent 36%),
    linear-gradient(145deg, hsl(var(--forest-theme-h) 48% 15% / .32), hsl(calc(var(--forest-theme-h) + 18) 50% 10% / .23));
  transition: opacity 1350ms cubic-bezier(.22,.75,.22,1);
  z-index: 0;
}

.launch-setup-modal > .launch-setup-card {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

.launch-setup-modal > .launch-setup-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(100% 72% at 12% 0%, hsl(var(--forest-theme-h2) 55% 34% / .22), transparent 58%),
    radial-gradient(72% 58% at 92% 100%, hsl(var(--forest-theme-earth-h) 48% 30% / .12), transparent 62%),
    linear-gradient(180deg, hsl(var(--forest-theme-h) 42% 15% / .34), hsl(calc(var(--forest-theme-h) + 12) 44% 8% / .20));
  transition: opacity 1450ms cubic-bezier(.22,.75,.22,1);
  z-index: 0;
}

.launch-setup-modal > .launch-setup-card > * {
  position: relative;
  z-index: 1;
}

.launch-setup-modal.forest-nature-theme::before,
.launch-setup-modal.forest-nature-theme > .launch-setup-card::before { opacity: 1; }

.launch-setup-modal.forest-nature-theme > .launch-setup-card {
  border-color: hsl(var(--forest-theme-h2) 58% 59% / .55);
  box-shadow:
    0 0 0 1px hsl(var(--forest-theme-h) 52% 65% / .07) inset,
    0 0 46px hsl(var(--forest-theme-h2) 62% 52% / .17),
    0 28px 72px rgba(0,0,0,.68);
}

.launch-setup-modal.forest-nature-theme .launch-setup-card button:not(.arena-color-swatch),
.launch-setup-modal.forest-nature-theme .launch-setup-biome,
.launch-setup-modal.forest-nature-theme .launch-setup-arena,
.launch-setup-modal.forest-nature-theme .arena-color-panel,
.launch-setup-modal.forest-nature-theme .launch-appearance-player-card,
.launch-setup-modal.forest-nature-theme .launch-setup-summary,
.launch-setup-modal.forest-nature-theme .launch-setup-touch {
  border-color: hsl(var(--nature-h, var(--forest-theme-h)) var(--nature-s, 52%) var(--nature-l, 54%) / .46);
  background-color: hsl(var(--nature-h, var(--forest-theme-h)) 45% 18% / .28);
  box-shadow:
    inset 0 0 28px hsl(var(--nature-h, var(--forest-theme-h)) 55% 45% / .075),
    0 0 16px hsl(var(--nature-h, var(--forest-theme-h)) 56% 47% / .075);
}

.launch-setup-modal.forest-nature-theme .launch-biome-card.selected,
.launch-setup-modal.forest-nature-theme .arena-size-card.selected,
.launch-setup-modal.forest-nature-theme .launch-touch-layout-card.selected {
  border-color: hsl(var(--nature-h, var(--forest-theme-h)) 68% 67% / .90);
  background-color: hsl(var(--nature-h, var(--forest-theme-h)) 49% 22% / .46);
  box-shadow:
    inset 0 0 34px hsl(var(--nature-h, var(--forest-theme-h)) 65% 49% / .16),
    0 0 24px hsl(var(--nature-h, var(--forest-theme-h)) 68% 56% / .20);
}

.launch-setup-modal.forest-nature-theme .launch-setup-kicker,
.launch-setup-modal.forest-nature-theme .launch-step-number {
  color: hsl(var(--forest-theme-h2) 72% 72%);
  border-color: hsl(var(--forest-theme-h2) 68% 63% / .68);
  text-shadow: 0 0 13px hsl(var(--forest-theme-h2) 70% 56% / .38);
}

.launch-setup-modal.forest-nature-theme .launch-setup-section-title strong,
.launch-setup-modal.forest-nature-theme .launch-setup-header h2 {
  color: hsl(var(--forest-theme-h) 46% 88%);
  text-shadow: 0 0 14px hsl(var(--forest-theme-h2) 58% 48% / .20);
}

.launch-setup-modal.forest-nature-theme .launch-setup-section-title small,
.launch-setup-modal.forest-nature-theme .launch-setup-header p,
.launch-setup-modal.forest-nature-theme .launch-appearance-note,
.launch-setup-modal.forest-nature-theme .launch-biome-card small,
.launch-setup-modal.forest-nature-theme .arena-size-card small {
  color: hsl(var(--forest-theme-h) 24% 74%);
}

.launch-setup-modal.forest-nature-theme .launch-setup-summary {
  color: hsl(var(--nature-h, var(--forest-theme-h2)) 65% 82%);
}

/* Les couleurs choisies par le joueur restent exactes. */
.launch-setup-modal .arena-color-swatch,
.launch-setup-modal .arena-color-preview,
.launch-setup-modal .launch-appearance-preview,
.launch-setup-modal .launch-appearance-preview canvas,
.launch-setup-modal input[type="color"] { filter: none !important; }

@media (prefers-reduced-motion: reduce) {
  .launch-setup-modal,
  .launch-setup-modal::before,
  .launch-setup-modal > .launch-setup-card::before,
  .launch-setup-modal .launch-setup-card,
  .launch-setup-modal .launch-setup-card * {
    transition-duration: 120ms !important;
    transition-delay: 0ms !important;
  }
}


/* ========================================================================== 
   V80 — BOUTIQUE / DVD CORNER MARKET
   Palette ivoire + jaune solaire + or. Tous les articles restent cosmétiques.
   ========================================================================== */
.shop-topbar-btn {
  border-color: rgba(255, 215, 88, 0.5) !important;
  color: #fff4bf !important;
  box-shadow: inset 0 0 14px rgba(255, 196, 50, 0.08), 0 0 14px rgba(255, 196, 50, 0.08);
}
.shop-topbar-btn:hover, .shop-topbar-btn:focus-visible { border-color: #ffe886 !important; color: #fff !important; box-shadow: 0 0 22px rgba(255, 201, 58, 0.28); }
.shop-layer { position: fixed; inset: 0; z-index: 10040; display: grid; place-items: center; padding: 14px; background: radial-gradient(circle at 50% 8%, rgba(255, 210, 76, 0.16), transparent 36%), rgba(4,4,3,.93); backdrop-filter: blur(10px); }
.shop-layer.hidden { display: none !important; }
.shop-shell { width: min(1180px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); overflow: auto; scrollbar-width: none; border: 1px solid rgba(255, 225, 130, .54); border-radius: 18px; background: linear-gradient(145deg, rgba(29,26,17,.98), rgba(10,10,8,.99) 46%, rgba(24,20,10,.98)); box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset, 0 0 55px rgba(255,189,39,.16); color: #fff9e6; }
.shop-shell::-webkit-scrollbar { width: 0; height: 0; }
.shop-header { position: sticky; top: 0; z-index: 4; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 18px 20px; border-bottom: 1px solid rgba(255,226,139,.18); background: linear-gradient(180deg, rgba(31,27,16,.98), rgba(15,14,10,.94)); backdrop-filter: blur(14px); }
.shop-back-btn { min-width: 110px; border: 1px solid rgba(255,232,160,.35); background: rgba(255,255,255,.035); color: #fff2bd; }
.shop-heading { text-align: center; }
.shop-kicker { display:block; color:#ffd84a; font-size:.68rem; letter-spacing:.22em; font-weight:900; }
.shop-heading h2 { margin: 4px 0 3px; color:#fffdf4; font-size: clamp(1.55rem, 3vw, 2.5rem); letter-spacing:.12em; text-shadow: 0 0 22px rgba(255,203,58,.34); }
.shop-heading p { margin:0; color:#cfc7ac; font-size:.78rem; }
.shop-wallet { min-width: 135px; padding: 10px 14px; text-align:center; border: 1px solid rgba(255,221,104,.42); border-radius: 12px; background: linear-gradient(180deg, rgba(255,216,74,.12), rgba(255,255,255,.025)); }
.shop-wallet span { display:block; color:#d9c994; font-size:.62rem; letter-spacing:.16em; font-weight:800; }
.shop-wallet strong { display:block; margin-top:4px; color:#fff7c9; font-size:1.15rem; }
.shop-wallet b { color:#ffd438; }
.shop-toolbar { padding: 15px 20px 4px; display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:end; }
.shop-player-picker { display:grid; gap:5px; color:#d9cfad; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.shop-player-picker select { min-width:118px; border-color:rgba(255,216,87,.35); background:#17140d; color:#fff5ca; }
.shop-tabs { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.shop-tabs button { padding:9px 11px; border:1px solid rgba(255,234,171,.18); border-radius:999px; background:rgba(255,255,255,.025); color:#cfc7ad; font-size:.7rem; }
.shop-tabs button.selected { color:#17130a; border-color:#ffe278; background:linear-gradient(180deg,#fff3b5,#ffc82e); box-shadow:0 0 22px rgba(255,204,55,.22); }
.shop-feature-strip { margin: 14px 20px 4px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.shop-feature-strip>div { display:grid; grid-template-columns:auto 1fr; column-gap:9px; padding:11px 12px; border:1px solid rgba(255,234,171,.13); border-radius:12px; background:rgba(255,255,255,.025); }
.shop-feature-strip span { grid-row:1/3; align-self:center; color:#ffd84a; font-size:1.2rem; }
.shop-feature-strip strong { color:#fff5cf; font-size:.68rem; letter-spacing:.08em; }
.shop-feature-strip small { color:#9f987f; font-size:.64rem; margin-top:3px; }
.shop-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:16px 20px 22px; }
.shop-item-card { position:relative; min-height:285px; display:flex; flex-direction:column; overflow:hidden; border:1px solid rgba(255,232,158,.16); border-radius:15px; background:linear-gradient(155deg,rgba(255,255,255,.055),rgba(255,204,54,.018) 54%,rgba(0,0,0,.16)); box-shadow:inset 0 1px rgba(255,255,255,.035); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.shop-item-card:hover { transform:translateY(-2px); border-color:rgba(255,221,103,.42); box-shadow:0 12px 28px rgba(0,0,0,.2),0 0 22px rgba(255,196,44,.08); }
.shop-item-card.equipped { border-color:#ffe16b; box-shadow:0 0 0 1px rgba(255,243,185,.22) inset,0 0 26px rgba(255,204,54,.16); }
.shop-item-rarity { position:absolute; top:10px; right:10px; z-index:2; padding:5px 7px; border-radius:7px; background:rgba(8,8,6,.7); color:#ffe18a; font-size:.58rem; letter-spacing:.11em; font-weight:900; }
.shop-item-art { min-height:116px; display:grid; place-items:center; margin:0; background:radial-gradient(circle at 50% 55%,rgba(255,211,70,.12),transparent 56%),linear-gradient(180deg,rgba(255,255,255,.025),transparent); border-bottom:1px solid rgba(255,255,255,.04); }
.shop-item-canvas { width:104px; height:86px; image-rendering:pixelated; }
.shop-item-symbol { width:82px; height:82px; display:grid; place-items:center; border:1px solid rgba(255,231,150,.22); border-radius:18px; color:#fff5c8; background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,189,31,.04)); box-shadow:0 0 24px rgba(255,198,43,.10) inset; }
.shop-item-symbol span { font-size:2rem; text-shadow:0 0 14px rgba(255,212,67,.55); }
.shop-symbol-skill { transform:rotate(-3deg); }
.shop-item-copy { padding:12px 13px 4px; flex:1; }
.shop-item-copy strong { display:block; color:#fff9df; font-size:.92rem; }
.shop-item-copy p { margin:7px 0 0; color:#a9a18a; font-size:.72rem; line-height:1.45; }
.shop-item-bottom { display:grid; grid-template-columns:auto 1fr; gap:9px; align-items:center; padding:11px 13px 13px; }
.shop-item-price { color:#ffd94d; font-weight:900; white-space:nowrap; font-size:.78rem; }
.shop-item-price.included { color:#bdb7a2; font-size:.68rem; }
.shop-item-bottom button { min-width:0; padding:9px 10px; border:1px solid rgba(255,219,91,.48); background:linear-gradient(180deg,rgba(255,218,79,.18),rgba(255,175,22,.07)); color:#fff5c7; font-size:.68rem; font-weight:900; }
.shop-item-bottom button:hover:not(:disabled) { background:linear-gradient(180deg,#ffe994,#f3b51f); color:#171107; box-shadow:0 0 18px rgba(255,203,57,.22); }
.shop-item-bottom button:disabled { opacity:.5; cursor:default; }
.shop-item-card.equipped .shop-item-bottom button { color:#161208; background:#ffe06a; opacity:1; }
.shop-footer { position:sticky; bottom:0; z-index:3; display:flex; justify-content:space-between; gap:16px; padding:12px 20px; border-top:1px solid rgba(255,226,139,.14); background:rgba(14,13,9,.95); color:#9f9780; font-size:.68rem; backdrop-filter:blur(12px); }
.shop-footer p { margin:0; color:#d7cfb5; }
.shop-footer p.error { color:#ffb58f; }

/* Le panneau Classique de la nouvelle loop regroupe Solo et Local. */
.network-card.classic-hub-active .mode-focus-explainer { display:none; }
.network-card.classic-hub-active .mode-panel:not([data-mode-panel="solo"]):not([data-mode-panel="local"]) { display:none !important; }
.network-card.classic-hub-active .mode-panel[data-mode-panel="solo"], .network-card.classic-hub-active .mode-panel[data-mode-panel="local"] { display:block; }
.network-card.classic-hub-active .mode-specific-stack { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:8px 0 16px; }
.network-card.classic-hub-active .mode-panel { margin:0; }
.network-card.classic-hub-active .mode-panel-content { padding-top:8px; }
.network-card.classic-hub-active .mode-specific-header h2 { color:#83ff74; text-shadow:0 0 18px rgba(107,255,104,.28); }

/* Effets de menus achetés : couche décorative non interactive. */
.shop-menu-effect-layer { position:fixed; inset:0; z-index:10030; pointer-events:none; opacity:0; overflow:hidden; transition:opacity .45s ease; }
body.shop-menu-golden-bloom .shop-menu-effect-layer, body.shop-menu-pearl-scan .shop-menu-effect-layer, body.shop-menu-coin-sparkles .shop-menu-effect-layer { opacity:1; }
body.shop-menu-golden-bloom .shop-menu-effect-layer { background:radial-gradient(circle at 50% 18%,rgba(255,218,86,.085),transparent 42%),radial-gradient(circle at 20% 80%,rgba(255,246,205,.04),transparent 30%); }
body.shop-menu-golden-bloom .network-card, body.shop-menu-golden-bloom .launch-setup-card, body.shop-menu-golden-bloom .control-options-card { box-shadow:0 0 38px rgba(255,205,63,.12) !important; }
body.shop-menu-pearl-scan .shop-menu-effect-layer::before { content:""; position:absolute; inset:-40% 0; background:linear-gradient(180deg,transparent 44%,rgba(255,252,232,.10) 49%,rgba(255,221,118,.05) 51%,transparent 56%); animation:shop-pearl-scan 5.5s linear infinite; }
@keyframes shop-pearl-scan { from{transform:translateY(-25%)} to{transform:translateY(55%)} }
body.shop-menu-coin-sparkles .shop-menu-effect-layer span { position:absolute; width:4px; height:4px; border-radius:1px; background:#ffe46e; box-shadow:0 0 8px #ffc935; animation:shop-spark-fall 5s linear infinite; opacity:.58; }
body.shop-menu-coin-sparkles .shop-menu-effect-layer span:nth-child(1){left:7%;animation-delay:-1s} body.shop-menu-coin-sparkles .shop-menu-effect-layer span:nth-child(2){left:16%;animation-delay:-3.1s} body.shop-menu-coin-sparkles .shop-menu-effect-layer span:nth-child(3){left:27%;animation-delay:-.4s} body.shop-menu-coin-sparkles .shop-menu-effect-layer span:nth-child(4){left:36%;animation-delay:-4.2s} body.shop-menu-coin-sparkles .shop-menu-effect-layer span:nth-child(5){left:45%;animation-delay:-2.3s} body.shop-menu-coin-sparkles .shop-menu-effect-layer span:nth-child(6){left:54%;animation-delay:-.8s} body.shop-menu-coin-sparkles .shop-menu-effect-layer span:nth-child(7){left:62%;animation-delay:-3.7s} body.shop-menu-coin-sparkles .shop-menu-effect-layer span:nth-child(8){left:70%;animation-delay:-1.8s} body.shop-menu-coin-sparkles .shop-menu-effect-layer span:nth-child(9){left:78%;animation-delay:-4.8s} body.shop-menu-coin-sparkles .shop-menu-effect-layer span:nth-child(10){left:84%;animation-delay:-2.8s} body.shop-menu-coin-sparkles .shop-menu-effect-layer span:nth-child(11){left:91%;animation-delay:-.2s} body.shop-menu-coin-sparkles .shop-menu-effect-layer span:nth-child(12){left:97%;animation-delay:-3.4s}
@keyframes shop-spark-fall { 0%{top:-5%;transform:rotate(0) scale(.6)} 50%{opacity:.8} 100%{top:105%;transform:rotate(270deg) scale(1.15);opacity:0} }
body.shop-menu-golden-bloom #bootMenuScreen .boot-menu-video, body.shop-menu-pearl-scan #bootMenuScreen .boot-menu-video, body.shop-menu-coin-sparkles #bootMenuScreen .boot-menu-video { filter:saturate(1.03) brightness(1.01); }

@media (max-width:900px) { .shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.shop-feature-strip{grid-template-columns:1fr}.shop-toolbar{grid-template-columns:1fr}.shop-tabs{justify-content:flex-start}.network-card.classic-hub-active .mode-specific-stack{grid-template-columns:1fr} }
@media (max-width:620px) { .shop-layer{padding:0}.shop-shell{width:100vw;max-height:100dvh;border-radius:0;border-left:0;border-right:0}.shop-header{grid-template-columns:auto 1fr;gap:9px;padding:12px}.shop-wallet{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding:7px 11px}.shop-wallet span,.shop-wallet strong{display:inline;margin:0}.shop-grid{grid-template-columns:1fr;padding:12px}.shop-feature-strip{margin:10px 12px 0}.shop-toolbar{padding:12px 12px 0}.shop-footer{padding:10px 12px;flex-direction:column}.shop-heading p{display:none} }

/* V80 — le bouton retour de la Boutique reste lui aussi dans la palette or/ivoire. */
.shop-layer .shop-back-btn {
  border-color: rgba(255, 224, 111, 0.58) !important;
  background: linear-gradient(180deg, rgba(255, 220, 92, 0.11), rgba(255, 255, 255, 0.025)) !important;
  color: #fff4c4 !important;
  box-shadow: inset 0 0 12px rgba(255, 210, 61, 0.05), 0 0 14px rgba(255, 199, 45, 0.07) !important;
}
.shop-layer .shop-back-btn:hover,
.shop-layer .shop-back-btn:focus-visible {
  border-color: #ffe477 !important;
  color: #fff !important;
  box-shadow: 0 0 20px rgba(255, 205, 54, 0.22) !important;
}
@media (max-width: 620px) {
  .shop-player-picker {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    max-width: 100%;
  }
  .shop-player-picker select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* =========================================================
   V81 — terminal développeur Night Driver
   ========================================================= */
.developer-hub-layer {
  position: fixed;
  inset: 0;
  z-index: 10070;
  display: grid;
  place-items: center;
  padding: 18px;
  overflow: auto;
  scrollbar-width: none;
  background:
    radial-gradient(circle at 78% 8%, rgba(255, 37, 160, .18), transparent 31%),
    radial-gradient(circle at 16% 90%, rgba(43, 220, 255, .15), transparent 34%),
    rgba(2, 3, 10, .94);
  backdrop-filter: blur(12px);
}
.developer-hub-layer::-webkit-scrollbar { width: 0; height: 0; }
.developer-hub-layer.hidden { display: none !important; }
.developer-hub-shell {
  width: min(900px, calc(100vw - 32px));
  max-height: calc(100dvh - 36px);
  overflow: auto;
  scrollbar-width: none;
  border: 1px solid rgba(91, 226, 255, .42);
  border-radius: 18px;
  color: #eafcff;
  background:
    linear-gradient(135deg, rgba(11, 14, 31, .985), rgba(9, 7, 24, .99) 52%, rgba(24, 7, 25, .985));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.035) inset,
    0 0 38px rgba(50, 215, 255, .10),
    0 0 72px rgba(255, 38, 159, .08);
}
.developer-hub-shell::-webkit-scrollbar { width: 0; height: 0; }
.developer-hub-header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(92, 224, 255, .17);
  background: linear-gradient(180deg, rgba(10, 13, 31, .99), rgba(9, 8, 24, .95));
  backdrop-filter: blur(14px);
}
.developer-hub-kicker {
  display: block;
  margin-bottom: 5px;
  color: #ff55bb;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .18em;
}
.developer-hub-header h2 {
  margin: 0;
  color: #f6fdff;
  font-size: clamp(1.15rem, 2.6vw, 1.85rem);
  letter-spacing: .08em;
  text-shadow: 0 0 18px rgba(80, 224, 255, .22);
}
.developer-hub-close {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid rgba(113, 229, 255, .35);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  color: #dff9ff;
}
.developer-hub-close:hover,
.developer-hub-close:focus-visible {
  border-color: #69e4ff;
  box-shadow: 0 0 20px rgba(77, 218, 255, .2);
}
.developer-hub-auth {
  width: min(500px, calc(100% - 36px));
  margin: 44px auto 50px;
  padding: 30px 28px;
  text-align: center;
  border: 1px solid rgba(255, 79, 184, .3);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
  box-shadow: inset 0 0 40px rgba(255, 45, 157, .035);
}
.developer-hub-terminal-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 15px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(85, 225, 255, .48);
  border-radius: 14px;
  color: #64e5ff;
  font-weight: 900;
  box-shadow: 0 0 22px rgba(69, 222, 255, .13);
}
.developer-hub-auth > strong { color: #fff; letter-spacing: .14em; }
.developer-hub-auth > p { color: #aab5c8; font-size: .78rem; line-height: 1.55; }
.developer-hub-auth form { display: grid; gap: 10px; margin-top: 22px; text-align: left; }
.developer-hub-auth label { color: #7be8ff; font-size: .64rem; font-weight: 900; letter-spacing: .12em; }
.developer-hub-auth input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(102, 229, 255, .32);
  border-radius: 10px;
  padding: 13px 14px;
  background: #070914;
  color: #f6fdff;
  font-family: inherit;
  letter-spacing: .14em;
}
.developer-hub-auth input:focus { outline: none; border-color: #63e3ff; box-shadow: 0 0 0 3px rgba(67, 220, 255, .08); }
.developer-hub-primary {
  margin-top: 5px;
  border: 1px solid rgba(111, 235, 255, .6);
  background: linear-gradient(135deg, #42daf7, #ff42ad);
  color: #071018;
  font-weight: 900;
}
.developer-hub-error { margin: 0 !important; color: #ff79bd !important; font-size: .7rem !important; }
.developer-hub-content { padding: 18px 20px 22px; }
.developer-hub-section {
  margin-bottom: 14px;
  padding: 17px;
  border: 1px solid rgba(101, 224, 255, .13);
  border-radius: 14px;
  background: rgba(255,255,255,.022);
}
.developer-hub-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.developer-hub-section-heading span { display: block; margin-bottom: 4px; color: #ff5cb9; font-size: .58rem; font-weight: 900; letter-spacing: .15em; }
.developer-hub-section-heading h3 { margin: 0; color: #f2fdff; font-size: .98rem; }
.developer-hub-balance {
  padding: 8px 11px;
  border: 1px solid rgba(91, 226, 255, .18);
  border-radius: 9px;
  color: #8fa7b5;
  font-size: .56rem;
  letter-spacing: .08em;
  text-align: right;
}
.developer-hub-balance strong { display: block; margin-top: 3px; color: #80edff; font-size: .9rem; }
.developer-toggle-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 15px;
  padding: 15px;
  border: 1px solid rgba(255, 90, 185, .23);
  border-radius: 12px;
  cursor: pointer;
  background: linear-gradient(90deg, rgba(255, 51, 161, .045), rgba(63, 217, 255, .035));
}
.developer-toggle-card input { position: absolute; opacity: 0; pointer-events: none; }
.developer-toggle-copy { min-width: 0; }
.developer-toggle-copy strong { display: block; color: #fff; font-size: .82rem; letter-spacing: .07em; }
.developer-toggle-copy small { display: block; margin-top: 5px; color: #9aaabe; font-size: .66rem; line-height: 1.45; }
.developer-toggle-switch {
  position: relative;
  width: 54px;
  height: 29px;
  border: 1px solid rgba(116, 225, 255, .26);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  transition: 180ms ease;
}
.developer-toggle-switch::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #9ba8b8;
  transition: 180ms ease;
}
.developer-toggle-card input:checked + .developer-toggle-switch {
  border-color: rgba(255, 100, 190, .65);
  background: linear-gradient(90deg, rgba(54, 221, 255, .42), rgba(255, 61, 170, .5));
  box-shadow: 0 0 18px rgba(255, 61, 170, .15);
}
.developer-toggle-card input:checked + .developer-toggle-switch::after { left: 29px; background: #fff; }
.developer-hub-note { margin: 10px 2px 0; color: #798b9e; font-size: .62rem; line-height: 1.5; }
.developer-nav-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.developer-nav-grid button {
  min-height: 82px;
  padding: 12px 10px;
  display: grid;
  align-content: center;
  gap: 6px;
  border: 1px solid rgba(105, 226, 255, .16);
  border-radius: 11px;
  background: rgba(255,255,255,.025);
  color: #eefcff;
  text-align: left;
}
.developer-nav-grid button:hover,
.developer-nav-grid button:focus-visible {
  border-color: rgba(91, 226, 255, .58);
  background: linear-gradient(135deg, rgba(48, 211, 255, .09), rgba(255, 47, 165, .08));
  box-shadow: 0 0 20px rgba(64, 218, 255, .08);
}
.developer-nav-grid b { font-size: .72rem; letter-spacing: .06em; }
.developer-nav-grid small { color: #8194a9; font-size: .58rem; line-height: 1.35; }
.developer-hub-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 4px;
  color: #8196a8;
  font-size: .6rem;
}
.developer-hub-footer button {
  border: 1px solid rgba(255, 93, 184, .24);
  background: rgba(255, 46, 160, .045);
  color: #ff9bd1;
  font-size: .58rem;
}
body.developer-unlimited-credits .shop-wallet {
  border-color: rgba(255, 225, 102, .85);
  box-shadow: 0 0 24px rgba(255, 210, 60, .18), inset 0 0 18px rgba(255,255,255,.035);
}
body.developer-unlimited-credits .shop-wallet strong { text-shadow: 0 0 14px rgba(255, 222, 84, .45); }

@media (max-width: 760px) {
  .developer-hub-layer { padding: 8px; }
  .developer-hub-shell { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .developer-hub-header { padding: 14px; }
  .developer-hub-content { padding: 12px; }
  .developer-hub-section { padding: 13px; }
  .developer-nav-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .developer-hub-section-heading { align-items: flex-start; flex-direction: column; }
  .developer-hub-balance { text-align: left; }
  .developer-hub-footer { align-items: stretch; flex-direction: column; }
}


/* V83 — Panneau cosmétique développé */
.cosmetic-browser {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.45fr);
  gap: 16px;
  align-items: start;
}

.cosmetic-hero-card {
  position: sticky;
  top: 0;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 214, 106, 0.2);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 218, 121, 0.08), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025);
}

.cosmetic-hero-stage {
  min-height: 240px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 223, 133, 0.16), rgba(255, 223, 133, 0) 58%),
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02));
}

.cosmetic-hero-stage canvas {
  width: min(220px, 100%);
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.cosmetic-hero-caption {
  display: grid;
  gap: 3px;
  text-align: center;
}

.cosmetic-hero-caption strong {
  color: #fff2c2;
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cosmetic-hero-caption small {
  color: var(--muted);
  line-height: 1.45;
}

.cosmetic-current-breakdown {
  display: grid;
  gap: 8px;
}

.cosmetic-current-row {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(0, 0, 0, 0.16);
}

.cosmetic-current-row span {
  color: var(--muted);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cosmetic-current-row strong {
  color: #fff7de;
  font-size: 0.78rem;
}

.cosmetic-browser-content {
  min-width: 0;
}

.skin-cosmetic-grid,
.hat-cosmetic-grid,
.accessory-cosmetic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px;
}

.skin-cosmetic-card,
.hat-cosmetic-card,
.accessory-cosmetic-card {
  cursor: pointer;
  min-width: 0;
  padding: 8px 6px;
  display: grid;
  place-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  color: #d8d8df;
  background: rgba(255, 255, 255, 0.03);
  text-align: center;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.skin-cosmetic-card { min-height: 122px; }
.hat-cosmetic-card,
.accessory-cosmetic-card { min-height: 108px; }

.skin-cosmetic-card:hover,
.skin-cosmetic-card:focus-visible,
.hat-cosmetic-card:hover,
.hat-cosmetic-card:focus-visible,
.accessory-cosmetic-card:hover,
.accessory-cosmetic-card:focus-visible {
  border-color: rgba(255, 220, 126, 0.68);
  background: rgba(255, 220, 126, 0.08);
}

.skin-cosmetic-card.selected,
.hat-cosmetic-card.selected,
.accessory-cosmetic-card.selected {
  border-color: #ffd46a;
  color: #fff2c6;
  background: rgba(255, 212, 106, 0.12);
  box-shadow: inset 0 0 18px rgba(255, 212, 106, 0.09), 0 0 12px rgba(255, 212, 106, 0.08);
}

.skin-cosmetic-card span,
.hat-cosmetic-card span,
.accessory-cosmetic-card span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.67rem;
  line-height: 1.3;
}

.skin-cosmetic-preview,
.hat-cosmetic-preview,
.accessory-cosmetic-preview {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.skin-cosmetic-preview {
  width: 74px;
  height: 74px;
}

.hat-cosmetic-preview {
  width: 72px;
  height: 54px;
}

.accessory-cosmetic-preview {
  width: 72px;
  height: 72px;
}

@media (max-width: 920px) {
  .cosmetic-browser {
    grid-template-columns: 1fr;
  }

  .cosmetic-hero-card {
    position: static;
  }
}

@media (max-width: 700px) {
  .skin-cosmetic-grid,
  .hat-cosmetic-grid,
  .accessory-cosmetic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* V84 — Navigation cosmétique par onglets */
.cosmetic-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.cosmetic-tab {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.03);
  color: #d8d8df;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.68rem;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.cosmetic-tab:hover,
.cosmetic-tab:focus-visible {
  border-color: rgba(255, 220, 126, 0.52);
  background: rgba(255, 220, 126, 0.08);
}

.cosmetic-tab.selected {
  border-color: #ffd46a;
  color: #fff4cf;
  background: linear-gradient(180deg, rgba(255, 212, 106, 0.17), rgba(255, 212, 106, 0.08));
  box-shadow: inset 0 0 16px rgba(255, 212, 106, 0.1), 0 0 14px rgba(255, 212, 106, 0.08);
}

.cosmetic-tab-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.cosmetic-active-header {
  margin-bottom: 0;
}

.cosmetic-preview-chip {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 212, 106, 0.24);
  color: #fff0bb;
  background: rgba(255, 212, 106, 0.08);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
}

.cosmetic-preview-chip.previewing {
  color: #fff9e6;
  border-color: rgba(255, 232, 158, 0.4);
  background: rgba(255, 232, 158, 0.16);
  box-shadow: 0 0 14px rgba(255, 220, 126, 0.12);
}

.cosmetic-footer-tools {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.cosmetic-footer-tools button {
  border-radius: 999px;
}

.cosmetic-hero-stage.preview-flash {
  animation: cosmeticHeroFlash 180ms ease-out;
}

.skin-cosmetic-card.previewing,
.hat-cosmetic-card.previewing,
.accessory-cosmetic-card.previewing {
  border-color: rgba(255, 232, 158, 0.62);
  background: rgba(255, 232, 158, 0.1);
  box-shadow: 0 0 12px rgba(255, 232, 158, 0.08);
}

@keyframes cosmeticHeroFlash {
  0% { box-shadow: 0 0 0 rgba(255, 220, 126, 0); transform: scale(0.985); }
  45% { box-shadow: 0 0 26px rgba(255, 220, 126, 0.18); transform: scale(1.012); }
  100% { box-shadow: 0 0 0 rgba(255, 220, 126, 0); transform: scale(1); }
}

@media (max-width: 700px) {
  .cosmetic-tab-summary {
    flex-direction: column;
    align-items: stretch;
  }

  .cosmetic-preview-chip {
    align-self: flex-start;
  }

  .cosmetic-footer-tools {
    justify-content: stretch;
  }

  .cosmetic-footer-tools button {
    width: 100%;
  }
}


/* V85 — Rareté colorée + description humoristique */
.skin-cosmetic-card,
.hat-cosmetic-card,
.accessory-cosmetic-card {
  --rarity-color: rgba(255, 255, 255, 0.16);
  border-color: var(--rarity-color);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

.skin-cosmetic-card.selected,
.hat-cosmetic-card.selected,
.accessory-cosmetic-card.selected {
  border-color: var(--rarity-color);
  color: #fff2c6;
  background: rgba(255, 212, 106, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 0 0 1px rgba(255, 238, 198, 0.26), 0 0 16px rgba(255, 212, 106, 0.12);
}

.skin-cosmetic-card.previewing,
.hat-cosmetic-card.previewing,
.accessory-cosmetic-card.previewing {
  border-color: var(--rarity-color);
  background: rgba(255, 232, 158, 0.1);
  box-shadow: 0 0 0 1px rgba(255, 232, 158, 0.16), 0 0 12px rgba(255, 232, 158, 0.08);
}

.cosmetic-rarity-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: #f3eedc;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cosmetic-rarity-base {
  --rarity-color: rgba(177, 186, 196, 0.5);
}
.cosmetic-rarity-commun {
  --rarity-color: rgba(114, 216, 151, 0.72);
}
.cosmetic-rarity-rare {
  --rarity-color: rgba(106, 190, 255, 0.72);
}
.cosmetic-rarity-epique {
  --rarity-color: rgba(196, 116, 255, 0.72);
}
.cosmetic-rarity-legendaire {
  --rarity-color: rgba(255, 201, 94, 0.8);
}
.cosmetic-rarity-possede {
  --rarity-color: rgba(255, 111, 215, 0.72);
}
.cosmetic-rarity-personnalise {
  --rarity-color: rgba(123, 247, 255, 0.76);
}

.cosmetic-rarity-base .cosmetic-rarity-badge,
.cosmetic-info-rarity.rarity-base {
  border-color: rgba(177, 186, 196, 0.45);
  background: rgba(177, 186, 196, 0.12);
  color: #ebeff3;
}
.cosmetic-rarity-commun .cosmetic-rarity-badge,
.cosmetic-info-rarity.rarity-commun {
  border-color: rgba(114, 216, 151, 0.48);
  background: rgba(114, 216, 151, 0.12);
  color: #dffff0;
}
.cosmetic-rarity-rare .cosmetic-rarity-badge,
.cosmetic-info-rarity.rarity-rare {
  border-color: rgba(106, 190, 255, 0.48);
  background: rgba(106, 190, 255, 0.12);
  color: #e1f4ff;
}
.cosmetic-rarity-epique .cosmetic-rarity-badge,
.cosmetic-info-rarity.rarity-epique {
  border-color: rgba(196, 116, 255, 0.48);
  background: rgba(196, 116, 255, 0.12);
  color: #f4e1ff;
}
.cosmetic-rarity-legendaire .cosmetic-rarity-badge,
.cosmetic-info-rarity.rarity-legendaire {
  border-color: rgba(255, 201, 94, 0.52);
  background: rgba(255, 201, 94, 0.16);
  color: #fff4d7;
}
.cosmetic-rarity-possede .cosmetic-rarity-badge,
.cosmetic-info-rarity.rarity-possede {
  border-color: rgba(255, 111, 215, 0.52);
  background: rgba(255, 111, 215, 0.14);
  color: #ffe2f8;
}
.cosmetic-rarity-personnalise .cosmetic-rarity-badge,
.cosmetic-info-rarity.rarity-personnalise {
  border-color: rgba(123, 247, 255, 0.5);
  background: rgba(123, 247, 255, 0.12);
  color: #e4fdff;
}

.cosmetic-info-card {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.1));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

.cosmetic-info-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cosmetic-info-context {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cosmetic-info-rarity {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cosmetic-info-title {
  color: #fff6dd;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}

.cosmetic-info-description {
  margin: 0;
  color: #dbdde7;
  font-size: 0.74rem;
  line-height: 1.55;
}


/* =========================================================
   V86 — panneau Apparence autonome depuis le menu CRT
   ========================================================= */
.appearance-layer {
  position: fixed;
  inset: 0;
  z-index: 10045;
  display: grid;
  place-items: center;
  padding: 14px;
  background:
    radial-gradient(circle at 82% 18%, rgba(102, 235, 255, 0.10), transparent 30%),
    radial-gradient(circle at 18% 84%, rgba(255, 210, 92, 0.08), transparent 32%),
    rgba(3, 5, 8, 0.94);
  backdrop-filter: blur(10px);
}

.appearance-layer.hidden {
  display: none !important;
}

.appearance-shell {
  width: min(1180px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  overflow: auto;
  scrollbar-width: none;
  border: 1px solid rgba(143, 237, 255, 0.38);
  border-radius: 18px;
  color: #f7fbff;
  background: linear-gradient(145deg, rgba(13, 20, 29, 0.985), rgba(7, 9, 14, 0.995) 48%, rgba(22, 19, 12, 0.985));
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.045) inset,
    0 0 58px rgba(85, 218, 255, 0.12),
    0 0 42px rgba(255, 205, 89, 0.06);
}

.appearance-shell::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.appearance-header {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  padding: 18px 20px 15px;
  border-bottom: 1px solid rgba(143, 237, 255, 0.16);
  background: linear-gradient(180deg, rgba(9, 15, 23, 0.985), rgba(9, 15, 23, 0.94));
  backdrop-filter: blur(12px);
}

.appearance-kicker {
  display: block;
  margin-bottom: 4px;
  color: #8deeff;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.appearance-header h2 {
  margin: 0;
  color: #fff5d0;
  letter-spacing: 0.04em;
}

.appearance-header p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.74rem;
}

.appearance-close {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(143, 237, 255, 0.26);
  color: #eefdff;
  background: rgba(126, 238, 255, 0.06);
}

.appearance-close:hover,
.appearance-close:focus-visible {
  border-color: rgba(255, 221, 123, 0.68);
  color: #fff3c3;
  background: rgba(255, 214, 106, 0.10);
}

.appearance-content {
  padding: 18px 20px 8px;
}

.appearance-content .cosmetic-browser {
  grid-template-columns: minmax(310px, 0.86fr) minmax(0, 1.55fr);
  gap: 20px;
}

.appearance-content .cosmetic-hero-card {
  top: 88px;
}

.appearance-content .cosmetic-hero-stage {
  min-height: 290px;
}

.appearance-content .cosmetic-hero-stage canvas {
  width: min(270px, 100%);
}

.appearance-footer {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px 20px 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(8, 11, 16, 0.965);
  backdrop-filter: blur(12px);
}

.appearance-footer span {
  color: var(--muted);
  font-size: 0.66rem;
}

.appearance-done {
  min-width: 160px;
  border-color: rgba(255, 214, 106, 0.52);
  color: #fff4cf;
  background: linear-gradient(180deg, rgba(255, 214, 106, 0.16), rgba(255, 214, 106, 0.08));
}

.appearance-done:hover,
.appearance-done:focus-visible {
  border-color: #ffd46a;
  box-shadow: 0 0 18px rgba(255, 212, 106, 0.12);
}

body.appearance-open {
  overflow: hidden !important;
}

@media (max-width: 920px) {
  .appearance-content .cosmetic-browser {
    grid-template-columns: 1fr;
  }
  .appearance-content .cosmetic-hero-card {
    position: static;
  }
}

@media (max-width: 620px) {
  .appearance-layer {
    padding: 0;
  }
  .appearance-shell {
    width: 100vw;
    max-height: 100dvh;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .appearance-header {
    padding: 13px 14px 11px;
  }
  .appearance-content {
    padding: 12px;
  }
  .appearance-footer {
    padding: 10px 12px;
    flex-direction: column;
    align-items: stretch;
  }
  .appearance-done {
    width: 100%;
  }
}

/* V90 — Corner Mode / Domain.exe */
.domain-test-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.domain-activate-btn {
  width: 100%;
  margin-top: 8px;
  padding: 7px 9px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.045);
  color: rgba(255,255,255,.62);
  font: 700 10px/1.2 "Courier New", monospace;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.domain-activate-btn.ready {
  color: #dffcff;
  border-color: rgba(92,226,255,.68);
  background: rgba(45,185,230,.13);
  box-shadow: 0 0 16px rgba(58,210,255,.12), inset 0 0 12px rgba(58,210,255,.06);
  animation: domainReadyPulse 1.15s ease-in-out infinite alternate;
}

.domain-activate-btn.active {
  color: #f6ffcf;
  border-color: rgba(134,255,158,.7);
  background: rgba(54,185,91,.13);
  box-shadow: 0 0 15px rgba(84,227,116,.12);
}

.corner-progress-chip {
  min-width: 38px;
  min-height: 36px;
  display: inline-grid;
  place-items: center;
  align-content: center;
  gap: 0;
  border: 1px solid var(--corner-progress-color, rgba(255,255,255,.16));
  background: rgba(255,255,255,.025);
  box-shadow: inset 0 0 8px rgba(255,255,255,.025);
}

.corner-progress-chip b {
  font-size: 10px;
  line-height: 1;
}

.corner-progress-chip small {
  margin-top: 3px;
  font-size: 8px;
  line-height: 1;
  opacity: .88;
}

.corner-progress-chip.active {
  background: rgba(84,227,116,.09);
  box-shadow: inset 0 0 10px rgba(84,227,116,.08), 0 0 9px rgba(84,227,116,.06);
}

.corner-progress-chip.private-hidden {
  color: rgba(255,255,255,.22) !important;
  border-color: rgba(255,255,255,.08) !important;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 4px, rgba(255,255,255,.04) 4px 8px);
}

@keyframes domainReadyPulse {
  from { filter: brightness(.9); transform: translateY(0); }
  to { filter: brightness(1.22); transform: translateY(-1px); }
}

@media (max-width: 760px) {
  .domain-test-grid { grid-template-columns: 1fr; }
  .corner-progress-chip { min-width: 32px; min-height: 32px; }
  .domain-activate-btn { font-size: 9px; }
}


/* V91 — Domain activation corner + Terminal Hack */
.corner-progress-chip.domain-trigger-corner {
  position: relative;
  cursor: pointer;
  border-color: var(--chip-color, #7eeeff) !important;
  color: #fff !important;
  background: color-mix(in srgb, var(--chip-color, #7eeeff) 16%, rgba(6,12,20,.9));
  box-shadow:
    0 0 8px var(--chip-color, #7eeeff),
    0 0 18px color-mix(in srgb, var(--chip-color, #7eeeff) 62%, transparent),
    0 0 34px color-mix(in srgb, var(--chip-color, #7eeeff) 32%, transparent),
    inset 0 0 12px color-mix(in srgb, var(--chip-color, #7eeeff) 28%, transparent);
  animation: domainTriggerCornerPulse .72s ease-in-out infinite alternate;
}

.corner-progress-chip.domain-trigger-corner::after {
  content: "EXEC";
  position: absolute;
  right: -7px;
  top: -8px;
  padding: 2px 4px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: #071017;
  color: #eaffff;
  font: 700 7px/1 "Courier New", monospace;
  letter-spacing: .08em;
  box-shadow: 0 0 9px currentColor;
}

.corner-progress-chip.domain-trigger-corner:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.domain-activate-btn.ready {
  cursor: default;
}

@keyframes domainTriggerCornerPulse {
  from { filter: brightness(.92); transform: scale(1); }
  to { filter: brightness(1.45); transform: scale(1.055); }
}

.domain-hack-modal {
  position: fixed;
  inset: 0;
  z-index: 10040;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(0, 2, 4, .38);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.domain-hack-modal.hidden { display: none; }

.domain-hack-terminal {
  position: relative;
  width: min(720px, 94vw);
  overflow: hidden;
  border: 1px solid rgba(93,255,157,.72);
  border-radius: 10px;
  padding: 18px;
  color: #a8ffc7;
  background:
    linear-gradient(rgba(12,30,19,.96), rgba(2,10,7,.985)),
    #041009;
  box-shadow:
    0 0 0 1px rgba(137,255,179,.12),
    0 0 32px rgba(48,255,122,.16),
    inset 0 0 34px rgba(32,255,108,.055);
  font-family: "Courier New", monospace;
}

.domain-hack-terminal::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: .28;
  background: repeating-linear-gradient(
    180deg,
    transparent 0 3px,
    rgba(122,255,164,.055) 3px 4px
  );
  mix-blend-mode: screen;
}

.domain-hack-terminal::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: -30% 0 auto;
  height: 35%;
  background: linear-gradient(180deg, transparent, rgba(92,255,145,.055), transparent);
  animation: domainTerminalScan 2.3s linear infinite;
}

.domain-hack-header,
.domain-hack-form,
.domain-hack-footer,
.domain-hack-log,
.domain-hack-feedback {
  position: relative;
  z-index: 1;
}

.domain-hack-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px dashed rgba(124,255,166,.27);
  padding-bottom: 12px;
}

.domain-hack-kicker {
  display: block;
  margin-bottom: 5px;
  color: rgba(159,255,190,.58);
  font-size: 10px;
  letter-spacing: .13em;
}

.domain-hack-header h2 {
  margin: 0;
  color: #caffd9;
  font: 800 clamp(18px, 3vw, 26px)/1.05 "Courier New", monospace;
  letter-spacing: .055em;
  text-shadow: 0 0 12px rgba(75,255,132,.3);
}

.domain-hack-timer {
  min-width: 74px;
  text-align: right;
  color: #dbffe7;
  font-size: 20px;
  font-weight: 800;
  text-shadow: 0 0 12px rgba(75,255,132,.55);
}

.domain-hack-timer.danger {
  color: #ff7b75;
  text-shadow: 0 0 13px rgba(255,70,70,.62);
  animation: domainHackDanger .36s steps(2,end) infinite;
}

.domain-hack-log {
  display: grid;
  gap: 5px;
  margin: 16px 0;
  color: rgba(162,255,192,.72);
  font-size: 12px;
  line-height: 1.45;
}

.domain-hack-form label {
  display: block;
  margin-bottom: 7px;
  color: #8fffb6;
  font-size: 12px;
  letter-spacing: .035em;
}

.domain-hack-command-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(109,255,158,.38);
  border-radius: 7px;
  padding: 7px 10px;
  background: rgba(0,0,0,.42);
  box-shadow: inset 0 0 16px rgba(48,255,122,.04);
}

.domain-hack-prompt,
.domain-hack-suffix {
  color: #77ffa6;
  font-weight: 800;
  text-shadow: 0 0 8px rgba(63,255,126,.35);
}

.domain-hack-command-row input {
  min-width: 0;
  border: 0 !important;
  outline: 0 !important;
  padding: 4px 1px !important;
  background: transparent !important;
  color: #eaffef !important;
  box-shadow: none !important;
  font: 800 20px/1.1 "Courier New", monospace !important;
  letter-spacing: .045em;
  text-transform: uppercase;
  caret-color: #7dffa8;
}

.domain-hack-enter {
  margin-top: 10px;
  border-color: rgba(104,255,153,.5);
  background: rgba(71,255,130,.08);
  color: #baffce;
  font-family: "Courier New", monospace;
}

.domain-hack-feedback {
  min-height: 20px;
  margin-top: 12px;
  color: rgba(185,255,207,.72);
  font-size: 12px;
}

.domain-hack-feedback.error { color: #ff8b86; }
.domain-hack-feedback.success { color: #d8ffe5; text-shadow: 0 0 9px rgba(84,255,139,.38); }

.domain-hack-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px dashed rgba(124,255,166,.2);
  color: rgba(146,255,180,.45);
  font-size: 10px;
  letter-spacing: .06em;
}

body.domain-hack-open .game-canvas,
body.domain-hack-open .game-header,
body.domain-hack-open .scoreboard {
  filter: saturate(.72) brightness(.88);
}

@keyframes domainTerminalScan {
  from { transform: translateY(0); }
  to { transform: translateY(420%); }
}

@keyframes domainHackDanger {
  50% { opacity: .58; }
}

@media (max-width: 700px) {
  .domain-hack-modal { padding: 10px; }
  .domain-hack-terminal { padding: 14px; }
  .domain-hack-header { gap: 10px; }
  .domain-hack-command-row input { font-size: 17px !important; }
  .domain-hack-footer { flex-direction: column; }
}


/* V92 — Identité Domain.exe / protocole interdit E.N.D */
.domain-activate-btn[data-domain-type="swamp"].ready,
.domain-activate-btn[data-domain-type="swamp"].active {
  border-color: rgba(123, 230, 121, .72);
  color: #dfffd8;
  background: linear-gradient(180deg, rgba(54, 122, 66, .22), rgba(19, 63, 36, .18));
  box-shadow: 0 0 18px rgba(80, 207, 91, .16), inset 0 0 14px rgba(86, 190, 97, .08);
}

.domain-activate-btn[data-domain-type="construct"].ready,
.domain-activate-btn[data-domain-type="construct"].active {
  border-color: rgba(89, 214, 255, .76);
  color: #dcf9ff;
  background: linear-gradient(180deg, rgba(28, 134, 184, .22), rgba(10, 57, 88, .19));
  box-shadow: 0 0 18px rgba(67, 194, 245, .17), inset 0 0 14px rgba(78, 200, 255, .08);
}

.end-secret-test-settings {
  margin-top: 12px;
  padding: 10px 11px;
  border: 1px solid rgba(255, 72, 88, .2);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(72, 7, 13, .14), rgba(11, 4, 7, .18));
}

.end-secret-test-settings > summary {
  cursor: pointer;
  color: #ff939d;
  font: 700 10px/1.3 "Courier New", monospace;
  letter-spacing: .065em;
  text-transform: uppercase;
}

.end-secret-test-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin-top: 10px;
}

body.end-protocol-open .domain-hack-modal {
  background:
    radial-gradient(circle at center, rgba(88, 0, 12, .18), rgba(0, 0, 0, .78)),
    repeating-linear-gradient(0deg, rgba(255, 40, 60, .022) 0 1px, transparent 1px 4px);
  backdrop-filter: blur(4px) saturate(.75);
}

body.end-protocol-open .domain-hack-terminal {
  border-color: rgba(255, 71, 88, .72);
  background: linear-gradient(180deg, rgba(20, 3, 7, .97), rgba(5, 1, 3, .99));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .035),
    0 0 38px rgba(255, 32, 55, .19),
    inset 0 0 42px rgba(125, 0, 17, .12);
  animation: endTerminalPulse .72s steps(2, end) infinite;
}

body.end-protocol-open .domain-hack-kicker,
body.end-protocol-open .domain-hack-header h2,
body.end-protocol-open .domain-hack-prompt,
body.end-protocol-open .domain-hack-suffix {
  color: #ff7784;
  text-shadow: 0 0 12px rgba(255, 44, 64, .48);
}

body.end-protocol-open .domain-hack-command-row {
  border-color: rgba(255, 70, 88, .48);
  background: rgba(66, 0, 10, .14);
}

body.end-protocol-open .domain-hack-command-row input {
  color: #ffe9eb;
  caret-color: #ff4f60;
}

body.end-protocol-open .domain-hack-timer {
  border-color: rgba(255, 65, 82, .46);
  color: #ff9ba4;
  background: rgba(93, 0, 13, .2);
}

@keyframes endTerminalPulse {
  0%, 88% { transform: translate(0, 0); filter: brightness(1); }
  90% { transform: translate(-1px, 0); filter: brightness(1.12); }
  94% { transform: translate(1px, 0); filter: brightness(.88); }
  100% { transform: translate(0, 0); filter: brightness(1); }
}

body.end-protocol-executing::after {
  content: "E.N.D.exe  //  ARENA PROCESS TERMINATED";
  position: fixed;
  inset: 0;
  z-index: 12050;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px),
    radial-gradient(circle at center, rgba(136, 0, 17, .44), rgba(0,0,0,.96) 67%);
  color: #ff6675;
  font: 800 clamp(18px, 3vw, 38px)/1.2 "Courier New", monospace;
  letter-spacing: .12em;
  text-align: center;
  text-shadow: 0 0 12px rgba(255, 26, 52, .76), 0 0 34px rgba(255, 0, 40, .34);
  pointer-events: none;
  animation: endExecutionGlitch 1.5s steps(2, end) both;
}

@keyframes endExecutionGlitch {
  0% { opacity: 0; clip-path: inset(48% 0 48% 0); transform: scaleX(.96); }
  14% { opacity: 1; clip-path: inset(0 0 0 0); transform: scaleX(1.02); }
  24% { transform: translate(-4px, 1px); filter: contrast(1.5); }
  30% { transform: translate(3px, -1px); }
  48% { transform: none; }
  78% { opacity: 1; }
  100% { opacity: 0; filter: brightness(.3); }
}

@media (max-width: 760px) {
  .end-secret-test-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   V94 — Refonte des panneaux Apparence / Skin Lab / Domain Lab
   ========================================================= */

/* Les outils sont déplacés au runtime vers leurs panneaux dédiés. */
.relocatable-skin-designer,
.relocatable-domain-settings {
  display: none;
}

.appearance-skin-designer-mount .relocatable-skin-designer,
.corner-domain-settings-mount .relocatable-domain-settings {
  display: block;
}

/* Correction V94 : les trois contrôles du héros ne se superposent plus. */
.appearance-content .cosmetic-toolbar {
  grid-template-columns: 1fr !important;
  align-items: stretch;
  gap: 9px;
}

.appearance-content .cosmetic-toolbar > label,
.appearance-content .cosmetic-current,
.appearance-content .cosmetic-size-control {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.appearance-content .cosmetic-current strong {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.appearance-view-tabs {
  position: sticky;
  top: 92px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(143, 237, 255, 0.12);
  background: rgba(8, 13, 20, 0.97);
  backdrop-filter: blur(12px);
}

.appearance-view-tab {
  min-height: 52px;
  display: grid;
  gap: 3px;
  align-content: center;
  justify-items: start;
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: #dce9ef;
  background: rgba(255,255,255,0.025);
  text-align: left;
}

.appearance-view-tab b {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.appearance-view-tab small {
  color: var(--muted);
  font-size: 0.58rem;
}

.appearance-view-tab.selected {
  border-color: rgba(255, 215, 106, 0.62);
  color: #fff1bf;
  background: linear-gradient(180deg, rgba(255, 212, 106, 0.12), rgba(255, 212, 106, 0.04));
  box-shadow: inset 0 0 18px rgba(255, 212, 106, 0.06), 0 0 16px rgba(255, 212, 106, 0.06);
}

.appearance-view-tab.developer.selected {
  border-color: rgba(192, 106, 255, 0.72);
  color: #f4dcff;
  background: linear-gradient(180deg, rgba(174, 86, 255, 0.14), rgba(85, 39, 136, 0.05));
  box-shadow: inset 0 0 20px rgba(190, 94, 255, 0.07), 0 0 18px rgba(153, 80, 255, 0.08);
}

.appearance-skin-designer-view {
  padding: 18px 20px 8px;
}

.appearance-skin-designer-view.hidden,
.appearance-content.hidden {
  display: none !important;
}

.appearance-dev-gate {
  min-height: 430px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 28px;
  border: 1px solid rgba(192, 106, 255, 0.32);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 25%, rgba(185, 92, 255, 0.13), transparent 34%),
    linear-gradient(180deg, rgba(18, 11, 27, 0.94), rgba(6, 7, 12, 0.98));
  text-align: center;
}

.appearance-dev-gate.hidden,
.appearance-skin-designer-content.hidden {
  display: none !important;
}

.appearance-dev-gate-icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(198, 121, 255, 0.52);
  border-radius: 14px;
  color: #e8c4ff;
  background: rgba(170, 79, 255, 0.08);
  font: 800 1.05rem/1 "Courier New", monospace;
  box-shadow: 0 0 22px rgba(178, 93, 255, 0.1);
}

.appearance-dev-gate > span,
.appearance-skin-designer-heading span {
  color: #bd7dff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.appearance-dev-gate h3,
.appearance-skin-designer-heading h3 {
  margin: 0;
  color: #f5e9ff;
}

.appearance-dev-gate p {
  max-width: 620px;
  margin: 0 0 6px;
  color: var(--muted);
  line-height: 1.5;
}

.appearance-dev-gate form {
  width: min(430px, 100%);
  display: grid;
  gap: 8px;
}

.appearance-dev-gate label {
  display: grid;
  gap: 6px;
  color: #cab9d7;
  font-size: 0.68rem;
  text-align: left;
}

.appearance-dev-gate input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 11px;
  border: 1px solid rgba(192, 106, 255, 0.38);
  border-radius: 8px;
  color: #fff;
  background: #08070b;
}

.appearance-dev-gate button {
  border-color: rgba(192, 106, 255, 0.58);
  color: #f5e5ff;
  background: rgba(174, 86, 255, 0.11);
}

.appearance-dev-error {
  margin: 0;
  color: #ff829b !important;
  font-size: 0.65rem;
}

.appearance-skin-designer-content {
  display: grid;
  gap: 14px;
}

.appearance-skin-designer-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(192, 106, 255, 0.18);
  border-radius: 12px;
  background: rgba(173, 80, 255, 0.045);
}

.appearance-skin-designer-heading small {
  color: var(--muted);
}

.appearance-skin-designer-mount #skinDesignerSection {
  margin: 0;
  border: 0;
  background: transparent;
}

.appearance-skin-designer-mount #skinDesignerSection > summary {
  display: none !important;
}

.appearance-skin-designer-mount #skinDesignerSection > fieldset {
  display: grid !important;
  gap: 16px;
  padding: 0;
  border: 0;
}

/* Le Skin Designer profite maintenant de toute la largeur de l'écran Apparence. */
.appearance-skin-designer-mount .skin-designer-workspace {
  grid-template-columns: minmax(340px, 0.9fr) minmax(420px, 1.4fr);
  gap: 22px;
}

.appearance-skin-designer-mount .skin-designer-stage {
  width: min(100%, 440px);
}

.appearance-skin-designer-mount .skin-designer-library-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* =========================================================
   V94 — panneau Entraînement Chaos rétractable
   ========================================================= */
.chaos-training-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chaos-training-collapse-btn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(106, 232, 255, 0.35);
  border-radius: 7px;
  color: #a9f5ff;
  background: rgba(89, 226, 255, 0.06);
  font: 900 1rem/1 "Courier New", monospace;
}

.chaos-training-collapse-btn:hover,
.chaos-training-collapse-btn:focus-visible {
  border-color: #8ff2ff;
  background: rgba(89, 226, 255, 0.12);
}

.chaos-training-body {
  display: block;
}

.chaos-training-panel.collapsed {
  width: min(270px, calc(100% - 24px));
  padding-bottom: 10px;
}

.chaos-training-panel.collapsed .chaos-training-body {
  display: none;
}

.chaos-training-panel.collapsed .chaos-training-header {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.chaos-training-panel.collapsed .chaos-training-header small {
  display: none;
}

/* =========================================================
   V94 — panneau plein écran Coins & Domain.exe
   ========================================================= */
.domain-panel-launcher {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
}

.domain-panel-launcher-copy {
  display: grid;
  gap: 4px;
}

.domain-panel-launcher-copy small {
  color: var(--muted);
  line-height: 1.35;
}

#cornerDomainPanelOpenBtn {
  border-color: rgba(62, 230, 255, 0.48);
  color: #d8fbff;
  background: rgba(61, 218, 255, 0.07);
}

.corner-domain-layer {
  position: fixed;
  inset: 0;
  z-index: 10058;
  display: grid;
  place-items: center;
  padding: 12px;
  background:
    radial-gradient(circle at 14% 12%, rgba(51, 233, 255, 0.1), transparent 28%),
    radial-gradient(circle at 88% 86%, rgba(104, 255, 120, 0.07), transparent 32%),
    rgba(2, 5, 9, 0.96);
  backdrop-filter: blur(10px);
}

.corner-domain-layer.hidden {
  display: none !important;
}

.corner-domain-shell {
  width: min(1440px, calc(100vw - 24px));
  height: min(940px, calc(100dvh - 24px));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(76, 230, 255, 0.34);
  border-radius: 18px;
  color: #effcff;
  background: linear-gradient(145deg, rgba(8, 18, 25, 0.99), rgba(4, 7, 12, 0.995) 52%, rgba(8, 16, 10, 0.99));
  box-shadow: 0 0 64px rgba(58, 222, 255, 0.1), inset 0 0 0 1px rgba(255,255,255,0.03);
}

.corner-domain-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 17px 20px 14px;
  border-bottom: 1px solid rgba(79, 228, 255, 0.13);
  background: rgba(5, 12, 18, 0.96);
}

.corner-domain-kicker {
  display: block;
  margin-bottom: 4px;
  color: #67e9ff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.corner-domain-header h2 {
  margin: 0;
  color: #eaffff;
  letter-spacing: 0.045em;
}

.corner-domain-header p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
}

.corner-domain-close {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border-color: rgba(75, 229, 255, 0.3);
  color: #dfffff;
  background: rgba(64, 222, 255, 0.05);
}

.corner-domain-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.015);
}

.corner-domain-overview article {
  display: grid;
  gap: 4px;
  padding: 10px 11px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
}

.corner-domain-overview article b {
  color: #88efff;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
}

.corner-domain-overview article:last-child b {
  color: #ff617c;
}

.corner-domain-overview article span {
  color: #aebdc3;
  font-size: 0.62rem;
  line-height: 1.42;
}

.corner-domain-content {
  min-height: 0;
  overflow: auto;
  padding: 14px 20px 20px;
  scrollbar-width: thin;
}

.corner-domain-settings-mount .domain-settings {
  margin: 0;
  border: 0;
  background: transparent;
}

.corner-domain-settings-mount .domain-settings > summary {
  display: none !important;
}

.corner-domain-settings-mount .domain-settings > fieldset {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
  border: 0;
}

.corner-domain-settings-mount .domain-settings > fieldset > label {
  min-width: 0;
  display: grid;
  gap: 7px;
  align-content: start;
  padding: 11px;
  border: 1px solid rgba(92, 221, 241, 0.11);
  border-radius: 10px;
  background: rgba(255,255,255,0.022);
  color: #b9cbd0;
  font-size: 0.66rem;
}

.corner-domain-settings-mount .domain-settings input,
.corner-domain-settings-mount .domain-settings select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.domain-panel-section-heading,
.corner-domain-settings-mount .zone-setting-note,
.corner-domain-settings-mount .settings-help,
.corner-domain-settings-mount .domain-test-grid,
.corner-domain-settings-mount .end-secret-test-settings {
  grid-column: 1 / -1;
}

.domain-panel-section-heading {
  display: grid;
  gap: 3px;
  margin-top: 8px;
  padding: 10px 12px;
  border-left: 3px solid #58e7ff;
  background: linear-gradient(90deg, rgba(64, 226, 255, 0.08), transparent 72%);
}

.domain-panel-section-heading:first-child {
  margin-top: 0;
}

.domain-panel-section-heading span {
  color: #8ef2ff;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.domain-panel-section-heading small {
  color: var(--muted);
  font-size: 0.61rem;
}

.corner-domain-settings-mount .domain-test-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.corner-domain-settings-mount .domain-test-grid label {
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 9px;
  background: rgba(255,255,255,0.02);
}

.corner-domain-settings-mount .end-secret-test-settings {
  border-color: rgba(255, 71, 101, 0.3);
  background: rgba(66, 6, 18, 0.12);
}

.corner-domain-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 11px 20px 13px;
  border-top: 1px solid rgba(255,255,255,0.07);
  background: rgba(5, 10, 15, 0.97);
}

.corner-domain-footer span {
  color: var(--muted);
  font-size: 0.64rem;
}

.corner-domain-footer button {
  min-width: 150px;
  border-color: rgba(83, 235, 255, 0.44);
  color: #dfffff;
  background: rgba(64, 226, 255, 0.07);
}

body.corner-domain-open {
  overflow: hidden !important;
}

@media (max-width: 980px) {
  .appearance-skin-designer-mount .skin-designer-workspace,
  .corner-domain-settings-mount .domain-settings > fieldset {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .corner-domain-settings-mount .domain-test-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .appearance-view-tabs {
    top: 78px;
    padding: 8px 12px;
  }
  .appearance-view-tab {
    min-height: 46px;
    padding: 8px;
  }
  .appearance-skin-designer-view {
    padding: 12px;
  }
  .appearance-skin-designer-mount .skin-designer-workspace,
  .corner-domain-settings-mount .domain-settings > fieldset,
  .corner-domain-overview {
    grid-template-columns: 1fr;
  }
  .corner-domain-layer {
    padding: 0;
  }
  .corner-domain-shell {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }
  .corner-domain-overview {
    padding: 8px 12px;
  }
  .corner-domain-content {
    padding: 12px;
  }
  .corner-domain-settings-mount .domain-test-grid {
    grid-template-columns: 1fr;
  }
  .domain-panel-launcher {
    grid-template-columns: 1fr;
  }
  #cornerDomainPanelOpenBtn {
    width: 100%;
  }
}

/* V100 — Boutique par rareté, Mythique et effets flashy */
.cosmetic-size-control small {
  display: block;
  margin-top: 4px;
  color: rgba(230, 229, 240, 0.55);
  font-size: 0.62rem;
  line-height: 1.35;
}

/* Couleurs de rareté dans la Boutique */
.shop-item-card.shop-rarity-commun { border-color: rgba(114, 216, 151, .42); }
.shop-item-card.shop-rarity-rare { border-color: rgba(106, 190, 255, .48); }
.shop-item-card.shop-rarity-epique { border-color: rgba(196, 116, 255, .52); }
.shop-item-card.shop-rarity-legendaire { border-color: rgba(255, 201, 94, .62); }
.shop-item-card.shop-rarity-mythique {
  border-color: rgba(255, 97, 220, .72);
  box-shadow: inset 0 0 0 1px rgba(100, 235, 255, .12), 0 0 24px rgba(255, 75, 218, .10);
}
.shop-item-card.shop-rarity-mythique:hover {
  border-color: rgba(110, 241, 255, .92);
  box-shadow: 0 14px 34px rgba(0,0,0,.24), 0 0 32px rgba(255, 75, 218, .18), inset 0 0 22px rgba(91, 227, 255, .07);
}
.shop-rarity-commun .shop-item-rarity { color:#bfffd5; border:1px solid rgba(114,216,151,.35); }
.shop-rarity-rare .shop-item-rarity { color:#c9edff; border:1px solid rgba(106,190,255,.38); }
.shop-rarity-epique .shop-item-rarity { color:#efd4ff; border:1px solid rgba(196,116,255,.42); }
.shop-rarity-legendaire .shop-item-rarity { color:#fff0b6; border:1px solid rgba(255,201,94,.48); }
.shop-rarity-mythique .shop-item-rarity {
  color:#fff;
  border:1px solid rgba(104,238,255,.58);
  background:linear-gradient(135deg,rgba(255,63,218,.28),rgba(80,220,255,.22),rgba(255,224,78,.16));
  text-shadow:0 0 9px rgba(255,255,255,.55);
  box-shadow:0 0 14px rgba(255,78,220,.16);
}

/* Rareté Mythique dans Apparence du joueur */
.cosmetic-rarity-mythique { --rarity-color: rgba(255, 82, 220, 0.86); }
.cosmetic-rarity-mythique .cosmetic-rarity-badge,
.cosmetic-info-rarity.rarity-mythique {
  border-color: rgba(96, 235, 255, .58);
  background: linear-gradient(135deg, rgba(255, 71, 216, .18), rgba(78, 228, 255, .16));
  color: #fff;
  text-shadow: 0 0 8px rgba(255,255,255,.4);
}

/* Nouveaux effets de menu : VHS Overdrive + Laser Storm */
body.shop-menu-vhs-overdrive .shop-menu-effect-layer,
body.shop-menu-laser-storm .shop-menu-effect-layer { opacity: 1; }

body.shop-menu-vhs-overdrive .shop-menu-effect-layer::before {
  content:"";
  position:absolute;
  inset:-12%;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, rgba(255,40,200,.05), transparent 30%, rgba(50,225,255,.055) 72%, transparent);
  mix-blend-mode:screen;
  animation:shop-vhs-jitter .19s steps(2,end) infinite;
}
body.shop-menu-vhs-overdrive .shop-menu-effect-layer::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 0 43%,rgba(255,255,255,.13) 48%,rgba(255,60,210,.09) 50%,rgba(65,225,255,.08) 52%,transparent 58%);
  animation:shop-vhs-band 2.7s linear infinite;
}
@keyframes shop-vhs-jitter {
  0%{transform:translate(0,0)} 33%{transform:translate(2px,-1px)} 66%{transform:translate(-2px,1px)} 100%{transform:translate(0,0)}
}
@keyframes shop-vhs-band { from{transform:translateY(-65%)} to{transform:translateY(70%)} }

body.shop-menu-laser-storm .shop-menu-effect-layer {
  background:
    radial-gradient(circle at 50% 45%, rgba(255,55,220,.06), transparent 42%),
    radial-gradient(circle at 20% 80%, rgba(55,225,255,.05), transparent 38%);
}
body.shop-menu-laser-storm .shop-menu-effect-layer::before,
body.shop-menu-laser-storm .shop-menu-effect-layer::after {
  content:"";
  position:absolute;
  width:150%;
  height:4px;
  left:-25%;
  top:50%;
  transform-origin:50% 50%;
  mix-blend-mode:screen;
  opacity:.75;
}
body.shop-menu-laser-storm .shop-menu-effect-layer::before {
  background:linear-gradient(90deg,transparent,rgba(255,58,220,.2),#ff58df,rgba(92,234,255,.55),transparent);
  box-shadow:0 0 16px rgba(255,70,220,.72),0 0 34px rgba(76,229,255,.34);
  animation:shop-laser-spin 4.4s linear infinite;
}
body.shop-menu-laser-storm .shop-menu-effect-layer::after {
  background:linear-gradient(90deg,transparent,rgba(90,239,255,.2),#68f4ff,rgba(255,222,70,.48),transparent);
  box-shadow:0 0 15px rgba(86,239,255,.72),0 0 32px rgba(255,225,72,.28);
  animation:shop-laser-spin-rev 5.2s linear infinite;
}
body.shop-menu-laser-storm .shop-menu-effect-layer span {
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 8px #fff,0 0 18px #ff53da,0 0 28px #56efff;
  animation:shop-mythic-pulse 1.5s ease-in-out infinite alternate;
}
@keyframes shop-laser-spin { from{transform:rotate(10deg)} to{transform:rotate(370deg)} }
@keyframes shop-laser-spin-rev { from{transform:rotate(165deg)} to{transform:rotate(-195deg)} }
@keyframes shop-mythic-pulse { from{opacity:.18;transform:scale(.7)} to{opacity:.85;transform:scale(1.35)} }

body.shop-menu-vhs-overdrive #bootMenuScreen .boot-menu-video {
  filter:saturate(1.18) contrast(1.05) brightness(1.04);
}
body.shop-menu-laser-storm #bootMenuScreen .boot-menu-video {
  filter:saturate(1.28) brightness(1.08) contrast(1.06);
}
body.shop-menu-laser-storm .shop-menu-effect-layer span:nth-child(1){left:8%;top:18%;animation-delay:-.2s}
body.shop-menu-laser-storm .shop-menu-effect-layer span:nth-child(2){left:18%;top:72%;animation-delay:-.8s}
body.shop-menu-laser-storm .shop-menu-effect-layer span:nth-child(3){left:29%;top:36%;animation-delay:-1.1s}
body.shop-menu-laser-storm .shop-menu-effect-layer span:nth-child(4){left:39%;top:84%;animation-delay:-.4s}
body.shop-menu-laser-storm .shop-menu-effect-layer span:nth-child(5){left:48%;top:14%;animation-delay:-1.3s}
body.shop-menu-laser-storm .shop-menu-effect-layer span:nth-child(6){left:57%;top:58%;animation-delay:-.7s}
body.shop-menu-laser-storm .shop-menu-effect-layer span:nth-child(7){left:66%;top:26%;animation-delay:-1.5s}
body.shop-menu-laser-storm .shop-menu-effect-layer span:nth-child(8){left:74%;top:78%;animation-delay:-.3s}
body.shop-menu-laser-storm .shop-menu-effect-layer span:nth-child(9){left:82%;top:42%;animation-delay:-1s}
body.shop-menu-laser-storm .shop-menu-effect-layer span:nth-child(10){left:90%;top:16%;animation-delay:-.6s}
body.shop-menu-laser-storm .shop-menu-effect-layer span:nth-child(11){left:94%;top:68%;animation-delay:-1.4s}
body.shop-menu-laser-storm .shop-menu-effect-layer span:nth-child(12){left:4%;top:54%;animation-delay:-.9s}


/* V101 — nouveaux contenus Boutique */
.shop-symbol-logo span { font-size: 1.15rem; letter-spacing: .08em; }

body.shop-menu-kernel-rain .shop-menu-effect-layer,
body.shop-menu-night-drive .shop-menu-effect-layer,
body.shop-menu-rgb-meltdown .shop-menu-effect-layer { opacity: 1; }

body.shop-menu-kernel-rain .shop-menu-effect-layer::before {
  content:"01  FF  DVD  //  EXE  7F  <>  0x\A0x  01  //  DVD  7F  EXE  FF  <>\AFF  DVD  01  EXE  //  0x  7F  <>";
  white-space:pre-wrap;
  position:absolute; inset:-25% 0 0 0;
  color:rgba(92,255,132,.12);
  font:700 13px/2.05 "Courier New",monospace;
  letter-spacing:1.2em;
  word-spacing:2em;
  transform:skewX(-5deg);
  animation:shop-kernel-fall 7s linear infinite;
}
@keyframes shop-kernel-fall { from{transform:translateY(-22%) skewX(-5deg)} to{transform:translateY(32%) skewX(-5deg)} }

body.shop-menu-night-drive .shop-menu-effect-layer::before {
  content:""; position:absolute; left:-10%; right:-10%; bottom:-24%; height:58%;
  background:repeating-linear-gradient(0deg,rgba(73,230,255,.14) 0 1px,transparent 1px 22px),repeating-linear-gradient(90deg,rgba(255,65,203,.11) 0 1px,transparent 1px 42px);
  transform:perspective(420px) rotateX(62deg); transform-origin:center top;
  animation:shop-drive-grid 2.3s linear infinite;
}
body.shop-menu-night-drive .shop-menu-effect-layer::after {
  content:""; position:absolute; width:220px; height:220px; left:50%; top:18%; transform:translateX(-50%);
  border-radius:50%; background:radial-gradient(circle,rgba(255,235,105,.18),rgba(255,72,191,.13) 42%,rgba(92,75,255,0) 72%);
  box-shadow:0 0 55px rgba(255,68,198,.18); animation:shop-drive-sun 2.8s ease-in-out infinite alternate;
}
@keyframes shop-drive-grid { from{background-position:0 0,0 0} to{background-position:0 22px,42px 0} }
@keyframes shop-drive-sun { from{opacity:.55;filter:blur(1px)} to{opacity:1;filter:blur(4px)} }

body.shop-menu-rgb-meltdown .shop-menu-effect-layer::before,
body.shop-menu-rgb-meltdown .shop-menu-effect-layer::after {
  content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
}
body.shop-menu-rgb-meltdown .shop-menu-effect-layer::before {
  background:linear-gradient(90deg,rgba(0,230,255,.09),transparent 28%,transparent 72%,rgba(255,35,192,.10));
  animation:shop-rgb-melt-a .16s steps(2,end) infinite;
}
body.shop-menu-rgb-meltdown .shop-menu-effect-layer::after {
  background:repeating-linear-gradient(0deg,transparent 0 22px,rgba(255,255,255,.035) 22px 24px);
  animation:shop-rgb-melt-b 1.35s linear infinite;
}
body.shop-menu-rgb-meltdown #bootMenuScreen .boot-menu-video { filter:saturate(1.38) contrast(1.08); }
@keyframes shop-rgb-melt-a { 0%{transform:translateX(-3px)}50%{transform:translateX(4px)}100%{transform:translateX(-1px)} }
@keyframes shop-rgb-melt-b { from{transform:translateY(-24px)} to{transform:translateY(24px)} }

/* V101 — aperçus animés des nouveaux objets */
.shop-item-symbol[data-value="dvd_orbit"]::before,
.shop-item-symbol[data-value="crt_drone"]::before,
.shop-item-symbol[data-value="neon_chain"]::before,
.shop-item-symbol[data-value="glitch_echo"]::before,
.shop-item-symbol[data-value="kernel_rain"]::before,
.shop-item-symbol[data-value="night_drive_grid"]::before,
.shop-item-symbol[data-value="void_singularity"]::before,
.shop-item-symbol[data-value="terminal_green"]::before,
.shop-item-symbol[data-value="toxic_glitch"]::before,
.shop-item-symbol[data-value="plasma_wave"]::before,
.shop-item-symbol[data-value="night_drive"]::before,
.shop-item-symbol[data-value="rgb_meltdown"]::before {
  content:"";
  position:absolute;
  inset:10%;
  border-radius:50%;
  pointer-events:none;
  opacity:.72;
}
.shop-item-symbol[data-value="dvd_orbit"]::before { border:2px dotted #7eeeff; box-shadow:0 0 14px #ff66df; animation:shop-orbit-preview 2.4s linear infinite; }
.shop-item-symbol[data-value="crt_drone"]::before { border-radius:6px; border:2px solid #72efff; box-shadow:0 0 16px rgba(114,239,255,.65); animation:shop-drone-preview 1.8s ease-in-out infinite alternate; }
.shop-item-symbol[data-value="neon_chain"]::before { border:3px dashed #ff65df; box-shadow:0 0 12px #59e9ff; animation:shop-orbit-preview 3s linear infinite reverse; }
.shop-item-symbol[data-value="glitch_echo"]::before { border-radius:8px; background:linear-gradient(90deg,rgba(54,226,255,.25),transparent 35%,rgba(255,57,207,.26)); animation:shop-glitch-preview .22s steps(2,end) infinite; }
.shop-item-symbol[data-value="kernel_rain"]::before { border-radius:4px; background:repeating-linear-gradient(90deg,rgba(93,255,131,.28) 0 2px,transparent 2px 10px); animation:shop-kernel-preview 1.4s linear infinite; }
.shop-item-symbol[data-value="night_drive_grid"]::before { border-radius:4px; background:linear-gradient(180deg,rgba(255,57,193,.15),rgba(58,225,255,.04)),repeating-linear-gradient(0deg,rgba(76,224,255,.20) 0 1px,transparent 1px 10px); transform:perspective(100px) rotateX(50deg); }
.shop-item-symbol[data-value="void_singularity"]::before { background:radial-gradient(circle,#020207 0 22%,rgba(132,55,255,.52) 34%,rgba(53,220,255,.18) 52%,transparent 70%); box-shadow:0 0 18px rgba(126,70,255,.55); animation:shop-void-preview 1.8s ease-in-out infinite alternate; }
.shop-item-symbol[data-value="terminal_green"]::before { border:2px solid #6cff87; box-shadow:inset 0 0 14px rgba(108,255,135,.24),0 0 12px rgba(108,255,135,.38); }
.shop-item-symbol[data-value="toxic_glitch"]::before { background:conic-gradient(#a2ff25,#a2ff25,#b846ff,#b846ff,#a2ff25); filter:blur(5px); animation:shop-orbit-preview 1.4s linear infinite; }
.shop-item-symbol[data-value="plasma_wave"]::before { background:radial-gradient(circle,rgba(255,76,196,.45),rgba(68,219,255,.24) 48%,transparent 70%); animation:shop-void-preview 1.1s ease-in-out infinite alternate; }
.shop-item-symbol[data-value="night_drive"]::before { border-radius:4px; background:linear-gradient(180deg,rgba(255,68,190,.25),transparent 50%,rgba(71,230,255,.14)),repeating-linear-gradient(0deg,rgba(78,226,255,.18) 0 1px,transparent 1px 9px); }
.shop-item-symbol[data-value="rgb_meltdown"]::before { border-radius:6px; background:linear-gradient(90deg,rgba(0,229,255,.34),transparent 38%,rgba(255,40,199,.34)); animation:shop-glitch-preview .15s steps(2,end) infinite; }
@keyframes shop-orbit-preview { to{transform:rotate(360deg)} }
@keyframes shop-drone-preview { from{transform:translateY(-3px)} to{transform:translateY(4px)} }
@keyframes shop-glitch-preview { 0%{transform:translateX(-3px)} 50%{transform:translateX(4px)} 100%{transform:translateX(-1px)} }
@keyframes shop-kernel-preview { from{background-position:0 -18px} to{background-position:10px 18px} }
@keyframes shop-void-preview { from{transform:scale(.82);opacity:.5} to{transform:scale(1.08);opacity:.9} }

/* =========================================================
   V104 — Règles de la partie dans la préparation du lancement
   Le choix Mode Base / Mode Corner remonte du laboratoire
   « Coins & Domain.exe » jusqu'à l'écran que tout le monde
   voit. Même grammaire visuelle que les cartes de biome, avec
   un accent ambre propre au Mode Corner pour qu'il se
   distingue du cyan des autres étapes.
   ========================================================= */

.launch-rule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.launch-rule-card {
  min-height: 104px;
  padding: 10px;
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  gap: 2px 9px;
  align-items: center;
  text-align: left;
  color: #ddd;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.13);
}

.launch-rule-card:hover,
.launch-rule-card:focus-visible {
  border-color: rgba(255,181,46,0.52);
  background: rgba(255,181,46,0.035);
}

.launch-rule-card.selected {
  color: #fff;
  border-color: #ffb52e;
  background: rgba(255,181,46,0.085);
  box-shadow: inset 0 0 18px rgba(255,181,46,0.07);
}

.launch-rule-card[data-launch-corner-rule="base"].selected {
  border-color: #8f9bb3;
  background: rgba(143,155,179,0.08);
  box-shadow: inset 0 0 18px rgba(143,155,179,0.06);
}

.launch-rule-card strong {
  align-self: end;
  font-size: 0.8rem;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

/* Sous-titre « Domain.exe » : présent, mais jamais plus fort
   que le nom du mode lui-même. */
.launch-rule-card strong em {
  font-style: normal;
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  color: #ffb52e;
  opacity: 0.85;
}

.launch-rule-card small {
  align-self: start;
  color: var(--muted);
  font-size: 0.59rem;
  line-height: 1.3;
}

.launch-rule-icon {
  grid-row: 1 / 3;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid currentColor;
  font-size: 1.15rem;
  line-height: 1;
}

.launch-rule-icon.base { color: #8f9bb3; }
.launch-rule-icon.corner { color: #ffb52e; }

.launch-rule-detail {
  margin-top: 10px;
  padding: 10px;
  border: 1px dashed rgba(255,181,46,0.34);
  border-radius: 10px;
  background: rgba(255,181,46,0.03);
}

.launch-rule-detail-title {
  font-size: 0.63rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffcf76;
  margin-bottom: 7px;
}

.launch-validation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.launch-validation-card {
  padding: 9px 10px;
  display: grid;
  gap: 3px;
  text-align: left;
  color: #ddd;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.12);
}

.launch-validation-card:hover,
.launch-validation-card:focus-visible {
  border-color: rgba(255,181,46,0.5);
}

.launch-validation-card.selected {
  color: #fff;
  border-color: #ffb52e;
  background: rgba(255,181,46,0.075);
}

.launch-validation-card strong { font-size: 0.73rem; }

.launch-validation-card small {
  color: var(--muted);
  font-size: 0.57rem;
  line-height: 1.3;
}

.launch-rule-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.57rem;
  line-height: 1.4;
}

@media (max-width: 720px) {
  .launch-rule-grid,
  .launch-validation-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* V105 — deuxième groupe de choix dans le détail Mode Corner. */
.launch-rule-detail-title-spaced {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 181, 46, 0.18);
}

/* =========================================================
   V105 — REFONTE DE L'ARÈNE DE COMBAT

   Diagnostic : l'écran affichait tout ce que le moteur savait, à poids
   visuel égal. Neuf boutons de navigation dont un seul sert en partie,
   cinq lignes de données techniques au même corps, le score en plus gros
   que la progression des coins alors que c'est elle qui porte la partie,
   et l'arène — seul endroit où le jeu existe — réduite à 60 % de la
   hauteur.

   Principe de la refonte : hiérarchiser, pas redécorer. Ce que le joueur
   doit lire en une fraction de seconde passe devant ; le reste se replie.
   ========================================================= */

/* ---------- 1. La barre supérieure se replie en combat ---------- */

.top-actions {
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.top-actions-secondary {
  display: flex;
  gap: 8px;
}

/* Hors combat, le bouton de repli n'a pas lieu d'être. */
.top-actions-more {
  display: none;
}

body.match-live .top-actions-more {
  display: inline-flex;
}

body.match-live .top-actions-secondary {
  display: none;
}

body.match-live .top-actions-secondary.is-open {
  display: flex;
  /* Déplié : on le pose sous la barre pour ne pas la faire grandir. */
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 40;
  margin-top: 6px;
  padding: 8px;
  flex-direction: column;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(8, 9, 16, 0.97);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}

body.match-live .topbar {
  position: relative;
  margin-bottom: 8px;
}

/* Le titre cède la place : en partie, on sait déjà à quel jeu on joue. */
body.match-live .topbar h1 {
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  opacity: 0.72;
}

body.match-live .topbar .subtitle {
  font-size: 0.66rem;
}

/* Boutique mise en avant hors partie seulement : en plein match, une
   bordure dorée attire l'œil vers ce qu'il ne faut surtout pas ouvrir. */
body.match-live .shop-topbar-btn {
  border-color: var(--line);
  box-shadow: none;
}

/* ---------- 2. La carte joueur : l'objectif d'abord ---------- */

body.match-live .player-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 11px;
}

/* L'ordre visuel ne suit plus l'ordre du DOM : identité, progression des
   coins, jauge Domain, puis seulement l'état chiffré. */
body.match-live .player-card .player-title { order: 1; }
body.match-live .player-card .corner-strip { order: 2; margin-top: 2px; }
body.match-live .player-card .domain-activate-btn { order: 3; margin-top: 0; }
body.match-live .player-card .player-status-row { order: 4; }

/* Le score reste lisible mais cesse d'être l'élément dominant. */
body.match-live .score-line {
  margin-top: 0;
  font-size: 0.95rem;
  opacity: 0.85;
}

/* Score, recharge et état tiennent sur une seule ligne : trois données
   secondaires ne méritent pas trois lignes chacune. */
.player-status-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}

body.match-live .player-status-row .cooldown-line {
  font-size: 0.62rem;
}

/* Les pastilles de coin deviennent le premier repère de la carte. */
body.match-live .corner-strip {
  gap: 6px;
}

body.match-live .corner-chip {
  width: 34px;
  height: 34px;
  font-size: 0.72rem;
}

body.match-live .corner-progress-chip {
  width: 40px;
  height: 38px;
}

/* La jauge Domain cesse de ressembler à un bouton désactivé : c'est une
   progression, elle se remplit. La variable --domain-fill est posée par
   updateDomainButton. */
body.match-live .domain-activate-btn {
  position: relative;
  overflow: hidden;
  font-size: 0.63rem;
  padding: 8px 9px;
  background: rgba(255, 255, 255, 0.03);
}

body.match-live .domain-activate-btn::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--domain-fill, 0%);
  background: linear-gradient(
    90deg,
    rgba(120, 235, 150, 0.10),
    rgba(120, 235, 150, 0.26)
  );
  transition: width 260ms ease;
  pointer-events: none;
}

body.match-live .domain-activate-btn[data-domain-type="construct"]::before {
  background: linear-gradient(
    90deg,
    rgba(94, 200, 255, 0.10),
    rgba(94, 200, 255, 0.28)
  );
}

body.match-live .domain-activate-btn > * {
  position: relative;
}

/* Prêt à activer : la jauge est pleine, la carte doit le crier. */
body.match-live .domain-activate-btn.ready {
  color: #ffe8a8;
  border-color: rgba(255, 205, 92, 0.75);
  animation: domain-ready-pulse 1.15s ease-in-out infinite;
}

@keyframes domain-ready-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 205, 92, 0); }
  50% { box-shadow: 0 0 16px rgba(255, 205, 92, 0.32); }
}

/* ---------- 3. Le panneau central : chrono, état, puis le reste ---------- */

body.match-live .match-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  padding: 10px 12px;
}

body.match-live #roundMessage {
  font-size: 0.82rem;
  color: #e6eeff;
}

.match-readout {
  margin-top: 2px;
  font-size: 0.62rem;
  color: var(--muted);
  text-align: left;
}

.match-readout > summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(226, 236, 255, 0.5);
  padding: 3px 0;
  text-align: center;
}

.match-readout > summary::-webkit-details-marker { display: none; }

.match-readout > summary::after {
  content: " ▾";
  opacity: 0.6;
}

.match-readout[open] > summary::after {
  content: " ▴";
}

.match-readout > div {
  padding: 1px 0;
  line-height: 1.4;
}

/* ---------- 4. La barre de skills cesse d'être orpheline ---------- */

/* Elle flotte en bas de l'écran, loin de la carte de son propriétaire.
   Faute de pouvoir la déplacer sans casser son usage tactile, on la relie
   par la couleur : --skill-owner-color est posée par le moteur. */
body.match-live .chaos-touch-skills {
  padding: 6px 8px 8px;
  border-radius: 12px;
  border: 1px solid var(--skill-owner-color, rgba(255, 255, 255, 0.16));
  background: rgba(6, 8, 15, 0.62);
  box-shadow: 0 0 22px -6px var(--skill-owner-color, transparent);
}

body.match-live .chaos-touch-skills::before {
  content: attr(data-owner-label);
  position: absolute;
  top: -8px;
  left: 10px;
  padding: 1px 6px;
  font: 700 9px/1.4 "Courier New", monospace;
  letter-spacing: 0.12em;
  color: var(--skill-owner-color, #dceaff);
  background: rgba(6, 8, 15, 0.95);
  border: 1px solid var(--skill-owner-color, rgba(255, 255, 255, 0.16));
  border-radius: 4px;
}

/* ---------- 5. L'arène récupère la place gagnée ---------- */

body.match-live .scoreboard {
  margin-bottom: 6px;
}

body.match-live .player-card,
body.match-live .match-card {
  min-height: 0;
}

@media (max-width: 860px) {
  body.match-live .corner-chip { width: 28px; height: 28px; }
  body.match-live .corner-progress-chip { width: 32px; height: 31px; }
}

/* =========================================================
   V106 — Habillages du Terminal Hack

   Le terminal était en vert phosphore codé en dur, valeur par valeur.
   On le passe sur variables : les règles ci-dessous redéclarent les mêmes
   sélecteurs, plus loin dans le fichier, donc elles gagnent. Les valeurs
   par défaut reproduisent exactement l'ancien vert — sans habillage
   équipé, rien ne change à l'écran.
   ========================================================= */

/* V109 — Le codex Domain.exe partage la palette du terminal : une seule
   source de vérité pour les deux surfaces. */
.domain-hack-terminal,
.boot-codex-surface {
  --term-ink: #a8ffc7;
  --term-ink-strong: #caffd9;
  --term-ink-soft: rgba(162, 255, 192, 0.72);
  --term-ink-faint: rgba(159, 255, 190, 0.58);
  --term-accent: #77ffa6;
  --term-border: rgba(93, 255, 157, 0.72);
  --term-border-soft: rgba(124, 255, 166, 0.27);
  --term-glow: rgba(75, 255, 132, 0.3);
  --term-halo: rgba(48, 255, 122, 0.16);
  --term-scan: rgba(122, 255, 164, 0.055);
  --term-bg-top: rgba(12, 30, 19, 0.96);
  --term-bg-bottom: rgba(2, 10, 7, 0.985);
  --term-base: #041009;
  --term-scan-opacity: 0.28;

  border-color: var(--term-border);
  color: var(--term-ink);
  background:
    linear-gradient(var(--term-bg-top), var(--term-bg-bottom)),
    var(--term-base);
  box-shadow:
    0 0 0 1px var(--term-border-soft),
    0 0 32px var(--term-halo),
    inset 0 0 34px var(--term-scan);
}

.domain-hack-terminal::before {
  opacity: var(--term-scan-opacity);
  background: repeating-linear-gradient(
    180deg,
    transparent 0 3px,
    var(--term-scan) 3px 4px
  );
}

.domain-hack-terminal::after {
  background: linear-gradient(180deg, transparent, var(--term-scan), transparent);
}

.domain-hack-terminal .domain-hack-header { border-bottom-color: var(--term-border-soft); }
.domain-hack-terminal .domain-hack-kicker { color: var(--term-ink-faint); }
.domain-hack-terminal .domain-hack-header h2 {
  color: var(--term-ink-strong);
  text-shadow: 0 0 12px var(--term-glow);
}
.domain-hack-terminal .domain-hack-timer {
  color: var(--term-ink-strong);
  text-shadow: 0 0 12px var(--term-glow);
}
.domain-hack-terminal .domain-hack-log { color: var(--term-ink-soft); }
.domain-hack-terminal .domain-hack-form label { color: var(--term-accent); }
.domain-hack-terminal .domain-hack-command-row {
  border-color: var(--term-border);
  box-shadow: inset 0 0 16px var(--term-halo);
}
.domain-hack-terminal .domain-hack-prompt,
.domain-hack-terminal .domain-hack-suffix {
  color: var(--term-accent);
  text-shadow: 0 0 8px var(--term-glow);
}
.domain-hack-terminal .domain-hack-command-row input {
  color: var(--term-ink-strong) !important;
  caret-color: var(--term-accent);
}
.domain-hack-terminal .domain-hack-enter {
  border-color: var(--term-border);
  background: var(--term-halo);
  color: var(--term-ink-strong);
}
.domain-hack-terminal .domain-hack-feedback { color: var(--term-ink-soft); }
.domain-hack-terminal .domain-hack-feedback.success {
  color: var(--term-ink-strong);
  text-shadow: 0 0 9px var(--term-glow);
}
.domain-hack-terminal .domain-hack-footer { border-top-color: var(--term-border-soft); }

/* La couleur d'erreur reste rouge dans tous les habillages : c'est une
   alerte, elle ne doit jamais se fondre dans la palette. */

/* ---------- Ambre 5150 ---------- */
body[data-terminal-skin="amber_crt"] .domain-hack-terminal,
body[data-terminal-skin="amber_crt"] .supplement-finish-symbol,
body[data-terminal-skin="amber_crt"] .boot-codex-surface {
  --term-ink: #ffcf8a;
  --term-ink-strong: #ffe6bd;
  --term-ink-soft: rgba(255, 205, 138, 0.74);
  --term-ink-faint: rgba(255, 199, 128, 0.56);
  --term-accent: #ffb35c;
  --term-border: rgba(255, 178, 84, 0.7);
  --term-border-soft: rgba(255, 190, 116, 0.26);
  --term-glow: rgba(255, 160, 48, 0.34);
  --term-halo: rgba(255, 150, 32, 0.15);
  --term-scan: rgba(255, 189, 112, 0.06);
  --term-bg-top: rgba(32, 20, 6, 0.96);
  --term-bg-bottom: rgba(12, 6, 1, 0.985);
  --term-base: #100801;
  /* Les tubes ambre avaient une persistance plus douce : moins de stries. */
  --term-scan-opacity: 0.2;
}

/* ---------- Glace tactique ---------- */
body[data-terminal-skin="ice_terminal"] .domain-hack-terminal,
body[data-terminal-skin="ice_terminal"] .supplement-finish-symbol,
body[data-terminal-skin="ice_terminal"] .boot-codex-surface {
  --term-ink: #b6e6ff;
  --term-ink-strong: #e2f6ff;
  --term-ink-soft: rgba(174, 224, 255, 0.74);
  --term-ink-faint: rgba(160, 214, 255, 0.55);
  --term-accent: #6fc8ff;
  --term-border: rgba(102, 190, 255, 0.72);
  --term-border-soft: rgba(140, 210, 255, 0.26);
  --term-glow: rgba(70, 170, 255, 0.36);
  --term-halo: rgba(48, 150, 255, 0.16);
  --term-scan: rgba(150, 214, 255, 0.055);
  --term-bg-top: rgba(8, 22, 38, 0.96);
  --term-bg-bottom: rgba(2, 7, 14, 0.985);
  --term-base: #030a14;
  --term-scan-opacity: 0.3;
}

/* ---------- Secteur corrompu ---------- */
body[data-terminal-skin="corrupted"] .domain-hack-terminal,
body[data-terminal-skin="corrupted"] .supplement-finish-symbol,
body[data-terminal-skin="corrupted"] .boot-codex-surface {
  --term-ink: #ffb4be;
  --term-ink-strong: #ffe0e4;
  --term-ink-soft: rgba(255, 172, 184, 0.76);
  --term-ink-faint: rgba(255, 150, 166, 0.56);
  --term-accent: #ff5f7e;
  --term-border: rgba(255, 82, 110, 0.74);
  --term-border-soft: rgba(255, 120, 144, 0.28);
  --term-glow: rgba(255, 48, 88, 0.4);
  --term-halo: rgba(255, 30, 74, 0.17);
  --term-scan: rgba(255, 130, 152, 0.07);
  --term-bg-top: rgba(34, 6, 14, 0.96);
  --term-bg-bottom: rgba(12, 1, 5, 0.985);
  --term-base: #120106;
  --term-scan-opacity: 0.42;
}

/* Le secteur corrompu tremble : c'est sa signature, mais l'amplitude reste
   sous le seuil où le texte deviendrait pénible à lire. */
body[data-terminal-skin="corrupted"] .domain-hack-terminal {
  animation: terminal-corrupt-jitter 3.4s steps(1, end) infinite;
}

@keyframes terminal-corrupt-jitter {
  0%, 92%, 100% { transform: translate(0, 0); }
  93% { transform: translate(-1.5px, 0); }
  94% { transform: translate(1.5px, 0); }
  95% { transform: translate(0, 1px); }
  96% { transform: translate(-1px, 0); }
}

/* ---------- Noyau du vide ---------- */
body[data-terminal-skin="void_kernel"] .domain-hack-terminal,
body[data-terminal-skin="void_kernel"] .supplement-finish-symbol,
body[data-terminal-skin="void_kernel"] .boot-codex-surface {
  --term-ink: #e8e4ff;
  --term-ink-strong: #ffffff;
  --term-ink-soft: rgba(226, 220, 255, 0.72);
  --term-ink-faint: rgba(206, 196, 255, 0.5);
  --term-accent: #c39bff;
  --term-border: rgba(176, 138, 255, 0.7);
  --term-border-soft: rgba(190, 160, 255, 0.24);
  --term-glow: rgba(150, 100, 255, 0.42);
  --term-halo: rgba(126, 72, 255, 0.18);
  --term-scan: rgba(190, 165, 255, 0.05);
  --term-bg-top: rgba(16, 8, 34, 0.97);
  --term-bg-bottom: rgba(3, 1, 9, 0.99);
  --term-base: #050110;
  --term-scan-opacity: 0.16;
}

@media (prefers-reduced-motion: reduce) {
  body[data-terminal-skin="corrupted"] .domain-hack-terminal { animation: none; }
}

/* Vignette d'aperçu dans la boutique et le menu Apparences. */
.shop-symbol-terminal {
  color: var(--preview-ink, #a8ffc7);
  background: var(--preview-bg, linear-gradient(#0c1e13, #020a07));
  border: 1px solid var(--preview-ink, rgba(93, 255, 157, 0.6));
  text-shadow: 0 0 10px var(--preview-ink, rgba(75, 255, 132, 0.5));
}

.shop-symbol-terminal[data-value="amber_crt"]    { --preview-ink: #ffb35c; --preview-bg: linear-gradient(#201406, #0c0601); }
.shop-symbol-terminal[data-value="ice_terminal"] { --preview-ink: #6fc8ff; --preview-bg: linear-gradient(#081626, #02070e); }
.shop-symbol-terminal[data-value="corrupted"]    { --preview-ink: #ff5f7e; --preview-bg: linear-gradient(#22060e, #0c0105); }
.shop-symbol-terminal[data-value="void_kernel"]  { --preview-ink: #c39bff; --preview-bg: linear-gradient(#100822, #030109); }

/* V106 — Sélecteur d'habillage du terminal dans le menu Apparences. */
.cosmetic-terminal-block {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.terminal-skin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
  margin-top: 9px;
}

.terminal-skin-card {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 10px 8px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.02);
  color: #dceaff;
  text-align: center;
}

.terminal-skin-card:hover,
.terminal-skin-card:focus-visible {
  border-color: rgba(120, 220, 255, 0.45);
}

.terminal-skin-card.selected {
  border-color: #58d8ff;
  background: rgba(88, 216, 255, 0.08);
}

/* Non acheté : lisible mais visiblement hors de portée. */
.terminal-skin-card.locked {
  opacity: 0.55;
}

.terminal-skin-card strong {
  font-size: 0.7rem;
  letter-spacing: 0.03em;
}

.terminal-skin-card small {
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* La pastille reprend la palette réelle de l'habillage : c'est l'aperçu. */
.terminal-skin-swatch {
  display: grid;
  place-items: center;
  width: 44px;
  height: 32px;
  border-radius: 5px;
  font-size: 1rem;
  color: var(--preview-ink, #a8ffc7);
  background: var(--preview-bg, linear-gradient(#0c1e13, #020a07));
  border: 1px solid var(--preview-ink, rgba(93, 255, 157, 0.6));
  box-shadow: inset 0 0 12px -4px var(--preview-ink, rgba(75, 255, 132, 0.6));
}

.terminal-skin-swatch[data-value="amber_crt"]    { --preview-ink: #ffb35c; --preview-bg: linear-gradient(#201406, #0c0601); }
.terminal-skin-swatch[data-value="ice_terminal"] { --preview-ink: #6fc8ff; --preview-bg: linear-gradient(#081626, #02070e); }
.terminal-skin-swatch[data-value="corrupted"]    { --preview-ink: #ff5f7e; --preview-bg: linear-gradient(#22060e, #0c0105); }
.terminal-skin-swatch[data-value="void_kernel"]  { --preview-ink: #c39bff; --preview-bg: linear-gradient(#100822, #030109); }

/* =========================================================
   V106 — LA TOUR
   Le panneau du Mode Histoire n'avait qu'un paragraphe et un bouton.
   La Tour y prend la première place : c'est elle qu'on peut jouer
   aujourd'hui, l'Aventure reste en dessous en attendant son script.
   ========================================================= */

.tower-mode-card {
  margin-bottom: 14px;
  padding: 13px;
  border: 1px solid rgba(196, 150, 255, 0.34);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(38, 22, 62, 0.72), rgba(12, 8, 22, 0.9));
  box-shadow: inset 0 0 26px rgba(150, 90, 255, 0.06);
}

.tower-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.tower-card-kicker {
  display: inline-block;
  margin-bottom: 3px;
  padding: 1px 6px;
  border: 1px solid rgba(196, 150, 255, 0.5);
  border-radius: 3px;
  color: #d8b6ff;
  font-size: 0.5rem;
  letter-spacing: 0.16em;
}

.tower-card-head strong {
  display: block;
  font-size: 1rem;
  letter-spacing: 0.06em;
}

.tower-card-head small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.58rem;
}

/* Le numéro d'étage est l'information dominante du panneau. */
.tower-floor-badge {
  display: grid;
  justify-items: center;
  min-width: 62px;
  padding: 5px 8px;
  border: 1px solid rgba(196, 150, 255, 0.42);
  border-radius: 9px;
  background: rgba(10, 6, 20, 0.7);
}

.tower-floor-label {
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.tower-floor-value {
  font: 800 1.5rem/1 "Courier New", monospace;
  color: #e5cdff;
  text-shadow: 0 0 14px rgba(170, 110, 255, 0.45);
}

.tower-card-copy {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.62rem;
  line-height: 1.45;
}

/* Échelle : elle se lit de bas en haut, comme on gravit. */
.tower-ladder {
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  margin: 11px 0 0;
  padding: 0;
  list-style: none;
}

.tower-rung {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 8px;
  border-left: 2px solid rgba(255, 255, 255, 0.1);
  color: var(--muted);
  font-size: 0.6rem;
}

.tower-rung-glyph { width: 12px; text-align: center; }

.tower-rung.cleared {
  border-left-color: rgba(120, 235, 150, 0.6);
  color: rgba(180, 245, 200, 0.85);
}

.tower-rung.current {
  border-left-color: #c496ff;
  background: rgba(150, 90, 255, 0.12);
  color: #f0e2ff;
  font-weight: 700;
}

.tower-rung-miniboss .tower-rung-glyph { color: #ffa63d; }
.tower-rung-boss .tower-rung-glyph { color: #ff5470; }

.tower-rung-boss {
  border-left-color: rgba(255, 84, 112, 0.4);
}

.tower-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.57rem;
}

.btn-tower-launch {
  margin-top: 11px;
  border-color: rgba(196, 150, 255, 0.55);
  background: rgba(150, 90, 255, 0.1);
}

.tower-reset-btn {
  margin-top: 7px;
  width: 100%;
  padding: 5px;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.14);
}

/* ---------- Écran de briefing ---------- */

.tower-briefing-card {
  max-width: 520px;
  text-align: left;
  border: 1px solid rgba(196, 150, 255, 0.45);
  background: linear-gradient(180deg, rgba(30, 18, 50, 0.97), rgba(8, 5, 16, 0.99));
}

.tower-briefing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.tower-briefing-floor {
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.tower-briefing-kind {
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid currentColor;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #a9c6ff;
}

.tower-briefing-kind[data-kind="miniboss"] { color: #ffa63d; }
.tower-briefing-kind[data-kind="boss"] { color: #ff5470; }

.tower-briefing-name {
  margin: 0 0 10px;
  font: 800 clamp(1.15rem, 3vw, 1.6rem)/1.1 "Courier New", monospace;
  letter-spacing: 0.06em;
  color: #f0e4ff;
}

/* Le lore est le seul texte long du mode : il mérite d'être lisible. */
.tower-briefing-lore {
  margin: 0 0 12px;
  padding-left: 11px;
  border-left: 2px solid rgba(196, 150, 255, 0.35);
  color: #cfc4e6;
  font-size: 0.74rem;
  line-height: 1.6;
  font-style: italic;
}

.tower-briefing-rules {
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.tower-briefing-reward {
  margin-top: 7px;
  padding: 6px 9px;
  border: 1px dashed rgba(255, 205, 92, 0.4);
  border-radius: 6px;
  color: #ffe0a0;
  font-size: 0.6rem;
}

.tower-briefing-reward.hidden { display: none; }

.tower-briefing-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 15px;
}

/* V107 — Bloc d'animation du concepteur de skins. */
.skin-designer-anim {
  padding: 10px;
  margin-bottom: 4px;
  border: 1px dashed rgba(126, 238, 255, 0.32);
  border-radius: 9px;
  background: rgba(126, 238, 255, 0.03);
}

.skin-designer-anim-head strong {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.skin-designer-anim-head small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.55rem;
  line-height: 1.35;
}

.skin-designer-anim-row {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 9px;
}

/* Damier discret : on voit tout de suite si le PNG est bien détouré. */
.skin-designer-anim-preview {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
  background-color: #0a0d14;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.04) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.04) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.04) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.04) 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0;
  image-rendering: pixelated;
}

.skin-designer-anim-fields {
  display: grid;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.skin-designer-anim-fields label {
  display: grid;
  gap: 3px;
  font-size: 0.58rem;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.skin-designer-anim-hint {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.55rem;
  line-height: 1.4;
}

/* V107 — Curseur de volume des effets, en tête des options de contrôle. */
.audio-volume-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 10px;
  margin-bottom: 4px;
  font-size: 0.68rem;
}

.audio-volume-row input[type="range"] {
  grid-column: 1 / -1;
}

/* =========================================================
   V108 — Les trois nouveaux biomes dans le panneau de lancement.
   Chaque carte porte son verbe : c'est le résumé le plus court
   de ce que le biome fait au joueur.
   ========================================================= */

.launch-biome-card strong {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}

.launch-biome-card strong em {
  font-style: normal;
  font-size: 0.52rem;
  letter-spacing: 0.12em;
  opacity: 0.8;
}

.launch-biome-card.dead-tape.selected {
  border-color: #d8d8d8;
  background: rgba(216, 216, 216, 0.07);
  box-shadow: inset 0 0 18px rgba(216, 216, 216, 0.06);
}
.launch-biome-card.dead-tape strong em { color: #d8d8d8; }
.launch-biome-icon.dead-tape { color: #d8d8d8; }

.launch-biome-card.freeze-frame.selected {
  border-color: #9ecbff;
  background: rgba(158, 203, 255, 0.08);
  box-shadow: inset 0 0 18px rgba(158, 203, 255, 0.07);
}
.launch-biome-card.freeze-frame strong em { color: #9ecbff; }
.launch-biome-icon.freeze-frame { color: #9ecbff; }

.launch-biome-card.lost-signal.selected {
  border-color: #b9c2d6;
  background: rgba(20, 22, 30, 0.9);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6);
}
.launch-biome-card.lost-signal strong em { color: #b9c2d6; }
.launch-biome-icon.lost-signal { color: #b9c2d6; }

/* Verrouillé : visible, mais clairement hors de portée. L'étage requis
   s'affiche par-dessus la carte. */
.launch-biome-card.locked {
  position: relative;
  opacity: 0.42;
  cursor: not-allowed;
}

.launch-biome-card.locked::after {
  content: "🔒 " attr(data-unlock-hint);
  position: absolute;
  right: 7px;
  bottom: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(4, 6, 12, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #e2ecff;
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .launch-biome-grid { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   V113 — FINITIONS DE TERMINAL

   Une finition n'est pas un habillage de plus : elle se pose PAR-DESSUS
   celui qui est équipé. Les cinq palettes gagnent donc chacune trois états,
   au lieu d'allonger une liste qui en comptait déjà cinq.

   Elles s'appliquent aux DEUX surfaces qui partagent la palette --term-* :
   le Terminal Hack et le registre Domain.exe. Une seule règle sert les deux.

   Contrainte de performance, comme en V109 et V112 : rien n'anime autre
   chose que transform et opacity, et aucun mode de fusion. Ces surfaces
   s'ouvrent par-dessus une arène qui tourne — c'est le pire moment pour
   demander un repaint par image.
   ========================================================================= */

.term-finish {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  /* Aucune finition équipée : la couche n'existe pas du tout. */
  display: none;
}

body[data-terminal-finish="holo"] .term-finish,
body[data-terminal-finish="glitch"] .term-finish,
body[data-terminal-finish="burn"] .term-finish {
  display: block;
}

/* ---------------- HOLOGRAMME ----------------
   Le film de sécurité collé sur un boîtier de DVD : un arc-en-ciel étroit
   traverse la surface quand on la bouge, et le texte se dédouble en couleur
   selon l'angle. Le balayage est un élément large qu'on translate — animer
   background-position aurait fait repeindre toute la dalle. */

body[data-terminal-finish="holo"] .term-finish::before {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: -130%;
  right: -130%;
  background: linear-gradient(
    108deg,
    transparent 42%,
    rgba(255, 72, 168, 0.085) 46%,
    rgba(255, 214, 92, 0.075) 48.5%,
    rgba(96, 232, 255, 0.10) 51%,
    rgba(150, 255, 176, 0.075) 53.5%,
    rgba(168, 128, 255, 0.085) 56%,
    transparent 60%
  );
  animation: term-holo-sweep 7s linear infinite;
}

/* Le réseau de diffraction : des traits très fins en biais, immobiles. Ils
   ne se voient qu'au passage de l'arc-en-ciel, exactement comme sur un
   hologramme réel. */
body[data-terminal-finish="holo"] .term-finish::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    56deg,
    rgba(255, 255, 255, 0.028) 0 1px,
    transparent 1px 5px
  );
}

@keyframes term-holo-sweep {
  from { transform: translate3d(-32%, 0, 0); }
  to   { transform: translate3d(32%, 0, 0); }
}

/* Le dédoublement chromatique du texte. Statique, donc peint une fois. */
body[data-terminal-finish="holo"] .domain-hack-terminal,
body[data-terminal-finish="holo"] .boot-codex-surface {
  text-shadow:
    1.1px 0 0 rgba(255, 60, 170, 0.42),
    -1.1px 0 0 rgba(70, 220, 255, 0.38),
    0 0 9px var(--term-glow, rgba(75, 255, 132, 0.3));
}

/* ---------------- SECTEUR DÉFECTUEUX ----------------
   Une piste rayée. L'image tient, puis quelques lignes glissent de travers
   et le signal se déchire — une seconde sur cinq, pas plus. steps(1, end)
   fait sauter la valeur d'un palier à l'autre : un décrochage est net, une
   interpolation le rendrait mou. */

body[data-terminal-finish="glitch"] .term-finish::before {
  content: "";
  position: absolute;
  inset: 0 -8%;
  opacity: 0;
  background:
    linear-gradient(180deg, transparent 0 17%, rgba(255, 62, 84, 0.16) 17% 19.4%, transparent 19.4% 100%),
    linear-gradient(180deg, transparent 0 44%, rgba(62, 188, 255, 0.14) 44% 47%, transparent 47% 100%),
    linear-gradient(180deg, transparent 0 71%, rgba(255, 255, 255, 0.10) 71% 73.2%, transparent 73.2% 100%);
  animation: term-glitch-tear 5.2s steps(1, end) infinite;
}

@keyframes term-glitch-tear {
  0%, 88% { opacity: 0; transform: translate3d(0, 0, 0); }
  89%     { opacity: 1; transform: translate3d(-9px, 0, 0); }
  90.4%   { opacity: 1; transform: translate3d(7px, -4px, 0); }
  91.6%   { opacity: 1; transform: translate3d(-4px, 3px, 0); }
  92.6%   { opacity: 0.5; transform: translate3d(2px, 0, 0); }
  93.4%, 100% { opacity: 0; transform: translate3d(0, 0, 0); }
}

/* La secousse d'ensemble accompagne la déchirure, au même rythme. */
body[data-terminal-finish="glitch"] .domain-hack-terminal,
body[data-terminal-finish="glitch"] .boot-codex-surface {
  animation: term-glitch-shift 5.2s steps(1, end) infinite;
  text-shadow:
    0.9px 0 0 rgba(255, 46, 70, 0.45),
    -0.9px 0 0 rgba(46, 200, 255, 0.4),
    0 0 7px var(--term-glow, rgba(75, 255, 132, 0.3));
}

@keyframes term-glitch-shift {
  0%, 88.6% { transform: translate3d(0, 0, 0); }
  89.2%     { transform: translate3d(3px, 0, 0); }
  90.6%     { transform: translate3d(-4px, 0, 0); }
  91.8%     { transform: translate3d(2px, 0, 0); }
  92.8%, 100% { transform: translate3d(0, 0, 0); }
}

/* ---------------- RÉMANENCE ----------------
   Un tube resté trop longtemps sur la même image. Le phosphore garde la
   trace de ce qui vient d'être affiché : le texte traîne un halo dense et
   légèrement décalé vers le bas, et la dalle garde une brûlure diffuse au
   centre — l'endroit qui a le plus servi. */

body[data-terminal-finish="burn"] .term-finish::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 62% 40% at 50% 42%,
      var(--term-halo, rgba(48, 255, 122, 0.16)),
      transparent 72%),
    linear-gradient(180deg,
      transparent 0 22%,
      var(--term-scan, rgba(122, 255, 164, 0.055)) 30% 34%,
      transparent 42% 100%);
  animation: term-burn-breathe 9s ease-in-out infinite alternate;
}

@keyframes term-burn-breathe {
  from { opacity: 0.55; }
  to   { opacity: 1; }
}

body[data-terminal-finish="burn"] .domain-hack-terminal,
body[data-terminal-finish="burn"] .boot-codex-surface {
  text-shadow:
    0 0 14px var(--term-glow, rgba(75, 255, 132, 0.3)),
    0 1.5px 5px var(--term-glow, rgba(75, 255, 132, 0.3)),
    0 3px 12px var(--term-halo, rgba(48, 255, 122, 0.16));
}

/* Mouvement réduit : les finitions gardent leur aspect, elles perdent leur
   mouvement. La déchirure du secteur défectueux disparaît entièrement —
   c'est exactement le genre de secousse que ce réglage vise. */
@media (prefers-reduced-motion: reduce) {
  .term-finish::before,
  .term-finish::after,
  body[data-terminal-finish="glitch"] .domain-hack-terminal,
  body[data-terminal-finish="glitch"] .boot-codex-surface {
    animation: none !important;
  }
  body[data-terminal-finish="glitch"] .term-finish::before { opacity: 0 !important; }
  body[data-terminal-finish="burn"] .term-finish::before { opacity: 0.8 !important; }
}


/* =========================================================================
   V113 — L'onglet SUPPLÉMENTS de la Boutique

   Même coquille que le reste du magasin, mais rien ne s'y achète : la ligne
   du bas dit toujours ce qu'on obtient, jamais ce qu'on paie.
   ========================================================================= */

.shop-shell.supplements-view .shop-feature-strip,
.shop-shell.supplements-view .shop-player-picker {
  display: none;
}

.supplement-band {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 214, 128, 0.28);
  border-radius: 10px;
  background: rgba(38, 28, 8, 0.42);
}

.supplement-band strong {
  font-size: 12px;
  letter-spacing: 0.18em;
  color: #ffe6a8;
}

.supplement-band small {
  font-size: 11px;
  color: rgba(255, 232, 190, 0.7);
}

.supplement-progress {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 6px 0 2px;
}

.supplement-progress-bar {
  position: relative;
  flex: 1 1 auto;
  height: 5px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.09);
}

.supplement-progress-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  border-radius: 3px;
  background: linear-gradient(90deg, #ffb52e, #ffe6a8);
}

.supplement-card.owned .supplement-progress-bar i {
  background: linear-gradient(90deg, #5dff9d, #caffd9);
}

.supplement-progress span {
  min-width: 62px;
  text-align: right;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255, 236, 200, 0.72);
}

.supplement-state {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(255, 236, 200, 0.66);
}

.supplement-card.owned .supplement-state { color: #7dffb0; }

/* La pastille de finition montre la palette équipée, pas une couleur fixe :
   on choisit une finition en la voyant sur son propre terminal. */
.supplement-finish-symbol {
  background: linear-gradient(var(--term-bg-top, rgba(12, 30, 19, 0.96)),
                              var(--term-bg-bottom, rgba(2, 10, 7, 0.985)));
  color: var(--term-accent, #77ffa6);
  border: 1px solid var(--term-border, rgba(93, 255, 157, 0.72));
  text-shadow: 0 0 10px var(--term-glow, rgba(75, 255, 132, 0.3));
}

/* Bouton discret posé dans une ligne d'aide, pour ne pas voler l'attention
   au réglage qu'il accompagne. */
.link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  opacity: 0.85;
}

.link-btn:hover,
.link-btn:focus-visible { opacity: 1; }

/* =========================================================================
   V114 — Taille d'affichage des skins intégrés

   Le bloc vit dans le concepteur de skins, juste au-dessus de la
   bibliothèque : on règle la taille là où on regarde déjà les skins.
   ========================================================================= */

.skin-size-block {
  margin: 16px 0 4px;
  padding: 12px 14px;
  border: 1px solid rgba(160, 200, 255, 0.16);
  border-radius: 10px;
  background: rgba(10, 16, 28, 0.42);
}

.skin-size-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  margin-top: 10px;
}

/* Le damier dit tout de suite ce qui est dessiné et ce qui est vide —
   sans lui, un skin sombre sur fond sombre ne se juge pas. */
#skinSizePreview {
  flex: 0 0 auto;
  border-radius: 8px;
  border: 1px solid rgba(160, 200, 255, 0.2);
  background-color: #0a0f18;
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, 0.035) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 255, 255, 0.035) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.035) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.035) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
}

.skin-size-controls {
  flex: 1 1 240px;
  display: grid;
  gap: 9px;
  min-width: 220px;
}

.skin-size-controls > label {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px 10px;
  font-size: 12px;
}

.skin-size-controls > label > select,
.skin-size-controls > label > input[type="range"] {
  grid-column: 1 / -1;
}

.skin-size-controls > label.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.skin-size-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.skin-size-actions button {
  padding: 6px 10px;
  font-size: 11px;
  letter-spacing: 0.06em;
}

/* =========================================================================
   V114 — Boucles de fond des menus de mode

   La transition se terminait sur son dernier plan et le menu s'ouvrait sur
   un fond fixe. La boucle reprend le fil : le décor continue derrière le
   panneau.

   Contrainte de performance, comme depuis la V109 : aucun mode de fusion,
   aucun filtre. Le voile est un simple dégradé posé au-dessus — c'est ce
   qui garde le texte lisible sans faire repeindre la vidéo.
   ========================================================================= */

.mode-backdrop {
  position: fixed;
  inset: 0;
  /* 2 : au-dessus de la page de jeu (1), sous toutes les modales (20 et
     plus). Voir la note V116 plus bas — un décor ne remonte jamais. */
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  background: #05070d;
}

/* V115 — Garde-fou. La couche est opaque et couvre tout l'écran : si elle
   restait allumée par erreur, le jeu deviendrait injouable. Elle ne
   s'affiche donc QUE si le corps porte sa classe, en plus du retrait de
   « hidden ». Il faut désormais deux erreurs simultanées pour la voir
   apparaître à tort, pas une. */
.mode-backdrop { display: none; }
body.mode-backdrop-active .mode-backdrop { display: block; }
.mode-backdrop.hidden { display: none !important; }

.mode-backdrop-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Le décor ne doit jamais rivaliser avec le panneau posé dessus. */
  opacity: 0.62;
}

/* Voile : plus dense au centre, là où le panneau se pose, et plus léger sur
   les bords pour laisser respirer l'image. */
.mode-backdrop-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 64% 78% at 50% 50%,
      rgba(4, 6, 12, 0.74) 0%,
      rgba(4, 6, 12, 0.5) 55%,
      rgba(4, 6, 12, 0.24) 100%),
    linear-gradient(180deg,
      rgba(4, 6, 12, 0.55) 0%,
      transparent 22%,
      transparent 76%,
      rgba(4, 6, 12, 0.6) 100%);
}

/* V116 — LA COUCHE PASSE SOUS TOUTES LES MODALES.

   Erreur de la V114 : pour que le menu de mode ne soit pas recouvert, je
   remontais #networkModal à 60. Or le panneau « Configurer l'arène » est à
   42. Le menu de mode passait donc DEVANT le panneau de préparation, et
   tous les clics atterrissaient dessus : impossible de lancer une partie,
   ni en Classique ni en Chaos.

   La bonne place pour un décor, c'est SOUS tout le monde. L'empilement
   d'origine du jeu est ainsi :

     .app-shell          1     la page de jeu
     #networkModal      20     le menu du mode
     #launchSetupModal  42     la préparation de la partie
     #shopModal      10040     la Boutique

   La couche se pose donc à 2 : au-dessus de la page, sous chaque panneau.
   Plus aucune modale n'a besoin d'être déplacée, et l'ordre du jeu reste
   celui qu'il a toujours eu. */

/* Le fond opaque des panneaux s'allège, sinon la boucle serait entièrement
   cachée par ce qu'elle est censée accompagner. */
body.mode-backdrop-active #networkModal,
body.mode-backdrop-active .shop-layer { background: transparent; }

/* PAS de backdrop-filter ici. Un flou d'arrière-plan par-dessus une
   vidéo qui joue se recalcule à chaque image : c'est précisément le genre de
   coût qui avait fait ramer le jeu en V109. Un fond dense fait le même
   travail pour rien. */
body.mode-backdrop-active #networkModal .network-card,
body.mode-backdrop-active .shop-shell {
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.72);
}

/* =========================================================================
   V114 — L'ARÈNE DANS LE TÉLÉVISEUR

   Le menu se joue sur un tube filmé ; l'arène se jouait dans un cadre
   dessiné. Elle entre dans la même télévision.

   La géométrie vient d'une mesure, pas d'un réglage à l'œil : l'image sur
   fond de chrominance a donné les quatre coins, le bombement des quatre
   arêtes et les huit rayons de coin, à moins d'un pixel près.

   Trois calques par-dessus le canvas, dans cet ordre :
     · .tv-mask   les croissants entre le rectangle du canvas et la dalle
                  courbe, peints en noir de masque cathodique ;
     · .tv-glass  le verre : reflets du salon, vignette de tube, stries
                  courbes ;
     · rien d'autre. Aucun mode de fusion, aucun filtre — règle V109.
   ========================================================================= */

.tv-stage {
  position: relative;
  width: 100%;
  line-height: 0;
}

.tv-stage-shell {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

/* Le canvas occupe le rectangle englobant de la dalle bombée : les arêtes
   bombent vers l'EXTÉRIEUR du quadrilatère des coins, il faut donc leur
   laisser la place. */
.tv-stage > .tv-screen-content {
  position: absolute;
  /* V118 — Ces quatre valeurs sont posées par updateTvArenaMask(), qui les
     déduit du contour de la dalle. Les valeurs de repli sont la géométrie
     figée : si le script ne tourne pas, rien ne bouge. */
  left: var(--tv-box-x, 8.80%);
  top: var(--tv-box-y, 3.45%);
  width: var(--tv-box-w, 82.87%);
  height: var(--tv-box-h, 88.62%);
  display: flex;
  flex-direction: column;
  line-height: normal;
}

.tv-stage .crt-frame {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  /* Le cadre dessiné n'a plus lieu d'être : c'est la photo qui le fournit. */
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #000;
  overflow: hidden;
}

.tv-stage .crt-frame::before,
.tv-stage .crt-frame::after { display: none !important; }

.tv-stage .crt-frame {
  display: grid;
  place-items: center;
}

/* L'arène garde ses proportions. On dimensionne LE CANVAS, jamais son
   contenu : object-fit laisserait la boîte de l'élément plus grande que
   l'image, et canvasPosition() lit cette boîte pour placer la souris —
   chaque clic tomberait à côté. */
.tv-stage .crt-frame > canvas {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 960 / 540;
  object-fit: fill;
}

/* Les croissants entre le rectangle du canvas et la dalle courbe.
   POURQUOI UN CALQUE ET PAS UN DÉCOUPAGE DU CANVAS : un clip-path coupe
   aussi le test de survol, et les quatre coins de l'arène sont exactement
   là où on clique pour revendiquer un corner. Ce calque ne reçoit aucun
   événement, donc pas un clic n'est perdu. */
.tv-mask {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, #05070a, #000 70%);
}

/* Le verre. Statique, donc peint une seule fois : ces surfaces ne coûtent
   rien à l'animation. */
.tv-glass {
  position: absolute;
  left: var(--tv-box-x, 8.80%);
  top: var(--tv-box-y, 3.45%);
  width: var(--tv-box-w, 82.87%);
  height: var(--tv-box-h, 88.62%);
  z-index: 4;
  pointer-events: none;
  background:
    /* 1. Stries de tube, courbées comme sur le Codex : elles se replient
       aux extrémités, c'est le repère optique le plus fort du galbe. */
    repeating-radial-gradient(
      ellipse 150% 420% at 50% 100%,
      transparent 0 2px,
      rgba(255, 255, 255, 0.028) 2px 3px
    ),
    /* 2. Reflet de fenêtre en haut à gauche, comme sur la photo. */
    radial-gradient(ellipse 38% 26% at 12% 9%,
      rgba(168, 200, 246, 0.055), transparent 70%),
    /* 3. Voile diagonal : la pièce dans le verre. */
    linear-gradient(114deg,
      rgba(255, 255, 255, 0.035) 0%,
      transparent 24%,
      transparent 64%,
      rgba(255, 255, 255, 0.022) 86%,
      transparent 100%),
    /* 4. Vignette : les coins d'un masque cathodique sont toujours plus
       sombres que le centre. */
    radial-gradient(ellipse 76% 72% at 50% 50%,
      transparent 56%,
      rgba(0, 0, 0, 0.22) 86%,
      rgba(0, 0, 0, 0.42) 100%);
}

/* Sous le téléviseur, les deux calques CRT d'origine feraient doublon avec
   le verre : on garde les stries, on retire le halo qui redessinait un
   bord. */
.tv-stage .crt-glow { display: none; }
.tv-stage .scanlines { opacity: 0.34; }

/* La coquille ne se met plus à sa largeur naturelle : le plateau porte la
   photo, c'est elle qui donne la taille. */
#fullscreenTvShell:has(.tv-stage) { width: 100%; }

/* V115 — Bouton de son de l'introduction.
   Il n'apparaît que si le navigateur a refusé le son : sans geste préalable
   sur la page, aucun ne l'autorise, et l'introduction est la première chose
   affichée. Un clic dessus EST ce geste. */
.boot-intro-sound {
  position: absolute;
  left: 50%;
  bottom: 74px;
  transform: translateX(-50%);
  z-index: 5;
  padding: 9px 18px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(8, 10, 18, 0.72);
  color: #eaf2ff;
  font-size: 12px;
  letter-spacing: 0.14em;
  cursor: pointer;
  animation: boot-intro-sound-in 500ms ease 700ms both;
}

.boot-intro-sound:hover,
.boot-intro-sound:focus-visible {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(18, 22, 34, 0.86);
}

@keyframes boot-intro-sound-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* =========================================================================
   V117 — LE HUD DANS L'ÉCRAN, EN PLEIN ÉCRAN

   En plein écran, le tableau des scores et la barre d'actions restaient
   dans la page : on jouait sans voir ni les points, ni les coins, ni le
   menu. Ils sont déplacés dans la dalle du téléviseur, au-dessus de
   l'arène, et tout tient dans le tube.

   La contrainte de forme : le masque courbe ronge les quatre coins de la
   dalle. Le HUD doit donc rester en retrait des bords, sinon le coin d'une
   carte joueur passe sous le galbe.
   ========================================================================= */

/* Hors plein écran, l'emplacement n'existe pas : le cadre occupe seul la
   dalle, exactement comme avant. */
.tv-hud-slot { display: none; }

body.tv-hud-mounted .tv-hud-slot {
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.5vh, 8px);
  flex: 0 0 auto;
  /* Retrait horizontal : le galbe mange les coins hauts de la dalle. */
  padding: clamp(6px, 1.4vh, 18px) clamp(14px, 3.2%, 46px) 0;
  min-height: 0;
}

/* Le plateau se cale sur la hauteur de l'écran plutôt que sur la largeur de
   la page : c'est la hauteur qui manque en plein écran. */
.arena-fullscreen-stage:fullscreen .tv-stage,
.arena-fullscreen-stage:-webkit-full-screen .tv-stage,
.arena-fullscreen-stage.arena-fullscreen-fallback .tv-stage {
  width: min(100vw, calc(100dvh * 1920 / 1072));
  max-height: 100dvh;
}

/* Les règles de plein écran d'origine étiraient le cadre à 100vw × 100dvh
   et faisaient tenir le canvas en « contain ». Dans le téléviseur, c'est le
   conteneur qui commande. */
.arena-fullscreen-stage:fullscreen .tv-stage .crt-frame,
.arena-fullscreen-stage:-webkit-full-screen .tv-stage .crt-frame,
.arena-fullscreen-stage.arena-fullscreen-fallback .tv-stage .crt-frame {
  width: auto;
  height: auto;
  display: block;
}

.arena-fullscreen-stage:fullscreen .tv-stage .crt-frame > canvas,
.arena-fullscreen-stage:-webkit-full-screen .tv-stage .crt-frame > canvas,
.arena-fullscreen-stage.arena-fullscreen-fallback .tv-stage .crt-frame > canvas {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 960 / 540;
  object-fit: fill;
}

/* Le décalage et l'échelle du salon dessiné ne s'appliquent pas au
   téléviseur photographié : il tient toute la place. */
.arena-fullscreen-stage:fullscreen #fullscreenTvShell,
.arena-fullscreen-stage:-webkit-full-screen #fullscreenTvShell,
.arena-fullscreen-stage.arena-fullscreen-fallback #fullscreenTvShell {
  transform: none;
  width: min(100vw, calc(100dvh * 1920 / 1072));
}

.arena-fullscreen-stage:fullscreen #fullscreenTvShell::before,
.arena-fullscreen-stage:-webkit-full-screen #fullscreenTvShell::before,
.arena-fullscreen-stage.arena-fullscreen-fallback #fullscreenTvShell::before {
  display: none;
}

/* --- Le HUD compacté pour tenir dans la dalle --- */

body.tv-hud-mounted .tv-hud-slot .top-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin: 0;
}

body.tv-hud-mounted .tv-hud-slot .top-actions button {
  padding: clamp(3px, 0.6vh, 7px) clamp(7px, 1vw, 13px);
  font-size: clamp(8px, 1.05vh, 12px);
}

body.tv-hud-mounted .tv-hud-slot .scoreboard {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(5px, 0.9vw, 14px);
  margin: 0;
  width: 100%;
}

/* Quatre joueurs : deux cartes de plus, la grille s'élargit. */
body.tv-hud-mounted .tv-hud-slot .scoreboard:has(.player-three:not(.hidden)) {
  grid-template-columns: repeat(5, 1fr);
}

body.tv-hud-mounted .tv-hud-slot .player-card,
body.tv-hud-mounted .tv-hud-slot .match-card {
  padding: clamp(4px, 0.8vh, 10px) clamp(6px, 0.9vw, 13px);
  font-size: clamp(8px, 1.1vh, 12px);
}

body.tv-hud-mounted .tv-hud-slot .player-card strong {
  font-size: clamp(9px, 1.2vh, 13px);
}

body.tv-hud-mounted .tv-hud-slot .score-line {
  font-size: clamp(11px, 1.9vh, 20px);
}

body.tv-hud-mounted .tv-hud-slot #timerDisplay {
  font-size: clamp(13px, 2.4vh, 26px);
}

/* Les détails techniques n'ont pas leur place dans un tube : ils rallongent
   la colonne et volent des pixels à l'arène. */
body.tv-hud-mounted .tv-hud-slot .match-readout { display: none; }

/* La barre du haut se vide de son contenu déplacé : sans cela elle laisse
   un bloc vide au-dessus du téléviseur. */
body.tv-hud-mounted .topbar { display: none; }

/* V117b — Le HUD rendait un tiers de la dalle inutilisable.

   Mesuré : 210 px de HUD sur 634 px de dalle, ce qui laissait à l'arène une
   hauteur de 392 px — et comme elle garde ses proportions, une largeur de
   696 px dans une dalle large de 1061. Un tiers du tube perdu de chaque
   côté en bandes noires.

   On ne retire aucune information : on resserre. Cibles mesurées une par
   une — la bande de coins et le bouton Domain pesaient à eux seuls 68 des
   129 px d'une carte joueur. */

body.tv-hud-mounted .tv-hud-slot {
  padding-top: clamp(4px, 0.8vh, 9px);
  gap: clamp(2px, 0.35vh, 5px);
}

body.tv-hud-mounted .tv-hud-slot .top-actions button {
  padding: 2px clamp(6px, 0.9vw, 11px);
  font-size: clamp(7px, 0.95vh, 11px);
  line-height: 1.5;
}

body.tv-hud-mounted .tv-hud-slot .player-card,
body.tv-hud-mounted .tv-hud-slot .match-card {
  padding: clamp(3px, 0.5vh, 6px) clamp(5px, 0.8vw, 11px);
  gap: clamp(2px, 0.4vh, 5px);
}

/* La bande de coins : ce qui compte est le compte, pas la taille des cases. */
body.tv-hud-mounted .tv-hud-slot .corner-strip {
  gap: clamp(2px, 0.4vw, 5px);
}

body.tv-hud-mounted .tv-hud-slot .corner-strip > * {
  padding: clamp(1px, 0.25vh, 3px) clamp(2px, 0.3vw, 4px);
  font-size: clamp(6px, 0.85vh, 9px);
  line-height: 1.25;
  min-height: 0;
}

body.tv-hud-mounted .tv-hud-slot .domain-activate-btn {
  padding: clamp(2px, 0.35vh, 4px) clamp(5px, 0.8vw, 10px);
  font-size: clamp(7px, 0.95vh, 10px);
  line-height: 1.4;
}

/* Le message de manche tient sur une ligne : deux lignes décalaient tout le
   tableau vers le bas au moment précis où l'arène en a le plus besoin. */
body.tv-hud-mounted .tv-hud-slot #roundMessage {
  font-size: clamp(8px, 1.05vh, 12px);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* V117c — La proportion de l'arène, par la règle des éléments remplacés.

   Deux tentatives ratées avant celle-ci, et elles valent d'être notées.
   aspect-ratio sur le cadre en colonne flex donnait une largeur 2 % trop
   grande ; en grille, width:auto + justify-self:center ramenait le cadre à
   la taille intrinsèque du canvas, 960 px, et le plein écran affichait une
   arène plus petite qu'en fenêtre.

   La bonne réponse n'avait besoin d'aucune des deux. Un canvas EST un
   élément remplacé : il porte déjà sa proportion (960 × 540). height:100 %
   avec width:auto lui donne exactement height × 16/9, et max-width:100 %
   fait rétrécir la hauteur en conséquence quand la place manque — c'est la
   règle de dimensionnement des éléments remplacés, pas un contournement.

   Et surtout : la boîte de l'élément reste l'image affichée. object-fit
   aurait laissé la boîte plus grande que l'image, et canvasPosition() lit
   cette boîte pour placer la souris — chaque clic serait tombé à côté. */
.tv-stage .crt-frame {
  display: grid;
  place-items: center;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  align-self: auto;
  justify-self: auto;
  margin-inline: 0;
}

.tv-stage .crt-frame > canvas,
.arena-fullscreen-stage:fullscreen .tv-stage .crt-frame > canvas,
.arena-fullscreen-stage:-webkit-full-screen .tv-stage .crt-frame > canvas,
.arena-fullscreen-stage.arena-fullscreen-fallback .tv-stage .crt-frame > canvas {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  object-fit: fill;
}

/* =========================================================================
   V119 — LE HUD DEVIENT RÉGLABLE

   Tout ce qui décide de sa place dans la dalle passe en variables, pour que
   l'outil de calibrage (?calib=1, cible « HUD ») puisse le poser en direct.

   Les pourcentages sont relatifs à la LARGEUR de la dalle, y compris pour
   les valeurs verticales : c'est la règle du CSS pour les marges et les
   retraits, et elle a l'avantage de faire suivre le HUD proportionnellement
   quand le téléviseur change de taille.
   ========================================================================= */

body.tv-hud-mounted .tv-hud-slot {
  /* zoom, et pas transform : zoom met la mise en page à l'échelle, donc la
     colonne récupère la hauteur réelle du HUD. Un transform la laisserait
     croire qu'il occupe toujours sa taille d'origine. */
  zoom: var(--hud-scale, 1);
  padding:
    var(--hud-pad-top, 0.9%)
    var(--hud-pad-x, 3.2%)
    0;
  margin-bottom: var(--hud-gap, 1%);
  gap: var(--hud-row-gap, 0.5%);
  opacity: var(--hud-opacity, 1);
}

body.tv-hud-mounted .tv-hud-slot .scoreboard {
  gap: var(--hud-cards-gap, 0.9%);
}

body.tv-hud-mounted .tv-hud-slot .player-card,
body.tv-hud-mounted .tv-hud-slot .match-card {
  padding: var(--hud-card-pad-y, 0.55%) var(--hud-card-pad-x, 0.85%);
  border-radius: var(--hud-card-radius, 8px);
}

/* Le HUD en bas de la dalle plutôt qu'en haut. L'ordre suffit : la colonne
   est un flex, et le cadre de l'arène garde sa croissance. */
body.tv-hud-mounted .tv-screen-content.hud-bottom .tv-hud-slot { order: 2; }
body.tv-hud-mounted .tv-screen-content.hud-bottom .crt-frame { order: 1; }

body.tv-hud-mounted .tv-screen-content.hud-bottom .tv-hud-slot {
  padding: 0 var(--hud-pad-x, 3.2%) var(--hud-pad-top, 0.9%);
  margin-bottom: 0;
  margin-top: var(--hud-gap, 1%);
}

/* =========================================================================
   V120 — Contours du HUD et de l'arène

   La dalle a des coins arrondis et des arêtes bombées ; le HUD et l'arène
   sont des rectangles à angles droits. Une marge déplace un bord, elle ne
   le courbe pas : il fallait donner à chacun sa forme.

   Deux techniques, et la différence est délibérée. Le HUD est DÉCOUPÉ : ses
   coins ne contiennent que des fonds de carte. L'arène ne l'est PAS — un
   clip-path coupe aussi le test de survol, et les quatre coins de l'arène
   sont exactement là où on clique pour revendiquer un corner. C'est un
   calque sans événements qui peint les croissants entre le rectangle et la
   forme voulue, comme le masque de la dalle.
   ========================================================================= */

.tv-arena-mask {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  /* Même noir que le masque de la dalle : les deux doivent se confondre. */
  background: radial-gradient(ellipse 70% 60% at 50% 50%, #05070a, #000 70%);
}

.tv-arena-mask[hidden] { display: none !important; }

/* Le découpage du HUD ne doit pas rogner ce qui se clique : les boutons
   d'action se replient vers le centre quand un contour est actif. */
body.tv-hud-mounted .tv-hud-slot {
  --hud-safe-x: 0%;
  padding-left: calc(var(--hud-pad-x, 3.2%) + var(--hud-safe-x));
  padding-right: calc(var(--hud-pad-x, 3.2%) + var(--hud-safe-x));
}

/* V120b — Le découpage doit mordre sur les CARTES, pas sur le vide.

   Le retrait du HUD était un padding : la boîte du bloc allait donc jusqu'au
   bord de la dalle, et le clip-path taillait dans la marge sans jamais
   toucher une carte. En marge, la boîte épouse le contenu et le contour
   agit là où on le voit. Le rendu est identique — le bloc n'a pas de fond
   propre — mais la zone découpée n'est plus la même. */
body.tv-hud-mounted .tv-hud-slot {
  padding: 0;
  margin:
    var(--hud-pad-top, 0.9%)
    calc(var(--hud-pad-x, 3.2%) + var(--hud-safe-x, 0%))
    var(--hud-gap, 1%);
}

body.tv-hud-mounted .tv-screen-content.hud-bottom .tv-hud-slot {
  padding: 0;
  margin:
    var(--hud-gap, 1%)
    calc(var(--hud-pad-x, 3.2%) + var(--hud-safe-x, 0%))
    var(--hud-pad-top, 0.9%);
}


/* ==========================================================================
   V121 — HABILLAGE « ARCADE RÉTRO »

   Tout ce qui suit est enfermé dans body[data-ui-skin="arcade"]. Aucune règle
   d'origine n'est modifiée : reposer l'attribut sur "legacy" rend l'ancienne
   interface au pixel près. C'est la seule façon de garantir un retour en
   arrière — repeindre par-dessus laisserait toujours une trace.

   LA SOURCE : l'écran d'accueil du jeu. Un téléviseur cathodique posé sur du
   sable, un coucher de soleil rayé de bandes horizontales, une enseigne néon
   rose et cyan au-dessus. Trois motifs en sortent, et rien d'autre :

     LE SOLEIL      un dégradé jaune → orange → rose, coupé de bandes
                    horizontales. Il sert de bandeau de titre.
     LE NÉON        un trait fin doublé d'un halo extérieur, jamais un aplat.
     LE BOÎTIER     un plastique violet très sombre avec un liseré clair sur
                    l'arête haute, comme le bord d'un téléviseur.

   COÛT — les règles de la V109 tiennent :
     · aucun filter, backdrop-filter ni mix-blend-mode ;
     · les animations ne touchent que opacity et transform ;
     · les stries sont un dégradé répété, pas une image.

   RÉGLABLE : --arc-neon (intensité des halos) et --arc-scan (opacité des
   stries) sont écrits par les Options. À --arc-neon: 0, il ne reste que le
   trait ; à --arc-scan: 0, les stries disparaissent.
   ========================================================================== */

body[data-ui-skin="arcade"] {
  --arc-neon: 1;
  --arc-scan: 1;

  --arc-ink: #ffeafc;
  --arc-ink-soft: rgba(255, 213, 244, 0.72);
  --arc-ink-faint: rgba(228, 190, 240, 0.5);

  --arc-pink: #ff3d9a;
  --arc-pink-hot: #ff2fb4;
  --arc-pink-pale: #ffa6e2;
  --arc-cyan: #4fd8ff;
  --arc-amber: #ff9d4a;
  --arc-gold: #ffd76a;
  --arc-violet: #8a5cff;

  --arc-night: #150a26;
  --arc-night-deep: #09041a;
  --arc-line: rgba(255, 92, 178, 0.34);
  --arc-line-soft: rgba(160, 120, 220, 0.2);

  --arc-sun: linear-gradient(
    180deg,
    var(--arc-gold) 0%,
    var(--arc-amber) 32%,
    var(--arc-pink) 70%,
    #cf1a86 100%
  );
  /* Les bandes du soleil de l'affiche : des vides horizontaux, pas des traits. */
  --arc-sun-bands: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0 3px,
    rgba(9, 4, 26, 0.82) 3px 5px
  );
  --arc-bezel: linear-gradient(
    180deg,
    rgba(74, 38, 108, 0.6) 0%,
    rgba(26, 11, 48, 0.96) 24%,
    rgba(12, 5, 26, 0.98) 100%
  );

  --arc-pixel: "Press Start 2P", "Courier New", monospace;
}

body[data-ui-skin="arcade"] {
  background:
    radial-gradient(ellipse 120% 70% at 50% 108%, rgba(255, 61, 154, 0.16) 0%, transparent 62%),
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(122, 75, 255, 0.18) 0%, transparent 66%),
    linear-gradient(180deg, #100722 0%, #0a0418 55%, #050210 100%);
  color: var(--arc-ink);
}

/* ---------- le bandeau de titre ---------- */

body[data-ui-skin="arcade"] .topbar h1 {
  font-family: var(--arc-pixel);
  font-size: clamp(11px, 1.35vw, 17px);
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: #fff2fb;
  text-shadow:
    0 0 calc(6px * var(--arc-neon)) rgba(255, 61, 154, calc(0.95 * var(--arc-neon))),
    0 0 calc(18px * var(--arc-neon)) rgba(255, 47, 180, calc(0.55 * var(--arc-neon))),
    0 0 calc(40px * var(--arc-neon)) rgba(138, 92, 255, calc(0.35 * var(--arc-neon)));
}

body[data-ui-skin="arcade"] .subtitle {
  color: var(--arc-amber);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.74rem;
  text-shadow: 0 0 calc(10px * var(--arc-neon)) rgba(255, 157, 74, calc(0.5 * var(--arc-neon)));
}

/* ---------- les touches ---------- */

/* Les zones cliquables de l'écran d'accueil sont volontairement sans rendu
   (V95/V96) : elles ne doivent pas devenir des touches. D'où l'énumération
   des conteneurs plutôt qu'une règle sur « button ». */
body[data-ui-skin="arcade"] .app-shell button,
body[data-ui-skin="arcade"] .modal button,
body[data-ui-skin="arcade"] .corner-domain-layer button,
body[data-ui-skin="arcade"] .domain-hack-modal button,
body[data-ui-skin="arcade"] .shop-layer button {
  border-radius: 3px;
  border: 1px solid var(--arc-line);
  background: var(--arc-bezel);
  color: var(--arc-ink);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.78rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -2px 0 rgba(0, 0, 0, 0.5);
  transition: transform 90ms ease-out, box-shadow 140ms ease-out, border-color 140ms ease-out;
}

body[data-ui-skin="arcade"] .app-shell button:hover,
body[data-ui-skin="arcade"] .modal button:hover,
body[data-ui-skin="arcade"] .corner-domain-layer button:hover,
body[data-ui-skin="arcade"] .domain-hack-modal button:hover,
body[data-ui-skin="arcade"] .shop-layer button:hover,
body[data-ui-skin="arcade"] .app-shell button:focus-visible,
body[data-ui-skin="arcade"] .modal button:focus-visible,
body[data-ui-skin="arcade"] .corner-domain-layer button:focus-visible,
body[data-ui-skin="arcade"] .domain-hack-modal button:focus-visible,
body[data-ui-skin="arcade"] .shop-layer button:focus-visible {
  border-color: var(--arc-cyan);
  background: var(--arc-bezel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 0 rgba(0, 0, 0, 0.5),
    0 0 calc(14px * var(--arc-neon)) rgba(79, 216, 255, calc(0.42 * var(--arc-neon)));
}

/* Une touche s'enfonce. Un décalage d'un pixel suffit à le dire. */
body[data-ui-skin="arcade"] .app-shell button:active,
body[data-ui-skin="arcade"] .modal button:active,
body[data-ui-skin="arcade"] .corner-domain-layer button:active,
body[data-ui-skin="arcade"] .domain-hack-modal button:active,
body[data-ui-skin="arcade"] .shop-layer button:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.62);
}

body[data-ui-skin="arcade"] .primary-btn {
  border-color: rgba(255, 61, 154, 0.75);
  color: #fff;
  text-shadow: 0 0 calc(10px * var(--arc-neon)) rgba(255, 61, 154, calc(0.8 * var(--arc-neon)));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 0 rgba(0, 0, 0, 0.5),
    0 0 calc(18px * var(--arc-neon)) rgba(255, 61, 154, calc(0.34 * var(--arc-neon)));
}

/* ---------- les panneaux : un boîtier de borne ---------- */

body[data-ui-skin="arcade"] .player-card,
body[data-ui-skin="arcade"] .match-card,
body[data-ui-skin="arcade"] .controls-card,
body[data-ui-skin="arcade"] .settings-panel,
body[data-ui-skin="arcade"] .modal-card {
  border: 1px solid var(--arc-line-soft);
  border-radius: 4px;
  background: var(--arc-bezel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 0 calc(20px * var(--arc-neon)) rgba(255, 61, 154, calc(0.12 * var(--arc-neon))),
    0 12px 30px rgba(0, 0, 0, 0.55);
}

/* Les stries. Un calque inerte : elles ne doivent jamais avaler un clic. */
body[data-ui-skin="arcade"] .player-card::after,
body[data-ui-skin="arcade"] .match-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: calc(0.5 * var(--arc-scan));
  background: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0 2px,
    rgba(0, 0, 0, 0.32) 2px 3px
  );
}

body[data-ui-skin="arcade"] .match-card {
  position: relative;
  overflow: hidden;
}

/* Le liseré du joueur devient un vrai néon : trait net, halo dehors. */
body[data-ui-skin="arcade"] .player-card::before {
  height: 2px;
  opacity: 1;
  box-shadow:
    0 0 calc(8px * var(--arc-neon)) currentColor,
    0 0 calc(22px * var(--arc-neon)) currentColor;
}

/* ---------- le score, en chiffres de borne ---------- */

body[data-ui-skin="arcade"] .player-card .player-title strong {
  font-family: var(--arc-pixel);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  color: var(--arc-ink);
}

body[data-ui-skin="arcade"] .score-line {
  font-family: var(--arc-pixel);
  font-size: 0.95rem;
  color: #fff;
  text-shadow: 0 0 calc(12px * var(--arc-neon)) currentColor;
}

body[data-ui-skin="arcade"] .cooldown-line {
  color: var(--arc-ink-faint);
  letter-spacing: 0.03em;
}

body[data-ui-skin="arcade"] #timerDisplay {
  font-family: var(--arc-pixel);
  font-size: 1.05rem;
  color: var(--arc-gold);
  text-shadow:
    0 0 calc(10px * var(--arc-neon)) rgba(255, 215, 106, calc(0.85 * var(--arc-neon))),
    0 0 calc(28px * var(--arc-neon)) rgba(255, 157, 74, calc(0.45 * var(--arc-neon)));
}

/* Le bandeau soleil derrière le chronomètre : la signature de l'affiche. */
body[data-ui-skin="arcade"] .match-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  z-index: 0;
  pointer-events: none;
  background: var(--arc-sun-bands), var(--arc-sun);
  opacity: 0.9;
  box-shadow: 0 0 calc(16px * var(--arc-neon)) rgba(255, 100, 140, calc(0.4 * var(--arc-neon)));
}

body[data-ui-skin="arcade"] #roundMessage {
  color: var(--arc-ink);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

/* ---------- les coins : quatre lampes de tableau ---------- */

/* Pas de fonte à pixels ici : les chevrons des coins (↖ ↗ ↘ ↙) n'existent
   pas dans Press Start 2P, et le navigateur irait les chercher glyphe par
   glyphe dans une autre fonte — une pastille dépareillée sur quatre. */
body[data-ui-skin="arcade"] .corner-chip {
  border-radius: 2px;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(9, 4, 26, 0.72);
  color: rgba(190, 160, 220, 0.6);
  font-size: 0.6rem;
  letter-spacing: 0.02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Une lampe allumée éclaire aussi autour d'elle, sinon c'est une case cochée. */
body[data-ui-skin="arcade"] .corner-chip.active {
  box-shadow:
    inset 0 0 10px rgba(255, 255, 255, 0.14),
    0 0 calc(12px * var(--arc-neon)) currentColor;
}

/* ---------- le bouton Domain.exe ---------- */

body[data-ui-skin="arcade"] .domain-activate-btn {
  border-radius: 2px;
  font-family: var(--arc-pixel);
  font-size: 0.46rem;
  letter-spacing: 0.06em;
  padding: 9px 8px;
  background: linear-gradient(180deg, rgba(40, 16, 62, 0.9), rgba(10, 4, 22, 0.96));
}

body[data-ui-skin="arcade"] .domain-activate-btn.ready {
  border-color: var(--arc-cyan);
  color: #eafcff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 calc(18px * var(--arc-neon)) rgba(79, 216, 255, calc(0.45 * var(--arc-neon)));
}

body[data-ui-skin="arcade"] .domain-activate-btn.active {
  border-color: var(--arc-pink-hot);
  color: #fff1fa;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 calc(22px * var(--arc-neon)) rgba(255, 47, 180, calc(0.55 * var(--arc-neon)));
}

/* ---------- la pastille de connexion ---------- */

body[data-ui-skin="arcade"] .status-badge {
  border-radius: 2px;
  font-family: var(--arc-pixel);
  font-size: 0.44rem;
  letter-spacing: 0.06em;
  padding: 6px 8px;
}

/* ---------- les fenêtres ---------- */

body[data-ui-skin="arcade"] .modal-card h2,
body[data-ui-skin="arcade"] .control-options-header h2,
body[data-ui-skin="arcade"] .corner-domain-header h2 {
  font-family: var(--arc-pixel);
  font-size: 0.82rem;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: #fff;
  text-shadow:
    0 0 calc(8px * var(--arc-neon)) rgba(255, 61, 154, calc(0.8 * var(--arc-neon))),
    0 0 calc(26px * var(--arc-neon)) rgba(138, 92, 255, calc(0.4 * var(--arc-neon)));
}

body[data-ui-skin="arcade"] .launch-setup-kicker,
body[data-ui-skin="arcade"] .corner-domain-kicker,
body[data-ui-skin="arcade"] .settings-accordion-title {
  color: var(--arc-cyan);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.6rem;
  text-shadow: 0 0 calc(10px * var(--arc-neon)) rgba(79, 216, 255, calc(0.45 * var(--arc-neon)));
}

body[data-ui-skin="arcade"] .corner-domain-shell {
  border: 1px solid var(--arc-line-soft);
  background: var(--arc-bezel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 calc(30px * var(--arc-neon)) rgba(255, 61, 154, calc(0.14 * var(--arc-neon))),
    0 20px 60px rgba(0, 0, 0, 0.6);
}

body[data-ui-skin="arcade"] .domain-panel-section-heading > span {
  font-family: var(--arc-pixel);
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  color: var(--arc-amber);
}

/* ---------- le terminal Domain.exe ---------- */

body[data-ui-skin="arcade"] .domain-hack-header h2,
body[data-ui-skin="arcade"] .domain-hack-timer {
  font-family: var(--arc-pixel);
  font-size: 0.7rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

body[data-ui-skin="arcade"] .domain-hack-enter {
  font-family: var(--arc-pixel);
  font-size: 0.56rem;
  letter-spacing: 0.06em;
}

/* Le bandeau soleil coiffe aussi le terminal : c'est la même machine. */
body[data-ui-skin="arcade"] .domain-hack-header {
  position: relative;
}

body[data-ui-skin="arcade"] .domain-hack-header::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 2px;
  pointer-events: none;
  background: var(--arc-sun-bands), var(--arc-sun);
  opacity: 0.75;
}

/* ==========================================================================
   V121 — TERMINAL « SOLEIL D'ARCADE »

   Le sixième habillage du Terminal Hack, aux couleurs de l'affiche. Il suit
   exactement le contrat des cinq autres : rien que des variables --term-*,
   donc il fonctionne partout où elles sont lues — terminal, Codex, symbole
   de finition — sans une ligne de plus.
   ========================================================================== */

body[data-terminal-skin="arcade_sunset"] .domain-hack-terminal,
body[data-terminal-skin="arcade_sunset"] .supplement-finish-symbol,
body[data-terminal-skin="arcade_sunset"] .boot-codex-surface {
  --term-ink: #ffb9e4;
  --term-ink-strong: #ffe6f7;
  --term-ink-soft: rgba(255, 175, 224, 0.76);
  --term-ink-faint: rgba(255, 157, 74, 0.62);
  --term-accent: #ffd76a;
  --term-border: rgba(255, 61, 154, 0.72);
  --term-border-soft: rgba(138, 92, 255, 0.3);
  --term-glow: rgba(255, 47, 180, 0.42);
  --term-halo: rgba(255, 47, 180, 0.18);
  --term-scan: rgba(255, 120, 200, 0.07);
  --term-bg-top: rgba(38, 14, 58, 0.96);
  --term-bg-bottom: rgba(8, 3, 20, 0.985);
  --term-base: #0a0418;
  /* Un tube couleur bave davantage qu'un monochrome : stries plus marquées. */
  --term-scan-opacity: 0.3;
}

/* ==========================================================================
   V121 — LE BLOC DE TEINTE DU CONCEPTEUR DE SKINS
   ========================================================================== */

.skin-tint-block {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  gap: 7px;
}

.skin-tint-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
}

/* La pastille montre où atterrit la couleur de barrière : c'est le repère le
   plus lisible quand le corps du skin est presque noir. */
.skin-tint-swatch {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 8px currentColor;
}

.skin-tint-block.is-tinted .skin-tint-title strong::after {
  content: " · modifiée";
  color: #ffd76a;
  font-weight: 400;
  font-size: 0.72rem;
}

@media (prefers-reduced-motion: reduce) {
  body[data-ui-skin="arcade"] .app-shell button,
  body[data-ui-skin="arcade"] .modal button,
  body[data-ui-skin="arcade"] .corner-domain-layer button,
  body[data-ui-skin="arcade"] .domain-hack-modal button,
  body[data-ui-skin="arcade"] .shop-layer button {
    transition: none;
  }
}


/* ---------- V121 — le bloc « Habillage de l'interface » dans les Options ---------- */

.ui-skin-block {
  display: grid;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.ui-skin-fine {
  display: grid;
  gap: 6px;
}

/* [hidden] ne pose que display:none dans la feuille du navigateur, et
   n'importe quelle règle de mise en page le bat — d'où le !important, déjà
   appris sur l'outil de calibrage en V118. */
.ui-skin-fine[hidden] {
  display: none !important;
}

/* ---------- V122 — la ligne « créer une variante » du concepteur ---------- */

.skin-variant-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.skin-variant-row input[type="text"] {
  flex: 1 1 180px;
  min-width: 0;
  padding: 7px 9px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(0, 0, 0, 0.35);
  color: inherit;
}

.skin-variant-row button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}


/* ---------- V126 — le bandeau d'accord et le bloc de mesures ---------- */

#telemetryConsent {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 12000;
  width: min(560px, calc(100vw - 32px));
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 92, 178, 0.45);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(38, 14, 58, 0.98), rgba(9, 4, 22, 0.99));
  color: #ffeafc;
  font: 0.82rem/1.5 "Courier New", monospace;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.66);
}

#telemetryConsent p { margin: 0; }
#telemetryConsent b { color: #ffd76a; }

#telemetryConsent div {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

#telemetryConsent button {
  padding: 7px 14px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font: inherit;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
}

#telemetryConsent button[data-telemetry-yes] {
  border-color: rgba(255, 61, 154, 0.8);
  background: rgba(255, 61, 154, 0.18);
}

.telemetry-block {
  display: grid;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.telemetry-block input[type="text"] {
  width: 100%;
  padding: 7px 9px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(0, 0, 0, 0.35);
  color: inherit;
}

#telemetryState { font-weight: 700; }

/* ======================================================================
   V128 — LE COFFRET ET L'ANNONCE DES RÉCOMPENSES

   Deux surfaces très différentes, et la différence est volontaire :

   · LE PANNEAU reprend la coquille de la Boutique — or sur noir — parce
     qu'il en est le voisin : on y range ce qu'on y équipe.
   · LA CARTE se pose PAR-DESSUS UNE ARÈNE QUI TOURNE. Elle suit donc la
     règle de coût de la V109 à la lettre : aucun filter, aucun
     backdrop-filter, aucun mode de fusion, et rien d'animé qui ne soit
     transform ou opacity. Son entrée et sa jauge sont des animations CSS,
     jamais du JavaScript image par image — la carte doit apparaître et
     disparaître même quand la boucle de rendu est arrêtée.

   La couleur d'accent vient de la PROVENANCE, pas du type d'objet : c'est
   ce qu'on reconnaît de loin sans lire.
   ====================================================================== */

.coffret-layer {
  position: fixed;
  inset: 0;
  z-index: 10042;
  display: grid;
  place-items: center;
  padding: 14px;
  background:
    radial-gradient(circle at 50% 6%, rgba(255, 210, 76, 0.14), transparent 38%),
    rgba(4, 4, 3, 0.94);
}

.coffret-layer.hidden { display: none !important; }

.coffret-shell {
  width: min(1180px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  overflow: auto;
  scrollbar-width: none;
  border: 1px solid rgba(255, 225, 130, 0.5);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(29, 26, 17, 0.98), rgba(10, 10, 8, 0.99) 46%, rgba(24, 20, 10, 0.98));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset, 0 0 55px rgba(255, 189, 39, 0.14);
  color: #fff9e6;
}

.coffret-shell::-webkit-scrollbar { width: 0; height: 0; }

.coffret-header {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 226, 139, 0.18);
  background: linear-gradient(180deg, rgba(31, 27, 16, 0.98), rgba(15, 14, 10, 0.96));
}

.coffret-kicker {
  display: block;
  color: #d9c994;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  font-weight: 800;
}

.coffret-heading h2 {
  margin: 2px 0 3px;
  font-size: 1.32rem;
  letter-spacing: 0.14em;
  color: #fff5cf;
}

.coffret-heading p {
  margin: 0;
  color: #a49c83;
  font-size: 0.7rem;
}

.coffret-total {
  min-width: 118px;
  padding: 10px 14px;
  text-align: center;
  border: 1px solid rgba(255, 221, 104, 0.42);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 216, 74, 0.12), rgba(255, 255, 255, 0.025));
}

.coffret-total span {
  display: block;
  color: #d9c994;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  font-weight: 800;
}

.coffret-total strong {
  display: block;
  margin-top: 4px;
  color: #fff7c9;
  font-size: 1.15rem;
}

.coffret-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 14px 20px 2px;
}

.coffret-band > div {
  padding: 11px 13px;
  border: 1px solid rgba(255, 234, 171, 0.13);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
}

.coffret-band strong {
  display: block;
  color: #ffd84a;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
}

.coffret-band small {
  display: block;
  margin-top: 2px;
  color: #9f987f;
  font-size: 0.64rem;
}

.coffret-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 12px 20px 0;
}

.coffret-tabs button {
  padding: 9px 12px;
  border: 1px solid rgba(255, 234, 171, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  color: #cfc7ad;
  font-size: 0.7rem;
}

.coffret-tabs button b {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.62rem;
}

.coffret-tabs button.selected {
  color: #17130a;
  border-color: #ffe278;
  background: linear-gradient(180deg, #fff3b5, #ffc82e);
  box-shadow: 0 0 22px rgba(255, 204, 55, 0.2);
}

.coffret-tabs button.selected b { background: rgba(0, 0, 0, 0.18); }

.coffret-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 14px 20px 22px;
}

.coffret-empty {
  grid-column: 1 / -1;
  margin: 26px 0 34px;
  padding: 0 8%;
  text-align: center;
  color: #a49c83;
  font-size: 0.82rem;
  line-height: 1.6;
}

/* La provenance donne la couleur. Cinq accents, lisibles de loin. */
.coffret-card,
.reward-card { --rc-accent: #ffd34f; --rc-accent-soft: rgba(255, 211, 79, 0.3); }
.coffret-card[data-source="tour"],
.reward-card[data-source="tour"] { --rc-accent: #ffa63d; --rc-accent-soft: rgba(255, 166, 61, 0.32); }
.coffret-card[data-source="supplements"],
.reward-card[data-source="supplements"] { --rc-accent: #7eeeff; --rc-accent-soft: rgba(126, 238, 255, 0.3); }
.coffret-card[data-source="aventure"],
.reward-card[data-source="aventure"] { --rc-accent: #7bf59a; --rc-accent-soft: rgba(123, 245, 154, 0.3); }
.coffret-card[data-source="secret"],
.reward-card[data-source="secret"] { --rc-accent: #ff65db; --rc-accent-soft: rgba(255, 101, 219, 0.32); }
.coffret-card[data-source="boutique"],
.reward-card[data-source="boutique"] { --rc-accent: #ffd34f; --rc-accent-soft: rgba(255, 211, 79, 0.3); }

.coffret-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--rc-accent-soft);
  border-radius: 15px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.055), rgba(255, 204, 54, 0.016) 54%, rgba(0, 0, 0, 0.18));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.coffret-card:hover { transform: translateY(-2px); border-color: var(--rc-accent); }

.coffret-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 9px 12px 7px;
  color: var(--rc-accent);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.coffret-card-top small {
  color: #8d866f;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.coffret-card-art {
  min-height: 108px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 55%, var(--rc-accent-soft), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent);
  border-block: 1px solid rgba(255, 255, 255, 0.05);
}

.coffret-canvas { width: 104px; height: 86px; image-rendering: pixelated; }

.coffret-symbol {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rc-accent-soft);
  border-radius: 18px;
  color: #fff5c8;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 189, 31, 0.04));
}

.coffret-symbol span { font-size: 1.9rem; text-shadow: 0 0 14px var(--rc-accent-soft); }

.coffret-card-copy { flex: 1; padding: 11px 12px 6px; }

.coffret-card-copy strong {
  display: block;
  color: #fff5cf;
  font-size: 0.86rem;
  letter-spacing: 0.03em;
}

.coffret-card-copy p {
  margin: 5px 0 0;
  color: #a49c83;
  font-size: 0.68rem;
  line-height: 1.45;
}

.coffret-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 11px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.coffret-kind { color: #8d866f; }
.coffret-rarity { color: var(--rc-accent); }

.coffret-footer {
  position: sticky;
  bottom: 0;
  z-index: 3;
  padding: 11px 20px;
  border-top: 1px solid rgba(255, 226, 139, 0.14);
  background: rgba(14, 13, 9, 0.96);
}

.coffret-footer p { margin: 0; color: #8d866f; font-size: 0.66rem; }

.shop-coffret-btn,
.coffret-topbar-btn {
  border: 1px solid rgba(255, 232, 160, 0.35);
  background: rgba(255, 255, 255, 0.035);
  color: #fff2bd;
}

.shop-coffret-btn { min-width: 118px; }

/* L'en-tête de la Boutique est une grille à TROIS colonnes. Y poser un
   quatrième enfant la faisait passer sur deux rangs et doublait sa hauteur :
   le bouton voyage donc avec le solde, dans une colonne unique. */
.shop-header-right {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* ---------------------------------------------------------------------
   LA CARTE. Elle vit au-dessus de l'arène : rien de coûteux ici.
   --------------------------------------------------------------------- */

.reward-drop-layer {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 10050;
  width: min(330px, calc(100vw - 32px));
  /* La couche ne prend jamais le pointeur : seule la carte le fait. Sans
     cela, un coin de l'arène deviendrait inatteignable pendant l'annonce. */
  pointer-events: none;
}

.reward-drop-layer.hidden { display: none !important; }

.reward-card {
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  display: block;
  padding: 0 0 10px;
  border: 1px solid var(--rc-accent);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(24, 12, 40, 0.97), rgba(8, 5, 18, 0.98) 58%, rgba(20, 10, 34, 0.97));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 26px var(--rc-accent-soft);
  color: #ffeafc;
  /* L'entrée est une animation CSS : elle part toute seule, sans qu'aucune
     image de la boucle de rendu n'ait besoin d'être produite. */
  animation: reward-card-in 0.42s cubic-bezier(0.16, 0.9, 0.3, 1.1) both;
}

@keyframes reward-card-in {
  from { opacity: 0; transform: translate3d(28px, 14px, 0) scale(0.94); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

.reward-card-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--rc-accent-soft);
  color: var(--rc-accent);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.reward-card-kicker span { font-size: 0.9rem; }

.reward-card-kicker b {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--rc-accent);
  color: #12081f;
  font-size: 0.6rem;
}

.reward-card-art {
  min-height: 104px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 52%, var(--rc-accent-soft), transparent 62%);
}

.reward-card-name {
  display: block;
  padding: 8px 12px 0;
  color: #fff8e6;
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.reward-card-rarity {
  padding: 3px 12px 0;
  color: var(--rc-accent);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.reward-card-note {
  margin: 6px 0 0;
  padding: 0 12px;
  color: rgba(255, 213, 244, 0.66);
  font-size: 0.68rem;
  line-height: 1.45;
}

.reward-card-credits {
  margin-top: 7px;
  padding: 0 12px;
  color: #ffd34f;
  font-size: 0.78rem;
  font-weight: 800;
}

.reward-card-actions {
  display: flex;
  gap: 7px;
  padding: 10px 12px 0;
}

.reward-card-actions button {
  flex: 1;
  padding: 7px 8px;
  border: 1px solid var(--rc-accent-soft);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: #ffeafc;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  cursor: pointer;
}

.reward-card-actions button:hover,
.reward-card-actions button:focus-visible {
  border-color: var(--rc-accent);
  background: rgba(255, 255, 255, 0.09);
}

/* La jauge de temps restant. Un scaleX animé : aucune mise en page
   recalculée, et elle s'arrête d'elle-même si l'onglet passe en veille. */
.reward-card-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.07);
}

.reward-card-bar i {
  display: block;
  height: 100%;
  transform-origin: left center;
  background: var(--rc-accent);
  animation-name: reward-card-bar;
  animation-timing-function: linear;
  animation-fill-mode: both;
}

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

@media (prefers-reduced-motion: reduce) {
  .reward-card { animation-duration: 0.001s; }
  .reward-card-bar i { animation-duration: 0.001s !important; opacity: 0.4; }
}

@media (max-width: 720px) {
  .coffret-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coffret-band { grid-template-columns: 1fr; }
  .coffret-header { grid-template-columns: auto 1fr; }
  .coffret-total { grid-column: 1 / -1; }
  .reward-drop-layer { right: 10px; bottom: 10px; width: min(300px, calc(100vw - 20px)); }
}

@media (max-width: 520px) {
  .coffret-grid { grid-template-columns: 1fr; }
}

.coffret-block {
  display: grid;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* ---------------------------------------------------------------------
   L'habillage arcade. Le panneau reste or sur noir — c'est le voisin de la
   Boutique — mais la CARTE, elle, appartient à l'arène : elle prend les
   couleurs de l'écran-titre quand l'habillage arcade est actif.
   --------------------------------------------------------------------- */

body[data-ui-skin="arcade"] .reward-card {
  border-color: var(--rc-accent);
  background: linear-gradient(160deg, rgba(33, 14, 58, 0.97), var(--arc-night-deep) 58%, rgba(28, 12, 50, 0.97));
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.52),
    0 0 calc(26px * var(--arc-neon, 1)) var(--rc-accent-soft);
}

body[data-ui-skin="arcade"] .reward-card-name {
  font-family: "Press Start 2P", "VT323", monospace;
  font-size: 0.72rem;
  line-height: 1.5;
}

body[data-ui-skin="arcade"] .coffret-topbar-btn {
  border-color: var(--arc-line);
  color: var(--arc-ink);
}