/* ===========================================
   Random Slot Generator v1.2
   =========================================== */

.rsg-wrap {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    max-width: 520px;
    margin: 30px auto;
    text-align: center;
    color: #2c3e50;
}

/* ---- Spin Button ---- */
.rsg-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 38px;
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #ff512f 0%, #dd2476 100%);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .8px;
    box-shadow: 0 4px 18px rgba(221,36,118,.35);
    transition: transform .2s, box-shadow .2s, opacity .2s;
    margin-bottom: 24px;
    line-height: 1.2;
}
.rsg-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(221,36,118,.5);
}
.rsg-btn:active { transform: translateY(1px); }
.rsg-btn-icon { font-size: 24px; line-height: 1; }
.rsg-loading { opacity: .6; pointer-events: none; }

/* ---- Spin Again ---- */
.rsg-btn-again {
    display: flex;
    margin: 20px auto 0;
    padding: 12px 30px;
    font-size: 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 14px rgba(102,126,234,.35);
}
.rsg-btn-again:hover {
    box-shadow: 0 6px 22px rgba(102,126,234,.5);
}

/* ---- Footer Pool Counter ---- */
.rsg-footer {
    margin-top: 28px;
    font-size: 12px;
    color: #b0b0b0;
    letter-spacing: .3px;
    min-height: 18px;
}

/* ---- Spinner ---- */
.rsg-spinner {
    width: 40px; height: 40px;
    border: 4px solid #f0f0f0;
    border-top-color: #dd2476;
    border-radius: 50%;
    animation: rsg-spin .6s linear infinite;
    margin: 30px auto;
}
@keyframes rsg-spin { to { transform: rotate(360deg); } }

/* ---- Reel ---- */
.rsg-reel-viewport {
    height: 60px;
    overflow: hidden;
    border-radius: 12px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    margin: 0 auto;
    max-width: 400px;
    position: relative;
    box-shadow: inset 0 2px 8px rgba(0,0,0,.4);
}
.rsg-reel-viewport::before,
.rsg-reel-viewport::after {
    content: ''; position: absolute; left: 0; right: 0; height: 16px; z-index: 2; pointer-events: none;
}
.rsg-reel-viewport::before { top: 0; background: linear-gradient(to bottom, #1a1a2e, transparent); }
.rsg-reel-viewport::after  { bottom: 0; background: linear-gradient(to top, #16213e, transparent); }
.rsg-reel-strip { display: flex; flex-direction: column; transform: translateY(0); }
.rsg-reel-item {
    height: 60px; display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 700; color: #ffd32a;
    text-shadow: 0 0 10px rgba(255,211,42,.3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding: 0 20px; flex-shrink: 0;
}

/* ---- Card ---- */
.rsg-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,.08);
    text-align: left;
    transition: transform .2s, box-shadow .2s;
}
.rsg-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0,0,0,.12);
}

/* Real image */
.rsg-card-img {
    position: relative; overflow: hidden;
}
.rsg-card-img img {
    width: 100%; height: auto; display: block; transition: transform .3s;
}
.rsg-card:hover .rsg-card-img img { transform: scale(1.03); }

.rsg-provider-overlay {
    position: absolute; top: 12px; left: 12px;
    background: rgba(0,0,0,.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    color: #fff; font-size: 11px; font-weight: 600;
    padding: 5px 12px; border-radius: 20px; letter-spacing: .3px;
    z-index: 1; text-transform: uppercase;
}

/* Gradient placeholder (no image) */
.rsg-card-placeholder {
    height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: relative;
    overflow: hidden;
}
.rsg-placeholder-icon {
    font-size: 40px;
    opacity: .5;
    filter: grayscale(.3);
}
.rsg-placeholder-title {
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    text-shadow: 0 2px 12px rgba(0,0,0,.3);
    padding: 0 20px;
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Card body */
.rsg-card-body {
    padding: 18px 22px 22px;
}

/* Provider badge above title */
.rsg-provider-line {
    text-align: center;
    margin-bottom: 8px;
}
.rsg-provider-badge {
    display: inline-block;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .5px;
    border: 1px solid #e5e7eb;
}

.rsg-card-title {
    margin: 0 0 12px;
    font-size: 21px;
    font-weight: 700;
    text-align: center;
    color: #1a1a2e;
    line-height: 1.2;
}

/* Feature badges */
.rsg-badges {
    display: flex; justify-content: center; gap: 8px; margin-bottom: 14px;
}
.rsg-badge {
    display: inline-block; padding: 4px 14px; font-size: 11px; font-weight: 700;
    border-radius: 20px; text-transform: uppercase; letter-spacing: .4px;
}
.rsg-badge-bb { background: linear-gradient(135deg, #fff3e0, #ffe0b2); color: #e65100; }
.rsg-badge-mw { background: linear-gradient(135deg, #e3f2fd, #bbdefb); color: #1565c0; }

/* ---- Horizontal Pills ---- */
.rsg-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.rsg-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f9fafb;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 10px 16px;
    min-width: 90px;
    flex: 1;
}
.rsg-pill-label {
    font-size: 10px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 4px;
}
.rsg-pill-value {
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
}

/* ---- Volatility Colors ---- */
.rsg-vol-low      { color: #059669 !important; }
.rsg-vol-lowmed   { color: #0d9488 !important; }
.rsg-vol-med      { color: #d97706 !important; }
.rsg-vol-medhigh  { color: #ea580c !important; }
.rsg-vol-high     { color: #dc2626 !important; }
.rsg-vol-extreme  { color: #9333ea !important; }

/* ---- Error ---- */
.rsg-error {
    color: #e74c3c; font-weight: 600; padding: 18px;
    background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px;
}

/* ---- Animations ---- */
@keyframes rsg-fade-in {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
.rsg-fade-in { animation: rsg-fade-in .45s ease both; }

.rsg-confetti {
    position: fixed; top: -12px; z-index: 99999;
    pointer-events: none; animation: rsg-fall linear forwards;
}
@keyframes rsg-fall {
    0%   { transform: translateY(-5vh) rotate(0deg);   opacity: 1; }
    100% { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}

/* ---- Mobile ---- */
@media (max-width: 560px) {
    .rsg-wrap { margin: 15px 10px; }
    .rsg-btn { font-size: 16px; padding: 14px 26px; }
    .rsg-btn-again { font-size: 14px; padding: 10px 24px; }
    .rsg-card-title { font-size: 18px; }
    .rsg-card-body { padding: 14px 16px 18px; }
    .rsg-reel-viewport { height: 50px; }
    .rsg-reel-item { height: 50px; font-size: 17px; }
    .rsg-card-placeholder { height: 120px; }
    .rsg-placeholder-title { font-size: 18px; }
    .rsg-pills { gap: 6px; }
    .rsg-pill { padding: 8px 10px; min-width: 75px; }
    .rsg-pill-value { font-size: 13px; }
}