:root{--bg:#070b13;--bg2:#0d1320;--panel:#121a29;--line:rgba(255,255,255,.09);--text:#f4f7fb;--muted:#9aa7bc;--accent:#ffcc66;--accent2:#8f7bff;--max:1200px;--radius:22px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}a{text-decoration:none;color:inherit}button,input{font:inherit}button{cursor:pointer}.container{width:min(calc(100% - 40px),var(--max));margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(7,11,19,.78);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.06)}.nav-wrap{height:76px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px}.brand strong{display:block;font-size:16px}.brand small{display:block;font-size:9px;letter-spacing:1.7px;color:#6f7c92}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#f8d477,#d9a943);color:#1d170a;font-weight:800;box-shadow:0 10px 30px rgba(255,204,102,.18)}.nav{display:flex;gap:34px;align-items:center;font-size:14px;color:#9ca8bb}.nav a{position:relative;padding:28px 0}.nav a:hover,.nav a.active{color:#fff}.nav a.active:after{content:'';position:absolute;left:0;right:0;bottom:16px;height:2px;border-radius:99px;background:var(--accent)}.mobile-menu{display:none;border:0;background:transparent;color:#fff;font-size:24px}.nav.mobile-open{display:flex;position:absolute;top:76px;left:12px;right:12px;padding:12px 16px;background:#0d1420;border:1px solid var(--line);border-radius:0 0 16px 16px;justify-content:center;gap:20px}.nav.mobile-open a{padding:8px 0}.nav.mobile-open a.active:after{bottom:0}
.hero{position:relative;overflow:hidden;min-height:500px;background:radial-gradient(circle at 75% 35%,rgba(143,123,255,.14),transparent 30%),linear-gradient(180deg,#0a0f18 0%,#070b13 100%)}.hero-inner{min-height:680px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:30px}
/* .hero-copy{padding:80px 0} */
.eyebrow,.section-kicker{font-size:11px;letter-spacing:3px;color:#8b98ae;font-weight:700}
.hero h1{line-height:1.05;letter-spacing:-2px;margin:18px 0;}
.hero h1 span,.about-copy h2 span{color:var(--accent)}.hero-copy>p{max-width:560px;color:var(--muted);font-size:17px}.hero-actions{display:flex;gap:12px;margin-top:32px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:12px;border:1px solid var(--line);font-weight:700;font-size:14px}.btn-primary{background:linear-gradient(135deg,#f7d175,#dca844);color:#171307;border-color:transparent;box-shadow:0 12px 32px rgba(255,204,102,.16)}.btn-ghost{background:rgba(255,255,255,.03);color:#fff}.hero-stats{display:flex;gap:34px;margin-top:56px}.hero-stats div{display:flex;flex-direction:column}.hero-stats b{font-size:23px}.hero-stats span{color:#7f8aa0;font-size:12px;margin-top:4px}
.hero-art{position:relative;}
.orb{position:absolute;width:410px;height:410px;border-radius:50%;right:40px;top:45px;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.13),rgba(143,123,255,.18) 25%,rgba(38,44,77,.1) 60%,transparent 70%);}.phone{position:absolute;right:120px;top:72px;width:255px;height:430px;border:7px solid #1c2433;border-radius:39px;background:#0c111b;box-shadow:0 28px 80px rgba(0,0,0,.45),0 0 70px rgba(143,123,255,.14);transform:rotate(6deg)}.phone-head{height:52px;display:flex;align-items:end;justify-content:space-between;padding:0 19px 10px;font-size:12px;color:#adb9cb}.phone-head i{width:8px;height:8px;border-radius:50%;background:#7e72f6}.phone-screen{padding:14px}.phone-banner{height:95px;border-radius:16px;background:linear-gradient(135deg,#6d5bce,#2f3d61);position:relative;overflow:hidden}.phone-banner:after{content:'PLAY';position:absolute;right:15px;bottom:10px;font-size:11px;font-weight:800;letter-spacing:2px;color:rgba(255,255,255,.75)}.phone-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.phone-grid i{display:block;aspect-ratio:1;border-radius:11px;background:linear-gradient(145deg,#232e41,#151c2b);border:1px solid rgba(255,255,255,.08)}.phone-lines{margin-top:16px;display:grid;gap:8px}.phone-lines span{height:7px;border-radius:99px;background:#202b3d}.phone-lines span:nth-child(2){width:70%}.phone-lines span:nth-child(3){width:45%}.floating-card{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;width:104px;height:112px;border-radius:20px;background:rgba(16,24,38,.8);border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 50px rgba(0,0,0,.25);backdrop-filter:blur(15px)}.floating-card span{font-size:25px}.floating-card b{font-size:13px;margin-top:5px}.floating-card small{color:#7d899d;font-size:10px}.card-1{left:35px;top:90px;transform:rotate(-8deg)}.card-2{left:-5px;bottom:80px;transform:rotate(7deg)}.card-3{right:0;top:230px;transform:rotate(9deg)}.hero-glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.35}.glow-a{width:260px;height:260px;background:#ffd36d;left:-120px;top:100px}.glow-b{width:250px;height:250px;background:#7e71f5;right:-80px;bottom:20px}
.games-section{padding:90px 0 100px;background:#090e17}.section-head{display:flex;align-items:end;justify-content:space-between;gap:30px}.section-head h2,.about-copy h2,.contact-card h2{font-size:44px;line-height:1.15;letter-spacing:-1px;margin:10px 0 0}.search-box{min-width:320px;display:flex;align-items:center;gap:10px;height:46px;padding:0 15px;background:#0e1521;border:1px solid var(--line);border-radius:13px}.search-box span{color:#77849a;font-size:22px}.search-box input{width:100%;background:transparent;border:0;outline:0;color:#fff}.search-box input::placeholder{color:#677388}.category-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}.category,.sort{border:1px solid var(--line);color:#9da8b8;background:#0e1521;border-radius:11px;padding:9px 17px}.category:hover,.category.active,.sort:hover,.sort.active{color:#161205;background:var(--accent);border-color:transparent}.toolbar{display:flex;justify-content:space-between;align-items:center;margin:26px 0 18px}.result-count{font-size:13px;color:#7e8ca1}.sort-group{display:flex;gap:8px}.sort{padding:7px 13px;font-size:12px}.game-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.game-card{background:linear-gradient(180deg,#101825,#0d131f);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}.game-card:hover{transform:translateY(-5px);border-color:rgba(255,204,102,.26);box-shadow:0 18px 40px rgba(0,0,0,.22)}.game-cover{position:relative;height:120px;padding:15px;display:flex;align-items:flex-end;background:linear-gradient(135deg,var(--c1),var(--c2));overflow:hidden}.game-cover:before{content:'';position:absolute;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.1);right:-45px;top:-55px}.game-cover:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.32));pointer-events:none}.game-symbol{position:absolute;right:18px;top:18px;font-size:52px;filter:drop-shadow(0 10px 16px rgba(0,0,0,.2))}.game-tag{position:relative;z-index:2;font-size:20px;padding:5px 8px;border-radius:8px;background:rgba(0,0,0,.24);backdrop-filter:blur(5px)}.game-info{padding:14px 15px 16px}.game-info h3{margin:0;font-size:15px}.game-info p{margin:5px 0 14px;color:#7e8ca0;font-size:11px}.game-footer{display:flex;justify-content:space-between;align-items:center}.mini-hot{font-size:10px;color:#a9b4c7}.play-btn{border:0;background:rgba(255,204,102,.12);color:var(--accent);padding:7px 11px;border-radius:9px;font-size:11px;font-weight:700}.empty{text-align:center;padding:70px 0;color:#748197}
.feature-band{padding:26px 0;background:#0d1420;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.feature-grid article{display:flex;gap:14px;align-items:flex-start}.feature-icon{flex:0 0 42px;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(255,204,102,.09);border:1px solid rgba(255,204,102,.16)}.feature-grid h3{font-size:14px;margin:1px 0 3px}.feature-grid p{margin:0;color:#778398;font-size:11px}
.news-section,.about-section,.contact-section{padding:96px 0}.section-head.compact{align-items:center}.more{font-size:13px;color:#8c98aa}.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}.news-card{padding:25px;border:1px solid var(--line);background:#0e1521;border-radius:18px}.news-card>span{font-size:10px;color:#778499;letter-spacing:1px}.news-card h3{font-size:17px;line-height:1.45;margin:14px 0 8px}.news-card p{margin:0;color:#7f8b9e;font-size:12px}.about-section{background:linear-gradient(180deg,#0a0f18,#0d1420)}.about-wrap{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.about-copy>p{color:#8b97aa;max-width:520px;margin-top:22px}.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}.chips span{padding:8px 12px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.02);font-size:11px;color:#a4afc0}.about-panel{background:#0b111b;border:1px solid var(--line);border-radius:24px;padding:10px}.panel-line{display:flex;justify-content:space-between;gap:20px;padding:20px 18px;border-bottom:1px solid rgba(255,255,255,.06)}.panel-line:last-child{border-bottom:0}.panel-line span{color:#738096;font-size:12px}.panel-line b{font-size:12px;text-align:right}.contact-section{padding-top:0}.contact-card{border-radius:25px;padding:35px 40px;display:flex;justify-content:space-between;align-items:center;gap:30px;background:linear-gradient(135deg,#151e30,#0d1420);border:1px solid var(--line)}.contact-card h2{font-size:32px}.contact-card p{margin:8px 0 0;color:#8793a8;font-size:13px}
.footer{border-top:1px solid var(--line);background:#070b12}.footer-top{padding:30px 0;display:flex;justify-content:space-between;gap:20px;align-items:center}.footer-brand{display:flex;align-items:center;gap:12px}.footer-brand small{display:block;color:#69758a;font-size:8px;letter-spacing:1.2px}.footer-links{display:flex;gap:24px;color:#7f8ba0;font-size:11px}.footer-bottom{padding:17px 0;border-top:1px solid rgba(255,255,255,.05);display:flex;justify-content:space-between;gap:20px;color:#5f6b7d;font-size:10px}
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(6px)}.modal-panel{position:relative;z-index:1;width:min(470px,100%);overflow:hidden;border-radius:24px;background:#101825;border:1px solid var(--line);box-shadow:0 28px 80px rgba(0,0,0,.4)}.modal-close{position:absolute;z-index:3;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.3);color:#fff;font-size:22px}.modal-cover{height:230px;background:linear-gradient(135deg,#6657cd,#263555);position:relative}.modal-cover:after{content:'DEMO';position:absolute;right:22px;bottom:18px;font-size:46px;font-weight:800;color:rgba(255,255,255,.15);letter-spacing:4px}
.modal-body{}.modal-kicker{color:#a48df7;font-size:10px;letter-spacing:2px}.modal-body h3{margin:7px 0;font-size:28px}.modal-body p{color:#8491a6;font-size:13px;min-height:20px}
@media(max-width:960px){.nav{gap:18px}.game-grid{grid-template-columns:repeat(3,1fr)}.feature-grid{grid-template-columns:repeat(2,1fr)}.hero-inner{grid-template-columns:1fr}
/* .hero-art{display:none} */
.hero{min-height:auto}.hero-inner{min-height:auto}
/* .hero-copy{padding:90px 0} */
.about-wrap{grid-template-columns:1fr;gap:35px}.news-grid{grid-template-columns:1fr}.contact-card{align-items:flex-start;flex-direction:column}}
@media(max-width:700px){.container{width:min(calc(100% - 24px),var(--max))}.nav{display:none}.mobile-menu{display:block}.game-grid{grid-template-columns:repeat(2,1fr)}.game-cover{height:160px}.section-head{align-items:flex-start;flex-direction:column}.search-box{width:100%;min-width:0}.hero-stats{gap:22px}.feature-grid{grid-template-columns:1fr}.footer-top,.footer-bottom{flex-direction:column;align-items:flex-start}.footer-links{flex-wrap:wrap}.contact-card{padding:28px}.contact-card h2,.section-head h2{font-size:34px}}
@media(max-width:460px){.game-grid{grid-template-columns:1fr}.category-row{gap:7px}.category{padding:8px 12px}.toolbar{align-items:flex-start;flex-direction:column;gap:12px}}
.draw-box{margin-top:24px;padding:18px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));box-shadow:0 18px 50px rgba(0,0,0,.18)}
.draw-head{
    /* display:flex; */
    justify-content:space-between;
    gap:20px;align-items:center}.draw-head strong{display:block;font-size:16px}.draw-head small,.draw-head span{font-size:11px;color:#7f8ca0}.draw-head small{display:block;margin-top:2px}.draw-head b{color:var(--accent)}
.draw-stage{margin:14px 0;padding:15px;border-radius:14px;display:flex;align-items:center;gap:12px;background:rgba(255,204,102,.07);border:1px solid rgba(255,204,102,.14)}.draw-badge{font-size:28px}.draw-stage small{display:block;font-size:9px;letter-spacing:2px;color:#7c899d}.draw-stage strong{display:block;font-size:15px;margin-top:2px}.draw-btn,.claim-btn{width:100%;margin-top:10px}.claim-btn{color:#fff}
.draw-note{margin:10px 0 0;color:#e5e5e5 !important;font-size:14px;text-align:center}
.lottery-container {
    width: 100%;
    max-width: 420px;
    background: #2a1100;
    border: 3px solid #f3a833;
    border-radius: 18px;
    padding: 10px;
    box-shadow: 0 0 25px rgba(243, 168, 51, 0.4), inset 0 0 15px rgba(0, 0, 0, 0.8);
    position: relative;
}
.grid-board {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(7, 1fr);
    gap: 5px;
    width: 100%;
    aspect-ratio: 1 / 1.15;
    position: relative;
}
/* Active Light Effect */
.cell.active {
    background: #ffe600 !important;
    border-color: #ff0000 !important;
    box-shadow: 0 0 15px #ffe600, inset 0 0 8px #ff9900 !important;
    transform: scale(1.05);
    z-index: 5;
}
.center-area {
    grid-column: 2 / 7;
    grid-row: 2 / 7;
    background: #120300;
    border-radius: 12px;
    border: 2px solid #5a2602;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px;
    position: relative;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.9);
}
.cell {
    background: #fff;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: 2px solid #e2c08d;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
    position: relative;
    transition: transform 0.1s, border-color 0.1s;
}
.cell .icon {
    font-size: 20px;
    margin-bottom: 2px;
}
.cell .prize-name {
    font-size: 10px;
    font-weight: 800;
    color: #333;
    text-align: center;
    line-height: 1.1;
}
.center-title {
    font-size: 22px;
    font-weight: 900;
    color: #ffaa00;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(255, 170, 0, 0.5);
    margin-bottom: 15px;
    font-family: 'Arial Black', sans-serif;
}
.status-badge {
    background: #000;
    border: 1px solid #ff3300;
    color: #ff3300;
    padding: 4px 15px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 25px;
}
.spin-btn {
    width: 80%;
    height: 52px;
    background: linear-gradient(180deg, #ff5e36 0%, #c41200 100%);
    border: 2px solid #ffcb00;
    border-radius: 26px;
    color: #fff;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 4px;
    cursor: pointer;
    box-shadow: 0 6px 0 #7a0b00, 0 10px 15px rgba(0, 0, 0, 0.5);
    transition: all 0.1s;
    outline: none;
}
.marquee-box {
    width: 100%;
    max-width: 420px;
    margin-top: 15px;
    background: rgba(20, 5, 35, 0.85);
    border: 1.5px solid #7b2cbf;
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}
.marquee-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #4a1e75;
    padding-bottom: 6px;
    margin-bottom: 8px;
}
.marquee-title {
    color: #ff66cc;
    font-size: 13px;
    font-weight: bold;
    display: flex
;
    align-items: center;
    gap: 5px;
}
.marquee-live {
    color: #00ffcc;
    font-size: 11px;
}
.marquee-live {
    color: #00ffcc;
    font-size: 11px;
}
.marquee-list {
    list-style: none;
    position: absolute;
    width: 100%;
    top: 0;
    transition: top 0.5s ease;
}
.marquee-item {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    line-height: 25px;
    height: 25px;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.modal-card {
    background: linear-gradient(180deg, #fff 0%, #fff7e6 100%);
    width: 85%;
    max-width: 320px;
    border-radius: 20px;
    padding: 25px 20px;
    text-align: center;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
    transform: scale(0.7);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-overlay.show .modal-card {
    transform: scale(1);
}
.modal-icon {
    font-size: 55px;
    margin-bottom: 10px;
}
.modal-title {
    font-size: 20px;
    color: #333;
    font-weight: bold;
    margin-bottom: 8px;
}
.modal-prize {
    font-size: 22px;
    color: #e60000;
    font-weight: 900;
    margin-bottom: 20px;
}
.modal-btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.claim-btn {
    display: block;
    width: 100%;
    padding: 12px 0;
    background: linear-gradient(180deg, #25D366 0%, #128C7E 100%);
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
}
.again-btn {
    display: block;
    width: 100%;
    padding: 12px 0;
    background: linear-gradient(180deg, #ffaa00 0%, #e67300 100%);
    color: #fff;
    border: none;
    font-size: 16px;
    font-weight: bold;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(255, 170, 0, 0.4);
    cursor: pointer;
}