/* GLOBAL */
body {
  background: #000;
  font-family: "Courier New", monospace;
  color: #6cb4ff;
  margin: 0;
}

/* BOOT OVERLAY */
#boot-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  color: #6cb4ff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.boot-inner {
  border: 3px solid #6cb4ff;
  padding: 20px 25px;
  max-width: 600px;
  width: 90%;
  background: #050910;
  box-shadow: 0 0 25px #6cb4ff;
}

#boot-log {
  margin: 0 0 15px 0;
  white-space: pre-wrap;
}

#boot-continue {
  background: transparent;
  border: 2px solid #6cb4ff;
  color: #6cb4ff;
  padding: 8px 16px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#boot-continue:hover {
  background: #102132;
}

/* MAIN SCREEN */
.bos-screen {
  width: 90%;
  max-width: 1100px;
  margin: 40px auto;
  padding: 20px 30px;
  border: 3px solid #6cb4ff;
  background: radial-gradient(circle at top, #141b27 0, #05060a 60%);
  position: relative;
  box-shadow: 0 0 25px #6cb4ff;
  overflow: hidden;
  animation: crt-glow 4s ease-in-out infinite alternate;
}

@keyframes crt-glow {
  0% { box-shadow: 0 0 18px #6cb4ff; }
  100% { box-shadow: 0 0 32px #9ecaff; }
}

.scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    rgba(0,0,0,0.18),
    rgba(0,0,0,0.18) 2px,
    rgba(0,0,0,0) 3px
  );
  pointer-events: none;
  z-index: 10;
}

/* HEADER */
.header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
  color: #9ecaff;
  text-shadow: 0 0 8px #6cb4ff;
  position: relative;
  z-index: 11;
}

.bos-emblem {
  font-size: 32px;
  border: 2px solid #6cb4ff;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px #6cb4ff;
}

.header-text h1 {
  margin: 0;
}

.header-text h2 {
  margin: 4px 0;
}

.sub {
  font-size: 0.9em;
  opacity: 0.85;
}

/* LAYOUT */
.layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 18px;
  position: relative;
  z-index: 11;
}

/* SIDE NAV */
.side-nav {
  border-right: 2px solid #6cb4ff;
  padding-right: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nav-item {
  text-align: left;
  background: transparent;
  color: #9ecaff;
  border: none;
  padding: 6px 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95em;
}

.nav-item.active {
  background: rgba(108, 180, 255, 0.15);
  border-left: 3px solid #6cb4ff;
  padding-left: 6px;
}

/* MAIN PANEL & PANELS */
.main-panel {
  min-height: 400px;
}

.panel {
  display: none;
}

.panel.active {
  display: block;
}

.panel-title {
  margin-top: 0;
  border-bottom: 1px solid #6cb4ff;
  padding-bottom: 4px;
}

/* QUEST LOG */
.quest-log {
  margin-top: 10px;
}

.quest {
  margin-bottom: 14px;
  border-left: 4px solid #6cb4ff;
  padding: 8px 10px;
  background: rgba(10, 20, 35, 0.6);
}

.quest.completed {
  color: #8fc6ff;
}

.quest.almost {
  color: #b5d6ff;
}

.quest.pending {
  color: #cce6ff;
}

.quest.boss {
  border-left-color: #ff9933;
  color: #ffd7a3;
}

.quest.optional {
  border-left-color: #33aaff;
  color: #99d4ff;
}

/* Collapsible header */
.quest-header {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.quest-header h3 {
  margin: 0 0 4px 0;
  text-shadow: 0 0 5px currentColor;
}

.quest-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease-out;
  font-size: 0.95em;
}

.quest.open .quest-body {
  max-height: 200px;
}

.xp {
  font-size: 0.85em;
  opacity: 0.8;
}

/* STATUS PANEL */
.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.status-grid h3 {
  margin-bottom: 4px;
}

.good {
  color: #7dffb8;
}

.warn {
  color: #ffd27d;
}

.bar-block {
  grid-column: 1 / -1;
}

.bar-bg {
  width: 100%;
  background: #0a1623;
  border: 1px solid #6cb4ff;
  height: 16px;
  margin: 6px 0;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #6cb4ff, #9ecaff);
  box-shadow: 0 0 10px #6cb4ff;
  transition: width 0.8s ease-out;
}

/* AUGS PANEL */
.augs-list {
  padding-left: 18px;
}

/* RANK PANEL */
.rank-box {
  max-width: 600px;
}

.rank-steps {
  margin-top: 10px;
  padding-left: 20px;
}

/* SHUTDOWN PANEL */
.danger-btn {
  background: transparent;
  border: 2px solid #ff5555;
  color: #ffbbbb;
  padding: 8px 16px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.danger-btn:hover {
  background: rgba(255, 85, 85, 0.1);
}

.small-note {
  font-size: 0.8em;
  opacity: 0.7;
  margin-top: 8px;
}

/* RESPONSIVE */
@media (max-width: 800px) {
  .layout {
    grid-template-columns: 1fr;
  }

  .side-nav {
    border-right: none;
    border-bottom: 2px solid #6cb4ff;
    padding-bottom: 10px;
    margin-bottom: 10px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
  }

  .nav-item {
    font-size: 0.8em;
  }
}