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

:root {
  --title-color: var(--color-doodlejump);
  --doodlejump-sky-top: #fffdf2;
  --doodlejump-sky-bottom: #f3edda;
  --doodlejump-star: rgb(30 41 59 / 18%);
  --doodlejump-cloud: rgb(59 130 246 / 8%);
  --doodlejump-player: #d9f99d;
  --doodlejump-player-outline: #334155;
  --doodlejump-player-face: #1e293b;
  --doodlejump-platform-static: #86efac;
  --doodlejump-platform-moving: #7dd3fc;
  --doodlejump-platform-breaking: #fde68a;
  --doodlejump-platform-outline: rgb(51 65 85 / 78%);
  --doodlejump-break-line: #b45309;
  --doodlejump-paper-line: rgb(96 165 250 / 17%);
  --doodlejump-margin-line: rgb(244 63 94 / 22%);
  --doodlejump-doodle-ink: #475569;
  --doodlejump-platform-shadow: rgb(51 65 85 / 16%);
}

.doodlejump-board[data-visual-theme='arcade'] {
  --doodlejump-sky-top: #2a0a3d;
  --doodlejump-sky-bottom: #150422;
  --doodlejump-star: rgb(255 255 255 / 40%);
  --doodlejump-cloud: rgb(255 79 216 / 14%);
  --doodlejump-platform-static: #ff4fd8;
  --doodlejump-platform-moving: #7dd3fc;
  --doodlejump-platform-breaking: #fbbf24;
  --doodlejump-platform-outline: rgb(255 227 248 / 78%);
  --doodlejump-break-line: #fbbf24;
  --doodlejump-paper-line: rgb(255 79 216 / 14%);
  --doodlejump-margin-line: rgb(255 79 216 / 26%);
  --doodlejump-doodle-ink: #ffb3ec;
  --doodlejump-platform-shadow: rgb(0 0 0 / 30%);
  --doodlejump-player: color-mix(in srgb, #d9f99d 55%, #ff4fd8 45%);
  --doodlejump-player-outline: color-mix(in srgb, #334155 70%, #ff4fd8 30%);
  --doodlejump-player-face: color-mix(in srgb, #1e293b 70%, #ff4fd8 30%);
}

.doodlejump-board[data-visual-theme='midnight'] {
  --doodlejump-sky-top: #0b1220;
  --doodlejump-sky-bottom: #060a13;
  --doodlejump-star: rgb(148 197 255 / 40%);
  --doodlejump-cloud: rgb(56 189 248 / 12%);
  --doodlejump-platform-static: #38bdf8;
  --doodlejump-platform-moving: #818cf8;
  --doodlejump-platform-breaking: #fde68a;
  --doodlejump-platform-outline: rgb(224 242 254 / 70%);
  --doodlejump-break-line: #fbbf24;
  --doodlejump-paper-line: rgb(56 189 248 / 14%);
  --doodlejump-margin-line: rgb(56 189 248 / 24%);
  --doodlejump-doodle-ink: #93c5fd;
  --doodlejump-platform-shadow: rgb(0 0 0 / 34%);
  --doodlejump-player: color-mix(in srgb, #d9f99d 55%, #38bdf8 45%);
  --doodlejump-player-outline: color-mix(in srgb, #334155 70%, #38bdf8 30%);
  --doodlejump-player-face: color-mix(in srgb, #1e293b 70%, #38bdf8 30%);
}

.doodlejump-board[data-visual-theme='daylight'] {
  --doodlejump-sky-top: #f5f1ff;
  --doodlejump-sky-bottom: #e6dcfb;
  --doodlejump-star: rgb(124 58 237 / 20%);
  --doodlejump-cloud: rgb(124 58 237 / 10%);
  --doodlejump-platform-static: #a78bfa;
  --doodlejump-platform-moving: #7dd3fc;
  --doodlejump-platform-breaking: #fde68a;
  --doodlejump-platform-outline: rgb(59 7 100 / 60%);
  --doodlejump-break-line: #b45309;
  --doodlejump-paper-line: rgb(124 58 237 / 16%);
  --doodlejump-margin-line: rgb(124 58 237 / 24%);
  --doodlejump-doodle-ink: #6d28d9;
  --doodlejump-platform-shadow: rgb(59 7 100 / 16%);
  --doodlejump-player: color-mix(in srgb, #d9f99d 55%, #7c3aed 45%);
  --doodlejump-player-outline: color-mix(in srgb, #334155 70%, #7c3aed 30%);
  --doodlejump-player-face: color-mix(in srgb, #1e293b 70%, #7c3aed 30%);
}

.doodlejump-board[data-visual-theme='amber'] {
  --doodlejump-sky-top: #2a1808;
  --doodlejump-sky-bottom: #170c03;
  --doodlejump-star: rgb(255 224 168 / 30%);
  --doodlejump-cloud: rgb(251 191 36 / 12%);
  --doodlejump-platform-static: #f59e0b;
  --doodlejump-platform-moving: #fb923c;
  --doodlejump-platform-breaking: #fde68a;
  --doodlejump-platform-outline: rgb(255 243 214 / 70%);
  --doodlejump-break-line: #b45309;
  --doodlejump-paper-line: rgb(251 191 36 / 14%);
  --doodlejump-margin-line: rgb(251 191 36 / 26%);
  --doodlejump-doodle-ink: #fcd34d;
  --doodlejump-platform-shadow: rgb(0 0 0 / 34%);
  --doodlejump-player: color-mix(in srgb, #d9f99d 55%, #fbbf24 45%);
  --doodlejump-player-outline: color-mix(in srgb, #334155 70%, #fbbf24 30%);
  --doodlejump-player-face: color-mix(in srgb, #1e293b 70%, #fbbf24 30%);
}

.doodlejump-board {
  display: grid;
  place-items: stretch;
  overflow: hidden;
  padding: 0;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--border-radius-lg);
  touch-action: none;
  user-select: none;
  box-shadow: 0 1rem 2.5rem rgb(15 23 42 / 18%);
}

.doodlejump-canvas {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  cursor: grab;
  touch-action: none;
  filter: saturate(0.96) contrast(1.02);
}

.doodlejump-canvas:active {
  cursor: grabbing;
}