/* 365Cuci visual layer. Loaded after the preserved structural stylesheet. */
:root {
  --forest: #207000;
  --evergreen: #145040;
  --brown: #604010;
  --gold: #D4AF37;
  --cream: #FFFDF0;
  --charcoal: #101010;
}

body { background: var(--cream); color: var(--charcoal); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* Local icon glyphs keep the shell self-contained in offline preview. */
.fa::before,
.fas::before,
.fab::before { display: inline-block; width: 1.1em; text-align: center; font-style: normal; }
.fa-home::before { content: '\2302'; }
.fa-star::before { content: '\2605'; }
.fa-user::before { content: '\25CF'; }
.fa-calendar-alt::before { content: '\25A3'; }
.fa-eye::before { content: '\25C9'; }
.fa-tags::before { content: '\25C6'; }
.fa-facebook-f::before { content: 'f'; font-weight: 700; }
.fa-twitter::before { content: 'X'; font-weight: 700; }
.fa-whatsapp::before { content: '\25C9'; }

.header { background: var(--cream); border-bottom: 1px solid rgba(212,175,55,.45); }
.logo img { width: auto; max-width: 100%; height: auto; max-height: 70px; }
.nav-container { background: var(--evergreen); border-top-color: rgba(212,175,55,.5); }
.nav-link { color: var(--white); }
.nav-link:hover { color: var(--gold); }
.nav-icon { color: var(--gold); }

.btn-register,
.btn-join-now { background: var(--forest); color: var(--white); border: 1px solid var(--forest); }
.btn-register:hover,
.btn-join-now:hover { background: var(--evergreen); color: var(--white); box-shadow: 0 5px 14px rgba(20,80,64,.28); }
.btn-login { color: var(--brown); border-color: var(--brown); background: transparent; }
.btn-login:hover { background: var(--brown); color: var(--white); }

.mobile-auth-buttons { background: var(--evergreen); border-top-color: rgba(212,175,55,.5); }
.mobile-auth-buttons .btn-login { color: var(--white); border-color: var(--gold); }
.side-nav { background: var(--cream); }
.side-nav .nav-link { color: var(--charcoal); }
.side-nav .nav-link:hover { color: var(--evergreen); background: rgba(32,112,0,.1); }
.side-nav .nav-icon,
.side-nav .fa { color: var(--forest); }

.banner-section .swiper { background: var(--evergreen); border: 1px solid rgba(212,175,55,.5); }
.banner-section .swiper-slide img { object-fit: contain; object-position: center; background: var(--evergreen); }
.banner-section .swiper-button-next,
.banner-section .swiper-button-prev { color: var(--gold); text-shadow: 0 2px 5px rgba(0,0,0,.65); }
.banner-section .swiper-pagination-bullet { background: var(--cream); }
.banner-section .swiper-pagination-bullet-active { background: var(--gold); }

.stat-item,
.intro-section,
.body-text-section,
.article-card,
.game-cat-card,
.about-section,
.list-article-card,
.article-body,
.sidebar-widget { border-color: rgba(212,175,55,.28); }
.stat-item:hover,
.article-card:hover,
.game-cat-card:hover,
.list-article-card:hover { border-color: var(--gold); }
.stat-icon,
.cat-icon { background: var(--evergreen); color: var(--white); box-shadow: inset 0 0 0 1px rgba(212,175,55,.65); }

.intro-section h1,
.body-text-section h2,
.about-section h2,
.article-title { color: var(--evergreen); }
.body-text-section h2 { font-size: 20px; margin: 20px 0 10px; }
.body-text-section h2:first-child { margin-top: 0; }
.articles-section h2,
.game-categories-section h2 { border-left-color: var(--forest); }

.wide-banner { background: var(--evergreen); border: 1px solid rgba(212,175,55,.55); box-shadow: var(--shadow-md); }
.wide-banner img { object-fit: contain; }
.cat-stat-box,
.join-now-box,
.seo-cta { background: rgba(32,112,0,.08); border-color: rgba(32,112,0,.25); }
.cat-tag { background: var(--cream); }
.read-more-btn { background: var(--forest); color: var(--white); }
.read-more-btn:hover { background: var(--evergreen); color: var(--white); }

.site-footer { background: var(--evergreen); border-top: 3px solid var(--gold); }
.footer-col { background: var(--cream); border: 1px solid rgba(212,175,55,.35); }
.footer-info-block a,
.footer-links li a:hover { color: var(--forest); }
.footer-bottom p,
.footer-bottom a { color: var(--white); }
.footer-bottom a:hover { color: var(--gold); }
.placeholder-card > a { cursor: default; }
.placeholder-card img { background: var(--cream); }

/* Functional fallback when the external Swiper bundle is unavailable. */
.slider-fallback { position: relative; }
.slider-fallback .swiper-wrapper { display: block; height: 100%; }
.slider-fallback .swiper-slide { display: none; height: 100%; }
.slider-fallback .swiper-slide.is-active { display: flex; }
.slider-fallback .swiper-pagination { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 5; display: flex; justify-content: center; gap: 7px; }
.slider-fallback .swiper-pagination button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: var(--cream); opacity: .55; cursor: pointer; }
.slider-fallback .swiper-pagination button.is-active { background: var(--gold); opacity: 1; }
.slider-fallback .swiper-button-next::after { content: '›'; }
.slider-fallback .swiper-button-prev::after { content: '‹'; }
.slider-fallback .swiper-button-next,
.slider-fallback .swiper-button-prev { position: absolute; top: 50%; z-index: 6; width: 42px; height: 42px; margin-top: -21px; padding: 0; border: 0; background: rgba(16,16,16,.45); border-radius: 50%; color: var(--gold); font-size: 38px; line-height: 38px; cursor: pointer; }
.slider-fallback .swiper-button-next { right: 12px; }
.slider-fallback .swiper-button-prev { left: 12px; }

@media (max-width: 768px) {
  .logo img { max-height: 44px; }
  .menu-toggle { color: var(--evergreen); border-color: rgba(20,80,64,.3); }
}

@media (max-width: 576px) {
  .banner-section .swiper-slide img { object-fit: contain; }
}

/* Content-body tables (homepage + article copy) */
.table-scroll { overflow-x: auto; margin: 16px 0; }
.table-scroll table,
.article-content table { border-collapse: collapse; width: 100%; min-width: 480px; }
.table-scroll th, .table-scroll td,
.article-content th, .article-content td { border: 1px solid rgba(20,80,64,.25); padding: 8px 12px; text-align: left; font-size: 14px; }
.table-scroll th, .article-content th { background: var(--evergreen); color: var(--cream); }
.article-content { overflow-x: auto; }

/* Allow grid items to shrink below their content's intrinsic width so the
   overflow-x:auto rules above actually clip wide tables instead of the
   whole grid column stretching past the viewport on mobile. */
.article-main, .list-main { min-width: 0; }

a.game-cat-card { display: block; color: inherit; text-decoration: none; }