/* =========================================================
   GUARDIANOS V20 — SIMULATION COLLISION + COLOR POLISH
========================================================= */

/* -------------------------
   Narrative / control lanes
------------------------- */

.simulation-narrative {
  bottom: 158px;
  width: min(560px, calc(100% - 44px));
}

.simulation-controls {
  bottom: 84px;
}

.simulation-narrative,
.simulation-controls,
.system-strip {
  isolation: isolate;
}

/* -------------------------
   HUD positioning
------------------------- */

.alert-card {
  top: 40%;
  left: 46%;
  width: 230px;
}

.cctv-card {
  top: 24%;
  left: 27%;
  width: 255px;
}

.askari-card {
  right: 5%;
  top: 21%;
  width: 285px;
}

.command-card {
  right: 12%;
  top: 37%;
  width: 280px;
}

.officer-card {
  left: 7%;
  right: auto;
  bottom: 24%;
  width: 235px;
}

.response-card {
  right: 7%;
  bottom: 24%;
  width: 220px;
}

.client-notification {
  right: 5%;
  top: 21%;
  width: 300px;
}

/* Each visible phase feels intentional rather than stacked. */
.guardian[data-phase="detected"] .alert-card.show,
.guardian[data-phase="verified"] .cctv-card.show,
.guardian[data-phase="assessed"] .askari-card.show,
.guardian[data-phase="authorizing"] .command-card.show,
.guardian[data-phase="responding"] .officer-card.show,
.guardian[data-phase="responding"] .response-card.show {
  z-index: 34;
}

/* Cards get stage-colored top glows. */
.hud-card::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 1px;
  opacity: .55;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(92,188,246,.42), transparent);
}

.alert-card::after {
  background: linear-gradient(90deg, transparent, rgba(255,81,87,.72), transparent);
}

.command-card::after,
.officer-card::after,
.response-card::after {
  background: linear-gradient(90deg, transparent, rgba(62,208,154,.52), transparent);
}

/* -------------------------
   Simulation controls
------------------------- */

.sim-control {
  position: relative;
  overflow: hidden;
}

.sim-control::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}

.sim-control:hover::after {
  opacity: 1;
}

/* RED = initiate / incident */
#triggerIncident {
  border-color: rgba(255,81,87,.18);
  color: #d8a3a5;
  background:
    linear-gradient(180deg, rgba(49,16,21,.55), rgba(15,14,19,.66));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02),
    0 0 0 1px rgba(255,81,87,.025);
}

#triggerIncident .sim-control-icon {
  color: #ff7479;
  text-shadow: 0 0 14px rgba(255,81,87,.42);
}

#triggerIncident::after {
  background: linear-gradient(120deg, transparent, rgba(255,81,87,.08), transparent);
}

#triggerIncident:hover {
  color: #ffe2e3;
  border-color: rgba(255,81,87,.38);
  background:
    linear-gradient(180deg, rgba(75,20,27,.70), rgba(27,12,17,.72));
  box-shadow:
    0 14px 30px rgba(0,0,0,.18),
    0 0 24px rgba(255,81,87,.08);
}

/* GREEN = safe / replay / ready */
#restartSimulation {
  border-color: rgba(62,208,154,.17);
  color: #a5cfc0;
  background:
    linear-gradient(180deg, rgba(15,52,41,.48), rgba(8,22,19,.64));
}

#restartSimulation .sim-control-icon {
  color: #57d5a6;
  text-shadow: 0 0 14px rgba(62,208,154,.35);
}

#restartSimulation::after {
  background: linear-gradient(120deg, transparent, rgba(62,208,154,.08), transparent);
}

#restartSimulation:hover {
  color: #dcf8ed;
  border-color: rgba(62,208,154,.36);
  background:
    linear-gradient(180deg, rgba(18,75,55,.64), rgba(8,33,25,.72));
  box-shadow:
    0 14px 30px rgba(0,0,0,.18),
    0 0 24px rgba(62,208,154,.07);
}

/* Pause stays neutral/amber so danger and safe states remain meaningful. */
#pauseSimulation {
  border-color: rgba(240,178,75,.12);
}

#pauseSimulation:hover {
  border-color: rgba(240,178,75,.27);
  background: rgba(64,44,14,.30);
}

#pauseSimulation .sim-control-icon {
  color: #d6aa62;
}

/* Hero replay gets a confident green highlight. */
#replaySimulation {
  border-color: rgba(62,208,154,.18);
  background:
    linear-gradient(135deg, rgba(22,132,96,.95), rgba(13,91,67,.95));
  box-shadow:
    0 16px 36px rgba(0,0,0,.18),
    0 0 26px rgba(62,208,154,.075);
}

#replaySimulation:hover {
  border-color: rgba(62,208,154,.36);
  box-shadow:
    0 20px 42px rgba(0,0,0,.22),
    0 0 34px rgba(62,208,154,.12);
}

/* Portal access reads as secure/ready rather than another generic blue button. */
.portal-access-trigger {
  border-color: rgba(62,208,154,.13);
}

.portal-access-trigger::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3ed09a;
  box-shadow: 0 0 10px rgba(62,208,154,.45);
}

.portal-access-trigger:hover,
.portal-access.open .portal-access-trigger {
  border-color: rgba(62,208,154,.28);
  box-shadow:
    0 0 0 1px rgba(62,208,154,.025) inset,
    0 0 22px rgba(62,208,154,.055);
}

/* -------------------------
   Medium screens
------------------------- */

@media (max-width: 1180px) and (min-width: 781px) {
  .askari-card {
    right: 3%;
    width: 270px;
  }

  .command-card {
    right: 5%;
    top: 39%;
    width: 265px;
  }

  .officer-card {
    left: 4%;
    bottom: 25%;
    width: 220px;
  }

  .response-card {
    right: 4%;
    bottom: 25%;
    width: 210px;
  }

  .cctv-card {
    left: 22%;
    width: 245px;
  }

  .simulation-narrative {
    bottom: 156px;
    width: min(500px, calc(100% - 38px));
  }

  .simulation-controls {
    max-width: calc(100% - 32px);
  }

  .sim-control {
    min-width: 112px;
  }
}

/* -------------------------
   Mobile / narrow screens
------------------------- */

@media (max-width: 780px) {
  /* Narrative belongs to the top lane on mobile; controls own the bottom lane. */
  .simulation-narrative {
    left: 18px;
    right: 18px;
    top: 136px;
    bottom: auto;
    width: auto;
    transform: none;
    padding: 10px 12px;
  }

  .simulation-narrative.story-pulse {
    transform: translateY(-2px);
  }

  .simulation-autoplay-badge {
    top: 91px;
  }

  .simulation-controls {
    left: 12px;
    right: 12px;
    bottom: 77px;
    width: auto;
    transform: none;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  .simulation-controls::-webkit-scrollbar {
    display: none;
  }

  .sim-control {
    flex: 0 0 auto;
    min-width: 122px;
  }

  .simulation-clock {
    flex: 0 0 90px;
  }

  /* Mobile phases use a single-card presentation. JS hands one card to the next. */
  .hud-card {
    left: 18px !important;
    right: 18px !important;
    top: auto !important;
    bottom: 150px !important;
    width: auto !important;
    max-width: none !important;
    max-height: 255px !important;
    overflow: auto;
  }

  .client-notification {
    left: 18px;
    right: 18px;
    top: auto;
    bottom: 150px;
    width: auto;
  }

  .contained-panel {
    top: 48%;
    width: calc(100% - 36px);
  }
}

/* Short laptops: prevent bottom HUD from touching controls. */
@media (min-width: 781px) and (max-height: 760px) {
  .simulation-narrative {
    bottom: 150px;
  }

  .officer-card,
  .response-card {
    bottom: 27%;
  }

  .command-card {
    top: 33%;
  }

  .askari-card {
    top: 18%;
  }
}

/* Smallest phones: simplify the text rail. */
@media (max-width: 480px) {
  .simulation-narrative {
    top: 128px;
  }

  .simulation-narrative small {
    display: none;
  }

  .simulation-narrative {
    grid-template-columns: 1fr;
  }

  .simulation-narrative span {
    font-size: 7.5px;
  }

  .hud-card,
  .client-notification {
    bottom: 148px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sim-control,
  .portal-access-trigger {
    transition: none !important;
  }
}