/*
 * BEARPROOF HQ, v2 (17 Oct 2026). One stylesheet for the home page and /receipts.
 * Art direction: an arcade cabinet after dark. Ink-black, one bull green, gold for prizes, red for the bears.
 * Pixel display type (Jersey 10, the game's own font) for headlines and numbers, a plain sans for reading.
 */

@font-face {
    font-family: 'Jersey 10';
    src: url('/assets/fonts/jersey-10.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/assets/fonts/jetbrains-mono-400.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/assets/fonts/jetbrains-mono-700.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@property --spin {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

:root {
    --bg: #05070a;
    --bg-2: #080b0f;
    --card: #0b1015;
    --card-2: #10161d;
    --line: rgba(255, 255, 255, 0.075);
    --line-2: rgba(255, 255, 255, 0.14);
    --text: #eef4f0;
    --text-2: #b4c1bb;
    --muted: #75847e;
    --bull: #16e08a;
    --bull-2: #7bf5a6;
    --bull-deep: #0a8a52;
    --bull-ink: #03140c;
    --gold: #ffc53d;
    --gold-2: #ffe08a;
    --bear: #ff3b5c;
    --ice: #6fd8ff;
    --display: 'Jersey 10', 'Courier New', monospace;
    --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --sans:
        ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto,
        'Helvetica Neue', Arial, sans-serif;
    --r: 20px;
    --r-sm: 12px;
    --gut: clamp(16px, 4vw, 32px);
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --nav-h: 64px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 12px);
    -webkit-text-size-adjust: 100%;
    background: var(--bg);
}
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 400 17px/1.6 var(--sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    overflow-x: clip;
}
img,
canvas,
svg,
video,
iframe {
    display: block;
    max-width: 100%;
}
canvas[data-sprite],
canvas[data-icon],
.screen-poster,
.parade {
    image-rendering: pixelated;
}
a {
    color: var(--bull-2);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
a:hover {
    color: #fff;
}
button,
input,
textarea {
    font: inherit;
    color: inherit;
}
code {
    font: 400 0.88em var(--mono);
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line);
    white-space: nowrap;
}
h1,
h2,
h3 {
    margin: 0;
    font-weight: 400;
}
p {
    margin: 0;
}
ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}
:focus-visible {
    outline: 2px solid var(--bull);
    outline-offset: 3px;
    border-radius: 6px;
}
::selection {
    background: var(--bull);
    color: var(--bull-ink);
}
[hidden] {
    display: none !important;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.skip {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 100;
    padding: 10px 14px;
    background: var(--bull);
    color: var(--bull-ink);
    border-radius: 10px;
    font-weight: 700;
}
.skip:focus {
    top: 12px;
}
.wrap {
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 var(--gut);
}
.wrap.narrow {
    max-width: 860px;
}
.g {
    color: var(--bull);
}
.gold {
    color: var(--gold);
}
.r {
    color: var(--bear);
}
.fine {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
}
.dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bull);
    box-shadow: 0 0 0 0 rgba(22, 224, 138, 0.6);
    animation: ping 2s infinite;
    flex: none;
}
@keyframes ping {
    0% {
        box-shadow: 0 0 0 0 rgba(22, 224, 138, 0.55);
    }
    70% {
        box-shadow: 0 0 0 9px rgba(22, 224, 138, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(22, 224, 138, 0);
    }
}

/* ------------------------------------------------------------------ buttons */

.btn-play {
    --lift: 0px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 68px;
    padding: 0 34px 4px;
    border-radius: 16px;
    background: linear-gradient(180deg, #3ff0a0 0%, var(--bull) 55%, #10c97b 100%);
    color: var(--bull-ink);
    font: 400 40px/1 var(--display);
    letter-spacing: 0.03em;
    text-decoration: none;
    white-space: nowrap;
    box-shadow:
        0 6px 0 var(--bull-deep),
        0 10px 30px rgba(22, 224, 138, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transform: translateY(var(--lift));
    transition:
        transform 120ms var(--ease),
        box-shadow 120ms var(--ease),
        filter 120ms;
    overflow: hidden;
    isolation: isolate;
}
.btn-play svg {
    width: 22px;
    height: 22px;
    flex: none;
}
.btn-play::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        105deg,
        transparent 35%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 65%
    );
    transform: translateX(-120%);
    animation: shine 4.5s 1.2s infinite;
}
@keyframes shine {
    0%,
    70% {
        transform: translateX(-120%);
    }
    100% {
        transform: translateX(120%);
    }
}
.btn-play:hover {
    color: var(--bull-ink);
    --lift: -2px;
    filter: brightness(1.06);
    box-shadow:
        0 8px 0 var(--bull-deep),
        0 16px 44px rgba(22, 224, 138, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.btn-play:active {
    --lift: 5px;
    box-shadow:
        0 1px 0 var(--bull-deep),
        0 4px 16px rgba(22, 224, 138, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.btn-play.sm {
    min-height: 40px;
    padding: 0 18px 2px;
    border-radius: 11px;
    font-size: 24px;
    box-shadow:
        0 3px 0 var(--bull-deep),
        0 6px 18px rgba(22, 224, 138, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.btn-play.sm:active {
    --lift: 3px;
}
.btn-play.wide {
    width: 100%;
    font-size: 30px;
    min-height: 60px;
}

.btn-ghost,
.btn-line,
.btn-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 12px;
    font: 600 15px/1 var(--sans);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition:
        background 150ms,
        border-color 150ms,
        color 150ms,
        transform 120ms var(--ease);
}
.btn-ghost {
    min-height: 68px;
    padding: 0 26px;
    border: 1px solid var(--line-2);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text);
    font-size: 16px;
}
.btn-ghost:hover {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}
.btn-line {
    border: 1px solid var(--line-2);
    background: transparent;
    color: var(--text);
}
.btn-line:hover {
    border-color: var(--bull);
    color: var(--bull-2);
}
.btn-solid {
    border: 0;
    background: var(--text);
    color: #05070a;
}
.btn-solid:hover {
    background: #fff;
    color: #05070a;
    transform: translateY(-1px);
}
.btn-solid:disabled,
.btn-line:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}
.btn-solid.sm,
.btn-line.sm {
    min-height: 40px;
    padding: 0 16px;
    font-size: 14px;
    border-radius: 10px;
}
.round {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line-2);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text);
    cursor: pointer;
    transition:
        border-color 150ms,
        background 150ms;
}
.round:hover {
    border-color: var(--bull);
    background: rgba(22, 224, 138, 0.08);
}
.round svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(22, 224, 138, 0.35);
    background: rgba(22, 224, 138, 0.08);
    color: var(--bull-2);
    font: 700 11px/1.2 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.tag.live::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bull);
    animation: ping 2s infinite;
}
.tag.gold {
    border-color: rgba(255, 197, 61, 0.4);
    background: rgba(255, 197, 61, 0.08);
    color: var(--gold);
}
.tag.dim {
    border-color: var(--line-2);
    background: transparent;
    color: var(--muted);
}

/* ------------------------------------------------------------------ nav */

.nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    height: var(--nav-h);
    transition:
        background 250ms,
        border-color 250ms,
        backdrop-filter 250ms;
    border-bottom: 1px solid transparent;
}
.nav.solid {
    background: rgba(5, 7, 10, 0.78);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
    border-bottom-color: var(--line);
}
.nav-in {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 100%;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    text-decoration: none;
    font: 400 30px/1 var(--display);
    letter-spacing: 0.04em;
}
.brand:hover {
    color: #fff;
}
.brand img {
    width: 30px;
    height: 30px;
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
.nav-links a {
    padding: 8px 12px;
    border-radius: 10px;
    color: var(--text-2);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition:
        color 150ms,
        background 150ms;
}
.nav-links a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}
.nav-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.nav-live i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--muted);
}
.nav-live.on {
    color: #fff !important;
}
.nav-live.on i {
    background: var(--bear);
    box-shadow: 0 0 10px var(--bear);
    animation: blink 1s steps(2, start) infinite;
}
@keyframes blink {
    to {
        visibility: hidden;
    }
}
.nav-cta {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ca-mini {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--line-2);
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    font: 400 12px/1 var(--mono);
    color: var(--text-2);
    transition: border-color 150ms;
}
.ca-mini:hover {
    border-color: var(--bull);
    color: #fff;
}
.ca-mini-k {
    color: var(--bull);
    font-weight: 700;
}
.ca-mini svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    opacity: 0.7;
}
.nav-menu {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 11px;
    border-radius: 10px;
    border: 1px solid var(--line-2);
    background: transparent;
    cursor: pointer;
}
.nav-menu i {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--text);
    transition:
        transform 200ms var(--ease),
        opacity 200ms;
}
.nav-menu[aria-expanded='true'] i:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-menu[aria-expanded='true'] i:nth-child(2) {
    opacity: 0;
}
.nav-menu[aria-expanded='true'] i:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}
.sheet {
    position: absolute;
    top: calc(var(--nav-h) - 1px);
    left: 0;
    right: 0;
    display: grid;
    padding: 8px var(--gut) 20px;
    background: rgba(5, 7, 10, 0.96);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}
.sheet[hidden] {
    display: none;
}
.sheet a {
    padding: 14px 4px;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    font: 400 28px/1 var(--display);
    letter-spacing: 0.03em;
    text-decoration: none;
}
.sheet a:last-child {
    border-bottom: 0;
    color: var(--bull);
}

/* ------------------------------------------------------------------ hero */

.hero {
    position: relative;
    min-height: min(100svh, 980px);
    padding: calc(var(--nav-h) + clamp(28px, 6vh, 72px)) 0 190px;
    overflow: hidden;
    overflow: clip;
    isolation: isolate;
}
.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    opacity: 0.9;
}
.hero-glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(60% 55% at 78% 42%, rgba(22, 224, 138, 0.16), transparent 70%),
        radial-gradient(40% 40% at 8% 90%, rgba(255, 59, 92, 0.1), transparent 70%),
        linear-gradient(180deg, rgba(5, 7, 10, 0.2) 0%, rgba(5, 7, 10, 0) 40%, var(--bg) 100%);
    pointer-events: none;
}
.hero-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    align-items: center;
    gap: clamp(28px, 4.5vw, 64px);
}
.pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    padding: 8px 14px 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(22, 224, 138, 0.3);
    background: rgba(22, 224, 138, 0.07);
    color: var(--bull-2);
    font: 700 12px/1.3 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.pill a {
    color: inherit;
}
.pill b {
    color: #fff;
    font-weight: 700;
}
.pill.building {
    border-color: rgba(255, 59, 92, 0.45);
    background: rgba(255, 59, 92, 0.1);
    color: #ffb3c0;
}
.pill.building .dot {
    background: var(--bear);
    animation: ping-r 1.4s infinite;
}
@keyframes ping-r {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 59, 92, 0.6);
    }
    70% {
        box-shadow: 0 0 0 9px rgba(255, 59, 92, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 59, 92, 0);
    }
}
.hero-h {
    margin: 22px 0 20px;
    font: 400 clamp(48px, 5.5vw, 80px) / 0.92 var(--display);
    letter-spacing: 0.005em;
    text-wrap: balance;
}
.hero-h span {
    display: block;
}
.hero-h .l2 {
    color: var(--bull);
    text-shadow:
        0 0 24px rgba(22, 224, 138, 0.45),
        0 0 64px rgba(22, 224, 138, 0.25);
}
.hero-sub {
    max-width: 30em;
    font-size: clamp(17px, 1.6vw, 21px);
    line-height: 1.5;
    color: var(--text-2);
}
.hero-sub b {
    color: var(--text);
    font-weight: 600;
}
.hero-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 32px;
}
.hero-fine {
    margin-top: 14px;
    font-size: 13px;
    color: var(--muted);
}

/* contract address */
.ca {
    display: flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    max-width: 100%;
    margin-top: 26px;
    padding: 7px 7px 7px 16px;
    border-radius: 14px;
    border: 1px solid var(--line-2);
    background: rgba(8, 11, 15, 0.75);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.ca-k {
    flex: none;
    color: var(--bull);
    font: 700 12px/1 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.ca-v {
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    font: 400 13px/1.3 var(--mono);
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ca-copy {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    border: 0;
    background: rgba(22, 224, 138, 0.14);
    color: var(--bull-2);
    font: 600 13px/1 var(--sans);
    cursor: pointer;
    transition:
        background 150ms,
        color 150ms;
}
.ca-copy svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}
.ca-copy:hover:not(:disabled) {
    background: var(--bull);
    color: var(--bull-ink);
}
.ca-copy:disabled {
    opacity: 0.4;
    cursor: default;
}
.ca-copy.done {
    background: var(--bull);
    color: var(--bull-ink);
}
.ca.big {
    flex-wrap: wrap;
    width: 100%;
    margin-top: 28px;
    padding: 18px 18px 18px 20px;
    border-radius: 18px;
    background: rgba(22, 224, 138, 0.05);
    border-color: rgba(22, 224, 138, 0.3);
}
.ca.big .ca-k {
    flex-basis: 100%;
    color: var(--muted);
    font-weight: 400;
}
.ca.big .ca-v {
    flex: 1;
    font-size: clamp(13px, 1.5vw, 17px);
    white-space: normal;
    word-break: break-all;
}

/* the live screen */
.screen {
    position: relative;
    margin: 0;
    perspective: 1400px;
}
.screen-frame {
    position: relative;
    padding: 10px;
    border-radius: 24px;
    background: linear-gradient(180deg, #121a22, #090d12);
    box-shadow:
        0 40px 90px rgba(0, 0, 0, 0.65),
        0 0 140px rgba(22, 224, 138, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: rotateY(var(--ry, -7deg)) rotateX(var(--rx, 3deg));
    transform-style: preserve-3d;
    transition: transform 600ms var(--ease);
}
.screen-frame::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: 25px;
    padding: 1px;
    background: conic-gradient(
        from var(--spin),
        rgba(22, 224, 138, 0.1),
        rgba(22, 224, 138, 0.9),
        rgba(255, 197, 61, 0.6),
        rgba(22, 224, 138, 0.1) 40%,
        rgba(22, 224, 138, 0.1) 60%,
        rgba(111, 216, 255, 0.6),
        rgba(22, 224, 138, 0.1)
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: spin 8s linear infinite;
}
@keyframes spin {
    to {
        --spin: 360deg;
    }
}
.screen-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 8px 12px;
    font: 400 12px/1 var(--mono);
    color: var(--muted);
}
.screen-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(255, 59, 92, 0.15);
    color: #ff8da1;
    font-weight: 700;
    letter-spacing: 0.1em;
}
.screen-live i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bear);
    animation: blink 1.2s steps(2, start) infinite;
}
.screen-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-2);
}
.screen-clock {
    flex: none;
}
.screen-view {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 15px;
    overflow: hidden;
    background: #04060a;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.screen-view::after {
    /* glass + scanlines */
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, transparent 35%),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 3px);
    mix-blend-mode: screen;
    opacity: 0.6;
}
.screen-view iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    opacity: 0;
    transition: opacity 600ms;
}
.screen-view iframe.on {
    opacity: 1;
}
.screen-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.screen-tap {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 16px;
    text-decoration: none;
}
.screen-tap span {
    padding: 10px 16px 12px;
    border-radius: 12px;
    background: var(--bull);
    color: var(--bull-ink);
    font: 400 26px/1 var(--display);
    letter-spacing: 0.04em;
    box-shadow:
        0 4px 0 var(--bull-deep),
        0 0 30px rgba(22, 224, 138, 0.5);
    animation: bob 2.4s var(--ease) infinite;
}
.screen-tap:hover span {
    background: #fff;
}
@keyframes bob {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}
.screen-cap {
    margin-top: 16px;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
}

/* the running floor: bull charging, the bear market chasing */
.floor {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 170px;
    pointer-events: none;
}
.floor-grid {
    position: absolute;
    left: -50%;
    right: -50%;
    bottom: 0;
    height: 120px;
    transform: perspective(260px) rotateX(58deg);
    transform-origin: 50% 100%;
    background-image:
        linear-gradient(rgba(22, 224, 138, 0.35) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22, 224, 138, 0.35) 1px, transparent 1px);
    background-size: 48px 24px;
    animation: floor 0.8s linear infinite;
    -webkit-mask: linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent);
    mask: linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent);
}
@keyframes floor {
    to {
        background-position: -48px 24px;
    }
}
.parade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 34px;
    width: 100%;
    height: 120px;
}

/* ------------------------------------------------------------------ numbers */

.numbers {
    position: relative;
    margin-top: -40px;
    z-index: 2;
}
.num-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border-radius: var(--r);
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(16, 22, 29, 0.92), rgba(10, 14, 19, 0.92));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    overflow: hidden;
}
.num {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 24px 22px 22px;
    border-left: 1px solid var(--line);
}
.num:first-child {
    border-left: 0;
}
.num-v {
    font: 400 clamp(38px, 3.6vw, 54px) / 0.9 var(--display);
    color: var(--text);
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.num-v.gold {
    color: var(--gold);
    text-shadow: 0 0 22px rgba(255, 197, 61, 0.35);
}
.num-v small {
    font-size: 0.55em;
    color: var(--text-2);
    margin-left: 3px;
}
.num-k {
    font: 400 11px/1.3 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}
.num-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-top: 14px;
    font: 400 12px/1.4 var(--mono);
    color: var(--muted);
}

/* ------------------------------------------------------------------ sections */

.sec {
    padding-top: clamp(80px, 9vw, 128px);
}
.sec-h {
    margin-bottom: clamp(32px, 4vw, 52px);
    max-width: 820px;
}
.sec-h.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    color: var(--bull);
    font: 700 12px/1 var(--mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.eyebrow::before {
    content: '';
    width: 18px;
    height: 2px;
    background: currentColor;
}
.sec-h h2 {
    font: 400 clamp(46px, 6.4vw, 88px) / 0.9 var(--display);
    letter-spacing: 0.005em;
    text-wrap: balance;
}
.sec-sub {
    margin-top: 18px;
    font-size: clamp(16px, 1.5vw, 19px);
    color: var(--text-2);
    text-wrap: pretty;
}
.sec-h.center .sec-sub {
    margin-left: auto;
    margin-right: auto;
    max-width: 36em;
}

/* reveal on scroll */
.rv {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 900ms var(--ease),
        transform 900ms var(--ease);
    transition-delay: calc(var(--i, 0) * 90ms);
}
.rv.in {
    opacity: 1;
    transform: none;
}

/* ------------------------------------------------------------------ how it works */

.loop {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    counter-reset: step;
}
.loop::before,
.loop::after {
    /* the wire through the four icons, and a spark running along it */
    content: '';
    position: absolute;
    top: 74px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: linear-gradient(
        90deg,
        rgba(22, 224, 138, 0.1),
        rgba(22, 224, 138, 0.5),
        rgba(22, 224, 138, 0.1)
    );
}
.loop::after {
    left: 12%;
    right: auto;
    width: 90px;
    height: 4px;
    top: 73px;
    border-radius: 4px;
    background: linear-gradient(90deg, transparent, var(--bull-2), transparent);
    box-shadow: 0 0 16px var(--bull);
    animation: spark 3.6s var(--ease) infinite;
}
@keyframes spark {
    0% {
        transform: translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateX(calc(76vw - 90px));
        opacity: 0;
    }
}
.step {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px 24px 22px;
    border-radius: var(--r);
    border: 1px solid var(--line);
    background: linear-gradient(180deg, var(--card-2), var(--card));
    transition:
        border-color 250ms,
        transform 250ms var(--ease);
}
.step:hover {
    border-color: rgba(22, 224, 138, 0.35);
    transform: translateY(-4px);
}
.step-art {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 100px;
    height: 100px;
    margin-bottom: 22px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 50% 40%, rgba(22, 224, 138, 0.22), transparent 70%), #0a1016;
    border: 1px solid rgba(22, 224, 138, 0.25);
    box-shadow: 0 0 40px rgba(22, 224, 138, 0.12);
}
.step-art canvas {
    max-width: 76px;
    max-height: 76px;
}
.step-n {
    color: var(--bull);
    font: 700 12px/1 var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.step h3 {
    margin: 12px 0 10px;
    font: 400 32px/0.95 var(--display);
    letter-spacing: 0.01em;
}
.step p:not(.step-n):not(.step-live) {
    color: var(--text-2);
    font-size: 15px;
    line-height: 1.55;
}
.step-live {
    min-height: calc(1.4em + 18px);
    margin-top: auto;
    padding-top: 18px;
    font: 400 12px/1.4 var(--mono);
    color: var(--bull-2);
}
.step-live:not(:empty)::before {
    content: '● ';
    color: var(--bull);
}
.loop-back {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 26px;
    font: 400 12px/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}
.loop-back svg {
    width: 18px;
    height: 18px;
    fill: var(--bull);
    animation: rot 6s linear infinite;
}
@keyframes rot {
    to {
        transform: rotate(-360deg);
    }
}

/* ------------------------------------------------------------------ build night */

.night {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
.term {
    display: flex;
    flex-direction: column;
    border-radius: var(--r);
    border: 1px solid var(--line);
    background: #06090c;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}
.term-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.02);
    font: 400 12px/1 var(--mono);
    color: var(--muted);
}
.term-bar i {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #2a333d;
}
.term-bar i:nth-child(1) {
    background: #ff5f57;
}
.term-bar i:nth-child(2) {
    background: #febc2e;
}
.term-bar i:nth-child(3) {
    background: #28c840;
}
.term-bar span:first-of-type {
    margin-left: 10px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.term-state {
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 10px;
}
.term-state.live {
    background: rgba(255, 59, 92, 0.15);
    color: #ff8da1;
}
.term-body {
    position: relative;
    flex: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
    height: 400px;
    contain: size layout paint;
    padding: 16px 18px 18px;
    overflow: hidden;
    font: 400 13px/1.65 var(--mono);
    -webkit-mask: linear-gradient(180deg, transparent 0, #000 22%);
    mask: linear-gradient(180deg, transparent 0, #000 22%);
}
.term-body li {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    color: var(--text-2);
    animation: line-in 300ms var(--ease) both;
}
@keyframes line-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}
.term-body time {
    color: #4b5a55;
}
.term-body .t-tool {
    color: #64736d;
}
.term-body .t-say {
    color: var(--text);
}
.term-body .t-context {
    color: var(--ice);
}
.term-body .t-test,
.term-body .t-gate {
    color: var(--bull-2);
}
.term-body .t-ship,
.term-body .t-done,
.term-body .t-cost {
    color: var(--gold);
}
.term-body .t-start,
.term-body .t-plan {
    color: #fff;
    font-weight: 700;
}
.term-body .caret::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 15px;
    margin-left: 2px;
    vertical-align: -2px;
    background: var(--bull);
    animation: blink 1s steps(2, start) infinite;
}

.latest {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px;
    border-radius: var(--r);
    border: 1px solid rgba(22, 224, 138, 0.25);
    background:
        radial-gradient(120% 70% at 100% 0%, rgba(22, 224, 138, 0.14), transparent 60%),
        linear-gradient(180deg, var(--card-2), var(--card));
    overflow: hidden;
}
.latest-k {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font: 400 12px/1 var(--mono);
    color: var(--muted);
}
.latest-n {
    margin: 18px 0 6px;
    font: 400 clamp(88px, 10vw, 140px) / 0.8 var(--display);
    background: linear-gradient(180deg, #fff 10%, var(--bull) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 30px rgba(22, 224, 138, 0.3));
}
.latest h3 {
    font: 400 clamp(30px, 3vw, 40px) / 0.95 var(--display);
    letter-spacing: 0.01em;
}
.latest-sum {
    margin-top: 14px;
    color: var(--text-2);
    font-size: 15px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}
.chips li {
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line);
    font: 400 12px/1.2 var(--mono);
    color: var(--text-2);
}
.chips li b {
    color: var(--text);
    font-weight: 700;
}
.chips a {
    color: inherit;
}
.latest-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    padding-top: 24px;
}

/* timeline */
.tl-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin: 72px 0 22px;
}
.tl-title {
    font: 400 clamp(30px, 3.4vw, 44px) / 1 var(--display);
}
.tl-title b {
    font-weight: 400;
    color: var(--bull);
}
.tl-title span {
    color: var(--muted);
}
.tl-nav {
    display: flex;
    gap: 10px;
}
.tl-wrap {
    --edge: max(var(--gut), calc((100vw - 1220px) / 2 + var(--gut)));
    position: relative;
    margin: 0 calc(50% - 50vw);
}
.tl {
    display: flex;
    gap: 16px;
    padding: 6px var(--edge) 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--edge);
    scrollbar-width: none;
    cursor: grab;
    overscroll-behavior-x: contain;
}
.tl::-webkit-scrollbar {
    display: none;
}
.tl.drag {
    cursor: grabbing;
    scroll-snap-type: none;
}
.tl.drag a {
    pointer-events: none;
}
.tl > li {
    flex: none;
    scroll-snap-align: start;
}
.bc {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 280px;
    height: 100%;
    min-height: 318px;
    padding: 20px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, var(--card-2), var(--card));
    transition:
        border-color 200ms,
        transform 250ms var(--ease);
    user-select: none;
}
.bc:hover {
    border-color: rgba(22, 224, 138, 0.4);
    transform: translateY(-4px);
}
.bc-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.bc-n {
    font: 400 64px/0.8 var(--display);
    color: var(--text);
}
.bc-d {
    font: 400 12px/1 var(--mono);
    color: var(--muted);
}
.bc-who {
    display: inline-block;
    align-self: flex-start;
    margin-top: 14px;
    padding: 4px 8px;
    border-radius: 6px;
    font: 700 10px/1.2 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: rgba(22, 224, 138, 0.1);
    color: var(--bull-2);
}
.bc-who.bootstrap {
    background: rgba(111, 216, 255, 0.1);
    color: var(--ice);
}
.bc-who.human,
.bc-who.upstream {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-2);
}
.bc > * {
    flex-shrink: 0;
}
.tl > li {
    display: flex;
}
.bc-t {
    margin-top: 12px;
    font: 400 26px/1.08 var(--display);
    letter-spacing: 0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bc-s {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bc-f {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font: 400 12px/1 var(--mono);
    color: var(--muted);
}
.bc-play {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(22, 224, 138, 0.12);
    color: var(--bull-2);
    font: 600 13px/1 var(--sans);
    text-decoration: none;
}
.bc-play:hover {
    background: var(--bull);
    color: var(--bull-ink);
}
.bc.live {
    border-color: rgba(22, 224, 138, 0.5);
    box-shadow: 0 0 40px rgba(22, 224, 138, 0.12);
}
.bc.live .bc-n {
    color: var(--bull);
}
.bc.next {
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.2);
    background: repeating-linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.015) 0 12px,
        transparent 12px 24px
    );
}
.bc.next .bc-n {
    color: var(--muted);
}
.bc.next .bc-clock {
    margin-top: auto;
    padding-top: 12px;
    font: 400 44px/1 var(--display);
    color: var(--bull);
}
.bc.zero {
    background: linear-gradient(180deg, #0d1014, #090b0e);
}
.bc.zero .bc-n {
    color: var(--muted);
}
.tl-progress {
    height: 3px;
    border-radius: 3px;
    background: var(--line);
    overflow: hidden;
}
.tl-progress i {
    display: block;
    height: 100%;
    width: 20%;
    border-radius: 3px;
    background: var(--bull);
    box-shadow: 0 0 10px var(--bull);
    transform-origin: left;
    transition: transform 120ms linear;
}

/* ------------------------------------------------------------------ daily challenge */

.daily {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 20px;
    align-items: start;
}
.pot {
    position: relative;
    padding: 28px;
    border-radius: var(--r);
    border: 1px solid rgba(255, 197, 61, 0.28);
    background:
        radial-gradient(90% 60% at 0% 0%, rgba(255, 197, 61, 0.14), transparent 60%),
        linear-gradient(180deg, var(--card-2), var(--card));
    overflow: hidden;
}
.pot-k {
    color: var(--gold);
    font: 700 12px/1 var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.pot-v {
    margin-top: 12px;
    font: 400 clamp(84px, 9vw, 124px) / 0.8 var(--display);
    color: var(--gold);
    text-shadow:
        0 0 30px rgba(255, 197, 61, 0.35),
        0 0 80px rgba(255, 197, 61, 0.2);
    font-variant-numeric: tabular-nums;
}
.pot-v span {
    font-size: 0.4em;
    color: var(--gold-2);
    text-shadow: none;
}
.pot-note {
    margin-top: 12px;
    color: var(--text-2);
    font-size: 15px;
}
.pot-clock {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 22px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--line);
    font: 400 12px/1 var(--mono);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.pot-clock b {
    font: 400 40px/0.8 var(--display);
    color: var(--text);
    letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
}
.pot-facts {
    display: grid;
    gap: 2px;
    margin: 16px 0 22px;
}
.pot-facts div {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}
.pot-facts dt {
    font: 400 11px/1.7 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}
.pot-facts dd {
    margin: 0;
    font-size: 15px;
    color: var(--text);
}
.pot-facts dd small {
    display: block;
    color: var(--muted);
    font-size: 13px;
}
.pot-how {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}
.pot-how li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.45;
}
.pot-how b {
    flex: none;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 197, 61, 0.14);
    color: var(--gold);
    font: 700 12px/1 var(--mono);
}
.rules {
    margin-top: 18px;
    border-top: 1px solid var(--line);
    padding-top: 14px;
}
.rules summary {
    cursor: pointer;
    font-size: 14px;
    color: var(--text-2);
    list-style: none;
}
.rules summary::-webkit-details-marker {
    display: none;
}
.rules summary::after {
    content: ' +';
    color: var(--gold);
}
.rules[open] summary::after {
    content: ' −';
}
.rules p,
.rules li {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted);
}
.rules ul {
    padding-left: 16px;
    list-style: disc;
}
.addr {
    margin-top: 18px;
    padding: 16px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--line);
}
.addr label {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--text);
    font-weight: 600;
}
.addr-row {
    display: flex;
    gap: 8px;
}
.addr input,
.voice-card input,
.voice-card textarea {
    width: 100%;
    min-width: 0;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--line-2);
    background: rgba(0, 0, 0, 0.35);
    font: 400 14px/1.4 var(--mono);
    resize: vertical;
    transition: border-color 150ms;
}
.addr input:focus,
.voice-card input:focus,
.voice-card textarea:focus {
    outline: none;
    border-color: var(--bull);
}
.addr-note {
    margin-top: 8px;
    font-size: 12px;
    color: var(--muted);
}
.addr-note.good,
.vote-status.good {
    color: var(--bull-2);
}
.addr-note.bad,
.vote-status.bad {
    color: #ff8da1;
}

.board {
    padding: 24px;
    border-radius: var(--r);
    border: 1px solid var(--line);
    background: linear-gradient(180deg, var(--card-2), var(--card));
}
.board-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.board-head h3 {
    font: 400 32px/1 var(--display);
}
.board-head span {
    font: 400 12px/1.3 var(--mono);
    color: var(--muted);
    text-align: right;
}
.lb {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.lb th {
    padding: 0 8px 10px;
    text-align: left;
    font: 400 11px/1 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
}
.lb td {
    padding: 11px 8px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.lb tr:last-child td {
    border-bottom: 0;
}
.lb .num-c {
    text-align: right;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
}
.lb .sc {
    color: var(--text);
    font-weight: 700;
}
.lb .rk {
    width: 40px;
}
.lb .nm {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.medal {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font: 400 20px/1 var(--display);
    background: rgba(255, 255, 255, 0.05);
    color: var(--muted);
}
.medal.m1 {
    background: linear-gradient(180deg, #ffe08a, #f0a500);
    color: #2a1a00;
    box-shadow: 0 0 18px rgba(255, 197, 61, 0.45);
}
.medal.m2 {
    background: linear-gradient(180deg, #f2f5f7, #a9b4bd);
    color: #1b2127;
}
.medal.m3 {
    background: linear-gradient(180deg, #f4b98a, #b86a34);
    color: #2a1306;
}
.lb tr.top td {
    background: rgba(255, 197, 61, 0.04);
}
.lb tbody tr {
    animation: row-in 500ms var(--ease) both;
    animation-delay: calc(var(--i, 0) * 40ms);
}
@keyframes row-in {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
}
.st {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 999px;
    font: 700 10px/1.2 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
}
.st.ok {
    background: rgba(22, 224, 138, 0.12);
    color: var(--bull-2);
}
.st.wait {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-2);
}
.st.bad {
    background: rgba(255, 59, 92, 0.12);
    color: #ff8da1;
}
a.st:hover {
    filter: brightness(1.3);
}
.board-empty {
    padding: 40px 0;
    text-align: center;
    color: var(--muted);
}
.board-more {
    width: 100%;
    margin-top: 14px;
}
.board-fine {
    margin-top: 16px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted);
}
.v-chip {
    color: var(--bull-2);
    font-family: var(--mono);
    font-weight: 700;
}

.paid {
    margin-top: 20px;
    padding: 20px 24px;
    border-radius: var(--r);
    border: 1px solid var(--line);
    background: linear-gradient(90deg, rgba(255, 197, 61, 0.08), transparent 60%), var(--card);
}
.paid-k {
    font: 700 12px/1 var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
}
.paid-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin-top: 12px;
    color: var(--text-2);
    font-size: 15px;
}
.paid-row strong {
    color: var(--text);
    font: 400 28px/1 var(--display);
}
.paid-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    margin-top: 6px;
}
.paid-list a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    color: var(--text-2);
    font: 400 12px/1.2 var(--mono);
    text-decoration: none;
}
.paid-list a:hover {
    border-color: var(--gold);
    color: #fff;
}
.paid-list a b {
    color: var(--gold);
}

/* ------------------------------------------------------------------ vote */

.vote-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-bottom: 14px;
}
.vote-meta {
    font: 400 12px/1.3 var(--mono);
    color: var(--muted);
}
.vote-bar .btn-solid {
    margin-left: auto;
}
.vote-status {
    min-height: 1.4em;
    margin-bottom: 14px;
    font-size: 14px;
    color: var(--text-2);
}
.vote-status a {
    margin: 0 2px;
}
.ballot {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.opt {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-radius: var(--r);
    border: 1px solid var(--line);
    background: linear-gradient(180deg, var(--card-2), var(--card));
    overflow: hidden;
    transition:
        border-color 200ms,
        transform 250ms var(--ease);
}
.opt:hover {
    border-color: rgba(22, 224, 138, 0.35);
    transform: translateY(-3px);
}
.opt-fill {
    position: absolute;
    inset: auto 0 0 0;
    height: 0;
    background: linear-gradient(0deg, rgba(22, 224, 138, 0.12), transparent);
    transition: height 1.2s var(--ease);
    pointer-events: none;
}
.opt-k {
    font: 700 11px/1.2 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}
.opt.community .opt-k,
.opt.player .opt-k {
    color: var(--gold);
}
.opt h3 {
    margin: 14px 0 10px;
    font: 400 32px/0.95 var(--display);
    letter-spacing: 0.01em;
}
.opt p {
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.55;
}
.opt .op-note,
.opt .ai-take p {
    margin-top: 10px;
    font-size: 13px;
    color: var(--muted);
}
.ai-take {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--line);
}
.ai-tag {
    font: 700 10px/1 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bull-2);
}
.ai-take.no .ai-tag {
    color: #ff8da1;
}
.opt-pct {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 22px;
}
.opt-pct b {
    font: 400 46px/0.8 var(--display);
    color: var(--text);
}
.opt-pct span {
    font: 400 12px/1 var(--mono);
    color: var(--muted);
}
.opt-bar {
    height: 6px;
    margin: 12px 0 16px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.opt-bar i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--bull-deep), var(--bull));
    box-shadow: 0 0 12px rgba(22, 224, 138, 0.5);
    transition: width 1.2s var(--ease);
}
.opt .btn-solid {
    width: 100%;
}
.opt.winner {
    border-color: var(--gold);
    box-shadow: 0 0 50px rgba(255, 197, 61, 0.15);
}
.opt.winner::after {
    content: 'Winner';
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--gold);
    color: #2a1a00;
    font: 700 11px/1.2 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.opt.empty {
    grid-column: 1 / -1;
    text-align: center;
    align-items: center;
}
.vote-rule {
    margin-top: 18px;
    font-size: 13px;
    color: var(--muted);
}
.voice {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 40px;
}
.voice-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    border-radius: var(--r);
    border: 1px solid var(--line);
    background: var(--card);
}
.voice-card[hidden] {
    display: none;
}
.voice-card h3 {
    font: 400 30px/0.95 var(--display);
}
.voice-k {
    font: 700 11px/1.2 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bull);
}
.voice-card.off .voice-k {
    color: var(--gold);
}
.voice-p {
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.55;
}
.voice-card .tag {
    align-self: flex-start;
}
.voice-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.count {
    font: 400 12px/1 var(--mono);
    color: var(--muted);
}
.voice-card .vote-status {
    margin: 0;
    min-height: 0;
}
.voice-card.off input,
.voice-card.off textarea,
.voice-card.off .voice-row {
    display: none;
}
.ideas-feed {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.ideas-k {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    font: 400 11px/1.2 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}
.ideas-list {
    display: grid;
    gap: 6px;
    max-height: 230px;
    overflow: auto;
}
.ideas-list li {
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-2);
}
.ideas-list time {
    display: block;
    margin-top: 4px;
    font: 400 11px/1 var(--mono);
    color: var(--muted);
}

/* ------------------------------------------------------------------ the bear market */

.bears {
    overflow: hidden;
    overflow: clip;
}
.bosses {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}
.bosses li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 26px 14px 22px;
    border-radius: var(--r);
    border: 1px solid rgba(255, 59, 92, 0.18);
    background:
        radial-gradient(70% 55% at 50% 38%, rgba(255, 59, 92, 0.16), transparent 70%),
        linear-gradient(180deg, #120c10, #0b090c);
    transition:
        transform 300ms var(--ease),
        border-color 300ms;
}
.bosses li:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: rgba(255, 59, 92, 0.5);
}
.bosses canvas {
    height: 120px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.6));
}
.bosses b,
.marquee b {
    margin-top: 16px;
    font: 400 26px/1 var(--display);
    font-weight: 400;
    color: #ffd4dc;
}
.bosses span,
.marquee span {
    margin-top: 6px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.4;
}
.marquee {
    position: relative;
    margin-top: 18px;
    overflow: hidden;
    overflow: clip;
    -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
    display: flex;
    gap: 14px;
    width: max-content;
    animation: marquee 50s linear infinite;
}
.marquee:hover .marquee-track {
    animation-play-state: paused;
}
@keyframes marquee {
    to {
        transform: translateX(calc(-50% - 7px));
    }
}
.marquee li {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200px;
    padding: 20px 14px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: var(--card);
    text-align: center;
}
.marquee canvas {
    height: 72px;
    width: auto;
    object-fit: contain;
}
.marquee b {
    margin-top: 12px;
    font-size: 22px;
}

/* ------------------------------------------------------------------ coin */

.coin {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
    padding: clamp(28px, 4vw, 52px);
    border-radius: 28px;
    border: 1px solid rgba(22, 224, 138, 0.2);
    background:
        radial-gradient(60% 80% at 90% 30%, rgba(255, 197, 61, 0.12), transparent 70%),
        radial-gradient(60% 80% at 0% 100%, rgba(22, 224, 138, 0.1), transparent 70%),
        linear-gradient(180deg, var(--card-2), var(--card));
}
.coin h2 {
    font: 400 clamp(72px, 10vw, 140px) / 0.8 var(--display);
    text-shadow: 0 0 40px rgba(22, 224, 138, 0.35);
}
.coin-lede {
    margin-top: 18px;
    font-size: clamp(17px, 1.6vw, 20px);
    color: var(--text-2);
}
.coin-buy {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0 14px;
}
.coin-buy .btn-solid {
    background: var(--bull);
    color: var(--bull-ink);
}
.coin-buy .btn-solid:hover {
    background: var(--bull-2);
}
.coin-r {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}
.coin-art {
    width: auto;
    height: 200px;
    padding: 28px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 197, 61, 0.28),
        rgba(255, 197, 61, 0.04) 60%,
        transparent 70%
    );
    animation: float 4s ease-in-out infinite;
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.55));
}
@keyframes float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}
.does {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
}
.does h3 {
    margin-bottom: 10px;
    font: 400 26px/1 var(--display);
}
.ticks,
.crosses {
    display: grid;
    gap: 9px;
}
.ticks li,
.crosses li {
    position: relative;
    padding-left: 24px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-2);
}
.ticks li::before,
.crosses li::before {
    position: absolute;
    left: 0;
    top: 0;
    font: 700 14px/1.45 var(--mono);
}
.ticks li::before {
    content: '✓';
    color: var(--bull);
}
.crosses li::before {
    content: '×';
    color: var(--bear);
}
.ticks.dim li::before {
    content: '•';
    color: var(--text-2);
}

/* ------------------------------------------------------------------ receipts */

.rc-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.rc-tile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px;
    border-radius: var(--r);
    border: 1px solid var(--line);
    background: linear-gradient(180deg, var(--card-2), var(--card));
    color: inherit;
    text-decoration: none;
    transition:
        border-color 200ms,
        transform 250ms var(--ease);
}
a.rc-tile:hover {
    color: inherit;
    border-color: rgba(22, 224, 138, 0.4);
    transform: translateY(-3px);
}
.rc-k {
    font: 400 11px/1.2 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}
.rc-v {
    font: 400 50px/0.9 var(--display);
    font-weight: 400;
    color: var(--text);
}
.rc-s {
    font-size: 13px;
    color: var(--muted);
}
.rc-feed {
    margin-top: 16px;
    padding: 22px 24px;
    border-radius: var(--r);
    border: 1px solid var(--line);
    background: var(--card);
}
.rc-feed-h {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.rc-feed-h h3 {
    font: 400 28px/1 var(--display);
}
.rc-feed-h a {
    font-size: 14px;
}
.moves li {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}
.moves li:last-child {
    border-bottom: 0;
}
.moves .arr {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font: 700 14px/1 var(--mono);
}
.moves .in .arr {
    background: rgba(22, 224, 138, 0.12);
    color: var(--bull);
}
.moves .out .arr {
    background: rgba(255, 59, 92, 0.1);
    color: #ff8da1;
}
.moves .what b {
    display: block;
    color: var(--text);
    font-weight: 600;
}
.moves .what span {
    display: block;
    font: 400 12px/1.3 var(--mono);
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.moves .amt {
    font: 700 13px/1.2 var(--mono);
    text-align: right;
    white-space: nowrap;
}
.moves .in .amt {
    color: var(--bull-2);
}
.moves .tx {
    font-size: 13px;
    white-space: nowrap;
}
.moves-empty {
    display: block !important;
    color: var(--muted);
}
.who {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}
.who-c {
    padding: 24px;
    border-radius: var(--r);
    border: 1px solid var(--line);
    background: var(--card);
}
.who-c.ai {
    border-color: rgba(22, 224, 138, 0.25);
}
.who-c h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font: 400 28px/1 var(--display);
}
.who-c h3 canvas {
    height: 28px;
    width: auto;
}
.who-no {
    margin-top: 14px;
    font-size: 13px;
    color: var(--muted);
}
.rc-more {
    margin-top: 22px;
    text-align: center;
}
.rc-more .btn-line {
    white-space: normal;
    text-align: center;
    min-height: 52px;
}

/* ------------------------------------------------------------------ faq */

.faq {
    display: grid;
    gap: 10px;
}
.faq details {
    border-radius: 16px;
    border: 1px solid var(--line);
    background: var(--card);
    transition:
        border-color 200ms,
        background 200ms;
}
.faq details[open] {
    border-color: rgba(22, 224, 138, 0.3);
    background: var(--card-2);
}
.faq details[hidden] {
    display: none;
}
.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    cursor: pointer;
    list-style: none;
    font: 400 26px/1.05 var(--display);
    letter-spacing: 0.01em;
}
.faq summary::-webkit-details-marker {
    display: none;
}
.faq summary::after {
    content: '';
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background:
        linear-gradient(var(--bull), var(--bull)) center / 12px 2px no-repeat,
        linear-gradient(var(--bull), var(--bull)) center / 2px 12px no-repeat,
        rgba(22, 224, 138, 0.1);
    transition: transform 300ms var(--ease);
}
.faq details[open] summary::after {
    transform: rotate(45deg);
}
.faq details p {
    padding: 0 22px 22px;
    color: var(--text-2);
    font-size: 15px;
    line-height: 1.65;
}

/* ------------------------------------------------------------------ finale + footer */

.finale {
    position: relative;
    margin-top: clamp(80px, 9vw, 128px);
    padding: clamp(80px, 10vw, 130px) 0;
    text-align: center;
    overflow: hidden;
    overflow: clip;
    background:
        radial-gradient(50% 70% at 50% 100%, rgba(22, 224, 138, 0.22), transparent 70%),
        linear-gradient(180deg, transparent, rgba(22, 224, 138, 0.04));
    border-top: 1px solid var(--line);
}
.finale::before {
    content: '';
    position: absolute;
    inset: auto -50% 0;
    height: 160px;
    transform: perspective(260px) rotateX(58deg);
    transform-origin: 50% 100%;
    background-image:
        linear-gradient(rgba(22, 224, 138, 0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22, 224, 138, 0.3) 1px, transparent 1px);
    background-size: 48px 24px;
    animation: floor 0.8s linear infinite;
    -webkit-mask: linear-gradient(180deg, transparent, #000 60%);
    mask: linear-gradient(180deg, transparent, #000 60%);
    pointer-events: none;
}
.finale-in {
    position: relative;
}
.finale-bull {
    height: 150px;
    width: auto;
    margin: 0 auto 10px;
    filter: drop-shadow(0 0 30px rgba(22, 224, 138, 0.35));
}
.finale h2 {
    font: 400 clamp(60px, 10vw, 150px) / 0.85 var(--display);
}
.finale p {
    max-width: 34em;
    margin: 22px auto 0;
    font-size: clamp(16px, 1.6vw, 19px);
    color: var(--text-2);
}
.finale-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 34px;
}
.finale-cta .btn-line {
    min-height: 68px;
    padding: 0 26px;
}
.foot {
    padding: 48px 0 calc(48px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: #040508;
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
}
.foot-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}
.foot-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}
.foot-links a {
    color: var(--text-2);
    text-decoration: none;
    font-size: 14px;
}
.foot-links a:hover {
    color: #fff;
}
.foot p + p {
    margin-top: 10px;
}
.foot a {
    color: var(--text-2);
}
.foot-crow a {
    color: var(--bull-2);
}

.toast {
    position: fixed;
    left: 50%;
    width: max-content;
    max-width: calc(100vw - 32px);
    bottom: calc(24px + env(safe-area-inset-bottom));
    z-index: 80;
    padding: 12px 18px;
    border-radius: 12px;
    background: var(--bull);
    color: var(--bull-ink);
    font: 600 14px/1.2 var(--sans);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transform: translate(-50%, 140%);
    opacity: 0;
    transition:
        transform 300ms var(--ease),
        opacity 300ms;
    pointer-events: none;
}
.toast.on {
    transform: translate(-50%, 0);
    opacity: 1;
}

/* ------------------------------------------------------------------ responsive */

@media (max-width: 1180px) {
    .ca-mini {
        display: none;
    }
}
@media (max-width: 1040px) {
    .nav-links {
        display: none;
    }
    .nav-cta {
        margin-left: auto;
    }
    .nav-menu {
        display: flex;
    }
    .hero-in {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
    .hero-copy {
        max-width: 680px;
    }
    .screen-frame {
        transform: none;
    }
    .num-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .num:nth-child(4) {
        border-left: 0;
    }
    .num:nth-child(n + 4) {
        border-top: 1px solid var(--line);
    }
    .loop {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .loop::before,
    .loop::after {
        display: none;
    }
    .night,
    .daily,
    .coin {
        grid-template-columns: minmax(0, 1fr);
    }
    .ballot {
        grid-template-columns: minmax(0, 1fr);
    }
    .bosses {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .bosses li:nth-child(n + 4) {
        display: none;
    }
}
@media (max-width: 720px) {
    body {
        font-size: 16px;
    }
    .brand {
        font-size: 26px;
    }
    .brand img {
        width: 26px;
        height: 26px;
    }
    .hero {
        padding-bottom: 150px;
    }
    .hero-h {
        margin: 18px 0 16px;
    }
    .hero-cta {
        margin-top: 24px;
    }
    .hero-cta .btn-play {
        flex: 1 1 100%;
    }
    .hero-cta .btn-ghost {
        display: none;
    }
    .ca {
        width: 100%;
    }
    .ca-v {
        flex: 1;
    }
    .screen-frame {
        padding: 7px;
        border-radius: 18px;
    }
    .screen-bar {
        padding: 2px 4px 9px;
    }
    .screen-clock {
        display: none;
    }
    .screen-view {
        aspect-ratio: 4 / 3;
        border-radius: 12px;
    }
    .screen-tap span {
        font-size: 22px;
    }
    .floor {
        height: 130px;
    }
    .parade {
        bottom: 24px;
        height: 96px;
    }
    .num-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .num {
        padding: 18px 16px;
    }
    .num:nth-child(odd) {
        border-left: 0;
    }
    .num:nth-child(4) {
        border-left: 1px solid var(--line);
    }
    .num:nth-child(n + 3) {
        border-top: 1px solid var(--line);
    }
    .loop {
        grid-template-columns: minmax(0, 1fr);
    }
    .step {
        display: grid;
        grid-template-columns: 76px minmax(0, 1fr);
        column-gap: 18px;
        padding: 20px;
    }
    .step-art {
        grid-row: 1 / span 4;
        width: 76px;
        height: 76px;
        margin: 0;
        border-radius: 18px;
    }
    .step-art canvas {
        max-width: 56px;
        max-height: 56px;
    }
    .step h3 {
        font-size: 28px;
        margin: 8px 0 6px;
    }
    .step-live {
        padding-top: 10px;
    }
    .term-body {
        height: 320px;
        font-size: 12px;
        padding: 14px;
    }
    .term-body li {
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 8px;
    }
    .latest,
    .pot,
    .board {
        padding: 22px 18px;
    }
    .tl-head {
        margin-top: 56px;
    }
    .tl-nav {
        display: none;
    }
    .bc {
        width: 244px;
        min-height: 300px;
    }
    .lb .opt-c {
        display: none;
    }
    .lb .nm {
        max-width: 120px;
    }
    .voice {
        grid-template-columns: minmax(0, 1fr);
    }
    .vote-bar .btn-solid {
        margin-left: 0;
        width: 100%;
    }
    .bosses {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .bosses li:nth-child(3) {
        display: none;
    }
    .bosses canvas {
        height: 96px;
    }
    .marquee li {
        width: 170px;
    }
    .does {
        grid-template-columns: minmax(0, 1fr);
    }
    .coin-art {
        height: 160px;
    }
    .rc-tiles,
    .who {
        grid-template-columns: minmax(0, 1fr);
    }
    .moves li {
        grid-template-columns: 30px minmax(0, 1fr) auto;
    }
    .moves .tx {
        grid-column: 2 / -1;
        margin-top: -6px;
    }
    .faq summary {
        font-size: 23px;
        padding: 18px;
    }
    .faq details p {
        padding: 0 18px 18px;
    }
    .finale-cta .btn-play,
    .finale-cta .btn-line {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .rv {
        opacity: 1;
        transform: none;
    }
    .screen-frame {
        transform: none;
    }
}

/* ------------------------------------------------------------------ /receipts */

body.page main {
    padding-top: calc(var(--nav-h) + clamp(40px, 7vw, 88px));
}
.nav-links a[aria-current='page'] {
    color: #fff;
    background: rgba(22, 224, 138, 0.1);
}
.page-h {
    max-width: 860px;
    margin-bottom: 40px;
}
.page-h h1 {
    font: 400 clamp(52px, 7vw, 100px) / 0.9 var(--display);
}
.sec-s {
    margin-top: 56px;
}
.h2s {
    margin-bottom: 18px;
    font: 400 clamp(34px, 4vw, 48px) / 1 var(--display);
}
.wallets .rc-tile {
    min-width: 0;
}
.w-addr {
    display: block;
    margin-top: 6px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 12px;
    white-space: normal;
    word-break: break-all;
    color: var(--text-2);
}
.w-go {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
}
.w-go:empty {
    display: none;
}
.seg {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
}
.seg button {
    padding: 8px 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text-2);
    font: 600 13px/1 var(--sans);
    cursor: pointer;
}
.seg button.on {
    background: var(--bull);
    color: var(--bull-ink);
}
.rc-feed-h h2 {
    font: 400 32px/1 var(--display);
}
.lg-wrap {
    margin-top: 16px;
    overflow-x: auto;
}
.lg {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
    font-size: 13px;
}
.lg th {
    padding: 0 10px 10px;
    text-align: left;
    font: 400 11px/1 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
}
.lg td {
    padding: 11px 10px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
.lg .tm {
    font-family: var(--mono);
    color: var(--muted);
    white-space: nowrap;
}
.lg td b {
    font-weight: 600;
}
.lg .amt {
    font: 700 12px/1.4 var(--mono);
    white-space: nowrap;
}
.lg .amt.in {
    color: var(--bull-2);
}
.lg .memo {
    max-width: 360px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}
.lg td:last-child {
    white-space: nowrap;
}
.flow {
    display: inline-block;
    min-width: 46px;
    padding: 2px 6px;
    border-radius: 6px;
    font: 700 10px/1.4 var(--mono);
    text-transform: uppercase;
}
.flow.in {
    background: rgba(22, 224, 138, 0.12);
    color: var(--bull);
}
.flow.out {
    background: rgba(255, 59, 92, 0.1);
    color: #ff8da1;
}
.mk {
    display: block;
    margin-top: 3px;
    font: 400 10px/1.2 var(--mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.mk.m {
    color: var(--bull-2);
}
.mk.e {
    color: var(--gold);
}
.notes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.note {
    padding: 22px 24px;
    border-radius: var(--r);
    border: 1px solid var(--line);
    background: var(--card);
}
.note.gold {
    border-color: rgba(255, 197, 61, 0.3);
}
.note h3 {
    margin-bottom: 10px;
    font: 400 26px/1 var(--display);
}
.note p {
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.65;
}
.note p + p {
    margin-top: 10px;
}
.note .links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
}
.rules-list {
    margin-top: 12px;
    padding-left: 18px;
    list-style: disc;
}
.rules-list li {
    margin-top: 8px;
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.6;
}
body.page .foot {
    margin-top: 96px;
}
@media (max-width: 1040px) {
    .notes {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 720px) {
    .rc-feed-h {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ------------------------------------------------------------------ spotlight + live feed */

.step,
.opt,
.bc,
.rc-tile,
.latest,
.who-c,
.voice-card,
.bosses li,
.note,
.pot,
.board {
    position: relative;
}
.spot::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(
        420px circle at var(--mx, -999px) var(--my, -999px),
        rgba(22, 224, 138, 0.09),
        transparent 45%
    );
    opacity: 0;
    transition: opacity 300ms;
}
.bosses li.spot::before {
    background: radial-gradient(
        320px circle at var(--mx, -999px) var(--my, -999px),
        rgba(255, 59, 92, 0.12),
        transparent 45%
    );
}
.pot.spot::before {
    background: radial-gradient(
        420px circle at var(--mx, -999px) var(--my, -999px),
        rgba(255, 197, 61, 0.08),
        transparent 45%
    );
}
.spot:hover::before {
    opacity: 1;
}
.feed {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 380px;
    padding: 12px 12px 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(22, 224, 138, 0.25);
    background: rgba(8, 12, 16, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-2);
    transform: translateY(calc(100% + 30px));
    opacity: 0;
    transition:
        transform 450ms var(--ease),
        opacity 450ms;
}
.feed.on {
    transform: none;
    opacity: 1;
}
.feed-k {
    display: block;
    margin-bottom: 2px;
    font: 700 10px/1 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bull);
}
.feed-x {
    flex: none;
    align-self: flex-start;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}
.feed-x:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}
@media (max-width: 1040px) {
    .feed {
        display: none;
    }
}

/* ------------------------------------------------------------------ ideas box, one wide card */

.voice.one {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 28px;
}
.voice.one .voice-card {
    flex-direction: row;
    gap: 32px;
}
.voice-main {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.voice.one .ideas-feed {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 0 0 0 32px;
    border-top: 0;
    border-left: 1px solid var(--line);
}
@media (max-width: 720px) {
    .voice.one .voice-card {
        flex-direction: column;
        gap: 12px;
    }
    .voice.one .ideas-feed {
        padding: 14px 0 0;
        border-left: 0;
        border-top: 1px solid var(--line);
    }
}

/* ------------------------------------------------------------------ /bears */

.cast {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
}
.cast.bosses-l,
.cast.heroes {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.cast-c {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px;
    border-radius: var(--r);
    border: 1px solid var(--line);
    background: linear-gradient(180deg, var(--card-2), var(--card));
}
.cast-c.cast-boss {
    border-color: rgba(255, 59, 92, 0.22);
    background:
        radial-gradient(70% 45% at 50% 22%, rgba(255, 59, 92, 0.16), transparent 70%),
        linear-gradient(180deg, #120c10, #0b090c);
}
.cast-c.cast-hero {
    border-color: rgba(22, 224, 138, 0.25);
    background:
        radial-gradient(70% 45% at 50% 22%, rgba(22, 224, 138, 0.14), transparent 70%),
        linear-gradient(180deg, var(--card-2), var(--card));
}
.cast-art {
    display: grid;
    place-items: center;
    height: 150px;
    margin-bottom: 8px;
}
.cast-c.cast-mob .cast-art {
    height: 110px;
}
.cast-c.cast-mob .cast-art canvas {
    max-height: 110px;
}
.cast-art canvas {
    max-height: 150px;
    max-width: 100%;
    width: auto;
    height: auto;
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55));
}
.cast-c h3 {
    font: 400 28px/1 var(--display);
}
.cast-c.cast-boss h3 {
    color: #ffd4dc;
}
.cast-tag {
    align-self: flex-start;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(255, 59, 92, 0.14);
    color: #ff8da1;
    font: 700 10px/1.3 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.cast-line {
    color: var(--text);
    font-size: 15px;
    font-style: italic;
}
.cast-desc {
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.55;
}
.cast-tip {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}
.cast-tip b {
    color: var(--bull);
    font: 700 11px/1 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.bears-cta {
    text-align: center;
    padding: 40px 0 10px;
}
.bears-cta .h2s {
    margin-bottom: 22px;
}

/* your own vote, in an open poll */
.opt.mine {
    border-color: rgba(22, 224, 138, 0.6);
    box-shadow: 0 0 44px rgba(22, 224, 138, 0.14);
}
.opt.mine .btn-solid:disabled {
    opacity: 1;
    background: var(--bull);
    color: var(--bull-ink);
}
.opt-gap {
    margin-top: auto;
    padding-top: 22px;
}