@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Syne:wght@600;700&display=swap";:root{color-scheme:dark light;font-family:Space Grotesk,Segoe UI,sans-serif;--text-primary: #f5f7fa;--text-secondary: #aab3c0;--surface: #161a20;--surface-strong: #1d232b;--accent: #ff7a45;--accent-dark: #ffb089;--border: rgba(255, 255, 255, .16);--shadow: 0 18px 40px rgba(0, 0, 0, .5);--ring: rgba(255, 122, 69, .45);--page-bg: #0d1014;--select-bg: #1a1f27;--select-text: #f5f7fa;--tile-gap: 0px;--tile-scale-unsolved: .9;--tile-scale-locked: 1;--motion-fast: .16s;--motion-base: .24s;--motion-slow: .32s;--ease-snappy: cubic-bezier(.22, .78, .34, 1);--ease-spring-soft: cubic-bezier(.2, .9, .22, 1.2)}html.force-dark{color-scheme:dark}html.force-light{color-scheme:light}@media(prefers-color-scheme:dark){html:not(.force-light){color-scheme:dark}}@media(prefers-color-scheme:light){html:not(.force-dark){color-scheme:light}}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#000;color:var(--text-primary);-webkit-text-size-adjust:100%}body.drag-active{overflow:hidden}#root{min-height:100vh}.app{position:relative;isolation:isolate;max-width:1100px;margin:0 auto;min-height:100vh;padding:calc(20px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));display:flex;flex-direction:column;gap:28px}.app:before,.app:after{display:none}.debug-solve-button{position:absolute;top:calc(20px + env(safe-area-inset-top));right:calc(20px + env(safe-area-inset-right));z-index:25;padding:10px 14px;min-height:44px}.header{display:flex;flex-direction:column;gap:20px}.stage-header,.stage-controls,.stage-board{opacity:0;transform:translateY(10px);transition:opacity var(--motion-slow) var(--ease-snappy),transform var(--motion-slow) var(--ease-snappy)}.app.app-mounted .stage-header{opacity:1;transform:translateY(0)}.app.app-mounted .stage-controls{opacity:1;transform:translateY(0);transition-delay:70ms}.app.app-mounted .stage-board{opacity:1;transform:translateY(0);transition-delay:.12s}.back-link{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:var(--select-bg);color:var(--select-text);text-decoration:none;font-weight:600;transition:transform var(--motion-fast) var(--ease-snappy),box-shadow var(--motion-fast) var(--ease-snappy),border-color var(--motion-fast) var(--ease-snappy)}.back-link:hover{transform:translateY(-1px);box-shadow:0 10px 20px #00000059;border-color:#ffffff47}.title-block h1{font-family:Syne,Space Grotesk,sans-serif;font-size:clamp(2rem,4vw,3.2rem);margin:0 0 8px;letter-spacing:.02em}.title-block p{margin:0;color:var(--text-secondary);font-size:1rem}.title-block .fallback-note{margin-top:10px;font-size:.9rem;color:var(--accent-dark);font-weight:600}.controls{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end}.control{display:flex;flex-direction:column;gap:8px;font-size:.9rem;color:var(--text-secondary)}.control.stat{gap:4px}.control.stat strong{font-size:1.4rem;color:var(--text-primary)}select,button{font-family:inherit;font-size:1rem}select{padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:var(--select-bg);color:var(--select-text);min-width:120px;transition:transform var(--motion-fast) var(--ease-snappy),border-color var(--motion-fast) var(--ease-snappy),filter var(--motion-fast) var(--ease-snappy)}select:hover{border-color:#ffffff47;filter:brightness(1.04)}button{padding:12px 18px;border-radius:14px;border:1px solid var(--border);background:var(--select-bg);color:var(--select-text);cursor:pointer;transition:transform var(--motion-fast) var(--ease-snappy),box-shadow var(--motion-fast) var(--ease-snappy),border-color var(--motion-fast) var(--ease-snappy),filter var(--motion-fast) var(--ease-snappy)}button:hover{box-shadow:0 10px 20px #00000059;border-color:#ffffff47;filter:brightness(1.05)}button:active{transform:translateY(1px) scale(.99)}button:disabled{cursor:not-allowed;opacity:.6;transform:none;box-shadow:none}button.primary{background:linear-gradient(135deg,var(--accent),#f7a65c);border:none;color:#fff;font-weight:600}.board-shell{display:flex;justify-content:center;align-items:center;min-height:0}.status-card{background:var(--surface);border:1px solid var(--border);padding:28px 32px;border-radius:20px;box-shadow:var(--shadow);text-align:center;animation:cardIn var(--motion-base) var(--ease-snappy)}.status-card p{margin:0 0 16px;color:var(--text-secondary)}.board{width:min(100%,var(--board-max-size, 560px));aspect-ratio:1 / 1;background:transparent;border-radius:0;padding:0;display:grid;position:relative;gap:var(--tile-gap);box-shadow:none;opacity:0;transform:translateY(8px) scale(.988);transition:opacity var(--motion-base) var(--ease-snappy),transform var(--motion-base) var(--ease-snappy);touch-action:none;overscroll-behavior:contain;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.app.board-ready .board{opacity:1;transform:translateY(0) scale(1)}.tile{border:none;border-radius:20px;padding:0;background-color:transparent;background-repeat:no-repeat;background-origin:border-box;box-shadow:none;position:relative;overflow:hidden;transform-origin:center;--flip-translate: translate(0px, 0px);--flip-duration: .12s;--flip-ease: ease;--tile-scale-current: var(--tile-scale-locked);--tile-interaction-scale: 1;--drag-translate: translate(0px, 0px);--tile-transform: var(--flip-translate) var(--drag-translate) scale(var(--tile-scale-current)) scale(var(--tile-interaction-scale));transform:var(--tile-transform);transition:transform var(--flip-duration) var(--flip-ease),box-shadow var(--motion-fast) var(--ease-snappy),filter var(--motion-fast) var(--ease-snappy),opacity var(--motion-fast) var(--ease-snappy);appearance:none;-webkit-appearance:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;z-index:0;will-change:transform}button.tile{border-radius:20px!important;border:0!important;padding:0!important;background-color:transparent!important}.tile:after{content:"";position:absolute;inset:0;background:none;opacity:0}.tile.movable:hover{--tile-interaction-scale: 1.028;filter:contrast(1.06) saturate(1.04);z-index:2}.tile.movable:focus-visible{--tile-interaction-scale: 1.02;filter:contrast(1.04)}.tile.unsolved{--tile-scale-current: var(--tile-scale-unsolved)}.tile.dragging{z-index:4}.tile.drag-over{outline:3px solid rgba(255,162,116,.95);outline-offset:-2px;box-shadow:inset 0 0 0 2px #ffaa8459}.tile.drag-origin{opacity:.28;box-shadow:none;outline:2px solid rgba(255,185,146,.52);outline-offset:-2px;filter:saturate(.8)}.tile.blocked{animation:blockedPulse var(--motion-fast) var(--ease-snappy)}.ghost-tile{position:absolute;top:0;left:0;z-index:8;border-radius:20px;background-repeat:no-repeat;background-origin:border-box;pointer-events:none;box-shadow:0 14px 30px #00000075,0 0 0 1px #ffb68c33;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.tile.selected{outline:4px solid rgba(255,125,70,.95);box-shadow:0 0 0 6px #ff915a40,0 0 24px #ff783ca6;z-index:3}.tile.locked{border-radius:0;border-color:transparent;box-shadow:none;--tile-scale-current: var(--tile-scale-locked)}button.tile.locked{border-radius:0!important}.tile.locked:after{opacity:0}.tile.just-locked{z-index:2}.tile-checkmark{position:absolute;top:50%;left:50%;width:50%;height:50%;color:#39df85;transform:translate(-50%,-50%);animation:checkmarkInOut 1.7s var(--ease-snappy) both;pointer-events:none}.tile-checkmark svg{width:100%;height:100%;display:block;overflow:visible}.tile-checkmark .checkmark-shape{fill:currentColor;stroke:#000;stroke-width:4;stroke-linejoin:round;stroke-linecap:round;paint-order:stroke fill;vector-effect:non-scaling-stroke;shape-rendering:geometricPrecision}.tile-checkmark.starter-checkmark{opacity:1;transform:translate(-50%,-50%) scale(1);animation:none;color:#39df85}.tile.shake{animation:shake .36s var(--ease-snappy)}.share-button{border-radius:999px;padding:10px 18px;font-size:.95rem;font-weight:600;border:none;background:linear-gradient(135deg,var(--accent),#f7a65c);color:#fff;white-space:nowrap;min-height:44px;box-shadow:0 10px 24px #00000057}.solved-sticky-share{position:fixed;left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:20;display:flex;justify-content:center;animation:stickyIn var(--motion-slow) var(--ease-spring-soft)}.share-button-sticky{width:min(100%,440px);box-shadow:0 14px 28px #00000073}.share-button-cta{animation:ctaPulse var(--motion-slow) var(--ease-spring-soft) 1}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.back-link:focus-visible,select:focus-visible,button:focus-visible,.tile:focus-visible{outline:3px solid var(--accent);outline-offset:2px}@supports (height: 100dvh){body,#root,.app{min-height:100dvh}}@keyframes shake{0%{transform:var(--tile-transform) translate(0)}30%{transform:var(--tile-transform) translate(-3px)}60%{transform:var(--tile-transform) translate(3px)}to{transform:var(--tile-transform) translate(0)}}@keyframes blockedPulse{0%{filter:saturate(1)}45%{filter:saturate(1.55)}to{filter:saturate(1)}}@keyframes checkmarkInOut{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}20.588%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}79.412%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.92)}}@keyframes stickyIn{0%{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes ctaPulse{0%{transform:scale(.965)}60%{transform:scale(1.02)}to{transform:scale(1)}}@keyframes ambientDrift{0%{transform:translateZ(0)}to{transform:translate3d(0,-10px,0)}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.app:before,.app:after{animation:none!important}.tile.just-locked .tile-checkmark{animation:none;opacity:1;transform:translate(-50%,-50%) scale(1)}.stage-header,.stage-controls,.stage-board,.board{opacity:1;transform:none;transition:none}}@keyframes boardIn{0%{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes cardIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes popIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@media(min-width:900px){.header{flex-direction:row;justify-content:space-between;align-items:flex-end}.controls{justify-content:flex-end}}@media(max-width:600px){.debug-solve-button{padding:10px 12px}.tile{border-radius:20px}}.app.solved-ready{padding:calc(20px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) calc(120px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left))}
