*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#07182a;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:#07182a;
}
.skin{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}

/* Liens du background */
.bg-link{position:absolute;z-index:55;display:block;background:transparent}
.retour-link{left:.8%;top:2.0%;width:20.7%;height:10.0%}
.fiche-link{left:.8%;top:13.0%;width:20.7%;height:9.8%}

/* Niveaux : aucun halo, aucune bordure visible */
.level-hotspot{
  position:absolute;z-index:45;left:1.6%;width:15.4%;height:11.1%;
  border:0;background:transparent;cursor:pointer;padding:0;
  -webkit-tap-highlight-color:transparent;
}
.level-hotspot[data-level="1"]{top:35.0%}
.level-hotspot[data-level="2"]{top:47.0%}
.level-hotspot[data-level="3"]{top:59.1%}
.level-hotspot[data-level="4"]{top:71.2%}
.level-hotspot:focus-visible{outline:3px dashed rgba(255,255,255,.8);outline-offset:-6px}

/* Compteur 1/10 : on couvre le texte imprimé pour le rendre dynamique */
.step-cover{
  position:absolute;z-index:32;left:22.35%;top:17.25%;width:7.25%;height:7.1%;
  display:grid;place-items:center;
  background:linear-gradient(#0c5ba0,#07396b);
  border:3px solid #11273d;border-radius:10px;
  color:#fff;font-weight:1000;font-size:clamp(14px,1.75vw,28px);
  text-shadow:0 2px 2px #001b33;
}

/* Ronds 1-10 : seulement une fine indication dynamique */
.progress{position:absolute;z-index:31;inset:0;pointer-events:none}
.pip{
  position:absolute;top:17.55%;width:4.45%;aspect-ratio:1;border-radius:50%;
  border:3px solid transparent;background:transparent;
}
.pip:nth-child(1){left:30.45%}.pip:nth-child(2){left:35.36%}.pip:nth-child(3){left:40.25%}
.pip:nth-child(4){left:45.16%}.pip:nth-child(5){left:50.06%}.pip:nth-child(6){left:54.98%}
.pip:nth-child(7){left:59.88%}.pip:nth-child(8){left:64.79%}.pip:nth-child(9){left:69.70%}
.pip:nth-child(10){left:74.58%}
.pip.current{border-color:#ffd34a;box-shadow:0 0 7px rgba(255,211,74,.75)}
.pip.good{background:rgba(72,185,63,.38);border-color:#84e273}
.pip.bad{background:rgba(219,65,65,.34);border-color:#ff8686}

/* Le cartouche bleu haut droite couvre le TEMPS imprimé du fond */
.info-panel{
  position:absolute;z-index:34;left:85.15%;top:15.85%;width:13.9%;height:8.9%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(#0b4b82,#07335f);
  border:3px solid #9a6c26;border-radius:12px;
  box-shadow:inset 0 0 0 2px #173f64,0 3px 0 #3b2610;
  text-align:center;
}
.info-title{font-size:clamp(8px,.9vw,14px);font-weight:1000;color:#fff;letter-spacing:.04em}
.info-value{font-size:clamp(14px,2vw,31px);font-weight:1000;color:#ffd33f;line-height:1.05}
.info-panel.challenge .info-value{color:#ffd33f}
.info-panel.challenge .info-title::before{content:"⌛ ";}

/* Zone blanche du fond */
.work-area{
  position:absolute;z-index:20;
  left:19.15%;top:25.8%;width:67.7%;height:57.6%;
  overflow:hidden;
  border-radius:10px;
}

/* Bandeau noir 80 % en haut de la zone de travail */
.decomposition-banner{
  position:absolute;z-index:3;left:0;top:0;width:100%;height:15.5%;
  display:flex;align-items:center;justify-content:center;
  padding:0 3%;
  background:rgba(0,0,0,.80);
  color:#fff;text-align:center;
}
#decompositionText{
  font-size:clamp(12px,1.55vw,25px);
  font-weight:1000;letter-spacing:.035em;
  text-shadow:0 2px 1px rgba(0,0,0,.9);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.work-content{
  position:absolute;left:0;right:0;top:15.5%;bottom:0;
  display:flex;flex-direction:column;align-items:center;
  padding-top:2.3%;
}
.prompt{
  color:#173a67;font-weight:1000;
  font-size:clamp(11px,1.35vw,21px);
  margin-bottom:1.5%;
}
.answer-shell{
  width:61%;height:13%;
  display:flex;align-items:center;justify-content:center;
  background:#edf6ff;border:3px solid #4284bb;border-radius:17px;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.12),0 3px 0 rgba(27,75,117,.18);
}
.answer-display{
  max-width:94%;overflow:hidden;white-space:nowrap;
  color:#12395e;font-weight:1000;font-size:clamp(20px,3vw,47px);
  letter-spacing:.035em;
}
.answer-display.empty{font-size:clamp(11px,1.25vw,19px);color:#7892aa;font-weight:800}
.answer-shell.good{background:#e9f9df;border-color:#64af37;animation:pop .28s ease}
.answer-shell.bad{background:#fff0f0;border-color:#d44d4d;animation:shake .28s ease}

/* Pavé numérique */
.keypad{
  width:46%;height:46%;margin-top:2.1%;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);
  gap:3.2%;
}
.keypad button{
  border:2px solid #195487;border-radius:12px;
  background:linear-gradient(#2c91d9,#1264a4);
  color:#fff;font-weight:1000;font-size:clamp(15px,1.8vw,28px);
  box-shadow:0 4px 0 #0b3c68;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.keypad button:active{transform:translateY(2px);box-shadow:0 2px 0 #0b3c68}
.key-zero{grid-column:1/3}
.key-back{background:linear-gradient(#ffb241,#e47716)!important;border-color:#a2520d!important;box-shadow:0 4px 0 #8b4308!important}

.status{
  margin-top:2.3%;min-height:7%;width:78%;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:0 2%;border-radius:11px;
  color:#294b6b;background:#eef6fc;
  font-size:clamp(9px,1vw,15px);font-weight:900;
}
.status.ok{color:#267518;background:#e7f8e0}
.status.fail{color:#b52d32;background:#fff0f0}

/* Boutons du décor */
.hotspot{position:absolute;z-index:50;border:0;background:transparent;cursor:pointer;padding:0}
.undo-hotspot{left:56.6%;top:86.0%;width:8.4%;height:11.4%}
.clear-hotspot{left:65.3%;top:86.0%;width:8.4%;height:11.4%}
.validate-hotspot{left:74.5%;top:86.0%;width:15.7%;height:11.4%}
.home-hotspot{left:91.2%;top:86.0%;width:7.4%;height:11.4%}
.hotspot:disabled{pointer-events:none;opacity:.38}

/* Modales */
.overlay{
  position:absolute;inset:0;z-index:90;
  display:flex;align-items:center;justify-content:center;
  background:rgba(4,15,31,.82)
}
.overlay[hidden]{display:none}
.card{
  width:min(520px,82%);padding:26px 28px;text-align:center;
  color:#fff;background:linear-gradient(#0c568f,#082f58);
  border:5px solid #d69a32;border-radius:24px;
  box-shadow:0 9px 0 #52320f,0 14px 28px rgba(0,0,0,.4)
}
.card-icon{font-size:48px}
.card h2{margin:4px 0 10px;font-size:clamp(23px,2.4vw,38px)}
.card p{font-size:clamp(13px,1.25vw,19px);line-height:1.45}
.card button{
  margin-top:8px;padding:12px 24px;border:3px solid #426f17;border-radius:14px;
  background:#64c42e;color:#fff;font-weight:1000;font-size:17px;cursor:pointer
}

.rotate-notice{display:none}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes pop{50%{transform:scale(1.025)}}

@media(max-width:900px){
  .step-cover,.info-panel{border-width:1px}
  .pip{border-width:2px}
  .answer-shell{border-width:2px;border-radius:8px}
  .keypad button{border-width:1px;border-radius:6px;box-shadow:0 2px 0 #0b3c68}
}
@media(orientation:portrait) and (max-width:820px){
  .rotate-notice{
    display:flex;position:fixed;inset:0;z-index:999;
    align-items:center;justify-content:center;padding:30px;text-align:center;
    background:#07182a;color:#fff;font-size:22px;font-weight:1000
  }
  .rotate-notice div{padding:24px;border:4px solid #d69a32;border-radius:22px;background:#08335f}
}


/* =====================================================
   V2 — HALOS RECALÉS SUR LE BACKGROUND
   ===================================================== */
.pip{
  position:absolute !important;
  top:16.99% !important;
  width:4.45% !important;
  aspect-ratio:1/1 !important;
  border-radius:50% !important;
  box-sizing:border-box !important;
}
.pip:nth-child(1)  { left:30.152% !important; }
.pip:nth-child(2)  { left:35.287% !important; }
.pip:nth-child(3)  { left:40.263% !important; }
.pip:nth-child(4)  { left:45.240% !important; }
.pip:nth-child(5)  { left:50.296% !important; }
.pip:nth-child(6)  { left:55.510% !important; }
.pip:nth-child(7)  { left:60.487% !important; }
.pip:nth-child(8)  { left:65.464% !important; }
.pip:nth-child(9)  { left:70.520% !important; }
.pip:nth-child(10) { left:75.576% !important; }

.pip.current{
  background:transparent !important;
  border:2px solid #ffd34a !important;
  box-shadow:0 0 4px rgba(255,211,74,.72) !important;
}
.pip.good{
  background:rgba(72,185,63,.13) !important;
  border:2px solid #84e273 !important;
  box-shadow:0 0 4px rgba(132,226,115,.55) !important;
}
.pip.bad{
  background:rgba(219,65,65,.13) !important;
  border:2px solid #ff8686 !important;
  box-shadow:0 0 4px rgba(255,134,134,.55) !important;
}


/* V3 — consigne du bas légèrement descendue */
.status {
  margin-top: 3.8% !important;
}