/**
 * 娱乐模式（fortune-teller）— 黑色三角底板；PNG 锚定右下「厚实」区，避免被斜边裁切
 */

#xiyongCard {
    position: relative;
}

#xiyongCard:not(.expanded) > h2,
#xiyongCard:not(.expanded) > span {
    position: relative;
    z-index: 2;
}

#xiyongCard.nav-card.expanded .fortune-teller-card-entry {
    display: none !important;
}

.fortune-teller-card-entry {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 1;
    box-sizing: border-box;
    width: min(42vw, 132px);
    height: min(42vw, 132px);
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    background: transparent;
    overflow: visible;
    isolation: isolate;
    transition: transform 0.18s ease;
}

.fortune-teller-card-entry::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    clip-path: polygon(100% 100%, 0 100%, 100% 0);
    -webkit-clip-path: polygon(100% 100%, 0 100%, 100% 0);
    background: linear-gradient(155deg, #141414 0%, #050505 42%, #1f1f1f 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 153, 0, 0.55);
    filter: drop-shadow(0 4px 14px rgba(255, 120, 0, 0.32));
    transition: filter 0.2s ease;
}

.fortune-teller-card-entry:hover::before {
    filter: drop-shadow(0 0 14px rgba(255, 140, 0, 0.45)) drop-shadow(0 6px 20px rgba(0, 0, 0, 0.35));
}

.fortune-teller-card-entry:active {
    transform: scale(0.97);
}

.fortune-teller-card-entry:active::before {
    filter: brightness(1.05) drop-shadow(0 3px 10px rgba(255, 120, 0, 0.28));
}

.fortune-teller-card-entry:focus {
    outline: none;
}

.fortune-teller-card-entry:focus-visible::before {
    filter:
        drop-shadow(0 0 2px rgba(255, 200, 120, 0.95))
        drop-shadow(0 0 10px rgba(255, 140, 0, 0.5))
        drop-shadow(0 4px 14px rgba(255, 120, 0, 0.32));
}

.fortune-teller-card-entry__inner {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
}

/* 与底板同形裁剪；图贴右下直角附近（用户标注红框区），整块落在三角内 */
.fortune-teller-card-entry__clip {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    clip-path: polygon(100% 100%, 0 100%, 100% 0);
    -webkit-clip-path: polygon(100% 100%, 0 100%, 100% 0);
}

.fortune-teller-card-entry__badge {
    position: absolute;
    right: 6%;
    bottom: 6%;
    left: auto;
    top: auto;
    display: block;
    max-width: 48%;
    max-height: 48%;
    width: auto;
    height: auto;
    object-fit: contain;
    -webkit-user-drag: none;
    user-select: none;
}

@media (max-width: 768px) {
    .fortune-teller-card-entry {
        width: min(37.4vw, 121px);
        height: min(37.4vw, 121px);
        right: 6px;
        bottom: 6px;
    }

    .fortune-teller-card-entry__badge {
        right: 5%;
        bottom: 5%;
        max-width: 44%;
        max-height: 44%;
    }
}

@media (min-width: 769px) {
    .fortune-teller-card-entry {
        width: min(168px, 19vw);
        height: min(168px, 19vw);
        right: 13px;
        bottom: 13px;
    }

    .fortune-teller-card-entry__badge {
        right: 7%;
        bottom: 7%;
        max-width: 50%;
        max-height: 50%;
    }
}

body.dark-theme #xiyongCard:not(.expanded) .fortune-teller-card-entry::before {
    background: linear-gradient(155deg, #0a0a0a 0%, #000000 40%, #181818 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 170, 60, 0.65);
    filter: drop-shadow(0 0 10px rgba(255, 140, 0, 0.38)) drop-shadow(0 5px 18px rgba(0, 0, 0, 0.5));
}

body.dark-theme #xiyongCard:not(.expanded) .fortune-teller-card-entry:hover::before {
    filter: drop-shadow(0 0 18px rgba(255, 160, 0, 0.55)) drop-shadow(0 8px 24px rgba(0, 0, 0, 0.55));
}

body.dark-theme #xiyongCard:not(.expanded) .fortune-teller-card-entry:active::before {
    filter: brightness(1.06) drop-shadow(0 0 12px rgba(255, 140, 0, 0.4));
}

body.dark-theme .fortune-teller-card-entry:focus-visible::before {
    filter:
        drop-shadow(0 0 3px rgba(255, 200, 120, 1))
        drop-shadow(0 0 14px rgba(255, 150, 0, 0.55))
        drop-shadow(0 0 10px rgba(255, 140, 0, 0.38));
}

/* ========== 娱乐推运：太极过场（克隆首页阴阳按钮 + 遮罩，配合 body 反色） ========== */
.fan-ft-taiji-stage {
    position: fixed;
    inset: 0;
    z-index: 99998;
    pointer-events: all;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.fan-ft-taiji-stage--active {
    opacity: 1;
}

.fan-ft-taiji-stage--out {
    opacity: 0;
    transition: opacity 0.16s ease;
}

.fan-ft-taiji-stage__veils {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 50% 40%,
        rgba(255, 255, 255, 0.14) 0%,
        rgba(0, 0, 0, 0.12) 38%,
        rgba(0, 0, 0, 0.5) 100%
    );
    animation: fan-ft-taiji-veil 1.12s ease-in-out forwards;
    pointer-events: none;
}

body.dark-theme .fan-ft-taiji-stage__veils {
    background: radial-gradient(
        circle at 50% 40%,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(0, 0, 0, 0.28) 42%,
        rgba(0, 0, 0, 0.78) 100%
    );
}

@keyframes fan-ft-taiji-veil {
    0% {
        opacity: 0.55;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.04);
    }
    100% {
        opacity: 0.92;
        transform: scale(1.1);
    }
}

.fan-ft-taiji-stage__hero {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 18px rgba(255, 150, 70, 0.38)) drop-shadow(0 12px 36px rgba(0, 0, 0, 0.25));
}

.fan-ft-taiji-stage__hero--animate {
    animation: fan-ft-taiji-hero 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.fan-ft-taiji-stage .theme-toggle-btn {
    cursor: default;
}

@keyframes fan-ft-taiji-hero {
    0% {
        transform: scale(0.42) rotate(-95deg);
        opacity: 0.88;
    }
    52% {
        transform: scale(2.35) rotate(210deg);
        opacity: 1;
    }
    100% {
        transform: scale(2.65) rotate(540deg);
        opacity: 1;
    }
}