/* ==========================================================================
   /slots/{provider} — studio catalogue head.
   Same compact app header the /slots hub and the rest of the tool pages wear
   (identity tile, inline H1, state pill, facts line, CTAs, stat strip). That
   head is the casino-originals system, so this file layers on
   crash-tracker.css and is scoped under .crx.spx. The game grid, search and
   player dialog stay on the parent slots styles; nothing here touches those
   hooks.
   ========================================================================== */

.crx.spx{padding-bottom:0}

/* Identity tile: a studio logo when we have one, otherwise the Slots glyph
   on the same 58px tile the casino marks use. */
.spx .crx-mark{display:grid;place-items:center;background:linear-gradient(150deg,rgba(79,199,234,.2),rgba(123,77,242,.22));color:var(--cyan,#4FC7EA)}
.spx .crx-mark svg{width:28px;height:28px}
.spx .crx-mark img{width:100%;height:100%;object-fit:cover}

/* Nothing on this page is polling a feed, so the state pill reads cyan and
   static rather than the green pulse the live boards use. */
.spx .crx-live.spx-local{background:rgba(79,199,234,.1);color:var(--cyan,#4FC7EA);border-color:rgba(79,199,234,.3)}
.spx .crx-live.spx-local i{box-shadow:0 0 0 3px rgba(79,199,234,.18);animation:none}

/* A long studio name plus "N free-play demos" can overflow phones. */
.spx .crx-ident-text{min-width:0}
@media (max-width:560px){
	.spx .crx-facts{gap:4px 10px}
	.spx .crx-facts li{white-space:normal}
	.spx .crx-facts li+li::before{content:none;margin:0}
}

/* Four tiles, not the boards' eight. */
.spx .crx-kpis{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:0}

/* Scoped kpis out-specificise the base fold — re-declare it. */
@media (max-width:1080px){
	.spx .crx-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Footnote sits in a second .crx.spx wrapper; restore the page-end padding
   the first wrapper dropped. */
.crx.spx.spx-foot{padding-top:8px;padding-bottom:clamp(40px,5vw,72px)}