/* ===== Top bar ===== */
.topbar{
  background:linear-gradient(180deg, var(--brown-light) 0%, var(--brown-dark) 100%);
  padding:12px 20px;
}
.brand{
  font-weight:800;
  font-size:26px;
  color:#fff;
  letter-spacing:.5px;
}
.brand span{ color:var(--accent); }
.topbar .icon-btn{
  color:#fff;
  font-size:18px;
  background:rgba(255,255,255,.12);
  border:none;
  width:38px;height:38px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.topbar .rules-link{
  color:#fff;
  font-weight:600;
  font-size:14.5px;
}
.btn-outline-cream{
  background:#fff;
  color:var(--brown-dark);
  font-weight:700;
  border:none;
  padding:8px 18px;
  border-radius:6px;
  font-size:14px;
}
.btn-solid-cream{
  background:var(--teal-dark);
  color:#fff;
  font-weight:700;
  border:none;
  padding:8px 18px;
  border-radius:6px;
  font-size:14px;
}

/* ===== Secondary nav ===== */
.subnav{
  background:linear-gradient(180deg, var(--teal-light) 0%, var(--teal-dark) 100%);
}
.subnav .nav-link{
  color:#eafaf6;
  font-weight:600;
  font-size:14px;
  padding:12px 18px;
  white-space:nowrap;
}
.subnav .nav-link.active, .subnav .nav-link:hover{
  background:rgba(255,255,255,.12);
  color:#fff;
}

/* ===== Sidebar ===== */
.sidebar{
  background:#fff;
  border-right:1px solid #e3e3e3;
  min-height:100%;
}
.sidebar .cat-header{
  background:linear-gradient(180deg, var(--brown-light) 0%, var(--brown) 100%);
  color:#fff;
  font-weight:700;
  padding:12px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
}
.sidebar .list-group-item{
  border:none;
  border-bottom:1px solid #eee;
  font-size:14px;
  font-weight:500;
  color:#333;
  padding:10px 16px;
}
.sidebar .list-group-item:hover{
  background:#f4ede0;
  color:var(--brown-dark);
}
.sidebar .cat-header.secondary{
  background:linear-gradient(180deg, var(--brown) 0%, var(--brown-dark) 100%);
  margin-top:4px;
}

/* ===== Content / filters ===== */
.filter-pill{
  border:1px solid var(--teal);
  color:var(--teal-dark);
  background:#fff;
  border-radius:20px;
  padding:5px 16px;
  font-size:13px;
  font-weight:600;
  margin-right:8px;
}
.filter-pill.active{ background:var(--teal); color:#fff; }
select.view-by{
  background:var(--brown);
  color:#fff;
  border:none;
  font-weight:600;
  font-size:13px;
  padding:6px 12px;
  border-radius:6px;
}

/* ===== Category section + game tiles ===== */
.section-header{
  background:linear-gradient(90deg, var(--teal) 0%, var(--teal-light) 100%);
  color:#fff;
  font-weight:700;
  padding:10px 16px;
  border-radius:6px;
  font-size:15px;
  letter-spacing:.5px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.section-header a{ color:#fff; font-size:12px; font-weight:600; opacity:.85; }
.section-header a:hover{ opacity:1; text-decoration:underline; }

.game-card{
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
  background:#fff;
  cursor:pointer;
  transition:transform .15s;
  height:100%;
}
.game-card:hover{ transform:translateY(-4px); }
.game-card .art{
  height:150px;
  width:100%;
  object-fit:cover;
  display:block;
  background:linear-gradient(135deg,#8a5a10,#f4b942);
}
.game-card .art-fallback{
  height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:900;
  font-size:18px;
  text-align:center;
  text-shadow:0 2px 8px rgba(0,0,0,.5);
  padding:10px;
  background:linear-gradient(135deg,#8a5a10,#f4b942);
}
.game-card .caption{
  background:var(--teal-dark);
  color:#fff;
  text-align:center;
  padding:8px;
  font-weight:700;
  font-size:13px;
  letter-spacing:.5px;
}
.game-card .badge-live{
  position:absolute;
  margin:8px;
  background:#c0392b;
  color:#fff;
  font-size:10px;
  font-weight:700;
  padding:3px 8px;
  border-radius:10px;
}
.game-card{ position:relative; }

/* ===== Footer ===== */
footer.site-footer{
  background:linear-gradient(180deg, var(--brown) 0%, var(--brown-dark) 100%);
  color:#f2e6d0;
  margin-top:30px;
}
footer.site-footer .top{ padding:30px 20px; }
footer.site-footer h6{ color:#fff; font-weight:700; margin-bottom:14px; font-size:15px; }
footer.site-footer a{ color:#e8d9bd; display:block; margin-bottom:8px; font-size:13.5px; }
footer.site-footer a:hover{ color:#fff; }
.secure-badge{
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.08);
  border-radius:8px; padding:10px 14px;
}
.secure-badge i{ font-size:26px; color:#3ecf6e; }
.age-badge{
  width:40px;height:40px;
  border-radius:50%;
  border:2px solid #fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px;
}
footer.site-footer .bottom{
  border-top:1px solid rgba(255,255,255,.15);
  padding:14px 20px;
  font-size:12.5px;
  text-align:center;
  color:#d8c9a9;
}

/* ===== Login card (used by page-login.php) ===== */
.login-wrap{
  min-height:70vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:40px 16px;
}
.login-card{
  background:#fff;
  width:100%;
  max-width:440px;
  border-radius:10px;
  padding:32px 28px;
  box-shadow:0 20px 50px rgba(0,0,0,0.25);
}
.login-card h1{
  text-align:center; color:var(--brown); font-size:26px; margin:0 0 24px;
}
.login-card .field{ position:relative; margin-bottom:18px; }
.login-card .field input{
  width:100%; padding:14px 44px 14px 16px;
  border:1px solid #d8d8d8; border-radius:6px; font-size:15px;
  outline:none; background:#fafafa;
}
.login-card .field input:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(193,125,17,0.15); background:#fff;
}
.login-card .field .icon{ position:absolute; right:14px; top:50%; transform:translateY(-50%); color:#333; }
.btn-primary-brown{
  width:100%; padding:14px; border:none; border-radius:6px;
  font-size:16px; font-weight:600; color:#fff;
  background:linear-gradient(180deg, var(--brown) 0%, var(--brown-dark) 100%);
}
.btn-whatsapp-teal{
  width:100%; padding:14px; border:none; border-radius:6px;
  font-size:15px; font-weight:600; color:#fff; display:flex;
  align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(180deg, var(--teal) 0%, var(--teal-dark) 100%);
}
.status-msg{ text-align:center; font-size:14px; min-height:20px; margin-top:10px; font-weight:600; }
.status-msg.success{ color:#1a7a3c; }
.status-msg.error{ color:#c0392b; }

/* ===== Mobile ===== */
@media (max-width: 991.98px){
  .brand{ font-size:20px; }
  .subnav .nav-link{ padding:10px 12px; font-size:13px; }
  .game-card .art, .game-card .art-fallback{ height:110px; font-size:14px; }
}
.offcanvas .cat-header{
  background:linear-gradient(180deg, var(--brown-light) 0%, var(--brown) 100%);
  color:#fff;
}
.whatsapp-btn {
    background: #25D366;
    color: #fff;
    font-weight: 600;
    border: none;
    transition: all 0.3s ease;
}

.whatsapp-btn:hover {
    background: #1ebe5d;
    color: #fff;
    transform: translateY(-1px);
}

.modal-body .form-control {
    min-height: 46px;
    border-radius: 8px;
}

.modal-body .btn-primary {
    min-height: 46px;
    border-radius: 8px;
    font-weight: 600;
}