/* ==========================================================================
   Slots section — the pieces every slots page shares (#769), on /slots/ (.slx),
   /slots/calendar/ (.slc), /slots/demos/ (.sdx), /topslots/ (.tsx) and the studio
   pages /slots/{studio}/ (.spx):
   - the section tabs (Slots home · Release calendar · Slot demos · Top slots), the
     Social section's segmented tab bar (social.css .scx-subnav). Each page sets
     --slv-ac; the current tab and the page's identity tile take it;
   - cover rails: a row of slot art with a date strip under each cover,
     scrolled with the back / on buttons (slots-section.js);
   - the round play button that sits on a slot's art and opens the popup player;
   - the count chip beside a section title.
   ========================================================================== */

.crx .slv-subnav{position:relative;margin:0 0 16px}
.crx .slv-subnav-list{list-style:none;margin:0;padding:4px;display:flex;gap:4px;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;
	border-radius:14px;background:var(--card);border:1px solid var(--hair)}
.crx .slv-subnav-list::-webkit-scrollbar{display:none}
.crx .slv-subnav-list li{flex:0 0 auto;margin:0}
.crx .slv-subnav-link{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:10px;font-size:14px;font-weight:600;
	color:var(--ink-3);white-space:nowrap;text-decoration:none;transition:color .16s,background .16s,box-shadow .16s}
.crx .slv-subnav-link svg{width:18px;height:18px;flex:0 0 18px;color:var(--ink-4);transition:color .16s}
.crx .slv-subnav-link:hover{color:#fff;background:rgba(255,255,255,.045)}
.crx .slv-subnav-link:hover svg{color:var(--slv-ac,var(--cyan,#4FC7EA))}
.crx .slv-subnav-link:focus-visible{outline:2px solid var(--cyan,#4FC7EA);outline-offset:-2px}
.crx .slv-subnav-link.is-current{color:#fff;background:color-mix(in srgb,var(--slv-ac,#4FC7EA) 16%,transparent);
	box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--slv-ac,#4FC7EA) 42%,transparent)}
.crx .slv-subnav-link.is-current svg{color:var(--slv-ac,#4FC7EA)}
.crx .slv-subnav-n{font:600 12px/1 var(--font-mono,ui-monospace,monospace);font-style:normal;font-variant-numeric:tabular-nums;padding:4px 7px;
	border-radius:999px;background:rgba(79,199,234,.12);color:var(--cyan,#4FC7EA)}
.crx .slv-subnav-n.is-soon{background:rgba(245,196,81,.12);color:var(--gold,#F5C451)}

/* one accent per page: the current tab and the identity tile */
.crx.slx{--slv-ac:var(--cyan,#4FC7EA)}
.crx.slc{--slv-ac:var(--gold,#F5C451)}
.crx.sdx,.crx.spx{--slv-ac:var(--violet-2,#9B6DFF)}
.crx.tsx{--slv-ac:var(--amber,#FFAA3C)}
.crx.slx .crx-mark,.crx.slc .crx-mark,.crx.sdx .crx-mark,.crx.tsx .crx-mark{
	background:color-mix(in srgb,var(--slv-ac) 20%,var(--card-2,#212739));color:var(--slv-ac)}

@media (max-width:760px){
	.crx .slv-subnav{margin-bottom:12px;margin-inline:calc(-1 * var(--pad,18px))}
	.crx .slv-subnav-list{border-radius:0;border-inline:0;padding-inline:var(--pad,18px);
		-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
	.crx .slv-subnav-link{min-height:44px;padding:0 12px}
}

/* ---------- count chip beside a section title ---------- */
.crx .slv-n{display:inline-block;margin-left:8px;padding:3px 8px;border-radius:999px;vertical-align:3px;
	font:600 12px/1 var(--font-mono,ui-monospace,monospace);font-variant-numeric:tabular-nums;color:var(--ink-3);background:var(--card-2,#212739);border:1px solid var(--hair)}

/* ---------- round play button on a slot's art ---------- */
.crx .slv-play.cd-slot-play{position:absolute;right:10px;bottom:10px;z-index:2;display:grid;place-items:center;width:36px;height:36px;padding:0;margin:0;
	border:0;border-radius:50%;cursor:pointer;color:#12151F;background:#fff;box-shadow:0 6px 16px -6px rgba(0,0,0,.75);transition:transform .16s,box-shadow .16s}
.crx .slv-play svg{width:15px;height:15px;margin-left:2px;fill:currentColor}
.crx .slv-play:hover{transform:scale(1.08);box-shadow:0 8px 20px -6px rgba(0,0,0,.85)}
.crx .slv-play:focus-visible{outline:2px solid var(--cyan,#4FC7EA);outline-offset:2px}

/* ---------- cover rail ---------- */
.crx .slv-rail{position:relative;--slv-cols:6;--slv-gap:14px}
.crx .slv-rail-track{list-style:none;margin:0;padding:2px 0 6px;display:grid;grid-auto-flow:column;align-items:start;gap:var(--slv-gap);
	grid-auto-columns:calc((100% - (var(--slv-cols) - 1) * var(--slv-gap)) / var(--slv-cols));
	overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.crx .slv-rail-track::-webkit-scrollbar{display:none}
.crx .slv-rail-btn{position:absolute;top:calc(36% - 20px);z-index:3;display:grid;place-items:center;width:40px;height:40px;padding:0;
	border-radius:50%;cursor:pointer;color:#fff;background:rgba(18,21,31,.88);border:1px solid var(--hair-2);
	backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 8px 22px -10px rgba(0,0,0,.9);transition:background .14s,border-color .14s}
.crx .slv-rail-btn[hidden]{display:none}
.crx .slv-rail-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.crx .slv-rail-btn.is-prev{left:-14px}
.crx .slv-rail-btn.is-prev svg{transform:rotate(180deg)}
.crx .slv-rail-btn.is-next{right:-14px}
.crx .slv-rail-btn:hover{background:var(--card-3,#293046);border-color:var(--cyan,#4FC7EA)}
.crx .slv-rail-btn:focus-visible{outline:2px solid var(--cyan,#4FC7EA);outline-offset:2px}

/* one cover: art, the date strip under it, name, studio + RTP */
.crx .slv-cc{display:grid;align-content:start;gap:3px;min-width:0;scroll-snap-align:start}
.crx .slv-cc-box{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;border-radius:12px;overflow:hidden;margin-bottom:6px;background:var(--card-2,#212739);border:1px solid var(--hair);
	transition:border-color .2s,transform .2s,box-shadow .2s}
.crx .slv-cc:hover .slv-cc-box{border-color:var(--hair-2);transform:translateY(-2px);box-shadow:0 16px 30px -18px rgba(0,0,0,.85)}
.crx .slv-cc-art{position:relative;display:grid;place-items:center;aspect-ratio:4/5;overflow:hidden}
.crx .slv-cc-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.crx .slv-cc-ini{font-size:24px;font-weight:800;color:rgba(255,255,255,.6)}
.crx .slv-flag{position:absolute;top:8px;left:8px;z-index:2;padding:3px 8px;border-radius:6px;font-size:10px;font-weight:800;letter-spacing:.06em;
	text-transform:uppercase;color:#1a1206;background:var(--gold,#F5C451);box-shadow:0 4px 10px -4px rgba(0,0,0,.6)}
.crx .slv-cc.is-studio .slv-flag{color:#fff;background:rgba(18,21,31,.86);border:1px solid var(--hair-2)}
.crx .slv-strip{display:flex;align-items:center;gap:6px;min-width:0;min-height:42px;padding:6px 8px;background:var(--card-2,#212739);border-top:1px solid var(--hair)}
.crx .slv-strip time{flex:0 0 auto;display:flex;align-items:center;gap:5px;color:#fff}
.crx .slv-strip time b{font:800 22px/1 var(--font-display,Sora,inherit);font-variant-numeric:tabular-nums}
.crx .slv-strip time span{font-size:9.5px;font-weight:700;line-height:1.15;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.crx .slv-strip em{min-width:0;margin-left:auto;font:600 10.5px/1.2 var(--font-mono,ui-monospace,monospace);font-style:normal;color:var(--cyan,#4FC7EA);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crx .slv-cc.is-out .slv-strip em,.crx .slv-cc.is-studio .slv-strip em{color:var(--ink-3)}
.crx .slv-cc-name{font-size:13.5px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crx .slv-cc-meta{display:flex;align-items:baseline;gap:8px;min-width:0;font-size:12px;color:var(--ink-4)}
.crx .slv-cc-meta a{min-width:0;color:var(--ink-3);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crx .slv-cc-meta a:hover{color:#fff;text-decoration:underline;text-underline-offset:2px}
.crx .slv-cc-meta span{margin-left:auto;font:500 11.5px/1 var(--font-mono,ui-monospace,monospace);font-variant-numeric:tabular-nums;color:var(--ink-4)}

@media (min-width:1640px){ .crx .slv-rail{--slv-cols:7} }
@media (max-width:1180px){ .crx .slv-rail{--slv-cols:5} }
@media (max-width:960px){ .crx .slv-rail{--slv-cols:4} }
@media (max-width:760px){
	.crx .slv-rail{--slv-cols:2.3;--slv-gap:10px;margin-inline:calc(-1 * var(--pad,18px))}
	.crx .slv-rail-track{padding-inline:var(--pad,18px);scroll-padding-inline:var(--pad,18px)}
	.crx .slv-rail-btn{display:none}
	.crx .slv-strip time b{font-size:19px}
}
@media (hover:none){ .crx .slv-rail-btn{display:none} }
@media (prefers-reduced-motion:reduce){
	.crx .slv-subnav-link,.crx .slv-subnav-link svg,.crx .slv-play,.crx .slv-rail-btn,.crx .slv-cc-box{transition:none}
	.crx .slv-cc:hover .slv-cc-box{transform:none}
	.crx .slv-rail-track{scroll-behavior:auto}
}