/* ============================================================================
 * uw-planetui.css
 * 《放置：宇宙大战》卡通风格双主题 —— 星球切换器 + 编组弹窗修复
 *
 * 本文件从 uw-theme.css 拆分而来（2026-11-03），原始单文件 5204 行。
 * 拆分后由 index.html 逐个 <link> 引入，加载顺序必须保持变量文件在最前。
 * 所有规则只引用 uw-variables.css 里定义的 CSS 变量，不硬编码颜色。
 * ==========================================================================*/

/* ============================================================================
 * 星球切换器（PlanetSwitcher 共享组件）：自定义下拉 + 记忆上次星球
 * ==========================================================================*/
.uw-planet-switcher {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--uw-color-bg-tertiary);
    border: 2px solid var(--uw-ink-soft);
    border-radius: var(--uw-r-md);
    box-shadow: 0 3px 0 var(--uw-shade);
    padding: 8px 14px;
}
/* PlanetSwitcher 组件根容器：按钮 + 详情条同行排列，必要时换行 */
.uw-planet-switcher-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.uw-planet-switcher-bar .uw-planet-switcher-info {
    margin-left: auto;
}
.uw-planet-switcher-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--uw-color-text-secondary);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.uw-planet-switcher-label i { color: var(--uw-color-accent); }

.uw-planet-select-wrap { position: relative; display: inline-block; min-width: 200px; }
.uw-planet-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    cursor: pointer;
    background: var(--uw-color-bg-input, var(--uw-color-bg-hover));
    border: 2px solid var(--uw-ink-soft);
    border-radius: var(--uw-r-pill);
    color: var(--uw-color-text-primary);
    padding: 5px 14px 5px 10px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 2px 0 var(--uw-shade);
    transition: transform .12s ease, box-shadow .12s ease, border-color .15s ease;
}
.uw-planet-trigger:hover { border-color: var(--uw-color-accent); transform: translateY(-1px); }
.uw-planet-trigger:active { transform: translateY(1px); box-shadow: none; }
.uw-planet-trigger-icon { font-size: 17px; }
.uw-planet-trigger-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uw-planet-caret { margin-left: auto; color: var(--uw-color-text-muted); font-size: 12px; }
.uw-tag-mini { font-size: 10px; padding: 0 6px; border-radius: var(--uw-r-pill); }

.uw-planet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 950;
    background: transparent;
}
.uw-planet-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    z-index: 960;
    min-width: 280px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--uw-color-bg-tertiary);
    border: 2px solid var(--uw-ink);
    border-radius: var(--uw-r-md);
    box-shadow: 0 10px 30px var(--uw-shade);
    padding: 6px;
}
.uw-planet-menu-title {
    color: var(--uw-color-text-muted);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px 6px;
    border-bottom: 1px dashed var(--uw-color-border-dim);
    margin-bottom: 4px;
}
.uw-planet-menu-empty { padding: 14px; text-align: center; color: var(--uw-color-text-muted); font-size: 13px; }
.uw-planet-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: var(--uw-color-text-primary);
    padding: 7px 8px;
    cursor: pointer;
}
.uw-planet-opt:hover { background: var(--uw-color-bg-hover); }
.uw-planet-opt.active { background: var(--uw-color-bg-hover); box-shadow: inset 3px 0 0 var(--uw-color-accent); }
.uw-planet-opt-icon { font-size: 20px; flex-shrink: 0; }
.uw-planet-opt-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.uw-planet-opt-name { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.uw-planet-opt-type { font-size: 10px; color: var(--uw-color-accent); background: var(--uw-color-glow); border-radius: var(--uw-r-pill); padding: 0 6px; font-weight: 600; }
.uw-planet-opt-meta { font-size: 11px; color: var(--uw-color-text-muted); margin-top: 1px; }
.uw-planet-opt-check { color: var(--uw-color-accent); flex-shrink: 0; }
.uw-planet-switcher-info {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--uw-color-text-secondary);
    font-size: 12px;
    flex-wrap: wrap;
}
.uw-planet-switcher-info i { color: var(--uw-color-accent); width: 14px; text-align: center; }

/* ============================================================================
 * 星图（SVG 相关色均走变量；辉光 stop 用 CSS 覆盖，节点 fill 由 Razor 注入 style）
 * ==========================================================================*/
.uw-galaxy-svg { background-color: transparent; }
.uw-galaxy-node circle[fill^="var"] { stroke-width: 2.5; }
.uw-galaxy-node circle.r-glow { }
#uwGalaxyGlow stop:first-child { stop-color: var(--uw-svg-glow-a); }
#uwGalaxyGlow stop:last-child { stop-color: var(--uw-svg-glow-b); }
.uw-colony-ring { stroke: var(--uw-colony-ring) !important; stroke-dasharray: 4 3; }
.uw-fleet-ring { stroke: var(--uw-fleet-ring) !important; }
.uw-galaxy-link { stroke: var(--uw-ink-soft); }
.uw-galaxy-link.jumpable { stroke: var(--uw-color-accent); opacity: .95; }
.uw-galaxy-zoom-btn {
    background: var(--uw-color-bg-tertiary);
    border: 2px solid var(--uw-ink-soft);
    border-radius: var(--uw-r-pill);
    color: var(--uw-color-accent);
    box-shadow: 0 2px 0 var(--uw-shade);
}
.uw-galaxy-detail {
    background-color: var(--uw-color-bg-tertiary);
    border: 2px solid var(--uw-ink-soft);
    border-radius: var(--uw-r-md);
    box-shadow: 0 3px 0 var(--uw-shade);
}
.uw-jump-card {
    background-color: var(--uw-color-bg-tertiary);
    border: 3px solid var(--uw-ink);
    border-radius: var(--uw-r-lg);
    box-shadow: 0 8px 30px var(--uw-shade);
}
.uw-jump-card .uw-jump-title { color: var(--uw-color-accent); }

/* ============================================================================
 * WinBox 桌面式弹窗（BootstrapBlazor.WinBox）：统一成与 A/B 主题一致的糖果窗口
 * ==========================================================================*/
.winbox,
.bb-win-box,
.wb-winbox {
    font-family: "Baloo 2", "Quicksand", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 40px -12px var(--uw-shade), 0 6px 16px rgba(0, 0, 0, 0.25);
}
.winbox {
    --bb-winbox-bg: var(--uw-color-bg-secondary);
}

/* 【2026-10-12 移动端「编组弹窗退不出来」修复】
   winbox.js 用**全局计数器**给窗口写 inline z-index（10、11、12…），远低于游戏 chrome：
   .uw-topbar 是 500、.uw-dock 是 950。桌面端窗口有 X/Y 偏移、标题栏恰好落在顶栏下方，
   所以看不出来；移动端窗口是全屏（0,0,W,H），标题栏与右上关闭按钮正好被顶栏盖住 →
   玩家点关闭实际点到了顶栏，只能刷新页面（玩家反馈实锤，CDP 移动模拟已复现：
   elementFromPoint(关闭按钮) = SPAN.uw-resource-value）。
   抬到 1020：高于 .uw-modal-mask(1000) 与 Dock(950)，仍低于引导聚光 1060 / 引导卡片 1080，
   保持「引导高亮必须能盖住弹窗」的既有层级契约。
   必须 !important —— winbox 用的是 inline 样式，inline 优先级高于普通声明。
   两档（默认 / .focus）用于保留 winbox「最后聚焦的窗口在最上」的原有语义。 */
.winbox {
    z-index: 1020 !important;
}

.winbox.focus {
    z-index: 1021 !important;
}
/* 标题栏：双主题渐变——白天蜜糖浅金 + 深可可字；夜晚深靛蓝渐变 + 白字。
   WinBox 的 css 是弹窗打开时才注入 <head>，晚于本主题 css，
   因此这里用 !important 保证主题在任意加载顺序下都生效。
   （渐变端点色 --uw-winbox-title-a/b 与字色 --uw-winbox-title-color 在文件末尾按主题定义） */
.wb-header,
.winbox .wb-header {
    background: linear-gradient(135deg, var(--uw-winbox-title-a, #4a5fd0), var(--uw-winbox-title-b, #333b8f)) !important;
    color: var(--uw-winbox-title-color, #fff) !important;
}
.wb-title,
.winbox .wb-title {
    color: var(--uw-winbox-title-color, #fff) !important;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-shadow: none;
}
/* 标题控制按钮（最小化/最大化/关闭）：保留 WinBox 自带白色图标，仅给深色标题栏下微调亮度 */
.wb-control,
.winbox .wb-control {
    opacity: 0.92;
    transition: opacity .15s ease;
}
.wb-control:hover,
.winbox .wb-control:hover {
    opacity: 1;
}
/* 内容区：必须跟随主题背景色，防止默认黑色/深色穿帮 */
.wb-body,
.winbox .wb-body {
    background: var(--uw-color-bg-tertiary) !important;
    color: var(--uw-color-text-primary) !important;
    /* 原 4px：弹窗内容四周过窄，底边尤其贴死 —— 加大到与 .uw-page 视觉节奏一致的呼吸感 */
    padding: 10px 12px 14px;
}
html[data-theme="night"] .wb-body,
html[data-theme="night"] .winbox .wb-body {
    background: var(--uw-color-bg-tertiary) !important;
}
.winbox {
    background: var(--uw-color-bg-tertiary) !important;
}
html[data-theme="night"] .winbox {
    background: var(--uw-color-bg-tertiary) !important;
}
/* 弹窗内滚动条跟随主题 */
.wb-body::-webkit-scrollbar,
.wb-body::-webkit-scrollbar-thumb {
    background: transparent;
}
.wb-body {
    scrollbar-width: thin;
    scrollbar-color: var(--uw-ink-soft) transparent;
}
.winbox .uw-formation-layout,
.wb-body .uw-formation-layout {
    height: 100%;
}
.winbox .uw-operation-message {
    margin: 4px 8px;
}
.winbox .uw-formation-section,
.wb-body .uw-formation-section {
    margin-bottom: 6px;
}
/* 阵型网格槽位 / 仓库战舰列表 / 选择器 / 信息条（WinBox 内随主题显示） */
.winbox .uw-formation-slot,
.wb-body .uw-formation-slot {
    background: var(--uw-color-bg-hover);
    border: 2px dashed var(--uw-ink-soft);
    border-radius: 10px;
    color: var(--uw-color-text-primary);
    padding: 6px 4px;
    cursor: pointer;
    min-height: 52px;
}
.winbox .uw-formation-slot.selected,
.wb-body .uw-formation-slot.selected {
    border: 2px solid var(--uw-color-accent);
    background: var(--uw-color-accent-glow, var(--uw-color-glow));
}
.winbox .uw-formation-slot .uw-slot-name,
.wb-body .uw-formation-slot .uw-slot-name {
    color: var(--uw-color-text-muted);
    font-size: 10px;
}
.winbox .uw-formation-fleet-info h4,
.wb-body .uw-formation-fleet-info h4 {
    color: var(--uw-color-accent);
}
.winbox .uw-formation-stats,
.wb-body .uw-formation-stats {
    color: var(--uw-color-text-secondary);
}
.winbox .uw-warehouse-ship,
.wb-body .uw-warehouse-ship,
.winbox .uw-current-commander,
.wb-body .uw-current-commander {
    background: var(--uw-color-bg-tertiary);
    border: 1.5px solid var(--uw-ink-soft);
    border-radius: 10px;
    color: var(--uw-color-text-primary);
    padding: 6px 8px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.winbox .uw-slot-ship,
.wb-body .uw-slot-ship {
    background: var(--uw-color-bg-tertiary);
    border: 1px solid var(--uw-ink-soft);
    /* 卡片现为「名称 + Hp/Ack + 血条」两行结构，胶囊圆角会撑成两端半圆 → 改用卡片圆角 */
    border-radius: var(--uw-r-card);
    color: var(--uw-color-text-primary);
    font-size: 11px;
}
.winbox .uw-commander-select,
.winbox .uw-strategy-select,
.wb-body select {
    background: var(--uw-color-bg-input, var(--uw-color-bg-tertiary));
    color: var(--uw-color-text-primary);
    border: 1.5px solid var(--uw-ink-soft);
    border-radius: var(--uw-r-md);
    padding: 5px 10px;
}
.winbox .uw-ship-info small,
.wb-body .uw-ship-info small {
    color: var(--uw-color-text-muted);
}
.winbox .uw-info-small,
.wb-body .uw-info-small {
    color: var(--uw-color-text-secondary);
}
.winbox .uw-operation-message,
.wb-body .uw-operation-message {
    background: var(--uw-color-bg-hover);
    border: 1px solid var(--uw-color-accent-dim);
    border-radius: var(--uw-r-md);
    color: var(--uw-color-accent);
    padding: 6px 10px;
}
.winbox .uw-btn-sm {
    padding: 4px 10px;
}