/* SmashLabs Games Gallery v3.0 */

.slgg-wrap {
    --slgg-filter-bg: transparent;
    --slgg-filter-color: #333;
    --slgg-filter-active-bg: #333;
    --slgg-filter-active-color: #fff;
    --slgg-filter-border: #ccc;
}

/* ─── Filters ───────────────────────────────── */
.slgg-filters { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:28px; }
.slgg-filter-buttons { display:flex; flex-wrap:wrap; gap:8px; }
.slgg-filter-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 20px; border:2px solid var(--slgg-filter-border);
    background:var(--slgg-filter-bg); color:var(--slgg-filter-color);
    font-size:14px; font-weight:600; cursor:pointer;
    transition:all .25s ease; text-transform:capitalize; line-height:1.3; font-family:inherit;
}
.slgg-filter-btn i { font-size:14px; line-height:1; }
.slgg-filter-btn:hover, .slgg-filter-btn.active {
    background:var(--slgg-filter-active-bg); color:var(--slgg-filter-active-color);
    border-color:var(--slgg-filter-active-bg);
}
.slgg-filter-style-pill .slgg-filter-btn { border-radius:25px; }
.slgg-filter-style-box .slgg-filter-btn { border-radius:6px; }
.slgg-filter-style-minimal .slgg-filter-btn { border:none; border-bottom:2px solid transparent; border-radius:0; padding:8px 12px; }
.slgg-filter-style-minimal .slgg-filter-btn.active { border-bottom-color:var(--slgg-filter-active-bg); background:transparent; color:var(--slgg-filter-active-bg); }

.slgg-dropdown { padding:8px 14px; border:2px solid var(--slgg-filter-border); border-radius:8px; font-size:14px; font-weight:600; background:#fff; cursor:pointer; min-width:180px; font-family:inherit; }
.slgg-separator { width:1px; height:30px; background:#ddd; margin:0 4px; }

/* ─── Card ──────────────────────────────────── */
.slgg-card {
    border-radius:16px; overflow:hidden; background:#fff;
    box-shadow:0 2px 12px rgba(0,0,0,.08);
    transition:transform .35s ease,box-shadow .35s ease,opacity .4s ease;
    display:flex; flex-direction:column; position:relative;
}
.slgg-card .slgg-play-btn { margin-top:auto; }
.slgg-card.slgg-hidden { display:none; }

/* ─── Image Wrap + Hover Media ──────────────── */
.slgg-card-img-link { display:block; text-decoration:none!important; color:inherit!important; }
.slgg-card-img-wrap { position:relative; overflow:hidden; flex-shrink:0; }
.slgg-card-img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; transition:transform .4s ease; }

.slgg-hover-video, .slgg-hover-gif {
    position:absolute; top:0; left:0; width:100%; height:100%;
    object-fit:cover; opacity:0; transition:opacity .4s ease; pointer-events:none;
}
.slgg-card-img-wrap:hover .slgg-hover-video,
.slgg-card-img-wrap:hover .slgg-hover-gif { opacity:1; }
/* Hide static image ONLY when hover media exists */
.slgg-card-img-wrap.slgg-has-hover-media:hover .slgg-card-img { opacity:0; }

/* ─── Overlay ───────────────────────────────── */
.slgg-overlay {
    position:absolute; top:0; left:0; width:100%; height:100%;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    opacity:0; transition:opacity .35s ease; pointer-events:none; gap:8px;
}
.slgg-card-img-wrap:hover .slgg-overlay { opacity:1; }
.slgg-overlay-icon { font-size:36px; }
.slgg-overlay-text { font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:1px; }

/* ─── Button ────────────────────────────────── */
.slgg-play-btn {
    display:flex; align-items:center; justify-content:center;
    padding:14px 20px; background:#4A90D9; color:#fff!important;
    text-decoration:none!important; font-weight:800; font-size:16px;
    text-align:center; text-transform:uppercase; letter-spacing:1.5px;
    transition:filter .25s ease; border:none; cursor:pointer;
    box-sizing:border-box; flex-shrink:0;
}
.slgg-play-btn:hover { filter:brightness(1.1); color:#fff!important; }

/* ─── Badge ─────────────────────────────────── */
.slgg-badge { position:absolute; z-index:5; font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; pointer-events:none; }
.slgg-badge-top-left { top:12px; left:12px; }
.slgg-badge-top-right { top:12px; right:12px; }
.slgg-badge-bottom-left { bottom:12px; left:12px; }
.slgg-badge-bottom-right { bottom:12px; right:12px; }
.slgg-badge-tag { padding:5px 12px; border-radius:4px; }
.slgg-badge-pill { padding:5px 14px; border-radius:20px; }
.slgg-badge-ribbon { padding:6px 16px 6px 10px; border-radius:0 4px 4px 0; left:0!important; }
.slgg-badge-ribbon.slgg-badge-top-right, .slgg-badge-ribbon.slgg-badge-bottom-right { left:auto!important; right:0!important; border-radius:4px 0 0 4px; padding:6px 10px 6px 16px; }

/* ─── Timer ─────────────────────────────────── */
.slgg-timer { padding:10px 14px; text-align:center; font-size:13px; flex-shrink:0; }
.slgg-timer-label { font-weight:600; margin-bottom:6px; font-size:12px; }
.slgg-timer-digits { display:flex; justify-content:center; gap:8px; }
.slgg-timer-unit { display:flex; flex-direction:column; align-items:center; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.3); border-radius:6px; padding:4px 10px; min-width:42px; }
.slgg-timer-num { font-size:20px; font-weight:800; line-height:1.2; }
.slgg-timer-unit small { font-size:9px; font-weight:600; text-transform:uppercase; opacity:.8; letter-spacing:1px; }
.slgg-timer-overlay { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,.6); color:#fff; }

/* ─── Hover Effects ─────────────────────────── */
.slgg-hover-lift:hover { transform:translateY(-6px); box-shadow:0 12px 32px rgba(0,0,0,.15); }
.slgg-hover-scale:hover { transform:scale(1.04); box-shadow:0 10px 28px rgba(0,0,0,.14); }
.slgg-hover-scale:hover .slgg-card-img { transform:scale(1.08); }
.slgg-hover-glow:hover { box-shadow:0 0 20px rgba(74,144,217,.5),0 8px 24px rgba(0,0,0,.12); }
.slgg-hover-tilt:hover { transform:perspective(600px) rotateY(-3deg) rotateX(2deg); box-shadow:8px 12px 24px rgba(0,0,0,.15); }

/* ─── Entrance ──────────────────────────────── */
.slgg-anim-fade-up { opacity:0; transform:translateY(30px); }
.slgg-anim-fade-in { opacity:0; }
.slgg-anim-slide-left { opacity:0; transform:translateX(-40px); }
.slgg-anim-zoom-in { opacity:0; transform:scale(.85); }
.slgg-anim-none { opacity:1!important; transform:none!important; }
.slgg-anim-fade-up.slgg-visible { opacity:1; transform:translateY(0); transition:opacity .6s ease,transform .6s ease; }
.slgg-anim-fade-in.slgg-visible { opacity:1; transition:opacity .6s ease; }
.slgg-anim-slide-left.slgg-visible { opacity:1; transform:translateX(0); transition:opacity .6s ease,transform .6s ease; }
.slgg-anim-zoom-in.slgg-visible { opacity:1; transform:scale(1); transition:opacity .5s ease,transform .5s ease; }

/* ─── Bounce & Pulse ────────────────────────── */
@keyframes slgg-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.slgg-bounce { animation:slgg-bounce 2s ease-in-out infinite; }
.slgg-bounce:hover { animation-play-state:paused; }
@keyframes slgg-pulse { 0%{box-shadow:0 0 0 0 rgba(74,144,217,.5)} 70%{box-shadow:0 0 0 12px rgba(74,144,217,0)} 100%{box-shadow:0 0 0 0 rgba(74,144,217,0)} }
.slgg-pulse { animation:slgg-pulse 2s ease-in-out infinite; }

/* ─── Misc ──────────────────────────────────── */
.slgg-loading { text-align:center; padding:40px; }
.slgg-spinner { width:36px; height:36px; border:3px solid #eee; border-top-color:#4A90D9; border-radius:50%; animation:slgg-spin .7s linear infinite; margin:0 auto; }
@keyframes slgg-spin { to{transform:rotate(360deg)} }
.slgg-no-results { grid-column:1/-1; text-align:center; padding:40px; color:#999; font-size:16px; display:none; }
.slgg-grid.slgg-fading .slgg-card { opacity:.3; pointer-events:none; transition:opacity .2s ease; }

/* ─── Responsive ────────────────────────────── */
@media(max-width:600px){
    .slgg-filters { flex-direction:column; align-items:stretch; }
    .slgg-separator { display:none; }
    .slgg-filter-buttons { justify-content:center; }
    .slgg-timer-num { font-size:16px; }
}