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

html, body {
  margin: 0; height: 100%; overflow: hidden; background: #4fb4ff;
  font-family: "Baloo 2", "Comic Sans MS", "Chalkboard SE", system-ui, sans-serif;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  touch-action: none; overscroll-behavior: none;
}

#scene, #scene canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

button {
  font: inherit; border: none; cursor: pointer; color: inherit;
  touch-action: manipulation;
}
button:active { transform: scale(0.92); }

.cache { display: none !important; }

.ecran {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4vh; padding: 16px;
}

/* ------------------------------------------------ titre */

#titre { background: linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(255,143,200,0.35)); }
h1 {
  margin: 0; text-align: center; color: #fff; font-size: clamp(32px, 7vw, 72px); line-height: 1.05;
  text-shadow: 0 4px 0 #ff5e9a, 0 8px 18px rgba(80, 0, 120, 0.35);
}
h1 span { color: #fff6a8; }

.gros-bouton {
  width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0, #ffd23f 25%, #ff8fc8 100%);
  color: #fff; font-size: 70px; line-height: 1;
  box-shadow: 0 10px 0 #d9468a, 0 18px 30px rgba(0,0,0,.25);
  text-shadow: 0 3px 0 #d9468a;
}
#btn-jouer { animation: pulse 1.4s ease-in-out infinite; padding-left: 18px; }
@keyframes pulse { 50% { transform: scale(1.08); } }

/* ------------------------------------------------ qui joue ? */

#profils { background: rgba(40, 20, 90, 0.25); }
.ronds {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(14px, 4vw, 36px); width: min(96vw, 900px);
}
.profil {
  width: clamp(110px, 26vw, 170px); aspect-ratio: 1; border-radius: 50%; padding: 0;
  background: radial-gradient(circle at 35% 30%, #fff 0, var(--couleur, #fff) 60%);
  border: 6px solid #fff; box-shadow: 0 8px 0 rgba(0,0,0,.15), 0 12px 24px rgba(0,0,0,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(60px, 14vw, 96px); line-height: 1; transition: transform .2s;
}
.profil.dernier { border-color: #fff6a8; }
.profil.plus, .profil.retour { width: clamp(80px, 18vw, 120px); font-size: clamp(36px, 8vw, 56px); background: rgba(255,255,255,.55); }
.profil.choisie { transform: scale(1.15) rotate(-4deg); border-color: #ffd23f; animation: danse .5s ease-in-out 2; }
.joueur { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.joueur .nom {
  max-width: clamp(110px, 26vw, 170px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #fff; font-size: clamp(20px, 5vw, 30px); font-weight: bold; text-shadow: 0 2px 0 rgba(80, 0, 120, .45);
  padding: 2px 14px; border-radius: 16px; background: rgba(90, 40, 140, .45);
}
.joueur .nom:empty { display: none; }
#prenom { display: flex; flex-direction: column; align-items: center; gap: 20px; }
#prenom-champ {
  width: min(80vw, 360px); padding: 12px 18px; border: 5px solid #fff; border-radius: 24px;
  font: inherit; font-size: 30px; text-align: center; color: #6a2c8f; background: #fff;
  user-select: text; -webkit-user-select: text; touch-action: manipulation;
}
#prenom .boutons { display: flex; gap: 24px; }
.profil.ok { width: clamp(80px, 18vw, 120px); font-size: clamp(36px, 8vw, 56px); background: #7fdc6f; }
.profil.ok:disabled { opacity: .4; }
#nuage { position: absolute; right: 14px; bottom: max(12px, env(safe-area-inset-bottom)); font-size: 26px; opacity: .7; }

/* ------------------------------------------------ choix */

#choix { background: rgba(40, 20, 90, 0.25); }
#heroines { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3vw; width: min(96vw, 1000px); }
@media (orientation: portrait) { #heroines { grid-template-columns: repeat(2, 1fr); width: min(92vw, 520px); } }
.carte {
  aspect-ratio: 3 / 4; border-radius: 28px; padding: 0; overflow: hidden;
  border: 6px solid #fff; box-shadow: 0 8px 0 rgba(0,0,0,.15), 0 12px 24px rgba(0,0,0,.2);
  transition: transform .2s;
}
.carte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carte.elsa { background: linear-gradient(160deg, #e2f7ff, #8fd6ff); }
.carte.rumi { background: linear-gradient(160deg, #e7d9ff, #9a6be0); }
.carte.mira { background: linear-gradient(160deg, #ffd6e2, #ff5e9a); }
.carte.zoey { background: linear-gradient(160deg, #d6f6ff, #34b9d8); }
.carte.choisie { transform: scale(1.1) rotate(-3deg); border-color: #ffd23f; animation: danse .5s ease-in-out 2; }
@keyframes danse { 50% { transform: scale(1.15) rotate(3deg); } }

#btn-reset {
  position: absolute; right: 12px; bottom: 12px; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.35); font-size: 22px; opacity: .6;
}
#btn-reset.appui { animation: chargement 2s linear forwards; }
@keyframes chargement { to { background: #ff5e9a; transform: scale(1.5) rotate(360deg); opacity: 1; } }

/* ------------------------------------------------ jeu */

#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }

.rond {
  position: absolute; width: 70px; height: 70px; border-radius: 50%;
  background: rgba(255,255,255,.85); font-size: 36px;
  box-shadow: 0 5px 0 rgba(0,0,0,.15);
  display: flex; align-items: center; justify-content: center;
}
.haut-gauche { top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); }
.haut-gauche.deuxieme { top: calc(max(12px, env(safe-area-inset-top)) + 82px); }
.rond.portrait { background: #fff center 18% / 150% no-repeat; border: 4px solid #fff; }
.haut-droite { top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }

#outils {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: max(10px, env(safe-area-inset-bottom));
  display: flex; gap: 10px; padding: 10px; border-radius: 40px;
  background: rgba(255,255,255,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.outil {
  width: 76px; height: 76px; border-radius: 24px; font-size: 42px;
  background: #fff; box-shadow: 0 5px 0 #d0c6ff;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s;
}
.outil.bloc { background-size: cover; image-rendering: pixelated; border: 4px solid #fff; }
.outil.actif { transform: translateY(-10px) scale(1.08); box-shadow: 0 0 0 5px #ffd23f, 0 10px 0 #d0c6ff; }
#outils.aide .outil { animation: coucou 1s ease-in-out 3; }
@keyframes coucou { 50% { transform: translateY(-14px); } }

@media (max-width: 640px) {
  #outils { gap: 5px; padding: 6px; }
  .outil { width: 46px; height: 46px; font-size: 27px; border-radius: 14px; }
  .rond { width: 58px; height: 58px; font-size: 30px; }
  .haut-gauche.deuxieme { top: calc(max(12px, env(safe-area-inset-top)) + 68px); }
}

#palette {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(max(10px, env(safe-area-inset-bottom)) + 112px);
  max-width: 96vw; display: none;
}
#palette[data-mode="blocs"], #palette[data-mode="deco"] { display: block; }
@media (max-width: 640px) { #palette { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 70px); } }
.rangee {
  display: none; gap: 8px; padding: 8px; border-radius: 26px; overflow-x: auto;
  background: rgba(255,255,255,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  touch-action: pan-x; scrollbar-width: none;
}
#palette[data-mode="blocs"] #palette-blocs, #palette[data-mode="deco"] #palette-deco { display: flex; }
.case {
  flex: 0 0 auto; width: 58px; height: 58px; border-radius: 16px; font-size: 34px;
  background: #fff center / cover no-repeat; image-rendering: pixelated;
  display: flex; align-items: center; justify-content: center; border: 3px solid #fff;
}
.case.actif { border-color: #ffd23f; box-shadow: 0 0 0 3px #ff8fc8; transform: scale(1.08); }
@media (max-width: 640px) { .case { width: 48px; height: 48px; font-size: 28px; } }

#btn-descendre {
  display: none; position: absolute; left: 50%; bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%); width: 120px; height: 120px; font-size: 56px;
}
#hud.balade #btn-descendre { display: block; }
#hud.balade #outils, #hud.balade #palette { display: none; }

/* ------------------------------------------------ cuisine */

#cuisine {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; gap: 5vw;
  padding: 90px 16px 16px; background: radial-gradient(circle at 50% 40%, #fff4e0, #ffd6e8 60%, #ffb3d1);
}
@media (orientation: portrait) { #cuisine { flex-direction: column; gap: 3vh; } }
#ingredients { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ingredient {
  width: min(19vw, 96px); height: min(19vw, 96px); border-radius: 24px; background: #fff;
  font-size: min(11vw, 56px); box-shadow: 0 6px 0 #f0a8c8;
}
.ingredient.saute { animation: saute .5s; }
@keyframes saute { 40% { transform: translateY(-24px) scale(1.15); } }

#plan { display: flex; flex-direction: column; align-items: center; gap: 16px; }
#bol { position: relative; width: 220px; height: 170px; display: flex; align-items: flex-end; justify-content: center; }
#bol-dessin { font-size: 160px; line-height: 1; }
#bol-contenu { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: center; gap: 4px; z-index: 1; }
.dans-bol { font-size: 54px; animation: tombe .45s ease-out; }
@keyframes tombe { from { transform: translateY(-80px) scale(1.4); opacity: 0; } }
#magies { display: flex; gap: 22px; opacity: .35; pointer-events: none; transition: opacity .3s; }
#cuisine.pret #magies { opacity: 1; pointer-events: auto; }
.magie {
  width: 100px; height: 100px; border-radius: 50%; font-size: 54px; background: #fff;
  box-shadow: 0 6px 0 #f0a8c8;
}
#cuisine.pret .magie { animation: pulse 1.4s ease-in-out infinite; }
#cuisine.magie-feu #bol { animation: tremble .15s linear infinite; filter: drop-shadow(0 0 30px #ff7a2a); }
#cuisine.magie-glace #bol { animation: tremble .15s linear infinite; filter: drop-shadow(0 0 30px #5fd8ff); }
@keyframes tremble { 50% { transform: translateX(4px) rotate(2deg); } }

#resultat { display: none; flex-direction: column; align-items: center; gap: 20px; }
#cuisine.fini #ingredients, #cuisine.fini #plan { display: none; }
#cuisine.fini #resultat { display: flex; }
#plat-fini { font-size: min(40vw, 220px); line-height: 1; transition: transform .2s, clip-path .2s; animation: apparait .6s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes apparait { from { transform: scale(0) rotate(-90deg); } }
#resultat .boutons { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 640px) { #resultat .gros-bouton { width: 96px; height: 96px; font-size: 46px; } }
#resultat .gros-bouton { width: 120px; height: 120px; font-size: 56px; }

#confettis { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#confettis i {
  position: absolute; top: -20px; width: 14px; height: 14px; border-radius: 3px;
  animation: confetti 1.6s ease-in forwards;
}
@keyframes confetti { to { transform: translateY(110vh) rotate(720deg); } }

/* ------------------------------------------------ micro à idées */

#btn-idee {
  position: fixed; z-index: 20; left: 50%; transform: translateX(-50%);
  top: max(10px, env(safe-area-inset-top));
  width: 84px; height: 84px; border-radius: 50%; font-size: 44px;
  background: radial-gradient(circle at 35% 30%, #fff 0, #ffb3d9 30%, #ff5e9a 100%);
  border: 4px solid #fff; box-shadow: 0 6px 0 #d9468a, 0 10px 20px rgba(0,0,0,.2);
  display: flex; align-items: center; justify-content: center;
  animation: appel-idee 4s ease-in-out infinite;
}
#btn-idee:active { transform: translateX(-50%) scale(0.92); }
/* Le micro n'apparaît que pendant le jeu (pas sur l'écran titre ni le choix de l'héroïne). */
#hud.cache ~ #btn-idee { display: none; }
@keyframes appel-idee { 0%, 85%, 100% { rotate: 0deg; } 90% { rotate: -12deg; } 95% { rotate: 12deg; } }
@media (max-width: 560px) { #btn-idee { width: 66px; height: 66px; font-size: 34px; } }

#idee {
  position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6vh; padding: 16px;
  background: radial-gradient(circle at 50% 40%, #fff4fb, #ffd6ec 55%, #c9a8ff);
}
#idee > * { flex-shrink: 0; }
@media (max-height: 560px) { #idee { flex-direction: row; gap: 10vw; } #idee-micro { width: min(56vh, 260px) !important; } }
#idee-micro {
  position: relative; width: min(60vw, 260px); aspect-ratio: 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: min(28vw, 120px);
}
#idee-micro span { position: relative; z-index: 2; }
#idee-onde {
  position: absolute; inset: 10%; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle, #fff 0, #ff8fc8 70%); transition: transform .08s linear;
}
#idee-temps {
  position: absolute; inset: -14px; border-radius: 50%;
  background: conic-gradient(#ffd23f var(--reste, 360deg), rgba(255,255,255,.5) 0);
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 65%); mask: radial-gradient(circle, transparent 64%, #000 65%);
}
#btn-idee-envoyer { background: radial-gradient(circle at 35% 30%, #fff 0, #a6f0b0 25%, #2fbf71 100%); box-shadow: 0 10px 0 #1f8a50, 0 18px 30px rgba(0,0,0,.25); text-shadow: none; }
#idee-envol { display: none; position: absolute; font-size: 120px; }

#idee[data-etat="pret"] #idee-micro { animation: pulse 1s ease-in-out infinite; filter: saturate(.6); }
#idee[data-etat="pret"] #btn-idee-envoyer, #idee[data-etat="pret"] #idee-temps { visibility: hidden; }
#idee[data-etat="ecoute"] #idee-onde { background: radial-gradient(circle, #fff 0, #ff4f6d 70%); }
#idee[data-etat="ecoute"] #btn-idee-envoyer { animation: pulse 1.4s ease-in-out infinite; }
#idee[data-etat="erreur"] #idee-micro span::after { content: "🚫"; position: absolute; left: 0; top: 0; }
#idee[data-etat="erreur"] #btn-idee-envoyer { visibility: hidden; }
#idee[data-etat="envoi"] #idee-micro, #idee[data-etat="envoi"] #btn-idee-envoyer, #idee[data-etat="envoi"] #btn-idee-annuler { display: none; }
#idee[data-etat="envoi"] #idee-envol { display: block; animation: envol 3.6s ease-in forwards; }
@keyframes envol {
  0% { transform: scale(0) rotate(-30deg); }
  12% { transform: scale(1.25) rotate(10deg); }
  20%, 70% { transform: scale(1) rotate(-5deg) translateY(0); opacity: 1; }
  45% { transform: scale(1.1) rotate(5deg) translateY(-12px); }
  100% { transform: scale(.4) rotate(20deg) translate(40vw, -60vh); opacity: 0; }
}