/* =====================================================================
   DHARMACYCLE — Dark UI redesign (Phase 2)
   Lấy cảm hứng bố cục/tông màu từ azgames.io, giữ màu thương hiệu cam
   (#D47D36) của dharmacycle.biz làm điểm nhấn thay vì copy màu của họ.
   Code CSS này viết mới hoàn toàn cho theme con dharmacycle-child.
   ===================================================================== */

:root {
  --dc-bg: #17171b;
  --dc-bg-elevated: #1f1f25;
  --dc-bg-card: #24242b;
  --dc-orange: #D47D36;
  --dc-orange-light: #E89A5C;
  --dc-cream: #F2F0E8;
  --dc-text-dim: #9a9aa2;
  --dc-border: #303038;
  --dc-hot: #E2543D;
}

/* ---- Global background ---- */
body {
  background-color: var(--dc-bg) !important;
  color: var(--dc-cream) !important;
}

/* ---- Header top bar (search / follow us) ---- */
.hdcn-1 {
  background-color: var(--dc-bg-elevated) !important;
  border-bottom: 1px solid var(--dc-border);
}
.hdcn-1 a,
.hdcn-1 .fa-search,
.hdcn-1 .fa-share-alt {
  color: var(--dc-text-dim) !important;
}
.hdcn-1 a:hover {
  color: var(--dc-orange-light) !important;
}

/* ---- Logo band ---- */
.hdcn-2 {
  background-color: var(--dc-bg-elevated) !important;
  border-bottom: 1px solid var(--dc-border);
}

/* ---- Category nav bar (hdcn-3 / nav.menu) ---- */
.hdcn-3 {
  background-color: #0f0f12 !important;
  border-bottom: 1px solid var(--dc-border);
}
.hdcn-3 nav.menu > ul {
  display: flex;
  flex-wrap: wrap;
}
.hdcn-3 nav.menu > ul > li > a {
  display: inline-block;
  padding: 14px 16px !important;
  font-weight: 600;
  color: var(--dc-text-dim) !important;
  border-bottom: 3px solid transparent;
  transition: all .15s;
}
.hdcn-3 nav.menu > ul > li > a:hover {
  color: var(--dc-orange-light) !important;
  border-bottom-color: var(--dc-orange);
}
.hdcn-3 .rndgame {
  color: var(--dc-orange-light) !important;
}

/* ---- Section headings (.titl used for Promoted Games / category boxes) ---- */
.titl {
  color: var(--dc-cream) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--dc-border) !important;
}
.titl strong {
  color: var(--dc-orange-light) !important;
}

/* ---- Intro / welcome + category-list SEO section (Nhóm 1) ---- */
.site-intro {
  background: var(--dc-bg-elevated);
  border-radius: 16px;
  padding: 24px 28px !important;
}
.site-intro,
.site-intro p {
  color: var(--dc-text-dim) !important;
}
h1.dc-h1 {
  color: var(--dc-cream) !important;
}
.site-intro h2 {
  color: var(--dc-orange-light) !important;
}
.site-intro ul li {
  border-bottom-color: var(--dc-border) !important;
}

/* ---- Game cards: ul.lst-gams li .gmcn-midl (and other size variants) ---- */
[class*="gmcn-"] {
  background-color: var(--dc-bg-card) !important;
  border-radius: 14px !important;
  overflow: hidden;
  border: 1px solid var(--dc-border);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
[class*="gmcn-"]:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.45);
  border-color: var(--dc-orange);
}
[class*="gmcn-"] .gm-imag {
  border-radius: 0 !important;
}
[class*="gmcn-"] .gm-titl a {
  color: var(--dc-cream) !important;
  font-weight: 700;
}
[class*="gmcn-"] .gm-cate a {
  color: var(--dc-orange-light) !important;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
}

/* ---- Sidebar widgets ---- */
.sdbr-cn {
  background-color: var(--dc-bg-elevated) !important;
  border-radius: 14px;
}
.sdbr-cn .tagcloud a {
  background-color: var(--dc-bg-card) !important;
  color: var(--dc-cream) !important;
  border-radius: 6px;
}

/* ---- Footer ---- */
.ftcn-1 {
  background-color: var(--dc-bg-elevated) !important;
}
.ftcn-2 {
  background-color: #0f0f12 !important;
}
.ftcn-2 .cont,
.ftcn-2 a {
  color: var(--dc-text-dim) !important;
}
.ftcn-2 a:hover {
  color: var(--dc-orange-light) !important;
}

/* ---- News ticker ---- */
.news-cn {
  background-color: #0f0f12 !important;
  border-bottom: 1px solid var(--dc-border);
}

/* ---- Buttons / form controls ---- */
[class*="botn"],
button,
input[type="submit"] {
  border-radius: 8px !important;
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
  .hdcn-3 nav.menu > ul > li > a {
    padding: 10px 12px !important;
    font-size: 13px;
  }
}


/* ---- Sidebar wrapper (fixes white gap below widgets) ---- */
.bdcn {
  background-color: var(--dc-bg) !important;
}

/* ---- Social icon list (footer / header "Follow us") ---- */
.lst-social {
  background-color: transparent !important;
}
.lst-social a {
  color: var(--dc-text-dim) !important;
}
.lst-social a:hover {
  color: var(--dc-orange-light) !important;
}

/* ---- Custom "Sort by" dropdown (selecter.js) ---- */
.selecter-element,
.selecter-options,
.selecter-selected {
  background-color: var(--dc-bg-card) !important;
  color: var(--dc-cream) !important;
  border-color: var(--dc-border) !important;
}
.selecter-item {
  color: var(--dc-cream) !important;
}
.selecter-item:hover,
.selecter-item.selected {
  background-color: var(--dc-bg-elevated) !important;
  color: var(--dc-orange-light) !important;
}

/* ---- Lazy-load image placeholder (avoid white flash) ---- */
img.background-placeholder {
  background-color: var(--dc-bg-card) !important;
}


/* ---- Favorite (heart) button injected by favorites.js ---- */
.dc-fav-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  width: 30px;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background-color: rgba(23, 23, 27, 0.65);
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.dc-fav-btn:hover {
  background-color: rgba(23, 23, 27, 0.9);
  transform: scale(1.08);
}
.dc-fav-btn svg {
  fill: none;
  stroke: var(--dc-cream);
  stroke-width: 2;
  transition: fill .15s ease, stroke .15s ease;
}
.dc-fav-btn.is-fav svg {
  fill: var(--dc-orange);
  stroke: var(--dc-orange);
}

/* ---- Favorites counter badge (optional nav use) ---- */
.dc-fav-nav-count {
  display: none;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 4px;
  border-radius: 8px;
  background-color: var(--dc-orange);
  color: #17171b;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* ---- "New" badge injected by badges.js (top-left, mirrors the favorite
   heart which sits top-right) ---- */
.dc-new-badge {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 5 !important;
  width: auto !important;
  height: auto !important;
  padding: 3px 8px !important;
  margin: 0 !important;
  border-radius: 5px !important;
  background-color: var(--dc-orange) !important;
  color: #17171b !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.4 !important;
  text-align: left !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35) !important;
}

/* ---- "Trending" badge injected by trending.js (same top-left slot as
   the "New" badge; trending.js skips cards that already show "New" so
   the two never stack). Uses !important from the start - the parent
   theme has a rule targeting bare <span> elements inside small-size
   game cards that otherwise wins on specificity and mispositions it. ---- */
.dc-trending-badge {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 5 !important;
  width: auto !important;
  height: auto !important;
  padding: 3px 8px !important;
  margin: 0 !important;
  border-radius: 5px !important;
  background-color: var(--dc-hot) !important;
  color: #17171b !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.4 !important;
  text-align: left !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35) !important;
}