* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    background: #0a0e27;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(138, 43, 226, 0.2) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 70%, rgba(0, 191, 255, 0.2) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 50%, rgba(255, 20, 147, 0.15) 0%, transparent 70%),
        radial-gradient(ellipse at 10% 80%, rgba(75, 0, 130, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 20%, rgba(30, 144, 255, 0.15) 0%, transparent 50%);
    pointer-events: none;
    animation: bgShift 25s ease-in-out infinite;
    z-index: 2;
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(180deg, 
            rgba(10, 14, 39, 0) 0%, 
            rgba(10, 14, 39, 0.3) 50%, 
            rgba(10, 14, 39, 0.6) 100%);
    pointer-events: none;
    z-index: 2;
}

@keyframes bgShift {
    0%, 100% { 
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
    33% { 
        opacity: 0.8;
        transform: scale(1.1) rotate(2deg);
    }
    66% { 
        opacity: 0.9;
        transform: scale(1.05) rotate(-2deg);
    }
}

/* Main Container */
.main-container {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Content Sections */
.content-section {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    pointer-events: none;
}

.content-section.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Bubble Section */
#bubble-section {
    position: relative;
    padding-top: 180px;
    min-height: 100vh;
}

.header {
    text-align: center;
    padding: 40px 20px 20px;
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: linear-gradient(180deg, rgba(10, 14, 39, 0.95) 0%, rgba(10, 14, 39, 0.8) 80%, transparent 100%);
    backdrop-filter: blur(10px);
    transition: all 0.5s ease;
}

.header.compact {
    padding: 20px 20px 10px;
}

.header.compact h1 {
    font-size: 1.8em;
    margin-bottom: 5px;
}

.header.compact .subtitle {
    font-size: 0.9em;
}

.header h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #00f5ff, #ff00ff, #00f5ff);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: neonGlow 3s ease-in-out infinite;
    text-shadow: 
        0 0 20px rgba(0, 245, 255, 0.5),
        0 0 40px rgba(255, 0, 255, 0.3);
    filter: drop-shadow(0 0 10px rgba(0, 245, 255, 0.7));
}

@keyframes neonGlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.subtitle {
    font-size: 1.1em;
    opacity: 0.8;
    color: #a0d8ff;
    text-shadow: 0 0 10px rgba(160, 216, 255, 0.5);
}

#bubble-container {
    position: relative;
    min-height: calc(100vh - 280px);
    padding-bottom: 100px;
    overflow: visible;
}

.bubble {
    position: absolute;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    font-size: 14px;
    color: white;
    font-weight: 500;
    transition: all 0.4s ease;
    animation: float 6s ease-in-out infinite;
    backdrop-filter: blur(15px);
    border: 2px solid rgba(255,255,255,0.2);
    box-shadow: 
        0 8px 32px rgba(0,0,0,0.3),
        inset 0 0 20px rgba(255,255,255,0.1);
}

.bubble::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 15%;
    width: 30%;
    height: 30%;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    filter: blur(10px);
}

.bubble:hover {
    transform: scale(1.1);
    filter: brightness(1.3);
}

.bubble.selected {
    transform: scale(1.15);
    animation: pulse 1.5s ease-in-out infinite, float 6s ease-in-out infinite;
}

.bubble.red { 
    background: radial-gradient(circle at 30% 30%, rgba(255, 20, 147, 0.9), rgba(139, 0, 139, 0.7));
    box-shadow: 
        0 0 40px rgba(255, 20, 147, 0.6),
        0 8px 32px rgba(0,0,0,0.3),
        inset 0 0 20px rgba(255,255,255,0.1);
}

.bubble.purple { 
    background: radial-gradient(circle at 30% 30%, rgba(138, 43, 226, 0.9), rgba(75, 0, 130, 0.7));
    box-shadow: 
        0 0 40px rgba(138, 43, 226, 0.6),
        0 8px 32px rgba(0,0,0,0.3),
        inset 0 0 20px rgba(255,255,255,0.1);
}

.bubble.yellow { 
    background: radial-gradient(circle at 30% 30%, rgba(255, 215, 0, 0.9), rgba(255, 140, 0, 0.7));
    box-shadow: 
        0 0 40px rgba(255, 215, 0, 0.6),
        0 8px 32px rgba(0,0,0,0.3),
        inset 0 0 20px rgba(255,255,255,0.1);
}

.bubble.blue { 
    background: radial-gradient(circle at 30% 30%, rgba(0, 191, 255, 0.9), rgba(30, 144, 255, 0.7));
    box-shadow: 
        0 0 40px rgba(0, 191, 255, 0.6),
        0 8px 32px rgba(0,0,0,0.3),
        inset 0 0 20px rgba(255,255,255,0.1);
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

/* 装饰元素专用浮动动画 - 杯口轻微摆动 */
@keyframes garnishFloat {
    0%, 100% { 
        transform: translateY(0px) rotate(var(--garnish-rotate, 0deg));
    }
    25% {
        transform: translateY(-2px) rotate(calc(var(--garnish-rotate, 0deg) + 2deg));
    }
    50% { 
        transform: translateY(-3px) rotate(var(--garnish-rotate, 0deg));
    }
    75% {
        transform: translateY(-2px) rotate(calc(var(--garnish-rotate, 0deg) - 2deg));
    }
}

@keyframes pulse {
    0%, 100% { 
        transform: scale(1.15);
        box-shadow: 
            0 0 40px currentColor,
            0 0 80px currentColor,
            0 8px 32px rgba(0,0,0,0.3);
    }
    50% { 
        transform: scale(1.25);
        box-shadow: 
            0 0 60px currentColor,
            0 0 100px currentColor,
            0 8px 32px rgba(0,0,0,0.3);
    }
}

/* 选择栏 */
.selection-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(10, 14, 39, 0.95);
    padding: 20px;
    box-shadow: 0 -4px 30px rgba(0, 191, 255, 0.3);
    border-top: 1px solid rgba(0, 191, 255, 0.3);
    backdrop-filter: blur(20px);
    z-index: 100;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.selection-bar.hidden {
    transform: translateY(100%);
    opacity: 0;
}

.selected-bubbles {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
    min-height: 40px;
}

.selected-tag {
    background: linear-gradient(135deg, rgba(0, 191, 255, 0.3), rgba(138, 43, 226, 0.3));
    border: 1px solid rgba(0, 191, 255, 0.5);
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 0 15px rgba(0, 191, 255, 0.3);
}

.selected-tag .remove {
    cursor: pointer;
    font-weight: bold;
}

.generate-btn {
    width: 100%;
    padding: 15px;
    border: 2px solid rgba(0, 191, 255, 0.5);
    border-radius: 25px;
    background: linear-gradient(135deg, rgba(0, 191, 255, 0.2), rgba(138, 43, 226, 0.2));
    color: white;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.generate-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.generate-btn:not(:disabled):hover::before {
    left: 100%;
}

.generate-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    border-color: rgba(255,255,255,0.2);
}

.generate-btn:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 
        0 0 30px rgba(0, 191, 255, 0.6),
        0 8px 20px rgba(0, 191, 255, 0.3);
    background: linear-gradient(135deg, rgba(0, 191, 255, 0.4), rgba(138, 43, 226, 0.4));
}

/* Fusion Animation Overlay */
.fusion-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 14, 39, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
    pointer-events: none;
}

.fusion-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.fusion-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 50% 50%, rgba(138, 43, 226, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(0, 191, 255, 0.3) 0%, transparent 70%);
    animation: fusionBg 2s ease-in-out infinite;
}

@keyframes fusionBg {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

.fusion-container {
    text-align: center;
    color: white;
    position: relative;
    z-index: 10;
}

.fusion-animation {
    width: 200px;
    height: 200px;
    margin: 0 auto 30px;
    position: relative;
}

.fusion-bubble {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    animation: fusionMove 2s ease-in-out forwards;
}

@keyframes fusionMove {
    0% { opacity: 1; }
    80% { opacity: 1; }
    100% { 
        opacity: 0;
        transform: translate(70px, 70px) scale(0);
    }
}

.fusion-text {
    font-size: 1.5em;
    animation: fadeInOut 2s ease-in-out infinite;
    background: linear-gradient(135deg, #00f5ff, #ff00ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 10px rgba(0, 245, 255, 0.5));
}

@keyframes fadeInOut {
    0%, 100% { 
        opacity: 0.5;
        filter: drop-shadow(0 0 10px rgba(0, 245, 255, 0.5));
    }
    50% { 
        opacity: 1;
        filter: drop-shadow(0 0 20px rgba(255, 0, 255, 0.8));
    }
}

/* Result Section */
#result-section {
    padding: 140px 20px 40px;
    min-height: 100vh;
    max-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.result-container {
    max-width: 550px;
    width: 100%;
    margin: 0 auto;
    background: rgba(15, 20, 45, 0.9);
    border-radius: 20px;
    padding: 25px 30px;
    box-shadow: 
        0 20px 60px rgba(0,0,0,0.5),
        0 0 40px rgba(0, 191, 255, 0.2),
        inset 0 0 60px rgba(138, 43, 226, 0.1);
    border: 1px solid rgba(0, 191, 255, 0.3);
    backdrop-filter: blur(20px);
    position: relative;
    z-index: 10;
    animation: slideInUp 0.6s ease-out;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    /* 隐藏滚动条 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

/* 隐藏滚动条 - Webkit浏览器 (Chrome, Safari) */
.result-container::-webkit-scrollbar {
    display: none;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cocktail-image {
    text-align: center;
    margin-bottom: 20px;
    margin-top: 10px;
    position: relative;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.85);
}

/* 鸡尾酒杯 - 马天尼杯造型 */
.glass {
    width: 160px;
    height: 220px;
    margin: 0 auto;
    position: relative;
    animation: fillGlass 1.5s ease-out;
}

/* 杯身 - 正三角形（杯口朝上） */
.glass::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 80px solid transparent;
    border-right: 80px solid transparent;
    border-top: 140px solid rgba(0, 191, 255, 0.15);
    filter: drop-shadow(0 0 20px rgba(0, 191, 255, 0.3));
}

/* 液体 - 带渐变的三角形（从底部填充） */
.glass::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 75px solid transparent;
    border-right: 75px solid transparent;
    border-top: 130px solid;
    border-top-color: var(--cocktail-color, rgba(138, 43, 226, 0.8));
    background: linear-gradient(0deg, 
        rgba(255, 20, 147, 0.9) 0%,
        rgba(138, 43, 226, 0.7) 50%,
        rgba(0, 191, 255, 0.3) 100%);
    filter: drop-shadow(0 0 30px var(--cocktail-glow, rgba(138, 43, 226, 0.6)))
            drop-shadow(0 5px 20px rgba(0,0,0,0.4));
    animation: fillLiquid 1.5s ease-out, liquidGlow 3s ease-in-out infinite;
    clip-path: polygon(10% 100%, 90% 100%, 100% 0%, 0% 0%);
}

/* 杯脚 */
.cocktail-image::before {
    content: '';
    position: absolute;
    top: 140px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 60px;
    background: linear-gradient(180deg, 
        rgba(255, 255, 255, 0.4) 0%,
        rgba(200, 200, 200, 0.6) 100%);
    box-shadow: 
        inset 1px 0 2px rgba(255, 255, 255, 0.5),
        2px 0 10px rgba(0, 191, 255, 0.3);
    z-index: -1;
}

/* 杯底 */
.cocktail-image::after {
    content: '';
    position: absolute;
    top: 200px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 12px;
    background: radial-gradient(ellipse at center,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(200, 200, 200, 0.5) 50%,
        rgba(150, 150, 150, 0.4) 100%);
    border-radius: 50%;
    box-shadow: 
        0 2px 5px rgba(0,0,0,0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.4);
    z-index: -1;
}

/* 杯口光泽 */
.glass-rim {
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 165px;
    height: 10px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.5) 15%,
        rgba(255, 255, 255, 0.8) 50%,
        rgba(255, 255, 255, 0.5) 85%,
        transparent 100%);
    border-radius: 50%;
    filter: blur(3px);
    opacity: 0.9;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
    z-index: 5;
}

/* 气泡效果 */
.bubble-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: bubbleRise 4s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.bubble-particle:nth-child(2) {
    top: 110px;
    left: 45%;
    animation-delay: 0s;
}

.bubble-particle:nth-child(3) {
    top: 115px;
    left: 55%;
    animation-delay: 0.8s;
}

.bubble-particle:nth-child(4) {
    top: 105px;
    left: 50%;
    animation-delay: 1.6s;
}

.bubble-particle:nth-child(5) {
    top: 112px;
    left: 48%;
    animation-delay: 2.4s;
}

@keyframes bubbleRise {
    0% { 
        transform: translateY(0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 0.8;
    }
    100% { 
        transform: translateY(-100px) scale(0.3);
        opacity: 0;
    }
}

@keyframes fillLiquid {
    from { 
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to { 
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes liquidGlow {
    0%, 100% { 
        filter: drop-shadow(0 0 30px var(--cocktail-glow, rgba(138, 43, 226, 0.6)))
                drop-shadow(0 10px 20px rgba(0,0,0,0.4));
    }
    50% { 
        filter: drop-shadow(0 0 50px var(--cocktail-glow, rgba(0, 191, 255, 0.8)))
                drop-shadow(0 10px 20px rgba(0,0,0,0.4));
    }
}

@keyframes fillGlass {
    from { 
        opacity: 0;
        transform: scale(0.8);
    }
    to { 
        opacity: 1;
        transform: scale(1);
    }
}

/* 装饰元素容器 - 紧贴杯口 */
.glass .cocktail-garnish {
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: 45px;
    font-size: 36px;
    --garnish-rotate: -15deg;
    animation: garnishFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.7))
            drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
    z-index: 15;
    transform: rotate(-15deg);
    transform-origin: center;
}

.glass .cocktail-garnish-2 {
    position: absolute;
    top: -8px;
    left: 50%;
    margin-left: -65px;
    font-size: 34px;
    --garnish-rotate: 12deg;
    animation: garnishFloat 3s ease-in-out infinite 0.5s;
    filter: drop-shadow(0 0 12px rgba(0, 255, 127, 0.7))
            drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
    z-index: 15;
    transform: rotate(12deg);
    transform-origin: center;
}

.cocktail-name {
    text-align: center;
    font-size: 1.6em;
    background: linear-gradient(135deg, #00f5ff, #ff00ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 10px rgba(0, 245, 255, 0.5));
}

.ingredients, .description, .suggestion {
    margin-bottom: 18px;
}

.ingredients h3, .description h3, .suggestion h3 {
    color: #00d4ff;
    margin-bottom: 8px;
    font-size: 1.1em;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

#ingredients-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ingredient-tag {
    background: rgba(0, 191, 255, 0.15);
    border: 1px solid rgba(0, 191, 255, 0.3);
    padding: 8px 15px;
    border-radius: 15px;
    font-size: 14px;
    color: #a0d8ff;
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.2);
}

.description p, .suggestion p {
    line-height: 1.6;
    color: #b8c5d6;
    font-size: 0.95em;
}

.actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.share-btn, .restart-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 25px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.share-btn {
    background: linear-gradient(135deg, rgba(0, 191, 255, 0.3), rgba(138, 43, 226, 0.3));
    border: 2px solid rgba(0, 191, 255, 0.5);
    color: white;
    box-shadow: 0 0 20px rgba(0, 191, 255, 0.3);
}

.restart-btn {
    background: rgba(15, 20, 45, 0.5);
    color: #00d4ff;
    border: 2px solid rgba(0, 191, 255, 0.5);
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.3);
}

.share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 0 30px rgba(0, 191, 255, 0.6),
        0 8px 20px rgba(0, 191, 255, 0.3);
}

.restart-btn:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 0 30px rgba(138, 43, 226, 0.6),
        0 8px 20px rgba(138, 43, 226, 0.3);
}

/* 响应式 */
@media (max-width: 768px) {
    .header h1 {
        font-size: 2em;
    }
    
    .result-container {
        padding: 30px 20px;
    }
    
    .actions {
        flex-direction: column;
    }
}

/* 炫酷夜晚星空背景 */
.stars, .stars2, .stars3 {
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
    z-index: 1;
}

/* 第一层：小星星（白色闪烁） */
.stars {
    background: transparent;
    box-shadow: 
        150px 80px 1px 0px rgba(255,255,255,0.9),
        350px 120px 1px 0px rgba(255,255,255,0.8),
        550px 200px 1px 0px rgba(255,255,255,0.7),
        750px 50px 1px 0px rgba(255,255,255,0.9),
        950px 180px 1px 0px rgba(255,255,255,0.8),
        1150px 90px 1px 0px rgba(255,255,255,0.7),
        1350px 250px 1px 0px rgba(255,255,255,0.9),
        1550px 140px 1px 0px rgba(255,255,255,0.8),
        1750px 300px 1px 0px rgba(255,255,255,0.7),
        200px 400px 1px 0px rgba(255,255,255,0.9),
        400px 500px 1px 0px rgba(255,255,255,0.8),
        600px 350px 1px 0px rgba(255,255,255,0.7),
        800px 450px 1px 0px rgba(255,255,255,0.9),
        1000px 550px 1px 0px rgba(255,255,255,0.8),
        1200px 420px 1px 0px rgba(255,255,255,0.7),
        1400px 480px 1px 0px rgba(255,255,255,0.9),
        1600px 380px 1px 0px rgba(255,255,255,0.8),
        1800px 520px 1px 0px rgba(255,255,255,0.7),
        250px 650px 1px 0px rgba(255,255,255,0.9),
        450px 720px 1px 0px rgba(255,255,255,0.8),
        650px 680px 1px 0px rgba(255,255,255,0.7),
        850px 750px 1px 0px rgba(255,255,255,0.9),
        1050px 620px 1px 0px rgba(255,255,255,0.8),
        1250px 780px 1px 0px rgba(255,255,255,0.7),
        1450px 660px 1px 0px rgba(255,255,255,0.9),
        1650px 820px 1px 0px rgba(255,255,255,0.8),
        1850px 700px 1px 0px rgba(255,255,255,0.7),
        100px 150px 1px 0px rgba(255,255,255,0.9),
        300px 280px 1px 0px rgba(255,255,255,0.8),
        500px 100px 1px 0px rgba(255,255,255,0.7);
    animation: twinkle 4s ease-in-out infinite;
}

/* 第二层：中等星星（霓虹色） */
.stars2 {
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: 
        180px 150px 2px 1px rgba(0, 191, 255, 0.9),
        480px 250px 2px 1px rgba(138, 43, 226, 0.9),
        780px 100px 2px 1px rgba(255, 20, 147, 0.9),
        1080px 320px 2px 1px rgba(0, 191, 255, 0.9),
        1380px 180px 2px 1px rgba(138, 43, 226, 0.9),
        1680px 280px 2px 1px rgba(255, 20, 147, 0.9),
        280px 450px 2px 1px rgba(0, 191, 255, 0.9),
        580px 580px 2px 1px rgba(138, 43, 226, 0.9),
        880px 420px 2px 1px rgba(255, 20, 147, 0.9),
        1180px 520px 2px 1px rgba(0, 191, 255, 0.9),
        1480px 380px 2px 1px rgba(138, 43, 226, 0.9),
        1780px 620px 2px 1px rgba(255, 20, 147, 0.9),
        380px 720px 2px 1px rgba(0, 191, 255, 0.9),
        680px 650px 2px 1px rgba(138, 43, 226, 0.9),
        980px 780px 2px 1px rgba(255, 20, 147, 0.9),
        1280px 680px 2px 1px rgba(0, 191, 255, 0.9),
        1580px 820px 2px 1px rgba(138, 43, 226, 0.9),
        1880px 750px 2px 1px rgba(255, 20, 147, 0.9);
    animation: twinkle 5s ease-in-out infinite 0.5s;
}

/* 第三层：大星星（金色闪耀） */
.stars3 {
    width: 3px;
    height: 3px;
    background: transparent;
    box-shadow: 
        220px 200px 3px 2px rgba(255, 215, 0, 0.8),
        620px 350px 3px 2px rgba(255, 215, 0, 0.8),
        1020px 150px 3px 2px rgba(255, 215, 0, 0.8),
        1420px 450px 3px 2px rgba(255, 215, 0, 0.8),
        1820px 280px 3px 2px rgba(255, 215, 0, 0.8),
        420px 600px 3px 2px rgba(255, 215, 0, 0.8),
        820px 520px 3px 2px rgba(255, 215, 0, 0.8),
        1220px 720px 3px 2px rgba(255, 215, 0, 0.8),
        1620px 580px 3px 2px rgba(255, 215, 0, 0.8),
        320px 80px 3px 2px rgba(255, 215, 0, 0.8);
    animation: twinkle 6s ease-in-out infinite 1s;
}

/* 闪烁动画 */
@keyframes twinkle {
    0%, 100% { 
        opacity: 0.3;
        transform: scale(1);
    }
    25% { 
        opacity: 1;
        transform: scale(1.2);
    }
    50% { 
        opacity: 0.5;
        transform: scale(0.9);
    }
    75% { 
        opacity: 1;
        transform: scale(1.1);
    }
}

/* 夜空容器 */
.night-sky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

/* 流星效果 */
.shooting-star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.8);
    animation: shootingStar 8s linear infinite;
    opacity: 0;
}

@keyframes shootingStar {
    0% {
        opacity: 0;
        transform: translate(0, 0) rotate(-45deg);
    }
    5% {
        opacity: 1;
    }
    10% {
        opacity: 0;
        transform: translate(300px, 300px) rotate(-45deg);
    }
    100% {
        opacity: 0;
        transform: translate(300px, 300px) rotate(-45deg);
    }
}

.shooting-star:nth-child(4) {
    top: 10%;
    left: 20%;
    animation-duration: 7s;
}

.shooting-star:nth-child(5) {
    top: 30%;
    left: 60%;
    animation-duration: 9s;
}

.shooting-star:nth-child(6) {
    top: 50%;
    left: 80%;
    animation-duration: 8s;
}

.shooting-star::before {
    content: '';
    position: absolute;
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.8) 0%, 
        rgba(255, 255, 255, 0.4) 50%, 
        transparent 100%);
    transform: translateX(-100px);
    border-radius: 50%;
}

/* 增强气泡容器的神秘感 */
#bubble-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(138, 43, 226, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(0, 191, 255, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(255, 20, 147, 0.05) 0%, transparent 50%);
    animation: mysteryPulse 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes mysteryPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Content fade in animation */
.content-section.active .result-container {
    animation: fadeInScale 0.6s ease-out;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}