/* ============================================================================
 * uw-ts-overrides.css
 * TS 迁移专用覆盖层（最后加载）。
 *
 * 目的：不改动镜像自 Blazor 的 uw-*.css / universe-war.css（保持与线上逐字一致），
 * 只在这里做 React 版本特有的布局修正。
 * ==========================================================================*/

/* ---------- 整页不滚动 ----------
 * 主布局 .uw-layout 本身是 100dvh flex 列；页面滚动只应由各页 .uw-layout-main 自己承担。
 * 去掉 body 层滚动条，避免"内容满屏 + 内边距"叠出右侧滚动条。 */
html,
body {
    overflow: hidden;
    overscroll-behavior: none;
}

#app {
    overflow: hidden;
}

/* ---------- 弹窗滚动锁（hooks/useScrollLock） ----------
 * 移动端 Safari 在 Modal 遮罩上拖动时，手势会冒泡给背后的 .uw-fullpage，
 * 出现"弹窗打开后背景还能上下滑、整个界面跟着动"。
 * useScrollLock 会在弹窗打开期间给 html 挂 uw-scroll-locked：
 *   · 隐藏整页/窗口滚动条；
 *   · 移动端把整页层抬到 Dock 之上，遮罩才能完整盖住底栏；
 *   · 配合钩子里的 touchmove 拦截，彻底拦住背景拖动。
 * 弹窗自身的内容区仍可正常滚动。 */
html.uw-scroll-locked,
html.uw-scroll-locked body {
    overflow: hidden !important;
    overscroll-behavior: none;
}

html.uw-scroll-locked .uw-fullpage,
html.uw-scroll-locked .wb-body {
    overflow: hidden !important;
    overscroll-behavior: none;
}

/* 弹窗打开时整页层抬到 Dock(950) 之上：遮罩 z-index 1000 才能盖住底栏，
   否则手机上弹窗底部 50px 会被 Dock 压住（点不到也挡不住） */
html[data-device="mobile"].uw-scroll-locked .uw-fullpage {
    z-index: 1001;
}

/* ---------- 星图页：铺满主区 ----------
 * 星图是 WebGL 全屏画布，不要内边距、不要滚动条，画布自适应填满中间区域。
 * .uw-layout-main--map 由 MainLayout 在 pathname === "/" 时挂上。 */
.uw-layout-main.uw-layout-main--map {
    padding: 0;
    overflow: hidden;
    /* 关键：让内部 height:100% 有确定的包含块高度 */
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.uw-layout-main.uw-layout-main--map > * {
    flex: 1;
    min-height: 0;
}

/* 星图容器铺满父级（覆盖 uw-starmap3d.css 里的 min-height:520px 与 12px 圆角），
 * 画布是 absolute inset:0，会随容器尺寸由引擎 ResizeObserver 自动 resize。 */
.uw-layout-main--map .uw-starmap3d {
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 0;
}

/* 移动端：uw-starmap-dock.css 给主区预留 51px 底部空间给 Dock 底栏；
 * 星图页要让画布真正铺满，Dock 作为浮层压在画布之上即可（Dock z-index 900 高于画布）。
 * 用 html[data-device] + 双类 + !important 压过原规则的 (0,2,1) 特异性。 */
html[data-device="mobile"] .uw-layout-main.uw-layout-main--map {
    padding: 0 !important;
}

/* 资源悬停气泡要能压过公告条（y44~72）与页内窗口（z700）：
   气泡本身 z-index:90 且挂在 .uw-topbar 的层叠上下文里，所以抬 topbar 就够了。
   公告条保持略低一档，免得反过来压住气泡。
   ⚠️ 必须带 html[data-device] 提权：uw-shipyard.css 里的 `.uw-topbar{z-index:500}`
   与裸选择器同权重，靠加载顺序不稳（实测被 500 吃掉）。 */
html[data-device] .uw-topbar {
    z-index: 720;
}

.uw-announce-ticker {
    position: relative;
    z-index: 719;
}

/* ============================================================================
 * 桌面窄窗口的顶栏兜底（2026-11-06）
 *
 * 设备判定改回 Blazor 契约后（只看 UA / 触屏，不看窗口宽），桌面上把窗口拖到
 * 1000px 左右仍是 desktop 布局；而顶栏 6 个资源胶囊 + 时间 + 5 个按钮约 1600px。
 * 这里按宽度梯度收窄，避免右侧入口被裁掉（不用 overflow 是因为会裁掉资源悬停气泡）。
 * ==========================================================================*/
@media (max-width: 1180px) {
    html[data-device="desktop"] .uw-topbar {
        gap: 12px;
        padding: 0 10px;
    }

    html[data-device="desktop"] .uw-topbar-resources {
        gap: 8px;
    }

    html[data-device="desktop"] .uw-resource-label {
        display: none;
    }

    html[data-device="desktop"] .uw-resource-item {
        gap: 4px;
        padding: 4px 9px;
    }
}

@media (max-width: 980px) {
    html[data-device="desktop"] .uw-topbar-title {
        display: none;
    }

    html[data-device="desktop"] .uw-topbar-brand {
        min-width: auto;
    }

    html[data-device="desktop"] .uw-topbar-logout span {
        display: none;
    }

    html[data-device="desktop"] .uw-topbar-actions {
        gap: 8px;
    }
}

/* ---------- Toast 通知（屏幕正中偏上，1 秒消失） ----------
 * 2026-11-10 可读性重做（玩家反馈「提示透明、看不清」）：
 *   原实现 = 16%~18% 透明背景 + 同色文字 + 1.5px 半透明描边。
 *   warning 的 #FFC855 文字压在奶糖浅底上对比度仅 ~1.5:1，等于没显示。
 *
 *   定稿外观（用户 2026-11-10 选定「白天 B / 夜间 A」）：
 *     · 白天 B = 浅色实底 + 2.5px 深色描边 + 深色正文（四种类型各一套浅底，
 *       贴合游戏的奶油卡片体系，同时靠不透明底 + 加粗描边把浮层从页面上「抬」起来）；
 *     · 夜间 A = 不透明靛蓝底 + 2px 类型亮色描边 + 亮色正文（深色页面上浅底会突兀）。
 *   颜色全部走变量，React 侧只管挂 .uw-toast--<type>：
 *     --uw-toast-bg / -fg / -edge（描边+图标底） / -icon-fg（图标符号色）
 *   ★ 描边宽度是 2.5px 而不是 1.5px：玩家明确要求「要看得出有个框」，1px 级描边在
 *     100% 缩放的 1080p 上会被抗锯齿抹成灰线。 */
:root {
    --uw-toast-shadow: 0 8px 20px rgba(122, 92, 64, .20), 0 2px 4px rgba(122, 92, 64, .14);
}

/* 白天 B：浅底 + 深描边。底色取各类型色的极浅调，描边取同色相加深两档 */
.uw-toast--warning {
    --uw-toast-bg: #FFF1CE;
    --uw-toast-edge: #E09A2D;
    --uw-toast-fg: #4A3421;
    --uw-toast-icon-fg: #FFF8E7;
}
.uw-toast--info {
    --uw-toast-bg: #E9F2FF;
    --uw-toast-edge: #3A7BD5;
    --uw-toast-fg: #22344E;
    --uw-toast-icon-fg: #FFFFFF;
}
.uw-toast--success {
    --uw-toast-bg: #E4F8EE;
    --uw-toast-edge: #1F9E6B;
    --uw-toast-fg: #1B3B2C;
    --uw-toast-icon-fg: #FFFFFF;
}
.uw-toast--danger {
    --uw-toast-bg: #FFE9EC;
    --uw-toast-edge: #D4384F;
    --uw-toast-fg: #4A1C24;
    --uw-toast-icon-fg: #FFFFFF;
}

/* 夜间 A：统一靛蓝底 + 类型亮色描边。
   特效性 (0,2,1) 高于 .uw-toast--<type> (0,1,0)，能稳定压掉上面的浅底浅色文字 */
html[data-theme="night"] {
    --uw-toast-shadow: 0 10px 26px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .45);
}
html[data-theme="night"] .uw-toast-item {
    --uw-toast-bg: #1A2740;
    --uw-toast-fg: #EAF4FF;
    border-width: 2px;
}
html[data-theme="night"] .uw-toast--warning { --uw-toast-edge: #FFC855; --uw-toast-icon-fg: #1A2740; }
html[data-theme="night"] .uw-toast--info { --uw-toast-edge: #8FC4FF; --uw-toast-icon-fg: #1A2740; }
html[data-theme="night"] .uw-toast--success { --uw-toast-edge: #57E3B4; --uw-toast-icon-fg: #1A2740; }
html[data-theme="night"] .uw-toast--danger { --uw-toast-edge: #FF8AA2; --uw-toast-icon-fg: #1A2740; }

.uw-toaster {
    position: fixed;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    pointer-events: none;
}

.uw-toast-item {
    /* 兜底：类型类没命中时按 info 走 */
    --uw-toast-bg: #E9F2FF;
    --uw-toast-edge: #3A7BD5;
    --uw-toast-fg: #22344E;
    --uw-toast-icon-fg: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px 9px 12px;
    border: 2.5px solid var(--uw-toast-edge);
    border-radius: 999px;
    background: var(--uw-toast-bg);
    color: var(--uw-toast-fg);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .2px;
    box-shadow: var(--uw-toast-shadow);
    max-width: min(84vw, 560px);
    animation: uw-toast-in .18s cubic-bezier(.22, .8, .28, 1);
}

@keyframes uw-toast-in {
    from { opacity: 0; transform: translateY(-8px) scale(.96); }
    to { opacity: 1; transform: none; }
}

/* 实心彩色圆 + 反白符号：比空心描边圈醒目，缩到 14px 也认得出 */
.uw-toast-icon {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--uw-toast-edge);
    color: var(--uw-toast-icon-fg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}


/* ============================================================================
 * 页面窗口（2026-11-06：桌面端改用 winbox.js 浮窗，与 Blazor 一致）
 *
 * 桌面端 MainLayout 用 <WinBox> 承载随路由切换的页面（可拖动/缩放/关闭）；
 * 移动端不使用 WinBox：非星图路由整页铺满，弹窗类窗口用 .uw-mobile-win 整屏层。
 * 原来的 .uw-window* 不可拖拽外壳（PageWindow）已随组件一起删除。
 * ==========================================================================*/

.uw-layout-body {
    position: relative;
}

/* Portal 挂载点撑满 winbox 内容区：页面 .uw-page 的 height:100% 高度链才闭合 */
.uw-winbox .wb-body > div {
    height: 100%;
    box-sizing: border-box;
}

/* 窗口头已有标题：窗口内不再重复显示页面大标题（后代选择器，页面根节点包了一层） */
.uw-winbox .wb-body .uw-page-title {
    display: none;
}

/* ============================================================================
 * 整页路由层：Boss 战场（WebGL 大画布）与移动端所有非星图页
 * ==========================================================================*/
.uw-fullpage {
    position: absolute;
    inset: 0;
    z-index: 960;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: var(--uw-color-bg-primary);
}

.uw-fullpage > * {
    flex: 1 1 auto;
    min-height: 0;
}

/* 移动端：底部让开 Dock 底栏，并把整页层降到 Dock(950) 之下 ——
   桌面 Boss 整页需要盖住 Dock 保持 960，但移动端整页就是普通页面，底栏必须可点 */
html[data-device="mobile"] .uw-fullpage {
    z-index: 945;
    padding-bottom: calc(51px + env(safe-area-inset-bottom, 0px));
    /* 移动端整页层必须自己承担滚动：
       页面 .uw-page 在移动端是 height:auto（按内容撑高），而整页层是 absolute inset:0 +
       overflow:hidden —— 内容一多就被整段裁掉，且没有任何可滚动容器（指挥官页等无法上滑）。 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* 页面按内容高度排布，别被 flex 收缩回一屏高度，否则整页层滚动的只是固定一屏 */
html[data-device="mobile"] .uw-fullpage > .uw-page {
    flex: 0 0 auto;
}

/* ============================================================================
 * 移动端通用弹窗（2026-11-07 线上反馈：发起战斗页「尺寸不对、点不到下面按钮、
 * 偶尔卡住关不掉」）
 *
 * 根因：.uw-modal 只有 min-width:360px / max-width:90vw，没有限高；
 * 遮罩是 fixed inset:0 + align-items:center，弹窗一高就被上下裁到屏幕外：
 * - 底部「取消 / 确认进攻」按钮不可见、点不到；
 * - 弹窗宽度 ≥ 手机宽度时，遮罩完全被弹窗盖住（连点空白处关闭都做不到）。
 * 统一改成「占满宽度 + 限高 + 头尾固定 + 内容区滚动」。
 * 只作用于 <Modal> 组件（.uw-modal-frame），避免影响页面里手写外壳的 .uw-modal。
 * ==========================================================================*/
/* ============================================================================
 * 通用 Modal 限高（2026-11-07 桌面端反馈：100 连抽结果弹窗比窗口还高，底部按钮被裁）
 *
 * 原有限高只写在 html[data-device="mobile"] 下，桌面/WinBox 窗口模式下弹窗无约束，
 * 内容一多（7 行合并卡 + 摘要 + 底栏）就顶出视口底部。
 * 这里对所有设备生效：max-height 用百分比相对遮罩（视口或 WinBox 内容区）计算，
 * 头部/底栏固定，仅内容区滚动。
 * ==========================================================================*/
.uw-modal-frame {
    max-height: calc(100% - 24px);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.uw-modal-frame .uw-modal-head,
.uw-modal-frame .uw-modal-footer {
    flex: none;
}

.uw-modal-frame .uw-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 内容滚到尽头时不要把滚动链传给背后的页面（Safari 16+） */
    overscroll-behavior: contain;
}

html[data-device="mobile"] .uw-modal-mask {
    padding: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}

html[data-device="mobile"] .uw-modal-frame {
    /* Modal 组件用行内 width/maxWidth 指定尺寸，这里必须提权覆盖 */
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    max-height: calc(100vh - 20px - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 20px - env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    padding: 12px;
    box-sizing: border-box;
}

html[data-device="mobile"] .uw-modal-frame .uw-modal-head,
html[data-device="mobile"] .uw-modal-frame .uw-modal-footer {
    flex: none;
}

/* 内容区独立滚动：底部按钮与标题始终留在屏幕内 */
html[data-device="mobile"] .uw-modal-frame .uw-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 8px 0;
}

/* ============================================================================
 * 移动端战斗回放（2026-11-07 线上反馈：发起战斗后「点不到下面的按钮、
 * 偶尔卡住关不掉」）
 *
 * 根因：.uw-replay 是 max-height:94vh + overflow:hidden 的 flex 列，
 * 而 .uw-replay-stage 写了 min-height:380px 且 flex:1 —— 手机上头部/对比条/九宫格
 * 一相加就超过 94vh，底部控制区（含「×」关闭）被整体裁掉，且没有任何滚动入口。
 * 改成：九宫格区可收缩 + 内部滚动，控制区固定可见。
 * ==========================================================================*/
html[data-device="mobile"] .uw-replay-overlay {
    padding: 8px;
}

html[data-device="mobile"] .uw-replay {
    width: 100%;
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    /* 极端矮屏兜底：固定区块本身也超高时，整个回放层仍可滚动到关闭按钮 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

html[data-device="mobile"] .uw-replay-header {
    flex: none;
    padding: 8px 10px;
    gap: 6px;
}

html[data-device="mobile"] .uw-replay-stats,
html[data-device="mobile"] .uw-replay-surrender {
    flex: none;
    padding: 6px 10px;
}

html[data-device="mobile"] .uw-replay-stage {
    flex: 1 1 auto;
    min-height: 0;              /* 关键：默认 min-height 会按九宫格内容撑开，整块顶出屏幕 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px;
    gap: 6px;
}

html[data-device="mobile"] .uw-replay-mid {
    width: 20px;
}

html[data-device="mobile"] .uw-replay-grid {
    grid-template-rows: repeat(3, minmax(64px, 1fr));
}

html[data-device="mobile"] .uw-replay-cell {
    min-height: 64px;
}

html[data-device="mobile"] .uw-replay-controls {
    flex: none;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    gap: 6px;
}

html[data-device="mobile"] .uw-replay-summary {
    flex: none;
    padding: 6px 10px;
}

/* ============================================================================
 * 移动端整屏弹窗：WinBox 组件在移动端不创建 winbox，改渲染这一层
 * ==========================================================================*/
.uw-mobile-win {
    position: fixed;
    inset: 0;
    z-index: 1020;
    display: flex;
    flex-direction: column;
    background: var(--uw-color-bg-primary);
}

.uw-mobile-win-head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* 高度交给内容撑开：viewport-fit=cover 下顶部要给刘海/状态栏留安全区，
       否则右上角关闭按钮会被状态栏压住，手机上点不到（玩家反馈"关不掉页面"）。 */
    min-height: 46px;
    padding-top: env(safe-area-inset-top, 0px);
    padding-right: max(10px, env(safe-area-inset-right, 0px));
    padding-bottom: 0;
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    box-sizing: border-box;
    background: linear-gradient(135deg, var(--uw-winbox-title-a, #4a5fd0), var(--uw-winbox-title-b, #333b8f));
    color: var(--uw-winbox-title-color, #fff);
}

.uw-mobile-win-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uw-mobile-win-close {
    flex: none;
    /* 触屏目标放大到 40px，避免小按钮在手机上点不中 */
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.uw-mobile-win-close:hover {
    background: rgba(0, 0, 0, .18);
}

.uw-mobile-win-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 弹层自己滚到尽头时不要把滚动链传给背后的页面 */
    overscroll-behavior: contain;
    padding: 10px 12px calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--uw-color-bg-tertiary);
}
/* ============================================================================
 * 星系信息面板（2026-11-06 二次对齐）
 *
 * 面板主体已完全改用 Blazor 的类名（.uw-smsp-head / -stats / -kv / -sec / -badge），
 * 观感直接复用 universe-war.css，这里只补三件共享样式里做不到的事：
 *   1) 星球卡立绘路径 —— 共享 CSS 里写的是 Blazor 静态资源前缀 /_content/UniverseWar.Shared.UI/…，
 *      Vite 站点没有这个前缀（图会 404，卡片只剩纯色底）。
 *   2) 「相邻星系」行里的胶囊列表（Blazor 只显示数量，Vite 额外把名字铺出来）。
 *   3) 少量 TS 侧独有的容器（.uw-smsp-adj / -btn）。
 * ==========================================================================*/

/* ---- 1) 星球卡立绘：改到 Vite 的 /img/planets/ ---- */
.uw-planet-art--fortress { --planet-art: url('/img/planets/planet-fortress.webp'); }
.uw-planet-art--npc      { --planet-art: url('/img/planets/planet-npc-rocky.webp'); }
.uw-planet-art--gas      { --planet-art: url('/img/planets/planet-gas.webp'); }
.uw-planet-art--free     { --planet-art: url('/img/planets/planet-free.webp'); }
.uw-planet-art--owned    { --planet-art: url('/img/planets/planet-owned.webp'); }

/* 立绘是"卡片右边的朦胧影子"，这里比 Blazor 略提一点不透明度，
   否则 330px 窄面板里几乎看不出来（reference 截图里是能看出星球轮廓的）。 */
.uw-smsp-planet {
    --planet-art-opacity: .3;
    --planet-art-blur: .4px;
    /* 等级悬浮卡 .uw-lvtag-tip 需要溢出卡片显示：共享基类为裁剪立绘设了 overflow:hidden，
       会把提示卡裁成一条空白边（线上反馈：悬停 Lv 看不到规则提示）。立绘伪元素仍是 inset:0，
       只需补圆角，模糊边缘外溢很淡、不影响观感。 */
    overflow: visible;
}

.uw-smsp-planet::before {
    border-radius: inherit;
}

/* 等级提示卡在 .uw-smsp-planet-meta 行内：共享基类给卡片直接子元素都上了 z-index:1，
   后面的 ops 行会把提示卡盖住（线上表现：悬停只看到一条空白边）。把 meta 提到上层。 */
.uw-smsp-planet .uw-smsp-planet-meta {
    z-index: 2;
}

/* ---- 2) 相邻星系：名称胶囊 ---- */
.uw-smsp-adj-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
}

.uw-smsp-adj-item {
    font-size: 11px;
    line-height: 1.5;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--uw-color-bg-hover);
    color: var(--uw-color-text-secondary);
    white-space: nowrap;
}

/* ---- 3) 情报行：label 带图标，正文右对齐并允许换行 ---- */
.uw-smsp-intel {
    align-items: flex-start;
    line-height: 1.65;
}

.uw-smsp-intel span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.uw-smsp-intel span:last-child {
    text-align: right;
    color: var(--uw-color-text-secondary);
}

/* ---- 4) 折叠按钮（跃迁中列表） ---- */
.uw-smsp-adj-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--uw-color-border-dim);
    background: transparent;
    color: var(--uw-color-text-secondary);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.uw-smsp-adj-btn:hover {
    border-color: var(--uw-color-accent);
    color: var(--uw-color-accent);
}

/* 面板内 h5 小标题与图标的间距 */
.uw-smsp-sec h5 {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ============================================================================
 * 迁移遗留类名补齐（2026-11-06）
 *
 * 背景：迁移时页面写了很多「语义上应该存在」的类名（uw-tab-bar / uw-signin-cell /
 * uw-production-bar …），但 Blazor 那套 CSS 里其实没有（原实现走的是别的类名或内联样式）。
 * 结果这些元素在 Vite 端完全无样式 —— 页签排成一行纯文字、进度条不显示、礼物账本挤在一起。
 *
 * 这里按设计变量补齐，命名沿用到现有主题（--uw-color-*），白天/黑夜自动跟随。
 * ==========================================================================*/

/* ---------------- 通用页签条（Faction / Legion） ---------------- */
.uw-tab-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--uw-color-border-dim);
}

.uw-tab-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    font-size: 13px;
    border-radius: 999px;
    border: 1px solid var(--uw-color-border-dim);
    background: var(--uw-color-bg-secondary);
    color: var(--uw-color-text-secondary);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.uw-tab-item:hover {
    border-color: var(--uw-color-accent);
    color: var(--uw-color-accent);
}

.uw-tab-item.active {
    background: var(--uw-color-accent);
    border-color: var(--uw-color-accent);
    color: #fff;
    font-weight: 600;
}

/* ---------------- 表单行 / 卡片（Faction / Legion） ---------------- */
.uw-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.uw-form-row > label {
    flex: 0 0 auto;
    min-width: 72px;
    color: var(--uw-color-text-muted);
    font-size: 13px;
}

.uw-form-row > input,
.uw-form-row > select,
.uw-form-row > textarea {
    flex: 1 1 200px;
    min-width: 0;
}

.uw-friends-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--uw-color-border-dim);
    border-radius: 10px;
    background: var(--uw-color-bg-secondary);
}

.uw-modal-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 签到弹窗已改用 Blazor 的 .uw-signin-* 全部类名（SignInPanel.razor 结构），
   原先在此处的 .uw-signin-cell / -check / -reward 影子样式已删除。 */

/* ---------------- 造船厂：生产进度条 ---------------- */
.uw-production-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.uw-production-bar {
    flex: 1 1 auto;
    height: 6px;
    border-radius: 999px;
    background: var(--uw-color-bg-hover);
    overflow: hidden;
}

.uw-production-bar-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #4fd8f5, #7CB8FF);
    transition: width .3s ease;
}

.uw-production-count {
    flex: none;
    font-size: 11px;
    color: var(--uw-color-text-muted);
    white-space: nowrap;
}

.uw-production-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

/* ---------------- 社交：赠送账本 ---------------- */
.uw-gift-ledger-list {
    display: flex;
    flex-direction: column;
    font-size: 12px;
}

.uw-gift-ledger-head,
.uw-gift-ledger-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, .9fr);
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
}

.uw-gift-ledger-head {
    color: var(--uw-color-text-muted);
    font-size: 11px;
    border-bottom: 1px solid var(--uw-color-border-dim);
}

.uw-gift-ledger-row {
    border-bottom: 1px dashed var(--uw-color-border-dim);
}

.uw-gift-in {
    color: #3FB982;
    font-weight: 600;
}

.uw-gift-out {
    color: #E08A3C;
    font-weight: 600;
}

/* ---------------- 舰队页：按星系分组 ---------------- */
.uw-fleet-by-galaxy {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.uw-fleet-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.uw-fleet-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11.5px;
    color: var(--uw-color-text-secondary);
}

.uw-fleet-log-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
    font-size: 11.5px;
    border-bottom: 1px dashed var(--uw-color-border-dim);
}

/* ---------------- 编队器：自动填充 / 单舰攻击 ---------------- */
.uw-autofill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--uw-color-text-secondary);
    cursor: pointer;
}

.uw-ship-atk {
    font-size: 11px;
    color: #E08A3C;
    white-space: nowrap;
}

/* ---------------- 指挥官：升级角标 / 碎片按钮 ---------------- */
.uw-cmd-up-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #e05a4a;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
    pointer-events: none;
}

.uw-commander-shard-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 11px;
    border-radius: 999px;
    border: 1px solid var(--uw-color-border-dim);
    background: transparent;
    color: var(--uw-color-text-secondary);
    cursor: pointer;
}

.uw-commander-shard-btn:hover {
    border-color: var(--uw-color-accent);
    color: var(--uw-color-accent);
}

/* ---------------- 战斗回放：投降提示 ---------------- */
.uw-replay-surrender-text {
    font-size: 12px;
    color: #E08A3C;
    line-height: 1.6;
}

/* ---------------- 全局小组件：Toast / 载入条 / 顶栏邮件 / 引导卡 / Dock ---------------- */
.uw-toast-msg {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    word-break: break-word;
}

.uw-loading-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7CB8FF, #4fd8f5);
    transition: width .25s ease;
}

.uw-topbar-mail {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.uw-guide-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--uw-color-text-secondary);
}

/* Dock 二级菜单的文字标签。
   ⚠️ 2026-11-06 修正：这里原来被我写成了「右上角红点角标」（position:absolute + 红底白字），
   因为上一批「补齐未定义类名」时只按类名猜语义、没看标记结构。结果 7 个菜单项的文字全被
   定位到同一个角落、被浮层裁掉 —— 玩家看到的就是「展开菜单只有图标没有字」。
   实际标记是 <span class="uw-dock-fly-icon"/><span class="uw-dock-fly-label">文字</span> 的横向行。 */
.uw-dock-fly-label {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------------- Trade：成就工具条 ---------------- */
.uw-ach-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

/* ---------------- 门禁占位页 ---------------- */
.uw-main-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

/* 「可升级」角标（TS 独有）：.uw-commander-cell 本身没有 position，
   不加这行角标会定位到最近的定位祖先（整页），跑到页面右上角去。 */
.uw-commander-cell {
    position: relative;
}

/* 跃迁点选提示条里的拒绝原因（移动端面板让路时唯一能看到的反馈） */
.uw-smsp-jump-pick-err {
    font-style: normal;
    color: var(--uw-color-danger);
    margin-left: 4px;
}

/* ---------------- 虚空仓库：页签条（道具 / 强化石） ----------------
 * Blazor 端仓库是「强化石 + 道具」两段长列表，强化石一多整页就被占满；
 * Vite 端拆成页签（默认道具），容器延续舰队页 tab 栏的写法（按钮复用全局 .uw-tab）。 */
.uw-vault-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--uw-color-border-dim);
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
}

.uw-vault-tabs .uw-tab {
    white-space: nowrap;
    flex: none;
}

/* 强化石档位组头改用 <button>（对齐按钮可点性），这里清掉浏览器默认外观，
   其余样式（flex 布局 / 内边距 / hover 底色）沿用 uw-vault-misc.css 里的同名规则 */
button.uw-stone-group-head {
    width: 100%;
    margin: 0;
    border: 0;
    appearance: none;
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: left;
}

/* ---------------- 舰长碎片弹窗（uw-sharddlg） ----------------
 * Blazor 端这些样式写在 CommanderShardDialog.razor 的组件级 <style> 里，
 * TS 端没有对应抽屉文件，这里原样搬过来；
 * 只给下拉/输入框补基础外观（Blazor 借用 Bootstrap 的 form-select / form-select-sm）。 */
.uw-sharddlg { display: flex; flex-direction: column; gap: 12px; }

.uw-sharddlg-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.uw-sharddlg-stat {
    border: 1px solid rgba(128, 128, 128, .35);
    border-radius: 10px;
    padding: 10px 12px;
    text-align: center;
}

.uw-sharddlg-stat-name { display: block; font-size: 13px; opacity: .75; }
.uw-sharddlg-stat-num { display: block; font-size: 22px; line-height: 1.25; }
.uw-sharddlg-stat-sub { display: block; font-size: 12px; opacity: .65; }

.uw-sharddlg-filters { display: flex; gap: 8px; flex-wrap: wrap; }

.uw-sharddlg-unbind {
    border: 1px solid rgba(128, 128, 128, .35);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.uw-sharddlg-unbind-title { font-size: 13px; }
.uw-sharddlg-unbind-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.uw-sharddlg-unbind-cost { font-size: 12.5px; opacity: .8; }

/* Blazor 用 Bootstrap 的 select/input；TS 端补一层与弹窗同主题的基础外观 */
.uw-sharddlg-unbind select,
.uw-sharddlg-unbind input {
    height: 32px;
    padding: 0 8px;
    font: inherit;
    font-size: 13px;
    color: var(--uw-color-text-primary);
    background: var(--uw-color-bg-tertiary);
    border: 1px solid var(--uw-color-border-dim);
    border-radius: 6px;
}

.uw-sharddlg-tabs { display: flex; gap: 8px; }

.uw-sharddlg-tab {
    font-size: 13.5px;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid rgba(128, 128, 128, .4);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.uw-sharddlg-tab.active {
    border-color: currentColor;
    font-weight: 600;
    background: rgba(128, 128, 128, .16);
}

.uw-sharddlg-dexprogress { font-size: 13px; opacity: .8; }
.uw-sharddlg-dexprogress b { font-size: 16px; }

/* 图鉴格：未解锁 = 黑影占位（招募区同款"未知舰长"图，按品质选边框） */
.uw-sharddlg-locked img.uw-sharddlg-art { filter: brightness(0.12) grayscale(1); }
.uw-sharddlg-locked .uw-sharddlg-name { opacity: .5; }
.uw-sharddlg-dexrow { font-size: 11.5px; opacity: .75; min-height: 15px; }

.uw-sharddlg-filter {
    font-size: 13px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(128, 128, 128, .4);
    background: transparent;
    /* 必须显式 inherit：按钮不继承文字色，会吃到全局按钮白字，在浅色弹窗底上变成白底白字 */
    color: inherit;
    cursor: pointer;
}

.uw-sharddlg-filter.active {
    border-color: currentColor;
    font-weight: 500;
    background: rgba(128, 128, 128, .14);
}

.uw-sharddlg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 10px;
    max-height: 380px;
    overflow-y: auto;
    padding-right: 4px;
}

.uw-sharddlg-cell {
    border: 1px solid rgba(128, 128, 128, .3);
    border-radius: 10px;
    padding: 8px 6px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.uw-sharddlg-art {
    width: 64px;
    height: 96px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.uw-sharddlg-name { font-size: 13px; font-weight: 500; }
.uw-sharddlg-star { font-size: 12px; opacity: .8; min-height: 16px; }
.uw-sharddlg-shard { font-size: 12px; }
.uw-sharddlg-need { font-size: 11.5px; opacity: .7; }

.uw-sharddlg-btn {
    font-size: 12px;
    padding: 3px 10px;
    margin-top: 2px;
}

/* ============================================================================
 * 底栏玩家交流群（MainLayout footer 右侧）
 * 2026-11-07：Blazor 底栏是逐条轮播公告，TS 端改为常驻展示 QQ 交流群 + 一键复制。
 * ==========================================================================*/
.uw-footer-qq {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--uw-color-text-muted);
    white-space: nowrap;
}

.uw-footer-qq-num {
    color: var(--uw-color-accent);
    font-weight: 600;
    letter-spacing: .5px;
}

.uw-footer-qq-copy {
    padding: 0 9px;
    font-size: 11px;
    line-height: 18px;
    border-radius: 999px;
    border: 1px solid var(--uw-color-border-dim);
    background: transparent;
    color: var(--uw-color-text-secondary);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.uw-footer-qq-copy:hover {
    background: var(--uw-color-bg-hover);
    color: var(--uw-color-text-primary);
}

/* ============================================================================
 * 收集工厂操作按钮（2026-11-07 美化）
 * 对齐 Blazor CollectorsPanel 的 .uw-collector-btn：圆角 8px + 主色/危险色描边，
 * 替换原来通用的 uw-btn-primary / uw-btn-xs（方块小按钮观感差）。
 * ==========================================================================*/
.uw-collector-btn {
    padding: 5px 12px;
    border: 1px solid var(--uw-color-border-dim);
    border-radius: 8px;
    background: var(--uw-color-bg-tertiary);
    color: var(--uw-color-text-primary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.uw-collector-btn:hover:not(:disabled) {
    border-color: var(--uw-color-accent);
}

.uw-collector-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.uw-collector-btn-primary {
    background: var(--uw-color-accent);
    border-color: var(--uw-color-accent);
    color: var(--uw-btn-text);
}

.uw-collector-btn-primary:hover:not(:disabled) {
    background: var(--uw-color-accent-hover);
    border-color: var(--uw-color-accent-hover);
}

.uw-collector-btn-danger {
    border-color: var(--uw-color-danger);
    color: var(--uw-color-danger);
}

/* ============================================================================
 * Boss 出击编队：操作区（2026-11-07 线上反馈）
 * 移动端勾选多支舰队后，右侧「出击 / 仅进入观战」会被下方的出击清单挤出屏幕。
 * 把这两个按钮拆成独立的 .uw-bossprep-cta：移动端固定在 Dock 之上，始终可点。
 * ==========================================================================*/
.uw-bossprep-cta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

html[data-device="mobile"] .uw-bossprep {
    /* 给底部固定操作区留出滚动空间，避免最后一排内容被按钮盖住 */
    padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px));
}

html[data-device="mobile"] .uw-bossprep-cta {
    position: fixed;
    left: 0;
    right: 0;
    /* Dock 高度之上的安全区：按钮常驻可见，又不压住底部导航 */
    bottom: calc(51px + env(safe-area-inset-bottom, 0px));
    z-index: 1270;
    margin: 0;
    padding: 8px 10px;
    background: rgba(10, 12, 22, 0.96);
    border-top: 1px solid #232a44;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
}

/* 移动端底栏只有 28px：隐藏「玩家交流群」文字，保留群号与复制按钮 */
html[data-device="mobile"] .uw-footer-qq-label {
    display: none;
}

/* ============================================================================
 * 招募结果列表（2026-11-07）
 * 对齐 Blazor RecruitRevealOverlay.razor：同款卡合并成一行，
 * 重复行缩略图去饱和，右侧显示合计数量；100 连抽不再刷出上百条重复行。
 * ==========================================================================*/
.uw-recruit-summary {
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--uw-color-text-secondary);
}

.uw-recruit-summary b {
    color: var(--uw-color-warning);
    font-weight: 700;
}

.uw-recruitlist {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 58vh;
    overflow-y: auto;
}

.uw-recruitlist-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--uw-color-bg-hover);
    border-left: 3px solid var(--uw-color-text-muted);
}

.uw-recruitlist-row.r-legend { border-left-color: var(--uw-rarity-legend); }
.uw-recruitlist-row.r-rare { border-left-color: var(--uw-rarity-rare); }

.uw-recruitlist-thumb {
    flex: none;
    width: 34px;
    height: 50px;
    border-radius: 4px;
    object-fit: cover;
    object-position: top center;
    background: var(--uw-color-bg-secondary);
}

.uw-recruitlist-row.is-dup .uw-recruitlist-thumb {
    filter: saturate(0.25) brightness(0.8);
}

.uw-recruitlist-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.uw-recruitlist-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--uw-color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uw-recruitlist-rar {
    margin-left: 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--uw-color-text-secondary);
}

.uw-recruitlist-row.r-legend .uw-recruitlist-rar { color: var(--uw-color-warning); }

.uw-recruitlist-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.uw-recruitlist-tag {
    padding: 0 7px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.5;
    border: 1px solid transparent;
}

.uw-recruitlist-tag.is-new {
    background: var(--uw-color-success);
    color: var(--uw-btn-text);
    font-weight: 700;
}

.uw-recruitlist-tag.is-shard {
    background: var(--uw-color-bg-tertiary);
    border-color: var(--uw-color-border-dim);
    color: var(--uw-color-text-secondary);
}

.uw-recruitlist-count {
    flex: none;
    min-width: 42px;
    text-align: right;
    font-size: 15px;
    font-weight: 700;
    color: var(--uw-color-warning);
}

@media (max-width: 768px) {
    .uw-recruitlist {
        max-height: 52vh;
    }

    .uw-recruitlist-count {
        min-width: 34px;
        font-size: 14px;
    }
}

/* ============================================================================
 * 移动端世界 Boss 战场：底部「舰队 / 榜单」开关被 Dock 底栏压住（2026-11-07）
 *
 * 根因：移动端整页层 .uw-fullpage 的 z-index 是 945，低于 Dock(950)；
 * 战场页虽然自身 z-index:1250，但只在整页层内部生效，对外整体仍是 945。
 * 底部抽屉开关固定在 bottom:8px，正好整条落在 Dock(51px+safe-area) 下方被完全遮住，
 * 玩家既看不到「舰队（看战舰）」也看不到「榜单（看输出）」。
 *
 * 修法：不抬高整页层层级（否则 Dock 不可用），只把抽屉开关与底部抽屉抬到 Dock 之上——
 * Dock 顶边 = 51px + 安全区，开关再留 8px 间距。
 * ==========================================================================*/
html[data-device="mobile"] .uw-bossarena-drawerbar {
    bottom: calc(59px + env(safe-area-inset-bottom, 0px));
}

/* 抽屉本体同样抬到 Dock 之上：否则展开后被 Dock 截掉底部一截，圆角与边框都不完整 */
html[data-device="mobile"] .uw-bossarena-side {
    bottom: calc(51px + env(safe-area-inset-bottom, 0px));
}

/* ============================================================================
 * Dock「指挥中心 → 进行中」悬浮任务列表（2026-11-07）
 *
 * 对齐 Blazor StarMapActivityPanel.razor：展示当前跃迁 / 殖民 / 移泊 / 造船 / 建筑升级，
 * 向上弹出、与 Dock flyout 同风格。样式从组件内联 <style> 搬过来（同一套类名）。
 * ==========================================================================*/
.uw-sact {
    position: absolute;
    left: 0;
    bottom: calc(100% + 10px);
    z-index: 3;
    width: 250px;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--uw-color-border-dim);
    border-radius: 14px;
    background: var(--uw-color-bg-tertiary);
    box-shadow: 0 8px 24px var(--uw-shade);
    animation: uw-sact-up .16s ease;
    transform-origin: bottom left;
    font-size: 12px;
    color: var(--uw-color-text-primary);
}

@keyframes uw-sact-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

.uw-sact-none {
    padding: 8px 10px;
    color: var(--uw-color-text-secondary);
}

.uw-sact-item {
    display: block;
    width: 100%;
    padding: 7px 9px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.uw-sact-item:hover {
    background: var(--uw-color-bg-hover);
}

.uw-sact-item-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--uw-color-text-primary);
}

.uw-sact-item-eta {
    margin-left: auto;
    color: var(--uw-color-accent);
    font-weight: 600;
    font-size: 11px;
    white-space: nowrap;
}

.uw-sact-item-detail {
    color: var(--uw-color-text-secondary);
    margin-top: 2px;
}

/* 移动端 Dock 项变窄（等分整行），面板仍按自身宽度向左固定，不随项宽坍缩 */
html[data-device="mobile"] .uw-sact {
    width: min(250px, 78vw);
}