/* Objectives footer redesign */
#objectivesContainer {
  position: relative;
}

.objectives-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px; /* adjusted for better vertical centering */
  color: #ffffff;
  font-weight: 600;
  font-size: 13px; /* reduced font size to prevent wrapping */
  letter-spacing: 0.2px;
  line-height: 1.2; /* tighter line height for better centering */
  background: transparent;
  border: 0;
  position: relative; /* allow right-aligned chevrons */
  white-space: nowrap; /* prevent text wrapping */
  overflow: hidden; /* hide overflow if text is too long */
  text-overflow: ellipsis; /* show ellipsis for very long text */
}

/* Phone-landscape compact footer: keep the banner readable in a 25px bar */
@media (max-width: 600px),
       (max-width: 900px) and (max-height: 450px),
       (hover: none) and (pointer: coarse) and (max-width: 900px) and (max-height: 600px) {
  .objectives-banner {
    height: 25px;
    padding: 0 22px 0 10px;
    font-size: 11px;
    line-height: 25px;
  }

  .objectives-banner .chevrons {
    right: 6px;
  }

  /* The drawer sits just above the footer; footer is 25px in compact mode */
  .objectives-drawer {
    /* Slight overlap so there's no visible seam with the footer's top glow line */
    bottom: calc(var(--footer-height, 25px) - 3px);
    height: var(--objectives-drawer-height, 160px);
  }

  .objectives-drawer .objective-details {
    padding: 12px 16px 14px 12px;
  }
}

/* Forced compact mode should behave like the phone-landscape media rules. */
html.is-compact .objectives-banner {
  height: 25px;
  padding: 0 22px 0 10px;
  font-size: 11px;
  line-height: 25px;
}

html.is-compact .objectives-banner .chevrons {
  right: 6px;
}

html.is-compact .objectives-drawer {
  bottom: calc(var(--footer-height, 25px) - 3px);
  height: var(--objectives-drawer-height, 160px);
}

html.is-compact .objectives-drawer .objective-details {
  padding: 12px 16px 14px 12px;
}

/* Phone-landscape: when the mobile log swap is active, the footer middle becomes the log banner/drawer. */
@media (max-width: 600px),
       (max-width: 900px) and (max-height: 450px),
       (hover: none) and (pointer: coarse) and (max-width: 900px) and (max-height: 600px) {
  body.mobile-log-footer-swap #objectivesContainer {
    display: none;
  }
}

html.is-compact body.mobile-log-footer-swap #objectivesContainer {
  display: none;
}

/* --- Phone-landscape: show current objective + steps inside the left slide-out menu --- */
#mobileObjectivesMenu {
  display: none;
}

@media (max-width: 600px),
       (max-width: 900px) and (max-height: 450px),
       (hover: none) and (pointer: coarse) and (max-width: 900px) and (max-height: 600px) {
  body.mobile-log-footer-swap #mainMenu:not(.collapsed) #mobileObjectivesMenu {
    display: block;
  }

  body.mobile-log-footer-swap #mainMenu.collapsed #mobileObjectivesMenu {
    display: none;
  }

  .mobile-objectives-menu {
    position: relative;
    padding: 10px 10px 12px 10px;
    background: rgba(0, 0, 0, 0.55);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .mobile-objectives-menu::before,
  .mobile-objectives-menu::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    animation: pulse-glow 5s ease-in-out infinite;
    pointer-events: none;
  }
  .mobile-objectives-menu::before { top: 0; }
  .mobile-objectives-menu::after { bottom: 0; }

  .mobile-objectives-title {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ffffff;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 8px;
  }

  .mobile-objectives-title em {
    color: #90EE90;
    font-style: normal;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-objectives-steps {
    max-height: 160px;
    overflow-y: auto;
    padding-right: 6px;
  }

  .mobile-objectives-steps-list {
    margin: 0;
    padding-left: 18px;
    color: #c9d7c9;
    font-size: 12px;
  }

  .mobile-objectives-step {
    margin: 3px 0;
  }

  .mobile-objectives-step.done {
    opacity: 0.75;
  }

  .mobile-objectives-empty {
    color: #d6e3d6;
    font-size: 12px;
  }

  .mobile-objectives-steps::-webkit-scrollbar {
    width: 10px;
  }
  .mobile-objectives-steps::-webkit-scrollbar-track {
    background: #000;
  }
  .mobile-objectives-steps::-webkit-scrollbar-thumb {
    background-color: rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.5);
    border-radius: 5px;
    border: 2px solid #000;
  }
  .mobile-objectives-steps::-webkit-scrollbar-thumb:hover {
    background-color: rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.8);
  }
}

html.is-compact body.mobile-log-footer-swap #mainMenu:not(.collapsed) #mobileObjectivesMenu {
  display: block;
}

html.is-compact body.mobile-log-footer-swap #mainMenu.collapsed #mobileObjectivesMenu {
  display: none;
}

html.is-compact .mobile-objectives-menu {
  position: relative;
  padding: 10px 10px 12px 10px;
  background: rgba(0, 0, 0, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

html.is-compact .mobile-objectives-menu::before,
html.is-compact .mobile-objectives-menu::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  animation: pulse-glow 5s ease-in-out infinite;
  pointer-events: none;
}

html.is-compact .mobile-objectives-menu::before { top: 0; }
html.is-compact .mobile-objectives-menu::after { bottom: 0; }

html.is-compact .mobile-objectives-title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 8px;
}

html.is-compact .mobile-objectives-title em {
  color: #90EE90;
  font-style: normal;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Double-chevron up icon with green glow */
.objectives-banner .chevrons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
.objectives-banner .chevrons-icon {
  width: 22px; height: 16px;
  stroke: rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.95);
  stroke-width: 2.5;
  fill: none;
  filter: drop-shadow(0 0 3px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.7));
  transform: translateY(0); /* ensure chevron is centered */
}
.objectives-banner[aria-expanded="true"] .chevrons-icon { transform: translateY(0); } /* keep centered when open */
/* Increase glow on hover/focus for opener */
.objectives-banner:hover .chevrons-icon,
.objectives-banner:focus .chevrons-icon,
.objectives-banner:focus-within .chevrons-icon {
  filter: drop-shadow(0 0 5px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.9));
}

.objectives-drawer {
  transition: opacity 200ms ease, transform 240ms ease;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none; /* don't block clicks when hidden */
  /* allow side glow to extend to column boundary while still clipping height */
  overflow-x: visible;
  overflow-y: hidden;
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(2px);
}

.objectives-container { position: relative; }

/* Backdrop removed to allow interaction with underlying UI while drawer open */

.objectives-drawer {
  position: absolute;
  left: 0;
  bottom: 40px; /* just above footer */
  width: 100%;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden; /* fully remove from hit-testing when closed */
  transform: translateY(14px);
  overflow: visible; /* allow glow lines to extend */
  background: #000;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  z-index: 600; /* beneath modal overlays (>=1000) so they always win */
  height: var(--objectives-drawer-height, 320px);
  display: flex;
  flex-direction: column;
  pointer-events: none; /* always start with no pointer events */
}

.objectives-drawer.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto; /* enable interactions when open */
}

/* Ensure entire drawer blocks mouse events when open */
.objectives-drawer.open::before,
.objectives-drawer.open::after {
  pointer-events: auto; /* glow lines also block when open */
}

/* Fixed header section with objective title and chevron */
.objectives-drawer .objective-header {
  position: relative;
  padding: 10px;
  background: #000;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: auto; /* block events to elements below */
}

.objectives-drawer .objective-header::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0) 0%,
    rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.8) 50%,
    rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0) 100%);
  animation: pulse-glow 5s ease-in-out infinite;
  pointer-events: none;
}

.objectives-drawer .objective-title {
  margin: 0;
  color: #90EE90;
  font-size: 1em;
  font-weight: normal;
  text-align: center;
  flex: 1;
}

/* Scrollable content area */
.objectives-drawer .objective-details {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: #000;
  padding: 14px 22px 18px 22px;
  box-sizing: border-box;
  pointer-events: auto; /* explicitly block events to elements below */
}

/* Glowing divider lines (top & bottom) - fixed, don't scroll */
.objectives-drawer::before,
.objectives-drawer::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  animation: pulse-glow 5s ease-in-out infinite;
  z-index: 42; /* above scrollbar */
  pointer-events: none;
}
.objectives-drawer::before { top: 0; }
.objectives-drawer::after { bottom: 0; }

/* No need for duplicate .open rule - already defined above */

/* Drawer close control - positioned on right side like log options button */
.objectives-drawer .drawer-close {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  padding: 2px;
  cursor: pointer;
  line-height: 1;
  z-index: 1;
}
.objectives-drawer .drawer-close .chevrons-icon {
  width: 22px; height: 16px;
  stroke: rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.95);
  stroke-width: 2.5;
  fill: none;
  filter: drop-shadow(0 0 3px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.7));
}
.objectives-drawer .drawer-close:hover .chevrons-icon,
.objectives-drawer .drawer-close:focus .chevrons-icon {
  filter: drop-shadow(0 0 5px rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.9));
}

/* Vertical glow lines */
.objectives-drawer .glow-vert {
  position: absolute;
  /* Align flush with top/bottom rails for perfect corner joins */
  top: 0;
  bottom: 0;
  width: 3px; /* thicker for perceived parity with horizontal rail */
  animation: pulse-glow 5s ease-in-out infinite;
  z-index: 41;
  pointer-events: none;
}
.objectives-drawer .glow-left { left: -1.5px; } /* extend to match horizontal glow */
.objectives-drawer .glow-right { right: -1.5px; } /* extend to match horizontal glow */

.objectives-list { display: none; }

/* Styling for objective content (no h4 - that's in the header now) */
.objectives-drawer .objective-details p { margin: 0 0 8px 0; color: #d6e3d6; font-size: 13px; pointer-events: auto; }
.objectives-drawer .objective-details ul { margin: 0 0 12px 0; padding-left: 18px; color: #c9d7c9; pointer-events: auto; }
.objectives-drawer .objective-details li { margin: 2px 0; pointer-events: auto; }
.objectives-drawer .objective-reward { margin-top: 8px; color: #ffd98a; font-weight: 600; pointer-events: auto; }

/* Custom Scrollbar for objectives drawer content */
.objectives-drawer .objective-details::-webkit-scrollbar {
    width: 10px;
}
.objectives-drawer .objective-details::-webkit-scrollbar-track {
    background: #000;
}
.objectives-drawer .objective-details::-webkit-scrollbar-thumb {
    background-color: rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.5);
    border-radius: 5px;
    border: 2px solid #000;
}
.objectives-drawer .objective-details::-webkit-scrollbar-thumb:hover {
    background-color: rgba(var(--glow-r), var(--glow-g), var(--glow-b), 0.8);
}

/* Re-apply compact overrides AFTER base drawer rules.
   The base .objectives-drawer block below overrides earlier media-query tweaks. */
@media (max-width: 600px),
       (max-width: 900px) and (max-height: 450px),
       (hover: none) and (pointer: coarse) and (max-width: 900px) and (max-height: 600px) {
  .objectives-drawer {
    /* Ensure drawer is anchored to the compact footer (25px) */
    bottom: calc(var(--footer-height, 25px) + 2px) !important;
    /* Reduce drawer height ~half vs desktop */
    --objectives-drawer-height: 176px;
  }

  .objectives-drawer .objective-details {
    padding: 12px 16px 14px 12px !important;
  }

  /* Tighten row spacing so more steps fit */
  .objective-step-item {
    padding: 2px 2px;
    gap: 6px;
    font-size: 11px;
  }

  .objective-steps {
    margin-top: 6px;
  }

  .objective-step-item {
    border-bottom-color: rgba(255,255,255,0.03);
  }
}