/* ============================================================
   MAHENDRA CTF CLUB — main stylesheet
   Theme: dark / ember-crimson / gold, JetBrains Mono
   ============================================================ */

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

:root{
  --bg:            #08090a;
  --bg-card:       #0d1210;
  --bg-card-alt:   #0e0f0f;
  --border:        #2a1414;
  --border-soft:   #1c1c1c;
  --red:           #e0342d;
  --red-bright:    #ff4136;
  --red-dark:      #7f1d1d;
  --gold:          #f4b400;
  --ember:         #ff7a1a;
  --text:          #eaeaea;
  --text-dim:      #9aa39d;
  --text-faint:    #626b66;
  --green-ok:      #4ade80;
  --font: 'JetBrains Mono', 'Courier New', monospace;
  --radius: 4px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  line-height:1.6;
  min-height:100vh;
}

a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
img{ max-width:100%; display:block; }
button, input, select, textarea{ font-family:inherit; }

.container{ max-width:1400px; margin:0 auto; padding:0 32px; }

/* ---------- top info strip (college header) ---------- */
.college-strip{
  background:#000;
  border-bottom:2px solid var(--red-dark);
  padding:14px 32px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  text-align:center;
  flex-wrap:wrap;
}
.college-strip img{ height:56px; width:56px; border-radius:50%; }
.college-strip h1{ font-size:20px; letter-spacing:1px; color:#fff; }
.college-strip p{ font-size:11px; color:var(--text-dim); }

/* ---------- navbar ---------- */
.navbar{
  position:sticky; top:0; z-index:100;
  background:rgba(8,9,10,0.97);
  border-bottom:1px solid var(--red-dark);
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 32px;
  backdrop-filter:blur(6px);
}
.nav-left{ display:flex; align-items:center; gap:14px; }
.nav-toggle{
  width:38px; height:38px; border:1px solid var(--red-dark);
  background:transparent; color:var(--red); border-radius:var(--radius);
  cursor:pointer; font-size:16px; display:none; align-items:center; justify-content:center;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:1px; font-size:15px; color:#fff; }
.brand img{ width:34px; height:34px; border-radius:50%; border:1px solid var(--red-dark); }
.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a{
  padding:8px 14px; font-size:13px; color:var(--text-dim); border:1px solid transparent;
  border-radius:var(--radius); white-space:nowrap;
}
.nav-links a:hover{ color:var(--text); }
.nav-links a.active{ color:var(--red); border-color:var(--red-dark); background:rgba(224,52,45,0.06); }

.nav-right{ display:flex; align-items:center; gap:10px; }
.chip{
  display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-dim);
  border:1px solid var(--border-soft); padding:6px 12px; border-radius:20px;
}
.xp-tag{ color:var(--red); font-weight:700; font-size:13px; }
.auth-btn{
  border:1px solid var(--border-soft); padding:8px 14px; border-radius:var(--radius);
  font-size:12px; color:var(--text-dim);
}
.auth-btn.primary{ background:var(--red); border-color:var(--red); color:#fff; font-weight:700; }
.profile-avatar{
  width:38px; height:38px; border-radius:var(--radius); background:var(--red);
  color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:13px; border:1px solid var(--red-bright);
}

/* mobile nav drawer */
@media (max-width: 980px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position:fixed; top:0; left:0; height:100vh; width:250px; background:#050505;
    border-right:1px solid var(--red-dark); flex-direction:column; align-items:flex-start;
    padding:90px 20px 20px; transform:translateX(-100%); transition:transform .25s ease; z-index:99;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ width:100%; padding:12px 10px; }
  .college-strip{ padding:10px 12px; }
  .college-strip h1{ font-size:14px; }
  .college-strip p{ font-size:9px; }
}

/* ---------- hero ---------- */
.hero{ padding:70px 32px 40px; text-align:center; }
.hero-logos{ display:flex; align-items:center; justify-content:center; gap:20px; margin-bottom:20px; flex-wrap:wrap; }
.hero-logos img{ width:56px; height:56px; border-radius:50%; }
.hero-logos .sep{ width:1px; height:30px; background:var(--border-soft); }
.eyebrow{ color:var(--red); font-size:12px; letter-spacing:2px; margin-bottom:10px; }
.eyebrow span{ color:var(--text-faint); }
.hero h2{ font-size:44px; font-weight:800; color:#fff; letter-spacing:1px; margin-bottom:18px; }
.hero h2 .accent{ color:var(--red); }
.hero p.lead{ max-width:680px; margin:0 auto 30px; color:var(--text-dim); font-size:15px; }
.hero-ctas{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:var(--radius);
  font-size:13px; font-weight:700; cursor:pointer; border:1px solid var(--border-soft); transition:all .15s ease;
}
.btn-primary{ background:var(--red); border-color:var(--red); color:#fff; }
.btn-primary:hover{ background:var(--red-bright); }
.btn-outline{ background:transparent; border-color:var(--border-soft); color:var(--text); }
.btn-outline:hover{ border-color:var(--red-dark); color:var(--red); }
.btn-block{ width:100%; justify-content:center; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ---------- stat grid ---------- */
.stat-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:50px 0;
}
.stat-grid.stat-grid-3{ grid-template-columns:repeat(3,1fr); }
.stat-box{
  background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--radius);
  padding:22px; border-top:2px solid var(--red-dark);
}
.stat-box .num{ font-size:28px; font-weight:800; color:#fff; }
.stat-box .num.red{ color:var(--red); }
.stat-box .lbl{ font-size:11px; color:var(--text-faint); letter-spacing:1px; margin-top:4px; }
@media (max-width:800px){ .stat-grid{ grid-template-columns:repeat(2,1fr);} .stat-grid.stat-grid-3{ grid-template-columns:repeat(2,1fr); } }

hr.rule{ border:none; border-top:1px solid var(--border-soft); margin:40px 0; }

/* ---------- section heading ---------- */
.section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.section-head h3{ font-size:20px; color:#fff; }
.section-head h3 .slash{ color:var(--red); }
.section-head a.view-all{ font-size:12px; color:var(--text-dim); }
.section-head a.view-all:hover{ color:var(--red); }

/* ---------- generic panel/card ---------- */
.panel{
  background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--radius); padding:26px;
}
.panel h4{ color:var(--red); font-size:13px; letter-spacing:1px; margin-bottom:14px; }
.panel h4 .slash{ margin-right:4px; }
.panel li{ position:relative; padding-left:18px; margin-bottom:10px; color:var(--text-dim); font-size:14px; }
.panel li::before{ content:"•"; color:var(--red); position:absolute; left:0; }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:900px){ .two-col{ grid-template-columns:1fr; } }

/* ---------- upcoming banner ---------- */
.upcoming-banner{
  border:1px solid var(--red-dark); border-radius:var(--radius); padding:22px 26px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:linear-gradient(180deg, rgba(224,52,45,0.05), transparent);
}
.upcoming-banner .tag{ color:var(--red); font-size:11px; letter-spacing:1px; margin-bottom:6px; }
.upcoming-banner h4{ color:#fff; font-size:18px; margin-bottom:4px; }
.upcoming-banner p{ color:var(--text-dim); font-size:13px; margin-bottom:14px; }
.upcoming-banner .banner-poster{
  flex:0 0 auto; width:120px; height:120px; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--red-dark); display:block;
}
.upcoming-banner .banner-poster img{ width:100%; height:100%; object-fit:cover; display:block; }
.upcoming-banner .banner-body{ flex:1 1 auto; min-width:220px; }
.upcoming-banner .banner-body .btn{ display:inline-block; }
@media (max-width:600px){
  .upcoming-banner{ flex-direction:column; align-items:flex-start; }
  .upcoming-banner .banner-poster{ width:100%; height:180px; }
}

/* two banner cards side by side (live + upcoming both open at once) */
.featured-events-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:stretch;
}
.featured-events-grid .event-block{ height:100%; }
@media (max-width:900px){
  .featured-events-grid{ grid-template-columns:1fr; }
}

/* ---------- event cards ---------- */
.event-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
@media (max-width:1000px){ .event-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:600px){ .event-grid{ grid-template-columns:1fr; } }

/* Each grid cell: an event card with its own writeup stacked
   directly below it. Keeping the pairing INSIDE one grid item (rather
   than card and writeup being separate grid children) is what keeps
   the writeup directly under its own event instead of drifting into
   the next column when the grid wraps. */
.event-block{ display:flex; flex-direction:column; gap:14px; }
.event-card{
  border:1px solid var(--border-soft); border-radius:var(--radius); padding:18px; background:var(--bg-card-alt);
  display:flex; flex-direction:column;
}
.event-card .card-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px;
}
.event-card .card-head-badges{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.event-card .date{ font-size:11px; color:var(--text-faint); white-space:nowrap; }
.event-card .tag{
  display:inline-flex; align-items:center; border:1px solid var(--red-dark); color:var(--red);
  font-size:11px; letter-spacing:.3px; padding:4px 12px; border-radius:14px; white-space:nowrap; line-height:1;
}
.event-card h5{ font-size:15px; color:#fff; margin:0 0 12px; }
.event-card .poster{
  border-radius:var(--radius); overflow:hidden; margin-bottom:14px; position:relative; cursor:pointer;
  border:1px solid var(--border-soft); height:160px;
}
.event-card .poster img{ width:100%; height:100%; object-fit:cover; display:block; }
.event-card p.desc{ color:var(--text-dim); font-size:13px; margin-bottom:12px; }
.event-card .meta{ border-top:1px solid var(--border-soft); padding-top:12px; font-size:12px; color:var(--text-dim); }
.event-card .meta .participants{ color:var(--red); font-weight:700; }
.event-card .meta .coord{ margin-top:6px; color:var(--red-bright); opacity:.9; }

/* Writeup section — same card shell as .event-card so it reads as
   "belongs with the event above it", not a new kind of block. */
.event-writeup{
  border:1px solid var(--border-soft); border-radius:var(--radius); padding:16px 18px; background:var(--bg-card-alt);
}
.event-writeup h6{ color:var(--red); font-size:12px; letter-spacing:1px; margin-bottom:10px; }
.event-writeup h6 .slash{ margin-right:4px; }
.event-writeup p.writeup-title{ color:#fff; font-size:14px; font-weight:700; margin:0 0 8px; }
.event-writeup p.desc{ color:var(--text-dim); font-size:13px; margin:0; white-space:pre-line; }
.event-writeup .writeup-link{ color:var(--red); font-size:13px; font-weight:600; display:inline-block; }
.event-writeup p.desc + .writeup-link{ margin-top:10px; }
.event-writeup .writeup-link:hover{ color:var(--red-bright); }
.event-writeup .empty-note{ padding:0; font-size:12px; }

/* Write-up card poster — same poster already on the event card
   above, reused as the write-up's visual. Only becomes clickable
   (writeup-poster-clickable) when this event's writeup has a PDF/link. */
.event-writeup .writeup-poster{
  display:block; border-radius:var(--radius); overflow:hidden; margin-bottom:12px;
  border:1px solid var(--border-soft); height:160px;
}
.event-writeup .writeup-poster img{ width:100%; height:100%; object-fit:cover; display:block; }
.event-writeup a.writeup-poster-clickable{ cursor:pointer; transition:border-color .15s; }
.event-writeup a.writeup-poster-clickable:hover{ border-color:var(--red); }


/* ---------- poster lightbox (tap-to-view full image) ---------- */
.poster-lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,0.9); z-index:300; display:none;
  align-items:center; justify-content:center; padding:30px; backdrop-filter:blur(3px);
}
.poster-lightbox.open{ display:flex; }
.poster-lightbox img{
  max-width:100%; max-height:90vh; border-radius:var(--radius);
  border:1px solid var(--border-soft); object-fit:contain; box-shadow:0 10px 40px rgba(0,0,0,0.6);
}
.poster-lightbox-close{
  position:absolute; top:20px; right:24px; background:none; border:1px solid var(--border-soft);
  color:var(--text); width:38px; height:38px; border-radius:50%; font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:border-color .15s, color .15s;
}
.poster-lightbox-close:hover{ border-color:var(--red); color:var(--red); }

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--border-soft); padding:40px 32px; margin-top:60px; text-align:center; }
footer .flogos{ display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:16px; }
footer .flogos img{ width:34px; height:34px; border-radius:50%; }
footer .flogos .sep{ width:1px; height:20px; background:var(--border-soft); }
footer p{ font-size:12px; color:#fff; max-width:800px; margin:0 auto; }
footer .copy{ margin-top:10px; font-size:11px; }
footer .staff-credit{ margin-top:14px; font-size:12px; color:#fff; }
footer .copy a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
footer .copy a:hover{ color:var(--red); }

/* ---------- social links (footer) ---------- */
.social-links{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:20px; }
.social-links a{
  width:38px; height:38px; border:1px solid var(--red-dark);
  background:transparent; color:var(--red); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  transition:background 0.15s, color 0.15s;
}
.social-links a:hover{ background:var(--red); color:#fff; }
.social-links a svg{ width:18px; height:18px; fill:currentColor; }

/* ---------- clickable credit / author links ---------- */
.desc a, .chall-credit a{ color:var(--red); text-decoration:underline; }
.desc a:hover, .chall-credit a:hover{ color:var(--red-bright); }
.chall-credit{ display:inline-block; font-size:12px; color:var(--text-faint); }

/* ---------- hall of fame name links ---------- */
.frame-card h5 a{ color:inherit; text-decoration:none; }
.frame-card h5 a:hover{ color:var(--red); text-decoration:underline; }

/* ============================================================
   AUTH PAGES (login / register)
   ============================================================ */
.auth-wrap{ min-height:calc(100vh - 200px); display:flex; align-items:center; justify-content:center; padding:60px 20px; }
.auth-box{
  width:100%; max-width:420px; background:var(--bg-card); border:1px solid var(--border-soft);
  border-top:2px solid var(--red); border-radius:var(--radius); padding:36px;
}
.auth-box .eyebrow{ text-align:left; }
.auth-box h2{ font-size:24px; color:#fff; margin-bottom:6px; }
.auth-box p.sub{ color:var(--text-dim); font-size:13px; margin-bottom:26px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:11px; color:var(--text-dim); letter-spacing:1px; margin-bottom:6px; }
.field input{
  width:100%; background:#000; border:1px solid var(--border-soft); color:var(--text);
  padding:12px 14px; border-radius:var(--radius); font-size:14px; outline:none;
}
.field input:focus{ border-color:var(--red-dark); }
.form-msg{ font-size:12px; margin-bottom:14px; min-height:16px; }
.form-msg.error{ color:var(--red-bright); }
.form-msg.ok{ color:var(--green-ok); }
.auth-box .switch{ text-align:center; margin-top:20px; font-size:13px; color:var(--text-dim); }
.auth-box .switch a{ color:var(--red); font-weight:700; }

/* ============================================================
   CHALLENGES — container / box style like a real CTF platform
   ============================================================ */
.filter-bar{ display:flex; gap:10px; margin-bottom:24px; flex-wrap:wrap; }
.filter-chip{
  border:1px solid var(--border-soft); padding:7px 14px; border-radius:16px; font-size:12px; color:var(--text-dim); cursor:pointer;
}
.filter-chip.active{ border-color:var(--red); color:var(--red); }

.challenge-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:18px;
}
.challenge-grid.grouped{ display:block; }
.category-group{ margin-bottom:32px; }
.category-group-head{
  display:flex; align-items:center; gap:10px; margin-bottom:16px;
  padding-bottom:8px; border-bottom:1px solid var(--border-soft);
}
.category-group-head .dot{ width:8px; height:8px; border-radius:50%; background:var(--red); flex:0 0 auto; }
.category-group-head h4{ font-size:15px; letter-spacing:1px; color:#fff; text-transform:uppercase; }
.category-group-head .count{ font-size:11px; color:var(--text-faint); margin-left:auto; }
.category-group .challenge-grid{ margin-bottom:0; }
.chall-box{
  background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--radius);
  padding:20px; cursor:pointer; position:relative; transition:border-color .15s ease, transform .1s ease;
  border-top:3px solid var(--border-soft); overflow:hidden;
}
.chall-box:hover{ border-color:var(--red-dark); transform:translateY(-2px); }
.chall-box.solved{ border-top-color:var(--green-ok); }
.chall-box .cat{ font-size:10px; letter-spacing:1px; color:var(--text-faint); }
.chall-box h5{ font-size:16px; color:#fff; margin:10px 0 14px; min-height:40px; }
.chall-box .row{ display:flex; align-items:center; justify-content:space-between; }
.diff{ font-size:11px; padding:3px 9px; border-radius:10px; font-weight:700; }
.diff.easy{ background:rgba(74,222,128,0.12); color:var(--green-ok); }
.diff.medium{ background:rgba(244,180,0,0.12); color:var(--gold); }
.diff.hard{ background:rgba(224,52,45,0.15); color:var(--red-bright); }
.pts{ color:var(--red); font-weight:800; font-size:14px; }
.blood-badge{ display:inline-block; margin-top:8px; font-size:11px; font-weight:700; color:var(--gold); opacity:0.9; }
.chall-box .solves{ font-size:11px; color:var(--text-faint); margin-top:10px; }
.chall-box .solved-badge{
  position:absolute; top:12px; right:12px; color:var(--green-ok); font-size:16px;
}

/* corner ribbon showing which blood-bonus tier is still up for grabs on
   this specific challenge (or that all three have been claimed) — a
   proper "tied" diagonal sash across the card corner, folded and
   stitched at both ends, not a small pill badge. Sits in the TOP-RIGHT
   corner (mirrored) so it never crosses over the challenge title text,
   which starts at the top-left.

   IMPORTANT: this uses its OWN small clip box (.blood-ribbon-wrap)
   instead of relying on .chall-box's overflow:hidden. Clipping against
   the whole card is fragile — get the numbers even slightly wrong and
   the rotated strip's left end (where the "F" of "First Blood" lives)
   swings above the card's top edge and gets silently cut off. A fixed
   120x120 wrap gives a known, generous coordinate space so the full
   text sits inside it with margin to spare, and only the ribbon's
   blank pointed tails (no text on them) get clipped. */
.blood-ribbon-wrap{
  position:absolute; top:0; right:0; width:130px; height:130px;
  overflow:hidden; pointer-events:none;
}
.blood-ribbon{
  position:absolute; top:34px; right:-38px; left:auto; width:190px;
  transform:rotate(45deg); transform-origin:center;
  background:linear-gradient(135deg, var(--red-bright), #7f1d1d);
  color:#fff; font-size:10.5px; font-weight:800; letter-spacing:.02em;
  text-transform:uppercase; text-align:center; padding:6px 0;
  white-space:nowrap; /* keep "+100" on the same line as the label, never wrapped/clipped */
  box-shadow:0 3px 10px rgba(0,0,0,0.45), inset 0 -2px 0 rgba(0,0,0,0.2);
  border-top:1px solid rgba(255,255,255,0.55);
  border-bottom:1px solid rgba(0,0,0,0.3);
}
/* stitched thread detail near each folded end, for the "tied" look */
.blood-ribbon::before, .blood-ribbon::after{
  content:""; position:absolute; top:2px; bottom:2px; width:1px;
  border-left:1px dashed rgba(0,0,0,0.4);
}
.blood-ribbon::before{ left:20px; }
.blood-ribbon::after{ right:20px; }

/* Ribbon colour presets — admin-selectable per event (default for every
   challenge in it, defaults to red) and per-challenge (overrides the
   event's colour just for that card). See admin/events.html "Ribbon
   colour" and admin/challenges.html "Ribbon colour" fields. */
.blood-ribbon.color-red{    background:linear-gradient(135deg, var(--red-bright), #7f1d1d); color:#fff; }
.blood-ribbon.color-gold{   background:linear-gradient(135deg, var(--gold), #a97a00); color:#1c1400; }
.blood-ribbon.color-green{  background:linear-gradient(135deg, var(--green-ok), #157a3d); color:#062a13; }
.blood-ribbon.color-blue{   background:linear-gradient(135deg, #4da6ff, #0b4f91); color:#04182b; }
.blood-ribbon.color-purple{ background:linear-gradient(135deg, #b388ff, #5b21b6); color:#1c0033; }
.blood-ribbon.color-orange{ background:linear-gradient(135deg, var(--ember), #a34700); color:#1c0e00; }
.blood-ribbon.color-pink{   background:linear-gradient(135deg, #ff8fc7, #b3155e); color:#2a0013; }
.blood-ribbon.color-silver{ background:linear-gradient(135deg, #d9d9d9, #8d8d8d); color:#161616; }

/* "All Claimed" always shows the neutral silver look regardless of the
   chosen colour — set by JS instead of a color-* class once every tier
   on a challenge has been solved. */
.blood-ribbon.claimed{
  background:linear-gradient(135deg, #d9d9d9, #8d8d8d); color:#161616;
}
.chall-box.solved .blood-ribbon-wrap{ display:none; } /* no point advertising a bonus you already can't get */

/* ---- Individual challenge release scheduling: Locked state ----
   See supabase/sql/006_challenge_scheduling_and_hof.sql (server
   enforcement) and html/js/challenges.js (rendering). A locked
   card intentionally looks dimmer/inert rather than just missing,
   so players can see what's coming without being able to open it. */
.chall-box.locked{ cursor:default; opacity:0.62; border-top-color:var(--border-soft); }
.chall-box.locked:hover{ transform:none; border-color:var(--border-soft); }
.chall-box .lock-badge{ position:absolute; top:12px; right:12px; font-size:15px; }
.unlock-note{
  margin-top:12px; font-size:11px; color:var(--text-faint);
  border-top:1px dashed var(--border-soft); padding-top:8px;
}
.unlock-note .countdown{ color:var(--red); font-weight:700; }
.modal-locked-notice{
  margin:12px 0 18px; padding:14px 16px; border:1px solid var(--red-dark);
  border-radius:var(--radius); background:rgba(224,52,45,0.06); color:#fff; font-size:14px;
}

/* modal */
.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:200; display:none;
  align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(3px);
}
.modal-overlay.open{ display:flex; }
.modal-box{
  width:100%; max-width:560px; max-height:88vh; overflow-y:auto; background:var(--bg-card);
  border:1px solid var(--red-dark); border-radius:var(--radius); padding:30px; position:relative;
}
.modal-close{
  position:absolute; top:16px; right:18px; background:none; border:none; color:var(--text-dim);
  font-size:20px; cursor:pointer;
}
.modal-box .cat{ font-size:11px; color:var(--text-faint); letter-spacing:1px; }
.modal-box h3{ font-size:22px; color:#fff; margin:8px 0 14px; }
.modal-box .meta-row{ display:flex; gap:10px; margin-bottom:8px; align-items:center; }
.modal-author{ font-size:12px; color:var(--text-faint); margin-bottom:18px; }
.modal-author span{ color:var(--text-dim); font-weight:600; }

/* ---- modal "Blood Claims" panel — who got first/second/third blood
   on this challenge, plus total solve count. Data comes straight
   from the public solves/profiles tables (see challenges.js's
   loadSolvers()), never guessed client-side. ---- */
.modal-solvers{
  margin-top:18px; padding:12px 14px; background:var(--bg-card-alt);
  border:1px solid var(--border-soft); border-radius:var(--radius);
}
.solvers-head{
  font-size:11px; color:var(--text-faint); letter-spacing:1px;
  text-transform:uppercase; margin-bottom:10px;
}
.solvers-head .slash{ color:var(--red); }
.solver-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; font-size:13px; padding:5px 0;
}
.solver-row + .solver-row{ border-top:1px dashed var(--border-soft); }
.solver-row .tier{ color:var(--text-dim); white-space:nowrap; }
.solver-row.tier-0 .tier{ color:var(--gold); }
.solver-row.tier-1 .tier{ color:#d9d9d9; }
.solver-row.tier-2 .tier{ color:var(--ember); }
.solver-row .name{ color:var(--text); font-weight:600; flex:1; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-left:10px; }
.solver-row .time{ color:var(--text-faint); font-size:11px; white-space:nowrap; margin-left:10px; }
.solvers-empty{ color:var(--text-faint); font-size:12px; }
.solvers-total{
  margin-top:8px; padding-top:8px; border-top:1px solid var(--border-soft);
  font-size:12px; color:var(--text-dim);
}
.modal-box p.desc{ color:var(--text-dim); font-size:14px; margin-bottom:18px; line-height:1.7; }
.file-link{
  display:flex; align-items:center; gap:10px; border:1px solid var(--border-soft); border-radius:var(--radius);
  padding:12px 14px; margin-bottom:18px; font-size:13px; color:var(--text); background:#000;
}
.file-link:hover{ border-color:var(--red-dark); color:var(--red); }
.hint-toggle{ font-size:12px; color:var(--gold); cursor:pointer; margin-bottom:10px; display:inline-block; }
.hint-box{ display:none; background:#000; border:1px dashed var(--border-soft); padding:12px 14px; border-radius:var(--radius); font-size:13px; color:var(--text-dim); margin-bottom:18px; }
.hint-box.open{ display:block; }
.flag-form{ display:flex; gap:10px; margin-top:6px; }
.flag-form input{
  flex:1; background:#000; border:1px solid var(--border-soft); color:var(--text); padding:12px 14px;
  border-radius:var(--radius); font-size:13px; outline:none;
}
.flag-form input:focus{ border-color:var(--red); }
.chall-msg{ font-size:12px; margin-top:10px; min-height:16px; }
.chall-msg.error{ color:var(--red-bright); }
.chall-msg.ok{ color:var(--green-ok); }

/* ============================================================
   LEADERBOARD
   ============================================================ */
.leader-table{ width:100%; border-collapse:collapse; background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--radius); overflow:hidden; }
.leader-table th{ text-align:left; font-size:11px; letter-spacing:1px; color:var(--text-faint); padding:16px 20px; border-bottom:1px solid var(--border-soft); }
.leader-table td{ padding:16px 20px; border-bottom:1px solid var(--border-soft); font-size:14px; }
.leader-table tr:last-child td{ border-bottom:none; }
.leader-table tr.me{ background:rgba(224,52,45,0.06); }
.rank-num{ font-weight:800; color:var(--text-dim); }
.rank-num.gold{ color:var(--gold); }
.rank-num.silver{ color:#c9c9c9; }
.rank-num.bronze{ color:#c98a4b; }
.op-tag{ display:inline-block; border:1px solid var(--red-dark); color:var(--red); font-size:10px; font-weight:800; padding:2px 6px; border-radius:3px; margin-right:8px; }
.score-cell{ color:var(--red); font-weight:800; }
.badge-icon{ font-size:16px; margin-right:4px; }
.empty-row td{ text-align:center; color:var(--text-faint); padding:40px; }

/* ============================================================
   HALL OF FRAME
   ============================================================ */
.frame-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:900px){ .frame-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .frame-grid{ grid-template-columns:1fr;} }

/* Faculty/staff row — same .frame-card look as the creator grid
   below, just centered instead of stretched across 4 columns (there
   are only ever a couple of these, e.g. the club's professors). */
.hof-faculty-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px; }
.hof-faculty-grid .frame-card{ width:220px; flex:0 1 220px; }

/* Permanent Hall of Fame roster (exactly 4 fixed members) — its own
   class, separate from .frame-grid (used by CTF Contributors below,
   which must keep stretching across 4 columns for variable-length
   lists). Row width is reserved for 5 card slots so the 4 real cards
   read as centered with balanced breathing room either side, rather
   than stretched edge-to-edge; cards/avatars are sized a touch
   smaller than the standard .frame-card for a clean, compact look. */
.hof-core-grid{
  display:flex; flex-wrap:wrap; justify-content:center; gap:18px;
  max-width:calc(5 * 190px + 4 * 18px); margin-left:auto; margin-right:auto;
}
.hof-core-grid .frame-card{ width:190px; flex:0 0 190px; padding:20px; }
.hof-core-grid .frame-card .avatar{ width:76px; height:76px; }
.hof-core-grid .frame-card .avatar.avatar-fallback{ font-size:26px; }
.hof-core-grid .frame-card h5{ font-size:15px; }
@media (max-width:900px){ .hof-core-grid{ max-width:calc(3 * 190px + 2 * 18px); } }
@media (max-width:520px){ .hof-core-grid{ max-width:190px; } }

/* ---- Hall of Fame event picker (public page) ----
   Polished red-themed treatment: richer tinted background, a
   crisper 2px border with subtle depth, and a larger/brighter
   arrow for clear visibility. Functionality (native <select>,
   same id, same change handling in hall-of-fame.js) is untouched. */
.hof-select-field{ max-width:420px; margin-bottom:24px; }
.hof-select-field label{
  display:block; font-size:12px; font-weight:700; color:var(--text);
  margin-bottom:8px; letter-spacing:.06em; text-transform:uppercase;
}
.hof-select-field select{
  width:100%;
  background-color:rgba(224,52,45,0.14);
  background-image:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.08)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23ff4136' d='M5 7l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat, no-repeat;
  background-position:0 0, right 14px center;
  background-size:auto, 16px 16px;
  border:2px solid var(--red); border-radius:8px; padding:13px 44px 13px 16px;
  color:var(--text); font-family:inherit; font-size:14px; font-weight:600; letter-spacing:.01em;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  box-shadow:0 0 0 1px rgba(224,52,45,0.35) inset, 0 3px 10px rgba(224,52,45,0.18);
  cursor:pointer;
  transition:border-color .15s, box-shadow .15s, background-color .15s;
}
.hof-select-field select:hover{
  border-color:var(--red-bright); background-color:rgba(224,52,45,0.19);
  box-shadow:0 0 0 1px rgba(224,52,45,0.45) inset, 0 3px 12px rgba(224,52,45,0.26);
}
.hof-select-field select::-ms-expand{ display:none; }
.hof-select-field select option{ background:var(--bg-card-alt); color:var(--text); }
.hof-select-field select:focus{
  outline:none; border-color:var(--red-bright);
  box-shadow:0 0 0 3px rgba(224,52,45,0.32), 0 3px 14px rgba(224,52,45,0.3);
}

/* ---------- Hall of Fame — Write-ups (small poster cards) ----------
   Exactly 3 per row on desktop, reflowing to 2 then 1 on narrower
   viewports — same breakpoints already used by .event-grid elsewhere
   on the site, kept as its own class so it can't be affected by (or
   accidentally affect) that grid. */
.hof-writeup-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
@media (max-width:900px){ .hof-writeup-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:600px){ .hof-writeup-grid{ grid-template-columns:1fr; } }

.hof-writeup-card{
  display:block; border:1px solid var(--border-soft); border-radius:var(--radius); overflow:hidden;
  background:var(--bg-card-alt); text-decoration:none; transition:border-color .15s;
}
a.hof-writeup-card{ cursor:pointer; }
a.hof-writeup-card:hover{ border-color:var(--red); }
.hof-writeup-poster{ height:130px; }
.hof-writeup-poster img{ width:100%; height:100%; object-fit:contain; display:block; }
.hof-writeup-title{ padding:10px 12px; font-size:13px; font-weight:600; color:#fff; border-top:1px solid var(--border-soft); }
.frame-card{ background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--radius); padding:26px; text-align:center; }
.frame-card .avatar{
  width:96px; height:96px; border-radius:50%; margin:0 auto 16px; border:2px solid var(--red);
  overflow:hidden; box-shadow:0 0 14px rgba(224,52,45,0.35);
}
.frame-card .avatar img{ width:100%; height:100%; object-fit:cover; }
.frame-card .avatar.avatar-fallback{
  display:flex; align-items:center; justify-content:center;
  font-size:32px; font-weight:800; color:var(--red); background:var(--bg-card-alt, rgba(224,52,45,0.08));
}
.frame-card h5{ color:#fff; font-size:16px; margin-bottom:4px; }
.frame-card .role{ color:var(--red); font-size:12px; }

/* ============================================================
   PROFILE PAGE
   ============================================================ */
.profile-hero{ display:flex; align-items:center; gap:22px; margin-bottom:36px; flex-wrap:wrap; }
.profile-hero .avatar-lg{
  width:88px; height:88px; border-radius:var(--radius); background:var(--red); color:#fff;
  font-weight:800; font-size:28px; display:flex; align-items:center; justify-content:center; border:1px solid var(--red-bright);
}
.profile-hero h2{ font-size:26px; color:#fff; }
.profile-hero .rank-line{ color:var(--text-dim); font-size:13px; margin-top:6px; }
.profile-hero .rank-line b{ color:var(--red); }

.profile-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:40px; }
@media (max-width:800px){ .profile-stats{ grid-template-columns:repeat(2,1fr);} }

.solved-list .item{
  display:flex; align-items:center; justify-content:space-between; padding:14px 18px;
  border:1px solid var(--border-soft); border-radius:var(--radius); margin-bottom:10px; background:var(--bg-card);
}
.solved-list .item .name{ color:#fff; font-size:14px; }
.solved-list .item .cat{ color:var(--text-faint); font-size:11px; margin-top:3px; }
.solved-list .item .pts{ color:var(--green-ok); font-weight:800; }

.streak-strip{ display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
.streak-day{ width:26px; height:26px; border-radius:4px; background:#151515; border:1px solid var(--border-soft); }
.streak-day.hit{ background:var(--red); border-color:var(--red-bright); }

.badge-row{ display:flex; gap:14px; flex-wrap:wrap; }
.badge-pill{ border:1px solid var(--border-soft); border-radius:20px; padding:8px 16px; font-size:12px; color:var(--text-dim); display:flex; gap:6px; align-items:center; }

.loading-note, .empty-note{ color:var(--text-faint); font-size:13px; padding:20px 0; }

/* utility */
.mt-40{ margin-top:40px; } .mb-20{ margin-bottom:20px; }
.center{ text-align:center; }
.page-title{ padding:36px 0 10px; }
.page-title h2{ font-size:22px; color:#fff; }
.page-title .slash{ color:var(--red); }
main{ min-height: 60vh; }

/* ---------- live events / registration (v3) ---------- */
.upcoming-banner.is-live{
  border-color:var(--gold);
  background:linear-gradient(180deg, rgba(244,180,0,0.08), transparent);
}
.upcoming-banner .tag.live{ color:var(--gold); }
.banner-poster-blank{
  display:flex; align-items:center; justify-content:center; font-size:40px;
  background:var(--bg-card-alt);
}
.countdown-row{ font-size:13px; color:var(--text-dim); margin-bottom:14px; }
.countdown-row .countdown, .countdown{ color:var(--gold); font-weight:800; font-variant-numeric:tabular-nums; }
.countdown-row.live{ color:var(--gold); }
.banner-ctas{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.live-pill{
  display:inline-flex; align-items:center; gap:6px; float:right; font-size:11px; font-weight:800;
  color:var(--gold); border:1px solid var(--gold); padding:3px 10px; border-radius:14px; letter-spacing:.04em;
}
.live-pill .dot{
  width:7px; height:7px; border-radius:50%; background:var(--gold); display:inline-block;
  animation:live-pulse 1.4s infinite ease-in-out;
}
@keyframes live-pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.4; transform:scale(1.3); } }
.event-card.is-live{ border-color:var(--gold); }

.card-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:auto; padding-top:14px; border-top:1px solid var(--border-soft); }

/* ---------- live countdown timers (start / end / registration) ---------- */
.live-countdown{
  font-size:13px; margin-bottom:10px; color:var(--text-dim);
  display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
}
.live-countdown .lc-label{ font-weight:600; }
.live-countdown .lc-value{
  color:var(--gold); font-weight:800; font-size:14.5px;
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}

.live-countdown--start .lc-value{ color:var(--gold); }

.live-countdown--end .lc-label{ color:var(--red-bright); }
.live-countdown--end .lc-value{ color:var(--red-bright); }

.live-countdown--regclose .lc-value{ color:var(--ember); }

.live-countdown--regopen .lc-value{ color:var(--text); }

.live-countdown.urgent .lc-value{ color:var(--red-bright); animation:lc-urgent-blink 1s infinite; }
@keyframes lc-urgent-blink{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }

.admin-edit-pencil{
  font-size:11px; color:var(--text-faint); border:1px dashed var(--border); padding:6px 10px;
  border-radius:var(--radius); align-self:center;
}
.admin-edit-pencil:hover{ color:var(--gold); border-color:var(--gold); }

.auth-btn.admin-btn{ border-color:var(--gold); color:var(--gold); }
.auth-btn.admin-btn:hover{ background:var(--gold); color:#000; }

/* event registration page */
.event-reg-summary{ border:1px solid var(--border-soft); border-radius:var(--radius); padding:16px; margin-bottom:18px; background:var(--bg-card-alt); }
.reg-step{ margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid var(--border-soft); }
.reg-step:last-of-type{ border-bottom:none; padding-bottom:0; margin-bottom:20px; }
.reg-step-head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.reg-step-head h4{ margin:0; font-size:1rem; color:#fff; }
.reg-step-num{
  display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%;
  background:var(--red-dark); color:#fff; font-weight:800; font-size:.85rem; flex-shrink:0;
}
.team-member-row{
  border:1px solid var(--border-soft); border-radius:var(--radius); padding:16px; margin-bottom:14px; background:var(--bg-card-alt);
  position:relative;
}
.team-member-row::before{
  content:attr(data-i); position:absolute; top:-10px; left:14px; background:var(--red-dark); color:#fff;
  font-size:11px; font-weight:800; padding:2px 9px; border-radius:10px;
}
.team-member-row .rule{ display:none; }
.remove-member-btn{ margin-top:4px; }
.payment-block{ border:1px solid var(--gold); border-radius:var(--radius); padding:16px; margin:0 0 16px; background:rgba(244,180,0,0.06); }
.qr-box{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.qr-box img{ width:140px; height:140px; object-fit:contain; border-radius:var(--radius); border:1px solid var(--border-soft); background:#fff; }

/* ---------- event registration form fields (v3.1) ----------
   These match admin.css's .admin-field / .admin-grid-2 look, but live
   here so event-register.html (a PUBLIC page) renders them properly —
   it never loads admin.css. Without this block the form fell back to
   plain unstyled stacked inputs. */
.panel{
  background:var(--bg-card); border:1px solid var(--border-soft);
  border-radius:var(--radius); padding:28px; margin-bottom:24px;
}
.panel h4{ color:#fff; font-size:1.05rem; margin-bottom:6px; }

.admin-field{ margin-bottom:16px; }
.admin-field label{ display:block; font-size:.78rem; color:var(--text-dim); margin-bottom:6px; }
.admin-field input, .admin-field select, .admin-field textarea{
  width:100%; background:var(--bg-card-alt); border:1px solid var(--border-soft);
  border-radius:var(--radius); padding:11px 13px; color:var(--text); font-family:var(--font); font-size:.92rem;
}
.admin-field input:focus, .admin-field select:focus, .admin-field textarea:focus{
  outline:none; border-color:var(--red-dark);
}
.admin-field textarea{ min-height:80px; resize:vertical; }
.admin-field .hint-text{ font-size:.74rem; color:var(--text-faint); margin-top:5px; line-height:1.4; }

.admin-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:700px){ .admin-grid-2{ grid-template-columns:1fr; } }

.admin-actions{ display:flex; gap:10px; flex-wrap:wrap; }

.rule{ border:none; border-top:1px solid var(--border-soft); margin:18px 0; }

/* ---------- per-event points row (challenges page) ---------- */
.event-points-row{
  background:var(--bg-card); border:1px solid var(--border-soft); border-radius:var(--radius);
  padding:14px 18px; margin-bottom:20px; font-size:14px; color:var(--text);
}
.event-points-row b{ color:var(--gold); }
.debt-note{ color:var(--red-bright); font-size:12px; }