/* webfonts/fonts.css */
/* latin-ext */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/webfonts/ArchivoBlack-400-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/webfonts/ArchivoBlack-400-lat.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Bangers';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/webfonts/Bangers-400-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bangers';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/webfonts/Bangers-400-lat.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/webfonts/Inter-400-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/webfonts/Inter-400-lat.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/webfonts/Inter-600-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/webfonts/Inter-600-lat.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/webfonts/Inter-700-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/webfonts/Inter-700-lat.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/webfonts/Inter-800-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/webfonts/Inter-800-lat.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/webfonts/Inter-900-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/webfonts/Inter-900-lat.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Luckiest Guy';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/webfonts/LuckiestGuy-400-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Luckiest Guy';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/webfonts/LuckiestGuy-400-lat.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/webfonts/Nunito-700-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/webfonts/Nunito-700-lat.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/webfonts/Nunito-800-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/webfonts/Nunito-800-lat.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/webfonts/Nunito-900-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/webfonts/Nunito-900-lat.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/webfonts/Orbitron-600-lat.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/webfonts/Orbitron-700-lat.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/webfonts/Orbitron-800-lat.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/webfonts/Orbitron-900-lat.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/webfonts/SpaceMono-400-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/webfonts/SpaceMono-400-lat.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/webfonts/SpaceMono-700-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/webfonts/SpaceMono-700-lat.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* pixel display — Press Start 2P (self-hosted; CSP font-src 'self') */
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/webfonts/PressStart2P-400-lat.woff2) format('woff2');
}

/* onboard.css */
/* BLOCK_LAB — onboarding, progress and the global deployment status (2026-09-29). Shared by the landing page and the dashboard. */
.bl-status{font-family:'Space Mono',monospace;font-size:12px;line-height:1.5;padding:8px 18px;border-bottom:1px solid #242838;color:#c9cfda;background:#12141a}
.bl-status b{letter-spacing:.1em}
.bl-status.demo{background:#2a1206;border-color:#5a2a10;color:#ffb98a}.bl-status.demo b{color:#ff6a1a}
.bl-status.live{background:#0f1a13;border-color:#1f4a30;color:#9fd8b8}.bl-status.live b{color:#2fe38a}
.onboard{max-width:1100px;margin:0 auto;padding:28px 18px}
.ob-h{font-family:'Press Start 2P',monospace;font-size:13px;color:#f4f6f0;margin:0 0 14px;letter-spacing:.02em}
.ob-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.ob-steps li{display:grid;grid-template-columns:34px 1fr;gap:10px;background:#12141a;border:1px solid #242838;border-radius:12px;padding:14px}
.ob-n{font-family:'Press Start 2P',monospace;font-size:12px;color:#CBF806;line-height:1.4}
.ob-steps b{display:block;font-family:'Space Mono',monospace;font-size:14px;color:#f4f6f0;margin-bottom:4px}
.ob-p{font-family:'Space Mono',monospace;font-size:13px;line-height:1.7;color:#c9cfda;margin:6px 0}
.ob-dim{color:#8a92a3;font-size:12px}
.ob-steps a{display:inline-block;margin-top:8px;font-family:'Space Mono',monospace;font-size:12px;font-weight:700;color:#0b0c10;background:#CBF806;border-radius:8px;padding:7px 11px;text-decoration:none}
.ob-terms{margin-top:16px;background:#0f1116;border:1px dashed #39405a;border-radius:12px;padding:12px 14px;font-family:'Space Mono',monospace;font-size:12px;line-height:1.8;color:#c9cfda}
.ob-terms b{color:#CBF806;font-weight:700}
.ob-terms dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:4px 16px;margin:6px 0 0}
.ob-terms dt{color:#f4f6f0;font-weight:700;display:inline}.ob-terms dd{margin:0;display:inline;color:#9aa3b5}
.ob-progress{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.ob-progress li{display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:center;font-family:'Space Mono',monospace;font-size:12px;color:#c9cfda;padding:7px 9px;border:1px solid #242838;border-radius:8px;background:#0f1116}
.ob-progress li .ic{font-size:14px}.ob-progress li.done .ic{color:#2fe38a}.ob-progress li.now .ic{color:#CBF806}.ob-progress li.locked{color:#8a92a3}.ob-progress li.locked .ic{color:#6b7386}
.ob-progress li small{display:block;color:#8a92a3;font-size:11px;margin-top:2px}
.ob-progress li a{color:#CBF806;font-size:11px;text-decoration:underline;white-space:nowrap}
.ob-next{border-color:#CBF806!important}
.ob-next-t{font-family:'Press Start 2P',monospace;font-size:13px;color:#CBF806;line-height:1.7;margin-top:6px}
/* block detail page */
.bd-top{display:grid;grid-template-columns:192px 1fr;gap:16px;align-items:start}
@media(max-width:560px){.bd-top{grid-template-columns:1fr}}
.bd-img{width:192px;height:192px;border-radius:10px;image-rendering:pixelated;background:#171a21;display:block}
.bd-line{display:flex;justify-content:space-between;gap:10px;font-family:'Space Mono',monospace;font-size:12px;color:#9aa3b5;padding:5px 0;border-bottom:1px solid #171a21}
.bd-line b{color:#f4f6f0;text-align:right;word-break:normal;overflow-wrap:anywhere;min-width:0}
.bd-line span{flex:0 0 auto}
.bd-addr{font-size:11px}
.bd-p{font-family:'Space Mono',monospace;font-size:12px;line-height:1.7;color:#c9cfda;margin:6px 0 10px}
.bd-traits{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.bd-tr{font-family:'Space Mono',monospace;font-size:11px;background:#0f1116;border:1px solid #242838;border-radius:999px;padding:3px 9px;color:#9aa3b5}.bd-tr b{color:#f4f6f0;margin-left:6px}
.bd-elig{font-family:'Space Mono',monospace;font-size:12px;line-height:1.7;margin-top:6px}.bd-e.ok{color:#2fe38a}.bd-e.no{color:#ffb98a}
.bd-steps{font-family:'Space Mono',monospace;font-size:12px;line-height:1.8;color:#c9cfda;padding-left:20px;margin:6px 0}

/* the hidden attribute must win over layout classes (.stx-two is display:grid) - the dashboard welcome card stayed visible after connecting */
[hidden]{display:none!important}
.bl-status .bl-sep{color:#3a4a3f;margin:0 6px}.bl-w.on{color:#2fe38a;font-weight:700}.bl-w.off{color:#ffb98a}

/* block page section labels (was an inline style, which the CSP blocks - the text fell back to the browser serif) */
.bd-k{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#6b7386;margin-top:12px}

/* index.css */
/* BLOCK_LAB — homepage (Robinhood-Chain layout + the pixel/arcade type system from the Mine page). */
:root{
  --g:#CBF806;--bg:#000;--panel:#0c0e12;--line:#22252d;--ink:#f5f4f0;--dim:#9aa0aa;--o:#ff6a1a;
  --pixel:'Press Start 2P','Space Mono',monospace;
  --mono:'Space Mono','Consolas',ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.eyebrow{font-family:var(--mono);color:var(--g);font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px}
.eyebrow.center{text-align:center}

/* NAV */
.nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:24px;padding:16px 32px;background:rgba(0,0,0,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--pixel);font-size:15px;color:var(--ink);letter-spacing:0}
.brand img{width:28px;height:28px}
.brand b{color:var(--g);font-weight:400}
.nav-links{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav-links a{color:var(--dim);font-weight:700;font-size:14px;letter-spacing:.02em;transition:color .15s}
.nav-links a:hover{color:var(--ink)}

/* BUTTONS (pixel, like the Mine page) */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--pixel);cursor:pointer;transition:transform .12s ease,background .15s,border-color .15s;white-space:nowrap;line-height:1}
.btn:hover{transform:translateY(-1px)}
.pill{background:var(--g);color:#0a0b0e;border-radius:999px;padding:14px 22px;font-size:12px;border:2px solid var(--g)}
.pill:hover{background:#d9ff2e}
.pill.sm{padding:12px 18px;font-size:11px}
.ghost{background:transparent;color:var(--ink);border:2px solid rgba(203,248,6,.5);border-radius:999px;padding:14px 22px;font-size:12px}
.ghost:hover{border-color:var(--g)}
.nav .pill{padding:12px 18px;font-size:12px}
.nav .fxtoggle{margin-left:6px}
.lead2 b{color:var(--ink)}

/* HERO — the 10,000-block mosaic is the ground; type stays pixel/mono. */
.hero{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-in{position:relative;z-index:2;max-width:1040px;margin:0 auto;padding:88px 32px 40px;text-align:center}
.hero h1{font-family:var(--pixel);font-weight:400;font-size:clamp(21px,4.6vw,46px);line-height:1.36;letter-spacing:0;margin:6px 0 26px;text-shadow:0 3px 26px rgba(0,0,0,.95),0 0 60px rgba(0,0,0,.7)}
.hero h1 .g{color:var(--g)}
.hero h1 .o{color:var(--o)}
.lead{color:var(--ink);font-size:clamp(14px,1.6vw,17px);line-height:1.7;max-width:600px;margin:0 auto 16px;text-shadow:0 2px 14px rgba(0,0,0,.9)}
.lead b{color:var(--g)}
.lead2{color:#9ba1ab;font-size:12px;line-height:1.85;max-width:700px;margin:0 auto 30px;text-shadow:0 2px 12px rgba(0,0,0,.9)}
.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* SUPPLY METER — turns "10,000 blocks" into a number that only moves one way */
.supply{
  display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  margin:0 auto 26px;padding:10px 18px;
  background:rgba(0,0,0,.72);border:1px solid var(--line);border-radius:999px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.sup-k{font-family:var(--pixel);font-size:8px;color:var(--dim);letter-spacing:.06em}
.sup-cap{opacity:.75}
.sup-v{font-family:var(--pixel);font-size:12px;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.sup-u{font-family:var(--mono);font-size:11px;color:var(--dim)}
.sup-v.o,.sup-u.o{color:var(--o)}
.sup-bar{width:120px;height:6px;border-radius:3px;background:#1a1d24;overflow:hidden;display:block;border:1px solid #23262e}
/* Width lives here, not on a style attribute: the site's CSP is style-src 'self'
   with no unsafe-inline, so an inline style would be dropped and the bar would
   render empty. Script may still set .style.width at runtime — CSSOM is exempt. */
.sup-bar i{display:block;height:100%;width:12%;background:var(--o);box-shadow:0 0 10px rgba(255,106,26,.6)}

/* SEALED TICKER — the sealed wall running past, news-crawl style.
   36 tiles = two identical halves of 18; translating the track by exactly -50%
   lands tile 19 where tile 1 started, so the loop has no visible seam. */
.matstrip{position:relative;z-index:2;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.matstrip-track{display:flex;width:max-content;animation:sealcrawl 48s linear infinite}
/* Spacing goes on each tile, not as flex `gap`: gap is omitted at the seam
   between the two halves, so a -50% shift would drift by half a gap each loop.
   As margin, every tile occupies exactly width+margin and the loop stays exact. */
.matstrip-track img{
  display:block;flex:0 0 auto;
  height:clamp(78px,8.4vw,118px);width:clamp(78px,8.4vw,118px);
  margin-right:clamp(8px,1vw,14px);
  border-radius:10px;
  object-fit:cover;opacity:.82;
}
@keyframes sealcrawl{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.matstrip:hover .matstrip-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.matstrip-track{animation:none}}

/* LOOP strip + FLYWHEEL (journey concept diagrams) */
.loop{max-width:1120px;margin:26px auto 6px;padding:0 32px}
.fly{max-width:820px;margin:46px auto 4px;padding:0 32px;text-align:center}
/* FLYWHEEL — ring art behind, labels as real text so they stay sharp and
   translatable. Each node orbits by one shared radius: centre it, rotate to its
   angle, push out, then counter-rotate so the text stays upright. */
.flywheel{
  position:relative;width:100%;max-width:560px;aspect-ratio:1;
  margin:14px auto 6px;--r:clamp(112px,34vw,236px);
}
.fw-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72%;height:auto}
.fw-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:62%;text-align:center}
.fw-core b{display:block;font-family:var(--pixel);font-weight:400;color:var(--g);
  font-size:clamp(11px,2.1vw,17px);line-height:1.4}
.fw-core span{display:block;margin-top:8px;font-family:var(--mono);color:var(--dim);
  font-size:clamp(9px,1.4vw,12px)}
.fw-node{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a)));
  font-family:var(--mono);font-size:clamp(9px,1.35vw,12px);letter-spacing:.03em;white-space:nowrap;
  background:#0e1116;border:1px solid rgba(203,248,6,.5);border-radius:8px;
  padding:7px 11px;color:var(--ink);box-shadow:0 6px 18px rgba(0,0,0,.55);
}
.fw-node.o{border-color:rgba(255,106,26,.6)}
.fw-node.d{border-color:rgba(212,175,55,.6)}
.n1{--a:0deg}.n2{--a:60deg}.n3{--a:120deg}.n4{--a:180deg}.n5{--a:240deg}.n6{--a:300deg}
.flycap{color:var(--dim);font-size:12px;line-height:1.85;max-width:640px;margin:4px auto 0}
.flycap b{color:var(--ink)}

/* CARDS */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:1180px;margin:44px auto;padding:0 32px}
.card{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 20% 0%,#12151b 0%,#0a0c10 55%,#07080b 100%);border:1px solid var(--line);border-radius:30px;padding:40px 38px;min-height:480px}
.card h2{font-family:var(--pixel);font-weight:400;font-size:clamp(17px,2.2vw,24px);line-height:1.5;letter-spacing:0;margin:0 0 18px}
.card p{color:var(--dim);font-size:14px;line-height:1.75;max-width:360px;margin:0 0 24px}
.card-top{position:relative;z-index:2}

/* CHIPS */
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;position:relative;z-index:2}
.chip{display:inline-flex;align-items:center;gap:10px;background:#14161b;border:1px solid var(--line);border-radius:16px;padding:11px 16px 11px 11px;font-weight:700;font-size:13px;box-shadow:0 10px 26px rgba(0,0,0,.45)}
.chip img{width:26px;height:26px;border-radius:8px}
.chip.r1{transform:rotate(-3deg)}.chip.r2{transform:rotate(2deg)}.chip.r3{transform:rotate(-2deg)}.chip.r4{transform:rotate(3deg)}

/* ISOMETRIC STACK */
.stackwrap{position:absolute;left:50%;transform:translateX(-50%);bottom:-18px;width:72%;pointer-events:none;filter:drop-shadow(0 28px 55px rgba(0,0,0,.6))}
.stack{width:100%}

/* HOW IT WORKS */
.how{max-width:1180px;margin:34px auto 10px;padding:0 32px;text-align:center}
.steps{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.step{display:inline-flex;align-items:center;background:#0c0e12;border:1px solid var(--line);border-radius:14px;padding:13px 18px;font-weight:700;font-size:13px;color:var(--dim)}
.step b{font-family:var(--pixel);color:var(--g);margin-right:10px;font-size:11px}
.step.accent{border-color:rgba(255,106,26,.55)}
.step.accent b{color:var(--o)}
.sep{color:#3a3f48;font-size:16px}

/* FOOTER */
.foot{max-width:1180px;margin:52px auto 0;padding:28px 32px 56px;border-top:1px solid var(--line);text-align:center}
.foot-nav{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.foot-nav a{color:var(--dim);font-size:13px}
.foot-nav a:hover{color:var(--ink)}
.ft-title{color:var(--dim);font-size:12px;letter-spacing:.02em;margin-bottom:8px}
.disc{color:#5c6473;font-size:11px;line-height:1.7;max-width:660px;margin:0 auto}
.disc b{color:#8a909a}

/* RESPONSIVE */
@media (max-width:860px){
  .cards{grid-template-columns:1fr}
  .nav-burger{display:flex}
  .nav{flex-wrap:wrap;gap:12px}
  .nav-links{display:none;order:3;width:100%;flex-direction:column;gap:4px;margin:6px 0 0}
  .nav-links a{display:block;text-align:center;padding:11px 14px;border:1px solid var(--line);border-radius:999px}
  .tn-tog:checked ~ .nav-links{display:flex}
  .nav{padding:12px 14px;gap:8px}
  .brand{font-size:12px}.brand img{width:24px;height:24px}
  .nav .fxtoggle{font-size:9px;padding:6px 8px;margin-left:auto}
  .nav .pill{padding:9px 12px;font-size:9px}
  .hero-in{padding:56px 18px 26px}
  .hero h1{font-size:20px;line-height:1.5}
  .hero-bg{opacity:.42}
  .supply{gap:8px;padding:9px 14px}
  .sup-bar{width:84px}
  /* fewer tiles fit on a phone, so run the crawl faster to keep it alive */
  .matstrip-track{animation-duration:30s}
  .card{min-height:auto;padding:30px 22px}
  .card h2{font-size:17px;line-height:1.5}
  .stackwrap{position:relative;left:auto;transform:none;bottom:auto;width:92%;margin:24px auto 0;filter:none}
  .cards,.how,.foot{padding-left:18px;padding-right:18px}
  .steps{gap:8px}.sep{display:none}
  .step{font-size:12px;padding:11px 14px}
}
@media (max-width:560px){
  .nav .pill{display:none}                 /* hero carries the CTA on phones; keeps the nav from overflowing */
  .hero h1{font-size:18px}
  .cta .btn{width:100%;justify-content:center}
}

/* THE LOOP v3 — 9 block-style cards, 6 on phones (DECLARE / WIN / POOL fold away; numbers renumber via counters) */
.loopwrap{background:#0b0c10;border:1px solid var(--line);border-radius:24px;padding:22px 16px;margin-top:4px}
.loopseq{font-family:var(--mono);color:var(--g);font-size:12px;text-align:center;letter-spacing:.04em;margin-bottom:18px}
.lgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;counter-reset:ls;max-width:820px;margin:0 auto}
.lstep{background:#0e1116;border:1px solid rgba(203,248,6,.4);border-radius:16px;padding:16px 6px 14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:9px;counter-increment:ls}
.lstep.burn{border-color:rgba(255,106,26,.55)}
.lnum{font-family:var(--pixel);font-size:17px;color:var(--g);line-height:1}
.lnum::before{content:counter(ls)}
.lstep.burn .lnum{color:var(--o)}
.lic{width:46px;height:46px;shape-rendering:geometricPrecision}
.lname{font-family:var(--pixel);font-size:10px;color:var(--ink);line-height:1}
.lsub{font-family:var(--mono);font-size:9px;color:var(--dim);line-height:1.45;min-height:26px}
.loopcap{color:var(--dim);font-size:12px;line-height:1.85;max-width:760px;margin:18px auto 2px;text-align:center}
@media(max-width:860px){.lgrid{gap:8px}.loopseq{font-size:10px}}
@media(max-width:560px){.loopseq{display:none}.loopwrap{padding:12px 10px}
  .lgrid{grid-template-columns:1fr;gap:6px}
  .lstep{display:grid;grid-template-columns:18px 34px 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:3px;align-items:center;text-align:left;padding:9px 12px}
  .lnum{grid-row:1/3;font-size:14px}.lic{grid-row:1/3;width:34px;height:34px}.lname{grid-column:3;align-self:end;font-size:10px}.lsub{grid-column:3;align-self:start;min-height:0}}

/* ===== WAR LOBBY TEASER (below the loop) =====
   A still of the live lobby screen. Bar widths are classes, not inline styles —
   the site's CSP is style-src 'self' with no unsafe-inline. */
.lobbyteaser{max-width:900px;margin:40px auto 6px;padding:0 32px}
.lt{
  display:block;border:1px solid rgba(203,248,6,.35);border-radius:18px;
  background:radial-gradient(120% 90% at 50% 0%,#12151b 0%,#0a0c10 60%,#07080b 100%);
  padding:20px 22px 22px;transition:border-color .18s ease,transform .18s ease;
}
.lt:hover{border-color:var(--g);transform:translateY(-2px)}
.lt-head{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--dim);
  text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:12px;
}
.lt-clock{font-family:var(--pixel);font-size:13px;color:var(--o);font-variant-numeric:tabular-nums}

.lt-vs{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;margin:18px 0 10px}
.lt-side{display:grid;gap:4px;justify-items:start}
.lt-side.lt-r{justify-items:end;text-align:right}
.lt-side b{font-family:var(--pixel);font-size:11px;color:var(--ink);font-weight:400;line-height:1.5}
.lt-pwr{font-family:var(--pixel);font-size:20px;color:var(--g);font-variant-numeric:tabular-nums}
.lt-r .lt-pwr{color:var(--o)}
.lt-k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.lt-x{font-family:var(--pixel);font-size:12px;color:var(--dim)}

.lt-bar{display:flex;height:8px;border-radius:4px;overflow:hidden;background:#15181f;border:1px solid var(--line)}
.lt-bar i{display:block;height:100%}
.lt-a{width:48%;background:var(--g)}
.lt-b{width:52%;background:var(--o)}
.lt-band{font-family:var(--mono);font-size:11px;color:var(--dim);text-align:center;margin-top:8px}

.lt-dial{margin-top:18px;border-top:1px dashed var(--line);padding-top:14px}
.lt-stats{display:flex;flex-wrap:wrap;gap:18px;margin-top:8px;font-family:var(--mono);font-size:12px;color:var(--dim)}
.lt-stats b{font-family:var(--pixel);font-size:12px;color:var(--ink);margin-right:5px}
.lt-stats i{font-style:normal}
.lt-stats .o b{color:var(--o)}
.lt-stats .w b{color:#4fc3ff}

.lt-form{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:16px}
.lt-chip{
  font-family:var(--pixel);font-size:9px;color:var(--dim);
  border:1px solid var(--line);border-radius:7px;padding:8px 11px;
}
.lt-chip.on{color:#0a0b0e;background:var(--g);border-color:var(--g)}
.lt-note{font-family:var(--mono);font-size:10px;color:var(--dim);margin-left:auto}

.lt-cta{
  display:block;margin-top:18px;text-align:center;
  font-family:var(--pixel);font-size:11px;color:#0a0b0e;
  background:var(--g);border-radius:999px;padding:14px;
}
@media(max-width:720px){
  .lobbyteaser{padding:0 18px}
  .lt-vs{grid-template-columns:1fr;gap:10px}
  .lt-side,.lt-side.lt-r{justify-items:center;text-align:center}
  .lt-note{margin-left:0;width:100%}
}

/* the teaser's power bar glides as the dummy figures drift */
.lt-bar i{transition:width .7s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){.lt-bar i{transition:none}}

/* live war cards (filled by home.js from the BlockWar contract; the static card below them is the no-war fallback) */
.lt-list{display:grid;gap:14px;margin-bottom:14px}
.lt.lt-live{cursor:pointer}.lt-live .lt-vs{margin:14px 0 8px}
.lt-ph{font-family:var(--pixel);font-size:9px;color:var(--g);margin-right:8px}.lt-ph.lock{color:var(--o)}
.lt-more{font-family:var(--mono);font-size:11px;color:var(--dim);text-align:center;margin-top:10px}.lt-more a{color:var(--g)}

/* homepage hamburger */
.tn-tog{display:none}
.nav-burger{display:none;margin-left:auto;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:#0f1116;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:none}
.nav-burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
.tn-tog:checked ~ .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.tn-tog:checked ~ .nav-burger span:nth-child(2){opacity:0}
.tn-tog:checked ~ .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:860px){.nav-burger{display:flex}}

/* mining status (homepage, below the loop) */
.mstat{max-width:1180px;margin:8px auto 0;padding:0 32px 6px}
.mstat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:8px}
.ms{background:#0e1116;border:1px solid var(--line);border-radius:16px;padding:14px 12px;text-align:center}
.ms .k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.ms b{display:block;font-family:var(--pixel);font-weight:400;font-size:13px;line-height:1.6;color:var(--g);margin-top:7px;word-break:break-word}
.ms .s{display:block;font-family:var(--mono);font-size:11px;color:var(--dim);margin-top:5px;line-height:1.4}
.mstat-cta{text-align:center;margin-top:16px}
@media(max-width:860px){.mstat{padding:0 16px}.mstat-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.mstat-grid{grid-template-columns:repeat(2,1fr)}}

.lt-ex{display:inline-block;font-family:'Space Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.12em;color:#0b0c10;background:#ffb98a;border-radius:4px;padding:1px 6px;margin-right:6px}

/* LIVE (2026-10-01): the review's first finding - a number that visibly moves is the strongest trust signal on the page */
.ticker{max-width:1180px;margin:0 auto;padding:0 32px;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#07080b}
.ticker-track{display:inline-flex;gap:38px;white-space:nowrap;padding:9px 0;will-change:transform;animation:tkscroll 60s linear infinite}
.ticker-track.still{animation:none;white-space:normal}
.ticker:hover .ticker-track{animation-play-state:paused}
.tk{font-family:var(--mono);font-size:12px;color:var(--ink)}.tk i{font-style:normal;color:var(--dim);margin-left:6px}.tk a{color:var(--g)}
.tk-war{color:var(--o)}.tk-mined{color:var(--g)}.tk-colony{color:#ffd54a}
@keyframes tkscroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.ms b.pulse{animation:mspulse .6s ease-out}
@keyframes mspulse{0%{transform:scale(1.14);color:#fff;text-shadow:0 0 18px rgba(203,248,6,.9)}100%{transform:scale(1)}}
.ms-d{display:block;font-family:var(--mono);font-size:10px;color:var(--g);min-height:0;opacity:0;transition:opacity .4s}.ms-d.on{opacity:1;min-height:14px}
.ms-bar{display:block;height:5px;border-radius:3px;background:#1a1d24;margin:8px auto 0;max-width:150px;overflow:hidden}.ms-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--g),#8fd400);transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.ms-updated{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);text-align:center;margin-top:12px}
.lossline{font-family:var(--mono);font-size:12px;color:var(--dim);text-align:center;margin-top:12px}.lossline b{color:var(--o)}
.leaders{max-width:1180px;margin:34px auto 0;padding:0 32px}
.ld-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ld{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;background:#0e1116;border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.ld.first{border-color:rgba(255,213,74,.6);box-shadow:0 0 24px rgba(255,213,74,.18)}
.ld-rank{grid-row:1/3;font-family:var(--pixel);font-size:16px;color:var(--g)}.ld.first .ld-rank{font-size:22px}
.ld-name{font-family:var(--pixel);font-size:11px;color:var(--ink);line-height:1.5}
.ld-king{font-family:var(--mono);font-size:11px;color:#ffd54a}.ld-rec{grid-column:2;font-family:var(--mono);font-size:11px;color:var(--dim)}
.ld-empty{grid-column:1/-1;display:block;text-align:center;font-family:var(--mono);font-size:12px;color:var(--g)}
.ld-wait{grid-column:1/-1;text-align:center;font-family:var(--mono);font-size:11px;color:var(--dim)}
@media(max-width:860px){.ticker,.leaders{padding:0 16px}.ld-list{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none;white-space:normal}.ms b.pulse{animation:none}}

/* VERSUS BAR on the live war cards (2026-10-02) */
.lt-vsbar{display:block;width:100%;height:78px}
.lt-live.vs-on .lt-bar{display:none}

/* ONE CONTAINER (2026-10-02): every homepage section uses the "how to start" container - 1100 px wide, 28 px top and
   bottom, 18 px sides - so the edges and the rhythm line up down the page. Last in the file: it wins over the older rules. */
.hero-in{max-width:1100px;padding-left:18px;padding-right:18px}
.ticker{max-width:1100px;padding:0 18px}
.leaders,.lobbyteaser,.loop,.mstat,.onboard{max-width:1100px;margin:0 auto;padding:28px 18px}
.mstat-grid{margin-top:8px}

/* the demo war card (2026-10-02) */
#lt-demo.vs-on .lt-bar{display:none}
#lt-demo{will-change:transform}

/* WAR LOBBY TABS (2 Oct): one tab per live war, one card at a time */
.lt-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px;border-bottom:1px solid var(--line);padding-bottom:10px}
.lt-tab{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;color:var(--dim);background:#0e1116;border:1px solid var(--line);border-radius:10px 10px 4px 4px;padding:9px 12px;cursor:pointer;transition:border-color .15s,color .15s}
.lt-tab b{font-family:var(--pixel);font-weight:400;font-size:10px;color:var(--ink)}.lt-tab i{font-style:normal;color:var(--dim)}
.lt-tab:hover{border-color:rgba(203,248,6,.5);color:var(--ink)}
.lt-tab.on{color:var(--ink);border-color:var(--g);box-shadow:0 0 0 1px rgba(203,248,6,.35),0 -6px 18px rgba(203,248,6,.12);background:#12160a}
.lt-tab-ph{font-family:var(--pixel);font-size:8px;color:#0a0b0e;background:var(--g);border-radius:4px;padding:3px 5px}
.lt-tab-ph.lock{background:var(--o)}
.lt-live[hidden]{display:none}
@media(max-width:620px){.lt-tab{font-size:11px;padding:8px 10px}}

/* ELECTRIC BORDER on the homepage war cards (2026-10-02, React Bits ElectricBorder - credit @BalintFerenczy) */
.lt.eb-on{border-color:transparent}
.lt.eb-on .eb-background-glow{opacity:.22}
.lt.eb-on .eb-content{display:block}
@media (prefers-reduced-motion:reduce){.lt.eb-on .eb-background-glow{display:none}}

/* 2026-10-03 SEO: a short, plain explanation search engines and newcomers can read */
.whatis{max-width:1100px;margin:0 auto;padding:28px 18px}
.whatis p{max-width:760px;margin:10px auto 0;font-family:'Space Mono',monospace;font-size:13px;line-height:1.75;color:#b8bfca;text-align:center}
.whatis b{color:#e8edf5;font-weight:700}.whatis a{color:#CBF806}

/* 2026-10-13: the retired sample-war card stays hidden. An inline style attribute is blocked by the CSP (style-src 'self'), so it lives here. */
#lt-demo{display:none!important}

/* electric-border.css */
/* ElectricBorder — React Bits component CSS (unchanged), credit @BalintFerenczy (codepen KwdoyEN). One addition: browsers
   without relative colour syntax get the plain border colour for the light colour (the @supports fallback at the end). */
.electric-border {
  --electric-light-color: oklch(from var(--electric-border-color) l c h);
  position: relative;
  border-radius: inherit;
  overflow: visible;
  isolation: isolate;
}

.eb-canvas-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
}

.eb-canvas {
  display: block;
}

.eb-content {
  position: relative;
  border-radius: inherit;
  z-index: 1;
}

.eb-layers {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.eb-glow-1,
.eb-glow-2,
.eb-background-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-sizing: border-box;
}

.eb-glow-1 {
  border: 2px solid oklch(from var(--electric-border-color) l c h / 0.6);
  filter: blur(1px);
}

.eb-glow-2 {
  border: 2px solid var(--electric-light-color);
  filter: blur(4px);
}

.eb-background-glow {
  z-index: -1;
  transform: scale(1.1);
  filter: blur(32px);
  opacity: 0.3;
  background: linear-gradient(-30deg, var(--electric-light-color), transparent, var(--electric-border-color));
}

@supports not (color: oklch(from red l c h)) {
  .electric-border { --electric-light-color: var(--electric-border-color); }
  .eb-glow-1 { border-color: var(--electric-border-color); opacity: .6; }
}

/* fx.css */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* BLOCK_LAB — ⚡ BADASS MODE (shared FX layer: scanlines, vignette, neon glow, glitch, embers, pulse). CSP-safe. */
.fxtoggle{display:inline-flex;align-items:center;gap:6px;font-family:'Space Mono','Consolas',monospace;font-size:11px;font-weight:700;letter-spacing:.06em;color:#CBF806;background:transparent;border:1.5px solid rgba(203,248,6,.45);border-radius:999px;padding:8px 12px;cursor:pointer;white-space:nowrap}
.fxtoggle:hover{border-color:#CBF806}
body.badass .fxtoggle{background:rgba(203,248,6,.12);box-shadow:0 0 14px rgba(203,248,6,.35)}

/* CRT scanlines + vignette */
body.badass::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 2px,transparent 2px 4px);opacity:.55}
body.badass::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:59;
  background:radial-gradient(130% 100% at 50% 40%,transparent 62%,rgba(0,0,0,.55) 100%)}

/* neon */
/* The glow used to be a box-shadow KEYFRAME: an infinite animation that repaints the element on the
   main thread every frame, on every pill and button at once, for as long as the page is open. It now
   sits on a pseudo-element whose only animated property is opacity - the compositor handles that
   alone, and the main thread is left for the miner, the wallet and scrolling. Same look. */
body.badass .pill,body.badass .btn.o{position:relative;isolation:isolate}
body.badass .pill::after,body.badass .btn.o::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  box-shadow:0 0 26px rgba(203,248,6,.85),0 0 60px rgba(203,248,6,.35);opacity:.45;animation:fxglow 2.4s ease-in-out infinite;will-change:opacity}
body.badass .pill{box-shadow:0 0 12px rgba(203,248,6,.45)}
body.badass .pill.o,body.badass .btn.o{box-shadow:0 0 12px rgba(255,106,26,.5)}
body.badass .pill.o::after,body.badass .btn.o::after{box-shadow:0 0 26px rgba(255,106,26,.9),0 0 60px rgba(255,106,26,.4)}
@keyframes fxglow{0%,100%{opacity:.35}50%{opacity:1}}
body.badass .ghost{box-shadow:0 0 12px rgba(203,248,6,.22)}
body.badass .card,body.badass .wcard{box-shadow:0 0 0 1px rgba(203,248,6,.10),0 0 34px rgba(203,248,6,.07),inset 0 0 40px rgba(0,0,0,.35)}
body.badass .wcard.g,body.badass .card.g{box-shadow:0 0 0 1px rgba(203,248,6,.45),0 0 26px rgba(203,248,6,.22)}
body.badass .wcard.o,body.badass .card.o{box-shadow:0 0 0 1px rgba(255,106,26,.5),0 0 26px rgba(255,106,26,.25)}
body.badass .wcard.gold{box-shadow:0 0 0 1px rgba(212,175,55,.5),0 0 26px rgba(212,175,55,.22)}
body.badass h1 .g,body.badass .v,body.badass .lnum,body.badass .brand b{text-shadow:0 0 10px rgba(203,248,6,.75),0 0 28px rgba(203,248,6,.35)}
body.badass h1 .o,body.badass .v.o,body.badass .cd{text-shadow:0 0 10px rgba(255,106,26,.8),0 0 28px rgba(255,106,26,.35)}
body.badass .v.gold{text-shadow:0 0 10px rgba(212,175,55,.8)}
body.badass .chip.on{box-shadow:0 0 10px rgba(203,248,6,.45)}
body.badass .bar2 i{box-shadow:0 0 12px rgba(203,248,6,.8)}
body.badass .bar2 i.o{box-shadow:0 0 12px rgba(255,106,26,.8)}
body.badass .wall i.e{box-shadow:0 0 8px rgba(255,106,26,.9);animation:fxflicker 1.6s ease-in-out infinite}
body.badass .stack{filter:drop-shadow(0 0 22px rgba(203,248,6,.28))}
body.badass .lic{filter:drop-shadow(0 0 6px rgba(203,248,6,.6))}

/* glitch on headlines */
body.badass .glitch{animation:fxglitch 4.2s infinite}
/* transform only: the filter() steps forced a full repaint of the heading on every glitch frame */
@keyframes fxglitch{0%,91%,100%{transform:none}92%{transform:translate(2px,-1px) skewX(2deg)}94%{transform:translate(-2px,1px)}96%{transform:translate(1px,0) skewX(-2deg)}98%{transform:none}}
@keyframes fxflicker{0%,100%{opacity:1}50%{opacity:.55}}

/* embers */
.embers{position:fixed;inset:0;pointer-events:none;z-index:58;display:none;overflow:hidden}
body.badass .embers{display:block}
.embers i{position:absolute;bottom:-12px;width:4px;height:4px;border-radius:2px;background:#ff8a2a;box-shadow:0 0 8px #ff6a1a;opacity:0;animation:fxrise 8s linear infinite}
.embers i.g{background:#CBF806;box-shadow:0 0 8px #CBF806}
.embers i:nth-child(1){left:6%;animation-delay:0s}.embers i:nth-child(2){left:14%;animation-delay:1.3s;animation-duration:9s}
.embers i:nth-child(3){left:22%;animation-delay:2.6s}.embers i:nth-child(4){left:31%;animation-delay:.7s;animation-duration:7s}
.embers i:nth-child(5){left:40%;animation-delay:3.4s}.embers i:nth-child(6){left:48%;animation-delay:1.9s;animation-duration:10s}
.embers i:nth-child(7){left:57%;animation-delay:4.2s}.embers i:nth-child(8){left:65%;animation-delay:.3s;animation-duration:8.5s}
.embers i:nth-child(9){left:73%;animation-delay:2.2s}.embers i:nth-child(10){left:81%;animation-delay:5s;animation-duration:7.5s}
.embers i:nth-child(11){left:89%;animation-delay:1.1s}.embers i:nth-child(12){left:95%;animation-delay:3.8s;animation-duration:9.5s}
.embers i:nth-child(13){left:36%;animation-delay:6s}.embers i:nth-child(14){left:60%;animation-delay:6.6s;animation-duration:8s}
@keyframes fxrise{0%{transform:translateY(0) translateX(0);opacity:0}8%{opacity:.95}60%{opacity:.7}100%{transform:translateY(-105vh) translateX(28px);opacity:0}}

@media (prefers-reduced-motion:reduce){body.badass .glitch,body.badass .pill,body.badass .embers i,body.badass .wall i.e{animation:none}}

/* ---- BADASS on the inner pages (mine / gallery / launchpad) ---- */
body.badass .btn.y,body.badass .btn-wow,body.badass .btn.primary,body.badass button.primary,body.badass .cta-btn{box-shadow:0 0 16px rgba(203,248,6,.55),0 0 42px rgba(203,248,6,.22);animation:fxpulse 2.4s ease-in-out infinite}
body.badass .btn.o,body.badass .btn.rd{box-shadow:0 0 16px rgba(255,106,26,.6);animation:fxpulseo 2.4s ease-in-out infinite}
body.badass .card,body.badass .gpanel,body.badass .tile,body.badass .st,body.badass .gasbox,body.badass .stat,body.badass .panel,body.badass .box{box-shadow:0 0 0 1px rgba(203,248,6,.10),0 0 30px rgba(203,248,6,.06),inset 0 0 36px rgba(0,0,0,.35)}
body.badass .gasbox{box-shadow:0 0 0 1px rgba(255,106,26,.35),0 0 26px rgba(255,106,26,.18)}
body.badass .logo,body.badass .brand,body.badass .badge,body.badass .st b,body.badass .netpill,body.badass .eyebrow{text-shadow:0 0 10px rgba(203,248,6,.7),0 0 26px rgba(203,248,6,.3)}
body.badass h1 .acc,body.badass .gb-big,body.badass .red{text-shadow:0 0 12px rgba(255,106,26,.8),0 0 30px rgba(255,106,26,.35)}
body.badass h1,body.badass .h2{text-shadow:0 0 14px rgba(245,244,240,.25)}
body.badass .board,body.badass .grid img,body.badass .tile img{filter:saturate(1.15) contrast(1.06)}
body.badass .board{box-shadow:0 0 0 1px rgba(203,248,6,.25),0 0 40px rgba(203,248,6,.12)}
body.badass .tile.leg,body.badass .tile.epic{box-shadow:0 0 18px rgba(203,248,6,.35)}
body.badass input,body.badass select{box-shadow:inset 0 0 12px rgba(0,0,0,.5)}
body.badass input:focus,body.badass select:focus{box-shadow:0 0 12px rgba(203,248,6,.45)}

/* MOMENTS (2026-10-01): shared peaks - mint landed, war won, blocks burning */
.fx-burst{position:fixed;inset:0;pointer-events:none;z-index:70}
body.fx-flash::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:71;background:radial-gradient(60% 60% at 50% 40%,rgba(203,248,6,.55),rgba(203,248,6,0) 70%);animation:fxflash .7s ease-out forwards}
body.fx-flash-burn::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:71;background:radial-gradient(60% 60% at 50% 50%,rgba(255,106,26,.5),rgba(255,106,26,0) 70%);animation:fxflash .7s ease-out forwards}
@keyframes fxflash{0%{opacity:1}100%{opacity:0}}
.fx-shake{animation:fxshake .6s cubic-bezier(.36,.07,.19,.97) both}
@keyframes fxshake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}
/* a burned block tile: pixel fire eating it, then ash */
.wall i.e.burning{position:relative;overflow:visible;animation:fxash 2.8s steps(6) forwards}
.wall i.e.burning::after{content:"";position:absolute;left:-2px;right:-2px;bottom:0;height:140%;pointer-events:none;background:linear-gradient(0deg,#ff6a1a 0 25%,#ffb01a 25% 45%,#ffe08a 45% 55%,transparent 55%);background-size:6px 100%;mask:linear-gradient(0deg,#000 40%,transparent 95%);-webkit-mask:linear-gradient(0deg,#000 40%,transparent 95%);animation:fxfire .35s steps(3) infinite,fxfireout 2.8s ease-in forwards}
@keyframes fxfire{0%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-3px) scaleY(1.15)}100%{transform:translateY(1px) scaleY(.9)}}
@keyframes fxfireout{0%,70%{opacity:1}100%{opacity:0}}
@keyframes fxash{0%{filter:brightness(1.6) saturate(1.4)}60%{filter:brightness(.9)}100%{filter:grayscale(1) brightness(.35)}}
@media (prefers-reduced-motion:reduce){.wall i.e.burning,.wall i.e.burning::after,.fx-shake{animation:none}.wall i.e.burning{filter:grayscale(1) brightness(.35)}}