*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --accent: #e8e8e8;
  --accent-blue: #cfd6dc;
  --surface: rgba(255, 255, 255, 0.14);
  --surface-border: rgba(255, 255, 255, 0.32);
  --surface-hover: rgba(255, 255, 255, 0.22);
  --text: #f5f7fa;
  --text-dim: rgba(255, 255, 255, 0.55);
  --font-display: 'Orbitron', sans-serif;
  --font-mono: 'Space Mono', 'Share Tech Mono', ui-monospace, monospace;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #05060a;
  color: #f5f7fa;
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-mono);
}

/* ═══════════════════════════════
   LOADER
═══════════════════════════════ */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vh, 1.75rem);
  padding: 2rem;
  transition: opacity 1.1s ease;
}
.loader--fading { opacity: 0; pointer-events: none; }
.loader__canvas {
  display: block;
  width: min(80vw, 80vh);
  aspect-ratio: 8 / 5;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.loader__copy {
  width: 100%;
  max-width: 560px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: clamp(.7rem, 2vw, .875rem);
  line-height: 1.65;
  color: rgba(255, 213, 64, 0.85);
}
.loader__copy p { margin: 0 0 .6em; }
.loader__copy p:last-child { margin: 0; }

/* ═══════════════════════════════
   BACKGROUND
═══════════════════════════════ */
.bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* ═══════════════════════════════
   THREE.JS CANVAS — hero 3D
═══════════════════════════════ */
#three-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,0.55));
}

/* ═══════════════════════════════
   UI OVERLAY
═══════════════════════════════ */
.ui {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* ═══════════════════════════════
   TICKER
═══════════════════════════════ */
.ticker {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: clamp(13px, 1.8vw, 20px);
  font-weight: 700;
  letter-spacing: .55em;
  color: var(--accent);
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.4), 0 0 40px rgba(255, 255, 255, 0.15);
  white-space: nowrap;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
.ticker-dollar { font-size: .8em; opacity: .65; letter-spacing: 0; }

/* ═══════════════════════════════
   PRICE RAIL
═══════════════════════════════ */
.price-rail {
  position: absolute;
  right: 30px;
  top: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 110px 0;
  pointer-events: none;
  user-select: none;
}
.pr {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text);
  letter-spacing: .05em;
  animation: pr-flicker 3s ease-in-out infinite;
  transition: color .3s;
}
.pr1 { opacity: .55; animation-delay: 0s; animation-duration: 3.2s; }
.pr2 { opacity: .35; animation-delay: -0.6s; animation-duration: 2.8s; }
.pr3 { opacity: .48; animation-delay: -1.2s; animation-duration: 3.6s; }
.pr4 { opacity: .28; animation-delay: -1.8s; animation-duration: 2.4s; }
.pr5 { opacity: .42; animation-delay: -2.4s; animation-duration: 3.4s; }
.pr6 { opacity: .22; animation-delay: -3.0s; animation-duration: 2.6s; }
@keyframes pr-flicker {
  0%, 100% { opacity: var(--op, 0.4); transform: translateX(0); }
  20%      { opacity: 0.8; color: #ffd540; transform: translateX(-2px); }
  50%      { opacity: 0.55; transform: translateX(0); }
  80%      { opacity: 0.35; color: var(--text); transform: translateX(1px); }
}

/* ═══════════════════════════════
   BOTTOM CENTER
═══════════════════════════════ */
.bottom-center {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* ═══════════════════════════════
   SOCIALS — match spacex4200 exactly
═══════════════════════════════ */
.socials {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}
.social-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
}
.social-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  text-decoration: none;
  color: inherit;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  transition: background .2s, border-color .2s, transform .2s;
  pointer-events: auto;
}
.social-btn img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  opacity: .78;
  transition: opacity .2s;
}
.social-btn img[data-icon="uni"] { width: 25px; height: 25px; }
.social-btn img[data-icon="ds"],
.social-btn img[data-icon="dt"] { width: 27px; height: 27px; }
.social-btn:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.5); }
.social-btn:hover img { opacity: 1; }
.social-label {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  transition: color .2s;
}
.social-cell:hover .social-label { color: rgba(255, 255, 255, 0.85); }

/* ═══════════════════════════════
   CA BAR — button style like reference
═══════════════════════════════ */
.ca-bar {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .5rem .85rem .5rem .95rem;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  max-width: min(440px, 92vw);
  cursor: pointer;
  font: inherit;
  color: rgba(255, 255, 255, 0.88);
  transition: border-color .2s, background .2s, color .2s;
  pointer-events: auto;
}
.ca-bar:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.5); color: #f1faff; }
.ca-label {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
}
.ca-address {
  font-family: var(--font-mono);
  font-size: clamp(10px, 2.2vw, 12.5px);
  flex: 1;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  min-width: 0;
  letter-spacing: .02em;
  user-select: all;
}
.ca-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
  transition: color .2s, background .2s;
}
.ca-bar:hover .ca-icon { color: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.12); }

/* ═══════════════════════════════
   ETH BADGE
═══════════════════════════════ */
.eth-badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .95rem;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
  text-decoration: none;
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  transition: border-color .2s, color .2s, background .2s;
  pointer-events: auto;
}
.eth-badge:hover { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.22); color: #f1faff; }
.eth-badge__icon { width: 14px; height: 14px; color: rgba(255, 255, 255, 0.7); }
.eth-sep { margin: 0 .55em; color: rgba(255,255,255,.22); }

/* ═══════════════════════════════
   BOTTOM LEFT UTILITY BUTTONS
═══════════════════════════════ */
.bottom-left {
  position: absolute;
  bottom: calc(24px + env(safe-area-inset-bottom));
  left: calc(24px + env(safe-area-inset-left));
  display: flex;
  gap: 8px;
  z-index: 2;
}
.util-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  cursor: pointer;
  color: rgba(255, 255, 255, 0.78);
  transition: background .2s, border-color .2s, color .2s, transform .2s;
  pointer-events: auto;
  overflow: visible;
}
.util-btn:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.5); color: #f1faff; transform: translateY(-1px); }
.util-btn--active { background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.5) !important; color: #f1faff !important; }

/* Disclaimer flag — pulsing green dot */
.disc-flag {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(5,6,10,.95), 0 0 8px rgba(255, 255, 255, 0.4);
  animation: flag-pulse 1.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes flag-pulse {
  0%, 100% { opacity: .78; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* ═══════════════════════════════
   ROCKETS
═══════════════════════════════ */
.bottom-right { position: absolute; bottom: 16px; right: 24px; pointer-events: none; user-select: none; }
.rockets { display: flex; align-items: flex-end; gap: 3px; }
.r-sm { width: 20px; height: 44px; }
.r-xs { width: 16px; height: 34px; }
.r-lg { width: 28px; height: 60px; }
.r-sm svg, .r-xs svg, .r-lg svg { width: 100%; height: 100%; }

/* ═══════════════════════════════
   TOAST
═══════════════════════════════ */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(2rem + env(safe-area-inset-bottom));
  transform: translate(-50%, 8px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(12,18,24,.92);
  border: 1px solid rgba(158,200,220,.18);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-mono);
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s, transform .22s;
  z-index: 100;
}
.toast--show { opacity: 1; transform: translate(-50%, 0); }
.toast svg { color: rgba(255, 255, 255, 0.95); flex-shrink: 0; }

/* ═══════════════════════════════
   SHARED PANEL COMPONENTS
═══════════════════════════════ */
.panel-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .6rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.panel-sep { color: rgba(255, 255, 255, 0.3); font-family: var(--font-mono); font-size: .625rem; letter-spacing: .22em; }
.panel-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 14px;
  padding-right: 28px;
}
.panel-live {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  animation: live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
.panel-x {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
  z-index: 2;
}
.panel-x:hover { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.22); color: #f1faff; }

/* ═══════════════════════════════
   DISCLAIMER MODAL
═══════════════════════════════ */
.d-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: overlay-in .22s ease-out;
}
.d-overlay[hidden] { display: none; }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
.d-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  padding: 1.5rem 1.5rem 1.25rem;
  border-radius: 18px;
  background: rgba(10,22,32,.92);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  animation: card-in .28s ease-out;
}
@keyframes card-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.d-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
  padding-right: 30px;
}
.d-title {
  margin: 0 0 .75rem;
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #e8f6ff;
}
.d-body {
  font-family: var(--font-mono);
  font-size: .875rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
}

/* ═══════════════════════════════
   TOKEN STATS PANEL
═══════════════════════════════ */
.stats-panel {
  position: fixed;
  top: calc(24px + env(safe-area-inset-top));
  left: calc(24px + env(safe-area-inset-left));
  z-index: 5;
  width: 320px;
  max-width: calc(100vw - 32px);
  padding: 14px 16px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  animation: panel-open .32s ease-out;
  isolation: isolate;
}
.stats-panel[hidden] { display: none; }
.stats-x { top: 10px; right: 10px; }
@keyframes panel-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.stats-price {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  color: #e8f6ff;
  letter-spacing: -.01em;
}
.stats-change {
  font-size: .875rem;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 400;
}
.stats-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .85rem;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 10px;
}
.stats-lbl { color: rgba(255, 255, 255, 0.7); margin-right: .3em; }
.stats-note {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 10px;
  text-transform: uppercase;
}

/* ═══════════════════════════════
   NEWS PANEL
═══════════════════════════════ */
.news-panel {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom));
  left: calc(24px + env(safe-area-inset-left));
  z-index: 5;
  width: 320px;
  max-width: calc(100vw - 32px);
  padding: 14px 16px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  animation: news-open .32s ease-out;
  isolation: isolate;
}
.news-panel[hidden] { display: none; }
@keyframes news-open { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.news-badge { background: rgba(255, 255, 255, 0.08); }
.news-kicker {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .55rem;
}
.news-tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.news-title {
  margin: 0 0 .6rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: #e8f6ff;
}
.news-summary {
  margin: 0 0 .7rem;
  font-family: var(--font-mono);
  font-size: .8125rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}
.news-footer { border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 10px; }
.news-meta {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.news-body {
  animation: news-fade .35s ease-out;
}
@keyframes news-fade {
  from { opacity: 0; transform: translateY(6px); filter: blur(3px); }
  to   { opacity: 1; transform: none;            filter: blur(0); }
}
.news-nav {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 12px;
}
.news-arrow {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.news-arrow:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
  transform: translateY(-1px);
}

/* ═══════════════════════════════
   RESPONSIVE
═══════════════════════════════ */
@media (max-width: 640px) {
  .ticker { font-size: 12px; letter-spacing: .4em; }
  .price-rail { display: none; }
  .ca-bar { max-width: 94vw; }
  .ca-address { font-size: 9.5px; }
  .social-btn { width: 40px; height: 40px; }
  .social-btn img { width: 16px; height: 16px; }
  .social-btn img[data-icon="uni"] { width: 20px; height: 20px; }
  .social-btn img[data-icon="ds"],
  .social-btn img[data-icon="dt"] { width: 22px; height: 22px; }
  .socials { gap: .85rem; }
  .util-btn { width: 40px; height: 40px; }
  .bottom-left {
    bottom: calc(220px + env(safe-area-inset-bottom));
    left: calc(12px + env(safe-area-inset-left));
    gap: 6px;
    flex-direction: column;
  }
  .bottom-center { bottom: 18px; }
  .bottom-right { display: none; }
  .loader__canvas { width: 90vw; }
  .stats-panel, .news-panel { width: calc(100vw - 24px); }
}