/* ============================================================================
* uw-vault-misc.css
* 《放置：宇宙大战》卡通风格双主题 —— 强化石档位聚合 + 赠送流水 + 高级会员卡 + 下拉选择器
*
* 本文件从 uw-theme.css 拆分而来（2026-11-03），原始单文件 5204 行。
* 拆分后由 index.html 逐个 引入，加载顺序必须保持变量文件在最前。
* 所有规则只引用 uw-variables.css 里定义的 CSS 变量，不硬编码颜色。
* ==========================================================================*/
/* ============================================================================
* 虚空仓库 · 强化石档位聚合（2026-10-15 二轮反馈）
* ----------------------------------------------------------------------------
* 组头 = 立绘 + 档位名 + 范围 + 数量 + 展开箭头；明细行 = 类型 + 数值 + 状态 + 操作。
* 对齐造船页「仓库战舰按蓝图合并」的交互语言。
* ==========================================================================*/
.uw-stone-group {
border: 1px solid var(--uw-color-border-dim);
border-radius: var(--uw-r-md);
background: var(--uw-color-bg-tertiary);
overflow: hidden;
}
.uw-stone-group-head {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
cursor: pointer;
user-select: none;
}
.uw-stone-group-head:hover { background: var(--uw-color-bg-hover, rgba(127, 127, 127, 0.08)); }
.uw-stone-group-info {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.uw-stone-group-name { font-weight: 600; font-size: 14px; color: var(--uw-color-text-primary); }
/* 档位徽章（2026-11-02 玩家反馈）：把「T6」摆在档位名前，与死星/掉落文案里的 T 档位对齐。
配色口径同 .uw-tag-level：橙金底压深棕字，两主题都吃得开。 */
.uw-stone-tier {
display: inline-flex;
align-items: center;
background: var(--uw-color-accent-dim);
color: #241507;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.02em;
border-radius: var(--uw-r-pill);
padding: 1px 7px;
margin-right: 5px;
vertical-align: 1px;
white-space: nowrap;
}
.uw-stone-group-count { font-weight: 700; font-size: 14px; color: var(--uw-color-warning); }
.uw-stone-group-caret { color: var(--uw-color-text-muted); font-size: 12px; }
.uw-stone-group-body { border-top: 1px dashed var(--uw-color-border-dim); padding: 6px 12px 10px; }
/* 档位对照（2026-11-02）：9 档常驻一行，T几 → 石头名；窄屏自动换行，不抢展开区的视觉权重 */
.uw-stone-legend {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 2px 12px;
padding: 2px 2px 10px;
font-size: 11.5px;
line-height: 1.6;
color: var(--uw-color-text-muted);
}
.uw-stone-legend-label {
color: var(--uw-color-text-secondary);
font-weight: 600;
margin-right: 2px;
}
.uw-stone-legend-item { white-space: nowrap; }
.uw-stone-legend-item b {
color: var(--uw-color-text-primary);
font-weight: 800;
margin-right: 3px;
}
.uw-stone-row {
display: flex;
align-items: center;
gap: 12px;
padding: 6px 4px;
border-bottom: 1px solid color-mix(in srgb, var(--uw-color-border-dim) 55%, transparent);
}
.uw-stone-row:last-child { border-bottom: none; }
.uw-stone-row-type { font-weight: 600; font-size: 13px; color: var(--uw-color-text-primary); min-width: 64px; }
.uw-stone-row-value { font-weight: 700; font-size: 14px; color: var(--uw-color-accent); min-width: 64px; }
.uw-stone-row-state { flex: 1; }
.uw-stone-row-btns { display: flex; gap: 6px; }
/* ============================================================================
* 移动端触控目标补丁（2026-10-19）
* 全量点测发现的"点不中"清单：编组弹窗的移除舰船「×」仅 14×18px（远低于 ≤36px 的触控底线），
* 弹窗内大量操作按钮只有 28px 高（添加武器/装甲/引擎科技、保存蓝图、取消、确定改名、卸任…）。
* 只放大移动端的命中区与高度，不动桌面端尺寸与配色。
* ==========================================================================*/
html[data-device="mobile"] .uw-slot-remove {
min-width: 30px;
min-height: 30px;
margin: -4px -4px -4px 2px;
padding: 0;
font-size: 16px;
line-height: 1;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
}
html[data-device="mobile"] .uw-slot-remove:active {
background: var(--uw-color-bg-hover);
}
/* 弹窗/浮窗内的操作按钮：28px → 36px 命中区（不改字号，避免布局跳动） */
html[data-device="mobile"] .uw-modal button,
html[data-device="mobile"] .winbox button.uw-btn-primary,
html[data-device="mobile"] .winbox button.uw-btn-secondary,
html[data-device="mobile"] .winbox button.uw-btn-danger {
min-height: 36px;
}
/* WinBox 自带的关闭/最小化按钮（winbox.min.css 里是 14px 宽、30px 高） */
html[data-device="mobile"] .winbox .wb-control {
font-size: 22px;
width: 34px;
}
/* ============================================================================
* 桌面端窄视口顶栏压缩（2026-10-19）
* 桌面顶栏内容总宽 1609px（6 项资源 + 赛季 + PvP 徽标 + 时间 + 签到/邮件/帮助/主题/登出），
* .uw-topbar-actions 是 flex-shrink:0，而 .uw-topbar-scroll 在桌面是 overflow:visible（不可滚），
* 叠加 body{overflow-x:hidden} → 视口宽 < 1609 时右侧入口被挤出屏幕且拖不回来：
* 1024 缺 6 个（赛季/签到/邮件/帮助/主题/登出）、1280 缺 5 个、1440 缺 3 个（帮助/主题/登出）、
* 1920 才刚好放下。玩家把桌面窗口拉窄就会丢入口（iPad 横屏同理，已由 index.html 判定修掉）。
* 按宽度分两档压缩，只作用于 data-device="desktop"，保证任意宽度都不再丢入口。
* ==========================================================================*/
@media (max-width: 1700px) {
html[data-device="desktop"] .uw-topbar { gap: 10px; padding: 0 8px; }
html[data-device="desktop"] .uw-topbar-scroll { gap: 10px; }
html[data-device="desktop"] .uw-topbar-resources { gap: 6px; }
html[data-device="desktop"] .uw-resource-item { padding: 4px 8px; }
/* 资源名称隐藏（只留图标 + 数值），悬停气泡里的信息一项不少；与移动端同一策略 */
html[data-device="desktop"] .uw-resource-label { display: none; }
html[data-device="desktop"] .uw-topbar-actions { gap: 8px; }
html[data-device="desktop"] .uw-topbar-brand { min-width: 0; }
}
@media (max-width: 1200px) {
html[data-device="desktop"] .uw-topbar-title { display: none; }
html[data-device="desktop"] .uw-topbar-time { display: none; }
html[data-device="desktop"] .uw-topbar-logout span { display: none; }
/* 最后一道保险：资源项允许压缩并省略数值，换取右侧入口永远可见 */
html[data-device="desktop"] .uw-topbar-resources { min-width: 0; }
html[data-device="desktop"] .uw-resource-item { min-width: 0; }
html[data-device="desktop"] .uw-resource-value {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
/* ==========================================================================
* 好友赠送弹窗重做 + 赠送流水（2026-10-20 玩家反馈）
* ----------------------------------------------------------------------------
* ① 赠送类型由两个并排大按钮改为**下拉选择**：原生 select 保留移动端友好的滚轮/键盘操作，
* 外层只做"图标 + 自定义箭头 + 悬浮/聚焦描边"的装饰，不改变语义；
* ② 赠送流水页：三项额度概览 + 赠出/收到合并倒序列表。
* 配色全部走 --uw-* 变量，白天/夜间主题自动适配。
* ==========================================================================*/
.uw-gift-modal { max-width: 560px; }
/* 会员专属标识（2026-10-20：研究点 + 强化石都必须月卡/周卡会员才能赠送） */
.uw-gift-member-tag {
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 10px;
padding: 4px 12px;
font-size: 12px;
font-weight: 600;
color: var(--uw-color-accent);
background: color-mix(in srgb, var(--uw-color-accent) 12%, transparent);
border: 1.5px solid color-mix(in srgb, var(--uw-color-accent) 45%, var(--uw-ink-soft));
border-radius: var(--uw-r-pill);
}
.uw-gift-member-tag i { font-size: 12px; }
/* 好友行「赠送」按钮的非会员锁态：仍是可点的（点了给提示），只是视觉上先说明门槛 */
.uw-btn-primary.is-locked { opacity: .78; }
/* 字段间距（.uw-field 本身只有 label + 控件，这里给弹窗内一致的呼吸感） */
.uw-gift-field { margin-top: 12px; }
.uw-gift-field > label {
display: block;
margin-bottom: 6px;
font-size: 13px;
color: var(--uw-color-text-secondary);
}
/* ── 下拉选择器（类型 / 强化石 共用） ───────────────────────────────────── */
.uw-gift-select-wrap { position: relative; display: block; }
/* ⚠️ 选择器必须比 `.uw-field select`（0-1-1）更具体：该通用规则把 padding 设成 7px 12px，
单写 `.uw-gift-select` 会被它盖掉 → 左侧图标压在文字上（2026-10-20 实拍验证）。 */
.uw-gift-select-wrap .uw-gift-select,
.uw-field .uw-gift-select {
width: 100%;
height: 44px;
padding: 0 38px 0 42px;
font-size: 14px;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
/* 深色主题下让浏览器原生下拉面板也用暗色（不支持的浏览器自动忽略） */
color-scheme: light dark;
transition: border-color .15s ease, box-shadow .15s ease;
}
.uw-gift-select-wrap .uw-gift-select:hover,
.uw-field .uw-gift-select:hover { border-color: var(--uw-color-accent); }
.uw-gift-select:focus,
.uw-gift-select:focus-visible {
outline: none;
border-color: var(--uw-color-accent);
box-shadow: inset 0 3px 5px var(--uw-lo), 0 0 0 3px var(--uw-color-accent-glow);
}
.uw-gift-select:disabled { opacity: .65; cursor: not-allowed; }
.uw-gift-select-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
font-size: 15px;
color: var(--uw-color-accent);
pointer-events: none;
}
.uw-gift-select-caret {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
color: var(--uw-color-text-secondary);
pointer-events: none;
transition: color .15s ease;
}
.uw-gift-select-wrap:hover .uw-gift-select-caret { color: var(--uw-color-accent); }
/* ── 说明行（即时到账 / 今日额度） ────────────────────────────────────── */
.uw-gift-note {
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 4px;
font-size: 13px;
line-height: 1.7;
color: var(--uw-color-text-secondary);
}
.uw-gift-note i { width: 16px; color: var(--uw-color-accent); }
/* ── 赠送点数输入 + 快捷档位 ──────────────────────────────────────────── */
.uw-gift-amount {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.uw-gift-amount input {
flex: 1 1 140px;
min-width: 120px;
height: 44px;
font-size: 15px;
}
.uw-gift-chip {
height: 34px;
padding: 0 14px;
font-size: 13px;
cursor: pointer;
color: var(--uw-color-text-secondary);
background: var(--uw-color-bg-tertiary);
border: 2px solid var(--uw-ink-soft);
border-radius: var(--uw-r-pill);
transition: all .15s ease;
}
.uw-gift-chip:hover { border-color: var(--uw-color-accent); color: var(--uw-color-accent); }
.uw-gift-chip.active {
background: var(--uw-color-accent);
border-color: var(--uw-color-accent);
color: var(--uw-btn-text);
font-weight: 600;
}
/* ── 选中强化石预览卡 ─────────────────────────────────────────────────── */
.uw-gift-stone-card {
display: flex;
align-items: center;
gap: 12px;
margin-top: 10px;
padding: 10px;
background: var(--uw-color-bg-secondary);
border: 1.5px solid var(--uw-color-border-dim);
border-radius: var(--uw-r-md);
}
.uw-gift-stone-art {
width: 52px;
height: 52px;
border-radius: var(--uw-r-sm);
object-fit: cover;
flex-shrink: 0;
}
.uw-gift-stone-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.uw-gift-stone-name { font-size: 14px; color: var(--uw-color-text-primary); }
.uw-gift-stone-name b { color: var(--uw-color-accent); }
.uw-gift-stone-meta { font-size: 12px; color: var(--uw-color-text-muted); }
/* ==========================================================================
* 赠送流水页
* ==========================================================================*/
.uw-gift-ledger { display: flex; flex-direction: column; gap: 12px; }
.uw-gift-ledger-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
}
.uw-gift-stat {
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px 12px;
background: var(--uw-color-bg-secondary);
border: 1.5px solid var(--uw-color-border-dim);
border-radius: var(--uw-r-md);
}
.uw-gift-stat-label { font-size: 12px; color: var(--uw-color-text-secondary); }
.uw-gift-stat-label i { width: 15px; color: var(--uw-color-accent); }
.uw-gift-stat-value {
font-size: 18px;
font-weight: 700;
color: var(--uw-color-text-primary);
font-variant-numeric: tabular-nums;
}
.uw-gift-stat-slash { margin: 0 4px; color: var(--uw-color-text-muted); font-weight: 400; }
.uw-gift-stat-sub { font-size: 11px; color: var(--uw-color-text-muted); }
.uw-gift-ledger-hint {
font-size: 12px;
line-height: 1.7;
color: var(--uw-color-text-muted);
}
.uw-gift-ledger-hint i { margin-right: 4px; color: var(--uw-color-accent); }
.uw-gift-ledger-hint b { color: var(--uw-color-text-secondary); }
.uw-gift-ledger-list { display: flex; flex-direction: column; gap: 6px; }
.uw-gift-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: var(--uw-color-bg-tertiary);
border: 1.5px solid var(--uw-color-border-dim);
border-left: 3px solid var(--uw-ink-soft);
border-radius: var(--uw-r-row);
}
/* 赠出 = 暖色（付出），收到 = 绿色（获得） */
.uw-gift-row.is-sent { border-left-color: var(--uw-color-accent); }
.uw-gift-row.is-received { border-left-color: var(--uw-color-success); }
.uw-gift-row-icon {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 14px;
color: var(--uw-color-accent);
background: var(--uw-color-bg-secondary);
border-radius: 50%;
}
.uw-gift-row.is-received .uw-gift-row-icon { color: var(--uw-color-success); }
.uw-gift-row-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.uw-gift-row-title { font-size: 13px; color: var(--uw-color-text-secondary); }
.uw-gift-row-title b { color: var(--uw-color-text-primary); }
.uw-gift-row-sub { font-size: 12px; color: var(--uw-color-text-muted); }
.uw-gift-row-side {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 1px;
flex-shrink: 0;
}
.uw-gift-row-dir { font-size: 12px; font-weight: 600; color: var(--uw-color-accent); }
.uw-gift-row.is-received .uw-gift-row-dir { color: var(--uw-color-success); }
.uw-gift-row-time { font-size: 11px; color: var(--uw-color-text-muted); }
/* ==========================================================================
* 货币分池（2026-10-20）：星钻显示「通用 + 绑定」与通用钻二次确认
* ----------------------------------------------------------------------------
* 顶栏把两个池并排显示：`30 + 12`（通用在前、绑定弱化一档），避免玩家把
* "送来的钻"当成充值钻，也便于判断能不能买高级会员卡。
* ==========================================================================*/
.uw-diamond-split { margin: 0 3px; color: var(--uw-color-text-muted); font-weight: 400; }
/* 绑定星钻弱化一档（略小 + 次级色），但保持可读，不做成灰色不可用感 */
.uw-diamond-bound { font-size: .92em; color: var(--uw-color-text-secondary); }
/* 动用通用星钻确认框：唯一的视觉重点 = 「N 通用星钻」 */
.uw-universal-confirm { max-width: 460px; }
.uw-universal-text {
margin: 0;
font-size: 14px;
line-height: 1.9;
color: var(--uw-color-text-primary);
}
.uw-universal-amount {
font-weight: 700;
color: var(--uw-color-accent);
white-space: nowrap;
}
/* ==========================================================================
* 高级会员卡 · 尊享外观（2026-10-20，2026-10-21 调整入口与可见度）
* ----------------------------------------------------------------------------
* ① 个人 → 深空会员 信息块里的「星系面板尊享皮肤」开关；
* ② 星图系统面板 `.uw-smsp.uw-premium`：当面板里存在"开启面板皮肤的高级卡玩家"时套用
* （访客视角也会看到，这是该权益的社交价值所在）。纯 CSS，无额外图片请求。
* ==========================================================================*/
/* 个人页会员信息里的开关行：独占一行，与上方会员卡信息留出间距 */
.uw-premium-panel-row {
display: flex;
align-items: center;
gap: 10px;
margin-top: 10px;
padding: 8px 12px;
font-size: 12px;
color: var(--uw-color-text-primary);
background: color-mix(in srgb, var(--uw-color-warning) 8%, var(--uw-color-bg-tertiary));
border: 1.5px solid color-mix(in srgb, var(--uw-color-warning) 45%, var(--uw-ink-soft));
border-radius: var(--uw-r-ctl);
}
.uw-premium-panel-row > span { flex: 1; min-width: 0; }
.uw-premium-panel-row i { margin-right: 4px; color: var(--uw-color-warning); }
.uw-cosmetics-hint {
margin: 8px 0 0;
font-size: 12px;
line-height: 1.7;
color: var(--uw-color-text-muted);
}
/* 星系面板尊享皮肤（2026-10-21 升级）：旋转流光金边。
::after 画一圈 conic-gradient 光带，用 mask 挖空成 2.5px 边环叠在边框位置，不占布局。
必须用 ::after 而非 ::before：::after 在子元素之后绘制，金边永远盖在内层滚动条之上，不会被遮挡；
不支持 @property 的老浏览器自动降级为静态金色渐变描边。
金边画在外框层（.uw-smsp），滚动条在内层 .uw-smsp-scroll，两者互不遮挡。 */
@property --uw-premium-angle {
syntax: "";
initial-value: 0deg;
inherits: false;
}
@keyframes uw-premium-spin {
to { --uw-premium-angle: 360deg; }
}
.uw-smsp.uw-premium {
border-color: color-mix(in srgb, var(--uw-color-warning) 45%, var(--uw-ink-soft));
box-shadow: 0 0 16px color-mix(in srgb, var(--uw-color-warning) 28%, transparent),
inset 0 0 0 1px color-mix(in srgb, var(--uw-color-warning) 30%, transparent);
background:
linear-gradient(180deg,
color-mix(in srgb, var(--uw-color-warning) 16%, transparent) 0,
transparent 120px),
var(--uw-color-bg-tertiary);
}
.uw-smsp.uw-premium::after {
content: "";
position: absolute;
inset: -1.5px;
border-radius: inherit;
padding: 2.5px;
background: conic-gradient(from var(--uw-premium-angle),
rgba(255, 200, 87, 0) 0deg,
rgba(255, 200, 87, .28) 55deg,
#FFD98A 90deg,
#FFF3D6 104deg,
#FFD98A 118deg,
rgba(255, 200, 87, .28) 175deg,
rgba(255, 200, 87, 0) 250deg,
rgba(255, 200, 87, 0) 360deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
animation: uw-premium-spin 5s linear infinite;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.uw-smsp.uw-premium::after { animation: none; }
}
/* 移动端底部抽屉形态：外框的 box-shadow 被抽屉阴影覆盖，这里叠加尊享金光，保证移动端同样亮眼 */
html[data-device="mobile"] .uw-smsp.uw-premium {
box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.35),
0 0 16px color-mix(in srgb, var(--uw-color-warning) 30%, transparent),
inset 0 0 0 1px color-mix(in srgb, var(--uw-color-warning) 30%, transparent);
}
.uw-smsp.uw-premium .uw-smsp-head h4 { color: var(--uw-color-warning); }
.uw-smsp.uw-premium .uw-smsp-head::after {
content: "";
display: block;
height: 2px;
margin-top: 6px;
border-radius: 2px;
background: linear-gradient(90deg, transparent, var(--uw-color-warning), transparent);
opacity: .8;
}
/* 头部「尊享外观」徽章：一眼能看出该星系的主人是高级会员卡 */
.uw-smsp-badge-premium {
background: color-mix(in srgb, var(--uw-color-warning) 22%, transparent);
border: 1px solid color-mix(in srgb, var(--uw-color-warning) 55%, transparent);
color: var(--uw-color-warning);
font-weight: 600;
}
/* 绑钻支付标记（2026-10-20）：可用绑钻 = 常规色；仅通用星钻 = 强调色 + 锁，避免"攒了绑钻却买不了"的惊讶 */
.uw-shop-paytag {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 2px;
font-size: 11px;
color: var(--uw-color-text-muted);
}
.uw-shop-paytag--universal { color: var(--uw-color-accent); font-weight: 600; }
/* ============================================================================
* 随机事件对话条（EventNotification.razor）主题补丁 —— 2026-10-21 游戏化改版
* ----------------------------------------------------------------------------
* 夜主题 --uw-color-accent 是亮蓝 #7DD3FC，白字压上去约 1.9:1（不可读）。
* 与 .uw-btn-primary 的夜间补丁同一口径：主操作换深蓝甲板，保证白字 ≥ 4.5:1。
* 白天 accent #1B5FB0 配白字 5.4:1，无需处理。
* ==========================================================================*/
html[data-theme="night"] .uw-dlg-confirm,
html[data-theme="night"] .uw-dlg-choice-no {
background: #25639E;
}
html[data-theme="night"] .uw-dlg-confirm:hover {
background: #1F5488;
}