.slots-grid { gap: 14px; }
@media (min-width: 1180px) { .slots-grid { grid-template-columns: repeat(5, minmax(0,1fr)); } }
@media (min-width: 1500px) { .slots-grid { grid-template-columns: repeat(6, minmax(0,1fr)); gap: 14px 12px; } }

.slots-bar {
    background:
        radial-gradient(420px 120px at 0% 0%, rgba(77,141,255,.12), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,.03), transparent), var(--panel);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.slots-bar .search-box:focus-within { border-color: var(--acc-line-2); box-shadow: 0 0 0 3px rgba(77,141,255,.14); }

.slots-chips { mask-image: linear-gradient(90deg, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); padding-right: 40px; }
.slots-chips button { height: 34px; background: rgba(255,255,255,.035); }
.slots-chips button.on { background: var(--acc-grad); border-color: transparent; box-shadow: 0 10px 22px -12px rgba(77,141,255,.9); }

.slot {
    position: relative; isolation: isolate;
    border-radius: 18px; border: 1px solid rgba(255,255,255,.07);
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 40%), var(--panel-2);
    box-shadow: 0 10px 24px -18px rgba(0,0,0,.9);
    transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s;
}
.slot:hover {
    transform: translateY(-5px); border-color: rgba(120,165,255,.55);
    box-shadow: 0 0 0 1px rgba(120,165,255,.25), 0 24px 44px -22px rgba(77,141,255,.85);
}
.slot .thumb { aspect-ratio: .9; margin: 5px 5px 0; border-radius: 14px; }
.slot .cover { transition: transform .6s var(--ease), filter .3s; }
.slot:hover .cover { transform: scale(1.08); filter: saturate(1.12); }

.slot .veil {
    background: linear-gradient(180deg, rgba(7,9,15,0) 55%, rgba(7,9,15,.45));
    overflow: hidden;
}
.slot .veil::after {
    content: ''; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
    transform: skewX(-18deg); opacity: 0;
}
@media (hover: hover) {
    .slot:hover .veil::after { animation: slotShine .9s var(--ease) both; }
}
@keyframes slotShine { from { left: -60%; opacity: 1; } to { left: 130%; opacity: 1; } }

.slot .meta { padding: 9px 11px 11px; }
.slot .meta b { font-size: 12.5px; letter-spacing: -.005em; }
.slot .meta small {
    display: flex; align-items: center; gap: 6px; margin-top: 3px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 10.5px;
}
.slot .meta small::before {
    content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%;
    background: #5b8cff; box-shadow: 0 0 6px rgba(91,140,255,.8);
}

.slot .fs { top: 8px; left: 8px; padding: 3px 8px; font-size: 9.5px; }

.slot .play {
    gap: 6px; padding-bottom: 30px;
    background: radial-gradient(70% 60% at 50% 45%, rgba(7,11,18,.62), rgba(7,11,18,.28));
    backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px);
}
.slot .play i { width: 50px; height: 50px; }
.slot .play b { font-size: 11px; letter-spacing: .08em; }
.slot .demo {
    top: auto; bottom: 12px; transform: translate(-50%, 6px);
    min-height: 26px; padding: 0 12px; border-radius: 999px;
    font-size: 10.5px; letter-spacing: .04em;
    background: rgba(9,11,18,.6); border-color: rgba(255,255,255,.22);
    transition: opacity .2s, transform .25s var(--ease), background .15s;
}
.slot .demo:hover { background: rgba(255,255,255,.16); }
@media (hover: hover) {
    .slot:hover .demo { opacity: 1; transform: translate(-50%, 0); }
}
@media (hover: none) { .slot .demo { display: none; } }

@media (min-width: 1500px) and (max-width: 1700px) {
    .slot .meta b { font-size: 12px; }
    .slot .play i { width: 44px; height: 44px; }
}

@media (max-width: 760px) {
    .slot { border-radius: 16px; }
    .slot .thumb { margin: 4px 4px 0; border-radius: 12px; }
    .slot .meta { padding: 8px 9px 10px; }

    body[data-page="slots"] .cols-rail > .rail { display: contents; }
    body[data-page="slots"] .cols-rail:has(.slots-main:not(.is-playing)) .fsp { order: -1; }

    .fsp { padding: 13px; gap: 11px; border-radius: 18px; }
    .fsp-ic { width: 34px; height: 34px; border-radius: 11px; }
    .fsp-total b { font-size: 34px; }
    .fsp-list .fsp-row:nth-child(n+3) { display: none; }
    .fsp-row { padding: 6px 7px 6px 6px; }
    .fsp-art { width: 40px; height: 40px; }
    .fsp-go { width: 32px; height: 32px; }
    .fsp-empty p { font-size: 11.5px; }

    .fsp-get { padding-top: 10px; }
    .fsp-get-t { display: none; }
    .fsp-way { flex-direction: row; justify-content: center; gap: 7px; padding: 7px 6px; border-radius: 12px; }
    .fsp-way i { width: 26px; height: 26px; margin: 0; border-radius: 8px; }
    .fsp-way i svg { width: 15px; height: 15px; }
    .fsp-way small { display: none; }
}
@media (max-width: 400px) {
    .fsp-way { gap: 5px; padding: 7px 4px; }
    .fsp-way b { font-size: 11px; }
    .fsp-way i { width: 24px; height: 24px; }
}

.slots-bar .select-box select { color-scheme: dark; }
.slots-bar .select-box option { background: #151a28; color: #e8ecf6; font-weight: 600; }
.slots-bar .select-box option:checked { background: #2f5fd0; color: #fff; }
.slots-bar .select-box:hover { border-color: var(--acc-line-2); }