/* 召喚聖殿 · 三大卡機分頁炫彩圖標 */

.machine-pool-tab__icon-wrap {
    position: relative;
    width: 52px;
    height: 52px;
    margin: 0 auto 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.35s ease, filter 0.35s ease;
}

.pool-tab-gem {
    position: relative;
    z-index: 2;
    width: 40px;
    height: 40px;
    display: block;
    transform-style: preserve-3d;
    transition: transform 0.35s ease, filter 0.35s ease;
}

.machine-pool-tab:hover .machine-pool-tab__icon-wrap,
.machine-pool-tab.is-active .machine-pool-tab__icon-wrap {
    transform: scale(1.1) translateY(-2px);
    transition: transform 0.35s ease;
}

/* —— 限定：神話棱鏡鑽 —— */
.pool-tab-gem--mythic {
    clip-path: polygon(50% 0%, 88% 18%, 100% 50%, 88% 82%, 50% 100%, 12% 82%, 0% 50%, 12% 18%);
    background: conic-gradient(
        from 0deg,
        #ff2d95 0deg,
        #ffd700 72deg,
        #00f5ff 144deg,
        #b24bff 216deg,
        #ff6b35 288deg,
        #ff2d95 360deg
    );
    animation: poolTabMythicGlow 2.8s ease-in-out infinite;
    filter:
        drop-shadow(0 0 6px rgba(255, 45, 149, 0.95))
        drop-shadow(0 0 14px rgba(255, 215, 0, 0.75))
        drop-shadow(0 0 22px rgba(178, 75, 255, 0.55));
}

.pool-tab-gem--mythic::before {
    content: "";
    position: absolute;
    inset: 5px;
    clip-path: inherit;
    background:
        radial-gradient(ellipse 70% 55% at 32% 28%, rgba(255, 255, 255, 0.95) 0%, transparent 52%),
        linear-gradient(145deg, rgba(60, 8, 90, 0.92) 0%, rgba(12, 4, 28, 0.98) 55%, rgba(90, 20, 120, 0.85) 100%);
    box-shadow: inset 0 0 12px rgba(255, 100, 200, 0.35);
}

.pool-tab-gem--mythic::after {
    content: "MR";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Orbitron, "Noto Sans TC", sans-serif;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: rgba(255, 248, 220, 0.95);
    text-shadow:
        0 0 8px rgba(255, 215, 0, 1),
        0 0 16px rgba(255, 45, 149, 0.8);
}

/* —— 普通：至尊金晶 —— */
.pool-tab-gem--prime {
    clip-path: polygon(50% 2%, 61% 35%, 96% 35%, 68% 57%, 79% 92%, 50% 72%, 21% 92%, 32% 57%, 4% 35%, 39% 35%);
    background: linear-gradient(
        135deg,
        #fff8c8 0%,
        #ffd700 22%,
        #ff9a00 45%,
        #ffe566 68%,
        #c9a227 100%
    );
    animation: poolTabGoldPulse 2.4s ease-in-out infinite;
    filter:
        drop-shadow(0 0 8px rgba(255, 215, 0, 0.9))
        drop-shadow(0 0 18px rgba(255, 140, 0, 0.55));
}

.pool-tab-gem--prime::before {
    content: "";
    position: absolute;
    inset: 6px;
    clip-path: polygon(50% 8%, 58% 38%, 88% 38%, 64% 56%, 72% 86%, 50% 68%, 28% 86%, 36% 56%, 12% 38%, 42% 38%);
    background:
        radial-gradient(circle at 40% 32%, rgba(255, 255, 255, 0.9) 0%, transparent 48%),
        linear-gradient(160deg, rgba(255, 200, 80, 0.5), rgba(80, 40, 0, 0.75));
}

.pool-tab-gem--prime::after {
    content: "★";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 200, 1), 0 0 20px rgba(255, 180, 0, 0.9);
    animation: poolTabStarTwinkle 1.8s ease-in-out infinite;
}

/* —— 銀幣：月輪銀核 —— */
.pool-tab-gem--silver {
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, #ffffff 0%, #e8f4ff 18%, #9ec8ff 42%, #4a7ab8 72%, #1a3058 100%);
    box-shadow:
        inset -4px -6px 14px rgba(0, 30, 80, 0.45),
        inset 3px 3px 10px rgba(255, 255, 255, 0.55);
    animation: poolTabSilverShine 2.6s ease-in-out infinite;
    filter:
        drop-shadow(0 0 8px rgba(140, 200, 255, 0.95))
        drop-shadow(0 0 20px rgba(80, 160, 255, 0.65));
}

.pool-tab-gem--silver::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 8px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, transparent 70%);
    opacity: 0.9;
}

.pool-tab-gem--silver::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 50%;
    width: 18px;
    height: 36px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: rgba(8, 16, 32, 0.55);
    box-shadow: -2px 0 6px rgba(0, 40, 90, 0.4);
}

/* 外環光暈 */
.pool-tab-gem__ring {
    position: absolute;
    inset: 2px;
    z-index: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    background: transparent;
    pointer-events: none;
    animation: none;
}

.machine-pool-tab[data-pool-id="pool_limited"] .pool-tab-gem__ring {
    border-image: linear-gradient(90deg, #ff2d95, #ffd700, #00f5ff, #b24bff) 1;
    border: none;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 45, 149, 0.7) 40deg, transparent 80deg, rgba(0, 245, 255, 0.6) 140deg, transparent 200deg, rgba(255, 215, 0, 0.65) 260deg, transparent 320deg);
    -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%, #000 72%, transparent 74%);
    mask: radial-gradient(circle, transparent 58%, #000 60%, #000 72%, transparent 74%);
    opacity: 0.85;
}

.machine-pool-tab[data-pool-id="pool_normal"] .pool-tab-gem__ring {
    border: 2px solid rgba(255, 215, 0, 0.45);
    box-shadow: 0 0 12px rgba(255, 200, 60, 0.5), inset 0 0 8px rgba(255, 215, 0, 0.2);
}

.machine-pool-tab[data-pool-id="pool_silver"] .pool-tab-gem__ring {
    border: 2px solid rgba(160, 210, 255, 0.55);
    box-shadow: 0 0 14px rgba(100, 180, 255, 0.55);
}

/* 爆光閃點 */
.pool-tab-gem__burst {
    position: absolute;
    inset: -4px;
    z-index: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, transparent 62%);
    opacity: 0;
    animation: poolTabBurst 2.8s ease-in-out infinite;
    pointer-events: none;
}

.machine-pool-tab.is-active .pool-tab-gem__burst {
    animation-duration: 1.6s;
    opacity: 1;
}

.pool-tab-gem__flare {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    height: 3px;
    margin: -1px 0 0 -35%;
    z-index: 3;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
    transform: rotate(-25deg);
    opacity: 0.55;
    animation: poolTabFlareSweep 3.2s ease-in-out infinite;
    pointer-events: none;
}

.machine-pool-tab.is-active .pool-tab-gem__flare {
    opacity: 0.85;
    animation-duration: 2s;
}

/* 分頁整體：選中時圖標區更亮 */
.machine-pool-tab[data-pool-id="pool_limited"].is-active .machine-pool-tab__icon-wrap {
    filter: drop-shadow(0 0 18px rgba(255, 45, 149, 0.75));
}

.machine-pool-tab[data-pool-id="pool_normal"].is-active .machine-pool-tab__icon-wrap {
    filter: drop-shadow(0 0 16px rgba(255, 200, 60, 0.8));
}

.machine-pool-tab[data-pool-id="pool_silver"].is-active .machine-pool-tab__icon-wrap {
    filter: drop-shadow(0 0 16px rgba(120, 190, 255, 0.85));
}

.machine-pool-tab__name {
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.25);
}

.machine-pool-tab.is-active .machine-pool-tab__name {
    background: linear-gradient(90deg, #fff8e8, #ffd700, #fff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.5));
}

.machine-pool-tab[data-pool-id="pool_limited"].is-active .machine-pool-tab__name {
    background: linear-gradient(90deg, #ffb8e8, #ffd700, #80f0ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.machine-pool-tab[data-pool-id="pool_silver"].is-active .machine-pool-tab__name {
    background: linear-gradient(90deg, #e8f4ff, #a8d8ff, #fff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes poolTabMythicGlow {
    0%, 100% {
        filter:
            drop-shadow(0 0 6px rgba(255, 45, 149, 0.9))
            drop-shadow(0 0 14px rgba(255, 215, 0, 0.7))
            drop-shadow(0 0 22px rgba(178, 75, 255, 0.5))
            brightness(1);
    }
    50% {
        filter:
            drop-shadow(0 0 10px rgba(255, 45, 149, 1))
            drop-shadow(0 0 20px rgba(255, 215, 0, 0.95))
            drop-shadow(0 0 28px rgba(178, 75, 255, 0.75))
            brightness(1.12);
    }
}

@keyframes poolTabGoldPulse {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.85)) brightness(1); }
    50% { filter: drop-shadow(0 0 16px rgba(255, 180, 0, 1)) brightness(1.15); }
}

@keyframes poolTabSilverShine {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(140, 200, 255, 0.9)) brightness(1); }
    50% { filter: drop-shadow(0 0 18px rgba(180, 230, 255, 1)) brightness(1.12); }
}

@keyframes poolTabStarTwinkle {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.15); }
}

@keyframes poolTabBurst {
    0%, 100% { opacity: 0; transform: scale(0.85); }
    45% { opacity: 0.55; transform: scale(1.05); }
    55% { opacity: 0.35; transform: scale(1); }
}

@keyframes poolTabFlareSweep {
    0%, 100% { opacity: 0.2; transform: rotate(-25deg) translateX(-8px); }
    50% { opacity: 0.9; transform: rotate(-25deg) translateX(8px); }
}

/* 召喚聖殿 · 分頁圖標放大 */
.summon-chamber__pool-tabs .pool-tab-gem--mythic::after,
.summon-chamber__pool-tabs .pool-tab-gem--prime::after,
.summon-chamber__pool-tabs .pool-tab-gem--silver::after {
    font-size: 11px;
}

@media (prefers-reduced-motion: reduce) {
    .pool-tab-gem--mythic,
    .pool-tab-gem--prime,
    .pool-tab-gem--silver,
    .pool-tab-gem__ring,
    .pool-tab-gem__burst,
    .pool-tab-gem__flare,
    .pool-tab-gem--prime::after {
        animation: none !important;
    }
}