body {
    height: 100vh;
    margin: 0;
    overflow: hidden;
    background-image: url(./assets/bg.webp);
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='grad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23FF69B4;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%234169E1;stop-opacity:1' /%3E%3C/linearGradient%3E%3Cfilter id='glow'%3E%3CfeGaussianBlur stdDeviation='1' result='coloredBlur'/%3E%3CfeMerge%3E%3CfeMergeNode in='coloredBlur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M8,8 L16,24 L19,19 L24,16 L8,8' fill='url(%23grad)' stroke='white' stroke-width='1' filter='url(%23glow)' /%3E%3C/svg%3E") 8 8, auto;
}

#app {
    height: 100%;
}

#game-container canvas {
    display: block;
    margin: 0 auto;
}

[data-clickable], 
button, 
a {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='grad2' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23FF1493;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%234B0082;stop-opacity:1' /%3E%3C/linearGradient%3E%3Cfilter id='glow2'%3E%3CfeGaussianBlur stdDeviation='1.5' result='coloredBlur'/%3E%3CfeMerge%3E%3CfeMergeNode in='coloredBlur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M16,4 L13,24 L16,20 L19,24 L16,4' fill='url(%23grad2)' stroke='white' stroke-width='1' filter='url(%23glow2)' /%3E%3C/svg%3E") 16 16, pointer;
}