/* =========================================================
   TOURNAMENT REGISTRATION PAGE STYLES
   ========================================================= */
:root {
    --dark-bg: #0f172a;
    --dark-surface: #1e293b;
    --dark-surface-hover: #263449;
    --accent: #ff4500;
    --accent-dark: #cc3700;
    --accent-soft: #ff6a33;
    --accent-glow: rgba(255, 69, 0, 0.4);
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-placeholder: #64748b;
    --border-subtle: rgba(255, 69, 0, 0.2);
    --border-medium: rgba(255, 69, 0, 0.35);
    --border-strong: rgba(255, 69, 0, 0.55);
    --error: #ef4444;
    --error-bg: rgba(127, 29, 29, 0.3);
    --success: #10b981;
    --success-bg: rgba(16, 185, 129, 0.2);
    --shadow-card: 0 20px 50px -12px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 0 60px -10px var(--accent-glow);
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 10px;
    --font-family: 'Segoe UI', 'Inter', system-ui, -apple-system, sans-serif;
}

/* ===== MAIN CONTAINER ===== */
.reg-page-container {
    position: relative;
    top: 100px;
    z-index: 1;
    width: 100%;
    max-width: 100vw;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-medium);
    box-shadow: var(--shadow-card), var(--shadow-glow);
    padding: 0;
    overflow: hidden;
    margin-bottom: 150px; /* Space for footer */
}

.hidden {
    display: none !important;
}

/* ===== HEADER ===== */
.reg-page-header {
    padding: 2.5rem 2.5rem 2rem;
    border-bottom: 2px solid var(--border-subtle);
    background: linear-gradient(180deg, rgba(255, 69, 0, 0.05) 0%, transparent 100%);
    position: relative;
}

.reg-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 69, 0, 0.15);
    border: 1px solid var(--border-medium);
    border-radius: 60px;
    padding: 0.4rem 1.2rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fdba74;
    margin-bottom: 1.2rem;
}

.reg-page-title {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    line-height: 1.15;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.reg-page-title .reg-trophy-icon {
    font-size: 2.8rem;
    filter: drop-shadow(0 0 15px var(--accent-glow));
}

.reg-page-subtitle {
    color: var(--text-secondary);
    font-size: 1.05rem;
    font-weight: 400;
}

.reg-change-tournament-btn {
    margin-top: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 69, 0, 0.12);
    border: 1.5px solid var(--border-medium);
    color: #fdba74;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.3px;
    padding: 0.5rem 1.2rem;
    border-radius: 60px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    font-family: var(--font-family);
}

.reg-change-tournament-btn:hover {
    background: rgba(255, 69, 0, 0.22);
    border-color: var(--border-strong);
    transform: translateY(-1px);
}

/* ===== TOURNAMENT INFO BAR ===== */
.reg-tournament-info-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.2rem;
    padding: 1.5rem 2.5rem;
    background: rgba(30, 41, 59, 0.5);
    border-bottom: 1px solid var(--border-subtle);
    margin: 0;
}

.reg-info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.reg-info-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.reg-info-value {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
}

/* ===== FORM SECTION ===== */
.reg-form-wrapper {
    padding: 2.5rem;
    /* Only opacity/filter are transitioned. pointer-events is never
       transitioned - it is toggled instantly by the .reg-form-locked
       class below, which is what keeps the fields reliably clickable. */
    transition: opacity 0.25s ease, filter 0.25s ease;
}

/* Locked state: visually dims and disables interaction.
   pointer-events is set explicitly (not implied by opacity) so the
   fields never end up in a stuck, half-interactive state. */
.reg-form-wrapper.reg-form-locked {
    opacity: 0.35;
    filter: blur(1.5px) saturate(0.6);
    pointer-events: none;
    user-select: none;
}

.reg-form-wrapper:not(.reg-form-locked) {
    pointer-events: auto;
}

.reg-form-section-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: -0.01em;
}

.reg-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 2rem;
    margin-bottom: 2rem;
}

.reg-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    position: relative;
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.reg-form-field--full {
    grid-column: 1 / -1;
}

.reg-form-field label,
.reg-form-field legend {
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    padding: 0;
}

.reg-required-star {
    color: var(--accent);
    font-size: 1.1rem;
    font-weight: 700;
}

.reg-optional-tag {
    color: var(--text-muted);
    font-size: 0.7rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

.reg-email-warn {
    color: #fca5a5;
    font-weight: 700;
    animation: regEmailWarning 1.4s ease-in-out infinite;
    font-size: 0.62rem;
    text-transform: none;
    letter-spacing: 0.2px;
}

@media (prefers-reduced-motion: reduce) {
    .reg-email-warn {
        animation: none;
    }
}

@keyframes regEmailWarning {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

.reg-form-input {
    background: rgba(30, 41, 59, 0.8);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.85rem 1.2rem;
    font-size: 0.95rem;
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    width: 100%;
    font-family: var(--font-family);
    cursor: text;
    pointer-events: auto;
}

.reg-form-input::placeholder {
    color: rgb(123, 122, 122) !important;
    font-weight: 400;
    font-size: 0.9rem;
}

.reg-form-input:focus,
.reg-form-input:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(255, 69, 0, 0.15), 0 0 20px -5px var(--accent-glow);
    background: rgba(30, 41, 59, 0.95);
}

.reg-form-input.reg-input-invalid {
    border-color: var(--error);
    background: var(--error-bg);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.reg-error-message {
    color: #fca5a5;
    font-size: 0.75rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 1.2rem;
    letter-spacing: 0.2px;
}

select.reg-form-input {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.2rem center;
    padding-right: 2.5rem;
}

select.reg-form-input option {
    background: var(--dark-surface);
    color: var(--text-primary);
}

/* Radio Group */
.reg-radio-group {
    display: flex;
    gap: 20px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.reg-radio-group.reg-radio-group-invalid {
    border: 1px solid var(--error);
    border-radius: var(--radius-sm);
    padding: 8px;
    background: var(--error-bg);
}

.reg-radio-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 60px;

    background: rgba(30, 41, 59, 0.6);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    font-weight: 600;
    color: var(--text-secondary);
    pointer-events: auto;
}

.reg-radio-option:hover {
    background: rgba(255, 69, 0, 0.1);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.reg-radio-option:has(input:checked) {
    background: rgba(255, 69, 0, 0.18);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.reg-radio-option input[type="radio"] {
    cursor: pointer;
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    pointer-events: auto;
    margin: 0;
    flex-shrink: 0;
}

.reg-radio-option input[type="radio"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* ===== FEE SECTION ===== */
.reg-fee-section {
    background: rgba(255, 69, 0, 0.08);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-lg);
    padding: 1.8rem 2.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 0 35px -8px var(--accent-glow);
    position: relative;
    overflow: hidden;
    animation: regSoftGlow 3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .reg-fee-section {
        animation: none;
    }
}

@keyframes regSoftGlow {
    0%, 100% { box-shadow: 0 0 30px -8px var(--accent-glow); }
    50% { box-shadow: 0 0 50px -5px var(--accent-glow); }
}

.reg-fee-label {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #fdba74;
}

.reg-fee-icon {
    font-size: 2.2rem;
    filter: drop-shadow(0 0 12px var(--accent-glow));
}

.reg-fee-amount {
    text-align: right;
}

.reg-fee-amount-value {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.reg-fee-amount-sub {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 0.2rem;
}

/* ===== SUBMIT BUTTON ===== */
.reg-submit-btn {
    background: linear-gradient(145deg, var(--accent) 0%, var(--accent-dark) 100%);
    border-radius: 60px;
    padding: 1.2rem 2rem;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.5px;
    color: white;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    border: 1px solid var(--border-strong);
    box-shadow: 0 10px 30px -5px var(--accent-glow);
    font-family: var(--font-family);
    width: auto;
    min-width: 250px;
    margin: 0 auto;
    pointer-events: auto;
}

.reg-submit-btn:hover {
    background: linear-gradient(145deg, #ff6a33 0%, #b02e00 100%);
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -6px var(--accent-glow);
}

.reg-submit-btn:active {
    transform: translateY(0);
    box-shadow: 0 8px 20px -4px var(--accent-glow);
}

.reg-submit-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.reg-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* =========================================================
   TOURNAMENT SELECTION MODAL
   ========================================================= */
.reg-tourney-modal-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(6, 10, 20, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    z-index: 999999;
    padding: 20px;
    transition: opacity 0.25s ease;

    /* --- BUG FIX -------------------------------------------------
       Previously this overlay relied only on `visibility: hidden`
       (toggled together with opacity via a CSS transition) to stop
       it from blocking clicks when "closed". Per the CSS spec,
       a transitioned `visibility` only flips to `hidden` at the very
       END of the transition, so for the full transition duration -
       and indefinitely if the tab is backgrounded and the browser
       throttles/pauses the transition - the overlay stayed fully
       interactive (pointer-events: auto by default) even though it
       was invisible. That is exactly what caused inputs and radio
       buttons underneath (including the cursor itself) to randomly
       stop responding until something forced the transition to
       finish. Fix: control interactivity directly and instantly with
       `pointer-events`, never leave it to the opacity/visibility
       transition timing. -------------------------------------------- */
    visibility: hidden;
    pointer-events: none;
}

.reg-tourney-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.reg-tourney-modal {
    position: relative;
    width: min(480px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%);
    border: 1.5px solid var(--border-medium);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card), 0 0 70px -12px var(--accent-glow);
    padding: 2.2rem 2rem;
    transform: scale(0.9) translateY(16px);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.reg-tourney-modal-overlay.active .reg-tourney-modal {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.reg-tourney-modal-header {
    text-align: center;
    margin-bottom: 1.6rem;
}

.reg-tourney-modal-icon {
    display: inline-block;
    font-size: 2.6rem;
    filter: drop-shadow(0 0 16px var(--accent-glow));
    animation: regTrophyBounce 2.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .reg-tourney-modal-icon {
        animation: none;
    }
}

@keyframes regTrophyBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-6px) rotate(-4deg); }
}

.reg-tourney-modal-header h2 {
    margin-top: 0.6rem;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.reg-tourney-modal-header p {
    margin-top: 0.3rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.reg-tourney-modal-body {
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reg-tourney-loading {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    padding: 1.2rem 0;
}

.reg-tourney-spinner {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 4px solid rgba(255, 69, 0, 0.15);
    border-top-color: var(--accent);
    animation: regTourneySpin 0.85s linear infinite;
}

@keyframes regTourneySpin {
    to { transform: rotate(360deg); }
}

.reg-tourney-loading p {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
}

.reg-tourney-select-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.reg-tourney-select-wrap label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.reg-tourney-select {
    width: 100%;
    background: rgba(15, 23, 42, 0.9);
    border: 1.5px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: 0.85rem 1.2rem;
    font-size: 0.95rem;
    color: var(--text-primary);
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ff8a4c' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.2rem center;
    padding-right: 2.5rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: var(--font-family);
    pointer-events: auto;
}

.reg-tourney-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(255, 69, 0, 0.15);
}

.reg-tourney-select option {
    background: var(--dark-surface);
    color: var(--text-primary);
}

.reg-tourney-preview {
    margin-top: 0.4rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}

.reg-tourney-preview.visible {
    max-height: 200px;
    opacity: 1;
    padding: 1rem 1.2rem;
    background: rgba(255, 69, 0, 0.06);
}

.reg-tourney-preview-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0;
    font-size: 0.85rem;
}

.reg-tourney-preview-row + .reg-tourney-preview-row {
    border-top: 1px dashed var(--border-subtle);
}

.reg-tourney-preview-label {
    color: var(--text-muted);
    font-weight: 600;
}

.reg-tourney-preview-value {
    color: var(--text-primary);
    font-weight: 700;
}

.reg-tourney-preview-value.accent {
    color: #fdba74;
}

.reg-tourney-empty-state {
    width: 100%;
    text-align: center;
    padding: 1rem 0.5rem;
}

.reg-tourney-empty-icon {
    font-size: 3rem;
    margin-bottom: 0.8rem;
    display: inline-block;
    animation: regEmptyFloat 2.6s ease-in-out infinite;
    filter: drop-shadow(0 0 14px var(--accent-glow));
}

@media (prefers-reduced-motion: reduce) {
    .reg-tourney-empty-icon {
        animation: none;
    }
}

@keyframes regEmptyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.reg-tourney-empty-state h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.reg-tourney-empty-state p {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.reg-tourney-modal-actions {
    margin-top: 1.6rem;
}

.reg-tourney-proceed-btn {
    width: 100%;
    background: linear-gradient(145deg, var(--accent) 0%, var(--accent-dark) 100%);
    border: 1px solid var(--border-strong);
    border-radius: 60px;
    padding: 0.95rem 1.5rem;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.4px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    box-shadow: 0 10px 26px -6px var(--accent-glow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    font-family: var(--font-family);
    pointer-events: auto;
}

.reg-tourney-proceed-btn .reg-arrow {
    transition: transform 0.2s ease;
}

.reg-tourney-proceed-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px -6px var(--accent-glow);
}

.reg-tourney-proceed-btn:hover:not(:disabled) .reg-arrow {
    transform: translateX(4px);
}

.reg-tourney-proceed-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
    pointer-events: none;
}

.reg-tourney-proceed-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .reg-page-container {
        top: 80px;
        margin-bottom: 100px;
    }
    .reg-form-grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
}

@media (max-width: 768px) {
    .reg-page-header {
        padding: 1.8rem 1.5rem 1.5rem;
    }
    .reg-page-title {
        font-size: 2rem;
    }
    .reg-tournament-info-bar {
        padding: 1.2rem 1.5rem;
        gap: 1rem;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
    .reg-form-wrapper {
        padding: 1.8rem 1.5rem;
    }
    .reg-fee-section {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.5rem;
        gap: 1rem;
    }
    .reg-fee-amount {
        text-align: left;
    }
    .reg-fee-amount-value {
        font-size: 2.2rem;
    }
    .reg-submit-btn {
        padding: 1rem 1.5rem;
        font-size: 1rem;
        min-width: 200px;
    }
    .reg-tourney-modal {
        padding: 1.8rem 1.4rem;
    }
}

@media (max-width: 480px) {
    .reg-page-header {
        padding: 1.5rem 1.2rem 1.2rem;
    }
    .reg-page-title {
        font-size: 1.6rem;
    }
    .reg-page-title .reg-trophy-icon {
        font-size: 2rem;
    }
    .reg-tournament-info-bar {
        grid-template-columns: 1fr;
        gap: 0.8rem;
        padding: 1rem 1.2rem;
    }
    .reg-form-wrapper {
        padding: 1.5rem 1.2rem;
    }
    .reg-fee-section {
        padding: 1.2rem;
    }
    .reg-fee-amount-value {
        font-size: 1.8rem;
    }
    .reg-radio-group {
        flex-direction: column;
        gap: 10px;
    }
    .reg-submit-btn {
        width: 100%;
        min-width: unset;
    }
}


/* no tournament modal */

/* ================================
   NO TOURNAMENT EMPTY STATE
================================ */

.reg-tourney-empty {
    min-height: 360px;
    padding: 45px 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    animation: emptyFadeIn 0.6s ease forwards;
}

@keyframes emptyFadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

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


/* Trophy */

.empty-trophy-wrapper {
    position: relative;
    width: 150px;
    height: 150px;
    margin-bottom: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: linear-gradient(
        135deg,
        #f4f0ff,
        #ebe5ff
    );

    animation: trophyFloat 3s ease-in-out infinite;
}

.empty-trophy-wrapper::before {
    content: "";
    position: absolute;
    inset: 12px;

    border: 2px dashed #c9bfff;
    border-radius: 50%;

    animation: trophyRotate 12s linear infinite;
}

.empty-trophy {
    font-size: 72px;
    position: relative;
    z-index: 2;

    filter: drop-shadow(0 8px 10px rgba(91, 75, 160, 0.18));

    animation: trophyBounce 2.5s ease-in-out infinite;
}


/* Floating trophy */

@keyframes trophyFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes trophyBounce {
    0%,
    100% {
        transform: rotate(-3deg) scale(1);
    }

    50% {
        transform: rotate(3deg) scale(1.05);
    }
}

@keyframes trophyRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* Decorative stars */

.empty-star {
    position: absolute;
    font-size: 20px;
    z-index: 3;
    animation: starPulse 1.8s ease-in-out infinite;
}

.star-1 {
    top: 15px;
    right: 5px;
    color: #a78bfa;
}

.star-2 {
    bottom: 20px;
    left: 0;
    color: #f59eae;
    animation-delay: 0.5s;
}

.star-3 {
    top: 45px;
    left: 8px;
    color: #60a5fa;
    animation-delay: 1s;
}

@keyframes starPulse {
    0%,
    100% {
        opacity: 0.4;
        transform: scale(0.8) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.2) rotate(15deg);
    }
}


/* Heading */

.reg-tourney-empty h3 {
    margin: 5px 0 10px;

    font-size: 23px;
    font-weight: 700;

    color: #1e293b;

    animation: textSlideUp 0.6s ease 0.15s both;
}


/* Description */

.reg-tourney-empty p {
    max-width: 500px;

    margin: 0;

    font-size: 15px;
    line-height: 1.6;

    color: #64748b;

    animation: textSlideUp 0.6s ease 0.25s both;
}

.empty-subtext {
    display: block;

    margin-top: 5px;

    font-size: 14px;
    color: #94a3b8;

    animation: textSlideUp 0.6s ease 0.35s both;
}

@keyframes textSlideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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


/* Animated dots */

.empty-dots {
    display: flex;
    gap: 7px;
    margin-top: 22px;
}

.empty-dots span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #c4b5fd;

    animation: dotPulse 1.4s ease-in-out infinite;
}

.empty-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.empty-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes dotPulse {
    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.3);
    }
}


/* Mobile */

@media (max-width: 576px) {
    .reg-tourney-empty {
        min-height: 320px;
        padding: 35px 18px;
    }

    .empty-trophy-wrapper {
        width: 125px;
        height: 125px;
    }

    .empty-trophy {
        font-size: 60px;
    }

    .reg-tourney-empty h3 {
        font-size: 20px;
    }

    .reg-tourney-empty p {
        font-size: 14px;
    }
}