/* =======================================================
   YONO GAMES — FULL RESPONSIVE UPDATE (drop-in)
   Keeps your class names and attribute API
   ======================================================= */

/* Enable container queries so the grid adapts inside any width */
.yono-games{ container-type:inline-size; max-width:100%; overflow:hidden }

/* -----------------------
   Toolbar
   ----------------------- */
.yono-games .yg-toolbar{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:14px;
  margin:10px 0 16px;
}
.yono-games .yg-search{
  background:#0e1726;
  border:1px solid rgba(148,163,184,.2);
  border-radius:12px;
  padding:clamp(10px,1.6vw,12px) clamp(12px,2vw,14px);
  color:#e5e7eb;
  width:100%;
}
.yono-games .yg-count{ justify-self:end; color:#9aa4b2; align-self:center; font-size:clamp(12px,1.8vw,13px) }
.yono-games .yg-cat-chips{ grid-column:1/-1; display:flex; gap:8px; flex-wrap:wrap; min-width:0 }
.yono-games .yg-chip{
  background:#0e1726; border:1px solid rgba(148,163,184,.2); color:#cbd5e1;
  border-radius:999px; padding:8px 12px; cursor:pointer; font-size:clamp(12px,1.8vw,13px);
}
.yono-games .yg-chip.is-active{ background:#1f2937; border-color:#1f2937; color:#fff }
.yono-games .yg-sort{ justify-self:end; display:flex; gap:8px; align-items:center }
.yono-games .yg-sort select{
  background:#0e1726; border:1px solid rgba(148,163,184,.2);
  border-radius:10px; color:#e5e7eb; padding:8px 10px; font-size:clamp(12px,1.8vw,13px)
}

/* Stack toolbar on narrow containers */
@container (max-width: 520px){
  .yono-games .yg-toolbar{ grid-template-columns:1fr; gap:10px }
  .yono-games .yg-sort, .yono-games .yg-count{ justify-self:start }
}

/* -----------------------
   Grid
   ----------------------- */
.yono-games .yg-grid{ display:grid; gap:clamp(12px,2vw,18px); min-width:0 }

/* Explicit attribute control (kept) */
.yono-games[data-columns="2"] .yg-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) }
.yono-games[data-columns="3"] .yg-grid{ grid-template-columns:repeat(3, minmax(0,1fr)) }
.yono-games[data-columns="4"] .yg-grid{ grid-template-columns:repeat(4, minmax(0,1fr)) }

/* Auto columns via container queries when no data-columns is set */
@container (max-width: 520px){ .yono-games:not([data-columns]) .yg-grid{ grid-template-columns:1fr } }
@container (min-width: 521px) and (max-width: 960px){ .yono-games:not([data-columns]) .yg-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@container (min-width: 961px) and (max-width: 1240px){ .yono-games:not([data-columns]) .yg-grid{ grid-template-columns:repeat(3, minmax(0,1fr)) } }
@container (min-width: 1241px){ .yono-games:not([data-columns]) .yg-grid{ grid-template-columns:repeat(4, minmax(0,1fr)) } }

/* Viewport fallbacks (legacy support) */
@media (max-width:980px){ .yono-games .yg-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:640px){ .yono-games .yg-grid{ grid-template-columns:1fr } }

/* HARD mobile override — beats any [data-columns] */
@media (max-width: 640px){
  .yono-games[data-columns] .yg-grid{ grid-template-columns:1fr !important; }
}
/* Optional tablet override */
@media (min-width:641px) and (max-width:980px){
  .yono-games[data-columns] .yg-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
}

/* -----------------------
   Card (neo layout)
   ----------------------- */
.yg-card{
  position:relative; display:flex; flex-direction:column; gap:12px;
  background:#0b1220; border:1px solid rgba(148,163,184,.13);
  border-radius:16px; padding:clamp(12px,1.8vw,14px);
  box-shadow:0 12px 30px rgba(2,6,23,.35);
  transition:border-color .2s, box-shadow .2s, transform .2s;
  width:100%;
}
@media (hover:hover){
  .yg-card:hover{ border-color:rgba(148,163,184,.22); box-shadow:0 16px 40px rgba(2,6,23,.45); transform:translateY(-2px) }
}

/* top-left badges */
.yg-card-head{ position:absolute; top:10px; left:12px; display:flex; gap:8px; flex-wrap:wrap; max-width:72% }
.yg-badge{
  background:#2a1d00; color:#fbbf24; border:1px solid #f59e0b;
  padding:4px 8px; border-radius:8px; font-size:11px; font-weight:800; white-space:nowrap;
}
.yg-pill{
  background:#102138; color:#8ab4ff; border:1px solid rgba(57,78,140,.6);
  padding:4px 8px; border-radius:8px; font-size:11px; font-weight:800; white-space:nowrap;
}

/* media object */
.yg-card-body{
  display:grid;
  grid-template-columns: clamp(35%, 8vw, 64px) 1fr; /* fluid logo col */
  gap:12px; align-items:center; margin-top:36px;
}
.yg-logo{
  width:100%; aspect-ratio:1/1; border-radius:12px; object-fit:cover; box-shadow:0 6px 18px rgba(0,0,0,.35)
}
.yg-title{
  margin:0 0 2px; font-size:clamp(15px,2.2vw,16px); line-height:1.25; color:#e5e7eb; font-weight:800;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
}
.yg-sub{
  color:#9aa4b2; font-size:clamp(11px,1.9vw,12px); margin:0 0 8px;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}

/* spec panel */
.yg-spec{
  grid-column:2/-1; display:grid; gap:6px;
  background:#0e1726; border:1px solid rgba(148,163,184,.12);
  border-radius:12px; padding:10px 12px; color:#cbd5e1; font-size:clamp(12px,1.9vw,13px);
}
@container (max-width:520px){ .yg-spec{ grid-column:1/-1 } }

/* upcoming bar */
.yg-coming{
  grid-column:2/-1; display:flex; align-items:center; gap:8px; margin-top:6px; flex-wrap:wrap;
}
@container (max-width:520px){ .yg-coming{ grid-column:1/-1 } }
.yg-coming-label{ background:#132033; color:#cbd5e1; padding:4px 8px; border-radius:8px; font-size:12px }
.yg-countdown{ font-weight:900; color:#fbbf24 }

/* footer */
.yg-card-foot{
  display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; margin-top:4px;
}
@container (max-width:520px){ .yg-card-foot{ grid-template-columns:1fr 44px } }
.yg-cta{
  display:inline-block; text-align:center; text-decoration:none; background:#ef5a2f; color:#fff; font-weight:900;
  border:0; border-radius:12px; padding:12px 14px; min-height:44px; line-height:1.05;
}
.yg-cta[disabled]{ opacity:.6 }
.yg-save{
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  background:#1e293b; color:#cbd5e1; border:0; border-radius:12px; cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.2)
}
@media (hover:hover){ .yg-save:hover{ background:#2b3a51 } }
.yg-card.is-upcoming .yg-cta{ opacity:.85 }

/* tiny tweaks */
@media (max-width:420px){
  .yg-card-head{ top:8px; left:10px; gap:6px }
}
.yg-card:focus-within{ outline:2px solid rgba(245,191,36,.35); outline-offset:2px; border-radius:16px }
@media (prefers-reduced-motion: reduce){ *{ transition-duration:.01ms !important } }