@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Ubuntu:wght@400;700&display=swap');

:root,
[data-bs-theme="dark"] {
  --cy-bg: #000000;
  --cy-text: #ffffff;
  --cy-accent: #8b0000;
  --cy-card-bg: rgba(0, 0, 0, 0.75);
  --cy-border: #8b0000;

  /* Variables for elements that are hardcoded white in CTFd */
  --cy-invert: #ffffff;
  --cy-invert-bg: #000000;
  --cy-glow: rgba(255, 255, 255, 0.2);
  --cy-glow-strong: rgba(255, 255, 255, 0.5);
}

[data-bs-theme="light"] {
  --cy-bg: #ffffff;
  --cy-text: #000000;
  --cy-accent: #8b0000;
  --cy-card-bg: rgba(255, 255, 255, 0.85);
  --cy-border: #000000;

  /* Invert hardcoded white elements to black */
  --cy-invert: #000000;
  --cy-invert-bg: #ffffff;
  --cy-glow: rgba(0, 0, 0, 0.2);
  --cy-glow-strong: rgba(0, 0, 0, 0.5);
}

/* Animations */
@keyframes glitch {
  0% {
    transform: translate(0)
  }

  20% {
    transform: translate(-2px, 2px)
  }

  40% {
    transform: translate(-2px, -2px)
  }

  60% {
    transform: translate(2px, 2px)
  }

  80% {
    transform: translate(2px, -2px)
  }

  100% {
    transform: translate(0)
  }
}

@keyframes vhsPageGlitch {
  0% {
    transform: skewX(0);
    filter: drop-shadow(0 0 0 transparent) hue-rotate(0deg);
  }

  15% {
    transform: skewX(2deg) translateX(-2px);
    filter: drop-shadow(3px 0 0 rgba(255, 0, 0, 0.8)) drop-shadow(-3px 0 0 rgba(0, 255, 255, 0.8)) contrast(1.1);
  }

  30% {
    transform: skewX(-2deg) translateX(2px);
    filter: drop-shadow(-3px 0 0 rgba(255, 0, 0, 0.8)) drop-shadow(3px 0 0 rgba(0, 255, 255, 0.8)) hue-rotate(-5deg);
  }

  45% {
    transform: skewX(1deg) translateX(-1px);
    filter: drop-shadow(1px 0 0 rgba(255, 0, 0, 0.8)) drop-shadow(-1px 0 0 rgba(0, 255, 255, 0.8));
  }

  60% {
    transform: skewX(0);
    filter: drop-shadow(0 0 0 transparent);
  }

  100% {
    transform: skewX(0);
    filter: drop-shadow(0 0 0 transparent);
  }
}

@keyframes vhsScanlines {
  0% {
    opacity: 0;
    background-position: 0 0;
  }

  10% {
    opacity: 0.15;
    background-position: 0 100vh;
  }

  45% {
    opacity: 0.15;
    background-position: 0 -50vh;
  }

  60% {
    opacity: 0;
    background-position: 0 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes themeGlitch {
  0% {
    transform: skewX(0);
    filter: hue-rotate(0deg) invert(0%);
    opacity: 1;
  }

  10% {
    transform: skewX(15deg) scale(1.05);
    filter: hue-rotate(90deg) invert(100%) drop-shadow(10px 0 red);
    opacity: 0.8;
  }

  20% {
    transform: skewX(-15deg) scale(0.95);
    filter: hue-rotate(-90deg) invert(0%) drop-shadow(-10px 0 cyan);
    opacity: 0.9;
  }

  30% {
    transform: skewX(5deg) scale(1.1);
    filter: hue-rotate(180deg) invert(100%) drop-shadow(15px 5px lime);
    opacity: 1;
  }

  50% {
    transform: skewX(-5deg) scale(0.9);
    filter: hue-rotate(-180deg) invert(0%) drop-shadow(-15px -5px magenta);
    opacity: 0.8;
  }

  70% {
    transform: skewX(2deg) scale(1.02);
    filter: hue-rotate(45deg) invert(80%);
    opacity: 0.9;
  }

  85% {
    transform: skewX(-2deg) scale(0.98);
    filter: hue-rotate(-45deg) invert(0%);
    opacity: 1;
  }

  100% {
    transform: skewX(0) scale(1);
    filter: hue-rotate(0deg) invert(0%);
    opacity: 1;
  }
}

body.theme-transition-glitch {
  animation: themeGlitch 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
  overflow: hidden;
}

/* Core setup */
body {
  font-family: 'JetBrains Mono', monospace;
  background-color: transparent !important;
  color: var(--cy-text) !important;
  transition: background-color 0.5s ease, color 0.5s ease;
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand {
  font-family: 'Ubuntu', sans-serif !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

main[role="main"]>.container {
  animation: vhsPageGlitch 0.45s ease-out;
}

body::after {
  content: " ";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: repeating-linear-gradient(transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.5) 3px,
      rgba(0, 0, 0, 0.5) 4px);
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  animation: vhsScanlines 0.45s ease-out;
}

/* General Light Theme Inversions (excluding navbar) */
/* We target everything inside 'main' so we don't accidentally invert the navbar */
[data-bs-theme="light"] main .text-white,
[data-bs-theme="light"] main .text-light {
  color: #000000 !important;
}

[data-bs-theme="light"] main .text-white svg {
  fill: #000000 !important;
}

[data-bs-theme="light"] main svg[fill="#ffffff"],
[data-bs-theme="light"] main svg[fill="white"] {
  fill: #000000 !important;
}

[data-bs-theme="light"] main label,
[data-bs-theme="light"] main .form-text,
[data-bs-theme="light"] main .text-muted,
[data-bs-theme="light"] main h1,
[data-bs-theme="light"] main h2,
[data-bs-theme="light"] main h3,
[data-bs-theme="light"] main h4,
[data-bs-theme="light"] main h5,
[data-bs-theme="light"] main h6,
[data-bs-theme="light"] main strong,
[data-bs-theme="light"] main b,
[data-bs-theme="light"] main p,
[data-bs-theme="light"] main span {
  color: #000000 !important;
}

[data-bs-theme="light"] main i.fas,
[data-bs-theme="light"] main i.fab,
[data-bs-theme="light"] main i.far,
[data-bs-theme="light"] main i.fa {
  color: #000000 !important;
}

/* Navbar */
.navbar {
  background-color: var(--cy-bg) !important;
  border-bottom: 2px solid var(--cy-border);
  box-shadow: 0 0 10px rgba(139, 0, 0, 0.5);
  z-index: 1050;
  transition: background-color 0.3s ease;
}

.navbar .nav-link,
.navbar-brand {
  color: var(--cy-text) !important;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.navbar .nav-link:hover {
  color: var(--cy-accent) !important;
  text-shadow: 0 0 8px var(--cy-accent);
}

/* Cards & Modals */
.modal-content {
  background-image: linear-gradient(var(--cy-card-bg), var(--cy-card-bg)), url('https://static.tildacdn.com/tild6663-3563-4931-b834-333333316331/ascii-art_1_1.svg') !important;
  background-size: cover !important;
  background-position: center !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--cy-text) !important;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(5px);
}

.modal-header {
  border-bottom: none !important;
  background: transparent !important;
}

.modal-footer {
  border-top: none !important;
  background: transparent !important;
}

.card {
  background-color: var(--cy-card-bg) !important;
  border: 1px solid var(--cy-border) !important;
  border-radius: 0 !important;
  color: var(--cy-text);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  backdrop-filter: blur(5px);
}

.jumbotron {
  background-color: var(--cy-card-bg) !important;
  border: 1px solid var(--cy-border) !important;
  border-radius: 0 !important;
  backdrop-filter: blur(5px);
}

.card-header {
  border-bottom: 1px solid var(--cy-border) !important;
  background: transparent !important;
}

.card-footer {
  border-top: 1px solid var(--cy-border) !important;
  background: transparent !important;
}

/* Buttons */
.btn {
  border-radius: 0 !important;
  text-transform: uppercase;
  font-weight: bold;
  font-family: 'Ubuntu', sans-serif;
  letter-spacing: 1px;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid;
}

.btn-primary,
.btn-secondary,
.btn-info,
.btn-dark,
.btn-success {
  background-color: transparent !important;
  color: var(--cy-text) !important;
  border-color: var(--cy-border) !important;
}

[data-bs-theme="light"] .btn-primary,
[data-bs-theme="light"] .btn-secondary,
[data-bs-theme="light"] .btn-info,
[data-bs-theme="light"] .btn-dark,
[data-bs-theme="light"] .btn-success {
  color: #000000 !important;
}

.btn-danger {
  background-color: transparent !important;
  color: var(--cy-accent) !important;
  border-color: var(--cy-accent) !important;
}

.btn:hover {
  background-color: var(--cy-accent) !important;
  color: #ffffff !important;
  box-shadow: 0 0 10px var(--cy-accent), 0 0 20px var(--cy-accent), inset 0 0 10px rgba(0, 0, 0, 0.5) !important;
  border-color: var(--cy-accent) !important;
}

/* Challenge Buttons */
.challenge-button {
  background-image: linear-gradient(var(--cy-card-bg), var(--cy-card-bg)), url('https://static.tildacdn.com/tild6663-3563-4931-b834-333333316331/ascii-art_1_1.svg') !important;
  background-size: cover !important;
  background-position: center !important;
  border: 1px solid var(--cy-border) !important;
  color: var(--cy-text) !important;
  border-radius: 0 !important;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  backdrop-filter: blur(3px);
}

.challenge-button:hover {
  transform: scale(1.03);
  border-color: var(--cy-accent) !important;
  box-shadow: 0 0 15px var(--cy-accent) !important;
  z-index: 10;
}

/* REPLACED HARDCODED WHITES WITH INVERT VARIABLES */
.challenge-button.solved-challenge {
  border-color: var(--cy-invert) !important;
  color: var(--cy-invert) !important;
  text-shadow: 0 0 5px var(--cy-invert);
  box-shadow: inset 0 0 10px var(--cy-glow) !important;
}

.challenge-button.solved-challenge:hover {
  animation: glitch 0.3s infinite;
}

/* Alerts */
.alert {
  border-radius: 0 !important;
  font-family: 'JetBrains Mono', monospace;
  background-color: var(--cy-card-bg) !important;
  backdrop-filter: blur(5px);
}

.alert-success {
  color: var(--cy-invert) !important;
  border: 2px solid var(--cy-invert) !important;
  box-shadow: 0 0 10px var(--cy-glow-strong);
}

.alert-danger,
.alert-warning {
  color: var(--cy-accent) !important;
  border: 2px solid var(--cy-accent) !important;
  box-shadow: 0 0 15px rgba(139, 0, 0, 0.8);
}

/* Tables / Scoreboard */
table {
  color: var(--cy-text) !important;
  background-color: var(--cy-card-bg) !important;
  backdrop-filter: blur(5px);
}

table thead th {
  border-bottom: 2px solid var(--cy-border) !important;
  font-family: 'Ubuntu', sans-serif;
  text-transform: uppercase;
}

table td,
table th {
  border-top: 1px solid rgba(139, 0, 0, 0.3) !important;
}

tbody tr:hover {
  background-color: var(--cy-accent) !important;
  color: #ffffff !important;
}

tbody tr:hover td {
  color: #ffffff !important;
}

/* Badges */
.badge {
  border-radius: 0 !important;
  background-color: transparent !important;
  border: 1px solid var(--cy-border);
  color: var(--cy-text);
}

.badge-success {
  border-color: var(--cy-invert) !important;
  background-color: var(--cy-invert-bg) !important;
}

.badge-danger {
  border-color: var(--cy-accent) !important;
  background-color: var(--cy-invert-bg) !important;
}