/* © WatchJunk */
/* coded by nya & suzunay */

/* ── Zufallsgenerator Styles (scoped with .rng-) ── */
.rng-page{max-width:1200px;margin:40px auto 60px;padding:0 20px}
.rng-page *,.rng-page *::before,.rng-page *::after{box-sizing:border-box}

/* ── Page Header ── */
.rng-header{text-align:center;margin-bottom:40px}
.rng-header h1{font-size:clamp(2rem,4vw,3rem);font-weight:800;color:#fff;margin:0 0 10px;letter-spacing:-0.5px}
.rng-header h1 i{color:#00a3ff;margin-right:10px}
.rng-header p{color:#94a3b8;font-size:1.05rem;margin:0}

/* ── Type Selector Cards ── */
.rng-type-selector{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:32px}
.rng-type-card{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
    width:140px;padding:20px 10px;
    background:linear-gradient(135deg,rgba(30,41,59,0.7),rgba(15,23,42,0.8));
    border:2px solid rgba(0,163,255,0.12);border-radius:16px;
    cursor:pointer;transition:border-color 0.3s cubic-bezier(0.4,0,0.2,1),background 0.3s cubic-bezier(0.4,0,0.2,1),box-shadow 0.3s cubic-bezier(0.4,0,0.2,1),transform 0.3s cubic-bezier(0.4,0,0.2,1);
    user-select:none;position:relative;overflow:hidden
}
.rng-type-card i{font-size:1.8rem;color:#64748b;transition:color 0.3s ease,transform 0.3s ease}
.rng-type-card span{font-size:0.9rem;font-weight:600;color:#94a3b8;transition:color 0.3s ease;text-transform:uppercase;letter-spacing:0.5px}
.rng-type-card:hover{border-color:rgba(0,163,255,0.35);background:linear-gradient(135deg,rgba(30,41,59,0.9),rgba(15,23,42,0.95))}
.rng-type-card:hover i{color:#33b5ff;transform:scale(1.1)}
.rng-type-card:hover span{color:#e2e8f0}
.rng-type-card.active{
    border-color:#00a3ff;
    background:linear-gradient(135deg,rgba(0,163,255,0.15),rgba(15,23,42,0.95));
    box-shadow:0 0 8px rgba(0,163,255,0.2),0 0 14px rgba(0,163,255,0.08)
}
.rng-type-card.active i{color:#33b5ff;transform:scale(1.1)}
.rng-type-card.active span{color:#fff}
.rng-type-card.active::after{
    content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
    width:40px;height:3px;background:#00a3ff;border-radius:3px 3px 0 0
}

/* ── Filter Panel ── */
.rng-filters{
    background:linear-gradient(135deg,rgba(30,41,59,0.6) 0%,rgba(15,23,42,0.7) 100%);
    border:1px solid rgba(0,163,255,0.12);border-radius:18px;
    padding:28px;margin-bottom:32px;
    box-shadow:0 4px 10px rgba(0,0,0,0.25)
}
.rng-filters-title{
    font-size:0.85rem;font-weight:700;color:#33b5ff;text-transform:uppercase;
    letter-spacing:1.5px;margin:0 0 20px;padding-bottom:12px;
    border-bottom:1px solid rgba(0,163,255,0.15);
    display:flex;align-items:center;gap:8px
}
.rng-filters-title i{font-size:0.8rem}
.rng-filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.rng-filter-group{display:flex;flex-direction:column;gap:6px}
.rng-filter-group label{font-size:0.8rem;font-weight:600;color:#a8b3cf;text-transform:uppercase;letter-spacing:0.5px}
.rng-filter-group select,
.rng-filter-group input{
    padding:11px 14px;background:rgba(15,23,42,0.8);
    border:1px solid rgba(0,163,255,0.12);border-radius:10px;
    color:#fff;font-size:0.9rem;font-family:inherit;
    transition:border-color 0.3s ease,box-shadow 0.3s ease;appearance:none;
    -webkit-appearance:none;-moz-appearance:none
}
.rng-filter-group select{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8.825a.5.5 0 0 1-.354-.146l-4-4a.5.5 0 0 1 .708-.708L6 7.617l3.646-3.646a.5.5 0 0 1 .708.708l-4 4A.5.5 0 0 1 6 8.825z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center;background-size:12px;
    padding-right:36px
}
.rng-filter-group select:focus,
.rng-filter-group input:focus{
    outline:none;border-color:#00a3ff;
    box-shadow:0 0 0 3px rgba(0,163,255,0.15)
}
.rng-filter-group input::placeholder{color:#4b5563}
.rng-filter-group select option{background:#1e293b;color:#fff}

/* Dynamic filter groups */
.rng-dynamic-filters{display:contents}
.rng-dynamic-filters .rng-filter-group{transition:opacity 0.3s ease,transform 0.3s ease}

/* ── Count Selector ── */
.rng-count-section{margin-bottom:32px;text-align:center}
.rng-count-label{font-size:0.8rem;font-weight:700;color:#33b5ff;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:14px;display:block}
.rng-count-selector{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.rng-count-pill{
    width:42px;height:42px;display:flex;align-items:center;justify-content:center;
    background:rgba(30,41,59,0.7);border:1px solid rgba(0,163,255,0.12);
    border-radius:12px;color:#94a3b8;font-size:0.95rem;font-weight:600;
    cursor:pointer;transition:border-color 0.25s ease,color 0.25s ease,background 0.25s ease,box-shadow 0.25s ease,transform 0.25s ease;user-select:none
}
.rng-count-pill:hover{border-color:rgba(0,163,255,0.4);color:#e2e8f0;background:rgba(30,41,59,0.9)}
.rng-count-pill.active{
    background:linear-gradient(135deg,#00a3ff,#0084d1);border-color:#00a3ff;
    color:#fff;box-shadow:0 0 12px rgba(0,163,255,0.35);transform:scale(1.08)
}

/* ── Generate Button ── */
.rng-actions{display:flex;gap:14px;justify-content:center;align-items:center;margin-bottom:40px;flex-wrap:wrap}
.rng-generate-btn.loading i{animation:rng-spin 0.8s linear infinite}

/* ── Pulse animation for idle button ── */
@keyframes rng-pulse{
    0%,100%{box-shadow:0 4px 8px rgba(0,163,255,0.3)}
    50%{box-shadow:0 4px 10px rgba(0,163,255,0.5),0 0 14px rgba(0,163,255,0.15)}
}
.rng-generate-btn.idle{animation:rng-pulse 2.5s ease-in-out infinite}

/* ── Results Grid ── */
.rng-results{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:22px
}
.rng-card{
    display:flex;flex-direction:column;
    background:linear-gradient(180deg,#1a1f35 0%,#0f172a 100%);
    border:1px solid rgba(0,163,255,0.1);border-radius:14px;
    overflow:hidden;
    box-shadow:0 4px 8px rgba(0,0,0,0.3);
    transition:transform 0.4s cubic-bezier(0.4,0,0.2,1),box-shadow 0.4s cubic-bezier(0.4,0,0.2,1),border-color 0.4s cubic-bezier(0.4,0,0.2,1),opacity 0.4s cubic-bezier(0.4,0,0.2,1);
    opacity:0;transform:translateY(20px);
    animation:rng-fadeIn 0.5s ease forwards
}
.rng-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 14px rgba(0,0,0,0.5),0 0 10px rgba(0,163,255,0.12);
    border-color:rgba(0,163,255,0.3)
}

/* Staggered animation */
.rng-card:nth-child(1){animation-delay:0.05s}
.rng-card:nth-child(2){animation-delay:0.1s}
.rng-card:nth-child(3){animation-delay:0.15s}
.rng-card:nth-child(4){animation-delay:0.2s}
.rng-card:nth-child(5){animation-delay:0.25s}
.rng-card:nth-child(6){animation-delay:0.3s}
.rng-card:nth-child(7){animation-delay:0.35s}
.rng-card:nth-child(8){animation-delay:0.4s}
.rng-card:nth-child(9){animation-delay:0.45s}
.rng-card:nth-child(10){animation-delay:0.5s}

/* ── Card Poster ── */
.rng-card-poster{position:relative;aspect-ratio:2/3;overflow:hidden;background:#1e293b}
.rng-card-poster img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s cubic-bezier(0.4,0,0.2,1)}
.rng-card:hover .rng-card-poster img{transform:scale(1.05)}

/* Badges on poster */
.rng-badge-type{
    position:absolute;top:12px;left:12px;
    padding:5px 12px;border-radius:20px;
    font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;
}
.rng-badge-type.movie{background:rgba(0,163,255,0.85)}
.rng-badge-type.series{background:rgba(139,92,246,0.85)}
.rng-badge-type.game{background:rgba(34,197,94,0.85)}
.rng-badge-type.book{background:rgba(245,158,11,0.85)}
.rng-badge-fsk{
    position:absolute;top:12px;right:12px;
    padding:4px 10px;border-radius:8px;
    font-size:0.7rem;font-weight:700;
    background:rgba(0,0,0,0.7);color:#fbbf24;
}

/* ── Card Content ── */
.rng-card-content{padding:18px;display:flex;flex-direction:column;flex:1;gap:10px}
.rng-card-title{
    font-size:1.05rem;font-weight:700;color:#fff;
    margin:0;line-height:1.3;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.rng-card-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:0.8rem;color:#94a3b8}
.rng-card-meta span{display:inline-flex;align-items:center;gap:5px}
.rng-card-meta i{color:#00a3ff;font-size:0.7rem}
.rng-card-rating{display:flex;align-items:center;gap:4px}
.rng-card-rating .rng-star{color:#fbbf24;font-size:0.75rem}
.rng-card-rating .rng-star.empty{color:#334155}
.rng-card-rating .rng-rating-num{font-size:0.8rem;color:#94a3b8;margin-left:4px}
.rng-card-desc{
    font-size:0.82rem;color:#94a3b8;line-height:1.5;margin:0;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden
}
.rng-card-link{margin-top:auto;font-size:0.85rem}

/* ── Empty State ── */
.rng-empty{
    text-align:center;padding:60px 20px;
    grid-column:1/-1
}
.rng-empty-icon{
    font-size:4rem;color:#1e293b;margin-bottom:20px;
    display:inline-block;animation:rng-float 3s ease-in-out infinite
}
.rng-empty h3{font-size:1.3rem;font-weight:700;color:#475569;margin:0 0 8px}
.rng-empty p{font-size:0.95rem;color:#334155;margin:0}

.rng-no-results{
    text-align:center;padding:50px 20px;grid-column:1/-1
}
.rng-no-results i{font-size:3rem;color:#334155;margin-bottom:16px;display:block}
.rng-no-results p{font-size:1.1rem;color:#64748b;font-weight:500;margin:0}

.rng-error{
    text-align:center;padding:40px 20px;grid-column:1/-1;
    background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.2);
    border-radius:14px
}
.rng-error i{font-size:2rem;color:#ef4444;margin-bottom:12px;display:block}
.rng-error p{font-size:1rem;color:#f87171;font-weight:500;margin:0}

/* ── Animations ── */
@keyframes rng-fadeIn{
    from{opacity:0;transform:translateY(20px)}
    to{opacity:1;transform:translateY(0)}
}
@keyframes rng-spin{
    to{transform:rotate(360deg)}
}
@keyframes rng-float{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-10px)}
}

/* ── Responsive ── */
@media(max-width:480px){
    .rng-page{padding:0 12px;margin:24px auto 40px}
    .rng-type-selector{gap:10px}
    .rng-type-card{width:calc(50% - 5px);padding:16px 8px}
    .rng-filter-grid{grid-template-columns:1fr}
    .rng-filters{padding:20px 16px}
    .rng-actions{flex-direction:column}
    .rng-actions .hj-btn{width:100%;justify-content:center}
    .rng-results{grid-template-columns:1fr}
    .rng-count-pill{width:38px;height:38px;font-size:0.85rem}
}
@media(min-width:481px) and (max-width:768px){
    .rng-filter-grid{grid-template-columns:repeat(2,1fr)}
    .rng-results{grid-template-columns:repeat(2,1fr)}
    .rng-type-card{width:120px}
}
@media(min-width:769px) and (max-width:1199px){
    .rng-filter-grid{grid-template-columns:repeat(3,1fr)}
    .rng-results{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1200px){
    .rng-results{grid-template-columns:repeat(5,1fr)}
    .rng-filter-grid{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:2560px){
    .rng-page{max-width:1600px}
    .rng-card-title{font-size:1.2rem}
    .rng-card-desc{font-size:0.9rem}
    .rng-results{grid-template-columns:repeat(5,1fr);gap:28px}
    .rng-type-card{width:170px;padding:24px 14px}
    .rng-type-card i{font-size:2.2rem}
}
@media(min-width:3840px){
    .rng-page{max-width:2200px}
    .rng-results{grid-template-columns:repeat(6,1fr);gap:32px}
    .rng-header h1{font-size:3.5rem}
}
/* ── Shimmer Lazy Loading ── */
img.lazy {
    background: linear-gradient(90deg, #12192b 0%, #1a2542 20%, #243156 40%, #1a2542 60%, #12192b 80%) !important;
    background-size: 200% 100% !important;
    animation: imgShimmer 1.6s ease-in-out infinite !important;
}
img.lazy-loading {
    background: linear-gradient(90deg, #12192b 0%, #1a2542 20%, #243156 40%, #1a2542 60%, #12192b 80%) !important;
    background-size: 200% 100% !important;
    animation: imgShimmer 1.6s ease-in-out infinite !important;
}