@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: .96;--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}.header{display:flex;flex-direction:column;gap:20px}.header-compact{gap:14px}.header-desktop{gap:20px}.header-topbar,.header-desktop-main{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.header-desktop-main{align-items:flex-end}.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-compact h1{font-size:clamp(2.1rem,9vw,3.2rem);margin-bottom:0}.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}.controls-compact{display:flex;justify-content:space-between;align-items:center;gap:12px}.controls-compact .puzzle-toggle{margin-left:auto}.controls-desktop{justify-content:flex-end;align-items:center}.controls-rail{flex-direction:column;align-items:flex-start;gap:12px}.controls-rail .puzzle-toggle{align-self:flex-start;justify-content:flex-start}.puzzle-toggle-vertical{width:100%;display:flex;flex-direction:column;gap:2px;padding:4px;border-radius:30px;max-width:100%}.puzzle-toggle-vertical .puzzle-toggle-option{width:100%;min-width:0;min-height:46px;padding:8px 14px;font-size:.98rem}.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)}.controls-compact .control,.controls-rail .control{gap:6px}.controls-compact .control.stat strong,.controls-rail .control.stat strong{font-size:1.25rem}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:#111;font-weight:600}.board-shell{display:flex;justify-content:center;align-items:center;min-height:0;width:100%}.board-stage{width:min(100%,var(--board-max-size, 560px));display:flex;flex-direction:column;gap:0}.board-top-toggle-wrap{display:flex;justify-content:center;margin-bottom:12px}.puzzle-toggle-board-top{align-self:center}.puzzle-toggle{display:inline-flex;gap:6px;padding:5px;border-radius:999px;background:linear-gradient(180deg,#ffffff0f,#ffffff06),#12161cf0;border:1px solid rgba(255,255,255,.1);box-shadow:0 12px 24px #0000003d,inset 0 1px #ffffff0d}.puzzle-toggle-option{min-width:96px;min-height:40px;padding:9px 16px;border:0;border-radius:999px;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:#e8edf5c2;font-weight:600;letter-spacing:.01em;box-shadow:none}.puzzle-toggle-option:hover{box-shadow:none}.puzzle-toggle-option.active{background:linear-gradient(135deg,var(--accent),#f7a65c);color:#111;box-shadow:0 6px 14px #ff7a452e,inset 0 1px #ffffff38}.puzzle-toggle-vertical .puzzle-toggle-option.active{box-shadow:0 4px 10px #ff7a4524,inset 0 1px #ffffff2e}.toggle-variation-lab{width:min(1120px,calc(100vw - 32px));margin:24px auto 0;padding:20px;border-radius:28px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,#ffffff0a,#ffffff04),#0a0c10e0;box-shadow:0 24px 50px #00000047,inset 0 1px #ffffff0a}.toggle-variation-lab-header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:18px}.toggle-variation-lab-header h2,.toggle-variation-lab-header p{margin:0}.toggle-variation-lab-header h2{font-size:1.05rem}.toggle-variation-lab-header p{color:var(--text-secondary);font-size:.92rem}.toggle-variation-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px}.toggle-variation-card{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:24px;background:linear-gradient(180deg,#ffffff08,#ffffff04),#0d1016eb;border:1px solid rgba(255,255,255,.07)}.toggle-variation-label{font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#e8edf5b8}.toggle-variation-card .puzzle-toggle{width:100%}.toggle-variation-card .puzzle-toggle-option{pointer-events:none}.puzzle-toggle-preview-flat{gap:4px;padding:4px;background:#14181ff5;border-color:#ffffff14;box-shadow:inset 0 1px #ffffff0a}.puzzle-toggle-preview-flat .puzzle-toggle-option{min-height:42px;padding:8px 14px}.puzzle-toggle-preview-flat .puzzle-toggle-option.active{box-shadow:inset 0 1px #ffffff2e}.puzzle-toggle-preview-split{gap:8px;padding:0;border:0;border-radius:22px;background:transparent;box-shadow:none}.puzzle-toggle-preview-split .puzzle-toggle-option{min-height:48px;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,#ffffff0d,#ffffff05),#13171ff2}.puzzle-toggle-preview-split .puzzle-toggle-option.active{border-color:#ffad6f66;box-shadow:0 8px 18px #ff7a4524,inset 0 1px #fff3}.puzzle-toggle-landscape,.puzzle-toggle-preview-minimal{gap:2px;padding:2px;border-radius:22px;background:#12161cb8;border-color:#ffffff0f;box-shadow:none}.puzzle-toggle-landscape .puzzle-toggle-option,.puzzle-toggle-preview-minimal .puzzle-toggle-option{min-height:38px;padding:7px 12px;font-size:.92rem;color:#e8edf5d6}.puzzle-toggle-landscape .puzzle-toggle-option.active,.puzzle-toggle-preview-minimal .puzzle-toggle-option.active{box-shadow:none}.overflow-menu{position:relative;z-index:30}.menu-trigger{min-width:48px;min-height:48px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,#ffffff0f,#ffffff08),#141921f5;color:var(--text-primary);box-shadow:0 14px 28px #00000047,inset 0 1px #ffffff0d}.menu-trigger span{font-size:1.6rem;line-height:1;transform:translateY(-2px)}.menu-panel{position:absolute;top:calc(100% + 10px);right:0;min-width:220px;padding:12px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,#1c222cfa,#10141bfa),#0f1218fa;box-shadow:0 22px 44px #0006,inset 0 1px #ffffff0d;display:flex;flex-direction:column;gap:10px}.menu-field{display:flex;flex-direction:column;gap:6px;color:var(--text-secondary);font-size:.88rem}.menu-field select,.menu-action{width:100%}.menu-action{justify-content:center}.play-layout{width:100%}.play-layout-centered{display:grid;grid-template-columns:var(--wide-side-width, 220px) minmax(220px,var(--board-max-size, 560px)) var(--wide-side-width, 220px);gap:20px;align-items:start;min-height:0;justify-content:center}.side-group{display:flex;flex-direction:column;gap:14px;min-width:0}.side-group-left{align-items:flex-start;justify-self:stretch}.side-group-right{align-items:flex-end;justify-self:stretch}.layout-phoneLandscape .side-group-left,.layout-tabletLandscape .side-group-left{align-items:stretch}.layout-phoneLandscape .board-shell,.layout-tabletLandscape .board-shell,.layout-desktop .board-shell{justify-content:center;align-items:flex-start}.layout-tabletLandscape .board-shell,.layout-desktop .board-shell{margin:0 auto}.fallback-note-wide{margin:0;max-width:220px;text-align:right}.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:100%;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:#111;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}}@media(max-width:767px)and (orientation:portrait){.app{gap:18px;padding:calc(14px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left))}.layout-phonePortrait .board-shell{margin-top:auto}.header-compact{gap:12px}.back-link{padding:10px 12px}.title-block-compact p:not(.fallback-note){display:none}.controls-compact{gap:8px 10px}.controls-compact .control{font-size:.84rem}.controls-compact .control.stat{min-width:70px}.controls-compact .control.stat strong{font-size:1.1rem}.controls-compact select,.controls-compact button{min-height:40px}.controls-compact button.primary{padding-inline:16px}.header-topbar{align-items:center}.menu-trigger{min-width:44px;min-height:44px;border-radius:14px}.menu-panel{min-width:min(250px,calc(100vw - 28px))}.puzzle-toggle{padding:5px}.puzzle-toggle-option{min-width:82px;min-height:34px;padding:7px 14px;font-size:.92rem}}@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(max-width:899px)and (orientation:landscape){.app{gap:16px;padding:calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left))}.play-layout-centered{grid-template-columns:var(--wide-side-width, 180px) minmax(220px,var(--board-max-size, 560px)) var(--wide-side-width, 180px);gap:14px;align-items:start}.side-group{gap:10px}.side-group-left .back-link{align-self:auto;width:100%;padding:10px 12px}.side-group-right .controls{align-items:flex-end}.controls-rail .control,.controls-desktop .control{font-size:.82rem}.controls-rail .control.stat strong,.controls-desktop .control.stat strong{font-size:1.1rem}.controls-rail select,.controls-rail button,.controls-desktop select,.controls-desktop button{min-height:40px}.controls-rail .puzzle-toggle,.controls-desktop .puzzle-toggle{padding:5px;align-self:flex-end}.puzzle-toggle-vertical{width:100%;align-self:stretch;padding:5px}.controls-rail .puzzle-toggle-option,.controls-desktop .puzzle-toggle-option{min-width:82px;min-height:34px;padding:7px 14px;font-size:.92rem}.puzzle-toggle-vertical .puzzle-toggle-option{min-width:0}}@media(min-width:900px)and (orientation:landscape){.play-layout-centered{grid-template-columns:var(--wide-side-width, 220px) minmax(220px,var(--board-max-size, 560px)) var(--wide-side-width, 220px);gap:24px}}@media(min-width:1280px){.play-layout-centered{grid-template-columns:var(--wide-side-width, 240px) minmax(220px,var(--board-max-size, 560px)) var(--wide-side-width, 240px)}}.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))}