/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-l0necj2l0n] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-l0necj2l0n] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-1mncxnm1af],
.components-reconnect-repeated-attempt-visible[b-1mncxnm1af],
.components-reconnect-failed-visible[b-1mncxnm1af],
.components-pause-visible[b-1mncxnm1af],
.components-resume-failed-visible[b-1mncxnm1af],
.components-rejoining-animation[b-1mncxnm1af] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-1mncxnm1af],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-1mncxnm1af],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-1mncxnm1af],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-1mncxnm1af],
#components-reconnect-modal.components-reconnect-retrying[b-1mncxnm1af],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-1mncxnm1af],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-1mncxnm1af],
#components-reconnect-modal.components-reconnect-failed[b-1mncxnm1af],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-1mncxnm1af] {
    display: block;
}


#components-reconnect-modal[b-1mncxnm1af] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-1mncxnm1af 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-1mncxnm1af 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-1mncxnm1af 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-1mncxnm1af]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-1mncxnm1af 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-1mncxnm1af {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-1mncxnm1af {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-1mncxnm1af {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-1mncxnm1af] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-1mncxnm1af] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-1mncxnm1af] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-1mncxnm1af] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-1mncxnm1af] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-1mncxnm1af] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-1mncxnm1af] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-1mncxnm1af 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-1mncxnm1af] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-1mncxnm1af {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Shared/CardFramePicker.razor.rz.scp.css */
/* CardFramePicker — minimal scoped styles */
.card-picker-section[b-3n0u2czqzq] {
    margin: 1.5rem 0;
}

.card-picker-section h3[b-3n0u2czqzq] {
    margin: 0 0 0.25rem;
}
/* /Components/Shared/PlayerCard.razor.rz.scp.css */
/* ============================================================
   Player Card Component Styles
   Two card styles:
   1. "playing" — Original gradient/suit playing card design
   2. "trading" — Baseball trading card with ribbons, pickleballs, stripes
   
   NOTE: Blazor scoped CSS uses ::deep for child/nested elements.
   ============================================================ */

/* ── Shared Base ── */
.player-card[b-yttc4xp2m6] {
    position: relative;
    border-radius: 20px;
    border: 3px solid;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

.player-card:hover[b-yttc4xp2m6] {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow, 0 8px 32px rgba(0, 0, 0, 0.3));
}

.player-card-selected[b-yttc4xp2m6] {
    transform: scale(1.04) rotate(-1deg);
    box-shadow: var(--card-shadow), 0 0 0 3px rgba(255, 255, 255, 0.3);
}

/* ── Size Variants ── */
.player-card-sm[b-yttc4xp2m6] { width: 140px; height: 200px; }
.player-card-md[b-yttc4xp2m6] { width: 195px; height: 278px; }
.player-card-lg[b-yttc4xp2m6] { width: 280px; height: 400px; }

/* ============================================================
   PLAYING CARD STYLE (Original)
   ============================================================ */

.player-card[b-yttc4xp2m6]  .card-shine {
    position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: 18px;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.25) 0%, transparent 40%, transparent 60%, rgba(255, 255, 255, 0.05) 100%);
}
.player-card[b-yttc4xp2m6]  .card-shine-dark {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.08) 0%, transparent 40%, transparent 60%, rgba(255, 255, 255, 0.03) 100%);
}

/* ── Suit Icons ── */
.player-card[b-yttc4xp2m6]  .card-suit { position: absolute; z-index: 4; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); }
.player-card[b-yttc4xp2m6]  .card-suit img { width: 100%; height: 100%; }
.player-card[b-yttc4xp2m6]  .card-suit-tl { top: 10px; left: 10px; }
.player-card[b-yttc4xp2m6]  .card-suit-br { bottom: 10px; right: 10px; transform: rotate(180deg); }
.player-card-sm[b-yttc4xp2m6]  .card-suit { width: 12px; height: 12px; }
.player-card-sm[b-yttc4xp2m6]  .card-suit-tl { top: 7px; left: 7px; }
.player-card-sm[b-yttc4xp2m6]  .card-suit-br { bottom: 7px; right: 7px; }
.player-card-md[b-yttc4xp2m6]  .card-suit { width: 16px; height: 16px; }
.player-card-lg[b-yttc4xp2m6]  .card-suit { width: 22px; height: 22px; }
.player-card-lg[b-yttc4xp2m6]  .card-suit-tl { top: 14px; left: 14px; }
.player-card-lg[b-yttc4xp2m6]  .card-suit-br { bottom: 14px; right: 14px; }

/* ── Frame Label ── */
.player-card[b-yttc4xp2m6]  .card-frame-label {
    position: absolute; top: 12px; left: 0; right: 0; text-align: center; z-index: 4;
    font-family: 'Lilita One', 'Fredoka', system-ui, cursive;
    font-size: 0.5rem; color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.12em; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.player-card[b-yttc4xp2m6]  .card-frame-label-dark { color: var(--card-accent, rgba(255, 255, 255, 0.5)); opacity: 0.7; }
.player-card-sm[b-yttc4xp2m6]  .card-frame-label { font-size: 0.4rem; top: 8px; }
.player-card-lg[b-yttc4xp2m6]  .card-frame-label { font-size: 0.65rem; top: 18px; }

/* ── Photo Area ── */
.player-card[b-yttc4xp2m6]  .card-photo-frame {
    position: absolute; left: 50%; transform: translateX(-50%);
    border-radius: 14px; overflow: hidden; border: 3px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), inset 0 0 20px rgba(0, 0, 0, 0.05);
    z-index: 3; background: rgba(255, 255, 255, 0.15);
}
.player-card[b-yttc4xp2m6]  .card-photo-dark { background: rgba(255, 255, 255, 0.06); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(0, 0, 0, 0.05); }
.player-card-sm[b-yttc4xp2m6]  .card-photo-frame { top: 24px; width: 96px; height: 110px; }
.player-card-md[b-yttc4xp2m6]  .card-photo-frame { top: 35px; width: 130px; height: 138px; }
.player-card-lg[b-yttc4xp2m6]  .card-photo-frame { top: 50px; width: 190px; height: 200px; }
.player-card[b-yttc4xp2m6]  .card-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.player-card[b-yttc4xp2m6]  .card-photo-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); }
.player-card[b-yttc4xp2m6]  .card-placeholder-dark { background: rgba(255, 255, 255, 0.03); }
.player-card[b-yttc4xp2m6]  .card-placeholder-svg { width: 55%; height: 55%; opacity: 0.25; }
.player-card[b-yttc4xp2m6]  .card-placeholder-dark .card-placeholder-svg { opacity: 0.15; }

/* ── Nickname Banner ── */
.player-card[b-yttc4xp2m6]  .card-nickname-wrap {
    position: absolute; left: 50%; transform: translateX(-50%); z-index: 5;
    white-space: nowrap; text-align: center; pointer-events: none;
}
.player-card[b-yttc4xp2m6]  .card-nickname-wrap > * { pointer-events: auto; }
.player-card-sm[b-yttc4xp2m6]  .card-nickname-wrap { bottom: 18px; }
.player-card-md[b-yttc4xp2m6]  .card-nickname-wrap { bottom: 26px; }
.player-card-lg[b-yttc4xp2m6]  .card-nickname-wrap { bottom: 42px; }
.player-card[b-yttc4xp2m6]  .card-nickname-pill {
    display: flex; align-items: center; align-content: center; flex-wrap: nowrap;
    padding: 4px 10px; background: var(--card-name-bg, rgba(0, 0, 0, 0.5));
    border-radius: 30px; backdrop-filter: blur(8px); border: 1.5px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); vertical-align: middle; line-height: initial;
}
.player-card-sm[b-yttc4xp2m6]  .card-nickname-pill { padding: 2px 8px; border-width: 1px; }
.player-card-lg[b-yttc4xp2m6]  .card-nickname-pill { padding: 7px 22px; }
.player-card[b-yttc4xp2m6]  .card-nickname-text {
    font-family: 'Lilita One', 'Fredoka', 'Comic Sans MS', cursive;
    font-weight: 400; color: var(--card-name-color, #fff);
    letter-spacing: 0.04em; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.player-card-sm[b-yttc4xp2m6]  .card-nickname-text { font-size: 0.55rem; }
.player-card-md[b-yttc4xp2m6]  .card-nickname-text { font-size: 0.72rem; }
.player-card-lg[b-yttc4xp2m6]  .card-nickname-text { font-size: 1.1rem; }

/* ── Playing Card Tagline ── */
.player-card[b-yttc4xp2m6]  .card-tagline {
    margin-top: 2px; text-align: center;
}
.player-card[b-yttc4xp2m6]  .card-tagline-text {
    font-family: 'Lilita One', 'Fredoka', 'Comic Sans MS', cursive;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.03em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: block; max-width: 100%;
}
.player-card-sm[b-yttc4xp2m6]  .card-tagline { margin-top: 1px; }
.player-card-sm[b-yttc4xp2m6]  .card-tagline-text { font-size: 0.35rem; }
.player-card-md[b-yttc4xp2m6]  .card-tagline-text { font-size: 0.48rem; }
.player-card-lg[b-yttc4xp2m6]  .card-tagline-text { font-size: 0.75rem; }

/* ── Bottom Suit Trio ── */
.player-card[b-yttc4xp2m6]  .card-suit-trio { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 3px; z-index: 4; opacity: 0.4; }
.player-card-sm[b-yttc4xp2m6]  .card-suit-trio { bottom: 8px; }
.player-card-sm[b-yttc4xp2m6]  .card-suit-trio img { width: 6px; height: 6px; }
.player-card-md[b-yttc4xp2m6]  .card-suit-trio { bottom: 10px; }
.player-card-md[b-yttc4xp2m6]  .card-suit-trio img { width: 8px; height: 8px; }
.player-card-lg[b-yttc4xp2m6]  .card-suit-trio { bottom: 16px; gap: 5px; }
.player-card-lg[b-yttc4xp2m6]  .card-suit-trio img { width: 12px; height: 12px; }

/* ── Background Patterns ── */
.player-card[b-yttc4xp2m6]  .card-pattern { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.player-card[b-yttc4xp2m6]  .card-pattern-waves { background: repeating-linear-gradient(0deg, transparent, transparent 46px, rgba(255, 255, 255, 0.06) 46px, rgba(255, 255, 255, 0.06) 48px); }
.player-card[b-yttc4xp2m6]  .card-pattern-flames { background: radial-gradient(ellipse 60% 30% at 20% 95%, rgba(255, 200, 0, 0.08) 0%, transparent 70%), radial-gradient(ellipse 50% 25% at 50% 98%, rgba(255, 150, 0, 0.06) 0%, transparent 60%), radial-gradient(ellipse 40% 20% at 80% 92%, rgba(255, 200, 0, 0.07) 0%, transparent 65%); }
.player-card[b-yttc4xp2m6]  .card-pattern-bolts { background: repeating-linear-gradient(90deg, transparent, transparent 30px, rgba(255, 140, 0, 0.04) 30px, rgba(255, 140, 0, 0.04) 31px); }
.player-card[b-yttc4xp2m6]  .card-pattern-zigzag { background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%) -20px 0, linear-gradient(225deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%) -20px 0, linear-gradient(315deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%), linear-gradient(45deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%); background-size: 40px 40px; }
.player-card[b-yttc4xp2m6]  .card-pattern-dots { background-image: radial-gradient(rgba(255, 255, 255, 0.08) 2px, transparent 2px); background-size: 20px 20px; }
.player-card[b-yttc4xp2m6]  .card-pattern-bubbles { background: radial-gradient(circle 20px at 25% 15%, transparent 18px, rgba(255, 255, 255, 0.06) 18px, transparent 20px), radial-gradient(circle 14px at 70% 30%, transparent 12px, rgba(255, 255, 255, 0.05) 12px, transparent 14px), radial-gradient(circle 18px at 40% 60%, transparent 16px, rgba(255, 255, 255, 0.06) 16px, transparent 18px), radial-gradient(circle 12px at 80% 75%, transparent 10px, rgba(255, 255, 255, 0.05) 10px, transparent 12px), radial-gradient(circle 16px at 15% 85%, transparent 14px, rgba(255, 255, 255, 0.06) 14px, transparent 16px); }
.player-card[b-yttc4xp2m6]  .card-pattern-grid { background-image: linear-gradient(rgba(0, 212, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 212, 255, 0.06) 1px, transparent 1px); background-size: 28px 28px; }
.player-card[b-yttc4xp2m6]  .card-pattern-confetti { background-image: linear-gradient(30deg, rgba(255, 214, 0, 0.08) 2px, transparent 2px), linear-gradient(150deg, rgba(0, 245, 212, 0.06) 2px, transparent 2px), linear-gradient(70deg, rgba(255, 105, 180, 0.07) 2px, transparent 2px); background-size: 40px 60px, 50px 45px, 35px 55px; }
.player-card[b-yttc4xp2m6]  .card-pattern-leaves { background: radial-gradient(ellipse 20px 8px at 30% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 100%), radial-gradient(ellipse 16px 6px at 70% 45%, rgba(255, 255, 255, 0.04) 0%, transparent 100%), radial-gradient(ellipse 18px 7px at 25% 70%, rgba(255, 255, 255, 0.05) 0%, transparent 100%), radial-gradient(ellipse 14px 5px at 80% 85%, rgba(255, 255, 255, 0.04) 0%, transparent 100%); }
.player-card[b-yttc4xp2m6]  .card-pattern-toxicdrip { background: repeating-linear-gradient(90deg, transparent, transparent 28px, rgba(57, 255, 20, 0.04) 28px, rgba(57, 255, 20, 0.04) 29px), radial-gradient(circle 30px at 30% 40%, rgba(57, 255, 20, 0.04) 0%, transparent 100%), radial-gradient(circle 40px at 70% 70%, rgba(57, 255, 20, 0.03) 0%, transparent 100%); }

/* ============================================================
   TRADING CARD STYLE
   ============================================================ */

.tc-card[b-yttc4xp2m6] {
    border: none !important;
    border-radius: 16px;
    overflow: hidden;
}

/* ── Outer border ── */
.tc-card[b-yttc4xp2m6]  .tc-border {
    position: absolute; inset: 0; border-radius: 16px;
    border: 7px solid var(--tc-border); z-index: 1; pointer-events: none;
}

/* ── Inner pinstripe ── */
.tc-card[b-yttc4xp2m6]  .tc-inner-border {
    position: absolute; inset: 6px; border-radius: 11px;
    border: 2px solid var(--tc-inner-border); z-index: 6; pointer-events: none;
}

/* ── Edge stripe backgrounds ── */
.tc-card[b-yttc4xp2m6]  .tc-stripe-bg {
    position: absolute; top: 8px; bottom: 8px; width: 12px;
    z-index: 2; pointer-events: none; opacity: 0.3;
}
.tc-card[b-yttc4xp2m6]  .tc-stripe-bg-left { left: 8px; }
.tc-card[b-yttc4xp2m6]  .tc-stripe-bg-right { right: 8px; }

/* ── Star stripes ── */
.tc-card[b-yttc4xp2m6]  .tc-stripe {
    position: absolute; top: 8px; bottom: 8px; width: 12px;
    z-index: 5; pointer-events: none;
    display: flex; flex-direction: column; align-items: center;
    justify-content: space-evenly; padding: 25px 0;
    font-size: 0.4rem; opacity: 0.6; line-height: 1;
}
.tc-card[b-yttc4xp2m6]  .tc-stripe-left { left: 8px; }
.tc-card[b-yttc4xp2m6]  .tc-stripe-right { right: 8px; }

/* ── Photo ── */
.tc-card[b-yttc4xp2m6]  .tc-photo {
    position: absolute; z-index: 3; overflow: hidden; border-radius: 4px;
    border: 2px solid rgba(255,255,255,0.3);
    box-shadow: inset 0 0 15px rgba(0,0,0,0.12);
}
.tc-card[b-yttc4xp2m6]  .tc-photo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-card[b-yttc4xp2m6]  .tc-photo-placeholder {
    width: 100%; height: 100%; display: flex;
    align-items: center; justify-content: center;
    font-size: 2.5rem; background: rgba(255,255,255,0.06);
}

/* ── Corner pickleballs ── */
.tc-card[b-yttc4xp2m6]  .tc-ball {
    position: absolute; z-index: 7; pointer-events: none;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3));
}

/* ── Bottom section ── */
.tc-card[b-yttc4xp2m6]  .tc-bottom {
    position: absolute; left: 0; right: 0; bottom: 0;
    z-index: 8; text-align: center;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
/* Heights match the photo's bottom value (= gap below photo) */
.player-card-sm.tc-card[b-yttc4xp2m6]  .tc-bottom { height: 48px; padding: 0 8px; }
.player-card-md.tc-card[b-yttc4xp2m6]  .tc-bottom { height: 62px; padding: 0 14px; }
.player-card-lg.tc-card[b-yttc4xp2m6]  .tc-bottom { height: 88px; padding: 0 20px; }
.tc-card[b-yttc4xp2m6]  .tc-sport-banner {
    display: inline-block; padding: 2px 16px 3px;
    margin-bottom: 2px; border-radius: 3px;
}
.tc-card[b-yttc4xp2m6]  .tc-sport-text {
    font-family: 'Bangers', 'Lilita One', cursive;
    font-size: 0.75rem; letter-spacing: 0.06em;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.25);
    text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: block; max-width: 100%;
}
.tc-card[b-yttc4xp2m6]  .tc-nameplate {
    padding: 1px 8px 2px; border-radius: 3px; display: block;
}
.tc-card[b-yttc4xp2m6]  .tc-nameplate-text {
    font-family: 'Oswald', 'Bebas Neue', system-ui, sans-serif;
    font-weight: 700; font-size: 0.5rem;
    letter-spacing: 0.1em; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: block;
}

/* ── Glossy shine ── */
.tc-card[b-yttc4xp2m6]  .tc-shine {
    position: absolute; inset: 0; z-index: 9; pointer-events: none; border-radius: 16px;
    background: linear-gradient(155deg, rgba(255,255,255,0.15) 0%, transparent 30%, transparent 65%, rgba(255,255,255,0.03) 100%);
}

/* ── Neon glow effect ── */
.tc-neon[b-yttc4xp2m6]::after {
    content: ''; position: absolute; inset: -3px;
    border-radius: 19px; z-index: -1;
    background: var(--tc-border);
    filter: blur(10px); opacity: 0.35;
    transition: opacity 0.3s;
}
.tc-neon:hover[b-yttc4xp2m6]::after { opacity: 0.6; }
.tc-neon[b-yttc4xp2m6]  .tc-ball { filter: drop-shadow(0 0 6px var(--tc-border)); }

/* ============================================================
   TRADING CARD — SM (140×200)
   ============================================================ */
.player-card-sm.tc-card[b-yttc4xp2m6]  .tc-border { border-width: 5px; }
.player-card-sm.tc-card[b-yttc4xp2m6]  .tc-inner-border { inset: 4px; border-width: 1.5px; border-radius: 10px; }
.player-card-sm.tc-card[b-yttc4xp2m6]  .tc-stripe-bg { width: 9px; top: 5px; bottom: 5px; }
.player-card-sm.tc-card[b-yttc4xp2m6]  .tc-stripe-bg-left { left: 5px; }
.player-card-sm.tc-card[b-yttc4xp2m6]  .tc-stripe-bg-right { right: 5px; }
.player-card-sm.tc-card[b-yttc4xp2m6]  .tc-stripe { width: 9px; top: 5px; bottom: 5px; font-size: 0.3rem; padding: 16px 0; }
.player-card-sm.tc-card[b-yttc4xp2m6]  .tc-stripe-left { left: 5px; }
.player-card-sm.tc-card[b-yttc4xp2m6]  .tc-stripe-right { right: 5px; }
.player-card-sm.tc-card[b-yttc4xp2m6]  .tc-photo { top: 10px; left: 16px; right: 16px; bottom: 48px; }
.player-card-sm.tc-card[b-yttc4xp2m6]  .tc-photo-placeholder { font-size: 1.8rem; }
.player-card-sm.tc-card[b-yttc4xp2m6]  .tc-ball { width: 14px; height: 14px; }
.player-card-sm.tc-card[b-yttc4xp2m6]  .tc-ball-tl { top: 6px; left: 5px; }
.player-card-sm.tc-card[b-yttc4xp2m6]  .tc-ball-tr { top: 6px; right: 5px; }
.player-card-sm.tc-card[b-yttc4xp2m6]  .tc-ball-bl { bottom: 44px; left: 5px; }
.player-card-sm.tc-card[b-yttc4xp2m6]  .tc-ball-br { bottom: 44px; right: 5px; }
.player-card-sm.tc-card[b-yttc4xp2m6]  .tc-sport-banner { padding: 1px 8px 2px; }
.player-card-sm.tc-card[b-yttc4xp2m6]  .tc-sport-text { font-size: 0.5rem; }
.player-card-sm.tc-card[b-yttc4xp2m6]  .tc-nameplate-text { font-size: 0.35rem; }

/* ============================================================
   TRADING CARD — MD (195×278)
   ============================================================ */
.player-card-md.tc-card[b-yttc4xp2m6]  .tc-photo { top: 14px; left: 20px; right: 20px; bottom: 62px; }
.player-card-md.tc-card[b-yttc4xp2m6]  .tc-ball { width: 20px; height: 20px; }
.player-card-md.tc-card[b-yttc4xp2m6]  .tc-ball-tl { top: 10px; left: 7px; }
.player-card-md.tc-card[b-yttc4xp2m6]  .tc-ball-tr { top: 10px; right: 7px; }
.player-card-md.tc-card[b-yttc4xp2m6]  .tc-ball-bl { bottom: 58px; left: 7px; }
.player-card-md.tc-card[b-yttc4xp2m6]  .tc-ball-br { bottom: 58px; right: 7px; }
.player-card-md.tc-card[b-yttc4xp2m6]  .tc-sport-text { font-size: 0.7rem; }
.player-card-md.tc-card[b-yttc4xp2m6]  .tc-nameplate-text { font-size: 0.45rem; }

/* ============================================================
   TRADING CARD — LG (280×400)
   ============================================================ */
.player-card-lg.tc-card[b-yttc4xp2m6]  .tc-border { border-width: 9px; }
.player-card-lg.tc-card[b-yttc4xp2m6]  .tc-inner-border { inset: 8px; border-width: 2.5px; }
.player-card-lg.tc-card[b-yttc4xp2m6]  .tc-stripe-bg { width: 16px; top: 10px; bottom: 10px; }
.player-card-lg.tc-card[b-yttc4xp2m6]  .tc-stripe-bg-left { left: 10px; }
.player-card-lg.tc-card[b-yttc4xp2m6]  .tc-stripe-bg-right { right: 10px; }
.player-card-lg.tc-card[b-yttc4xp2m6]  .tc-stripe { width: 16px; top: 10px; bottom: 10px; font-size: 0.55rem; padding: 30px 0; }
.player-card-lg.tc-card[b-yttc4xp2m6]  .tc-stripe-left { left: 10px; }
.player-card-lg.tc-card[b-yttc4xp2m6]  .tc-stripe-right { right: 10px; }
.player-card-lg.tc-card[b-yttc4xp2m6]  .tc-photo { top: 18px; left: 28px; right: 28px; bottom: 88px; }
.player-card-lg.tc-card[b-yttc4xp2m6]  .tc-photo-placeholder { font-size: 3.5rem; }
.player-card-lg.tc-card[b-yttc4xp2m6]  .tc-ball { width: 28px; height: 28px; }
.player-card-lg.tc-card[b-yttc4xp2m6]  .tc-ball-tl { top: 14px; left: 12px; }
.player-card-lg.tc-card[b-yttc4xp2m6]  .tc-ball-tr { top: 14px; right: 12px; }
.player-card-lg.tc-card[b-yttc4xp2m6]  .tc-ball-bl { bottom: 82px; left: 12px; }
.player-card-lg.tc-card[b-yttc4xp2m6]  .tc-ball-br { bottom: 82px; right: 12px; }
.player-card-lg.tc-card[b-yttc4xp2m6]  .tc-sport-banner { padding: 5px 24px 6px; }
.player-card-lg.tc-card[b-yttc4xp2m6]  .tc-sport-text { font-size: 1.1rem; }
.player-card-lg.tc-card[b-yttc4xp2m6]  .tc-nameplate-text { font-size: 0.65rem; }

/* ============================================================
   Card Picker Grid
   ============================================================ */
.card-picker-grid[b-yttc4xp2m6] {
    display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center;
}
.card-picker-item[b-yttc4xp2m6] {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.card-picker-label[b-yttc4xp2m6] {
    text-align: center; font-size: 0.82rem; font-weight: 700; color: #999;
    transition: color 0.2s;
}
.card-picker-label.active[b-yttc4xp2m6] { color: var(--color-primary, #333); }
.card-picker-desc[b-yttc4xp2m6] { font-size: 0.68rem; color: #bbb; margin-top: 1px; }

/* ============================================================
   Animation
   ============================================================ */
@keyframes card-float-b-yttc4xp2m6 {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
}
.player-card-float[b-yttc4xp2m6] { animation: card-float-b-yttc4xp2m6 3s ease-in-out infinite; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 767px) {
    .player-card-lg[b-yttc4xp2m6] { width: 240px; height: 342px; }
    .player-card-lg[b-yttc4xp2m6]  .card-photo-frame { top: 42px; width: 160px; height: 170px; }
    .player-card-lg[b-yttc4xp2m6]  .card-nickname-wrap { bottom: 36px; }
    .player-card-lg[b-yttc4xp2m6]  .card-nickname-text { font-size: 0.95rem; }

    .player-card-lg.tc-card[b-yttc4xp2m6] { width: 240px; height: 342px; }
    .player-card-lg.tc-card[b-yttc4xp2m6]  .tc-photo { top: 14px; left: 22px; right: 22px; bottom: 75px; }
    .player-card-lg.tc-card[b-yttc4xp2m6]  .tc-bottom { height: 75px; }
    .player-card-lg.tc-card[b-yttc4xp2m6]  .tc-ball { width: 22px; height: 22px; }
}