/* ULTRON AI 官網樣式（tools/site/build.py 複製到 preview/site.css）。
   裝飾一律是 5090 產的圖（主視覺、卡片、標題牌、面板框、按鈕、底部圖示）；CSS 只排版、純色、細線，不畫光暈、漸層、網格（owner 10-15「AI 感」）。
   手機優先（Ahrefs：戰神賽特外掛 86%、賽特試玩 79% 手機搜尋）；960px 以上換電腦排版：頁首橫向選單＋內文／側欄兩欄（owner 10-19「手機跟電腦排版要不一樣」）。 */
:root { --bg:#0a0a0e; --bg2:#101017; --ink:#ece6d6; --muted:#a49d8c; --gold:#d9b25c; --gold2:#f1d58d; --red:#d6333a; --blue:#3f7fd9; --green:#3ecf6a; --line:#2b2618; --line2:#5a4a26; }
* { box-sizing:border-box; }
html, body { margin:0; }
html { scroll-padding-top:64px; }
body { background:var(--bg); color:var(--ink); font:15px/1.75 "Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif; -webkit-text-size-adjust:100%; }
img, video { display:block; max-width:100%; }
a { color:var(--gold2); }
.wrap { max-width:560px; margin:0 auto; padding:0 14px 32px; }
.skip { position:absolute; left:-999px; top:0; z-index:99; padding:8px 12px; background:var(--gold); color:#1d1606; }
.skip:focus { left:8px; }

/* 中文只在標點和空白換行，詞組不拆；數字＋單位、品牌名 build 時用不換行空白綁住（tools/cjk_text.py）。驗：tools/linebreak_check.py */
body { word-break:keep-all; overflow-wrap:anywhere; line-break:strict; }
table td, table th { overflow-wrap:normal; }
p, li, summary, td, figcaption { text-wrap:pretty; }
h1, h2, h3, .key, .sub, summary { text-wrap:balance; }
.nw { white-space:nowrap; }

/* ── 頁首 ── */
.top { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:10px; height:56px; margin:0 -14px; padding:0 14px; background:var(--bg); border-bottom:1px solid var(--line); }
.top .logo img { height:38px; width:auto; }
.top .logo { margin-right:auto; }
.online { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:#cfc8b5; white-space:nowrap; }
.online[hidden] { display:none; }
.online i { position:relative; width:7px; height:7px; border-radius:50%; background:var(--green); }
.online i::after { content:""; position:absolute; inset:0; border-radius:50%; background:var(--green); animation:ping 1.6s ease-out infinite; }
.online b { color:#7ff0a0; font-family:Inter,sans-serif; }
@media (prefers-reduced-motion: reduce) { .online i::after { animation:none; } }
.mainnav { display:none; }
.btn-s { --h:38px; display:inline-flex; align-items:center; height:var(--h); padding:0 22px; text-decoration:none; font:900 14px/1 "Noto Serif TC",serif; letter-spacing:.06em;
         border:0 solid transparent; background:none; border-image:url("/a/btn_gold.webp") 60 150 fill / calc(var(--h) * .1818) calc(var(--h) * .4545) stretch; color:#2b1d05; white-space:nowrap; }
.subnav { display:flex; gap:6px; overflow-x:auto; margin:0 -14px; padding:8px 14px; border-bottom:1px solid var(--line); scrollbar-width:none; }
.subnav::-webkit-scrollbar { display:none; }
.subnav a { flex:0 0 auto; padding:5px 12px; border:1px solid var(--line2); border-radius:3px; color:var(--gold2); font:700 13px/1.2 "Noto Serif TC",serif; text-decoration:none; }
.subnav a[aria-current="page"], .subnav a.on { background:var(--gold); color:#1d1606; border-color:var(--gold); }

/* ── 主視覺：先顯示封面圖（最大內容繪製就是它，preload＋fetchpriority），網頁載完才換成循環影片；畫面外、省流量模式、減少動態都不載影片 ── */
.hero { position:relative; margin:0 -14px; aspect-ratio:960/498; background:#000; overflow:hidden; }
.hero > img, .hero > video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero > video { opacity:0; transition:opacity .5s; }
.hero > video.on { opacity:1; }
/* 沒有影片的主圖：進頁面時鏡頭慢慢推近一次（4.8 秒、只跑一次，不超過 5 秒就不需要暫停鍵；系統設定減少動態的人不跑） */
.hero > img:only-child { transform-origin:58% 42%; animation:heroPush 4.8s cubic-bezier(.2,.6,.3,1) both; }
@keyframes heroPush { from { transform:scale(1.1) translate(1.5%, -1%); filter:brightness(.75); } to { transform:none; filter:none; } }
@media (prefers-reduced-motion: reduce) { .hero > img:only-child { animation:none; } }
.slides { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin:0 -14px; }
.slides::-webkit-scrollbar { display:none; }
.slide { position:relative; flex:0 0 100%; aspect-ratio:960/498; scroll-snap-align:center; background:#000; overflow:hidden; }
.slide > img, .slide > video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.slide > video { opacity:0; transition:opacity .5s; }
.slide > video.on { opacity:1; }
.hero-bar { display:flex; align-items:center; justify-content:center; gap:10px; padding:8px 0 0; }
.dots { display:flex; gap:6px; }
.dots button { width:6px; height:6px; padding:0; border:0; border-radius:3px; background:#4a4233; transition:width .3s, background-color .3s; }
.dots button[aria-current="true"] { width:18px; background:var(--gold); }
.hero-pause { min-width:28px; min-height:28px; padding:0; border:0; background:transparent; color:var(--muted); font-size:11px; }

/* ── 進場動畫：只動透明度和位置。沒有 JS 時沒有 .js，內容一開始就全部看得到（AI 爬蟲不跑 JS） ── */
.js .rv { opacity:0; translate:0 18px; transition:opacity .6s ease-out, translate .6s ease-out; }
.js .rv.in { opacity:1; translate:0 0; }
.js .rv-list > * { opacity:0; translate:-12px 0; transition:opacity .45s ease-out, translate .45s ease-out; }
.js .rv-list.in > * { opacity:1; translate:0 0; }
.js .rv-list.in > :nth-child(2) { transition-delay:.06s; } .js .rv-list.in > :nth-child(3) { transition-delay:.12s; }
.js .rv-list.in > :nth-child(4) { transition-delay:.18s; } .js .rv-list.in > :nth-child(n+5) { transition-delay:.24s; }
@media (prefers-reduced-motion: reduce) { .js .rv, .js .rv-list > * { opacity:1; translate:none; transition:none; } }

/* 即時小綠點 */
.live-dot { display:inline-flex; align-items:center; gap:6px; }
.live-dot i { position:relative; width:8px; height:8px; border-radius:50%; background:var(--green); }
.live-dot i::after { content:""; position:absolute; inset:0; border-radius:50%; background:var(--green); animation:ping 1.6s ease-out infinite; }
@keyframes ping { to { scale:2.6; opacity:0; } }
@media (prefers-reduced-motion: reduce) { .live-dot i::after { animation:none; } }

/* ── 標題區 ── */
.crumb { margin:10px 0 0; font-size:12.5px; color:var(--muted); }
.crumb a { color:var(--gold2); text-decoration:none; }
.intro { padding:12px 0 4px; }
h1 { margin:0 0 8px; font:900 24px/1.38 "Noto Serif TC",serif; letter-spacing:.02em; }
h1 em { font-style:normal; color:var(--gold2); }
.byline { margin:0 0 8px; font-size:12.5px; color:var(--muted); }
.lead { margin:0; color:#d6cfbd; font-size:15.5px; }
.lead b { color:#fff; }
.cta { --h:54px; display:flex; align-items:center; justify-content:center; width:100%; height:var(--h); margin:16px 0 6px; padding:0 calc(var(--h) * .5); text-decoration:none;
       border:0 solid transparent; background:none; border-image:url("/a/btn_gold.webp") 60 150 fill / calc(var(--h) * .1818) calc(var(--h) * .4545) stretch;
       color:#2b1d05; font:900 19px/1 "Noto Serif TC",serif; letter-spacing:.12em; }
.btn-dark { border:0 solid transparent; background:none; border-image:url("/a/btn_dark.webp") 50 140 fill / calc(var(--h) * .1845) calc(var(--h) * .5166) stretch; color:var(--gold2); }
.cta.btn-dark { color:var(--gold2); }
.cta-note { margin:0; text-align:center; font-size:13px; color:var(--muted); }
.badges { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:12px; }
.badges span { padding:4px 10px; border:1px solid var(--line2); border-radius:20px; font-size:12.5px; color:var(--gold2); white-space:nowrap; }

/* 數字面板 */
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px; }
.stats.s4 { grid-template-columns:repeat(2,1fr); }
.stat { border-style:solid; border-width:14px; border-image:url("/a/panel_b.webp") 70 fill / 14px stretch; text-align:center; padding:2px 0; }
.stat span { display:block; font-size:12px; color:var(--muted); }
.stat b { font-family:Inter,sans-serif; font-weight:800; font-size:22px; line-height:1.25; color:var(--gold2); white-space:nowrap; }
.stat small { display:block; font-size:11px; color:var(--muted); }

/* ── 內文區塊 ── */
section { margin-top:30px; }
.ttl { position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:900/300; max-width:560px; margin:0 auto 6px;
       background:url("/a/plaque.webp") center / 100% auto no-repeat; }
.ttl h2 { margin:0; padding:0 12%; font:900 20px/1.25 "Noto Serif TC",serif; color:var(--gold2); letter-spacing:.1em; text-align:center; }
h3 { margin:18px 0 6px; font:900 17px/1.45 "Noto Serif TC",serif; color:var(--gold2); }
.key { margin:0 0 12px; text-align:center; font:900 17px/1.55 "Noto Serif TC",serif; color:#fff; }
.sub { margin:0 0 12px; font-size:13.5px; color:var(--muted); text-align:center; }
.txt p, article p.p { margin:0 0 12px; color:#d6cfbd; }
.chips { display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin:0 0 12px; }
.chips span { padding:3px 10px; border:1px solid var(--line2); border-radius:3px; font-size:12px; color:var(--gold2); white-space:nowrap; }
.pts { margin:0 0 14px; padding:0 0 0 1.2em; }
.pts li { margin:0 0 8px; color:#d6cfbd; }
.pts li::marker { color:var(--gold); }
.pts b, .txt b { color:#fff; }
.panel { border-style:solid; border-width:22px; border-image:url("/a/panel_b.webp") 70 fill / 22px stretch; padding:0 2px; }
.src { font-size:12px; color:var(--muted); }
.note { margin:8px 0 0; font-size:12.5px; color:var(--muted); }
.stamp { margin:8px 0 0; font-size:12px; color:var(--muted); text-align:right; }

/* 表格：手機上寬表格可以左右滑，不撐破畫面 */
.tw { overflow-x:auto; margin:4px 0 6px; -webkit-overflow-scrolling:touch; }
table.cmp { width:100%; border-collapse:collapse; font-size:13px; }
.cmp th, .cmp td { padding:9px 6px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.cmp th { font:900 13px/1.4 "Noto Serif TC",serif; color:var(--gold2); white-space:nowrap; }
.cmp td:first-child { color:#fff; }
.cmp td { color:#d6cfbd; }
.cmp td.n, .cmp th.n { text-align:right; font-family:Inter,sans-serif; font-weight:600; white-space:nowrap; }
.cmp tr.hl td { color:#fff; background:#ffffff08; }
caption { caption-side:bottom; padding-top:6px; font-size:12px; color:var(--muted); text-align:left; }

/* 步驟 */
.steps { margin:0; padding:0; list-style:none; }
.steps li { display:flex; align-items:center; gap:12px; padding:11px 2px; border-bottom:1px solid var(--line); }
.steps li:last-child { border-bottom:0; }
.steps b { color:var(--gold2); }
.steps i { flex:0 0 30px; font:900 24px/1 Cinzel,serif; font-style:normal; color:var(--gold2); text-align:center; }

/* 常見問題 */
details { border-bottom:1px solid var(--line); }
summary { min-height:50px; display:flex; align-items:center; font:900 15px/1.45 "Noto Serif TC",serif; color:#fff; cursor:pointer; padding:6px 0; }
details p { margin:0 0 12px; font-size:14px; color:#d6cfbd; }
details p b { color:var(--gold2); }

/* 爆分空台清單 */
.mrow { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); }
.mrow:last-child { border-bottom:0; }
.mrow img { width:34px; height:34px; object-fit:contain; }
.mrow .g { font-size:12px; color:var(--muted); }
.mrow .no { font:900 18px/1.3 "Noto Serif TC",serif; color:#fff; }
.mrow .r { text-align:right; font-size:12.5px; color:var(--muted); line-height:1.45; }
.mrow .r b { font-family:Inter,sans-serif; font-weight:800; font-size:17px; color:#ff6b62; }
.mrow .r i { font-style:normal; color:var(--gold2); }
.lock { display:flex; flex-direction:column; align-items:center; gap:2px; margin-top:10px; padding:2px 8px; text-align:center; text-decoration:none;
        border-style:solid; border-width:14px; border-image:url("/a/panel_b.webp") 70 fill / 14px stretch; }
.lock b { font:900 20px/1.3 "Noto Serif TC",serif; color:var(--gold2); }
.lock span { font-size:13px; color:var(--muted); }

/* 分布長條（真實數據：每一級距幾台）；長條寬度＝台數比例，build 時寫死在 style */
.bars { margin:4px 0 6px; padding:0; list-style:none; }
.bars li { display:grid; grid-template-columns:92px minmax(0,1fr) 52px; align-items:center; gap:8px; padding:5px 0; font-size:12.5px; color:#d6cfbd; }
.bars li u { display:block; height:12px; border-radius:2px; background:var(--gold); text-decoration:none; transform-origin:left; }
.bars li.boom u { background:var(--red); } .bars li.cold u { background:#5b6a86; }
.bars li b { font-family:Inter,sans-serif; font-weight:700; text-align:right; color:#fff; }
.js .bars.rv u { transform:scaleX(0); transition:transform .9s cubic-bezier(.2,.7,.2,1); }
.js .bars.rv.in u { transform:scaleX(1); }
@media (prefers-reduced-motion: reduce) { .js .bars.rv u { transform:none; transition:none; } }

/* 牌路（用 App 同一套圓珠圖） */
.road { max-width:100%; display:grid; grid-auto-flow:column; grid-template-rows:repeat(6, var(--c, 18px)); grid-auto-columns:var(--c, 18px); gap:1px; overflow-x:auto; padding:6px; background:#f3efe4; border-radius:3px; }
.road img { width:100%; height:100%; image-rendering:pixelated; }
.road.dark { background:#14141c; }
.legend { display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 0; font-size:12px; color:var(--muted); }
.legend img { display:inline-block; width:12px; height:12px; vertical-align:-1px; margin-right:3px; image-rendering:pixelated; }
.tables10 { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.tcard { min-width:0; border-style:solid; border-width:14px; border-image:url("/a/panel_b.webp") 70 fill / 14px stretch; padding:0 2px 4px; }
.tcard h3 { margin:0 0 4px; display:flex; justify-content:space-between; align-items:baseline; }
.tcard h3 small { font:600 12px/1 Inter,sans-serif; color:var(--muted); }
.tcard p { margin:6px 0 0; font-size:13px; color:#d6cfbd; }
.tcard p b { color:#fff; }

/* 卡片、遊戲、相關連結 */
.cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.card { display:block; color:inherit; text-decoration:none; }
.card img { width:100%; height:auto; aspect-ratio:1; }
.card p { margin:6px 2px 0; font-size:13px; line-height:1.6; color:#d6cfbd; }
.card p b { display:block; color:var(--gold2); font-size:14px; }
.games { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.game { display:block; border-style:solid; border-width:14px; border-image:url("/a/panel_b.webp") 70 fill / 14px stretch; text-align:center; padding:0 0 4px; color:inherit; text-decoration:none; }
.game img { width:100%; height:62px; object-fit:contain; margin:0 auto 4px; }
.game b { display:block; font:900 14.5px/1.4 "Noto Serif TC",serif; color:#fff; }
.game span { display:block; font-size:12px; line-height:1.55; color:var(--muted); }
.game span em { font:normal 800 13px/1 Inter,sans-serif; color:var(--gold2); }
.game.wide { grid-column:1 / -1; }
.more { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 6px; padding:0; list-style:none; }
.more a { display:flex; flex-direction:column; justify-content:center; min-height:58px; height:100%; padding:10px; border:1px solid var(--line2); border-radius:3px; color:var(--ink); text-decoration:none; }
.more a b { font:900 15px/1.35 "Noto Serif TC",serif; color:var(--gold2); }
.more a span { font-size:12px; line-height:1.5; color:var(--muted); }
.toc { margin:14px 0 0; padding:10px 14px; border:1px solid var(--line2); border-radius:3px; }
.toc b { font:900 14px/1.4 "Noto Serif TC",serif; color:var(--gold2); }
.toc ol { margin:6px 0 0; padding-left:1.3em; font-size:13.5px; }
.toc li { margin:3px 0; }
.toc a { color:#d6cfbd; text-decoration:none; }
.posts { margin:0; padding:0; list-style:none; }

/* App 實際畫面 */
.appdemo { position:relative; margin:30px -14px 0; padding:8px 14px 18px; background:url("/a/stage.webp") center top / 100% auto no-repeat; }
.appdemo .ttl { margin-bottom:2px; }
.demo-grid { display:grid; grid-template-columns:46% 1fr; gap:12px; align-items:center; margin-top:6px; }
.phone { position:relative; width:100%; margin:0; aspect-ratio:680/1355; }
.phone video, .phone .shot { position:absolute; left:5.735%; top:2.140%; width:88.235%; height:95.720%; object-fit:cover; background:#05060c; border-radius:6% / 2.8%; }
.phone .frame { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.phone.solo { width:min(66vw, 280px); margin:6px auto 0; }
.live { list-style:none; margin:0; padding:0; }
.live li { position:relative; padding:8px 6px 8px 34px; border-left:2px solid #3a3322; color:var(--muted); font-size:13px; line-height:1.45; cursor:pointer; transition:color .3s, background-color .3s; }
.live li + li { margin-top:4px; }
.live li i { position:absolute; left:6px; top:8px; width:22px; height:22px; border:1px solid var(--gold); border-radius:50%; font:800 12px/20px Inter,sans-serif; font-style:normal; text-align:center; color:var(--gold2); transition:background-color .3s, color .3s; }
.live li u { position:absolute; left:-2px; top:0; width:2px; height:100%; background:var(--gold2); transform-origin:top; transform:scaleY(var(--k, 0)); }
.live li.on { color:#fff; background:#ffffff0d; }
.live li.on i, .live li.done i { background:var(--gold); color:#1d1606; }
.live li.done { color:#d6cfbd; }
.shots-h { margin:16px 0 8px; font:900 16px/1.4 "Noto Serif TC",serif; color:var(--gold2); text-align:center; }
.shots { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -14px; padding:0 14px 8px; scrollbar-width:none; }
.shots::-webkit-scrollbar { display:none; }
.shots figure { flex:0 0 40%; margin:0; scroll-snap-align:start; }
.shots img { width:100%; height:auto; border:1px solid var(--line2); border-radius:10px; }
.shots figcaption { margin-top:6px; font-size:12.5px; line-height:1.5; color:#d6cfbd; }
.shots figcaption b { display:inline-block; width:18px; height:18px; margin-right:5px; border-radius:50%; background:var(--gold); color:#1d1606; font:800 11px/18px Inter,sans-serif; text-align:center; }
.demo-tabs { display:flex; justify-content:center; gap:6px; margin:4px 0 10px; }
.demo-tabs button, .seg button { --h:34px; height:var(--h); padding:0 22px; font:700 13px/1 "Noto Serif TC",serif; border:0 solid transparent; background:none;
  border-image:url("/a/btn_dark.webp") 50 140 fill / calc(var(--h) * .1845) calc(var(--h) * .5166) stretch; color:var(--gold2); }
.demo-tabs button[aria-pressed="true"], .seg button[aria-pressed="true"] { border-image:url("/a/btn_gold.webp") 60 150 fill / calc(var(--h) * .1818) calc(var(--h) * .4545) stretch; color:#2b1d05; }
.seg { display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin:0 0 10px; }
.points { list-style:none; margin:16px 0 0; padding:0; }
.points li { display:grid; grid-template-columns:52px 1fr; align-items:baseline; gap:4px; padding:10px 2px; border-bottom:1px solid var(--line); color:#d6cfbd; }
.points li:last-child { border-bottom:0; }
.points i { font:900 26px/1 Cinzel,serif; font-style:normal; color:var(--gold2); }
.points b { color:#fff; }
.demo-note { margin:6px 0 0; text-align:center; font-size:12px; color:var(--muted); }

/* 官方試玩：按了才載入（不先放 iframe，不拖慢開頁） */
.demo-box { position:relative; aspect-ratio:960/498; margin:4px 0 6px; background:#000; border:1px solid var(--line2); overflow:hidden; }   /* 封面圖原比例，不裁（10-20 owner「圖片都被裁切」） */
.demo-box:has(iframe) { aspect-ratio:16/9; }   /* 按了開始試玩、遊戲真的載入後才換成遊戲要的 16:9 */
.demo-box > img { width:100%; height:100%; object-fit:cover; opacity:.55; }
.demo-box iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.demo-box .play { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; border:0; background:transparent; color:#fff; cursor:pointer; }
.demo-box .play b { --h:50px; display:flex; align-items:center; height:var(--h); padding:0 34px; border:0 solid transparent; border-image:url("/a/btn_gold.webp") 60 150 fill / calc(var(--h) * .1818) calc(var(--h) * .4545) stretch;
  color:#2b1d05; font:900 17px/1 "Noto Serif TC",serif; letter-spacing:.08em; }
.demo-box .play span { font-size:12.5px; color:#e6dfcd; text-shadow:0 1px 2px #000; }
.demo-box .msg { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:16px; background:#0a0a0ee6; text-align:center; font-size:14px; }

/* 歡迎彈窗 */
dialog.pop { width:min(92vw, 760px); max-width:none; padding:0; border:0; background:transparent; color:var(--ink); overflow:visible; }
dialog.pop:focus { outline:none; }
dialog.pop::backdrop { background:rgba(0,0,0,.72); backdrop-filter:blur(4px); }
.pop-box { position:relative; border-style:solid; border-width:18px; border-image:url("/a/panel_b.webp") 70 fill / 18px stretch; }
.pop-box video { display:block; width:100%; height:auto; aspect-ratio:16/9; background:#000; }
.pop-media { position:relative; }
.pop-snd { position:absolute; bottom:8px; right:8px; min-height:34px; padding:0 12px; border:1px solid var(--gold); border-radius:17px; background:rgba(10,10,14,.78); color:var(--gold2); font:900 13px/1 "Noto Serif TC",serif; }
.pop-x { position:absolute; top:-52px; right:-6px; width:42px; height:42px; border:1px solid var(--gold); border-radius:50%; background:var(--bg); color:var(--gold2); font:400 24px/1 Inter,sans-serif; }
.pop-row { display:flex; gap:10px; padding:12px 0 0; }
.pop-row .cta { --h:50px; flex:1; margin:0; font-size:17px; }
.pop-row .later { --h:50px; height:var(--h); padding:0 30px; font:900 15px/1 "Noto Serif TC",serif; }
.pop-note { margin:8px 0 0; text-align:center; font-size:12.5px; color:var(--muted); }
dialog.pop[open] { animation:pop-in .35s ease-out; }
@keyframes pop-in { from { opacity:0; scale:.94; } }
@media (prefers-reduced-motion: reduce) { dialog.pop[open] { animation:none; } }
.peek { position:fixed; left:50%; bottom:calc(76px + env(safe-area-inset-bottom)); z-index:30; translate:-50% 0; display:flex; align-items:center; gap:10px;
        width:min(calc(100vw - 20px), 460px); padding:6px; border:1px solid var(--gold); border-radius:4px; background:var(--bg); }
.peek[hidden] { display:none; }
.peek img { width:84px; height:auto; aspect-ratio:960/498; border-radius:2px; }
.peek button.go { flex:1; min-height:44px; border:0; background:transparent; color:var(--gold2); text-align:left; font:900 14.5px/1.35 "Noto Serif TC",serif; }
.peek button.no { width:36px; height:44px; border:0; background:transparent; color:var(--muted); font:400 20px/1 Inter,sans-serif; }

/* ── 頁尾 ── */
.foot { margin-top:36px; padding:18px 0 0; border-top:1px solid var(--line); font-size:13px; color:var(--muted); }
.foot-cols { display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; }
.foot h4 { margin:0 0 6px; font:900 14px/1.4 "Noto Serif TC",serif; color:var(--gold2); }
.foot ul { margin:0; padding:0; list-style:none; }
.foot li { margin:0 0 4px; }
.foot a { color:#cfc7b3; text-decoration:none; }
.foot .fine { margin:16px 0 0; text-align:center; font-size:12.5px; }

/* ── 手機底部導覽（5090 畫的黑金圓形圖示） ── */
.dock { position:fixed; left:0; right:0; bottom:0; z-index:35; display:grid; grid-template-columns:repeat(5,1fr); align-items:end; padding:2px 4px calc(4px + env(safe-area-inset-bottom)); background:linear-gradient(180deg, #17130c, #0a0a0e); border-top:1px solid var(--line2); box-shadow:0 -6px 18px #0009; }
.dock a { display:flex; flex-direction:column; align-items:center; gap:0; padding:2px 0; color:#cfc8b5; font:700 12px/1.3 "Noto Serif TC",serif; text-decoration:none; -webkit-tap-highlight-color:transparent; }
.dock img { width:52px; height:52px; filter:drop-shadow(0 3px 4px #000c); transition:transform .2s; }
/* 中間「推薦」凸起、外面一圈金紅光環（參考賽特之眼中間那格） */
.dock a:nth-child(3) img { position:relative; top:-20px; width:68px; height:68px; margin:0 0 -16px; padding:6px; border-radius:50%; background:radial-gradient(circle at 50% 38%, #4a1712 0%, #1a0b08 55%, #0a0a0e 100%);
  box-shadow:0 0 0 2px var(--gold), 0 0 0 5px #d6333a55, 0 0 20px #d9b25c99; }
.dock a:nth-child(3) { color:var(--gold2); }
.dock img[src*="dk_mt"] { width:68px; object-fit:cover; object-position:center; }   /* MT 標誌是橫的，方框會顯得小 → 這格放寬、上下空白裁掉 */
.dock a:active img { transform:scale(.92); }
.dock a[aria-current="page"] img { transform:translateY(-3px) scale(1.06); filter:drop-shadow(0 0 8px #d9b25caa) drop-shadow(0 3px 4px #000c); }
.dock a[aria-current="page"] { color:var(--gold2); }
body.has-dock { padding-bottom:calc(84px + env(safe-area-inset-bottom)); }

/* ── 電腦版（960 以上）：頁首橫向選單、內文＋側欄兩欄、主視覺加寬；手機底部導覽收起來 ── */
@media (min-width:960px) {
  body { font-size:16px; }
  .wrap { max-width:1200px; padding:0 32px 40px; }
  .top { height:72px; margin:0 -32px; padding:0 32px; gap:22px; }
  .top .logo img { height:46px; }
  .top .logo { margin-right:0; }
  .mainnav { display:flex; gap:4px; margin-right:auto; }
  .mainnav a { padding:8px 12px; border-radius:3px; color:#d6cfbd; font:700 15px/1 "Noto Serif TC",serif; text-decoration:none; }
  .mainnav a:hover, .mainnav a[aria-current="page"] { color:var(--gold2); background:#ffffff0a; }
  .btn-s { --h:44px; font-size:15px; }
  .subnav { display:none; }
  .dock { display:none; }
  body.has-dock { padding-bottom:0; }
  .hero, .slides { margin:20px 0 0; border:1px solid var(--line2); }
  /* 10-20 owner「為什麼電腦版的 圖片都被裁切?」：原本高度壓到 440px＋填滿＝上下各被切掉一成多（標題字、角色的頭不見），960 寬的圖還被放大到 1136。
     改成照原圖比例 960×498 完整顯示、置中（不裁、不放大）；兩側墊同一張圖的模糊暗底（--bg 跟 <img> 同一個網址，不多下載）。 */
  .hero, .slide { aspect-ratio:auto; height:min(498px, calc((100vw - 64px) / 1.9277)); isolation:isolate; }
  .hero::before, .slide::before { content:""; position:absolute; inset:-30px; z-index:-1; background:var(--bg, #000) center / cover; filter:blur(28px) brightness(.38) saturate(1.15); }
  .hero > img, .hero > video, .slide > img, .slide > video { left:50%; right:auto; width:auto; aspect-ratio:960 / 498; translate:-50% 0; }
  .page { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:44px; align-items:start; }
  .page > aside { position:sticky; top:92px; padding-top:22px; }
  h1 { font-size:34px; }
  .lead { font-size:17px; }
  .intro .cta { width:auto; min-width:340px; display:inline-flex; }
  .intro .cta-note { text-align:left; }
  .badges { justify-content:flex-start; }
  .stats { grid-template-columns:repeat(4,1fr); }
  .stats.s3 { grid-template-columns:repeat(3,1fr); }
  .ttl { max-width:480px; }
  .ttl h2 { font-size:22px; }
  .cards { grid-template-columns:repeat(4,1fr); gap:18px; }
  .games { grid-template-columns:repeat(3,1fr); gap:14px; }
  .games.g4 { grid-template-columns:repeat(4,1fr); }
  .more { grid-template-columns:repeat(3,1fr); }
  .tables10 { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .cmp, table.cmp { font-size:14px; }
  .cmp th, .cmp td { padding:10px 10px; }
  .appdemo { margin:30px 0 0; padding:8px 0 18px; background-size:min(100%, 820px) auto; }
  .demo-grid { grid-template-columns:300px 1fr; gap:28px; max-width:760px; margin-left:auto; margin-right:auto; }
  .shots { margin:0; padding:0 0 8px; }
  .shots figure { flex:0 0 22%; }
  .points { max-width:760px; margin-left:auto; margin-right:auto; }
  .peek { bottom:16px; }
  .foot-cols { grid-template-columns:repeat(4,1fr); }
  .side-card { border-style:solid; border-width:18px; border-image:url("/a/panel_b.webp") 70 fill / 18px stretch; padding:0 4px 4px; }
  .side-card + .side-card { margin-top:18px; }
  .side-card h4 { margin:0 0 6px; font:900 16px/1.4 "Noto Serif TC",serif; color:var(--gold2); }
  .side-card .cta { --h:50px; font-size:17px; }
  .side-card ul { margin:0; padding:0; list-style:none; font-size:14px; }
  .side-card li { padding:6px 0; border-bottom:1px solid var(--line); }
  .side-card li:last-child { border-bottom:0; }
  .side-card li a { color:#d6cfbd; text-decoration:none; }
  .side-card .mrow { padding:6px 0; }
}
@media (max-width:959px) { .page > aside { display:none; } }

/* ── 百家樂試玩（/baccarat/play/，src/bacplay.js）── */
.bp { margin:12px 0 4px; padding:12px; border:1px solid var(--line2); border-radius:14px; background:radial-gradient(120% 90% at 50% 0%, #0f3b2a 0%, #0a2219 55%, #08150f 100%); }
.bp-noscript { margin:0; color:var(--muted); }
.bp-table { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.bp-side { min-width:0; padding:8px 8px 10px; border-radius:10px; background:#00000040; border:1px solid #ffffff14; transition:box-shadow .3s, border-color .3s; }
.bp-p .bp-h { color:#8fb8ff; } .bp-b .bp-h { color:#ff8f8f; }
.bp-h { font:900 16px/1.2 "Noto Serif TC",serif; text-align:center; }
.bp-h b { display:inline-block; min-width:1.6em; margin-left:4px; font:800 22px/1 Inter,sans-serif; color:#fff; }
.bp-side.win { border-color:var(--gold); box-shadow:0 0 0 2px #d9b25c66, 0 0 22px #d9b25c55; }
.bp-cards { display:flex; justify-content:center; gap:4px; min-height:70px; margin-top:8px; }
.bp-card { position:relative; width:44px; height:64px; border-radius:6px; background:linear-gradient(#fff, #ece8df); color:#151515; box-shadow:0 2px 6px #0008;
  display:flex; flex-direction:column; align-items:center; justify-content:center; animation:bpIn .32s cubic-bezier(.2,.7,.3,1) both; }
.bp-card i { font:800 18px/1 Inter,sans-serif; font-style:normal; } .bp-card em { font-style:normal; font-size:18px; line-height:1.1; }
.bp-card.red { color:#c62828; }
.bp-card:nth-child(3) { transform:rotate(90deg); margin:0 8px; }
@keyframes bpIn { from { opacity:0; transform:translateY(-26px) rotateY(80deg) scale(.8); } to { opacity:1; transform:none; } }
.bp-card:nth-child(3) { animation-name:bpIn3; }
@keyframes bpIn3 { from { opacity:0; transform:translateY(-26px) rotate(90deg) scale(.8); } to { opacity:1; transform:rotate(90deg); } }
.bp-msg { min-height:3.4em; margin:10px 0 8px; padding:8px 10px; border-radius:8px; background:#00000059; font-size:14px; line-height:1.6; text-align:center; }
.bp-bets { display:grid; grid-template-columns:1fr .8fr 1fr; gap:8px; }
.bp-bets button { display:flex; flex-direction:column; align-items:center; gap:2px; min-height:76px; padding:8px 4px; border-radius:12px; border:1px solid #ffffff2e; background:#00000047; color:#fff; font:inherit; cursor:pointer; transition:transform .12s, background .2s; }
.bp-bets button:active { transform:scale(.97); }
.bp-bets [data-bet="閒"] { border-color:#3f7fd9aa; } .bp-bets [data-bet="莊"] { border-color:#d6333aaa; } .bp-bets [data-bet="和"] { border-color:#3ecf6a99; }
.bp-bets span { font:900 20px/1.1 "Noto Serif TC",serif; } .bp-bets small { font-size:11px; color:#cfc8b5; } .bp-bets b { font:700 15px/1.2 Inter,sans-serif; color:var(--gold2); }
.bp-chips { display:flex; justify-content:center; gap:10px; margin:12px 0 4px; }
.bp-chips button { width:52px; height:52px; border-radius:50%; border:3px dashed #ffffffb0; background:radial-gradient(circle, #b8892b 0 58%, #6e4f12 60%); color:#fff; font:800 14px/1 Inter,sans-serif; cursor:pointer; box-shadow:0 2px 6px #0008; }
.bp-chips button[aria-checked="true"] { outline:3px solid var(--gold2); outline-offset:2px; transform:translateY(-3px); }
.bp-ctl { display:grid; grid-template-columns:1fr 1.4fr 1fr; gap:8px; align-items:center; margin-top:8px; }
.bp-ctl button:not(.cta) { min-height:44px; border-radius:10px; border:1px solid var(--line2); background:#00000059; color:var(--ink); font:inherit; font-size:14px; cursor:pointer; }
.bp-ctl .cta { --h:50px; margin:0; font-size:18px; }
.bp-ctl2 { grid-template-columns:1fr 1fr; margin-top:10px; }
.bp.busy .bp-ctl button, .bp.busy .bp-bets button { opacity:.55; }
.bp-stat { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px; margin:10px 0 6px; font-size:13px; color:#cfc8b5; }
.bp-stat b { color:#fff; font-family:Inter,sans-serif; }
.bp-roads { display:grid; gap:8px; }
.bp-rt { margin:4px 0 2px; font-size:13px; color:#cfc8b5; }
.bp .road { min-height:calc(6 * 19px + 12px); }
.bp-d3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; }
.bp-d3 .road { min-height:calc(6 * 13px + 12px); padding:4px; }
.bp-ai { margin-top:10px; padding:8px 10px; border-radius:8px; border:1px solid #d9b25c55; background:#00000059; font-size:14px; line-height:1.6; }
.bp-ai b { color:var(--gold2); }
@media (prefers-reduced-motion: reduce) { .bp-card, .bp-card:nth-child(3) { animation:none; } }

/* ── 百家樂機率計算器（/baccarat/calc/，src/baccalc.js）── */
.bc { margin:12px 0 4px; padding:12px; border:1px solid var(--line2); border-radius:14px; background:linear-gradient(160deg, #141826 0%, #0c0f18 100%); }
.bc-top { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.bc-sel { font-size:14px; color:#cfc8b5; }
.bc select { min-height:40px; margin-left:6px; padding:0 10px; border-radius:8px; border:1px solid var(--line2); background:#000; color:var(--ink); font:inherit; }
.bc-top button, .bc-c button { min-height:40px; border-radius:8px; border:1px solid var(--line2); background:#00000059; color:var(--ink); font:inherit; cursor:pointer; }
.bc-top button { padding:0 14px; font-size:14px; }
.bc-res { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin:12px 0 6px; }
.bc-r { padding:10px 4px; border-radius:10px; text-align:center; background:#00000059; border:1px solid #ffffff1f; }
.bc-r span { display:block; font:900 18px/1.2 "Noto Serif TC",serif; }
.bc-r b { display:block; margin-top:4px; font:800 17px/1.2 Inter,sans-serif; color:#fff; white-space:nowrap; }
.bc-b { border-color:#d6333a99; } .bc-b span { color:#ff8f8f; } .bc-p { border-color:#3f7fd999; } .bc-p span { color:#8fb8ff; } .bc-t { border-color:#3ecf6a88; } .bc-t span { color:#7ee2a0; }
.bc-sub { margin:4px 0 10px; font-size:13px; line-height:1.6; color:#cfc8b5; }
.bc-h { margin:8px 0 6px; font-size:13px; color:var(--gold2); }
.bc-cards { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px; }
.bc-c { display:grid; grid-template-columns:2.6em 34px minmax(0, 1fr) 34px; align-items:center; gap:3px; padding:4px 5px; border-radius:8px; background:#00000040; font-size:13px; }
.bc-c b { text-align:center; font:600 13px/1 Inter,sans-serif; color:#fff; white-space:nowrap; }
.bc-c button { min-height:36px; padding:0; font-size:18px; min-width:0; }
.bc-streak { margin-top:12px; padding:8px 10px; border-radius:8px; border:1px solid #d9b25c55; background:#00000059; font-size:14px; line-height:1.8; }
.bc-streak b { color:var(--gold2); }
@media (min-width:600px) { .bc-cards { grid-template-columns:repeat(5, minmax(0, 1fr)); } .bc-c { grid-template-columns:1fr; text-align:center; } }

/* ── 首頁 App 實際畫面：手機右邊那欄（跟著電子／百家分頁切換）── */
.dside { min-width:0; padding:10px 10px 8px; border:1px solid var(--line2); border-radius:12px; background:linear-gradient(180deg, #14110acc, #0a0a0ecc); animation:dsIn .4s ease both; }
.dside[hidden] { display:none; }
@keyframes dsIn { from { opacity:0; transform:translateX(10px); } to { opacity:1; transform:none; } }
.ds-live { margin:0 0 6px; font-size:12px; color:#cfc8b5; }
.ds-n { padding:6px 0 7px; border-bottom:1px solid #ffffff14; }
.ds-n b { display:block; font:800 24px/1.1 Inter,sans-serif; color:var(--gold2); white-space:nowrap; }
.ds-n span { display:block; margin-top:2px; font-size:12px; color:#d6cfbd; }
.ds-pts { list-style:none; margin:8px 0 0; padding:0; }
.ds-pts li { position:relative; padding:5px 0 5px 12px; font-size:12px; line-height:1.45; color:#cfc8b5; }
.ds-pts li::before { content:""; position:absolute; left:0; top:11px; width:5px; height:5px; border-radius:50%; background:var(--gold); }
.ds-pts b { display:block; color:#fff; font-size:13px; }
@media (prefers-reduced-motion: reduce) { .dside { animation:none; } }
@media (min-width:960px) { .ds-n b { font-size:30px; } .ds-n span, .ds-pts li { font-size:14px; } .ds-pts b { font-size:15px; } }

/* ── 168 體驗金推廣框（blocks.promo168）：純色底＋金色細框，不畫漸層光暈 ── */
.promo168 { display:grid; grid-template-columns:36% 1fr; gap:10px; align-items:center; margin:30px 0 0; padding:12px 12px 14px; border:1px solid var(--line2); border-radius:14px; background:#13100a; }
.promo168 img { width:100%; height:auto; }
.promo168 .p168-k { margin:0; font-size:12.5px; color:var(--muted); letter-spacing:.08em; }
.promo168 h2 { margin:2px 0 4px; font:900 21px/1.3 "Noto Serif TC",serif; color:#fff; }
.promo168 h2 b { font:800 34px/1 Inter,sans-serif; color:var(--gold2); vertical-align:-3px; }
.promo168 .p168-s { margin:0; font-size:14.5px; color:#e8dcc0; }
.promo168 .p168-h { margin:2px 0 0; font-size:13px; color:var(--muted); }
.promo168 .p168-b { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }   /* 寬度不夠就上下排（10-19 owner 截圖：兩顆並排時字擠成兩行、壓到兩端花紋） */
.promo168 .p168-b .cta { --h:44px; flex:1 1 190px; margin:0; padding:0 6px; font-size:15px; letter-spacing:.04em; white-space:nowrap; }
@media (min-width:960px) { .promo168 { max-width:760px; margin-left:auto; margin-right:auto; grid-template-columns:220px 1fr; gap:24px; padding:18px 24px; } .promo168 h2 { font-size:26px; } .promo168 h2 b { font-size:44px; } }

/* ── 精準搜台、台號查詢（slotsearch.js／slotcalc.js）：按鈕用 5090 黑金底板（btn_dark／btn_gold），不填數字只點按鈕（owner 10-19「人性化一點」）── */
.ss, .tq { margin:14px 0 0; padding:12px; border:1px solid var(--line2); border-radius:12px; background:#100e09; }
.tchips { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 8px; }
.tchip { --h:38px; display:inline-flex; align-items:center; justify-content:center; height:var(--h); padding:0 18px;   /* 兩端花紋留空，字不壓到紅寶石（10-19 截圖） */ border:0 solid transparent; background:none; cursor:pointer;
         border-image:url("/a/btn_dark.webp") 50 140 fill / calc(var(--h) * .1845) calc(var(--h) * .5166) stretch; color:var(--gold2); font:800 14px/1 "Noto Sans TC",sans-serif; white-space:nowrap; }
.tchip.on { border-image:url("/a/btn_gold.webp") 60 150 fill / calc(var(--h) * .1818) calc(var(--h) * .4545) stretch; color:#2b1d05; }
.ss-n { margin:6px 0 4px; font-size:14px; color:#d6cfbd; }
.ss-n b { color:var(--gold2); }
.ss-list { display:flex; flex-direction:column; }
.ss-row { display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:8px; padding:9px 2px; border-bottom:1px solid #ffffff12; color:var(--ink); text-decoration:none; }
.ss-row i { font:800 13px/1 Inter,sans-serif; font-style:normal; color:var(--muted); text-align:center; }
.ss-row b { display:block; font-size:15px; }
.ss-row small { display:block; font-size:12px; color:var(--muted); }
.ss-row em { font-style:normal; font-weight:800; color:var(--gold2); font-size:13.5px; text-align:right; }
.tq-h { margin:2px 0 6px; font-size:13px; color:var(--muted); letter-spacing:.06em; }
.tq-form { display:flex; gap:8px; margin:0 0 8px; }
.tq-form input { flex:1; min-width:0; height:46px; padding:0 12px; border:1px solid var(--line2); border-radius:10px; background:#1a160d; color:#fff; font:800 22px/1 Inter,sans-serif; letter-spacing:.06em; }
.tq-form .tchip { --h:46px; padding:0 14px; font-size:16px; }
.tq-top { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 6px; font-size:12.5px; color:var(--muted); }
.tq-top span { width:100%; }
.tq-no { --h:34px; font-family:Inter,sans-serif; }
.tq-hint { margin:8px 0 0; font-size:13.5px; color:var(--muted); }
.tq-card { margin-top:8px; padding:12px; border-top:1px solid #ffffff14; }
.tq-title { margin:0 0 6px; font:900 18px/1.3 "Noto Serif TC",serif; color:#fff; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tq-st { padding:2px 10px; border-radius:12px; font:800 12.5px/1.6 "Noto Sans TC",sans-serif; background:#2b2618; color:#d6cfbd; }
.tq-st.s-E { background:#173d23; color:#7ff0a0; }
.tq-heat { display:flex; align-items:baseline; gap:10px; }
.tq-heat b { font:800 52px/1 Inter,sans-serif; color:var(--gold2); }
.tq-heat span { font-weight:800; color:#fff; }
.tq-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:10px 0; }
.tq-stats div { padding:8px 4px; border:1px solid #ffffff14; border-radius:8px; text-align:center; }
.tq-stats span { display:block; font-size:12px; color:var(--muted); }
.tq-stats b { font:800 17px/1.3 Inter,sans-serif; color:#fff; white-space:nowrap; }
.tq-say { margin:0 0 8px; color:#e8dcc0; font-size:15px; }
.tq-go { color:var(--gold2); font-weight:800; font-size:14px; }

/* 真實截圖（App 實際畫面等）：圖下方一行說明截圖時間 */
.shot { margin:12px auto 4px; max-width:320px; }
.shot img { width:100%; height:auto; border:1px solid var(--line2); border-radius:14px; }
.shot figcaption { margin-top:6px; text-align:center; font-size:12.5px; color:var(--muted); }