.container-index:has(.game-shell) {
  max-width: none;
  min-height: 100dvh;
  margin-top: 0;
  padding-top: clamp(0.8rem, 1.8dvh, 1.35rem);
  padding-bottom: clamp(0.9rem, 2dvh, 1.55rem);
  overflow-x: hidden;
}

/* --- Présentation manga avant le compte à rebours ---------------------------------------------
   Le reveal dure quatre secondes, puis laisse le canvas reprendre la main pour « 2 · 1 · GO ».
   Les deux côtés se chevauchent volontairement autour du VS : on garde une vraie pose sur les
   joueurs sans transformer la séquence en trois cartons successifs. */
.match-intro {
  --match-intro-left: #5ce1e6;
  --match-intro-right: #ffcf4a;
  --match-intro-ink: #11121a;
  position: absolute;
  inset: 0;
  z-index: 13;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  color: #fff;
  background: var(--match-intro-ink);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  isolation: isolate;
  container-type: size;
}

.match-intro.is-playing {
  visibility: visible;
  animation: match-intro-curtain var(--match-intro-duration, 4000ms) linear both;
}

.match-intro::before {
  content: "";
  position: absolute;
  z-index: 4;
  pointer-events: none;
}

.match-intro::before {
  inset: -25%;
  background:
    repeating-linear-gradient(104deg, transparent 0 72px, rgba(255, 255, 255, 0.07) 73px 76px, transparent 77px 118px);
  mix-blend-mode: screen;
  opacity: 0;
}

.match-intro.is-playing::before {
  animation: match-intro-streaks 1450ms 1120ms ease-out both;
}

.match-intro-speed-lines {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.match-intro-speed-lines::before,
.match-intro-speed-lines::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 70%;
  height: 140%;
  background:
    repeating-conic-gradient(from 90deg at 100% 50%, rgba(255, 255, 255, 0.2) 0deg 1deg, transparent 1.15deg 7.5deg);
  -webkit-mask-image: radial-gradient(ellipse 29% 46% at 66% 50%, transparent 0 58%, rgba(0, 0, 0, 0.34) 74%, #000 100%);
  mask-image: radial-gradient(ellipse 29% 46% at 66% 50%, transparent 0 58%, rgba(0, 0, 0, 0.34) 74%, #000 100%);
}

.match-intro-speed-lines::before {
  left: -18%;
  transform: translateY(-50%);
}

.match-intro-speed-lines::after {
  right: -18%;
  transform: translateY(-50%) scaleX(-1);
}

.match-intro.is-playing .match-intro-speed-lines {
  animation: match-intro-lines 1650ms 1450ms cubic-bezier(0.16, 0.78, 0.28, 1) both;
}

/* A single finishing layer unifies both team palettes without adding more moving detail. The
   vignette concentrates attention on the fighters; the tiny static grain avoids a sterile flat fill. */
.match-intro-grade {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.match-intro-grade::before,
.match-intro-grade::after {
  content: "";
  position: absolute;
  inset: 0;
}

.match-intro-grade::before {
  background: radial-gradient(ellipse at 50% 46%, transparent 42%, rgba(7, 8, 15, 0.08) 68%, rgba(7, 8, 15, 0.34) 100%);
}

.match-intro-grade::after {
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.22) 0 0.45px, transparent 0.75px) 0 0 / 7px 7px,
    radial-gradient(circle at 74% 68%, rgba(17, 18, 26, 0.24) 0 0.5px, transparent 0.8px) 0 0 / 11px 11px;
  mix-blend-mode: soft-light;
  opacity: 0.13;
}

.match-intro-side {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  align-content: center;
  gap: clamp(0.35rem, 1.7vw, 0.85rem);
  padding: clamp(1rem, 4vw, 2.5rem);
  overflow: hidden;
}

.match-intro-side::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
}

.match-intro-side::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.18), transparent 30%),
    repeating-linear-gradient(-12deg, transparent 0 50px, rgba(255, 255, 255, 0.055) 51px 53px, transparent 54px 82px);
  opacity: 0.72;
}

.match-intro-side-left {
  --match-intro-halo: rgba(92, 225, 230, 0.62);
  padding-right: clamp(2.4rem, 6vw, 4.6rem);
  clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
  transform: translateX(-112%);
}

.match-intro-side-left::before {
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.17), transparent 42%),
    linear-gradient(155deg, #153c5a 0%, #087d91 52%, #0fb5bd 100%);
}

.match-intro-side-right {
  --match-intro-halo: rgba(255, 207, 74, 0.56);
  justify-items: end;
  padding-left: clamp(2.4rem, 6vw, 4.6rem);
  text-align: right;
  clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%);
  transform: translateX(112%);
}

.match-intro-side-right::before {
  background:
    linear-gradient(242deg, rgba(255, 255, 255, 0.18), transparent 42%),
    linear-gradient(205deg, #e96e2e 0%, #d33952 54%, #741e51 100%);
}

.match-intro.is-playing .match-intro-side-left {
  animation: match-intro-left-in 820ms 100ms cubic-bezier(0.13, 0.83, 0.24, 1.03) both;
}

.match-intro.is-playing .match-intro-side-right {
  animation: match-intro-right-in 820ms 1450ms cubic-bezier(0.13, 0.83, 0.24, 1.03) both;
}

.match-intro-roster {
  width: 100%;
  display: grid;
  align-content: center;
  gap: clamp(0.2rem, 1vw, 0.65rem);
}

/* En solo, portrait et identité forment une carte verticale dans leur moitié d'écran. Dans la
   composition horizontale précédente, les deux noms convergeaient vers l'axe et le gros VS les
   recouvrait. Le 2v2 conserve exactement sa disposition, déjà validée en jeu. */
.match-intro-roster:not(.is-duo) {
  justify-items: center;
}

.match-intro-side-left .match-intro-roster:not(.is-duo) {
  transform: translateX(clamp(-3.6rem, -4.2vw, -2rem));
}

.match-intro-side-right .match-intro-roster:not(.is-duo) {
  transform: translateX(clamp(2rem, 4.2vw, 3.6rem));
}

.match-intro-roster:not(.is-duo) .match-intro-fighter,
.match-intro-side-right .match-intro-roster:not(.is-duo) .match-intro-fighter {
  width: min(100%, 20rem);
  display: grid;
  justify-items: center;
  gap: 0;
}

.match-intro-roster:not(.is-duo) .match-intro-identity,
.match-intro-side-right .match-intro-roster:not(.is-duo) .match-intro-identity {
  position: relative;
  z-index: 1;
  width: min(100%, 18rem);
  margin-top: clamp(1rem, 2.4vw, 1.5rem);
  text-align: center;
}

.match-intro-roster:not(.is-duo) .match-intro-player-name {
  font-size: clamp(1.5rem, 3.8vw, 2.7rem);
}

.match-intro-fighter {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(0.3rem, 1.4vw, 0.9rem);
  opacity: 1;
}

.match-intro-side-right .match-intro-fighter {
  flex-direction: row-reverse;
}

.match-intro.is-playing .match-intro-side-left .match-intro-portrait-frame {
  animation: match-intro-portrait-left 560ms 390ms cubic-bezier(0.16, 0.92, 0.2, 1.05) both;
}

.match-intro.is-playing .match-intro-side-left .match-intro-identity {
  animation: match-intro-identity-in 420ms 500ms cubic-bezier(0.16, 0.86, 0.24, 1) both;
}

.match-intro.is-playing .match-intro-side-left .match-intro-fighter:nth-child(2) .match-intro-portrait-frame {
  animation-delay: 550ms;
}

.match-intro.is-playing .match-intro-side-left .match-intro-fighter:nth-child(2) .match-intro-identity {
  animation-delay: 660ms;
}

.match-intro.is-playing .match-intro-side-right .match-intro-portrait-frame {
  animation: match-intro-portrait-right 560ms 1730ms cubic-bezier(0.16, 0.92, 0.2, 1.05) both;
}

.match-intro.is-playing .match-intro-side-right .match-intro-identity {
  animation: match-intro-identity-in 420ms 1840ms cubic-bezier(0.16, 0.86, 0.24, 1) both;
}

.match-intro.is-playing .match-intro-side-right .match-intro-fighter:nth-child(2) .match-intro-portrait-frame {
  animation-delay: 1890ms;
}

.match-intro.is-playing .match-intro-side-right .match-intro-fighter:nth-child(2) .match-intro-identity {
  animation-delay: 2000ms;
}

.match-intro-portrait-frame {
  position: relative;
  width: clamp(7rem, 21vw, 12.5rem);
  aspect-ratio: 1;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  opacity: 0;
  isolation: isolate;
}

.match-intro-portrait-frame::before {
  content: "";
  position: absolute;
  inset: 13%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--match-intro-halo) 0%, color-mix(in srgb, var(--match-intro-halo) 46%, transparent) 48%, transparent 72%);
  filter: blur(clamp(10px, 1.8vw, 18px));
  opacity: 0.82;
  transform: scale(0.88);
}

.match-intro-portrait {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  filter:
    drop-shadow(0 0 2px #fff)
    drop-shadow(8px 10px 0 rgba(17, 18, 26, 0.9))
    drop-shadow(0 15px 18px rgba(17, 18, 26, 0.38));
}

.match-intro-roster.is-duo .match-intro-portrait-frame {
  width: clamp(5.2rem, 15vw, 8.5rem);
}

.match-intro-identity {
  min-width: 0;
  display: grid;
  gap: 0.12rem;
  text-align: left;
  opacity: 0;
  transform: translateY(0.65rem);
}

.match-intro-side-right .match-intro-identity {
  text-align: right;
}

.match-intro-player-elo {
  color: var(--theme-accent, #f6cd72);
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: clamp(0.85rem, 2vw, 1.2rem);
  line-height: 1;
  letter-spacing: 0.08em;
  text-shadow: 0 2px #060d09;
}

.match-intro-player-slot {
  color: rgba(255, 255, 255, 0.8);
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: clamp(0.75rem, 1.8vw, 1.05rem);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.match-intro-player-name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: #fff;
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: clamp(1.45rem, 4.6vw, 3.25rem);
  font-weight: 400;
  line-height: 0.88;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-text-stroke: clamp(1px, 0.22vw, 2px) var(--match-intro-ink);
  paint-order: stroke fill;
  text-shadow:
    0 4px 0 var(--match-intro-ink),
    0 9px 18px rgba(17, 18, 26, 0.38);
}

.match-intro-roster.is-duo .match-intro-player-name {
  font-size: clamp(1.15rem, 3.5vw, 2.25rem);
}

.match-intro-versus {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 7;
  display: grid;
  justify-items: center;
  color: #fff;
  transform: translate(-50%, -50%) scale(0);
  filter: drop-shadow(0 14px 10px rgba(17, 18, 26, 0.42));
}

.match-intro.is-playing .match-intro-versus {
  animation: match-intro-vs 690ms 1120ms cubic-bezier(0.12, 1.15, 0.22, 1) both;
}

/* Le VS pixel du salon (views/pixel-vs.pug), en grand et à la couleur vive du thème sur la scène. */
.match-intro-vs-art {
  --vs-color: var(--theme-accent);
  --vs-ink: var(--match-intro-ink);
  width: clamp(140px, min(26cqw, 34cqh), 300px);
}


/* Compte à rebours en pixel art (game.js pixelWordSvg) : mêmes lettres que le VS, à la couleur vive
   du thème, GO! en vert. Chaque chiffre arrive d'un petit rebond. Une unité de pixel = 1,35 % de la
   hauteur du terrain : un chiffre fait ~17 % de l'écran. Seul GO! a une légende (« C'EST PARTI ! »),
   gardée en place vide pendant 3 · 2 · 1 pour que les chiffres ne bougent pas. */
.match-countdown {
  position: absolute; inset: 0; z-index: 14; display: grid; place-items: center; align-content: center;
  gap: 2cqh; pointer-events: none; container-type: size;
}
.match-countdown[hidden] { display: none; }
.match-countdown-caption {
  color: #fff; font: clamp(16px, 3cqh, 26px)/1 'Jersey 15', sans-serif; letter-spacing: .2em; text-transform: uppercase;
  /* Contour pixel sombre, comme le texte posé sur la scène. */
  text-shadow: 2px 0 #11121a, -2px 0 #11121a, 0 2px #11121a, 0 -2px #11121a, 2px 2px #11121a, -2px 2px #11121a, 2px -2px #11121a, -2px -2px #11121a, 0 4px #11121a;
}
.match-countdown:not(.is-go):not(.has-caption) .match-countdown-caption { visibility: hidden; }
.match-countdown.is-go .match-countdown-caption { color: #99e550; }
.match-countdown-glyph { display: grid; place-items: center; }
.match-countdown-art { --vs-color: var(--theme-accent); --vs-ink: #11121a; width: calc(var(--units) * 1.35cqh); filter: drop-shadow(0 .8cqh .8cqh #11121a50); }
.match-countdown.is-go .match-countdown-art { --vs-color: #99e550; }
.match-countdown.is-tick .match-countdown-art { animation: match-countdown-slam 320ms steps(5) both; }
.match-countdown.is-tick:not(.caption-held) .match-countdown-caption { animation: match-countdown-caption 380ms steps(3) both; }
@keyframes match-countdown-slam {
  0% { scale: 1.35; opacity: 0; }
  45% { scale: .94; opacity: 1; }
  100% { scale: 1; opacity: 1; }
}
@keyframes match-countdown-caption { 0% { translate: 0 -1.5cqh; opacity: 0; } 100% { translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .match-countdown.is-tick :is(.match-countdown-art, .match-countdown-caption) { animation: none; }
}

.match-intro-countdown-bridge {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
}

.match-intro-countdown-bridge::before,
.match-intro-countdown-bridge::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  pointer-events: none;
}

.match-intro-countdown-bridge::before {
  width: min(46vw, 24rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 174, 0.92) 0 4%, rgba(255, 228, 94, 0.48) 22%, transparent 68%);
  transform: translate(-50%, -50%) scale(0.15);
}

.match-intro-countdown-bridge::after {
  width: 12%;
  height: 180%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9) 45% 55%, transparent);
  transform: translate(-50%, -50%) rotate(7deg) scaleX(0.08);
}

.match-intro-countdown-bridge strong {
  position: relative;
  z-index: 1;
  color: #ffe66d;
  font-family: 'PixelArt', monospace;
  font-size: clamp(7.5rem, 22vw, 12.5rem);
  font-size: clamp(7rem, min(20cqw, 26cqh), 12.5rem);
  line-height: 1;
  opacity: 0;
  -webkit-text-stroke: clamp(6px, 1.15vw, 12px) #363435;
  -webkit-text-stroke: clamp(5px, min(1.15cqw, 1.5cqh), 12px) #363435;
  paint-order: stroke fill;
  text-shadow: 0 8px 0 #15151d, 0 16px 26px rgba(17, 18, 26, 0.42);
  transform: scale(0.34);
}

.match-intro.is-transitioning .match-intro-side-left {
  animation: match-intro-left-to-countdown 720ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.match-intro.is-transitioning .match-intro-side-right {
  animation: match-intro-right-to-countdown 720ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.match-intro.is-transitioning .match-intro-speed-lines {
  animation: match-intro-lines-to-countdown 520ms ease-in both;
}

.match-intro.is-transitioning::before {
  animation: match-intro-streaks-to-countdown 520ms ease-in both;
}

.match-intro.is-transitioning .match-intro-versus {
  animation: match-intro-vs-to-countdown 520ms cubic-bezier(0.45, 0, 0.2, 1) both;
}

.match-intro.is-transitioning .match-intro-countdown-bridge::before {
  animation: match-intro-countdown-flash 520ms ease-out both;
}

.match-intro.is-transitioning .match-intro-countdown-bridge::after {
  animation: match-intro-countdown-slash 520ms ease-out both;
}

.match-intro.is-transitioning .match-intro-countdown-bridge strong {
  animation: match-intro-countdown-three 520ms cubic-bezier(0.12, 0.84, 0.24, 1.1) both;
}

@keyframes match-intro-curtain {
  0% { opacity: 0; }
  3%, 100% { opacity: 1; }
}

@keyframes match-intro-left-in {
  0% { transform: translateX(-112%); }
  72% { transform: translateX(2.5%); }
  100% { transform: translateX(0); }
}

@keyframes match-intro-right-in {
  0% { transform: translateX(112%); }
  72% { transform: translateX(-2.5%); }
  100% { transform: translateX(0); }
}

@keyframes match-intro-portrait-left {
  0% { opacity: 0; transform: translateX(-2rem) scale(0.84); }
  64% { opacity: 1; transform: translateX(0.3rem) scale(1.035); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes match-intro-portrait-right {
  0% { opacity: 0; transform: translateX(2rem) scale(0.84); }
  64% { opacity: 1; transform: translateX(-0.3rem) scale(1.035); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes match-intro-identity-in {
  0% { opacity: 0; transform: translateY(0.65rem); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes match-intro-vs {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(2.4); }
  55% { opacity: 1; transform: translate(-50%, -50%) scale(0.88); }
  78% { transform: translate(-50%, -50%) scale(1.08); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes match-intro-lines {
  0% { opacity: 0; transform: scale(0.82); }
  42% { opacity: 0.46; }
  100% { opacity: 0.14; transform: scale(1.04); }
}

@keyframes match-intro-streaks {
  0% { opacity: 0; transform: translateX(-8%); }
  48% { opacity: 0.38; }
  100% { opacity: 0.08; transform: translateX(8%); }
}

@keyframes match-intro-left-to-countdown {
  0%, 18% { transform: translateX(0) scale(1); filter: brightness(1) saturate(1); }
  100% { transform: translateX(-3.2%) scale(0.992); filter: brightness(0.72) saturate(0.88); }
}

@keyframes match-intro-right-to-countdown {
  0%, 18% { transform: translateX(0) scale(1); filter: brightness(1) saturate(1); }
  100% { transform: translateX(3.2%) scale(0.992); filter: brightness(0.72) saturate(0.88); }
}

@keyframes match-intro-lines-to-countdown {
  0% { opacity: 0.14; transform: scale(1.04); }
  100% { opacity: 0; transform: scale(1.12); }
}

@keyframes match-intro-streaks-to-countdown {
  0% { opacity: 0.08; transform: translateX(8%); }
  100% { opacity: 0; transform: translateX(12%); }
}

@keyframes match-intro-vs-to-countdown {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  38% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  72% { opacity: 0; transform: translate(-50%, -50%) scale(0.12); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
}

@keyframes match-intro-countdown-flash {
  0%, 42% { opacity: 0; transform: translate(-50%, -50%) scale(0.15); }
  68% { opacity: 0.94; transform: translate(-50%, -50%) scale(0.86); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.55); }
}

@keyframes match-intro-countdown-slash {
  0%, 48% { opacity: 0; transform: translate(-50%, -50%) rotate(7deg) scaleX(0.08); }
  64% { opacity: 0.78; transform: translate(-50%, -50%) rotate(7deg) scaleX(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(7deg) scaleX(1.65); }
}

@keyframes match-intro-countdown-three {
  0%, 62% { opacity: 0; transform: scale(0.34); }
  80% { opacity: 1; transform: scale(1.14); }
  100% { opacity: 1; transform: scale(1); }
}

@media (max-width: 650px) {
  .match-intro-side {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .match-intro-side-left {
    padding-left: 0.7rem;
    padding-right: 2.4rem;
  }

  .match-intro-side-right {
    padding-left: 2.4rem;
    padding-right: 0.7rem;
  }

  .match-intro-fighter,
  .match-intro-side-right .match-intro-fighter {
    flex-direction: column;
    justify-content: center;
    gap: 0.05rem;
  }

  .match-intro-side-right .match-intro-fighter {
    flex-direction: column;
  }

  .match-intro-identity,
  .match-intro-side-right .match-intro-identity {
    width: 100%;
    text-align: center;
  }

}

@media (prefers-reduced-motion: reduce) {
  .match-intro.is-playing,
  .match-intro.is-playing::before,
  .match-intro.is-playing .match-intro-side,
  .match-intro.is-playing .match-intro-speed-lines,
  .match-intro.is-playing .match-intro-fighter,
  .match-intro.is-playing .match-intro-portrait-frame,
  .match-intro.is-playing .match-intro-identity,
  .match-intro.is-playing .match-intro-versus,
  .match-intro.is-transitioning::before,
  .match-intro.is-transitioning .match-intro-side,
  .match-intro.is-transitioning .match-intro-speed-lines,
  .match-intro.is-transitioning .match-intro-versus,
  .match-intro.is-transitioning .match-intro-countdown-bridge::before,
  .match-intro.is-transitioning .match-intro-countdown-bridge::after,
  .match-intro.is-transitioning .match-intro-countdown-bridge strong {
    animation: none;
  }

  .match-intro.is-playing {
    opacity: 1;
  }

  .match-intro-side-left,
  .match-intro-side-right,
  .match-intro-fighter,
  .match-intro-side-right .match-intro-fighter,
  .match-intro-portrait-frame,
  .match-intro-identity,
  .match-intro-versus {
    opacity: 1;
    transform: none;
  }

  .match-intro-versus {
    transform: translate(-50%, -50%);
  }

  .match-intro.is-transitioning {
    opacity: 0;
  }
}

/* --- Balle de match -------------------------------------------------------------------------
   Un carton beaucoup plus bref que l'intro : il occupe uniquement la respiration entre le score
   et la remise en jeu. La moitié gagnante fournit la couleur, sans masquer durablement le terrain. */
.match-point-moment {
  --match-point-accent: #5ce1e6;
  --match-point-accent-rgb: 92, 225, 230;
  position: absolute;
  inset: 0;
  z-index: 12;
  overflow: hidden;
  color: #fff;
  background: rgba(7, 8, 15, 0.72);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  isolation: isolate;
  container-type: size;
}

.match-point-moment.is-right {
  --match-point-accent: #ffe66d;
  --match-point-accent-rgb: 255, 230, 109;
}

.match-point-moment.is-playing {
  visibility: visible;
  animation: match-point-moment-curtain var(--match-point-moment-duration, 1150ms) linear both;
}

.match-point-moment-wash,
.match-point-moment-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.match-point-moment-wash {
  z-index: -2;
  background:
    radial-gradient(circle at 78% 22%, rgba(var(--match-point-accent-rgb), 0.3), transparent 34%),
    linear-gradient(108deg, rgba(var(--match-point-accent-rgb), 0.78) 0 43%, rgba(10, 12, 22, 0.92) 43.5% 100%);
  transform: translateX(-105%);
}

.match-point-moment.is-right .match-point-moment-wash {
  background:
    radial-gradient(circle at 22% 22%, rgba(var(--match-point-accent-rgb), 0.3), transparent 34%),
    linear-gradient(252deg, rgba(var(--match-point-accent-rgb), 0.78) 0 43%, rgba(10, 12, 22, 0.92) 43.5% 100%);
  transform: translateX(105%);
}

.match-point-moment.is-playing .match-point-moment-wash {
  animation: match-point-moment-wash-in 430ms cubic-bezier(0.12, 0.86, 0.24, 1) both;
}

.match-point-moment-lines {
  z-index: -1;
  inset: -35%;
  background: repeating-linear-gradient(103deg, transparent 0 48px, rgba(255, 255, 255, 0.12) 49px 52px, transparent 53px 82px);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateX(-10%);
}

.match-point-moment.is-playing .match-point-moment-lines {
  animation: match-point-moment-lines 820ms 120ms ease-out both;
}

.match-point-moment-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(74%, 31rem);
  display: grid;
  justify-items: center;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-5deg) scale(1.75);
}

.match-point-moment.is-playing .match-point-moment-card {
  animation: match-point-moment-card 760ms 100ms cubic-bezier(0.12, 1.05, 0.22, 1) both;
}

.match-point-moment-kicker {
  margin-bottom: clamp(0.15rem, 1cqh, 0.45rem);
  padding: 0.18em 0.72em;
  color: #10121a;
  background: var(--match-point-accent);
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: clamp(0.9rem, min(3cqw, 3.8cqh), 1.35rem);
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 5px 5px 0 #10121a;
}

.match-point-moment-title {
  display: grid;
  color: #fff;
  font-family: 'PixelArtTitle', 'PixelArt', monospace;
  font-size: clamp(2.8rem, min(11cqw, 13cqh), 6.2rem);
  font-style: italic;
  font-weight: 900;
  line-height: 0.78;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  -webkit-text-stroke: clamp(3px, min(0.72cqw, 0.95cqh), 7px) #11121a;
  paint-order: stroke fill;
  text-shadow:
    clamp(4px, 0.8cqw, 8px) clamp(5px, 0.95cqw, 9px) 0 rgba(var(--match-point-accent-rgb), 0.98),
    clamp(7px, 1.25cqw, 12px) clamp(8px, 1.45cqw, 14px) 0 #11121a;
}

.match-point-moment-title span:last-child {
  margin-left: clamp(0.7rem, 4cqw, 2rem);
  color: var(--match-point-accent);
}

.match-point-moment-score {
  display: flex;
  align-items: center;
  gap: clamp(0.45rem, 2.3cqw, 1rem);
  margin-top: clamp(0.75rem, 2.5cqh, 1.15rem);
  color: #fff;
  font-family: 'PixelArt', monospace;
  font-size: clamp(1.5rem, min(5cqw, 6cqh), 2.65rem);
  line-height: 1;
  -webkit-text-stroke: 2px #11121a;
  paint-order: stroke fill;
  text-shadow: 3px 4px 0 #11121a;
}

.match-point-moment-score-sep {
  color: var(--match-point-accent);
}

.match-point-moment-ball {
  position: absolute;
  top: 15%;
  left: 50%;
  width: clamp(3.4rem, min(10cqw, 13cqh), 5.4rem);
  aspect-ratio: 1;
  opacity: 0;
  transform: translate(-50%, -190%) rotate(-120deg) scale(0.45);
  filter: drop-shadow(7px 9px 0 #11121a) drop-shadow(0 0 13px rgba(var(--match-point-accent-rgb), 0.8));
}

.match-point-moment-ball img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.match-point-moment-ball-halo {
  position: absolute;
  inset: -38%;
  border: 3px solid rgba(var(--match-point-accent-rgb), 0.7);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(var(--match-point-accent-rgb), 0.72), inset 0 0 16px rgba(var(--match-point-accent-rgb), 0.38);
}

.match-point-moment.is-playing .match-point-moment-ball {
  animation: match-point-moment-ball-drop 720ms 70ms cubic-bezier(0.18, 0.82, 0.24, 1.08) both;
}

.match-point-moment.is-playing .match-point-moment-ball-halo {
  animation: match-point-moment-halo 560ms 290ms ease-out both;
}

@keyframes match-point-moment-curtain {
  0% { opacity: 0; }
  7%, 82% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes match-point-moment-wash-in {
  0% { transform: translateX(-105%); }
  68% { transform: translateX(2.5%); }
  100% { transform: translateX(0); }
}

.match-point-moment.is-right.is-playing .match-point-moment-wash {
  animation-name: match-point-moment-wash-in-right;
}

@keyframes match-point-moment-wash-in-right {
  0% { transform: translateX(105%); }
  68% { transform: translateX(-2.5%); }
  100% { transform: translateX(0); }
}

@keyframes match-point-moment-lines {
  0% { opacity: 0; transform: translateX(-10%) scale(0.94); }
  38% { opacity: 0.42; }
  100% { opacity: 0.1; transform: translateX(9%) scale(1.04); }
}

@keyframes match-point-moment-card {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-13deg) scale(1.75); }
  48% { opacity: 1; transform: translate(-50%, -50%) rotate(-3deg) scale(0.93); }
  72% { transform: translate(-50%, -50%) rotate(-6deg) scale(1.04); }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(-5deg) scale(1); }
}

@keyframes match-point-moment-ball-drop {
  0% { opacity: 0; transform: translate(-50%, -190%) rotate(-120deg) scale(0.45); }
  58% { opacity: 1; transform: translate(-50%, 3%) rotate(22deg) scale(1.1); }
  78% { transform: translate(-50%, -8%) rotate(6deg) scale(0.96); }
  100% { opacity: 1; transform: translate(-50%, 0) rotate(0) scale(1); }
}

@keyframes match-point-moment-halo {
  0% { opacity: 0; transform: scale(0.3); }
  45% { opacity: 1; transform: scale(1.12); }
  100% { opacity: 0.42; transform: scale(1); }
}

@media (max-width: 650px) {
  .match-point-moment-card {
    width: 84%;
  }

  .match-point-moment-ball {
    top: 11%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .match-point-moment.is-playing,
  .match-point-moment.is-playing .match-point-moment-wash,
  .match-point-moment.is-playing .match-point-moment-lines,
  .match-point-moment.is-playing .match-point-moment-card,
  .match-point-moment.is-playing .match-point-moment-ball,
  .match-point-moment.is-playing .match-point-moment-ball-halo {
    animation: none;
  }

  .match-point-moment.is-playing,
  .match-point-moment.is-playing .match-point-moment-card,
  .match-point-moment.is-playing .match-point-moment-ball {
    opacity: 1;
  }

  .match-point-moment.is-playing .match-point-moment-wash,
  .match-point-moment.is-playing .match-point-moment-card,
  .match-point-moment.is-playing .match-point-moment-ball {
    transform: translate(-50%, -50%);
  }

  .match-point-moment.is-playing .match-point-moment-wash {
    transform: none;
  }
}

/* Version HUD compacte : le prototype plein écran ci-dessus reste neutralisé par ces règles le
   temps de valider le nouveau langage visuel. Aucun voile, aucune image centrale : seulement une
   plaque arcade lisible directement sur le terrain. */
.match-point-moment {
  display: block;
  overflow: visible;
  background: transparent;
}

.match-point-moment.is-playing {
  animation: none;
  opacity: 1;
}

.match-point-moment-card {
  top: 21%;
  width: auto;
  min-width: min(72%, 25rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.7rem, 2.8cqw, 1.25rem);
  padding: clamp(0.48rem, 1.6cqh, 0.72rem) clamp(1rem, 4cqw, 1.7rem);
  opacity: 0;
  color: #fff;
  background: transparent;
  transform: translate(-50%, -50%) rotate(-2deg) scale(0.84);
  isolation: isolate;
}

.match-point-moment-card::before,
.match-point-moment-card::after {
  content: "";
  position: absolute;
  clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%);
  pointer-events: none;
}

.match-point-moment-card::before {
  inset: -4px;
  z-index: -2;
  background: var(--match-point-accent);
  filter: drop-shadow(7px 8px 0 rgba(5, 7, 13, 0.72));
}

.match-point-moment-card::after {
  inset: 2px;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(var(--match-point-accent-rgb), 0.16), transparent 34%),
    repeating-linear-gradient(90deg, transparent 0 42px, rgba(255, 255, 255, 0.035) 43px 45px),
    #111522;
}

.match-point-moment.is-playing .match-point-moment-card {
  animation: match-point-hud-in 420ms cubic-bezier(0.16, 0.9, 0.24, 1) both;
}

.match-point-moment.is-playing.is-leaving .match-point-moment-card {
  animation: match-point-hud-out 240ms cubic-bezier(0.45, 0, 0.72, 0.28) both;
}

.match-point-moment-title {
  display: block;
  color: #fff;
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: clamp(1.7rem, min(6cqw, 7.2cqh), 2.9rem);
  font-style: normal;
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-text-stroke: 0;
  text-shadow: 3px 3px 0 #070911;
}

.match-point-moment-score {
  flex: 0 0 auto;
  gap: 0.28em;
  margin: 0;
  padding: 0.2em 0.42em 0.15em;
  color: #10121a;
  background: var(--match-point-accent);
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: clamp(1.2rem, min(4cqw, 5cqh), 1.85rem);
  -webkit-text-stroke: 0;
  text-shadow: none;
  box-shadow: 3px 3px 0 #070911;
  transform: rotate(2deg);
}

.match-point-moment-score-sep {
  color: #10121a;
}

@keyframes match-point-hud-in {
  0% { opacity: 0; transform: translate(-50%, -86%) rotate(-5deg) scale(0.76); }
  18% { opacity: 1; transform: translate(-50%, -44%) rotate(0.5deg) scale(1.06); }
  72% { opacity: 1; transform: translate(-50%, -52%) rotate(-2.5deg) scale(0.99); }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(-2deg) scale(1); }
}

@keyframes match-point-hud-out {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(-2deg) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -74%) rotate(-2deg) scale(0.94); }
}

@media (max-width: 650px) {
  .match-point-moment-card {
    top: 19%;
    min-width: 78%;
    gap: 0.55rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .match-point-moment.is-playing .match-point-moment-card {
    animation: none;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-2deg);
  }

  .match-point-moment.is-playing.is-leaving .match-point-moment-card {
    opacity: 0;
  }
}

body.home-demo-body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  background: transparent;
}

body.home-demo-body .game-shell {
  display: block;
  width: 100vw;
  height: 100vh;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
}

/* Behind the home menu the demo is scenery: its score would compete with the logo. */
body.home-demo-body.home-demo-is-attract :is(.match-hud-score, .point-callout) { visibility: hidden; }

body.home-demo-body .game-sidebar,
body.home-demo-body .game-player-strip,
body.home-demo-body .emote-bar,
body.home-demo-body .reconnect-banner,
body.home-demo-body .ragequit-overlay,
body.home-demo-body .game-modal-overlay {
  display: none !important;
}

body.home-demo-body .game-stage,
body.home-demo-body .game-arena {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

body.home-demo-body #game {
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  border: 0;
  border-radius: 15px;
  box-shadow: none;
  overflow: hidden;
}

body.home-demo-body #game canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover;
  border-radius: 15px;
}

body.home-demo-body .game-loading {
  border-radius: 15px;
}

body.home-demo-body .game-loading.hide-loading-brand .game-loading-brand {
  display: none;
}

body.home-demo-hide-loading-brand .game-loading-brand {
  display: none;
}

/* The arcade homepage already owns the title and start prompt. Keep the embedded
   loader silent and invisible so its progress copy never competes with that UI. */
body.home-demo-hide-loading-brand .game-loading {
  visibility: hidden;
}

/* Commands CTA inside the playable homepage demo. It stays hidden behind the launch veil and enters
   only once the iframe has received homeDemoStart, so the first screen keeps its single clear CTA. */
.home-demo-commands-cta {
  position: absolute;
  top: clamp(0.68rem, 2vw, 1rem);
  right: clamp(0.68rem, 2vw, 1rem);
  z-index: 15;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.05rem;
  height: 3.05rem;
  min-height: 0;
  padding: 0.38rem;
  color: #15151d;
  border: 2px solid color-mix(in srgb, var(--home-cta-dark, #9c7813) 76%, #15151d);
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), transparent 48%),
    var(--home-cta, #ffd33f);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -3px 0 rgba(0, 0, 0, 0.12),
    0 5px 0 var(--home-cta-dark, #9c7813),
    0 12px 24px rgba(14, 13, 19, 0.3);
  font-family: 'Jersey 15', 'PixelArt', monospace;
  text-align: left;
  cursor: pointer;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-0.65rem) scale(0.92);
  transition: opacity 0.24s ease, transform 0.24s ease, filter 0.14s ease, box-shadow 0.14s ease;
}

.home-demo-commands-cta::before {
  content: "";
  position: absolute;
  inset: 2px 8% auto;
  height: 42%;
  border-radius: 8px 8px 50% 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.48), transparent);
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
}

body.home-demo-body.home-demo-is-playing .home-demo-commands-cta {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: home-demo-commands-cta-in 0.46s cubic-bezier(.2, 1.35, .42, 1) both;
}

.home-demo-commands-cta:hover,
.home-demo-commands-cta:focus-visible {
  filter: brightness(1.08) saturate(1.04);
  transform: translateY(-2px) scale(1.015);
  border-color: color-mix(in srgb, var(--home-cta-dark, #9c7813) 58%, #15151d);
  outline: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    inset 0 -3px 0 rgba(0, 0, 0, 0.12),
    inset 0 0 0 1px color-mix(in srgb, var(--home-cta, #ffd33f) 34%, transparent),
    0 7px 0 var(--home-cta-dark, #9c7813),
    0 17px 30px rgba(14, 13, 19, 0.36);
}

.home-demo-commands-cta:hover::before,
.home-demo-commands-cta:focus-visible::before {
  opacity: 0.9;
  transform: translateY(1px);
}

.home-demo-commands-cta:active {
  transform: translateY(3px);
  outline: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    inset 0 -2px 0 rgba(0, 0, 0, 0.13),
    0 2px 0 var(--home-cta-dark, #9c7813),
    0 6px 12px rgba(14, 13, 19, 0.28);
}

.home-demo-commands-cta-icon {
  position: relative;
  z-index: 1;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--home-cta, #ffd33f);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 7px;
  background: #24212c;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.46);
  font-size: 1rem;
  transition: color 0.14s ease, background-color 0.14s ease, transform 0.14s ease;
}

.home-demo-commands-cta-icon .fa-solid {
  line-height: 1;
}

.home-demo-commands-cta:hover .home-demo-commands-cta-icon,
.home-demo-commands-cta:focus-visible .home-demo-commands-cta-icon {
  color: #fff1a6;
  background: #181620;
  transform: scale(1.06);
}

.home-demo-commands-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: clamp(0.65rem, 3vw, 1.4rem);
  background:
    radial-gradient(circle at 50% 45%, rgba(48, 43, 61, 0.32), transparent 48%),
    rgba(12, 11, 18, 0.77);
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.home-demo-commands-overlay.is-open {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transition-delay: 0s;
}

.home-demo-commands-modal {
  position: relative;
  overflow: hidden auto;
  width: min(88%, 27rem);
  max-height: calc(100% - 0.5rem);
  display: grid;
  gap: 0.62rem;
  padding: clamp(0.9rem, 2.8vw, 1.25rem);
  color: #f8f3ff;
  border: 2px solid color-mix(in srgb, var(--home-cta, #ffd33f) 68%, #5d586b);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), transparent 38%),
    linear-gradient(180deg, #302c3b, #211e2a);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 6px 0 color-mix(in srgb, var(--home-cta-dark, #9c7813) 62%, #15151d),
    0 24px 52px rgba(0, 0, 0, 0.48);
  font-family: 'Jersey 15', 'PixelArt', monospace;
  transform: translateY(0.5rem) scale(0.9);
  opacity: 0;
  transition: transform 0.22s cubic-bezier(.2, 1.2, .4, 1), opacity 0.18s ease;
}

.home-demo-commands-modal::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--home-cta, #ffd33f) 28% 72%, transparent);
}

.home-demo-commands-overlay.is-open .home-demo-commands-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.home-demo-commands-close {
  position: absolute;
  top: 0.62rem;
  right: 0.62rem;
  z-index: 2;
  width: 1.85rem;
  height: 1.85rem;
  display: grid;
  place-items: center;
  padding: 0;
  color: #a9a4b5;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 6px;
  background: rgba(12, 11, 18, 0.36);
  box-shadow: none;
  cursor: pointer;
}

.home-demo-commands-close:hover,
.home-demo-commands-close:focus-visible {
  color: #15151d;
  background: var(--home-cta, #ffd33f);
  outline: 2px solid rgba(255, 255, 255, 0.24);
  outline-offset: 2px;
}

.home-demo-commands-header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-right: 2.1rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.home-demo-commands-header-icon {
  width: 2.55rem;
  height: 2.55rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #15151d;
  border-radius: 8px;
  background: var(--home-cta, #ffd33f);
  box-shadow: 0 3px 0 var(--home-cta-dark, #9c7813);
  font-size: 1.12rem;
}

.home-demo-commands-header-icon .fa-solid {
  line-height: 1;
}

.home-demo-commands-heading {
  display: grid;
  gap: 0.08rem;
  text-transform: uppercase;
}

.home-demo-commands-heading > span {
  color: var(--home-cta, #ffd33f);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
}

.home-demo-commands-heading h2 {
  margin: 0;
  color: #fff;
  font-family: 'PixelArt', 'Jersey 15', monospace;
  font-size: clamp(1.05rem, 3.2vw, 1.4rem);
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.035em;
}

.home-demo-commands-list {
  display: grid;
  gap: 0.34rem;
}

.home-demo-command-row {
  min-height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.36rem 0.52rem 0.36rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 8px;
  background: rgba(12, 11, 18, 0.24);
}

.home-demo-command-name {
  color: #d8d3e1;
  font-size: 0.96rem;
  line-height: 1;
  text-transform: uppercase;
}

.home-demo-command-keys {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.28rem;
}

.home-demo-command-keys kbd {
  min-width: 1.78rem;
  height: 1.62rem;
  display: inline-grid;
  place-items: center;
  padding: 0 0.34rem;
  color: #15151d;
  border: 1px solid color-mix(in srgb, var(--home-cta-dark, #9c7813) 78%, #15151d);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), transparent 48%),
    var(--home-cta, #ffd33f);
  box-shadow: 0 3px 0 var(--home-cta-dark, #9c7813);
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: 0.95rem;
  line-height: 1;
  text-shadow: none;
  cursor: pointer;
}

.home-demo-command-keys kbd:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.home-demo-commands-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.08rem 0 0;
  color: #aaa5b5;
  font-size: 0.78rem;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.home-demo-commands-hint .fa-solid {
  color: var(--home-cta, #ffd33f);
  font-size: 0.7rem;
}

@keyframes home-demo-commands-cta-in {
  0% { opacity: 0; transform: translateY(-0.7rem) scale(0.86); }
  72% { opacity: 1; transform: translateY(1px) scale(1.035); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 520px), (max-height: 420px) {
  .home-demo-commands-cta {
    width: 2.65rem;
    height: 2.65rem;
    padding: 0.32rem;
    border-radius: 9px;
  }

  .home-demo-commands-cta-icon {
    width: 1.8rem;
    height: 1.8rem;
  }

  .home-demo-commands-modal {
    width: min(94%, 24rem);
    gap: 0.36rem;
    padding: 0.68rem;
    border-radius: 10px;
  }

  .home-demo-commands-header {
    gap: 0.5rem;
    padding-bottom: 0.34rem;
  }

  .home-demo-commands-header-icon {
    width: 2rem;
    height: 2rem;
  }

  .home-demo-command-row {
    min-height: 1.8rem;
    padding: 0.2rem 0.38rem 0.2rem 0.48rem;
  }

  .home-demo-command-name {
    font-size: 0.78rem;
  }

  .home-demo-command-keys kbd {
    min-width: 1.45rem;
    height: 1.3rem;
    padding: 0 0.24rem;
    font-size: 0.76rem;
    box-shadow: 0 2px 0 var(--home-cta-dark, #9c7813);
  }

  .home-demo-commands-hint {
    font-size: 0.64rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home-demo-body.home-demo-is-playing .home-demo-commands-cta {
    animation: none;
  }

  .home-demo-commands-cta,
  .home-demo-commands-overlay,
  .home-demo-commands-modal {
    transition: none;
  }
}

.container-index:has(.game-shell) > .row {
  margin-bottom: clamp(0.45rem, 1.25dvh, 0.9rem) !important;
}

.container-index:has(.game-shell) > .row .d-flex {
  gap: clamp(0.65rem, 1.2vw, 0.9rem);
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.container-index:has(.game-shell) img.title-dashboard {
  width: auto;
  max-width: min(520px, 56vw);
  max-height: clamp(42px, 7dvh, 62px);
  object-fit: contain;
}

.container-index:has(.game-shell) .brand-logo {
  max-width: min(620px, calc(100vw - 8rem));
  transform: scale(0.86);
  transform-origin: top center;
}

.game-shell {
  --game-ink: #363435;
  --game-glass: color-mix(in srgb, var(--surface-glass) 78%, rgba(18, 31, 49, 0.28));
  --game-glass-strong: color-mix(in srgb, var(--button-bg) 82%, rgba(255, 255, 255, 0.2));
  --game-panel-border: color-mix(in srgb, var(--control-border) 68%, transparent);
  --game-player-left: #8ff7ff;
  --game-player-right: #ffe66d;
  --game-danger: #ff4b5c;
  --game-danger-soft: rgba(255, 75, 92, 0.24);
  --game-focus-ring: 0 0 0 3px var(--accent-soft);
  --game-surface-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -2px 0 rgba(54, 52, 53, 0.11),
    0 6px 0 0 rgba(54, 52, 53, 0.9),
    0 22px 52px rgba(18, 16, 24, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  --game-control-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.44),
    inset 0 -2px 0 rgba(54, 52, 53, 0.1),
    0 4px 0 rgba(54, 52, 53, 0.76),
    0 13px 24px rgba(18, 16, 24, 0.17);
  display: grid;
  width: 100%;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(0.7rem, 1.35dvh, 1.05rem);
  min-height: 0;
  padding: 0 clamp(0.5rem, 1.4vw, 1.25rem);
}

.game-topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 0;
  min-height: clamp(4.35rem, 7.2dvh, 5.4rem);
}

.game-stage {
  min-width: 0;
  display: grid;
  grid-template-columns: clamp(12.5rem, 16.5vw, 20.5rem) 800px clamp(12.5rem, 16.5vw, 20.5rem);
  align-items: start;
  justify-content: center;
  gap: clamp(0.75rem, 1.45vw, 1.25rem);
}

.player-info {
  position: relative;
  overflow: hidden;
  min-width: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: start;
  justify-items: start;
  gap: clamp(1rem, 1.4vw, 1.35rem);
  min-height: clamp(10.2rem, 15dvh, 13rem);
  width: 100%;
  padding: clamp(1rem, 1.3vw, 1.45rem);
  color: var(--button-text);
  text-align: left;
  border: 2px solid var(--game-panel-border);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.45), transparent 46%),
    var(--game-glass-strong);
  box-shadow: var(--game-surface-shadow);
  backdrop-filter: blur(14px) saturate(1.14);
  opacity: 0.96;
}

.player-info::before,
.bot-difficulty-panel::before,
.training-setting-panel::before,
.match-center::before {
  content: "";
  position: absolute;
  inset: 3px 3px auto;
  height: 42%;
  border-radius: 9px 9px 16px 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), transparent);
  opacity: 0.72;
  pointer-events: none;
}

.player-1-info {
  border-left-color: var(--game-player-left);
  box-shadow:
    inset 4px 0 0 color-mix(in srgb, var(--game-player-left) 64%, transparent),
    var(--game-surface-shadow);
}

.player-2-info {
  border-right-color: var(--game-player-right);
  justify-items: end;
  text-align: right;
  box-shadow:
    inset -4px 0 0 color-mix(in srgb, var(--game-player-right) 66%, transparent),
    var(--game-surface-shadow);
}

.player-info hr {
  display: none;
}

.player-meta {
  min-width: 0;
  align-self: center;
}

.player-side-label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--button-icon);
  font-size: clamp(1.08rem, 1.1vw, 1.32rem);
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.player-login-container h2 {
  max-width: 100%;
  margin: 0;
  color: var(--button-text);
  font-size: clamp(1.75rem, 1.95vw, 2.45rem);
  line-height: 0.96;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.56);
}

.player-elo {
  display: block;
  margin-top: 0.42rem;
  color: color-mix(in srgb, var(--button-text) 74%, transparent);
  font-size: clamp(1.15rem, 1.18vw, 1.38rem);
  line-height: 1;
  text-shadow: none;
}

.network {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  width: max-content;
  max-width: 100%;
  padding: 0.34rem 0.72rem;
  color: var(--button-text);
  font-size: clamp(1.05rem, 1.04vw, 1.22rem);
  line-height: 1;
  border: 1px solid color-mix(in srgb, var(--control-border) 74%, transparent);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.44), transparent 54%),
    color-mix(in srgb, var(--secondary-button-bg) 84%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 0 rgba(54, 52, 53, 0.32);
}

.player-2-info .network {
  justify-self: end;
}

.network .network-icon {
  color: var(--button-icon);
  margin-right: 0;
  font-size: 1rem;
  position: static;
}

.network .ping {
  font-family: 'Numbers';
  font-size: 1.22rem;
}

.network-unit {
  opacity: 0.78;
}

.player-2-column {
  display: grid;
  gap: clamp(0.8rem, 1.1vw, 1rem);
  width: 100%;
}

.player-2-column .player-info.player-2-info {
  width: 100%;
}

.bot-difficulty-panel,
.training-setting-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: clamp(0.6rem, 0.9vw, 0.8rem);
  width: 100%;
  padding: clamp(0.85rem, 1.12vw, 1.25rem);
  border: 2px solid var(--game-panel-border);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 48%),
    var(--game-glass);
  box-shadow: var(--game-surface-shadow);
  backdrop-filter: blur(14px) saturate(1.12);
}

.training-setting-panel.setting-panel-hidden {
  display: none;
}

.bot-difficulty-label,
.training-setting-label {
  color: var(--accent);
  font-size: clamp(1.12rem, 1.18vw, 1.38rem);
  line-height: 1.04;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(54, 52, 53, 0.35), 0 0 12px var(--accent-soft);
}

.map-switcher,
.team-mode-switcher {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  gap: 0.4rem;
}

.map-option,
.team-mode-option {
  min-width: 0;
  min-height: clamp(2.6rem, 3.1vw, 3rem);
  padding: 0.42rem 0.56rem;
  color: var(--button-text);
  font-family: inherit;
  font-size: clamp(1.16rem, 1.16vw, 1.36rem);
  line-height: 1.03;
  border: 2px solid color-mix(in srgb, var(--control-border) 64%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), transparent 48%),
    var(--secondary-button-bg);
  box-shadow: var(--game-control-shadow);
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.map-option:hover,
.map-option.active,
.team-mode-option:hover,
.team-mode-option.active {
  color: var(--button-text);
  border-color: var(--accent);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), transparent 48%),
    var(--secondary-button-bg-hover);
  transform: translateY(-2px);
}

.map-option.active,
.team-mode-option.active {
  box-shadow: var(--game-control-shadow), var(--game-focus-ring);
}

.bot-difficulty-switcher {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  gap: 0.4rem;
}

.bot-difficulty-option {
  min-width: 0;
  min-height: clamp(2.6rem, 3.1vw, 3rem);
  padding: 0.42rem 0.56rem;
  color: var(--button-text);
  font-family: inherit;
  font-size: clamp(1.16rem, 1.16vw, 1.36rem);
  line-height: 1.03;
  border: 2px solid color-mix(in srgb, var(--control-border) 64%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), transparent 48%),
    var(--secondary-button-bg);
  box-shadow: var(--game-control-shadow);
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.bot-difficulty-option:hover,
.bot-difficulty-option.active {
  color: var(--button-text);
  border-color: var(--accent);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), transparent 48%),
    var(--secondary-button-bg-hover);
  transform: translateY(-2px);
}

.bot-difficulty-option.active {
  box-shadow: var(--game-control-shadow), var(--game-focus-ring);
}

.network.not-ok {
  color: #6b1018;
  border-color: rgba(255, 75, 92, 0.7);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), transparent 54%),
    rgba(255, 218, 222, 0.88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.54), 0 2px 0 rgba(107, 16, 24, 0.42);
}

.network.not-ok .network-icon {
  color: var(--game-danger);
}

.match-center {
  position: relative;
  overflow: hidden;
  min-width: min(100%, 17rem);
  display: grid;
  place-items: center;
  gap: 0.28rem;
  padding: 0.52rem clamp(1.25rem, 2.4vw, 2.1rem) 0.62rem;
  border: 3px solid var(--game-ink);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.1) 42%, rgba(54, 52, 53, 0.1) 100%),
    linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 78%, #ff8a3d 22%));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.62),
    inset 0 -3px 0 rgba(54, 52, 53, 0.16),
    0 6px 0 0 var(--game-ink),
    0 20px 42px rgba(18, 16, 24, 0.22);
  backdrop-filter: blur(10px);
  opacity: 1;
}

.match-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: color-mix(in srgb, var(--button-text) 82%, transparent);
  font-size: 1.05rem;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.48);
}

.match-label .fa-solid {
  color: var(--button-icon);
  font-size: 1rem;
}

.match-scoreboard {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  color: var(--game-ink);
  font-family: 'Numbers';
  font-size: clamp(2.15rem, 3.6vw, 3.2rem);
  line-height: 0.9;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.68),
    0 3px 0 rgba(54, 52, 53, 0.24),
    0 8px 14px rgba(18, 16, 24, 0.14);
}

.match-separator {
  color: var(--button-icon);
  opacity: 0.9;
}

.match-scoreboard span[id^="score-"] {
  display: inline-block;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

.match-scoreboard span[id^="score-"].is-leading {
  color: #ffffff;
  text-shadow: 0 3px 0 rgba(54, 52, 53, 0.38), 0 0 18px rgba(255, 255, 255, 0.74);
}

@keyframes score-pop {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.45);
    color: #ffffff;
  }
  65% {
    transform: scale(0.92);
  }
  100% {
    transform: scale(1);
  }
}

.match-scoreboard span[id^="score-"].score-pop {
  animation: score-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.game-icon-button {
  position: absolute;
  top: 50%;
  right: clamp(0.25rem, 1.2vw, 1rem);
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  color: var(--button-icon);
  border: 2px solid var(--control-border);
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 46%),
    var(--secondary-button-bg);
  box-shadow: var(--game-control-shadow);
  transform: translateY(-50%);
  backdrop-filter: blur(10px);
  opacity: 0.94;
  transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease, opacity 0.14s ease;
}

.game-icon-button:hover {
  border-color: var(--accent);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.6), transparent 46%),
    var(--secondary-button-bg-hover);
  opacity: 1;
  transform: translateY(calc(-50% - 2px));
}

.ragequit-button {
  position: absolute;
  top: 50%;
  left: clamp(0.25rem, 1.2vw, 1rem);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  border: 2px solid rgba(255, 218, 222, 0.82);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 46%),
    linear-gradient(180deg, #ff5a66, #b8172a);
  color: white;
  font-family: inherit;
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 4px 0 0 rgba(93, 18, 28, 0.84),
    0 14px 28px rgba(18, 16, 24, 0.18),
    0 0 0 2px var(--game-danger-soft);
  transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}

.ragequit-button:hover {
  border-color: white;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent 46%),
    linear-gradient(180deg, #ff6974, #c3172d);
  transform: translateY(calc(-50% - 2px));
}

.ragequit-button:active {
  transform: translateY(calc(-50% + 1px));
}

.ragequit-button .fa-fire {
  color: #ff8a3d;
}

.ragequit-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(139, 0, 0, 0.45);
  animation: ragequit-flash 1.1s ease-out forwards;
  pointer-events: none;
}

.ragequit-overlay-text {
  font-family: 'PixelArt';
  font-size: clamp(2rem, 6vw, 3.5rem);
  color: #fff;
  text-shadow: 0 0 12px rgba(255, 60, 60, 0.9), 0 6px 0 rgba(54, 52, 53, 0.8);
  animation: ragequit-text-pop 1.1s cubic-bezier(.36, 1.5, .5, 1) forwards;
}

@keyframes ragequit-flash {
  0% { background: rgba(139, 0, 0, 0.9); }
  100% { background: rgba(139, 0, 0, 0.15); }
}

@keyframes ragequit-text-pop {
  0% { transform: scale(2.4) rotate(-8deg); opacity: 0; }
  45% { transform: scale(1) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.game-modal-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  /* No backdrop-filter: this scrim sits directly on top of the live Phaser <canvas>, and blurring a
     continuously-repainting WebGL layer makes the browser re-sample it every frame, which clips the
     filter to the canvas bounds and tears the modal edges. A solid scrim avoids that entirely. */
  background: rgba(12, 20, 34, 0.7);
  animation: game-modal-overlay-in 0.18s ease-out;
}

.game-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
  width: min(88%, 26rem);
  padding: 1.9rem 1.6rem 1.6rem;
  border-radius: 1.1rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 46%),
    rgba(255, 248, 210, 0.96);
  border: 2px solid #ffcc4d;
  box-shadow: 0 6px 0 0 rgba(54, 52, 53, 0.62), 0 22px 42px rgba(18, 16, 24, 0.35);
  color: var(--button-text);
  font-family: 'PixelArt';
  animation: game-modal-pop 0.22s cubic-bezier(.36, 1.4, .5, 1);
}

.game-modal-icon {
  font-size: 2.4rem;
  color: #d9482c;
  text-shadow: 0 0 12px rgba(255, 90, 60, 0.6);
}

.game-modal-title {
  margin: 0;
  font-size: 1.9rem;
  line-height: 1.1;
}

.game-modal-text {
  margin: 0;
  font-size: 1.15rem;
  opacity: 0.82;
}

.game-modal-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.9rem;
  width: 100%;
  justify-content: center;
}

.game-modal-button {
  flex: 1 1 0;
  max-width: 10rem;
  padding: 0.7rem 1rem;
  border: 2px solid transparent;
  border-radius: 0.7rem;
  font-family: inherit;
  font-size: 1.1rem;
  cursor: pointer;
  transition: transform 0.08s ease, filter 0.12s ease;
  box-shadow: 0 4px 0 0 rgba(54, 52, 53, 0.55);
}

.game-modal-button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 0 rgba(54, 52, 53, 0.55);
}

.game-modal-button-secondary {
  background: #f4f1e6;
  color: var(--button-text);
  border-color: rgba(54, 52, 53, 0.25);
}

.game-modal-button-secondary:hover {
  filter: brightness(0.97);
}

.game-modal-button-danger {
  background: linear-gradient(180deg, #ff6b4d, #d9482c);
  color: #fff;
  border-color: #b83a22;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.game-modal-button-danger:hover {
  filter: brightness(1.05);
}

/* Takes the home "JOUER EN LIGNE" CTA's shape — glossy top sheen, thick rim, in-colour 3D depth —
   but in TEAL so it pops on the modal's warm cream/gold background instead of the yellow-on-yellow
   the theme accent produced. Fixed hues (not theme vars) so it stays readable in every theme. */
.game-modal-button-primary {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 46%),
    linear-gradient(180deg, #23c9b8, #0e9f92);
  border: 2px solid #0b877b;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -3px 0 rgba(0, 0, 0, 0.14),
    0 5px 0 0 #0b6f66,
    0 11px 18px rgba(11, 60, 56, 0.3);
}

/* Top gloss, same idea as the home CTA's ::before. */
.game-modal-button-primary::before {
  content: "";
  position: absolute;
  inset: 2px 2px auto;
  height: 45%;
  border-radius: 8px 8px 13px 13px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent);
  opacity: 0.65;
  pointer-events: none;
}

/* Keep the label and icon above the gloss layer. */
.game-modal-button-primary > span {
  position: relative;
  z-index: 1;
}

.game-modal-button-primary .fa-solid {
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.9em;
}

.game-modal-button-primary:hover {
  color: #fff;
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    inset 0 -3px 0 rgba(0, 0, 0, 0.14),
    0 7px 0 0 #0b6f66,
    0 16px 26px rgba(11, 60, 56, 0.34);
}

/* Presses into its own 3D depth (overrides the generic .game-modal-button:active). */
.game-modal-button-primary:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 0 rgba(0, 0, 0, 0.14),
    0 2px 0 0 #0b6f66,
    0 5px 10px rgba(11, 60, 56, 0.3);
}

/* The home-page demo runs the training scene in an iframe purely as a backdrop — no pausing it. */
body.home-demo-body #pause-button {
  display: none;
}

/* --- Public-match "Recherche d'un adversaire…" waiting overlay -------------------------------- */
.matchmaking-overlay {
  position: absolute;
  inset: 0;
  z-index: 22;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Same reason as .game-modal-overlay: no backdrop-filter over the live Phaser canvas (avoids the
     re-sampling seam/clip artifact). */
  background: rgba(12, 20, 34, 0.7);
  animation: game-modal-overlay-in 0.18s ease-out;
}

/* Themed like the home "Choisis ton match" modal: panel/border/text/cta all pull from the
   --home-* palette so the card follows the player's chosen theme (dark, sunset, night, light…)
   instead of the old fixed cream/gold sheet. */
.matchmaking-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.7rem;
  width: min(90%, 27rem);
  padding: 2rem 1.7rem 1.7rem;
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--home-panel, #262333) 96%, #ffffff 4%), var(--home-panel, #262333));
  border: 1px solid var(--home-border, rgba(255, 255, 255, 0.18));
  box-shadow:
    0 8px 0 rgba(0, 0, 0, 0.3),
    0 28px 64px rgba(0, 0, 0, 0.34);
  color: var(--home-text, #f6f3ff);
  font-family: 'Jersey 15', 'PixelArt', system-ui, sans-serif;
  animation: game-modal-pop 0.22s cubic-bezier(.36, 1.4, .5, 1);
}

.matchmaking-spinner {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  font-size: 1.6rem;
  color: #15151d;
  border-radius: 12px;
  background: var(--home-cta, var(--accent));
  box-shadow: 0 4px 0 var(--home-cta-dark, #c29c24);
  animation: matchmaking-spin 1.6s linear infinite;
}

.matchmaking-title {
  margin: 0;
  color: var(--home-text, #f6f3ff);
  font-size: 1.7rem;
  line-height: 1.05;
}

.matchmaking-status {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0.1rem 0;
  color: var(--home-muted, rgba(255, 255, 255, 0.65));
  font-size: 1.75rem;
}

.matchmaking-count {
  font-variant-numeric: tabular-nums;
}

.matchmaking-timer {
  font-variant-numeric: tabular-nums;
  min-width: 2.6em;
  text-align: left;
}

.matchmaking-dot {
  opacity: 0.5;
}

.matchmaking-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.9rem;
  width: 100%;
  justify-content: center;
}

/* Buttons re-skinned to the theme palette (they share the generic .game-modal-button-* classes
   used by the pause/ragequit modals, so these overrides are scoped to the matchmaking card only). */
.matchmaking-actions .game-modal-button {
  max-width: 12rem;
  border-radius: 10px;
  white-space: nowrap;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.28);
}

.matchmaking-actions .game-modal-button-primary {
  color: #15151d;
  background: var(--home-cta, var(--accent));
  border: 1px solid var(--home-cta-dark, #c29c24);
  text-shadow: none;
  box-shadow: 0 5px 0 var(--home-cta-dark, #c29c24);
}

.matchmaking-actions .game-modal-button-primary::before {
  display: none;
}

.matchmaking-actions .game-modal-button-primary .fa-solid {
  color: #15151d;
}

.matchmaking-actions .game-modal-button-primary:hover {
  color: #15151d;
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow: 0 7px 0 var(--home-cta-dark, #c29c24);
}

.matchmaking-actions .game-modal-button-primary:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--home-cta-dark, #c29c24);
}

.matchmaking-actions .game-modal-button-secondary {
  color: var(--home-text, #f6f3ff);
  background: var(--home-control, #15151d);
  border: 1px solid var(--home-control-border, rgba(255, 255, 255, 0.18));
}

.matchmaking-actions .game-modal-button-secondary:hover {
  filter: none;
  color: var(--home-text, #f6f3ff);
  border-color: color-mix(in srgb, var(--home-cta, var(--accent)) 42%, var(--home-control-border, transparent));
}

.matchmaking-feedback {
  min-height: 1.1rem;
  font-size: 0.98rem;
  color: var(--home-cta, var(--accent));
  opacity: 0;
  transition: opacity 0.15s ease;
}

.matchmaking-feedback.is-visible {
  opacity: 1;
}

@keyframes matchmaking-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes game-modal-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes game-modal-pop {
  0% { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

#toggle-sound #sound-icon {
  color: var(--button-icon);
  font-size: 1.22rem;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.48));
}

.game-arena {
  position: relative;
  min-width: 0;
  display: grid;
  place-items: center;
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 0.8rem;
  scrollbar-color: rgba(255, 255, 255, 0.45) rgba(18, 31, 49, 0.2);
}

/* Central match score — overlaid at the top of the court, in the players' line of sight. It's
   deliberately PROMINENT between points (a moment to read it) and fades SUBTLE during a live rally
   (.is-live, toggled from update()) so it never distracts while the ball is in play. Sizes fluidly
   with clamp() to stay legible from small phones to large desktops. */
.match-hud-score {
  position: absolute;
  top: clamp(0.4rem, 2.1%, 1rem);
  left: 50%;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.42rem, 1.4vw, 0.9rem);
  max-width: 92%;
  padding: clamp(0.28rem, 0.8vw, 0.45rem) clamp(0.82rem, 1.9vw, 1.35rem) clamp(0.34rem, 0.85vw, 0.52rem);
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.26);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), transparent 42%),
    rgba(15, 18, 28, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 4px 0 rgba(20, 18, 26, 0.72),
    0 10px 22px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(3px);
  font-family: 'Jersey 15', 'PixelArt', system-ui, monospace;
  font-size: clamp(2rem, 5.2vw, 3.15rem);
  line-height: 0.82;
  pointer-events: none;
  user-select: none;
  /* Prominent (between points) — the default state. */
  opacity: 1;
  transform: translateX(-50%) scale(1);
  transform-origin: top center;
  transition: opacity 0.26s ease, transform 0.26s ease, background-color 0.26s ease, border-color 0.26s ease, box-shadow 0.26s ease;
}

.match-hud-score::before,
.match-hud-score::after {
  content: '';
  position: absolute;
  left: 0.45rem;
  right: 0.45rem;
  height: 2px;
  pointer-events: none;
}

.match-hud-score::before {
  top: 0.25rem;
  background: linear-gradient(90deg, var(--game-player-left, #8ff7ff) 0 42%, transparent 42% 58%, var(--game-player-right, #ffe66d) 58% 100%);
  opacity: 0.9;
}

.match-hud-score::after {
  bottom: 0.18rem;
  background: rgba(255, 255, 255, 0.14);
}

/* Live rally — recede so the ball/blobs stay the focus. */
.match-hud-score.is-live,
.match-hud-score.is-countdown-muted {
  opacity: 0.2;
  transform: translateX(-50%) scale(0.74);
  border-color: rgba(255, 255, 255, 0.14);
  background-color: rgba(13, 17, 28, 0.2);
  box-shadow: none;
}

.match-hud-score .hud-score {
  display: inline-block;
  min-width: 1.05ch;
  text-align: center;
  color: #fff;
  text-shadow: 0 3px 0 rgba(15, 18, 28, 0.82);
  transition: text-shadow 0.2s ease, filter 0.2s ease;
}

.match-hud-score .hud-score-left {
  color: var(--game-player-left, #8ff7ff);
  text-shadow: 0 3px 0 rgba(15, 18, 28, 0.82), 0 0 11px color-mix(in srgb, var(--game-player-left, #8ff7ff) 35%, transparent);
}

.match-hud-score .hud-score-right {
  color: var(--game-player-right, #ffe66d);
  text-shadow: 0 3px 0 rgba(15, 18, 28, 0.82), 0 0 11px color-mix(in srgb, var(--game-player-right, #ffe66d) 35%, transparent);
}

.match-hud-score .hud-score-sep {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.66em;
  transform: translateY(-0.02em);
}

/* Punchy point feedback: the scoring side's number pops and glows in its team colour. */
.match-hud-score .hud-score.is-scored {
  animation: hud-score-pop 0.56s cubic-bezier(.34, 1.56, .5, 1);
}

@keyframes hud-score-pop {
  0% { transform: scale(1); }
  28% { transform: scale(1.45) translateY(-0.05em); text-shadow: 0 3px 0 rgba(15, 18, 28, 0.82), 0 0 15px currentColor, 0 0 28px currentColor; }
  100% { transform: scale(1); text-shadow: none; }
}

.point-callout {
  position: absolute;
  top: clamp(5.1rem, 15.4%, 6.6rem);
  left: 50%;
  z-index: 7;
  max-width: min(86%, 34rem);
  padding: clamp(0.26rem, 0.8vw, 0.42rem) clamp(0.7rem, 1.8vw, 1rem);
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 45%),
    rgba(15, 18, 28, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 3px 0 rgba(20, 18, 26, 0.68),
    0 12px 24px rgba(0, 0, 0, 0.18);
  color: #fff7bc;
  font-family: 'Jersey 15', 'PixelArt', system-ui, monospace;
  font-size: clamp(1.1rem, 2.35vw, 1.62rem);
  line-height: 0.92;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 2px 0 rgba(15, 18, 28, 0.82), 0 0 10px rgba(255, 211, 63, 0.28);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transform: translateX(-50%) scale(0.78);
  /* Fade/scale out when .is-visible is removed (i.e. the serve is struck). */
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.point-callout.is-visible {
  /* Pop in and HOLD (the banner stays until the serve is struck, then the base transition fades
     it out on class removal) — no auto-hide keyframe. */
  animation: point-callout-pop-in 0.5s cubic-bezier(.2, .88, .22, 1) both;
}

.point-callout.is-left {
  color: #c9fbff;
  text-shadow: 0 2px 0 rgba(15, 18, 28, 0.82), 0 0 10px color-mix(in srgb, var(--game-player-left, #8ff7ff) 36%, transparent);
}

.point-callout.is-right {
  color: #fff3a0;
  text-shadow: 0 2px 0 rgba(15, 18, 28, 0.82), 0 0 10px color-mix(in srgb, var(--game-player-right, #ffe66d) 36%, transparent);
}

@keyframes point-callout-pop-in {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-0.32rem) scale(0.72);
  }

  55% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1.12);
  }

  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* Nameplates that pop up under each blobby between points (same window as the serve callout),
   glued to the blob position from game.js. Purely cosmetic, never interactive. */
.blob-name-tag {
  --name-tag-scale: 1;
  --overlay-x: 0px;
  --overlay-y: 0px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 6;
  padding: 0.14rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 55%),
    rgba(15, 18, 28, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 2px 0 rgba(20, 18, 26, 0.6),
    0 6px 14px rgba(0, 0, 0, 0.22);
  color: #fff;
  font-family: 'Jersey 15', 'PixelArt', system-ui, monospace;
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  max-width: 8.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 0 rgba(15, 18, 28, 0.82);
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transform: translate3d(var(--overlay-x), var(--overlay-y), 0) translate(-50%, 0) scale(var(--name-tag-scale));
  transform-origin: top center;
  transition: opacity 0.2s ease;
  will-change: transform, opacity;
}

.blob-name-tag.is-visible {
  opacity: 1;
  animation: blob-name-tag-pop-in 0.34s cubic-bezier(.2, .88, .22, 1) both;
}

.blob-name-tag.is-left {
  color: #c9fbff;
  text-shadow: 0 2px 0 rgba(15, 18, 28, 0.82), 0 0 8px color-mix(in srgb, var(--game-player-left, #8ff7ff) 34%, transparent);
}

.blob-name-tag.is-right {
  color: #fff3a0;
  text-shadow: 0 2px 0 rgba(15, 18, 28, 0.82), 0 0 8px color-mix(in srgb, var(--game-player-right, #ffe66d) 34%, transparent);
}

@keyframes blob-name-tag-pop-in {
  0% {
    opacity: 0;
    transform: translate3d(var(--overlay-x), var(--overlay-y), 0) translate(-50%, -0.28rem) scale(calc(var(--name-tag-scale) * 0.7));
  }

  60% {
    opacity: 1;
    transform: translate3d(var(--overlay-x), var(--overlay-y), 0) translate(-50%, 0) scale(calc(var(--name-tag-scale) * 1.08));
  }

  100% {
    opacity: 1;
    transform: translate3d(var(--overlay-x), var(--overlay-y), 0) translate(-50%, 0) scale(var(--name-tag-scale));
  }
}

.reconnect-banner {
  position: absolute;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 48%),
    rgba(255, 248, 210, 0.94);
  border: 2px solid #ffcc4d;
  color: var(--button-text);
  font-family: inherit;
  font-size: 1.14rem;
  white-space: nowrap;
  box-shadow: 0 5px 0 0 rgba(54, 52, 53, 0.62), 0 18px 34px rgba(18, 16, 24, 0.2);
}

.reconnect-banner .fa-triangle-exclamation {
  color: #ffcc4d;
}

#game {
  width: 800px;
  aspect-ratio: 4 / 3;
  flex: 0 0 auto;
  position: relative;
  text-align: center;
  margin-top: 0;
  border: 4px solid var(--game-ink);
  border-radius: 16px;
  background: var(--stage-bg);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 0 2px rgba(255, 255, 255, 0.08),
    0 9px 0 0 var(--game-ink),
    0 30px 72px rgba(18, 16, 24, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

#game canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 11px;
  box-shadow: none;
}

.html-blob-marker {
  --blob-marker-scale: 1;
  --overlay-x: 0px;
  --overlay-y: 0px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 11;
  width: 24px;
  height: 24px;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--overlay-x), var(--overlay-y), 0) translate(-50%, -100%) translateY(-2px) scale(var(--blob-marker-scale));
  transform-origin: 50% 100%;
  transition: opacity 120ms ease;
  will-change: transform;
  background: none;
  filter: drop-shadow(0 2px 0 var(--screen-shadow));
}

.html-blob-marker.is-visible {
  opacity: 1;
  animation: html-blob-marker-bob 960ms steps(2, end) infinite;
}

.html-blob-marker svg {
  display: block;
  width: 100%;
  height: 100%;
  shape-rendering: crispEdges;
}

.html-blob-marker .pixel-marker-outline { fill: var(--screen-bg); }
.html-blob-marker .pixel-marker-fill { fill: var(--screen-accent); }
.html-blob-marker .pixel-marker-highlight { fill: var(--screen-ink); }
body[data-ui-mode='light'] .html-blob-marker .pixel-marker-outline { fill: var(--screen-ink); }
body[data-ui-mode='light'] .html-blob-marker .pixel-marker-fill { fill: var(--screen-accent-ink); }
body[data-ui-mode='light'] .html-blob-marker .pixel-marker-highlight { fill: var(--screen-accent); }

@keyframes html-blob-marker-bob {
  0%,
  100% {
    transform: translate3d(var(--overlay-x), var(--overlay-y), 0) translate(-50%, -100%) translateY(-2px) scale(var(--blob-marker-scale));
  }

  50% {
    transform: translate3d(var(--overlay-x), var(--overlay-y), 0) translate(-50%, -100%) translateY(-4px) scale(var(--blob-marker-scale));
  }
}

@media (prefers-reduced-motion: reduce) {
  .html-blob-marker.is-visible { animation: none; }
}

.game-emote-layer {
  position: absolute;
  inset: 0;
  z-index: 23;
  pointer-events: none;
  overflow: visible;
}

.game-emote-bubble {
  --overlay-x: 0px;
  --overlay-y: 0px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  max-width: min(18rem, 34%);
  padding: 0.54rem 0.78rem 0.6rem;
  color: #363435;
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: clamp(1.35rem, 2.4vw, 1.78rem);
  line-height: 0.9;
  letter-spacing: 0;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: break-word;
  border: 3px solid #363435;
  border-radius: 13px;
  background-clip: padding-box;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 246, 218, 0.96) 46%),
    #fff6da;
  box-shadow:
    0 4px 0 rgba(54, 52, 53, 0.92),
    0 14px 26px rgba(18, 16, 24, 0.24);
  pointer-events: none;
  transform: translate3d(var(--overlay-x), var(--overlay-y), 0) translate(-50%, -100%) scale(1);
  transform-origin: 50% calc(100% + 0.5rem);
  animation: game-emote-bubble-in 420ms both;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.game-emote-bubble::before,
.game-emote-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  transform: translateX(-50%);
}

.game-emote-bubble::before {
  bottom: -17px;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 17px solid #363435;
}

.game-emote-bubble::after {
  bottom: -11px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 12px solid #fff6da;
}

/* Entrée façon Blobby : la bulle jaillit du blob comme une gelée (trop large, trop haute, puis
   posée), en pas francs comme une animation de sprite. Sortie : elle se tasse, s'étire et se rétracte
   vers le blob (game.js pose .is-leaving avant de la retirer). */
@keyframes game-emote-bubble-in {
  0% { opacity: 0; transform: translate3d(var(--overlay-x), var(--overlay-y), 0) translate(-50%, -100%) scale(0.2); animation-timing-function: steps(2, end); }
  25% { opacity: 1; transform: translate3d(var(--overlay-x), var(--overlay-y), 0) translate(-50%, -100%) scale(1.2, 0.78); animation-timing-function: steps(2, end); }
  50% { transform: translate3d(var(--overlay-x), var(--overlay-y), 0) translate(-50%, -100%) scale(0.9, 1.12); animation-timing-function: steps(2, end); }
  75% { transform: translate3d(var(--overlay-x), var(--overlay-y), 0) translate(-50%, -100%) scale(1.05, 0.96); animation-timing-function: steps(1, end); }
  100% { opacity: 1; transform: translate3d(var(--overlay-x), var(--overlay-y), 0) translate(-50%, -100%) scale(1); }
}

.game-emote-bubble.is-leaving { animation: game-emote-bubble-out 280ms both; }

@keyframes game-emote-bubble-out {
  0% { opacity: 1; transform: translate3d(var(--overlay-x), var(--overlay-y), 0) translate(-50%, -100%) scale(1); animation-timing-function: steps(2, end); }
  30% { transform: translate3d(var(--overlay-x), var(--overlay-y), 0) translate(-50%, -100%) scale(1.14, 0.84); animation-timing-function: steps(2, end); }
  60% { opacity: 1; transform: translate3d(var(--overlay-x), var(--overlay-y), 0) translate(-50%, -100%) scale(0.8, 1.12); animation-timing-function: steps(2, end); }
  100% { opacity: 0; transform: translate3d(var(--overlay-x), var(--overlay-y), 0) translate(-50%, -100%) scale(0.1); }
}

@media (prefers-reduced-motion: reduce) {
  .game-emote-bubble { animation: none; }
  .game-emote-bubble.is-leaving { animation: none; opacity: 0; transition: opacity 200ms; }
}

@media (max-width: 1120px) {
  .game-stage {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "left right"
      "arena arena";
    align-items: start;
    gap: 0.75rem;
  }

  .player-1-info {
    grid-area: left;
  }

  .player-2-column {
    grid-area: right;
  }

  .game-arena {
    grid-area: arena;
    justify-content: center;
  }

  .player-info {
    min-height: 5.8rem;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto;
    align-items: center;
    gap: 0.7rem;
  }

  .player-info::before,
  .bot-difficulty-panel::before,
  .training-setting-panel::before {
    height: 36%;
  }

  .player-2-info {
    justify-items: start;
    text-align: left;
  }

  .player-2-info .network {
    justify-self: end;
  }

  .player-2-column {
    align-content: start;
  }

  .bot-difficulty-panel,
  .training-setting-panel {
    grid-template-columns: minmax(8rem, auto) minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
  }
}

@media (max-width: 900px) {
  .container-index:has(.game-shell) .brand-logo {
    max-width: min(520px, calc(100vw - 4rem));
    transform: scale(0.86);
  }

  .container-index:has(.game-shell) img.title-dashboard {
    max-width: min(430px, 78vw);
  }

  .game-shell {
    padding: 0 0.45rem 1.2rem;
  }

  .match-center {
    min-width: 0;
    width: min(100%, 18.5rem);
  }

  .player-info,
  .player-2-info {
    width: 100%;
    min-height: 5.4rem;
  }

  .player-2-info .network {
    justify-self: start;
  }

  .game-icon-button {
    width: 2.9rem;
    height: 2.9rem;
  }
}

@media (min-width: 901px) and (max-height: 760px) {
  .container-index:has(.game-shell) {
    padding-top: 0.35rem;
    padding-bottom: 0.2rem;
  }

  .container-index:has(.game-shell) img.title-dashboard {
    max-height: 42px;
  }

  .container-index:has(.game-shell) .brand-logo {
    transform: scale(0.76);
  }

  .game-shell {
    gap: 0.45rem;
  }

  .game-topbar {
    min-height: 3.7rem;
  }

  .match-center {
    padding-top: 0.38rem;
    padding-bottom: 0.46rem;
  }

  .match-scoreboard {
    font-size: 2.45rem;
  }

  .game-stage {
    grid-template-columns: clamp(11.5rem, 16.5vw, 13.2rem) minmax(0, 720px) clamp(11.5rem, 16.5vw, 13.2rem);
    gap: clamp(0.65rem, 1.25vw, 1rem);
  }

  .player-2-column {
    max-height: calc(100dvh - 9.5rem);
    overflow-y: auto;
    padding-right: 0.22rem;
    scrollbar-color: rgba(255, 255, 255, 0.52) rgba(18, 31, 49, 0.18);
  }

  #game {
    width: 720px;
  }

  .player-info {
    min-height: 7rem;
    padding: 0.72rem;
  }

  .player-login-container h2 {
    font-size: clamp(1.45rem, 1.65vw, 2rem);
  }

  .game-icon-button {
    width: 3.25rem;
    height: 3.25rem;
  }
}

@media (max-width: 520px) {
  .container-index:has(.game-shell) {
    padding-left: 0;
    padding-right: 0;
  }

  .container-index:has(.game-shell) img.title-dashboard {
    max-width: min(300px, 68vw);
    max-height: 42px;
  }

  .container-index:has(.game-shell) .brand-logo {
    max-width: calc(100vw - 4.8rem);
    transform: none;
  }

  .game-topbar {
    display: grid;
    grid-template-columns: 0 minmax(0, 1fr) 2.75rem;
    align-items: center;
    gap: 0.45rem;
    min-height: 4rem;
  }

  .match-center {
    grid-column: 2;
    width: 100%;
    justify-self: center;
    padding-left: 0.65rem;
    padding-right: 0.65rem;
  }

  .match-label {
    font-size: 0.95rem;
  }

  .match-scoreboard {
    font-size: 2.6rem;
  }

  .game-stage {
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "right"
      "arena";
  }

  .player-info,
  .player-2-info {
    min-height: 5.7rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
  }

  .player-meta {
    align-self: auto;
  }

  .player-side-label {
    font-size: 1.08rem;
  }

  .player-login-container h2 {
    font-size: 1.58rem;
  }

  .player-elo {
    font-size: 1.12rem;
  }

  .network {
    padding: 0.2rem 0.42rem;
  }

  .network-unit {
    display: none;
  }

  .game-icon-button {
    position: static;
    grid-column: 3;
    justify-self: end;
    width: 2.75rem;
    height: 2.75rem;
    transform: none;
  }

  .game-icon-button:hover {
    transform: translateY(-2px);
  }

  .bot-difficulty-panel,
  .training-setting-panel {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .game-arena {
    justify-content: start;
  }
}

body:has(.game-shell) {
  --home-bg: #17171f;
  --home-rail: #171720;
  --home-panel: #262333;
  --home-panel-2: #211f2d;
  --home-border: #353247;
  --home-muted: #928f9d;
  --home-text: #f6f3ff;
  --home-soft-text: #c7c2d1;
  --home-control: #15151d;
  --home-control-border: #3b384d;
  --home-cta: #ffd33f;
  --home-cta-dark: #c29c24;
  --home-stage-outline: #2f2d3f;
  min-height: 100dvh;
  overflow-x: hidden;
  background: var(--home-bg) !important;
  color: var(--home-text);
}

body[data-theme="sunset"]:has(.game-shell) {
  --home-bg: #1d171f;
  --home-panel: #30202d;
  --home-panel-2: #261b28;
  --home-cta: #ffb84a;
  --home-cta-dark: #b86b2f;
  --home-stage-outline: #5f3544;
}

body[data-theme="night"]:has(.game-shell) {
  --home-bg: #111621;
  --home-panel: #1b2333;
  --home-panel-2: #171d2a;
  --home-cta: #8ff7ff;
  --home-cta-dark: #397b91;
  --home-stage-outline: #284464;
}

body[data-ui-mode="light"]:has(.game-shell) {
  --home-bg: #f7f2e8;
  --home-rail: #e4dece;
  --home-panel: #fffaf0;
  --home-panel-2: #f2eadb;
  --home-border: #c6bba8;
  --home-muted: #5e574f;
  --home-text: #222027;
  --home-soft-text: #423d39;
  --home-control: #fffdf8;
  --home-control-border: #c9bda9;
  --home-cta: #ffd33f;
  --home-cta-dark: #a98114;
  --home-stage-outline: #bfb29d;
}

body[data-ui-mode="light"][data-theme="sunset"]:has(.game-shell) {
  --home-bg: #faeee8;
  --home-rail: #ead5cb;
  --home-panel: #fff5ef;
  --home-panel-2: #f6dfd4;
  --home-border: #d2b3a4;
  --home-muted: #675049;
  --home-control: #fffaf6;
  --home-control-border: #d2b5a7;
  --home-cta: #ffad63;
  --home-cta-dark: #af5f2f;
  --home-stage-outline: #d6aa99;
}

body[data-ui-mode="light"][data-theme="night"]:has(.game-shell) {
  --home-bg: #eef4fb;
  --home-rail: #dce6f0;
  --home-panel: #f7fbff;
  --home-panel-2: #e6eef8;
  --home-border: #b8c8d8;
  --home-muted: #506172;
  --home-control: #fbfdff;
  --home-control-border: #bac9d8;
  --home-cta: #8fd8ff;
  --home-cta-dark: #2f7099;
  --home-stage-outline: #a8bfd4;
}

.container-index:has(.game-shell) {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  margin: 0;
  padding: clamp(1rem, 3dvh, 1.8rem) 0 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.container-index:has(.game-shell)::before {
  content: "";
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 0;
  width: clamp(400px, 30vw, 460px);
  background: var(--home-rail);
  border-right: 1px solid var(--home-border);
  pointer-events: none;
}

.container-index:has(.game-shell) > .row,
.container-index:has(.game-shell) .game-shell {
  position: relative;
  z-index: 1;
}

.container-index:has(.game-shell) > .row {
  width: 100%;
  margin: 0 !important;
  padding: 0 clamp(1.1rem, 2.7vw, 2.25rem);
}

.container-index:has(.game-shell) > .row .d-flex {
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
}

.container-index:has(.game-shell) .brand-logo {
  max-width: none;
  padding: 0;
  gap: 0.98rem;
  color: var(--home-text);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  filter: none;
}

.container-index:has(.game-shell) .brand-logo:hover,
.container-index:has(.game-shell) .brand-logo:active {
  color: var(--home-text);
  background: transparent;
  box-shadow: none;
  transform: none;
  filter: none;
}

.container-index:has(.game-shell) .brand-mark {
  width: clamp(3.35rem, 3.2vw, 3.95rem);
  height: clamp(3.35rem, 3.2vw, 3.95rem);
  overflow: visible;
  display: block;
  flex: 0 0 auto;
}

.container-index:has(.game-shell) .brand-copy {
  grid-template-columns: 1fr;
  gap: 0.05rem;
}

.container-index:has(.game-shell) .brand-main {
  display: flex;
  gap: 0.28rem;
  color: var(--home-text);
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: clamp(1.34rem, 1.75vw, 1.82rem);
  line-height: 0.82;
  font-weight: 400;
  text-transform: uppercase;
  -webkit-text-stroke: 0;
  text-shadow: none;
  white-space: nowrap;
}

.container-index:has(.game-shell) .brand-badge {
  display: block;
  padding: 0;
  color: var(--home-cta);
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  line-height: 0.9;
  font-weight: 400;
  text-transform: uppercase;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-shadow: none;
}

.game-shell {
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: clamp(1.5rem, 3.5dvh, 2.2rem) clamp(1.1rem, 2.7vw, 2.25rem) clamp(1rem, 2.5dvh, 1.8rem);
  display: grid;
  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4.4rem);
  align-items: stretch;
}

.game-sidebar {
  min-height: 0;
  position: relative;
  z-index: 2;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: clamp(1rem, 2dvh, 1.35rem);
  color: var(--home-text);
}

.game-stage {
  position: relative;
  z-index: 1;
}

.match-center,
.game-sidebar-card,
.player-info,
.game-player-strip {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--home-control-border) 72%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--home-panel) 97%, #ffffff 3%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 8px 24px rgba(0, 0, 0, 0.08);
  backdrop-filter: none;
}

.match-center::before,
.game-sidebar-card::before,
.player-info::before,
.bot-difficulty-panel::before,
.training-setting-panel::before {
  content: none;
}

.match-center {
  min-width: 0;
  width: 100%;
  display: grid;
  place-items: stretch;
  gap: 0.72rem;
  padding: clamp(0.95rem, 2dvh, 1.25rem);
  border: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--home-cta) 92%, #ffffff 8%), var(--home-cta));
  box-shadow: 0 6px 0 var(--home-cta-dark);
}

.match-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  color: #15151d;
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: 1.1rem;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: none;
}

.match-label .fa-solid {
  color: #15151d;
  font-size: 1rem;
}

.match-scoreboard {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.34rem, 0.9vw, 0.6rem);
  min-height: clamp(4rem, 8dvh, 5.15rem);
  padding: 0.54rem 0.75rem 0.62rem;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), transparent 42%),
    rgba(15, 18, 28, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 4px 0 rgba(20, 18, 26, 0.62),
    0 12px 22px rgba(0, 0, 0, 0.16);
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: clamp(3.15rem, 5.1vw, 4.65rem);
  line-height: 0.82;
  user-select: none;
}

.match-scoreboard::before,
.match-scoreboard::after {
  content: '';
  position: absolute;
  left: 0.48rem;
  right: 0.48rem;
  height: 2px;
  pointer-events: none;
}

.match-scoreboard::before {
  top: 0.28rem;
  background: linear-gradient(90deg, var(--game-player-left) 0 42%, transparent 42% 58%, var(--game-player-right) 58% 100%);
  opacity: 0.92;
}

.match-scoreboard::after {
  bottom: 0.22rem;
  background: rgba(255, 255, 255, 0.12);
}

.match-separator {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.66em;
  transform: translateY(-0.03em);
}

.match-scoreboard span[id^="score-"] {
  min-width: 1.05ch;
  text-align: center;
  color: #ffffff;
  text-shadow: 0 3px 0 rgba(15, 18, 28, 0.82);
  transition: color 0.22s ease, filter 0.22s ease, text-shadow 0.22s ease;
}

#score-left {
  color: var(--game-player-left);
  text-shadow: 0 3px 0 rgba(15, 18, 28, 0.82), 0 0 11px color-mix(in srgb, var(--game-player-left) 35%, transparent);
}

#score-right {
  color: var(--game-player-right);
  text-shadow: 0 3px 0 rgba(15, 18, 28, 0.82), 0 0 11px color-mix(in srgb, var(--game-player-right) 35%, transparent);
}

.match-scoreboard span[id^="score-"].is-leading {
  filter: brightness(1.08);
}

/* Mechanical score drum -----------------------------------------------------------------
   No extra card around the number: the existing scoreboard remains the one and only surface.
   The old and new glyphs briefly roll through that surface like a vintage counter. */
.mechanical-score {
  position: relative;
  isolation: isolate;
  display: inline-grid !important;
  place-items: center;
  min-width: 1.05ch !important;
  padding: 0;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 220px;
}

#score-left,
#hud-score-left {
  --mechanical-score-color: var(--game-player-left, #8ff7ff);
}

#score-right,
#hud-score-right {
  --mechanical-score-color: var(--game-player-right, #ffe66d);
}

.mechanical-score::before,
.mechanical-score::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  display: none;
  place-items: center;
  color: var(--mechanical-score-color, #ffffff);
  font: inherit;
  line-height: inherit;
  text-align: center;
  text-shadow: 0 3px 0 rgba(15, 18, 28, 0.82), 0 0 11px color-mix(in srgb, var(--mechanical-score-color, #ffffff) 35%, transparent);
  pointer-events: none;
}

.mechanical-score.is-score-flipping::before {
  content: attr(data-score-from);
  display: grid;
  animation: mechanical-score-old 0.48s cubic-bezier(.55, .06, .68, .2) both;
}

.mechanical-score.is-score-flipping::after {
  content: attr(data-score-to);
  display: grid;
  animation: mechanical-score-new 0.48s cubic-bezier(.18, .72, .25, 1) both;
}

.mechanical-score.is-score-flipping {
  color: transparent !important;
  text-shadow: none !important;
}

@keyframes mechanical-score-old {
  0%, 18% { transform: translateY(0) rotateX(0deg); opacity: 1; filter: brightness(1); }
  58%, 100% { transform: translateY(-86%) rotateX(-54deg); opacity: 0; filter: brightness(0.55); }
}

@keyframes mechanical-score-new {
  0%, 28% { transform: translateY(88%) rotateX(56deg); opacity: 0; filter: brightness(0.62); }
  76% { transform: translateY(-5%) rotateX(-5deg); opacity: 1; filter: brightness(1.2); }
  100% { transform: translateY(0) rotateX(0deg); opacity: 1; filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  .mechanical-score.is-score-flipping,
  .mechanical-score.is-score-flipping::before,
  .mechanical-score.is-score-flipping::after {
    animation-duration: 1ms !important;
  }
}

.game-sidebar-card {
  display: grid;
  gap: 0.85rem;
  padding: clamp(1rem, 2dvh, 1.25rem);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 52%),
    color-mix(in srgb, var(--home-panel) 92%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 1px 0 color-mix(in srgb, var(--home-stage-outline) 42%, transparent);
}

.game-sidebar-card-title,
.bot-difficulty-label,
.training-setting-label {
  display: flex;
  align-items: center;
  gap: 0.48rem;
  color: var(--home-muted);
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: 1.15rem;
  line-height: 1;
  font-weight: 400;
  text-transform: uppercase;
  text-shadow: none;
}

.game-sidebar-card-title .fa-solid {
  color: var(--home-cta);
  font-size: 0.95rem;
}

.game-status-list {
  display: grid;
  gap: 0.55rem;
}

.game-status-item {
  min-height: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.58rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--home-control-border) 78%, transparent);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 52%),
    var(--home-control);
  font-family: 'Jersey 15', 'PixelArt', monospace;
  line-height: 1;
}

.game-status-item span {
  color: var(--home-muted);
  font-size: 1.05rem;
}

.game-status-item strong {
  color: var(--home-text);
  font-size: 1.16rem;
  font-weight: 400;
}

.training-controls {
  align-content: start;
  max-height: min(52dvh, 560px);
  overflow-y: auto;
  scrollbar-color: var(--home-control-border) transparent;
}

.training-controls-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  list-style: none;
}

.training-controls-summary::-webkit-details-marker {
  display: none;
}

.training-controls-chevron {
  flex: 0 0 auto;
  color: var(--home-muted);
  font-size: 0.8rem;
  transition: transform 0.18s ease, color 0.18s ease;
}

.training-controls[open] .training-controls-chevron,
.training-commands[open] .training-controls-chevron {
  color: var(--home-cta);
  transform: rotate(180deg);
}

.training-controls-body {
  display: grid;
  gap: 0.85rem;
  padding-top: 0.2rem;
}

.bot-difficulty-panel,
.training-setting-panel {
  position: relative;
  overflow: visible;
  display: grid;
  gap: 0.58rem;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.bot-difficulty-switcher,
.map-switcher,
.team-mode-switcher {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
}

.bot-difficulty-option,
.map-option,
.team-mode-option {
  min-height: 2.75rem;
  padding: 0.52rem 0.5rem;
  color: var(--home-text);
  border: 1px solid var(--home-control-border);
  border-radius: 9px;
  background: var(--home-control);
  box-shadow: none;
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: 1.08rem;
  line-height: 1;
}

.bot-difficulty-option:hover,
.bot-difficulty-option.active,
.map-option:hover,
.map-option.active,
.team-mode-option:hover,
.team-mode-option.active {
  color: #15151d;
  border-color: transparent;
  background: var(--home-cta);
  box-shadow: none;
  transform: none;
}

.training-commands {
  align-self: start;
  align-content: start;
}

/* Replié, la carte se réduit à sa seule ligne de titre : pas de bloc vide sous le score. */
.training-commands:not([open]) {
  gap: 0;
}

.training-commands .training-command-list {
  padding-top: 0.55rem;
}

.training-command-list {
  display: grid;
  gap: 0.5rem;
}

.training-command {
  min-height: 2.75rem;
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  padding: 0.48rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--home-control-border) 78%, transparent);
  border-radius: 9px;
  background: var(--home-control);
}

.training-command-name {
  color: var(--home-muted);
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: 1rem;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.training-key-group {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.28rem;
}

.training-key-group kbd {
  min-width: 1.55rem;
  height: 1.5rem;
  display: inline-grid;
  place-items: center;
  padding: 0.08rem 0.32rem;
  color: #15151d;
  border: 0;
  border-radius: 4px;
  background: var(--home-cta);
  box-shadow: 0 2px 0 var(--home-cta-dark);
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: 1rem;
  line-height: 1;
}

.training-key-group .training-key-space {
  min-width: 3.55rem;
}

/* « ou » entre deux touches qui font la même chose, « + » avant la direction à tenir avec : sans
   eux, « Espace Maj » se lisait comme un raccourci à deux touches. */
.training-key-or {
  padding: 0 0.12rem;
  color: var(--home-muted);
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: 1rem;
  line-height: 1;
}

.training-key-alternative {
  color: var(--home-muted);
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: 0.8rem;
  line-height: 1;
  text-transform: uppercase;
}

.training-technique {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.08rem 0.08rem 0;
  color: var(--home-muted);
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: 0.98rem;
  line-height: 1.15;
}

.training-technique .fa-bolt {
  color: #ffe66d;
  font-size: 0.9rem;
}

.game-sidebar-actions {
  grid-row: 4;
  align-self: end;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.game-sidebar > .sidebar-footer {
  grid-row: 5;
  margin-top: auto;
}

.training-controls:not([open]),
.training-commands:not([open]) {
  align-self: start;
  width: 100%;
  height: max-content;
  min-height: 0;
  gap: 0;
}

.game-icon-button,
.ragequit-button {
  position: static;
  min-height: 3.2rem;
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  align-items: center;
  justify-content: stretch;
  gap: 0.52rem;
  padding: 0.62rem 0.72rem;
  color: var(--home-text);
  border: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--home-panel) 84%, #ffffff 9%);
  box-shadow: 0 4px 0 var(--home-panel);
  transform: none;
  font-family: 'Jersey 15', 'PixelArt', monospace;
  line-height: 1;
  letter-spacing: 0;
  opacity: 1;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
}

.game-action-icon {
  width: 1.25rem;
  display: grid;
  place-items: center;
  color: var(--home-cta);
  font-size: 0.84rem;
  line-height: 1;
  filter: none;
  transform: translateX(0.24rem);
}

.game-action-copy {
  min-width: 0;
  display: grid;
  gap: 0.14rem;
}

.game-action-title {
  color: var(--home-text);
  font-size: 1.08rem;
  line-height: 0.95;
  overflow: hidden;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-action-subtitle {
  color: var(--home-muted);
  font-size: 0.76rem;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-audio-button.is-off {
  color: var(--home-muted);
  background: color-mix(in srgb, var(--home-panel) 92%, #000000 8%);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--home-panel) 88%, #000000 12%);
}

.game-audio-button.is-off .game-action-icon,
.game-audio-button.is-off .game-action-title {
  color: var(--home-muted);
}

/* Spectator mode has no pause/ragequit action: let its third, unpaired button use the full row. */
.game-sidebar-actions > .game-icon-button:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.game-icon-button:hover,
.game-icon-button:focus-visible {
  color: var(--home-text);
  background: color-mix(in srgb, var(--home-panel) 78%, #ffffff 15%);
  box-shadow: 0 5px 0 var(--home-panel);
  outline: 0;
  transform: translateY(-1px);
}

.game-icon-button:focus-visible {
  box-shadow:
    0 5px 0 var(--home-panel),
    0 0 0 3px color-mix(in srgb, var(--home-cta) 26%, transparent);
}

.ragequit-button {
  color: #ffdfe2;
  background: color-mix(in srgb, #d9414d 22%, var(--home-panel) 78%);
  box-shadow: 0 4px 0 color-mix(in srgb, #6d2027 70%, var(--home-panel) 30%);
}

.ragequit-button:hover,
.ragequit-button:focus-visible {
  background: color-mix(in srgb, #d9414d 32%, var(--home-panel) 68%);
  box-shadow: 0 5px 0 color-mix(in srgb, #6d2027 70%, var(--home-panel) 30%);
  outline: 0;
  transform: translateY(-1px);
}

.ragequit-button:active,
.game-icon-button:active {
  box-shadow: 0 1px 0 var(--home-panel);
  transform: translateY(3px) !important;
}

.ragequit-button:active {
  box-shadow: 0 1px 0 color-mix(in srgb, #6d2027 70%, var(--home-panel) 30%);
}

#toggle-sound #sound-icon,
.ragequit-button .fa-fire {
  color: var(--home-cta);
  filter: none;
}

.ragequit-button .game-action-icon,
.ragequit-button .game-action-title {
  color: #ff8d97;
}

.ragequit-button .game-action-subtitle {
  color: color-mix(in srgb, #ffdfe2 72%, transparent);
}

.game-stage {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: start;
  justify-items: center;
  gap: clamp(0.7rem, 1.1dvh, 0.95rem);
  padding-top: clamp(0.45rem, 1.45dvh, 1rem);
}

.game-arena {
  width: min(100%, 920px, calc((100dvh - 172px) * 1.333333));
  min-width: 0;
  padding: 0;
  overflow: visible;
  display: grid;
  place-items: center;
}

#game {
  width: 100%;
  max-width: 920px;
  position: relative;
  margin: 0;
  border: 1px solid var(--home-stage-outline);
  border-radius: 16px;
  background: var(--stage-bg);
  box-shadow: none;
  overflow: hidden;
}

#game canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 15px;
  box-shadow: none;
}

.game-player-strip {
  width: min(100%, 920px, calc((100dvh - 172px) * 1.333333));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.8rem, 1.4vw, 1.25rem);
  padding: clamp(0.55rem, 1.2dvh, 0.85rem) 0.05rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.player-info {
  min-height: 4rem;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto;
  align-items: center;
  justify-items: start;
  gap: 0.72rem;
  padding: 0.78rem 0.95rem;
  color: var(--home-text);
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--home-control-border) 82%, transparent);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 52%),
    color-mix(in srgb, var(--home-panel) 88%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 1px 0 color-mix(in srgb, var(--home-stage-outline) 46%, transparent);
  opacity: 1;
}

.player-1-info {
  border-left: 4px solid #8ff7ff;
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, #8ff7ff 14%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 1px 0 color-mix(in srgb, var(--home-stage-outline) 46%, transparent);
}

.player-2-info {
  border-right: 4px solid #ffe66d;
  justify-items: end;
  text-align: right;
  box-shadow:
    inset -3px 0 0 color-mix(in srgb, #ffe66d 14%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 1px 0 color-mix(in srgb, var(--home-stage-outline) 46%, transparent);
}

.player-2-info .player-meta {
  justify-self: end;
}

.player-side-label {
  display: block;
  margin: 0 0 0.2rem;
  color: color-mix(in srgb, var(--home-muted) 88%, transparent);
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: clamp(0.98rem, 0.96vw, 1.08rem);
  line-height: 1;
  text-transform: uppercase;
  text-shadow: none;
}

.player-login-container h2 {
  max-width: 100%;
  margin: 0;
  color: var(--home-text);
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: clamp(1.48rem, 1.78vw, 1.95rem);
  line-height: 1;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: none;
}

.player-elo {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  margin-top: 0.46rem;
  padding: 0.22rem 0.6rem 0.2rem;
  color: var(--home-soft-text);
  border: 1px solid color-mix(in srgb, var(--home-control-border) 66%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--home-control) 76%, transparent);
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: clamp(0.92rem, 0.9vw, 1.02rem);
  line-height: 1;
  letter-spacing: 0.03em;
  text-shadow: none;
}

.player-elo:empty {
  display: none;
}

.player-elo::before {
  content: "";
  width: 0.44rem;
  height: 0.44rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--home-cta);
  box-shadow: 0 0 6px color-mix(in srgb, var(--home-cta) 55%, transparent);
}

.player-1-info .player-elo::before {
  background: #8ff7ff;
  box-shadow: 0 0 6px rgba(143, 247, 255, 0.55);
}

.player-2-info .player-elo::before {
  background: #ffe66d;
  box-shadow: 0 0 6px rgba(255, 230, 109, 0.55);
}

.player-2-info .player-elo {
  flex-direction: row-reverse;
}

.network {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.34rem 0.58rem;
  color: var(--home-text);
  border: 1px solid color-mix(in srgb, var(--home-control-border) 76%, transparent);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 52%),
    color-mix(in srgb, var(--home-control) 82%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: 1.08rem;
  line-height: 1;
}

.network .network-icon {
  color: var(--home-cta);
  font-size: 0.88rem;
}

.network .ping {
  font-family: 'Numbers', 'Jersey 15', monospace;
  font-size: 1.16rem;
}

.network-unit {
  color: var(--home-muted);
}

.network.not-ok {
  color: #ffffff;
  border-color: rgba(255, 75, 92, 0.7);
  background: rgba(255, 75, 92, 0.28);
  box-shadow: none;
}

.game-versus-badge {
  min-width: 2.7rem;
  height: 2.7rem;
  display: grid;
  place-items: center;
  color: #15151d;
  border-radius: 999px;
  background: var(--home-cta);
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: 1.06rem;
  line-height: 1;
  box-shadow: 0 3px 0 var(--home-cta-dark);
}

.reconnect-banner {
  top: 1rem;
  color: #15151d;
  border: 0;
  background: var(--home-cta);
  box-shadow: 0 5px 0 var(--home-cta-dark);
  font-family: 'Jersey 15', 'PixelArt', monospace;
}

/* Compact emote dock: one centered row of icon-only chips. The phrase lives in a hover/focus
   tooltip styled EXACTLY like the in-game speech bubble (.game-emote-bubble), so each chip
   previews what the opponent will actually see above the blob. Halves the bar's height and
   scales to 10 emotes without crowding the bottom of the screen. */
.emote-bar {
  /* Own stacking context above the player strip, so the hover bubbles never slide under it. */
  position: relative;
  z-index: 26;
  width: min(100%, 920px);
  margin-top: 0.68rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.34rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.emote-button {
  --emote-accent: var(--home-cta);
  --emote-accent-dark: var(--home-cta-dark);
  position: relative;
  flex: 1 1 0;
  min-width: 2.55rem;
  max-width: 3.6rem;
  height: 2.55rem;
  display: grid;
  place-items: center;
  color: var(--home-text);
  font-family: 'Jersey 15', 'PixelArt', monospace;
  border: 1px solid color-mix(in srgb, var(--home-control-border) 82%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 52%),
    color-mix(in srgb, var(--home-panel) 82%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 1px 0 color-mix(in srgb, var(--home-stage-outline) 46%, transparent);
  cursor: pointer;
  /* No overflow:hidden — the tooltip bubble hangs outside the chip. */
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

/* Cooldown sweep along the bottom edge of the chip. */
.emote-button::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 0;
  height: 3px;
  border-radius: 0 0 6px 6px;
  background: var(--emote-accent);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
}

/* The phrase preview: same cream speech bubble as the in-game emote, arrow pointing down at the
   chip. Shown on hover and keyboard focus. */
.emote-tip {
  position: absolute;
  bottom: calc(100% + 0.9rem);
  left: 50%;
  z-index: 30;
  padding: 0.42rem 0.66rem 0.46rem;
  color: #363435;
  font-family: 'Jersey 15', 'PixelArt', monospace;
  font-size: 1.22rem;
  line-height: 0.9;
  white-space: nowrap;
  border: 3px solid #363435;
  border-radius: 11px;
  background-clip: padding-box;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 246, 218, 0.96) 46%),
    #fff6da;
  box-shadow:
    0 3px 0 rgba(54, 52, 53, 0.92),
    0 10px 18px rgba(18, 16, 24, 0.22);
  opacity: 0;
  transform: translateX(-50%) scale(0.72);
  transform-origin: 50% calc(100% + 0.6rem);
  pointer-events: none;
  transition: opacity 0.13s ease, transform 0.16s cubic-bezier(0.22, 1.25, 0.34, 1);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.emote-tip::before,
.emote-tip::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  transform: translateX(-50%);
}

.emote-tip::before {
  bottom: -14px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 14px solid #363435;
}

.emote-tip::after {
  bottom: -9px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid #fff6da;
}

.emote-button:hover:not(:disabled) .emote-tip,
.emote-button:focus-visible .emote-tip {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.emote-button[data-emote-id="nice-point"] {
  --emote-accent: #ffd33f;
  --emote-accent-dark: #9f7d16;
}

.emote-button[data-emote-id="nice-smash"] {
  --emote-accent: #ff8a3d;
  --emote-accent-dark: #9d4e1e;
}

.emote-button[data-emote-id="nice-block"] {
  --emote-accent: #8ff7ff;
  --emote-accent-dark: #2f7099;
}

.emote-button[data-emote-id="oops"] {
  --emote-accent: #ff4b5c;
  --emote-accent-dark: #8e2631;
}

.emote-button[data-emote-id="no-worries"] {
  --emote-accent: #7dd3fc;
  --emote-accent-dark: #2563eb;
}

.emote-button[data-emote-id="thanks"] {
  --emote-accent: #f47ddc;
  --emote-accent-dark: #8c3f7a;
}

.emote-button[data-emote-id="too-bad"] {
  --emote-accent: #b8c8d8;
  --emote-accent-dark: #506172;
}

.emote-button[data-emote-id="gg"] {
  --emote-accent: #ffe66d;
  --emote-accent-dark: #a98114;
}

.emote-button[data-emote-id="le-talent"] {
  --emote-accent: #ffd33f;
  --emote-accent-dark: #9f7d16;
}

.emote-button[data-emote-id="la-galere"] {
  --emote-accent: #7dd3fc;
  --emote-accent-dark: #2563eb;
}

.emote-button[data-emote-id="nice-game"] {
  --emote-accent: #99e550;
  --emote-accent-dark: #4d7c25;
}

.emote-button[data-emote-id="rematch-please"] {
  --emote-accent: #8ff7ff;
  --emote-accent-dark: #2f7099;
}

.emote-button[data-emote-id="close-match"] {
  --emote-accent: #ff8a3d;
  --emote-accent-dark: #9d4e1e;
}

.emote-button[data-emote-id="again"] {
  --emote-accent: #b8c8d8;
  --emote-accent-dark: #506172;
}

.emote-button[data-emote-id="one-more"] {
  --emote-accent: #ffd33f;
  --emote-accent-dark: #9f7d16;
}

.emote-button[data-emote-id="respect"] {
  --emote-accent: #f47ddc;
  --emote-accent-dark: #8c3f7a;
}

.emote-button[data-emote-id="thanks-training"] {
  --emote-accent: #7dd3fc;
  --emote-accent-dark: #2563eb;
}

.emote-key {
  position: absolute;
  top: -0.32rem;
  left: -0.28rem;
  width: 0.98rem;
  height: 0.98rem;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--home-text) 82%, transparent);
  font-family: 'Numbers', 'Jersey 15', monospace;
  font-size: 0.58rem;
  border: 1px solid color-mix(in srgb, var(--home-control-border) 76%, transparent);
  border-radius: 5px;
  background: var(--home-panel);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.22);
  z-index: 2;
}

.emote-button .emote-icon {
  display: block;
  color: var(--emote-accent);
  font-size: 1.08rem;
  opacity: 0.62;
  filter: none;
  transform: none;
  z-index: 1;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.emote-button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--emote-accent) 58%, var(--home-control-border));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 52%),
    color-mix(in srgb, var(--home-panel) 82%, var(--emote-accent) 14%);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 2px 0 color-mix(in srgb, var(--emote-accent-dark) 66%, transparent),
    0 0 0 2px color-mix(in srgb, var(--emote-accent) 12%, transparent);
}

.emote-button:hover:not(:disabled) .emote-icon,
.emote-button:focus-visible .emote-icon {
  opacity: 1;
  transform: scale(1.12);
}

.emote-button:hover:not(:disabled) .emote-key {
  color: #15151d;
  border-color: color-mix(in srgb, var(--emote-accent-dark) 58%, transparent);
  background: var(--emote-accent);
}

.emote-button:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 1px 0 color-mix(in srgb, var(--emote-accent-dark) 78%, transparent);
}

.emote-button:disabled,
.emote-button.is-cooling {
  color: color-mix(in srgb, var(--home-muted) 84%, transparent);
  cursor: not-allowed;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 48%),
    color-mix(in srgb, var(--home-control) 78%, #101018 22%);
  border-color: color-mix(in srgb, var(--home-control-border) 58%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 2px 0 color-mix(in srgb, var(--home-stage-outline) 48%, transparent);
  transform: none;
}

.emote-button:disabled .emote-icon,
.emote-button.is-cooling .emote-icon {
  opacity: 0.46;
}

.emote-button:disabled .emote-key,
.emote-button.is-cooling .emote-key {
  opacity: 0.7;
  filter: grayscale(0.45);
}

.emote-button.is-cooling::after {
  opacity: 1;
  animation: emote-cooldown var(--emote-cooldown-duration, 5s) linear forwards;
}

@keyframes emote-cooldown {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

body[data-ui-mode="light"]:has(.game-shell) .match-center {
  color: #222027;
}

body[data-ui-mode="light"]:has(.game-shell) .game-sidebar-card,
body[data-ui-mode="light"]:has(.game-shell) .player-info {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    0 1px 0 rgba(120, 106, 84, 0.12);
}

body[data-ui-mode="light"]:has(.game-shell) .game-icon-button {
  background: var(--home-panel);
  box-shadow: 0 4px 0 rgba(140, 120, 88, 0.42);
}

body[data-ui-mode="light"]:has(.game-shell) .game-icon-button:hover,
body[data-ui-mode="light"]:has(.game-shell) .game-icon-button:focus-visible {
  background: #ffffff;
  box-shadow: 0 5px 0 rgba(140, 120, 88, 0.42);
}

body[data-ui-mode="light"]:has(.game-shell) .game-icon-button:focus-visible {
  box-shadow:
    0 5px 0 rgba(140, 120, 88, 0.42),
    0 0 0 3px color-mix(in srgb, var(--home-cta) 30%, transparent);
}

body[data-ui-mode="light"]:has(.game-shell) .game-icon-button:active {
  box-shadow: 0 1px 0 rgba(140, 120, 88, 0.42);
}

/* On wide desktop layouts, mirror the homepage player card's breathing room
   below the brand before the first piece of sidebar content. */
@media (min-width: 1501px) {
  .game-sidebar .match-center {
    margin-top: clamp(0.55rem, 1.7dvh, 1.15rem);
  }
}

@media (max-width: 1060px) {
  .game-shell {
    grid-template-columns: minmax(290px, 350px) minmax(0, 1fr);
    gap: 1.4rem;
  }

  .game-arena,
  .game-player-strip {
    width: 100%;
  }

  .game-player-strip {
    grid-template-columns: 1fr;
  }

  .game-versus-badge {
    display: none;
  }

  .player-2-info {
    text-align: left;
    justify-items: start;
    border-right: 0;
    border-left: 3px solid #ffe66d;
  }

  .player-2-info .player-meta {
    justify-self: start;
  }
}

@media (max-width: 860px) {
  .container-index:has(.game-shell)::before {
    content: none;
  }

  .container-index:has(.game-shell) {
    padding-top: 1rem;
  }

  .container-index:has(.game-shell) > .row {
    padding: 0 1rem;
  }

  .game-shell {
    min-height: 0;
    padding: 1.25rem 1rem 2rem;
    grid-template-columns: 1fr;
    gap: 1.55rem;
  }

  .game-sidebar {
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: 1rem;
  }

  .game-sidebar-actions,
  .game-sidebar > .sidebar-footer {
    grid-row: auto;
  }

  .training-controls {
    max-height: none;
  }

  .game-stage {
    width: min(100%, 720px);
    margin: 0 auto;
    padding-top: 0;
  }

  .match-scoreboard {
    font-size: clamp(2.9rem, 14vw, 4.1rem);
  }

  .emote-bar {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .container-index:has(.game-shell) .brand-mark {
    width: 2.55rem;
    height: 2.55rem;
  }

  .container-index:has(.game-shell) .brand-main {
    font-size: 0.72rem;
  }

  .container-index:has(.game-shell) .brand-badge {
    font-size: 0.4rem;
  }

  .game-shell {
    padding: 1rem 0.75rem 1.5rem;
  }

  .game-sidebar-card,
  .match-center {
    padding: 1rem;
  }

  .game-player-strip {
    padding: 0.45rem;
  }

  .player-info {
    min-height: 3.4rem;
    padding: 0.62rem;
  }

  .network-unit {
    display: none;
  }

  .emote-bar {
    gap: 0.3rem;
  }

  .emote-button {
    min-width: 2.25rem;
    height: 2.25rem;
  }

  .emote-key {
    width: 0.9rem;
    height: 0.9rem;
    font-size: 0.54rem;
  }
}

/* Compact desktop pass: prevent the training sidebar from overflowing MacBook viewports. */
@media (min-width: 861px) and (max-height: 820px) {
  body:has(.game-shell) {
    overflow: hidden;
  }

  .container-index:has(.game-shell) {
    height: 100dvh;
    min-height: 0;
    padding-top: clamp(0.45rem, 1.35dvh, 0.75rem);
    overflow: hidden;
  }

  .container-index:has(.game-shell)::before {
    /* Cover shell padding + sidebar column (335px) + half the column gap. */
    width: calc(clamp(0.7rem, 1.7vw, 1.15rem) + 335px + clamp(0.5rem, 1.25vw, 1rem));
  }

  .container-index:has(.game-shell) > .row {
    margin-bottom: clamp(0.5rem, 1.3dvh, 0.9rem) !important;
    padding: 0 clamp(0.75rem, 1.8vw, 1.4rem);
  }

  .container-index:has(.game-shell) .brand-logo {
    gap: 0.82rem;
  }

  .container-index:has(.game-shell) .game-shell {
    height: calc(100dvh - 4.85rem);
    min-height: 0;
    padding: clamp(0.65rem, 1.55dvh, 0.9rem) clamp(0.7rem, 1.7vw, 1.15rem) clamp(0.7rem, 1.6dvh, 1rem);
    grid-template-columns: minmax(270px, 335px) minmax(0, 1fr);
    gap: clamp(1rem, 2.5vw, 2rem);
    align-items: stretch;
    overflow: hidden;
  }

  .game-sidebar {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2.4dvh, 1.4rem);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-right: 0.15rem;
    scrollbar-color: var(--home-control-border) transparent;
  }

  /* Cards have overflow:hidden, so their automatic minimum size is 0 and a
     fixed-height container squeezes them below their content instead of
     letting the column scroll. */
  .game-sidebar > * {
    flex: 0 0 auto;
  }

  .match-center {
    gap: 0.28rem;
    padding: 0.65rem 0.8rem;
    border-radius: 10px;
    box-shadow: 0 5px 0 var(--home-cta-dark);
  }

  .match-label {
    font-size: 0.95rem;
  }

  .match-scoreboard {
    font-size: clamp(2.6rem, 5.6dvh, 3.2rem);
  }

  .game-sidebar-card {
    gap: 0.55rem;
    padding: 0.72rem 0.8rem;
    border-radius: 10px;
  }

  .game-sidebar-card-title,
  .bot-difficulty-label,
  .training-setting-label {
    font-size: 0.98rem;
  }

  .game-status-list,
  .bot-difficulty-panel,
  .training-setting-panel {
    gap: 0.42rem;
  }

  .game-status-item {
    min-height: 2.35rem;
    padding: 0.45rem 0.58rem;
  }

  .game-status-item span {
    font-size: 0.92rem;
  }

  .game-status-item strong {
    font-size: 1rem;
  }

  .training-controls {
    max-height: none;
    overflow: visible;
  }

  .bot-difficulty-switcher,
  .map-switcher,
  .team-mode-switcher {
    gap: 0.34rem;
  }

  .bot-difficulty-option,
  .map-option,
  .team-mode-option {
    min-height: 2.28rem;
    padding: 0.43rem 0.45rem;
    border-radius: 8px;
    font-size: 0.96rem;
  }

  .game-sidebar-actions {
    align-self: stretch;
    margin-top: auto;
    gap: 0.42rem;
    padding: 0.36rem;
  }

  .game-icon-button,
  .ragequit-button {
    min-height: 2.65rem;
    gap: 0.42rem;
    padding: 0.48rem 0.58rem;
    border-radius: 9px;
  }

  .game-action-title {
    font-size: 0.94rem;
  }

  .game-action-subtitle {
    font-size: 0.66rem;
  }

  .game-stage {
    min-height: 0;
    grid-template-areas: none;
    grid-template-rows: auto max-content max-content;
    align-content: start;
    gap: 0.5rem;
    padding-top: 0.1rem;
  }

  .game-arena,
  .game-player-strip,
  .player-1-info,
  .player-2-info {
    grid-area: auto;
  }

  .game-arena,
  .game-player-strip {
    width: min(100%, 820px, calc((100dvh - 256px) * 1.333333));
  }

  #game {
    max-width: 820px;
    border-radius: 13px;
  }

  #game canvas {
    border-radius: 12px;
  }

  .game-player-strip {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.62rem;
    padding-top: 0.35rem;
  }

  .game-versus-badge {
    min-width: 2.45rem;
    height: 2.45rem;
    display: grid;
    font-size: 1rem;
  }

  .player-info {
    min-height: 3.25rem;
    padding: 0.58rem 0.72rem;
    border-radius: 10px;
  }

  .player-side-label,
  .player-elo {
    font-size: 0.9rem;
  }

  .player-login-container h2 {
    font-size: 1.25rem;
  }

  .network {
    padding: 0.32rem 0.5rem;
    font-size: 0.92rem;
  }

  .network .ping {
    font-size: 0.98rem;
  }

  .emote-bar {
    margin-top: 0.55rem;
    gap: 0.3rem;
  }

  .emote-button {
    min-width: 2.3rem;
    height: 2.3rem;
  }

  .emote-key {
    width: 0.9rem;
    height: 0.9rem;
    font-size: 0.54rem;
  }

  .emote-button .emote-icon {
    font-size: 0.94rem;
  }

}

@media (min-width: 861px) and (max-height: 700px) {
  .game-shell {
    grid-template-columns: minmax(250px, 315px) minmax(0, 1fr);
    gap: 0.85rem;
  }

  .game-arena,
  .game-player-strip {
    width: min(100%, 740px, calc((100dvh - 256px) * 1.333333));
  }

  .game-player-strip {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }
}

/* Mac-width desktop pass: keep the training menu inside the viewport. */
@media (min-width: 861px) and (max-width: 1500px) {
  body:has(.game-shell) {
    overflow: hidden;
  }

  .container-index:has(.game-shell) {
    height: 100dvh;
    min-height: 0;
    padding-top: clamp(0.45rem, 1.15dvh, 0.8rem);
    overflow: hidden;
  }

  .container-index:has(.game-shell)::before {
    /* Cover shell padding + sidebar column (390px) + half the column gap. */
    width: calc(clamp(0.75rem, 1.5vw, 1.2rem) + 390px + clamp(0.5rem, 1.1vw, 1rem));
  }

  .container-index:has(.game-shell) > .row {
    margin-bottom: clamp(0.5rem, 1.3dvh, 0.9rem) !important;
    padding: 0 clamp(0.8rem, 1.8vw, 1.35rem);
  }

  .container-index:has(.game-shell) .brand-logo {
    gap: 0.85rem;
  }

  .container-index:has(.game-shell) .game-shell {
    height: calc(100dvh - 4.8rem);
    min-height: 0;
    padding: 0.72rem clamp(0.75rem, 1.5vw, 1.2rem) 0.85rem;
    grid-template-columns: minmax(295px, 390px) minmax(0, 1fr);
    gap: clamp(1rem, 2.2vw, 2rem);
    align-items: stretch;
    overflow: hidden;
  }

  .game-sidebar {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2.4dvh, 1.4rem);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-right: 0.12rem;
    scrollbar-color: var(--home-control-border) transparent;
  }

  /* Cards have overflow:hidden, so their automatic minimum size is 0 and a
     fixed-height container squeezes them below their content instead of
     letting the column scroll. */
  .game-sidebar > * {
    flex: 0 0 auto;
  }

  .game-sidebar-actions {
    align-self: stretch;
    margin-top: auto;
    gap: 0.42rem;
    padding: 0.36rem;
  }

  .match-center {
    gap: 0.3rem;
    padding: 0.68rem 0.82rem;
    border-radius: 10px;
    box-shadow: 0 5px 0 var(--home-cta-dark);
  }

  .match-label {
    font-size: 0.96rem;
  }

  .match-scoreboard {
    font-size: clamp(2.65rem, 5.4dvh, 3.25rem);
  }

  .game-sidebar-card {
    gap: 0.56rem;
    padding: 0.75rem 0.82rem;
    border-radius: 10px;
  }

  .game-sidebar-card-title,
  .bot-difficulty-label,
  .training-setting-label {
    font-size: 1rem;
  }

  .game-status-list,
  .bot-difficulty-panel,
  .training-setting-panel {
    gap: 0.42rem;
  }

  .game-status-item {
    min-height: 2.4rem;
    padding: 0.45rem 0.6rem;
  }

  .training-controls {
    max-height: none;
    overflow: visible;
  }

  .bot-difficulty-option,
  .map-option,
  .team-mode-option {
    min-height: 2.32rem;
    padding: 0.44rem 0.45rem;
    border-radius: 8px;
    font-size: 0.98rem;
  }

  .game-icon-button,
  .ragequit-button {
    min-height: 2.68rem;
    gap: 0.42rem;
    padding: 0.48rem 0.58rem;
  }

  .game-action-title {
    font-size: 0.96rem;
  }

  .game-action-subtitle {
    font-size: 0.68rem;
  }

  .game-stage {
    min-height: 0;
    grid-template-areas: none;
    grid-template-rows: auto max-content max-content;
    align-content: start;
    gap: 0.52rem;
    padding-top: 0.05rem;
  }

  .game-arena,
  .game-player-strip,
  .player-1-info,
  .player-2-info {
    grid-area: auto;
  }

  .game-arena,
  .game-player-strip {
    width: min(100%, 840px, calc((100dvh - 256px) * 1.333333));
  }

  #game {
    max-width: 840px;
  }

  .game-player-strip {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.62rem;
    padding-top: 0.35rem;
  }

  .game-versus-badge {
    min-width: 2.45rem;
    height: 2.45rem;
    display: grid;
    font-size: 1rem;
  }

  .player-info {
    min-height: 3.25rem;
    padding: 0.58rem 0.72rem;
  }

  .emote-bar {
    margin-top: 0.58rem;
    gap: 0.32rem;
  }

  .emote-button {
    min-width: 2.35rem;
    height: 2.35rem;
  }

  .emote-key {
    width: 0.92rem;
    height: 0.92rem;
    font-size: 0.56rem;
  }
}

/* -------------------------------------------------------------------------
   Shared court scale

   Scale Phaser's 800 x 600 render surface up to a 1600 x 1200 visual maximum.
   A narrower control rail replaces the previous oversized horizontal reserve;
   width and height still preserve the full 4:3 court on laptops and phones.
   ------------------------------------------------------------------------- */
body:not(.home-demo-body):has(.game-shell) .game-stage {
  justify-content: center;
}

/* The old training layout spent more than 500px on its sidebar, gap and page
   gutters. This compact rail gives the court that space back on wide screens. */
@media (min-width: 861px) and (min-height: 701px) {
  body:not(.home-demo-body):has(.game-shell) .game-shell {
    grid-template-columns: clamp(280px, 18vw, 340px) minmax(0, 1fr);
    gap: clamp(16px, 2vw, 32px);
    padding-right: clamp(12px, 1.5vw, 24px);
    padding-left: clamp(12px, 1.5vw, 24px);
  }
}

body:not(.home-demo-body):has(.game-shell) .game-arena,
body:not(.home-demo-body):has(.game-shell) .game-player-strip {
  width: min(
    100%,
    1600px,
    calc((100dvh - 210px) * 1.333333)
  );
}

body:not(.home-demo-body):has(.game-shell) #game {
  width: 100%;
  max-width: 1600px;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--home-stage-outline) 86%, transparent),
    0 14px 36px rgba(0, 0, 0, 0.22),
    0 0 32px color-mix(in srgb, var(--home-cta) 10%, transparent);
}

body:not(.home-demo-body):has(.game-shell) #game canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  border-radius: 11px;
}

@media (max-width: 860px) {
  body:not(.home-demo-body):has(.game-shell) .game-stage {
    grid-row: 1;
    grid-template-areas: none;
  }

  body:not(.home-demo-body):has(.game-shell) .game-sidebar {
    grid-row: 2;
  }

  body:not(.home-demo-body):has(.game-shell) .game-arena {
    grid-area: auto;
  }

  body:not(.home-demo-body):has(.game-shell) .game-arena,
  body:not(.home-demo-body):has(.game-shell) .game-player-strip {
    width: min(100%, calc(100vw - 62px));
  }
}

@media (max-width: 540px) {
  body:not(.home-demo-body):has(.game-shell) .game-arena,
  body:not(.home-demo-body):has(.game-shell) .game-player-strip {
    width: min(100%, calc(100vw - 50px));
  }
}

/* Real game embedded in the homepage cabinet. The parent already supplies the
   logo and navigation bar, so this document spends its full viewport on the
   controls and the complete 4:3 court. */
body.embedded-game-body {
  min-height: 100dvh;
  overflow: hidden;
}

body.embedded-game-body > footer { display: none; }

body.embedded-game-body .game-shell {
  width: 100%;
  height: 100dvh;
  min-height: 0;
  margin: 0;
  padding: clamp(10px, 1.5dvh, 16px);
  grid-template-columns: clamp(230px, 18vw, 300px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(12px, 1.5vw, 24px);
  overflow: hidden;
}

body.embedded-game-body .game-sidebar {
  min-height: 0;
  gap: clamp(.42rem, .9dvh, .68rem);
  overflow-y: auto;
  scrollbar-width: thin;
}

body.embedded-game-body .game-stage {
  min-height: 0;
  padding-top: 0;
  align-content: center;
  gap: clamp(.45rem, .8dvh, .7rem);
}

body.embedded-game-body .game-arena,
body.embedded-game-body .game-player-strip {
  width: min(100%, 1600px, calc((100dvh - 92px) * 1.333333));
}

body.embedded-game-body #game {
  width: 100%;
  max-width: 1600px;
  aspect-ratio: 4 / 3;
}

body.embedded-game-body #game canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

body.embedded-game-body .sidebar-footer { display: none; }

@media (max-width: 860px) {
  body.embedded-game-body { overflow-y: auto; }
  body.embedded-game-body .game-shell {
    height: auto;
    min-height: 100dvh;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    overflow: visible;
  }
  body.embedded-game-body .game-stage { grid-row: 1; }
  body.embedded-game-body .game-sidebar { grid-row: 2; overflow: visible; }
  body.embedded-game-body .game-arena,
  body.embedded-game-body .game-player-strip {
    width: min(100%, calc(100vw - 24px));
  }
}

/* Training shares the restrained palette of its parent menu. */
body.embedded-game-body:has(.game-shell) {
  --home-bg: #101817;
  --home-rail: #101817;
  --home-panel: #182320;
  --home-panel-2: #101817;
  --home-border: #34483f;
  --home-control: #101817;
  --home-control-border: #34483f;
  --home-text: #f3f0df;
  --home-soft-text: #c3cec6;
  --home-muted: #a8b5ac;
  --home-cta: #f6cd72;
  --home-cta-dark: #877443;
  --home-stage-outline: #34483f;
  font-family: 'Jersey 15', sans-serif;
}
body.embedded-game-body :is(.match-center, .game-sidebar-card, .game-icon-button) {
  box-shadow: none;
  border-radius: 3px;
}

/* The attract scene fills the title screen, without a rounded canvas inset. */
body.home-demo-body #game,
body.home-demo-body #game canvas,
body.home-demo-body .game-loading { border-radius: 0; }

/* ------------------------------------------------------------------ jetons de touches (court-hud.js)
   Éléments de page posés sur le terrain plutôt que sprites : le canvas (800 × 600) est agrandi d'un
   facteur non entier et crénèle tout petit rond ; ici, le navigateur les trace à la résolution de
   l'écran. Le calque est un conteneur de la taille du terrain : 1cqw = 8 px de terrain, donc les
   mesures ci-dessous se lisent en pixels de terrain / 8 (jeton de 26 px, écart de 4, bord à 21 et 13 px).
   Couleurs de scène fixes, comme le tableau de score. */
.court-touches { position: absolute; inset: 0; container-type: size; pointer-events: none; }
.court-touches-team { position: absolute; bottom: calc(100cqh * 13 / 600); display: flex; gap: .5cqw; }
.court-touches-team.is-left { left: 2.625cqw; }
.court-touches-team.is-right { right: 2.625cqw; flex-direction: row-reverse; }
.court-touch {
  --line: max(1px, .25cqw);
  position: relative; display: block; box-sizing: border-box; width: 3.25cqw; aspect-ratio: 1;
  border: var(--line) solid #060d09; border-radius: 50%; background: #16211d;
  box-shadow: inset 0 0 0 max(1px, .18cqw) #3d5249, 0 max(1px, .2cqw) 0 #060d0966;
}
/* Touche jouée : la balle du jeu, réduite par le navigateur (image HD, lissage normal). */
.court-touch::after {
  content: ''; position: absolute; inset: 7%; border-radius: 50%;
  background: url('/assets/ball-retro-hd.png?v=2') no-repeat 0 0 / 400% 100%; image-rendering: auto;
  filter: drop-shadow(0 max(1px, .12cqw) 0 #060d09); opacity: 0; transform: scale(0);
}
/* Touche libre : l'alvéole vide, rien d'autre. */
.court-touch.is-used::after { opacity: 1; transform: scale(1); }
/* « backwards » et pas « both » : une fois l'animation finie, c'est .is-used qui décide si la balle
   est là. Avec « both », l'état final de l'animation restait collé et la balle survivait au reset. */
.court-touch.is-used.is-popping::after { animation: court-touch-pop 190ms cubic-bezier(.34, 1.56, .64, 1) backwards; }
.court-touch.is-flipping { animation: court-touch-flip 140ms ease-in-out; }
/* 3e touche : le contour clignote en rouge, franchement (la suivante est une faute). */
.court-touches-team.is-last .court-touch { animation: court-touch-alert 400ms steps(1) infinite; }
@keyframes court-touch-pop { from { transform: scale(0); opacity: 1; } }
@keyframes court-touch-flip { 50% { transform: scaleX(0); } }
@keyframes court-touch-alert {
  0% { border-color: #ff7866; box-shadow: inset 0 0 0 max(1px, .18cqw) #ffb3a8, 0 0 0 max(1px, .2cqw) #ff786659, 0 max(1px, .2cqw) 0 #060d0966; }
  50% { border-color: #060d09; box-shadow: inset 0 0 0 max(1px, .18cqw) #3d5249, 0 max(1px, .2cqw) 0 #060d0966; }
}
body.is-training-paused .court-touch { animation-play-state: paused; }
/* Démo de l'accueil en décor (écran titre, menu) : personne n'y suit le compte des touches, les jetons
   s'effacent. Ils reviennent dès que le visiteur joue la démo (game.js retire .home-demo-is-attract). */
.court-touches { transition: opacity 240ms ease; }
body.home-demo-is-attract .court-touches { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .court-touch, .court-touch::after { animation: none !important; }
  .court-touches-team.is-last .court-touch { border-color: #ff7866; }
}