.app{width:100%;height:100vh;display:flex;justify-content:center;align-items:center;padding:20px 20px 100px;position:relative;overflow:hidden}.app:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,#87ceeb,#b0e0e6,#e0f6ff);z-index:0}.app:after{content:"☁️";position:absolute;font-size:8rem;opacity:.3;top:10%;right:10%;z-index:1;animation:float 20s infinite ease-in-out}@keyframes float{0%,to{transform:translate(0) rotate(0)}50%{transform:translate(-30px,-20px) rotate(5deg)}}.game-container{position:relative;z-index:10;background:transparent;border-radius:20px;padding:20px;max-width:500px;width:100%;min-height:500px;display:flex;flex-direction:column}.top-bar{display:flex;justify-content:flex-end;margin-bottom:20px;position:relative;z-index:20}.currency{display:flex;gap:15px;align-items:center}.gold{background:linear-gradient(135deg,gold,#ffed4e);padding:8px 15px;border-radius:20px;font-weight:700;font-size:1.1rem;color:#8b6914;box-shadow:0 3px 10px #ffd70066;display:flex;align-items:center;gap:5px}.diamond{background:linear-gradient(135deg,#b19cd9,#d4a5f9);padding:8px 15px;border-radius:20px;font-weight:700;font-size:1.1rem;color:#4a2c6a;box-shadow:0 3px 10px #b19cd966;display:flex;align-items:center;gap:5px}.board{display:grid;gap:4px;margin-bottom:0;flex:1;max-height:400px;position:relative;z-index:15;padding:8px;background:#90ee9033;border-radius:15px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);touch-action:pan-y;overflow:visible}.sell-area{width:100%;margin-top:60px;height:70px;z-index:5;padding:8px;background:#ff6b6b33;border:3px dashed rgba(255,107,107,.5);border-radius:15px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:all .3s ease;overflow:hidden;box-sizing:border-box}.sell-area.active{background:#ff6b6b66;border-color:#ff6b6bcc;border-style:solid;box-shadow:0 0 20px #ff6b6b80}.sell-area-content{display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:5px 10px;box-sizing:border-box}.sell-area-text{color:#8b4a6bb3;font-size:.85rem;font-weight:500;text-align:center;line-height:1.2}.sell-price-display{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;animation:pulse .5s ease;width:100%;height:100%}.sell-price-icon{font-size:1.8rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));flex-shrink:0}.sell-price-text{color:gold;font-size:1.4rem;font-weight:700;text-shadow:2px 2px 6px rgba(0,0,0,.5),0 0 10px rgba(255,215,0,.5);background:#0000004d;padding:4px 12px;border-radius:8px;border:2px solid rgba(255,215,0,.5);white-space:nowrap;line-height:1.2}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.cell{aspect-ratio:1;background:#90ee9099;border-radius:10px;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all .3s ease;border:2px solid rgba(34,139,34,.3);position:relative;box-shadow:0 2px 8px #00000026;touch-action:none;overflow:visible}.cell:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#fff3,#0000001a);border-radius:10px;pointer-events:none}.cell.empty{background:#90ee9066;border:2px dashed rgba(34,139,34,.4)}.cell.empty:hover{background:#90ee90b3;border-color:#228b2299;transform:translateY(-2px);box-shadow:0 4px 12px #0003}.cell.filled{background:#90ee90b3;border:2px solid rgba(34,139,34,.5)}.cell.filled:hover{transform:translateY(-2px);box-shadow:0 5px 15px #00000040}.animal{width:85%;height:85%;border-radius:12px;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:grab;transition:opacity .2s ease,box-shadow .2s ease;box-shadow:0 4px 12px #0000004d;position:relative;z-index:5;animation:pop .3s ease;border:2px solid rgba(255,255,255,.3);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.animal:active{cursor:grabbing;transform:scale(.95);z-index:100}.animal.dragging{transition:none;box-shadow:0 8px 24px #00000080;transform:scale(1.1)}.animal-emoji{font-size:2.5rem;margin-bottom:5px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.animal-level{font-size:.7rem;text-align:center;line-height:1;background:#0003;padding:2px 6px;border-radius:8px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}@keyframes pop{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}.add-animal-btn{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:linear-gradient(135deg,gold,#ffed4e);color:#8b6914;border:none;border-radius:50%;width:100px;height:100px;padding:0;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 5px 20px #ffd70080;z-index:100;overflow:hidden}.gold-collect-btn{position:fixed;bottom:20px;left:20px;background:linear-gradient(135deg,gold,#ffed4e);color:#8b6914;border:3px solid rgba(139,105,20,.3);border-radius:15px;padding:15px 25px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:10px;box-shadow:0 5px 20px #ffd70080;z-index:100}.gold-collect-btn:hover:not(:disabled){transform:translateY(-2px) scale(1.05);box-shadow:0 7px 25px #ffd700b3;background:linear-gradient(135deg,#ffed4e,gold)}.gold-collect-btn:active:not(:disabled){transform:translateY(0) scale(1)}.gold-collect-btn.cooldown{background:linear-gradient(135deg,#ccc,#aaa);color:#666;cursor:not-allowed;opacity:.7}.gold-collect-icon{font-size:1.5rem;animation:bounce 1s infinite}.gold-collect-btn.cooldown .gold-collect-icon{animation:none}.gold-collect-text{font-weight:700}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.market-btn{position:fixed;bottom:20px;right:20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:15px;padding:15px 30px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:10px;box-shadow:0 5px 20px #667eea80;z-index:100}.market-btn:hover{transform:translateY(-2px);box-shadow:0 7px 25px #667eea99}.market-icon{font-size:1.5rem}.market-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.market-modal{background:linear-gradient(135deg,#ff9a9e,#fecfef,#fecfef);border-radius:25px;padding:30px;max-width:500px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 15px 50px #ff9a9e66,0 0 30px #fecfef4d;animation:slideDown .3s ease;position:relative;border:3px solid rgba(255,255,255,.5);scrollbar-width:none;-ms-overflow-style:none}.market-modal::-webkit-scrollbar{display:none}.market-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px;color:#8b4a6b;text-align:center}.market-header h2{margin:0;font-size:2rem;text-shadow:2px 2px 4px rgba(255,255,255,.5);font-weight:700}.close-btn{background:#fffc;border:2px solid rgba(139,74,107,.3);border-radius:50%;width:40px;height:40px;color:#8b4a6b;font-size:1.3rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;box-shadow:0 3px 10px #8b4a6b33}.close-btn:hover{background:#fff;transform:rotate(90deg) scale(1.1);box-shadow:0 5px 15px #8b4a6b4d}.market-content{display:flex;flex-direction:column;gap:15px}.market-conversion-section{display:flex;flex-direction:column;gap:10px;margin-bottom:10px;padding-bottom:15px;border-bottom:2px solid rgba(255,255,255,.3)}.market-item.conversion-item{padding:15px}.market-item.conversion-item .market-item-info h3{font-size:1.5rem;margin-bottom:5px}.market-item{background:#ffffffe6;border-radius:20px;padding:20px;display:flex;justify-content:space-between;align-items:center;gap:15px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:3px solid rgba(255,255,255,.8);box-shadow:0 5px 15px #8b4a6b33;transition:all .3s ease}.market-item:hover{transform:translateY(-3px);box-shadow:0 8px 20px #8b4a6b4d}.market-item-icon{font-size:3rem;filter:drop-shadow(2px 2px 4px rgba(0,0,0,.1))}.market-item-info{flex:1}.market-item-info h3{margin:0 0 8px;color:#8b4a6b;font-size:1.4rem;font-weight:700}.market-item-info p{margin:0 0 8px;color:#a67a9b;font-size:.95rem}.market-item-price{margin-top:5px}.market-item-price .price{color:gold;font-weight:700;font-size:1rem}.market-item-price .purchased{color:#4caf50;font-weight:700;font-size:1rem}.market-buy-btn{background:linear-gradient(135deg,gold,#ffed4e);color:#8b6914;border:3px solid rgba(139,105,20,.3);border-radius:15px;padding:12px 28px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .3s ease;white-space:nowrap;box-shadow:0 4px 10px #ffd70066;min-width:100px}.market-buy-btn:hover:not(:disabled){transform:translateY(-3px) scale(1.05);box-shadow:0 6px 20px #ffd70099;background:linear-gradient(135deg,#ffed4e,gold)}.market-buy-btn:active:not(:disabled){transform:translateY(-1px) scale(1.02)}.market-buy-btn:disabled{opacity:.6;cursor:not-allowed;background:#c8c8c880;color:#8b4a6b80;border-color:#8b4a6b33;box-shadow:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideDown{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}.toast{position:fixed;top:20px;right:20px;padding:15px 25px;border-radius:15px;box-shadow:0 5px 20px #0000004d;z-index:10000;animation:slideInRight .3s ease,fadeOut .3s ease 2.7s;max-width:350px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.3)}.toast-message{font-weight:500;font-size:.95rem;display:block}.toast-success{background:linear-gradient(135deg,#4caf50f2,#388e3cf2);color:#fff}.toast-warning{background:linear-gradient(135deg,#ff9800f2,#ff6f00f2);color:#fff}.toast-info{background:linear-gradient(135deg,#2196f3f2,#1976d2f2);color:#fff}@keyframes slideInRight{0%{transform:translate(400px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.add-animal-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s}.add-animal-btn:hover:before{left:100%}.add-animal-btn:hover{transform:translate(-50%) translateY(-2px);box-shadow:0 7px 25px #ffd70099}.add-animal-btn:active{transform:translate(-50%) translateY(0)}.add-icon{font-size:2.5rem}.cell.drag-over{background:#667eea80;border-color:#667eea;transform:scale(1.1)}.game-container:before{content:"";position:absolute;width:200px;height:200px;background:#90ee901a;border-radius:50%;top:-50px;left:-50px;z-index:1;filter:blur(20px)}.game-container:after{content:"";position:absolute;width:150px;height:150px;background:#90ee901a;border-radius:50%;bottom:-30px;right:-30px;z-index:1;filter:blur(20px)}@media (max-width: 768px){.app{padding:10px 10px 90px}.game-container{padding:15px;min-height:auto}.board{gap:3px;padding:6px;max-height:350px}.sell-area{padding:6px;height:60px;margin-top:25px}.sell-area-content{height:100%;padding:4px 8px}.sell-area-text{font-size:.75rem;line-height:1.2}.sell-price-display{gap:8px}.sell-price-text{font-size:1.1rem;padding:3px 10px;line-height:1.2}.sell-price-icon{font-size:1.4rem}.cell{border-radius:8px}.animal-emoji{font-size:2rem}.animal-level{font-size:.6rem;padding:2px 4px}.top-bar{margin-bottom:15px}.currency{gap:10px}.gold,.diamond{padding:6px 12px;font-size:.9rem}.add-animal-btn{width:60px;height:60px;bottom:15px}.add-icon{font-size:2.3rem}.gold-collect-btn{padding:12px 20px;font-size:.95rem;bottom:15px;left:15px}.gold-collect-icon{font-size:1.3rem}.market-btn{padding:12px 20px;font-size:.95rem;bottom:15px;right:15px}.market-icon{font-size:1.3rem}.market-modal{padding:20px;max-width:90%}.market-header h2{font-size:1.5rem}}@media (max-width: 480px){.app{padding:8px 8px 85px}.game-container{padding:10px}.board{gap:2px;padding:4px;max-height:300px}.sell-area{padding:4px;height:55px;margin-top:90px}.sell-area-content{height:100%;padding:3px 6px}.sell-area-text{font-size:.7rem;line-height:1.2}.sell-price-display{gap:6px}.sell-price-text{font-size:.95rem;padding:2px 8px;line-height:1.2}.sell-price-icon{font-size:1.2rem}.animal-emoji{font-size:1.5rem}.animal-level{font-size:.5rem}.gold,.diamond{padding:5px 10px;font-size:.85rem}.add-animal-btn{width:70px;height:70px;bottom:12px}.add-icon{font-size:2.2rem}.gold-collect-btn{padding:10px 16px;font-size:.85rem;bottom:12px;left:12px}.gold-collect-icon{font-size:1.2rem}.market-btn{padding:10px 16px;font-size:.85rem;bottom:12px;right:12px}.market-icon{font-size:1.2rem}.market-modal{padding:15px}.market-header h2{font-size:1.3rem}.market-item{padding:15px}.market-item-info h3{font-size:1.1rem}.market-buy-btn{padding:10px 18px;font-size:.9rem}.toast{top:12px;right:12px;padding:10px 18px;max-width:250px;font-size:.8rem}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(180deg,#87ceeb,#b0e0e6,#e0f6ff);min-height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden}#root{width:100%;height:100vh}