@import"https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&family=Space+Mono:wght@400;700&display=swap";body{margin:0;font-family:Fredoka,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#fef3c7,#fed7aa);min-height:100vh}.container{max-width:1200px;margin:0 auto;padding:0 20px}.site-header{background:#fff;box-shadow:0 4px 12px #0000001a;padding:20px 0;border-bottom:4px solid #7C3AED}.logo{font-size:32px;font-weight:700;color:#7c3aed;text-shadow:2px 2px 0px #FCD34D;letter-spacing:-.5px;text-align:center}.site-main{padding:20px 0}.intro-section{text-align:center;padding:30px 0;margin-bottom:30px}.intro-section h1{font-size:48px;font-weight:700;color:#7c3aed;margin-bottom:20px;text-shadow:3px 3px 0px #FCD34D;letter-spacing:-1px}.intro-section p{font-size:20px;color:#92400e;line-height:1.6;max-width:800px;margin:0 auto}.game-section{margin-bottom:40px}.game-section .container{max-width:600px}.how-to-play-section{background:#fff;padding:40px 0;margin-bottom:40px;box-shadow:0 8px 32px #0000001a}.how-to-play-section h2{font-size:32px;font-weight:700;color:#7c3aed;text-align:center;margin-bottom:24px;text-shadow:2px 2px 0px #FCD34D}.simple-instructions{max-width:700px;margin:0 auto;list-style:none;padding:0}.simple-instructions li{padding:12px 0 12px 36px;color:#92400e;font-size:16px;line-height:1.6;position:relative;border-bottom:1px solid #FCD34D}.simple-instructions li:last-child{border-bottom:none}.simple-instructions li:before{content:"🎯";position:absolute;left:0;font-size:20px}.site-footer{background:#fff;padding:24px 0;text-align:center;border-top:4px solid #7C3AED;box-shadow:0 -4px 12px #0000001a}.site-footer p{color:#92400e;font-size:14px}@media(max-width:768px){.site-header{padding:16px 0}.logo{font-size:24px}.site-main{padding:0}.game-section{margin-bottom:30px;padding-top:10px}.intro-section{padding:20px 0;margin-bottom:20px}.intro-section h1{font-size:28px}.intro-section p{font-size:16px}.game-section{margin-bottom:40px}.how-to-play-section{padding:30px 0;margin-bottom:30px}.how-to-play-section h2{font-size:24px;margin-bottom:20px}.simple-instructions li{font-size:14px;padding:10px 0 10px 32px}.simple-instructions li:before{font-size:18px}.site-footer{padding:20px 0}}.game-container{max-width:600px;width:100%;margin:0 auto;padding:10px;animation:fadeIn .6s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.header{text-align:center;margin-bottom:32px;animation:slideDown .8s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}.title{font-size:48px;font-weight:700;color:#7c3aed;margin-bottom:8px;text-shadow:3px 3px 0px #FCD34D;letter-spacing:-1px}.subtitle{font-size:18px;color:#92400e;font-weight:400}.stats{display:flex;gap:16px;justify-content:center;margin-top:20px;margin-bottom:20px;animation:slideUp .8s ease-out .2s both}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.stat{background:#fff;padding:12px 24px;border-radius:16px;box-shadow:0 4px 12px #00000014;border:3px solid #FCD34D}.stat-label{font-size:12px;color:#92400e;text-transform:uppercase;letter-spacing:1px;font-weight:600}.stat-value{font-size:28px;font-weight:700;color:#7c3aed;font-family:Space Mono,monospace}.grid-container{background:#fff;padding:20px;border-radius:20px;box-shadow:0 8px 32px #0000001f;border:4px solid #7C3AED;margin-bottom:20px;animation:scaleIn .8s ease-out .3s both}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:16px;touch-action:none}.cell{aspect-ratio:1;border-radius:12px;background:#f9fafb;border:2px dashed #D1D5DB;display:flex;align-items:center;justify-content:center;transition:all .2s ease;position:relative}.cell.hole{background:transparent;border:none;pointer-events:none}.cell.filled{border:2px solid transparent;background:transparent}.cell.over{background:#fef3c7;border-color:#fcd34d;transform:scale(1.05)}.cell.empty.over:after{content:"";position:absolute;inset:4px;border-radius:8px;border:2px dashed #FCD34D}.tile{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:12px;font-size:28px;font-weight:700;cursor:grab;transition:all .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 4px 12px #0000001a;border:3px solid transparent;position:relative;overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:none}.tile:before{content:"";position:absolute;top:0;left:0;right:0;height:30%;background:linear-gradient(to bottom,rgba(255,255,255,.3),transparent);border-radius:12px 12px 0 0}.tile:hover:not(.correct){transform:translateY(-4px) rotate(2deg);box-shadow:0 8px 20px #00000026}.tile:active{cursor:grabbing}.tile.dragging{opacity:.5}.tile.correct{background:#86efac!important;border-color:#22c55e;cursor:default;animation:correctPop .5s ease-out}.tile.locked{cursor:not-allowed;opacity:.9}.tile.locked:hover{transform:none!important;box-shadow:0 4px 12px #0000001a!important}.cell.locked{cursor:not-allowed}@keyframes correctPop{0%{transform:scale(1)}50%{transform:scale(1.15) rotate(5deg)}to{transform:scale(1) rotate(0)}}.tile.misplaced{background:#fcd34d;border-color:#f59e0b}.tile.wrong{background:#f3f4f6;border-color:#9ca3af}.tile.animal{background:#ff9f7f!important;border-color:#ff6b45}.letter{color:#1f2937;font-family:Space Mono,monospace;text-shadow:1px 1px 0px rgba(255,255,255,.5);pointer-events:none}.animal-emoji{font-size:32px;filter:drop-shadow(2px 2px 0px rgba(0,0,0,.1));pointer-events:none}.controls{display:flex;gap:12px;justify-content:center;animation:slideUp .8s ease-out .4s both}.btn{padding:14px 32px;border-radius:16px;font-size:16px;font-weight:700;border:none;cursor:pointer;transition:all .2s ease;font-family:Fredoka,sans-serif;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 4px 12px #0000001a}.btn-primary{background:#7c3aed;color:#fff;border:3px solid #6D28D9}.btn-primary:hover{background:#6d28d9;transform:translateY(-2px);box-shadow:0 6px 16px #7c3aed66}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:#fff;color:#7c3aed;border:3px solid #7C3AED}.btn-secondary:hover{background:#f3f4f6;transform:translateY(-2px);box-shadow:0 6px 16px #7c3aed33}.btn-secondary:active{transform:translateY(0)}.win-message{text-align:center;padding:32px 24px;background:linear-gradient(135deg,#fcd34d,#fca5a5);border-radius:24px;margin-bottom:20px;box-shadow:0 8px 32px #fcd34d66;border:4px solid #F59E0B;animation:bounceIn .6s ease-out}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.05)}70%{transform:scale(.9)}to{opacity:1;transform:scale(1)}}.win-title{font-size:36px;font-weight:700;color:#fff;margin-bottom:12px;text-shadow:3px 3px 0px rgba(0,0,0,.2);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.win-subtitle{font-size:20px;color:#78350f;font-weight:600;margin-bottom:12px}.win-icons{font-size:32px;margin:16px 0;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.btn-share{margin-top:16px;background:#fff;color:#7c3aed;border:3px solid #7C3AED;font-size:16px;padding:12px 32px;border-radius:16px;font-weight:700;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 4px 12px #0000001a}.btn-share:hover{background:#7c3aed;color:#fff;transform:translateY(-2px);box-shadow:0 6px 16px #7c3aed66}.btn-share:active{transform:translateY(0)}.loading{text-align:center;padding:60px 20px}.spinner{width:50px;height:50px;border:5px solid #FCD34D;border-top-color:#7c3aed;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px}@keyframes spin{to{transform:rotate(360deg)}}.loading p{font-size:18px;color:#92400e;font-weight:600}.drag-overlay{cursor:grabbing}.color-legend{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:16px;padding-top:12px;border-top:2px dashed #D1D5DB}.legend-item{display:flex;align-items:center;gap:6px;font-size:13px;color:#92400e}.legend-color{width:24px;height:24px;border-radius:6px;border:2px solid #9CA3AF}.legend-color.green{background:#86efac;border-color:#22c55e}.legend-color.yellow{background:#fcd34d;border-color:#f59e0b}.legend-color.gray{background:#f3f4f6;border-color:#9ca3af}.legend-color.orange{background:#ff9f7f;border-color:#ff6b45}@media(max-width:640px){.game-container{padding:5px}.stats{gap:8px;margin-top:16px;margin-bottom:16px}.stat{padding:8px 16px}.stat-label{font-size:10px}.stat-value{font-size:20px}.grid-container{padding:12px;border-radius:16px;border-width:3px;margin-bottom:16px}.grid{gap:6px;margin-bottom:12px}.tile{font-size:20px;border-radius:8px}.animal-emoji{font-size:24px}.color-legend{gap:8px;margin-top:12px}.legend-item{font-size:11px}.legend-color{width:20px;height:20px}.controls{margin-top:16px;flex-wrap:wrap}.btn{padding:12px 20px;font-size:13px;border-radius:12px;flex:1;min-width:120px}.win-message{padding:24px 16px;margin-bottom:16px;border-radius:16px;border-width:3px}.win-title{font-size:28px}.win-subtitle{font-size:16px}.win-icons{font-size:28px}.btn-share{font-size:14px;padding:10px 24px}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Fredoka,sans-serif;background:linear-gradient(135deg,#fff4e6,#ffe4cc);min-height:100vh}#root{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}