/* =============================================
   $TRP — The Retirement Pill
   Meme-coin single-page styles
   ============================================= */

/* ---------- Reset & base ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  background: #0a0f0a;
  color: #e6ffe6;
  overflow-x: hidden;
  line-height: 1.6;
}
a { color: #66ff99; text-decoration: none; transition: color .2s; }
a:hover { color: #99ffbb; }
img { max-width: 100%; display: block; }
::selection { background: #33cc66; color: #000; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0a0f0a; }
::-webkit-scrollbar-thumb { background: #33cc66; border-radius: 4px; }

/* ---------- Utility ---------- */
.section-title {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(1rem, 3vw, 1.6rem);
  text-align: center;
  color: #66ff99;
  margin-bottom: 2.5rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 0 20px rgba(51, 204, 102, .5);
}

/* ======================
   TOPBAR / NAV
   ====================== */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 2rem;
  background: rgba(10, 15, 10, .85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(51, 204, 102, .15);
}
.logo {
  font-family: 'Press Start 2P', monospace;
  font-size: .85rem;
  color: #66ff99;
  text-shadow: 0 0 12px rgba(51, 204, 102, .6);
}
.nav-links { display: flex; gap: 1.25rem; }
.nav-links a {
  font-size: .85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: #66ff99;
  transition: width .3s;
}
.nav-links a:hover::after { width: 100%; }

/* ======================
   HERO
   ====================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 1.5rem 4rem;
  overflow: clip;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(51, 204, 102, .12) 0%, transparent 60%),
    #0a0f0a;
}
.hero-glow {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(51,204,102,.18), transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%, -55%);
  pointer-events: none;
  animation: pulseGlow 4s ease-in-out infinite;
}
@keyframes pulseGlow {
  0%, 100% { opacity: .6; transform: translate(-50%, -55%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -55%) scale(1.12); }
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

/* --- mascot image / 3D flip --- */
.hero-image-wrap {
  position: relative;
  width: 320px;
  height: 320px;
  margin-bottom: .75rem;
  animation: float 3s ease-in-out infinite;
}
.hero-flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform .7s cubic-bezier(.4,.2,.2,1);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}
.hero-image-wrap:hover .hero-flipper {
  transform: rotateY(180deg);
}
.hero-face {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 50%;
  border: 3px solid #33cc66;
  box-shadow: 0 0 40px rgba(51, 204, 102, .35);
}
.hero-front {
  z-index: 2;
  overflow: hidden;
}
.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-back {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  background: radial-gradient(circle, #122a1c 0%, #0a0f0a 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-pill-back {
  width: 60%;
  height: 60%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 30px rgba(51,204,102,.6));
}
.hero-ring {
  position: absolute;
  inset: -12px;
  border: 2px dashed rgba(102, 255, 153, .3);
  border-radius: 50%;
  animation: spin 20s linear infinite;
  pointer-events: none;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Heading --- */
.hero h1 {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(1.1rem, 4vw, 2.4rem);
  color: #66ff99;
  text-shadow:
    0 0 10px rgba(51,204,102,.6),
    0 0 40px rgba(51,204,102,.3);
  line-height: 1.4;
}

/* glitch flicker */
.glitch {
  position: relative;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: #66ff99;
}
.glitch::before {
  text-shadow: -2px 0 #ff3366;
  animation: glitch1 3s infinite linear alternate-reverse;
  clip-path: inset(0 0 60% 0);
}
.glitch::after {
  text-shadow: 2px 0 #33ccff;
  animation: glitch2 2.5s infinite linear alternate-reverse;
  clip-path: inset(60% 0 0 0);
}
@keyframes glitch1 {
  0%, 90%, 100% { transform: translate(0); }
  92% { transform: translate(-3px, 1px); }
  94% { transform: translate(3px, -1px); }
  96% { transform: translate(-2px, 0); }
}
@keyframes glitch2 {
  0%, 88%, 100% { transform: translate(0); }
  90% { transform: translate(3px, 1px); }
  93% { transform: translate(-3px, -1px); }
  95% { transform: translate(2px, 0); }
}

.tagline {
  font-size: 1.15rem;
  color: #b3ffcc;
  max-width: 500px;
}

/* --- CTA --- */
.cta-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.6rem;
  border-radius: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  transition: transform .15s, box-shadow .25s;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: linear-gradient(135deg, #33cc66, #22aa55);
  color: #000;
  box-shadow: 0 0 20px rgba(51,204,102,.4);
}
.btn-primary:hover { box-shadow: 0 0 30px rgba(51,204,102,.6); color: #000; }
.btn-outline {
  background: transparent;
  color: #66ff99;
  border: 2px solid #33cc66;
}
.btn-outline:hover { background: rgba(51,204,102,.1); }
.ca-display {
  font-size: .72rem;
  color: #559966;
  word-break: break-all;
  max-width: 480px;
  font-family: 'Space Grotesk', monospace;
}

/* ======================
   FLOATING STAT PILLS
   ====================== */
.float-stat {
  position: absolute;
  z-index: 3;
  background: rgba(10, 15, 10, .75);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(51, 204, 102, .2);
  border-radius: 14px;
  padding: .9rem 1.2rem;
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 0 20px rgba(51, 204, 102, .1);
  transition: border-color .3s;
}
.float-stat:hover {
  border-color: rgba(51, 204, 102, .5);
}
.stat-label {
  display: block;
  font-size: .55rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #66aa77;
  margin-bottom: .35rem;
  font-family: 'Press Start 2P', monospace;
}
.stat-value {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: #66ff99;
  text-shadow: 0 0 8px rgba(51,204,102,.4);
  min-height: 1.3em;
}

/* --- Positions: scattered around hero edges --- */
.fs-1 { top: 18%;  left: 6%;   animation: drift1 6s ease-in-out infinite; }
.fs-2 { top: 12%;  right: 5%;  animation: drift2 7s ease-in-out infinite; }
.fs-3 { top: 45%;  left: 3%;   animation: drift3 8s ease-in-out infinite; }
.fs-4 { top: 50%;  right: 4%;  animation: drift4 6.5s ease-in-out infinite; }
.fs-5 { bottom: 16%; left: 8%;  animation: drift5 7.5s ease-in-out infinite; }
.fs-6 { bottom: 12%; right: 7%; animation: drift6 6.8s ease-in-out infinite; }

@keyframes drift1 {
  0%, 100% { transform: translate(0, 0); }
  25%  { transform: translate(8px, -12px); }
  50%  { transform: translate(-4px, -20px); }
  75%  { transform: translate(6px, -8px); }
}
@keyframes drift2 {
  0%, 100% { transform: translate(0, 0); }
  25%  { transform: translate(-10px, 8px); }
  50%  { transform: translate(6px, 18px); }
  75%  { transform: translate(-8px, 6px); }
}
@keyframes drift3 {
  0%, 100% { transform: translate(0, 0); }
  30%  { transform: translate(12px, -6px); }
  60%  { transform: translate(-6px, 10px); }
}
@keyframes drift4 {
  0%, 100% { transform: translate(0, 0); }
  35%  { transform: translate(-14px, -10px); }
  65%  { transform: translate(8px, 14px); }
}
@keyframes drift5 {
  0%, 100% { transform: translate(0, 0); }
  20%  { transform: translate(10px, 6px); }
  50%  { transform: translate(-8px, -14px); }
  80%  { transform: translate(4px, 8px); }
}
@keyframes drift6 {
  0%, 100% { transform: translate(0, 0); }
  30%  { transform: translate(-6px, 12px); }
  70%  { transform: translate(10px, -8px); }
}

.stats-updated {
  position: absolute;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  text-align: center;
  font-size: .65rem;
  color: #335544;
  pointer-events: none;
}

/* ======================
   ABOUT
   ====================== */
.about {
  padding: 5rem 1.5rem;
  background: #0a0f0a;
}
.about-inner { max-width: 960px; margin: 0 auto; }
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}
.about-card {
  background: rgba(51, 204, 102, .05);
  border: 1px solid rgba(51, 204, 102, .12);
  border-radius: 14px;
  padding: 2rem 1.5rem;
  transition: transform .2s, border-color .3s;
}
.about-card:hover {
  transform: translateY(-4px);
  border-color: rgba(51, 204, 102, .35);
}
.about-icon { font-size: 2rem; display: block; margin-bottom: .75rem; }
.about-card h3 {
  font-family: 'Press Start 2P', monospace;
  font-size: .72rem;
  color: #66ff99;
  margin-bottom: .75rem;
  text-transform: uppercase;
}
.about-card p { font-size: .92rem; color: #b3d9c2; line-height: 1.65; }

/* ======================
   HOW TO BUY
   ====================== */
.howto {
  padding: 5rem 1.5rem;
  background: #080d08;
}
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}
.step {
  text-align: center;
  padding: 2rem 1.25rem;
  background: rgba(51,204,102,.05);
  border: 1px solid rgba(51,204,102,.1);
  border-radius: 14px;
  transition: transform .2s, border-color .3s;
}
.step:hover {
  transform: translateY(-4px);
  border-color: rgba(51,204,102,.35);
}
.step-num {
  width: 48px; height: 48px;
  margin: 0 auto .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: 'Press Start 2P', monospace;
  font-size: .9rem;
  background: linear-gradient(135deg, #33cc66, #22aa55);
  color: #000;
  box-shadow: 0 0 16px rgba(51,204,102,.3);
}
.step h3 {
  font-family: 'Press Start 2P', monospace;
  font-size: .65rem;
  color: #66ff99;
  margin-bottom: .6rem;
  text-transform: uppercase;
}
.step p { font-size: .88rem; color: #b3d9c2; }

/* ======================
   MARQUEE
   ====================== */
.marquee-wrap {
  overflow: hidden;
  background: #33cc66;
  padding: .6rem 0;
}
.marquee {
  display: flex;
  white-space: nowrap;
  animation: marquee 18s linear infinite;
}
.marquee span {
  font-family: 'Press Start 2P', monospace;
  font-size: .65rem;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding-right: 3rem;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ======================
   FOOTER
   ====================== */
.footer {
  padding: 3rem 1.5rem;
  text-align: center;
  background: #060906;
  border-top: 1px solid rgba(51,204,102,.1);
}
.footer-disclaimer {
  max-width: 600px;
  margin: 0 auto 1.25rem;
  font-size: .72rem;
  color: #446655;
  line-height: 1.6;
}
.footer-links {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
}
.footer-links a {
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.footer-copy {
  font-size: .65rem;
  color: #335544;
}

/* ======================
   PARTICLES / PILLS (decorative)
   ====================== */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(102,255,153,.25) 50%, transparent 100%),
    radial-gradient(1px 1px at 25% 80%, rgba(102,255,153,.2)  50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 55% 10%, rgba(102,255,153,.3) 50%, transparent 100%),
    radial-gradient(1px 1px at 70% 65%, rgba(102,255,153,.15) 50%, transparent 100%),
    radial-gradient(1px 1px at 85% 35%, rgba(102,255,153,.2) 50%, transparent 100%),
    radial-gradient(1px 1px at 40% 50%, rgba(102,255,153,.18) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 90% 90%, rgba(102,255,153,.25) 50%, transparent 100%);
}

/* ======================
   RESPONSIVE
   ====================== */
@media (max-width: 640px) {
  .topbar { padding: .6rem 1rem; }
  .nav-links a { font-size: .7rem; }
  .hero-image-wrap { width: 240px; height: 240px; perspective: 600px; }
  .hero { padding-top: 5rem; }
  .about, .howto { padding: 3.5rem 1rem; }
  .float-stat { position: static; pointer-events: auto; }
  .hero { padding-bottom: 2rem; }
  .hero-float-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
    width: 100%;
    max-width: 400px;
    margin: 1.5rem auto 0;
  }
  .stats-updated {
    position: static;
    transform: none;
    margin-top: .75rem;
  }
}

/* ======================
   PILL ICON (inline SVG replacement)
   ====================== */
.pill-icon {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
  flex-shrink: 0;
}
.pill-icon-sm {
  width: .85em;
  height: .85em;
}
.pill-icon-nav {
  width: 1.8rem;
  height: 1.8rem;
  vertical-align: -0.35em;
}
.pill-icon-lg {
  width: 2.4rem;
  height: 2.4rem;
}

/* ======================
   SPAWNED PILL (click hero image)
   ====================== */
.spawned-pill {
  position: fixed;
  width: 36px;
  height: 36px;
  pointer-events: none;
  z-index: 200;
  animation: pillFly 1.4s cubic-bezier(.25,.1,.25,1) forwards;
  filter: drop-shadow(0 0 6px rgba(51,204,102,.5));
}
@keyframes pillFly {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  30%  { opacity: 1; transform: translate(var(--dx, 40px), var(--dy, -60px)) rotate(180deg) scale(1.2); }
  100% { opacity: 0; transform: translate(var(--dx2, 80px), var(--dy2, -180px)) rotate(420deg) scale(.3); }
}

/* Make the hero image feel clickable */
.hero-image-wrap {
  cursor: pointer;
}
/* Glow pulse on the back pill */
.hero-image-wrap:hover .hero-back {
  box-shadow: 0 0 60px rgba(51,204,102,.5);
}

/* ======================
   CREATOR REWARDS CARD
   ====================== */
.rewards-card {
  position: relative;
  z-index: 10;
  cursor: pointer;
  width: 100%;
  max-width: 440px;
  background: rgba(10, 15, 10, .8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(51, 204, 102, .2);
  border-radius: 16px;
  padding: 1rem 1.5rem;
  transition: border-color .3s, box-shadow .3s, transform .2s;
  box-shadow: 0 0 30px rgba(51, 204, 102, .08);
}
.rewards-card:hover {
  border-color: rgba(51, 204, 102, .45);
  box-shadow: 0 0 50px rgba(51, 204, 102, .2);
  transform: translateY(-2px);
}

/* Header row */
.rewards-card-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
}
.rewards-card-title {
  font-family: 'Press Start 2P', monospace;
  font-size: .55rem;
  color: #66aa77;
  text-transform: uppercase;
  letter-spacing: 1px;
  flex: 1;
}
.rewards-card-badge {
  font-family: 'Press Start 2P', monospace;
  font-size: .7rem;
  color: #66ff99;
  background: rgba(51, 204, 102, .12);
  border: 1px solid rgba(51, 204, 102, .25);
  border-radius: 8px;
  padding: .3rem .6rem;
  text-shadow: 0 0 8px rgba(51,204,102,.4);
  white-space: nowrap;
}

/* Subtitle */
.rewards-card-subtitle {
  text-align: center;
  font-size: .72rem;
  color: #88aa99;
  margin-bottom: .65rem;
  letter-spacing: .3px;
}

/* Body: two stat columns */
.rewards-card-body {
  display: flex;
  align-items: stretch;
  gap: 1rem;
}
.rewards-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .15rem;
}
.rewards-stat-label {
  font-size: .5rem;
  font-family: 'Press Start 2P', monospace;
  color: #557766;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.rewards-stat-value {
  font-size: .7rem;
  font-weight: 600;
  color: #88aa99;
  line-height: 1.2;
}
.rewards-stat-usd {
  font-size: 1.1rem;
  font-weight: 700;
  color: #66ff99;
  text-shadow: 0 0 8px rgba(51,204,102,.4);
}
.rewards-stat-pct {
  font-size: .65rem;
  font-family: 'Press Start 2P', monospace;
  color: #66ff99;
  text-shadow: 0 0 8px rgba(51,204,102,.4);
  margin-top: .1rem;
}
.rewards-stat-divider {
  width: 1px;
  background: rgba(51, 204, 102, .15);
  align-self: stretch;
  margin: .25rem 0;
}

/* Footer hint */
.rewards-card-footer {
  text-align: center;
  font-size: .6rem;
  color: #446655;
  margin-top: .65rem;
  letter-spacing: .5px;
}

/* ======================
   REWARDS MODAL
   ====================== */
.rewards-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0, 0, 0, .7);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.rewards-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.rewards-modal {
  position: relative;
  background: #0d140d;
  border: 1px solid rgba(51,204,102,.25);
  border-radius: 16px;
  padding: 2rem 1.5rem 1.5rem;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 60px rgba(51,204,102,.15);
}
.rewards-close {
  position: absolute;
  top: .75rem;
  right: 1rem;
  background: none;
  border: none;
  color: #66ff99;
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  transition: color .2s;
}
.rewards-close:hover { color: #fff; }
.rewards-modal-title {
  font-family: 'Press Start 2P', monospace;
  font-size: .75rem;
  color: #66ff99;
  text-transform: uppercase;
  margin-bottom: .4rem;
  text-align: center;
}
.rewards-modal-subtitle {
  text-align: center;
  font-size: .78rem;
  color: #88aa99;
  margin-bottom: 1rem;
  line-height: 1.5;
}
.rewards-summary {
  text-align: center;
  font-size: .85rem;
  color: #b3d9c2;
  margin-bottom: 1rem;
  line-height: 1.6;
}
.rewards-summary strong {
  color: #66ff99;
}
.rewards-list-wrap {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.rewards-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .78rem;
}
.rewards-table th {
  font-family: 'Press Start 2P', monospace;
  font-size: .5rem;
  color: #66aa77;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: left;
  padding: .5rem .4rem;
  border-bottom: 1px solid rgba(51,204,102,.15);
  position: sticky;
  top: 0;
  background: #0d140d;
}
.rewards-table td {
  padding: .5rem .4rem;
  border-bottom: 1px solid rgba(51,204,102,.07);
  color: #b3d9c2;
  font-family: 'Space Grotesk', monospace;
}
.rewards-table td:first-child {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rewards-table td a {
  font-size: .7rem;
}
.rewards-table tr:hover td {
  background: rgba(51,204,102,.05);
}

@media (max-width: 640px) {
  .rewards-card {
    padding: .85rem .75rem;
  }
  .rewards-card-body { gap: .5rem; }
  .rewards-stat-usd { font-size: .85rem; }
  .rewards-stat-value { font-size: .6rem; }
  .rewards-modal { padding: 1.5rem 1rem 1rem; }
}

/* ---------- Copied toast ---------- */
.toast {
  position: fixed;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #33cc66;
  color: #000;
  font-weight: 700;
  font-size: .85rem;
  padding: .6rem 1.5rem;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s;
  z-index: 999;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}