/*
Theme Name: RSG 電子遊戲介紹主題
Theme URI: https://example.com
Author: Your Name
Author URI: https://example.com
Description: 深色風格 RSG 電子遊戲介紹網站主題。內建可自訂頁首導覽（三個標題含 CTA 按鈕，皆於新分頁開啟）、Hero 區塊、頁尾，以及全站顏色設定，全部可在「外觀 → 自訂」後台調整，方便日後維護。
Version: 78.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: rsg-theme
*/
/* ==========================================================================
基礎變數（實際數值由 functions.php 依後台設定動態輸出於 內覆蓋）
========================================================================== */
:root {
--rsg-bg-color: #0d0d0f;
--rsg-text-color: #f2f2f2;
--rsg-accent-color: #e0a530;
--rsg-header-bg: #151517;
--rsg-footer-bg: #101012;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 90px;
}
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
body {
background-color: var(--rsg-bg-color);
color: var(--rsg-text-color);
font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", sans-serif;
line-height: 1.7;
font-size: 16px;
}
a {
color: var(--rsg-text-color);
text-decoration: none;
}
img {
max-width: 100%;
display: block;
}
ul {
margin: 0;
padding: 0;
}
/* ==========================================================================
頁首
========================================================================== */
.site-header {
background-color: var(--rsg-header-bg);
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 5%;
position: sticky;
top: 0;
z-index: 999;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
flex-wrap: wrap;
gap: 16px;
}
.site-branding {
display: flex;
align-items: center;
gap: 12px;
}
.site-branding a {
font-size: 24px;
font-weight: 700;
letter-spacing: 1px;
color: var(--rsg-text-color);
}
.site-branding img.custom-logo {
max-height: 48px;
width: auto;
}
.main-navigation ul {
list-style: none;
display: flex;
align-items: center;
gap: 32px;
flex-wrap: wrap;
}
.main-navigation a {
font-size: 16px;
font-weight: 500;
transition: color 0.25s ease;
white-space: nowrap;
}
.main-navigation li:not(.nav-cta) a:hover {
color: var(--rsg-accent-color);
}
.nav-cta a {
background-color: var(--rsg-accent-color);
color: #111111;
padding: 10px 28px;
border-radius: 999px;
font-weight: 700;
display: inline-block;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.nav-cta a:hover {
opacity: 0.85;
color: #111111;
transform: translateY(-1px);
}
/* v66新增：漢堡選單按鈕，桌機版隱藏，只在手機版顯示（見下方 media query） */
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 36px;
height: 32px;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
}
.nav-toggle-bar {
display: block;
width: 100%;
height: 2px;
background-color: var(--rsg-text-color);
border-radius: 2px;
transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle.is-active .nav-toggle-bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-toggle.is-active .nav-toggle-bar:nth-child(2) {
opacity: 0;
}
.nav-toggle.is-active .nav-toggle-bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* ==========================================================================
Hero／關於我們 區塊
v30：改成真正的左右兩欄版面，取代先前用 background-image 硬做位置
（cover會裁切、contain位置不好調）的方式。右欄圖片用真正的 ![]()
標籤，在欄位內用 flex 置中＋max-width/height:100% 等比縮放到最大，
不會裁切，也不會有離奇的留白，圖片自然就會落在欄位「正中間」
========================================================================== */
.hero-section {
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
background-color: var(--rsg-bg-color);
overflow: hidden;
}
.hero-columns {
display: flex;
align-items: stretch;
min-height: 780px;
}
/* v33修正：改用 cover（滿版鋪滿，不留白邊）取代 contain（會產生
letterbox黑邊、像相框一樣）。滿版模式下勢必要裁掉一點點才能填滿
整個欄位，這是物理上無法避免的，但已經：
1) 重新裁切圖檔本身（見 hero-thor.png），把人物往左移、去掉
大部分不必要的背景留白
2) 拉高欄位高度，讓需要裁切的幅度降到最低（目前約裁掉圖片
上下合計不到3成，且用 object-position 讓裁切優先發生在
不影響人物臉部與文字logo的位置） */
.hero-text-col {
box-sizing: border-box;
flex: 0 0 auto;
width: 44%;
min-width: 460px;
max-width: 680px;
padding: 60px 32px 60px 6%;
display: flex;
flex-direction: column;
justify-content: center;
}
.hero-image-col {
box-sizing: border-box;
flex: 1 1 auto;
position: relative;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* v34：改用去背透明人物圖，不再是「背景+人物」合成的橫幅圖，
所以不需要 cover 裁切模式了——用 contain 完整顯示、置中，
透明區域自然融入頁面背景，不會看到任何相框/留白痕跡 */
.hero-desktop-photo {
position: absolute;
inset: 0;
z-index: 1;
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center center;
/* v35：加大留白讓圖片顯示得小一點——原本圖片放太大導致400x400的
來源解析度被放大過多、看起來比較模糊，縮小一點觀感會更清晰銳利 */
padding: 12%;
box-sizing: border-box;
}
/* 手機版專屬 Hero 圖片區塊，桌機版預設隱藏（桌機版用上方的 .hero-desktop-photo 呈現） */
.hero-mobile-visual {
display: none;
}
/* ==========================================================================
桌機版 Hero 裝飾特效（v27新增，v29／v30豐富化＋放大）：閃電＋脈動光暈＋
火花光點，疊加在圖片上方，讓畫面更有層次、不那麼單調。手機版有自己
獨立的特效（.hero-mobile-*），兩者互不影響、也不會同時出現。
位置座標是相對於 .hero-image-col（欄位本身，而不是整個 Hero 區塊）
========================================================================== */
.hero-desktop-fx {
position: absolute;
inset: 0;
z-index: 2;
overflow: visible;
pointer-events: none;
}
.hero-desktop-glow {
position: absolute;
/* v36：這張去背圖的姿勢是「鐵鎚在左、臉在右上方」，跟原本以為
的相反——之前把光暈往右移，反而剛好移到臉上。這次改移到
左側對準鐵鎚（圖片本身鐵鎚周圍就有藍色電光，光暈疊上去
正好加強那個效果，也完全不會碰到臉） */
top: 8%;
left: 4%;
width: 42%;
aspect-ratio: 1 / 1;
background: radial-gradient(
circle,
rgba(120, 200, 255, 0.55) 0%,
rgba(120, 200, 255, 0.2) 45%,
rgba(120, 200, 255, 0) 75%
);
animation: rsg-glow-pulse-desktop 3.2s ease-in-out infinite;
}
/* 第二個較小的光暈，移到下方（披風／腿部一帶），位置錯開讓層次更豐富 */
.hero-desktop-glow-secondary {
position: absolute;
bottom: 6%;
right: 8%;
width: 28%;
aspect-ratio: 1 / 1;
background: radial-gradient(
circle,
rgba(224, 165, 48, 0.45) 0%,
rgba(224, 165, 48, 0.16) 45%,
rgba(224, 165, 48, 0) 75%
);
animation: rsg-glow-pulse-desktop 4s ease-in-out infinite;
animation-delay: 1.2s;
}
.hero-desktop-bolt {
position: absolute;
opacity: 0;
filter: drop-shadow(0 0 8px #eafcff) drop-shadow(0 0 20px #4fb8ff) drop-shadow(0 0 40px #2f8dff);
}
.hero-desktop-bolt path {
fill: #f2fbff;
}
/* v36：全部重新配置。這張圖的「臉部禁區」大約在 x:48%~82%、
y:0%~34%（右上方），下面每個特效座標都刻意避開這個範圍，
分佈在鐵鎚（左側）、披風／身體（右側中下段）、腿部（下方） */
.hero-desktop-bolt-1 {
top: 4%;
left: 18%;
width: 70px;
animation: rsg-bolt-flicker 4.5s infinite;
animation-delay: 0.1s;
}
.hero-desktop-bolt-2 {
top: 22%;
left: 2%;
width: 56px;
transform: scaleX(-1);
animation: rsg-bolt-flicker 4.5s infinite;
animation-delay: 1s;
}
.hero-desktop-bolt-3 {
top: 42%;
left: 10%;
width: 48px;
animation: rsg-bolt-flicker 4.5s infinite;
animation-delay: 1.9s;
}
.hero-desktop-bolt-4 {
bottom: 10%;
right: 10%;
width: 50px;
transform: scaleX(-1);
animation: rsg-bolt-flicker 4.5s infinite;
animation-delay: 2.8s;
}
.hero-desktop-bolt-5 {
bottom: 32%;
right: 4%;
width: 42px;
transform: scaleX(-1);
animation: rsg-bolt-flicker 4.5s infinite;
animation-delay: 3.6s;
}
.hero-desktop-bolt-6 {
bottom: 8%;
left: 30%;
width: 40px;
animation: rsg-bolt-flicker 4.5s infinite;
animation-delay: 0.7s;
}
.hero-desktop-bolt-7 {
bottom: 38%;
left: 4%;
width: 36px;
animation: rsg-bolt-flicker 3.6s infinite;
animation-delay: 1.4s;
}
.hero-desktop-bolt-8 {
top: 52%;
right: 8%;
width: 38px;
transform: scaleX(-1);
animation: rsg-bolt-flicker 3.6s infinite;
animation-delay: 2.2s;
}
/* 8顆小火花光點，同樣避開臉部禁區 */
.hero-desktop-spark {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: #e8f8ff;
box-shadow: 0 0 12px 5px rgba(120, 200, 255, 1);
opacity: 0;
animation: rsg-spark-twinkle 2.6s infinite;
}
.hero-desktop-spark-1 { top: 8%; left: 35%; animation-delay: 0.4s; }
.hero-desktop-spark-2 { top: 30%; left: 6%; animation-delay: 1.1s; }
.hero-desktop-spark-3 { bottom: 45%; left: 16%; animation-delay: 1.8s; }
.hero-desktop-spark-4 { bottom: 15%; left: 42%; animation-delay: 2.3s; }
.hero-desktop-spark-5 { top: 55%; right: 6%; animation-delay: 0.9s; }
.hero-desktop-spark-6 { bottom: 8%; right: 24%; animation-delay: 1.5s; }
.hero-desktop-spark-7 { top: 38%; right: 3%; animation-delay: 0.6s; }
.hero-desktop-spark-8 { bottom: 28%; left: 3%; animation-delay: 2.1s; }
/* 共用的閃電閃爍動畫（桌機版／手機版的閃電特效都會用到，故放在全域，
不能只定義在手機版的 @media 區塊裡，否則桌機版會抓不到這個動畫） */
@keyframes rsg-bolt-flicker {
0%, 14%, 100% {
opacity: 0;
}
3% {
opacity: 1;
}
6% {
opacity: 0.2;
}
9% {
opacity: 0.9;
}
12% {
opacity: 0;
}
}
@keyframes rsg-spark-twinkle {
0%, 100% {
opacity: 0;
transform: scale(0.6);
}
50% {
opacity: 1;
transform: scale(1.3);
}
}
/* 桌機版光暈脈動（不含位移，因為 .hero-desktop-glow 本身不是用
translate(-50%,-50%) 置中；手機版的 .hero-mobile-glow 有另外
一組含位移的 rsg-glow-pulse，兩者用途不同，各自獨立避免互相干擾） */
@keyframes rsg-glow-pulse-desktop {
0%, 100% {
opacity: 0.6;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.08);
}
}
.hero-placeholder {
color: rgba(255, 255, 255, 0.35);
border: 2px dashed rgba(255, 255, 255, 0.2);
padding: 60px 80px;
border-radius: 12px;
text-align: center;
font-size: 18px;
max-width: 600px;
}
.about-content {
max-width: 100%;
text-align: left;
margin: 0;
position: relative;
z-index: 1;
}
.section-subtitle {
text-transform: uppercase;
letter-spacing: 3px;
font-size: 13px;
color: var(--rsg-accent-color);
font-weight: 700;
margin-bottom: 12px;
}
.about-title {
font-size: 40px;
font-weight: 700;
margin-bottom: 20px;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);
}
.about-description {
color: rgba(255, 255, 255, 0.8);
font-size: 16px;
margin-bottom: 32px;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}
.about-description ul {
list-style: none;
margin-top: 8px;
}
.about-description li {
padding: 6px 0;
border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
display: flex;
justify-content: space-between;
max-width: 360px;
}
.about-description li strong {
color: var(--rsg-accent-color);
}
.about-buttons {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 16px;
flex-wrap: wrap;
}
.btn {
display: inline-block;
padding: 12px 32px;
border-radius: 999px;
font-weight: 700;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.btn-solid {
background-color: var(--rsg-accent-color);
color: #111111;
}
.btn-solid:hover {
opacity: 0.85;
color: #111111;
transform: translateY(-1px);
}
.btn-outline {
border: 1px solid var(--rsg-accent-color);
color: var(--rsg-accent-color);
}
.btn-outline:hover {
background-color: var(--rsg-accent-color);
color: #111111;
}
/* ==========================================================================
RSG電子介紹 區塊
========================================================================== */
/* ==========================================================================
RSG電子介紹 區塊
v50重新設計：加入4個重點數據小卡，把整段介紹文字從「一片文字牆」
拆成有視覺層次的版面；並修正一個 CSS 優先權衝突——.section-inner
設定的 text-align:center 在樣式表順序上蓋過了 .intro-inner 原本
要的 text-align:left，導致長篇文字一直是置中顯示（置中的大段落
文字讀起來比較吃力），這裡把選擇器優先權加高來修正
========================================================================== */
.intro-section {
padding: 80px 5%;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.intro-section .intro-inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
text-align: center;
}
.intro-text {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.intro-title {
margin-bottom: 28px;
}
/* 4個重點數據小卡：圖示＋數值＋標籤，一眼抓到重點 */
.intro-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 32px;
width: 100%;
max-width: 900px;
}
.intro-stat-item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 18px 16px;
background-color: rgba(255, 255, 255, 0.03);
border: 2px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
position: relative;
overflow: hidden;
transition: border-color 0.2s ease, transform 0.2s ease;
}
.intro-stat-item:hover {
transform: translateY(-2px);
}
/* v54：顏色再加強明顯度——背景色調大幅提高不透明度、邊框改成
2px實色（不再是淡淡的半透明線），圖示徽章底色也更飽和，
數值文字直接上色，整體視覺更搶眼、一眼就能分辨每張卡片 */
.intro-stat-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
}
.intro-stat-item--gold {
background: linear-gradient(180deg, rgba(224, 165, 48, 0.4) 0%, rgba(224, 165, 48, 0.08) 100%);
border-color: #e0a530;
}
.intro-stat-item--gold::before { background: #e0a530; height: 4px; }
.intro-stat-item--gold:hover { border-color: #f4bb52; }
.intro-stat-item--gold .intro-stat-icon { color: #ffffff; background: #e0a530; }
.intro-stat-item--gold .intro-stat-value { color: #f4bb52; }
.intro-stat-item--blue {
background: linear-gradient(180deg, rgba(79, 184, 255, 0.4) 0%, rgba(79, 184, 255, 0.08) 100%);
border-color: #4fb8ff;
}
.intro-stat-item--blue::before { background: #4fb8ff; height: 4px; }
.intro-stat-item--blue:hover { border-color: #7ecaff; }
.intro-stat-item--blue .intro-stat-icon { color: #ffffff; background: #4fb8ff; }
.intro-stat-item--blue .intro-stat-value { color: #7ecaff; }
.intro-stat-item--green {
background: linear-gradient(180deg, rgba(74, 222, 128, 0.4) 0%, rgba(74, 222, 128, 0.08) 100%);
border-color: #4ade80;
}
.intro-stat-item--green::before { background: #4ade80; height: 4px; }
.intro-stat-item--green:hover { border-color: #7ee9a6; }
.intro-stat-item--green .intro-stat-icon { color: #ffffff; background: #4ade80; }
.intro-stat-item--green .intro-stat-value { color: #7ee9a6; }
.intro-stat-item--purple {
background: linear-gradient(180deg, rgba(192, 132, 252, 0.4) 0%, rgba(192, 132, 252, 0.08) 100%);
border-color: #c084fc;
}
.intro-stat-item--purple::before { background: #c084fc; height: 4px; }
.intro-stat-item--purple:hover { border-color: #d6aefd; }
.intro-stat-item--purple .intro-stat-icon { color: #ffffff; background: #c084fc; }
.intro-stat-item--purple .intro-stat-value { color: #d6aefd; }
.intro-stat-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
padding: 8px;
box-sizing: border-box;
}
.intro-stat-icon svg {
width: 100%;
height: 100%;
}
.intro-stat-value {
font-size: 22px;
font-weight: 800;
color: var(--rsg-text-color);
line-height: 1.1;
}
.intro-stat-label {
font-size: 13px;
color: rgba(255, 255, 255, 0.55);
}
.intro-description {
color: rgba(255, 255, 255, 0.75);
font-size: 18px;
line-height: 1.9;
max-width: 760px;
margin: 0 auto;
}
.intro-description p {
margin: 0 0 16px;
}
.intro-description p:last-child {
margin-bottom: 0;
}
.intro-image {
flex: 1;
}
.intro-image img {
width: 100%;
border-radius: 16px;
}
/* ==========================================================================
主要內容區
========================================================================== */
.site-content {
max-width: 1200px;
margin: 0 auto;
padding: 60px 5%;
}
/* ==========================================================================
共用區塊容器
========================================================================== */
.popular-section,
.latest-section {
padding: 80px 5%;
}
.latest-section {
background-color: rgba(255, 255, 255, 0.015);
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.section-inner {
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.section-title {
font-size: 30px;
font-weight: 700;
margin-bottom: 48px;
}
.empty-hint {
color: rgba(255, 255, 255, 0.4);
border: 1px dashed rgba(255, 255, 255, 0.15);
border-radius: 10px;
padding: 32px;
font-size: 15px;
}
.popular-more {
text-align: center;
margin-top: 40px;
}
.game-search-form {
display: flex;
justify-content: center;
gap: 10px;
max-width: 480px;
margin: 0 auto 48px;
}
.game-search-input {
flex: 1;
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 999px;
padding: 12px 20px;
color: var(--rsg-text-color);
font-size: 14px;
}
.game-search-input::placeholder {
color: rgba(255, 255, 255, 0.4);
}
.game-search-input:focus {
outline: none;
border-color: var(--rsg-accent-color);
}
.game-search-btn {
background-color: var(--rsg-accent-color);
color: #111111;
border: none;
padding: 0 28px;
border-radius: 999px;
font-weight: 700;
font-size: 14px;
cursor: pointer;
transition: opacity 0.25s ease;
}
.game-search-btn:hover {
opacity: 0.85;
}
.archive-pagination {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 48px;
flex-wrap: wrap;
}
.archive-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.12);
color: var(--rsg-text-color);
font-size: 14px;
}
.archive-pagination .page-numbers.current {
background-color: var(--rsg-accent-color);
border-color: var(--rsg-accent-color);
color: #111111;
font-weight: 700;
}
.archive-pagination .page-numbers:not(.current):hover {
border-color: var(--rsg-accent-color);
color: var(--rsg-accent-color);
}
/* ==========================================================================
熱門項目
========================================================================== */
.popular-grid {
display: grid;
/* v37修正：原本用 auto-fit，當某一頁的項目數不足以排滿一整列
時（例如最後一頁只剩幾筆），auto-fit 會把空白欄位「收合」，
導致剩下的卡片被拉伸撐大填滿整列，圖片看起來突然變超大、
版面跑掉。改成 auto-fill 後，欄位數量固定不會因為項目少
而收合，卡片永遠維持正常大小，不足的地方單純留白，不會
再有拉伸跑版的問題 */
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 24px;
text-align: left;
}
.popular-card {
background-color: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 14px;
overflow: hidden;
transition: transform 0.25s ease, border-color 0.25s ease;
}
.popular-card:hover {
transform: translateY(-4px);
border-color: var(--rsg-accent-color);
}
.popular-card-thumb {
position: relative;
}
.popular-card-thumb img,
.popular-card-thumb-placeholder {
width: 100%;
aspect-ratio: 1 / 1;
height: auto;
object-fit: contain;
display: block;
background-color: rgba(255, 255, 255, 0.05);
}
.popular-card-rating {
position: absolute;
top: 10px;
left: 10px;
background-color: rgba(0, 0, 0, 0.65);
color: var(--rsg-accent-color);
font-size: 13px;
font-weight: 700;
padding: 4px 10px;
border-radius: 999px;
backdrop-filter: blur(2px);
}
.popular-card-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 12px 16px 0;
}
.tag-chip {
font-size: 11px;
font-weight: 700;
color: rgba(255, 255, 255, 0.75);
background-color: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 3px 10px;
border-radius: 999px;
white-space: nowrap;
}
.popular-card-body {
padding: 14px 16px 20px;
}
.popular-card-body h3 {
font-size: 17px;
margin-bottom: 14px;
}
.popular-card-links {
display: flex;
gap: 10px;
}
.popular-card-links .btn-play,
.popular-card-links .btn-info {
flex: 1;
text-align: center;
font-size: 13px;
font-weight: 700;
padding: 9px 0;
border-radius: 999px;
}
.popular-card-links .btn-play {
background-color: var(--rsg-accent-color);
color: #111111;
}
.popular-card-links .btn-play:hover {
opacity: 0.85;
}
.popular-card-links .btn-info {
border: 1px solid rgba(255, 255, 255, 0.25);
color: var(--rsg-text-color);
}
.popular-card-links .btn-info:hover {
border-color: var(--rsg-accent-color);
color: var(--rsg-accent-color);
}
/* ==========================================================================
最新文章
========================================================================== */
.latest-grid {
display: grid;
/* v49：比照 popular-grid 的修正，auto-fit 在最後一列項目數不足時
會把卡片拉伸撐大、版面跑掉，改用 auto-fill 避免這個問題 */
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 32px;
text-align: left;
}
.latest-card {
background-color: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 14px;
overflow: hidden;
}
.latest-card-thumb img,
.latest-card-thumb .popular-card-thumb-placeholder {
width: 100%;
height: 180px;
object-fit: cover;
}
.latest-card-body {
padding: 20px;
}
.latest-card-date {
font-size: 13px;
color: rgba(255, 255, 255, 0.4);
}
.latest-card-body h3 {
font-size: 18px;
margin: 10px 0;
}
.latest-card-body p {
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 12px;
}
.read-more {
font-size: 14px;
font-weight: 700;
color: var(--rsg-accent-color);
}
.read-more:hover {
text-decoration: underline;
}
/* ==========================================================================
頁尾
========================================================================== */
.site-footer {
background-color: var(--rsg-footer-bg);
padding: 60px 5% 30px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
min-height: 100px;
}
.site-footer .footer-inner {
max-width: 1200px;
margin: 0 auto;
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
}
.footer-columns {
display: grid;
grid-template-columns: 1.1fr 1fr 1.1fr;
gap: 40px;
padding-bottom: 40px;
/* v71：改成垂直置中，讓內容較少的「服務項目」欄位不會孤零零
貼在頂端、下面留一大片空白，跟左右兩欄視覺上更平衡 */
align-items: center;
}
.footer-col h4 {
color: var(--rsg-text-color);
font-size: 20px;
font-weight: 800;
margin-bottom: 20px;
}
/* v70/v71：「服務項目」欄位置中對齊，讓三欄視覺上更平衡對稱，
字級加大、行距加寬，不會看起來又小又空 */
.footer-site-title {
font-size: 20px;
font-weight: 700;
color: var(--rsg-text-color);
margin-bottom: 10px;
}
.footer-links ul,
.footer-latest ul {
list-style: none;
}
.footer-links li {
margin-bottom: 18px;
font-size: 18px;
}
.footer-links li:last-child {
margin-bottom: 0;
}
.footer-links a:hover {
color: var(--rsg-accent-color);
}
.footer-latest li {
margin-bottom: 14px;
}
.footer-latest li a {
display: flex;
align-items: center;
gap: 10px;
}
.footer-latest li img {
width: 48px;
height: 48px;
object-fit: cover;
border-radius: 6px;
flex-shrink: 0;
}
.footer-latest li span {
font-size: 13px;
line-height: 1.4;
}
.footer-latest li time {
display: none;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 20px;
text-align: center;
font-size: 13px;
color: rgba(255, 255, 255, 0.4);
}
/* ==========================================================================
浮動 CTA 按鈕
========================================================================== */
.floating-cta {
position: fixed;
right: 24px;
bottom: 24px;
background-color: var(--rsg-accent-color);
color: #111111;
font-weight: 700;
padding: 14px 26px;
border-radius: 999px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
z-index: 998;
transition: transform 0.25s ease, opacity 0.25s ease;
}
.floating-cta:hover {
transform: translateY(-2px);
opacity: 0.9;
color: #111111;
}
@media (max-width: 900px) {
.footer-columns {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
一般文章（電子攻略）單篇內頁
v73新增：先前完全沒有專屬樣式，文章內容（標題、清單、粗體、連結、
圖片等）都是瀏覽器預設外觀，跟網站深色風格完全不搭、間距也很亂，
這是「排版跑掉」的主要原因。這裡補上完整的內文排版樣式
========================================================================== */
.single-post-page .site-content {
max-width: 1200px;
}
.single-post-tags {
padding: 0 0 14px;
}
.single-post-title {
font-size: 34px;
line-height: 1.3;
margin: 0 0 12px;
}
.single-post-meta {
color: rgba(255, 255, 255, 0.45);
font-size: 14px;
margin: 0 0 28px;
}
.single-post-thumb {
margin-bottom: 32px;
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.single-post-thumb img {
width: 100%;
height: auto;
display: block;
}
/* 內文排版：文章內容裡各種標籤的樣式，涵蓋AI生成文章常見的
標題、清單、粗體、連結、表格等元素 */
.entry-content {
color: rgba(255, 255, 255, 0.82);
font-size: 17px;
line-height: 1.9;
margin-bottom: 40px;
}
.entry-content p {
margin: 0 0 20px;
}
.entry-content h2 {
font-size: 26px;
font-weight: 800;
color: var(--rsg-text-color);
margin: 40px 0 18px;
padding-top: 8px;
line-height: 1.4;
}
.entry-content h3 {
font-size: 21px;
font-weight: 700;
color: var(--rsg-text-color);
margin: 32px 0 14px;
line-height: 1.4;
}
.entry-content h4 {
font-size: 18px;
font-weight: 700;
color: var(--rsg-text-color);
margin: 24px 0 12px;
}
.entry-content h2:first-child,
.entry-content h3:first-child {
margin-top: 0;
}
.entry-content ul,
.entry-content ol {
margin: 0 0 22px;
padding-left: 24px;
}
.entry-content li {
margin-bottom: 10px;
}
.entry-content li:last-child {
margin-bottom: 0;
}
.entry-content strong,
.entry-content b {
color: var(--rsg-accent-color);
font-weight: 700;
}
.entry-content a {
color: var(--rsg-accent-color);
text-decoration: underline;
text-underline-offset: 2px;
}
.entry-content a:hover {
opacity: 0.8;
}
.entry-content img {
max-width: 100%;
height: auto;
border-radius: 12px;
margin: 12px 0 24px;
display: block;
}
/* v74修正：LINE等CTA按鈕常見「小圖示＋文字」放在同一個連結裡的
寫法，上面針對內文大圖的 display:block 樣式會把小圖示也撐成
整行的區塊元素，導致圖示跑到文字上方、按鈕版面跑掉。這裡針對
「連結裡面的圖片」（通常是小圖示）另外處理，改成行內顯示、
縮小尺寸、垂直置中對齊文字，不再套用大圖片的樣式 */
.entry-content a img {
display: inline-block;
width: 20px;
height: 20px;
max-width: 20px;
object-fit: contain;
margin: 0 6px 0 0;
vertical-align: middle;
border-radius: 0;
}
/* 漸進式加強：支援 :has() 的瀏覽器會把「圖示＋文字」的連結
（常見於LINE等社群CTA）直接呈現成實心圓角按鈕，視覺上更像
一個完整的行動呼籲按鈕，不支援的瀏覽器則維持上面的行內圖示樣式 */
.entry-content a:has(img) {
display: inline-flex;
align-items: center;
background-color: var(--rsg-accent-color);
color: #111111;
padding: 10px 22px;
border-radius: 999px;
text-decoration: none;
font-weight: 700;
margin: 8px 0 20px;
}
.entry-content a:has(img):hover {
opacity: 0.85;
}
.entry-content blockquote {
margin: 0 0 24px;
padding: 16px 20px;
border-left: 3px solid var(--rsg-accent-color);
background-color: rgba(255, 255, 255, 0.03);
border-radius: 0 10px 10px 0;
color: rgba(255, 255, 255, 0.7);
}
.entry-content blockquote p:last-child {
margin-bottom: 0;
}
.entry-content hr {
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin: 32px 0;
}
/* v76新增：防禦性補強FAQ手風琴（/）樣式，避免
這類互動元件用瀏覽器預設外觀顯示、跟深色主題不搭 */
.entry-content details {
margin: 0 0 14px;
padding: 14px 18px;
background-color: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
}
.entry-content summary {
cursor: pointer;
font-weight: 700;
color: var(--rsg-text-color);
list-style: none;
}
.entry-content summary::-webkit-details-marker {
display: none;
}
.entry-content summary::after {
content: "▼";
float: right;
font-size: 12px;
color: var(--rsg-accent-color);
transition: transform 0.2s ease;
}
.entry-content details[open] summary::after {
transform: rotate(180deg);
}
.entry-content details p:last-child {
margin-bottom: 0;
margin-top: 12px;
}
.entry-content table {
width: 100%;
border-collapse: collapse;
margin: 0 0 24px;
font-size: 15px;
}
.entry-content th,
.entry-content td {
border: 1px solid rgba(255, 255, 255, 0.12);
padding: 10px 14px;
text-align: left;
}
.entry-content th {
background-color: rgba(255, 255, 255, 0.05);
color: var(--rsg-text-color);
font-weight: 700;
}
@media (max-width: 640px) {
.single-post-title {
font-size: 26px;
}
.entry-content {
font-size: 16px;
}
.entry-content h2 {
font-size: 22px;
}
.entry-content h3 {
font-size: 19px;
}
}
/* ==========================================================================
熱門項目 單篇內頁
========================================================================== */
/* v43重新設計：改成真正的橫幅式（landscape）頭部區塊，取代先前
小圖＋標題並排的設計。先前版本因為遊戲圖檔實際尺寸並非正方形
（寬600px、高從600~718px不等），加上容器沒有鎖定明確高度，
在某些情況下會被撐成細長條、非常不美觀。
這次容器高度直接鎖死（不受圖片比例影響），背景疊一層放大模糊
的同張圖片當作氛圍底圖，前景的圖示則完整不裁切顯示，橫幅式
構圖看起來更有豐富度、也徹底解決跑版問題 */
/* v58：使用者反映兩側留白（黑邊）太多，容器從1100px加大到1400px，
讓內容更貼近螢幕邊緣、減少左右大片空白 */
.single-rsg_popular_item .site-content {
max-width: 1400px;
}
/* ==========================================================================
遊戲內頁：左右兩欄版面（主內容＋側邊欄）
========================================================================== */
.single-layout {
display: flex;
align-items: flex-start;
gap: 40px;
}
.single-main {
flex: 1 1 auto;
min-width: 0;
}
.single-sidebar {
flex: 0 0 360px;
width: 360px;
display: flex;
flex-direction: column;
gap: 24px;
position: sticky;
top: 24px;
}
.sidebar-widget {
background-color: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
padding: 20px;
}
.sidebar-widget-title {
font-size: 17px;
font-weight: 800;
margin: 0 0 16px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* 側邊欄的搜尋框：沿用「所有遊戲」列表頁同一套 game-search-form
樣式，但欄位較窄，改成直式排列（輸入框在上、按鈕在下） */
.sidebar-search-widget .game-search-form {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 100%;
margin: 0;
}
.sidebar-search-widget .game-search-input {
font-size: 15px;
padding: 12px 16px;
}
.sidebar-search-widget .game-search-btn {
padding: 12px 0;
font-size: 15px;
}
/* 熱門遊戲清單 */
.sidebar-featured-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.sidebar-featured-link {
display: flex;
align-items: center;
gap: 14px;
padding: 10px;
border-radius: 10px;
transition: background-color 0.2s ease;
}
.sidebar-featured-link:hover,
.sidebar-featured-link.is-current {
background-color: rgba(255, 255, 255, 0.06);
}
.sidebar-featured-link.is-current {
border: 1px solid rgba(224, 165, 48, 0.4);
}
.sidebar-featured-thumb {
flex: 0 0 auto;
width: 64px;
height: 64px;
border-radius: 10px;
overflow: hidden;
background-color: rgba(255, 255, 255, 0.05);
display: block;
}
.sidebar-featured-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.sidebar-featured-name {
font-size: 16px;
font-weight: 700;
color: var(--rsg-text-color);
line-height: 1.35;
}
.sidebar-all-games-btn {
display: block;
width: 100%;
text-align: center;
box-sizing: border-box;
}
.sidebar-cta-btn {
display: block;
width: 100%;
text-align: center;
box-sizing: border-box;
}
.single-item-header {
position: relative;
display: flex;
align-items: center;
gap: 32px;
height: 270px;
margin-bottom: 32px;
padding: 0 40px;
border-radius: 18px;
overflow: hidden;
background-color: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* v47：頂部加一條細細的金色漸層裝飾線，質感立刻提升一個層次 */
.single-item-header::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
z-index: 2;
background: linear-gradient(
90deg,
rgba(224, 165, 48, 0) 0%,
var(--rsg-accent-color) 50%,
rgba(224, 165, 48, 0) 100%
);
}
.single-item-header-bg {
position: absolute;
inset: 0;
z-index: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: blur(32px) brightness(0.42) saturate(1.4);
transform: scale(1.3);
}
.single-item-header::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(
90deg,
var(--rsg-bg-color) 0%,
rgba(13, 13, 15, 0.6) 42%,
rgba(13, 13, 15, 0.28) 100%
);
}
.single-item-thumb {
position: relative;
z-index: 1;
flex: 0 0 auto;
width: 220px;
height: 220px;
}
/* v47：圖片後方加一圈柔和的金色光暈，呼應強調色，讓圖示更立體、
更有精品陳列感，不再是平貼在背景上而已 */
.single-item-thumb::before {
content: "";
position: absolute;
inset: -14px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(224, 165, 48, 0.28) 0%,
rgba(224, 165, 48, 0.08) 55%,
rgba(224, 165, 48, 0) 75%
);
z-index: -1;
}
.single-item-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.14);
background-color: rgba(255, 255, 255, 0.06);
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55);
}
.single-item-heading {
position: relative;
z-index: 1;
flex: 1 1 auto;
min-width: 0;
}
.single-item-heading .popular-card-tags {
padding: 0 0 12px;
}
/* v47：分類標籤加上淡淡的金色邊框，跟整體強調色呼應，更有精緻感 */
.single-item-heading .popular-card-tags .tag-chip {
border: 1px solid rgba(224, 165, 48, 0.35);
}
.single-item-heading h1 {
margin: 0 0 10px;
font-size: 40px;
line-height: 1.2;
letter-spacing: 0.5px;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.single-item-rating {
color: var(--rsg-accent-color);
font-weight: 700;
font-size: 15px;
margin-bottom: 0;
}
.single-item-content {
color: rgba(255, 255, 255, 0.82);
font-size: 17px;
line-height: 1.9;
margin-bottom: 36px;
}
.single-item-content p {
margin: 0 0 18px;
}
.single-item-content p:last-child {
margin-bottom: 0;
}
/* ==========================================================================
試玩區塊（iframe 內嵌）— v21新增
========================================================================== */
.trial-play-section {
margin-top: 32px;
padding-top: 32px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.trial-play-heading-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 16px;
}
.trial-play-heading {
font-size: 22px;
font-weight: 800;
margin-bottom: 0;
color: var(--rsg-text-color);
}
/* v65新增：全螢幕遊玩按鈕 */
.trial-play-fullscreen-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background-color: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.15);
color: var(--rsg-text-color);
font-size: 13px;
font-weight: 700;
padding: 8px 14px;
border-radius: 999px;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.trial-play-fullscreen-btn:hover {
background-color: rgba(224, 165, 48, 0.15);
border-color: rgba(224, 165, 48, 0.5);
}
.trial-play-frame-wrap {
position: relative;
width: 100%;
max-width: 900px;
aspect-ratio: 16 / 9;
background-color: #000000;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
/* 進入瀏覽器全螢幕模式時，讓包裝容器與iframe都撐滿整個螢幕，
不再受max-width:900px與16:9比例限制 */
.trial-play-frame-wrap:fullscreen,
.trial-play-frame-wrap:-webkit-full-screen {
max-width: 100%;
width: 100vw;
height: 100vh;
aspect-ratio: auto;
border-radius: 0;
}
.trial-play-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
/* v65新增：點擊啟動覆蓋層，解決滑鼠移到試玩畫面上時滾輪被iframe
吃掉、頁面滑不動的問題。點擊一次「開始遊玩」之後才隱藏，
把操作權交給遊戲本身 */
.trial-play-overlay {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.45);
border: 0;
cursor: pointer;
color: #ffffff;
transition: opacity 0.2s ease;
}
.trial-play-overlay:hover {
background: rgba(0, 0, 0, 0.35);
}
.trial-play-overlay.is-hidden {
display: none;
}
.trial-play-overlay-icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
background-color: var(--rsg-accent-color);
color: #111111;
font-size: 20px;
padding-left: 4px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.trial-play-overlay-text {
font-size: 14px;
font-weight: 700;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.trial-play-fallback-hint {
margin-top: 14px;
font-size: 13px;
color: rgba(255, 255, 255, 0.5);
}
.trial-play-fallback-hint a {
color: var(--rsg-accent-color);
font-weight: 700;
text-decoration: underline;
}
@media (max-width: 640px) {
.trial-play-frame-wrap {
max-width: 100%;
border-radius: 10px;
}
}
@media (max-width: 768px) {
/* v66：手機版導覽列改成漢堡選單。頁首固定顯示Logo＋漢堡按鈕，
導覽選單預設收起（display:none），點擊漢堡按鈕才展開，
取代原本直接把四個標題擠在Logo下方的做法 */
.site-header {
flex-direction: row;
align-items: center;
flex-wrap: wrap;
}
.nav-toggle {
display: flex;
}
.main-navigation {
display: none;
width: 100%;
order: 3;
}
.main-navigation.is-open {
display: block;
}
.main-navigation ul {
flex-direction: column;
align-items: flex-start;
gap: 4px;
width: 100%;
padding-top: 16px;
}
.main-navigation li {
width: 100%;
}
.main-navigation li a {
display: block;
width: 100%;
padding: 12px 4px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
box-sizing: border-box;
}
.main-navigation li.nav-cta {
margin-top: 8px;
}
.main-navigation li.nav-cta a {
border-bottom: none;
text-align: center;
}
/* v57：遊戲內頁側邊欄在手機版改成堆疊在主內容下方，取消sticky
固定與固定寬度 */
.single-layout {
flex-direction: column;
gap: 32px;
}
.single-sidebar {
flex: none;
width: 100%;
position: static;
}
/* v66：手機版「熱門遊戲」清單改成2欄一組的小卡排列（跟首頁
RSG遊戲介紹區塊的手機版排法一致），取代原本一個一個往下排的
橫式列表；圖片與文字也一併放大，避免看起來太小 */
.sidebar-featured-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.sidebar-featured-link {
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
padding: 14px 10px;
background-color: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.sidebar-featured-thumb {
width: 84px;
height: 84px;
}
.sidebar-featured-name {
font-size: 15px;
}
/* v77：手機版「最新文章」（僅文章內頁側邊欄）最多只顯示4篇，
湊成整齊的2x2排列，不會有落單的第5張卡片。只限定文章內頁
（.single-post-page），不影響遊戲內頁「熱門遊戲」清單
（固定5款指定遊戲，維持不變） */
.single-post-page .sidebar-featured-list li:nth-child(n+5) {
display: none;
}
/* 桌機版 Hero 特效在手機版隱藏，手機版用自己獨立的 .hero-mobile-* 特效 */
.hero-desktop-fx,
.hero-desktop-photo {
display: none;
}
/* v55修正：.hero-section 的 overflow:hidden 原本是為了包住桌機版
背景特效用的，但手機版內容（尤其文字列表改成上下堆疊後變得
比較高）如果不小心跟父層高度算出入，這個屬性就可能把超出的
內容直接裁掉看不到。手機版不需要這個限制，改成 visible，
確保內容不管多高都會完整顯示、不會被裁切 */
.hero-section {
overflow: visible;
}
/* v30：新的兩欄版面在手機版改回上下堆疊，並用 order 讓圖片欄位
視覺上排在文字欄位之前（HTML原始順序是文字在前，方便無障礙
閱讀器優先讀到文字說明，畫面呈現順序用 order 另外調整即可） */
.hero-columns {
display: flex;
flex-direction: column;
min-height: 0;
}
.hero-image-col {
order: 1;
display: block;
padding: 0;
min-width: 0;
}
.hero-text-col {
order: 2;
flex: none;
width: 100%;
/* v56關鍵修正：桌機版設定了 min-width:460px，手機版樣式表
先前只重新設定了寬度上限(max-width)，沒有重設這個最小
寬度限制，導致欄位在手機螢幕上還是被強制撐到至少460px寬
（比很多手機螢幕本身還寬），文字因此被推到看不見的範圍，
這才是文字一直「被裁切」的真正原因。加上 min-width:0
徹底解除這個限制，欄位寬度完全依照手機螢幕實際寬度顯示 */
min-width: 0;
max-width: 100%;
padding: 0;
}
.hero-placeholder {
padding: 40px 24px;
position: static;
transform: none;
margin: 0 24px;
}
/* ==========================================================================
手機版 Hero 區塊：改用真正的 DOM 元素（.hero-mobile-visual）取代舊版
用 ::before 偽元素套背景圖的做法（那個做法計算縮放基準是整個含文字
的高區塊，圖片會被縮到跑掉）。現在圖片是獨立元素，自然排版、
不會裁切也不會跟文字重疊，並加上 CSS 手繪風格閃電特效
========================================================================== */
.hero-mobile-visual {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
height: clamp(220px, 62vw, 340px);
margin: 0 auto;
overflow: visible;
}
.hero-mobile-photo {
position: relative;
z-index: 2;
display: block;
/* v52修正：原本 height:100%+width:auto+max-width:88% 這個組合
在某些手機螢幕寬度下會互相衝突，導致圖片實際顯示寬度超出
容器範圍而被裁切。改用 max-width+max-height 搭配
width:auto/height:auto，瀏覽器會確保圖片完整縮放進容器內，
不管螢幕寬度怎麼變都不會再裁切 */
max-width: 90%;
max-height: 100%;
width: auto;
height: auto;
margin: 0 auto;
object-fit: contain;
filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.55));
}
.hero-mobile-glow {
position: absolute;
top: 50%;
left: 50%;
width: 72%;
aspect-ratio: 1 / 1;
transform: translate(-50%, -50%);
background: radial-gradient(
circle,
rgba(120, 200, 255, 0.38) 0%,
rgba(120, 200, 255, 0.14) 42%,
rgba(120, 200, 255, 0) 72%
);
z-index: 1;
animation: rsg-glow-pulse 2.4s ease-in-out infinite;
}
.hero-mobile-bolt {
position: absolute;
z-index: 3;
pointer-events: none;
opacity: 0;
filter: drop-shadow(0 0 4px #eafcff) drop-shadow(0 0 12px #4fb8ff) drop-shadow(0 0 22px #2f8dff);
}
.hero-mobile-bolt path {
fill: #f2fbff;
}
.hero-mobile-bolt-1 {
top: 4%;
left: 2%;
width: 15%;
animation: rsg-bolt-flicker 2.8s infinite;
animation-delay: 0.1s;
}
.hero-mobile-bolt-2 {
top: 8%;
right: 4%;
width: 13%;
transform: scaleX(-1);
animation: rsg-bolt-flicker 2.8s infinite;
animation-delay: 1s;
}
.hero-mobile-bolt-3 {
bottom: 10%;
left: 10%;
width: 11%;
animation: rsg-bolt-flicker 2.8s infinite;
animation-delay: 1.9s;
}
@keyframes rsg-glow-pulse {
0%, 100% {
opacity: 0.6;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 1;
transform: translate(-50%, -50%) scale(1.08);
}
}
.about-content {
position: relative;
z-index: 1;
padding: 12px 24px 44px;
margin: -24px 0 0;
text-align: center;
max-width: 100%;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 0%,
var(--rsg-bg-color) 38%,
var(--rsg-bg-color) 100%
);
}
.about-buttons {
justify-content: center;
}
.about-description li {
/* v54修正：原本沿用桌機版的左右並排(space-between)+固定寬度
360px，手機螢幕實際可用寬度常常不到360px，加上flex項目
預設不會縮到比內容還窄，導致右側較長的文字（例如「範例
96.5%（請以官方公告為準）」）被擠出畫面外、直接被裁掉看
不到。改成上下堆疊顯示，不管文字多長都會自然換行、不會
再被裁切 */
display: block;
max-width: 100%;
text-align: center;
}
.about-description li strong {
display: block;
margin-top: 2px;
}
.about-title {
font-size: 26px;
}
.section-title {
font-size: 24px;
}
.popular-card-links {
flex-wrap: wrap;
}
.intro-inner {
flex-direction: column;
}
.intro-text {
text-align: center;
}
.intro-stats {
grid-template-columns: repeat(2, 1fr);
}
.intro-stat-item {
align-items: center;
text-align: center;
}
.intro-description {
max-width: 100%;
}
/* ==========================================================================
首頁「RSG遊戲介紹」手機版專用小卡版型
只套用在首頁（.home-popular-grid），不影響「所有遊戲」列表頁
- 2 個一組並排、往下堆疊
- 最多顯示 4 組（8 張卡片），避免手機版一直往下滑、可視性差
========================================================================== */
/* v69修正：「所有遊戲」列表頁與搜尋結果頁一直沒有套用手機版
2欄排列，只有首頁的 .home-popular-grid 有做這個處理，導致
這兩個頁面在手機版還是一個一個往下排、很醜。這裡讓所有用到
.popular-grid 的地方（不只 home-popular-grid）在手機版統一
都是2欄排列＋緊湊卡片樣式；差別只在於「所有遊戲」與搜尋結果
頁不套用首頁專屬的「最多顯示8張」限制，會完整顯示該頁全部
項目（含分頁） */
.popular-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.popular-grid .popular-card-rating {
font-size: 11px;
padding: 3px 8px;
top: 6px;
left: 6px;
}
.popular-grid .popular-card-tags {
padding: 8px 8px 0;
}
.popular-grid .tag-chip {
font-size: 9px;
padding: 2px 6px;
}
.popular-grid .popular-card-body {
padding: 8px 8px 12px;
}
.popular-grid .popular-card-body h3 {
font-size: 12px;
margin-bottom: 8px;
line-height: 1.3;
}
.popular-grid .popular-card-links {
flex-direction: column;
flex-wrap: nowrap;
gap: 6px;
}
.popular-grid .popular-card-links .btn-play,
.popular-grid .popular-card-links .btn-info {
font-size: 10px;
padding: 6px 0;
}
/* 最多只顯示前 8 張（4 組），第 9 張以後在手機版隱藏——
這個限制只給首頁用，「所有遊戲」與搜尋結果頁要顯示完整內容 */
.home-popular-grid .popular-card:nth-child(n+9) {
display: none;
}
/* v43：遊戲內頁頭部橫幅在手機版改成上下排列，取消固定高度
（改用內容自然撐開的高度），圖片置中並縮小 */
.single-item-header {
flex-direction: column;
align-items: center;
text-align: center;
gap: 14px;
height: auto;
padding: 24px 20px;
}
.single-item-thumb {
width: 150px;
height: 150px;
}
.single-item-heading {
padding-top: 0;
}
.single-item-heading h1 {
font-size: 26px;
}
.popular-card-tags {
justify-content: center;
}
}