/* ---- Fonts ----
   Served from the site itself rather than from Google, so they come down
   the same connection as the page and the three most used are preloaded
   in the head. Each has a stand-in made from Arial (or whatever the
   phone has that is closest), scaled to the real font's width and given
   its line height, so the page is laid out the same before and after the
   real font lands and nothing jumps when it does. The numbers were
   measured against the font files, then checked against every line of
   text on the pages at the weights they are set in. Licences are in
   assets/fonts. */
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/anton-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/inter-800.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/inter-900.woff2') format('woff2'); }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/caveat-600.woff2') format('woff2'); }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/caveat-700.woff2') format('woff2'); }
@font-face { font-family: 'Anton Fallback'; font-weight: 100 900; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Helvetica-Bold'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Roboto Bold'), local('Roboto-Bold'); size-adjust: 71.79%; ascent-override: 164.37%; descent-override: 45.97%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Fallback'; font-weight: 100 500; src: local('Arial'), local('ArialMT'), local('Helvetica'), local('Liberation Sans'), local('Roboto'); size-adjust: 106.8%; ascent-override: 90.82%; descent-override: 22.47%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Fallback'; font-weight: 600 700; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Helvetica-Bold'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Roboto Bold'), local('Roboto-Bold'); size-adjust: 102.42%; ascent-override: 94.71%; descent-override: 23.43%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Fallback'; font-weight: 800 900; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Helvetica-Bold'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Roboto Bold'), local('Roboto-Bold'); size-adjust: 104.28%; ascent-override: 93.02%; descent-override: 23.01%; line-gap-override: 0%; }
@font-face { font-family: 'Caveat Fallback'; font-weight: 100 900; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Helvetica-Bold'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Roboto Bold'), local('Roboto-Bold'); size-adjust: 71.67%; ascent-override: 133.95%; descent-override: 41.86%; line-gap-override: 0%; }

: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; }

/* The page colour sits on the root, not on body, so a layer behind
   body's own content (the red glow near the top) has something to be in
   front of. On body it would paint straight over it. */
html { background: var(--bg); }
body {
  margin: 0;
  background: transparent;
  color: var(--text);
  font-family: 'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }
/* height: auto is the other half of max-width: 100%. Without it an image
   that is narrowed to fit keeps the height off its width attribute and
   comes out stretched. */
img { max-width: 100%; height: auto; 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', 'Anton Fallback', 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; }
/* The copy of the buy button that the phone menu carries. It is made by
   the script and only ever meant for the sheet, so anywhere the bar has
   its own it stays away. */
.nav-menu-buy { 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; }
  /* No room for the word: a tap on the pill brings it out. */
  .wallet-disconnect { display: none; }
  .wallet-connected { cursor: pointer; }
  .wallet-connected.is-open .wallet-disconnect { display: inline; }
}
@media (max-width: 1200px) {
  .nav-links { gap: 20px; }
}

@media (min-width: 760px) {
  .nav-cta { display: inline-flex; }
}
/* ---- The menu on a phone ----
   A sheet that drops from the bar, over a dimmed page that does not
   scroll behind it. The links are set in the heading face and sized for
   a thumb, the one for the part of the page you are on is lit, and the
   buy button that the bar has no room for on a phone sits at the bottom
   of the list. The menu button folds into a cross while it is open. Tap
   the dim, the cross or a link, or press Escape, and it goes. */
@media (max-width: 1040px) {
  .nav-toggle { display: flex; }
  .nav-toggle span {
    transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 0.15s ease;
    transform-origin: center;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 4px 0 16px;
    background: var(--bg);
    border-bottom: 3px solid #000;
    box-shadow: 0 8px 0 #000;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: transform 0.2s ease, opacity 0.16s ease, visibility 0s linear 0.2s;
  }
  .nav-links.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: transform 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.15), opacity 0.16s ease;
  }
  .nav-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 6vw;
    border-top: 1px solid var(--panel-border);
    font-family: 'Anton', 'Anton Fallback', sans-serif;
    font-weight: 400;
    font-size: 21px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text);
  }
  .nav-links a:active { background: rgba(255, 255, 255, 0.04); }
  /* The dot at the end of the row says which part of the page you are
     on; it stands in for the underline the wide bar uses. */
  .nav-links a::after {
    position: static;
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--panel-border);
    transform: none;
    transition: background 0.15s ease, box-shadow 0.15s ease;
  }
  .nav-links a:hover::after { transform: none; }
  .nav-links a.is-here { color: var(--amber); }
  .nav-links a.is-here::after { background: var(--amber); box-shadow: 0 0 0 3px rgba(255, 183, 3, 0.2); }
  .nav-links .nav-menu-buy {
    display: flex;
    justify-content: center;
    margin: 14px 6vw 2px;
    padding: 15px 22px;
    border-top: 0;
    font-size: 17px;
    letter-spacing: 0.6px;
  }
  .nav-links .nav-menu-buy::after { display: none; }
  /* Play is the one thing on the list that is a game rather than a part
     of the page, so it is lit in the sheet as well. */
  .nav-links .nav-play { justify-content: flex-start; gap: 10px; color: var(--amber); }
  .nav-links .nav-play-icon { width: 13px; height: 13px; flex: none; }
  .nav-links .nav-play::after { margin-left: auto; }
  /* Each row lands a beat after the one above it. */
  .js .nav-links.open a { animation: nav-row 0.3s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
  .js .nav-links.open a:nth-child(2) { animation-delay: 0.03s; }
  .js .nav-links.open a:nth-child(3) { animation-delay: 0.06s; }
  .js .nav-links.open a:nth-child(4) { animation-delay: 0.09s; }
  .js .nav-links.open a:nth-child(5) { animation-delay: 0.12s; }
  .js .nav-links.open a:nth-child(6) { animation-delay: 0.15s; }
  .js .nav-links.open a:nth-child(7) { animation-delay: 0.18s; }
  .js .nav-links.open a:nth-child(8) { animation-delay: 0.21s; }
  @keyframes nav-row {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: none; }
  }
}
/* The dim over the page while the menu is open. Put there by main.js. */
.nav-shade {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(4, 4, 6, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.nav-shade.open { opacity: 1; pointer-events: auto; }
body.nav-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .nav-links, .nav-links.open, .nav-toggle span, .nav-shade { transition: none; }
  .js .nav-links.open a { animation: none; }
}

/* 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; }
/* Wide enough already for "live now, 1,234 watching", so when he goes on
   air the tag does not grow and shove the row sideways. */
@media (min-width: 561px) {
  .badge-row .stat-tag-live { min-width: 290px; justify-content: center; }
}
/* On a phone the three will not sit on one line, and left to wrap the live
   tag drops underneath on its own looking like it fell off. So put them on
   a grid instead: the two facts share the top line, and the live tag takes
   the whole line under them, which is where the eye should land anyway. */
@media (max-width: 560px) {
  .badge-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-bottom: 20px;
  }
  .badge-row .stat-tag { justify-content: center; padding: 9px 12px; gap: 8px; }
  .badge-row .stat-tag-live { grid-column: 1 / -1; --tilt: -0.8deg; }
  .badge-row .stat-tag-label { font-size: 9.5px; letter-spacing: 0.5px; }
}

.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', 'Anton Fallback', 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', 'Caveat Fallback', 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-label {
  font-family: 'Anton', 'Anton Fallback', 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; }


/* 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: 16px;
}

/* 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', 'Anton Fallback', 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-story { display: flex; flex-direction: column; gap: 26px; }
/* The story as a ledger: four numbers, big as headlines, that count up
   when you get to them, each with its line. */
.ledger {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ledger-row {
  display: grid;
  grid-template-columns: minmax(118px, auto) 1fr;
  align-items: center;
  gap: 26px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.14);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.ledger-row:last-child { border-bottom: 0; }
.ledger-num {
  display: block;
  font-family: 'Anton', 'Anton Fallback', sans-serif;
  font-size: clamp(52px, 6vw, 84px);
  line-height: 0.95;
  color: var(--amber);
  text-align: right;
  text-shadow: 4px 4px 0 #000, 7px 7px 0 rgba(255, 183, 3, 0.28);
  letter-spacing: 1px;
  transform: rotate(-3deg);
}
.ledger-row:nth-child(even) .ledger-num { transform: rotate(2deg); }
.ledger-num .stat-num { display: inline; font: inherit; color: inherit; }
.ledger-text { display: grid; gap: 4px; }
.ledger-text b {
  font-family: 'Anton', 'Anton Fallback', sans-serif;
  font-size: 22px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text);
}
.ledger-text span { color: var(--muted); font-size: 15px; line-height: 1.5; }
.js .ledger-row:not(.in) { opacity: 0; transform: translateX(22px); }

/* Stamped on the card once you reach it. */
.proof-stamp {
  position: absolute;
  top: -12px;
  right: -34px;
  z-index: 3;
  font-family: 'Anton', 'Anton Fallback', sans-serif;
  font-size: 15px;
  line-height: 1.1;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  color: var(--red);
  border: 3px solid var(--red);
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: inset 0 0 0 2px var(--bg-alt), inset 0 0 0 4px var(--red);
  background: rgba(10, 10, 13, 0.55);
  transform: rotate(-12deg);
  transform-origin: right center;
  opacity: 0.94;
  transition: transform 0.4s cubic-bezier(0.2, 1.5, 0.4, 1), opacity 0.2s ease;
}
.js .proof-stamp:not(.in) { transform: rotate(-12deg) scale(2); opacity: 0; }
.proof-scribble {
  position: absolute;
  left: -30px;
  top: auto;
  bottom: -22px;
  order: 0;
  transform: rotate(-7deg);
  z-index: 3;
}
#proof {
  background-image: radial-gradient(ellipse at 72% 38%, rgba(255, 183, 3, 0.09), transparent 55%);
}
@media (max-width: 820px) {
  .ledger-row { grid-template-columns: minmax(92px, auto) 1fr; gap: 18px; }
  .ledger-num { font-size: 56px; }
  .proof-stamp { right: 0; top: -16px; font-size: 13px; }
  .proof-scribble { display: none; }
}
.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; }
}

/* 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; }

/* ---- The way in to the meme maker ----
   Under the games rather than among them: a wide card with a meme already
   half made on the left, so it is clear what is on the other side. */
.meme-promo {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  max-width: 900px;
  margin: 30px auto 0;
  padding: 14px 20px 14px 14px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.meme-promo:hover { transform: translateY(-3px); border-color: var(--amber); }
.meme-promo-art {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 70%, rgba(255, 170, 30, 0.4), transparent 70%), #0d0b10;
}
.meme-promo-art img { position: absolute; left: 4%; right: 4%; bottom: 8%; width: 92%; height: auto; }
.meme-promo-top {
  position: absolute;
  top: 7%;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'Anton', 'Anton Fallback', Impact, sans-serif;
  font-size: 15px;
  line-height: 1;
  color: #fff;
  -webkit-text-stroke: 3px #000;
  paint-order: stroke fill;
  letter-spacing: 0.2px;
}
.meme-promo-text { display: grid; gap: 4px; text-align: left; }
.meme-promo-text b { font-family: 'Anton', 'Anton Fallback', sans-serif; font-size: 22px; font-weight: 400; letter-spacing: 0.4px; text-transform: uppercase; }
.meme-promo-text span { color: var(--muted); font-size: 14px; line-height: 1.5; }
.meme-promo-text .meme-promo-count { color: var(--amber); font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meme-promo-go { pointer-events: none; }
@media (max-width: 640px) {
  .meme-promo { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 12px; }
  .meme-promo-top { font-size: 10px; -webkit-text-stroke-width: 2px; }
  .meme-promo-text b { font-size: 19px; }
  .meme-promo-go { grid-column: 1 / -1; justify-self: stretch; }
}
@media (prefers-reduced-motion: reduce) { .meme-promo { transition: none; } }
.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; }
/* The three descriptions are different lengths, so without this the three
   Play buttons sat at three different heights and the row read as crooked. */
.game-card .btn { margin-top: auto; }

/* Tokenomics */


/* Steps */
.steps {
  display: grid;
  /* Four steps in one row wherever there is room: left to fit
     themselves they went three and one at some widths, and a step on
     its own under the others reads as an afterthought. */
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-bottom: 40px;
}
@media (max-width: 900px) {
  .steps { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 520px) {
  .steps { grid-template-columns: 1fr; }
}
.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', 'Anton Fallback', 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;
}
/* Six of them, so a wide screen gets two rows of three rather than five
   across and one sitting on its own underneath. */
@media (min-width: 880px) {
  .community-grid { grid-template-columns: repeat(3, 1fr); }
}
.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', 'Anton Fallback', sans-serif;
  font-size: 20px;
  margin-bottom: 20px;
}
/* Everywhere he is, in a row under the name: each one in its own colour
   where it has one, the rest in the page's amber. */
/* ---- Where he is, in the hero ----
   Round badges in the empty space either side of the hero on a wide
   screen, tilted like the can and the sign and drifting with them as
   the page scrolls; a row across the bottom of the hero on a narrow one.
   Tilt, drift and the hover lift are separate properties, so the lift
   can ease while the drift follows the page straight away. */
.hero-social {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 34px;
}
.hs {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  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(--amber);
  font-size: 24px;
  rotate: var(--tilt, 0deg);
  transition: scale 0.18s cubic-bezier(0.2, 1.4, 0.4, 1), rotate 0.18s ease, border-color 0.18s ease;
}
.hs:hover, .hs:focus-visible { scale: 1.1; rotate: 0deg; border-color: var(--amber); }
.hs .community-mark { width: 24px; height: 24px; }
.hs-x { --tilt: -8deg; }
.hs-ig { --tilt: 6deg; }
.hs-kick { --tilt: 9deg; }
.hs-dc { --tilt: -7deg; }
@media (min-width: 1000px) {
  .hero-social { position: absolute; inset: 0; margin: 0; display: block; pointer-events: none; }
  .hs {
    position: absolute;
    width: 66px;
    height: 66px;
    font-size: 28px;
    pointer-events: auto;
    translate: 0 calc(var(--py) * var(--drift, 0.12));
  }
  .hs .community-mark { width: 28px; height: 28px; }
  /* Across the free space beside the headline, whose widest line is about
     760px: a share of that gap each, so they stay clear of the words at
     any width and spread further out on a wider screen. */
  .hero-social { --gap: calc((100vw - 760px) / 2); }
  .hs-x { left: calc(var(--gap) * 0.42 - 33px); top: 31%; --drift: 0.18; }
  .hs-ig { left: calc(var(--gap) * 0.66 - 33px); top: 50%; --drift: -0.1; }
  .hs-kick { right: calc(var(--gap) * 0.42 - 33px); top: 25%; --drift: -0.14; }
  .hs-dc { right: calc(var(--gap) * 0.64 - 33px); top: 46%; --drift: 0.2; }
}
@media (prefers-reduced-motion: reduce) {
  .hs { transition: none; translate: none; }
}

.footer-disclaimer {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  max-width: 720px;
  margin: 0 auto 18px;
}
.footer-signoff {
  font-family: 'Caveat', 'Caveat Fallback', 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: var(--spine, 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);
}

@media (max-width: 560px) {
  .road-item { --spine: 17px; 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; }
}

/* ---- Feel ----
   What the page does when you touch it. All of it in the language it
   already speaks: black keylines, offset shadows, a few degrees of tilt,
   marker pen. Nothing fades in on scroll for the sake of it; the page is
   all there at rest, and the few things that move only move once, when
   they come into view, and quickly. */
::selection { background: var(--amber); color: #1a1200; }
html { scroll-padding-top: 84px; }
.btn:focus-visible, .ca-box:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* A press is quicker than a lift, the way a real button is. */
.btn { transition: transform 0.14s cubic-bezier(0.2, 0.9, 0.3, 1.3), box-shadow 0.14s ease; }
.btn:active { transition-duration: 0.05s; }

/* The words in the title that matter get a marker pen through them instead
   of a gradient. The pen goes on after the page has landed. */
.hero-title .hl {
  position: relative;
  display: inline-block;
  isolation: isolate;
  padding: 0 0.12em;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: #1a1200;
}
.hero-title .hl::before {
  content: "";
  position: absolute;
  inset: 0.1em -0.06em 0.04em -0.06em;
  background: var(--amber);
  border-radius: 0.08em;
  transform: rotate(-1.3deg);
  transform-origin: left center;
  z-index: -1;
}
.js .hero-title .hl { animation: hl-ink 0.5s steps(1, end) 0.3s both; }
.js .hero-title .hl::before { animation: hl-swipe 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s both; }
@keyframes hl-swipe { from { transform: rotate(-1.3deg) scaleX(0); } to { transform: rotate(-1.3deg) scaleX(1); } }
@keyframes hl-ink { from { color: var(--text); } to { color: #1a1200; } }

/* A wave of beer across the page under the hero, with the stats riding
   it. The band, the words and the foam are drawn once, as strips that
   slide across on the graphics chip, so a phone pays nothing for them
   each frame; the streaks in the beer and the bubbles are drawn on a
   small canvas over the top. The wrap clips the strips so nothing pokes
   past a phone screen. */
.wave-wrap {
  position: relative;
  z-index: 2;
  overflow: hidden;
  margin: -46px 0 6px;
  padding: 1.4vw 0;
  line-height: 0;
}
/* Tipped a touch, so the beer runs downhill the way it flows, and rocked
   gently up and down. */
.wave {
  position: relative;
  height: 164px;
  transform: rotate(-1.4deg) scale(1.04);
  transform-origin: center;
}
.js .wave { animation: wave-sway 3.4s ease-in-out infinite alternate; }
.wave-track {
  position: absolute;
  left: 0;
  top: 0;
  height: 164px;
  display: flex;
  will-change: transform;
}
.wave-track svg { display: block; flex: none; height: 164px; }
.wave-live { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wave-shadow { fill: #000; }
.wave-band { fill: url(#wave-beer); stroke: #000; stroke-width: 3; stroke-linejoin: round; }
.wave-foam { fill: none; stroke: #fff3d2; stroke-width: 4; stroke-linecap: round; opacity: 0.9; }
.wave-skirt { fill: #fff3d2; }
.wave-skirt-edge { fill: none; stroke: #000; stroke-width: 2.5; stroke-linecap: round; }
.wave-head-line { fill: #fff3d2; stroke: #000; stroke-width: 2.5; stroke-linejoin: round; }
.wave-head { fill: #fff3d2; }
.wave-head-shade { fill: rgba(150, 110, 40, 0.13); }
.wave-head-hole { fill: rgba(150, 110, 40, 0.2); }
.wave-fleck { fill: #fff3d2; stroke: #000; stroke-width: 1.2; }
.wave-text {
  font-family: 'Anton', 'Anton Fallback', sans-serif;
  font-size: 19px;
  letter-spacing: 2px;
  text-transform: uppercase;
  fill: #1a1200;
  dominant-baseline: middle;
}
.wave-icon { fill: #1a1200; opacity: 0.85; }
@keyframes wave-sway {
  from { transform: rotate(-1.4deg) scale(1.04) translateY(-2px); }
  to { transform: rotate(-1.4deg) scale(1.04) translateY(2px); }
}

/* Section titles get a line of marker under them that draws itself the
   first time you reach it. The line is put there by main.js, so a page
   with no script has no line and no gap where one should be. */
.section-title { position: relative; display: inline-block; }
.title-stroke {
  position: absolute;
  left: -3%;
  bottom: -0.16em;
  width: 106%;
  height: 0.34em;
  overflow: visible;
  pointer-events: none;
}
.title-stroke path {
  fill: none;
  stroke: var(--amber);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0.9;
  transition: stroke-dashoffset 0.55s cubic-bezier(0.3, 0.8, 0.3, 1) 0.12s;
}
.section-title.in .title-stroke path { stroke-dashoffset: 0; }

/* The roadmap stops arrive one at a time as you get to them: the dot
   grows to its size and the card slides the last few pixels into place.
   Only when the script is there to bring them in, and only once. */
.js .road-item .road-dot { transition: transform 0.38s cubic-bezier(0.2, 1.5, 0.4, 1); }
.js .road-item .road-body { transition: opacity 0.32s ease, transform 0.32s ease; }
.js .road-item:not(.in) .road-dot { transform: scale(0.5); }
.js .road-item:not(.in) .road-body { opacity: 0; transform: translateX(12px); }
/* What is running now has a pulse on its dot, in its own colour. */
.road-item.is-now .road-dot::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 183, 3, 0.45);
  animation: road-ping 2.4s ease-out infinite;
}
@keyframes road-ping {
  0% { box-shadow: 0 0 0 0 rgba(255, 183, 3, 0.45); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(255, 183, 3, 0); }
}

/* Cards lift into a shadow when pointed at, the way the buttons do. The
   ones that go somewhere lift the most. */
.game-card, .community-card, .game-featured, .step {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.game-card:hover, .community-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 5px 5px 0 #000;
  border-color: var(--amber);
}
.game-featured:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 #000; }
.step:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 183, 3, 0.45);
}

/* The bar knows where you are. The link for the part of the page you are
   on is lit and underlined, and the underline slides in under whichever
   one you point at. */
.nav-links a { position: relative; transition: color 0.15s ease; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.nav-links a:hover::after, .nav-links a.is-here::after { transform: scaleX(1); }
.nav-links a.is-here { color: var(--text); }
/* Once the bar has its own buy button, the sheet's copy goes: there was a
   stretch of widths with one in the bar and one in the list, and on a
   wide screen the copy sat in the row of links as a second button. */
@media (min-width: 760px) {
  .nav-links .nav-menu-buy { display: none; }
}
/* Play stands apart from the links on a wide bar: a small amber pill at
   the end of the row, set off from the words, filled when you are on it
   or point at it. It is a game, not a heading, and reads as one. */
@media (min-width: 1041px) {
  /* The words and the pill sit on the same centre line as the bar. */
  .nav-links { align-items: center; }
  .nav-links .nav-play {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    box-sizing: border-box;
    height: 32px;
    margin-left: 10px;
    padding: 0 14px 0 12px;
    border: 2px solid var(--amber);
    border-radius: 999px;
    font-family: 'Anton', 'Anton Fallback', sans-serif;
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--amber);
    line-height: 1;
    transition: color 0.15s ease, background-color 0.15s ease, transform 0.14s cubic-bezier(0.2, 0.9, 0.3, 1.3);
  }
  .nav-links .nav-play-icon {
    width: 11px;
    height: 11px;
    flex: none;
    transform: translateY(-0.5px);
  }
  .nav-links .nav-play::after { display: none; }
  .nav-links .nav-play:hover,
  .nav-links .nav-play.is-here { background: var(--amber); color: #1a1200; }
  .nav-links .nav-play:hover { transform: translateY(-1px); }
}
.nav { transition: box-shadow 0.2s ease; }
.nav.is-scrolled { box-shadow: 0 3px 0 #000; }


/* Copying the address is the thing most people come here to do, so it has
   to feel like something happened. The whole box takes the tap, the
   dashes go solid, the address lights up, and a stamp lands on the corner. */
/* Copied: the box goes solid green and rings once, the button turns
   green and draws its tick, a marker sweep runs across the address, and
   a few bubbles pop off the button. One moment, several parts. */
.ca-box.is-copied {
  border-style: solid;
  border-color: var(--green);
  animation: ca-ring 0.7s ease-out;
}
@keyframes ca-ring {
  0% { box-shadow: 0 0 0 0 rgba(53, 224, 138, 0.55); }
  100% { box-shadow: 0 0 0 22px rgba(53, 224, 138, 0); }
}
.ca-box.is-copied .ca-address {
  background: linear-gradient(90deg, var(--text) 0 38%, var(--amber) 48%, #fff3d2 52%, var(--amber) 56%, var(--text) 66% 100%);
  background-size: 320% 100%;
  background-position: 0% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ca-sweep 0.9s cubic-bezier(0.3, 0.7, 0.2, 1) forwards;
}
@keyframes ca-sweep {
  from { background-position: 100% 0; }
  to { background-position: 0% 0; }
}
#ca-copy { display: inline-flex; align-items: center; gap: 6px; transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease; }
#ca-copy.is-done { background: var(--green); color: #06130b; }
.ca-check {
  width: 1.1em;
  height: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: ca-tick 0.35s ease-out 0.05s forwards;
}
@keyframes ca-tick { to { stroke-dashoffset: 0; } }
.ca-bub {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: var(--c);
  border: 1.5px solid #000;
  pointer-events: none;
  z-index: 3;
  animation: ca-bub 0.85s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes ca-bub {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ca-box.is-copied { animation: none; }
  .ca-box.is-copied .ca-address { animation: none; background: none; color: var(--amber); -webkit-text-fill-color: currentColor; }
  .ca-check { animation: none; stroke-dashoffset: 0; }
  .ca-bub { display: none; }
}
/* The address in step three copies too, and flashes to say so. */
.copy-code { cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.copy-code:hover { border-color: var(--amber); }
.copy-code.is-copied { background: var(--amber); color: #1a1200; }

/* The props in the hero drift at different speeds as you scroll, which is
   what makes them props on a set rather than pictures on a wall. */
.hero { --py: 0px; }
.hero-prop-can { transform: rotate(-12deg) translateY(calc(var(--py) * 0.22)); }
.hero-prop-syringe { transform: rotate(8deg) translateY(calc(var(--py) * -0.16)); }
.hero-prop-sign { transform: rotate(6deg) translateY(calc(var(--py) * 0.1)); }

@media (prefers-reduced-motion: reduce) {
  .js .hero-title .hl, .js .hero-title .hl::before { animation: none; }
  .js .wave { animation: none; }
  .title-stroke path { transition: none; stroke-dashoffset: 0; }
  .js .road-item:not(.in) .road-dot { transform: none; }
  .js .road-item:not(.in) .road-body { opacity: 1; transform: none; }
  .js .ledger-row:not(.in) { opacity: 1; transform: none; }
  .js .proof-stamp:not(.in) { transform: rotate(-12deg); opacity: 0.94; }
  .road-item.is-now .road-dot::after { animation: none; }
  .hero { --py: 0px !important; }
}


/* ---- Today's regimen ----
   One drink an hour on the visitor's own clock, which is the whole bit
   made live: twenty-four cans, the ones that are down lit, the next one
   waiting, and a button to crack one along with him. Sits right under
   the wave, so it reads as part of the hero's noise rather than a
   section of its own. */
.regimen {
  position: relative;
  z-index: 1;
  padding: 10px 16px 30px;
}
.regimen-inner {
  max-width: 760px;
  margin: 0 auto;
  background: var(--panel);
  border: 2px solid #000;
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  padding: 16px 18px 18px;
  transform: rotate(-0.4deg);
}
.regimen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.regimen-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--amber);
}
.regimen-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red, #e63946);
  box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.6);
  animation: regimen-pulse 1.6s ease-out infinite;
}
@keyframes regimen-pulse {
  0% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.6); }
  100% { box-shadow: 0 0 0 9px rgba(230, 57, 70, 0); }
}
.regimen-mood {
  font-family: 'Caveat', 'Caveat Fallback', 'Comic Sans MS', cursive;
  font-size: 20px;
  line-height: 1;
  color: var(--text);
  transform: rotate(-2deg);
}
.regimen-cans {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 3px;
  margin-bottom: 12px;
}
.regimen-can {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1.25;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.16);
  transition: color 0.3s ease, background-color 0.3s ease, transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
.regimen-can .icon { width: 62%; height: 62%; }
.regimen-can.is-down {
  color: #1a1200;
  background: var(--amber);
  border-color: rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}
.regimen-can.is-next {
  color: var(--amber);
  border-color: rgba(255, 183, 3, 0.55);
  animation: regimen-next 1.1s ease-in-out infinite alternate;
}
@keyframes regimen-next {
  from { background: rgba(255, 183, 3, 0.06); transform: translateY(0); }
  to { background: rgba(255, 183, 3, 0.2); transform: translateY(-2px); }
}
.regimen-can.is-wobble { animation: regimen-wobble 0.5s ease-out; }
@keyframes regimen-wobble {
  0% { transform: rotate(0) scale(1); }
  30% { transform: rotate(-12deg) scale(1.25); }
  60% { transform: rotate(9deg) scale(1.1); }
  100% { transform: rotate(0) scale(1); }
}
.regimen-line {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
}
.regimen-line b { color: var(--amber); }
.regimen-act {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
/* Made to be hammered. manipulation kills the double tap zoom wait on a
   phone so the press lands on the finger going down, not 300ms later, and
   nothing here can be selected or long pressed into a menu by accident. */
.regimen-crack {
  position: relative;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.regimen-crack:active { transform: translate(2px, 2px) scale(0.98); }
/* The lift and drop has to finish inside a fast run of taps, or the button
   reads as stuck down while somebody is hammering it. */
.regimen-crack { transition-duration: 0.07s; }
/* What he says back. It used to sit beside the button when the line was
   short and drop under it when it was long, so it hopped about from one
   press to the next. It gets its own line now, every time, and holds the
   height of it so nothing below moves either. */
.regimen-say {
  flex: 1 0 100%;
  font-family: 'Caveat', 'Caveat Fallback', 'Comic Sans MS', cursive;
  font-size: 19px;
  line-height: 1.15;
  color: var(--amber);
  min-height: 1.15em;
  margin-top: -2px;
}
.regimen-say.is-in { animation: say-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
@keyframes say-in {
  from { opacity: 0; transform: translateY(6px) rotate(-3deg); }
  to { opacity: 1; transform: none; }
}
.regimen-tally {
  display: block;
  width: 100%;
  font-size: 12px;
  color: var(--muted);
}
/* Foam, thrown up off the button when a can is cracked. */
.foam {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 60;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}
@media (max-width: 640px) {
  .regimen { padding: 6px 12px 24px; }
  .regimen-inner { padding: 14px 14px 16px; transform: none; }
  .regimen-cans { gap: 2px; }
  .regimen-can { border-radius: 3px; }
  .regimen-line { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .regimen-live, .regimen-can.is-next, .regimen-can.is-wobble, .regimen-say.is-in { animation: none; }
}

/* ---- Top bags ----
   The richest gyms off the shared board, under the featured game: a
   reason to open it that is other people. Same rows the game itself
   uses, five of them. */
.topbags {
  max-width: 620px;
  margin: -14px auto 34px;
  background: var(--panel);
  border: 2px solid #000;
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  padding: 16px 20px 14px;
  text-align: left;
}
.topbags-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.topbags-head h3 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 17px;
}
.topbags-head h3 .icon { color: var(--amber); width: 1.1em; height: 1.1em; }
.topbags .leaderboard-sub {
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
}
.topbags-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: bag;
}
.topbags-list li {
  display: grid;
  grid-template-columns: 26px 1fr auto auto;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--panel-border);
  font-size: 14px;
  counter-increment: bag;
}
.topbags-list li::before {
  content: counter(bag);
  font-family: 'Anton', 'Anton Fallback', sans-serif;
  font-size: 16px;
  color: var(--muted);
}
.topbags-list li:first-child::before { color: var(--amber); }
.topbags-list li:nth-child(n + 6) { display: none; }
.topbags-list .lb-addr { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbags-list .lb-meta { font-size: 12px; color: var(--muted); }
.topbags-list .lb-score { font-weight: 800; color: var(--amber); font-variant-numeric: tabular-nums; }
.topbags-list .lb-wallet {
  margin-left: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
}
.topbags-list li.is-you .lb-addr { color: var(--amber); }
.topbags-empty { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
.topbags-empty[hidden] { display: none; }
@media (max-width: 640px) {
  .topbags { padding: 14px 14px 12px; }
  .topbags-list li { grid-template-columns: 22px 1fr auto; }
  .topbags-list .lb-meta { display: none; }
  .topbags-list .lb-wallet { display: none; }
}


/* ---- The hero on a phone ----
   The two chart links live inside the contract box so they are not a
   block of their own. */
@media (max-width: 640px) {
  .hero { padding-top: 64px; padding-bottom: 46px; }
  .hero-sub { margin-bottom: 24px; }
}
/* The live pill, when he is actually on. */
.stat-tag-live.is-on {
  border-color: rgba(230, 57, 70, 0.8);
  background: linear-gradient(165deg, #3a1218 0%, #1a0d10 60%);
  animation: live-glow 1.4s ease-in-out infinite alternate;
}
@keyframes live-glow {
  from { box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.85), 0 0 0 0 rgba(230, 57, 70, 0.35); }
  to { box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.85), 0 0 0 8px rgba(230, 57, 70, 0); }
}
.regimen-onair {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 12px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(230, 57, 70, 0.6);
  background: rgba(230, 57, 70, 0.1);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}
.regimen-onair[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .stat-tag-live.is-on, .market-tile b.is-fresh { animation: none; }
}

/* ---- The bar at the bottom of a phone ---- */
.buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: none;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(10, 10, 13, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 2px solid #000;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.45);
  transform: translateY(110%);
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.buybar .btn { flex: 1; justify-content: center; white-space: nowrap; }
.buybar .buybar-buy { flex: 1.5; }
.buybar.is-on { transform: none; }
@media (max-width: 760px) {
  .buybar { display: flex; }
  /* Room under the page for it, or the footer's last line hides behind it. */
  body.has-buybar { padding-bottom: 70px; }
  /* Not over the open menu. */
  body.nav-open .buybar { transform: translateY(110%); }
}


/* ---- Community counts ---- */
.community-count {
  display: block;
  margin: -4px 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--amber);
}
/* A card whose count is fetched keeps the line for it while it is on its
   way, so the cards do not grow and push the page down when it lands. */
.community-card[data-live] .community-count { min-height: 1.4em; }
.community-card:not([data-live]) .community-count:empty { display: none; }

/* ---- The coin card ----
   Everything about the coin in one card under the buttons: the address
   with its copy button, the two live figures, the four places to see it,
   and the chart on request. One width, one rhythm. */
.coin {
  max-width: 620px;
  margin: 0 auto 16px;
  padding: 14px;
  display: grid;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 22px;
  text-align: center;
}
.ca-box {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.28);
  border: 2px dashed var(--panel-border);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}
.ca-box:hover { border-color: var(--amber); }
.ca-box:active { transform: scale(0.995); }
.ca-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* The address and its button centre as one group, and the address
   scrolls inside its own width rather than pushing the button out. */
.ca-row .ca-address { flex: 0 1 auto; min-width: 0; }
.market {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}
.market[hidden] { display: none; }
.market-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--panel-border);
  transition: border-color 0.15s ease;
}
.market-tile[hidden] { display: none; }
/* One figure on its own takes the whole row rather than half of it.
   The class is set in the script, so this holds in older browsers too. */
.market.is-one .market-tile { grid-column: 1 / -1; }
.market:hover .market-tile { border-color: rgba(255, 183, 3, 0.5); }
.market-label {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
}
.market-tile b {
  font-family: 'Anton', 'Anton Fallback', sans-serif;
  font-size: 22px;
  letter-spacing: 0.3px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.market-tile b.is-fresh { animation: market-fresh 0.6s ease; }
.market-tile b.is-waiting { color: var(--muted); }
@keyframes market-fresh {
  0% { color: var(--amber); }
  100% { }
}
/* Keeps its line while it is empty, so the note arriving with the market
   cap does not push the links under it down. */
.coin-src { margin: -4px 0 0; min-height: 1.5em; font-size: 11px; line-height: 1.5; color: var(--muted); }
.market[hidden] + .coin-src { display: none; }
.coin-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.coin-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px 6px;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  background: rgba(0, 0, 0, 0.28);
  color: var(--amber);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.coin-links a:hover { border-color: var(--amber); color: var(--text); background: rgba(255, 183, 3, 0.08); }
.coin-links .icon { width: 0.8em; height: 0.8em; opacity: 0.55; }
/* Each service's own mark leads its button, all four squared to the same
   box so the row reads evenly whatever shape the mark is. */
.coin-links .brand-mark {
  width: 18px;
  height: 18px;
  flex: none;
  object-fit: contain;
  opacity: 0.92;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.coin-links a:hover .brand-mark { opacity: 1; transform: scale(1.06); }
.chart-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 183, 3, 0.45);
  background: transparent;
  color: var(--amber);
  font: inherit;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.chart-toggle:hover { background: rgba(255, 183, 3, 0.08); border-style: solid; }
.chart-toggle .icon { width: 18px; height: 18px; }
.chart-frame {
  margin-top: 10px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--panel-border);
  background: #0d0d12;
}
.chart-frame[hidden] { display: none; }
.chart-frame iframe { display: block; width: 100%; height: 420px; border: 0; }
@media (max-width: 640px) {
  .coin { padding: 10px; gap: 8px; }
  .coin-links { grid-template-columns: repeat(2, 1fr); }
  .market-tile b { font-size: 19px; }
  .chart-frame iframe { height: 360px; }
}

/* ---- Tokenomics: the supply as a glass of beer ----
   The whole supply is the glass, the foam on top is what went to holders,
   and the facts sit in a tight list under it rather than in cards. */
.supply { max-width: 860px; margin: 0 auto 38px; }
.supply-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.supply-total, .supply-holders { display: flex; flex-direction: column; gap: 2px; }
.supply-holders { align-items: flex-end; text-align: right; }
.supply-holders[hidden] { display: none; }
.supply-total b, .supply-holders b {
  font-family: 'Anton', 'Anton Fallback', sans-serif;
  line-height: 1;
  color: var(--amber);
  text-shadow: 3px 3px 0 #000;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}
.supply-total b { font-size: clamp(34px, 5.2vw, 56px); }
.supply-holders b { font-size: clamp(26px, 3.4vw, 36px); }
.supply-total span, .supply-holders span {
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
}
/* The glass: a long bar of beer with a black keyline and the hard shadow
   everything else on the page wears. The foam is the airdrop's share,
   poured in when you reach it. */
.supply-bar {
  position: relative;
  height: 44px;
  border: 3px solid #000;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffc632 0%, #ff9a12 100%);
  box-shadow: var(--shadow-hard), inset 0 8px 0 rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.supply-drop {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--drop, 6%);
  background: #fff3d2;
  border-right: 3px solid #000;
  transition: width 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Bubbles in the foam. */
.supply-drop i {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 38%, rgba(150, 110, 40, 0.18) 0 3px, transparent 4px),
    radial-gradient(circle at 58% 66%, rgba(150, 110, 40, 0.16) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 30%, rgba(150, 110, 40, 0.16) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 40% 78%, rgba(150, 110, 40, 0.14) 0 2px, transparent 3px);
}
/* The part still to go out: foam not yet settled, drawn as stripes. */
.supply-next {
  position: absolute;
  inset: 0 auto 0 var(--drop, 6%);
  width: var(--next, 7%);
  background: repeating-linear-gradient(135deg, #fff3d2 0 6px, rgba(255, 243, 210, 0.35) 6px 12px);
  border-right: 3px solid #000;
  transition: width 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s;
}
.js .supply:not(.in) .supply-drop { width: 0; }
.js .supply:not(.in) .supply-next { width: 0; }
.supply-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-top: 14px;
  font-size: 14px;
  color: var(--muted);
}
.supply-key { display: inline-flex; align-items: center; gap: 8px; }
.supply-key i { width: 14px; height: 14px; border-radius: 4px; border: 2px solid #000; box-sizing: border-box; }
.supply-key-drop i { background: #fff3d2; }
.supply-key-next i { background: repeating-linear-gradient(135deg, #fff3d2 0 3px, rgba(255, 243, 210, 0.35) 3px 6px); }
.supply-key-market i { background: linear-gradient(180deg, #ffc632, #ff9a12); }
.supply-key b { color: var(--text); font-weight: 800; }
.supply-key em {
  font-style: normal;
  font-family: 'Anton', 'Anton Fallback', sans-serif;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--amber);
}

/* The facts, one line each, in two columns where there is room. */
.facts {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 860px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 40px;
}
.facts li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.14);
}
.fact-icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 183, 3, 0.1);
  border: 1px solid rgba(255, 183, 3, 0.35);
  color: var(--amber);
}
.fact-icon .icon { width: 18px; height: 18px; }
.fact-text { display: grid; gap: 3px; }
.fact-text b { font-size: 15.5px; font-weight: 800; }
.fact-text span { color: var(--muted); font-size: 14px; line-height: 1.5; }
@media (max-width: 720px) {
  .facts { grid-template-columns: 1fr; }
  .facts li:last-child { border-bottom: 0; }
  .supply-holders { align-items: flex-start; text-align: left; }
}
@media (min-width: 721px) {
  .facts li:nth-last-child(-n+2) { border-bottom: 0; }
}

/* Two ways to buy, side by side. */
.buy-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* ---- The swap, on the page ----
   A panel of its own above the buttons, so it reads as one more way to
   buy rather than as the only one. The box it opens into is Jupiter's,
   so it is given room and left alone. */
.swap {
  max-width: 460px;
  margin: 0 auto 26px;
  padding: 20px 18px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  background: var(--panel);
  text-align: center;
}
.swap-head h3 { font-size: 19px; margin: 0 0 6px; }
.swap-head p { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin: 0 0 16px; }
.swap-box {
  min-height: 520px;
  margin-top: 4px;
  border-radius: 12px;
  overflow: hidden;
}
.swap-box[hidden] { display: none; }
.swap-note { margin: 14px 0 0; font-size: 13px; color: #ffd7d7; }
.swap-note[hidden] { display: none; }
@media (max-width: 560px) {
  .swap { padding: 16px 14px; }
  .swap-box { min-height: 560px; }
}

/* ---- Sending it on ----
   A line above the cards: one press to put the site somewhere else. */
.share-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 26px;
}
.share-row[hidden] { display: none; }
/* A brand's own mark on a button that goes to it, at the size of the
   drawn icons beside it. */
.btn-mark {
  width: 1.15em;
  height: 1.15em;
  object-fit: contain;
  flex: none;
}
.share-lead {
  font-family: 'Anton', 'Anton Fallback', sans-serif;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--muted);
  margin-right: 4px;
}

/* ---- Questions ---- */
.faq { max-width: 760px; margin: 0 auto; display: grid; gap: 10px; }
.faq-item {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  padding: 0 20px;
  transition: border-color 0.15s ease;
}
.faq-item[open], .faq-item:hover { border-color: rgba(255, 183, 3, 0.45); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 34px 16px 0;
  font-weight: 800;
  font-size: 16px;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--amber);
  color: var(--amber);
  font-family: 'Anton', 'Anton Fallback', sans-serif;
  font-size: 18px;
  line-height: 22px;
  text-align: center;
  transition: transform 0.2s ease, background 0.15s ease, color 0.15s ease;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); background: var(--amber); color: #1a1200; }
.faq-item summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 6px; }
.faq-item p { margin: 0 0 18px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.faq-item p a { color: var(--amber); text-decoration: underline; text-underline-offset: 2px; }

/* ---- The page that is not there ---- */
.lost {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 6vw;
  gap: 10px;
}
.lost-num {
  margin: 0;
  font-family: 'Anton', 'Anton Fallback', sans-serif;
  font-size: clamp(96px, 22vw, 200px);
  line-height: 0.9;
  color: var(--amber);
  text-shadow: 6px 6px 0 #000, 10px 10px 0 rgba(255, 183, 3, 0.28);
  transform: rotate(-3deg);
}
.lost-title { font-size: clamp(2rem, 6vw, 3.2rem); margin: 10px 0 0; }
.lost-sub { color: var(--muted); margin: 0 0 22px; }

/* ---- Cracked together ----
   Everybody pressing the button on any screen anywhere adds to the one
   figure. It is the loudest number in the section, because it is the
   only one that is not about him: it is about whoever turned up. */
.cracked {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
}
.cracked[hidden] { display: none; }
.cracked-n {
  position: relative;
  font-family: 'Anton', 'Anton Fallback', sans-serif;
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1;
  letter-spacing: 1px;
  color: var(--amber);
  text-shadow: 3px 3px 0 #000;
  font-variant-numeric: tabular-nums;
  transition: transform 0.18s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.cracked.is-up .cracked-n { transform: translateY(-3px) scale(1.06); }
.cracked-say {
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
}
.cracked-say em { display: block; font-style: normal; letter-spacing: 1px; opacity: 0.75; }
/* Somebody else, somewhere, just pressed it. */
.cracked-ping {
  position: absolute;
  left: 50%;
  top: -4px;
  transform: translate(-50%, 0);
  font-family: 'Anton', 'Anton Fallback', sans-serif;
  font-size: 15px;
  color: #8be0a4;
  text-shadow: 2px 2px 0 #000;
  pointer-events: none;
  white-space: nowrap;
}

/* ---- The pour ----
   How far down the page you have got, along the very top, with a head of
   foam riding the leading edge. */
.pour {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  /* Above the sticky nav, which is 100, or it pours along behind it and
     nobody ever sees it. Under the wallet menu, which is 120. */
  z-index: 110;
  background: linear-gradient(90deg, #ff9a12, var(--amber));
  box-shadow: 0 0 12px rgba(255, 183, 3, 0.45);
  pointer-events: none;
  will-change: width;
}
.pour-head {
  position: absolute;
  right: -3px;
  top: -2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff3d2;
  box-shadow: 0 0 8px rgba(255, 243, 210, 0.8);
}
.js .pour-head { animation: pour-bob 1.4s ease-in-out infinite alternate; }
@keyframes pour-bob {
  from { transform: translateY(-0.5px) scale(0.92); }
  to { transform: translateY(0.5px) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .js .pour-head { animation: none; }
  .cracked-n { transition: none; }
}

/* ---- More of the feel ----
   The same language as the rest of the page: things get slapped down
   rather than faded in, beer fills things rather than colours changing,
   and nothing moves unless there is a reason for it to. Everything here
   is off under prefers-reduced-motion, at the bottom of the block. */

/* Kick's own mark on its card, where the others use the sprite. */
.community-mark { width: 30px; height: 30px; object-fit: contain; }

/* Everything that was not already arriving, arrives. Slapped down: up a
   little, turned a degree or two, and straight. */
.js .step:not(.in),
.js .game-card:not(.in),
.js .community-card:not(.in),
.js .faq-item:not(.in),
.js .facts li:not(.in),
.js .game-featured:not(.in) {
  opacity: 0;
  transform: translateY(16px) rotate(var(--land, -1deg));
}
.js .step, .js .game-card, .js .community-card,
.js .faq-item, .js .facts li, .js .game-featured {
  transition: opacity 0.34s ease, transform 0.42s cubic-bezier(0.2, 1.35, 0.4, 1);
}
/* Alternating tilt, so a row of them does not land in lockstep. */
.js .step:nth-child(even), .js .game-card:nth-child(even),
.js .community-card:nth-child(even), .js .facts li:nth-child(even) { --land: 1.4deg; }
/* Hover already lifts these, and the transition above would fight it. */
.game-card.in, .community-card.in, .step.in, .game-featured.in { transition: transform 0.16s ease, box-shadow 0.16s ease; }

/* The roadmap pours: the line between one stop and the next fills with
   beer as you reach it, top to bottom, instead of sitting there grey. */
.road-item { --pour: rgba(255, 183, 3, 0.55); }
.road-item.is-done { --pour: rgba(53, 224, 138, 0.5); }
.road-item.is-next, .road-item.is-goal { --pour: rgba(61, 220, 255, 0.5); }
.road-item::after {
  content: "";
  position: absolute;
  left: var(--spine, 21px);
  top: 22px;
  bottom: -22px;
  width: 2px;
  background: var(--pour);
  transform-origin: 50% 0;
  transform: scaleY(0);
  pointer-events: none;
}
.road-item:last-child::after { display: none; }
.js .road-item.in::after { transform: scaleY(1); transition: transform 0.75s cubic-bezier(0.3, 0.7, 0.3, 1) 0.15s; }
.road-item:not(.in)::after { transform: scaleY(0); }

/* An outline button fills like a glass when you point at it. */
.btn-outline { position: relative; overflow: hidden; isolation: isolate; }
.btn-outline::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* A head of foam rides the top of the pour, so it reads as beer coming
     up the glass rather than a colour swap. */
  background: linear-gradient(180deg, #fff3d2 0 5px, #ffd34d 5px, var(--amber) 55%, #ff9a12 100%);
  transform: translateY(101%);
  /* Poured, not snapped: it leans in, runs, and settles at the top. */
  transition: transform 0.55s cubic-bezier(0.42, 0, 0.58, 1);
}
.btn-outline:hover::before, .btn-outline:focus-visible::before,
.btn-outline:active::before, .btn-outline.is-pouring::before { transform: translateY(0); }
/* Black the moment the beer starts coming up, not over the same quarter
   second it takes to fill: at the same speed the words spend the whole
   pour half way between white and black, which is legible against
   neither. :active is in there for a finger, which has no hover to give
   and would otherwise hold a filled button with pale words on it. */
.btn-outline:hover, .btn-outline:focus-visible, .btn-outline:active,
.btn-outline.is-pouring {
  color: #1a1200;
  transition-duration: 0.28s, 0.28s, 0.28s, 0.1s;
}

/* An answer drops open rather than appearing. */
.faq-item[open] > p { animation: faq-drop 0.26s cubic-bezier(0.2, 0.9, 0.3, 1); }
@keyframes faq-drop {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
.faq-item summary::after { transition: transform 0.22s cubic-bezier(0.2, 1.4, 0.4, 1), background 0.2s ease, color 0.2s ease; }

/* The stickers are stuck on paper, and paper moves. Each on its own
   clock so they never sway together. */
.js .sticker { animation: sticker-sway 7s ease-in-out infinite alternate; }
.js .sticker-shades { animation-duration: 8.5s; animation-delay: -2s; }
.js .sticker-another { animation-duration: 6.2s; animation-delay: -4s; }
@keyframes sticker-sway {
  from { transform: rotate(-1.2deg) translateY(0); }
  to { transform: rotate(1.4deg) translateY(-5px); }
}

/* The hero art lands once, on load, and settles. */
.js .hero-art { animation: art-land 0.75s cubic-bezier(0.2, 1.1, 0.35, 1) both; }
@keyframes art-land {
  0% { opacity: 0; transform: translateY(-26px) scale(1.04); }
  62% { opacity: 1; transform: translateY(0) scale(1); }
  78% { transform: translateY(0) scaleX(1.03) scaleY(0.97); }
  100% { transform: none; }
}

/* A number that has finished counting lands on the table. */
.stat-num.is-landed { animation: num-slam 0.36s cubic-bezier(0.2, 1.5, 0.4, 1); }
@keyframes num-slam {
  0% { transform: scale(1.16); }
  100% { transform: scale(1); }
}

/* The foam in the supply bar keeps settling while you are looking at it. */
.js .supply.in .supply-drop i { animation: foam-drift 9s linear infinite; }
@keyframes foam-drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 0 -40px, 0 -52px, 0 -34px, 0 -46px; }
}

/* His face tips when you go for the logo. */
.brand-avatar { transition: transform 0.22s cubic-bezier(0.2, 1.5, 0.4, 1); }
.brand:hover .brand-avatar { transform: rotate(-9deg) scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  .js .step:not(.in), .js .game-card:not(.in), .js .community-card:not(.in),
  .js .faq-item:not(.in), .js .facts li:not(.in), .js .game-featured:not(.in) {
    opacity: 1;
    transform: none;
  }
  .js .road-item.in::after, .road-item:not(.in)::after { transform: scaleY(1); transition: none; }
  .btn-outline::before { transition: none; }
  .faq-item[open] > p { animation: none; }
  .js .sticker { animation: none; }
  .js .hero-art { animation: none; }
  .stat-num.is-landed { animation: none; }
  .js .supply.in .supply-drop i { animation: none; }
  .brand-avatar { transition: none; }
}

/* ---- Depth, redone ----
   The page used to put a 3px black keyline and a solid 6px offset shadow
   on nearly everything. One or two things wearing that reads as stuck on
   and deliberate; everything wearing it reads as a template, and it
   flattens the hierarchy because the loudest treatment is also the most
   common one.

   So the hard keyline is kept for the few things that really are physical
   objects on the page -- the photo taped in the story, the marker pen,
   the stickers -- and everything else is lit instead: a hairline edge, a
   gentle gradient down the face, a highlight along the top where the
   light lands, and a shadow that has an ambient part and a contact part
   the way a real one does. */
:root {
  --edge: rgba(255, 255, 255, 0.09);
  --edge-lit: rgba(255, 255, 255, 0.14);
  --face: linear-gradient(180deg, #1b1823 0%, #141219 100%);
  /* Sits on the page. */
  --lift-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 24px -16px rgba(0, 0, 0, 0.95);
  /* Picked up off it. */
  --lift-2: 0 2px 4px rgba(0, 0, 0, 0.55), 0 22px 40px -22px rgba(0, 0, 0, 1);
  /* The line of light along the top edge, inside the border. */
  --top-lit: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ---- Buttons ----
   Sized to what they were, so nothing on the page moves. */
.btn {
  border: 1px solid transparent;
  padding: 16px 28px;
  border-radius: 999px;
  letter-spacing: 0.2px;
  box-shadow: none;
  transition-property: transform, box-shadow, border-color, color;
  transition-duration: 0.16s, 0.18s, 0.18s, 0.18s;
  transition-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1.3), ease, ease, ease;
}
.btn-lg { padding: 18px 34px; font-size: 17px; }
.btn-small { padding: 12px 20px; font-size: 13px; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); transition-duration: 0.06s; }

/* The amber one is the loudest thing on the page and is allowed to be:
   a face with light falling down it, a rim of its own colour, and a warm
   throw underneath rather than a black block. */
.btn-primary {
  background: linear-gradient(180deg, #ffd44e 0%, var(--amber) 46%, #f39200 100%);
  color: #1a1200;
  border-color: rgba(120, 72, 0, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(120, 72, 0, 0.25),
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 12px 26px -14px rgba(255, 150, 3, 0.7);
}
.btn-primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(120, 72, 0, 0.25),
    0 2px 5px rgba(0, 0, 0, 0.5),
    0 20px 34px -14px rgba(255, 150, 3, 0.8);
}
.btn-primary:active {
  box-shadow:
    inset 0 2px 5px rgba(120, 72, 0, 0.45),
    0 1px 2px rgba(0, 0, 0, 0.5);
}

/* The quiet one keeps the beer filling it up on hover. */
.btn-outline {
  background: linear-gradient(180deg, #211e2a 0%, #16141c 100%);
  color: var(--text);
  border-color: var(--edge-lit);
  box-shadow: var(--top-lit), var(--lift-1);
}
.btn-outline:hover, .btn-outline:focus-visible {
  border-color: rgba(255, 183, 3, 0.55);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), 0 20px 34px -16px rgba(255, 150, 3, 0.45);
}
.btn-outline:active { box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5); }

.btn-tiny {
  border: 1px solid rgba(0, 40, 48, 0.55);
  padding: 9px 15px;
  background: linear-gradient(180deg, #7ce9ff 0%, var(--blue) 50%, #17bfe4 100%);
  color: #001318;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 10px 20px -12px rgba(61, 220, 255, 0.6);
}
.btn-tiny:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 16px 26px -12px rgba(61, 220, 255, 0.7);
}

/* ---- Panels ----
   Everything that holds content gets the same lit face, so the page reads
   as one set of objects under one light. */
.game-card, .community-card, .step, .faq-item, .road-body,
.coin, .topbags, .regimen-inner, .lb-panel {
  background: var(--face);
  border: 1px solid var(--edge);
  box-shadow: var(--top-lit), var(--lift-1);
}
.game-card, .community-card, .step, .topbags, .regimen-inner { border-radius: 20px; }
.faq-item, .road-body { border-radius: 16px; }

/* The two that go somewhere are the two that lift. */
.game-card:hover, .community-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 183, 3, 0.45);
  box-shadow: var(--top-lit), var(--lift-2), 0 0 0 1px rgba(255, 183, 3, 0.12);
}
.step:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 183, 3, 0.35);
  box-shadow: var(--top-lit), var(--lift-2);
}
.faq-item[open], .faq-item:hover { border-color: rgba(255, 183, 3, 0.4); }

/* The featured game and the stop at the end of the roadmap are the two
   places amber is structural, so they keep it, lit rather than blocked. */
.game-featured {
  background: var(--face);
  border: 1px solid rgba(255, 183, 3, 0.5);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 210, 120, 0.16),
    0 2px 5px rgba(0, 0, 0, 0.5),
    0 26px 46px -26px rgba(255, 150, 3, 0.45);
}
.game-featured:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 183, 3, 0.75);
  box-shadow:
    inset 0 1px 0 rgba(255, 210, 120, 0.2),
    0 3px 7px rgba(0, 0, 0, 0.5),
    0 34px 56px -26px rgba(255, 150, 3, 0.6);
}
.road-item.is-goal .road-body {
  border: 1px solid rgba(255, 183, 3, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 210, 120, 0.14),
    0 20px 38px -24px rgba(255, 150, 3, 0.5);
}

/* The bar's menu button, and the bar that follows you up a phone. */
.nav-toggle {
  background: linear-gradient(180deg, #211e2a 0%, #16141c 100%);
  border: 1px solid var(--edge-lit);
  border-radius: 12px;
  box-shadow: var(--top-lit), var(--lift-1);
}
.buybar {
  border-top: 1px solid var(--edge);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.65);
}

/* The glass of supply. A dark rim still helps it read as glass, but a
   hairline of one, with the light on the beer instead of a black slab
   thrown behind it. */
.supply-bar {
  border: 2px solid rgba(8, 6, 11, 0.85);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -6px 12px -6px rgba(120, 72, 0, 0.5),
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 16px 30px -18px rgba(255, 150, 3, 0.45);
}
.supply-drop, .supply-next { border-right-width: 2px; border-right-color: rgba(8, 6, 11, 0.8); }
.supply-key i { border: 1px solid rgba(8, 6, 11, 0.7); }

/* The hero pills are stickers, so they keep their tilt, but the block of
   black under them goes the way of the rest. */
.stat-tag {
  border-width: 1px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 14px 26px -16px rgba(0, 0, 0, 1);
}
.stat-tag:hover {
  transform: rotate(0deg) translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 2px 5px rgba(0, 0, 0, 0.5),
    0 22px 36px -18px rgba(0, 0, 0, 1);
}

/* The small round and square things get the same light as everything
   else, so nothing is left looking flat next to a lit panel. */
.regimen-can.is-down {
  background: linear-gradient(180deg, #ffd44e 0%, var(--amber) 55%, #f39200 100%);
  border-color: rgba(120, 72, 0, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 4px rgba(120, 72, 0, 0.3);
}
.step-num {
  background: linear-gradient(180deg, #ffd44e 0%, var(--amber) 55%, #f39200 100%);
  border: 1px solid rgba(120, 72, 0, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 10px 20px -12px rgba(255, 150, 3, 0.6);
}
.road-dot {
  border-width: 1px;
  background: var(--face);
  box-shadow: var(--top-lit), 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 20px -14px rgba(0, 0, 0, 1);
}
.road-item.is-goal .road-dot {
  background: linear-gradient(180deg, #ffd44e 0%, var(--amber) 55%, #f39200 100%);
  border-color: rgba(120, 72, 0, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 12px 24px -12px rgba(255, 150, 3, 0.7);
}
.road-item.is-goal .road-status {
  background: linear-gradient(180deg, #ffd44e 0%, var(--amber) 100%);
  border-color: rgba(120, 72, 0, 0.5);
}
.community-icon, .fact-icon {
  background: radial-gradient(120% 120% at 50% 0%, #201d28 0%, #121016 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 6px 14px -10px rgba(0, 0, 0, 1);
}

/* Between the phone menu and a wide screen the bar has just enough room
   for everything and no more: the name used to be squeezed until its
   letters ran into the first link. It keeps its width now, and the space
   comes out of the gaps and the side padding instead. */
@media (min-width: 1041px) and (max-width: 1360px) {
  .nav { padding-left: 3vw; padding-right: 3vw; gap: 12px; }
  .brand { flex: none; font-size: 18px; }
  .brand-avatar { width: 32px; height: 32px; }
  .nav-links { gap: 18px; font-size: 13.5px; }
}

/* Kick's own mark on the end of the live pill in the hero, so what the
   pill is a link to is obvious before the words are read. */
.live-mark {
  width: 26px;
  height: 26px;
  object-fit: contain;
  margin-left: 2px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
}
@media (max-width: 560px) { .live-mark { width: 24px; height: 24px; } }

/* ---- Room to breathe ----
   The beer ran straight into the card under it and the card's own edges
   were tight to its contents. The wave keeps riding up into the hero,
   because that overlap is the point of it, but it lands with space under
   it now, and the cards it lands between are not packed to their walls. */
.wave-wrap { margin-bottom: 30px; padding: 2.2vw 0; }
.regimen { padding: 22px 16px 46px; }
.regimen-inner { padding: 22px 24px 24px; }
.regimen-cans { margin-bottom: 4px; }
.regimen-line { margin-bottom: 4px; }
.ca-warning { margin-top: 6px; }
.coin { padding: 18px; gap: 13px; }
@media (max-width: 640px) {
  .wave-wrap { margin-bottom: 22px; }
  .regimen { padding: 16px 14px 36px; }
  .regimen-inner { padding: 18px 16px 20px; }
  .coin { padding: 15px; gap: 12px; }
}

/* ---- Kick, as a neon sign ----
   The mark is burned out to white, the way the middle of a lit tube
   looks, with its own green around it: a tight layer that reads as the
   glass and a wider one for the spill. Kept close in, so it lights the
   mark rather than the whole pill. */
.live-mark, .community-mark {
  filter:
    brightness(0) invert(1)
    drop-shadow(0 0 1.5px rgba(120, 255, 70, 0.7))
    drop-shadow(0 0 5px rgba(81, 251, 24, 0.45))
    drop-shadow(0 0 11px rgba(81, 251, 24, 0.2));
  transition: filter 0.22s ease, transform 0.22s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.stat-tag-live:hover .live-mark, .community-card:hover .community-mark {
  transform: scale(1.06);
  filter:
    brightness(0) invert(1)
    drop-shadow(0 0 2px rgba(140, 255, 95, 0.85))
    drop-shadow(0 0 7px rgba(81, 251, 24, 0.6))
    drop-shadow(0 0 16px rgba(81, 251, 24, 0.3));
}
/* Instagram gets the same tube, in its own colours: white in the middle,
   pink close in, and the purple and orange of the gradient spilling out
   behind it. */
.ig-mark {
  color: #fff;
  filter:
    drop-shadow(0 0 1.5px rgba(255, 128, 181, 0.75))
    drop-shadow(0 0 5px rgba(225, 48, 108, 0.5))
    drop-shadow(0 0 11px rgba(147, 58, 185, 0.26));
  transition: filter 0.22s ease, transform 0.22s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.community-card:hover .ig-mark, .community-card:focus-visible .ig-mark {
  transform: scale(1.06);
  filter:
    drop-shadow(0 0 2px rgba(255, 160, 200, 0.9))
    drop-shadow(0 0 7px rgba(225, 48, 108, 0.65))
    drop-shadow(0 0 16px rgba(147, 58, 185, 0.38))
    drop-shadow(0 0 22px rgba(247, 119, 55, 0.18));
}

/* While he is actually on, the tube breathes a little. */
.js .stat-tag-live.is-on .live-mark { animation: kick-neon 2.6s ease-in-out infinite alternate; }
@keyframes kick-neon {
  from {
    filter:
      brightness(0) invert(1)
      drop-shadow(0 0 1.5px rgba(120, 255, 70, 0.55))
      drop-shadow(0 0 4px rgba(81, 251, 24, 0.3))
      drop-shadow(0 0 9px rgba(81, 251, 24, 0.14));
  }
  to {
    filter:
      brightness(0) invert(1)
      drop-shadow(0 0 2px rgba(140, 255, 95, 0.85))
      drop-shadow(0 0 7px rgba(81, 251, 24, 0.6))
      drop-shadow(0 0 17px rgba(81, 251, 24, 0.3));
  }
}
@media (prefers-reduced-motion: reduce) {
  .live-mark, .community-mark, .ig-mark { transition: none; }
  .js .stat-tag-live.is-on .live-mark { animation: none; }
}

/* ---- The red glow behind the top of the page ----
   It used to be a blurred circle inside the hero, and the hero clips what
   runs past its edge, so it stopped dead in a straight line right where
   the beer starts. It sits on its own layer now, outside anything that
   clips, and fades out on its own terms instead. */
.page-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: min(820px, 96vw);
  height: 2100px;
  z-index: -1;
  pointer-events: none;
  /* Sat over the bottom corner of the hero, where the old circle was,
     and carries on down through the beer before it runs out. The stops
     end on the same colour at zero alpha rather than on transparent, so
     it does not wash grey on the way out. */
  background:
    radial-gradient(430px 370px at 86% 1330px, rgba(255, 59, 59, 0.32), rgba(255, 59, 59, 0) 70%),
    radial-gradient(760px 620px at 94% 1460px, rgba(255, 59, 59, 0.15), rgba(255, 59, 59, 0) 74%);
}
@media (max-width: 640px) {
  .page-glow {
    background:
      radial-gradient(330px 320px at 82% 1290px, rgba(255, 59, 59, 0.34), rgba(255, 59, 59, 0) 70%),
      radial-gradient(560px 520px at 92% 1420px, rgba(255, 59, 59, 0.16), rgba(255, 59, 59, 0) 74%);
  }
}

/* The warning about fake addresses now lives in the card, right under
   the address it is about, instead of floating loose underneath it. */
.ca-warning {
  max-width: none;
  margin: -1px 4px 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.ca-warning .icon { vertical-align: -2px; margin-right: 2px; }

/* ---- Taking yourself off the board ----
   Sits under the list, quiet until it is needed, and asks before it does
   anything. Hidden entirely for somebody who is not on the board. */
.lb-leave {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}
.lb-leave[hidden] { display: none; }
.lb-leave-say {
  font-size: 12.5px;
  color: var(--muted);
}
.lb-leave-btn, .lb-note-do {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* The mark sits a size under the words rather than level with them. */
.lb-btn-mark { width: 1.05em; height: 1.05em; flex: none; }
.lb-leave-btn {
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 13px;
  border-radius: 999px;
  cursor: pointer;
  background: linear-gradient(180deg, #211e2a 0%, #16141c 100%);
  border: 1px solid var(--edge-lit);
  color: var(--muted);
  box-shadow: var(--top-lit), 0 1px 2px rgba(0, 0, 0, 0.5);
  transition: color 0.16s ease, border-color 0.16s ease, transform 0.14s ease;
}
.lb-leave-btn:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.24); transform: translateY(-1px); }
.lb-leave-btn:active { transform: translateY(1px); }
.lb-leave-btn:disabled { opacity: 0.6; cursor: default; transform: none; }
/* The one that actually does it wears the warning colour. */
.lb-leave-btn.is-go {
  color: #ffd7d7;
  border-color: rgba(255, 59, 59, 0.55);
  background: linear-gradient(180deg, #2e1922 0%, #1a1117 100%);
}
.lb-leave-btn.is-go:hover { color: #fff; border-color: var(--red); }
@media (prefers-reduced-motion: reduce) {
  .lb-leave-btn { transition: none; }
}

/* ---- The rest of the buttons ----
   The amber and outline ones have had their moment for a while; these had
   a colour that changed and nothing else. Same language: they take a
   press, they ease rather than snap, and the loud one catches the light. */

/* The amber button catches a band of light across its face. On a mouse
   that happens when you point at it; a finger has no hover to give, so
   main.js puts the class on at the moment of the press instead. */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after {
  content: "";
  position: absolute;
  inset: -50% -70%;
  z-index: -1;
  background: linear-gradient(105deg,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 62%);
  transform: translateX(-120%);
  transition: transform 0.62s cubic-bezier(0.42, 0, 0.58, 1);
  pointer-events: none;
}
.btn-primary:hover::after, .btn-primary:focus-visible::after { transform: translateX(120%); }
.btn-primary.is-shine::after { animation: btn-shine 0.62s cubic-bezier(0.42, 0, 0.58, 1); }
@keyframes btn-shine {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}
.btn-tiny { position: relative; overflow: hidden; isolation: isolate; }
.btn-tiny::after {
  content: "";
  position: absolute;
  inset: -50% -70%;
  z-index: -1;
  background: linear-gradient(105deg,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 62%);
  transform: translateX(-120%);
  transition: transform 0.5s cubic-bezier(0.42, 0, 0.58, 1);
  pointer-events: none;
}
.btn-tiny:hover::after, .btn-tiny:focus-visible::after { transform: translateX(120%); }
.btn-tiny.is-shine::after { animation: btn-shine 0.5s cubic-bezier(0.42, 0, 0.58, 1); }

/* Show the chart: the amber wash comes up from the bottom, a small
   cousin of the pour, and the dashes close into a solid line. */
.chart-toggle {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.24s ease, color 0.24s ease, transform 0.14s ease;
}
.chart-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 183, 3, 0.12);
  transform: translateY(101%);
  transition: transform 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}
.chart-toggle:hover::before, .chart-toggle:focus-visible::before, .chart-toggle:active::before {
  transform: translateY(0);
}
.chart-toggle:hover, .chart-toggle:focus-visible { background: transparent; border-style: solid; }
.chart-toggle:active { transform: translateY(1px); }
.chart-toggle .icon { transition: transform 0.24s cubic-bezier(0.2, 1.4, 0.4, 1); }
.chart-toggle:hover .icon { transform: translateY(-2px) rotate(-6deg); }

/* The menu button, the wallet list and the small print under it. */
.nav-toggle { transition: border-color 0.18s ease, transform 0.14s ease; }
.nav-toggle:hover { border-color: rgba(255, 183, 3, 0.45); }
.nav-toggle:active { transform: scale(0.94); }
.wallet-picker button {
  position: relative;
  transition: background 0.18s ease, color 0.18s ease, padding-left 0.18s ease;
}
/* A thin amber marker slides in on the left, the way the bar's links
   underline themselves. */
.wallet-picker button::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 2px;
  height: 0;
  border-radius: 2px;
  background: var(--amber);
  transform: translateY(-50%);
  transition: height 0.2s cubic-bezier(0.2, 1.3, 0.4, 1);
}
.wallet-picker button:hover::before, .wallet-picker button:focus-visible::before { height: 60%; }
.wallet-picker button:hover, .wallet-picker button:focus-visible { padding-left: 16px; }
.wallet-picker button:active { transform: scale(0.98); }
.wallet-disconnect { transition: color 0.18s ease, text-underline-offset 0.18s ease; text-underline-offset: 2px; }
.wallet-disconnect:hover { text-underline-offset: 4px; }

/* A question opens with a press behind it, and the plus leans over on
   the way to becoming a cross. */
.faq-item summary { transition: color 0.18s ease, padding-left 0.2s ease; }
.faq-item summary:hover { color: var(--amber); padding-left: 4px; }
.faq-item summary:active { color: var(--amber-2); }

@media (prefers-reduced-motion: reduce) {
  .btn-primary::after, .btn-tiny::after, .chart-toggle::before,
  .wallet-picker button::before { transition: none; }
  .btn-primary.is-shine::after, .btn-tiny.is-shine::after { animation: none; }
  .chart-toggle, .chart-toggle .icon, .nav-toggle, .wallet-picker button,
  .wallet-disconnect, .faq-item summary { transition: none; }
}

/* ---- The cards in the community fill up too ----
   They are links out, the same as the buttons, so they behave the same
   way: the beer comes up, everything on them goes dark against it, and
   the tab opens once it is full. */
.community-card { position: relative; overflow: hidden; isolation: isolate; }
.community-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, #fff3d2 0 5px, #ffd34d 5px, var(--amber) 55%, #ff9a12 100%);
  transform: translateY(101%);
  transition: transform 0.55s cubic-bezier(0.42, 0, 0.58, 1);
  pointer-events: none;
}
.community-card:hover::after, .community-card:focus-visible::after,
.community-card.is-pouring::after { transform: translateY(0); }
.community-card:hover, .community-card:focus-visible, .community-card.is-pouring {
  color: #1a1200;
  transition-duration: 0.18s, 0.18s, 0.1s;
}
.community-card:hover h3, .community-card:focus-visible h3, .community-card.is-pouring h3,
.community-card:hover p, .community-card:focus-visible p, .community-card.is-pouring p,
.community-card:hover .community-count, .community-card:focus-visible .community-count,
.community-card.is-pouring .community-count {
  color: #1a1200;
  transition: color 0.1s ease;
}
/* The disc behind the mark turns to foam so it still reads on the beer. */
.community-card .community-icon { transition: background 0.18s ease, box-shadow 0.18s ease; }
.community-card:hover .community-icon, .community-card:focus-visible .community-icon,
.community-card.is-pouring .community-icon {
  background: rgba(26, 18, 0, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
@media (prefers-reduced-motion: reduce) {
  .community-card::after { transition: none; }
  .community-card .community-icon { transition: none; }
}

/* Why a score did not go up, said out loud under the board rather than
   left for somebody to work out. */
.lb-note {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #ffd7d7;
  text-align: center;
}
.lb-note[hidden] { display: none; }
/* The one thing a note can offer to do about itself. */
.lb-note-do {
  display: inline-block;
  margin-left: 4px;
  padding: 3px 10px;
  border: 1px solid rgba(255, 183, 3, 0.55);
  border-radius: 999px;
  background: rgba(255, 183, 3, 0.12);
  color: var(--amber);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.lb-note-do:hover { background: rgba(255, 183, 3, 0.22); }
.lb-note-do[disabled] { opacity: 0.6; cursor: wait; }

/* ---- The menu on a phone ----
   It was six lines of type between hairlines, running the full width of
   the screen with nothing on them. It is a stack of rows now, each one a
   thing you can touch rather than a line of a list: a mark for where it
   goes, the name, and an arrow. The one you are on wears the amber. */
@media (max-width: 1040px) {
  .nav-links {
    gap: 7px;
    padding: 10px 4vw 16px;
    background: linear-gradient(180deg, #17151e 0%, #0d0c11 100%);
    border-bottom: 1px solid var(--edge);
    box-shadow: 0 26px 44px -22px rgba(0, 0, 0, 1);
  }
  .nav-links a {
    justify-content: flex-start;
    gap: 13px;
    padding: 13px 15px;
    border-top: 0;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.022);
    font-size: 17px;
    letter-spacing: 0.9px;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.12s ease;
  }
  .nav-links a:active {
    background: rgba(255, 255, 255, 0.06);
    transform: scale(0.985);
  }
  /* The mark for where the row goes, drawn by main.js. */
  .nav-ico {
    width: 19px;
    height: 19px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--amber);
    opacity: 0.85;
  }
  /* The dot at the end becomes an arrow, because a row that goes
     somewhere should look like it goes somewhere. */
  .nav-links a::after {
    content: "";
    /* The wide bar draws this as an underline pinned under the link, so
       it has to be let go of here or the arrow lands under the row
       instead of in it. */
    position: static;
    margin-left: auto;
    width: 7px;
    height: 7px;
    border: 2px solid rgba(255, 255, 255, 0.28);
    border-left: 0;
    border-bottom: 0;
    border-radius: 1px;
    background: none;
    box-shadow: none;
    transform: rotate(45deg);
    transition: border-color 0.16s ease, transform 0.16s ease;
  }
  .nav-links a:active::after { transform: rotate(45deg) translate(1px, -1px); }
  /* Where you are: amber through the whole row, and a rail down its edge
     rather than a dot at the end of it. */
  .nav-links a.is-here {
    color: var(--amber);
    background: rgba(255, 183, 3, 0.09);
    border-color: rgba(255, 183, 3, 0.3);
    box-shadow: inset 3px 0 0 var(--amber);
  }
  .nav-links a.is-here::after { border-color: rgba(255, 183, 3, 0.7); }
  .nav-links a.is-here .nav-ico { opacity: 1; }
  /* Play is a game rather than a part of the page, so it keeps its own
     colour and sits apart from the list above it. */
  .nav-links .nav-play {
    margin-top: 3px;
    color: var(--amber);
    border-color: rgba(255, 183, 3, 0.28);
    background: rgba(255, 183, 3, 0.06);
  }
  .nav-links .nav-play-icon { width: 15px; height: 15px; margin-left: 2px; }
  .nav-links .nav-menu-buy {
    margin: 11px 0 0;
    padding: 15px 22px;
    border-radius: 999px;
    font-size: 16px;
    justify-content: center;
    color: #1a1200;
    border-color: rgba(120, 72, 0, 0.55);
    background: linear-gradient(180deg, #ffd44e 0%, var(--amber) 46%, #f39200 100%);
  }
  .nav-links .nav-menu-buy::after { display: none; }
  /* Each row lands a beat after the one above it, coming up rather than
     in from the side: the sheet itself is already coming down. */
  @keyframes nav-row {
    from { opacity: 0; transform: translateY(-7px); }
    to { opacity: 1; transform: none; }
  }
}
@media (max-width: 1040px) and (prefers-reduced-motion: reduce) {
  .nav-links a, .nav-links a::after { transition: none; }
}
/* The marks belong to the sheet; the wide bar is text on its own. */
@media (min-width: 1041px) { .nav-ico { display: none; } }

/* ---- The roadmap, read rather than looked at ----
   The stops arrive as you reach them already. What follows is what the
   section does while you are in it: the beer runs down the spine with
   your reading, a stop answers when you point at it, and the rest of the
   list stands back while you do. */

/* The level in the spine is set by the script, from how far down the
   page you have got. The class stays as the fallback: if the script
   never runs, an arrived stop simply has its line full. */
.js .road-item.in::after {
  transform: scaleY(var(--fill, 1));
  transition: transform 0.12s linear;
}
/* Pointing at a stop. The card comes forward and takes that stage's own
   colour, the dot grows into its ring, and what it says lifts a touch. */
.road-body { transition: transform 0.2s cubic-bezier(0.2, 1.2, 0.4, 1), border-color 0.2s ease, box-shadow 0.2s ease; }
.road-dot { transition: transform 0.24s cubic-bezier(0.2, 1.5, 0.4, 1), box-shadow 0.24s ease, border-color 0.2s ease; }
.road-status { transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease; }
.road-item:hover .road-body {
  transform: translateX(4px);
  border-color: var(--pour);
  box-shadow: var(--top-lit), var(--lift-2), 0 0 0 1px var(--pour);
}
.road-item:hover .road-dot {
  transform: scale(1.12);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.04), 0 0 18px -2px var(--pour);
  border-color: var(--pour);
}
.road-item:hover .road-status { transform: translateY(-1px); }
.road-item:hover .road-head h3 { color: var(--text); }
/* And the rest of the list stands back, so the one being read is the one
   being looked at. Only where there is a pointer to do the asking. */
@media (hover: hover) {
  .road-item { transition: opacity 0.22s ease; }
  .roadmap:hover .road-item:not(:hover) { opacity: 0.55; }
}
/* On a phone there is no pointing, so a press does the same job. */
.road-item:active .road-body { transform: translateX(3px); border-color: var(--pour); }
.road-item:active .road-dot { transform: scale(1.1); }

/* The stop that is running now breathes rather than just sitting there
   with a ring around it: the icon in its dot rocks, slowly. */
.js .road-item.is-now .road-dot .icon { animation: road-rock 3.2s ease-in-out infinite; }
@keyframes road-rock {
  0%, 72%, 100% { transform: rotate(0deg); }
  78% { transform: rotate(-11deg); }
  84% { transform: rotate(9deg); }
  90% { transform: rotate(-4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .js .road-item.in::after { transform: scaleY(1); transition: none; }
  .road-body, .road-dot, .road-status, .road-item { transition: none; }
  .roadmap:hover .road-item:not(:hover) { opacity: 1; }
  .js .road-item.is-now .road-dot .icon { animation: none; }
}