:root {
  --theme-bg-image: url("https://lwi.nexon.com/m_mabinogim/brand/classhelp/bg.jpg");
  --theme-bg-position: center center;
  --theme-bg-scrim-top: rgba(8, 6, 12, 0.38);
  --theme-bg-scrim-bottom: rgba(8, 6, 12, 0.56);
  --theme-intro-scrim: rgba(8, 6, 12, 0.7);
  --theme-panel: rgba(10, 9, 16, 0.72);
  --theme-panel-solid: rgba(10, 9, 16, 0.9);
  --theme-panel-border: rgba(255, 255, 255, 0.16);
  --theme-panel-blur: 12px;
  --theme-text-shadow: 0 2px 9px rgba(0, 0, 0, 0.92);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--theme-bg-scrim-top), var(--theme-bg-scrim-bottom)),
    var(--theme-bg-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--theme-bg-position);
}

.intro-inner { position: relative; isolation: isolate; }
.intro-logo-link {
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px;
  border-radius: 12px; transition: transform 0.2s var(--ease), filter 0.2s var(--ease);
}
.intro-logo-link:hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.12); }
.intro-logo-link:active { transform: translateY(0) scale(0.98); }
.intro-logo {
  display: block; width: clamp(72px, 20vw, 96px); height: auto;
  filter: drop-shadow(0 0 14px rgba(var(--accent-rgb), 0.38));
}

.q-card,
.result-detail > .detail-block:not(.actions) {
  background: var(--theme-panel);
  border: 1px solid var(--theme-panel-border);
  border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
  -webkit-backdrop-filter: blur(var(--theme-panel-blur));
  backdrop-filter: blur(var(--theme-panel-blur));
}
.q-card { padding: clamp(20px, 5vw, 32px); }
.result-detail > .detail-block:not(.actions) { padding: 20px; }

.choice { background: rgba(10, 9, 16, 0.62); }

.intro-sub,
.intro-copy,
.q-copy,
.q-sub,
.prog-label,
.why-who,
.why-why {
  text-shadow: var(--theme-text-shadow);
}

@supports not (
  (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
) {
  .q-card,
  .result-detail > .detail-block:not(.actions) {
    background: var(--theme-panel-solid);
  }
}

@media (max-width: 719px) {
  :root {
    --theme-bg-position: 78% center;
    --theme-bg-scrim-top: rgba(8, 6, 12, 0.46);
    --theme-bg-scrim-bottom: rgba(8, 6, 12, 0.64);
    --theme-intro-scrim: rgba(8, 6, 12, 0.78);
    --theme-panel: rgba(10, 9, 16, 0.8);
    --theme-panel-blur: 10px;
  }
}