/* ============================================================
   La Peche de Lilou & Lola  -  habillage de l'interface
   Tout est rose/corail, gros boutons, coins arrondis.
   ============================================================ */

:root{
  --rose-clair:#ffe4ef;
  --rose:#ff8fb8;
  --rose-vif:#e8467c;
  --rose-fonce:#a82a58;
  --lavande:#b892ff;
  --menthe:#7ee8c0;
  --dore:#ffd166;
  --blanc:#fffafc;
  --ombre:0 6px 0 rgba(168,42,88,.28), 0 10px 24px rgba(168,42,88,.22);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body{
  margin:0; padding:0;
  width:100%; height:100%;
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:none;
  user-select:none; -webkit-user-select:none;
  background:#ffb3d1;
  font-family:"Segoe UI Rounded","SF Pro Rounded",-apple-system,"Trebuchet MS",Verdana,sans-serif;
  color:var(--rose-fonce);
}

#jeu{
  display:block;
  position:fixed; inset:0;
  width:100%; height:100%;
}

/* ---------- ecrans superposes ---------- */
.ecran{
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:2.2vh;
  padding:3vh max(3vw, env(safe-area-inset-left)) 3vh max(3vw, env(safe-area-inset-right));
  background:linear-gradient(170deg,#ffd9e8 0%,#ffb8d3 45%,#ffa3c6 100%);
  z-index:10;
  animation:apparition .28s ease-out;
}
.ecran.cache{ display:none; }

@keyframes apparition{ from{opacity:0; transform:scale(.97);} to{opacity:1; transform:none;} }

/* ---------- titre ---------- */
.bulle-titre{ text-align:center; }
.bulle-titre h1{
  margin:0;
  font-size:clamp(30px,8vh,64px);
  letter-spacing:.02em;
  color:var(--blanc);
  text-shadow:0 3px 0 var(--rose-vif), 0 7px 14px rgba(168,42,88,.35);
}
.sous-titre{
  margin:.3em 0 0;
  font-size:clamp(14px,3.2vh,24px);
  color:var(--rose-fonce);
  opacity:.85;
}

/* ---------- cartes de choix ---------- */
.choix{ display:flex; gap:4vw; flex-wrap:wrap; justify-content:center; }

.carte{
  appearance:none; border:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:.4vh;
  width:clamp(130px,26vw,220px);
  padding:2vh 1.2vw 2.2vh;
  border-radius:26px;
  background:var(--blanc);
  box-shadow:var(--ombre);
  transition:transform .12s ease, box-shadow .12s ease;
}
.carte:active{ transform:translateY(5px); box-shadow:0 2px 0 rgba(168,42,88,.28); }
.carte-lilou{ background:linear-gradient(160deg,#fff,#ffe0ee); }
.carte-lola{  background:linear-gradient(160deg,#fff,#e6f7ff); }

.carte-emoji{ display:block; width:clamp(56px,13vh,110px); height:clamp(56px,13vh,110px); }
.carte-emoji img{ width:100%; height:100%; object-fit:contain; }

.carte-nom{
  font-size:clamp(20px,4.6vh,34px); font-weight:700; color:var(--rose-vif);
}
.carte-info{ font-size:clamp(11px,2.1vh,16px); opacity:.7; }

/* ---------- boutons ---------- */
button{ font-family:inherit; }

.bouton-principal,.bouton-secondaire,.bouton-album,.bouton-retour{
  appearance:none; border:none; cursor:pointer;
  border-radius:999px;
  font-weight:700;
  box-shadow:var(--ombre);
  transition:transform .12s ease, box-shadow .12s ease;
}
.bouton-principal:active,.bouton-secondaire:active,
.bouton-album:active,.bouton-retour:active{
  transform:translateY(5px); box-shadow:0 2px 0 rgba(168,42,88,.28);
}

.bouton-principal{
  padding:1.6vh 6vw; font-size:clamp(17px,3.6vh,26px);
  background:var(--rose-vif); color:#fff;
}
.bouton-secondaire{
  padding:1.3vh 4.5vw; font-size:clamp(14px,2.7vh,20px);
  background:var(--blanc); color:var(--rose-vif);
}
.bouton-album,.bouton-retour{
  padding:1.3vh 5vw; font-size:clamp(14px,2.8vh,20px);
  background:var(--blanc); color:var(--rose-vif);
}

/* ---------- album ---------- */
#album{ justify-content:flex-start; gap:1.2vh; overflow:hidden; }
#album h2{
  margin:1vh 0 0; font-size:clamp(22px,5vh,38px); color:var(--blanc);
  text-shadow:0 3px 0 var(--rose-vif);
}
.album-compte{ margin:0; font-size:clamp(12px,2.4vh,18px); opacity:.8; }

.grille{
  flex:1 1 auto; width:100%; max-width:1000px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(clamp(74px,11vw,120px),1fr));
  gap:1.4vh 1.2vw;
  overflow-y:auto;
  padding:1vh .5vw 2vh;
  touch-action:pan-y;
}
.case{
  background:var(--blanc);
  border-radius:18px;
  padding:.9vh .4vw;
  display:flex; flex-direction:column; align-items:center; gap:.3vh;
  box-shadow:0 4px 0 rgba(168,42,88,.18);
}
.case img{ width:100%; height:clamp(40px,8vh,80px); object-fit:contain; }
.case.inconnu img{ filter:brightness(0) saturate(0); opacity:.16; }
.case span{ font-size:clamp(9px,1.7vh,13px); text-align:center; line-height:1.15; }
.case.inconnu span{ opacity:.35; }

/* ---------- fin de partie ---------- */
.bulle-fin{
  background:var(--blanc);
  border-radius:32px;
  padding:3vh 6vw;
  text-align:center;
  box-shadow:var(--ombre);
  max-width:90vw;
}
.bulle-fin h2{ margin:0 0 .4em; font-size:clamp(24px,6vh,44px); color:var(--rose-vif); }
.fin-score{ margin:.2em 0; font-size:clamp(15px,3.2vh,24px); }
.fin-score strong{ color:var(--rose-vif); font-size:1.3em; }
.fin-record{ margin:.2em 0 0; font-size:clamp(12px,2.4vh,18px); opacity:.75; min-height:1.2em; }

.nouveaux{ display:flex; gap:1.4vw; justify-content:center; flex-wrap:wrap; margin:1.4vh 0 0; }
.nouveaux img{ width:clamp(34px,7vh,64px); height:clamp(34px,7vh,64px); object-fit:contain;
  animation:pop .45s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes pop{ from{transform:scale(0) rotate(-25deg);} to{transform:none;} }

.fin-boutons{ display:flex; gap:2.4vw; justify-content:center; flex-wrap:wrap; margin-top:2.2vh; }

/* ---------- tourne le telephone ---------- */
#rotate{ gap:3vh; }
#rotate p{ font-size:clamp(18px,4vh,30px); color:var(--blanc); text-shadow:0 3px 0 var(--rose-vif); margin:0; }
.rotate-icone{
  width:clamp(60px,14vw,110px); height:clamp(96px,22vw,176px);
  border:7px solid var(--blanc); border-radius:16px;
  box-shadow:0 6px 18px rgba(168,42,88,.3);
  animation:tourne 1.8s ease-in-out infinite;
}
@keyframes tourne{
  0%,35%{ transform:rotate(0deg); }
  65%,100%{ transform:rotate(90deg); }
}