/* 设置根元素字体大小 */
html {
    /* 基准字体大小自适应 */
    font-size: clamp(14px, 3.5vw, 18px); /* 最小14px，最大16px，默认3.5vw */
    
    /* 确保在不同设备上文字大小不会被浏览器自动调整 */
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none;
}


/* 基础样式 */
:root {
    /* 主色调 - 参考中农大食品学院网站 */
    --primary-color: #006838;      /* 深绿色主色调 */
    --primary-light: #2E8B57;      /* 浅绿色 */
    --primary-dark: #004d2c;       /* 暗绿色 */
    
    /* 辅助色 */
    --secondary-color: #F39800;    /* 暖橙色，代表食物的温暖 */
    --success-color: #2E8B57;      /* 海绿色 */
    --error-color: #D32F2F;        /* 警示红色 */
    
    /* 中性色 */
    --text-primary: #333333;       /* 主要文字颜色 */
    --text-secondary: #666666;     /* 次要文字颜色 */
    --text-light: #999999;         /* 浅色文字 */
    
    /* 背景色 */
    --bg-primary: #F5F9F7;         /* 浅绿背景 */
    --bg-secondary: #FFFFFF;       /* 纯白背景 */
    --bg-accent: #E8F5E9;         /* 淡绿强调背景 */
    
    /* 渐变色 */
    --gradient-primary: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
    --gradient-secondary: linear-gradient(135deg, #FFB74D 0%, #FF8F00 100%);
    
    /* 其他 */
    --shadow-sm: 0 0.125rem 0.25rem rgba(0,0,0,0.1);
    --shadow-md: 0 0.25rem 0.5rem rgba(0,0,0,0.12);
    --shadow-lg: 0 0.5rem 1rem rgba(0,0,0,0.14);
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --transition: all 0.3s ease;
    
    /* 添加字体相关变量 */
    --font-heading: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    
    /* 使用 clamp() 函数设置自适应字体大小 */
    --font-size-xs: clamp(10px, 2.5vw, 12px);    
    --font-size-sm: clamp(12px, 3vw, 14px);      
    --font-size-base: clamp(14px, 3.5vw, 16px);  
    --font-size-lg: clamp(16px, 4vw, 18px);      
    --font-size-xl: clamp(18px, 4.5vw, 20px);    
    --font-size-2xl: clamp(20px, 5vw, 24px);     
    
    /* 行高 */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* 间距 */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
}

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

body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100vh;
    overflow: hidden;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    text-size-adjust: 100%;
    position: fixed;
    width: 100%;
    margin: 0;
    padding: 0;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    text-size-adjust: 100% !important;
    -webkit-text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
}

/* 布局结构 */
.game-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0.8rem;
    position: relative;
    z-index: 1;
    padding-top: calc(3.75rem + 0.6rem);
    background: linear-gradient(180deg, var(--primary-color) 0%, #318d76 100%);
}

.game-left {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    padding: 0.8rem;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-md);
    margin-bottom: calc((100% - 1.6rem) / 16 * 7 + 1.6rem);
}

.game-right {
    position: absolute;
    bottom: 0.9375rem;
    left: 0;
    right: 0;
    margin: 0 0.9375rem;
    width: calc(100% - 1.875rem);
    aspect-ratio: 16/7;
    background-color: #88ada8c1;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.1);
    overflow: hidden;
}





/* 添加固定比例容器样式 */
.aspect-ratio-container {
    width: 100%;
    max-width: 30rem;
    height: 100vh;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    overflow: hidden;
    box-shadow: 0 0 1.25rem rgba(0, 0, 0, 0.15);
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    touch-action: pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
}

/* 自定义滚动条样式 */
.question-container::-webkit-scrollbar {
    width: 0.375rem;
}

.question-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 0.1875rem;
}

.question-container::-webkit-scrollbar-thumb {
    background: rgba(0, 104, 56, 0.3);
    border-radius: 0.1875rem;
}



/* 确保路径和节点在遮罩层之上 */
.map-path {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
}

/* 确保角色在最上层 */
.character {
    z-index: 3;
}



.header-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.125rem solid #ddd;
    background: transparent;
    padding: 0.75rem 0;
    padding-top: 0;
    border-radius: var(--radius-sm);
    margin-bottom: 0.75rem;
}



.score {
    font-size: clamp(0.875rem, 4vw, 1rem);
    font-weight: bold;
    color: var(--primary-color);
    background: rgba(255, 255, 255, 0.9);
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
}

/* 问题容器 */
.question-container {
    /*height: calc(100% - 100px);  减去header高度 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.question h3 {
    color: var(--primary-color);
    line-height: 1.5;
    padding: 0.9rem;
    word-break: break-word; /* 允许在任意字符间断行 */
    /* margin-bottom: 1.5rem; */
    background: rgba(255, 255, 255, 0.8);
    border-radius: var(--radius-lg);
    box-shadow: 0 0.125rem 0.5rem rgba(0, 104, 56, 0.1);
    font-size: var(--font-size-lg);
    font-weight: 600;
    letter-spacing: 0.01em;
}

 
.question-tip {
    color: #555; /* 设置文本颜色 */
    background-color: #e0f7fa; /* 设置背景颜色 */
    padding: 0.75rem 1rem; /* 调整内边距 */
    border-radius:0.5rem; /* 设置圆角 */
    margin: 0.75rem 0; /* 设置底部外边距 */
    text-align: center; /* 文本居中 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 添加轻微阴影 */
    border: 1px solid #b2ebf2; /* 添加边框 */
}

/* 选项样式 */
.options {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem; /* 5px -> 0.3125rem */
    margin-top: 0.75rem; /* 20px -> 1.25rem */
    padding: 0 0.9375rem; /* 15px -> 0.9375rem */
}

.option-btn {
    border: 0.125rem solid rgba(0, 104, 56, 0.2); /* 2px -> 0.125rem */
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.95);
    font-size: clamp(0.75rem, 3vw, 1rem); /* 12px-16px -> 0.75rem-1rem */
    line-height: 1.4;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    color: var(--text-primary);
    box-shadow: 0 0.125rem 0.5rem rgba(0, 104, 56, 0.05);
    margin-bottom: 0.375rem; /* 6px -> 0.375rem */
    word-break: break-word;
    display: flex;
    align-items: center;
    padding: clamp(0.5rem, 2vw, 0.9rem) 0.8rem; /* 10px-15px -> 0.625rem-0.9375rem */
    text-align: left;
}

.option-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.3125rem; /* 5px -> 0.3125rem */
    height: 0.3125rem; /* 5px -> 0.3125rem */
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
}

.option-btn:active::after {
    animation: ripple 0.6s ease-out;
}

@keyframes ripple {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }
    100% {
        transform: scale(40, 40);
        opacity: 0;
    }
}

.option-btn:hover:not(:disabled):not(.selected):not(.correct-option):not(.wrong-option) {
    background: rgba(0, 104, 56, 0.1);
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.option-btn:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.option-btn.selected {
    background: var(--primary-light);
    color: white;
    border-color: var(--primary-light);
}

.option-btn.correct-option {
    background: var(--success-color);
    color: white;
    border-color: var(--success-color);
}

.option-btn.wrong-option {
    background: var(--error-color);
    color: white;
    border-color: var(--error-color);
}

/* 反馈区域 */
.feedback {
    margin-top: auto;
    padding: 0.9375rem;
    border-radius: var(--radius-md);
    text-align: center;
    background: var(--bg-accent);
}

.feedback .explanation {
    margin-top: 1.25rem;
    text-align: left;
    line-height: 1.6;
    color: var(--text-light);
    background: var(--bg-secondary);
    padding: 0.9375rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

.explanation-image {
    margin: 0.9375rem 0;
    text-align: center;
}

.explanation-image img {
    max-width: 100%;
    max-height: 12.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}





/* 地图和路径样式 */
.map-path {
    width: 100%;
    height: 100%;
}

/* .path-background {
    stroke: #E0E0E0;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.path-completed {
    stroke: var(--success-color);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 0.8s ease;
    filter: drop-shadow(0 0 4px rgba(76, 175, 80, 0.3));
} */

/* 节点样式 */
.node {
    fill: var(--bg-secondary);
    stroke: var(--primary-color);
    stroke-width: 3;
    transition: all 0.3s ease;
}

.node.start {
    fill: var(--primary-color);
}

.node.end {
    fill: var(--secondary-color);
}
/* 使用伪元素显示对号 */
/* .node.passed {
    fill: var(--success-color);
    stroke: var(--success-color);

    content: '✓';
} */

/* 通过的节点显示对号 */
/* .node.passed::after {
    content: "✓";
    position: absolute;
    color: white;
    font-size: 1.5rem;
    transform: translate(-50%, -50%);
} */

/* 角色样式 */
.character {
    position: absolute;
    transform: translate(-50%, -50%);
    transition: var(--transition);
    z-index: 3;
    background: url('../assets/images/ren.png') center center no-repeat;
    background-size: contain;
    animation: float 2s ease-in-out infinite;
}

/* 欢迎弹窗 */
.welcome-modal {
    position: fixed;
    inset: 0;
    /* 多层背景方案，确保在不支持 backdrop-filter 的浏览器中也有模糊效果 */
    background-color: rgba(0, 0, 0, 0.4);
    /* 添加渐变背景作为降级方案 */
    background-image: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.1),
        rgba(0, 0, 0, 0.5)
    );
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    
    /* 添加多个浏览器前缀 */
    -webkit-backdrop-filter: blur(0.5rem);
    backdrop-filter: blur(0.5rem);
}

/* 为不支持 backdrop-filter 的浏览器添加降级方案 */
@supports not ((-webkit-backdrop-filter: blur(0.5rem)) or (backdrop-filter: blur(0.5rem))) {
    .welcome-modal {
        /* 使用半透明黑色背景 */
        background-color: rgba(0, 0, 0, 0.75);
    }
    
    /* 为模态框内容添加额外的背景模糊效果 */
    .modal-content {
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.3);
    }
}

/* 针对 iOS 设备的特殊处理 */
@supports (-webkit-touch-callout: none) {
    .welcome-modal {
        /* iOS 特定的背景处理 */
        background-color: rgba(0, 0, 0, 0.8);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    
    .modal-content {
        /* 增强内容区域的可见度 */
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.4);
    }
}

.modal-content {
    background: linear-gradient(145deg, var(--bg-secondary), var(--bg-primary));
    box-shadow: var(--shadow-lg);
    padding: 1.2rem;
    border-radius: var(--radius-lg);
    text-align: center;
    width: 80vw;
    max-width: 25rem;
}

.game-rules {
    text-align: left;
    margin: 1.1rem 0;
    padding: 0.9rem;
    background: var(--bg-accent);
    border-radius: var(--radius-md);
    font-size: clamp(0.8rem, 3vw, 1rem);
    line-height: 1.6;
    word-break: break-word;
}

/* 音效控制 */
.sound-control {

    transform: translateX(-50%);
    z-index: 1001;
    position: static; /* 移除绝对定位 */
    transform: none;  /* 移除transform */
    margin-right: 0.625rem;
}





.sound-btn {
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.sound-btn::after {
    content: '';
    position: absolute;
    inset: 0.125rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
    opacity: 0.9;
    transition: var(--transition);
}

.sound-btn:hover::after {
    opacity: 1;
    transform: scale(1.05);
}

.sound-btn.muted::after {
    background: linear-gradient(135deg, #9e9e9e, #616161);
    opacity: 0.7;
}

.icon-sound {
    position: relative;
    z-index: 1;
    color: white;
    font-size: 1.25rem;
    transition: var(--transition);
}

.sound-btn:hover .icon-sound {
    transform: scale(1.1);
}

.sound-btn:active {
    transform: translateX(-50%) scale(0.95);
}

/* 动画效果 */
@keyframes bounce {
    0%, 100% { transform: translate(-50%, -50%); }
    50% { transform: translate(-50%, -60%); }
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}


/* 在现有的CSS中添加或修改 */
.timer {
    font-size: 1rem;
    color: var(--text-light);
    transition: var(--transition);
    margin-right: 0.5rem;
}

.timer.warning {
    color: var(--error-color);
    animation: pulse 1s infinite;
}

/* 添加完成动画 */
.complete {
    animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateY(-1.25rem);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 添加得分动画 */
.score-change {
    animation: scorePopup 0.5s ease-out;
}

@keyframes scorePopup {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* 添加答题反馈动画 */
.option-btn.correct-option {
    animation: correctAnswer 0.5s ease;
}

.option-btn.wrong-option {
    animation: wrongAnswer 0.5s ease;
}

@keyframes correctAnswer {
    0% { transform: scale(1); }
    50% { 
        transform: scale(1.05);
        background: var(--success-color);
        box-shadow: 0 0 1.25rem rgba(76, 175, 80, 0.4);
    }
    100% { transform: scale(1); }
}

@keyframes wrongAnswer {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-0.3125rem); }
    40%, 80% { transform: translateX(0.3125rem); }
}

/* 化 */
@media (hover: none) {
    .option-btn:hover {
        transform: none;  /* 移除悬停效果 */
    }

    .option-btn:active {
        background: var(--primary-light);
        transform: scale(0.98);  /* 添加按压效果 */
    }
}



/* 优化文字版 */

.option-btn {
    text-align: left;
    line-height: var(--line-height-relaxed);
    letter-spacing: 0.01em;
}

.feedback h4 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
}

.explanation {
    line-height: var(--line-height-relaxed);
    letter-spacing: 0.01em;
    text-align: justify;
}

/* 优化游戏规则显示 */
.game-rules {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    letter-spacing: 0.01em;
}

/* 优化进度显示 */
.progress, .timer {
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.score {
    font-size: var(--font-size-lg);
    font-weight: 600;
}

/* 添加滚动优化 */
.question-container {
    -webkit-overflow-scrolling: touch;  /* 优化 iOS 滚动 */
    scroll-behavior: smooth;
}

/* 优化按钮触摸反馈 */
.next-btn {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    padding: var(--spacing-md) var(--spacing-xl);
    font-weight: 500;
    letter-spacing: 0.02em;
}


.progress {
    font-weight: 500;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.9);
    padding: 8px 15px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

/* 装饰元素样式 */
.decorative-elements {
    position: fixed;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.food-safety-icon {
    position: absolute;
    font-size: 24px;
    opacity: 0.1;
    animation: float 3s ease-in-out infinite;
}

.food-icon-1 { top: 10%; left: 5%; animation-delay: 0s; }
.food-icon-2 { top: 20%; right: 5%; animation-delay: 0.5s; }
.food-icon-3 { bottom: 15%; left: 8%; animation-delay: 1s; }
.food-icon-4 { bottom: 25%; right: 8%; animation-delay: 1.5s; }

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

/* 欢迎弹窗样式优化 */
.modal-header {
    text-align: center;
    margin-bottom: 1.25rem; /* 20px -> 1.25rem */
}

.logo {
    width: 5rem; /* 80px -> 5rem */
    height: 5rem; /* 80px -> 5rem */
    margin-bottom: 0.9375rem; /* 15px -> 0.9375rem */
}

.safety-tips {
    background: var(--bg-accent);
    padding: 0.9rem; /* 15px -> 0.9375rem */
    border-radius: var(--radius-md);
    margin: 1.1rem 0; /* 20px -> 1.25rem */
}

.tip-item {
    display: flex;
    align-items: center;
    margin: 0.625rem 0; /* 10px -> 0.625rem */
    color: var(--text-secondary);
}

.tip-icon {
    margin-right: 0.625rem; /* 10px -> 0.625rem */
    font-size: 1.25rem; /* 20px -> 1.25rem */
}



/* 添加食品安全主题装饰 */
.question-container::before {
    content: '🛡️';
    position: absolute;
    top: -1.875rem; /* -30px -> -1.875rem */
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.5rem; /* 40px -> 2.5rem */
    opacity: 0.1;
}

/* 答案解析卡片样式 */
.explanation-card {
    margin-top: 20px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 0.0625rem solid rgba(0, 104, 56, 0.1);
}

.explanation-header {
    background: var(--primary-color);
    color: white;
    padding: 12px 20px;
    font-weight: 500;
    font-size: var(--font-size-base);
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.explanation-icon {
    font-size: 1.2em;
}

.explanation-content {
    padding: clamp(0.9375rem, 4vw, 1.25rem);
    color: var(--text-secondary);
    line-height: 1.6;
    text-align: justify;
    letter-spacing: 0.01em;
    font-size: clamp(0.75rem, 3.5vw, 0.9375rem);
    background: rgba(255, 255, 255, 0.9);
    word-break: break-word;
}

/* 优化反馈域整体样式 */
.feedback {
    margin-top: 20px;
    padding: 0;
}

.feedback .correct,
.feedback .wrong {
    padding: 20px;
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.feedback h4 {
    color: var(--primary-color);
    font-size: 1.0rem;
    margin-bottom: 1rem;
    padding: 0.8rem 1rem;
    background: rgba(0, 104, 56, 0.1);
    border-radius: var(--radius-sm);
    display: inline-block;
}

/* 添加正确/错误图标 */
.feedback h4::before {
    content: '✅';
    margin-right: 0.5rem;
}

.feedback .wrong h4::before {
    content: '❌';
}

/* 添加卡片过渡动画 */
.explanation-card {
    animation: slideUp 0.3s ease-out;
}

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

/* 修改下一关按钮样式 */
.next-btn {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-sm);
    font-size: 1.0rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 1.25rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 104, 56, 0.2);
    background: var(--primary-color);
    color: #FFFFFF;
}

.next-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 104, 56, 0.3);
}
/* 修改重新开始按钮样式 */
.retry-btn{
    background: var(--secondary-color);
}
.retry-btn:hover{
    background: var(--secondary-color);
}


/* 修改装饰元素容器样式 */
.decorative-container {
    position: fixed;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    overflow: hidden;
}

/* 左侧装饰元素 - 调整位置到左边空白区域 */
.left-decorations {
    position: fixed;
    left: -2.5rem;
    height: 70vh;
    top: 10%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 1.25rem 0;
}

/* 右侧装饰元素 - 调整位置到右边空白区域 */
.right-decorations {
    position: fixed;
    right: -2.5rem;
    top: 15%;
    height: 65vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 1.25rem 0;
}
/* 装饰元素样式 */
.decoration-item {
    width: 5rem;
    height: 5rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.1);
    opacity: 0.6;
}


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






/* 为不同饰元素设置不同动延迟和方向 */
.left-decorations .decoration-item:nth-child(odd) {
    animation: floatLeft 4s ease-in-out infinite;
}
.left-decorations .decoration-item:nth-child(even) {
    animation: floatRight 4s ease-in-out infinite;
}
.right-decorations .decoration-item:nth-child(odd) {
    animation: floatRight 4s ease-in-out infinite;
}
.right-decorations .decoration-item:nth-child(even) {
    animation: floatLeft 4s ease-in-out infinite;
}

/* 优化浮动动画 */
@keyframes floatLeft {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    50% {
        transform: translate(-0.625rem, -0.9375rem) rotate(-5deg);
    }
}
@keyframes floatRight {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    50% {
        transform: translate(0.625rem, -0.9375rem) rotate(5deg);
    }
}

/* 题目切换动画 */
.question-container {
    animation: fadeInSlideUp 0.5s ease-out;
}

@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(1.25rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 选项按钮动画 */
.option-btn {
    animation: fadeInScale 0.3s ease-out backwards;
}



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








/* 调整装饰元素位置 */
.decorative-container {
    position: absolute;
    width: 100%;
    height: 100%;
    max-width: 25.875rem;
    max-height: 56rem;
}


/* 修改音效按钮样式 */
.icon-sound::before {

    font-size: 1.375rem;
}



/* 或��用更专业的 SVG 图标 */
.icon-sound {
    position: relative;
    z-index: 1;
    width: 1.5rem;
    height: 1.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.sound-btn.muted .icon-sound {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z'/%3E%3C/svg%3E");
}

/* 添加提示文字 */
.sound-btn::before {
    content: '音效';
    position: absolute;
    top: -1.25rem; /* -20px -> -1.25rem */
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem; /* 12px -> 0.75rem */
    color: var(--text-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.9);
    padding: 0.125rem 0.375rem; /* 2px 6px -> 0.125rem 0.375rem */
    border-radius: 0.25rem; /* 4px -> 0.25rem */
}

.sound-btn:hover::before {
    opacity: 1;
}

/* 通关弹窗样式 */
.complete-content {
    padding: 1.25rem; /* 20px -> 1.25rem */
    text-align: center;
}

.final-score {
    font-size: 1.5rem; /* 24px -> 1.5rem */
    color: var(--primary-color);
    font-weight: bold;
    margin: 1.25rem 0; /* 20px -> 1.25rem */
}

.complete-message {
    font-size: 1.125rem; /* 18px -> 1.125rem */
    color: var(--text-secondary);
    margin: 0.9375rem 0; /* 15px -> 0.9375rem */
}

.achievement {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    padding: 0.9375rem; /* 15px -> 0.9375rem */
    border-radius: var(--radius-md);
    margin-top: 1.25rem; /* 20px -> 1.25rem */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem; /* 10px -> 0.625rem */
}

.achievement-icon {
    font-size: 1.875rem; /* 30px -> 1.875rem */
}

.achievement-text {
    color: white;
    font-weight: bold;
    font-size: 1.125rem; /* 18px -> 1.125rem */
}

/* 修改开始游戏按钮样式 */
#startGame {
    background: linear-gradient(135deg, #00a854, #006838);
    color: white;
    padding: 0.9375rem 2.5rem; /* 15px 40px -> 0.9375rem 2.5rem */
    border: none;
    border-radius: var(--radius-md);
    font-size: 1.125rem; /* 18px -> 1.125rem */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1.25rem; /* 20px -> 1.25rem */
    box-shadow: 0 0.25rem 0.9375rem rgba(0, 104, 56, 0.4); /* 4px 15px -> 0.25rem 0.9375rem */
    position: relative;
    overflow: hidden;
    letter-spacing: 0.0625rem; /* 1px -> 0.0625rem */
}

#startGame:hover {
    transform: translateY(-0.125rem); /* -2px -> -0.125rem */
    box-shadow: 0 0.375rem 1.25rem rgba(0, 104, 56, 0.5); /* 6px 20px -> 0.375rem 1.25rem */
}

#startGame:active {
    transform: translateY(0);
    box-shadow: 0 0.125rem 0.625rem rgba(0, 104, 56, 0.3); /* 2px 10px -> 0.125rem 0.625rem */
}


/* 添加主办方信息样式 */
.organizer {
    margin-top: 1.875rem; /* 30px -> 1.875rem */
    padding-top: 1.25rem; /* 20px -> 1.25rem */
    border-top: 0.0625rem solid rgba(0, 104, 56, 0.2); /* 1px -> 0.0625rem */
    text-align: center;
}

.organizer-title {
    font-size: 0.875rem; /* 14px -> 0.875rem */
    color: var(--text-light);
    margin-bottom: 0.625rem; /* 10px -> 0.625rem */
}

.organizer-content {
    font-size: clamp(0.75rem, 3.5vw, 0.9375rem); /* 12px-15px -> 0.75rem-0.9375rem */
    line-height: 1.6;
    word-break: break-word;
    color: var(--primary-color);
    font-weight: 500;
}

.organizer-logo {
    width: 3.75rem; /* 60px -> 3.75rem */
    height: 3.75rem; /* 60px -> 3.75rem */
    margin: 0.625rem auto; /* 10px -> 0.625rem */
    opacity: 0.8;
}




/* 调整其他元素的z-index以确保正确的层级关系 */
.game-right { z-index: 1; }
.map-path { z-index: 2; }
.character { z-index: 3; }
.building-container { z-index: 4; }
.sound-control { z-index: 1002; }
.welcome-modal { z-index: 1001; }



/* 建筑物容器样式 */
.building-container {
    position: absolute;
    bottom: -4vh;
    left: -3vw;
    pointer-events: none;
    z-index: 100;
}

/* 建筑物样式 - 移除 visibility 相关样式 */
.building {
    width: auto;
    object-fit: contain;
    transform-origin: bottom;
}

/* 游戏开始时的状态 */
.game-started .building {
    visibility: visible !important;
}

/* 云朵动画样式 */
.cloud {
    animation: floatCloud 4s ease-in-out infinite;
}

@keyframes floatCloud {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(2.1875rem, 0.125rem) scale(1.02);
    }
}

/* 太阳旋转动画样式 */
.sun {
    transform-origin: 50% 50%;  /* 确保以自身中心为旋转点 */
    transform-box: fill-box;    /* 使用元素自身的边界框作为参考 */
    animation: rotateSun 30s linear infinite;


}

@keyframes rotateSun {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.windmill{
    transform-origin: center;  /* 确保以自身中心为旋转点 */
    transform-box: fill-box;    /* 使用元素自身的边界框作为参考 */
    animation: rotateSun 10s linear infinite;
    animation-timing-function: linear;
}
@keyframes windmill {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes sway {
    0%, 100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(5deg);
    }
}

.wheat {
    animation: sway 2s ease-in-out infinite;
    transform-box: fill-box;    /* 使用元素自身的边界框作为参考 */
    transform-origin: bottom center; /* 设置摆动中心为底部中点 */
}


/* 修改固定头部样式 */
.fixed-header {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem; /* 12px -> 0.75rem */
    background: linear-gradient(135deg, rgba(0, 104, 56, 0.95) 0%, rgba(0, 77, 44, 0.95) 100%);
    backdrop-filter: blur(5px);
    z-index: 888;
    height: 3.5rem; /* 60px -> 3.75rem */
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.1);
}

/* 改标题样式 */
.fixed-header h1 {
    font-size: clamp(1rem, 5.5vw, 1.5rem); /* 16px-24px -> 1rem-1.5rem */
    color: white;
    text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
    margin: 0;
    margin-right: 1.875rem; /* 30px -> 1.875rem */
    flex: 1;
    text-align: center;
    white-space: nowrap;
    padding: 0 2.75rem 0 0; /* 44px -> 2.75rem */
}


.fixed-header .score {
    position: absolute; /* 使用绝对定位 */
    right: 0.75rem; /* 12px -> 0.75rem */
    top: 50%;         /* 垂直居中 */
    transform: translateY(-50%); /* 精确垂直居中 */
    min-width: 5rem; /* 80px -> 5rem */
    padding: 0.375rem 0.75rem; /* 6px 12px -> 0.375rem 0.75rem */
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 0.0625rem solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-sm);
    font-size: clamp(0.875rem, 3.5vw, 1rem); /* 14px-16px -> 0.875rem-1rem */
    white-space: nowrap;
    text-align: center;
}




/* 选项标识样式 */
.option-label {
    display: inline-block;
    min-width: 1.5rem; /* 24px -> 1.5rem */
    margin-right: 0.5rem; /* 10px -> 0.625rem */
    margin-left: 0.3rem; /* 10px -> 0.625rem */
    font-weight: bold;
    color: var(--primary-color);
}