.puzzle-piece{position:relative;background-color:#fff;background-repeat:no-repeat;border:var(--piece-border-width) solid var(--piece-border-color);border-radius:var(--radius-md);box-shadow:var(--piece-shadow);transition:transform var(--transition-base),opacity var(--transition-base),box-shadow var(--transition-base);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.puzzle-piece--dragging{cursor:grabbing!important;box-shadow:var(--piece-shadow-dragging);z-index:var(--z-elevated)}.puzzle-piece--placed{cursor:default!important}.puzzle-piece--correct{border-color:var(--color-success);box-shadow:0 0 12px #95e1d399}.puzzle-piece:active{transform:scale(.98)}.puzzle-piece__checkmark{position:absolute;top:4px;right:4px;width:24px;height:24px;background-color:var(--color-success);color:#fff;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;box-shadow:var(--shadow-md);animation:pop .3s var(--transition-bounce)}@media (hover: hover){.puzzle-piece:not(.puzzle-piece--placed):hover{transform:scale(1.05);box-shadow:0 6px 16px #0000004d}}.puzzle-piece img{pointer-events:none;user-drag:none;-webkit-user-drag:none}.drop-zone{position:relative;border:var(--drop-zone-border);border-radius:var(--radius-md);background:var(--drop-zone-bg);transition:background var(--transition-fast),border-color var(--transition-fast);display:flex;align-items:center;justify-content:center}.drop-zone--highlighted{background:var(--drop-zone-highlight);border-color:var(--color-accent);animation:pulse 1s ease-in-out infinite}.drop-zone--filled{border:none;background:transparent}.drop-zone__placeholder{position:relative;width:100%;height:100%;pointer-events:none}.drop-zone__corner{position:absolute;width:20px;height:20px;border:3px solid rgba(255,255,255,.4)}.drop-zone__corner--tl{top:0;left:0;border-right:none;border-bottom:none;border-top-left-radius:var(--radius-md)}.drop-zone__corner--tr{top:0;right:0;border-left:none;border-bottom:none;border-top-right-radius:var(--radius-md)}.drop-zone__corner--bl{bottom:0;left:0;border-right:none;border-top:none;border-bottom-left-radius:var(--radius-md)}.drop-zone__corner--br{bottom:0;right:0;border-left:none;border-top:none;border-bottom-right-radius:var(--radius-md)}@media (max-width: 480px){.drop-zone__corner{width:15px;height:15px;border-width:2px}}.puzzle-grid{display:grid;gap:4px;padding:8px;background:#ffffff0d;border-radius:var(--radius-lg);box-shadow:inset 0 2px 8px #0003;margin:0 auto}.puzzle-grid:before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary),var(--color-accent));border-radius:var(--radius-lg);opacity:.2;z-index:-1;filter:blur(8px)}@media (max-width: 768px){.puzzle-grid{gap:3px;padding:6px}}@media (max-width: 480px){.puzzle-grid{gap:2px;padding:4px}}.hint-button{position:fixed;top:16px;left:16px;padding:12px 24px;font-size:18px;font-weight:700;background:linear-gradient(135deg,#ffe66d,#ffc93c);color:#333;border:3px solid white;border-radius:50px;cursor:pointer;box-shadow:0 4px 12px #0003;transition:transform .2s ease,box-shadow .2s ease,background .3s ease;z-index:1000;font-family:inherit;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.hint-button--active{background:linear-gradient(135deg,#4caf50,#66bb6a);color:#fff;border-color:#fff;box-shadow:0 4px 16px #4caf5066;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 4px 16px #4caf5066}50%{box-shadow:0 4px 24px #4caf5099}}.hint-button:hover{transform:scale(1.05);box-shadow:0 6px 16px #0000004d}.hint-button--active:hover{box-shadow:0 6px 20px #4caf5080}.hint-button:active{transform:scale(.95)}@media (max-width: 768px){.hint-button{top:12px;left:12px;padding:14px 28px;font-size:20px}}.game-board{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-sm);overflow:hidden}.game-board__content{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--spacing-md);width:100%;height:100%;max-height:calc(100vh - 120px)}.game-board--loading{justify-content:center}.game-board__header{width:100%;max-width:600px;margin-bottom:var(--spacing-md);text-align:center}.game-board__progress{background:#fff3;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.game-board__progress p{margin:0;font-size:1.1rem;font-weight:600;color:var(--text-white)}.game-board__grid-container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;max-width:70%}.game-board__complete-message{text-align:center;font-size:1.5rem;font-weight:700;color:var(--color-success);margin-top:var(--spacing-md);animation:bounce 1s ease infinite}.game-board__side-tray{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;background:#ffffff1a;border-radius:var(--radius-lg);padding:var(--spacing-sm);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 12px #0003;max-height:100%;overflow:hidden;width:18%;flex-shrink:0}.pieces-tray__container{display:flex;flex-direction:column;gap:var(--spacing-sm);align-items:center;width:100%}.pieces-tray__message{text-align:center;font-size:1.3rem;font-weight:700;color:var(--color-success);margin:var(--spacing-md) 0;animation:bounce 1s ease infinite}.game-board__floating-piece{cursor:grabbing!important;filter:drop-shadow(0 8px 16px rgba(0,0,0,.4))}.game-board__floating-piece .puzzle-piece{opacity:1!important;transform:scale(1.1)!important}@media (max-height: 600px){.game-board{padding:var(--spacing-sm)}.game-board__header{margin-bottom:var(--spacing-sm)}.game-board__pieces-tray{min-height:100px;padding:var(--spacing-sm)}.pieces-tray__container{min-height:60px}}@media (max-width: 480px){.game-board__progress p{font-size:.9rem}.pieces-tray__container{gap:6px}}.loading-spinner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-lg);padding:var(--spacing-xl)}.spinner{width:60px;height:60px;border:6px solid rgba(255,255,255,.3);border-top-color:var(--color-accent);border-radius:50%;animation:playful-spin 2s var(--transition-bounce) infinite}.loading-message{font-family:var(--font-primary);font-size:1.5rem;color:var(--text-white);text-align:center;margin:0}.celebration-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg-overlay);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);padding:var(--spacing-md)}.celebration-modal__content{background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));border-radius:var(--radius-xl);padding:var(--spacing-xxl);max-width:500px;width:100%;text-align:center;box-shadow:var(--shadow-xl);position:relative;overflow:hidden}.celebration-modal__content:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent,rgba(255,255,255,.1),transparent);animation:shimmer 3s infinite}@keyframes shimmer{0%{transform:translate(-100%) translateY(-100%) rotate(45deg)}to{transform:translate(100%) translateY(100%) rotate(45deg)}}.celebration-modal__stars{font-size:3rem;margin-bottom:var(--spacing-lg);animation:float 3s ease-in-out infinite}.celebration-modal__title{font-family:var(--font-primary);font-size:clamp(2rem,5vw,3rem);color:var(--text-white);margin:0 0 var(--spacing-lg) 0;text-shadow:0 4px 8px rgba(0,0,0,.3);animation:jello 1s ease}.celebration-modal__level-up{font-family:var(--font-primary);font-size:1.5rem;color:var(--color-accent);background:#fff3;padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-lg);margin-bottom:var(--spacing-lg);animation:pulse 2s ease-in-out infinite}.celebration-modal__button{margin-top:var(--spacing-lg);font-size:1.5rem;padding:var(--spacing-lg) var(--spacing-xxl);min-height:var(--touch-target-large);box-shadow:0 8px 16px #0000004d}.celebration-modal__tap-hint{margin-top:var(--spacing-lg);font-size:.9rem;color:#fffc;opacity:.7}@media (max-width: 480px){.celebration-modal__content{padding:var(--spacing-xl)}.celebration-modal__stars{font-size:2rem}.celebration-modal__title{font-size:1.8rem}.celebration-modal__level-up{font-size:1.2rem}.celebration-modal__button{font-size:1.3rem;padding:var(--spacing-md) var(--spacing-xl)}}.progress-bar{width:100%;max-width:600px;background:#ffffff26;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--radius-lg);padding:var(--spacing-md);box-shadow:var(--shadow-md)}.progress-bar__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-sm)}.progress-bar__title{font-family:var(--font-primary);font-size:1.3rem;color:var(--text-white);margin:0}.progress-bar__count{font-size:.9rem;color:var(--color-accent);font-weight:700;margin:0}.progress-bar__track{width:100%;height:20px;background:#fff3;border-radius:var(--radius-full);overflow:hidden;margin-bottom:var(--spacing-sm);box-shadow:inset 0 2px 4px #0003}.progress-bar__fill{height:100%;background:linear-gradient(90deg,var(--color-success),var(--color-accent));border-radius:var(--radius-full);box-shadow:0 2px 8px #95e1d380;position:relative;overflow:hidden}.progress-bar__fill:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2s infinite}.progress-bar__total{font-size:.85rem;color:#fffc;text-align:center;margin:0}@media (max-width: 480px){.progress-bar{padding:var(--spacing-sm)}.progress-bar__title{font-size:1.1rem}.progress-bar__count{font-size:.8rem}.progress-bar__track{height:16px}.progress-bar__total{font-size:.75rem}}.reset-button{position:fixed;top:16px;right:16px;padding:12px 24px;font-size:18px;font-weight:700;background:linear-gradient(135deg,#ff6b6b,#ff8e8e);color:#fff;border:3px solid white;border-radius:50px;cursor:pointer;box-shadow:0 4px 12px #0003;transition:transform .2s ease,box-shadow .2s ease;z-index:1000;font-family:inherit;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.reset-button:hover{transform:scale(1.05);box-shadow:0 6px 16px #0000004d}.reset-button:active{transform:scale(.95)}@media (max-width: 768px){.reset-button{top:12px;right:12px;padding:14px 28px;font-size:20px}}:root{--color-primary: #FF6B6B;--color-secondary: #4ECDC4;--color-accent: #FFE66D;--color-success: #95E1D3;--color-info: #A8E6CF;--color-purple: #B4A7D6;--color-orange: #FFB84D;--color-pink: #FFB3D9;--bg-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--bg-secondary: #FFF5E6;--bg-white: #FFFFFF;--bg-overlay: rgba(0, 0, 0, .5);--text-primary: #2C3E50;--text-secondary: #7F8C8D;--text-white: #FFFFFF;--text-light: #ECF0F1;--font-primary: "Fredoka One", cursive;--font-secondary: "Nunito", sans-serif;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-xxl: 48px;--touch-target-min: 60px;--touch-target-large: 80px;--touch-target-xl: 100px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 4px 8px rgba(0, 0, 0, .15);--shadow-lg: 0 8px 16px rgba(0, 0, 0, .2);--shadow-xl: 0 12px 24px rgba(0, 0, 0, .25);--z-background: 0;--z-content: 10;--z-elevated: 20;--z-dropdown: 30;--z-modal: 40;--z-toast: 50;--transition-fast: .15s ease;--transition-base: .2s ease;--transition-slow: .3s ease;--transition-bounce: cubic-bezier(.68, -.55, .265, 1.55);--piece-border-width: 3px;--piece-border-color: #FFFFFF;--piece-shadow: 0 4px 8px rgba(0, 0, 0, .2);--piece-shadow-dragging: 0 8px 20px rgba(0, 0, 0, .3);--drop-zone-border: 2px dashed rgba(255, 255, 255, .4);--drop-zone-bg: rgba(255, 255, 255, .1);--drop-zone-highlight: rgba(255, 255, 255, .3)}@media (prefers-contrast: high){:root{--piece-border-width: 4px;--shadow-md: 0 6px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 10px 20px rgba(0, 0, 0, .5)}}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.bg-accent{background-color:var(--color-accent)}.bg-success{background-color:var(--color-success)}.bg-white{background-color:var(--bg-white)}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-white{color:var(--text-white)}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.shadow-xl{box-shadow:var(--shadow-xl)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-md{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-full{border-radius:var(--radius-full)}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0) scale(1)}40%{transform:translateY(-30px) scale(1.05)}60%{transform:translateY(-15px) scale(1.02)}}.animate-bounce{animation:bounce 1s ease infinite}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}.animate-wiggle{animation:wiggle .5s ease-in-out}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.8}}.animate-pulse{animation:pulse 1.5s ease-in-out infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}@keyframes playful-spin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.2)}to{transform:rotate(360deg) scale(1)}}.animate-playful-spin{animation:playful-spin 2s var(--transition-bounce) infinite}@keyframes slide-up{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.animate-slide-up{animation:slide-up .4s var(--transition-bounce)}@keyframes slide-down{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.animate-slide-down{animation:slide-down .4s var(--transition-bounce)}@keyframes scale-in{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.animate-scale-in{animation:scale-in .3s var(--transition-bounce)}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.animate-pop{animation:pop .4s var(--transition-bounce)}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-10px)}20%,40%,60%,80%{transform:translate(10px)}}.animate-shake{animation:shake .5s ease-in-out}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.animate-fade-in{animation:fade-in .3s ease}@keyframes fade-out{0%{opacity:1}to{opacity:0}}.animate-fade-out{animation:fade-out .3s ease}@keyframes rainbow{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.animate-rainbow{background:linear-gradient(90deg,var(--color-primary),var(--color-accent),var(--color-secondary),var(--color-success),var(--color-purple),var(--color-primary));background-size:400% 400%;animation:rainbow 3s ease infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.animate-float{animation:float 3s ease-in-out infinite}@keyframes confetti-fall{0%{transform:translateY(-100vh) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}.animate-confetti{animation:confetti-fall 3s linear forwards}@keyframes jello{0%,11.1%,to{transform:none}22.2%{transform:skew(-12.5deg) skewY(-12.5deg)}33.3%{transform:skew(6.25deg) skewY(6.25deg)}44.4%{transform:skew(-3.125deg) skewY(-3.125deg)}55.5%{transform:skew(1.5625deg) skewY(1.5625deg)}66.6%{transform:skew(-.78125deg) skewY(-.78125deg)}77.7%{transform:skew(.390625deg) skewY(.390625deg)}88.8%{transform:skew(-.1953125deg) skewY(-.1953125deg)}}.animate-jello{animation:jello 1s ease}@keyframes heartbeat{0%,to{transform:scale(1)}14%,42%{transform:scale(1.2)}28%,70%{transform:scale(1)}}.animate-heartbeat{animation:heartbeat 1.5s ease-in-out infinite}@keyframes star-burst{0%{transform:scale(0) rotate(0);opacity:1}to{transform:scale(2) rotate(180deg);opacity:0}}.animate-star-burst{animation:star-burst .8s ease-out forwards}.delay-100{animation-delay:.1s}.delay-200{animation-delay:.2s}.delay-300{animation-delay:.3s}.delay-400{animation-delay:.4s}.delay-500{animation-delay:.5s}.duration-fast{animation-duration:.2s}.duration-normal{animation-duration:.3s}.duration-slow{animation-duration:.5s}.duration-slower{animation-duration:1s}.ease-bounce{animation-timing-function:var(--transition-bounce)}.ease-in{animation-timing-function:ease-in}.ease-out{animation-timing-function:ease-out}.ease-in-out{animation-timing-function:ease-in-out}.hover-lift{transition:transform var(--transition-base)}.hover-lift:hover{transform:translateY(-4px)}.hover-grow{transition:transform var(--transition-base)}.hover-grow:hover{transform:scale(1.05)}.active-shrink:active{transform:scale(.95)}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-secondary);background:var(--bg-primary);color:var(--text-primary);touch-action:pan-x pan-y;-webkit-tap-highlight-color:transparent}#root{width:100%;height:100%;display:flex;flex-direction:column}*{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}h1,h2,h3{font-family:var(--font-primary);font-weight:400;line-height:1.2}h1{font-size:clamp(2rem,5vw,3.5rem);color:var(--color-primary)}h2{font-size:clamp(1.5rem,4vw,2.5rem);color:var(--color-secondary)}p{font-size:clamp(1rem,2.5vw,1.25rem);line-height:1.6}button{font-family:var(--font-secondary);font-size:clamp(1.1rem,3vw,1.5rem);font-weight:700;padding:var(--spacing-md) var(--spacing-xl);min-height:var(--touch-target-min);min-width:var(--touch-target-min);border:none;border-radius:16px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;touch-action:manipulation}button:active{transform:scale(.95)}button:focus{outline:3px solid var(--color-accent);outline-offset:4px}.btn-primary{background:linear-gradient(135deg,var(--color-primary),var(--color-accent));color:#fff;box-shadow:0 6px 12px #0003}.btn-primary:hover{box-shadow:0 8px 16px #0000004d}.btn-secondary{background:var(--color-secondary);color:#fff;box-shadow:0 4px 8px #0003}.app-container{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-md);background:var(--bg-primary)}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-lg)}.text-center{text-align:center}.mt-sm{margin-top:var(--spacing-sm)}.mt-md{margin-top:var(--spacing-md)}.mt-lg{margin-top:var(--spacing-lg)}.mt-xl{margin-top:var(--spacing-xl)}.mb-sm{margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:var(--spacing-md)}.mb-lg{margin-bottom:var(--spacing-lg)}.mb-xl{margin-bottom:var(--spacing-xl)}.p-sm{padding:var(--spacing-sm)}.p-md{padding:var(--spacing-md)}.p-lg{padding:var(--spacing-lg)}.p-xl{padding:var(--spacing-xl)}.flex{display:flex}.flex-column{flex-direction:column}.flex-center{display:flex;align-items:center;justify-content:center}.gap-sm{gap:var(--spacing-sm)}.gap-md{gap:var(--spacing-md)}.gap-lg{gap:var(--spacing-lg)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}