/* 引入字体 */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* 棋盘和棋子样式 */
#game-board {
    background:rgba(2, 27, 76, 0.3);
    background-size: cover;
    background-position: center;
    position: relative;
}
#game-board::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(white, rgba(255, 255, 255, 0.2) 2px, transparent 3px),
        radial-gradient(white, rgba(255, 255, 255, 0.15) 1px, transparent 2px),
        radial-gradient(white, rgba(255, 255, 255, 0.1) 2px, transparent 3px);
    background-size: 550px 550px, 350px 350px, 250px 250px;
    background-position: 0 0, 40px 60px, 130px 270px;
    z-index: 1;
}

.cell {
    position: absolute;
    transition: all 0.2s ease;
    z-index: 5;
    border: 1px solid transparent; /* 基础边框 */
    box-shadow: 0 0 0 0.5px rgb(246, 245, 255); /* 用阴影模拟更细边框 */
}

.piece {
    position: absolute;
    cursor: pointer;
    transition: all 0.3s ease;
    transform-origin: center;
    z-index: 10;
    background: none !important;
}

.piece:hover {
    transform: scale(1.05);
}

/* 动画效果 - 整个格子变色 */
@keyframes pulse {
    0% {
        background-color: rgba(129, 199, 132, 0.3);
    }
    50% {
        background-color: rgba(129, 199, 132, 0.7);
    }
    100% {
        background-color: rgba(129, 199, 132, 0.3);
    }
}

@keyframes attack-pulse {
    0% {
        background-color: rgba(244, 67, 54, 0.3);
    }
    50% {
        background-color: rgba(244, 67, 54, 0.7);
    }
    100% {
        background-color: rgba(244, 67, 54, 0.3);
    }
}

/* 交换位置的动画 */
@keyframes swap-pulse {
    0% {
        background-color: rgba(156, 39, 176, 0.3);
    }
    50% {
        background-color: rgba(156, 39, 176, 0.7);
    }
    100% {
        background-color: rgba(156, 39, 176, 0.3);
    }
}

/* 攻击动画 */
@keyframes attack-animation {
    0% { transform: translateX(0); }
    25% { transform: translateX(5px); }
    50% { transform: translateX(-5px); }
    75% { transform: translateX(3px); }
    100% { transform: translateX(0); }
}

/* 交换位置动画 */
@keyframes swap-animation {
    0% { transform: scale(1) translateX(0); opacity: 1; }
    50% { transform: scale(1.1) translateX(10px); opacity: 0.7; }
    100% { transform: scale(1) translateX(0); opacity: 1; }
}

.attacking {
    animation: attack-animation 0.5s ease;
}

.swapping {
    animation: swap-animation 0.8s ease;
}

/* 伤害数字动画 */
@keyframes damage-popup {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-20px); }
}

.damage-popup {
    position: absolute;
    color: #ff4444;
    font-weight: bold;
    pointer-events: none;
    animation: damage-popup 1s ease forwards;
    z-index: 30;
}

/* 交换提示动画 */
@keyframes swap-popup {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-20px); }
}

.swap-popup {
    position: absolute;
    color: #dd1fff;
    font-weight: bold;
    pointer-events: none;
    animation: swap-popup 1s ease forwards;
    z-index: 30;
}

/* 棋包卡片动画 */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 滚动条样式 */
#message-area {
    scrollbar-width: thin;
    scrollbar-color: #3B8BFC #1E293B;
}

#message-area::-webkit-scrollbar {
    width: 6px;
}

#message-area::-webkit-scrollbar-track {
    background: #1E293B;
}

#message-area::-webkit-scrollbar-thumb {
    background-color: #3B8BFC;
    border-radius: 20px;
}

/* 纵向血量条容器 - 调整为垂直方向的flex布局，让文本在底部 */
.vertical-health-container {
    position: absolute;
    z-index: 15;
    pointer-events: none;
    width: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

/* 纵向血量条背景 - 占据除文本外的所有空间 */
.vertical-health-bar-bg {
    position: relative;
    width: 100%;
    height: calc(100% - 14px); /* 减去文本高度 */
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 0;
    overflow: hidden;
}

/* 纵向血量条 */
.vertical-health-bar {
    transition: height 0.3s ease-in-out;
    position: absolute;
    bottom: 0;
    width: 100%;
    border-radius: 0;
}

/* 满血状态 - 绿色 */
.vertical-health-bar.health-full {
    background: linear-gradient(to top, #4CAF50, #00f341);
}

/* 半血状态 - 黄色 */
.vertical-health-bar.health-half {
    background: linear-gradient(to top, #FFC107, #FFFF00);
}

/* 危险状态 - 红色 */
.vertical-health-bar.health-low {
    background: linear-gradient(to top, #F44336, #FF0000);
}

/* 恶食大王吞噬后 - 紫色 */
.vertical-health-bar.health-guzzlord {
    background: linear-gradient(to top, #414141, #b1b1b1);
}

/* 纵向血量条下方的数值 - 调整为自适应大小 */
.vertical-health-value {
    position: relative;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    font-size: clamp(8px, 1.5vw, 10px); /* 自适应字体大小 */
    padding: 1px 3px;
    border-radius: 0;
    text-align: center;
    z-index: 30;
    font-weight: bold;
    min-width: 12px;
    width: auto;
    max-width: 40px;
    height: 12px;
    line-height: 12px;
    margin-top: 2px;
    margin-bottom: 0px;
    white-space: nowrap;
    overflow: visible;
    transform-origin: center;
}

/* 当数值包含小数点时（较长），自动缩小字体 */
.vertical-health-value.long-value {
    font-size: 7px;
    transform: scale(0.9);
}

/* 攻击力容器 */
.attack-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 攻击力数值 - 调整为自适应大小 */
.attack-value {
    position: relative;
    color: white;
    font-size: clamp(9px, 2vw, 11px); /* 自适应字体大小 */
    font-weight: bold;
    z-index: 30;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    white-space: nowrap;
    overflow: visible;
    transform-origin: center;
}

/* 当攻击力包含小数点时（较长），自动缩小字体 */
.attack-value.long-value {
    font-size: 8px;
    transform: scale(0.85);
}

/* 攻击力红色圆圈背景 */
.attack-circle {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #3b82f6; /* 将红色改为蓝色 */
    z-index: 20;
}

/* 格子右上角信息容器 - 调整为支持垂直排列 */
.cell-corner-info {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5; /* 从15改为5，降低层级 */
    pointer-events: none;
    display: flex;
    align-items: center;
}

/* 属性图标样式 */
.type-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 50%;
    margin-bottom: 2px;
}

/* 攻击力容器 */
.attack-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 攻击力数值 */
.attack-value {
    position: relative;
    color: white;
    font-size: 10px;
    font-weight: bold;
    z-index: 20;
    text-align: center;
    width: 16px;
    height: 16px;
    line-height: 16px;
}

/* 红色圆圈背景 */
.attack-circle {
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: #3b82f6; /* 将#F44336红色改为#3b82f6蓝色 */
    border-radius: 50%;
    z-index: 10;
}

/* 盖欧卡降雨特效 - 蓝色底部填充 */
.attack-circle.rain-boosted {
    background: linear-gradient(to top, #3b82f6 3px, #F44336 3px);
    box-shadow: 0 0 3px rgba(59, 130, 246, 0.7);
}

/* 联机功能样式 */
.avatar-option {
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.avatar-option:hover, .avatar-option.selected {
    border-color: #3B8BFC;
    transform: scale(1.05);
}

#chat-input {
    transition: all 0.2s ease;
}

#chat-input:focus {
    border-color: #3B8BFC;
}

/* 自定义工具类的CSS实现 */
.content-auto {
    content-visibility: auto;
}

.cell-highlight {
    animation: pulse 1.5s infinite;
}

.cell-attack {
    animation: attack-pulse 1.2s infinite;
}

.cell-swap {
    animation: swap-pulse 1.5s infinite;
}

/* 添加巨钳螳螂攻击模式的红色高亮样式 */
.cell-scizor-attack {
    animation: scizor-attack-pulse 1s infinite;
}

@keyframes scizor-attack-pulse {
    0% {
        background-color: rgba(244, 67, 54, 0.4);
        box-shadow: 0 0 8px 2px rgba(244, 67, 54, 0.3);
    }
    50% {
        background-color: rgba(244, 67, 54, 0.8);
        box-shadow: 0 0 12px 4px rgba(244, 67, 54, 0.6);
    }
    100% {
        background-color: rgba(244, 67, 54, 0.4);
        box-shadow: 0 0 8px 2px rgba(244, 67, 54, 0.3);
    }
}

.cell-blue {
    box-shadow: 0 0 0 2px #3B8BFC, 0 0 8px 2px rgba(59, 139, 252, 0.5);
}

.cell-red {
    box-shadow: 0 0 0 2px #FF5252, 0 0 8px 2px rgba(255, 82, 82, 0.5);
}

.cell-selected {
    box-shadow: 0 0 0 2px #FFD700, 0 0 8px 2px rgba(255, 215, 0, 0.5);
}

.health-bar {
    transition: width 0.3s ease-in-out;
}

/* 筛选和排序控件样式 */
.type-filter-btn {
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.type-filter-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.type-filter-btn.bg-primary {
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 0 1px rgba(66, 153, 225, 0.5);
}

#type-filter-buttons {
    border: 1px solid #444;
    border-radius: 8px;
    padding: 8px;
    background-color: rgba(0, 0, 0, 0.3);
}


/* 重置筛选按钮样式 */
#reset-filter {
    transition: all 0.2s ease;
}

#reset-filter:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 美化属性筛选按钮的滚动条 */
#type-filter-buttons::-webkit-scrollbar {
    width: 6px;
}

#type-filter-buttons::-webkit-scrollbar-track {
    background: #1f2937;
    border-radius: 3px;
}

#type-filter-buttons::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 3px;
}

#type-filter-buttons::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* 卡片选中效果增强 */
.card.ring-2.ring-primary {
    box-shadow: 0 0 15px rgba(1, 200, 51, 1);
}

/* 联机对战弹窗样式 */ 
 #online-modal .modal-content { 
     background: linear-gradient(135deg, #1E293B 0%, #2D3748 100%); 
     border-radius: 12px; 
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); 
 }
 
 #online-message-area { 
     background: rgba(0, 0, 0, 0.3); 
     border-radius: 8px; 
     padding: 10px; 
     height: 120px; 
     overflow-y: auto; 
     font-size: 12px; 
 }
 
 #online-message-area::-webkit-scrollbar { 
     width: 4px; 
 }
 
 #online-message-area::-webkit-scrollbar-thumb { 
     background: #3B8BFC; 
     border-radius: 2px; 
 }
 
 .avatar-option { 
     transition: all 0.2s ease; 
     border: 2px solid transparent; 
 }
 
 .avatar-option:hover { 
     transform: scale(1.05); 
     border-color: #3B8BFC !important; 
 }
 
 #room-code-display { 
     font-family: monospace; 
     font-size: 1.2em; 
     letter-spacing: 2px; 
     background: rgba(0, 0, 0, 0.3); 
     padding: 5px 10px; 
     border-radius: 4px; 
 }
 
 .online-status { 
     display: inline-block; 
     width: 10px; 
     height: 10px; 
     border-radius: 50%; 
     background: #4CAF50; 
     margin-right: 5px; 
 }
 
 .online-status.offline { 
     background: #F44336; 
 }

/* 增强版动态星空效果 - 随机化改进 */
/* 移除原有的#game-board::after样式，替换为更随机的实现 */
#game-board::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        /* 大型星星 */
        radial-gradient(white, rgba(255, 255, 255, 0.3) 1px, transparent 2px),
        radial-gradient(white, rgba(255, 255, 255, 0.25) 1px, transparent 1.5px),
        /* 中型星星 */
        radial-gradient(white, rgba(255, 255, 255, 0.2) 1px, transparent 2px),
        radial-gradient(white, rgba(255, 255, 255, 0.15) 1px, transparent 1.5px),
        /* 小型星星 */
        radial-gradient(white, rgba(255, 255, 255, 0.1) 1px, transparent 1.5px),
        radial-gradient(white, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    /* 调整星星分布和密度 */
    background-size: 
        300px 300px, 
        250px 250px, 
        200px 200px, 
        150px 150px, 
        100px 100px, 
        50px 50px;
    /* 更随机的背景位置 */
    background-position: 
        0 0, 
        50px 100px, 
        100px 50px, 
        150px 150px, 
        75px 200px, 
        125px 250px;
    z-index: 2;
    animation: star-twinkle 10s infinite ease-in-out;
    animation-delay: var(--twinkle-delay, 0s);
}

/* 新增多层星空，每一层使用不同的动画延迟和参数 */
.star-field {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    background-image: 
        radial-gradient(white, rgba(255, 255, 255, 0.2) 1px, transparent 1.5px),
        radial-gradient(white, rgba(255, 255, 255, 0.15) 1px, transparent 1.5px),
        radial-gradient(white, rgba(255, 255, 255, 0.1) 1px, transparent 1.5px);
    background-size: 
        350px 350px, 
        250px 250px, 
        150px 150px;
    /* 更随机的位置 */
    background-position: 
        0 0, 
        40px 60px, 
        130px 270px;
    z-index: 3;
    animation: star-move 60s linear infinite;
    animation-delay: var(--move-delay, 0s);
}

/* 随机化不同层的星星动画 */
.star-field.layer-1 { --move-delay: 0s; --twinkle-delay: 0s; }
.star-field.layer-2 { --move-delay: 10s; --twinkle-delay: 2s; }
.star-field.layer-3 { --move-delay: 20s; --twinkle-delay: 4s; }
.star-field.layer-4 { --move-delay: 30s; --twinkle-delay: 1s; }
.star-field.layer-5 { --move-delay: 40s; --twinkle-delay: 3s; }

/* 第三层移动较慢的星空 */
.star-field.layer-2 {
    width: 150%;
    height: 150%;
    background-image: 
        radial-gradient(white, rgba(255, 255, 255, 0.15) 1px, transparent 2px),
        radial-gradient(white, rgba(255, 255, 255, 0.1) 1px, transparent 1.5px);
    background-size: 
        450px 450px, 
        350px 350px;
    background-position: 
        100px 100px, 
        200px 150px;
    z-index: 4;
    animation: star-move-slow 120s linear infinite;
}

/* 添加更多随机分布的星星层 */
.star-field.layer-3 {
    width: 180%;
    height: 180%;
    background-image: 
        radial-gradient(white, rgba(255, 255, 255, 0.18) 1px, transparent 1.8px),
        radial-gradient(white, rgba(255, 255, 255, 0.12) 1px, transparent 1.3px);
    background-size: 
        400px 400px, 
        300px 300px;
    background-position: 
        80px 120px, 
        150px 200px;
    z-index: 5;
    animation: star-move-medium 80s linear infinite;
}

.star-field.layer-4 {
    width: 130%;
    height: 130%;
    background-image: 
        radial-gradient(white, rgba(255, 255, 255, 0.1) 1px, transparent 1.5px);
    background-size: 
        280px 280px;
    background-position: 
        120px 80px;
    z-index: 6;
    animation: star-move-fast 40s linear infinite;
}

.star-field.layer-5 {
    width: 220%;
    height: 220%;
    background-image: 
        radial-gradient(white, rgba(255, 255, 255, 0.08) 1px, transparent 1.2px),
        radial-gradient(white, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 
        320px 320px, 
        220px 220px;
    background-position: 
        140px 160px, 
        220px 90px;
    z-index: 7;
    animation: star-move-super-slow 150s linear infinite;
}

/* 多个不同的星星闪烁动画，增加随机性 */
@keyframes star-twinkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    25% { opacity: 0.8; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1.05); }
    75% { opacity: 0.9; transform: scale(0.98); }
}

/* 第二个闪烁动画，节奏略有不同 */
@keyframes star-twinkle-2 {
    0%, 100% { opacity: 0.9; transform: scale(0.95); }
    20% { opacity: 1; transform: scale(1); }
    55% { opacity: 0.85; transform: scale(0.98); }
    85% { opacity: 1; transform: scale(1.02); }
}

/* 第三个闪烁动画 */
@keyframes star-twinkle-3 {
    0%, 100% { opacity: 0.95; transform: scale(1); }
    30% { opacity: 0.7; transform: scale(0.9); }
    60% { opacity: 1; transform: scale(1.08); }
    80% { opacity: 0.85; transform: scale(0.97); }
}

/* 应用不同的闪烁动画到不同层 */
.star-field.layer-1 {
    animation: star-twinkle 10s infinite ease-in-out, star-move 60s linear infinite;
}

.star-field.layer-2 {
    animation: star-twinkle-2 12s infinite ease-in-out, star-move-slow 120s linear infinite;
}

.star-field.layer-3 {
    animation: star-twinkle-3 8s infinite ease-in-out, star-move-medium 80s linear infinite;
}

.star-field.layer-4 {
    animation: star-twinkle 14s infinite ease-in-out, star-move-fast 40s linear infinite;
}

.star-field.layer-5 {
    animation: star-twinkle-2 16s infinite ease-in-out, star-move-super-slow 150s linear infinite;
}

/* 星空缓慢移动动画 - 添加一些随机的移动路径 */
@keyframes star-move {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-15%, -5%); }
    50% { transform: translate(-30%, -15%); }
    75% { transform: translate(-42%, -20%); }
    100% { transform: translate(-50%, -25%); }
}

/* 第二层星空更缓慢移动 */
@keyframes star-move-slow {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-8%, -3%); }
    50% { transform: translate(-15%, -7%); }
    75% { transform: translate(-20%, -10%); }
    100% { transform: translate(-25%, -12.5%); }
}

/* 中等速度移动动画 */
@keyframes star-move-medium {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-20%, -10%); }
    50% { transform: translate(-40%, -20%); }
    75% { transform: translate(-60%, -25%); }
    100% { transform: translate(-70%, -30%); }
}

/* 快速移动动画 */
@keyframes star-move-fast {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-30%, -15%); }
    50% { transform: translate(-60%, -30%); }
    75% { transform: translate(-90%, -40%); }
    100% { transform: translate(-120%, -50%); }
}

/* 超慢速移动动画 */
@keyframes star-move-super-slow {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-5%, -2%); }
    50% { transform: translate(-10%, -5%); }
    75% { transform: translate(-18%, -8%); }
    100% { transform: translate(-25%, -12%); }
}



/* 盖欧卡下雨特效 - 更细更密集的雨滴 */
.rain-effect {
    position: absolute;
    pointer-events: none;
    z-index: 8;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 2px solid rgba(30, 144, 255, 0.3);
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 191, 255, 0.4);
}

.rain-drop {
    position: absolute;
    width: 1px; /* 更细的雨滴 */
    height: 25px; /* 更长的雨滴 */
    background: linear-gradient(to bottom, 
        rgba(0, 191, 255, 0.9) 0%, 
        rgba(30, 144, 255, 0.7) 30%, 
        rgba(70, 130, 180, 0.4) 70%, 
        rgba(30, 144, 255, 0.2) 100%);
    border-radius: 0.5px;
    box-shadow: 0 0 3px rgba(0, 191, 255, 0.6);
    animation: rain-fall 0.8s linear infinite; /* 更快的下落速度 */
    transform: rotate(-15deg) skewX(-5deg);
}

@keyframes rain-fall {
    0% {
        transform: translateY(-40px) rotate(-15deg) skewX(-5deg);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.7;
    }
    100% {
        transform: translateY(180px) rotate(-15deg) skewX(-5deg);
        opacity: 0;
    }
}

/* 增加雨滴密度和变化 */
.rain-drop:nth-child(odd) {
    width: 0.8px;
    height: 22px;
    animation-duration: 0.7s;
}

.rain-drop:nth-child(even) {
    width: 1.2px;
    height: 28px;
    animation-duration: 0.9s;
}

.rain-drop:nth-child(3n) {
    transform: rotate(-18deg) skewX(-7deg);
    animation-duration: 0.6s;
}

.rain-drop:nth-child(5n) {
    transform: rotate(-12deg) skewX(-3deg);
    animation-duration: 1s;
}

.rain-drop:nth-child(7n) {
    width: 0.6px;
    height: 20px;
    animation-duration: 0.5s;
}

.rain-drop:nth-child(11n) {
    width: 1.5px;
    height: 30px;
    animation-duration: 1.1s;
}

/* 吞噬提示动画 */
@keyframes devour-popup {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-20px); }
}

.devour-popup {
    position: absolute;
    color: #f1bd00; /* 紫色文字 */
    font-weight: bold;
    pointer-events: none;
    animation: devour-popup 1s ease forwards;
    z-index: 30;
    font-size: 18px;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
}

/* 原始盖欧卡全棋盘下雨特效 */
.primal-kyogre-full-rain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 7;
    overflow: hidden;
    border: 3px solid rgba(0, 100, 255, 0.5);
    border-radius: 12px;
    box-shadow: 0 0 25px rgba(0, 150, 255, 0.6);
}

.primal-rain-drop {
    position: absolute;
    width: 1.2px;
    height: 35px;
    background: linear-gradient(to bottom, 
        rgba(0, 200, 255, 0.9) 0%, 
        rgba(0, 100, 255, 0.7) 30%, 
        rgba(0, 50, 200, 0.5) 70%, 
        rgba(0, 100, 255, 0.3) 100%);
    border-radius: 0.6px;
    box-shadow: 0 0 5px rgba(0, 200, 255, 0.8);
    animation: primal-rain-fall 1.2s linear infinite;
    transform: rotate(-12deg) skewX(-4deg);
}

@keyframes primal-rain-fall {
    0% {
        transform: translateY(-100px) rotate(-12deg) skewX(-4deg);
        opacity: 0;
    }
    10% {
        opacity: 0.9;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(640px) rotate(-12deg) skewX(-4deg);
        opacity: 0;
    }
}

/* 增加雨滴变化效果 */
.primal-rain-drop:nth-child(odd) {
    width: 1px;
    height: 30px;
    animation-duration: 1s;
    transform: rotate(-15deg) skewX(-6deg);
}

.primal-rain-drop:nth-child(even) {
    width: 1.4px;
    height: 40px;
    animation-duration: 1.4s;
    transform: rotate(-10deg) skewX(-2deg);
}

.primal-rain-drop:nth-child(3n) {
    width: 0.8px;
    height: 25px;
    animation-duration: 0.9s;
    transform: rotate(-18deg) skewX(-8deg);
}

.primal-rain-drop:nth-child(5n) {
    width: 1.6px;
    height: 45px;
    animation-duration: 1.6s;
    transform: rotate(-8deg) skewX(-1deg);
}

.primal-rain-drop:nth-child(7n) {
    background: linear-gradient(to bottom, 
        rgba(100, 200, 255, 0.9) 0%, 
        rgba(50, 150, 255, 0.7) 30%, 
        rgba(0, 100, 220, 0.5) 70%, 
        rgba(50, 150, 255, 0.3) 100%);
}

.primal-rain-drop:nth-child(11n) {
    background: linear-gradient(to bottom, 
        rgba(0, 150, 255, 0.9) 0%, 
        rgba(0, 80, 220, 0.7) 30%, 
        rgba(0, 50, 180, 0.5) 70%, 
        rgba(0, 80, 220, 0.3) 100%);
    box-shadow: 0 0 6px rgba(0, 180, 255, 0.9);
}
/* 班基拉斯沙尘暴特效 - 深色版本 */
.sandstorm-effect {
    position: absolute;
    pointer-events: none;
    z-index: 8;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 2px solid rgba(139, 69, 19, 0.6); /* 更深的边框颜色，增加不透明度 */
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(139, 69, 19, 0.6); /* 更深的阴影颜色，增加不透明度 */
    background: rgba(139, 69, 19, 0.2); /* 更深的背景色，增加不透明度 */
}

.sand-particle {
    position: absolute;
    background: linear-gradient(to right, 
        rgba(139, 69, 19, 1) 0%, 
        rgba(160, 82, 45, 1) 50%, 
        rgba(101, 67, 33, 1) 100%); /* 深色沙子渐变 */
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(139, 69, 19, 0.8); /* 更深的阴影，增加大小 */
    animation: sand-fly 0.4s linear infinite;
    opacity: 0;
    top: var(--start-y, 50%);
    left: -20px;
}

@keyframes sand-fly {
    0% {
        transform: translateX(0) scale(0.5);
        opacity: 0;
    }
    10% {
        opacity: 1; /* 增加不透明度，使粒子更明显 */
    }
    90% {
        opacity: 0.9;
    }
    100% {
        transform: translateX(calc(100% + 40px)) scale(0.5);
        opacity: 0;
    }
}

/* 粒子大小调整 - 增加粒子尺寸，使它们更明显 */
.sand-particle:nth-child(odd) {
    width: 8px;
    height: 7px;
}

.sand-particle:nth-child(even) {
    width: 7px;
    height: 4px;
}

.sand-particle:nth-child(3n) {
    width: 6px;
    height: 3.5px;
}

.sand-particle:nth-child(5n) {
    width: 9px;
    height: 5px;
}

/* 垂直位置变化 - 保持不变 */
.sand-particle:nth-child(3n+1) {
    --start-y: 10%;
}

.sand-particle:nth-child(3n+2) {
    --start-y: 30%;
}

.sand-particle:nth-child(5n+3) {
    --start-y: 50%;
}

.sand-particle:nth-child(7n+4) {
    --start-y: 70%;
}

.sand-particle:nth-child(11n+5) {
    --start-y: 90%;
}

.sand-particle:nth-child(13n+6) {
    --start-y: 20%;
}

.sand-particle:nth-child(17n+7) {
    --start-y: 40%;
}

.sand-particle:nth-child(19n+8) {
    --start-y: 60%;
}

.sand-particle:nth-child(23n+9) {
    --start-y: 80%;
}


/* 移除第三关时的星空效果 */
#game-board.ai-level-3::before,
#game-board.ai-level-3::after {
    display: none;
}

/* 为第三关添加特殊的底部沙漠覆盖层 */
.sandy-bottom-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 覆盖棋盘底部60%的区域 */
    background-image: url('background/shake.jpg');
    background-size: 200px 200px; /* 更小的平铺尺寸 */
    background-repeat: repeat;
    opacity: 0.8;
    z-index: 0;
    pointer-events: none;
}

/* 班基拉斯沙地图案背景 */
.sand-background-effect {
    position: absolute;
    pointer-events: none;
    z-index: 4; /* 比沙尘暴特效低一层，确保沙尘暴粒子在上面 */
    background-image: url('background/shake-2.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.8;
    border-radius: 4px;
}

/* 移除第四关时的星空效果 */
#game-board.ai-level-4::before,
#game-board.ai-level-4::after {
    display: none;
}

/* 为第四关添加山脉背景 */
#game-board.ai-level-4 {
    background-image: url('background/山巅.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 为第四关添加半透明遮罩层，确保棋子可见性 */
#game-board.ai-level-4 .mountain-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 27, 76, 0.1);
    z-index: 0;
    pointer-events: none;
}

/* 全屏狂风特效样式 - 增强版本 */
.fullscreen-whirlwind {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.5s ease-out;
    background: linear-gradient(90deg, rgba(185, 210, 235, 0.1) 0%, rgba(220, 230, 240, 0.2) 50%, rgba(185, 210, 235, 0.1) 100%);
}

.whirlwind-cloud {
    position: absolute;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    filter: blur(15px);
    animation: whirlwind 5s linear infinite;
}

/* 垂直方向的风 */
.vertical-whirlwind {
    animation: verticalWhirlwind 4s linear infinite !important;
}

/* 风的线条效果 */
.whirlwind-line {
    position: absolute;
    background: rgba(255, 255, 255, 0.4);
    transform-origin: left center;
    animation: windLine 2s linear infinite;
}

@keyframes whirlwind {
    0% {
        transform: translateX(-200px) translateY(0) rotate(0deg) scale(1);
        opacity: 0;
    }
    20% {
        opacity: 0.3;
    }
    80% {
        opacity: 0.3;
    }
    100% {
        transform: translateX(calc(100vw + 200px)) translateY(0) rotate(360deg) scale(1.2);
        opacity: 0;
    }
}

@keyframes verticalWhirlwind {
    0% {
        transform: translateY(-100px) translateX(0) rotate(0deg) scale(1);
        opacity: 0;
    }
    20% {
        opacity: 0.2;
    }
    80% {
        opacity: 0.2;
    }
    100% {
        transform: translateY(calc(100vh + 100px)) translateX(0) rotate(-360deg) scale(1.2);
        opacity: 0;
    }
}

@keyframes windLine {
    0% {
        transform: translateX(-100px) rotate(0deg);
        opacity: 0;
    }
    20% {
        opacity: 0.2;
    }
    80% {
        opacity: 0.2;
    }
    100% {
        transform: translateX(calc(100vw + 100px)) rotate(0deg);
        opacity: 0;
    }
}

/* 精灵被风吹离的动画效果 */
.piece.blown-away {
    z-index: 50 !important;
    animation: blowAway 1.5s ease-out forwards;
}

.piece.blown-away.top-left {
    animation-name: blowAwayTopLeft;
}

.piece.blown-away.top-right {
    animation-name: blowAwayTopRight;
}

.piece.blown-away.top-center {
    animation-name: blowAwayTop;
}

@keyframes blowAwayTopLeft {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(-100px, -100px) rotate(-10deg) scale(0.8);
        opacity: 0.5;
    }
    100% {
        transform: translate(-300px, -300px) rotate(-20deg) scale(0.5);
        opacity: 0;
    }
}

@keyframes blowAwayTopRight {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(100px, -100px) rotate(10deg) scale(0.8);
        opacity: 0.5;
    }
    100% {
        transform: translate(300px, -300px) rotate(20deg) scale(0.5);
        opacity: 0;
    }
}

@keyframes blowAwayTop {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(0, -100px) rotate(5deg) scale(0.8);
        opacity: 0.5;
    }
    100% {
        transform: translate(0, -300px) rotate(0deg) scale(0.5);
        opacity: 0;
    }
}

/* 竖屏提示样式 */
.orientation-hint {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    flex-direction: column;
}

.orientation-hint-content {
    text-align: center;
    color: white;
    padding: 20px;
}

.orientation-hint-content i.fa-mobile {
    color: #3B8BFC;
}

.orientation-hint-content .text-2xl {
    font-size: 2rem;
    font-weight: bold;
    margin: 16px 0;
}

.orientation-hint-content .text-lg {
    font-size: 1.2rem;
    color: #ccc;
}

.rotate-icon {
    margin-top: 24px;
    animation: rotate-icon 3s linear infinite;
}

@keyframes rotate-icon {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 竖屏模式下的页面布局调整 */
.portrait-mode {
    overflow: hidden;
}

/* 移动设备横屏模式样式 */
.mobile-landscape {
    overflow-x: hidden;
}