*{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 * 1485 / 1059));
  aspect-ratio:1485/1059;
  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:2.02%;width:16.50%;border-radius:14px}
.level-btn[data-level="1"]{top:36.45%;height:13.60%}
.level-btn[data-level="2"]{top:50.80%;height:12.84%}
.level-btn[data-level="3"]{top:64.40%;height:12.09%}
.level-glow{
  position:absolute;z-index:15;left:1.5%;width:17.5%;border-radius:16px;
  border:4px solid #ffe259;box-shadow:0 0 14px #ffe259;
  pointer-events:none;transition:top .18s ease;top:35.9%;height:14.6%;
}

.consigne-bar{
  position:absolute;z-index:16;left:23.5%;top:25.31%;width:48%;height:7.93%;
  display:flex;align-items:center;
  font-size:clamp(9px,1.5cqw,19px);font-weight:700;color:#2b2210;
}
.pills{
  position:absolute;z-index:16;left:20%;width:58%;top:16.5%;height:8%;
  display:flex;gap:.8%;justify-content:center;align-items:center;
}
.pill{
  width:clamp(22px,4.6cqw,42px);height:clamp(22px,4.6cqw,42px);border-radius:50%;
  background:#241f2e;border:3px solid #c99a3f;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(11px,2cqw,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:21.21%;width:60.67%;top:33.71%;height:52.12%;
  padding:1.5% 3%;display:flex;flex-direction:column;
}
.panel-top{
  display:flex;justify-content:space-between;
  font-size:clamp(9px,1.3cqw,16px);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:22%;padding:2% 0;
}
.sentence{
  font-size:clamp(14px,2.6cqw,32px);font-weight:800;color:#26201a;text-align:center;margin:0;
}
.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:3%;padding:1% 0;
}
.choice-btn{
  background:linear-gradient(#fff6e0,#f3dfa8);border:3px solid #a97c2f;border-radius:14px;
  box-shadow:0 4px 0 #7a5a1a;
  font-size:clamp(16px,3cqw,34px);font-weight:800;color:#2b2210;
  padding:.4em 1.2em;cursor:pointer;min-width:18%;
}
.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.6em;text-align:center;
  font-size:clamp(11px,1.6cqw,18px);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;right:3%;bottom:2.5%;
  background:linear-gradient(#7ed957,#4caf28);border:3px solid #2d6b13;border-radius:12px;
  box-shadow:0 5px 0 #235510;
  transition:transform .15s ease,box-shadow .15s ease;
}
#nextBtn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 8px 0 #235510}
#nextBtn:active{transform:translateY(2px) scale(1);box-shadow:0 2px 0 #235510}
.score-badge{
  position:absolute;z-index:16;left:81%;width:17%;top:16.8%;height:7.4%;
  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}
}
/* Pancartes cliquables du background */
.bg-link{
  position:absolute;
  z-index:60;
  display:block;
  background:transparent;
  border:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

/* Retour aux jeux */
.retour-link{
  left:0.7%;
  top:1.2%;
  width:18.2%;
  height:11.3%;
}

/* Fiches pédagogiques */
.fiche-link{
  left:0.7%;
  top:14.7%;
  width:18.2%;
  height:10.6%;
}