:root {
  --retro-bg: #0b0c10;
  --retro-layer: #0f172a;
  --retro-border: #1f2937;
  --retro-head: #0b1220;
  --retro-accent: #0ea5e9;
  --retro-muted: #cbd5e1;
  --retro-text: #f3f6fb;
  --retro-ok: #22c55e;
  --retro-warn: #f59e0b;
  --retro-danger: #ef4444;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

html,
body {
  height: 100%
}

body {
  color: var(--retro-text);
  background: var(--retro-bg);
  min-height: 100dvh;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url('https://www.retromc.org/store-assets/background.webp');
  background-size: cover;
  background-position: center;
  filter: blur(4px);
  transform: scale(1.03);
  z-index: -2;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(5, 10, 18, .55);
  z-index: -1;
}

.navbar {
  background: linear-gradient(90deg, var(--retro-head), var(--retro-layer));
  border-bottom: 1px solid var(--retro-border);
}

.navbar .nav-link {
  color: #e8eef9
}

.navbar .nav-link:hover {
  color: #d8ecff
}

.card {
  background: var(--retro-layer);
  border: 1px solid var(--retro-border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
  color: var(--retro-text);
}

.glass {
  background: rgba(15, 23, 42, .85);
  border: 1px solid rgba(31, 41, 55, .95);
  backdrop-filter: saturate(120%) blur(6px);
  color: var(--retro-text);
}

.brand-logo {
  height: 42px;
  width: auto
}

.fw-mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.form-control,
.search {
  background: #0a1220;
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--retro-text);
}

.form-control:focus,
.search:focus {
  background: #0a1220;
  color: var(--retro-text);
  border-color: rgba(14, 165, 233, .65);
  box-shadow: 0 0 0 .25rem rgba(14, 165, 233, .18);
}

.btn-primary {
  --bs-btn-bg: var(--retro-accent);
  --bs-btn-border-color: var(--retro-accent);
  --bs-btn-hover-bg: #1ab7ff;
  --bs-btn-hover-border-color: #1ab7ff;
  --bs-btn-active-bg: #0aa0e1;
  --bs-btn-active-border-color: #0aa0e1;
  --bs-btn-color: #05101a;
  font-weight: 800;
}

.section-title {
  font-weight: 800;
  letter-spacing: .3px;
  border-bottom: 1px solid var(--retro-border);
  padding-bottom: .55rem;
  margin-bottom: 1rem;
}

.subtle {
  color: var(--retro-muted)
}

.hero {
  padding: 2.25rem 0 1.5rem;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(14, 165, 233, .40);
  background: rgba(14, 165, 233, .10);
  color: #cfeeff;
  font-weight: 900;
  letter-spacing: .2px;
  text-transform: uppercase;
  font-size: .85rem;
}

.hero-title {
  font-weight: 900;
  letter-spacing: -.5px;
  line-height: 1.05;
  font-size: clamp(2.1rem, 3.8vw, 3.1rem);
  margin: .8rem 0 .5rem;
  text-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}

.hero-tagline {
  font-size: clamp(1.05rem, 1.4vw, 1.15rem);
  color: rgba(243, 246, 251, .92);
  margin: 0 auto;
  max-width: 52rem;
}

.hero-tagline span {
  color: #bfe8ff;
  font-weight: 800;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(14, 165, 233, .35);
  background: #0a1324;
  color: #a9d8ff;
  font-weight: 700;
  font-size: .85rem;
}

.note {
  border: 1px dashed rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .02);
  border-radius: .9rem;
  padding: .85rem;
  color: var(--retro-muted);
  font-size: .92rem;
}

.kbd {
  font-family: var(--mono);
  padding: .2rem .5rem;
  border-radius: .6rem;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(0, 0, 0, .25);
  color: rgba(231, 236, 255, .85);
  font-size: .9rem;
}

/* Download buttons - shared by index.html and launcher.html */
.dl-btn {
  border: 1px solid rgba(255, 255, 255, .10) !important;
  background: rgba(255, 255, 255, .04) !important;
  color: var(--retro-text) !important;
  border-radius: 1rem !important;
  padding: 1rem 1rem !important;
  text-decoration: none !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: .15s ease;
  user-select: none;
}

.dl-btn:hover {
  border-color: rgba(14, 165, 233, .45) !important;
  background: rgba(14, 165, 233, .10) !important;
  transform: translateY(-1px);
}

.dl-btn[aria-disabled="true"] {
  opacity: .45;
  pointer-events: none;
  transform: none !important;
}

.dl-left .title {
  font-weight: 900
}

.dl-left .meta {
  color: var(--retro-muted);
  font-size: .9rem
}