/* =====================================================================
   Croaaa ! — styles propres au jeu (préfixe cr-)
   La barre, le plein écran et les infobulles sont dans css/games.css.
   ===================================================================== */

.cr-jeu {
  --mg-jeu-largeur: 1204px; /* barre de 1180 px + marges de 12 px : ne pas changer */
  --mgb-fond:
    radial-gradient(
      120% 180% at 0% 0%,
      rgba(155, 225, 93, 0.25),
      transparent 55%
    ),
    linear-gradient(120deg, #0d2b2a, #17524a);
  --mgb-accent: #b8f06a;
  --mgb-titre: linear-gradient(100deg, #e9ffcf, #b8f06a 50%, #ffd166);
  --mgb-police-titre: "Fredoka", "Madimi One", sans-serif;
  --mgb-texte: #e8f6ea;
  --mgb-doux: #9cc7b0;
  --mgb-btn-texte-survol: #b8f06a;
  --mgb-ombre: 0 4px 18px rgba(6, 40, 34, 0.35);
  --mgc-fond: #f3fbef;
  --mgc-bord: rgba(23, 82, 74, 0.16);
  --mgc-texte: #1d4a43;
  --mg-fs-fond: #071a22;
  --mg-bulle-fond: #0d2b2a;

  /* Couleurs des grenouilles : jaune, bleu, vert, rouge, violet, orange */
  --cr-g0: #ffd23f;
  --cr-g1: #3fa7ff;
  --cr-g2: #5fd068;
  --cr-g3: #ff5a5f;
  --cr-g4: #b07cff;
  --cr-g5: #ff9a3c;
  --cr-police: "Fredoka", system-ui, sans-serif;
}

.cr-jeu [hidden] {
  display: none !important;
}

/* ---------- Commandes ---------- */
.cr-commandes {
  font-family: var(--cr-police);
  box-sizing: border-box;
  min-height: 56px;
}
.cr-jeu .mg-btn {
  font-family: var(--cr-police);
}
.cr-btn-bis {
  background: #17524a;
}
.cr-btn-bis small {
  font-weight: 400;
  opacity: 0.8;
}
.cr-btn-deviner {
  background: linear-gradient(100deg, #f29e1f, #ffbf3c);
  color: #3a2200;
}
.cr-astuce {
  font-size: 0.9em;
  color: #4f7a70;
}
.cr-astuce b {
  color: #17524a;
}
.cr-astuce .cr-pastille {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  vertical-align: -0.05em;
  margin-right: 4px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.12);
}

/* Infos de la barre : largeurs fixes, la barre ne bouge pas */
.cr-stat-prog {
  --mg-stat-largeur: 6.6em;
}
.cr-stat-notes {
  --mg-stat-largeur: 4.6em;
}
.cr-stat-trois {
  --mg-stat-largeur: 4.6em;
}
.cr-stat-score {
  --mg-stat-largeur: 4em;
}
.cr-vies {
  letter-spacing: 1px;
  color: #ff7b8a;
}
.cr-vies i {
  font-style: normal;
  opacity: 0.25;
}
.cr-tour {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cr-tour::before {
  content: "";
  width: 0.75em;
  height: 0.75em;
  border-radius: 50%;
  background: var(--cr-tour, #fff);
  box-shadow: 0 0 8px var(--cr-tour, #fff);
}

/* ---------- Zone de jeu : l'étang la nuit ---------- */
.cr-zone {
  position: relative;
  box-sizing: border-box;
  align-self: center;
  width: min(var(--mg-barre-largeur, 1180px), calc(100vw - 24px));
  border-radius: 16px;
  overflow: hidden;
  background: #0b2a35;
  font-family: var(--cr-police);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.cr-jeu.mg-fs .cr-zone {
  align-self: stretch;
  width: auto;
  flex: 1;
  min-height: 0;
}

.cr-ciel {
  position: absolute;
  inset: 0 0 auto 0;
  height: 58%;
  background:
    radial-gradient(
      60% 90% at 78% 8%,
      rgba(255, 244, 200, 0.16),
      transparent 60%
    ),
    linear-gradient(180deg, #0a1631 0%, #163a5c 60%, #2a6075 100%);
}
.cr-etoiles i {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  animation: cr-scintille 3s ease-in-out infinite;
}
@keyframes cr-scintille {
  50% {
    opacity: 0.2;
  }
}
.cr-lune {
  position: absolute;
  top: 9%;
  right: 13%;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fffbe8, #f3e4a8 70%);
  box-shadow: 0 0 40px 12px rgba(255, 240, 180, 0.25);
}
.cr-lune::after {
  /* cratères */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 62% 58%,
      rgba(200, 180, 110, 0.35) 0 9%,
      transparent 10%
    ),
    radial-gradient(
      circle at 40% 70%,
      rgba(200, 180, 110, 0.3) 0 6%,
      transparent 7%
    ),
    radial-gradient(
      circle at 70% 30%,
      rgba(200, 180, 110, 0.3) 0 5%,
      transparent 6%
    );
}
.cr-eau {
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0 18px,
      rgba(140, 220, 230, 0.05) 18px 20px
    ),
    radial-gradient(
      40% 30% at 82% 0%,
      rgba(255, 240, 180, 0.22),
      transparent 70%
    ),
    linear-gradient(180deg, #1d5866 0%, #0f3a48 40%, #082531 100%);
  box-shadow: inset 0 3px 0 rgba(160, 230, 230, 0.18);
}

.cr-roseaux {
  position: absolute;
  bottom: 0;
  height: 62%;
  width: 16%;
  max-width: 170px;
  pointer-events: none;
}
.cr-roseaux path {
  fill: none;
  stroke: #0e3a2c;
  stroke-width: 5;
  stroke-linecap: round;
}
.cr-roseaux .cr-massette {
  fill: #4a2f1c;
}
.cr-roseaux-g {
  left: 0;
  transform-origin: bottom left;
  animation: cr-vent 7s ease-in-out infinite;
}
.cr-roseaux-d {
  right: 0;
  transform-origin: bottom right;
  animation: cr-vent 8s ease-in-out infinite reverse;
}
@keyframes cr-vent {
  50% {
    transform: skewX(-3deg);
  }
}

.cr-lucioles i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f6ff9a;
  box-shadow: 0 0 10px 4px rgba(230, 255, 120, 0.55);
  animation: cr-luciole 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cr-luciole {
  0%,
  100% {
    transform: translate(0, 0);
    opacity: 0.1;
  }
  25% {
    opacity: 1;
  }
  50% {
    transform: translate(40px, -30px);
    opacity: 0.35;
  }
  75% {
    transform: translate(-20px, -60px);
    opacity: 0.9;
  }
}
.cr-zone.cr-fete .cr-lucioles i {
  animation-duration: 2.4s;
}

/* ---------- Grenouilles ---------- */
.cr-grenouille {
  position: absolute;
  width: var(--t, 140px);
  height: calc(var(--t, 140px) * 0.95);
  transform: translate(-50%, 0);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  --c: var(--cr-g0);
  outline: none;
}
.cr-grenouille svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}
.cr-grenouille .cr-g-corps {
  transform-origin: 60px 92px;
  transition: transform 0.12s;
}
.cr-corps {
  fill: var(--c);
}
.cr-ventre {
  fill: #fff;
  opacity: 0.45;
}
.cr-patte {
  fill: var(--c);
  filter: brightness(0.82);
}
.cr-oeil-fond {
  fill: var(--c);
}
.cr-oeil {
  fill: #fff;
}
.cr-pupille {
  fill: #1b1b26;
  transition: transform 0.25s;
  transform: translate(var(--regard, 0px), 0);
}
.cr-joue {
  fill: #ff8fa3;
  opacity: 0.5;
}
.cr-bouche {
  fill: none;
  stroke: #1b1b26;
  stroke-width: 2.6;
  stroke-linecap: round;
}
.cr-bouche-ouverte {
  fill: #6b1f2e;
  stroke: #1b1b26;
  stroke-width: 2.2;
  display: none;
}
.cr-gorge {
  fill: #fff6d8;
  stroke: rgba(0, 0, 0, 0.12);
  transform-origin: 60px 75px;
  transform: scale(0);
  transition: transform 0.12s;
}
.cr-nenuphar {
  fill: #2f7d45;
}
.cr-nenuphar-bord {
  fill: none;
  stroke: #1f5a31;
  stroke-width: 2;
}
.cr-nenuphar-nervure {
  stroke: #49a061;
  stroke-width: 1.4;
  fill: none;
}
.cr-halo {
  fill: var(--c);
  opacity: 0;
  transition: opacity 0.15s;
}
.cr-touche {
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%);
  min-width: 1.5em;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(4, 22, 28, 0.55);
  color: #d8f4ea;
  font-size: max(11px, calc(var(--t) * 0.09));
  font-weight: 600;
  text-align: center;
  pointer-events: none;
}

/* Au repos : respiration douce */
.cr-grenouille .cr-g-corps {
  animation: cr-respire 3.2s ease-in-out infinite;
  animation-delay: var(--delai, 0s);
}
@keyframes cr-respire {
  50% {
    transform: scale(1.02, 0.985);
  }
}

.cr-zone.cr-a-vous .cr-grenouille:hover .cr-g-corps {
  transform: translateY(-3px);
}
.cr-grenouille:focus-visible .cr-halo {
  opacity: 0.35;
}

/* Chant : gorge gonflée, bouche ouverte, saut */
.cr-grenouille.cr-chante .cr-g-corps {
  animation: cr-saut 0.32s ease-out;
}
.cr-grenouille.cr-chante .cr-gorge {
  transform: scale(1);
}
.cr-grenouille.cr-chante .cr-bouche {
  display: none;
}
.cr-grenouille.cr-chante .cr-bouche-ouverte {
  display: inline;
}
.cr-grenouille.cr-chante .cr-halo {
  opacity: 0.55;
}
.cr-grenouille.cr-chante .cr-corps,
.cr-grenouille.cr-chante .cr-oeil-fond {
  filter: brightness(1.15) saturate(1.2);
}
@keyframes cr-saut {
  0% {
    transform: scale(1, 1);
  }
  30% {
    transform: scale(0.92, 1.1) translateY(-8px);
  }
  70% {
    transform: scale(1.06, 0.95);
  }
  100% {
    transform: scale(1, 1);
  }
}

/* Couac : la grenouille fautive tremble et pâlit */
.cr-grenouille.cr-couac .cr-g-corps {
  animation: cr-tremble 0.5s linear;
}
.cr-grenouille.cr-couac .cr-corps,
.cr-grenouille.cr-couac .cr-oeil-fond,
.cr-grenouille.cr-couac .cr-patte {
  filter: grayscale(0.7) brightness(0.8);
}
@keyframes cr-tremble {
  0%,
  100% {
    transform: translateX(0);
  }
  20%,
  60% {
    transform: translateX(-5px) rotate(-3deg);
  }
  40%,
  80% {
    transform: translateX(5px) rotate(3deg);
  }
}

/* Ronds dans l'eau */
.cr-onde {
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 70%;
  height: 22%;
  border: 3px solid var(--c);
  border-radius: 50%;
  transform: translate(-50%, 0) scale(0.6);
  opacity: 0.8;
  pointer-events: none;
  animation: cr-onde 0.9s ease-out forwards;
}
@keyframes cr-onde {
  to {
    transform: translate(-50%, 0) scale(1.7);
    opacity: 0;
  }
}

/* Notes qui s'envolent */
.cr-envol {
  position: absolute;
  left: 50%;
  top: 4%;
  color: var(--c);
  font-size: calc(var(--t) * 0.22);
  font-weight: 700;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  animation: cr-envol 1.1s ease-out forwards;
}
@keyframes cr-envol {
  0% {
    transform: translate(-50%, 0) scale(0.6);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--dx, 20px)), -90px)
      rotate(var(--rot, 12deg)) scale(1.1);
    opacity: 0;
  }
}
.cr-envol-couac {
  color: #fff;
  -webkit-text-stroke: 1px #c4473f;
  text-shadow: 0 0 10px rgba(255, 90, 95, 0.9), 0 2px 0 #c4473f;
  white-space: nowrap;
  font-size: calc(var(--t) * 0.2);
  letter-spacing: 1px;
  animation-duration: 1.4s;
}

/* ---------- La cheffe de chœur ---------- */
.cr-cheffe {
  position: absolute;
  left: 50%;
  top: 10px;
  width: var(--tc, 150px);
  height: var(--tc, 150px);
  transform: translateX(-50%);
  pointer-events: none;
}
.cr-cheffe svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.cr-cheffe .cr-corps,
.cr-cheffe .cr-oeil-fond {
  fill: #3c9a5a;
}
.cr-cheffe .cr-patte {
  fill: #2f7d48;
  filter: none;
}
.cr-noeud {
  fill: #d7263d;
}
.cr-baguette-g {
  transform-origin: 98px 78px;
  transition: transform 0.12s;
}
.cr-baguette {
  stroke: #fff4cc;
  stroke-width: 3;
  stroke-linecap: round;
}
.cr-cheffe.cr-dirige .cr-baguette-g {
  animation: cr-battue 0.6s ease-in-out infinite;
}
.cr-cheffe.cr-battement .cr-baguette-g {
  transform: rotate(-26deg);
}
@keyframes cr-battue {
  50% {
    transform: rotate(-22deg);
  }
}
.cr-cheffe.cr-ravie .cr-g-corps {
  animation: cr-saut 0.5s ease-out 2;
}
.cr-cheffe.cr-fachee .cr-corps {
  fill: #6f8f5a;
}
.cr-cheffe .cr-pierre {
  fill: #47545e;
}
.cr-cheffe .cr-pierre-ombre {
  fill: #33404a;
}

.cr-bulle {
  position: absolute;
  left: calc(100% + 6px);
  top: 4%;
  max-width: 300px;
  width: max-content;
  padding: 9px 15px;
  border-radius: 18px 18px 18px 4px;
  background: #fffdf3;
  color: #18403a;
  font-size: clamp(14px, calc(var(--tc) * 0.12), 20px);
  font-weight: 600;
  line-height: 1.25;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  transform-origin: 0 100%;
  animation: cr-bulle 0.25s ease-out;
}
.cr-bulle small {
  display: block;
  font-weight: 400;
  font-size: 0.8em;
  color: #4f7a70;
}
.cr-bulle.cr-bulle-vide {
  visibility: hidden;
}
@keyframes cr-bulle {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
}

/* ---------- Partition ---------- */
.cr-partition {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  overflow: visible;
  pointer-events: none;
}
.cr-portee-fond {
  fill: rgba(255, 252, 238, 0.93);
}
.cr-portee-ligne {
  stroke: #9fb8b0;
  stroke-width: 1;
}
.cr-mesure {
  stroke: #9fb8b0;
  stroke-width: 1.2;
}
.cr-note-tete {
  stroke: rgba(0, 0, 0, 0.35);
  stroke-width: 1;
}
.cr-note-queue {
  stroke: #33504a;
  stroke-width: 1.4;
}
.cr-note-ledger {
  stroke: #9fb8b0;
  stroke-width: 1.2;
}
.cr-note-mystere {
  fill: none;
  stroke: #8aa59d;
  stroke-width: 1.5;
  stroke-dasharray: 3 2;
}
.cr-note-mystere-txt {
  fill: #8aa59d;
  font-size: 9px;
  font-weight: 700;
  text-anchor: middle;
}
.cr-note-future {
  fill: #c7d6d1;
}
.cr-note-neuve {
  animation: cr-pop 0.4s ease-out;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes cr-pop {
  0% {
    transform: scale(0.2);
  }
  70% {
    transform: scale(1.4);
  }
}
.cr-note-joue {
  filter: drop-shadow(0 0 4px rgba(255, 220, 90, 0.9));
}
.cr-partition-titre {
  fill: #33504a;
  font-size: 12px;
  font-weight: 600;
}

/* ---------- Panneaux (programme, reprise, fin) ---------- */
.cr-voile {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: rgba(4, 18, 24, 0.55);
  backdrop-filter: blur(3px);
  animation: cr-fondu 0.25s ease-out;
}
@keyframes cr-fondu {
  from {
    opacity: 0;
  }
}
.cr-panneau {
  position: relative;
  box-sizing: border-box;
  width: min(780px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 18px 24px 20px;
  border-radius: 20px;
  background: radial-gradient(120% 80% at 50% 0%, #fffef6, #f4ecd2);
  color: #24413b;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.45),
    inset 0 0 0 6px #fff,
    inset 0 0 0 8px #d9c58f;
  text-align: center;
  animation: cr-monte 0.3s ease-out;
}
.cr-panneau-petit {
  width: min(480px, 100%);
}
@keyframes cr-monte {
  from {
    transform: translateY(18px) scale(0.97);
    opacity: 0;
  }
}
.cr-panneau h2 {
  margin: 2px 0 2px;
  font-family: var(--cr-police);
  font-size: 1.9em;
  font-weight: 700;
  color: #17524a;
  letter-spacing: 0.5px;
}
.cr-panneau .cr-sous-titre {
  margin: 0 0 12px;
  color: #7a6a3c;
  font-size: 0.95em;
  font-style: italic;
}
.cr-panneau p {
  margin: 6px 0;
}

.cr-onglets {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: #e9dfbf;
}
.cr-onglet {
  margin: 0;
  padding: 6px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #5e5130;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.cr-onglet[aria-selected="true"] {
  background: #17524a;
  color: #fff;
}
.cr-onglet:focus-visible {
  outline: 2px solid #f29e1f;
  outline-offset: 2px;
}

.cr-airs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.cr-air {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin: 0;
  padding: 10px 8px 9px;
  border: 2px solid #dccf9f;
  border-radius: 14px;
  background: #fffdf4;
  color: #24413b;
  font: inherit;
  cursor: pointer;
  transition:
    transform 0.12s,
    border-color 0.12s,
    box-shadow 0.12s;
}
.cr-air:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: #17524a;
  box-shadow: 0 6px 14px rgba(23, 82, 74, 0.18);
}
.cr-air:focus-visible {
  outline: 3px solid #f29e1f;
  outline-offset: 2px;
}
.cr-air:disabled {
  cursor: default;
  opacity: 0.55;
  background: #f1ead2;
}
.cr-air-num {
  font-size: 0.78em;
  font-weight: 600;
  color: #9a8650;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.cr-air-titre {
  font-weight: 700;
  font-size: 1.02em;
  line-height: 1.15;
  min-height: 2.3em;
  display: flex;
  align-items: center;
}
.cr-air-titre.cr-secret {
  color: #a49a7c;
  letter-spacing: 2px;
}
.cr-air-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82em;
  color: #6a7d76;
}
.cr-pastilles {
  display: inline-flex;
  gap: 2px;
}
.cr-pastilles i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.cr-etoiles-air {
  font-size: 1.05em;
  letter-spacing: 2px;
  color: #f2a71b;
}
.cr-etoiles-air i {
  font-style: normal;
  color: #d9cfb0;
}
.cr-air-cadenas {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 16px;
  height: 16px;
  fill: #a49a7c;
}
.cr-air-encours {
  position: absolute;
  top: 6px;
  left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #17524a;
  color: #fff;
  font-size: 0.68em;
  font-weight: 600;
}
.cr-total b {
  color: #17524a;
}
.cr-total {
  margin-top: 10px;
  font-size: 0.92em;
  color: #6a5c32;
}

.cr-choix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 6px 0 4px;
}
.cr-choix-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 16px 10px 14px;
  border: 2px solid #dccf9f;
  border-radius: 16px;
  background: #fffdf4;
  color: #24413b;
  font: inherit;
  cursor: pointer;
  transition:
    transform 0.12s,
    border-color 0.12s;
}
.cr-choix-btn:hover {
  transform: translateY(-2px);
  border-color: #17524a;
}
.cr-choix-btn:focus-visible {
  outline: 3px solid #f29e1f;
  outline-offset: 2px;
}
.cr-choix-btn b {
  font-size: 1.15em;
}
.cr-choix-btn .cr-pastilles i {
  width: 14px;
  height: 14px;
}
.cr-choix-btn small {
  color: #6a7d76;
}
.cr-texte-mode {
  max-width: 560px;
  margin: 0 auto 10px !important;
  color: #4b5f59;
}

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

/* Fin d'un air */
.cr-fin-etoiles {
  margin: 4px 0;
  font-size: 2.6em;
  letter-spacing: 6px;
  color: #f2a71b;
  text-shadow: 0 3px 0 #c97d0b;
}
.cr-fin-etoiles i {
  display: inline-block;
  font-style: normal;
  animation: cr-etoile 0.5s ease-out backwards;
}
.cr-fin-etoiles i:nth-child(2) {
  animation-delay: 0.25s;
}
.cr-fin-etoiles i:nth-child(3) {
  animation-delay: 0.5s;
}
.cr-fin-etoiles i.cr-vide {
  color: #dcd1ae;
  text-shadow: none;
}
@keyframes cr-etoile {
  from {
    transform: scale(0) rotate(-90deg);
  }
}
.cr-fin-titre {
  font-size: 1.35em;
  font-weight: 700;
  color: #b4560f;
}
.cr-detail {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 3px 18px;
  margin: 8px auto 0;
  text-align: left;
  font-size: 0.95em;
}
.cr-detail b {
  text-align: right;
  color: #17524a;
}
.cr-record {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 12px;
  border-radius: 999px;
  background: #ffe28a;
  color: #6b4500;
  font-weight: 700;
  animation: cr-pop 0.5s ease-out;
}
.cr-gros {
  font-size: 3em;
  font-weight: 700;
  line-height: 1;
  color: #17524a;
}

/* Boutons des fenêtres, aux couleurs de l'étang */
.cr-jeu .btn-vert {
  background: #2f9a55;
  border-color: #2f9a55;
  color: #fff;
  box-shadow: 0 3px 0 #1d6b39;
}
.cr-jeu .btn-vert:hover {
  background: #37ad61;
  border-color: #37ad61;
}
.cr-jeu .btn-bleu {
  background: #17524a;
  border-color: #17524a;
  color: #fff;
  box-shadow: 0 3px 0 #0c3530;
}
.cr-jeu .btn-bleu:hover {
  background: #1f6a60;
  border-color: #1f6a60;
}
.cr-jeu .btn-rouge {
  background: transparent;
  border-color: #c4473f;
  color: #c4473f;
  box-shadow: none;
}
.cr-jeu .btn-rouge:hover {
  background: rgba(196, 71, 63, 0.1);
  border-color: #c4473f;
}
.cr-jeu .btn-vert:focus-visible,
.cr-jeu .btn-bleu:focus-visible,
.cr-jeu .btn-rouge:focus-visible {
  outline-color: #f29e1f;
}

/* ---------- Écrans étroits ---------- */
@media (max-width: 700px) {
  .cr-airs,
  .cr-choix {
    grid-template-columns: repeat(2, 1fr);
  }
  .cr-astuce {
    display: none;
  }
  .cr-bulle {
    left: 50%;
    top: 100%;
    transform-origin: 50% 0;
    max-width: 70vw;
    translate: -50% 0;
    border-radius: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cr-grenouille .cr-g-corps,
  .cr-roseaux-g,
  .cr-roseaux-d,
  .cr-lucioles i,
  .cr-etoiles i {
    animation: none !important;
  }
}