:root{font-family:ui-rounded,'Avenir Next',system-ui,sans-serif;color:#203b50;background:#dcebef;font-synthesis:none}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{margin:0;overflow:hidden;user-select:none;-webkit-user-select:none}button,a,input{touch-action:manipulation}button{font:inherit;font-weight:750;color:inherit;border:0;border-radius:15px;padding:12px 18px;background:#fff;box-shadow:0 4px 0 #203b5018;cursor:pointer;transition:transform .12s}button:active{transform:translateY(3px)}button:disabled{opacity:.45;cursor:default}a{color:inherit;text-decoration:none}.top{position:absolute;z-index:3;top:env(safe-area-inset-top,0px);left:0;right:0;padding:16px 20px;display:flex;align-items:center;gap:15px;pointer-events:none}.top>*{pointer-events:auto}.back{font-size:32px;width:38px;text-align:center}.heading{flex:1}.heading h1{font-size:clamp(20px,4vw,28px);margin:0;letter-spacing:-1px}.heading p{margin:4px 0 0;font-size:12px;font-weight:650;opacity:.65}#scene{position:absolute;left:0;top:100px;width:100%;height:calc(100dvh - 300px);touch-action:none;outline:none}#stats{position:absolute;top:90px;left:50%;transform:translateX(-50%);font-size:13px;font-weight:700;white-space:nowrap;z-index:2;background:#ffffff85;border-radius:20px;padding:7px 15px}#controls{position:absolute;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(94%,680px);z-index:3}.panel{background:#f7fbf9e8;backdrop-filter:blur(12px);padding:13px;border-radius:23px;box-shadow:0 10px 30px #294d6417}.caption{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;font-weight:800;opacity:.6;margin:0 0 9px}.slots,.queue{display:flex;gap:7px;justify-content:center}.slots{margin-bottom:12px}.slot{border:2px dashed #a4bbc9;border-radius:15px;min-width:45px;height:47px;display:flex;align-items:center;justify-content:center;font-weight:850;flex:1;max-width:84px;position:relative}.slot.filled{border:0;color:white;text-shadow:0 1px 3px #0008;box-shadow:inset 0 -5px 0 #0002}.queue button{padding:8px 3px;color:white;text-shadow:0 1px 3px #0008;flex:1;min-width:0;font-size:14px}.queue button small{display:block;font-size:9px;margin-top:2px;opacity:.85}.controls-row{display:flex;gap:8px;justify-content:center;margin-top:9px}.controls-row button{font-size:12px;padding:10px 13px;background:#e4eef0}.green{background:#369b70!important;color:white!important}.zoom{position:absolute;left:14px;top:47%;z-index:3;display:flex;flex-direction:column;align-items:center;gap:7px;color:#426577;font-weight:800}.zoom input{writing-mode:vertical-lr;direction:rtl;width:20px;height:95px;accent-color:#3c8da1}.zoom button{font-size:18px;padding:4px 8px;box-shadow:none;background:#ffffff80}#message{position:absolute;top:135px;left:50%;transform:translate(-50%,-10px);opacity:0;transition:.2s;pointer-events:none;z-index:8;background:#24495bea;color:#fff;border-radius:15px;padding:12px 18px;width:max-content;max-width:88%;text-align:center;font-size:13px}#message.show{opacity:1;transform:translate(-50%,0)}#dialog{position:fixed;inset:0;z-index:10;background:#193e5870;backdrop-filter:blur(8px);display:grid;place-items:center}#dialog[hidden]{display:none}.modal{width:min(90vw,380px);padding:32px;text-align:center;border-radius:28px;background:#f7fbf5;box-shadow:0 25px 80px #18304240}.modal h2{font-size:30px;margin:0 0 12px;letter-spacing:-1px}.modal p{line-height:1.6;font-size:14px;opacity:.8}.modal button{margin-top:12px;min-width:150px}.shopgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.shopgrid button{text-align:left;font-size:13px;padding:10px}.shopgrid small{display:block;font-size:10px;margin:3px 0;font-weight:500}.shopgrid b{float:right;color:#328761}.bridge #scene{top:100px;height:calc(100dvh - 195px)}.bridge .zoom{display:none}.bridge #controls{text-align:center}.bridge .panel{padding:10px}.progress{height:6px;background:#acc9d4;border-radius:5px;overflow:hidden;margin-top:8px}.progress i{display:block;background:#308c79;height:100%}.cube #scene{height:calc(100dvh - 220px)}@media(max-height:540px){.top{padding:7px 16px}.heading h1{font-size:18px}.heading p{display:none}#stats{top:50px}#scene,.bridge #scene,.cube #scene{top:65px;left:0;width:65%;height:calc(100dvh - 70px)}#controls{left:auto;right:12px;bottom:12px;transform:none;width:32%}.slots{gap:3px}.slot{min-width:20px;height:34px}.queue{gap:3px}.queue button{font-size:11px}.controls-row{flex-wrap:wrap}.controls-row button{padding:7px}#message{top:80px}.zoom{left:8px;top:40%}.shopgrid{grid-template-columns:1fr}}

/* Voxel Blast keeps the sculpture and the five real 3D firing pads in open space. */
body.voxel-blast{min-height:100dvh;background:radial-gradient(ellipse at 50% 35%,#213d54 0%,#0c1e2e 58%,#06111c 100%);color:#e6f7ff;touch-action:none}
.voxel-blast #scene{height:calc(100dvh - 162px)}
.voxel-blast #controls{touch-action:manipulation}
.voxel-blast #controls{width:min(92%,510px);bottom:max(10px,env(safe-area-inset-bottom))}
.voxel-blast .panel{padding:0;background:none;backdrop-filter:none;box-shadow:none}
.voxel-blast .voxel-queue{display:flex;gap:clamp(6px,2vw,16px);align-items:flex-start}
.voxel-blast .voxel-lane{display:flex;flex:1;min-width:0;flex-direction:column;align-items:center;gap:8px;padding:0;background:none;border:0}
.voxel-blast .queue .voxel-cube{position:relative;flex:none;width:min(100%,58px);height:39px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;color:white;text-shadow:0 2px 3px #071523;font-size:15px;font-weight:900;animation:none}
.voxel-blast .queue .voxel-cube::before,.voxel-blast .queue .voxel-cube::after{content:"";position:absolute;pointer-events:none}
.voxel-blast .queue .voxel-cube::before{left:0;right:0;top:-5px;height:5px;clip-path:polygon(6px 0,100% 0,calc(100% - 5px) 100%,0 100%);background:linear-gradient(180deg,#ffffff7a,#ffffff12),var(--cube-color);border-radius:2px 2px 0 0}
.voxel-blast .queue .voxel-cube::after{right:-7px;top:-3px;bottom:3px;width:7px;transform:skewY(-39deg);transform-origin:left;background:linear-gradient(90deg,#0002,#0007),var(--cube-color);border-radius:0 2px 3px 0}
.voxel-blast .queue .voxel-face{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;border:1px solid #ffffff68;border-radius:3px;background:linear-gradient(140deg,#ffffff80 0%,#ffffff1c 20%,transparent 42%,#00142154 100%),var(--cube-color);box-shadow:inset 2px 2px 0 #ffffff54,inset -3px -3px 0 #0005,0 6px 9px #0006;animation:voxel-breathe var(--breath-duration) ease-in-out var(--breath-delay) infinite;pointer-events:none}
.voxel-blast .queue .voxel-face::before{content:"";position:absolute;left:6px;right:8px;top:3px;height:3px;background:#fff8;border-radius:50%;filter:blur(1px)}
.voxel-blast .queue .voxel-cube.waiting,.voxel-blast .queue .voxel-cube:disabled{opacity:1}
.voxel-blast .queue .voxel-cube.front:disabled{filter:brightness(.7)}
.voxel-blast .zoom{color:#d1e9f8}
.voxel-blast .zoom button{background:#234253;color:#e6f7ff}
.voxel-blast .controls-row{margin-top:5px}
.voxel-blast .controls-row button{background:#274354;color:#e9f7ff;box-shadow:inset 0 1px #ffffff22,0 3px 8px #0005}
.voxel-blast .controls-row:empty{display:none}
.voxel-blast .voxel-queue{perspective:300px;position:relative}
.voxel-blast .voxel-lane{position:relative;z-index:1}
.voxel-blast .voxel-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0;filter:drop-shadow(0 0 5px #87dce8)}
.voxel-blast .voxel-link-badge{position:absolute;z-index:2;right:-2px;bottom:-4px;background:#294b60;border:1px solid #a6dce6;border-radius:5px;color:white;padding:0 2px;font-size:9px;line-height:13px;text-shadow:none}
.voxel-blast .voxel-lane{min-height:139px}
.voxel-blast .voxel-pipe,.voxel-blast .voxel-lock{position:relative;flex:none;width:min(100%,58px);height:39px;filter:drop-shadow(0 5px 5px #0008)}
.voxel-blast .voxel-pipe{border-radius:5px;background:linear-gradient(115deg,#53748d,#a4c8d9 32%,#55738a 70%,#2d4458);border:2px solid #adc9d7;box-shadow:inset 0 -5px #162e40}
.voxel-blast .voxel-pipe::before{content:"";position:absolute;left:7px;right:7px;top:-7px;height:10px;border-radius:4px;background:linear-gradient(#b8d4e1,#617d94);border:2px solid #d0e2e8}
.voxel-blast .pipe-mouth{position:absolute;inset:5px 10px 9px;border-radius:2px;background:#163249;box-shadow:inset 0 2px 5px #061824}
.voxel-blast .voxel-pipe strong{position:absolute;inset:4px 0 0;text-align:center;color:#f6fbff;font-size:20px;text-shadow:0 2px 3px #000}
.voxel-blast .voxel-lock{border-radius:6px;background:linear-gradient(115deg,#a77a28,#f6dc77 38%,#9c6326);border:2px solid #fff0a4;box-shadow:inset 0 -5px #744b1e}
.voxel-blast .lock-arch{position:absolute;left:25%;right:25%;top:-14px;height:16px;border:5px solid #e4c46c;border-bottom:0;border-radius:13px 13px 0 0}
.voxel-blast .lock-hole{position:absolute;left:46%;top:35%;width:8px;height:14px;border-radius:50% 50% 2px 2px;background:#48341d}
.voxel-blast .voxel-lock.unlocking{animation:voxel-poof .33s ease-in forwards}
.voxel-blast .pipe-emerging{animation:pipe-emerge .5s cubic-bezier(.22,1,.36,1) both}
.voxel-flight,.voxel-key-flight{position:fixed;z-index:20;width:48px;height:38px;display:grid;place-items:center;border-radius:4px;color:#fff;font-weight:900;box-shadow:inset 2px 2px #fff7,inset -4px -4px #0005,0 8px 14px #0008;pointer-events:none}
.voxel-key-flight{width:30px;height:30px;background:#e1ad35;color:#fff7b5;font-size:30px}
.voxel-win{position:fixed;inset:0;z-index:15;pointer-events:none;overflow:hidden}
.voxel-win i{position:absolute;left:var(--x);top:var(--y);width:8px;height:8px;background:hsl(var(--hue) 100% 70%);border-radius:50%;box-shadow:0 0 14px 5px hsl(var(--hue) 100% 60% / .65);animation:voxel-firework 1.15s ease-out var(--delay) both}
.voxel-next{pointer-events:auto;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:18px 48px;border:2px solid #a7f3fa;border-radius:16px;background:#194864;color:#fff;font-size:26px;letter-spacing:3px;box-shadow:0 8px 30px #000a,0 0 25px #49dfff7a;animation:voxel-next-in .4s ease-out .5s both}
@keyframes pipe-emerge{0%{transform:translateY(43px) scale(.55);opacity:.1}45%{transform:translateY(25px) scale(.7);opacity:1}100%{transform:translateY(0) scale(1)}}
@keyframes voxel-poof{to{transform:scale(.1) rotate(35deg);opacity:0}}
@keyframes voxel-firework{0%{transform:scale(.1)}35%{transform:scale(1.8)}100%{transform:translateY(50px) scale(.1);opacity:0}}
@keyframes voxel-next-in{from{opacity:0;transform:translate(-50%,-42%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes voxel-breathe{0%,100%{transform:scale(.95)}50%{transform:scale(1.045)}}

/* Voxel Blast gives the sculpture priority: compact queue rows sit low and
   the last row may naturally run below the viewport edge on portrait phones. */
@media (min-height:541px){
 .voxel-blast #scene{top:-10px;height:calc(100dvh + 10px)}
 .voxel-blast #controls{width:min(96%,540px);bottom:-48px}
 .voxel-blast .voxel-queue{gap:clamp(0px,.7vw,6px)}
 .voxel-blast .voxel-lane{gap:0;min-height:184px}
 .voxel-blast .queue .voxel-cube{width:min(100%,82px);height:60px}
}
 @media(max-height:540px){.voxel-blast #scene{width:65%;height:calc(100dvh - 35px)}.voxel-blast #controls{width:31%;bottom:-18px}.voxel-blast .voxel-lane{gap:0}.voxel-blast .queue .voxel-cube{height:29px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.voxel-blast .queue .voxel-face{animation:none}}

.voxel-model-overlay{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}.voxel-blast .queue .voxel-cube::before,.voxel-blast .queue .voxel-cube::after{display:none}.voxel-blast .voxel-link-badge{z-index:7}
.voxel-blast #scene,.voxel-blast .voxel-model-overlay{touch-action:none}
/* Voxel Blast owns rotation and zoom. Disabling the browser gesture on the
   page itself prevents iOS Safari's double-tap zoom, including taps landing
   on the transparent model overlay rather than its underlying button. */
html:has(body.voxel-blast),body.voxel-blast *{touch-action:none}

/* Stable queue hit areas; persistent 3D cubes animate independently above them. */
.voxel-blast .queue .voxel-cube{width:min(100%,76px);height:54px;transition:none}
.voxel-blast .voxel-lane{min-height:178px}
.voxel-blast #scene{height:calc(100dvh - 210px)}
@media(max-height:540px){.voxel-blast #scene{height:calc(100dvh - 35px)}.voxel-blast .queue .voxel-cube{height:42px}.voxel-blast .voxel-lane{min-height:142px}}

/* Links continue to offscreen partners, clipped only at the queue boundary. */
.voxel-blast .voxel-links{overflow:hidden}
.voxel-blast .queue .voxel-cube:active{transform:none}
.voxel-shooter-pop{position:fixed;z-index:7;pointer-events:none;width:90px;height:90px;margin:-45px;color:var(--pop-color);animation:voxel-pop .55s ease-out both}
.voxel-shooter-pop svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round}
@keyframes voxel-pop{0%{transform:scale(.35);opacity:0}18%{opacity:.9}100%{transform:scale(1.35);opacity:0}}
#loading{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:linear-gradient(180deg,#14293c,#0b1c2b);transition:opacity .3s ease,visibility .3s ease}
#loading.ready{opacity:0;visibility:hidden;pointer-events:none}
.vcube-stage{perspective:820px;transform:scale(1.8)}
.vcube{position:relative;width:0;height:0;transform-style:preserve-3d;animation:vcube-spin 14s linear infinite}
.vcube b{position:absolute;left:-9px;top:-9px;width:18px;height:18px;transform-style:preserve-3d;transform:translate3d(var(--x),calc(var(--y) - 125px),var(--z));opacity:0;transition:transform .2s cubic-bezier(.18,.78,.32,1),opacity .13s ease;will-change:transform,opacity}
.vcube b.on{transform:translate3d(var(--x),var(--y),var(--z));opacity:1}
.vcube.removing b:not(.on){transform:translate3d(var(--x),calc(var(--y) + 125px),var(--z));opacity:0}
.vcube i{position:absolute;inset:0;border-radius:3px;background:var(--c);box-shadow:inset 0 0 0 1.5px #ffffff2e}
.vcube i:nth-child(1){transform:translateZ(9px)}
.vcube i:nth-child(2){transform:rotateY(180deg) translateZ(9px);filter:brightness(.55)}
.vcube i:nth-child(3){transform:rotateY(90deg) translateZ(9px);filter:brightness(.8)}
.vcube i:nth-child(4){transform:rotateY(-90deg) translateZ(9px);filter:brightness(.72)}
.vcube i:nth-child(5){transform:rotateX(90deg) translateZ(9px);filter:brightness(1.22)}
.vcube i:nth-child(6){transform:rotateX(-90deg) translateZ(9px);filter:brightness(.45)}
@keyframes vcube-spin{from{transform:rotateX(-24deg) rotateY(0)}to{transform:rotateX(-24deg) rotateY(360deg)}}
