/* ═══════════════════════════════════════════════════════════════════════════
   components.css —— 卡牌 / 卡牌菜单 / 卡牌详情 / 晶核 / 提示条
   ───────────────────────────────────────────────────────────────────────────
   六色（红紫黄蓝白绿）在这里的分工：
     · 红 / 紫 = 结构色（己方・对手、主行动、选中）
     · 黄 / 蓝 / 白 / 绿 = **信息色**：属性条、BP、晶核、状态点
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══ 卡牌 ═══════════════════════════════════════════════════════════════ */
.card {
    position: relative;
    flex: none;
    width: var(--card-w);
    height: var(--card-h);
    border-radius: 0;                 /* 直角（原 5px） */
    background: var(--grad-card);
    border: 1px solid var(--c-line);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .55);
    overflow: hidden;
    user-select: none;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.card--sm { width: var(--card-w-sm); height: var(--card-h-sm); }

/* 可点卡牌：抬起一点，让手指知道"这张能点" */
.card--act { cursor: pointer; }
.card--act:active { transform: translateY(-2px) scale(1.02); border-color: var(--c-red); box-shadow: 0 0 18px rgba(255, 43, 78, .5); }

/* 选中态：红色描边 + 外光 */
.card--sel {
    border-color: var(--c-red);
    box-shadow: 0 0 0 2px rgba(255, 43, 78, .35), 0 0 22px rgba(255, 43, 78, .5);
    transform: translateY(-4px);
}
/* 横置（疲软/已行动）：整体转 90°，并靠 margin 把转出去的那截在布局里占回来 */
.card--rest { transform: rotate(90deg); margin-inline: calc(var(--card-w) * .23); }
.card--rest.card--act:active { transform: rotate(90deg) scale(1.02); }

.card__img { width: 100%; height: 100%; object-fit: cover; }

/* 左上：Lv */
.card__lv {
    position: absolute;
    left: 0; top: 0;
    min-width: 15px;
    padding: 1px 3px;
    border-bottom-right-radius: 0;
    background: rgba(7, 6, 10, .82);
    border-right: 1px solid var(--c-line-soft);
    border-bottom: 1px solid var(--c-line-soft);
    font-family: var(--font-num);
    font-size: var(--fs-2xs);
    font-weight: 800;
    text-align: center;
}
.card__lv--3 { color: var(--c-yellow); }

/* 右上：费用（红底小方块，最醒目） */
.card__cost {
    position: absolute;
    right: 0; top: 0;
    min-width: 17px;
    padding: 1px 4px;
    border-bottom-left-radius: 6px;
    background: var(--grad-red);
    font-family: var(--font-num);
    font-size: var(--fs-2xs);
    font-weight: 900;
    text-align: center;
    color: #fff;
}

/* 底部：BP + 晶核 */
.card__foot {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    padding: 2px 3px;
    background: linear-gradient(0deg, rgba(7, 6, 10, .94), rgba(7, 6, 10, .55) 70%, transparent);
}
.card__bp {
    font-family: var(--font-num);
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--c-yellow);
    text-shadow: 0 1px 3px #000;
}
.card__bp--none { color: var(--c-faint); }

/* 晶核：小圆点排 */
.card__cores { display: flex; align-items: center; gap: 2px; }
.core {
    width: 6px; height: 6px;
    /* 官方晶核是**菱形**：rotate 45° 得到，也顺带呼应"全界面少圆角" */
    transform: rotate(45deg);
    background: radial-gradient(circle at 32% 30%, #fff6c9, var(--c-yellow) 60%, #a97b00);
    box-shadow: 0 0 5px rgba(255, 198, 61, .8);
    flex: none;
}
.core--soul {
    background: radial-gradient(circle at 32% 30%, #ffd9de, var(--c-red) 60%, #7d0a1d);
    box-shadow: 0 0 6px rgba(255, 43, 78, .9);
}

/* 属性条（战徽六色 —— 信息色，不是装饰色）*/
.card__syms {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    display: flex;
    flex-direction: column;
}
.card__sym { flex: 1; }
.sym--red    { background: var(--c-red); }
.sym--purple { background: var(--c-purple); }
.sym--green  { background: var(--c-green); }
.sym--white  { background: var(--c-white); }
.sym--yellow { background: var(--c-yellow); }
.sym--blue   { background: var(--c-blue); }

/* ══ 卡背（对手手牌 / 卡组）══════════════════════════════════════════ */
.card--back {
    background:
        repeating-linear-gradient(45deg, rgba(162, 77, 255, .16) 0 6px, transparent 6px 12px),
        linear-gradient(150deg, #2a1b4d, #120b22);
    border-color: rgba(162, 77, 255, .42);
}
.card--back::after {
    content: '';
    position: absolute;
    inset: 22%;
    border: 1px solid rgba(217, 187, 135, .42);
    border-radius: 0;                 /* 方框（原圆形）—— 全界面直角口径 */
    box-shadow: inset 0 0 14px rgba(155, 92, 240, .35);
}

/* ══ 卡牌操作菜单 ═══════════════════════════════════════════════════════
   手机：从底部升起的 sheet（手指够得着，不遮住被点的卡）
   桌面：浮在卡旁边的 popup（鼠标点完立刻就位，不用移动视线）
   ═══════════════════════════════════════════════════════════════════════ */
.scrim {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(4, 3, 7, .68);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: fade .14s ease;
}
@keyframes fade { from { opacity: 0; } }

.sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 91;
    max-height: 76dvh;
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom);
    border-radius: 0;                 /* 直角（原上圆角） */
    border: 1px solid var(--c-line);
    border-bottom: 0;
    background: linear-gradient(180deg, #232120, #0c0b0a);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, .7);
    animation: sheet-up .2s cubic-bezier(.22, 1, .36, 1);
}
@keyframes sheet-up { from { transform: translateY(100%); } }

.sheet__grip { flex: none; padding: 8px 0 4px; display: grid; place-items: center; }
.sheet__grip i { display: block; width: 40px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .22); }

.sheet__head {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--c-line-soft);
}
.sheet__thumb {
    flex: none;
    width: var(--card-w-sm);
    height: var(--card-h-sm);
    border-radius: 0;
    overflow: hidden;
    border: 1px solid var(--c-line);
}
.sheet__meta { min-width: 0; }
.sheet__name { font-size: var(--fs-md); font-weight: 700; }
.sheet__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

.sheet__body {
    flex: 1;
    min-height: 0;
    padding: var(--sp-3) var(--sp-4) var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

/* 菜单项：手机上是整行大按钮（≥44px） */
.mitem {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    min-height: var(--tap-min);
    padding: 0 var(--sp-4);
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-line-soft);
    background: rgba(255, 255, 255, .045);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-align: left;
}
.mitem:hover { background: rgba(162, 77, 255, .16); border-color: var(--c-line); }
.mitem__ico { flex: none; width: 22px; display: grid; place-items: center; color: var(--c-purple-soft); }
.mitem__k { margin-left: auto; font-size: var(--fs-2xs); color: var(--c-faint); }
.mitem--danger { border-color: var(--c-line-red); }
.mitem--danger .mitem__ico { color: var(--c-red-soft); }
.mitem--primary { background: var(--grad-red); border-color: rgba(255, 107, 131, .5); }
.mitem--primary .mitem__ico { color: #fff; }
.mitem[disabled] { opacity: .42; pointer-events: none; }

/* ══ 卡牌详情 ═══════════════════════════════════════════════════════════ */
.detail {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: flex;
    flex-direction: column;
    background: rgba(4, 3, 7, .9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: fade .16s ease;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.detail__head {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--c-line-soft);
}
.detail__name { flex: 1; min-width: 0; font-size: var(--fs-md); font-weight: 700; }
.detail__body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-4);
    overflow-y: auto;
}
.detail__imgwrap {
    flex: none;
    align-self: center;
    width: min(72vw, 320px);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--c-line);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
}
.detail__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: var(--sp-2);
}
.stat {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--c-line-soft);
}
.stat__k { font-size: var(--fs-2xs); color: var(--c-faint); letter-spacing: .1em; }
.stat__v { font-family: var(--font-num); font-size: var(--fs-md); font-weight: 700; }
.stat--red .stat__v { color: var(--c-red-soft); }
.stat--purple .stat__v { color: var(--c-purple-soft); }
.stat--yellow .stat__v { color: var(--c-yellow); }

/* ── 战徽 / 减轻：**官方图标** ──────────────────────────────────────────
   图标是从本地封装应用拿的（`resources/app/assets/default/ico_*.png`，
   映射表见 `library.js:103-111`），已复制到 `webui/assets/sym/`。
   ⚠️ 必须自包含：`web/server.js` 的兼容层（COMPAT_IMG_PREFIXES）只接了
      CardImage 那两条路径，引用 `../resources/...` 挂到服务器上就是 404。
   形状本身是信息 —— 战徽是**菱形**、减轻是**圆形晶核**，不用读标签就分得出。 */
.symrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    line-height: 1;
}
.symico {
    width: 18px;
    height: 18px;
    flex: none;
    object-fit: contain;
}
/* 未知键的回退：显示中文名，别留一个破图 */
.symico--txt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 18px;
    padding: 0 3px;
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--c-dim);
    border: 1px solid var(--c-line-soft);
}

/* ★ 战徽 / 减轻的格子**跨两列**（2026-10-17）。
   用户口径：「战徽加减轻不止十个」—— 单列约 100px 只放得下 4 个图标，
   十几个会堆成三四行，把整行高度都撑起来，跟旁边的小格子对不齐。
   跨两列后一行能放 8~10 个。 */
.stat:has(.symrow) { grid-column: span 2; }

.efftext {
    padding: var(--sp-4);
    border-radius: var(--radius);
    background: rgba(12, 9, 18, .8);
    border: 1px solid var(--c-line);
    font-size: var(--fs-sm);
    line-height: 1.75;
    white-space: pre-wrap;
}

/* ══ 提示条（toast）════════════════════════════════════════════════════ */
.toast {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 99;
    max-width: 88vw;
    padding: var(--sp-3) var(--sp-5);
    border-radius: 0;                 /* 直角（原 999px 药丸） */
    background: rgba(12, 11, 10, .96);
    border: 1px solid var(--c-line);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .7);
    font-size: var(--fs-sm);
    animation: fade .16s ease;
}

/* ══ 桌面：菜单改成浮在卡旁边的 popup ══════════════════════════════════ */
@media (min-width: 900px) {
    .sheet {
        left: auto; right: auto;
        bottom: auto;
        width: 300px;
        max-height: none;
        border-radius: var(--radius);
        border-bottom: 1px solid var(--c-line);
        /* left / top 由 JS 依据被点卡牌的位置给（内联样式） */
        animation: pop .14s ease;
    }
    @keyframes pop { from { opacity: 0; transform: scale(.96); } }
    .sheet__grip { display: none; }
    .sheet__body { padding: var(--sp-3); gap: 3px; }
    .mitem { min-height: 38px; font-size: var(--fs-xs); }

    .detail { align-items: center; justify-content: center; }
    /* 三块用 `grid-template-areas` **显式摆位**，不靠 DOM 顺序自动放置 ——
       自动放置的坑踩过一次：`.detail__head` 排在 `.detail__body` 前面，
       于是标题占了第一列（窄列）、body 占了第二列，卡图又被塞在 body 里，
       结果就是「标题挤左边、卡图甩右边、左半屏空着」。
       写成 areas 之后，DOM 怎么排都不会再错位。 */
    .detail__inner {
        display: grid;
        grid-template-columns: auto minmax(280px, 520px);
        grid-template-areas:
            "head head"
            "img  body";
        gap: var(--sp-4) var(--sp-6);
        max-width: 940px;
        max-height: 86dvh;
        padding: var(--sp-6);
        border: 1px solid var(--c-line);
        background: linear-gradient(160deg, #17112b, #0a0812);
        box-shadow: 0 20px 70px rgba(0, 0, 0, .8);
    }
    /* 标题横跨整行：卡名靠左、✕ 靠右，下面一条细分隔线 */
    .detail__head {
        grid-area: head;
        padding: 0 0 var(--sp-3);
        border-bottom: 1px solid var(--c-line-soft);
    }
    .detail__imgwrap { grid-area: img; width: 300px; }
    /* 右栏：数据 + 效果文本，超长时自己滚（卡图不跟着滚） */
    .detail__body { grid-area: body; padding: 0; overflow-y: auto; }
}

@media (max-width: 899px) {
    /* 手机：**整块内容一起滚**（卡图 + 数据），标题吸顶。
       ⚠️ 原来是 `display: contents`（靠外层 .detail 的 flex 列排），
          卡图移出 `.detail__body` 之后就不能再那么干了 —— 那样会变成
          "卡图固定、只有数据能滚"，而卡图本身就占掉大半屏，数据基本没地方放。 */
    .detail__inner {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: var(--sp-4);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .detail__head {
        position: sticky;
        top: 0;
        z-index: 2;
        padding: var(--sp-3) 0;
        background: rgba(4, 3, 7, .94);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-bottom: 1px solid var(--c-line-soft);
    }
    /* 手机上 body 不再自己滚、也不再抢高度 —— 滚动交给 `.detail__inner` */
    .detail__body { flex: none; padding: 0; overflow: visible; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   卡牌详情 · 重做版（2026-10-18）
   ───────────────────────────────────────────────────────────────────────────
   **参考**本地封装应用的 card-viewer（`library.js:1466-1497` 的 `.cv-info`），
   取其信息结构，不是整段照搬：
     日文名 → 卡号 → 标签行 → 战徽行（上下**虚线**）→ 2 列数据 → 效果
   用户口径：「这个界面可以重做一下吗，可以稍微抄一下封装应用的样式」。
   旧版是"八宫格"：一格一个大方块、每格一行字，留白把面板撑得很空，
   八格大小还随内容跳；换成"信息面板"之后密度和本地应用一致。
   ⚠️ 配色走 tokens.css 的 `--c-*`，**不抄**本地应用的 `#dbe3ee` 冷灰 ——
      这边是暖黑底，搬那边的冷色会发脏。
   ⚠️ 上面 `.detail__head` / `.detail__body` / `.stat` / `.efftext` 的旧规则**没删**，
      模板已经不用它们了；这里靠**文档顺序**覆盖，别当成死代码又抄回去。
   ═══════════════════════════════════════════════════════════════════════════ */
.detail {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: flex;
    flex-direction: column;
    background: rgba(4, 3, 7, .9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: fade .16s ease;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.detail__inner {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.detail__imgwrap {
    flex: none;
    width: min(72vw, 320px);
    border: 1px solid var(--c-line);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
    overflow: hidden;
}
/* 信息面板（对应本地应用的 `.cv-info`） */
.detail__info {
    width: 100%;
    min-width: 0;
    padding: var(--sp-4);
    border: 1px solid var(--c-line);
    background: rgba(21, 19, 18, .72);
    font-size: var(--fs-xs);
    color: var(--c-text);
}
/* 中文名（主标题）+ 日文名（副）—— 两个都要显示（用户口径） */
.detail__cn {
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1.3;
    color: var(--c-text);
    margin-bottom: 2px;
}
.detail__jp { font-size: var(--fs-xs); color: var(--c-faint); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detail__id { font-family: var(--font-num); font-size: var(--fs-2xs); color: var(--c-gold); letter-spacing: .06em; margin-bottom: 10px; }
.detail__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.detail__tag {
    padding: 1px 8px;
    border: 1px solid var(--c-line);
    background: rgba(255, 255, 255, .06);
    font-size: var(--fs-2xs);
    color: var(--c-dim);
}
/* 衍生物标记：金色描边提醒"不能投入卡组" */
.detail__tag--tk { border-color: var(--c-gold); color: var(--c-gold); }
/* 战徽行：上下各一条**虚线**（本地应用 `.cv-symbols-row` 就是 dashed，别改实线） */
.detail__symrow {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    margin-bottom: 8px;
    border-top: 1px dashed var(--c-line-soft);
    border-bottom: 1px dashed var(--c-line-soft);
}
.detail__symlabel { flex: none; font-size: var(--fs-2xs); color: var(--c-faint); letter-spacing: .12em; }
.detail__syms { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
/* 数据区：2 列网格（本地应用 `.cv-stats` 是 `1fr 1fr`）。
   这是对上面旧 `.detail__stats`（auto-fit minmax 84px）的**覆盖**。 */
.detail__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    font-size: var(--fs-xs);
    margin-bottom: 10px;
}
.detail__stat { color: var(--c-dim); }
.detail__stat > span {
    color: var(--c-text);
    margin-left: 5px;
    font-family: var(--font-num);
    font-weight: 700;
}
.detail__stat--full { grid-column: 1 / -1; }
/* 费用格：数值 + 减轻图标**同一行**（用户口径：「减轻可以横着」）。
   flex 兜底，窄屏也不会把图标折到下一行。 */
.detail__stat--cost { display: flex; align-items: center; }
.detail__reds { display: inline-flex; align-items: center; margin-left: 4px; font-style: normal; }
/* BP 行：`LvN 数值 ·` 并列；等级用暗色小字当前缀，别和数值抢视觉 */
.detail__bp { margin-right: 2px; }
.detail__bpk { font-style: normal; font-size: var(--fs-2xs); color: var(--c-faint); margin-right: 3px; }
.detail__dot { font-weight: 400; color: var(--c-faint); margin: 0 5px; }
/* OC（Over Count）那一档：金色标注，和普通等级拉开区别 ——
   卡面上 OC 本来就是独立一段（`OC 5+ BP+5000`），不是 Lv3。 */
.detail__bp--oc .detail__bpk { color: var(--c-gold); }
.detail__bp--oc { color: var(--c-gold); }
/* 行内小图标（费用后面的减轻图标）：跟文字基线对齐 */
.symico--in { width: 16px; height: 16px; margin-left: 3px; vertical-align: -3px; }
.detail__efflabel {
    font-size: var(--fs-2xs);
    color: var(--c-faint);
    letter-spacing: .2em;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--c-line-soft);
    margin-bottom: 8px;
}
.detail__eff { font-size: var(--fs-xs); line-height: 1.75; color: var(--c-dim); white-space: pre-wrap; word-break: break-word; }
/* 关闭按钮：绝对定位浮右上（不进文档流，否则会占掉一整行把卡名挤断） */
.detail__close {
    position: absolute;
    right: var(--sp-4);
    top: var(--sp-4);
    z-index: 2;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--c-line);
    background: rgba(10, 8, 16, .82);
    color: var(--c-dim);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.detail__close:hover { color: var(--c-text); border-color: var(--c-gold); }

/* ── 桌面：卡图 300 宽 + 面板 344 宽，并排（宽度取本地应用的 `.cv-info`）───── */
@media (min-width: 900px) {
    .detail { align-items: center; justify-content: center; }
    .detail__inner {
        flex: none;
        flex-direction: row;
        align-items: flex-start;
        max-width: 960px;
        max-height: 86dvh;
        padding: var(--sp-5);
        border: 1px solid var(--c-line);
        background: linear-gradient(160deg, #17112b, #0a0812);
        box-shadow: 0 20px 70px rgba(0, 0, 0, .8);
        overflow: visible;
    }
    .detail__imgwrap { width: 300px; }
    /* 面板高度跟卡图对齐，超长才滚（本地应用也是这么锁的） */
    .detail__info { flex: none; width: 344px; max-height: min(84dvh, 600px); overflow-y: auto; }
}