/* ============================================================
   Samurai CTF — "Code of the Blade"
   Global theme · Feudal Japan × Hacker Dark
   Palette: ink black / blood red / forge gold
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Share+Tech+Mono&family=Noto+Serif+JP:wght@300;400;700&display=swap');

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --bg:          #070707;
  --bg2:         #0b0808;
  --bg3:         #100b0b;
  --surface:     rgba(20, 12, 12, 0.82);
  --surface2:    rgba(30, 18, 18, 0.85);
  --border:      rgba(192, 57, 43, 0.22);
  --border2:     rgba(224, 69, 58, 0.55);
  --red:         #e0453a;
  --red-glow:    #ff5b4d;
  --red-deep:    #6e0f0a;
  --red-bright:  #ff2020;
  --gold:        #f0c667;
  --gold-dim:    #8a6a22;
  --green:       #58d68d;
  --text:        #f7f3ec;
  --text-dim:    #beb2a0;
  --text-faint:  #55493b;
  --font-title:  'Cinzel', serif;
  --font-mono:   'Share Tech Mono', monospace;
  --font-body:   'Noto Serif JP', Georgia, serif;
  --glow-red:      0 0 10px rgba(255,91,77,.6), 0 0 30px rgba(224,69,58,.32);
  --glow-red-lg:   0 0 18px rgba(255,91,77,.85), 0 0 54px rgba(224,69,58,.45), 0 0 120px rgba(224,69,58,.2);
  --glow-gold:     0 0 8px rgba(240,198,103,.65), 0 0 22px rgba(240,198,103,.28);
  --katana-blade:  linear-gradient(to right, transparent, var(--red) 20%, var(--red-glow) 55%, var(--text) 88%, var(--text-dim));
}

/* ── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--red); color: #fff; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--red); border-radius: 2px; }

/* ── Cinematic scene (every page) ──────────────────────────── */
/* rising sun + mountain haze + mist + scanlines + vignette     */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* scanlines */
    repeating-linear-gradient(0deg, rgba(255,255,255,.016) 0 1px, transparent 1px 3px),
    /* rising sun on the horizon */
    radial-gradient(ellipse 90% 65% at 50% 115%, #1c0606 0%, #0b0303 48%, var(--bg) 100%),
    /* faint blood sun core */
    radial-gradient(ellipse 46% 30% at 50% 108%, rgba(200,30,20,.22) 0%, transparent 70%),
    /* top crimson haze */
    radial-gradient(ellipse 60% 40% at 50% -10%, rgba(120,10,10,.14) 0%, transparent 70%),
    /* drifting mist breaths */
    radial-gradient(ellipse 42% 30% at 15% 88%, rgba(192,57,43,.08), transparent 70%),
    radial-gradient(ellipse 46% 34% at 85% 84%, rgba(212,168,67,.04), transparent 70%),
    /* vignette */
    radial-gradient(ellipse 105% 100% at 50% 45%, transparent 55%, rgba(0,0,0,.5) 100%);
}

/* scroll-frame border with gold corners (every page) */
body::after {
  content: '';
  position: fixed;
  inset: 12px;
  z-index: 4000;
  pointer-events: none;
  border: 1px solid rgba(192,57,43,.16);
  box-shadow:
    -18vw 0 60vw -20vw rgba(200,30,20,.05) inset,
     18vw 0 60vw -20vw rgba(200,30,20,.05) inset;
}
body::after {
  --frame-corner: 26px;
  background:
    linear-gradient(var(--gold), var(--gold)) top left / var(--frame-corner) 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) top left / 1px var(--frame-corner) no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom right / var(--frame-corner) 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom right / 1px var(--frame-corner) no-repeat;
  filter: drop-shadow(0 0 6px rgba(240,198,103,.35));
}

/* petals/embers canvas — floats between scene and content */
#particles-bg {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* ── Navigation ────────────────────────────────────────────── */
#navigationBar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: linear-gradient(to bottom, rgba(7,4,4,.92), rgba(7,4,4,.78));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  padding: 0 28px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#navigationBar::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 20%;
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--red-glow), transparent);
  opacity: .5;
}

#navigationBar .nav-brand {
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 700;
  color: var(--red-glow);
  text-decoration: none;
  letter-spacing: .16em;
  text-shadow: var(--glow-red);
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

#navigationBar .nav-brand::before { content: '⚔'; font-size: 18px; }

#navigationBar .nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}

#navigationBar .nav-links a {
  position: relative;
  font-family: var(--font-title);
  font-size: 11.5px;
  letter-spacing: .14em;
  color: #ffffff;
  text-decoration: none;
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: 3px;
  transition: color .25s, border-color .25s, text-shadow .25s, background .25s;
  text-transform: uppercase;
  white-space: nowrap;
}

#navigationBar .nav-links a::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--red-glow), transparent);
  transform: scaleX(0);
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}

#navigationBar .nav-links a:hover {
  color: var(--red-glow);
  text-shadow: var(--glow-red);
  background: rgba(192,57,43,.07);
}

#navigationBar .nav-links a:hover::after { transform: scaleX(1); }

#navigationBar .nav-links a.active {
  color: var(--red-glow);
  border-color: var(--border2);
  text-shadow: var(--glow-red);
  background: rgba(192,57,43,.1);
}

#navbarToggle {
  display: none;
  cursor: pointer;
  font-family: var(--font-title);
  font-size: 11px;
  letter-spacing: .18em;
  color: #ffffff;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 3px;
  user-select: none;
}
#navbarToggle:hover { color: var(--red-glow); border-color: var(--border2); }

/* ── Page Wrapper ──────────────────────────────────────────── */
.page-body {
  position: relative;
  z-index: 3;
  padding-top: 60px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Page Heading (kanji watermark + katana underline) ─────── */
#pageHeading {
  position: relative;
  text-align: center;
  padding: 58px 24px 36px;
  overflow: hidden;
}

/* kanji watermark behind the title — set via data-kanji="戦" */
#pageHeading::before {
  content: attr(data-kanji);
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -54%;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(150px, 26vw, 300px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(192,57,43,.12);
  pointer-events: none;
  user-select: none;
}

#pageHeading p {
  position: relative;
  font-family: var(--font-title);
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: .18em;
  text-indent: .18em;
  text-transform: uppercase;
  color: var(--text);
  text-shadow: 0 0 18px rgba(247,243,236,.3), 0 0 40px rgba(231,76,60,.18);
  opacity: 0;
  animation: fadeUp .8s .1s cubic-bezier(.2,.7,.3,1) both;
}

/* katana blade under the title */
#pageHeading::after {
  content: '';
  position: relative;
  display: block;
  width: min(300px, 60vw);
  height: 3px;
  margin: 20px auto 0;
  background: var(--katana-blade);
  border-radius: 1px;
  box-shadow: 0 0 12px rgba(192,57,43,.7), 0 0 30px rgba(192,57,43,.3);
  opacity: 0;
  animation: fadeUp .8s .25s cubic-bezier(.2,.7,.3,1) both;
}

#pageHeading .sub {
  position: relative;
  display: block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--text-dim);
  opacity: 0;
  animation: fadeUp .8s .4s cubic-bezier(.2,.7,.3,1) both;
}
#pageHeading .sub b { color: var(--red-glow); font-weight: 400; text-shadow: var(--glow-red); }

/* ── Hero Section ──────────────────────────────────────────── */
#hero {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 100px 24px 60px;
  overflow: hidden;
}

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: clamp(.62rem, 1.8vw, .78rem);
  letter-spacing: .42em;
  color: var(--red-glow);
  text-transform: uppercase;
  margin-bottom: 26px;
  text-shadow: var(--glow-red);
  opacity: 0;
  animation: fadeUp .8s .3s cubic-bezier(.2,.7,.3,1) both;
}

.hero-title {
  font-family: var(--font-title);
  font-size: clamp(2.2rem, 7vw, 4.8rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: .06em;
  color: var(--text);
  text-shadow: 0 0 40px rgba(231,76,60,.25);
  margin-bottom: 10px;
  opacity: 0;
  animation: fadeUp .8s .5s cubic-bezier(.2,.7,.3,1) both;
}

.hero-title span {
  background: linear-gradient(100deg, #ff6a5e 0%, #e74c3c 30%, #ffb0a6 50%, #e74c3c 70%, #a93226 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(231,76,60,.35));
  animation: shimmer 6s linear infinite;
}

.hero-subtitle {
  font-family: var(--font-mono);
  font-size: clamp(.68rem, 2vw, .95rem);
  color: var(--gold);
  letter-spacing: .3em;
  text-transform: uppercase;
  margin-top: 10px;
  margin-bottom: 36px;
  text-shadow: var(--glow-gold);
  opacity: 0;
  animation: fadeUp .8s .7s cubic-bezier(.2,.7,.3,1) both;
}

/* katana divider */
.hero-katana, .katana {
  width: min(420px, 78vw);
  height: 4px;
  margin: 30px auto;
  position: relative;
  opacity: 0;
  animation: fadeUp .8s .8s cubic-bezier(.2,.7,.3,1) both;
}
.katana { margin: 26px auto; }

.hero-katana::before, .katana::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 44px;
  background: var(--katana-blade);
  border-radius: 1px;
  box-shadow: 0 0 12px rgba(192,57,43,.8), 0 0 34px rgba(192,57,43,.35);
}

.hero-katana::after, .katana::after {
  content: '';
  position: absolute;
  top: -4px; right: 0;
  width: 16px; height: 12px;
  background: var(--gold);
  clip-path: polygon(0 12%, 34% 50%, 0 88%, 100% 50%);
  box-shadow: var(--glow-gold);
}

.katana i {
  position: absolute;
  top: -3px; right: 30px;
  width: 7px; height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  box-shadow: var(--glow-gold);
}

/* Event info bar */
.hero-event-info {
  display: flex;
  gap: 42px;
  justify-content: center;
  margin-bottom: 44px;
  opacity: 0;
  animation: fadeUp .8s .95s cubic-bezier(.2,.7,.3,1) both;
  flex-wrap: wrap;
}

.event-stat { text-align: center; position: relative; }

.event-stat:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -21px; top: 50%;
  translate: 0 -50%;
  width: 1px; height: 30px;
  background: linear-gradient(to bottom, transparent, var(--border2), transparent);
}

.event-stat-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .3em;
  color: var(--text-dim);
  text-transform: uppercase;
  display: block;
  margin-bottom: 5px;
}

.event-stat-value {
  font-family: var(--font-title);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: .08em;
  text-shadow: var(--glow-gold);
}

/* Countdown */
#countdown {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 48px;
  opacity: 0;
  animation: fadeUp .8s 1.1s cubic-bezier(.2,.7,.3,1) both;
  flex-wrap: wrap;
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}

.countdown-num {
  font-family: var(--font-mono);
  font-size: clamp(1.8rem, 5vw, 2.7rem);
  font-weight: 700;
  line-height: 1;
  color: #fff6e9;
  text-shadow: 0 0 12px rgba(255,91,77,.85), 0 0 34px rgba(255,91,77,.5);
  background: linear-gradient(160deg, rgba(224,69,58,.22), rgba(10,6,6,.94) 60%);
  border: 1.5px solid rgba(255,91,77,.7);
  border-radius: 7px;
  padding: 15px 18px;
  min-width: 82px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 22px rgba(224,69,58,.35), inset 0 0 18px rgba(224,69,58,.12);
  animation: cd-pulse 2.4s ease-in-out infinite;
}

.countdown-num::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.09), transparent 40%);
}

.countdown-num::after {
  content: '';
  position: absolute;
  left: -60%; top: 0; bottom: 0;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
  animation: cd-sheen 3.6s ease-in-out infinite;
}

.countdown-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: var(--glow-gold);
}

.countdown-sep {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 2.1rem;
  color: var(--red-glow);
  text-shadow: var(--glow-red);
  animation: blink 1s step-end infinite;
  padding-bottom: 28px;
}

/* Hero buttons */
.hero-buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp .8s 1.25s cubic-bezier(.2,.7,.3,1) both;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary {
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, var(--red) 0%, #7a0d06 100%);
  border: 1px solid var(--red-glow);
  border-radius: 4px;
  padding: 13px 28px;
  cursor: pointer;
  transition: transform .25s, box-shadow .25s, border-color .25s;
  display: inline-block;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.btn-primary::before {
  content: '';
  position: absolute;
  left: -70%; top: 0; bottom: 0;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg);
  transition: left .5s cubic-bezier(.2,.7,.3,1);
}

.btn-primary:hover {
  box-shadow: var(--glow-red-lg);
  transform: translateY(-2px);
  border-color: var(--red-bright);
}

.btn-primary:hover::before { left: 130%; }

.btn-secondary {
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-dim);
  background: rgba(12,8,8,.6);
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 13px 28px;
  cursor: pointer;
  transition: all .25s;
  display: inline-block;
}

.btn-secondary:hover {
  color: var(--red-glow);
  border-color: var(--red-glow);
  box-shadow: var(--glow-red);
  transform: translateY(-2px);
  background: rgba(192,57,43,.08);
}

.btn-danger {
  font-family: var(--font-title);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ffd9d4;
  background: rgba(110,15,10,.6);
  border: 1px solid var(--red);
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all .2s;
  text-decoration: none;
  display: inline-block;
}
.btn-danger:hover { background: var(--red-deep); border-color: var(--red-glow); box-shadow: var(--glow-red); }

.btn-sm { padding: 8px 18px; font-size: 11px; }

/* ── Sections ──────────────────────────────────────────────── */
.section-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  max-width: 1100px;
  margin: 0 auto 24px;
}

.section-divider::before, .section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border2), transparent);
}

.section-divider span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .35em;
  color: var(--gold);
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: var(--glow-gold);
}

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  animation: fadeUp .7s .3s cubic-bezier(.2,.7,.3,1) both;
}

.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--red), var(--red-glow), transparent);
  opacity: 0;
  transition: opacity .25s;
}

.card:hover {
  border-color: var(--border2);
  box-shadow: 0 4px 30px rgba(0,0,0,.5), 0 0 24px rgba(224,69,58,.12);
}

.card:hover::before { opacity: 1; }

/* ── Challenge Cards ("missions") ──────────────────────────── */
#challenges { padding: 0 24px 60px; }

.challenges-container {
  max-width: 1100px;
  margin: 0 auto;
}

.filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.filter-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: rgba(16,11,11,.8);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 7px 16px;
  cursor: pointer;
  transition: all .2s;
}

.filter-btn:hover {
  color: var(--red-glow);
  border-color: var(--border2);
  text-shadow: var(--glow-red);
}

.filter-btn.active {
  color: #fff;
  border-color: var(--red-glow);
  background: linear-gradient(135deg, rgba(224,69,58,.3), rgba(110,15,10,.4));
  box-shadow: var(--glow-red);
}

.challenge-section { margin-bottom: 44px; }

.challenge-section .heading {
  font-family: var(--font-title);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-shadow: var(--glow-gold);
}

.challenge-section .heading p { white-space: nowrap; }

.challenge-section .heading::before {
  content: '刀';
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--red-glow);
  text-shadow: var(--glow-red);
  letter-spacing: 0;
}

.challenge-section .heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--gold-dim), transparent);
}

.challenges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.mission {
  background: linear-gradient(165deg, rgba(30,18,18,.9), rgba(12,8,8,.94));
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 20px 16px 18px;
  cursor: pointer;
  transition: transform .25s, border-color .25s, box-shadow .25s;
  position: relative;
  overflow: hidden;
  text-align: center;
  opacity: 0;
  animation: fadeUp .6s .2s cubic-bezier(.2,.7,.3,1) both;
}

.mission::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--red-glow), transparent);
  opacity: 0;
  transition: opacity .25s;
}

.mission::after {
  content: '';
  position: absolute;
  left: -70%; top: 0; bottom: 0;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,91,77,.12), transparent);
  transform: skewX(-18deg);
  transition: left .55s cubic-bezier(.2,.7,.3,1);
}

.mission:hover {
  border-color: var(--red-glow);
  box-shadow: var(--glow-red), 0 6px 24px rgba(0,0,0,.5);
  transform: translateY(-3px);
}

.mission:hover::before { opacity: 1; }
.mission:hover::after { left: 130%; }

.mission p:first-child {
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 9px;
  letter-spacing: .02em;
}

.mission p:last-child {
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--red-glow);
  text-shadow: 0 0 10px rgba(255,91,77,.4);
}

.mission.solved {
  border-color: rgba(88,214,141,.45);
  background: linear-gradient(165deg, rgba(20,40,28,.5), rgba(10,14,10,.92));
}

.mission.solved::before {
  opacity: 1;
  background: linear-gradient(to bottom, transparent, var(--green), transparent);
}

.mission.solved::after {
  left: auto; right: 8px; top: 6px; bottom: auto;
  width: auto; height: auto;
  content: '✓';
  background: none;
  transform: none;
  font-size: 12px;
  color: var(--green);
  text-shadow: 0 0 8px rgba(88,214,141,.6);
  font-weight: 700;
}

.mission.solved p:first-child { color: #a9e8c3; }
.mission.solved p:last-child { color: var(--green); text-shadow: 0 0 10px rgba(88,214,141,.4); }

/* Challenge stats bar */
.challenges-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.cstat {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 4px;
  background: rgba(16,11,11,.7);
  padding: 8px 16px;
}

.cstat strong { color: var(--text); }
.cstat .s-solved { color: var(--green); }
.cstat .s-unsolved { color: var(--red-glow); }

/* ── Category Badges ───────────────────────────────────────── */
.badge-cat {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 2px;
  border: 1px solid;
  white-space: nowrap;
}

.cat-web       { color: #5dade2; border-color: rgba(93,173,226,.45); background: rgba(93,173,226,.08); }
.cat-crypto    { color: #af7ac5; border-color: rgba(175,122,197,.45); background: rgba(175,122,197,.08); }
.cat-pwn       { color: var(--red-glow); border-color: rgba(224,69,58,.45); background: rgba(224,69,58,.08); }
.cat-rev       { color: #e8a04c; border-color: rgba(232,160,76,.45); background: rgba(232,160,76,.08); }
.cat-forensics { color: #48c9b0; border-color: rgba(72,201,176,.45); background: rgba(72,201,176,.08); }
.cat-osint     { color: var(--gold); border-color: rgba(240,198,103,.45); background: rgba(240,198,103,.08); }
.cat-welcome   { color: var(--green); border-color: rgba(88,214,141,.45); background: rgba(88,214,141,.08); }
.cat-misc      { color: var(--text-dim); border-color: var(--border); background: transparent; }

/* ── Modal ─────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4,2,2,.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, visibility .25s;
}

.modal-overlay.open { opacity: 1; visibility: visible; }

.modal-box {
  background: linear-gradient(170deg, rgba(26,15,15,.97), rgba(10,6,6,.98));
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 32px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  transform: translateY(24px) scale(.98);
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
  box-shadow: 0 20px 60px rgba(0,0,0,.65), 0 0 46px rgba(224,69,58,.14);
}

.modal-overlay.open .modal-box { transform: translateY(0) scale(1); }

.modal-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--red), var(--red-glow), transparent);
  box-shadow: 0 0 14px rgba(224,69,58,.7);
}

.modal-box::after {
  content: '';
  position: absolute;
  top: 10px; left: 10px;
  width: 14px; height: 14px;
  border-top: 1px solid rgba(240,198,103,.55);
  border-left: 1px solid rgba(240,198,103,.55);
  pointer-events: none;
}

.modal-close {
  position: absolute;
  top: 12px; right: 16px;
  font-size: 22px;
  color: var(--text-dim);
  background: none;
  border: none;
  cursor: pointer;
  transition: color .2s, text-shadow .2s;
  line-height: 1;
}

.modal-close:hover { color: var(--red-glow); text-shadow: var(--glow-red); }

.modal-title {
  font-family: var(--font-title);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text);
  margin: 4px 0 14px;
  padding-right: 30px;
}

.modal-desc {
  font-size: .9rem;
  color: var(--text-dim);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 14px 0 16px;
  line-height: 1.75;
  background: rgba(7,4,4,.7);
  border: 1px solid var(--border);
  border-left: 2px solid var(--border2);
  border-radius: 4px;
  padding: 14px 16px;
}

.modal-meta {
  display: flex;
  gap: 22px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.modal-meta-item {
  font-family: var(--font-mono);
  font-size: 12px;
}

.modal-meta-item .key { color: var(--text-dim); }
.modal-meta-item .val { color: var(--gold); text-shadow: var(--glow-gold); }

/* ── Forms ─────────────────────────────────────────────────── */
.form-wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 24px 80px;
  width: 100%;
}

.form-card {
  background: linear-gradient(170deg, rgba(26,15,15,.92), rgba(10,6,6,.96));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 38px 34px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 50px rgba(0,0,0,.5);
  opacity: 0;
  animation: fadeUp .8s .35s cubic-bezier(.2,.7,.3,1) both;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.form-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--red) 30%, var(--red-glow) 50%, var(--red) 70%, transparent);
  box-shadow: 0 0 16px rgba(224,69,58,.6);
}

.form-card::after {
  content: '';
  position: absolute;
  top: 10px; left: 10px;
  width: 16px; height: 16px;
  border-top: 1px solid rgba(240,198,103,.5);
  border-left: 1px solid rgba(240,198,103,.5);
  pointer-events: none;
}

.form-group { margin-bottom: 20px; }

.form-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 7px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  background: rgba(12,8,8,.85);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .04em;
  transition: border-color .25s, box-shadow .25s;
  outline: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--red-glow);
  box-shadow: 0 0 0 3px rgba(224,69,58,.16), 0 0 16px rgba(224,69,58,.2);
}

.form-input::placeholder,
.form-textarea::placeholder { color: #4d4438; }

.form-select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--red-glow) 50%),
                    linear-gradient(135deg, var(--red-glow) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

.form-textarea { resize: vertical; min-height: 90px; }

.form-toggle {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.toggle-btn {
  flex: 1;
  padding: 10px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  cursor: pointer;
  color: var(--text-dim);
  background: rgba(12,8,8,.85);
  border: none;
  transition: all .2s;
}

.toggle-btn.active {
  background: linear-gradient(135deg, rgba(224,69,58,.32), rgba(110,15,10,.5));
  color: var(--red-glow);
  text-shadow: var(--glow-red);
}

.form-note {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-dim);
  margin-top: 6px;
  letter-spacing: .04em;
}

.form-footer {
  text-align: center;
  margin-top: 22px;
  font-size: 13px;
  color: var(--text-dim);
}

.form-footer a {
  color: var(--red-glow);
  text-decoration: none;
  text-shadow: 0 0 10px rgba(255,91,77,.35);
}

.form-footer a:hover { text-decoration: underline; }

/* Input flag */
.input_flag {
  width: 100%;
  background: rgba(12,8,8,.9);
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 11px 14px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .05em;
  outline: none;
  transition: border-color .25s, box-shadow .25s;
}

.input_flag:focus {
  border-color: var(--red-glow);
  box-shadow: 0 0 0 3px rgba(224,69,58,.18), 0 0 18px rgba(224,69,58,.25);
}

.input_flag::placeholder { color: #4d4438; }

.input_flag_button {
  width: 100%;
  margin-top: 10px;
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--red) 0%, #7a0d06 100%);
  border: 1px solid var(--red-glow);
  border-radius: 4px;
  padding: 12px;
  cursor: pointer;
  transition: transform .25s, box-shadow .25s;
}

.input_flag_button:hover {
  box-shadow: var(--glow-red-lg);
  transform: translateY(-1px);
}

/* ── Alerts / Messages ─────────────────────────────────────── */
.alert {
  padding: 12px 16px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  margin-bottom: 16px;
  border: 1px solid;
}

.alert-success {
  color: #7ee2a8;
  border-color: rgba(88,214,141,.35);
  background: rgba(88,214,141,.07);
  box-shadow: inset 0 0 18px rgba(88,214,141,.05);
}
.alert-error {
  color: #ff8d82;
  border-color: rgba(224,69,58,.4);
  background: rgba(224,69,58,.08);
  box-shadow: inset 0 0 18px rgba(224,69,58,.06);
}
.alert-info {
  color: var(--gold);
  border-color: rgba(240,198,103,.35);
  background: rgba(240,198,103,.06);
  box-shadow: inset 0 0 18px rgba(240,198,103,.04);
}

#flag_correct {
  background: rgba(88,214,141,.12);
  color: #7ee2a8;
  border: 1px solid rgba(88,214,141,.4);
  border-radius: 4px;
  padding: 10px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: center;
  text-shadow: 0 0 10px rgba(88,214,141,.4);
}
#flag_incorrect {
  background: rgba(224,69,58,.1);
  color: #ff8d82;
  border: 1px solid rgba(224,69,58,.4);
  border-radius: 4px;
  padding: 10px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: center;
}
#flag_already {
  background: rgba(240,198,103,.08);
  color: var(--gold);
  border: 1px solid rgba(240,198,103,.3);
  border-radius: 4px;
  padding: 10px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: center;
}

/* ── Scoreboard ────────────────────────────────────────────── */
#scoreboard { padding: 0 24px 60px; width: 100%; max-width: 1000px; margin: 0 auto; }

.scoreboard-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
  opacity: 0;
  animation: fadeUp .8s .3s cubic-bezier(.2,.7,.3,1) both;
}

.scoreboard-table th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--border2);
  background: rgba(224,69,58,.06);
}

.scoreboard-table td {
  padding: 15px 18px;
  border-bottom: 1px solid rgba(255,255,255,.035);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
}

.scoreboard-table tr:last-child td { border-bottom: none; }

.scoreboard-table tbody tr {
  transition: background .2s;
}

.scoreboard-table tbody tr:hover td {
  background: rgba(224,69,58,.05);
}

.rank-num {
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 700;
}

.rank-1 .rank-num { color: #ffd700; text-shadow: 0 0 14px rgba(255,215,0,.6); }
.rank-2 .rank-num { color: #cfcfcf; text-shadow: 0 0 10px rgba(207,207,207,.45); }
.rank-3 .rank-num { color: #d9925b; text-shadow: 0 0 10px rgba(217,146,91,.45); }

.rank-1 td { background: rgba(255,215,0,.035); }
.rank-2 td { background: rgba(207,207,207,.025); }
.rank-3 td { background: rgba(217,146,91,.025); }

.team-name-cell { font-weight: 700; letter-spacing: .03em; }
.score-cell { color: var(--red-glow); font-weight: 700; text-shadow: 0 0 10px rgba(255,91,77,.4); }

.refresh-note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--text-dim);
  text-align: center;
  padding: 12px;
  margin: 0 auto 24px;
  text-transform: uppercase;
}
.refresh-note::before { content: '◆ '; color: var(--red-glow); }
.refresh-note::after  { content: ' ◆'; color: var(--red-glow); }

/* ── Dashboard ─────────────────────────────────────────────── */
#dashboard { padding: 0 24px 60px; }

.dashboard-container {
  max-width: 960px;
  margin: 0 auto;
}

.welcome-banner {
  background: linear-gradient(150deg, rgba(30,18,18,.92), rgba(12,7,7,.95));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 30px 34px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
  opacity: 0;
  animation: fadeUp .7s .2s cubic-bezier(.2,.7,.3,1) both;
}

.welcome-banner::before {
  content: '侍';
  position: absolute;
  right: 18px; top: 50%;
  translate: 0 -50%;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 110px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(192,57,43,.16);
  pointer-events: none;
  user-select: none;
}

.welcome-banner::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--red), var(--gold), transparent);
}

.welcome-greeting {
  font-family: var(--font-title);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text);
  margin-bottom: 7px;
}

.welcome-greeting span { color: var(--red-glow); text-shadow: var(--glow-red); }

.welcome-team {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .05em;
  color: var(--text-dim);
}

.welcome-team span { color: var(--gold); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.stat-card {
  background: linear-gradient(165deg, rgba(30,18,18,.85), rgba(12,8,8,.95));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 22px 18px;
  text-align: center;
  transition: transform .25s, border-color .25s, box-shadow .25s;
  position: relative;
  overflow: hidden;
  opacity: 0;
  animation: fadeUp .7s .3s cubic-bezier(.2,.7,.3,1) both;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border2), transparent);
}

.stat-card:hover {
  border-color: var(--border2);
  box-shadow: 0 6px 26px rgba(0,0,0,.45), 0 0 20px rgba(224,69,58,.1);
  transform: translateY(-3px);
}

.stat-card-num {
  font-family: var(--font-mono);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--red-glow);
  text-shadow: var(--glow-red);
  display: block;
  line-height: 1.15;
}

.stat-card-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .26em;
  color: var(--text-dim);
  margin-top: 6px;
  display: block;
  text-transform: uppercase;
}

.quick-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.quick-nav-item {
  background: linear-gradient(165deg, rgba(30,18,18,.85), rgba(12,8,8,.95));
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 20px 22px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform .25s, border-color .25s, box-shadow .25s;
  opacity: 0;
  animation: fadeUp .7s .4s cubic-bezier(.2,.7,.3,1) both;
}

.quick-nav-item:hover {
  border-color: var(--border2);
  box-shadow: var(--glow-red);
  transform: translateY(-2px);
}

.quick-nav-icon {
  font-family: var(--font-body);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--gold);
  text-shadow: var(--glow-gold);
  flex-shrink: 0;
  line-height: 1;
}

.quick-nav-text strong {
  display: block;
  font-family: var(--font-title);
  font-size: .92rem;
  letter-spacing: .06em;
  color: var(--text);
}

.quick-nav-text span {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}

/* ── Admin Panel ───────────────────────────────────────────── */
#admin-panel { padding: 0 24px 60px; }

.admin-container { max-width: 1100px; margin: 0 auto; }

.admin-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
}

.admin-sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px 0;
  height: fit-content;
  position: sticky;
  top: 84px;
}

.admin-sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--text-dim);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all .2s;
}

.admin-sidebar a .kj {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--gold-dim);
  transition: color .2s, text-shadow .2s;
  width: 1.3em;
  text-align: center;
  flex-shrink: 0;
}

.admin-sidebar a:hover,
.admin-sidebar a.active {
  color: var(--red-glow);
  border-left-color: var(--red-glow);
  background: rgba(224,69,58,.06);
}

.admin-sidebar a:hover .kj,
.admin-sidebar a.active .kj {
  color: var(--gold);
  text-shadow: var(--glow-gold);
}

.admin-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 28px;
  opacity: 0;
  animation: fadeUp .7s .3s cubic-bezier(.2,.7,.3,1) both;
}

.admin-content h2 {
  font-family: var(--font-title);
  font-size: 1.1rem;
  letter-spacing: .08em;
  color: var(--text);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border2);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border2);
}

.admin-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.035);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
}

.admin-table tr:hover td { background: rgba(224,69,58,.045); }

/* ── Announcements ─────────────────────────────────────────── */
.ann-card {
  background: linear-gradient(170deg, rgba(26,15,15,.92), rgba(10,6,6,.95));
  border: 1px solid var(--border);
  border-left: 2px solid var(--border2);
  border-radius: 6px;
  padding: 22px 24px;
  margin-bottom: 16px;
  position: relative;
  opacity: 0;
  animation: fadeUp .7s .2s cubic-bezier(.2,.7,.3,1) both;
  transition: border-color .25s, box-shadow .25s;
}
.ann-card:hover {
  border-color: var(--border2);
  box-shadow: 0 6px 26px rgba(0,0,0,.4), 0 0 20px rgba(224,69,58,.08);
}
.ann-card h2 {
  font-family: var(--font-title);
  font-size: 1.05rem;
  letter-spacing: .05em;
  color: var(--text);
  margin-bottom: 6px;
}
.ann-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: .06em;
  margin-bottom: 12px;
}
.ann-meta strong { color: var(--gold); font-weight: 400; }
.ann-body {
  color: var(--text);
  line-height: 1.75;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* ── Footer ────────────────────────────────────────────────── */
#footer {
  position: relative;
  z-index: 3;
  border-top: 1px solid var(--border);
  padding: 22px 24px 30px;
  text-align: center;
  margin-top: auto;
}

#footer p {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: .22em;
  text-transform: uppercase;
}

#footer p span { color: rgba(224,69,58,.75); }

/* ── Animations ────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer { to { background-position: 220% center; } }

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }

@keyframes cd-pulse {
  0%, 100% { box-shadow: 0 0 22px rgba(224,69,58,.35), inset 0 0 18px rgba(224,69,58,.12); border-color: rgba(255,91,77,.7); }
  50%      { box-shadow: 0 0 34px rgba(224,69,58,.6), inset 0 0 22px rgba(224,69,58,.2); border-color: rgba(255,91,77,1); }
}

@keyframes cd-sheen {
  0%   { left: -60%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-8px); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: var(--glow-red); }
  50%      { box-shadow: var(--glow-red-lg); }
}

.pulse { animation: pulse-glow 2.4s ease-in-out infinite; }
.float { animation: float 4s ease-in-out infinite; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
  #navbarToggle { display: list-item; }
  .des { display: none; }
  .des.visible { display: list-item; }

  #navigationBar { padding: 0 16px; }
  #navigationBar .nav-brand { font-size: 14px; }

  body::after { inset: 8px; }

  .admin-grid { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; }

  .hero-event-info { gap: 22px; }
  .event-stat:not(:last-child)::after { display: none; }

  .form-card { padding: 26px 20px; }

  .countdown-num { font-size: 1.7rem; padding: 10px 12px; min-width: 62px; }
  .countdown-sep { display: none; }
  #countdown { gap: 9px; }

  #pageHeading { padding: 44px 16px 28px; }
  #pageHeading::before { font-size: clamp(120px, 44vw, 200px); }

  .welcome-banner::before { font-size: 80px; opacity: .7; }
}

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .card, .form-card, .mission, .stat-card, .quick-nav-item,
  .admin-content, .scoreboard-table, .ann-card,
  #pageHeading p, #pageHeading::after, #pageHeading .sub { opacity: 1; }
}

/* ── Utility ───────────────────────────────────────────────── */
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.text-center { text-align: center; }
.text-mono { font-family: var(--font-mono); }
.text-gold { color: var(--gold); }
.text-red  { color: var(--red-glow); }
.text-dim  { color: var(--text-dim); }
.hidden { display: none !important; }