:root {
  --brett-blue: #0099ff;
  --brett-blue-light: #4db8ff;
  --brett-blue-dark: #0066cc;
  --brett-navy: #0a1628;
  --yellow: var(--brett-blue);
  --rpgblue: var(--brett-blue);
  --primary: var(--brett-blue);
  --accent: var(--brett-blue);
  --ring: var(--brett-blue);
  --header-scale: 1.3;
  --header-shadow: calc(6px * var(--header-scale));
  --header-h: calc(4.75rem * var(--header-scale) + var(--header-shadow));
  --btn-opposite: linear-gradient(#ffc857, #ff7700, #e65c00);
  --btn-opposite-deep: linear-gradient(#ff9a3c, #ff5500, #cc4400);
  --btn-blue: linear-gradient(#66c2ff, #0099ff, #0066cc);
}

body {
  background-color: #041018 !important;
  background-image: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: auto;
  }
}

html {
  scroll-padding-top: calc(var(--header-h) + 0.75rem);
}

.site-bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.site-bg-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 16, 24, 0.55) 0%, rgba(4, 16, 24, 0.08) 42%, rgba(4, 16, 24, 0.08) 58%, rgba(4, 16, 24, 0.55) 100%),
    radial-gradient(ellipse 55% 45% at 50% 48%, transparent 0%, rgba(4, 16, 24, 0.12) 100%);
}

.site-bg-root:not(.site-bg-root--ready) .site-bg-canvas {
  opacity: 0;
}

.site-bg-root--ready .site-bg-canvas {
  opacity: 1;
  transition: opacity 0.4s ease;
}

.site-bg-root--fallback .site-bg-canvas {
  opacity: 0;
}

body.site-bg-fallback {
  background: radial-gradient(70% 60% at 50% 45%, #4db8ff, #0099ff, #0066cc 75%, #041018 100%) !important;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: calc(0.55rem * var(--header-scale)) 0 calc(0.35rem * var(--header-scale) + var(--header-shadow));
  background: rgba(4, 16, 24, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: calc(3px * var(--header-scale)) solid #000;
  box-shadow: 0 calc(6px * var(--header-scale)) 0 rgba(0, 0, 0, 0.35);
  overflow: visible;
}

.site-header-inner {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(calc(0.75rem * var(--header-scale)), 2vw, calc(2rem * var(--header-scale)));
  padding-inline: clamp(calc(0.85rem * var(--header-scale)), 2.5vw, calc(2.5rem * var(--header-scale)));
  overflow: visible;
  scrollbar-width: none;
}

.site-header-inner::-webkit-scrollbar {
  display: none;
}

.site-header-zone {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: visible;
}

.site-header-zone--brand {
  justify-self: start;
  justify-content: flex-start;
}

.site-header-zone--nav {
  justify-self: center;
  justify-content: center;
  gap: calc(0.4rem * var(--header-scale));
  flex-wrap: nowrap;
}

.site-header-zone--tools {
  justify-self: end;
  justify-content: flex-end;
  gap: clamp(calc(0.5rem * var(--header-scale)), 1.2vw, calc(1.25rem * var(--header-scale)));
  flex-wrap: nowrap;
}

.site-header-brand {
  display: flex;
  align-items: center;
  gap: calc(0.6rem * var(--header-scale));
  text-decoration: none;
  flex-shrink: 0;
  min-width: 0;
}

.site-header-logo {
  width: calc(38px * var(--header-scale));
  height: calc(38px * var(--header-scale));
  border-radius: calc(0.55rem * var(--header-scale));
  border: calc(2px * var(--header-scale)) solid #000;
  box-shadow: 0 calc(3px * var(--header-scale)) 0 #000;
  object-fit: cover;
  flex-shrink: 0;
}

.site-header-name {
  font-family: var(--font-display);
  font-size: clamp(calc(0.72rem * var(--header-scale)), 2.8vw, calc(1.05rem * var(--header-scale)));
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  display: block;
  color: var(--brett-blue-light) !important;
  text-shadow:
    calc(2px * var(--header-scale)) 0 #000,
    calc(-2px * var(--header-scale)) 0 #000,
    0 calc(2px * var(--header-scale)) #000,
    0 calc(-2px * var(--header-scale)) #000,
    calc(1px * var(--header-scale)) calc(1px * var(--header-scale)) #000,
    calc(-1px * var(--header-scale)) calc(1px * var(--header-scale)) #000,
    calc(1px * var(--header-scale)) calc(-1px * var(--header-scale)) #000,
    calc(-1px * var(--header-scale)) calc(-1px * var(--header-scale)) #000,
    calc(4px * var(--header-scale)) calc(4px * var(--header-scale)) #b51a3a;
}

.site-header-socials {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: calc(0.3rem * var(--header-scale));
  flex-shrink: 0;
}

.site-header-socials .social-btn,
.site-header-zone--tools .social-btn {
  width: calc(32px * var(--header-scale));
  height: calc(32px * var(--header-scale));
  flex-shrink: 0;
}

.site-header .social-btn svg {
  width: calc(1.25rem * var(--header-scale));
  height: calc(1.25rem * var(--header-scale));
}

.site-header-zone--tools .mc-pill {
  white-space: nowrap;
  flex-shrink: 0;
  padding: calc(0.35rem * var(--header-scale)) calc(0.65rem * var(--header-scale));
  font-size: calc(0.75rem * var(--header-scale));
  border-width: calc(3px * var(--header-scale));
  box-shadow: 0 calc(4px * var(--header-scale)) #000;
}

.site-header-zone--tools .mc-pill .live {
  width: calc(0.55rem * var(--header-scale));
  height: calc(0.55rem * var(--header-scale));
}

.site-header-zone--nav .rpg-pill,
.site-header-zone--tools .rpg-pill {
  white-space: nowrap;
  flex-shrink: 0;
  padding: calc(0.4rem * var(--header-scale)) calc(0.7rem * var(--header-scale));
  font-size: calc(0.75rem * var(--header-scale));
  border-width: calc(3px * var(--header-scale));
  box-shadow:
    0 var(--header-shadow) #000,
    inset 0 calc(-6px * var(--header-scale)) #00000040,
    inset 0 calc(6px * var(--header-scale)) #ffffff59;
  text-shadow: none;
}

.header-ca {
  display: inline-flex;
  align-items: center;
  gap: calc(0.3rem * var(--header-scale));
  flex-shrink: 0;
  padding: calc(0.2rem * var(--header-scale)) calc(0.25rem * var(--header-scale)) calc(0.2rem * var(--header-scale)) calc(0.5rem * var(--header-scale));
  background: linear-gradient(#8fd4ff, #0099ff);
  border: calc(2px * var(--header-scale)) solid #000;
  border-radius: 9999px;
  box-shadow: 0 calc(3px * var(--header-scale)) 0 #000;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.header-ca:hover {
  background: var(--btn-opposite) !important;
}

.header-ca:hover .header-ca-label,
.header-ca:hover .header-ca-value {
  color: #1a0a00;
}

.header-ca-label {
  font-family: var(--font-display);
  font-size: calc(0.7rem * var(--header-scale));
  line-height: 1;
  color: #000;
  letter-spacing: 0.06em;
}

.header-ca-value {
  font-family: ui-monospace, monospace;
  font-size: calc(0.62rem * var(--header-scale));
  line-height: 1;
  color: rgba(0, 0, 0, 0.88);
  max-width: calc(5.5rem * var(--header-scale));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-ca-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(26px * var(--header-scale));
  height: calc(26px * var(--header-scale));
  flex-shrink: 0;
  border: calc(2px * var(--header-scale)) solid #000;
  border-radius: calc(0.45rem * var(--header-scale));
  background: #e63946;
  color: #fff;
  box-shadow: 0 calc(2px * var(--header-scale)) 0 #000;
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.1s ease,
    box-shadow 0.1s ease;
}

.header-ca-copy svg {
  width: calc(12px * var(--header-scale));
  height: calc(12px * var(--header-scale));
}

.header-ca-copy:hover {
  transform: translateY(1px);
  box-shadow: 0 1px 0 #000;
  background: var(--btn-blue) !important;
}

@media (max-width: 900px) {
  .site-header-inner {
    overflow-x: auto;
    padding-bottom: calc(2px * var(--header-scale));
  }
}

.hero-minimal {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h, 7.5rem) + 0.5rem) 0 0;
  pointer-events: none;
}

.hero-minimal-top,
.hero-minimal-bottom,
.hero-marquee {
  pointer-events: auto;
  position: relative;
  z-index: 2;
}

.hero-minimal-top {
  flex-shrink: 0;
  padding-inline: 1rem;
}

.hero-minimal-spacer {
  flex: 1 1 auto;
  min-height: 12vh;
  pointer-events: none;
}

.hero-marquee {
  margin-top: auto;
  flex-shrink: 0;
  width: 100%;
  align-self: stretch;
}

.site-marquee {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
}

.site-section {
  background: rgba(4, 16, 24, 0.18);
}

.site-footer {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .site-bg-canvas {
    opacity: 1 !important;
  }
}

.brett-bg {
  background: transparent;
  position: relative;
}

.text-\[\#ffd230\],
.rpg-text.yellow,
.rpg-text.red {
  color: var(--brett-blue-light) !important;
}

.font-display.text-5xl.text-\[\#ffd230\] {
  color: var(--brett-blue-light) !important;
}

.bg-\[\#ffd230\]\/40 {
  background-color: rgba(0, 153, 255, 0.35) !important;
}

.bg-\[\#2b7fff\] {
  background-color: var(--brett-blue-dark) !important;
}

.rpg-yellow {
  background: var(--btn-blue) !important;
}

.rpg-blue {
  background: linear-gradient(#8fd4ff, #4db8ff, #0099ff) !important;
}

.rpg-green {
  background: var(--btn-blue) !important;
}

.rpg-pill {
  text-shadow: none !important;
  transition:
    background 0.2s ease,
    transform 0.12s ease,
    box-shadow 0.12s ease,
    color 0.2s ease !important;
}

.rpg-yellow:hover,
.rpg-green:hover,
.rpg-blue:hover,
button.rpg-pill:hover {
  background: var(--btn-opposite) !important;
  color: #1a0a00 !important;
}

.rpg-pill:hover {
  transform: translateY(2px);
  box-shadow:
    0 3px #000,
    inset 0 -6px #00000040,
    inset 0 6px #ffffff59 !important;
}

.rpg-pill:active {
  transform: translateY(4px);
  box-shadow:
    0 1px #000,
    inset 0 -6px #00000040,
    inset 0 6px #ffffff59 !important;
}

.mc-pill {
  background: var(--brett-navy);
  transition:
    background 0.2s ease,
    transform 0.12s ease,
    box-shadow 0.12s ease,
    color 0.2s ease;
}

.mc-pill:hover {
  background: var(--btn-opposite) !important;
  color: #1a0a00 !important;
  transform: translateY(2px);
  box-shadow: 0 2px #000 !important;
}

.mc-pill:hover .live {
  background: #1a0a00;
  box-shadow: 0 0 8px #ff7700;
}

.mc-pill:hover .text-\[\#2bd35a\] {
  color: #1a0a00 !important;
}

.social-btn {
  background: var(--brett-navy);
  transition:
    background 0.2s ease,
    transform 0.12s ease,
    box-shadow 0.12s ease,
    color 0.2s ease;
}

.social-btn:hover {
  background: var(--btn-opposite-deep) !important;
  color: #1a0a00 !important;
  transform: translateY(2px);
  box-shadow: 0 2px #000 !important;
}

.ca-card {
  background: linear-gradient(#8fd4ff, #0099ff) !important;
}

.dark-card {
  background: rgba(17, 10, 10, 0.88) !important;
  box-shadow: 0 8px #000, inset 0 0 0 2px rgba(0, 153, 255, 0.2) !important;
}

.mc-pill .live {
  background: var(--brett-blue);
  box-shadow: 0 0 8px var(--brett-blue);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.tokenomics-value {
  color: var(--brett-blue-light);
  font-family: var(--font-display);
  font-size: 2rem;
}

.prelaunch-card {
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  padding: 2rem;
}

.prelaunch-card img {
  width: 120px;
  height: 120px;
  border-radius: 1rem;
  border: 3px solid #000;
  box-shadow: 0 6px #000;
}

.gallery-img-top {
  object-position: 50% 25%;
}

.volume-control {
  position: fixed;
  right: clamp(0.75rem, 2vw, 1.25rem);
  bottom: clamp(0.75rem, 2vw, 1.25rem);
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  background: rgba(4, 16, 24, 0.9);
  border: 3px solid #000;
  border-radius: 9999px;
  box-shadow: 0 4px 0 #000;
  backdrop-filter: blur(10px);
}

.volume-control-mute {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 2px solid #000;
  border-radius: 9999px;
  background: var(--brett-navy);
  color: var(--brett-blue-light);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.volume-control-mute:hover {
  background: var(--btn-opposite-deep);
  color: #1a0a00;
}

.volume-control-mute .volume-icon--off {
  display: none;
}

.volume-control-mute.is-muted .volume-icon--on {
  display: none;
}

.volume-control-mute.is-muted .volume-icon--off {
  display: block;
}

.volume-control-mute svg {
  width: 18px;
  height: 18px;
}

.volume-control-slider {
  width: clamp(72px, 14vw, 110px);
  accent-color: var(--brett-blue);
  cursor: pointer;
}

.volume-control-value {
  min-width: 2.5rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  color: var(--brett-blue-light);
  text-align: right;
}