* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #23232b;
  --panel: #2e2e39;
  --panel2: #383846;
  --text: #eceaf2;
  --muted: #9a97ab;
  --accent: #6c7bff;
  --danger: #e05555;
  --border: #4a4a5c;
  --hud-bg: rgba(20, 20, 26, 0.82);
  --kbd-bg: rgba(255, 255, 255, 0.12);
}

body.light {
  --bg: #e3e5ec;
  --panel: #ffffff;
  --panel2: #eef0f5;
  --text: #23232b;
  --muted: #666a7a;
  --border: #c6c9d4;
  --hud-bg: rgba(255, 255, 255, 0.9);
  --kbd-bg: rgba(0, 0, 0, 0.08);
}

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* Fond décoratif de l'accueil : contours de pièces de puzzle qui partent du
   bas-gauche et s'estompent vers le haut-droit (tuile SVG + masque dégradé) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27480%27 height=%27480%27%3E%3Cg fill=%27none%27 stroke=%27%238b8b99%27 stroke-width=%271.5%27 stroke-opacity=%270.55%27%3E%3Cpath d=%27M 0 0 L 44.4 0.0 C 45.3 6.9 39.7 8.1 39.7 16.1 C 39.7 26.5 67.6 26.5 67.6 16.1 C 67.6 8.1 62.0 6.9 63.0 0.0 L 120.0 0.0 L 168.5 0.0 C 169.8 7.5 162.1 8.8 162.1 17.6 C 162.1 28.9 200.5 28.9 200.5 17.6 C 200.5 8.8 192.8 7.5 194.1 0.0 L 240.0 0.0 L 280.4 0.0 C 281.4 -6.7 275.8 -7.8 275.8 -15.7 C 275.8 -25.8 303.7 -25.8 303.7 -15.7 C 303.7 -7.8 298.1 -6.7 299.0 0.0 L 360.0 0.0 L 392.3 0.0 C 393.6 7.7 385.8 9.0 385.8 18.0 C 385.8 29.5 424.7 29.5 424.7 18.0 C 424.7 9.0 416.9 7.7 418.2 0.0 L 480.0 0.0%27/%3E%3Cpath d=%27M 0 120 L 53.3 120.0 C 54.4 128.2 47.6 129.5 47.6 139.0 C 47.6 151.3 81.8 151.3 81.8 139.0 C 81.8 129.5 75.0 128.2 76.1 120.0 L 120.0 120.0 L 164.9 120.0 C 166.1 129.3 159.3 130.8 159.3 141.7 C 159.3 155.6 193.3 155.6 193.3 141.7 C 193.3 130.8 186.5 129.3 187.6 120.0 L 240.0 120.0 L 275.4 120.0 C 276.5 127.7 269.7 129.0 269.7 137.9 C 269.7 149.5 303.9 149.5 303.9 137.9 C 303.9 129.0 297.1 127.7 298.2 120.0 L 360.0 120.0 L 410.7 120.0 C 411.9 128.4 405.0 129.9 405.0 139.7 C 405.0 152.4 439.3 152.4 439.3 139.7 C 439.3 129.9 432.5 128.4 433.6 120.0 L 480.0 120.0%27/%3E%3Cpath d=%27M 0 240 L 53.6 240.0 C 54.8 247.6 47.9 248.8 47.9 257.6 C 47.9 269.0 82.1 269.0 82.1 257.6 C 82.1 248.8 75.2 247.6 76.4 240.0 L 120.0 240.0 L 172.0 240.0 C 173.2 232.1 165.9 230.8 165.9 221.5 C 165.9 209.7 202.7 209.7 202.7 221.5 C 202.7 230.8 195.3 232.1 196.5 240.0 L 240.0 240.0 L 288.5 240.0 C 289.5 230.9 283.4 229.3 283.4 218.7 C 283.4 205.0 314.2 205.0 314.2 218.7 C 314.2 229.3 308.0 230.9 309.0 240.0 L 360.0 240.0 L 421.3 240.0 C 422.2 248.5 416.6 249.9 416.6 259.8 C 416.6 272.6 444.6 272.6 444.6 259.8 C 444.6 249.9 439.0 248.5 439.9 240.0 L 480.0 240.0%27/%3E%3Cpath d=%27M 0 360 L 40.7 360.0 C 42.0 352.1 34.7 350.8 34.7 341.6 C 34.7 329.7 70.9 329.7 70.9 341.6 C 70.9 350.8 63.7 352.1 64.9 360.0 L 120.0 360.0 L 161.2 360.0 C 162.3 369.3 155.6 370.9 155.6 381.7 C 155.6 395.7 189.1 395.7 189.1 381.7 C 189.1 370.9 182.4 369.3 183.5 360.0 L 240.0 360.0 L 277.2 360.0 C 278.2 352.5 271.8 351.3 271.8 342.6 C 271.8 331.4 304.1 331.4 304.1 342.6 C 304.1 351.3 297.6 352.5 298.7 360.0 L 360.0 360.0 L 426.2 360.0 C 427.2 353.3 421.0 352.2 421.0 344.4 C 421.0 334.3 452.3 334.3 452.3 344.4 C 452.3 352.2 446.0 353.3 447.1 360.0 L 480.0 360.0%27/%3E%3Cpath d=%27M 0 0 L 0.0 45.3 C -7.9 46.2 -9.2 40.7 -18.5 40.7 C -30.3 40.7 -30.3 68.5 -18.5 68.5 C -9.2 68.5 -7.9 63.0 0.0 63.9 L 0.0 120.0 L 0.0 156.1 C 7.3 157.0 8.5 151.5 16.9 151.5 C 27.8 151.5 27.8 179.3 16.9 179.3 C 8.5 179.3 7.3 173.7 0.0 174.6 L 0.0 240.0 L 0.0 297.1 C -8.3 298.1 -9.7 292.0 -19.5 292.0 C -32.0 292.0 -32.0 322.5 -19.5 322.5 C -9.7 322.5 -8.3 316.4 0.0 317.4 L 0.0 360.0 L 0.0 402.9 C 8.4 404.2 9.8 396.5 19.6 396.5 C 32.2 396.5 32.2 435.3 19.6 435.3 C 9.8 435.3 8.4 427.5 0.0 428.8 L 0.0 480.0%27/%3E%3Cpath d=%27M 120 0 L 120.0 45.5 C 111.8 46.5 110.4 40.9 100.8 40.9 C 88.4 40.9 88.4 68.7 100.8 68.7 C 110.4 68.7 111.8 63.1 120.0 64.0 L 120.0 120.0 L 120.0 179.0 C 126.9 180.1 128.0 173.6 136.0 173.6 C 146.3 173.6 146.3 205.7 136.0 205.7 C 128.0 205.7 126.9 199.3 120.0 200.3 L 120.0 240.0 L 120.0 304.1 C 127.9 305.2 129.2 298.7 138.5 298.7 C 150.3 298.7 150.3 331.3 138.5 331.3 C 129.2 331.3 127.9 324.8 120.0 325.9 L 120.0 360.0 L 120.0 409.2 C 111.0 410.4 109.5 402.8 98.9 402.8 C 85.4 402.8 85.4 440.7 98.9 440.7 C 109.5 440.7 111.0 433.1 120.0 434.4 L 120.0 480.0%27/%3E%3Cpath d=%27M 240 0 L 240.0 40.2 C 232.3 41.3 231.0 34.2 222.1 34.2 C 210.6 34.2 210.6 69.8 222.1 69.8 C 231.0 69.8 232.3 62.7 240.0 63.9 L 240.0 120.0 L 240.0 166.0 C 247.1 166.9 248.3 161.1 256.7 161.1 C 267.4 161.1 267.4 190.3 256.7 190.3 C 248.3 190.3 247.1 184.5 240.0 185.4 L 240.0 240.0 L 240.0 277.9 C 232.8 279.1 231.7 271.6 223.3 271.6 C 212.6 271.6 212.6 309.1 223.3 309.1 C 231.7 309.1 232.8 301.6 240.0 302.8 L 240.0 360.0 L 240.0 397.8 C 247.3 398.9 248.5 392.4 257.0 392.4 C 268.0 392.4 268.0 424.7 257.0 424.7 C 248.5 424.7 247.3 418.2 240.0 419.3 L 240.0 480.0%27/%3E%3Cpath d=%27M 360 0 L 360.0 43.4 C 368.1 44.6 369.5 37.4 378.9 37.4 C 391.1 37.4 391.1 73.1 378.9 73.1 C 369.5 73.1 368.1 66.0 360.0 67.2 L 360.0 120.0 L 360.0 169.6 C 368.3 170.7 369.6 164.2 379.3 164.2 C 391.7 164.2 391.7 196.9 379.3 196.9 C 369.6 196.9 368.3 190.4 360.0 191.5 L 360.0 240.0 L 360.0 302.7 C 350.8 303.8 349.2 297.3 338.5 297.3 C 324.7 297.3 324.7 329.4 338.5 329.4 C 349.2 329.4 350.8 323.0 360.0 324.0 L 360.0 360.0 L 360.0 406.9 C 352.1 407.9 350.8 402.3 341.6 402.3 C 329.8 402.3 329.8 430.1 341.6 430.1 C 350.8 430.1 352.1 424.5 360.0 425.4 L 360.0 480.0%27/%3E%3C/g%3E%3C/svg%3E");
  background-size: 480px 480px;
  background-position: left bottom;
  -webkit-mask-image: linear-gradient(to top right, rgba(0,0,0,0.85), rgba(0,0,0,0) 70%);
  mask-image: linear-gradient(to top right, rgba(0,0,0,0.85), rgba(0,0,0,0) 70%);
}
body.inGame::before { display: none; } /* en partie, le canvas a son propre fond */

.hidden { display: none !important; }
kbd {
  background: var(--kbd-bg);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.8em;
  font-family: inherit;
}

/* Roue crantée du lobby : ouvre la modale d'options (le jeu a la sienne) */
#lobbyGearBtn {
  position: fixed;
  bottom: 14px; right: 16px;
  z-index: 50;
  width: 42px; height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--hud-bg);
  color: var(--text);
  cursor: pointer;
}
#lobbyGearBtn:hover { border-color: var(--accent); }
body.inGame #lobbyGearBtn { display: none; }

#gearBtn {
  position: absolute;
  top: 64px; left: 16px;
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--hud-bg);
  color: var(--text);
  cursor: pointer;
}
#gearBtn:hover { border-color: var(--accent); }

#settingsOverlay,
#replayCfgOverlay {
  position: fixed;
  inset: 0;
  background: rgba(10,10,14,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
}
.settingsBox {
  background: var(--panel);
  border-radius: 16px;
  padding: 28px 32px;
  min-width: 270px;
  box-shadow: 0 12px 50px rgba(0,0,0,0.4);
}
.settingsBox h2 { margin-bottom: 20px; font-size: 1.25rem; }
.settingRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}
.settingRow span { color: var(--muted); }
.settingRow button {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel2);
  color: var(--text);
  cursor: pointer;
  font-size: 0.9rem;
}
.settingRow button:hover { border-color: var(--accent); }
.settingsBox .primary { margin-top: 10px; }
.settingRow input[type="range"] { width: 150px; accent-color: var(--accent); }
.settingRow select {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel2);
  color: var(--text);
  font-size: 0.9rem;
}
.settingsBox label.check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  font-size: 0.92rem;
  color: var(--muted);
  cursor: pointer;
}
.settingsBox label.check input { width: auto; margin: 0; }
.settingsBox button.primary { width: 100%; }
#replayCancel {
  width: 100%;
  margin-top: 10px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel2);
  color: var(--text);
  font-size: 0.92rem;
  cursor: pointer;
}
#replayCancel:hover { border-color: var(--accent); }

/* ===== Lobby ===== */
#lobby {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 20px;
  text-align: center;
}
#lobby h1 {
  font-size: 2.9rem;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-weight: 800;
  letter-spacing: -2px;
}
#lobby h1 .wmB { color: var(--accent); }
#lobby h1 .wmAmp { color: #ffc93d; } /* le jaune des étincelles du logo */
#lobby h1 .brandIcon { height: 1.3em; width: auto; }
.subtitle { color: var(--muted); margin-bottom: 36px; }

#homeChoice {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Navigation de l'accueil : chaque pastille ouvre une modale d'information */
#homeNav {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: -14px 0 32px;
}
#homeNav button {
  padding: 7px 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 0.86rem;
  font-family: inherit;
  cursor: pointer;
}
#homeNav button:hover { border-color: var(--accent); color: var(--text); }

/* Modales d'information (comment jouer, mentions légales, confidentialité) */
.infoOverlay {
  position: fixed;
  inset: 0;
  background: rgba(10,10,14,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
}
.infoBox {
  background: var(--panel);
  border-radius: 16px;
  padding: 28px 32px;
  max-width: 780px;
  width: calc(100vw - 32px);
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 12px 50px rgba(0,0,0,0.4);
  text-align: left;
}
.infoBox h2 { text-align: center; font-size: 1.4rem; margin-bottom: 20px; }
.infoBox > p { color: var(--muted); font-size: 0.92rem; line-height: 1.6; }
.infoBox > p + p { margin-top: 10px; }
.infoBox .closeInfo { display: block; margin: 22px auto 0; }
.infoBox .howCard { background: var(--panel2); }

/* Bouton « ? » des cartes de mode : ouvre la modale d'aide du mode */
.modeHelp {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
  width: 28px; height: 28px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--hud-bg);
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.modeHelp:hover { border-color: var(--accent); color: var(--text); }

/* Emplacement de la vidéo de présentation dans les modales d'aide */
.videoSlot {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
  border: 2px dashed var(--border);
  border-radius: 12px;
  background: var(--panel2);
  color: var(--muted);
  font-size: 0.9rem;
}
.videoSlot video, .videoSlot iframe {
  width: 100%; height: 100%;
  border: 0; border-radius: 12px;
}
.howGrid {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.howCard {
  flex: 1;
  min-width: 240px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px;
}
.howCard h3 { font-size: 1.02rem; margin-bottom: 8px; }
.howCard p { color: var(--muted); font-size: 0.92rem; line-height: 1.55; }
.howControls {
  color: var(--muted);
  font-size: 0.88rem;
  margin-top: 18px;
  text-align: center;
  line-height: 1.8;
}

/* Cartes de mode : titre et actions en haut, illustration en bas */
.modeCard {
  position: relative; /* ancre le bouton d'aide « ? » */
  width: min(320px, 100%);
  min-height: 340px;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  transition: transform 0.12s, border-color 0.12s;
}
.modeCard:hover { transform: translateY(-3px); border-color: var(--accent); }
.modeCard.selected { border-color: var(--accent); }
.modeCard.versus {
  background-image: linear-gradient(90deg, #ff5d5d, #4da3ff);
  background-size: 100% 4px;
  background-repeat: no-repeat;
  background-position: top;
}
.modeTop { padding: 24px 24px 18px; }
.modeTop h3 { font-size: 1.3rem; margin-bottom: 4px; }
.modeSub { color: var(--muted); font-size: 0.9rem; }
.modeActions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
.modeActions button {
  width: 100%;
  padding: 9px;
  border-radius: 9px;
  font-size: 0.92rem;
  cursor: pointer;
}
.modeActions button:not(.primary) {
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--text);
}
.modeActions button:not(.primary):hover { border-color: var(--accent); }
.modeArt {
  position: relative; /* ancre les badges par-dessus l'illustration */
  background: var(--panel2);
  display: flex;
  align-items: flex-end;
}
.artBadge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(20, 20, 26, 0.72);
  color: #fff;
  font-size: 0.72rem;
}
.modeArt svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--text);
}
#dailyThumb {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
}
.dailyNext {
  color: var(--accent);
  font-size: 0.78rem;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
/* Carte du jour en attente de son image */
.artLoading {
  width: 100%;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.95rem;
}
.modeCard.loading {
  opacity: 0.55;
  filter: grayscale(0.6);
  cursor: default;
}
.modeCard.loading:hover { transform: none; border-color: var(--border); }
.modeCredit {
  color: var(--muted);
  font-size: 0.72rem;
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Récap et partage du puzzle du jour (modale de fin) */
#dailyRecap { margin: -8px 0 20px; }
#recapText { color: var(--muted); font-size: 0.95rem; margin-bottom: 12px; }
#recapStats { color: var(--accent); font-size: 0.88rem; margin: -6px 0 12px; }
#shareRow {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
#shareRow button {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel2);
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
}
#shareRow button:hover { border-color: var(--accent); }
#previewCredit { font-size: 0.85rem; margin-top: 10px; opacity: 0.85; }

.backBtn {
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.88rem;
  padding: 0;
  margin-bottom: 12px;
}
.backBtn:hover { color: var(--text); }

.cards {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
}
.card {
  background: var(--panel);
  border-radius: 14px;
  padding: 32px 38px;
  width: min(580px, 100%);
  text-align: left;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}

.formRow { display: flex; gap: 18px; }
.formRow label { flex: 1; }
.card h2 { margin-bottom: 18px; font-size: 1.25rem; }
.card label {
  display: block;
  margin-bottom: 14px;
  font-size: 0.9rem;
  color: var(--muted);
}
.card .hint { font-size: 0.78rem; }
.card input[type="text"], .card select, .card input[type="file"] {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--text);
  font-size: 0.95rem;
}
.card label.check {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  cursor: pointer;
}
.card label.check input { width: auto; margin: 0; }

.urlRow {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.urlRow input[type="text"] { flex: 1; margin-top: 0; }
.urlRow button {
  padding: 9px 14px;
  border: none;
  border-radius: 8px;
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.urlRow button:hover { border-color: var(--accent); }

#imagePreviewWrap { margin: -4px 0 14px; }
#imagePreview {
  max-width: 100%;
  max-height: 220px;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}

button.primary {
  width: 100%;
  padding: 11px;
  border: none;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
button.primary:hover { filter: brightness(1.1); }
button.primary:disabled { opacity: 0.5; cursor: default; }
.error { color: #e05555; margin-top: 10px; font-size: 0.88rem; min-height: 1.2em; }
#lobbyNotice { margin: -18px 0 22px; min-height: 0; }

/* ===== Jeu ===== */
#game {
  position: fixed;
  inset: 0;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#cv {
  position: absolute;
  inset: 0;
  display: block;
  cursor: default;
  touch-action: none; /* le canvas gère lui-même pincement et glissements */
}

#timer {
  position: absolute;
  top: 14px; left: 16px;
  background: var(--hud-bg);
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 1px;
}

#topRight {
  position: absolute;
  top: 14px; right: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
#pctBadge { color: var(--muted); font-size: 0.95rem; margin-left: 4px; }
.teamPct { color: var(--muted); font-size: 0.82rem; }

#pauseBtn {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--hud-bg);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  font-size: 0.88rem;
}
#pauseBtn:hover { border-color: var(--accent); }

#pauseOverlay {
  position: absolute;
  inset: 0;
  background: rgba(10,10,14,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 22;
}
.pauseBox {
  background: var(--panel);
  border-radius: 16px;
  padding: 36px 48px;
  text-align: center;
  box-shadow: 0 12px 50px rgba(0,0,0,0.4);
}
.pauseBox h2 { font-size: 2rem; margin-bottom: 8px; }
.pauseBox p { color: var(--muted); }
.pauseBox .primary { margin-top: 18px; }

#timelapseBtn, #replayGameBtn {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel2);
  color: var(--text);
  font-size: 0.95rem;
  cursor: pointer;
}
#timelapseBtn:hover, #replayGameBtn:hover { border-color: var(--accent); }

#replayBar {
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--hud-bg);
  padding: 8px 14px;
  border-radius: 12px;
  z-index: 31;
  box-shadow: 0 6px 24px rgba(0,0,0,0.3);
}
#replayBar span { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.9rem; margin-right: 4px; }
#replayBar button {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel2);
  color: var(--text);
  padding: 6px 11px;
  cursor: pointer;
  font-size: 0.85rem;
}
#replayBar button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
#replayBar button:hover { border-color: var(--accent); }

#roomCodeWrap {
  background: var(--hud-bg);
  padding: 7px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.95rem;
}
#roomCode { font-weight: 700; letter-spacing: 2px; }
#playersList { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.playerChip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--hud-bg);
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 0.85rem;
}
.playerChip .dot { width: 10px; height: 10px; border-radius: 50%; }

/* Bouton d'exclusion (hôte uniquement) */
.kickBtn {
  width: 18px;
  height: 18px;
  margin-left: 4px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(224, 85, 85, 0.18);
  color: #e05555;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.kickBtn:hover { background: #e05555; color: #fff; }
.teamCol li .kickBtn { margin-left: 7px; }

button.danger {
  padding: 8px 14px;
  border: none;
  border-radius: 9px;
  background: var(--danger);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.88rem;
}
button.danger:hover { filter: brightness(1.1); }

#menu {
  position: absolute;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  background: var(--hud-bg);
  padding: 8px;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.3);
}
#menu button {
  border: none;
  border-radius: 9px;
  background: var(--panel2);
  color: var(--text);
  padding: 9px 15px;
  font-size: 0.92rem;
  cursor: pointer;
  white-space: nowrap;
}
#menu button:hover { filter: brightness(1.12); }
#menu button.active { background: var(--accent); color: #fff; }

/* ===== Mode versus ===== */
#teamHud {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}
.teamPanel {
  background: var(--hud-bg);
  border-radius: 10px;
  padding: 8px 14px;
  min-width: 150px;
  border-top: 3px solid;
  display: flex;
  align-items: center;
  gap: 10px;
}
.teamMain { flex: 1; }

/* Inventaires flottants : Rouge à droite de sa moitié, Bleu à gauche de la sienne */
.sideItems {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 10;
}
.sideItems.red { left: 14px; }
.sideItems.blue { right: 14px; }
.itemBtn {
  width: 48px;
  height: 48px;
  font-size: 1.5rem;
  line-height: 1;
  background: var(--hud-bg);
  border: 2px solid;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  transition: transform 0.1s;
}
.sideItems.red .itemBtn { border-color: rgba(255,93,93,0.7); }
.sideItems.blue .itemBtn { border-color: rgba(77,163,255,0.7); }
.itemBtn:not(:disabled):hover { transform: scale(1.15); }
.itemBtn:disabled { cursor: default; opacity: 0.7; }

/* Infobulle au survol d'un objet */
.itemBtn { position: relative; }
.itemBtn:hover::after {
  content: attr(data-tip);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: max-content;
  max-width: 250px;
  background: var(--hud-bg);
  color: var(--text);
  font-size: 0.85rem;
  font-family: 'Segoe UI', system-ui, sans-serif;
  text-align: left;
  line-height: 1.35;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
  pointer-events: none;
  z-index: 30;
}
.sideItems.red .itemBtn:hover::after { left: calc(100% + 12px); }
.sideItems.blue .itemBtn:hover::after { right: calc(100% + 12px); }

/* Compte à rebours de départ */
#countdown {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9rem;
  font-weight: 800;
  color: var(--text);
  text-shadow: 0 6px 40px rgba(0,0,0,0.45);
  z-index: 24;
  pointer-events: none;
}
#countdown .pop { animation: cdPop 0.95s ease-out forwards; }
@keyframes cdPop {
  0% { transform: scale(1.8); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.85; }
}

/* Notification sur la moitié d'écran d'une équipe (gain / utilisation d'objet) */
.halfNote {
  position: absolute;
  top: 26%;
  transform: translate(-50%, 0);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  background: var(--hud-bg);
  padding: 12px 22px;
  border-radius: 12px;
  white-space: nowrap;
  z-index: 18;
  pointer-events: none;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
  animation: noteFade 3s forwards;
}
.halfNote.red { left: 25%; }
.halfNote.blue { left: 75%; }
@keyframes noteFade {
  0% { opacity: 0; transform: translate(-50%, 16px); }
  12% { opacity: 1; transform: translate(-50%, 0); }
  70% { opacity: 1; transform: translate(-50%, -4px); }
  100% { opacity: 0; transform: translate(-50%, -22px); }
}

/* Jauges de temps restant des effets actifs */
.fxWrap {
  position: absolute;
  top: 72px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 190px;
  z-index: 12;
  pointer-events: none;
}
#fxRed { left: 25%; }
#fxBlue { left: 75%; }
.fxRow {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--hud-bg);
  border-radius: 8px;
  padding: 5px 10px;
}
.fxRow .fxIcon { font-size: 1rem; line-height: 1; }
.fxBarWrap {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(128,128,140,0.3);
  overflow: hidden;
}
.fxBar {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
}
.teamPanel.red { border-color: #ff5d5d; }
.teamPanel.blue { border-color: #4da3ff; }
.teamLine {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.92rem;
}
.teamLine .teamName { font-weight: 700; }
.teamPanel.red .teamName { color: #ff5d5d; }
.teamPanel.blue .teamName { color: #4da3ff; }
.gaugeWrap {
  margin-top: 6px;
  height: 7px;
  border-radius: 4px;
  background: rgba(128,128,140,0.25);
  overflow: hidden;
}
.gaugeBar {
  height: 100%;
  width: 0%;
  border-radius: 4px;
  transition: width 0.4s;
}
.gaugeBar.red { background: #ff5d5d; }
.gaugeBar.blue { background: #4da3ff; }
.itemCount { margin-top: 4px; font-size: 0.8rem; color: var(--muted); }

#teamOverlay {
  position: absolute;
  inset: 0;
  background: rgba(10,10,14,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 25;
}
.teamBox {
  background: var(--panel);
  border-radius: 16px;
  padding: 34px 40px;
  text-align: center;
  box-shadow: 0 12px 50px rgba(0,0,0,0.4);
}
.teamBox h2 { margin-bottom: 22px; }
.teamCols { display: flex; gap: 20px; }
.teamCol {
  width: 210px;
  border: 2px solid;
  border-radius: 12px;
  padding: 16px;
}
.teamCol.red { border-color: #ff5d5d; }
.teamCol.blue { border-color: #4da3ff; }
.teamCol h3 { margin-bottom: 10px; font-size: 1.02rem; }
.teamCol.red h3 { color: #ff5d5d; }
.teamCol.blue h3 { color: #4da3ff; }
.teamCol ul {
  list-style: none;
  min-height: 68px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 0.9rem;
}
.teamCol li { margin-bottom: 4px; }
.teamCol button {
  width: 100%;
  padding: 9px;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.teamCol.red button { background: #ff5d5d; }
.teamCol.blue button { background: #4da3ff; }
.teamCol button:hover { filter: brightness(1.1); }
.teamCol button:disabled { opacity: 0.45; cursor: default; filter: none; }

#overlayInvite {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.92rem;
}
#overlayInvite strong { color: var(--text); letter-spacing: 2px; }
#copyLinkBtn {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel2);
  color: var(--text);
  cursor: pointer;
  font-size: 0.85rem;
}
#copyLinkBtn:hover { border-color: var(--accent); }

#teamStatus {
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.92rem;
  min-height: 1.3em;
}
#startGameBtn { margin-top: 12px; }
#startGameBtn:disabled { opacity: 0.45; cursor: default; }

/* Aperçu image */
#previewOverlay {
  position: absolute;
  inset: 0;
  background: rgba(10,10,14,0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 20;
}
#previewInner { overflow: hidden; max-width: 86vw; max-height: 76vh; }
#previewImg {
  display: block;
  max-width: 86vw;
  max-height: 76vh;
  transform-origin: center center;
  border-radius: 8px;
}
#previewOverlay p { color: #cfcfda; }

/* Fin de partie */
#endOverlay {
  position: absolute;
  inset: 0;
  background: rgba(10,10,14,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
}
/* Canvas des confettis : au-dessus de la modale de fin, sans bloquer les clics */
#confettiCv {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}
.endBox {
  background: var(--panel);
  border-radius: 16px;
  padding: 40px 52px;
  text-align: center;
  box-shadow: 0 12px 50px rgba(0,0,0,0.4);
}
.endBox h2 { font-size: 1.8rem; margin-bottom: 10px; }
.endBox p { color: var(--muted); margin-bottom: 24px; font-size: 1.1rem; }
#minimizeEnd {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel2);
  color: var(--text);
  font-size: 0.95rem;
  cursor: pointer;
}
#minimizeEnd:hover { border-color: var(--accent); }

/* Pastille pour rouvrir les résultats une fois la modal réduite */
#showEndBtn {
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--hud-bg);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  z-index: 31;
  box-shadow: 0 6px 24px rgba(0,0,0,0.3);
}
#showEndBtn:hover { border-color: var(--accent); }

/* ===== Écrans tactiles : pas de raccourcis clavier à afficher ===== */
@media (pointer: coarse) {
  kbd { display: none; }
}

/* ===== Petits écrans (téléphones, petites tablettes) ===== */
@media (max-width: 760px) {
  #lobby { padding: 24px 14px; }
  #lobby h1 { font-size: 1.7rem; gap: 10px; }
  .card { padding: 22px 18px; }

  #timer { top: 10px; left: 10px; font-size: 1rem; padding: 6px 10px; }
  #topRight { top: 10px; right: 10px; gap: 5px; }
  #roomCodeWrap { font-size: 0.8rem; padding: 5px 9px; }
  .playerChip { font-size: 0.72rem; padding: 4px 8px; }
  button.danger { font-size: 0.75rem; padding: 6px 10px; }

  /* menu ancré à gauche pour laisser le coin droit aux boutons thème/son */
  #menu {
    bottom: 8px;
    left: 8px;
    transform: none;
    padding: 5px;
    gap: 4px;
    flex-wrap: wrap;
    max-width: calc(100vw - 88px);
  }
  #menu button { padding: 7px 10px; font-size: 0.78rem; }

  #themeBtn { bottom: 10px; right: 10px; font-size: 0.75rem; padding: 6px 9px; }
  #soundBtn { bottom: 44px; right: 10px; font-size: 0.75rem; padding: 6px 9px; }
  #gearBtn { top: 48px; left: 10px; width: 34px; height: 34px; }

  /* versus compacté : ancré à gauche, après la roue crantée */
  #teamHud { top: 44px; left: 50px; transform: none; gap: 6px; }
  .teamPanel { min-width: 106px; padding: 5px 9px; }
  .teamLine { font-size: 0.75rem; }
  .itemBtn { width: 40px; height: 40px; font-size: 1.15rem; }
  .halfNote { font-size: 0.92rem; padding: 8px 14px; white-space: normal; max-width: 44vw; text-align: center; }
  .fxWrap { width: 130px; top: 96px; }
  #countdown { font-size: 5rem; }

  .teamBox { padding: 22px 18px; max-width: 92vw; max-height: 88vh; overflow-y: auto; }
  .teamCols { flex-direction: column; gap: 12px; }
  .teamCol { width: 100%; }
  .teamCol ul { min-height: 24px; }
  #overlayInvite { flex-wrap: wrap; }
  .endBox { padding: 26px 28px; max-width: 90vw; }
}