:root{
  /* hell-violettes Habitica-Farbschema */
  --habi-deep: #4a2c7a;
  --habi-purple: #a278ff;
  --habi-violet: #b486ff;
  --habi-accent: #ffd166;
  --habi-mint: #5df2e0;
  --habi-ink: #f4f0ff;
  --habi-ink-2: #d8caff;
  --card-bg: #2e1c54;
}

/* Hintergrund & Textfarben */
html, body {
  background: radial-gradient(1200px 800px at 10% 0%, #5b3aa3 0%, #2e1c54 60%, #1a0e30 100%);
  color: var(--habi-ink);
  min-height: 100%;
  font-family: "Inter", sans-serif;
}

/* Navbar */
.navbar {
  background: linear-gradient(180deg, var(--habi-deep), #3c2170);
  border-bottom: 2px solid var(--habi-purple);
}
.navbar-brand {
  font-family: "Press Start 2P", system-ui, sans-serif;
  font-size: .9rem;
  letter-spacing: 1px;
  color: var(--habi-accent) !important;
  text-shadow: 0 0 8px rgba(255,209,102,.4);
}
.nav-link {
  color: var(--habi-ink-2) !important;
}
.nav-link:hover {
  color: var(--habi-accent) !important;
}

/* Hero */
.hero {
  background: linear-gradient(135deg, rgba(164,120,255,.35), rgba(93,242,224,.1));
  border-bottom: 2px solid var(--habi-purple);
}
.title {
  font-family: "Press Start 2P", system-ui, sans-serif;
  font-size: .6rem;
  color: var(--habi-accent);
  font-weight: 100;
  text-shadow: 0 0 8px rgba(255,209,102,.4);
}

.title-big {
  font-family: "Press Start 2P", system-ui, sans-serif;
  font-size: .9rem;
  font-weight: 100;
  color: var(--habi-accent);
  text-shadow: 0 0 8px rgba(255,209,102,.4);
}

/* Buttons */
.btn-primary {
  --bs-btn-bg: var(--habi-violet);
  --bs-btn-border-color: var(--habi-violet);
  --bs-btn-hover-bg: #c79aff;
  --bs-btn-hover-border-color: #c79aff;
  --bs-btn-active-bg: #a278ff;
  --bs-btn-color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.05) inset, 0 0 18px rgba(164,120,255,.4);
}

/* Karten */
.pixel-card {
  background: linear-gradient(180deg, #3b2570, var(--card-bg));
  border: 0;
  position: relative;
  color: var(--habi-ink);
  border-radius: .5rem;
  box-shadow: 0 0 0 2px #000 inset, 0 0 0 1px rgba(255,255,255,.05) inset,
              0 8px 24px rgba(0,0,0,.4);
}
.card-header {
  background: linear-gradient(180deg, rgba(164,120,255,.18), rgba(255,255,255,0));
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-weight: 700;
  color: var(--habi-ink);
}

/* Footer */
.footer {
  background: #1c0e36;
  border-top: 2px solid var(--habi-purple);
  color: var(--habi-ink-2);
}
.footer a {
  color: var(--habi-mint);
  text-decoration: none;
}
.footer a:hover {
  color: #aefcf1;
}