/* Self-hosted fonts (SIL OFL) — the CSP allows font-src 'self' only, so these must stay local. */
@font-face {
    font-family: "Press Start 2P";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/press-start-2p-latin.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;
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url("fonts/jetbrains-mono-latin.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;
}
@font-face {
    font-family: "DotGothic16";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/dotgothic16-kana-0.woff2") format("woff2");
    unicode-range: U+3028-303f, U+3094-3096, U+309f-30a0, U+30ee, U+30f7-30fa, U+30ff, U+3105-312f, U+3131-3163, U+3165-318e, U+3190-31bb, U+31c0-31c7;
}
@font-face {
    font-family: "DotGothic16";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/dotgothic16-kana-1.woff2") format("woff2");
    unicode-range: U+a8, U+2032, U+2261, U+2282, U+3090, U+30f1, U+339c, U+535c, U+53d9, U+56a2, U+56c1, U+5806, U+589f, U+59d0, U+5a7f, U+60e0, U+639f, U+65af, U+68fa, U+69ae, U+6d1b, U+6ef2, U+71fb, U+725d, U+7262, U+75bc, U+7768, U+7940, U+79bf, U+7bed, U+7d68, U+7dfb, U+814b, U+8207, U+83e9, U+8494, U+8526, U+8568, U+85ea, U+86d9, U+87ba, U+8861, U+887f, U+8fe6, U+9059, U+9061, U+916a, U+976d, U+97ad, U+9ece;
}
@font-face {
    font-family: "DotGothic16";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/dotgothic16-kana-2.woff2") format("woff2");
    unicode-range: U+25b3, U+30f5, U+4eae, U+4f46, U+4f51, U+5203, U+52ff, U+55a7, U+564c, U+565b, U+57f9, U+5805, U+5b64, U+5e06, U+5f70, U+5f90, U+60e8, U+6182, U+62f3, U+62fe, U+63aa, U+64a4, U+65d7, U+673a, U+6851, U+68cb, U+68df, U+6d1e, U+6e58, U+6e9d, U+77b3, U+7832, U+7c3f, U+7db4, U+7f70, U+80aa, U+80c6, U+8105, U+819d, U+8276, U+8679, U+8986, U+8c9d, U+8fc5, U+916c, U+9665, U+9699, U+96c0, U+9a19, U+ff8b;
}
@font-face {
    font-family: "DotGothic16";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/dotgothic16-kana-3.woff2") format("woff2");
    unicode-range: U+30f6, U+50ac, U+5178, U+51e6, U+5224, U+52dd, U+5883, U+5897, U+590f, U+5a5a, U+5bb3, U+5c65, U+5e03, U+5e2b, U+5e30, U+5eb7, U+6271, U+63f4, U+64ae, U+6574, U+672b, U+679a, U+6a29-6a2a, U+6ca2, U+6cc1, U+6d0b, U+713c, U+74b0, U+7981, U+7a0b, U+7bc0, U+7d1a, U+7d61, U+7fd2, U+822c, U+8996, U+89aa, U+8cac, U+8cbb, U+8d77, U+8def, U+9020, U+9152, U+9244, U+9662, U+967a, U+96e3, U+9759, U+ff16;
}
@font-face {
    font-family: "DotGothic16";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/dotgothic16-kana-4.woff2") format("woff2");
    unicode-range: U+a9, U+3010-3011, U+30e2, U+4e0b, U+4eca, U+4ed6, U+4ed8, U+4f53, U+4f5c, U+4f7f, U+53d6, U+540d, U+54c1, U+5730, U+5916, U+5b50, U+5c0f, U+5f8c, U+624b, U+6570, U+6587, U+6599, U+691c, U+696d, U+6cd5, U+7269, U+7279, U+7406, U+767a-767b, U+77e5, U+7d04, U+7d22, U+8005, U+80fd, U+81ea, U+8868, U+8981, U+89a7, U+901a, U+9023, U+90e8, U+91d1, U+9332, U+958b, U+96c6, U+9ad8, U+ff1a, U+ff1f;
}
@font-face {
    font-family: "DotGothic16";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/dotgothic16-kana-5.woff2") format("woff2");
    unicode-range: U+20, U+2027, U+3001-3002, U+3041-307f, U+3081-308f, U+3091-3093, U+3099-309a, U+309d-309e, U+30a1-30e1, U+30e3-30ed, U+30ef-30f0, U+30f2-30f4, U+30fb-30fe, U+ff0c, U+ff0e;
}

html {
    overflow-x: hidden;
}

/* NO1DSKI glitch (glitch.js): letters flip to their digit twins (.tw), and a
   proof pass sweeps the title, bits rolling under its head (.pf-head) and just
   behind it (.pf), each glyph flashing as it locks back in (.pf-lock). Colour
   and glow only: the monospaced pixel font keeps every glyph in place. */
.tw {
    color: var(--accent-color, #73ffc5);
}
.title .tw {
    text-shadow: 0 0 8px rgba(115, 255, 197, 0.6), 0 0 22px var(--glow-color, rgba(115, 255, 197, 0.25));
}
.pf {
    color: var(--green, #22d994);
    text-shadow: 0 0 8px rgba(34, 217, 148, 0.45);
}
.pf-head {
    color: var(--hover-color, #b3ffe0);
    text-shadow: 0 0 6px rgba(179, 255, 224, 0.9), 0 0 18px rgba(115, 255, 197, 0.75);
}
.pf-lock {
    color: var(--accent-color, #73ffc5);
    text-shadow: 0 0 12px rgba(115, 255, 197, 0.7);
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-bottom: 0;
}

.container {
    width: 100%;
    min-width: 0;
    flex: 1;
}

.container > *,
.calculator-wrapper > *,
.results-grid > *,
.pool-metrics-grid > *,
.stats-grid > * {
    min-width: 0;
}

.retro-table-container,
.table-container {
    max-width: 100%;
    overflow-x: auto;
}

.result-value,
.result-usd,
.fact-value,
.pool-share-value,
.stat-card-body,
.stat-value {
    overflow-wrap: anywhere;
}

.retro-footer {
    position: static;
    inset: auto;
    box-sizing: border-box;
    flex: none;
}

/* SITE: POOL CHAT — floating widget (chat.js), collapsed launcher bottom-left.
   Served same-origin from the chat sidecar via /api/chat; styles live here so
   the CSP style hashes in the six pages, _headers, and both pool Nginx
   configs stay frozen. */
.chat-launcher {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 18px;
    background: linear-gradient(180deg, #081713 0%, #020807 100%);
    color: var(--gold, #b3ffe0);
    border: 1px solid var(--border-color, #1a3a2f);
    font-family: inherit;
    font-size: 0.55em;
    letter-spacing: 2px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}
.chat-launcher:hover {
    color: #fff;
    border-color: var(--accent-color, #73ffc5);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), 0 0 12px rgba(115, 255, 197, 0.25);
}
.chat-launcher:focus-visible {
    outline: 1px solid var(--accent-color, #73ffc5);
    outline-offset: 3px;
}
.chat-launcher-open {
    display: none;
}
.chat-launcher-gem {
    display: flex;
    align-items: center;
    color: var(--accent-color, #73ffc5);
    animation: chat-gem-pulse 3.2s ease-in-out infinite;
}
/* letter-spacing adds a phantom space after the final glyph — cancel it so
   the icon + label sit optically dead-center in the launcher */
.chat-launcher-label {
    margin-right: -2px;
}
@keyframes chat-gem-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}
.chat-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-color, #73ffc5);
    color: var(--main-bg, #020807);
    border: 2px solid var(--main-bg, #020807);
    font-size: 0.8em;
    line-height: 1;
    letter-spacing: 0;
}
.chat-badge[hidden] {
    display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    .chat-launcher-gem {
        animation: none;
    }
}

.chat-panel {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    width: min(340px, calc(100vw - 78px));
    height: min(430px, 72vh);
    background: var(--main-bg, #020807);
    border: 2px solid var(--border-color, #1a3a2f);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
}
.chat-panel[hidden] {
    display: none !important;
}

.chat-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 10px;
    border-bottom: 1px solid var(--border-color, #1a3a2f);
}
/* The title keeps its size and stays on one line; a long nickname
   truncates instead of squeezing it */
.chat-title {
    flex: 1 0 auto;
    white-space: nowrap;
    color: var(--accent-color, #73ffc5);
    font-size: 0.6em;
    letter-spacing: 2px;
    text-shadow: 0 0 5px var(--glow-color, rgba(115, 255, 197, 0.25));
}
.chat-nick,
.chat-snd,
.chat-x {
    background: none;
    border: 1px solid var(--border-color, #1a3a2f);
    color: var(--muted, #9ab1a7);
    font-family: inherit;
    font-size: 0.52em;
    padding: 4px 7px;
    cursor: pointer;
}
.chat-nick {
    display: flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    padding: 4px 5px;
    white-space: nowrap;
}
.chat-nick-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-snd,
.chat-x {
    flex: none;
}
.chat-nick:hover,
.chat-snd:hover,
.chat-x:hover {
    color: var(--gold, #b3ffe0);
    border-color: var(--accent-color, #73ffc5);
}
.chat-snd-on {
    color: var(--gold, #b3ffe0);
    border-color: var(--accent-color, #73ffc5);
}

.chat-msgs {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
    background: rgba(0, 0, 0, 0.18);
}
.chat-msg {
    padding: 6px 10px;
    font-size: 0.55em;
    line-height: 1.8;
    overflow-wrap: anywhere;
}
.chat-time {
    color: var(--muted, #9ab1a7);
    opacity: 0.75;
    margin-right: 7px;
    font-size: 0.9em;
}
.chat-name {
    font-weight: bold;
    margin-right: 7px;
}
.chat-body {
    color: var(--text-color, #effff8);
}
.chat-msg-system {
    background: rgba(115, 255, 197, 0.07);
    border-left: 2px solid var(--accent-color, #73ffc5);
}
.chat-name-system {
    color: var(--gold, #b3ffe0);
    text-shadow: 0 0 5px var(--glow-color, rgba(115, 255, 197, 0.25));
}
.chat-msg-system .chat-body {
    color: var(--gold-soft, #73ffc5);
}
.chat-c0 { color: #b3ffe0; }
.chat-c1 { color: #22d994; }
.chat-c2 { color: #e8a397; }
.chat-c3 { color: #bff7ff; }
.chat-c4 { color: #c2aaff; }
.chat-c5 { color: #ffd27a; }
.chat-c6 { color: #8ff0e8; }
.chat-c7 { color: #ffbfd2; }

.chat-status {
    padding: 6px 10px;
    font-size: 0.5em;
    letter-spacing: 1px;
    color: var(--red-soft, #e8a397);
    border-top: 1px solid var(--border-color, #1a3a2f);
}
.chat-status[hidden] {
    display: none !important;
}

.chat-inputrow {
    display: flex;
    border-top: 1px solid var(--border-color, #1a3a2f);
}
.chat-input {
    flex: 1;
    min-width: 0;
    background: rgba(0, 0, 0, 0.25);
    border: 0;
    padding: 11px 10px;
    color: var(--text-color, #effff8);
    font-family: inherit;
    font-size: 0.55em;
}
.chat-input:focus {
    outline: 1px solid var(--accent-color, #73ffc5);
    outline-offset: -1px;
}
.chat-send {
    background: none;
    border: 0;
    border-left: 1px solid var(--border-color, #1a3a2f);
    color: var(--gold, #b3ffe0);
    font-family: inherit;
    font-size: 0.55em;
    letter-spacing: 1px;
    padding: 0 14px;
    cursor: pointer;
}
.chat-send:hover {
    background: rgba(115, 255, 197, 0.12);
}
.chat-send:disabled {
    color: var(--muted, #9ab1a7);
    cursor: default;
}

/* SITE: WORKERS TABLE — row cap controls (poolscript.js renders at most
   WORKER_ROW_CAP rows per group until SHOW ALL is clicked). */
.worker-table .wg-more {
    text-align: center;
}
.worker-table .wg-showall,
.worker-table .wg-showless {
    background: none;
    border: 1px solid var(--border-color, #1a3a2f);
    color: var(--muted, #9ab1a7);
    font: inherit;
    letter-spacing: 1px;
    padding: 5px 16px;
    margin: 2px 0;
    cursor: pointer;
}
/* Worker group bars: the calculated total keeps the rows' windows grid
   (.w-windows) and their inline padding, so it sits over the 10M values */
.worker-table td.worker-group.w-calc {
    padding-inline: 0.55rem;
}
/* The label and the REPORTED total give up their right padding (the next
   cell keeps its own), so the bars fit the column widths the rows set */
.worker-table td.worker-group.wg-label,
.worker-table td.worker-group.wg-reported {
    padding-right: 0;
}
/* Bar totals read like the column values beneath them: number, then a
   smaller unit, in the bar's dark-on-gold colours */
.worker-table .wg-total b {
    letter-spacing: 1px;
}
.worker-table .wg-total i {
    font-style: normal;
    font-size: 0.8em;
    margin-left: 5px;
    letter-spacing: 1px;
}
.worker-table .wg-showall:hover,
.worker-table .wg-showless:hover {
    color: var(--text-color, #effff8);
    border-color: var(--accent-color, #73ffc5);
}

/* SITE: BACKGROUND FX TOGGLE — nav-rail button injected by navrail.js,
   cycling neural-bg.js between FULL / LITE / OFF. Pinned to the rail bottom
   above the live stats block, and — like that block — invisible until the
   rail expands on hover (pointer-events off so the collapsed strip can't be
   clicked blind). Hidden on phones, where the rail never expands. */
.nav-rail-fx {
    margin-top: 0; /* the spacer below (.nav-rail::after) pins it */
    background: none;
    border: none;
    border-top: 1px solid var(--border-color, #1a3a2f);
    color: var(--muted, #9ab1a7);
    font: inherit;
    font-size: 0.6em;
    text-align: left;
    width: 100%;
    padding: 12px 14px;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: 1px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease 0.1s, color 0.2s ease;
}
.nav-rail:hover .nav-rail-fx {
    opacity: 1;
    pointer-events: auto;
}
.nav-rail-fx:hover {
    color: var(--hover-color, #b3ffe0);
}
.nav-rail .nav-rail-stats {
    margin-top: 0;
}
/* Slide-out rail: OTHER POOLS group (sister pools with their coin marks
   drawn inline in currentColor like every other rail icon). The heading
   reveals with the labels. */
.nav-rail-heading {
    padding: 6px 14px 2px;
    font-size: 0.5em;
    letter-spacing: 0.14em;
    color: var(--muted, #9ab1a7);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease 0.1s;
}
.nav-rail:hover .nav-rail-heading {
    opacity: 1;
}
/* Socials are the last thing in the rail, under the live stats. The bottom
   group (FX toggle, stats, socials) stays compact and the rail scrolls
   instead of clipping so the icons never fall off short windows. */
.nav-rail {
    box-sizing: border-box; /* height:100% now includes the rail padding, so the last icon is never clipped */
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}
.nav-rail::-webkit-scrollbar {
    display: none;
}
.nav-rail .nav-rail-stats {
    margin-bottom: 0;
    padding: 8px 14px;
    gap: 6px;
}
.nav-rail-fx {
    padding: 8px 14px;
}
.nav-rail-social .nav-rail-divider {
    margin-block: 4px;
}
/* While the rail is collapsed the FX toggle and the stats block are
   invisible anyway, so they take no space either: the social icons then sit
   at the visible foot of the strip on any window height. On hover they
   return above the socials. Phones never expand, so this also covers them. */
.nav-rail:not(:hover) .nav-rail-fx,
.nav-rail:not(:hover) .nav-rail-stats {
    display: none;
}
/* They still fade in and out with the labels (0.2s after a 0.1s pause), as on
   quantuski: an animation can start from display: none where a transition
   cannot, and `display` (allow-discrete) waits for the fade-out to finish */
.nav-rail:hover .nav-rail-fx,
.nav-rail:hover .nav-rail-stats {
    animation: nav-rail-reveal 0.2s ease 0.1s both;
}
.nav-rail:not(:hover) .nav-rail-fx,
.nav-rail:not(:hover) .nav-rail-stats {
    animation: nav-rail-hide 0.2s ease 0.1s both;
}
.nav-rail-stats {
    transition: opacity 0.2s ease 0.1s, display 0.3s allow-discrete;
}
.nav-rail-fx {
    transition: opacity 0.2s ease 0.1s, color 0.2s ease, display 0.3s allow-discrete;
}
@keyframes nav-rail-reveal {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes nav-rail-hide {
    from { opacity: 1; }
    to { opacity: 0; }
}
/* The rail's free space sits in one empty flex item between the page links
   and the bottom group (FX toggle, stats, socials), so that group stays at the
   foot whether or not the toggle and the stats are shown: they fade out in
   place when the rail closes instead of jumping up first, and the socials
   never move */
.nav-rail::after {
    content: "";
    margin-top: auto;
}
.nav-rail-fx,
.nav-rail-stats,
.nav-rail-social {
    order: 1;
}

/* === CRT power-off outro ===
   Played by navrail.js before hopping to another jetskipool.ai site
   (.nav-rail-index / .nav-rail-pool). It mirrors the crt-on intro each page
   keeps in its inline <style>: the screen collapses into the bright centre
   line, which then shrinks to a dot and goes dark, leaving the plain
   background the next site's power-on starts from. Lives here rather than
   inline so the CSP-hashed <style> blocks stay untouched. */
.page-overlay.crt-off {
    animation: crtPowerOff 0.5s cubic-bezier(0.55, 0, 0.1, 1) forwards;
}
.page-overlay.crt-off::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background: #d7ffed;
    box-shadow: 0 0 24px 6px var(--accent-color), 0 0 90px 24px rgba(115, 255, 197, 0.5);
    animation: crtLineOff 0.5s cubic-bezier(0.55, 0, 0.1, 1) forwards;
}
@keyframes crtPowerOff {
    0% { opacity: 0; }
    40%, 100% { opacity: 1; }
}
@keyframes crtLineOff {
    0% { transform: translateY(-50%) scaleX(1) scaleY(70); opacity: 0; }
    40% { transform: translateY(-50%) scaleX(1) scaleY(1); opacity: 1; }
    75% { transform: translateY(-50%) scaleX(0.03) scaleY(1); opacity: 1; }
    100% { transform: translateY(-50%) scaleX(0) scaleY(1); opacity: 0; }
}

/* Separator bar between inline items ("HASHRATE | 5M"): the pixel font's "|"
   in a muted tone with a small even gap, instead of " · ", whose spaces are a
   whole cell each in this monospace font. Margins are in em so the gap scales
   with each label; the left one is smaller to offset the letter-spacing that
   trails the word before it. Built by separated() / SEP_HTML in config.js. */
.sep {
    margin: 0 0.75em 0 0.5em;
    letter-spacing: 0;
    opacity: 0.5;
}

/* Workers summary: the wallet's reject rate ("0.4% STALE") in the accent
   colour, beside the green ACTIVE and red OFFLINE; past 2% it is b.warn (red) */
/* The summary sits in the pixel font's native 8px so ACTIVE / OFFLINE and both
   stale windows stay on the WORKERS row at 1280px beside the search box and
   the ALERTS toggle, even for a wallet with 1,000+ workers */
.workers-head .workers-summary {
    font-size: 0.5em;
}
.workers-summary b.stale {
    color: var(--accent-color);
}