/* ===========================================================
   像素养成小游戏 - 样式表
   暖色调像素风，响应式布局
   =========================================================== */

/* ---------- 全局变量 ---------- */
:root {
    --color-bg: #f4e4c1;            /* 暖米色背景 */
    --color-bg-deep: #e8d5a8;       /* 略深背景 */
    --color-panel: #fff6e0;         /* 面板色 */
    --color-panel-border: #8b5a2b;  /* 像素描边棕 */
    --color-text: #3d2817;          /* 主文字深棕 */
    --color-accent: #d2691e;        /* 暖橙强调 */
    --color-bar-bg: #6b4423;        /* 属性条灰棕背景 */
    --color-bar-fill: #5cb85c;      /* 属性条绿色填充 */
    --color-bar-low: #d9534f;       /* 低值红色 */
    --color-btn: #f0c878;           /* 按钮主色 */
    --color-btn-active: #d9a955;    /* 按钮按下 */
    --color-shadow: #5a3a1a;        /* 像素描边阴影 */
    --pixel-border: 4px;
    --font-pixel: "Press Start 2P", "Courier New", Consolas, monospace;
}

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

html, body {
    height: 100%;
}

body {
    font-family: var(--font-pixel);
    color: var(--color-text);
    background:
        radial-gradient(circle at 20% 10%, #ffe9b8 0%, transparent 50%),
        radial-gradient(circle at 80% 90%, #f5d28a 0%, transparent 50%),
        var(--color-bg);
    background-attachment: fixed;
    line-height: 1.5;
    font-size: 14px;
    image-rendering: pixelated;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ---------- 顶部信息栏 ---------- */
#top-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 12px 16px;
    background: var(--color-panel);
    border-bottom: var(--pixel-border) solid var(--color-panel-border);
    box-shadow: 0 4px 0 var(--color-shadow);
    flex-wrap: wrap;
}

.top-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 80px;
}

.top-label {
    font-size: 10px;
    color: var(--color-accent);
    letter-spacing: 1px;
}

#char-name,
#char-age,
#char-stage {
    font-size: 14px;
    color: var(--color-text);
}

.btn-help {
    margin-left: auto;
    font-size: 10px;
    padding: 8px 12px;
}

/* ---------- 主区域：左 canvas + 右属性面板 ---------- */
#main-area {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(256px, 1fr) 320px;
    gap: 16px;
    padding: 16px;
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
}

#stage-area {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-panel);
    border: var(--pixel-border) solid var(--color-panel-border);
    box-shadow: 0 6px 0 var(--color-shadow);
    padding: 12px;
}

#game-canvas {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    width: 100%;
    max-width: 512px;
    height: auto;
    aspect-ratio: 256 / 192;
    background: #b8e0b8;
    border: 2px solid var(--color-shadow);
    display: block;
}

/* ---------- 属性面板 ---------- */
#stats-panel {
    background: var(--color-panel);
    border: var(--pixel-border) solid var(--color-panel-border);
    box-shadow: 0 6px 0 var(--color-shadow);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.panel-title {
    font-size: 12px;
    text-align: center;
    color: var(--color-accent);
    padding-bottom: 6px;
    border-bottom: 2px dashed var(--color-bg-deep);
    letter-spacing: 2px;
}

.stat {
    display: grid;
    grid-template-columns: 20px 64px 1fr 32px;
    align-items: center;
    gap: 6px;
    font-size: 10px;
}

.stat-icon {
    font-size: 14px;
    text-align: center;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", monospace;
}

.stat-label {
    color: var(--color-text);
    white-space: nowrap;
}

/* 属性条 */
.bar {
    position: relative;
    height: 14px;
    background: var(--color-bar-bg);
    border: 2px solid var(--color-shadow);
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    width: 80%;
    background: var(--color-bar-fill);
    background-image: repeating-linear-gradient(
        90deg,
        transparent 0,
        transparent 4px,
        rgba(0, 0, 0, 0.1) 4px,
        rgba(0, 0, 0, 0.1) 5px
    );
    transition: width 0.3s ease, background-color 0.3s ease;
}

.bar-value {
    text-align: right;
    font-size: 10px;
    color: var(--color-text);
}

/* 低值闪烁：game.js 将 .low 加在 .stat 容器上（id="bar-*"） */
.stat.low .bar-fill {
    background: var(--color-bar-low);
    animation: flash 0.8s steps(2) infinite;
}

@keyframes flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* ---------- 底部操作栏 ---------- */
#action-bar {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--color-panel);
    border-top: var(--pixel-border) solid var(--color-panel-border);
    box-shadow: 0 -4px 0 var(--color-shadow);
    flex-wrap: wrap;
}

/* ---------- 像素风按钮 ---------- */
.pixel-btn {
    font-family: var(--font-pixel);
    font-size: 12px;
    color: var(--color-text);
    background: var(--color-btn);
    border: none;
    padding: 10px 16px;
    cursor: pointer;
    /* 像素描边：多层 box-shadow 模拟硬边阴影 */
    box-shadow:
        inset -3px -3px 0 var(--color-btn-active),
        inset 3px 3px 0 #ffe1a0,
        3px 3px 0 var(--color-shadow);
    letter-spacing: 1px;
    transition: transform 0.05s linear;
    image-rendering: pixelated;
}

.pixel-btn:hover {
    background: #ffd98a;
}

.pixel-btn:active,
.pixel-btn.active {
    transform: translate(3px, 3px);
    box-shadow:
        inset -3px -3px 0 var(--color-btn-active),
        inset 3px 3px 0 #ffe1a0,
        0 0 0 var(--color-shadow);
}

.pixel-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ---------- 通用：隐藏类 ---------- */
.hidden {
    display: none !important;
}

/* ---------- 事件弹窗 ---------- */
#event-modal {
    position: fixed;
    inset: 0;
    background: rgba(60, 40, 20, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 16px;
}

#event-modal .modal-card {
    background: var(--color-panel);
    border: var(--pixel-border) solid var(--color-panel-border);
    box-shadow: 0 8px 0 var(--color-shadow);
    padding: 20px;
    max-width: 420px;
    width: 100%;
    text-align: center;
}

/* ---------- 通用弹窗卡片基础样式 ---------- */
/* 所有 .modal-card 默认带背景/边框/阴影，避免变体类遗漏背景 */
.modal-card {
    background: var(--color-panel);
    border: var(--pixel-border) solid var(--color-panel-border);
    box-shadow: 0 8px 0 var(--color-shadow);
    padding: 20px;
    width: 100%;
}

#event-text {
    font-size: 12px;
    line-height: 1.8;
    margin-bottom: 16px;
    white-space: pre-wrap;
}

#event-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

#event-options .pixel-btn {
    font-size: 11px;
    padding: 10px;
}

/* ---------- 帮助弹窗 ---------- */
#help-modal {
    position: fixed;
    inset: 0;
    background: rgba(60, 40, 20, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 110;
    padding: 16px;
}

.help-card {
    text-align: left;
    max-width: 480px;
    max-height: 80vh;
    overflow-y: auto;
}

.help-card h3 {
    font-size: 14px;
    text-align: center;
    color: var(--color-accent);
    margin-bottom: 12px;
    letter-spacing: 2px;
}

.help-content {
    font-size: 10px;
    line-height: 1.8;
    margin-bottom: 16px;
}

.help-content p {
    margin-top: 10px;
    color: var(--color-accent);
}

.help-content ul {
    list-style: none;
    padding-left: 8px;
    margin-top: 4px;
}

.help-content li {
    color: var(--color-text);
    padding: 2px 0;
    padding-left: 12px;
    position: relative;
}

.help-content li::before {
    content: "▸";
    position: absolute;
    left: 0;
    color: var(--color-accent);
}

#btn-help-close {
    display: block;
    margin: 0 auto;
}

/* ---------- toast ---------- */
#toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-text);
    color: var(--color-panel);
    padding: 10px 16px;
    font-size: 11px;
    letter-spacing: 1px;
    border: 2px solid var(--color-accent);
    box-shadow: 3px 3px 0 var(--color-shadow);
    opacity: 0;
    pointer-events: none;
    z-index: 200;
    transition: opacity 0.2s ease;
    max-width: 80vw;
    text-align: center;
}

#toast.show {
    opacity: 1;
    animation: toastIn 0.3s steps(3);
}

@keyframes toastIn {
    0% { transform: translate(-50%, 10px); opacity: 0; }
    100% { transform: translate(-50%, 0); opacity: 1; }
}

/* ---------- 启动遮罩 ---------- */
#start-overlay {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at center, #ffe9b8 0%, #d4a76a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
    padding: 16px;
}

.overlay-card {
    background: var(--color-panel);
    border: var(--pixel-border) solid var(--color-panel-border);
    box-shadow: 0 8px 0 var(--color-shadow);
    padding: 28px 24px;
    max-width: 460px;
    width: 100%;
    text-align: center;
}

.game-title {
    font-size: 22px;
    color: var(--color-accent);
    letter-spacing: 4px;
    margin-bottom: 8px;
    text-shadow: 3px 3px 0 var(--color-shadow);
}

.game-subtitle {
    font-size: 10px;
    color: var(--color-text);
    margin-bottom: 18px;
    letter-spacing: 1px;
}

.overlay-desc {
    font-size: 10px;
    line-height: 1.9;
    color: var(--color-text);
    text-align: left;
    background: var(--color-bg-deep);
    border: 2px solid var(--color-panel-border);
    padding: 12px;
    margin-bottom: 20px;
}

.install-hint {
    font-size: 9px;
    color: var(--color-text-muted, #888);
    margin-top: 12px;
}
.install-hint a {
    color: var(--color-bar-low, #cc4444);
    text-decoration: underline;
}

.overlay-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.overlay-buttons .pixel-btn {
    min-width: 120px;
}

/* ---------- 响应式：小屏上下排列 ---------- */
@media (max-width: 720px) {
    body {
        font-size: 12px;
    }

    #top-bar {
        gap: 12px;
        padding: 8px 10px;
    }

    .btn-help {
        margin-left: 0;
    }

    #main-area {
        grid-template-columns: 1fr;
        padding: 10px;
        gap: 10px;
    }

    #game-canvas {
        max-width: 100%;
    }

    #stats-panel {
        order: 2;
    }

    .stat {
        grid-template-columns: 18px 56px 1fr 28px;
        font-size: 9px;
    }

    #action-bar {
        gap: 8px;
        padding: 10px;
    }

    .pixel-btn {
        font-size: 10px;
        padding: 8px 10px;
        flex: 1;
        min-width: 64px;
    }

    .game-title {
        font-size: 18px;
    }

    #toast {
        bottom: 100px;
        font-size: 10px;
    }
}

@media (max-width: 380px) {
    .pixel-btn {
        font-size: 9px;
        padding: 8px 6px;
        min-width: 56px;
    }

    .stat {
        grid-template-columns: 16px 48px 1fr 24px;
        font-size: 8px;
    }
}

/* ===========================================================
   扩展 UI 样式：登录/注册、新游戏流程、商城、背包、社交
   =========================================================== */

/* ---------- 顶部金币与模式 ---------- */
#gold-display {
    color: #b8860b;
    font-size: 14px;
    text-shadow: 1px 1px 0 #fff3a0;
}

#mode-badge {
    font-size: 10px;
    color: var(--color-accent);
    background: var(--color-bg-deep);
    padding: 2px 6px;
    border: 2px solid var(--color-panel-border);
    letter-spacing: 1px;
}

/* ---------- 像素风输入框 ---------- */
.pixel-input {
    font-family: var(--font-pixel);
    font-size: 11px;
    color: var(--color-text);
    background: #ffffff;
    border: var(--pixel-border) solid var(--color-panel-border);
    box-shadow: inset 2px 2px 0 var(--color-bg-deep);
    padding: 10px 12px;
    width: 100%;
    outline: none;
    letter-spacing: 1px;
}

.pixel-input::placeholder {
    color: #a08868;
    font-size: 10px;
}

.pixel-input:focus {
    border-color: var(--color-accent);
    box-shadow: inset 2px 2px 0 var(--color-bg-deep), 0 0 0 2px var(--color-accent);
}

/* ---------- 登录/注册面板 ---------- */
#auth-modal {
    position: fixed;
    inset: 0;
    background: rgba(60, 40, 20, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 320;
    padding: 16px;
}

.auth-card {
    background: var(--color-panel);
    border: var(--pixel-border) solid var(--color-panel-border);
    box-shadow: 0 8px 0 var(--color-shadow);
    padding: 24px 20px;
    max-width: 360px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

.auth-tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 4px;
}

.auth-tab {
    flex: 1;
    font-size: 11px;
    padding: 8px 12px;
}

.auth-tab.active {
    background: var(--color-accent);
    color: #fff6e0;
    transform: translate(3px, 3px);
    box-shadow:
        inset -3px -3px 0 var(--color-shadow),
        inset 3px 3px 0 #ffb070,
        0 0 0 var(--color-shadow);
}

.auth-error {
    color: #c0392b;
    font-size: 10px;
    min-height: 14px;
    letter-spacing: 1px;
}

/* ---------- 新游戏流程面板 ---------- */
#new-game-flow {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center, #ffe9b8 0%, #d4a76a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 310;
    padding: 16px;
}

.flow-card {
    background: var(--color-panel);
    border: var(--pixel-border) solid var(--color-panel-border);
    box-shadow: 0 8px 0 var(--color-shadow);
    padding: 28px 24px;
    max-width: 460px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.flow-card h3 {
    font-size: 14px;
    color: var(--color-accent);
    letter-spacing: 2px;
    margin-bottom: 4px;
}

.flow-step {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}

.flow-desc {
    font-size: 10px;
    line-height: 1.9;
    color: var(--color-text);
    background: var(--color-bg-deep);
    border: 2px solid var(--color-panel-border);
    padding: 10px;
    text-align: left;
}

.flow-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.flow-buttons .pixel-btn {
    min-width: 120px;
}

/* 性别选择 */
.gender-select {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.gender-btn {
    flex: 1;
    min-width: 100px;
    padding: 12px 16px;
}

.gender-btn.active {
    background: var(--color-accent);
    color: #fff6e0;
    transform: translate(3px, 3px);
    box-shadow:
        inset -3px -3px 0 var(--color-shadow),
        inset 3px 3px 0 #ffb070,
        0 0 0 var(--color-shadow);
}

/* 天赋列表 */
.talent-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.talent-item {
    background: var(--color-bg-deep);
    border: var(--pixel-border) solid var(--color-panel-border);
    box-shadow: 2px 2px 0 var(--color-shadow);
    padding: 10px 12px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.talent-item .talent-name {
    font-size: 11px;
    color: var(--color-accent);
    letter-spacing: 1px;
}

.talent-item .talent-desc {
    font-size: 9px;
    color: var(--color-text);
    line-height: 1.7;
}

/* ---------- 商城/背包面板 ---------- */
#shop-modal,
#inventory-modal {
    position: fixed;
    inset: 0;
    background: rgba(60, 40, 20, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 130;
    padding: 16px;
}

.shop-card {
    background: var(--color-panel);
    border: var(--pixel-border) solid var(--color-panel-border);
    box-shadow: 0 8px 0 var(--color-shadow);
    padding: 20px;
    max-width: 520px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.shop-card h3 {
    font-size: 14px;
    color: var(--color-accent);
    letter-spacing: 2px;
}

.shop-card p {
    font-size: 11px;
    color: var(--color-text);
}

#shop-gold {
    color: #b8860b;
    font-weight: bold;
}

.shop-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 4px 0;
}

.shop-item {
    background: var(--color-bg-deep);
    border: var(--pixel-border) solid var(--color-panel-border);
    box-shadow: 2px 2px 0 var(--color-shadow);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    text-align: center;
}

.shop-item .item-icon {
    font-size: 20px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 2px solid var(--color-panel-border);
    font-family: "Segoe UI Emoji", "Apple Color Emoji", monospace;
}

.shop-item .item-name {
    font-size: 11px;
    color: var(--color-text);
    letter-spacing: 1px;
}

.shop-item .item-price {
    font-size: 10px;
    color: #b8860b;
}

.shop-item .item-stock {
    font-size: 9px;
    color: var(--color-accent);
}

.shop-item .item-desc {
    font-size: 9px;
    color: var(--color-text);
    line-height: 1.6;
}

.shop-item .pixel-btn {
    font-size: 10px;
    padding: 6px 10px;
    width: 100%;
}

/* ---------- 打工面板 ---------- */
#work-modal {
    position: fixed;
    inset: 0;
    background: rgba(60, 40, 20, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 130;
    padding: 16px;
}

.work-card {
    background: var(--color-panel);
    border: var(--pixel-border) solid var(--color-panel-border);
    box-shadow: 0 8px 0 var(--color-shadow);
    padding: 20px;
    max-width: 520px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.work-card h3 {
    font-size: 14px;
    color: var(--color-accent);
    letter-spacing: 2px;
}

.work-card p {
    font-size: 11px;
    color: var(--color-text);
}

#work-gold {
    color: #b8860b;
    font-weight: bold;
}

#work-energy {
    color: var(--color-accent);
    font-weight: bold;
}

.work-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 4px 0;
}

.work-item {
    background: var(--color-bg-deep);
    border: var(--pixel-border) solid var(--color-panel-border);
    box-shadow: 2px 2px 0 var(--color-shadow);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
}

.work-icon {
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 2px solid var(--color-panel-border);
    font-family: "Segoe UI Emoji", "Apple Color Emoji", monospace;
}

.work-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.work-name {
    font-size: 11px;
    color: var(--color-text);
    letter-spacing: 1px;
}

.work-desc {
    font-size: 9px;
    color: var(--color-text);
    line-height: 1.5;
}

.work-stats {
    display: flex;
    justify-content: space-around;
    gap: 4px;
    font-size: 9px;
    margin-top: 2px;
}

.ws-reward { color: #b8860b; font-weight: bold; }
.ws-energy { color: var(--color-bar-low); }
.ws-time   { color: var(--color-accent); }

.work-item .pixel-btn {
    font-size: 10px;
    padding: 6px 10px;
    width: 100%;
}

.work-item .pixel-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.shop-empty {
    grid-column: 1 / -1;
    font-size: 11px;
    color: var(--color-accent);
    padding: 20px;
    text-align: center;
}

#btn-shop-close,
#btn-inventory-close {
    align-self: center;
    min-width: 120px;
}

/* ---------- 社交面板 ---------- */
#social-modal {
    position: fixed;
    inset: 0;
    background: rgba(60, 40, 20, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 140;
    padding: 16px;
}

.social-card {
    background: var(--color-panel);
    border: var(--pixel-border) solid var(--color-panel-border);
    box-shadow: 0 8px 0 var(--color-shadow);
    padding: 20px;
    max-width: 520px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.social-card h3 {
    font-size: 14px;
    color: var(--color-accent);
    letter-spacing: 2px;
}

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

.npc-item {
    background: var(--color-bg-deep);
    border: var(--pixel-border) solid var(--color-panel-border);
    box-shadow: 2px 2px 0 var(--color-shadow);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: transform 0.05s linear;
}

.npc-item:hover {
    transform: translate(2px, 2px);
}

.npc-item .npc-avatar {
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 2px solid var(--color-panel-border);
    font-family: "Segoe UI Emoji", "Apple Color Emoji", monospace;
}

.npc-item .npc-name {
    font-size: 11px;
    color: var(--color-text);
    letter-spacing: 1px;
}

.npc-item .npc-relation {
    font-size: 9px;
    color: var(--color-accent);
}

.npc-detail {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.npc-detail h4 {
    font-size: 13px;
    color: var(--color-accent);
    text-align: center;
    letter-spacing: 2px;
}

.npc-detail p {
    font-size: 10px;
    line-height: 1.8;
    color: var(--color-text);
}

.npc-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 4px;
}

.npc-actions .pixel-btn {
    font-size: 10px;
    padding: 8px;
}

#btn-npc-back,
#btn-social-close {
    align-self: center;
    min-width: 120px;
    margin-top: 4px;
}

/* ---------- 响应式：小屏单列 ---------- */
@media (max-width: 540px) {
    .shop-list,
    .npc-list {
        grid-template-columns: 1fr;
    }

    .shop-card,
    .social-card,
    .auth-card,
    .flow-card {
        max-width: 100%;
    }

    .npc-actions {
        grid-template-columns: 1fr;
    }

    .flow-buttons .pixel-btn,
    .gender-btn {
        min-width: 100px;
        font-size: 10px;
        padding: 8px 10px;
    }
}

/* ===========================================================
   扩展 UI 样式：好友、玩家角色社交、私信
   =========================================================== */

/* ---------- 顶部按钮与徽章 ---------- */
.top-btn {
    position: relative;
    font-size: 10px;
    padding: 8px 12px;
    letter-spacing: 1px;
}

.badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #c0392b;
    color: #ffffff;
    font-size: 9px;
    line-height: 16px;
    text-align: center;
    border: 2px solid var(--color-panel);
    border-radius: 8px;
    box-shadow: 1px 1px 0 var(--color-shadow);
    letter-spacing: 0;
}

.badge.hidden {
    display: none !important;
}

/* ---------- 好友面板 ---------- */
#friends-modal {
    position: fixed;
    inset: 0;
    background: rgba(60, 40, 20, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 150;
    padding: 16px;
}

.friends-card {
    background: var(--color-panel);
    border: var(--pixel-border) solid var(--color-panel-border);
    box-shadow: 0 8px 0 var(--color-shadow);
    padding: 20px;
    max-width: 520px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.friends-tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.friends-tab {
    position: relative;
    flex: 1;
    min-width: 90px;
    font-size: 11px;
    padding: 8px 12px;
}

.friends-tab.active {
    background: var(--color-accent);
    color: #fff6e0;
    transform: translate(3px, 3px);
    box-shadow:
        inset -3px -3px 0 var(--color-shadow),
        inset 3px 3px 0 #ffb070,
        0 0 0 var(--color-shadow);
}

.friends-pane {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.friends-pane h4 {
    font-size: 12px;
    color: var(--color-accent);
    text-align: center;
    letter-spacing: 1px;
    margin-top: 6px;
}

.friend-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.friend-item {
    background: var(--color-bg-deep);
    border: var(--pixel-border) solid var(--color-panel-border);
    box-shadow: 2px 2px 0 var(--color-shadow);
    padding: 10px;
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 10px;
    align-items: center;
}

.friend-item .friend-avatar {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 2px solid var(--color-panel-border);
    font-size: 22px;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", monospace;
}

.friend-item .friend-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.friend-item .friend-name {
    font-size: 11px;
    color: var(--color-text);
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.friend-item .friend-summary {
    font-size: 9px;
    color: var(--color-accent);
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.friend-item .friend-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.friend-item .friend-actions .pixel-btn {
    font-size: 9px;
    padding: 4px 8px;
    min-width: 64px;
}

/* 在线/离线点 */
.online-dot,
.offline-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid var(--color-shadow);
    vertical-align: middle;
}

.online-dot {
    background: #5cb85c;
}

.offline-dot {
    background: #999999;
}

/* 共养标识 */
.coparent-tag {
    display: inline-block;
    font-size: 8px;
    color: #fff6e0;
    background: var(--color-accent);
    border: 1px solid var(--color-shadow);
    padding: 1px 4px;
    letter-spacing: 0;
    margin-left: 4px;
    vertical-align: middle;
}

#btn-friends-close {
    align-self: center;
    min-width: 120px;
    margin-top: 4px;
}

/* ---------- 玩家角色社交面板 ---------- */
#player-social-modal {
    position: fixed;
    inset: 0;
    background: rgba(60, 40, 20, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 160;
    padding: 16px;
}

#player-social-modal .psc-info {
    background: var(--color-bg-deep);
    border: 2px solid var(--color-panel-border);
    box-shadow: 2px 2px 0 var(--color-shadow);
    padding: 10px 12px;
    font-size: 10px;
    line-height: 1.8;
    color: var(--color-text);
    text-align: left;
}

#btn-psc-back,
#btn-psc-close {
    align-self: center;
    min-width: 120px;
    margin-top: 4px;
}

/* ---------- 私信面板 ---------- */

/* ---------- NPC 列表卡片（renderNpcList 使用） ---------- */
.npc-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: var(--color-bg-deep);
    border: var(--pixel-border) solid var(--color-panel-border);
    box-shadow: 2px 2px 0 var(--color-shadow);
    cursor: pointer;
    margin-bottom: 8px;
    transition: transform 0.05s linear;
}

.npc-card:hover {
    background: var(--color-panel);
    transform: translate(2px, 2px);
}

.npc-card .npc-avatar {
    width: 40px;
    height: 40px;
    background: var(--color-panel);
    border: 2px solid var(--color-panel-border);
    image-rendering: pixelated;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", monospace;
}

.npc-card .npc-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.npc-card .npc-card-name {
    font-weight: bold;
    font-size: 13px;
    color: var(--color-text);
    letter-spacing: 1px;
}

.npc-card .npc-card-rel {
    font-size: 11px;
    color: #888;
}

/* ---------- 好友列表卡片（friend-card 使用） ---------- */
.friend-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: var(--color-bg-deep);
    border: var(--pixel-border) solid var(--color-panel-border);
    box-shadow: 2px 2px 0 var(--color-shadow);
    margin-bottom: 8px;
}

.friend-card .friend-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.friend-card .friend-name {
    font-weight: bold;
    font-size: 13px;
    color: var(--color-text);
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.friend-card .friend-meta {
    font-size: 11px;
    color: #888;
}

.friend-card .friend-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.friend-card .friend-actions .pixel-btn {
    font-size: 9px;
    padding: 4px 8px;
    min-width: 64px;
}

/* ---------- 存档选择浮层 ---------- */
#save-select-modal {
    position: fixed;
    inset: 0;
    background: rgba(60, 40, 20, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 305;
    padding: 16px;
}

.save-select-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 60vh;
    overflow-y: auto;
    margin-bottom: 12px;
}

.save-select-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: var(--color-bg-deep);
    border: var(--pixel-border) solid var(--color-panel-border);
    box-shadow: 2px 2px 0 var(--color-shadow);
}

.save-select-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.save-select-name {
    font-weight: bold;
    font-size: 13px;
    color: var(--color-text);
    letter-spacing: 1px;
}

.save-select-meta {
    font-size: 11px;
    color: #888;
}

.save-select-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* ---------- 弱化提示文本 ---------- */
.muted {
    color: #888;
    font-size: 11px;
    text-align: center;
    padding: 12px;
}
#message-modal {
    position: fixed;
    inset: 0;
    background: rgba(60, 40, 20, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 170;
    padding: 16px;
}

.message-card {
    background: var(--color-panel);
    border: var(--pixel-border) solid var(--color-panel-border);
    box-shadow: 0 8px 0 var(--color-shadow);
    padding: 20px;
    max-width: 640px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.message-layout {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 12px;
    text-align: left;
    min-height: 320px;
}

.message-sidebar {
    background: var(--color-bg-deep);
    border: var(--pixel-border) solid var(--color-panel-border);
    box-shadow: 2px 2px 0 var(--color-shadow);
    padding: 8px;
    overflow-y: auto;
    max-height: 60vh;
}

.message-sidebar h4 {
    font-size: 11px;
    color: var(--color-accent);
    text-align: center;
    letter-spacing: 1px;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 2px dashed var(--color-panel-border);
}

.message-sidebar .friend-list .friend-item {
    grid-template-columns: 32px 1fr;
    padding: 6px;
    cursor: pointer;
}

.message-sidebar .friend-item .friend-avatar {
    width: 32px;
    height: 32px;
    font-size: 18px;
}

.message-sidebar .friend-item.active {
    background: var(--color-accent);
}

.message-sidebar .friend-item.active .friend-name,
.message-sidebar .friend-item.active .friend-summary {
    color: #fff6e0;
}

.message-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--color-bg-deep);
    border: var(--pixel-border) solid var(--color-panel-border);
    box-shadow: 2px 2px 0 var(--color-shadow);
    padding: 8px;
}

.message-main h4 {
    font-size: 11px;
    color: var(--color-accent);
    text-align: center;
    letter-spacing: 1px;
    padding-bottom: 4px;
    border-bottom: 2px dashed var(--color-panel-border);
}

.message-history {
    flex: 1;
    min-height: 200px;
    max-height: 50vh;
    overflow-y: auto;
    background: #fff6e0;
    border: 2px solid var(--color-panel-border);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 10px;
    line-height: 1.6;
}

.msg-bubble {
    max-width: 80%;
    padding: 6px 8px;
    border: 2px solid var(--color-shadow);
    box-shadow: 1px 1px 0 var(--color-shadow);
    word-break: break-all;
}

.msg-bubble.self {
    align-self: flex-end;
    background: var(--color-btn);
    color: var(--color-text);
}

.msg-bubble.other {
    align-self: flex-start;
    background: #ffffff;
    color: var(--color-text);
}

.msg-bubble .msg-meta {
    display: block;
    font-size: 8px;
    color: var(--color-accent);
    margin-bottom: 2px;
    letter-spacing: 0;
}

.message-input-row {
    display: flex;
    gap: 8px;
}

.message-input-row .pixel-input {
    flex: 1;
    font-size: 10px;
    padding: 8px 10px;
}

.message-input-row .pixel-btn {
    font-size: 10px;
    padding: 8px 12px;
    min-width: 72px;
}

#btn-message-close {
    align-self: center;
    min-width: 120px;
    margin-top: 4px;
}

/* ---------- 响应式：小屏私信单列 ---------- */
@media (max-width: 540px) {
    .message-layout {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .message-sidebar {
        max-height: 120px;
    }

    .message-history {
        min-height: 160px;
        max-height: 40vh;
    }

    .friend-item {
        grid-template-columns: 32px 1fr;
    }

    .friend-item .friend-avatar {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }

    .friend-item .friend-actions {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .friend-item .friend-actions .pixel-btn {
        flex: 1;
        min-width: auto;
    }

    .friends-tab {
        font-size: 10px;
        padding: 6px 8px;
    }
}