body {
    font-family: 'Nunito', sans-serif;
    user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Typography & Effects */
.typing-effect::after {
    content: '|';
    animation: blink 1s step-start infinite;
}

@keyframes blink { 50% { opacity: 0; } }

/* Animations */
.shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
    10%, 90% { transform: translate3d(-2px, 0, 0); }
    20%, 80% { transform: translate3d(4px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
    40%, 60% { transform: translate3d(6px, 0, 0); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

/* Particles */
.spark {
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: #ff4500;
    border-radius: 50%;
    pointer-events: none;
    z-index: 100;
    will-change: transform, opacity;
}

/* Utilities */
.key-hint {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #aaa;
    border-radius: 4px;
    text-align: center;
    line-height: 18px;
    font-size: 10px;
    color: #aaa;
    margin-right: 8px;
}

/* Scrollbar Hiding */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Mobile Layout Fixes */
@media (max-height: 600px) {
    #game-container {
        max-height: 100dvh;
        height: 100dvh;
        border-radius: 0;
        border: none;
    }
}