body{background:#0f1115;color:#fff;font-family:Arial,sans-serif;margin:0}
.site-header{background:#111;padding:10px 0;border-bottom:1px solid #333}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{width:42px;height:auto}
.nav a{color:#7CFF6B;text-decoration:none;margin-right:10px;font-weight:bold}
.hero{padding:40px 0;text-align:center}
.btn{padding:10px 20px;border-radius:20px;font-weight:bold;text-decoration:none}
.btn.solid{background:#7CFF6B;color:#000}
.btn.outline{border:2px solid #7CFF6B;color:#7CFF6B}
.section{padding:40px 0}
.section.alt{background:#121a14}
.grid.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.card{border:1px solid #333;border-radius:12px;overflow:hidden;background:#14171d}
.card img{width:100%;display:block}
.card figcaption{text-align:right;padding:5px}
.mini-btn{background:#7CFF6B;color:#000;padding:5px 10px;border-radius:6px;text-decoration:none;font-weight:bold}
/* === v11 mobile spacing + overlap fix === */
.cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.cta-row .btn{flex:1 1 240px;text-align:center}

/* stack buttons full-width on small screens */
@media (max-width:560px){
  .cta-row .btn{flex:1 1 100%;display:block}
  .hero{padding-bottom:24px}
}

/* when clicking navbar links, keep section titles below the sticky header */
[id]{scroll-margin-top:80px}
/* === Back to Top Button === */
#backToTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #7CFF6B;
  color: #000;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  line-height: 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(124,255,107,0.5);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

/* Show the button when scrolling down */
body.scrolled #backToTop {
  opacity: 1;
}
/* Smooth scroll + Back to Top glow */
html { scroll-behavior: smooth; }

@keyframes pulseGlow {
  0% { box-shadow: 0 0 10px rgba(124,255,107,0.4); }
  50% { box-shadow: 0 0 20px rgba(124,255,107,0.8); }
  100% { box-shadow: 0 0 10px rgba(124,255,107,0.4); }
}

body.scrolled #backToTop {
  opacity: 1;
  animation: pulseGlow 2s infinite ease-in-out;
}
.small-btn {
  font-size: 0.85rem;
  padding: 6px 14px;
  margin-top: 10px;
  display: block;
  background: #111;
  border: 1px solid #7CFF6B;
  color: #7CFF6B;
  border-radius: 6px;
  text-align: center;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.small-btn:hover {
  background: #7CFF6B;
  color: #000;
}
.hero-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.hero-title .needle-icon {
  height: 4.5em; /* matches text size */
  width: auto;
}
.hero-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.hero-title .needle-icon {
  height: 4.5em; /* match heading size */
  width: auto;
}

.left-needle {
  transform: rotate(-15deg) scaleX(-1); /* flips and tilts inward */
}

.right-needle {
  transform: rotate(15deg); /* tilts inward */
}
.small-btn.flash {
  background: #7CFF6B;
  color: #000;
  transition: background 0.3s ease;
}
/* Smooth flash + copied message fade */
.small-btn{
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}

.small-btn.flash{
  background: #7CFF6B;      /* invert colors briefly */
  color: #000;
  box-shadow: 0 0 16px rgba(124,255,107,.6);
}

/* "Copied!" message starts hidden and fades in/out */
#copyMsg{
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .35s ease, transform .35s ease;
  text-align:center;
  font-size:.8rem;
  color:#7CFF6B;
  margin-top:6px;
  height:1em;               /* reserve space so layout doesn't jump */
}

#copyMsg.show{
  opacity: 1;
  transform: translateY(0);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .small-btn,
  #copyMsg{ transition: none; }
}
.lore-copy {
  border: 1px solid #1f2622;
  border-radius: 16px;
  background: #14171d;
  box-shadow: 0 0 15px rgba(124,255,107,0.1);
  padding: 20px;
  line-height: 1.6;
}

.lore-copy p, .lore-copy li {
  color: #f2f7f4;
}

.lore-copy ul {
  margin: 16px 0;
  padding-left: 20px;
}
.coming-soon{
  background:#101312;
  border:1px solid #1f2622;
  color:#7CFF6B;
  text-align:center;
  padding:10px 12px;
  margin:12px auto 0;
  width:min(900px,92%);
  border-radius:10px;
  box-shadow:0 0 12px rgba(124,255,107,.15);
}