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

/* nav.css */
/* BLOCK_LAB — one header for every app page: logo left, page links + Connect right. Self-contained. */
.topnav{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px;padding:0 18px;
  background:rgba(0,0,0,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid #22252d}
.tn-logo{display:flex;align-items:center;gap:9px;font-family:'Press Start 2P','Space Mono',monospace;font-size:12px;color:#f5f4f0;text-decoration:none;min-width:0;white-space:nowrap}
.tn-logo img{width:24px;height:24px;border-radius:5px}
.tn-logo b{color:#CBF806;font-weight:400}
.tn-logo span{color:#9aa0aa;font-family:'Space Mono',monospace;font-size:12px;margin-left:4px}
.tn-right{display:flex;align-items:center;gap:10px}
.tn-link{font-family:'Space Mono',monospace;font-weight:700;font-size:12px;color:#c7ccd6;text-decoration:none;border:1px solid #22252d;border-radius:999px;padding:9px 14px;white-space:nowrap;transition:color .15s,border-color .15s}
.tn-link:hover{color:#CBF806;border-color:rgba(203,248,6,.5)}
.tn-btn{font-family:'Press Start 2P','Space Mono',monospace;font-size:9px;padding:11px 14px;border-radius:999px;background:#CBF806;color:#0a0b0e;border:2px solid #CBF806;cursor:pointer;white-space:nowrap;line-height:1}
.tn-btn:hover{background:#d9ff2e}
.tn-btn.tn-conn{background:#0f1116;color:#CBF806}.tn-btn.tn-conn:hover{background:#2a2f3f;color:#ff6a1a}
.tn-btn.tn-conn{background:#0f1116;color:#CBF806}.tn-btn.tn-conn:hover{background:#2a2f3f;color:#ff6a1a}
@media(max-width:420px){.tn-logo span{display:none}.tn-link{padding:8px 11px;font-size:11px}.tn-btn{font-size:8px;padding:10px 12px}}
#bl-toasts{position:fixed;right:16px;bottom:16px;z-index:9999;display:flex;flex-direction:column;gap:8px;max-width:min(92vw,420px)}
.bl-toast{font-family:'Space Mono',monospace;font-size:12px;line-height:1.5;padding:12px 14px;border-radius:10px;border:2px solid #CBF806;background:#141a0c;color:#f4f6f0;box-shadow:0 10px 30px rgba(0,0,0,.5);animation:blt .25s ease-out}
.bl-toast.bad,.bl-toast.warn{border-color:#ff6a1a;background:#2a1206}.bl-toast.out{opacity:0;transform:translateY(6px);transition:all .4s}
@keyframes blt{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* persistent nav: current page + wallet menu */
.tn-right{position:relative;overflow:visible}
.tn-link.on{color:#CBF806;border-color:rgba(203,248,6,.55);background:rgba(203,248,6,.06)}
.tn-menu{display:none;position:absolute;right:0;top:calc(100% + 8px);min-width:220px;background:#0f1116;border:1px solid #2a2f3f;border-radius:12px;padding:8px;box-shadow:0 14px 34px rgba(0,0,0,.6);z-index:60}
.tn-menu.open{display:block}
.tn-menu-addr{font-family:'Space Mono',monospace;font-size:11px;color:#9aa0aa;padding:6px 8px 8px;word-break:break-all;border-bottom:1px solid #22252d;margin-bottom:6px}
.tn-menu-lab{font-family:'Space Mono',monospace;font-size:11px;color:#9aa0aa;padding:2px 8px 8px;border-bottom:1px solid #22252d;margin-bottom:6px}.tn-menu-lab b{color:#CBF806}.tn-menu-lab:empty{display:none}
.tn-menu-item{display:block;width:100%;text-align:left;font-family:'Space Mono',monospace;font-weight:700;font-size:12px;color:#f5f4f0;background:transparent;border:1px solid transparent;border-radius:8px;padding:9px 10px;cursor:pointer}
.tn-menu-item:hover{background:#2a1206;color:#ff6a1a;border-color:rgba(255,106,26,.5)}
@media(max-width:560px){.tn-right{gap:6px}.tn-link{padding:8px 9px;font-size:11px}.tn-logo span{display:none}}

/* ---- mobile: hamburger menu (CSS-only, checkbox toggle) ---- */
.tn-tog{display:none}
.tn-actions{display:flex;align-items:center;gap:8px;position:relative;order:3}
.tn-right{order:2;margin-left:auto}
.tn-burger{display:none;width:42px;height:42px;border:1px solid #22252d;border-radius:10px;background:#0f1116;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:none}
.tn-burger span{display:block;width:18px;height:2px;background:#f5f4f0;border-radius:2px;transition:transform .2s,opacity .2s}
.tn-tog:checked ~ .tn-actions .tn-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.tn-tog:checked ~ .tn-actions .tn-burger span:nth-child(2){opacity:0}
.tn-tog:checked ~ .tn-actions .tn-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:760px){
  .topnav{flex-wrap:wrap;height:auto;min-height:60px;padding:9px 12px;gap:8px}
  .tn-actions{margin-left:auto;order:2}
  .tn-burger{display:flex}
  .tn-right{order:3;display:none;width:100%;flex-direction:column;align-items:stretch;gap:6px;padding:6px 0 4px;margin-left:0}
  .tn-tog:checked ~ .tn-right{display:flex}
  .tn-link{display:block;text-align:center;padding:11px 14px;font-size:12px}
  .tn-btn{font-size:9px;padding:11px 12px}
  .tn-menu{right:0;top:calc(100% + 8px)}
}

.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}
[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}

/* WALLET PICKER (2026-10-02): several injected wallets -> the player chooses */
.bl-pick{position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:16px}
.bl-pick-box{background:#0c0e12;border:2px solid #CBF806;border-radius:14px;padding:18px;width:min(380px,100%);box-shadow:0 0 40px rgba(203,248,6,.25)}
.bl-pick-h{font-family:'Press Start 2P','Space Mono',monospace;font-size:11px;color:#f4f6f0;margin-bottom:8px}
.bl-pick-s{font-family:'Space Mono',monospace;font-size:11px;color:#9aa3b5;line-height:1.5;margin-bottom:12px}
.bl-pick-btn{display:flex;align-items:center;gap:12px;width:100%;margin-top:8px;padding:10px 12px;border-radius:10px;border:1px solid #2a2f3a;background:#13161c;color:#f4f6f0;font-family:'Space Mono',monospace;font-size:13px;cursor:pointer;text-align:left}
.bl-pick-btn:hover{border-color:#CBF806}.bl-pick-btn img{width:28px;height:28px;border-radius:7px}
.bl-pick-cancel{margin-top:12px;background:transparent;border:0;color:#9aa3b5;font-family:'Space Mono',monospace;font-size:11px;cursor:pointer;text-decoration:underline}

/* war.css */
/* BLOCK_LAB — /war : the Colony Block War mock app (7 screens). Pixel/mono system, CSP-safe (no inline styles). */
:root{--g:#CBF806;--o:#ff6a1a;--gold:#d4af37;--bg:#000;--panel:#0e1116;--line:#23262e;--ink:#f5f4f0;--dim:#9aa0aa;
  --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}
.wnav{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;padding:12px 16px;background:rgba(0,0,0,.78);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--pixel);font-size:12px;color:var(--ink)}
.brand img{width:24px;height:24px}.brand b{color:var(--g);font-weight:400}.brand span{color:var(--dim);font-family:var(--mono);font-size:12px}
.wnav .sp{flex:1}
.home{font-size:12px;color:var(--dim);font-weight:700}.home:hover{color:var(--ink)}
.app{max-width:520px;margin:0 auto;padding:10px 14px 80px}
.steps{display:flex;gap:6px;overflow-x:auto;padding:8px 0 12px;scrollbar-width:none}.steps::-webkit-scrollbar{display:none}
.steps button{font-family:var(--pixel);font-size:9px;padding:9px 10px;border-radius:999px;background:#0e1116;border:1px solid var(--line);color:var(--dim);white-space:nowrap;cursor:pointer}
.steps button.on{color:#0a0b0e;background:var(--g);border-color:var(--g)}
.scr{display:none}.scr.active{display:block;animation:win .35s ease}
@keyframes win{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.eyebrow{font-size:10px;color:var(--g);letter-spacing:.14em;text-transform:uppercase;margin:6px 0 4px}
h1{font-family:var(--pixel);font-size:15px;line-height:1.55;margin:4px 0 8px;color:var(--ink)}
h1.center{text-align:center}h1 .g{color:var(--g)}h1 .o{color:var(--o)}
p{font-size:12px;line-height:1.65;color:var(--dim);margin:0 0 10px}
.wcard{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:14px;margin:10px 0}
.wcard.g{border-color:rgba(203,248,6,.55)}.wcard.o{border-color:rgba(255,106,26,.6)}.wcard.gold{border-color:rgba(212,175,55,.6)}
.k{font-size:10px;color:var(--dim);letter-spacing:.06em;text-transform:uppercase}
.v{font-family:var(--pixel);font-size:12px;color:var(--g);margin-top:5px;line-height:1.4}.v.o{color:var(--o)}.v.gold{color:var(--gold)}.v.w{color:var(--ink)}
.row{display:flex;gap:10px}.row>*{flex:1;min-width:0}
.mt6{margin-top:6px}.mt8{margin-top:8px}.mt12{margin-top:12px}
.btn{display:flex;align-items:center;justify-content:center;font-family:var(--pixel);font-size:10px;padding:14px 12px;border-radius:999px;margin:10px 0 0;cursor:pointer;line-height:1.3;text-align:center;border:2px solid var(--g);background:var(--g);color:#0a0b0e;transition:transform .12s}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:rgba(203,248,6,.5)}
.btn.o{background:var(--o);border-color:var(--o);color:#0a0b0e}
.btn.sm{padding:10px;font-size:9px;margin-top:8px}
.actions{display:flex;gap:10px;margin-top:10px}.actions .btn{flex:1;margin:0}
.field{margin:8px 0}.field label{display:block;font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.field .in{background:#090b0f;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:12px;color:var(--ink)}.field .in b{color:var(--g)}
.chip{display:inline-block;font-size:10px;padding:5px 9px;border:1px solid var(--line);border-radius:999px;color:var(--dim);margin:3px 3px 0 0;cursor:pointer}
.chip.on{border-color:var(--g);color:var(--g)}
.blk{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:11px}.blk:last-child{border-bottom:0}
.sq{width:26px;height:26px;border-radius:6px;background:var(--g);flex:none}.sq.lo{background:#3a3f48}.sq.o{background:var(--o)}.sq.gold{background:var(--gold)}
.pts{margin-left:auto;font-family:var(--pixel);font-size:10px;color:var(--g);white-space:nowrap}.pts.lo{color:#5c6473}
.bar2{height:10px;border-radius:6px;background:#1a1d24;overflow:hidden;margin-top:6px}.bar2 i{display:block;height:100%;background:var(--g);animation:barin 1.1s cubic-bezier(.2,.8,.2,1)}.bar2 i.o{background:var(--o)}
.bar2 i.w92{width:92%}.bar2 i.w100{width:100%}
@keyframes barin{from{width:0}}
.cd{font-family:var(--pixel);font-size:24px;color:var(--ink);text-align:center;margin:8px 0 2px;letter-spacing:.02em}
.cd.sm{font-size:12px;text-align:left;margin:0;color:var(--o)}
input.dial{-webkit-appearance:none;appearance:none;width:100%;height:14px;border-radius:8px;background:linear-gradient(90deg,var(--g),var(--o));margin:12px 0 6px;outline:none}
input.dial::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:8px;background:#fff;border:3px solid #0a0b0e;cursor:pointer}
input.dial::-moz-range-thumb{width:30px;height:30px;border-radius:8px;background:#fff;border:3px solid #0a0b0e;cursor:pointer}
.wall{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin-top:8px}.wall i{display:block;aspect-ratio:1;border-radius:4px;background:#1a1414;border:1px solid #2a1e1e}.wall i.e{background:var(--o)}
.split{font-size:11px}.split div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line)}
.split div:last-child{border-bottom:0;font-family:var(--pixel);font-size:10px;color:var(--gold)}
.mini{font-size:10px;color:var(--dim);line-height:1.55}
.link{background:#090b0f;border:1px dashed var(--g);border-radius:10px;padding:10px;font-size:10px;color:var(--g);word-break:break-all;margin-top:8px}
.wfoot{text-align:center;font-size:10px;color:#5c6473;padding:18px 10px 0;line-height:1.6}
.app{overflow:hidden}
.wnav{flex-wrap:nowrap;min-width:0}.wnav .brand{min-width:0}.wnav .brand span{white-space:nowrap}
@media (max-width:520px){.wnav{gap:8px;padding:12px 12px}.wnav .home{display:none}.brand{font-size:11px}.fxtoggle{font-size:10px;padding:7px 10px}h1{font-size:14px}.cd{font-size:20px}.v{font-size:11px}}
@media (min-width:700px){.app{max-width:560px}h1{font-size:17px}}

/* live dApp bits */
.connect{font-family:var(--pixel);font-size:9px;padding:10px 12px;border-radius:999px;background:var(--g);color:#0a0b0e;border:2px solid var(--g);cursor:pointer;white-space:nowrap}
.wnote{font-size:11px;line-height:1.5;padding:9px 12px;border-radius:12px;border:1px solid var(--line);background:#0e1116;color:var(--dim);margin:6px 0 4px;word-break:break-word}
.wnote.ok{border-color:rgba(203,248,6,.5);color:var(--g)}.wnote.warn{border-color:rgba(255,106,26,.6);color:var(--o)}.wnote.info{color:var(--ink)}
input.in{width:100%;font-family:var(--mono);font-size:12px;color:var(--g);background:#090b0f;border:1px solid var(--line);border-radius:10px;padding:10px 12px;outline:none}
input.in:focus{border-color:var(--g)}
input.in::placeholder{color:#4a505b}
.btn.sm.ghost{background:transparent;color:var(--ink)}
@media (max-width:520px){.connect{font-size:8px;padding:9px 10px}}

/* sealed -> reveal */
.rvimg{width:100%;max-width:288px;image-rendering:pixelated;display:block;margin:0 auto 6px;border-radius:18px;background:#07080b}
.rvimg.crack{animation:crack .7s cubic-bezier(.2,.9,.2,1)}
@keyframes crack{0%{transform:scale(.94) rotate(-1.5deg);filter:brightness(2.2) saturate(1.4)}60%{transform:scale(1.03);filter:brightness(1.3)}100%{transform:none;filter:none}}
.cd2{font-family:var(--pixel);font-size:15px;color:var(--o);margin-top:4px;line-height:1.4}
#rv-act{margin-top:12px}

[hidden]{display:none!important}

.btn.gold{background:#d4af37;border-color:#d4af37;color:#0a0b0e}
.btn.o{background:var(--o);border-color:var(--o);color:#0a0b0e}

/* ============================================================
   WAR SCREENS — 2026-09-13 redesign layer.
   Restyles the existing class vocabulary rather than replacing the
   markup: war.js binds ~60 ids plus .chip / .cd / #steps button, so
   rebuilding the HTML would mean rewriting its whole binding layer.
   ============================================================ */

.scr{max-width:640px;margin:0 auto}

/* Cards become panels with a hard offset shadow */
.scr .wcard{
  background:#12141a;border:2px solid #242838;border-radius:12px;
  padding:20px;box-shadow:6px 6px 0 rgba(0,0,0,.55);margin-bottom:16px;
}
.scr .wcard.g{border-color:#CBF806;box-shadow:6px 6px 0 rgba(0,0,0,.55),inset 0 0 16px rgba(203,248,6,.06)}
.scr .wcard.o{border-color:#ff6a1a;background:rgba(255,106,26,.05)}
.scr .wcard.gold{border-color:#d4af37;box-shadow:6px 6px 0 rgba(0,0,0,.55),inset 0 0 16px rgba(212,175,55,.07)}

/* Labels and values */
.scr .k{font-family:var(--mono);font-size:11px;color:#6b7386;letter-spacing:.04em;margin-bottom:6px}
.scr .v{font-family:var(--pixel);font-size:15px;color:#f4f6f0;line-height:1.5}
.scr .v.o{color:#ff6a1a}
.scr .v.w{color:#4fc3ff}
.scr .v.gold{color:#d4af37}
.scr .mini{font-family:var(--mono);font-size:12px;color:#6b7386;line-height:1.6}

/* Stat rows become bordered stat boxes */
.scr .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.scr .row > div{background:#171a21;border:1px solid #242838;border-radius:8px;padding:11px 13px}
.scr .row > div .k{margin-bottom:5px}

/* THE LOCK BAR — the lobby's countdown, given real presence.
   .cd is what war.js rewrites every second; it holds only the time. */
.lockbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:#171a21;border:2px solid #ff6a1a;border-radius:10px;
  padding:14px 18px;margin-bottom:18px;
  box-shadow:inset 0 0 18px rgba(255,106,26,.09);
}
.lockbar-k{font-family:var(--mono);font-size:11px;color:#6b7386;letter-spacing:.14em;text-transform:uppercase}
.lockbar-t{
  font-family:var(--pixel);font-size:22px;color:#ff6a1a;line-height:1;
  font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(255,106,26,.45);
}
@media(max-width:520px){.lockbar{justify-content:center;text-align:center}.lockbar-t{font-size:17px}}

/* Comparison bars */
.scr .bar2{height:12px;background:#0b0c10;border:1px solid #242838;border-radius:4px;overflow:hidden;margin-top:8px}
.scr .bar2 i{display:block;height:100%;background:#CBF806}
.scr .bar2 i.o{background:#ff6a1a}

/* Segmented chips */
.scr .fgroup{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin-bottom:12px}
.scr .chip{
  font-family:var(--pixel);font-size:10px;color:#6b7386;text-align:center;
  background:#171a21;border:2px solid #242838;border-radius:6px;padding:12px 6px;cursor:pointer;
}
.scr .chip.on{background:#12141a;border-color:#CBF806;color:#CBF806;box-shadow:2px 2px 0 rgba(0,0,0,.45)}

/* Block rows (reveal / join eligibility) */
.scr .blk{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#171a21;border:2px solid #242838;border-radius:8px;
  padding:12px 14px;margin-bottom:8px;
}
.scr .blk .sq{font-family:var(--pixel);font-size:11px;color:#f4f6f0}
.scr .blk .pts{font-family:var(--pixel);font-size:11px;color:#CBF806}
.scr .blk .sq.lo,.scr .blk .pts.lo{color:#6b7386}
.scr .blk:has(.lo){opacity:.6;border-color:#242838}

/* Buttons */
.scr .btn{
  display:block;width:100%;text-align:center;
  font-family:var(--pixel);font-size:12px;line-height:1.4;
  padding:16px 14px;border-radius:6px;border:2px solid #CBF806;
  background:#CBF806;color:#0b0c10;box-shadow:4px 4px 0 rgba(0,0,0,.55);
  margin-bottom:10px;
}
.scr .btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(0,0,0,.55)}
.scr .btn.ghost{background:#171a21;color:#f4f6f0;border-color:#242838}
.scr .btn.o{background:#ff6a1a;border-color:#ff6a1a;color:#0b0c10}
.scr .btn.gold{background:#d4af37;border-color:#d4af37;color:#0b0c10}
.scr .btn.sm{font-size:11px;padding:13px 12px}
.scr .actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.scr .actions .btn{margin-bottom:0}

/* Inputs */
.scr .field{margin-bottom:14px}
.scr input.in{
  width:100%;background:#171a21;border:2px solid #242838;border-radius:6px;
  padding:13px 15px;color:#f4f6f0;font-family:var(--mono);font-size:13px;
}
.scr input.in:focus{border-color:#CBF806;outline:none}

/* Proof / invite link */
.scr .link{
  background:#0b0c10;border:1px solid #242838;border-radius:6px;
  padding:11px 13px;font-family:var(--mono);font-size:12px;color:#CBF806;word-break:break-all;
}

/* Reveal countdown + art */
.scr .cd2{font-family:var(--pixel);font-size:15px;color:#ff6a1a;font-variant-numeric:tabular-nums}
.scr .rvimg{border:2px solid #242838;border-radius:10px;background:#171a21}

/* Ash wall */
/* (earlier wall rules removed - superseded by the block-art wall below) */

/* lobby timeline (OPEN → LATE → LOCK → RESOLVE) */
.tl{margin:10px 0 4px}
.tl-bar{position:relative;height:8px;border-radius:6px;background:#1a1d24;overflow:visible}
.tl-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--g),var(--o));width:0;transition:width .9s linear}
.tl-bar b{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--o);box-shadow:0 0 12px var(--o);transition:left .9s linear}
.tl-marks{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9px;color:var(--dim);letter-spacing:.06em;margin-top:6px}
.tl-marks span:nth-child(3),.tl-marks span:nth-child(4){color:var(--o)}
.center{text-align:center}
.bar2 i{transition:width .8s cubic-bezier(.2,.8,.2,1)}

/* WALL OF THE FALLEN — real block art, not empty squares.
   Tiles cycle through the nine kinds by position; `.e` is a burned block and
   keeps the ember outline, the rest are ash-grey with a hairline. The earlier
   redesign layer styled only `i.e`, which left every other cell invisible. */
.scr .wall{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(22px,1fr));
  gap:5px;margin-top:12px;
}
.scr .wall i{
  display:block;aspect-ratio:1;border-radius:3px;
  background-size:cover;background-position:center;
  border:1px solid #2a2320;
  filter:grayscale(.92) brightness(.34);     /* still standing, but not the subject */
}
/* The fallen show their real art at full colour -- these tiles are mostly dark
   rock at 22px, so any ember tint crushes them to black and only the glyph
   highlight survives. The burn is carried by the outline, not by filtering. */
.scr .wall i.e{
  border:1px solid #ff6a1a;
  filter:none;
  box-shadow:0 0 8px rgba(255,106,26,.45);
}
/* The tiles carry NO artwork. They used to paint the nine-kind SVGs, which are the old renderer's vocabulary
   and match nothing a block looks like now. Standing tiles are crushed to near-black anyway, but the fallen
   ones run filter:none and showed that stale art at full colour, which made the war page's most prominent
   picture a lie. An abstract grid is honest; real art can come back here once blocks exist to read it from. */
/* Artwork is back on the tiles, because there is now art that matches what a block actually looks like.
   Nine blocks rendered by the live renderer's own maths (tools/rh_chain.py, proven byte-identical to
   BlockArtRH) and written to /blocks/fallen1-9.svg. Picked for legibility at 22px — contrast first,
   solid silhouette second — one per faction plus three.
   They are REPRESENTATIVE, not the blocks that actually burned: nothing is minted yet, so there is no
   real id to read art from. When blocks exist, this wall should read their true art by id instead. */
.scr .wall i{background-color:#1a1512}
.scr .wall i:nth-child(9n+1){background-image:url('/blocks/fallen1.svg')}
.scr .wall i:nth-child(9n+2){background-image:url('/blocks/fallen2.svg')}
.scr .wall i:nth-child(9n+3){background-image:url('/blocks/fallen3.svg')}
.scr .wall i:nth-child(9n+4){background-image:url('/blocks/fallen4.svg')}
.scr .wall i:nth-child(9n+5){background-image:url('/blocks/fallen5.svg')}
.scr .wall i:nth-child(9n+6){background-image:url('/blocks/fallen6.svg')}
.scr .wall i:nth-child(9n+7){background-image:url('/blocks/fallen7.svg')}
.scr .wall i:nth-child(9n+8){background-image:url('/blocks/fallen8.svg')}
.scr .wall i:nth-child(9n+9){background-image:url('/blocks/fallen9.svg')}
.scr .wall i.e{background-color:#2b1a12}

/* reveal screen: multi-select + per-row activate */
.scr .rvbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px;padding-bottom:10px;border-bottom:1px dashed #2a2f3f}
.scr .rvall{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:#9aa3b5;cursor:pointer;user-select:none}
.scr .rvbar .btn.sm{margin:0;padding:11px 14px;font-size:10px;flex:1;min-width:200px}
.scr .btn.dis{opacity:.45;pointer-events:none}
.scr .rvck,.scr #rv-sel-all{width:18px;height:18px;accent-color:#CBF806;cursor:pointer;flex:none;margin:0}
.scr .blk.sealed{border-style:dashed}
.scr .blk.sealed:has(.rvck:checked){border-color:#CBF806;background:#1b1f14}
.scr .blk.cur{border-color:#3d4356}
.scr .blk .bname{color:inherit;text-decoration:none;font-family:var(--pixel);font-size:11px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scr .blk .bname:hover{color:#CBF806}
.scr .blk .btn.rvone{margin:0;padding:9px 12px;font-size:10px;flex:none;width:auto}
.scr .blk.sealed:has(.lo){opacity:1}
.scr .blk.sealed .sq.lo{opacity:.55}

/* MY WAR strip + colony browser + search row */
.scr .inrow,.inrow{display:flex;gap:8px;align-items:stretch}.inrow .in{flex:1;min-width:0;margin:0}.inrow .btn.sm{margin:0;padding:12px 16px;white-space:nowrap;width:auto;flex:none}
.mywar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:10px 0 4px;padding:12px 14px;border:2px solid #CBF806;border-radius:10px;background:#141a0c;font-family:var(--mono);font-size:12px;color:#f4f6f0;line-height:1.5}
.mywar b{font-family:var(--pixel);font-size:10px;color:#CBF806;font-weight:400}.mywar .mw-k{font-family:var(--pixel);font-size:8px;color:#8fae00;letter-spacing:.06em;margin-right:4px}
.mywar .mw-vs{color:#ff6a1a;font-family:var(--pixel);font-size:9px}.mywar .mw-ph{color:#ff6a1a;font-family:var(--pixel);font-size:9px}.mywar .mw-dim{color:#9aa3b5}
.mywar .mw-go{margin-left:auto;font-family:var(--pixel);font-size:9px;color:#0b0c10;background:#CBF806;padding:8px 12px;border-radius:999px;text-decoration:none;white-space:nowrap}.mywar .mw-go:hover{background:#ff6a1a}
.cclist{display:grid;gap:8px;margin-top:10px;max-height:420px;overflow:auto}
.cc{border:2px solid #242838;border-radius:8px;background:#171a21;padding:10px 12px;display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center}
.cc.open{border-color:#3d5a1a}.cc.on{border-color:#CBF806;background:#1b1f14}
.cc .cc-h{display:flex;align-items:baseline;gap:8px;grid-column:1}.cc .cc-h b{font-family:var(--pixel);font-size:10px;color:#f4f6f0;font-weight:400}.cc .cc-id{font-family:var(--mono);font-size:10px;color:#6b7386}
.cc .cc-m{grid-column:1;font-family:var(--mono);font-size:11px;color:#9aa3b5;line-height:1.5}.cc .cc-e0{color:#2fe38a}.cc .cc-e1,.cc .cc-e2{color:#ffb454}.cc .cc-war{color:#ff6a1a}
.cc .btn.cc-go{grid-column:2;grid-row:1/3;margin:0;padding:9px 10px;font-size:9px;width:auto;white-space:nowrap}
@media(max-width:420px){.cc{grid-template-columns:1fr}.cc .btn.cc-go{grid-column:1;grid-row:auto}.mywar .mw-go{margin-left:0}}
.scr .mlist{max-height:260px;overflow:auto}.scr .mlist .blk{padding:8px 12px;margin-bottom:6px}
.scr #jn-entryf{margin:6px 0 8px;flex-wrap:wrap}.scr #jn-entryf .chip{font-size:9px;padding:8px 10px}

/* HQ: big shiny challenge banner + join requests */
.scr .challenge{margin:12px 0 14px;padding:18px 16px;border:3px solid #ff6a1a;border-radius:12px;background:linear-gradient(135deg,#2a1206,#160b04);text-align:center;box-shadow:0 0 24px rgba(255,106,26,.55),inset 0 0 30px rgba(255,106,26,.18);animation:chpulse 1.6s ease-in-out infinite}
@keyframes chpulse{0%,100%{box-shadow:0 0 18px rgba(255,106,26,.45),inset 0 0 24px rgba(255,106,26,.15)}50%{box-shadow:0 0 44px rgba(255,140,60,.95),inset 0 0 40px rgba(255,106,26,.32)}}
.scr .challenge .ch-k{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#ffb454}
.scr .challenge .ch-by{font-family:var(--pixel);font-size:26px;line-height:1.35;color:#fff;text-shadow:0 0 14px #ff6a1a,0 0 30px #ff6a1a;margin:8px 0 4px;word-break:break-word}
.scr .challenge .ch-war{font-family:var(--mono);font-size:12px;color:#ffd7b8;margin-bottom:12px}
.scr .challenge .ch-btn{background:#CBF806;border-color:#CBF806;color:#0b0c10;font-size:12px;padding:16px;margin:0;animation:chbtn 1.2s ease-in-out infinite}
@keyframes chbtn{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.scr .reqlist{display:grid;gap:6px;margin-top:8px;max-height:360px;overflow:auto}
.scr .blk.req{flex-wrap:wrap;gap:8px 10px}.scr .blk.req .bname{display:flex;flex-direction:column;gap:2px;white-space:normal}.scr .blk.req .bname b{font-family:var(--pixel);font-size:10px;font-weight:400}
.scr .blk.req .req-i{font-family:var(--mono);font-size:11px;color:#9aa3b5}.scr .blk.req .req-n{font-family:var(--mono);font-size:11px;color:#ffb454}
.scr .blk.req .btn.ghost{background:transparent;color:#ff8aa3;border-color:#3a1420}
@media(max-width:420px){.scr .challenge .ch-by{font-size:20px}}
/* CSP here is style-src 'self' with no unsafe-inline, so visibility must be a class, never element.style.
   The most-$LAB field is hidden until the deployed set actually has that share. */
.is-off{display:none !important}

/* lobby skeleton (2026-09-28): the card keeps its true shape while the chain is read, or when there is no war yet -
   no invented names or numbers. .sk elements shimmer while the lobby section carries .lb-loading; they sit flat under .lb-none */
.sk{display:inline-block;border-radius:4px;background:#1a1d24;color:transparent!important;min-height:1em;vertical-align:middle}
.sk-name{width:9ch;height:.95em}.sk-num{width:6ch;height:1em}
.lb-loading .sk{background:linear-gradient(90deg,#1a1d24 25%,#262a35 50%,#1a1d24 75%);background-size:200% 100%;animation:lbsk 1.2s linear infinite}
@keyframes lbsk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.lb-wars{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:0 0 10px}
.lb-wars .chip{cursor:pointer}.lb-wars .chip small{color:var(--dim);margin-left:6px}

/* colony setup checklist + rules card (2026-09-28) */
.setup-bar{height:8px;border-radius:4px;background:#171a21;overflow:hidden;margin:8px 0}.setup-bar i{display:block;height:100%;background:var(--g);width:0;transition:width .4s}
.setup-list{display:grid;gap:6px}
.setup-list .st{display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:center;font-family:var(--mono);font-size:12px;color:#c9cfda;padding:6px 8px;border:1px solid #242838;border-radius:8px;background:#0f1116}
.setup-list .st.ok{color:#9aa3b5}.setup-list .st .ic{font-size:14px}.setup-list .st.ok .ic{color:var(--g)}.setup-list .st.todo .ic{color:var(--o)}
.setup-list .st a{color:var(--g);font-size:11px;text-decoration:underline;cursor:pointer;white-space:nowrap}
table.rules{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px;margin-top:6px}
table.rules td{padding:5px 6px;border-bottom:1px solid #171a21;vertical-align:top}table.rules td:first-child{color:#9aa3b5;width:38%}table.rules td b{color:#f4f6f0}
table.rules .ok{color:var(--g)}table.rules .warn{color:var(--o)}

.cc .cc-loot{color:#c9cfda}.cc .cc-loot b{font-family:var(--mono);font-weight:700;color:#CBF806}.cc .cc-dim{color:#6b7386}

#lb-king.warn{border-color:var(--o);box-shadow:0 0 0 2px rgba(255,106,26,.25)}#lb-king.warn .k{color:var(--o)}

/* grouped war navigation (2026-09-29): a label per group, the buttons unchanged */
.steps{align-items:center;gap:10px;flex-wrap:wrap;overflow:visible}.steps-g{display:inline-flex;align-items:center;gap:6px;padding:4px 8px 4px 4px;border:1px solid var(--line);border-radius:999px;background:#0a0c10}
.steps-k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding:0 4px 0 8px;white-space:nowrap}
.steps-live{color:#0a0b0e}.steps button:not(.on) .steps-live{color:var(--g)}
.mt6{margin-top:6px}.pow-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cc-ok{color:#2fe38a}.cc-no{color:#ffb98a}.fgroup.dis{opacity:.5;pointer-events:none}

/* 2026-09-29 findings: form contrast (03), locked actions with a visible reason (10) */
#s-create .field label,#s-join .field label{color:#dfe3ea;font-size:11px}
#s-create .field label .mini{color:#b9bfca;font-size:11px;text-transform:none;letter-spacing:0}
#s-create input.in{color:#f5f4f0;font-size:13px;border-color:#3a3f4b}#s-create input.in:focus{border-color:var(--g)}
input.in::placeholder{color:#7c8492}
#s-create .mini{color:#c3c8d1;font-size:11px}#s-create .k{color:#cfd4dc}
.wnote{color:#e3e6ec;border-color:#3a3f4b}.wnote.warn{color:#ffd1b3;border-color:#7a3a14;background:#1c0f07}
.why{font-size:11px;line-height:1.5;color:#ffb98a;margin:6px 2px 0}.why:empty{display:none}
.why::before{content:"\1F512  ";}
.cc.cc-sk{pointer-events:none}.cc.cc-sk i{display:block;height:12px;margin:8px 0;border-radius:6px;background:linear-gradient(90deg,#171a21,#232734,#171a21);background-size:200% 100%;animation:ccsk 1.3s linear infinite}.cc.cc-sk i:nth-child(1){width:45%;height:14px}.cc.cc-sk i:nth-child(2){width:80%}.cc.cc-sk i:nth-child(3){width:30%;height:24px;border-radius:999px}@keyframes ccsk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.cc-err{font-size:11px;line-height:1.6;color:#ffb98a;background:#1c0f07;border:1px solid #7a3a14;border-radius:10px;padding:12px}

/* VERSUS BAR (2026-10-02) */
.vs-canvas{display:block;width:100%;height:clamp(180px,30vw,250px);margin:4px 0 2px}
#lb-power-card,#rs-vs-card{will-change:transform}
#lb-power-card.vs-on .bar2{display:none}
@media(max-width:520px){.vs-canvas{height:170px}}
.vs-flash-overlay{position:fixed;inset:0;pointer-events:none;z-index:58;background:rgba(0,0,0,0)}
#lb-power-card,#rs-vs-card{overflow:visible;transform-origin:50% 50%}

/* THE BATTLE CARD (2026-10-02): the homepage war card, in the lobby */
.lb-battle-wrap{position:relative;margin:4px 0 18px}
.lb-edge{position:absolute;left:-18px;top:-18px;width:calc(100% + 36px);height:calc(100% + 36px);pointer-events:none;z-index:3}
.lb-battle{position:relative;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;isolation:isolate;transform-origin:50% 50%}
.lb-battle .lt-head{display:flex;justify-content:space-between;align-items:center;gap:14px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.1em;color:#9aa0aa;text-transform:uppercase;border-bottom:1px solid #22252d;padding-bottom:12px}
.lb-battle .lt-ph{display:inline-block;font-family:'Press Start 2P',monospace;font-size:9px;color:#0a0b0e;background:#CBF806;border-radius:5px;padding:4px 7px;margin-right:9px;letter-spacing:.06em}
.lb-battle .lt-ph.lock{background:#ff6a1a}
.lb-battle .lt-clock{font-family:'Press Start 2P',monospace;font-size:15px;color:#ff6a1a;font-variant-numeric:tabular-nums;text-shadow:0 0 12px rgba(255,106,26,.6)}
.lb-battle .lt-vs{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;margin:18px 0 4px}
.lb-battle .lt-side{display:grid;gap:4px;justify-items:start}.lb-battle .lt-side.lt-r{justify-items:end;text-align:right}
.lb-battle .lt-side b{font-family:'Press Start 2P',monospace;font-size:12px;color:#f5f4f0;font-weight:400;line-height:1.5;min-height:18px}
.lb-battle .lt-pwr{font-family:'Press Start 2P',monospace;font-size:24px;color:#CBF806;font-variant-numeric:tabular-nums;text-shadow:0 0 14px rgba(203,248,6,.55);min-height:30px}
.lb-battle .lt-r .lt-pwr{color:#ff6a1a;text-shadow:0 0 14px rgba(255,106,26,.55)}
.lb-battle .lt-k{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#9aa0aa}
.lb-battle .lt-x{font-family:'Press Start 2P',monospace;font-size:14px;color:#9aa0aa}
.lb-battle .lt-band{font-family:'Space Mono',monospace;font-size:11px;color:#9aa0aa;text-align:center;margin-top:8px}
.lb-battle .tl{margin:6px 0 2px}
.lb-battle .lb-fallback{display:grid;grid-template-columns:1fr 1fr;gap:12px}.lb-battle.vs-on .lb-fallback{display:none}
/* DRAMA: a border that breathes (faster as the lock nears), a clock that beats every second, a VS that crackles,
   a strike that lights the card in the striking colony's colour */
.lb-battle::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:-1;box-shadow:0 0 0 1px rgba(203,248,6,.55),0 0 34px rgba(203,248,6,.28),0 0 70px rgba(255,106,26,.16);opacity:.35;animation:lbbreathe var(--pulse,1.6s) ease-in-out infinite}
@keyframes lbbreathe{0%,100%{opacity:.25}50%{opacity:1}}
.lb-battle.lb-hot{border-color:rgba(255,106,26,.7)}
.lb-battle.lb-hot::before{box-shadow:0 0 0 2px rgba(255,106,26,.75),0 0 44px rgba(255,106,26,.45),0 0 90px rgba(203,248,6,.2)}
.lb-battle.lb-live .lt-clock{animation:lbbeat 1s steps(1) infinite}
.lb-battle.lb-hot .lt-clock{animation:lbbeat .5s steps(1) infinite;color:#fff;text-shadow:0 0 18px #ff6a1a,0 0 36px #ff6a1a}
@keyframes lbbeat{0%{transform:scale(1.14)}30%{transform:scale(1)}}
.lb-battle .lb-vsx{animation:lbvs 2.4s infinite}
@keyframes lbvs{0%,86%,100%{color:#9aa0aa;text-shadow:none;transform:none}88%{color:#fff;text-shadow:-2px 0 #CBF806,2px 0 #ff6a1a,0 0 18px #fff;transform:translateX(-2px) skewX(-8deg)}91%{color:#fff;text-shadow:2px 0 #CBF806,-2px 0 #ff6a1a;transform:translateX(2px) skewX(6deg)}94%{color:#CBF806;transform:none}}
.lb-battle.lb-hot .lb-vsx{animation-duration:1.1s}
.lb-battle.lb-zap-a{animation:lbzapa .45s ease-out}.lb-battle.lb-zap-b{animation:lbzapb .45s ease-out}
@keyframes lbzapa{0%{box-shadow:0 0 0 2px #CBF806,0 0 60px rgba(203,248,6,.8),inset 0 0 60px rgba(203,248,6,.25)}100%{box-shadow:none}}
@keyframes lbzapb{0%{box-shadow:0 0 0 2px #ff6a1a,0 0 60px rgba(255,106,26,.8),inset 0 0 60px rgba(255,106,26,.25)}100%{box-shadow:none}}
.lb-battle.lb-zap-a .lt-side:first-child .lt-pwr,.lb-battle.lb-zap-b .lt-r .lt-pwr{animation:lbpwr .45s ease-out}
@keyframes lbpwr{0%{transform:scale(1.25);filter:brightness(1.8)}100%{transform:none;filter:none}}
@media(max-width:720px){.lb-battle .lt-vs{grid-template-columns:1fr;gap:8px}.lb-battle .lt-side,.lb-battle .lt-side.lt-r{justify-items:center;text-align:center}.lb-battle .lt-pwr{font-size:20px}}
@media (prefers-reduced-motion:reduce){.lb-battle::before,.lb-battle .lt-clock,.lb-battle .lb-vsx,.lb-battle.lb-zap-a,.lb-battle.lb-zap-b,.lb-battle .lt-pwr{animation:none!important}.lb-edge{display:none}}
/* battle card fixes (2026-10-02): names stay on one line; VS centred when the sides stack */
.lb-battle .lt-side{min-width:0}
.lb-battle .lt-side b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-size:clamp(10px,1.6vw,12px)}
.lb-battle .lt-vs .lb-vsx{justify-self:center}
@media(max-width:720px){.lb-battle .lt-head{font-size:10px;letter-spacing:.06em}.lb-battle .lt-side b{font-size:12px}}
.lb-battle .lt-side b{font-size:clamp(9px,1.35vw,11px);letter-spacing:0}

/* the ElectricBorder replaces the card's own border and breathing glow (2026-10-02) */
.lb-battle.eb-on{border-color:transparent}
.lb-battle.eb-on::before{display:none}
.lb-battle.eb-on.lb-zap-a,.lb-battle.eb-on.lb-zap-b{animation:none}

/* ===== UI/UX package 2 Oct 2026 ===== */
/* 04/05 one main container: 1100 px like the homepage, responsive padding; forms stay narrower inside it */
.app{max-width:1100px;padding:10px 18px 80px}
#s-create,#s-spoils{max-width:780px;margin-left:auto;margin-right:auto}
#s-result{max-width:900px;margin-left:auto;margin-right:auto}
.steps{flex-wrap:wrap}
/* 06 Create Colony: labels, help, placeholders and errors readable on dark */
#s-create .k,#s-create .field label,#s-create label{color:#d7dce4}
#s-create .mini,#s-create .why,.why{color:#b8c0cc}
#s-create .in::placeholder,.in::placeholder{color:#8f98a8;opacity:1}
#s-create .wnote.warn,.why.bad{color:#ffb38a}
/* 01 the lobby card: compact like the homepage card - the info first, the bar small */
/* (2 Oct, user) the lobby bar is back at full size - the same fight effects as the result's "last pull" bar */
.lb-battle .lt-vs{margin:14px 0 2px}
.lb-battle .lt-pwr{font-size:22px}
.lb-battle .lt-ph.ex{background:#2a2f3a;color:#d7dce4}
.lb-battle.lb-demo .lt-clock{color:#5d6370;text-shadow:none;animation:none}
.lb-battle.lb-demo .lb-fallback{display:grid}
.lb-battle .lb-lastres{color:#CBF806;text-decoration:underline}
.lb-edge{display:none}
.lb-battle.eb-on .eb-background-glow{display:none}
.lb-battle::before{animation-duration:3.2s!important;opacity:.35}
.lb-battle .lb-vsx{animation:none}
/* 12 result: the celebration stays on the card */
#rs-vs-card.rs-glow{animation:rsglow 1.4s ease-out}
@keyframes rsglow{0%{box-shadow:0 0 0 2px #CBF806,0 0 40px rgba(203,248,6,.45)}100%{box-shadow:none}}
@media (prefers-reduced-motion:reduce){#rs-vs-card.rs-glow{animation:none}}
/* 05 (2 Oct): screens use the width their task needs - lobby, colony list, HQ and board full width; forms stay narrow */
.scr{max-width:none}
#s-create,#s-spoils{max-width:780px}
.lb-battle.lb-demo .vs-canvas{display:none}
/* all parallel wars strip (2 Oct) */
.lb-wars-k{font-family:'Space Mono',monospace;font-size:11px;color:#9aa0aa;align-self:center;margin-right:4px;width:100%;text-align:center}
.lb-wars{margin-bottom:14px}

/* an ended war's card (2 Oct): final state, calmer than a live war */
.lb-ended .lt-clock { color: var(--muted, #8a8f98); animation: none; }
.lb-ended #lb-vs { filter: saturate(.85); }
/* the sample war (2 Oct): a simulated war on the battle card when none is live - badge in violet, never the live colours */
.lb-battle.lb-sample .lt-ph.ex{background:#8a6cff;color:#0b0c10}
.lb-battle.lb-sample .lt-clock{color:#b9a8ff;text-shadow:none;animation:none}
/* 2026-10-03 font audit: the dropdowns (colony loot rule, crown pick) used the browser default (Arial) - same mono as the inputs */
select.in{width:100%;font-family:var(--mono);font-size:12px;color:var(--g);background:#090b0f;border:1px solid var(--line);border-radius:10px;padding:10px 12px;outline:none}
select.in:focus{border-color:var(--g)}
select.in option{font-family:var(--mono);background:#090b0f;color:#e8edf5}

/* 2026-10-03 SEO: one <h1> per page - the war screens' headings are <h2>, styled exactly like the old h1 */
.scr h2.glitch{font-family:var(--pixel);font-size:15px;line-height:1.55;margin:4px 0 8px;color:var(--ink);font-weight:400}
.scr h2.glitch .g{color:var(--g)}.scr h2.glitch .o{color:var(--o)}
@media (min-width:700px){.scr h2.glitch{font-size:17px}}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

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

/* nftcard.css */
/* BLOCK_LAB — NFT card (shared by dashboard, King-block picker, war lobby). Grid on desktop, one column on phones. */
.nft-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-top:10px}
@media(max-width:560px){.nft-grid{grid-template-columns:1fr}}
.nft{display:grid;grid-template-columns:96px 1fr;gap:12px;background:#0f1116;border:2px solid #242838;border-radius:12px;padding:12px;align-items:start;transition:border-color .15s}
.nft:focus-within{border-color:#4fc3ff}
.nft.sel{border-color:#CBF806;background:#141a10}
.nft.off{opacity:.6}
.nft-img img{width:96px;height:96px;border-radius:8px;image-rendering:pixelated;background:#171a21;display:block}
.nft-img img.broken{outline:1px dashed #39405a}
.nft-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.nft-h b{font-family:'Press Start 2P',monospace;font-size:10px;color:#f4f6f0;font-weight:400}
.nft-tier{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#CBF806;border:1px solid #3a4a10;border-radius:999px;padding:1px 7px}
.nft-m{font-family:'Space Mono',monospace;font-size:12px;color:#9aa3b5;line-height:1.6}.nft-m b{color:#f4f6f0}
.nft-kind{color:#c9cfda}
.nft-st{font-family:'Space Mono',monospace;font-size:12px;line-height:1.6;margin-top:2px}
.nft.home .nft-st{color:#2fe38a}.nft.staked .nft-st{color:#ff6a1a}.nft.resting .nft-st{color:#4fc3ff}.nft.burned .nft-st{color:#8a92a3}
.nft-st .ic{display:inline-block;width:1.2em;text-align:center}
.nft-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;grid-column:1/-1}
.nft-btn{font-family:'Space Mono',monospace;font-size:12px;font-weight:700;color:#0b0c10;background:#CBF806;border:1px solid #CBF806;border-radius:8px;padding:7px 11px;cursor:pointer;text-decoration:none;display:inline-block}
.nft-btn.ghost{background:transparent;color:#c9cfda;border-color:#39405a}
.nft-btn.ghost:hover{border-color:#CBF806;color:#f4f6f0}
.nft-btn:focus-visible{outline:2px solid #4fc3ff;outline-offset:2px}
.nft-btn[disabled],.nft-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.nft-note{font-family:'Space Mono',monospace;font-size:11px;color:#9aa3b5;width:100%;line-height:1.5}
.nft-empty,.nft-loading,.nft-error{font-family:'Space Mono',monospace;font-size:12px;color:#9aa3b5;padding:10px 4px}
.nft-error{color:#ff6a1a}

/* skeleton / empty / error (findings 20, 21) */
.nft-sk-wrap{display:contents}
.nft.nft-sk{pointer-events:none}
.nft.nft-sk .nft-img i,.nft.nft-sk .nft-body i{display:block;background:linear-gradient(90deg,#171a21 0%,#232734 50%,#171a21 100%);background-size:200% 100%;animation:nftsk 1.3s linear infinite;border-radius:6px}
.nft.nft-sk .nft-img i{width:96px;height:96px}
.nft.nft-sk .nft-body i{height:12px;margin:6px 0}.nft.nft-sk .l1{width:40%}.nft.nft-sk .l2{width:70%}.nft.nft-sk .l3{width:55%}.nft.nft-sk .l4{width:45%;height:26px!important;border-radius:8px!important}
@keyframes nftsk{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.nft.nft-sk i{animation:none}}
.nft-empty b,.nft-error b{color:#f4f6f0}.nft-empty .nft-btn,.nft-error .nft-btn{display:inline-block;margin-top:10px}
.nft-error{grid-column:1/-1;font-family:'Space Mono',monospace;font-size:12px;line-height:1.6;color:#ffb98a;background:#1c0f07;border:1px solid #7a3a14;border-radius:10px;padding:14px}

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

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