/* Lightning-L2 shared stylesheet - extracted from the original single-page
   index.html (2026-08-23 renovation) so every page (index/shop/economy/
   connect) shares one source of truth instead of duplicated <style>
   blocks drifting out of sync. */

/* ---------------------------------------------------------------
   Tokens - dark fantasy-MMO identity is the committed default now
   (matches genre convention: L2 fan/private-server sites are almost
   universally dark, no light-mode toggle). Bare :root carries it.
   [data-theme="light"] keeps the original warm-cream palette as an
   explicit opt-out for anyone who wants it, never the default.
----------------------------------------------------------------- */
:root{
  --bg:#0D0A07;
  --bg-grid: rgba(241,232,216,0.045);
  --surface:#181310;
  --surface-2:#211A14;
  --ink:#F1E8D8;
  --ink-dim:#A99A83;
  --line: rgba(241,232,216,0.14);
  --line-soft: rgba(241,232,216,0.08);
  --gold:#EFAE30;
  --gold-strong:#FFC85C;
  --gold-tint: rgba(239,174,48,0.14);
  --gold-on: #181310;
  --bolt:#5FD4FF;
  --bolt-tint: rgba(95,212,255,0.14);
  --ember:#FF6A2E;
  --ember-tint: rgba(255,106,46,0.13);
  --shadow: 0 1px 0 rgba(0,0,0,0.4);
  /* Cool secondary for fantasy/magic elements (index-redesign, 2026-09-03) -
     a deep petrol teal, not the existing --bolt cyan (which reads as sci-fi
     HUD rather than dark-fantasy magic). Used on the currency-split and
     referral sections of the homepage only. */
  --petrol:#1B4B4A;
  --petrol-bright:#2F8C87;
  --petrol-tint: rgba(47,140,135,0.14);
}

:root[data-theme="light"]{
  --bg:#E6E0D2;
  --bg-grid: rgba(33,29,22,0.05);
  --surface:#F4F0E6;
  --surface-2:#DCD5C3;
  --ink:#211D16;
  --ink-dim:#6B6252;
  --line: rgba(33,29,22,0.16);
  --line-soft: rgba(33,29,22,0.09);
  --gold:#8A5D19;
  --gold-strong:#6E4A12;
  --gold-tint: rgba(138,93,25,0.12);
  --gold-on: #F4F0E6;
  --bolt:#0E6E93;
  --bolt-tint: rgba(14,110,147,0.12);
  --ember:#B34612;
  --ember-tint: rgba(179,70,18,0.10);
  --shadow: 0 1px 0 rgba(33,29,22,0.06);
  --petrol:#1B4B4A;
  --petrol-bright:#0E6E93;
  --petrol-tint: rgba(14,110,147,0.10);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%),
    var(--bg);
  color:var(--ink);
  font-family:"Libre Franklin", -apple-system, "Segoe UI", sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block; }

.mono{ font-family:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; }
.num{ font-variant-numeric: tabular-nums; }

.eyebrow{
  font-family:"IBM Plex Mono", monospace;
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:600;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:"◆"; font-size:0.6em; opacity:0.75; }
.eyebrow::after{ content:""; flex:1; height:1px; max-width:120px; background:linear-gradient(90deg, color-mix(in srgb, var(--gold) 55%, transparent), transparent); }
h1,h2,h3{
  font-family:"Marcellus SC", Georgia, serif;
  font-weight:400;
  text-wrap:balance;
  margin:0;
}
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--bolt); outline-offset:3px; }

.wrap{ max-width:1100px; margin:0 auto; padding:0 28px; }
.prose{ max-width:65ch; }

/* ---------------- Top bar ---------------- */
.topbar{
  position:sticky; top:0; z-index:40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line-soft);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px;
  max-width:1100px; margin:0 auto;
}
.wordmark{
  font-family:"Marcellus SC", serif;
  font-size:1.05rem;
  letter-spacing:0.01em;
  display:flex; align-items:center; gap:8px;
  text-decoration:none;
  color:var(--ink);
}
.wordmark .bolt-glyph{ color:var(--gold); }
.navlinks{
  display:flex; gap:28px;
  font-family:"IBM Plex Mono", monospace;
  font-size:0.78rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.navlinks a{ text-decoration:none; color:var(--ink-dim); border-bottom:1px solid transparent; padding-bottom:2px; transition:color .15s, border-color .15s; white-space:nowrap; }
.navlinks a:hover{ color:var(--ink); border-color:var(--gold); }
.navlinks a.current{ color:var(--gold); border-color:var(--gold); }
.nav-group{ display:flex; align-items:center; gap:24px; }
.nav-toggle{
  display:none;
  align-items:center; justify-content:center;
  background:none;
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--ink);
  font-size:1.1rem;
  line-height:1;
  padding:6px 11px;
  cursor:pointer;
}
.nav-toggle:hover{ border-color:var(--gold); color:var(--gold); }
/* Lightning-L2: below 760px .navlinks used to just vanish with nothing to
   replace it (no hamburger, no drawer) - the entire primary nav became
   unreachable on mobile. Now it collapses into a toggleable dropdown
   instead, driven by shared/nav-toggle.js toggling the .open class. */
@media (max-width:760px){
  .nav-toggle{ display:inline-flex; }
  .navlinks{
    display:none;
    position:absolute;
    top:100%; left:0; right:0;
    flex-direction:column;
    gap:0;
    padding:6px 28px 14px;
    background:var(--surface);
    border-bottom:1px solid var(--line-soft);
    box-shadow:0 8px 16px rgba(0,0,0,0.25);
  }
  .navlinks.open{ display:flex; }
  .navlinks a{ padding:11px 0; border-bottom:1px solid var(--line-soft); }
  .navlinks a:last-child{ border-bottom:none; }
}
@media (max-width:480px){
  /* Below 760px .navlinks is already hidden, but the wordmark + Create
     Account + Discord + 4-button lang switcher still don't fit on one row
     at real phone widths - was overflowing the viewport and shoving the
     whole page left (found via a real device screenshot, not guessed).
     Let the topbar wrap to a second row instead of hiding anything. */
  .topbar-inner{ flex-wrap:wrap; row-gap:10px; }
  .nav-group{ flex-wrap:wrap; row-gap:10px; gap:10px 14px; }
}
.nav-cta{
  font-family:"IBM Plex Mono", monospace;
  font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; font-weight:600;
  color:var(--gold-on); background:var(--gold);
  border:1px solid var(--gold);
  border-radius:999px;
  padding:8px 18px;
  text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.nav-cta:hover{ transform:translateY(-1px); box-shadow:0 4px 0 0 color-mix(in srgb, var(--gold) 55%, transparent); }
#lang-switcher{ display:flex; gap:2px; }
.lang-btn{
  font-family:"IBM Plex Mono", monospace;
  font-size:0.7rem; letter-spacing:0.04em;
  background:none; border:1px solid transparent; cursor:pointer;
  color:var(--ink-dim); padding:4px 7px;
  transition:color .15s, border-color .15s;
}
.lang-btn:hover{ color:var(--ink); }
.lang-btn.active{ color:var(--gold); border-color:color-mix(in srgb, var(--gold) 45%, transparent); }

/* ---------------- Hero + page-header shared wallpaper (full-bleed key art behind headline) ---------------- */
.hero, .page-header{
  /* Wallpaper treatment, per direct instruction - the art is a background
     layer, text overlaid on top, ember particles drifting over the whole
     thing (#ember-canvas, z-index:5, unaffected by any of this). Same
     treatment on Home's .hero and the other three pages' .page-header,
     per direct instruction, so all four pages carry the same key art.
     Only the grid-pattern texture lives directly on this element's own
     background now - the photo moved to ::before (see below) so it can
     be masked independently. */
  position:relative;
  overflow:hidden;
  background-image:
    repeating-linear-gradient(90deg, var(--bg-grid) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, var(--bg-grid) 0 1px, transparent 1px 64px);
}
.hero::before, .page-header::before{
  /* The key art itself.
     Reverted from contain back to cover, per direct instruction: "the
     image must fit in the screen width." contain on a wide/landscape
     desktop box is height-bound for this very tall/portrait source
     (768x1376) - it rendered as a narrow vertical strip with the headline
     text spilling past its edges (reported live, twice, with screenshots -
     the mask-fade attempt in between softened the edges but didn't fix
     the actual complaint, which was about width, not edge hardness).
     There is no CSS value that satisfies both "fill the screen width" and
     "show the entire tall image with nothing cropped" at once for a
     portrait source on a landscape viewport - those two asks are in
     direct geometric tension (filling the width while preserving aspect
     ratio would make the hero many times taller than the viewport).
     "Fill the width" is the more recent, more specific instruction, so
     cover wins here: the image now always spans the full box width,
     cropping top and/or bottom as needed rather than the reverse.
     mask-image removed - it existed only to blend contain's hard
     rectangular edges into the background; cover has no such edges (the
     image reaches the box's own edges on all sides), so the mask would
     now just carve an unwanted vignette out of an otherwise full-bleed
     photo.
     background-position: 50% 35% (weighted toward the lightning-network/
     city band) was reported live as cropping the logo badge out
     entirely - the badge sits near the *top* of the source, and 35%
     pushed the visible window well below it. Moved to top-aligned (0%)
     instead of hand-tuning another guessed percentage: this guarantees
     the logo is never cropped from the top regardless of viewport aspect
     ratio (screen height varies a lot across real devices; a fixed
     percentage that happens to work on one screen can crop the logo
     again on another). Trade-off, accepted deliberately: more of the
     bottom of the image (the two characters) gets cropped on short/wide
     viewports instead - the logo is the brand-critical element to always
     protect, not the characters. */
  content:"";
  position:absolute; z-index:0;
  background-image: url('/assets/hero-character.jpg');
  background-size: cover;
  background-position: 50% 0%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.page-header::before{ inset:0; }
.hero::before{
  /* Lightning-L2: pinned to a fixed 90vh layer (matching .hero's
     original min-height) instead of inset:0, which stretched this layer
     to match .hero's own rendered height. That coupling is why raising
     .hero's padding-top to clear the crest badge (see .hero below) kept
     failing: this image is landscape (1376x768) inside a box far taller
     than wide, so background-size:cover here is height-bound - growing
     this layer rescaled/zoomed the image, dragging the badge down by
     roughly the same amount and cancelling out most of the added
     clearance. Fixing this layer's own height keeps the badge at a
     constant on-screen position no matter how much padding .hero carries
     above its text block. */
  top:0; left:0; right:0; height:90vh;
}
@media (max-width:760px){
  .hero::before, .page-header::before{
    /* background-attachment:fixed is a well-known source of mobile
       rendering bugs - most mobile browsers don't actually support the
       parallax effect it's meant to create (silently falling back to
       scroll-like behavior anyway), and on some it interacts badly with
       the dynamic address-bar-driven viewport resize that happens right
       after initial page load. Not worth the risk for an effect that
       barely renders on these viewports in the first place - default
       (scroll) attachment instead. */
    background-attachment: scroll;
  }
}

/* Lightning-L2: "Great Opening" hero art, added 2026-09-06 - swapped in by
   shared/block-countdown.js only once Bitcoin block 966,000 is actually
   mined (toggles html.great-opening-live; also mirrored to localStorage so
   repeat visits after launch don't flash the old art while the first poll
   is in flight). Applies to .hero AND .page-header since both already
   share one key-art treatment (see the shared comment above) - the whole
   site's art changes at once, not just the homepage.
   Unlike hero-character.jpg above (a single 768x1376 portrait source
   forced to `cover` every viewport - see that long comment on the exact
   width-vs-crop tension this caused), this is a real two-source swap: a
   proper 1376x768 landscape image for wide viewports and a 768x1376
   portrait image for narrow ones, so neither orientation is a compromise
   crop of the other. */
html.great-opening-live .hero::before,
html.great-opening-live .page-header::before{
  background-image: url('/assets/hero-great-opening-landscape.jpg');
}
@media (max-width:760px){
  html.great-opening-live .hero::before,
  html.great-opening-live .page-header::before{
    background-image: url('/assets/hero-great-opening-portrait.jpg');
  }
}
.hero{
  /* min-height raised to 90vh (from a flat 640px) specifically so a
     contain-fit image still renders at a real, substantial size instead
     of a small centered sliver - Home's hero is the main "wallpaper
     moment," so it gets the tallest treatment. */
  /* Top padding raised from 96px to clear the L2BH5 crest badge baked
     into the hero art (see .hero::before) - background-position:50% 0%
     pins that badge to the top of this box regardless of the box's own
     height, so the eyebrow/countdown-pill/H1 text block (bottom-aligned
     via flex below) was landing right on top of it. Confirmed by
     outlining the eyebrow and h1 in a live screenshot: the badge's
     "HS BITCOIN SERVER" subtitle ran directly under the eyebrow line.
     360px (not a smaller value) because this box is bottom-aligned
     (align-items:flex-end below): on a tall viewport, min-height:90vh
     alone can already exceed the text block's natural height, and any
     slack from that gets inserted above the text for free - so a modest
     padding bump was silently absorbed into that slack with zero visual
     effect until it exceeded the slack outright. 360px clears the badge
     (now pinned to a fixed 90vh layer, see .hero::before) even on tall
     screens where padding-top is the only thing driving the offset. */
  padding:360px 0 84px;
  min-height:90vh;
  display:flex;
  align-items:flex-end;
}
.page-header{
  /* Shorter than .hero - these are secondary pages people revisit for
     their actual content (shop table, economy chart, connect form), not
     a first-impression hero moment, so a full 90vh banner atop every one
     of them would push real content too far below the fold. Still tall
     enough to show a real, legible amount of the same key art. */
  padding:56px 0 48px;
  min-height:46vh;
  display:flex;
  align-items:flex-end;
}
.page-header .wrap{ position:relative; z-index:2; }
.hero::after, .page-header::after{
  /* Legibility scrim. Was scoped to just the bottom 20% (fully transparent
     above that), which left the .sub paragraph and eyebrow - both sitting
     higher than 20% up from the bottom in the actual flex-end-aligned
     text block - directly over bright sky/lightning with only text-shadow
     to carry them; reported unreadable in practice, confirmed by direct
     pixel sampling against real screenshots, not just eyeballing. Widened
     to a taller, smoother multi-stop falloff so the whole text block sits
     over scrim, not just the CTA row at the very bottom - still fully
     transparent well above that so the key art (logo/castle) stays clear.
     Text still carries its own text-shadow as a second line of defense. */
  content:"";
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(0deg,
      var(--bg) 0%,
      color-mix(in srgb, var(--bg) 96%, transparent) 25%,
      color-mix(in srgb, var(--bg) 85%, transparent) 45%,
      color-mix(in srgb, var(--bg) 50%, transparent) 65%,
      transparent 85%);
}
@media (max-width:640px){
  .hero::after, .page-header::after{
    /* Below 640px the same text content stacks into a taller column
       (less horizontal room means more line-wraps), so it occupies a
       bigger fraction of the hero's height from the bottom than on
       desktop - the desktop-tuned stops above left the top of the .sub
       paragraph under-covered here. Same shape, pushed further up. */
    background:
      linear-gradient(0deg,
        var(--bg) 0%,
        color-mix(in srgb, var(--bg) 97%, transparent) 35%,
        color-mix(in srgb, var(--bg) 90%, transparent) 55%,
        color-mix(in srgb, var(--bg) 60%, transparent) 75%,
        transparent 95%);
  }
}
.hero-inner{
  /* max-width back to the site's usual 1100px content width - it was
     narrowed to 720px specifically to match a contain-fit narrow image
     column, which no longer exists now that the art is cover-fit
     (full box width, see .hero::before). */
  position:relative; z-index:2; max-width:1100px; margin:0 auto; padding:0 28px; width:100%;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.hero .eyebrow{ justify-content:center; text-shadow: 0 1px 12px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.85); }
.hero .eyebrow::after{ display:none; }
.hero .hero-cta{ justify-content:center; }
.hero h1{
  font-size:clamp(2.4rem, 5.2vw, 4.1rem);
  line-height:1.06;
  max-width:16ch;
  color:var(--ink);
  text-shadow: 0 2px 24px rgba(0,0,0,0.5);
}
.hero h1 em{
  font-style:normal;
  color:var(--gold-strong);
  text-shadow: 0 0 18px color-mix(in srgb, var(--gold) 35%, transparent);
}
.hero .sub{
  margin-top:26px;
  max-width:58ch;
  font-size:1.12rem;
  color:var(--ink-dim);
  text-shadow: 0 1px 16px rgba(0,0,0,0.65), 0 1px 2px rgba(0,0,0,0.8);
}
.hero .sub strong{ color:var(--ink); font-weight:600; }

.hero-cta{ margin-top:40px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:"IBM Plex Mono", monospace;
  font-size:0.82rem; letter-spacing:0.04em; text-transform:uppercase; font-weight:600;
  padding:14px 26px;
  background:var(--gold);
  color:var(--gold-on);
  text-decoration:none;
  border:1px solid var(--gold);
  border-radius:999px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 0 0 color-mix(in srgb, var(--gold) 55%, transparent), 0 0 22px color-mix(in srgb, var(--gold) 45%, transparent);
}
.btn-ghost{
  background:transparent; color:var(--ink); border-color:var(--ink-dim);
}
.hero .btn-ghost{ text-shadow: 0 1px 10px rgba(0,0,0,0.7); }
.btn-ghost:hover{ color:var(--ink); border-color:var(--ink); box-shadow:none; transform:none; }

/* ---------------- Page header (non-hero pages: shop/economy/connect) ---------------- */
/* Background/sizing rules for .page-header live above, combined with .hero. */
.page-header .eyebrow{ margin-bottom:14px; }
.page-header h1{ font-size:clamp(2rem, 4vw, 2.9rem); }
.page-header p{ color:var(--ink-dim); margin-top:16px; max-width:62ch; font-size:1.04rem; }

/* ---------------- Section scaffolding ---------------- */
section{ padding:88px 0; border-top:1px solid var(--line-soft); }
.section-head{ margin-bottom:52px; max-width:62ch; }
.section-head h2{ font-size:clamp(1.7rem, 3vw, 2.4rem); margin-top:10px; }
.section-head p{ color:var(--ink-dim); margin-top:16px; font-size:1.02rem; }

/* ---------------- Pillars (ledger rows) ---------------- */
.pillars{ display:flex; flex-direction:column; }
.pillar-row{
  display:grid;
  grid-template-columns:88px 1fr;
  gap:28px;
  padding:30px 0;
  border-top:1px solid var(--line-soft);
}
.pillar-row:first-child{ border-top:none; }
.pillar-num{
  font-family:"IBM Plex Mono", monospace;
  font-size:1.6rem;
  color:var(--gold);
  opacity:0.85;
}
.pillar-row h3{ font-size:1.25rem; font-family:"Libre Franklin", sans-serif; font-weight:700; }
.pillar-row p{ color:var(--ink-dim); margin-top:10px; max-width:60ch; }

/* ---------------- Feature grid ---------------- */
.feature-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:16px;
}
.card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-top:2px solid color-mix(in srgb, var(--gold) 35%, var(--line));
  padding:28px;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow);
  transition: border-color .15s ease, transform .15s ease, box-shadow .2s ease;
}
.card:hover{
  border-color:var(--gold);
  transform:translateY(-3px);
  box-shadow: 0 12px 32px -8px color-mix(in srgb, var(--gold) 25%, transparent);
}
.card-large{ grid-column:span 3; }
.card-small{ grid-column:span 2; }
@media (max-width:900px){
  .card-large,.card-small{ grid-column:span 6; }
}
.stats-widget{
  margin-top:36px;
  display:flex; flex-wrap:wrap; gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  max-width:640px;
}
.stats-widget .stat{
  flex:1 1 130px;
  background:var(--surface);
  padding:18px 20px;
}
.stats-widget .stat-label{
  font-family:"IBM Plex Mono", monospace;
  font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-dim);
}
.stats-widget .stat-value{
  font-family:"IBM Plex Mono", monospace;
  font-weight:600; font-size:1.5rem; color:var(--gold);
  margin-top:4px;
  font-variant-numeric: tabular-nums;
}
.stats-widget .stat-value.loading{ opacity:0.35; }
.card .card-eyebrow{
  font-family:"IBM Plex Mono", monospace;
  font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-dim);
  margin-bottom:14px;
}
.card h3{ font-family:"Libre Franklin", sans-serif; font-weight:800; font-size:1.28rem; }
.card p{ color:var(--ink-dim); margin-top:12px; flex:1; }
.card .tag{
  align-self:flex-start;
  margin-top:20px;
  font-family:"IBM Plex Mono", monospace;
  font-size:0.78rem;
  padding:7px 12px;
  background:var(--gold-tint);
  color:var(--gold);
  border:1px solid color-mix(in srgb, var(--gold) 40%, transparent);
}
.card .link{
  margin-top:20px;
  font-family:"IBM Plex Mono", monospace;
  font-size:0.8rem;
  color:var(--bolt);
  text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--bolt) 45%, transparent);
  align-self:flex-start;
}
.card .link:hover{ border-color:var(--bolt); }

/* ---------------- Economy: revenue bar ---------------- */
.revenue-bar{
  display:flex; width:100%; height:44px;
  border:1px solid var(--line);
  overflow:hidden;
  font-family:"IBM Plex Mono", monospace;
  font-size:0.78rem;
}
.revenue-bar > div{
  display:flex; align-items:center; justify-content:center;
  color:var(--gold-on);
  white-space:nowrap;
  overflow:hidden;
}
.seg-treasury{ width:50%; background:var(--ink-dim); }
.seg-monthly{ width:50%; background:var(--gold-strong); }
.revenue-legend{
  display:flex; gap:28px; flex-wrap:wrap;
  margin-top:18px;
  font-family:"IBM Plex Mono", monospace;
  font-size:0.8rem;
  color:var(--ink-dim);
}
.revenue-legend span{ display:inline-flex; align-items:center; gap:8px; }
.swatch{ width:10px; height:10px; display:inline-block; }

.callout-warn{
  display:flex; gap:14px; align-items:flex-start;
  margin-top:28px; padding:18px 20px;
  background:var(--ember-tint);
  border:1px solid color-mix(in srgb, var(--ember) 45%, transparent);
}
.callout-warn .icon{
  font-family:"IBM Plex Mono", monospace; font-size:1rem; line-height:1.4;
  color:var(--ember); flex-shrink:0;
}
.callout-warn .body{ min-width:0; }
.callout-warn .eyebrow{
  font-family:"IBM Plex Mono", monospace; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ember); margin-bottom:6px;
}
.callout-warn p{ margin:0; font-size:0.88rem; color:var(--ink); line-height:1.5; }
.callout-warn p strong{ color:var(--ember); }

/* ---------------- Quest Guides ---------------- */
.quest-toolbar{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.quest-search-input{
  flex:2 1 280px; padding:12px 14px;
  background:var(--surface); border:1px solid var(--line); color:var(--ink);
  font-family:"Libre Franklin",sans-serif; font-size:0.95rem; box-sizing:border-box;
}
.quest-select{
  flex:1 1 160px; padding:12px 14px;
  background:var(--surface); border:1px solid var(--line); color:var(--ink);
  font-family:"IBM Plex Mono",monospace; font-size:0.8rem; box-sizing:border-box;
}
.quest-level-range{ display:flex; align-items:center; gap:8px; flex:1 1 200px; }
.quest-level-range label{
  display:flex; align-items:center; gap:6px;
  font-family:"IBM Plex Mono",monospace; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-dim);
  flex:1 1 auto;
}
.quest-level-input{
  width:100%; padding:12px 10px;
  background:var(--surface); border:1px solid var(--line); color:var(--ink);
  font-family:"IBM Plex Mono",monospace; font-size:0.85rem; box-sizing:border-box;
  font-variant-numeric:tabular-nums;
}
.quest-meta{
  font-family:"IBM Plex Mono",monospace; font-size:0.78rem; color:var(--ink-dim);
  margin:0 0 22px;
}
.quest-list{ display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); }
.quest-list:empty{ display:none; }
.quest-card{ background:var(--surface); padding:20px 24px; }
.quest-card-head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; }
.quest-card h3{ font-family:"Libre Franklin",sans-serif; font-weight:800; font-size:1.05rem; margin:0; }
.quest-tags{ display:flex; gap:6px; flex-wrap:wrap; }
.quest-tag{
  font-family:"IBM Plex Mono",monospace; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.05em;
  padding:3px 8px; white-space:nowrap;
  background:var(--gold-tint); color:var(--gold); border:1px solid color-mix(in srgb, var(--gold) 40%, transparent);
}
.quest-tag.race{ background:var(--bolt-tint); color:var(--bolt); border-color:color-mix(in srgb, var(--bolt) 40%, transparent); }
.quest-card .npc-line{ font-family:"IBM Plex Mono",monospace; font-size:0.75rem; color:var(--ink-dim); margin:10px 0 0; }
.quest-card p.summary{ color:var(--ink-dim); font-size:0.9rem; margin:8px 0 0; line-height:1.55; }
.quest-card-actions{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:14px; }
.quest-guide-toggle{
  font-family:"IBM Plex Mono",monospace; font-size:0.76rem; letter-spacing:0.03em;
  background:none; border:1px solid var(--line); color:var(--gold);
  padding:7px 12px; cursor:pointer; transition:border-color .15s, color .15s;
}
.quest-guide-toggle:hover{ border-color:var(--gold); color:var(--gold-strong); }
.quest-pmfun-link{
  font-family:"IBM Plex Mono",monospace; font-size:0.76rem;
  color:var(--bolt); text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--bolt) 45%, transparent);
}
.quest-pmfun-link:hover{ border-color:var(--bolt); }
.quest-steps-wrap{ display:none; margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft); }
.quest-card.expanded .quest-steps-wrap{ display:block; }
.quest-guide-confidence{
  font-family:"IBM Plex Mono",monospace; font-size:0.72rem; color:var(--ember);
  margin:0 0 12px; font-style:italic;
}
.quest-steps{ margin:0; padding:0 0 0 22px; display:flex; flex-direction:column; gap:10px; }
.quest-steps li{ color:var(--ink-dim); font-size:0.88rem; line-height:1.55; }
.quest-steps li strong{ color:var(--ink); }
.quest-step-objs{ color:var(--gold); font-family:"IBM Plex Mono",monospace; font-size:0.8rem; }
.quest-empty{
  padding:40px 20px; text-align:center; color:var(--ink-dim);
  font-family:"IBM Plex Mono",monospace; font-size:0.85rem;
  background:var(--surface); border:1px solid var(--line);
}

/* ---------------- Ledger table ---------------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); }
table{ width:100%; border-collapse:collapse; min-width:560px; }
thead th{
  text-align:left;
  font-family:"IBM Plex Mono", monospace;
  font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-dim);
  padding:14px 20px;
  border-bottom:1px solid var(--line);
  background:var(--surface-2);
}
tbody td{
  padding:16px 20px;
  border-bottom:1px solid var(--line-soft);
  font-size:0.96rem;
}
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background:var(--surface); }
td.pct{ font-family:"IBM Plex Mono", monospace; text-align:right; color:var(--gold); font-weight:600; }
td.cat{ font-weight:600; }
td.note{ color:var(--ink-dim); font-size:0.88rem; }
.boss-countdown-cell{ font-variant-numeric:tabular-nums; color:var(--gold); }
#boss-table td .status-dot{ display:inline-block; vertical-align:middle; margin-right:6px; }

/* ---------------- Mechanics pair ---------------- */
.mech-pair{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:52px; }
@media (max-width:800px){ .mech-pair{ grid-template-columns:1fr; } }
.mech{ background:var(--surface); border:1px solid var(--line); padding:30px; }
.mech h3{ font-family:"Libre Franklin", sans-serif; font-weight:800; font-size:1.15rem; }
.mech p{ color:var(--ink-dim); margin-top:10px; font-size:0.95rem; }

.gauge{ margin-top:24px; }
.gauge-track{ position:relative; height:10px; background:var(--surface-2); border:1px solid var(--line); }
.gauge-fill{ position:absolute; inset:0; width:100%; background:linear-gradient(90deg, var(--gold-tint), var(--gold)); }
.gauge-ticks{ display:flex; justify-content:space-between; margin-top:10px; font-family:"IBM Plex Mono", monospace; font-size:0.7rem; color:var(--ink-dim); }
.gauge-ticks b{ color:var(--gold); font-weight:700; }

/* ---------------- Leaderboard tabs ---------------- */
.lb-tabs{ display:flex; gap:2px; margin-bottom:14px; }
.lb-tab{
  font-family:"IBM Plex Mono", monospace; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.06em;
  background:none; border:1px solid var(--line); color:var(--ink-dim); padding:8px 18px; cursor:pointer;
  transition:color .15s, border-color .15s, background .15s;
}
.lb-tab:hover{ color:var(--ink); }
.lb-tab.active{ color:var(--gold-on); background:var(--gold); border-color:var(--gold); }

/* ---------------- Join / connect ---------------- */
.connect-panel{
  display:grid; grid-template-columns:1.1fr 1fr; gap:0;
  border:1px solid var(--line);
  background:var(--surface);
}
@media (max-width:800px){ .connect-panel{ grid-template-columns:1fr; } }
.steps{ list-style:none; margin:0; padding:32px; counter-reset:step; border-right:1px solid var(--line); }
@media (max-width:800px){ .steps{ border-right:none; border-bottom:1px solid var(--line); } }
.steps li{ counter-increment:step; display:grid; grid-template-columns:32px 1fr; gap:14px; padding:16px 0; border-top:1px solid var(--line-soft); }
.steps li:first-child{ border-top:none; padding-top:0; }
.steps li::before{
  content:counter(step);
  font-family:"IBM Plex Mono", monospace; font-weight:700; font-size:1rem;
  color:var(--gold);
}
.steps h4{ font-family:"Libre Franklin", sans-serif; font-weight:700; font-size:1rem; margin:0 0 6px; }
.steps p{ margin:0; color:var(--ink-dim); font-size:0.92rem; }

.connect-info{ padding:32px; display:flex; flex-direction:column; gap:18px; }
.connect-row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--line-soft); }
.connect-row:last-of-type{ border-bottom:none; }
.connect-row .k{ font-family:"IBM Plex Mono", monospace; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-dim); }
.connect-row .v{ font-family:"IBM Plex Mono", monospace; font-size:0.95rem; color:var(--ink); text-align:right; }
.badge-warn{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  font-family:"IBM Plex Mono", monospace; font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--bolt); background:var(--bolt-tint);
  border:1px solid color-mix(in srgb, var(--bolt) 40%, transparent);
  padding:6px 12px;
}

.server-status{
  margin-top:14px; display:flex; gap:20px; flex-wrap:wrap;
  font-family:"IBM Plex Mono",monospace; font-size:0.78rem; color:var(--ink-dim);
}
.status-dot-row{ display:flex; align-items:center; gap:7px; }
.status-dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--ink-dim); opacity:0.4;
}
.status-dot.status-up{ background:#3a8f4a; opacity:1; box-shadow:0 0 0 3px rgba(58,143,74,0.18); }
.status-dot.status-down{ background:#b33; opacity:1; box-shadow:0 0 0 3px rgba(187,51,51,0.18); }

/* Changelog page - mirrors .quest-list/.quest-card's stacked-card language,
   see shared/changelog.js for how entries are rendered from assets/
   changelog.json. */
.changelog-list{ display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); }
.changelog-entry{ background:var(--surface); padding:18px 24px; }
.changelog-entry-meta{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.changelog-date{ font-size:0.78rem; color:var(--ink-dim); }
.changelog-badge{
  font-family:"IBM Plex Mono",monospace; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.05em;
  padding:3px 9px; white-space:nowrap;
}
.changelog-badge-feature{ background:var(--gold-tint); color:var(--gold); border:1px solid color-mix(in srgb, var(--gold) 40%, transparent); }
.changelog-badge-fix{ background:var(--bolt-tint); color:var(--bolt); border:1px solid color-mix(in srgb, var(--bolt) 40%, transparent); }
.changelog-badge-security{ background:var(--ember-tint); color:var(--ember); border:1px solid color-mix(in srgb, var(--ember) 40%, transparent); }
.changelog-badge-maintenance{ background:var(--surface-2); color:var(--ink-dim); border:1px solid var(--line); }
.changelog-entry-text{ color:var(--ink-dim); font-size:0.92rem; line-height:1.6; margin:0; }

/* Floating server-status widget - the sole home for server status now that
   the old topbar LEDs were removed (they used to disappear entirely under
   640px, and were easy to miss even above that). Built dynamically by
   server-status.js; see lightningL2RenderStatusWidget() for how it stays
   in sync with the active language. */
.l2-status-widget{
  position:fixed; right:16px; top:84px; z-index:60;
  width:188px;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:blur(10px);
  border:1px solid var(--line-soft);
  border-radius:12px;
  box-shadow:0 8px 28px rgba(0,0,0,0.28);
  font-family:"IBM Plex Mono", monospace;
  overflow:hidden;
}
.l2-status-widget-toggle{
  all:unset; box-sizing:border-box;
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:10px 12px;
  cursor:pointer;
  font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase; font-weight:600;
  color:var(--gold);
}
.l2-status-widget-chevron{
  width:7px; height:7px;
  border-right:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg);
  transition:transform .15s;
}
.l2-status-widget.is-collapsed .l2-status-widget-chevron{ transform:rotate(-135deg); }
.l2-status-widget-body{
  display:flex; flex-direction:column; gap:8px;
  padding:2px 14px 12px;
  font-size:0.76rem; color:var(--ink-dim);
}
.l2-status-widget.is-collapsed .l2-status-widget-body{ display:none; }
.l2-status-widget-row{ display:flex; align-items:center; gap:8px; }
.l2-status-widget-row.l2-status-widget-metric{ justify-content:space-between; padding-top:4px; border-top:1px solid var(--line-soft); }
.l2-status-widget-row.l2-status-widget-metric:first-of-type{ margin-top:2px; }
.l2-status-widget-label{ color:var(--ink-dim); }
.l2-status-widget-value{ color:var(--gold); font-weight:600; font-variant-numeric:tabular-nums; }
.l2-status-widget-divider{ height:1px; background:var(--line-soft); margin:6px 0 2px; }
.l2-status-widget-link{ text-decoration:none; cursor:pointer; }
.l2-status-widget-link:hover .l2-status-widget-value{ text-decoration:underline; }
.l2-status-widget-row.l2-status-widget-stacked{
  flex-direction:column-reverse; align-items:flex-start; gap:2px;
}
.l2-status-widget-row.l2-status-widget-stacked .l2-status-widget-value{
  max-width:none; white-space:normal; text-align:left; overflow:visible; text-overflow:clip;
  line-height:1.35;
}
.l2-status-widget-row.l2-status-widget-stacked .l2-status-widget-label{ font-size:0.68rem; }
.l2-status-widget-rates-value{
  display:grid; grid-template-columns:1fr 1fr; column-gap:12px; row-gap:2px;
  width:100%;
}
@media (max-width:520px){
  .l2-status-widget{ right:10px; top:76px; width:164px; }
}
.how-to-begin{
  margin-bottom:20px; padding-bottom:20px;
  border-bottom:1px solid var(--line-soft);
}
.how-to-begin-title{
  font-family:"IBM Plex Mono", monospace;
  font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--gold); margin:0 0 10px;
}
.how-to-begin ol{
  list-style:none; margin:0; padding:0;
  counter-reset:htb;
  display:flex; flex-direction:column; gap:8px;
}
.how-to-begin li{
  /* Real bug, reported live with a screenshot: with display:grid here,
     a step whose text mixes multiple inline <code> tags into the
     sentence (steps 2/3 - "system"/"l2.exe") rendered as overlapping
     text instead of flowing normally. Root cause: this <li> mixes a
     generated ::before counter with plain text and inline <code>
     elements - all inline-level content - and browsers don't reliably
     agree on how that combination distributes across explicit grid
     columns share (i.e., "engulfing anonymous grid items). Step 1 (plain
     text, no <code>) rendered fine, which pointed straight at the
     <code>-mixing case, not a general text bug.
     Replaced with a plain, well-tested pattern instead: normal block
     flow, padding-left reserves space for the counter, and the counter
     itself is position:absolute rather than a grid track. This has no
     ambiguity about how mixed inline content resolves - it's just
     ordinary text flow - regardless of how many <code> tags a step's
     sentence contains. */
  counter-increment:htb;
  position:relative;
  padding-left:30px;
  font-size:0.9rem; color:var(--ink-dim); line-height:1.5;
}
.how-to-begin li::before{
  content:counter(htb);
  position:absolute; left:0; top:0;
  font-family:"IBM Plex Mono", monospace; font-weight:700; font-size:0.85rem;
  color:var(--gold);
}
.buy-widget{
  margin-top:22px; max-width:520px;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);
  padding:24px 28px;
}
/* Lightning-L2: the connect.html account-creation widget sits directly
   above .connect-panel (the download-steps + server-info grid, full .wrap
   width) - the shared .buy-widget's 520px cap (sized for the narrower shop
   buy-flow) left it looking narrow and off-center above that wider panel.
   Scoped to this one instance so shop.html's own buy widget keeps its
   original width. */
#account-widget{ max-width:none; }
/* A single-field row (username, email, referrer, coupon) in that now-wide
   container otherwise stretches its input to the full ~1000px width -
   found by measuring it directly (985px), not a cosmetic guess. Capped so
   fields stay a sane reading width regardless of the container; two-field
   rows (password/confirm) already split via flex and don't need this. */
#account-widget .buy-row label{ flex:1 1 320px; max-width:480px; }
.buy-row{ display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; }
.buy-row label{ font-family:"IBM Plex Mono",monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-dim); flex:1 1 140px; }
.buy-row input, .buy-row select{
  display:block; width:100%; margin-top:6px; padding:10px 12px;
  background:var(--bg); border:1px solid var(--line); color:var(--ink); font-size:0.95rem;
  font-family:"Libre Franklin",sans-serif; box-sizing:border-box;
}
.buy-row button{ flex:0 0 auto; }
#buy-invoice{ text-align:center; }
#buy-invoice img{ border:1px solid var(--line); background:#fff; padding:8px; }
#buy-status{ font-family:"IBM Plex Mono",monospace; font-size:0.85rem; margin-top:10px; }

/* ---------------- Footer ---------------- */
footer{ border-top:1px solid var(--line-soft); padding:56px 0 40px; }
.footer-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; }
.footer-ethos{ font-family:"Marcellus SC", serif; font-size:1.1rem; color:var(--ink); max-width:34ch; }
.footer-fine{ max-width:46ch; color:var(--ink-dim); font-size:0.82rem; margin-top:18px; }
.footer-fine + .footer-fine{ margin-top:8px; }

#ember-canvas{
  position:fixed; inset:0;
  /* Above .hero (z-index:1) and .hero-inner (z-index:2) so embers drift
     over the hero art/headline too, not just the plain sections below it -
     previously z-index:0 put it entirely behind .hero's own stacking
     context, so it was invisible for the whole hero area. Still below the
     sticky topbar (z-index:40) on purpose. Safe over text either way:
     mix-blend-mode:screen only lightens, and pointer-events:none means it
     never blocks clicks/links underneath. */
  z-index:5;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:0.55;
}
:root[data-theme="light"] #ember-canvas{ display:none; }
/* Lightning-L2: .topbar is deliberately NOT in this list - it already sets
   its own position:sticky; z-index:40 above, and this rule's z-index:1
   would silently override that (equal specificity, later in the cascade),
   flattening the topbar to the same stacking layer as .hero/section/footer.
   That's exactly what broke the mobile nav dropdown: with .topbar reset to
   z-index:1, .hero (same z-index:1, right after it in the DOM) painted over
   the open dropdown, hiding every link behind the hero art. */
.hero, .page-header, section, footer{ position:relative; z-index:1; }

/* ---------------- Alpha-phase floating alert (index/landing page only) ----------------
   Bottom-left, mirrors .l2-status-widget's fixed-card treatment (bottom-right) rather
   than inventing a second visual language. Ember accent (same as .callout-warn / the
   economy page's alpha-peg notice) marks this as a warning; the "sats still matter"
   line below it uses the gold accent instead, so it reads as a distinct, reassuring
   note rather than more of the warning above it. */
.alpha-alert{
  position:fixed; left:16px; bottom:16px; z-index:65;
  width:340px; max-width:calc(100vw - 32px);
  background:color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter:blur(10px);
  border:1px solid color-mix(in srgb, var(--ember) 42%, var(--line));
  border-radius:12px;
  box-shadow:0 10px 32px rgba(0,0,0,0.35);
  padding:18px 20px;
}
.alpha-alert.is-hidden{ display:none; }
.alpha-alert-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.alpha-alert-eyebrow{
  display:flex; align-items:center; gap:7px;
  font-family:"IBM Plex Mono", monospace;
  font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; font-weight:600;
  color:var(--ember);
}
.alpha-alert-eyebrow .dot{
  width:6px; height:6px; border-radius:50%; background:var(--ember);
  box-shadow:0 0 0 3px var(--ember-tint);
  animation:alpha-alert-pulse 1.8s ease-in-out infinite;
}
.alpha-alert-close{
  all:unset; box-sizing:border-box; cursor:pointer; flex-shrink:0;
  width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; color:var(--ink-dim); font-size:1rem; line-height:1;
  transition:color .15s, background-color .15s;
}
.alpha-alert-close:hover{ color:var(--ink); background:var(--line-soft); }
.alpha-alert h3{
  font-family:"Libre Franklin", sans-serif; font-weight:800; font-size:0.98rem;
  margin-top:10px; color:var(--ink); line-height:1.35;
}
.alpha-alert p{ margin:9px 0 0; font-size:0.84rem; color:var(--ink-dim); line-height:1.55; }
.alpha-alert p strong{ color:var(--ink); }
.alpha-alert-blink{
  margin-top:13px; padding:10px 12px;
  background:var(--gold-tint);
  border:1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  font-size:0.82rem; font-weight:600; color:var(--gold-strong); line-height:1.5;
  animation:alpha-alert-blink 1.4s steps(1, jump-none) infinite;
}
@keyframes alpha-alert-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.25; } }
@keyframes alpha-alert-blink{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0.32; } }
@media (prefers-reduced-motion: reduce){
  .alpha-alert-eyebrow .dot, .alpha-alert-blink{ animation:none !important; opacity:1 !important; }
}
@media (max-width:520px){
  .alpha-alert{ left:10px; right:10px; bottom:10px; width:auto; }
}

/* ---------------- Floating topsite badges (vote-banner.js / l2list-banner.js) ----------------
   These replace HopZone's/L2List's own raw <img> ad banners, which were pinned to opposite
   bottom corners - exactly the "topsite listing" look website/CLAUDE.md says to avoid. Same
   fixed-card visual language as .l2-status-widget/.alpha-alert (blurred dark surface, pill
   shape) instead of someone else's branded rectangle. Both anchor bottom-RIGHT, stacked -
   never bottom-left, since .alpha-alert already owns that corner on the homepage and a
   second fixed element there would collide with it. */
.vote-float-badge, .l2list-float-badge{
  position:fixed; right:16px; z-index:55;
  display:inline-flex; align-items:center; gap:8px;
  font-family:"IBM Plex Mono", monospace;
  font-size:0.72rem; letter-spacing:0.04em; text-transform:uppercase; font-weight:600;
  padding:10px 16px;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:blur(10px);
  border-radius:999px;
  text-decoration:none;
  box-shadow:0 8px 24px rgba(0,0,0,0.28);
  transition:transform .15s ease, box-shadow .15s ease;
}
.vote-float-badge{
  bottom:16px;
  color:var(--gold);
  border:1px solid color-mix(in srgb, var(--gold) 40%, var(--line));
}
.vote-float-badge:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,0.28), 0 0 18px color-mix(in srgb, var(--gold) 35%, transparent);
}
.vote-float-badge-dot{
  width:6px; height:6px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 0 3px var(--gold-tint);
}
.l2list-float-badge{
  bottom:64px;
  color:var(--ink-dim);
  border:1px solid var(--line-soft);
}
.l2list-float-badge:hover{ color:var(--ink); border-color:var(--line); transform:translateY(-2px); }
@media (max-width:520px){
  .vote-float-badge, .l2list-float-badge{ right:10px; font-size:0.66rem; padding:8px 13px; }
  .vote-float-badge{ bottom:10px; }
  .l2list-float-badge{ bottom:54px; }
}

/* ---------------------------------------------------------------
   Homepage redesign additions (2026-09-03) - scoped to index.html's
   new sections only, so shop/economy/connect/quests/bosses/vote/
   changelog are untouched. Deliberately does NOT reuse .eyebrow (the
   tracked-out uppercase-mono label used sitewide) - these sections
   use a plain sentence-case lede instead, since the tracked eyebrow
   is decorative chrome repeated on every section regardless of
   content, not a choice made for this content.
----------------------------------------------------------------- */

.section-lede{
  font-family:"Marcellus SC", serif;
  font-size:1.05rem;
  color:var(--gold-strong);
  margin:0 0 10px;
}

/* Rate ticker - lives inside the hero itself (the brief's #1 priority:
   rates need to read at a glance, not sit in a footnote widget below
   the fold). Label is plain Libre Franklin, not tracked mono-caps -
   only the numbers themselves are monospace, since alignment of digits
   is the one place mono earns its keep here. */
.hero-rates{
  display:flex; flex-wrap:wrap; gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:36px;
  max-width:560px;
}
.hero-rates .rate{
  flex:1 1 110px;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(2px);
  padding:16px 18px;
}
.hero-rates .rate-label{
  font-family:"Libre Franklin", sans-serif; font-weight:600;
  font-size:0.82rem; color:var(--ink-dim);
}
.hero-rates .rate-value{
  font-family:"IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
  font-weight:600; font-size:1.7rem; color:var(--gold-strong);
  margin-top:2px;
}
.hero-rates .rate-value.loading{ opacity:0.35; }

/* ---------------- Great Opening countdown (added 2026-09-08) ----------------
   Two Bitcoin-block milestones tracked from one live current-block value:
   966,000 (--ember, matches the alpha-alert warning accent - a wipe) and
   967,000 (--gold, the site's primary/positive accent - no wipe). Digits
   and block numbers are always IBM Plex Mono with tabular-nums, matching
   every other data readout on the site (hero-rates above, the status
   widget, etc.) - never the display serif. */
#great-opening-countdown{ text-align:center; }
#great-opening-countdown .section-head{ margin-left:auto; margin-right:auto; text-align:center; }

.go-hero{ margin-bottom:40px; }
.go-hero-label{
  font-size:0.78rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ember); margin-bottom:14px;
}
.go-digits{
  display:flex; justify-content:center; align-items:flex-start;
  gap:clamp(8px,2.4vw,22px); margin-bottom:18px; flex-wrap:wrap;
}
.go-unit{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:58px; }
.go-val{
  font-family:"IBM Plex Mono", monospace; font-weight:700;
  font-variant-numeric:tabular-nums;
  font-size:clamp(2rem,6vw,3.4rem); line-height:1; color:var(--ink);
}
.go-unit-label{
  font-family:"IBM Plex Mono", monospace; font-size:0.62rem;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-dim);
}
.go-sep{
  font-family:"IBM Plex Mono", monospace; font-weight:700;
  font-size:clamp(2rem,6vw,3.4rem); line-height:1; color:var(--ember-tint);
  align-self:flex-start;
}
.go-readout{
  display:inline-flex; align-items:center; gap:12px;
  font-size:0.92rem; color:var(--ink-dim);
  background:var(--surface); border:1px solid var(--line);
  border-radius:8px; padding:10px 18px;
}
.go-readout #go-cur-block{ font-variant-numeric:tabular-nums; }
.go-readout .go-arrow{ color:var(--ember); }
.go-target-block{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }

.go-live-banner{
  max-width:60ch; margin:0 auto 40px; padding:14px 20px;
  background:var(--gold-tint); border:1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius:8px; color:var(--gold-strong); font-weight:600;
}

.go-ledger{
  display:flex; justify-content:center; gap:5px; flex-wrap:wrap;
  max-width:620px; margin:0 auto 48px;
}
.go-blk{
  width:16px; height:16px; border-radius:3px; flex:none;
  border:1.5px solid var(--line); background:transparent;
  transition:background .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.go-blk.is-filled{ background:var(--ember); border-color:var(--ember); }
.go-blk.is-next{ animation:go-blk-pulse 1.6s ease-in-out infinite; }
@keyframes go-blk-pulse{
  0%,100%{ box-shadow:0 0 0 rgba(255,106,46,0); border-color:var(--line); }
  50%{ box-shadow:0 0 10px var(--ember-tint); border-color:var(--ember); }
}

.go-roadmap{ position:relative; max-width:820px; margin:0 auto 32px; }
.go-roadmap{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; }
.go-roadmap-line{ position:absolute; top:7px; left:8%; right:8%; height:2px; background:var(--line); z-index:0; }
.go-node{ position:relative; z-index:1; padding:0 8px; }
.go-dot{
  width:16px; height:16px; border-radius:50%; margin:0 auto 16px;
  border:2px solid var(--line); background:var(--bg);
}
.go-node-done .go-dot{ border-color:var(--gold); background:var(--gold); box-shadow:0 0 8px var(--gold-tint); }
.go-node.is-active .go-dot{ border-color:var(--ember); background:var(--ember); box-shadow:0 0 10px var(--ember-tint); }
.go-node.is-done .go-dot{ border-color:var(--gold); background:var(--gold); box-shadow:0 0 8px var(--gold-tint); }
.go-node-block{ font-weight:600; font-size:0.85rem; color:var(--ink); margin-bottom:6px; font-variant-numeric:tabular-nums; }
.go-node-title{ font-weight:600; font-size:0.92rem; color:var(--ink); margin-bottom:6px; }
.go-node-sub{ font-size:0.82rem; color:var(--ink-dim); line-height:1.5; }
.go-node-eta{ font-size:0.78rem; color:var(--ember); margin-top:8px; }
.go-node.is-done .go-node-eta{ color:var(--gold); }

.go-source{
  font-family:"IBM Plex Mono", monospace; font-size:0.72rem;
  color:var(--ink-dim); margin-top:8px;
}

@media (max-width:640px){
  .go-roadmap{ grid-template-columns:1fr; gap:32px; }
  .go-roadmap-line{ display:none; }
}

/* Currency split - Adena and Lightning Coin as two physically distinct
   columns rather than described in a paragraph, since the brief names
   this split as the site's central differentiator. */
.currency-split{
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:stretch; gap:0;
  max-width:980px; margin:0 auto;
  border:1px solid var(--line);
}
.currency-col{
  padding:44px 40px;
  display:flex; flex-direction:column; gap:14px;
}
.currency-col.adena{ background:var(--surface); }
.currency-col.lightning{ background:color-mix(in srgb, var(--gold) 6%, var(--surface)); }
.currency-name{
  font-family:"Marcellus SC", serif; font-size:1.5rem;
}
.currency-col.adena .currency-name{ color:var(--ink); }
.currency-col.lightning .currency-name{ color:var(--gold-strong); }
.currency-tag{
  font-family:"IBM Plex Mono", monospace; font-size:0.78rem;
  color:var(--ink-dim);
}
.currency-col p{ color:var(--ink-dim); font-size:0.98rem; line-height:1.6; margin:0; }
.currency-seam{
  width:1px; background:linear-gradient(180deg, transparent, var(--petrol-bright), transparent);
  position:relative;
}
.currency-seam::after{
  content:"⚡"; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:40px; height:40px; border-radius:50%;
  background:var(--bg); border:1px solid var(--petrol-bright);
  color:var(--petrol-bright);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
}
@media (max-width:760px){
  .currency-split{ grid-template-columns:1fr; }
  .currency-seam{ width:auto; height:1px; background:linear-gradient(90deg, transparent, var(--petrol-bright), transparent); }
  .currency-seam::after{ }
}

/* Referral flow - a genuine 3-step sequence, so numbered steps are
   earned here (unlike the Principles section below, which isn't a
   sequence and no longer uses Roman-numeral markers for that reason). */
.referral-flow{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  max-width:980px; margin:0 auto;
}
.referral-step{
  background:var(--surface); padding:32px 28px;
  display:flex; flex-direction:column; gap:10px;
}
.referral-step .step-num{
  font-family:"Marcellus SC", serif; font-size:1.6rem; color:var(--petrol-bright);
}
.referral-step h3{ font-family:"Libre Franklin", sans-serif; font-weight:800; font-size:1.1rem; margin:0; }
.referral-step p{ color:var(--ink-dim); font-size:0.95rem; line-height:1.6; margin:0; }
.referral-reward{
  grid-column:1/-1;
  background:var(--gold-tint);
  border-top:2px solid var(--gold);
  padding:22px 28px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  text-align:center;
}
.referral-reward-label{
  font-family:"IBM Plex Mono",monospace; font-size:0.76rem; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--ink-dim);
}
.referral-tier{ display:flex; align-items:baseline; justify-content:center; gap:12px; flex-wrap:wrap; }
.referral-tier-level{
  font-family:"IBM Plex Mono",monospace; font-size:0.76rem; letter-spacing:0.03em;
  color:var(--gold); background:var(--surface); border:1px solid var(--line);
  padding:3px 11px; border-radius:999px; flex:none; white-space:nowrap;
}
.referral-tier-value{ color:var(--gold-strong); font-size:1.08rem; }
@media (max-width:760px){
  .referral-flow{ grid-template-columns:1fr; }
}

/* Pillars, de-chromed: the rule's own title leads, at a size close to
   the old Roman numeral's visual weight - three parallel rules aren't a
   sequence, so the numbering is dropped rather than restyled. */
.pillars-plain .pillar-row{ grid-template-columns:1fr; gap:8px; }
.pillars-plain .pillar-row h3{ font-size:1.4rem; font-family:"Marcellus SC", serif; font-weight:400; }

/* Content Creator program - homepage, added 2026-09-03. Same restrained
   language as referral-flow (a real reward callout, no card-kit chrome),
   but a checklist instead of numbered steps: joining isn't a sequence,
   it's a set of requirements that all apply at once. */
.creator-block{
  max-width:820px; margin:0 auto;
  border:1px solid var(--line);
  background:var(--surface);
}
.creator-reward{
  padding:28px 32px;
  border-bottom:1px solid var(--line);
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
}
.creator-reward .num{
  font-family:"IBM Plex Mono", monospace; font-weight:600;
  font-size:2.2rem; color:var(--petrol-bright);
}
.creator-reward p{ margin:0; color:var(--ink-dim); font-size:0.98rem; max-width:44ch; }
.creator-reqs{
  padding:24px 32px 28px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.creator-reqs .req{ font-size:0.92rem; color:var(--ink-dim); line-height:1.5; }
.creator-reqs .req strong{ display:block; color:var(--ink); font-weight:700; margin-bottom:4px; }
@media (max-width:700px){ .creator-reqs{ grid-template-columns:1fr; } }

/* Homepage teaser linking to the dedicated /creators.html page. */
.creator-teaser{
  max-width:820px; margin:0 auto;
  display:flex; align-items:center; gap:24px;
  padding:22px 28px;
  border:1px solid var(--line);
  background:var(--surface);
  text-decoration:none;
  transition:border-color 0.15s ease;
}
.creator-teaser:hover{ border-color:var(--petrol-bright); }
.creator-teaser-num{
  font-family:"IBM Plex Mono", monospace; font-weight:600;
  font-size:2rem; color:var(--petrol-bright);
  flex-shrink:0;
}
.creator-teaser-copy{ display:flex; flex-direction:column; gap:4px; flex:1; }
.creator-teaser-copy strong{ color:var(--ink); font-size:1.05rem; font-weight:700; }
.creator-teaser-copy span{ color:var(--ink-dim); font-size:0.92rem; }
.creator-teaser-cta{ color:var(--gold-strong); font-weight:600; white-space:nowrap; flex-shrink:0; }
@media (max-width:640px){
  .creator-teaser{ flex-wrap:wrap; }
  .creator-teaser-cta{ width:100%; text-align:right; }
}