/* =====================================================================
   X GROUP / XSec Solutions — CTFd Production Theme
   Overlay stylesheet for the core-beta theme (Bootstrap 5 base)
   Signature: the neon-ring glow, pulled from the X Group mark.
   ===================================================================== */

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

:root{
  --x-bg:        #050506;
  --x-bg-2:      #0b0b0e;
  --x-panel:     #101015;
  --x-panel-2:   #15151c;
  --x-line:      #1c1c24;
  --x-red:       #ff0033;
  --x-red-2:     #ff2b48;
  --x-red-deep:  #8a0015;
  --x-text:      #e9e9ee;
  --x-muted:     #7d7d88;
  --x-glow:      0 0 12px rgba(255,0,51,.55), 0 0 30px rgba(255,0,51,.22);
  --x-glow-soft: 0 0 8px rgba(255,0,51,.35);
  --x-display:   'Orbitron', sans-serif;
  --x-mono:      'JetBrains Mono', monospace;
  --x-body:      'Inter', system-ui, sans-serif;
}

/* ---------- Base ---------- */
html,body{ scroll-behavior:smooth; }
body{
  background:
    radial-gradient(1100px 600px at 50% -12%, rgba(255,0,51,.10), transparent 60%),
    var(--x-bg) !important;
  color: var(--x-text) !important;
  font-family: var(--x-body) !important;
  min-height:100vh;
}

/* faint scanline atmosphere — kept subtle, killed under reduced-motion */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:repeating-linear-gradient(0deg,
    rgba(255,255,255,.012) 0 1px, transparent 1px 3px);
  opacity:.5;
}
main, .container, footer{ position:relative; z-index:1; }

a{ color:var(--x-red); text-decoration:none; transition:.15s; }
a:hover{ color:var(--x-red-2); text-shadow:var(--x-glow-soft); }

h1,h2,h3,h4,.h1,.h2,.h3{
  font-family:var(--x-display) !important;
  letter-spacing:.5px; color:#fff;
}
code,pre,kbd,.badge,.challenge-value{ font-family:var(--x-mono) !important; }

/* custom scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--x-bg); }
::-webkit-scrollbar-thumb{ background:#22222b; border-radius:6px; }
::-webkit-scrollbar-thumb:hover{ background:var(--x-red-deep); }

/* ---------- Navbar ---------- */
.navbar, nav.navbar{
  background:rgba(8,8,11,.85) !important;
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--x-line);
}
.navbar-brand{
  font-family:var(--x-display) !important;
  font-weight:900 !important; color:#fff !important;
  text-shadow:var(--x-glow-soft);
  display:flex; align-items:center; gap:.6rem;
}
.navbar-brand img{
  height:38px; width:38px; object-fit:cover;
  border-radius:50%; border:1.5px solid var(--x-red);
  box-shadow:var(--x-glow); padding:2px; background:#000;
}
.navbar .nav-link{ color:var(--x-muted) !important; position:relative; font-weight:500; }
.navbar .nav-link:hover,.navbar .nav-link.active{ color:#fff !important; }
.navbar .nav-link.active::after{
  content:""; position:absolute; left:.75rem; right:.75rem; bottom:1px;
  height:2px; background:var(--x-red); box-shadow:var(--x-glow);
}

/* brand glitch (activated by xsec.js, which sets data-text) */
.xsec-glitch{ position:relative; }
.xsec-glitch::before,.xsec-glitch::after{
  content:attr(data-text); position:absolute; left:0; top:0;
  width:100%; overflow:hidden; opacity:.0;
}
.xsec-glitch:hover::before{
  opacity:.8; color:var(--x-red); transform:translate(-2px,-1px);
  clip-path:inset(0 0 55% 0); animation:xglitch .4s steps(2) infinite;
}
.xsec-glitch:hover::after{
  opacity:.8; color:#19e7ff; transform:translate(2px,1px);
  clip-path:inset(55% 0 0 0); animation:xglitch .4s steps(2) infinite reverse;
}
@keyframes xglitch{
  0%{transform:translate(-2px,-1px)} 50%{transform:translate(2px,1px)}
  100%{transform:translate(-1px,1px)}
}

/* ---------- Hero (home page) ---------- */
.xsec-hero{
  text-align:center; padding:5.5rem 1rem 4rem;
  position:relative;
}
.xsec-hero .ring{
  width:120px; height:120px; margin:0 auto 1.8rem; border-radius:50%;
  border:2px solid var(--x-red); box-shadow:var(--x-glow);
  display:grid; place-items:center; background:#000;
  animation:xpulse 3.5s ease-in-out infinite;
}
.xsec-hero .ring img{ width:74%; height:74%; object-fit:contain; }
@keyframes xpulse{ 0%,100%{box-shadow:0 0 14px rgba(255,0,51,.5),0 0 34px rgba(255,0,51,.18)}
  50%{box-shadow:0 0 22px rgba(255,0,51,.75),0 0 54px rgba(255,0,51,.3)} }
.xsec-hero h1{
  font-size:clamp(2.2rem,6vw,4rem); font-weight:900; margin:0;
  text-shadow:var(--x-glow-soft);
}
.xsec-hero h1 .accent{ color:var(--x-red); }
.xsec-hero p.lead{
  color:var(--x-muted); max-width:620px; margin:1rem auto 2rem;
  font-size:1.1rem; line-height:1.6;
}
.xsec-cta{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.xsec-stats{
  display:flex; gap:2.5rem; justify-content:center; flex-wrap:wrap;
  margin-top:3.5rem; padding-top:2.5rem; border-top:1px solid var(--x-line);
}
.xsec-stats .stat{ text-align:center; }
.xsec-stats .stat .num{
  font-family:var(--x-display); font-size:2rem; font-weight:900;
  color:var(--x-red); text-shadow:var(--x-glow-soft); display:block;
}
.xsec-stats .stat .label{
  font-family:var(--x-mono); font-size:.75rem; letter-spacing:1px;
  text-transform:uppercase; color:var(--x-muted);
}

/* ---------- Buttons ---------- */
.btn{ font-weight:600; letter-spacing:.3px; border-radius:10px; }
.btn-primary{
  background:var(--x-red) !important; border-color:var(--x-red) !important;
  color:#fff !important; box-shadow:var(--x-glow-soft); transition:.18s;
}
.btn-primary:hover{
  background:var(--x-red-2) !important; border-color:var(--x-red-2) !important;
  box-shadow:var(--x-glow); transform:translateY(-1px);
}
.btn-outline-secondary,.btn-secondary{
  border-color:var(--x-line) !important; color:var(--x-text) !important;
  background:transparent !important;
}
.btn-outline-secondary:hover,.btn-secondary:hover{
  border-color:var(--x-red) !important; color:#fff !important;
  box-shadow:var(--x-glow-soft);
}

/* ---------- Cards / modals ---------- */
.card,.modal-content,.jumbotron{
  background:var(--x-panel) !important; border:1px solid var(--x-line) !important;
  border-radius:14px !important; color:var(--x-text) !important;
}
.modal-header,.modal-footer{ border-color:var(--x-line) !important; }
.modal-backdrop.show{ opacity:.7; }

/* ---------- Challenge tiles (signature glow) ---------- */
.challenge-button,.challenge-button .card,button.challenge-button{
  background:var(--x-bg-2) !important; border:1px solid var(--x-line) !important;
  border-radius:14px !important; color:var(--x-text) !important;
  transition:.2s; position:relative; overflow:hidden;
}
.challenge-button::after{
  content:""; position:absolute; inset:0; border-radius:14px;
  background:linear-gradient(180deg,transparent,rgba(255,0,51,.06)); opacity:0; transition:.2s;
}
.challenge-button:hover,button.challenge-button:hover{
  border-color:var(--x-red) !important; box-shadow:var(--x-glow);
  transform:translateY(-3px);
}
.challenge-button:hover::after{ opacity:1; }
.challenge-button.solved-challenge,.challenge-button.solved{
  border-color:var(--x-red-deep) !important; opacity:.7;
}
.challenge-value{ color:var(--x-red); font-weight:700; }

/* category headers on the board */
.challenge-category,.category-header h3{
  font-family:var(--x-display) !important; color:#fff;
  border-left:3px solid var(--x-red); padding-left:.6rem; box-shadow:none;
}

/* ---------- Forms / setup wizard ---------- */
.form-control,.form-select,input,textarea,select{
  background:var(--x-bg-2) !important; border:1px solid var(--x-line) !important;
  color:var(--x-text) !important;
}
.form-control:focus,.form-select:focus{
  border-color:var(--x-red) !important;
  box-shadow:0 0 0 .15rem rgba(255,0,51,.25) !important; background:var(--x-bg-2) !important;
}
::placeholder{ color:#55555f !important; }
.form-label,label{ color:var(--x-text) !important; }

/* ---------- Tables / Scoreboard ---------- */
.table{ color:var(--x-text) !important; }
.table thead th{
  font-family:var(--x-display) !important; font-size:.78rem; letter-spacing:.6px;
  text-transform:uppercase; color:var(--x-muted) !important;
  border-bottom:1px solid var(--x-line) !important;
}
.table td,.table th{ border-color:var(--x-line) !important; vertical-align:middle; }
.table-striped tbody tr:nth-of-type(odd){ background:rgba(255,255,255,.015) !important; }
.table tbody tr:hover{ background:rgba(255,0,51,.06) !important; }
/* podium */
.table tbody tr:nth-child(1){ box-shadow:inset 3px 0 0 var(--x-red); }
.table tbody tr:nth-child(1) td:first-child{ color:var(--x-red); text-shadow:var(--x-glow-soft); font-weight:700; }
.table tbody tr:nth-child(2){ box-shadow:inset 3px 0 0 #c9c9d2; }
.table tbody tr:nth-child(3){ box-shadow:inset 3px 0 0 #b06a2c; }

/* ---------- Badges / progress / misc ---------- */
.badge{
  background:rgba(255,0,51,.12) !important; color:var(--x-red-2) !important;
  border:1px solid rgba(255,0,51,.35); font-weight:600;
}
.progress{ background:var(--x-bg-2) !important; }
.progress-bar{ background:var(--x-red) !important; }
hr{ border-color:var(--x-line) !important; }
.text-muted{ color:var(--x-muted) !important; }
.alert{ border-radius:10px; border:1px solid var(--x-line); background:var(--x-panel) !important; }

/* notifications / toasts */
.toast,.notification{ background:var(--x-panel) !important; border:1px solid var(--x-red) !important; color:var(--x-text) !important; }

/* ---------- Footer ---------- */
.xsec-footer{
  border-top:1px solid var(--x-line); margin-top:4rem; padding:2.2rem 1rem;
  text-align:center; color:var(--x-muted); font-size:.9rem;
}
.xsec-footer .brand{
  font-family:var(--x-display); color:#fff; font-weight:700; letter-spacing:1px;
}
.xsec-footer .brand .accent{ color:var(--x-red); }
.xsec-footer a{ color:var(--x-muted); margin:0 .6rem; }
.xsec-footer a:hover{ color:var(--x-red); }

/* ---------- a11y / responsive floor ---------- */
:focus-visible{ outline:2px solid var(--x-red); outline-offset:2px; }
@media (max-width:576px){ .xsec-stats{ gap:1.4rem; } .xsec-hero{ padding-top:4rem; } }
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
  body::before{ display:none; }
  html{ scroll-behavior:auto; }
}

/* =====================================================================
   PAGE COMPONENTS  (Home / Rules / About)
   Content pasted into Admin → Pages renders inside .container; these
   classes style that content. Signature stays the neon ring/glow.
   ===================================================================== */

.xsec-section{ padding:3.5rem 0; }
.xsec-section + .xsec-section{ border-top:1px solid var(--x-line); }
.xsec-eyebrow{
  font-family:var(--x-mono); font-size:.75rem; letter-spacing:2px;
  text-transform:uppercase; color:var(--x-red); margin-bottom:.6rem;
  display:flex; align-items:center; gap:.5rem; justify-content:center;
}
.xsec-eyebrow::before,.xsec-eyebrow::after{
  content:""; width:28px; height:1px; background:var(--x-red); opacity:.6;
}
.xsec-section h2{
  text-align:center; font-size:clamp(1.6rem,4vw,2.4rem); margin:0 0 .6rem;
}
.xsec-section .sub{
  text-align:center; color:var(--x-muted); max-width:620px;
  margin:0 auto 2.5rem; line-height:1.6;
}

/* feature / category grid */
.xsec-grid{
  display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.xsec-tile{
  background:var(--x-panel); border:1px solid var(--x-line); border-radius:14px;
  padding:1.4rem; transition:.2s;
}
.xsec-tile:hover{ border-color:var(--x-red); box-shadow:var(--x-glow); transform:translateY(-3px); }
.xsec-tile .ic{
  font-family:var(--x-mono); font-size:.8rem; letter-spacing:1px; color:var(--x-red);
  display:inline-block; padding:.25rem .6rem; border:1px solid rgba(255,0,51,.35);
  border-radius:6px; margin-bottom:.9rem;
}
.xsec-tile h3{ font-size:1.1rem; margin:0 0 .4rem; color:#fff; }
.xsec-tile p{ color:var(--x-muted); font-size:.92rem; line-height:1.55; margin:0; }

/* numbered steps */
.xsec-steps{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); counter-reset:step; }
.xsec-step{ background:var(--x-bg-2); border:1px solid var(--x-line); border-radius:14px; padding:1.4rem; position:relative; }
.xsec-step::before{
  counter-increment:step; content:"0" counter(step);
  font-family:var(--x-display); font-weight:900; font-size:1.6rem; color:var(--x-red);
  text-shadow:var(--x-glow-soft); display:block; margin-bottom:.6rem;
}
.xsec-step h3{ font-size:1.05rem; margin:0 0 .35rem; color:#fff; }
.xsec-step p{ color:var(--x-muted); font-size:.9rem; margin:0; line-height:1.5; }

/* rules list */
.xsec-rules{ max-width:760px; margin:0 auto; display:grid; gap:.9rem; }
.xsec-rule{
  display:flex; gap:1rem; align-items:flex-start;
  background:var(--x-panel); border:1px solid var(--x-line);
  border-left:3px solid var(--x-red); border-radius:10px; padding:1rem 1.2rem;
}
.xsec-rule .n{
  font-family:var(--x-display); font-weight:700; color:var(--x-red);
  min-width:1.8rem; text-shadow:var(--x-glow-soft);
}
.xsec-rule div p{ margin:0; color:var(--x-muted); line-height:1.55; }
.xsec-rule div strong{ color:#fff; }

/* callout (flag format, important notes) */
.xsec-callout{
  max-width:760px; margin:2rem auto 0; text-align:center;
  background:rgba(255,0,51,.07); border:1px dashed rgba(255,0,51,.4);
  border-radius:12px; padding:1.2rem 1.4rem; color:var(--x-text);
}
.xsec-callout code{
  color:var(--x-red-2); background:#000; padding:.2rem .55rem; border-radius:6px;
  border:1px solid var(--x-line);
}

/* about story */
.xsec-prose{ max-width:740px; margin:0 auto; color:var(--x-muted); line-height:1.75; font-size:1.02rem; }
.xsec-prose p{ margin:0 0 1.1rem; }
.xsec-prose strong{ color:var(--x-text); }