/* ============================================================================
 * uw-guide-hud.css
 * 《放置：宇宙大战》卡通风格双主题 —— 新手引导聚光 + HUD角标 + 输入框聚焦
 *
 * 本文件从 uw-theme.css 拆分而来（2026-11-03），原始单文件 5204 行。
 * 拆分后由 index.html 逐个 <link> 引入，加载顺序必须保持变量文件在最前。
 * 所有规则只引用 uw-variables.css 里定义的 CSS 变量，不硬编码颜色。
 * ==========================================================================*/

/* ============================================================================
 * 新手引导聚光高亮（uw-guide.js）—— 2026-09-22 玩家反馈"引导全是文字"
 * ----------------------------------------------------------------------------
 * 引导卡片新增「前往」按钮打开目标页，本层把要操作的位置框出来：
 * 全屏压暗遮罩 + 目标处挖洞（一个带 9999px 大阴影的空框），洞口呼吸描边。
 * - 只改视觉不拦交互：pointer-events:none，WinBox 拖拽 / 弹窗 / 点击全部照常。
 * - 层级 1060：盖过 WinBox 窗口（z 100 档）与 Dock(900)；引导卡片/胶囊
 *   在下方覆盖为 1080，保证说明文字不被遮罩压暗。
 * - 遮罩色用写死的深色（两套主题下"压暗"语义一致），洞口描边跟主题 token。
 * ==========================================================================*/
.uw-guide-spotlight,
.uw-guide-spot-box {
    position: fixed;
    pointer-events: none;
}

.uw-guide-spotlight {
    inset: 0;
    z-index: 1060;
    display: none;
}

.uw-guide-spot-box {
    z-index: 1;
    border-radius: 10px;
    transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease;
    animation: uw-guide-breathe 1.6s ease-in-out infinite;
}

@keyframes uw-guide-breathe {
    0%, 100% {
        box-shadow:
            0 0 0 3px var(--uw-color-accent, #F59E0B),
            0 0 18px 2px rgba(245, 158, 11, .55),
            0 0 0 9999px rgba(15, 18, 26, .58);
    }
    50% {
        box-shadow:
            0 0 0 6px var(--uw-color-accent, #F59E0B),
            0 0 30px 6px rgba(245, 158, 11, .8),
            0 0 0 9999px rgba(15, 18, 26, .58);
    }
}

/* 引导卡片/胶囊压过高亮遮罩（原 1050 见 universe-war.css，此处同文件后加载胜出） */
.uw-tutorial-overlay,
.uw-tutorial-pill {
    z-index: 1080;
}

/* 「前往」按钮下方的说明小字（universe-war.css 的 .uw-tutorial-actions 为右对齐） */
.uw-tutorial-goto-tip {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--uw-color-text-muted, #8A93A3);
}

/* 邮件详情「充值到账邮件不可删」提示（Mail.razor 详情操作区，跟随删除按钮排版） */
.uw-mail-keep-note {
    font-size: 11px;
    line-height: 1.5;
    color: var(--uw-color-text-muted, #8A93A3);
    margin-right: 10px;
}

.uw-rank-badge {
    /* 唯一尺寸入口：改这一个值，徽章 / 数字 / 描边 / 胶囊全部等比跟随 */
    --uw-badge-size: 32px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--uw-badge-size);
    height: var(--uw-badge-size);
    vertical-align: middle;
}

.uw-rank-badge-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.uw-rank-badge-num {
    position: relative;
    font-family: var(--uw-font-num);
    font-weight: 700;
    /* 字号比例不是拍脑袋来的：12 张底版的中心色板实测占边长
       宽 32%~41% / 高 35%~43%（梯度法测边界）。这里取「按最小的一块都塞得下」的
       单一口径 —— 名次之间数字大小必须一致，逐枚调比例会让整张榜单忽大忽小。
       0.44 × 字体 0.72 字高 ≈ 0.317，对应最小色板（35%）还剩约 10% 余量 */
    font-size: calc(var(--uw-badge-size) * 0.44);
    line-height: 1;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    /* 描边宽度用 em 而不是再乘一次尺寸变量 —— 它天生就该跟着 font-size 走。
       注意 -webkit-text-stroke 是居中描边，所以这里给的值有一半会被下面的
       文字阴影与 paint-order 抵消，实际视觉描边约 0.11em */
    -webkit-text-stroke: 0.10em var(--uw-badge-ink);
    /* 先描边后填字，否则描边会从字芯里吃掉半个字形（窄笔画如 1 会明显变瘦）。
       万一某个浏览器不认 paint-order，下面的四向阴影会补回描边宽度，仍可读 */
    paint-order: stroke fill;
    text-shadow:
        -0.06em 0 0 var(--uw-badge-ink),
        0.06em 0 0 var(--uw-badge-ink),
        0 -0.06em 0 var(--uw-badge-ink),
        0 0.06em 0 var(--uw-badge-ink);
}

/* 10/11/12 两位数：瓶颈从高度换成宽度（两个字形并排），收到按最窄的一块
   （色板宽 32%）仍有余量。高度上会偏松，这是六边形色板塞两位数的固有代价 */
.uw-rank-badge--wide .uw-rank-badge-num {
    font-size: calc(var(--uw-badge-size) * 0.32);
}

/* 超出底版档数的名次：回归纯数字胶囊（走页面主题变量，与榜单行底色一致） */
.uw-rank-badge--plain {
    background-color: var(--uw-color-bg-tertiary);
    border: 1px solid var(--uw-color-border-dim);
    border-radius: 50%;
    color: var(--uw-color-text-secondary);
    font-family: var(--uw-font-num);
    font-size: calc(var(--uw-badge-size) * 0.40);
    font-weight: 600;
    line-height: 1;
}

/* 领奖台前三名：徽章本身已经区分了金/银/铜，这里只补一圈同色辉光把它从卡片底上托起来 */
.uw-leaderboard-podium-item .uw-rank-badge {
    margin: 2px 0;
}

/* ============================================================================
 * 【全站游戏化】Client 全局视觉层
 * ----------------------------------------------------------------------------
 * 依据 .workbuddy/tmp/css-audit/audit_css.py 的审计：两套样式表 333 条带圆角的规则里，
 * 144 条（43%）仍是「圆角<=4px 且 描边<=1px」的 Web 表单配方。按钮一族
 * （本文件上方 .uw-btn-* / uw-theme 里那组 border-radius: var(--uw-r-pill)）早前
 * 已经游戏化过，所以这一层的任务是把剩下的容器 / 输入 / 弹层 / 标签 / 列表补齐，
 * 让 26 个页面一次性换掉「后台管理面板」的观感。
 *
 * 分工原则（游戏 UI 的通用做法，三者共用同一套 token）：
 *   凸  按钮 / 卡片 / 弹层  → 大圆角 + 深描边 + 顶部内高光 + 底部实心厚度
 *   凹  输入框 / 道具槽     → 大圆角 + 深描边 + 顶部内阴影（像刻进去）
 *   平  列表行             → 中圆角 + 极淡顶部高光（不做厚度，长列表才不吵）
 *
 * 只改几何（圆角 / 描边宽 / 投影 / 内边距），**不动任何 color 与 background-color**
 * —— 全站配色是逐条算过对比度的，这里一律不碰；状态色描边（tag-success 之类）
 * 也只改宽度不改颜色，语义得以保留。
 * 明确不动：进度条 / 分割饰条 / 滚动条 / 代码块（这些本来就该是细的）。
 * ==========================================================================*/
:root {
    --uw-r-xl: 20px;                      /* 大面板 / 弹窗 */
    --uw-r-card: 16px;                    /* 卡片 / 区块 */
    --uw-r-ctl: 12px;                     /* 按钮 / 输入 / 选项 */
    --uw-r-row: 10px;                     /* 列表行 */
    --uw-lift: 3px;                       /* 凸起的底部实心厚度 */
    --uw-lift-sm: 2px;
    --uw-drop: rgba(122, 92, 64, 0.30);   /* 厚度色（白天：暖棕影）*/
    --uw-hi: rgba(255, 255, 255, 0.55);   /* 顶部内高光 */
    --uw-lo: rgba(122, 92, 64, 0.16);     /* 内阴影（凹槽）*/
    --uw-edge: 2px;                       /* 描边宽度 */
    --uw-edge-color: #4A3421;             /* 描边色：与徽章位图的深色外描边同调 */
}
html[data-theme="night"] {
    --uw-drop: rgba(0, 0, 0, 0.45);
    --uw-hi: rgba(255, 255, 255, 0.16);
    --uw-lo: rgba(0, 0, 0, 0.28);
    --uw-edge-color: #14103A;
}

/* ── 凹：输入控件 ─────────────────────────────────────────────────────────
   原来是「1px 描边 + 2px 圆角」的网页表单。游戏里输入框应该是刻进面板的凹槽，
   所以用内阴影而不是底部厚度，和按钮的凸起形成对比。 */
.uw-input,
.uw-field input,
.uw-field select,
.uw-field textarea,
.uw-chat-input,
.uw-exchange-input,
.uw-commander-select,
.uw-strategy-select,
.uw-galaxy-select,
.uw-planet-select,
.uw-inherit-code-input,
.uw-build-count input,
.uw-login-field input,
.uw-profile-password-row input,
.uw-trade-list-form .uw-field input,
.uw-trade-list-form .uw-field select,
.uw-faction-create-form .uw-field input,
.uw-fleet-create-form input,
.uw-fleet-create-planet select,
.uw-friends-add .uw-chat-input,
.uw-modal .uw-field input {
    border-width: var(--uw-edge);
    border-color: var(--uw-edge-color);
    border-radius: var(--uw-r-ctl);
    box-shadow: inset 0 3px 5px var(--uw-lo);
    padding: 7px 12px;
}

/* ── 编组下拉——按品质分类（optgroup） ──────────────────────────── */
.uw-commander-select optgroup {
    font-weight: 700;
    font-size: 12px;
}
.uw-commander-select optgroup option {
    font-weight: 400;
    font-size: 13px;
    padding-left: 14px;
}

/* ── 凸：卡片 / 区块（确定是「容器」的那批，给完整立体处理）──────────── */
.uw-faction-card,
.uw-faction-create-card,
.uw-friend-card,
.uw-legion-card,
.uw-legion-create,
.uw-inherit-card,
.uw-inherit-result,
.uw-placeholder-card,
.uw-presence-card,
.uw-tutorial-card,
.uw-season-inherit-box,
.uw-season-info-item,
.uw-season-claim-result,
.uw-battle-detail-modal,
.uw-battle-section,
.uw-battle-loot-info,
.uw-defense-slot,
.uw-defense-ship-item,
.uw-slot-ship,
.uw-warehouse-ship,
.uw-construct-item,
.uw-readonly-hull,
.uw-blueprint-preview,
.uw-offline-reward-item,
.uw-offline-reward-duration,
.uw-signin-stat {
    border-width: var(--uw-edge);
    border-color: var(--uw-edge-color);
    border-radius: var(--uw-r-card);
    box-shadow: inset 0 2px 0 var(--uw-hi), 0 var(--uw-lift) 0 var(--uw-drop);
}

/* ── 这些名字像标题/摘要，可能只是文本块而不是卡片。
      所以只给圆角与更粗的描边，**不加底部厚度**——万一它就是个段落，
      也不会凭空多出一个框；等实际页面看过后再决定要不要升到上一档。 */
.uw-faction-header,
.uw-faction-hegemony-cond,
.uw-faction-hegemony-result,
.uw-profile-header,
.uw-battle-summary,
.uw-battle-victory,
.uw-battle-fleet,
.uw-operation-message {
    border-width: var(--uw-edge);
    border-radius: var(--uw-r-card);
}

/* ── 凸：列表容器（圆角更大，因为它包着一堆行）──────────────────────────
   .uw-formation-left / .uw-mail-body / .uw-galaxy-* 刻意排除：
   前者是纯布局列，后两者是正文与整幅星图，凭空加框反而突兀。 */
.uw-commander-list,
.uw-commander-recruit,
.uw-building-list,
.uw-building-construct,
.uw-fleet-list,
.uw-fleet-create,
.uw-mail-list,
.uw-mail-detail,
.uw-legion-member-list,
.uw-trade-list,
.uw-trade-list-form,
.uw-leaderboard-table,
.uw-chat-messages,
.uw-manage-section,
.uw-shipyard-section {
    border-width: var(--uw-edge);
    border-color: var(--uw-edge-color);
    border-radius: var(--uw-r-card);
    box-shadow: 0 var(--uw-lift) 0 var(--uw-drop);
}

/* ── 平：列表行 / 条目（不做厚度，否则长列表全是横向条纹）────────────── */
.uw-faction-member-row,
.uw-faction-diplo-row,
.uw-faction-app-row,
.uw-galaxy-planet-item,
.uw-cloud-planet-item,
.uw-fleet-galaxy-chip,
.uw-formation-cell,
.uw-formation-slot,
.uw-planet-action,
.uw-planet-action-defense,
.uw-planet-event,
.uw-warehouse-action,
.uw-context-item,
.uw-part-option,
.uw-presence-option,
.uw-event-option,
.uw-event-btn-close,
.uw-event-error,
.uw-trade-filter,
.uw-trade-filter-btn,
.uw-trade-empty-opts,
.uw-trade-warning,
.uw-trade-bid-info,
.uw-chat-channel-btn,
.uw-chat-input-bar .uw-chat-send,
.uw-social-tab-badge,
.uw-achievement-card,
.uw-ai-research-bar {
    border-width: var(--uw-edge);
    border-color: var(--uw-edge-color);
    border-radius: var(--uw-r-row);
    box-shadow: inset 0 1px 0 var(--uw-hi);
}

/* ── 凸：浮层（菜单 / 下拉 / Toast）—— 要「浮」起来，所以额外加扩散影 ── */
.uw-context-menu,
.dropdown-menu,
.toast {
    border-width: var(--uw-edge);
    border-color: var(--uw-edge-color);
    border-radius: var(--uw-r-card);
    box-shadow: 0 var(--uw-lift) 0 var(--uw-drop), 0 12px 26px rgba(0, 0, 0, 0.26);
}

/* 【2026-10-19 修复】Toast 只做提示，必须「不吃点击」。
   Client/Program.cs 把 ToastPlacement 设成了屏幕正中（MiddleCenter），BootstrapBlazor 只给外层
   .toast-container 加了 pointer-events:none，**内层 .toast 仍是 auto** → 每次操作后约 3 秒内
   屏幕正中 350×77 区域内的按钮全部点不动（实测吃掉商城「−/1/＋/兑换」4 个点击，
   点「兑换」命中的是 div.toast-body）。手机上正中央就是内容区与拇指区，连续操作必中招。
   这里显式关掉整条提示链的点击（关闭按钮单独放行）。 */
.toast,
.toast-body,
.toast-header {
    pointer-events: none;
}

.toast .btn-close,
.toast .close,
.toast button {
    pointer-events: auto;
}

/* ── 胶囊：标签 / 徽记 ────────────────────────────────────────────────
   只改几何与字重，**不动 border-color** —— 这些标签的描边色承载状态语义
   （成功/危险/势力色），改了会把语义抹平。 */
.uw-chip,
.uw-tag,
.uw-tag-enemy,
.uw-tag-protect,
.uw-tag-free,
.uw-tag-gas,
.uw-tag-rocky,
.uw-tag-state,
.uw-trade-tag,
.uw-faction-tag,
.uw-sub-tab,
.uw-tutorial-badge,
.uw-sach-cat,
.uw-tutorial-min,
.uw-tutorial-pill,
.uw-social-tab-badge {
    border-width: 2px;
    border-radius: var(--uw-r-pill);
    font-weight: 700;
}

/* ── 表格（BootstrapBlazor，所有列表页都在用）────────────────────────────
   只加圆角与加粗的表头分隔线，**不加 overflow: hidden** —— 表格里常有
   操作菜单 / 悬浮提示，裁切会把它们切掉；而且粘性表头也依赖父级不裁切。 */
.table {
    border-radius: var(--uw-r-card);
}
.table > thead > tr > th {
    border-bottom-width: var(--uw-edge);
    border-bottom-color: var(--uw-edge-color);
    font-weight: 700;
}

/* ── 页面标题：去掉霓虹辉光（那是科幻，不是卡通），换成一根圆头色条 ──
   .uw-page-title 被 25 个页面用到，是全站最显眼的一处。 */
.uw-page-title {
    text-shadow: none;
    border-bottom: none;
    padding-bottom: 10px;
    position: relative;
}
.uw-page-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 4px;
    border-radius: var(--uw-r-pill);
    background: var(--uw-color-accent);
}

/* ── 标签页：从「下划线指示」改成「凸起的胶囊」──────────────────────── */
.uw-social-tabs {
    border-bottom: none;
    gap: 8px;
    flex-wrap: wrap;
}
.uw-social-tab {
    border: var(--uw-edge) solid var(--uw-edge-color);
    border-bottom-width: var(--uw-edge);
    border-radius: var(--uw-r-pill);
    background-color: var(--uw-color-bg-tertiary);
    padding: 6px 16px;
    box-shadow: 0 var(--uw-lift-sm) 0 var(--uw-drop);
}
.uw-social-tab.active {
    background-color: var(--uw-color-bg-hover);
    box-shadow: inset 0 2px 0 var(--uw-hi);
}

/* ── 弹窗：原 20px 内边距 + 2px 圆角，四周补上厚度让它像一块实体牌 ── */
.uw-modal {
    border-width: var(--uw-edge);
    border-color: var(--uw-edge-color);
    border-radius: var(--uw-r-xl);
    box-shadow: 0 var(--uw-lift) 0 var(--uw-drop), 0 18px 40px rgba(0, 0, 0, 0.35);
}

/* ── 空态 / 加载态：34 与 27 个文件在用，最容易被忽略但出现频率最高 ── */
.uw-empty {
    border-radius: var(--uw-r-card);
    border: var(--uw-edge) dashed var(--uw-edge-color);
    background-color: var(--uw-color-bg-secondary);
}

/* ── BootstrapBlazor 的 Dialog（.modal 系列）─────────────────────────────
   审计 v2 列出 59 条「面板化但完全没有圆角声明」的规则，其中 .modal 是唯一
   成规模的大面积漏网 —— 舰队编队、建筑详情等弹窗都走它，而 WinBox 那边
   （本文件 939 行）早就有 14px 圆角了，两边观感一直不一致。
   overflow: hidden 是让 header/footer 跟着外层圆角一起裁切。 */
.modal .modal-content {
    border-width: var(--uw-edge);
    border-color: var(--uw-edge-color);
    border-radius: var(--uw-r-xl);
    overflow: hidden;
    box-shadow: 0 var(--uw-lift) 0 var(--uw-drop), 0 18px 40px rgba(0, 0, 0, 0.3);
}
.modal .modal-header {
    border-bottom-width: var(--uw-edge);
    border-bottom-color: var(--uw-edge-color);
}
.modal .modal-footer {
    border-top-width: var(--uw-edge);
    border-top-color: var(--uw-edge-color);
}

/* ── 审计里其余几处小漏网：只补圆角，不加厚度（都不是独立卡片）── */
.uw-faction-sub-content,
.uw-season-gate,
.uw-blueprint-designer,
.uw-tutorial-hint,
.uw-sach-card,
.uw-battle-result {
    border-radius: var(--uw-r-card);
}

/* ── HUD 角标：保留概念，换一套画法 ────────────────────────────────────
   universe-war.css:7875-7915 给六个主容器卡片配了一对 14×14 的青色 L 形角标，
   是原始「暗黑科幻」语言留下来的，还用 border-radius: 2px !important 把卡片
   锁成直角好让角标对齐 —— 这就是「卡片是直的、按钮是圆的」两套语言打架的源头。
   （该 !important 已在上游摘除，半径改由 --uw-r-card 控制。）

   角标这个想法本身不坏：它把面板「框」住了，是有信息量的装饰。
   卡通化的正确做法不是删掉它，而是换执行：
     青色霓虹 → 与徽章同源的暖棕深描边（--uw-edge-color）
     1~2px 细线 → 3px 粗线
     直角收尾 → 跟着卡片圆角走，与卡片边缘咬合
     14px → 18px（粗线要更长的臂才不显局促） */
.uw-modal::before,
.uw-manage-section::before,
.uw-shop-card::before,
.uw-commander-card::before {
    width: 18px;
    height: 18px;
    top: calc(var(--uw-edge) * -1);
    left: calc(var(--uw-edge) * -1);
    border-top: 3px solid var(--uw-edge-color);
    border-left: 3px solid var(--uw-edge-color);
    border-top-left-radius: var(--uw-r-card);
    opacity: 1;
}

.uw-modal::after,
.uw-manage-section::after,
.uw-shop-card::after,
.uw-commander-card::after {
    width: 18px;
    height: 18px;
    bottom: calc(var(--uw-edge) * -1);
    right: calc(var(--uw-edge) * -1);
    border-bottom: 3px solid var(--uw-edge-color);
    border-right: 3px solid var(--uw-edge-color);
    border-bottom-right-radius: var(--uw-r-card);
    opacity: 1;
}

/* ── 输入框聚焦：去掉科幻霓虹辉光 ────────────────────────────────────────
   universe-war.css:7917-7925 聚焦时打一圈青色 glow，还带 !important，
   会盖掉上面「刻进面板」的内阴影。卡通语言里聚焦该是「描边变色」而不是发光，
   所以保留主色描边，把辉光换成凹槽内阴影。同权重 !important + 本文件后加载 = 胜出。 */
.uw-page input[type="text"]:focus,
.uw-page input[type="number"]:focus,
.uw-page input[type="password"]:focus,
.uw-page textarea:focus {
    border-color: var(--uw-color-accent) !important;
    box-shadow: inset 0 3px 5px var(--uw-lo) !important;
}