:root{color:#26343a;background:#f7efe9;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--surface: rgba(255, 250, 246, .84);--ink: #26343a;--muted: #68757a;--accent: #ba2336;--shadow: 0 18px 45px rgba(57, 41, 35, .16)}*{box-sizing:border-box}html,body,#app{min-height:100%}body{margin:0;min-width:320px;overflow-x:hidden;background:linear-gradient(145deg,#ffffff9e,#fff0 42%),linear-gradient(180deg,#f8eee8,#e8eee8);color:var(--ink);touch-action:manipulation}button{border:0;color:inherit;font:inherit;-webkit-tap-highlight-color:transparent}.app-shell{min-height:100dvh;padding:calc(env(safe-area-inset-top) + 14px) 16px calc(env(safe-area-inset-bottom) + 48px);display:grid;grid-template-rows:auto auto auto;align-content:start;gap:12px;max-width:520px;margin:0 auto}.app-header{display:grid;gap:3px;justify-items:center;text-align:center}.quiet-title{padding:0;background:transparent;font-size:clamp(1.55rem,7.5vw,2.1rem);font-weight:760;letter-spacing:0;line-height:1;white-space:nowrap}.subtitle{margin:0;color:var(--muted);font-size:.95rem}.progress-line{display:flex;justify-content:center;margin:2px 0 10px;color:var(--muted);font-size:.92rem}.progress-line span{color:var(--accent);font-weight:750;margin-right:4px}.puzzle-board{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(6,1fr);aspect-ratio:3 / 6;width:min(100%,38dvh);max-height:52dvh;margin:0 auto;padding:12px;border-radius:26px;position:relative;overflow:hidden;background:linear-gradient(180deg,#fffaf6b8,#f2e7df94);box-shadow:inset 0 0 0 1px #26343a14,var(--shadow)}.puzzle-slot{position:relative;display:block;min-width:0;min-height:0;padding:0;background:transparent;overflow:visible;transition:transform 1.6s cubic-bezier(.22,1,.36,1),opacity .9s ease,filter 1.6s ease}.puzzle-slot>.slot-svg,.puzzle-slot>.piece-svg{position:absolute;left:-32%;top:-32%;width:164%;height:164%;overflow:visible}.puzzle-slot>.piece-svg{filter:none}.tray-piece .piece-svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 5px 10px rgba(40,31,27,.14))}.slot-contour{fill:#ffffff38;stroke:#26343a29;stroke-width:2.5;stroke-dasharray:5 5;vector-effect:non-scaling-stroke}.piece-tray{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,38dvh);margin:0 auto;gap:8px;padding:12px;border-radius:24px;background:var(--surface);box-shadow:inset 0 0 0 1px #26343a14,0 12px 32px #3929231f}.tray-section{padding-bottom:calc(env(safe-area-inset-bottom) + 28px)}.tray-piece{position:relative;display:grid;place-items:center;aspect-ratio:1;min-width:0;padding:0;border-radius:14px;background:#fff6;touch-action:none;transition:transform .16s ease,opacity .16s ease,background .16s ease}.tray-piece:not(.is-locked):not(:disabled):active,.tray-piece.is-selected{transform:translateY(-2px) scale(1.04);background:#ffffffd1}.tray-piece.is-locked .piece-svg{filter:grayscale(.18) brightness(.64) opacity(.68)}.tray-piece.is-placed{opacity:.18}.lock-badge{position:absolute;right:2px;bottom:2px;display:grid;place-items:center;width:21px;height:21px;border-radius:999px;background:#ba2336;color:#fff;font-size:11px;box-shadow:0 7px 12px #ba233642}.completed-photo{position:absolute;top:10px;right:10px;bottom:10px;left:10px;z-index:12;width:calc(100% - 20px);height:calc(100% - 20px);object-fit:fill;border-radius:18px;opacity:0;pointer-events:none;transition:opacity .85s cubic-bezier(.22,1,.36,1)}.completed-photo.is-visible{opacity:1}.puzzle-board.is-closing-gaps .puzzle-slot.is-filled{filter:saturate(1.04) contrast(1.02)}.puzzle-board.is-closing-gaps .puzzle-slot.is-filled[data-col="0"]{transform:translate(16px) scaleX(1.03)}.puzzle-board.is-closing-gaps .puzzle-slot.is-filled[data-col="1"]{transform:scaleX(1.01)}.puzzle-board.is-closing-gaps .puzzle-slot.is-filled[data-col="2"]{transform:translate(-16px) scaleX(1.03)}.puzzle-board.has-merged-photo .puzzle-slot{opacity:0}.photo-warning{position:absolute;top:10px;right:10px;bottom:10px;left:10px;z-index:20;display:grid;place-items:center;padding:18px;border-radius:18px;background:#fffaf6eb;color:var(--accent);font-weight:760;text-align:center;box-shadow:inset 0 0 0 1px #ba23362e}.drag-ghost{position:fixed;z-index:100;pointer-events:none;opacity:.96;transform:scale(1.08);filter:drop-shadow(0 18px 24px rgba(38,52,58,.28))}.is-dragging-source{opacity:.35}.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 22px);z-index:60;max-width:min(88vw,420px);transform:translate(-50%,18px);opacity:0;pointer-events:none;padding:12px 15px;border-radius:16px;background:#222f34f0;color:#fff;box-shadow:0 14px 35px #00000038;transition:opacity .17s ease,transform .17s ease;text-align:center}.toast.is-visible{opacity:1;transform:translate(-50%)}.completion-card{position:fixed;top:0;right:0;bottom:0;left:0;z-index:90;display:grid;place-items:center;padding:24px;background:#26343a38;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.completion-panel{width:min(100%,360px);padding:26px 22px 22px;border-radius:24px;background:#fffaf6f5;box-shadow:var(--shadow);text-align:center}.completion-panel h2{margin:0 0 8px;font-size:2rem}.completion-panel p{margin:0 0 22px;color:var(--muted);font-size:1.06rem}.completion-panel button{min-height:48px;padding:0 22px;border-radius:999px;background:var(--accent);color:#fff;font-weight:760;box-shadow:0 12px 24px #ba23363d}.final-signature{width:100%;margin:8px auto 0;color:#26343a85;font-size:12px;font-weight:500;line-height:1.2;letter-spacing:0;pointer-events:none;text-align:center;animation:signature-fade-in .8s ease both}.snap-pop{animation:snap-pop .19s cubic-bezier(.2,1.45,.34,1)}@keyframes snap-pop{0%{transform:scale(.96)}62%{transform:scale(1.065)}to{transform:scale(1)}}.shake-once{animation:tray-shake .24s ease}@keyframes signature-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes tray-shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.confetti{position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;pointer-events:none;overflow:hidden;opacity:0;border-radius:inherit;contain:paint}.confetti.is-running{opacity:1;background-image:radial-gradient(circle,#ba2336 0 4px,transparent 5px),radial-gradient(circle,#f0b84f 0 4px,transparent 5px),radial-gradient(circle,#3f736f 0 4px,transparent 5px),radial-gradient(circle,#fff7ef 0 4px,transparent 5px);background-size:70px 90px,92px 110px,84px 96px,76px 106px;animation:confetti-fall .9s linear infinite}@keyframes confetti-fall{0%{background-position:0 -110px,20px -130px,45px -120px,70px -140px}to{background-position:0 0,20px 0,45px 0,70px 0}}@media(max-width:380px){.app-shell{padding-left:12px;padding-right:12px;gap:9px}.piece-tray{gap:8px;padding:10px}.quiet-title{font-size:1.72rem}.subtitle{font-size:.88rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:1ms!important;transition-duration:1ms!important}}