*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#1d78b3;font-family:"Trebuchet MS",Arial,sans-serif}
body{display:grid;place-items:center}
button{font:inherit}
.game{
  position:relative;
  width:min(100vw,calc(100vh * 1.6));
  aspect-ratio:16/10;
  overflow:hidden;
  background:#2d8ec4;
  user-select:none;
}
.skin{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}

/* Score : cartouche haut droite */
.score-box{
  position:absolute;z-index:30;
  left:86.1%;top:3.8%;width:10.8%;height:7.4%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#5a2d0d;font-weight:900;font-size:clamp(9px,1.05vw,16px);line-height:1.2;
  text-align:center;
  background:rgba(255,241,204,.94);
  border-radius:8px;
}

/* Progression sur les 10 ronds */
.progress{
  position:absolute;z-index:25;inset:0;pointer-events:none;
}
.pip{
  position:absolute;top:20.25%;width:4.0%;aspect-ratio:1;border-radius:50%;
  background:transparent;border:3px solid transparent;
}
.pip:nth-child(1){left:29.9%}.pip:nth-child(2){left:34.7%}.pip:nth-child(3){left:39.45%}
.pip:nth-child(4){left:44.2%}.pip:nth-child(5){left:49.0%}.pip:nth-child(6){left:53.8%}
.pip:nth-child(7){left:58.55%}.pip:nth-child(8){left:63.3%}.pip:nth-child(9){left:68.1%}
.pip:nth-child(10){left:72.9%}
.pip.current{background:rgba(255,195,41,.55);border-color:#ffd34c}
.pip.good{background:rgba(87,185,44,.62);border-color:#8fe25e}
.pip.bad{background:rgba(215,75,67,.62);border-color:#ff8b83}

/* Niveaux : zones invisibles sur les 3 boutons du décor */
.level-hotspot{
  position:absolute;z-index:30;left:4.0%;width:15.0%;height:10.4%;
  border:0;background:transparent;cursor:pointer;color:transparent
}
.level-hotspot[data-level="1"]{top:39.0%}
.level-hotspot[data-level="2"]{top:51.0%}
.level-hotspot[data-level="3"]{top:63.0%}
.level-hotspot.active::after{
  content:"";
  position:absolute;inset:0;
  border:4px solid #75e13b;border-radius:15px;
  box-shadow:0 0 12px rgba(117,225,59,.8);
}

/* Consigne */
.instruction{
  position:absolute;z-index:24;
  left:28.1%;top:28.0%;width:48.0%;height:7.3%;
  display:flex;flex-direction:column;justify-content:center;
  padding-left:3.0%;
  color:#3b2a18;
}
.instruction strong{font-size:clamp(8px,.85vw,13px);color:#0c6194;line-height:1}
.instruction span{font-size:clamp(11px,1.25vw,20px);font-weight:900;line-height:1.2}

/* Grande zone quadrillée */
.board-stage{
  position:absolute;z-index:20;
  left:22.3%;top:37.3%;width:58.4%;height:40.6%;
  background:#fff;
  overflow:hidden;
}
#board{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;background:#fff}

.grid-line{stroke:#cbd2d8;stroke-width:1}
.axis-line{stroke:#7d7d7d;stroke-width:4}
.reference-segment{stroke:#171717;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.reference-point{fill:#111}
.draw-segment{stroke:#2d8fd5;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;cursor:pointer}
.preview{stroke-dasharray:10 7;opacity:.65;pointer-events:none}
.draw-point{fill:#2d8fd5}
.solution-segment{stroke:#e44343;stroke-width:6;stroke-linecap:round}
.solution-point{fill:#e44343}

/* Message sous le quadrillage */
.status{
  position:absolute;z-index:24;left:24.0%;top:79.7%;width:54.0%;height:4.2%;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:clamp(8px,.85vw,13px);font-weight:900;color:#173b59;
  background:rgba(255,255,255,.95);border-radius:9px;padding:0 1%;
}
.status.ok{background:#e7f8e0;color:#267518}
.status.fail{background:#fff0f0;color:#b52d32}

/* Hotspots commandes bas */
.hotspot{position:absolute;z-index:35;border:0;background:transparent;cursor:pointer}
.undo{left:61.8%;top:88.0%;width:7.0%;height:10.4%}
.clear{left:69.0%;top:88.0%;width:7.0%;height:10.4%}
.validate{left:77.0%;top:87.8%;width:13.5%;height:10.8%}
.home{left:92.0%;top:87.7%;width:6.8%;height:10.8%}
.hotspot:disabled{pointer-events:none;opacity:.35}

/* Suivant */
.next-btn{
  position:absolute;z-index:50;
  left:77.3%;top:79.4%;width:13.2%;height:5.6%;
  border:3px solid #426e18;border-radius:16px;
  background:linear-gradient(#8be148,#57b82d);color:#fff;font-weight:1000;
  box-shadow:0 4px 0 #2f7118;cursor:pointer
}
.next-btn[hidden]{display:none}

/* Fenêtres */
.modal,.summary{
  position:absolute;inset:0;z-index:80;display:none;align-items:center;justify-content:center;
  background:rgba(20,45,70,.76)
}
.modal.open,.summary.show{display:flex}
.modal-card,.summary-card{
  width:min(430px,80%);padding:24px;text-align:center;
  background:linear-gradient(#fff4c9,#efc675);
  border:5px solid #6c431e;border-radius:22px;box-shadow:0 8px 0 #41250d;color:#2d271f
}
.modal-card button,.summary-card button{
  border:3px solid #477719;border-radius:14px;background:#63c42d;color:#fff;
  padding:11px 22px;font-weight:1000;cursor:pointer
}
.trophy{font-size:56px}

.rotate-notice{display:none}
@media(orientation:portrait) and (max-width:800px){
  .rotate-notice{
    display:flex;position:fixed;inset:0;z-index:999;align-items:center;justify-content:center;
    padding:30px;text-align:center;background:#174b70;color:#fff;font-size:22px;font-weight:900
  }
}
@media(max-width:800px){
  .reference-segment,.draw-segment,.solution-segment{stroke-width:8}
  .level-hotspot.active::after{border-width:2px}
}


/* =========================================================
   V2 — RECALAGE DES SÉLECTIONS + SUPPRESSION CONSIGNE HTML
   Fond réel : 1536 x 1024
   ========================================================= */

.instruction{display:none !important}

/* NIVEAUX
   Cadres mesurés directement sur le fond :
   x≈46..260 ; y≈388..500 / 516..625 / 640..749
*/
.level-hotspot{
  left:2.95% !important;
  width:14.05% !important;
  height:11.15% !important;
  border-radius:18px !important;
}
.level-hotspot[data-level="1"]{top:37.85% !important}
.level-hotspot[data-level="2"]{top:50.40% !important}
.level-hotspot[data-level="3"]{top:62.40% !important}

.level-hotspot.active::after{
  inset:1.5% !important;
  border:4px solid #75e13b !important;
  border-radius:17px !important;
  box-shadow:0 0 10px rgba(117,225,59,.75) !important;
}

/* EXERCICES 1–10
   Chaque cercle est positionné individuellement sur le cercle imprimé du fond.
   On ne distribue plus les cadres avec des valeurs approximatives.
*/
.progress{inset:0 !important}

.pip{
  top:18.65% !important;
  width:4.25% !important;
  aspect-ratio:1 !important;
  border-radius:50% !important;
  border:3px solid transparent !important;
}

.pip:nth-child(1){left:30.00% !important}
.pip:nth-child(2){left:34.82% !important}
.pip:nth-child(3){left:39.58% !important}
.pip:nth-child(4){left:44.34% !important}
.pip:nth-child(5){left:49.15% !important}
.pip:nth-child(6){left:53.97% !important}
.pip:nth-child(7){left:58.79% !important}
.pip:nth-child(8){left:63.61% !important}
.pip:nth-child(9){left:68.42% !important}
.pip:nth-child(10){left:73.24% !important}

.pip.current{
  background:rgba(255,195,41,.28) !important;
  border-color:#ffd34c !important;
  box-shadow:0 0 7px rgba(255,211,76,.65) !important;
}
.pip.good{
  background:rgba(87,185,44,.35) !important;
  border-color:#8fe25e !important;
}
.pip.bad{
  background:rgba(215,75,67,.38) !important;
  border-color:#ff8b83 !important;
}

/* Mobile paysage : mêmes coordonnées proportionnelles. */
@media(max-width:800px){
  .level-hotspot.active::after{border-width:2px !important}
  .pip{border-width:2px !important}
}


/* =========================================================
   V3 — RECALAGE EXACT DU CERCLE D'EXERCICE ACTIF
   Mesuré sur background.png (1519 x 1036).
   ========================================================= */
.pip{
  top:18.92% !important;
  width:4.35% !important;
  aspect-ratio:1 !important;
}

/* Centres mesurés sur les 10 médaillons du fond */
.pip:nth-child(1){left:30.81% !important}
.pip:nth-child(2){left:35.55% !important}
.pip:nth-child(3){left:40.45% !important}
.pip:nth-child(4){left:45.35% !important}
.pip:nth-child(5){left:50.17% !important}
.pip:nth-child(6){left:55.07% !important}
.pip:nth-child(7){left:59.90% !important}
.pip:nth-child(8){left:65.11% !important}
.pip:nth-child(9){left:70.33% !important}
.pip:nth-child(10){left:75.07% !important}

/* Le rond jaune est déjà dessiné dans le fond :
   on n'ajoute plus un disque jaune par-dessus, seulement un fin contour. */
.pip.current{
  background:transparent !important;
  border:3px solid #ffd34c !important;
  box-shadow:0 0 7px rgba(255,211,76,.7) !important;
}


/* =========================================================
   V4 — PANNEAUX DU BACKGROUND CLIQUABLES
   ========================================================= */
.bg-link{
  position:absolute;
  z-index:70;
  display:block;
  background:transparent;
  border:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

/* Pancarte RETOUR AUX JEUX — haut gauche */
.retour-jeux-link{
  left:0.7%;
  top:2.0%;
  width:18.0%;
  height:11.5%;
}

/* Pancarte FICHE PÉDAGOGIQUES — juste dessous */
.fiche-pedago-link{
  left:0.7%;
  top:13.5%;
  width:18.0%;
  height:11.0%;
}

.bg-link:hover{
  background:rgba(255,255,255,.035);
}

.bg-link:focus-visible{
  outline:4px solid rgba(255,255,255,.95);
  outline-offset:-4px;
  border-radius:14px;
}

@media(max-width:800px){
  .bg-link:focus-visible{
    outline-width:2px;
  }
}