*{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 * 1370 / 1148));aspect-ratio:1370/1148;overflow:hidden;background:#3b8d34}
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;user-select:none;pointer-events:none}
.squirrel{position:absolute;z-index:2;left:78%;top:49%;width:21%;aspect-ratio:468/691;object-fit:contain;pointer-events:none;transition:transform .15s ease}

.hotspot{position:absolute;z-index:5;border:0;background:rgba(255,255,255,.02);color:transparent;cursor:pointer}
.icon-badge{color:#fff !important;font-size:clamp(14px,2vw,26px) !important;text-shadow:0 2px 2px #000a;display:grid !important;place-items:center !important;background:rgba(20,30,10,.32) !important;border-radius:50%}
.sound{left:2%;top:2%;width:6.5%;height:6.5%}
.settings{left:2%;top:9.5%;width:6.5%;height:6.5%}

.level-badge{position:absolute;z-index:6;left:5%;top:40%;width:14%;text-align:center;color:#ffd650;font-weight:1000;font-size:clamp(9px,1.5vw,20px);text-shadow:0 2px #532a10;pointer-events:none}
.level-badge b{color:#fff;font-size:1.4em}

.steps{position:absolute;z-index:6;left:21%;top:40.5%;width:57%;height:6.5%;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none}
.step{width:8.4%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-weight:1000;font-size:clamp(9px,1.5vw,20px);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:24%;top:48%;width:52%;height:20%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6%}
.word-instruction{font-weight:900;color:#6a3715;font-size:clamp(10px,1.5vw,20px);text-align:center}
.word-card{width:88%;text-align:center;padding:3% 4%;border-radius:14px;background:#fff8e8;border:3px solid rgba(92,71,25,.35);box-shadow:0 4px 0 rgba(92,71,25,.25);color:#2f4b1a;font-weight:1000;font-size:clamp(20px,3.6vw,42px);text-transform:lowercase}

.answers{position:absolute;z-index:7;left:26%;top:71.5%;width:48%;height:9.5%;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:2%}
.answers button{border:3px solid #8b5f25;border-radius:12%;background:linear-gradient(#f8e3b6,#e9bf80);box-shadow:0 4px 0 #80501f;color:#4a2d13;font-weight:1000;font-size:clamp(10px,1.5vw,20px);cursor:pointer;padding:2px 4px}
.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:35%;top:87.5%;width:29%;height:6.5%;border:0;background:rgba(255,255,255,.02);color:transparent;cursor:pointer}

.score-box{position:absolute;z-index:7;left:80%;top:5%;width:18%;height:9%;display:grid;place-items:center;text-align:center;color:#ffd238;font-weight:1000;font-size:clamp(9px,1.3vw,18px);text-shadow:0 2px #47250c}
.score-box b{color:#fff;font-size:1.4em}

.lives{position:absolute;z-index:7;left:2%;bottom:1.5%;width:20%;height:6%;display:flex;align-items:center;gap:4%}
.lives span{font-size:clamp(20px,3.2vw,42px)}
.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:24%;top:67.5%;width:52%;text-align:center;font-weight:1000;font-size:clamp(14px,2.2vw,28px);color:#6a3715;text-shadow:0 1px #fff;pointer-events:none}

.level-picker{position:absolute;z-index:8;left:5%;top:24%;display:flex;flex-direction:column;gap:6px}
.level-picker button{width:78px;height:32px;border:3px solid #704218;border-radius:10px;background:#d9a451;color:#5b3314;font-weight:1000;font-size:11px;cursor:pointer;white-space:nowrap}
.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}

.intro-screen{position:absolute;z-index:30;inset:0;background:rgba(10,20,10,.72);display:grid;place-items:center}
.intro-card{position:relative;width:min(480px,84%);padding:8% 7% 6%;text-align:center;background:#fff;border-radius:22px;box-shadow:0 12px 0 rgba(0,0,0,.15)}
.intro-close{position:absolute;top:14px;right:16px;border:0;background:none;font-size:22px;color:#222;cursor:pointer;line-height:1}
.intro-icon{font-size:44px;margin-bottom:6px}
.intro-card h2{margin:4px 0 18px;color:#1a2b4a;font-size:clamp(22px,4vw,30px);letter-spacing:.03em}
.intro-card p{margin:0 0 22px;color:#1a3a6b;font-size:clamp(15px,2.4vw,19px);line-height:1.4;font-weight:600}
.intro-ok{border:0;border-radius:16px;background:linear-gradient(#8bd93f,#5cb82a);box-shadow:0 5px 0 #3e8515;padding:14px 34px;font-weight:1000;font-size:clamp(15px,2.4vw,19px);color:#fff;cursor:pointer}

@media(max-width:700px){.level-picker button{width:58px;height:25px;font-size:9px}.answers button{border-width:2px}.word-card{font-size:clamp(15px,5vw,26px)}}
/* ==============================
   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;
    }
}