*{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,#board .cell.merge-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. */
#energy-capacity,#energy-clock{font-size:17px;display:block;text-align:center}
#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-prev,#order-next{position:absolute;top:28px;width:64px;height:120px;border:0;padding:0;background:transparent;color:transparent;cursor:pointer;touch-action:manipulation}
#order-prev{left:-70px}#order-next{right:-70px}
#order-prev:disabled,#order-next:disabled{pointer-events:none}
#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}
}