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

:root {
  --title-color: var(--color-orbitdash);
  --orbitdash-hull: #14171f;
  --orbitdash-hull-dark: #0a0b10;
  --orbitdash-hud: #7dd3fc;
}

.orbitdash-board[data-visual-theme='arcade'] {
  --orbitdash-sky-top: #2a0e26;
  --orbitdash-sky-bottom: #3a0f34;
  --orbitdash-stars: rgb(255 184 236 / 55%);
  --orbitdash-orbit-glow: rgb(230 96 178 / 22%);
  --orbitdash-orbit-dash: #e660b2;
  --orbitdash-anchor-fill: #4a1440;
  --orbitdash-anchor-glow: #ff8fd0;
  --orbitdash-anchor-dot: #ffd9f2;
}

.orbitdash-board[data-visual-theme='midnight'] {
  --orbitdash-sky-top: #050c1a;
  --orbitdash-sky-bottom: #0b1d3a;
  --orbitdash-stars: rgb(186 230 253 / 55%);
  --orbitdash-orbit-glow: rgb(56 189 248 / 20%);
  --orbitdash-orbit-dash: #91a9c4;
  --orbitdash-anchor-fill: #123456;
  --orbitdash-anchor-glow: #38bdf8;
  --orbitdash-anchor-dot: #bae6fd;
}

.orbitdash-board[data-visual-theme='daylight'] {
  --orbitdash-sky-top: #241640;
  --orbitdash-sky-bottom: #4c2f8a;
  --orbitdash-stars: rgb(237 233 254 / 60%);
  --orbitdash-orbit-glow: rgb(167 139 250 / 24%);
  --orbitdash-orbit-dash: #a78bfa;
  --orbitdash-anchor-fill: #5b3a9e;
  --orbitdash-anchor-glow: #c4b5fd;
  --orbitdash-anchor-dot: #ede9fe;
}

.orbitdash-board[data-visual-theme='amber'] {
  --orbitdash-sky-top: #1a1004;
  --orbitdash-sky-bottom: #3d2408;
  --orbitdash-stars: rgb(253 230 138 / 55%);
  --orbitdash-orbit-glow: rgb(251 191 36 / 20%);
  --orbitdash-orbit-dash: #e5a836;
  --orbitdash-anchor-fill: #5a3a0f;
  --orbitdash-anchor-glow: #fbbf24;
  --orbitdash-anchor-dot: #fde68a;
}

/* A cockpit viewport rather than a bare canvas: a gunmetal hull frame with
   rivets and HUD targeting brackets around the orbital display glass. */
.orbitdash-board {
  --orbitdash-bg: #090719;
  --orbitdash-board-height: min(78vh, 860px);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  width: min(100%, calc(var(--orbitdash-board-height) * 11 / 18));
  height: var(--orbitdash-board-height);
  padding: 0;
  background: var(--orbitdash-bg);
  border: 0.5rem solid var(--orbitdash-hull);
  border-radius: var(--border-radius-lg);
  aspect-ratio: 11 / 18;
  box-shadow:
    inset 0 0 0 2px var(--orbitdash-hull-dark),
    inset 0 0 2.5rem rgb(0 0 0 / 55%),
    0 20px 50px rgba(8, 5, 30, 0.45),
    0 0 0 1px rgba(129, 140, 248, 0.12);
}

.orbitdash-board::before {
  content: '';
  position: absolute;
  z-index: 3;
  pointer-events: none;
  inset: 0.6rem;
  border: 1px solid color-mix(in srgb, var(--orbitdash-hud) 32%, transparent);
  border-image: repeating-linear-gradient(
      color-mix(in srgb, var(--orbitdash-hud) 55%, transparent) 0 0.5rem,
      transparent 0.5rem 1.4rem
    )
    1;
  border-radius: var(--border-radius-md);
  opacity: 0.55;
}

.orbitdash-canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: manipulation;
  user-select: none;
}

.orbitdash-board__hint {
  position: absolute;
  inset: 1rem 1rem auto;
  z-index: 4;
  padding: 0.55rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--orbitdash-hud) 40%, transparent);
  border-radius: 999px;
  background: rgba(9, 7, 25, 0.72);
  color: var(--orbitdash-hud);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  transition:
    opacity 180ms ease,
    transform 180ms ease;
  pointer-events: none;
}

.orbitdash-board.is-input-active .orbitdash-board__hint {
  opacity: 0.12;
  transform: translateY(-0.25rem);
}

@media (max-width: 767px) {
  .orbitdash-board {
    width: 100%;
    height: auto;
    max-height: none;
  }
}