*{box-sizing:border-box}html,body{margin:0;background:#061b32;color:white;font-family:system-ui,sans-serif}body{min-height:100dvh}.viewport{width:100vw;height:min(100dvh,150vw);min-height:0;display:flex;justify-content:center;overflow:hidden}.scene{position:relative;width:1024px;height:1536px;flex:none;transform-origin:top center;overflow:hidden;touch-action:pan-y}.layer{position:absolute;pointer-events:none;user-select:none}.full{inset:0;width:1024px;height:1536px}.reservoir{object-fit:fill}.ice{left:50px;top:286px;width:234px;height:350px}.dome{left:400px;top:195px;width:270px;height:428px}.coral{left:748px;top:254px;width:248px;height:380px}.basin{left:102px;top:365px;width:820px;height:1164px}.hud{left:0;top:0;width:1024px;height:227px}.hud-values{position:absolute;left:0;top:142px;width:1024px;display:flex;justify-content:space-around;font-weight:900;font-size:32px;text-shadow:0 2px 5px #001}.hud-values>span{min-width:120px;text-align:center}#board{position:absolute;inset:0;pointer-events:none}#board .cell{position:absolute;display:flex;align-items:center;justify-content:center;background:transparent!important;border:0!important;box-shadow:none!important;padding:0;pointer-events:auto;touch-action:none;color:transparent;outline:0}#board .cell:focus-visible{outline:2px solid white}#board .cell .item-visual{display:flex;width:100%;height:100%;align-items:center;justify-content:center;pointer-events:none}#board .cell img{max-width:90%;max-height:90%;object-fit:contain;filter:drop-shadow(0 5px 6px #001a)}#board .cell.selected img{filter:drop-shadow(0 0 10px #fff8)}#board .cell.spawn-pop img{animation:pop .3s ease-out}@keyframes pop{from{transform:scale(.4)}to{transform:scale(1)}}#coral-produce{position:absolute;left:408px;top:1364px;width:212px;height:147px;border:0;background:transparent;cursor:pointer;touch-action:manipulation}#coral-produce:disabled{opacity:.5}#fx-layer{pointer-events:none;position:absolute;inset:0}.spawn-flash{position:fixed;z-index:100;width:24px;height:24px;border-radius:50%;background:#fff7;box-shadow:0 0 24px 15px #60eaff;transform:translate(-50%,-50%);animation:flash .65s ease-out forwards}@keyframes flash{to{opacity:0;transform:translate(-50%,-50%) scale(3)}}.controls{max-width:650px;margin:auto;padding:12px 20px;font-size:12px;background:#061b32}.controls button{border:1px solid #789;color:white;background:#123;padding:9px;border-radius:8px}.controls details{margin-top:8px}.sr-only{position:absolute;left:-10000px}.drag-ghost{position:fixed;z-index:1000;pointer-events:none}
.cell.drag-source > .item-visual{visibility:hidden;}

/* AM-TECH-037 stabilization: limit zoom prevention to interactive game regions. */
#coral-produce,#board,#board .cell,#order-carousel{touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
#board,#board .cell{touch-action:none}
#order-carousel{touch-action:pan-y}
body:not(.dev-mode) .controls{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0;border:0}
body:not(.dev-mode) #order-position{display:none}
/* Experimental developer overlay, never ship this module in production. */
#dev-toggle{position:fixed;right:8px;bottom:8px;z-index:99;background:#082f4c;color:#fff;border:1px solid #c9a84d;border-radius:50%;width:34px;height:34px;opacity:.65}
#dev-panel{position:fixed;z-index:200;inset:5% 3%;background:#082036f5;color:white;overflow:auto;padding:16px;border:2px solid #d7b66e;border-radius:14px;font:14px system-ui}
#dev-panel[hidden]{display:none}#dev-panel fieldset{margin:10px 0;border:1px solid #537a98}#dev-panel button{background:#164b70;color:white;border:1px solid #a9d5ed;border-radius:6px;padding:9px;margin:4px}#dev-panel h2{font-size:19px}

/* AM-TECH-040-B1 — isolated C1/C2 ghost geometry restoration (AM-TECH-036). */
.drag-ghost{top:0;left:0;display:flex;align-items:center;justify-content:center;width:72px;height:72px;min-width:0;min-height:0;padding:0;border:0;background:transparent;box-shadow:none;overflow:visible;will-change:transform;}
.drag-ghost .item-visual{display:flex;align-items:center;justify-content:center;width:72px;height:72px;min-width:0;min-height:0;pointer-events:none;}
.drag-ghost .item-visual img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center;pointer-events:none;}

/* AM-TECH-041 A/C: local touch protection and transient transfer concealment. */
#coral-produce{touch-action:manipulation!important;-webkit-touch-callout:none;}
.spawn-flash{pointer-events:none;}
#board .cell.pending-transfer .item-visual{visibility:hidden;}

/* AM-TECH-042 A — Interface officielle des commandes : trois cartes PNG officielles, boîte de dimensions identiques.
   Tous les éléments dynamiques sont placés en pourcentages dans les zones des cadres officiels (src/ui/order-card-layout.js). */
#order-carousel{position:absolute;left:242px;top:250px;width:540px;height:176px;z-index:3;touch-action:pan-y}
#order-card{position:relative;width:100%;height:100%}
#order-card .official-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;-webkit-user-drag:none}
#order-card>div,#order-card>button{position:absolute}
#order-card .order-portrait-zone{border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center}
#order-card .order-portrait{width:100%;height:100%;object-fit:cover}
#order-card .order-slot{display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:8px}
#order-card .order-slot img{width:86%;height:86%;object-fit:contain;filter:drop-shadow(0 3px 3px #0007)}
#order-card .order-slot.missing img{opacity:.55}
#order-card .order-slot strong{position:absolute;right:4%;bottom:4%;font-size:24px;line-height:1;padding:2px 7px;border-radius:9px;background:#0b2a4ae0;color:#fff;border:1px solid #d7b66e;text-shadow:0 1px 2px #000}
#order-card .order-fallback{font-weight:900;font-size:30px;color:#36200b}
#order-card .order-reward{display:flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;color:#36200b;font-weight:800;font-size:26px;text-shadow:0 1px 0 #fff8}
#order-card .order-message{display:flex;align-items:center;justify-content:center;text-align:center;color:#2d1e12;font-weight:700;font-size:19px;line-height:1.15;padding:0 6px}
#order-card .order-deliver{border:0;padding:0;border-radius:999px;background:rgba(18,32,46,.6);cursor:default;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#order-card .order-deliver.working{background:rgba(18,32,46,.74)}
#order-card .order-deliver.ready{background:transparent;cursor:pointer;box-shadow:0 0 14px 3px rgba(128,255,131,.55)}
#order-dots{position:absolute;left:0;right:0;top:178px;height:40px;display:flex;justify-content:center;gap:2px}
#order-dots[hidden]{display:none}
.order-dot{position:relative;width:56px;height:40px;border:0;background:transparent;padding:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.order-dot::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:rgba(230,245,255,.55);border:2px solid #c9a84d;transition:transform .2s,background .2s}
.order-dot.active::after{background:#ffe9a8;transform:scale(1.25)}
#order-position{position:absolute;left:50%;top:180px;transform:translateX(-50%);font-size:13px;color:white;text-shadow:0 1px 3px #000}
@keyframes order-in-next{from{opacity:0;transform:translate3d(28px,0,0)}to{opacity:1;transform:none}}
@keyframes order-in-prev{from{opacity:0;transform:translate3d(-28px,0,0)}to{opacity:1;transform:none}}
#order-card.slide-next{animation:order-in-next .24s ease-out}
#order-card.slide-prev{animation:order-in-prev .24s ease-out}

/* AM-TECH-042 B/C/D — Eau vivante : écoulements, bulles, bassin, décor. Décoratif uniquement :
   aucune interaction, transform/opacity seulement, aucun filtre ni mode de fusion, aucun PNG créé ou modifié. */
.fx-layer,.fx-layer *{pointer-events:none;-webkit-user-select:none;user-select:none}
.fx-layer{position:absolute;inset:0}
.fx-layer>*{position:absolute;overflow:hidden;contain:paint}
.fx-layer i{position:absolute;display:block}
@keyframes fx-breathe{from{opacity:.45}to{opacity:1}}
@keyframes fx-sway-a{from{transform:translate3d(-3%,0,0)}to{transform:translate3d(5%,-3%,0)}}
@keyframes fx-sway-b{from{transform:translate3d(4%,-2%,0)}to{transform:translate3d(-5%,3%,0)}}
@keyframes fx-sway-pool{from{transform:translate3d(0,0,0)}to{transform:translate3d(-5%,0,0)}}
@keyframes fx-sway-rays{from{transform:translate3d(0,0,0)}to{transform:translate3d(-22%,0,0)}}
@keyframes fx-ring-basin{0%{transform:scale(.15);opacity:0}12%{opacity:.5}100%{transform:scale(1);opacity:0}}
@keyframes fx-splash{0%{transform:scale(.3);opacity:0}25%{opacity:.65}100%{transform:scale(1.15);opacity:0}}
@keyframes fx-flow-down{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,0,0)}}
@keyframes fx-bubble{
 0%{transform:translate3d(0,0,0) scale(.6);opacity:0}
 10%{opacity:.85}
 35%{transform:translate3d(calc(var(--dx) * .8),calc(var(--rise) * -.35),0) scale(.9)}
 65%{transform:translate3d(calc(var(--dx) * -.6),calc(var(--rise) * -.68),0) scale(1)}
 90%{opacity:.6}
 100%{transform:translate3d(calc(var(--dx) * .4),calc(var(--rise) * -1),0) scale(1.05);opacity:0}}
.fx-shaft{border-radius:46% 46% 0 0 / 14% 14% 0 0;opacity:.6}
.fx-shaft-rays{left:0;top:0;width:135%;height:100%;background:repeating-linear-gradient(104deg,rgba(190,240,255,0) 0,rgba(190,240,255,0) 24px,rgba(190,240,255,.16) 42px,rgba(190,240,255,0) 64px);animation:fx-sway-rays 22s ease-in-out infinite alternate}
.fx-basin{border-radius:14px}
.fx-caustic{left:-8%;top:-6%;width:116%;height:112%}
.fx-caustic-a{background:radial-gradient(ellipse 110px 52px at 18% 14%,rgba(200,248,255,.22),rgba(200,248,255,0) 70%),radial-gradient(ellipse 140px 66px at 64% 36%,rgba(200,248,255,.17),rgba(200,248,255,0) 70%),radial-gradient(ellipse 96px 46px at 30% 66%,rgba(200,248,255,.19),rgba(200,248,255,0) 70%),radial-gradient(ellipse 130px 60px at 80% 86%,rgba(200,248,255,.16),rgba(200,248,255,0) 70%);animation:fx-sway-a 26s ease-in-out infinite alternate}
.fx-caustic-b{background:radial-gradient(ellipse 120px 56px at 70% 12%,rgba(170,235,255,.17),rgba(170,235,255,0) 70%),radial-gradient(ellipse 100px 48px at 22% 42%,rgba(170,235,255,.18),rgba(170,235,255,0) 70%),radial-gradient(ellipse 150px 70px at 58% 68%,rgba(170,235,255,.15),rgba(170,235,255,0) 70%),radial-gradient(ellipse 110px 50px at 14% 90%,rgba(170,235,255,.17),rgba(170,235,255,0) 70%);animation:fx-sway-b 33s ease-in-out infinite alternate}
.fx-surface{inset:0;background:linear-gradient(180deg,rgba(180,240,255,.15),rgba(180,240,255,0) 42%,rgba(10,60,120,.09) 100%);animation:fx-breathe 9s ease-in-out infinite alternate}
.fx-ripple{left:var(--x);top:var(--y);width:120px;height:120px;margin:-60px 0 0 -60px;border:2px solid rgba(225,250,255,.3);border-radius:50%;opacity:0;animation:fx-ring-basin 9s ease-out var(--delay) infinite}
.fx-pool{border-radius:18px}
.fx-pool-shimmer{left:-6%;top:0;width:112%;height:100%;background:radial-gradient(ellipse 70px 7px at 12% 35%,rgba(225,250,255,.4),rgba(225,250,255,0) 72%),radial-gradient(ellipse 90px 8px at 38% 68%,rgba(225,250,255,.34),rgba(225,250,255,0) 72%),radial-gradient(ellipse 60px 6px at 64% 30%,rgba(225,250,255,.38),rgba(225,250,255,0) 72%),radial-gradient(ellipse 80px 7px at 88% 62%,rgba(225,250,255,.34),rgba(225,250,255,0) 72%);animation:fx-sway-pool 14s ease-in-out infinite alternate}
.fx-flow{-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.fx-flow-stripes{left:0;top:0;width:100%;height:200%;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(235,252,255,.55) 20%,rgba(255,255,255,0) 42%,rgba(235,252,255,.32) 64%,rgba(255,255,255,0) 86%);background-size:100% var(--period);animation:fx-flow-down var(--t) linear infinite}
.fx-splash .fx-ring{left:50%;top:50%;width:56px;height:16px;margin:-8px 0 0 -28px;border:2px solid rgba(220,250,255,.6);border-radius:50%;opacity:0;animation:fx-splash 2.4s ease-out var(--delay) infinite}
.fx-bubble{left:var(--x);bottom:2px;width:var(--s);height:var(--s);margin-left:calc(var(--s) * -.5);border-radius:50%;background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.95) 0 14%,rgba(255,255,255,.28) 32%,rgba(255,255,255,.06) 64%,rgba(255,255,255,0) 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);opacity:0;animation:fx-bubble var(--dur) cubic-bezier(.35,.1,.55,1) var(--delay) infinite}
.fx-paused .fx-layer *,.fx-paused #order-card{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
 .fx-layer,.fx-layer *{animation:none!important}
 .fx-bubbles,.fx-splash,.fx-ripple{display:none}
 .fx-flow-stripes{transform:none}
 #order-card.slide-next,#order-card.slide-prev{animation:none}
}

/* AM-TECH-043 — HUD d'énergie : nombre seul (sans « /100 »), compte à rebours à droite du nombre dans la barre officielle. */
.hud-values .energy-readout{display:flex;align-items:center;justify-content:center;gap:9px;height:44px;position:relative;left:26px}
.hud-values .energy-readout #energy{font-size:32px;line-height:1}
.hud-values .energy-readout #energy.long{font-size:25px}
.hud-values #energy-clock{font-size:16px;font-weight:800;line-height:1;color:#c4f0ff;text-shadow:0 1px 3px #001;font-variant-numeric:tabular-nums}
.hud-values #energy-clock[hidden]{display:none}

/* AM-TECH-043 — Flèches de navigation des commandes : deux chevrons dorés discrets, de part et d'autre de la carte. */
#order-prev,#order-next{position:absolute;top:40px;width:56px;height:96px;border:0;padding:0;background:transparent;color:transparent;font-size:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;opacity:.8}
#order-prev{left:-54px}#order-next{right:-54px}
#order-prev::before,#order-next::before{content:"";position:absolute;top:50%;left:50%;width:15px;height:15px;margin:-10px 0 0 -10px;border-top:4px solid #efce72;border-right:4px solid #efce72;border-radius:2px;transform:rotate(45deg)}
#order-prev::before{transform:rotate(-135deg);margin-left:-5px}
#order-prev:disabled,#order-next:disabled{visibility:hidden;pointer-events:none}
#order-prev:active,#order-next:active{opacity:1}

/* AM-TECH-043 — Fusion : apparition de la créature évoluée plus douce (remplace l'ancien « pop » pour les fusions seulement). */
#board .cell.merge-pop img{animation:merge-appear .6s cubic-bezier(.2,.8,.3,1)}
@keyframes merge-appear{0%{transform:scale(.55);opacity:.35}55%{transform:scale(1.07);opacity:1}100%{transform:scale(1);opacity:1}}

/* AM-TECH-043 — Bassin : rayonnements turquoise, reflet lent, scintillements occasionnels (s'ajoutent aux effets 042, inchangés). */
.fx-rays{top:-4%;height:108%}
.fx-rays-a{left:-10%;width:52%;background:linear-gradient(112deg,rgba(60,225,235,0) 0%,rgba(60,225,235,.12) 38%,rgba(120,245,240,.17) 50%,rgba(60,225,235,.1) 62%,rgba(60,225,235,0) 100%);animation:fx-ray-a 30s ease-in-out infinite alternate}
.fx-rays-b{left:48%;width:46%;background:linear-gradient(112deg,rgba(70,230,240,0) 0%,rgba(70,230,240,.09) 40%,rgba(130,248,245,.13) 52%,rgba(70,230,240,.07) 64%,rgba(70,230,240,0) 100%);animation:fx-ray-b 41s ease-in-out infinite alternate}
.fx-sweep{top:-4%;left:0;width:26%;height:108%;background:linear-gradient(105deg,rgba(210,252,255,0),rgba(210,252,255,.15) 50%,rgba(210,252,255,0));transform:translate3d(-130%,0,0);animation:fx-sweep 24s linear infinite}
.fx-twinkle{left:var(--x);top:var(--y);width:var(--s);height:var(--s);margin:-3px 0 0 -3px;border-radius:50%;background:radial-gradient(circle,#fff 0 28%,rgba(160,250,255,.9) 46%,rgba(160,250,255,0) 72%);box-shadow:0 0 6px 1px rgba(150,245,255,.55);opacity:0;animation:fx-twinkle var(--dur) ease-in-out var(--delay) infinite}
@keyframes fx-ray-a{from{transform:translate3d(-6%,0,0);opacity:.55}to{transform:translate3d(34%,0,0);opacity:1}}
@keyframes fx-ray-b{from{transform:translate3d(8%,0,0);opacity:1}to{transform:translate3d(-30%,0,0);opacity:.5}}
@keyframes fx-sweep{from{transform:translate3d(-130%,0,0)}to{transform:translate3d(480%,0,0)}}
@keyframes fx-twinkle{0%,62%{opacity:0;transform:scale(.4)}73%{opacity:.95;transform:scale(1.15)}86%{opacity:.5;transform:scale(.9)}100%{opacity:0;transform:scale(.4)}}
@media (prefers-reduced-motion:reduce){.fx-sweep,.fx-twinkle{display:none}}

/* AM-TECH-043 — Effet de fusion (décoratif, 0,6–0,8 s) : éclaboussure, onde lumineuse turquoise, étincelles. Placé sous les créatures. */
.fx-merge-layer,.fx-merge-layer *{pointer-events:none;-webkit-user-select:none;user-select:none}
.fx-merge-layer{position:absolute;inset:0}
.mfx{position:absolute;width:0;height:0;visibility:hidden}
.mfx.on{visibility:visible}
.mfx i{position:absolute;display:block;left:0;top:0;opacity:0}
.mfx-wave{width:128px;height:128px;margin:-64px 0 0 -64px;border-radius:50%;background:radial-gradient(circle,rgba(110,238,255,0) 52%,rgba(110,238,255,.3) 66%,rgba(160,250,255,.55) 70%,rgba(110,238,255,0) 76%)}
.mfx-ring{width:92px;height:30px;margin:-15px 0 0 -46px;border-radius:50%;border:2px solid rgba(225,252,255,.85)}
.mfx-drop{width:7px;height:7px;margin:-3px 0 0 -3px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 30%,rgba(170,245,255,.9) 55%,rgba(120,230,255,.2) 85%)}
.mfx-spark{width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:radial-gradient(circle,#fff 0 30%,rgba(190,252,255,.95) 50%,rgba(190,252,255,0) 72%)}
.mfx.on .mfx-wave{animation:mfx-wave .7s cubic-bezier(.2,.7,.3,1) both}
.mfx.on .mfx-ring-1{animation:mfx-ring .5s ease-out both}
.mfx.on .mfx-ring-2{animation:mfx-ring .5s ease-out .12s both}
.mfx.on .mfx-drop{animation:mfx-drop .55s ease-out both}
.mfx.on .mfx-spark{animation:mfx-spark .72s ease-out var(--delay) both}
@keyframes mfx-wave{0%{transform:scale(.2);opacity:.95}100%{transform:scale(1.15);opacity:0}}
@keyframes mfx-ring{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.2);opacity:0}}
@keyframes mfx-drop{0%{transform:translate3d(0,0,0) scale(.6);opacity:0}15%{opacity:1}55%{transform:translate3d(calc(var(--dx) * .7),var(--dy),0) scale(1);opacity:1}100%{transform:translate3d(var(--dx),calc(var(--dy) * -.15),0) scale(.7);opacity:0}}
@keyframes mfx-spark{0%{transform:translate3d(0,0,0) scale(.3);opacity:0}20%{opacity:1}100%{transform:translate3d(var(--ax),var(--ay),0) scale(.9);opacity:0}}
@media (prefers-reduced-motion:reduce){.fx-merge-layer{display:none}#board .cell.merge-pop img{animation:none}}

/* AM-TECH-046-R2 — lecture de la section DEV « Niveau du joueur — TEST » (panneau développeur uniquement). */
#dev-level-readout{white-space:pre-wrap;margin:6px 0 10px;padding:8px;border:1px solid #537a98;border-radius:6px;background:#04182b;font:12px/1.4 ui-monospace,Menlo,monospace}