@keyframes sl-blur {
    0%   { filter: blur(3px); }
    60%  { filter: blur(1px); }
    100% { filter: blur(0); }
}
@keyframes sl-pop { 0% { transform: scale(0.82); } 55% { transform: scale(1.12); } 100% { transform: scale(1); } }
@scope ([data-iw4m-plugin="Credify"]) to ([data-iw4m-host]) {
/* Credify Slots — neutral casino felt + a 3-reel machine. Layout/chrome come from the host
   classes via PluginPageShell; these are the game-specific bits only. */

.sl-felt {
    background: radial-gradient(130% 110% at 50% -10%, #2a1430 0%, #1a1022 45%, #0a0710 100%);
}

.sl-muted { color: var(--color-subtle, #a1a1aa); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; }

.sl-chip-stat {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.35rem 0.7rem; border-radius: 0.6rem;
    background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.08);
    font-weight: 700; font-size: 0.85rem;
}

.sl-panel {
    border-radius: 1rem; padding: 1.25rem;
    background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── machine ─────────────────────────────────────────────────────────── */
.sl-machine {
    position: relative;
    max-width: 30rem; margin-inline: auto;
    padding: 1.1rem; border-radius: 1.2rem;
    background: linear-gradient(180deg, #3a2350, #241338);
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.sl-reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }

.sl-reel {
    position: relative; overflow: hidden;
    aspect-ratio: 3 / 4; border-radius: 0.7rem;
    background: linear-gradient(180deg, #fdfdfd, #d6d6e0);
    box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.25), inset 0 12px 18px rgba(0, 0, 0, 0.18), inset 0 -12px 18px rgba(0, 0, 0, 0.18);
    display: flex; align-items: center; justify-content: center;
}

.sl-reel-glyph {
    font-size: clamp(2.2rem, 12vw, 3.4rem); font-weight: 900;
    color: #1a1022; line-height: 1; user-select: none;
    font-family: ui-sans-serif, system-ui, "Segoe UI Emoji", sans-serif;
}

/* scrolling strip (built by slots.js for the duration of a spin) */
.sl-strip {
    position: absolute; top: 0; left: 0; right: 0;
    display: flex; flex-direction: column;
    will-change: transform; backface-visibility: hidden;
}
.sl-strip-cell {
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    font-size: clamp(2.2rem, 12vw, 3.4rem); font-weight: 900;
    color: #1a1022; line-height: 1; user-select: none;
    font-family: ui-sans-serif, system-ui, "Segoe UI Emoji", sans-serif;
}
/* motion blur that eases out as the reel slows — sells the speed without the cells tearing */
.sl-strip-spin { animation: sl-blur var(--sl-dur, 1200ms) ease-out forwards; }

.sl-settled { animation: sl-pop 0.3s cubic-bezier(0.18, 1.4, 0.4, 1); }

/* payline across the middle of the reels */
.sl-payline {
    position: absolute; left: 0.6rem; right: 0.6rem; top: 50%;
    height: 2px; transform: translateY(-50%);
    background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.7), transparent);
    pointer-events: none;
}
.sl-reels-spinning ~ .sl-payline { opacity: 0.35; }

/* (win/loss feedback is the shared GameResultToast — see custom.css `.credify-toast*`) */

/* ── chips + lever ───────────────────────────────────────────────────── */
.sl-chip {
    min-width: 3.2rem; padding: 0.45rem 0.7rem; border-radius: 0.6rem; font-weight: 700; font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: #e4e4e7;
    transition: background 0.15s ease, transform 0.05s ease;
}
.sl-chip:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); }
.sl-chip:active:not(:disabled) { transform: translateY(1px); }
.sl-chip:disabled { opacity: 0.4; cursor: not-allowed; }
.sl-chip-max { color: #fcd34d; }
.sl-chip-clear { color: #fda4af; }

.sl-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.65rem 1.5rem; border-radius: 0.8rem; font-weight: 800;
    transition: filter 0.15s ease, transform 0.05s ease;
}
.sl-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sl-btn-primary { background: var(--color-action-primary, #6366f1); color: #fff; }
.sl-btn-primary:hover:not(:disabled) { filter: brightness(1.1); }
.sl-btn-lever {
    background: linear-gradient(180deg, #f43f5e, #be123c); color: #fff;
    font-size: 1.05rem; padding-inline: 2rem;
    box-shadow: 0 8px 20px rgba(190, 18, 60, 0.4);
}
.sl-btn-lever:hover:not(:disabled) { filter: brightness(1.08); }
.sl-btn-lever:active:not(:disabled) { transform: translateY(1px); }

/* ── paytable ────────────────────────────────────────────────────────── */
.sl-paytable {
    max-width: 24rem; margin-inline: auto;
    border-radius: 0.8rem; padding: 0.4rem 0.7rem;
    background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.07);
}
.sl-paytable-row {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.6rem;
    padding: 0.35rem 0.25rem; font-size: 0.85rem;
}
.sl-paytable-row + .sl-paytable-row { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.sl-paytable-combo { display: inline-flex; gap: 0.15rem; }
.sl-pt-glyph { font-weight: 900; font-size: 0.95rem; }
.sl-pt-dim { opacity: 0.35; }
.sl-paytable-label { color: #a1a1aa; }
.sl-paytable-mult { font-weight: 800; color: #fcd34d; font-variant-numeric: tabular-nums; }

}