/* ============================================================================
 * uw-shipyard.css
 * 《放置：宇宙大战》卡通风格双主题 —— 造船厂（舰体立绘 + 仓库战舰 + 窄屏重排）
 *
 * 本文件从 uw-theme.css 拆分而来（2026-11-03），原始单文件 5204 行。
 * 拆分后由 index.html 逐个 <link> 引入，加载顺序必须保持变量文件在最前。
 * 所有规则只引用 uw-variables.css 里定义的 CSS 变量，不硬编码颜色。
 * ==========================================================================*/

/* ============================================================================
 * 造船厂：舰体立绘 + 仓库战舰按蓝图合并（2026-09-20）
 * ----------------------------------------------------------------------------
 * 立绘来源见 Shared/Constants/ShipArtCatalog：
 *   常规舰体（101-105）→ 复用**研究页那型战舰的立绘**（img/techs/），不重复出图；
 *   空白模板专属舰体 111-115 与后勤舰 116/117 → img/ships/（batch_ships.py 出图）。
 * 缩略图统一 56px 方图（生产队列用 .sm 的 40px），描边走卡片族的浅描边色，两套主题都稳。
 * 仓库合并行是"托盘"不是卡片：同蓝图多艘只占一行，数量用橙金胶囊提到最显眼处。
 * ==========================================================================*/
.uw-ship-art {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: var(--uw-r-md, 12px);
    border: 2px solid var(--uw-ink-soft);
    object-fit: cover;
    background-color: var(--uw-color-bg-secondary);
}

.uw-ship-art.sm {
    width: 40px;
    height: 40px;
}

/* 立绘 + 压在右下角的库存徽章（蓝图卡用；仓库行用行内的 .uw-stock-count） */
.uw-ship-art-wrap {
    position: relative;
    flex: 0 0 auto;
    line-height: 0;
}

.uw-ship-art-count {
    position: absolute;
    right: 3px;
    bottom: 3px;
    background: var(--uw-color-accent-dim);
    color: #241507;                        /* 橙金底压深墨字，口径同 .uw-tag-level */
    font-size: 11px;
    font-weight: 800;
    line-height: 16px;
    border-radius: var(--uw-r-pill);
    padding: 0 6px;
    box-shadow: 0 1px 3px rgba(36, 21, 7, 0.45);
}

/* 蓝图卡改成「左立绘 + 右信息」两栏（universe-war.css 里是单列，加图后必须换行向） */
.uw-blueprint-card {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
}

.uw-blueprint-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    /* 允许收缩，长蓝图名才会走省略号而不是把网格撑破 */
    min-width: 0;
}

/* 加了立绘后横向空间被吃掉 66px，网格最小列宽与按钮换行一起放宽，避免生产按钮竖排 */
.uw-blueprint-list {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.uw-blueprint-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 属性行里塞了一枚「仓库 ×N」胶囊，纵向居中对齐文字 */
.uw-blueprint-stats {
    align-items: center;
}

.uw-blueprint-tools {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.uw-blueprint-actions {
    flex-wrap: wrap;
}

/* 数量框：上面那批控件统一给了 7px/12px 的 padding，对「最多几位数字」的窄输入框来说
   左右 24px 全被吃掉（52px 宽时内容区只剩 26px）。这里收窄左右内边距，
   把空间让给数字本身（宽度仍由 Shipyard 的 CountInputWidth 按位数自适应）。 */
.uw-build-count input {
    padding: 7px 8px;
}

/* 空白模板卡的立绘塞在「信息 + 按钮」之间，信息列要吃掉剩余宽度 */
.uw-template-card .uw-template-info {
    flex: 1 1 auto;
}

/* --- 均分产线按钮（高级会员卡专属，2026-11-03 玩家反馈） ---
   与「生产」主按钮同形状的双行次级按钮，用会员金描边区分档位（金色 = 高级功能，与会员徽章同色系）。
   底色走 color-mix 混合当前主题的背景，亮/暗主题都不会出现"深底深字"或"浅底浅字"。
   信息密度：主文案直接写「均分到 N 条产线」，副文案标明单艘工时不重复造价的账。
   （造价与总耗时已在右侧生产按钮上，这里不重复，否则一行塞两个价格玩家更容易看错。） */
.uw-build-split {
    --uw-btn-edge: var(--uw-color-warning);
    --uw-btn-fill-top: color-mix(in srgb, var(--uw-color-warning) 22%, var(--uw-color-bg-tertiary));
    --uw-btn-fill-bottom: color-mix(in srgb, var(--uw-color-warning) 10%, var(--uw-color-bg-secondary));
    --uw-btn-glow: color-mix(in srgb, var(--uw-color-warning) 45%, transparent);
    color: var(--uw-color-text-primary);
    flex: 0 0 auto;
    flex-direction: column;
    gap: 1px;
    padding: 4px 10px;
    line-height: 1.25;
}

/* 金色主文案，副文案降一档亮度：避免整块金黄色过于抢眼，压过右侧的生产主按钮 */
.uw-build-split .uw-build-btn-main {
    color: var(--uw-color-warning);
}

/* 窄屏（移动端/小窗）下名称与按钮会挤成竖排，让均分按钮单独占满一行更好点 */
@media (max-width: 640px) {
    .uw-build-split {
        flex: 1 1 100%;
    }
}

/* --- 仓库合并行 --- */
.uw-stock-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background-color: var(--uw-color-bg-tertiary);
    border: 2px solid var(--uw-ink-soft);
    border-radius: var(--uw-r-md, 12px);
    box-shadow: 0 3px 0 var(--uw-shade);
    color: var(--uw-color-text-primary);
}

/* 只要组里有待修复的舰，整行描边转危险色，扫一眼就知道哪几组要处理 */
.uw-stock-row.damaged {
    border-color: var(--uw-color-danger);
}

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

.uw-stock-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.uw-stock-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 11px;
}

/* 库存数量：这一行的主角信息，用橙金底压深墨字（口径同 .uw-tag-level，两主题对比度都够） */
.uw-stock-count {
    display: inline-flex;
    align-items: center;
    background: var(--uw-color-accent-dim);
    color: #241507;
    font-size: 11px;
    font-weight: 800;
    border-radius: var(--uw-r-pill);
    padding: 1px 9px;
    white-space: nowrap;
}

.uw-stock-actions {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}

/* 展开的单舰明细：缩进 + 左侧竖线，表明它从属于上面那行（不重复占用卡片厚度） */
.uw-stock-detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 2px 0 6px 18px;
    padding-left: 10px;
    border-left: 3px solid var(--uw-ink-soft);
}

/* ============================================================================
 * 造船页 · 窄屏重排（2026-11-03 玩家反馈：手机上「仓库战舰」卡扭成一列单字）
 * ----------------------------------------------------------------------------
 * 症状：卡片里的文字逐字换行 —— 「可升级 ×1」竖排、HP/攻击 被拆成单字符、
 *       立绘被挤到卡片中段、拆解 / 同步蓝图 / 明细 三个按钮直接压在文字上。
 * 根因：.uw-stock-row 是「立绘 56px | 信息 flex:1 min-width:0 | 按钮组 flex:0 0 auto」的单行 flex。
 *       3 个按钮不换行合计约 280px，412px 机型里行内可用宽度只有约 360px，
 *       立绘 + 按钮已经吃满 → 信息列被压到接近 0（min-width:0 让它"合法"收缩），
 *       于是每个汉字各占一行，按钮看起来就像盖在文字上。
 * 修法：≤720px 改成两行 —— 第一行「立绘 + 信息」，第二行「按钮组」通栏等分；
 *       同时给标签/数值上 nowrap，否则就算给了宽度也会在词中间断开（"HP 39016 /" 掉行）。
 * ==========================================================================*/
@media (max-width: 720px) {
    .uw-stock-row {
        flex-wrap: wrap;
        align-items: flex-start;
        row-gap: 8px;
        padding: 8px 10px;
    }
    /* 第一行：立绘 56 + gap 10，其余全给信息列 */
    .uw-stock-main { flex: 1 1 calc(100% - 66px); }
    .uw-stock-head { row-gap: 4px; }
    /* 徽章不参与收缩：被压缩的徽章会变成竖排单字 */
    .uw-stock-head > .uw-tag,
    .uw-stock-head > .uw-stock-count { flex: 0 0 auto; white-space: nowrap; }
    .uw-stock-stats { row-gap: 2px; }
    .uw-stock-stats > span { white-space: nowrap; }
    /* 第二行：按钮组独占一行通栏；每个按钮等分，放不下时按 min 折行 */
    .uw-stock-actions {
        flex: 1 1 100%;
        margin-left: 0;
        flex-wrap: wrap;
    }
    .uw-stock-actions > button { flex: 1 1 88px; min-width: 0; }

    /* 展开后的单舰明细（.uw-ship-card）是同一套「信息 + 按钮」结构，同样会挤成一坨 */
    .uw-ship-card { flex-wrap: wrap; row-gap: 6px; }
    .uw-ship-card > .uw-ship-name,
    .uw-ship-card > .uw-ship-hp,
    .uw-ship-card > .uw-ship-attack,
    .uw-ship-card > .uw-tag { white-space: nowrap; }
    .uw-ship-card > button { flex: 1 1 auto; min-width: 88px; }

    /* 蓝图卡：名字右侧的「编辑 / 删除」在窄屏换到下一行右侧，
       否则长舰名会被压成省略号、"待刷新"标签被挤到看不见 */
    .uw-blueprint-header { flex-wrap: wrap; gap: 4px; }
    .uw-blueprint-header > .uw-tag { flex: 0 0 auto; white-space: nowrap; }
    .uw-blueprint-header > .uw-blueprint-tools {
        flex: 1 0 100%;
        justify-content: flex-end;
    }
    .uw-blueprint-stats > span { white-space: nowrap; }
    /* 空白模板卡同理：立绘 + 信息 + 按钮三列在窄屏会互相压 */
    .uw-template-card { flex-wrap: wrap; row-gap: 6px; }
}

/* ==================================================================
   【编组编辑器】统计行的 ？ 规则说明气泡（2026-09-20）
   纯 CSS 悬停气泡：hover / 键盘 focus / 触屏点按（tabindex=0）三种唤起。
   全部走主题 token，白天/夜间自动跟随。
   ================================================================== */
.uw-stat-help {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: -4px;
    border-radius: 50%;
    border: 1.5px solid var(--uw-edge-color);
    background: var(--uw-color-bg-secondary);
    color: var(--uw-color-text-secondary);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    cursor: help;
    user-select: none;
}

.uw-stat-help:hover,
.uw-stat-help:focus-visible {
    color: var(--uw-color-text-primary);
    border-color: var(--uw-color-text-secondary);
}

.uw-stat-help-bubble {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    width: 300px;
    padding: 10px 12px;
    border-radius: var(--uw-r-md, 12px);
    border: 2px solid var(--uw-edge-color);
    background: var(--uw-color-bg-tertiary);
    color: var(--uw-color-text-primary);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    text-align: left;
    white-space: normal;
    box-shadow: 0 3px 0 var(--uw-shade);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 60;
}

/* 小箭头：与气泡同底同描边，用旋转方块实现 */
.uw-stat-help-bubble::before {
    content: "";
    position: absolute;
    top: -7px;
    left: calc(50% - 6px);
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    background: var(--uw-color-bg-tertiary);
    border-left: 2px solid var(--uw-edge-color);
    border-top: 2px solid var(--uw-edge-color);
}

.uw-stat-help:hover .uw-stat-help-bubble,
.uw-stat-help:focus-visible .uw-stat-help-bubble {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.uw-stat-help-bubble b {
    display: block;
    margin: 6px 0 2px;
    color: var(--uw-color-text-primary);
    font-weight: 500;
}

.uw-stat-help-bubble b:first-child {
    margin-top: 0;
}

/* ==================================================================
   【顶部资源栏】钛矿/氦3 悬停提示：每秒产量 + 仓库当前/上限（2026-09-20）
   数据来自 GET api/resource 的 Rate/Cap 字段（服务端已算好，本地模拟不覆盖）。
   视觉与编组 ？ 气泡同一套语言：2px 描边 + 底部厚度 + 旋转方块箭头，全主题 token。
   ================================================================== */
.uw-resource-item.uw-res-has-tip {
    position: relative;
    cursor: default;
}

.uw-res-tip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    padding: 9px 12px;
    border: 2px solid var(--uw-edge-color);
    border-radius: var(--uw-r-md, 12px);
    background: var(--uw-color-bg-tertiary);
    color: var(--uw-color-text-primary);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.7;
    text-align: left;
    white-space: nowrap;
    box-shadow: 0 3px 0 var(--uw-shade);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 90;
}

/* 多行说明型悬浮卡（人口等长文案）：限定宽度并允许换行 */
.uw-res-tip.uw-res-tip--wrap {
    white-space: normal;
    width: 300px;
    line-height: 1.7;
}

.uw-res-tip::before {
    content: "";
    position: absolute;
    top: -7px;
    left: calc(50% - 6px);
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    background: var(--uw-color-bg-tertiary);
    border-left: 2px solid var(--uw-edge-color);
    border-top: 2px solid var(--uw-edge-color);
}

.uw-resource-item.uw-res-has-tip:hover .uw-res-tip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.uw-res-tip b {
    display: block;
    margin-bottom: 2px;
    font-weight: 500;
    color: var(--uw-color-text-primary);
}

.uw-res-tip .uw-res-tip-rate {
    color: var(--uw-color-accent);
}

/* 顶栏产量构成说明（2026-10-08：玩家反馈"顶部产量和资源点计数不匹配"，给辨识口径） */
.uw-res-tip .uw-res-tip-note {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: var(--uw-color-text-muted, rgba(128, 128, 128, 0.85));
    max-width: 240px;
    /* 2026-10-10：父级 .uw-res-tip 是 nowrap（钛矿/氦3 气泡未加 --wrap），
       说明长文案会直接冲出边框。这里单独放开换行 —— 宽度不变、行数增加，
       气泡变高而不变宽；顺带兜底超长英文/数字的断词。 */
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.6;
}

/* 顶栏建立独立层叠上下文并压过星图（星图容器 z-index 3 且 DOM 靠后），
   否则资源悬停气泡（.uw-res-tip）会被星图画布盖住。低于弹窗（950+/1050+）与全屏遮罩（2000）。 */
.uw-topbar {
    position: relative;
    z-index: 500;
}

/* ==================================================================
   移动端响应式适配（data-device="mobile" 由 index.html 设备检测脚本设置）
   桌面端 data-device="desktop" 或无属性时完全不匹配，零影响。
   断点：手机 <768px 全精简；平板 768-1023px 适度精简。
   ================================================================== */

/* ---- 顶栏：精简，腾出空间给资源数值 ---- */
html[data-device="mobile"] .uw-topbar {
    height: 44px;
    padding: 0 4px;
    gap: 8px;
}

/* 左侧品牌：只留 logo 图标，固定不压缩 */
html[data-device="mobile"] .uw-topbar-brand {
    min-width: auto;
    flex-shrink: 0;
}

html[data-device="mobile"] .uw-topbar-title {
    display: none;
}

/* 资源项：隐藏标签文字，只留图标 + 数值 */
html[data-device="mobile"] .uw-resource-label {
    display: none;
}

/* 资源项间距收紧；资源项本身禁止被 flex 压缩（随滚动容器整体滑动） */
html[data-device="mobile"] .uw-topbar-resources {
    gap: 4px;
    flex-shrink: 0;
}

html[data-device="mobile"] .uw-resource-item {
    gap: 2px;
    flex-shrink: 0;
    padding: 4px 8px;
}

/* 滚动容器：资源 + 右侧功能按钮放进同一个横向滚动区，左侧 logo 固定在外。
   内容不超宽时 margin-left:auto 把操作区推到最右；超宽时自动归零、整体可滚 */
html[data-device="mobile"] .uw-topbar-scroll {
    flex: 1 1 auto;
    min-width: 0;
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-right: 4px;
}

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

html[data-device="mobile"] .uw-topbar-resources,
html[data-device="mobile"] .uw-topbar-actions {
    overflow: visible;
}

/* 右侧操作区：不压缩；功能较少时靠右对齐，超宽时并入滚动 */
html[data-device="mobile"] .uw-topbar-actions {
    flex-shrink: 0;
    margin-left: auto;
    gap: 8px;
}

/* 操作按钮移动端触控目标加大（44px 栏高内做到 ≥36px 命中区），给资源区让的宽度由滚动补回 */
html[data-device="mobile"] .uw-topbar-mail-badge,
html[data-device="mobile"] .uw-topbar-help,
html[data-device="mobile"] .uw-theme-switch {
    padding: 8px 9px;
    min-width: 40px;
    min-height: 36px;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

html[data-device="mobile"] .uw-topbar-logout {
    padding: 8px 10px;
    min-height: 36px;
    box-sizing: border-box;
}

/* 资源悬停提示在触屏无 hover，直接隐藏避免挡住 */
html[data-device="mobile"] .uw-res-tip {
    display: none !important;
}

/* 操作区：隐藏时间显示和登出文字（登出留图标） */
html[data-device="mobile"] .uw-topbar-time {
    display: none;
}

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

/* 手机进一步精简：资源数值字号缩小（横向滚动规则已在上方主块统一处理） */
@media (max-width: 480px) {
    html[data-device="mobile"] .uw-resource-value {
        font-size: 13px;
    }
}

/* ---- Dock 导航：改底部水平 Tab Bar ---- */
html[data-device="mobile"] .uw-dock {
    left: 0;
    right: 0;
    bottom: 0;
    gap: 0;
    justify-content: space-around;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--uw-color-bg-secondary);
    border-top: 1px solid var(--uw-color-border-dim);
    z-index: 950;
}

/* Dock 按钮等宽分布，隐藏文字标签 */
html[data-device="mobile"] .uw-dock-item {
    flex: 1 1 0;
}

html[data-device="mobile"] .uw-dock-btn {
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

html[data-device="mobile"] .uw-dock-btn:hover,
html[data-device="mobile"] .uw-dock-btn.open {
    transform: none;
    box-shadow: none;
    background: var(--uw-color-bg-hover);
}

html[data-device="mobile"] .uw-dock-btn-label {
    display: none;
}

html[data-device="mobile"] .uw-dock-btn-icon {
    font-size: 22px;
}

/* flyout 从底部上滑而非左下角上弹 */
html[data-device="mobile"] .uw-dock-flyout {
    left: 50%;
    bottom: calc(100% + 1px);
    transform: translateX(-50%);
    transform-origin: bottom center;
    min-width: 160px;
}