/* ================================================================
   BottomSheet.css - 底部抽屉样式（手机友好）
   - 输入法弹出时，整个 .bs-panel 会被浏览器上推
   - 用户永远能看到自己输入的内容
   ================================================================ */

.bs-root {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    display: flex;          /* V3.2.7.9.3: 屏幕正中心居中容器 */
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.bs-root.bs-show { pointer-events: auto; }

.bs-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
}
.bs-root.bs-show .bs-backdrop {
    background: rgba(0, 0, 0, 0.45);
}

.bs-panel {
    position: relative;     /* V3.2.7.9.3: 相对定位让 flex 居中生效 */
    background: linear-gradient(180deg, #fff8e7 0%, #fff 100%);
    border-radius: 16px;
    padding: 12px 20px calc(20px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.15);
    /* V3.2.7.9.3: PC 端从下方滑入改为缩放淡入（屏幕中心） */
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    overflow-y: auto;
}
.bs-root.bs-show .bs-panel {
    opacity: 1;
    transform: scale(1);
}

/* 顶部拖动条 */
.bs-handle {
    width: 36px;
    height: 4px;
    background: #d0c4a0;
    border-radius: 2px;
    margin: 0 auto 12px;
}

/* 右上角关闭按钮（V3.2.7 新增） */
.bs-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: none;
    background: #4a3a1f;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    font-weight: 600;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(74, 58, 31, 0.4);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.bs-close:hover {
    background: #2e2412;
    transform: scale(1.08);
    box-shadow: 0 3px 10px rgba(74, 58, 31, 0.55);
}
.bs-close:active {
    background: #1a1408;
    transform: scale(0.92);
    box-shadow: 0 1px 3px rgba(74, 58, 31, 0.4);
}

.bs-title {
    font-size: 17px;
    font-weight: 700;
    color: #4a3a1f;
    text-align: center;
    margin-bottom: 4px;
}
.bs-hint {
    font-size: 13px;
    color: #8a7a5c;
    text-align: center;
    margin-bottom: 16px;
}

/* 输入框 */
.bs-input-wrap {
    position: relative;
    margin-bottom: 12px;
}
.bs-input {
    width: 100%;
    height: 52px;
    border: 2px solid #c4b48a;
    border-radius: 10px;
    background: #fff;
    font-size: 18px;
    color: #2a2418;
    padding: 0 50px 0 16px;
    box-sizing: border-box;
    font-weight: 600;
    transition: border-color 0.2s;
}
.bs-input:focus {
    outline: none;
    border-color: #8b1a1a;
    box-shadow: 0 0 0 3px rgba(139, 26, 26, 0.15);
}
.bs-unit {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #8a7a5c;
    font-weight: 600;
    pointer-events: none;
}

/* 快捷按钮 */
.bs-presets {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.bs-preset-btn {
    flex: 1;
    min-width: 60px;
    height: 36px;
    border: 1px solid #c4b48a;
    border-radius: 18px;
    background: #fff;
    color: #4a3a1f;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.bs-preset-btn:active {
    background: #8b1a1a;
    color: #fff;
    transform: scale(0.96);
}

/* 操作按钮 */
.bs-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}
.bs-btn {
    flex: 1;
    height: 46px;
    border: none;
    border-radius: 23px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}
.bs-btn-cancel {
    background: #ffffff;
    color: #4a3a1f;
    border: 2px solid #c4b48a;
    font-weight: 800;
}
.bs-btn-cancel:active { background: #f0e8d4; }
.bs-btn-confirm {
    background: linear-gradient(135deg, #c41e3a 0%, #8b1a1a 50%, #6b1414 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(139, 26, 26, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 2px solid #6b1414;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.bs-btn-confirm:active { transform: scale(0.98); }

/* V3.2.7.3：危险按钮（confirm danger 模式 = 红字白底 + 深红描边，对比度 6:1 AAA） */
.bs-btn-danger {
    background: linear-gradient(135deg, #fff 0%, #fff5f5 100%);
    color: #c41e3a;
    font-weight: 900;
    box-shadow: 0 4px 12px rgba(196, 30, 58, 0.25), inset 0 0 0 2px #c41e3a;
    border: 2px solid #c41e3a;
    text-shadow: none;
}
.bs-btn-danger:active {
    background: linear-gradient(135deg, #c41e3a 0%, #8b1a1a 100%);
    color: #fff;
    transform: scale(0.98);
}

/* 选项列表（用于单选） */
.bs-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.bs-option {
    padding: 14px 16px;
    border: 2px solid #e8dcb8;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: all 0.15s;
}
.bs-option:active {
    background: #fff8e7;
    border-color: #8b1a1a;
}
.bs-option-label {
    font-size: 16px;
    font-weight: 700;
    color: #4a3a1f;
}
.bs-option-desc {
    font-size: 12px;
    color: #8a7a5c;
    margin-top: 4px;
}

/* ================================================================
   V3.2.7.4：PC 端 sheet 宽度与游戏主体框架对齐（480px）
   - 手机端：贴底全宽（不变）
   - PC 端：水平居中 + max-width: 480px + 圆角 + 阴影增强
   ================================================================ */

/* 手机适配 */
@media (max-width: 480px) {
    .bs-panel {
        padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
    }
    .bs-input { font-size: 16px; height: 50px; } /* 防止 iOS 缩放 */
}

/* V3.2.7.9.3: 删除旧的 PC 端 media query（与新版 flex 居中冲突） */


/* ================================================================
   V3.2.7.7：明细展示 sheet（卖房/卖实业）大字号样式
   - base 字号 14 → 16（"大一号"）
   - 行高 1.5 → 1.7
   - 标题 18 → 22
   - 合计行 18 金色加粗
   ================================================================ */
.bs-panel-detail {
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
}

.bs-panel-detail .bs-title {
    font-size: 22px;          /* 默认 18px → 22px（+4px） */
    font-weight: 800;
    margin-bottom: 8px;
}

.bs-panel-detail .bs-subtitle {
    font-size: 15px;
    color: var(--text-secondary, #666);
    margin-bottom: 16px;
    text-align: center;
}

.bs-panel-detail .bs-detail-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    border: 1px solid rgba(212, 175, 55, 0.15);
}

.bs-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 16px;          /* 大一号（原 14px → 16px） */
    line-height: 1.7;
    color: var(--text-primary, #2a1a1a);
}

.bs-detail-row .bs-detail-label {
    color: var(--text-secondary, #555);
    font-weight: 500;
}

.bs-detail-row .bs-detail-value {
    font-weight: 700;
    font-family: "SimSun", "宋体", "Songti SC", "STSong", serif;
    color: var(--text-primary, #1a1a1a);
    font-size: 16px;
    letter-spacing: 0.5px;
}

/* 收入（绿色 +） */
.bs-detail-income .bs-detail-value {
    color: #2e7d32;
    font-weight: 800;
}

/* 支出（红色 −） */
.bs-detail-expense .bs-detail-value {
    color: #c62828;
    font-weight: 700;
}

/* 小计（灰色分隔） */
.bs-detail-subtotal {
    border-top: 1px dashed rgba(0, 0, 0, 0.1);
    padding-top: 8px;
    margin-top: 4px;
}
.bs-detail-subtotal .bs-detail-label,
.bs-detail-subtotal .bs-detail-value {
    color: var(--text-secondary, #888);
    font-weight: 600;
}

/* 合计行（金色加粗） */
.bs-panel-detail .bs-detail-final {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 14px 16px;
    margin: 8px 0 20px 0;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.18) 0%, rgba(212, 175, 55, 0.08) 100%);
    border: 2px solid rgba(212, 175, 55, 0.5);
    border-radius: 12px;
}
.bs-panel-detail .bs-detail-final .bs-detail-label {
    font-size: 18px;
    font-weight: 800;
    color: var(--secondary-yellow, #d4a017);
}
.bs-panel-detail .bs-detail-final .bs-detail-value {
    font-size: 22px;          /* 合计金额最大 */
    font-weight: 900;
    color: var(--secondary-yellow, #d4a017);
    font-family: "SimSun", "宋体", "Songti SC", "STSong", serif;
    letter-spacing: 1px;
}

/* 大按钮（单按钮场景） */
.bs-actions-single {
    justify-content: center;
}
.bs-btn-large {
    width: 100%;
    height: 52px;
    font-size: 17px;          /* 大一号（原 15px → 17px） */
    font-weight: 800;
    letter-spacing: 1px;
}

/* ================================================================
   V3.2.7：设置 sheet tab 导航 + 角色创建 tab 内容
   ================================================================ */

/* tab 导航条 */
.settings-tabs {
    display: flex;
    gap: 4px;
    margin: 0 0 16px 0;
    padding: 4px;
    background: #f5ecd6;
    border-radius: 12px;
    border: 1px solid #c4b48a;
}
.settings-tab-btn {
    flex: 1;
    padding: 10px 0;
    text-align: center;
    font-size: 16px;
    font-weight: 800;
    color: #6a5a3c;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.15s;
    font-family: "SimSun", "宋体", "Songti SC", "STSong", serif;
    letter-spacing: 0.5px;
    -webkit-tap-highlight-color: transparent;
}
.settings-tab-btn.active {
    background: linear-gradient(135deg, #8b1a1a 0%, #6b1414 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(139, 26, 26, 0.3);
}

/* tab 内容容器 */
.settings-tab {
    display: none;
}
.settings-tab.active {
    display: block;
    animation: tabFadeIn 0.25s ease;
}
@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 角色创建 tab 容器（继承 scene-character 的样式基础上做调整） */
.character-container-inner {
    padding: 0 4px;
}
.character-container-inner .character-subtitle {
    text-align: center;
    font-size: 14px;
    color: #6a5a3c;
    margin-bottom: 12px;
    font-family: "SimSun", "宋体", "Songti SC", "STSong", serif;
}
.character-container-inner .avatar-preview-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 16px;
}
.character-container-inner .avatar-preview {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #c4b48a;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(74, 58, 31, 0.2);
    margin-bottom: 8px;
}
.character-container-inner .name-preview {
    font-size: 18px;
    font-weight: 800;
    color: #4a3a1f;
    font-family: "SimSun", "宋体", "Songti SC", "STSong", serif;
}
.character-container-inner .section-title {
    font-size: 15px;
    font-weight: 800;
    color: #4a3a1f;
    margin: 14px 0 8px 0;
    font-family: "SimSun", "宋体", "Songti SC", "STSong", serif;
}
.character-container-inner .avatar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}
.character-container-inner .avatar-option {
    background: #fff;
    border: 2px solid #e8dcb8;
    border-radius: 10px;
    padding: 8px 4px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.character-container-inner .avatar-option.selected {
    border-color: #8b1a1a;
    background: #fff8e7;
    box-shadow: 0 0 0 2px rgba(139, 26, 26, 0.2);
}
.character-container-inner .avatar-option-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin: 0 auto 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}
.character-container-inner .avatar-option-name {
    font-size: 12px;
    color: #4a3a1f;
    font-weight: bold;
    font-family: "SimSun", "宋体", "Songti SC", "STSong", serif;
}
.character-container-inner .upload-btn {
    display: block;
    background: #f0e8d4;
    color: #4a3a1f;
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border: 1px dashed #c4b48a;
    margin-bottom: 10px;
    font-family: "SimSun", "宋体", "Songti SC", "STSong", serif;
}
.character-container-inner .name-input {
    width: 100%;
    height: 44px;
    border: 2px solid #c4b48a;
    border-radius: 8px;
    background: #fff;
    font-size: 16px;
    color: #2a2418;
    padding: 0 14px;
    box-sizing: border-box;
    font-weight: 800;
    font-family: "SimSun", "宋体", "Songti SC", "STSong", serif;
    margin-bottom: 10px;
}
.character-container-inner .name-input:focus {
    outline: none;
    border-color: #8b1a1a;
}
.character-container-inner .gender-options {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}
.character-container-inner .gender-option {
    flex: 1;
    background: #fff;
    border: 2px solid #e8dcb8;
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.character-container-inner .gender-option.selected {
    border-color: #8b1a1a;
    background: #fff8e7;
    box-shadow: 0 0 0 2px rgba(139, 26, 26, 0.2);
}
.character-container-inner .gender-option input {
    display: none;
}
.character-container-inner .gender-option-icon {
    font-size: 32px;
    margin-bottom: 4px;
}
.character-container-inner .gender-option-label {
    font-size: 14px;
    color: #4a3a1f;
    font-weight: bold;
    font-family: "SimSun", "宋体", "Songti SC", "STSong", serif;
}
.character-container-inner .character-confirm-btn {
    width: 100%;
    height: 50px;
    background: linear-gradient(135deg, #8b1a1a 0%, #6b1414 100%);
    color: #fff;
    border: none;
    border-radius: 25px;
    font-size: 17px;
    font-weight: 800;
    font-family: "SimSun", "宋体", "Songti SC", "STSong", serif;
    cursor: pointer;
    margin-top: 8px;
    box-shadow: 0 3px 8px rgba(139, 26, 26, 0.3);
    letter-spacing: 1px;
}
.character-container-inner .character-confirm-btn:active {
    transform: scale(0.98);
}