/* Petits bâtisseurs : tout est en feutrine (carreaux Codex img/feutre-*.webp), coutures en pointillés. */
@font-face { font-family: 'Baloo'; src: url(polices/baloo2.woff2) format('woff2'); font-weight: 400 800; font-display: swap; }

html, body { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  font-family: 'Baloo', system-ui, sans-serif; color: #3b2a1a; }
#jeu canvas { display: block; }
[hidden] { display: none !important; }
img { pointer-events: none; -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; }
button { font: inherit; color: inherit; padding: 0; border: 0; background: none; cursor: pointer; }

/* ---------- Premier écran ---------- */
#titre { position: fixed; inset: 0; z-index: 20; overflow: hidden; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: min(5vh, 28px); transition: opacity 0.45s; }
#titre .decor { position: absolute; inset: 0; background: #30a9e3 url(img/decor.webp) center 60% / cover; }
#titre .nuage { position: absolute; width: min(26vw, 230px); opacity: 0; transition: opacity 0.8s 0.3s, transform 8s linear; }
#titre .n1 { left: 6%; top: 8%; } #titre .n2 { right: 7%; top: 14%; width: min(20vw, 180px); }
#titre.ouvert .nuage { opacity: 1; transform: translateX(18px); }
#titre .titre-jeu { position: relative; width: min(84vw, 760px); max-height: 30vh; object-fit: contain;
  filter: drop-shadow(0 6px 8px rgba(40, 30, 10, 0.3)); transform: scale(0.8); opacity: 0; transition: transform 0.5s cubic-bezier(.3, 1.6, .5, 1), opacity 0.3s; }
#titre.ouvert .titre-jeu { transform: none; opacity: 1; }
#commencer { position: relative; width: min(30vh, 34vw, 190px); aspect-ratio: 1; background: url(img/jouer.webp) center / contain no-repeat;
  font-size: 0; color: transparent; filter: drop-shadow(0 6px 6px rgba(40, 30, 10, 0.35)); transition: transform 0.12s; }
#titre.ouvert #commencer { animation: respire 2.4s ease-in-out infinite 0.8s; }
#commencer.appuye { transform: scale(0.9); animation: none; }
@keyframes respire { 50% { transform: scale(1.05); } }
#titre.sortie { opacity: 0; pointer-events: none; }

/* ---------- Bouton des parents (appui long) ---------- */
#parents { position: fixed; top: 10px; right: 10px; width: 52px; height: 52px; z-index: 6; border-radius: 50%;
  background: url(img/b-parents.webp) center / contain no-repeat; opacity: 0.85; }
#parents svg { position: absolute; inset: -4px; width: 60px; height: 60px; transform: rotate(-90deg); }
#parents circle { fill: none; stroke: #f28a2e; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 126; stroke-dashoffset: 126; }
#parents.appui circle { transition: stroke-dashoffset 1.2s linear; stroke-dashoffset: 0; }

/* ---------- Espace parents ---------- */
#espace-parents { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
  background: rgba(30, 50, 70, 0.45); padding: 12px; box-sizing: border-box; }
.feuille { position: relative; width: min(640px, 100%); max-height: 100%; overflow-y: auto; box-sizing: border-box;
  padding: 12px 22px 10px; border: 10px solid transparent; border-radius: 26px; touch-action: pan-y;
  background: url(img/feutre-blanc.webp) padding-box, url(img/feutre-brun.webp) border-box;
  box-shadow: 0 10px 24px rgba(30, 20, 10, 0.35); }
.feuille::before { content: ''; position: absolute; inset: 6px; border: 2.5px dashed rgba(150, 105, 60, 0.6); border-radius: 16px; pointer-events: none; }
.feuille h2 { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 800; text-align: center; color: #a9622f; }
.feuille .aide { margin: 2px 0 4px; font-size: 13px; line-height: 1.3; text-align: center; opacity: 0.9; }
.feuille .aide b { color: #3fa34d; white-space: nowrap; }
.reglages { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.ligne { display: flex; align-items: center; justify-content: space-between; min-height: 44px; font-size: 16px; font-weight: 600; text-align: left; }
.ligne i { position: relative; width: 50px; height: 28px; border-radius: 14px; background: url(img/feutre-perle.webp) center / 120px; flex: none;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.25); transition: background 0.2s; }
.ligne i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: url(img/feutre-blanc.webp) center / 80px; box-shadow: 0 2px 3px rgba(0,0,0,0.3); transition: transform 0.2s; }
.ligne[aria-checked="true"] i { background-image: url(img/feutre-vert.webp); }
.ligne[aria-checked="true"] i::after { transform: translateX(22px); }
.ligne b { display: flex; gap: 6px; }
.ligne b button { min-width: 44px; height: 36px; border-radius: 12px; font-weight: 700; background: url(img/feutre-perle.webp) center / 120px; }
.ligne b button.actif { background-image: url(img/feutre-bleu.webp); color: #fff; }
.actions { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 10px; margin: 6px 0 8px; align-items: stretch; }
.filet { min-height: 48px; padding: 0 8px; border-radius: 16px; font-size: 14px; line-height: 1.15; font-weight: 700; border: 2.5px dashed rgba(150, 105, 60, 0.7); }
.vif { position: relative; min-height: 48px; padding: 0 10px; border-radius: 16px; font-size: 17px; line-height: 1.1; font-weight: 800; color: #fff;
  background: url(img/feutre-orange.webp) center / 200px; box-shadow: 0 4px 0 #b85f17; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.vif::before { content: ''; position: absolute; inset: 5px; border: 2px dashed rgba(255, 245, 225, 0.85); border-radius: 11px; }
.appuye { transform: translateY(2px) scale(0.98); }
.pied { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12px; opacity: 0.85; }
.lien-discret { text-decoration: underline; font-size: 12px; }
#liens-plateforme { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#liens-plateforme .lien { height: 28px; padding: 0 10px; border-radius: 9px; font-size: 13px; font-weight: 700;
  background: url(img/feutre-perle.webp) center / 120px; }

/* ---------- Tourne le téléphone ---------- */
#tourner { position: fixed; inset: 0; z-index: 40; display: none; align-items: center; justify-content: center;
  background: #30a9e3 url(img/decor.webp) center / cover; text-align: center; }
#tourner .centre { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px; }
#tourner img { width: min(80vw, 420px); }
#tourner p { margin: 0; font-size: 20px; font-weight: 700; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.4); }
#tourner .aide { font-size: 15px; font-weight: 500; }
#tourner-plein { min-height: 52px; padding: 0 24px; border-radius: 18px; font-size: 18px; font-weight: 800; color: #fff;
  background: url(img/feutre-orange.webp) center / 200px; box-shadow: 0 5px 0 #b85f17; }

/* ---------- Toasts (seulement pour les parents : erreurs de téléchargement, mise à jour) ---------- */
#toasts { position: fixed; left: 12px; top: 12px; z-index: 50; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.toast { padding: 8px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; background: url(img/feutre-blanc.webp) center / 120px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.25); max-width: 70vw; }