:root {
  --nocturne-void-rgb: 6 20 27;
  --nocturne-deep-rgb: 17 33 45;
  --nocturne-panel-rgb: 37 55 69;
  --nocturne-edge-rgb: 74 92 106;
  --nocturne-muted-rgb: 155 168 171;
  --nocturne-light-rgb: 204 208 207;
}

:root[data-palette="forest"],
.nocturne-palette-card[data-nocturne-palette="forest"] {
  --nocturne-void-rgb: 5 31 32;
  --nocturne-deep-rgb: 11 43 38;
  --nocturne-panel-rgb: 22 56 50;
  --nocturne-edge-rgb: 35 83 71;
  --nocturne-muted-rgb: 142 182 155;
  --nocturne-light-rgb: 218 241 222;
}

/** Additional dark colour palettes. */
:root[data-palette="blue"],
.nocturne-palette-card[data-nocturne-palette="blue"] {
  --nocturne-void-rgb: 8 17 34;
  --nocturne-deep-rgb: 15 30 52;
  --nocturne-panel-rgb: 25 47 76;
  --nocturne-edge-rgb: 58 94 132;
  --nocturne-muted-rgb: 151 181 210;
  --nocturne-light-rgb: 220 234 249;
}

:root[data-palette="red"],
.nocturne-palette-card[data-nocturne-palette="red"] {
  --nocturne-void-rgb: 28 10 15;
  --nocturne-deep-rgb: 43 20 27;
  --nocturne-panel-rgb: 65 32 40;
  --nocturne-edge-rgb: 110 58 68;
  --nocturne-muted-rgb: 204 160 168;
  --nocturne-light-rgb: 247 221 225;
}

:root[data-palette="yellow"],
.nocturne-palette-card[data-nocturne-palette="yellow"] {
  --nocturne-void-rgb: 25 23 10;
  --nocturne-deep-rgb: 38 34 17;
  --nocturne-panel-rgb: 56 50 26;
  --nocturne-edge-rgb: 103 91 47;
  --nocturne-muted-rgb: 199 187 137;
  --nocturne-light-rgb: 244 237 204;
}

:root[data-palette="orange"],
.nocturne-palette-card[data-nocturne-palette="orange"] {
  --nocturne-void-rgb: 29 17 9;
  --nocturne-deep-rgb: 45 29 17;
  --nocturne-panel-rgb: 67 43 26;
  --nocturne-edge-rgb: 116 77 44;
  --nocturne-muted-rgb: 211 177 143;
  --nocturne-light-rgb: 250 231 209;
}

:root[data-palette="purple"],
.nocturne-palette-card[data-nocturne-palette="purple"] {
  --nocturne-void-rgb: 20 12 31;
  --nocturne-deep-rgb: 33 22 47;
  --nocturne-panel-rgb: 49 34 68;
  --nocturne-edge-rgb: 87 63 115;
  --nocturne-muted-rgb: 184 162 207;
  --nocturne-light-rgb: 237 224 249;
}

:root {
  --nocturne-void: rgb(var(--nocturne-void-rgb));
  --nocturne-deep: rgb(var(--nocturne-deep-rgb));
  --nocturne-panel: rgb(var(--nocturne-panel-rgb));
  --nocturne-edge: rgb(var(--nocturne-edge-rgb));
  --nocturne-muted: rgb(var(--nocturne-muted-rgb));
  --nocturne-light: rgb(var(--nocturne-light-rgb));
}

/**
 * Reset
 * ----------------------------------------
 */
*,
::before,
::after {
  margin: 0;
  padding: 0;
  border: none;
  outline: transparent;
  box-sizing: border-box;
}

/**
 * Rajdhani Font
 * ----------------------------------------
 */
@font-face {
  font-family: 'Rajdhani';
  src: url('assets/fonts/rajdhani-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Rajdhani';
  src: url('assets/fonts/rajdhani-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Rajdhani';
  src: url('assets/fonts/rajdhani-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover,
a:focus-visible {
  color: var(--nocturne-light);
}

img:not(.forum-category-image) {
  max-width: 100%;
  height: auto;
}

input:not([type]),
input:where(
  [type="text"],
  [type="email"],
  [type="password"],
  [type="search"],
  [type="url"],
  [type="tel"],
  [type="number"],
  [type="date"],
  [type="datetime-local"],
  [type="month"],
  [type="week"],
  [type="time"]
),
textarea {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 9px 12px;

  font: inherit;
  font-size: inherit;
  line-height: 1.4;
  color: var(--nocturne-light);
  caret-color: var(--nocturne-light);
  color-scheme: dark;

  background: linear-gradient(
    0deg,
    var(--nocturne-void),
    var(--nocturne-deep)
  );
  border: 1px solid var(--nocturne-edge);
  border-radius: 6px;
  box-shadow:
    0 1px 3px rgb(var(--nocturne-void-rgb) / .5),
    inset 0 1px 0 rgb(var(--nocturne-light-rgb) / .06);

  transition: border-color .2s ease;
}

input:not([type])::placeholder,
input:where(
  [type="text"],
  [type="email"],
  [type="password"],
  [type="search"],
  [type="url"],
  [type="tel"],
  [type="number"]
)::placeholder,
textarea::placeholder,
.form-control::placeholder {
  color: var(--nocturne-muted);
  opacity: 1;
}

input[type="submit"],
input[type="reset"],
input[type="button"],
button[type="submit"] {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 42px;
  margin: 0;
  padding: 9px 16px;

  font: inherit;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: var(--nocturne-light);

  background: linear-gradient(
    var(--nocturne-panel),
    var(--nocturne-deep)
  );
  border: 1px solid var(--nocturne-edge);
  border-radius: 6px;
  cursor: pointer;

  transition:
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease;
}

:is(
  input[type="submit"],
  input[type="reset"],
  input[type="button"],
  button[type="submit"]
):hover:not(:disabled) {
  background: var(--nocturne-panel);
  border-color: var(--nocturne-muted);
}

:is(
  input[type="submit"],
  input[type="reset"],
  input[type="button"],
  button[type="submit"]
):focus-visible {
  outline: 2px solid var(--nocturne-muted);
  outline-offset: 3px;
}

:is(
  input[type="submit"],
  input[type="reset"],
  input[type="button"],
  button[type="submit"]
):disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* input::placeholder,
textarea::placeholder,
.form-control::placeholder {
  color: var(--nocturne-light);
  opacity: 0.5;
} */

/**
 * Body
 * ----------------------------------------
 */
body {
  --bs-body-bg: var(--nocturne-void);
  --bs-body-color: var(--nocturne-light);
  --bs-body-font-family: 'Rajdhani', system-ui;
  --bs-body-font-size: 1.125rem;

  background-image: linear-gradient(
    125deg,
    transparent 35%,
    rgb(var(--nocturne-panel-rgb) / 0.2667) 35%,
    transparent 65%
  ),
  repeating-linear-gradient(
    145deg,
    transparent 0 130px,
    rgb(var(--nocturne-edge-rgb) / 0.0745) 131px 132px,
    transparent 133px 260px
  );
  background-attachment: fixed;
}

.nocturne-site-header {
  background: linear-gradient(
    110deg,
    rgb(var(--nocturne-panel-rgb)),
    rgb(var(--nocturne-deep-rgb))
  );
  border: 1px solid var(--nocturne-edge);
  box-shadow: 0 10px 30px rgb(var(--nocturne-void-rgb) / .2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  border-radius: 8px;
}

.nocturne-site-header .brand {
  display: flex;
  align-items: center;
  gap: 13px;
  font-weight: 800;
  letter-spacing: 3px;
}

.nocturne-site-header .mark {
  font-style: italic;
  font-size: 30px;
  line-height: 1;
  background-color: transparent;
  color: var(--nocturne-light);
  border-left: 4px solid var(--nocturne-muted);
  padding-left: 8px;
}


.hero {
  /* margin: 18px 0 28px; */
  margin-block: 18px;
  min-height: 245px;
  border: 1px solid var(--nocturne-edge);
  position: relative;
  overflow: hidden;
  padding: 40px;
  background: linear-gradient(
    115deg,
    rgb(var(--nocturne-deep-rgb) / 0.9608) 30%,
    rgb(var(--nocturne-panel-rgb) / 0.502)
  );
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
}
.hero:before {
  content: "";
  position: absolute;
  inset: -180px -100px -180px 56%;
  transform: rotate(32deg);
  border: 55px solid rgb(var(--nocturne-edge-rgb) / 0.251);
  box-shadow: 0 0 0 38px rgb(var(--nocturne-deep-rgb) / 0.5333),
    0 0 0 39px rgb(var(--nocturne-muted-rgb) / 0.2),
    0 0 0 90px rgb(var(--nocturne-panel-rgb) / 0.3333);
  z-index: -0;
}
.hero-text {
  position: relative;
}
.hero h1 {
  font-size: clamp(28px, 3.5vw, 48px);
  line-height: 1.1;
  margin: 12px 0 15px;
  font-weight: 800;
  letter-spacing: 3px;
}
.hero h1 span {
  display: block;
  font-size: 0.47em;
  letter-spacing: 12px;
  font-weight: 400;
  margin-top: 12px;
}
.hero p {
  color: var(--nocturne-muted);
  margin: 0;
}
.hero-symbol {
  display: none;
  font-size: 100px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -12px;
  position: relative;
  padding-right: 50px;
  color: rgb(var(--nocturne-light-rgb) / 0.3137);
}

@media (min-width: 564px) {
  .hero-symbol {
    display: unset;
  }
}

/**
 * Native dropdown arrows.
 * Bootstrap removes native select appearance; retain the browser arrow even
 * when component background styles replace Bootstrap's SVG background image.
 * Multiple selects and list boxes retain their existing presentation.
 */
select:not([multiple]):not([size]),
select:not([multiple])[size="1"] {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
  background-image: none;
  padding-inline-end: 2rem;
  color-scheme: dark;
}

.content-box {
  background: linear-gradient( 130deg, rgb(var(--nocturne-deep-rgb) / 0.9608), rgb(var(--nocturne-panel-rgb) / 0.9098) );
  border: 1px solid rgb(var(--nocturne-edge-rgb) / 0.6);
  padding: 15px;
  border-radius: 8px;
}
/* Preview cards use the same RGB values as their theme variant. */
.nocturne-palette-card[data-nocturne-palette="slate"] {
  --nocturne-void-rgb: 6 20 27;
  --nocturne-deep-rgb: 17 33 45;
  --nocturne-panel-rgb: 37 55 69;
  --nocturne-edge-rgb: 74 92 106;
  --nocturne-muted-rgb: 155 168 171;
  --nocturne-light-rgb: 204 208 207;
}

/** Reusable raised buttons and Arcade integration. */
.nocturne-button {
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  max-width: 100%;
  padding: 9px 18px;
  font: inherit;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  color: var(--nocturne-light);
  background: linear-gradient(0deg, var(--nocturne-deep) 20%, var(--nocturne-edge));
  border: 1px solid var(--nocturne-edge);
  border-radius: 6px;
  box-shadow: 0 1px 3px #0008, inset 0 1px 0 #ffffff20;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.nocturne-button:hover {  color: var(--nocturne-light);
  border-color: var(--nocturne-light);
  box-shadow: 0 2px 5px #0009, inset 0 1px 0 #ffffff30;
}
.nocturne-button:focus-visible {
  outline: 2px solid var(--nocturne-light);
  outline-offset: 3px;
}
.nocturne-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
  .nocturne-button { transition: none; }
}

.form-text {
  --bs-secondary-color: var(--nocturne-light);
}