/* ============================================================================
 * uw-base.css
 * 《放置：宇宙大战》卡通风格双主题 —— 组件补丁（两主题通用：圆角/投影/字体/滚动条/输入控件/卡片/浮层/胶囊/表格）
 *
 * 本文件从 uw-theme.css 拆分而来（2026-11-03），原始单文件 5204 行。
 * 拆分后由 index.html 逐个 <link> 引入，加载顺序必须保持变量文件在最前。
 * 所有规则只引用 uw-variables.css 里定义的 CSS 变量，不硬编码颜色。
 * ==========================================================================*/

/* ============================================================================
 * 组件补丁（两主题通用；只引用变量）
 * ==========================================================================*/

/* --- 全局背景 / 选中 / 滚动条 --- */
html, body {
    background-color: var(--uw-color-bg-primary);
    color: var(--uw-color-text-primary);
    font-family: "Baloo 2", "Quicksand", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
    background-image:
        radial-gradient(ellipse 1100px 700px at 80% -10%, var(--uw-color-glow), transparent 60%),
        radial-gradient(ellipse 900px 600px at 5% 110%, rgba(255, 184, 77, 0.10), transparent 60%);
    background-size: auto, auto;
}
::selection {
    background: rgba(255, 200, 87, 0.35);
    color: var(--uw-color-text-primary);
}
::-webkit-scrollbar-track { background-color: var(--uw-color-bg-secondary); }
::-webkit-scrollbar-thumb { background-color: var(--uw-ink-soft); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background-color: var(--uw-color-accent); }

/* --- 顶栏 --- */
.uw-topbar {
    background-color: var(--uw-color-bg-secondary);
    border-bottom: 2px solid var(--uw-ink);
}
.uw-topbar-title {
    color: var(--uw-color-accent);
    letter-spacing: 2px;
}
.uw-topbar-brand { display: flex; align-items: center; gap: 6px; }
.uw-topbar-logo { font-size: 26px; display: inline-block; animation: uw-float 3s ease-in-out infinite; }

/* 资源胶囊：白天用浅蜜糖色背景与奶油顶栏区分，夜间用深紫蓝 */
.uw-resource-item {
    background: var(--uw-resource-pill-bg, var(--uw-color-bg-tertiary));
    border: 2px solid var(--uw-ink-soft);
    border-left-width: 4px;
    border-radius: var(--uw-r-pill);
    box-shadow: 0 2px 0 var(--uw-shade);
    padding: 3px 14px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.uw-resource-item:hover { transform: translateY(-1px); }
.uw-resource-emoji {
    font-size: 18px;
    width: 20px;
}
/* 资源数值加大加粗 + 强对比色，确保奶油白底/深紫底都清晰 */
.uw-resource-value {
    color: var(--uw-num-strong);
    font-size: 15px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 0 var(--uw-resource-pill-stroke, transparent);
    letter-spacing: 0.3px;
}
.uw-resource-label {
    color: var(--uw-color-text-secondary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
}
/* 氦³ 上标数字：同 label 字号、略偏上，避免 unicode ³ 太小看不清 */
.uw-sup {
    font-size: 0.92em;
    vertical-align: super;
    line-height: 1;
    font-weight: 800;
}
.uw-topbar-mail-badge .uw-resource-emoji,
.uw-topbar-help .uw-resource-emoji { font-size: 18px; }
.uw-topbar-mail-badge, .uw-topbar-help {
    background: var(--uw-color-bg-tertiary);
    border-radius: var(--uw-r-pill);
    border: 1.5px solid var(--uw-ink-soft);
    padding: 3px 10px;
}
.uw-topbar-mail-badge i, .uw-topbar-help i { color: var(--uw-color-text-secondary); }
.uw-topbar-mail-badge:hover i, .uw-topbar-help:hover i { color: var(--uw-color-accent); }
.uw-topbar-time {
    color: var(--uw-color-text-muted);
    font-family: var(--uw-font-tech);
}
.uw-badge {
    background-color: var(--uw-color-danger);
    border-radius: var(--uw-r-pill);
    border: 1px solid var(--uw-color-bg-tertiary);
}

/* --- 侧栏导航 --- */
.uw-layout-sidebar {
    background-color: var(--uw-color-bg-secondary);
    border-right: 2px solid var(--uw-ink);
}
.uw-nav-group { border-bottom: 1px solid var(--uw-color-border-dim); }
.uw-nav-group-header {
    color: var(--uw-color-text-secondary);
    border-left: 3px solid transparent;
    border-radius: 10px 0 0 10px;
    margin: 2px 4px;
    width: auto;
}
.uw-nav-group-header i { font-size: 15px; }
.uw-nav-emoji { font-size: 18px; transition: transform .15s ease; }
.uw-nav-group-header:hover { color: var(--uw-color-accent); }
.uw-nav-group.expanded > .uw-nav-group-header {
    color: var(--uw-color-accent);
    border-left-color: var(--uw-color-accent);
    background: var(--uw-color-bg-hover);
}
.uw-nav-item {
    color: var(--uw-color-text-secondary);
    border-left: 3px solid transparent;
    border-radius: 10px 0 0 10px;
    margin: 1px 4px;
}
.uw-nav-item:hover { color: var(--uw-color-accent); }
.uw-nav-item:hover .uw-nav-emoji { transform: scale(1.2); }
.uw-nav-item.active {
    color: var(--uw-btn-text);
    background: var(--uw-color-accent);
    border-left-color: var(--uw-color-accent-hover);
    box-shadow: 0 2px 0 var(--uw-shade);
}
.uw-nav-item.active .uw-nav-emoji { color: #FFF; }

/* --- 底部栏 --- */
.uw-layout-footer {
    background-color: var(--uw-color-bg-secondary);
    border-top: 2px solid var(--uw-ink);
}
.uw-footer-status { color: var(--uw-color-text-muted); }
.uw-chat-input {
    background-color: var(--uw-color-bg-input);
    border: 1.5px solid var(--uw-ink-soft);
    border-radius: var(--uw-r-pill);
    color: var(--uw-color-text-primary);
    padding: 4px 12px;
}
.uw-chat-send {
    background-color: var(--uw-color-accent);
    color: var(--uw-btn-text);
    border-radius: var(--uw-r-pill);
    padding: 4px 14px;
}
.uw-chat-send:hover { background-color: var(--uw-color-accent-hover); }

/* --- 页面标题 --- */
.uw-page-title {
    color: var(--uw-color-accent);
    letter-spacing: 1px;
    text-shadow: none;
    border-bottom: 2px solid var(--uw-ink-soft);
    padding-bottom: 8px;
}
.uw-page-title .uw-nav-emoji { font-size: 20px; }

/* --- 通用按钮：机甲斜切甲板（替代糖果药丸，游戏感更强） ---
   clip-path 斜切双角 + 双伪元素（外描边层/渐变填充层），全部走主题变量：
   白天=暖棕描边 + 亮色甲板贴纸；夜晚=淡紫外框 + 靛蓝甲板 */
.uw-btn-primary,
.uw-btn-secondary,
.uw-btn-default,
.uw-btn-danger,
.uw-btn-diamond {
    position: relative;
    border: none;
    border-radius: 0;
    padding: 5px 14px;
    box-shadow: none;
    background: transparent;
    /* 左上/右下斜切的机甲甲板轮廓 */
    clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
    transition: filter .15s ease;
}

/* 描边层：clip-path 裁掉真实 border，用底层伪元素模拟 */
.uw-btn-primary::before,
.uw-btn-secondary::before,
.uw-btn-default::before,
.uw-btn-danger::before,
.uw-btn-diamond::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--uw-btn-edge, var(--uw-ink-soft));
}

/* 填充层：渐变甲板 + 悬停扫光掠过 */
.uw-btn-primary::after,
.uw-btn-secondary::after,
.uw-btn-default::after,
.uw-btn-danger::after,
.uw-btn-diamond::after {
    content: '';
    position: absolute;
    inset: 1.5px;
    z-index: -1;
    background-image:
        linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.15) 50%, transparent 58%),
        linear-gradient(180deg, var(--uw-btn-fill-top, var(--uw-color-bg-tertiary)) 0%, var(--uw-btn-fill-bottom, var(--uw-color-bg-hover)) 100%);
    background-size: 250% 100%, 100% 100%;
    background-position: 170% 0, 0 0;
    background-repeat: no-repeat;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    transition: background-position .45s ease;
}

.uw-btn-primary:hover:not(:disabled),
.uw-btn-secondary:hover:not(:disabled),
.uw-btn-default:hover:not(:disabled),
.uw-btn-danger:hover:not(:disabled),
.uw-btn-diamond:hover:not(:disabled) {
    filter: drop-shadow(0 0 4px var(--uw-color-glow)) brightness(1.06);
}

.uw-btn-primary:hover:not(:disabled)::after,
.uw-btn-secondary:hover:not(:disabled)::after,
.uw-btn-default:hover:not(:disabled)::after,
.uw-btn-danger:hover:not(:disabled)::after,
.uw-btn-diamond:hover:not(:disabled)::after {
    background-position: -70% 0, 0 0;
}

.uw-btn-primary:not(:disabled):active,
.uw-btn-secondary:not(:disabled):active,
.uw-btn-default:not(:disabled):active,
.uw-btn-danger:not(:disabled):active,
.uw-btn-diamond:not(:disabled):active {
    filter: brightness(.88);
}

.uw-btn-primary:disabled,
.uw-btn-secondary:disabled,
.uw-btn-default:disabled,
.uw-btn-danger:disabled,
.uw-btn-diamond:disabled {
    opacity: .5;
}

/* 主按钮：主题强调色甲板 + 深描边 */
.uw-btn-primary {
    --uw-btn-fill-top: var(--uw-color-accent-hover);
    --uw-btn-fill-bottom: var(--uw-color-accent);
    --uw-btn-edge: var(--uw-ink);
    color: var(--uw-btn-text);
}

/* 夜主题主按钮：夜accent太浅（白字对比不足），改用深蓝甲板保证白字可读 */
html[data-theme="night"] .uw-btn-primary {
    --uw-btn-fill-top: #25639E;
    --uw-btn-fill-bottom: #174A7C;
}

/* 次级/默认按钮：面板色甲板 + 浅描边（凹感的退后一步） */
.uw-btn-secondary,
.uw-btn-default {
    --uw-btn-fill-top: var(--uw-color-bg-tertiary);
    --uw-btn-fill-bottom: var(--uw-color-bg-hover);
    --uw-btn-edge: var(--uw-ink-soft);
    color: var(--uw-color-text-primary);
}

/* 危险按钮：草莓红甲板，警示但不刺眼 */
.uw-btn-danger {
    --uw-btn-fill-top: var(--uw-color-danger);
    --uw-btn-fill-bottom: var(--uw-color-danger);
    --uw-btn-edge: var(--uw-ink);
    color: var(--uw-btn-text);
}

/* 钻石按钮：香芋紫甲板（商城/付费入口） */
.uw-btn-diamond {
    --uw-btn-fill-top: var(--uw-btn-diamond-bg);
    --uw-btn-fill-bottom: var(--uw-btn-diamond-bg);
    --uw-btn-edge: var(--uw-ink);
    color: var(--uw-btn-text);
}
.uw-topbar-logout {
    color: var(--uw-color-accent);
    border: 2px solid var(--uw-ink-soft);
    border-radius: var(--uw-r-pill);
    padding: 4px 14px;
    background: var(--uw-color-bg-tertiary);
}
.uw-topbar-logout:hover { border-color: var(--uw-color-danger); color: var(--uw-color-danger); background: rgba(255, 107, 107, 0.12); }

/* --- 通用输入 --- */
.uw-chat-input, input, select, textarea {
    font-family: var(--uw-font-tech);
}
input[type="text"], input[type="password"], input[type="number"], select {
    background-color: var(--uw-color-bg-input);
    border: 1.5px solid var(--uw-ink-soft);
    border-radius: var(--uw-r-md);
    color: var(--uw-color-text-primary);
    padding: 4px 10px;
}

/* --- 徽章 / 标签 --- */
.uw-tag, .uw-tag-mother, .uw-galaxy-type-badge,
.uw-tag-owned, .uw-commander-rarity, .uw-faction-rank-badge,
.uw-legion-member-rank, .uw-battle-type-badge, .uw-trade-status, .uw-fleet-state {
    border-radius: var(--uw-r-pill);
    border: 1px solid var(--uw-ink-soft);
    padding: 2px 10px;
    background-color: var(--uw-color-bg-tertiary);
}

/* --- 空态 / 加载 --- */
.uw-empty { color: var(--uw-color-text-muted); }
.uw-empty i { font-size: 34px; display: block; }
.uw-loading { color: var(--uw-color-text-muted); }
.uw-loading-bar { border-radius: var(--uw-r-pill); }
.uw-loading-text { color: var(--uw-color-text-secondary); }

/* --- 进度条：糖果罐 --- */
.uw-progress-bar {
    height: 10px;
    background: var(--uw-color-bg-hover);
    border: 1.5px solid var(--uw-ink-soft);
    border-radius: var(--uw-r-pill);
}
.uw-progress-bar-fill,
.uw-achievement-progress-bar > div,
.uw-loading-bar .progress-bar {
    background-image: linear-gradient(90deg, var(--uw-extra-mint), var(--uw-color-accent), var(--uw-rarity-legend));
    border-radius: var(--uw-r-pill);
}

/* --- 弹窗 --- */
.uw-modal-mask,
.uw-modal-overlay { background-color: rgba(20, 14, 6, 0.45); }
.uw-modal {
    background-color: var(--uw-color-bg-tertiary);
    border: 2.5px solid var(--uw-ink);
    border-radius: var(--uw-r-lg);
    box-shadow: 0 8px 30px var(--uw-shade);
    color: var(--uw-color-text-primary);
}
.uw-modal h4, .uw-modal h5, .uw-modal-head h4, .uw-modal-head h5 { color: var(--uw-color-accent); }
.uw-modal-actions button { margin-top: 6px; }

/* --- 页签 --- */
.uw-tab {
    background: var(--uw-color-bg-tertiary);
    border: 2px solid var(--uw-ink-soft);
    color: var(--uw-color-text-secondary);
    border-radius: var(--uw-r-pill);
    letter-spacing: 4px;
    padding: 6px 0;
}
.uw-tab.active {
    background: var(--uw-color-accent);
    border-color: var(--uw-ink);
    color: var(--uw-btn-text);
}