/* ===== Theme Vars (Default Dark + Yellow) ===== */
.subdomain-game-container{
  --bg:transparent; --panel:#1c1f2d; --panel-2:#131624; --text:#e8ecf1;
  --brand:#ffcc00; --brand-hover:#e6b800; --radius:16px;
}
.subdomain-game-container.theme-blue   { --bg:#0e1630; --panel:#1c243f; --panel-2:#101830; --text:#fff; --brand:#4da3ff; --brand-hover:#1c7dff; }
.subdomain-game-container.theme-green  { --bg:#0f1e0f; --panel:#203320; --panel-2:#142414; --text:#e8f1e8; --brand:#29d47c; --brand-hover:#20b86a; }
.subdomain-game-container.theme-light  { --bg:#f9f9f9; --panel:#fff;    --panel-2:#f2f2f2; --text:#222;   --brand:#0073e6; --brand-hover:#005bb5; }

/* ===== Scoped Layout ===== */
.subdomain-game-container{ margin:0 auto; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  background:var(--bg); color:var(--text); display:flex; justify-content:center; padding:24px; }
.subdomain-game-container .wrap{ width:100%; max-width:600px; }
.subdomain-game-container .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }

.subdomain-game-container .card{ background:var(--panel); border-radius:var(--radius); box-shadow:0 6px 18px rgba(0,0,0,.35); overflow:hidden; }
.subdomain-game-container .thumb{ aspect-ratio:4/3; background:var(--panel-2); overflow:hidden; }
.subdomain-game-container .thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.subdomain-game-container .card:hover .thumb img{ transform:scale(1.04); }

.subdomain-game-container .title{ font-size:13px; line-height:1.3; padding:10px 12px 0; margin:0; color:var(--text); min-height:40px; }
.subdomain-game-container .btn{ display:flex; align-items:center; justify-content:center; margin:15px 12px 12px; padding:10px 10px;
  border:none; width:calc(100% - 24px); border-radius:12px; background:var(--brand); color:#1a1a1a; font-weight:700; cursor:pointer;
  transition:transform .06s ease, background .2s ease; box-shadow:inset 0 -2px 0 rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.25); }
.subdomain-game-container .btn:hover{ background:var(--brand-hover); }
.subdomain-game-container .btn:active{ transform:translateY(1px); }

/* Pagination */
.subdomain-game-container .pager{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; align-items:center; margin:16px 0 0; }
.subdomain-game-container .pager button{ background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.18); padding:8px 12px; border-radius:10px; cursor:pointer; }
.subdomain-game-container .pager button[disabled]{ opacity:.45; cursor:not-allowed; }
.subdomain-game-container .pager .num{ min-width:36px; }
.subdomain-game-container .pager .active{ background:var(--brand); color:#111; border-color:var(--brand); font-weight:800; }
body .subdomain-game-container  h3 {
    font-size: 18px !important;
    line-height: 22px !important;
    margin-top: 10px !important;
}
@media (max-width:420px){
  .subdomain-game-container .title{ font-size:12px; }
}
/* Mobile view (max 768px for example) */
@media (max-width: 768px) {
    .subdomain-game-container .grid {
        grid-template-columns: repeat(2, 1fr);
    }
    body .subdomain-game-container{
      padding-left: 1px;
      padding-right: 1px;
    }
}
/*
/* Extra small screens (optional, max 480px) */
/*