:root{ --bg-main:#050505; --bg-soft:#0d0d0d; --bg-panel:#111; --bg-panel-2:#171717; --line:#2b2b2b; --line-soft:#3a3a3a; --text:#f5f5f5; --text-soft:#cfcfcf; --text-dim:#9a9a9a; --white-glow:rgba(255,255,255,.18); --white-glow-strong:rgba(255,255,255,.32); --shadow:0 10px 30px rgba(0,0,0,.35); --radius-xl:28px; --radius-lg:20px; --radius-md:14px; --radius-sm:10px; --trans:.3s ease; } /* ========================= GLOBAL LIGHTWEIGHT FX ========================= */ @keyframes auraPulse{ 0%,100%{box-shadow:0 0 0 rgba(255,255,255,0),0 0 18px rgba(255,255,255,.05)} 50%{box-shadow:0 0 0 rgba(255,255,255,0),0 0 24px rgba(255,255,255,.14)} } @keyframes shimmerLine{ 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} } @keyframes floatSoft{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2px)} } @keyframes revealLeft{ from{opacity:0;transform:translateX(-24px)} to{opacity:1;transform:translateX(0)} } @keyframes revealRight{ from{opacity:0;transform:translateX(24px)} to{opacity:1;transform:translateX(0)} } /* ========================= TICKER ========================= */ .tickercontainer{ margin:0; padding:0; overflow:hidden; text-align:center; } .tickercontainer .mask{ position:relative; width:100%; overflow:hidden; } ul.newsticker{ position:relative; list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:28px; will-change:transform; } ul.newsticker li{ margin:0; font-size:12px; font-weight:600; letter-spacing:.3px; color:var(--text-soft); padding:0; white-space:nowrap; text-transform:uppercase; } ul.er-controls{ list-style:none; display:inline-flex; gap:8px; padding:0; margin:0; } ul.er-controls>li{ display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 12px; background:linear-gradient(180deg,#1b1b1b,#101010); color:var(--text); border:1px solid var(--line-soft); border-radius:999px; box-shadow:var(--shadow); transition:background var(--trans), transform var(--trans), border-color var(--trans); } ul.er-controls>li:hover{ background:linear-gradient(180deg,#222,#121212); border-color:#5a5a5a; cursor:pointer; transform:translateY(-1px); } /* ========================= ANNOUNCEMENT ========================= */ .announcement-outer-container{ background: linear-gradient(180deg,#0f0f0f,#070707); padding:8px 0; color:var(--text); border-top:1px solid #1a1a1a; border-bottom:1px solid #1a1a1a; position:relative; overflow:hidden; } .announcement-outer-container::before{ content:""; position:absolute; inset:0; background: linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent); animation:shimmerLine 7s linear infinite; pointer-events:none; } .announcement-container{ display:flex; align-items:center; font-size:14px; gap:10px; position:relative; z-index:1; } .announcement-container>[data-section="date"]{ flex-basis:30%; display:flex; justify-content:flex-end; align-items:center; padding-right:10px; color:var(--text-dim); font-weight:600; } .announcement-container [data-icon="news"]{ display:inline-block; height:22px; width:22px; background:center no-repeat; background-size:contain; background-image:var(--image-src); margin-right:10px; filter:grayscale(1) brightness(2); } .announcement-container>[data-section="announcements"]{ flex-basis:70%; background: linear-gradient(180deg,#151515,#0b0b0b); border:1px solid var(--line); border-radius:999px; padding:8px 22px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), 0 0 18px rgba(255,255,255,.04); animation:auraPulse 3.6s ease-in-out infinite; } /* ========================= BANNER ========================= */ .banner, .banner .slick-slide img{ aspect-ratio:1920/613; } .banner-carousel.slick-initialized{ height:auto; display:block; } .banner .carousel-indicators li button{ display:none; } .banner .slick-slide img{ display:block; width:100%; height:auto; line-height:1; border-radius:22px; filter:contrast(1.06) grayscale(.08); } .banner-group-vertical .carousel-indicators{ bottom:50%; transform:translateY(50%); right:18px; left:unset; width:20px; } .banner-group-vertical .carousel-indicators li{ display:block; margin-bottom:6px; } .banner-carousel>div:first-child img{ display:block; aspect-ratio:1920/613; width:100%; height:auto; line-height:1; } .banner-carousel>div:not(:first-child), .banner-carousel>div:first-child>a:not(:first-child){ display:none; } /* ========================= JACKPOT - MANGA MONOCHROME ========================= */ .home-progressive-jackpot{ background: linear-gradient(180deg,#0e0e0e,#050505); border:1px solid #242424; border-radius:30px; color:var(--text); padding:10px; display:flex; box-shadow:var(--shadow); position:relative; overflow:hidden; } .home-progressive-jackpot::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 40px rgba(255,255,255,.03); } .home-progressive-jackpot .outer-container{ display:flex; flex-grow:1; padding:8px; background:linear-gradient(180deg,#090909,#000); border-radius:100px; border:1px solid #1f1f1f; } .home-progressive-jackpot .inner-container{ display:flex; flex-grow:1; padding:8px; border-radius:100px; background: radial-gradient(circle at center, rgba(255,255,255,.05), transparent 65%); } .home-progressive-jackpot .border-container{ display:flex; align-items:center; gap:30px; flex-grow:1; padding:10px 16px; border-radius:100px; background:rgba(255,255,255,.02); border:1px solid #3a3a3a; box-shadow:inset 0 0 0 1px rgba(255,255,255,.02); } .home-progressive-jackpot .jackpot-container{ display:flex; justify-content:center; align-items:center; flex-grow:2; font-family:'Open24DisplaySt', monospace; font-size:50px; letter-spacing:4px; background:linear-gradient(180deg,#f5f5f5,#a8a8a8); border-radius:70px; padding:6px; box-shadow:0 0 24px rgba(255,255,255,.07); } .home-progressive-jackpot .jackpot-inner-container{ background:#080808; display:flex; flex-grow:2; justify-content:center; border-radius:50px; padding:8px 16px; width:100%; } .home-progressive-jackpot .jackpot-border-container{ display:flex; flex-grow:2; justify-content:center; border-radius:50px; border:1px dashed #4f4f4f; line-height:1.1; padding:8px 12px; color:#fff; text-shadow:0 0 8px rgba(255,255,255,.15); } .home-progressive-jackpot .jackpot-currency{ color:#ffffff; margin-right:10px; opacity:.9; } .home-progressive-jackpot .jackpot-play-section{ display:flex; flex-direction:column; align-items:flex-end; justify-content:center; margin-left:8px; animation:floatSoft 3s ease-in-out infinite; } .home-progressive-jackpot .jackpot-play-section .jackpot-play-text{ font-family:'gilroybold', Arial, sans-serif; color:#fff; font-size:34px; text-transform:uppercase; line-height:1; text-align:right; letter-spacing:.5px; } .home-progressive-jackpot .jackpot-play-section .jackpot-play-text label{ color:#bdbdbd; } .home-progressive-jackpot .jackpot-play-section img{ height:auto; width:78px; filter:grayscale(1) contrast(1.1) brightness(1.02); } /* ========================= HOME SECTION ========================= */ .home-outer-container{ padding-top:20px; padding-bottom:20px; } .home-inner-container{ background: linear-gradient(180deg,rgba(18,18,18,.96),rgba(10,10,10,.94)); padding:28px; border-radius:30px; border:1px solid #252525; box-shadow:var(--shadow); } /* ========================= POPULAR GAME TITLE ========================= */ .popular-game-title-container{ display:flex; align-items:center; padding:10px 0; margin-top:20px; color:var(--text); gap:12px; } .popular-game-title-container .title{ font-size:20px; font-weight:700; display:flex; align-items:center; letter-spacing:.3px; } .popular-game-title-container .title i{ display:inline-block; height:24px; width:25px; background:center no-repeat; background-size:contain; margin-right:10px; filter:grayscale(1) brightness(2); } .popular-game-title-container .title i[data-icon]{ background-image:var(--image-src); } .popular-game-title-container>i{ border-bottom:1px solid #333; border-top:1px solid #0d0d0d; flex-grow:1; margin:0 8px; opacity:.8; } .popular-game-title-container a{ display:inline-block; padding:7px 20px; border-radius:999px; font-size:14px; font-weight:700; background:linear-gradient(180deg,#1a1a1a,#101010); border:1px solid #353535; color:#fff; transition:all var(--trans); } .popular-game-title-container a:hover{ transform:translateY(-1px); border-color:#5a5a5a; box-shadow:0 0 18px rgba(255,255,255,.06); } .popular-game-title-container + .game-list-container{ background: linear-gradient(180deg,#0d0d0d,#080808); border:1px solid #262626; padding:14px; border-radius:30px; box-shadow:var(--shadow); } .popular-game-title-container + .game-list-container .game-list{ overflow-x:auto; flex-wrap:nowrap; padding:0; margin:0; border:0; } .popular-game-title-container + .game-list-container .game-list .game-item{ flex-shrink:0; position:relative; transition:transform var(--trans), filter var(--trans); } .popular-game-title-container + .game-list-container .game-list .game-item:hover{ transform:translateY(-3px) scale(1.01); filter:brightness(1.05); } .popular-game-title-container + .game-list-container .game-list::-webkit-scrollbar{ height:6px; } .popular-game-title-container + .game-list-container .game-list::-webkit-scrollbar-track{ background:transparent; } .popular-game-title-container + .game-list-container .game-list::-webkit-scrollbar-thumb{ background:#555; border-radius:999px; } .popular-game-title-container + .game-list-container .game-list .games-group{ width:calc((100% - 6px*5)/6.5); flex-shrink:0; display:flex; flex-direction:column; gap:10px; margin:3px; } .popular-game-title-container + .game-list-container .game-list .games-group .game-item{ width:100%; margin:0; } /* ========================= TELEGRAM BANNER ========================= */ .telegram-banner-container{ padding:20px 0; border:0; } .telegram-banner-container img{ width:100%; border-radius:24px; display:block; filter:grayscale(.15) contrast(1.05); box-shadow:var(--shadow); } /* ========================= DOWNLOAD APK ========================= */ .download-apk-container{ overflow:hidden; } .download-apk-container .popup-modal[data-title] .modal-title:before{ content:none; } .download-apk-container .popup-modal .modal-header h4{ font-size:24px; } .download-apk-container .popup-modal .modal-body img, .download-popup-modal .modal-body img{ height:20px; width:20px; margin-right:5px; filter:grayscale(1) brightness(2); } .download-apk-container .popup-modal .modal-body h5{ font-size:18px; text-transform:uppercase; color:inherit; } .download-apk-container .popup-modal .modal-body ol{ list-style:decimal; padding-left:18px; } .download-apk{ display:flex; align-items:center; font-family:Arial, sans-serif; color:#fff; background: linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.01)), var(--image-src); background-size:cover; background-position:center; border-radius:30px; margin-bottom:10px; border:1px solid #2c2c2c; box-shadow:var(--shadow); position:relative; overflow:hidden; } .download-apk::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent); transform:translateX(-100%); animation:shimmerLine 8s linear infinite; pointer-events:none; } .download-apk>div{ opacity:0; transition:transform .7s ease, opacity .7s ease; position:relative; z-index:1; } .download-apk>div:nth-child(1){ flex-basis:50%; align-self:flex-end; transform:translateX(-30px); padding:30px 0 30px 50px; animation:revealLeft .8s ease forwards; } .download-apk>div:nth-child(2){ flex-basis:50%; align-self:flex-end; transform:translateX(30px); animation:revealRight .8s ease forwards; } .download-apk .h2{ font-family:Arial, sans-serif; text-transform:uppercase; font-size:42px; line-height:1; font-weight:800; margin:0 0 10px 0; color:#fff; text-shadow:0 0 18px rgba(255,255,255,.10); } .download-apk .h2>span{ display:block; color:#cfcfcf; } .download-apk .h3{ font-weight:400; font-size:15px; margin:0; color:#d6d6d6; } .download-apk-info{ display:flex; justify-content:space-between; margin:20px 0 0; gap:16px; } .download-apk-info .download-apk-section{ flex-basis:50%; } .download-apk-section{ display:flex; font-weight:600; font-size:15px; color:#f1f1f1; } .download-apk-section>*{ margin:0 10px 10px 0; } .download-apk-section i{ color:#fff; font-style:normal; opacity:.88; } .download-apk-qr-code img{ max-width:94px; filter:grayscale(1) contrast(1.1); } .download-apk-detail{ font-size:13px; display:flex; flex-direction:column; justify-content:space-around; text-align:center; color:#d8d8d8; } .standard-container-with-sidebar .standard-form-content .download-apk-container{ margin-top:30px; padding:0; } .standard-container-with-sidebar .standard-form-content .download-apk-container .download-apk>div:nth-child(1){ padding:15px 0 15px 50px; } .standard-container-with-sidebar .standard-form-content .download-apk-container .download-apk .h2{ font-size:27px; line-height:1; } .standard-container-with-sidebar .standard-form-content .download-apk-container .download-apk .h3{ font-size:14px; } .standard-container-with-sidebar .standard-form-content .download-apk-container .download-apk-info{ margin:10px 0 0; } .standard-container-with-sidebar .standard-form-content .download-apk-container .download-apk-detail{ font-size:10px; } /* ========================= RESPONSIVE ========================= */ @media (max-width:991px){ .announcement-container{ flex-direction:column; align-items:stretch; gap:8px; } .announcement-container>[data-section="date"], .announcement-container>[data-section="announcements"]{ flex-basis:100%; width:100%; justify-content:flex-start; padding-right:0; } .home-progressive-jackpot .border-container{ gap:18px; flex-direction:column; border-radius:28px; } .home-progressive-jackpot .jackpot-container{ font-size:38px; width:100%; } .home-progressive-jackpot .jackpot-play-section{ align-items:center; text-align:center; margin-left:0; } .download-apk{ flex-direction:column; } .download-apk>div:nth-child(1), .download-apk>div:nth-child(2){ flex-basis:100%; width:100%; transform:none; padding:24px; } .download-apk-info{ flex-direction:column; } } @media (max-width:767px){ ul.newsticker li{ font-size:11px; } .announcement-container{ font-size:13px; } .home-inner-container{ padding:20px; } .popular-game-title-container .title{ font-size:17px; } .popular-game-title-container a{ padding:6px 14px; font-size:13px; } .home-progressive-jackpot .jackpot-container{ font-size:28px; letter-spacing:2px; } .home-progressive-jackpot .jackpot-play-section .jackpot-play-text{ font-size:24px; } .download-apk .h2{ font-size:30px; } .download-apk .h3{ font-size:13px; } } /* ========================= REDUCE MOTION ========================= */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } }