/* ============================================================================
 * uw-starmap-dock.css
 * 《放置：宇宙大战》卡通风格双主题 —— Dock遮罩 + 抽屉面板 + 移动端面板高度
 *
 * 本文件从 uw-theme.css 拆分而来（2026-11-03），原始单文件 5204 行。
 * 拆分后由 index.html 逐个 <link> 引入，加载顺序必须保持变量文件在最前。
 * 所有规则只引用 uw-variables.css 里定义的 CSS 变量，不硬编码颜色。
 * ==========================================================================*/

/* 【修复】遮罩层级必须在 Dock 容器内部保持最低（item z2 > mask z1）：
   曾经误设 z-index:940 —— 遮罩是 .uw-dock(z950) 的子元素，对外压主内容由容器决定，
   内部 940 反而盖住了 z2 的 flyout 菜单，导致移动端点菜单项 = 点到遮罩 = 直接关菜单。 */

/* ---- 底栏：隐藏滚动公告，只留连接状态 ---- */
html[data-device="mobile"] .uw-layout-footer {
    height: 28px;
    font-size: 11px;
}

/* ---- 主区：底部留出 Dock Tab Bar 高度 ----
   Dock 实际高度 = 50px 按钮 + 1px 边框 + iOS 安全区（home indicator ≈34px），
   只写 50px 时刘海屏底部内容会被 Dock 压住点不到 → 必须 calc 加上 safe-area */
html[data-device="mobile"] .uw-layout-main {
    padding-bottom: calc(51px + env(safe-area-inset-bottom, 0px));
}

/* ---- 建筑页：双栏 grid 改单栏 ----
   【2026-10-08 修复】桌面端 .uw-building-layout 是 flex:1 占满 .uw-page(100%)、
   两栏各自 overflow:auto 内滚的设计；移动端只改单栏没解除内滚 →
   .uw-layout-main 主区 scrollH==clientH 不滚动，列表被压进 200 多px 的内滚小窗，
   最底部卡片按钮被裁剪、新建区「建造」按钮落到 Dock 之下点不到（玩家反馈实锤）。
   移动端改为自然流布局，统一交给 .uw-layout-main 滚动（与科技/商城页同模式）。 */
html[data-device="mobile"] .uw-building-layout {
    grid-template-columns: 1fr;
    flex: none;
}

/* 解除内层滚动窗，内容自然撑开 */
html[data-device="mobile"] .uw-building-list,
html[data-device="mobile"] .uw-building-construct {
    overflow: visible;
}

/* 战斗页同款「flex:1 + overflow:auto 内滚面板」隐患，一并解除 */
html[data-device="mobile"] .uw-battle-layout {
    flex: none;
    overflow: visible;
}

/* 邮件详情内滚面板同上 */
html[data-device="mobile"] .uw-mail-detail {
    flex: none;
    overflow-y: visible;
}

/* 大图卡模式改回紧凑列表 */
html[data-device="mobile"] .uw-building-cards.is-grid {
    display: flex;
    flex-direction: column;
}

html[data-device="mobile"] .uw-building-cards.is-grid .uw-building-card {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

html[data-device="mobile"] .uw-building-cards.is-grid .uw-building-art {
    width: 48px;
    height: 48px;
}

html[data-device="mobile"] .uw-building-cards.is-grid .uw-building-info {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

/* ---- 蓝图列表 grid 改单栏 ---- */
html[data-device="mobile"] .uw-blueprint-list {
    grid-template-columns: 1fr;
}

/* 蓝图设计弹窗自适应 */
html[data-device="mobile"] .uw-blueprint-modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
}

/* ---- 蓝图列表网格列宽适配窄屏 ---- */
html[data-device="mobile"] .uw-template-list {
    grid-template-columns: 1fr;
}

/* ---- 通用：页面内边距收紧 ---- */
html[data-device="mobile"] .uw-page {
    gap: 8px;
    /* 【2026-10-19 修复】移动端 .uw-page 必须按内容撑高，不能 height:100%。
       桌面端 .uw-page 是 flex:1 定高列（universe-war.css 的 height:100%），子内容溢出这个
       定高盒子后，.uw-layout-main 的 padding-bottom:calc(51px + safe-area) 会被溢出区域吃掉
       → 完全失效；而 main 盒子底边本身就比 Dock 顶边低 23px（手机 816 vs 793、平板 997 vs 973），
       于是「滚到底后页面最底部 23px 恒被 Dock 压住」，滚不出来：
         /shop「购买/＋/−」被压 10~11px（30px 按钮只剩 19px 可点，按在下沿会命中 Dock 直接换页）
         /legion「加入」7px、/planet「放弃」9px、/fleet「修改舰队名称」2px
       A/B 实验（.workbuddy/tmp/mobile-adapt-1018/experiment.mjs）：只加大 padding 无效（仍 +22px）；
       改 auto + min-height:100% 后内容底边从 +23px 变为 −28~−46px（完全露出），
       且 /（3D 星图）、/galaxy（含 945px 内滚抽屉）、/chat、/fleet、/leaderboard、/cosmetics
       的内滚容器数量与滚动高度零变化。 */
    height: auto;
    min-height: 100%;
}

html[data-device="mobile"] .uw-page-title {
    font-size: 16px;
    letter-spacing: 1px;
}

/* ---- 星图页面：双栏(1fr 320px) 改单栏 ---- */
html[data-device="mobile"] .uw-galaxy-layout {
    grid-template-columns: 1fr;
}

/* ---- 星系详情面板：移动端改底部抽屉 ----
   右侧 320px 面板在手机上≈满屏、把星图挤没；改为 fixed 底部抽屉（Dock Tab Bar 之上），
   未选中星系时滑出屏幕（星图全屏可操作），选中后滑入；头部「收起」按钮点击即收回 */
html[data-device="mobile"] .uw-galaxy-detail {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(51px + env(safe-area-inset-bottom, 0px)); /* 移动端 Dock Tab Bar 高度（含安全区）之上 */
    top: auto;
    width: 100%;
    /* 【2026-10-19 修复】原 68vh 会一路顶到星图左下角的缩放控件上：手机抽屉 t=219，而
       ＋/－/⟲ 三个按钮在 y=193~302 → － 与 ⟲ 完全压在抽屉里、＋ 只露 1px，缩放直接不可用，
       星图可视区也只剩 42px（96% 被盖）。压到 52vh 后抽屉顶边降到 ~354（手机）/ ~441（平板竖屏），
       三个缩放按钮全部露出，星图也能看见。抽屉自身仍是内滚面板，内容照常可达。 */
    max-height: 52vh;
    z-index: 940;                 /* 低于 Dock(z950)，底栏始终可点 */
    border-radius: 12px 12px 0 0;
    border-bottom: none;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.35);
    transform: translateY(calc(100% + 160px)); /* 默认收起：彻底滑出屏幕（100% 自身高 + 160px 余量，避免底部残留） */
    transition: transform 0.25s ease;
}

html[data-device="mobile"] .uw-galaxy-detail.open {
    transform: translateY(0);
}

/* 移动端跃迁点选让路（2026-10-05）：选好跃迁舰队后抽屉自动收起，把星图整屏让给目标点选；
   点中目标星系或退出跃迁模式后移除 pick-suppress 恢复抽屉。
   （桌面端详情面板是右侧栏不遮星图，此规则只在 data-device="mobile" 下生效） */
html[data-device="mobile"] .uw-galaxy-detail.pick-suppress {
    transform: translateY(calc(100% + 160px));
    pointer-events: none; /* 收起期间不可交互，避免抽屉残影拦截星图点击 */
}

/* 移动端跃迁点选浮动提示条：抽屉让路期间悬浮在星图右下角，提示玩家点选目标星系并可一键退出 */
html[data-device="mobile"] .uw-galaxy-jump-pick-hint {
    position: absolute;
    right: 10px;
    bottom: 60px;                 /* 抬到 Dock Tab Bar 之上，避免被底栏压住无法点「取消」 */
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    max-width: calc(100% - 20px);
    padding: 8px 10px;
    background-color: var(--uw-color-bg-tertiary);
    border: 1px solid var(--uw-color-accent);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

html[data-device="mobile"] .uw-galaxy-jump-pick-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--uw-color-text-primary);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html[data-device="mobile"] .uw-galaxy-jump-pick-text i.fa {
    color: var(--uw-color-accent);
}

html[data-device="mobile"] .uw-galaxy-jump-pick-text b {
    color: var(--uw-color-accent);
}

html[data-device="mobile"] .uw-galaxy-jump-pick-actions {
    display: flex;
    justify-content: flex-end;
}

html[data-device="mobile"] .uw-galaxy-jump-pick-cancel {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 14px;
    background-color: var(--uw-color-bg-secondary);
    border: 1px solid var(--uw-color-border-dim);
    border-radius: 6px;
    color: var(--uw-color-text-secondary);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

html[data-device="mobile"] .uw-galaxy-jump-pick-cancel:hover {
    color: var(--uw-color-accent);
    border-color: var(--uw-color-accent);
}

html[data-device="mobile"] .uw-galaxy-detail-collapse {
    display: inline-flex;
}

/* ---- 3D 星图系统面板（StarMapSystemPanel）：移动端同样改底部抽屉 ---- */
html[data-device="mobile"] .uw-smsp {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(51px + env(safe-area-inset-bottom, 0px)); /* Dock Tab Bar 高度（含安全区）之上 */
    top: auto;
    width: 100%;
    max-height: 68vh;
    z-index: 940;
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.35);
    transition: transform 0.25s ease;
    /* 【2026-10-22 移动端不能下滑修复】桌面端面板是 top+bottom 双锚定 → 高度确定，
       内层 .uw-smsp-clip/.uw-smsp-scroll 的 height:100% 才能解析出真实高度、正常滚动。
       移动端改成「内容撑开 + max-height 封顶」，height 变成 auto：百分比高度链断掉，
       内层高度=内容高度、滚动容器永远不滚，超出的星球被 max-height 之外的部分直接看不到。
       这里把外框改成纵向 flex，让裁剪层吃到剩余高度（配合 min-height:0 才肯收缩）。 */
    display: flex;
    flex-direction: column;
}

html[data-device="mobile"] .uw-smsp-clip {
    height: auto;              /* 覆盖桌面端的 height:100%（auto 父高度下无效且会切断 flex） */
    flex: 1 1 auto;
    min-height: 0;             /* 关键：默认 min-height:auto 会按内容撑开，滚动容器就永远不滚 */
    display: flex;
    flex-direction: column;
}

html[data-device="mobile"] .uw-smsp-scroll {
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;   /* iOS 惯性滚动 */
    overscroll-behavior: contain;        /* 滚到顶/底不带动整页与 3D 星图 */
}

/* 移动端 3D 跃迁点选让路（2026-10-05）：与经典星图 .uw-galaxy-detail.pick-suppress 同策略 ——
   选好舰队且未选定目标时抽屉整体滑出，把 3D 场景让给目标点选；选定目标/退出点选后自动恢复。
   .uw-smsp 无 open 类（面板常驻），故直接覆盖 transform，位移量取 100% + 160px 余量 */
html[data-device="mobile"] .uw-smsp.pick-suppress {
    transform: translateY(calc(100% + 160px));
    pointer-events: none;
}

/* 3D 星图跃迁点选浮动提示条（面板让路期间的唯一可见引导 + 取消入口） */
html[data-device="mobile"] .uw-smsp-jump-pick-hint {
    position: absolute;
    right: 10px;
    bottom: 60px;                 /* 抬到 Dock Tab Bar 之上，避免被底栏压住 */
    z-index: 950;                 /* 高于面板(940)：面板滑出期间仍需可点 */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    max-width: calc(100% - 20px);
    padding: 8px 10px;
    background-color: var(--uw-color-bg-tertiary);
    border: 1px solid var(--uw-color-accent);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

html[data-device="mobile"] .uw-smsp-jump-pick-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--uw-color-text-primary);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html[data-device="mobile"] .uw-smsp-jump-pick-text i.fa {
    color: var(--uw-color-accent);
}

html[data-device="mobile"] .uw-smsp-jump-pick-text b {
    color: var(--uw-color-accent);
}

html[data-device="mobile"] .uw-smsp-jump-pick-actions {
    display: flex;
    justify-content: flex-end;
}

html[data-device="mobile"] .uw-smsp-jump-pick-cancel {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 14px;
    background-color: var(--uw-color-bg-secondary);
    border: 1px solid var(--uw-color-border-dim);
    border-radius: 6px;
    color: var(--uw-color-text-secondary);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

html[data-device="mobile"] .uw-smsp-jump-pick-cancel:hover {
    color: var(--uw-color-accent);
    border-color: var(--uw-color-accent);
}

html[data-device="mobile"] .uw-smsp-close {
    display: inline-flex;
}

/* ---- 阵型编辑：双栏(1fr 280px) 改单栏 ---- */
html[data-device="mobile"] .uw-formation-layout {
    grid-template-columns: 1fr;
}

/* ---- 战斗双方舰队：双栏(1fr 1fr) 改单栏（上下排列） ---- */
html[data-device="mobile"] .uw-battle-fleets {
    grid-template-columns: 1fr;
}

/* ---- 交易行：6 列改 2 列（商品名跨行，价格/数量紧凑排列） ---- */
html[data-device="mobile"] .uw-trade-row {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

/* ---- 排行榜行：4 列(60px 2fr 1fr 1fr) 改 2 列 ---- */
html[data-device="mobile"] .uw-leaderboard-row {
    grid-template-columns: 40px 1fr;
    gap: 4px;
}

/* ---- 排行榜领奖台：3 列保持（仅 3 个卡，窄屏可接受） ---- */

/* ---- 军团成员行：4 列固定宽度改 flex-wrap ---- */
html[data-device="mobile"] .uw-legion-member-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

/* ---- 造船厂蓝图设计弹窗：内部部件选择区适配 ---- */
html[data-device="mobile"] .uw-part-options {
    flex-direction: column;
}

/* ---- 指挥官招募卡：双栏(80px 1fr) 保持（图标+信息紧凑，窄屏可用） ---- */

/* ---- 科技页 auto-fill minmax(340px)：手机自动 1 列，无需额外覆盖 ---- */

/* ---- 登录页：已有 @media(max-width:900px) 适配，补充安全区内边距 ---- */
html[data-device="mobile"] .uw-login-layout {
    padding-top: env(safe-area-inset-top, 0px);
}

/* ---- 邮件：横向(列表+内容)改纵向(上下排列) ---- */
html[data-device="mobile"] .uw-mail-layout {
    flex-direction: column;
    height: auto;
}

/* ---- 3D 星图操作提示：移动端没有滚轮/WASD，换触屏文案（StarMap.razor 双 span） ---- */
html[data-device="mobile"] .uw-starmap3d-hint .uw-starmap3d-hint-desktop { display: none; }
html[data-device="mobile"] .uw-starmap3d-hint .uw-starmap3d-hint-mobile { display: inline; }

/* ---- 聊天频道页签：5 个按钮超宽会挤成两行竖排字 → 改横向滚动，字永远一行 ---- */
html[data-device="mobile"] .uw-chat-channels {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

html[data-device="mobile"] .uw-chat-channels::-webkit-scrollbar {
    display: none;
}

html[data-device="mobile"] .uw-chat-channel-btn {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 8px 14px;
}

/* ---- 赛季结算记录表：4 列 grid 在窄屏挤压截断 → 继承内容/状态各自独占一行 ---- */
html[data-device="mobile"] .uw-season-table .uw-leaderboard-row {
    grid-template-columns: 44px 1fr;
    row-gap: 2px;
}

html[data-device="mobile"] .uw-season-table .uw-lb-col-faction,
html[data-device="mobile"] .uw-season-table .uw-lb-col-score {
    grid-column: 1 / -1;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* ---- 赛季中心 Tab 页签：移动端等宽不挤 ---- */
html[data-device="mobile"] .nav-tabs {
    flex-wrap: wrap;
    gap: 2px;
}
html[data-device="mobile"] .nav-tabs .nav-link {
    font-size: 13px;
    padding: 6px 12px;
}

/* ---- 赛季旅程阶段轨道：移动端适配 ---- */
html[data-device="mobile"] .uw-journey-overview {
    gap: 0.5rem;
    padding: 0.6rem;
}
html[data-device="mobile"] .uw-journey-overview-item {
    min-width: 70px;
}
html[data-device="mobile"] .uw-journey-overview-num {
    font-size: 1rem;
}

/* 阶段卡片内边距收紧 */
html[data-device="mobile"] .uw-journey-stage {
    padding: 0.6rem 0.7rem;
}

/* 阶段头部：徽章+图标+名称换行不溢出 */
html[data-device="mobile"] .uw-journey-stage-head {
    gap: 0.35rem;
}
html[data-device="mobile"] .uw-journey-stage-name {
    font-size: 0.95rem;
}

/* 任务行：名称与数字可换行 */
html[data-device="mobile"] .uw-journey-task-name {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

/* 奖励预览：触控间距放大 */
html[data-device="mobile"] .uw-journey-reward {
    padding: 3px 10px;
    font-size: 11px;
}

/* 领取按钮满宽（触控友好） */
html[data-device="mobile"] .uw-journey-claim {
    width: 100%;
    min-height: 38px;
    font-size: 14px;
}

/* 赛季成就入口卡：移动端紧凑 */
html[data-device="mobile"] .uw-sach-entry {
    padding: 0.6rem;
}
html[data-device="mobile"] .uw-sach-entry-info {
    flex: 1;
    min-width: 0;
}
html[data-device="mobile"] .uw-sach-entry-sub {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- 装饰面板整页路由（/cosmetics）：移动端显示页头（桌面 WinBox 弹窗隐藏） ---- */
html[data-device="mobile"] .uw-cosmetics-page-title {
    display: block;
}