/* =========================================================
   LE SUDOKU DES PIRATES - style.css
   Palette "mer & trésor" pensée pour les 4-7 ans :
   gros boutons, couleurs franches, coins arrondis.
   ========================================================= */

:root{
  --bleu-abysse:   #052c52;
  --bleu-marine:   #0b4d84;
  --bleu-fonce:    #0d5fa3;
  --bleu-moyen:    #2f9bd6;
  --bleu-clair:    #8fd8f7;
  --bleu-ecume:    #e4f6fd;
  --or:            #f6c94a;
  --or-fonce:      #d99e12;
  --corail:        #ef6f5c;
  --vert-treasure: #4ecb8b;
  --blanc:         #ffffff;
  --ombre:         rgba(4, 30, 56, 0.35);
  --police-titre:  'Baloo 2', 'Fredoka', sans-serif;
  --police-texte:  'Fredoka', 'Baloo 2', sans-serif;
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--police-texte);
  background: var(--bleu-marine);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

button{
  font-family: var(--police-texte);
  cursor: pointer;
  border: none;
  outline: none;
}
button:focus-visible{
  outline: 4px solid var(--or);
  outline-offset: 3px;
}

/* ---------- Ecrans ---------- */
.screen{
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.screen.active{ display: flex; }

.fond-mer{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Repli si image-fond.png absente : un dégradé "mer" fait le travail */
#screen-home, #screen-levels, #screen-game{
  background: linear-gradient(180deg, var(--bleu-clair) 0%, var(--bleu-moyen) 45%, var(--bleu-marine) 100%);
}

/* ---------- Boutons génériques ---------- */
.btn-principal{
  position: relative;
  z-index: 2;
  background: var(--bleu-abysse);
  color: var(--blanc);
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 1px;
  padding: 18px 48px;
  border-radius: 999px;
  box-shadow: 0 6px 0 #021c33, 0 10px 18px var(--ombre);
  transition: transform .08s ease;
}
.btn-principal:active{
  transform: translateY(6px);
  box-shadow: 0 0 0 #021c33, 0 4px 8px var(--ombre);
}

.btn-secondaire{
  position: relative;
  z-index: 2;
  background: var(--or);
  color: var(--bleu-abysse);
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 12px 22px;
  border-radius: 999px;
  box-shadow: 0 5px 0 var(--or-fonce), 0 8px 14px var(--ombre);
  transition: transform .08s ease;
}
.btn-secondaire:active{
  transform: translateY(5px);
  box-shadow: 0 0 0 var(--or-fonce), 0 3px 6px var(--ombre);
}

.btn-icone{
  position: relative;
  z-index: 2;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--blanc);
  box-shadow: 0 4px 0 rgba(0,0,0,.18), 0 6px 12px var(--ombre);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  transition: transform .08s ease;
}
.btn-icone:active{ transform: translateY(4px); box-shadow: 0 0 0 rgba(0,0,0,.18); }

/* =========================================================
   ECRAN DE CHARGEMENT
   ========================================================= */
#screen-loading{
  background: radial-gradient(circle at 50% 30%, var(--bleu-moyen), var(--bleu-abysse));
}
.loading-wrap{ text-align: center; color: var(--blanc); }
.loading-boussole{
  font-size: 5rem;
  animation: tangage 1.4s ease-in-out infinite;
}
.boussole-aiguille{ display: inline-block; animation: tourne 3s linear infinite; }
@keyframes tourne{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }
@keyframes tangage{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-14px);} }

.loading-texte{
  font-family: var(--police-titre);
  font-size: 1.4rem;
  margin: 10px 0 22px;
}
.loading-barre{
  width: 260px;
  height: 20px;
  background: rgba(255,255,255,.25);
  border-radius: 999px;
  overflow: hidden;
  margin: 0 auto;
  border: 3px solid var(--blanc);
}
.loading-barre-remplissage{
  height: 100%;
  width: 0%;
  background: var(--or);
  border-radius: 999px;
  transition: width .25s ease;
}

/* =========================================================
   ECRAN D'ACCUEIL
   ========================================================= */
.btn-plein-ecran{ position: absolute; top: 22px; right: 22px; z-index: 5; }

.zone-texte-gauche{
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  max-width: 190px;
  background: rgba(255,255,255,.85);
  border: 3px dashed var(--bleu-fonce);
  border-radius: 20px;
  padding: 14px 16px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--bleu-abysse);
  line-height: 1.35;
}

.accueil-centre{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  margin-top: -20px;
}
.titre-image-wrap{ text-align: center; }
.titre-image{
  max-width: min(70vw, 560px);
  filter: drop-shadow(0 8px 10px var(--ombre));
}
.titre-repli{
  font-family: var(--police-titre);
  font-size: 3rem;
  color: var(--blanc);
  text-shadow: 0 4px 0 var(--bleu-abysse), 0 8px 16px var(--ombre);
  text-align: center;
  margin: 0;
}

.btn-jouer{ font-size: 2rem; padding: 22px 70px; }

.accueil-bas-droite{
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
}
.btn-aide-son{ background: var(--or); }

/* =========================================================
   ECRAN CHOIX DU NIVEAU
   ========================================================= */
.btn-retour{ position: absolute; top: 22px; left: 22px; z-index: 5; }

.levels-centre{
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--blanc);
}
.niveaux-titre{
  font-family: var(--police-titre);
  font-size: 2rem;
  text-shadow: 0 4px 0 var(--bleu-abysse);
  margin-bottom: 34px;
}
.niveaux-liste{
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  justify-content: center;
}
.carte-niveau{
  width: 170px;
  background: var(--blanc);
  border-radius: 26px;
  padding: 26px 14px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 0 rgba(0,0,0,.15), 0 12px 20px var(--ombre);
  transition: transform .1s ease;
}
.carte-niveau:active{ transform: translateY(6px); box-shadow: 0 2px 0 rgba(0,0,0,.15); }
.niveau-emoji{ font-size: 3rem; }
.niveau-nom{
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--bleu-abysse);
}
.niveau-grille{
  font-size: .95rem;
  font-weight: 600;
  color: var(--bleu-fonce);
  background: var(--bleu-ecume);
  padding: 3px 12px;
  border-radius: 999px;
}

/* =========================================================
   ECRAN DE JEU
   ========================================================= */
.barre-jeu{
  position: relative;
  z-index: 4;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  gap: 10px;
}
.barre-jeu-gauche, .barre-jeu-droite{ display: flex; gap: 10px; align-items: center; }
.barre-jeu .btn-icone{ width: 48px; height: 48px; font-size: 1.3rem; }
.pastille-niveau{
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--bleu-abysse);
  background: var(--or);
  padding: 8px 26px;
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--or-fonce);
}
.btn-nouvelle-grille{ font-size: .85rem; padding: 10px 16px; }

.zone-jeu{
  position: relative;
  z-index: 2;
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 10px 24px 24px;
  overflow: hidden;
}

.grille-conteneur{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.grille-sudoku{
  display: grid;
  gap: 6px;
  background: var(--bleu-abysse);
  padding: 8px;
  border-radius: 18px;
  box-shadow: 0 10px 0 rgba(0,0,0,.2), 0 16px 26px var(--ombre);
}

.case-sudoku{
  width: 74px;
  height: 74px;
  background: var(--bleu-ecume);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  box-shadow: inset 0 0 0 3px rgba(11,77,132,.15);
  transition: background .12s ease, transform .1s ease;
}
.case-sudoku.vide{ cursor: pointer; }
.case-sudoku.vide:active{ transform: scale(.94); }
.case-sudoku.indice{
  background: var(--bleu-clair);
  box-shadow: inset 0 0 0 3px var(--bleu-fonce);
}
.case-sudoku.selectionnee{
  background: var(--or);
  box-shadow: inset 0 0 0 4px var(--or-fonce);
  animation: pulse .8s ease-in-out infinite;
}
.case-sudoku.remplie{ background: var(--blanc); }
.case-sudoku.correcte{ background: var(--vert-treasure) !important; }
.case-sudoku.incorrecte{ background: var(--corail) !important; animation: secoue .4s ease; }

/* Délimitation des zones (blocs 2x2 pour le niveau Moyen, 2x3 pour le
   niveau Difficile) : un liseré doré plus épais entre chaque bloc. */
.case-sudoku.bordure-droite{ border-right: 5px solid var(--or); }
.case-sudoku.bordure-bas{ border-bottom: 5px solid var(--or); }

@keyframes pulse{ 0%,100%{ box-shadow: inset 0 0 0 4px var(--or-fonce);} 50%{ box-shadow: inset 0 0 0 7px var(--or-fonce);} }
@keyframes secoue{
  0%,100%{ transform: translateX(0); }
  25%{ transform: translateX(-6px); }
  75%{ transform: translateX(6px); }
}

.btn-verifier{ font-size: 1.2rem; padding: 14px 40px; }
.btn-verifier:disabled{ opacity: .45; pointer-events: none; }

.plateau-cartes{
  background: rgba(255,255,255,.9);
  border-radius: 22px;
  padding: 16px;
  max-width: 230px;
  text-align: center;
  box-shadow: 0 10px 20px var(--ombre);
}
.cartes-consigne{
  font-size: .85rem;
  font-weight: 600;
  color: var(--bleu-abysse);
  margin: 0 0 10px;
}
.cartes-liste{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.carte-tresor{
  position: relative;
  width: 78px;
  height: 78px;
  background: var(--blanc);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  box-shadow: 0 5px 0 rgba(0,0,0,.15), 0 8px 14px var(--ombre);
  overflow: hidden;
  transition: transform .1s ease;
}
.carte-tresor:active{ transform: translateY(4px) scale(.96); }
.carte-tresor.choisie{ box-shadow: inset 0 0 0 4px var(--or), 0 5px 0 rgba(0,0,0,.15); }
.carte-tresor img{ width: 100%; height: 100%; object-fit: cover; }
.carte-tresor .carte-emoji{ line-height: 1; }

/* Disposition "en bas" pour petits écrans / mobile */
@media (max-width: 760px), (orientation: portrait){
  .zone-jeu{ flex-direction: column; gap: 12px; padding: 6px 12px 16px; }
  .plateau-cartes{ max-width: 100%; width: 100%; }
  .cartes-liste{ grid-template-columns: repeat(6, 1fr); }
  .case-sudoku{ width: 56px; height: 56px; font-size: 1.8rem; }
  .case-sudoku.bordure-droite{ border-right-width: 4px; }
  .case-sudoku.bordure-bas{ border-bottom-width: 4px; }
  .carte-tresor{ width: 54px; height: 54px; font-size: 1.7rem; }
  .titre-image{ max-width: 80vw; }
  .btn-jouer{ font-size: 1.5rem; padding: 16px 46px; }
  .zone-texte-gauche{ display: none; }
}

/* =========================================================
   MODALES
   ========================================================= */
.modale-fond{
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(3, 20, 40, .55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modale-fond.active{ display: flex; }

.modale-boite{
  position: relative;
  background: var(--blanc);
  border-radius: 28px;
  padding: 30px 34px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
  max-height: 88vh;
  overflow-y: auto;
}
.modale-boite h2{
  font-family: var(--police-titre);
  color: var(--bleu-abysse);
  margin-top: 4px;
}
.modale-fermer{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  font-size: 1.1rem;
}
.btn-ecouter{ margin-bottom: 18px; }

.liste-etapes{
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.liste-etapes li{
  background: var(--bleu-ecume);
  border-radius: 16px;
  padding: 12px 14px;
  font-size: .98rem;
  color: var(--bleu-abysse);
  display: flex;
  align-items: center;
  gap: 10px;
}
.etape-emoji{ font-size: 1.4rem; }

.modale-victoire-boite{ max-width: 380px; }
.victoire-emoji{
  font-size: 4.5rem;
  animation: tangage 1s ease-in-out infinite;
}
.victoire-boutons{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 16px;
}

/* Respect des préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}