/* Skyline Relay - Custom Styles & Cyberpunk Sunset Art Direction */
:root {
  --color-sunset: #ffa834;
  --color-dusk: #271e3d;
  --color-grapple: #06b6d4;
  --color-cell: #22d3ee;
}

.cursor-wait {
  cursor: wait !important;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  background-color: var(--color-dusk);
}

/* Reticle Cyberpunk Corners */
.reticle-corner {
  position: absolute;
  width: 6px;
  height: 6px;
  border-color: rgba(6, 182, 212, 0.7);
  pointer-events: none;
}
.reticle-corner.top-0.left-0 {
  border-top: 2px solid;
  border-left: 2px solid;
}
.reticle-corner.top-0.right-0 {
  border-top: 2px solid;
  border-right: 2px solid;
}
.reticle-corner.bottom-0.left-0 {
  border-bottom: 2px solid;
  border-left: 2px solid;
}
.reticle-corner.bottom-0.right-0 {
  border-bottom: 2px solid;
  border-right: 2px solid;
}

/* Target Locked State on Crosshair */
#reticle.locked .reticle-ring {
  border-color: #06b6d4;
  box-shadow: 0 0 16px #06b6d4, inset 0 0 8px rgba(6, 182, 212, 0.4);
  transform: scale(1.25) rotate(45deg);
}
#reticle.locked .reticle-core {
  background-color: #38bdf8;
  transform: scale(1.8);
  box-shadow: 0 0 12px #38bdf8;
}
#reticle.locked #reticle-hint {
  opacity: 1;
  color: #38bdf8;
  border: 1px solid rgba(6, 182, 212, 0.6);
}

/* Action Button Scale Effects */
button:active {
  transform: scale(0.96);
}

/* Safe area padding fallback */
#hud {
  padding-top: max(0.75rem, env(safe-area-inset-top));
}
#touch-controls {
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}