/* ============================================================
   ARCADE — a "cyber arena" tournament theme for CTFd 3.8.6
   Layered on top of the classic core (Bootstrap 4) base.
   Palette: deep indigo void + electric cyan (system) +
   champion gold (score/rank) + mint (solved) + magenta (alert).
   Display: Chakra Petch · HUD/mono: JetBrains Mono · body: system sans
   ============================================================ */

/* ---- 1. Bundled fonts (self-hosted, no CDN at runtime) ---- */
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;src:url('../webfonts/chakra-500.woff2') format('woff2');}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url('../webfonts/chakra-600.woff2') format('woff2');}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url('../webfonts/chakra-700.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../webfonts/jbmono-400.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../webfonts/jbmono-500.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('../webfonts/jbmono-700.woff2') format('woff2');}

/* ---- 2. Design tokens ---- */
:root{
  --void:#0B0C14;      --void-2:#07080F;
  --surface:#131726;   --surface-2:#1A1F33;  --raised:#222944;
  --line:#2A3352;      --line-soft:#1E2440;
  --cyan:#39E1FF;      --cyan-deep:#128DAA;  --cyan-glow:rgba(57,225,255,.55);
  --gold:#FFC24B;      --gold-deep:#B8842A;
  --green:#3DF5A6;     --green-deep:#159c63;
  --magenta:#FF4D8D;
  --text:#E9ECF8;      --muted:#939DBD;      --faint:#5E668A;
  --display:'Chakra Petch',system-ui,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --body:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --radius:4px;
  --shadow:0 10px 30px -12px rgba(0,0,0,.8);
  --grid:rgba(120,140,200,.045);
}

/* ---- 3. Base + atmospheric background layers ---- */
html{scroll-behavior:smooth;}
body{
  background-color:var(--void)!important;
  color:var(--text)!important;
  font-family:var(--body)!important;
  border-top:2px solid var(--cyan)!important;      /* thin HUD rail at very top */
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  position:relative;
}
/* faint tech grid + arena vignette, painted behind everything (footer is z:-20) */
.arena-bg{
  position:fixed;inset:0;z-index:-30;pointer-events:none;
  background-color:var(--void);
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(57,225,255,.10), transparent 55%),
    radial-gradient(90% 70% at 100% 110%, rgba(255,77,141,.07), transparent 60%),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:auto,auto,44px 44px,44px 44px;
}
/* very subtle CRT scanlines — low opacity, never hurts readability */
.arena-scan{
  position:fixed;inset:0;z-index:-29;pointer-events:none;opacity:.35;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.16) 2px 3px);
  mix-blend-mode:multiply;
}
main{padding-top:4rem!important;padding-bottom:5rem;}

/* custom scrollbar */
*::-webkit-scrollbar{width:10px;height:10px;}
*::-webkit-scrollbar-track{background:var(--void-2);}
*::-webkit-scrollbar-thumb{background:var(--line);border-radius:10px;border:2px solid var(--void-2);}
*::-webkit-scrollbar-thumb:hover{background:var(--cyan-deep);}
::selection{background:var(--cyan);color:var(--void);}

/* ---- 4. Typography ---- */
h1,h2,h3,h4,h5,.h1,.h2,.h3{font-family:var(--display)!important;font-weight:700;letter-spacing:.5px;color:var(--text);}
a{color:var(--cyan);text-decoration:none;transition:color .15s,text-shadow .15s;}
a:hover{color:#9df1ff;text-shadow:0 0 12px var(--cyan-glow);}
code,kbd,pre,samp,.text-monospace{font-family:var(--mono)!important;}
.text-muted,.text-secondary,small.text-muted{color:var(--muted)!important;}
hr{border-color:var(--line-soft)!important;}
b,strong{color:#fff;}

/* small utility: label / eyebrow */
.hud-eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--cyan);}

/* ---- 5. Navbar → HUD command bar ---- */
.navbar.bg-dark{
  background:linear-gradient(180deg, rgba(19,23,38,.96), rgba(11,12,20,.92))!important;
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(57,225,255,.15),0 8px 24px -14px #000;
  padding-top:.35rem;padding-bottom:.35rem;
}
.navbar-brand{
  font-family:var(--display)!important;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--text)!important;font-size:1.15rem;
  position:relative;padding-left:.9rem;
}
.navbar-brand::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:1.1em;background:var(--cyan);box-shadow:0 0 10px var(--cyan-glow);border-radius:2px;
}
.navbar-dark .navbar-nav .nav-link{
  color:var(--muted)!important;font-family:var(--mono);font-size:.86rem;
  letter-spacing:.04em;border-radius:var(--radius);transition:color .15s,background .15s;
  position:relative;
}
.navbar-dark .navbar-nav .nav-link:hover{color:var(--text)!important;background:rgba(57,225,255,.08);}
.navbar-dark .navbar-nav .nav-link:focus{color:var(--cyan)!important;}
.navbar-toggler{border-color:var(--line)!important;}
.badge-notification{position:static;margin-left:2px;}

/* ---- 6. Hero / page banner → the arena ---- */
.jumbotron{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--surface),var(--void))!important;
  color:var(--text)!important;
  border:1px solid var(--line);border-radius:0!important;
  border-left:none;border-right:none;
  padding:3.25rem 1rem 2.75rem!important;margin-bottom:2.25rem!important;
  text-align:center;
}
/* grid floor + horizon glow inside the banner */
.jumbotron::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(57,225,255,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(57,225,255,.10) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(180deg,transparent,#000 130%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 130%);
  opacity:.5;
}
.jumbotron::after{
  content:"";position:absolute;left:50%;top:-40%;width:120%;height:120%;
  transform:translateX(-50%);z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(57,225,255,.14),transparent 70%);
}
.jumbotron .container{position:relative;z-index:1;}
.jumbotron h1{
  font-size:clamp(2rem,5vw,3.1rem);font-weight:700;letter-spacing:3px;text-transform:uppercase;margin:0;
  color:#fff;text-shadow:0 0 26px var(--cyan-glow);
}
.jumbotron h1::after{
  content:"";display:block;width:64px;height:3px;margin:1rem auto 0;
  background:linear-gradient(90deg,var(--cyan),var(--magenta));box-shadow:0 0 14px var(--cyan-glow);
}

/* corner-bracket accent, reusable on framed surfaces */
.hud-frame{position:relative;}
.hud-frame::before,.hud-frame::after{
  content:"";position:absolute;width:16px;height:16px;pointer-events:none;
  border:2px solid var(--cyan);opacity:.7;
}
.hud-frame::before{left:-1px;top:-1px;border-right:0;border-bottom:0;}
.hud-frame::after{right:-1px;bottom:-1px;border-left:0;border-top:0;}

/* ---- 7. Buttons ---- */
.btn{
  font-family:var(--mono)!important;font-weight:500;letter-spacing:.03em;
  border-radius:var(--radius)!important;text-transform:none;
  transition:transform .12s,box-shadow .2s,background .2s,border-color .2s,color .2s;
}
.btn:active{transform:translateY(1px);}
.btn-primary{
  background:linear-gradient(180deg,var(--cyan),var(--cyan-deep))!important;
  border:1px solid var(--cyan)!important;color:#04121a!important;font-weight:700;
  box-shadow:0 0 0 rgba(57,225,255,0);
}
.btn-primary:hover{box-shadow:0 6px 22px -6px var(--cyan-glow),0 0 0 1px var(--cyan)!important;color:#000!important;}
.btn-secondary{background:var(--surface-2)!important;border:1px solid var(--line)!important;color:var(--text)!important;}
.btn-secondary:hover{border-color:var(--cyan)!important;color:var(--cyan)!important;}
.btn-success{background:linear-gradient(180deg,var(--green),var(--green-deep))!important;border:1px solid var(--green)!important;color:#02160d!important;font-weight:700;}
.btn-danger{background:transparent!important;border:1px solid var(--magenta)!important;color:var(--magenta)!important;}
.btn-danger:hover{background:var(--magenta)!important;color:#160209!important;}
.btn.btn-info,.btn-info{background:var(--surface-2)!important;border:1px solid var(--cyan-deep)!important;color:var(--cyan)!important;}
.badge.badge-info{background:rgba(57,225,255,.15)!important;color:var(--cyan)!important;border:1px solid var(--cyan-deep);}
.btn-outline-secondary{border-color:var(--line)!important;color:var(--muted)!important;}
.btn-outline-secondary:hover{background:var(--surface-2)!important;color:var(--text)!important;border-color:var(--cyan)!important;}
.btn-link{color:var(--cyan)!important;}

/* ---- 8. Forms & inputs ---- */
.form-control,select.form-control,.custom-select,textarea.form-control{
  background:var(--void-2)!important;color:var(--text)!important;
  border:1px solid var(--line)!important;border-radius:var(--radius)!important;
  font-family:var(--mono)!important;font-weight:400;transition:border-color .15s,box-shadow .15s;
}
.form-control::placeholder{color:var(--faint)!important;}
.form-control:focus,.custom-select:focus,textarea.form-control:focus{
  border-color:var(--cyan)!important;color:var(--text)!important;
  box-shadow:0 0 0 3px rgba(57,225,255,.18)!important;outline:none;
}
.custom-select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%2339E1FF' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")!important;background-repeat:no-repeat;background-position:right .75rem center;background-size:8px 10px;}
label,.col-form-label{color:var(--muted);font-family:var(--mono);font-size:.82rem;letter-spacing:.03em;}
.form-text,small.form-text{color:var(--faint)!important;}
.custom-control-label::before{background:var(--void-2);border:1px solid var(--line);}
.custom-control-input:checked~.custom-control-label::before{background:var(--cyan);border-color:var(--cyan);}

/* ---- 9. Cards / modals / alerts / badges ---- */
.card{
  background:var(--surface)!important;border:1px solid var(--line)!important;
  border-radius:var(--radius)!important;color:var(--text);box-shadow:var(--shadow);
}
.card-header,.card-footer{background:var(--surface-2)!important;border-color:var(--line)!important;font-family:var(--display);letter-spacing:.5px;}
.modal-content{
  background:linear-gradient(180deg,var(--surface),var(--void-2))!important;
  color:var(--text)!important;border:1px solid var(--line)!important;
  border-top:2px solid var(--cyan)!important;border-radius:var(--radius)!important;
  box-shadow:0 24px 70px -20px #000,0 0 40px -20px var(--cyan-glow)!important;
}
.modal-header,.modal-footer{border-color:var(--line-soft)!important;}
.modal-header .close,.close{color:var(--muted)!important;opacity:1;text-shadow:none;}
.modal-header .close:hover{color:var(--magenta)!important;}
.modal-title,.challenge-name{font-family:var(--display)!important;color:#fff;letter-spacing:.5px;}
.alert{border-radius:var(--radius);border:1px solid var(--line);background:var(--surface-2);color:var(--text);}
.alert-danger{border-color:var(--magenta);background:rgba(255,77,141,.10);color:#ffd3e2;}
.alert-success{border-color:var(--green);background:rgba(61,245,166,.10);color:#c9ffe8;}
.alert-info{border-color:var(--cyan-deep);background:rgba(57,225,255,.09);color:#cdf3fb;}
.badge{font-family:var(--mono);font-weight:500;letter-spacing:.04em;border-radius:3px;}
.badge-primary{background:rgba(57,225,255,.15)!important;color:var(--cyan)!important;border:1px solid var(--cyan-deep);}
.badge-danger{background:var(--magenta)!important;color:#160209!important;}
.list-group-item{background:var(--surface)!important;border-color:var(--line)!important;color:var(--text);}

/* ---- 10. Challenge board → mission tiles ---- */
#challenges-board{margin-bottom:3rem;}
/* sector / category label */
.category-header{margin-top:1.75rem;}
.category-header h3{
  position:relative;display:inline-block;margin:0 0 .35rem;
  font-family:var(--display)!important;font-weight:700;font-size:1.15rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text);padding-left:1.1rem;
}
.category-header h3::before{
  content:"";position:absolute;left:0;top:.1em;height:1em;width:5px;
  background:linear-gradient(180deg,var(--cyan),var(--magenta));box-shadow:0 0 10px var(--cyan-glow);border-radius:2px;
}
.category-header::after{
  content:"";display:block;height:1px;margin-top:.4rem;
  background:linear-gradient(90deg,var(--line),transparent);
}

/* the mission tile itself (a <button>) */
.challenge-button{
  position:relative;overflow:hidden;
  min-height:118px;padding:1.15rem .9rem .95rem!important;
  display:flex!important;flex-direction:column;justify-content:center;gap:.55rem;
  background:linear-gradient(180deg,var(--surface),var(--surface-2))!important;
  border:1px solid var(--line)!important;border-radius:var(--radius)!important;
  box-shadow:0 6px 18px -12px #000!important;
  color:var(--text)!important;text-align:center;
  transition:transform .16s ease,border-color .16s,box-shadow .2s,background .2s;
  white-space:normal!important;   /* let long names wrap instead of truncate */
}
/* top tier stripe */
.challenge-button::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--cyan),transparent 85%);opacity:.85;
}
/* faint corner bracket */
.challenge-button::after{
  content:"";position:absolute;right:8px;top:8px;width:12px;height:12px;
  border-top:2px solid var(--line);border-right:2px solid var(--line);transition:border-color .2s;
}
.challenge-button:hover{
  transform:translateY(-4px);
  border-color:var(--cyan)!important;
  box-shadow:0 16px 34px -16px #000,0 0 22px -6px var(--cyan-glow)!important;
}
.challenge-button:hover::after{border-color:var(--cyan);}
.challenge-button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
/* challenge name (built as <p>) */
.challenge-button p{
  margin:0;font-family:var(--display)!important;font-weight:600;font-size:1rem;
  line-height:1.2;letter-spacing:.02em;color:var(--text);
}
/* points (built as <span>) → HUD chip */
.challenge-button span{
  display:inline-block;margin:0 auto;font-family:var(--mono)!important;font-weight:700;
  font-size:.82rem;letter-spacing:.05em;color:var(--gold);
  padding:.12rem .55rem;border:1px solid rgba(255,194,75,.35);border-radius:20px;
  background:rgba(255,194,75,.08);
}
.challenge-button span::after{content:" PTS";font-size:.62em;color:var(--gold-deep);letter-spacing:.12em;}

/* solved state — readable, not washed out.
   Uses .challenge-button.solved-challenge (2 classes) so it beats the
   base challenge-board.css `.solved-challenge{...!important}` regardless
   of stylesheet source order. */
.challenge-button.solved-challenge{
  background:linear-gradient(180deg,rgba(61,245,166,.14),rgba(21,156,99,.07))!important;
  background-color:#0f1b1a!important;
  border-color:var(--green)!important;opacity:1!important;
  box-shadow:0 0 22px -10px var(--green)!important;
}
.challenge-button.solved-challenge::before{background:linear-gradient(90deg,var(--green),transparent 85%);}
.challenge-button.solved-challenge p{color:#d6ffee;}
.challenge-button.solved-challenge::after{border-color:var(--green);}
.corner-button-check{
  margin:0!important;position:absolute!important;top:8px;right:8px;
  color:var(--green)!important;font-size:.95rem;filter:drop-shadow(0 0 6px rgba(61,245,166,.7));
}

/* challenge modal internals */
.challenge-value{font-family:var(--mono)!important;color:var(--gold);font-weight:700;}
.challenge-desc{color:var(--text);}
#challenge-window .modal-body{color:var(--text);}
.submit-row .btn,.key-submit .btn{height:auto;}

/* ---- 11. Scoreboard → HUD leaderboard + podium medals ---- */
#scoreboard{margin-top:1.5rem;}
#scoreboard .table{
  background:var(--surface)!important;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;color:var(--text)!important;margin-bottom:0;
}
#scoreboard .table thead td,#scoreboard thead th{
  background:var(--void-2)!important;color:var(--cyan)!important;
  font-family:var(--mono)!important;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;
  border-bottom:1px solid var(--line)!important;border-top:none!important;padding:.85rem 1rem;
}
#scoreboard .table td,#scoreboard .table th{
  border-color:var(--line-soft)!important;color:var(--text);vertical-align:middle;padding:.7rem 1rem;
}
.table-striped tbody tr:nth-of-type(odd){background:rgba(255,255,255,.015)!important;}
#scoreboard tbody tr{transition:background .15s;}
#scoreboard tbody tr:hover{background:rgba(57,225,255,.06)!important;}
#scoreboard tbody tr a{color:var(--text);font-weight:600;}
#scoreboard tbody tr a:hover{color:var(--cyan);}
/* rank number cell */
#scoreboard tbody th[scope="row"]{
  font-family:var(--display)!important;font-size:1.05rem;color:var(--muted);width:64px;text-align:center;
}
#scoreboard tbody td:last-child{font-family:var(--mono);font-weight:700;color:var(--gold);}

/* podium: top 3 rows get medal treatment */
#scoreboard tbody tr:nth-child(-n+3){background:rgba(255,255,255,.02)!important;}
#scoreboard tbody tr:nth-child(1){box-shadow:inset 4px 0 0 var(--gold);}
#scoreboard tbody tr:nth-child(2){box-shadow:inset 4px 0 0 #C9D2E3;}
#scoreboard tbody tr:nth-child(3){box-shadow:inset 4px 0 0 #E08A4B;}
#scoreboard tbody tr:nth-child(-n+3) th[scope="row"]{position:relative;color:transparent;}
#scoreboard tbody tr:nth-child(-n+3) th[scope="row"]::after{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;filter:drop-shadow(0 0 8px currentColor);
}
#scoreboard tbody tr:nth-child(1) th[scope="row"]::after{content:"①";color:var(--gold);}
#scoreboard tbody tr:nth-child(2) th[scope="row"]::after{content:"②";color:#C9D2E3;}
#scoreboard tbody tr:nth-child(3) th[scope="row"]::after{content:"③";color:#E08A4B;}
#scoreboard tbody tr:nth-child(1) td:last-child{color:var(--gold);text-shadow:0 0 12px rgba(255,194,75,.5);}

/* score graph panel */
#score-graph{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem;margin-bottom:1.75rem;box-shadow:var(--shadow);
}

/* ---- 12. Generic tables (users / teams lists) ---- */
.table{color:var(--text)!important;}
.table td,.table th{border-color:var(--line-soft)!important;}
.table thead th,.table thead td{border-color:var(--line)!important;color:var(--muted);font-family:var(--mono);letter-spacing:.06em;}
.table-hover tbody tr:hover{background:rgba(57,225,255,.05)!important;color:var(--text);}

/* pagination */
.page-link{background:var(--surface)!important;border-color:var(--line)!important;color:var(--cyan)!important;}
.page-item.active .page-link{background:var(--cyan)!important;border-color:var(--cyan)!important;color:var(--void)!important;}
.page-item.disabled .page-link{background:var(--surface)!important;color:var(--faint)!important;}

/* nav-tabs / pills used on profile & settings */
.nav-tabs{border-bottom:1px solid var(--line);}
.nav-tabs .nav-link{color:var(--muted);border:none;font-family:var(--mono);letter-spacing:.04em;}
.nav-tabs .nav-link:hover{color:var(--text);border-color:transparent;}
.nav-tabs .nav-link.active{
  color:var(--cyan);background:transparent;border:none;border-bottom:2px solid var(--cyan);
}
.nav-pills .nav-link.active{background:var(--cyan)!important;color:var(--void)!important;}

/* progress bars (statistics / solves) */
.progress{background:var(--void-2);border:1px solid var(--line);border-radius:20px;height:.9rem;}
.progress-bar{background:linear-gradient(90deg,var(--cyan-deep),var(--cyan))!important;box-shadow:0 0 12px -2px var(--cyan-glow);}

/* ---- 13. Footer ---- */
.footer{color:var(--faint);}
.footer .text-muted{color:var(--faint)!important;font-family:var(--mono);letter-spacing:.05em;font-size:.72rem;}
.footer a:hover .text-muted{color:var(--cyan)!important;}

/* ---- 14. Misc: spinner, tooltips, notifications, media ---- */
.spinner,.fa-spin{color:var(--cyan)!important;}
.tooltip-inner{background:var(--surface-2)!important;color:var(--text)!important;border:1px solid var(--line);font-family:var(--mono);font-size:.75rem;}
.tooltip .arrow::before{border-top-color:var(--line)!important;border-bottom-color:var(--line)!important;}
.notification .card,.notification{border-left:3px solid var(--cyan);}
img.ctf_logo{filter:drop-shadow(0 0 8px rgba(57,225,255,.25));}
blockquote{border-left:3px solid var(--cyan);padding-left:1rem;color:var(--muted);}
input[type="checkbox"],input[type="radio"]{accent-color:var(--cyan);}

/* setup wizard readability */
.setup .card,.tab-content{color:var(--text);}

/* ---- 15. Motion, focus, accessibility, responsive ---- */
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.btn:focus-visible{outline-offset:3px;}

@keyframes arena-pulse{0%,100%{opacity:.55;}50%{opacity:1;}}
.navbar-brand::before{animation:arena-pulse 3.2s ease-in-out infinite;}

@media (max-width:768px){
  .jumbotron{padding:2.25rem 1rem 2rem!important;}
  .jumbotron h1{letter-spacing:2px;}
  .challenge-button{min-height:104px;}
  main{padding-top:3.5rem!important;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .challenge-button:hover{transform:none;}
}

/* honor OS light preference minimally is intentionally skipped:
   this theme commits to a dark arena aesthetic for contrast + identity. */