body {
    font-family: 'Outfit', sans-serif;
    background-color: #0f172a;
    color: #f8fafc;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    overflow-x: hidden;
}

.pixel-font {
    font-family: 'Press Start 2P', cursive;
}

canvas {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    box-shadow: 0 10px 30px -5px rgba(236, 72, 153, 0.3);
}

.retro-border {
    border: 4px solid #f43f5e;
    outline: 4px solid #8b5cf6;
    box-shadow: 0 0 15px rgba(244, 63, 94, 0.5);
}

.retro-btn {
    position: relative;
    transition: all 0.1s ease;
    box-shadow: 0 6px 0 #9d174d;
}

.retro-btn:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #9d174d;
}

/* Touch D-Pad styling */
.touch-btn {
    background: rgba(30, 41, 59, 0.8);
    border: 2px solid #ec4899;
    backdrop-filter: blur(4px);
}

.touch-btn:active {
    background: rgba(236, 72, 153, 0.4);
}

.milestone-toast {
    position: fixed;
}

.toast-close {
    cursor: pointer;
}