#petdoku-root {
  --bg: #fdf8f1;
  --panel: #ffffff;
  --panel-2: #f6efe4;
  --border: #eadfce;
  --text: #3b2f25;
  --muted: #8a7a69;
  --accent: #f59e0b;
  --accent-2: #fb7185;
  --green: #16a34a;
  --red: #dc2626;
  --grid-line: #6b5847;
  --shadow: 0 8px 24px rgba(92, 64, 36, 0.12);
}

@media (prefers-color-scheme: dark) {
  #petdoku-root {
    --bg: #1b1a24;
    --panel: #252433;
    --panel-2: #2e2d3f;
    --border: #3a3950;
    --text: #efeaf6;
    --muted: #a59fb8;
    --grid-line: #15141d;
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}

#petdoku-root * {
  box-sizing: border-box;
}

/* Barre commune (css/games.css) au-dessus du cadre du jeu, aux couleurs du jeu */
.petdoku-jeu {
  --mg-jeu-largeur: 1174px;
  /* barre claire aux tons pastel des régions de la grille */
  --mgb-fond: linear-gradient(100deg, #fde3c4, #fdd0d6 40%, #e2dcfd 75%, #c9e9fb);
  --mgb-texte: #3b2f25;
  --mgb-doux: #8a7a69;
  --mgb-valeur: #3b2f25;
  --mgb-accent: #d97706;
  --mgb-titre: linear-gradient(100deg, #d97706, #e11d48);
  --mgb-filet: rgba(59, 47, 37, 0.16);
  --mgb-btn: rgba(255, 255, 255, 0.6);
  --mgb-btn-survol: #fff;
  --mgb-ombre: 0 4px 16px rgba(107, 88, 71, 0.18);
  --mg-fs-fond: #fdf8f1;
  --mg-bulle-fond: #3b2f25;
}

#petdoku-root {
  /* le jeu est affiché dans un cadre, sous la barre commune et de même largeur */
  width: min(var(--mg-barre-largeur, 1180px), calc(100vw - 24px));
  align-self: center;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  text-align: left;
  background: var(--bg);
  color: var(--text);
  font-family:
    "Nunito",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
}

#petdoku-root button {
  font: inherit;
}

/* Titres : on ne reprend pas la police et les couleurs des titres du site */
#petdoku-root h2,
#petdoku-root h3 {
  font-family: inherit;
  color: inherit;
}

/* ---------- Plein écran : grille agrandie selon la hauteur disponible ---------- */
.petdoku-jeu.mg-fs {
  --pd-grille: min(100vh - 205px, 100vw - 440px);
}
.petdoku-jeu.mg-fs #petdoku-root {
  width: 100%;
}
.petdoku-jeu.mg-fs #petdoku-root .layout {
  max-width: none;
  justify-content: center;
  grid-template-columns: auto 320px;
}
.petdoku-jeu.mg-fs #petdoku-root .board-wrap {
  width: max(300px, var(--pd-grille));
}
.petdoku-jeu.mg-fs #petdoku-root .cell {
  font-size: calc(max(300px, var(--pd-grille)) / var(--n) * 0.55);
}

/* ---------- Mise en page ---------- */
#petdoku-root .layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  padding: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

#petdoku-root .play {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

/* ---------- Grille ---------- */
#petdoku-root .board-wrap {
  position: relative;
  width: min(100%, 560px);
}

#petdoku-root .board {
  --n: 5;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  grid-template-rows: repeat(var(--n), 1fr); /* rangées de hauteur fixe */
  aspect-ratio: 1;
  width: 100%;
  border: 3px solid var(--grid-line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#petdoku-root .cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0 solid var(--grid-line);
  background: var(--c);
  color: #3b2f25;
  cursor: pointer;
  font-size: calc(min(560px, 100vw - 48px) / var(--n) * 0.55);
  line-height: 1;
  min-width: 0;
  min-height: 0; /* le contenu ne doit jamais agrandir la case */
  overflow: hidden;
  transition: filter 0.12s;
}

#petdoku-root .cell::after {
  /* fines lignes entre cases d'une même région */
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 0.5px rgba(59, 47, 37, 0.18);
  pointer-events: none;
}

#petdoku-root .cell:hover {
  filter: brightness(0.95);
}
#petdoku-root .cell:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
  z-index: 1;
}

#petdoku-root .cell .mark {
  font-size: 0.5em;
  font-weight: 900;
  color: #111;
  /* le glyphe ✕ ne s'épaissit pas avec font-weight : contour de la même couleur */
  -webkit-text-stroke: 0.08em currentColor;
}

#petdoku-root .cell .pet {
  display: inline-block;
  animation: pop 0.22s ease-out;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.18));
}

#petdoku-root .cell.conflict {
  animation: shake 0.35s;
}
#petdoku-root .cell.conflict::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 3px solid var(--red);
  border-radius: 10px;
  pointer-events: none;
}
/* animal mal placé : barré d'une croix rouge (posée sur la case, l'animal restant visible) */
#petdoku-root .cell.conflict .pet::after {
  content: "";
  position: absolute;
  inset: -4%;
  background:
    linear-gradient(45deg, transparent calc(50% - 0.07em), var(--red) calc(50% - 0.07em), var(--red) calc(50% + 0.07em), transparent calc(50% + 0.07em)),
    linear-gradient(-45deg, transparent calc(50% - 0.07em), var(--red) calc(50% - 0.07em), var(--red) calc(50% + 0.07em), transparent calc(50% + 0.07em));
  opacity: 0.9;
  pointer-events: none;
}

#petdoku-root .cell.hint::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 3px dashed var(--accent);
  border-radius: 10px;
  pointer-events: none;
  animation: blink 1s infinite;
}

#petdoku-root .board.solved .pet {
  animation: dance 0.6s ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
}

@keyframes pop {
  from {
    transform: scale(0.3);
  }
  70% {
    transform: scale(1.15);
  }
  to {
    transform: scale(1);
  }
}
@keyframes shake {
  25% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(3px);
  }
}
@keyframes blink {
  50% {
    opacity: 0.3;
  }
}
@keyframes dance {
  from {
    transform: translateY(0) rotate(-6deg);
  }
  to {
    transform: translateY(-12%) rotate(6deg);
  }
}

/* ---------- Victoire ---------- */
#petdoku-root .win {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(253, 248, 241, 0.55);
  backdrop-filter: blur(2px);
  border-radius: 14px;
  z-index: 5;
}

#petdoku-root .win[hidden] {
  display: none;
}

#petdoku-root .win-card {
  width: min(90%, 340px);
  padding: 22px;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  animation: pop 0.3s ease-out;
}

#petdoku-root .win-emoji {
  font-size: 2.6rem;
}
#petdoku-root .win-card h2 {
  margin: 4px 0;
}
#petdoku-root .win-card p {
  color: var(--muted);
  margin: 6px 0 16px;
  line-height: 1.5;
}
#petdoku-root .win-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

#petdoku-root .confetti {
  position: absolute;
  top: -10%;
  font-size: 1.6rem;
  pointer-events: none;
  z-index: 6;
  animation: fall linear forwards;
}

@keyframes fall {
  to {
    transform: translateY(120vh) rotate(540deg);
    opacity: 0.2;
  }
}

/* ---------- Barre d'outils ---------- */
#petdoku-root .message {
  min-height: 1.6em;
  margin: 12px 0 4px;
  color: var(--muted);
  font-weight: 700;
  text-align: center;
}

#petdoku-root .message.bad {
  color: var(--red);
}
#petdoku-root .message.good {
  color: var(--green);
}

#petdoku-root .toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

#petdoku-root .btn {
  padding: 9px 14px;
  font-weight: 800;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--border);
  transition: transform 0.08s;
}

#petdoku-root .btn:hover:not(:disabled) {
  background: var(--panel-2);
}
#petdoku-root .btn:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: none;
}
#petdoku-root .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
#petdoku-root .btn.primary {
  color: #fff;
  background: var(--accent);
  border-color: #d97706;
  box-shadow: 0 2px 0 #b45309;
}
#petdoku-root .btn.primary:hover {
  background: #fbbf24;
}

/* ---------- Panneau ---------- */
#petdoku-root .panel {
  align-self: start;
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

#petdoku-root .panel h2 {
  margin: 0 0 10px;
  font-size: 1.05rem;
}
#petdoku-root .panel h3 {
  margin: 18px 0 8px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

#petdoku-root .diffs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#petdoku-root .diff {
  flex: 1 1 auto;
  padding: 7px 10px;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text);
  background: var(--panel-2);
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
}

#petdoku-root .diff small {
  display: block;
  font-weight: 600;
  color: var(--muted);
  font-size: 0.72rem;
}
#petdoku-root .diff.active {
  border-color: var(--accent);
  background: var(--panel);
}

#petdoku-root .levels {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

#petdoku-root .lvl {
  position: relative;
  aspect-ratio: 1;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text);
  background: var(--panel-2);
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
}

#petdoku-root .lvl:hover {
  border-color: var(--border);
}
#petdoku-root .lvl.done {
  background: #dcfce7;
  color: #166534;
}
#petdoku-root .lvl.started::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
#petdoku-root .lvl.current {
  border-color: var(--accent);
}

@media (prefers-color-scheme: dark) {
  #petdoku-root .lvl.done {
    background: #14532d;
    color: #bbf7d0;
  }
  #petdoku-root .win {
    background: rgba(27, 26, 36, 0.55);
  }
}

#petdoku-root .rules ol,
#petdoku-root .rules ul {
  margin: 0;
  padding-left: 20px;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--muted);
}
#petdoku-root .rules strong {
  color: var(--text);
}

/* ---------- Aide (modale) ---------- */

#petdoku-root .help-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(92vw, 440px);
  height: fit-content;
  max-height: 90vh;
  overflow-y: auto;
  padding: 0;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
#petdoku-root .help-modal > .rules {
  padding: 22px;
}
#petdoku-root .help-modal[open] {
  animation: pop 0.25s ease-out;
}
#petdoku-root .help-modal::backdrop {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
}
#petdoku-root .help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#petdoku-root .help-head h2 {
  margin: 0;
}
#petdoku-root .help-close {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
}
#petdoku-root .help-close:hover {
  color: var(--text);
  background: var(--border);
}
#petdoku-root .help-modal .win-actions {
  margin-top: 18px;
}

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  #petdoku-root .layout {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  
  
}

/* croix automatiques : un peu plus discrètes que celles du joueur */
#petdoku-root .cell .mark.auto {
  color: rgba(17, 17, 17, 0.6);
}

/* ---------- Indices expliqués ---------- */
#petdoku-root .cell.hint-zone::before {
  content: "";
  position: absolute;
  inset: 0;
  /* rayures : visibles quelle que soit la couleur de la région */
  background: repeating-linear-gradient(
    135deg,
    rgba(120, 53, 15, 0.22) 0 6px,
    transparent 6px 12px
  );
  box-shadow: inset 0 0 0 2px rgba(120, 53, 15, 0.55);
  pointer-events: none;
}

#petdoku-root .message.hint-box {
  width: min(100%, 560px);
  padding: 12px 14px;
  text-align: left;
  font-weight: 600;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

#petdoku-root .message.hint-box p {
  margin: 0 0 10px;
  line-height: 1.5;
}

#petdoku-root .cell.hint.hint-zone::before {
  inset: 3px;
  background: repeating-linear-gradient(
    135deg,
    rgba(120, 53, 15, 0.22) 0 6px,
    transparent 6px 12px
  );
  border: 3px dashed var(--accent);
  border-radius: 10px;
  box-shadow: none;
}

/* difficulté dont tous les niveaux sont résolus */
#petdoku-root .diff.complete {
  color: #166534;
  background: #dcfce7;
}
#petdoku-root .diff.complete small {
  color: #15803d;
}
@media (prefers-color-scheme: dark) {
  #petdoku-root .diff.complete {
    color: #bbf7d0;
    background: #14532d;
  }
  #petdoku-root .diff.complete small {
    color: #86efac;
  }
}