:root {
  --game-font-body: "Avenir Next", "Trebuchet MS", "Segoe UI", sans-serif;
  --game-font-heading: "Avenir Next", "Trebuchet MS", "Segoe UI", sans-serif;
  --game-font-display: "Arial Rounded MT Bold", "Trebuchet MS", "Avenir Next", sans-serif;

  --game-app-background: #eef4ff;
  --game-app-background-rgb: 238, 244, 255;
  --game-surface: #ffffff;
  --game-surface-rgb: 255, 255, 255;
  --game-surface-strong: #f4f7ff;
  --game-surface-strong-rgb: 244, 247, 255;
  --game-border: #bfd0f6;
  --game-border-rgb: 191, 208, 246;
  --game-text-primary: #1f2d59;
  --game-text-muted: #5d6f9d;

  --game-brand-blue: #3d74c5;
  --game-brand-blue-rgb: 61, 116, 197;
  --game-accent-cyan: #44cfff;
  --game-accent-cyan-rgb: 68, 207, 255;
  --game-accent-orange: #f36c2f;
  --game-accent-orange-rgb: 243, 108, 47;
  --game-accent-pink: #ff5fb2;
  --game-accent-pink-rgb: 255, 95, 178;
  --game-accent-lime: #65df7d;
  --game-accent-lime-rgb: 101, 223, 125;
  --game-accent-red: #d7472d;
  --game-accent-red-rgb: 215, 71, 45;
  --game-accent-violet: #8f82ff;
  --game-accent-violet-rgb: 143, 130, 255;

  --game-primary: #f6c719;
  --game-primary-rgb: 246, 199, 25;
  --game-primary-contrast: #191300;
  --game-primary-shade: #d8af16;

  --game-shadow-color-rgb: 22, 36, 74;
  --game-card-radius: 1.18rem;
  --game-control-radius: 0.95rem;
  --game-button-radius: 1.05rem;
  --game-button-border-width: 2px;
  --game-button-shadow: 0 0.34rem 0 #ba7320;
  --game-button-shadow-pressed: 0 0.18rem 0 #ba7320;
  --game-panel-shadow: 0 1rem 2.3rem rgba(var(--game-shadow-color-rgb), 0.12),
    0 0.28rem 0 rgba(var(--game-border-rgb), 0.34);
  --game-panel-shadow-soft: 0 0.72rem 1.8rem rgba(var(--game-shadow-color-rgb), 0.08);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background:
    linear-gradient(180deg, #fff7de 0%, #f8fbff 24%, #eef4ff 68%, #e7efff 100%);
  color: var(--game-text-primary);
  font-family: var(--game-font-body);
  min-height: 100vh;
  overflow-x: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--game-text-primary);
  font-family: var(--game-font-heading);
  font-weight: 800;
  letter-spacing: -0.01em;
}

p {
  color: var(--game-text-primary);
  line-height: 1.6;
}

a {
  color: var(--game-brand-blue);
  text-decoration: none;
  transition: color 0.16s ease;
}

a:hover {
  color: var(--game-primary-shade);
}

/* Ambient background shapes */
.wq-ambient {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  z-index: 0;
}

.wq-ambient__glow {
  border-radius: 50%;
  filter: blur(1rem);
  position: absolute;
}

.wq-ambient__glow--burst {
  background: radial-gradient(
    circle,
    rgba(var(--game-primary-rgb), 0.55) 0%,
    rgba(var(--game-accent-orange-rgb), 0.38) 30%,
    rgba(var(--game-accent-red-rgb), 0.12) 56%,
    transparent 74%
  );
  height: 30rem;
  left: 50%;
  top: -12rem;
  transform: translateX(-50%);
  width: 30rem;
}

.wq-ambient__glow--horizon {
  background: radial-gradient(
    circle,
    rgba(var(--game-accent-cyan-rgb), 0.22),
    rgba(var(--game-brand-blue-rgb), 0.1) 48%,
    transparent 74%
  );
  bottom: -6rem;
  height: 26rem;
  right: -8rem;
  width: 30rem;
}

/* Put content above ambient */
.wq-page {
  position: relative;
  z-index: 1;
}

/* Navbar */
.wq-navbar {
  backdrop-filter: blur(10px);
  background: linear-gradient(
    180deg,
    rgba(var(--game-surface-rgb), 0.9),
    rgba(var(--game-surface-rgb), 0.72)
  );
  border-bottom: 1px solid rgba(var(--game-brand-blue-rgb), 0.18);
  padding: 0.7rem 0;
}

.wq-navbar .navbar-brand {
  align-items: center;
  color: var(--game-text-primary);
  display: inline-flex;
  font-weight: 800;
  font-size: 1.1rem;
  gap: 0.55rem;
}

.wq-navbar .navbar-brand img {
  height: 2.2rem;
  width: auto;
}

.wq-navbar .nav-link {
  color: var(--game-text-primary) !important;
  font-weight: 700;
  padding: 0.4rem 0.9rem !important;
  transition: color 0.16s ease;
}

.wq-navbar .nav-link:hover,
.wq-navbar .nav-link.active {
  color: var(--game-primary-shade) !important;
}

.wq-navbar .navbar-toggler {
  border: 1px solid rgba(var(--game-brand-blue-rgb), 0.24);
  border-radius: 0.65rem;
  padding: 0.35rem 0.55rem;
}

.wq-navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 0.18rem rgba(var(--game-accent-cyan-rgb), 0.18);
}

/* Buttons — mirror the game's game-primary-btn / game-secondary-btn / game-ghost-btn */
.wq-btn {
  border-radius: var(--game-button-radius);
  border-style: solid;
  border-width: var(--game-button-border-width);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  letter-spacing: 0.03em;
  min-height: 3.05rem;
  padding: 0.6rem 1.35rem;
  text-transform: uppercase;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
  cursor: pointer;
  white-space: nowrap;
  font-size: 0.95rem;
}

.wq-btn:active {
  transform: translateY(2px);
}

.wq-btn--primary {
  background: linear-gradient(180deg, #ffe06f 0%, #f6c719 52%, #eca80a 100%);
  border-color: #ac6420;
  box-shadow: var(--game-button-shadow), 0 0.85rem 1.8rem rgba(var(--game-shadow-color-rgb), 0.14);
  color: var(--game-primary-contrast);
}

.wq-btn--primary:hover {
  color: var(--game-primary-contrast);
  filter: brightness(1.02);
}

.wq-btn--primary:active {
  box-shadow: var(--game-button-shadow-pressed), 0 0.45rem 1rem rgba(var(--game-shadow-color-rgb), 0.12);
}

.wq-btn--secondary {
  background: linear-gradient(180deg, rgba(var(--game-surface-rgb), 1), rgba(var(--game-surface-strong-rgb), 1));
  border-color: rgba(var(--game-brand-blue-rgb), 0.48);
  box-shadow: 0 0.26rem 0 #8fa4d4;
  color: var(--game-brand-blue);
}

.wq-btn--secondary:hover {
  color: var(--game-brand-blue);
  background: #edf2ff;
}

.wq-btn--secondary:active {
  box-shadow: 0 0.14rem 0 #8fa4d4;
}

.wq-btn--ghost {
  background: linear-gradient(180deg, rgba(var(--game-surface-rgb), 0.74), rgba(var(--game-surface-rgb), 0.5));
  border-color: rgba(var(--game-brand-blue-rgb), 0.24);
  border-width: 1px;
  box-shadow: 0 0.16rem 0 rgba(var(--game-border-rgb), 0.34);
  color: var(--game-brand-blue);
}

.wq-btn--ghost:hover {
  color: var(--game-brand-blue);
  background: rgba(255, 255, 255, 0.88);
}

.wq-btn--ghost:active {
  box-shadow: 0 0.08rem 0 rgba(var(--game-border-rgb), 0.34);
}

/* Panels / cards */
.wq-panel {
  background: linear-gradient(
    165deg,
    rgba(var(--game-surface-rgb), 0.97),
    rgba(244, 248, 255, 0.9) 62%,
    rgba(255, 246, 222, 0.92) 100%
  );
  border: 1px solid rgba(var(--game-brand-blue-rgb), 0.16);
  border-radius: 1.5rem 1.5rem 1.1rem 1.5rem;
  box-shadow: var(--game-panel-shadow);
  padding: 1.6rem;
  position: relative;
  overflow: hidden;
}

.wq-panel::before {
  background: linear-gradient(
    90deg,
    rgba(var(--game-primary-rgb), 0.95),
    rgba(var(--game-accent-orange-rgb), 0.82)
  );
  content: "";
  height: 0.3rem;
  left: 1.2rem;
  position: absolute;
  top: 0;
  width: 5.5rem;
  border-radius: 0 0 999px 999px;
}

.wq-panel--feature {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  height: 100%;
  padding-top: 1.85rem;
}

.wq-feature-mark {
  align-items: center;
  background: rgba(var(--game-surface-rgb), 0.78);
  border: 1px solid rgba(var(--game-brand-blue-rgb), 0.12);
  border-radius: 1rem;
  color: var(--game-text-primary);
  display: inline-flex;
  gap: 0.8rem;
  margin-bottom: 0.2rem;
  padding: 0.55rem 0.75rem 0.55rem 0.6rem;
  width: fit-content;
}

.wq-feature-mark__code {
  align-items: center;
  background: linear-gradient(180deg, #ffe06f 0%, #f6c719 52%, #eca80a 100%);
  border-radius: 0.8rem;
  color: var(--game-primary-contrast);
  display: inline-flex;
  font-family: var(--game-font-display);
  font-size: 0.8rem;
  font-weight: 900;
  height: 2rem;
  justify-content: center;
  letter-spacing: 0.08em;
  min-width: 2rem;
}

.wq-feature-mark__word {
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.wq-feature-mark--cyan .wq-feature-mark__code {
  background: linear-gradient(180deg, #99ecff 0%, #44cfff 100%);
  color: #0d416f;
}

.wq-feature-mark--lime .wq-feature-mark__code {
  background: linear-gradient(180deg, #b8f3c4 0%, #65df7d 100%);
  color: #114f24;
}

.wq-feature-mark--pink .wq-feature-mark__code {
  background: linear-gradient(180deg, #ffb4d8 0%, #ff5fb2 100%);
  color: #6e1748;
}

.wq-feature-mark--orange .wq-feature-mark__code {
  background: linear-gradient(180deg, #ffc19f 0%, #f36c2f 100%);
  color: #65240c;
}

.wq-feature-mark--violet .wq-feature-mark__code {
  background: linear-gradient(180deg, #c8c2ff 0%, #8f82ff 100%);
  color: #302388;
}

.wq-panel--feature h3 {
  font-size: 1.2rem;
  margin: 0;
}

.wq-panel--feature p {
  color: var(--game-text-muted);
}

/* Hero */
.wq-hero {
  padding: 5rem 0 3rem;
  position: relative;
}

.wq-hero__eyebrow {
  color: #9a6a00;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  margin: 0 0 0.6rem;
  text-transform: uppercase;
}

.wq-hero__title {
  font-family: var(--game-font-display);
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  line-height: 1.08;
  margin: 0 0 1rem;
}

.wq-hero__title span {
  background: linear-gradient(180deg, #f6c719 0%, #eca80a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.wq-hero__lead {
  color: var(--game-text-muted);
  font-size: 1.1rem;
  margin: 0 0 1.6rem;
  max-width: 34rem;
}

.wq-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.wq-hero__details {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1.4rem;
  max-width: 42rem;
}

.wq-detail-block {
  background: rgba(var(--game-surface-rgb), 0.62);
  border: 1px solid rgba(var(--game-brand-blue-rgb), 0.14);
  border-radius: 1.15rem;
  padding: 0.9rem 1rem;
}

.wq-detail-block strong {
  display: block;
  font-size: 0.95rem;
  line-height: 1.35;
}

.wq-detail-block__label {
  color: #9a6a00;
  display: block;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
}

.wq-hero__art {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 22rem;
}

.wq-hero__halo {
  background: radial-gradient(
    circle,
    rgba(var(--game-primary-rgb), 0.48) 0%,
    rgba(var(--game-accent-orange-rgb), 0.28) 34%,
    transparent 70%
  );
  border-radius: 50%;
  height: 18rem;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18rem;
  z-index: 0;
}

.wq-hero__orbit {
  background: rgba(var(--game-surface-rgb), 0.76);
  border: 1px solid rgba(var(--game-brand-blue-rgb), 0.14);
  border-radius: 999px;
  box-shadow: var(--game-panel-shadow-soft);
  display: inline-flex;
  gap: 0.75rem;
  padding: 0.45rem 0.7rem;
  position: absolute;
  z-index: 2;
}

.wq-hero__orbit span {
  color: var(--game-text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wq-hero__orbit--top {
  left: 0.4rem;
  top: 1.4rem;
  transform: rotate(-7deg);
}

.wq-hero__orbit--bottom {
  bottom: 1.5rem;
  right: 0.2rem;
  transform: rotate(6deg);
}

.wq-hero__logo {
  filter: drop-shadow(0 1.1rem 1.45rem rgba(var(--game-shadow-color-rgb), 0.22))
    drop-shadow(0 0.3rem 0 rgba(255, 255, 255, 0.3));
  max-width: 100%;
  position: relative;
  width: min(100%, 22rem);
  z-index: 1;
}

/* Section */
.wq-section {
  padding: 4rem 0;
  position: relative;
}

.wq-section__eyebrow {
  color: #9a6a00;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  margin: 0 0 0.6rem;
  text-align: center;
  text-transform: uppercase;
}

.wq-section__title {
  font-size: clamp(1.75rem, 3.4vw, 2.4rem);
  margin: 0 0 0.8rem;
  text-align: center;
}

.wq-section__lead {
  color: var(--game-text-muted);
  font-size: 1.05rem;
  margin: 0 auto 2.5rem;
  max-width: 44rem;
  text-align: center;
}

/* Screenshots */
.wq-screenshot-card {
  background: linear-gradient(
    180deg,
    rgba(var(--game-surface-rgb), 0.96),
    rgba(248, 251, 255, 0.88)
  );
  border: 1.5px solid rgba(var(--game-brand-blue-rgb), 0.18);
  border-radius: 2rem;
  box-shadow: var(--game-panel-shadow);
  overflow: hidden;
  padding: 0.8rem;
}

.wq-screenshot-frame {
  aspect-ratio: 9 / 19.5;
  background:
    radial-gradient(circle at top left, rgba(var(--game-primary-rgb), 0.32), transparent 38%),
    radial-gradient(circle at bottom right, rgba(var(--game-accent-cyan-rgb), 0.26), transparent 42%),
    linear-gradient(180deg, #1d2a52 0%, #30477c 100%);
  border-radius: 1.4rem;
  display: flex;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.wq-screenshot-image {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.wq-screenshot-caption {
  background: linear-gradient(180deg, rgba(19, 32, 64, 0), rgba(19, 32, 64, 0.82));
  bottom: 0;
  color: rgba(255, 255, 255, 0.82);
  left: 0;
  margin: 0;
  padding: 1.4rem 0.95rem 0.8rem;
  position: absolute;
  right: 0;
  text-shadow: 0 0.08rem 0.5rem rgba(0, 0, 0, 0.28);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Form */
.wq-form-label {
  color: var(--game-text-primary);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
}

.wq-form-control {
  background: rgba(var(--game-surface-rgb), 0.95);
  border: 1px solid rgba(var(--game-brand-blue-rgb), 0.24);
  border-radius: var(--game-control-radius);
  color: var(--game-text-primary);
  font-family: var(--game-font-body);
  font-size: 0.98rem;
  padding: 0.75rem 0.95rem;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
  width: 100%;
}

.wq-form-control:focus {
  border-color: rgba(var(--game-brand-blue-rgb), 0.48);
  box-shadow: 0 0 0 0.18rem rgba(var(--game-accent-cyan-rgb), 0.22);
  outline: none;
}

textarea.wq-form-control {
  min-height: 9rem;
  resize: vertical;
}

.wq-form-note {
  color: var(--game-text-muted);
  font-size: 0.8rem;
  margin-top: 0.35rem;
}

.wq-alert {
  border-radius: var(--game-control-radius);
  font-weight: 700;
  padding: 0.85rem 1rem;
}

.wq-alert--success {
  background: rgba(var(--game-accent-lime-rgb), 0.16);
  border: 1px solid rgba(var(--game-accent-lime-rgb), 0.48);
  color: #1f6b33;
}

.wq-alert--error {
  background: rgba(var(--game-accent-red-rgb), 0.12);
  border: 1px solid rgba(var(--game-accent-red-rgb), 0.4);
  color: #8a2a18;
}

/* Prose (for legal pages) */
.wq-prose {
  background: linear-gradient(
    180deg,
    rgba(var(--game-surface-rgb), 0.96),
    rgba(var(--game-surface-rgb), 0.88)
  );
  border: 1px solid rgba(var(--game-brand-blue-rgb), 0.14);
  border-radius: var(--game-card-radius);
  box-shadow: var(--game-panel-shadow-soft);
  padding: 2rem;
}

.wq-prose h1 {
  font-size: clamp(1.8rem, 3.6vw, 2.4rem);
  margin: 0 0 0.5rem;
}

.wq-prose h2 {
  color: var(--game-text-primary);
  font-size: 1.35rem;
  margin: 2rem 0 0.6rem;
}

.wq-prose h3 {
  font-size: 1.1rem;
  margin: 1.4rem 0 0.4rem;
}

.wq-prose p,
.wq-prose li {
  color: var(--game-text-primary);
  font-size: 1rem;
  line-height: 1.7;
}

.wq-prose ul,
.wq-prose ol {
  padding-left: 1.3rem;
}

.wq-prose li {
  margin-bottom: 0.35rem;
}

.wq-prose__meta {
  color: var(--game-text-muted);
  font-size: 0.9rem;
  margin: 0 0 1.5rem;
}

/* Footer */
.wq-footer {
  border-top: 1px solid rgba(var(--game-brand-blue-rgb), 0.14);
  margin-top: 4rem;
  padding: 2rem 0 2.5rem;
  position: relative;
  z-index: 1;
}

.wq-footer__brand {
  align-items: center;
  display: flex;
  gap: 0.55rem;
  font-weight: 800;
}

.wq-footer__brand img {
  height: 2rem;
  width: auto;
}

.wq-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wq-footer__links a {
  color: var(--game-text-muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.wq-footer__links a:hover {
  color: var(--game-primary-shade);
}

.wq-footer__meta {
  color: var(--game-text-muted);
  font-size: 0.82rem;
  margin-top: 0.9rem;
}

.wq-kicker {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.wq-kicker__stamp {
  background: linear-gradient(180deg, #ffe06f 0%, #f6c719 52%, #eca80a 100%);
  border-radius: 0.8rem;
  color: var(--game-primary-contrast);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  padding: 0.48rem 0.68rem;
  text-transform: uppercase;
}

.wq-kicker__text {
  color: #9a6a00;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wq-panel--cta {
  align-items: center;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}

.wq-cta__side {
  display: grid;
  gap: 1rem;
  justify-items: start;
}

.wq-cta__strip {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.wq-cta__strip span,
.wq-support-card__eyebrow {
  background: rgba(var(--game-brand-blue-rgb), 0.08);
  border: 1px solid rgba(var(--game-brand-blue-rgb), 0.12);
  border-radius: 999px;
  color: var(--game-text-muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  padding: 0.38rem 0.65rem;
  text-transform: uppercase;
}

.wq-panel--support {
  display: grid;
  gap: 0.85rem;
}

/* Hide the floating reCAPTCHA v3 badge — attribution is shown in the form text
   as permitted by https://developers.google.com/recaptcha/docs/faq */
.grecaptcha-badge {
  visibility: hidden;
}

/* Responsive */
@media (max-width: 767.98px) {
  .wq-hero {
    padding: 3rem 0 2rem;
    text-align: center;
  }

  .wq-hero__lead {
    margin-left: auto;
    margin-right: auto;
  }

  .wq-hero__actions {
    justify-content: center;
  }

  .wq-hero__details {
    grid-template-columns: 1fr;
  }

  .wq-detail-block {
    text-align: left;
  }

  .wq-panel {
    padding: 1.25rem;
  }

  .wq-panel::before {
    left: 1rem;
  }

  .wq-panel--cta {
    grid-template-columns: 1fr;
  }

  .wq-cta__side {
    justify-items: center;
  }

  .wq-prose {
    padding: 1.4rem;
  }

  .wq-section {
    padding: 3rem 0;
  }

  .wq-hero__orbit {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}