:root{
  --bg:#03120d;
  --panel:#082017;
  --panel-2:#0b261c;
  --line:#133627;
  --text:#eef7f1;
  --muted:#9ab4a5;
  --accent:#20c05c;
}
html,body{height:100%;}
body{margin:0;background:radial-gradient(circle at top right,#0a2d1f 0,#04140e 42%,#020b08 100%);color:var(--text);font-family:'Inter',sans-serif;}
.site-shell{display:flex;min-height:100vh;}
.sidebar-wrap{width:176px;flex:0 0 176px;padding:0;background:rgba(0,0,0,.2);border-right:1px solid rgba(255,255,255,.04);}
.sidebar-panel{background:linear-gradient(180deg,#03140e 0%,#061e15 100%);}
.sidebar-top{min-height:82px;display:flex;align-items:center;}
.logo-badge{font-size:2rem;font-weight:800;line-height:1;color:#ff8c00;text-shadow:0 2px 0 #511,0 0 18px rgba(255,140,0,.35);letter-spacing:1px;}
.sidebar-link{display:flex;align-items:center;gap:.75rem;padding:.82rem .9rem;margin:0 0 .42rem;border-radius:.7rem;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.02);color:#edf6ef;font-weight:600;text-decoration:none;transition:.18s ease;}
.sidebar-link i{color:#40d16f;width:18px;}
.sidebar-link:hover,.sidebar-link.active{background:#0d241a;border-color:#153e2a;color:#fff;}
.sidebar-divider{height:1px;background:rgba(255,255,255,.06);margin:.8rem 0;}
.site-main{flex:1;min-width:0;padding:0 0 1.5rem;}
.page-container{max-width:1320px;margin:0 auto;padding:14px 16px 32px;}
.top-actions{padding-right:6px;}
.hero-banner{position:relative;overflow:hidden;min-height:302px;border-radius:0;background:
  radial-gradient(circle at 72% 35%, rgba(255,255,255,.12), transparent 16%),
  radial-gradient(circle at 80% 30%, rgba(255,215,0,.18), transparent 14%),
  linear-gradient(90deg,#03240f 0%, #0e7a1e 38%, #066715 65%, #043c13 100%);
  border:1px solid rgba(255,255,255,.05);
}
.hero-copy{position:absolute;left:9%;top:14%;z-index:2;}
.hero-brand{font-size:5rem;line-height:.95;font-weight:900;letter-spacing:2px;color:#f1f1f1;-webkit-text-stroke:2px rgba(0,0,0,.22);text-shadow:0 3px 0 rgba(0,0,0,.35);}
.hero-sub{display:inline-block;margin-top:1.2rem;background:linear-gradient(180deg,#ff3f29,#c51f10);padding:.85rem 2rem;border-radius:.8rem;border:3px solid rgba(255,255,255,.26);font-weight:800;font-size:2rem;letter-spacing:2px;box-shadow:0 10px 24px rgba(0,0,0,.28);}
.hero-figures{position:absolute;inset:0;pointer-events:none;}
.figure{position:absolute;bottom:-12px;border-radius:999px;filter:drop-shadow(0 18px 24px rgba(0,0,0,.35));}
.figure-1{right:32%;width:140px;height:240px;background:linear-gradient(180deg,#222,#444 36%,#f3d2b6 37%,#f3d2b6 52%,#111 53%,#1c1c1c 100%);} 
.figure-2{right:20%;width:170px;height:290px;background:linear-gradient(180deg,#111 0,#222 18%,#f8d4c1 19%,#f8d4c1 45%,#c49b3e 46%,#b6872f 100%);} 
.figure-3{right:6%;width:155px;height:250px;background:linear-gradient(180deg,#222 0,#333 17%,#f1cfba 18%,#f1cfba 43%,#b6262a 44%,#d34a4d 100%);} 
.hero-logo-sm{position:absolute;right:3%;top:6%;font-size:2rem;font-weight:800;color:#ff8c00;text-shadow:0 2px 0 #411;}
.search-box{display:flex;align-items:center;gap:.85rem;background:#061810;border:1px solid #1b4c34;border-radius:.45rem;padding:.8rem 1rem;}
.search-box i{color:#3bd16f;font-size:1.25rem;}
.search-box .form-control::placeholder{color:#d5dfd8;opacity:.9;font-weight:600;}
.content-section{padding:0 0 6px;}
.section-title{font-size:1.8rem;font-weight:800;margin-bottom:.9rem;color:#f5fbf7;}
.horizontal-cards{display:flex;gap:.8rem;overflow-x:auto;padding-bottom:.25rem;scrollbar-width:thin;}
.horizontal-cards::-webkit-scrollbar{height:8px;}
.horizontal-cards::-webkit-scrollbar-thumb{background:#1b4c34;border-radius:99px;}
.game-card{min-width:136px;max-width:136px;background:#11261c;border-radius:.65rem;overflow:hidden;border:1px solid rgba(255,255,255,.05);}
.game-thumb{position:relative;height:136px;display:flex;align-items:flex-end;justify-content:flex-start;padding:.55rem;background:#1c4031;overflow:hidden;}
.game-thumb::after{content:'';position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.38));}
.thumb-title{position:relative;z-index:1;font-size:1.4rem;font-weight:900;line-height:1;max-width:95px;text-shadow:0 2px 6px rgba(0,0,0,.45);}
.rank-badge{position:absolute;left:8px;top:8px;z-index:2;width:24px;height:24px;border-radius:6px;background:rgba(255,255,255,.18);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:800;}
.game-meta{padding:.58rem .55rem .65rem;text-align:center;}
.game-name{font-size:.9rem;font-weight:700;line-height:1.15;color:#fbfffc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.game-provider{font-size:.79rem;color:#adc2b6;margin-top:.2rem;}
.theme-gold{background:linear-gradient(135deg,#ffdb69,#ff9f1c 55%,#e85d04);} 
.theme-gold2{background:linear-gradient(135deg,#f7ff9b,#cabf2c 45%,#997f00);} 
.theme-violet{background:linear-gradient(135deg,#9147ff,#e75cff 60%,#ffb703);} 
.theme-orange{background:linear-gradient(135deg,#f94144,#f3722c 50%,#f8961e);} 
.theme-pink{background:linear-gradient(135deg,#ff4d6d,#ff8fa3 50%,#7b2cbf);} 
.theme-blue{background:linear-gradient(135deg,#3a86ff,#4361ee 50%,#4cc9f0);} 
.theme-amber{background:linear-gradient(135deg,#ffbe0b,#fb5607 60%,#ffd166);} :root{
    --bg-body:#03140d;
    --bg-panel:#062114;
    --bg-panel-2:#0b2b1a;
    --bg-card:#16351f;
    --bg-card-2:#102a18;
    --line:rgba(120,255,140,.10);
    --text:#ffffff;
    --muted:#b8cabc;
    --green:#6dff7b;
    --green-2:#35c759;
    --yellow:#ffd84d;
}

.page-container{
    padding:16px;
    color:var(--text);
    background:
        radial-gradient(circle at top left, rgba(109,255,123,.08), transparent 28%),
        radial-gradient(circle at top right, rgba(255,216,77,.08), transparent 20%),
        linear-gradient(180deg,#041a11 0%, #02110a 100%);
    border-radius:18px;
    min-height:100%;
}

.top-actions .btn{
    border-radius:12px;
    font-weight:700;
    min-width:96px;
}

.top-actions .btn-dark{
    background:#0b1d14;
    border:1px solid rgba(255,255,255,.08);
    color:#fff;
}

.top-actions .btn-success{
    background:linear-gradient(180deg,#3ddc68 0%, #20b84f 100%);
    border:0;
    color:#fff;
}

.hero-banner{
    position:relative;
    overflow:hidden;
    min-height:220px;
    border-radius:22px;
    padding:24px 22px;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.10), transparent 25%),
        radial-gradient(circle at 80% 30%, rgba(255,214,10,.20), transparent 20%),
        linear-gradient(135deg,#134f2f 0%, #0b321d 45%, #051a10 100%);
    border:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    box-shadow:0 18px 40px rgba(0,0,0,.28);
}

.hero-copy{
    position:relative;
    z-index:2;
}

.hero-brand{
    font-size:clamp(28px, 4vw, 54px);
    line-height:.95;
    font-weight:900;
    letter-spacing:.5px;
    color:#fff;
    text-shadow:0 6px 20px rgba(0,0,0,.25);
}

.hero-sub{
    margin-top:8px;
    font-size:clamp(16px, 2vw, 24px);
    font-weight:800;
    color:#dfff92;
    letter-spacing:1px;
}

.hero-figures{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.figure{
    position:absolute;
    border-radius:50%;
    filter:blur(2px);
    opacity:.9;
}

.figure-1{
    right:110px;
    top:18px;
    width:130px;
    height:130px;
    background:radial-gradient(circle at 35% 35%, #fff0a8 0%, #f2b31d 42%, #a35307 100%);
    box-shadow:0 0 60px rgba(255,191,0,.22);
}

.figure-2{
    right:32px;
    bottom:-14px;
    width:150px;
    height:150px;
    background:radial-gradient(circle at 35% 35%, #ffcfde 0%, #ff4f88 45%, #8a103c 100%);
    box-shadow:0 0 60px rgba(255,79,136,.18);
}

.figure-3{
    right:200px;
    bottom:-20px;
    width:120px;
    height:120px;
    background:radial-gradient(circle at 35% 35%, #c9f6ff 0%, #58c7ff 45%, #125985 100%);
    box-shadow:0 0 60px rgba(88,199,255,.16);
}

.hero-logo-sm{
    position:absolute;
    right:16px;
    top:14px;
    z-index:2;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(0,0,0,.24);
    border:1px solid rgba(255,255,255,.10);
    font-size:12px;
    font-weight:800;
    letter-spacing:1px;
    color:#dfff92;
}

.search-box{
    position:relative;
    display:flex;
    align-items:center;
    border:1px solid rgba(109,255,123,.18);
    background:#071f13;
    border-radius:14px;
    height:48px;
    overflow:hidden;
}

.search-box i{
    position:absolute;
    left:15px;
    color:var(--green);
    font-size:18px;
}

.search-box input{
    height:100%;
    padding-left:42px;
    color:#fff !important;
}

.search-box input::placeholder{
    color:#b9cdbd;
}

.content-section{
    position:relative;
}

.section-title{
    display:flex;
    align-items:center;
    font-size:28px;
    font-weight:800;
    margin-bottom:14px;
    color:#fff;
}

.horizontal-cards{
    display:flex;
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-behavior:smooth;
    scrollbar-width:none;
    padding-bottom:4px;
    scroll-snap-type:x proximity;
}

.horizontal-cards::-webkit-scrollbar{
    display:none;
}

.game-card{
    flex:0 0 auto;
    width:154px;
    scroll-snap-align:center;
}

.game-thumb{
    position:relative;
    height:150px;
    border-radius:18px;
    overflow:hidden;
    display:flex;
    align-items:flex-end;
    justify-content:flex-start;
    padding:12px;
    box-shadow:0 10px 24px rgba(0,0,0,.26);
    border:1px solid rgba(255,255,255,.06);
}

.game-thumb::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.22), transparent 26%),
        linear-gradient(180deg, transparent 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,.55) 100%);
}

.thumb-title{
    position:relative;
    z-index:2;
    font-size:24px;
    line-height:.95;
    font-weight:900;
    color:#fff2af;
    text-shadow:0 3px 10px rgba(0,0,0,.35);
    max-width:100px;
    word-break:break-word;
}

.rank-badge{
    position:absolute;
    left:0;
    top:58%;
    transform:translateY(-50%);
    width:28px;
    height:44px;
    border-radius:0 10px 10px 0;
    background:linear-gradient(180deg,#8ee26e 0%, #58b85d 100%);
    color:#fff;
    font-size:24px;
    font-weight:900;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:3;
    box-shadow:0 8px 18px rgba(0,0,0,.22);
}

.game-meta{
    margin-top:8px;
    background:linear-gradient(180deg, #173720 0%, #112c19 100%);
    border-radius:0 0 12px 12px;
    padding:10px 10px 12px;
    text-align:center;
}

.game-name{
    font-size:15px;
    font-weight:800;
    line-height:1.2;
    color:#fff;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:36px;
}

.game-provider{
    margin-top:2px;
    font-size:13px;
    color:#d0ddd4;
    font-weight:600;
}

.support-widget{
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:1000;
    background:linear-gradient(180deg,#38d266 0%, #1eab4a 100%);
    color:#fff;
    font-weight:800;
    padding:12px 16px;
    border-radius:999px;
    box-shadow:0 10px 24px rgba(0,0,0,.28);
    border:1px solid rgba(255,255,255,.15);
    font-size:14px;
}

/* theme thumb */
.theme-gold{
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.25), transparent 18%),
        linear-gradient(135deg,#ffea79 0%, #d38b00 45%, #5d2d00 100%);
}
.theme-gold2{
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.25), transparent 18%),
        linear-gradient(135deg,#fff0aa 0%, #c99615 45%, #5d3300 100%);
}
.theme-violet{
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.25), transparent 18%),
        linear-gradient(135deg,#da8bff 0%, #8f35db 45%, #351153 100%);
}
.theme-orange{
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.25), transparent 18%),
        linear-gradient(135deg,#ffbf70 0%, #ff5f3a 45%, #6b1805 100%);
}
.theme-pink{
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.25), transparent 18%),
        linear-gradient(135deg,#ffc0db 0%, #ff4f91 45%, #671433 100%);
}
.theme-blue{
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.25), transparent 18%),
        linear-gradient(135deg,#9fe6ff 0%, #2b8eff 45%, #12315c 100%);
}
.theme-amber{
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.25), transparent 18%),
        linear-gradient(135deg,#ffe08f 0%, #ff9b1f 45%, #5a2807 100%);
}
.theme-green{
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.25), transparent 18%),
        linear-gradient(135deg,#b6ff9d 0%, #2cbf60 45%, #123c22 100%);
}
.theme-purple{
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.25), transparent 18%),
        linear-gradient(135deg,#d7b7ff 0%, #7c4dff 45%, #2e155f 100%);
}

/* hover */
.game-card:hover .game-thumb{
    transform:translateY(-2px);
    transition:.2s ease;
}

.game-card:hover .game-meta{
    background:linear-gradient(180deg, #1b4327 0%, #14341e 100%);
    transition:.2s ease;
}

/* responsive */
@media (max-width: 991.98px){
    .section-title{
        font-size:24px;
    }

    .hero-banner{
        min-height:190px;
    }
}

@media (max-width: 767.98px){
    .page-container{
        padding:12px;
        border-radius:0;
    }

    .hero-banner{
        min-height:170px;
        padding:18px 16px;
        border-radius:18px;
    }

    .hero-brand{
        font-size:34px;
    }

    .hero-sub{
        font-size:16px;
    }

    .section-title{
        font-size:18px;
        margin-bottom:12px;
    }

    .game-card{
        width:138px;
    }

    .game-thumb{
        height:138px;
        border-radius:16px;
    }

    .thumb-title{
        font-size:21px;
        max-width:92px;
    }

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

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

    .support-widget{
        right:12px;
        bottom:12px;
        padding:10px 14px;
        font-size:13px;
    }
}

@media (max-width: 575.98px){
    .top-actions{
        justify-content:stretch !important;
    }

    .top-actions .btn{
        flex:1 1 0;
    }

    .game-card{
        width:128px;
    }

    .game-thumb{
        height:128px;
    }

    .rank-badge{
        width:26px;
        height:40px;
        font-size:20px;
    }
}
.theme-green{background:linear-gradient(135deg,#70e000,#38b000 50%,#008000);} 
.theme-purple{background:linear-gradient(135deg,#7209b7,#560bad 50%,#4cc9f0);} 
.support-widget{position:fixed;right:14px;bottom:14px;background:#17a34a;color:#fff;border-radius:.6rem;padding:1rem 1.15rem;font-weight:700;box-shadow:0 14px 28px rgba(0,0,0,.35);z-index:20;}
.placeholder-box{background:#0b1f17;border:1px solid #193e2c;border-radius:1rem;padding:2rem;min-height:240px;display:flex;flex-direction:column;justify-content:center;}
@media (max-width: 991.98px){
  .site-shell{display:block;}
  .sidebar-wrap{width:100%;}
  .hero-banner{min-height:240px;border-radius:1rem;}
  .hero-brand{font-size:3.2rem;}
  .hero-sub{font-size:1.35rem;padding:.65rem 1.2rem;}
  .figure-1,.figure-2,.figure-3{opacity:.6;transform:scale(.8);transform-origin:bottom right;}
}
@media (max-width: 767.98px){
  .page-container{padding:12px 10px 28px;}
  .top-actions{justify-content:flex-start!important;}
  .hero-copy{left:6%;top:16%;}
  .hero-brand{font-size:2.4rem;}
  .hero-sub{font-size:1rem;margin-top:.8rem;}
  .section-title{font-size:1.35rem;}
  .game-card{min-width:124px;max-width:124px;}
  .game-thumb{height:124px;}
  .support-widget{left:10px;right:10px;bottom:10px;text-align:center;}
}