:root {
  --bg: #07111d;
  --panel: #0c1b2a;
  --accent: #79ffe1;
  --accent-text: #041b18;
  --page-glow: rgba(121, 255, 225, 0.17);
  --violet: #a78bfa;
  --coral: #ff7892;
}

body {
  background:
    radial-gradient(circle at 11% 10%, rgba(121, 255, 225, 0.16), transparent 25rem),
    radial-gradient(circle at 87% 18%, rgba(167, 139, 250, 0.17), transparent 24rem),
    linear-gradient(155deg, #0a1c2b 0%, #07111d 52%, #040912 100%);
}

.stage,
.side-panel,
.camera-card,
.control-card {
  border-color: rgba(129, 190, 211, 0.2);
  background: rgba(7, 18, 30, 0.9);
}

.stage {
  box-shadow:
    0 28px 84px rgba(0, 0, 0, 0.38),
    inset 0 0 0 1px rgba(121, 255, 225, 0.025);
}

#game-canvas {
  min-height: 590px;
  background: #07111d;
  touch-action: none;
}

.home-link {
  color: var(--accent);
  letter-spacing: 0.04em;
}

.camera-card__label,
.control-card__eyebrow {
  color: #8da8bc;
  letter-spacing: 0.13em;
}

.control-card__eyebrow {
  margin: 0 0 0.4rem !important;
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.control-card h1 {
  color: #f2fffc;
}

.diagonal-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "up-left . up-right"
    ". core ."
    "down-left . down-right";
  gap: 0.35rem;
  width: min(260px, 100%);
  margin: 1.1rem auto;
}

.diagonal-map > span {
  display: grid;
  min-height: 4.25rem;
  place-content: center;
  border: 1px solid rgba(121, 255, 225, 0.18);
  border-radius: 8px;
  background: rgba(121, 255, 225, 0.055);
  color: #e3fff9;
  text-align: center;
}

.diagonal-map b {
  color: var(--accent);
  font-size: 1.4rem;
  line-height: 1;
}

.diagonal-map small {
  margin-top: 0.35rem;
  color: #9bb3c5;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.35;
  text-transform: uppercase;
}

.diagonal-map__up-left {
  grid-area: up-left;
}

.diagonal-map__up-right {
  grid-area: up-right;
}

.diagonal-map__core {
  grid-area: core;
  min-height: 2.2rem !important;
  border-color: rgba(167, 139, 250, 0.26) !important;
  background: rgba(167, 139, 250, 0.09) !important;
  color: var(--violet) !important;
  font-size: 1rem;
}

.diagonal-map__down-left {
  grid-area: down-left;
}

.diagonal-map__down-right {
  grid-area: down-right;
}

.overlay-card {
  border-color: rgba(121, 255, 225, 0.25);
  background: rgba(5, 14, 26, 0.94);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.56),
    0 0 44px rgba(121, 255, 225, 0.07);
}

.overlay-kicker {
  margin-bottom: 0.45rem !important;
  color: var(--accent) !important;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.overlay-card h1,
.overlay-card h2 {
  font-size: clamp(1.65rem, 5vw, 2.45rem);
}

.overlay-hint {
  margin: 0.85rem 0 0 !important;
  font-size: 0.78rem;
}

.overlay-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
}

.overlay-button {
  min-width: 9rem;
  box-shadow: 0 0 28px rgba(121, 255, 225, 0.15);
}

.overlay-button--secondary {
  border: 1px solid rgba(141, 168, 188, 0.34);
  background: rgba(141, 168, 188, 0.09);
  box-shadow: none;
  color: #e8f5ff;
}

.hud {
  align-items: flex-start;
}

.hud span {
  border-color: rgba(121, 255, 225, 0.17);
  background: rgba(4, 13, 24, 0.75);
  backdrop-filter: blur(8px);
}

.hud__label {
  display: block;
  margin-bottom: 0.12rem;
  color: #8da8bc;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hud__value {
  display: block;
  color: #f0fffc;
  font-size: 0.94rem;
}

#camera-status[data-tone="ready"] {
  color: #a4ffec;
}

#camera-status[data-tone="error"] {
  color: #ffc5d0;
}

@media (max-width: 640px) {
  #game-canvas {
    min-height: 520px;
  }

  .hud {
    gap: 0.35rem;
    padding: 0.5rem;
  }

  .hud span {
    flex: 1 1 4.2rem;
    padding: 0.42rem 0.5rem;
  }

  .hud__value {
    font-size: 0.84rem;
  }

  .overlay-card {
    padding: 1.2rem;
  }
}