.tt-player-card {
    --card-primary: #1268e8;
    --card-secondary: #07182f;
    --card-accent: #4ed9ff;
    --portrait-x: 50%;
    --portrait-y: 100%;
    --portrait-scale: 1;
    position: relative;
    width: min(100%, 360px);
    aspect-ratio: 3 / 4;
    margin: 0 auto 16px;
    overflow: hidden;
    isolation: isolate;
    container-type: inline-size;
    border-radius: 7px;
    background: #06101a;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.42);
}

.tt-card-bg,
.tt-card-vignette,
.tt-card-geometry,
.tt-card-portrait,
.tt-card-frame {
    position: absolute;
    inset: 0;
}

.tt-card-bg {
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tt-card-vignette {
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(2, 6, 10, 0.18), rgba(2, 6, 10, 0.02) 45%, rgba(2, 6, 10, 0.88) 100%),
        radial-gradient(circle at 50% 40%, transparent 18%, rgba(1, 5, 9, 0.28) 78%, rgba(1, 4, 7, 0.72));
}

.tt-card-geometry { pointer-events: none; }
.tt-card-geometry--back { z-index: 2; }
.tt-card-geometry--front { z-index: 4; }
.tt-card-geometry svg { display: block; width: 100%; height: 100%; }

.tt-card-geometry .tone-primary { fill: var(--card-primary); }
.tt-card-geometry .tone-secondary { fill: var(--card-secondary); }
.tt-card-geometry .tone-accent { fill: var(--card-accent); }
.tt-card-geometry .no-fill { fill: none; }
.tt-card-geometry .stroke-primary { stroke: var(--card-primary); }
.tt-card-geometry .stroke-secondary { stroke: var(--card-secondary); }
.tt-card-geometry .stroke-accent { stroke: var(--card-accent); }
.tt-card-geometry .stroke-only { fill: none; stroke: var(--card-accent); stroke-width: 3; }
.tt-card-geometry .wide { stroke-width: 68; }
.tt-card-geometry .medium { stroke-width: 20; }
.tt-card-geometry .thin { stroke-width: 8; }
.tt-card-geometry .extra-wide { stroke-width: 112; }
.tt-card-geometry .opacity-22 { opacity: 0.22; }
.tt-card-geometry .opacity-35 { opacity: 0.35; }
.tt-card-geometry .opacity-48 { opacity: 0.48; }
.tt-card-geometry .opacity-55 { opacity: 0.55; }
.tt-card-geometry .opacity-58 { opacity: 0.58; }
.tt-card-geometry .opacity-60 { opacity: 0.6; }
.tt-card-geometry .opacity-66 { opacity: 0.66; }
.tt-card-geometry .opacity-70 { opacity: 0.7; }
.tt-card-geometry .opacity-72 { opacity: 0.72; }
.tt-card-geometry .opacity-76 { opacity: 0.76; }
.tt-card-geometry .opacity-78 { opacity: 0.78; }
.tt-card-geometry .opacity-80 { opacity: 0.8; }
.tt-card-geometry .opacity-85 { opacity: 0.85; }
.tt-card-geometry .opacity-88 { opacity: 0.88; }
.tt-card-geometry .opacity-90 { opacity: 0.9; }
.tt-card-geometry .opacity-92 { opacity: 0.92; }

.tt-card-rating {
    position: absolute;
    z-index: 6;
    top: 4.6%;
    left: 6.2%;
    color: #fff;
    font-family: Impact, "Arial Narrow", sans-serif;
    font-size: clamp(34px, 20cqw, 78px);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.04em;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.65);
}

.tt-card-portrait {
    /* 人物始终覆盖前、后两组几何纹路；数据与外框仍位于人物上方。 */
    z-index: 5;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    padding: 11% 4% 13%;
}

.tt-card-portrait img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: var(--portrait-x) var(--portrait-y);
    transform: scale(var(--portrait-scale));
    transform-origin: var(--portrait-x) var(--portrait-y);
    filter: var(--portrait-edge-filter, blur(0)) drop-shadow(0 14px 14px rgba(0, 0, 0, 0.45));
}

.tt-card-filter-defs {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
}

.tt-card-portrait-fallback {
    width: 67%;
    aspect-ratio: 0.72;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 48% 48% 15% 15%;
    color: rgba(255, 255, 255, 0.58);
    background: linear-gradient(160deg, rgba(255,255,255,0.22), rgba(255,255,255,0.04));
    border: 1px solid rgba(255,255,255,0.2);
    font-size: clamp(72px, 24vw, 126px);
    font-weight: 900;
    text-shadow: 0 8px 22px rgba(0,0,0,0.45);
}

.tt-card-name {
    position: absolute;
    z-index: 6;
    left: 8%;
    right: 8%;
    bottom: 4.8%;
    min-height: 11%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2% 4%;
    color: #fff;
    background: linear-gradient(100deg, rgba(3, 8, 14, 0.94), rgba(11, 20, 30, 0.78));
    border: 1px solid color-mix(in srgb, var(--card-accent) 58%, transparent);
    clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
    font-size: clamp(13px, 9cqw, 36px);
    font-weight: 900;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.7);
}

.tt-card-frame {
    z-index: 7;
    pointer-events: none;
    border: 3px solid #bfc4ca;
    border-radius: inherit;
    box-shadow:
        inset 0 0 0 2px rgba(9, 14, 20, 0.94),
        inset 0 0 0 4px rgba(255, 255, 255, 0.13),
        inset 0 0 34px rgba(0, 0, 0, 0.72);
}

@media (max-width: 380px) {
    .tt-player-card { width: min(100%, 330px); }
}

@media (prefers-reduced-motion: no-preference) {
    .tt-player-card:hover .tt-card-geometry--front { transform: translate3d(0, -2px, 0); }
    .tt-card-geometry--front { transition: transform 180ms ease; }
}