/* v12 對戰台 arena — 直角紅黑電競對戰站（雙模式：預設深、亮模式亮灰底＋實色紅） */
/* 佈局 DNA：0 圓角硬邊區塊＋斜線切割裝飾，紅色霓虹 hover，對戰比分卡以中軸 VS 分隔左右隊。 */
/* 變體軸：斜線密度（單刀／密紋）、紅光強度（描邊／發光）、比分卡朝向（橫排／堆疊）。 */

:root {
  /* ===== primitive · 亮紅 12 階 ===== */
  --mt-d1:#3e050a; --mt-d2:#4c060d; --mt-d3:#5f0710; --mt-d4:#720913; --mt-d5:#850a16; --mt-d6:#9d0c1a;
  --mt-d7:#b90e1f; --mt-d8:#da1025; --mt-d9:#f11e33; --mt-d10:#ec5160; --mt-d11:#f6848f; --mt-d12:#fbd0d4;
  --mt-l1:#fef6f7; --mt-l2:#fdeaec; --mt-l3:#fbdadd; --mt-l4:#f9c7cc; --mt-l5:#f7b0b7; --mt-l6:#f4949e;
  --mt-l7:#f16f7c; --mt-l8:#ec3c4e; --mt-l9:#ce0d20; --mt-l10:#b01121; --mt-l11:#c31325; --mt-l12:#790c17;
  /* ===== primitive · 中性（帶紅微偏的暖黑／暖白灰） ===== */
  --mt-nd1:#1b1819; --mt-nd2:#221e1f; --mt-nd3:#2b2728; --mt-nd4:#342f30; --mt-nd5:#3f393a; --mt-nd6:#4e4648;
  --mt-nd7:#5f5658; --mt-nd8:#756c6e; --mt-nd9:#6f6769; --mt-nd10:#847b7d; --mt-nd11:#bbb4b6; --mt-nd12:#eeeded;
  --mt-nl1:#fdfcfc; --mt-nl2:#f8f7f7; --mt-nl3:#f2f0f1; --mt-nl4:#ebe8e9; --mt-nl5:#e3dedf; --mt-nl6:#d8d2d4;
  --mt-nl7:#c8c1c3; --mt-nl8:#afa6a9; --mt-nl9:#a19195; --mt-nl10:#8f7b80; --mt-nl11:#79686c; --mt-nl12:#3b3537;

  /* ===== 非色彩代幣 ===== */
  --match-r: 0px;
  --match-font: "Rubik", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --match-gap: 16px;
  --match-pad: 20px;
  --match-max: 1180px;

  /* ===== chrome（頂欄／頁尾兩模式維持近黑，保住紅黑識別） ===== */
  --match-chrome-bg: #171717;
  --match-chrome-text: #ffffff;
  --match-chrome-muted: #9a949e;
  --match-chrome-line: #37343a;

  /* ===== semantic · 深色（預設） ===== */
  --match-bg-a: #17161a;
  --match-bg-b: #201d1f;
  --match-surface: var(--mt-nd3);
  --match-surface-2: var(--mt-nd4);
  --match-ink: #171519;
  --match-line: var(--mt-nd5);
  --match-red: #f5253a;
  --match-red-dim: var(--mt-d6);
  --match-primary: #d81326;
  --match-white: #ffffff;
  --match-title: #ffffff;
  --match-text: var(--mt-nd12);
  --match-muted: var(--mt-nd11);
  --match-faint: #756c6e;
  --match-star: #ffce2e;
  --match-link-hover: #ff5560;
  --match-score-bg: linear-gradient(100deg, #1d1b20, #2a2126 55%, #1d1b20);
  --match-red-glow: 0 0 0 1px rgba(255, 14, 31, .55), 0 0 14px rgba(255, 14, 31, .4);
  --match-red-drop: drop-shadow(0 0 8px rgba(255, 14, 31, .7));
  --match-shadow: 0 10px 30px rgba(0, 0, 0, .55);
}

/* ===== semantic · 亮模式 ===== */
[data-mode="light"] {
  --match-bg-a: #f6f4f5;
  --match-bg-b: #fbf9fa;
  --match-surface: #ffffff;
  --match-surface-2: #faf8f9;
  --match-ink: #efecec;
  --match-line: #e2dcdd;
  --match-red: #d81326;
  --match-red-dim: var(--mt-l10);
  --match-primary: #ce0d20;
  --match-white: #26201f;
  --match-title: #201c1d;
  --match-text: var(--mt-nl12);
  --match-muted: var(--mt-nl11);
  --match-faint: #9b8f92;
  --match-star: #c79000;
  --match-link-hover: #a30d1a;
  --match-score-bg: linear-gradient(100deg, #ffffff, #faf5f6 55%, #ffffff);
  --match-red-glow: 0 0 0 1px rgba(206, 13, 32, .35), 0 3px 10px rgba(206, 13, 32, .15);
  --match-red-drop: drop-shadow(0 1px 2px rgba(206, 13, 32, .3));
  --match-shadow: 0 10px 28px rgba(40, 20, 25, .10);
}
@media (prefers-color-scheme: light) {
  :root:not([data-mode]) {
    --match-bg-a: #f6f4f5; --match-bg-b: #fbf9fa; --match-surface: #ffffff; --match-surface-2: #faf8f9;
    --match-ink: #efecec; --match-line: #e2dcdd; --match-red: #d81326; --match-red-dim: var(--mt-l10);
    --match-primary: #ce0d20; --match-white: #26201f; --match-title: #201c1d; --match-text: var(--mt-nl12);
    --match-muted: var(--mt-nl11); --match-faint: #9b8f92; --match-star: #c79000; --match-link-hover: #a30d1a;
    --match-score-bg: linear-gradient(100deg, #ffffff, #faf5f6 55%, #ffffff);
    --match-red-glow: 0 0 0 1px rgba(206, 13, 32, .35), 0 3px 10px rgba(206, 13, 32, .15);
    --match-red-drop: drop-shadow(0 1px 2px rgba(206, 13, 32, .3)); --match-shadow: 0 10px 28px rgba(40, 20, 25, .10);
  }
}
/* @check text=#eeeded bg=#1b1819 muted=#bbb4b6 primary=#d81326 btntext=#ffffff mode=dark */
/* @check text=#3b3537 bg=#fdfcfc muted=#79686c primary=#ce0d20 btntext=#ffffff mode=light */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: linear-gradient(100deg, var(--match-bg-a) 0%, var(--match-bg-b) 50%, var(--match-bg-a) 100%);
  color: var(--match-text);
  font-family: var(--match-font);
  font-size: 14px; line-height: 1.65;
}
img { max-width: 100%; display: block; }
a { color: var(--match-red); text-decoration: none; }
a:hover { color: var(--match-link-hover); }

h1, h2, h3, h4 { font-family: var(--match-font); text-transform: uppercase; letter-spacing: .06em; line-height: 1.2; margin: 0 0 .5em; font-weight: 700; }

.match-wrap { max-width: var(--match-max); margin: 0 auto; padding: 0 18px; }

/* 斜線切割裝飾條（共用） */
.match-slash {
  height: 6px;
  background: repeating-linear-gradient(115deg, var(--match-red) 0 14px, transparent 14px 30px);
  opacity: .85;
}

/* ---------- 導覽（頂欄，直角、紅底標題塊） ---------- */
.match-nav {
  position: sticky; top: 0; z-index: 40;
  background: var(--match-chrome-bg);
  border-bottom: 2px solid var(--match-red);
}
.match-nav__inner { max-width: var(--match-max); margin: 0 auto; padding: 0 18px; display: flex; align-items: center; gap: 20px; height: 64px; }
.match-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: .1em; color: var(--match-chrome-text); }
.match-logo__mark {
  width: 34px; height: 34px; background: var(--match-red); flex: 0 0 auto;
  clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%);
}
.match-menu { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.match-menu a {
  color: var(--match-chrome-muted); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  padding: 10px 15px; position: relative;
}
.match-menu a:hover, .match-menu a[aria-current] { color: var(--match-chrome-text); }
.match-menu a:hover::after, .match-menu a[aria-current]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 2px; background: var(--match-red);
}
.match-burger { display: none; margin-left: auto; width: 42px; height: 40px; background: transparent; border: 2px solid var(--match-red); color: var(--match-chrome-text); font-size: 18px; cursor: pointer; }

/* 模式切換鈕（直角、紅描邊；☀/☾ 由 script 切） */
.match-mode {
  width: 42px; height: 40px; display: inline-grid; place-items: center; cursor: pointer;
  background: transparent; color: var(--match-red); font-size: 15px; font-weight: 700;
  border: 2px solid var(--match-red); border-radius: var(--match-r);
}
.match-mode:hover { box-shadow: var(--match-red-glow); }

/* ---------- 麵包屑 ---------- */
.match-crumb { max-width: var(--match-max); margin: 0 auto; padding: 16px 18px 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--match-faint); }
.match-crumb a { color: var(--match-muted); }
.match-crumb b { color: var(--match-red); font-weight: 700; }

/* ---------- 版面骨架 ---------- */
.match-grid { display: grid; grid-template-columns: 1fr 310px; gap: var(--match-gap); max-width: var(--match-max); margin: 0 auto; padding: 20px 18px; }
.match-stack { display: flex; flex-direction: column; gap: var(--match-gap); min-width: 0; }
.match-stack--side { align-self: start; position: sticky; top: 80px; }

/* ---------- 通用卡（0 圓角、左紅條） ---------- */
.match-card {
  background: var(--match-surface);
  border: 1px solid var(--match-line);
  border-left: 3px solid var(--match-red);
  border-radius: var(--match-r);
  padding: var(--match-pad);
  position: relative;
}
.match-card__head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-bottom: 11px;
  border-bottom: 1px solid var(--match-line);
}
.match-card__head h3 { margin: 0; font-size: 15px; color: var(--match-title); }
.match-card__head::before { content: ""; width: 10px; height: 16px; background: var(--match-red); transform: skewX(-16deg); flex: none; }

/* ---------- 對戰比分卡 ---------- */
.match-score {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  background: var(--match-score-bg);
  border: 1px solid var(--match-line); padding: 18px;
  position: relative; overflow: hidden;
}
.match-score::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,14,31,.06) 0 12px, transparent 12px 28px); pointer-events: none; }
.match-side { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; z-index: 1; min-width: 0; }
.match-side__logo { width: 46px; height: 46px; background: var(--match-ink); border: 2px solid var(--match-red); flex: none; }
.match-side__name { text-transform: uppercase; font-weight: 700; font-size: 13px; color: var(--match-title); letter-spacing: .04em; }
.match-side__pts { font-size: 30px; font-weight: 800; color: var(--match-red); filter: var(--match-red-drop); line-height: 1; font-variant-numeric: tabular-nums; }
.match-vs { font-size: 22px; font-weight: 800; color: var(--match-white); text-transform: uppercase; letter-spacing: .06em; z-index: 1; transform: skewX(-10deg); }

/* ---------- 工具表單卡 ---------- */
.match-form { display: flex; flex-direction: column; gap: 14px; }
.match-field { display: flex; flex-direction: column; gap: 6px; }
.match-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--match-muted); font-weight: 600; }
.match-input, .match-select {
  background: var(--match-ink); border: 1px solid var(--match-line); color: var(--match-text);
  border-radius: var(--match-r); padding: 11px 12px; font-family: var(--match-font); font-size: 13.5px; width: 100%;
}
.match-input:focus, .match-select:focus { outline: none; border-color: var(--match-red); box-shadow: var(--match-red-glow); }
.match-radios { display: flex; gap: 8px; flex-wrap: wrap; }
.match-radio { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border: 1px solid var(--match-line); background: var(--match-ink); font-size: 12.5px; color: var(--match-muted); cursor: pointer; text-transform: uppercase; letter-spacing: .03em; }
.match-radio input { accent-color: var(--match-red); }
.match-radio:hover { border-color: var(--match-red); color: var(--match-title); }
.match-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.match-btn {
  font-family: var(--match-font); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 13px;
  padding: 12px 22px; border: 0; border-radius: var(--match-r); cursor: pointer;
  background: var(--match-primary); color: #fff;
}
.match-btn:hover { box-shadow: var(--match-red-glow); }
.match-btn--ghost { background: transparent; color: var(--match-title); border: 1px solid var(--match-line); }
.match-btn--ghost:hover { border-color: var(--match-red); box-shadow: var(--match-red-glow); }

/* ---------- 結果貼文卡 ---------- */
.match-post { display: flex; flex-direction: column; gap: 12px; }
.match-post__top { display: flex; align-items: center; gap: 12px; }
.match-avatar { width: 46px; height: 46px; background: var(--match-ink); border: 2px solid var(--match-red); display: grid; place-items: center; color: var(--match-title); font-weight: 800; font-size: 16px; flex: none; }
.match-post__who { display: flex; flex-direction: column; min-width: 0; }
.match-post__name { font-weight: 700; text-transform: uppercase; font-size: 13.5px; color: var(--match-title); letter-spacing: .03em; }
.match-post__sub { font-size: 11.5px; color: var(--match-faint); }
.match-chip { display: inline-block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; padding: 3px 9px; background: rgba(255,14,31,.14); color: var(--match-red); font-weight: 600; border: 1px solid var(--match-red-dim); }
.match-id { margin-left: auto; font-size: 10.5px; color: var(--match-faint); letter-spacing: .05em; }
.match-post__body { color: var(--match-text); font-size: 13.8px; }
.match-brief { background: var(--match-ink); border: 1px solid var(--match-line); border-left: 3px solid var(--match-red); padding: 13px 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.match-brief__k { font-size: 10.5px; color: var(--match-muted); text-transform: uppercase; letter-spacing: .04em; display: block; }
.match-brief__v { font-size: 18px; font-weight: 800; color: var(--match-title); }
.match-stars { display: inline-flex; gap: 2px; color: var(--match-star); font-size: 16px; letter-spacing: 2px; }
.match-stars .off { color: var(--match-line); }
.match-acts { display: flex; gap: 6px; border-top: 1px solid var(--match-line); padding-top: 11px; flex-wrap: wrap; }
.match-act { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; color: var(--match-muted); font-size: 12px; padding: 6px 12px; cursor: pointer; font-family: var(--match-font); }
.match-act:hover { color: var(--match-red); }
.match-act__vs { font-weight: 800; letter-spacing: .04em; }

/* ---------- 平台數據統計卡 ---------- */
.match-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.match-stat { text-align: center; padding: 16px 8px; border-right: 1px solid var(--match-line); }
.match-stat:last-child { border-right: 0; }
.match-stat__n { font-size: 26px; font-weight: 800; color: var(--match-title); font-variant-numeric: tabular-nums; white-space: nowrap; }
.match-stat__n span { color: var(--match-red); }
.match-stat__l { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--match-muted); }

/* ---------- 熱門排行 ---------- */
.match-rank { list-style: none; margin: 0; padding: 0; }
.match-rank li { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--match-line); }
.match-rank li:last-child { border-bottom: 0; }
.match-rank__no { width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--match-ink); color: var(--match-faint); }
.match-rank li:nth-child(-n+3) .match-rank__no { background: var(--match-primary); color: #fff; }
.match-rank__t { flex: 1; min-width: 0; font-size: 13px; color: var(--match-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-rank__d { font-size: 11px; color: var(--match-faint); text-transform: uppercase; flex: none; }

/* 側欄補充：戰報快訊（平衡側欄長度） */
.match-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.match-feed li { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.match-feed .match-fk { flex: none; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--match-red); }
.match-feed .match-fv { flex: 1; min-width: 0; font-size: 12.5px; color: var(--match-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-note { border: 1px solid var(--match-line); border-left: 3px solid var(--match-red); background: rgba(255,14,31,.06); padding: 12px 14px; font-size: 12.5px; color: var(--match-text); }

/* ---------- 文章卡 ---------- */
.match-arts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--match-gap); }
.match-art { background: var(--match-surface); border: 1px solid var(--match-line); }
.match-art__thumb { aspect-ratio: 16/9; position: relative; background: linear-gradient(120deg, #3a1116, #170e12); }
.match-art__thumb::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,14,31,.12) 0 10px, transparent 10px 24px); }
.match-art__thumb::after { content: attr(data-tag); position: absolute; left: 0; top: 10px; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; padding: 3px 9px; background: var(--match-primary); color: #fff; font-weight: 700; }
.match-art__b { padding: 13px; display: flex; flex-direction: column; gap: 7px; }
.match-art__t { font-size: 13.5px; color: var(--match-title); text-transform: none; letter-spacing: 0; }
.match-art__x { font-size: 12.5px; color: var(--match-muted); }
.match-art__m { font-size: 11px; color: var(--match-faint); text-transform: uppercase; }

/* ---------- 文章內文 ---------- */
.match-article h2 { font-size: 20px; color: var(--match-title); margin-top: 1.3em; }
.match-article h3 { font-size: 15px; color: var(--match-red); text-transform: none; letter-spacing: 0; margin-top: 1.1em; }
.match-article p { margin: 0 0 1em; }
.match-article table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 13px; }
.match-article th, .match-article td { border: 1px solid var(--match-line); padding: 9px 11px; text-align: left; }
.match-article th { background: var(--match-ink); color: var(--match-red); text-transform: uppercase; font-size: 11.5px; letter-spacing: .05em; }
.match-quote { border-left: 3px solid var(--match-red); background: rgba(255,14,31,.06); padding: 12px 16px; margin: 1.2em 0; font-style: italic; }
.match-faq { border: 1px solid var(--match-line); margin: 9px 0; background: var(--match-ink); }
.match-faq summary { cursor: pointer; padding: 12px 14px; text-transform: uppercase; letter-spacing: .03em; font-size: 12.5px; color: var(--match-title); font-weight: 600; list-style: none; display: flex; justify-content: space-between; }
.match-faq summary::-webkit-details-marker { display: none; }
.match-faq summary::after { content: "＋"; color: var(--match-red); }
.match-faq[open] summary::after { content: "－"; }
.match-faq__b { padding: 0 14px 13px; color: var(--match-muted); font-size: 13px; }

/* ---------- 工具牆 ---------- */
.match-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--match-gap); }
.match-tool { padding: 16px; background: var(--match-surface); border: 1px solid var(--match-line); cursor: pointer; display: flex; flex-direction: column; gap: 9px; transition: box-shadow .15s, transform .15s; }
.match-tool:hover { box-shadow: var(--match-red-glow); transform: translateY(-2px); }
.match-tool__ico { width: 40px; height: 40px; display: grid; place-items: center; background: var(--match-ink); border: 1px solid var(--match-red-dim); color: var(--match-red); font-size: 18px; }
.match-tool__t { text-transform: uppercase; font-size: 13px; color: var(--match-title); letter-spacing: .03em; font-weight: 700; }
.match-tool__x { font-size: 12px; color: var(--match-muted); }

/* ---------- 影片 16:9 ---------- */
.match-video { position: relative; aspect-ratio: 16/9; overflow: hidden; border: 1px solid var(--match-line); background: linear-gradient(120deg, #2a1016, #14090c); }
.match-video::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,14,31,.08) 0 12px, transparent 12px 28px); }
.match-video__play { position: absolute; inset: 0; margin: auto; width: 62px; height: 62px; background: var(--match-red); display: grid; place-items: center; filter: var(--match-red-drop); clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%); }
.match-video__play::after { content: ""; border-left: 18px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: -2px; }
.match-video__label { position: absolute; left: 12px; bottom: 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: rgba(0,0,0,.55); padding: 3px 9px; }

/* ---------- 圖片網格 2×2 ---------- */
.match-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.match-g2 > div { aspect-ratio: 4/3; border: 1px solid var(--match-line); }
.match-ga { background: linear-gradient(120deg, #3a1116, #7a1420); }
.match-gb { background: linear-gradient(120deg, #201d22, #3a343d); }
.match-gc { background: linear-gradient(120deg, #2a1016, #55111c); }
.match-gd { background: linear-gradient(120deg, #171519, #2c2830); }

/* ---------- 分頁 ---------- */
.match-pager { display: flex; gap: 6px; justify-content: center; padding: 6px 0; flex-wrap: wrap; }
.match-pager a, .match-pager span { min-width: 38px; height: 38px; display: grid; place-items: center; padding: 0 12px; background: var(--match-surface); border: 1px solid var(--match-line); font-weight: 600; font-size: 13px; color: var(--match-muted); text-transform: uppercase; }
.match-pager a:hover { border-color: var(--match-red); color: var(--match-title); }
.match-pager .cur { background: var(--match-primary); color: #fff; border-color: var(--match-primary); }

/* ---------- footer ---------- */
.match-footer { border-top: 2px solid var(--match-red); margin-top: 32px; background: var(--match-chrome-bg); }
.match-footer__inner { max-width: var(--match-max); margin: 0 auto; padding: 30px 18px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 24px; }
.match-footer h4 { font-size: 12.5px; color: var(--match-chrome-text); }
.match-footer a { display: block; color: var(--match-chrome-muted); font-size: 12.5px; padding: 3px 0; }
.match-footer .match-art__x { color: var(--match-chrome-muted); }
.match-footer__copy { border-top: 1px solid var(--match-chrome-line); text-align: center; color: var(--match-chrome-muted); font-size: 11.5px; padding: 14px; text-transform: uppercase; letter-spacing: .04em; }

.match-h { font-size: 16px; color: var(--match-title); margin: 4px 0 2px; }

/* ---------- 響應式 ---------- */
@media (max-width: 900px) {
  .match-grid { grid-template-columns: 1fr; }
  .match-stack--side { position: static; }
  .match-arts, .match-wall { grid-template-columns: repeat(2, 1fr); }
  .match-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .match-menu { display: none; width: 100%; flex-direction: column; order: 3; }
  .match-menu.is-open { display: flex; }
  .match-burger { display: inline-grid; place-items: center; }
  .match-mode { margin-left: auto; }
  .match-nav__inner { flex-wrap: wrap; height: auto; padding: 10px 18px; }
}
@media (max-width: 560px) {
  .match-arts, .match-wall, .match-stats { grid-template-columns: 1fr; }
  .match-brief { grid-template-columns: 1fr 1fr; }
  .match-score { grid-template-columns: 1fr; }
  .match-vs { justify-self: center; }
  .match-footer__inner { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* v2 visual direction: sharp tournament broadcast */
body { background-image:repeating-linear-gradient(125deg,transparent 0 28px,color-mix(in srgb,var(--match-red) 3%,transparent) 29px 30px); }
.match-nav { position:sticky; top:0; z-index:80; box-shadow:0 14px 42px rgba(20,5,9,.22); }
.match-wrap { max-width:1460px; }
.match-card { border-color:color-mix(in srgb,var(--match-red) 14%,var(--match-line)); box-shadow:0 12px 30px rgba(58,20,28,.09); transition:transform .18s ease,box-shadow .18s ease; }
.match-card:hover { box-shadow:0 18px 42px rgba(58,20,28,.14); }
.match-main > .match-card:first-child { position:relative; overflow:hidden; border-top:4px solid var(--match-red); }
.match-main > .match-card:first-child::after { content:"LIVE BRACKET"; display:block; position:absolute; right:18px; top:18px; font:900 10px/1 monospace; letter-spacing:.16em; color:var(--match-red); }
.match-btn:not(.match-btn--ghost) { box-shadow:0 9px 22px color-mix(in srgb,var(--match-red) 28%,transparent); }
.match-score { box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--match-red) 12%,transparent); }

/* ========== 廣告版位（match-promo｜直角紅框皮膚；正式站預設 hidden，loader 有素材才展開） ========== */
/* 語意變數：占位示意用 mode-aware --match-red/--match-muted 自動雙模式適配，深底清楚不刺眼 */
.match-promo { position: relative; }
.match-promo[hidden] { display: none !important; }                    /* hidden 保底：無素材塌陷不留白框 */

/* 廣告標示（直角斜切紅色小旗，實色壓白字・清楚可辨・合規） */
.match-promo__tag {
  position: absolute; z-index: 3; top: 8px; right: 8px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  padding: 3px 11px; color: #fff; background: var(--match-primary);
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
}
/* 占位示意（banner 類：AD-TOP / SIDE / STICKY / ARTICLE-END；直角 0 圓角框） */
.match-promo__ph {
  display: grid; place-items: center; text-align: center; gap: 2px;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--match-muted);
  border: 1px dashed color-mix(in srgb, var(--match-red) 50%, var(--match-line));
  background: color-mix(in srgb, var(--match-red) 7%, transparent);
  padding: 12px; border-radius: var(--match-r);
}
.match-promo__ph b { display: block; color: var(--match-red); font-weight: 800; font-size: 12px; letter-spacing: .04em; }

.match-promo--top { max-width: var(--match-max); margin: 16px auto 0; padding: 0 18px; }
.match-promo--top .match-promo__ph { min-height: 72px; }
.match-promo--side .match-promo__ph { min-height: 250px; }
.match-promo--side-b .match-promo__ph { min-height: 320px; }
.match-promo--article-end { margin: 6px 0 2px; }
.match-promo--article-end .match-promo__ph { min-height: 90px; }

/* 原生位共用：body 穿透，卡皮由 root 自身提供 */
.match-promo--feed .match-promo__body,
.match-promo--result .match-promo__body,
.match-promo--article .match-promo__body { display: contents; }

/* 原生 AD-RESULT：高意圖 CTA 卡（root 已帶 match-card 直角紅框皮膚） */
.match-promo--result .match-promo__cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.match-promo__cta-ico { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; font-size: 20px; background: var(--match-ink); border: 1px solid var(--match-red-dim); color: var(--match-red); }
.match-promo__cta-main { flex: 1; min-width: 170px; }
.match-promo__cta-t { text-transform: uppercase; font-weight: 700; font-size: 14px; color: var(--match-title); letter-spacing: .03em; }
.match-promo__cta-x { font-size: 12.5px; color: var(--match-muted); margin: 3px 0 0; }

/* 原生 AD-ARTICLE：in-article 融入（直角左紅條 inset，標示走行內避開文字） */
.match-promo--article { margin: 1.2em 0; padding: 13px 16px; background: var(--match-ink); border: 1px solid var(--match-line); border-left: 3px solid var(--match-red); }
.match-promo--article .match-promo__tag { position: static; display: inline-block; margin-bottom: 7px; }
.match-promo__in-t { text-transform: uppercase; font-weight: 700; font-size: 13px; color: var(--match-title); letter-spacing: .03em; margin-bottom: 3px; }
.match-promo__in-x { font-size: 12.5px; color: var(--match-muted); margin: 0; }
.match-promo__in-x a { color: var(--match-red); }

/* AD-STICKY 行動底部（桌機隱藏，≤768px 顯示・可 × 關閉） */
.match-promo--sticky { display: none; }
.match-promo__close {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 26px; height: 26px; display: grid; place-items: center; cursor: pointer;
  background: var(--match-surface); color: var(--match-muted); border: 1px solid var(--match-line);
  font-size: 15px; line-height: 1; z-index: 4;
}
.match-promo__close:hover { color: var(--match-red); border-color: var(--match-red); }
@media (max-width: 768px) {
  .match-promo--sticky {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 8px 44px 8px 12px; background: var(--match-chrome-bg);
    border-top: 2px solid var(--match-red); box-shadow: 0 -6px 22px rgba(0,0,0,.45);
  }
  /* 有 app-shell 底部 tab 時，sticky 讓位到 tab 上方，不互相遮擋（統一 84px，見手機廣告強化段） */
  body.has-ipb-shell-tabbar .match-promo--sticky { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .match-promo--sticky .match-promo__tag { top: 6px; right: auto; left: 12px; }
  .match-promo--sticky .match-promo__ph { min-height: 46px; margin: 0; background: transparent; border-color: color-mix(in srgb, var(--match-red) 48%, var(--match-chrome-line)); color: var(--match-chrome-muted); }
}

/* ========== 手機廣告強化（只在 ≤768px 生效；桌機完全不變，全用語意變數雙模式跟隨） ========== */
/* 側欄回流卡與插頁測試鈕：桌機不出現（回流卡預設塌陷同基礎位，插頁預設 hidden） */
.match-promo--reflow { display: none; }
.match-inter-demo { display: none; }

@media (max-width: 768px) {
  /* 1) 側欄回流：手機隱藏側欄 side 版位、改由 feed 內原生回流卡承接庫存 */
  .match-stack--side .match-promo--side { display: none; }
  .match-promo--reflow { display: block; }
  .match-promo--feed, .match-promo--reflow { cursor: pointer; }              /* 原生卡整卡可點（大點擊區） */

  /* 2) AD-RESULT 手機大 CTA：整卡全寬、CTA 全寬 48px、字加大、整卡大點擊區 */
  .match-promo--result { cursor: pointer; }
  .match-promo--result .match-promo__cta { flex-direction: column; align-items: stretch; }
  .match-promo--result .match-promo__cta-main { min-width: 0; }
  .match-promo--result .match-btn { width: 100%; min-height: 48px; font-size: 15px; }

  /* 3) AD-STICKY 迷你 CTA 條：圖示＋文案＋CTA＋×，讓位底部 tab 上方（統一 84px），整條高 ≤56px */
  body.has-ipb-shell-tabbar .match-promo--sticky { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .match-promo--sticky { padding: 5px 12px; z-index: 1300; }              /* 5+44+5＋上緣 2px 描邊＝56px 上限 */
  .match-promo--sticky .match-promo__body { display: flex; align-items: center; gap: 10px; }
  .match-promo__mini-ico {
    width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--match-r);
    font-size: 18px; background: rgba(255,14,31,.16); box-shadow: inset 0 0 0 1px rgba(255,14,31,.45); color: var(--match-red);
  }
  .match-promo__mini-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .match-promo--sticky .match-promo__tag { position: static; align-self: flex-start; clip-path: none; padding: 1px 7px; font-size: 9px; }
  .match-promo__mini-txt { font-size: 12.5px; color: var(--match-chrome-text); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .match-promo__mini-cta { flex: 0 0 auto; min-height: 44px; padding: 0 16px; display: inline-grid; place-items: center; font-size: 15px; }
  /* × 改走 flex 排位（不絕對定位壓住 CTA），觸控區 ≥26px 且與 CTA 不重疊 */
  .match-promo--sticky .match-promo__close { position: static; transform: none; flex: 0 0 auto; }

  /* 4) AD-INTERSTITIAL 插頁：全屏遮罩＋置中卡；z-index 高於 sticky(1300)／底部 tab(999)／mode-switch(1200) */
  .match-inter-demo {
    display: inline-flex; align-items: center; gap: 6px; position: fixed; z-index: 1000;
    top: max(72px, calc(env(safe-area-inset-top) + 58px)); left: max(10px, env(safe-area-inset-left));
    padding: 8px 12px; min-height: 40px; cursor: pointer;
    font-family: var(--match-font); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--match-red); background: var(--match-surface); border: 1px solid var(--match-red);
    border-radius: var(--match-r); box-shadow: var(--match-shadow);
  }
  .match-promo--interstitial { position: fixed; inset: 0; z-index: 1400; display: grid; place-items: center; padding: 22px; }
  .match-promo__scrim { position: absolute; inset: 0; background: rgba(12,5,7,.74); backdrop-filter: blur(3px); }
  .match-promo__inter {
    position: relative; z-index: 1; width: min(360px, 92vw); text-align: center;
    background: var(--match-surface); border: 1px solid var(--match-line); border-left: 3px solid var(--match-red);
    border-radius: var(--match-r); padding: 26px 22px 20px; box-shadow: var(--match-red-glow), var(--match-shadow);
  }
  .match-promo--interstitial .match-promo__tag { position: static; display: inline-block; margin-bottom: 12px; }
  .match-promo__inter-img {
    width: 72px; height: 72px; margin: 0 auto 14px; display: grid; place-items: center; font-size: 34px;
    background: var(--match-ink); border: 1px solid var(--match-red-dim); color: var(--match-red);
  }
  .match-promo__inter-t { text-transform: uppercase; font-weight: 700; font-size: 17px; color: var(--match-title); letter-spacing: .03em; }
  .match-promo__inter-x { font-size: 13.5px; color: var(--match-muted); margin: 8px 0 18px; }
  .match-promo__inter-cta { width: 100%; min-height: 48px; font-size: 15px; display: inline-grid; place-items: center; }
  .match-promo__inter-skip {
    display: inline-block; margin-top: 12px; padding: 8px 14px; min-height: 40px; cursor: pointer;
    background: transparent; border: 0; color: var(--match-faint); font-size: 12.5px; font-family: var(--match-font);
  }
  .match-promo__inter-skip:hover { color: var(--match-red); }
  .match-promo__inter-close { position: absolute; top: 10px; right: 10px; transform: none; }

  /* 5) 手機 CTA 全面加大：文章內廣告連結 44px、字 ≥15px（其餘 CTA 於各版位已加大） */
  .match-promo__in-x a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }
}