/* ==========================================================================
   GOOFY PARTY — direction artistique : arcade 16-bit (palette SNES chaude)
   Tout est en CSS pur : pas de lib d'effets, ça tourne sur un NAS et se
   consulte depuis des téléphones.
   ========================================================================== */

:root {
  --bg: #170f2e;
  --bg-deep: #0d0820;
  --bg-panel: #241c44;
  --bg-row: #2f2456;
  --border: #4d3f80;
  --border-light: #6b59a8;

  --accent: #f5a623;
  --accent-bright: #ffc857;
  --accent-red: #e94560;
  --accent-teal: #2ec4b6;
  --accent-pink: #ff6fae;
  --accent-purple: #b18cff;

  --text: #ece6ff;
  --text-dim: #9a8fc4;
  --available: #2ec4b6;
  --busy: #e94560;

  --font-pixel: 'Press Start 2P', monospace;
  --font-body: 'Trebuchet MS', system-ui, sans-serif;

  --step: steps(5, end);
}

* {
  box-sizing: border-box;
}

/* Zoom global de l'interface : tout le layout étant en rem, changer la base
   agrandit texte, marges et largeur de colonne d'un bloc. Le panneau de
   réglages, lui, reste en px pour garder une taille constante (sinon à 0.5x
   il devient inatteignable). */
html {
  font-size: calc(16px * var(--ui-scale, 1));
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  background: var(--bg-deep);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

#app {
  position: relative;
  z-index: 1;
  width: min(96vw, 33.75rem);
  margin: 0 auto;
  padding: 1.25rem 0.75rem 3rem;
}

/* --------------------------------------------------------------------------
   Décor : grille Mode 7 qui fuit vers l'horizon
   -------------------------------------------------------------------------- */

#bg-grid {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: linear-gradient(180deg, #0d0820 0%, #1b1038 42%, #3a1a5c 58%, #170f2e 100%);
}

#bg-grid::after {
  content: '';
  position: absolute;
  left: -60%;
  right: -60%;
  bottom: -35%;
  height: 95%;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 111, 174, 0.4) 0 2px, transparent 2px 88px),
    repeating-linear-gradient(0deg, rgba(46, 196, 182, 0.35) 0 2px, transparent 2px 88px);
  transform: perspective(300px) rotateX(72deg);
  transform-origin: 50% 100%;
  animation: grid-scroll 2.4s linear infinite;
  will-change: background-position;
}

@keyframes grid-scroll {
  to {
    background-position: 0 0, 0 88px;
  }
}

/* Ligne d'horizon lumineuse */
#bg-horizon {
  position: absolute;
  left: 0;
  right: 0;
  top: 55%;
  height: 2px;
  background: var(--accent-pink);
  box-shadow:
    0 0 12px 2px rgba(255, 111, 174, 0.8),
    0 0 40px 10px rgba(255, 111, 174, 0.35);
  animation: horizon-pulse 3.2s ease-in-out infinite;
}

@keyframes horizon-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Overlays CRT : grain animé, scanlines, vignette
   -------------------------------------------------------------------------- */

#fx-grain {
  position: fixed;
  inset: -100px;
  z-index: 998;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-jitter 0.6s steps(1, end) infinite;
}

/* Jitter par sauts secs : effet pellicule, jamais un glissement fluide */
@keyframes grain-jitter {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-6px, 4px); }
  40% { transform: translate(5px, -7px); }
  60% { transform: translate(-4px, -3px); }
  80% { transform: translate(7px, 5px); }
  100% { transform: translate(0, 0); }
}

#fx-scanlines {
  position: fixed;
  inset: 0;
  z-index: 997;
  pointer-events: none;
  opacity: 0.35;
  background-image: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.32) 0 1px,
    transparent 1px 3px
  );
}

#fx-overlay {
  position: fixed;
  inset: 0;
  z-index: 996;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(23, 15, 46, 0) 42%, rgba(9, 5, 20, 0.8) 100%);
}

/* --------------------------------------------------------------------------
   Typo & titres
   -------------------------------------------------------------------------- */

.logo {
  font-family: var(--font-pixel);
  font-size: clamp(0.95rem, 4.2vw, 1.35rem);
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--accent-bright);
  margin: 0.5rem 0 0.75rem;
  /* Glow "chunky" : plusieurs ombres nettes, pas de flou gaussien */
  text-shadow:
    3px 3px 0 var(--accent-red),
    6px 6px 0 rgba(0, 0, 0, 0.55),
    0 0 18px rgba(245, 166, 35, 0.5);
  animation: logo-breathe 3.5s ease-in-out infinite;
}

@keyframes logo-breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.tagline {
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  line-height: 1.8;
  text-align: center;
  color: var(--text-dim);
  margin: 0 0 1.5rem;
}

h2 {
  font-family: var(--font-pixel);
  font-size: 0.65rem;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: var(--accent);
  margin: 0 0 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* --------------------------------------------------------------------------
   Panneaux
   -------------------------------------------------------------------------- */

section,
#game-screen {
  position: relative;
  background: linear-gradient(180deg, var(--bg-panel) 0%, #1d1638 100%);
  border: 2px solid var(--border);
  border-radius: 2px;
  padding: 1rem;
  margin-bottom: 1.1rem;
  box-shadow:
    inset 0 0 24px rgba(0, 0, 0, 0.5),
    0 4px 0 rgba(0, 0, 0, 0.45),
    0 0 22px rgba(77, 63, 128, 0.3);
}

/* Coins pixel : petits carrés d'accent aux angles du panneau */
section::before,
section::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--accent);
}

section::before { top: -2px; left: -2px; }
section::after { bottom: -2px; right: -2px; }

.hidden {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Listes (jeux / joueurs / parties en cours)
   -------------------------------------------------------------------------- */

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  position: relative;
  padding: 0.7rem 0.6rem;
  margin-bottom: 0.35rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-row);
  transition: transform 0.12s var(--step), border-color 0.12s var(--step), background 0.12s var(--step);
}

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

li.clickable {
  cursor: pointer;
}

li.clickable:hover {
  transform: translateX(4px);
  border-left-color: var(--accent);
  background: #3a2d68;
}

li.selected {
  border-left-color: var(--accent);
  background: #3a2d68;
  box-shadow: 0 0 0 1px var(--accent) inset;
}

li.selected .game-name {
  color: var(--accent-bright);
}

.game-name,
.player-name {
  flex: 1;
  font-weight: bold;
  font-size: 0.95rem;
}

.game-meta {
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  color: var(--text-dim);
}

.status-badge {
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.3rem 0.4rem;
  border: 1px solid currentColor;
  white-space: nowrap;
}

.status-available { color: var(--available); }
.status-busy { color: var(--busy); }
.status-spectateur { color: var(--accent-purple); }

/* Pastille "live" clignotante */
.live-dot {
  width: 8px;
  height: 8px;
  background: var(--accent-red);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent-red);
  animation: live-blink 1.2s steps(1, end) infinite;
}

@keyframes live-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.15; }
}

.live-players {
  flex: 1;
  font-size: 0.9rem;
  font-weight: bold;
}

.live-vs {
  color: var(--accent-red);
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  margin: 0 0.35rem;
}

.live-info {
  font-family: var(--font-pixel);
  font-size: 0.45rem;
  color: var(--text-dim);
  display: block;
  margin-top: 0.3rem;
}

.error {
  color: var(--busy);
  font-size: 0.85rem;
  text-align: center;
  min-height: 1.2em;
}

/* Bandeau spectateur, au-dessus de l'écran de jeu */
.spectator-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  margin: -0.4rem 0 0.9rem;
  background: rgba(177, 140, 255, 0.12);
  border: 1px solid var(--accent-purple);
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  line-height: 1.6;
  color: var(--accent-purple);
}

.spectator-bar button {
  margin-top: 0;
  padding: 0.5rem 0.6rem;
  font-size: 0.5rem;
  border-color: var(--accent-purple);
  box-shadow: 0 3px 0 #5b3f9e;
}

.spectator-bar button:hover:not(:disabled) {
  background: var(--accent-purple);
  color: #1a1030;
  box-shadow: 0 5px 0 #5b3f9e, 0 0 18px rgba(177, 140, 255, 0.5);
}

/* --------------------------------------------------------------------------
   Champs & boutons
   -------------------------------------------------------------------------- */

input {
  font-family: var(--font-pixel);
  font-size: 0.8rem;
  width: 100%;
  padding: 0.9rem 0.8rem;
  background: var(--bg-deep);
  color: var(--accent-bright);
  border: 2px solid var(--border);
  text-align: center;
  letter-spacing: 0.05em;
  outline: none;
  transition: border-color 0.12s var(--step), box-shadow 0.12s var(--step);
}

input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.35), 0 0 18px rgba(245, 166, 35, 0.3);
}

input::placeholder {
  color: #5a4d8a;
}

button {
  font-family: var(--font-pixel);
  font-size: 0.62rem;
  line-height: 1.5;
  cursor: pointer;
  padding: 0.75rem 0.8rem;
  margin-top: 0.6rem;
  background: var(--bg-row);
  color: var(--text);
  border: 2px solid var(--accent);
  border-radius: 0;
  letter-spacing: 0.02em;
  /* Relief pixel : ombre pleine décalée, pas de dégradé */
  box-shadow: 0 4px 0 #8a5a10, 0 4px 0 2px rgba(0, 0, 0, 0.4);
  transition: transform 0.1s var(--step), box-shadow 0.1s var(--step), background 0.1s var(--step);
}

button:hover:not(:disabled) {
  background: var(--accent);
  color: #1a1030;
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #8a5a10, 0 6px 0 2px rgba(0, 0, 0, 0.4), 0 0 20px rgba(245, 166, 35, 0.5);
}

button:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0 0 0 #8a5a10, 0 0 0 2px rgba(0, 0, 0, 0.4);
}

button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: 0 4px 0 #2a2350;
  border-color: var(--border);
}

/* --------------------------------------------------------------------------
   Panneau de réglages (coin haut-droit) — le zoom, uniquement.
   Tout en px : ce panneau pilote le zoom, il ne doit pas le subir.
   -------------------------------------------------------------------------- */

.settings-corner {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1600;
}

.settings-toggle {
  font-family: var(--font-pixel);
  font-size: 15px;
  line-height: 1;
  margin: 0;
  padding: 8px 10px;
  background: var(--bg-panel);
  color: var(--text);
  border: 2px solid var(--border-light);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
}

.settings-toggle:hover:not(:disabled) {
  background: var(--accent-purple);
  color: #1a1030;
  transform: translateY(-2px);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.5), 0 0 16px rgba(177, 140, 255, 0.5);
}

.settings-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 250px;
  max-width: calc(100vw - 20px);
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  padding: 12px;
  background: var(--bg-panel);
  border: 2px solid var(--border-light);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.5), 0 0 24px rgba(0, 0, 0, 0.6);
}

.settings-panel.hidden {
  display: none;
}

.settings-section {
  margin-bottom: 14px;
}

.settings-section:last-child {
  margin-bottom: 0;
}

.settings-section h3 {
  font-family: var(--font-pixel);
  font-size: 9px;
  line-height: 1.6;
  color: var(--accent-bright);
  margin: 0 0 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
}

.scale-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.scale-btn {
  font-family: var(--font-pixel);
  font-size: 8px;
  line-height: 1.4;
  margin: 0;
  padding: 7px 2px;
  background: var(--bg-row);
  color: var(--text);
  border: 2px solid var(--border);
  box-shadow: none;
}

.scale-btn:hover:not(:disabled) {
  background: var(--bg-row);
  color: var(--text);
  transform: none;
  border-color: var(--border-light);
  box-shadow: none;
}

/* Doublé avec :hover — sur tactile le survol reste collé après le tap et
   masquerait l'état actif, donnant l'impression que le clic n'a rien fait. */
.scale-btn.active,
.scale-btn.active:hover:not(:disabled) {
  background: var(--accent);
  color: #1a1030;
  border-color: var(--accent-bright);
}

/* --------------------------------------------------------------------------
   Fin de partie : rejouer ou revenir au lobby
   -------------------------------------------------------------------------- */

.endgame-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1.2rem;
}

.replay-btn {
  margin: 0;
  border-color: var(--accent-bright);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5);
}

.replay-btn:hover:not(:disabled) {
  background: var(--accent-bright);
  color: #1a1030;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 200, 87, 0.6);
}

.lobby-btn {
  margin: 0;
  border-color: var(--border-light);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5);
}

/* --------------------------------------------------------------------------
   Panneaux dépliables (classement, historique)
   -------------------------------------------------------------------------- */

.panel-head {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.panel-head:hover { color: var(--accent-bright); }

.panel-arrow {
  display: inline-block;
  font-size: 0.7em;
  transition: transform 0.1s var(--step);
}

.panel.open .panel-arrow { transform: rotate(90deg); }

.panel-body.hidden { display: none; }

.panel-filters {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
}

.filter-btn {
  margin: 0;
  padding: 0.4rem 0.5rem;
  font-size: 0.45rem;
  background: var(--bg-row);
  color: var(--text);
  border: 2px solid var(--border);
  box-shadow: none;
}

.filter-btn:hover:not(:disabled) {
  background: var(--bg-row);
  color: var(--text);
  transform: none;
  border-color: var(--border-light);
  box-shadow: none;
}

/* Doublé avec :hover — sur tactile le survol reste collé après le tap et
   masquerait l'état actif, donnant l'impression que le clic n'a rien fait. */
.filter-btn.active,
.filter-btn.active:hover:not(:disabled) {
  background: var(--accent);
  color: #1a1030;
  border-color: var(--accent-bright);
}

.panel-empty {
  font-size: 0.85rem;
  color: var(--text-dim);
  padding: 0.5rem 0;
}

/* ---- Classement ---- */

.leaderboard {
  list-style: none;
  margin: 0;
  padding: 0;
}

.leaderboard li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.35rem;
  background: var(--bg-row);
  border-left: 3px solid var(--border);
}

/* Podium : la ligne prend la couleur de sa coupe. */
.leaderboard li.rank-1 { border-left-color: #ffc857; }
.leaderboard li.rank-2 { border-left-color: #cfd6e4; }
.leaderboard li.rank-3 { border-left-color: #d68a4c; }

.rank-badge {
  flex-shrink: 0;
  width: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-pixel);
  font-size: 0.45rem;
  color: var(--text-dim);
}

/* Coupe pixel : dessinée en SVG plutôt qu'en emoji, qu'on ne peut pas
   colorer en or / argent / bronze. */
.rank-badge svg { width: 1.35rem; height: 1.35rem; display: block; }

.leaderboard .player-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-stats {
  flex-shrink: 0;
  font-family: var(--font-pixel);
  font-size: 0.45rem;
  line-height: 1.7;
  color: var(--text-dim);
  text-align: right;
}

.rank-wins { color: var(--accent-bright); }

/* ---- Historique ---- */

.history {
  list-style: none;
  margin: 0;
  padding: 0;
}

.history li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.35rem;
  background: var(--bg-row);
  border-left: 3px solid var(--border);
}

.history-portrait {
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  object-fit: contain;
  background: #cfcfcf;
  image-rendering: pixelated;
  border: 2px solid var(--border-light);
}

.history-main {
  flex: 1;
  min-width: 0;
}

.history-line {
  font-size: 0.85rem;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-sub {
  font-family: var(--font-pixel);
  font-size: 0.4rem;
  line-height: 1.8;
  color: var(--text-dim);
  margin-top: 0.15rem;
}

.history-game {
  color: var(--accent-purple);
}

/* --------------------------------------------------------------------------
   Couleur de pseudo
   -------------------------------------------------------------------------- */

/* Discrète : un repère qu'on remarque si on cherche, pas un bouton qui saute
   aux yeux — sans ça, on garde juste la couleur donnée par le serveur. */
.color-swatch {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin: 0 0 0 0.35rem;
  padding: 0;
  vertical-align: middle;
  background: var(--pc, var(--accent));
  border: 1px solid rgba(236, 230, 255, 0.3);
  box-shadow: none;
  opacity: 0.75;
  transition: opacity 0.1s var(--step), transform 0.1s var(--step);
}

/* Sélecteur par id : la règle générique button:hover (fond --accent) a une
   spécificité plus forte que .color-swatch:hover et écraserait la couleur
   réelle du joueur au survol/tap — même parade que #invite-decline plus bas. */
#color-swatch:hover {
  background: var(--pc, var(--accent));
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: none;
}

.color-modal-title {
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  line-height: 1.8;
  margin: 0 0 0.9rem;
}

.color-menu-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

.color-swatch-option {
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  margin: 0;
  border: 2px solid var(--border);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
  transition: transform 0.1s var(--step), border-color 0.1s var(--step);
}

.color-swatch-option:hover {
  transform: translateY(-2px);
  border-color: var(--text);
}

.color-swatch-option.active {
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 2px var(--accent-bright), 0 2px 0 rgba(0, 0, 0, 0.5);
}

.color-menu-custom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  line-height: 1.6;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
  padding-top: 0.7rem;
  margin-bottom: 1rem;
  cursor: pointer;
}

.color-menu-custom input[type='color'] {
  width: 2.4rem;
  height: 1.8rem;
  padding: 0;
  margin: 0;
  border: 2px solid var(--border-light);
  background: none;
  cursor: pointer;
}

#color-modal-close {
  width: 100%;
  border-color: var(--border-light);
  box-shadow: 0 4px 0 #2a2350;
}

#color-modal-close:hover:not(:disabled) {
  background: var(--border-light);
  color: var(--text);
  box-shadow: 0 6px 0 #2a2350, 0 0 18px rgba(107, 89, 168, 0.5);
}

/* --------------------------------------------------------------------------
   Modale d'invitation
   -------------------------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(9, 5, 20, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1500;
  padding: 1rem;
  animation: modal-in 0.2s steps(4, end);
}

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

.modal-content {
  background: var(--bg-panel);
  border: 3px solid var(--accent);
  box-shadow: 0 0 0 3px var(--bg-deep), 0 0 40px rgba(245, 166, 35, 0.45);
  padding: 1.5rem 1.25rem;
  /* En rem : sinon le texte (en rem) déborde du cadre à fort zoom. */
  max-width: 21.25rem;
  width: 100%;
  text-align: center;
  animation: modal-pop 0.25s steps(5, end);
}

@keyframes modal-pop {
  from { transform: scale(0.7); }
  to { transform: scale(1); }
}

#invite-text {
  font-family: var(--font-pixel);
  font-size: 0.65rem;
  line-height: 1.9;
  margin: 0 0 0.5rem;
}

.modal-actions {
  display: flex;
  gap: 0.6rem;
}

.modal-actions button {
  flex: 1;
}

#invite-decline {
  border-color: var(--border-light);
  box-shadow: 0 4px 0 #2a2350;
}

#invite-decline:hover:not(:disabled) {
  background: var(--border-light);
  color: var(--text);
  box-shadow: 0 6px 0 #2a2350, 0 0 18px rgba(107, 89, 168, 0.5);
}

/* --------------------------------------------------------------------------
   Transitions d'écran : pixel-dissolve
   -------------------------------------------------------------------------- */

#transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(14, 1fr);
}

#transition-overlay.active {
  pointer-events: all;
}

#transition-overlay .cell {
  background: var(--accent-red);
  transform: scale(0);
}

#transition-overlay.dissolve-in .cell {
  animation: cell-in 0.28s steps(3, end) forwards;
}

#transition-overlay.dissolve-out .cell {
  transform: scale(1);
  animation: cell-out 0.28s steps(3, end) forwards;
}

@keyframes cell-in {
  to { transform: scale(1); }
}

@keyframes cell-out {
  to { transform: scale(0); }
}

/* --------------------------------------------------------------------------
   Intro "VS" au lancement d'une partie
   -------------------------------------------------------------------------- */

#vs-overlay {
  position: fixed;
  inset: 0;
  z-index: 1800;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(9, 5, 20, 0.92);
  overflow: hidden;
}

#vs-overlay .vs-name {
  font-family: var(--font-pixel);
  font-size: clamp(0.9rem, 5vw, 1.6rem);
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.7);
  padding: 0 1rem;
  text-align: center;
  word-break: break-word;
}

#vs-overlay .vs-left {
  animation: slide-from-left 0.45s steps(6, end);
}

#vs-overlay .vs-right {
  animation: slide-from-right 0.45s steps(6, end);
}

@keyframes slide-from-left {
  from { transform: translateX(-110vw); }
  to { transform: translateX(0); }
}

@keyframes slide-from-right {
  from { transform: translateX(110vw); }
  to { transform: translateX(0); }
}

#vs-overlay .vs-badge {
  font-family: var(--font-pixel);
  font-size: clamp(1.6rem, 9vw, 3rem);
  color: var(--accent-red);
  text-shadow:
    0 0 0 #000,
    5px 5px 0 rgba(0, 0, 0, 0.8),
    0 0 30px rgba(233, 69, 96, 0.8);
  animation: vs-stamp 0.4s steps(4, end) 0.35s backwards;
  margin: 0.4rem 0;
}

@keyframes vs-stamp {
  from { transform: scale(3.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* --------------------------------------------------------------------------
   Flash & screen-shake (victoire, match trouvé)
   -------------------------------------------------------------------------- */

#flash-overlay {
  position: fixed;
  inset: 0;
  z-index: 1900;
  pointer-events: none;
  background: #fff;
  opacity: 0;
}

#flash-overlay.firing {
  animation: flash-burst 0.4s steps(4, end);
}

@keyframes flash-burst {
  0% { opacity: 0.85; }
  100% { opacity: 0; }
}

.shaking {
  animation: screen-shake 0.45s steps(2, end);
}

@keyframes screen-shake {
  0% { transform: translate(0, 0); }
  15% { transform: translate(-8px, 5px); }
  30% { transform: translate(7px, -6px); }
  45% { transform: translate(-6px, -4px); }
  60% { transform: translate(6px, 6px); }
  75% { transform: translate(-4px, 3px); }
  100% { transform: translate(0, 0); }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (min-width: 700px) {
  #app {
    width: min(92vw, 45rem);
    padding-top: 2rem;
  }

  .modal-content {
    max-width: 26.25rem;
  }
}

/* Respect des préférences système : on coupe tout ce qui bouge en continu */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  #bg-grid::after,
  #fx-grain {
    animation: none !important;
  }
}