/* BunkerNAS Pip-Boy Terminal Theme */

:root {
  --pip-green: #8cffaa;
  --pip-bright: #d9ffe1;
  --pip-dim: rgba(200, 255, 210, 0.72);
  --pip-card: rgba(2, 8, 4, 0.92);
}

html,
body,
#__next {
  background: #000000 !important;
  color: var(--pip-green) !important;
  font-family: "Courier New", Courier, monospace !important;
}

/* CRT scanlines */
body::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: repeating-linear-gradient(
    to bottom,
    rgba(124, 255, 155, 0.024),
    rgba(124, 255, 155, 0.024) 1px,
    transparent 1px,
    transparent 4px
  );
}

/* Main layout */
main {
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Font */
body,
p,
span,
a,
div,
input {
  font-family: "Courier New", Courier, monospace !important;
}

/* Custom JS welcome terminal */
#bunkernas-terminal-welcome {
  margin: 18px 0 8px 28px;
  color: var(--pip-green);
  font-size: 18px;
  letter-spacing: 0.08em;
  line-height: 1.25;
  white-space: nowrap;
  text-shadow:
    0 0 4px rgba(140, 255, 170, 0.8),
    0 0 14px rgba(0, 255, 90, 0.22);
}

#bunkernas-terminal-text::after {
  content: "█";
  margin-left: 6px;
  animation: pipCursor 0.8s steps(1) infinite;
}

#bunkernas-online {
  color: var(--pip-bright);
  font-weight: bold;
  text-shadow:
    0 0 7px rgba(217, 255, 225, 1),
    0 0 22px rgba(0, 255, 90, 0.82),
    0 0 44px rgba(0, 255, 90, 0.38);
  animation: onlinePulse 2.6s ease-in-out infinite;
}

@keyframes pipCursor {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes onlinePulse {
  0% {
    opacity: 0.75;
    text-shadow:
      0 0 4px rgba(124, 255, 155, 0.75),
      0 0 14px rgba(0, 255, 90, 0.35);
  }
  50% {
    opacity: 1;
    text-shadow:
      0 0 8px rgba(216, 255, 224, 1),
      0 0 28px rgba(0, 255, 90, 0.88),
      0 0 56px rgba(0, 255, 90, 0.42);
  }
  100% {
    opacity: 0.75;
    text-shadow:
      0 0 4px rgba(124, 255, 155, 0.75),
      0 0 14px rgba(0, 255, 90, 0.35);
  }
}

/* Top widgets */
header,
header *,
div[class*="widget"],
div[class*="resources"],
div[class*="datetime"],
div[class*="weather"] {
  font-size: 15px !important;
  line-height: 1.25 !important;
}

/* Search bar */
input {
  height: 32px !important;
  font-size: 14px !important;
  background: #020a04 !important;
  color: #9dffb1 !important;
  border: 1px solid rgba(124, 255, 155, 0.35) !important;
  box-shadow: inset 0 0 10px rgba(0, 255, 90, 0.08) !important;
}

input::placeholder {
  color: rgba(157, 255, 177, 0.65) !important;
}

/* Section headings */
h1,
h2,
h3,
h4 {
  color: #7cff9b !important;
  font-size: 21px !important;
  line-height: 1.2 !important;
  margin-bottom: 10px !important;
  letter-spacing: 0.08em !important;
  text-shadow:
    0 0 5px rgba(124, 255, 155, 0.65),
    0 0 12px rgba(0, 255, 90, 0.22) !important;
}

/* Sections */
section {
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 16px !important;
  margin-bottom: 16px !important;
  background: transparent !important;
  border: none !important;
}

/* Card pulse */
@keyframes pipboyCardGlow {
  0% {
    border-color: rgba(90, 255, 130, 0.26);
    box-shadow:
      inset 0 0 9px rgba(0, 255, 90, 0.05),
      0 0 5px rgba(0, 255, 90, 0.06);
  }
  50% {
    border-color: rgba(145, 255, 170, 0.70);
    box-shadow:
      inset 0 0 20px rgba(0, 255, 90, 0.17),
      0 0 22px rgba(0, 255, 90, 0.28),
      0 0 40px rgba(0, 255, 90, 0.10);
  }
  100% {
    border-color: rgba(90, 255, 130, 0.26);
    box-shadow:
      inset 0 0 9px rgba(0, 255, 90, 0.05),
      0 0 5px rgba(0, 255, 90, 0.06);
  }
}

/* Safe card styling */
section a[href] {
  background: var(--pip-card) !important;
  color: #9dffb1 !important;
  border: 1px solid rgba(115, 255, 145, 0.38) !important;
  border-radius: 2px !important;
  min-height: 66px !important;
  animation: pipboyCardGlow 5.5s ease-in-out infinite !important;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease,
    transform 160ms ease !important;
}

/* Bright green hover */
section a[href]:hover {
  background: #06240c !important;
  color: #e5ffe9 !important;
  border-color: #c8ffd2 !important;
  box-shadow:
    inset 0 0 26px rgba(0, 255, 90, 0.28),
    0 0 28px rgba(0, 255, 90, 0.58),
    0 0 58px rgba(0, 255, 90, 0.28) !important;
  animation-play-state: paused !important;
  transform: translateY(-1px) !important;
}

section a[href]:hover span,
section a[href]:hover p {
  color: #e5ffe9 !important;
  text-shadow:
    0 0 5px rgba(229, 255, 233, 0.9),
    0 0 16px rgba(0, 255, 90, 0.42) !important;
}

/* Card text */
section a span,
section a p {
  font-size: 13px !important;
  line-height: 1.25 !important;
}

/* Descriptions */
.description,
div[class*="description"],
span[class*="description"] {
  font-size: 12px !important;
  color: var(--pip-dim) !important;
}

/* Icons */
section a img,
section a svg {
  max-width: 30px !important;
  max-height: 30px !important;
  filter: saturate(0.9) brightness(0.95) drop-shadow(0 0 4px rgba(124, 255, 155, 0.16));
}

/* Footer */
footer,
div[class*="footer"] {
  color: rgba(124, 255, 155, 0.5) !important;
  font-size: 12px !important;
}

/* Force Pip-Boy terminal card skin without changing layout */
main section a[href],
main section a[href] *,
main section a[href] div {
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease,
    text-shadow 180ms ease,
    transform 180ms ease !important;
}

main section a[href] {
  background:
    linear-gradient(
      90deg,
      rgba(0, 32, 10, 0.92),
      rgba(0, 18, 7, 0.96)
    ) !important;
  border: 1px solid rgba(95, 255, 135, 0.42) !important;
  box-shadow:
    inset 0 0 18px rgba(0, 255, 90, 0.10),
    0 0 8px rgba(0, 255, 90, 0.08) !important;
  animation: pipboyCardBreath 4.8s ease-in-out infinite !important;
}

/* Make card text greener */
main section a[href] span,
main section a[href] p,
main section a[href] div {
  color: rgba(210, 255, 220, 0.86) !important;
}

main section a[href] p,
main section a[href] .description,
main section a[href] div[class*="description"],
main section a[href] span[class*="description"] {
  color: rgba(180, 255, 195, 0.68) !important;
}

/* Slow breathing terminal glow */
@keyframes pipboyCardBreath {
  0% {
    background-color: rgba(0, 18, 7, 0.95);
    border-color: rgba(95, 255, 135, 0.34);
    box-shadow:
      inset 0 0 12px rgba(0, 255, 90, 0.07),
      0 0 6px rgba(0, 255, 90, 0.06);
  }

  50% {
    background-color: rgba(0, 34, 12, 0.98);
    border-color: rgba(150, 255, 170, 0.82);
    box-shadow:
      inset 0 0 26px rgba(0, 255, 90, 0.22),
      0 0 20px rgba(0, 255, 90, 0.34),
      0 0 42px rgba(0, 255, 90, 0.16);
  }

  100% {
    background-color: rgba(0, 18, 7, 0.95);
    border-color: rgba(95, 255, 135, 0.34);
    box-shadow:
      inset 0 0 12px rgba(0, 255, 90, 0.07),
      0 0 6px rgba(0, 255, 90, 0.06);
  }
}

/* Strong Pip-Boy hover */
main section a[href]:hover {
  background:
    linear-gradient(
      90deg,
      rgba(0, 70, 20, 1),
      rgba(0, 38, 12, 1)
    ) !important;
  border-color: rgba(215, 255, 225, 1) !important;
  box-shadow:
    inset 0 0 30px rgba(0, 255, 90, 0.34),
    0 0 30px rgba(0, 255, 90, 0.68),
    0 0 70px rgba(0, 255, 90, 0.30) !important;
  transform: translateY(-1px) scale(1.004) !important;
  animation-play-state: paused !important;
}

/* Hover text glow */
main section a[href]:hover span,
main section a[href]:hover p,
main section a[href]:hover div {
  color: #e9ffed !important;
  text-shadow:
    0 0 5px rgba(233, 255, 237, 0.95),
    0 0 18px rgba(0, 255, 90, 0.48) !important;
}

/* Icon glow on hover */
main section a[href]:hover img,
main section a[href]:hover svg {
  filter:
    saturate(1.25)
    brightness(1.25)
    drop-shadow(0 0 8px rgba(0, 255, 90, 0.85)) !important;
}