/* ═══════════════════════════════════════════════════════════════════════════
   event.css —— 活动与赛事屏 ｜ 教程准备页（2026-10-21 新建）
   ───────────────────────────────────────────────────────────────────────────
   ⚠️ 独立文件，**不写进 layout.css** —— 那 4 万行是另一个会话在维护的，
      追加进去以后没法单独回滚。这里只新增 `.event* / .etag / .ktag /
      .evdet* / .next__* / .enotes / .tut*` 这几组类名，其余骨架全部复用
      layout.css 里大厅那套（.lobby__wrap / __grid / __panel2 / .chips / .chip）。
   ⚠️ 配色一律用 tokens.css 的变量，不要写死色值。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 筛选 chip（活动页专用）──────────────────────────────────────────────
   ⚠️ 必须另起 `.chips--ev`：`pool.css` 把 `.chips` 改成了**全局 3 列网格**
      （卡池的「红/紫/绿/白/黄/蓝」用它排方阵），活动页 4 个筛选项跟着中招
      —— 第 4 个「已结束」被挤到第二行（2026-10-21 实拍确认）。
      这里改成 inline-flex + 允许换行，并把 pool.css 给的 38px 高、白底盖回去。 */
.chips--ev { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.chips--ev .chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    min-height: 28px;
    padding: 0 12px;
    background: none;
}

/* ── 活动列表 ─────────────────────────────────────────────────────────────
   行结构：日期块 56px ｜ 主信息 1fr ｜ 状态 auto（与大厅 .room 同一套读法） */
.events { display: flex; flex-direction: column; }

.event {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
    padding: 0;
    text-align: left;
    cursor: pointer;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--c-line-soft);
    color: inherit;
    font-family: inherit;
    transition: background var(--dur-micro);
}
.event:last-child { border-bottom: 0; }
.event:hover { background: rgba(217, 187, 135, .05); }
/* 选中态用**左侧一根金线**代替整行反白 —— 反白会把状态标签的颜色压掉 */
.event.is-on {
    background: rgba(217, 187, 135, .07);
    box-shadow: inset 2px 0 0 var(--c-gold);
}

/* 日期块：扫列表时"哪天"比"叫什么"先被看到，所以单独立一列 */
.event__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    padding: var(--sp-4) 0;
    border-right: 1px solid var(--c-line-soft);
    line-height: 1.1;
}
.event__m {
    font-family: var(--font-num);
    font-size: var(--fs-2xs);
    font-weight: 600;
    font-style: normal;
    letter-spacing: .06em;
    color: var(--c-faint);
}
.event__d {
    font-family: var(--font-num);
    font-size: 21px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.05;
    color: var(--c-text);
}
.event__w {
    margin-top: 2px;
    font-family: var(--font-num);
    font-size: var(--fs-2xs);
    font-weight: 500;
    font-style: normal;
    color: var(--c-dim);
}
/* 长期开放的活动（如新手引导）没有日期 —— 用两个字占住同一个位置 */
.event__pin {
    font-family: var(--font-num);
    font-size: var(--fs-xs);
    font-weight: 600;
    font-style: normal;
    letter-spacing: .1em;
    color: var(--c-green);
}

.event__main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: var(--sp-4) var(--sp-5);
}
.event__name {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--c-text);
}
.event__meta {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--fs-xs);
    color: var(--c-faint);
}
.event__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    padding-right: var(--sp-5);
}
.event__id {
    font-family: var(--font-num);
    font-size: var(--fs-2xs);
    letter-spacing: .06em;
    color: var(--c-faint);
}

/* 新手引导这条：整行带一点绿调，和赛事区分开（它是长期开放的，不是一场比赛） */
.event.is-teach { background: linear-gradient(90deg, rgba(47, 208, 122, .07), transparent 62%); }
.event.is-teach:hover { background: linear-gradient(90deg, rgba(47, 208, 122, .11), rgba(217, 187, 135, .03) 62%); }
.event.is-teach.is-on {
    background: linear-gradient(90deg, rgba(47, 208, 122, .13), transparent 62%);
    box-shadow: inset 2px 0 0 var(--c-green);
}

/* ── 状态标签 ───────────────────────────────────────────────────────────── */
.etag {
    display: inline-block;
    padding: 4px 6px;
    font-family: var(--font-num);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid var(--c-line);
    color: var(--c-dim);
}
.etag.is-open { color: var(--c-green); border-color: rgba(47, 208, 122, .45); background: rgba(47, 208, 122, .08); }
.etag.is-soon { color: var(--c-gold); border-color: var(--c-line-strong); background: rgba(217, 187, 135, .08); }
.etag.is-live { color: var(--c-red-soft); border-color: var(--c-line-red); background: rgba(207, 58, 48, .12); }
.etag.is-done { color: var(--c-faint); border-color: var(--c-line-soft); }

/* ── 种类小标签（教学 / 赛事 / 自由对局 …）───────────────────────────────
   加新种类：在 screen-event.js 的 KINDS 里加一项，这里补一条 .ktag--<tone> */
.ktag {
    flex: none;
    display: inline-block;
    padding: 3px 5px;
    font-size: var(--fs-2xs);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid currentColor;
    color: var(--c-dim);
    opacity: .85;
}
.ktag--teach { color: var(--c-green); }
.ktag--tour { color: var(--c-gold); }
.ktag--casual { color: var(--c-blue); }
.ktag--plain { color: var(--c-dim); }

/* ── 右侧：活动详情 ───────────────────────────────────────────────────────── */
.evdet__back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    cursor: pointer;
    background: none;
    border: 0;
    color: var(--c-dim);
    font: inherit;
    font-size: var(--fs-xs);
}
.evdet__back:hover { color: var(--c-text); }
.evdet__k { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-3); }
.evdet__name {
    margin: 0 0 var(--sp-4);
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1.4;
}
.evdet__rows { display: flex; flex-direction: column; margin: 0 0 var(--sp-4); }
.evdet__rows > div {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: 8px 0;
    border-bottom: 1px solid var(--c-line-soft);
    font-size: var(--fs-xs);
}
.evdet__rows > div:last-child { border-bottom: 0; }
.evdet__rows dt { color: var(--c-faint); }
.evdet__rows dd { margin: 0; text-align: right; color: var(--c-text); }
.evdet__note { margin: 0 0 var(--sp-4); font-size: var(--fs-xs); line-height: 1.8; color: var(--c-dim); }

/* ── 右侧：最近一场 ───────────────────────────────────────────────────────── */
.next__when { display: flex; align-items: baseline; gap: 8px; }
.next__when b { font-family: var(--font-num); font-size: var(--fs-2xl); font-weight: 700; }
.next__when i { font-style: normal; font-size: var(--fs-xs); color: var(--c-faint); }
.next__name { margin: 6px 0 4px; font-size: var(--fs-md); font-weight: 600; }
.next__meta { margin: 0 0 var(--sp-4); font-size: var(--fs-xs); color: var(--c-faint); }

/* ── 键值表（须知 / 基础常识共用）──────────────────────────────────────── */
.enotes { display: flex; flex-direction: column; margin: 0; }
.enotes > div {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: 8px 0;
    border-bottom: 1px solid var(--c-line-soft);
    font-size: var(--fs-xs);
}
.enotes > div:last-child { border-bottom: 0; }
.enotes dt { color: var(--c-faint); }
.enotes dd { margin: 0; text-align: right; color: var(--c-text); }
.enotes__note { margin: var(--sp-4) 0 0; font-size: var(--fs-2xs); line-height: 1.8; color: var(--c-faint); }

/* ═══════════════════════════════════════════════════════════════════════════
   教程准备页
   ───────────────────────────────────────────────────────────────────────────
   ★ 2026-10-22 用户口径：「新手引导界面的内容有点多，这个应该是对战界面教的」
     ⇒ 原来的五步流程 + 卡组确认 + 基础常识三块全部拿掉，只留一张说明卡。
     具体操作提示将来写在对战界面里，不在这里堆。
   ═══════════════════════════════════════════════════════════════════════════ */
.tutscreen__back { margin-bottom: var(--sp-4); }
/* 单栏居中：内容只剩一句说明，铺满整行会显得空、而且整块贴左很难看
   （2026-10-22 用户口径：「有的位置靠左了」） */
.tutscreen__wrap { max-width: 640px; margin: 0 auto; }

.tutcard {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-6);
    border: 1px solid var(--c-line);
    background: rgba(21, 19, 18, .55);
}
.tutcard__title {
    margin: var(--sp-2) 0 0;
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 700;
}
.tutcard__desc {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.9;
    color: var(--c-dim);
}
/* 按钮跟文字左对齐、按内容宽度 —— 拉满整卡宽会把视觉重心拽到左边 */
.tutcard__go {
    margin-top: var(--sp-4);
    align-self: flex-start;
    width: auto;
    min-width: 180px;
}

/* ── 窄屏 ─────────────────────────────────────────────────────────────────
   ≤899px 时 .lobby__grid 本来就变单栏、setup 排到列表之后（layout.css 管的）。
   这里只处理活动行本身：状态列挪到主信息下面，别把名字挤没。 */
@media (max-width: 899px) {
    .event { grid-template-columns: 50px minmax(0, 1fr) auto; }
    .event__main { padding: var(--sp-3) var(--sp-4); }
    .event__side { padding-right: var(--sp-4); }
    .event__meta { white-space: normal; line-height: 1.6; }
}
@media (max-width: 560px) {
    .event {
        grid-template-columns: 46px minmax(0, 1fr);
        grid-template-areas: "date main" "date side";
    }
    .event__date { grid-area: date; }
    .event__main { grid-area: main; padding-bottom: 2px; }
    .event__side {
        grid-area: side;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 0 var(--sp-4) var(--sp-3) 0;
    }
    .event__name { white-space: normal; overflow: visible; line-height: 1.45; }
    .event__d { font-size: 19px; }
}