/* robenhud $HUD — bobosite style, green Robin Hood theme */
:root {
  --bg: #0b1a0d;
  --bg2: #12280f;
  --accent: #3fae4f;
  --accent-dark: #2c7a38;
  --gold: #e8c547;
  --logo: #d0ea02;
  --logo-light: #e6ff3a;
  --ink: #000;
  --fg: #fff;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Pangolin', cursive, sans-serif;
  background-color: var(--bg);
  background-image: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 50%, var(--bg) 100%);
  color: var(--fg);
  min-height: 100vh;
  overflow-x: hidden;
}

.background-noise {
  position: fixed;
  inset: 0;
  background-image: url('../images/background-noise.gif');
  opacity: 0.05;
  pointer-events: none;
  z-index: 9999;
}

.page {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 20px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

/* Hero */
.hero { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* Floating mini meme cards */
.float-meme {
  position: absolute;
  top: 0;
  width: 58px;
  height: 58px;
  object-fit: cover;
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 0 3px 0 var(--ink);
  z-index: 5;
  pointer-events: none;
}
.fm1 { left: -12%; top: 10px;  animation: floaty 5s ease-in-out infinite; transform: rotate(-10deg); }
.fm2 { right: -12%; top: 0;     animation: floaty 6s ease-in-out infinite 0.4s; transform: rotate(9deg); }
.fm3 { left: -8%;  top: 175px; animation: floaty 5.5s ease-in-out infinite 0.8s; transform: rotate(7deg); }
.fm4 { right: -8%; top: 185px; animation: floaty 6.5s ease-in-out infinite 0.2s; transform: rotate(-8deg); }
@keyframes floaty {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -16px; }
}

.logo {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--ink);
  box-shadow: 0 6px 0 var(--ink);
  animation: bob 3s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-12px) rotate(1deg); }
}

.title {
  font-size: clamp(2.6rem, 9vw, 4.5rem);
  color: var(--accent);
  text-shadow: 0 3px 0 var(--ink), 0 0 22px rgba(63,174,79,0.5);
  letter-spacing: 1px;
}

.ticker {
  font-size: clamp(1.4rem, 5vw, 2rem);
  color: var(--gold);
  text-shadow: 0 2px 0 var(--ink);
}

.tagline {
  font-size: 1.05rem;
  color: #cfe8d2;
  margin-top: 4px;
}

.powered {
  position: relative;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 16px;
  background: var(--bg2);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink);
  color: var(--logo);
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.powered:hover {
  transform: translateY(-3px);
  background: var(--logo);
  color: var(--ink);
  box-shadow: 0 6px 0 var(--ink), 0 0 20px rgba(208,234,2,0.45);
}
.rh-logo { width: 18px; height: 18px; }

/* Cover */
.cover-wrap { width: 100%; display: flex; justify-content: center; }
.cover {
  width: 100%;
  max-width: 620px;
  border-radius: 16px;
  border: 4px solid var(--ink);
  box-shadow: 0 8px 0 var(--ink);
}

/* Meme carousel */
.marquee {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  overflow: hidden;
  padding: 8px 0;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  background: var(--bg2);
}
.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  animation: scroll-x 60s linear infinite;
}
.marquee-img {
  flex: 0 0 auto;
  width: 300px;
  height: 220px;
  margin-right: 18px;
  object-fit: cover;
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: 0 4px 0 var(--ink);
}
@keyframes scroll-x {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* How to Buy */
.howto { width: 100%; max-width: 620px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.steps { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.step {
  position: relative;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--logo);
  border: 3px solid var(--ink);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 4px 0 var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.step:hover {
  transform: translateY(-4px);
  background: var(--logo-light);
  box-shadow: 0 8px 0 var(--ink), 0 0 22px rgba(208,234,2,0.4);
}
.step-num {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--logo);
  border: 3px solid var(--ink);
  border-radius: 50%;
  font-size: 1.4rem;
  font-weight: bold;
}
.step-body { text-align: left; }
.step-body h3 { color: var(--ink); font-size: 1.25rem; margin-bottom: 4px; }
.step-body p { color: #1c3208; font-size: 1rem; line-height: 1.45; }
.step-body a { color: #0b1a0d; font-weight: bold; text-decoration: underline; }
.step-body a:hover { color: #000; }

/* Buy / Chart links */
.links {
  width: 100%;
  max-width: 620px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.link-card {
  position: relative;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 26px 18px;
  background: var(--logo);
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: 0 5px 0 var(--ink);
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.link-card:hover {
  transform: translateY(-5px);
  background: var(--logo-light);
  box-shadow: 0 10px 0 var(--ink), 0 0 26px rgba(208,234,2,0.45);
}
.link-card:active { transform: translateY(2px); box-shadow: 0 3px 0 var(--ink); }
.link-icon {
  width: 84px;
  height: 84px;
  object-fit: contain;
  transition: transform 0.12s ease;
}
.link-card:hover .link-icon { transform: scale(1.08); }
.link-title {
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
}

/* Footer socials */
.foot-socials { display: flex; gap: 16px; justify-content: center; margin-bottom: 4px; }
.foot-social {
  position: relative;
  z-index: 10000;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--logo);
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 4px 0 var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.foot-social:hover {
  transform: translateY(-4px);
  background: var(--logo-light);
  box-shadow: 0 8px 0 var(--ink), 0 0 20px rgba(208,234,2,0.45);
}
.foot-social img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

/* Contract */
.contract { width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }

.heading {
  font-size: 1.8rem;
  color: var(--accent);
  text-shadow: 0 2px 0 var(--ink);
}

.ca-box {
  position: relative;
  z-index: 10000;
  width: 100%;
  max-width: 560px;
  background: var(--logo);
  border: 3px solid var(--ink);
  border-radius: 12px;
  padding: 18px 20px;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.ca-box:hover {
  transform: translateY(-3px);
  background: var(--logo-light);
  box-shadow: 0 7px 0 var(--ink), 0 0 24px rgba(208,234,2,0.45);
}
.ca-box:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }

.ca {
  display: block;
  color: var(--ink);
  font-weight: bold;
  font-size: clamp(0.85rem, 3.4vw, 1.25rem);
  word-break: break-all;
  transition: opacity 0.15s;
}

.ca-copied {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--logo);
  font-size: 1.4rem;
  border-radius: 9px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.ca-box.copied .ca-copied { opacity: 1; }
.ca-box.copied .ca { opacity: 0; }

.ca-hint { color: #8fbf96; font-size: 0.95rem; }

/* Stats */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 560px;
}

.badge {
  position: relative;
  z-index: 10000;
  background: var(--logo);
  border: 3px solid var(--ink);
  border-radius: 12px;
  padding: 18px;
  text-align: center;
  box-shadow: 0 4px 0 var(--ink);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.badge:hover {
  transform: translateY(-4px);
  background: var(--logo-light);
  box-shadow: 0 8px 0 var(--ink), 0 0 22px rgba(208,234,2,0.4);
}
.badge-k { color: #2c4a10; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; }
.badge-v { color: var(--ink); font-size: 1.5rem; font-weight: bold; }

/* Footer */
.foot { text-align: center; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.foot-logo { font-size: 1.6rem; color: var(--gold); text-shadow: 0 2px 0 var(--ink); }
.copyright { color: #6f8f74; font-size: 0.85rem; }

/* ---------- Responsive ---------- */

/* Large / desktop: let content breathe a bit wider */
@media (min-width: 1100px) {
  .page { max-width: 860px; }
  .cover { max-width: 720px; }
  .marquee-img { width: 340px; height: 260px; }
}

/* Tablet */
@media (max-width: 768px) {
  .page { padding: 40px 18px 64px; gap: 48px; }
  .marquee-img { width: 250px; height: 190px; }
  .link-icon { width: 72px; height: 72px; }
}

/* Phone */
@media (max-width: 560px) {
  .page { gap: 40px; }
  .links { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .marquee-img { width: 200px; height: 150px; }
  .heading { font-size: 1.5rem; }
  .step { padding: 14px 16px; gap: 12px; }
  .step-num { width: 38px; height: 38px; font-size: 1.2rem; }
  .step-body h3 { font-size: 1.1rem; }
  .foot-social { width: 52px; height: 52px; }
  .foot-social img { width: 28px; height: 28px; }
  .float-meme { width: 44px; height: 44px; }
  .fm1 { left: 2%; } .fm2 { right: 2%; }
  .fm3 { left: 4%; top: 130px; } .fm4 { right: 4%; top: 138px; }
}

/* Small phone */
@media (max-width: 380px) {
  .logo { width: 140px; height: 140px; }
  .page { padding: 32px 14px 56px; }
  .ca { font-size: 0.8rem; }
}