/* ═══════════════════════════════════════════════════════════
   百家電子攻略站 — v3「深翡翠賭場奢華」
   深綠玻璃面板 × 金髮絲線 × 奶油文字 × 號碼球暖白
   動畫鐵律：只動 transform/opacity；animation + fill-mode both；CLS 0
   ═══════════════════════════════════════════════════════════ */
:root{
  --bg0:#06170f;             /* 最深底 */
  --bg1:#0a2117;             /* 主面板底 */
  --panel:#103122;           /* 卡片面 */
  --panel-hi:#15402c;        /* 卡片亮面 */
  --glass:rgba(21,64,44,.55);
  --ink:#f3ecd9;             /* 奶油主文字 */
  --ink-sub:rgba(243,236,217,.78);
  --ink-faint:rgba(243,236,217,.52);
  --gold:#c9a227;
  --gold-hi:#eed57e;
  --gold-lo:#96771c;
  --hairline:rgba(201,162,39,.28);      /* 金髮絲線 */
  --hairline-soft:rgba(243,236,217,.09);
  --stamp:#e2564a;           /* 印章紅（提亮適配深底） */
  --player:#6fa9d8;          /* 閒藍 */
  --tie:#5aa571;             /* 和綠 */
  --paper:#f5eddb;           /* 球面暖白（保留） */
  --paper-dim:#ddd2b4;
  --line:var(--hairline);
  --line2:var(--hairline-soft);
  --serif:"Noto Serif TC",serif;
  --body:"PingFang TC","Microsoft JhengHei","Heiti TC",sans-serif;
  --num:"Courier Prime","Courier New",monospace;
  --shadow:0 4px 14px rgba(0,0,0,.35),0 18px 50px rgba(0,0,0,.35);
  --shadow-sm:0 2px 8px rgba(0,0,0,.3);
  --glow:0 0 0 1px var(--hairline),0 6px 24px rgba(0,0,0,.4);
  --rad:12px;
  --rad-s:7px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-color:#1c4a33 #06170f}
body{
  font-family:var(--body);color:var(--ink);background:var(--bg0);
  font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(ellipse 110% 70% at 50% -8%,#124631 0%,transparent 55%),
    radial-gradient(ellipse 130% 90% at 50% 118%,#03110a 0%,transparent 60%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.008) 0 2px,transparent 2px 5px);
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--gold);color:var(--bg0)}
/* modern-web-guidance · 全站鍵盤 focus 指示（可訪問性） */
:where(a:any-link,button,summary,select,input,[tabindex]):focus-visible{
  outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:3px}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--gold-hi);color:var(--bg0);
  font-weight:800;font-size:14px;padding:10px 18px;border-radius:0 0 10px 10px;text-decoration:none;
  transition:top .2s ease}
.skip:focus{top:0}

/* ── 動畫 ── */
@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)}}
@keyframes roadloop{0%{opacity:0;transform:scale(.3)}3%{opacity:1;transform:scale(1.12)}5%,88%{opacity:1;transform:scale(1)}96%,100%{opacity:0}}
@property --n{syntax:"<integer>";initial-value:0;inherits:false}
@keyframes countup{from{--n:0}}
.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;animation-timeline:auto!important}}
h2[id]{scroll-margin-top:36px}
/* apple-design §1：即時按壓回饋（response 是一切基礎，回饋在按下瞬間） */
.acard:active,.relgrid a:active,.dgball:active,.faq summary:active{transform:scale(.985)}
.foldertabs a:active,.stat:active{transform:translateY(1px)}
/* apple-design §14：尊重透明度／對比系統偏好 */
@media(prefers-reduced-transparency:reduce){
  .tickerbar{backdrop-filter:none;background:#04120c}}
@media(prefers-contrast:more){
  .acard,.chartcard,.specdash,.relbox,.probwidget,.roaddemo{border-color:var(--gold)}
  .acard p,.d-lead,.pagehead .lead{color:var(--ink)}
  .foldertabs a{color:var(--ink)}}

/* ── 版心 ── */
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:880px;margin:0 auto;padding:0 24px}

/* ── 頂部跑馬燈 ── */
.tickerbar{background:#04120c;border-bottom:1px solid var(--hairline);overflow:hidden;white-space:nowrap;font-size:13px;color:var(--gold-hi);padding:8px 0;letter-spacing:.03em;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.tickerbar .tk{display:inline-flex;gap:44px;padding-right:44px;animation:ticker 36s linear infinite;will-change:transform}
.tickerbar b{color:var(--ink);font-weight:600}
.tickerbar .ball-s{display:inline-flex;width:21px;height:21px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fffdf4,var(--paper) 60%,var(--paper-dim));color:#20180c;font-family:var(--num);font-weight:700;font-size:12px;align-items:center;justify-content:center;margin:0 1.5px;vertical-align:-5px}

/* ── 報頭底圖帶 ── */
.mastband{
  background:
    linear-gradient(180deg,rgba(6,23,15,.72) 0%,rgba(6,23,15,.42) 40%,rgba(8,27,18,.82) 82%,#0a2117 100%),
    url(/ui/masthead_bg.webp) center 38%/cover no-repeat,
    var(--bg0);
  border-bottom:1px solid var(--hairline)}
.mastband.compact{background:
    linear-gradient(180deg,rgba(6,23,15,.78) 0%,rgba(6,23,15,.55) 45%,rgba(8,27,18,.88) 85%,#0a2117 100%),
    url(/ui/masthead_bg.webp) center 30%/cover no-repeat,
    var(--bg0)}

/* ── 報頭 ── */
.masthead{padding:44px 0 0;text-align:center}
.masthead.compact{padding:22px 0 0}
.masthead.compact .mh-brand{font-size:clamp(22px,3vw,32px);margin:6px 0 3px}
.masthead.compact .mh-kicker{font-size:9.5px}
.masthead.compact .mh-sub{font-size:11px}
.masthead.compact .mh-rule{margin-top:12px;max-width:420px}
.masthead.compact .foldertabs{margin:18px 0 22px}
.mh-kicker{font-size:11px;letter-spacing:.52em;color:var(--gold);text-transform:uppercase;opacity:.9}
.masthead h1,.masthead .mh-brand{font-family:var(--serif);font-weight:900;font-size:clamp(32px,5.2vw,54px);letter-spacing:.08em;line-height:1.2;margin:10px 0 6px;
  background:linear-gradient(180deg,#fdf6e3 20%,var(--gold-hi) 60%,var(--gold) 95%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.mh-brand a{text-decoration:none}
.mh-sub{font-size:12.5px;color:var(--ink-faint);letter-spacing:.32em}
.mh-rule{display:flex;align-items:center;gap:16px;margin:22px auto 0;max-width:620px}
.mh-rule::before,.mh-rule::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--hairline));}
.mh-rule::after{background:linear-gradient(90deg,var(--hairline),transparent)}
.mh-rule .pip{width:7px;height:7px;background:linear-gradient(135deg,var(--gold-hi),var(--gold-lo));transform:rotate(45deg)}

/* ── 導覽（精品底線指示式） ── */
.foldertabs{display:flex;gap:2px;justify-content:center;flex-wrap:wrap;margin:24px 0 0;padding:0 10px;
  border-bottom:1px solid var(--hairline-soft)}
.foldertabs a{
  position:relative;white-space:nowrap;text-decoration:none;font-weight:700;font-size:15px;letter-spacing:.06em;
  color:var(--ink-sub);padding:13px 22px 15px;transition:color .2s ease}
.foldertabs a::after{content:"";position:absolute;left:22px;right:22px;bottom:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi),var(--gold-lo));
  transform:scaleX(0);transform-origin:center;transition:transform .28s cubic-bezier(.22,.8,.3,1)}
.foldertabs a:hover{color:var(--gold-hi)}
.foldertabs a:hover::after{transform:scaleX(.7)}
.foldertabs a.on{color:var(--gold-hi)}
.foldertabs a.on::after{transform:scaleX(1);box-shadow:0 0 10px rgba(238,213,126,.5)}  /* 靜態發光，restraint */
.foldertabs .tag{font-size:9.5px;margin-left:6px;letter-spacing:.08em;color:var(--gold);vertical-align:2px;
  border:1px solid var(--hairline);border-radius:99px;padding:1px 6px}

/* ── 主面板 ── */
.sheet{background:linear-gradient(180deg,var(--bg1),#081b12 85%);border-top:1px solid var(--hairline);position:relative}
.sheet::before{content:"";position:absolute;inset:0 0 auto;height:1px;top:3px;background:linear-gradient(90deg,transparent 5%,var(--hairline) 50%,transparent 95%);pointer-events:none}
.sheet>*{position:relative}
main.sheet{padding:52px 0 80px}

/* ── 首頁 hero ── */
.dossier{display:grid;grid-template-columns:1.25fr .9fr;gap:40px;align-items:start;margin-top:4px}
@media(max-width:840px){.dossier{grid-template-columns:1fr}}
.d-title{font-family:var(--serif);font-weight:900;font-size:clamp(27px,4vw,42px);line-height:1.32;letter-spacing:.02em;color:var(--ink)}
.d-title .u{background:linear-gradient(transparent 68%,rgba(201,162,39,.45) 68%)}
.d-lead{margin-top:18px;font-size:16.5px;color:var(--ink-sub);max-width:56ch;line-height:1.95}
.stampline{margin-top:26px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.stamp{display:inline-block;font-family:var(--serif);font-weight:900;color:var(--stamp);border:2px solid var(--stamp);
  border-radius:4px;padding:3px 12px;font-size:13px;letter-spacing:.3em;transform:rotate(-6deg);opacity:.9;
  animation:stampin .5s cubic-bezier(.2,.9,.3,1.4) both;animation-delay:var(--d,.5s)}

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

/* ── 文章卡 ── */
.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.acard{background:linear-gradient(165deg,var(--panel-hi),var(--panel) 60%);border:1px solid var(--hairline-soft);border-radius:var(--rad);overflow:hidden;text-decoration:none;
  box-shadow:var(--shadow-sm);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;display:flex;flex-direction:column}
.acard:hover{transform:translateY(-4px);border-color:var(--hairline);box-shadow:0 10px 32px rgba(0,0,0,.45)}
.acard .thumb{aspect-ratio:1.9/1;background:var(--bg0);overflow:hidden}
.acard .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;filter:saturate(.88) brightness(.96)}
.acard:hover .thumb img{transform:scale(1.04)}
.acard .cb{padding:15px 17px 17px;display:flex;flex-direction:column;gap:8px;flex:1}
.acard .k{font-size:10.5px;letter-spacing:.22em;color:var(--gold);font-weight:700}
.acard h3{font-size:15.5px;line-height:1.55;font-weight:700;color:var(--ink)}
.acard p{font-size:13.5px;color:rgba(243,236,217,.7);line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ── 539 號碼球 ── */
.ballrow{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.ball{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--num);font-weight:700;font-size:22px;color:#241b0c;
  background:radial-gradient(circle at 32% 28%,#fffdf4,var(--paper) 55%,var(--paper-dim));
  box-shadow:0 3px 10px rgba(0,0,0,.4),inset 0 -4px 8px rgba(87,80,63,.25),inset 0 2px 3px rgba(255,255,255,.8);
  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,#f2c2b5 60%,#e3a08f);color:#8c2417}
.ball.cold{background:radial-gradient(circle at 32% 28%,#eaf3fa,#cbdff0 60%,#accbe2);color:#1f4c74}
.ball-sm{width:40px;height:40px;font-size:16.5px}

/* ── 百家路單裝飾格 ── */
.roadgrid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(6,16px);gap:4px;padding:14px;background:rgba(0,0,0,.25);border:1px solid var(--hairline-soft);border-radius:var(--rad);overflow:hidden}
.roadgrid i{width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(243,236,217,.14)}
.roadgrid i.b{border-color:#c94f43}
.roadgrid i.p{border-color:#4f7ec9}
.roadgrid i.t{border-color:#4f8f63}

/* ── 內文 ── */
.crumb{font-size:12.5px;color:var(--ink-faint);margin-bottom:18px;letter-spacing:.03em}
.crumb a{color:var(--gold);text-decoration:none}
.pagehead h1{font-family:var(--serif);font-weight:900;font-size:clamp(26px,3.6vw,38px);line-height:1.38;letter-spacing:.02em;text-wrap:balance;color:var(--ink)}
.pagehead .lead{margin-top:16px;font-size:16px;color:var(--ink-sub);max-width:64ch;line-height:1.95}
.bylinebar{display:flex;gap:20px;align-items:center;margin-top:20px;padding:11px 0;border-top:1px solid var(--hairline-soft);border-bottom:1px solid var(--hairline-soft);font-size:12.5px;color:var(--ink-faint);flex-wrap:wrap;row-gap:4px;letter-spacing:.04em}
.cover{margin:28px 0;border-radius:var(--rad);overflow:hidden;box-shadow:var(--glow)}
.cover img{width:100%;aspect-ratio:1.9/1;object-fit:cover}
.cover figcaption{font-size:12px;color:var(--ink-faint);padding:9px 14px;background:rgba(0,0,0,.25)}
article.body{max-width:70ch;counter-reset:chap}
article.body h2{font-family:var(--serif);font-weight:900;font-size:21px;margin:54px 0 16px;padding-left:14px;border-left:3px solid var(--gold);letter-spacing:.03em;color:var(--ink);counter-increment:chap}
article.body h2::before{content:counter(chap,decimal-leading-zero);font-family:var(--num);font-size:11.5px;color:var(--gold);letter-spacing:.18em;display:block;margin-bottom:3px}
article.body p{margin:0 0 18px;font-size:15.5px;line-height:2.02;color:var(--ink-sub)}
article.body strong{color:var(--gold-hi);font-weight:700}
article.body ol{margin:0 0 16px;padding-left:22px}
article.body li{margin-bottom:8px;font-size:15px;line-height:1.85;color:var(--ink-sub)}
article.body a{color:var(--stamp)}
article.body>ul{padding:0;margin:22px 0;list-style:none}
article.body>ul>li{background:rgba(255,255,255,.035);border:1px solid var(--hairline-soft);border-left:3px solid var(--gold);
  border-radius:var(--rad-s);padding:14px 17px;margin-bottom:11px;line-height:1.9}
article.body>ul>li>strong:first-child{color:var(--gold-hi);margin-right:4px}
.sheet table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14px;background:rgba(0,0,0,.22);border-radius:var(--rad-s);overflow:hidden}
.sheet th{color:var(--gold-hi);font-weight:700;padding:11px 14px;text-align:left;font-size:12.5px;letter-spacing:.12em;border-bottom:1.5px solid var(--hairline);background:rgba(201,162,39,.07)}
.sheet td{border-bottom:1px solid var(--hairline-soft);padding:10px 14px;color:var(--ink-sub)}
.sheet tbody tr:last-child td{border-bottom:0}
.sheet tbody tr:nth-child(even) td{background:rgba(255,255,255,.02)}
.tablewrap{overflow-x:auto}
.tablewrap table{min-width:560px}
.chartscroll{overflow-x:auto}

/* ── 目錄 chips ── */
.toc{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 8px}
.toc a{font-size:12.5px;font-weight:600;color:var(--ink-sub);text-decoration:none;background:rgba(255,255,255,.04);
  border:1px solid var(--hairline-soft);border-radius:99px;padding:6px 15px;letter-spacing:.03em;
  transition:color .15s,border-color .15s,transform .15s}
.toc a:hover{color:var(--gold-hi);border-color:var(--hairline);transform:translateY(-1px)}
.toc .tlab{font-size:11px;letter-spacing:.28em;color:var(--gold);align-self:center;margin-right:4px}

/* ── 忠告框 ── */
.callout{margin:24px 0;background:linear-gradient(160deg,rgba(226,86,74,.1),rgba(226,86,74,.04));
  border:1px solid rgba(226,86,74,.35);border-left:3px solid var(--stamp);border-radius:var(--rad-s);padding:15px 19px}
.callout::before{content:"◆ 老玩家忠告";display:block;font-size:11px;font-weight:900;letter-spacing:.28em;color:var(--stamp);margin-bottom:7px}
.callout p{margin:0!important;color:var(--ink)!important}

/* ── FAQ ── */
.faq{margin:38px 0 0;max-width:70ch}
.faq details{background:rgba(255,255,255,.035);border:1px solid var(--hairline-soft);border-radius:var(--rad-s);margin-bottom:10px;transition:border-color .2s}
.faq details[open]{border-color:var(--hairline)}
.faq summary{cursor:pointer;font-weight:700;font-size:15px;padding:14px 18px;list-style:none;position:relative;padding-right:44px;color:var(--ink)}
.faq summary::after{content:"＋";position:absolute;right:17px;top:12px;color:var(--gold);font-size:17px;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .fa{padding:0 18px 16px;font-size:14.5px;color:var(--ink-sub);line-height:1.9}

/* ── 總結框 ── */
.verdictbox{margin:40px 0 0;max-width:70ch;background:linear-gradient(160deg,rgba(201,162,39,.12),rgba(201,162,39,.04));
  border:1px solid var(--hairline);border-radius:var(--rad);padding:22px 24px;position:relative}
.verdictbox::before{content:"老玩家一句話";position:absolute;top:-11px;left:18px;background:linear-gradient(135deg,var(--gold-hi),var(--gold));color:var(--bg0);
  font-size:11px;font-weight:900;letter-spacing:.22em;padding:4px 14px;border-radius:3px}
.verdictbox p{font-size:15.5px;line-height:1.95;font-weight:500;color:var(--ink)}

/* ── CTA ── */
.ctapanel{margin:48px 0 0;border:1px solid var(--hairline);background:linear-gradient(160deg,rgba(201,162,39,.14),rgba(201,162,39,.03));
  border-radius:var(--rad);padding:26px 28px;position:relative;overflow:hidden}
.ctapanel::after{content:"";position:absolute;top:0;right:0;width:140px;height:140px;pointer-events:none;
  background:radial-gradient(circle at 100% 0,rgba(238,213,126,.22),transparent 70%)}
.ctapanel .ct{font-family:var(--serif);font-weight:900;font-size:21px;color:var(--ink)}
.ctapanel .cs{margin-top:9px;font-size:14px;color:var(--ink-sub)}
.ctabtn{position:relative;display:inline-block;margin-top:18px;
  background:linear-gradient(180deg,#fbe6a8 0%,#e9c95c 30%,#c9a227 62%,#a8811c 100%);
  color:#3a2a08;font-weight:900;font-size:15.5px;letter-spacing:.1em;text-decoration:none;
  padding:14px 36px;border-radius:99px;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 -2px 5px rgba(120,90,12,.4) inset,
    0 6px 18px rgba(160,120,20,.4),0 2px 4px rgba(0,0,0,.3);
  transition:transform .18s cubic-bezier(.22,.8,.3,1),box-shadow .18s ease}
.ctabtn::before{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);
  transform:skewX(-18deg);transition:none}
.ctabtn:hover{transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 -2px 5px rgba(120,90,12,.4) inset,
    0 10px 26px rgba(160,120,20,.5),0 3px 6px rgba(0,0,0,.35)}
/* Hallmark restraint：靜止沉穩，hover 才一次光澤，不常駐閃 */
.ctabtn:hover::before{animation:btnsheen .75s var(--ease-out,ease)}
.ctabtn:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.ctabtn:active{transform:translateY(0);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 -1px 3px rgba(120,90,12,.4) inset,0 3px 8px rgba(160,120,20,.4)}
@keyframes btnsheen{0%{left:-60%}100%{left:130%}}

/* ── 相關頁 ── */
.relbox{margin:44px 0 0;padding:20px 22px;background:rgba(0,0,0,.2);border:1px solid var(--hairline-soft);border-radius:var(--rad)}
.relbox h3{font-size:12px;letter-spacing:.3em;color:var(--gold);margin-bottom:14px}
.relgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px}
.relgrid a{font-size:13.5px;font-weight:600;color:var(--ink-sub);text-decoration:none;padding:11px 14px;background:rgba(255,255,255,.035);border:1px solid var(--hairline-soft);border-radius:var(--rad-s);transition:border-color .15s,color .15s,transform .15s}
.relgrid a:hover{border-color:var(--hairline);color:var(--gold-hi);transform:translateY(-1px)}

/* ── 圖表卡 ── */
.chartcard{background:linear-gradient(165deg,var(--panel-hi),var(--panel) 70%);border:1px solid var(--hairline-soft);border-radius:var(--rad);padding:22px 24px;box-shadow:var(--shadow-sm);margin:24px 0}
.chartcard h3{font-family:var(--serif);font-weight:900;font-size:17px;margin-bottom:5px;color:var(--ink)}
.chartcard .cnote{font-size:12.5px;color:var(--ink-faint);margin-bottom:16px}
.vbars{display:flex;align-items:flex-end;gap:4px;height:158px;padding-top:16px}
.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:3px 3px 0 0;background:linear-gradient(180deg,#d9bc57,#8a6d18);
  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,#f08a77,var(--stamp))}
.vbars .bar.cold{background:linear-gradient(180deg,#9dc4e6,var(--player))}
.vbars .vl{font-family:var(--num);font-size:11.5px;color:var(--ink-sub)}
.hbars .hb{display:grid;grid-template-columns:52px 1fr 52px;gap:10px;align-items:center;margin-bottom:9px}
.hbars .track{height:13px;background:rgba(0,0,0,.3);border-radius:99px;overflow:hidden}
.hbars .fill{height:100%;border-radius:99px;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:13.5px;font-weight:700;font-family:var(--num);color:var(--ink)}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:14px;margin:24px 0}
.stat{background:linear-gradient(165deg,var(--panel-hi),var(--panel));border:1px solid var(--hairline-soft);border-radius:var(--rad);padding:16px 18px}
.stat .sv{font-family:var(--num);font-weight:700;font-size:27px;color:var(--gold-hi)}
.stat .sk{font-size:12px;color:var(--ink-faint);letter-spacing:.1em;margin-top:3px}

/* ── 規格儀表板 ── */
.specdash{display:grid;grid-template-columns:minmax(170px,auto) 1fr;gap:1px;background:var(--hairline-soft);
  border:1px solid var(--hairline);border-radius:var(--rad);overflow:hidden;margin:26px 0;box-shadow:var(--glow)}
@media(max-width:560px){.specdash{grid-template-columns:1fr}}
.sd-hero{background:linear-gradient(160deg,#123826,#0a2015);padding:22px 24px;display:flex;flex-direction:column;justify-content:center;gap:3px}
.sd-hero .lbl{font-size:10.5px;letter-spacing:.34em;color:var(--gold)}
.sd-hero .bignum{font-family:var(--num);font-weight:700;font-size:clamp(30px,4.5vw,46px);line-height:1.1;
  background:linear-gradient(180deg,#fdf6e3,var(--gold-hi) 55%,var(--gold));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sd-hero .unit{font-size:13px;color:var(--ink-faint)}
.sd-body{background:var(--panel);padding:16px 20px;display:flex;flex-direction:column;gap:11px;justify-content:center}
.sd-row{display:grid;grid-template-columns:56px 1fr auto;gap:11px;align-items:center;font-size:13.5px}
.sd-row .k{color:var(--ink-faint);font-size:11.5px;letter-spacing:.16em}
.sd-row .track{height:9px;background:rgba(0,0,0,.35);border-radius:99px;overflow:hidden}
.sd-row .fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi));
  transform-origin:left;animation:barwide .9s cubic-bezier(.22,.8,.3,1) both;animation-delay:.25s}
.sd-row .v{font-family:var(--num);font-weight:700;font-size:13.5px;color:var(--ink)}
.sd-chips{display:flex;gap:8px;flex-wrap:wrap}
.sd-chip{font-size:12.5px;font-weight:600;background:rgba(255,255,255,.05);border:1px solid var(--hairline-soft);border-radius:99px;padding:6px 14px;color:var(--ink-sub)}
.sd-chip b{color:var(--gold-hi)}
.voldots i{display:inline-block;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.12);margin-right:3px}
.voldots i.on{background:var(--stamp);animation:ballpop .4s both}
.voldots i.on:nth-child(2){animation-delay:.1s}.voldots i.on:nth-child(3){animation-delay:.2s}
.voldots i.on:nth-child(4){animation-delay:.3s}.voldots i.on:nth-child(5){animation-delay:.4s}
.bignum .cnt{counter-reset:nn var(--n);animation:countup 1.6s cubic-bezier(.2,.75,.25,1) both;animation-delay:.3s}
.bignum .cnt::after{content:counter(nn)}

/* ── 機率動畫 ── */
.probwidget{background:linear-gradient(165deg,var(--panel-hi),var(--panel) 70%);border:1px solid var(--hairline-soft);border-radius:var(--rad);padding:20px 22px;margin:26px 0}
.probwidget h3{font-family:var(--serif);font-weight:900;font-size:16px;margin-bottom:14px;color:var(--ink)}
.pw-row{display:grid;grid-template-columns:44px 1fr 68px;gap:12px;align-items:center;margin-bottom:11px}
.pw-tag{width:38px;height:38px;border-radius:50%;color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.pw-row .track{height:15px;background:rgba(0,0,0,.32);border-radius:99px;overflow:hidden}
.pw-row .fill{height:100%;border-radius:99px;transform-origin:left;animation:barwide 1.1s cubic-bezier(.22,.8,.3,1) both}
.pw-row .v{font-family:var(--num);font-weight:700;font-size:14.5px;text-align:right;color:var(--ink)}
.pw-note{font-size:12.5px;color:var(--ink-faint);margin-top:6px;line-height:1.7}

/* ── 路單活棋盤 ── */
.roaddemo{background:linear-gradient(165deg,var(--panel-hi),var(--panel) 70%);border:1px solid var(--hairline-soft);border-radius:var(--rad);padding:18px 20px;margin:26px 0}
.roaddemo h3{font-family:var(--serif);font-weight:900;font-size:16px;margin-bottom:12px;color:var(--ink)}
.roaddemo .grid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(6,22px);gap:4px;overflow:hidden;padding:10px;background:rgba(0,0,0,.28);border-radius:var(--rad-s)}
.roaddemo i{width:22px;height:22px;border-radius:50%;border:3px solid rgba(243,236,217,.12);opacity:0;
  animation:roadloop 12s linear infinite;animation-delay:calc(var(--i)*.22s)}
.roaddemo i.b{border-color:var(--stamp)}
.roaddemo i.p{border-color:var(--player)}
.roaddemo i.t{border-color:var(--tie)}
.roaddemo i.e{animation:none;opacity:0;border-color:transparent}

/* ── 拖牌查詢器 ── */
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:8px;margin-bottom:20px}
.dgball{font-family:var(--num);font-weight:700;font-size:15px;padding:10px 0;border-radius:99px;
  border:1px solid transparent;color:#241b0c;cursor:pointer;
  background:radial-gradient(circle at 32% 28%,#fffdf4,var(--paper) 60%,var(--paper-dim));
  box-shadow:0 2px 6px rgba(0,0,0,.35),inset 0 -3px 5px rgba(87,80,63,.2);
  transition:transform .12s ease,box-shadow .12s ease}
.dgball:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.45)}
.dgball.sel{color:#fff;background:radial-gradient(circle at 32% 28%,#f08a77,var(--stamp) 65%,#b03a2e);
  box-shadow:0 0 0 2.5px rgba(226,86,74,.4),0 4px 14px rgba(226,86,74,.35);transform:scale(1.1)}
.dg-head{font-size:14.5px;font-weight:700;margin:6px 0 14px;color:var(--ink)}
.dg-head b{color:var(--gold-hi);font-family:var(--num);font-size:17px}

/* ── 模擬器 ── */
.simctl{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin-bottom:18px}
.simctl label{display:flex;flex-direction:column;gap:6px;font-size:11.5px;color:var(--ink-faint);font-weight:700;letter-spacing:.1em}
.simctl input,.simctl select{font-family:var(--num);font-size:15px;padding:9px 12px;border:1px solid var(--hairline-soft);border-radius:var(--rad-s);background:rgba(0,0,0,.3);color:var(--ink);width:150px}
.simctl input:focus,.simctl select:focus{outline:1.5px solid var(--gold);border-color:var(--gold)}
.simctl select option{background:var(--panel);color:var(--ink)}
#s-chart{background:rgba(0,0,0,.28)!important;border:1px solid var(--hairline-soft)!important;border-radius:var(--rad-s)!important}

/* ── 捲動觸發顯示 ── */
@supports (animation-timeline: view()){
  article.body>p,article.body>ul,article.body .tablewrap,.faq details,.verdictbox,.relbox,.specdash,.probwidget,.roaddemo{
    animation:rise .7s cubic-bezier(.22,.8,.3,1) both;
    animation-timeline:view();
    animation-range:entry 0% entry 32%;
  }
}

.stpill{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 12px;border-radius:99px;letter-spacing:.08em}
.stpill.hot{color:#ffb3a8;background:rgba(226,86,74,.16);border:1px solid rgba(226,86,74,.35)}
.stpill.icy{color:#a8cbe8;background:rgba(111,169,216,.14);border:1px solid rgba(111,169,216,.35)}
.stpill.chill{color:#9db8cc;background:rgba(111,169,216,.08);border:1px solid rgba(111,169,216,.2)}
.stpill.norm{color:var(--ink-faint);background:rgba(255,255,255,.04);border:1px solid var(--hairline-soft)}

/* ── NICK 專區 ── */
.vipfeat{grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:22px}
.acard.vipbig{border:1px solid var(--hairline)}
.acard.vipbig:hover{border-color:var(--gold)}
.acard.vipbig .cb{padding:18px 20px 20px;gap:9px}
.acard.vipbig h3{font-size:18px;font-family:var(--serif)}
.acard.vipbig .vipgo{margin-top:4px;font-size:13px;font-weight:700;color:var(--gold-hi);letter-spacing:.05em}
.acard.vipbig .thumb{aspect-ratio:2/1}

/* ── 浮動 LINE 鈕 ── */
.linefab{position:fixed;right:20px;bottom:22px;z-index:50;display:flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,#2fd06a,#06C755 60%,#05a648);color:#fff;font-weight:900;font-size:14.5px;
  letter-spacing:.08em;text-decoration:none;padding:13px 20px;border-radius:99px;
  box-shadow:0 4px 16px rgba(6,199,85,.4),0 2px 6px rgba(0,0,0,.35);
  transition:transform .15s ease,box-shadow .15s ease}
.linefab:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 8px 24px rgba(6,199,85,.5)}
.linefab svg{flex:0 0 auto;position:relative;z-index:1}
.linefab span{position:relative;z-index:1}
.linefab::after{content:"";position:absolute;inset:0;border-radius:99px;z-index:0;
  animation:linepulse 2.2s ease-out infinite both}  /* lp-fx ⑧ 脈衝環 */
@keyframes linepulse{0%{box-shadow:0 0 0 0 rgba(47,208,106,.55)}100%{box-shadow:0 0 0 15px rgba(47,208,106,0)}}
@media(max-width:560px){.linefab{right:14px;bottom:16px;padding:12px 17px;font-size:14px}}

/* ── 頁尾 ── */
footer{color:var(--ink-faint);padding:44px 0 52px;font-size:13px;border-top:1px solid var(--hairline-soft);background:var(--bg0)}
footer .fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:24px;padding-bottom:26px;border-bottom:1px solid var(--hairline-soft)}
footer h4{color:var(--gold);font-size:12px;letter-spacing:.28em;margin-bottom:12px}
footer a{color:var(--ink-faint);text-decoration:none;display:block;margin-bottom:8px;transition:color .15s}
footer a:hover{color:var(--gold-hi)}
footer .legal{padding-top:20px;font-size:12px;line-height:1.9;color:rgba(243,236,217,.35)}