:root {
  --bg: #020802;
  --panel: #071407;
  --panel-2: #0b1f08;
  --violet: #76b900;
  --violet-bright: #c6ff19;
  --gold: #b9ff18;
  --ink: #f5ffe9;
  --muted: #9eb48e;
  --line: rgba(185, 255, 24, .25);
  color: var(--ink);
  background: var(--bg);
}

html,
body {
  background: var(--bg);
}

.site-shell {
  background:
    radial-gradient(circle at 72% 10%, rgba(135, 255, 22, .16), transparent 30%),
    radial-gradient(circle at 15% 35%, rgba(37, 112, 16, .24), transparent 34%),
    linear-gradient(180deg, #020802 0%, #031003 48%, #020802 100%);
}

.topbar {
  background: linear-gradient(180deg, rgba(0, 18, 4, .76), rgba(0, 18, 4, .12));
  border-bottom-color: rgba(185, 255, 24, .22);
}

.wordmark img,
.footer-wordmark img {
  content: url("/branding/gatcha-pools-wordmark-transparent.png");
  object-fit: contain;
  width: 260px;
  height: 76px;
  filter: drop-shadow(0 0 15px rgba(185, 255, 24, .38));
}

.topbar nav a,
.topbar nav button,
.network-chip,
.connect-button,
.language-toggle,
.social-button b {
  color: rgba(245, 255, 233, .86);
}

.network-chip,
.social-button,
.language-toggle,
.connect-button,
.hero-side-note,
.vault-panel,
.catalog-tools,
.catalog-search,
.catalog-summary,
.marketplace-plan,
.architecture-status,
.flow-modal,
.card-modal,
.marketplace-modal {
  background-color: rgba(4, 17, 5, .82);
  border-color: var(--line);
}

.network-chip i,
.ticker-status span,
.hero-overline i,
.live-dot,
.market-modal-status i {
  background: var(--gold);
  box-shadow: 0 0 18px rgba(185, 255, 24, .78);
}

.social-button,
.language-toggle,
.section-number,
.hero-overline,
.hero-copy h1 em,
.section-intro h2 em,
.cards-head h2 em,
.mechanics-title h2 em,
.modal-kicker,
.market-step,
.swap-intro > span,
.market-panel-head strong,
.architecture-strip > div:first-child > span,
.flow-copy h2 i,
.swap-arrow,
.reveal-icon {
  color: var(--gold);
}

.social-button:hover,
.primary-cta,
.vault-cta,
.market-tabs button.active {
  color: #061003;
  background: linear-gradient(135deg, #e4ff42, #78c700 58%, #4b8700);
  border-color: rgba(220, 255, 80, .88);
  box-shadow: 0 0 26px rgba(150, 255, 20, .24);
}

.secondary-cta,
.stage-arrow,
.modal-close,
.market-primary,
.card-filters button.active,
.asset-options button.active {
  color: var(--ink);
  background: linear-gradient(135deg, rgba(96, 196, 0, .26), rgba(188, 255, 24, .08));
  border-color: rgba(185, 255, 24, .46);
}

.hero-shade {
  background:
    radial-gradient(at 50% 45%, rgba(2, 12, 4, .98) 0 23%, rgba(2, 12, 4, .82) 45%, rgba(2, 12, 4, .42) 76%),
    linear-gradient(rgba(2, 12, 4, .54), rgba(2, 8, 2, .96));
}

.mosaic-card {
  border-color: rgba(185, 255, 24, .10);
}

.mosaic-card:hover,
.card-suggestions button:hover {
  background: rgba(118, 185, 0, .18);
  border-color: rgba(185, 255, 24, .5);
}

.asset-ticker,
.drop-grid,
.cards-section,
.mechanics-section,
.site-footer {
  background-color: #020a03;
  border-color: var(--line);
}

.ticker-item,
.pack-selector button,
.market-tabs button,
.flow-steps,
.flow-steps > div,
.selected-pack-row,
.asset-selector,
.vault-summary,
.vault-summary > div,
.mechanic-track article,
.architecture-status span,
.architecture-status strong,
.market-field,
.marketplace-plan > div,
.marketplace-plan article,
.listing-board,
.swap-intro {
  border-color: var(--line);
}

.drop-section {
  background:
    radial-gradient(circle at 20% 10%, rgba(185, 255, 24, .11), transparent 29%),
    linear-gradient(#020802, #051206);
}

.pack-stage,
.flow-visual,
.modal-card-art,
.listing-board,
.swap-intro {
  background:
    radial-gradient(circle at 50% 48%, rgba(151, 255, 18, .22), transparent 46%),
    #030b04;
}

.stage-orbit {
  border-color: rgba(185, 255, 24, .42);
  box-shadow: 0 0 44px rgba(118, 185, 0, .18);
}

.stage-orbit::after {
  border-color: rgba(185, 255, 24, .18);
}

.stage-code,
.concept-badge,
.concept-badge.live,
.architecture-status strong.live,
.flow-steps small.live-step {
  color: #c9ff31;
}

.architecture-strip {
  background:
    linear-gradient(100deg, rgba(118, 185, 0, .22), rgba(185, 255, 24, .05)),
    #041005;
  border-top-color: var(--line);
  border-bottom-color: var(--line);
}

.toast {
  color: #e4ff9c;
  background: #071407;
  border-color: rgba(185, 255, 24, .44);
}

.flap-lockup {
  grid-template-columns: 1fr;
}

.flap-lockup img,
.flow-butterfly,
img[src*="flap-butterfly"] {
  display: none !important;
}

@media (width <= 820px) {
  .wordmark img {
    width: 190px;
    height: 58px;
  }
}

@media (width <= 560px) {
  .wordmark img,
  .footer-wordmark img {
    width: 178px;
    height: 54px;
  }
}