:root{--bg:#d9e4ed;--fg:#111;--muted:#6b7280;--surface:#fbfaf5;--surface-border:#e6e4da;--accent:#f7c846;--accent-hover:#e5b83d;--dot:#0000001f;--piece-amber:#f59e0b;--piece-blue:#3b82f6;--piece-cyan:#06b6d4;--piece-emerald:#10b981;--piece-fuchsia:#d946ef;--piece-coral:#ff6b52;--piece-green:#22c55e;--piece-indigo:#6366f1;--piece-lime:#84cc16;--piece-orange:#f97316;--piece-pink:#ec4899;--piece-purple:#a855f7;--piece-red:#ef4444;--piece-rose:#f43f5e;--piece-sky:#0ea5e9;--piece-sienna:#b95d28;--piece-teal:#14b8a6;--piece-violet:#8b5cf6;--piece-yellow:#eab308;--piece-mint:#2dd4a7}:root:not(.dark){--topbar-bg:#23657e;--topbar-fg:#eaf4f8;--topbar-border:#1d556a;--topbar-hover:#ffffff24}:root.dark{--bg:#353f57;--fg:#eff2f9;--muted:#aab4cd;--surface:#2a3347;--surface-border:#4d5a7c;--dot:#ffffff1a}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}.app{background:var(--bg);flex-direction:column;min-height:100dvh;display:flex}.iconbtn{width:36px;height:36px;color:var(--fg);border-radius:6px;justify-content:center;align-items:center;transition:background .12s;display:inline-flex}.iconbtn:hover{background:#0000000d}:root.dark .iconbtn:hover{background:#ffffff0f}.iconbtn svg{width:20px;height:20px}.btn-primary{background:var(--accent);color:#000;border:1px solid var(--accent);border-radius:6px;justify-content:center;align-items:center;gap:8px;padding:12px 20px;font-weight:700;transition:background .12s;display:inline-flex}.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.topbar{background:var(--topbar-bg,var(--surface));border-bottom:1px solid var(--topbar-border,var(--surface-border));z-index:10;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:10px 16px;display:grid;position:sticky;top:0}.topbar .logo-text,.topbar .iconbtn{color:var(--topbar-fg,var(--fg))}.topbar .iconbtn:hover{background:var(--topbar-hover,#0000000d)}.topbar-left,.topbar-right{align-items:center;gap:10px;display:flex}.topbar-right{justify-content:flex-end}.iconbtn:disabled{opacity:.4;cursor:default}.logo-text{letter-spacing:.02em;color:var(--fg);white-space:nowrap;font-family:Poem,Georgia,serif;font-size:27px;font-weight:500}@media (width<=799px),(height<=639px){.playarea{padding:12px 8px 84px!important}}.playarea{background-image:radial-gradient(var(--dot) 1px, transparent 1px);background-position:8px 8px;background-size:16px 16px;flex:1;padding:77px 16px 64px;position:relative;overflow:hidden}.solved-area{text-align:center;margin:24px auto 0}.solved-message{text-align:center;letter-spacing:.03em;color:var(--fg);margin:0;font-family:Poem,Georgia,serif;font-size:30px;font-weight:500;animation:.7s .5s backwards solved-in}@keyframes solved-in{0%{opacity:0;transform:translateY(6px)}}.tiles-toggle{font:inherit;color:var(--muted);text-underline-offset:3px;cursor:pointer;background:0 0;border:none;margin-top:6px;font-size:13px;text-decoration:underline}.tiles-toggle:hover{color:var(--fg)}.dock{left:50%;bottom:max(16px, env(safe-area-inset-bottom));background:var(--surface);border:1px solid var(--surface-border);z-index:20;border-radius:8px;gap:10px;padding:8px;display:flex;position:fixed;transform:translate(-50%);box-shadow:0 6px 20px #00000014}.dock .iconbtn{border:1px solid var(--surface-border);border-radius:6px;width:40px;height:40px}.banner{text-align:center;background:var(--surface);border:1px solid var(--surface-border);border-radius:8px;max-width:420px;margin:24px auto;padding:16px}.banner h2{margin:0 0 8px;font-size:18px}.banner p{color:var(--muted);margin:0;font-size:14px}@media (width<=520px),(height<=520px){.dock{display:none}.playarea{padding-bottom:16px!important}}@media (width<=520px){.topbar{gap:8px;padding:8px 10px}.logo-text{font-size:20px}.iconbtn{width:32px;height:32px}.iconbtn svg{width:18px;height:18px}.topbar button[title=Reset] svg{width:16px;height:16px}}.overlay{z-index:60;background:#00000073;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.overlay-card{background:var(--surface);color:var(--fg);border:1px solid var(--surface-border);border-radius:12px;max-width:360px;padding:22px 24px;box-shadow:0 18px 50px #0000004d}.overlay-card h2{margin:0 0 10px;font-size:18px}.overlay-card p{color:var(--muted);margin:0;font-size:16px;line-height:1.55}.overlay-actions{justify-content:center;gap:8px;margin-top:16px;display:flex}.overlay-actions .btn-primary,.overlay-actions .btn-ghost{border-radius:7px;padding:7px 14px;font-size:14px}.btn-ghost{font:inherit;border:1px solid var(--surface-border);color:var(--fg);cursor:pointer;background:0 0;border-radius:8px;padding:8px 14px;font-weight:700}.corner-brand,.corner-tools{display:none}@media (height<=520px) and (orientation:landscape){.topbar{display:none}.playarea{padding-top:12px!important;padding-bottom:8px!important}.corner-brand{z-index:20;color:var(--fg);pointer-events:none;font-family:Poem,Georgia,serif;font-size:17px;font-weight:500;display:block;position:fixed;top:10px;left:14px}.corner-tools{z-index:20;background:var(--surface);border:1px solid var(--surface-border);border-radius:999px;gap:4px;padding:4px;display:flex;position:fixed;top:8px;right:8px;box-shadow:0 4px 14px #0000001f}.corner-tools .iconbtn{width:32px;height:32px}}.footer-left,.footer-right{z-index:15;color:var(--muted);font-size:12px;position:fixed;bottom:12px}.footer-left{align-items:center;gap:7px;font-size:13.5px;display:flex;left:14px}@font-face{font-family:BaffleLogo;src:url(/fonts/EngraversOldEnglish.otf)format("opentype");font-display:swap}.baffle-wordmark{font-family:BaffleLogo,Georgia,serif;font-size:18px;line-height:1;position:relative;top:-1px;color:inherit!important;text-decoration:none!important}.baffle-wordmark:hover{color:#2d6b93!important}:root.dark .baffle-wordmark:hover{color:#9cc3ea!important}.footer-right{right:14px}.footer-left a,.footer-right a{color:inherit;text-underline-offset:2px;text-decoration:underline}.footer-left a:hover,.footer-right a:hover{color:var(--fg)}@media (width<=799px),(height<=639px){.footer-left,.footer-right{display:none}}@media (width<=520px) and (orientation:portrait){.footer-left{justify-content:center;font-size:11px;display:flex;bottom:14px;left:0;right:0}.baffle-wordmark{font-size:14.5px}}.load-error{text-align:center;max-width:420px;color:var(--muted);margin:40vh auto 0;font-size:14px}@font-face{font-family:Poem;src:url(/fonts/PlayfairDisplay-Medium.ttf)format("truetype");font-weight:500;font-display:block}.field{-webkit-user-select:none;user-select:none;touch-action:none}.picture-frame{box-sizing:border-box;background-repeat:repeat;background-size:256px 256px;box-shadow:inset 0 0 0 1px #00000059,inset 0 2px 3px #ffffff26,0 14px 28px #00000059,0 6px 10px #00000040}.picture-frame>.matte{background:#f4ead7;width:100%;height:100%;box-shadow:inset 0 0 0 1px #00000026}.painting{background-position:50%;background-size:cover;box-shadow:inset 0 0 0 1px #00000040}.haiku-ink-text{fill:#181512;stroke:var(--ink-halo,#fffc);stroke-width:2.5px;paint-order:stroke;font-kerning:normal;font-variant-ligatures:none}.fog-layer.lifted{opacity:0;transition:opacity 1.1s}.fog-layer.quick{transition:opacity .45s}.seaglass-tint{fill:#5598e0;fill-opacity:.5}.piece{cursor:grab;touch-action:none;will-change:left, top, filter, transform;z-index:3;gap:0;transition:filter .12s;display:grid;position:absolute}.piece.dragging{cursor:grabbing;z-index:50;filter:drop-shadow(0 10px 14px #0000004d);transform:scale(1.03)}.piece .pcell{width:var(--cell-size,44px);height:var(--cell-size,44px)}.piece .pcell.glass{-webkit-backdrop-filter:blur(2.5px);background:#ffffff8c}:root.dark .piece .pcell.glass{background:#d6e4f8d1}.piece.ghost{filter:none}.piece .ghost-cell{background:0 0!important}.board-pop{transform-origin:50%;animation:.7s both board-pop}@keyframes board-pop{0%{animation-timing-function:ease-in-out;transform:scale(1)}49%{animation-timing-function:ease-in-out;transform:scale(1.055)}53%{animation-timing-function:ease-in-out;transform:scale(1.053)}to{transform:scale(1)}}.solve-shimmer{pointer-events:none;z-index:4;position:absolute;top:0;left:0;overflow:hidden}.solve-shimmer:after{content:"";background:linear-gradient(100deg,#fff0 15%,#ffffff80 50%,#fff0 85%);width:40%;animation:.95s ease-in-out forwards shimmer-sweep;position:absolute;top:-25%;bottom:-25%;left:0;transform:translate(-130%)skew(-14deg)}@keyframes shimmer-sweep{to{transform:translate(380%)skew(-14deg)}}