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;
}