/* Grid & cards */
.slots-grid{ display:grid; grid-template-columns: repeat(var(--cols-desktop,4), minmax(0,1fr)); gap:16px; }
.slot-card{ background:#0d1b2a; border-radius:12px; overflow:hidden; box-shadow:0 4px 14px rgba(0,0,0,.25); display:flex; flex-direction:column; }
.slot-thumb img, .slot-placeholder{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; background:#111827; }
.slot-title{ padding:10px 12px 0; font-weight:600; color:#e5e7eb; display:flex; justify-content:space-between; align-items:center; gap:8px; line-height:1.2; }
.slot-provider{ background:#111827; color:#9ca3af; font-size:.75rem; padding:2px 8px; border-radius:999px; }
.slot-actions{ display:flex; gap:10px; padding:12px; margin-top:auto; }

/* Buttons */
.slot-btn{ flex:1; text-align:center; padding:10px 12px; border-radius: var(--asl-radius,10px); font-weight:700; border:0; cursor:pointer; text-decoration:none !important; display:inline-flex; align-items:center; justify-content:center; position:relative; transition: transform .15s ease, filter .15s ease, box-shadow .2s ease, background .2s ease; }
.slot-btn:hover, .slot-btn:focus{ text-decoration:none !important; outline:none; }
.slot-btn, .slot-btn:visited, .slot-btn:active{ text-decoration:none !important; }

/* Hover effects (both :hover and .is-hover) */
.slot-actions .slot-btn.asl-hover-none:hover, .slot-actions .slot-btn.asl-hover-none.is-hover{}
.slot-actions .slot-btn.asl-hover-darken:hover, .slot-actions .slot-btn.asl-hover-darken.is-hover{ filter: brightness(0.9) !important; }
.slot-actions .slot-btn.asl-hover-lighten:hover, .slot-actions .slot-btn.asl-hover-lighten.is-hover{ filter: brightness(1.08) !important; }
.slot-actions .slot-btn.asl-hover-glow:hover, .slot-actions .slot-btn.asl-hover-glow.is-hover{ box-shadow: 0 6px 18px rgba(0,0,0,.28), 0 0 0 3px rgba(255,255,255,.08) inset !important; }
.slot-actions .slot-btn.asl-hover-lift:hover, .slot-actions .slot-btn.asl-hover-lift.is-hover{ transform: translateY(-2px) !important; box-shadow: 0 10px 20px rgba(0,0,0,.25) !important; }
.slot-actions .slot-btn.asl-hover-scale:hover, .slot-actions .slot-btn.asl-hover-scale.is-hover{ transform: scale(1.03) !important; }
.slot-actions .slot-btn.asl-hover-border:hover, .slot-actions .slot-btn.asl-hover-border.is-hover{ box-shadow: 0 0 0 2px rgba(255,255,255,.2) inset !important; }
.slot-actions .slot-btn.asl-hover-gradient:hover, .slot-actions .slot-btn.asl-hover-gradient.is-hover{ background-image: linear-gradient(135deg, rgba(255,255,255,.06), rgba(0,0,0,.04)) !important; }
.slot-actions .slot-btn.asl-hover-pulse:hover, .slot-actions .slot-btn.asl-hover-pulse.is-hover{ box-shadow: 0 0 0 0 rgba(255,255,255,.25); animation: asl-pulse .8s ease-out; }
@keyframes asl-pulse { to{ box-shadow: 0 0 0 10px rgba(255,255,255,0); } }

/* Modal */
.slot-modal{ position:fixed; inset:0; display:none; z-index:9999; }
.slot-modal.is-open{ display:block; }
.slot-modal__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.7); }
.slot-modal__content{ position:relative; width:min(1100px,95vw); height:min(80vh,700px); margin:5vh auto; background:#0b1320; border-radius:14px; display:flex; flex-direction:column; overflow:hidden; z-index:10; }
.slot-modal__header{ display:flex; justify-content:space-between; align-items:center; padding:10px 14px; background:#0e1a2f; color:#e5e7eb; gap:12px; }
#slotModalTitle{ margin:0; font-size:18px; line-height:1.1; }
.slot-modal__close{ background:#2a3650; color:#cbd5e1; border:0; font-size:18px; line-height:1; width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.slot-modal__close:hover{ background:#334155; }
.slot-modal__body{ position:relative; flex:1; display:flex; }
.slot-modal__body iframe{ width:100%; height:100%; border:0; }

/* Bottom Play overlay */
.slot-modal__footer{ position:absolute; left:50%; transform:translateX(-50%); bottom:14px; z-index:2000; width:min(560px, 92%); display:flex; justify-content:center; pointer-events:none; }
.slot-modal__btn-bottom{ pointer-events:auto; display:inline-flex; align-items:center; justify-content:center; min-width:220px; height:44px; padding:0 20px; font-weight:800; letter-spacing:.2px; border-radius:12px; border:0; cursor:pointer; text-decoration:none; background: var(--asl-iframe-play-bg, var(--asl-play-bg,#10b981)); color: var(--asl-iframe-play-fg, var(--asl-play-fg,#062a20)); box-shadow: 0 10px 24px rgba(0,0,0,.3); }
.slot-modal__btn-bottom:hover{ filter:brightness(0.96); }
@media (max-width: 640px){ .slot-modal__btn-bottom{ min-width:180px; height:42px; } }

/* Responsive columns */
@media (max-width:1024px){ .slots-grid{ grid-template-columns:repeat(var(--cols-tablet,3),1fr) !important; } } }
@media (max-width:768px){ .slots-grid{ grid-template-columns:repeat(var(--cols-mobile,2),1fr) !important; } } }
@media (max-width:480px){ .slots-grid{ grid-template-columns:repeat(var(--cols-mobile,2),1fr) !important; } } }


/* v3.2.3 — Footer bar under iframe */
.slot-modal__content{ display:flex; flex-direction:column; }
.slot-modal__body{ flex:1; display:flex; }
.slot-modal__body iframe{ flex:1; width:100%; height:100%; border:0; }
.slot-modal__footer{
  position:relative;
  inset:auto; transform:none;
  width:100%; bottom:auto;
  display:flex; justify-content:center; align-items:center;
  padding:10px 14px; gap:10px;
  background:#0e1a2f;
  border-top:1px solid rgba(255,255,255,.06);
  box-shadow: 0 -6px 14px rgba(0,0,0,.25);
}
.slot-modal__btn-bottom{
  min-width:220px; height:40px; padding:0 18px; font-weight:800;
  border-radius: var(--asl-iframe-play-radius, 10px); box-shadow:none;
}
@media (max-width:640px){
  .slot-modal__btn-bottom{ min-width:170px; height:38px; }
}

/* v3.3.2 — compact mobile */
@media (max-width:768px){
  .slot-title{ font-size:14px; padding:8px 10px 0; }
  .slot-provider{ font-size:.7rem; }
  .slot-actions{ padding:10px; gap:8px; }
  .slot-btn{ padding:8px 10px; font-size:14px; }
}


/* v3.3.3 — ensure mobile columns apply even on wider phones (<=900px) and small phones (<=600px) */
@media (max-width:900px){
  .slots-grid{ grid-template-columns:repeat(var(--cols-mobile,2),1fr) !important; }
}
@media (max-width:600px){
  .slots-grid{ grid-template-columns:repeat(var(--cols-mobile,2),1fr) !important; }
}
/* обычно это уже есть в браузере, но явно не повредит */
[hidden] { display: none !important; }