/* ============================================================================
   HACK.EDUCATION BATTLE GROUND — "BLACKSITE" tactical-HUD theme
   Bootstrap 5.3 grid/components are kept; this restyles them heavily.
   All legacy class names are preserved so no view markup needs to change.
   ============================================================================ */

:root {
  /* palette */
  --hebg-bg:      #04070a;
  --hebg-bg2:     #060b0f;
  --hebg-panel:   #0a1116;
  --hebg-raised:  #0d161c;
  --hebg-border:  #163039;
  --hebg-grid:    rgba(0, 229, 255, .045);
  --hebg-green:   #39ff14;
  --hebg-blue:    #00e5ff;
  --hebg-cyan:    #00e5ff;
  --hebg-amber:   #ffb020;
  --hebg-red:     #ff4d5e;
  --hebg-dim:     #6f8a90;
  --hebg-text:    #cfe8ec;
  --hebg-accent:  #00e5ff;
  --glow-green:   0 0 10px rgba(57,255,20,.45);
  --glow-cyan:    0 0 12px rgba(0,229,255,.40);
  --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", "Consolas", "SFMono-Regular", monospace;
  --sans: "Rajdhani", "Segoe UI", system-ui, sans-serif;
  --bs-body-bg: var(--hebg-bg);
  --bs-border-color: var(--hebg-border);
}

/* ----------------------------------------------------------------- base ---- */
* { scrollbar-color: var(--hebg-border) transparent; }
html { scroll-behavior: smooth; }
body {
  background: var(--hebg-bg);
  color: var(--hebg-text);
  font-family: var(--sans);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  letter-spacing: .2px;
  position: relative;
  overflow-x: hidden;
}
main { flex: 1; position: relative; z-index: 1; }

/* fixed HUD backdrop: grid + vignette + drifting scan band ------------------ */
.hud-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(var(--hebg-grid) 1px, transparent 1px) 0 0 / 100% 34px,
    linear-gradient(90deg, var(--hebg-grid) 1px, transparent 1px) 0 0 / 34px 100%,
    radial-gradient(120% 90% at 50% -10%, rgba(0,229,255,.06), transparent 60%),
    radial-gradient(120% 120% at 50% 120%, rgba(57,255,20,.05), transparent 55%),
    var(--hebg-bg);
}
.hud-bg::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent, rgba(0,229,255,.05) 50%, transparent);
  height: 38%; mix-blend-mode: screen;
  animation: hud-scan 7.5s linear infinite;
}
@keyframes hud-scan { 0% { transform: translateY(-40%); } 100% { transform: translateY(280%); } }

/* faint scanlines over everything */
.scanlines {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px);
  opacity: .35;
}

/* ------------------------------------------------------------- typography -- */
.mono, code, kbd, pre, .countdown, .stat-value, .stat-num,
.flag-url, .admin-table td, .admin-table th { font-family: var(--mono); }
h1,h2,h3,h4,h5,h6 { letter-spacing: .5px; }
a { color: var(--hebg-blue); text-decoration: none; transition: color .15s, text-shadow .15s; }
a:hover { color: #7df3ff; text-shadow: var(--glow-cyan); }
::selection { background: rgba(0,229,255,.3); color: #fff; }

/* section labels */
.section-title {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 3px;
  color: var(--hebg-dim); font-size: .9rem; margin: 1.5rem 0 .9rem;
  display: flex; align-items: center; gap: .6rem;
}
.section-title::before { content: "▌"; color: var(--hebg-accent); }
.section-title::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--hebg-border), transparent);
}

/* --------------------------------------------------------------- brand ----- */
.brand-neon {
  color: var(--hebg-green) !important;
  font-family: var(--mono); font-weight: 700; letter-spacing: 3px;
  text-shadow: var(--glow-green);
}
.brand-sub {
  color: var(--hebg-dim); font-size: .5em; letter-spacing: 5px;
  margin-left: .6em; text-transform: uppercase; text-shadow: none;
}

/* ------------------------------------------------ panels / cards (HUD) ----- */
.card, .admin-card, .panel, .list-group-item, .accordion-item, .modal-content {
  background:
    linear-gradient(180deg, rgba(0,229,255,.025), transparent 120px),
    var(--hebg-panel);
  border: 1px solid var(--hebg-border);
  border-radius: 4px;
  position: relative;
}
/* corner brackets drawn with one overlay (no markup change) */
.card::after, .admin-card::after, .panel::after, .event-card::after, .stat-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 4px;
  --b: var(--hebg-accent); --L: 12px; --t: 1.5px;
  background:
    linear-gradient(var(--b),var(--b)) 0 0/var(--L) var(--t) no-repeat,
    linear-gradient(var(--b),var(--b)) 0 0/var(--t) var(--L) no-repeat,
    linear-gradient(var(--b),var(--b)) 100% 0/var(--L) var(--t) no-repeat,
    linear-gradient(var(--b),var(--b)) 100% 0/var(--t) var(--L) no-repeat,
    linear-gradient(var(--b),var(--b)) 0 100%/var(--L) var(--t) no-repeat,
    linear-gradient(var(--b),var(--b)) 0 100%/var(--t) var(--L) no-repeat,
    linear-gradient(var(--b),var(--b)) 100% 100%/var(--L) var(--t) no-repeat,
    linear-gradient(var(--b),var(--b)) 100% 100%/var(--t) var(--L) no-repeat;
  opacity: .5; transition: opacity .2s;
}
.card:hover::after, .admin-card:hover::after, .event-card:hover::after { opacity: .9; }
.card-header {
  border-bottom: 1px solid var(--hebg-border);
  background: linear-gradient(90deg, rgba(0,229,255,.06), transparent);
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 1.5px;
  font-size: .82rem; color: var(--hebg-text);
}
.card-header::before { content: "// "; color: var(--hebg-accent); }

/* ------------------------------------------------------------- buttons ----- */
.btn { border-radius: 3px; font-family: var(--mono); letter-spacing: 1px; transition: all .15s; position: relative; }
.btn-neon, .btn-blue {
  background: transparent; border: 1px solid var(--hebg-green); color: var(--hebg-green);
  text-transform: uppercase; font-size: .8rem;
}
.btn-neon::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent, rgba(57,255,20,.25), transparent);
  transform: translateX(-120%); transition: transform .5s;
}
.btn-neon:hover {
  background: rgba(57,255,20,.1); color: #c9ffb8; box-shadow: var(--glow-green);
  border-color: var(--hebg-green);
}
.btn-neon:hover::before { transform: translateX(120%); }
.btn-blue { border-color: var(--hebg-blue); color: var(--hebg-blue); }
.btn-blue:hover { background: rgba(0,229,255,.1); color: #aef3ff; box-shadow: var(--glow-cyan); }
.btn-outline-info { border-color: var(--hebg-blue); color: var(--hebg-blue); }
.btn-outline-info:hover { background: rgba(0,229,255,.12); color: #aef3ff; border-color: var(--hebg-blue); box-shadow: var(--glow-cyan); }
.btn-outline-danger { border-color: var(--hebg-red); color: var(--hebg-red); }
.btn-outline-danger:hover { background: rgba(255,77,94,.14); color: #ffb3ba; border-color: var(--hebg-red); }
.btn-outline-warning { border-color: var(--hebg-amber); color: var(--hebg-amber); }
.btn-outline-warning:hover { background: rgba(255,176,32,.14); color: #ffd98a; border-color: var(--hebg-amber); }
.btn-outline-secondary { border-color: var(--hebg-border); color: var(--hebg-dim); }
.btn-outline-secondary:hover { background: var(--hebg-raised); color: var(--hebg-text); border-color: var(--hebg-dim); }

/* --------------------------------------------------------------- nav ------- */
.hebg-nav {
  background: linear-gradient(180deg, var(--hebg-bg2), rgba(6,11,15,.85));
  border-bottom: 1px solid var(--hebg-border);
  backdrop-filter: blur(6px); position: sticky; top: 0; z-index: 1000;
}
.hebg-nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--hebg-accent), transparent); opacity: .6;
}
.nav-link { color: var(--hebg-dim) !important; font-family: var(--mono); font-size: .85rem; text-transform: uppercase; letter-spacing: 1px; position: relative; }
.nav-link:hover, .nav-link.active { color: var(--hebg-text) !important; }
.nav-link:hover::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: 2px; height: 1px; background: var(--hebg-accent); box-shadow: var(--glow-cyan); }

/* ------------------------------------------------------------- forms ------- */
.form-control, .form-select {
  background: var(--hebg-bg2); border: 1px solid var(--hebg-border); color: var(--hebg-text);
  border-radius: 3px; font-family: var(--mono); font-size: .9rem;
}
.form-control:focus, .form-select:focus {
  background: var(--hebg-bg2); border-color: var(--hebg-accent); color: #fff;
  box-shadow: 0 0 0 .15rem rgba(0,229,255,.18), inset 0 0 12px rgba(0,229,255,.06);
}
.form-control::placeholder { color: #46595e; }
.form-label { font-family: var(--mono); font-size: .78rem; text-transform: uppercase; letter-spacing: 1px; color: var(--hebg-dim); }
.form-text { color: #5b7077; }
.form-check-input:checked { background-color: var(--hebg-green); border-color: var(--hebg-green); }

/* ------------------------------------------------------------- tables ------ */
.table { --bs-table-bg: transparent; --bs-table-color: var(--hebg-text); color: var(--hebg-text); }
.table > :not(caption) > * > * { border-color: var(--hebg-border); }
.table thead th, .admin-table th {
  color: var(--hebg-accent); font-family: var(--mono); text-transform: uppercase;
  font-size: .72rem; letter-spacing: 1.5px; font-weight: 600;
  border-bottom: 1px solid var(--hebg-border) !important;
}
.table-hover > tbody > tr:hover > * , .admin-table tbody tr:hover > * {
  background: rgba(0,229,255,.06); color: #fff;
}
.rank-1 td { color: var(--hebg-green); font-weight: 700; text-shadow: var(--glow-green); }

/* ------------------------------------------------------------- badges ------ */
.badge { border-radius: 2px; font-family: var(--mono); font-weight: 600; letter-spacing: .5px; }
.badge.bg-success { background: rgba(57,255,20,.15) !important; color: var(--hebg-green); border: 1px solid rgba(57,255,20,.4); box-shadow: var(--glow-green); }
.badge-role { background: rgba(0,229,255,.1); color: var(--hebg-blue); border: 1px solid rgba(0,229,255,.4); text-transform: capitalize; }
.badge-status { text-transform: uppercase; }
.badge-active, .badge-running, .badge-published { background: rgba(57,255,20,.12); color: var(--hebg-green); border: 1px solid rgba(57,255,20,.4); }
.badge-disabled, .badge-draft, .badge-completed, .badge-scheduled { background: var(--hebg-raised); color: var(--hebg-dim); border: 1px solid var(--hebg-border); }
.badge-blocked { background: rgba(255,77,94,.14); color: var(--hebg-red); border: 1px solid rgba(255,77,94,.45); }

/* difficulty (both legacy .badge-difficulty-* and admin .badge-diff-*) */
.badge-diff, .badge-difficulty-easy, .badge-difficulty-medium, .badge-difficulty-hard, .badge-difficulty-insane { text-transform: uppercase; font-family: var(--mono); }
.badge-difficulty-easy,   .badge-diff-easy   { background: rgba(57,255,20,.12);  color: #7dff63; border: 1px solid rgba(57,255,20,.35); }
.badge-difficulty-medium, .badge-diff-medium { background: rgba(0,229,255,.12);  color: #6df0ff; border: 1px solid rgba(0,229,255,.35); }
.badge-difficulty-hard,   .badge-diff-hard   { background: rgba(255,176,32,.12); color: #ffc861; border: 1px solid rgba(255,176,32,.4); }
.badge-difficulty-insane, .badge-diff-insane { background: rgba(255,77,94,.14);  color: #ff8a96; border: 1px solid rgba(255,77,94,.45); }

/* ------------------------------------------------------------- alerts ------ */
.alert { border-radius: 3px; border-width: 1px; font-family: var(--mono); font-size: .9rem; position: relative; padding-left: 2.4rem; }
.alert::before { position: absolute; left: .9rem; font-weight: 700; }
.alert-neon, .alert-success { background: rgba(57,255,20,.07); border-color: rgba(57,255,20,.5); color: #b6ffa3; }
.alert-success::before { content: "✓"; color: var(--hebg-green); }
.alert-danger { background: rgba(255,77,94,.08); border-color: rgba(255,77,94,.5); color: #ffb3ba; }
.alert-danger::before { content: "!"; color: var(--hebg-red); }
.alert-success { animation: hud-flash-g .6s ease-out; }
.alert-danger  { animation: hud-flash-r .4s ease-out; }
@keyframes hud-flash-g { from { box-shadow: 0 0 0 2px rgba(57,255,20,.6), var(--glow-green); } to { box-shadow: none; } }
@keyframes hud-flash-r { from { box-shadow: 0 0 0 2px rgba(255,77,94,.6); } to { box-shadow: none; } }

/* --------------------------------------------------------- stat cards ------ */
.stat-card {
  background: linear-gradient(180deg, rgba(0,229,255,.04), transparent), var(--hebg-panel);
  border: 1px solid var(--hebg-border); border-radius: 4px; padding: 1.1rem 1.25rem;
  text-align: left; transition: border-color .2s, box-shadow .2s, transform .2s;
}
.stat-card:hover { border-color: rgba(0,229,255,.5); box-shadow: var(--glow-cyan); transform: translateY(-2px); }
.stat-value, .stat-num { font-size: 2rem; font-weight: 700; color: var(--hebg-green); line-height: 1; text-shadow: var(--glow-green); }
.stat-label { color: var(--hebg-dim); font-size: .72rem; text-transform: uppercase; letter-spacing: 2px; margin-top: .4rem; font-family: var(--mono); }
.text-neon { color: var(--hebg-green) !important; }
.text-blue, .text-eblue { color: var(--hebg-blue) !important; }

/* --------------------------------------------------- challenge/event ------- */
.event-card { transition: transform .2s, box-shadow .2s, border-color .2s; }
.event-card:hover { transform: translateY(-3px); border-color: rgba(0,229,255,.5); box-shadow: var(--glow-cyan); }
.challenge-card.locked { opacity: .4; filter: grayscale(.7); }
.challenge-card.solved { border-color: var(--hebg-green); box-shadow: 0 0 14px rgba(57,255,20,.22); }
.countdown { font-family: var(--mono); color: var(--hebg-blue); font-size: 1.15rem; letter-spacing: 1px; text-shadow: var(--glow-cyan); }
.flag-url {
  background: var(--hebg-bg2); border: 1px dashed var(--hebg-blue); padding: .6rem .8rem;
  border-radius: 3px; word-break: break-all; font-size: .85rem; color: #9fe9f2;
}

/* ------------------------------------------------------- markdown body ----- */
.markdown-body h1, .markdown-body h2, .markdown-body h3 { color: var(--hebg-green); font-family: var(--mono); }
.markdown-body pre { background: var(--hebg-bg2); border: 1px solid var(--hebg-border); padding: .8rem; border-radius: 3px; }
.markdown-body code { color: var(--hebg-blue); }

/* ----------------------------------------------------------- footer -------- */
.hebg-footer { border-top: 1px solid var(--hebg-border); letter-spacing: 3px; font-family: var(--mono); font-size: .75rem; color: var(--hebg-dim); position: relative; z-index: 1; }

/* ---------------------------------------------------- dropdown/pagination -- */
.dropdown-menu { background: var(--hebg-raised); border: 1px solid var(--hebg-border); border-radius: 4px; }
.dropdown-item { color: var(--hebg-text); font-family: var(--mono); font-size: .85rem; }
.dropdown-item:hover, .dropdown-item.active { background: rgba(0,229,255,.12); color: #fff; }
.page-link { background: var(--hebg-panel); border-color: var(--hebg-border); color: var(--hebg-blue); }
.page-link:hover { background: var(--hebg-raised); color: #aef3ff; }
.page-item.disabled .page-link { background: var(--hebg-bg2); color: #3a4a4f; }

/* ============================ ADMIN SHELL ================================== */
.admin-body { background: var(--hebg-bg); }
.admin-shell { display: flex; min-height: 100vh; position: relative; z-index: 1; }
.admin-sidebar {
  width: 240px; flex-shrink: 0;
  background: linear-gradient(180deg, var(--hebg-bg2), var(--hebg-panel));
  border-right: 1px solid var(--hebg-border);
  display: flex; flex-direction: column; padding: 1rem .75rem;
  position: sticky; top: 0; height: 100vh;
}
.admin-sidebar::after { content: ""; position: absolute; top: 0; bottom: 0; right: -1px; width: 1px; background: linear-gradient(180deg, transparent, var(--hebg-accent), transparent); opacity: .5; }
.admin-brand { font-weight: 700; font-size: 1.15rem; text-decoration: none; display: block; margin-bottom: 1.25rem; }
.admin-nav { display: flex; flex-direction: column; gap: .15rem; }
.admin-link {
  color: var(--hebg-dim); text-decoration: none; padding: .55rem .75rem; border-radius: 3px;
  font-size: .85rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: 1px;
  border-left: 2px solid transparent; transition: all .15s;
}
.admin-link:hover { color: var(--hebg-text); background: rgba(0,229,255,.05); border-left-color: var(--hebg-border); }
.admin-link.active { color: var(--hebg-green); background: rgba(57,255,20,.06); border-left-color: var(--hebg-green); text-shadow: var(--glow-green); }
.admin-side-foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--hebg-border); }
.admin-main { flex: 1; padding: 1.5rem 2rem; max-width: 1280px; }
.admin-table { margin: 0; --bs-table-bg: transparent; }
.admin-table td, .admin-table th { border-color: var(--hebg-border); vertical-align: middle; }

/* --------------------------------------------------------- sound toggle ---- */
.hud-sfx {
  background: transparent; border: 1px solid var(--hebg-border); color: var(--hebg-dim);
  border-radius: 3px; font-family: var(--mono); font-size: .7rem; letter-spacing: 1px;
  padding: .25rem .5rem; cursor: pointer; text-transform: uppercase; transition: all .15s;
}
.hud-sfx:hover { color: var(--hebg-text); border-color: var(--hebg-dim); }
.hud-sfx[aria-pressed="true"] { color: var(--hebg-green); border-color: rgba(57,255,20,.5); box-shadow: var(--glow-green); }

/* boot flicker on first paint */
@keyframes hud-boot { 0% { opacity: 0; } 8% { opacity: .6; } 12% { opacity: .2; } 20% { opacity: 1; } 22% { opacity: .5; } 30% { opacity: 1; } }
.hud-boot { animation: hud-boot .7s ease-out both; }

/* glitch flash helper toggled by JS on key moments */
.hud-glitch { animation: hud-glitch .35s steps(2) 1; }
@keyframes hud-glitch {
  0% { transform: translate(0,0); filter: none; }
  25% { transform: translate(-2px,1px); filter: hue-rotate(40deg); }
  50% { transform: translate(2px,-1px); }
  75% { transform: translate(-1px,0); filter: hue-rotate(-30deg); }
  100% { transform: translate(0,0); filter: none; }
}

/* --------------------------------------------------------- responsive ------ */
@media (max-width: 768px) {
  .admin-shell { flex-direction: column; }
  .admin-sidebar { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .admin-sidebar::after { display: none; }
  .admin-nav { flex-direction: row; flex-wrap: wrap; }
  .admin-side-foot { margin: 0 0 0 auto; border: 0; padding: 0; }
  .admin-main { padding: 1rem; }
}
@media (max-width: 576px) { .stat-value, .stat-num { font-size: 1.5rem; } }

/* ----------------------------------------------- reduced motion honored ---- */
@media (prefers-reduced-motion: reduce) {
  .hud-bg::before, .scanlines { animation: none; }
  .alert-success, .alert-danger, .hud-boot, .hud-glitch { animation: none; }
  *, *::before, *::after { transition: none !important; }
  html { scroll-behavior: auto; }
}