/* =========================================================
   INVESTIGATOR DASHBOARD
   Dropped Dead Family Asylum
========================================================= */

:root {
  --asylum-black: #050505;
  --panel-black: #0b0b0b;
  --panel-dark: #111111;
  --panel-light: #171717;

  --asylum-green: #15fb00;
  --asylum-green-dark: #0d9700;
  --asylum-green-soft: rgba(21, 251, 0, 0.12);

  --text-white: #f4f4f4;
  --text-soft: #bdbdbd;
  --text-muted: #7b7b7b;

  --border-dark: #292929;
  --border-green: rgba(21, 251, 0, 0.4);

  --blue: #3c9dff;
  --purple: #b765ff;
  --gold: #f6c945;
  --orange: #ff9d22;
  --red: #ff433d;

  --sidebar-width: 300px;
  --radius-small: 5px;
  --radius-medium: 9px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(
      circle at 65% 0%,
      rgba(21, 251, 0, 0.05),
      transparent 28%
    ),
    linear-gradient(135deg, #050505, #090909 55%, #050505);
  color: var(--text-white);
  font-family:
    Arial,
    Helvetica,
    sans-serif;
}

body.sidebar-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

/* =========================================================
   SIDEBAR
========================================================= */

.investigator-sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;

  width: var(--sidebar-width);
  overflow-y: auto;

  background:
    linear-gradient(
      180deg,
      rgba(10, 10, 10, 0.98),
      rgba(4, 4, 4, 0.99)
    );

  border-right: 1px solid var(--border-dark);
  box-shadow: 20px 0 45px rgba(0, 0, 0, 0.4);
}

.sidebar-logo {
  min-height: 85px;
  padding: 18px 18px;
  border-bottom: 1px solid #202020;
}

.sidebar-logo a {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-icon {
  display: grid;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  place-items: center;

  color: var(--asylum-green);
  font-size: 2rem;

  border: 1px solid rgba(21, 251, 0, 0.35);
  border-radius: 50%;
  box-shadow:
    inset 0 0 18px rgba(21, 251, 0, 0.12),
    0 0 12px rgba(21, 251, 0, 0.08);
}

.sidebar-logo span {
  display: block;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.logo-white {
  color: #f0f0f0;
}

.logo-green {
  margin-top: 4px;
  color: var(--asylum-green);
}

.sidebar-logo small {
  display: block;
  margin-top: 7px;
  color: #8a8a8a;
  font-size: 0.61rem;
  letter-spacing: 3px;
}

.close-sidebar-button {
  display: none;
}

.investigator-identity {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 20px 18px;
  border-bottom: 1px solid #202020;
}

.identity-avatar {
  width: 57px;
  height: 57px;
  overflow: hidden;
  flex-shrink: 0;

  border: 1px solid var(--border-green);
  border-radius: 50%;
}

.identity-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.identity-copy span,
.identity-copy strong,
.identity-copy small {
  display: block;
}

.identity-copy span {
  color: var(--asylum-green);
  font-size: 0.7rem;
  font-weight: 800;
}

.identity-copy strong {
  margin: 4px 0;
  font-size: 1rem;
}

.identity-copy small {
  color: #7ecf55;
}

.sidebar-section-label {
  padding: 16px 20px 7px;
  color: #666;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 1.8px;
}

.sidebar-navigation {
  display: grid;
  gap: 3px;
  padding: 0 8px;
}

.sidebar-navigation a {
  display: flex;
  align-items: center;
  gap: 13px;

  min-height: 46px;
  padding: 0 13px;

  color: #c5c5c5;
  border: 1px solid transparent;
  border-radius: 5px;

  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.sidebar-navigation a i {
  width: 22px;
  color: #9e9e9e;
  text-align: center;
}

.sidebar-navigation a:hover {
  color: white;
  background: rgba(255, 255, 255, 0.04);
  transform: translateX(2px);
}

.sidebar-navigation a:hover i {
  color: var(--asylum-green);
}

.sidebar-navigation a.active {
  color: var(--asylum-green);
  background:
    linear-gradient(
      90deg,
      rgba(21, 251, 0, 0.17),
      rgba(21, 251, 0, 0.05)
    );
  border-color: rgba(21, 251, 0, 0.28);
}

.sidebar-navigation a.active i {
  color: var(--asylum-green);
}

.sidebar-environment-card {
  margin: 22px 14px;
  padding: 16px;

  background:
    linear-gradient(
      145deg,
      rgba(21, 251, 0, 0.08),
      rgba(0, 0, 0, 0.8)
    );

  border: 1px solid rgba(21, 251, 0, 0.25);
  border-radius: 7px;
}

.sidebar-environment-card .mini-heading {
  display: block;
  margin-bottom: 8px;
  color: var(--asylum-green);
  font-size: 0.65rem;
  font-weight: 900;
}

.sidebar-environment-card strong {
  display: block;
  margin-bottom: 7px;
}

.sidebar-environment-card p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.78rem;
  line-height: 1.5;
}

.mini-lock {
  margin-top: 12px;
  color: #9b9b9b;
  font-size: 0.72rem;
}

.mini-lock i {
  margin-right: 5px;
  color: var(--asylum-green);
}

.sidebar-logout {
  display: flex;
  align-items: center;
  gap: 12px;

  width: calc(100% - 28px);
  min-height: 44px;
  margin: 0 14px 25px;
  padding: 0 14px;

  color: #c5c5c5;
  background: transparent;
  border: 1px solid #252525;
  border-radius: 5px;
  cursor: pointer;
}

.sidebar-logout:hover {
  color: white;
  border-color: rgba(255, 255, 255, 0.2);
}

/* =========================================================
   PAGE SHELL
========================================================= */

.dashboard-shell {
  min-height: 100vh;
  margin-left: var(--sidebar-width);
}

/* =========================================================
   HEADER
========================================================= */

.dashboard-header {
  position: relative;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;

  min-height: 500px;
  padding: 24px 28px;
  overflow: hidden;

  background-image:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.42) 34%,
      rgba(0, 0, 0, 0.12) 68%,
      rgba(0, 0, 0, 0.24) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.02) 0%,
      rgba(0, 0, 0, 0.12) 55%,
      rgba(0, 0, 0, 0.78) 100%
    ),
    url("../assets/investigator/investigator-dashboard-header.png");

  background-size:
    cover,
    cover,
    cover;

  background-position:
    center,
    center,
    center 44%;

  background-repeat: no-repeat;

  border-bottom: 1px solid #242424;

  box-shadow:
    inset 0 -35px 42px rgba(0, 0, 0, 0.62);
}

.dashboard-heading,
.dashboard-header-actions,
.mobile-menu-button {
  position: relative;
  z-index: 2;
}

.dashboard-heading {
  position: relative;
  z-index: 2;

  max-width: 710px;
  margin-top: 12px;
}

.dashboard-heading .eyebrow {
  color: var(--asylum-green);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 2px;
}

.dashboard-heading h1 {
  margin: 5px 0;
  color: #f5f5f5;
  font-size: clamp(1.65rem, 2.5vw, 2.65rem);
  line-height: 1;
  text-transform: uppercase;
}

.dashboard-heading p {
  margin: 8px 0 0;
  color: #76cb55;
  font-size: 0.86rem;
  line-height: 1.5;
}

.dashboard-header-actions {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;

  margin-top: 10px;
}

.enter-dating-site-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 43px;
  padding: 0 15px;

  color: #071000;
  background: var(--asylum-green);

  border: 1px solid var(--asylum-green);
  border-radius: 5px;

  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;

  box-shadow: 0 0 18px rgba(21, 251, 0, 0.13);
}

.enter-dating-site-button:hover {
  background: #5cff4e;
}

.header-zombiebucks {
  display: flex;
  align-items: center;
  gap: 9px;

  min-height: 43px;
  padding: 0 14px;

  background: #0e0e0e;
  border: 1px solid #2b2b2b;
  border-radius: 5px;
}

.header-zombiebucks i {
  color: var(--asylum-green);
}

.header-zombiebucks strong,
.header-zombiebucks span {
  display: block;
}

.header-zombiebucks strong {
  font-size: 0.95rem;
}

.header-zombiebucks span {
  color: #868686;
  font-size: 0.58rem;
  text-transform: uppercase;
}

.notification-button {
  position: relative;

  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;

  color: white;
  background: #0e0e0e;
  border: 1px solid #2b2b2b;
  border-radius: 5px;
  cursor: pointer;
}

.notification-button span {
  position: absolute;
  top: -7px;
  right: -7px;

  display: grid;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  place-items: center;

  color: #071000;
  background: var(--asylum-green);
  border-radius: 999px;

  font-size: 0.68rem;
  font-weight: 900;
}

.mobile-menu-button {
  display: none;
}

/* =========================================================
   DASHBOARD LAYOUT
========================================================= */

.dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 325px;
  gap: 16px;

  max-width: 1680px;
  margin: 0 auto;
  padding: 18px;
}

.dashboard-main-column,
.dashboard-right-column {
  display: grid;
  align-content: start;
  gap: 16px;
}

.dashboard-panel,
.side-panel {
  background:
    linear-gradient(
      145deg,
      rgba(17, 17, 17, 0.97),
      rgba(7, 7, 7, 0.99)
    );

  border: 1px solid #2d2d2d;
  border-radius: var(--radius-medium);
  box-shadow:
    0 15px 30px rgba(0, 0, 0, 0.25),
    inset 0 1px rgba(255, 255, 255, 0.015);
}

/* =========================================================
   PANEL TITLE
========================================================= */

.panel-title {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;

  padding: 16px 20px 11px;
}

.panel-title span {
  height: 1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(21, 251, 0, 0.6)
    );
}

.panel-title span:last-child {
  background:
    linear-gradient(
      90deg,
      rgba(21, 251, 0, 0.6),
      transparent
    );
}

.panel-title h2 {
  margin: 0;
  color: var(--asylum-green);
  font-size: 1.3rem;
  text-align: center;
  text-transform: uppercase;
}

/* =========================================================
   INVESTIGATION STATISTICS
========================================================= */

.investigation-stats {
  display: grid;
  grid-template-columns: 1.45fr repeat(5, 1fr);
  padding: 8px 15px 15px;
}

.case-file {
  display: flex;
  gap: 10px;

  min-width: 0;
  min-height: 130px;
  padding: 15px;

  border-right: 1px solid #292929;
}

.case-file:last-child {
  border-right: 0;
}

.stat-icon {
  flex-shrink: 0;
  color: var(--asylum-green);
  font-size: 1.45rem;
}

.stat-content {
  min-width: 0;
}

.stat-content > span {
  display: block;
  min-height: 31px;
  color: var(--text-soft);
  font-size: 0.67rem;
  line-height: 1.4;
  text-transform: uppercase;
}

.stat-content strong {
  display: block;
  margin-top: 6px;
  color: var(--asylum-green);
  font-size: 1.8rem;
}

.stat-content strong small {
  color: #8c8c8c;
  font-size: 0.72rem;
}

.stat-content > small {
  color: #999;
  font-size: 0.7rem;
}

.progress-track {
  width: 100%;
  height: 7px;
  margin: 11px 0 7px;

  overflow: hidden;
  background: #242424;
  border-radius: 999px;
}

.progress-fill {
  height: 100%;
  background:
    linear-gradient(
      90deg,
      var(--asylum-green-dark),
      var(--asylum-green)
    );
}

.purple-icon,
.purple-number {
  color: var(--purple) !important;
}

.blue-icon,
.blue-number {
  color: var(--blue) !important;
}

.gold-icon,
.gold-number {
  color: var(--gold) !important;
}

.panel-note {
  padding: 9px 18px;
  color: #838383;
  background: rgba(255, 255, 255, 0.018);
  border-top: 1px solid #262626;

  font-size: 0.72rem;
  text-align: center;
}

.panel-note i {
  margin-right: 7px;
  color: var(--asylum-green);
}

/* =========================================================
   MISSIONS
========================================================= */

.missions-panel {
  padding: 16px;
}

.missions-heading-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.section-kicker {
  color: var(--asylum-green);
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 1.3px;
}

.missions-heading-row h2 {
  margin: 5px 0 0;
  font-size: 1.35rem;
  text-transform: uppercase;
}

.missions-heading-row > a {
  color: var(--asylum-green);
  font-size: 0.72rem;
}

.missions-heading-row > a i {
  margin-left: 6px;
}

.mission-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  margin: 17px 0 13px;
}

.mission-filter {
  min-height: 35px;
  padding: 0 15px;

  color: #b7b7b7;
  background: #0c0c0c;
  border: 1px solid #303030;
  border-radius: 4px;
  cursor: pointer;

  font-size: 0.68rem;
  text-transform: uppercase;
}

.mission-filter:hover,
.mission-filter.active {
  color: var(--asylum-green);
  background: rgba(21, 251, 0, 0.08);
  border-color: rgba(21, 251, 0, 0.45);
}

.mission-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}

.mission-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 315px;
  overflow: hidden;
  padding: 17px;

  background:
    radial-gradient(
      circle at 90% 8%,
      rgba(21, 251, 0, 0.08),
      transparent 24%
    ),
    linear-gradient(
      145deg,
      rgba(19, 19, 19, 0.98),
      rgba(8, 8, 8, 0.99)
    );

  border: 1px solid #303030;
  border-radius: 7px;
}

.mission-card:hover {
  border-color: rgba(21, 251, 0, 0.4);
}

.highlighted-mission {
  border-color: rgba(60, 157, 255, 0.45);
}

.mission-card-art {
  position: absolute;
  top: 13px;
  right: 15px;

  color: rgba(21, 251, 0, 0.35);
  font-size: 3.1rem;
}

.letter-art {
  color: rgba(255, 67, 61, 0.45);
}

.break-art {
  color: rgba(200, 200, 200, 0.25);
}

.safety-art {
  color: rgba(246, 201, 69, 0.35);
}

.mission-number {
  color: #7a7a7a;
  font-size: 0.65rem;
  text-transform: uppercase;
}

.mission-card h3 {
  max-width: calc(100% - 70px);
  margin: 7px 0;
  color: var(--asylum-green);
  font-size: 1.05rem;
  line-height: 1.1;
  text-transform: uppercase;
}

.mission-card p {
  max-width: calc(100% - 35px);
  margin: 0 0 14px;
  color: #c0c0c0;
  font-size: 0.75rem;
  line-height: 1.55;
}

.status-label {
  align-self: flex-start;
  margin-top: auto;
  padding: 4px 8px;
  border-radius: 3px;

  font-size: 0.57rem;
  font-weight: 900;
  text-transform: uppercase;
}

.completed-label {
  color: var(--asylum-green);
  background: rgba(21, 251, 0, 0.1);
}

.progress-label {
  color: var(--blue);
  background: rgba(60, 157, 255, 0.12);
}

.review-label {
  color: var(--orange);
  background: rgba(255, 157, 34, 0.12);
}

.available-label {
  color: #c6c6c6;
  background: rgba(255, 255, 255, 0.07);
}

.mission-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;

  margin-top: 13px;

  color: #8f8f8f;
  font-size: 0.65rem;
}

.mission-card-footer i {
  margin-right: 5px;
  color: var(--asylum-green);
}

.mission-progress {
  height: 5px;
  margin-top: 8px;
  overflow: hidden;
  background: #242424;
  border-radius: 999px;
}

.mission-progress > div {
  height: 100%;
  background: var(--asylum-green);
}

.review-progress > div {
  background: var(--orange);
}

.mission-action-button {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 37px;
  margin-top: 13px;
  padding: 0 10px;

  color: #071000;
  background: var(--asylum-green);
  border: 1px solid var(--asylum-green);
  border-radius: 4px;
  cursor: pointer;

  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.secondary-action {
  color: var(--asylum-green);
  background: rgba(21, 251, 0, 0.06);
}

.mission-action-button:hover {
  filter: brightness(1.15);
}

.mission-card.mission-hidden {
  display: none;
}

.missions-footer-note {
  margin-top: 13px;
  padding-top: 13px;

  color: #7f7f7f;
  border-top: 1px solid #252525;

  font-size: 0.7rem;
  text-align: center;
}

.missions-footer-note i {
  margin-right: 6px;
  color: var(--asylum-green);
}

/* =========================================================
   RIGHT SIDE PANELS
========================================================= */

.side-panel {
  padding: 16px;
}

.side-panel-label {
  color: var(--asylum-green);
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
}

.side-panel h2 {
  margin: 14px 0 9px;
  color: var(--blue);
  font-size: 1rem;
}

.side-panel p {
  margin: 0;
  color: #bbb;
  font-size: 0.75rem;
  line-height: 1.55;
}

.assignment-checklist {
  display: grid;
  gap: 8px;
  margin: 16px 0;
}

.assignment-checklist label {
  display: flex;
  align-items: start;
  gap: 8px;

  color: #aaa;
  font-size: 0.72rem;
  line-height: 1.4;
}

.assignment-checklist input {
  margin-top: 1px;
  accent-color: var(--asylum-green);
}

.assignment-progress-row {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  color: #9d9d9d;
  font-size: 0.68rem;
  text-transform: uppercase;
}

.assignment-progress-track {
  height: 6px;
  margin: 7px 0 14px;
  overflow: hidden;
  background: #242424;
  border-radius: 999px;
}

.assignment-progress-track > div {
  height: 100%;
  background: var(--blue);
}

.continue-assignment-button {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 40px;
  padding: 0 13px;

  color: #ddecff;
  background: rgba(60, 157, 255, 0.13);
  border: 1px solid rgba(60, 157, 255, 0.5);
  border-radius: 4px;

  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.environment-progress-panel p {
  margin-top: 11px;
}

.environment-levels {
  display: flex;
  align-items: center;
  justify-content: center;

  margin: 20px 0;
}

.environment-levels > span {
  display: grid;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  place-items: center;

  color: #777;
  background: #101010;
  border: 1px solid #3a3a3a;
  border-radius: 50%;

  font-size: 0.72rem;
  font-weight: 900;
}

.environment-levels > span.unlocked,
.environment-levels > span.current {
  color: #061000;
  background: var(--asylum-green);
  border-color: var(--asylum-green);

  box-shadow: 0 0 14px rgba(21, 251, 0, 0.32);
}

.environment-levels > span.current {
  outline: 3px solid rgba(21, 251, 0, 0.15);
}

.environment-levels > i {
  width: 22px;
  height: 2px;
  background: #323232;
}

.environment-preview {
  display: grid;
  grid-template-columns: 65px 1fr auto;
  align-items: center;
  gap: 10px;

  padding: 10px;

  background:
    linear-gradient(
      145deg,
      rgba(21, 251, 0, 0.07),
      rgba(0, 0, 0, 0.75)
    );

  border: 1px solid rgba(21, 251, 0, 0.25);
  border-radius: 5px;
}

.environment-preview-image {
  display: grid;
  height: 55px;
  place-items: center;

  color: var(--asylum-green);
  background: #090d09;
  border: 1px solid #293829;
}

.environment-preview strong,
.environment-preview span {
  display: block;
}

.environment-preview strong {
  color: var(--asylum-green);
  font-size: 0.7rem;
  text-transform: uppercase;
}

.environment-preview span {
  margin-top: 5px;
  color: #8d8d8d;
  font-size: 0.59rem;
}

.environment-lock {
  color: var(--asylum-green);
}

.side-panel-heading-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.side-panel-heading-row a {
  color: var(--asylum-green);
  font-size: 0.58rem;
}

.leaderboard-list {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.leaderboard-list li {
  display: grid;
  grid-template-columns: 28px 35px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;

  min-height: 43px;
  padding: 6px 7px;

  border-bottom: 1px solid #242424;
}

.rank {
  color: #9a9a9a;
  font-size: 0.72rem;
  font-weight: 900;
}

.gold-rank {
  color: var(--gold);
}

.silver-rank {
  color: #c8c8c8;
}

.bronze-rank {
  color: #ca824e;
}

.leader-avatar {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;

  color: var(--asylum-green);
  background: #111;
  border: 1px solid #333;
  border-radius: 50%;

  font-size: 0.6rem;
}

.leaderboard-list strong {
  min-width: 0;
  overflow: hidden;
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-list li > span:last-child {
  color: #9d9d9d;
  font-size: 0.62rem;
}

.current-investigator-rank {
  background: rgba(21, 251, 0, 0.09);
  border: 1px solid rgba(21, 251, 0, 0.3) !important;
  border-radius: 4px;
}

.current-investigator-rank strong,
.current-investigator-rank > span:last-child {
  color: var(--asylum-green) !important;
}

/* =========================================================
   FOOTER
========================================================= */

.investigator-footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;

  max-width: 1680px;
  margin: 0 auto;
  padding: 0 18px 18px;
}

.investigator-footer > div,
.investigator-footer > a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-height: 70px;
  padding: 12px;

  color: #9d9d9d;
  background: #0a0a0a;
  border: 1px solid #262626;

  font-size: 0.72rem;
  text-align: center;
}

.investigator-footer i {
  color: var(--asylum-green);
  font-size: 1.25rem;
}

.investigator-footer strong {
  display: block;
  color: var(--asylum-green);
  font-size: 0.7rem;
  text-transform: uppercase;
}

.critical-issue-link strong {
  color: var(--red);
}

.critical-issue-link i {
  color: var(--red);
}

/* =========================================================
   MOBILE SIDEBAR OVERLAY
========================================================= */

.sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: 990;

  display: none;

  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(2px);
}

.sidebar-overlay.visible {
  display: block;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1350px) {

  .investigation-stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .case-file {
    border-right: 1px solid #292929;
    border-bottom: 1px solid #292929;
  }

  .mission-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .enter-dating-site-button {
    max-width: 170px;
    text-align: center;
  }
}

@media (max-width: 1100px) {

  :root {
    --sidebar-width: 275px;
  }

  .dashboard-layout {
    grid-template-columns: 1fr;
  }

  .dashboard-right-column {
    grid-template-columns: repeat(3, 1fr);
  }

  .dashboard-header {
    align-items: flex-start;
  }

  .dashboard-header-actions {
    flex-wrap: wrap;
  }
}

@media (max-width: 850px) {

  .investigator-sidebar {
    width: min(320px, 88vw);
    transform: translateX(-105%);
    transition: transform 220ms ease;
  }

  .investigator-sidebar.open {
    transform: translateX(0);
  }

  .close-sidebar-button {
    position: absolute;
    top: 12px;
    right: 12px;

    display: grid;
    width: 35px;
    height: 35px;
    place-items: center;

    color: white;
    background: #111;
    border: 1px solid #333;
    border-radius: 50%;
    cursor: pointer;
  }

  .dashboard-shell {
    margin-left: 0;
  }

  .dashboard-header {
    display: grid;
    grid-template-columns: auto 1fr;
    padding: 16px;
  }

  .mobile-menu-button {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;

    color: var(--asylum-green);
    background: #0c0c0c;
    border: 1px solid #303030;
    border-radius: 5px;
    cursor: pointer;
  }

  .dashboard-header-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    width: 100%;
  }

  .enter-dating-site-button {
    max-width: none;
  }

  .dashboard-right-column {
    grid-template-columns: 1fr;
  }

  .investigator-footer {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {

  .dashboard-heading .eyebrow {
    font-size: 0.57rem;
  }

  .dashboard-heading p {
    font-size: 0.77rem;
  }

  .dashboard-header-actions {
    display: grid;
    grid-template-columns: 1fr auto;
  }

  .enter-dating-site-button {
    grid-column: 1 / -1;
  }

  .investigation-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .case-file {
    min-height: 120px;
    padding: 12px;
  }

  .mission-grid {
    grid-template-columns: 1fr;
  }

  .missions-heading-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .mission-filters {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .mission-filter {
    width: 100%;
  }

  .panel-title {
    grid-template-columns: 30px 1fr 30px;
  }

  .panel-title h2 {
    font-size: 1rem;
  }

  .dashboard-layout {
    padding: 10px;
  }

  .investigator-footer {
    padding: 0 10px 10px;
  }
}

@media (max-width: 430px) {

  .investigation-stats {
    grid-template-columns: 1fr;
  }

  .case-file {
    min-height: auto;
    border-right: 0;
  }

  .mission-filters {
    grid-template-columns: 1fr;
  }

  .dashboard-header-actions {
    grid-template-columns: 1fr;
  }

  .header-zombiebucks {
    justify-content: center;
  }

  .notification-button {
    width: 100%;
  }
}

/* =========================================================
   STAGE 1.5 — TEMPORARY FUNCTIONAL ELEMENTS
========================================================= */

.investigator-coming-soon-button {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.investigator-coming-soon-button:hover {
  border-color: rgba(21, 251, 0, 0.55);
}

/* Notification dropdown */

.investigator-notification-wrap {
  position: relative;
}

.investigator-notification-badge:empty {
  display: none;
}

.investigator-notification-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 1500;

  width: min(390px, calc(100vw - 30px));
  overflow: hidden;

  color: #f2f2f2;
  background:
    linear-gradient(
      145deg,
      rgba(16, 16, 16, 0.99),
      rgba(5, 5, 5, 0.99)
    );

  border: 1px solid rgba(21, 251, 0, 0.38);
  border-radius: 7px;

  box-shadow:
    0 24px 65px rgba(0, 0, 0, 0.72),
    0 0 24px rgba(21, 251, 0, 0.08);
}

.investigator-notification-dropdown[hidden] {
  display: none;
}

.investigator-notification-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;

  padding: 14px 15px;

  color: var(--asylum-green);
  border-bottom: 1px solid #292929;

  text-transform: uppercase;
}

.investigator-notification-heading button {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;

  color: #aaa;
  background: #111;
  border: 1px solid #333;
  border-radius: 50%;
  cursor: pointer;
}

.investigator-notification-dropdown article {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 11px;

  padding: 14px 15px;
  border-bottom: 1px solid #222;
}

.investigator-notification-dropdown article > i {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;

  color: var(--asylum-green);
  background: rgba(21, 251, 0, 0.08);
  border: 1px solid rgba(21, 251, 0, 0.22);
  border-radius: 50%;
}

.investigator-notification-dropdown article strong,
.investigator-notification-dropdown article span {
  display: block;
}

.investigator-notification-dropdown article strong {
  font-size: 0.77rem;
}

.investigator-notification-dropdown article span {
  margin-top: 4px;
  color: #a2a2a2;
  font-size: 0.68rem;
  line-height: 1.45;
}

.investigator-notification-note {
  margin: 0;
  padding: 11px 15px;

  color: #727272;
  background: rgba(255, 255, 255, 0.018);

  font-size: 0.63rem;
  line-height: 1.45;
  text-align: center;
}

/* Information modal */

.investigator-info-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 20px;
}

.investigator-info-modal.visible {
  display: flex;
}

.investigator-info-backdrop {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(4px);
}

.investigator-info-card {
  position: relative;
  z-index: 1;

  width: min(520px, 100%);
  padding: 32px 28px;

  color: #f5f5f5;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(21, 251, 0, 0.1),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #111,
      #070707
    );

  border: 1px solid rgba(21, 251, 0, 0.4);
  border-radius: 9px;

  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.8),
    0 0 35px rgba(21, 251, 0, 0.09);

  text-align: center;
}

.investigator-info-close {
  position: absolute;
  top: 12px;
  right: 12px;

  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;

  color: #aaa;
  background: #101010;
  border: 1px solid #343434;
  border-radius: 50%;
  cursor: pointer;
}

.investigator-info-icon {
  display: grid;
  width: 70px;
  height: 70px;
  margin: 0 auto 16px;
  place-items: center;

  color: var(--asylum-green);
  background: rgba(21, 251, 0, 0.08);
  border: 1px solid rgba(21, 251, 0, 0.35);
  border-radius: 50%;

  font-size: 1.8rem;
}

.investigator-info-kicker {
  color: var(--asylum-green);
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 2px;
}

.investigator-info-card h2 {
  margin: 8px 0 11px;
  text-transform: uppercase;
}

.investigator-info-card p {
  margin: 0;
  color: #bcbcbc;
  line-height: 1.65;
}

.investigator-info-accept {
  min-height: 42px;
  margin-top: 22px;
  padding: 0 20px;

  color: #061000;
  background: var(--asylum-green);
  border: 1px solid var(--asylum-green);
  border-radius: 4px;
  cursor: pointer;

  font-weight: 900;
  text-transform: uppercase;
}

.investigator-info-accept:hover {
  filter: brightness(1.15);
}

@media (max-width: 650px) {

  .investigator-notification-dropdown {
    position: fixed;
    top: 75px;
    right: 15px;
    left: 15px;
    width: auto;
  }

  .investigator-info-card {
    padding: 29px 18px 22px;
  }
}

/* =========================================================
   MISSION DIORAMA SYSTEM
========================================================= */

.mission-diorama {
  position: relative;

  min-height: 360px;
  padding: 0;
  overflow: hidden;

  isolation: isolate;

  background: #050505;

  border: 1px solid rgba(21, 251, 0, 0.38);
  border-radius: 8px;

  box-shadow:
    inset 0 0 24px rgba(0, 0, 0, 0.9),
    0 12px 28px rgba(0, 0, 0, 0.35);

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.mission-diorama:hover {
  transform: translateY(-3px);

  border-color: rgba(21, 251, 0, 0.72);

  box-shadow:
    inset 0 0 24px rgba(0, 0, 0, 0.9),
    0 18px 40px rgba(0, 0, 0, 0.52),
    0 0 22px rgba(21, 251, 0, 0.1);
}

/* The actual room artwork */

.mission-diorama-background {
  position: absolute;
  inset: 0;
  z-index: -4;

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  transform: scale(1.03);

  transition:
    transform 700ms ease,
    filter 300ms ease;
}

.mission-diorama:hover .mission-diorama-background {
  transform: scale(1.08);
}

/* Mission 3 artwork */

.mission-diorama-contact .mission-diorama-background {
  background-image:
    url("../assets/investigator/missions/mission-make-contact.png");

  background-position: 61% center;
  background-size: cover;
  background-repeat: no-repeat;

  filter:
    brightness(1.22)
    contrast(1.05)
    saturate(1.08);
}

/* Deep overlay preserving text readability */

.mission-diorama-shadow {
  position: absolute;
  inset: 0;
  z-index: -3;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(2, 2, 2, 0.97) 0%,
      rgba(3, 3, 3, 0.91) 34%,
      rgba(5, 5, 5, 0.46) 66%,
      rgba(2, 2, 2, 0.5) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.14) 0%,
      rgba(0, 0, 0, 0.12) 48%,
      rgba(0, 0, 0, 0.96) 100%
    ),
    radial-gradient(
      ellipse at center,
      transparent 25%,
      rgba(0, 0, 0, 0.5) 100%
    );
}

/* Subtle colored atmosphere */

.mission-diorama-glow {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 76% 45%,
      rgba(255, 145, 45, 0.12),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(21, 251, 0, 0.025),
      transparent 55%
    );
}

/* Inner window/frame effect */

.mission-diorama::before {
  content: "";

  position: absolute;
  z-index: 5;

  pointer-events: none;

  border: 1px solid rgba(203, 163, 83, 0.16);
  border-radius: 5px;

  box-shadow:
    inset 0 0 30px rgba(0, 0, 0, 0.45);
}

/* Mission content */

.mission-diorama-content {
  position: relative;
  z-index: 3;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  width: 100%;
  min-height: 360px;
  padding: 20px;
}

.mission-diorama-top {
  max-width: 69%;
}

.mission-diorama .mission-number {
  display: block;

  margin-bottom: 6px;

  color: #9b9b9b;

  font-size: 0.65rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.mission-diorama h3 {
  max-width: none;
  margin: 0 0 9px;

  color: var(--asylum-green);

  font-size: 1.15rem;
  line-height: 1.05;

  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.95),
    0 0 13px rgba(21, 251, 0, 0.16);
}

.mission-diorama p {
  max-width: 100%;
  margin: 0;

  color: #f1f1f1;

  font-size: 0.76rem;
  line-height: 1.55;

  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.95);
}

.mission-diorama-bottom {
  width: 100%;
  padding-top: 55px;
}

.mission-diorama .status-label {
  position: relative;
  z-index: 6;
}

.mission-diorama .mission-card-footer {
  position: relative;
  z-index: 6;

  margin-top: 13px;

  color: #c5c5c5;

  text-shadow:
    0 2px 3px rgba(0, 0, 0, 1);
}

.mission-diorama .mission-progress {
  position: relative;
  z-index: 6;

  height: 6px;

  background: rgba(88, 88, 88, 0.65);

  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.8);
}

.mission-progress-blue > div {
  background:
    linear-gradient(
      90deg,
      #1476da,
      #39a7ff
    );
}

.mission-diorama .mission-action-button {
  position: relative;
  z-index: 6;

  min-height: 42px;

  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.48),
    0 0 16px rgba(21, 251, 0, 0.08);
}

/* Mobile */

@media (max-width: 650px) {

  .mission-diorama {
    min-height: 340px;
  }

  .mission-diorama-content {
    min-height: 340px;
    padding: 17px;
  }

  .mission-diorama-top {
    max-width: 78%;
  }

  .mission-diorama-contact .mission-diorama-background {
    background-position: 65% center;
  }

  .mission-diorama-shadow {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(0, 0, 0, 0.58) 38%,
      rgba(0, 0, 0, 0.18) 68%,
      rgba(0, 0, 0, 0.28) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.04) 0%,
      rgba(0, 0, 0, 0.08) 52%,
      rgba(0, 0, 0, 0.78) 100%
    ),
    radial-gradient(
      ellipse at center,
      transparent 48%,
      rgba(0, 0, 0, 0.28) 100%
    );
}
}

.mission-diorama-contact .mission-diorama-background {
  filter: brightness(1.35);
}

.mission-diorama-contact .mission-diorama-shadow {
  opacity: 0.55;
}

/* =========================================================
   INDIVIDUAL MISSION DIORAMA ROOMS
   Temporary gradients remain until each PNG is created.
========================================================= */

/* Mission 1 — Enter the Asylum */
.mission-diorama-enter .mission-diorama-background {
  background-image:
    url("../assets/investigator/missions/mission-enter-asylum.png");

  background-position: 40% center;
  background-size: cover;
  background-repeat: no-repeat;

  filter:
    brightness(1.25)
    contrast(1.05)
    saturate(1.08);
}

.mission-diorama-enter .mission-diorama-shadow {
  opacity: 0.55;
}

/* Mission 2 — Find Another Resident */
.mission-diorama-search .mission-diorama-background {
  background-image:
    url("../assets/investigator/missions/mission-find-resident.png");

  background-position: 52% center;
  background-size: cover;
  background-repeat: no-repeat;

  filter:
    brightness(1.25)
    contrast(1.05)
    saturate(1.08);
}

.mission-diorama-search .mission-diorama-shadow {
  opacity: 0.55;
}

/* Mission 4 — Alchemy laboratory */
.mission-diorama-crypt .mission-diorama-background {
  background-image:
    url("../assets/investigator/missions/mission-customize-crypt.png");

  background-position: 67% center;
  background-size: cover;
  background-repeat: no-repeat;

  filter:
    brightness(1.25)
    contrast(1.05)
    saturate(1.08);
}

.mission-diorama-search .mission-diorama-shadow {
  opacity: 0.55;
}

/* Mission 5 — Damaged control room */
.mission-diorama-break .mission-diorama-background {
  background-image:
    url("../assets/investigator/missions/mission-break-asylum.png");

  background-position: 88% center;
  background-size: cover;
  background-repeat: no-repeat;

  filter:
    brightness(1.25)
    contrast(1.05)
    saturate(1.08);
}

.mission-diorama-search .mission-diorama-shadow {
  opacity: 0.55;
}

/* Mission 6 — Security vault */
.mission-diorama-safety .mission-diorama-background {
  background-image:
    url("../assets/investigator/missions/mission-safety-inspection.png");

  background-position: 92% center;
  background-size: cover;
  background-repeat: no-repeat;

  filter:
    brightness(1.25)
    contrast(1.05)
    saturate(1.08);
}

.mission-diorama-search .mission-diorama-shadow {
  opacity: 0.55;
}

/*
 * Apply the working brightness/overlay balance
 * from Mission 3 to all diorama cards.
 */
.mission-diorama .mission-diorama-shadow {
  opacity: 0.55;
}

/* =========================================================
   STAGE 2.1 — CLASSIFIED INVESTIGATOR DOSSIER
========================================================= */

.investigator-dossier {
  position: relative;
  overflow: hidden;
  padding: 18px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(110, 80, 35, 0.11),
      transparent 36%
    ),
    repeating-linear-gradient(
      95deg,
      rgba(255, 255, 255, 0.015) 0,
      rgba(255, 255, 255, 0.015) 1px,
      transparent 1px,
      transparent 10px
    ),
    linear-gradient(
      145deg,
      #181611,
      #0d0c0a 48%,
      #090909
    );

  border: 1px solid rgba(167, 126, 63, 0.48);
  border-radius: 11px;

  box-shadow:
    inset 0 0 0 3px rgba(0, 0, 0, 0.48),
    inset 0 0 45px rgba(0, 0, 0, 0.72),
    0 18px 40px rgba(0, 0, 0, 0.38);
}

/* Subtle scratched metal surface */
.investigator-dossier::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  opacity: 0.28;

  background:
    repeating-linear-gradient(
      118deg,
      transparent 0,
      transparent 20px,
      rgba(255, 255, 255, 0.02) 21px,
      transparent 22px
    ),
    radial-gradient(
      circle at 12% 17%,
      rgba(255, 255, 255, 0.025),
      transparent 12%
    ),
    radial-gradient(
      circle at 82% 76%,
      rgba(255, 255, 255, 0.02),
      transparent 14%
    );
}

.investigator-dossier > * {
  position: relative;
  z-index: 2;
}

/* =========================================================
   DOSSIER CORNERS
========================================================= */

.dossier-corner {
  position: absolute;
  z-index: 8;

  width: 42px;
  height: 42px;

  pointer-events: none;

  border-color: rgba(176, 130, 61, 0.68);
}

.dossier-corner::after {
  content: "";
  position: absolute;

  width: 8px;
  height: 8px;

  background: #3a2b18;
  border: 1px solid #8a6738;
  border-radius: 50%;

  box-shadow:
    inset 0 0 3px rgba(255, 255, 255, 0.18),
    0 2px 5px rgba(0, 0, 0, 0.8);
}

.dossier-corner-top-left {
  top: 7px;
  left: 7px;

  border-top: 2px solid;
  border-left: 2px solid;
  border-top-left-radius: 8px;
}

.dossier-corner-top-left::after {
  top: 6px;
  left: 6px;
}

.dossier-corner-top-right {
  top: 7px;
  right: 7px;

  border-top: 2px solid;
  border-right: 2px solid;
  border-top-right-radius: 8px;
}

.dossier-corner-top-right::after {
  top: 6px;
  right: 6px;
}

.dossier-corner-bottom-left {
  bottom: 7px;
  left: 7px;

  border-bottom: 2px solid;
  border-left: 2px solid;
  border-bottom-left-radius: 8px;
}

.dossier-corner-bottom-left::after {
  bottom: 6px;
  left: 6px;
}

.dossier-corner-bottom-right {
  right: 7px;
  bottom: 7px;

  border-right: 2px solid;
  border-bottom: 2px solid;
  border-bottom-right-radius: 8px;
}

.dossier-corner-bottom-right::after {
  right: 6px;
  bottom: 6px;
}

/* =========================================================
   DOSSIER HEADER
========================================================= */

.dossier-header {
  position: relative;

  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 130px;
  align-items: center;
  gap: 20px;

  min-height: 105px;
  padding: 17px 22px;
  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      rgba(36, 28, 18, 0.82),
      rgba(14, 13, 11, 0.9) 45%,
      rgba(30, 24, 16, 0.8)
    );

  border: 1px solid rgba(151, 111, 55, 0.38);
  border-radius: 7px;

  box-shadow:
    inset 0 0 24px rgba(0, 0, 0, 0.52),
    0 6px 16px rgba(0, 0, 0, 0.24);
}

.dossier-header::after {
  content: "";
  position: absolute;
  right: 10%;
  bottom: 0;
  left: 10%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(21, 251, 0, 0.45),
      transparent
    );
}

.dossier-classified-stamp {
  justify-self: center;

  padding: 7px 11px;

  color: rgba(214, 63, 52, 0.82);

  border: 2px solid rgba(171, 48, 40, 0.68);
  border-radius: 3px;

  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;

  transform: rotate(-7deg);

  opacity: 0.88;
}

.dossier-title-group {
  text-align: center;
}

.dossier-eyebrow {
  display: block;

  color: var(--asylum-green);

  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.dossier-title-group h2 {
  margin: 7px 0 5px;

  color: #d5bc87;

  font-size: clamp(1.4rem, 2vw, 2.05rem);
  letter-spacing: 2px;
  text-transform: uppercase;

  text-shadow:
    0 2px 5px rgba(0, 0, 0, 0.85);
}

.dossier-title-group p {
  margin: 0;

  color: #8f856f;

  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.dossier-clearance {
  justify-self: end;

  min-width: 105px;
  padding: 10px;

  text-align: center;

  background:
    linear-gradient(
      145deg,
      rgba(21, 251, 0, 0.08),
      rgba(0, 0, 0, 0.4)
    );

  border: 1px solid rgba(21, 251, 0, 0.28);
  border-radius: 5px;
}

.dossier-clearance > span {
  display: block;

  color: #7c7c7c;

  font-size: 0.56rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.dossier-clearance strong {
  display: block;
  margin-top: 5px;

  color: var(--asylum-green);

  font-size: 0.72rem;
  text-transform: uppercase;
}

.dossier-clearance b {
  display: block;
  margin-top: 2px;

  font-size: 1.55rem;
}

/* =========================================================
   DOSSIER FILE GRID
========================================================= */

.dossier-files {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;

  padding: 14px 0;
}

/*
 * This intentionally overrides the old
 * .investigation-stats styling.
 */
.investigation-stats.dossier-files {
  padding: 14px 0;
}

.case-file {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;

  min-width: 0;
  min-height: 225px;
  padding: 14px 10px 12px;
  overflow: hidden;

  text-align: center;

  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(21, 251, 0, 0.05),
      transparent 32%
    ),
    linear-gradient(
      165deg,
      rgba(27, 24, 19, 0.96),
      rgba(10, 10, 9, 0.98)
    );

  border: 1px solid rgba(135, 100, 50, 0.4);
  border-radius: 6px;

  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.7),
    0 7px 16px rgba(0, 0, 0, 0.26);

  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.case-file:hover {
  transform: translateY(-3px);

  border-color: rgba(21, 251, 0, 0.52);

  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.72),
    0 12px 24px rgba(0, 0, 0, 0.42),
    0 0 18px rgba(21, 251, 0, 0.07);
}

/* File label strip */
.case-file::before {
  content: "";
  position: absolute;
  top: 0;
  right: 12%;
  left: 12%;

  height: 3px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(21, 251, 0, 0.58),
      transparent
    );
}

/* Fine surface texture */
.case-file::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  pointer-events: none;

  opacity: 0.2;

  background:
    repeating-linear-gradient(
      120deg,
      transparent 0,
      transparent 17px,
      rgba(255, 255, 255, 0.017) 18px,
      transparent 19px
    );
}

.case-file > * {
  position: relative;
  z-index: 2;
}

/* =========================================================
   CASE FILE CONTENT
========================================================= */

.case-file-art {
  display: grid;
  width: 78px;
  height: 78px;
  margin: 5px 0 10px;
  place-items: center;

  color: var(--asylum-green);

  background:
    radial-gradient(
      circle,
      rgba(21, 251, 0, 0.13),
      rgba(21, 251, 0, 0.025) 62%,
      transparent 64%
    );

  border: 1px solid rgba(21, 251, 0, 0.19);
  border-radius: 50%;

  font-size: 2rem;

  box-shadow:
    inset 0 0 16px rgba(21, 251, 0, 0.07);
}

.case-file-heading {
  min-height: 34px;
}

.case-file-heading span {
  display: block;

  color: #c6b68e;

  font-size: 0.67rem;
  line-height: 1.35;
  text-transform: uppercase;
}

.case-file-value {
  margin-top: 8px;
}

.case-file-value strong {
  display: block;

  color: var(--asylum-green);

  font-size: clamp(1.65rem, 2.4vw, 2.3rem);
  line-height: 1;
}

.case-file-value small {
  display: block;
  margin-top: 7px;

  color: #aaa;

  font-size: 0.67rem;
}

.case-file-fraction {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
}

.case-file-fraction strong {
  display: inline;
}

.case-file-fraction span {
  color: #8f8f8f;
  font-size: 0.84rem;
}

.case-file-caption {
  display: block;
  margin-top: 10px;

  color: #797979;

  font-size: 0.58rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.case-file-progress {
  width: 100%;
  margin-top: auto;
  padding-top: 12px;
}

.case-file-progress .progress-track {
  height: 7px;
  margin: 0 0 7px;

  background: rgba(75, 75, 75, 0.48);
}

.case-file-progress small {
  color: #aaa;
  font-size: 0.62rem;
}

/* =========================================================
   INDIVIDUAL CASE-FILE ACCENTS
========================================================= */

.dossier-level-file .case-file-art,
.dossier-missions-file .case-file-art,
.dossier-zombiebucks-file .case-file-art {
  color: var(--asylum-green);
}

.dossier-bugs-file .case-file-art {
  color: var(--purple);

  background:
    radial-gradient(
      circle,
      rgba(183, 101, 255, 0.14),
      rgba(183, 101, 255, 0.025) 62%,
      transparent 64%
    );

  border-color: rgba(183, 101, 255, 0.22);
}

.dossier-reports-file .case-file-art {
  color: var(--blue);

  background:
    radial-gradient(
      circle,
      rgba(60, 157, 255, 0.14),
      rgba(60, 157, 255, 0.025) 62%,
      transparent 64%
    );

  border-color: rgba(60, 157, 255, 0.22);
}

.dossier-rank-file .case-file-art {
  color: var(--gold);

  background:
    radial-gradient(
      circle,
      rgba(246, 201, 69, 0.14),
      rgba(246, 201, 69, 0.025) 62%,
      transparent 64%
    );

  border-color: rgba(246, 201, 69, 0.22);
}

/* =========================================================
   CURRENT OBJECTIVE STRIP
========================================================= */

.dossier-objective-strip {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;

  min-height: 70px;
  padding: 12px 18px;

  background:
    linear-gradient(
      90deg,
      rgba(13, 13, 11, 0.97),
      rgba(28, 25, 17, 0.86),
      rgba(13, 13, 11, 0.97)
    );

  border: 1px solid rgba(135, 100, 50, 0.38);
  border-radius: 6px;

  box-shadow:
    inset 0 0 16px rgba(0, 0, 0, 0.58);
}

.dossier-objective-light {
  display: grid;
  gap: 7px;
}

.dossier-objective-light span {
  width: 10px;
  height: 10px;

  background: var(--asylum-green);
  border-radius: 50%;

  box-shadow:
    0 0 9px rgba(21, 251, 0, 0.65);
}

.dossier-objective-light span:last-child {
  opacity: 0.44;
}

.dossier-objective-icon {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;

  color: var(--asylum-green);

  background: rgba(21, 251, 0, 0.07);
  border: 1px solid rgba(21, 251, 0, 0.2);
  border-radius: 50%;
}

.dossier-objective-copy strong {
  display: block;

  color: var(--asylum-green);

  font-size: 0.72rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.dossier-objective-copy p {
  margin: 5px 0 0;

  color: #aaa;

  font-size: 0.7rem;
  line-height: 1.45;
}

.dossier-case-number {
  color: #776f60;

  font-size: 0.58rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* =========================================================
   DOSSIER RESPONSIVE LAYOUT
========================================================= */

@media (max-width: 1350px) {

  .dossier-files {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .case-file {
    min-height: 205px;
  }
}

@media (max-width: 850px) {

  .dossier-header {
    grid-template-columns: 1fr;
    gap: 13px;

    text-align: center;
  }

  .dossier-classified-stamp,
  .dossier-clearance {
    justify-self: center;
  }

  .dossier-files {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dossier-objective-strip {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .dossier-objective-light,
  .dossier-case-number {
    display: none;
  }
}

@media (max-width: 520px) {

  .investigator-dossier {
    padding: 12px;
  }

  .dossier-files {
    grid-template-columns: 1fr;
  }

  .case-file {
    min-height: 190px;
  }

  .case-file-art {
    width: 68px;
    height: 68px;
  }

  .dossier-objective-strip {
    align-items: start;
  }
}

/* =========================================================
   INVESTIGATOR LEVEL CASE FILE
   Large centered badge layout
========================================================= */

.dossier-level-file {
  display: flex;
  flex-direction: column;
  align-items: center;

  min-height: 340px;
  padding: 18px 12px 14px;

  overflow: hidden;
  text-align: center;
}

/* Heading belongs at the top of the case file */
.investigator-level-heading {
  width: 100%;
  min-height: 0;
  margin: 0 0 8px;
}

.investigator-level-heading span {
  display: block;

  color: #d5bc87;

  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

/* Large badge centered beneath heading */
.investigator-badge-wrap {
  position: relative;

  display: grid;
  width: min(190px, 96%);
  height: 205px;
  margin: 0 auto 8px;
  place-items: center;

  flex-shrink: 0;
  overflow: visible;

  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Fill the entire badge area */
.investigator-badge-image {
  position: absolute;
  inset: 0;

  display: block;
  width: 100%;
  height: 100%;

  object-fit: contain;

  filter:
    drop-shadow(0 9px 11px rgba(0, 0, 0, 0.88))
    drop-shadow(0 0 10px rgba(21, 251, 0, 0.12));

  pointer-events: none;
}

/* Live level number centered in badge opening */
.investigator-badge-level {
  position: absolute;
  z-index: 3;

  top: 51%;
  left: 50%;

  display: grid;
  width: 66px;
  height: 66px;
  place-items: center;

  color: var(--asylum-green);

  font-size: 2.7rem;
  font-weight: 900;
  line-height: 1;

  transform: translate(-50%, -50%);

  text-shadow:
    0 3px 4px rgba(0, 0, 0, 1),
    0 0 9px rgba(21, 251, 0, 0.75),
    0 0 20px rgba(21, 251, 0, 0.32);
}

/* Rank title below badge */
.badge-rank-copy {
  width: 100%;
  margin: 1px 0 5px;

  text-align: center;
}

.badge-rank-copy strong {
  display: block;

  color: #d5bc87 !important;

  font-size: 0.78rem !important;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.8px;
  text-transform: uppercase;

  white-space: nowrap;
}

/* XP remains at bottom */
.investigator-level-progress {
  width: 100%;
  margin-top: auto;
  padding-top: 8px;
}

.investigator-level-progress .progress-track {
  width: 100%;
  height: 7px;
  margin: 0 0 8px;

  overflow: hidden;

  background: rgba(85, 85, 85, 0.55);
  border-radius: 999px;
}

.investigator-level-progress small {
  color: #d0d0d0;
  font-size: 0.69rem;
}

/* Keep the Firebase-compatible level element accessible but invisible */
.visually-hidden {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;

  overflow: hidden !important;

  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;

  border: 0 !important;
}

/* =========================================================
   FINAL INVESTIGATOR LEVEL POSITIONING
   Keep this at the very bottom of the stylesheet
========================================================= */

.dossier-level-file {
  height: 300px;
  min-height: 300px;
  padding: 14px 10px 12px;
}

/* Heading remains at the top */
.investigator-level-heading {
  margin-bottom: 10px;
}

/* Fixed layout space for the enlarged badge */
.investigator-badge-wrap {
  position: relative;

  width: 130px;
  height: 125px;

  /* Moves the complete badge area slightly downward */
  margin: 5px auto 0;

  flex-shrink: 0;
  overflow: visible;
}

/* Enlarge and center only the artwork */
.investigator-badge-image {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 100%;
  height: 100%;

  object-fit: contain;

  transform:
    translate(-50%, -48%)
    scale(1.75);

  transform-origin: center;
}

/* Center the number inside the badge */
.investigator-badge-level {
  position: absolute;
  z-index: 4;

  top: 52%;
  left: 50%;

  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;

  transform: translate(-50%, -50%);

  font-size: 2.2rem;
}

/* Push Field Investigator farther below the badge */
.badge-rank-copy {
  width: 100%;

  /*
   * The image is enlarged beyond its wrapper,
   * so this spacing prevents overlap.
   */
  margin: 22px 0 0;

  text-align: center;
}

.badge-rank-copy strong {
  font-size: 0.78rem !important;
  line-height: 1.2;
  white-space: nowrap;
}

/* Keep XP at the bottom */
.investigator-level-progress {
  width: 100%;
  margin-top: auto;
  padding-top: 8px;
}

/* =========================================================
   MISSIONS COMPLETED — CLIPBOARD ARTWORK
========================================================= */

.dossier-missions-file {
  display: flex;
  flex-direction: column;
  align-items: center;

  height: 300px;
  min-height: 300px;
  padding: 14px 10px 12px;

  overflow: hidden;
  text-align: center;
}

.missions-file-heading {
  width: 100%;
  min-height: 0;
  margin: 0 0 8px;
}

.missions-file-heading span {
  display: block;

  color: #d5bc87;

  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

/* Fixed space reserved for the clipboard */
.missions-clipboard-wrap {
  position: relative;

  width: 130px;
  height: 145px;
  margin: 2px auto 5px;

  flex-shrink: 0;
  overflow: visible;
}

/* Enlarge only the clipboard artwork */
.missions-clipboard-image {
  position: absolute;
  top: 50%;
  left: 50%;

  display: block;
  width: 100%;
  height: 100%;

  object-fit: contain;

  transform:
    translate(-50%, -25%)
    scale(2.0);

  transform-origin: center;

  filter:
    drop-shadow(0 8px 10px rgba(0, 0, 0, 0.86))
    drop-shadow(0 0 8px rgba(21, 251, 0, 0.08));

  pointer-events: none;
}

/* Live number layered over the clipboard */
.missions-clipboard-count {
  position: absolute;
  z-index: 4;

  left: 50%;
  bottom: -30px;

  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;

  width: 100%;

  transform: translateX(-50%);
}

.missions-clipboard-count strong {
  color: var(--asylum-green);

  font-size: 2rem;
  font-weight: 900;
  line-height: 1;

  text-shadow:
    0 2px 3px rgba(0, 0, 0, 1),
    0 0 8px rgba(21, 251, 0, 0.55);
}

.missions-clipboard-count span {
  color: #d2d2d2;

  font-size: 0.9rem;
  font-weight: 700;

  text-shadow:
    0 2px 3px rgba(0, 0, 0, 1);
}

.missions-file-caption {
  margin-top: auto;

  color: #797979;

  font-size: 0.58rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

/* =========================================================
   ZOMBIEBUCKS EARNED — GLOWING COIN STACK
========================================================= */

.dossier-zombiebucks-file {
  display: flex;
  flex-direction: column;
  align-items: center;

  height: 300px;
  min-height: 300px;
  padding: 14px 10px 12px;

  overflow: hidden;
  text-align: center;
}

.zombiebucks-file-heading {
  width: 100%;
  min-height: 0;
  margin: 0 0 8px;
}

.zombiebucks-file-heading span {
  display: block;

  color: #d5bc87;

  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

/* Fixed area for the artwork */
.zombiebucks-stack-wrap {
  position: relative;

  width: 135px;
  height: 145px;
  margin: 13px auto 4px;

  flex-shrink: 0;
  overflow: visible;
}

/* Enlarge only the image, not the card */
.zombiebucks-stack-image {
  position: absolute;
  top: 50%;
  left: 50%;

  display: block;
  width: 100%;
  height: 100%;

  object-fit: contain;

  transform:
    translate(-50%, -46%)
    scale(1.58);

  transform-origin: center;

  filter:
    drop-shadow(0 10px 13px rgba(0, 0, 0, 0.9))
    drop-shadow(0 0 12px rgba(21, 251, 0, 0.18));

  pointer-events: none;
}

/* Live Firebase amount beneath artwork */
.zombiebucks-live-value {
  width: 100%;
  margin-top: 10px;

  text-align: center;
}

.zombiebucks-live-value strong {
  display: block;

  color: var(--asylum-green);

  font-size: 2rem;
  font-weight: 900;
  line-height: 1;

  text-shadow:
    0 2px 3px rgba(0, 0, 0, 1),
    0 0 9px rgba(21, 251, 0, 0.6);
}

.zombiebucks-file-caption {
  margin-top: auto;

  color: #797979;

  font-size: 0.58rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

/* =========================================================
   BUGS DISCOVERED — PURPLE SPECIMEN JAR
========================================================= */

.dossier-bugs-file {
  display: flex;
  flex-direction: column;
  align-items: center;

  height: 300px;
  min-height: 300px;
  padding: 14px 10px 12px;

  overflow: hidden;
  text-align: center;
}

.bugs-file-heading {
  width: 100%;
  min-height: 0;
  margin: 0 0 7px;
}

.bugs-file-heading span {
  display: block;

  color: #d5bc87;

  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.bugs-jar-wrap {
  position: relative;

  width: 125px;
  height: 155px;
  margin: 2px auto 2px;

  flex-shrink: 0;
  overflow: visible;
}

.bugs-jar-image {
  position: absolute;
  top: 50%;
  left: 50%;

  display: block;
  width: 100%;
  height: 100%;

  object-fit: contain;

  transform:
    translate(-50%, -48%)
    scale(1.25);

  transform-origin: center;

  filter:
    drop-shadow(0 10px 13px rgba(0, 0, 0, 0.9))
    drop-shadow(0 0 13px rgba(183, 101, 255, 0.24));

  pointer-events: none;
}

.bugs-live-value {
  width: 100%;
  margin-top: 2px;

  text-align: center;
}

.bugs-live-value strong {
  display: block;

  color: var(--purple);

  font-size: 2rem;
  font-weight: 900;
  line-height: 1;

  text-shadow:
    0 2px 3px rgba(0, 0, 0, 1),
    0 0 10px rgba(183, 101, 255, 0.55);
}

.bugs-file-caption {
  margin-top: auto;
}


/* =========================================================
   REPORTS ACCEPTED — SEALED EVIDENCE FOLDER
========================================================= */

.dossier-reports-file {
  display: flex;
  flex-direction: column;
  align-items: center;

  height: 300px;
  min-height: 300px;
  padding: 14px 10px 12px;

  overflow: hidden;
  text-align: center;
}

.reports-file-heading {
  width: 100%;
  min-height: 0;
  margin: 0 0 7px;
}

.reports-file-heading span {
  display: block;

  color: #d5bc87;

  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.reports-folder-wrap {
  position: relative;

  width: 130px;
  height: 155px;
  margin: 2px auto 2px;

  flex-shrink: 0;
  overflow: visible;
}

.reports-folder-image {
  position: absolute;
  top: 50%;
  left: 50%;

  display: block;
  width: 100%;
  height: 100%;

  object-fit: contain;

  transform:
    translate(-50%, -48%)
    scale(1.2);

  transform-origin: center;

  filter:
    drop-shadow(0 10px 13px rgba(0, 0, 0, 0.9))
    drop-shadow(0 0 10px rgba(60, 157, 255, 0.12));

  pointer-events: none;
}

.reports-live-value {
  width: 100%;
  margin-top: 2px;

  text-align: center;
}

.reports-live-value strong {
  display: block;

  color: var(--blue);

  font-size: 2rem;
  font-weight: 900;
  line-height: 1;

  text-shadow:
    0 2px 3px rgba(0, 0, 0, 1),
    0 0 10px rgba(60, 157, 255, 0.5);
}

.reports-file-caption {
  margin-top: auto;
}

/* =========================================================
   LEADERBOARD POSITION — AGED BRASS TROPHY
========================================================= */

.dossier-rank-file {
  display: flex;
  flex-direction: column;
  align-items: center;

  height: 300px;
  min-height: 300px;
  padding: 14px 10px 12px;

  overflow: hidden;
  text-align: center;
}

.leaderboard-file-heading {
  width: 100%;
  min-height: 0;
  margin: 0 0 8px;
}

.leaderboard-file-heading span {
  display: block;

  color: #d5bc87;

  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

/* Space reserved for trophy artwork */
.leaderboard-trophy-wrap {
  position: relative;

  width: 125px;
  height: 155px;
  margin: 4px auto 2px;

  flex-shrink: 0;
  overflow: visible;
}

/* Trophy artwork */
.leaderboard-trophy-image {
  position: absolute;
  top: 50%;
  left: 50%;

  display: block;
  width: 100%;
  height: 100%;

  object-fit: contain;

  transform:
    translate(-50%, -47%)
    scale(1.28);

  transform-origin: center;

  filter:
    drop-shadow(0 10px 13px rgba(0, 0, 0, 0.92))
    drop-shadow(0 0 10px rgba(181, 132, 61, 0.18));

  pointer-events: none;
}

/* Live leaderboard number */
.leaderboard-live-value {
  width: 100%;
  margin-top: 2px;

  text-align: center;
}

.leaderboard-position-number {
  display: block;

  color: #d6a95f;

  font-size: 2rem;
  font-weight: 900;
  line-height: 1;

  text-shadow:
    0 2px 3px rgba(0, 0, 0, 1),
    0 0 9px rgba(181, 132, 61, 0.45);
}

.leaderboard-file-caption {
  margin-top: auto;

  color: #797979;

  font-size: 0.58rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

/* =========================================================
   RIGHT PANEL — CURRENT ASSIGNMENT CASE FILE
========================================================= */

.current-assignment-panel {
  position: relative;

  padding: 18px;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 88% 16%,
      rgba(60, 157, 255, 0.1),
      transparent 28%
    ),
    repeating-linear-gradient(
      118deg,
      transparent 0,
      transparent 18px,
      rgba(255, 255, 255, 0.014) 19px,
      transparent 20px
    ),
    linear-gradient(
      150deg,
      rgba(24, 21, 17, 0.98),
      rgba(8, 9, 9, 0.99)
    );

  border: 1px solid rgba(143, 105, 53, 0.48);
  border-radius: 8px;

  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.48),
    inset 0 0 28px rgba(0, 0, 0, 0.7),
    0 14px 30px rgba(0, 0, 0, 0.34);
}

.current-assignment-panel::before {
  content: "";

  position: absolute;
  top: 0;
  right: 14%;
  left: 14%;

  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(60, 157, 255, 0.72),
      transparent
    );
}

.current-assignment-panel::after {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 18% 85%,
      rgba(21, 251, 0, 0.035),
      transparent 26%
    );

  opacity: 0.8;
}

.current-assignment-panel > * {
  position: relative;
  z-index: 2;
}


/* Decorative brass corners */

.assignment-corner {
  position: absolute;
  z-index: 5;

  width: 30px;
  height: 30px;

  pointer-events: none;

  border-color: rgba(176, 130, 61, 0.52);
}

.assignment-corner-top-left {
  top: 7px;
  left: 7px;

  border-top: 1px solid;
  border-left: 1px solid;
}

.assignment-corner-top-right {
  top: 7px;
  right: 7px;

  border-top: 1px solid;
  border-right: 1px solid;
}


/* Panel heading */

.assignment-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;

  padding-bottom: 13px;

  border-bottom: 1px solid rgba(135, 100, 50, 0.28);
}

.assignment-panel-heading .side-panel-label {
  display: block;

  color: var(--asylum-green);

  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.assignment-panel-heading small {
  display: block;
  margin-top: 4px;

  color: #716b60;

  font-size: 0.55rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.assignment-status-light {
  position: relative;

  padding: 5px 8px 5px 19px;

  color: var(--blue);

  background: rgba(60, 157, 255, 0.08);

  border: 1px solid rgba(60, 157, 255, 0.28);
  border-radius: 3px;

  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.assignment-status-light::before {
  content: "";

  position: absolute;
  top: 50%;
  left: 7px;

  width: 6px;
  height: 6px;

  background: var(--blue);
  border-radius: 50%;

  transform: translateY(-50%);

  box-shadow:
    0 0 8px rgba(60, 157, 255, 0.72);
}


/* Mission title and evidence image */

.assignment-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 105px;
  align-items: center;
  gap: 10px;

  min-height: 130px;
  padding: 15px 0 12px;
}

.assignment-intro-copy {
  min-width: 0;
}

.assignment-mission-number {
  display: block;

  color: #837965;

  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.current-assignment-panel .assignment-intro h2 {
  margin: 5px 0 8px;

  color: var(--blue);

  font-size: 1.12rem;
  line-height: 1.1;
  text-transform: uppercase;

  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.95),
    0 0 12px rgba(60, 157, 255, 0.14);
}

.current-assignment-panel .assignment-intro p {
  margin: 0;

  color: #c2c2c2;

  font-size: 0.7rem;
  line-height: 1.55;
}

.assignment-evidence-art {
  position: relative;

  width: 105px;
  height: 112px;
  overflow: hidden;

  background:
    radial-gradient(
      circle,
      rgba(60, 157, 255, 0.08),
      transparent 68%
    );

  border: 1px solid rgba(135, 100, 50, 0.25);
  border-radius: 4px;

  transform: rotate(2deg);

  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.55),
    inset 0 0 16px rgba(0, 0, 0, 0.4);
}

.assignment-evidence-art img {
  display: block;
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: 70% center;

  filter:
    brightness(1.15)
    contrast(1.05)
    saturate(0.95);
}

.assignment-evidence-art::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      145deg,
      transparent 35%,
      rgba(0, 0, 0, 0.35)
    );

  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.48);
}


/* Investigation Steps divider */

.assignment-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;

  margin: 2px 0 12px;
}

.assignment-divider span {
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(135, 100, 50, 0.48)
    );
}

.assignment-divider span:last-child {
  background:
    linear-gradient(
      90deg,
      rgba(135, 100, 50, 0.48),
      transparent
    );
}

.assignment-divider strong {
  color: #8f856f;

  font-size: 0.55rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}


/* Checklist */

.current-assignment-panel .assignment-checklist {
  display: grid;
  gap: 7px;

  margin: 0;
}

.assignment-step {
  position: relative;

  display: grid !important;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center !important;
  gap: 9px !important;

  min-height: 46px;
  padding: 7px 8px;

  color: #9c9c9c;

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.022),
      transparent
    );

  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: 4px;
}

.assignment-step input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;
  pointer-events: none;
}

.assignment-checkbox {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;

  color: #5d5d5d;

  background: #0d0d0d;

  border: 1px solid #393939;
  border-radius: 3px;

  font-size: 0.63rem;
}

.completed-step {
  background:
    linear-gradient(
      90deg,
      rgba(21, 251, 0, 0.075),
      rgba(21, 251, 0, 0.012)
    );

  border-color: rgba(21, 251, 0, 0.16);
}

.completed-step .assignment-checkbox {
  color: #071000;
  background: var(--asylum-green);
  border-color: var(--asylum-green);

  box-shadow:
    0 0 9px rgba(21, 251, 0, 0.25);
}

.assignment-step-copy {
  min-width: 0;
}

.assignment-step-copy strong,
.assignment-step-copy small {
  display: block;
}

.assignment-step-copy strong {
  color: #c7c7c7;

  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.3;
}

.completed-step .assignment-step-copy strong {
  color: #d8d8d8;
}

.assignment-step-copy small {
  margin-top: 3px;

  color: #666;

  font-size: 0.54rem;
  line-height: 1.25;
}


/* Progress block */

.assignment-progress-block {
  margin-top: 14px;
  padding-top: 12px;

  border-top: 1px solid rgba(135, 100, 50, 0.22);
}

.current-assignment-panel .assignment-progress-row {
  display: flex;
  justify-content: space-between;

  margin: 0;

  color: #8f8f8f;

  font-size: 0.59rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.current-assignment-panel .assignment-progress-row strong {
  color: var(--blue);
}

.current-assignment-panel .assignment-progress-track {
  height: 7px;
  margin: 8px 0 6px;

  overflow: hidden;

  background: rgba(73, 73, 73, 0.52);
  border-radius: 999px;

  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.8);
}

.current-assignment-panel .assignment-progress-track > div {
  height: 100%;

  background:
    linear-gradient(
      90deg,
      #126bca,
      #3c9dff
    );

  box-shadow:
    0 0 10px rgba(60, 157, 255, 0.3);
}

.assignment-progress-block > small {
  display: block;

  color: #676767;

  font-size: 0.54rem;
  text-align: right;
}


/* Continue button */

.current-assignment-panel .continue-assignment-button {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 44px;
  margin-top: 14px;
  padding: 0 13px;

  color: #e6f3ff;

  background:
    linear-gradient(
      90deg,
      rgba(20, 88, 155, 0.34),
      rgba(10, 37, 64, 0.78)
    );

  border: 1px solid rgba(60, 157, 255, 0.62);
  border-radius: 4px;

  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;

  box-shadow:
    inset 0 0 15px rgba(60, 157, 255, 0.07),
    0 8px 16px rgba(0, 0, 0, 0.35);

  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.current-assignment-panel .continue-assignment-button span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.current-assignment-panel .continue-assignment-button:hover {
  transform: translateY(-2px);

  background:
    linear-gradient(
      90deg,
      rgba(26, 112, 202, 0.48),
      rgba(12, 49, 87, 0.88)
    );

  border-color: var(--blue);
}


/* Narrow right-column/mobile adjustment */

@media (max-width: 380px) {

  .assignment-intro {
    grid-template-columns: 1fr;
  }

  .assignment-evidence-art {
    width: 100%;
    height: 125px;

    transform: none;
  }
}

/* =========================================================
   RIGHT PANEL — ENVIRONMENT UNLOCK PROGRESS
========================================================= */

.environment-progress-panel {
  position: relative;

  padding: 18px;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(21, 251, 0, 0.085),
      transparent 30%
    ),
    repeating-linear-gradient(
      117deg,
      transparent 0,
      transparent 20px,
      rgba(255, 255, 255, 0.014) 21px,
      transparent 22px
    ),
    linear-gradient(
      150deg,
      rgba(24, 21, 16, 0.98),
      rgba(7, 9, 7, 0.99)
    );

  border: 1px solid rgba(143, 105, 53, 0.48);
  border-radius: 8px;

  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.48),
    inset 0 0 30px rgba(0, 0, 0, 0.72),
    0 14px 30px rgba(0, 0, 0, 0.34);
}

.environment-progress-panel::before {
  content: "";

  position: absolute;
  top: 0;
  right: 14%;
  left: 14%;

  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(21, 251, 0, 0.75),
      transparent
    );
}

.environment-progress-panel::after {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 12% 90%,
      rgba(126, 88, 38, 0.08),
      transparent 27%
    );

  opacity: 0.9;
}

.environment-progress-panel > * {
  position: relative;
  z-index: 2;
}


/* Decorative brass corners */

.environment-corner {
  position: absolute;
  z-index: 5;

  width: 30px;
  height: 30px;

  pointer-events: none;

  border-color: rgba(176, 130, 61, 0.52);
}

.environment-corner-top-left {
  top: 7px;
  left: 7px;

  border-top: 1px solid;
  border-left: 1px solid;
}

.environment-corner-top-right {
  top: 7px;
  right: 7px;

  border-top: 1px solid;
  border-right: 1px solid;
}


/* Heading */

.environment-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;

  padding-bottom: 13px;

  border-bottom: 1px solid rgba(135, 100, 50, 0.28);
}

.environment-panel-heading .side-panel-label {
  display: block;

  color: var(--asylum-green);

  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.environment-panel-heading small {
  display: block;
  margin-top: 4px;

  color: #716b60;

  font-size: 0.54rem;
  letter-spacing: 1.25px;
  text-transform: uppercase;
}

.environment-clearance-status {
  padding: 5px 8px;

  color: var(--asylum-green);

  background: rgba(21, 251, 0, 0.07);

  border: 1px solid rgba(21, 251, 0, 0.28);
  border-radius: 3px;

  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;

  box-shadow:
    inset 0 0 10px rgba(21, 251, 0, 0.04);
}


/* Reward introduction */

.environment-unlock-copy {
  padding: 14px 0 10px;
}

.environment-reward-kicker {
  display: block;

  color: #837965;

  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.environment-progress-panel .environment-unlock-copy h2 {
  margin: 5px 0 7px;

  color: #d5bc87;

  font-size: 1rem;
  line-height: 1.15;
  text-transform: uppercase;

  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.95);
}

.environment-progress-panel .environment-unlock-copy p {
  margin: 0;

  color: #bdbdbd;

  font-size: 0.69rem;
  line-height: 1.5;
}


/* Level pathway */

.environment-level-path {
  display: grid;
  grid-template-columns:
    auto minmax(8px, 1fr)
    auto minmax(8px, 1fr)
    auto minmax(8px, 1fr)
    auto minmax(8px, 1fr)
    auto;
  align-items: start;

  margin: 10px 0 14px;
  padding: 12px 4px 8px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(21, 251, 0, 0.025),
      transparent
    );

  border-top: 1px solid rgba(135, 100, 50, 0.2);
  border-bottom: 1px solid rgba(135, 100, 50, 0.2);
}

.environment-level-node {
  display: grid;
  justify-items: center;
  gap: 5px;
}

.environment-level-medallion {
  position: relative;

  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;

  color: #686868;

  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(255, 255, 255, 0.06),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      #191919,
      #090909
    );

  border: 1px solid #3b3b3b;
  border-radius: 50%;

  font-size: 0.69rem;
  font-weight: 900;

  box-shadow:
    inset 0 0 10px rgba(0, 0, 0, 0.75),
    0 5px 10px rgba(0, 0, 0, 0.35);
}

.environment-level-medallion::before {
  content: "";

  position: absolute;
  inset: 3px;

  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 50%;
}

.environment-level-node small {
  color: #555;

  font-size: 0.48rem;
  letter-spacing: 0.45px;
  text-transform: uppercase;
}

.environment-level-node.unlocked .environment-level-medallion {
  color: #061000;

  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(255, 255, 255, 0.42),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #60ff4e,
      #0cad00 72%
    );

  border-color: var(--asylum-green);

  box-shadow:
    inset 0 0 8px rgba(255, 255, 255, 0.16),
    0 0 12px rgba(21, 251, 0, 0.34),
    0 5px 10px rgba(0, 0, 0, 0.38);
}

.environment-level-node.unlocked small {
  color: #70a466;
}

.environment-level-node.current .environment-level-medallion {
  color: #061000;

  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(255, 255, 255, 0.5),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #7dff6e,
      #15fb00 62%,
      #0b9000
    );

  border-color: #79ff6d;

  outline: 3px solid rgba(21, 251, 0, 0.12);

  box-shadow:
    inset 0 0 8px rgba(255, 255, 255, 0.2),
    0 0 16px rgba(21, 251, 0, 0.62),
    0 5px 12px rgba(0, 0, 0, 0.4);
}

.environment-level-node.current small {
  color: var(--asylum-green);
}

.environment-level-node.final-level .environment-level-medallion {
  color: #9f8250;

  border-color: rgba(176, 130, 61, 0.42);

  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(157, 112, 48, 0.1),
      transparent 52%
    ),
    linear-gradient(
      145deg,
      #1b1813,
      #090909
    );
}

.environment-level-node.final-level .environment-level-medallion i {
  font-size: 0.72rem;
}

.environment-level-connector {
  height: 2px;
  margin-top: 17px;

  background:
    linear-gradient(
      90deg,
      #282828,
      #3b3b3b,
      #282828
    );
}

.environment-level-connector.unlocked {
  background:
    linear-gradient(
      90deg,
      #0d9700,
      var(--asylum-green)
    );

  box-shadow:
    0 0 6px rgba(21, 251, 0, 0.22);
}


/* Progress summary */

.environment-progress-summary {
  padding: 11px 0 14px;
}

.environment-progress-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;

  color: #8d8d8d;

  font-size: 0.57rem;
  letter-spacing: 0.65px;
  text-transform: uppercase;
}

.environment-progress-copy strong {
  color: var(--asylum-green);

  font-size: 0.59rem;
}

.environment-progress-track {
  height: 7px;
  margin: 8px 0 6px;
  overflow: hidden;

  background: rgba(72, 72, 72, 0.5);
  border-radius: 999px;

  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.8);
}

.environment-progress-track > div {
  height: 100%;

  background:
    linear-gradient(
      90deg,
      #0b8500,
      var(--asylum-green)
    );

  box-shadow:
    0 0 10px rgba(21, 251, 0, 0.32);
}

.environment-progress-summary > small {
  display: block;

  color: #666;

  font-size: 0.52rem;
  text-align: right;
}


/* Restricted Archives preview */

.restricted-archives-preview {
  position: relative;

  display: grid;
  grid-template-columns: 94px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;

  width: 100%;
  min-height: 102px;
  padding: 8px;

  color: inherit;
  overflow: hidden;
  text-align: left;
  cursor: pointer;

  background:
    radial-gradient(
      circle at 22% 50%,
      rgba(21, 251, 0, 0.065),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(25, 23, 17, 0.92),
      rgba(5, 7, 5, 0.98)
    );

  border: 1px solid rgba(21, 251, 0, 0.28);
  border-radius: 5px;

  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.58),
    0 8px 18px rgba(0, 0, 0, 0.3);

  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.restricted-archives-preview:hover {
  transform: translateY(-2px);

  border-color: rgba(21, 251, 0, 0.62);

  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.58),
    0 11px 23px rgba(0, 0, 0, 0.4),
    0 0 15px rgba(21, 251, 0, 0.07);
}

.restricted-archives-preview-image {
  position: relative;

  width: 94px;
  height: 82px;
  overflow: hidden;

  background: #070907;
  border: 1px solid rgba(145, 108, 54, 0.36);
  border-radius: 3px;

  box-shadow:
    inset 0 0 14px rgba(0, 0, 0, 0.55);
}

.restricted-archives-preview-image img {
  display: block;
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  filter:
    brightness(1.08)
    contrast(1.08)
    saturate(1.12);
}

.restricted-archives-image-shadow {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      transparent 68%,
      rgba(0, 0, 0, 0.22)
    ),
    linear-gradient(
      180deg,
      transparent 70%,
      rgba(0, 0, 0, 0.24)
    );

  box-shadow:
    inset 0 0 10px rgba(0, 0, 0, 0.32);
}

.restricted-archives-lock-seal {
  position: absolute;
  right: 6px;
  bottom: 6px;

  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;

  color: var(--asylum-green);

  background: rgba(5, 12, 4, 0.92);
  border: 1px solid rgba(21, 251, 0, 0.42);
  border-radius: 50%;

  font-size: 0.62rem;

  box-shadow:
    0 0 10px rgba(21, 251, 0, 0.22);
}

.restricted-archives-preview-copy {
  min-width: 0;
}

.restricted-archives-preview-copy span,
.restricted-archives-preview-copy strong,
.restricted-archives-preview-copy small {
  display: block;
}

.restricted-archives-label {
  color: #80735d;

  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.restricted-archives-preview-copy strong {
  margin-top: 4px;

  color: var(--asylum-green);

  font-size: 0.69rem;
  line-height: 1.25;
  text-transform: uppercase;
}

.restricted-archives-preview-copy small {
  margin-top: 4px;

  color: #8f8f8f;

  font-size: 0.53rem;
  line-height: 1.35;
}

.restricted-archives-requirement {
  margin-top: 7px;

  color: #b39a69 !important;

  font-size: 0.5rem !important;
  letter-spacing: 0.35px;
  text-transform: uppercase;
}

.restricted-archives-requirement i {
  margin-right: 4px;

  color: #c39a52;
}

.restricted-archives-preview-arrow {
  color: #5b5b5b;

  font-size: 0.72rem;

  transition:
    color 160ms ease,
    transform 160ms ease;
}

.restricted-archives-preview:hover
.restricted-archives-preview-arrow {
  color: var(--asylum-green);
  transform: translateX(2px);
}


/* Small right columns and narrow phones */

@media (max-width: 380px) {

  .environment-level-medallion {
    width: 31px;
    height: 31px;
  }

  .environment-level-connector {
    margin-top: 15px;
  }

  .restricted-archives-preview {
  grid-template-columns: 112px minmax(0, 1fr) auto;
}

  .restricted-archives-preview-image {
  width: 112px;
  height: 88px;
}

  .restricted-archives-preview-arrow {
    display: none;
  }
}

/* =========================================================
   RESTRICTED ARCHIVES MODAL PREVIEW
========================================================= */

.investigator-info-card {
  width: min(620px, 100%);
}

.investigator-info-preview {
  position: relative;

  width: 100%;
  height: 235px;
  margin: 0 auto 20px;

  overflow: hidden;

  background: #050705;

  border: 1px solid rgba(21, 251, 0, 0.42);
  border-radius: 6px;

  box-shadow:
    inset 0 0 22px rgba(0, 0, 0, 0.7),
    0 12px 28px rgba(0, 0, 0, 0.45),
    0 0 18px rgba(21, 251, 0, 0.08);
}

.investigator-info-preview[hidden] {
  display: none;
}

.investigator-info-preview img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  filter:
    brightness(1.06)
    contrast(1.08)
    saturate(1.08);

  transform: scale(1.02);
}

.investigator-info-preview-shade {
  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.04) 0%,
      rgba(0, 0, 0, 0.05) 55%,
      rgba(0, 0, 0, 0.68) 100%
    ),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.12),
      transparent 35%,
      transparent 70%,
      rgba(0, 0, 0, 0.18)
    );

  box-shadow:
    inset 0 0 22px rgba(0, 0, 0, 0.42);
}

.investigator-info-preview-lock {
  position: absolute;
  top: 12px;
  right: 12px;

  display: grid;

  width: 42px;
  height: 42px;

  place-items: center;

  color: var(--asylum-green);

  background: rgba(3, 10, 3, 0.9);

  border: 1px solid rgba(21, 251, 0, 0.55);
  border-radius: 50%;

  font-size: 0.95rem;

  box-shadow:
    0 0 14px rgba(21, 251, 0, 0.25);
}

.investigator-info-preview-label {
  position: absolute;
  right: 12px;
  bottom: 11px;
  left: 12px;

  color: #d5bc87;

  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 1.3px;
  text-align: left;
  text-transform: uppercase;

  text-shadow:
    0 2px 4px rgba(0, 0, 0, 1);
}

.investigator-info-preview + .investigator-info-kicker {
  margin-top: 2px;
}

@media (max-width: 650px) {

  .investigator-info-preview {
    height: 185px;
    margin-bottom: 17px;
  }

  .investigator-info-card {
    max-height: calc(100vh - 30px);
    overflow-y: auto;
  }
}

/* =========================================================
   RIGHT PANEL — TOP INVESTIGATORS
========================================================= */

.leaderboard-panel {
  position: relative;

  padding: 18px;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 82% 12%,
      rgba(246, 201, 69, 0.075),
      transparent 28%
    ),
    repeating-linear-gradient(
      118deg,
      transparent 0,
      transparent 19px,
      rgba(255, 255, 255, 0.014) 20px,
      transparent 21px
    ),
    linear-gradient(
      150deg,
      rgba(24, 21, 16, 0.98),
      rgba(8, 8, 7, 0.99)
    );

  border: 1px solid rgba(143, 105, 53, 0.48);
  border-radius: 8px;

  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.48),
    inset 0 0 30px rgba(0, 0, 0, 0.72),
    0 14px 30px rgba(0, 0, 0, 0.34);
}

.leaderboard-panel::before {
  content: "";

  position: absolute;
  top: 0;
  right: 14%;
  left: 14%;

  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(246, 201, 69, 0.72),
      transparent
    );
}

.leaderboard-panel::after {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 12% 92%,
      rgba(21, 251, 0, 0.035),
      transparent 28%
    );
}

.leaderboard-panel > * {
  position: relative;
  z-index: 2;
}


/* Decorative corners */

.leaderboard-corner {
  position: absolute;
  z-index: 5;

  width: 30px;
  height: 30px;

  pointer-events: none;

  border-color: rgba(176, 130, 61, 0.52);
}

.leaderboard-corner-top-left {
  top: 7px;
  left: 7px;

  border-top: 1px solid;
  border-left: 1px solid;
}

.leaderboard-corner-top-right {
  top: 7px;
  right: 7px;

  border-top: 1px solid;
  border-right: 1px solid;
}


/* Heading */

.leaderboard-panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;

  padding-bottom: 13px;

  border-bottom: 1px solid rgba(135, 100, 50, 0.28);
}

.leaderboard-panel-heading .side-panel-label {
  display: block;

  color: var(--asylum-green);

  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.leaderboard-panel-heading small {
  display: block;
  margin-top: 4px;

  color: #716b60;

  font-size: 0.54rem;
  letter-spacing: 1.25px;
  text-transform: uppercase;
}

.leaderboard-view-link {
  display: flex;
  align-items: center;
  gap: 5px;

  padding: 5px 7px;

  color: #a89261;

  background: rgba(167, 126, 63, 0.06);
  border: 1px solid rgba(167, 126, 63, 0.22);
  border-radius: 3px;

  font-size: 0.53rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;

  transition:
    color 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.leaderboard-view-link:hover {
  color: var(--asylum-green);

  background: rgba(21, 251, 0, 0.06);
  border-color: rgba(21, 251, 0, 0.3);
}


/* Intro */

.leaderboard-panel-intro {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 9px;

  margin: 12px 0;
  padding: 8px 9px;

  background:
    linear-gradient(
      90deg,
      rgba(246, 201, 69, 0.055),
      transparent
    );

  border: 1px solid rgba(246, 201, 69, 0.09);
  border-radius: 4px;
}

.leaderboard-panel-intro > i {
  display: grid;

  width: 28px;
  height: 28px;

  place-items: center;

  color: var(--gold);

  background: rgba(246, 201, 69, 0.07);

  border: 1px solid rgba(246, 201, 69, 0.2);
  border-radius: 50%;

  font-size: 0.72rem;
}

.leaderboard-panel .leaderboard-panel-intro p {
  margin: 0;

  color: #8f8f8f;

  font-size: 0.57rem;
  line-height: 1.4;
}


/* Top three ranking list */

.investigator-ranking-list {
  display: grid;
  gap: 7px;

  margin: 0;
  padding: 0;

  list-style: none;
}

.investigator-ranking-row {
  position: relative;

  display: grid;
  grid-template-columns: 42px 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;

  min-height: 67px;
  padding: 8px;

  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025),
      rgba(255, 255, 255, 0.008)
    );

  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 5px;

  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.investigator-ranking-row:hover {
  transform: translateX(2px);
}

.first-place {
  background:
    linear-gradient(
      90deg,
      rgba(246, 201, 69, 0.09),
      rgba(246, 201, 69, 0.012)
    );

  border-color: rgba(246, 201, 69, 0.2);
}

.second-place {
  background:
    linear-gradient(
      90deg,
      rgba(214, 219, 228, 0.06),
      rgba(214, 219, 228, 0.008)
    );

  border-color: rgba(214, 219, 228, 0.13);
}

.third-place {
  background:
    linear-gradient(
      90deg,
      rgba(201, 138, 77, 0.07),
      rgba(201, 138, 77, 0.008)
    );

  border-color: rgba(201, 138, 77, 0.15);
}


/* Rank medallions */

.ranking-medallion {
  position: relative;

  display: grid;
  width: 40px;
  height: 47px;
  place-items: center;

  color: #999;

  background:
    linear-gradient(
      145deg,
      #242424,
      #0c0c0c
    );

  border: 1px solid #444;
  border-radius: 48% 48% 42% 42%;

  box-shadow:
    inset 0 0 10px rgba(0, 0, 0, 0.55),
    0 5px 10px rgba(0, 0, 0, 0.35);
}

.ranking-medallion i {
  font-size: 1rem;
}

.ranking-medallion span {
  position: absolute;
  right: -4px;
  bottom: -3px;

  display: grid;
  width: 18px;
  height: 18px;

  place-items: center;

  color: #060606;

  border-radius: 50%;

  font-size: 0.56rem;
  font-weight: 900;
}

.gold-medallion {
  color: #f8d65d;

  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(255, 255, 255, 0.2),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #795a1e,
      #2e210d
    );

  border-color: rgba(246, 201, 69, 0.65);

  box-shadow:
    inset 0 0 10px rgba(255, 221, 100, 0.08),
    0 0 12px rgba(246, 201, 69, 0.18),
    0 5px 10px rgba(0, 0, 0, 0.4);
}

.gold-medallion span {
  background: #f6c945;
}

.silver-medallion {
  color: #dce0e8;

  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(255, 255, 255, 0.22),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #666b73,
      #24272c
    );

  border-color: rgba(214, 219, 228, 0.55);
}

.silver-medallion span {
  background: #d6dbe4;
}

.bronze-medallion {
  color: #d39358;

  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(255, 255, 255, 0.14),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #77451e,
      #29170d
    );

  border-color: rgba(201, 138, 77, 0.55);
}

.bronze-medallion span {
  background: #c98a4d;
}


/* Avatars */

.ranking-avatar-wrap {
  position: relative;

  width: 36px;
  height: 36px;
}

.ranking-avatar {
  display: grid;

  width: 36px;
  height: 36px;

  place-items: center;

  color: var(--asylum-green);

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(21, 251, 0, 0.08),
      transparent 55%
    ),
    #0c0c0c;

  border: 1px solid rgba(21, 251, 0, 0.25);
  border-radius: 50%;

  font-size: 0.55rem;
  font-weight: 900;

  box-shadow:
    inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.ranking-online-light {
  position: absolute;
  right: 0;
  bottom: 0;

  width: 8px;
  height: 8px;

  background: var(--asylum-green);

  border: 2px solid #0c0c0c;
  border-radius: 50%;

  box-shadow:
    0 0 6px rgba(21, 251, 0, 0.5);
}


/* Name and XP meter */

.ranking-investigator-copy {
  min-width: 0;
}

.ranking-investigator-copy span,
.ranking-investigator-copy strong {
  display: block;
}

.ranking-title {
  color: #6f6759;

  font-size: 0.47rem;
  letter-spacing: 0.75px;
  text-transform: uppercase;
}

.ranking-investigator-copy strong {
  margin-top: 3px;

  overflow: hidden;

  color: #d4d4d4;

  font-size: 0.64rem;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-xp-track {
  height: 3px;
  margin-top: 7px;
  overflow: hidden;

  background: rgba(75, 75, 75, 0.46);
  border-radius: 999px;
}

.ranking-xp-track > div {
  height: 100%;

  background:
    linear-gradient(
      90deg,
      #8a681d,
      var(--gold)
    );
}

.second-place .ranking-xp-track > div {
  background:
    linear-gradient(
      90deg,
      #6a6e76,
      #d6dbe4
    );
}

.third-place .ranking-xp-track > div {
  background:
    linear-gradient(
      90deg,
      #75451f,
      #c98a4d
    );
}


/* XP amount */

.ranking-xp {
  min-width: 43px;

  text-align: right;
}

.ranking-xp strong,
.ranking-xp span {
  display: block;
}

.ranking-xp strong {
  color: #d7d7d7;

  font-size: 0.63rem;
}

.ranking-xp span {
  margin-top: 2px;

  color: #646464;

  font-size: 0.46rem;
  letter-spacing: 0.6px;
}


/* Your position divider */

.current-ranking-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;

  margin: 15px 0 10px;
}

.current-ranking-divider span {
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(21, 251, 0, 0.32)
    );
}

.current-ranking-divider span:last-child {
  background:
    linear-gradient(
      90deg,
      rgba(21, 251, 0, 0.32),
      transparent
    );
}

.current-ranking-divider strong {
  color: var(--asylum-green);

  font-size: 0.5rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}


/* Current investigator row */

.current-investigator-ranking {
  display: grid;
  grid-template-columns: 43px 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;

  min-height: 72px;
  padding: 9px;

  background:
    radial-gradient(
      circle at 15% 50%,
      rgba(21, 251, 0, 0.12),
      transparent 40%
    ),
    linear-gradient(
      90deg,
      rgba(21, 251, 0, 0.1),
      rgba(21, 251, 0, 0.02)
    );

  border: 1px solid rgba(21, 251, 0, 0.36);
  border-radius: 5px;

  box-shadow:
    inset 0 0 14px rgba(21, 251, 0, 0.025),
    0 0 12px rgba(21, 251, 0, 0.045);
}

.current-ranking-position {
  text-align: center;
}

.current-ranking-position span,
.current-ranking-position strong {
  display: block;
}

.current-ranking-position span {
  color: #65955e;

  font-size: 0.45rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.current-ranking-position strong {
  margin-top: 3px;

  color: var(--asylum-green);

  font-size: 0.86rem;
}

.current-ranking-avatar .ranking-avatar {
  color: #061000;
  background: var(--asylum-green);
  border-color: var(--asylum-green);
}

.current-ranking-copy {
  min-width: 0;
}

.current-ranking-copy span,
.current-ranking-copy strong,
.current-ranking-copy small {
  display: block;
}

.current-ranking-copy span {
  color: #62965a;

  font-size: 0.46rem;
  letter-spacing: 0.65px;
  text-transform: uppercase;
}

.current-ranking-copy strong {
  margin-top: 3px;

  color: var(--asylum-green);

  font-size: 0.65rem;
}

.current-ranking-copy small {
  margin-top: 3px;

  color: #727272;

  font-size: 0.48rem;
}

.current-ranking-xp strong {
  color: var(--asylum-green);
}


/* Current rank progress */

.current-ranking-progress {
  margin-top: 10px;
}

.current-ranking-progress-copy {
  display: flex;
  justify-content: space-between;

  color: #686868;

  font-size: 0.49rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.current-ranking-progress-copy strong {
  color: #8fcf80;
}

.current-ranking-progress-track {
  height: 5px;
  margin-top: 6px;
  overflow: hidden;

  background: rgba(70, 70, 70, 0.5);
  border-radius: 999px;
}

.current-ranking-progress-track > div {
  height: 100%;

  background:
    linear-gradient(
      90deg,
      #0b8b00,
      var(--asylum-green)
    );

  box-shadow:
    0 0 8px rgba(21, 251, 0, 0.25);
}


/* Open full leaderboard button */

.open-full-leaderboard {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 42px;
  margin-top: 13px;
  padding: 0 12px;

  color: #d5bc87;

  background:
    linear-gradient(
      90deg,
      rgba(125, 91, 37, 0.2),
      rgba(21, 18, 13, 0.82)
    );

  border: 1px solid rgba(167, 126, 63, 0.42);
  border-radius: 4px;

  font-size: 0.59rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;

  transition:
    transform 160ms ease,
    color 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.open-full-leaderboard span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.open-full-leaderboard span i {
  color: var(--gold);
}

.open-full-leaderboard:hover {
  color: var(--asylum-green);

  background:
    linear-gradient(
      90deg,
      rgba(21, 251, 0, 0.12),
      rgba(9, 25, 7, 0.82)
    );

  border-color: rgba(21, 251, 0, 0.45);

  transform: translateY(-2px);
}


/* Narrow mobile adjustment */

@media (max-width: 380px) {

  .investigator-ranking-row {
    grid-template-columns: 38px 34px minmax(0, 1fr);
  }

  .investigator-ranking-row > .ranking-xp {
    grid-column: 3;
    text-align: left;
  }

  .current-investigator-ranking {
    grid-template-columns: 39px 34px minmax(0, 1fr);
  }

  .current-investigator-ranking > .ranking-xp {
    grid-column: 3;
    text-align: left;
  }
}

.ranking-avatar img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  border-radius: 50%;
}

/* =========================================================
   INVESTIGATOR SIDEBAR — ATMOSPHERIC COMMAND PANEL
========================================================= */

.investigator-sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;

  width: var(--sidebar-width);
  overflow-y: auto;
  overflow-x: hidden;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(21, 251, 0, 0.055),
      transparent 24%
    ),
    repeating-linear-gradient(
      118deg,
      transparent 0,
      transparent 18px,
      rgba(255, 255, 255, 0.012) 19px,
      transparent 20px
    ),
    linear-gradient(
      180deg,
      rgba(12, 12, 11, 0.99),
      rgba(4, 5, 4, 0.995)
    );

  border-right: 1px solid rgba(145, 108, 54, 0.42);

  box-shadow:
    inset -18px 0 30px rgba(0, 0, 0, 0.32),
    20px 0 45px rgba(0, 0, 0, 0.45);
}

.investigator-sidebar::before {
  content: "";

  position: fixed;
  top: 0;
  bottom: 0;
  left: calc(var(--sidebar-width) - 3px);

  width: 2px;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(21, 251, 0, 0.46) 16%,
      rgba(145, 108, 54, 0.32) 52%,
      rgba(21, 251, 0, 0.22) 84%,
      transparent
    );
}


/* =========================================================
   SIDEBAR LOGO
========================================================= */

.sidebar-logo {
  position: relative;

  min-height: 108px;
  padding: 17px 16px;

  background:
    radial-gradient(
      circle at 18% 50%,
      rgba(21, 251, 0, 0.08),
      transparent 32%
    ),
    linear-gradient(
      90deg,
      rgba(26, 23, 17, 0.88),
      rgba(7, 7, 7, 0.95)
    );

  border-bottom: 1px solid rgba(145, 108, 54, 0.28);
}

.sidebar-logo::after {
  content: "";

  position: absolute;
  right: 13%;
  bottom: 0;
  left: 13%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(21, 251, 0, 0.55),
      transparent
    );
}

.sidebar-logo a {
  display: flex;
  align-items: center;
  gap: 13px;
}

.sidebar-logo-emblem {
  position: relative;

  display: grid;
  width: 63px;
  height: 63px;

  flex-shrink: 0;
  place-items: center;

  color: var(--asylum-green);

  background:
    radial-gradient(
      circle,
      rgba(21, 251, 0, 0.14),
      rgba(21, 251, 0, 0.025) 62%,
      transparent 64%
    ),
    #090b09;

  border: 1px solid rgba(21, 251, 0, 0.38);
  border-radius: 50%;

  font-size: 2rem;

  box-shadow:
    inset 0 0 17px rgba(21, 251, 0, 0.08),
    0 0 16px rgba(21, 251, 0, 0.11);
}

.sidebar-logo-emblem::after {
  content: "";

  position: absolute;
  inset: 5px;

  border: 1px solid rgba(167, 126, 63, 0.22);
  border-radius: 50%;
}

.sidebar-logo-copy {
  min-width: 0;
}

.sidebar-logo-copy span {
  display: block;

  line-height: 0.95;
  text-transform: uppercase;
}

.sidebar-logo-copy .logo-white {
  color: #efefef;

  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0.55px;
}

.sidebar-logo-copy .logo-green {
  margin-top: 5px;

  color: var(--asylum-green);

  font-size: 0.94rem;
  font-weight: 900;
  letter-spacing: 0.45px;
}

.sidebar-logo-copy small {
  display: block;
  margin-top: 8px;

  color: #81786a;

  font-size: 0.5rem;
  letter-spacing: 2.3px;
  text-transform: uppercase;
}


/* =========================================================
   INVESTIGATOR IDENTITY
========================================================= */

.investigator-identity {
  position: relative;

  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 12px;

  padding: 17px 16px;

  background:
    linear-gradient(
      90deg,
      rgba(21, 251, 0, 0.04),
      transparent
    );

  border-bottom: 1px solid rgba(145, 108, 54, 0.22);
}

.identity-avatar-wrap {
  position: relative;

  width: 62px;
  height: 62px;
}

.identity-avatar {
  width: 62px;
  height: 62px;

  overflow: hidden;

  background: #080a08;

  border: 1px solid rgba(21, 251, 0, 0.42);
  border-radius: 50%;

  box-shadow:
    inset 0 0 12px rgba(0, 0, 0, 0.65),
    0 0 12px rgba(21, 251, 0, 0.07);
}

.identity-avatar img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.identity-online-light {
  position: absolute;
  right: 2px;
  bottom: 2px;

  width: 11px;
  height: 11px;

  background: var(--asylum-green);

  border: 2px solid #080808;
  border-radius: 50%;

  box-shadow:
    0 0 8px rgba(21, 251, 0, 0.6);
}

.identity-copy {
  min-width: 0;
}

.identity-copy span,
.identity-copy strong,
.identity-copy small {
  display: block;
}

.identity-welcome {
  color: var(--asylum-green);

  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.55px;
  text-transform: uppercase;
}

.identity-copy strong {
  margin: 5px 0 3px;

  overflow: hidden;

  color: #e1e1e1;

  font-size: 0.93rem;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.identity-copy small {
  color: #73b85f;

  font-size: 0.62rem;
}

.identity-clearance {
  display: flex !important;
  align-items: center;
  gap: 5px;

  margin-top: 7px;

  color: #9b8b6b;

  font-size: 0.52rem;
  letter-spacing: 0.45px;
  text-transform: uppercase;
}

.identity-clearance i {
  color: #c39a52;
}


/* =========================================================
   SIDEBAR SECTION LABELS
========================================================= */

.sidebar-section-label {
  position: relative;

  padding: 17px 18px 8px;

  color: #6f695e;

  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.sidebar-section-label::after {
  content: "";

  position: absolute;
  right: 15px;
  bottom: 0;
  left: 18px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(145, 108, 54, 0.34),
      transparent
    );
}

.investigator-section-label {
  margin-top: 10px;

  color: #8b7c60;
}


/* =========================================================
   SIDEBAR NAVIGATION
========================================================= */

.sidebar-navigation {
  display: grid;
  gap: 4px;

  padding: 7px 8px 0;
}

.sidebar-navigation a {
  position: relative;

  display: grid;
  grid-template-columns: 31px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;

  min-height: 46px;
  padding: 0 11px;

  color: #b5b5b5;

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.012),
      transparent
    );

  border: 1px solid transparent;
  border-radius: 5px;

  font-size: 0.77rem;

  transition:
    color 160ms ease,
    background 160ms ease,
    border-color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.sidebar-navigation a::before {
  content: "";

  position: absolute;
  top: 20%;
  bottom: 20%;
  left: 0;

  width: 2px;

  background: transparent;

  transition:
    background 160ms ease,
    box-shadow 160ms ease;
}

.sidebar-navigation a i {
  display: grid;

  width: 29px;
  height: 29px;

  place-items: center;

  color: #8d8d8d;

  background: rgba(255, 255, 255, 0.018);

  border: 1px solid rgba(255, 255, 255, 0.025);
  border-radius: 4px;

  font-size: 0.82rem;

  transition:
    color 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.sidebar-navigation a:hover {
  color: #eeeeee;

  background:
    linear-gradient(
      90deg,
      rgba(21, 251, 0, 0.065),
      rgba(21, 251, 0, 0.01)
    );

  border-color: rgba(21, 251, 0, 0.13);

  transform: translateX(2px);
}

.sidebar-navigation a:hover::before {
  background: rgba(21, 251, 0, 0.75);

  box-shadow:
    0 0 8px rgba(21, 251, 0, 0.34);
}

.sidebar-navigation a:hover i {
  color: var(--asylum-green);

  background: rgba(21, 251, 0, 0.06);
  border-color: rgba(21, 251, 0, 0.16);
}

.sidebar-navigation a.active {
  color: var(--asylum-green);

  background:
    radial-gradient(
      circle at 18% 50%,
      rgba(21, 251, 0, 0.16),
      transparent 50%
    ),
    linear-gradient(
      90deg,
      rgba(21, 251, 0, 0.12),
      rgba(21, 251, 0, 0.025)
    );

  border-color: rgba(21, 251, 0, 0.42);

  box-shadow:
    inset 0 0 15px rgba(21, 251, 0, 0.035),
    0 0 12px rgba(21, 251, 0, 0.035);
}

.sidebar-navigation a.active::before {
  background: var(--asylum-green);

  box-shadow:
    0 0 9px rgba(21, 251, 0, 0.55);
}

.sidebar-navigation a.active i {
  color: #061000;

  background: var(--asylum-green);
  border-color: var(--asylum-green);

  box-shadow:
    0 0 9px rgba(21, 251, 0, 0.25);
}


/* =========================================================
   RESTRICTED ARCHIVES SIDEBAR CARD
========================================================= */

.sidebar-environment-card {
  position: relative;

  display: grid;
  grid-template-columns: 85px minmax(0, 1fr);
  gap: 10px;

  margin: 22px 12px 16px;
  padding: 8px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 20% 50%,
      rgba(21, 251, 0, 0.08),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      rgba(25, 22, 17, 0.95),
      rgba(5, 7, 5, 0.99)
    );

  border: 1px solid rgba(21, 251, 0, 0.3);
  border-radius: 6px;

  box-shadow:
    inset 0 0 17px rgba(0, 0, 0, 0.58),
    0 10px 19px rgba(0, 0, 0, 0.3);
}

.sidebar-environment-image {
  position: relative;

  width: 85px;
  height: 98px;

  overflow: hidden;

  background: #070807;

  border: 1px solid rgba(145, 108, 54, 0.36);
  border-radius: 3px;
}

.sidebar-environment-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  filter:
    brightness(0.98)
    contrast(1.08)
    saturate(1.04);
}

.sidebar-environment-shadow {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      transparent 55%,
      rgba(0, 0, 0, 0.55)
    );

  box-shadow:
    inset 0 0 13px rgba(0, 0, 0, 0.45);
}

.sidebar-environment-lock {
  position: absolute;
  right: 6px;
  bottom: 6px;

  display: grid;

  width: 25px;
  height: 25px;

  place-items: center;

  color: var(--asylum-green);

  background: rgba(5, 12, 4, 0.92);

  border: 1px solid rgba(21, 251, 0, 0.48);
  border-radius: 50%;

  font-size: 0.61rem;

  box-shadow:
    0 0 10px rgba(21, 251, 0, 0.24);
}

.sidebar-environment-copy {
  min-width: 0;
  align-self: center;
}

.sidebar-environment-card .mini-heading {
  display: block;
  margin: 0 0 5px;

  color: #8c806c;

  font-size: 0.47rem;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.sidebar-environment-card strong {
  display: block;

  color: var(--asylum-green);

  font-size: 0.64rem;
  line-height: 1.25;
  text-transform: uppercase;
}

.sidebar-environment-card p {
  margin: 6px 0 0;

  color: #969696;

  font-size: 0.53rem;
  line-height: 1.4;
}

.sidebar-environment-card .mini-lock {
  margin-top: 7px;

  color: #b39a69;

  font-size: 0.49rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.sidebar-environment-card .mini-lock i {
  margin-right: 4px;

  color: #c89e54;
}


/* =========================================================
   LOGOUT BUTTON
========================================================= */

.sidebar-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  width: calc(100% - 24px);
  min-height: 44px;
  margin: 0 12px 24px;
  padding: 0 13px;

  color: #9c9c9c;

  background:
    linear-gradient(
      90deg,
      rgba(255, 67, 61, 0.03),
      transparent
    );

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;

  cursor: pointer;

  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;

  transition:
    color 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.sidebar-logout i {
  color: #a96b67;
}

.sidebar-logout:hover {
  color: #f3f3f3;

  background: rgba(255, 67, 61, 0.07);
  border-color: rgba(255, 67, 61, 0.26);
}


/* =========================================================
   CUSTOM SIDEBAR SCROLLBAR
========================================================= */

.investigator-sidebar {
  scrollbar-width: thin;
  scrollbar-color:
    rgba(21, 251, 0, 0.28)
    rgba(0, 0, 0, 0.2);
}

.investigator-sidebar::-webkit-scrollbar {
  width: 7px;
}

.investigator-sidebar::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.18);
}

.investigator-sidebar::-webkit-scrollbar-thumb {
  background:
    linear-gradient(
      180deg,
      rgba(21, 251, 0, 0.38),
      rgba(145, 108, 54, 0.34)
    );

  border-radius: 999px;
}


/* =========================================================
   MOBILE SIDEBAR ADJUSTMENTS
========================================================= */

@media (max-width: 850px) {

  .investigator-sidebar::before {
    display: none;
  }

  .sidebar-logo {
    padding-right: 54px;
  }

  .close-sidebar-button {
    z-index: 20;

    color: var(--asylum-green);

    background: rgba(9, 12, 9, 0.96);

    border-color: rgba(21, 251, 0, 0.3);
  }
}

@media (max-width: 360px) {

  .sidebar-environment-card {
    grid-template-columns: 74px minmax(0, 1fr);
  }

  .sidebar-environment-image {
    width: 74px;
    height: 90px;
  }
}

/* =========================================================
   INVESTIGATION DIVISION FOOTER CONSOLE
========================================================= */

.investigator-footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;

  max-width: 1680px;
  margin: 0 auto;
  padding: 0 18px 20px;
}


/* =========================================================
   SHARED FOOTER PANEL
========================================================= */

.footer-console-panel {
  position: relative;

  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;

  min-height: 105px;
  padding: 15px 15px;

  overflow: hidden;

  color: #bdbdbd;

  background:
    radial-gradient(
      circle at 12% 50%,
      rgba(21, 251, 0, 0.055),
      transparent 36%
    ),
    repeating-linear-gradient(
      117deg,
      transparent 0,
      transparent 19px,
      rgba(255, 255, 255, 0.014) 20px,
      transparent 21px
    ),
    linear-gradient(
      145deg,
      rgba(24, 21, 16, 0.98),
      rgba(7, 8, 7, 0.995)
    );

  border: 1px solid rgba(143, 105, 53, 0.46);
  border-radius: 7px;

  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.46),
    inset 0 0 25px rgba(0, 0, 0, 0.68),
    0 12px 25px rgba(0, 0, 0, 0.32);

  text-align: left;

  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

a.footer-console-panel {
  cursor: pointer;
}

a.footer-console-panel:hover {
  transform: translateY(-3px);

  border-color: rgba(21, 251, 0, 0.45);

  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.46),
    inset 0 0 25px rgba(0, 0, 0, 0.68),
    0 17px 34px rgba(0, 0, 0, 0.45),
    0 0 15px rgba(21, 251, 0, 0.055);
}


/* Top accent line */

.footer-console-panel::before {
  content: "";

  position: absolute;
  top: 0;
  right: 13%;
  left: 13%;

  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(21, 251, 0, 0.62),
      transparent
    );
}


/* Surface atmosphere */

.footer-console-panel::after {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 86% 20%,
      rgba(126, 88, 38, 0.06),
      transparent 26%
    );
}

.footer-console-panel > * {
  position: relative;
  z-index: 2;
}


/* =========================================================
   DECORATIVE CORNERS
========================================================= */

.footer-console-corner {
  position: absolute;
  z-index: 5;

  width: 25px;
  height: 25px;

  pointer-events: none;

  border-color: rgba(176, 130, 61, 0.48);
}

.footer-corner-top-left {
  top: 6px;
  left: 6px;

  border-top: 1px solid;
  border-left: 1px solid;
}

.footer-corner-bottom-right {
  right: 6px;
  bottom: 6px;

  border-right: 1px solid;
  border-bottom: 1px solid;
}


/* =========================================================
   FOOTER ICON MEDALLIONS
========================================================= */

.footer-console-icon {
  display: grid;

  width: 54px;
  height: 54px;

  place-items: center;

  color: var(--asylum-green);

  background:
    radial-gradient(
      circle,
      rgba(21, 251, 0, 0.12),
      rgba(21, 251, 0, 0.02) 62%,
      transparent 64%
    ),
    #090a09;

  border: 1px solid rgba(21, 251, 0, 0.25);
  border-radius: 50%;

  font-size: 1.32rem;

  box-shadow:
    inset 0 0 14px rgba(21, 251, 0, 0.06),
    0 0 11px rgba(21, 251, 0, 0.06);
}

.footer-creed-icon {
  color: var(--asylum-green);
}

.footer-critical-icon {
  color: #ff5a54;

  background:
    radial-gradient(
      circle,
      rgba(255, 67, 61, 0.13),
      rgba(255, 67, 61, 0.02) 62%,
      transparent 64%
    ),
    #0b0909;

  border-color: rgba(255, 67, 61, 0.32);

  box-shadow:
    inset 0 0 14px rgba(255, 67, 61, 0.06),
    0 0 11px rgba(255, 67, 61, 0.07);
}

.footer-resource-icon {
  color: #d5bc87;

  background:
    radial-gradient(
      circle,
      rgba(213, 188, 135, 0.11),
      rgba(213, 188, 135, 0.02) 62%,
      transparent 64%
    ),
    #0a0907;

  border-color: rgba(176, 130, 61, 0.34);
}


/* =========================================================
   FOOTER COPY
========================================================= */

.footer-console-copy {
  min-width: 0;
}

.footer-console-copy span,
.footer-console-copy strong,
.footer-console-copy p {
  display: block;
}

.footer-console-label {
  color: #807563;

  font-size: 0.51rem;
  font-weight: 900;
  letter-spacing: 1.15px;
  text-transform: uppercase;
}

.footer-console-copy strong {
  margin-top: 5px;

  color: var(--asylum-green);

  font-size: 0.76rem;
  line-height: 1.2;
  text-transform: uppercase;

  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.92);
}

.footer-console-copy p {
  margin: 5px 0 0;

  color: #8f8f8f;

  font-size: 0.58rem;
  line-height: 1.42;
}


/* =========================================================
   PANEL-SPECIFIC COLORS
========================================================= */

.footer-critical-panel::before {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 67, 61, 0.62),
      transparent
    );
}

.footer-critical-panel .footer-console-copy strong {
  color: #ff5a54;
}

.footer-critical-panel:hover {
  border-color: rgba(255, 67, 61, 0.45) !important;

  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.46),
    inset 0 0 25px rgba(0, 0, 0, 0.68),
    0 17px 34px rgba(0, 0, 0, 0.45),
    0 0 16px rgba(255, 67, 61, 0.07) !important;
}

.footer-resource-panel::before {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(213, 188, 135, 0.62),
      transparent
    );
}

.footer-resource-panel .footer-console-copy strong {
  color: #d5bc87;
}

.footer-resource-panel:hover {
  border-color: rgba(213, 188, 135, 0.48);
}


/* =========================================================
   ACTION LABELS
========================================================= */

.footer-console-action {
  display: flex;
  align-items: center;
  gap: 5px;

  color: #777;

  font-size: 0.51rem;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;

  transition:
    color 160ms ease,
    transform 160ms ease;
}

.footer-console-action i {
  color: inherit;

  font-size: 0.58rem;
}

.footer-console-panel:hover .footer-console-action {
  color: var(--asylum-green);
  transform: translateX(2px);
}

.footer-critical-panel:hover .footer-console-action {
  color: #ff5a54;
}

.footer-resource-panel:hover .footer-console-action {
  color: #d5bc87;
}


/* =========================================================
   CREED CASE CODE
========================================================= */

.footer-console-code {
  align-self: end;

  color: #5d584f;

  font-size: 0.48rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}


/* =========================================================
   RESPONSIVE FOOTER
========================================================= */

@media (max-width: 1100px) {

  .investigator-footer {
    grid-template-columns: 1fr;
  }

  .footer-console-panel {
    min-height: 92px;
  }
}

@media (max-width: 520px) {

  .investigator-footer {
    padding: 0 10px 12px;
  }

  .footer-console-panel {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;

    min-height: 98px;
    padding: 13px;
  }

  .footer-console-icon {
    width: 46px;
    height: 46px;

    font-size: 1.12rem;
  }

  .footer-console-action,
  .footer-console-code {
    grid-column: 2;
    justify-self: start;
  }
}

/* =========================================================
   INVESTIGATOR ACCESS VERIFICATION
========================================================= */

/*
 * The dashboard remains hidden until the Investigator
 * access guard verifies the signed-in account.
 */
body.investigator-access-pending {
  overflow: hidden;
}

body.investigator-access-pending .investigator-sidebar,
body.investigator-access-pending .dashboard-shell,
body.investigator-access-pending .sidebar-overlay {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}


/* Full-screen classified loading screen */

.investigator-access-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 25px;

  color: #f2f2f2;

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(21, 251, 0, 0.09),
      transparent 28%
    ),
    repeating-linear-gradient(
      118deg,
      transparent 0,
      transparent 21px,
      rgba(255, 255, 255, 0.012) 22px,
      transparent 23px
    ),
    linear-gradient(
      145deg,
      #090a08,
      #030403 70%
    );

  text-align: center;

  transition:
    opacity 220ms ease,
    visibility 220ms ease;
}


/*
 * Once access is approved, the guard will remove
 * investigator-access-pending from the body.
 */
body:not(.investigator-access-pending)
.investigator-access-loader {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}


/* Decorative background frame */

.investigator-access-loader::before {
  content: "";

  position: absolute;
  inset: 18px;

  pointer-events: none;

  border: 1px solid rgba(151, 111, 55, 0.32);
  border-radius: 9px;

  box-shadow:
    inset 0 0 45px rgba(0, 0, 0, 0.72),
    0 0 28px rgba(21, 251, 0, 0.035);
}

.investigator-access-loader::after {
  content: "";

  position: absolute;
  top: 18px;
  right: 18%;
  left: 18%;

  height: 2px;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(21, 251, 0, 0.7),
      transparent
    );
}


/* Clearance emblem */

.investigator-access-loader-emblem {
  position: relative;

  display: grid;
  width: 92px;
  height: 92px;
  place-items: center;

  margin-bottom: 20px;
  overflow: hidden;

  color: var(--asylum-green);

  background:
    radial-gradient(
      circle,
      rgba(21, 251, 0, 0.15),
      rgba(21, 251, 0, 0.025) 64%,
      transparent 66%
    ),
    #080a08;

  border: 1px solid rgba(21, 251, 0, 0.4);
  border-radius: 50%;

  font-size: 2.25rem;

  box-shadow:
    inset 0 0 20px rgba(21, 251, 0, 0.08),
    0 0 22px rgba(21, 251, 0, 0.11);
}

.investigator-access-loader-emblem::before {
  content: "";

  position: absolute;
  inset: 7px;

  border: 1px solid rgba(176, 130, 61, 0.28);
  border-radius: 50%;
}


/* Animated scanning line */

.investigator-access-scan-line {
  position: absolute;
  right: 13px;
  left: 13px;

  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--asylum-green),
      transparent
    );

  box-shadow:
    0 0 9px rgba(21, 251, 0, 0.75);

  animation:
    investigator-clearance-scan 1.8s ease-in-out infinite;
}

@keyframes investigator-clearance-scan {

  0% {
    top: 20%;
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    top: 80%;
    opacity: 0;
  }
}


/* Loading copy */

.investigator-access-eyebrow {
  color: var(--asylum-green);

  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}

.investigator-access-loader > strong {
  display: block;

  margin-top: 9px;

  color: #d5bc87;

  font-size: clamp(1.2rem, 3vw, 1.8rem);
  letter-spacing: 1.2px;
  text-transform: uppercase;

  text-shadow:
    0 3px 6px rgba(0, 0, 0, 0.95);
}

.investigator-access-loader > p {
  margin: 9px 0 0;

  color: #a8a8a8;

  font-size: 0.76rem;
  line-height: 1.5;
}


/* Animated verification progress */

.investigator-access-progress {
  width: min(290px, 78vw);
  height: 6px;

  margin-top: 22px;
  overflow: hidden;

  background: rgba(74, 74, 74, 0.5);
  border-radius: 999px;

  box-shadow:
    inset 0 1px 4px rgba(0, 0, 0, 0.85);
}

.investigator-access-progress span {
  display: block;
  width: 42%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--asylum-green),
      transparent
    );

  box-shadow:
    0 0 10px rgba(21, 251, 0, 0.48);

  animation:
    investigator-clearance-progress 1.5s ease-in-out infinite;
}

@keyframes investigator-clearance-progress {

  0% {
    transform: translateX(-120%);
  }

  100% {
    transform: translateX(340%);
  }
}

.investigator-access-loader > small {
  display: block;

  margin-top: 12px;

  color: #665f53;

  font-size: 0.53rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}


/* Accessibility: reduce animation when requested */

@media (prefers-reduced-motion: reduce) {

  .investigator-access-scan-line,
  .investigator-access-progress span {
    animation: none;
  }

  .investigator-access-scan-line {
    top: 50%;
  }

  .investigator-access-progress span {
    width: 65%;
    transform: none;
  }
}

/* Investigator clearance failure state */

.investigator-access-loader.investigator-access-error
.investigator-access-loader-emblem {
  color: var(--red);

  border-color: rgba(255, 67, 61, 0.5);

  box-shadow:
    inset 0 0 20px rgba(255, 67, 61, 0.08),
    0 0 22px rgba(255, 67, 61, 0.12);
}

.investigator-access-loader.investigator-access-error
.investigator-access-scan-line {
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--red),
      transparent
    );

  box-shadow:
    0 0 9px rgba(255, 67, 61, 0.7);
}

.investigator-access-loader.investigator-access-error
> strong {
  color: #ff6862;
}

.investigator-access-loader.investigator-access-error
.investigator-access-progress span {
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--red),
      transparent
    );
}

/* =========================================================
   DYNAMIC MISSION SYSTEM STATES
========================================================= */

.mission-grid-dynamic {
  position: relative;
}

.mission-system-state {
  grid-column: 1 / -1;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;

  min-height: 210px;
  padding: 28px;

  color: #c9c9c9;

  background:
    radial-gradient(
      circle at 12% 50%,
      rgba(21, 251, 0, 0.08),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      rgba(22, 20, 16, 0.98),
      rgba(7, 8, 7, 0.99)
    );

  border: 1px dashed rgba(155, 120, 65, 0.46);
  border-radius: 10px;

  box-shadow:
    inset 0 0 30px rgba(0, 0, 0, 0.5),
    0 14px 28px rgba(0, 0, 0, 0.26);
}

.mission-system-state h3 {
  margin: 0 0 7px;

  color: #d5bc87;

  font-family: "Creepster", cursive;
  font-size: 1.55rem;
  font-weight: 400;
  letter-spacing: 1px;
}

.mission-system-state p {
  max-width: 540px;
  margin: 0;

  color: #9d9d9d;

  font-size: 0.82rem;
  line-height: 1.55;
}

.mission-loading-emblem {
  display: grid;

  width: 62px;
  height: 62px;

  flex: 0 0 62px;
  place-items: center;

  color: #15fb00;
  background: rgba(21, 251, 0, 0.06);

  border: 1px solid rgba(21, 251, 0, 0.25);
  border-radius: 50%;

  font-size: 1.5rem;

  box-shadow:
    inset 0 0 18px rgba(21, 251, 0, 0.05),
    0 0 18px rgba(21, 251, 0, 0.08);

  animation:
    missionFilePulse 1.8s ease-in-out infinite;
}

@keyframes missionFilePulse {
  0%,
  100% {
    opacity: 0.58;
    transform: scale(0.96);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* =========================================================
   DYNAMIC CURRENT ASSIGNMENT STATES
========================================================= */

.current-assignment-dynamic-content {
  min-height: 180px;
}

.current-assignment-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  min-height: 180px;
  padding: 24px;

  color: #858585;
  text-align: center;
}

.current-assignment-loading i {
  color: #15fb00;

  font-size: 1.15rem;

  animation:
    assignmentSearchPulse 1.6s ease-in-out infinite;
}

.current-assignment-loading p {
  margin: 0;

  font-size: 0.78rem;
  line-height: 1.5;
}

@keyframes assignmentSearchPulse {
  0%,
  100% {
    opacity: 0.45;
    transform: translateX(-2px);
  }

  50% {
    opacity: 1;
    transform: translateX(2px);
  }
}

@media (max-width: 600px) {
  .mission-system-state {
    flex-direction: column;
    text-align: center;
  }
}

/* =========================================================
   DYNAMIC INVESTIGATOR MISSION SETS
========================================================= */

.investigator-mission-set {
  grid-column: 1 / -1;
  margin-bottom: 22px;
}

.investigator-mission-set:last-child {
  margin-bottom: 0;
}

.mission-set-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;

  margin-bottom: 12px;
  padding: 14px 16px;

  background:
    linear-gradient(
      90deg,
      rgba(21, 251, 0, 0.055),
      rgba(155, 120, 65, 0.035),
      transparent
    );

  border-left: 3px solid
    rgba(21, 251, 0, 0.6);

  border-bottom: 1px solid
    rgba(155, 120, 65, 0.24);
}

.mission-set-number {
  display: block;

  color: #15fb00;

  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.mission-set-heading h3 {
  margin: 4px 0 5px;

  color: #d8bd82;

  font-family: "Creepster", cursive;
  font-size: 1.65rem;
  font-weight: 400;
  letter-spacing: 1px;
}

.mission-set-heading p {
  max-width: 650px;
  margin: 0;

  color: #929292;

  font-size: 0.76rem;
  line-height: 1.5;
}

.mission-set-heading-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;

  flex: 0 0 auto;
}

.mission-set-count,
.mission-set-clearance {
  padding: 5px 8px;

  border: 1px solid #313131;
  border-radius: 4px;

  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.mission-set-count {
  color: #b5b5b5;
  background: #111;
}

.mission-set-clearance.open {
  color: #15fb00;
  background: rgba(21, 251, 0, 0.06);
  border-color: rgba(21, 251, 0, 0.28);
}

.mission-set-clearance.locked {
  color: #aa8a4c;
  background: rgba(170, 138, 76, 0.06);
  border-color: rgba(170, 138, 76, 0.25);
}

.mission-set-card-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 11px;
}

.investigator-mission-set[
  data-set-status="locked"
] .mission-card {
  opacity: 0.55;
  filter: grayscale(0.55);
}

.investigator-mission-set[
  data-set-status="locked"
] .mission-diorama-glow {
  opacity: 0;
}

.locked-label {
  color: #aa8a4c;
  background: rgba(170, 138, 76, 0.08);
  border-color: rgba(170, 138, 76, 0.28);
}

.mission-set-hidden {
  display: none;
}

.dynamic-assignment-rewards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  margin: 16px 0;
}

.dynamic-assignment-rewards span {
  padding: 8px 10px;

  color: #c8b37f;
  background: rgba(155, 120, 65, 0.07);

  border: 1px solid
    rgba(155, 120, 65, 0.24);

  border-radius: 4px;

  font-size: 0.72rem;
}

.dynamic-assignment-rewards i {
  margin-right: 5px;
  color: #15fb00;
}

@media (max-width: 1050px) {
  .mission-set-card-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .mission-set-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .mission-set-heading-meta {
    align-items: flex-start;
  }

  .mission-set-card-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   SECURE MISSION BUTTON STATES
========================================================= */

.dynamic-mission-button:disabled {
  cursor: wait;
  opacity: 0.72;
  filter: grayscale(0.2);
}

.dynamic-mission-button[aria-busy="true"] {
  color: #d8ffd4;
  background:
    linear-gradient(
      90deg,
      rgba(21, 251, 0, 0.18),
      rgba(8, 45, 5, 0.95)
    );

  border-color:
    rgba(21, 251, 0, 0.58);
}

.dynamic-mission-button
.fa-spinner {
  margin-right: 7px;
}

/* =========================================================
   STAFF-ONLY ADMINISTRATION WING ACCESS
========================================================= */

.staff-only-link[hidden],
.staff-only-link.hidden {
  display: none !important;
}

/* Sidebar staff entrance */

.investigator-staff-nav-link {
  position: relative;

  margin-top: 8px;

  color: #d8ffd1 !important;

  background:
    linear-gradient(
      90deg,
      rgba(21, 251, 0, 0.16),
      rgba(21, 251, 0, 0.035)
    ) !important;

  border-color: rgba(21, 251, 0, 0.4) !important;

  box-shadow:
    inset 0 0 18px rgba(21, 251, 0, 0.035),
    0 0 14px rgba(21, 251, 0, 0.035);
}

.investigator-staff-nav-link i {
  color: var(--asylum-green) !important;
}

.investigator-staff-nav-link > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.investigator-staff-nav-link small {
  color: #6fa866;

  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.investigator-staff-nav-link:hover {
  color: #ffffff !important;

  border-color: rgba(21, 251, 0, 0.74) !important;

  background:
    linear-gradient(
      90deg,
      rgba(21, 251, 0, 0.24),
      rgba(21, 251, 0, 0.07)
    ) !important;

  box-shadow:
    inset 0 0 22px rgba(21, 251, 0, 0.055),
    0 0 18px rgba(21, 251, 0, 0.09);
}

/* Header entrance */

.administration-wing-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-height: 43px;
  padding: 6px 14px;

  color: #e8ffe4;

  background:
    linear-gradient(
      145deg,
      rgba(21, 251, 0, 0.16),
      rgba(5, 14, 4, 0.94)
    );

  border: 1px solid rgba(21, 251, 0, 0.48);
  border-radius: 5px;

  box-shadow:
    inset 0 0 16px rgba(21, 251, 0, 0.04),
    0 0 16px rgba(21, 251, 0, 0.055);

  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.administration-wing-button > i {
  color: var(--asylum-green);
  font-size: 1rem;
}

.administration-wing-button > span {
  display: flex;
  flex-direction: column;
  gap: 2px;

  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
}

.administration-wing-button small {
  color: #6e9b67;

  font-size: 0.48rem;
  letter-spacing: 0.07em;
}

.administration-wing-button:hover {
  transform: translateY(-1px);

  color: #ffffff;

  border-color: rgba(21, 251, 0, 0.82);

  background:
    linear-gradient(
      145deg,
      rgba(21, 251, 0, 0.25),
      rgba(5, 18, 4, 0.96)
    );

  box-shadow:
    inset 0 0 20px rgba(21, 251, 0, 0.07),
    0 0 22px rgba(21, 251, 0, 0.1);
}

@media (max-width: 1350px) {
  .administration-wing-button {
    max-width: 180px;
    text-align: center;
  }
}

@media (max-width: 850px) {
  .administration-wing-button {
    max-width: none;
  }
}

@media (max-width: 650px) {
  .administration-wing-button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* =========================================================
   LIVE INVESTIGATOR NOTIFICATIONS
========================================================= */

.investigator-sidebar-notification-badge {
  display: grid;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  place-items: center;

  color: #061000;
  background: var(--asylum-green);

  border: 1px solid var(--asylum-green);
  border-radius: 999px;

  font-size: 0.72rem;
  font-weight: 900;

  box-shadow:
    0 0 10px rgba(21, 251, 0, 0.28);
}

.investigator-sidebar-notification-badge[hidden] {
  display: none;
}

.investigator-notification-list {
  max-height: 430px;
  overflow-y: auto;
}

.investigator-notification-item {
  position: relative;

  display: grid;
  grid-template-columns:
    38px minmax(0, 1fr) auto;
  align-items: start;
  gap: 11px;

  width: 100%;
  padding: 14px 15px;

  color: #f2f2f2;
  background: transparent;

  border: 0;
  border-bottom: 1px solid #222;

  text-align: left;
  cursor: pointer;
}

.investigator-notification-item:hover {
  background:
    rgba(21, 251, 0, 0.045);
}

.investigator-notification-item.unread {
  background:
    linear-gradient(
      90deg,
      rgba(21, 251, 0, 0.085),
      rgba(21, 251, 0, 0.015)
    );
}

.investigator-notification-item > i {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;

  color: var(--asylum-green);
  background:
    rgba(21, 251, 0, 0.08);

  border:
    1px solid rgba(21, 251, 0, 0.22);
  border-radius: 50%;
}

.investigator-notification-copy {
  min-width: 0;
}

.investigator-notification-copy strong,
.investigator-notification-copy span,
.investigator-notification-copy small {
  display: block;
}

.investigator-notification-copy strong {
  color: #f0f0f0;
  font-size: 0.86rem;
  line-height: 1.35;
}

.investigator-notification-copy > span {
  margin-top: 4px;

  color: #b0b0b0;
  font-size: 0.77rem;
  line-height: 1.45;
}

.investigator-notification-copy small {
  margin-top: 6px;

  color: #777;
  font-size: 0.67rem;
}

.investigator-notification-unread-dot {
  width: 9px;
  height: 9px;
  margin-top: 5px;

  background: var(--asylum-green);
  border-radius: 50%;

  box-shadow:
    0 0 8px rgba(21, 251, 0, 0.65);
}

.investigator-notification-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;

  min-height: 110px;
  padding: 18px;

  color: #888;
  text-align: center;
}

.investigator-notification-empty > i {
  color: var(--asylum-green);
  font-size: 1.25rem;
}

.investigator-notification-empty strong,
.investigator-notification-empty span {
  display: block;
}

.investigator-notification-empty strong {
  color: #d8d8d8;
  font-size: 0.84rem;
}

.investigator-notification-empty span {
  margin-top: 4px;
  font-size: 0.72rem;
  line-height: 1.45;
}

.investigator-notification-empty.error > i {
  color: var(--red);
}

/* Ensure zero-count notification badges stay hidden */
.investigator-notification-badge[hidden],
.investigator-sidebar-notification-badge[hidden] {
  display: none !important;
}