/*
|--------------------------------------------------------------------------
| HRY Wallet Theme
|--------------------------------------------------------------------------
*/

:root{

    --bg:#070707;

    --card:#111111;

    --card2:#181818;

    --gold:#f7b500;

    --gold2:#ffd54a;

    --border:#6f5418;

    --white:#ffffff;

    --muted:#9c9c9c;

    --green:#00d27a;

    --red:#ff5d5d;

    --blue:#2ec8ff;

    --shadow:0 0 35px rgba(247,181,0,.10);

}

.hry-wallet-page{

    color:var(--white);

}

.hry-wallet-page a{

    text-decoration:none;

}






/*
|--------------------------------------------------------------------------
| Hero Card
|--------------------------------------------------------------------------
*/

.hry-hero-card{

    background:linear-gradient(135deg,#111,#1b1b1b);

    border:1px solid var(--border);

    border-radius:24px;

    padding:45px;

    overflow:hidden;

    position:relative;

    box-shadow:var(--shadow);

}

.hry-hero-card::before{

    content:'';

    position:absolute;

    width:350px;

    height:350px;

    background:rgba(247,181,0,.08);

    border-radius:50%;

    top:-140px;

    right:-140px;

}

.hero-badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:40px;

    background:rgba(247,181,0,.15);

    color:var(--gold);

    font-size:13px;

    letter-spacing:1px;

    margin-bottom:20px;

}

.hry-hero-card h2{

    font-size:42px;

    font-weight:700;

    color:#fff;

    margin-bottom:20px;

}

.hry-hero-card p{

    color:#bdbdbd;

    line-height:28px;

    max-width:600px;

}

.hero-buttons{

    margin-top:30px;

}






/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/

.btn-gold{

    display:inline-block;

    padding:14px 34px;

    background:linear-gradient(135deg,#f7b500,#ffd54a);

    color:#111;

    border-radius:50px;

    font-weight:700;

    transition:.35s;

    margin-right:12px;

}

.btn-gold:hover{

    transform:translateY(-3px);

    color:#111;

    box-shadow:0 12px 35px rgba(247,181,0,.35);

}

.btn-dark{

    display:inline-block;

    padding:14px 34px;

    border-radius:50px;

    border:1px solid var(--border);

    color:#fff;

    transition:.35s;

}

.btn-dark:hover{

    background:rgba(247,181,0,.12);

    color:#fff;

}






/*
|--------------------------------------------------------------------------
| Hero Coin Image
|--------------------------------------------------------------------------
*/

.hero-coin{

    width:260px;

    max-width:100%;

    animation:coinFloat 4s ease-in-out infinite;

}

@keyframes coinFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}

/*
|--------------------------------------------------------------------------
| Wallet Card
|--------------------------------------------------------------------------
*/

.wallet-card{

    position:relative;

    background:linear-gradient(145deg,#111,#1b1b1b);

    border:1px solid rgba(247,181,0,.20);

    border-radius:22px;

    padding:35px;

    overflow:hidden;

    transition:.35s;

    box-shadow:0 8px 25px rgba(0,0,0,.35);

}

.wallet-card::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    background:radial-gradient(circle,rgba(247,181,0,.18),transparent);

    right:-100px;

    top:-100px;

}

.wallet-card:hover{

    transform:translateY(-6px);

    border-color:var(--gold);

    box-shadow:0 18px 45px rgba(247,181,0,.18);

}

.wallet-card small{

    display:block;

    color:#a8a8a8;

    font-size:15px;

    margin-bottom:12px;

    letter-spacing:.5px;

}

.wallet-card h2{

    color:#fff;

    font-size:34px;

    font-weight:700;

    margin-bottom:10px;

}

.wallet-card span{

    color:#9e9e9e;

}

.coin-card{

    border-color:rgba(46,200,255,.30);

}

.coin-card:hover{

    border-color:var(--blue);

    box-shadow:0 18px 45px rgba(46,200,255,.18);

}





/*
|--------------------------------------------------------------------------
| Action Card
|--------------------------------------------------------------------------
*/

.action-card{

    background:#111;

    border:1px solid rgba(247,181,0,.18);

    border-radius:18px;

    padding:30px 15px;

    text-align:center;

    transition:.35s;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}

.action-card:hover{

    transform:translateY(-6px);

    border-color:var(--gold);

    background:#181818;

    box-shadow:0 15px 35px rgba(247,181,0,.16);

}

.action-card i{

    width:70px;

    height:70px;

    line-height:70px;

    border-radius:50%;

    font-size:26px;

    color:var(--gold);

    margin-bottom:18px;

}

.action-card h6{

    color:#fff;

    font-size:16px;

    margin:0;

    font-weight:600;

}





/*
|--------------------------------------------------------------------------
| Rate Card
|--------------------------------------------------------------------------
*/

.rate-card{

    background:linear-gradient(145deg,#111,#1b1b1b);

    border:1px solid rgba(247,181,0,.18);

    border-radius:22px;

    overflow:hidden;

    transition:.35s;

}

.rate-card:hover{

    transform:translateY(-5px);

    border-color:var(--gold);

    box-shadow:0 18px 45px rgba(247,181,0,.16);

}

.rate-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 28px;

    border-bottom:1px solid rgba(255,255,255,.06);

}

.rate-header h5{

    margin:0;

    color:#fff;

    font-size:20px;

    font-weight:600;

}

.badge-rate{

    background:rgba(247,181,0,.15);

    color:var(--gold);

    padding:7px 14px;

    border-radius:50px;

    font-size:12px;

    font-weight:600;

}

.rate-body{

    padding:30px;

}

.rate-body h2{

    color:#fff;

    font-size:30px;

    margin-bottom:20px;

    font-weight:700;

}

.rate-body i{

    color:var(--gold);

}

.rate-body p{

    color:#a5a5a5;

    margin:0;

}

.rate-body strong{

    color:#fff;

}

/*
|--------------------------------------------------------------------------
| Mini Statistics Card
|--------------------------------------------------------------------------
*/

.mini-card{

    background:linear-gradient(145deg,#101010,#191919);

    border:1px solid rgba(247,181,0,.15);

    border-radius:18px;

    padding:25px;

    text-align:center;

    transition:.35s;

    height:100%;

}

.mini-card:hover{

    transform:translateY(-5px);

    border-color:var(--gold);

    box-shadow:0 15px 40px rgba(247,181,0,.12);

}

.mini-card small{

    display:block;

    color:#999;

    font-size:14px;

    margin-bottom:12px;

}

.mini-card h3{

    color:#fff;

    font-size:32px;

    font-weight:700;

    margin-bottom:8px;

}

.mini-card span{

    color:var(--gold);

    font-size:14px;

}





/*
|--------------------------------------------------------------------------
| Notice Card
|--------------------------------------------------------------------------
*/

.notice-card{

    background:linear-gradient(145deg,#111,#1b1b1b);

    border:1px solid rgba(247,181,0,.18);

    border-radius:22px;

    padding:35px;

    margin-top:10px;

}

.notice-card h5{

    color:#fff;

    margin-bottom:20px;

    font-weight:600;

}

.notice-card ul{

    margin:0;

    padding-left:20px;

}

.notice-card ul li{

    color:#b8b8b8;

    margin-bottom:12px;

    line-height:28px;

}

.notice-card strong{

    color:var(--gold);

}

.wallet-icon-big{

    font-size:90px;

    color:rgba(247,181,0,.25);

}





/*
|--------------------------------------------------------------------------
| Scrollbar
|--------------------------------------------------------------------------
*/

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#111;

}

::-webkit-scrollbar-thumb{

    background:var(--gold);

    border-radius:20px;

}

/*
|--------------------------------------------------------------------------
| Input
|--------------------------------------------------------------------------
*/

.hry-input{

    background:#101010;

    border:1px solid rgba(247,181,0,.25);

    color:#fff;

    height:55px;

    border-radius:14px;

}

.hry-input:focus{

    background:#111;

    color:#fff;

    border-color:#f7b500;

    box-shadow:0 0 15px rgba(247,181,0,.18);

}

.hry-input::placeholder{

    color:#777;

}

label{

    color:#cfcfcf;

    margin-bottom:8px;

    font-weight:500;

}



/*
|--------------------------------------------------------------------------
| History Card
|--------------------------------------------------------------------------
*/

.history-card{

    background:linear-gradient(145deg,#111,#1b1b1b);

    border:1px solid rgba(247,181,0,.18);

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 15px 40px rgba(0,0,0,.30);

}

.history-header{

    padding:25px 30px;

    border-bottom:1px solid rgba(255,255,255,.06);

}

.history-header h5{

    color:#fff;

    margin:0;

    font-weight:600;

}

.search-box{

    max-width:280px;

    float:right;

}





/*
|--------------------------------------------------------------------------
| History Table
|--------------------------------------------------------------------------
*/

.hry-table{

    margin:0;

    color:#fff;

}

.hry-table thead{

    background:#0d0d0d;

}

.hry-table thead th{

    color:var(--gold);

    border:none;

    padding:18px;

    font-weight:600;

    white-space:nowrap;

}

.hry-table tbody td{

    padding:18px;

    border-color:rgba(255,255,255,.05);

    vertical-align:middle;

}

.hry-table tbody tr{

    transition:.30s;

}

.hry-table tbody tr:hover{

    background:rgba(247,181,0,.05);

}





/*
|--------------------------------------------------------------------------
| Badge
|--------------------------------------------------------------------------
*/

.badge-success{

    display:inline-block;

    padding:6px 14px;

    border-radius:30px;

    background:rgba(0,210,122,.18);

    color:#00d27a;

    font-size:12px;

    font-weight:600;

}

.badge-warning{

    display:inline-block;

    padding:6px 14px;

    border-radius:30px;

    background:rgba(247,181,0,.18);

    color:#f7b500;

    font-size:12px;

    font-weight:600;

}

.badge-dark{

    display:inline-block;

    padding:6px 14px;

    border-radius:30px;

    background:#2b2b2b;

    color:#ddd;

    font-size:12px;

    font-weight:600;

}





/*
|--------------------------------------------------------------------------
| Table Text
|--------------------------------------------------------------------------
*/

.hry-table .text-success{

    color:#00d27a !important;

}

.hry-table .text-danger{

    color:#ff5d5d !important;

}

.hry-table .text-muted{

    color:#8f8f8f !important;

}


/*
|--------------------------------------------------------------------------
| Game Card
|--------------------------------------------------------------------------
*/

.game-card{

    position:relative;

    background:linear-gradient(145deg,#101010,#1a1a1a);

    border:1px solid rgba(247,181,0,.15);

    border-radius:22px;

    padding:28px;

    overflow:hidden;

    transition:.35s;

    height:100%;

    box-shadow:0 8px 30px rgba(0,0,0,.35);

}

.game-card:hover{

    transform:translateY(-8px);

    border-color:#f7b500;

    box-shadow:0 18px 45px rgba(247,181,0,.20);

}

.game-card::before{

    content:'';

    position:absolute;

    width:220px;

    height:220px;

    right:-120px;

    top:-120px;

    border-radius:50%;

    background:radial-gradient(circle,
        rgba(247,181,0,.15),
        transparent);

}





/*
|--------------------------------------------------------------------------
| Game Icon
|--------------------------------------------------------------------------
*/

.game-icon{

    width:85px;

    height:85px;

    border-radius:20px;

    background:linear-gradient(135deg,#f7b500,#ffd54a);

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:22px;

    box-shadow:0 12px 30px rgba(247,181,0,.25);

}

.game-icon i{

    font-size:34px;

    color:#111;

}





/*
|--------------------------------------------------------------------------
| Game Title
|--------------------------------------------------------------------------
*/

.game-card h4{

    color:#fff;

    font-size:24px;

    font-weight:700;

    margin-bottom:10px;

}

.game-card p{

    color:#a9a9a9;

    line-height:28px;

    min-height:60px;

}





/*
|--------------------------------------------------------------------------
| Game Info
|--------------------------------------------------------------------------
*/

.game-info{

    margin:25px 0;

    display:flex;

    justify-content:space-between;

    gap:15px;

}

.game-info div{

    flex:1;

    background:#0d0d0d;

    border:1px solid rgba(255,255,255,.05);

    border-radius:14px;

    padding:15px;

    text-align:center;

    color:#9d9d9d;

    font-size:13px;

}

.game-info strong{

    display:block;

    margin-top:8px;

    color:#fff;

    font-size:18px;

}





/*
|--------------------------------------------------------------------------
| Play Button
|--------------------------------------------------------------------------
*/

.game-card .btn-gold{

    width:100%;

    text-align:center;

    margin-top:10px;

}





/*
|--------------------------------------------------------------------------
| Ribbon
|--------------------------------------------------------------------------
*/

.game-card .coming{

    position:absolute;

    top:18px;

    right:-40px;

    width:150px;

    text-align:center;

    background:#ff9800;

    color:#111;

    font-weight:700;

    font-size:12px;

    transform:rotate(45deg);

    padding:6px 0;

}





/*
|--------------------------------------------------------------------------
| Game Card Animation
|--------------------------------------------------------------------------
*/

.game-card{

    animation:gameFade .45s ease;

}

@keyframes gameFade{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}





/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media(max-width:768px){

    .game-card{

        padding:22px;

    }

    .game-icon{

        width:70px;

        height:70px;

    }

    .game-icon i{

        font-size:28px;

    }

    .game-card h4{

        font-size:20px;

    }

}


/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media(max-width:768px){

    .history-header{

        text-align:center;

    }

    .search-box{

        float:none;

        max-width:100%;

        margin-top:20px;

    }

    .hry-table{

        min-width:900px;

    }

}



/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media(max-width:992px){

    .hry-hero-card{

        padding:30px;

        text-align:center;

    }

    .hry-hero-card h2{

        font-size:32px;

    }

    .hero-coin{

        width:180px;

        margin-top:30px;

    }

    .wallet-card{

        padding:25px;

    }

    .wallet-card h2{

        font-size:28px;

    }

    .rate-body h2{

        font-size:24px;

    }

}





@media(max-width:768px){

    .hero-buttons a{

        display:block;

        width:100%;

        margin:10px 0;

    }

    .action-card{

        padding:20px;

    }

    .action-card i{

        width:55px;

        height:55px;

        line-height:55px;

        font-size:20px;

    }

    .mini-card{

        margin-bottom:20px;

    }

}





@media(max-width:576px){

    .hry-hero-card{

        border-radius:16px;

    }

    .wallet-card{

        border-radius:16px;

    }

    .rate-card{

        border-radius:16px;

    }

    .notice-card{

        border-radius:16px;

        padding:25px;

    }

}

/*
|--------------------------------------------------------------------------
| Treasure Effects
|--------------------------------------------------------------------------
*/

.treasure-box{

    position:relative;

    overflow:hidden;

}

.treasure-box.locked{

    pointer-events:none;

}

.treasure-box.shake{

    animation:treasureShake .5s;
}

@keyframes treasureShake{

    0%{transform:translateX(0);}

    20%{transform:translateX(-8px);}

    40%{transform:translateX(8px);}

    60%{transform:translateX(-6px);}

    80%{transform:translateX(6px);}

    100%{transform:translateX(0);}

}



.treasure-box.glow{

    box-shadow:

    0 0 20px #f7b500,

    0 0 45px rgba(247,181,0,.8),

    0 0 80px rgba(247,181,0,.5);

}



.treasure-box.open{

    transform:scale(1.08);

}



.coin-pop{

    position:absolute;

    top:50%;

    left:50%;

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

    font-size:60px;

    animation:coinFly 1s forwards;

    pointer-events:none;

}



@keyframes coinFly{

    0%{

        opacity:0;

        transform:translate(-50%,-20%) scale(.3);

    }

    50%{

        opacity:1;

        transform:translate(-50%,-140%) scale(1.3);

    }

    100%{

        opacity:0;

        transform:translate(-50%,-240%) scale(.8);

    }

}