* { box-sizing: border-box; }

:root {
    --black: #050505;
    --black-2: #0b0b0c;
    --black-3: #111113;
    --panel: #0e0e10;
    --panel-soft: #151517;
    --white: #f7f7f5;
    --grey-1: #d9d9d7;
    --grey-2: #9a9a9d;
    --grey-3: #66666a;
    --line: rgba(255,255,255,.12);
    --line-soft: rgba(255,255,255,.07);
    --danger-bg: #2a1212;
    --danger-ink: #ffc9c9;
    --success: #1d7a45;
    --radius: 30px;
}

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-width: 320px;
    font-family: Inter, Arial, Helvetica, sans-serif;
    color: var(--white);
    background:
        radial-gradient(circle at 50% -15%, #2a2a2d 0, #111113 31%, #050505 68%),
        #050505;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button, input, select { font: inherit; }
a { color: inherit; }

.site-body { min-height: 100vh; }
.site-body.is-loading { overflow: hidden; }

/* PRELOADER */
.site-preloader {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: grid;
    place-items: center;
    background: #050505;
    transition: opacity .55s ease, visibility .55s ease;
}
.site-preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-inner { width: min(340px, calc(100vw - 48px)); }
.preloader-logo { width: 72px; display: block; margin: 0 auto 28px; animation: preloaderPulse 1.5s ease-in-out infinite; }
.preloader-track { height: 1px; background: #2a2a2a; overflow: hidden; }
.preloader-track span { display: block; width: 0; height: 100%; background: #f5f5f3; transition: width .06s linear; }
.preloader-meta { display: flex; justify-content: space-between; margin-top: 10px; color: #8e8e92; font-size: .66rem; font-weight: 800; letter-spacing: .12em; }

/* PAGE */
.landing-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 22px;
}

.landing-frame {
    width: min(1460px, 100%);
    min-height: calc(100vh - 44px);
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(480px, .92fr);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--radius);
    background: #0a0a0b;
    box-shadow: 0 30px 100px rgba(0,0,0,.48);
}

/* HERO */
.hero-panel {
    --mx: 52%;
    --my: 32%;
    position: relative;
    min-width: 0;
    padding: clamp(28px, 4vw, 54px);
    display: grid;
    grid-template-rows: auto minmax(270px, 1fr) auto auto;
    gap: clamp(28px, 3.2vw, 48px);
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.11) 0, rgba(255,255,255,.035) 22%, transparent 47%),
        linear-gradient(145deg, #101012 0%, #070708 66%, #0d0d0f 100%);
}

.hero-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent 80%);
}

.hero-panel::after {
    content: "";
    position: absolute;
    inset: 20px;
    z-index: -1;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 22px;
    pointer-events: none;
}

.hero-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}


.brand-icon-top {
    display: block;
    width: clamp(36px, 3.6vw, 46px);
    max-width: 46px;
    height: auto;
    opacity: .92;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.2));
}

.edition-tag {
    color: #88888c;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .16em;
    white-space: nowrap;
}

.logo-stage {
    position: relative;
    min-height: 270px;
    display: grid;
    place-items: center;
}

.court-lines {
    position: absolute;
    width: min(78%, 560px);
    aspect-ratio: 1.72 / 1;
    border: 1px solid rgba(255,255,255,.12);
    transform: perspective(700px) rotateX(66deg) translateY(25%);
    opacity: .62;
}
.court-lines::before,
.court-lines::after {
    content: "";
    position: absolute;
    background: rgba(255,255,255,.10);
}
.court-lines::before { width: 1px; top: 0; bottom: 0; left: 50%; }
.court-lines::after { height: 1px; left: 0; right: 0; top: 45%; }

.logo-halo {
    position: absolute;
    width: min(360px, 50vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.075) 0, rgba(255,255,255,.018) 40%, transparent 68%);
    filter: blur(10px);
    animation: haloBreath 5.5s ease-in-out infinite;
}

.logo-orb {
    position: relative;
    width: clamp(290px, 31vw, 425px);
    max-width: 82%;
    aspect-ratio: 2.35 / 1;
    display: grid;
    place-items: center;
    padding: clamp(18px, 2.2vw, 26px);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.012));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 24px 58px rgba(0,0,0,.28);
    backdrop-filter: blur(7px);
    transform-style: preserve-3d;
    transition: transform .18s ease-out, border-color .25s ease;
}
.logo-orb:hover { border-color: rgba(255,255,255,.22); }
.logo-orb::before {
    content: "";
    position: absolute;
    inset: 9px;
    border: 1px solid rgba(255,255,255,.045);
    border-radius: 19px;
}
.logo-orb-primary {
    z-index: 2;
}
.logo-orb-wordmark {
    width: min(88%, 350px);
    max-width: 350px;
    height: auto;
    display: block;
    object-fit: contain;
    transform: translateZ(18px);
    filter: drop-shadow(0 12px 18px rgba(0,0,0,.24));
    animation: logoBreath 4.8s ease-in-out infinite;
}

.stage-copy {
    position: absolute;
    color: rgba(255,255,255,.34);
    font-size: .72rem;
    letter-spacing: .24em;
    font-weight: 800;
}
.stage-copy-left {
    left: 8px;
    bottom: 18px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}
.stage-copy-right {
    right: 8px;
    bottom: 18px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.hero-copy {
    max-width: 680px;
    text-align: left;
}
.eyebrow,
.section-kicker {
    margin: 0 0 14px;
    color: #8f8f93;
    font-size: .69rem;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.hero-copy h1 {
    margin: 0;
    max-width: 680px;
    font-size: clamp(3.1rem, 5.8vw, 6.7rem);
    line-height: .88;
    letter-spacing: -.065em;
    text-transform: uppercase;
}
.hero-copy h1 span { color: #8c8c90; }
.hero-lead {
    margin: 20px 0 0;
    color: #c2c2c4;
    font-size: clamp(1rem, 1.25vw, 1.16rem);
    line-height: 1.55;
}

.hero-footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--line-soft);
}
.hero-footer div {
    min-width: 0;
    padding: 14px 12px 0 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.hero-footer div + div { padding-left: 16px; border-left: 1px solid var(--line-soft); }
.hero-footer span { color: #66666b; font-size: .62rem; font-weight: 800; }
.hero-footer strong { font-size: .73rem; letter-spacing: .13em; }

/* FORM */
.form-panel {
    position: relative;
    min-width: 0;
    padding: clamp(34px, 4.2vw, 62px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--white);
    background:
        radial-gradient(circle at 100% 0, rgba(255,255,255,.055), transparent 32%),
        #0d0d0f;
    border-left: 1px solid var(--line-soft);
}

.form-panel::before {
    content: "";
    position: absolute;
    left: 0;
    top: 11%;
    bottom: 11%;
    width: 1px;
    background: linear-gradient(transparent, rgba(255,255,255,.24), transparent);
}

.form-heading,
.signup-form { width: min(100%, 660px); margin-left: auto; margin-right: auto; }
.form-heading { margin-bottom: 30px; text-align: left; }
.form-heading h2 {
    margin: 0;
    font-size: clamp(2.5rem, 4vw, 4.3rem);
    line-height: .92;
    letter-spacing: -.055em;
    text-transform: uppercase;
}
.form-heading > p:last-child {
    margin: 14px 0 0;
    max-width: 520px;
    color: #9f9fa3;
    font-size: .98rem;
    line-height: 1.6;
}

.form-grid { display: grid; gap: 14px; }
.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { margin-bottom: 15px; }
.field label,
.interest-fieldset legend {
    display: block;
    margin-bottom: 8px;
    color: #c6c6c8;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.field label span,
.interest-fieldset legend span { color: #88888d; }

.field input,
.custom-select-trigger {
    width: 100%;
    min-height: 50px;
    padding: 0 2px;
    border: 0;
    border-bottom: 1px solid #343438;
    border-radius: 0;
    outline: none;
    background: transparent;
    color: #f5f5f3;
    transition: border-color .18s ease, background .18s ease;
}
.field input::placeholder { color: #626267; }
.field input:focus,
.custom-select-trigger:focus { border-color: #d0d0d2; }

.custom-select {
    position: relative;
}
.custom-select-native {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}
.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    text-align: left;
    cursor: pointer;
}
.custom-select-trigger.is-placeholder,
.custom-select:not(.has-value) .custom-select-value {
    color: #f5f5f3;
}
.custom-select-value {
    display: block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.custom-select-arrow {
    flex: 0 0 auto;
    color: #c7c7ca;
    font-size: 1rem;
    line-height: 1;
    transition: transform .18s ease, color .18s ease;
}
.custom-select.is-open .custom-select-arrow {
    transform: rotate(180deg);
    color: #ffffff;
}
.custom-select-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    z-index: 20;
    padding: 8px;
    display: grid;
    gap: 6px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(18,18,20,.98), rgba(9,9,10,.98));
    box-shadow: 0 22px 55px rgba(0,0,0,.42);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
    max-height: 280px;
    overflow-y: auto;
}
.custom-select.is-open .custom-select-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.custom-select-option {
    min-height: 46px;
    width: 100%;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: #d7d7da;
    text-align: left;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.custom-select-option span {
    font-size: .94rem;
}
.custom-select-option:hover,
.custom-select-option:focus {
    background: rgba(255,255,255,.06);
    color: #ffffff;
    border-color: rgba(255,255,255,.08);
    outline: none;
}
.custom-select-option.is-selected {
    background: #f3f3f1;
    color: #0a0a0a;
    font-weight: 800;
}
.custom-select.is-invalid .custom-select-trigger {
    border-color: #ff9c9c;
}


.interest-fieldset { margin: 9px 0 20px; padding: 0; border: 0; }
.field-help { margin: -2px 0 12px; color: #727277; font-size: .8rem; }
.interest-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.interest-option { position: relative; cursor: pointer; }
.interest-option input { position: absolute; opacity: 0; pointer-events: none; }
.interest-option span {
    min-height: 44px;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid #2e2e32;
    border-radius: 999px;
    background: #111114;
    color: #b6b6b9;
    font-size: .76rem;
    font-weight: 800;
    transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.interest-option:hover span { border-color: #55555a; color: #f0f0ef; transform: translateY(-1px); }
.interest-option input:checked + span { background: #f1f1ef; color: #0b0b0c; border-color: #f1f1ef; }
.interest-option input:focus-visible + span { box-shadow: 0 0 0 3px rgba(255,255,255,.10); }

.consent-row {
    margin: 18px 0 22px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #8f8f94;
    font-size: .78rem;
    line-height: 1.5;
}
.consent-row input { width: 16px; height: 16px; margin: 1px 0 0; flex: 0 0 auto; accent-color: #f5f5f3; }

.primary-button,
.secondary-button {
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 0;
    border-radius: 999px;
    font-weight: 900;
    letter-spacing: .09em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.primary-button {
    width: 100%;
    padding: 0 20px 0 24px;
    background: #f3f3f1;
    color: #09090a;
    box-shadow: 0 10px 34px rgba(255,255,255,.06);
}
.primary-button:hover { box-shadow: 0 12px 38px rgba(255,255,255,.10); }
.button-arrow {
    width: 34px;
    height: 34px;
    position: relative;
    flex: 0 0 34px;
    border-radius: 50%;
    background: #0b0b0c;
    color: #f3f3f1;
}
.button-arrow::before {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    top: 9px;
    right: 9px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}
.button-arrow::after {
    content: "";
    position: absolute;
    width: 13px;
    height: 2px;
    left: 10px;
    top: 17px;
    border-radius: 999px;
    background: currentColor;
    transform: rotate(-45deg);
    transform-origin: center;
}
.secondary-button { padding: 0 24px; background: #111; color: #fff; }
.required-note { margin: 10px 0 0; color: #66666b; font-size: .68rem; }

.alert { margin: 0 auto 20px; width: min(100%, 660px); border-radius: 12px; padding: 14px 16px; }
.alert ul { margin: 8px 0 0; padding-left: 20px; }
.alert-error { background: var(--danger-bg); color: var(--danger-ink); border: 1px solid rgba(255,170,170,.18); }

/* REVEALS */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .65s ease, transform .65s cubic-bezier(.22,.85,.22,1); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* SUCCESS / SETUP */
.success-shell { min-height: 100vh; display: grid; place-items: center; padding: 30px; }
.success-card { width: min(700px,100%); background: #f4f4f2; color: #111; border-radius: 24px; padding: clamp(30px,6vw,70px); text-align: center; box-shadow: 0 30px 90px rgba(0,0,0,.35); }
.success-logo { width: 76px; display: block; margin: 0 auto 26px; }
.success-icon { width: 70px; height: 70px; margin: 0 auto 22px; display: grid; place-items: center; border-radius: 50%; background: #e4e4e2; color: var(--success); font-size: 2rem; font-weight: 900; }
.success-card h1 { margin: 0; font-size: clamp(2rem,5vw,4rem); line-height: .96; letter-spacing: -.05em; text-transform: uppercase; }
.success-card p:not(.section-kicker) { margin: 18px auto 28px; max-width: 540px; color: #666; line-height: 1.7; }
.notice { margin-bottom: 18px; padding: 13px 15px; border-radius: 10px; background: #eee; color: #333; border: 1px solid #ddd; font-size: .9rem; line-height: 1.45; }

/* ADMIN */
.admin-body {
    --admin-mx: 50%;
    --admin-my: 18%;
    min-height: 100vh;
    color: #f7f7f5;
    background:
        radial-gradient(circle at var(--admin-mx) var(--admin-my), rgba(255,255,255,.07), transparent 22rem),
        radial-gradient(circle at 12% 18%, rgba(255,255,255,.035), transparent 25rem),
        linear-gradient(180deg, #09090a 0%, #050505 100%);
}
.admin-body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .22;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(to bottom, #000 0%, transparent 72%);
}
.admin-shell { min-height: 100vh; position: relative; z-index: 1; }

.admin-topbar {
    min-height: 78px;
    padding: 0 clamp(18px,3vw,38px);
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    background: rgba(5,5,5,.82);
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(18px);
}
.admin-brand-lockup { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.admin-brand-icon-wrap { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.09); }
.admin-brand-icon { width: 25px; display: block; }
.admin-brand-copy { display: grid; gap: 1px; line-height: 1; }
.admin-brand-copy strong { font-size: .9rem; letter-spacing: .16em; }
.admin-brand-copy small { color: #77777b; font-size: .55rem; font-weight: 900; letter-spacing: .14em; }
.admin-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.admin-nav a { padding: 10px 13px; border-radius: 999px; color: #8f8f93; text-decoration: none; font-size: .8rem; font-weight: 850; transition: .18s ease; }
.admin-nav a:hover, .admin-nav a.active { background: #f3f3f1; color: #0a0a0a; }
.admin-nav .admin-nav-logout { margin-left: 7px; border: 1px solid rgba(255,255,255,.1); color: #c5c5c6; }
.admin-nav .admin-nav-logout:hover { background: #221010; border-color: #522828; color: #ffd4d4; }

.admin-main { width: min(1420px,calc(100% - 38px)); margin: 0 auto; padding: 34px 0 58px; }
.admin-hero-row { position: relative; min-height: 230px; margin-bottom: 22px; padding: clamp(26px,4vw,46px); overflow: hidden; border: 1px solid rgba(255,255,255,.085); border-radius: 28px; background: linear-gradient(135deg, #111113 0%, #0b0b0c 62%, #080809 100%); }
.admin-hero-row::before { content: ""; position: absolute; inset: auto -8% -70% auto; width: 420px; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255,255,255,.07); box-shadow: 0 0 0 50px rgba(255,255,255,.014), 0 0 0 100px rgba(255,255,255,.009); }
.admin-page-heading { position: relative; z-index: 2; min-height: 140px; display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
.admin-heading-meta { display: flex; align-items: center; gap: 9px; margin-bottom: 15px; color: #77777b; font-size: .65rem; font-weight: 900; letter-spacing: .15em; }
.admin-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #f4f4f2; box-shadow: 0 0 0 5px rgba(255,255,255,.055); animation: adminLivePulse 2.2s ease-in-out infinite; }
.admin-heading-divider { width: 1px; height: 12px; background: #333337; }
.admin-page-heading h1 { margin: 0; font-size: clamp(2.7rem,6vw,5.7rem); line-height: .88; letter-spacing: -.065em; text-transform: uppercase; }
.admin-page-heading p { max-width: 620px; margin: 16px 0 0; color: #8f8f93; line-height: 1.65; }
.admin-hero-emblem { position: absolute; top: -52px; right: clamp(34px,8vw,120px); width: 260px; height: 260px; display: grid; place-items: center; opacity: .055; transform: rotate(-5deg); pointer-events: none; }
.admin-hero-emblem img { width: 100%; }

.admin-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.admin-button, .danger-button { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.035); color: #f3f3f2; text-decoration: none; font-size: .76rem; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; cursor: pointer; transition: .18s ease; }
.admin-button:hover { transform: translateY(-1px); background: rgba(255,255,255,.08); }
.admin-button.primary { border-color: #f4f4f2; background: #f4f4f2; color: #0a0a0a; }
.admin-button.primary:hover { background: #fff; }
.danger-button { border-color: #6c3030; background: #351515; color: #ffcbcb; }

.stats-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-bottom: 22px; }
.stat-card { position: relative; min-height: 190px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; background: linear-gradient(155deg,#101012,#0b0b0c); color: #fff; border: 1px solid rgba(255,255,255,.08); border-radius: 22px; transition: transform .2s ease,border-color .2s ease; }
.stat-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.15); }
.stat-card-featured { background: #f2f2ef; color: #0b0b0b; border-color: #f2f2ef; }
.stat-card-featured::after { content: ""; position: absolute; right: -45px; bottom: -70px; width: 170px; height: 170px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); box-shadow: 0 0 0 28px rgba(0,0,0,.028), 0 0 0 55px rgba(0,0,0,.018); }
.stat-card-top, .stat-card-foot { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.stat-card-top > span:first-child { color: #858589; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 900; }
.stat-card-featured .stat-card-top > span:first-child { color: #5f5f61; }
.stat-index { color: #55555a; font-size: .65rem; font-weight: 900; letter-spacing: .12em; }
.stat-card-featured .stat-index { color: #838383; }
.stat-card strong { position: relative; z-index: 1; display: block; margin: 16px 0 20px; font-size: clamp(3.1rem,6vw,5.1rem); line-height: .8; letter-spacing: -.07em; }
.stat-card-foot { color: #76767a; font-size: .74rem; }
.stat-card-featured .stat-card-foot { color: #535356; }
.stat-arrow { min-width: 30px; height: 30px; padding: 0 7px; display: grid; place-items: center; border-radius: 999px; border: 1px solid rgba(255,255,255,.1); color: #c9c9ca; font-weight: 900; }
.stat-card-featured .stat-arrow { border-color: rgba(0,0,0,.13); color: #111; }

.admin-card { overflow: hidden; background: linear-gradient(180deg,#101012,#0b0b0c); color: #fff; border: 1px solid rgba(255,255,255,.08); border-radius: 24px; box-shadow: 0 22px 50px rgba(0,0,0,.18); }
.admin-card-header { padding: 22px 24px; border-bottom: 1px solid rgba(255,255,255,.075); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.admin-card-kicker { margin: 0 0 7px; color: #68686d; font-size: .62rem; font-weight: 900; letter-spacing: .15em; }
.admin-card-header h2 { margin: 0; font-size: 1.12rem; text-transform: uppercase; letter-spacing: .035em; }
.admin-card-link { color: #9b9b9f; text-decoration: none; font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.admin-card-link:hover { color: #fff; }
.admin-table-wrap { overflow-x: auto; scrollbar-color: #343438 #0b0b0c; }
.admin-table { width: 100%; border-collapse: collapse; min-width: 980px; }
.admin-table th, .admin-table td { padding: 15px 17px; border-bottom: 1px solid rgba(255,255,255,.065); text-align: left; vertical-align: middle; font-size: .85rem; }
.admin-table th { background: rgba(255,255,255,.018); color: #65656a; font-size: .67rem; letter-spacing: .11em; text-transform: uppercase; }
.admin-table tbody tr { transition: background .16s ease; }
.admin-table tbody tr:hover { background: rgba(255,255,255,.025); }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-person-cell { display: flex; align-items: center; gap: 11px; white-space: nowrap; }
.admin-person-avatar { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #f0f0ee; color: #111; font-size: .68rem; font-weight: 950; letter-spacing: .03em; }
.admin-level-pill { display: inline-flex; min-height: 29px; align-items: center; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.1); color: #c2c2c4; font-size: .72rem; white-space: nowrap; }
.tag-list { display: flex; flex-wrap: wrap; gap: 5px; }
.tag { display: inline-flex; min-height: 28px; align-items: center; padding: 0 9px; border-radius: 999px; background: rgba(255,255,255,.06); color: #b3b3b6; font-size: .69rem; font-weight: 750; white-space: nowrap; }
.tag-more { background: #ededeb; color: #111; }
.admin-time-text { display: grid; gap: 3px; white-space: nowrap; color: #c0c0c2; }
.admin-time-text small { color: #68686d; font-size: .69rem; }

.search-bar { display: flex; gap: 10px; width: min(700px,100%); }
.search-bar input { flex: 1; min-height: 44px; border: 1px solid rgba(255,255,255,.11); border-radius: 999px; padding: 0 15px; background: #09090a; color: #fff; outline: none; }
.search-bar input:focus { border-color: #77777c; box-shadow: 0 0 0 4px rgba(255,255,255,.035); }
.pagination { display: flex; flex-wrap: wrap; gap: 6px; padding: 18px 20px; border-top: 1px solid rgba(255,255,255,.07); }
.pagination a, .pagination span { min-width: 38px; height: 38px; display: grid; place-items: center; border-radius: 999px; border: 1px solid rgba(255,255,255,.1); background: #0b0b0c; color: #aaa; text-decoration: none; font-size: .8rem; font-weight: 800; }
.pagination a:hover { color: #fff; border-color: rgba(255,255,255,.22); }
.pagination span.current { background: #f4f4f2; color: #111; border-color: #f4f4f2; }
.empty-state { min-height: 260px; padding: 40px 20px; display: grid; place-items: center; align-content: center; gap: 9px; text-align: center; color: #79797d; }
.empty-state-logo { width: 50px; opacity: .28; margin-bottom: 6px; }
.empty-state strong { color: #d7d7d7; font-size: 1rem; }
.empty-state span { font-size: .8rem; }

/* ADMIN LOGIN */
.admin-login-body { overflow-x: hidden; }
.admin-login-shell { min-height: 100vh; display: grid; place-items: center; padding: clamp(16px,3vw,34px); }
.admin-login-panel { width: min(1180px,100%); min-height: min(720px,calc(100vh - 68px)); display: grid; grid-template-columns: minmax(0,1.05fr) minmax(420px,.95fr); overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 30px; background: #0a0a0b; box-shadow: 0 35px 100px rgba(0,0,0,.35); }
.admin-login-brand { position: relative; padding: 34px clamp(28px,4vw,48px); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; background: radial-gradient(circle at 58% 38%, #202023 0%, #101012 28%, #09090a 66%); }
.admin-login-brand::before { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(255,255,255,.06); border-radius: 22px; pointer-events: none; }
.admin-login-brand::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size: 54px 54px; mask-image: radial-gradient(circle at 55% 45%,#000,transparent 68%); pointer-events: none; }
.admin-login-brand-top, .admin-login-copy, .admin-login-features { position: relative; z-index: 3; }
.admin-login-brand-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.admin-login-wordmark { width: 225px; max-width: 60%; display: block; }
.admin-security-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.1); color: #838388; font-size: .58rem; font-weight: 900; letter-spacing: .12em; }
.admin-security-chip span { width: 6px; height: 6px; border-radius: 50%; background: #efefed; box-shadow: 0 0 0 4px rgba(255,255,255,.05); }
.admin-login-mark-wrap { position: absolute; z-index: 1; inset: 15% 0 auto 0; height: 400px; display: grid; place-items: center; pointer-events: none; }
.admin-login-mark-card { width: 180px; height: 180px; border-radius: 38px; display: grid; place-items: center; background: linear-gradient(155deg,#171719,#0b0b0c); border: 1px solid rgba(255,255,255,.09); box-shadow: 0 28px 55px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06); animation: adminLogoFloat 6s ease-in-out infinite; }
.admin-login-mark { width: 70%; }
.admin-login-ring { position: absolute; border: 1px solid rgba(255,255,255,.055); border-radius: 50%; animation: adminRing 8s ease-in-out infinite; }
.admin-login-ring-one { width: 310px; height: 310px; }
.admin-login-ring-two { width: 390px; height: 390px; animation-delay: -3s; }
.admin-kicker { margin: 0 0 12px; color: #77777c; font-size: .64rem; font-weight: 900; letter-spacing: .16em; }
.admin-login-copy { margin-top: 280px; max-width: 520px; }
.admin-login-copy h1 { margin: 0; font-size: clamp(3rem,6vw,5.5rem); line-height: .86; letter-spacing: -.065em; text-transform: uppercase; }
.admin-login-copy > p:last-child { max-width: 500px; margin: 18px 0 0; color: #8e8e92; line-height: 1.62; }
.admin-login-features { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.admin-login-features span { min-height: 32px; display: inline-flex; align-items: center; padding: 0 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.09); color: #8e8e92; font-size: .59rem; font-weight: 900; letter-spacing: .1em; }
.admin-login-form-side { position: relative; padding: clamp(38px,6vw,68px); display: flex; flex-direction: column; justify-content: center; background: linear-gradient(180deg,#111113,#0c0c0d); border-left: 1px solid rgba(255,255,255,.075); }
.admin-login-form-side::after { content: ""; position: absolute; left: 38px; right: 38px; top: 0; height: 1px; background: linear-gradient(90deg,transparent,#555,transparent); }
.admin-login-form-head { margin-bottom: 30px; }
.admin-login-form-head h2 { margin: 0; font-size: clamp(2.2rem,4vw,3.5rem); line-height: .95; letter-spacing: -.055em; text-transform: uppercase; }
.admin-login-form-head > p:last-child { max-width: 430px; margin: 14px 0 0; color: #858589; line-height: 1.58; }
.admin-login-form { width: 100%; }
.admin-field { margin-bottom: 17px; }
.admin-field label { color: #b9b9bb; }
.admin-field input { min-height: 58px; border-radius: 14px; background: #09090a; border-color: #2a2a2d; }
.admin-field input:focus { border-color: #77777b; box-shadow: 0 0 0 4px rgba(255,255,255,.035); }
.admin-login-submit { width: 100%; min-height: 60px; margin-top: 5px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 999px; background: #f2f2ef; color: #0a0a0a; font-weight: 950; font-size: .79rem; letter-spacing: .1em; cursor: pointer; transition: transform .18s ease,background .18s ease; }
.admin-login-submit:hover { background: #fff; transform: translateY(-1px); }
.admin-login-foot { margin-top: 34px; padding-top: 20px; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(255,255,255,.07); color: #55555a; font-size: .56rem; font-weight: 900; letter-spacing: .11em; }


/* Shared admin forms / non-dashboard pages */
.admin-main > .admin-page-heading {
    min-height: 0;
    align-items: flex-end;
    margin-bottom: 24px;
}
.admin-main > .admin-page-heading h1 {
    font-size: clamp(2.4rem,5vw,4.1rem);
    line-height: .94;
}
.admin-main > .admin-page-heading p {
    max-width: 650px;
}
.login-card {
    width: min(620px,100%);
    padding: clamp(24px,4vw,38px);
    border-radius: 24px;
    background: linear-gradient(155deg,#111113,#0b0b0c);
    border: 1px solid rgba(255,255,255,.085);
    box-shadow: 0 24px 55px rgba(0,0,0,.22);
    color: #fff;
}
.login-card .field { margin-bottom: 17px; }
.login-card .field label { color: #c4c4c6; }
.login-card .field input { background: #09090a; border-color: #2b2b2e; color: #fff; }
.login-card .primary-button { margin-top: 4px; }

@keyframes adminLivePulse { 0%,100% { opacity: .5; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes adminLogoFloat { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(9px) rotate(1deg); } }
@keyframes adminRing { 0%,100% { transform: scale(.94); opacity: .42; } 50% { transform: scale(1.035); opacity: .75; } }

@media (max-width: 980px) {
    .admin-login-panel { grid-template-columns: 1fr; }
    .admin-login-brand { min-height: 550px; }
    .admin-login-form-side { border-left: 0; border-top: 1px solid rgba(255,255,255,.075); }
    .admin-login-copy { margin-top: 270px; }
    .admin-hero-emblem { right: -40px; }
}

@media (max-width: 800px) {
    .admin-topbar { align-items: flex-start; flex-direction: column; padding-top: 15px; padding-bottom: 15px; }
    .admin-nav { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
    .admin-nav a { white-space: nowrap; }
    .admin-nav .admin-nav-logout { margin-left: 0; }
    .admin-main { width: min(100% - 24px,1420px); padding-top: 20px; }
    .admin-hero-row { min-height: auto; padding: 24px 20px; }
    .admin-page-heading { min-height: 0; align-items: flex-start; flex-direction: column; }
    .admin-page-heading h1 { font-size: clamp(2.9rem,14vw,4.4rem); }
    .admin-actions { width: 100%; }
    .admin-actions .admin-button { flex: 1; }
    .stats-grid { grid-template-columns: 1fr; }
    .stat-card { min-height: 158px; }
    .stat-card strong { font-size: 4rem; }
    .admin-card { border-radius: 20px; }
    .admin-card-header { padding: 18px; }
    .search-bar { flex-direction: column; }
}

@media (max-width: 620px) {
    .admin-login-shell { padding: 0; }
    .admin-login-panel { min-height: 100vh; border-radius: 0; border-left: 0; border-right: 0; }
    .admin-login-brand { min-height: 500px; padding: 24px 20px; }
    .admin-login-brand::before { inset: 10px; border-radius: 18px; }
    .admin-login-wordmark { width: 180px; max-width: 58%; }
    .admin-security-chip { padding: 0 9px; font-size: .5rem; }
    .admin-login-mark-wrap { height: 340px; inset: 12% 0 auto 0; }
    .admin-login-mark-card { width: 145px; height: 145px; border-radius: 30px; }
    .admin-login-ring-one { width: 250px; height: 250px; }
    .admin-login-ring-two { width: 320px; height: 320px; }
    .admin-login-copy { margin-top: 235px; }
    .admin-login-copy h1 { font-size: clamp(2.8rem,15vw,4.3rem); }
    .admin-login-form-side { padding: 38px 20px 34px; }
    .admin-login-form-head h2 { font-size: 2.6rem; }
    .admin-login-foot { align-items: flex-start; flex-direction: column; gap: 8px; }
    .admin-brand-copy small { display: none; }
    .admin-hero-emblem { display: none; }
    .admin-heading-meta { flex-wrap: wrap; }
    .admin-page-heading p { font-size: .9rem; }
}

@keyframes preloaderPulse { 0%,100% { opacity: .6; transform: scale(.96); } 50% { opacity: 1; transform: scale(1); } }
@keyframes haloBreath { 0%,100% { transform: scale(.93); opacity: .6; } 50% { transform: scale(1.05); opacity: 1; } }
@keyframes logoBreath { 0%,100% { transform: translateZ(25px) scale(1); } 50% { transform: translateZ(25px) scale(1.035); } }

@media (max-width: 1100px) {
    .landing-wrap { padding: 14px; }
    .landing-frame { grid-template-columns: 1fr; min-height: auto; }
    .hero-panel { min-height: 820px; }
    .form-panel { border-left: 0; border-top: 1px solid var(--line-soft); }
    .form-panel::before { display: none; }
}

@media (max-width: 720px) {
    .landing-wrap { padding: 0; }
    .landing-frame { border-radius: 0; border-left: 0; border-right: 0; }
    .hero-panel { min-height: 700px; padding: 24px 20px 28px; grid-template-rows: auto minmax(230px,1fr) auto auto; gap: 28px; }
    .hero-panel::after { inset: 10px; border-radius: 18px; }
    .hero-header { align-items: flex-start; }
    .brand-icon-top { width: 40px; max-width: 40px; }
    .edition-tag { max-width: 100px; text-align: right; white-space: normal; line-height: 1.45; }
    .logo-stage { min-height: 220px; }
    .logo-orb { width: min(86vw, 345px); max-width: 345px; border-radius: 22px; }
    .logo-orb::before { border-radius: 16px; }
    .logo-orb-wordmark { width: min(90%, 285px); max-width: 285px; }
    .stage-copy { display: none; }
    .hero-copy { text-align: left; }
    .hero-copy h1 { font-size: clamp(3rem,14vw,4.5rem); }
    .hero-footer div { gap: 6px; }
    .hero-footer strong { font-size: .64rem; letter-spacing: .08em; }
    .form-panel { padding: 42px 20px 50px; }
    .two-col, .interest-grid { grid-template-columns: 1fr; }
}

@media (max-width: 440px) {
    .hero-panel { min-height: 660px; }
    .brand-icon-top { width: 36px; max-width: 36px; }
    .logo-stage { min-height: 200px; }
    .logo-orb { width: min(88vw, 305px); max-width: 305px; }
    .logo-orb-wordmark { width: min(89%, 245px); max-width: 245px; }
    .hero-header { gap: 10px; }
    .hero-copy h1 { font-size: 3rem; }
    .hero-footer span { display: none; }
    .interest-option span { justify-content: flex-start; text-align: left; padding-left: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
    [data-reveal] { opacity: 1; transform: none; }
}

/* Client revision: preferences first + compact dropdown experience */
.question-stack {
    margin-bottom: 26px;
    padding: 18px 18px 6px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.008));
}
.question-field { margin-bottom: 16px; }
.question-field + .question-field {
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.065);
}
.interest-fieldset.question-field { margin: 0 0 14px; }
.interest-fieldset.question-field .field-help { margin-bottom: 4px; }

.details-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    color: #747479;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .18em;
}
.details-divider::before,
.details-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: #28282c;
}

.multi-select { position: relative; }
.multi-select-trigger {
    width: 100%;
    min-height: 50px;
    padding: 0 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 0;
    border-bottom: 1px solid #343438;
    background: transparent;
    color: #f5f5f3;
    text-align: left;
    cursor: pointer;
    outline: none;
}
.multi-select-trigger:focus { border-color: #d0d0d2; }
.multi-select-value {
    display: block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.multi-select.is-open .custom-select-arrow { transform: rotate(180deg); color: #fff; }
.multi-select-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    z-index: 24;
    padding: 8px;
    display: grid;
    gap: 5px;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(18,18,20,.99), rgba(9,9,10,.99));
    box-shadow: 0 22px 55px rgba(0,0,0,.46);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
}
.multi-select.is-open .multi-select-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.multi-select-option {
    min-height: 46px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #d7d7da;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.multi-select-option:hover { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.07); color: #fff; }
.multi-select-option input { position: absolute; opacity: 0; pointer-events: none; }
.multi-select-option > span:first-of-type { flex: 1; font-size: .92rem; }
.multi-check {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    flex: 0 0 22px;
    border: 1px solid #3b3b40;
    border-radius: 50%;
    color: transparent;
    font-size: .72rem;
}
.multi-select-option.is-selected { background: #f3f3f1; color: #0a0a0a; font-weight: 800; }
.multi-select-option.is-selected .multi-check { border-color: #0a0a0a; background: #0a0a0a; color: #fff; }
.multi-select.is-invalid .multi-select-trigger { border-color: #ff9c9c; }

@media (max-width: 720px) {
    .question-stack {
        margin-left: -4px;
        margin-right: -4px;
        padding: 16px 14px 4px;
        border-radius: 18px;
    }
    .question-field + .question-field { padding-top: 12px; }
    .custom-select-trigger,
    .multi-select-trigger,
    .field input { min-height: 54px; font-size: 1rem; }
    .custom-select-menu,
    .multi-select-menu { max-height: min(46vh, 300px); border-radius: 16px; }
    .custom-select-option,
    .multi-select-option { min-height: 50px; }
    .detail-grid { gap: 0; }
}

@media (max-width: 440px) {
    .form-panel { padding-left: 16px; padding-right: 16px; }
    .question-stack { margin-left: 0; margin-right: 0; padding-left: 12px; padding-right: 12px; }
    .field label,
    .interest-fieldset legend { font-size: .66rem; line-height: 1.45; }
    .field-help { font-size: .76rem; }
    .multi-select-menu,
    .custom-select-menu { left: -4px; right: -4px; }
}


/* Mobile reliability + compact client form */
@media (max-width: 720px) {
    .question-stack {
        overflow: visible;
    }

    .multi-select,
    .custom-select {
        width: 100%;
        position: relative;
    }

    .multi-select-trigger,
    .custom-select-trigger {
        appearance: none;
        -webkit-appearance: none;
        width: 100%;
        border-radius: 0;
        background: transparent;
        color: #f5f5f3;
        font: inherit;
    }

    .multi-select-menu,
    .custom-select-menu {
        width: auto;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
    }

    .multi-select-option input {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        opacity: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
}

/* =========================================================
   NXTLVL CARD PALETTE — MINIMAL ACCENTS
   Neutral black/charcoal/white is dominant. Yellow and green
   are reserved for small interactive/status moments only.
   ========================================================= */
:root {
    --brand-yellow: #f7d72f;
    --brand-green: #8bc34a;
    --brand-black: #050505;
    --brand-charcoal: #0d0f10;
    --brand-white: #f7f7f3;
}

body { background: #050505; }
.site-preloader { background: var(--brand-black); }
.preloader-track span { background: #f2f2ef; }
.preloader-meta { color: #858589; }

.landing-frame {
    border-color: rgba(255,255,255,.10);
    background: #080909;
    box-shadow: 0 30px 100px rgba(0,0,0,.55);
}
.hero-panel {
    background:
        radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.07) 0, rgba(255,255,255,.018) 24%, transparent 48%),
        linear-gradient(145deg, #121313 0%, #070808 66%, #0c0d0d 100%);
}
.hero-panel::before {
    background-image:
        linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
}
.hero-panel::after { border-color: rgba(255,255,255,.055); }
.edition-tag, .eyebrow, .section-kicker { color: #929296; }
.hero-copy h1 span { color: #9a9a9e; }
.hero-lead { color: #c9c9c4; }
.hero-footer span { color: #747478; }
.hero-footer strong { color: var(--brand-white); }
.hero-footer, .hero-footer div + div { border-color: rgba(255,255,255,.07); }
.court-lines { border-color: rgba(255,255,255,.09); }
.court-lines::before, .court-lines::after { background: rgba(255,255,255,.07); }
.logo-halo { background: radial-gradient(circle, rgba(255,255,255,.07) 0, rgba(255,255,255,.015) 40%, transparent 68%); }
.logo-orb { border-color: rgba(255,255,255,.11); background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.01)); }
.logo-orb:hover { border-color: rgba(247,215,47,.28); }
.logo-orb::before { border-color: rgba(255,255,255,.05); }
.stage-copy { color: rgba(255,255,255,.28); }

.form-panel { background: #0d0f10; border-left-color: rgba(255,255,255,.07); }
.form-panel::before { background: linear-gradient(transparent, rgba(255,255,255,.16), transparent); }
.form-heading > p:last-child { color: #a7a7a2; }
.field label, .interest-fieldset legend { color: #d6d6d0; }
.field label span, .interest-fieldset legend span { color: #8f8f93; }
.field-help { color: #85857f; }
.field input, .custom-select-trigger, .multi-select-trigger { border-bottom-color: rgba(255,255,255,.17); color: var(--brand-white); }
.field input::placeholder { color: #777770; }
.field input:focus, .custom-select-trigger:focus, .multi-select-trigger:focus { border-color: rgba(247,215,47,.65); }
.custom-select-arrow { color: #a0a0a4; }
.custom-select.is-open .custom-select-arrow, .multi-select.is-open .custom-select-arrow { color: var(--brand-yellow); }
.question-stack { border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.008); }
.question-field + .question-field { border-color: rgba(255,255,255,.065); }
.custom-select-menu, .multi-select-menu { border-color: rgba(255,255,255,.13); background: linear-gradient(180deg, rgba(20,22,22,.995), rgba(8,9,9,.995)); box-shadow: 0 22px 55px rgba(0,0,0,.52); }
.custom-select-option, .multi-select-option { color: #ddddda; }
.custom-select-option:hover, .custom-select-option:focus, .multi-select-option:hover { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.08); color: #fff; }
.custom-select-option.is-selected, .multi-select-option.is-selected { background: rgba(255,255,255,.09); color: #fff; }
.multi-check { border-color: rgba(255,255,255,.25); }
.multi-select-option.is-selected .multi-check { border-color: var(--brand-yellow); background: var(--brand-yellow); color: #080909; }
.consent-row { color: #9c9c96; }
.consent-row input { accent-color: var(--brand-green); }
.primary-button { background: #f3f3f0; color: #080909; box-shadow: 0 12px 36px rgba(0,0,0,.24); }
.primary-button:hover { background: #fff; box-shadow: 0 14px 42px rgba(0,0,0,.30); }
.button-arrow { background: #0a0a0b; color: var(--brand-yellow); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.required-note { color: #74746e; }
.custom-select.is-invalid .custom-select-trigger, .multi-select.is-invalid .multi-select-trigger { border-color: #ff8d8d; }
.success-card { background: #f3f3f0; color: #080909; }
.success-icon { background: #080909; color: var(--brand-green); }
.success-card .secondary-button { background: #080909; color: #f3f3f0; }
@media (max-width: 900px) { .form-panel { border-top-color: rgba(255,255,255,.07); } }


/* NXTLVL CARD ACCENT PASS — white/black remain dominant */
:root {
    --nxt-green: #75f23b;
    --nxt-green-soft: rgba(117, 242, 59, .14);
    --nxt-yellow: #f4df21;
    --nxt-yellow-soft: rgba(244, 223, 33, .14);
}

.edition-tag,
.eyebrow,
.section-kicker {
    color: var(--nxt-green);
    text-shadow: 0 0 18px rgba(117,242,59,.12);
}

.hero-copy h1 span {
    color: var(--nxt-green);
    text-shadow: 0 0 28px rgba(117,242,59,.10);
}

.hero-footer strong { color: var(--white); }
.hero-footer div:hover strong { color: var(--nxt-green); }
.hero-footer span { color: rgba(117,242,59,.58); }

.field input:focus,
.custom-select-trigger:focus,
.multi-select-trigger:focus {
    border-color: rgba(117,242,59,.75) !important;
    box-shadow: 0 1px 0 rgba(117,242,59,.20);
}

.custom-select.is-open .custom-select-arrow,
.multi-select.is-open .custom-select-arrow {
    color: var(--nxt-green) !important;
}

.custom-select-option.is-selected,
.multi-select-option.is-selected {
    background: rgba(255,255,255,.96) !important;
    color: #09090a !important;
    border-color: rgba(117,242,59,.34) !important;
}

.multi-select-option.is-selected .multi-check {
    color: #2c9e18 !important;
}

.consent-row input { accent-color: var(--nxt-green); }

.primary-button {
    background: #f5f5f2;
    color: #080809;
}
.primary-button:hover {
    background: #fff;
    box-shadow: 0 12px 42px rgba(117,242,59,.08), 0 12px 38px rgba(255,255,255,.08);
}
.button-arrow {
    background: #0a0a0b;
    color: var(--nxt-green);
    box-shadow: inset 0 0 0 1px rgba(117,242,59,.16);
}

/* Subtle animated pickleball — yellow is intentionally isolated here */
.pickleball-motion {
    position: absolute;
    z-index: 4;
    left: 7%;
    bottom: 8%;
    width: 132px;
    height: 172px;
    pointer-events: none;
    opacity: .94;
}
.pickleball-ball {
    position: absolute;
    left: 50%;
    top: 8px;
    width: 48px;
    height: 48px;
    margin-left: -24px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 28%, #fff76c 0 5%, transparent 6%),
        radial-gradient(circle at 38% 30%, #fff451 0, #f4df21 34%, #cab913 72%, #9d9011 100%);
    box-shadow: 0 0 18px rgba(244,223,33,.32), 0 8px 18px rgba(0,0,0,.35);
    animation: nxtBallBounce 2.6s cubic-bezier(.4,0,.2,1) infinite;
}
.pickleball-ball i {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(73,68,6,.72);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.35);
}
.pickleball-ball i:nth-child(1){left:12px;top:10px}
.pickleball-ball i:nth-child(2){right:10px;top:12px}
.pickleball-ball i:nth-child(3){left:7px;top:25px}
.pickleball-ball i:nth-child(4){right:8px;top:29px}
.pickleball-ball i:nth-child(5){left:22px;bottom:7px}
.pickleball-ball i:nth-child(6){left:22px;top:19px}
.pickleball-trail {
    position: absolute;
    left: 50%;
    bottom: 26px;
    width: 3px;
    height: 98px;
    margin-left: -1.5px;
    border-radius: 999px;
    background: linear-gradient(to top, rgba(117,242,59,.02), rgba(117,242,59,.35), rgba(244,223,33,.04));
    filter: blur(2px);
    transform-origin: bottom;
    animation: nxtTrailPulse 2.6s ease-in-out infinite;
}
.pickleball-shadow {
    position: absolute;
    left: 50%;
    bottom: 12px;
    width: 42px;
    height: 7px;
    margin-left: -21px;
    border-radius: 50%;
    border: 1px solid rgba(117,242,59,.46);
    box-shadow: 0 0 16px rgba(117,242,59,.18);
    animation: nxtShadowPulse 2.6s ease-in-out infinite;
}

@keyframes nxtBallBounce {
    0%,100% { transform: translate3d(0, 98px, 0) scale(.96); }
    47% { transform: translate3d(12px, 2px, 0) scale(1); }
    54% { transform: translate3d(13px, 0, 0) scale(1); }
}
@keyframes nxtTrailPulse {
    0%,100% { opacity: .08; transform: scaleY(.2); }
    45%,55% { opacity: .7; transform: scaleY(1); }
}
@keyframes nxtShadowPulse {
    0%,100% { opacity: .85; transform: scaleX(1.12); }
    48%,54% { opacity: .22; transform: scaleX(.58); }
}

@media (max-width: 980px) {
    .pickleball-motion {
        left: auto;
        right: 4%;
        bottom: 5%;
        transform: scale(.82);
        transform-origin: bottom right;
    }
}

@media (max-width: 620px) {
    .pickleball-motion {
        right: 1%;
        bottom: 3%;
        transform: scale(.68);
        opacity: .86;
    }
    .hero-copy h1 span { text-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pickleball-ball,
    .pickleball-trail,
    .pickleball-shadow { animation: none !important; }
    .pickleball-ball { transform: translateY(58px); }
}


/* GET IN EARLY heading — bright brand green, still balanced against the monochrome UI */
.get-in-early-title {
    color: var(--nxt-green) !important;
    text-shadow: 0 0 24px rgba(117, 242, 59, .12);
}


/* =========================================================
   NXTLVL ADMIN THEME SYNC — aligned with the public landing
   Monochrome first, controlled electric-green accents.
   ========================================================= */
.admin-body {
    --admin-green: var(--nxt-green, #75f23b);
    --admin-green-soft: rgba(117,242,59,.10);
    --admin-green-line: rgba(117,242,59,.24);
    background:
        radial-gradient(circle at var(--admin-mx) var(--admin-my), rgba(117,242,59,.045), transparent 22rem),
        radial-gradient(circle at 12% 18%, rgba(255,255,255,.032), transparent 25rem),
        linear-gradient(180deg, #090a0a 0%, #050505 100%);
}
.admin-body::before { opacity: .18; }
.admin-topbar { border-bottom-color: rgba(255,255,255,.075); }
.admin-brand-icon-wrap {
    border-color: rgba(117,242,59,.14);
    box-shadow: inset 0 0 22px rgba(117,242,59,.025);
}
.admin-brand-copy strong { color: #f5f5f2; }
.admin-brand-copy small { color: rgba(117,242,59,.62); }
.admin-nav a:hover,
.admin-nav a.active {
    background: #f3f3ef;
    color: #090a09;
}
.admin-nav a.active { box-shadow: inset 0 -2px 0 var(--admin-green); }
.admin-heading-meta,
.admin-card-kicker,
.admin-kicker { color: rgba(117,242,59,.72); }
.admin-live-dot,
.admin-security-chip span {
    background: var(--admin-green);
    box-shadow: 0 0 0 5px rgba(117,242,59,.07), 0 0 18px rgba(117,242,59,.20);
}
.admin-hero-row {
    border-color: rgba(255,255,255,.085);
    background:
        radial-gradient(circle at 88% 22%, rgba(117,242,59,.045), transparent 22rem),
        linear-gradient(135deg, #111313 0%, #0b0c0c 62%, #080909 100%);
}
.admin-page-heading h1 { color: #f5f5f2; }
.admin-page-heading p { color: #92928d; }
.admin-button.primary {
    border-color: #f4f4f0;
    background: #f4f4f0;
    color: #090a09;
}
.admin-button.primary:hover {
    border-color: #fff;
    background: #fff;
    box-shadow: 0 8px 24px rgba(117,242,59,.08);
}
.admin-button.primary span { color: var(--admin-green); }
.stat-card,
.admin-card,
.login-card {
    background: linear-gradient(155deg,#101212,#0a0b0b);
    border-color: rgba(255,255,255,.08);
}
.stat-card-featured {
    background: #f2f2ee;
    color: #090a09;
    border-color: #f2f2ee;
}
.stat-card-featured::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 22px;
    width: 36px;
    height: 2px;
    border-radius: 999px;
    background: var(--admin-green);
}
.stat-card:not(.stat-card-featured):hover,
.admin-card:hover { border-color: rgba(117,242,59,.14); }
.stat-arrow { transition: .18s ease; }
.stat-card:hover .stat-arrow { color: var(--admin-green); border-color: var(--admin-green-line); }
.stat-card-featured:hover .stat-arrow { color: #248f12; }
.admin-card-link:hover { color: var(--admin-green); }
.admin-table { table-layout: auto; }
.admin-table th,
.admin-table td { vertical-align: middle; }
.admin-table th { color: #777872; background: rgba(255,255,255,.015); }
.admin-table tbody tr:hover { background: rgba(117,242,59,.025); }
.admin-person-avatar {
    background: #f0f0ec;
    color: #0a0b0a;
    box-shadow: inset 0 -2px 0 rgba(117,242,59,.65);
}
.admin-level-pill {
    border-color: rgba(117,242,59,.15);
    background: rgba(117,242,59,.035);
    color: #d1d1cb;
}
.tag {
    background: rgba(255,255,255,.055);
    color: #bbbbB5;
    border: 1px solid rgba(255,255,255,.035);
}
.tag-more {
    background: var(--admin-green-soft);
    color: #a8ff80;
    border-color: rgba(117,242,59,.14);
}
.search-bar { align-items: center; }
.search-bar input {
    border-color: rgba(255,255,255,.11);
    background: #090a0a;
}
.search-bar input:focus {
    border-color: rgba(117,242,59,.48);
    box-shadow: 0 0 0 4px rgba(117,242,59,.045);
}
.pagination a:hover {
    color: var(--admin-green);
    border-color: rgba(117,242,59,.25);
}
.pagination span.current {
    background: #f4f4f0;
    color: #090a09;
    border-color: #f4f4f0;
    box-shadow: inset 0 -2px 0 var(--admin-green);
}
.notice {
    background: rgba(117,242,59,.07);
    color: #dce8d7;
    border-color: rgba(117,242,59,.18);
}
.admin-login-panel { border-color: rgba(255,255,255,.09); }
.admin-login-brand {
    background:
        radial-gradient(circle at 58% 38%, rgba(117,242,59,.055) 0%, #151717 25%, #0a0b0b 66%);
}
.admin-login-mark-card {
    border-color: rgba(117,242,59,.12);
    box-shadow: 0 28px 55px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06), 0 0 55px rgba(117,242,59,.035);
}
.admin-login-ring { border-color: rgba(117,242,59,.075); }
.admin-login-features span { border-color: rgba(117,242,59,.10); }
.admin-login-form-side { background: linear-gradient(180deg,#111313,#0c0d0d); }
.admin-field input:focus,
.login-card .field input:focus {
    border-color: rgba(117,242,59,.48);
    box-shadow: 0 0 0 4px rgba(117,242,59,.04);
}
.admin-login-submit {
    background: #f2f2ee;
    color: #090a09;
}
.admin-login-submit > span:last-child { color: var(--admin-green); }
.admin-login-submit:hover { background: #fff; box-shadow: 0 12px 36px rgba(117,242,59,.07); }
.danger-button {
    border-color: rgba(255,92,92,.28);
    background: rgba(94,28,28,.30);
    color: #ffbcbc;
}
.danger-button:hover { background: rgba(118,34,34,.42); }

@media (max-width: 800px) {
    .admin-topbar { gap: 12px; }
    .admin-nav { gap: 4px; scrollbar-width: none; }
    .admin-nav::-webkit-scrollbar { display: none; }
    .admin-main > .admin-page-heading { gap: 18px; }
    .admin-main > .admin-page-heading .admin-button { width: 100%; }
    .admin-card-header { align-items: stretch; }
    .search-bar { width: 100%; }
    .search-bar .admin-button { width: 100%; }
    .admin-table th,
    .admin-table td { padding: 13px 14px; }
}

@media (max-width: 620px) {
    .admin-main { width: min(100% - 20px,1420px); }
    .admin-topbar { padding-inline: 12px; }
    .admin-brand-icon-wrap { width: 36px; height: 36px; border-radius: 10px; }
    .admin-page-heading h1 { font-size: clamp(2.45rem,13vw,3.6rem); }
    .admin-actions { flex-direction: column; }
    .admin-actions .admin-button { width: 100%; }
    .admin-card-header { padding: 16px; }
    .stats-grid { gap: 10px; }
    .stat-card { border-radius: 18px; }
    .pagination { justify-content: center; }
}

/* =========================================================
   CLIENT COLOR ADJUSTMENTS — 2026-08-26
   Hero headline and form title remain monochrome; green is
   reserved for the supporting line, yellow for the main CTA.
   ========================================================= */
.hero-copy h1,
.hero-copy h1 span {
    color: #f5f5f2 !important;
    text-shadow: none !important;
}

.hero-lead {
    color: var(--nxt-green) !important;
    text-shadow: 0 0 18px rgba(117, 242, 59, .10);
}

.get-in-early-title {
    color: #f5f5f2 !important;
    text-shadow: none !important;
}

.primary-button {
    background: var(--nxt-yellow) !important;
    color: #080809 !important;
    box-shadow: 0 12px 34px rgba(244, 223, 33, .10);
}

.primary-button:hover {
    background: #ffeb2f !important;
    box-shadow: 0 14px 40px rgba(244, 223, 33, .14);
}

.primary-button .button-arrow {
    background: #0a0a0b !important;
    color: var(--nxt-yellow) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
}

/* Client adjustment: JOIN NXTLVL green button + white arrow */
.primary-button {
    background: var(--nxt-green) !important;
    color: #080809 !important;
    box-shadow: 0 12px 34px rgba(117, 242, 59, .12);
}

.primary-button:hover {
    background: #82f64d !important;
    box-shadow: 0 14px 40px rgba(117, 242, 59, .17);
}

.primary-button .button-arrow {
    background: #0a0a0b !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

/* Client adjustment: JOIN NXTLVL back to white, arrow stays refined green */
:root {
    --nxt-green-cool: #63e64a;
    --nxt-green-cool-hover: #70ef58;
}

.primary-button {
    background: #f5f5f2 !important;
    color: #080809 !important;
    box-shadow: 0 12px 34px rgba(255, 255, 255, .07) !important;
}

.primary-button:hover {
    background: #ffffff !important;
    box-shadow:
        0 14px 40px rgba(255, 255, 255, .10),
        0 0 0 1px rgba(99, 230, 74, .08) !important;
}

.primary-button .button-arrow {
    background: #0a0a0b !important;
    color: var(--nxt-green-cool) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .10),
        0 0 14px rgba(99, 230, 74, .08) !important;
}

.primary-button:hover .button-arrow {
    color: var(--nxt-green-cool-hover) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .12),
        0 0 16px rgba(99, 230, 74, .10) !important;
}

/* Interactive pickleball paddle — desktop pointer enhancement only */
.pickleball-motion {
    overflow: visible;
}

.pickleball-paddle {
    --paddle-x: 78px;
    --paddle-y: 116px;
    --paddle-rotate: -18deg;
    position: absolute;
    z-index: 8;
    left: 0;
    top: 0;
    width: 62px;
    height: 92px;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(var(--paddle-x), var(--paddle-y), 0) rotate(var(--paddle-rotate));
    transform-origin: 50% 62%;
    transition: opacity .2s ease;
    filter: drop-shadow(0 12px 18px rgba(0,0,0,.32));
    will-change: transform;
}

.pickleball-motion.is-playable .pickleball-paddle {
    opacity: .96;
}

.pickleball-paddle-face {
    position: absolute;
    left: 8px;
    top: 0;
    width: 46px;
    height: 58px;
    border-radius: 18px 18px 15px 15px;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,.09), transparent 34%),
        linear-gradient(150deg, #17191a 0%, #090a0a 72%);
    border: 1px solid rgba(99,230,74,.42);
    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.025),
        0 0 18px rgba(99,230,74,.08);
}

.pickleball-paddle-face::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 13px;
}

.pickleball-paddle-face::after {
    content: "N";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #f5f5f2;
    font-size: 1rem;
    font-weight: 950;
    font-style: italic;
    letter-spacing: -.08em;
}

.pickleball-paddle-handle {
    position: absolute;
    left: 26px;
    top: 53px;
    width: 11px;
    height: 37px;
    border-radius: 5px 5px 8px 8px;
    background: linear-gradient(90deg, #111, #343634 45%, #111);
    border: 1px solid rgba(255,255,255,.07);
}

.pickleball-paddle-handle::after {
    content: "";
    position: absolute;
    left: -2px;
    right: -2px;
    bottom: 2px;
    height: 15px;
    border-radius: 4px 4px 7px 7px;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,.12) 0 1px,
            rgba(0,0,0,.12) 1px 4px
        ),
        #1b1d1c;
}

.pickleball-motion.is-caught .pickleball-ball {
    animation: none !important;
    transform: translate3d(var(--caught-x, 0px), var(--caught-y, 0px), 0) scale(.98);
    transition: transform .08s linear;
}

.pickleball-motion.is-caught .pickleball-trail {
    opacity: .08 !important;
}

.pickleball-motion.is-caught .pickleball-shadow {
    opacity: .22 !important;
}

@media (hover: hover) and (pointer: fine) {
    .pickleball-motion {
        width: 180px;
        height: 190px;
    }
}

@media (hover: none), (pointer: coarse) {
    .pickleball-paddle {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pickleball-paddle {
        display: none !important;
    }
}

/* NXTLVL rectangular logo hero: mouse-controlled paddle + rebound ball */
.pickleball-arena {
    position: relative;
    overflow: hidden !important;
    isolation: isolate;
    cursor: crosshair;
    transform: none !important;
}

.pickleball-arena .logo-orb-wordmark {
    position: relative;
    z-index: 2;
    pointer-events: none;
    transition: opacity .18s ease;
}

.pickleball-arena.has-pointer .logo-orb-wordmark {
    opacity: .72;
}

.arena-ball {
    position: absolute;
    z-index: 6;
    left: 0;
    top: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(circle at 31% 24%, rgba(255,255,205,.98) 0 4%, transparent 5%),
        radial-gradient(circle at 36% 29%, #fff45a 0, #f4df21 37%, #c7b510 74%, #96890c 100%);
    box-shadow: 0 0 16px rgba(244,223,33,.24), 0 8px 18px rgba(0,0,0,.34);
    will-change: transform;
}

.arena-ball i {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(65,59,4,.74);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.35);
}
.arena-ball i:nth-child(1){left:10px;top:9px}
.arena-ball i:nth-child(2){right:9px;top:11px}
.arena-ball i:nth-child(3){left:6px;top:23px}
.arena-ball i:nth-child(4){right:7px;top:26px}
.arena-ball i:nth-child(5){left:20px;bottom:6px}
.arena-ball i:nth-child(6){left:20px;top:18px}

.arena-paddle {
    position: absolute;
    z-index: 8;
    left: 0;
    top: 0;
    width: 54px;
    height: 78px;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(0,0,0);
    transform-origin: 50% 42%;
    transition: opacity .12s ease;
    will-change: transform;
    filter: drop-shadow(0 9px 14px rgba(0,0,0,.34));
}

.pickleball-arena.has-pointer .arena-paddle {
    opacity: 1;
}

.arena-paddle-face {
    position: absolute;
    left: 5px;
    top: 2px;
    width: 44px;
    height: 54px;
    border-radius: 15px 15px 13px 13px;
    background: linear-gradient(145deg, rgba(255,255,255,.05), transparent 42%), #0b0d0c;
    border: 1px solid rgba(99,230,74,.58);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.02), 0 0 13px rgba(99,230,74,.07);
}

.arena-paddle-face::before {
    content: "N";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #f6f6f2;
    font-size: .92rem;
    font-weight: 950;
    font-style: italic;
    letter-spacing: -.08em;
}

.arena-paddle-handle {
    position: absolute;
    left: 22px;
    top: 51px;
    width: 10px;
    height: 25px;
    border-radius: 4px 4px 7px 7px;
    background:
        repeating-linear-gradient(to bottom, rgba(255,255,255,.12) 0 1px, rgba(0,0,0,.1) 1px 4px),
        #1c1e1d;
    border: 1px solid rgba(255,255,255,.07);
}

.pickleball-arena.just-hit .arena-paddle-face {
    border-color: rgba(99,230,74,.95);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.025), 0 0 20px rgba(99,230,74,.18);
}

.pickleball-arena.just-hit .arena-ball {
    box-shadow: 0 0 23px rgba(244,223,33,.38), 0 8px 18px rgba(0,0,0,.34);
}

@media (hover: none), (pointer: coarse) {
    .pickleball-arena {
        cursor: default;
    }

    .arena-paddle {
        display: none !important;
    }

    .arena-ball {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .arena-paddle,
    .arena-ball {
        display: none !important;
    }
}

/* Client revision: interactive court spans the whole NXTLVL hero stage.
   Paddle + ball sit BEHIND the logo card so the brand mark stays uninterrupted. */
.logo-stage {
    position: relative;
    isolation: isolate;
    cursor: crosshair;
}

.stage-playfield {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: auto;
}

.court-lines,
.logo-halo {
    z-index: 0;
}

.logo-orb-primary {
    position: relative;
    z-index: 5 !important;
    pointer-events: none;
}

.stage-playfield .arena-ball {
    z-index: 2;
}

.stage-playfield .arena-paddle {
    z-index: 3;
}

.stage-playfield.has-pointer .arena-paddle {
    opacity: 1;
}

.stage-playfield.just-hit .arena-paddle-face {
    border-color: rgba(99,230,74,.95);
    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.025),
        0 0 20px rgba(99,230,74,.18);
}

.stage-playfield.just-hit .arena-ball {
    box-shadow:
        0 0 23px rgba(244,223,33,.38),
        0 8px 18px rgba(0,0,0,.34);
}

/* Override the previous rectangle-only arena behavior. */
.pickleball-arena {
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    .stage-playfield .arena-paddle,
    .stage-playfield .arena-ball {
        display: none !important;
    }
}

/* Mobile + tablet touch interaction for the full hero playfield */
.stage-playfield {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

@media (hover: none), (pointer: coarse) {
    .logo-stage {
        cursor: default;
    }

    .stage-playfield .arena-ball {
        display: block !important;
    }

    .stage-playfield .arena-paddle {
        display: block !important;
        opacity: .82;
    }

    .stage-playfield.has-pointer .arena-paddle {
        opacity: 1;
    }

    .arena-paddle {
        transform-origin: 50% 42%;
    }

    .arena-paddle-face {
        border-color: rgba(99,230,74,.62);
        box-shadow:
            inset 0 0 0 2px rgba(255,255,255,.02),
            0 0 12px rgba(99,230,74,.08);
    }

    .arena-ball {
        box-shadow:
            0 0 14px rgba(244,223,33,.22),
            0 7px 15px rgba(0,0,0,.30);
    }
}

@media (max-width: 620px) {
    .arena-ball {
        width: 38px;
        height: 38px;
    }

    .arena-ball i {
        width: 4px;
        height: 4px;
    }

    .arena-paddle {
        width: 48px;
        height: 70px;
    }

    .arena-paddle-face {
        left: 4px;
        width: 40px;
        height: 49px;
        border-radius: 14px 14px 12px 12px;
    }

    .arena-paddle-handle {
        left: 20px;
        top: 47px;
        width: 9px;
        height: 22px;
    }
}

/* Keep motion visible on touch devices; only fully disable for reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .stage-playfield .arena-paddle,
    .stage-playfield .arena-ball {
        display: none !important;
    }
}


/* =========================================================
   Moving signup ball trail — inspired by the NXTLVL card.
   Trail follows the actual ball direction and remains subtle
   behind the logo/card so it does not overpower the branding.
   ========================================================= */
.stage-playfield .arena-ball {
    --ball-angle: 0deg;
    --ball-speed: .7;
    overflow: visible;
}

.stage-playfield .arena-ball::before,
.stage-playfield .arena-ball::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    pointer-events: none;
    transform-origin: 0 50%;
    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle) + 180deg));
}

.stage-playfield .arena-ball::before {
    width: calc(48px + (var(--ball-speed) * 42px));
    height: 15px;
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            rgba(244,223,33,.48) 0%,
            rgba(117,242,59,.28) 36%,
            rgba(117,242,59,.08) 70%,
            rgba(117,242,59,0) 100%
        );
    filter: blur(5px);
    opacity: .82;
}

.stage-playfield .arena-ball::after {
    width: calc(32px + (var(--ball-speed) * 28px));
    height: 4px;
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            rgba(255,240,71,.78),
            rgba(99,230,74,.34) 54%,
            rgba(99,230,74,0)
        );
    filter: blur(.6px);
    opacity: .9;
}

@media (max-width: 620px) {
    .stage-playfield .arena-ball::before {
        height: 11px;
        width: calc(38px + (var(--ball-speed) * 30px));
    }

    .stage-playfield .arena-ball::after {
        width: calc(26px + (var(--ball-speed) * 22px));
    }
}


/* =========================================================
   Early-access success screen: pickleball + mock score
   ========================================================= */
.success-shell {
    padding: clamp(18px, 4vw, 44px);
}

.success-card {
    width: min(780px, 100%);
    padding: clamp(30px, 6vw, 68px);
}

.success-pickleball-wrap {
    position: relative;
    width: 94px;
    height: 70px;
    margin: 2px auto 26px;
    display: grid;
    place-items: center;
}

.success-pickleball-wrap::before {
    content: "";
    position: absolute;
    left: -42px;
    top: 32px;
    width: 76px;
    height: 13px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        rgba(99,230,74,0),
        rgba(99,230,74,.28) 54%,
        rgba(244,223,33,.5)
    );
    filter: blur(4px);
    transform: rotate(-8deg);
}

.success-pickleball {
    position: relative;
    z-index: 2;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 24%, rgba(255,255,205,.96) 0 4%, transparent 5%),
        radial-gradient(circle at 36% 29%, #fff45a 0, #f4df21 38%, #c7b510 75%, #978a0c 100%);
    box-shadow:
        0 0 22px rgba(244,223,33,.24),
        0 10px 20px rgba(0,0,0,.12);
    animation: successBallFloat 2.8s ease-in-out infinite;
}

.success-pickleball i {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(65,59,4,.74);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.28);
}
.success-pickleball i:nth-child(1){left:14px;top:12px}
.success-pickleball i:nth-child(2){right:12px;top:15px}
.success-pickleball i:nth-child(3){left:9px;top:32px}
.success-pickleball i:nth-child(4){right:10px;top:35px}
.success-pickleball i:nth-child(5){left:28px;bottom:9px}
.success-pickleball i:nth-child(6){left:29px;top:26px}

.mock-score-card {
    width: min(590px, 100%);
    margin: 32px auto 28px;
    padding: clamp(22px, 4vw, 30px);
    border-radius: 22px;
    background:
        radial-gradient(circle at 85% 5%, rgba(117,242,59,.06), transparent 32%),
        linear-gradient(150deg, #111313, #080909);
    color: #f7f7f3;
    border: 1px solid rgba(117,242,59,.24);
    box-shadow: 0 18px 40px rgba(0,0,0,.15);
}

.mock-score-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
    color: #63e64a;
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.mock-score-top::before,
.mock-score-top::after {
    content: "";
    width: 54px;
    height: 1px;
    background: rgba(99,230,74,.34);
}

.mock-score-rules {
    margin: 0 0 20px;
    color: #a9aaa5;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.mock-score-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.mock-score-cell {
    min-height: 114px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.025);
    overflow: hidden;
}

.mock-score-cell strong {
    color: #b7f337;
    font-size: clamp(3rem, 9vw, 5rem);
    line-height: .82;
    letter-spacing: -.08em;
}

.mock-score-labels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
    color: #858782;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.mock-score-note {
    margin: 20px 0 0;
    color: #d2d3ce;
    font-size: .82rem;
    line-height: 1.55;
}

.mock-score-note strong {
    color: #63e64a;
}

.success-card .secondary-button {
    min-height: 52px;
    padding: 0 24px;
    margin-top: 2px;
}

@keyframes successBallFloat {
    0%, 100% { transform: translateY(2px) rotate(-4deg); }
    50% { transform: translateY(-7px) rotate(5deg); }
}

@media (max-width: 520px) {
    .mock-score-card {
        margin-top: 26px;
        border-radius: 18px;
        padding: 20px 16px;
    }

    .mock-score-cell {
        min-height: 92px;
        border-radius: 13px;
    }

    .mock-score-cell strong {
        font-size: 3.25rem;
    }

    .mock-score-top::before,
    .mock-score-top::after {
        width: 28px;
    }
}

/* =========================================================
   Refined NXTLVL card-style motion tail
   Broad tapered ribbons, yellow near the ball, green fade-out.
   ========================================================= */
.stage-playfield .arena-ball {
    overflow: visible;
    isolation: isolate;
}

.stage-playfield .arena-ball::before,
.stage-playfield .arena-ball::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    pointer-events: none;
    z-index: -1;
    transform-origin: 0 50%;
    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle) + 180deg));
    border-radius: 999px 16px 16px 999px;
}

/* Main wide ribbon */
.stage-playfield .arena-ball::before {
    width: calc(72px + (var(--ball-speed) * 68px));
    height: calc(24px + (var(--ball-speed) * 8px));
    background:
        linear-gradient(
            90deg,
            rgba(255, 229, 36, .82) 0%,
            rgba(210, 233, 48, .65) 18%,
            rgba(117, 242, 59, .38) 48%,
            rgba(117, 242, 59, .16) 72%,
            rgba(117, 242, 59, 0) 100%
        );
    clip-path: polygon(0 32%, 100% 0, 88% 48%, 100% 100%, 0 68%);
    filter: blur(2.2px);
    opacity: .82;
}

/* Crisp inner streak */
.stage-playfield .arena-ball::after {
    width: calc(56px + (var(--ball-speed) * 50px));
    height: 8px;
    background:
        linear-gradient(
            90deg,
            rgba(255, 241, 88, .98) 0%,
            rgba(244, 223, 33, .86) 20%,
            rgba(117, 242, 59, .52) 58%,
            rgba(117, 242, 59, 0) 100%
        );
    clip-path: polygon(0 18%, 100% 0, 86% 50%, 100% 100%, 0 82%);
    filter: blur(.25px);
    opacity: .92;
}

/* Add a second soft ribbon using the ball shadow itself */
.stage-playfield .arena-ball {
    box-shadow:
        0 0 13px rgba(244,223,33,.28),
        0 8px 18px rgba(0,0,0,.34),
        -10px 4px 18px rgba(117,242,59,.09);
}

@media (max-width: 620px) {
    .stage-playfield .arena-ball::before {
        width: calc(56px + (var(--ball-speed) * 48px));
        height: calc(18px + (var(--ball-speed) * 6px));
        filter: blur(1.8px);
    }

    .stage-playfield .arena-ball::after {
        width: calc(42px + (var(--ball-speed) * 36px));
        height: 6px;
    }
}

/* =========================================================
   FINAL BALL TAIL — pure bright yellow, tapered speed cone
   Matches the supplied reference: bright core + soft yellow glow.
   No green in the motion trail.
   ========================================================= */
.stage-playfield .arena-ball {
    --ball-angle: 0deg;
    --ball-speed: .8;
    overflow: visible;
    isolation: isolate;
}

.stage-playfield .arena-ball::before,
.stage-playfield .arena-ball::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    pointer-events: none;
    transform-origin: 0 50%;
    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle) + 180deg));
}

/* Wide luminous cone */
.stage-playfield .arena-ball::before {
    width: calc(95px + (var(--ball-speed) * 78px));
    height: calc(34px + (var(--ball-speed) * 10px));
    clip-path: polygon(0 34%, 100% 0, 100% 100%, 0 66%);
    background:
        linear-gradient(
            90deg,
            rgba(255, 245, 91, .96) 0%,
            rgba(255, 224, 20, .86) 22%,
            rgba(255, 206, 0, .58) 50%,
            rgba(255, 191, 0, .22) 76%,
            rgba(255, 191, 0, 0) 100%
        );
    filter: blur(5px);
    opacity: .92;
}

/* Narrow, bright central streak */
.stage-playfield .arena-ball::after {
    width: calc(76px + (var(--ball-speed) * 60px));
    height: 10px;
    clip-path: polygon(0 28%, 100% 0, 100% 100%, 0 72%);
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 190, 1) 0%,
            rgba(255, 242, 78, .98) 20%,
            rgba(255, 221, 20, .90) 46%,
            rgba(255, 200, 0, .46) 72%,
            rgba(255, 194, 0, 0) 100%
        );
    filter: blur(.45px);
    opacity: .98;
}

.stage-playfield .arena-ball {
    box-shadow:
        0 0 11px rgba(255, 236, 75, .86),
        0 0 26px rgba(255, 214, 18, .56),
        0 0 44px rgba(255, 196, 0, .24),
        0 8px 18px rgba(0,0,0,.30) !important;
}

@media (max-width: 620px) {
    .stage-playfield .arena-ball::before {
        width: calc(70px + (var(--ball-speed) * 52px));
        height: calc(25px + (var(--ball-speed) * 8px));
        filter: blur(4px);
    }

    .stage-playfield .arena-ball::after {
        width: calc(55px + (var(--ball-speed) * 42px));
        height: 8px;
    }
}

/* =========================================================
   FINAL SUCCESS / SCOREBOARD THEME
   Sporty completion treatment: court-line sweep + impact rings
   instead of generic confetti.
   ========================================================= */
.success-card {
    position: relative;
    overflow: hidden;
}

.success-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .34;
    background-image:
        linear-gradient(rgba(0,0,0,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 82%, transparent 100%);
}

.success-card > * {
    position: relative;
    z-index: 2;
}

/* Sporty "final whistle" court sweep */
.success-victory-lines {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.success-victory-lines::before,
.success-victory-lines::after {
    content: "";
    position: absolute;
    left: -35%;
    width: 170%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(99,230,74,0) 14%,
        rgba(99,230,74,.52) 44%,
        rgba(244,223,33,.76) 50%,
        rgba(99,230,74,.52) 56%,
        rgba(99,230,74,0) 86%,
        transparent 100%
    );
    filter: drop-shadow(0 0 8px rgba(117,242,59,.18));
    transform: translateX(-35%) rotate(-3deg);
    animation: victoryCourtSweep 1.35s cubic-bezier(.2,.8,.2,1) .15s both;
}

.success-victory-lines::before { top: 31%; }
.success-victory-lines::after {
    top: 73%;
    animation-delay: .32s;
    transform: translateX(-35%) rotate(3deg);
}

/* Impact rings behind the success pickleball */
.success-pickleball-wrap::after {
    content: "";
    position: absolute;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 2px solid rgba(99,230,74,.42);
    box-shadow:
        0 0 0 12px rgba(99,230,74,.07),
        0 0 0 24px rgba(244,223,33,.04);
    animation: victoryImpact 1.1s ease-out .48s both;
}

.success-pickleball-wrap::before {
    background: linear-gradient(
        90deg,
        rgba(255,205,0,0),
        rgba(255,211,0,.34) 48%,
        rgba(255,231,49,.74)
    ) !important;
}

/* Scoreboard */
.mock-score-card {
    position: relative;
    isolation: isolate;
    border: 1px solid rgba(99,230,74,.22);
    background:
        radial-gradient(circle at 78% 5%, rgba(117,242,59,.07), transparent 30%),
        linear-gradient(145deg, #101312 0%, #070909 70%);
    box-shadow:
        0 24px 48px rgba(0,0,0,.17),
        inset 0 1px 0 rgba(255,255,255,.025);
}

.mock-score-card::before {
    content: "";
    position: absolute;
    inset: 10px;
    z-index: -1;
    border: 1px solid rgba(255,255,255,.035);
    border-radius: 16px;
    pointer-events: none;
}

.mock-score-top {
    color: #63e64a;
    text-shadow: 0 0 14px rgba(99,230,74,.10);
}

.mock-score-rules {
    color: #7f827c;
}

.mock-score-grid {
    gap: 12px;
}

.mock-score-cell {
    position: relative;
    min-height: 126px;
    border: 1px solid rgba(255,255,255,.105);
    background:
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

.mock-score-cell::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: 50%;
    height: 1px;
    background: rgba(255,255,255,.055);
}

.mock-score-cell strong {
    position: relative;
    z-index: 1;
    color: #aaff1f;
    text-shadow:
        0 0 16px rgba(170,255,31,.10),
        0 0 28px rgba(117,242,59,.05);
    animation: scoreboardFlipIn .72s cubic-bezier(.2,.9,.25,1) both;
}

.mock-score-cell:nth-child(2) strong { animation-delay: .08s; }
.mock-score-cell:nth-child(3) strong { animation-delay: .16s; }

.mock-score-labels {
    color: #9a9d96;
}

.mock-score-note {
    color: #b8bbb4;
}

.mock-score-note strong {
    color: #63e64a;
}

.score-finish-tag {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #111;
    font-size: .7rem;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.score-finish-tag::before {
    content: "";
    width: 22px;
    height: 3px;
    border-radius: 999px;
    background: #63e64a;
    box-shadow: 0 0 10px rgba(99,230,74,.24);
}

@keyframes victoryCourtSweep {
    0% { opacity: 0; transform: translateX(-38%) rotate(-3deg); }
    34% { opacity: 1; }
    100% { opacity: .22; transform: translateX(18%) rotate(-3deg); }
}

@keyframes victoryImpact {
    0% { opacity: 0; transform: scale(.45); }
    50% { opacity: .9; }
    100% { opacity: 0; transform: scale(1.55); }
}

@keyframes scoreboardFlipIn {
    0% { opacity: 0; transform: translateY(18px) rotateX(65deg); }
    100% { opacity: 1; transform: translateY(0) rotateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .success-victory-lines::before,
    .success-victory-lines::after,
    .success-pickleball-wrap::after,
    .mock-score-cell strong {
        animation: none !important;
    }
}

/* =========================================================
   MINIMAL ACCENT PASS
   Black / white / charcoal stay dominant.
   Yellow is reserved for the moving ball + tail.
   Green is reserved for small labels / finish details only.
   ========================================================= */

:root {
    --nxt-accent-green: #69df52;
    --nxt-accent-yellow: #f4df21;
}

/* Moving ball: bright yellow, but controlled and clean */
.stage-playfield .arena-ball::before {
    width: calc(84px + (var(--ball-speed) * 64px)) !important;
    height: calc(28px + (var(--ball-speed) * 8px)) !important;
    background:
        linear-gradient(
            90deg,
            rgba(255, 244, 115, .88) 0%,
            rgba(244, 223, 33, .72) 28%,
            rgba(244, 205, 18, .34) 62%,
            rgba(244, 205, 18, 0) 100%
        ) !important;
    filter: blur(4px) !important;
    opacity: .78 !important;
}

.stage-playfield .arena-ball::after {
    width: calc(66px + (var(--ball-speed) * 48px)) !important;
    height: 7px !important;
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 205, .94) 0%,
            rgba(255, 236, 88, .84) 24%,
            rgba(244, 223, 33, .48) 62%,
            rgba(244, 223, 33, 0) 100%
        ) !important;
    opacity: .88 !important;
}

.stage-playfield .arena-ball {
    box-shadow:
        0 0 10px rgba(244,223,33,.58),
        0 0 21px rgba(244,223,33,.24),
        0 8px 18px rgba(0,0,0,.30) !important;
}

/* Success screen: monochrome first */
.success-card {
    background: #f4f4f1 !important;
    color: #0a0a0a !important;
}

.success-card::before {
    opacity: .18 !important;
}

.success-victory-lines::before,
.success-victory-lines::after {
    height: 1px !important;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0,0,0,.06) 28%,
            rgba(105,223,82,.34) 50%,
            rgba(0,0,0,.06) 72%,
            transparent
        ) !important;
    filter: none !important;
}

/* Scoreboard: mostly black / white / grey */
.mock-score-card {
    border-color: rgba(255,255,255,.09) !important;
    background:
        linear-gradient(150deg, #111212 0%, #080909 100%) !important;
    box-shadow:
        0 22px 46px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.025) !important;
}

.mock-score-card::before {
    border-color: rgba(255,255,255,.035) !important;
}

.mock-score-top {
    color: var(--nxt-accent-green) !important;
    text-shadow: none !important;
}

.mock-score-top::before,
.mock-score-top::after {
    background: rgba(105,223,82,.22) !important;
}

.mock-score-rules {
    color: #7e807c !important;
}

.mock-score-cell {
    border-color: rgba(255,255,255,.085) !important;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.008)
        ) !important;
}

.mock-score-cell strong {
    color: #f3f3ef !important;
    text-shadow: none !important;
}

.mock-score-cell:nth-child(3) strong {
    color: var(--nxt-accent-green) !important;
}

.mock-score-labels {
    color: #8d8f8a !important;
}

.mock-score-note {
    color: #b5b7b2 !important;
}

.mock-score-note strong {
    color: #f3f3ef !important;
}

.score-finish-tag {
    color: #111 !important;
}

.score-finish-tag::before {
    background: var(--nxt-accent-green) !important;
    box-shadow: none !important;
}

/* Success pickleball keeps yellow as the only bold warm accent */
.success-pickleball {
    box-shadow:
        0 0 14px rgba(244,223,33,.22),
        0 8px 18px rgba(0,0,0,.10) !important;
}

.success-pickleball-wrap::before {
    opacity: .48 !important;
    background:
        linear-gradient(
            90deg,
            rgba(244,223,33,0),
            rgba(244,223,33,.18) 54%,
            rgba(244,223,33,.44)
        ) !important;
}

.success-pickleball-wrap::after {
    border-color: rgba(105,223,82,.24) !important;
    box-shadow:
        0 0 0 10px rgba(105,223,82,.035),
        0 0 0 20px rgba(105,223,82,.018) !important;
}

@media (max-width: 620px) {
    .stage-playfield .arena-ball::before {
        width: calc(64px + (var(--ball-speed) * 42px)) !important;
        height: calc(21px + (var(--ball-speed) * 6px)) !important;
    }

    .stage-playfield .arena-ball::after {
        width: calc(48px + (var(--ball-speed) * 34px)) !important;
        height: 6px !important;
    }
}

/* =========================================================
   SOFT COMET TAIL — closer to the supplied reference
   Rounded luminous yellow plume, no hard beam / triangle look.
   ========================================================= */
.stage-playfield .arena-ball::before,
.stage-playfield .arena-ball::after {
    clip-path: none !important;
    border-radius: 999px !important;
}

/* broad soft plume */
.stage-playfield .arena-ball::before {
    width: calc(88px + (var(--ball-speed) * 62px)) !important;
    height: calc(24px + (var(--ball-speed) * 7px)) !important;
    background:
        radial-gradient(
            ellipse at 0% 50%,
            rgba(255, 252, 180, .90) 0%,
            rgba(255, 236, 72, .76) 18%,
            rgba(247, 213, 28, .48) 42%,
            rgba(235, 190, 10, .20) 68%,
            rgba(235, 190, 10, 0) 100%
        ) !important;
    filter: blur(7px) !important;
    opacity: .92 !important;
    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle) + 180deg))
        scaleX(1.05) !important;
}

/* inner bright streak */
.stage-playfield .arena-ball::after {
    width: calc(62px + (var(--ball-speed) * 44px)) !important;
    height: 9px !important;
    background:
        linear-gradient(
            90deg,
            rgba(255,255,220,.98) 0%,
            rgba(255,245,126,.92) 18%,
            rgba(249,224,72,.72) 42%,
            rgba(241,205,32,.34) 72%,
            rgba(241,205,32,0) 100%
        ) !important;
    filter: blur(2px) !important;
    opacity: .9 !important;
}

/* softer halo around the ball itself */
.stage-playfield .arena-ball {
    box-shadow:
        0 0 12px rgba(255,240,92,.72),
        0 0 26px rgba(246,215,42,.38),
        0 0 46px rgba(230,190,18,.14),
        0 8px 18px rgba(0,0,0,.28) !important;
}

@media (max-width: 620px) {
    .stage-playfield .arena-ball::before {
        width: calc(66px + (var(--ball-speed) * 44px)) !important;
        height: calc(19px + (var(--ball-speed) * 5px)) !important;
        filter: blur(6px) !important;
    }

    .stage-playfield .arena-ball::after {
        width: calc(48px + (var(--ball-speed) * 32px)) !important;
        height: 7px !important;
    }
}

/* =========================================================
   REFERENCE MATCH — THANK-YOU BALL + MOVING BALL / TAIL
   Ball: warm yellow/orange pickleball with subtle orange holes.
   Tail: single bright tapered yellow comet, soft glow, no green.
   ========================================================= */

/* --- Shared warm pickleball appearance --- */
.stage-playfield .arena-ball,
.success-pickleball {
    background:
        radial-gradient(circle at 31% 24%, rgba(255,255,210,.88) 0 4%, transparent 5%),
        radial-gradient(circle at 36% 30%,
            #fff36b 0%,
            #ffd62a 37%,
            #f3b917 69%,
            #d8920b 100%
        ) !important;
    box-shadow:
        0 0 12px rgba(255,222,49,.62),
        0 0 28px rgba(255,196,14,.28),
        0 8px 18px rgba(0,0,0,.24) !important;
}

/* Warm orange/yellow holes like the supplied reference */
.stage-playfield .arena-ball i,
.success-pickleball i {
    background: #e49b0c !important;
    box-shadow:
        inset 0 1px 1px rgba(103,69,0,.24),
        0 0 2px rgba(255,194,21,.16) !important;
    opacity: .92;
}

/* Remove all prior beam/ribbon styling */
.stage-playfield .arena-ball::before,
.stage-playfield .arena-ball::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    pointer-events: none;
    transform-origin: 0 50%;
    clip-path: none !important;
    border-radius: 999px !important;
}

/* Main long tapered luminous cone */
.stage-playfield .arena-ball::before {
    width: calc(118px + (var(--ball-speed) * 84px)) !important;
    height: calc(34px + (var(--ball-speed) * 10px)) !important;
    background:
        linear-gradient(
            90deg,
            rgba(255,245,132,.98) 0%,
            rgba(255,225,48,.94) 18%,
            rgba(255,205,8,.78) 42%,
            rgba(255,183,0,.40) 68%,
            rgba(255,165,0,.10) 88%,
            rgba(255,165,0,0) 100%
        ) !important;
    filter: blur(5px) !important;
    opacity: .94 !important;

    /* Start wide at the ball, taper to a point at the far end */
    clip-path: polygon(0 18%, 100% 50%, 0 82%) !important;

    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle) + 180deg)) !important;
}

/* Bright inner core for the reference's glowing center */
.stage-playfield .arena-ball::after {
    width: calc(98px + (var(--ball-speed) * 70px)) !important;
    height: calc(17px + (var(--ball-speed) * 4px)) !important;
    background:
        linear-gradient(
            90deg,
            rgba(255,255,205,1) 0%,
            rgba(255,239,92,.98) 20%,
            rgba(255,215,27,.84) 46%,
            rgba(255,193,0,.44) 72%,
            rgba(255,181,0,0) 100%
        ) !important;
    filter: blur(2.2px) !important;
    opacity: .96 !important;

    clip-path: polygon(0 28%, 100% 50%, 0 72%) !important;

    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle) + 180deg)) !important;
}

/* Slightly larger thank-you ball, matching the clean standalone reference */
.success-pickleball {
    width: 66px !important;
    height: 66px !important;
}

.success-pickleball-wrap {
    width: 100px !important;
    height: 76px !important;
}

.success-pickleball-wrap::before {
    display: none !important;
}

/* Keep the thank-you ball clean: no extra green/yellow completion halo around it */
.success-pickleball-wrap::after {
    border-color: rgba(0,0,0,.055) !important;
    box-shadow: none !important;
    opacity: .55;
}

@media (max-width: 620px) {
    .stage-playfield .arena-ball::before {
        width: calc(84px + (var(--ball-speed) * 58px)) !important;
        height: calc(27px + (var(--ball-speed) * 7px)) !important;
        filter: blur(4px) !important;
    }

    .stage-playfield .arena-ball::after {
        width: calc(70px + (var(--ball-speed) * 48px)) !important;
        height: 14px !important;
        filter: blur(1.8px) !important;
    }

    .success-pickleball {
        width: 60px !important;
        height: 60px !important;
    }
}

/* =========================================================
   FINAL REFERENCE MATCH
   - Soft yellow comet tail with feathered edges (no sharp triangle)
   - True pickleball look with dark recessed holes, not cookie dots
   ========================================================= */

/* Shared ball material */
.stage-playfield .arena-ball,
.success-pickleball {
    background:
        radial-gradient(circle at 30% 22%, rgba(255,255,230,.95) 0 5%, transparent 6%),
        radial-gradient(circle at 35% 28%,
            #fff76c 0%,
            #f7dc22 34%,
            #dbc30e 72%,
            #b39d08 100%
        ) !important;
    border: 1px solid rgba(255, 238, 75, .18);
    box-shadow:
        inset -7px -9px 13px rgba(90, 78, 0, .16),
        inset 5px 5px 10px rgba(255,255,210,.16),
        0 0 12px rgba(246, 221, 37, .52),
        0 0 27px rgba(246, 208, 20, .22),
        0 9px 18px rgba(0,0,0,.28) !important;
}

/* Real pickleball holes: dark/recessed with small highlight */
.stage-playfield .arena-ball i,
.success-pickleball i {
    background:
        radial-gradient(circle at 36% 32%,
            rgba(255,255,210,.18) 0 10%,
            #6f6609 24%,
            #4e4807 76%,
            #353104 100%
        ) !important;
    box-shadow:
        inset 1px 1px 2px rgba(0,0,0,.42),
        0 0 0 1px rgba(255,235,69,.10) !important;
    opacity: 1 !important;
}

/* ---------- Soft comet trail ---------- */
/* Remove all previous hard-edged trail geometry */
.stage-playfield .arena-ball::before,
.stage-playfield .arena-ball::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    pointer-events: none;
    transform-origin: 0 50%;
    clip-path: none !important;
    border-radius: 999px !important;
}

/* Wide blurred yellow plume. The tail fades naturally instead of ending in a point. */
.stage-playfield .arena-ball::before {
    width: calc(112px + (var(--ball-speed) * 76px)) !important;
    height: calc(34px + (var(--ball-speed) * 8px)) !important;
    background:
        radial-gradient(
            ellipse 100% 70% at 0% 50%,
            rgba(255, 249, 167, .96) 0%,
            rgba(255, 232, 76, .88) 17%,
            rgba(251, 216, 37, .66) 38%,
            rgba(245, 201, 20, .34) 61%,
            rgba(238, 184, 8, .12) 79%,
            rgba(238, 184, 8, 0) 100%
        ) !important;
    filter: blur(7px) !important;
    opacity: .90 !important;
    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle) + 180deg))
        scaleY(.92) !important;
}

/* Bright inner energy core. Still rounded/feathered, not a beam. */
.stage-playfield .arena-ball::after {
    width: calc(82px + (var(--ball-speed) * 55px)) !important;
    height: 13px !important;
    background:
        radial-gradient(
            ellipse 100% 70% at 0% 50%,
            rgba(255,255,220,.98) 0%,
            rgba(255,242,105,.92) 20%,
            rgba(250,224,62,.70) 44%,
            rgba(244,205,28,.32) 70%,
            rgba(244,205,28,0) 100%
        ) !important;
    filter: blur(2.6px) !important;
    opacity: .94 !important;
    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle) + 180deg)) !important;
}

/* A little more glow on the moving ball only */
.stage-playfield .arena-ball {
    box-shadow:
        inset -6px -8px 12px rgba(90,78,0,.16),
        inset 4px 4px 9px rgba(255,255,210,.14),
        0 0 14px rgba(255,238,78,.72),
        0 0 30px rgba(246,208,20,.34),
        0 0 48px rgba(240,190,0,.12),
        0 8px 18px rgba(0,0,0,.28) !important;
}

/* Thank-you ball: clean standalone pickleball */
.success-pickleball {
    width: 64px !important;
    height: 64px !important;
}

.success-pickleball-wrap {
    width: 96px !important;
    height: 76px !important;
}

.success-pickleball-wrap::before {
    display: none !important;
}

/* Remove the extra green ring so the ball itself is the focus */
.success-pickleball-wrap::after {
    display: none !important;
}

@media (max-width: 620px) {
    .stage-playfield .arena-ball::before {
        width: calc(78px + (var(--ball-speed) * 52px)) !important;
        height: calc(25px + (var(--ball-speed) * 6px)) !important;
        filter: blur(6px) !important;
    }

    .stage-playfield .arena-ball::after {
        width: calc(58px + (var(--ball-speed) * 38px)) !important;
        height: 10px !important;
        filter: blur(2px) !important;
    }

    .success-pickleball {
        width: 58px !important;
        height: 58px !important;
    }
}

/* =========================================================
   BALL + TAIL ONLY — final override
   ========================================================= */
.stage-playfield .arena-ball,
.success-pickleball {
    background:
        radial-gradient(circle at 32% 26%,
            #fff97a 0%,
            #f7e52b 38%,
            #ead51c 70%,
            #d5bd10 100%
        ) !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow:
        inset -4px -5px 8px rgba(112,94,0,.14),
        inset 3px 3px 7px rgba(255,255,190,.18),
        0 0 8px rgba(255,235,50,.75),
        0 0 18px rgba(255,220,20,.42),
        0 0 32px rgba(255,205,0,.18) !important;
}

.stage-playfield .arena-ball i,
.success-pickleball i {
    background: #756d0c !important;
    box-shadow:
        inset 1px 1px 2px rgba(0,0,0,.35),
        inset -1px -1px 1px rgba(255,245,100,.12) !important;
    opacity: .95 !important;
}

.stage-playfield .arena-ball::before,
.stage-playfield .arena-ball::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    pointer-events: none !important;
    transform-origin: 0 50% !important;
    z-index: -1 !important;
    border: 0 !important;
    clip-path: none !important;
}

.stage-playfield .arena-ball::before {
    width: calc(105px + (var(--ball-speed, .8) * 75px)) !important;
    height: calc(38px + (var(--ball-speed, .8) * 9px)) !important;
    background:
        radial-gradient(ellipse 105% 85% at 0% 50%,
            rgba(255,250,165,.95) 0%,
            rgba(255,237,76,.88) 14%,
            rgba(255,222,35,.72) 30%,
            rgba(255,207,13,.48) 48%,
            rgba(255,192,0,.24) 67%,
            rgba(255,180,0,.08) 82%,
            rgba(255,180,0,0) 100%
        ) !important;
    border-radius: 50% 100% 100% 50% / 50% 70% 70% 50% !important;
    filter: blur(7px) !important;
    opacity: .92 !important;
    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle, 0deg) + 180deg))
        scaleY(.90) !important;
}

.stage-playfield .arena-ball::after {
    width: calc(78px + (var(--ball-speed, .8) * 58px)) !important;
    height: calc(15px + (var(--ball-speed, .8) * 3px)) !important;
    background:
        radial-gradient(ellipse 105% 80% at 0% 50%,
            rgba(255,255,205,1) 0%,
            rgba(255,247,115,.95) 18%,
            rgba(255,230,55,.82) 38%,
            rgba(255,210,20,.55) 57%,
            rgba(255,195,0,.22) 76%,
            rgba(255,190,0,0) 100%
        ) !important;
    border-radius: 50% 100% 100% 50% / 50% 75% 75% 50% !important;
    filter: blur(3px) !important;
    opacity: .95 !important;
    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle, 0deg) + 180deg)) !important;
}

.success-pickleball {
    width: 62px !important;
    height: 62px !important;
}

.success-pickleball-wrap::before,
.success-pickleball-wrap::after {
    display: none !important;
}

@media (max-width: 620px) {
    .stage-playfield .arena-ball::before {
        width: calc(76px + (var(--ball-speed, .8) * 48px)) !important;
        height: calc(28px + (var(--ball-speed, .8) * 6px)) !important;
        filter: blur(6px) !important;
    }
    .stage-playfield .arena-ball::after {
        width: calc(56px + (var(--ball-speed, .8) * 36px)) !important;
        height: 12px !important;
        filter: blur(2.5px) !important;
    }
    .success-pickleball {
        width: 58px !important;
        height: 58px !important;
    }
}

/* =========================================================
   IMAGE-BASED PICKLEBALL
   Uses the enhanced transparent pickleball PNG for both the
   moving hero ball and the thank-you ball.
   Existing yellow motion tail remains unchanged.
   ========================================================= */

.stage-playfield .arena-ball,
.success-pickleball {
    background:
        url("../images/pickleball-enhanced.png")
        center / contain
        no-repeat !important;

    border: 0 !important;
    border-radius: 50% !important;

    box-shadow:
        0 0 10px rgba(255, 232, 54, .54),
        0 0 24px rgba(255, 207, 20, .24),
        0 8px 18px rgba(0,0,0,.24) !important;
}

/* The holes are already part of the PNG artwork. */
.stage-playfield .arena-ball i,
.success-pickleball i {
    display: none !important;
}

/* Moving hero ball size */
.stage-playfield .arena-ball {
    width: 48px !important;
    height: 48px !important;
}

/* Thank-you ball size */
.success-pickleball {
    width: 68px !important;
    height: 68px !important;
}

/* Keep the thank-you ball clean and standalone */
.success-pickleball-wrap::before,
.success-pickleball-wrap::after {
    display: none !important;
}

@media (max-width: 620px) {
    .stage-playfield .arena-ball {
        width: 42px !important;
        height: 42px !important;
    }

    .success-pickleball {
        width: 62px !important;
        height: 62px !important;
    }
}

/* =========================================================
   FINAL PICKLEBALL IMAGE + COMET TAIL
   Transparent holes inherit whatever background is behind them.
   No outer ring. Tail is broad, soft and comet-shaped.
   ========================================================= */

/* Use the cleaned transparent PNG only — no synthetic circular shell. */
.stage-playfield .arena-ball,
.success-pickleball {
    background:
        url("../images/pickleball-enhanced.png")
        center / contain
        no-repeat !important;

    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;

    /* Keep only a soft light bloom — no visible circular edge. */
    box-shadow: none !important;

    filter:
        drop-shadow(0 0 6px rgba(255, 230, 48, .48))
        drop-shadow(0 0 14px rgba(255, 204, 12, .22)) !important;
}

/* The holes are baked as true transparency in the PNG. */
.stage-playfield .arena-ball i,
.success-pickleball i {
    display: none !important;
}

/* Moving ball size */
.stage-playfield .arena-ball {
    width: 50px !important;
    height: 50px !important;
    overflow: visible !important;
    isolation: isolate;
}

/* Thank-you page ball */
.success-pickleball {
    width: 70px !important;
    height: 70px !important;
}

.success-pickleball-wrap::before,
.success-pickleball-wrap::after {
    display: none !important;
}


/* ---------------------------------------------------------
   BROAD YELLOW COMET TAIL
   --------------------------------------------------------- */

.stage-playfield .arena-ball::before,
.stage-playfield .arena-ball::after {
    content: "" !important;
    position: absolute !important;
    left: 48% !important;
    top: 50% !important;
    z-index: -1 !important;
    pointer-events: none !important;
    transform-origin: 0 50% !important;
    border: 0 !important;
    outline: 0 !important;
}

/* Large soft outer plume */
.stage-playfield .arena-ball::before {
    width: calc(120px + (var(--ball-speed, .8) * 92px)) !important;
    height: calc(48px + (var(--ball-speed, .8) * 14px)) !important;

    background:
        radial-gradient(
            ellipse 110% 95% at 0% 50%,
            rgba(255, 252, 196, .94) 0%,
            rgba(255, 240, 100, .86) 13%,
            rgba(255, 222, 48, .70) 30%,
            rgba(255, 205, 18, .45) 51%,
            rgba(255, 191, 0, .20) 70%,
            rgba(255, 180, 0, .06) 86%,
            rgba(255, 180, 0, 0) 100%
        ) !important;

    /* Feathered comet shape instead of a thin beam. */
    border-radius: 48% 100% 100% 48% / 50% 72% 72% 50% !important;
    clip-path: none !important;
    filter: blur(9px) !important;
    opacity: .90 !important;

    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle, 0deg) + 180deg))
        scaleY(1.08) !important;
}

/* Bright, thick inner core */
.stage-playfield .arena-ball::after {
    width: calc(88px + (var(--ball-speed, .8) * 66px)) !important;
    height: calc(19px + (var(--ball-speed, .8) * 5px)) !important;

    background:
        radial-gradient(
            ellipse 108% 88% at 0% 50%,
            rgba(255, 255, 225, .98) 0%,
            rgba(255, 247, 133, .96) 18%,
            rgba(255, 229, 67, .82) 38%,
            rgba(255, 208, 24, .52) 61%,
            rgba(255, 193, 0, .20) 79%,
            rgba(255, 185, 0, 0) 100%
        ) !important;

    border-radius: 48% 100% 100% 48% / 50% 75% 75% 50% !important;
    clip-path: none !important;
    filter: blur(3.5px) !important;
    opacity: .95 !important;

    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle, 0deg) + 180deg)) !important;
}

@media (max-width: 620px) {
    .stage-playfield .arena-ball {
        width: 44px !important;
        height: 44px !important;
    }

    .stage-playfield .arena-ball::before {
        width: calc(88px + (var(--ball-speed, .8) * 58px)) !important;
        height: calc(36px + (var(--ball-speed, .8) * 10px)) !important;
        filter: blur(7px) !important;
    }

    .stage-playfield .arena-ball::after {
        width: calc(66px + (var(--ball-speed, .8) * 42px)) !important;
        height: 16px !important;
        filter: blur(3px) !important;
    }

    .success-pickleball {
        width: 64px !important;
        height: 64px !important;
    }
}

/* =========================================================
   REFINED COMET TAIL — closer to reference
   Narrower near the far end, softer edges, less visible overall.
   ========================================================= */

.stage-playfield .arena-ball::before {
    width: calc(112px + (var(--ball-speed, .8) * 72px)) !important;
    height: calc(38px + (var(--ball-speed, .8) * 8px)) !important;

    background:
        linear-gradient(
            90deg,
            rgba(255, 248, 174, .90) 0%,
            rgba(255, 232, 88, .80) 14%,
            rgba(255, 216, 44, .60) 34%,
            rgba(255, 199, 18, .34) 56%,
            rgba(255, 184, 0, .12) 78%,
            rgba(255, 174, 0, 0) 100%
        ) !important;

    clip-path: polygon(
        0% 24%,
        100% 47%,
        100% 53%,
        0% 76%
    ) !important;

    border-radius: 48% 100% 100% 48% / 50% 72% 72% 50% !important;
    filter: blur(6px) !important;
    opacity: .72 !important;

    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle, 0deg) + 180deg))
        scaleY(.90) !important;
}

.stage-playfield .arena-ball::after {
    width: calc(84px + (var(--ball-speed, .8) * 52px)) !important;
    height: calc(13px + (var(--ball-speed, .8) * 3px)) !important;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 218, .98) 0%,
            rgba(255, 244, 126, .92) 18%,
            rgba(255, 226, 68, .76) 38%,
            rgba(255, 208, 32, .42) 60%,
            rgba(255, 191, 0, .14) 80%,
            rgba(255, 184, 0, 0) 100%
        ) !important;

    clip-path: polygon(
        0% 30%,
        100% 48%,
        100% 52%,
        0% 70%
    ) !important;

    border-radius: 50% 100% 100% 50% / 50% 75% 75% 50% !important;
    filter: blur(2.2px) !important;
    opacity: .86 !important;

    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle, 0deg) + 180deg)) !important;
}

/* Keep the ball glow tight so the tail reads cleaner */
.stage-playfield .arena-ball {
    filter:
        drop-shadow(0 0 5px rgba(255, 230, 48, .44))
        drop-shadow(0 0 11px rgba(255, 204, 12, .16)) !important;
}

@media (max-width: 620px) {
    .stage-playfield .arena-ball::before {
        width: calc(82px + (var(--ball-speed, .8) * 48px)) !important;
        height: calc(29px + (var(--ball-speed, .8) * 6px)) !important;
        filter: blur(5px) !important;
        opacity: .68 !important;
    }

    .stage-playfield .arena-ball::after {
        width: calc(60px + (var(--ball-speed, .8) * 34px)) !important;
        height: 10px !important;
        filter: blur(1.8px) !important;
    }
}

/* =========================================================
   TRUE COMET TAIL — soft tapered plume like the reference
   Replaces the thin double-beam look.
   ========================================================= */

.stage-playfield .arena-ball::before,
.stage-playfield .arena-ball::after {
    content: "" !important;
    position: absolute !important;
    left: 47% !important;
    top: 50% !important;
    z-index: -1 !important;
    pointer-events: none !important;
    transform-origin: 0 50% !important;
    border: 0 !important;
    border-radius: 0 !important;
}

/* Large feathered comet body */
.stage-playfield .arena-ball::before {
    width: calc(125px + (var(--ball-speed, .8) * 78px)) !important;
    height: calc(58px + (var(--ball-speed, .8) * 12px)) !important;

    background:
        linear-gradient(
            90deg,
            rgba(255, 249, 177, .95) 0%,
            rgba(255, 235, 91, .90) 14%,
            rgba(255, 219, 43, .78) 31%,
            rgba(255, 202, 17, .58) 50%,
            rgba(255, 187, 0, .33) 68%,
            rgba(255, 177, 0, .13) 84%,
            rgba(255, 171, 0, 0) 100%
        ) !important;

    /* Wide at the ball, naturally narrowing to the far tip */
    clip-path: polygon(
        0% 8%,
        100% 46%,
        100% 54%,
        0% 92%
    ) !important;

    filter: blur(11px) !important;
    opacity: .82 !important;

    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle, 0deg) + 180deg)) !important;
}

/* Soft bright center — deliberately thick, not a laser line */
.stage-playfield .arena-ball::after {
    width: calc(102px + (var(--ball-speed, .8) * 60px)) !important;
    height: calc(30px + (var(--ball-speed, .8) * 6px)) !important;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 215, .98) 0%,
            rgba(255, 246, 128, .96) 17%,
            rgba(255, 229, 71, .87) 36%,
            rgba(255, 211, 31, .66) 56%,
            rgba(255, 194, 4, .36) 75%,
            rgba(255, 181, 0, 0) 100%
        ) !important;

    clip-path: polygon(
        0% 18%,
        100% 47%,
        100% 53%,
        0% 82%
    ) !important;

    filter: blur(5px) !important;
    opacity: .88 !important;

    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle, 0deg) + 180deg)) !important;
}

/* Tight halo only around the ball */
.stage-playfield .arena-ball {
    filter:
        drop-shadow(0 0 5px rgba(255, 236, 77, .50))
        drop-shadow(0 0 12px rgba(255, 208, 20, .22)) !important;
}

@media (max-width: 620px) {
    .stage-playfield .arena-ball::before {
        width: calc(92px + (var(--ball-speed, .8) * 54px)) !important;
        height: calc(44px + (var(--ball-speed, .8) * 8px)) !important;
        filter: blur(9px) !important;
        opacity: .78 !important;
    }

    .stage-playfield .arena-ball::after {
        width: calc(74px + (var(--ball-speed, .8) * 40px)) !important;
        height: 23px !important;
        filter: blur(4px) !important;
        opacity: .84 !important;
    }
}

/* =========================================================
   HOT COMET TAIL — integrated with the moving pickleball
   Soft molten plume, bright at the ball, fading naturally.
   No triangle / cone / ice-cream shape.
   ========================================================= */

.stage-playfield .arena-ball {
    overflow: visible !important;
    isolation: isolate;
}

/* Shared tail geometry */
.stage-playfield .arena-ball::before,
.stage-playfield .arena-ball::after {
    content: "" !important;
    position: absolute !important;
    left: 44% !important;
    top: 50% !important;
    z-index: -1 !important;
    pointer-events: none !important;
    transform-origin: 0 50% !important;
    clip-path: none !important;
    border: 0 !important;
    outline: 0 !important;
}

/* Outer hot haze — large, rounded and feathered */
.stage-playfield .arena-ball::before {
    width: calc(138px + (var(--ball-speed, .8) * 82px)) !important;
    height: calc(64px + (var(--ball-speed, .8) * 12px)) !important;

    background:
        radial-gradient(
            ellipse 110% 95% at 0% 50%,
            rgba(255,255,218,.94) 0%,
            rgba(255,241,114,.90) 11%,
            rgba(255,221,55,.76) 24%,
            rgba(255,195,18,.54) 42%,
            rgba(255,159,0,.30) 61%,
            rgba(255,113,0,.12) 78%,
            rgba(255,85,0,0) 100%
        ) !important;

    border-radius: 50% !important;
    filter: blur(12px) !important;
    opacity: .88 !important;

    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle, 0deg) + 180deg))
        scaleY(.92) !important;
}

/* Inner molten core — thick near ball, soft at the end */
.stage-playfield .arena-ball::after {
    width: calc(102px + (var(--ball-speed, .8) * 62px)) !important;
    height: calc(30px + (var(--ball-speed, .8) * 6px)) !important;

    background:
        radial-gradient(
            ellipse 108% 88% at 0% 50%,
            rgba(255,255,238,1) 0%,
            rgba(255,249,160,.98) 13%,
            rgba(255,229,86,.90) 28%,
            rgba(255,202,40,.68) 48%,
            rgba(255,167,10,.38) 67%,
            rgba(255,116,0,.14) 82%,
            rgba(255,88,0,0) 100%
        ) !important;

    border-radius: 50% !important;
    filter: blur(5px) !important;
    opacity: .94 !important;

    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle, 0deg) + 180deg)) !important;
}

/* Make the heat feel attached to the ball itself */
.stage-playfield .arena-ball {
    filter:
        drop-shadow(0 0 5px rgba(255,242,100,.58))
        drop-shadow(0 0 13px rgba(255,205,31,.34))
        drop-shadow(0 0 24px rgba(255,144,0,.14)) !important;
}

/* Mobile: same effect, just shorter */
@media (max-width: 620px) {
    .stage-playfield .arena-ball::before {
        width: calc(96px + (var(--ball-speed, .8) * 56px)) !important;
        height: calc(48px + (var(--ball-speed, .8) * 8px)) !important;
        filter: blur(10px) !important;
    }

    .stage-playfield .arena-ball::after {
        width: calc(74px + (var(--ball-speed, .8) * 40px)) !important;
        height: 24px !important;
        filter: blur(4px) !important;
    }
}

/* =========================================================
   HOT COMET — MORE GLOW AROUND THE BALL
   Keeps the current comet tail, but makes the hot plume wrap
   around the ball more naturally before fading into the trail.
   ========================================================= */

/* Stronger warm halo attached to the moving ball */
.stage-playfield .arena-ball {
    filter:
        drop-shadow(0 0 7px rgba(255, 246, 125, .72))
        drop-shadow(0 0 16px rgba(255, 218, 55, .46))
        drop-shadow(0 0 28px rgba(255, 169, 0, .22)) !important;
}

/* Make the outer plume start broader around the ball itself */
.stage-playfield .arena-ball::before {
    left: 38% !important;

    width: calc(142px + (var(--ball-speed, .8) * 84px)) !important;
    height: calc(74px + (var(--ball-speed, .8) * 14px)) !important;

    background:
        radial-gradient(
            ellipse 112% 98% at 0% 50%,
            rgba(255,255,226,.97) 0%,
            rgba(255,246,138,.93) 9%,
            rgba(255,228,74,.84) 20%,
            rgba(255,205,36,.66) 36%,
            rgba(255,177,10,.42) 55%,
            rgba(255,139,0,.22) 73%,
            rgba(255,102,0,.08) 87%,
            rgba(255,80,0,0) 100%
        ) !important;

    border-radius: 50% !important;
    filter: blur(13px) !important;
    opacity: .90 !important;

    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle, 0deg) + 180deg))
        scaleY(1.03) !important;
}

/* Thicker bright core right behind/around the ball */
.stage-playfield .arena-ball::after {
    left: 40% !important;

    width: calc(108px + (var(--ball-speed, .8) * 64px)) !important;
    height: calc(38px + (var(--ball-speed, .8) * 7px)) !important;

    background:
        radial-gradient(
            ellipse 110% 92% at 0% 50%,
            rgba(255,255,242,1) 0%,
            rgba(255,250,176,.98) 10%,
            rgba(255,235,102,.94) 24%,
            rgba(255,214,54,.78) 42%,
            rgba(255,185,19,.52) 61%,
            rgba(255,144,0,.24) 79%,
            rgba(255,100,0,0) 100%
        ) !important;

    border-radius: 50% !important;
    filter: blur(6px) !important;
    opacity: .96 !important;

    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle, 0deg) + 180deg)) !important;
}

@media (max-width: 620px) {
    .stage-playfield .arena-ball::before {
        left: 36% !important;
        width: calc(100px + (var(--ball-speed, .8) * 58px)) !important;
        height: calc(56px + (var(--ball-speed, .8) * 10px)) !important;
        filter: blur(10px) !important;
    }

    .stage-playfield .arena-ball::after {
        left: 38% !important;
        width: calc(78px + (var(--ball-speed, .8) * 44px)) !important;
        height: 30px !important;
        filter: blur(5px) !important;
    }
}

/* =========================================================
   THANK-YOU SCORE CELEBRATION
   Tail styles above remain exactly from the supplied stylesheet.
   ========================================================= */

.success-shell {
    position: relative;
    overflow: hidden;
}

.success-card {
    position: relative;
    z-index: 2;
}

/* Minimal transparent fun score */
.fun-score-card {
    width: min(520px, 100%);
    margin: 28px auto 24px;
    padding: 8px 0 2px;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #0a0a0a;
    animation: scoreBlockEnter .65s cubic-bezier(.2,.82,.2,1) .18s both;
}

.fun-score-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    align-items: center;
    gap: clamp(16px, 4vw, 34px);
    width: min(420px,100%);
    margin: 0 auto;
}

.fun-score-side {
    display: grid;
    justify-items: center;
    gap: 8px;
}

.fun-score-label {
    color: #777873;
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .15em;
}

.fun-score-number {
    display: block;
    color: #0a0a0a;
    font-size: clamp(4rem,11vw,6.2rem);
    line-height: .82;
    letter-spacing: -.07em;
    transform-origin: center bottom;
    animation: scorePop .72s cubic-bezier(.16,1.16,.28,1) both;
}

.fun-score-number-you {
    animation-delay: .36s;
}

.fun-score-number-them {
    animation-delay: .52s;
}

.fun-score-number-you::after {
    content: "";
    display: block;
    width: 34px;
    height: 3px;
    margin: 14px auto 0;
    border-radius: 999px;
    background: #63e64a;
    transform: scaleX(0);
    animation: winnerLine .42s ease .92s forwards;
}

.fun-score-divider {
    color: #c6c7c2;
    font-size: clamp(2.4rem,7vw,4rem);
    font-weight: 700;
    line-height: 1;
    transform: translateY(8px);
    opacity: 0;
    animation: scoreDivider .35s ease .68s forwards;
}

.fun-score-message {
    margin: 28px auto 0 !important;
    max-width: 430px !important;
    color: #666862 !important;
    font-size: .92rem !important;
    line-height: 1.55 !important;
    text-align: center;
    opacity: 0;
    transform: translateY(8px);
    animation: scoreMessageIn .5s ease .94s forwards;
}

/* Confetti: small, sporty, mostly monochrome with restrained green/yellow. */
.success-confetti {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.success-confetti i {
    --x: 50vw;
    --drift: 0px;
    --delay: 0s;
    --duration: 2.4s;
    position: absolute;
    top: -22px;
    left: var(--x);
    width: 7px;
    height: 14px;
    border-radius: 2px;
    background: #111;
    opacity: 0;
    animation: confettiFall var(--duration) cubic-bezier(.18,.72,.25,1) var(--delay) both;
}

.success-confetti i:nth-child(3n) {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #63e64a;
}

.success-confetti i:nth-child(5n) {
    width: 10px;
    height: 5px;
    border-radius: 999px;
    background: #f4df21;
}

.success-confetti i:nth-child(1)  { --x: 6vw;  --drift: 30px;  --delay: .02s; --duration: 2.1s; }
.success-confetti i:nth-child(2)  { --x: 13vw; --drift: -18px; --delay: .14s; --duration: 2.5s; }
.success-confetti i:nth-child(3)  { --x: 21vw; --drift: 26px;  --delay: .05s; --duration: 2.25s; }
.success-confetti i:nth-child(4)  { --x: 29vw; --drift: -34px; --delay: .22s; --duration: 2.55s; }
.success-confetti i:nth-child(5)  { --x: 37vw; --drift: 20px;  --delay: .10s; --duration: 2.3s; }
.success-confetti i:nth-child(6)  { --x: 45vw; --drift: -26px; --delay: .28s; --duration: 2.6s; }
.success-confetti i:nth-child(7)  { --x: 53vw; --drift: 34px;  --delay: .07s; --duration: 2.4s; }
.success-confetti i:nth-child(8)  { --x: 61vw; --drift: -18px; --delay: .18s; --duration: 2.2s; }
.success-confetti i:nth-child(9)  { --x: 69vw; --drift: 28px;  --delay: .31s; --duration: 2.55s; }
.success-confetti i:nth-child(10) { --x: 77vw; --drift: -30px; --delay: .09s; --duration: 2.35s; }
.success-confetti i:nth-child(11) { --x: 85vw; --drift: 18px;  --delay: .24s; --duration: 2.65s; }
.success-confetti i:nth-child(12) { --x: 93vw; --drift: -24px; --delay: .12s; --duration: 2.3s; }
.success-confetti i:nth-child(13) { --x: 17vw; --drift: 38px;  --delay: .35s; --duration: 2.4s; }
.success-confetti i:nth-child(14) { --x: 33vw; --drift: -26px; --delay: .41s; --duration: 2.2s; }
.success-confetti i:nth-child(15) { --x: 49vw; --drift: 30px;  --delay: .38s; --duration: 2.5s; }
.success-confetti i:nth-child(16) { --x: 65vw; --drift: -34px; --delay: .44s; --duration: 2.35s; }
.success-confetti i:nth-child(17) { --x: 81vw; --drift: 22px;  --delay: .33s; --duration: 2.6s; }
.success-confetti i:nth-child(18) { --x: 89vw; --drift: -18px; --delay: .48s; --duration: 2.45s; }

@keyframes scoreBlockEnter {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes scorePop {
    0%   { opacity: 0; transform: translateY(20px) scale(.72); filter: blur(5px); }
    68%  { opacity: 1; transform: translateY(-3px) scale(1.08); filter: blur(0); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes winnerLine {
    to { transform: scaleX(1); }
}

@keyframes scoreDivider {
    to { opacity: 1; }
}

@keyframes scoreMessageIn {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes confettiFall {
    0% {
        opacity: 0;
        transform: translate3d(0,-18px,0) rotate(0deg);
    }
    10% { opacity: .88; }
    82% { opacity: .78; }
    100% {
        opacity: 0;
        transform: translate3d(var(--drift),105vh,0) rotate(620deg);
    }
}

@media (max-width: 520px) {
    .fun-score-grid {
        width: min(310px,100%);
        gap: 14px;
    }

    .fun-score-number {
        font-size: 4.35rem;
    }

    .fun-score-message {
        font-size: .86rem !important;
    }

    .success-confetti i {
        transform: scale(.8);
    }
}

@media (prefers-reduced-motion: reduce) {
    .success-confetti { display: none; }

    .fun-score-card,
    .fun-score-number,
    .fun-score-number-you::after,
    .fun-score-divider,
    .fun-score-message {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* =========================================================
   FINAL COMET REFERENCE
   Narrow at the far end, fuller around the ball, soft yellow
   glow, darker/warmer near the ball and lighter toward the tip.
   ========================================================= */

.stage-playfield .arena-ball {
    overflow: visible !important;
    isolation: isolate;
    filter:
        drop-shadow(0 0 6px rgba(255, 232, 66, .62))
        drop-shadow(0 0 14px rgba(255, 202, 22, .26)) !important;
}

.stage-playfield .arena-ball::before,
.stage-playfield .arena-ball::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    z-index: -1 !important;
    pointer-events: none !important;
    transform-origin: 0 50% !important;
    border: 0 !important;
    outline: 0 !important;
}

/* Outer comet plume */
.stage-playfield .arena-ball::before {
    left: 34% !important;

    width: calc(112px + (var(--ball-speed, .8) * 66px)) !important;
    height: calc(48px + (var(--ball-speed, .8) * 8px)) !important;

    background:
        linear-gradient(
            90deg,
            rgba(255, 176, 0, .74) 0%,
            rgba(255, 195, 10, .72) 12%,
            rgba(255, 214, 34, .68) 28%,
            rgba(255, 229, 74, .56) 48%,
            rgba(255, 240, 122, .34) 68%,
            rgba(255, 246, 164, .16) 84%,
            rgba(255, 248, 190, 0) 100%
        ) !important;

    clip-path: polygon(
        0% 14%,
        100% 47%,
        100% 53%,
        0% 86%
    ) !important;

    border-radius: 48% 100% 100% 48% / 50% 78% 78% 50% !important;

    filter: blur(8px) !important;
    opacity: .86 !important;

    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle, 0deg) + 180deg)) !important;
}

/* Inner hot core */
.stage-playfield .arena-ball::after {
    left: 38% !important;

    width: calc(86px + (var(--ball-speed, .8) * 50px)) !important;
    height: calc(22px + (var(--ball-speed, .8) * 4px)) !important;

    background:
        linear-gradient(
            90deg,
            rgba(255, 183, 0, .92) 0%,
            rgba(255, 204, 12, .90) 17%,
            rgba(255, 222, 42, .84) 36%,
            rgba(255, 237, 94, .70) 56%,
            rgba(255, 245, 143, .42) 76%,
            rgba(255, 249, 190, 0) 100%
        ) !important;

    clip-path: polygon(
        0% 20%,
        100% 48%,
        100% 52%,
        0% 80%
    ) !important;

    border-radius: 48% 100% 100% 48% / 50% 80% 80% 50% !important;

    filter: blur(3.5px) !important;
    opacity: .92 !important;

    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle, 0deg) + 180deg)) !important;
}

@media (max-width: 620px) {
    .stage-playfield .arena-ball::before {
        left: 32% !important;
        width: calc(82px + (var(--ball-speed, .8) * 42px)) !important;
        height: calc(36px + (var(--ball-speed, .8) * 6px)) !important;
        filter: blur(6px) !important;
    }

    .stage-playfield .arena-ball::after {
        left: 36% !important;
        width: calc(64px + (var(--ball-speed, .8) * 30px)) !important;
        height: 17px !important;
        filter: blur(2.8px) !important;
    }
}

/* =========================================================
   SOFT GRADIENT COMET OVERRIDE
   Replaces the sharper polygon tail with a smooth feathered
   gradient plume that hugs the ball and fades naturally.
   ========================================================= */

.stage-playfield .arena-ball {
    overflow: visible !important;
    isolation: isolate;
    filter:
        drop-shadow(0 0 7px rgba(255, 235, 84, .58))
        drop-shadow(0 0 16px rgba(255, 205, 24, .24)) !important;
}

.stage-playfield .arena-ball::before,
.stage-playfield .arena-ball::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    z-index: -1 !important;
    pointer-events: none !important;
    transform-origin: 0 50% !important;
    border: 0 !important;
    outline: 0 !important;
    clip-path: none !important;
    border-radius: 999px !important;
}

/* Soft outer plume */
.stage-playfield .arena-ball::before {
    left: 32% !important;
    width: calc(118px + (var(--ball-speed, .8) * 68px)) !important;
    height: calc(46px + (var(--ball-speed, .8) * 8px)) !important;

    background:
        radial-gradient(
            ellipse 115% 92% at 0% 50%,
            rgba(255, 191, 10, .78) 0%,
            rgba(255, 205, 24, .74) 14%,
            rgba(255, 219, 48, .66) 30%,
            rgba(255, 231, 82, .52) 48%,
            rgba(255, 240, 126, .34) 66%,
            rgba(255, 246, 164, .16) 82%,
            rgba(255, 249, 194, 0) 100%
        ) !important;

    filter: blur(10px) !important;
    opacity: .84 !important;

    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle, 0deg) + 180deg))
        scaleY(.94) !important;
}

/* Soft inner glow/core */
.stage-playfield .arena-ball::after {
    left: 36% !important;
    width: calc(88px + (var(--ball-speed, .8) * 50px)) !important;
    height: calc(20px + (var(--ball-speed, .8) * 4px)) !important;

    background:
        radial-gradient(
            ellipse 110% 86% at 0% 50%,
            rgba(255, 202, 20, .94) 0%,
            rgba(255, 218, 48, .90) 18%,
            rgba(255, 232, 88, .78) 38%,
            rgba(255, 242, 132, .58) 58%,
            rgba(255, 248, 174, .30) 78%,
            rgba(255, 251, 205, 0) 100%
        ) !important;

    filter: blur(4px) !important;
    opacity: .90 !important;

    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle, 0deg) + 180deg)) !important;
}

@media (max-width: 620px) {
    .stage-playfield .arena-ball::before {
        left: 30% !important;
        width: calc(86px + (var(--ball-speed, .8) * 44px)) !important;
        height: calc(34px + (var(--ball-speed, .8) * 6px)) !important;
        filter: blur(8px) !important;
    }

    .stage-playfield .arena-ball::after {
        left: 34% !important;
        width: calc(64px + (var(--ball-speed, .8) * 32px)) !important;
        height: 16px !important;
        filter: blur(3.2px) !important;
    }
}

/* =========================================================
   DARKER + SLIGHTLY POINTIER COMET
   Keeps the soft gradient feel, but narrows the far end and
   uses a deeper golden tone close to the ball.
   ========================================================= */

.stage-playfield .arena-ball::before {
    left: 31% !important;
    width: calc(116px + (var(--ball-speed, .8) * 66px)) !important;
    height: calc(44px + (var(--ball-speed, .8) * 7px)) !important;

    background:
        linear-gradient(
            90deg,
            rgba(226, 145, 0, .82) 0%,
            rgba(239, 165, 0, .78) 14%,
            rgba(247, 188, 12, .70) 30%,
            rgba(252, 208, 38, .58) 48%,
            rgba(255, 226, 82, .40) 66%,
            rgba(255, 239, 132, .20) 82%,
            rgba(255, 246, 178, 0) 100%
        ) !important;

    clip-path: polygon(
        0% 18%,
        100% 48%,
        100% 52%,
        0% 82%
    ) !important;

    border-radius: 48% 100% 100% 48% / 50% 78% 78% 50% !important;
    filter: blur(9px) !important;
    opacity: .86 !important;

    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle, 0deg) + 180deg))
        scaleY(.92) !important;
}

.stage-playfield .arena-ball::after {
    left: 35% !important;
    width: calc(86px + (var(--ball-speed, .8) * 48px)) !important;
    height: calc(18px + (var(--ball-speed, .8) * 3px)) !important;

    background:
        linear-gradient(
            90deg,
            rgba(236, 158, 0, .96) 0%,
            rgba(247, 183, 8, .92) 18%,
            rgba(252, 205, 32, .84) 38%,
            rgba(255, 224, 76, .66) 58%,
            rgba(255, 239, 129, .36) 78%,
            rgba(255, 247, 185, 0) 100%
        ) !important;

    clip-path: polygon(
        0% 24%,
        100% 49%,
        100% 51%,
        0% 76%
    ) !important;

    border-radius: 48% 100% 100% 48% / 50% 80% 80% 50% !important;
    filter: blur(3.6px) !important;
    opacity: .92 !important;

    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle, 0deg) + 180deg)) !important;
}

.stage-playfield .arena-ball {
    filter:
        drop-shadow(0 0 6px rgba(245, 190, 20, .50))
        drop-shadow(0 0 14px rgba(226, 140, 0, .22)) !important;
}

@media (max-width: 620px) {
    .stage-playfield .arena-ball::before {
        width: calc(84px + (var(--ball-speed, .8) * 42px)) !important;
        height: calc(32px + (var(--ball-speed, .8) * 5px)) !important;
        filter: blur(7px) !important;
    }

    .stage-playfield .arena-ball::after {
        width: calc(62px + (var(--ball-speed, .8) * 30px)) !important;
        height: 14px !important;
        filter: blur(3px) !important;
    }
}

/* =========================================================
   FINAL SOFT DARK-GOLD COMET
   Soft + gradient first. Slight natural taper without hard
   polygon edges. Darker gold hugs the ball, fading lighter
   toward the tail.
   ========================================================= */

.stage-playfield .arena-ball {
    overflow: visible !important;
    isolation: isolate;
    filter:
        drop-shadow(0 0 6px rgba(244, 190, 16, .50))
        drop-shadow(0 0 14px rgba(228, 145, 0, .20)) !important;
}

.stage-playfield .arena-ball::before,
.stage-playfield .arena-ball::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    z-index: -1 !important;
    pointer-events: none !important;
    transform-origin: 0 50% !important;

    /* IMPORTANT: no polygon = no sharp cut edges */
    clip-path: none !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 50% !important;
}

/* Large soft plume */
.stage-playfield .arena-ball::before {
    left: 36% !important;

    width: calc(112px + (var(--ball-speed, .8) * 62px)) !important;
    height: calc(42px + (var(--ball-speed, .8) * 6px)) !important;

    /*
       Elliptical radial gradient gives the tail a naturally
       narrowing comet shape without a hard triangular edge.
    */
    background:
        radial-gradient(
            ellipse 110% 86% at 0% 50%,
            rgba(211, 128, 0, .80) 0%,
            rgba(225, 148, 0, .76) 13%,
            rgba(239, 174, 8, .68) 28%,
            rgba(248, 198, 28, .56) 45%,
            rgba(253, 219, 68, .40) 62%,
            rgba(255, 235, 116, .22) 78%,
            rgba(255, 246, 175, .08) 90%,
            rgba(255, 250, 205, 0) 100%
        ) !important;

    filter: blur(9px) !important;
    opacity: .84 !important;

    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle, 0deg) + 180deg))
        scaleY(.88) !important;
}

/* Soft brighter inner core */
.stage-playfield .arena-ball::after {
    left: 39% !important;

    width: calc(82px + (var(--ball-speed, .8) * 44px)) !important;
    height: calc(18px + (var(--ball-speed, .8) * 3px)) !important;

    background:
        radial-gradient(
            ellipse 108% 82% at 0% 50%,
            rgba(226, 145, 0, .92) 0%,
            rgba(240, 174, 10, .88) 18%,
            rgba(249, 201, 35, .78) 37%,
            rgba(254, 223, 78, .61) 57%,
            rgba(255, 239, 130, .36) 76%,
            rgba(255, 248, 184, .12) 90%,
            rgba(255, 251, 210, 0) 100%
        ) !important;

    filter: blur(3.8px) !important;
    opacity: .90 !important;

    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle, 0deg) + 180deg))
        scaleY(.86) !important;
}

@media (max-width: 620px) {
    .stage-playfield .arena-ball::before {
        left: 34% !important;
        width: calc(80px + (var(--ball-speed, .8) * 40px)) !important;
        height: calc(31px + (var(--ball-speed, .8) * 5px)) !important;
        filter: blur(7px) !important;
    }

    .stage-playfield .arena-ball::after {
        left: 37% !important;
        width: calc(59px + (var(--ball-speed, .8) * 28px)) !important;
        height: 14px !important;
        filter: blur(3px) !important;
    }
}

/* =========================================================
   HOT-HUG COMET TAIL
   Pulls the plume closer around the pickleball so the heat
   feels attached to the ball itself, not floating behind it.
   ========================================================= */

.stage-playfield .arena-ball {
    filter:
        drop-shadow(0 0 7px rgba(255, 221, 58, .62))
        drop-shadow(0 0 15px rgba(245, 171, 0, .34))
        drop-shadow(0 0 24px rgba(220, 120, 0, .16)) !important;
}

/* Outer plume starts farther underneath the ball */
.stage-playfield .arena-ball::before {
    left: 24% !important;

    width: calc(116px + (var(--ball-speed, .8) * 62px)) !important;
    height: calc(48px + (var(--ball-speed, .8) * 7px)) !important;

    background:
        radial-gradient(
            ellipse 112% 90% at 0% 50%,
            rgba(196, 103, 0, .84) 0%,
            rgba(218, 130, 0, .82) 12%,
            rgba(237, 160, 5, .74) 27%,
            rgba(249, 192, 26, .60) 44%,
            rgba(254, 218, 66, .44) 61%,
            rgba(255, 237, 116, .25) 78%,
            rgba(255, 248, 179, .08) 91%,
            rgba(255, 252, 214, 0) 100%
        ) !important;

    filter: blur(10px) !important;
    opacity: .88 !important;

    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle, 0deg) + 180deg))
        scaleY(.94) !important;
}

/* Inner hot core hugs even closer */
.stage-playfield .arena-ball::after {
    left: 27% !important;

    width: calc(86px + (var(--ball-speed, .8) * 46px)) !important;
    height: calc(22px + (var(--ball-speed, .8) * 4px)) !important;

    background:
        radial-gradient(
            ellipse 110% 86% at 0% 50%,
            rgba(215, 123, 0, .96) 0%,
            rgba(234, 155, 4, .94) 15%,
            rgba(248, 190, 24, .86) 33%,
            rgba(254, 218, 69, .70) 52%,
            rgba(255, 238, 121, .44) 73%,
            rgba(255, 249, 186, .14) 90%,
            rgba(255, 252, 220, 0) 100%
        ) !important;

    filter: blur(4px) !important;
    opacity: .94 !important;

    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle, 0deg) + 180deg))
        scaleY(.92) !important;
}

/* Extra local halo so the ball itself reads as hot */
.stage-playfield .arena-ball {
    box-shadow:
        0 0 0 2px rgba(255, 208, 35, .04),
        0 0 10px rgba(255, 222, 73, .46),
        0 0 20px rgba(245, 170, 0, .22) !important;
}

@media (max-width: 620px) {
    .stage-playfield .arena-ball::before {
        left: 22% !important;
        width: calc(84px + (var(--ball-speed, .8) * 42px)) !important;
        height: calc(35px + (var(--ball-speed, .8) * 5px)) !important;
        filter: blur(8px) !important;
    }

    .stage-playfield .arena-ball::after {
        left: 25% !important;
        width: calc(62px + (var(--ball-speed, .8) * 30px)) !important;
        height: 17px !important;
        filter: blur(3.2px) !important;
    }
}

/* =========================================================
   ROUND PICKLEBALL FIX
   Removes the square glow/background around the PNG.
   The visual effect now follows the circular ball only.
   ========================================================= */

.stage-playfield .arena-ball,
.success-pickleball {
    border-radius: 50% !important;
    overflow: visible !important;

    /* Important: no element box-shadow, because that makes
       the 50x50 image container visible as a square. */
    box-shadow: none !important;

    /* Drop-shadow follows the actual PNG alpha/circular ball. */
    filter:
        drop-shadow(0 0 6px rgba(255, 226, 58, .58))
        drop-shadow(0 0 14px rgba(246, 172, 0, .30))
        drop-shadow(0 0 22px rgba(218, 118, 0, .12)) !important;
}

/* Keep only the ball artwork visible inside the square element. */
.stage-playfield .arena-ball {
    background:
        url("../images/pickleball-enhanced.png")
        center center / 100% 100%
        no-repeat !important;
}

/* Thank-you ball uses the same clean circular artwork. */
.success-pickleball {
    background:
        url("../images/pickleball-enhanced.png")
        center center / 100% 100%
        no-repeat !important;
}

/* The holes are part of the transparent PNG, so no CSS dots. */
.stage-playfield .arena-ball i,
.success-pickleball i {
    display: none !important;
}

/* =========================================================
   COMET HUG FIX V2
   Makes the hot plume begin UNDER and AROUND the ball instead
   of looking detached from its edge.
   ========================================================= */

.stage-playfield .arena-ball {
    overflow: visible !important;
    isolation: isolate;

    /* Circular heat around the actual transparent PNG */
    filter:
        drop-shadow(0 0 8px rgba(255, 231, 82, .72))
        drop-shadow(0 0 18px rgba(245, 177, 10, .42))
        drop-shadow(0 0 30px rgba(218, 118, 0, .18)) !important;
}

/* Outer heat body:
   start well inside the ball so the glow visibly wraps around it */
.stage-playfield .arena-ball::before {
    left: 4% !important;
    top: 50% !important;

    width: calc(128px + (var(--ball-speed, .8) * 64px)) !important;
    height: calc(58px + (var(--ball-speed, .8) * 8px)) !important;

    background:
        radial-gradient(
            ellipse 116% 96% at 8% 50%,
            rgba(205, 108, 0, .88) 0%,
            rgba(226, 139, 0, .84) 11%,
            rgba(242, 169, 8, .76) 24%,
            rgba(251, 199, 32, .62) 41%,
            rgba(255, 224, 78, .46) 59%,
            rgba(255, 240, 128, .26) 76%,
            rgba(255, 248, 181, .09) 90%,
            rgba(255, 252, 216, 0) 100%
        ) !important;

    clip-path: none !important;
    border-radius: 50% !important;
    filter: blur(11px) !important;
    opacity: .90 !important;

    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle, 0deg) + 180deg))
        scaleY(.96) !important;
}

/* Inner hot core:
   also begins inside the ball so the transition has no gap */
.stage-playfield .arena-ball::after {
    left: 10% !important;
    top: 50% !important;

    width: calc(94px + (var(--ball-speed, .8) * 48px)) !important;
    height: calc(27px + (var(--ball-speed, .8) * 4px)) !important;

    background:
        radial-gradient(
            ellipse 112% 90% at 8% 50%,
            rgba(224, 128, 0, .98) 0%,
            rgba(241, 163, 5, .95) 15%,
            rgba(251, 196, 28, .88) 32%,
            rgba(255, 220, 69, .73) 50%,
            rgba(255, 239, 120, .48) 70%,
            rgba(255, 249, 185, .16) 89%,
            rgba(255, 252, 218, 0) 100%
        ) !important;

    clip-path: none !important;
    border-radius: 50% !important;
    filter: blur(4.6px) !important;
    opacity: .96 !important;

    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle, 0deg) + 180deg))
        scaleY(.94) !important;
}

@media (max-width: 620px) {
    .stage-playfield .arena-ball::before {
        left: 2% !important;
        width: calc(90px + (var(--ball-speed, .8) * 40px)) !important;
        height: calc(42px + (var(--ball-speed, .8) * 6px)) !important;
        filter: blur(9px) !important;
    }

    .stage-playfield .arena-ball::after {
        left: 8% !important;
        width: calc(68px + (var(--ball-speed, .8) * 28px)) !important;
        height: 20px !important;
        filter: blur(3.6px) !important;
    }
}

/* =========================================================
   VIDEO-REFERENCE COMET
   Matches the supplied screen recording:
   - soft tapered yellow/gold comet
   - broad glow hugging the ball
   - pointed but heavily feathered far tip
   - darker amber near the ball, lighter yellow through the tail
   ========================================================= */

.stage-playfield .arena-ball {
    overflow: visible !important;
    isolation: isolate;
    filter:
        drop-shadow(0 0 7px rgba(255,231,73,.72))
        drop-shadow(0 0 16px rgba(245,177,8,.38))
        drop-shadow(0 0 26px rgba(216,119,0,.14)) !important;
}

/* both layers physically begin underneath the ball */
.stage-playfield .arena-ball::before,
.stage-playfield .arena-ball::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    z-index: -1 !important;
    pointer-events: none !important;
    transform-origin: 0 50% !important;
    border: 0 !important;
    outline: 0 !important;
}

/* large feathered outer comet */
.stage-playfield .arena-ball::before {
    left: 8% !important;
    width: calc(112px + (var(--ball-speed, .80) * 62px)) !important;
    height: calc(52px + (var(--ball-speed, .80) * 7px)) !important;

    background:
        linear-gradient(
            90deg,
            rgba(213,123,0,.90) 0%,
            rgba(230,147,0,.86) 12%,
            rgba(244,178,8,.78) 27%,
            rgba(252,205,34,.66) 44%,
            rgba(255,225,76,.49) 62%,
            rgba(255,239,123,.28) 78%,
            rgba(255,247,170,.11) 91%,
            rgba(255,250,192,0) 100%
        ) !important;

    /* taper like the video, then blur enough that the edges stay soft */
    clip-path: polygon(0 5%, 100% 48%, 100% 52%, 0 95%) !important;
    border-radius: 45% 100% 100% 45% / 50% 78% 78% 50% !important;
    filter: blur(11px) !important;
    opacity: .87 !important;

    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle, 0deg) + 180deg)) !important;
}

/* concentrated inner glow */
.stage-playfield .arena-ball::after {
    left: 13% !important;
    width: calc(84px + (var(--ball-speed, .80) * 48px)) !important;
    height: calc(25px + (var(--ball-speed, .80) * 4px)) !important;

    background:
        linear-gradient(
            90deg,
            rgba(229,145,0,.98) 0%,
            rgba(244,178,8,.96) 16%,
            rgba(252,205,30,.90) 34%,
            rgba(255,225,70,.76) 52%,
            rgba(255,239,118,.52) 70%,
            rgba(255,248,174,.20) 88%,
            rgba(255,251,206,0) 100%
        ) !important;

    clip-path: polygon(0 12%, 100% 49%, 100% 51%, 0 88%) !important;
    border-radius: 45% 100% 100% 45% / 50% 82% 82% 50% !important;
    filter: blur(4.8px) !important;
    opacity: .94 !important;

    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle, 0deg) + 180deg)) !important;
}

/* subtle hot halo that stays attached to the ball */
.stage-playfield .arena-ball {
    box-shadow: none !important;
}

@media (max-width: 620px) {
    .stage-playfield .arena-ball::before {
        left: 6% !important;
        width: calc(82px + (var(--ball-speed, .80) * 42px)) !important;
        height: calc(39px + (var(--ball-speed, .80) * 5px)) !important;
        filter: blur(9px) !important;
    }

    .stage-playfield .arena-ball::after {
        left: 11% !important;
        width: calc(61px + (var(--ball-speed, .80) * 30px)) !important;
        height: 19px !important;
        filter: blur(3.8px) !important;
    }
}

/* =========================================================
   VIDEO MATCH FIX — compact soft comet
   Short tail (~1.5–2 ball widths), soft triangular silhouette,
   strongest glow where it meets the ball, fading to a soft tip.
   ========================================================= */

.stage-playfield .arena-ball {
    overflow: visible !important;
    isolation: isolate;
    box-shadow: none !important;
    filter:
        drop-shadow(0 0 6px rgba(255, 230, 65, .62))
        drop-shadow(0 0 12px rgba(241, 178, 0, .24)) !important;
}

.stage-playfield .arena-ball::before,
.stage-playfield .arena-ball::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    z-index: -1 !important;
    pointer-events: none !important;
    transform-origin: 0 50% !important;
    border: 0 !important;
    outline: 0 !important;
}

/* Main soft plume */
.stage-playfield .arena-ball::before {
    left: 15% !important;
    width: calc(62px + (var(--ball-speed, .72) * 28px)) !important;
    height: calc(30px + (var(--ball-speed, .72) * 5px)) !important;

    background:
        linear-gradient(
            90deg,
            rgba(228, 151, 0, .92) 0%,
            rgba(244, 184, 4, .88) 20%,
            rgba(252, 211, 35, .78) 43%,
            rgba(255, 231, 83, .58) 65%,
            rgba(255, 244, 138, .28) 83%,
            rgba(255, 249, 185, 0) 100%
        ) !important;

    clip-path: polygon(0 7%, 100% 47%, 100% 53%, 0 93%) !important;
    border-radius: 46% 100% 100% 46% / 50% 82% 82% 50% !important;

    /* Blur is what makes the point feathered instead of a hard triangle. */
    filter: blur(5.5px) !important;
    opacity: .88 !important;

    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle, 0deg) + 180deg)) !important;
}

/* Bright center, also short and softly tapered */
.stage-playfield .arena-ball::after {
    left: 19% !important;
    width: calc(48px + (var(--ball-speed, .72) * 22px)) !important;
    height: calc(14px + (var(--ball-speed, .72) * 3px)) !important;

    background:
        linear-gradient(
            90deg,
            rgba(241, 171, 0, .98) 0%,
            rgba(252, 204, 23, .96) 25%,
            rgba(255, 226, 66, .84) 50%,
            rgba(255, 241, 123, .48) 75%,
            rgba(255, 248, 180, 0) 100%
        ) !important;

    clip-path: polygon(0 14%, 100% 48%, 100% 52%, 0 86%) !important;
    border-radius: 46% 100% 100% 46% / 50% 84% 84% 50% !important;

    filter: blur(2.6px) !important;
    opacity: .92 !important;

    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle, 0deg) + 180deg)) !important;
}

@media (max-width: 620px) {
    .stage-playfield .arena-ball::before {
        left: 13% !important;
        width: calc(50px + (var(--ball-speed, .72) * 20px)) !important;
        height: calc(24px + (var(--ball-speed, .72) * 4px)) !important;
        filter: blur(4.5px) !important;
    }

    .stage-playfield .arena-ball::after {
        left: 17% !important;
        width: calc(38px + (var(--ball-speed, .72) * 16px)) !important;
        height: 11px !important;
        filter: blur(2.2px) !important;
    }
}

/* =========================================================
   FINAL ALIGNED SOFT COMET
   Long enough to read as motion, soft enough to feel like glow,
   and centered directly through the moving ball.
   ========================================================= */

.stage-playfield .arena-ball {
    overflow: visible !important;
    isolation: isolate;
    box-shadow: none !important;
    filter:
        drop-shadow(0 0 7px rgba(255, 231, 72, .68))
        drop-shadow(0 0 15px rgba(243, 176, 0, .30)) !important;
}

.stage-playfield .arena-ball::before,
.stage-playfield .arena-ball::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    z-index: -1 !important;
    pointer-events: none !important;
    transform-origin: 0 50% !important;
    border: 0 !important;
    outline: 0 !important;
}

/* Main soft plume: broad at the ball, feathered to the tip */
.stage-playfield .arena-ball::before {
    left: 22% !important;

    width: calc(98px + (var(--ball-speed, .74) * 42px)) !important;
    height: calc(42px + (var(--ball-speed, .74) * 6px)) !important;

    background:
        radial-gradient(
            ellipse 112% 92% at 0% 50%,
            rgba(219, 132, 0, .88) 0%,
            rgba(235, 158, 0, .84) 14%,
            rgba(247, 187, 10, .76) 30%,
            rgba(253, 211, 42, .64) 47%,
            rgba(255, 229, 83, .48) 64%,
            rgba(255, 241, 128, .28) 80%,
            rgba(255, 247, 169, .10) 91%,
            rgba(255, 250, 200, 0) 100%
        ) !important;

    clip-path: polygon(
        0% 10%,
        100% 48%,
        100% 52%,
        0% 90%
    ) !important;

    border-radius: 48% 100% 100% 48% / 50% 80% 80% 50% !important;

    /* heavy enough blur to remove the hard triangle edge */
    filter: blur(8.5px) !important;
    opacity: .86 !important;

    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle, 0deg) + 180deg)) !important;
}

/* Inner glow, centered on exactly the same axis */
.stage-playfield .arena-ball::after {
    left: 26% !important;

    width: calc(72px + (var(--ball-speed, .74) * 32px)) !important;
    height: calc(19px + (var(--ball-speed, .74) * 3px)) !important;

    background:
        radial-gradient(
            ellipse 110% 88% at 0% 50%,
            rgba(235, 153, 0, .97) 0%,
            rgba(248, 185, 10, .94) 18%,
            rgba(254, 210, 39, .86) 37%,
            rgba(255, 229, 80, .70) 56%,
            rgba(255, 241, 125, .44) 75%,
            rgba(255, 248, 177, .15) 90%,
            rgba(255, 251, 210, 0) 100%
        ) !important;

    clip-path: polygon(
        0% 18%,
        100% 49%,
        100% 51%,
        0% 82%
    ) !important;

    border-radius: 48% 100% 100% 48% / 50% 82% 82% 50% !important;
    filter: blur(3.6px) !important;
    opacity: .93 !important;

    transform:
        translateY(-50%)
        rotate(calc(var(--ball-angle, 0deg) + 180deg)) !important;
}

@media (max-width: 620px) {
    .stage-playfield .arena-ball::before {
        left: 20% !important;
        width: calc(72px + (var(--ball-speed, .74) * 30px)) !important;
        height: calc(31px + (var(--ball-speed, .74) * 5px)) !important;
        filter: blur(7px) !important;
    }

    .stage-playfield .arena-ball::after {
        left: 24% !important;
        width: calc(54px + (var(--ball-speed, .74) * 22px)) !important;
        height: 15px !important;
        filter: blur(3px) !important;
    }
}

/* =========================================================
   SOFTER GRADIENT TAIL — final polish
   Keeps the current size/alignment, only softens the edges
   and smooths the golden-to-light-yellow fade.
   ========================================================= */

.stage-playfield .arena-ball::before {
    background:
        radial-gradient(
            ellipse 115% 94% at 0% 50%,
            rgba(218, 132, 0, .82) 0%,
            rgba(234, 158, 0, .78) 13%,
            rgba(246, 187, 12, .70) 29%,
            rgba(252, 210, 41, .59) 46%,
            rgba(255, 228, 82, .45) 63%,
            rgba(255, 240, 126, .29) 78%,
            rgba(255, 247, 171, .12) 90%,
            rgba(255, 251, 205, 0) 100%
        ) !important;

    clip-path: none !important;
    border-radius: 999px !important;
    filter: blur(11px) !important;
    opacity: .84 !important;
}

.stage-playfield .arena-ball::after {
    background:
        radial-gradient(
            ellipse 112% 90% at 0% 50%,
            rgba(233, 151, 0, .92) 0%,
            rgba(247, 184, 10, .88) 17%,
            rgba(253, 208, 38, .80) 35%,
            rgba(255, 227, 78, .66) 54%,
            rgba(255, 239, 122, .43) 73%,
            rgba(255, 247, 176, .16) 89%,
            rgba(255, 251, 210, 0) 100%
        ) !important;

    clip-path: none !important;
    border-radius: 999px !important;
    filter: blur(4.8px) !important;
    opacity: .90 !important;
}

.stage-playfield .arena-ball {
    filter:
        drop-shadow(0 0 7px rgba(255, 230, 72, .62))
        drop-shadow(0 0 16px rgba(242, 176, 0, .26)) !important;
}

@media (max-width: 620px) {
    .stage-playfield .arena-ball::before {
        filter: blur(9px) !important;
    }

    .stage-playfield .arena-ball::after {
        filter: blur(4px) !important;
    }
}