/* ==========================================================================
   /faucet — the claim card and the latest claims beside it.

   The site's own language: the dark panel with a purple and teal glow, the
   gradient call to action, the live dot, the gradient ring round an icon.
   Side by side on a desktop, stacked on a phone.

   Every class, id, custom property and keyframe here ends in -33. The one
   exception is #info-button, which modal.js (loaded from a stored page
   block) looks up by that name; it is styled through .fc-info-33.
   Logical properties throughout, so right-to-left locales mirror.
   ========================================================================== */

.fc-wrap-33 {
    --fc-purple-33: #a948f8;
    --fc-teal-33: #22e2b6;
    --fc-ink-33: #f5f3ff;
    --fc-text-33: #d6d4de;
    --fc-muted-33: #a3a1ae;
    --fc-faint-33: #77748a;
    --fc-line-33: rgba(255, 255, 255, 0.07);
    --fc-line-strong-33: rgba(255, 255, 255, 0.12);
    --fc-grad-33: linear-gradient(90deg, #a948f8, #22e2b6);
    --fc-grad-loop-33: linear-gradient(90deg, #a948f8, #22e2b6, #a948f8);
    --fc-ease-33: cubic-bezier(.22, 1, .36, 1);
    --fc-font-33: 'Roboto', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 25rem) minmax(0, 1fr);
    align-items: stretch;
    gap: 1.25rem;
    width: calc(100% - 2rem);
    max-width: 64rem;
    margin: 1.5rem auto;
    color: var(--fc-text-33);
    font-family: var(--fc-font-33);
}

.fc-wrap-33 *,
.fc-wrap-33 *::before,
.fc-wrap-33 *::after {
    box-sizing: border-box;
}

/* Shared panel surface. */
.fc-card-33,
.fc-claims-33 {
    position: relative;
    min-width: 0;
    border-radius: 1.25rem;
    border: 1px solid var(--fc-line-33);
    box-shadow: 0 22px 48px -32px rgba(0, 0, 0, 0.95);
}

/* ==========================================================================
   1. The claim card
   ========================================================================== */

.fc-card-33 {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    padding: 1.5rem;
    background:
        radial-gradient(90% 70% at 0% 0%, rgba(169, 72, 248, 0.22), transparent 60%),
        radial-gradient(80% 60% at 100% 100%, rgba(34, 226, 182, 0.12), transparent 60%),
        linear-gradient(180deg, #1d1a24, #141218);
}

[dir="rtl"] .fc-card-33 {
    background:
        radial-gradient(90% 70% at 100% 0%, rgba(169, 72, 248, 0.22), transparent 60%),
        radial-gradient(80% 60% at 0% 100%, rgba(34, 226, 182, 0.12), transparent 60%),
        linear-gradient(180deg, #1d1a24, #141218);
}

.fc-info-33 {
    position: absolute;
    top: 1rem;
    inset-inline-end: 1rem;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--fc-line-strong-33);
    background: rgba(255, 255, 255, 0.05);
    color: var(--fc-text-33);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.fc-info-33:hover {
    border-color: rgba(169, 72, 248, 0.6);
    background: rgba(169, 72, 248, 0.18);
    color: #fff;
}

.fc-info-33 svg {
    width: 1.125rem;
    height: 1.125rem;
}

.fc-head-33 {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

/* The two forms the claim script keeps on the page (the request target and
   the hidden honeypot) are not visible, and must not take a gap each. */
.fc-card-33 > form {
    display: none;
}

/* The token in a rounded square with the gradient ring. */
.fc-mark-33 {
    flex: none;
    display: grid;
    place-items: center;
    width: 3.75rem;
    height: 3.75rem;
    padding: 2px;
    border-radius: 1.125rem;
    background: var(--fc-grad-33);
    box-shadow: 0 12px 26px -12px rgba(169, 72, 248, 0.8);
}

.fc-mark-33 img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0.625rem;
    border-radius: calc(1.125rem - 2px);
    background: #17151c;
    object-fit: contain;
}

.fc-head-text-33 {
    min-width: 0;
}

.fc-title-33 {
    margin: 0;
    background: linear-gradient(90deg, #ffffff, #e9d5ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    /* Room for the help button, on the title's line only. */
    padding-inline-end: 2.75rem;
}

/* Inline, not flex, so a long translation wraps between words rather than
   dropping the whole phrase onto a line of its own. */
.fc-rate-33 {
    margin: 0.375rem 0 0;
    color: var(--fc-muted-33);
    font-size: 0.875rem;
    line-height: 1.4;
}

.fc-rate-33 b {
    color: var(--fc-teal-33);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.fc-rate-33 img {
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    margin-inline: 0.125rem;
    vertical-align: -0.25em;
}

/* --- Signed out ------------------------------------------------------------- */

.fc-locked-33 {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* No side padding: the Login button lines up with the card's edges, as
       the Claim button does when signed in. */
    padding: 1.25rem 0 0.25rem;
    border-top: 1px solid var(--fc-line-33);
    text-align: center;
}

.fc-lock-33 {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.25rem;
    border-radius: 50%;
    border: 1px solid rgba(169, 72, 248, 0.35);
    background: rgba(169, 72, 248, 0.12);
    color: #d8b4fe;
}

.fc-lock-33 svg {
    width: 1.375rem;
    height: 1.375rem;
}

.fc-locked-title-33 {
    margin: 0;
    color: var(--fc-ink-33);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}

.fc-locked-text-33 {
    max-width: 22rem;
    margin: 0 0 0.75rem;
    color: var(--fc-muted-33);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* --- Signed in -------------------------------------------------------------- */

.fc-balances-33 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
}

.fc-balance-33 {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    padding: 0.75rem 0.875rem;
    border-radius: 0.875rem;
    border: 1px solid var(--fc-line-33);
    background: rgba(255, 255, 255, 0.03);
}

.fc-balance-33 img {
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
}

.fc-balance-text-33 {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fc-balance-label-33 {
    color: var(--fc-faint-33);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fc-balance-value-33 {
    overflow: hidden;
    color: var(--fc-ink-33);
    font-size: 1.125rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fc-captcha-33 {
    display: flex;
    justify-content: center;
    min-height: 0;
}

.fc-captcha-33:empty {
    display: none;
}

.fc-message-33 {
    margin: 0;
    color: var(--fc-text-33);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
}

.fc-message-33:has(> span:empty) {
    display: none;
}

/* The countdown as a teal pill, once there is one. */
.fc-countdown-33 {
    align-self: center;
    margin: 0;
    padding: 0.4375rem 0.875rem;
    border-radius: 999px;
    border: 1px solid rgba(34, 226, 182, 0.4);
    background: rgba(34, 226, 182, 0.1);
    color: var(--fc-teal-33);
    font-size: 0.9375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.fc-countdown-33:empty {
    display: none;
}

/* --- The call to action (Claim, or Login) ----------------------------------- */

.fc-cta-33 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 3.375rem;
    padding: 0.75rem 1.25rem;
    border: 0;
    border-radius: 1rem;
    background-image: var(--fc-grad-loop-33);
    background-size: 200% 100%;
    color: #fff;
    font: 800 1.0625rem/1.2 var(--fc-font-33);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 16px 32px -16px rgba(169, 72, 248, 0.9);
    transition: background-position .5s var(--fc-ease-33), transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.fc-cta-33:hover {
    background-position: 100% 0;
    box-shadow: 0 18px 36px -14px rgba(34, 226, 182, 0.6);
    color: #fff;
}

.fc-cta-33:active {
    transform: scale(.98);
}

.fc-cta-33:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}

.fc-cta-33 img {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
}

.fc-cta-33 svg {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
}

[dir="rtl"] .fc-cta-33 svg {
    transform: scaleX(-1);
}

.fc-cta-33:focus-visible,
.fc-info-33:focus-visible {
    outline: 2px solid var(--fc-teal-33);
    outline-offset: 2px;
}

/* ==========================================================================
   2. Latest claims
   ========================================================================== */

.fc-claims-33 {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: linear-gradient(180deg, #19171f, #121016);
}

.fc-claims-head-33 {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--fc-line-33);
}

.fc-claims-head-33::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: -2px;
    width: 3.5rem;
    height: 3px;
    border-radius: 3px;
    background: var(--fc-grad-33);
}

.fc-claims-title-33 {
    margin: 0;
    color: var(--fc-ink-33);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
}

.fc-live-33 {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--fc-teal-33);
    animation: fc-pulse-33 2s ease-out infinite;
}

@keyframes fc-pulse-33 {
    0% { box-shadow: 0 0 0 0 rgba(34, 226, 182, 0.55); }
    70% { box-shadow: 0 0 0 9px rgba(34, 226, 182, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 226, 182, 0); }
}

/* Two classes deep: app/rtl.py pads every `ol` on right-to-left pages. */
.fc-claims-33 ol.fc-list-33 {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fc-row-33 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.875rem;
    background: rgba(255, 255, 255, 0.025);
    transition: background .2s ease;
}

.fc-row-33:hover {
    background: rgba(169, 72, 248, 0.08);
}

/* The newest claim slides in. */
.fc-row-33.fc-new-33 {
    animation: fc-in-33 .45s var(--fc-ease-33) both;
}

@keyframes fc-in-33 {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.fc-who-33 {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.fc-user-33 {
    overflow: hidden;
    color: var(--fc-ink-33);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fc-time-33 {
    color: var(--fc-faint-33);
    font-size: 0.75rem;
    line-height: 1.4;
}

.fc-amounts-33 {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.375rem;
}

.fc-amount-33 {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    min-width: 4.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--fc-line-33);
    background: rgba(255, 255, 255, 0.04);
    color: var(--fc-text-33);
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.fc-amount-33 img {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
}

.fc-empty-33 {
    margin: 1rem 0 0;
    color: var(--fc-muted-33);
    font-size: 0.875rem;
    text-align: center;
}

.fc-empty-33[hidden] {
    display: none;
}

/* Placeholder rows while the list loads. */
.fc-ghost-33 span {
    display: block;
    border-radius: 0.5rem;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.04) 75%);
    background-size: 200% 100%;
    animation: fc-shimmer-33 1.4s linear infinite;
}

.fc-ghost-33 span:nth-child(1) {
    flex: 1 1 auto;
    max-width: 9rem;
    height: 0.875rem;
}

.fc-ghost-33 span:nth-child(2) {
    flex: none;
    width: 6rem;
    height: 1.5rem;
    margin-inline-start: auto;
    border-radius: 999px;
}

@keyframes fc-shimmer-33 {
    to { background-position: -200% 0; }
}

/* ==========================================================================
   3. Narrow screens: one column
   ========================================================================== */

@media (max-width: 859.98px) {
    .fc-wrap-33 {
        grid-template-columns: minmax(0, 1fr);
        max-width: 34rem;
    }
}

@media (max-width: 479.98px) {
    .fc-wrap-33 {
        gap: 1rem;
        margin: 1.25rem auto;
    }

    .fc-card-33 {
        padding: 1.25rem;
    }

    .fc-claims-33 {
        padding: 1rem;
    }

    .fc-title-33 {
        font-size: 1.5rem;
    }

    .fc-mark-33 {
        width: 3.25rem;
        height: 3.25rem;
    }

    .fc-row-33 {
        gap: 0.625rem;
        padding: 0.5rem 0.625rem;
    }

    .fc-amount-33 {
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fc-wrap-33 *,
    .fc-wrap-33 *::before,
    .fc-wrap-33 *::after {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}