/* ==========================================================================
   SCSU Cyber Competition Club: practice range theme.

   Layered over CTFd's own core theme rather than replacing it. The bundled
   Bootstrap 5.3 stylesheet loads first and this file loads after, so every
   rule here either overrides a --bs-* token or targets a component directly.
   Nothing in CTFd's JavaScript is touched, which is the point: the challenge
   modal, the API client and notifications stay CTFd's code.

   Deliberately dark and single-theme. The public site is light; the range is
   not, which is the convention for every CTF board anyone has played. The
   colour-mode switch is hidden rather than left as a control that does
   nothing.

   Palette comes from website/assets/css/site.css so the two properties read
   as one organisation. The one addition is --ccc-red-bright: the cardinal
   #b3202c scores 2.96:1 on this ground, which fails WCAG AA, so solid fills
   keep the cardinal and anything that is text uses the brighter tone.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("/themes/scsuccc/static/fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/themes/scsuccc/static/fonts/jetbrains-mono-var-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root,
[data-bs-theme="dark"],
[data-bs-theme="light"] {
  /* Brand, carried over from the public site */
  --ccc-red: #b3202c;
  --ccc-red-deep: #7c1620;
  --ccc-red-bright: #e8505d;   /* 5.4:1 on the ground below; the cardinal is not */
  --ccc-glow: rgba(179, 32, 44, 0.32);

  --ccc-bg: #0b0b0d;
  --ccc-surface: #131418;
  --ccc-raised: #191b21;
  --ccc-line: #272a31;
  --ccc-line-soft: #1e2128;

  --ccc-text: #e9e7e4;
  --ccc-soft: #a9aeb3;          /* the logo dragon grey */
  --ccc-dim: #7c8187;

  --ccc-ok: #4ec07d;
  --ccc-warn: #e0a642;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Bootstrap's own tokens, repointed */
  --bs-body-bg: var(--ccc-bg);
  --bs-body-color: var(--ccc-text);
  --bs-emphasis-color: #ffffff;
  --bs-secondary-color: var(--ccc-soft);
  --bs-secondary-bg: var(--ccc-surface);
  --bs-tertiary-bg: var(--ccc-raised);
  --bs-border-color: var(--ccc-line);
  --bs-border-color-translucent: rgba(255, 255, 255, 0.08);
  --bs-link-color: var(--ccc-red-bright);
  --bs-link-hover-color: #f4737d;
  /* Bootstrap 5.3 paints links as rgba(var(--bs-link-color-rgb), ...), so the
     hex alone leaves every link its default blue. */
  --bs-link-color-rgb: 232, 80, 93;
  --bs-link-hover-color-rgb: 244, 115, 125;
  --bs-primary: var(--ccc-red);
  --bs-primary-rgb: 179, 32, 44;
  --bs-code-color: var(--ccc-red-bright);
  --bs-heading-color: var(--ccc-text);
  --bs-font-sans-serif: var(--font-sans);
  --bs-font-monospace: var(--font-mono);
  --bs-border-radius: 10px;
}

/* --------------------------------------------------------------------------
   Ground
   -------------------------------------------------------------------------- */
html,
body {
  background-color: var(--ccc-bg);
  color: var(--ccc-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* The same faint grid the public site's hero carries, so the two places feel
   related without repeating the whole hero treatment. Fixed, so it reads as
   a surface the content sits on rather than something that scrolls with it. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 120% 70% at 50% 0%, #000 35%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 120% 70% at 50% 0%, #000 35%, transparent 100%);
}

main[role="main"] {
  min-height: 70vh;
  padding-bottom: 4rem;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ccc-text);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.text-muted,
.text-secondary {
  color: var(--ccc-dim) !important;
}

a {
  text-underline-offset: 0.18em;
}

/* Visible focus everywhere. CTFd's default is Bootstrap's blue ring, which
   is the one colour on the page that belongs to nobody. */
:focus-visible {
  outline: 2px solid var(--ccc-red-bright);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Page headings: CTFd wraps each page title in .jumbotron
   -------------------------------------------------------------------------- */
.jumbotron,
.jumbotron-fluid {
  background: linear-gradient(180deg, #101116 0%, var(--ccc-bg) 100%);
  border-bottom: 1px solid var(--ccc-line);
  border-radius: 0;
  padding: 3.25rem 0 2.5rem;
  margin-bottom: 2.5rem;
  position: relative;
}

/* A cardinal hairline under the masthead, echoing the site header. */
.jumbotron::after,
.jumbotron-fluid::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ccc-red) 22%, var(--ccc-red) 78%, transparent);
  opacity: 0.85;
}

.jumbotron h1 {
  font-size: clamp(1.9rem, 4.5vw, 2.9rem);
  font-weight: 700;
  margin: 0;
}

.jumbotron h1::before {
  content: "// ";
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--ccc-red-bright);
  font-size: 0.72em;
  vertical-align: 0.12em;
}

/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */
.navbar {
  background: rgba(11, 11, 13, 0.92) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ccc-line);
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

.navbar-brand {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ccc-text) !important;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.navbar-brand img {
  height: 30px;
  width: auto;
}

.navbar .nav-link {
  color: var(--ccc-soft) !important;
  font-weight: 500;
  font-size: 0.93rem;
  padding: 0.45rem 0.85rem !important;
  border-radius: 7px;
  transition: color 0.14s ease, background-color 0.14s ease;
}

.navbar .nav-link:hover {
  color: var(--ccc-text) !important;
  background: rgba(255, 255, 255, 0.05);
}

.navbar .nav-link.active {
  color: var(--ccc-text) !important;
  background: rgba(179, 32, 44, 0.16);
  box-shadow: inset 0 0 0 1px rgba(179, 32, 44, 0.4);
}

.navbar-toggler {
  border-color: var(--ccc-line);
}

/* Single-theme by choice: a switch that cannot switch is worse than none. */
.theme-switch {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Cards and panels
   -------------------------------------------------------------------------- */
.card {
  background-color: var(--ccc-surface);
  border: 1px solid var(--ccc-line);
  border-radius: 12px;
}

.card-header,
.card-footer {
  background-color: var(--ccc-raised);
  border-color: var(--ccc-line);
}

.modal-content {
  background-color: var(--ccc-surface);
  border: 1px solid var(--ccc-line);
  border-radius: 14px;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.8);
}

.modal-header,
.modal-footer {
  border-color: var(--ccc-line);
}

.modal-backdrop.show {
  opacity: 0.72;
}

/* --------------------------------------------------------------------------
   Challenge board

   CTFd's markup, for anyone editing this later:
     .category-header > h3                the category name
     .challenges-row > .col-* > button.challenge-button.btn.btn-dark
       > .challenge-inner > p (name) + span (points)
   The button IS the card; there is no .card inside it. Solved carries
   .challenge-solved, which CTFd paints a loud #29c830.

   Bootstrap 5.3 buttons read --bs-btn-*, so these override those tokens
   rather than fighting .btn-dark with !important.
   -------------------------------------------------------------------------- */
.category-header {
  margin: 2.6rem 0 1.1rem;
}

.category-header h3 {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ccc-soft);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0;
}

.category-header h3::before {
  content: "";
  width: 3px;
  height: 1.05em;
  background: var(--ccc-red);
  border-radius: 2px;
  flex: none;
}

.category-header h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ccc-line);
}

.challenge-button {
  --bs-btn-bg: var(--ccc-surface);
  --bs-btn-color: var(--ccc-text);
  --bs-btn-border-color: var(--ccc-line);
  --bs-btn-hover-bg: var(--ccc-raised);
  --bs-btn-hover-color: var(--ccc-text);
  --bs-btn-hover-border-color: rgba(179, 32, 44, 0.7);
  --bs-btn-active-bg: var(--ccc-raised);
  --bs-btn-active-color: var(--ccc-text);
  --bs-btn-active-border-color: var(--ccc-red);

  border-radius: 12px;
  min-height: 116px;
  padding: 0.5rem 0.75rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

/* CTFd sets background-color and border-style: none at
   [data-bs-theme="dark"] .challenge-button, which is 0,2,0 and beats a bare
   class. Match the shape so these land, and paint the properties directly
   rather than through the button tokens, because that is what it overrides. */
[data-bs-theme] .challenge-button {
  background-color: var(--ccc-surface);
  border: 1px solid var(--ccc-line);
  color: var(--ccc-text);
}

[data-bs-theme] .challenge-button:hover {
  background-color: var(--ccc-raised);
  border-color: rgba(179, 32, 44, 0.7);
}

/* A cardinal wash that rises from the base on hover. One moment of motion,
   which is what the board needs and all it needs. */
.challenge-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, var(--ccc-glow) 100%);
  opacity: 0;
  transition: opacity 0.16s ease;
  pointer-events: none;
}

.challenge-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.9);
}

.challenge-button:hover::before {
  opacity: 1;
}

.challenge-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.challenge-inner p {
  font-weight: 600;
  font-size: 0.97rem;
  line-height: 1.32;
  margin: 0;
  text-wrap: balance;
}

.challenge-inner span {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ccc-red-bright);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Solved. CTFd's own green is a flat #29c830 across the whole tile, which
   makes a board of solved challenges unreadable. Keep green as the signal,
   spend it on the edge and a tick, and let the tile recede instead. */
/* CTFd paints this as
     [data-bs-theme="dark"] .challenge-button.challenge-solved { background-color: #29c830 }
   which is specificity 0,3,0 and sets background-color directly rather than
   the button token. So match that shape: the bare [data-bs-theme] attribute
   ties the specificity and this file loads later, and it holds for either
   value of the attribute. */
[data-bs-theme] .challenge-button.challenge-solved {
  background-color: #12261a;
  --bs-btn-bg: #12261a;
  --bs-btn-border-color: rgba(78, 192, 125, 0.5);
  --bs-btn-hover-bg: #16301f;
  --bs-btn-hover-border-color: rgba(78, 192, 125, 0.75);
  --bs-btn-active-bg: #16301f;
  border-color: rgba(78, 192, 125, 0.5);
}

[data-bs-theme] .challenge-button.challenge-solved:hover {
  background-color: #16301f;
  border-color: rgba(78, 192, 125, 0.75);
}

.challenge-button.challenge-solved .challenge-inner p {
  color: var(--ccc-soft);
}

.challenge-button.challenge-solved .challenge-inner span {
  color: var(--ccc-ok);
}

.challenge-button.challenge-solved::after {
  content: "✓";
  position: absolute;
  top: 0.5rem;
  right: 0.65rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ccc-ok);
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Challenge modal internals
   -------------------------------------------------------------------------- */
.challenge-desc {
  color: var(--ccc-soft);
  line-height: 1.65;
}

.challenge-desc code,
.challenge-desc kbd {
  font-family: var(--font-mono);
  background: #0e0f13;
  border: 1px solid var(--ccc-line);
  border-radius: 5px;
  padding: 0.12em 0.4em;
  font-size: 0.88em;
  color: var(--ccc-red-bright);
}

.challenge-desc pre {
  background: #0e0f13;
  border: 1px solid var(--ccc-line);
  border-radius: 9px;
  padding: 0.95rem 1.1rem;
  overflow-x: auto;
}

.challenge-desc a {
  color: var(--ccc-red-bright);
}

/* The submission row is the single most-used control on the site. */
#challenge-input,
input[name="submission"] {
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}

.challenge-solves {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ccc-dim);
}

/* Modal internals, by their real CTFd classes:
     .challenge-name   title
     .challenge-value  points
     #challenge-input  the flag field
     #challenge-submit the button, which CTFd re-classes to .correct / .wrong
                       on the result, so those rules below must still win. */
.challenge-name {
  font-weight: 700;
  letter-spacing: -0.02em;
}

.challenge-value {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--ccc-red-bright);
  font-variant-numeric: tabular-nums;
}

.challenge-value::after {
  content: " pts";
  font-family: var(--font-sans);
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ccc-dim);
  vertical-align: 0.55em;
  margin-left: 0.2em;
}

/* The primary action on the whole site. It should not look like a cancel. */
#challenge-submit.btn {
  --bs-btn-bg: var(--ccc-red);
  --bs-btn-color: #fff;
  --bs-btn-border-color: var(--ccc-red);
  --bs-btn-hover-bg: var(--ccc-red-deep);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: var(--ccc-red-deep);
  background-color: var(--ccc-red);
  border-color: var(--ccc-red);
  color: #fff;
  font-weight: 600;
}

#challenge-submit.btn:hover {
  background-color: var(--ccc-red-deep);
  border-color: var(--ccc-red-deep);
}

#challenge-input {
  font-family: var(--font-mono);
}

/* Submission feedback is an .alert-success / .alert-danger under the form,
   not a class on the button: the button keeps .btn-outline-secondary
   throughout. Those alerts are styled in the Alerts section below. */

/* --------------------------------------------------------------------------
   Forms and buttons
   -------------------------------------------------------------------------- */
.form-control,
.form-select,
.input-group-text {
  background-color: #0e0f13;
  border: 1px solid var(--ccc-line);
  color: var(--ccc-text);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
}

.form-control::placeholder {
  color: #5c6167;
}

.form-control:focus,
.form-select:focus {
  background-color: #0e0f13;
  color: var(--ccc-text);
  border-color: var(--ccc-red);
  box-shadow: 0 0 0 3px rgba(179, 32, 44, 0.22);
}

.form-label,
label {
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--ccc-soft);
  margin-bottom: 0.35rem;
}

.form-text {
  color: var(--ccc-dim);
}

.btn {
  border-radius: 8px;
  font-weight: 600;
  padding: 0.55rem 1.15rem;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background-color: var(--ccc-red);
  border-color: var(--ccc-red);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--ccc-red-deep);
  border-color: var(--ccc-red-deep);
  color: #fff;
}

.btn-outline-secondary,
.btn-secondary {
  border-color: var(--ccc-line);
  color: var(--ccc-soft);
  background-color: transparent;
}

.btn-outline-secondary:hover,
.btn-secondary:hover {
  background-color: var(--ccc-raised);
  border-color: var(--ccc-soft);
  color: var(--ccc-text);
}

/* --------------------------------------------------------------------------
   Tables: scoreboard, users, teams
   -------------------------------------------------------------------------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ccc-text);
  --bs-table-border-color: var(--ccc-line);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.022);
  --bs-table-striped-color: var(--ccc-text);
  --bs-table-hover-bg: rgba(179, 32, 44, 0.08);
  --bs-table-hover-color: var(--ccc-text);
  margin-bottom: 0;
}

.table thead th {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ccc-dim);
  border-bottom: 1px solid var(--ccc-line) !important;
  padding: 0.85rem 1rem;
  white-space: nowrap;
}

.table tbody td {
  padding: 0.75rem 1rem;
  border-color: var(--ccc-line-soft);
  vertical-align: middle;
}

/* Rank and score read as data, so they get the mono face and line up. */
.table tbody td:first-child,
.table .place,
.table .score {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Podium. Gold, silver and the club's own cardinal for third. */
.table tbody tr:nth-child(1) td:first-child { color: #e7c14b; font-weight: 700; }
.table tbody tr:nth-child(2) td:first-child { color: #c3c8cd; font-weight: 700; }
.table tbody tr:nth-child(3) td:first-child { color: var(--ccc-red-bright); font-weight: 700; }

/* Wide tables scroll inside their own box rather than the page going sideways. */
.table-responsive {
  border: 1px solid var(--ccc-line);
  border-radius: 12px;
  background: var(--ccc-surface);
  overflow-x: auto;
}

/* --------------------------------------------------------------------------
   Scoreboard chart
   -------------------------------------------------------------------------- */
#score-graph,
#keys-pie-graph,
#categories-pie-graph,
#solves-graph {
  background: var(--ccc-surface);
  border: 1px solid var(--ccc-line);
  border-radius: 12px;
  padding: 0.75rem;
  margin-bottom: 1.75rem;
}

/* --------------------------------------------------------------------------
   Auth pages: login, register, reset

   CTFd ships these columns with no class of their own, so the templates add
   .ccc-auth. Styling the column rather than the <form> keeps the error
   partial and the Major League Cyber button inside the same card.
   -------------------------------------------------------------------------- */
.ccc-auth {
  background: var(--ccc-surface);
  border: 1px solid var(--ccc-line);
  border-radius: 14px;
  padding: 2rem 2rem 1.75rem;
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.9);
  position: relative;
  overflow: hidden;
}

/* Cardinal hairline along the top edge of the card. */
.ccc-auth::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ccc-red-deep), var(--ccc-red), var(--ccc-red-deep));
}

.ccc-auth .form-label,
.ccc-auth b {
  font-weight: 600;
}

/* Bootstrap's offset utilities are what centre these columns, and the padding
   above would otherwise push the card wider than its grid slot. */
.ccc-auth {
  --bs-gutter-x: 0;
}

@media (max-width: 575px) {
  .ccc-auth {
    padding: 1.4rem 1.2rem;
  }
}

/* --------------------------------------------------------------------------
   Alerts, badges, notifications
   -------------------------------------------------------------------------- */
.alert {
  border-radius: 10px;
  border: 1px solid var(--ccc-line);
  background: var(--ccc-raised);
  color: var(--ccc-text);
}

.alert-danger {
  border-color: rgba(232, 80, 93, 0.45);
  background: rgba(179, 32, 44, 0.14);
  color: #f2a1a7;
}

.alert-success {
  border-color: rgba(78, 192, 125, 0.45);
  background: rgba(78, 192, 125, 0.12);
  color: #9ad9b4;
}

.badge {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.badge.bg-primary {
  background-color: var(--ccc-red) !important;
}

#notification-snackbar,
.snackbar {
  background: var(--ccc-raised) !important;
  border: 1px solid var(--ccc-line);
  color: var(--ccc-text) !important;
  border-radius: 10px;
}

/* --------------------------------------------------------------------------
   Landing page

   Markup lives in ../../index-page.html, because CTFd keeps page content in
   its database rather than on disk. That file is the versioned copy; this is
   what styles it.
   -------------------------------------------------------------------------- */
.range-hero {
  text-align: center;
  padding: 3.5rem 0 3rem;
  position: relative;
}

.range-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ccc-red-bright);
  margin: 0 0 1rem;
}

.range-title {
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0 0 1.1rem;
}

.range-lead {
  max-width: 34rem;
  margin: 0 auto 2rem;
  font-size: clamp(1.02rem, 2vw, 1.2rem);
  line-height: 1.6;
  color: var(--ccc-soft);
  text-wrap: balance;
}

.range-cta {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.range-h2 {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ccc-soft);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 3.5rem 0 1.5rem;
}

.range-h2::before {
  content: "";
  width: 3px;
  height: 1.05em;
  background: var(--ccc-red);
  border-radius: 2px;
  flex: none;
}

.range-h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ccc-line);
}

/* Numbered because it genuinely is a sequence: you cannot submit a flag you
   have not found, on a box you cannot reach. */
.range-steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.range-steps li {
  counter-increment: step;
  background: var(--ccc-surface);
  border: 1px solid var(--ccc-line);
  border-radius: 12px;
  padding: 1.5rem 1.35rem 1.35rem;
  position: relative;
}

.range-steps li::before {
  content: "0" counter(step);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ccc-red-bright);
  display: block;
  margin-bottom: 0.6rem;
}

.range-steps h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.45rem;
}

.range-steps p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ccc-soft);
}

.range-steps code {
  font-family: var(--font-mono);
  color: var(--ccc-red-bright);
  font-size: 0.9em;
}

/* A terminal, because this is a cyber club and the shell is the thing. */
.range-term {
  margin: 2.5rem 0 0;
  background: #08090b;
  border: 1px solid var(--ccc-line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 22px 50px -26px rgba(0, 0, 0, 0.9);
}

.range-term__bar {
  display: flex;
  gap: 0.45rem;
  padding: 0.7rem 0.9rem;
  background: var(--ccc-raised);
  border-bottom: 1px solid var(--ccc-line);
}

.range-term__bar span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #34383f;
}

.range-term__bar span:first-child { background: #4a2126; }

.range-term__body {
  margin: 0;
  padding: 1.25rem 1.35rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.83rem;
  line-height: 1.75;
  color: var(--ccc-soft);
  background: transparent;
}

.t-p { color: var(--ccc-ok); }
.t-d { color: #7fa6d4; }
.t-c { color: var(--ccc-dim); font-style: italic; }
.t-f {
  color: var(--ccc-red-bright);
  font-weight: 700;
  background: rgba(179, 32, 44, 0.16);
  padding: 0.05em 0.3em;
  border-radius: 4px;
}

/* CTFd highlights every "pre code" with lolight, whose stock palette is
   GitHub's blue and salmon. Repoint it at ours. Prefixed with
   [data-bs-theme] because CTFd's own rules are, and a bare class loses. */
[data-bs-theme] .ll-nam { color: var(--ccc-text); }
[data-bs-theme] .ll-pct { color: var(--ccc-soft); }
[data-bs-theme] .ll-key { color: var(--ccc-red-bright); }
[data-bs-theme] .ll-str,
[data-bs-theme] .ll-rex { color: var(--ccc-ok); }
[data-bs-theme] .ll-num { color: var(--ccc-warn); }
[data-bs-theme] .ll-com { color: var(--ccc-dim); font-style: italic; }

.range-scope {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.range-scope__col {
  background: var(--ccc-surface);
  border: 1px solid var(--ccc-line);
  border-radius: 12px;
  padding: 1.35rem;
  border-top-width: 3px;
}

.range-scope__col--in { border-top-color: var(--ccc-ok); }
.range-scope__col--out { border-top-color: var(--ccc-red); }

.range-scope h3 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
}

.range-scope__col--in h3 { color: var(--ccc-ok); }
.range-scope__col--out h3 { color: var(--ccc-red-bright); }

.range-scope ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--ccc-soft);
  font-size: 0.92rem;
  line-height: 1.75;
}

.range-note {
  margin: 1.25rem 0 0;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--ccc-red);
  background: rgba(179, 32, 44, 0.07);
  border-radius: 0 8px 8px 0;
  color: var(--ccc-soft);
  font-size: 0.93rem;
  line-height: 1.65;
}

.range-join {
  color: var(--ccc-soft);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 44rem;
}

.range-join b { color: var(--ccc-text); }

.range-join--links {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  margin-top: 1.25rem;
  padding-bottom: 1.5rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

@media (max-width: 575px) {
  .range-hero { padding: 2.25rem 0 2rem; }
  .range-term__body { font-size: 0.74rem; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
  background: transparent;
  border-top: 1px solid var(--ccc-line);
  padding: 1.75rem 0;
  margin-top: 3rem;
}

.footer small,
.footer .text-muted {
  color: var(--ccc-dim) !important;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .challenge-button .card,
  .btn {
    transition: none;
  }
  .challenge-button .card:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .jumbotron,
  .jumbotron-fluid {
    padding: 2.25rem 0 1.75rem;
    margin-bottom: 1.75rem;
  }
  .challenge-button .card {
    min-height: 92px;
  }
  body::before {
    background-size: 34px 34px;
  }
}