/* ============================================================
   CTF 2026 — SOET Cyber Security Club x RTS Rudra Tech Services
   ============================================================ */
:root{
  --bg:#04060c;
  --panel:rgba(13,19,35,.72);
  --line:rgba(0,255,156,.16);
  --line-soft:rgba(148,163,184,.14);
  --txt:#d7e2f0;
  --muted:#8494ad;
  --green:#00ff9c;
  --cyan:#2ee6ff;
  --pink:#ff2e88;
  --red:#ff3344;
  --amber:#ffc53d;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,"Cascadia Mono","Courier New",monospace;
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --r:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--txt);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
#matrix{position:fixed;inset:0;z-index:0;opacity:.30;pointer-events:none}
.veil{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(900px 600px at 12% -10%,rgba(0,255,156,.13),transparent 60%),
    radial-gradient(800px 600px at 92% 0%,rgba(46,230,255,.10),transparent 60%),
    radial-gradient(700px 500px at 60% 110%,rgba(255,46,136,.10),transparent 60%),
    linear-gradient(180deg,rgba(4,6,12,.55),rgba(4,6,12,.92));
}
.veil::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;opacity:.5;
}
.wrap{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 22px}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:40;backdrop-filter:blur(14px);
  background:linear-gradient(180deg,rgba(4,6,12,.92),rgba(4,6,12,.55));
  border-bottom:1px solid var(--line-soft)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:18px;height:66px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--mono);font-weight:700;letter-spacing:.5px;font-size:14px}
.brand .dot{width:11px;height:11px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green);animation:pulse 1.8s infinite}
@keyframes pulse{50%{opacity:.35;transform:scale(.8)}}
.brand span{color:var(--green)}
.brand .sep{color:var(--muted);font-style:normal;margin:0 2px;opacity:.7}
.brand .rts{color:var(--red);text-shadow:0 0 14px rgba(255,51,68,.6);letter-spacing:1px}
.nav-links{display:flex;gap:26px;font-family:var(--mono);font-size:13px}
.nav-links a{color:var(--muted);text-decoration:none;transition:.2s}
.nav-links a:hover{color:var(--green);text-shadow:0 0 12px rgba(0,255,156,.6)}
@media(max-width:900px){.nav-links{display:none}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.6px;
  padding:13px 26px;border-radius:10px;text-decoration:none;border:1px solid transparent;transition:.22s;
}
.btn-primary{background:linear-gradient(135deg,var(--green),#00c2ff);color:#03110b;
  box-shadow:0 0 0 1px rgba(0,255,156,.35),0 14px 40px -12px rgba(0,255,156,.65)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(0,255,156,.6),0 20px 50px -12px rgba(0,255,156,.8)}
.btn-ghost{border-color:var(--line);color:var(--txt);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--green);color:var(--green)}
.btn-block{width:100%;justify-content:center}

/* ---------- hero ---------- */
header.hero{padding:74px 0 48px;position:relative;z-index:2}
.pill{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;
  letter-spacing:2px;text-transform:uppercase;color:var(--green);
  border:1px solid var(--line);background:rgba(0,255,156,.06);padding:8px 15px;border-radius:999px
}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--pink);box-shadow:0 0 10px var(--pink);animation:pulse 1.2s infinite}
h1.title{
  font-family:var(--mono);font-size:clamp(2.5rem,7.2vw,5rem);line-height:1;margin:22px 0 0;
  font-weight:800;letter-spacing:-2px;
}
h1.title .l1{display:block;color:#fff}
h1.title .l2{display:block;background:linear-gradient(100deg,var(--green),var(--cyan) 45%,var(--pink));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.glitch{position:relative}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden;pointer-events:none}
.glitch::before{color:var(--pink);clip-path:inset(0 0 58% 0);animation:gl1 3.6s infinite linear alternate}
.glitch::after{color:var(--cyan);clip-path:inset(56% 0 0 0);animation:gl2 2.9s infinite linear alternate}
@keyframes gl1{0%,88%{transform:translate(0)}90%{transform:translate(-3px,-2px)}94%{transform:translate(3px,1px)}100%{transform:translate(0)}}
@keyframes gl2{0%,86%{transform:translate(0)}92%{transform:translate(3px,2px)}96%{transform:translate(-2px,-1px)}100%{transform:translate(0)}}
.lede{max-width:620px;color:var(--muted);font-size:1.05rem;line-height:1.75;margin:22px 0 30px}
.lede b{color:var(--txt)}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:38px;align-items:center}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:34px}}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.cta-note{font-family:var(--mono);font-size:12px;color:var(--amber)}

/* ---------- terminal ---------- */
.term{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:rgba(3,7,14,.86);
  box-shadow:0 30px 80px -30px rgba(0,255,156,.35),inset 0 0 60px rgba(0,255,156,.04);
}
.term-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;background:rgba(255,255,255,.035);
  border-bottom:1px solid var(--line-soft)}
.term-bar b{width:11px;height:11px;border-radius:50%;display:inline-block}
.term-bar .r{background:#ff5f57}.term-bar .y{background:#febc2e}.term-bar .g{background:#28c840}
.term-bar span{margin-left:8px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.term-body{padding:18px;font-family:var(--mono);font-size:13px;line-height:1.85;overflow-x:auto}
.term-body .p{color:var(--green)}
.term-body .c{color:#fff}
.term-body .o{color:var(--muted)}
.term-body .ok{color:var(--cyan)}
.caret{display:inline-block;width:9px;height:15px;background:var(--green);vertical-align:-3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- countdown ---------- */
.count{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:34px 0 0;max-width:560px}
.count div{border:1px solid var(--line-soft);border-radius:12px;background:var(--panel);padding:14px 8px;text-align:center}
.count b{display:block;font-family:var(--mono);font-size:clamp(1.4rem,4vw,2rem);color:var(--green)}
.count small{font-family:var(--mono);font-size:10px;letter-spacing:2px;color:var(--muted);text-transform:uppercase}

/* ---------- sections ---------- */
section{padding:64px 0;position:relative;z-index:2}
.sec-head{margin-bottom:34px}
.sec-head small{font-family:var(--mono);font-size:12px;letter-spacing:3px;color:var(--cyan);text-transform:uppercase}
.sec-head h2{font-family:var(--mono);font-size:clamp(1.6rem,4vw,2.3rem);margin:10px 0 0;color:#fff;letter-spacing:-1px}
.sec-head p{color:var(--muted);margin:10px 0 0;max-width:660px;line-height:1.7}

/* info strip */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:880px){.strip{grid-template-columns:repeat(2,1fr)}}
.strip .card{border:1px solid var(--line-soft);border-radius:var(--r);padding:20px;background:var(--panel);
  transition:.25s;position:relative;overflow:hidden}
.strip .card::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;
  background:linear-gradient(90deg,transparent,var(--green),transparent);opacity:0;transition:.25s}
.strip .card:hover{transform:translateY(-4px);border-color:var(--line)}
.strip .card:hover::after{opacity:1}
.strip .k{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--muted);text-transform:uppercase}
.strip .v{font-family:var(--mono);font-size:1.12rem;color:#fff;margin-top:8px;font-weight:700}
.strip .v em{font-style:normal;color:var(--green)}

/* perks */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:940px){.grid3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid3{grid-template-columns:1fr}}
.perk{border:1px solid var(--line-soft);border-radius:var(--r);padding:24px;background:var(--panel);transition:.25s}
.perk:hover{border-color:var(--line);transform:translateY(-4px);box-shadow:0 22px 60px -32px rgba(0,255,156,.6)}
.perk .ic{font-size:1.7rem}
.perk h3{font-family:var(--mono);font-size:1rem;margin:14px 0 8px;color:#fff}
.perk p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.7}

/* tracks */
.tracks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:880px){.tracks{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tracks{grid-template-columns:1fr}}
.track{border:1px dashed var(--line);border-radius:12px;padding:16px 18px;background:rgba(0,255,156,.03);
  font-family:var(--mono);font-size:.9rem}
.track b{display:block;color:var(--green);margin-bottom:6px}
.track span{color:var(--muted);font-size:.82rem}

/* rules */
.rules{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:880px){.rules{grid-template-columns:1fr}}
.rules ul{margin:0;padding-left:20px;color:var(--muted);line-height:2}
.rules li b{color:var(--txt)}
.note{border-left:3px solid var(--amber);background:rgba(255,197,61,.07);padding:16px 18px;border-radius:0 12px 12px 0;
  font-family:var(--mono);font-size:.86rem;color:#f2dfae;line-height:1.8}

/* collab */
.collab{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;
  border:1px solid var(--line-soft);border-radius:var(--r);padding:28px;background:var(--panel)}
@media(max-width:760px){.collab{grid-template-columns:1fr;text-align:center}}
.org{display:flex;flex-direction:column;gap:6px}
.org small{font-family:var(--mono);font-size:10px;letter-spacing:3px;color:var(--muted);text-transform:uppercase}
.org b{font-family:var(--mono);font-size:1.1rem;color:#fff}
.org span{color:var(--muted);font-size:.86rem}
/* ---- singularity: the SOET <-> RTS gravity well ---- */
.bh-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;justify-self:center}
.bh-stage{position:relative;width:190px;height:190px;isolation:isolate}
@media(max-width:760px){.bh-stage{width:160px;height:160px}}
.bh-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:none}
.bh-stage::before{
  content:"";position:absolute;inset:-28%;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,rgba(46,230,255,.16),rgba(0,255,156,.07) 45%,transparent 68%);
  animation:bhbreathe 5s ease-in-out infinite
}
@keyframes bhbreathe{50%{transform:scale(1.12);opacity:.65}}
.bh-cap{font-family:var(--mono);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);text-align:center}
.bh-cap b{color:var(--cyan)}
.bh-aura{
  position:fixed;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  border:1px solid var(--cyan);pointer-events:none;z-index:50;opacity:0;transition:opacity .25s;
  box-shadow:0 0 18px rgba(46,230,255,.65),inset 0 0 12px rgba(46,230,255,.35)
}
.bh-aura.on{opacity:1}
.bh-aura i{position:absolute;inset:6px;border-radius:50%;background:var(--cyan);opacity:.55}

/* footer + kiosk card */
footer{border-top:1px solid var(--line-soft);padding:40px 0 60px;position:relative;z-index:2}
.foot-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:28px;align-items:start}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr}}
.kiosk{
  border:1px solid var(--line);border-radius:12px;padding:16px 18px;
  background:linear-gradient(135deg,rgba(0,255,156,.07),rgba(46,230,255,.04));
  font-family:var(--mono);font-size:12px;line-height:1.95;transform:rotate(-1.1deg);
  box-shadow:0 18px 50px -28px rgba(0,255,156,.8)
}
.kiosk .hd{display:flex;justify-content:space-between;color:var(--green);letter-spacing:2px;font-size:10px;
  text-transform:uppercase;border-bottom:1px dashed var(--line);padding-bottom:8px;margin-bottom:8px}
.kiosk .row{display:flex;justify-content:space-between;gap:16px;color:var(--muted)}
.kiosk .row b{color:#fff;font-weight:600}
.foot-note{color:var(--muted);font-size:.88rem;line-height:1.9;font-family:var(--mono)}
.foot-note a{color:var(--cyan);text-decoration:none}
.foot-note h4{color:#fff;font-size:1rem;margin:0 0 10px}

/* ============ GATE PAGES ============ */
.gate-shell{min-height:100vh;display:grid;place-items:center;padding:40px 20px;position:relative;z-index:2}
.gate{width:100%;max-width:640px}
.gate-card{
  border:1px solid var(--line);border-radius:18px;background:rgba(6,10,20,.85);backdrop-filter:blur(8px);
  box-shadow:0 40px 110px -40px rgba(0,255,156,.55),inset 0 0 70px rgba(0,255,156,.03);overflow:hidden
}
.gate-head{padding:26px 28px 0}
.stagebar{display:flex;gap:8px;margin-bottom:20px}
.stagebar i{height:4px;flex:1;border-radius:99px;background:rgba(148,163,184,.18)}
.stagebar i.on{background:linear-gradient(90deg,var(--green),var(--cyan));box-shadow:0 0 14px rgba(0,255,156,.7)}
.gate h1{font-family:var(--mono);font-size:clamp(1.4rem,4.4vw,2rem);margin:0 0 12px;color:#fff;letter-spacing:-1px;line-height:1.25}
.gate .sub{color:var(--muted);font-family:var(--mono);font-size:.9rem;line-height:1.85;margin:0}
.gate .sub em{color:var(--pink);font-style:normal}
.gate-body{padding:22px 28px 28px}
.cipher{
  border:1px solid var(--line-soft);border-radius:12px;background:#02050b;padding:18px;margin:18px 0;
  font-family:var(--mono);font-size:clamp(.85rem,3.1vw,1.1rem);color:var(--cyan);word-break:break-all;
  text-align:center;letter-spacing:1px;box-shadow:inset 0 0 40px rgba(46,230,255,.07)
}
.hintline{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:14px;line-height:1.9}
.hintline b{color:var(--amber)}
form.gform{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.field label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px}
.field input{
  width:100%;padding:14px 16px;border-radius:10px;border:1px solid var(--line-soft);background:#02050b;
  color:var(--green);font-family:var(--mono);font-size:1rem;outline:none;transition:.2s
}
.field input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(0,255,156,.12)}
.field input::placeholder{color:#3d4b60}
.msg{font-family:var(--mono);font-size:13px;min-height:20px;margin-top:4px;line-height:1.6}
.msg.bad{color:var(--pink)}
.msg.good{color:var(--green)}
.shake{animation:shake .38s}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.backlink{display:block;text-align:center;margin-top:20px;font-family:var(--mono);font-size:12px;color:var(--muted);text-decoration:none}
.backlink:hover{color:var(--green)}
.deadcode{position:absolute;left:-9999px;top:-9999px;opacity:0;height:0;width:0;overflow:hidden}

/* login panel */
.login-brand{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;color:var(--muted);
  border-bottom:1px solid var(--line-soft);padding-bottom:14px;margin-bottom:18px}
.login-brand b{color:var(--green)}
.err-box{border:1px solid rgba(255,46,136,.4);background:rgba(255,46,136,.08);color:#ffb3d0;
  font-family:var(--mono);font-size:12px;padding:11px 14px;border-radius:9px;line-height:1.7;margin-top:12px}
.attempts{font-family:var(--mono);font-size:11px;color:var(--muted);text-align:right;margin-top:8px}

/* success modal */
.modal{position:fixed;inset:0;z-index:60;display:none;place-items:center;padding:20px;
  background:rgba(2,4,9,.86);backdrop-filter:blur(6px)}
.modal.show{display:grid;animation:fade .3s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-card{
  max-width:560px;width:100%;border:1px solid var(--green);border-radius:18px;padding:34px 28px;text-align:center;
  background:linear-gradient(160deg,rgba(0,255,156,.10),rgba(6,10,20,.96));
  box-shadow:0 0 0 1px rgba(0,255,156,.25),0 40px 120px -30px rgba(0,255,156,.8);
  animation:pop .45s cubic-bezier(.2,1.5,.4,1)
}
@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
.modal-card .big{font-size:3rem;line-height:1}
.modal-card h2{font-family:var(--mono);font-size:1.5rem;color:var(--green);margin:12px 0 6px}
.modal-card p{color:var(--muted);font-family:var(--mono);font-size:.88rem;line-height:1.8}
.flagbox{font-family:var(--mono);color:var(--cyan);border:1px dashed var(--line);border-radius:10px;
  padding:12px;margin:18px 0;word-break:break-all;font-size:.88rem}
#confetti{position:fixed;inset:0;z-index:70;pointer-events:none;display:none}
#confetti.on{display:block}