body {
    font-family: 'Roboto', sans-serif;
    touch-action: manipulation; /* Prevents double-tap zoom on mobile */
    overflow: hidden;
}
.display-font {
    font-family: 'Fredoka One', cursive;
}
.upgrade-button {
    transition: transform 0.1s ease, background-color 0.2s ease, opacity 0.2s ease;
}
.upgrade-button:active {
    transform: scale(0.97);
}
#dog-clicker-area {
    cursor: pointer;
    user-select: none;
    transition: transform 0.1s ease-out;
    position: relative;
}
#dog-clicker-area:active {
    transform: scale(0.95);
}
.floating-treat {
    position: absolute;
    font-size: 1.5rem;
    font-weight: bold;
    color: #c2410c; /* orange-700 */
    text-shadow: 1px 1px 2px rgba(255,255,255,0.5);
    pointer-events: none;
    animation: floatUp 1.2s ease-out forwards;
    display: flex;
    align-items: center;
}
.floating-treat svg {
    width: 24px;
    height: 24px;
    margin-right: 4px;
}
@keyframes floatUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-70px) rotate(-15deg);
    }
}
/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #e0e0e0;
}
::-webkit-scrollbar-thumb {
    background: #a3a3a3;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #8a8a8a;
}
/* Tab styles */
.tab-button {
    transition: color 0.2s ease, border-color 0.2s ease;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px; /* Aligns with the container's border */
    color: #6b7280; /* gray-500 */
}
.tab-button.active-blue {
    color: #2563eb; /* blue-600 */
    border-bottom-color: #2563eb;
}
.tab-button.active-green {
    color: #16a34a; /* green-600 */
    border-bottom-color: #16a34a;
}
.tab-button.active-purple {
    color: #9333ea; /* purple-600 */
    border-bottom-color: #9333ea;
}
#frenzy-meter-bg {
    transition: opacity 0.3s ease;
}
#frenzy-meter-fill {
    transition: width 0.1s linear, background-color 0.3s ease;
}
.milestone-button {
    background-color: #f59e0b !important; /* amber-500 */
    color: white !important;
}
#xp-bar-fill {
    transition: width 0.2s ease-in-out;
}
.buy-mode-button {
    transition: background-color 0.2s ease, color 0.2s ease;
}
.buy-mode-button.active {
    background-color: #fbbf24;
    color: #422006;
}
.upgrade-button.bg-green-500:not(:disabled):hover {
    background-color: #16a34a; /* green-600 */
}

.upgrade-button.bg-blue-500:not(:disabled):hover {
    background-color: #2563eb; /* blue-600 */
}

.upgrade-button.bg-purple-500:not(:disabled):hover {
    background-color: #9333ea; /* purple-600 */
}

#ability-buttons-container button.bg-blue-400:not(:disabled):hover {
    background-color: #3b82f6; /* blue-500 */
}
#abilities-container button.bg-blue-500:not(:disabled):hover {
    background-color: #2563eb; /* blue-600 */
}
#abilities-container button.bg-green-500:not(:disabled):hover {
    background-color: #16a34a; /* green-600 */
}
/* Save Toast Notification */
#save-toast {
    z-index: 50;
    pointer-events: none;
    opacity: 0;
}
#save-toast.show {
    animation: fade-in-out 2.5s ease-in-out forwards;
}
@keyframes fade-in-out {
    0% {
        opacity: 0;
        transform: translate(-50%, 20px);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
    80% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, 20px);
    }
}