/* ═══════════════════════════════════════════════════════════
   百家電子攻略站 — 「牌桌檔案室」設計系統
   深呢絨綠牌桌 × 奶油紙檔案卡 × 燙金髮絲線 × 印章紅
   動畫鐵律：只動 transform/opacity；animation + fill-mode both；CLS 0
   ═══════════════════════════════════════════════════════════ */
:root{
  --felt:#0b2b1f;            /* 牌桌呢絨底 */
  --felt-hi:#12382a;         /* 呢絨亮部 */
  --felt-lo:#071e15;         /* 呢絨暗部 */
  --paper:#f5eddb;           /* 奶油檔案紙 */
  --paper-2:#eee3ca;         /* 紙層次 */
  --paper-dim:#e5d8b8;       /* 紙陰影面 */
  --ink:#221d13;             /* 暖墨 */
  --ink-sub:#57503f;         /* 次級文字 */
  --ink-faint:#8a8069;       /* 弱化文字 */
  --gold:#c9a227;
  --gold-hi:#e8cd6f;
  --gold-lo:#8f7118;
  --stamp:#bf3b2b;           /* 印章紅／莊 */
  --player:#2c5d8a;          /* 閒藍 */
  --tie:#3e7d4f;             /* 和綠 */
  --line:#d8c9a5;            /* 紙上分隔線 */
  --line-dark:rgba(232,205,111,.22); /* 呢絨上的金髮絲線 */
  --serif:"Noto Serif TC",serif;
  --body:"PingFang TC","Microsoft JhengHei","Heiti TC",sans-serif;
  --num:"Courier Prime","Courier New",monospace;
  --shadow:0 2px 6px rgba(4,14,10,.35),0 12px 34px rgba(4,14,10,.28);
  --shadow-sm:0 1px 3px rgba(4,14,10,.3);
  --rad:4px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);color:var(--ink);background:var(--felt);
  font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased;
  /* 呢絨質感：暗角 + 織紋 */
  background-image:
    radial-gradient(ellipse 120% 90% at 50% -10%,var(--felt-hi),transparent 60%),
    radial-gradient(ellipse 140% 100% at 50% 115%,var(--felt-lo),transparent 55%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.012) 0 2px,transparent 2px 4px),
    repeating-linear-gradient(-45deg,rgba(0,0,0,.03) 0 2px,transparent 2px 4px);
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--gold);color:var(--felt)}

/* ── 入場動畫（stagger 由模板加 style="--d:.08s" 控制） ── */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes ballpop{0%{opacity:0;transform:scale(.3)}70%{transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
@keyframes bargrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes barwide{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes stampin{0%{opacity:0;transform:scale(1.6) rotate(-14deg)}100%{opacity:1;transform:scale(1) rotate(-6deg)}}
.rise{animation:rise .6s cubic-bezier(.22,.8,.3,1) both;animation-delay:var(--d,0s)}
.fade{animation:fadein .8s ease both;animation-delay:var(--d,0s)}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001s!important;animation-delay:0s!important}}

/* ── 版心 ── */
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.wrap-narrow{max-width:860px;margin:0 auto;padding:0 20px}

/* ── 頂部跑馬燈（539 開獎） ── */
.tickerbar{background:var(--felt-lo);border-bottom:1px solid var(--line-dark);overflow:hidden;white-space:nowrap;font-size:13px;color:var(--gold-hi);padding:7px 0}
.tickerbar .tk{display:inline-flex;gap:38px;padding-right:38px;animation:ticker 36s linear infinite;will-change:transform}
.tickerbar b{color:var(--paper)}
.tickerbar .ball-s{display:inline-flex;width:22px;height:22px;border-radius:50%;background:var(--paper);color:var(--ink);font-family:var(--num);font-weight:700;font-size:12.5px;align-items:center;justify-content:center;margin:0 1.5px;vertical-align:-5px}

/* ── 報頭 masthead ── */
.masthead{padding:30px 0 0;text-align:center;color:var(--paper)}
.mh-kicker{font-size:11.5px;letter-spacing:.42em;color:var(--gold-hi);text-transform:uppercase}
.masthead h1,.masthead .mh-brand{font-family:var(--serif);font-weight:900;font-size:clamp(30px,5.4vw,52px);letter-spacing:.06em;line-height:1.2;margin:8px 0 4px}
.mh-brand a{text-decoration:none}
.mh-sub{font-size:13px;color:rgba(245,237,219,.65);letter-spacing:.18em}
.mh-rule{display:flex;align-items:center;gap:14px;margin:18px auto 0;max-width:560px}
.mh-rule::before,.mh-rule::after{content:"";flex:1;height:3px;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
.mh-rule .pip{width:7px;height:7px;background:linear-gradient(135deg,var(--gold-hi),var(--gold-lo));transform:rotate(45deg)}

/* ── 檔案夾標籤導覽 ── */
.foldertabs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:26px 0 0;padding:0 12px}
.foldertabs a{
  position:relative;text-decoration:none;font-weight:700;font-size:15px;color:var(--ink-sub);
  background:linear-gradient(var(--paper-2),var(--paper-dim));
  padding:10px 22px 12px;border-radius:9px 9px 0 0;border:1px solid var(--line);border-bottom:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),var(--shadow-sm);
  transform:translateY(4px);transition:transform .18s ease,color .18s ease;
}
.foldertabs a:hover{transform:translateY(1px);color:var(--ink)}
.foldertabs a.on{background:var(--paper);color:var(--ink);transform:translateY(0);z-index:2;
  box-shadow:inset 0 2px 0 var(--gold),var(--shadow-sm)}
.foldertabs .tag{font-size:10.5px;color:var(--stamp);margin-left:6px;letter-spacing:.08em}

/* ── 紙面主體 ── */
.sheet{background:var(--paper);box-shadow:var(--shadow);border-top:3px double var(--gold);position:relative}
.sheet::before{/* 紙纖維 */content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(87,80,63,.05) 1px,transparent 1px),radial-gradient(rgba(87,80,63,.04) 1px,transparent 1px);
  background-size:7px 7px,11px 11px;background-position:0 0,3px 5px}
.sheet>*{position:relative}
main.sheet{padding:40px 0 70px}

/* ── 首頁 hero 檔案卡 ── */
.dossier{display:grid;grid-template-columns:1.25fr .9fr;gap:34px;align-items:start;margin-top:8px}
@media(max-width:840px){.dossier{grid-template-columns:1fr}}
.d-title{font-family:var(--serif);font-weight:900;font-size:clamp(26px,4vw,40px);line-height:1.3;letter-spacing:.02em}
.d-title .u{background:linear-gradient(transparent 68%,rgba(201,162,39,.45) 68%)}
.d-lead{margin-top:16px;font-size:16.5px;color:var(--ink-sub);max-width:56ch}
.stampline{margin-top:22px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.stamp{display:inline-block;font-family:var(--serif);font-weight:900;color:var(--stamp);border:2.5px solid var(--stamp);
  border-radius:3px;padding:3px 10px;font-size:13.5px;letter-spacing:.3em;transform:rotate(-6deg);
  animation:stampin .5s cubic-bezier(.2,.9,.3,1.4) both;animation-delay:var(--d,.5s);
  mask-image:radial-gradient(rgba(0,0,0,.92) 60%,rgba(0,0,0,.75));-webkit-mask-image:radial-gradient(rgba(0,0,0,.92) 60%,rgba(0,0,0,.75))}

/* ── 章節標 ── */
.secthead{display:flex;align-items:baseline;gap:14px;margin:54px 0 20px;border-bottom:2px solid var(--ink);padding-bottom:10px}
.secthead h2{font-family:var(--serif);font-weight:900;font-size:24px;letter-spacing:.04em}
.secthead .no{font-family:var(--num);color:var(--gold-lo);font-size:14px;font-weight:700}
.secthead .more{margin-left:auto;font-size:13px;color:var(--stamp);text-decoration:none;font-weight:700}
.secthead .more:hover{text-decoration:underline}

/* ── 文章卡 ── */
.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.acard{background:#fff;border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;text-decoration:none;
  box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease;display:flex;flex-direction:column}
.acard:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(4,14,10,.18)}
.acard .thumb{aspect-ratio:1.9/1;background:var(--felt-hi);overflow:hidden}
.acard .thumb img{width:100%;height:100%;object-fit:cover}
.acard .cb{padding:13px 15px 15px;display:flex;flex-direction:column;gap:7px;flex:1}
.acard .k{font-size:11px;letter-spacing:.14em;color:var(--gold-lo);font-weight:700}
.acard h3{font-size:15.5px;line-height:1.5;font-weight:700}
.acard p{font-size:13px;color:var(--ink-sub);line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ── 539 號碼球 ── */
.ballrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ball{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--num);font-weight:700;font-size:22px;color:var(--ink);
  background:radial-gradient(circle at 32% 28%,#fffdf6,var(--paper) 55%,var(--paper-dim));
  border:1.5px solid var(--line);box-shadow:var(--shadow-sm),inset 0 -3px 6px rgba(87,80,63,.18);
  animation:ballpop .5s cubic-bezier(.2,.9,.3,1.3) both;animation-delay:var(--d,0s)}
.ball.hot{background:radial-gradient(circle at 32% 28%,#ffe9e4,#f6c9bd 60%,#eab0a2);border-color:var(--stamp);color:var(--stamp)}
.ball.cold{background:radial-gradient(circle at 32% 28%,#e8f1f8,#cfe0ee 60%,#b8d0e4);border-color:var(--player);color:var(--player)}
.ball-sm{width:38px;height:38px;font-size:16.5px}

/* ── 百家路單裝飾格 ── */
.roadgrid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(6,16px);gap:3px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:var(--rad);overflow:hidden}
.roadgrid i{width:16px;height:16px;border-radius:50%;border:2.5px solid var(--line)}
.roadgrid i.b{border-color:var(--stamp)}
.roadgrid i.p{border-color:var(--player)}
.roadgrid i.t{border-color:var(--tie)}

/* ── 內文 article ── */
.crumb{font-size:12.5px;color:var(--ink-faint);margin-bottom:16px}
.crumb a{color:var(--gold-lo);text-decoration:none}
.pagehead h1{font-family:var(--serif);font-weight:900;font-size:clamp(25px,3.6vw,36px);line-height:1.35;letter-spacing:.02em;text-wrap:balance}
.pagehead .lead{margin-top:14px;font-size:16px;color:var(--ink-sub);max-width:64ch}
.bylinebar{display:flex;gap:18px;align-items:center;margin-top:18px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink-faint)}
.cover{margin:26px 0;border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;box-shadow:var(--shadow-sm)}
.cover img{width:100%;aspect-ratio:1.9/1;object-fit:cover}
article.body{max-width:70ch}
article.body h2{font-family:var(--serif);font-weight:900;font-size:21px;margin:42px 0 14px;padding-left:13px;border-left:4px solid var(--gold);letter-spacing:.02em}
article.body p{margin:0 0 15px;font-size:15.5px;line-height:1.95;color:#33
2c1e}
article.body strong{color:var(--ink);background:linear-gradient(transparent 70%,rgba(201,162,39,.35) 70%)}
article.body ul,article.body ol{margin:0 0 15px;padding-left:22px}
article.body li{margin-bottom:8px;font-size:15px;line-height:1.8;color:#332c1e}
article.body a{color:var(--stamp)}
.sheet table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px;background:#fff;box-shadow:var(--shadow-sm)}
.sheet th{background:var(--felt);color:var(--paper);font-weight:700;padding:9px 12px;text-align:left;font-size:13px;letter-spacing:.05em}
.sheet td{border:1px solid var(--line);padding:8px 12px;color:#332c1e}
.sheet tbody tr:nth-child(even) td{background:var(--paper-2)}
.tablewrap{overflow-x:auto}

/* ── FAQ ── */
.faq{margin:34px 0 0;max-width:70ch}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--rad);margin-bottom:10px;box-shadow:var(--shadow-sm)}
.faq summary{cursor:pointer;font-weight:700;font-size:15px;padding:13px 16px;list-style:none;position:relative;padding-right:40px}
.faq summary::after{content:"＋";position:absolute;right:15px;top:11px;color:var(--gold-lo);font-size:17px;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .fa{padding:0 16px 15px;font-size:14.5px;color:var(--ink-sub);line-height:1.85}

/* ── 老玩家總結框 ── */
.verdictbox{margin:38px 0 0;max-width:70ch;background:var(--felt);color:var(--paper);border-radius:var(--rad);padding:20px 22px;position:relative;box-shadow:var(--shadow)}
.verdictbox::before{content:"老玩家一句話";position:absolute;top:-11px;left:16px;background:var(--gold);color:var(--felt);
  font-size:11.5px;font-weight:700;letter-spacing:.2em;padding:3px 12px;border-radius:2px}
.verdictbox p{font-size:15.5px;line-height:1.9;font-weight:500}

/* ── CTA（集中設定注入） ── */
.ctapanel{margin:44px 0 0;border:2px solid var(--gold);background:
  linear-gradient(rgba(201,162,39,.08),rgba(201,162,39,.03)),var(--paper);
  border-radius:var(--rad);padding:24px 26px;position:relative;overflow:hidden}
.ctapanel::after{content:"";position:absolute;top:0;right:0;width:110px;height:110px;pointer-events:none;
  background:radial-gradient(circle at 100% 0,rgba(201,162,39,.25),transparent 70%)}
.ctapanel .ct{font-family:var(--serif);font-weight:900;font-size:20px}
.ctapanel .cs{margin-top:8px;font-size:14px;color:var(--ink-sub)}
.ctabtn{display:inline-block;margin-top:16px;background:linear-gradient(135deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo));
  color:var(--felt);font-weight:900;font-size:15.5px;letter-spacing:.1em;text-decoration:none;
  padding:12px 30px;border-radius:3px;box-shadow:0 3px 10px rgba(143,113,24,.4);transition:transform .15s ease}
.ctabtn:hover{transform:translateY(-2px)}

/* ── 相關頁 ── */
.relbox{margin:40px 0 0;padding:18px 20px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--rad)}
.relbox h3{font-size:13px;letter-spacing:.15em;color:var(--ink-faint);margin-bottom:12px}
.relgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:9px}
.relgrid a{font-size:14px;font-weight:700;color:var(--ink);text-decoration:none;padding:10px 13px;background:#fff;border:1px solid var(--line);border-radius:3px;transition:border-color .15s,color .15s}
.relgrid a:hover{border-color:var(--stamp);color:var(--stamp)}

/* ── 資料圖表（539） ── */
.chartcard{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:20px;box-shadow:var(--shadow-sm);margin:20px 0}
.chartcard h3{font-family:var(--serif);font-weight:900;font-size:17px;margin-bottom:4px}
.chartcard .cnote{font-size:12.5px;color:var(--ink-faint);margin-bottom:14px}
.vbars{display:flex;align-items:flex-end;gap:4px;height:150px}
.vbars .vb{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;min-width:0}
.vbars .bar{width:100%;border-radius:2px 2px 0 0;background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));
  transform-origin:bottom;animation:bargrow .7s cubic-bezier(.22,.8,.3,1) both;animation-delay:var(--d,0s)}
.vbars .bar.hot{background:linear-gradient(180deg,#e0705e,var(--stamp))}
.vbars .bar.cold{background:linear-gradient(180deg,#7fa8cc,var(--player))}
.vbars .vl{font-family:var(--num);font-size:11px;color:var(--ink-faint)}
.hbars .hb{display:grid;grid-template-columns:52px 1fr 46px;gap:10px;align-items:center;margin-bottom:8px}
.hbars .track{height:14px;background:var(--paper-2);border-radius:2px;overflow:hidden}
.hbars .fill{height:100%;background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi));transform-origin:left;animation:barwide .7s cubic-bezier(.22,.8,.3,1) both;animation-delay:var(--d,0s)}
.hbars .hv{font-family:var(--num);font-size:13px;color:var(--ink-sub);text-align:right}
.hbars .hk{font-size:13px;font-weight:700}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:20px 0}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:14px 16px;box-shadow:var(--shadow-sm)}
.stat .sv{font-family:var(--num);font-weight:700;font-size:26px;color:var(--stamp)}
.stat .sk{font-size:12px;color:var(--ink-faint);letter-spacing:.08em;margin-top:2px}

/* ── 纜法模擬器 ── */
.simctl{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}
.simctl label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--ink-faint);font-weight:700}
.simctl input,.simctl select{font-family:var(--num);font-size:15px;padding:8px 10px;border:1.5px solid var(--line);border-radius:3px;background:#fff;color:var(--ink);width:130px}
.simctl input:focus,.simctl select:focus{outline:2px solid var(--gold);border-color:var(--gold)}

/* ── 頁尾 ── */
footer{color:rgba(245,237,219,.55);padding:38px 0 46px;font-size:13px}
footer .fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:22px;padding-bottom:24px;border-bottom:1px solid var(--line-dark)}
footer h4{color:var(--gold-hi);font-size:13px;letter-spacing:.15em;margin-bottom:10px}
footer a{color:rgba(245,237,219,.7);text-decoration:none;display:block;margin-bottom:7px}
footer a:hover{color:var(--paper)}
footer .legal{padding-top:18px;font-size:12px;line-height:1.8;color:rgba(245,237,219,.4)}