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

.bg-link,.hotspot{position:absolute;z-index:30;background:transparent;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.retour-link{left:1%;top:1.3%;width:20.7%;height:11.2%;border-radius:18px}
.fiche-link{left:1%;top:14.1%;width:20.7%;height:10.8%;border-radius:18px}

.level-btn{left:1.1%;width:15.75%;border-radius:18px}
.level-btn[data-level="1"]{top:29.28%;height:19.8%}
.level-btn[data-level="2"]{top:49.36%;height:16.11%}
.level-btn[data-level="3"]{top:66.02%;height:17.4%}

.level-glow{position:absolute;z-index:12;left:1.1%;width:15.75%;border:4px solid #ffe56a;border-radius:14px;box-shadow:0 0 4px #ffe56a,0 0 8px rgba(255,229,106,.85);pointer-events:none;transition:.15s}

.pills{position:absolute;z-index:18;left:25.7%;top:19.2%;width:52.5%;height:6.4%;display:flex;justify-content:center;gap:.65%;align-items:center}
.pill{height:100%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:#202020;border:3px solid #b47a18;color:#fff;font-weight:800;font-size:clamp(11px,1.2cqw,19px)}
.pill.current{background:#f4bd29;color:#4b2d08}
.pill.good{background:#4bb83c;border-color:#2f781b}
.pill.bad{background:#d93b31;border-color:#8e1712}

.score-badge{position:absolute;z-index:18;right:2.6%;top:19.0%;min-width:14%;padding:.65% 1.1%;background:#fff4dd;border:3px solid #a66d18;border-radius:14px;color:#4d2d0c;text-align:center;font-weight:800;font-size:clamp(11px,1.2cqw,18px)}
.star{color:#f5b400;margin-right:.3em}

.panel{position:absolute;z-index:14;left:23.5%;top:29.0%;width:62.8%;height:56.5%;padding:2.8% 4.2% 2%;display:flex;flex-direction:column;align-items:center}
.consigne-box{align-self:stretch;background:#fff;border:2px solid #d7c4a0;border-radius:14px;padding:1% 1.8%;box-shadow:0 2px 0 rgba(0,0,0,.08)}
.consigne-title{font-size:clamp(11px,1.05cqw,16px);font-weight:800;color:#245b9a}
.consigne-text{font-size:clamp(10px,.95cqw,14px);font-weight:700;color:#352a20;margin-top:.15em}

.sentence-zone{margin-top:6.2%;display:flex;align-items:center;justify-content:center;min-height:10%;width:100%}
.sentence{margin:0;text-align:center;color:#3c2a18;font-size:clamp(19px,2.05cqw,32px);font-weight:800;line-height:1.2}

.choices-zone{margin-top:5.2%;width:72%;display:flex;justify-content:center;gap:5%;flex-wrap:wrap}
.choice-btn{min-width:34%;padding:2.5% 4%;border:4px solid #9c6818;border-radius:18px;background:linear-gradient(#fff0b2,#ffd15c);box-shadow:0 5px 0 #71470f;color:#56320d;font-size:clamp(16px,1.75cqw,27px);font-weight:800;cursor:pointer}
.choice-btn.correct{outline:5px solid #35b84b;outline-offset:2px}
.choice-btn.wrong{outline:5px solid #d83c32;outline-offset:2px}
.choice-btn.locked{pointer-events:none;opacity:.65}
.choice-btn.locked.correct,.choice-btn.locked.wrong{opacity:1}

.status{min-height:2em;margin-top:3.2%;text-align:center;font-size:clamp(12px,1.2cqw,19px);font-weight:800}
.status.ok{color:#188c3d}
.status.fail{color:#c92e27}

#nextBtn{position:absolute;z-index:20;right:8%;bottom:3.1%;width:20%;height:7.6%;border:4px solid #555;border-radius:18px;background:#777;color:#ddd;font-weight:900;font-size:clamp(13px,1.45cqw,22px);cursor:not-allowed}
#nextBtn.active{background:linear-gradient(#86d53c,#4b9d13);border-color:#356d09;color:#fff;cursor:pointer}
#nextBtn[hidden]{display:none}

.summary{position:absolute;z-index:50;inset:0;background:rgba(10,15,20,.68);display:grid;place-items:center}
.summary:not(.show){display:none}
.summary-card{width:min(460px,80%);background:#fff6dc;border:5px solid #b47b1d;border-radius:22px;padding:28px;text-align:center;box-shadow:0 12px 0 rgba(0,0,0,.2)}
.summary-title{font-size:28px;font-weight:900;color:#5a360f}
.summary-message{font-size:18px;color:#5a360f;margin:.7em 0}
.summary-score{font-size:34px;font-weight:900;color:#7a3e0d;margin:.4em 0 .8em}
#restartBtn{border:0;border-radius:15px;padding:12px 28px;background:#5aae29;color:#fff;font-size:18px;font-weight:800;cursor:pointer}