:root { 
    --jump-dur: 1.4s;
    --ntpc-green: #1a421b; 
    --gold-line: #bf953f;   
    --red-line: #a62c2b;    
    --pink-heart: #ff8fa3;
    --bg-glass: rgba(255, 255, 255, 0.98);
}

.luck-horse-box {
    position: fixed; right: 80px; bottom: 80px;
    width: 420px; z-index: 9999;
    display: flex; flex-direction: column; align-items: center;
    opacity: 0; transition: opacity 1s ease-in-out;
}

.show-box { opacity: 1; }

.msg-container {
    position: relative; margin-bottom: 50px;
    opacity: 0; transform: translateY(15px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), 
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.show-msg { opacity: 1 !important; transform: translateY(0) !important; }

.bubble {
    background: var(--bg-glass); color: #9a6f3f;
    padding: 20px 45px; border-radius: 4px;
    border: 1px solid var(--gold-line);
    font-size: 22px; font-weight: 500; letter-spacing: 0.25em;
    text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    white-space: pre-line; position: relative; min-width: 280px;
    line-height: 1.8;
}

.bubble::after {
    content: ''; position: absolute; bottom: -10px; left: 50%;
    transform: translateX(-50%); border-left: 10px solid transparent; 
    border-right: 10px solid transparent; border-top: 10px solid var(--gold-line);
}

.bubble::before {
    content: ''; position: absolute; bottom: -8.5px; left: 50%;
    transform: translateX(-50%); border-left: 9px solid transparent; 
    border-right: 9px solid transparent; border-top: 9px solid var(--bg-glass); z-index: 1;
}

.horse-wrapper { 
    position: relative; 
    filter: drop-shadow(0 15px 35px rgba(0,0,0,0.06));
    animation: breathe 3s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; 
    transform-origin: bottom center;
}

.horse-img { width: 170px; display: block; }

@keyframes breathe {
    0%, 100% { transform: translateY(0) rotate(-8deg); }
    50% { transform: translateY(-20px) rotate(8deg); }
}

.jumping .horse-img {
    animation: elegantJump var(--jump-dur) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes elegantJump {
    0% { transform: scale(1.1, 0.9); }
    30% { transform: scale(0.9, 1.2) translateY(-220px) rotate(-15deg); }
    100% { transform: scale(1, 1) translateY(0) rotate(360deg); }
}

/* 簡約可愛版：紅底白字春聯 */
.heart-icon {
    position: absolute; top: -90px; 
    width: 95px; height: 95px;
    background: #ef5350;
    color: #ffffff;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    opacity: 0;
    border-radius: 15px; 
    box-shadow: 0 10px 25px rgba(239, 83, 80, 0.4);
    transform: rotate(45deg) scale(0); 
    padding: 5px;
}

.spring-content {
    transform: rotate(-45deg);
    display: flex; flex-direction: column;
    align-items: center; line-height: 1;
}

.big-spring {
    font-size: 52px; font-weight: 900;
    margin-bottom: 2px;
    filter: drop-shadow(2px 2px 2px rgba(183, 28, 28, 0.4));
}

.small-text {
    font-size: 11px; font-weight: bold;
    letter-spacing: 1px;
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 6px; border-radius: 10px;
    white-space: nowrap;
}

.heart-pop {
    animation: springPop 1.2s cubic-bezier(0.17, 0.67, 0.83, 0.67) forwards;
}

@keyframes springPop {
    0% { transform: scale(0) rotate(45deg) translateY(20px); opacity: 0; }
    50% { transform: scale(1.2) rotate(45deg) translateY(-60px); opacity: 1; }
    100% { transform: scale(1.1) rotate(45deg) translateY(-150px); opacity: 0; }
}

/* 粒子效果 */
.burst-box { position: absolute; bottom: 100px; pointer-events: none; width: 1px; height: 1px; }
.item { 
    position: absolute; opacity: 0; user-select: none; 
    display: flex; align-items: center; justify-content: center;
    animation: silkPop 1.6s cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
}

.i-coin { width: calc(34px * var(--s)); height: calc(34px * var(--s)); border: calc(2px * var(--s)) solid var(--lc); border-radius: 50%; color: var(--lc); font-size: calc(16px * var(--s)); font-weight: 800; }
.i-red { width: calc(30px * var(--s)); height: calc(44px * var(--s)); border: calc(2px * var(--s)) solid var(--lc); border-radius: 3px; position: relative; }
.i-red::after { content: ''; position: absolute; top: 22%; left: 0; right: 0; height: calc(2px * var(--s)); background: var(--lc); }
.i-lantern { width: calc(38px * var(--s)); height: calc(36px * var(--s)); border: calc(2.2px * var(--s)) solid var(--lc); border-radius: 50% / 30%; }
.i-fire { width: calc(14px * var(--s)); height: calc(38px * var(--s)); border: calc(2px * var(--s)) solid var(--lc); border-radius: 2px; }

@keyframes silkPop {
    0% { transform: translate(0, 0) scale(0) rotate(0deg); opacity: 0; }
    15% { opacity: var(--op); }
    100% { transform: translate(var(--tx), var(--ty)) scale(0.9) rotate(var(--tr)); opacity: 0; }
}


@media only screen and (max-width:820px) {
    .luck-horse-box{
        bottom: inherit;
        top: 25%;
        right: 150px;
    }
}

@media only screen and (max-width:568px) {
    .luck-horse-box{
        top: 30%;
        right:20px;
        width: 340px;
    }
.bubble{
    font-size: 20px;
    padding: 20px;
    min-width: 310px;
}


}