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

:root {
  --title-color: var(--color-stacktower);
  --stacktower-background: #071226;
  --stacktower-grid: rgb(148 163 184 / 0.14);
  --stacktower-block: #0e7490;
  --stacktower-moving: #22d3ee;
  --stacktower-outline: #67e8f9;
  --stacktower-danger: #ef476f;
  --stacktower-sky-top: #352053;
  --stacktower-sky-bottom: #060b16;
  --stacktower-city: #101b2d;
  --stacktower-city-far: #19243a;
  --stacktower-window: #ffd58a;
  --stacktower-crane: rgb(226 232 240 / 58%);
  --stacktower-block-top: #67e8f9;
  --stacktower-block-side: #07556b;
}

.stacktower-board[data-visual-theme='arcade'] {
  --stacktower-background: #1a0630;
  --stacktower-grid: rgb(255 156 228 / 14%);
  --stacktower-block: #a855f7;
  --stacktower-moving: #ff4fd8;
  --stacktower-outline: #ff9ce4;
  --stacktower-danger: #ef476f;
  --stacktower-sky-top: #3d0f4a;
  --stacktower-sky-bottom: #150422;
  --stacktower-city: #2a0a3d;
  --stacktower-city-far: #3d1153;
  --stacktower-window: #fbbf24;
  --stacktower-crane: rgb(255 227 248 / 58%);
  --stacktower-block-top: #ff9ce4;
  --stacktower-block-side: #7a1a63;
}

.stacktower-board[data-visual-theme='midnight'] {
  --stacktower-background: #050b17;
  --stacktower-grid: rgb(148 197 255 / 14%);
  --stacktower-block: #2563eb;
  --stacktower-moving: #38bdf8;
  --stacktower-outline: #7dd3fc;
  --stacktower-danger: #ef476f;
  --stacktower-sky-top: #14213a;
  --stacktower-sky-bottom: #060a13;
  --stacktower-city: #0b1220;
  --stacktower-city-far: #142238;
  --stacktower-window: #fde68a;
  --stacktower-crane: rgb(224 242 254 / 58%);
  --stacktower-block-top: #7dd3fc;
  --stacktower-block-side: #0e3a5c;
}

.stacktower-board[data-visual-theme='daylight'] {
  --stacktower-background: #f5f1ff;
  --stacktower-grid: rgb(124 58 237 / 14%);
  --stacktower-block: #7c3aed;
  --stacktower-moving: #a78bfa;
  --stacktower-outline: #c4b5fd;
  --stacktower-danger: #dc2626;
  --stacktower-sky-top: #ddd0fb;
  --stacktower-sky-bottom: #f5f1ff;
  --stacktower-city: #ccbcf5;
  --stacktower-city-far: #ded1fa;
  --stacktower-window: #f59e0b;
  --stacktower-crane: rgb(59 7 100 / 45%);
  --stacktower-block-top: #c4b5fd;
  --stacktower-block-side: #5b21b6;
}

.stacktower-board[data-visual-theme='amber'] {
  --stacktower-background: #211004;
  --stacktower-grid: rgb(251 191 36 / 14%);
  --stacktower-block: #b45309;
  --stacktower-moving: #f59e0b;
  --stacktower-outline: #fbbf24;
  --stacktower-danger: #ef476f;
  --stacktower-sky-top: #4a2308;
  --stacktower-sky-bottom: #170c03;
  --stacktower-city: #2a1808;
  --stacktower-city-far: #40220a;
  --stacktower-window: #fde68a;
  --stacktower-crane: rgb(255 243 214 / 58%);
  --stacktower-block-top: #fbbf24;
  --stacktower-block-side: #7a3d05;
}

.stacktower-board {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: var(--spacing-sm);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--stacktower-outline) 74%, var(--line));
  border-radius: var(--border-radius-lg);
  background:
    radial-gradient(
      circle at 50% 0%,
      color-mix(in srgb, var(--stacktower-moving) 15%, transparent),
      transparent 44%
    ),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--stacktower-background) 82%, var(--white-color)),
      var(--stacktower-background)
    );
  box-shadow:
    0 1rem 2.5rem color-mix(in srgb, var(--stacktower-background) 45%, transparent),
    var(--shadow-lg);
}

.stacktower-canvas {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 1;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  filter: saturate(1.05) contrast(1.04);
}

.stacktower-canvas:focus-visible {
  outline: 3px solid var(--stacktower-moving);
  outline-offset: -3px;
}