/* 明星墙主题（高级向）：炭灰蓝黑底 + 低饱和月光灰蓝雾 + 香槟金点缀，避免大紫大粉 */
.star-wall-main--pc {
  padding: 12px 0 60px;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--header-h, 64px));
  min-height: calc(100dvh - var(--header-h, 64px));
  box-sizing: border-box;
}

.star-wall-main--pc > .wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}

.star-wall-main--pc .star-wall-grid:has(> p:only-child) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
}

/* —— 明星墙顶部主视觉（深色渐变 + 玻璃态 + 轻动效）—— */
.star-wall-banner {
    position: relative;
    text-align: center;
    overflow: hidden;
    border-radius: 6px;
    margin: 0 0 28px;
    padding: clamp(40px, 6vw, 64px) clamp(20px, 4vw, 48px);
    min-height: 200px;
    background:
        linear-gradient(155deg, #0e1014 0%, #12161c 36%, #0a0c0f 70%, #111418 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 28px 64px rgba(0, 0, 0, 0.38),
        0 8px 32px rgba(196, 169, 104, 0.07);
    isolation: isolate;
}

.star-wall-banner__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.star-wall-banner__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(56px);
    opacity: 0.75;
    animation: sw-banner-float 14s ease-in-out infinite;
}
.star-wall-banner__blob--a {
    width: 55%;
    height: 70%;
    left: -12%;
    top: -25%;
    background: radial-gradient(circle, rgba(125, 142, 162, 0.38) 0%, transparent 70%);
    animation-delay: 0s;
}
.star-wall-banner__blob--b {
    width: 45%;
    height: 55%;
    right: -8%;
    bottom: -20%;
    background: radial-gradient(circle, rgba(175, 152, 108, 0.26) 0%, transparent 68%);
    animation-delay: -5s;
    animation-duration: 18s;
}
.star-wall-banner__blob--c {
    width: 35%;
    height: 40%;
    left: 42%;
    top: 35%;
    background: radial-gradient(circle, rgba(88, 102, 118, 0.28) 0%, transparent 70%);
    filter: blur(48px);
    animation-duration: 20s;
    animation-delay: -8s;
    opacity: 0.6;
}

.star-wall-banner__mesh {
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, black 20%, transparent 100%);
}

@keyframes sw-banner-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    40% { transform: translate(4%, 3%) scale(1.05); }
    70% { transform: translate(-3%, 2%) scale(0.98); }
}

.star-wall-banner__deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.star-wall-banner__orbit {
    position: absolute;
    width: 280px;
    height: 280px;
    right: -90px;
    top: 50%;
    margin-top: -140px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    animation: sw-banner-orbit 48s linear infinite;
}
.star-wall-banner__ring {
    position: absolute;
    width: 200px;
    height: 200px;
    right: -50px;
    top: 50%;
    margin-top: -100px;
    border: 1px solid rgba(196, 169, 104, 0.22);
    border-radius: 50%;
    animation: sw-banner-orbit 36s linear infinite reverse;
}

@keyframes sw-banner-orbit {
    to { transform: rotate(360deg); }
}

.star-wall-banner__glow-line {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(196, 169, 104, 0.45) 48%,
        rgba(232, 224, 208, 0.35) 52%,
        transparent 100%
    );
    opacity: 0.85;
}

.star-wall-banner__inner {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.star-wall-banner__frame {
    max-width: 520px;
    margin: 0 auto;
    padding: clamp(22px, 3.5vw, 34px) clamp(26px, 4vw, 42px);
    border-radius: 6px;
    background: linear-gradient(
        165deg,
        rgba(255, 255, 255, 0.07) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.11);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 16px 40px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.star-wall-banner__kicker {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.42em;
    color: rgba(232, 228, 220, 0.42);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.star-wall-banner__kicker-dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c4a968, #e8dfc8);
    box-shadow: 0 0 12px rgba(196, 169, 104, 0.45);
}

.star-wall-banner__title {
    margin: 0 0 12px;
    padding: 0;
    line-height: 1.05;
}
.star-wall-banner__title-en {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(13px, 1.6vw, 15px);
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.06em;
    background: linear-gradient(90deg, #c9b896 0%, #e8e0d0 45%, #a8946b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 6px;
    opacity: 0.92;
}
.star-wall-banner__title-cn {
    display: block;
    font-size: clamp(34px, 5vw, 46px);
    font-weight: 800;
    letter-spacing: 0.12em;
    background: linear-gradient(120deg, #faf8f5 0%, #ebe6dc 40%, #d4cfc4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 14px rgba(196, 169, 104, 0.22));
}

.star-wall-banner__desc {
    margin: 0;
    font-size: clamp(13px, 1.35vw, 15px);
    line-height: 1.65;
    color: rgba(228, 224, 216, 0.58);
    letter-spacing: 0.06em;
}

.star-wall-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    margin-top: 4px;
}

.sw-card {
    perspective: 600px; border-radius: 6px; overflow: hidden;
    background: #15181e;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.32);
    transition: transform .3s, box-shadow .3s;
}
.sw-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(196, 169, 104, 0.12),
        0 12px 48px rgba(196, 169, 104, 0.14);
}
.sw-card__link { display: block; text-decoration: none; color: inherit; }

.sw-card__scene {
    position: relative;
    width: 100%;
    padding-top: 133%;
    overflow: hidden;
}
/* 封面底部暗角：衬托玻璃徽章，不抢主图 */
.sw-card__scene::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 44%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(8, 10, 14, 0.94) 0%,
        rgba(8, 10, 14, 0.5) 40%,
        transparent 100%
    );
}
.sw-card__rank {
    position: absolute;
    left: 50%;
    bottom: clamp(10px, 2.8%, 15px);
    transform: translateX(-50%);
    z-index: 4;
    margin: 0;
    pointer-events: none;
    white-space: nowrap;
}
.sw-card__rank-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 6px 13px 6px 12px;
    border-radius: 999px;
    background: linear-gradient(168deg, rgba(24, 28, 36, 0.94) 0%, rgba(11, 13, 18, 0.96) 100%);
    border: 1px solid rgba(196, 169, 104, 0.34);
    box-shadow:
        0 6px 22px rgba(0, 0, 0, 0.48),
        0 0 0 1px rgba(0, 0, 0, 0.4) inset,
        0 1px 0 rgba(255, 255, 255, 0.07) inset;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.sw-card__rank-label {
    font-size: clamp(10px, 0.92vw, 11px);
    font-weight: 600;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.sw-card__rank-divider {
    width: 1px;
    height: 13px;
    flex-shrink: 0;
    background: linear-gradient(180deg, transparent, rgba(196, 169, 104, 0.42), transparent);
    opacity: 0.9;
}
.sw-card__rank-ward {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
}
.sw-card__rank-no {
    font-size: clamp(10px, 0.88vw, 11px);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(212, 188, 125, 0.78);
}
.sw-card__rank-num {
    font-size: clamp(13px, 1.12vw, 16px);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    line-height: 1;
    background: linear-gradient(115deg, #faf4e4 0%, #e0c983 42%, #c4a44e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sw-card[data-sw-rank="1"] .sw-card__rank-pill {
    border-color: rgba(236, 214, 158, 0.52);
    box-shadow:
        0 8px 26px rgba(0, 0, 0, 0.52),
        0 0 32px rgba(196, 169, 104, 0.2),
        0 0 0 1px rgba(0, 0, 0, 0.42) inset,
        0 1px 0 rgba(255, 255, 255, 0.1) inset;
}
.sw-card[data-sw-rank="2"] .sw-card__rank-pill {
    border-color: rgba(178, 192, 208, 0.5);
    box-shadow:
        0 6px 22px rgba(0, 0, 0, 0.48),
        0 0 24px rgba(150, 170, 190, 0.14),
        0 0 0 1px rgba(0, 0, 0, 0.4) inset;
}
.sw-card[data-sw-rank="2"] .sw-card__rank-num {
    background: linear-gradient(115deg, #f4f7fb 0%, #b9c7d6 45%, #7e93a8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sw-card[data-sw-rank="3"] .sw-card__rank-pill {
    border-color: rgba(198, 145, 108, 0.5);
    box-shadow:
        0 6px 22px rgba(0, 0, 0, 0.48),
        0 0 22px rgba(170, 110, 70, 0.14),
        0 0 0 1px rgba(0, 0, 0, 0.4) inset;
}
.sw-card[data-sw-rank="3"] .sw-card__rank-num {
    background: linear-gradient(115deg, #f2e0d2 0%, #c9946e 48%, #9d6040 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sw-card__cube {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transform-style: preserve-3d;
    animation: sw-spin var(--sw-dur, 8s) var(--sw-delay, 0s) infinite ease-in-out;
}
.sw-card__face {
    position: absolute; inset: 0; width: 100%; height: 100%;
    backface-visibility: hidden;
}
.sw-card__face img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.sw-card--locked .sw-card__face img {
    filter: blur(14px);
    transform: scale(1.06);
}
.sw-card__lock-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: radial-gradient(circle at center, rgba(15, 23, 42, 0.16) 0%, rgba(15, 23, 42, 0.5) 100%);
}
.sw-card__lock-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: linear-gradient(165deg, rgba(15, 23, 42, 0.88) 0%, rgba(30, 41, 59, 0.9) 100%);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.45);
}
.sw-card__face--empty {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, #1c2128 0%, #15181e 100%);
}
.sw-card__empty-ph {
    font-size: 42px; color: rgba(228, 224, 216, 0.28);
}
.sw-card__face--0 { transform: rotateY(0deg); }
.sw-card__face--1 { transform: rotateY(90deg); }
.sw-card__face--2 { transform: rotateY(180deg); }
.sw-card__face--3 { transform: rotateY(270deg); }

@keyframes sw-spin {
    0%   { transform: rotateY(0deg); }
    20%  { transform: rotateY(0deg); }
    25%  { transform: rotateY(90deg); }
    45%  { transform: rotateY(90deg); }
    50%  { transform: rotateY(180deg); }
    70%  { transform: rotateY(180deg); }
    75%  { transform: rotateY(270deg); }
    95%  { transform: rotateY(270deg); }
    100% { transform: rotateY(360deg); }
}

.sw-card__name {
    display: block;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #ebe6dc;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-top: 1px solid rgba(196, 169, 104, 0.1);
    background: linear-gradient(180deg, rgba(21, 24, 30, 0.78) 0%, rgba(15, 17, 22, 0.98) 100%);
}

.star-wall-loader,
.star-wall-end {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; padding: 36px 0; color: rgba(148, 154, 164, 0.9); font-size: 14px;
}
.star-wall-loader__spinner {
    width: 20px; height: 20px; border: 2px solid rgba(196, 169, 104, 0.28);
    border-top-color: #d4bc7d; border-radius: 50%;
    animation: sw-spin-loader .6s linear infinite;
}
@keyframes sw-spin-loader { to { transform: rotate(360deg); } }

@media (max-width: 1280px) {
    .star-wall-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}
@media (max-width: 860px) {
    .star-wall-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .star-wall-banner__blob,
    .star-wall-banner__orbit,
    .star-wall-banner__ring {
        animation: none;
    }
}