:root{--background-color: #111111;--border-radius: 12px;--border-radius-small: 4px;--gap: 20px;--gap-small: 2px;--transition-speed: .2s;--stage-glow-padding: 48px;--stage-glow: rgba(255, 102, 0, .45)}@media (max-width: 399px){:root{--stage-glow-padding: 32px}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#111;background:var(--background-color);color:#fff;color:var(--text-color);height:100vh;margin:0;padding:0;display:flex;flex-direction:column;overflow:hidden}.container{display:flex;flex-direction:column;height:100vh;height:100dvh;padding:10px;padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right));padding-bottom:max(10px,env(safe-area-inset-bottom))}.puzzle-container{position:relative;flex:1;min-height:0;display:flex;justify-content:center;align-items:center;background:transparent;overflow:visible;margin:var(--stage-glow-padding) 0}.stage{--stage-max-width: 1200px;position:relative;flex-shrink:0;border-radius:var(--border-radius-small);box-shadow:0 0 12px var(--stage-glow);transition:box-shadow var(--transition-speed) ease}.stage canvas#voronoiCanvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.stage.puzzle-solved{box-shadow:0 0 30px var(--solved-glow)!important;animation:solvedGlow 2s ease-in-out infinite alternate}@keyframes solvedGlow{0%{box-shadow:0 0 20px var(--solved-glow)}to{box-shadow:0 0 40px var(--solved-glow)}}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#111111fd;display:flex;justify-content:center;align-items:center;z-index:9999;opacity:0;visibility:hidden;transition:opacity .9s ease-out,visibility .9s ease-out}body.is-app-loading .container,body.is-app-loading #stageActions,body.is-app-loading #completionOverlay,body.is-app-loading .skip-link{visibility:hidden}.loading-overlay.visible{opacity:1;visibility:visible}.loading-overlay.is-fading-out .loading-gradient-heartbeat{animation:none!important;transform:scale(1);opacity:.82}.loading-overlay.zoom-complete .loading-gradient-heartbeat{animation:loading-heartbeat-glow 1s ease-in-out infinite}.loading-gradient-zoom{--loading-gradient-end-size: min(68vmin, 72vw);width:var(--loading-gradient-end-size);height:var(--loading-gradient-end-size);flex-shrink:0;transform:scale(.32);animation:loading-zoom 1.4s cubic-bezier(.2,.9,.25,1) forwards}.loading-gradient-heartbeat{width:100%;height:100%;display:block;animation:loading-heartbeat 1s ease-in-out infinite;filter:drop-shadow(0 0 20px rgba(0,204,255,.55))}@keyframes loading-zoom{0%{transform:scale(.32)}to{transform:scale(.82)}}@keyframes loading-heartbeat{0%{transform:scale(1);opacity:.82}14%{transform:scale(1.13);opacity:1}28%{transform:scale(1);opacity:.86}42%{transform:scale(1.07);opacity:.94}56%{transform:scale(1);opacity:.82}to{transform:scale(1);opacity:.82}}@keyframes loading-heartbeat-glow{0%,56%,to{opacity:.82}14%{opacity:1}28%{opacity:.88}42%{opacity:.94}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:absolute;top:-40px;left:16px;z-index:2000;padding:8px 12px;background:var(--primary-color, #00ddff);color:#000;text-decoration:none;border-radius:4px}.skip-link:focus{top:16px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.loading-gradient-zoom{animation:none!important;transform:scale(.55)}.loading-gradient-heartbeat{animation:none!important;opacity:.9}}.controls-drawer{position:fixed;bottom:0;left:0;right:0;background:var(--control-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--cell-border);z-index:30;transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:0 -10px 30px var(--background-color)}.controls-drawer.open{transform:translateY(0)}.drawer-toggle{position:absolute;top:-25px;left:50%;transform:translate(-50%);width:50px;height:25px;background:var(--control-bg);border:1px solid var(--cell-border);border-bottom:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-speed) ease;z-index:31}.drawer-toggle:hover{background:var(--canvas-background);border-color:var(--controls-primary-color)}.drawer-toggle:active{transform:translate(-50%) translateY(1px)}.caret-icon{color:var(--text-muted);transition:transform .3s cubic-bezier(.4,0,.2,1);opacity:.7}.drawer-toggle:hover .caret-icon{color:var(--controls-primary-color);opacity:1}.controls-content{padding:30px 20px 20px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:center;min-height:60px}.control-group{display:flex;align-items:center;gap:10px}.control-group label{color:var(--text-color);font-size:.9rem;font-weight:500;min-width:120px}.control-group input[type=range]{width:120px;background:var(--canvas-background);border:1px solid var(--cell-border);border-radius:var(--border-radius-small);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:var(--controls-primary-color);border-radius:50%;cursor:pointer;border:2px solid var(--background-color)}.control-group input[type=range]::-moz-range-thumb{width:16px;height:16px;background:var(--controls-primary-color);border-radius:50%;cursor:pointer;border:2px solid var(--background-color)}.control-group select{width:120px;background:var(--canvas-background);border:1px solid var(--cell-border);border-radius:var(--border-radius-small);outline:none;color:var(--text-color);padding:4px 8px;font-size:.9rem;cursor:pointer}.control-group select:hover{border-color:var(--controls-primary-color)}.control-group select:focus{border-color:var(--controls-primary-color);box-shadow:0 0 0 2px #0df3}.control-group span{color:var(--controls-primary-color);font-size:.9rem;font-weight:500;min-width:30px;text-align:center}.control-group button{background:var(--controls-primary-color);color:var(--background-color);border:none;padding:8px 16px;border-radius:var(--border-radius-small);cursor:pointer;font-size:.9rem;font-weight:500;transition:all var(--transition-speed) ease}.control-group button:hover{background:var(--controls-piece-hover);transform:translateY(-1px);box-shadow:0 4px 8px var(--controls-piece-border-hover)}.control-group button:active{transform:translateY(0)}@media (max-width: 768px){.controls-drawer{transform:translateY(100%)}.drawer-toggle{width:40px;height:20px;top:-20px}.controls-content{padding:25px 15px 15px;gap:15px;flex-direction:column;align-items:stretch}.control-group{flex-direction:column;align-items:stretch;gap:8px}.control-group label{min-width:auto;text-align:center;font-size:.8rem}.control-group input[type=range]{width:100%;margin:0 10px}.control-group button{width:100%;margin:2px 0}}@media (max-width: 480px){.controls-content{padding:20px 10px 10px;gap:10px}.control-group{gap:5px}.control-group label{font-size:.75rem}.control-group button{padding:10px 16px;font-size:.8rem;min-height:44px}}@media (pointer: coarse){.drawer-toggle{width:56px;height:44px;top:-44px}.control-group button,.control-group select{min-height:44px}.control-group input[type=range]::-webkit-slider-thumb{width:24px;height:24px}.control-group input[type=range]::-moz-range-thumb{width:24px;height:24px}}.stage-actions{position:fixed;top:max(12px,env(safe-area-inset-top));inset-inline-end:max(12px,env(safe-area-inset-right));z-index:25;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}.stage-action-btn{pointer-events:auto;flex-shrink:0;width:44px;height:44px;min-width:44px;min-height:44px;border-radius:50%;border:1px solid var(--cell-border);background:var(--control-bg);padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;transition:border-color var(--transition-speed) ease,background var(--transition-speed) ease}.stage-action-btn__icon{width:1.75rem;height:1.75rem;display:block;pointer-events:none}.stage-action-btn__glyph{transition:stroke var(--transition-speed) ease}.stage-action-btn:hover,.stage-action-btn:focus-visible{border-color:var(--controls-primary-color);background:var(--canvas-background);outline:none}.stage-action-btn:hover .stage-action-btn__glyph,.stage-action-btn:focus-visible .stage-action-btn__glyph{stroke:var(--controls-primary-color)}.release-pieces-btn:disabled,.release-pieces-btn[hidden]{opacity:0;pointer-events:none}.audio-toggle-btn[aria-pressed=true] .audio-toggle-btn__slash,.audio-toggle-btn[aria-pressed=false] .audio-toggle-btn__wave{display:none}@media (min-width: 700px){.stage-actions{flex-direction:row-reverse}}@media (max-width: 399px){.stage-actions{top:max(8px,env(safe-area-inset-top));inset-inline-end:max(8px,env(safe-area-inset-right));gap:6px}}@media (pointer: coarse){.stage-action-btn{width:44px;height:44px}}@media (max-width: 768px){h1{font-size:2rem}.container{padding:10px}.controls{flex-direction:column;align-items:stretch}.control-group{justify-content:space-between}}@media (max-width: 480px){h1{font-size:1.5rem}.control-group{flex-direction:column;align-items:flex-start;gap:5px}.control-group label{min-width:auto}}.completion-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:5000;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));background:#111111eb;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s ease}.completion-overlay.visible{opacity:1;visibility:visible}.completion-gradient{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(circle at 50% 50%,#00ccff73,#7a4edf33 40%,#1110 75%);animation:phantasmVeilPulse 4s ease-in-out infinite}@keyframes phantasmVeilPulse{0%,to{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}.completion-word{position:relative;z-index:1;margin:0 0 2rem;font-size:clamp(3rem,12vw,5rem);font-weight:200;letter-spacing:.35em;text-transform:lowercase;color:var(--text-color, #ffffff);text-indent:.35em}.completion-play-again{position:relative;z-index:1;min-width:160px;min-height:44px;padding:.75rem 1.5rem;border:1px solid var(--cell-border, rgba(255, 255, 255, .2));border-radius:var(--border-radius-small, 4px);background:#1119;color:var(--controls-primary-color, #00ddff);font-size:1rem;letter-spacing:.06em;cursor:pointer;transition:border-color .2s ease,background .2s ease}.completion-play-again:hover,.completion-play-again:focus-visible{border-color:var(--controls-primary-color, #00ddff);background:#00ddff14;outline:none}canvas.webgl-canvas.transition-outgoing{z-index:11!important;pointer-events:none!important;transition:opacity var(--crossfade-duration, .8s) ease}canvas.webgl-canvas.transition-outgoing.is-fading{opacity:0}.stage.transition-locked{pointer-events:none}.stage.transition-locked~.stage-actions .release-pieces-btn,body:has(.stage.transition-locked) .release-pieces-btn{visibility:hidden;pointer-events:none}.stage.transition-hold.puzzle-solved{animation:none}.stage.level-celebrating{animation:celebratePulse 1.2s ease-in-out forwards}@keyframes celebratePulse{0%{transform:scale(1)}40%{transform:scale(1.02)}to{transform:scale(1)}}@media (prefers-reduced-motion: reduce){.completion-gradient,.stage.level-celebrating{animation:none}.completion-overlay{transition:none}canvas.webgl-canvas.transition-outgoing{transition:none}}body:not(.dev-panel-enabled) .controls-drawer,body:not(.dev-panel-enabled) .drawer-toggle{display:none!important}canvas.webgl-canvas{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important;pointer-events:auto!important;z-index:10;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.puzzle-container.webgl-mode #voronoiCanvas{opacity:0;pointer-events:none}canvas.webgl-canvas:active{cursor:grabbing}
