/* Snipers-R-Us Access Gate — display wordmark + premium shell */
:root {
  --ag-bg: #000000;
  --ag-panel: rgba(22, 22, 24, 0.94);
  --ag-card: rgba(15, 15, 17, 0.88);
  --ag-line: rgba(255, 255, 255, 0.1);
  --ag-fg: #e7e9ea;
  --ag-muted: #71767b;
  --ag-accent: #22c55e;
  --ag-purple: #a855f7;
  --ag-cyan: #1d9bf0;
  --ag-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ag-display: "Bebas Neue", "Arial Narrow", "Helvetica Neue", sans-serif;
  --ag-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  background: var(--ag-bg);
  color: var(--ag-fg);
  font-family: var(--ag-font);
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(168, 85, 247, 0.16), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(34, 197, 94, 0.1), transparent 55%),
    radial-gradient(ellipse 50% 35% at 0% 80%, rgba(168, 85, 247, 0.08), transparent 50%),
    var(--ag-bg);
}

/* Full-bleed market ticker — spans entire viewport, always on */
.ag-ticker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  max-width: 100%;
  /* This page already ships viewport-fit=cover, so without a top inset the
     ticker renders underneath the status bar on notched iPhones. */
  box-sizing: border-box;
  height: calc(28px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  z-index: 2000;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(5, 5, 7, 0.98), rgba(9, 9, 13, 0.98));
  border-bottom: 1px solid rgba(168, 85, 247, 0.35);
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  pointer-events: none;
}
.ag-ticker-track {
  display: flex;
  align-items: center;
  gap: 28px;
  white-space: nowrap;
  padding-left: 100vw;
  animation: agTickerScroll 56s linear infinite;
  will-change: transform;
}
.ag-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ag-ticker-item .sym {
  color: #a3a3a3;
  font-weight: 800;
}
.ag-ticker-item .px {
  color: #e7e9ea;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ag-ticker-item .chg {
  font-weight: 800;
  font-size: 10px;
}
.ag-ticker-item .chg.up { color: #22c55e; }
.ag-ticker-item .chg.down { color: #a855f7; }
@keyframes agTickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .ag-ticker-track { animation: none; padding-left: 12px; }
}

.ag-shell {
  width: min(540px, 100%);
  margin: 0 auto;
  /* room for fixed ticker + notch above it, and the home indicator below */
  padding: calc(44px + env(safe-area-inset-top, 0px)) 18px
           calc(40px + env(safe-area-inset-bottom, 0px));
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ag-hero {
  width: 100%;
  margin-bottom: 22px;
}

.ag-brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 18px;
  width: 100%;
}

.ag-logo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 148px;
  height: 148px;
}
.ag-logo-wrap::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.2), rgba(168, 85, 247, 0.14) 55%, transparent 72%);
  filter: blur(12px);
  animation: ag-logo-glow 4s ease-in-out infinite;
}
.ag-reticle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.ag-reticle-rings {
  transform-origin: 70px 70px;
  animation: ag-reticle-spin 28s linear infinite;
}
.ag-reticle-dash-wrap {
  transform-origin: 70px 70px;
  animation: ag-reticle-spin-rev 20s linear infinite;
}
.ag-reticle-line {
  animation: ag-reticle-pulse 3.2s ease-in-out infinite;
}
.ag-reticle-t { animation-delay: 0s; }
.ag-reticle-r { animation-delay: 0.4s; }
.ag-reticle-b { animation-delay: 0.8s; }
.ag-reticle-l { animation-delay: 1.2s; }
.ag-reticle-dot {
  animation: ag-reticle-dot 3.2s ease-in-out infinite;
}
.ag-logo-scan {
  position: absolute;
  left: 18%;
  right: 18%;
  height: 2px;
  z-index: 3;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.85), rgba(34, 197, 94, 0.15), transparent);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.45);
  opacity: 0;
  pointer-events: none;
  animation: ag-logo-scan 7s ease-in-out infinite;
}
.ag-logo {
  position: relative;
  z-index: 1;
  width: 120px;
  height: 120px;
  object-fit: contain;
  border-radius: 28px;
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 22px rgba(34, 197, 94, 0.22));
}

.ag-wordmark {
  margin: 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--ag-display);
  /* "snipers-R-us" is ~12 glyphs plus 0.1em tracking, so the rendered width is
     roughly 8.5x the font-size. At 17vw that overflowed any phone: on a 430px
     screen it measured 554px and the wordmark was clipped on both edges. The
     58px floor made it unfixable, since clamp() could not shrink further.
     11.5vw keeps it edge-to-edge without ever exceeding the viewport. */
  font-size: clamp(30px, 11.5vw, 96px);
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}
.wm-line {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  position: relative;
  padding: 0 4px 12px;
  text-align: center;
  /* Belt and braces: even if the font renders wider than expected, the
     wordmark can never push the page into horizontal scroll. */
  max-width: 100%;
  overflow: hidden;
}
.wm-line::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(100%, 320px);
  height: 3px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--ag-purple) 20%, var(--ag-accent) 50%, var(--ag-purple) 80%, transparent);
  opacity: 0.85;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.4), 0 0 14px rgba(34, 197, 94, 0.28);
}
.wm-snipers {
  color: #ffffff;
  text-transform: lowercase;
  letter-spacing: 0.08em;
  text-shadow:
    0 0 32px rgba(255, 255, 255, 0.2),
    0 3px 0 rgba(0, 0, 0, 0.5);
}
.wm-dash {
  color: rgba(255, 255, 255, 0.3);
  margin: 0 0.06em;
  letter-spacing: 0;
  transform: translateY(-0.04em);
}
.wm-r {
  display: inline-block;
  color: var(--ag-accent);
  font-size: 1.22em;
  letter-spacing: 0.04em;
  transform: translateY(-0.02em);
  text-shadow:
    0 0 32px rgba(34, 197, 94, 0.75),
    0 0 64px rgba(34, 197, 94, 0.3),
    0 3px 0 rgba(0, 0, 0, 0.45);
}
.wm-us {
  color: var(--ag-purple);
  text-transform: lowercase;
  letter-spacing: 0.08em;
  text-shadow:
    0 0 32px rgba(168, 85, 247, 0.7),
    0 0 64px rgba(168, 85, 247, 0.25),
    0 3px 0 rgba(0, 0, 0, 0.45);
}

@keyframes ag-logo-glow {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}
@keyframes ag-reticle-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes ag-reticle-spin-rev {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}
@keyframes ag-reticle-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
@keyframes ag-reticle-dot {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
@keyframes ag-logo-scan {
  0%, 72%, 100% { top: 22%; opacity: 0; }
  8% { opacity: 0.9; }
  18% { top: 78%; opacity: 0.9; }
  28% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ag-reticle-rings,
  .ag-reticle-dash-wrap,
  .ag-reticle-line,
  .ag-reticle-dot,
  .ag-logo-scan,
  .ag-logo-wrap::before {
    animation: none;
  }
  .ag-logo-scan { display: none; }
}

.ag-sub {
  margin: 0 auto;
  max-width: 38ch;
  color: var(--ag-muted);
  font-size: 15px;
  line-height: 1.5;
}
.ag-sub strong { color: var(--ag-fg); font-weight: 700; }

.ag-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px auto 0;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(168, 85, 247, 0.45);
  background: rgba(168, 85, 247, 0.1);
  color: #e9d5ff;
  font-family: var(--ag-font);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.ag-info-btn:hover {
  background: rgba(168, 85, 247, 0.18);
  border-color: rgba(168, 85, 247, 0.65);
}
.ag-info-btn:active { transform: scale(0.98); }
.ag-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.ag-section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ag-info-link {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  font-family: var(--ag-font);
  font-size: 12px;
  font-weight: 700;
  color: var(--ag-purple);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  letter-spacing: 0;
  text-transform: none;
}
.ag-info-link:hover { color: #c084fc; }

.ag-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ag-modal-backdrop[hidden] { display: none; }
.ag-modal {
  width: min(560px, 100%);
  max-height: min(92vh, 900px);
  margin: auto 0 0;
  padding: 18px 16px 22px;
  border-radius: 20px 20px 0 0;
  border: 1px solid var(--ag-line);
  border-bottom: none;
  background: #0c0c0e;
  box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.55);
  text-align: left;
  overflow-y: auto;
}
@media (min-width: 520px) {
  .ag-modal-backdrop {
    align-items: center;
    padding: 24px 16px;
  }
  .ag-modal {
    margin: auto;
    border-radius: 20px;
    border-bottom: 1px solid var(--ag-line);
    max-height: min(88vh, 900px);
  }
}
.ag-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.ag-modal-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--ag-fg);
}
.ag-modal-close {
  appearance: none;
  border: 1px solid var(--ag-line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ag-muted);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.ag-modal-close:hover { color: var(--ag-fg); background: rgba(255, 255, 255, 0.08); }
.ag-modal-lead {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--ag-muted);
  line-height: 1.5;
}
.ag-modal-foot {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--ag-muted);
  line-height: 1.45;
  text-align: center;
}
.ag-modal-foot strong { color: var(--ag-accent); }

.ag-pass-grid {
  display: grid;
  gap: 10px;
}
.ag-pass-card {
  border: 1px solid var(--ag-line);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.28);
}
.ag-pass-card-featured {
  border-color: rgba(34, 197, 94, 0.45);
  background: rgba(34, 197, 94, 0.06);
}
.ag-pass-card-lifetime {
  border-color: rgba(168, 85, 247, 0.5);
  background: linear-gradient(145deg, rgba(168, 85, 247, 0.1), rgba(34, 197, 94, 0.06));
}
.ag-pass-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 2px;
}
.ag-pass-card-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
}
.ag-pass-price {
  font-family: var(--ag-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--ag-fg);
}
.ag-pass-duration {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--ag-muted);
}
.ag-pass-features {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.45;
}
.ag-pass-features li {
  position: relative;
  padding-left: 18px;
  margin: 4px 0;
  color: var(--ag-muted);
}
.ag-pass-features li.yes { color: #d1fae5; }
.ag-pass-features li.no { color: #6b7280; }
.ag-pass-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.ag-pass-features li.yes::before { background: var(--ag-accent); box-shadow: 0 0 8px rgba(34, 197, 94, 0.5); }
.ag-pass-features li.no::before { background: rgba(255, 255, 255, 0.15); }

.ag-card {
  width: 100%;
  text-align: left;
  background: var(--ag-card);
  border: 1px solid var(--ag-line);
  border-radius: 20px;
  padding: 20px 18px 18px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
}

.ag-section {
  margin: 16px 0 10px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ag-muted);
  font-weight: 700;
}
.ag-section:first-child { margin-top: 0; }

.ag-row-invite {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.ag-wallet-bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.ag-wallet-intro {
  margin: 0 0 10px;
  text-align: center;
}

.ag-btn {
  appearance: none;
  border: 1px solid var(--ag-line);
  background: var(--ag-panel);
  color: var(--ag-fg);
  border-radius: 999px;
  padding: 12px 16px;
  font-family: var(--ag-font);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  min-height: 48px;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  width: 100%;
}
.ag-btn:active { transform: scale(0.98); }
.ag-btn:hover { background: rgba(255, 255, 255, 0.06); }
.ag-btn.primary {
  background: #eff3f4;
  color: #0f1419;
  border-color: #eff3f4;
}
.ag-btn.primary:hover { background: #d7dbdc; }
.ag-btn.sacrifice {
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.28), rgba(34, 197, 94, 0.12));
  border-color: rgba(34, 197, 94, 0.5);
  color: #bbf7d0;
}
.ag-btn.ghost {
  background: transparent;
  color: var(--ag-muted);
}
.ag-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.ag-hint {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--ag-muted);
  line-height: 1.45;
  text-align: center;
}
.ag-addr {
  font-family: var(--ag-mono);
  font-size: 12px;
  color: var(--ag-muted);
  word-break: break-all;
  margin: 10px 0 0;
  text-align: center;
}

.ag-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 6px;
  color: var(--ag-muted);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
.ag-divider::before,
.ag-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ag-line);
}

.ag-trust-bar {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0 4px;
}
.ag-trust-item {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ag-muted);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.18);
}

.ag-crypto-options {
  display: grid;
  gap: 12px;
}
.ag-crypto-option {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 12px;
}
.ag-crypto-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ag-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ag-crypto-divider::before,
.ag-crypto-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ag-line);
}

.ag-plans {
  display: grid;
  gap: 10px;
}
.ag-plan {
  text-align: left;
  border: 1px solid var(--ag-line);
  background: rgba(0, 0, 0, 0.25);
  border-radius: 16px;
  padding: 14px;
  cursor: pointer;
  color: inherit;
  width: 100%;
  font-family: var(--ag-font);
  transition: border-color 0.15s, background 0.15s;
}
.ag-plan:hover { border-color: rgba(255, 255, 255, 0.18); }
.ag-plan.selected {
  border-color: rgba(168, 85, 247, 0.45);
  background: rgba(168, 85, 247, 0.07);
}
.ag-plan-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.ag-plan-name { font-size: 17px; font-weight: 800; }
.ag-plan-price {
  font-family: var(--ag-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--ag-fg);
}
.ag-plan-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: var(--ag-muted);
}
.ag-plan-main { color: var(--ag-muted); }
.ag-plan-crypto {
  color: var(--ag-accent);
  font-weight: 700;
}
.ag-plan-meta s { opacity: 0.65; }

.ag-restore { margin-top: 4px; }
.ag-restore .ag-row-invite { margin-top: 8px; }

.ag-crypto-pay { margin-top: 14px; }
.ag-coin-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 4px;
}
.ag-coin {
  appearance: none;
  border: 1px solid var(--ag-line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ag-muted);
  border-radius: 12px;
  padding: 12px 8px;
  font-family: var(--ag-font);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  min-height: 46px;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.ag-coin:hover { border-color: rgba(255, 255, 255, 0.2); color: var(--ag-fg); }
.ag-coin.active {
  border-color: rgba(34, 197, 94, 0.55);
  background: rgba(34, 197, 94, 0.12);
  color: #bbf7d0;
}
.ag-select, .ag-input {
  width: 100%;
  border: 1px solid var(--ag-line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--ag-fg);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: var(--ag-font);
  font-size: 15px;
  font-weight: 500;
  min-height: 48px;
}

.ag-quote {
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--ag-line);
  background: rgba(0, 0, 0, 0.3);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ag-muted);
}
.ag-quote strong { color: var(--ag-fg); }
.ag-quote code {
  font-family: var(--ag-mono);
  font-size: 12px;
  color: #7dd3fc;
  word-break: break-all;
}

.ag-actions {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.ag-status {
  margin-top: 12px;
  min-height: 20px;
  font-size: 14px;
  color: var(--ag-muted);
  text-align: center;
}
.ag-status-sticky {
  margin: 0 0 14px;
  padding: 10px 12px;
  min-height: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  line-height: 1.4;
}
.ag-status-sticky:empty {
  display: none;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
}
.ag-status.err { color: #f87171; }
.ag-status.ok { color: #4ade80; }
.ag-status-sticky.err {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.35);
}
.ag-status-sticky.ok {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.35);
}
@keyframes agBtnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
  50% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
}
.ag-btn-pulse {
  animation: agBtnPulse 0.9s ease-out 2;
}

.ag-active-pass {
  text-align: center;
  padding: 18px 14px 8px;
  border: 1px solid rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.08);
  border-radius: 16px;
  margin-bottom: 8px;
}
.ag-active-title {
  font-size: 18px;
  font-weight: 800;
  color: #bbf7d0;
  margin-bottom: 6px;
}
.ag-active-meta {
  font-size: 13px;
  color: var(--ag-muted);
  margin-bottom: 8px;
}
.ag-active-timer {
  font-family: var(--ag-mono);
  font-size: 22px;
  font-weight: 700;
  color: #86efac;
  margin: 8px 0 14px;
  letter-spacing: 0.02em;
}

.ag-foot {
  width: 100%;
  margin-top: 28px;
  text-align: center;
  font-size: 13px;
  color: var(--ag-muted);
  line-height: 1.6;
}
.ag-foot p { margin: 0 0 6px; }
.ag-foot strong { color: var(--ag-fg); font-weight: 700; }
.ag-foot a {
  color: var(--ag-cyan);
  text-decoration: none;
  font-weight: 700;
}
.ag-foot a:hover { text-decoration: underline; }
.ag-copy { font-size: 12px; opacity: 0.85; }

.ag-paypal {
  width: 100%;
  min-height: 48px;
  margin: 4px 0 8px;
}
.ag-paypal-soon {
  margin: 8px 0 0;
  font-size: 13px;
}

/* Free home preview CTA */
.ag-preview-cta {
  margin: 0 0 18px;
  padding: 16px 16px 14px;
  border-radius: 14px;
  border: 1px solid rgba(34, 197, 94, 0.35);
  background:
    linear-gradient(145deg, rgba(34, 197, 94, 0.12), rgba(168, 85, 247, 0.08) 55%, transparent),
    rgba(10, 12, 14, 0.9);
  text-align: center;
  animation: agPreviewIn 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes agPreviewIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ag-preview-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #22c55e;
  margin-bottom: 4px;
}
.ag-preview-title {
  font-family: var(--ag-display);
  font-size: 28px;
  letter-spacing: 0.04em;
  line-height: 1;
  margin: 0 0 6px;
}
.ag-preview-sub {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--ag-muted);
}
.ag-preview-sub strong { color: var(--ag-fg); }
#btn-preview { width: 100%; }

.ag-referral {
  margin: 6px 0 14px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(168, 85, 247, 0.3);
  background: rgba(168, 85, 247, 0.08);
  text-align: left;
}
.ag-referral .ag-section {
  margin: 0 0 4px;
  color: #a855f7;
}
.ag-referral .ag-hint {
  margin: 0;
}

@media (min-width: 520px) {
  .ag-shell { padding-top: 56px; }
  .ag-wordmark { font-size: clamp(72px, 12vw, 104px); }
  .ag-logo { width: 132px; height: 132px; }
  .ag-logo-wrap { width: 148px; height: 148px; }
  .ag-plans { grid-template-columns: 1fr 1fr; }
  .ag-plans .ag-plan:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 380px) {
  /* Must stay under the base 11.5vw or the smallest phones overflow again —
     the old 15vw/48px floor was the reason this broke worst on small screens. */
  .ag-wordmark { font-size: clamp(26px, 10.5vw, 44px); letter-spacing: 0.06em; }
  .wm-r { font-size: 1.16em; }
}

/* ══════════════════════════════════════════════════════════════════════════
   GAME-FI HUD overlayer — theme pass over the gate's geometry.
   Only colors / type / borders / glow are restyled here; layout stays as-is
   so every payment flow keeps working untouched.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --ag-bg: #04060d;
  --ag-panel: rgba(10, 13, 24, 0.94);
  --ag-card: rgba(12, 16, 30, 0.88);
  --ag-line: rgba(255, 255, 255, 0.09);
  --ag-fg: #f2f2fa;
  --ag-muted: #a7a7bf;
  --ag-accent: #22c55e;
  --ag-purple: #a855f7;
  --ag-cyan: #22d3ee;
  --ag-display: 'Orbitron', ui-sans-serif, system-ui, sans-serif;
  --ag-mono: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body {
  background:
    radial-gradient(ellipse 1000px 480px at 12% -10%, rgba(168, 85, 247, 0.17), transparent 55%),
    radial-gradient(ellipse 800px 420px at 94% 4%, rgba(34, 211, 238, 0.10), transparent 50%),
    radial-gradient(ellipse 700px 480px at 50% 115%, rgba(34, 197, 94, 0.07), transparent 55%),
    #04060d;
  font-family: var(--ag-mono);
}
/* Starfield + scanlines — the arena */
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1.4px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 35%, #000 25%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 35%, #000 25%, transparent 100%);
}
body::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.016) 0 1px, transparent 1px 3px);
}
.ag-shell { position: relative; z-index: 1; }

/* Ticker tape — terminal gold seam */
.ag-ticker {
  border-bottom: 1px solid rgba(34, 197, 94, 0.22);
  background: linear-gradient(90deg, rgba(6, 8, 16, 0.98), rgba(10, 13, 24, 0.98));
  font-family: var(--ag-mono);
}
.ag-ticker-item .sym { color: var(--ag-accent); font-weight: 800; }
.ag-ticker-item .chg.up { color: #16C784; }
.ag-ticker-item .chg.down { color: #FF3B4E; }

/* ── Hero ── */
.ag-wordmark {
  font-family: var(--ag-display);
  font-weight: 900;
  letter-spacing: 0.04em;
  filter: drop-shadow(0 0 26px rgba(34, 197, 94, 0.22));
}
.wm-snipers { color: #fff; }
.wm-dash { color: var(--ag-muted); }
.wm-r { color: var(--ag-accent); text-shadow: 0 0 18px rgba(34, 197, 94, 0.55); }
.wm-us { color: var(--ag-purple); text-shadow: 0 0 18px rgba(168, 85, 247, 0.55); }
.ag-sub { color: var(--ag-muted); font-family: var(--ag-mono); font-size: 12.5px; letter-spacing: 0.04em; }
.ag-sub strong { color: var(--ag-accent); }
.ag-reticle-ring { animation: agScopePulse 2.6s ease-in-out infinite; }
@keyframes agScopePulse {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}
.ag-info-btn {
  font-family: var(--ag-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ag-accent);
  border: 1px solid rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.07);
  border-radius: 8px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: background .16s, box-shadow .16s, transform .16s;
}
.ag-info-btn:hover { background: rgba(34, 197, 94, 0.14); box-shadow: 0 0 18px rgba(34, 197, 94, 0.20); transform: translateY(-1px); }
.ag-info-icon { color: var(--ag-accent); }

/* ── Main card — dark glass + HUD corners ── */
.ag-card {
  position: relative;
  background: linear-gradient(165deg, rgba(20, 26, 44, 0.90), rgba(10, 13, 24, 0.95) 60%, rgba(7, 9, 17, 0.97));
  border: 1px solid var(--ag-line);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 30px rgba(168, 85, 247, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.ag-card::before, .ag-card::after {
  content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none;
  border-color: rgba(34, 197, 94, 0.55); border-style: solid; z-index: 2;
}
.ag-card::before { left: 10px; top: 10px; border-width: 2px 0 0 2px; border-radius: 6px 0 0 0; }
.ag-card::after { right: 10px; bottom: 10px; border-width: 0 2px 2px 0; border-radius: 0 0 6px 0; }

/* ── Section labels — HUD accent bar ── */
.ag-section {
  font-family: var(--ag-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ag-accent);
  display: flex; align-items: center; gap: 9px;
}
.ag-section::before {
  content: ""; width: 4px; height: 13px; border-radius: 2px; flex: none;
  background: linear-gradient(180deg, var(--ag-accent), var(--ag-purple));
  box-shadow: 0 0 9px rgba(34, 197, 94, 0.5);
}
.ag-hint { color: var(--ag-muted); font-family: var(--ag-mono); font-size: 11px; }

/* ── Inputs — recessed HUD fields ── */
.ag-input {
  background: linear-gradient(180deg, rgba(4, 6, 12, 0.85), rgba(8, 11, 20, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 9px;
  color: var(--ag-fg);
  font-family: var(--ag-mono);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.45);
  transition: border-color .16s, box-shadow .16s;
}
.ag-input:focus {
  outline: none;
  border-color: rgba(34, 197, 94, 0.60);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.25), 0 0 16px rgba(34, 197, 94, 0.12), inset 0 2px 8px rgba(0, 0, 0, 0.45);
}
.ag-input::placeholder { color: rgba(167, 167, 191, 0.5); }

/* ── Buttons ── */
.ag-btn {
  font-family: var(--ag-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 8px;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  transition: transform .16s, box-shadow .16s, background .16s, border-color .16s;
}
.ag-btn.primary {
  color: #06120a;
  background: linear-gradient(180deg, #4ade80, var(--ag-accent));
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.ag-btn.primary:hover { background: linear-gradient(180deg, #86efac, #4ade80); box-shadow: 0 0 30px rgba(34, 197, 94, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5); transform: translateY(-1px); }
.ag-btn.sacrifice {
  color: #fff;
  background: linear-gradient(180deg, #b968f5, var(--ag-purple));
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.ag-btn.sacrifice:hover { box-shadow: 0 0 30px rgba(168, 85, 247, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.25); transform: translateY(-1px); }
.ag-btn.ghost {
  color: var(--ag-fg);
  border: 1px solid var(--ag-line);
  background: rgba(255, 255, 255, 0.03);
}
.ag-btn.ghost:hover { border-color: rgba(34, 197, 94, 0.45); background: rgba(34, 197, 94, 0.07); transform: translateY(-1px); }

/* ── Dividers ── */
.ag-divider { color: var(--ag-muted); font-family: var(--ag-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; }
.ag-divider::before, .ag-divider::after {
  content: ""; background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.4), transparent);
  height: 1px;
}

/* ── Plans — loot cards ── */
.ag-plan {
  background: linear-gradient(165deg, rgba(20, 26, 44, 0.75), rgba(10, 13, 24, 0.9));
  border: 1px solid var(--ag-line);
  border-radius: 12px;
  color: var(--ag-fg);
  font-family: var(--ag-mono);
  transition: transform .18s cubic-bezier(.16,1,.3,1), border-color .18s, box-shadow .18s;
}
.ag-plan:hover { transform: translateY(-2px); border-color: rgba(34, 197, 94, 0.40); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45); }
.ag-plan.selected {
  border-color: rgba(34, 197, 94, 0.75);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.35), 0 0 22px rgba(34, 197, 94, 0.18);
  background: linear-gradient(165deg, rgba(50, 40, 14, 0.55), rgba(10, 13, 24, 0.92));
}
.ag-plan-price { color: var(--ag-accent); font-family: var(--ag-display); font-weight: 800; }

/* ── Quotes / wallet / coins ── */
.ag-quote, .ag-addr {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  color: var(--ag-fg);
  font-family: var(--ag-mono);
}
.ag-coin {
  font-family: var(--ag-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  border: 1px solid var(--ag-line); background: rgba(255, 255, 255, 0.03);
  color: var(--ag-muted); border-radius: 999px;
  transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
}
.ag-coin:hover { color: var(--ag-fg); border-color: rgba(34, 197, 94, 0.4); }
.ag-coin.active {
  color: var(--ag-accent); border-color: rgba(34, 197, 94, 0.6);
  background: rgba(34, 197, 94, 0.10); box-shadow: 0 0 12px rgba(34, 197, 94, 0.18);
}

/* ── Trust bar ── */
.ag-trust-item {
  font-family: var(--ag-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: #16C784;
}
.ag-trust-item::before { content: "✓ "; color: #16C784; }

/* ── Status / banners ── */
.ag-active-pass {
  border: 1px solid rgba(22, 199, 132, 0.45);
  background: linear-gradient(165deg, rgba(22, 60, 44, 0.55), rgba(10, 13, 24, 0.92));
  border-radius: 12px;
}
.ag-active-title { color: #16C784; font-family: var(--ag-display); font-weight: 800; letter-spacing: 0.06em; }
.ag-referral {
  border: 1px solid rgba(34, 211, 238, 0.40);
  background: rgba(34, 211, 238, 0.07);
  border-radius: 10px;
}

/* ── Modal — HUD frame ── */
.ag-modal-backdrop { background: rgba(2, 6, 23, 0.80); backdrop-filter: blur(8px); }
.ag-modal {
  position: relative;
  background:
    radial-gradient(ellipse 500px 240px at 50% -10%, rgba(34, 197, 94, 0.06), transparent 60%),
    linear-gradient(180deg, #0e1322, #080a12);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65), 0 0 50px rgba(34, 197, 94, 0.06);
}
.ag-modal::before, .ag-modal::after {
  content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none;
  border-color: rgba(34, 197, 94, 0.6); border-style: solid;
}
.ag-modal::before { left: 10px; top: 10px; border-width: 2px 0 0 2px; border-radius: 6px 0 0 0; }
.ag-modal::after { right: 10px; bottom: 10px; border-width: 0 2px 2px 0; border-radius: 0 0 6px 0; }
.ag-modal-title { font-family: var(--ag-display); font-weight: 800; letter-spacing: 0.08em; }
.ag-modal-lead { color: var(--ag-muted); font-family: var(--ag-mono); font-size: 12px; }
.ag-modal-close {
  border: 1px solid var(--ag-line); background: rgba(255, 255, 255, 0.04); color: var(--ag-muted);
  border-radius: 8px; transition: color .15s, border-color .15s, box-shadow .15s;
}
.ag-modal-close:hover { color: #FF3B4E; border-color: rgba(255, 59, 78, 0.6); box-shadow: 0 0 14px rgba(255, 59, 78, 0.25); background: rgba(255, 59, 78, 0.06); }
.ag-pass-card {
  background: linear-gradient(165deg, rgba(20, 26, 44, 0.75), rgba(10, 13, 24, 0.9));
  border: 1px solid var(--ag-line);
  border-radius: 12px;
}
.ag-pass-card-featured { border-color: rgba(168, 85, 247, 0.55); box-shadow: 0 0 22px rgba(168, 85, 247, 0.15); }
.ag-pass-card-lifetime { border-color: rgba(34, 197, 94, 0.55); box-shadow: 0 0 22px rgba(34, 197, 94, 0.15); }
.ag-pass-price { color: var(--ag-accent); font-family: var(--ag-display); font-weight: 800; }
.ag-pass-features li.yes::before { color: #16C784; }
.ag-pass-features li.no { opacity: 0.5; }
.ag-modal-foot { color: var(--ag-muted); font-family: var(--ag-mono); font-size: 11px; }

/* ── Footer ── */
.ag-foot { color: var(--ag-muted); font-family: var(--ag-mono); font-size: 11px; }
.ag-foot a { color: var(--ag-accent); }
.ag-foot a:hover { color: #4ade80; }

@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
  .ag-reticle-ring { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   iOS: stop focus-zoom on the gate's inputs
   ──────────────────────────────────────────────────────────────────────────
   Safari zooms the viewport whenever a focused field renders below 16px and
   never zooms back out, so tapping the email or invite box left the whole
   page scaled in and horizontally scrollable. Same 16px floor already applied
   to the app shell in mobile-shell.css.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px), (pointer: coarse) {
  .ag-input,
  input[type="email"],
  input[type="text"],
  textarea,
  select {
    font-size: 16px !important;
  }
}