*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#163f1d;font-family:"Trebuchet MS",Arial,sans-serif}
body{display:grid;place-items:center;overflow:hidden}
.game{position:relative;width:min(100vw,calc(100vh * 1.395));aspect-ratio:1.395/1;overflow:hidden;background:#3b8d34}
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;user-select:none;pointer-events:none}
.hotspot{position:absolute;z-index:5;border:0;background:rgba(255,255,255,.02);color:transparent;cursor:pointer}
.sound{left:29.5%;top:26.5%;width:7%;height:8%}
.settings{right:2%;top:1.5%;width:8%;height:10%}
.level-badge{position:absolute;z-index:6;left:7.2%;top:37.7%;width:11%;text-align:center;color:#ffd650;font-weight:1000;font-size:clamp(10px,1.7vw,23px);text-shadow:0 2px #532a10;pointer-events:none}
.level-badge b{color:#fff;font-size:1.45em}
.steps{position:absolute;z-index:6;left:20%;top:38.3%;width:68.5%;height:9%;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none}
.step{width:8.2%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-weight:1000;font-size:clamp(10px,1.8vw,24px);color:#49351e;background:rgba(210,210,210,.96);border:3px solid rgba(90,70,45,.8);box-shadow:0 2px 0 #49321c}
.step.current{background:#ffd23e;color:#58320f}
.step.done{background:#77c840;color:#173e1e}
.play-panel{position:absolute;z-index:4;left:29%;top:50.5%;width:43%;height:23%;display:grid;place-items:center;border-radius:2%;background:linear-gradient(#f2d18aee,#e5b865ee);box-shadow:inset 0 0 0 3px rgba(92,71,25,.18)}
.shape{--fill:#2e80dc;--rot:0deg;--sx:1;--sy:1;width:22%;aspect-ratio:1;background:var(--fill);border:4px solid rgba(255,255,255,.85);filter:drop-shadow(0 5px 2px #49381255);transform:rotate(var(--rot)) scale(var(--sx),var(--sy))}
.shape.circle{border-radius:50%}.shape.rectangle{width:31%;aspect-ratio:1.55}.shape.triangle{width:0;height:0;background:transparent;border:0;border-left:5.4vw solid transparent;border-right:5.4vw solid transparent;border-bottom:9.3vw solid var(--fill);filter:drop-shadow(0 5px 2px #49381255)}
.shape.diamond{width:15%;transform:rotate(calc(45deg + var(--rot))) scale(var(--sx),var(--sy))}
.shape.trap{clip-path:polygon(22% 0,78% 0,100% 100%,0 100%)}.shape.para{clip-path:polygon(22% 0,100% 0,78% 100%,0 100%)}.shape.pent{clip-path:polygon(50% 0,100% 38%,81% 100%,19% 100%,0 38%)}.shape.hex{clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}.shape.oct{clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.answers{position:absolute;z-index:7;left:18.4%;top:74.9%;width:63.6%;height:9.3%;display:grid;grid-template-columns:repeat(4,1fr);gap:1.6%}
.answers button{border:3px solid #8b5f25;border-radius:8%;background:linear-gradient(#f8e3b6,#e9bf80);box-shadow:0 4px 0 #80501f;color:#4a2d13;font-weight:1000;font-size:clamp(10px,1.55vw,24px);cursor:pointer}
.answers button.selected{background:linear-gradient(#9be13e,#62b720);color:#273f13}.answers button.correct{background:linear-gradient(#8fe448,#55b82a)}.answers button.wrong{background:linear-gradient(#ff9f88,#e34b3d)}
.validate{position:absolute;z-index:7;left:36.7%;top:87.7%;width:25.6%;height:8.2%;border:4px solid #527515;border-radius:30px;background:linear-gradient(#a7df4e,#6aae22);box-shadow:0 5px 0 #3e6515;color:#fff;font-weight:1000;font-size:clamp(14px,2.5vw,36px);text-shadow:0 2px #36540f;cursor:pointer}
.score-box{position:absolute;z-index:7;right:3.4%;bottom:2.6%;width:10.7%;height:9%;display:grid;place-items:center;text-align:center;color:#ffd238;font-weight:1000;font-size:clamp(10px,1.5vw,22px);text-shadow:0 2px #47250c}.score-box b{color:#fff;font-size:1.4em}
.lives{position:absolute;z-index:7;left:3.5%;bottom:2.6%;width:22%;height:8%;display:flex;align-items:center;gap:4%}.lives span{font-size:clamp(24px,4vw,55px)}.life-bar{height:28%;flex:1;border-radius:20px;background:repeating-linear-gradient(90deg,#ef3131 0 7%,#8c0e0e 7% 9%)}
.message{position:absolute;z-index:8;left:31%;top:47.8%;width:38%;text-align:center;font-weight:1000;font-size:clamp(11px,1.4vw,20px);color:#6a3715;text-shadow:0 1px #fff;pointer-events:none}
.level-picker{position:absolute;z-index:8;left:7.5%;top:46.5%;display:flex;flex-direction:column;gap:6px}.level-picker button{width:42px;height:36px;border:3px solid #704218;border-radius:10px;background:#d9a451;color:#5b3314;font-weight:1000;cursor:pointer}.level-picker button.active{background:#ffd43e}
.end-screen{position:absolute;z-index:20;inset:0;background:#10391fcc;display:none;place-items:center}.end-screen.show{display:grid}.end-card{width:min(520px,80%);padding:28px;text-align:center;background:linear-gradient(#f7d99c,#dda95d);border:7px solid #74451f;border-radius:30px;box-shadow:0 10px 0 #4a2811}.trophy{font-size:70px}.end-card h2{font-size:clamp(28px,4vw,52px);margin:4px;color:#267b2d}.end-card p{font-size:20px;font-weight:900}.end-card button{border:4px solid #527515;border-radius:18px;background:#89ce37;padding:12px 25px;font-weight:1000;font-size:22px;color:#fff}
@media(max-width:700px){.level-picker button{width:30px;height:27px;font-size:10px}.answers button{border-width:2px}.shape{border-width:2px}.validate{border-width:2px}.message{top:48.4%}}

.sound{
  color:#fff !important;
  font-size:clamp(17px,2.2vw,30px) !important;
  text-shadow:0 2px 2px #44230c;
  display:grid !important;
  place-items:center !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;
    }
}