/* 兩支程式的介紹頁共用的樣式。
   ── 為什麼整頁是深色：兩支程式本身都是深色介面，頁面上每一張圖都是深色截圖，
      淺色底會讓每張圖變成一塊塊黑補丁。跟入口網站 matchminton.tw 也是同一個調性。
   ── 圖的規矩：所有截圖都用 2 倍密度拍，網頁上只給它一半寬度顯示。
      所以圖看起來比舊版小，字卻更清楚。 */

:root{
  color-scheme: dark;

  --ink-0:#07090c;          /* 底 —— 帶一點藍綠的近黑，不是純灰 */
  --ink-1:#0d141a;          /* 抬起來的面 */
  --ink-2:#111a21;          /* 更深一階的凹面 */
  --edge:#1c2830;           /* 髮絲線 */
  --edge-soft:#16212a;

  --paper:#e9f2f5;          /* 主要文字 */
  --paper-dim:#9bafba;      /* 次要文字 */
  --paper-faint:#6d8290;    /* 說明、註記 */

  --cyan:#3ee0d0;           /* 羽你速配 */
  --violet:#a78bfa;         /* 臨打行事曆 */

  --accent:var(--cyan);
  --on-accent:#05100e;

  --shell:1120px;
  --col:min(100%, 42rem);
}
body.p-pickup{--accent:var(--violet); --on-accent:#130b26}
body.p-match{--accent:var(--cyan); --on-accent:#05100e}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ink-0);
  color:var(--paper);
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:16px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}

/* Archivo 只負責拉丁字母和數字，中文一律 Noto Sans TC。
   兩個並排寫在 font-family 裡，瀏覽器會按字元自己挑。 */
.nb{white-space:nowrap}
.mono{font-family:"IBM Plex Mono","Noto Sans TC",ui-monospace,SFMono-Regular,Menlo,monospace}

.shell{max-width:var(--shell); margin:0 auto; padding-inline:20px}

/* ───────── 置頂列 ───────── */
.top{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--ink-0) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--edge-soft);
}
.top .shell{display:flex; align-items:center; gap:14px; height:56px}
.top .home{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  color:var(--paper-dim); font-size:.86rem; white-space:nowrap;
}
.top .home:hover{color:var(--paper)}
.top .here{
  color:var(--paper); font-weight:700; font-size:.92rem;
  padding-left:14px; border-left:1px solid var(--edge); white-space:nowrap;
}
.top .sp{flex:1}
.top .go{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  padding:7px 15px; border-radius:999px; font-size:.85rem; font-weight:700;
  background:var(--accent); color:var(--on-accent);
}
.top .go:hover{filter:brightness(1.08)}
@media (max-width:560px){ .top .here{display:none} }

/* ───────── 左邊那條球場邊線，順便當目錄 ───────── */
.rail{
  position:fixed; top:50%; transform:translateY(-50%);
  left:max(18px, calc(50vw - 664px));
  width:132px; z-index:30; display:none;
}
@media (min-width:1330px){ .rail{display:block} }
.rail ol{list-style:none; margin:0; padding:0 0 0 15px; border-left:1px solid var(--edge); display:grid; gap:13px}
.rail a{
  position:relative; display:block; text-decoration:none;
  font-family:"IBM Plex Mono","Noto Sans TC",monospace;
  font-size:.7rem; letter-spacing:.04em; line-height:1.4;
  color:var(--paper-faint); transition:color .18s ease;
}
.rail a::before{
  content:""; position:absolute; left:-16px; top:.55em;
  width:7px; height:1px; background:var(--edge); transition:width .18s ease, background-color .18s ease;
}
.rail a:hover{color:var(--paper-dim)}
.rail a[aria-current="true"]{color:var(--paper)}
.rail a[aria-current="true"]::before{width:13px; background:var(--accent)}
@media (prefers-reduced-motion:reduce){ .rail a, .rail a::before{transition:none} }

/* ───────── 開頭 ───────── */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--edge-soft)}
.hero .court{
  position:absolute; left:-6%; right:-6%; bottom:-16%; width:112%; height:auto;
  opacity:.09; pointer-events:none;
}
.hero .court line, .hero .court rect{fill:none; stroke:var(--accent); stroke-width:2.5; vector-effect:non-scaling-stroke}
.hero .shell{position:relative; padding-block:clamp(46px,7.5vw,88px) clamp(34px,5vw,56px)}

.kicker{
  margin:0 0 18px; display:inline-flex; align-items:center; gap:9px;
  font-family:"IBM Plex Mono","Noto Sans TC",monospace;
  font-size:.72rem; letter-spacing:.15em; color:var(--accent);
}
.kicker::before{content:""; width:16px; height:1px; background:var(--accent)}

h1{
  margin:0; max-width:19ch;
  font-size:clamp(2.05rem,5.6vw,3.3rem); line-height:1.2; font-weight:700;
  letter-spacing:.005em; text-wrap:balance;
}
.lede{
  margin:20px 0 0; max-width:var(--col); color:var(--paper-dim);
  font-size:clamp(1rem,2.4vw,1.09rem);
}
.lede b{color:var(--paper); font-weight:500}

.acts{display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 0}
.btn{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  padding:12px 24px; border-radius:10px; font-weight:700; font-size:.98rem;
  background:var(--accent); color:var(--on-accent); border:1px solid var(--accent);
  transition:filter .18s ease;
}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent; color:var(--paper); border-color:var(--edge)}
.btn.ghost:hover{border-color:var(--accent); filter:none}
@media (prefers-reduced-motion:reduce){ .btn{transition:none} }

.herofig{margin:clamp(30px,5vw,46px) 0 0}

/* 開場那一下：從看得見的位置往上收，不是從透明長出來 —— 一載入就讀得到 */
@keyframes rise{ from{ transform:translateY(15px) } to{ transform:translateY(0) } }
@media (prefers-reduced-motion:no-preference){
  .hero h1, .hero .lede, .hero .acts, .hero .herofig{animation:rise .6s cubic-bezier(.2,.7,.3,1) both}
  .hero .lede{animation-delay:.06s}
  .hero .acts{animation-delay:.12s}
  .hero .herofig{animation-delay:.18s}
}

/* ───────── 段落 ───────── */
.sec{padding-block:clamp(50px,7vw,82px)}
.head{max-width:var(--col)}
.head h2{margin:0; font-size:clamp(1.45rem,3.4vw,2rem); line-height:1.34; font-weight:700; text-wrap:balance}
.head p{margin:13px 0 0; color:var(--paper-dim)}
.head p b{color:var(--paper); font-weight:500}

/* 球場線：一條髮絲線，三分之一處有一根垂直短線 —— 照球場上發球線接邊線的樣子畫 */
.cline{position:relative; height:1px; background:var(--edge-soft); border:0; margin:0}
.cline::after{content:""; position:absolute; left:33.3%; top:-5px; width:1px; height:11px; background:var(--edge)}

/* ───────── 圖文列 ───────── */
.rows{display:grid; gap:clamp(34px,5vw,58px); margin:clamp(30px,4vw,44px) 0 0}
.row{display:grid; gap:clamp(20px,3.4vw,42px); align-items:center;
     grid-template-columns:minmax(0,.88fr) minmax(0,1fr)}
.row.rev .fig{order:-1}
.row.wide{grid-template-columns:1fr; gap:22px}
.row.wide .txt{max-width:var(--col)}
@media (max-width:860px){ .row{grid-template-columns:1fr} .row.rev .fig{order:0} }

.row h3{margin:0; font-size:1.08rem; font-weight:700; line-height:1.6}
.row p{margin:10px 0 0; color:var(--paper-dim); font-size:.96rem}
.row p b{color:var(--paper); font-weight:500}
.row .tag{
  display:block; margin:0 0 9px;
  font-family:"IBM Plex Mono","Noto Sans TC",monospace;
  font-size:.68rem; letter-spacing:.13em; color:var(--paper-faint);
}

.fig{margin:0; min-width:0}
.shot{
  position:relative; display:block; border-radius:11px; overflow:hidden;
  border:1px solid var(--edge); background:var(--ink-2); line-height:0;
  box-shadow:0 26px 52px -28px rgba(0,0,0,.95), 0 2px 6px -2px rgba(0,0,0,.6);
}
.shot img{display:block; width:100%; height:auto}
.shot::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 13%, transparent);
}
.shot.tight{width:fit-content; max-width:100%}
.cap{
  margin:11px 0 0; padding-left:13px; position:relative;
  font-family:"IBM Plex Mono","Noto Sans TC",monospace;
  font-size:.73rem; line-height:1.7; color:var(--paper-faint);
}
.cap::before{content:""; position:absolute; left:0; top:.62em; width:6px; height:1px; background:var(--accent)}

/* ───────── 切換檢視的圖廊 ───────── */
.tabs{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px}
.tabs button{
  font:500 .84rem/1 "Noto Sans TC",sans-serif; cursor:pointer;
  padding:9px 15px; border-radius:8px; color:var(--paper-dim);
  background:var(--ink-1); border:1px solid var(--edge-soft);
  transition:color .15s ease, border-color .15s ease, background-color .15s ease;
}
.tabs button:hover{color:var(--paper)}
.tabs button[aria-selected="true"]{
  color:var(--on-accent); background:var(--accent); border-color:var(--accent); font-weight:700;
}
@media (prefers-reduced-motion:reduce){ .tabs button{transition:none} }
.gal .cap{min-height:3.4em}

/* ───────── 數字 ───────── */
.figures{
  display:grid; margin:clamp(26px,4vw,38px) 0 0;
  grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  border:1px solid var(--edge-soft); border-radius:14px; overflow:hidden;
  background:var(--ink-1);
}
.figures div{padding:20px 18px; border-right:1px solid var(--edge-soft); border-bottom:1px solid var(--edge-soft)}
.figures b{
  display:block; font-family:"Archivo","Noto Sans TC",sans-serif; font-variant-numeric:tabular-nums;
  font-size:1.7rem; font-weight:700; line-height:1.2; color:var(--accent); letter-spacing:-.01em;
}
.figures span{display:block; margin-top:5px; font-size:.85rem; color:var(--paper-dim); line-height:1.6}
.fignote{margin:12px 0 0; font-size:.82rem; color:var(--paper-faint)}

/* ───────── 來源 ───────── */
.chips{display:flex; flex-wrap:wrap; gap:9px; margin:24px 0 0; padding:0; list-style:none}
.chips li{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px; font-size:.88rem;
  border:1px solid var(--edge); background:var(--ink-1); color:var(--paper-dim);
}
.chips li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.75}

/* ───────── 條列 ───────── */
.list{margin:clamp(24px,3vw,32px) 0 0; padding:0; list-style:none;
      display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.list li{position:relative; padding-left:22px; color:var(--paper-dim); font-size:.95rem}
.list li::before{content:""; position:absolute; left:0; top:.82em; width:11px; height:1px; background:var(--accent); opacity:.8}
.list b{color:var(--paper); font-weight:500}

/* ───────── 常見問題 ───────── */
.faq{margin:clamp(24px,3vw,32px) 0 0; display:grid; gap:9px}
.faq details{border:1px solid var(--edge-soft); border-radius:11px; background:var(--ink-1); overflow:hidden}
.faq summary{
  cursor:pointer; list-style:none; padding:15px 44px 15px 17px; position:relative;
  font-weight:500; font-size:.98rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:19px; top:50%; width:8px; height:8px;
  border-right:1.5px solid var(--paper-faint); border-bottom:1.5px solid var(--paper-faint);
  transform:translateY(-70%) rotate(45deg); transition:transform .18s ease;
}
.faq details[open] summary{color:var(--accent)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg); border-color:var(--accent)}
.faq p{margin:0; padding:0 17px 16px; color:var(--paper-dim); font-size:.93rem}
.faq p b{color:var(--paper); font-weight:500}
@media (prefers-reduced-motion:reduce){ .faq summary::after{transition:none} }

/* ───────── 另一支 ───────── */
.cross{
  display:flex; flex-wrap:wrap; align-items:center; gap:18px;
  margin:clamp(30px,4vw,44px) 0 0; padding:22px 24px;
  border:1px solid var(--edge-soft); border-radius:14px; background:var(--ink-1);
}
.cross .k{font-family:"IBM Plex Mono","Noto Sans TC",monospace; font-size:.7rem;
          letter-spacing:.13em; color:var(--paper-faint)}
.cross b{display:block; font-size:1.05rem; font-weight:700; margin-top:3px}
.cross p{margin:4px 0 0; color:var(--paper-dim); font-size:.92rem; max-width:34rem}
.cross .sp{flex:1 1 12px}

/* ───────── 收尾 ───────── */
footer{border-top:1px solid var(--edge-soft); margin-top:clamp(50px,7vw,80px)}
footer .shell{padding-block:32px 52px}
footer p{margin:0 0 10px; color:var(--paper-faint); font-size:.85rem; max-width:52rem}
footer a{color:var(--paper-dim); text-decoration:none; border-bottom:1px solid var(--edge)}
footer a:hover{color:var(--accent); border-bottom-color:var(--accent)}