/* ============================================================================
 * uw-starmap3d.css
 * 3D 星图专用样式（从 StarMap.razor 内联 <style> 提取，2026-11-05 迁移）
 * ==========================================================================*/

.uw-starmap3d {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 520px;
    overflow: hidden;
    border-radius: 12px;
    background: #0A0E22;
}

.uw-starmap3d canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
}

.uw-starmap3d-hover {
    position: absolute;
    display: none;
    pointer-events: none;
    z-index: 5;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(10, 14, 34, .88);
    border: 1px solid rgba(124, 184, 255, .35);
    color: #DCE6FF;
    font-size: 12px;
    white-space: nowrap;
}

/* 悬浮提示里的名次图标（装备玩家的星系名字前缀，DOM 构建追加的 <img>） */
.uw-starmap3d-hover .uw-hover-rankicon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    vertical-align: -3px;
    margin-right: 5px;
}

.uw-starmap3d-hint {
    position: absolute;
    top: 64px;
    left: 14px;
    z-index: 5;
    font-size: 12px;
    color: rgba(220, 230, 255, .55);
    pointer-events: none;
}

/* 设备分流：桌面文案默认显示；移动端由 uw-theme.css 的 data-device 规则对调 */
.uw-starmap3d-hint .uw-starmap3d-hint-mobile { display: none; }

/* ---------- 左上角星系搜索跳转 ---------- */
.uw-smsearch {
    position: absolute;
    top: 12px;
    left: 14px;
    z-index: 6;
    width: 250px;
    font-size: 12px;
}

.uw-smsearch-row {
    display: flex;
    gap: 6px;
}

.uw-smsearch-input {
    flex: 1;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid rgba(124, 184, 255, .35);
    background: rgba(10, 14, 34, .82);
    color: #DCE6FF;
    outline: none;
    font-size: 12px;
}

.uw-smsearch-input::placeholder { color: rgba(220, 230, 255, .4); }

.uw-smsearch-input:focus { border-color: #7CB8FF; }

.uw-smsearch-go {
    flex: none;
    width: 32px;
    border-radius: 10px;
    border: 1px solid rgba(124, 184, 255, .35);
    background: rgba(124, 184, 255, .18);
    color: #DCE6FF;
    cursor: pointer;
}

.uw-smsearch-go:disabled { opacity: .4; cursor: not-allowed; }

.uw-smsearch-go:hover:not(:disabled) { background: rgba(124, 184, 255, .32); }

.uw-smsearch-list {
    margin-top: 6px;
    max-height: 300px;
    overflow-y: auto;
    border-radius: 10px;
    border: 1px solid rgba(124, 184, 255, .3);
    background: rgba(10, 14, 34, .92);
    padding: 4px;
}

.uw-smsearch-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 9px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #DCE6FF;
    cursor: pointer;
    text-align: left;
}

.uw-smsearch-item:hover { background: rgba(124, 184, 255, .16); }

.uw-smsearch-item.picked { background: rgba(255, 200, 87, .22); }

.uw-smsearch-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.uw-smsearch-meta {
    flex: none;
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 11px;
    color: rgba(220, 230, 255, .6);
}

.uw-smsearch-none { padding: 8px 10px; color: rgba(220, 230, 255, .5); }

/* ---------- 我的星系 / 我的舰队 工具按钮（搜索定位旁） ---------- */
.uw-smtool {
    flex: none;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(124, 184, 255, .35);
    background: rgba(10, 14, 34, .82);
    color: #DCE6FF;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
}

.uw-smtool:hover { background: rgba(124, 184, 255, .32); }

.uw-smtool.open {
    background: rgba(255, 200, 87, .28);
    border-color: #FFC855;
}

/* 面板原是「相对 Dock 分组向上弹」的绝对定位；挂到搜索框下后改为文档流内向下排 */
.uw-smtool-pop { position: relative; margin-top: 6px; }

.uw-smtool-pop .uw-myg,
.uw-smtool-pop .uw-myf {
    position: static;
    width: 100%;
}


.uw-starmap3d-loading,
.uw-starmap3d-fallback {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #B9C4E8;
    background: rgba(10, 14, 34, .82);
    font-size: 15px;
}

.uw-starmap3d-fallback .fa-satellite {
    font-size: 40px;
    color: #7CB8FF;
}

.uw-starmap3d-fallback-tip {
    font-size: 13px;
    color: #8E9AC4;
}

.uw-starmap3d-fallback-tip a {
    color: #7CB8FF;
}

/* ---------- 3D/2D 视图切换按钮（右上角） ---------- */
.uw-starmap3d-mode-btn {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 6;
    min-width: 44px;
    height: 30px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid rgba(124, 184, 255, .35);
    background: rgba(10, 14, 34, .82);
    color: #DCE6FF;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}

.uw-starmap3d-mode-btn:hover {
    background: rgba(124, 184, 255, .28);
    border-color: #7CB8FF;
}

/* ---------- 星系面板(uw-smsp) ----------
 * 2026-11-06：这里原有的一整套「影子面板样式」（.uw-smsp / -header / -stats / -section /
 * -planet-card / -msg / -fleet-item …）与 Blazor 共享的 universe-war.css 重名且互相覆盖，
 * 最典型的就是 .uw-smsp-stats 被写成 `display:flex; flex-wrap:wrap`，把「星球数量 / 我方舰队 /
 * 相邻星系」几行挤到同一行里 —— 面板观感从此和 Blazor 长得不一样。
 *
 * 现在面板完全使用 Blazor 的类名（-head / -stats / -kv / -sec / -badge / -planet），
 * 因此这套影子样式整段删除；只保留 Blazor 里没有的 .uw-smsp-locked / 黑洞附属样式。
 * ------------------------------------------------------------------------- */

.uw-smsp-locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 10px;
    color: #8E9AC4;
    text-align: center;
}

.uw-smsp-loading { padding: 16px; text-align: center; color: #8E9AC4; font-size: 12px; }

.uw-smsp-blackhole { border-color: rgba(180, 120, 255, .4); }

.uw-smsp-bh-info {
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(180, 120, 255, .1);
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 1.6;
}

.uw-smsp-bh-note {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(124, 184, 255, .06);
    font-size: 11px;
    color: #8E9AC4;
}

/* 通用小按钮 */
.uw-btn-sm {
    padding: 3px 10px !important;
    font-size: 12px !important;
    height: auto !important;
    min-height: 26px;
}

/* 弹窗关闭按钮 */
.uw-modal-close {
    flex: none;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--uw-color-text-secondary, #8E9AC4);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}

.uw-modal-close:hover {
    background: rgba(255, 255, 255, .1);
    color: var(--uw-color-text-primary, #fff);
}

/* 星球卡片：信息区 + 操作区两段式 */
.uw-smsp-planet-card {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}

.uw-smsp-planet-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.uw-smsp-planet-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.uw-smsp-planet-mine {
    font-size: 11px;
    color: #7FDBCA;
    font-weight: 600;
}

.uw-smsp-planet-note {
    font-size: 11px;
    color: #8E9AC4;
}

/* ============================================================================
 * 星图右上工具栏（搜索框 + 视图切换）
 * 2026-11-06：TS 版星图一直用 .uw-starmap3d-toolbar / -search 两个类名，但从未定义样式，
 * 结果搜索框直接渲染在左上角空白处（无边框、无底、无定位），玩家基本看不到。
 * 这里按 Blazor 搜索栏（.uw-smsearch-input / .uw-smtool）的视觉补齐：深空半透明胶囊。
 * ==========================================================================*/
.uw-starmap3d-toolbar {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 6px;
}

.uw-starmap3d-toolbar input.uw-starmap3d-search,
input.uw-starmap3d-search {
    width: 210px;
    height: 32px;
    box-sizing: border-box;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(124, 184, 255, .35);
    background: rgba(10, 14, 34, .82);
    color: #DCE6FF;
    font-size: 12px;
    outline: none;
    transition: border-color .15s ease, background .15s ease;
}

.uw-starmap3d-toolbar input.uw-starmap3d-search::placeholder,
input.uw-starmap3d-search::placeholder {
    color: rgba(220, 230, 255, .45);
}

.uw-starmap3d-toolbar input.uw-starmap3d-search:focus,
input.uw-starmap3d-search:focus {
    border-color: #7CB8FF;
    background: rgba(10, 14, 34, .92);
}

/* 星系搜索候选列表：对齐 Blazor .uw-smsearch-list，绝对定位到输入行正下方 */
.uw-starmap3d-toolbar .uw-smsearch-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 7;
    width: 250px;
    box-sizing: border-box;
    margin-top: 0;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}

/* 搜索定位按钮：与 .uw-smtool 保持同一尺寸 */
.uw-starmap3d-toolbar .uw-smsearch-go {
    flex: none;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 10px;
}

/* ============================================================================
 * 星系面板打开时（html[data-smsp]）的避让
 * 2026-11-06：右侧面板宽 330、贴右 12；底部图例是居中定位，最右一两项会被面板盖住；
 * 新手引导卡更是固定在 right:16px，正好整块压在面板上。开面板时统一往左让。
 * ==========================================================================*/
html[data-smsp="1"] .uw-guide-card {
    right: 362px;
}

/* ============================================================================
 * 左上角「定位」弹层（我的星球 / 我的舰队）
 * 2026-11-06：对齐 Blazor StarMap.razor 的 .uw-smsearch 一行（搜索 + 定位星球 + 定位舰队 + 2D/3D）。
 * .uw-smtool 按钮样式已在上文定义，这里只补下拉列表。
 * ==========================================================================*/
.uw-starmap3d-pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 6;
    width: 250px;
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid rgba(124, 184, 255, .35);
    background: rgba(10, 14, 34, .95);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}

.uw-starmap3d-pop-note {
    padding: 10px 8px;
    font-size: 12px;
    color: rgba(220, 230, 255, .55);
    text-align: center;
}

.uw-starmap3d-pop-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 9px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #DCE6FF;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
}

.uw-starmap3d-pop-item:hover {
    background: rgba(124, 184, 255, .22);
}

.uw-starmap3d-pop-name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.uw-starmap3d-pop-sub {
    flex: none;
    font-size: 11px;
    color: rgba(220, 230, 255, .5);
    white-space: nowrap;
}

