*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;min-height:100%;font-family:Trebuchet MS,Arial,sans-serif;overflow:hidden;touch-action:none;background:linear-gradient(#4ac8ef 0%,#a8e9f7 56%,#e8fbff 100%)}body:before,body:after{content:"";position:fixed;border-radius:50%;background:#fff8;pointer-events:none}body:before{width:180px;height:48px;left:-35px;top:14%;box-shadow:70px 5px 0 -8px #fff8,120px -8px 0 -20px #fff7}body:after{width:190px;height:52px;right:-60px;top:8%;box-shadow:-65px 8px 0 -14px #fff8}
main{height:100dvh;display:flex;flex-direction:column;align-items:center;padding:max(8px,env(safe-area-inset-top)) 10px max(8px,env(safe-area-inset-bottom));position:relative;z-index:1;gap:6px}header{width:min(96vw,620px);height:64px;display:flex;align-items:center;justify-content:space-between;gap:8px}.title{font-weight:1000;font-size:clamp(24px,7.5vw,42px);letter-spacing:-2px;color:#fff;text-shadow:0 3px 0 #16569c,0 5px 10px #0004;white-space:nowrap}.title span{color:#ffd12a}.title b{color:#76d92f}.title small{font-size:11px;margin-left:5px;color:#fff}.goal-card{height:58px;background:#123f78;border:3px solid #55d6ff;border-radius:17px;box-shadow:0 5px 0 #082f5c,inset 0 0 15px #67dfff33;color:#fff;display:flex;align-items:center;padding:3px 7px;gap:2px;font-weight:1000;font-size:9px}.goal-card img{height:44px;width:44px;object-fit:contain}.goal-card span{font-size:18px;color:#ffd22d}.mission{width:min(95vw,570px);background:#fffce9;border:3px solid #f6c33d;border-radius:15px;padding:7px 12px;box-shadow:0 4px 0 #c88b19;color:#694809;display:flex;align-items:center;gap:9px;font-size:clamp(11px,3vw,14px)}.mission strong{background:#ef9d1b;color:#fff;padding:5px 8px;border-radius:9px;white-space:nowrap}
.game-zone{flex:1;min-height:0;width:min(100vw,620px);display:flex;align-items:center;justify-content:center}#board{--cell:58px;position:relative;width:calc(var(--cell)*7 + 20px);height:calc(var(--cell)*7 + 30px);max-width:94vw;max-height:52vh;filter:drop-shadow(0 16px 10px #275b7040);perspective:900px}.board-plane{position:absolute;left:10px;top:10px;width:calc(var(--cell)*7);height:calc(var(--cell)*7);display:grid;grid-template-columns:repeat(7,var(--cell));grid-template-rows:repeat(7,var(--cell));transform:rotateX(12deg);transform-origin:center bottom;border-radius:18px;overflow:hidden;border:5px solid #72532d;background:#7c5c36;box-shadow:inset 0 0 0 3px #b99359,0 8px 0 #50351f}.cell{position:relative;background:linear-gradient(145deg,#d6c7a6,#b8a37f);border:1px solid #927d5d;box-shadow:inset 2px 2px 0 #eadfc8,inset -2px -2px 0 #8d795d}.cell:nth-child(odd){filter:brightness(1.03)}.cell.reachable:after{content:"";position:absolute;inset:8px;border-radius:12px;background:#fff7;box-shadow:0 0 14px #fff}.cell.water{background:linear-gradient(#24bff4,#168cd8);box-shadow:inset 0 0 0 3px #85e7ff,inset 0 -10px 0 #0c76bf}.cell.water:before{content:"≈";position:absolute;inset:0;display:grid;place-items:center;color:#dffaff;font-size:34px;font-weight:900;text-shadow:0 3px 0 #0870ad}.cell.wall{background:linear-gradient(145deg,#7f7462,#514a40);box-shadow:inset 3px 3px 0 #a59b8b,inset -3px -3px 0 #39342e}.cell.goal{background:radial-gradient(circle,#d76cff 0 22%,#8037bd 24% 44%,#4b226e 46% 100%);box-shadow:inset 0 0 12px #ffb7ff}.cell.goal:after{content:"";position:absolute;inset:10px;border:3px solid #fff;border-radius:50%;box-shadow:0 0 12px #fff,0 0 20px #e452ff;animation:pulse 1.1s ease-in-out infinite}.crate{position:absolute;width:calc(var(--cell)*.78);height:calc(var(--cell)*.78);transform:translate(-50%,-50%);border-radius:12px;background:linear-gradient(145deg,#c98a39,#8c5424);border:4px solid #6b3d1a;box-shadow:inset 3px 3px 0 #e9b668,0 7px 0 #563015;z-index:16;transition:left .32s cubic-bezier(.2,.8,.2,1),top .32s cubic-bezier(.2,.8,.2,1)}.crate:before,.crate:after{content:"";position:absolute;background:#73421d}.crate:before{left:10%;right:10%;height:5px;top:48%;transform:rotate(35deg)}.crate:after{left:10%;right:10%;height:5px;top:48%;transform:rotate(-35deg)}.cube{position:absolute;width:calc(var(--cell)*1.18);height:calc(var(--cell)*1.18);object-fit:contain;transform:translate(-50%,-70%);z-index:30;filter:drop-shadow(0 9px 4px #0005);cursor:pointer;will-change:left,top,transform}.cube.selected{filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 14px #fff) drop-shadow(0 9px 4px #0005);animation:bob .8s ease-in-out infinite}.cube.moving{animation:none}.portal-art{position:absolute;width:calc(var(--cell)*1.18);height:calc(var(--cell)*1.18);object-fit:contain;transform:translate(-50%,-67%);z-index:22;pointer-events:none;filter:drop-shadow(0 0 10px #ef63ff)}.spark{position:absolute;width:calc(var(--cell)*1.55);transform:translate(-50%,-50%);z-index:50;pointer-events:none;animation:spark .65s ease-out forwards}
.powers{width:min(95vw,570px);display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.powers div{height:48px;background:#123f78;border:2px solid #54d5ff;border-radius:13px;display:grid;grid-template-columns:40px 1fr;grid-template-rows:20px 20px;color:#fff;align-items:center;padding:2px 5px;box-shadow:0 4px 0 #082e59}.powers img{grid-row:1/3;width:40px;height:40px;object-fit:contain}.powers b{font-size:10px}.powers span{font-size:9px;line-height:1;color:#dff8ff}.hint{width:min(95vw,570px);min-height:44px;background:#123f78;border:3px solid #53d4ff;border-radius:16px;color:white;font-weight:900;text-align:center;padding:8px 12px;box-shadow:0 5px 0 #082e59;display:grid;place-items:center;font-size:clamp(11px,3.2vw,15px)}nav{width:min(95vw,570px);height:62px;display:flex;align-items:center;justify-content:space-between}.icon-btn,.help-btn{width:52px;height:52px;border:0;background:none;padding:0;display:grid;place-items:center}.icon-btn img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 2px #0003)}.help-btn{border-radius:50%;background:linear-gradient(#1ca0fa,#126ad3);border:4px solid #87dcff;color:white;font-size:27px;font-weight:1000;box-shadow:0 5px 0 #09529f}.moves{background:#fff9;border:2px solid #fff;border-radius:16px;min-width:125px;height:48px;display:flex;align-items:center;justify-content:center;gap:7px;color:#164c80}.moves strong{font-size:24px}.moves span{font-weight:900;font-size:12px}
.modal{position:fixed;inset:0;background:#07335ed8;z-index:100;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .25s}.modal.show{opacity:1;pointer-events:auto}.win-card{width:min(86vw,390px);background:linear-gradient(#fff,#eaf9ff);border:6px solid #52d5ff;border-radius:30px;text-align:center;padding:22px;color:#153d70;box-shadow:0 20px 60px #0008;transform:scale(.75);transition:transform .35s cubic-bezier(.2,1.45,.35,1)}.modal.show .win-card{transform:scale(1)}.stars{font-size:38px;color:#ffc51b;text-shadow:0 2px 0 #b36a00}.win-card h2{font-size:38px;color:#68cf28;margin:4px 0}.win-card p{font-weight:800;line-height:1.35}.win-card button{border:0;border-radius:16px;padding:12px 26px;background:linear-gradient(#28a7ff,#1774dc);color:#fff;font-size:20px;font-weight:1000;box-shadow:0 5px 0 #0d4f9b}
@keyframes pulse{50%{transform:scale(1.15);opacity:.65}}@keyframes bob{50%{transform:translate(-50%,-76%)}}@keyframes spark{0%{opacity:0;transform:translate(-50%,-50%) scale(.15) rotate(0)}35%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.35) rotate(40deg)}}
@media(max-height:720px){header{height:55px}.goal-card{height:50px}.goal-card img{height:38px;width:38px}.mission{padding:5px 10px}.powers div{height:42px}.powers img{width:35px;height:35px}.hint{min-height:38px;padding:6px 10px}nav{height:54px}}
.level-pill{background:#123f78;border:3px solid #55d6ff;border-radius:16px;color:#fff;padding:9px 13px;font-size:12px;font-weight:900;box-shadow:0 4px 0 #082f5c}.level-pill strong{font-size:22px;color:#ffd12a}.crate{background:none!important;border:0!important;box-shadow:none!important;object-fit:contain;padding:0}.round{border:0;background:none;width:52px;height:52px;padding:0}.round img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 2px #0003)}nav{gap:6px}.cell{background-image:url('assets/tile_stone_v5.png');background-size:cover;background-position:center}.cell.water{background-image:url('assets/water_v6.png');background-size:cover}.cell.wall{background-image:url('assets/tile_wood_v5.png');background-size:cover}.cell.water:before{display:none}
/* V5.1 - damier acier */
.board-plane{
  border:5px solid #263746;
  background:linear-gradient(145deg,#304454,#182733);
  box-shadow:inset 0 0 0 2px #8aa4b8,inset 0 0 0 5px #1e2d39,0 9px 0 #101a22,0 14px 18px #10253366;
}
.cell{
  background-image:none!important;
  background:
    radial-gradient(circle at 7px 7px,#d7e2ea 0 1.5px,#526574 1.8px 3px,transparent 3.2px),
    radial-gradient(circle at calc(100% - 7px) 7px,#d7e2ea 0 1.5px,#526574 1.8px 3px,transparent 3.2px),
    radial-gradient(circle at 7px calc(100% - 7px),#d7e2ea 0 1.5px,#526574 1.8px 3px,transparent 3.2px),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px),#d7e2ea 0 1.5px,#526574 1.8px 3px,transparent 3.2px),
    linear-gradient(145deg,#aebbc4 0%,#768995 30%,#4f6472 58%,#81939f 100%)!important;
  border:1px solid #2d424f;
  box-shadow:inset 1px 1px 0 #d9e2e8,inset -2px -2px 0 #344955!important;
}
.cell:nth-child(odd){filter:none}
.cell.reachable:after{inset:6px;border:2px solid #d9f6ff;border-radius:10px;background:#8be5ff38;box-shadow:0 0 9px #bcefff, inset 0 0 9px #bcefff55}
.cell.water{background-image:url('assets/water_v6.png')!important;background-size:cover!important;background-position:center!important;box-shadow:inset 0 0 0 2px #81dfff,inset 0 -8px 0 #0c76bf!important}
.cell.wall{background:linear-gradient(145deg,#53616a,#283640)!important;box-shadow:inset 2px 2px 0 #8997a0,inset -2px -2px 0 #18242c!important}
.cell.goal{background:radial-gradient(circle,#e379ff 0 20%,#8e43c3 22% 44%,#48275f 46% 100%)!important;box-shadow:inset 0 0 12px #ffb7ff!important}
.cube.selected{filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 13px #77ddff) drop-shadow(0 9px 4px #0005);animation:bob .8s ease-in-out infinite}
/* V7 - cubes plus vivants, sans nouveaux visuels */
.cube{transform-origin:50% 78%}
.cube:not(.moving):not(.selected){animation:aliveIdle 2.8s ease-in-out infinite}
.cube.selected{animation:selectedAlive .72s ease-in-out infinite}
.cube.react-blocked{animation:blocked .38s ease-in-out 2!important}
.cube.react-friend{animation:friend .5s ease-out 1!important}
@keyframes aliveIdle{0%,100%{transform:translate(-50%,-70%) rotate(0deg) scale(1)}45%{transform:translate(-50%,-72%) rotate(-1deg) scale(1.015,.985)}52%{transform:translate(-50%,-73%) rotate(1deg) scale(.99,1.015)}60%{transform:translate(-50%,-70%) rotate(0deg) scale(1)}}
@keyframes selectedAlive{0%,100%{transform:translate(-50%,-70%) scale(1)}50%{transform:translate(-50%,-78%) scale(1.06,.95)}}
@keyframes blocked{0%,100%{transform:translate(-50%,-70%) rotate(0)}25%{transform:translate(-56%,-70%) rotate(-5deg)}75%{transform:translate(-44%,-70%) rotate(5deg)}}
@keyframes friend{0%,100%{transform:translate(-50%,-70%) scale(1)}45%{transform:translate(-50%,-79%) scale(1.09,.92)}}