:root {
  --bg: #0a0a0d;
  --bg-alt: #100e14;
  --panel: #16141c;
  --panel-border: #2a2732;
  --text: #f4f0ea;
  --muted: #a89fb0;
  --amber: #ffb703;
  --amber-2: #ff8c1a;
  --red: #ff3b3b;
  --blue: #3ddcff;
  --green: #35e08a;
  --radius: 18px;
  --shadow-hard: 6px 6px 0 #000;
}

* { box-sizing: border-box; }

/* Anything with hidden set really does go. The browser has its own rule
   for this, but a browser rule is weaker than any rule we write, so a
   class of ours that sets display keeps the element on the screen even
   though its hidden flag is on. That is how the shop filter came to tick
   a category off and change nothing you could see. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: 'Anton', 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.05;
  margin: 0;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ---- Icons ----
   Inline SVG rather than emoji throughout. Emoji are drawn by the platform,
   so the same character is a different picture on Windows, Android and iOS
   (and an empty box wherever the font lacks it), and none of them take the
   page's colours. These size with the surrounding font and inherit its
   colour like any other glyph. */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex: none;
  vertical-align: -0.13em;
}
/* Set into heavy type at small sizes, a 1em icon reads as a smudge, so in a
   button it runs a little larger than the text beside it. */
.btn .icon { width: 1.25em; height: 1.25em; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 15px;
  border: 3px solid #000;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: var(--shadow-hard);
  white-space: nowrap;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 #000; }
.btn:active { transform: translate(1px, 1px); box-shadow: 3px 3px 0 #000; }

.btn-primary { background: var(--amber); color: #1a1200; }
.btn-outline { background: var(--panel); color: var(--text); }
.btn-lg { padding: 16px 32px; font-size: 17px; }
.btn-small { padding: 10px 18px; font-size: 13px; }
.btn-tiny {
  padding: 8px 14px;
  font-size: 12px;
  border-radius: 999px;
  border: 2px solid #000;
  background: var(--blue);
  color: #001318;
  box-shadow: 3px 3px 0 #000;
}
.btn-tiny:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 #000; }

/* Nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 5vw;
  background: rgba(10, 10, 13, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--panel-border);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Anton', sans-serif;
  font-size: 20px;
  letter-spacing: 0.5px;
}
.brand-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--amber);
  object-fit: cover;
}
.nav-links {
  display: flex;
  gap: 26px;
  font-weight: 600;
  font-size: 14px;
}
.nav-links a { color: var(--muted); white-space: nowrap; }
.nav-links a:hover { color: var(--text); }
.nav-cta { display: none; }
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: var(--panel);
  border: 2px solid #000;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
}
.nav-toggle span {
  width: 20px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
}

/* Wallet, in the bar itself.
   It used to sit in the page under each game's title, which meant three
   different spots on three pages and none at all on the front page. As
   part of the navigation it is in one place on the whole site. */
.nav-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-wallet { position: relative; display: flex; }
/* .btn and the flex rules below beat the browser's own [hidden] rule,
   since author CSS wins over the UA stylesheet whatever the specificity. */
.nav-wallet [hidden] { display: none !important; }

.wallet-toggle { display: inline-flex; align-items: center; gap: 7px; }
.wallet-glyph { flex-shrink: 0; opacity: 0.9; }
.wallet-chevron { color: var(--muted); transition: transform 0.15s ease; }
.wallet-toggle[aria-expanded="true"] .wallet-chevron { transform: rotate(180deg); }

.wallet-picker {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 168px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 6px;
  box-shadow: var(--shadow-hard);
}
.wallet-picker button {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 9px 12px;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
}
.wallet-picker button:hover { background: rgba(255,255,255,0.06); color: var(--amber); }
.wallet-icon { flex-shrink: 0; border-radius: 6px; }

.wallet-connected {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 6px 8px 6px 12px;
  font-size: 13px;
  white-space: nowrap;
}
.wallet-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6fb98f;
  box-shadow: 0 0 8px #6fb98f;
  flex-shrink: 0;
}
.wallet-address {
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.wallet-disconnect {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  padding: 4px 6px;
}
.wallet-disconnect:hover { color: var(--red); }

/* The bar has a fixed amount of room, and four things now want it. Measured
   at every width rather than guessed: the wallet keeps its icon and drops its
   word until there is room for both, and the links fold into the menu button
   until they fit beside everything else. Before this the bar simply ran off
   the right of the screen between about 780 and 950 pixels. */
@media (max-width: 1240px) {
  .wallet-label { display: none; }
  .wallet-chevron { display: none; }
  .nav-wallet .wallet-toggle { padding: 11px; }
  .wallet-disconnect { display: none; }
}
@media (max-width: 1200px) {
  .nav-links { gap: 20px; }
}

@media (min-width: 760px) {
  .nav-cta { display: inline-flex; }
}
@media (max-width: 1040px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--panel-border);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .nav-links.open { max-height: 320px; }
  .nav-links a {
    padding: 16px 6vw;
    border-top: 1px solid var(--panel-border);
  }
}

/* Hero */
.hero {
  position: relative;
  padding: 90px 6vw 70px;
  overflow: hidden;
  isolation: isolate;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.35;
  z-index: -1;
}
.blob-a { width: 420px; height: 420px; background: var(--amber); top: -140px; left: -100px; }
.blob-b { width: 380px; height: 380px; background: var(--red); bottom: -160px; right: -80px; }

.hero-prop {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5));
}
.hero-prop-can {
  width: 190px;
  top: 8%;
  left: 2%;
  transform: rotate(-12deg);
}
.hero-prop-syringe {
  width: 170px;
  bottom: 4%;
  right: 3%;
  transform: rotate(8deg);
}
.hero-prop-sign {
  width: 130px;
  top: 3%;
  right: 6%;
  transform: rotate(6deg);
  animation: sign-flicker 5s infinite steps(1);
}
@keyframes sign-flicker {
  0%, 89%, 92%, 100% { opacity: 1; }
  90%, 91% { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-prop-sign { animation: none; }
}
@media (max-width: 900px) {
  .hero-prop { display: none; }
}

.hero-inner { max-width: 900px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 24px;
}
/* Hero stat tags. Built in the same language as everything else on this
   page -- hard black keyline, offset shadow, and a few degrees of tilt so
   they read as slapped on rather than laid out. The number carries the
   headline weight; the words underneath are the caption to it. */
.stat-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px 9px 15px;
  border-radius: 999px;
  /* A black keyline is what the buttons use, but it vanishes against the
     dark hero -- so these take the amber one the featured game card uses,
     and keep the black offset shadow underneath for the stuck-on depth. */
  border: 2px solid rgba(255, 183, 3, 0.45);
  background: linear-gradient(165deg, #241f2c 0%, #15131b 60%);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--text);
  /* The tilt is applied per tag below; keep it in a variable so the hover
     state can straighten it without having to know which tag it is. */
  --tilt: 0deg;
  transform: rotate(var(--tilt));
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.badge-row .stat-tag:nth-child(1) { --tilt: -2.2deg; }
.badge-row .stat-tag:nth-child(2) { --tilt: 1.6deg; }
.badge-row .stat-tag:nth-child(3) { --tilt: -1deg; }

.stat-tag .icon { color: var(--amber); width: 1.55em; height: 1.55em; }
.stat-tag .icon-live { color: var(--red); }

.stat-tag-num {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 25px;
  line-height: 0.9;
  color: var(--amber);
  letter-spacing: 0.5px;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
}
.stat-tag-label {
  font-size: 10px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
}

/* Straightens up and lifts when you point at it -- the same nudge the
   buttons do. */
.stat-tag:hover {
  transform: rotate(0deg) translate(-2px, -2px);
  box-shadow: 5px 5px 0 #000;
}

/* The live tag is a link to the stream, so it gets the red treatment and an
   on-air ping rather than sitting there as decoration. */
.stat-tag-live {
  border-color: rgba(255, 59, 59, 0.5);
  background: linear-gradient(165deg, #2e1922 0%, #1a1117 60%);
}
.stat-tag-live .stat-tag-num { color: var(--red); }
.stat-tag-live .stat-tag-label { color: #f3cfd2; }
.stat-tag-live:hover { border-color: var(--red); }
.icon-live { color: var(--red); }
.icon-warn { color: var(--amber); }

.live-dot { position: relative; display: inline-flex; }
.live-dot .icon { width: 0.85em; height: 0.85em; }
.live-dot::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.6);
  animation: live-ping 1.9s ease-out infinite;
}
@keyframes live-ping {
  0% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.6); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(255, 59, 59, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot::after { animation: none; }
  .stat-tag { transition: none; }
}

.hero-art {
  width: min(680px, 100%);
  margin: 0 auto 8px;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.55));
}

.hero-title {
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  margin-bottom: 22px;
}
.hero-title .hl {
  background: linear-gradient(90deg, var(--amber), var(--red));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--muted);
  max-width: 640px;
  margin: 0 auto 34px;
  line-height: 1.6;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: center;
  margin-bottom: 38px;
  position: relative;
}

.scribble {
  font-family: 'Caveat', cursive;
  font-size: 22px;
  line-height: 1.15;
  color: var(--amber);
  transform: rotate(-8deg);
  text-align: center;
  order: -1;
}
@media (min-width: 700px) {
  .scribble {
    position: absolute;
    left: -150px;
    top: -6px;
    order: 0;
  }
}

.ca-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--panel);
  border: 2px dashed var(--panel-border);
  border-radius: 20px;
  padding: 18px 22px;
  max-width: 620px;
  margin: 0 auto 14px;
}
.ca-label {
  font-family: 'Anton', sans-serif;
  font-size: 12px;
  color: var(--amber);
  letter-spacing: 1px;
}
.ca-value {
  font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
  font-size: clamp(8px, 2.7vw, 13px);
  color: var(--muted);
  text-align: center;
  max-width: 100%;
}
.ca-address {
  display: block;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  padding-bottom: 2px;
}
.ca-warning {
  font-size: 12.5px;
  color: var(--muted);
  max-width: 560px;
  margin: 0 auto;
}
.ca-warning a { color: var(--blue); font-weight: 700; }

.quick-links {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 14px 0 0;
  font-size: 13px;
}
.quick-links a {
  color: var(--amber);
  font-weight: 700;
  border-bottom: 1px dashed var(--amber);
}
.quick-links a:hover { color: var(--text); border-color: var(--text); }

/* Sections */
.section {
  padding: 90px 6vw;
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
}
.section-alt { background: var(--bg-alt); max-width: none; }
.section-alt > * { max-width: 1180px; margin-left: auto; margin-right: auto; }

.section-head { text-align: center; margin-bottom: 50px; }
.section-title { font-size: clamp(2rem, 4.5vw, 2.8rem); }
.section-kicker {
  color: var(--amber);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 10px;
}

/* Lore */
.lore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
  margin-bottom: 50px;
}
.lore-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 26px;
  transition: transform 0.2s ease;
}
.lore-card:nth-child(odd) { transform: rotate(-0.6deg); }
.lore-card:nth-child(even) { transform: rotate(0.6deg); }
.lore-card:hover { transform: rotate(0deg) translateY(-3px); }
.lore-num {
  font-family: 'Anton', sans-serif;
  font-size: 32px;
  color: var(--amber);
  margin-bottom: 10px;
}
.lore-card h3 { font-size: 18px; margin-bottom: 10px; }
.lore-card p { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin: 0; }

.callout-wrap {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
}
.callout {
  background: #fff;
  color: #0a0a0d;
  border: 4px solid #000;
  border-radius: 22px;
  box-shadow: var(--shadow-hard);
  padding: 30px 36px;
  font-family: 'Anton', sans-serif;
  font-size: clamp(1.1rem, 2.6vw, 1.6rem);
  text-align: center;
  text-transform: none;
  line-height: 1.35;
}

/* Sticker collage accents */
.sticker {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.5));
  z-index: 1;
}
.sticker-legend {
  width: 120px;
  top: 10px;
  right: 4%;
  transform: rotate(9deg);
}
.sticker-discipline {
  width: 150px;
  bottom: -30px;
  right: -60px;
  transform: rotate(-6deg);
}
@media (max-width: 720px) {
  .sticker-discipline { display: none; }
}

/* Proof */
.proof-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 40px;
  align-items: center;
}
.proof-shot {
  border: 4px solid #000;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--shadow-hard);
  justify-self: center;
  position: relative;
  transform: rotate(-2.5deg);
}
.proof-shot img { width: 100%; }
.proof-shot::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  width: 90px;
  height: 30px;
  background: rgba(255, 183, 3, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.2);
  transform: translateX(-50%) rotate(-3deg);
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
  z-index: 2;
}
.proof-embed {
  border: none;
  box-shadow: none;
  overflow: visible;
  background: transparent;
  width: 100%;
  max-width: 340px;
  padding-top: 18px;
}
.proof-embed .twitter-tweet {
  margin: 0 auto !important;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.5));
}

.proof-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.stat {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 20px 10px;
  text-align: center;
}
.stat.pop { animation: stat-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes stat-pop {
  0% { transform: scale(0.85); }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .stat.pop { animation: none; }
}
.stat-num {
  display: block;
  font-family: 'Anton', sans-serif;
  font-size: 28px;
  color: var(--amber);
}
.stat-label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.proof-links {
  grid-column: 1 / -1;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 6px;
}

@media (max-width: 820px) {
  .proof-grid { grid-template-columns: 1fr; }
}

/* Content grid */
.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 22px;
}
.content-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: center;
}
.content-icon { font-size: 34px; margin-bottom: 14px; color: var(--amber); line-height: 0; }
.content-icon .icon { display: inline-block; vertical-align: top; }
.content-card h3 { font-size: 17px; margin-bottom: 10px; }
.content-card p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0; }

/* Play */
.game-featured {
  max-width: 620px;
  margin: 0 auto 34px;
  background: var(--panel);
  border: 2px solid var(--amber);
  border-radius: var(--radius);
  padding: 34px 30px;
  text-align: center;
  box-shadow: var(--shadow-hard);
}
.game-featured h3 { font-size: 24px; margin: 0 0 10px; }
.game-featured p { color: var(--muted); font-size: 14.5px; line-height: 1.6; max-width: 460px; margin: 0 auto 18px; }

.game-side-label {
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px;
}

.game-grid {
  display: grid;
  /* Wide enough that the three of them sit in one row: at 820 the gaps ate
     the third column and it dropped to a line of its own. */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
  max-width: 900px;
  margin: 0 auto;
}
.game-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.game-card h3 { font-size: 19px; margin: 0; }
.game-card p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0 0 6px; }

/* Tokenomics */
.token-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
  margin-bottom: 30px;
}
.token-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 28px 24px;
}
.token-icon { font-size: 30px; margin-bottom: 12px; color: var(--amber); line-height: 0; }
.token-icon .icon { display: block; }
.token-card h3 { font-size: 17px; margin-bottom: 10px; }
.token-card p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0; }

.disclaimer-inline {
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Steps */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
  margin-bottom: 40px;
}
.step {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 28px 22px;
  position: relative;
}
.step-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--amber);
  color: #1a1200;
  font-family: 'Anton', sans-serif;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.step h3 { font-size: 16px; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin: 0; }
.step p a { color: var(--blue); font-weight: 700; }
.step p code {
  background: var(--bg);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 12px;
  word-break: break-all;
  color: var(--amber);
}

.buy-cta { text-align: center; position: relative; }
.sticker-another {
  width: 130px;
  top: -70px;
  right: 12%;
  transform: rotate(-10deg);
}
@media (max-width: 720px) {
  .sticker-another { display: none; }
}

.sticker-shades {
  width: 190px;
  top: 10px;
  right: 4%;
  transform: rotate(-4deg);
}
@media (max-width: 900px) {
  .sticker-shades, .sticker-legend { display: none; }
}

/* Community */
.community-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 22px;
}
.community-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 32px 26px;
  text-align: center;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.community-card:hover { transform: translateY(-4px); border-color: var(--amber); }
.community-icon {
  font-size: 30px;
  color: var(--amber);
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.community-card h3 { font-size: 17px; margin-bottom: 8px; }
.community-card p { color: var(--muted); font-size: 14px; margin: 0; line-height: 1.6; }

/* Footer */
.footer {
  border-top: 1px solid var(--panel-border);
  padding: 50px 6vw 40px;
  position: relative;
}
.footer-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.footer-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Anton', sans-serif;
  font-size: 20px;
  margin-bottom: 20px;
}
.footer-disclaimer {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  max-width: 720px;
  margin: 0 auto 18px;
}
.footer-signoff {
  font-family: 'Caveat', cursive;
  font-size: 19px;
  color: var(--amber);
  margin: 0 0 18px;
  transform: rotate(-1deg);
}
.footer-copy { color: var(--muted); font-size: 12px; }

/* ---- Roadmap ----
   A run of stops down one rail: what is finished, what is going on now, and
   what is coming. The dot on the rail carries the colour, so the status of
   a stop reads before any of the words do -- and the rail itself stops at
   the last dot rather than running on into nothing. */
.roadmap {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 820px;
  position: relative;
}
.road-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding-bottom: 18px;
}
/* The rail is a length per stop rather than one line down the whole list,
   so it takes that stop's colour and stops dead at the last dot instead of
   running on into nothing. */
.road-item::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 22px;
  bottom: -22px;
  width: 2px;
  background: currentColor;
  color: var(--panel-border);
  opacity: 0.9;
}
.road-item:last-child { padding-bottom: 0; }
.road-item:last-child::before { display: none; }
.road-dot {
  position: relative;
  z-index: 1;
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--panel-border);
  background: var(--panel);
  color: var(--muted);
  font-size: 19px;
}
.road-body {
  flex: 1;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 18px 22px;
}
.road-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.road-head h3 { font-size: 19px; }
.road-status {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.road-item p { color: var(--muted); font-size: 14.5px; line-height: 1.65; margin: 0; }
.road-item p a { color: var(--amber); text-decoration: underline; text-underline-offset: 2px; }

/* Done is green and settled, what is running now is amber and lit, next is
   blue and waiting, and the last one is the reason for the rest of it. */
.road-item.is-done::before { color: rgba(53, 224, 138, 0.45); }
.road-item.is-done .road-dot { color: var(--green); border-color: rgba(53, 224, 138, 0.55); }
.road-item.is-done .road-status { color: var(--green); }
.road-item.is-now::before { color: rgba(255, 183, 3, 0.45); }
.road-item.is-now .road-dot {
  color: var(--amber);
  border-color: var(--amber);
  box-shadow: 0 0 0 4px rgba(255, 183, 3, 0.12);
}
.road-item.is-now .road-status { color: var(--amber); }
.road-item.is-now .road-body { border-color: rgba(255, 183, 3, 0.35); }
.road-item.is-next::before { color: rgba(61, 220, 255, 0.45); }
.road-item.is-next .road-dot { color: var(--blue); border-color: rgba(61, 220, 255, 0.5); }
.road-item.is-next .road-status { color: var(--blue); }
.road-item.is-goal .road-dot {
  color: #0a0a0d;
  background: var(--amber);
  border-color: #000;
}
.road-item.is-goal .road-status { color: #0a0a0d; background: var(--amber); border-color: #000; }
.road-item.is-goal .road-body {
  border: 2px solid var(--amber);
  box-shadow: var(--shadow-hard);
}

.roadmap-foot {
  max-width: 820px;
  margin: 34px auto 0;
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}
.roadmap-foot a { color: var(--amber); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 560px) {
  .road-item::before { left: 17px; }
  .road-item { gap: 12px; }
  .road-dot { width: 36px; height: 36px; font-size: 16px; }
  .road-body { padding: 15px 16px; }
  .road-head h3 { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .road-item.is-now .road-dot { box-shadow: none; }
}