/* ═══════════════════════════════════════════════════════════════════════════
   base.css —— 重置 + 基础排版 + 通用元件（按钮 / 徽标 / 面板 / 滚动条）
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html, body, #app { height: 100%; }

html {
    /* 移动端：禁止"双击缩放"抢手势（卡牌双击开菜单要用到双击）。
       注意只锁双击缩放，**不**锁双指缩放 —— 用户仍可放大查看卡面细节。 */
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--c-bg);
    background-image: var(--grad-page);
    background-attachment: fixed;
    color: var(--c-text);
    font-family: var(--font);
    font-size: var(--fs-sm);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;              /* 整个应用自己管滚动，页面不滚 */
    overscroll-behavior: none;     /* 关掉移动端"下拉刷新 / 边缘回弹" */
}

img { display: block; max-width: 100%; }

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
    /* 移动端去掉点击高亮块与长按菜单（长按要留给"看卡牌详情"） */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

/* 键盘可达性：只在键盘导航时显示焦点圈 */
:focus-visible {
    outline: 2px solid var(--c-purple);
    outline-offset: 2px;
}

/* ── 文字工具类 ────────────────────────────────────────────────────────── */
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.dim { color: var(--c-dim); }
.nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── 按钮 ──────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--tap-min);          /* 触控下限 */
    padding: 0 var(--sp-5);
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-line);
    background: linear-gradient(180deg, rgba(162, 77, 255, .14), rgba(162, 77, 255, .04));
    color: var(--c-text);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: .04em;
    white-space: nowrap;
    transition: background .16s, border-color .16s, transform .08s;
}
.btn:hover { background: linear-gradient(180deg, rgba(162, 77, 255, .24), rgba(162, 77, 255, .08)); border-color: rgba(162, 77, 255, .5); }
/* ★ 用户口径：「**按钮按下去变成红色**」
   ⇒ 全局按下反馈统一走红：不管按钮原本是什么色，按下都出现红边 + 红光，
     用户能立刻确认"这一下点到了"。顶栏导航的选中态另见 layout.css。 */
.btn:active {
    transform: translateY(1px);
    border-color: var(--c-red);
    box-shadow: inset 0 0 0 1px var(--c-red), var(--glow-red);
}

.btn--red {
    background: var(--grad-red);
    border-color: rgba(255, 107, 131, .5);
    box-shadow: var(--glow-red);
}
.btn--red:hover { background: linear-gradient(135deg, #ff5470, #c01432); }

.btn--purple {
    background: var(--grad-purple);
    border-color: rgba(199, 155, 255, .5);
    box-shadow: var(--glow-purple);
}

.btn--ghost { background: rgba(255, 255, 255, .04); border-color: var(--c-line-soft); }
.btn--ghost:hover { background: rgba(255, 255, 255, .09); }

.btn--icon { padding: 0; width: var(--tap-min); min-width: var(--tap-min); }

/* 手机上的主行动按钮：更宽、更高 */
.btn--wide { width: 100%; }

/* ── 徽标 ──────────────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 0;                 /* 直角（原 4px） */
    font-family: var(--font-num);
    font-size: var(--fs-2xs);
    font-weight: 800;
    letter-spacing: .04em;
    background: rgba(255, 255, 255, .1);
    border: 1px solid var(--c-line-soft);
}
.badge--red    { background: rgba(255, 43, 78, .22); border-color: var(--c-line-red); color: #ffd7de; }
.badge--purple { background: rgba(162, 77, 255, .22); border-color: var(--c-line); color: #e8d6ff; }

/* ── 斜切（切角）：本设计的"破直角"手段，替代圆角 ──────────────────────
   ⚠️ `clip-path` 会把 `border` 一起裁掉 ⇒ 用这几个类就别指望 border，
      要描边改用内阴影（`.cut-in`）或外层的容器底。
   用法：把切角方向挂在元件上，切角量由 `--cut` / `--cut-sm` 控制。 */
.cut     { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }
.cut--tr { clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut)); }
.cut--bl { clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.cut--sm { --cut: var(--cut-sm); }

/* ── 面板 ──────────────────────────────────────────────────────────────── */
.panel {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
}

/* ── 滚动条（Webkit + Firefox 都写，Firefox 也支持 scrollbar-width）────── */
.scroll-x, .scroll-y { scrollbar-width: thin; scrollbar-color: rgba(162, 77, 255, .45) transparent; }
.scroll-x::-webkit-scrollbar, .scroll-y::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-x::-webkit-scrollbar-thumb, .scroll-y::-webkit-scrollbar-thumb {
    background: rgba(162, 77, 255, .42);
    border-radius: 4px;
}
.scroll-x::-webkit-scrollbar-track, .scroll-y::-webkit-scrollbar-track { background: transparent; }

.scroll-x { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.scroll-y { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }

/* 移动端隐藏滚动条（有惯性滚动就够了，条会占地方） */
@media (max-width: 899px) {
    .scroll-x::-webkit-scrollbar, .scroll-y::-webkit-scrollbar { width: 0; height: 0; }
}

/* ── 通用：占位色块（卡图缺失时的兜底）───────────────────────────────── */
.ph {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2px;
    background: var(--grad-card);
    color: var(--c-dim);
    font-size: var(--fs-2xs);
    line-height: 1.2;
    word-break: break-all;
}