/*/* ============================================
   game-settings.css - 游戏设置页面专属样式
   包含：设置窗口、标签页、表单控件、Tooltip等
   ============================================ */

/* 全局游戏指针 */
.settings-page,
.settings-page * {
    cursor: url('../img/cursor/wot_arrow.cur'), default;
}

/* 可点击元素使用手型指针 */
.settings-page a,
.settings-page button,
.settings-page .game-btn,
.settings-page .settings-tab,
.settings-page .game-checkbox,
.settings-page .game-radio,
.settings-page .game-dropdown,
.settings-page .game-slider,
.settings-page .window-close-btn {
    cursor: url('../img/cursor/wot_link.cur'), pointer;
}

/* 信息图标使用帮助指针 */
.settings-page .info-btn {
    cursor: url('../img/cursor/wot_help.cur'), help;
}

/* 文本选择时保持箭头指针 */
.settings-page ::selection {
    cursor: url('../img/cursor/wot_arrow.cur'), text;
}

/* 设置页面容器 */
.settings-page {
    padding: 20px 0 40px;
}

/* 设置窗口容器 */
.game-settings-window {
    background: linear-gradient(180deg, #2d2d2d 0%, #1f1f1f 100%);
    border: 1px solid #3d3d3d;
    border-radius: 3px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
}

/* 标题�?*/
.window-title-bar {
    background: linear-gradient(180deg, #3d3d3d 0%, #2d2d2d 100%);
    padding: 8px 15px;
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.window-title-text {
    color: #c4b998;
    font-size: 16px;
    font-weight: bold;
}

.window-close-btn {
    width: 18px;
    height: 18px;
    background: #8b0000;
    border: 1px solid #a52a2a;
    color: #fff;
    cursor: url('../img/cursor/wot_link.cur'), pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
}

/* 标签�?- 游戏风格 */
.settings-tabs-bar {
    display: flex;
    background: transparent;
    border-bottom: 1px solid #3d3d3d;
    padding: 0;
}

.settings-tab {
    padding: 10px 18px;
    background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%);
    border: 1px solid #4a4a4a;
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    color: #888;
    cursor: url('../img/cursor/wot_link.cur'), pointer;
    font-size: 13px;
    position: relative;
    margin-right: 2px;
    letter-spacing: 2px;
}

.settings-tab:hover {
    color: #c4b998;
    background: linear-gradient(180deg, #4a4a4a 0%, #3a3a3a 100%);
}

.settings-tab.active {
    color: #c4b998;
    background: linear-gradient(180deg, #4a4a4a 0%, #3a3a3a 100%);
    border-color: #5a5a5a;
}

/* 内容区域 */
.settings-content-area {
    padding: 20px;
    min-height: 400px;
}

/* 设置面板 - 方角 */
.settings-panel {
    display: none;
}

.settings-panel.active {
    display: block;
}

/* 双列布局 */
.settings-columns {
    display: flex;
    gap: 20px;
}

.settings-col {
    flex: 1;
}

/* 设置卡片 - 方角 */
.setting-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid #3d3d3d;
    margin-bottom: 15px;
}

.setting-card-header {
    background: rgba(255, 255, 255, 0.03);
    padding: 8px 12px;
    border-bottom: 1px solid #3d3d3d;
    color: #8a8a8a;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.setting-card-body {
    padding: 12px;
}

/* 设置�?*/
.setting-row {
    display: flex;
    align-items: center;
    padding: 6px 0;
    margin-bottom: 4px;
}

/* 复选框 */
.game-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: url('../img/cursor/wot_link.cur'), pointer;
    width: auto;
}

.game-checkbox-box {
    width: 14px;
    height: 14px;
    background: #1a1a1a;
    border: 1px solid #5a5a5a;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: url('../img/cursor/wot_link.cur'), pointer;
}

.game-checkbox-box.checked {
    background: #3a3a3a;
}

.game-checkbox-box.checked::after {
    content: "✓";
    color: #c4b998;
    font-size: 11px;
}

.game-checkbox-label {
    color: #c4b998;
    font-size: 12px;
    cursor: url('../img/cursor/wot_link.cur'), pointer;
}

/* 禁用状态的复选框 */
.game-checkbox.disabled {
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
}

.game-checkbox.disabled .game-checkbox-box {
    background: #2a2a2a;
    border-color: #4a4a4a;
    cursor: not-allowed;
}

.game-checkbox.disabled .game-checkbox-label {
    color: #888;
}

/* 单选框样式 */
.game-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: url('../img/cursor/wot_link.cur'), pointer;
}

.game-radio-box {
    width: 14px;
    height: 14px;
    border: 2px solid #5a5a5a;
    border-radius: 50%;
    background: #2a2a2a;
    position: relative;
    flex-shrink: 0;
    cursor: url('../img/cursor/wot_link.cur'), pointer;
}

.game-radio-box.checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    background: #c4b998;
    border-radius: 50%;
}

.game-radio-label {
    color: #c4b998;
    font-size: 12px;
    cursor: url('../img/cursor/wot_link.cur'), pointer;
}

.setting-label {
    color: #888;
    font-size: 12px;
    margin-bottom: 5px;
    display: block;
}

/* setting-label 内的元素垂直居中对齐 */
.setting-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.force-on-label {
    color: #ff4444;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
}

/* 信息图标 */
.info-btn {
    width: 14px;
    height: 14px;
    background: #0a1628;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #87CEEB;
    font-size: 9px;
    margin-left: 6px;
    cursor: url('../img/cursor/wot_help.cur'), help;
    font-style: italic;
    position: relative;
    box-shadow: 0 0 3px rgba(135, 206, 235, 0.6);
}

/* 信息图标 i 样式 */
.info-btn::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 5px;
    background: #87CEEB;
    border-radius: 1px;
    top: 6px;
}

.info-btn::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: #87CEEB;
    border-radius: 50%;
    top: 3px;
}

/* Tooltip 样式 */
.game-tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid #4a4a4a;
    border-radius: 4px;
    padding: 12px 15px;
    min-width: 280px;
    max-width: 350px;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.game-tooltip::before {
    display: none;
}

.game-tooltip-title {
    color: #ffffff;
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 8px;
    display: block;
}

.game-tooltip-content {
    color: #c4b998;
    font-size: 12px;
    line-height: 1.6;
    display: block;
    white-space: pre-line;
}

/* Tooltip警告项 - 使用data-tooltip-warning的样式 */
.game-tooltip-warning {
    color: #ffaa44;
    font-size: 12px;
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
    margin-top: 8px;
    gap: 6px;
}

.game-tooltip-warning::before {
    content: "⚠";
    color: #ffaa44;
    font-size: 12px;
    margin-top: 0;
    flex-shrink: 0;
}

/* Tooltip警告项 - 带警告图标 */
.tooltip-warning-item {
    color: #ffaa44;
    font-size: 12px;
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
    margin-top: 8px;
    gap: 6px;
}

.tooltip-warning-item::before {
    content: "⚠";
    color: #ffaa44;
    font-size: 12px;
    margin-top: 0;
    flex-shrink: 0;
}

/* 提示文字样式 - 基础 */
.note-orange {
    color: #ffaa00;
    font-size: 11px;
    margin-left: 5px;
}

.note-green {
    color: #00ff00;
    font-size: 11px;
    margin-left: 5px;
}

.note-red {
    color: #ff4444;
    font-size: 11px;
    margin-left: 5px;
}

/* 短备注样�?- 统一规范：紧跟label，无左边距，block显示 */
/* 基准：隐藏垃圾信息的备注 */
.note-orange.short-note,
.note-green.short-note,
.note-red.short-note {
    display: block;
    margin-left: 0;
    margin-top: 0;
    line-height: 1.5;
}

/* 长备注样�?- 统一规范：margin-left: 22px，文字两端对�?*/
/* 基准：启用服务器准星的备�?*/
.note-orange.long-note,
.note-green.long-note,
.note-red.long-note {
    display: block;
    margin-left: 22px;
    margin-top: 0;
    line-height: 1.6;
    text-align: justify;
    text-justify: inter-ideograph;
    max-width: calc(100% - 22px);
}

/* 滑块样式 */
.game-slider {
    width: 200px;
    height: 20px;
    position: relative;
    padding: 0 3px;
}

/* 滑块凹槽 - 黑色背景+暗红光 */
.game-slider-track {
    position: absolute;
    top: 50%;
    left: 3px;
    right: 3px;
    height: 8px;
    background: linear-gradient(180deg, #1f1a1a 0%, #0f0d0d 100%);
    border: 1px solid #2a2525;
    border-radius: 2px;
    transform: translateY(-50%);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 2px rgba(139, 0, 0, 0.35);
    cursor: url('../img/cursor/wot_link.cur'), pointer;
}

/* 滑块填充 - 橙红色细条在凹槽内 */
.game-slider-fill {
    position: absolute;
    top: 50%;
    left: 3px;
    height: 4px;
    background: linear-gradient(180deg, #ff6b35 0%, #cc4422 100%);
    border-radius: 1px;
    transform: translateY(-50%);
    box-shadow: 0 0 4px rgba(255, 107, 53, 0.5);
    cursor: url('../img/cursor/wot_link.cur'), pointer;
}

/* 滑块thumb - 细长样式 */
.game-slider-thumb {
    position: absolute;
    top: 50%;
    width: 6px;
    height: 16px;
    background: linear-gradient(180deg, #d4c4a8 0%, #a08060 100%);
    border: 1px solid #5a4a3a;
    border-radius: 1px;
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 2px rgba(212, 196, 168, 0.3);
    cursor: url('../img/cursor/wot_link.cur'), pointer;
}

.game-slider.disabled .game-slider-track {
    background: #2a2a2a;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.game-slider.disabled .game-slider-fill {
    display: none;
}

/* 动态分辨率滑块 - 启用动态调整时隐藏填充和thumb */
.dynamic-resolution-slider.auto-mode .game-slider-fill,
.dynamic-resolution-slider.auto-mode .game-slider-thumb {
    display: none;
}

/* 动态分辨率滑块 - 启用动态调整时显示禁用状态 */
.dynamic-resolution-slider.auto-mode {
    cursor: url('../img/cursor/wot_arrow.cur'), default;
}

.dynamic-resolution-slider.auto-mode .game-slider-track {
    cursor: url('../img/cursor/wot_arrow.cur'), default;
}

/* 小地图透明度滑块 - 禁用时隐藏填充和thumb */
.minimap-opacity-slider.auto-mode .game-slider-fill,
.minimap-opacity-slider.auto-mode .game-slider-thumb {
    display: none;
}

/* 小地图透明度滑块 - 禁用时显示禁用状态 */
.minimap-opacity-slider.auto-mode {
    cursor: url('../img/cursor/wot_arrow.cur'), default;
}

.minimap-opacity-slider.auto-mode .game-slider-track {
    cursor: url('../img/cursor/wot_arrow.cur'), default;
}

/* 帧率选择器禁用状态 */
.game-dropdown.fps-select:disabled {
    background: #1a1a1a;
    color: #666;
    cursor: not-allowed;
    opacity: 0.6;
}

/* 范围滑块样式 */
.fov-range-slider .range-fill {
    position: absolute;
    top: 50%;
    height: 4px;
    background: linear-gradient(180deg, #ff6b35 0%, #cc4422 100%);
    border-radius: 1px;
    transform: translateY(-50%);
    box-shadow: 0 0 4px rgba(255, 107, 53, 0.5);
    /* left 和 width 由 JS 动态设置 */
}

.fov-range-slider .range-thumb-min,
.fov-range-slider .range-thumb-max {
    position: absolute;
    top: 50%;
    width: 6px;
    height: 16px;
    background: linear-gradient(180deg, #d4c4a8 0%, #a08060 100%);
    border: 1px solid #5a4a3a;
    border-radius: 1px;
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 2px rgba(212, 196, 168, 0.3);
    cursor: url('../img/cursor/wot_link.cur'), pointer;
    z-index: 2;
}

/* 滑块刻度容器 */
.slider-ticks {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 6px;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 3px;
    pointer-events: none;
}

/* 滑块刻度线 - 上下渐变 */
.slider-tick {
    width: 1px;
    height: 6px;
    background: linear-gradient(to bottom, transparent 0%, #555 20%, #555 80%, transparent 100%);
    margin-top: 0;
}

/* 战场视野刻度容器 - 支持11个刻度 */
.fov-ticks {
    display: flex;
    justify-content: space-between;
    padding: 0 3px;
}

/* 大刻度 (10为间隔) */
.tick-major {
    height: 8px;
    width: 1px;
    background: linear-gradient(to bottom, transparent 0%, #777 20%, #777 80%, transparent 100%);
}

/* 小刻度 (5为间隔) */
.tick-minor {
    height: 5px;
    width: 1px;
    background: linear-gradient(to bottom, transparent 0%, #444 20%, #444 80%, transparent 100%);
}

/* 战场视野刻度标签 - 可点击 */
.fov-tick-label {
    cursor: url('../img/cursor/wot_link.cur'), pointer;
    color: #666;
    font-size: 10px;
    transition: color 0.2s;
}

.fov-tick-label:hover {
    color: #c4b998;
}

/* 下拉�?*/
.game-dropdown {
    background: #1a1a1a;
    border: 1px solid #4a4a4a;
    color: #c4b998;
    padding: 4px 8px;
    font-size: 12px;
    cursor: url('../img/cursor/wot_link.cur'), pointer;
    width: auto;
    min-width: 80px;
}

/* 底部按钮 */
.window-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 15px;
    background: #252525;
    border-top: 1px solid #3d3d3d;
}

.game-btn {
    padding: 6px 20px;
    background: linear-gradient(180deg, #4a4a4a 0%, #3a3a3a 100%);
    border: 1px solid #5a5a5a;
    color: #c4b998;
    cursor: url('../img/cursor/wot_link.cur'), pointer;
    font-size: 12px;
    border-radius: 2px;
}

.game-btn:hover {
    background: linear-gradient(180deg, #5a5a5a 0%, #4a4a4a 100%);
}

.game-btn.primary {
    background: linear-gradient(180deg, #5a4a3a 0%, #4a3a2a 100%);
    border-color: #6a5a4a;
}

.game-btn.primary:hover {
    background: linear-gradient(180deg, #6a5a4a 0%, #5a4a3a 100%);
}

/* 标题栏左侧区�?*/
.window-title-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.window-title-left img {
    height: 24px;
    width: auto;
}

/* setting-row 纵向布局 */
.setting-row.column {
    flex-direction: column;
    align-items: flex-start;
}

.setting-row.column .game-dropdown {
    margin-top: 5px;
}

/* 提示文字作为块级元素 */
.note-orange.block-note,
.note-green.block-note,
.note-red.block-note {
    display: block;
    margin-left: 0;
    margin-top: 0;
    line-height: 1.5;
}

/* 带左边距的提示文�?*/
.note-orange.indent-22,
.note-green.indent-22,
.note-red.indent-22 {
    display: block;
    margin-left: 22px;
    margin-top: 0;
    line-height: 1.5;
}

.note-orange.indent-28,
.note-green.indent-28,
.note-red.indent-28 {
    display: block;
    margin-left: 28px;
    margin-top: 0;
    line-height: 1.5;
}

/* info-btn 位置调整 */
.info-btn.position-top {
    position: relative;
    top: -2px;
}

/* 复选框宽度100% */
.game-checkbox.full-width {
    width: 100%;
}

/* 设置标签容器 */
.setting-label-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

/* 设置标签文字 */
.setting-label-text {
    color: #c4b998;
    font-size: 13px;
}

/* 内容占位区域 */
.settings-placeholder {
    color: #888;
    text-align: center;
    padding: 50px;
}

/* 滑块填充宽度 */
.game-slider-fill.width-0 {
    width: 0%;
}

/* 按钮自动宽度 */
.game-btn.auto-width {
    width: auto;
    display: inline-block;
}

/* ============================================
   图像设置页面样式
   ============================================ */

/* 图像设置整体布局 */
.graphics-layout {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 顶部行：图形质量 + 动态分辨率 */
.graphics-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 20px;
    position: relative;
}

.graphics-quality-section {
    flex: 1;
    padding-right: 30px;
}

.graphics-quality-section .setting-row {
    width: 100%;
}

.graphics-resolution-section {
    flex: 1;
    padding-left: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.graphics-resolution-section .setting-row {
    width: 100%;
}

/* 中间垂直虚线渐变分隔 */
.graphics-top-divider {
    width: 1px;
    min-height: 80px;
    background: linear-gradient(to bottom,
            transparent 0%,
            rgba(100, 100, 100, 0.3) 20%,
            rgba(100, 100, 100, 0.5) 50%,
            rgba(100, 100, 100, 0.3) 80%,
            transparent 100%);
    margin: 0 10px;
}

/* 中间子标签切换 */
.graphics-sub-tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    margin: 0;
    position: relative;
    z-index: 10;
}

.graphics-sub-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 50px;
    background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
    border: 1px solid #3a3a3a;
    border-radius: 3px;
    color: #888;
    cursor: url('../img/cursor/wot_link.cur'), pointer;
    font-size: 14px;
    position: relative;
    min-width: 140px;
    z-index: 11;
}

.graphics-sub-tab.active {
    background: linear-gradient(180deg, #4a3a2a 0%, #3a2a1a 100%);
    border-color: #5a4a3a;
    color: #ffaa44;
}

.graphics-sub-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #ffaa44;
}

.graphics-sub-tab.active .sub-tab-text {
    color: #ffaa44;
    text-shadow: 0 0 8px rgba(255, 170, 68, 0.6);
}

.graphics-sub-tab .sub-tab-text {
    cursor: inherit;
}

/* 下方内容区域 - 顶边与标签文字高度对齐 */
.graphics-content-area {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid #3d3d3d;
    border-radius: 3px;
    padding: 15px;
    min-height: 300px;
    margin-top: -35px;
    padding-top: 45px;
    position: relative;
    z-index: 0;
}

.graphics-content-panel {
    display: none;
}

.graphics-content-panel.active {
    display: block;
}

/* 游戏界面设置网格 */
.interface-settings-grid {
    display: flex;
    gap: 30px;
}

.interface-settings-left,
.interface-settings-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.interface-settings-right {
    flex: 0 0 180px;
    display: flex;
    flex-direction: column;
}

/* 游戏界面新布局 */
.game-interface-layout {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

/* 左侧和中间区域（平均分布） */
.game-interface-main {
    flex: 1;
    display: flex;
    gap: 30px;
}

.game-interface-main .interface-settings-left,
.game-interface-main .interface-settings-center {
    flex: 1;
}

/* 右侧区域（固定宽度，与详细设置按钮右对齐） */
.game-interface-layout .interface-settings-right {
    flex: 0 0 320px;
    min-width: 320px;
}

.interface-setting-item {
    display: flex;
    flex-direction: column;
}

/* 颜色调整预览容器 */
.color-preview-container {
    position: relative;
    border: 1px solid #3d3d3d;
    background: #1a1a1a;
}

.color-preview-image {
    width: 100%;
    height: auto;
    display: block;
}

.color-preview-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: #c4b998;
    text-align: center;
    padding: 5px;
    font-size: 12px;
}

/* 颜色预览框 - n/a 状态 */
.color-preview-box {
    width: 100%;
    height: 90px;
    background: #0a0a0a;
    border: 1px solid #2a2a2a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.color-preview-na {
    color: #555;
    font-size: 14px;
    font-style: italic;
}

/* 设置卡片头部带info-btn */
.setting-card-header .info-btn {
    margin-left: 6px;
}

/* 复选框项间距 */
.interface-setting-item.checkbox-item {
    margin-top: 8px;
}

/* 滑块刻度标签 */
.slider-labels {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 3px;
}

.slider-labels span {
    color: #666;
    font-size: 10px;
}

/* ============================================
   详细设置页面样式
   ============================================ */

/* 图像模式选择器 */
.graphics-mode-selector {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding: 0 10px;
}

.graphics-mode-label {
    color: #888;
    font-size: 13px;
    margin-right: 15px;
}

.graphics-mode-options {
    display: flex;
    gap: 20px;
}

/* 详细设置网格布局 - 2x2布局 */
.details-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* 详细设置区块 */
.details-section {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid #3a3a3a;
    border-radius: 2px;
    padding: 0;
    overflow: hidden;
}

.details-section-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 15px;
}

/* 区块标题 */
.details-section-title {
    color: #c4b998;
    font-size: 13px;
    font-weight: bold;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid #3a3a3a;
}

/* 滑块项 */
.details-slider-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 详细设置滑块 - 宽度100% */
.details-slider-item .game-slider {
    width: 100%;
}

/* 滑块头部 */
.details-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.details-slider-label {
    color: #888;
    font-size: 12px;
}

/* 滑块标签组 - 包含label和info-btn */
.details-slider-header .details-slider-label,
.details-slider-header .info-btn {
    margin-right: 6px;
}

/* 滑块值 - 靠右显示 */
.details-slider-value {
    color: #c4b998;
    font-size: 11px;
    margin-left: auto;
}

/* 小滑块 */
.game-slider.small-slider {
    height: 16px;
}

.game-slider.small-slider .game-slider-track {
    height: 6px;
}

.game-slider.small-slider .game-slider-fill {
    height: 4px;
}

.game-slider.small-slider .game-slider-thumb {
    width: 8px;
    height: 14px;
}

/* 复选框列表 */
.details-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.details-checkbox-list .game-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 全宽区块 */
.details-section-fullwidth {
    grid-column: 1 / -1;
    margin-top: 20px;
}

/* 横向排列的区块内容 */
.details-section-row {
    display: flex;
    flex-direction: row;
    gap: 0;
    padding: 15px;
}

/* 分隔线 - 渐变式 */
.details-section-row {
    position: relative;
}

.details-section-row::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 15px;
    bottom: 15px;
    width: 1px;
    background: linear-gradient(to bottom,
            transparent 0%,
            rgba(100, 100, 100, 0.3) 15%,
            rgba(100, 100, 100, 0.5) 50%,
            rgba(100, 100, 100, 0.3) 85%,
            transparent 100%);
}

.details-section-row .details-slider-group {
    padding-right: 40px;
}

.details-section-row .details-checkbox-right {
    padding-left: 40px;
}

/* 左侧滑块组 */
.details-slider-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 右侧复选框组 */
.details-checkbox-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
}

/* 旧样式兼容 */
.details-settings-row {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.details-settings-row.single {
    margin-bottom: 0;
}

.details-section.full-width {
    flex: 1;
}

.details-section-content {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.details-slider-item.half {
    flex: 1;
    min-width: 200px;
}

.details-checkbox-item {
    margin-top: 8px;
}

.details-checkbox-item:first-child {
    margin-top: 10px;
}

.details-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 180px;
}

/* ============================================
   音量设置页面样式
   ============================================ */

/* 音量设置整体布局 */
.sound-settings-layout {
    display: flex;
    gap: 25px;
}

/* 左侧区域 */
.sound-left-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 右侧区域 */
.sound-right-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 音量卡片 - 填充剩余高度 */
.sound-volume-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid #3d3d3d;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sound-volume-card .sound-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px;
}

/* 顶部控制行 */
.sound-header-control {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid #3d3d3d;
    display: flex;
    align-items: center;
    padding: 12px;
    margin-bottom: 15px;
}

.sound-header-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sound-header-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
}

.sound-header-divider {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, transparent 0%, #3d3d3d 20%, #3d3d3d 80%, transparent 100%);
    margin: 0 20px;
}

.sound-header-right {
    flex: 1;
    min-width: 0;
}

.sound-header-left .sound-slider-row {
    margin-bottom: 8px;
    margin-top: 0;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex: none;
}

.sound-header-left .sound-slider-row .game-slider {
    min-width: 150px;
    flex: 1;
}

.sound-header-left .sound-slider-value {
    min-width: 25px;
    text-align: right;
}

.sound-master-checkbox {
    /* 无上移效果 */
    user-select: none;
    -webkit-user-select: none;
    line-height: 1;
    vertical-align: middle;
    display: block;
    margin: 0;
    padding: 0;
}

.sound-master-checkbox .game-checkbox {
    transform: none !important;
    transition: none !important;
    line-height: 1;
    vertical-align: middle;
    position: relative;
    display: flex !important;
    align-items: center;
}

.sound-master-checkbox .game-checkbox:active {
    transform: none !important;
    top: 0 !important;
    left: 0 !important;
}

.sound-master-checkbox .game-checkbox-box {
    transition: none !important;
    transform: none !important;
    position: relative;
    top: 0;
    left: 0;
}

.sound-master-checkbox .game-checkbox-label {
    transition: none !important;
    transform: none !important;
}

.sound-quality-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.sound-quality-label {
    color: #c4b998;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.sound-quality-dropdown {
    flex: 1;
    min-width: 0;
}

.sound-recommend-btn {
    flex: 1;
    padding: 4px 30px;
    font-size: 11px;
}

/* 音量卡片 */
.sound-card-header {
    background: rgba(255, 255, 255, 0.03);
    padding: 8px 12px;
    border-bottom: 1px solid #3d3d3d;
    color: #8a8a8a;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sound-card-body {
    padding: 12px;
}

/* 音量滑块行 */
.sound-slider-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    justify-content: center;
}

.sound-slider-row:last-child {
    margin-bottom: 0;
}

.sound-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sound-slider-label {
    color: #c4b998;
    font-size: 12px;
}

.sound-slider-value {
    color: #888;
    font-size: 11px;
}

.sound-slider-row .game-slider {
    width: 100%;
}

/* 预设卡片 */
.sound-presets-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid #3d3d3d;
    width: 100%;
}

.sound-preset-row {
    display: flex;
    gap: 30px;
    margin-bottom: 10px;
    width: 100%;
}

.sound-preset-row:last-child {
    margin-bottom: 0;
}

/* 输出设备区域 */
.sound-output-section {
    background: transparent;
    border: none;
    padding: 0;
    margin-top: 15px;
    width: 100%;
}

.sound-output-devices {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
    width: 100%;
}

.sound-device-item {
    width: 108px;
    height: 108px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid #3d3d3d;
    border-radius: 3px;
    cursor: url('../img/cursor/wot_link.cur'), pointer;
    transition: all 0.2s;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.sound-device-item:hover {
    border-color: #5a5a5a;
    background: rgba(0, 0, 0, 0.4);
}

.sound-device-item.active {
    border-color: #ff6b35;
    background: rgba(255, 107, 53, 0.1);
    box-shadow: 0 0 8px rgba(255, 107, 53, 0.3);
}

.sound-device-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 图标占位符 */
.sound-device-item.icon-placeholder {
    background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sound-device-item.icon-placeholder::before {
    content: attr(data-icon);
    font-size: 36px;
}

.sound-output-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    width: 100%;
}

.sound-auto-select {
    flex: 1;
    min-width: 0;
}

.sound-test-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 11px;
    flex: 1;
    min-width: 0;
}

.sound-test-icon {
    font-size: 12px;
}

/* 环境声音元素卡片 */
.sound-environment-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid #3d3d3d;
    width: 100%;
}

.sound-environment-card .sound-card-header {
    background: rgba(255, 255, 255, 0.03);
    padding: 8px 12px;
    border-bottom: 1px solid #3d3d3d;
    color: #8a8a8a;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sound-environment-card .sound-card-body {
    padding: 12px;
}

.sound-env-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
    padding-bottom: 0;
    border-bottom: none;
    width: 100%;
}

.sound-env-row:last-child {
    margin-bottom: 0;
}

.sound-env-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
}

.sound-env-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* 环境图标占位符 */
.sound-env-icon.icon-placeholder {
    background: transparent;
}

.sound-env-icon.icon-placeholder::before {
    content: attr(data-icon);
    font-size: 24px;
}

.sound-env-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.sound-env-title {
    color: #c4b998;
    font-size: 12px;
    line-height: 1;
    margin-bottom: 0;
}

.sound-env-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
}

.sound-env-controls .game-dropdown {
    flex: 1;
    min-width: 0;
}

.sound-test-btn-small {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ============================================
   设置页面统计大数据 - 与地图大全统一标准
   ============================================ */

.settings-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 0;
    padding: 0;
    background: transparent;
    border: none;
    flex-wrap: wrap;
}

.settings-stats .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: transparent;
    padding: 0;
}

.settings-stats .stat-number {
    font-size: 32px;
    font-weight: bold;
    color: #ff6b00;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 1;
    transition: transform 0.3s ease;
}

.settings-stats .stat-number.pulse-effect {
    animation: statPulse 0.6s ease-in-out;
}

@keyframes statPulse {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.3);
        text-shadow: 0 0 20px #ff6b00, 0 0 40px #ff6b00;
    }

    50% {
        transform: scale(1.1);
    }

    70% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }
}

.settings-stats .stat-label {
    font-size: 0.85rem;
    color: var(--wg-white);
    letter-spacing: 1px;
}

@media (max-width: 768px) {
    .settings-stats {
        gap: 30px;
    }

    .settings-stats .stat-number {
        font-size: 32px;
    }

    .settings-stats .stat-label {
        font-size: 12px;
    }
}