:root {
  color-scheme: dark;
  --bg: #070816;
  --panel: #11142a;
  --line: #2b315d;
  --gold: #ffd65a;
  --muted: #aeb5d5;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: linear-gradient(180deg, #000 0%, #070816 60%, #0a122e 100%);
  color: #f7f8ff;
  font:
    16px/1.6 system-ui,
    sans-serif;
}
.section-nav {
  position: sticky;
  top: 10px;
  z-index: 20;
  display: flex;
  width: fit-content;
  max-width: calc(100% - 24px);
  margin: 10px auto 0;
  padding: 5px;
  gap: 2px;
  overflow-x: auto;
  border: 1px solid rgba(128, 151, 238, 0.26);
  border-radius: 999px;
  background: rgba(5, 7, 21, 0.78);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(14px);
  scrollbar-width: none;
}
.section-nav::-webkit-scrollbar {
  display: none;
}
.section-nav a {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 999px;
  color: rgba(235, 239, 255, 0.68);
  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.section-nav a:hover,
.section-nav a:focus-visible {
  color: #fff;
  background: rgba(143, 212, 255, 0.14);
  outline: none;
}
.section-nav a.active {
  color: #161000;
  background: var(--gold);
  box-shadow: 0 0 16px rgba(255, 214, 90, 0.35);
}
a {
  color: #8fd4ff;
}
header,
main,
footer {
  width: min(1120px, calc(100% - 32px));
  margin: auto;
}
header {
  padding: 15px 0 36px;
  text-align: center;
}
header .lead,
header > p:last-child {
  margin-inline: auto;
}
.pill-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 20px;
}
h1 {
  font-size: clamp(2.5rem, 7vw, 5.2rem);
  line-height: 0.95;
  margin: 0;
  color: var(--gold);
}
h2 {
  margin-top: 48px;
  scroll-margin-top: 76px;
}
h3 {
  margin-top: 30px;
}
.lead {
  font-size: 1.2rem;
  color: var(--muted);
  max-width: 760px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  grid-auto-flow: dense;
}
.card,
.code,
.table-wrap {
  background: rgba(17, 20, 42, 0.92);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
}
.card {
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: 0.2s;
  min-height: 128px;
}
.card:hover {
  transform: translateY(-3px);
  border-color: #7183df;
}
.card strong {
  display: block;
  color: var(--gold);
  font-size: 1.12rem;
}
.card span {
  color: var(--muted);
}
.card.featured {
  grid-column: span 2;
  min-height: 176px;
  padding: 22px;
}
.game-example-card {
  grid-column: span 1 !important;
  display: grid;
  grid-template-columns: minmax(170px, 42%) 1fr;
  align-items: center;
  gap: 20px;
  background: radial-gradient(circle at 24% 50%, rgba(51, 132, 255, .16), transparent 48%), #0a1022;
}
.game-example-card img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .38);
}
.game-example-card strong small {
  color: var(--muted);
  font-size: .72em;
  font-weight: 700;
}
.card.secondary-card {
  min-height: 112px;
  padding: 16px 18px;
}
.card.secondary-card strong {
  font-size: 1rem;
}
.compare-strip {
  margin-top: 18px;
}
.compare-strip .table-wrap {
  margin-top: 12px;
}
.compare-note {
  margin: 10px 0 0;
  color: var(--muted);
  max-width: 920px;
}
.config-card {
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 215, 90, 0.22), transparent 18%),
    radial-gradient(circle at 18% 80%, rgba(143, 212, 255, 0.08), transparent 24%),
    linear-gradient(135deg, #232b47 0%, #12172f 44%, #070a16 100%);
  border-color: rgba(255, 215, 90, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}
.config-card::before {
  content: "";
  position: absolute;
  inset: 16px 16px auto auto;
  width: 112px;
  height: 112px;
  opacity: 0.55;
  background:
    radial-gradient(circle at center, transparent 0 20px, rgba(255, 215, 90, 0.24) 20px 26px, transparent 26px 100%),
    conic-gradient(from 18deg,
      rgba(255, 215, 90, 0.92) 0 12deg,
      transparent 12deg 30deg,
      rgba(255, 215, 90, 0.92) 30deg 42deg,
      transparent 42deg 60deg,
      rgba(255, 215, 90, 0.92) 60deg 72deg,
      transparent 72deg 90deg,
      rgba(255, 215, 90, 0.92) 90deg 102deg,
      transparent 102deg 120deg,
      rgba(255, 215, 90, 0.92) 120deg 132deg,
      transparent 132deg 150deg,
      rgba(255, 215, 90, 0.92) 150deg 162deg,
      transparent 162deg 180deg,
      rgba(255, 215, 90, 0.92) 180deg 192deg,
      transparent 192deg 210deg,
      rgba(255, 215, 90, 0.92) 210deg 222deg,
      transparent 222deg 240deg,
      rgba(255, 215, 90, 0.92) 240deg 252deg,
      transparent 252deg 270deg,
      rgba(255, 215, 90, 0.92) 270deg 282deg,
      transparent 282deg 300deg,
      rgba(255, 215, 90, 0.92) 300deg 312deg,
      transparent 312deg 330deg,
      rgba(255, 215, 90, 0.92) 330deg 342deg,
      transparent 342deg 360deg);
  filter: drop-shadow(0 0 18px rgba(255, 215, 90, 0.14));
  pointer-events: none;
}
.horizon-card {
  background:
    radial-gradient(circle at 72% 25%, rgba(243, 232, 178, 0.92) 0 4px, rgba(243, 232, 178, 0.26) 4px 10px, transparent 10px 100%),
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.9) 0 1px, transparent 1px 100%),
    radial-gradient(circle at 42% 12%, rgba(255, 255, 255, 0.8) 0 1px, transparent 1px 100%),
    radial-gradient(circle at 58% 22%, rgba(255, 255, 255, 0.75) 0 1px, transparent 1px 100%),
    radial-gradient(circle at 82% 12%, rgba(255, 255, 255, 0.8) 0 1px, transparent 1px 100%),
    radial-gradient(ellipse 58% 28% at 50% 82%, rgba(198, 132, 82, 0.14), transparent 34%),
    linear-gradient(180deg, #050816 0%, #030612 44%, #101427 100%);
  border-color: rgba(143, 212, 255, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}
.horizon-card::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 34%;
  background:
    linear-gradient(180deg, rgba(3, 6, 16, 0) 0%, rgba(2, 3, 8, 0.5) 30%, rgba(1, 2, 6, 0.95) 100%),
    linear-gradient(90deg, rgba(10, 11, 18, 0.0) 0%, rgba(10, 11, 18, 0.9) 18%, rgba(10, 11, 18, 0.95) 82%, rgba(10, 11, 18, 0) 100%);
  pointer-events: none;
}
.horizon-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18%;
  height: 2px;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.18) 18%, rgba(255, 255, 255, 0.42) 48%, rgba(255, 255, 255, 0.18) 72%, transparent 100%);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.18);
  pointer-events: none;
}
pre {
  overflow: auto;
  margin: 0;
  color: #dce9ff;
  white-space: pre-wrap;
}
code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.code {
  position: relative;
  margin: 14px 0;
}
#options + .code {
  max-height: min(62vh, 540px);
  overflow: auto;
  scrollbar-gutter: stable;
}
#options + .code pre {
  overflow: visible;
}
.copy {
  position: absolute;
  right: 10px;
  top: 10px;
  border: 1px solid var(--line);
  background: #242a50;
  color: white;
  border-radius: 8px;
  padding: 7px 10px;
  cursor: pointer;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  text-align: left;
  padding: 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
th {
  color: var(--gold);
}
footer {
  padding: 60px 0;
  color: var(--muted);
  position: relative;
  z-index: 3;
}
.pill {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  margin: 3px;
}
.page-content {
  transition:
    transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.45s ease;
}
.page-content.slide-out {
  transform: translateX(80px);
  opacity: 0;
  pointer-events: none;
}
.toggle-btn {
  position: fixed;
  z-index: 2147483647;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 215, 0, 0.35);
  background: rgba(255, 215, 0, 0.12);
  color: #ffdc68;
  border-radius: 12px;
  padding: 10px 18px;
  cursor: pointer;
  font:
    600 14px/1 system-ui,
    sans-serif;
  backdrop-filter: blur(10px);
  transition: all 0.2s;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.toggle-btn:hover {
  background: rgba(255, 215, 0, 0.22);
  border-color: rgba(255, 215, 0, 0.6);
  transform: translateY(-1px);
}
.toggle-btn:active {
  transform: translateY(0);
}
.toggle-btn.active {
  background: rgba(200, 50, 50, 0.15);
  border-color: rgba(255, 100, 100, 0.3);
  color: #ff9090;
}
.toggle-btn.active:hover {
  background: rgba(200, 50, 50, 0.25);
}
.toggle-btn.pulse {
  animation: lucky-pulse 1.2s ease-in-out 3;
}
.toggle-btn .spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 215, 0, 0.2);
  border-top-color: #ffdc68;
  border-radius: 50%;
  animation: lucky-spin 0.7s linear infinite;
  vertical-align: middle;
}
.toggle-btn.spinning {
  pointer-events: none;
  opacity: 0.7;
}
.toggle-btn.spinning .spinner {
  display: inline-block;
}
.toggle-btn.spinning .label-text {
  display: none;
}
@keyframes lucky-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  }
  50% {
    transform: scale(1.12);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.35);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  }
}
@keyframes lucky-spin {
  to {
    transform: rotate(360deg);
  }
}
.fw-panel {
  position: fixed;
  z-index: 2147483646;
  top: 60px;
  right: 16px;
  display: none;
  flex-direction: column;
  gap: 6px;
  background: rgba(3, 4, 14, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  min-width: 200px;
}
.fw-panel.visible {
  display: flex;
}
.fw-panel select {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(3, 4, 14, 0.92);
  color: white;
  border-radius: 8px;
  padding: 8px 10px;
  font:
    500 13px/1 system-ui,
    sans-serif;
  cursor: pointer;
  appearance: auto;
}
.fw-panel select:hover {
  border-color: rgba(255, 255, 255, 0.2);
}
.fw-panel select option {
  background: #0b0e22;
  color: white;
  padding: 4px;
}
.fw-panel .panel-btn {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: white;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font:
    500 13px/1 system-ui,
    sans-serif;
  transition: all 0.15s;
  text-align: center;
}
.fw-panel .panel-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}
.fw-panel .panel-btn.gold {
  background: rgba(255, 215, 0, 0.1);
  border-color: rgba(255, 215, 0, 0.25);
  color: #ffdc68;
}
.fw-panel .panel-btn.gold:hover {
  background: rgba(255, 215, 0, 0.2);
}
.panel-btn.spinning {
  pointer-events: none;
  opacity: 0.6;
}
.panel-btn .spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 215, 0, 0.2);
  border-top-color: #ffdc68;
  border-radius: 50%;
  vertical-align: middle;
}
.panel-btn.spinning .spinner {
  display: inline-block;
  animation: lucky-spin 0.7s linear infinite;
}
.panel-btn.spinning .label-text {
  display: none;
}
.fw-panel .panel-btn.copy-btn {
  background: rgba(100, 200, 255, 0.06);
  border-color: rgba(100, 200, 255, 0.15);
  color: #8fd4ff;
}
.fw-panel .panel-btn.copy-btn:hover {
  background: rgba(100, 200, 255, 0.14);
}
#generated-config {
  display: none;
  margin-top: 12px;
  max-height: min(56vh, 420px);
  overflow-y: auto;
  scrollbar-gutter: stable;
}
#generated-config pre {
  overflow: visible;
}
.code-block {
  position: relative;
  margin: 14px 0;
}
.code-block pre {
  overflow: auto;
  margin: 0;
  color: #dce9ff;
  white-space: pre-wrap;
  background: rgba(17, 20, 42, 0.92);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
}
.code-block .copy-btn {
  position: absolute;
  right: 10px;
  top: 10px;
  border: 1px solid var(--line);
  background: #242a50;
  color: white;
  border-radius: 8px;
  padding: 7px 10px;
  cursor: pointer;
  font-size: 13px;
}
@media (max-width: 600px) {
  .fw-panel {
    right: 8px;
    top: 54px;
    min-width: 160px;
    padding: 8px;
    gap: 4px;
  }
  .fw-panel select {
    font-size: 11px;
    padding: 5px 6px;
  }
  .fw-panel .panel-btn {
    font-size: 11px;
    padding: 5px 6px;
  }
  .card.featured {
    grid-column: span 1;
  }
  .game-example-card {
    grid-template-columns: 1fr;
  }
}

.logo {
  display: block;
  width: min(820px, 100%);
  margin: 10px auto 4px;
  border-radius: 18px;
  cursor: pointer;
  transition:
    filter 0.2s,
    transform 0.1s;
  user-select: none;
}