/* ============================================================
   ANIMONS — Cadre v3 pour les pages de jeux
   Applique le style « vacances » au CADRE des jeux (fond ciel,
   en-tête blanc, pilules) tout en préservant les plateaux de
   jeu tels quels (style arcade sur fond sombre).
   Chargée APRÈS le <style> local de chaque jeu.
   ============================================================ */

/* ---------- Fond de page : ciel v3 ---------- */
body{
  background:linear-gradient(165deg,#63abe9 0%,#4a93dc 55%,#3f83cc 100%) !important;
  background-attachment:fixed !important;
  color:#fff;
}

/* ---------- Bouton retour : identique à .v3-back (design-v3.css) ---------- */
.back-link{
  display:inline-flex !important; align-items:center !important; gap:6px !important;
  font-family:'Nunito',system-ui,sans-serif !important;
  font-weight:900 !important; font-size:13px !important; color:#fff !important;
  text-decoration:none !important; cursor:pointer;
  background:rgba(255,255,255,.17) !important;
  border:1.5px solid rgba(255,255,255,.45) !important;
  border-radius:999px !important;
  padding:.5em 1.05em .5em .8em !important;
  box-shadow:none !important; text-shadow:none !important;
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  transition:background .16s, border-color .16s, transform .16s;
}
.back-link::before{ content:'‹'; font-size:1.5em; line-height:1; margin-top:-.16em; opacity:.9; }
.back-link:hover{
  background:rgba(255,255,255,.29) !important;
  border-color:rgba(255,255,255,.75) !important;
  transform:translateX(-2px);
}
.back-link:active{ transform:translateX(-2px) scale(.97); }

/* ---------- Titre du jeu : blanc, Nunito, double trait sport ---------- */
h1{
  font-family:'Nunito',system-ui,sans-serif !important;
  color:#fff !important;
  text-shadow:0 2px 10px rgba(20,50,100,.25) !important;
  font-weight:900 !important;
  letter-spacing:-.01em !important;
  position:relative;
  display:inline-block;
  margin-top:8px !important;
  margin-bottom:10px !important;
}
h1::before{ content:''; position:absolute; top:-6px; left:6%; width:34%; height:5px; border-radius:4px; background:#57bfaf; }

/* ---------- Stats : pilules blanches ---------- */
.stat{
  background:rgba(255,255,255,.92) !important;
  color:#1e2a3b !important;
  border:none !important;
  border-radius:999px;
  padding:.42em .95em;
  box-shadow:0 6px 18px rgba(25,55,110,.10);
  text-shadow:none !important;
}
.stat b{ color:#3a7bc4 !important; }

/* ---------- Sélecteurs de niveau : pilules blanches / jaune ---------- */
.lvl{
  background:rgba(255,255,255,.92) !important;
  color:#1e2a3b !important;
  border:none !important;
  box-shadow:0 4px 12px rgba(25,55,110,.10);
  text-shadow:none !important;
}
.lvl.active{
  background:#f7dd0d !important;
  color:#1e2a3b !important;
}

/* ---------- Clavier (pendu…) : touches blanches ---------- */
.key{
  background:rgba(255,255,255,.94) !important;
  color:#1e2a3b !important;
  border-color:transparent !important;
  box-shadow:0 3px 8px rgba(25,55,110,.12);
  text-shadow:none !important;
}
.key.ok{ background:#57bfaf !important; color:#fff !important; opacity:.65 !important; }
.key.ko{ background:#ef7c6e !important; color:#fff !important; opacity:.55 !important; }

/* ---------- Croix directionnelle ---------- */
.dpad button{
  background:rgba(255,255,255,.92) !important;
  color:#0c7a6d !important;
  border-color:transparent !important;
  box-shadow:0 4px 12px rgba(25,55,110,.12);
  text-shadow:none !important;
}
.dpad button:active{ background:#57bfaf !important; color:#fff !important; }

/* ---------- Aides & indices ---------- */
.hint{ color:rgba(255,255,255,.88) !important; opacity:1 !important; text-shadow:none !important; }
.hint-box{
  background:rgba(255,255,255,.14) !important;
  border-color:rgba(255,255,255,.35) !important;
  color:#fff !important;
  text-shadow:none !important;
}