/* =========================================================
   電競戰場 esports — 賽事轉播介面
   槍灰金屬 × 切角面板 × 斜紋科技線 × 橘色重點
   ========================================================= */

:root {
  color-scheme: dark;
  --bg: #0f1217;
  --bg-pattern: linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
  --bg-size: 48px 48px;
  --surface: #171c23;
  --surface-2: #1e252e;
  --text: #eef2f6;
  --text-2: #b9c3cf;
  --muted: #8d99a8;
  --line: #2b343f;
  --shadow-c: rgba(0, 0, 0, .55);
  --inv: #262e39;
  --hl: #27313d;
  --on-primary: #140b05;
  --scrim: rgba(5, 7, 10, .8);
  --header-bg: #12161c;
  --footer-bg: #0a0c10;
  --footer-fg: #a7b1bd;
  --footer-title: #fff;
  --footer-logo: #fff;
  --bw: 1px;
  --bw-sm: 1px;
  --border: 1px solid var(--line);
  --border-sm: 1px solid var(--line);
  /* 銳利的硬陰影 */
  --pop-press: 0 0 0 rgba(0, 0, 0, 0);
  --pop-xs: 0 2px 0 rgba(0, 0, 0, .35);
  --pop-sm: 0 4px 0 rgba(0, 0, 0, .35);
  --pop: 0 6px 0 rgba(0, 0, 0, .35), 0 16px 30px -18px rgba(0, 0, 0, .9);
  --pop-lg: 0 8px 0 rgba(0, 0, 0, .35), 0 22px 40px -20px rgba(0, 0, 0, .9);
  --pop-xl: 0 10px 0 rgba(0, 0, 0, .35), 0 26px 46px -20px rgba(0, 0, 0, .9);
  --tpop-xs: 2px 2px 0 rgba(0, 0, 0, .5);
  --tpop-sm: 3px 3px 0 rgba(0, 0, 0, .45);
  --tpop: 4px 4px 0 rgba(0, 0, 0, .45);
  --tpop-lg: 6px 6px 0 rgba(255, 90, 31, .28);
  --tstroke: transparent;
  --r-xs: 0;
  --r-sm: 0;
  --r: 0;
  --r-lg: 0;
  --r-pill: 0;
  --r-round: 0;
  --tilt: 0;
  --font-display: "Chakra Petch", "Noto Sans TC", system-ui, -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif;
  --body-weight: 400;
  --heading-weight: 900;
  --heading-spacing: .04em;
  --heading-case: uppercase;
  /* 隊伍色 */
  --coral: #ff5a1f;
  --sun: #ffd400;
  --teal: #00d1b2;
  --grape: #8f6bff;
  --sky: #2f9bff;
  --pink: #ff3d6e;
  --mint: #3ddc84;
  --doodle: rgba(255, 255, 255, .1);
  /* 切角 */
  --cut: 12px;
  --clip: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  --slant: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  --slant-sm: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  --stripes: repeating-linear-gradient(-60deg, rgba(0, 0, 0, .16) 0 3px, transparent 3px 14px);
  --gp: color-mix(in srgb, var(--c-primary) 40%, transparent);
}

.tone-coral { --tone: var(--coral); --tone-deep: #8a2a08; --tone-a: rgba(255, 90, 31, .3); --tone-soft: rgba(255, 90, 31, .12); --tone-fg: #140b05; }
.tone-sun { --tone: var(--sun); --tone-deep: #7a6200; --tone-a: rgba(255, 212, 0, .26); --tone-soft: rgba(255, 212, 0, .1); --tone-fg: #141000; }
.tone-teal { --tone: var(--teal); --tone-deep: #005a4d; --tone-a: rgba(0, 209, 178, .26); --tone-soft: rgba(0, 209, 178, .1); --tone-fg: #02181a; }
.tone-grape { --tone: var(--grape); --tone-deep: #33208a; --tone-a: rgba(143, 107, 255, .3); --tone-soft: rgba(143, 107, 255, .12); --tone-fg: #0d0820; }
.tone-sky { --tone: var(--sky); --tone-deep: #0d3f80; --tone-a: rgba(47, 155, 255, .28); --tone-soft: rgba(47, 155, 255, .12); --tone-fg: #03111f; }
.tone-pink { --tone: var(--pink); --tone-deep: #7a1030; --tone-a: rgba(255, 61, 110, .3); --tone-soft: rgba(255, 61, 110, .12); --tone-fg: #1a0309; }
.tone-mint { --tone: var(--mint); --tone-deep: #0f6034; --tone-a: rgba(61, 220, 132, .26); --tone-soft: rgba(61, 220, 132, .1); --tone-fg: #03170b; }

body { background-position: -1px -1px; }
::selection { background: var(--c-primary); color: #140b05; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* HUD 圖紋遮罩（覆寫塗鴉） */
.slide::after, .cat-art::before, .page-hero > .container::before, .showcase::before {
  -webkit-mask: url("/static/img/themes/esports/hud.svg") 0 0 / 240px 240px repeat;
  mask: url("/static/img/themes/esports/hud.svg") 0 0 / 240px 240px repeat;
}

/* 切角面板：右上、左下斜切，斜邊補畫細線 */
.gcard, .pcard, .tile, .intro-card, .faq-card, .info-card, .article, .doc, .aside-card, .form-card, .cta-card, .cat-intro, .sc-panel, .drop-card, .mcard, .page-hero > .container {
  --edge: var(--line);
  --cut-tr: linear-gradient(225deg, transparent calc(50% - 1px), var(--edge) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) right top / var(--cut) var(--cut) no-repeat border-box;
  --cut-bl: linear-gradient(45deg, transparent calc(50% - 1px), var(--edge) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) left bottom / var(--cut) var(--cut) no-repeat border-box;
  clip-path: var(--clip); border-radius: 0;
}
.info-card, .article, .doc, .aside-card, .form-card, .cat-intro, .faq-card {
  background: var(--cut-tr), var(--cut-bl), linear-gradient(180deg, #1a2028, #161a21); border: 1px solid var(--edge); box-shadow: none;
}

/* ---------- 共用元件：斜切按鈕 ---------- */
.btn, .slide-btn, .search-go, .hdr-btn, .sheet-close {
  clip-path: var(--slant); border: 0; border-radius: 0; box-shadow: none;
  background: var(--c-primary); color: #140b05; padding: 0 28px;
  font-family: var(--font-display); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  transition: background .15s, transform .15s, filter .15s;
}
.btn:hover, .slide:hover .slide-btn, .search-go:hover, .hdr-btn:hover, .sheet-close:hover { transform: translateY(-1px); box-shadow: none; filter: brightness(1.12); }
.btn:active { transform: translateY(1px); box-shadow: none; filter: brightness(.95); }
.btn-ghost { background: #262e39; color: #fff; }

.badge { height: 20px; padding: 0 9px; border: 0; border-radius: 0; clip-path: var(--slant-sm); font: 700 11px/1 var(--font-display); letter-spacing: .1em; box-shadow: none; }
.badge-hot { background: var(--c-primary); color: #140b05; }
.badge-new { background: var(--c-secondary); color: #02181a; }

.chip, .tag, .rail-tab, .sc-pill, .pg-btn, .sec-more, .sc-act, .share-btn, .rail-more, .sc-panel-meta a, .sc-panel-meta > span:not(.badge), .hdr-search {
  background: #1e252e; color: var(--text-2); border: 0; border-radius: 0; box-shadow: inset 0 -2px 0 #2f3945; clip-path: var(--slant-sm);
  font-family: var(--font-display); font-weight: 700; letter-spacing: .04em;
}
.chip, .rail-tab, .sc-pill, .sec-more, .sc-act, .share-btn { padding-left: 18px; padding-right: 18px; }
.chip:hover, .tag:hover, .pg-btn:hover, .sec-more:hover, .sc-pill:hover, .sc-act:hover, .share-btn:hover, .rail-more:hover, .sc-panel-meta a:hover, .hdr-search:hover { background: #283240; color: #fff; box-shadow: inset 0 -2px 0 var(--c-primary); transform: none; }
.chip.active, .rail-tab.active, .pg-btn.active { background: var(--c-primary); color: #140b05; box-shadow: none; }
.chip small { color: inherit; opacity: .7; }

/* =========================================================
   頂部：轉播條，選單靠左
   ========================================================= */
.hdr { border-bottom: 1px solid var(--line); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .9); }
.hdr::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--c-primary) 0 22%, var(--c-accent) 22% 24%, transparent 24%), linear-gradient(90deg, transparent 76%, var(--c-secondary) 76% 78%, var(--c-primary) 78%); }
.hdr-in { height: 72px; gap: 14px; }
.logo { gap: 10px; }
.logo-en { font: 700 27px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.logo-zh { background: var(--c-primary); color: #140b05; border: 0; border-radius: 0; clip-path: var(--slant-sm); box-shadow: none; padding: 6px 12px 7px; font-weight: 900; }
.logo-badge { background: var(--c-accent); color: #141000; border: 0; border-radius: 0; clip-path: var(--slant-sm); padding: 4px 8px; }
.hdr-nav { justify-content: flex-start; align-self: stretch; align-items: stretch; gap: 0; padding-left: 16px; border-left: 1px solid var(--line); }
.nav-item { display: flex; }
.nav-link { height: auto; padding: 0 14px; border: 0; border-radius: 0; font: 700 15px var(--font); letter-spacing: .06em; color: var(--text-2); }
.nav-link:hover { background: linear-gradient(0deg, rgba(255, 255, 255, .05), transparent); color: #fff; box-shadow: inset 0 -3px 0 #3a4552; border-color: transparent; }
.nav-link.active { background: linear-gradient(0deg, rgba(255, 90, 31, .16), transparent 70%); color: #fff; box-shadow: inset 0 -3px 0 var(--c-primary); border-color: transparent; }
.nav-dot { width: 22px; height: 22px; border: 0; background: var(--tone); color: var(--tone-fg); clip-path: var(--slant-sm); font-size: 11px; }
.drop { top: 100%; }
.drop-card { --edge: var(--tone); background: var(--cut-tr), var(--cut-bl), #161a21; border: 1px solid var(--tone); box-shadow: none; }
.drop-head { background: var(--stripes), var(--tone); color: var(--tone-fg); border-bottom: 0; }
.drop-head strong { font-family: var(--font); font-weight: 900; letter-spacing: .06em; }
.drop-game { background: #0f1217; border: 1px solid var(--line); border-radius: 0; }
.drop-game:hover { transform: translateY(-2px); border-color: var(--tone); }
.drop-game img { border-bottom: 2px solid var(--tone); }
.drop-game span { font-family: var(--font); font-weight: 700; }

.hdr-search { height: 40px; padding: 0 18px; color: var(--text-2); }
.hdr-btn { height: 40px; background: var(--c-accent); color: #141000; }
.hdr-btn + .hdr-btn { background: var(--c-primary); color: #140b05; }
.hdr-icon { background: var(--c-accent); color: #141000; border: 0; border-radius: 0; clip-path: var(--slant-sm); box-shadow: none; width: 44px; }

.search-box-big { background: #161a21; border: 1px solid var(--line); border-top: 3px solid var(--c-primary); border-radius: 0; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9); color: var(--c-primary); }
.search-box-big input { color: #fff; }
.search-box-big input::placeholder, .big-search input::placeholder { color: var(--muted); }
.search-go { border-radius: 0; }
.search-close { border-radius: 0; color: var(--text-2); }

.appbar { background: #161a21; border-bottom: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--c-primary); }
.appbar-icon { border: 0; border-radius: 0; }
.appbar-btn { background: var(--c-primary); color: #140b05; border-radius: 0; clip-path: var(--slant-sm); }

/* =========================================================
   首頁主視覺：斜切分割畫面 + 排行榜在上
   ========================================================= */
.hero { --cut: 26px; background: #12161c; border: 0; border-radius: 0; box-shadow: none; clip-path: var(--clip); }
.theme-neon { --tone: #8f6bff; --tone-deep: #2a1a6e; }
.theme-ocean { --tone: #2f9bff; --tone-deep: #0b3a73; }
.theme-sunset { --tone: #ff5a1f; --tone-deep: #7a2408; }
.theme-forest { --tone: #00d1b2; --tone-deep: #00473f; }
.theme-candy { --tone: #ff3d6e; --tone-deep: #6e0d2a; }
.slide:not(.has-bg) { background: linear-gradient(105deg, #14181f 0 49.8%, transparent 50%), var(--stripes), linear-gradient(160deg, var(--tone), var(--tone-deep)); }
.slide:not(.has-bg)::before { content: ""; position: absolute; z-index: 1; top: -10px; bottom: -10px; left: calc(50% - 7px); width: 10px; background: var(--c-accent); transform: skewX(-15deg); box-shadow: -18px 0 0 -2px rgba(255, 255, 255, .08); }
.slide::after { --doodle: rgba(255, 255, 255, .07); }
.slide-in { grid-template-columns: 1fr 1fr; }
.slide-eyebrow { background: var(--c-primary); color: #140b05; border: 0; border-radius: 0; box-shadow: none; clip-path: var(--slant-sm); padding: 6px 16px; font: 700 14px/1.2 var(--font-display); letter-spacing: .24em; }
.slide-title { font-family: var(--font); font-weight: 900; letter-spacing: .06em; -webkit-text-stroke: 0; text-shadow: 4px 4px 0 rgba(0, 0, 0, .4); }
.slide-title::after { content: ""; display: block; width: 84px; height: 5px; margin-top: 12px; background: var(--c-primary); transform: skewX(-20deg); }
.slide-sub { color: var(--text-2); font-weight: 500; text-shadow: none; }
.slide-btn { height: 48px; }
.art-free img { filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, .3)); }
.art-card img { background: #0f1217; padding: 6px; border: 0; border-radius: 0; box-shadow: none; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); filter: drop-shadow(8px 8px 0 rgba(0, 0, 0, .35)); }
.hero-arrow { background: #1e252e; color: #fff; border: 0; border-radius: 0; box-shadow: none; clip-path: var(--slant-sm); width: 42px; }
.hero-arrow:hover { background: var(--c-primary); color: #140b05; transform: none; }
.hero-bars button { width: 18px; height: 5px; background: rgba(255, 255, 255, .22); border: 0; border-radius: 0; transform: skewX(-20deg); }
.hero-bars button.active { width: 46px; }
.hero-bars .active i::after { background: var(--c-primary); }

.hero-side { grid-template-rows: 1fr auto; }
.tile-top { order: -1; padding: 0; }
.tile { --edge: var(--line); background: var(--cut-tr), var(--cut-bl), #161a21; border: 1px solid var(--edge); box-shadow: none; }
.tile-title { margin: 0; padding: 11px 16px; background: var(--stripes), var(--c-primary); color: #140b05; font: 700 16px var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.tile-title .ic { color: #140b05; }
.tile-title::after { content: "LIVE"; margin-left: auto; padding: 2px 8px; background: #140b05; color: #fff; font: 700 11px var(--font-display); letter-spacing: .2em; }
.top3 { padding: 6px 10px 10px; gap: 0; counter-reset: none; }
.top3 li + li { border-top: 1px solid var(--line); }
.top3 a { padding: 10px 6px; border-radius: 0; }
.top3 a:hover { background: linear-gradient(90deg, rgba(255, 90, 31, .14), transparent); }
.top3 a::after { content: "›"; margin-left: auto; color: var(--muted); font: 700 22px/1 var(--font-display); }
.rank { width: 34px; height: 28px; border: 0; border-radius: 0; clip-path: var(--slant-sm); font: 700 16px var(--font-display); }
.rank-1 { background: var(--c-accent); color: #141000; }
.rank-2 { background: var(--c-secondary); color: #02181a; }
.rank-3 { background: var(--c-primary); color: #140b05; }
.top3 img { border: 0; border-radius: 0; }
.top3-t strong { font-family: var(--font); font-weight: 700; }
.tile-random { --edge: var(--c-accent); background: var(--cut-tr), var(--cut-bl), linear-gradient(105deg, #1b2129 0 70%, transparent 70%), var(--stripes), #3a3110; border-color: var(--c-accent); }
.tile-random:hover { transform: translateY(-2px); box-shadow: none; }
.tile-text::before { content: "QUICK MATCH"; font: 700 11px var(--font-display); letter-spacing: .26em; color: var(--c-accent); }
.tile-text strong { font-family: var(--font); font-weight: 900; letter-spacing: .06em; }
.tile-go { background: var(--c-accent); color: #141000; clip-path: var(--slant-sm); }
.dice { background: #0f1217; border: 1px solid var(--c-accent); border-radius: 0; box-shadow: 4px 4px 0 rgba(0, 0, 0, .4); transform: none; }
.dice i { background: var(--c-accent); }
.dice i:nth-child(3) { background: var(--c-primary); }

/* 公告：轉播跑馬燈 */
.ticker { background: #12161c; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: inset 0 2px 0 rgba(255, 90, 31, .5); }
.ticker-label { background: var(--c-primary); color: #140b05; padding: 0 34px 0 28px; clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%); font: 900 15px var(--font); letter-spacing: .14em; }
.marquee-track { color: var(--text); font-weight: 700; }
.marquee-track span::before { content: "▸"; color: var(--c-primary); }

/* =========================================================
   區塊標題：HUD 樣式
   ========================================================= */
main { counter-reset: sec; }
.sec-head { position: relative; counter-increment: sec; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.sec-head::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 140px; height: 3px; background: linear-gradient(90deg, var(--c-primary) 0 80%, var(--c-accent) 80%); }
.sec-head h2 { font-family: var(--font); font-weight: 900; font-size: 26px; letter-spacing: .08em; }
.sec-head h2::after { content: "/ " counter(sec, decimal-leading-zero); align-self: flex-start; margin-left: 2px; font: 700 12px var(--font-display); letter-spacing: .14em; color: var(--c-primary); }
.sec-mark, .sec-head h2 > .ic { width: 40px; height: 34px; border: 0; border-radius: 0; background: var(--tone, var(--c-primary)); color: var(--tone-fg, #140b05); clip-path: var(--slant); box-shadow: none; transform: none; }
.sec-head h2 > .ic { padding: 7px 10px; stroke-width: 2.4; }
.sec-more, .sec-head > a:not(.sec-more) { display: inline-flex; align-items: center; gap: 6px; height: 34px; font-size: 13px; text-transform: uppercase; }
.sec-head > a:not(.sec-more) { padding: 0 18px; background: #1e252e; clip-path: var(--slant-sm); font: 700 13px var(--font-display); color: var(--text-2); }
.sec-head > a:not(.sec-more):hover { color: #fff; background: #283240; }
.h-sm { font-family: var(--font); letter-spacing: .06em; padding-left: 12px; border-left: 4px solid var(--c-primary); }

/* 分類卡：斜切隊伍陣容 */
.cat-tile { background: #171c23; border: 0; border-radius: 0; box-shadow: none; clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%); }
.cat-tile:hover { transform: translateY(-5px); box-shadow: none; }
.cat-art { background: var(--stripes), linear-gradient(160deg, var(--tone), var(--tone-deep)); }
.cat-art::before { --doodle: rgba(255, 255, 255, .14); }
.cat-art img { filter: drop-shadow(8px 8px 0 rgba(0, 0, 0, .28)); }
.cat-big { color: var(--tone-fg); }
.cat-meta { padding: 12px 26px 14px 14px; border-top: 3px solid var(--tone); background: linear-gradient(180deg, #1c222b, #161a21); }
.cat-tile:hover .cat-meta { background: linear-gradient(180deg, #232b36, #1a2028); }
.cat-ico { background: var(--tone); color: var(--tone-fg); border: 0; border-radius: 0; clip-path: var(--slant-sm); width: 34px; height: 30px; }
.cat-txt strong { font-family: var(--font); font-weight: 900; letter-spacing: .06em; }
.cat-txt small { font: 700 10.5px var(--font-display); letter-spacing: .18em; color: var(--muted); }
.cat-count { background: transparent; color: var(--tone); padding: 0; min-width: 0; font: 700 24px var(--font-display); }

/* 遊戲卡：轉播下三分之一標題 */
.gcard { --cut: 14px; background: var(--cut-tr), var(--cut-bl), #171c23; border: 1px solid var(--edge); box-shadow: none; }
.gcard::before { content: ""; position: absolute; z-index: 4; left: 0; top: 0; width: 34%; height: 3px; background: var(--c-primary); transition: width .25s; }
.gcard:hover { --edge: #4a5868; transform: translateY(-4px); box-shadow: none; }
.gcard:hover::before { width: 100%; }
.gcard-link { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; padding: 0 0 14px; }
.gcard-body { display: contents; }
.gcard-media { grid-area: 1 / 1; border: 0; border-radius: 0; background: #0f1217; }
.gcard-media::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(8, 10, 13, .55)); pointer-events: none; }
.gcard-title {
  grid-area: 1 / 1; align-self: end; justify-self: start; z-index: 2; max-width: calc(100% - 14px); margin: 0 0 10px;
  padding: 5px 18px 5px 10px; background: rgba(10, 12, 16, .9); border-left: 3px solid var(--c-primary);
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  font: 900 15.5px/1.35 var(--font); letter-spacing: .06em; color: #fff;
}
.gcard-play { background: var(--c-primary); color: #140b05; border: 0; border-radius: 0; clip-path: polygon(0 0, 100% 50%, 0 100%); box-shadow: none; width: 46px; height: 50px; margin: -25px 0 0 -18px; }
.gcard-desc { padding: 0 12px; margin-top: 10px; color: var(--muted); }
.gcard-cat { justify-self: start; margin: 10px 12px 0; padding: 2px 12px 2px 10px; background: #222a34; color: var(--text-2); border: 0; border-radius: 0; clip-path: var(--slant-sm); font-family: var(--font-display); font-weight: 700; letter-spacing: .04em; }
.gcard-cat .ic { color: var(--c-primary); }
.badges { left: 10px; top: 12px; z-index: 3; }
.fav-btn { right: 12px; top: 12px; background: rgba(10, 12, 16, .78); color: #fff; border: 1px solid #3a4552; border-radius: 0; box-shadow: none; }
.fav-btn:hover { border-color: var(--c-primary); }
.fav-btn[aria-pressed="true"] { background: var(--c-primary); color: #140b05; border-color: var(--c-primary); }

/* 文章卡 */
.pcard { --cut: 14px; background: var(--cut-tr), var(--cut-bl), #171c23; border: 1px solid var(--edge); box-shadow: none; }
.pcard:hover { --edge: #4a5868; transform: translateY(-4px); box-shadow: none; }
.pcard-media { border-bottom: 3px solid var(--tone, var(--c-primary)); }
.pcard-tag { background: var(--tone, var(--c-primary)); color: var(--tone-fg, #140b05); border: 0; border-radius: 0; clip-path: var(--slant-sm); padding: 2px 12px; font-family: var(--font-display); font-weight: 700; letter-spacing: .06em; }
.pcard-title { font-family: var(--font); font-weight: 900; letter-spacing: .03em; text-transform: none; }

/* 首頁底部：賽事資訊 + 計分板 */
.intro-card {
  --edge: var(--line); border: 1px solid var(--edge); box-shadow: inset 4px 0 0 var(--c-primary);
  background: var(--cut-tr), var(--cut-bl),
    linear-gradient(105deg, #1a2028 0 34%, transparent 34.5%) right top / 230px 92px no-repeat,
    repeating-linear-gradient(-60deg, rgba(0, 0, 0, .22) 0 3px, transparent 3px 14px) right top / 230px 92px no-repeat,
    linear-gradient(160deg, var(--c-primary), #7a2408) right top / 230px 92px no-repeat,
    #1a2028;
}
.intro-card .tape { display: none; }
.intro-card h2 { font-family: var(--font); letter-spacing: .08em; text-shadow: none; }
.intro-card h2::before { content: "MATCH INFO"; display: block; margin-bottom: 4px; font: 700 11px var(--font-display); letter-spacing: .3em; color: var(--c-primary); }
.intro-card .prose { color: var(--text-2); }
.intro-card .prose strong { color: var(--c-accent); }
.intro-stats div { background: #0f1217; color: var(--muted); border: 0; border-top: 3px solid var(--tone); border-radius: 0; box-shadow: none; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
.intro-stats strong { font: 700 38px/1.05 var(--font-display); color: var(--tone); }
.intro-stats span { letter-spacing: .06em; }
.faq-card h2, .faq-group h2 { font-family: var(--font); letter-spacing: .06em; }
.faq-item { background: #12161c; border: 1px solid var(--line); border-radius: 0; }
.faq-item summary { font-family: var(--font); font-weight: 700; }
.faq-item summary .ic { background: #222a34; color: var(--c-primary); border: 0; border-radius: 0; clip-path: var(--slant-sm); width: 32px; }
.faq-item[open] { background: #1a2028; border-color: #3a4552; box-shadow: inset 3px 0 0 var(--c-primary); }
.faq-item[open] summary .ic { background: var(--c-primary); color: #140b05; }

/* =========================================================
   內頁標題：分割畫面
   ========================================================= */
.page-hero > .container { --cut: 20px; background: linear-gradient(105deg, #1a2028 0 62%, transparent 62.1%), var(--stripes), linear-gradient(160deg, var(--c-primary), #6e2208); border: 0; box-shadow: none; }
.page-hero-cat > .container { background: linear-gradient(105deg, #1a2028 0 62%, transparent 62.1%), var(--stripes), linear-gradient(160deg, var(--c-secondary), #004a40); }
.page-hero > .container::before { --doodle: rgba(255, 255, 255, .06); }
.page-hero h1 { font-family: var(--font); letter-spacing: .08em; text-shadow: none; }
.page-hero h1::before { content: ""; align-self: stretch; width: 6px; margin-right: 2px; background: var(--c-primary); transform: skewX(-14deg); }
.page-hero-cat h1::before { background: var(--c-secondary); }
.page-hero-sub { color: var(--text-2); font-weight: 500; }
.page-hero-sub a { color: #fff; text-decoration-color: var(--c-primary); }
.page-hero-icon { background: var(--c-secondary); color: #02181a; border: 0; border-radius: 0; box-shadow: none; clip-path: var(--slant); width: 66px; }
.page-hero .crumbs { color: var(--muted); font-family: var(--font-display); letter-spacing: .04em; }
.crumbs a:hover, .page-hero .crumbs a:hover { color: var(--c-primary); }
.sorts { padding: 0; background: transparent; border: 0; box-shadow: none; gap: 4px; }
.sorts a { padding: 7px 16px; background: #1e252e; color: var(--text-2); clip-path: var(--slant-sm); font-family: var(--font-display); font-weight: 700; }
.sorts a.active { background: var(--c-secondary); color: #02181a; }
.empty > .ic { background: #1e252e; color: var(--c-primary); border: 0; border-radius: 0; box-shadow: none; clip-path: var(--clip); }

/* =========================================================
   遊戲展示區：競技場
   ========================================================= */
.showcase { background: radial-gradient(55% 60% at 50% 100%, var(--sc-glow), transparent 70%), repeating-linear-gradient(-60deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 18px), linear-gradient(180deg, #0f1217, var(--sc-bg)); border-bottom: 3px solid var(--sc-main); --doodle: rgba(255, 255, 255, .06); }
.sc-sakura { --sc-bg: #24131b; --sc-main: #ff3d6e; --sc-fg: #1a0309; --sc-glow: rgba(255, 61, 110, .22); }
.sc-sky { --sc-bg: #0f1c2a; --sc-main: #2f9bff; --sc-fg: #03111f; --sc-glow: rgba(47, 155, 255, .22); }
.sc-mint { --sc-bg: #0e2220; --sc-main: #00d1b2; --sc-fg: #02181a; --sc-glow: rgba(0, 209, 178, .2); }
.sc-lavender { --sc-bg: #181530; --sc-main: #8f6bff; --sc-fg: #0d0820; --sc-glow: rgba(143, 107, 255, .24); }
.sc-sunset { --sc-bg: #241509; --sc-main: #ff5a1f; --sc-fg: #140b05; --sc-glow: rgba(255, 90, 31, .22); }
.sc-night { --sc-bg: #0a0c10; --sc-main: #ffd400; --sc-fg: #141000; --sc-glow: rgba(255, 212, 0, .12); }
.sc-pill.active { background: var(--sc-main); color: var(--sc-fg); box-shadow: none; }
.sc-title { font-family: var(--font); font-weight: 900; letter-spacing: .1em; color: #fff; -webkit-text-stroke: 0; text-shadow: 5px 5px 0 rgba(0, 0, 0, .45); }
.sc-title::after { content: ""; display: block; width: 120px; height: 7px; margin: 10px auto 0; background: var(--sc-main); transform: skewX(-20deg); box-shadow: 14px 0 0 -1px var(--c-accent); }
.sc-tagline { background: #12161c; color: #fff; border: 0; border-left: 4px solid var(--sc-main); border-radius: 0; box-shadow: none; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); padding-right: 30px; font-family: var(--font); font-weight: 700; letter-spacing: .16em; }
.sc-panel { --cut: 22px; --edge: #3a4552; background: var(--cut-tr), var(--cut-bl), linear-gradient(180deg, rgba(28, 34, 43, .96), rgba(20, 24, 31, .96)); border: 1px solid var(--edge); border-top: 3px solid var(--sc-main); box-shadow: none; }
.sc-panel .tape { display: none; }
.sc-panel-text { color: var(--text); font-weight: 500; }
.sc-start, .sc-night .sc-start {
  min-width: 260px; height: 62px; padding: 0 46px 0 36px; border: 0; border-radius: 0; box-shadow: none;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%, 16px 50%);
  background: var(--c-primary); color: #140b05; font: 900 22px var(--font); letter-spacing: .16em;
}
.sc-start:hover { transform: translateX(3px); box-shadow: none; filter: brightness(1.12); }
.sc-start:active { transform: translateX(1px); box-shadow: none; }
.sc-start-sm { min-width: 0; height: 50px; padding: 0 40px 0 30px; font-size: 17px; }
.sc-act { height: 36px; padding: 0 16px; color: var(--text); }
.sc-act.fav-btn { background: #1e252e; border: 0; }
.sc-act.fav-btn[aria-pressed="true"] { background: var(--c-primary); color: #140b05; }
.sc-side img { filter: drop-shadow(12px 12px 0 rgba(0, 0, 0, .3)); }
.sc-card img { background: #0f1217; padding: 8px; border: 0; border-radius: 0; box-shadow: none; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, .35)); }

.info-card h2 { font-family: var(--font); letter-spacing: .06em; }
.info-card h2 .ic { background: var(--c-primary); color: #140b05; border: 0; border-radius: 0; clip-path: var(--slant-sm); width: 40px; }
.info-how { box-shadow: inset 0 3px 0 var(--c-secondary); }
.game-lead { color: var(--text); }
.side-game { border-radius: 0; }
.side-game:hover { background: linear-gradient(90deg, rgba(255, 90, 31, .14), transparent); }
.side-game img { border: 0; border-radius: 0; }
.side-game strong, .aside-title, .toc-title, .post-list a { font-family: var(--font); }
.aside-title, .toc-title { text-transform: uppercase; letter-spacing: .1em; padding-left: 10px; border-left: 3px solid var(--c-primary); }
.side-play { color: var(--c-primary); }
.post-list a { background: #171c23; border: 1px solid var(--line); border-radius: 0; box-shadow: none; font-weight: 700; }
.post-list a:hover { background: #1e252e; box-shadow: inset 3px 0 0 var(--c-primary); transform: none; }
.post-list a .ic { color: var(--c-primary); }

/* 全螢幕播放頁 */
.page-play, .pw-stage { background: #07090c; }
.pw-bar { background: #12161c; border-bottom: 2px solid var(--c-primary); }
.pw-title { font-family: var(--font); font-weight: 900; letter-spacing: .08em; }
.pw-actions button, .pw-actions a { background: #1e252e; color: #fff; border: 0; border-radius: 0; box-shadow: none; clip-path: var(--slant-sm); padding: 0 18px; font-family: var(--font-display); font-weight: 700; }
.pw-actions button:hover, .pw-actions a:hover { background: var(--c-primary); color: #140b05; }
.pw-exit { background: #12161c; color: #fff; border: 1px solid var(--c-primary); border-radius: 0; }

/* =========================================================
   文章、頁面、表單
   ========================================================= */
.prose h2, .prose h3 { font-family: var(--font); letter-spacing: .04em; text-transform: none; }
.prose h2::after { width: 64px; height: 4px; border: 0; border-radius: 0; background: var(--c-primary); transform: skewX(-20deg); transform-origin: left; }
.prose a { color: #fff; text-decoration-color: var(--c-primary); text-decoration-thickness: 2px; }
.prose a:hover { background: rgba(255, 90, 31, .15); }
.prose li::marker { color: var(--c-primary); }
.prose blockquote { background: #12161c; border: 0; border-left: 4px solid var(--c-primary); border-radius: 0; }
.prose code { background: #222a34; color: var(--c-accent); border-radius: 0; }
.prose pre { background: #07090c; border: 1px solid var(--line); border-radius: 0; }
.prose img, .prose th, .prose td { border: 1px solid var(--line); border-radius: 0; }
.prose th { background: #1e252e; text-transform: uppercase; letter-spacing: .06em; }
.article-head h1 { font-family: var(--font); letter-spacing: .03em; text-transform: none; }
.article-cover img { border: 0; border-radius: 0; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); }
.article-lead { background: #12161c; border: 0; border-left: 4px solid var(--c-secondary); border-radius: 0; color: var(--text); font-weight: 500; }
.toc { background: #12161c; border: 1px solid var(--line); border-radius: 0; box-shadow: inset 0 3px 0 var(--c-primary); }
.toc a:hover { color: var(--c-primary); background: none; }
.article-foot { border-top: 1px solid var(--line); }
.cta-card { --edge: var(--c-primary); background: var(--cut-tr), var(--cut-bl), linear-gradient(105deg, #1a2028 0 66%, transparent 66%), var(--stripes), var(--c-primary); border: 1px solid var(--edge); box-shadow: none; }
.cta-card strong { font-family: var(--font); font-weight: 900; letter-spacing: .06em; }
.cta-card .btn { background: #0f1217; color: #fff; }
.faq-group h2::before { content: "//"; margin-right: 10px; color: var(--c-primary); font-family: var(--font-display); }
.form label { display: block; font-family: var(--font); font-weight: 700; letter-spacing: .04em; }
.form label > input, .form label > select, .form label > textarea { display: block; margin-top: 8px; }
.form label b { color: var(--c-primary); }
.form input, .form select, .form textarea { background: #0f1217; border: 1px solid var(--line); border-radius: 0; color: var(--text); }
.form input:focus, .form select:focus, .form textarea:focus { background: #12161c; border-color: var(--c-primary); box-shadow: inset 3px 0 0 var(--c-primary); }
.alert { border-radius: 0; }
.alert-ok { background: rgba(0, 209, 178, .12); border-color: var(--c-secondary); color: #d5fff7; }
.alert-err { background: rgba(255, 61, 110, .12); border-color: var(--pink); color: #ffe0e8; }
.contact-line a { text-decoration-color: var(--c-primary); }
.socials-dark a { background: #1e252e; color: #fff; border: 0; box-shadow: none; }
.big-search { background: #161a21; border: 1px solid var(--line); border-left: 4px solid var(--c-primary); border-radius: 0; box-shadow: none; color: var(--c-primary); }
.big-search .btn { height: 44px; }
.error-code { font: 700 160px/1 var(--font-display); letter-spacing: .06em; color: transparent; -webkit-text-stroke: 2px var(--c-primary); text-shadow: 8px 8px 0 rgba(255, 90, 31, .18); }
.error-hero h1 { font-family: var(--font); letter-spacing: .06em; }

/* =========================================================
   頁尾：警示斜紋
   ========================================================= */
.footer { border-top: 1px solid var(--line); }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-linear-gradient(-45deg, var(--c-primary) 0 12px, transparent 12px 24px); opacity: .85; }
.footer-wave { display: none; }
.footer-grid { padding-top: 54px; }
.f-title { display: flex; align-items: center; gap: 8px; font: 700 14px var(--font-display); letter-spacing: .2em; text-transform: uppercase; }
.f-title::before { content: ""; width: 8px; height: 8px; background: var(--c-primary); transform: skewX(-15deg); }
.f-links a:hover { color: #fff; text-decoration-color: var(--c-primary); }
.socials a { background: #1a2028; border: 0; border-radius: 0; clip-path: var(--slant-sm); }
.socials a:hover { background: var(--c-primary); color: #140b05; transform: none; }
.footer-bottom { border-top: 1px solid var(--line); font-family: var(--font); }
.to-top { background: var(--c-primary); color: #140b05; border: 0; border-radius: 0; box-shadow: none; clip-path: var(--slant-sm); }
.toast { background: #12161c; color: #fff; border: 0; border-left: 4px solid var(--c-primary); border-radius: 0; box-shadow: 0 16px 30px -10px rgba(0, 0, 0, .8); font-family: var(--font); }

@media (max-width: 1360px) and (min-width: 900px) {
  .nav-link { padding: 0 11px; }
}
@media (max-width: 1200px) and (min-width: 900px) {
  .hdr-btn { padding: 0; clip-path: var(--slant-sm); }
  .hdr-nav { padding-left: 8px; }
  .nav-link { padding: 0 9px; font-size: 14.5px; letter-spacing: .02em; }
}
@media (min-width: 900px) and (max-width: 1100px) {
  .logo-en { font-size: 23px; letter-spacing: .03em; }
  .hdr-in { gap: 10px; }
}

/* =========================================================
   手機版
   ========================================================= */
@media (max-width: 899.98px) {
  .hdr-in { height: 60px; }
  .logo-en { font-size: 22px; }
  .logo-zh { font-size: 12.5px; padding: 4px 10px 5px; box-shadow: none; }
  .hdr-search { width: 44px; padding: 0; box-shadow: inset 0 -2px 0 #2f3945; }
  .hero { --cut: 16px; box-shadow: none; }
  .slide:not(.has-bg) { background: linear-gradient(105deg, #14181f 0 54%, transparent 54.2%), var(--stripes), linear-gradient(160deg, var(--tone), var(--tone-deep)); }
  .slide:not(.has-bg)::before { left: calc(54% - 5px); width: 6px; }
  .slide-in { grid-template-columns: 1.15fr 1fr; }
  .slide-eyebrow { font-size: 10.5px; padding: 3px 10px; letter-spacing: .16em; }
  .slide-title { font-size: 24px; text-shadow: 3px 3px 0 rgba(0, 0, 0, .4); }
  .slide-title::after { width: 54px; height: 4px; margin-top: 6px; }
  .slide-btn { height: 36px; padding: 0 18px; font-size: 13px; }
  .hero-bars button { height: 4px; }
  .tile-random { padding: 14px 18px; }
  .dice { width: 46px; height: 46px; }
  .ticker-label { padding: 0 26px 0 18px; font-size: 13.5px; }

  .rail { background: rgba(15, 18, 23, .96); border-bottom: 1px solid var(--line); }
  .rail-tab { padding: 0 16px; }
  .mcard { --cut: 10px; background: var(--cut-tr), var(--cut-bl), #171c23; border: 1px solid var(--edge); box-shadow: none; }
  .mcard:active { transform: translateY(1px); box-shadow: none; }
  .mcard-img { border-bottom: 3px solid var(--c-primary); }
  .mcard .badge { left: 8px; top: 8px; }
  .mcard-label strong { font-family: var(--font); font-weight: 900; letter-spacing: .04em; }
  .rail-more { height: 44px; clip-path: var(--slant); text-transform: uppercase; }

  .sec-head { padding-bottom: 10px; }
  .sec-head h2 { font-size: 20px; gap: 9px; }
  .sec-head h2::after { font-size: 10.5px; }
  .sec-mark, .sec-head h2 > .ic { width: 34px; height: 30px; }
  .sec-head h2 > .ic { padding: 6px 9px; }
  .sec-more, .sec-head > a:not(.sec-more) { height: 32px; padding: 0 14px; font-size: 12px; }
  .gcard { box-shadow: none; }
  .gcard:hover { transform: none; box-shadow: none; }
  .gcard-link { padding: 0 0 12px; }
  .gcard-title { font-size: 13.5px; padding: 4px 14px 4px 8px; margin-bottom: 7px; }
  .gcard-cat { margin: 9px 9px 0; }
  .badges { left: 7px; top: 8px; }
  .fav-btn { right: 8px; top: 8px; }
  .pcard { box-shadow: none; }
  .pcard-media { border-bottom: 0; border-right: 3px solid var(--tone, var(--c-primary)); }
  .intro-card, .faq-card { box-shadow: inset 4px 0 0 var(--c-primary); }
  .faq-card { box-shadow: none; }
  .intro-stats strong { font-size: 28px; }
  .intro-stats span { font-size: 12px; }

  .page-hero > .container { --cut: 14px; box-shadow: none; background: linear-gradient(105deg, #1a2028 0 74%, transparent 74.1%), var(--stripes), linear-gradient(160deg, var(--c-primary), #6e2208); }
  .page-hero-cat > .container { background: linear-gradient(105deg, #1a2028 0 74%, transparent 74.1%), var(--stripes), linear-gradient(160deg, var(--c-secondary), #004a40); }
  .page-hero-icon { width: 52px; }
  .sc-title { font-size: 40px; text-shadow: 4px 4px 0 rgba(0, 0, 0, .45); }
  .sc-panel { box-shadow: none; }
  .sc-start { min-width: 220px; height: 56px; font-size: 19px; }
  .sc-card img { padding: 5px; transform: none; }
  .info-card, .article, .doc, .form-card, .cta-card { box-shadow: none; }
  .cta-card { background: var(--cut-tr), var(--cut-bl), linear-gradient(105deg, #1a2028 0 82%, transparent 82.2%), var(--stripes), var(--c-primary); }
  .error-code { font-size: 100px; }

  .footer { margin-top: 64px; }
  .footer-grid { padding-top: 38px; }

  .tabbar { --cut: 14px; background: #151a21; border: 1px solid #333d49; border-top: 2px solid var(--c-primary); border-radius: 0; box-shadow: 0 14px 30px rgba(0, 0, 0, .7); clip-path: var(--clip); }
  .tab { position: relative; font-family: var(--font); font-weight: 700; color: var(--muted); letter-spacing: .04em; }
  .tab .ic { border: 0; border-radius: 0; }
  .tab.active { color: #fff; }
  .tab.active .ic { background: var(--c-primary); color: #140b05; clip-path: var(--slant-sm); border-color: transparent; }
  .sheet-panel { background: #12161c; border-top: 3px solid var(--c-primary); border-radius: 0; }
  .sheet-grip { width: 60px; height: 4px; background: var(--c-primary); opacity: .9; border-radius: 0; transform: skewX(-20deg); }
  .sheet-title { font-family: var(--font); font-weight: 900; letter-spacing: .14em; text-transform: uppercase; padding-left: 10px; border-left: 3px solid var(--c-primary); }
  .sheet-cat { font-family: var(--font); font-weight: 700; }
  .sheet-cat span, .sheet-cat:nth-child(n) span { --pc: var(--coral); border: 0; border-radius: 0; box-shadow: none; clip-path: var(--slant); width: 62px; color: #140b05; background: var(--stripes), var(--pc); }
  .sheet-cat:nth-child(5n + 2) span { --pc: var(--sun); }
  .sheet-cat:nth-child(5n + 3) span { --pc: var(--teal); }
  .sheet-cat:nth-child(5n + 4) span { --pc: var(--grape); }
  .sheet-cat:nth-child(5n + 5) span { --pc: var(--sky); }
  .sheet-links a { background: #1a2028; border: 1px solid var(--line); border-radius: 0; font-family: var(--font); font-weight: 700; }
  .sheet-links a .ic { color: var(--c-primary); }
  .sheet-close { height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-in { height: auto; min-height: 48px; align-items: stretch; }
  .ticker-label { height: auto; }
  .marquee { display: flex; align-items: center; }
  .marquee-track { display: flex; flex-direction: column; gap: 2px; padding: 8px 16px; }
}