@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* Fond */
  --paper:   #fdf5fb;   /* blanc rosé très pâle */
  --paper-2: #f3e2ef;   /* rose pâle (blocs HUD, fonds secondaires) */
  --paper-3: #e5c6dc;   /* rose moyen (bordures subtiles) */

  /* Encre / texte */
  --ink:      #4f003f;  /* violet foncé */
  --ink-soft: #7d0a59;  /* violet moyen */

  /* Accent rose */
  --rose:      #ce6ea5; /* rose principal */
  --rose-soft: #f0d5e9; /* rose très pâle */
  --rose-mid:  #e2b5d4; /* rose pâle médium */
  --rose-dark: #b05490; /* rose-violet */

  /* HUD spécifique */
  --hud-bg:   #f1d3e3;  /* fond des blocs manche/temps */

  /* Ombres */
  --shadow-block: 4px 4px 0 var(--ink);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

body {
  font-family: 'Jost', Helvetica, Arial, Lucida, sans-serif;
  background: var(--paper);
  color: var(--ink);
  background-image:
    radial-gradient(ellipse at 15% 10%, rgba(206, 110, 165, 0.12) 0, transparent 45%),
    radial-gradient(ellipse at 85% 90%, rgba(79, 0, 63, 0.07) 0, transparent 45%),
    repeating-linear-gradient(45deg, transparent 0 30px, rgba(79, 0, 63, 0.012) 30px 31px);
  line-height: 1.5;
}

/* ============================================================
   ============================================================ */

.chasse-body {
  --intensity: 0;
  background: white;
  min-height: 100vh;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  transition: background 0.6s linear;
  /* Curseur patte de poulet */
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g stroke="black" stroke-width="2.2" fill="%23ce6ea5" stroke-linecap="round" stroke-linejoin="round"><circle cx="16" cy="22" r="2.5"/><line x1="16" y1="22" x2="6" y2="11"/><line x1="16" y1="22" x2="16" y2="5"/><line x1="16" y1="22" x2="26" y2="11"/><line x1="16" y1="22" x2="16" y2="30"/></g></svg>') 16 22, pointer;
}
.chasse-body .ch-cell, .chasse-body .ch-btn, .chasse-body button, .chasse-body a {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 32 32"><g stroke="black" stroke-width="2.2" fill="%237d0a59" stroke-linecap="round" stroke-linejoin="round"><circle cx="16" cy="22" r="2.8"/><line x1="16" y1="22" x2="5" y2="9"/><line x1="16" y1="22" x2="16" y2="3"/><line x1="16" y1="22" x2="27" y2="9"/><line x1="16" y1="22" x2="16" y2="31"/></g></svg>') 16 22, pointer;
}

.stage-chasse {
  max-width: 1100px;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  padding: 12px 18px 12px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 10px;
  overflow: hidden;
  margin: 0 auto;
}

.chasse-title {
  text-align: center;
  padding: 8px 14px;
  background: var(--ink);
  color: white;
  border-radius: 8px;
  box-shadow: var(--shadow-block);
  flex-shrink: 0;
}
.ct-line1 {
  font-size: 20px;
  text-transform: uppercase;
  color: white;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.06em;
}
.ct-line2 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 1px;
}

.chasse-hud {
  display: grid;
  grid-template-columns: 0.8fr 1.3fr 1.3fr 1.3fr;
  gap: 8px;
  align-items: stretch;
  flex-shrink: 0;
}

.ch-block {
  background: var(--hud-bg);
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: var(--shadow-block);
}
.ch-block.big { padding: 8px; }

/* Bloc des boutons audio (à droite du timer) */
.ch-audio-block, .ch-restart-block {
  flex-direction: row !important;
  gap: 6px;
  padding: 6px !important;
}
.ch-restart-block .audio-btn,
.ch-audio-block .audio-btn { width: 100%; }
.restart-btn-ingame {
  background: var(--rose-mid) !important;
  color: var(--ink) !important;
  border-color: var(--ink-soft) !important;
}
.restart-btn-ingame:hover { background: var(--ink-soft) !important; color: var(--paper) !important; }
.restart-btn-ingame .audio-icon { color: var(--ink-soft); }
.restart-btn-ingame:hover .audio-icon { color: var(--paper); }

.mode-btn-ingame {
  background: var(--rose-soft) !important;
  color: var(--ink) !important;
  border-color: var(--rose) !important;
}
.mode-btn-ingame:hover { background: var(--rose) !important; color: var(--paper) !important; }
.audio-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: var(--hud-bg);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-weight: bold;
  padding: 6px 4px;
  text-decoration: none;
  transition: transform 0.1s, background 0.2s;
  box-shadow: 2px 2px 0 var(--ink);
  min-height: 56px;
}
.audio-btn:hover {
  background: var(--rose-soft);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--ink);
}
.audio-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.audio-btn .audio-icon { font-size: 22px; line-height: 1; }
.audio-btn .audio-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-weight: bold;
  white-space: nowrap;
}
.audio-btn.muted {
  background: var(--rose-mid);
  opacity: 0.85;
}
.audio-btn.muted .audio-lbl { color: var(--ink-soft); }

@media (max-width: 720px) {
  /* Stage mobile : remplit littéralement tout l'écran via position fixed */
  .stage-chasse {
    position: fixed;
    inset: 0;
    margin: 0;
    padding: 4px;
    gap: 4px;
    max-width: none;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
  }
  .chasse-body { overflow: hidden; }

  /* Titre compact */
  .chasse-title { padding: 4px 10px; }
  .ct-line1 { font-size: 16px; }
  .ct-line2 { font-size: 8px; letter-spacing: 0.15em; }

  /* HUD mobile : 2 lignes — ligne 1 (Manche / Temps) + ligne 2 (Restart / Audio) */
  .chasse-hud {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "manche manche temps temps temps temps"
      "restart restart restart audio audio audio";
    gap: 4px;
  }
  .chasse-hud > .ch-block:nth-child(1) { grid-area: manche; }
  .chasse-hud > .ch-block:nth-child(2) { grid-area: temps; }
  .chasse-hud > .ch-restart-block { grid-area: restart; }
  .chasse-hud > .ch-audio-block { grid-area: audio; }
  .ch-block { padding: 4px 6px; }
  .ch-lbl { font-size: 8px; letter-spacing: 0.05em; }
  .ch-val { font-size: 14px; }
  .ch-block.timer .timer-val { font-size: 22px; }
  .ch-block.timer .unit { font-size: 12px; }

  /* Boutons audio mobile : icône seule, plus petits */
  .audio-btn { min-height: 40px; padding: 4px 2px; }
  .audio-btn .audio-icon { font-size: 19px; }
  .audio-btn .audio-lbl { display: none; }
  .ch-audio-block, .ch-restart-block { gap: 4px; padding: 4px !important; }

  /* Grille : prend toute la largeur mobile, pas d'ombres qui débordent */
  .chasse-grid-wrap {
    padding: 4px;
    border-width: 2px;
    border-radius: 6px;
    box-shadow: none;
  }
  .chasse-grid { gap: 2px; }
  .ch-cell { border-radius: 3px; border-width: 1px; }

  /* Pas d'ombres extérieures sur mobile : elles débordent de l'écran */
  .chasse-title, .ch-block { box-shadow: none; }
}

@media (max-width: 480px) {
  .stage-chasse { padding: 3px 3px 4px; gap: 3px; }
  .ct-line1 { font-size: 14px; }
  .ct-line2 { font-size: 7px; }
  .chasse-title { padding: 3px 8px; }
  .chasse-hud {
    grid-template-columns: repeat(6, 1fr);
    gap: 3px;
  }
  .ch-block { padding: 3px 4px; }
  .ch-lbl { font-size: 7px; }
  .ch-val { font-size: 12px; }
  .ch-block.timer .timer-val { font-size: 18px; }
  .ch-block.timer .unit { font-size: 10px; }
  .audio-btn .audio-icon { font-size: 16px; }
  .audio-btn { min-height: 36px; }
  .chasse-grid-wrap { padding: 3px; }
  .chasse-grid { gap: 2px; }
}

/* Écrans intro / win / lose en mobile : tout tient SANS scroll */
@media (max-width: 720px) {
  .ch-overlay {
    padding: 4px;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding-bottom: 24px;
  }
  .ch-screen {
    padding: 8px 10px;
    max-height: calc(100dvh - 8px);
    max-height: calc(100vh - 8px);
    overflow-y: auto;
    box-shadow: 2px 2px 0 var(--rose);
    width: 100%;
    border-width: 2px;
  }
  .ch-screen h2 {
    font-size: 13px;
    margin: 0 0 2px;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  .ch-screen p { font-size: 10px; line-height: 1.25; margin: 2px 0; }
  /* "Tu as trouvé le flan." redondant avec "Bravo !" → caché en mobile */
  .ch-screen .ch-big { display: none; }
  .ch-emoji-big { font-size: 24px; margin: 0; }
  .ch-lead-short { font-size: 10px; margin: 2px 0 4px; line-height: 1.3; }

  /* Invitations win/lose : ultra compact */
  .ch-invite { padding: 5px 8px; margin: 3px auto 1px; border-radius: 5px; }
  .invite-line1 { font-size: 7px; margin-bottom: 1px; letter-spacing: 0.08em; }
  .invite-title { font-size: 12px; margin: 1px 0 3px; letter-spacing: 0; }
  .invite-meta { font-size: 9px; line-height: 1.25; }
  .invite-meta strong { font-size: 10px; }
  .invite-meta .invite-author { display: none; } /* trop long en mobile */
  .invite-hint { font-size: 8px; margin-top: 2px; line-height: 1.2; }

  /* Encart victory stats : encore plus compact */
  .victory-stats { padding: 4px 8px; margin: 2px auto 2px; }
  .victory-stats .vs-header { font-size: 9px; }
  .victory-stats .vs-label { font-size: 10px; }
  .victory-stats .vs-value { font-size: 20px; }
  .victory-stats .vs-share-btn { font-size: 10px; padding: 4px 6px; }

  /* Mode picker mobile : ultra compact */
  .mode-picker { margin-top: 4px; }
  .mp-title { font-size: 8px; margin: 0 0 3px; letter-spacing: 0.1em; }
  .mode-cards { gap: 3px; }
  .mode-card {
    min-height: 34px;
    padding: 4px 10px;
    gap: 8px;
    box-shadow: 2px 2px 0 var(--ink);
    border-width: 2px;
    border-radius: 6px;
  }
  .mode-card .mc-icon { font-size: 18px; }
  .mode-card .mc-label { font-size: 12px; }
  .mode-card .mc-sub { font-size: 8px; line-height: 1.2; }

  /* Actions (Hub) */
  .ch-actions { margin-top: 4px; }
  .ch-btn { padding: 5px 12px; font-size: 9px; }
}

/* Très petits écrans (iPhone SE etc.) */
@media (max-width: 380px) {
  .ch-screen { padding: 10px; }
  .ch-screen h2 { font-size: 17px; margin: 0 0 4px; }
  .ch-emoji-big { font-size: 32px; }
  .ch-lead-short { font-size: 12px; margin: 3px 0 6px; }
  .mode-card { min-height: 44px; padding: 6px 10px; gap: 10px; }
  .mode-card .mc-icon { font-size: 22px; }
  .mode-card .mc-label { font-size: 13px; }
  .mode-card .mc-sub { font-size: 10px; }
  .mp-title { margin-bottom: 6px; }
}
.ch-block.timer .timer-val {
  font-size: 32px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  line-height: 1;
}
.ch-block.timer .unit { font-size: 18px; margin-left: 2px; }
.ch-block.urgent .timer-val { color: var(--ink-soft); animation: urgent-pulse 0.35s ease-in-out infinite; }
@keyframes urgent-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.ch-block.urgent { animation: urgent-bg 0.35s ease-in-out infinite; }
@keyframes urgent-bg {
  0%, 100% { background: var(--hud-bg); }
  50% { background: var(--rose-mid); }
}

.ch-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  font-weight: bold;
}
.ch-val {
  font-size: 22px;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

.chasse-grid-wrap {
  background: var(--paper-2);
  border: 3px solid var(--ink);
  border-radius: 10px;
  padding: 10px;
  box-shadow: var(--shadow-block);
  min-height: 0;
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}
.chasse-grid {
  align-self: stretch;
  justify-self: stretch;
}

.chasse-grid {
  display: grid;
  gap: 4px;
  width: 100%;
  height: 100%;
  transition: opacity 0.25s ease;
}

/* Tremblement progressif de la grille — plus calme */
.chasse-grid-wrap {
  animation: grid-quake 0.32s linear infinite;
}
@keyframes grid-quake {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(calc(var(--intensity, 0) * -1.8px), calc(var(--intensity, 0) * 1px)); }
  50%  { transform: translate(calc(var(--intensity, 0) * 1.8px), calc(var(--intensity, 0) * -1px)); }
  75%  { transform: translate(calc(var(--intensity, 0) * -1px), calc(var(--intensity, 0) * 1.4px)); }
  100% { transform: translate(0, 0); }
}

/* Fondu entre niveaux */
body.ch-fading .chasse-grid-wrap,
body.ch-fading .chasse-hud {
  opacity: 0.15;
  transition: opacity 0.2s ease;
}

.ch-cell {
  background: var(--paper);
  border: 1px solid var(--ink-soft);
  border-radius: 5px;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--cell-font, 22px);
  line-height: 1;
  padding: 0;
  user-select: none;
  min-width: 0;
  min-height: 0;
  transition: transform 0.1s, background 0.15s;
  animation: cell-float 3s ease-in-out infinite;
}

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

.ch-cell:hover {
  background: var(--rose-soft);
  transform: scale(1.15) translateY(-2px);
  z-index: 5;
}

.ch-cell.found {
  background: var(--rose-dark);
  animation: found-pop 0.7s ease;
}
@keyframes found-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.6) rotate(-10deg); background: var(--rose); }
  100% { transform: scale(1.3) rotate(0); background: var(--rose-dark); }
}

.ch-cell.wrong {
  background: var(--rose-mid);
  animation: wrong-shake 0.35s ease;
}
@keyframes wrong-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Mutation : la case fait scale 0 puis change d'emoji */
.ch-cell.mutating {
  animation: cell-mutate 0.32s ease;
}
@keyframes cell-mutate {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(0.1); opacity: 0.6; }
  55% { transform: scale(0.1); opacity: 0.6; }
}

/* Swap : la case flip sur Y, échange l'emoji au milieu */
.ch-cell.swapping {
  animation: cell-swap 0.4s ease;
}
@keyframes cell-swap {
  0%, 100% { transform: rotateY(0); }
  50% { transform: rotateY(90deg); }
}

/* Confettis (victoire) */
.confetti {
  position: fixed;
  top: -50px;
  font-size: 32px;
  pointer-events: none;
  z-index: 10001;
  animation: confetti-fall linear forwards;
  user-select: none;
}
@keyframes confetti-fall {
  0% { transform: translateY(0) rotate(0deg) translateX(0); opacity: 1; }
  50% { transform: translateY(50vh) rotate(360deg) translateX(20px); opacity: 1; }
  100% { transform: translateY(115vh) rotate(720deg) translateX(-20px); opacity: 0.5; }
}

/* Splat flan (défaite) */
.splat-flan {
  position: fixed;
  left: 50%;
  top: 50%;
  font-size: 220px;
  z-index: 10001;
  pointer-events: none;
  animation: splat-fall 1.4s cubic-bezier(0.6, 0, 0.4, 1) forwards;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));
  line-height: 1;
}
@keyframes splat-fall {
  0% { transform: translate(-50%, -180vh) rotate(-180deg) scale(0.5); }
  55% { transform: translate(-50%, -50%) rotate(-10deg) scale(1.2); }
  62% { transform: translate(-50%, -42%) scale(1.5, 0.6) rotate(0); }
  72% { transform: translate(-50%, -42%) scale(1.7, 0.4) rotate(0); }
  100% { transform: translate(-50%, -42%) scale(1.9, 0.25) rotate(0); opacity: 0.85; }
}

/* Onde de choc */
.splat-wave {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: transparent;
  border: 4px solid var(--ink-soft);
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  animation: splat-ripple 0.8s ease-out forwards;
}
@keyframes splat-ripple {
  0% { width: 20px; height: 20px; opacity: 1; border-width: 6px; }
  100% { width: 600px; height: 600px; opacity: 0; border-width: 1px; }
}

/* Picker de mode (mobile-first : cartes empilées) */
.mode-picker {
  margin-top: 16px;
  text-align: center;
}
.mp-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  font-weight: bold;
  margin: 0 0 12px 0;
}
.mode-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mode-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 14px;
  padding: 12px 16px;
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: transform 0.12s, box-shadow 0.12s;
  box-shadow: 3px 3px 0 var(--ink);
  min-height: 64px;
  width: 100%;
  position: relative;
}
.mode-card .mc-medal {
  position: absolute;
  top: -10px;
  right: -8px;
  font-size: 24px;
  filter: drop-shadow(2px 2px 0 var(--ink));
  pointer-events: none;
  z-index: 2;
}
.mode-card .mc-record {
  position: absolute;
  bottom: 4px;
  right: 10px;
  font-size: 10px;
  font-weight: 600;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* Stats de victoire */
.victory-stats {
  margin: 8px auto 4px;
  padding: 10px 14px 12px;
  background: var(--paper);
  border-radius: 6px;
  max-width: 320px;
  position: relative;
  container-type: inline-size;
}
.victory-stats .vs-header {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  margin-bottom: 4px;
  letter-spacing: 0.04em;
}
.victory-stats .vs-label {
  font-size: 12px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.victory-stats .vs-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.victory-stats .vs-main {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  column-gap: 10px;
  margin-top: 6px;
}
/* Quand la largeur est trop faible : label + value empilés en col 1, bouton en col 2 */
@container (max-width: 200px) {
  .victory-stats .vs-main {
    grid-template-columns: 1fr auto;
    grid-template-areas: "label btn" "value btn";
  }
  .victory-stats .vs-label { grid-area: label; }
  .victory-stats .vs-value { grid-area: value; }
  .victory-stats .vs-share-btn { grid-area: btn; align-self: center; }
}
@keyframes vs-share-flash {
  0%   { opacity: 1; }
  15%  { opacity: 0.55; }
  100% { opacity: 1; }
}
.victory-stats .vs-share-btn {
  flex: 0 0 auto;
  justify-self: end;
  margin-top: 0;
  padding: 8px 16px;
  /* Taille fixe pour éviter le reflux lors du changement de texte */
  white-space: nowrap;
  background: var(--rose);
  color: var(--paper);
  border: none;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
  outline: none;
}
.victory-stats .vs-share-btn:hover { background: var(--rose-dark); }
.victory-stats .vs-share-btn.vs-share-copied {
  background: #2b7a2b;
  color: var(--paper);
  animation: vs-share-flash 0.5s ease;
}

@media (max-width: 720px) {
  .mode-card .mc-medal { font-size: 20px; top: -8px; right: -6px; }
  .mode-card .mc-record { font-size: 9px; bottom: 3px; right: 8px; }
  .victory-stats { padding: 6px 10px; margin: 4px auto 2px; }
  .victory-stats .vs-record { font-size: 11px; margin-bottom: 3px; }
  .victory-stats .vs-header { font-size: 10px; }
  .victory-stats .vs-label { font-size: 10px; }
  .victory-stats .vs-value { font-size: 22px; }
  .victory-stats .vs-share-btn { font-size: 11px; padding: 5px 8px; }
}
.mode-card:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.mode-card:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.mode-card .mc-icon {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}
.mode-card .mc-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.mode-card .mc-label {
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.mode-card .mc-sub {
  font-size: 12px;
  opacity: 0.78;
  line-height: 1.3;
}

/* Desktop : 3 colonnes verticales */
@media (min-width: 721px) {
  .mode-picker { margin-top: 18px; }
  .mp-title { font-size: 13px; margin-bottom: 14px; }
  .mode-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
  }
  .mode-card {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 5px;
    padding: 16px 10px;
    min-height: 110px;
    border-width: 3px;
    box-shadow: 4px 4px 0 var(--ink);
  }
  .mode-card .mc-info { align-items: center; gap: 2px; }
  .mode-card .mc-icon { font-size: 36px; }
  .mode-card .mc-label { font-size: 18px; }
  .mode-card .mc-sub { font-size: 11px; text-align: center; }
}

.mode-card.mc-beginner {
  background: linear-gradient(135deg, #d4edce 0%, #a8d4a0 100%);
  color: #1a4a14;
}
.mode-card.mc-hardcore {
  background: linear-gradient(135deg, #e86060 0%, #a81414 100%);
  color: #fff5f5;
}
.mode-card.mc-infinity {
  background: linear-gradient(135deg, #3a3a3a 0%, #111111 100%);
  color: #f0f0f0;
}

/* Thème global selon le mode */
body.mode-beginner.chasse-body {
  background: white;
}

body.mode-hardcore.chasse-body {
  background: white;
}
body.mode-infinity.chasse-body {
  background: white;
}

/* Flan projectile : lancé sur la case cible */
.flan-projectile {
  position: fixed;
  font-size: 80px;
  pointer-events: none;
  z-index: 9999;
  line-height: 1;
  filter: drop-shadow(4px 6px 0 rgba(0,0,0,0.4));
  transform-origin: center;
}

/* Feux d'artifice : œuf qui monte */
.fw-egg {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  line-height: 1;
  filter: drop-shadow(0 0 10px rgba(245, 201, 69, 0.8)) drop-shadow(3px 4px 0 rgba(0,0,0,0.4));
}
.fw-trail {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  line-height: 1;
  transform: translate(-50%, -50%);
}
.fw-particle {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  line-height: 1;
}

/* Flan dégoulinant */
.flan-drip {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  line-height: 1;
  user-select: none;
}

/* Shake d'écran à l'impact du splat */
body.screen-shake { animation: body-shake 0.45s ease-in-out; }
@keyframes body-shake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-10px, 8px); }
  30% { transform: translate(10px, -8px); }
  45% { transform: translate(-8px, -6px); }
  60% { transform: translate(8px, 6px); }
  75% { transform: translate(-6px, 4px); }
  90% { transform: translate(6px, -2px); }
}

/* Note : font-size dynamique calculé en JS via --cell-font */

/* Teinte progressive : plus on avance, plus le fond ressemble à un flan
   (jaune-beige), ce qui brouille le contraste de couleur du 🍮 cible. */
.chasse-grid[data-tint="1"] .ch-cell { background: #fef3d0; }
.chasse-grid[data-tint="2"] .ch-cell { background: #fde9a5; }
.chasse-grid[data-tint="3"] .ch-cell {
  background: linear-gradient(135deg, #fde9a5 0%, #f5c0b5 100%);
}
.chasse-grid[data-tint="3"] {
  background: #c8a060;
  padding: 4px;
  border-radius: 6px;
}

/* ===== Overlay (intro / win / lose) ===== */
.ch-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(31, 24, 18, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.ch-overlay[hidden] { display: none; }

.ch-screen {
  max-width: 540px;
  width: 100%;
  background: var(--paper);
  border: 3px solid var(--rose);
  border-radius: 14px;
  padding: 18px 26px;
  text-align: center;
  box-shadow: 8px 8px 0 var(--rose);
  animation: ch-screen-in 0.5s ease;
  max-height: 96vh;
  max-height: 96dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
@keyframes ch-screen-in {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.ch-screen[hidden] { display: none; }

.ch-screen h2 {
  margin: 4px 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ch-screen p { font-size: 14px; line-height: 1.45; margin: 4px 0; }
.ch-screen .ch-big { font-size: 16px; font-weight: bold; }

.ch-emoji-big {
  font-size: 50px;
  line-height: 1;
  margin-bottom: 2px;
  animation: emoji-pop 0.6s ease;
}
.ch-emoji-big.celebrate { animation: emoji-celebrate 1.8s ease infinite; }
.ch-emoji-big.sad { animation: emoji-sad 1.8s ease infinite; }
@keyframes emoji-pop {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes emoji-celebrate {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  50% { transform: rotate(8deg) scale(1.15); }
}
@keyframes emoji-sad {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

.ch-rules {
  text-align: left;
  margin: 14px auto;
  padding-left: 22px;
  max-width: 440px;
  font-size: 14px;
  line-height: 1.7;
}
.ch-rules li { margin: 6px 0; }

.ch-btn {
  display: inline-block;
  background: var(--paper-2);
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 14px 26px;
  font-family: inherit;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
  box-shadow: 4px 4px 0 var(--ink);
}
.ch-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); background: var(--rose-soft); }
.ch-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.ch-btn.primary { background: var(--ink-soft); color: var(--paper); border-color: var(--ink); }
.ch-btn.primary:hover { background: #ec7964; }

.ch-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }

/* Carte invitation (win / lose) */
.ch-invite {
  margin: 10px auto 4px;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 8px;
  border: 2px dashed var(--rose);
  text-align: center;
  max-width: 420px;
}
.ch-invite.consolation { border-color: var(--rose); }
.invite-line1 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--rose);
  margin-bottom: 6px;
}
.ch-invite.consolation .invite-line1 { color: var(--rose); }
.invite-title {
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--paper);
  margin: 6px 0 0;
  letter-spacing: 0.05em;
}
.invite-meta { font-size: 13px; line-height: 1.6; color: var(--paper-3); }
.invite-book-btn {
  display: inline-block;
  margin: 10px auto 4px;
  padding: 8px 20px;
  background: var(--rose);
  color: var(--paper);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 6px;
  text-decoration: none;
}
.invite-book-btn:hover { opacity: 0.85; }
.invite-hint {
  margin-top: 8px;
  font-size: 11px;
  color: var(--paper-3);
}

/* Bulles de texte comiques qui flashent */
.bubble-text {
  position: fixed;
  z-index: 800;
  background: var(--rose-soft);
  color: var(--ink);
  padding: 6px 14px;
  border-radius: 18px;
  font-weight: bold;
  font-style: italic;
  pointer-events: none;
  animation: bubble-pop 0.6s cubic-bezier(0.34, 1.7, 0.64, 1) forwards;
  white-space: nowrap;
  box-shadow: 3px 3px 0 var(--rose);
  transform: rotate(var(--tilt, 0deg));
}
@keyframes bubble-pop {
  0% { opacity: 0; transform: scale(0.2) rotate(var(--tilt, 0deg)); }
  25% { opacity: 1; transform: scale(1.25) rotate(var(--tilt, 0deg)); }
  55% { opacity: 1; transform: scale(1) rotate(var(--tilt, 0deg)); }
  100% { opacity: 0; transform: scale(1.15) rotate(var(--tilt, 0deg)) translateY(-12px); }
}

/* Coq géant cocorico plein écran */
.giant-rooster {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: radial-gradient(circle, rgba(245,201,69,0.4) 0%, transparent 65%);
  animation: gr-bg-flash 0.85s ease-out forwards;
}
.gr-cock {
  font-size: 280px;
  line-height: 1;
  filter: drop-shadow(8px 12px 0 rgba(0,0,0,0.6));
  animation: gr-cock-pop 0.85s cubic-bezier(0.34, 1.6, 0.64, 1) both;
}
.gr-text {
  font-size: 48px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--paper);
  text-shadow: 4px 4px 0 var(--ink-soft), -2px -2px 0 var(--ink);
  margin-top: 16px;
  letter-spacing: 0.1em;
  animation: gr-text-pop 0.85s cubic-bezier(0.34, 1.6, 0.64, 1) both;
  animation-delay: 0.1s;
}
@keyframes gr-cock-pop {
  0% { transform: scale(0.2) rotate(-25deg); opacity: 0; }
  35% { transform: scale(1.35) rotate(8deg); opacity: 1; }
  60% { transform: scale(1) rotate(0); }
  100% { transform: scale(1.25) rotate(0); opacity: 0; }
}
@keyframes gr-text-pop {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1) translateY(-12px); opacity: 0; }
}
@keyframes gr-bg-flash {
  0%, 100% { background-color: transparent; }
  30% { background-color: rgba(245,201,69,0.45); }
}

/* Bannières de réaction (BRAVO / RATÉ / VITE) */
.reaction-banner {
  position: fixed;
  top: 32%;
  left: 50%;
  font-size: 84px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1100;
  animation: reaction-pop 0.65s cubic-bezier(0.34, 1.8, 0.64, 1) forwards;
}
.reaction-green { color: var(--rose-dark); text-shadow: 5px 5px 0 var(--ink), -1px -1px 0 white; }
.reaction-red { color: var(--ink-soft); text-shadow: 5px 5px 0 var(--ink), -1px -1px 0 white; }
.reaction-orange { color: var(--rose); text-shadow: 5px 5px 0 var(--ink), -1px -1px 0 white; }
@keyframes reaction-pop {
  0% { transform: translateX(-50%) scale(0.2) rotate(-12deg); opacity: 0; }
  20% { transform: translateX(-50%) scale(1.45) rotate(6deg); opacity: 1; }
  55% { transform: translateX(-50%) scale(1) rotate(0); opacity: 1; }
  100% { transform: translateX(-50%) scale(1.3) rotate(0) translateY(-30px); opacity: 0; }
}

/* Faune SPECTACULAIRE : plumes énormes, poule géante, œufs qui splashent */
.wildlife {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  user-select: none;
  line-height: 1;
  will-change: transform;
}

/* Têtes de poule qui tombent — 4 variantes d'animation drôles */
.head {
  top: -90px;
  filter: drop-shadow(3px 5px 0 rgba(0,0,0,0.3));
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

/* 1) Chute droite avec rotation lente */
.head.straight {
  animation-name: head-straight;
}
@keyframes head-straight {
  0% { transform: translateY(0) rotate(var(--rot-start, 0deg)); opacity: 1; }
  100% { transform: translateY(115vh) translateX(var(--drift, 0px)) rotate(var(--rot-end, 720deg)); opacity: 0.7; }
}

/* 2) Zigzag horizontal pendant la chute */
.head.zigzag { animation-name: head-zigzag; }
@keyframes head-zigzag {
  0%   { transform: translateY(0) translateX(0) rotate(0); }
  20%  { transform: translateY(20vh) translateX(120px) rotate(180deg); }
  40%  { transform: translateY(40vh) translateX(-120px) rotate(360deg); }
  60%  { transform: translateY(60vh) translateX(120px) rotate(540deg); }
  80%  { transform: translateY(80vh) translateX(-100px) rotate(720deg); }
  100% { transform: translateY(115vh) translateX(0) rotate(900deg); opacity: 0.7; }
}

/* 3) Looping : monte un peu en haut puis redescend en faisant un cercle */
.head.loop { animation-name: head-loop; }
@keyframes head-loop {
  0%   { transform: translateY(0) translateX(0) rotate(0); opacity: 1; }
  10%  { transform: translateY(-8vh) translateX(60px) rotate(180deg); }
  20%  { transform: translateY(-4vh) translateX(120px) rotate(360deg); }
  30%  { transform: translateY(10vh) translateX(160px) rotate(540deg); }
  50%  { transform: translateY(40vh) translateX(180px) rotate(900deg); }
  100% { transform: translateY(115vh) translateX(220px) rotate(1620deg); opacity: 0.7; }
}

/* 4) Rotation très rapide pendant la chute (étourdie) */
.head.spin-fast { animation-name: head-spin-fast; }
@keyframes head-spin-fast {
  0%   { transform: translateY(0) translateX(0) rotate(0); }
  100% { transform: translateY(115vh) translateX(var(--drift, 0px)) rotate(2880deg); opacity: 0.7; }
}

/* Poule qui dégringole verticalement et s'aplatit au sol */
.falling-chicken {
  top: -180px;
  font-size: 120px;
  filter: drop-shadow(5px 6px 0 rgba(0,0,0,0.5));
  animation: chicken-fall 1.5s cubic-bezier(0.5, 0, 0.7, 1) forwards;
}
@keyframes chicken-fall {
  0%  { transform: translateY(0) rotate(0); }
  60% { transform: translateY(90vh) rotate(900deg); }
  68% { transform: translateY(82vh) rotate(900deg) scaleY(0.5) scaleX(1.4); } /* impact ! */
  76% { transform: translateY(90vh) rotate(900deg) scaleY(0.3) scaleX(1.7); }
  86% { transform: translateY(86vh) rotate(900deg) scaleY(0.6) scaleX(1.3); } /* rebond */
  100% { transform: translateY(90vh) rotate(900deg) scaleY(0.4) scaleX(1.5); opacity: 0; }
}

/* Poule en pied qui court horizontalement au bas de l'écran */
.chicken {
  bottom: 25px;
  top: auto;
  filter: drop-shadow(4px 5px 0 rgba(0,0,0,0.35));
}
.chicken .chicken-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Pattes qui pédalent — basse-cour effrénée */
.chicken-svg .leg-a {
  animation: leg-up-down 0.18s linear infinite;
  transform-origin: 44px 68px;
}
.chicken-svg .leg-b {
  animation: leg-up-down 0.18s linear infinite reverse;
  transform-origin: 62px 68px;
}
.chicken-svg .foot-a {
  animation: foot-up-down 0.18s linear infinite;
}
.chicken-svg .foot-b {
  animation: foot-up-down 0.18s linear infinite reverse;
}
@keyframes leg-up-down {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50%      { transform: translateY(-3px) rotate(8deg); }
}
@keyframes foot-up-down {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* Trajectoires gauche-droite et droite-gauche, 3 styles : run / hop / leap */
.chicken.left-to-right { left: -250px; }
.chicken.right-to-left { right: -250px; }
.chicken.right-to-left .chicken-svg { transform: scaleX(-1); }

.chicken.run.left-to-right    { animation: chicken-run-ltr 2.6s linear forwards; }
.chicken.run.right-to-left    { animation: chicken-run-rtl 2.6s linear forwards; }
.chicken.hop.left-to-right    { animation: chicken-hop-ltr 2.6s linear forwards; }
.chicken.hop.right-to-left    { animation: chicken-hop-rtl 2.6s linear forwards; }
.chicken.leap.left-to-right   { animation: chicken-leap-ltr 2.8s cubic-bezier(0.3, 0, 0.7, 1) forwards; }
.chicken.leap.right-to-left   { animation: chicken-leap-rtl 2.8s cubic-bezier(0.3, 0, 0.7, 1) forwards; }

/* RUN : petit bounce continu */
@keyframes chicken-run-ltr {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(10vw, -8px); }
  20%  { transform: translate(20vw, 0); }
  30%  { transform: translate(30vw, -8px); }
  40%  { transform: translate(40vw, 0); }
  50%  { transform: translate(50vw, -10px); }
  60%  { transform: translate(60vw, 0); }
  70%  { transform: translate(70vw, -8px); }
  80%  { transform: translate(80vw, 0); }
  90%  { transform: translate(95vw, -6px); }
  100% { transform: translate(calc(100vw + 300px), 0); }
}
@keyframes chicken-run-rtl {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-10vw, -8px); }
  20%  { transform: translate(-20vw, 0); }
  30%  { transform: translate(-30vw, -8px); }
  40%  { transform: translate(-40vw, 0); }
  50%  { transform: translate(-50vw, -10px); }
  60%  { transform: translate(-60vw, 0); }
  70%  { transform: translate(-70vw, -8px); }
  80%  { transform: translate(-80vw, 0); }
  90%  { transform: translate(-95vw, -6px); }
  100% { transform: translate(calc(-100vw - 300px), 0); }
}

/* HOP : 2 sauts de hauteur moyenne pendant la traversée */
@keyframes chicken-hop-ltr {
  0%   { transform: translate(0, 0); }
  15%  { transform: translate(15vw, calc(var(--mid-jump, 120px) * -1)) rotate(-3deg); }
  30%  { transform: translate(30vw, 0); }
  55%  { transform: translate(55vw, calc(var(--mid-jump, 120px) * -1)) rotate(3deg); }
  75%  { transform: translate(75vw, 0); }
  100% { transform: translate(calc(100vw + 300px), 0); }
}
@keyframes chicken-hop-rtl {
  0%   { transform: translate(0, 0); }
  15%  { transform: translate(-15vw, calc(var(--mid-jump, 120px) * -1)) rotate(3deg); }
  30%  { transform: translate(-30vw, 0); }
  55%  { transform: translate(-55vw, calc(var(--mid-jump, 120px) * -1)) rotate(-3deg); }
  75%  { transform: translate(-75vw, 0); }
  100% { transform: translate(calc(-100vw - 300px), 0); }
}

/* LEAP : grand saut jusqu'au bord haut de la grille */
@keyframes chicken-leap-ltr {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(10vw, -20px) rotate(-2deg); }
  30%  { transform: translate(30vw, calc(var(--max-jump, 50vh) * -0.85)) rotate(-8deg); }
  50%  { transform: translate(50vw, calc(var(--max-jump, 50vh) * -1)) rotate(0); }
  70%  { transform: translate(70vw, calc(var(--max-jump, 50vh) * -0.85)) rotate(8deg); }
  90%  { transform: translate(95vw, -20px) rotate(2deg); }
  100% { transform: translate(calc(100vw + 300px), 0); }
}
@keyframes chicken-leap-rtl {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-10vw, -20px) rotate(2deg); }
  30%  { transform: translate(-30vw, calc(var(--max-jump, 50vh) * -0.85)) rotate(8deg); }
  50%  { transform: translate(-50vw, calc(var(--max-jump, 50vh) * -1)) rotate(0); }
  70%  { transform: translate(-70vw, calc(var(--max-jump, 50vh) * -0.85)) rotate(-8deg); }
  90%  { transform: translate(-95vw, -20px) rotate(-2deg); }
  100% { transform: translate(calc(-100vw - 300px), 0); }
}

/* Poule dorée : plus rapide, brille, cliquable, donne +5 secondes */
.chicken.gold {
  pointer-events: auto;
  cursor: pointer;
  animation-duration: 1.5s;
  filter: drop-shadow(0 0 14px #f5c945) drop-shadow(0 0 28px #f5c945) drop-shadow(4px 5px 0 rgba(0,0,0,0.35));
}
.chicken.gold::before {
  content: '✨';
  position: absolute;
  top: -10%;
  left: 25%;
  font-size: 1.6rem;
  animation: sparkle 0.7s ease-in-out infinite;
  pointer-events: none;
  z-index: 10;
}
.chicken.gold::after {
  content: '+5s';
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--rose);
  color: var(--ink);
  padding: 3px 10px;
  border-radius: 12px;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}
@keyframes sparkle {
  0%, 100% { transform: rotate(0) scale(1); opacity: 1; }
  50% { transform: rotate(180deg) scale(1.5); opacity: 0.6; }
}
.chicken.gold.caught {
  animation: gold-catch 0.6s ease forwards !important;
}
@keyframes gold-catch {
  0% { transform: scale(1); opacity: 1; }
  40% { transform: scale(1.5) rotate(180deg); filter: brightness(2.5) drop-shadow(0 0 40px gold); }
  100% { transform: scale(0) rotate(360deg); opacity: 0; }
}

/* GROSSE poule qui rentre, s'arrête au milieu, pond, repart — 4s totales */
.chicken-stop {
  font-size: 180px;
  left: 50%;
  top: 0;
  filter: drop-shadow(6px 8px 0 rgba(0,0,0,0.5));
  animation: chicken-stop-anim 2s ease-in-out forwards;
}
@keyframes chicken-stop-anim {
  /* Entre par la gauche */
  0%   { transform: translate(-220vw, var(--y, 35vh)); }
  /* Atterrit au milieu */
  25%  { transform: translate(-50%, var(--y, 35vh)) rotate(-2deg); }
  30%  { transform: translate(-50%, calc(var(--y, 35vh) - 8px)) rotate(0); }
  /* Reste là, pond */
  35%  { transform: translate(-50%, var(--y, 35vh)) rotate(0) scale(1.05); }
  40%  { transform: translate(-50%, var(--y, 35vh)) rotate(0) scale(1); }
  /* "Ponte" : tremblement */
  45%  { transform: translate(-50%, var(--y, 35vh)) rotate(-3deg) scale(1.1, 0.95); }
  50%  { transform: translate(-50%, var(--y, 35vh)) rotate(3deg) scale(0.95, 1.1); }
  55%  { transform: translate(-50%, var(--y, 35vh)) rotate(0); }
  60%  { transform: translate(-50%, var(--y, 35vh)) rotate(0); }
  /* Repart par la droite */
  100% { transform: translate(180vw, var(--y, 35vh)); }
}

/* Œuf pondu qui tombe sous la poule */
.laid-egg {
  font-size: 70px;
  left: 50%;
  filter: drop-shadow(2px 3px 0 rgba(0,0,0,0.3));
  animation: laid-egg-fall 1.6s cubic-bezier(0.5, 0, 0.7, 1) forwards;
}
@keyframes laid-egg-fall {
  0% { transform: translate(-50%, 0); }
  60% { transform: translate(-50%, 50vh) rotate(180deg); }
  70% { transform: translate(-50%, 60vh) rotate(180deg) scaleY(0.4) scaleX(1.5); opacity: 0.7; }
  100% { transform: translate(-50%, 60vh) rotate(180deg) scaleY(0.2) scaleX(1.8); opacity: 0; }
}

/* Œuf qui tombe du ciel et splash au centre */
.egg-falling {
  font-size: 100px;
  top: -100px;
  filter: drop-shadow(3px 4px 0 rgba(0,0,0,0.3));
  animation: egg-falling-anim 0.85s cubic-bezier(0.5, 0, 0.8, 1) forwards;
}
@keyframes egg-falling-anim {
  0% { transform: translateY(0) rotate(0); }
  100% { transform: translateY(45vh) rotate(540deg); }
}
.egg-splashed {
  position: fixed;
  top: 38vh;
  font-size: 260px;
  animation: egg-splashed-anim 1.2s cubic-bezier(0.2, 1, 0.4, 1) forwards;
  filter: drop-shadow(0 0 20px rgba(245, 201, 69, 0.9));
}
@keyframes egg-splashed-anim {
  0% { transform: translateX(-50%) scale(0.2) rotate(0); opacity: 0; }
  15% { transform: translateX(-50%) scale(1.3) rotate(0); opacity: 1; }
  40% { transform: translateX(-50%) scale(1) rotate(0); opacity: 1; }
  100% { transform: translateX(-50%) scale(1.8) rotate(0); opacity: 0; }
}

/* Transition entre génies */
.ch-transition {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: linear-gradient(135deg, #fdf5fb 0%, var(--rose) 55%, var(--ink-soft) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  padding: 20px;
}
.ch-transition.show {
  opacity: 1;
  pointer-events: auto;
}

.ch-transition.show .trans-genies {
  animation: trans-bounce-in 0.32s cubic-bezier(0.34, 1.8, 0.64, 1) both,
             trans-genies-wiggle 0.5s ease-in-out 0.32s infinite alternate;
}
.ch-transition.show .trans-title {
  animation: trans-title-pop 0.4s cubic-bezier(0.34, 1.7, 0.64, 1) 0.05s both,
             trans-title-wiggle 0.6s ease-in-out 0.5s infinite alternate;
}
.ch-transition.show .trans-subtitle {
  animation: trans-zoom-in 0.3s ease-out 0.18s both;
}
.ch-transition.show .trans-meta {
  animation: trans-zoom-in 0.26s ease-out 0.25s both;
}
@keyframes trans-bounce-in {
  0%   { opacity: 0; transform: scale(0.1) rotate(-35deg); }
  55%  { opacity: 1; transform: scale(1.25) rotate(12deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes trans-genies-wiggle {
  from { transform: scale(1) rotate(-3deg); }
  to   { transform: scale(1.05) rotate(3deg); }
}
@keyframes trans-title-pop {
  0%   { opacity: 0; transform: scale(2.5) translateY(40px) rotate(-5deg); }
  60%  { opacity: 1; transform: scale(0.92) translateY(-8px) rotate(2deg); }
  80%  { transform: scale(1.04) translateY(2px) rotate(-1deg); }
  100% { opacity: 1; transform: scale(1) translateY(0) rotate(0); }
}
@keyframes trans-title-wiggle {
  from { transform: translateY(0) rotate(-1.5deg); }
  to   { transform: translateY(-6px) rotate(1.5deg); }
}
@keyframes trans-zoom-in {
  0%   { opacity: 0; transform: scale(2); }
  100% { opacity: 1; transform: scale(1); }
}

.trans-genies {
  font-size: 90px;
  line-height: 1;
  margin-bottom: 18px;
  text-shadow: 5px 5px 0 var(--rose-soft);
  letter-spacing: -10px;
}

.trans-title {
  font-size: 72px;
  color: var(--ink);
  font-weight: 800;
  text-transform: uppercase;
  text-shadow: 4px 4px 0 rgba(255,255,255,0.6), -1px -1px 0 var(--ink-soft);
  margin-bottom: 8px;
  text-align: center;
  letter-spacing: 0.06em;
  line-height: 1.05;
}
.trans-subtitle {
  font-size: 22px;
  color: var(--ink);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 18px;
  text-align: center;
  max-width: 90%;
}
.trans-meta {
  font-size: 13px;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-weight: bold;
  padding: 8px 22px;
  border: 2.5px solid var(--ink);
  border-radius: 5px;
  background: rgba(255,255,255,0.5);
  box-shadow: 3px 3px 0 var(--ink);
}

/* Thèmes de transition selon le mode */
.ch-transition.mode-beginner {
  background: linear-gradient(135deg, #d4edce 0%, #a8d4a0 55%, #5a9a50 100%);
}
.ch-transition.mode-beginner .trans-title,
.ch-transition.mode-beginner .trans-subtitle,
.ch-transition.mode-beginner .trans-meta,
.ch-transition.mode-beginner .trans-genies { color: #1a4a14; }
.ch-transition.mode-beginner .trans-genies { text-shadow: 5px 5px 0 rgba(255,255,255,0.4); }
.ch-transition.mode-beginner .trans-title { text-shadow: 4px 4px 0 rgba(255,255,255,0.5), -1px -1px 0 #3a7a30; }
.ch-transition.mode-beginner .trans-meta { border-color: #1a4a14; box-shadow: 3px 3px 0 #1a4a14; background: rgba(255,255,255,0.45); }

.ch-transition.mode-hardcore {
  background: linear-gradient(135deg, #e86060 0%, #c02020 55%, #a81414 100%);
}
.ch-transition.mode-hardcore .trans-title,
.ch-transition.mode-hardcore .trans-subtitle,
.ch-transition.mode-hardcore .trans-meta,
.ch-transition.mode-hardcore .trans-genies { color: #fff5f5; }
.ch-transition.mode-hardcore .trans-genies { text-shadow: 5px 5px 0 rgba(0,0,0,0.3); }
.ch-transition.mode-hardcore .trans-title { text-shadow: 4px 4px 0 rgba(0,0,0,0.35), -1px -1px 0 #ff9090; }
.ch-transition.mode-hardcore .trans-meta { border-color: #fff5f5; box-shadow: 3px 3px 0 rgba(0,0,0,0.3); background: rgba(255,255,255,0.15); }

.ch-transition.mode-infinity {
  background: linear-gradient(135deg, #3a3a3a 0%, #222222 55%, #111111 100%);
}
.ch-transition.mode-infinity .trans-title,
.ch-transition.mode-infinity .trans-subtitle,
.ch-transition.mode-infinity .trans-meta,
.ch-transition.mode-infinity .trans-genies { color: #f0f0f0; }
.ch-transition.mode-infinity .trans-genies { text-shadow: 5px 5px 0 rgba(255,255,255,0.1); }
.ch-transition.mode-infinity .trans-title { text-shadow: 4px 4px 0 rgba(0,0,0,0.5), -1px -1px 0 #888; }
.ch-transition.mode-infinity .trans-meta { border-color: #f0f0f0; box-shadow: 3px 3px 0 rgba(0,0,0,0.4); background: rgba(255,255,255,0.08); }

@media (max-width: 720px) {
  .trans-title { font-size: 44px; }
  .trans-genies { font-size: 56px; }
  .trans-subtitle { font-size: 16px; }
}


@media (max-height: 700px) {
  .ct-line1 { font-size: 16px; }
  .ct-line2 { font-size: 9px; }
  .ch-block.timer .timer-val { font-size: 24px; }
  .ch-lbl { font-size: 9px; }
  .stage-chasse { padding-top: 8px; padding-bottom: 8px; gap: 6px; }
}

/* ============================================================
   Nouveaux effets Infinity batch 2 (niveau 13+)
   ============================================================ */

/* 🌪️ Tornado */
.infinity-tornado {
  position: fixed;
  font-size: 180px;
  pointer-events: none;
  z-index: 9997;
  line-height: 1;
  filter: drop-shadow(0 0 16px rgba(140,210,255,0.8));
}

/* 🐣 Chick runner */
.chick-runner {
  position: fixed;
  pointer-events: none;
  z-index: 9997;
  line-height: 1;
}

/* 🌈 Rainbow sweep */
.rainbow-sweep {
  position: fixed;
  inset: 0;
  z-index: 9996;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(255,0,0,0.18)   0%,
    rgba(255,165,0,0.16) 16%,
    rgba(255,240,0,0.16) 32%,
    rgba(0,200,80,0.14)  48%,
    rgba(0,130,255,0.14) 64%,
    rgba(130,0,220,0.14) 80%,
    rgba(210,0,150,0.16) 100%
  );
  animation: rainbow-anim 2.5s ease-out forwards;
}
@keyframes rainbow-anim {
  0%   { opacity: 0; transform: translateX(-100%); }
  22%  { opacity: 1; transform: translateX(-40%); }
  72%  { opacity: 1; transform: translateX(20%); }
  100% { opacity: 0; transform: translateX(60%); }
}

/* 🔮 Crystal bubble */
.crystal-bubble {
  position: fixed;
  pointer-events: none;
  z-index: 9996;
  line-height: 1;
  filter: drop-shadow(0 0 18px rgba(100,180,255,0.95))
          drop-shadow(0 0 40px rgba(120,80,255,0.5));
}

/* 🌸 Petal fall */
.petal-fall {
  position: fixed;
  top: -60px;
  pointer-events: none;
  z-index: 9997;
  line-height: 1;
  animation-name: petal-fall-anim;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  filter: drop-shadow(2px 3px 0 rgba(0,0,0,0.18));
}
@keyframes petal-fall-anim {
  0%   { transform: translateY(0)    translateX(0)                      rotate(0deg);   opacity: 1; }
  40%  { opacity: 1; }
  100% { transform: translateY(115vh) translateX(var(--petal-drift,0px)) rotate(520deg); opacity: 0.4; }
}

/* ============================================================
   Nouveaux effets Infinity (niveau 13+)
   ============================================================ */

/* 1) Flash de couleur plein écran */
.color-flash {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  animation: color-flash-anim 2.5s ease-out forwards;
}
@keyframes color-flash-anim {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  100% { opacity: 0; }
}

/* 3) Faux flans fantômes */
.ghost-flan {
  position: fixed;
  pointer-events: none;
  z-index: 9997;
  line-height: 1;
  animation: ghost-flan-anim 1.35s ease-in-out forwards;
}
@keyframes ghost-flan-anim {
  0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.25); }
  20%  { opacity: 0.72; transform: translate(-50%, -50%) scale(1.12); }
  55%  { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0;    transform: translate(-50%, calc(-50% - 48px)) scale(0.75); }
}

/* 🍮 Flan rain */
.flan-raindrop {
  position: fixed;
  top: -90px;
  pointer-events: none;
  z-index: 9998;
  line-height: 1;
  animation-name: flan-rain-anim;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  filter: drop-shadow(2px 4px 0 rgba(0,0,0,0.25)) opacity(0.7);
}
@keyframes flan-rain-anim {
  0%   { transform: translateY(0)      translateX(0)                       rotate(-5deg);  opacity: 0.75; }
  100% { transform: translateY(120vh)  translateX(var(--flan-drift, 0px))  rotate(25deg);  opacity: 0.25; }
}

/* 🌑 Vignette overlay */
.vignette-overlay {
  position: fixed;
  inset: 0;
  z-index: 9996;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, transparent 20%, rgba(8, 0, 18, 0.88) 100%);
  animation: vignette-anim 3.2s ease-in-out forwards;
}
@keyframes vignette-anim {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ===== FX Test Panel ===== */
#fx-panel {
  position: fixed;
  top: 10px;
  right: 10px;
  width: 220px;
  background: rgba(12, 12, 22, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 11px;
  padding: 9px;
  z-index: 99999;
  font-family: system-ui, sans-serif;
  font-size: 12px;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.fxp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}
.fxp-title {
  font-weight: 700;
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.fxp-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0 2px;
}
.fxp-close:hover { color: #fff; }
.fxp-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.fxp-btn {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 6px;
  color: #ddd;
  cursor: pointer;
  font-size: 11px;
  padding: 3px 7px;
  transition: background 0.12s;
  white-space: nowrap;
}
.fxp-btn:hover  { background: rgba(255, 255, 255, 0.20); color: #fff; }
.fxp-btn:active { transform: scale(0.94); }

/* ============================================================
   Leaderboard — Widget de score & classement
   ============================================================ */

/* ── Widget inline (écrans victoire / défaite) ─────────────── */

.flan-lb-widget {
  margin-top: 8px;
  padding: 0;
  background: none;
  border: none;
}
.flan-lb-status {
  text-align: center;
  font-size: 12px;
  color: var(--ink-soft);
  padding: 6px 0;
}
.flan-lb-error { color: #a00; }

/* One-liner compact : # 6 / 444 (Voir le classement) */
.flan-lb-oneliner {
  text-align: left;
  font-size: 11px;
  color: var(--ink-soft);
  font-weight: 500;
}
.flan-lb-modal-link {
  background: none;
  border: none;
  color: var(--rose-dark);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}
.flan-lb-modal-link:hover { text-decoration: underline; }

/* ── Styles pour la modale (pas de mini-classement inline) ─── */

/* ── Modal classement complet ──────────────────────────────────── */

#flan-lb-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flan-lb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(79, 0, 63, 0.45);
  backdrop-filter: blur(3px);
}
.flan-lb-box {
  position: relative;
  width: min(480px, 94vw);
  max-height: 80vh;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: 6px 6px 0 var(--ink);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.flan-lb-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--ink);
  line-height: 1;
  padding: 4px 6px;
  border-radius: 4px;
  transition: background 0.15s;
}
.flan-lb-close:hover { background: var(--paper-2); }
.flan-lb-title {
  margin: 16px 40px 10px 20px;
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.flan-lb-tabs {
  display: flex;
  gap: 4px;
  padding: 0 16px 10px;
  flex-shrink: 0;
}
.flan-lb-tab {
  flex: 1;
  padding: 6px 10px;
  border: 2px solid var(--paper-3);
  border-radius: 6px;
  background: var(--paper-2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.flan-lb-tab.active {
  background: var(--rose);
  color: var(--paper);
  border-color: var(--rose-dark);
}
.flan-lb-table-wrap {
  overflow-y: auto;
  flex: 1;
  padding: 0 16px 16px;
}
.flan-lb-loading {
  text-align: center;
  padding: 20px;
  font-size: 13px;
  color: var(--ink-soft);
}
.flan-lb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.flan-lb-table thead th {
  padding: 6px 8px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--paper-3);
}
.flan-lb-table thead th:last-child {
  text-align: right;
}
.flan-lb-table tbody tr {
  border-bottom: 1px solid var(--paper-2);
  transition: background 0.1s;
}
.flan-lb-table tbody tr:hover { background: var(--paper-2); }
.flan-lb-table tbody tr.flan-lb-me {
  background: var(--rose-soft);
  font-weight: 700;
}
.flan-lb-table tbody tr.flan-lb-sep {
  text-align: center;
  color: var(--ink-soft);
  font-size: 18px;
  font-weight: 400;
  border-bottom: none;
}
/* Opacité décroissante pour les rangs 6-10 */
.flan-lb-table tbody tr.flan-lb-fade-1 { opacity: 0.90; }
.flan-lb-table tbody tr.flan-lb-fade-2 { opacity: 0.80; }
.flan-lb-table tbody tr.flan-lb-fade-3 { opacity: 0.70; }
.flan-lb-table tbody tr.flan-lb-fade-4 { opacity: 0.60; }
.flan-lb-table tbody tr.flan-lb-fade-5 { opacity: 0.50; }
.flan-lb-table td { padding: 8px; vertical-align: middle; }
.flan-lb-rank  { width: 36px; font-size: 16px; text-align: center; }
.flan-lb-name  { font-weight: 600; }
.flan-lb-score { text-align: right; font-weight: 700; color: var(--rose-dark); font-variant-numeric: tabular-nums; }
.flan-lb-empty { text-align: center; padding: 24px; color: var(--ink-soft); font-style: italic; }

/* Champ éditable inline dans la modale */
.flan-lb-name-edit {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.flan-lb-name-input {
  padding: 3px 6px;
  border: 1px solid var(--paper-3);
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  outline: none;
  transition: border-color 0.15s;
  max-width: 140px;
}
.flan-lb-name-input:focus { border-color: var(--rose); }
.flan-lb-name-confirm {
  padding: 2px 6px;
  background: var(--rose);
  color: var(--paper);
  border: none;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.3;
  transition: background 0.15s;
}
.flan-lb-name-confirm:hover { background: var(--rose-dark); }
.flan-lb-name-confirm:disabled { opacity: 0.5; cursor: not-allowed; }
.flan-lb-name-status {
  font-size: 11px;
  color: var(--ink-soft);
}

@media (max-width: 480px) {
  .flan-lb-oneliner     { font-size: 10px; }
  .flan-lb-title        { font-size: 16px; margin: 12px 36px 8px 14px; }
  .flan-lb-tabs         { padding: 0 10px 8px; gap: 3px; }
  .flan-lb-tab          { font-size: 10px; padding: 5px 6px; }
  .flan-lb-table        { font-size: 12px; }
  .flan-lb-table td     { padding: 6px; }
  .flan-lb-rank         { font-size: 13px; }
  .flan-lb-name-input   { font-size: 12px; max-width: 100px; }
}


/* ============================================================
   Accessibilité — focus visible, screen-reader only, reduced-motion
   ============================================================ */

/* Texte uniquement pour lecteurs d'écran (h1 SEO, annonces) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Focus clavier visible et cohérent */
.chasse-body button:focus-visible,
.chasse-body a:focus-visible,
.chasse-body .ch-cell:focus-visible,
.mode-card:focus-visible,
.flan-lb-tab:focus-visible,
.flan-lb-modal-link:focus-visible {
  outline: 3px solid var(--rose-dark);
  outline-offset: 2px;
  z-index: 10;
}

/* Respect de prefers-reduced-motion : on coupe shakes, pulses, mutations,
   confetti, et toutes les animations infinies. Le jeu reste 100% jouable. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.05s !important;
    scroll-behavior: auto !important;
  }
  .chasse-grid-wrap { animation: none !important; transform: none !important; }
  .ch-cell { animation: none !important; translate: 0 0 !important; }
  .ch-block.urgent { animation: none !important; }
  .ch-block.urgent .timer-val { animation: none !important; }
  .confetti, .splat-flan, .splat-wave, .wildlife { display: none !important; }
  body.screen-shake { animation: none !important; }
}