/* Categories (Standalone) – l.g Game */
:root{
  --yg-bg:#FFFFFF; --yg-primary:#FFB300; --yg-text:#000000; --yg-accent:#4B1AB1;
  --yg-surface:#FFFFFF; --yg-ring:rgba(0,0,0,.06);
  --yg-border-strong:var(--yg-accent);
  --yg-hover-glow:rgba(255,179,0,.35);
  --yg-muted:#6b7280;
}

/* Layout helpers */
.yg-container{ width:100%; max-width:1200px; margin-inline:auto; padding-inline:16px; }
.yg-center{ text-align:center; }
.yg-mt-md{ margin-top:16px; } .yg-mt-lg{ margin-top:24px; }
.yg-muted{ color:var(--yg-muted); }
.yg-ms-1{ margin-right:.25rem; }

/* Header */
.yg-cats__head{ text-align:center; margin-top:12px; }
.yg-title{ margin:0 0 8px; font-weight:800; font-size:26px; color:var(--yg-text); }
.yg-divider{ width:64px; height:4px; border-radius:6px; margin:0 auto 16px;
  background:linear-gradient(90deg,var(--yg-accent),var(--yg-primary)); }

/* Grid */
.yg-grid{ display:grid; gap:14px; }
.yg-grid--auto{ grid-template-columns:repeat(2,1fr); }
@media (min-width:768px){ .yg-grid--auto{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1024px){ .yg-grid--auto{ grid-template-columns:repeat(4,1fr); } }

/* Category Card */
.yg-catcard{
  background:#fff; border-radius:18px; overflow:hidden; position:relative;
  border:2px solid var(--yg-border-strong);
  box-shadow:0 6px 14px rgba(0,0,0,.06);
  transition:box-shadow .25s, transform .15s;
}
.yg-catcard:hover{ transform:translateY(-2px); box-shadow:0 14px 28px var(--yg-hover-glow); }

.yg-catcard__media{ display:block; background:#fff; text-decoration:none; color:inherit; }
.yg-media-1x1{ position:relative; width:100%; padding-top:100%; }
.yg-media-1x1 img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.yg-catcard__body{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px;
}
.yg-catcard__title{
  margin:0; font-size:15px; font-weight:800; color:var(--yg-text);
  max-width:70%;
}
.yg-line-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.yg-badge{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:linear-gradient(90deg,var(--yg-primary),#FFC94D); color:#111; font-weight:900; font-size:12px;
  box-shadow:0 6px 14px rgba(255,179,0,.35), inset 0 0 0 2px #fff;
}

/* Accent bar */
.yg-accent-bar{ height:4px; width:0; background:linear-gradient(90deg,var(--yg-accent),var(--yg-primary)); transition:width .3s; }
.yg-catcard:hover .yg-accent-bar{ width:100%; }

/* Button */
.yg-btn{
  display:inline-flex; align-items:center; gap:6px; padding:10px 24px; border-radius:12px;
  text-decoration:none; font-weight:800; cursor:pointer; border:0;
  transition:transform .15s, box-shadow .2s, background .2s;
}
.yg-btn--primary{
  background:var(--yg-primary); color:#111;
  box-shadow:0 8px 22px rgba(255,179,0,.25);
}
.yg-btn--primary:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(255,179,0,.35); }

/* Skeleton */
.yg-skel{
  height:220px; border-radius:18px; background:
    linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%);
  background-size:400% 100%; animation:yg-shine 1.2s ease-in-out infinite;
  border:1px solid var(--yg-ring);
}
@keyframes yg-shine{ 0%{background-position:100% 0} 100%{background-position:0 0} }

/* Empty */
.yg-empty{ text-align:center; padding:16px; color:var(--yg-muted); border:1px dashed var(--yg-ring); border-radius:12px; }