*{box-sizing:border-box}
html,body{
  margin:0;width:100%;height:100%;overflow:hidden;
  background:#2a241d;font-family:Arial,Helvetica,sans-serif;
}
#stage{
  position:absolute;left:50%;top:50%;
  width:1536px;height:1024px;transform-origin:center center;
  background:url("../assets/fond-belle-epoque-original-nettoye.png") center/1536px 1024px no-repeat;
  overflow:hidden;
}

#backBtn{position:absolute;left:14px;top:14px;width:292px;height:102px;z-index:50}
#sheetsBtn{position:absolute;left:14px;top:128px;width:292px;height:96px;z-index:50}

/* Score : uniquement le chiffre dynamique */
#scoreValue{
  position:absolute;right:39px;top:57px;
  width:84px;height:54px;z-index:55;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:#111;font-size:42px;font-weight:900;line-height:1;
}

/* =========================================================
   PANNEAU NIVEAUX RECONSTRUIT DE ZÉRO
   Il masque entièrement l'ancien panneau 2 niveaux du fond.
   ========================================================= */
#levelsPanel{
  position:absolute;
  left:14px;
  top:560px;
  width:250px;
  height:300px;
  z-index:80;
  padding:10px 10px 13px;
  background:#17384e;
  border:5px solid #5b4127;
  border-radius:18px;
  box-shadow:
    0 7px 0 rgba(45,30,16,.7),
    inset 0 0 0 2px rgba(255,196,66,.22);
}
.levelsTitle{
  height:52px;
  margin-bottom:10px;
  display:flex;align-items:center;justify-content:center;
  background:#12334a;
  border:3px solid #9d6c2d;
  border-radius:11px;
  color:#fff;
  font-size:22px;font-weight:900;
  text-shadow:0 2px 2px #0008;
}
#levelsPanel .level{
  width:100%;
  height:63px;
  margin:0 0 9px;
  border:4px solid #c68d27;
  border-radius:13px;
  background:linear-gradient(#8bce42 0%,#68b32e 48%,#4e941f 100%);
  color:#fff;
  font-size:20px;
  font-weight:900;
  text-shadow:0 2px 1px #0008;
  box-shadow:
    0 3px 0 #49321b,
    inset 0 0 0 2px rgba(255,255,255,.14);
  cursor:pointer;
}
#levelsPanel .level:last-child{margin-bottom:0}
#levelsPanel .level.active{
  border-color:#ffd044;
  box-shadow:
    0 0 10px 3px rgba(255,192,37,.92),
    0 3px 0 #49321b,
    inset 0 0 0 2px rgba(255,255,255,.24);
}

/* Pastilles : bande opaque unique sur l'ancienne rangée imprimée */
#dots{
  position:absolute;
  left:330px;top:258px;width:900px;height:58px;z-index:60;
  background:linear-gradient(#f7ecd5,#f5e8cf);
  border-radius:28px;
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.dot{
  width:22px;height:22px;border-radius:50%;
  background:#eee9df;border:2px solid #555;flex:0 0 auto;
}
.dot.good{background:#31b85b;border-color:#176b31}
.dot.bad{background:#dc433a;border-color:#7b1915}
.dot.current{outline:3px solid #e1a92b;outline-offset:2px}

/* Zone de jeu d'origine */
#board{
  position:absolute;left:330px;top:335px;
  width:870px;height:390px;z-index:50;
  background:transparent;border:0;box-shadow:none;
  padding:12px 20px 65px;
  display:flex;flex-direction:column;align-items:center;
}
#question{
  width:100%;min-height:92px;
  display:flex;align-items:center;justify-content:center;
  text-align:center;color:#142b3c;
  font-size:30px;line-height:1.16;font-weight:900;
  padding:0 20px;
}
#answers{
  width:800px;
  display:grid;grid-template-columns:1fr 1fr;
  gap:18px 26px;margin-top:14px;
}
.answer{
  min-height:78px;padding:11px 14px;
  border:3px solid #4c5961;border-radius:13px;
  background:linear-gradient(#fffdfa,#eee7dc);
  color:#172633;font-size:20px;font-weight:800;
  box-shadow:0 5px 0 #8b8172;cursor:pointer;
}
.answer:disabled{opacity:1;cursor:default}
.answer.correct{background:#bde9c6;border-color:#2b8b49}
.answer.wrong{background:#f0bbb6;border-color:#b73b32}

#feedback{
  min-height:28px;margin-top:8px;
  font-size:18px;font-weight:900;text-align:center;
}

#next,#replay,#specialAction{
  border:4px solid #4b3925;border-radius:11px;
  color:#fff;font-size:17px;font-weight:900;
  box-shadow:0 4px 0 #5e4727;cursor:pointer;
}
#next{
  position:absolute;left:50%;bottom:9px;transform:translateX(-50%);
  width:225px;height:48px;
  background:#2b6e98;
}
#specialAction{
  position:absolute;left:50%;bottom:9px;transform:translateX(-50%);
  width:225px;height:48px;
  background:linear-gradient(#83c63d,#4b9120);
}
#specialAction.next-mode{
  background:linear-gradient(#2f7fba,#235f8d);
  border-color:#24485f;
}
#replay{background:#9b7435;padding:8px 16px}
.hidden{display:none!important}

/* Fin */
#end{
  position:absolute;left:330px;top:335px;width:870px;height:390px;z-index:70;
  display:flex;align-items:center;justify-content:center;
}
#end section{
  width:500px;padding:32px;text-align:center;background:#fff8e8;
  border:6px solid #4b3925;border-radius:18px;box-shadow:0 10px 30px #0006;
}
#end h2{font-size:38px;margin:0 0 12px}
#end p{font-size:25px;font-weight:900}

/* =========================================================
   NIVEAU 1 INTERACTIF
   ========================================================= */
#board.mode-special{
  padding:8px 18px 65px;
}
#board.mode-special #question{
  min-height:70px;
  font-size:25px;
}
#board.mode-special #answers{
  display:block;
  width:800px;
  margin-top:2px;
}
.special-instruction{
  text-align:center;font-size:15px;font-weight:800;color:#6a512c;
  margin:0 0 7px;
}

/* vrai/faux */
.tf-wrap{display:flex;gap:22px;justify-content:center;margin-top:12px}
.tf-btn{
  width:220px;height:66px;
  border:3px solid #715a35;border-radius:14px;
  background:linear-gradient(#fffdf7,#eadfc9);
  font-size:22px;font-weight:900;
  box-shadow:0 4px 0 #8f8068;cursor:pointer;
}
.tf-btn.chosen{outline:4px solid #e1aa2c}
.tf-btn.correct{background:#bde9c6;border-color:#2b8b49}
.tf-btn.wrong{background:#f0bbb6;border-color:#b73b32}

/* associations */
.match-grid{
  width:760px;
  display:grid;grid-template-columns:1fr 1fr;
  gap:8px 18px;margin:3px auto;
}
.match-card{
  min-height:47px;padding:6px;
  border:3px solid #715a35;border-radius:10px;
  background:linear-gradient(#fffdf7,#eadfc9);
  font-size:15px;font-weight:800;
  box-shadow:0 3px 0 #8f8068;cursor:pointer;
}
.match-card.selected{outline:4px solid #e1aa2c}
.match-card.paired{background:#e5f1f7;border-color:#3a738f}
.match-card.correct{background:#bde9c6;border-color:#2b8b49}
.match-card.bad-pair{background:#f0bbb6;border-color:#b73b32}

/* classements */
.sort-area{
  width:775px;
  display:grid;grid-template-columns:1fr 1fr;
  gap:8px 14px;margin:0 auto;
}
.sort-bank{
  grid-column:1/3;
  min-height:45px;
  display:flex;gap:5px;justify-content:center;flex-wrap:wrap;
}
.drag-card{
  padding:7px 10px;
  background:#fffaf0;border:2px solid #715a35;border-radius:9px;
  font-size:14px;font-weight:900;cursor:grab;
  box-shadow:0 3px 0 #8f8068;
}
.drop-zone{
  min-height:85px;
  border:3px dashed #8a7049;border-radius:12px;
  background:#fff9e8cc;padding:5px;text-align:center;
}
.drop-zone h3{margin:0 0 4px;font-size:15px}
.drop-zone .items{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.drag-card.correct-card{background:#bde9c6;border-color:#2b8b49}
.drag-card.wrong-card{background:#f0bbb6;border-color:#b73b32}

/* ordre */
.order-wrap{
  width:720px;display:flex;flex-direction:column;
  gap:5px;margin:2px auto;
}
.order-card{
  padding:7px;
  background:#fffaf0;border:2px solid #715a35;border-radius:9px;
  font-size:14px;font-weight:800;text-align:center;cursor:pointer;
  box-shadow:0 3px 0 #8f8068;
}
.order-card.selected{outline:4px solid #e1aa2c}
.order-card.correct-card{background:#bde9c6;border-color:#2b8b49}
.order-card.wrong-card{background:#f0bbb6;border-color:#b73b32}

/* correction */
#specialCorrection{
  width:750px;max-height:52px;overflow:auto;
  margin:5px auto 0;padding:5px 9px;
  border:2px solid #2c617c;border-radius:9px;
  background:#eef7fb;color:#17384b;
  font-size:13px;line-height:1.1;font-weight:800;text-align:center;
}


/* ===== NETTOYAGE DES RESTES DU PANNEAU NIVEAUX IMPRIMÉ DANS LE FOND ===== */
#levelsPanel{
  /* panneau suffisamment haut pour recouvrir intégralement l'ancien visuel */
  height:300px !important;
  overflow:hidden !important;
  background:#17384e !important;
}

/* masque complémentaire sous le panneau pour supprimer les derniers fragments
   de l'ancien décor NIVEAU 1 / NIVEAU 2 visibles dans l'image de fond */
#levelsPanel::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:-5px;
  top:-5px;
  width:250px;
  height:310px;
  background:#17384e;
  border-radius:18px;
}

/* les trois boutons restent entièrement contenus dans le cadre */
#levelsPanel .level{
  position:relative;
  z-index:2;
}
#levelsPanel .levelsTitle{
  position:relative;
  z-index:2;
}


/* ===== NETTOYAGE DEFINITIF ANCIEN PANNEAU NIVEAUX ===== */
/* On remonte le nouveau panneau pour qu'il recouvre entièrement
   le titre NIVEAUX imprimé dans l'image de fond. */
#levelsPanel{
  top:525px !important;
  height:300px !important;
  overflow:hidden !important;
  z-index:100 !important;
  background:#17384e !important;
}

/* couverture pleine derrière le panneau, sans pseudo-élément négatif */
#levelsPanel::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:auto !important;
  height:auto !important;
  z-index:0 !important;
  background:#17384e !important;
  border-radius:13px !important;
}

#levelsPanel .levelsTitle,
#levelsPanel .level{
  position:relative !important;
  z-index:2 !important;
}