:root{
  --navy:#061d34;
  --navy2:#0a3154;
  --blue:#0789e5;
  --cyan:#40d3ff;
  --yellow:#ffca16;
  --target:#ffc21a;
  --green:#54d943;
  --red:#ee2525;
  --text:#fff;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;min-height:100%;background:#168fd0}
body{
  overflow:hidden;
  color:var(--text);
  font-family:ui-rounded,"Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;
  background-image:url('assets/forest-bg.png');
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}
button,select{font:inherit}
button{cursor:pointer}
.app{
  width:min(100vw,760px);
  height:100dvh;
  min-height:100dvh;
  margin:0 auto;
  padding:max(2px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
  display:flex;
  flex-direction:column;
  gap:7px;
  overflow:hidden;
}
.game-header{flex:0 0 auto}
.title-stage{
  position:relative;
  height:206px;
  display:grid;
  place-items:start center;
}
.title-wood{
  position:absolute;
  z-index:1;
  width:91%;
  height:180px;
  top:6px;
  object-fit:fill;
  filter:drop-shadow(0 5px 4px rgba(0,0,0,.28));
}
.title-art{
  position:absolute;
  z-index:3;
  width:75%;
  max-height:144px;
  top:20px;
  object-fit:contain;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.25));
}
.top-mascot{
  position:absolute;
  z-index:4;
  top:42px;
  height:128px;
  max-width:27%;
  width:auto;
  object-fit:contain;
  filter:drop-shadow(0 4px 3px rgba(0,0,0,.25));
}
.top-mascot-left{left:-2px}
.top-mascot-right{right:-2px}
.title-mini-target{
  position:absolute;
  z-index:5;
  width:27px;
  aspect-ratio:1;
  left:73%;
  top:119px;
  border-radius:6px;
  background:linear-gradient(145deg,#ffe36a 0%,var(--target) 45%,#ee9700 100%);
  border:3px solid #fff5a7;
  box-shadow:0 0 0 3px #d98100,0 0 10px 4px #fff26a,0 0 22px 8px rgba(255,191,0,.8);
  transform:rotate(2deg);
}
.status-cartouche{
  position:relative;
  background:linear-gradient(180deg,#0b426e 0%,#061e36 100%);
  border:3px solid #159bea;
  border-radius:21px;
  box-shadow:inset 0 0 0 2px rgba(111,218,255,.28),0 4px 0 rgba(0,42,81,.54),0 7px 14px rgba(0,0,0,.16);
}
.utility-row{
  display:grid;
  grid-template-columns:1fr 1.65fr 1fr;
  gap:12px;
  align-items:center;
}
.utility-card{
  min-width:0;
  height:74px;
  padding:7px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.utility-copy{display:flex;flex-direction:column;align-items:flex-start;line-height:1.02;font-weight:950;white-space:nowrap}
.utility-copy>span{font-size:clamp(.68rem,2.6vw,.92rem)}
.utility-copy strong{margin-top:4px;font-size:clamp(1.05rem,4.4vw,1.55rem);color:var(--yellow);letter-spacing:.02em}
.grid-icon{display:grid;grid-template-columns:repeat(3,9px);grid-template-rows:repeat(3,9px);gap:2px;flex:none}
.grid-icon i{display:block;border-radius:1px;background:#e8f3f9;border:1px solid #254b64}.grid-icon i:nth-child(3n),.grid-icon i:nth-child(2),.grid-icon i:nth-child(7){background:#ffc92d}
.big-star{font-size:2.7rem;line-height:1;color:#ffc514;text-shadow:0 2px 0 #aa6200,0 0 5px #fff3a0}
.clock-icon{font-size:2.15rem;line-height:1}
.level-card,.time-card{cursor:pointer}
.level-card select,.time-card select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.level-card .utility-copy{flex-direction:row;align-items:center;gap:12px}
.level-card .utility-copy strong{margin:0;font-size:1.45rem;letter-spacing:.08em}
.level-card .utility-copy>span{font-size:clamp(.7rem,2.8vw,1rem)}
.game-panel{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
}
.board-shell{
  flex:0 1 auto;
  width:min(92vw,690px);
  aspect-ratio:9/8;
  max-height:calc(100dvh - 430px);
  max-width:calc((100dvh - 430px) * 9 / 8);
  min-height:0;
  padding:7px;
  border-radius:26px;
  background:linear-gradient(180deg,#149af0,#0864aa);
  box-shadow:inset 0 0 0 3px #72deff,0 6px 0 #053b6b,0 8px 18px rgba(0,0,0,.24);
}
.board{
  --cols:9;
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:repeat(var(--cols),1fr);
  grid-template-rows:repeat(8,1fr);
  overflow:hidden;
  border-radius:18px;
  background:#071b2e;
  border:2px solid #021323;
}
.cell{
  min-width:0;
  min-height:0;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:950;
  font-size:clamp(1.35rem,6.2vw,2.8rem);
  line-height:1;
  text-shadow:0 3px 2px rgba(0,0,0,.4);
  background:linear-gradient(145deg,#0a2946,#061c31);
  border-right:2px solid #17527d;
  border-bottom:2px solid #17527d;
}
.cell:nth-child(9n){border-right:0}
.cell:nth-last-child(-n+9){border-bottom:0}
.cell.empty{color:transparent}
.cell.hidden-pending{
  color:#1d1634;
  background:linear-gradient(145deg,#112b47,#091f35);
  border:3px solid #a65cff;
  box-shadow:inset 0 0 9px rgba(170,92,255,.2);
}
.cell.highlight{
  color:#6b4300;
  position:relative;
  z-index:2;
  background:linear-gradient(145deg,#ffe36d 0%,var(--target) 45%,#f29a00 100%);
  border:3px solid #fff2a0;
  box-shadow:inset 0 0 11px rgba(255,255,255,.65),0 0 0 3px #da8500,0 0 12px 5px #fff064,0 0 24px 8px rgba(255,190,0,.8);
}
.cell.solved{animation:solvedPop .35s ease}
@keyframes solvedPop{50%{transform:scale(.88);filter:brightness(1.6)}}
.feedback{
  min-height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(.77rem,3.2vw,1rem);
  font-weight:950;
  color:#fff;
  text-shadow:0 2px 3px rgba(92,50,0,.8),0 0 8px rgba(255,196,0,.9);
}
.feedback::before{content:"✦";color:#ffd31e;margin-right:7px}
.feedback.good{color:#eaffdf;text-shadow:0 0 8px #20ad41}.feedback.bad{color:#fff0f0;text-shadow:0 0 8px #dc203b}
.answers{
  width:min(92vw,690px);
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
}
.answer{
  min-width:0;
  height:62px;
  border:3px solid #1aa8ff;
  border-radius:18px;
  color:#fff;
  background:linear-gradient(180deg,#0b416b,#061c34);
  box-shadow:inset 0 0 0 2px rgba(120,218,255,.24),0 5px 0 #06375f;
  font-size:clamp(1.35rem,6vw,2.25rem);
  font-weight:950;
  text-shadow:0 3px 2px rgba(0,0,0,.35);
  transition:transform .12s ease,filter .12s ease;
}
.answer:active{transform:translateY(2px)}
.answer.correct{background:linear-gradient(#73df48,#2aa92e);border-color:#baff96}
.answer.wrong{background:linear-gradient(#f66572,#b71d2e);border-color:#ffb3b8}
.bottom-actions{
  width:min(78vw,580px);
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:28px;
  margin-top:2px;
}
.action-button{
  height:58px;
  border-radius:20px;
  border:3px solid #1ba9ff;
  color:#fff;
  font-weight:950;
  font-size:clamp(.72rem,3.1vw,1rem);
  background:linear-gradient(#0c4470,#061d35);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.16),0 5px 0 #06375f;
}
.action-button span{font-size:1.5em;margin-right:8px}
.restart-button{background:linear-gradient(#ff3c33,#b91513);border-color:#ffcb87;box-shadow:inset 0 0 0 2px rgba(255,255,255,.18),0 5px 0 #7c0909}
.overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:rgba(0,16,31,.72);backdrop-filter:blur(4px)}
.overlay.hidden{display:none}
.modal{position:relative;width:min(92vw,500px);padding:27px 22px 22px;border-radius:28px;background:linear-gradient(#0e4774,#061d35);border:4px solid #1caeff;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.42)}
.modal h2{margin:5px 0 12px;font-size:1.7rem}.modal p{line-height:1.45}.modal-icon{font-size:2.5rem}.modal-close{position:absolute;right:12px;top:10px;width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:#08243d;font-size:1.8rem}.primary-button{min-width:145px;padding:13px 22px;border:0;border-radius:16px;background:#ffc51e;color:#3b2300;font-weight:950;font-size:1.05rem}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media (max-width:520px){
  .app{gap:5px;padding-inline:max(6px,env(safe-area-inset-left))}
  .title-stage{height:166px}
  .title-wood{height:144px;width:96%;top:2px}
  .title-art{width:72%;max-height:113px;top:14px}
  .top-mascot{height:100px;top:37px;max-width:28%}
  .title-mini-target{width:22px;left:72%;top:92px;border-width:2px}
  .utility-row{gap:6px;grid-template-columns:1fr 1.55fr 1fr}
  .utility-card{height:56px;padding:5px 7px;gap:6px;border-radius:17px;border-width:2px}
  .grid-icon{grid-template-columns:repeat(3,7px);grid-template-rows:repeat(3,7px);gap:1px}
  .big-star{font-size:2rem}.clock-icon{font-size:1.65rem}
  .level-card .utility-copy{gap:6px}.level-card .utility-copy strong{font-size:1rem}.utility-copy strong{font-size:1rem}.utility-copy>span{font-size:.58rem}
  .board-shell{width:calc(100vw - 18px);max-height:calc(100dvh - 356px);max-width:calc((100dvh - 356px) * 9 / 8);padding:5px;border-radius:20px}
  .board{border-radius:14px}.cell{font-size:clamp(1.35rem,7vw,2.15rem);border-right-width:2px;border-bottom-width:2px}
  .answers{width:calc(100vw - 18px);gap:5px}.answer{height:54px;border-radius:15px;border-width:2px;font-size:clamp(1.25rem,7vw,1.9rem)}
  .bottom-actions{width:82vw;gap:15px}.action-button{height:49px;border-radius:16px;border-width:2px}.action-button span{margin-right:4px}
  .feedback{min-height:24px}
}
@media (max-width:390px){
  .title-stage{height:147px}.title-wood{height:126px}.title-art{max-height:99px;top:12px}.top-mascot{height:86px;top:34px}.title-mini-target{top:80px;left:71.5%;width:20px}
  .utility-card{height:51px}.big-star{font-size:1.75rem}.clock-icon{font-size:1.45rem}.utility-copy>span{font-size:.52rem}.utility-copy strong{font-size:.88rem}
  .board-shell{max-height:calc(100dvh - 322px);max-width:calc((100dvh - 322px) * 9 / 8)}
  .answer{height:49px}.action-button{height:45px}
}
@media (max-height:720px){
  .title-stage{height:125px}.title-wood{height:110px}.title-art{max-height:86px;top:8px}.top-mascot{height:75px;top:27px}.title-mini-target{top:68px;width:18px}
  .utility-card{height:46px}.board-shell{max-height:calc(100dvh - 268px);max-width:calc((100dvh - 268px) * 9 / 8)}
  .answers .answer{height:43px}.bottom-actions{display:none}.feedback{min-height:20px;font-size:.7rem}
}
@media (pointer:coarse){.answer,.action-button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}}

/* V13 - finition plein ecran, grille plus aeree et etats plus lisibles */
html{
  min-height:100%;
  min-height:100dvh;
  background:#0b7fbd url('assets/forest-bg.png') center center / cover no-repeat fixed;
}
body{
  min-height:100%;
  min-height:100dvh;
  background:#0b7fbd url('assets/forest-bg.png') center center / cover no-repeat fixed;
  overscroll-behavior:none;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:url('assets/forest-bg.png') center center / cover no-repeat;
}
.app{
  min-height:100dvh;
  height:100dvh;
  background:transparent;
}
.level-card{pointer-events:none}
.level-card select{pointer-events:none}
.board-shell{padding:13px}
.cell.hidden-pending{
  color:#eee6ff;
  font-weight:1000;
  text-shadow:0 2px 2px rgba(0,0,0,.55),0 0 8px rgba(203,164,255,.95);
  border:3px solid #a65cff;
  background:linear-gradient(145deg,#183653,#0d263f);
}
.cell.highlight{
  color:#5d3900;
}
.cell.solved{
  position:relative;
  z-index:1;
  border:3px solid #5dff57 !important;
  box-shadow:inset 0 0 10px rgba(138,255,128,.42),0 0 7px #57ff4c,0 0 15px rgba(59,255,46,.9);
  animation:solvedPop .38s ease;
}
.fireworks-canvas{
  position:fixed;
  inset:0;
  width:100vw;
  height:100dvh;
  z-index:1000;
  pointer-events:none;
  opacity:0;
  transition:opacity .12s linear;
}
.fireworks-canvas.active{opacity:1}
@media (max-width:520px){
  .app{padding-top:max(0px,env(safe-area-inset-top));padding-bottom:max(0px,env(safe-area-inset-bottom))}
  .board-shell{padding:10px;width:calc(100vw - 24px)}
  .answers{width:calc(100vw - 24px)}
}
@media (max-width:390px){
  .board-shell{padding:9px;width:calc(100vw - 20px)}
  .answers{width:calc(100vw - 20px)}
}

/* V14 - chrono libre, records locaux et mascottes juste au-dessus de la grille */
.title-stage .top-mascot{display:none}
.mascot-row{
  position:relative;
  width:min(92vw,690px);
  height:76px;
  margin:0 auto -18px;
  pointer-events:none;
  z-index:4;
}
.mascot-row .top-mascot{
  position:absolute;
  display:block;
  top:0;
  height:92px;
  width:auto;
  max-width:30%;
  object-fit:contain;
  object-position:bottom;
  filter:drop-shadow(0 4px 3px rgba(0,0,0,.25));
}
.mascot-row .top-mascot-left{left:4px}
.mascot-row .top-mascot-right{right:4px}
.time-card{border:3px solid #1aa8ff;font-family:inherit;cursor:pointer}
.time-card:active{transform:translateY(1px)}
.best-times-list{display:grid;gap:8px;margin:16px 0 18px}
.record-row{display:grid;grid-template-columns:38px 1fr 1fr;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;background:rgba(0,0,0,.22);border:1px solid rgba(111,218,255,.35)}
.record-rank{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#ffc51e;color:#362100;font-weight:950}
.record-row strong{font-size:1.15rem;color:#fff}
.record-row span:last-child{color:#b9e8ff;font-weight:800}
.no-records{opacity:.9}
.secondary-button{padding:10px 16px;border:2px solid #56bfff;border-radius:14px;background:#092943;color:#fff;font-weight:900}
@media (max-width:520px){
  .mascot-row{width:calc(100vw - 24px);height:68px;margin-bottom:-16px}
  .mascot-row .top-mascot{height:84px;max-width:29%}
}
@media (max-width:390px){
  .mascot-row{height:60px;margin-bottom:-14px}
  .mascot-row .top-mascot{height:76px}
}
@media (max-height:720px){
  .mascot-row{height:46px;margin-bottom:-12px}
  .mascot-row .top-mascot{height:62px}
}


/* V15 - mascottes au-dessus des cartouches lateraux, grille aeree, validation contour uniquement */
.mascot-row{
  width:100%;
  height:62px;
  margin:0 0 -14px;
  position:relative;
  z-index:5;
  pointer-events:none;
}
.mascot-row .top-mascot{
  top:0;
  height:82px;
  max-width:25%;
  object-position:bottom;
}
/* Centre chaque mascotte sur le cartouche GRILLE / TEMPS */
.mascot-row .top-mascot-left{left:5.5%}
.mascot-row .top-mascot-right{right:5.5%}
.board-shell{padding:17px}
.cell.solved{
  background:linear-gradient(145deg,#0a2946,#061c31) !important;
  color:#fff !important;
  border:3px solid #5dff57 !important;
  box-shadow:inset 0 0 0 1px rgba(160,255,150,.18),0 0 7px #57ff4c,0 0 14px rgba(59,255,46,.78) !important;
  filter:none !important;
}
@media (max-width:520px){
  .mascot-row{height:54px;margin-bottom:-12px}
  .mascot-row .top-mascot{height:72px;max-width:24%}
  .mascot-row .top-mascot-left{left:4%}
  .mascot-row .top-mascot-right{right:4%}
  .board-shell{padding:14px}
}
@media (max-width:390px){
  .mascot-row{height:48px;margin-bottom:-10px}
  .mascot-row .top-mascot{height:65px}
  .board-shell{padding:13px}
}

/* V16 - remonte legerement les deux mascottes, aucun autre changement */
.mascot-row .top-mascot{transform:translateY(-9px)}
@media (max-width:520px){.mascot-row .top-mascot{transform:translateY(-8px)}}
@media (max-width:390px){.mascot-row .top-mascot{transform:translateY(-7px)}}

/* V17 - mascottes plus hautes, grille plus aeree, nombres a 2 chiffres adaptes */
.mascot-row .top-mascot{transform:translateY(-19px)}
.board-shell{padding:21px}
.cell.two-digit{font-size:clamp(1.05rem,5.0vw,2.15rem);padding-inline:3px}
@media (max-width:520px){
  .mascot-row .top-mascot{transform:translateY(-17px)}
  .board-shell{padding:18px}
  .cell.two-digit{font-size:clamp(1.02rem,5.8vw,1.82rem);padding-inline:2px}
}
@media (max-width:390px){
  .mascot-row .top-mascot{transform:translateY(-15px)}
  .board-shell{padding:17px}
  .cell.two-digit{font-size:clamp(.98rem,5.5vw,1.62rem);padding-inline:2px}
}

/* V18 - mascottes encore plus hautes et grille legerement plus aeree */
.mascot-row .top-mascot{transform:translateY(-29px)}
.board-shell{padding:25px}
@media (max-width:520px){
  .mascot-row .top-mascot{transform:translateY(-27px)}
  .board-shell{padding:22px}
}
@media (max-width:390px){
  .mascot-row .top-mascot{transform:translateY(-25px)}
  .board-shell{padding:21px}
}

/* V19 - progression par paliers */
.progression-modal{max-width:520px}
.progression-modal .progression-desc{display:inline-block;margin-top:8px;color:#bfe8ff;font-weight:800}
.progression-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:18px}
.secondary-button{min-width:135px;padding:12px 18px;border:2px solid #62caff;border-radius:16px;background:#0a3356;color:#fff;font-weight:900;font-size:1rem}
@media (max-width:520px){.progression-actions{gap:8px}.progression-actions .primary-button,.progression-actions .secondary-button{flex:1;min-width:0}}

/* V22 - centrage des 4 propositions et classement defilable */
.answers{
  width:min(78vw,560px);
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-inline:auto;
  justify-content:center;
}
.records-modal{
  max-height:calc(100dvh - 32px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.records-modal .best-times-list{
  min-height:0;
  max-height:min(58dvh,520px);
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  padding-right:4px;
}
.records-modal .secondary-button{
  flex:0 0 auto;
}
@media (max-width:520px){
  .answers{width:min(calc(100vw - 42px),520px);gap:7px}
  .records-modal{max-height:calc(100dvh - 20px)}
  .records-modal .best-times-list{max-height:58dvh}
}
@media (max-width:390px){
  .answers{width:calc(100vw - 34px);gap:6px}
}