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

/* ============================================================================
 * 虚空仓库（2026-10-15 新增「个人 → 虚空仓库」页）
 * ----------------------------------------------------------------------------
 * 强化石卡片带档位立绘（gem-*.webp）；道具区用小卡横排。
 * ==========================================================================*/
.uw-vault-section {
    background: var(--uw-color-bg-secondary);
    border: 1px solid var(--uw-color-border-dim);
    border-radius: var(--uw-r-lg);
    padding: 12px 14px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.uw-vault-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    font-weight: 600;
    color: var(--uw-color-text-primary);
}
.uw-vault-head .fa-gem, .uw-vault-head .fa-cubes { color: var(--uw-color-accent); }
.uw-vault-hint { font-size: 12px; font-weight: 400; color: var(--uw-color-text-muted); }

/* --- 今日收获（2026-10-29）：仓库顶部一行"今日收获"，hover 出各档日限进度 ---
   为什么放在标题下方右侧：这是"今天还能刷多少"的信息，进页面第一眼就该看到，
   但不能占位太抢眼 → 只用一行虚线下划线的小字，详情全塞进悬浮提示。
   提示用纯 CSS（:hover / :focus-visible），不依赖 JS，键盘 Tab 也能看。 */
.uw-vault-today {
    display: flex;
    /* 靠左：右上是新手引导卡 / 系统面板的地盘（实测新号引导卡片正好盖住右上角），
       放左边才不会被浮层挡住 hover */
    justify-content: flex-start;
    margin: -2px 0 10px;
}
.uw-harvest {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: 12.5px;
    color: var(--uw-color-text-muted);
    cursor: help;
    outline: none;
}
.uw-harvest-label {
    color: var(--uw-color-accent);
    /* 虚线下划线 = "这里可以悬停看详情"的通用暗示；不能只用颜色区分（色弱/白天主题 accent-dim 偏浅） */
    border-bottom: 1px dashed var(--uw-color-accent);
    padding-bottom: 1px;
}
.uw-harvest:hover .uw-harvest-label,
.uw-harvest:focus-visible .uw-harvest-label { border-bottom-style: solid; }

.uw-harvest-tip {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 80;
    width: 268px;
    max-width: 84vw;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 12px;
    background: var(--uw-color-bg-tertiary);
    border: 1px solid var(--uw-color-border-dim);
    border-radius: var(--uw-r-md);
    box-shadow: 0 10px 26px var(--uw-shadow, rgba(0, 0, 0, .38));
    /* 默认不可见但保留布局（opacity/visibility 而不是 display:none，hover 才不会有跳变） */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .12s ease, transform .12s ease, visibility .12s;
    pointer-events: none;
}
.uw-harvest:hover .uw-harvest-tip,
.uw-harvest.is-open .uw-harvest-tip,
.uw-harvest:focus-visible .uw-harvest-tip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.uw-harvest-tip-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--uw-color-text-primary);
    letter-spacing: .5px;
    padding-bottom: 4px;
    margin-bottom: 1px;
    border-bottom: 1px solid var(--uw-color-border-dim);
}
.uw-harvest-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: var(--uw-color-text-primary);
}
.uw-harvest-tier { color: var(--uw-color-text-muted); }
.uw-harvest-num {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--uw-color-accent);
    white-space: nowrap;
}
/* 刷满的档位置灰 + 数字转成"欠"的语义色，一眼区分"还能刷"和"今天到头了" */
.uw-harvest-row.is-full .uw-harvest-num { color: var(--uw-color-danger); }
.uw-harvest-row.is-full .uw-harvest-tier { opacity: .65; }
.uw-harvest-sum {
    margin-top: 2px;
    padding-top: 5px;
    border-top: 1px dashed var(--uw-color-border-dim);
}
.uw-harvest-note {
    margin-top: 3px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--uw-color-text-muted);
}

/* ============================================================================
 * 通用悬浮提示（2026-11-02 玩家反馈：宝箱/世界Boss「能开出什么、多少概率」）
 * ----------------------------------------------------------------------------
 * 触发标签是行内虚线小字（虚线下划线 = 可悬停的通用暗示，不靠颜色单独传达）；
 * 面板 position:fixed + clamp() 贴边，既躲开祖先滚动容器的裁剪，也不会顶出视口。
 * 行用的是「名称 / 数量 / 概率」三列 flex，数字用 tabular-nums 对齐，扫读比纯文本快。
 * ==========================================================================*/
/* ⚠️ 类名前缀是 uw-htip（HoverTip）而**不是** uw-tip：
   Profile.razor 的会员权益「!」气泡占用了 .uw-tip / .uw-tip-panel / .uw-tip-row 一整套名字，
   而且带 `@media (max-width:768px) { .uw-tip { display:none } }` 与 `.uw-tip-row::before { content:"·" }`。
   撞名会让本组件在手机上整块消失、在桌面上被压成 18px 圆圈。故两套独立命名，互不干扰。 */
.uw-htip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--uw-color-accent);
    cursor: help;
    outline: none;
    vertical-align: baseline;
    /* 卡片/面板里的列宽很窄（仓库卡片 132px），中文会逐字换行把标签竖排 —— 强制单行 */
    white-space: nowrap;
}
.uw-htip-label {
    border-bottom: 1px dashed currentColor;
    padding-bottom: 1px;
}
.uw-htip:hover .uw-htip-label,
.uw-htip:focus-visible .uw-htip-label { border-bottom-style: solid; }

/* 胶囊变体（2026-11-03 玩家反馈）：银心黑洞面板里，行内虚线小字夹在状态行与积分行之间，
   蓝字 + 虚线看着像一条"没对齐的链接"，与面板里其它胶囊（改造中/受损/赛季规则）不是一套语言。
   面板类场景统一换成胶囊：虚线描边 + 次要文字色，hover 才转实线 + 高亮 —— 与「赛季结算规则」一致。
   仓库卡片里保持行内虚线（卡片窄、按钮多，再加描边会抢「开启」按钮的注意力）。 */
.uw-htip--pill {
    padding: 2px 9px;
    border: 1px dashed var(--uw-color-border-dim);
    border-radius: var(--uw-r-pill);
    background: transparent;
    color: var(--uw-color-text-secondary);
    font-weight: 600;
    vertical-align: middle;
}
.uw-htip--pill .uw-htip-label { border-bottom: none; padding-bottom: 0; }
.uw-htip--pill:hover,
.uw-htip--pill:focus-visible {
    border-style: solid;
    border-color: var(--uw-color-accent-dim);
    background: var(--uw-color-bg-hover);
    color: var(--uw-color-text-primary);
}

.uw-htip-panel {
    position: fixed;
    /* 显式声明盒模型：本文件不保证 `* { box-sizing: border-box }` 一定先加载，
       content-box 下 320px + 左右 padding/border 会多出 26px，clamp 的右侧留白就不够，概率列会被切掉 */
    box-sizing: border-box;
    /* 320px 面板 + 12px 右留白 = 332px；clamp 保证窄屏也不会顶出浏览器右侧 */
    left: clamp(8px, var(--tip-x, 16px), calc(100vw - 332px));
    /* 上限 38vh：配合 max-height 62vh，面板底边永远不越过视口底部 */
    top: clamp(8px, var(--tip-y, 96px), 38vh);
    z-index: 90;
    width: 320px;
    max-width: calc(100vw - 20px);
    max-height: min(430px, 62vh);
    overflow-y: auto;
    /* ⚠ 这里**不能**写 display:flex：面板带 popover 属性，UA 用
       `[popover]:not(:popover-open){display:none}` 在提升到顶层前把它藏起来；
       作者样式一旦声明 display 就会压过 UA 规则 → 提升前先按窗口内坐标闪一帧。
       显示状态统一由下面两条 :not([popover]) / :popover-open 规则负责。 */
    flex-direction: column;
    gap: 7px;
    padding: 10px 12px;
    background: var(--uw-color-bg-tertiary);
    border: 1px solid var(--uw-color-border-dim);
    border-radius: var(--uw-r-md);
    box-shadow: 0 12px 30px var(--uw-shadow, rgba(0, 0, 0, .42));
    color: var(--uw-color-text-primary);
    text-align: left;
    cursor: default;
    animation: uw-htip-in .12s ease-out;
}
/* 两种显示状态：
   ① 没有 popover 属性 = 老浏览器 / 顶层提升不可用的退化路径（窗口内 fixed，位置会偏但内容不缺）；
   ② :popover-open = 已进顶层（正常路径，坐标以视口为准，不被 WinBox 裁剪）。 */
.uw-htip-panel:not([popover]) { display: flex; }
.uw-htip-panel:popover-open { display: flex; }

/* 顶层态（2026-11-03 玩家反馈：提示离物品很远、还被 WinBox 挡住）
   ----------------------------------------------------------------------------
   为什么必须进顶层：BootstrapBlazor 的 .winbox{contain:layout size} 与 .wb-body{contain:strict}
   都是 position:fixed 后代的「定位包含块」——面板的 left/top 被按窗口原点解释（实测偏出 ~200px），
   并且被 .wb-body 的 overflow 裁掉（右侧概率列整列消失）。包含块在 CSS 里逃不掉，只能进 top layer。
   进顶层后 UA 会套一层默认样式（inset:0 / margin:auto / border / padding / background），
   这里逐项清掉，并把 left/top 重新按视口坐标写一遍（特异性高于上面那条基础规则）。 */
.uw-htip-panel[popover] {
    inset: auto;               /* 清 UA 的 inset:0，否则 left/top 被置成 auto，面板落回静态位置 */
    margin: 0;                 /* 清 UA 的 margin:auto（配合 inset:0 会把面板居中到视口中央） */
    left: clamp(8px, var(--tip-x, 16px), calc(100vw - 332px));
    top: clamp(8px, var(--tip-y, 96px), 38vh);
    width: 320px;
    max-width: calc(100vw - 20px);
    max-height: min(430px, 62vh);
    padding: 10px 12px;
    border: 1px solid var(--uw-color-border-dim);
    border-radius: var(--uw-r-md);
    background: var(--uw-color-bg-tertiary);
    color: var(--uw-color-text-primary);
    overflow-y: auto;
}
@keyframes uw-htip-in {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: none; }
}
/* 触屏钉住态的全屏遮罩：点任意位置收起（面板本身 z-index 更高，不受影响） */
.uw-htip-mask { position: fixed; inset: 0; z-index: 89; background: transparent; cursor: default; }

.uw-htip-title {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .4px;
    color: var(--uw-color-text-primary);
    padding-bottom: 5px;
    border-bottom: 1px solid var(--uw-color-border-dim);
}
.uw-htip-sub {
    font-size: 11px;
    line-height: 1.5;
    color: var(--uw-color-text-muted);
    margin-top: -2px;
}
.uw-htip-group { display: flex; flex-direction: column; gap: 3px; }
.uw-htip-group + .uw-htip-group { margin-top: 2px; }
.uw-htip-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: var(--uw-color-text-secondary);
    border-bottom: 1px dashed var(--uw-color-border-dim);
    padding-bottom: 3px;
}
.uw-htip-group-name { font-weight: 700; color: var(--uw-color-text-primary); }
.uw-htip-group-sub { color: var(--uw-color-text-muted); white-space: nowrap; }
.uw-htip-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--uw-color-text-primary);
}
.uw-htip-name { flex: 1; min-width: 0; }
.uw-htip-count {
    flex: none;
    color: var(--uw-color-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.uw-htip-pct {
    flex: none;
    min-width: 52px;
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--uw-color-accent);
    white-space: nowrap;
}
/* 稀有 / 关键掉落（传说模板、斩杀奖一类）：换成警示色，扫一眼就能定位 */
.uw-htip-row.is-hot .uw-htip-name,
.uw-htip-row.is-hot .uw-htip-pct { color: var(--uw-color-warning); }
.uw-htip-note {
    margin-top: 2px;
    padding-top: 5px;
    border-top: 1px dashed var(--uw-color-border-dim);
    font-size: 11px;
    line-height: 1.55;
    color: var(--uw-color-text-muted);
}
.uw-stone-art-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.uw-stone-art {
    width: 52px;
    height: 52px;
    border-radius: var(--uw-r-md);
    object-fit: cover;
    flex-shrink: 0;
    line-height: 0;
}
.uw-stone-art-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.uw-vault-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.uw-vault-item-card {
    width: 132px;
    background: var(--uw-color-bg-tertiary);
    border: 1px solid var(--uw-color-border-dim);
    border-radius: var(--uw-r-md);
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}
.uw-vault-item-art {
    width: 72px;
    height: 72px;
    border-radius: var(--uw-r-md);
    object-fit: cover;
    line-height: 0;
}
.uw-vault-item-art.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--uw-color-border-dim);
    color: var(--uw-color-text-muted);
    font-size: 20px;
    line-height: 1;
}
.uw-vault-item-name {
    font-size: 12px;
    color: var(--uw-color-text-primary);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.uw-vault-item-count { font-size: 12px; font-weight: 700; color: var(--uw-color-warning); }

/* 份额徽章（2026-10-24）：同一道具同时存在「可交易」与「绑定」份额时，
   不拆成两条卡片（数据上是同一条记录），而是在卡片里并排两个小徽章区分。
   可交易=绿（能卖）、绑定=灰+锁（还不能卖）；两个都给 number 等宽，方便一眼比较。 */
.uw-vault-shares {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    line-height: 1;
}
.uw-vault-share {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.uw-vault-share.tradable {
    color: var(--uw-color-success);
    background: rgba(60, 170, 110, 0.14);
    border: 1px solid rgba(60, 170, 110, 0.45);
}
.uw-vault-share.bound {
    color: var(--uw-color-text-muted);
    background: var(--uw-color-bg-secondary);
    border: 1px solid var(--uw-color-border-dim);
}
/* 份额筛选（道具区标题行右侧）：道具多时一键筛出"能卖的"或"还没解锁的" */
.uw-vault-filter {
    display: inline-flex;
    gap: 4px;
    margin-left: auto;
}
.uw-vault-filter-btn {
    padding: 2px 10px;
    font-size: 11.5px;
    border-radius: 999px;
    border: 1px solid var(--uw-color-border-dim);
    background: transparent;
    color: var(--uw-color-text-secondary);
    cursor: pointer;
}
.uw-vault-filter-btn:hover { border-color: var(--uw-color-accent); color: var(--uw-color-accent); }
.uw-vault-filter-btn.active {
    background: var(--uw-color-accent);
    border-color: var(--uw-color-accent);
    color: #fff;
}

/* ============================================================================
 * 军团商店卡片拥挤修复（2026-10-15 玩家反馈）
 * ----------------------------------------------------------------------------
 * 原卡片 min 150 / max 210 弹性行在满行时把价格块（划线价+折扣+现价+数量拆分）
 * 挤成两三行叠字。放宽卡片宽度、拉开行距，脚部价格与购买行允许换行。
 * ==========================================================================*/
.uw-org-shop-grid { gap: 12px; }
.uw-org-shop-grid .uw-shop-card {
    min-width: 224px;
    max-width: 256px;
    flex: 1 1 224px;
    padding: 12px 14px;
    gap: 8px;
}
.uw-org-shop-grid .uw-shop-foot {
    flex-wrap: wrap;
    row-gap: 6px;
}