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

:root {
  --title-color: var(--color-fruitninja);
  --fruitninja-frame: color-mix(in srgb, var(--color-fruitninja) 62%, var(--line));
  --fruitninja-shadow: rgb(30 27 75 / 36%);
  --fn-sky-top: #08172a;
  --fn-sky-mid: #152a3c;
  --fn-sky-bottom: #46273a;
  --fn-glow: #f5dca8;
  --fn-ground-top: #6b3b24;
  --fn-ground-mid: #3b231b;
  --fn-ground-bottom: #171312;
  --fn-trail: #fed7aa;
}

.fruitninja-board[data-visual-theme='arcade'] {
  --fn-sky-top: #1a0630;
  --fn-sky-mid: #33124f;
  --fn-sky-bottom: #4a1049;
  --fn-glow: #ff9ce4;
  --fn-ground-top: #5a1246;
  --fn-ground-mid: #2e0a29;
  --fn-ground-bottom: #150414;
  --fn-trail: #ff9ce4;
}

.fruitninja-board[data-visual-theme='midnight'] {
  --fn-sky-top: #050b17;
  --fn-sky-mid: #0c1a2c;
  --fn-sky-bottom: #142238;
  --fn-glow: #93c5fd;
  --fn-ground-top: #14304a;
  --fn-ground-mid: #0c1c2c;
  --fn-ground-bottom: #060d16;
  --fn-trail: #7dd3fc;
}

.fruitninja-board[data-visual-theme='daylight'] {
  --fn-sky-top: #2d1b4d;
  --fn-sky-mid: #4c2f72;
  --fn-sky-bottom: #7c5aa6;
  --fn-glow: #e9d5ff;
  --fn-ground-top: #6d4a8f;
  --fn-ground-mid: #40295c;
  --fn-ground-bottom: #241536;
  --fn-trail: #ede9fe;
}

.fruitninja-board[data-visual-theme='amber'] {
  --fn-sky-top: #211004;
  --fn-sky-mid: #401c05;
  --fn-sky-bottom: #5a2a08;
  --fn-glow: #fde68a;
  --fn-ground-top: #7a4310;
  --fn-ground-mid: #40220a;
  --fn-ground-bottom: #1c0f04;
  --fn-trail: #fcd34d;
}

.fruitninja-board {
  position: relative;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  cursor: crosshair;
  background: var(--surface-deep);
  border: 1px solid color-mix(in srgb, #c9783d 64%, var(--line));
  border-radius: var(--border-radius-lg);
  box-shadow:
    inset 0 0 0 3px rgb(51 27 20 / 72%),
    inset 0 0 34px rgb(8 5 5 / 48%),
    0 18px 42px var(--fruitninja-shadow);
}

.fruitninja-canvas {
  display: block;
  width: 100%;
  height: 100%;
}