/* Twitch Grid Lite v2 — neon dark + performance */
.cs2-theme-dark {
  --panel: #131126;
  --text: #f3efff;
  --muted: #9aa0b4;
  color: var(--text);
  background: linear-gradient(180deg,#0b0a13,#0d0b14);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 6px 24px rgba(0,0,0,.45);
}

.tw-grid__header{ margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; }
.tw-grid__title{ margin:0; font-size: clamp(18px,2vw,26px); letter-spacing:.2px; }

.tw-grid__wrap{
  display:grid;
  gap:14px;
  grid-template-columns: repeat(var(--cols,4), minmax(0,1fr));
}
@media (max-width: 900px){ .tw-grid__wrap{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 540px){ .tw-grid__wrap{ grid-template-columns: 1fr; } }

.tw-card{ background: var(--panel); border:1px solid #1f1b33; border-radius:16px; overflow:hidden; transition: transform .18s ease, box-shadow .18s ease; }
.tw-card:hover{ transform: translateY(-3px); box-shadow: 0 0 20px rgba(124,58,237,.5), 0 0 35px rgba(124,58,237,.25); }
.tw-card .player{ aspect-ratio: 16/9; overflow:hidden; position:relative; background: radial-gradient(ellipse at 50% 10%, #1a1830, #0f0e1f); }
.tw-card .player iframe{ width:100%; height:100%; display:block; }
.tw-card .player.poster .preview{ width:100%; height:100%; object-fit:cover; display:block; }
.tw-card .playbtn{
  position:absolute; inset:auto auto 10px 10px; border:none; cursor:pointer;
  background:linear-gradient(135deg,#7c3aed,#a855f7); color:#fff; font-weight:700;
  padding:8px 12px; border-radius:12px; box-shadow: 0 0 20px rgba(124,58,237,.5), 0 0 35px rgba(124,58,237,.25);
}
.tw-card .meta{ padding:12px; color: var(--muted); }
.tw-card .name{ font-weight:700; color:#fff; }