/* =========================================================
   RTP WORLD - GAME CARD COMPONENT
   FILE : /assets/css/rtp-card.css
========================================================= */


/* =========================================================
   GAME GRID
========================================================= */

.game-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:15px;
}


/* =========================================================
   GAME CARD
========================================================= */

.game-card{
    position:relative;
    overflow:hidden;

    border:1px solid rgba(104,163,221,.13);
    border-radius:18px;

    background:
        linear-gradient(
            180deg,
            #0d182a,
            #070e1b
        );

    box-shadow:
        0 15px 38px rgba(0,0,0,.22);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.game-card:hover{
    transform:translateY(-5px);

    border-color:rgba(83,200,255,.33);

    box-shadow:
        0 25px 55px rgba(0,0,0,.32),
        0 0 24px rgba(22,140,255,.07);
}


.game-card.hidden{
    display:none;
}


/* =========================================================
   GAME IMAGE
========================================================= */

.game-image{
    position:relative;
    height:245px;
    overflow:hidden;

    background:
        radial-gradient(
            circle,
            rgba(22,140,255,.12),
            #050b15
        );
}


.game-image img{
    width:100%;
    height:100%;
    object-fit:contain;

    transition:transform .45s ease;
}


.game-card:hover .game-image img{
    transform:scale(1.045);
}


.game-image::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to bottom,
            transparent 38%,
            rgba(4,8,16,.18) 62%,
            rgba(4,8,16,.95) 100%
        );

    pointer-events:none;
}


/* =========================================================
   BADGES
========================================================= */

.game-badges{
    position:absolute;
    top:11px;
    left:11px;
    right:11px;

    z-index:3;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
}


.provider-badge{
    padding:6px 8px;

    border:1px solid rgba(255,255,255,.12);
    border-radius:8px;

    background:rgba(4,9,18,.74);

    backdrop-filter:blur(8px);

    color:#d5e3f2;

    font-size:8px;
    font-weight:900;

    text-transform:uppercase;
    letter-spacing:.5px;
}


.status-badge{
    padding:6px 8px;

    border-radius:8px;

    background:rgba(4,9,18,.78);

    font-size:8px;
    font-weight:900;

    letter-spacing:.3px;
}


.status-badge.hot{
    color:#ffd15d;

    border:1px solid rgba(255,209,93,.18);
}


.status-badge.high{
    color:#57e6bb;

    border:1px solid rgba(87,230,187,.18);
}


.status-badge.normal{
    color:#8ea7c4;

    border:1px solid rgba(142,167,196,.12);
}


/* =========================================================
   RTP BOX - COMPACT VERSION
========================================================= */

.rtp-box{
    position:absolute;
    z-index:5;

    left:50%;
    bottom:-1px;

    transform:translate(-50%,50%);

    width:86px;
    min-width:86px;

    padding:7px 6px 6px;

    text-align:center;

    border:1px solid rgba(77,190,255,.65);
    border-radius:12px;

    background:
        linear-gradient(
            145deg,
            rgba(16,43,76,.98),
            rgba(6,18,34,.98)
        );

    box-shadow:
        0 8px 18px rgba(0,0,0,.42),
        0 0 14px rgba(34,190,255,.16),
        inset 0 0 14px rgba(90,210,255,.035);

    backdrop-filter:blur(8px);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


/* Decorative line berbeda dari referensi */

.rtp-box::before{
    content:"";

    position:absolute;

    left:50%;
    top:4px;

    transform:translateX(-50%);

    width:28px;
    height:2px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #39c8ff,
            transparent
        );

    opacity:.9;
}


/* RTP Number */

.rtp-number{
    display:block;

    margin-top:2px;

    color:#71d5ff;

    font-size:16px;
    line-height:1.1;

    font-weight:950;

    letter-spacing:-.4px;

    text-shadow:
        0 0 7px rgba(113,213,255,.38),
        0 0 15px rgba(22,140,255,.15);
}


/* RTP Label */

.rtp-label{
    display:block;

    margin-top:3px;

    color:#7d9ab8;

    font-size:6px;
    line-height:1;

    font-weight:900;

    letter-spacing:1px;

    text-transform:uppercase;
}


/* Hover glow */

.game-card:hover .rtp-box{
    transform:translate(-50%,50%) scale(1.045);

    border-color:rgba(104,215,255,.9);

    box-shadow:
        0 10px 24px rgba(0,0,0,.46),
        0 0 20px rgba(34,190,255,.28),
        0 0 34px rgba(22,140,255,.10);
}


/* =========================================================
   GAME BODY
========================================================= */

.game-body{
    padding:30px 13px 14px;
}


.game-name{
    min-height:38px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#f3f7fc;

    text-align:center;

    font-size:12px;
    font-weight:850;
    line-height:1.35;
}


.game-provider{
    margin-top:2px;

    color:#61758e;

    text-align:center;

    font-size:8px;
    font-weight:900;

    letter-spacing:1px;
    text-transform:uppercase;
}


/* =========================================================
   RTP PROGRESS BAR
========================================================= */

.rtp-bar{
    height:4px;

    margin-top:13px;

    overflow:hidden;

    border-radius:999px;

    background:rgba(255,255,255,.055);
}


.rtp-bar span{
    display:block;

    height:100%;

    border-radius:inherit;

    background:
        linear-gradient(
            90deg,
            #167dff,
            #27d9ff
        );

    box-shadow:
        0 0 8px rgba(39,217,255,.35);
}


/* =========================================================
   FOOTER GAME CARD
========================================================= */

.game-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:8px;

    margin-top:11px;
}


.active-status{
    display:flex;
    align-items:center;
    gap:6px;

    color:#71849b;

    font-size:8px;
    font-weight:900;
}


.active-dot{
    width:6px;
    height:6px;

    border-radius:50%;

    background:#19d99b;

    box-shadow:
        0 0 8px rgba(25,217,155,.75);
}


/* =========================================================
   PLAY BUTTON
========================================================= */

.play-button{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:7px 10px;

    border:1px solid rgba(83,200,255,.20);
    border-radius:8px;

    background:
        linear-gradient(
            135deg,
            rgba(22,140,255,.14),
            rgba(34,229,255,.045)
        );

    color:#69ceff;

    font-size:8px;
    font-weight:900;

    letter-spacing:.4px;

    transition:.2s ease;
}


.play-button:hover{
    color:#ffffff;

    border-color:rgba(83,200,255,.48);

    background:
        rgba(22,140,255,.20);

    box-shadow:
        0 0 14px rgba(22,140,255,.12);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1050px){

    .game-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

}


@media(max-width:820px){

    .game-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}


@media(max-width:560px){

    .game-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
    }

    .game-image{
        height:190px;
    }

    .game-body{
        padding:28px 9px 11px;
    }

    .game-name{
        min-height:34px;
        font-size:10px;
    }

    .game-provider{
        font-size:7px;
    }

    .rtp-box{
        width:78px;
        min-width:78px;

        padding:6px 5px;
        border-radius:11px;
    }

    .rtp-number{
        font-size:14px;
    }

    .rtp-label{
        font-size:5px;
    }

    .play-button{
        padding:6px 7px;
        font-size:7px;
    }

}

/* TEST RTP CARD */
.rtp-box {
    width: 86px !important;
    min-width: 86px !important;
    height: 52px !important;

    background: #071a30 !important;
    border: 2px solid #35c8ff !important;

    box-shadow:
        0 0 10px rgba(53,200,255,.8),
        0 0 25px rgba(53,200,255,.35) !important;
}

.rtp-number {
    color: #72dcff !important;
    font-size: 16px !important;
}

.rtp-label {
    color: #ffffff !important;
}

/* =========================================================
   RTP WORLD - PREMIUM GAME INFO PANEL
   Area bawah gambar / game-body
========================================================= */

.game-body{
    position:relative;
    overflow:hidden;

    padding:32px 13px 14px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(42,177,255,.13),
            transparent 48%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(22,115,255,.06),
            transparent 55%
        ),
        linear-gradient(
            180deg,
            #0b192d 0%,
            #081321 48%,
            #07101d 100%
        );

    border-top:1px solid rgba(71,180,255,.08);
}


/* =========================================================
   TOP DECORATIVE LINE
========================================================= */

.game-body::before{
    content:"";

    position:absolute;

    top:0;
    left:14%;
    right:14%;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(55,196,255,.65),
            transparent
        );

    opacity:.8;
}


/* =========================================================
   SUBTLE CENTER GLOW
========================================================= */

.game-body::after{
    content:"";

    position:absolute;

    width:180px;
    height:80px;

    left:50%;
    top:-35px;

    transform:translateX(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(35,180,255,.10),
            transparent 70%
        );

    pointer-events:none;
}


/* =========================================================
   GAME NAME
========================================================= */

.game-name{
    position:relative;
    z-index:2;

    min-height:34px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0 4px;

    color:#f5f9ff;

    text-align:center;

    font-size:12px;
    font-weight:900;

    line-height:1.35;

    letter-spacing:-.1px;

    text-shadow:
        0 0 12px rgba(91,200,255,.08);
}


/* =========================================================
   GAME PROVIDER
========================================================= */

.game-provider{
    position:relative;
    z-index:2;

    margin-top:4px;

    color:#6f8ba8;

    text-align:center;

    font-size:7px;
    font-weight:900;

    letter-spacing:1.3px;

    text-transform:uppercase;
}


/* =========================================================
   SMALL INFO DIVIDER
========================================================= */

.game-provider::after{
    content:"";

    display:block;

    width:34px;
    height:1px;

    margin:8px auto 0;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(48,190,255,.55),
            transparent
        );
}


/* =========================================================
   RTP PROGRESS BAR
========================================================= */

.rtp-bar{
    position:relative;
    z-index:2;

    height:4px;

    margin-top:11px;

    overflow:hidden;

    border-radius:999px;

    background:
        rgba(255,255,255,.055);

    box-shadow:
        inset 0 0 5px rgba(0,0,0,.35);
}


.rtp-bar span{
    display:block;

    height:100%;

    border-radius:inherit;

    background:
        linear-gradient(
            90deg,
            #1688ff 0%,
            #25caff 55%,
            #43e0ff 100%
        );

    box-shadow:
        0 0 8px rgba(38,200,255,.42),
        0 0 15px rgba(22,140,255,.12);
}


/* =========================================================
   FOOTER
========================================================= */

.game-footer{
    position:relative;
    z-index:2;

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:8px;

    margin-top:11px;
}


/* =========================================================
   ACTIVE STATUS
========================================================= */

.active-status{
    display:flex;

    align-items:center;

    gap:5px;

    min-width:0;

    color:#7289a3;

    font-size:7px;
    font-weight:900;

    letter-spacing:.5px;

    white-space:nowrap;
}


/* =========================================================
   ACTIVE DOT
========================================================= */

.active-dot{
    width:6px;
    height:6px;

    flex:0 0 6px;

    border-radius:50%;

    background:#16e5a0;

    box-shadow:
        0 0 6px rgba(22,229,160,.8),
        0 0 12px rgba(22,229,160,.25);
}


/* =========================================================
   ACTIVITY COUNT
========================================================= */

.activity-count{
    color:#d6e9f9;

    font-weight:950;

    letter-spacing:.2px;
}


/* =========================================================
   ACTIVITY LABEL
========================================================= */

.activity-label{
    color:#617994;

    font-size:6px;

    letter-spacing:.8px;
}


/* =========================================================
   LIVE / ACTIVITY BADGE
========================================================= */

.activity-badge{
    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-left:3px;

    padding:3px 5px;

    border:1px solid rgba(48,196,255,.22);

    border-radius:5px;

    background:
        rgba(25,137,255,.06);

    color:#5fcaff;

    font-size:5px;

    font-weight:950;

    line-height:1;

    letter-spacing:.7px;

    text-transform:uppercase;
}


/* =========================================================
   PLAY BUTTON
========================================================= */

.play-button{
    position:relative;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-width:76px;

    padding:7px 10px;

    border:1px solid rgba(52,191,255,.28);

    border-radius:8px;

    background:
        linear-gradient(
            135deg,
            rgba(22,140,255,.16),
            rgba(32,215,255,.07)
        );

    color:#64d2ff;

    font-size:7px;
    font-weight:950;

    letter-spacing:.5px;

    text-decoration:none;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease,
        color .2s ease;
}


.play-button:hover{
    transform:translateY(-1px);

    border-color:
        rgba(71,210,255,.65);

    background:
        linear-gradient(
            135deg,
            rgba(22,140,255,.25),
            rgba(32,215,255,.12)
        );

    color:#ffffff;

    box-shadow:
        0 0 14px rgba(28,173,255,.18);
}


/* =========================================================
   CARD HOVER
========================================================= */

.game-card:hover .game-body{
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(42,190,255,.16),
            transparent 48%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(22,115,255,.07),
            transparent 55%
        ),
        linear-gradient(
            180deg,
            #0c1b30 0%,
            #081321 50%,
            #07101d 100%
        );
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:560px){

    .game-body{
        padding:29px 9px 11px;
    }

    .game-name{
        min-height:32px;

        font-size:10px;
    }

    .game-provider{
        font-size:6px;
    }

    .game-provider::after{
        margin-top:7px;
    }

    .rtp-bar{
        margin-top:10px;
    }

    .game-footer{
        margin-top:9px;

        gap:5px;
    }

    .active-status{
        font-size:6px;
    }

    .activity-badge{
        font-size:4.5px;
        padding:3px 4px;
    }

    .play-button{
        min-width:68px;

        padding:6px 7px;

        font-size:6px;
    }

}