@keyframes pk-bucket-pop {
    0%   { transform: translateY(-4px) scale(0.9); }
    55%  { transform: translateY(3px) scale(1.14); }
    100% { transform: translateY(2px) scale(1.06); }
}
@scope ([data-iw4m-plugin="Credify"]) to ([data-iw4m-host]) {
/* Credify Plinko — neutral casino felt + a peg board. Bespoke `.pk-*` classes only, served at
   /_content/credify/plinko/plinko.css so it can't collide with host CSS. Layout/utility classes used in the
   page come from plugin.css; host design tokens (--color-*) are referenced where it helps match the theme. */

.pk-felt {
    background: radial-gradient(130% 110% at 50% -10%, #19233f 0%, #121a30 45%, #080b16 100%);
}

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

.pk-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;
}

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

/* ── board ───────────────────────────────────────────────────────────── */
.pk-board {
    max-width: 52rem; margin-inline: auto;
    padding: 0.9rem 0.9rem 0.6rem;
    border-radius: 1.2rem;
    background: linear-gradient(180deg, #1d2747, #131b32);
    border: 1px 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.1);
}

.pk-canvas { display: block; width: 100%; }

/* the bucket strip lines up 1:1 with the canvas (both full width, rows+1 even columns). The grid gap is 0 so
   each track centre is exactly (k+0.5)·width/(rows+1) — matching where plinko.js lands the ball; the visual
   separation comes from a symmetric margin, which keeps those centres unchanged. */
.pk-buckets { display: grid; gap: 0; margin-top: 0.3rem; }
.pk-bucket {
    text-align: center;
    margin-inline: 1px;
    padding: 0.3rem 0.05rem;
    border-radius: 0.4rem;
    font-weight: 800;
    font-size: clamp(0.42rem, 1.25vw, 0.72rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.1;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.2s ease;
}
.pk-bucket-low  { background: rgba(99, 102, 241, 0.14);  color: #c7d2fe; }
.pk-bucket-win  { background: rgba(16, 185, 129, 0.16);  color: #6ee7b7; }
.pk-bucket-big  { background: rgba(245, 158, 11, 0.18);  color: #fcd34d; }
.pk-bucket-huge { background: rgba(244, 63, 94, 0.18);   color: #fda4af; }

.pk-bucket { position: relative; }
.pk-bucket-landed {
    transform: translateY(2px) scale(1.06);
    filter: brightness(1.25);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 18px 2px rgba(252, 211, 77, 0.5);
    animation: pk-bucket-pop 0.4s cubic-bezier(0.18, 1.4, 0.4, 1);
}
/* how many balls landed in this bucket (only shown when >1) */
.pk-bucket-count {
    position: absolute;
    top: -0.5rem;
    right: -0.3rem;
    min-width: 1.05rem;
    padding: 0 0.2rem;
    border-radius: 9999px;
    background: var(--color-action-primary, #6366f1);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    line-height: 1.05rem;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

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

/* ── controls ────────────────────────────────────────────────────────── */
.pk-controls { max-width: 42rem; margin-inline: auto; }

.pk-field { display: inline-flex; align-items: center; gap: 0.6rem; }
.pk-field-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.5); }

.pk-segment {
    display: inline-flex; padding: 0.2rem; gap: 0.2rem;
    border-radius: 0.7rem; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.1);
}
.pk-seg {
    min-width: 2.6rem; padding: 0.35rem 0.7rem; border-radius: 0.5rem;
    font-weight: 700; font-size: 0.85rem; color: #c7d2fe;
    transition: background 0.15s ease, color 0.15s ease, transform 0.05s ease;
}
.pk-seg:not(:disabled):hover { background: rgba(255, 255, 255, 0.08); }
.pk-seg:not(:disabled):active { transform: translateY(1px); }
.pk-seg:disabled { opacity: 0.5; cursor: not-allowed; }
.pk-seg-on { background: var(--color-action-primary, #6366f1); color: #fff; }

.pk-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;
}
.pk-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pk-btn-primary { background: var(--color-action-primary, #6366f1); color: #fff; }
.pk-btn-primary:hover:not(:disabled) { filter: brightness(1.1); }
.pk-btn-drop {
    background: linear-gradient(180deg, #f59e0b, #b45309); color: #fff;
    font-size: 1.05rem; padding-inline: 2rem;
    box-shadow: 0 8px 20px rgba(180, 83, 9, 0.4);
}
.pk-btn-drop:hover:not(:disabled) { filter: brightness(1.08); }
.pk-btn-drop:active:not(:disabled) { transform: translateY(1px); }

}