/* Base styles and aesthetics */
body {
  margin: 0;
  overflow: hidden;
  background-color: #050505;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  user-select: none;
}

#canvas-container {
  width: 100vw;
  height: 100vh;
}

/* Glassmorphism UI */
.glass-panel {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(56, 189, 248, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* Interactive elements styles */
.service-btn {
  transition: all 0.2s ease;
}

.service-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.4);
  border-color: rgba(56, 189, 248, 0.5);
}

.service-btn:active {
  transform: translateY(0);
}

.service-btn.active {
  background: rgba(56, 189, 248, 0.2);
  border: 1px solid #38bdf8;
  box-shadow: inset 0 0 10px rgba(56, 189, 248, 0.2);
}

.time-btn {
  transition: all 0.1s ease;
}

.time-btn.active {
  background: rgba(56, 189, 248, 0.4);
  border-color: #38bdf8;
  color: white;
}

.tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  display: none;
  z-index: 100;
  border: 1px solid #333;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Onboarding Modal Styles */
.onboarding-step {
  display: none;
}

.onboarding-step.active {
  display: block;
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.key-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-family: monospace;
  font-size: 0.8em;
  color: #fff;
}

/* Custom Select Styles */
#lang-select option {
  background-color: #1f2937; /* Tailwind gray-800 */
  color: white;
}

/* Neon Green Pulse for Play Button */
.pulse-green {
  background-color: #39ff14 !important;
  color: #000 !important;
  border-color: #39ff14 !important;
  box-shadow: 0 0 10px #39ff14, 0 0 20px #39ff14;
  animation: neonPulse 1.5s infinite;
}

@keyframes neonPulse {
  0% {
    box-shadow: 0 0 5px #39ff14, 0 0 10px #39ff14;
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 20px #39ff14, 0 0 30px #39ff14;
    transform: scale(1.1);
  }

  100% {
    box-shadow: 0 0 5px #39ff14, 0 0 10px #39ff14;
    transform: scale(1);
  }
}

/* Animation for Onboarding Flow */
.flow-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.flow-node {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  position: relative;
  background: #1f2937;
  border: 1px solid #374151;
}

.flow-line {
  width: 60px;
  height: 2px;
  background: #4b5563;
  position: relative;
}

.flow-packet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: -3px;
  left: 0;
  animation: flowMove 1.5s infinite linear;
}

@keyframes flowMove {
  0% {
    left: 0;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    left: 100%;
    opacity: 0;
  }
}

/* Tutorial Styles */
#tutorial-popup {
  transition: right 0.4s ease-out, bottom 0.4s ease-out, left 0.4s ease-out,
    top 0.4s ease-out, transform 0.4s ease-out;
}

#tutorial-popup.tutorial-enter {
  animation: tutorialFadeIn 0.5s ease-out;
}

@keyframes tutorialFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

#tutorial-popup.tutorial-step-change {
  animation: tutorialStepChange 0.3s ease-out;
}

@keyframes tutorialStepChange {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(0.97);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

#tutorial-highlight {
  animation: tutorialHighlightPulse 1.5s infinite;
}

@keyframes tutorialHighlightPulse {
  0%,
  100% {
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.5), 0 0 30px rgba(6, 182, 212, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.8), 0 0 60px rgba(6, 182, 212, 0.5);
  }
}

.tutorial-tool-highlight {
  animation: toolHighlightPulse 1.2s infinite !important;
  position: relative;
  z-index: 100;
}

@keyframes toolHighlightPulse {
  0%,
  100% {
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.6),
      inset 0 0 8px rgba(6, 182, 212, 0.2);
    border-color: rgba(6, 182, 212, 0.8) !important;
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 25px rgba(6, 182, 212, 1), 0 0 40px rgba(6, 182, 212, 0.5),
      inset 0 0 12px rgba(6, 182, 212, 0.3);
    border-color: rgba(6, 182, 212, 1) !important;
    transform: scale(1.05);
  }
}

/* Intervention Warning Styles */
.intervention-warning {
  animation: warningSlideIn 0.3s ease-out, warningPulse 1s ease-in-out infinite;
}

@keyframes warningSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes warningPulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 10px currentColor;
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 0 20px currentColor;
  }
}

.warning-danger {
  background: rgba(220, 38, 38, 0.9);
  border-color: #ef4444;
  color: #fecaca;
}

.warning-warning {
  background: rgba(217, 119, 6, 0.9);
  border-color: #f59e0b;
  color: #fef3c7;
}

.warning-info {
  background: rgba(37, 99, 235, 0.9);
  border-color: #3b82f6;
  color: #dbeafe;
}

/* Event indicator bar */
.event-active-bar {
  animation: eventBarPulse 0.5s ease-in-out infinite alternate;
}

@keyframes eventBarPulse {
  from {
    opacity: 0.8;
  }
  to {
    opacity: 1;
  }
}

/* Achievement unlock toasts (#158) — celebration chrome, distinct from the
   intervention-warning alarm styles above. */
.achievement-toast {
  animation: achievementSlideIn 0.35s ease-out;
}

.achievement-toast-out {
  transition: all 0.35s ease-in;
  opacity: 0;
  transform: translateX(24px);
}

@keyframes achievementSlideIn {
  from {
    opacity: 0;
    transform: translateX(24px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Phone HUD (#12). Everything below is inert on a screen at least 768px wide
   and 501px tall: the tab strip is display:none there and every rule that
   touches a panel sits inside the media query, so a desktop layout is
   unchanged.

   Narrower than that, the six panels cannot share the screen — side by side
   they need about 640px, and stacked they cover the whole board. Shorter than
   that (a phone held sideways, ~375px), the stats panel alone is taller than
   the screen. Either way each panel opens on its own from #hudTabs
   (src/ui/hud-tabs.js adds .m-open). An open panel never overrides .hidden:
   the game still decides whether objectives or the sandbox panel exists in
   this mode; the tab only decides whether it is shown. */
.hud-tabs {
  display: none;
}

.hud-tab {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  color: #9ca3af;
}

.hud-tab[aria-pressed="true"] {
  color: #fff;
  background: rgba(56, 189, 248, 0.25);
}

@media (max-width: 767px), (max-height: 500px) {
  #timeControls {
    top: 0.5rem;
    gap: 0.375rem;
    max-width: calc(100vw - 1rem);
    overflow-x: auto;
  }

  #timeControls > * {
    flex-shrink: 0;
  }

  #timeControls .time-btn {
    width: 2.125rem;
    height: 2.125rem;
  }

  .hud-tabs {
    display: flex;
    position: absolute;
    top: 4rem;
    left: 50%;
    transform: translateX(-50%);
    /* Never wider than the screen. Wider, it pushed the page into sideways
       scroll, which is the first thing this block exists to stop: seven
       buttons already overran a 320px phone. Past the cap it scrolls inside
       itself, as the time controls do. */
    max-width: calc(100vw - 0.5rem);
    overflow-x: auto;
  }

  .hud-tabs > * {
    flex-shrink: 0;
  }

  /* Warnings and hints. Pinned at left:50% and shifted back by half its own
     width, the container only ever had half the screen to lay out in, so on
     a phone every message wrapped into a column ~190px wide. Spanning the
     screen, its children still centre themselves. Below the tab row, not
     behind it. */
  #intervention-warnings {
    top: 7.25rem;
    left: 0.5rem;
    right: 0.5rem;
    transform: none;
  }

  #statsPanel,
  #objectivesPanel,
  #sandboxPanel,
  #detailsPanel,
  #healthPanel,
  #metricsPanel,
  #financesPanel {
    position: fixed;
    top: 7.25rem;
    left: 0.5rem;
    right: 0.5rem;
    bottom: auto;
    width: auto;
    max-width: 24rem;
    max-height: min(50vh, calc(100vh - 15rem));
    overflow-y: auto;
    z-index: 30;
  }

  #statsPanel:not(.m-open),
  #objectivesPanel:not(.m-open),
  #sandboxPanel:not(.m-open),
  #detailsPanel:not(.m-open),
  #healthPanel:not(.m-open),
  #metricsPanel:not(.m-open),
  #financesPanel:not(.m-open) {
    display: none;
  }
}

/* Build-tool key hints (#70). A screen with no hover is almost always a touch
   screen with no keyboard, where a letter in the corner is only clutter. */
@media (hover: none) {
  .key-hint {
    display: none;
  }
}

/* The narrowest phones (360px is the most common Android width) get slightly
   smaller HUD tabs, so the whole row fits without scrolling. 36px still clears
   the 34px the phone time controls use. */
@media (max-width: 380px) {
  .hud-tab {
    width: 2.25rem;
    height: 2.25rem;
  }
}