/* ───── ROWS ───── */
.rows-wrap{padding:clamp(40px,6vw,70px) 0 clamp(20px,4vw,40px)}
.row{margin-bottom:clamp(34px,5vw,56px)}
.row-head{display:flex;align-items:baseline;gap:14px;padding:0 var(--gutter);margin-bottom:14px}
.row-title{font-family:'Anton',sans-serif;font-size:clamp(1.3rem,3vw,2rem);text-transform:uppercase;letter-spacing:.02em}
.row-title .accent{color:var(--red)}
.row-sub{font-size:.8rem;color:var(--muted-2);font-weight:600;letter-spacing:.08em}
.row-scroller-wrap{position:relative}
.row-scroller{display:flex;gap:var(--row-gap);overflow-x:auto;scroll-behavior:smooth;padding:8px var(--gutter) 18px;scrollbar-width:none}
.row-scroller::-webkit-scrollbar{display:none}
.row-arrow{position:absolute;top:8px;bottom:18px;width:clamp(40px,5vw,64px);z-index:20;display:none;align-items:center;justify-content:center;background:linear-gradient(90deg,rgba(8,8,8,.85),rgba(8,8,8,0));border:none;color:#fff;opacity:0;transition:opacity .25s var(--ease),background .2s}
.row-arrow.right{right:0;background:linear-gradient(270deg,rgba(8,8,8,.85),rgba(8,8,8,0))}
.row-arrow.left{left:0}
.row-scroller-wrap:hover .row-arrow{opacity:1}
.row-arrow svg{width:30px;height:30px;fill:#fff;transition:transform .2s var(--ease)}
.row-arrow:hover svg{transform:scale(1.3)}
@media(min-width:860px){.row-arrow{display:flex}}

.card{position:relative;flex:0 0 auto;width:clamp(230px,30vw,330px);border-radius:7px;overflow:hidden;background:var(--panel);cursor:pointer;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.card-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.card-thumb img{width:100%;height:100%;object-fit:cover;filter:brightness(.92);transition:transform .5s var(--ease),filter .4s var(--ease)}
.card-rank{position:absolute;top:8px;left:8px;z-index:3;font-family:'Anton',sans-serif;font-size:.85rem;background:rgba(8,8,8,.8);color:#fff;border:1px solid rgba(255,255,255,.18);padding:2px 9px;border-radius:3px;letter-spacing:.05em}
.card-tag{position:absolute;top:8px;right:8px;z-index:3;font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:var(--red);padding:3px 8px;border-radius:3px}
.card-grad{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.75) 100%)}
.card-play{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s var(--ease)}
.card-play .pbtn{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;transform:scale(.7);transition:transform .35s var(--ease)}
.card-play .pbtn svg{width:24px;height:24px;fill:#111;margin-left:3px}
.card-info{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:14px;transform:translateY(8px);opacity:0;transition:transform .35s var(--ease),opacity .3s var(--ease)}
.card-info h4{font-family:'Anton',sans-serif;font-size:1.05rem;text-transform:uppercase;letter-spacing:.02em;line-height:1.05}
.card-info p{font-size:.78rem;color:#cfcfcf;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-base{position:absolute;left:12px;bottom:12px;z-index:3;font-family:'Anton',sans-serif;font-size:1rem;text-transform:uppercase;text-shadow:0 2px 8px rgba(0,0,0,.8);transition:opacity .25s var(--ease)}
.card:hover{transform:scale(1.12);box-shadow:0 24px 50px -18px rgba(0,0,0,.85);z-index:15}
.card:hover .card-thumb img{transform:scale(1.06);filter:brightness(1)}
.card:hover .card-play{opacity:1}
.card:hover .card-play .pbtn{transform:scale(1)}
.card:hover .card-info{transform:translateY(0);opacity:1}
.card:hover .card-base{opacity:0}