@import url('../global.css');

:root {
  --title-color: var(--color-geometrydash);
  --gd-sky: #21154f;
  --gd-sky-deep: #100b2d;
  --gd-cloud: color-mix(in srgb, var(--white-color) 24%, transparent);
  --gd-grid: color-mix(in srgb, var(--color-geometrydash) 24%, transparent);
  --gd-beat-line: color-mix(in srgb, var(--color-geometrydash) 8%, transparent);
  --gd-factory: #171437;
  --gd-factory-light: #22d3ee;
  --gd-ground: #17112f;
  --gd-ground-line: var(--color-geometrydash);
  --gd-ground-seam: rgb(168 85 247 / 22%);
  --gd-ground-bolt: rgb(253 244 255 / 24%);
  --gd-platform: #3b247d;
  --gd-platform-top: #a855f7;
  --gd-platform-glint: color-mix(in srgb, var(--white-color) 32%, transparent);
  --gd-platform-frame: #21154f;
  --gd-platform-bolt: #d8b4fe;
  --gd-spike: #fb7185;
  --gd-spike-glow: #fb7185;
  --gd-spike-edge: #fecdd3;
  --gd-spike-core: #9f1239;
  --gd-finish: #f8fafc;
  --gd-finish-alt: var(--color-geometrydash);
  --gd-player: var(--color-geometrydash);
  --gd-player-outline: #fdf4ff;
  --gd-player-face: #21154f;
  --gd-player-eye: #67e8f9;
  --gd-player-mouth: #fdf4ff;
  --gd-player-detail: #d8b4fe;
  --gd-player-shadow: #090615;
  --gd-player-glow: var(--color-geometrydash);
  --gd-progress-track: color-mix(in srgb, var(--white-color) 14%, transparent);
  --gd-progress: var(--color-geometrydash);
  --gd-progress-marker: #fdf4ff;
}

.geometrydash-board[data-visual-theme='arcade'] {
  --gd-sky: #3a0f34;
  --gd-sky-deep: #170714;
  --gd-factory: #24081e;
  --gd-factory-light: #ff4fd8;
  --gd-ground: #200a1c;
  --gd-platform: #4a1440;
  --gd-platform-top: #ff4fd8;
  --gd-platform-frame: #3a0f34;
  --gd-platform-bolt: #ffb8ec;
}

.geometrydash-board[data-visual-theme='midnight'] {
  --gd-sky: #0b1d3a;
  --gd-sky-deep: #050c1a;
  --gd-factory: #0d1f33;
  --gd-factory-light: #38bdf8;
  --gd-ground: #0a1729;
  --gd-platform: #123456;
  --gd-platform-top: #38bdf8;
  --gd-platform-frame: #0b1d3a;
  --gd-platform-bolt: #bae6fd;
}

.geometrydash-board[data-visual-theme='daylight'] {
  --gd-sky: #4c2f8a;
  --gd-sky-deep: #241640;
  --gd-factory: #2a1a4d;
  --gd-factory-light: #a78bfa;
  --gd-ground: #221338;
  --gd-platform: #5b3a9e;
  --gd-platform-top: #a78bfa;
  --gd-platform-frame: #4c2f8a;
  --gd-platform-bolt: #ede9fe;
}

.geometrydash-board[data-visual-theme='amber'] {
  --gd-sky: #3d2408;
  --gd-sky-deep: #1a1004;
  --gd-factory: #2c1a06;
  --gd-factory-light: #fbbf24;
  --gd-ground: #241503;
  --gd-platform: #5a3a0f;
  --gd-platform-top: #fbbf24;
  --gd-platform-frame: #3d2408;
  --gd-platform-bolt: #fde68a;
}

.geometrydash-board {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: var(--gd-sky-deep);
  border: 1px solid color-mix(in srgb, var(--color-geometrydash) 65%, var(--line));
  border-radius: var(--border-radius-lg);
  box-shadow: 0 0 24px color-mix(in srgb, var(--color-geometrydash) 18%, transparent);
  touch-action: none;
  user-select: none;
}

.geometrydash-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
  filter: saturate(1.08) contrast(1.04);
}