/* === 大富翁游戏样式 - 现代化设计 === */
.monopoly-game {
    display: flex;
    width: 100%;
    height: 100%;
    gap: var(--space-lg);
    padding: var(--space-lg);
    background: var(--monopoly-bg);
    border-radius: var(--border-radius-lg);
    position: relative;
    overflow: hidden;
}

.monopoly-game::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(0, 255, 255, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 0, 255, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.monopoly-left-panel {
    width: 200px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-lg) 0;
    position: relative;
    z-index: 1;
}

.monopoly-left {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.monopoly-right {
    width: 350px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.monopoly-board {
    width: 100%;
    max-width: 800px;
    aspect-ratio: 7 / 9;
    background: rgba(10, 10, 26, 0.8);
    border-radius: var(--border-radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-xl);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 255, 255, 0.15);
}

.board-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(9, 1fr);
    width: 100%;
    height: 100%;
    gap: 4px;
    padding: var(--space-md);
    box-sizing: border-box;
}

.board-cell {
    background: var(--cell-color, rgba(10, 10, 26, 0.6));
    border-radius: var(--border-radius-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 2px solid rgba(0, 255, 255, 0.12);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
    overflow: visible;
    padding: 4px;
    min-width: 0;
    min-height: 0;
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.board-cell:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.board-cell.cell-start { 
    background: linear-gradient(135deg, var(--monopoly-primary), var(--monopoly-secondary)); 
    border-color: var(--monopoly-accent);
    box-shadow: 0 0 15px rgba(52, 211, 153, 0.3);
}

.board-cell.cell-bonus { 
    background: linear-gradient(135deg, var(--purple-color), var(--purple-dark)); 
    border-color: var(--purple-light);
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
}

.board-cell.cell-tax { 
    background: linear-gradient(135deg, var(--error-color), var(--error-dark)); 
    border-color: var(--error-light);
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
}

.board-cell.cell-word { 
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)); 
    border-color: rgba(255, 255, 255, 0.2);
}

.board-cell.cell-passing {
    box-shadow: 0 0 20px 6px rgba(251, 191, 36, 0.6);
    z-index: 5;
    transition: box-shadow 0.3s ease;
    animation: cell-passing-glow 1.5s ease-in-out infinite;
}

@keyframes cell-passing-glow {
    0%, 100% { box-shadow: 0 0 20px 6px rgba(251, 191, 36, 0.6); }
    50% { box-shadow: 0 0 25px 8px rgba(251, 191, 36, 0.8); }
}

.board-cell.cell-active {
    box-shadow: 0 0 25px 8px rgba(251, 191, 36, 0.8);
    transform: scale(1.1);
    z-index: 10;
    animation: cell-active-pulse 0.8s ease-in-out infinite;
}

@keyframes cell-active-pulse {
    0%, 100% { transform: scale(1.1); }
    50% { transform: scale(1.15); }
}

.board-cell.owned-player {
    background: linear-gradient(135deg, var(--success-color), var(--success-dark)) !important;
    border-color: var(--success-light);
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
    animation: owned-player-glow 2s ease-in-out infinite;
}

@keyframes owned-player-glow {
    0%, 100% { box-shadow: 0 0 15px rgba(16, 185, 129, 0.4); }
    50% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.6); }
}

.board-cell.owned-ai {
    border-color: var(--error-light);
}

/* 不同电脑占领格子使用不同颜色 */
.board-cell.owned-ai-0 {
    background: linear-gradient(135deg, #EF4444, #DC2626) !important;
    border-color: #FCA5A5;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
}

.board-cell.owned-ai-1 {
    background: linear-gradient(135deg, #8B5CF6, #7C3AED) !important;
    border-color: #C4B5FD;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
}

.board-cell.owned-ai-2 {
    background: linear-gradient(135deg, #F97316, #EA580C) !important;
    border-color: #FDBA74;
    box-shadow: 0 0 15px rgba(249, 115, 22, 0.4);
}

.cell-name {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    font-family: var(--font-body);
    letter-spacing: 0.5px;
}

.cell-name-text {
    display: inline-block;
    position: relative;
    white-space: nowrap;
    animation: none;
}

.cell-name-text.marquee {
    animation: marquee 8s linear infinite;
    padding-left: 100%;
}

.cell-name-text.marquee:hover {
    animation-play-state: paused;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

.cell-price {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 2px;
    font-weight: 600;
    font-family: var(--font-body);
}

.cell-owner {
    position: absolute;
    top: 3px;
    right: 5px;
    font-size: 18px;
    line-height: 1;
    z-index: 5;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.cell-level {
    position: absolute;
    top: 2px;
    left: 3px;
    font-size: 11px;
    font-weight: 800;
    color: #FFD700;
    background: rgba(0, 0, 0, 0.7);
    padding: 1px 6px;
    border-radius: 6px;
    line-height: 1.4;
    z-index: 6;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    display: none;
    pointer-events: none;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.cell-level.level-up-animate {
    animation: level-up-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes level-up-pop {
    0% { transform: scale(0.3); opacity: 0; filter: blur(10px); }
    30% { transform: scale(1.2); opacity: 1; filter: blur(0px); }
    50% { transform: scale(1.6); opacity: 1; color: #fff; background: rgba(255, 215, 0, 0.9); box-shadow: 0 0 20px rgba(255, 215, 0, 0.8); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; color: #FFD700; background: rgba(0, 0, 0, 0.7); box-shadow: none; }
}

.cell-price.price-update-animate {
    animation: price-bump 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes price-bump {
    0% { transform: scale(1); color: inherit; }
    40% { transform: scale(1.4); color: #FFD700; font-weight: 900; }
    100% { transform: scale(1); color: inherit; }
}

/* === 天灾特效 === */

/* 台风 - 刮大风效果 */
.disaster-typhoon {
    animation: typhoon-shake 0.15s linear infinite;
    box-shadow: 0 0 20px 5px rgba(52, 152, 219, 0.7) !important;
    z-index: 15 !important;
}

.disaster-typhoon::before {
    content: '🌪️';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    z-index: 20;
    animation: typhoon-spin 0.5s linear infinite;
    pointer-events: none;
}

@keyframes typhoon-shake {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-3px, 1px); }
    50% { transform: translate(2px, -2px); }
    75% { transform: translate(-1px, 3px); }
    100% { transform: translate(1px, -1px); }
}

@keyframes typhoon-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 陨石 - 击中效果 */
.disaster-meteor {
    animation: meteor-impact 0.5s ease-out;
    box-shadow: 0 0 25px 8px rgba(231, 76, 60, 0.8), 0 0 50px 15px rgba(255, 165, 0, 0.4) !important;
    z-index: 15 !important;
}

.disaster-meteor::before {
    content: '💥';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    z-index: 20;
    animation: meteor-flash 0.8s ease-out infinite;
    pointer-events: none;
}

@keyframes meteor-impact {
    0% { transform: scale(1); filter: brightness(1); }
    20% { transform: scale(1.15); filter: brightness(2); }
    40% { transform: scale(0.95); filter: brightness(1.5); }
    60% { transform: scale(1.05); filter: brightness(1.2); }
    100% { transform: scale(1); filter: brightness(1); }
}

@keyframes meteor-flash {
    0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.2); }
}

/* 寒潮 - 冰冻效果 */
.disaster-coldwave {
    animation: coldwave-freeze 0.6s ease-out;
    box-shadow: 0 0 20px 5px rgba(0, 188, 212, 0.7), inset 0 0 15px rgba(255, 255, 255, 0.3) !important;
    z-index: 15 !important;
    filter: brightness(1.2) saturate(0.5) !important;
}

.disaster-coldwave::before {
    content: '❄️';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 26px;
    z-index: 20;
    animation: coldwave-float 1.5s ease-in-out infinite;
    pointer-events: none;
}

.disaster-coldwave::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 188, 212, 0.2), rgba(255, 255, 255, 0.15));
    border-radius: 6px;
    border: 2px solid rgba(0, 188, 212, 0.5);
    z-index: 18;
    pointer-events: none;
}

@keyframes coldwave-freeze {
    0% { transform: scale(1); }
    30% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes coldwave-float {
    0%, 100% { transform: translate(-50%, -50%) translateY(0) rotate(0deg); opacity: 1; }
    50% { transform: translate(-50%, -50%) translateY(-5px) rotate(15deg); opacity: 0.8; }
}

.cell-tokens {
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 2px;
}

/* 占领后显示的英文单词 */
.cell-word-display {
    position: absolute;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    z-index: 2;
}

.cell-word-visible {
    opacity: 1;
}

/* 底部格子：单词显示在底部，水平 */
.board-cell[data-side="bottom"] .cell-word-display {
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
}

/* 顶部格子：单词显示在顶部，水平 */
.board-cell[data-side="top"] .cell-word-display {
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
}

/* 左侧格子：单词显示在左侧，单词右边距格子左边4px */
.board-cell[data-side="left"] .cell-word-display {
    right: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
    text-align: right;
}

/* 右侧格子：单词显示在右侧，单词左边距格子右边4px */
.board-cell[data-side="right"] .cell-word-display {
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
    text-align: left;
}

/* 玩家占领的单词颜色 */
.word-owner-player {
    color: #FFFFFF;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* 电脑占领的单词颜色 */
.word-owner-ai {
    color: #FFFFFF;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.token {
    font-size: 16px;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}

.token-player { 
    animation: token-bounce 1.5s ease-in-out infinite;
    color: #3498DB;
}
.token-ai { animation: token-bounce 1.5s ease-in-out infinite 0.3s; }

@keyframes token-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.board-center {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    position: relative;
    overflow: visible;
}

.dice-section-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    pointer-events: auto;
}

.dice-section-center .dice-scene {
    width: 60px;
    height: 60px;
    perspective: 300px;
}

.dice-section-center .dice-cube {
    width: 60px;
    height: 60px;
}

.dice-section-center .dice-face {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    padding: 8px;
}

.dice-section-center .dice-face-1 { transform: translateZ(30px); }
.dice-section-center .dice-face-2 { transform: rotateY(180deg) translateZ(30px); }
.dice-section-center .dice-face-3 { transform: rotateY(-90deg) translateZ(30px); }
.dice-section-center .dice-face-4 { transform: rotateY(90deg) translateZ(30px); }
.dice-section-center .dice-face-5 { transform: rotateX(-90deg) translateZ(30px); }
.dice-section-center .dice-face-6 { transform: rotateX(90deg) translateZ(30px); }

.dice-section-center .dot {
    width: 10px;
    height: 10px;
}

.dice-section-center .roll-btn {
    background: linear-gradient(135deg, #2980B9, #1A5276);
    color: white;
    border: none;
    padding: 8px 24px;
    border-radius: 25px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(41, 128, 185, 0.4);
    white-space: nowrap;
    min-width: 80px;
}

.dice-section-center .roll-btn.ai-turn {
    background: linear-gradient(135deg, #E74C3C, #C0392B);
    cursor: not-allowed;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
    pointer-events: none;
}

.dice-section-center .roll-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(41, 128, 185, 0.6);
}

.dice-section-center .turn-info {
    font-size: 14px;
    font-weight: 600;
    color: #27AE60;
}

.board-empty {
    background: transparent;
}

.center-logo {
    text-align: center;
    font-size: 36px;
    line-height: 1.2;
}

.center-logo span {
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--primary-light);
    display: block;
}

/* 右侧面板 */
.monopoly-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    height: 100%;
}

.panel-section {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: var(--space-md);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
}

.panel-title {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--accent-color);
    margin-bottom: var(--space-sm);
    text-align: center;
}

.dice-section {
    text-align: center;
}

/* 3D骰子容器 */
.dice-scene {
    width: 40px;
    height: 40px;
    perspective: 200px;
    margin: var(--space-md) auto;
}

.dice-cube {
    width: 40px;
    height: 40px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-20deg) rotateY(20deg);
    transition: transform 0.1s;
}

.dice-cube.rolling {
    animation: dice-3d-roll 1.8s ease-in-out;
}

/* 最终落地弹跳 - 应用在scene容器上，避免覆盖cube的旋转transform */
.dice-scene.bounce-land {
    animation: dice-3d-bounce 0.75s ease;
}

@keyframes dice-3d-roll {
    0%   { transform: rotateX(0deg)    rotateY(0deg)    rotateZ(0deg); }
    15%  { transform: rotateX(220deg)  rotateY(180deg)  rotateZ(90deg); }
    30%  { transform: rotateX(400deg)  rotateY(360deg)  rotateZ(180deg); }
    45%  { transform: rotateX(580deg)  rotateY(540deg)  rotateZ(270deg); }
    60%  { transform: rotateX(720deg)  rotateY(680deg)  rotateZ(320deg); }
    75%  { transform: rotateX(830deg)  rotateY(780deg)  rotateZ(350deg); }
    90%  { transform: rotateX(1060deg) rotateY(1040deg) rotateZ(360deg); }
    100% { transform: rotateX(1080deg) rotateY(1080deg) rotateZ(360deg); }
}

@keyframes dice-3d-bounce {
    0%   { transform: translateY(0) scale(1); }
    30%  { transform: translateY(-7.5px) scale(1.1); }
    50%  { transform: translateY(0) scale(0.95); }
    70%  { transform: translateY(-2.5px) scale(1.02); }
    100% { transform: translateY(0) scale(1); }
}

/* 骰子每个面 */
.dice-face {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.05), 0 1px 4px rgba(0,0,0,0.15);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    padding: 5px;
    backface-visibility: hidden;
}

/* 面定位 - 立方体6面 */
.dice-face-1 { transform: translateZ(20px); }
.dice-face-2 { transform: rotateY(180deg) translateZ(20px); }
.dice-face-3 { transform: rotateY(-90deg) translateZ(20px); }
.dice-face-4 { transform: rotateY(90deg) translateZ(20px); }
.dice-face-5 { transform: rotateX(-90deg) translateZ(20px); }
.dice-face-6 { transform: rotateX(90deg) translateZ(20px); }

/* 点数 */
.dot {
    width: 6px;
    height: 6px;
    background: #2D3748;
    border-radius: 50%;
    box-shadow: inset 0 0.5px 1px rgba(0,0,0,0.3);
    align-self: center;
    justify-self: center;
}

/* 隐藏不需要的点 */
.dot-hidden { visibility: hidden; }

/* 点数布局 - 标准骰子排列 */
/* 面1: 中心一个点 */
.dice-face-1 .dot-tl, .dice-face-1 .dot-tc, .dice-face-1 .dot-tr,
.dice-face-1 .dot-ml, .dice-face-1 .dot-mr,
.dice-face-1 .dot-bl, .dice-face-1 .dot-bc, .dice-face-1 .dot-br {
    visibility: hidden;
}

/* 面2: 右上、左下（对角线） */
.dice-face-2 .dot-tl, .dice-face-2 .dot-tc,
.dice-face-2 .dot-ml, .dice-face-2 .dot-mc, .dice-face-2 .dot-mr,
.dice-face-2 .dot-bc, .dice-face-2 .dot-br {
    visibility: hidden;
}

/* 面3: 右上、中心、左下 */
.dice-face-3 .dot-tl, .dice-face-3 .dot-tc,
.dice-face-3 .dot-ml, .dice-face-3 .dot-mr,
.dice-face-3 .dot-bc, .dice-face-3 .dot-br {
    visibility: hidden;
}

/* 面4: 四角 */
.dice-face-4 .dot-tc,
.dice-face-4 .dot-ml, .dice-face-4 .dot-mc, .dice-face-4 .dot-mr,
.dice-face-4 .dot-bc {
    visibility: hidden;
}

/* 面5: 四角 + 中心 */
.dice-face-5 .dot-tc,
.dice-face-5 .dot-ml,
.dice-face-5 .dot-mr,
.dice-face-5 .dot-bc {
    visibility: hidden;
}

/* 面6: 左三右三 */
.dice-face-6 .dot-tc,
.dice-face-6 .dot-mc,
.dice-face-6 .dot-bc {
    visibility: hidden;
}

/* 旋转到对应面的transform（用于JS设置最终结果） */
.dice-show-1 { transform: rotateX(0deg)   rotateY(0deg)   rotateZ(0deg); }
.dice-show-2 { transform: rotateX(0deg)   rotateY(180deg) rotateZ(0deg); }
.dice-show-3 { transform: rotateX(0deg)   rotateY(90deg)  rotateZ(0deg); }
.dice-show-4 { transform: rotateX(0deg)   rotateY(-90deg) rotateZ(0deg); }
.dice-show-5 { transform: rotateX(90deg)  rotateY(0deg)   rotateZ(0deg); }
.dice-show-6 { transform: rotateX(-90deg) rotateY(0deg)   rotateZ(0deg); }

/* 旧的 dice-display 保留兼容 */
.dice-display {
    font-size: 32px;
    margin: var(--space-md) 0;
    transition: transform 0.1s;
    line-height: 1;
}

.roll-btn {
    background: linear-gradient(135deg, #2980B9, #1A5276);
    color: white;
    border: none;
    padding: var(--space-sm) var(--space-xl);
    border-radius: 25px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    width: 100%;
}

.roll-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(41, 128, 185, 0.4);
}

.roll-btn:active {
    transform: translateY(0);
}

.turn-info {
    font-size: 13px;
    font-weight: 700;
    color: #27AE60;
    margin-top: var(--space-sm);
    text-align: center;
}

.stat-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
    font-size: 14px;
    color: #fff;
}

.stat-icon {
    font-size: 16px;
}

.player-section .panel-title { color: #3498DB; }
.ai-section .panel-title { color: #E74C3C; }

/* 不同电脑面板使用不同颜色 */
.ai-color-0 { border-color: rgba(231, 76, 60, 0.4) !important; }
.ai-color-0 .panel-title { color: #FF6B6B; }
.ai-color-1 { border-color: rgba(155, 89, 182, 0.4) !important; }
.ai-color-1 .panel-title { color: #BB88FF; }
.ai-color-2 { border-color: rgba(243, 156, 18, 0.4) !important; }
.ai-color-2 .panel-title { color: #FFBB44; }

/* 破产AI面板样式 */
.ai-bankrupt {
    opacity: 0.5;
    filter: grayscale(80%);
    background: rgba(100, 100, 100, 0.3) !important;
}
.ai-bankrupt .panel-title {
    color: #888 !important;
}
.ai-bankrupt .stat-row {
    color: #666;
}

/* 事件记录窗口 */
.event-log-section {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.event-log-section .panel-title {
    color: #3498DB;
    font-size: 22px;
}

.event-log-container {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding-right: var(--space-xs);
}

.event-log-container::-webkit-scrollbar {
    width: 4px;
}

.event-log-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
}

.event-log-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.event-log-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    padding: 4px 6px;
    margin-bottom: 4px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid transparent;
}

.event-log-player {
    border-left-color: #27AE60;
}

.event-log-ai {
    border-left-color: #E74C3C;
}

.event-log-info {
    border-left-color: #3498DB;
}

.event-log-gain {
    border-left-color: #FFD700;
}

.event-log-time {
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    white-space: nowrap;
    min-width: 36px;
}

.event-log-text {
    color: rgba(255, 255, 255, 0.85);
    word-break: break-all;
}

.back-game-btn {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: var(--space-sm) var(--space-md);
    border-radius: 25px;
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    text-align: center;
    margin-top: auto;
}

.back-game-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

#btn-exit-monopoly {
    margin-top: 0;
    margin-bottom: var(--space-md);
    align-self: flex-start;
}

/* 浮动提示 */
.game-float {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transition: top 1.2s ease-out, opacity 1.2s ease-out;
    white-space: nowrap;
}

.game-float.active {
    opacity: 1;
    top: 35%;
}

/* 年级选择 */
.grade-sel-wrap {
    text-align: center;
    padding: var(--space-xl);
}

.grade-sel-title {
    font-family: var(--font-display);
    font-size: 28px;
    color: #fff;
    margin-bottom: var(--space-xl);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.grade-sel-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    max-width: 600px;
    margin: 0 auto var(--space-xl);
}

.grade-sel-btn {
    background: linear-gradient(135deg, #2980B9, #1A5276);
    color: white;
    border: none;
    padding: var(--space-lg);
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.grade-sel-btn:nth-child(1) { background: linear-gradient(135deg, #FF6B6B, #E55A5A); }
.grade-sel-btn:nth-child(2) { background: linear-gradient(135deg, #FFD166, #E5B94E); color: #2D3748; }
.grade-sel-btn:nth-child(3) { background: linear-gradient(135deg, #48BB78, #38A169); }
.grade-sel-btn:nth-child(4) { background: linear-gradient(135deg, #2980B9, #1A5276); }
.grade-sel-btn:nth-child(5) { background: linear-gradient(135deg, #A78BFA, #8B6FD6); }
.grade-sel-btn:nth-child(6) { background: linear-gradient(135deg, #ED8936, #DD6B20); }
.grade-sel-btn:nth-child(7) { background: linear-gradient(135deg, #F472B6, #DB2777); }
.grade-sel-btn:nth-child(8) { background: linear-gradient(135deg, #60A5FA, #2563EB); }
.grade-sel-btn:nth-child(9) { background: linear-gradient(135deg, #34D399, #059669); }
.grade-sel-btn:nth-child(10) { background: linear-gradient(135deg, #718096, #4A5568); }

.unit-sel-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 500px;
}

.unit-sel-btn {
    padding: var(--space-md) var(--space-lg);
    font-size: 14px;
}

.unit-sel-btn.active {
    background: linear-gradient(135deg, #48BB78, #38A169) !important;
    box-shadow: 0 0 0 3px rgba(72, 187, 120, 0.4);
}

.grade-sel-btn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.grade-sel-back {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    cursor: pointer;
    transition: var(--transition);
    font-weight: 600;
}

.grade-sel-back:hover {
    color: #fff;
}

/* === 挑战弹窗 === */
.challenge-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 200;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(5px);
}

.challenge-modal.active {
    opacity: 1;
}

.challenge-box {
    background: linear-gradient(135deg, #2C3E50, #1a252f);
    border-radius: 20px;
    padding: var(--space-xl) var(--space-2xl);
    max-width: 520px;
    width: 90%;
    border: 2px solid rgba(52, 152, 219, 0.5);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.3s ease;
    max-height: 85vh;
    overflow-y: auto;
}

.challenge-modal.active .challenge-box {
    transform: scale(1);
}

.challenge-title {
    font-family: var(--font-display);
    font-size: 20px;
    color: #FFD700;
    text-align: center;
    margin-bottom: var(--space-xs);
}

.challenge-progress {
    text-align: center;
    font-size: 12px;
    color: #aaa;
    margin-bottom: var(--space-lg);
}

.chal-word {
    text-align: center;
    font-family: var(--font-display);
    font-size: 36px;
    color: #fff;
    margin-bottom: var(--space-lg);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.chal-hint {
    text-align: center;
    font-size: 22px;
    color: #39FF14;
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.chal-sub-hint {
    text-align: center;
    font-size: 13px;
    color: #888;
    margin-bottom: var(--space-lg);
}

.chal-blank-word {
    text-align: center;
    font-family: var(--font-display);
    font-size: 40px;
    color: #FFD700;
    letter-spacing: 8px;
    margin-bottom: var(--space-lg);
    text-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

.chal-answer {
    text-align: center;
    font-family: var(--font-display);
    font-size: 28px;
    color: #fff;
    min-height: 40px;
    margin-bottom: var(--space-md);
    letter-spacing: 4px;
}

.chal-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.chal-sentences {
    gap: var(--space-md);
}

.chal-option {
    background: linear-gradient(135deg, #3498DB, #2980B9);
    color: white;
    border: 2px solid transparent;
    padding: var(--space-md) var(--space-lg);
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 21px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}

.chal-option:hover,
.chal-option.selected {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.3);
}

.chal-option:active {
    transform: translateY(0) scale(0.98);
}

.chal-option-green {
    background: linear-gradient(135deg, #27AE60, #1E8449);
}

.chal-option-purple {
    background: linear-gradient(135deg, #9B59B6, #8E44AD);
    font-size: 18px;
    padding: var(--space-md);
    line-height: 1.5;
}

.chal-alphabet {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: var(--space-lg);
}

.chal-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(52, 152, 219, 0.3);
    color: #3498DB;
    border-radius: 6px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid rgba(52, 152, 219, 0.4);
}

.chal-letter:hover {
    background: rgba(52, 152, 219, 0.5);
    transform: scale(1.1);
}

.chal-letter.used {
    opacity: 0.3;
    pointer-events: none;
}

.chal-skip {
    text-align: center;
    color: #E74C3C;
    font-size: 14px;
    cursor: pointer;
    padding: var(--space-sm);
    transition: var(--transition);
}

.chal-skip:hover {
    color: #FF6B6B;
    text-decoration: underline;
}

/* 补全缺失字母 - 新样式 */
.chal-fill-word {
    text-align: center;
    font-family: var(--font-display);
    font-size: 36px;
    letter-spacing: 6px;
    white-space: nowrap;
    overflow-x: hidden;
    margin-bottom: var(--space-lg);
    user-select: none;
}

.chal-fill-shown {
    color: #FFD700;
    text-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
    display: inline-block;
    min-width: 1em;
}

.chal-fill-space {
    display: inline-block;
    width: 1.5em;
}

.chal-fill-blank {
    color: #E74C3C;
    text-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
    display: inline-block;
    min-width: 1em;
    border-bottom: 3px solid rgba(231, 76, 60, 0.5);
    padding-bottom: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.chal-fill-blank:hover {
    border-bottom-color: rgba(231, 76, 60, 0.8);
}

.chal-fill-blank.blank-active {
    color: #fff;
    border-bottom-color: #FFD700;
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
    animation: blank-pulse 1s ease-in-out infinite;
}

.chal-fill-blank.blank-filled {
    color: #48BB78;
    border-bottom-color: #48BB78;
    text-shadow: 0 2px 8px rgba(72, 187, 120, 0.4);
}

@keyframes blank-pulse {
    0%, 100% { border-bottom-color: #FFD700; }
    50% { border-bottom-color: rgba(255, 215, 0, 0.3); }
}

.chal-confirm-wrap {
    text-align: center;
    margin-bottom: var(--space-md);
}

.chal-confirm-btn {
    background: linear-gradient(135deg, #27AE60, #1E8449);
    color: white;
    border: none;
    padding: var(--space-md) var(--space-2xl);
    border-radius: 25px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
}

.chal-confirm-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(39, 174, 96, 0.4);
}

.chal-confirm-btn:active:not(:disabled) {
    transform: translateY(0);
}

.chal-confirm-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* === 游戏结束弹窗 === */
.gameover-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 300;
    opacity: 0;
    transition: opacity 0.4s ease;
    backdrop-filter: blur(8px);
}

.gameover-overlay.active {
    opacity: 1;
}

.gameover-box {
    background: white;
    border-radius: 24px;
    padding: var(--space-2xl);
    text-align: center;
    max-width: 400px;
    width: 85%;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.gameover-overlay.active .gameover-box {
    transform: scale(1);
}

.gameover-icon {
    font-size: 64px;
    margin-bottom: var(--space-md);
}

.gameover-title {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 700;
    margin-bottom: var(--space-md);
}

.gameover-stats {
    font-size: 16px;
    color: #333;
    margin-bottom: var(--space-sm);
}

.gameover-assets {
    font-size: 18px;
    font-weight: 700;
    color: #2980B9;
    margin-bottom: var(--space-md);
    padding: var(--space-sm);
    background: linear-gradient(135deg, rgba(41, 128, 185, 0.1), rgba(52, 152, 219, 0.1));
    border-radius: var(--border-radius-md);
}

.gameover-time {
    font-size: 14px;
    color: #666;
    margin-bottom: var(--space-xl);
}

.gameover-btn {
    background: linear-gradient(135deg, #2980B9, #1A5276);
    color: white;
    border: none;
    padding: var(--space-md) var(--space-2xl);
    border-radius: 30px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.gameover-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(41, 128, 185, 0.4);
}

/* 天灾全屏特效 */
.disaster-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 500;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.disaster-overlay.active {
    opacity: 1;
}

.disaster-emoji {
    font-size: 120px;
    animation: disaster-shake 0.5s ease-in-out infinite alternate;
}

.disaster-name {
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 700;
    color: white;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    margin-top: var(--space-lg);
    animation: disaster-pulse 1s ease-in-out infinite;
}

.disaster-subtitle {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.8);
    margin-top: var(--space-md);
}

@keyframes disaster-shake {
    0% { transform: translateX(-10px) rotate(-5deg); }
    100% { transform: translateX(10px) rotate(5deg); }
}

@keyframes disaster-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .ui-screen {
        padding: var(--space-lg);
        margin: var(--space-md);
        max-height: 90vh;
    }
    
    .ui-screen h1 {
        font-size: 2.2rem;
    }
    
    .ui-screen h2 {
        font-size: 1.6rem;
    }
    
    .menu-buttons {
        gap: var(--space-md);
    }
    
    .menu-btn {
        padding: var(--space-md) var(--space-lg);
        font-size: 1rem;
        max-width: 100%;
    }
    
    .grade-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }
    
    .grade-btn {
        padding: var(--space-lg);
        font-size: 1.1rem;
    }
    
    .achievements-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }
    
    .player-info {
        flex-direction: column;
        text-align: center;
    }
    
    .player-avatar {
        margin-right: 0;
        margin-bottom: var(--space-md);
    }
    
    .player-stats {
        align-items: center;
    }
    
    #loading-screen {
        padding: var(--space-xl);
    }
    
    #loading-screen h1 {
        font-size: 2.2rem;
    }
    
    .loading-bar {
        width: 280px;
    }
}

@media (max-width: 480px) {
    .ui-screen {
        padding: var(--space-md);
        margin: var(--space-sm);
    }
    
    .ui-screen h1 {
        font-size: 1.8rem;
    }
    
    .ui-screen h2 {
        font-size: 1.4rem;
    }
    
    /* .menu-buttons already uses flex column layout */
    
    .grade-grid {
        grid-template-columns: 1fr;
    }
    
    .achievements-grid {
        grid-template-columns: 1fr;
    }
    
    .modal-content {
        padding: var(--space-lg);
    }
    
    .word-text {
        font-size: 2.2rem;
    }
    
    .word-meaning {
        font-size: 1.4rem;
    }
}



/* 当前活跃玩家/AI高亮 */
.player-active {
    border: 2px solid #3498DB !important;
    box-shadow: 0 0 10px rgba(52, 152, 219, 0.3);
}

.ai-active {
    border: 2px solid #E74C3C !important;
    box-shadow: 0 0 10px rgba(231, 76, 60, 0.3);
}

/* === 游戏设置页面（合并年级选择和电脑设置） === */
#game-setup {
    max-width: 900px;
    padding: 20px 25px;
    background: linear-gradient(135deg, rgba(44, 125, 160, 0.95), rgba(167, 139, 250, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    overflow-y: auto;
    max-height: 90vh;
}

.setup-header {
    text-align: center;
    margin-bottom: 18px;
}

.setup-header h2 {
    font-family: var(--font-display);
    font-size: 2rem;
    color: white;
    margin-bottom: 4px;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* 移除 .ui-screen h2 的下划线装饰条 */
.setup-header h2::after {
    display: none;
}

.setup-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

/* 设置页面内的年级按钮 - 紧凑样式 */
#game-setup .grade-btn {
    padding: 12px 10px;
    font-size: 1rem;
}

#game-setup .grade-btn.active {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6), 0 6px 18px rgba(0, 0, 0, 0.3);
    transform: scale(1.03);
}

/* 单元选择按钮 */
.unit-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: var(--space-md);
    justify-content: center;
}

.unit-btn {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

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

.unit-btn.active {
    background: linear-gradient(135deg, var(--success-color), #38A169);
    box-shadow: 0 0 0 2px rgba(72, 187, 120, 0.5);
}

.setup-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

.setup-section {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 18px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.section-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: white;
    margin-bottom: 14px;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.grade-path {
    position: relative;
}

.grade-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

/* AI Opponents Section - 优化设计 */
.ai-section {
    background: linear-gradient(135deg, rgba(44, 125, 160, 0.9), rgba(167, 139, 250, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

.ai-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #FFD166, #FF6B6B, #A78BFA);
    z-index: 1;
}

.ai-header {
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

.ai-title-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
}

.ai-title-icon {
    font-size: 2rem;
    animation: float 3s ease-in-out infinite;
}

.ai-subtitle {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    margin: 0;
}

/* AI数量选择器 - 卡片式设计 */
.ai-count-selector {
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

.ai-count-label {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    text-align: center;
    margin-bottom: 12px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.ai-count-cards {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.ai-count-card {
    flex: 1;
    max-width: 120px;
    padding: 16px 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.ai-count-card::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: 0.6s;
}

.ai-count-card:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.ai-count-card:hover::before {
    left: 100%;
}

.ai-count-card.active {
    background: linear-gradient(135deg, #FFD166, #FF6B6B);
    border-color: #FFD166;
    box-shadow: 0 8px 30px rgba(255, 209, 102, 0.4);
    transform: translateY(-2px) scale(1.05);
}

.ai-count-card.active:hover {
    transform: translateY(-4px) scale(1.07);
}

.count-number {
    font-size: 2rem;
    font-weight: 800;
    font-family: var(--font-display);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    line-height: 1;
}

.count-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.9;
}

/* AI配置列表 */
.ai-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    z-index: 2;
}

.ai-item {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 16px 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.ai-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #FFD166, #FF6B6B);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ai-item:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.ai-item:hover::before {
    opacity: 1;
}

.ai-item.hidden {
    display: none;
}

.ai-item-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.ai-avatar {
    font-size: 1.8rem;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.ai-item:hover .ai-avatar {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.ai-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    font-family: var(--font-display);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 难度选择器 - 卡片式设计 */
.difficulty-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.difficulty-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.difficulty-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.difficulty-option {
    flex: 1;
    min-width: 70px;
    padding: 10px 8px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    color: white;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
    overflow: hidden;
}

.difficulty-option::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.difficulty-option:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

.difficulty-option:hover::before {
    opacity: 1;
}

.difficulty-option.active {
    background: linear-gradient(135deg, #FFD166, #FF6B6B);
    border-color: #FFD166;
    box-shadow: 0 4px 20px rgba(255, 209, 102, 0.4);
    transform: translateY(-2px) scale(1.05);
}

.difficulty-option.active:hover {
    transform: translateY(-4px) scale(1.08);
}

/* 根据难度级别设置不同的颜色主题 */
.difficulty-option[data-value="70"] {
    --diff-color: #4CAF50;
}
.difficulty-option[data-value="80"] {
    --diff-color: #2196F3;
}
.difficulty-option[data-value="90"] {
    --diff-color: #FF9800;
}
.difficulty-option[data-value="100"] {
    --diff-color: #F44336;
}

.difficulty-option:not(.active) {
    border-color: rgba(255, 255, 255, 0.2);
}

.difficulty-option:not(.active):hover {
    border-color: var(--diff-color, rgba(255, 255, 255, 0.4));
    background: rgba(255, 255, 255, 0.15);
}

.diff-icon {
    font-size: 1.4rem;
    line-height: 1;
}

.diff-text {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 增强交互体验和动画效果 */

/* 点击波纹效果 */
.ai-count-card::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease;
    opacity: 0;
}

.ai-count-card:active::after {
    width: 200%;
    height: 200%;
    opacity: 0;
}

/* 难度选项选择动画 */
.difficulty-option.active .diff-icon {
    animation: bounce-in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes bounce-in {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

/* AI配置项入场动画 */
.ai-item {
    animation: slide-in-up 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
    transform: translateY(20px);
}

.ai-item:nth-child(1) { animation-delay: 0.1s; }
.ai-item:nth-child(2) { animation-delay: 0.2s; }
.ai-item:nth-child(3) { animation-delay: 0.3s; }
.ai-item:nth-child(4) { animation-delay: 0.4s; }

@keyframes slide-in-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* AI配置项悬停效果增强 */
.ai-item:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.ai-item:hover::before {
    opacity: 1;
    height: 4px;
}

/* AI头像悬停旋转效果 */
.ai-item:hover .ai-avatar {
    transform: rotate(10deg) scale(1.1);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 难度标签悬停效果 */
.difficulty-label:hover {
    color: rgba(255, 255, 255, 1);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

/* AI头像悬停脉冲效果 */
.ai-item:hover .ai-avatar {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* 难度选项悬停发光效果 */
.difficulty-option:hover .diff-icon {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    transition: text-shadow 0.3s ease;
}

/* 点击动画效果 */
.ai-count-card.card-clicked {
    animation: card-click 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes card-click {
    0% { transform: scale(1); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

/* 选择动画效果 */
.difficulty-option.option-selected {
    animation: option-select 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes option-select {
    0% { transform: scale(1); }
    30% { transform: scale(1.1); }
    60% { transform: scale(0.95); }
    100% { transform: scale(1.05); }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .ai-count-cards {
        gap: 8px;
    }
    
    .ai-count-card {
        padding: 12px 8px;
    }
    
    .count-number {
        font-size: 1.5rem;
    }
    
    .ai-item {
        padding: 12px 16px;
    }
    
    .ai-avatar {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }
    
    .difficulty-options {
        gap: 6px;
    }
    
    .difficulty-option {
        padding: 8px 6px;
        min-width: 60px;
    }
    
    .diff-icon {
        font-size: 1.2rem;
    }
    
    .diff-text {
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    .ai-count-cards {
        flex-direction: column;
        align-items: center;
    }
    
    .ai-count-card {
        max-width: 200px;
        width: 100%;
    }
    
    .difficulty-options {
        flex-direction: column;
    }
    
    .difficulty-option {
        min-width: 100%;
    }
}

.setup-buttons {
    display: flex;
    gap: 14px;
    justify-content: center;
}

.setup-buttons .menu-btn {
    width: 100%;
    max-width: 280px;
    padding: 12px 28px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 12px;
    transition: all 0.3s;
    /* 覆盖全局 nth-child 选择器的颜色 */
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
}

.setup-buttons .menu-btn:nth-child(1) {
    background: linear-gradient(135deg, #4CAF50, #2E7D32);
    font-size: 1.15rem;
    padding: 14px 28px;
}

.setup-buttons .menu-btn:nth-child(2) {
    background: linear-gradient(135deg, #718096, #4A5568);
}

.setup-buttons .menu-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* 为不同年级设置不同的颜色主题 */
.grade-btn[data-grade="1"] {
    background: linear-gradient(135deg, #FF6B6B, #E55A5A);
}

.grade-btn[data-grade="2"] {
    background: linear-gradient(135deg, #FFD166, #E5B94E);
    color: #2D3748;
}

.grade-btn[data-grade="3"] {
    background: linear-gradient(135deg, #48BB78, #38A169);
}

.grade-btn[data-grade="4"] {
    background: linear-gradient(135deg, #2C7DA0, #1A6B8C);
}

.grade-btn[data-grade="5"] {
    background: linear-gradient(135deg, #A78BFA, #8B6FD6);
}

.grade-btn[data-grade="6"] {
    background: linear-gradient(135deg, #ED8936, #DD6B20);
}

.grade-btn[data-grade="all"] {
    background: linear-gradient(135deg, #718096, #4A5568);
}

.grade-btn.active {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.6), 0 8px 25px rgba(0, 0, 0, 0.3);
    transform: scale(1.05);
}

/* 响应式设计 */
@media (max-width: 768px) {
    #game-setup {
        padding: 15px;
    }
    
    .setup-content {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .grade-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    
    .setup-header h2 {
        font-size: 1.6rem;
    }
    
    .section-title {
        font-size: 1.2rem;
    }
    
    .setup-buttons {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 480px) {
    #game-setup {
        padding: 12px;
    }
    
    .grade-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .ai-count-buttons {
        flex-direction: column;
    }
    
    .ai-item {
        min-width: 150px;
        flex: 1 1 150px;
    }
    
    .ai-difficulty {
        width: 100%;
    }
}