/* =========================================================
雜誌風格（vivid）— v1.75.0
配色與版面取自參考站（黃紫高飽和、雙層頁首、主欄＋右側欄）：
黃 #FFDE01 頂欄底色、下緣線、查看更多按鈕
紫 #5804FA 主導覽列、主要按鈕、區塊標題色條
紅粉 #FE4055 頂欄第一顆 CTA、徽章、第一名
選單 hover 轉黃 #FFE601
⚠️ 這個風格不複製任何模板（templates/vivid/ 是空的）。
側欄由 header.php／footer.php 開關兩欄容器，其餘全部靠 CSS 換裝，
所以功能改一次就好，不必兩邊同步。
========================================================= */
body.cw-style-vivid {
--vv-y: #FFDE01;
--vv-gold-dk: #9A7000; /* 白底 4.48:1 的深金：亮黃 #FFDE01 在白底只有 1.3:1，
當邊框或文字色等於看不見，需要深一階的同色系（v1.77.4） */
--vv-orange: #E1620A; /* 第二名邊框（v1.78.0）：白底 3.53:1。
非文字的 UI 元件門檻是 3:1（WCAG 1.4.11），2px 粗框達標 */
--vv-y2: #FFE601;
--vv-p: #5804FA;
--vv-p-dk: #3F02BD;
--vv-p-lt: #f1ebff;
--vv-r: #FE4055;
--vv-ink: #1b1b1f;
--vv-ink2: #5a5a66;
--vv-line: #e8e8ef;
--vv-soft: #f4f4f8;
/* main.css 用這幾個變數上色，一起換掉整站就變裝了 */
--cw-navy: #ffffff;
--cw-white: #ffffff;
--cw-gold: #5804FA;
--cw-gold-2: #3F02BD;
--cw-ink: #1b1b1f;
--cw-ink-2: #5a5a66;
--cw-line: #e8e8ef;
--cw-bg: #ffffff;
background: #fff;
color: var(--vv-ink);
font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
}
/* 這個風格是淺色紙面，關掉深淺切換鈕（跟跑酷風同樣處理） */
body.cw-style-vivid .cw-theme-toggle { display: none; }
/* 返回頂部：黃底紫箭頭（v1.77.0）
箭頭是 SVG 用 currentColor 上色，所以只要設 color 就會跟著變。 */
body.cw-style-vivid .cw-backtop {
background: var(--vv-p);
color: var(--vv-y); /* 黃箭頭配紫底 5.58:1 */
border: 1px solid var(--vv-p-dk);
box-shadow: 0 4px 16px rgba(255, 222, 1, .55); /* 黃陰影 */
}
body.cw-style-vivid .cw-backtop:hover {
background: var(--vv-p-dk);
color: #fff06b;
box-shadow: 0 6px 22px rgba(255, 222, 1, .8);
}
/* =========================================================
1. 頁首：黃色促銷條 ＋ 紫色導覽列
========================================================= */
/* 頂欄 CTA 的樣式已於 v1.76.0 移到 main.css 的 .cw-topbar（六種風格共用），
顏色由自訂器決定、留空時用 cw_topbar_palette() 裡雜誌風的黃／紅／紫預設。
這裡只留雜誌風獨有的：促銷條下緣不留縫，直接接到紫色導覽列。 */
body.cw-style-vivid .cw-topbar { border-bottom: 0; }
body.cw-style-vivid .cw-header {
background: var(--vv-p);
border-bottom: 1px solid var(--vv-y);
box-shadow: none;
}
body.cw-style-vivid .cw-header-inner { min-height: 74px; }
body.cw-style-vivid .cw-site-title,
body.cw-style-vivid .cw-branding a { color: var(--vv-y); font-weight: 900; }
body.cw-style-vivid .cw-logo-mark {
display: inline-grid;
place-items: center;
width: 32px; height: 32px;
margin-right: 8px;
background: var(--vv-y);
color: var(--vv-p);
border-radius: 8px;
font-size: 17px;
}
body.cw-style-vivid .cw-menu > li > a { color: #fff; font-weight: 700; }
body.cw-style-vivid .cw-menu > li > a:hover,
body.cw-style-vivid .cw-menu > li.current-menu-item > a { color: var(--vv-y2); }
body.cw-style-vivid .cw-nav-toggle span { background: #fff; }
/* 麵包屑 */
body.cw-style-vivid .cw-breadcrumbs { background: var(--vv-soft); border-bottom: 1px solid var(--vv-line); }
body.cw-style-vivid .cw-breadcrumbs a { color: var(--vv-p); }
body.cw-style-vivid .cw-breadcrumbs [aria-current] { color: var(--vv-ink2); }
/* =========================================================
2. 全站雙欄：主欄 ＋ 右側欄
header.php 開 .vv-cols/.vv-main，footer.php 收掉並輸出 .vv-side
========================================================= */
body.cw-style-vivid .vv-cols {
display: grid;
grid-template-columns: minmax(0, 1fr) 328px;
gap: 32px;
align-items: start;
max-width: 1240px;
margin: 0 auto;
padding: 24px 20px 48px;
}
body.cw-style-vivid .vv-main { min-width: 0; }
/* 主欄裡的區塊本來各自有容器與內距，兩欄之後要收掉，否則會二次縮排 */
body.cw-style-vivid .vv-main .cw-section { padding: 0; margin-bottom: 30px; }
body.cw-style-vivid .vv-main .cw-section-alt { background: transparent; }
body.cw-style-vivid .vv-main .cw-container { max-width: none; padding: 0; }
/* 區塊標題：左側紫色色條 */
body.cw-style-vivid .cw-section-head {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 14px;
padding-bottom: 0;
border: 0;
}
body.cw-style-vivid .cw-section-title {
position: relative;
margin: 0;
padding-left: 16px;
font-size: 21px;
font-weight: 900;
color: var(--vv-ink);
}
body.cw-style-vivid .cw-section-title::before {
content: "";
position: absolute;
left: 0; top: 50%;
width: 6px; height: 22px;
margin-top: -11px;
background: var(--vv-p);
border-radius: 3px;
}
body.cw-style-vivid .cw-section-more {
margin-left: auto;
font-size: 13px;
font-weight: 800;
color: var(--vv-p);
}
/* 每個區塊之間一條分隔線（參考站的節奏） */
body.cw-style-vivid .vv-main .cw-section + .cw-section { border-top: 1px solid var(--vv-line); padding-top: 26px; }
/* =========================================================
3. Hero：改成橫幅視覺（不是滿版深色區）
========================================================= */
body.cw-style-vivid .cw-hero {
/* ⚠️ 橘→粉那一端太亮：白字只有 2.61:1、黃字 1.95:1，統計數字整排讀不到。
改成紫→桃紅的深色漸層，兩端白字都 ≥5.8:1、黃字 ≥5.1:1。 */
background: linear-gradient(110deg, var(--vv-p), #7B1FE0 45%, #B01050);
border-radius: 14px;
padding: 34px 26px;
margin: 0 0 26px;
color: #fff;
box-shadow: 0 6px 20px rgba(88, 4, 250, .18);
}
body.cw-style-vivid .cw-hero .cw-container { padding: 0; max-width: none; }
body.cw-style-vivid .cw-hero-eyebrow {
color: var(--vv-y);
font-weight: 900;
letter-spacing: .14em;
font-size: 12.5px;
}
body.cw-style-vivid .cw-hero-title { color: #fff; font-size: 32px; line-height: 1.3; }
body.cw-style-vivid .cw-hero-title::after { background: var(--vv-y); }
body.cw-style-vivid .cw-hero-subtitle { color: rgba(255, 255, 255, .92); }
body.cw-style-vivid .cw-hero-stats strong { color: var(--vv-y); }
body.cw-style-vivid .cw-hero-stats span { color: rgba(255, 255, 255, .85); }
/* =========================================================
4. 按鈕
========================================================= */
body.cw-style-vivid .cw-btn {
border-radius: 10px;
font-weight: 800;
border: 2px solid transparent;
}
body.cw-style-vivid .cw-btn-gold {
background: var(--vv-p);
color: #fff;
border-color: var(--vv-p);
}
body.cw-style-vivid .cw-btn-gold:hover { background: var(--vv-p-dk); border-color: var(--vv-p-dk); color: #fff; }
body.cw-style-vivid .cw-btn-outline,
body.cw-style-vivid .cw-btn-ghost {
background: #fff;
color: var(--vv-p);
border-color: var(--vv-p);
}
body.cw-style-vivid .cw-btn-outline:hover,
body.cw-style-vivid .cw-btn-ghost:hover { background: var(--vv-p-lt); color: var(--vv-p); }
body.cw-style-vivid .cw-hero .cw-btn-ghost { background: transparent; color: #fff; border-color: #fff; }
body.cw-style-vivid .cw-hero .cw-btn-gold { background: var(--vv-y); color: #000; border-color: var(--vv-y); }
body.cw-style-vivid .cw-btn-closed { background: #fdeaec; color: var(--vv-r); border-color: #f6c9ce; }
/* 「查看全部」黃色膠囊（區塊結尾置中） */
body.cw-style-vivid .cw-loadmore,
body.cw-style-vivid .cw-more-btn {
display: block;
width: 220px;
margin: 16px auto 0;
text-align: center;
font-weight: 800;
padding: 11px;
border-radius: 999px;
background: var(--vv-y);
color: #000;
border: 0;
}
/* =========================================================
5. 娛樂城排名卡：橫列
========================================================= */
body.cw-style-vivid .cw-casino-list { display: flex; flex-direction: column; gap: 10px; }
body.cw-style-vivid .cw-casino-card {
display: grid;
grid-template-columns: 44px 96px minmax(0, 1fr) 150px; /* 第二欄＝LOGO，與下面的正方形尺寸一致 */
gap: 14px;
align-items: center;
padding: 14px;
background: #fff;
border: 1px solid var(--vv-line);
border-radius: 14px;
box-shadow: none;
transition: transform .15s, border-color .15s, box-shadow .15s;
}
body.cw-style-vivid .cw-casino-card:hover {
transform: translateY(-2px);
border-color: var(--vv-p);
box-shadow: 0 6px 18px rgba(88, 4, 250, .10);
}
/* 懸停一律轉紫（v1.78.0，v1.77.4 曾改成黃色，這一版改回來）。
⚠️ 名次卡的邊框帶 !important（要壓過 main.css 的金銀漸層），所以這裡也必須 !important。 */
body.cw-style-vivid .cw-casino-card:hover,
body.cw-style-vivid .cw-casino-card.cw-top-1:hover,
body.cw-style-vivid .cw-casino-card.cw-top-2:hover,
body.cw-style-vivid .cw-card-sq:hover,
body.cw-style-vivid .cw-card-sq.cw-top-1:hover,
body.cw-style-vivid .cw-card-sq.cw-top-2:hover { border-color: var(--vv-p) !important; }
/* 名次牌：雜誌感大數字（v1.77.0）
原本是 34px 圓角方塊，第 4 名之後變成空心灰框，看起來像沒做完。
改成沒有底色的斜體大數字，靠字級與色票分名次，底下一行小字 NO.。
⚠️ 第 2 名的黃 #FFDE01 在白底只有 1.3:1，直接拿來當文字色等於看不見。
我第一次改用 #B88A00，量出來 3.15:1 —— 30px 大字剛好壓在 AA 大字門檻 3:1 上，
沒有餘裕；灰色 #9d99b4 更慘，2.75:1 直接不及格。
最後用 #9A7000（4.48:1）與 #7c7893（4.23:1），連小字門檻 4.5 都幾乎達到。 */
body.cw-style-vivid .cw-rank {
position: static;
display: block;
width: auto; height: auto;
background: none;
border-radius: 0;
box-shadow: none;
text-align: center;
font-weight: 900;
font-style: italic;
font-size: 30px;
line-height: 1;
letter-spacing: -1px;
color: #7c7893; /* 第 4 名之後：灰紫，白底 4.23:1 */
}
body.cw-style-vivid .cw-rank::after {
content: "NO.";
display: block;
margin-top: 2px;
font-size: 9px;
font-style: normal;
font-weight: 700;
letter-spacing: 2px;
color: var(--vv-ink2);
}
body.cw-style-vivid .cw-casino-card:nth-child(1) .cw-rank { color: var(--vv-r); }
/* 名次數字跟著邊框一起改橘，否則框橘、字金會像兩套配色（30px 大字，3.53:1 過 AA 大字門檻 3:1） */
body.cw-style-vivid .cw-casino-card:nth-child(2) .cw-rank { color: var(--vv-orange); }
body.cw-style-vivid .cw-casino-card:nth-child(3) .cw-rank { color: var(--vv-p); }
/* main.css 的 .cw-rank.is-top 帶金色漸層底，這裡一併關掉 */
body.cw-style-vivid .cw-rank.is-top { background: none; }
body.cw-style-vivid .cw-casino-card-logo {
/* v1.77.0：改正方形（原本 96×64 長方形） */
width: 96px; height: 96px;
display: grid;
place-items: center;
border-radius: 10px;
overflow: hidden;
background: var(--vv-soft);
}
body.cw-style-vivid .cw-casino-card-logo img { max-width: 92%; max-height: 92%; object-fit: contain; }
body.cw-style-vivid .cw-casino-card-body { min-width: 0; }
body.cw-style-vivid .cw-casino-card-title {
margin: 0 0 6px;
font-size: 16px;
font-weight: 800;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
body.cw-style-vivid .cw-casino-card-title a { color: var(--vv-ink); }
body.cw-style-vivid .cw-casino-card:hover .cw-casino-card-title a { color: var(--vv-p); }
body.cw-style-vivid .cw-badge {
font-size: 11px;
font-weight: 800;
padding: 2px 9px;
border-radius: 999px;
background: #fdeaec;
color: var(--vv-r);
border: 0;
}
body.cw-style-vivid .cw-casino-card-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
body.cw-style-vivid .cw-score { color: var(--vv-p); font-weight: 900; }
body.cw-style-vivid .cw-score-max { color: var(--vv-ink2); }
body.cw-style-vivid .cw-stars svg { fill: var(--vv-y); }
body.cw-style-vivid .cw-casino-card-bonus,
body.cw-style-vivid .cw-casino-card-meta { margin: 0; font-size: 13px; color: var(--vv-ink2); }
body.cw-style-vivid .cw-casino-card-actions { display: grid; gap: 7px; }
body.cw-style-vivid .cw-casino-card-actions .cw-btn { padding: 9px 10px; font-size: 13px; }
/* =========================================================
6. 格狀卡片（場館 / 類型 / 遊戲 / 文章）
========================================================= */
body.cw-style-vivid .cw-card {
background: #fff;
border: 1px solid var(--vv-line);
border-radius: 14px;
overflow: hidden;
box-shadow: none;
transition: transform .15s, border-color .15s, box-shadow .15s;
}
body.cw-style-vivid .cw-card:hover {
transform: translateY(-2px);
border-color: var(--vv-p);
box-shadow: 0 6px 18px rgba(88, 4, 250, .10);
}
body.cw-style-vivid .cw-card-title { font-size: 14px; font-weight: 800; color: var(--vv-ink); }
body.cw-style-vivid .cw-card:hover .cw-card-title { color: var(--vv-p); }
body.cw-style-vivid .cw-card-meta { font-size: 12px; color: var(--vv-ink2); }
body.cw-style-vivid .cw-card-badge {
background: var(--vv-r);
color: #fff;
border-radius: 999px;
font-weight: 800;
font-size: 11px;
padding: 3px 10px;
}
body.cw-style-vivid .cw-card-badge.is-new { background: var(--vv-y); color: #000; }
/* 內頁 */
body.cw-style-vivid .cw-panel,
body.cw-style-vivid .cw-entry-content,
body.cw-style-vivid .cw-faq-item {
background: #fff;
border: 1px solid var(--vv-line);
border-radius: 14px;
color: var(--vv-ink);
}
body.cw-style-vivid .cw-page-title { font-size: 27px; font-weight: 900; }
body.cw-style-vivid .cw-entry-content h2 {
position: relative;
padding-left: 15px;
font-weight: 900;
}
body.cw-style-vivid .cw-entry-content h2::before {
content: "";
position: absolute;
left: 0; top: .18em;
width: 6px; height: 1em;
background: var(--vv-p);
border-radius: 3px;
}
/* ⚠️ v1.87.0：這條原本沒有排除按鈕，是「內文按鈕變成純紫色塊、看不到字」的元兇。
--vv-p 是 #5804FA，而使用者用 WordPress 按鈕區塊時底色也選了同一個紫，
這條 (0,2,2) 壓過核心的 :root :where(.wp-block-button__link){color:#fff} (0,1,0)，
於是紫底紫字，對比 1:1。後台編輯器正常是因為編輯器不載入這條規則。
用 :where(:not(…)) 排除是刻意的：權重維持 (0,2,2) 不變，不會影響其他規則的勝負。
排不到的怪寫法（底色來自外掛 CSS 等）由 assets/js/main.js 的 .cw-inbtn 收尾。 */
body.cw-style-vivid .cw-entry-content a:where(:not(.cw-inbtn, [class*="btn"], [class*="Btn"], [class*="button"], [class*="Button"], [class*="cta"], [class*="CTA"], [style*="background"])) { color: var(--vv-p); }
body.cw-style-vivid .cw-subrating-bar > span { background: linear-gradient(90deg, var(--vv-p), #9a6bff); }
/* =========================================================
7. 側欄
========================================================= */
/* 側欄整欄黏住（v1.77.0）
⚠️ 以前只有 .vv-side-rank 是 sticky，另外三個模組跟著頁面捲走。
但側欄比視窗高（1462 vs 900），單純 top:14px 會讓底部永遠捲不到，
所以 top 由 assets/js/vivid.js 依「視窗高 − 側欄高」算成負值，
效果是先跟著捲、最後一個模組露出來之後整條釘住。
⚠️ align-self:start 不能省：grid 項目預設 stretch，被拉滿高的元素 sticky 不會作用。 */
body.cw-style-vivid .vv-side {
min-width: 0;
position: sticky;
align-self: start;
top: 14px; /* JS 會覆寫；沒有 JS 時退回頂部黏住，仍比完全不黏好 */
}
body.cw-style-vivid .vv-side-box {
margin-bottom: 22px;
padding-bottom: 22px;
border-bottom: 1px solid var(--vv-line);
}
body.cw-style-vivid .vv-side-box:last-child { border-bottom: 0; }
body.cw-style-vivid .vv-kicker {
font-size: 12px;
font-weight: 900;
letter-spacing: .16em;
color: var(--vv-p);
}
body.cw-style-vivid .vv-kicker-sub { margin: 2px 0 12px; font-size: 13px; color: var(--vv-ink2); }
/* 迷你排行榜（黏頂） */
body.cw-style-vivid .vv-side-rank { background: #fff; } /* v1.77.0：黏頂改由整條側欄負責 */
body.cw-style-vivid .vv-mini { list-style: none; margin: 0; padding: 0; }
body.cw-style-vivid .vv-mini-i {
display: grid;
grid-template-columns: 26px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
padding: 8px 0;
border-bottom: 1px dashed var(--vv-line);
}
body.cw-style-vivid .vv-mini-i:last-child { border-bottom: 0; }
body.cw-style-vivid .vv-mini-n {
display: grid;
place-items: center;
width: 24px; height: 24px;
border-radius: 7px;
background: var(--vv-soft);
color: var(--vv-ink2);
font-weight: 900;
font-size: 12px;
}
body.cw-style-vivid .vv-mini-1 .vv-mini-n { background: var(--vv-r); color: #fff; }
body.cw-style-vivid .vv-mini-2 .vv-mini-n { background: var(--vv-y); color: #000; }
body.cw-style-vivid .vv-mini-3 .vv-mini-n { background: var(--vv-p); color: #fff; }
body.cw-style-vivid .vv-mini-t {
font-size: 13.5px;
font-weight: 700;
color: var(--vv-ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.cw-style-vivid .vv-mini-t:hover { color: var(--vv-p); }
body.cw-style-vivid .vv-mini-s { font-size: 13px; font-weight: 900; color: var(--vv-p); }
/* BONUS 分頁籤 */
body.cw-style-vivid .vv-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
body.cw-style-vivid .vv-tab {
flex: 1;
padding: 8px 4px;
border: 0;
border-radius: 9px;
background: var(--vv-soft);
color: var(--vv-ink2);
font-size: 12.5px;
font-weight: 800;
cursor: pointer;
font-family: inherit;
}
body.cw-style-vivid .vv-tab.is-on { background: var(--vv-p); color: #fff; }
body.cw-style-vivid .vv-tabpanel { display: none; }
body.cw-style-vivid .vv-tabpanel.is-on { display: block; }
body.cw-style-vivid .vv-offer {
display: flex;
gap: 10px;
align-items: center;
padding: 10px;
border: 1px solid var(--vv-line);
border-radius: 12px;
margin-bottom: 8px;
}
body.cw-style-vivid .vv-offer:hover { border-color: var(--vv-p); }
body.cw-style-vivid .vv-offer-logo {
flex: none;
width: 46px; height: 46px;
display: grid;
place-items: center;
border-radius: 9px;
overflow: hidden;
background: var(--vv-soft);
}
body.cw-style-vivid .vv-offer-logo img { max-width: 90%; max-height: 90%; object-fit: contain; }
body.cw-style-vivid .vv-offer-txt { min-width: 0; }
body.cw-style-vivid .vv-offer-txt b { display: block; font-size: 13.5px; color: var(--vv-ink); }
body.cw-style-vivid .vv-offer-txt span { display: block; margin-top: 2px; font-size: 12px; color: var(--vv-ink2); }
/* 廣告版位 */
body.cw-style-vivid .vv-ad { display: block; margin-bottom: 12px; }
body.cw-style-vivid .vv-ad:last-child { margin-bottom: 0; }
body.cw-style-vivid .vv-ad img { display: block; width: 100%; height: auto; border-radius: 12px; }
/* 遊戲排行 */
body.cw-style-vivid .vv-glist { list-style: none; margin: 0; padding: 0; counter-reset: g; }
body.cw-style-vivid .vv-glist li { border-bottom: 1px dashed var(--vv-line); }
body.cw-style-vivid .vv-glist li:last-child { border-bottom: 0; }
body.cw-style-vivid .vv-glist a {
display: grid;
grid-template-columns: 22px 48px minmax(0, 1fr);
gap: 10px;
align-items: center;
padding: 9px 0;
}
body.cw-style-vivid .vv-gn { font-weight: 900; color: var(--vv-p); font-size: 13px; text-align: center; }
body.cw-style-vivid .vv-gthumb {
width: 48px; height: 48px;
border-radius: 9px;
overflow: hidden;
background: var(--vv-soft);
display: grid;
place-items: center;
}
body.cw-style-vivid .vv-gthumb img { width: 100%; height: 100%; object-fit: cover; }
body.cw-style-vivid .vv-gtxt { min-width: 0; }
body.cw-style-vivid .vv-gtxt b {
display: block;
font-size: 13.5px;
font-weight: 700;
color: var(--vv-ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.cw-style-vivid .vv-gtxt span { display: block; font-size: 12px; color: var(--vv-ink2); }
/* ARTICLES */
body.cw-style-vivid .vv-art {
display: flex;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid var(--vv-line);
}
body.cw-style-vivid .vv-art:last-child { border-bottom: 0; }
body.cw-style-vivid .vv-art-thumb {
flex: none;
width: 74px; height: 48px;
border-radius: 8px;
overflow: hidden;
background: var(--vv-soft);
display: grid;
place-items: center;
}
body.cw-style-vivid .vv-art-thumb img { width: 100%; height: 100%; object-fit: cover; }
body.cw-style-vivid .vv-art-txt { min-width: 0; }
body.cw-style-vivid .vv-art-txt b { display: block; font-size: 13px; font-weight: 700; line-height: 1.5; color: var(--vv-ink); }
body.cw-style-vivid .vv-art:hover .vv-art-txt b { color: var(--vv-p); }
body.cw-style-vivid .vv-art-txt span { display: block; margin-top: 3px; font-size: 11.5px; color: #9a9aa8; }
/* 無圖佔位：跟卡片同色系，不要露出其他風格的深色底 */
body.cw-style-vivid .cw-thumb-ph {
background: var(--vv-soft);
color: var(--vv-p);
font-weight: 900;
}
/* =========================================================
8. 頁尾
========================================================= */
body.cw-style-vivid .cw-footer { background: var(--vv-p); color: #fff; }
body.cw-style-vivid .cw-footer a { color: #e5dcff; }
body.cw-style-vivid .cw-footer a:hover { color: var(--vv-y); }
body.cw-style-vivid .cw-footer-title { color: var(--vv-y); }
body.cw-style-vivid .cw-footer-brand { color: var(--vv-y); }
body.cw-style-vivid .cw-footer-desc { color: #e5dcff; }
body.cw-style-vivid .cw-footer-bottom { border-top-color: rgba(255, 255, 255, .18); color: #cbb9ff; }
body.cw-style-vivid .cw-footer .cw-logo-mark { background: var(--vv-y); color: var(--vv-p); }
/* =========================================================
9. 手機
========================================================= */
@media (max-width: 899px) {
body.cw-style-vivid .vv-cols {
grid-template-columns: 1fr;
gap: 28px;
/* ⚠️ v1.81.3：左右從 16px 改 24px。
main.css 從 v1.18.2 起，手機版的 .cw-container 就是 24px
（當時的註解寫「16px 貼邊感太重，改 24px 呼吸感」）。
但雜誌風把 .vv-main 裡的 .cw-container 內距歸零、改由 .vv-cols 統一給，
而這裡寫的是 16px —— 等於默默把那個決定退回去了，
所以只有雜誌風的手機版卡片會貼著螢幕邊。 */
padding: 18px 24px 36px;
}
/* 側欄移到內容下方；黏頂在手機沒有意義（畫面高度不夠），關掉 */
/* 手機是單欄、側欄在內容下方，黏頂沒有意義（畫面高度不夠，只會擋內容） */
body.cw-style-vivid .vv-side { position: static; top: auto; }
body.cw-style-vivid .cw-casino-card {
grid-template-columns: 38px 76px minmax(0, 1fr);
gap: 10px 12px;
}
body.cw-style-vivid .cw-casino-card-actions {
grid-column: 1 / -1;
grid-template-columns: 1fr 1fr;
}
body.cw-style-vivid .cw-casino-card-logo { width: 76px; height: 76px; } /* v1.77.0：正方形 */
body.cw-style-vivid .cw-hero { padding: 24px 18px; border-radius: 12px; }
body.cw-style-vivid .cw-hero-title { font-size: 25px; }
body.cw-style-vivid .cw-section-title { font-size: 19px; }
}
/* ---- 修正 1：前兩名不要沿用金／銀漸層底 ----
main.css 從 v1.51.0 起給 .cw-top-1/.cw-top-2 加了金銀漸層，
在黃紫配色裡會變成髒髒的米黃。雜誌風改用「名次牌配色」來分名次，卡片一律白底。 */
/* ⚠️ main.css 那兩條帶 !important（v1.51.0 為了壓過各風格的卡片底色），
所以這裡也必須用 !important 才蓋得掉，不是加長選擇器就行。 */
body.cw-style-vivid .cw-casino-card.cw-top-1,
body.cw-style-vivid .cw-casino-card.cw-top-2 {
background: #fff !important;
box-shadow: none;
border-width: 2px; /* v1.78.0：前兩名加粗，跟其他名次拉開層級 */
}
body.cw-style-vivid .cw-casino-card.cw-top-1 { border-color: var(--vv-r) !important; }
/* ⚠️ v1.77.4：第二名原本用亮黃 #FFDE01 當邊框，在白底只有 1.3:1，幾乎看不見。
改成深金 #9A7000（白底 4.48:1），而且跟名次數字「2」同色，看起來是一套的。
刻意不改成紫色 —— 第三名就是紫，兩個紫框會分不出名次。 */
/* v1.78.0：第二名邊框改橘色（原本是深金）。橘比金更跳，跟第一名的紅也分得開。 */
body.cw-style-vivid .cw-casino-card.cw-top-2 { border-color: var(--vv-orange) !important; }
/* ---- 修正 2：無圖佔位要填滿方框 ----
側欄的縮圖框只有 48px，佔位字被擠成一個小點，看起來像破圖。
⚠️ 只寫 width/height:100% 沒有用 —— main.css 的 .cw-thumb-ph 有 min-height:72px，
它會蓋過 height:100%，接著 aspect-ratio:3/2 再依 72 倒算出寬 108，
在 48px 的 overflow:hidden 框裡，佔位字整個被推到框外（實測 108×72）。
必須連 min-height 與 aspect-ratio 一起歸零。 */
body.cw-style-vivid .vv-gthumb .cw-thumb-ph,
body.cw-style-vivid .vv-art-thumb .cw-thumb-ph,
body.cw-style-vivid .vv-offer-logo .cw-thumb-ph,
body.cw-style-vivid .cw-casino-card-logo .cw-thumb-ph {
display: grid;
place-items: center;
width: 100%;
height: 100%;
min-height: 0;
aspect-ratio: auto;
background: var(--vv-p-lt);
color: var(--vv-p);
font-size: 16px;
font-weight: 900;
}
body.cw-style-vivid .cw-casino-card-logo .cw-thumb-ph { font-size: 24px; }
/* ---- 內頁頂部橫幅：改成品牌紫，不要沿用標準版的深藍／灰漸層 ---- */
body.cw-style-vivid .cw-casino-hero,
body.cw-style-vivid .cw-venue-hero,
body.cw-style-vivid .cw-single-hero {
background: linear-gradient(110deg, var(--vv-p), #8b46ff 60%, #b06bff);
border-radius: 14px;
color: #fff;
box-shadow: 0 6px 20px rgba(88, 4, 250, .16);
/* ⚠️ v1.77.0：main.css 給的是 padding:40px 0（標準風是滿版橫幅，左右靠 .cw-container 撐開）。
雜誌風把橫幅做成圓角卡片，而且 .vv-main 裡的 .cw-container 內距被歸零，
結果 LOGO 貼左緣、CTA 貼右緣。這裡補回左右內距。 */
padding: 30px 28px;
}
body.cw-style-vivid .cw-casino-hero .cw-page-title,
body.cw-style-vivid .cw-venue-hero .cw-page-title,
body.cw-style-vivid .cw-casino-hero h1,
body.cw-style-vivid .cw-venue-hero h1 { color: #fff; }
body.cw-style-vivid .cw-casino-hero .cw-score,
body.cw-style-vivid .cw-venue-hero .cw-score { color: var(--vv-y); }
body.cw-style-vivid .cw-casino-hero .cw-score-max,
body.cw-style-vivid .cw-casino-hero p { color: rgba(255, 255, 255, .9); }
body.cw-style-vivid .cw-casino-hero .cw-badge { background: rgba(255, 255, 255, .92); color: var(--vv-r); }
body.cw-style-vivid .cw-casino-hero-logo,
body.cw-style-vivid .cw-venue-logo { border-radius: 12px; }
/* 內頁側邊的「其他娛樂城」等小清單 */
body.cw-style-vivid .cw-sidelist-score,
body.cw-style-vivid .cw-mini-score { color: var(--vv-p); font-weight: 800; }
/* =========================================================
10. 對比修正（WCAG AA）
稽核跑出 292 處未達標，根因是四個顏色：
・參考站的紅 #FE4055 配白字只有 3.45:1（需 4.5）——小字看不清楚
・日期灰 #9a9aa8 配白底只有 2.78:1
・頁尾說明 #cbb9ff 配紫底 4.24:1
・頁尾的 18+ 徽章
紅色改成同色相但深一階的 #DD1B36（白字 4.9:1），肉眼幾乎看不出差別，
但小字就讀得清楚了。大面積的品牌紅（頂欄 CTA 底色）也一併改，
免得站上出現兩種紅。
========================================================= */
body.cw-style-vivid { --vv-r: #DD1B36; }
body.cw-style-vivid .vv-art-txt span,
body.cw-style-vivid .cw-card-date,
body.cw-style-vivid .cw-post-date { color: #6f6f7e; }
body.cw-style-vivid .cw-footer-bottom,
body.cw-style-vivid .cw-footer-copy,
body.cw-style-vivid .cw-footer-copy p,
body.cw-style-vivid .cw-footer-disclaimer,
body.cw-style-vivid .cw-footer-disclaimer p,
body.cw-style-vivid .cw-footer-desc,
body.cw-style-vivid .cw-footer a { color: #e5dcff; }
/* 版型徽章：綠底綠字在小字級只有 4.24:1，加深字色 */
body.cw-style-vivid .cw-badge-line { background: #e5f5ec; color: #04773a; }
body.cw-style-vivid .cw-badge-cash { background: #fdeaec; color: #b8172f; }
body.cw-style-vivid .cw-badge-app { background: #eef0ff; color: #2a35b8; }
body.cw-style-vivid .cw-badge-usdt { background: #eafaf7; color: #056b5a; }
/* 留言表單的必填星號 */
body.cw-style-vivid .comment-form .required { color: #c0182e; }
body.cw-style-vivid .cw-footer-badge {
background: rgba(255, 255, 255, .16);
color: #fff;
border-color: rgba(255, 255, 255, .5);
}
/* 已關站按鈕：淡紅底配紅字只有 4.24:1，字色再深一階 */
body.cw-style-vivid .cw-btn-closed { color: #b1152a; border-color: #f0c2c8; }
/* 相關討論的無圖佔位 */
body.cw-style-vivid .cw-reldisc-ph { background: var(--vv-p-lt); color: var(--vv-p); }
/* 內頁頂部橫幅上的大分數：main.css 用 var(--cw-gold) 上色，
而雜誌風把 --cw-gold 換成了紫色，紫字壓紫底＝看不見（1.44:1）。改用黃色。 */
body.cw-style-vivid .cw-casino-hero .cw-score-big,
body.cw-style-vivid .cw-casino-hero .cw-score,
body.cw-style-vivid .cw-casino-hero-bonus { color: var(--vv-y); }
/* 自動載入完成的提示文字 */
body.cw-style-vivid .cw-autoload-status { color: #6f6f7e; }
/* =========================================================
11. 內頁改為「單欄卡片堆疊」（v1.77.1）
原本娛樂城／遊戲內頁是「主欄 ＋ 中間側欄」兩欄，
基本資訊、其他娛樂城、哪裡可以玩都塞在那條窄側欄裡。
雜誌風右邊本來就已經有一條全站側欄，中間再來一條就變三欄、內容被壓扁。
改法：把 .cw-single-main 與 .cw-single-side 兩個容器用 display:contents 溶掉，
讓裡面的 .cw-panel 直接變成 .cw-single-layout 的格線項目，再用 order 重排。
⚠️ 刻意不複製 templates/vivid/single-casino.php ——
複製一份等於日後每次改功能都要同步兩邊（v1.64.0 就是這樣出事的）。
模板只加了幾個 class（cw-panel-subratings / -proscons / -others / -where …），
其他五種風格完全不受影響。
⚠️ display:contents 只影響「盒模型」，不影響 DOM，
所以下面一律用後代選擇器，不能用 > 子選擇器。
========================================================= */
body.cw-style-vivid .cw-single-layout {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
align-items: start;
}
body.cw-style-vivid .cw-single-main,
body.cw-style-vivid .cw-single-side {
display: contents;
}
/* main.css 給側欄的 sticky 一併解除（已經不是側欄了） */
body.cw-style-vivid .cw-single-side { position: static; top: auto; }
/* 每一塊預設佔滿整列 */
body.cw-style-vivid .cw-single-layout .cw-panel,
body.cw-style-vivid .cw-single-layout .cw-specs-desktop,
body.cw-style-vivid .cw-single-layout .cw-specs-mobile {
grid-column: 1 / -1;
margin: 0;
}
/* ---- 娛樂城介紹頁：基本資訊/評分細項 → 優點/缺點 → 文章 → 其他娛樂城 ---- */
body.cw-style-vivid .cw-single-casino .cw-infobox { order: 1; }
body.cw-style-vivid .cw-single-casino .cw-panel-subratings { order: 2; }
body.cw-style-vivid .cw-single-casino .cw-panel-proscons { order: 3; }
body.cw-style-vivid .cw-single-casino .cw-entry-content { order: 4; }
body.cw-style-vivid .cw-single-casino .cw-panel-types { order: 5; }
body.cw-style-vivid .cw-single-casino .cw-panel-faq { order: 6; }
body.cw-style-vivid .cw-single-casino .cw-panel-discussion { order: 7; }
body.cw-style-vivid .cw-single-casino .cw-panel-others { order: 8; }
/* ---- 頂部總覽：基本資訊 ｜ 評分細項 合成「一張卡」（v1.77.2）----
v1.77.1 是兩張獨立卡片並排，實際看起來有三個問題：
・兩張高度不一樣（基本資訊多一顆按鈕），右邊短一截 → 不對稱
・兩邊的列沒有對齊，左邊 4 列右邊 4 列卻各走各的
・基本資訊裡的「前往官網」跟頁首那顆完全同功能，兩顆相距不到 200px
改法：
・column-gap 設 0，左右卡片接成一張（滿版卡片是 span 2，不受 column-gap 影響）
・接縫處去掉圓角與重複邊框，中間只留一條分隔線
・align-self: stretch 讓兩邊等高
・兩邊的列給同一組行高，左右橫向對齊
・卡片內那顆重複的 CTA 直接不輸出 */
body.cw-style-vivid .cw-single-layout { column-gap: 0; }
@media (min-width: 900px) {
body.cw-style-vivid .cw-single-layout:has(.cw-infobox):has(.cw-panel-subratings) .cw-infobox,
body.cw-style-vivid .cw-single-layout:has(.cw-infobox):has(.cw-panel-subratings) .cw-panel-subratings {
grid-column: span 1;
align-self: stretch;
}
body.cw-style-vivid .cw-single-layout:has(.cw-panel-subratings) .cw-infobox {
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
body.cw-style-vivid .cw-single-layout:has(.cw-infobox) .cw-panel-subratings {
border-left: 1px solid var(--vv-line);
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
/* 左右兩欄用同一個列高，橫向才對得齊
（量過：只設 padding 的話左邊 47～48px、右邊 43px，四列下來會差 20px 以上） */
body.cw-style-vivid .cw-single-casino {
--vv-row: 48px;
}
body.cw-style-vivid .cw-single-casino .cw-infotable tr { height: var(--vv-row); }
body.cw-style-vivid .cw-single-casino .cw-infotable th,
body.cw-style-vivid .cw-single-casino .cw-infotable td { padding: 0 10px 0 0; vertical-align: middle; }
body.cw-style-vivid .cw-single-casino .cw-subratings { gap: 0; }
body.cw-style-vivid .cw-single-casino .cw-subrating {
min-height: var(--vv-row);
border-top: 1px solid var(--vv-line);
padding: 0;
}
body.cw-style-vivid .cw-single-casino .cw-subrating:first-child { border-top: 0; }
/* 重複的 CTA：頁首已經有一顆「前往官網」，卡片裡這顆拿掉 */
body.cw-style-vivid .cw-single-casino .cw-infobox .cw-btn { display: none; }
/* ---- 遊戲介紹頁：遊戲規格 → 文章 → 哪裡可以玩 ---- */
body.cw-style-vivid .cw-single-game .cw-specs-desktop { order: 1; }
body.cw-style-vivid .cw-single-game .cw-entry-content { order: 3; }
/* 重複的 CTA：頁首已經有「立即遊玩／免費試玩」，這張卡整個拿掉
（手機本來就是用底部固定的 .cw-play-bar，不受影響） */
body.cw-style-vivid .cw-single-game .cw-play-card { display: none; }
body.cw-style-vivid .cw-single-game .cw-panel-features { order: 4; }
body.cw-style-vivid .cw-single-game .cw-panel-related { order: 5; }
body.cw-style-vivid .cw-single-game .cw-panel-where { order: 6; }
/* 規格表在模板裡輸出兩次（手機一份、桌機一份）。
單欄之後桌機那份就在最上面，手機那份要藏起來，否則同一張表出現兩次。 */
@media (min-width: 900px) {
body.cw-style-vivid .cw-single-game .cw-specs-mobile { display: none; }
body.cw-style-vivid .cw-single-game .cw-specs-desktop { display: block; }
}
/* 規格表改成「橫向規格條」：
拿掉 CTA 之後規格表獨佔整列，3～5 列的直式表格右邊會空一大片。
改成一格一項（標籤在上、數值在下），自動分欄鋪滿整列。 */
body.cw-style-vivid .cw-single-game .cw-specs-desktop .cw-infotable {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0;
width: 100%;
}
/* ⚠️ 表格的 外面還有一層瀏覽器自動補的
，
格線項目會變成「tbody 一個」而不是每一列 —— 所有列就會擠成一直行。
tbody 要 display:contents 溶掉， 才會成為格線項目。 */
body.cw-style-vivid .cw-single-game .cw-specs-desktop .cw-infotable tbody { display: contents; }
/* main.css 用 .cw-specs-desktop .cw-spec-provider{display:none} 隱藏廠商列（頁首已有廠商標籤），
上面那條 tr{display:block} 權重比它高會把它救回來，所以這裡要再關一次。 */
body.cw-style-vivid .cw-single-game .cw-specs-desktop .cw-infotable tr.cw-spec-provider { display: none; }
body.cw-style-vivid .cw-single-game .cw-specs-desktop .cw-infotable tr {
display: block;
padding: 4px 18px 4px 0;
border-top: 0;
border-left: 1px solid var(--vv-line);
}
body.cw-style-vivid .cw-single-game .cw-specs-desktop .cw-infotable tr:first-child { border-left: 0; padding-left: 0; }
body.cw-style-vivid .cw-single-game .cw-specs-desktop .cw-infotable tr + tr { padding-left: 18px; }
body.cw-style-vivid .cw-single-game .cw-specs-desktop .cw-infotable th,
body.cw-style-vivid .cw-single-game .cw-specs-desktop .cw-infotable td {
display: block; width: auto; padding: 0; white-space: normal;
}
body.cw-style-vivid .cw-single-game .cw-specs-desktop .cw-infotable th {
font-size: 12.5px; color: var(--vv-ink2); font-weight: 700; margin-bottom: 4px;
}
body.cw-style-vivid .cw-single-game .cw-specs-desktop .cw-infotable td {
font-size: 20px; font-weight: 900; color: var(--vv-p);
}
@media (max-width: 899px) {
body.cw-style-vivid .cw-single-layout { grid-template-columns: 1fr; }
}
/* 「其他娛樂城」「哪裡可以玩」原本是窄側欄的直式清單，
放到整列寬之後改成多欄，才不會一行只有一個名字、右邊一大片空白。 */
body.cw-style-vivid .cw-panel-others .cw-sidelist,
body.cw-style-vivid .cw-panel-where .cw-sidelist {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 0 22px;
}
/* ---- CTA：娛樂城「前往官網」、遊戲「立即遊玩」改黃底紫字 ---- */
/* 黃底 #FFDE01 配紫字 #5804FA ＝ 5.58:1，過 AA。 */
body.cw-style-vivid .cw-single-casino .cw-btn-gold,
body.cw-style-vivid .cw-single-game .cw-btn-gold {
background: var(--vv-y);
color: var(--vv-p);
border-color: #e6c800;
}
body.cw-style-vivid .cw-single-casino .cw-btn-gold:hover,
body.cw-style-vivid .cw-single-game .cw-btn-gold:hover {
background: #fff06b;
color: var(--vv-p-dk);
}
/* =========================================================
12. 首頁 QA：改成對話式（左問右答）（v1.77.2）
參考圖是「問題：頭像在左、氣泡靠左；回答：氣泡靠右、頭像在右」的對談排版。
原本是 手風琴，答案要點開才看得到；對談排版的答案必須一直顯示。
⚠️ DOM 完全沒動（還是 details/summary/.cw-faq-a），
頭像與氣泡尾巴都是 ::before / ::after 畫的，沒有多加圖檔。
所以其他五種風格、以及內頁的常見問題，都維持原本的手風琴。
⚠️ 只用 CSS 把 .cw-faq-a 設成 display:block 是不夠的 ——
沒有 open 時，答案雖然會被畫出來，卻不算進 details 的高度，
實測答案跑到 details 外面（details 419~481、答案 481~532），會疊到下一題。
所以由 vivid.js 實際加上 open，並同時掛 .is-chat；
沒有 JS 時就退回原本的手風琴，不會變成疊在一起的破版。
========================================================= */
body.cw-style-vivid.home .cw-faq.is-chat {
display: flex;
flex-direction: column;
gap: 30px; /* v1.77.3：每一組問答之間拉開 */
}
body.cw-style-vivid.home .cw-faq.is-chat .cw-faq-item {
display: block;
border: 0;
background: none;
padding: 0;
box-shadow: none;
}
/* 答案永遠展開（對談排版沒有「收合」的概念） */
body.cw-style-vivid.home .cw-faq.is-chat .cw-faq-item > .cw-faq-a { display: block; }
/* ---- 問題：頭像在左、紫底黃字 ---- */
body.cw-style-vivid.home .cw-faq.is-chat .cw-faq-item > summary {
position: relative;
border: 0;
margin: 0 0 16px 54px; /* v1.77.3：問題與答案之間也拉開 */
padding: 13px 18px;
background: var(--vv-p);
color: var(--vv-y); /* 黃字配紫底 5.58:1 */
border-radius: 14px;
font-weight: 700;
font-size: 15px;
line-height: 1.6;
letter-spacing: .04em; /* v1.77.5：字距拉開一點，粗體中文才不會擠在一起 */
list-style: none;
cursor: default;
}
body.cw-style-vivid.home .cw-faq.is-chat .cw-faq-item > summary::-webkit-details-marker { display: none; }
/* 頭像 */
/* Q／A 不加圓框，就是兩個字母 */
body.cw-style-vivid.home .cw-faq.is-chat .cw-faq-item > summary::before {
content: "Q";
position: absolute;
left: -54px; top: 2px;
width: 44px;
text-align: center;
color: var(--vv-p); /* 紫字配白底 7.47:1 */
font-weight: 900; font-size: 30px; font-style: italic; line-height: 1.2;
}
/* 氣泡尾巴，指向左邊的頭像 */
body.cw-style-vivid.home .cw-faq.is-chat .cw-faq-item > summary::after {
content: "";
position: absolute;
left: -9px; top: 15px;
border: 9px solid transparent;
border-right-color: var(--vv-p);
border-left: 0;
}
/* ---- 回答：頭像在右、黃底紫字 ---- */
body.cw-style-vivid.home .cw-faq.is-chat .cw-faq-item > .cw-faq-a {
position: relative;
border: 0;
margin: 0 54px 0 0;
padding: 13px 18px;
background: var(--vv-y);
color: var(--vv-p); /* 紫字配黃底 5.58:1 */
border-radius: 14px;
}
body.cw-style-vivid.home .cw-faq.is-chat .cw-faq-item > .cw-faq-a p {
margin: 0;
color: inherit;
font-size: 14.5px;
font-weight: 700; /* v1.77.4：跟問題同字重，兩邊視覺重量才對等 */
line-height: 1.75;
letter-spacing: .04em; /* v1.77.5：與問題同字距 */
}
body.cw-style-vivid.home .cw-faq.is-chat .cw-faq-item > .cw-faq-a::before {
content: "A";
position: absolute;
right: -54px; top: 2px;
width: 44px;
text-align: center;
color: #9A7000; /* 金字配白底 4.48:1（純黃 #FFDE01 只有 1.3:1，等於看不見） */
font-weight: 900; font-size: 30px; font-style: italic; line-height: 1.2;
}
body.cw-style-vivid.home .cw-faq.is-chat .cw-faq-item > .cw-faq-a::after {
content: "";
position: absolute;
right: -9px; top: 15px;
border: 9px solid transparent;
border-left-color: var(--vv-y);
border-right: 0;
}
@media (max-width: 899px) {
body.cw-style-vivid.home .cw-faq.is-chat .cw-faq-item > summary { margin-left: 38px; padding: 11px 14px; font-size: 14.5px; }
body.cw-style-vivid.home .cw-faq.is-chat .cw-faq-item > summary::before,
body.cw-style-vivid.home .cw-faq.is-chat .cw-faq-item > .cw-faq-a::before { width: 32px; font-size: 24px; }
body.cw-style-vivid.home .cw-faq.is-chat .cw-faq-item > summary::before { left: -38px; }
body.cw-style-vivid.home .cw-faq.is-chat .cw-faq-item > .cw-faq-a { margin-right: 38px; padding: 11px 14px; }
body.cw-style-vivid.home .cw-faq.is-chat .cw-faq-item > .cw-faq-a::before { right: -38px; }
}
/* =========================================================
13. v1.77.3 修正
========================================================= */
/* ---- (4) 緊湊布局的名次牌：NO. 改放在數字左邊 ----
原本 ::after 的 NO. 是 display:block 疊在數字下面，
在方形卡上會佔掉一整列、把圖片往下推。
改成一行：flex + row-reverse 讓 ::after（NO.）排到數字前面。 */
body.cw-style-vivid .cw-casino-sq .cw-rank {
display: flex;
flex-direction: row-reverse; /* ::after 是最後一個子項，反向後排到最左邊 */
align-items: baseline;
justify-content: flex-end; /* row-reverse 的 flex-end 才是視覺上的靠左 */
gap: 6px;
padding: 10px 12px 2px;
font-size: 26px;
text-align: left;
}
body.cw-style-vivid .cw-casino-sq .cw-rank::after {
display: inline;
margin-top: 0;
font-size: 10px;
letter-spacing: 1.5px;
}
/* 名次配色：原本的規則綁在 .cw-casino-card 的 nth-child 上，方形卡吃不到 */
body.cw-style-vivid .cw-casino-grid .cw-casino-sq:nth-child(1) .cw-rank { color: var(--vv-r); }
body.cw-style-vivid .cw-casino-grid .cw-casino-sq:nth-child(2) .cw-rank { color: var(--vv-orange); }
body.cw-style-vivid .cw-casino-grid .cw-casino-sq:nth-child(3) .cw-rank { color: var(--vv-p); }
/* 方形卡的前兩名也吃到 main.css 那條帶 !important 的金／銀漸層底
（v1.75.0 只修了橫列卡 .cw-casino-card，方形卡漏掉了）。 */
body.cw-style-vivid .cw-card-sq.cw-top-1,
body.cw-style-vivid .cw-card-sq.cw-top-2 { background: #fff !important; border-width: 2px; }
body.cw-style-vivid .cw-card-sq.cw-top-1 { border-color: var(--vv-r) !important; }
body.cw-style-vivid .cw-card-sq.cw-top-2 { border-color: var(--vv-orange) !important; }
/* ---- (5) 沒有名次的娛樂城卡片：手機版版型跑掉 ----
場館頁「哪些娛樂城有 XXX？」、類型頁「哪些娛樂城玩得到？」用的是
cw_casino_card( $id ) —— 沒有傳名次，所以不會輸出 .cw-rank。
但格線固定保留名次那一欄，於是 LOGO 掉進 38px 的名次欄、
文字擠進 76px 的 LOGO 欄，實測評分「4.6」被拆成三行、店名逐字斷行。
（電玩風 v1.61.0 就踩過同一個坑，當時是另外加 .ac-crow-norank 這個 class；
這裡用 :has() 判斷，模板不用動。） */
body.cw-style-vivid .cw-casino-card:not(:has(.cw-rank)) {
grid-template-columns: 96px minmax(0, 1fr) 150px;
}
@media (max-width: 899px) {
body.cw-style-vivid .cw-casino-card:not(:has(.cw-rank)) {
grid-template-columns: 76px minmax(0, 1fr);
}
}
/* =========================================================
14. 娛樂城內頁副標的骰子圖示（v1.78.0，雜誌風專用）
取自站台 LOGO 的等角骰子（左面骰點＋右面放大鏡），22px 下仍認得出來。
⚠️ 用 mask 不是把顏色寫進 SVG —— 顏色交給 --vv-dice，日後要換色不用再放一份圖檔。
⚠️ 骰子取代原本的左側色條（雜誌風的 h2::before 紫色條與 .cw-panel-title 的 border-left），
兩個一起會很雜；而且那條色條本來就是 ::before，不關掉會跟骰子打架
（實測會把骰子壓成 6px 寬的細條）。
只套用在娛樂城內頁，其他頁型與其他五種風格都不受影響。
========================================================= */
body.cw-style-vivid.single-casino .cw-single-casino .cw-panel-title,
body.cw-style-vivid.single-casino .cw-single-casino .cw-entry-content h2 {
display: flex;
align-items: center;
gap: 9px;
border-left: 0;
padding-left: 0;
position: relative;
}
body.cw-style-vivid.single-casino .cw-single-casino .cw-panel-title::before,
body.cw-style-vivid.single-casino .cw-single-casino .cw-entry-content h2::before {
content: "";
position: static;
flex: none;
width: 1.15em; height: 1.15em;
border-radius: 0;
box-shadow: none;
background: var(--vv-dice, var(--vv-p));
-webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%201.2%202.6%206.1v11.8L12%2022.8l9.4-4.9V6.1L12%201.2Zm0%202.3%206.6%203.4L12%2010.3%205.4%206.9%2012%203.5ZM4.4%208.5l6.7%203.5v7.9l-6.7-3.5V8.5Zm8.5%2011.4v-7.9l6.7-3.5v7.9l-6.7%203.5Z%22%2F%3E%3Ccircle%20cx%3D%226.6%22%20cy%3D%2211.2%22%20r%3D%22.95%22%2F%3E%3Ccircle%20cx%3D%229.1%22%20cy%3D%2216.2%22%20r%3D%22.95%22%2F%3E%3Ccircle%20cx%3D%226.6%22%20cy%3D%2215.1%22%20r%3D%22.95%22%2F%3E%3Ccircle%20cx%3D%229.1%22%20cy%3D%2212.4%22%20r%3D%22.95%22%2F%3E%3Ccircle%20cx%3D%2215.4%22%20cy%3D%2212.6%22%20r%3D%222.35%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.15%22%2F%3E%3Cpath%20d%3D%22m17.2%2014.4%202.1%202.1%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22%23000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%201.2%202.6%206.1v11.8L12%2022.8l9.4-4.9V6.1L12%201.2Zm0%202.3%206.6%203.4L12%2010.3%205.4%206.9%2012%203.5ZM4.4%208.5l6.7%203.5v7.9l-6.7-3.5V8.5Zm8.5%2011.4v-7.9l6.7-3.5v7.9l-6.7%203.5Z%22%2F%3E%3Ccircle%20cx%3D%226.6%22%20cy%3D%2211.2%22%20r%3D%22.95%22%2F%3E%3Ccircle%20cx%3D%229.1%22%20cy%3D%2216.2%22%20r%3D%22.95%22%2F%3E%3Ccircle%20cx%3D%226.6%22%20cy%3D%2215.1%22%20r%3D%22.95%22%2F%3E%3Ccircle%20cx%3D%229.1%22%20cy%3D%2212.4%22%20r%3D%22.95%22%2F%3E%3Ccircle%20cx%3D%2215.4%22%20cy%3D%2212.6%22%20r%3D%222.35%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.15%22%2F%3E%3Cpath%20d%3D%22m17.2%2014.4%202.1%202.1%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.35%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}