/* =========================================================================
   PIM — feuille de style
   Design « tout-petit » : couleurs vives, formes rondes, rebonds, gros boutons.
   ========================================================================= */

:root {
  --rouge:#ff5a5f; --orange:#ff9f43; --jaune:#ffd24c; --vert:#27c16b;
  --menthe:#2bd9c5; --bleu:#4f9cf9; --ciel:#6ec6ff; --violet:#9b6bff; --rose:#ff7eb6;
  --ink:#3a2e2a;
  --sat:env(safe-area-inset-top); --sab:env(safe-area-inset-bottom);
  /* Fredoka pour toute l'app (latin) ; Tajawal/Geeza pour l'arabe ; reste en repli système */
  --font: "Fredoka", "Tajawal", "SF Pro Rounded", system-ui, "Segoe UI",
          "Geeza Pro", "Noto Sans Arabic", "Cairo", Arial, sans-serif;
}

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

html, body {
  margin:0; padding:0; height:100%;
  overflow:hidden; position:fixed; inset:0;
  font-family:var(--font);
  color:var(--ink);
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
  touch-action:none;
  overscroll-behavior:none;
  background:linear-gradient(180deg,#6ec6ff 0%, #93d6ff 55%, #bce8ff 100%);
}
/* zone du « home indicator » iOS (et tout pixel non couvert) : on la peint en VERT des collines
   -> plus de bande blanche en bas quand l'app est installée sur l'écran d'accueil. */
html { background:#3cb04e; }

/* nuages blancs façon Super Mario */
body::before {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 110'><g fill='white'><circle cx='55' cy='68' r='28'/><circle cx='92' cy='52' r='36'/><circle cx='132' cy='66' r='30'/><rect x='52' y='66' width='84' height='30' rx='15'/></g></svg>") 8% 14%/150px 82px no-repeat,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 110'><g fill='white'><circle cx='55' cy='68' r='28'/><circle cx='92' cy='52' r='36'/><circle cx='132' cy='66' r='30'/><rect x='52' y='66' width='84' height='30' rx='15'/></g></svg>") 78% 8%/200px 110px no-repeat,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 110'><g fill='white'><circle cx='55' cy='68' r='28'/><circle cx='92' cy='52' r='36'/><circle cx='132' cy='66' r='30'/><rect x='52' y='66' width='84' height='30' rx='15'/></g></svg>") 42% 24%/120px 66px no-repeat;
  opacity:.92;
  animation:clouds 50s linear infinite alternate;
}
@keyframes clouds { from{transform:translateX(-14px)} to{transform:translateX(14px)} }

/* collines vertes en bas (verdure) */
body::after {
  content:""; position:fixed; left:0; right:0; bottom:0; height:30vh; z-index:0; pointer-events:none;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 220' preserveAspectRatio='none'><path d='M0 118 C70 58 150 58 210 100 C275 140 330 70 400 104 L400 220 L0 220 Z' fill='rgb(124,214,96)'/><path d='M0 150 C80 104 150 104 220 140 C300 178 350 110 400 146 L400 220 L0 220 Z' fill='rgb(60,176,78)'/></svg>") bottom center / 100% 100% no-repeat;
}

button { font-family:inherit; border:none; background:none; cursor:pointer; color:inherit; }
.hidden { display:none !important; }

/* =========================== ÉCRAN DE DÉMARRAGE ========================== */
.splash {
  position:fixed; inset:0; z-index:50;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px; transition:opacity .6s ease, transform .6s ease;
}
.splash.gone { opacity:0; transform:scale(1.06); pointer-events:none; }

/* === INTRO « pim » (étape 1) puis MORPH vers la page Soleil (étape 2) ===
   Au lancement : grand « pim » centré, SANS soleil + signature IDX (fond ciel/collines/nuages).
   Puis le soleil « se lève » et « pim » reprend sa place -> page Soleil. Transitions douces. */
.splash-sun  { transition:opacity .55s ease, transform .8s cubic-bezier(.34,1.56,.64,1); }
.splash-name { transition:transform .75s cubic-bezier(.22,1,.36,1); will-change:transform; }
.splash.intro .splash-sun  { opacity:0; transform:scale(.35); }
.splash.intro .splash-name { transform:translateY(-15vh) scale(1.45); }
@media (orientation:landscape) {
  .splash.intro .splash-name { transform:translateY(-18vh) scale(1.18); }
}
.splash-title {
  margin:0; font-size:18vw; font-weight:700; letter-spacing:.05em;
  color:#fff; text-shadow:0 6px 0 rgba(0,0,0,.12), 0 10px 24px rgba(0,0,0,.2);
}
.splash-sub { margin:0; font-size:5.2vw; font-weight:600; color:#fff; opacity:.95; }

/* =============================== MASCOTTE ================================ */
/* Soleil souriant — réutilisé en splash (.splash-*) et accueil (.m-*) */
.splash-sun, .mascot {
  position:relative; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #ffec96, #ffd24c 62%, #ffb329);
  box-shadow:0 0 0 10px rgba(255,210,76,.35), 0 14px 30px rgba(0,0,0,.18);
  animation:bob 3s ease-in-out infinite;
}
.splash-sun { width:42vw; height:42vw; max-width:240px; max-height:240px; }
/* halos pulsés doux autour du soleil : invitent à toucher (remplacent la main) */
.splash-sun::before, .splash-sun::after {
  content:""; position:absolute; inset:0; border-radius:50%;
  border:5px solid rgba(255,255,255,.7); pointer-events:none;
  animation:sunPulse 2.2s ease-out infinite;
}
.splash-sun::after { animation-delay:1.1s; }
@keyframes sunPulse { 0%{transform:scale(.96); opacity:.65} 100%{transform:scale(1.75); opacity:0} }

/* nom de l'app sur le splash : logo « pim » en Sniglet (rond et joyeux), minuscule */
.splash-name {
  font-family:"Sniglet", "Fredoka", var(--font);
  font-weight:400; font-size:13vw; letter-spacing:.01em; text-transform:lowercase;
  color:rgba(255,255,255,.96);
  /* halo doux à deux couches : profondeur premium sans lourdeur */
  text-shadow:0 2px 10px rgba(70,130,190,.26), 0 10px 28px rgba(70,130,190,.16);
  margin-top:clamp(14px, 2.6vh, 26px);   /* espace soigné, aéré mais groupé sous le soleil */
  /* pas d'animation infinie de transform ici : elle écraserait le morph de l'intro
     (le « transform » d'intro est piloté par .splash.intro .splash-name + transition). */
  will-change:transform;
}
.home-hello { font-family:"Fredoka", var(--font); }
.mascot { width:26vw; height:26vw; max-width:140px; max-height:140px; animation:sunIdle 5s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* Le soleil est VIVANT : respiration douce + petit saut MIGNON au squash & stretch soigné
   (anticipation -> étirement en l'air -> léger écrasé à l'atterrissage -> repos). */
@keyframes sunIdle {
  0%, 44%, 100% { transform:translateY(0) scaleX(1) scaleY(1); }
  22% { transform:translateY(-5px)  scaleX(1.012) scaleY(1.02); }   /* respire */
  52% { transform:translateY(2px)   scaleX(1.045) scaleY(.955); }   /* anticipation (s'accroupit) */
  64% { transform:translateY(-13px) scaleX(.96)   scaleY(1.06); }   /* envol (s'étire) */
  76% { transform:translateY(0)     scaleX(1.05)  scaleY(.95); }    /* atterrit (léger écrase) */
  85% { transform:translateY(0)     scaleX(.99)   scaleY(1.02); }   /* rebond doux */
  92% { transform:translateY(0)     scale(1); }
}
/* RÉACTIONS au clic — UNE par jeu (toutes différentes), super mignonnes, squash & stretch soigné */
.mascot.cheerJump { animation:cheerJump .72s cubic-bezier(.3,1.15,.4,1) both !important; }
.mascot.cheerSpin { animation:cheerSpin .76s cubic-bezier(.34,1.05,.4,1) both !important; }
.mascot.cheerWig  { animation:cheerWig  .72s ease-in-out both !important; }
.mascot.cheerPop  { animation:cheerPop  .66s cubic-bezier(.3,1.25,.45,1) both !important; }
@keyframes cheerJump {
  0%  {transform:translateY(0) scaleX(1) scaleY(1)}
  12% {transform:translateY(4px) scaleX(1.08) scaleY(.9)}        /* accroupi (anticipation) */
  40% {transform:translateY(-34px) scaleX(.92) scaleY(1.12)}     /* envol étiré */
  62% {transform:translateY(0) scaleX(1.1) scaleY(.9)}           /* atterrissage écrasé */
  80% {transform:translateY(0) scaleX(.97) scaleY(1.04)}         /* rebond */
  100%{transform:translateY(0) scale(1)}
}
@keyframes cheerSpin {
  0%  {transform:rotate(0) scale(1)}
  14% {transform:rotate(-12deg) scale(1.05)}                     /* petit élan inverse */
  60% {transform:rotate(383deg) scale(1.12)}                     /* tour + léger dépassement */
  100%{transform:rotate(360deg) scale(1)}
}
@keyframes cheerWig {
  0%,100%{transform:rotate(0) translateY(0) scale(1)}
  14% {transform:rotate(-13deg) translateY(-4px) scale(1.05)}
  36% {transform:rotate(12deg)  translateY(-7px) scale(1.06)}
  58% {transform:rotate(-9deg)  translateY(-3px) scale(1.04)}
  80% {transform:rotate(5deg)   translateY(0)    scale(1.02)}
}
@keyframes cheerPop {
  0%  {transform:scaleX(1) scaleY(1) translateY(0)}
  20% {transform:scaleX(1.14) scaleY(.84) translateY(3px)}       /* squash (se ramasse) */
  46% {transform:scaleX(.9) scaleY(1.16) translateY(-12px)}      /* pop étiré vers le haut */
  70% {transform:scaleX(1.07) scaleY(.95) translateY(0)}         /* retombe (léger écrase) */
  88% {transform:scaleX(.98) scaleY(1.03) translateY(0)}
  100%{transform:scale(1) translateY(0)}
}
/* visage qui rayonne de joie pendant la réaction — DOUX et tenu (yeux contents, pas un clignement sec) */
.mascot.joy .m-eye   { animation:eyeJoy .9s ease-in-out both; }
@keyframes eyeJoy   { 0%,100%{transform:scaleY(1)} 32%,62%{transform:scaleY(.55) translateY(-1px)} }
.mascot.joy .m-cheek { animation:cheekJoy .9s ease-in-out both; }
@keyframes cheekJoy { 0%,100%{opacity:.55; transform:scale(1)} 32%,62%{opacity:.9; transform:scale(1.2)} }
.mascot.joy .m-smile { animation:smileJoy .9s ease-in-out both; }
@keyframes smileJoy { 0%,100%{transform:translateX(-50%) scaleY(1)} 46%{transform:translateX(-50%) scaleY(1.38)} }
/* CLIN D'ŒIL (réaction du Rubik) : un œil se ferme DOUCEMENT et se rouvre — malicieux et mignon */
.mascot.wink .m-eye.right { animation:winkEye .95s ease-in-out both; transform-origin:center; }
@keyframes winkEye { 0%,100%{transform:scaleY(1)} 30%,58%{transform:scaleY(.2)} }
.mascot.wink .m-cheek { animation:cheekJoy .95s ease-in-out both; }
.mascot.wink .m-smile { animation:smileJoy .95s ease-in-out both; }

/* === SOLEIL façon Nintendo Switch : rayons qui s'allument/s'éteignent AU HASARD, avec un
   espace de respiration autour du soleil, fondus dans le ciel (ni oursin, ni rotation).
   Chaque rayon (.m-rays i) a son angle/longueur/timing -> scintillement organique. */
.m-rays { position:absolute; inset:0; pointer-events:none; }
@property --p { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.m-rays i {
  position:absolute; left:50%; top:50%;
  width:5px; height:var(--len,26px);              /* fin (moins gras) */
  filter:blur(.35px);
  background:linear-gradient(to top, rgba(255,208,76,1), rgba(255,224,116,.7) 50%, rgba(255,240,170,0));
  clip-path:polygon(50% 0, 100% 100%, 0 100%);    /* triangle POINTU vers l'extérieur (rayon réel) */
  /* extinction DOUCE de la base (près du soleil) vers la pointe : un masque efface progressivement
     depuis le bas (base) vers le haut (pointe). --p animé via @property. */
  --p:0%;
  -webkit-mask:linear-gradient(to top, transparent calc(var(--p) - 16%), #000 var(--p));
          mask:linear-gradient(to top, transparent calc(var(--p) - 16%), #000 var(--p));
  /* base ancrée près du soleil ; le rayon ÉMANE d'un point (scaleY 0) puis grandit en trait (origine = base). */
  transform-origin:50% 100%;
  transform:translate(-50%,-100%) rotate(var(--a)) translateY(calc(-1 * var(--base,82px))) scaleY(0);
  opacity:0;
  animation:rayShine var(--dur,5s) cubic-bezier(.16,.7,.26,1) var(--d,0s) infinite;
}
@keyframes rayShine {
  0%   { opacity:0;             --p:0%;   transform:translate(-50%,-100%) rotate(var(--a)) translateY(calc(-1 * var(--base,82px))) scaleY(0); }
  16%  { opacity:var(--max,.55); }
  50%  { opacity:var(--max,.55); --p:0%;   transform:translate(-50%,-100%) rotate(var(--a)) translateY(calc(-1 * var(--base,82px))) scaleY(1); }
  64%  { opacity:var(--max,.55); --p:0%;   transform:translate(-50%,-100%) rotate(var(--a)) translateY(calc(-1 * var(--base,82px))) scaleY(1); }
  88%  { opacity:var(--max,.55); }
  100% { opacity:0;             --p:116%; transform:translate(-50%,-100%) rotate(var(--a)) translateY(calc(-1 * var(--base,82px))) scaleY(1); }
}
/* Piano du menu : touches pilotées en JS (classe .on) pour rejouer une vraie mélodie.
   Attaque RAPIDE + relâche DOUX (toucher de piano), accent qui s'allume. */
.pianoicon .pk { transform-box:fill-box; transform-origin:50% 100%; transition:transform .28s ease; }
.pianoicon .pk.on { transform:translateY(7px); transition:transform .07s ease-out; }
.pianoicon .pacc { transition:opacity .3s ease, filter .3s ease; }
.pianoicon .pk.on .pacc { opacity:1; filter:brightness(1.45) saturate(1.2); transition:opacity .07s ease, filter .07s ease; }
/* halo chaud très léger qui respire (le « brille » de fond, discret) */
.mascot::after {
  content:""; position:absolute; inset:-14%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,221,120,0) 50%, rgba(255,213,90,.2) 58%, rgba(255,201,54,0) 74%);
  animation:sunGlowSoft 5s ease-in-out infinite;
}
@keyframes sunGlowSoft { 0%,100%{opacity:.4} 50%{opacity:.85} }

.splash-eye, .m-eye {
  position:absolute; top:40%; width:13%; height:16%;
  background:var(--ink); border-radius:50%;
  animation:blink 4.5s infinite;
}
.splash-eye.left, .m-eye.left { left:28%; }
.splash-eye.right, .m-eye.right { right:28%; }
@keyframes blink {
  0%,92%,100%{transform:scaleY(1)} 95%{transform:scaleY(.1)}
}
.splash-cheek, .m-cheek {
  position:absolute; top:56%; width:16%; height:11%;
  background:rgba(255,120,110,.55); border-radius:50%;
}
.splash-cheek.left, .m-cheek.left { left:18%; }
.splash-cheek.right, .m-cheek.right { right:18%; }
/* sourire : un cadre dont seul le bord bas est visible + coins arrondis = un grand sourire */
.splash-smile, .m-smile {
  position:absolute; left:50%; top:50%; transform:translateX(-50%);
  width:36%; height:24%;
  border:0 solid var(--ink); border-radius:0 0 80px 80px;
}
.m-smile { border-bottom-width:6px; }
.splash-smile { border-bottom-width:11px; }

/* ============================= BARRE DU HAUT ============================= */
.topbar {
  position:fixed; top:0; left:0; right:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(var(--sat) + 8px) calc(14px + env(safe-area-inset-right)) 8px calc(14px + env(safe-area-inset-left));
}
.topbar-title { font-weight:700; font-size:5vw; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.2); }
/* boutons du haut : icônes propres, sans fond, juste une ombre douce pour la lisibilité */
/* pastille de VERRE premium : flou léger + fin liseré clair qui RESPIRE doucement (clignotement discret) */
.iconbtn {
  width:54px; height:54px; font-size:28px;
  display:grid; place-items:center; position:relative; border-radius:50%;
  background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  box-shadow:0 4px 14px rgba(0,0,0,.15), inset 0 0 0 1.5px rgba(255,255,255,.5);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.22));
  transition:transform .12s ease;
  /* le verre RESPIRE (halo) mais NE BOUGE PLUS de place : une cible immobile = toucher fiable.
     touch-action + tap-highlight : pas de délai ni de geste parasite au tap (surtout iOS/paysage). */
  animation:btnHalo 2.8s ease-in-out infinite;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent; cursor:pointer;
}
/* zone tactile ÉLARGIE (invisible) -> pardonne l'imprécision du doigt, plus besoin de viser pile */
.iconbtn::after { content:""; position:absolute; inset:-13px; border-radius:50%; }
@keyframes btnHalo {
  0%,100% { box-shadow:0 4px 14px rgba(0,0,0,.15), inset 0 0 0 1.5px rgba(255,255,255,.5); }
  50%     { box-shadow:0 5px 17px rgba(0,0,0,.17), inset 0 0 0 2px rgba(255,255,255,.85), 0 0 13px rgba(255,255,255,.32); }
}
.iconbtn:active { transform:scale(.86); }   /* retour visuel au press */
.iconbtn.gear { font-size:24px; }
.iconbtn.gear.holding { animation:none; box-shadow:0 4px 14px rgba(0,0,0,.15), inset 0 0 0 1.5px rgba(255,255,255,.5); }
/* bouton Accueil : un peu plus grand, même verre premium, halo désynchronisé */
.iconbtn.home { width:64px; height:64px; font-size:38px; flex:0 0 auto; animation-delay:-1.3s; }
/* anneau de progression pendant l'appui long sur l'engrenage */
.gear-ring {
  position:absolute; inset:-4px; border-radius:50%;
  border:4px solid transparent;
}
.gear.holding .gear-ring {
  border-top-color:#fff; border-right-color:#fff;
  animation:spinring 1.1s linear forwards;
}
@keyframes spinring { from{transform:rotate(0)} to{transform:rotate(720deg)} }

/* ================================ SCÈNE ================================= */
.stage {
  position:fixed; inset:0; z-index:10;
  /* zones sûres gauche/droite incluses -> en PAYSAGE le contenu évite l'encoche (insets = 0 en portrait) */
  padding:calc(var(--sat) + 70px) calc(16px + env(safe-area-inset-right)) calc(var(--sab) + 16px) calc(16px + env(safe-area-inset-left));
  display:flex; flex-direction:column;
}
.stage.enter { animation:stageIn .5s cubic-bezier(.22,.7,.24,1); }
@keyframes stageIn { from{opacity:0; transform:scale(.975)} to{opacity:1; transform:scale(1)} }
/* fondu de SORTIE rapide de la scène en cours -> crossfade doux entre pages */
.stage.leaving { opacity:0; transform:scale(.99); transition:opacity .17s ease, transform .17s ease; }

/* canvas plein cadre (bulles) : occupe toute la scène, derrière la barre */
.fullcanvas { position:absolute; inset:0; width:100%; height:100%; }

/* ============================== ACCUEIL ================================= */
.home { flex:1; display:flex; flex-direction:column; gap:10px; min-height:0; }
.home-head { display:flex; flex-direction:column; align-items:center; margin-top:clamp(2px, 1vh, 14px); }
/* titre placé EXACTEMENT au milieu de l'espace entre le soleil et les boutons */
.home-hello {
  flex:.5; min-height:0; display:grid; place-items:center;
  padding-top:clamp(6px, 2.5vh, 24px);   /* descend un peu le titre (s'éloigne des nuages) */
  font-weight:600; font-size:6vw; color:#fff; text-shadow:0 3px 8px rgba(0,0,0,.16);
}
.home-hello-inner { display:inline-block; white-space:nowrap; }
/* chaque lettre (latin) ou mot (arabe) entre en TOURNOYANT façon logo Dreamcast ; le délai croît
   avec l'index -> révélation dans le sens de lecture (gauche→droite en latin, droite→gauche en arabe). */
.hello-unit {
  display:inline-block; white-space:pre;
  /* entrée tournoyante (1×) PUIS vague douce en BOUCLE (façon Dreamcast), avec un petit lapse de repos */
  animation:
    letterIn .85s calc(.45s + var(--i,0) * .085s) both cubic-bezier(.22,1.25,.35,1),
    helloWave 3.4s calc(2s + var(--i,0) * .1s) ease-in-out infinite;
}
/* vague délicate qui ondule lettre par lettre, en fondu, puis se repose (le temps du choix) */
@keyframes helloWave {
  0%, 62%, 100% { transform:translateY(0) scale(1); opacity:.9; }
  76% { transform:translateY(-6px) scale(1.1); opacity:1; }
  88% { transform:translateY(0) scale(1); opacity:.9; }
}
/* « pim » du splash : même entrée tournoyante Dreamcast, douce et fluide */
.splash-letter { display:inline-block; animation:letterIn .9s both cubic-bezier(.22,1.25,.35,1); }
.splash-letter:nth-child(1) { animation-delay:.2s; }
.splash-letter:nth-child(2) { animation-delay:.42s; }
.splash-letter:nth-child(3) { animation-delay:.64s; }
@keyframes letterIn {
  0%   { opacity:0; transform:scale(.1) rotate(-150deg); }
  60%  { opacity:1; transform:scale(1.14) rotate(9deg); }
  100% { opacity:1; transform:scale(1) rotate(0); }
}
.menu {
  display:grid; gap:5.5vw;                              /* bloc de boutons (remonté) */
  grid-template-columns:1fr 1fr; grid-auto-rows:auto;   /* 4 boutons CARRÉS identiques (2×2) */
  justify-content:center; align-self:center;
  width:min(80vw, 340px);                               /* GROS boutons (18 mois+), bloc centré */
}
/* espace sous les boutons : les remonte ; le titre reste centré entre le soleil et eux */
.home-foot { flex:1.1; min-height:0; }
.card {
  position:relative; aspect-ratio:1; border-radius:32%;   /* squircle prononcé façon icône Android (pas un cercle : garde le cube/piano entiers) */
  background:radial-gradient(125% 125% at 30% 20%, color-mix(in srgb, var(--c) 68%, #fff), var(--c) 72%);
  box-shadow:0 16px 30px -10px color-mix(in srgb, var(--c) 55%, #000 45%), 0 6px 14px rgba(0,0,0,.10);
  display:grid; place-items:center; color:#fff; padding:6px;
  animation:cardIn .5s both cubic-bezier(.2,1.3,.5,1); animation-delay:var(--d);
}
/* voile brillant en haut (finition premium) — coins arrondis sans rogner les emojis */
.card::before, .tile::before {
  content:""; position:absolute; top:0; left:0; right:0; height:42%;
  border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.28), transparent);
  pointer-events:none;
}
.card-emoji { font-size:20vw; line-height:1.1; filter:drop-shadow(0 4px 4px rgba(0,0,0,.22)); }
.card-label { display:none; }
.card.pressed { animation:cardPop .5s cubic-bezier(.33,1,.5,1); will-change:transform; }
@keyframes cardPop {
  0%   { transform:scale(1); }
  34%  { transform:scale(.92); }
  68%  { transform:scale(1.035); }
  100% { transform:scale(1); }
}
/* carte pleine largeur (jeu vedette) : clôt le menu sur une grande tuile */
.card.wide { grid-column:1 / -1; overflow:hidden; }
.card.wide .card-emoji { font-size:16vh; }
/* carte à icône pleine : on clippe aux coins arrondis (l'icône déborde le cadre) */
.card.fill { overflow:hidden; }
/* icône Bulles : chaque bulle flotte doucement (montée), durée/délai variés -> organique */
.bubicon { display:block; }
.bubic-b { animation-name:bubFloat; animation-timing-function:ease-in-out; animation-iteration-count:infinite; }
@keyframes bubFloat { 0%,100%{transform:translateY(3px)} 50%{transform:translateY(-7px)} }
/* icône PLEIN CADRE (grappe de ballons) : couvre tout le bouton */
/* marge interne réduite de moitié -> icônes bien plus grandes (juste un liseré de propreté) */
.card-fill { position:absolute; inset:2.5%; z-index:0; }
/* PAS de filter:drop-shadow ici : sur iOS Safari, un SVG animé + drop-shadow laisse une « ombre
   carrée » fantôme qui suit les ballons. Le volume vient déjà des dégradés. */
.card-fill svg { width:100%; height:100%; display:block; }
@keyframes cardIn { from{opacity:0; transform:translateY(26px) scale(.8)} to{opacity:1; transform:none} }

/* ===================== GRILLE DE TUILES (animaux / formes) ============== */
.tilegrid {
  flex:1; display:grid; gap:14px; min-height:0;
  grid-template-columns:1fr 1fr; grid-auto-rows:1fr;
}
.tile {
  border-radius:28px; position:relative;
  background:linear-gradient(180deg, color-mix(in srgb, var(--c) 80%, #fff), var(--c));
  box-shadow:0 8px 0 color-mix(in srgb, var(--c) 65%, #000 35%), 0 12px 22px rgba(0,0,0,.18);
  display:grid; place-items:center;
  animation:cardIn .5s both cubic-bezier(.2,1.3,.5,1); animation-delay:var(--d);
}
.tile-emoji { font-size:17vw; line-height:1.15; filter:drop-shadow(0 3px 2px rgba(0,0,0,.2)); }
.tile.bounce { animation:squash .42s ease; }
.tile.shape { background:linear-gradient(180deg,#ffffff,#eef4ff); }
.shape-svg { width:46%; height:46%; filter:drop-shadow(0 4px 3px rgba(0,0,0,.18)); }

@keyframes squash {
  0%{transform:scale(1)} 28%{transform:scale(1.16,.82)}
  55%{transform:scale(.9,1.12)} 78%{transform:scale(1.04,.97)} 100%{transform:scale(1)}
}

/* ============================== CHIFFRES ================================ */
.numbers { flex:1; display:flex; flex-direction:column; gap:14px; min-height:0; }
.num-area {
  position:relative; flex:1; min-height:0; border-radius:28px; overflow:hidden;
  background:rgba(255,255,255,.55); box-shadow:inset 0 4px 16px rgba(0,0,0,.08);
  display:flex; flex-wrap:wrap; align-content:center; justify-content:center;
  gap:8px; padding:14px;
}
.num-big {
  position:absolute; inset:0; display:grid; place-items:center; z-index:0; pointer-events:none;
  font-size:46vh; font-weight:700; line-height:1; color:rgba(120,160,210,.22);
  animation:popin .5s both cubic-bezier(.2,1.5,.4,1);
}
.num-obj { position:relative; z-index:1; font-size:14vw; line-height:1; animation:popin .4s both cubic-bezier(.2,1.6,.4,1); }
.num-obj.tapped { animation:squash .4s ease; }
@keyframes popin { from{transform:scale(0)} 70%{transform:scale(1.25)} to{transform:scale(1)} }
.num-pad { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.num-btn {
  aspect-ratio:1; border-radius:24px; font-size:9vw; font-weight:700; color:#fff;
  background:linear-gradient(180deg, color-mix(in srgb, var(--c) 80%, #fff), var(--c));
  box-shadow:0 7px 0 color-mix(in srgb, var(--c) 65%, #000 35%), 0 10px 18px rgba(0,0,0,.18);
  text-shadow:0 2px 3px rgba(0,0,0,.2);
}
.num-btn.pressed { animation:squash .3s ease; }

/* =============================== MUSIQUE (vrai piano) ================= */
/* ===== MINI-SYNTHÉ : corps sombre glossy + écran LCD + pads + clavier ===== */
.piano {
  position:relative; width:100%; height:100%; flex:1; align-self:stretch;
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:18px;
  background:linear-gradient(180deg,#f7e7cf 0%, #eccfa6 55%, #e3c089 100%);   /* bois clair chaleureux (fini le sombre) */
  box-shadow:0 16px 38px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.5);
  animation:stageIn .3s ease;
}
/* panneau du haut (façade du synthé) */
.synth-top {
  flex:0 0 auto;
  padding:11px calc(11px + env(safe-area-inset-right)) 13px calc(11px + env(safe-area-inset-left));
  background:linear-gradient(180deg,#efd6ab,#e3c089);
  border-bottom:2px solid #c79a5e;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 3px 8px rgba(0,0,0,.18);
  display:flex; flex-direction:column; gap:10px;
}
/* barre du synthé : 🏠 fondu · écran · ⚙️ fondu (zone non-jouable) */
.synth-bar { display:flex; align-items:center; gap:9px; }
/* Home / ⚙️ : MÊME pastille de verre ronde que les autres fenêtres (harmonie) */
.synth-btn {
  flex:0 0 auto; width:54px; height:54px; border-radius:50%; font-size:27px; color:#fff;
  display:grid; place-items:center; position:relative;
  background:rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  box-shadow:0 4px 14px rgba(0,0,0,.22), inset 0 0 0 1.5px rgba(255,255,255,.55);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.22));
  transition:transform .12s ease; touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.synth-btn:active { transform:scale(.86); }
.synth-btn.gear.holding { box-shadow:0 0 0 3px #ffd24c, 0 0 12px rgba(255,210,76,.5), inset 0 0 0 1.5px rgba(255,255,255,.55); }
/* écran LCD vert lumineux */
/* plus de barre noire : juste le TITRE sur le bois, effet premium (brun élégant + léger embossage) */
.synth-screen {
  flex:1; min-width:0; position:relative;
  display:flex; justify-content:center; align-items:center; gap:10px;
  padding:4px 56px; font-family:var(--font);
}
.synth-screen-name {
  font-weight:700; font-size:24px; color:#fffdf8; letter-spacing:.4px;
  text-shadow:0 1px 3px rgba(90,60,20,.5), 0 1px 0 rgba(0,0,0,.12);   /* clair + lisible sur le bois */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.synth-screen-prog { position:absolute; right:14px; top:50%; transform:translateY(-50%); font-weight:700; font-size:16px; color:#fff3e2; text-shadow:0 1px 2px rgba(90,60,20,.5); font-variant-numeric:tabular-nums; white-space:nowrap; }
/* pads de chansons (presets du synthé) — GRILLE régulière 6×2 : symétrique, structuré (piano enfant) */
.synth-songs { display:grid; grid-template-columns:repeat(6, 1fr); gap:8px; }
.song-pad {
  padding:10px 8px; border-radius:13px; white-space:nowrap; text-align:center;
  overflow:hidden; text-overflow:ellipsis;
  font-weight:600; font-size:14px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.4);
  background:linear-gradient(180deg, color-mix(in srgb, var(--pc,#3c4150) 82%, #fff 18%), var(--pc,#3c4150));
  box-shadow:0 2px 0 color-mix(in srgb, var(--pc,#14161d) 55%, #000 45%), inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .08s ease, filter .12s ease;
}
.song-pad:active { transform:translateY(2px); }
/* chanson SÉLECTIONNÉE : éclat dans sa propre couleur + anneau blanc -> claire à repérer */
.song-pad.active {
  filter:brightness(1.08) saturate(1.05);
  box-shadow:0 2px 0 color-mix(in srgb, var(--pc) 55%, #000 45%), 0 0 16px color-mix(in srgb, var(--pc) 75%, transparent), inset 0 0 0 2px rgba(255,255,255,.85);
}

/* clavier : remplit la hauteur restante -> touches grandes mais équilibrées.
   Feutrine rouge en haut (détail de vrai piano) : raccourcit un peu les touches + plus clean. */
.piano-keys {
  position:relative; flex:1; min-height:0;
  border-top:11px solid #b1273a;
  box-shadow:inset 0 8px 9px -7px rgba(0,0,0,.55);
}
.piano-whites { display:flex; height:100%; gap:2px; background:#0c0d12; padding:3px; }
.wkey {
  position:relative; flex:1;
  background:linear-gradient(180deg,#ffffff 0%,#f2f5f9 76%,#e1e6ee 100%);
  border-radius:0 0 12px 12px;
  box-shadow:inset 0 -12px 16px -10px rgba(20,30,60,.22), inset 0 2px 0 #fff, 0 2px 3px rgba(0,0,0,.22);
  transition:transform .16s cubic-bezier(.2,.7,.3,1), background .2s ease;   /* RELÂCHE doux */
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:13px;
}
.wkey-label { font-size:13px; font-weight:700; color:#aeb6c4; pointer-events:none; }
.wkey.hit { background:linear-gradient(180deg, color-mix(in srgb, var(--c) 42%, #fff), #ffffff); transform:translateY(4px); transition:transform .04s ease-out, background .05s ease-out; }   /* ATTAQUE rapide */
.wkey.hit .wkey-label { color:var(--c); }
/* GUIDE : la prochaine touche pulse dans sa couleur + chevron ▼ */
/* la touche à jouer est CLAIREMENT mise en valeur : remplie de sa couleur + anneau pulsé marqué */
.wkey.guide {
  background:linear-gradient(180deg, color-mix(in srgb, var(--c) 62%, #fff), color-mix(in srgb, var(--c) 26%, #fff));
  animation:keyGuide .85s ease-in-out infinite;
}
.wkey.guide .wkey-label { color:#fff; font-size:15px; text-shadow:0 1px 3px rgba(0,0,0,.28); }
/* flèche EN BAS, juste au-dessus du nom de la note (espace de respiration) */
.wkey.guide::before {
  content:"▼"; position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
  color:#fff; font-size:20px; font-weight:900;
  text-shadow:0 0 9px color-mix(in srgb, var(--c) 80%, #000), 0 1px 2px rgba(0,0,0,.35);
  animation:guideArrow .85s ease-in-out infinite;
}
@keyframes keyGuide {
  0%,100% { box-shadow:inset 0 0 0 2px var(--c), 0 0 10px color-mix(in srgb, var(--c) 45%, transparent), inset 0 -12px 16px -10px rgba(20,30,60,.22); }
  50%     { box-shadow:inset 0 0 0 5px var(--c), 0 0 26px color-mix(in srgb, var(--c) 80%, transparent), inset 0 -12px 16px -10px rgba(20,30,60,.22); }
}
@keyframes guideArrow { 0%,100%{transform:translateX(-50%) translateY(0); opacity:.85} 50%{transform:translateX(-50%) translateY(5px); opacity:1} }

.piano-blacks { position:absolute; top:0; left:0; right:0; height:58%; pointer-events:none; }
.bkey {
  position:absolute; top:0; width:8%; height:100%;
  background:linear-gradient(180deg,#3a3a42,#0d0d10);
  border-radius:0 0 7px 7px;
  box-shadow:0 5px 8px rgba(0,0,0,.5), inset 0 -3px 0 rgba(255,255,255,.1);
  pointer-events:auto; transition:transform .16s cubic-bezier(.2,.7,.3,1), background .18s ease;   /* RELÂCHE doux */
}
.bkey.hit { background:linear-gradient(180deg,#6a6a76,#222); transform:translateY(4px); transition:transform .04s ease-out, background .05s ease-out; }   /* ATTAQUE rapide */

/* PIANO PLEIN ÉCRAN : barre du haut globale masquée, scène sans marges (ses 🏠/⚙️ sont intégrés) */
body.full-scene #topbar { display:none; }
body.full-scene .stage { padding:0; }
body.full-scene .piano { border-radius:0; }
/* TOUJOURS À L'HORIZONTALE : en portrait, on tourne le piano de 90° -> clavier large, grandes touches */
@media (orientation: portrait) {
  body.full-scene .piano {
    position:absolute; left:50%; top:50%;
    /* PLEIN ÉCRAN TOTAL : occupe tout (les zones sûres sont gérées par le padding interne) */
    width:100vh; height:100vw;
    width:100dvh; height:100dvw;
    transform:translate(-50%, -50%) rotate(90deg);
    animation:none;   /* sinon le scale de stageIn écraserait la rotation */
  }
}

/* =============================== CANVAS FX ============================== */
#fxcanvas { position:fixed; inset:0; z-index:40; pointer-events:none; }

/* ============================ ESPACE PARENTS =========================== */
.modal-overlay {
  position:fixed; inset:0; z-index:60; display:grid; place-items:center;
  background:rgba(0,0,0,.45); opacity:0; transition:opacity .25s ease; padding:24px;
}
.modal-overlay.show { opacity:1; }
.modal {
  width:min(400px,90vw); max-height:calc(100vh - 48px); overflow-y:auto;
  background:#fff; border-radius:28px; padding:22px 20px;
  box-shadow:0 24px 60px rgba(0,0,0,.38); transform:translateY(20px) scale(.96);
  transition:transform .25s cubic-bezier(.2,1.3,.5,1);
  display:flex; flex-direction:column; gap:16px; text-align:center;
}
.modal-overlay.show .modal { transform:none; }
.modal-head { display:flex; flex-direction:column; align-items:center; gap:2px; }
.modal-title { margin:0; font-size:22px; font-weight:700; }
/* chaque réglage est une section : libellé discret + contenu */
.modal-section { display:flex; flex-direction:column; gap:10px; }
.modal-row {
  display:flex; justify-content:space-between; align-items:center;
  background:#f3f5f9; border-radius:16px; padding:14px 18px; font-weight:600; font-size:17px;
}
.modal-val { font-weight:700; color:var(--bleu); }
/* interrupteur façon iOS, harmonisé au thème (vert = activé, comme le « vert » de l'app) */
.ios-switch {
  position:relative; flex:0 0 auto; width:52px; height:31px; border-radius:16px;
  background:#d3d8e0; transition:background .24s ease; box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
}
.ios-switch.on { background:linear-gradient(180deg, var(--vert), #1faa57); }
.ios-knob {
  position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%;
  background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.28), 0 0 1px rgba(0,0,0,.2);
  transition:transform .26s cubic-bezier(.3,1.4,.5,1);
}
.ios-switch.on .ios-knob { transform:translateX(21px); }
/* groupe de réglages : une seule carte, lignes séparées par un filet (plus clean) */
.modal-group { background:#f4f6fa; border-radius:20px; overflow:hidden; box-shadow:inset 0 0 0 1px #ebeef6; }
/* lignes-interrupteurs : bien AÉRÉES (respiration), titre à gauche, switch à droite */
.modal-row.flat {
  cursor:pointer; background:transparent; border-radius:0;
  padding:17px 16px 17px 20px; gap:14px; transition:background .15s ease;
}
.modal-row.flat:active { background:#eaeef5; }
.modal-row.flat > span:first-child {
  flex:1; text-align:left; font-size:16.5px; font-weight:600;
  letter-spacing:.005em; color:var(--ink); line-height:1.25;
}
.modal-group > .modal-row.flat + .modal-row.flat {
  box-shadow:inset 0 1px 0 #e6eaf1;            /* filet net qui ne décale pas la hauteur */
}
.modal-hint { margin:2px 2px 0; font-size:13px; color:#7b8494; line-height:1.5; }
.modal-credit { margin:0; font-size:11px; color:#aab1bd; }
/* lien Confidentialité : pastille discrète et nette (au lieu d'un lien bleu souligné brut) */
.modal-privacy {
  font-size:13px; font-weight:600; color:#7b8494; text-decoration:none;
  padding:8px 18px; border-radius:999px; background:#f3f5f9;
  box-shadow:inset 0 0 0 1px #e7ebf2;
  transition:background .15s ease, color .15s ease, transform .1s ease;
}
.modal-privacy:hover { color:var(--bleu); }
.modal-privacy:active { transform:scale(.96); background:#eaeef5; color:var(--bleu); }
.modal-close {
  margin-top:8px;                                /* air avant l'action principale */
  background:var(--bleu); color:#fff; font-weight:700; font-size:18px;
  border-radius:16px; padding:15px; box-shadow:0 6px 0 #2f73c9;
}
.modal-close:active { transform:translateY(3px); box-shadow:0 3px 0 #2f73c9; }
/* pied : crédit + logo IDX (noir), centrés sous un filet — bien aéré (respiration) */
.modal-foot {
  margin-top:8px; padding:20px 0 8px; border-top:1px solid #eef0f4;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
/* logo IDX cliquable (-> idxdz.com) : centré, délicat */
.modal-brand { display:inline-block; line-height:0; opacity:.92; transition:transform .1s ease, opacity .15s ease; }
.modal-brand:active { transform:scale(.94); opacity:1; }

/* ============================== LOGO IDX =============================== */
.idx-logo { height:22px; width:auto; display:block; }
/* splash : logo blanc, délicat, centré tout en bas */
.splash-brand {
  /* position FIXE et basse (comme dans le navigateur) : on n'ajoute plus tout le --sab qui faisait
     « remonter » le logo en mode plein écran. On reste juste au-dessus du home indicator. */
  position:absolute; left:0; right:0; bottom:24px;
  display:flex; justify-content:center; color:#fff; line-height:0;
  opacity:0;
  /* fondu d'entrée doux, puis signature STABLE (la page Soleil persiste désormais :
     pas d'animation infinie -> aucun scintillement). */
  animation:brandIn 1.6s .9s both ease-out;
}
@keyframes brandIn  { from{opacity:0} to{opacity:.92} }
.splash-brand .idx-logo { height:26px; }

/* ===== PAYSAGE (téléphone à l'horizontale) : mises en page adaptées, 0 régression en portrait ===== */
@media (orientation: landscape) {
  /* Accueil : soleil + titre compacts, les 4 boutons sur UNE rangée (on profite de la largeur).
     Tout est dimensionné en vh -> rentre toujours dans la hauteur réduite du paysage. */
  .home { justify-content:center; gap:1.6vh; padding:1vh 2vw; }
  .mascot { width:15vh; height:15vh; max-width:118px; max-height:118px; }
  .home-hello { flex:0 0 auto; min-height:0; font-size:4.2vh; }
  .menu { grid-template-columns:repeat(4, 27vh); gap:2vh; }
  .card { aspect-ratio:auto; width:27vh; height:27vh; }
  .card-emoji { font-size:15vh; }
  .home-foot { display:none; }

  /* Splash (page soleil) : compact + on REMONTE le bloc soleil+pim (padding bas) -> de l'air entre
     « pim » et le logo IDX. */
  .splash { padding-bottom:9vh; }
  .splash-sun { width:30vh; height:30vh; }
  .splash-name { font-size:10vh; }
}

/* =============================== DIVERS ================================ */
@media (min-width:520px) {
  .card-emoji{font-size:64px} .card-label{font-size:20px}
  .tile-emoji{font-size:90px} .home-hello{font-size:30px}
  .num-obj{font-size:64px} .num-btn{font-size:40px}
  .splash-sub{font-size:22px} .topbar-title{font-size:22px}
}
@media (prefers-reduced-motion: reduce) {
  *, *::before { animation-duration:.001s !important; }
}

/* ====================== SÉLECTEUR DE LANGUE (parents) =================== */
.modal-label { font-weight:700; font-size:12.5px; color:#9aa3b2; text-transform:uppercase; letter-spacing:.06em; padding-left:4px; text-align:left; }
.lang-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.lang-row.two { grid-template-columns:repeat(2,1fr); }
.lang-btn {
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 6px;
  border-radius:18px; background:#f3f5f9; font-weight:600; color:#555;
  border:3px solid transparent; transition:transform .08s ease, border-color .15s ease;
}
.lang-btn:active { transform:scale(.94); }
.lang-btn.active { border-color:var(--bleu); background:#eaf2ff; }
.lang-flag { font-size:28px; line-height:1; }
.lang-name { font-size:13px; }

/* ============================== CUBE 3D =============================== */
.cube-scene { flex:1; display:grid; place-items:center; perspective:1100px; min-height:0; touch-action:none; position:relative; }
/* le cube est un point au centre ; les 26 cubies sont positionnés autour */
.cube {
  --s:min(64vw, 50vh); --cs:calc(var(--s) / 3);
  position:relative; width:0; height:0; transform-style:preserve-3d; will-change:transform;
}
.cubie {
  position:absolute; left:calc(var(--cs) / -2); top:calc(var(--cs) / -2);
  width:var(--cs); height:var(--cs); transform-style:preserve-3d;
}
.cubie-face {
  position:absolute; inset:0; box-sizing:border-box;
  border:3px solid #0b0b0e; border-radius:11px; background:#141418;
}
.cubie-face.lit {
  background:var(--col);                       /* couleur franche et nette */
  box-shadow:inset 0 2px 3px rgba(255,255,255,.16), inset 0 -3px 5px rgba(0,0,0,.12);
}
.cf-F { transform:translateZ(calc(var(--cs) / 2)); }
.cf-B { transform:rotateY(180deg) translateZ(calc(var(--cs) / 2)); }
.cf-R { transform:rotateY(90deg)  translateZ(calc(var(--cs) / 2)); }
.cf-L { transform:rotateY(-90deg) translateZ(calc(var(--cs) / 2)); }
.cf-U { transform:rotateX(90deg)  translateZ(calc(var(--cs) / 2)); }
.cf-D { transform:rotateX(-90deg) translateZ(calc(var(--cs) / 2)); }
.card-emoji svg { display:block; }

/* ===================== MINI CUBE DU JEU (icône animée du bouton) ===================== */
/* Réutilise exactement le style des cubies du jeu (.cube/.cubie/.cubie-face), en plus petit,
   défait, qui tourne tout seul dans le bouton. */
.rubik-mini { position:absolute; inset:0; display:grid; place-items:center; perspective:600px; }
.cube.mini {
  /* GRAND ; la diagonale de rotation (~1,73×) remplit la zone élargie sans rogner */
  --s:clamp(52px, 19.5vw, 80px); --cs:calc(var(--s) / 3);
  animation:rubikTumble 16s linear infinite;
}
.cube.mini .cubie-face { border-width:2px; border-radius:5px; }   /* bords plus fins à petite échelle */
/* rotation libre multi-axes -> il « tourne dans l'espace » sans répétition évidente */
@keyframes rubikTumble {
  0%   { transform:rotateX(-24deg) rotateY(0deg)   rotateZ(0deg); }
  25%  { transform:rotateX(12deg)  rotateY(95deg)  rotateZ(-7deg); }
  50%  { transform:rotateX(-28deg) rotateY(185deg) rotateZ(5deg); }
  75%  { transform:rotateX(8deg)   rotateY(272deg) rotateZ(-4deg); }
  100% { transform:rotateX(-24deg) rotateY(360deg) rotateZ(0deg); }
}

/* démo auto du cube : bouton discret, fondu dans la fenêtre (s'allume en bleu quand actif) */
.cube-auto {
  position:absolute; right:14px; bottom:14px; z-index:6; padding:0;
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:rgba(255,255,255,.14); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  box-shadow:0 2px 10px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.28);
  opacity:.4; transition:opacity .2s ease, background .25s ease, transform .1s ease, box-shadow .25s ease;
}
.cube-auto:active { transform:scale(.9); }
.cube-auto.on {
  opacity:1; background:rgba(79,156,249,.9);
  box-shadow:0 4px 16px rgba(79,156,249,.5), inset 0 0 0 1px rgba(255,255,255,.4);
}
.cube-auto svg { display:block; }
.cube-auto.on svg { animation:spin 3.2s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes orbitFlash { 0%{filter:brightness(1.35)} 100%{filter:brightness(1)} }
.cube.orbit-flash { animation:orbitFlash .28s ease; }

/* PAYSAGE — placé APRÈS les règles de base du cube pour bien les surcharger (sinon la base, définie
   plus bas, les écrasait et le cube restait tronqué). On réduit pour laisser la marge à la rotation 3D. */
@media (orientation: landscape) {
  .cube { --s:min(58vw, 34vh); }                /* cube du jeu : tient dans la hauteur réduite */
  .cube.mini { --s:clamp(36px, 14vh, 90px); }   /* mini-cube : grand, rotation tient dans la zone */
}

/* overlay SOLEIL : reproduit FIDÈLEMENT l'écran de démarrage (ciel + nuages + collines),
   s'ouvre depuis le menu des jeux pour ré-animer joliment le soleil. */
.sun-overlay {
  position:fixed; inset:0; z-index:55; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  background:linear-gradient(180deg,#6ec6ff 0%,#93d6ff 55%,#bce8ff 100%);
  opacity:0; transition:opacity .4s ease;
}
.sun-overlay.show { opacity:1; }
/* nuages blancs (identiques au splash : body::before) */
.sun-overlay::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 110'><g fill='white'><circle cx='55' cy='68' r='28'/><circle cx='92' cy='52' r='36'/><circle cx='132' cy='66' r='30'/><rect x='52' y='66' width='84' height='30' rx='15'/></g></svg>") 8% 14%/150px 82px no-repeat,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 110'><g fill='white'><circle cx='55' cy='68' r='28'/><circle cx='92' cy='52' r='36'/><circle cx='132' cy='66' r='30'/><rect x='52' y='66' width='84' height='30' rx='15'/></g></svg>") 78% 8%/200px 110px no-repeat,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 110'><g fill='white'><circle cx='55' cy='68' r='28'/><circle cx='92' cy='52' r='36'/><circle cx='132' cy='66' r='30'/><rect x='52' y='66' width='84' height='30' rx='15'/></g></svg>") 42% 24%/120px 66px no-repeat;
  opacity:.92;
  animation:clouds 50s linear infinite alternate;
}
/* collines vertes en bas (identiques au splash : body::after) */
.sun-overlay::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:30vh; z-index:0; pointer-events:none;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 220' preserveAspectRatio='none'><path d='M0 118 C70 58 150 58 210 100 C275 140 330 70 400 104 L400 220 L0 220 Z' fill='rgb(124,214,96)'/><path d='M0 150 C80 104 150 104 220 140 C300 178 350 110 400 146 L400 220 L0 220 Z' fill='rgb(60,176,78)'/></svg>") bottom center / 100% 100% no-repeat;
}
/* soleil, nom et logo au-dessus du décor */
.sun-overlay .splash-sun,
.sun-overlay .splash-name { position:relative; z-index:1; }
.sun-overlay .splash-brand { z-index:1; }   /* garde son position:absolute (collé en bas) */
/* nom "pim" : glisse doucement vers le haut après la pop du soleil */
.sun-overlay .splash-name { animation:nameIn .55s .55s both; }
@keyframes nameIn {
  from { opacity:0; transform:translateY(16px) scale(.9); }
  to   { opacity:1; transform:none; }
}
/* animation d'entrée soleil : pop élastique + wobble mignon puis bob continu */
@keyframes sunPop {
  0%   { transform:scale(0) rotate(-20deg); }
  30%  { transform:scale(1.38) rotate(15deg); }
  48%  { transform:scale(.84) rotate(-9deg); }
  63%  { transform:scale(1.16) rotate(5deg); }
  78%  { transform:scale(.95) rotate(-2deg); }
  90%  { transform:scale(1.06); }
  100% { transform:scale(1) rotate(0); }
}
.sun-pop { animation:sunPop 1.05s cubic-bezier(.22,.8,.4,1), bob 3s 1.05s ease-in-out infinite !important; }

/* mascot « bienvenue » : danse joyeuse à l'arrivée d'un jeu */
@keyframes mascotWelcome {
  0%   { transform:translateY(0) scale(1) rotate(0deg); }
  12%  { transform:translateY(-24px) scale(1.2) rotate(-12deg); }
  28%  { transform:translateY(-10px) scale(1.12) rotate(9deg); }
  46%  { transform:translateY(-20px) scale(1.16) rotate(-7deg); }
  62%  { transform:translateY(-6px) scale(1.08) rotate(4deg); }
  78%  { transform:translateY(-14px) scale(1.12) rotate(-3deg); }
  90%  { transform:translateY(-3px) scale(1.03); }
  100% { transform:translateY(0) scale(1) rotate(0deg); }
}
.mascot--welcome { animation:mascotWelcome 1.3s cubic-bezier(.22,.8,.4,1) !important; }
/* mascot « reprendre » : halo pulsé invite à tapoter */
@keyframes mascotGlow {
  0%,100% { box-shadow:0 0 0 10px rgba(255,210,76,.35), 0 14px 30px rgba(0,0,0,.18); }
  50%     { box-shadow:0 0 0 22px rgba(255,210,76,.55), 0 16px 44px rgba(255,183,41,.5), 0 0 56px rgba(255,210,76,.28); }
}
.mascot--resume { animation:bob 3s ease-in-out infinite, mascotGlow 1.7s ease-in-out infinite !important; cursor:pointer; }

/* célébration quand le cube est résolu : carte premium centrée + halo doux (pas de carré sombre brut).
   Le voile est ARRONDI et INSÉRÉ (marge) -> il respire et ne touche plus les icônes Accueil/Réglages. */
.celebrate {
  position:absolute; inset:14px; border-radius:28px; overflow:hidden;
  display:grid; place-items:center; z-index:5; pointer-events:none;
  opacity:0; transition:opacity .35s ease;
  background:radial-gradient(120% 80% at 50% 42%, rgba(255,255,255,.30), rgba(46,32,92,.30) 55%, rgba(20,15,42,.46));
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.celebrate.show { opacity:1; }
.celebrate-card {
  display:grid; place-items:center; gap:6px; padding:26px 40px 30px; border-radius:34px; text-align:center;
  background:linear-gradient(180deg, #ffffff, #f3f0ff);
  box-shadow:0 28px 70px rgba(50,34,110,.46), inset 0 2px 0 rgba(255,255,255,.9);
  transform:scale(.78); transition:transform .42s cubic-bezier(.2,1.4,.45,1);
}
.celebrate.show .celebrate-card { transform:scale(1); }
.celebrate-emoji { font-size:clamp(54px, 15vw, 120px); line-height:1; animation:popin .55s both cubic-bezier(.2,1.6,.4,1); filter:drop-shadow(0 6px 14px rgba(0,0,0,.16)); }
.celebrate-text { font-size:clamp(24px, 6.4vw, 46px); font-weight:800; color:#5b3fa0; line-height:1.05; }
.celebrate-sub { font-size:clamp(13px, 3.4vw, 17px); font-weight:700; color:#8a82a0; margin-top:2px; }

/* ============================== FINITIONS ============================== */
.splash-sub { animation:pulse 1.7s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:.95; transform:translateY(0)} 50%{opacity:.55; transform:translateY(3px)} }

/* RTL (arabe) : l'interface est déjà symétrique, on garde juste les textes centrés. */
[dir="rtl"] .modal { text-align:center; }

@media (min-width:520px) {
  .peek-char{font-size:88px} .peek-face{font-size:78px}
  .card-emoji{font-size:96px}
}

/* indice tactile du splash (remplace tout texte) */
.splash-hint { font-size:14vw; line-height:1; animation:tapHint 1.1s ease-in-out infinite;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.2)); }
@keyframes tapHint { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }

/* arabe : police Tajawal (embarquée, hors-ligne) */
html[dir="rtl"] { --font:"Tajawal","Geeza Pro","Noto Sans Arabic",system-ui,sans-serif; }

/* ===================== SCORE + COMBO DES BULLES ===================== */
/* RECORD (meilleur combo) EN HAUT — pastille dorée */
.bubble-best {
  position:fixed; top:calc(var(--sat) + 66px); left:50%; transform:translateX(-50%);
  z-index:25; pointer-events:none;
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 15px 5px 12px; border-radius:24px;
  font-weight:700; font-size:21px; color:#7a5200; font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg, #fff6cf, #ffd24c);
  box-shadow:0 6px 16px rgba(170,120,0,.32), inset 0 1px 0 rgba(255,255,255,.85);
}
.bubble-best > span:first-child { font-size:18px; filter:drop-shadow(0 1px 2px rgba(120,80,0,.4)); }
.bubble-best.pop { animation:bestPop .55s cubic-bezier(.2,1.4,.4,1); }
/* SCORE EN COURS — en dessous */
.bubble-score {
  position:fixed; top:calc(var(--sat) + 116px); left:50%; transform:translateX(-50%);
  z-index:25; display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.82));
  border-radius:30px; padding:7px 22px 7px 18px;
  font-weight:700; font-size:30px; color:#ff9f1f; font-variant-numeric:tabular-nums;
  box-shadow:0 8px 20px rgba(0,0,0,.15), inset 0 1.5px 0 rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.bubble-score > span:first-child { font-size:24px; }
.bubble-score.bump { animation:scoreBump .32s ease; }
/* clone promotion combo : remonte du score vers le record */
.bubble-promote {
  position:fixed; left:50%; z-index:46; pointer-events:none;
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 15px 5px 12px; border-radius:24px;
  font-weight:700; font-size:21px; color:#7a5200; font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg, #fff6cf, #ffd24c);
  box-shadow:0 12px 26px rgba(170,120,0,.45), inset 0 1px 0 rgba(255,255,255,.9);
}
.bubble-promote > span:first-child { font-size:18px; }
@keyframes scoreBump {
  0%{transform:translateX(-50%) scale(1)} 40%{transform:translateX(-50%) scale(1.2)} 100%{transform:translateX(-50%) scale(1)}
}
.float-pts {
  position:fixed; z-index:45; transform:translate(-50%,-50%);
  font-weight:700; font-size:30px; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.35);
  pointer-events:none; animation:floatUp .85s ease-out forwards;
}
.float-pts.big { font-size:44px; color:#ffd21e; }
.float-pts.hot { font-size:56px; color:#ff5a3c; text-shadow:0 2px 12px rgba(255,90,60,.5); }   /* gros combo */
.float-pts.wrongnote { font-size:34px; color:#ff5a5f; text-shadow:0 2px 8px rgba(255,60,70,.45); }
@keyframes floatUp {
  0%{opacity:1; transform:translate(-50%,-50%) scale(.6)}
  30%{transform:translate(-50%,-95%) scale(1.1)}
  100%{opacity:0; transform:translate(-50%,-170%) scale(1)}
}

/* ====== BULLES « suis la berceuse » : nom du morceau + bannière de fin ====== */
.bubble-melody {
  position:fixed; top:calc(var(--sat) + 14px); left:50%; transform:translateX(-50%);
  z-index:25; pointer-events:none; max-width:86vw; white-space:nowrap;
  display:inline-flex; align-items:center; gap:2px; padding:6px 17px; border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.82));
  box-shadow:0 6px 16px rgba(0,0,0,.14), inset 0 1.5px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-weight:800; font-size:18px; color:#5b3fa0;
}
/* bannière de fin de berceuse : nom · étoiles · justesse */
.bubble-result {
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%) scale(.82);
  z-index:60; pointer-events:none; text-align:center; min-width:240px;
  padding:24px 32px; border-radius:30px;
  background:linear-gradient(180deg, #ffffff, #f3f0ff);
  box-shadow:0 26px 64px rgba(60,40,120,.42), inset 0 2px 0 rgba(255,255,255,.9);
  opacity:0; transition:opacity .3s ease, transform .38s cubic-bezier(.2,1.3,.5,1);
}
.bubble-result.show { opacity:1; transform:translate(-50%,-50%) scale(1); }
.br-name { font-weight:800; font-size:22px; color:#5b3fa0; }
.br-stars { font-size:40px; margin:8px 0 2px; letter-spacing:5px; filter:drop-shadow(0 3px 6px rgba(255,180,0,.35)); }
.br-acc { font-weight:800; font-size:48px; color:#ff9f1f; font-variant-numeric:tabular-nums; line-height:1.05; }
.br-sub { font-size:14px; color:#8a8296; margin-top:6px; }
.br-record { margin-top:9px; font-weight:800; font-size:15px; color:#c98a00; }

/* ===================== SCORES DU BALLON (jeu) ===================== */
/* SCORE DU JEU (cumulatif) : pastille principale en verre dépoli, centrée en haut */
.balloon-total {
  position:fixed; top:calc(var(--sat) + 66px); left:50%; transform:translateX(-50%);
  z-index:25; pointer-events:none;
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 24px 8px 18px; border-radius:32px;
  font-weight:700; font-size:40px; line-height:1; color:#2a2540;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.82));
  box-shadow:0 10px 26px rgba(0,0,0,.16), inset 0 1.5px 0 rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(9px) saturate(1.2); backdrop-filter:blur(9px) saturate(1.2);
}
.balloon-total > span:first-child { font-size:.78em; filter:drop-shadow(0 2px 3px rgba(0,0,0,.18)); }
.balloon-total.bump { animation:scoreBump .3s ease; }

/* SCORE EN COURS : pastille centrée en haut. Sa COULEUR (texte + halo) suit le risque
   d'explosion (vert sûr -> rouge danger), pilotée image par image en JS (updateRisk). */
.balloon-score {
  position:fixed; top:calc(var(--sat) + 116px); left:50%; transform:translateX(-50%);
  z-index:25; pointer-events:none;
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 18px 7px 14px; border-radius:28px;
  font-weight:700; font-size:26px; line-height:1; color:#2a2540;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.8));
  box-shadow:0 6px 16px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.balloon-score.bump { animation:scoreBump .3s ease; }
/* icône du score : 💨 (sûr) et 🔥 (danger) SUPERPOSÉES, en fondu croisé selon le risque */
.balloon-score .bs-ico { position:relative; width:1.05em; height:1.05em; font-size:.74em; flex:0 0 auto; }
.bs-ico-safe, .bs-ico-fire { position:absolute; inset:0; display:grid; place-items:center; transition:opacity .2s ease; }
.bs-ico-fire { opacity:0; }
.balloon-score .bs-n { line-height:1; }

/* RECORD (meilleur ballon) : pastille dorée, centrée EN HAUT (au-dessus du score en cours) */
.balloon-best {
  position:fixed; top:calc(var(--sat) + 66px); left:50%; transform:translateX(-50%);
  z-index:25; pointer-events:none;
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 17px 7px 13px; border-radius:26px;
  font-weight:700; font-size:23px; color:#7a5200;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg, #fff6cf, #ffd24c);
  box-shadow:0 7px 18px rgba(170,120,0,.34), inset 0 1px 0 rgba(255,255,255,.85);
}
.balloon-best > span:first-child { font-size:19px; filter:drop-shadow(0 1px 2px rgba(120,80,0,.4)); }
.balloon-best.pop { animation:bestPop .55s cubic-bezier(.2,1.4,.4,1); }
@keyframes bestPop {
  0%{transform:translateX(-50%) scale(1)}
  40%{transform:translateX(-50%) scale(1.28) rotate(-3deg)}
  70%{transform:translateX(-50%) scale(.97) rotate(2deg)}
  100%{transform:translateX(-50%) scale(1)}
}

/* clone doré « promotion du record » : part du score (bas) et remonte vers le record (haut) */
.balloon-promote {
  position:fixed; left:50%; z-index:46; pointer-events:none;
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 17px 7px 13px; border-radius:26px;
  font-weight:700; font-size:23px; color:#7a5200; font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg, #fff6cf, #ffd24c);
  box-shadow:0 12px 26px rgba(170,120,0,.45), inset 0 1px 0 rgba(255,255,255,.9);
}
.balloon-promote > span:first-child { font-size:19px; filter:drop-shadow(0 1px 2px rgba(120,80,0,.4)); }

/* ===================== ANIMAUX (vraies images, sans cadre) ===================== */
.animals { flex:1; display:flex; flex-direction:column; gap:14px; min-height:0; }
.animal-stage { flex:1; min-height:0; display:grid; place-items:center; padding:6px; }
.animal-big {
  width:min(80vw, 56vh); height:min(80vw, 56vh);
  object-fit:contain;                                   /* animal complet, jamais tronqué */
  /* pas de drop-shadow : sur iOS Safari l'ombre d'une <img> SVG suit le rectangle de l'image
     (et non la forme) -> vilain carré. On garde l'image SEULE, bien propre. */
}
.animal-big.in { animation:popin .5s both cubic-bezier(.2,1.5,.4,1); }
.animal-big.bounce { animation:squash .5s ease; }
.animal-pad { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.animal-chip {
  aspect-ratio:1; border-radius:50%; padding:13%; display:grid; place-items:center;
  background:rgba(255,255,255,.62); box-shadow:0 4px 10px rgba(0,0,0,.12);
  border:3px solid transparent; transition:transform .08s ease, background .15s ease;
}
.animal-chip:active { transform:scale(.92); }
.animal-chip.active {
  background:rgba(255,255,255,.95);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 60%, #fff), 0 4px 10px rgba(0,0,0,.12);
}
.animal-chip img { width:100%; height:100%; object-fit:contain; display:block; }