/* Game series: portrait cover cards (5:8) in a scroll-snap rail. Name + total games are always readable
   at the bottom of the cover; hover zooms the picture. */
.series { overflow: hidden; }
.sr-rail { --per: 6; --gap: .9rem; display: flex; gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: .8rem .6rem 1rem; margin-inline: -.6rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sr-rail::-webkit-scrollbar { display: none; }
.sr-rail > * { flex: 0 0 calc((100% - var(--gap) * (var(--per) - 1)) / var(--per)); min-width: 0; scroll-snap-align: start; }
.rail-btns .icon-btn:disabled { opacity: .35; cursor: default; pointer-events: none; }

.scard { position: relative; display: block; aspect-ratio: 5 / 8; overflow: hidden; isolation: isolate; background: linear-gradient(160deg, var(--surface-2), var(--surface)); border: 1.5px solid var(--thread); border-radius: 16px; box-shadow: var(--shadow-1); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.scard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.scard__letter { position: absolute; inset: 0; display: none; place-items: center; padding-bottom: 3rem; font: 800 clamp(3rem, 7vw, 4.5rem)/1 var(--font-display); color: var(--thread); opacity: .35; }
.scard--noimg .scard__letter { display: grid; }

.scard__info { position: absolute; inset: auto 0 0 0; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; padding: 2.4rem .8rem .8rem; background: linear-gradient(180deg, transparent, rgba(14, 9, 6, .78) 45%, rgba(14, 9, 6, .94)); }
.scard__name { font: 750 clamp(.92rem, 1.1vw, 1.08rem)/1.2 var(--font-display); letter-spacing: -.01em; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .55); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.scard__count { display: inline-flex; align-items: center; gap: .35rem; height: 24px; padding: 0 .65rem; border-radius: 999px; background: rgba(228, 200, 143, .16); border: 1px solid var(--thread); color: var(--thread); font-size: .72rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.scard__count .icon { flex: none; }

.scard:hover, .scard:focus-visible { transform: translateY(-5px); box-shadow: 0 0 0 1px var(--thread), 0 0 24px -6px rgba(228, 200, 143, .45), var(--shadow-2); }
.scard:hover .scard__img, .scard:focus-visible .scard__img { transform: scale(1.07); }
.scard:focus-visible { outline: 2px solid var(--thread); outline-offset: 3px; }

/* Series heading on the games page */
.series-tag { display: inline-flex; align-items: center; gap: .4rem; height: 28px; padding: 0 .8rem; margin-bottom: .8rem; border-radius: 999px; background: var(--signal-soft); border: 1px solid var(--signal); color: var(--text); font-size: .78rem; font-weight: 700; letter-spacing: .02em; }
.series-tag .icon { color: var(--signal-hover); }

@media (max-width: 1100px) { .sr-rail { --per: 5; } }
@media (max-width: 860px) { .sr-rail { --per: 4; --gap: .75rem; } }
@media (max-width: 600px) { .sr-rail { --per: 3; --gap: .6rem; } .scard { border-radius: 12px; } .scard__info { padding: 1.8rem .55rem .55rem; } .scard__count { height: 22px; font-size: .66rem; padding: 0 .5rem; } }
@media (max-width: 400px) { .sr-rail { --per: 2.3; } }
@media (prefers-reduced-motion: reduce) { .scard, .scard__img { transition: none; } .scard:hover, .scard:focus-visible { transform: none; } }