*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#1a2a3d;font-family:"Trebuchet MS",Arial,sans-serif}
body{display:grid;place-items:center}
button{font:inherit}

.game{
  position:relative;
  width:min(100vw,calc(100vh * 1536 / 1024));
  aspect-ratio:1536/1024;
  overflow:hidden;
  user-select:none;
  background:#1a2a3d;
  container-type:inline-size;
}
.skin{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}

.hotspot{position:absolute;z-index:20;border:0;background:transparent;color:transparent;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hotspot:focus-visible{outline:4px solid rgba(255,255,255,.8);outline-offset:-4px}

.level-btn{left:.65%;width:18.55%;border-radius:14px}
.level-btn[data-level="1"]{top:31.05%;height:14.36%}
.level-btn[data-level="2"]{top:46.09%;height:16.41%}
.level-btn[data-level="3"]{top:63.28%;height:13.67%}

.consigne-bar{
  position:absolute;z-index:16;left:30%;top:36%;width:53%;height:4.8%;
  display:flex;align-items:center;
  font-size:clamp(9px,1.5cqw,19px);font-weight:700;color:#2b2210;
}
.pills{
  position:absolute;z-index:16;left:24%;width:50%;top:22%;height:6.4%;
  display:flex;gap:0;justify-content:space-between;align-items:center;
}
.pill{
  width:clamp(23px,4.1cqw,41px);height:clamp(23px,4.1cqw,41px);border-radius:50%;
  background:#241f2e;border:3px solid #c99a3f;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(12px,1.8cqw,19px);font-weight:800;color:#fff;
  box-shadow:0 2px 3px rgba(0,0,0,.35);
}
.pill.current{background:#3fae4a;border-color:#eaff9c}
.pill.good{background:#3fae4a;border-color:#dff2c4}
.pill.bad{background:#c94a3f;border-color:#f3b8b3}

.panel{
  position:absolute;z-index:14;left:23.37%;width:59.11%;top:41.41%;height:45.41%;
  padding:1.5% 3%;display:flex;flex-direction:column;
  background:#f8eedf;
}
.panel-top{
  display:flex;justify-content:space-between;
  font-size:clamp(8px,1cqw,13px);font-weight:800;color:#5a4a2a;
  flex:0 0 auto;
}
.sentence-zone{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  min-height:14%;padding:1% 0;
}
.sentence{
  font-size:clamp(10px,1.5cqw,18px);font-weight:800;color:#26201a;text-align:center;margin:0;
  line-height:1.25;
}
.sentence .blank{
  display:inline-block;min-width:2.4em;border-bottom:4px solid #8a6a2a;
  color:transparent;
}
.sentence .filled{color:#1a6b2e;border-bottom-color:#1a6b2e}
.sentence .filled.wrong{color:#b52d32;border-bottom-color:#b52d32}

.choices-zone{
  flex:1 1 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:2%;padding:.5% 0;overflow:hidden;
}
.choice-btn{
  background:linear-gradient(#fff6e0,#f3dfa8);border:3px solid #a97c2f;border-radius:12px;
  box-shadow:0 3px 0 #7a5a1a;
  font-size:clamp(9px,1.3cqw,16px);font-weight:800;color:#2b2210;
  padding:.35em 1em;cursor:pointer;min-width:18%;line-height:1.25;
}
.choice-btn:hover{filter:brightness(1.04)}
.choice-btn:active{transform:translateY(2px);box-shadow:0 2px 0 #7a5a1a}
.choice-btn.correct{background:linear-gradient(#dcf5cf,#b8e79c);border-color:#2f6b16}
.choice-btn.wrong{background:linear-gradient(#fbd8d5,#f3aca6);border-color:#8a2b23}
.choice-btn.locked{pointer-events:none;opacity:.55}
.choice-btn.locked.correct,.choice-btn.locked.wrong{opacity:1}

.status{
  flex:0 0 auto;min-height:1.4em;text-align:center;
  font-size:clamp(9px,1.1cqw,14px);font-weight:800;
  color:#173b59;
}
.status.ok{color:#1a6b2e}
.status.fail{color:#b52d32}

.next-btn{
  display:flex;align-items:center;gap:6px;
  background:linear-gradient(#7ed957,#4caf28);border:3px solid #2d6b13;border-radius:999px;
  color:#fff;font-weight:1000;font-size:clamp(12px,1.8cqw,20px);
  padding:.5em 1.4em;cursor:pointer;box-shadow:0 4px 0 #235510;
}
.next-btn:active{transform:translateY(2px);box-shadow:0 2px 0 #235510}
.next-btn[hidden]{display:none}
#nextBtn{
  position:absolute;z-index:30;left:74%;width:16%;top:89.3%;height:6.8%;
  background:transparent;border:0;border-radius:16px;
  cursor:pointer;
  background-image:url('assets/suivant-btn.png');
  background-size:contain;background-repeat:no-repeat;background-position:center;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.35));
  transition:transform .15s ease;
}
#nextBtn:hover{transform:scale(1.05)}
#nextBtn:active{transform:scale(.98)}
.score-badge{
  position:absolute;z-index:16;left:80.5%;width:19%;top:20%;height:10.3%;
  display:flex;align-items:center;justify-content:center;gap:6px;
  background:#fff6e0;border:3px solid #a97c2f;border-radius:14px;
  box-shadow:0 3px 0 #7a5a1a;
  font-size:clamp(10px,1.6cqw,18px);font-weight:800;color:#5a4a2a;
}
.score-badge .star{color:#f5b400;font-size:1.2em}

.summary{
  position:absolute;z-index:40;left:21.21%;top:33.71%;width:60.67%;height:52.12%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(20,20,30,.55);border-radius:10px;
}
.summary:not(.show){display:none}
.summary-card{
  background:linear-gradient(#fff2c4,#eebc68);border:5px solid #70451f;border-radius:20px;
  box-shadow:0 8px 0 #44280f;padding:4% 6%;text-align:center;color:#2c261d;
}
.summary-title{font-size:clamp(16px,2.4cqw,30px);font-weight:1000}
.summary-score{font-size:clamp(20px,3.4cqw,42px);font-weight:1000;margin:.4em 0 .8em;color:#7a3e0d}

@media(max-width:760px){
  .level-btn{border-radius:10px}
}
.bg-link {
  position: absolute;
  display: block;
  z-index: 50;
  background: transparent;
  cursor: pointer;
}

/* RETOUR AUX JEUX */
.retour-link {
  left: 0.55%;
  top: 0.7%;
  width: 20.8%;
  height: 11.6%;
}

/* FICHES PÉDAGOGIQUES */
.fiche-link {
  left: 0.55%;
  top: 13.4%;
  width: 20.8%;
  height: 10.9%;
}