/* 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);
  }
}

/* Desktop HUD columns. The panels used to be pinned at fixed offsets with no
   idea of each other, of the screen's height or of the toolbar: the right
   column grew past the bottom of the screen with nothing to scroll it (on a
   1080p screen Finances ended 300px below the edge), the toolbar covered the
   objectives and the metrics panel on any laptop, and at 1280x720 the
   objectives sat on top of the stats.

   Each side is now one column (#hudLeft, #hudRight in index.html) with a top
   and a bottom: below the time controls' row, above the toolbar's band. What
   does not fit scrolls inside its column. The left column pins the objectives
   (or the sandbox controls) to its foot, where they always lived.

   --hud-top is the height of the event banner while one is showing, so the
   banner pushes the HUD down instead of covering the time controls.
   --hud-bottom is the toolbar's band (131px tall at its widest category, plus
   a gap); from 1680px wide the toolbar, 964px at most and centred, clears both
   columns and they may run to the bottom of the screen. */
:root {
  --hud-top: 0px;
  --hud-bottom: 8.75rem;
}

body.event-active {
  --hud-top: 2rem;
}

@media (min-width: 1680px) {
  :root {
    --hud-bottom: 1rem;
  }
}

.hud-col {
  position: absolute;
  top: calc(1rem + var(--hud-top));
  bottom: var(--hud-bottom);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  pointer-events: none;
}

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

.hud-col-left {
  left: 1rem;
  align-items: flex-start;
}

.hud-col-right {
  right: 1rem;
  align-items: flex-end;
}

/* Repair table: the header and each row are separate grids, so the number
   columns have fixed widths to line up. 3.75rem holds the widest Repair header
   (German, 57px); the auto-repair header wraps to two lines inside 5rem. */
.repair-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.75rem 5rem;
  column-gap: 0.25rem;
}

.repair-grid > * {
  overflow-wrap: anywhere;
}

#sandboxPanel,
#objectivesPanel {
  margin-top: auto;
}

#timeControls {
  top: calc(1rem + var(--hud-top));
}

#intervention-warnings {
  top: calc(5rem + var(--hud-top));
}

/* Narrower than this, the 405px time controls reach the 320px stats panel and
   the right column's first panel; start both columns below their row. */
@media (max-width: 1099px) {
  .hud-col {
    top: calc(5.25rem + var(--hud-top));
  }
}

/* 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: calc(0.5rem + var(--hud-top));
    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: calc(4rem + var(--hud-top));
    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: calc(7.25rem + var(--hud-top));
    left: 0.5rem;
    right: 0.5rem;
    transform: none;
  }

  #statsPanel,
  #objectivesPanel,
  #sandboxPanel,
  #detailsPanel,
  #healthPanel,
  #metricsPanel,
  #financesPanel {
    position: fixed;
    top: calc(7.25rem + var(--hud-top));
    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;
  }
}