/* ==============================================================
   ORANGE-YELLOW  NEON  •  deep black + warm neon accent
   ============================================================== */
:root{
  /* 🖤  dark structure */
  --color1:#18140c;          /* body / main bg  (pure black-gold tint)  */
  --color2:#18140c;          /* cards / sidebar */
  --color3:#251e11;          /* dropdown / input */
  --color4:#3a301d;          /* hover shade     */
 
  --accent1:#ffb400;         /* bright saffron  */
  --accent2:#ff8c00;         /* deep amber → makes a nice gradient */

  /* Do NOT change the name — other CSS reuses it */
  --linear:linear-gradient(270deg,var(--accent1) 0%,var(--accent2) 100%);

  /* text & links */
  --text-primary:#f9f9f7;
  --text-body:rgba(249,249,247,0.78);
  --a-color:var(--accent1);
  --a-hover:#ffd066;         /* slightly lighter */

  /* sidebar link hover colours */
  --side-a:rgba(255,255,255,0.85);
  --side-a-hover:#2f2816;
}
/* ----- default height for the top banner slot ---- */
#ya-banner-top{
    min-height:120px;      /* 120 px works for adaptive banners */
    width:100%;
    text-align:center;
}
html {
	background: var(--color1);
}
body {
	color: var(--text-body);
}
a {
	color: var(--a-color);
}
a:hover {
	color: var(--a-hover);
}
h1, h2, h3, h4 {
	color: var(--text-primary);
}
.left-sidebar {
	background: var(--color2);
}
.g-content {
	background: var(--color1);
}
.search-bar input.search {
	background: var(--color2);
    color: var(--text-secondary);
}
.game-item {
	background: var(--color2);
}
/* icon rings + play pill in the grid */
/* accent rings & play-button pills */
.g-icon      { background:var(--accent1); }
.list-b-play { background:var(--accent1); }
a.nav-link.dropdown-toggle.show {
	background: var(--color3);
}
.dropdown-menu {
	background: var(--color3);
}
.dropdown-menu .dropdown-item:hover {
	background: var(--color4);
}
.category-description {
	background: var(--color2);
}
.page-link.active, .page-link:hover {
	background: var(--color2);
}
.user-dropdown {
	background: var(--color3);
}
.user-dropdown::before {
	background: var(--color3);
}
.user-dropdown .item a:hover {
	background: var(--color4);
}
.sm-widget {
	background: var(--color2);
}
.header-right .btn-capsule {
	background: var(--color2);
}
.game-info .btn-circle {
	background: var(--color2);
}
table.scoreboard thead, table.scoreboard thead th {
	background: var(--color2);
}
table.scoreboard tbody, table.scoreboard tbody th, table.scoreboard tbody td {
	background: var(--color3);
}
.ad-slot{padding:24px 0} 
.cat-item, .tag-item {
	background: var(--color2);
}
.jquery-comments .textarea-wrapper .textarea {
	background: var(--color2);
}
.leaderboard-row {
	background: var(--color2);
}
.post-list-card {
	background: var(--color2);
}
.user-page .section {
	background-color: var(--color2);
}
.profile-comment-item {
  border: 1px solid var(--color3);
}
input.form-control, textarea.form-control {
	background: var(--color3);
}
input.form-control:active, input.form-control:hover, textarea.form-control:active, textarea.form-control:hover {
	background: var(--color3);
}
/* Yandex containers – give them room so “no-fill” overlay is visible */
#ya-banner-top{ min-height:120px; background:#25314a33; }
#ya-feed-1   { min-height:250px; background:#25314a33; }

.header,                      /* desktop sticky bar */
.header-area,                 /* landing “hero” bar */
.side-header,                 /* mobile burger bar */
.top-nav,                     /* tiny nav container */
#mainNav,                     /* actual <nav> element */
.left-sidebar .site-logo,     /* darken logo strip so blue bg disappears */
.search-bar input.search      /* darken search box */
{ background: var(--color2) !important; }

/* Search-box placeholder & icon colours */
.search-bar input.search  { color: var(--text-body) !important; }
.search-bar .bi-search    { color: var(--accent1) !important; }

/* Hover pill in the header menu */
li.nav-item:hover,
li.nav-item a.nav-link:hover { background: var(--color4) !important; }

/* Star rating → neon */
.star-on { color: var(--accent1) !important; }

/* Scrollbar thumb accent */
::-webkit-scrollbar-thumb { background: var(--accent2) !important; }

.g-content,
.master,
html,
body                     { background: var(--color1) !important; }

/* Optional – search-box container ring if you’d like it darker too */
.search-bar              { background: var(--color2) !important; }
.g-content section           { background: var(--color1) !important; }

/* Darken the wide centre strip (all wrappers) --------------------- */
.g-content section,
.g-content .mid-ct,                /* <div class="mid-ct">… */
.g-content section.mid-ct,         /* <section class="mid-ct">… */
.g-content .mid-ct[class*="section-"] /* mid-ct.section-xxx      */
{ background: var(--color1) !important; }
.container-section { background: var(--color1) !important; }

/* ===== Ensure mobile view uses the same accent ==================== */
@media (max-width: 768px){
    :root{
        --accent1:#ffb400;   /* neon yellow */
        --accent2:#ff8c00;   /* amber */
    }

    .g-icon,
    .list-b-play,
    .btn,
    .btn-capsule,
    .btn-circle,
    .left-categories li a::before,
    .left-categories .category-item.active a {
        background: var(--accent1) !important;
        background-image: var(--linear) !important;
        border-color: var(--accent1) !important;
    }

    /* ✅ Fix mobile sidebar background */
    .left-sidebar,
    .left-categories,
    .left-sidebar .side-header {
        background: var(--color2) !important;
    }
}