:root {
    --hub-native: 21;
    --hub-scale: 3;
    --hub-gap: 20px; /* a bit more breathing room */
    --sbw: 0px; /* JS will update this; default to 0 */
}

@media (max-width: 480px) {
    :root {
        --hub-scale: 2;
    }
}

@media (min-width: 1024px) {
    :root {
        --hub-scale: 4;
    }
}

.plea-hub-btn {
    position: fixed;
    top: calc(var(--hub-gap) + env(safe-area-inset-top));
    right: calc(var(--hub-gap) + env(safe-area-inset-right) + var(--sbw, 0px));
    width: calc(var(--hub-native) * var(--hub-scale) * 1px);
    height: calc(var(--hub-native) * var(--hub-scale) * 1px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 0;
    text-decoration: none;
    z-index: 10050;
    opacity: 0; /* will fade to .5 */
    transition: opacity .3s ease;
    pointer-events: auto;
    touch-action: manipulation;
    overflow: hidden;
}

    .plea-hub-btn.is-show {
        opacity: .5;
    }

    .plea-hub-btn:hover,
    .plea-hub-btn:focus-visible {
        opacity: .8;
    }

    .plea-hub-btn:active {
        opacity: 1;
    }

    .plea-hub-btn img {
        width: 100%;
        height: 100%;
        display: block;
        image-rendering: pixelated;
        image-rendering: crisp-edges;
        image-rendering: -moz-crisp-edges;
        -ms-interpolation-mode: nearest-neighbor;
    }

/* 1) Define your font properly */
@font-face {
    font-family: 'Voice1';
    src: url('../fonts/Voice1.woff2') format('woff2'), url('../fonts/Voice1.woff') format('woff'), url('../fonts/Voice1.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* 2) Mobile viewport for responsive scaling */
html, body {
    background-color: #000;
    margin: 0;
    padding: 0;
}

meta[name="viewport"] {
    content: "width=device-width, initial-scale=1";
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* 3) Container with fluid side padding */
.container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 0 clamp(10%, 20vw, 20%);
    background-color: #000;
    text-align: center;
    overflow-y: auto;
}

    /* 4) Base paragraph with fluid font size */
    .container p {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        font-family: 'Voice1', sans-serif;
        font-size: clamp(1rem, 4.5vw, 2rem);
        line-height: 1.75;
        word-spacing: -0.2em;
        color: #000; /* start invisible on black bg */
        margin: 0;
    }

    /* 5) Plea number with fluid font size */
    .container .plea-number {
        font-family: 'Voice1', sans-serif;
        display: block;
        font-size: clamp(2rem, 9vw, 4rem);
        margin-bottom: 0.5em;
        color: #fff;
        word-spacing: -0.2em;
    }

.char {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    display: inline; /* allow natural wrapping */
    font-family: 'Voice1', sans-serif;
    font-size: inherit;
    line-height: inherit;
    color: #000; /* hidden on black bg */
    transition: color 0.04s linear;
}

    .char.visible {
        color: #fff;
    }

/* 6) Continue prompt with fluid font size */
#continue-prompt {
    position: fixed;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    opacity: 0;
    font-family: 'Voice1', sans-serif;
    font-size: clamp(1rem, 6vw, 3rem);
    color: #fff;
    pointer-events: none;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

    #continue-prompt.visible {
        opacity: 0.7;
        transform: translateX(-50%) translateY(0);
        transition: opacity 1s ease-in, transform 1s ease-in;
    }

/* 7) Start overlay */
#start-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    pointer-events: auto;
}

/* hide the text until we add .visible */
#start-text {
    opacity: 0;
    transition: opacity 1s ease-in-out;
    font-family: 'Voice1', sans-serif;
    font-size: clamp(2rem, 16vw, 8rem);
    color: #fff;
}

    #start-text.visible {
        opacity: 1;
    }

/* hidden state once we’re done */
#start-overlay.hidden {
    display: none !important;
}

/* 8) Ellipsis with fluid font size */
#ellipsis {
    font-family: 'Voice1', sans-serif;
    font-size: clamp(2rem, 16vw, 8rem);
    color: #fff;
    margin-left: 0;
}

/* ===== Plea Select page ===== */
body.pleas {
    background: #000;
    color: #fff;
}

.plea-list {
    padding: clamp(16px, 6vw, 48px) clamp(12px, 8vw, 120px);
    display: flex;
    flex-direction: column;
    color: #FFEB04;
    align-items: center;
    gap: 0; /* spacing comes from each card now */
}

/* Invisible click area; only text animates */
.plea-card {
    /* shrink factor: ≥50% of visual scale */
    --shrink: calc(0.5 + 0.5 * var(--scale, 1));
    display: block;
    text-decoration: none;
    background: transparent;
    border: 0;
    /* scale-aware vertical spacing (rem so it’s stable) */
    padding-block: calc(0.25rem * var(--shrink)); /* was clamp(...) */
    margin-block: calc(0.90rem * var(--shrink)); /* tighter when smaller */

    padding-inline: clamp(8px, 1.8vw, 14px);
    transform: translateY(24px); /* fly-in */
    transition: transform .5s ease;
    will-change: transform;
}

    .plea-card.is-in {
        transform: translateY(0);
    }

/* Title scales/brightens near center (JS sets --scale & --rest-op) */
.plea-title {
    display: inline-block;
    font-family: 'Voice1', sans-serif;
    font-size: clamp(4rem, 9vw, 6rem); /* your big size */
    /* line-height shrinks with --shrink so the line box gets shorter */
    line-height: calc(1.05 * var(--shrink));
    color: #FFEB04;
    transform-origin: center;
    opacity: var(--rest-op, 0);
    transform: translateZ(0) scale(var(--scale, 1));
    transition: opacity .25s ease, transform .08s ease;
    will-change: opacity, transform;
}

/* Hover/active bump (desktop pointer only) */
@media (hover:hover) {
    .plea-card:hover .plea-title {
        opacity: .9;
    }

    .plea-card:active .plea-title {
        opacity: 1;
    }
}