@font-face {
    font-family: 'No148 Shangshou';
    src: url('../fonts/no148-shangshou-chinese.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'No148 Shangshou Numbers';
    src: url('../fonts/no148-shangshou-numbers.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Noto Sans SC';
    src: url('../fonts/NotoSansSC-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* Floating Jackpot Trigger Widget */
#fjTrigger {
    position: fixed;
    bottom: 60px;
    right: 20px;
    cursor: pointer;
    z-index: 9999;
    transition: transform 0.2s;
}

#fjTrigger:hover {
    transform: scale(1.08);
}

#fjTrigger:hover .fj-close-btn {
    display: block;
}

.fj-trigger__wrapper {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

/* ========== BOUNCE when pool updates ========== */
.fj-trigger__wrapper--bounce {
    animation: triggerBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes triggerBounce {
    0% { transform: scale(1); }
    30% { transform: scale(1.06); }
    50% { transform: scale(0.97); }
    70% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

/* ========== SHIMMER SWEEP — loops while active ========== */
.fj-trigger__wrapper--animating::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255, 255, 255, 0.08) 35%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(255, 255, 255, 0.08) 65%,
        transparent 80%
    );
    animation: shimmerSweep 1.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shimmerSweep {
    0% { left: -100%; }
    100% { left: 150%; }
}

.fj-trigger__img {
    display: block;
    max-width: 180px;
    height: auto;
}

.fj-trigger__overlay {
    position: absolute;
    top: 14%;
    left: 0;
    right: 0;
    bottom: 0;
    align-items: stretch;
}

.fj-trigger__overlay--draw-schedule { padding-top: 22%; }
.fj-trigger__overlay--countdown {
    position: absolute;
    top: 58%;
}
.fj-trigger__overlay--draw {
    position: absolute;
    top: 52%;
}

.fj-trigger__pool {
    color: #fff;
    font-family: 'No148 Shangshou', 'No148 Shangshou Numbers', 'Impact', sans-serif;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px;
    width: 100%;
    padding: 4% 0 0 12%;
}

.fj-trigger__pool-label {
    font-size: 11px;
    font-family: 'Noto Sans SC', sans-serif;
}

.fj-trigger__pool-amount {
    font-size: 13px;
    padding-right: 32%;
    transition: color 0.4s ease, text-shadow 0.4s ease;
}

/* ========== AMOUNT GOLD while rolling, white when done ========== */
.fj-trigger__pool-amount--updating {
    color: #ffd700;
    text-shadow: 0 0 4px rgba(255, 215, 0, 0.6), 0 0 10px rgba(255, 215, 0, 0.3);
}

.fj-trigger__info {
    color: #fff;
    font-size: 10px;
    font-family: 'Noto Sans SC', sans-serif;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    padding: 3% 5% 0 0;
    text-align: center;
}

.fj-trigger__overlay--countdown .fj-trigger__info:empty::before {
    content: '\00a0';
    visibility: hidden;
}

.fj-trigger__info.fj-trigger__info--draw-schedule {
    font-size: 8px;
    position: absolute;
    bottom: 4%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.fj-trigger__info.fj-trigger__info--countdown {
    color: #1B4075;
}

.fj-trigger__info.fj-trigger__info--draw {
    color: transparent;
    background: linear-gradient(180deg, #3FA1C9, #11569E);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
    font-size: 12px;
}

.fj-close-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    background: #e53935;
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    display: none;
}