/* Deboiter (CrazyGames) — l'habillage.
   Copyright (c) 2026 Tristan Cazenave. Tous droits réservés.

   UN SEUL STYLE, CELUI D'UN JEU DE PLATEAU EN BOIS : un cadre de bois sombre,
   un sol en damier clair, des murs de pierre, des blocs de bois veiné, le bloc
   rouge laqué, et un pousseur bleu qui regarde où il va. Tout est dessiné en
   CSS : aucune image, net à toutes les tailles.

   UN DÉCOR PAR DIFFICULTÉ (`body[data-palier]`) : le fond et la couleur
   d'accent changent, le reste ne bouge pas. On sait où l'on est d'un coup d'œil.

   La page tient TOUT l'écran, sans défilement : le jeu vit dans un cadre 16:9
   (800×450 au plus petit sur CrazyGames) comme en plein écran, en paysage
   comme en portrait. */

:root {
  --encre: #2b2118; --encre-2: #5b4a3a; --encre-3: #8a7866;
  --carte: rgba(255, 252, 245, .94); --ligne: rgba(70, 45, 20, .14);
  --bois-1: #8a5d33; --bois-2: #6e4524; --bois-3: #4f2f17;
  --sol-1: #f6ecd8; --sol-2: #efe2c8;
  --pierre-1: #9b9187; --pierre-2: #7f7569; --pierre-3: #685f55;
  --bloc-1: #e7b36b; --bloc-2: #c88a3e; --bloc-3: #9c6524;
  --rouge-1: #ff6b57; --rouge-2: #e03a2a; --rouge-3: #a8231a;
  --homme-1: #6aa0ff; --homme-2: #2f63d6; --homme-3: #1d3f94;
  --porte: #2fb36a; --or: #f5b82e; --or-2: #d99610;
  --mauvais: #c43d2c; --bon: #23874d;
  /* Le décor de la difficulté, réécrit plus bas. */
  --fond-1: #d7f3dd; --fond-2: #8fd6a6; --accent: #2a9a58; --accent-2: #1f7a45;
  --police: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Varela Round", "Nunito",
            "Trebuchet MS", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body[data-palier="moyen"]     { --fond-1: #d6e9fb; --fond-2: #86b8ea; --accent: #2f72c4; --accent-2: #235a9e; }
body[data-palier="difficile"] { --fond-1: #e8ddf8; --fond-2: #ad90e2; --accent: #7a4fc4; --accent-2: #5f3a9f; }
body[data-palier="expert"]    { --fond-1: #fde6c6; --fond-2: #eca461; --accent: #c4621b; --accent-2: #9c4c12; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
body {
  color: var(--encre);
  font: 600 15px/1.35 var(--police);
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .35) 1.2px, transparent 1.6px) 0 0 / 22px 22px,
    radial-gradient(ellipse at 30% 0%, var(--fond-1) 0%, transparent 70%),
    linear-gradient(160deg, var(--fond-1), var(--fond-2));
  background-color: var(--fond-2);
  transition: background-color .4s;
  -webkit-text-size-adjust: 100%;
  /* Exigence CrazyGames : pas de loupe ni de menu sur un appui long ou double. */
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button { font: inherit; touch-action: manipulation; cursor: pointer; color: inherit; }
button:disabled { cursor: default; }
svg { display: block; }
body.charge .app { visibility: hidden; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ── LA DISPOSITION ────────────────────────────────────────────────────────
   Portrait : en-tête, plateau, bulle, outils, les uns sous les autres.
   Paysage : le plateau à gauche, tout le reste dans une colonne à droite. */
.app {
  height: 100vh; height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto auto;
  grid-template-areas: "tete" "zone" "bulle" "commandes";
  gap: 8px;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
           max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}
@media (min-aspect-ratio: 6/5) {
  .app {
    grid-template-columns: 1fr clamp(220px, 29vw, 330px);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "zone tete" "zone commandes" "zone bulle";
    column-gap: 14px;
  }
  .bulle { align-self: start; }
}

/* ── L'EN-TÊTE ─────────────────────────────────────────────────────────── */
.tete { grid-area: tete; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.marque { display: flex; align-items: center; gap: 8px; }
.logo-bloc { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; flex: 1; }
.logo {
  margin: 0; font-size: 30px; font-weight: 900; letter-spacing: .5px; line-height: 1;
  color: #3a2614; display: inline-flex; align-items: baseline;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .7), 0 4px 10px rgba(60, 30, 0, .18);
}
.logo-o {
  display: inline-block; color: #fff; background: linear-gradient(160deg, var(--rouge-1), var(--rouge-2));
  border-radius: .18em; padding: 0 .1em; margin: 0 .04em; line-height: .95;
  box-shadow: inset 0 -.08em 0 var(--rouge-3), 0 .06em .12em rgba(120, 20, 10, .35);
  text-shadow: none; transform: translateY(-.02em);
}
.logo.petit { font-size: 26px; }
.sous { font-size: 13.5px; color: var(--encre-2); font-weight: 700; }

.rond {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  border: 0; background: var(--carte); color: var(--encre-2);
  box-shadow: 0 3px 0 var(--ligne), 0 4px 10px rgba(60, 30, 0, .12);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 900;
}
.rond svg { width: 20px; height: 20px; }
.rond.petit { width: 34px; height: 34px; font-size: 17px; }
.rond:hover:not(:disabled) { color: var(--accent); transform: translateY(-1px); }
.rond:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--ligne); }
.rond:disabled { opacity: .4; }

.niveau-ligne { display: flex; gap: 7px; align-items: center; }
.pastille-niveau {
  flex: 1 1 auto; min-width: 0; height: 40px; border: 0; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 800; font-size: 16px;
  box-shadow: 0 3px 0 var(--accent-2), 0 4px 10px rgba(0, 0, 0, .15);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 12px;
}
.pastille-niveau:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--accent-2); }

.paliers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.palier {
  border: 0; border-radius: 10px; padding: 6px 2px; min-height: 32px; min-width: 0;
  background: var(--carte); color: var(--encre-2); font-size: 13.5px; font-weight: 800;
  box-shadow: 0 2px 0 var(--ligne);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.palier[data-p="0"] { --c-p: #2a9a58; } .palier[data-p="1"] { --c-p: #2f72c4; }
.palier[data-p="2"] { --c-p: #7a4fc4; } .palier[data-p="3"] { --c-p: #c4621b; }
.palier { border-bottom: 3px solid var(--c-p); }
.palier[aria-pressed="true"] { background: var(--c-p); color: #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.palier:hover:not([aria-pressed="true"]) { color: var(--c-p); }
@media (min-aspect-ratio: 6/5) and (max-width: 1099px) { .paliers { grid-template-columns: repeat(2, 1fr); } }

.compteurs {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  font-size: 14px; color: var(--encre-2);
  background: var(--carte); border-radius: 12px; padding: 6px 12px;
  box-shadow: 0 2px 0 var(--ligne);
}
.compteurs b { color: var(--encre); font-weight: 900; font-variant-numeric: tabular-nums; }
.compteurs.depasse #poussees { color: var(--mauvais); }
.c-optimum { display: inline-flex; align-items: center; gap: 4px; }
.mini-etoile { width: 15px; height: 15px; color: var(--or); }

/* ── LA BULLE ─────────────────────────────────────────────────────────── */
.bulle {
  grid-area: bulle; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--carte); border-radius: 14px; padding: 8px 12px; min-height: 44px;
  box-shadow: 0 2px 0 var(--ligne), 0 4px 12px rgba(60, 30, 0, .08);
}
.bulle-ic { width: 22px; height: 22px; flex: none; color: var(--accent); }
.bulle.vide { visibility: hidden; }
.dit { margin: 0; flex: 1 1 160px; font-size: 14.5px; color: var(--encre-2); font-weight: 700; }
.dit.bon { color: var(--bon); }
.dit.mauvais { color: var(--mauvais); }
.bulle.mauvais .bulle-ic { color: var(--mauvais); }
.bulle.tuto { box-shadow: 0 0 0 3px var(--accent), 0 4px 14px rgba(0, 0, 0, .12); }
.lien {
  border: 0; background: none; color: var(--accent); font-weight: 800; font-size: 13.5px;
  text-decoration: underline; text-underline-offset: 3px; padding: 2px 0;
}
.lien[hidden] { display: none; }

/* ── LES OUTILS ───────────────────────────────────────────────────────── */
.commandes { grid-area: commandes; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
@media (min-aspect-ratio: 6/5) { .commandes { grid-template-columns: repeat(3, 1fr); } }
.outil {
  position: relative; border: 0; border-radius: 14px; min-width: 0;
  background: var(--carte); color: var(--encre-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 7px 2px 6px; min-height: 56px;
  box-shadow: 0 3px 0 var(--ligne), 0 4px 10px rgba(60, 30, 0, .1);
  font-size: 12px; font-weight: 800;
}
.outil > svg { width: 24px; height: 24px; }
.outil span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.outil:hover:not(:disabled) { color: var(--accent); transform: translateY(-1px); }
.outil:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--ligne); }
.outil:disabled { opacity: .4; }
.outil.vedette { background: linear-gradient(180deg, #ffe08a, var(--or)); color: #6b4300; box-shadow: 0 3px 0 var(--or-2), 0 4px 10px rgba(120, 80, 0, .2); }
.outil .barre { position: absolute; top: 7px; left: 50%; width: 24px; height: 24px; margin-left: -12px; color: var(--mauvais); display: none; }
.outil[aria-pressed="false"] .barre { display: block; }
.outil[aria-pressed="false"] > svg:first-child { opacity: .45; }

/* Écrans bas (mobile paysage 800×450) : tout se resserre. */
@media (max-height: 560px) {
  .app { gap: 5px; }
  .tete { gap: 5px; }
  .logo { font-size: 22px; }
  .sous { font-size: 11.5px; }
  .rond { width: 32px; height: 32px; } .rond svg { width: 17px; height: 17px; }
  .rond.petit { width: 28px; height: 28px; font-size: 15px; }
  .pastille-niveau { height: 32px; font-size: 14px; }
  .palier { min-height: 26px; padding: 3px 2px; font-size: 12px; }
  .compteurs { font-size: 12.5px; padding: 4px 10px; gap: 9px; }
  .outil { min-height: 44px; padding: 4px 2px; font-size: 12px; gap: 1px; }
  .outil > svg, .outil .barre { width: 19px; height: 19px; }
  .outil .barre { margin-left: -9.5px; top: 4px; }
  .bulle { min-height: 36px; padding: 5px 10px; }
  .dit { font-size: 12.5px; }
  .bulle-ic { width: 18px; height: 18px; }
}

/* ── LE PLATEAU ──────────────────────────────────────────────────────────
   `--c`, la taille d'une case, est posée par le script : la plus grande qui
   tienne en largeur ET en hauteur. Les pièces sont placées en pixels par le
   script et glissent d'une case à l'autre (`--duree`). */
.zone { grid-area: zone; min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center; }
.plateau {
  --c: 48px; --duree: 110ms;
  --r: calc(var(--c) * .45);     /* l'épaisseur du rebord (posée par le script) */
  position: relative;
  border-radius: calc(var(--r) * .7);
  /* LE PLATEAU EST UNE PIÈCE DE NOYER D'UN SEUL TENANT : le pourtour n'est pas
     fait de pavés, c'est le bois du plateau lui-même, dans lequel le sol est
     creusé (`.creux`) et la porte découpée. Même veinage que les blocs, plus
     sombre. */
  background:
    linear-gradient(180deg, rgba(255, 235, 205, .16), rgba(255, 235, 205, 0) 28%),
    radial-gradient(ellipse 150% 70% at 25% 125%, transparent 50%, rgba(40, 18, 0, .14) 52%, transparent 55%,
                    transparent 62%, rgba(255, 215, 165, .07) 64%, transparent 67%,
                    transparent 74%, rgba(40, 18, 0, .1) 76%, transparent 79%),
    linear-gradient(180deg,
      transparent 0 6%, rgba(40, 18, 0, .1) 9%, transparent 12%,
      transparent 24%, rgba(255, 215, 165, .08) 27%, transparent 30%,
      transparent 47%, rgba(40, 18, 0, .08) 52%, transparent 57%,
      transparent 71%, rgba(255, 215, 165, .07) 74%, transparent 77%,
      transparent 88%, rgba(40, 18, 0, .1) 91%, transparent 94%),
    linear-gradient(160deg, #a5743f, #855630 50%, #643d1d);
  box-shadow:
    inset 0 calc(var(--c) * .04) 0 rgba(255, 230, 190, .3),
    inset 0 calc(var(--c) * -.06) 0 rgba(30, 12, 0, .3),
    0 calc(var(--c) * .18) calc(var(--c) * .4) rgba(40, 20, 0, .35),
    0 2px 4px rgba(40, 20, 0, .3);
  touch-action: none;            /* les glissements sont pour le jeu */
}
/* LE SOL EST EN CREUX : une ombre portée par le rebord, un liseré clair sur
   l'arête. La boîte couvre l'intérieur du pourtour. */
.creux {
  position: absolute; pointer-events: none;
  border-radius: calc(var(--c) * .08);
  box-shadow:
    inset 0 calc(var(--c) * .13) calc(var(--c) * .16) calc(var(--c) * -.04) rgba(45, 20, 0, .42),
    inset calc(var(--c) * .07) 0 calc(var(--c) * .1) calc(var(--c) * -.05) rgba(45, 20, 0, .22),
    inset calc(var(--c) * -.05) 0 calc(var(--c) * .08) calc(var(--c) * -.05) rgba(45, 20, 0, .15),
    inset 0 0 0 calc(var(--c) * .02) rgba(70, 35, 5, .35),
    0 calc(var(--c) * .025) 0 rgba(255, 228, 185, .35);
}
.sol { display: grid; }   /* les pistes sont posées par le script (geometrie.js) */
.case { position: relative; }
.case.solx { background: var(--sol-1); cursor: pointer; box-shadow: inset 0 0 0 .5px rgba(120, 80, 30, .08); }
.case.solx.clair { background: var(--sol-2); }
/* Les quatre cases d'angle du sol suivent l'arrondi du creux : sans cela, leurs
   coins carrés dépassent en petits triangles clairs. */
.case.coin-hg { border-top-left-radius: calc(var(--c) * .08); }
.case.coin-hd { border-top-right-radius: calc(var(--c) * .08); }
.case.coin-bg { border-bottom-left-radius: calc(var(--c) * .08); }
.case.coin-bd { border-bottom-right-radius: calc(var(--c) * .08); }
/* Le pourtour : rien à dessiner, c'est le bois du plateau. */
.case.mur.bord { background: none; }
/* Un mur à l'intérieur (aucun niveau n'en a aujourd'hui) : un pavé de pierre. */
.case.mur.interieur {
  background: linear-gradient(160deg, var(--pierre-1), var(--pierre-2) 65%, var(--pierre-3));
  border-radius: calc(var(--c) * .12);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .22), inset 0 -3px 0 rgba(0, 0, 0, .22);
  transform: scale(.96);
}
/* LA PORTE : une entaille dans le rebord, au niveau du sol, qui s'ouvre vers
   l'extérieur dans un vert clair ; ses deux flancs portent l'ombre du bois, et
   une flèche verte bat vers la sortie. */
.case.porte { overflow: hidden; }
.case.porte.g { background: linear-gradient(270deg, var(--sol-1), #c4ecd1 70%, #9fdcb4);
  box-shadow: inset 0 calc(var(--c) * .09) calc(var(--c) * .1) calc(var(--c) * -.04) rgba(50, 25, 0, .4),
              inset 0 calc(var(--c) * -.09) calc(var(--c) * .1) calc(var(--c) * -.04) rgba(50, 25, 0, .4); }
.case.porte.d { background: linear-gradient(90deg, var(--sol-1), #c4ecd1 70%, #9fdcb4);
  box-shadow: inset 0 calc(var(--c) * .09) calc(var(--c) * .1) calc(var(--c) * -.04) rgba(50, 25, 0, .4),
              inset 0 calc(var(--c) * -.09) calc(var(--c) * .1) calc(var(--c) * -.04) rgba(50, 25, 0, .4); }
.case.porte.h { background: linear-gradient(0deg, var(--sol-1), #c4ecd1 70%, #9fdcb4);
  box-shadow: inset calc(var(--c) * .09) 0 calc(var(--c) * .1) calc(var(--c) * -.04) rgba(50, 25, 0, .4),
              inset calc(var(--c) * -.09) 0 calc(var(--c) * .1) calc(var(--c) * -.04) rgba(50, 25, 0, .4); }
.case.porte.b { background: linear-gradient(180deg, var(--sol-1), #c4ecd1 70%, #9fdcb4);
  box-shadow: inset calc(var(--c) * .09) 0 calc(var(--c) * .1) calc(var(--c) * -.04) rgba(50, 25, 0, .4),
              inset calc(var(--c) * -.09) 0 calc(var(--c) * .1) calc(var(--c) * -.04) rgba(50, 25, 0, .4); }
.case.porte::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: calc(var(--r) * .8); height: calc(var(--r) * .8); margin: calc(var(--r) * -.4) 0 0 calc(var(--r) * -.4);
  background: #23874d;
  clip-path: polygon(0 32%, 52% 32%, 52% 8%, 100% 50%, 52% 92%, 52% 68%, 0 68%);
  animation: porte 1.4s ease-in-out infinite;
}
.case.porte.h::after { transform: rotate(-90deg); animation-name: porte-h; }
.case.porte.b::after { transform: rotate(90deg); animation-name: porte-b; }
.case.porte.g::after { transform: rotate(180deg); animation-name: porte-g; }
@keyframes porte   { 0%, 100% { translate: 0 0; opacity: .75; } 50% { translate: 12% 0; opacity: 1; } }
@keyframes porte-h { 0%, 100% { translate: 0 0; opacity: .75; } 50% { translate: 0 -12%; opacity: 1; } }
@keyframes porte-b { 0%, 100% { translate: 0 0; opacity: .75; } 50% { translate: 0 12%; opacity: 1; } }
@keyframes porte-g { 0%, 100% { translate: 0 0; opacity: .75; } 50% { translate: -12% 0; opacity: 1; } }

.pieces, .effets { position: absolute; inset: 0; pointer-events: none; }
.effets { overflow: visible; z-index: 3; }
.piece {
  position: absolute; left: 0; top: 0;
  transition: transform var(--duree) cubic-bezier(.3, .7, .4, 1);
  will-change: transform;
}
.piece.sans-transition { transition: none; }
/* LES BLOCS : du bois clair et chaud, comme une planchette de hêtre.
   * des VEINES douces le long du bloc, à des hauteurs irrégulières (pas de
     motif répété : rien ne fait « rayures ») ;
   * deux ARCS de « cathédrale », le dessin du bois de fil, tracés par des
     ellipses décentrées ;
   * un reflet en haut, un biseau, une ombre portée douce ;
   * une teinte qui varie un peu d'un bloc à l'autre.
   Tout est en fractions de case ou en pourcentages : même rendu à toutes les
   tailles. `--perp` est la direction en travers du fil, `--arc` l'ellipse. */
.bloc {
  --g: calc(var(--c) * .01);
  border-radius: calc(var(--c) * .18);
  background:
    linear-gradient(180deg, rgba(255, 250, 235, .4), rgba(255, 250, 235, 0) 40%),
    radial-gradient(var(--arc), transparent 52%, rgba(160, 98, 38, .13) 54%, transparent 57%,
                    transparent 63%, rgba(160, 98, 38, .1) 65%, transparent 68%,
                    transparent 75%, rgba(255, 240, 210, .18) 77%, transparent 80%),
    linear-gradient(var(--perp),
      transparent 0 9%, rgba(160, 98, 38, .1) 12%, transparent 16%,
      transparent 27%, rgba(255, 240, 210, .2) 30%, transparent 33%,
      transparent 46%, rgba(160, 98, 38, .08) 51%, transparent 57%,
      transparent 69%, rgba(160, 98, 38, .11) 72%, transparent 75%,
      transparent 84%, rgba(255, 240, 210, .16) 87%, transparent 90%),
    linear-gradient(160deg, #f3cb90, #dfa963 55%, #c98c42);
  box-shadow:
    inset 0 0 0 1px rgba(130, 75, 20, .26),
    inset 0 calc(var(--g) * 3) 0 rgba(255, 255, 255, .42),
    inset 0 calc(var(--g) * -5) 0 rgba(120, 65, 15, .2),
    0 calc(var(--g) * 4) calc(var(--g) * 7) rgba(60, 30, 0, .3);
}
.bloc.couche { --perp: 180deg; --arc: ellipse 150% 75% at 28% 118%; }
.bloc.debout { --perp: 90deg;  --arc: ellipse 75% 150% at 118% 28%; }
.bloc:nth-child(3n) { filter: brightness(1.04) saturate(.95); }
.bloc:nth-child(3n + 1) { filter: brightness(.97) hue-rotate(-3deg); }
.bloc.rouge {
  background:
    radial-gradient(ellipse at 30% 18%, rgba(255, 255, 255, .55), transparent 45%),
    linear-gradient(160deg, var(--rouge-1), var(--rouge-2) 60%, var(--rouge-3));
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .4), inset 0 -4px 0 rgba(0, 0, 0, .25),
              0 4px 8px rgba(120, 20, 10, .45), 0 0 calc(var(--c) * .25) rgba(255, 80, 60, .35);
}
.bloc.rouge::after { display: none; }
.bloc.coince { box-shadow: inset 0 0 0 3px #fff, 0 0 0 3px var(--mauvais), 0 4px 8px rgba(0, 0, 0, .4); }
/* Le bloc que le tutoriel désigne : un halo qui bat. */
.bloc.repere::before {
  content: ''; position: absolute; inset: calc(var(--c) * -.1); border-radius: calc(var(--c) * .22);
  border: 3px solid #fff; box-shadow: 0 0 0 3px var(--accent), 0 0 18px var(--accent);
  animation: repere 1s ease-in-out infinite;
}
@keyframes repere { 0%, 100% { opacity: .35; transform: scale(.98); } 50% { opacity: 1; transform: scale(1.03); } }
/* La sortie du rouge : il passe la porte, et s'efface. */
.bloc.rouge.sort { transition: transform .5s cubic-bezier(.5, 0, .7, 1), opacity .5s ease-in; opacity: 0; }

/* LE POUSSEUR : une bille bleue avec des yeux qui regardent où il va. */
.homme { z-index: 2; }
.homme .corps {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff9 0, transparent 38%),
              radial-gradient(circle at 50% 60%, var(--homme-1), var(--homme-2) 65%, var(--homme-3));
  box-shadow: 0 4px 6px rgba(10, 30, 80, .4), inset 0 -3px 0 rgba(0, 0, 0, .18);
}
.homme .oeil {
  position: absolute; top: 30%; width: 26%; height: 30%; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .15);
}
.homme .oeil.g { left: 20%; } .homme .oeil.d { right: 20%; }
.homme .pupille {
  position: absolute; width: 55%; height: 55%; border-radius: 50%; background: #13234a;
  left: 22%; top: 22%; transition: transform .12s;
}
.homme[data-regard="h"] .pupille { transform: translate(0, -35%); }
.homme[data-regard="b"] .pupille { transform: translate(0, 35%); }
.homme[data-regard="g"] .pupille { transform: translate(-35%, 0); }
.homme[data-regard="d"] .pupille { transform: translate(35%, 0); }
.homme.bute .corps { animation: bute .18s ease-out; }
@keyframes bute { 0%, 100% { translate: 0 0; } 40% { translate: var(--bx, 0) var(--by, 0); } }
.homme.pousse .corps { animation: pousse .14s ease-out; }
@keyframes pousse { 50% { scale: 1.08 .92; } }
.homme.content .corps { animation: content .5s ease-in-out 2; }
@keyframes content { 50% { translate: 0 -18%; } }

/* Les confettis de la victoire. */
.confetti {
  position: absolute; width: calc(var(--c) * .14); height: calc(var(--c) * .22);
  border-radius: 2px; left: var(--x); top: var(--y);
  animation: confetti 1s cubic-bezier(.2, .7, .4, 1) forwards;
}
@keyframes confetti {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--vx), var(--vy)) rotate(var(--r)); opacity: 0; }
}

/* LES COMMANDES, MONTRÉES AU PREMIER NIVEAU : des touches, ou un doigt qui glisse. */
.aide-commandes {
  position: absolute; left: 50%; bottom: calc(var(--c) * .35); transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; z-index: 4;
  background: rgba(40, 25, 10, .82); color: #fff; border-radius: 14px; padding: 9px 14px;
  font-size: 13.5px; font-weight: 800; white-space: nowrap; pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
  animation: apparait .4s ease-out;
}
.aide-commandes[hidden] { display: none; }
.aide-commandes .touches { display: grid; grid-template-columns: repeat(3, 24px); grid-template-rows: 24px 24px; gap: 3px; }
.touche {
  border-radius: 5px; background: #fff; color: #3a2614; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 -3px 0 #c9bfae; animation: touche 1.6s infinite;
}
.touche.h { grid-column: 2; grid-row: 1; } .touche.g { grid-column: 1; grid-row: 2; animation-delay: .4s; }
.touche.b { grid-column: 2; grid-row: 2; animation-delay: .8s; } .touche.d { grid-column: 3; grid-row: 2; animation-delay: 1.2s; }
@keyframes touche { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(2px); box-shadow: inset 0 -1px 0 #c9bfae; } }
.aide-commandes .texte { display: flex; flex-direction: column; }
.aide-commandes .texte small { font-weight: 700; opacity: .8; }
.doigt { position: relative; width: 52px; height: 30px; }
.doigt::before {
  content: ''; position: absolute; width: 22px; height: 22px; border-radius: 50%; top: 4px; left: 0;
  background: rgba(255, 255, 255, .95); box-shadow: 0 0 0 5px rgba(255, 255, 255, .3);
  animation: glisse 1.3s ease-in-out infinite;
}
@keyframes glisse { 0% { transform: translateX(0); opacity: 0; } 20% { opacity: 1; } 80% { transform: translateX(28px); opacity: 1; } 100% { transform: translateX(30px); opacity: 0; } }
@keyframes apparait { from { opacity: 0; transform: translate(-50%, 10px); } }

/* ── LES CARTES (fin, niveaux, règles) ───────────────────────────────── */
.voile {
  position: fixed; inset: 0; z-index: 10;
  background: rgba(30, 20, 10, .45); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 12px;
}
.voile[hidden] { display: none; }
.carte {
  background: #fffaf1; color: var(--encre); border-radius: 22px; padding: 18px 20px;
  width: 100%; max-width: 470px; max-height: 100%; overflow: auto;
  box-shadow: 0 5px 0 rgba(70, 45, 20, .18), 0 18px 50px rgba(30, 15, 0, .35);
  animation: carte .28s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes carte { from { transform: scale(.85) translateY(12px); opacity: 0; } }
.carte.large { max-width: 780px; height: min(100%, 700px); display: flex; flex-direction: column; }
.carte h2 { margin: 0 0 6px; font-size: 22px; font-weight: 900; }
.carte h3 { margin: 12px 0 2px; font-size: 15.5px; color: var(--accent); font-weight: 900; }
.carte p { margin: 4px 0; font-size: 14.5px; color: var(--encre-2); font-weight: 600; }
.note { font-size: 13.5px; color: var(--encre-3); }
.actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.gros {
  border: 0; border-radius: 14px; padding: 11px 20px; font-size: 16px; font-weight: 900;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px;
}
.gros svg { width: 20px; height: 20px; }
.gros.primaire { background: var(--accent); color: #fff; box-shadow: 0 4px 0 var(--accent-2), 0 6px 14px rgba(0, 0, 0, .18); }
.gros.secondaire { background: #fff; color: var(--encre-2); box-shadow: 0 4px 0 var(--ligne), 0 6px 14px rgba(0, 0, 0, .08); }
.gros.petit { padding: 7px 14px; min-height: 36px; font-size: 14px; }
.gros:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .2); }
.gros[hidden] { display: none; }

.fin { text-align: center; }
.fin h2 { color: var(--accent); font-size: 26px; }
.fin .fin-score { font-size: 16px; color: var(--encre); font-weight: 800; }
.fin p[hidden] { display: none; }
.etoiles { display: flex; justify-content: center; align-items: flex-end; gap: 6px; margin: 2px 0 8px; }
.etoiles .etoile {
  width: 52px; height: 52px; color: #e3d8c6;
  filter: drop-shadow(0 3px 0 rgba(70, 45, 20, .15));
}
.etoiles .etoile.grande { width: 68px; height: 68px; }
.etoiles .etoile.gagnee { color: var(--or); filter: drop-shadow(0 3px 0 var(--or-2)) drop-shadow(0 0 10px rgba(255, 200, 40, .6)); animation: etoile .45s cubic-bezier(.2, 1.6, .4, 1) backwards; }
@keyframes etoile { from { transform: scale(0) rotate(-40deg); } }

.carte-tete { display: flex; align-items: center; gap: 12px; }
.carte-tete .note { margin-right: auto; }
.pages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 8px 0; }
.onglet {
  border: 0; border-radius: 12px; padding: 7px 4px; line-height: 1.25; min-width: 0;
  background: #fff; color: var(--encre-2); box-shadow: 0 3px 0 var(--ligne);
  border-bottom: 4px solid var(--c-p); display: flex; flex-direction: column; align-items: center;
}
.onglet b { font-size: 15px; font-weight: 900; }
.onglet span { font-size: 12px; color: var(--encre-3); display: inline-flex; align-items: center; gap: 3px; }
.onglet span svg { width: 12px; height: 12px; color: var(--or); }
.onglet[data-p="0"] { --c-p: #2a9a58; } .onglet[data-p="1"] { --c-p: #2f72c4; }
.onglet[data-p="2"] { --c-p: #7a4fc4; } .onglet[data-p="3"] { --c-p: #c4621b; }
.onglet[aria-selected="true"] { background: var(--c-p); color: #fff; }
.onglet[aria-selected="true"] span { color: rgba(255, 255, 255, .9); }
.onglet[aria-selected="true"] span svg { color: #ffe08a; }
@media (max-width: 460px) { .pages { grid-template-columns: repeat(2, 1fr); } }
.grille {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px;
  overflow: auto; min-height: 0; padding: 4px 2px;
}
.pastille {
  position: relative; border: 0; border-radius: 12px; padding: 7px 2px 5px;
  background: #fff; color: var(--encre-2); font-size: 15px; font-weight: 900;
  box-shadow: 0 3px 0 var(--ligne); font-variant-numeric: tabular-nums;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.pastille .mini { display: flex; gap: 1px; }
.pastille .mini svg { width: 11px; height: 11px; color: #e6dccb; }
.pastille .mini svg.on { color: var(--or); }
.pastille.fait { background: #f0fbf3; }
.pastille.tuto { background: #fff7e0; }
.pastille:disabled { background: rgba(255, 255, 255, .5); color: #c9bba8; box-shadow: none; }
.pastille:disabled svg.cadenas { width: 14px; height: 14px; color: #cdbfac; }
.pastille[aria-current="true"] { outline: 3px solid var(--accent); outline-offset: 1px; }

.voile.pub { flex-direction: column; color: #fff; z-index: 20; }
.voile.pub p { margin: 10px 0 0; font-size: 14px; opacity: .85; }
.roue {
  width: 36px; height: 36px; border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, .25); border-top-color: #fff;
  animation: tourne .8s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .piece { transition: none; }
}