/*
 * CyberJU CTF theme, on top of vendor/bootstrap.css, which has the palette
 * compiled in: deep teal background, cyan primary (#2fc9d4), amber accents
 * (#ffb02e).
 */

:root {
  color-scheme: dark;
}

body {
  font-family: "JetBrains Mono", "Fira Code", "Consolas", ui-monospace, monospace;
  min-height: 100vh;
  background-image:
    radial-gradient(60rem 40rem at 12% -8%, rgba(47, 201, 212, 0.16), transparent 65%),
    radial-gradient(50rem 35rem at 88% 4%, rgba(255, 176, 46, 0.1), transparent 60%);
  background-attachment: fixed;
}

::selection {
  background: #2fc9d4;
  color: #041217;
}

.icon {
  vertical-align: -0.125em;
  flex-shrink: 0;
}

/* The brand and the challenge cards are links that should not take the link
   colour, including on hover, where Bootstrap's `a:hover` would otherwise win. */
.brand,
.brand:hover {
  color: inherit;
}

/* --- Challenge grid ------------------------------------------------------ */

.challenge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
}

.category-heading {
  border-bottom: 2px solid;
  border-image: linear-gradient(to right, var(--bs-primary), rgba(255, 176, 46, 0.7), transparent) 1;
  letter-spacing: 0.04em;
}

.challenge-card,
.challenge-card:hover {
  color: inherit;
}

.challenge-card {
  border-color: rgba(255, 255, 255, 0.09);
  transition: transform 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
}

.challenge-card:not(.locked):hover {
  transform: translateY(-2px);
  border-color: var(--bs-primary);
  background-color: rgba(47, 201, 212, 0.08);
}

.challenge-card.solved {
  border-color: rgba(53, 184, 119, 0.6);
  background-color: rgba(53, 184, 119, 0.1);
}

.challenge-card.locked {
  opacity: 0.55;
  cursor: not-allowed;
}

.challenge-card .card-title {
  font-size: 1.05rem;
  line-height: 1.3;
}

.challenge-card .score {
  color: var(--bs-primary);
  font-size: 1.15rem;
}

.challenge-card .original {
  color: var(--bs-secondary-color);
  font-size: 0.95rem;
}

/* --- Flag input ------------------------------------------------------------ */

/* Two classes deep so it also beats Bootstrap's focus border. */
.border-wrong .form-control,
.border-wrong .form-control:focus {
  border-color: var(--bs-danger);
}

.shake {
  animation: shake 0.3s;
}

@keyframes shake {
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* --- Hints and writeups ---------------------------------------------------- */

/* A revealed hint. Bootstrap's alert variants are built on light backgrounds,
   which the link and code colours below are not designed for, so hints get a
   dark amber-tinted panel instead. */
.hint {
  background: rgba(255, 176, 46, 0.12);
  border: 1px solid rgba(255, 176, 46, 0.3);
  border-left: 3px solid #ffb02e;
  border-radius: 0.6rem;
  padding: 0.6rem 0.9rem;
}

.locked-card {
  border-color: rgba(255, 176, 46, 0.35);
  background-color: rgba(255, 176, 46, 0.06);
}

/* Alerts that are still light: keep links and code legible on them by following
   the alert's own colour rather than the palette used on the dark page. */
.alert a {
  color: inherit;
  text-decoration: underline;
}

.alert code {
  color: inherit;
  background: rgba(0, 0, 0, 0.08);
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
}

/* --- Rendered Markdown ----------------------------------------------------- */

.markdown img {
  max-width: 100%;
}

.markdown pre {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.6rem;
  padding: 0.75rem 1rem;
  overflow-x: auto;
}

.markdown code {
  word-break: break-word;
}

.markdown :not(pre) > code {
  background: rgba(0, 0, 0, 0.3);
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
}

.markdown blockquote {
  border-left: 3px solid #2fc9d4;
  padding-left: 0.9rem;
  color: rgba(228, 241, 244, 0.8);
}

.markdown > :last-child {
  margin-bottom: 0;
}

/* highlight.js tokens, coloured from the palette rather than one of its stock
   themes, which bring their own background and would fight the `pre` above. */
.markdown .hljs-comment,
.markdown .hljs-quote {
  color: rgba(228, 241, 244, 0.45);
  font-style: italic;
}

.markdown .hljs-keyword,
.markdown .hljs-literal,
.markdown .hljs-type,
.markdown .hljs-meta,
.markdown .hljs-selector-tag {
  color: #2fc9d4;
}

.markdown .hljs-string,
.markdown .hljs-regexp,
.markdown .hljs-addition {
  color: #35b877;
}

.markdown .hljs-number,
.markdown .hljs-symbol,
.markdown .hljs-bullet {
  color: #ffb02e;
}

.markdown .hljs-title,
.markdown .hljs-name,
.markdown .hljs-section,
.markdown .hljs-attr,
.markdown .hljs-attribute,
.markdown .hljs-selector-id,
.markdown .hljs-selector-class {
  color: #7fe3ea;
}

.markdown .hljs-built_in,
.markdown .hljs-class .hljs-title,
.markdown .hljs-title.class_ {
  color: #ffd27f;
}

.markdown .hljs-deletion {
  color: #f2603c;
}

.markdown .hljs-emphasis {
  font-style: italic;
}

.markdown .hljs-strong {
  font-weight: 700;
}