@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Syne:wght@600;700&display=swap";:root{color-scheme:light dark;font-family:Space Grotesk,Segoe UI,sans-serif;--text-primary: #1b1b1b;--text-secondary: #4a4a4a;--surface: #fffaf1;--surface-strong: #fff0da;--accent: #f06b46;--accent-dark: #c94d2e;--border: #e7d9c2;--shadow: 0 18px 40px rgba(27, 18, 5, .15);--ring: rgba(240, 107, 70, .35);--page-bg: radial-gradient(circle at 10% 10%, rgba(255, 203, 145, .45), transparent 45%), radial-gradient(circle at 90% 5%, rgba(255, 164, 120, .4), transparent 40%), linear-gradient(135deg, #fff7ea, #fce8d0 60%, #f6ddc0 100%);--select-bg: #ffffff;--select-text: #1b1b1b}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--page-bg);color:var(--text-primary)}#root{min-height:100vh}.app{max-width:1100px;margin:0 auto;padding:32px 20px 48px;display:flex;flex-direction:column;gap:28px}.header{display:flex;flex-direction:column;gap:20px}.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}.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}button{padding:12px 18px;border-radius:14px;border:1px solid var(--border);background:var(--select-bg);color:var(--select-text);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}button:hover{box-shadow:0 10px 20px #1b12051f;border-color:#e0c8a6}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:380px}.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 .4s ease}.status-card p{margin:0 0 16px;color:var(--text-secondary)}.board{width:min(86vw,560px);aspect-ratio:1 / 1;background:transparent;border-radius:0;padding:0;display:grid;gap:0;box-shadow:none;animation:boardIn .45s ease}.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-transform: var(--flip-translate);transform:var(--tile-transform);transition:transform var(--flip-duration) var(--flip-ease),box-shadow .12s ease;-moz-appearance:none;appearance:none;-webkit-appearance:none;z-index:0}button.tile{border-radius:20px!important;border:0!important;padding:0!important;background-color:transparent!important}.tile:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:none;opacity:0}.tile.movable:hover{--tile-transform: var(--flip-translate) scale(1.05);box-shadow:none;z-index:2}.tile.selected{outline:4px solid rgba(255,125,70,.95);box-shadow:0 0 0 6px #ff915a40,0 0 24px #ff783ca6;--tile-transform: var(--flip-translate);z-index:3}.tile.locked{border-radius:0;border-color:transparent;box-shadow:none}button.tile.locked{border-radius:0!important}.tile.locked:after{opacity:0}.tile.shake{animation:shake .42s ease}.solved-banner{align-self:center;background:var(--select-bg);padding:12px 18px;border-radius:999px;font-weight:600;color:var(--accent-dark);border:1px solid rgba(201,77,46,.2);box-shadow:0 10px 24px #c94d2e26;animation:popIn .35s ease;display:inline-flex;gap:12px;align-items:center}.share-button{border-radius:999px;padding:6px 14px;font-size:.9rem;border:1px solid rgba(201,77,46,.3);background:transparent;color:var(--accent-dark)}@media (prefers-color-scheme: dark){:root{--text-primary: #f5f1ea;--text-secondary: #c9c1b6;--surface: #2a231e;--surface-strong: #352b25;--accent: #f08a5b;--accent-dark: #f1b089;--border: rgba(255, 255, 255, .14);--shadow: 0 18px 40px rgba(0, 0, 0, .45);--ring: rgba(240, 138, 91, .4);--page-bg: radial-gradient(circle at 12% 12%, rgba(255, 140, 90, .22), transparent 40%), radial-gradient(circle at 88% 6%, rgba(140, 90, 40, .25), transparent 45%), linear-gradient(135deg, #1a1410, #241b15 60%, #2a1f18 100%);--select-bg: #201912;--select-text: #f5f1ea}body{color:var(--text-primary)}.status-card{background:var(--surface);border-color:var(--border)}.tile.selected{outline-color:var(--ring)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}@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 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){.board{width:min(92vw,420px);padding:0}.tile{border-radius:20px}}