/*
Theme Name: RoyalBet Casino
Theme URI: https://example.com
Description: 娛樂城官網主題，支援黑/白底切換、自訂主題色、拖移排序區塊、FAQ Schema、SEO 最佳化。
Author: KKK
Version: 2.7.1
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: royalbet
*/

/* ── CSS Variables ── */
:root {
  --rb-primary: #d4af37;
  --rb-primary-rgb: 212, 175, 55;
  --rb-bg: #0a0a0f;
  --rb-card: #13131a;
  --rb-card2: #1c1c26;
  --rb-text: #f0f0f0;
  --rb-muted: #888888;
  --rb-border: rgba(212, 175, 55, 0.2);
  --rb-radius: 10px;
  --rb-radius-sm: 6px;
  --rb-btn-text: #000000; /* overridden by PHP brightness check */
  --rb-font: 'Noto Sans TC', 'Segoe UI', sans-serif;
}

body.rb-light {
  --rb-bg: #f4f4ef;
  --rb-card: #ffffff;
  --rb-card2: #eaeae4;
  --rb-text: #111111;
  --rb-muted: #666666;
  --rb-border: rgba(0, 0, 0, 0.1);
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  overflow-x: clip; /* clip on html: prevents scroll without breaking sticky */
  max-width: 100%;
}

body {
  font-family: var(--rb-font);
  background: var(--rb-bg);
  color: var(--rb-text);
  font-size: 16px;
  line-height: 1.75;
  transition: background 0.35s, color 0.35s;
  max-width: 100%;
  overflow-x: clip;
}

a { color: var(--rb-primary); text-decoration: none; transition: opacity 0.2s; }
a:hover { opacity: 0.8; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }

/* ── Layout ── */
.rb-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.rb-section { padding: 48px 0; }
.rb-section-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--rb-text);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color 0.35s;
}
.rb-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rb-border);
}
.rb-section-title .accent { color: var(--rb-primary); }

/* ── Marquee ── */
.rb-marquee {
  /* color set via inline CSS from Customizer */
  background: var(--rb-primary);
  color: #000;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 0;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  z-index: 100;
}
.rb-marquee-inner {
  display: inline-block;
  animation: rb-marquee 25s linear infinite;
}
@keyframes rb-marquee {
  from { transform: translateX(100vw); }
  to   { transform: translateX(-100%); }
}

/* ── Header ── */
.rb-header {
  background: var(--rb-card);
  border-bottom: 1px solid var(--rb-border);
  position: sticky;
  top: 0;
  z-index: 500;
  transition: background 0.35s, border-color 0.35s, box-shadow 0.35s;
}
/* Scrolled state: add shadow for depth */
.rb-header.scrolled {
  box-shadow: 0 2px 20px rgba(0,0,0,0.15);
}
/* sticky header — no padding-top needed, marquee scrolls away naturally */
.rb-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 64px;
}
.rb-logo {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--rb-text);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.35s;
}
.rb-logo span { color: var(--rb-primary); }

/* Desktop Nav */
.rb-nav { display: flex; align-items: center; gap: 4px; }
.rb-nav a {
  font-size: 14px;
  color: var(--rb-muted);
  padding: 6px 12px;
  border-radius: var(--rb-radius-sm);
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
  font-weight: 500;
}
.rb-nav a:hover,
.rb-nav a.current { color: var(--rb-primary); }

.rb-btn-join {
  color: var(--rb-btn-text, #000);
  background: var(--rb-primary);
  color: #000;
  border: none;
  border-radius: var(--rb-radius-sm);
  padding: 8px 18px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
  transition: opacity 0.2s;
}
.rb-btn-join:hover { opacity: 0.85; color: var(--rb-btn-text, #000); }

/* Hamburger */
.rb-hamburger {
  display: none;
  background: transparent;
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-sm);
  padding: 6px 10px;
  cursor: pointer;
  color: var(--rb-text);
  font-size: 18px;
  line-height: 1;
  transition: color 0.35s, border-color 0.35s;
}

/* Mobile Nav */
.rb-mobile-nav {
  display: none;
  background: var(--rb-card);
  border-top: 1px solid var(--rb-border);
  padding: 8px;
  transition: background 0.35s;
}
.rb-mobile-nav.open { display: block; }
.rb-mobile-nav a {
  display: block;
  font-size: 15px;
  color: var(--rb-muted);
  padding: 10px 14px;
  border-radius: var(--rb-radius-sm);
  transition: color 0.2s, background 0.2s;
}
.rb-mobile-nav a:hover { color: var(--rb-primary); background: var(--rb-card2); }
.rb-mobile-nav .rb-btn-join { color: var(--rb-btn-text, #000);
  display: block;
  text-align: center;
  margin: 8px 14px;
  padding: 12px;
}

/* ── Hero ── */
.rb-hero {
  padding: 64px 20px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.rb-hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--rb-primary-rgb), 0.13) 0%, transparent 65%);
  pointer-events: none;
}
.rb-hero h1 {
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 900;
  line-height: 1.2;
  color: var(--rb-text);
  position: relative;
  margin-bottom: 16px;
  transition: color 0.35s;
}
.rb-hero h1 em { color: var(--rb-primary); font-style: normal; }
.rb-hero .rb-hero-sub {
  font-size: 16px;
  color: var(--rb-muted);
  margin-bottom: 28px;
  position: relative;
  transition: color 0.35s;
}
.rb-hero-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}
.rb-btn-primary {
  color: var(--rb-btn-text, #000);
  background: var(--rb-primary);
  color: #000;
  border: none;
  border-radius: var(--rb-radius-sm);
  padding: 12px 28px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: opacity 0.2s;
}
.rb-btn-primary:hover { opacity: 0.85; color: var(--rb-btn-text, #000); }
.rb-btn-outline {
  background: transparent;
  color: var(--rb-primary);
  border: 1.5px solid var(--rb-primary);
  border-radius: var(--rb-radius-sm);
  padding: 12px 28px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s;
}
.rb-btn-outline:hover { background: rgba(var(--rb-primary-rgb), 0.1); color: var(--rb-primary); }

/* ── Stats ── */
.rb-stats {
  display: flex;
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius);
  overflow: hidden;
  background: var(--rb-card);
  margin: 0 0 40px;
  transition: background 0.35s, border-color 0.35s;
}
.rb-stat {
  flex: 1;
  padding: 16px 8px;
  text-align: center;
  border-right: 1px solid var(--rb-border);
  min-width: 0;
  transition: border-color 0.35s;
}
.rb-stat:last-child { border-right: none; }
.rb-stat-num {
  font-size: 24px;
  font-weight: 900;
  color: var(--rb-primary);
  display: block;
}
.rb-stat-label {
  font-size: 12px;
  color: var(--rb-muted);
  margin-top: 2px;
  display: block;
  transition: color 0.35s;
}

/* ── Category Cards (Accordion) ── */
.rb-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  align-items: start; /* KEY: each card only as tall as its content */
}
.rb-cat-card {
  background: var(--rb-card2);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius);
  overflow: hidden;
  transition: background 0.35s, border-color 0.35s;
  /* Each card is self-contained height — never stretches to match neighbour */
  height: fit-content;
  align-self: start;
}
.rb-cat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  cursor: pointer;
  user-select: none;
}
.rb-cat-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(var(--rb-primary-rgb), 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  overflow: hidden;
  transition: background 0.35s;
}
.rb-cat-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.rb-cat-info { flex: 1; min-width: 0; }
.rb-cat-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--rb-text);
  display: block;
  transition: color 0.35s;
}
.rb-cat-count { font-size: 11px; color: var(--rb-muted); transition: color 0.35s; }
.rb-cat-arrow {
  font-size: 12px;
  color: var(--rb-primary);
  transition: transform 0.3s;
  flex-shrink: 0;
}
.rb-cat-card.open .rb-cat-arrow { transform: rotate(180deg); }

.rb-cat-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.rb-cat-card.open .rb-cat-body { max-height: 600px; }
.rb-cat-body-inner { padding: 0 14px 14px; }
.rb-cat-desc {
  font-size: 14px;
  color: var(--rb-muted);
  line-height: 1.8;
  margin-bottom: 12px;
  transition: color 0.35s;
}

/* Venue list inside category */
.rb-venue-grid {
  display: grid;
  gap: 8px;
  /* Default fallback */
  grid-template-columns: repeat(3, 1fr);
}
/* 1 venue: full width single card */
.rb-venue-grid[data-count="1"]  { grid-template-columns: 1fr; }
/* 2 venues: side by side */
.rb-venue-grid[data-count="2"]  { grid-template-columns: repeat(2, 1fr); }
/* 3 venues: one row */
.rb-venue-grid[data-count="3"]  { grid-template-columns: repeat(3, 1fr); }
/* 4 venues: 2×2 grid — no orphan */
.rb-venue-grid[data-count="4"]  { grid-template-columns: repeat(2, 1fr); }
/* 5 venues: 3+2, last row centred via span */
/* 5 venues: 3-col, last 2 items centred on row 2 */
.rb-venue-grid[data-count="5"]  { grid-template-columns: repeat(6, 1fr); }
.rb-venue-grid[data-count="5"]  .rb-venue-card { grid-column: span 2; }
/* Row 2 has items 4+5. Item 4 starts at col 2 to centre the pair */
.rb-venue-grid[data-count="5"]  .rb-venue-card:nth-child(4) { grid-column: 2 / span 2; }
.rb-venue-grid[data-count="5"]  .rb-venue-card:nth-child(5) { grid-column: 4 / span 2; }
/* 6 venues: 3×2 perfect grid */
.rb-venue-grid[data-count="6"]  { grid-template-columns: repeat(3, 1fr); }
/* 7 venues: 4+3, centred last row */
/* 7 venues: 4-col grid, last row has 3 items auto-placed naturally */
.rb-venue-grid[data-count="7"]  { grid-template-columns: repeat(4, 1fr); }
/* Item 5 starts at col 1, item 6 col 2, item 7 col 3 — leaves col 4 empty on row 2.
   To avoid the gap, use 3+4 instead: 3 on row1, 4 on row2 */
/* Actually: items 1-4 fill row1, items 5-7 on row2.
   Centre the 3 items on row2 by offsetting item 5 */
.rb-venue-grid[data-count="7"] .rb-venue-card:nth-child(5) { grid-column-start: 1; }
/* 8 venues: 4×2 */
.rb-venue-grid[data-count="8"]  { grid-template-columns: repeat(4, 1fr); }
/* 9 venues: 3×3 */
.rb-venue-grid[data-count="9"]  { grid-template-columns: repeat(3, 1fr); }
/* 10 venues: 5×2 */
.rb-venue-grid[data-count="10"] { grid-template-columns: repeat(5, 1fr); }
.rb-venue-card {
  background: var(--rb-bg);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-sm);
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.35s;
}
.rb-venue-card:hover { border-color: var(--rb-primary); }
.rb-venue-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(var(--rb-primary-rgb), 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin: 0 auto 8px;
  overflow: hidden;
  transition: background 0.35s;
}
.rb-venue-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.rb-venue-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--rb-text);
  display: block;
  transition: color 0.35s;
}
.rb-venue-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  background: var(--rb-primary);
  color: var(--rb-btn-text, #000);
  padding: 4px 10px;
  border-radius: 4px;
  margin-top: 5px;
  letter-spacing: 0.3px;
}

/* ── Compare Table ── */
.rb-compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
  border-radius: var(--rb-radius);
  overflow: hidden;
  border: 1px solid var(--rb-border);
}
.rb-compare-table th {
  background: var(--rb-card2);
  color: var(--rb-text);
  padding: 14px 16px;
  text-align: left;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--rb-border);
  transition: background 0.35s, color 0.35s, border-color 0.35s;
  white-space: nowrap;
}
.rb-compare-table th.rb-col-ours {
  color: var(--rb-primary);
  background: rgba(var(--rb-primary-rgb), 0.07);
}
.rb-compare-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--rb-border);
  color: var(--rb-text);
  font-size: 15px;
  transition: color 0.35s, border-color 0.35s, background 0.35s;
  vertical-align: middle;
}
.rb-compare-table tbody tr:last-child td { border-bottom: none; }
.rb-compare-table tbody tr:hover td { background: rgba(var(--rb-primary-rgb), 0.04); }
.rb-compare-table td.rb-col-ours {
  color: var(--rb-primary);
  font-weight: 700;
  background: rgba(var(--rb-primary-rgb), 0.05);
}
.rb-compare-table td.rb-col-ours:hover { background: rgba(var(--rb-primary-rgb), 0.09); }
.rb-compare-table td.rb-col-other { color: var(--rb-muted); }
.rb-compare-table th:first-child { border-radius: var(--rb-radius) 0 0 0; }
.rb-compare-table th:last-child  { border-radius: 0 var(--rb-radius) 0 0; }

/* ── Promo Cards ── */
.rb-promo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.rb-promo-card {
  background: var(--rb-card2);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: border-color 0.2s, background 0.35s;
}
.rb-promo-card:hover { border-color: var(--rb-primary); }
.rb-promo-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(var(--rb-primary-rgb), 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  overflow: hidden;
  transition: background 0.35s;
}
.rb-promo-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.rb-promo-body { flex: 1; min-width: 0; }
.rb-promo-title { font-size: 15px; font-weight: 700; color: var(--rb-text); transition: color 0.35s; display: block; }
.rb-promo-desc { font-size: 13px; color: var(--rb-muted); margin-top: 3px; transition: color 0.35s; display: block; }
.rb-promo-value {
  font-size: 26px;
  font-weight: 900;
  color: var(--rb-primary);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}

/* ── FAQ / Q&A ── */
.rb-faq-item {
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius);
  margin-bottom: 8px;
  background: var(--rb-card2);
  overflow: hidden;
  transition: background 0.35s, border-color 0.35s;
}
.rb-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  cursor: pointer;
  gap: 12px;
  user-select: none;
}
.rb-faq-question h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--rb-text);
  flex: 1;
  transition: color 0.35s;
  margin: 0;
}
.rb-faq-arrow {
  font-size: 13px;
  color: var(--rb-primary);
  transition: transform 0.3s;
  flex-shrink: 0;
}
.rb-faq-item.open .rb-faq-arrow { transform: rotate(180deg); }
.rb-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.rb-faq-item.open .rb-faq-answer { max-height: 300px; }
.rb-faq-answer-inner {
  padding: 0 18px 16px;
  font-size: 14px;
  color: var(--rb-muted);
  line-height: 1.8;
  transition: color 0.35s;
}

/* ── Latest Posts ── */
.rb-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.rb-post-card {
  background: var(--rb-card2);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius);
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s, background 0.35s;
}
.rb-post-card:hover { transform: translateY(-3px); border-color: var(--rb-primary); }
.rb-post-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}
.rb-post-thumb-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--rb-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  transition: background 0.35s;
}
.rb-post-meta { padding: 14px; }
.rb-post-cat {
  font-size: 11px;
  font-weight: 700;
  color: var(--rb-primary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.rb-post-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--rb-text);
  margin: 6px 0;
  line-height: 1.45;
  display: block;
  transition: color 0.35s;
}
.rb-post-title:hover { color: var(--rb-primary); }
.rb-post-date { font-size: 12px; color: var(--rb-muted); transition: color 0.35s; }

/* ── Blog Index ── */
.rb-blog-header { padding: 48px 20px 32px; text-align: center; }
.rb-blog-header h1 { font-size: 32px; font-weight: 900; color: var(--rb-text); transition: color 0.35s; }
.rb-blog-header p { font-size: 14px; color: var(--rb-muted); margin-top: 8px; transition: color 0.35s; }

.rb-blog-layout { display: grid; grid-template-columns: 1fr; gap: 32px; }
.rb-blog-layout.has-sidebar { grid-template-columns: 4fr 1fr; }

/* .rb-blog-grid defined below in Blog Grid Layouts section */
.rb-blog-card {
  font-size: 15px;
  background: var(--rb-card);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius);
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s, background 0.35s;
}
.rb-blog-card:hover { transform: translateY(-3px); border-color: var(--rb-primary); }

/* ── Sidebar ── */
.rb-sidebar-widget {
  background: var(--rb-card);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius);
  padding: 18px;
  margin-bottom: 16px;
  transition: background 0.35s, border-color 0.35s;
}
.rb-widget-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--rb-text);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rb-border);
  transition: color 0.35s, border-color 0.35s;
}
.rb-tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.rb-tag {
  display: inline-block;
  background: var(--rb-card2);
  color: var(--rb-muted);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--rb-border);
  transition: all 0.2s;
  text-decoration: none;
}
.rb-tag:hover { border-color: var(--rb-primary); color: var(--rb-primary); }

/* ── Single Post ── */
.rb-article-layout { display: grid; grid-template-columns: 1fr; gap: 32px; }
.rb-article-layout.has-sidebar {
  grid-template-columns: 4fr 1fr;
  align-items: start; /* allow sidebar to be shorter than content column */
}

.rb-article-header {
  background: var(--rb-card);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius);
  padding: 28px;
  margin-bottom: 20px;
  transition: background 0.35s, border-color 0.35s;
}
.rb-article-cat {
  font-size: 11px;
  font-weight: 700;
  color: var(--rb-primary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
}
.rb-article-title {
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 900;
  color: var(--rb-text);
  line-height: 1.3;
  margin-bottom: 14px;
  transition: color 0.35s;
}
.rb-article-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--rb-muted);
  flex-wrap: wrap;
  transition: color 0.35s;
}
.rb-article-featured {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: var(--rb-radius-sm);
  margin-top: 20px;
}

/* TOC */
.rb-toc {
  background: var(--rb-card2);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius);
  padding: 18px;
  margin-bottom: 20px;
  transition: background 0.35s, border-color 0.35s;
}
.rb-toc-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--rb-text);
  margin-bottom: 10px;
  transition: color 0.35s;
}
.rb-toc ul { padding-left: 14px; list-style: none; }
.rb-toc li { margin-bottom: 4px; }
.rb-toc a { font-size: 13px; color: var(--rb-muted); transition: color 0.2s; display: block; padding: 2px 0; }
.rb-toc a:hover { color: var(--rb-primary); }

/* Article content */
.rb-article-content {
  background: var(--rb-card);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius);
  padding: 28px;
  transition: background 0.35s, border-color 0.35s;
}
.rb-article-content h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--rb-text);
  margin: 28px 0 12px;
  border-left: 4px solid var(--rb-primary);
  padding-left: 12px;
  transition: color 0.35s;
}
.rb-article-content h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--rb-text);
  margin: 20px 0 10px;
  transition: color 0.35s;
}
.rb-article-content p {
  font-size: 15px;
  color: var(--rb-text);
  line-height: 1.9;
  margin-bottom: 16px;
  transition: color 0.35s;
}
.rb-article-content ul,
.rb-article-content ol {
  padding-left: 20px;
  margin-bottom: 16px;
  list-style: disc;
}
.rb-article-content li { font-size: 14px; color: var(--rb-muted); line-height: 2; transition: color 0.35s; }
.rb-article-content a { color: var(--rb-primary); }
.rb-article-content blockquote {
  border-left: 3px solid var(--rb-primary);
  padding: 12px 18px;
  margin: 20px 0;
  background: rgba(var(--rb-primary-rgb), 0.06);
  border-radius: 0 var(--rb-radius-sm) var(--rb-radius-sm) 0;
  color: var(--rb-muted);
  font-style: italic;
}

/* ── Footer ── */
.rb-footer {
  background: var(--rb-card);
  border-top: 1px solid var(--rb-border);
  padding: 40px 0 20px;
  transition: background 0.35s, border-color 0.35s;
}
.rb-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}
.rb-footer-brand .rb-logo { font-size: 20px; margin-bottom: 12px; }
.rb-footer-brand .rb-logo .rb-logo-text { font-size: 20px; }
.rb-footer-brand .rb-logo .rb-logo-accent { color: var(--rb-primary); }
.rb-footer-desc { font-size: 14px; color: var(--rb-muted); line-height: 1.8; transition: color 0.35s; }
.rb-footer-col h4 {
  font-size: 12px;
  font-weight: 700;
  color: var(--rb-text);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 14px;
  transition: color 0.35s;
}
.rb-footer-col ul { list-style: none; }
.rb-footer-col li { margin-bottom: 8px; }
.rb-footer-col a { font-size: 14px; color: var(--rb-muted); transition: color 0.2s; }
.rb-footer-col a:hover { color: var(--rb-primary); }
.rb-footer-bottom {
  border-top: 1px solid var(--rb-border);
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.rb-footer-copyright { font-size: 13px; color: var(--rb-muted); transition: color 0.35s; }

/* ── Float CS ── */
.rb-float-cs {
  position: fixed;
  right: 20px;
  bottom: 86px;   /* above back-to-top: 20(btn) + 46(btn) + 20(gap) */
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 300;
}
.rb-cs-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  font-size: 20px;
  text-decoration: none;
  transition: transform 0.2s, opacity 0.2s;
  box-shadow: 0 3px 12px rgba(0,0,0,0.35);
}
.rb-cs-btn:hover { transform: scale(1.1); opacity: 0.9; color: #fff; }
.rb-cs-line { background: #06c755; }
.rb-cs-telegram { background: #229ed9; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .rb-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .rb-nav { display: none; }
  .rb-hamburger { display: block; }
  .rb-btn-join {
  color: var(--rb-btn-text, #000); display: none; }
  .rb-cat-grid { grid-template-columns: 1fr; }
  .rb-venue-grid { grid-template-columns: repeat(3, 1fr); }
  .rb-promo-grid { grid-template-columns: 1fr 1fr; }
  .rb-posts-grid { grid-template-columns: 1fr 1fr; }
  .rb-blog-layout.has-sidebar { grid-template-columns: 1fr; }
  .rb-blog-grid { grid-template-columns: 1fr; }
  .rb-article-layout.has-sidebar { grid-template-columns: 1fr; }
  .rb-footer-grid { grid-template-columns: 1fr 1fr; }
  .rb-compare-table th,
  .rb-compare-table td { font-size: 12px; padding: 8px 8px; }
}

@media (max-width: 480px) {
  .rb-hero { padding: 40px 16px 32px; }
  .rb-stats { flex-wrap: wrap; }
  .rb-stat { min-width: 50%; border-bottom: 1px solid var(--rb-border); }
  .rb-stat:nth-child(odd) { border-right: 1px solid var(--rb-border); }
  .rb-cat-grid { grid-template-columns: 1fr; }
  .rb-posts-grid { grid-template-columns: 1fr; }
  .rb-footer-grid { grid-template-columns: 1fr; }
  .rb-footer-bottom { flex-direction: column; text-align: center; }
}

/* ── v3 Additions ── */

/* Marquee always white text */
.rb-marquee { color: #ffffff !important; }

/* Button text color from Customizer (overrides hardcoded values) */
.rb-btn-join,
.rb-btn-primary,
.rb-venue-tag,
.rb-promo-value { color: var(--rb-primary) !important; }

/* Cat icon: support image */
.rb-cat-icon { position: relative; overflow: hidden; }
.rb-cat-icon img.rb-icon-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
}
.rb-venue-icon { position: relative; overflow: hidden; }
.rb-venue-icon img.rb-icon-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
}

/* Image upload overlay on icons */
.rb-icon-upload-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.rb-icon-upload-wrap input[type="file"] {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.rb-icon-upload-wrap:hover::after {
  content: '換圖';
  position: absolute; inset: 0;
  background: rgba(0,0,0,.5);
  color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}

/* Mobile: 1 col for cat-grid */
@media (max-width: 768px) {
  .rb-cat-grid { grid-template-columns: 1fr !important; }
  .rb-cat-icon { width: 48px; height: 48px; font-size: 22px; }
}

/* ── CTA Card (article sidebar) ── */
.rb-cta-card {
  background: linear-gradient(135deg, rgba(var(--rb-primary-rgb),0.15) 0%, var(--rb-card2) 100%);
  border: 1.5px solid var(--rb-primary);
  border-radius: var(--rb-radius);
  padding: 22px 18px;
  text-align: center;
  margin-bottom: 16px;
  transition: background 0.35s, border-color 0.35s;
}
.rb-cta-icon { font-size: 36px; margin-bottom: 10px; }
.rb-cta-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--rb-text);
  margin-bottom: 8px;
  line-height: 1.3;
  transition: color 0.35s;
}
.rb-cta-desc {
  font-size: 13px;
  color: var(--rb-muted);
  margin-bottom: 16px;
  line-height: 1.7;
  transition: color 0.35s;
}
.rb-cta-value {
  font-size: 32px;
  font-weight: 900;
  color: var(--rb-primary);
  display: block;
  margin-bottom: 14px;
  line-height: 1;
}
.rb-cta-btn {
  display: block;
  background: var(--rb-primary);
  color: var(--rb-btn-text, #000);
  border: none;
  border-radius: var(--rb-radius-sm);
  padding: 12px 20px;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  transition: opacity 0.2s;
  cursor: pointer;
}
.rb-cta-btn:hover { opacity: 0.85; color: var(--rb-btn-text, #000); }

/* posts grid responsive */
@media (max-width: 900px) {
  .rb-posts-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .rb-posts-grid { grid-template-columns: 1fr; }
  .rb-promo-card { flex-direction: column; align-items: flex-start; gap: 10px; }
  .rb-promo-value { font-size: 22px; }
}

/* ══════════════════════════════════════════
   Section Glow Effects
   奇數區塊：左側光暈　偶數區塊：右側光暈
══════════════════════════════════════════ */

.rb-section {
  position: relative;
  overflow: hidden; /* clip glows that bleed outside section */
}

/* Left glow (odd sections) - homepage only, excluded on single posts */
body:not(.single) .rb-section::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -80px;
  transform: translateY(-50%);
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(var(--rb-primary-rgb), 0.10) 0%,
    rgba(var(--rb-primary-rgb), 0.04) 45%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
  transition: background 0.4s;
}

/* Right glow (even sections) */
body:not(.single) .rb-section::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -80px;
  transform: translateY(-50%);
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(var(--rb-primary-rgb), 0.08) 0%,
    rgba(var(--rb-primary-rgb), 0.03) 45%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
  transition: background 0.4s;
}

/* Even sections: flip — left fades, right brightens */
body:not(.single) .rb-section:nth-child(even)::before {
  opacity: 0.4;
  left: auto;
  right: -100px;
  width: 360px;
  height: 360px;
}
body:not(.single) .rb-section:nth-child(even)::after {
  opacity: 0;
}

/* Make sure section inner content sits above glow */
.rb-section > .rb-container {
  position: relative;
  z-index: 1;
}

/* Compare table wrapper needs z-index too */
.rb-section > .rb-container > * {
  position: relative;
  z-index: 1;
}

/* Special: FAQ section — subtle centered glow */
body:not(.single) #rb-faq::before {
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
  width: 700px;
  height: 300px;
  opacity: 0.6;
  background: radial-gradient(
    ellipse at center,
    rgba(var(--rb-primary-rgb), 0.07) 0%,
    transparent 65%
  );
}
body:not(.single) #rb-faq::after { opacity: 0; }

/* Special: Compare section — diagonal twin glow */
body:not(.single) #rb-brand-compare::before {
  top: 20%;
  left: -80px;
  width: 350px;
  height: 350px;
  opacity: 0.9;
}
body:not(.single) #rb-brand-compare::after {
  top: 60%;
  right: -80px;
  width: 300px;
  height: 300px;
  opacity: 0.7;
}

/* Special: Latest posts — top-right accent */
body:not(.single) #rb-latest-posts::before {
  top: -60px;
  left: auto;
  right: 10%;
  width: 320px;
  height: 320px;
  opacity: 0.7;
}
body:not(.single) #rb-latest-posts::after {
  bottom: -60px;
  top: auto;
  left: 5%;
  right: auto;
  width: 280px;
  height: 280px;
  opacity: 0.5;
  transform: none;
}

/* Special: Promos — left strong glow */
body:not(.single) #rb-promos::before {
  left: -60px;
  top: 40%;
  width: 420px;
  height: 420px;
  opacity: 1;
  background: radial-gradient(
    ellipse at center,
    rgba(var(--rb-primary-rgb), 0.11) 0%,
    rgba(var(--rb-primary-rgb), 0.04) 50%,
    transparent 70%
  );
}
body:not(.single) #rb-promos::after {
  right: -60px;
  top: 60%;
  width: 280px;
  height: 280px;
  opacity: 0.6;
}

/* SEO block: subtle bottom-center */
body:not(.single) #rb-seo-text::before {
  left: 50%;
  top: auto;
  bottom: -80px;
  transform: translateX(-50%);
  width: 600px;
  height: 250px;
  opacity: 0.8;
  background: radial-gradient(
    ellipse at center,
    rgba(var(--rb-primary-rgb), 0.08) 0%,
    transparent 65%
  );
}
body:not(.single) #rb-seo-text::after { opacity: 0; }

/* Game cats: right side glow */
body:not(.single) #rb-game-cats::before {
  left: auto;
  right: -80px;
  top: 30%;
  width: 440px;
  height: 440px;
  opacity: 0.85;
}
body:not(.single) #rb-game-cats::after {
  left: -60px;
  right: auto;
  top: 65%;
  width: 300px;
  height: 300px;
  opacity: 0.5;
  transform: none;
}

/* ── Single Post Page: full-page background glows ── */
body.single::before,
body.single::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  transition: background 0.4s;
}
body.single::before {
  top: 15%;
  left: -180px;
  width: 520px;
  height: 520px;
  background: radial-gradient(
    ellipse at center,
    rgba(var(--rb-primary-rgb), 0.07) 0%,
    rgba(var(--rb-primary-rgb), 0.03) 50%,
    transparent 70%
  );
}
body.single::after {
  bottom: 10%;
  right: -180px;
  width: 480px;
  height: 480px;
  background: radial-gradient(
    ellipse at center,
    rgba(var(--rb-primary-rgb), 0.06) 0%,
    rgba(var(--rb-primary-rgb), 0.02) 50%,
    transparent 70%
  );
}

/* ── Logo styles ── */
.rb-logo { display: flex; align-items: center; text-decoration: none; }

/* Text logo */
.rb-logo-text {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--rb-text);
  transition: color 0.35s;
  line-height: 1;
}
.rb-logo-accent { color: var(--rb-primary); }

/* Image logo (custom_logo output) */
.rb-logo img,
.rb-logo .custom-logo,
.rb-logo .custom-logo-link img {
  height: 44px !important;
  max-height: 44px !important;
  width: auto !important;
  max-width: 180px !important;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
.rb-header {
  overflow: visible;
}
.rb-header-inner {
  align-items: center;
  overflow: visible;
}
.custom-logo-link {
  display: flex;
  align-items: center;
  line-height: 0;
  flex-shrink: 0;
  overflow: hidden;
  max-width: 180px;
  height: 64px;
}
/* Logo text version also constrained */
.rb-logo-text {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--rb-text);
  transition: color 0.35s;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  display: block;
}
/* Logo accent: first word/part in primary color */
.rb-logo-text .rb-logo-accent {
  color: var(--rb-primary);
}

/* ── LINE CS button text style ── */
.rb-cs-line { background: #06c755; }

/* ── Compare table symbol colors ── */
.rb-compare-table td.rb-col-ours {
  /* already primary color — override for symbol styling */
}
/* Color the ✔ ✘ △ symbols regardless of which column they're in */
/* Symbol colors — use !important to beat td.rb-col-ours primary color */
.rb-compare-table td .rb-check,
.rb-compare-table td.rb-col-ours .rb-check,
.rb-compare-table td.rb-col-other .rb-check { color: #22c55e !important; font-weight: 800; }
/* Dark mode: keep same bright green — works on dark bg */

.rb-compare-table td .rb-cross,
.rb-compare-table td.rb-col-ours .rb-cross,
.rb-compare-table td.rb-col-other .rb-cross { color: #d32f2f !important; font-weight: 800; }

.rb-compare-table td .rb-warn,
.rb-compare-table td.rb-col-ours .rb-warn,
.rb-compare-table td.rb-col-other .rb-warn  { color: #e65100 !important; font-weight: 800; }
/* Auto-color via CSS content detection workaround:
   We'll wrap symbols in PHP template */

/* ── Back to Top Button ── */
.rb-back-top {
  position: fixed;
  right: 20px;
  bottom: 20px;   /* always at bottom-right corner */
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--rb-card2);
  border: 1.5px solid var(--rb-border);
  color: var(--rb-text);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 300;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s, transform 0.3s, background 0.2s, border-color 0.2s, color 0.35s;
  pointer-events: none;
  box-shadow: 0 3px 12px rgba(0,0,0,0.25);
}
.rb-back-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.rb-back-top:hover {
  background: var(--rb-primary);
  border-color: var(--rb-primary);
  color: var(--rb-btn-text, #000);
}
/* Mobile: slightly smaller gap */
@media (max-width: 768px) {
  .rb-back-top { right: 14px; bottom: 14px; }
  .rb-float-cs { right: 14px; bottom: 78px; }
}

@media (max-width: 768px) {
  .rb-marquee { font-size: 11px; padding: 5px 0; }
}
@media (max-width: 480px) {
  .rb-marquee { font-size: 10px; padding: 4px 0; }
}

/* ── Blog Magazine Layout ── */
.rb-blog-magazine .rb-blog-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.rb-blog-magazine .rb-blog-card .rb-post-thumb,
.rb-blog-magazine .rb-blog-card .rb-post-thumb-placeholder {
  width: 160px;
  min-width: 160px;
  height: 100px;
  border-radius: var(--rb-radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}
.rb-blog-magazine .rb-blog-card .rb-post-meta {
  padding: 4px 0;
}
@media (max-width: 480px) {
  .rb-blog-magazine .rb-blog-card { flex-direction: column; }
  .rb-blog-magazine .rb-blog-card .rb-post-thumb,
  .rb-blog-magazine .rb-blog-card .rb-post-thumb-placeholder {
    width: 100%; min-width: unset; height: 140px;
  }
}

/* ══════════════════════════════
   Blog Grid Layouts
══════════════════════════════ */

/* 2-col (default) */
.rb-blog-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }

/* 3-col */
.rb-blog-grid.rb-blog-3col { grid-template-columns: repeat(3,1fr); }

/* Masonry via CSS columns */
.rb-blog-grid.rb-blog-masonry {
  display: block;
  column-count: 2;
  column-gap: 16px;
}
.rb-blog-masonry .rb-blog-card {
  break-inside: avoid;
  margin-bottom: 16px;
  display: inline-block; /* needed for columns layout */
  width: 100%;
}

/* ── Pagination ── */
.rb-pagination { margin-top: 40px; display: flex; justify-content: center; }
.rb-pagination .page-numbers {
  display: flex;
  gap: 6px;
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
  justify-content: center;
}
.rb-pagination .page-numbers li a,
.rb-pagination .page-numbers li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: var(--rb-radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--rb-muted);
  background: var(--rb-card);
  border: 1px solid var(--rb-border);
  text-decoration: none;
  transition: all 0.2s;
}
.rb-pagination .page-numbers li a:hover {
  color: var(--rb-primary);
  border-color: var(--rb-primary);
  background: rgba(var(--rb-primary-rgb), 0.06);
}
.rb-pagination .page-numbers li span.current {
  background: var(--rb-primary);
  color: var(--rb-btn-text, #000);
  border-color: var(--rb-primary);
}
.rb-pagination .page-numbers li .dots {
  border: none;
  background: transparent;
  color: var(--rb-muted);
  cursor: default;
}
.rb-pagination .prev, .rb-pagination .next {
  font-size: 13px;
}

/* Mobile blog grid */
@media (max-width: 768px) {
  .rb-blog-grid.rb-blog-3col { grid-template-columns: repeat(2,1fr); }
  .rb-blog-grid.rb-blog-masonry { column-count: 1; }
}
@media (max-width: 480px) {
  .rb-blog-grid,
  .rb-blog-grid.rb-blog-3col { grid-template-columns: 1fr; }
}

/* ══════════════════════════════
   Article TOC collapsible
══════════════════════════════ */
.rb-toc {
  background: var(--rb-card2);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius);
  margin-bottom: 20px;
  overflow: hidden;
  transition: background 0.35s, border-color 0.35s;
}
.rb-toc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
}
.rb-toc-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--rb-text);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.35s;
}
.rb-toc-toggle {
  font-size: 12px;
  color: var(--rb-primary);
  transition: transform 0.3s;
  flex-shrink: 0;
}
.rb-toc.open .rb-toc-toggle { transform: rotate(180deg); }
.rb-toc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.rb-toc.open .rb-toc-body { max-height: 600px; }
.rb-toc-body-inner { padding: 0 18px 16px; }
.rb-toc ul { padding-left: 14px; list-style: none; }
.rb-toc li { margin-bottom: 5px; }
.rb-toc a { font-size: 13px; color: var(--rb-muted); transition: color 0.2s; display: block; padding: 2px 0; }
.rb-toc a:hover { color: var(--rb-primary); }

/* ── Article section: must not have overflow:hidden for sticky sidebar ── */
.single .rb-section { overflow: visible; }

/* ── Sticky Sidebar ── */
.rb-article-layout.has-sidebar .rb-sidebar,
.rb-blog-layout.has-sidebar    .rb-sidebar {
  position: sticky;
  top: 80px; /* below fixed header (64px) + 16px gap */
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rb-border) transparent;
  align-self: start;
}
.rb-article-layout.has-sidebar .rb-sidebar::-webkit-scrollbar { width: 4px; }
.rb-article-layout.has-sidebar .rb-sidebar::-webkit-scrollbar-thumb { background: var(--rb-border); border-radius: 2px; }

/* ══════════════════════════════
   Game Category Sidebar Widget
══════════════════════════════ */
.rb-game-widget {
  background: var(--rb-card);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius);
  overflow: hidden;
  margin-bottom: 16px;
  transition: background 0.35s, border-color 0.35s;
}
.rb-game-widget-header {
  background: var(--rb-primary);
  padding: 5px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rb-game-widget-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--rb-btn-text, #000);
  letter-spacing: 0.5px;
}
.rb-game-widget-list {
  list-style: none;
  padding: 6px 0;
}
.rb-game-widget-item {
  border-bottom: 1px solid var(--rb-border);
  transition: border-color 0.35s;
}
.rb-game-widget-item:last-child { border-bottom: none; }
.rb-game-widget-item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 18px;
  text-decoration: none;
  transition: background 0.2s;
}
.rb-game-widget-item a:hover {
  background: rgba(var(--rb-primary-rgb), 0.06);
}
.rb-game-widget-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--rb-text);
  transition: color 0.35s;
}
.rb-game-widget-item a:hover .rb-game-widget-name {
  color: var(--rb-primary);
}
.rb-game-widget-badge {
  font-size: 11px;
  font-weight: 700;
  background: rgba(var(--rb-primary-rgb), 0.15);
  color: var(--rb-primary);
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.rb-game-widget-item a:hover .rb-game-widget-badge {
  background: var(--rb-primary);
  color: var(--rb-btn-text, #000);
}

/* ══════════════════════════════
   Popular Posts Sidebar Widget
══════════════════════════════ */
.rb-popular-widget {
  background: var(--rb-card);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius);
  overflow: hidden;
  margin-bottom: 16px;
  transition: background 0.35s, border-color 0.35s;
}
.rb-popular-widget-header {
  background: var(--rb-primary);
  padding: 5px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rb-popular-widget-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--rb-btn-text, #000);
  letter-spacing: 0.5px;
}
.rb-popular-list {
  list-style: none;
  padding: 6px 0;
}
.rb-popular-item {
  border-bottom: 1px solid var(--rb-border);
  transition: border-color 0.35s;
}
.rb-popular-item:last-child { border-bottom: none; }
.rb-popular-item a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  text-decoration: none;
  transition: background 0.2s;
}
.rb-popular-item a:hover { background: rgba(var(--rb-primary-rgb), 0.06); }
.rb-popular-thumb {
  width: 54px;
  height: 54px;
  border-radius: var(--rb-radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.rb-popular-thumb-placeholder {
  width: 54px;
  height: 54px;
  border-radius: var(--rb-radius-sm);
  background: rgba(var(--rb-primary-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  transition: background 0.35s;
}
.rb-popular-info { flex: 1; min-width: 0; }
.rb-popular-post-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--rb-text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s;
}
.rb-popular-item a:hover .rb-popular-post-title { color: var(--rb-primary); }
.rb-popular-date { display: none; }

/* ── Mobile: sidebar shows below article content ── */
@media (max-width: 768px) {
  .rb-article-layout.has-sidebar {
    grid-template-columns: 1fr;
  }
  /* Sidebar visible but compact on mobile */
  .rb-article-layout.has-sidebar .rb-sidebar {
    display: block;
    position: static; /* disable sticky on mobile */
    max-height: none;
    overflow-y: visible;
  }
  /* Sidebar widgets side-by-side on mobile to save space */
  .rb-article-layout.has-sidebar .rb-sidebar .rb-cta-card,
  .rb-article-layout.has-sidebar .rb-sidebar .rb-popular-widget,
  .rb-article-layout.has-sidebar .rb-sidebar .rb-game-widget,
  .rb-article-layout.has-sidebar .rb-sidebar .rb-sidebar-widget {
    margin-bottom: 12px;
  }
}

/* ── Mobile article padding ── */
@media (max-width: 768px) {
  .single .rb-container { padding: 0 14px; }
}