@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800&display=swap');
body { overscroll-behavior: none; transition: background-color 0.3s ease; }

#board { touch-action: none; background-image: radial-gradient(#cbd5e1 1px, transparent 1px); background-size: 20px 20px; position: relative; overflow: hidden; }
.dark #board { background-image: radial-gradient(#334155 1px, transparent 1px); }

.element-card { user-select: none; touch-action: none; position: absolute; transform: translate(-50%, -50%); transition: box-shadow 0.2s, background-color 0.3s, border-color 0.3s; z-index: 10; }
.element-card.dragging { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); z-index: 40 !important; }
.element-card.in-cauldron { box-shadow: 0 0 10px 3px rgba(168, 85, 247, 0.5); border-color: #c084fc; z-index: 5; }
.element-card.in-trash { opacity: 0.5; transform: translate(-50%, -50%) scale(0.8); }

.inventory-item { transition: transform 0.1s, box-shadow 0.2s; touch-action: pan-y; -webkit-touch-callout: none; }
.inventory-item:hover { transform: translateY(-2px); }
.inventory-item:active { transform: scale(0.95); }

#resizer { touch-action: none; user-select: none; }

@keyframes pop { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; } 70% { transform: translate(-50%, -50%) scale(1.1); } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.animate-pop { animation: pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }

@keyframes pulse-ring { 0% { transform: translate(-50%, -50%) scale(0.8); box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.7); } 70% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 15px rgba(168, 85, 247, 0); } 100% { transform: translate(-50%, -50%) scale(0.8); box-shadow: 0 0 0 0 rgba(168, 85, 247, 0); } }
.merging { animation: pulse-ring 1s infinite; pointer-events: none; opacity: 0.8; filter: grayscale(50%); z-index: 30 !important; }

#clear-board-btn { transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
#clear-board-btn.trash-mode { transform: scale(1.1); background-color: #fef2f2; border-color: #ef4444; }
.dark #clear-board-btn.trash-mode { background-color: rgba(127, 29, 29, 0.6); border-color: #f87171; }
#clear-board-btn.trash-hover { transform: scale(1.2) rotate(-5deg); background-color: #fee2e2; }
.dark #clear-board-btn.trash-hover { background-color: rgba(153, 27, 27, 0.8); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.dark ::-webkit-scrollbar-thumb { background: #475569; }
.dark ::-webkit-scrollbar-thumb:hover { background: #64748b; }

.drawer-left-open { transform: translateX(0) !important; }
.drawer-right-open { transform: translateX(0) !important; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.quest-completed { opacity: 0.5; filter: grayscale(100%); }