*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#102c17;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.5));
  aspect-ratio:3/2;
  overflow:hidden;
  user-select:none;
  background:#12351d;
}
.skin{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}

/* Dynamic instruction covers only the text area; the illustrated panel remains visible. */
.challenge-live{
  position:absolute;z-index:12;left:29.35%;top:30.45%;width:34.9%;height:7.1%;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 .7%;border-radius:7px;
  background:linear-gradient(180deg,#fff2bd 0%,#f6dc91 100%);
  color:#26251f;
}
.challenge-kicker{color:#0d5f98;font-size:clamp(8px,.84vw,13px);font-weight:1000;line-height:1}
#challengeText{font-size:clamp(11px,1.34vw,21px);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.attempts-live{
  position:absolute;z-index:13;left:67.45%;top:33.0%;width:4.2%;height:3.4%;
  display:flex;align-items:center;justify-content:space-between;
}
.attempts-live i{
  display:block;width:42%;aspect-ratio:1;border-radius:50%;
  background:#fff;border:2px solid #607080;
}
.attempts-live i.used{background:#67bd2d;border-color:#3e7318}

/* Interactive SVG replaces the printed grid while staying inside the stone frame. */
.board-stage{
  position:absolute;z-index:10;left:25.55%;top:39.25%;width:46.75%;height:34.15%;
  background:#fff;border-radius:2px;overflow:hidden;
}
#board{display:block;width:100%;height:100%;background:#fff;cursor:crosshair;touch-action:none}
.grid-line{stroke:#c2c6c9;stroke-width:1}
.cross-mark{stroke:#2f8fd2;stroke-width:3.2;stroke-linecap:round;pointer-events:none}
.drag-start-cross{stroke:#2f8fd2!important;stroke-width:3.8!important}
.draw-segment{stroke:#2f8fd2;stroke-width:5;stroke-linecap:round;pointer-events:stroke;cursor:pointer}
.draw-segment.preview{stroke-dasharray:8 5;opacity:.72;pointer-events:none}
.measure-label,.live-measure{
  font-size:17px;font-weight:900;fill:#2f8fd2;
  paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round;pointer-events:none
}
.correction-segment{stroke:#ef3f45;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.correction-cross{stroke:#ef3f45;stroke-width:3.6;stroke-linecap:round;pointer-events:none}
.correction-measure{
  font-size:18px;font-weight:900;fill:#d9232b;
  paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round;pointer-events:none
}

.status{
  position:absolute;z-index:14;left:25.9%;top:74.7%;width:46.1%;height:5.2%;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:0 1%;border-radius:8px;background:rgba(255,255,255,.95);
  color:#173b59;font-size:clamp(8px,.9vw,14px);font-weight:900;
}
.status.ok{background:rgba(231,248,224,.97);color:#28771b}
.status.fail{background:rgba(255,239,239,.97);color:#b52d32}

.step-live{
  position:absolute;z-index:13;left:19.0%;top:21.25%;width:6.0%;height:5.6%;
  display:grid;place-items:center;color:#ffd441;font-weight:1000;
  font-size:clamp(15px,1.9vw,29px);text-shadow:0 2px #55310d;
}
.progress-live{
  position:absolute;z-index:13;left:27.25%;top:20.72%;width:48.65%;height:6.75%;
  display:flex;align-items:center;justify-content:space-between;pointer-events:none;
}
.progress-live .pip{
  width:8.25%;aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;
  border:2px solid #34312c;background:rgba(72,72,67,.96);
  color:#fff;font-size:clamp(10px,1.34vw,20px);font-weight:1000;
  box-shadow:0 2px 0 #0006;
}
.progress-live .pip.current{background:#ffc329;color:#643405}
.progress-live .pip.good{background:#57b92c}
.progress-live .pip.bad{background:#d74b43}

/* Transparent clickable masks */
.hotspot{position:absolute;z-index:25;border:0;background:transparent;color:transparent;padding:0;cursor:pointer}
.hotspot:focus-visible{outline:4px solid rgba(255,255,255,.8);outline-offset:-4px}
.hotspot:disabled{cursor:not-allowed}

.level-btn{left:2.15%;width:13.65%;height:8.6%}
.level-btn[data-level="1"]{top:42.3%}
.level-btn[data-level="2"]{top:51.55%}
.level-btn[data-level="3"]{top:60.85%}
.level-btn[data-level="4"]{top:70.15%}
.level-glow{
  position:absolute;z-index:14;left:2.05%;top:42.2%;width:13.85%;height:8.8%;
  border:4px solid #c8ff77;border-radius:14px;box-shadow:0 0 14px #9deb56;
  pointer-events:none;transition:top .18s ease;
}
.help-hotspot{left:1.0%;top:1.25%;width:7.1%;height:9.4%}
.settings-hotspot{right:1.0%;top:1.25%;width:7.1%;height:9.4%}
.sound-hotspot{left:1.25%;top:87.1%;width:7.0%;height:10.0%}
.undo-hotspot{left:62.0%;top:86.2%;width:7.2%;height:11.6%}
.clear-hotspot{left:69.6%;top:86.2%;width:7.2%;height:11.6%}
.validate-hotspot{left:77.7%;top:86.0%;width:13.7%;height:12.0%}
.home-hotspot{left:92.0%;top:86.0%;width:7.0%;height:12.0%}

.modal,.summary{
  position:absolute;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
  background:rgba(15,35,27,.84);
}
.modal.open,.summary.show{display:flex}
.modal-card,.summary-card{
  width:min(410px,84%);padding:24px;text-align:center;
  background:linear-gradient(#fff2c4,#eebc68);
  border:6px solid #70451f;border-radius:24px;box-shadow:0 8px 0 #44280f;
  position:relative;color:#2c261d;
}
.modal-card .close{position:absolute;right:9px;top:5px;border:0;background:transparent;font-size:30px;cursor:pointer}
.modal-icon,.trophy{font-size:56px}
.modal-card button:not(.close),.summary-card button{
  border:3px solid #477719;border-radius:14px;background:#63c42d;
  color:#fff;padding:11px 20px;font-weight:1000;cursor:pointer;
}
@media(max-width:760px){
  .progress-live .pip{border-width:1px}
  .level-glow{border-width:2px}
}


/* ---- bloc CSS suivant ---- */


/* Alignement exact de la barre 1–10 sur le nouveau fond perroquet */
.progress-live{
  left:26.66% !important;
  top:19.55% !important;
  width:50.60% !important;
  height:7.05% !important;
}
.progress-live .pip{
  width:8.10% !important;
  flex:0 0 8.10% !important;
}
/* Recalage du compteur d'étape dans son cartouche */
.step-live{
  left:17.85% !important;
  top:20.05% !important;
  width:6.40% !important;
  height:6.05% !important;
}


/* ---- bloc CSS suivant ---- */


/* Quadrillage mathématiquement carré */
.board-stage{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#fff !important;
  overflow:hidden !important;
}
#board{
  height:100% !important;
  width:auto !important;
  aspect-ratio:620 / 420 !important;
  flex:0 0 auto !important;
  background:#fff !important;
}


/* ---- bloc CSS suivant ---- */


/* Recalage global sur le skin perroquet */

/* Masque blanc complet de la zone de travail, puis SVG carré centré. */
.board-stage{
  left:23.35% !important;
  top:38.25% !important;
  width:50.55% !important;
  height:36.15% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#fff !important;
  overflow:hidden !important;
}
#board{
  height:100% !important;
  width:auto !important;
  aspect-ratio:620/420 !important;
  flex:0 0 auto !important;
  background:#fff !important;
}

/* La consigne recouvre entièrement le texte imprimé du fond. */
.challenge-live{
  left:27.55% !important;
  top:29.55% !important;
  width:37.35% !important;
  height:7.05% !important;
  padding-left:1.1% !important;
}

/* Les tentatives recouvrent entièrement le panneau imprimé. */
.attempts-live{
  left:65.05% !important;
  top:29.75% !important;
  width:8.55% !important;
  height:6.75% !important;
}

/* Le compteur remplace le nombre imprimé au lieu de se superposer. */
.step-live{
  left:17.55% !important;
  top:19.25% !important;
  width:7.75% !important;
  height:7.45% !important;
  background:linear-gradient(#65513b,#3e3427) !important;
  border-radius:12px !important;
  color:#ffd441 !important;
}

/* On conserve les nombres du fond et on superpose seulement l'état. */
/* Positions mesurées individuellement sur assets/interface-jungle.png (les 10 ronds ne sont pas
   parfaitement équidistants dans l'illustration, une grille régulière créait un décalage progressif). */
.progress-live{
  left:0 !important;
  top:0 !important;
  width:100% !important;
  height:100% !important;
  display:block !important;
  pointer-events:none !important;
}
.progress-live .pip{
  position:absolute !important;
  top:19.33% !important;
  width:4.30% !important;
  aspect-ratio:1 !important;
  font-size:0 !important;
  color:transparent !important;
  background:transparent !important;
  border:3px solid transparent !important;
  box-shadow:none !important;
  border-radius:50% !important;
}
.progress-live .pip:nth-child(1){left:26.50% !important}
.progress-live .pip:nth-child(2){left:31.70% !important}
.progress-live .pip:nth-child(3){left:36.91% !important}
.progress-live .pip:nth-child(4){left:42.12% !important}
.progress-live .pip:nth-child(5){left:47.33% !important}
.progress-live .pip:nth-child(6){left:52.41% !important}
.progress-live .pip:nth-child(7){left:57.49% !important}
.progress-live .pip:nth-child(8){left:62.69% !important}
.progress-live .pip:nth-child(9){left:67.90% !important}
.progress-live .pip:nth-child(10){left:72.98% !important}
.progress-live .pip.current{
  background:rgba(255,195,41,.62) !important;
  border-color:#ffd34c !important;
}
.progress-live .pip.good{
  background:rgba(87,185,44,.66) !important;
  border-color:#8fe25e !important;
}
.progress-live .pip.bad{
  background:rgba(215,75,67,.68) !important;
  border-color:#ff8b83 !important;
}

/* Message sous la grille, sans chevaucher la consigne imprimée. */
.status{
  left:25.2% !important;
  top:74.75% !important;
  width:47.5% !important;
  height:4.75% !important;
}

/* Cadre du niveau actif recalé dans les boutons. */
.level-btn{left:2.05% !important;width:13.70% !important}
.level-btn[data-level="1"]{top:41.55% !important}
.level-btn[data-level="2"]{top:50.85% !important}
.level-btn[data-level="3"]{top:60.15% !important}
.level-btn[data-level="4"]{top:69.45% !important}
.level-glow{
  left:2.00% !important;
  width:13.80% !important;
  height:8.75% !important;
}


/* ---- bloc CSS suivant ---- */


/* ===== Finition de la base réutilisable ===== */

/* Retour visuel discret sur les zones transparentes */
.hotspot{
  -webkit-tap-highlight-color:transparent;
  transition:filter .08s ease, transform .08s ease;
}
.hotspot:active{
  filter:brightness(1.14);
  transform:scale(.985);
}
.hotspot[disabled]{
  pointer-events:none !important;
}

/* États désactivés visibles sur les trois commandes concernées */
.undo-hotspot[disabled]::after,
.clear-hotspot[disabled]::after,
.validate-hotspot[disabled]::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  background:rgba(15,20,18,.28);
}

/* Animations de retour pédagogique */
@keyframes feedbackGood{
  0%{transform:scale(1)}
  45%{transform:scale(1.018)}
  100%{transform:scale(1)}
}
@keyframes feedbackBad{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-5px)}
  75%{transform:translateX(5px)}
}
.status.ok{animation:feedbackGood .35s ease}
.status.fail{animation:feedbackBad .28s ease}

/* Segments plus lisibles sur petits écrans */
@media(max-width:800px){
  .draw-segment{stroke-width:6}
  .cross-mark{stroke-width:3.8}
  .measure-label,.live-measure{font-size:19px}
}

/* Message en mode portrait : le jeu reste accessible mais conseille le paysage */
.rotate-notice{
  display:none;
  position:absolute;
  inset:0;
  z-index:90;
  align-items:center;
  justify-content:center;
  padding:28px;
  text-align:center;
  color:#fff;
  font-weight:900;
  font-size:22px;
  background:rgba(11,34,20,.94);
}
.rotate-notice span{
  display:block;
  max-width:420px;
  padding:24px;
  border:4px solid #d9ad48;
  border-radius:22px;
  background:#5b391b;
}
@media(orientation:portrait) and (max-width:760px){
  .rotate-notice{display:flex}
}

/* Respect des préférences d'accessibilité */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}


/* ---- bloc CSS suivant ---- */


.help-hotspot,.settings-hotspot,.sound-hotspot{display:none!important}
/* ==============================
   PANNEAUX LATERAUX DU JEU
   ============================== */

.pancartes-jeu {
    position: fixed;
    top: 18px;
    left: 8px;
    z-index: 999999;

    width: 250px;

    display: flex;
    flex-direction: column;
    gap: 12px;

    /* évite que le conteneur invisible gêne le jeu */
    pointer-events: none;
}


/* Chaque pancarte est cliquable */

.pancarte-jeu {
    display: block;
    width: 100%;

    pointer-events: auto;

    text-decoration: none;

    transition:
        transform .15s ease,
        filter .15s ease;
}


/* Images des pancartes */

.pancarte-jeu img {
    display: block;

    width: 100%;
    height: auto;

    border: 0;

    filter: drop-shadow(
        0 6px 6px rgba(0, 0, 0, .28)
    );
}


/* Petit effet au passage de la souris */

.pancarte-jeu:hover {
    transform: translateY(-2px) scale(1.02);
    filter: brightness(1.06);
}


/* Effet lorsqu'on clique */

.pancarte-jeu:active {
    transform: translateY(2px) scale(.98);
}


/* Écrans plus petits */

@media (max-width: 1200px) {

    .pancartes-jeu {
        width: 200px;
    }
}


/* Tablettes / petits écrans */

@media (max-width: 850px) {

    .pancartes-jeu {
        top: 8px;
        left: 5px;

        width: 155px;

        gap: 7px;
    }
}