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

:root {
  --title-color: var(--color-defender);
  --defender-sky: #090f2c;
  --defender-sky-glow: #182459;
  --defender-terrain: #11183c;
  --defender-terrain-edge: #293b83;
  --defender-grid: rgba(117, 142, 235, 0.15);
  --defender-star: #c7d2fe;
  --defender-player: #67e8f9;
  --defender-player-glow: #22d3ee;
  --defender-ship-trail: #fef08a;
  --defender-enemy: #fb7185;
  --defender-enemy-glow: #f43f5e;
  --defender-danger: #fb923c;
  --defender-bullet: #fef08a;
}

.defender-board[data-visual-theme='arcade'] {
  --defender-sky: #2a0e26;
  --defender-sky-glow: #3a0f34;
  --defender-terrain: #24081e;
  --defender-terrain-edge: #7a1a63;
  --defender-grid: rgb(255 79 216 / 12%);
  --defender-star: rgb(255 184 236 / 70%);
}

.defender-board[data-visual-theme='midnight'] {
  --defender-sky: #050c1a;
  --defender-sky-glow: #0b1d3a;
  --defender-terrain: #0a1729;
  --defender-terrain-edge: #123456;
  --defender-grid: rgb(56 189 248 / 12%);
  --defender-star: rgb(186 230 253 / 70%);
}

.defender-board[data-visual-theme='daylight'] {
  --defender-sky: #241640;
  --defender-sky-glow: #4c2f8a;
  --defender-terrain: #221338;
  --defender-terrain-edge: #5b3a9e;
  --defender-grid: rgb(124 58 237 / 16%);
  --defender-star: rgb(237 233 254 / 75%);
}

.defender-board[data-visual-theme='amber'] {
  --defender-sky: #1a1004;
  --defender-sky-glow: #3d2408;
  --defender-terrain: #241503;
  --defender-terrain-edge: #5a3a0f;
  --defender-grid: rgb(251 191 36 / 12%);
  --defender-star: rgb(253 230 138 / 70%);
}

.defender-board {
  min-height: 0;
  overflow: hidden;
  padding: 0;
  background: var(--defender-sky);
  border: 1px solid color-mix(in srgb, var(--defender-player) 55%, var(--line));
  border-radius: var(--border-radius-lg);
  box-shadow:
    inset 0 0 0 3px rgb(8 19 39 / 70%),
    inset 0 0 34px rgb(4 9 22 / 46%),
    0 1rem 3rem color-mix(in srgb, var(--defender-player-glow) 16%, transparent);
  touch-action: none;
  user-select: none;
  position: relative;
  isolation: isolate;
  transition: box-shadow 180ms ease;
}

.defender-board.is-low-lives {
  box-shadow:
    0 1rem 3rem color-mix(in srgb, var(--defender-player-glow) 10%, transparent),
    inset 0 0 0 2px color-mix(in srgb, var(--defender-enemy) 60%, transparent);
}

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

.defender-controls {
  position: absolute;
  inset: auto 0 var(--spacing-sm);
  display: grid;
  grid-template-areas:
    '. up .'
    'left shoot right'
    '. down .';
  grid-template-columns: repeat(3, minmax(44px, 58px));
  justify-content: center;
  gap: var(--spacing-xs);
  opacity: 0.86;
}

.defender-control {
  min-width: 44px;
  min-height: 44px;
  border: none;
  border-radius: var(--border-radius-md);
  color: var(--white-color);
  background: color-mix(in srgb, var(--defender-player) 70%, transparent);
  font-size: 1.15rem;
  line-height: 1;
  display: grid;
  place-items: center;
  gap: 0.15rem;
  opacity: 0.82;
  touch-action: manipulation;
  user-select: none;
  transition: opacity 0.15s ease;
}

.defender-control-symbol {
  font-size: 1.15rem;
}

.defender-control-label {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.defender-control--up {
  grid-area: up;
}
.defender-control--down {
  grid-area: down;
}
.defender-control--left {
  grid-area: left;
}
.defender-control--right {
  grid-area: right;
}
.defender-control--shoot {
  grid-area: shoot;
  background: color-mix(in srgb, var(--defender-ship-trail) 70%, transparent);
}
.defender-control:focus-visible {
  outline: 2px solid var(--defender-player);
  outline-offset: 2px;
}

.defender-control.is-pressed,
.defender-control:active {
  opacity: 1;
  transform: scale(0.94);
}

@media (min-width: 800px) {
  .defender-controls {
    opacity: 0.35;
  }

  .defender-controls:hover,
  .defender-controls:focus-within {
    opacity: 0.95;
  }
}

@media (max-width: 520px) {
  .defender-control-label {
    display: none;
  }
}