*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#040506;color:#ececec;font-family:Inter,Segoe UI,Arial,sans-serif;min-height:100vh;overflow-x:hidden}:root{--red:#ef151d;--red2:#8d0509;--dark:#050607;--panel:#0b0c0e;--panel2:#101114;--line:rgba(255,40,40,.18);--muted:#8c8c8c}.scanlines{position:fixed;inset:0;pointer-events:none;z-index:999;background:repeating-linear-gradient(180deg,rgba(255,255,255,.012) 0 1px,transparent 1px 4px);mix-blend-mode:soft-light}.ambient{position:fixed;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:-2}.ambient-a{width:40vw;height:40vw;background:rgba(180,0,12,.09);left:-20vw;top:0}.ambient-b{width:36vw;height:36vw;background:rgba(120,0,8,.07);right:-16vw;bottom:-10vw}.topbar{position:fixed;left:0;right:0;top:0;height:72px;background:rgba(4,5,6,.96);border-bottom:1px solid rgba(255,255,255,.06);display:grid;grid-template-columns:280px 1fr auto;align-items:center;z-index:80}.top-left{display:flex;align-items:center;gap:14px;padding:0 16px}.icon-btn{background:#0d0f12;border:1px solid rgba(255,255,255,.06);color:#bbb;border-radius:9px;min-width:38px;height:38px;cursor:pointer}.burger{font-size:20px}.logo-wrap{display:flex;align-items:center;gap:10px}.logo-warning{width:40px;height:34px;clip-path:polygon(50% 0,100% 100%,0 100%);background:linear-gradient(#ff3037,#a40508);display:flex;justify-content:center;align-items:flex-end;padding-bottom:5px;font-weight:900;font-size:18px;box-shadow:0 0 30px rgba(255,0,0,.25)}.logo-text{display:grid;line-height:.85;letter-spacing:.04em}.logo-text span{font-size:21px;font-weight:900}.logo-text strong{font-size:23px;color:var(--red);font-weight:1000}.search-wrap{height:42px;max-width:500px;justify-self:start;width:100%;margin-left:20px;border:1px solid rgba(255,30,30,.22);border-radius:10px;background:#08090b;display:flex;align-items:center;gap:10px;padding:0 13px;color:#777}.search-wrap input{flex:1;background:transparent;border:0;outline:0;color:#ddd;font-size:13px}.search-wrap kbd{border:1px solid rgba(255,255,255,.06);background:#111317;border-radius:6px;padding:3px 7px;color:#777}.top-actions{display:flex;align-items:center;gap:10px;padding-right:18px}.balance-chip,.add-btn,.profile-chip{height:42px;border-radius:9px;border:1px solid rgba(255,35,35,.22);color:#eee;background:#0c0d10}.balance-chip{padding:0 16px;display:flex;align-items:center;gap:8px}.add-btn{padding:0 16px;background:linear-gradient(#cc121a,#7b050a);font-weight:800;cursor:pointer}.bell{position:relative}.bell i{position:absolute;right:-5px;top:-6px;background:#e91d25;border-radius:99px;font-size:9px;padding:2px 5px}.profile-chip{display:flex;align-items:center;gap:10px;padding:0 11px;min-width:210px}.avatar{width:34px;height:34px;border-radius:8px;background:radial-gradient(circle at 50% 25%,#ff2a2a 0 7%,#260006 9% 27%,#09090a 30%);border:1px solid rgba(255,0,0,.25);display:grid;place-items:center;color:transparent}.profile-copy{display:grid;text-align:left}.profile-copy strong{font-size:12px}.profile-copy strong span{color:#ff3038}.profile-copy small{font-size:10px;color:#777}.sidebar{position:fixed;left:0;top:72px;bottom:0;width:250px;background:#070809;border-right:1px solid rgba(255,255,255,.06);padding:18px 14px;z-index:50;overflow:auto}.sidebar nav{display:grid;gap:6px}.nav-item{height:42px;border-radius:9px;border:1px solid transparent;background:transparent;color:#aaa;text-align:left;padding:0 14px;display:flex;align-items:center;gap:12px;cursor:pointer;font-size:13px}.nav-item span{width:18px;text-align:center}.nav-item em{margin-left:auto;background:#7d070d;color:#ff5a62;font-size:8px;font-style:normal;padding:2px 5px;border-radius:4px}.nav-item.active,.nav-item:hover{color:#fff;background:linear-gradient(90deg,rgba(190,10,18,.28),rgba(120,0,8,.12));border-color:rgba(255,24,30,.45);box-shadow:inset 0 0 20px rgba(255,0,0,.04)}.warning-card,.verified-card,.auto-card{margin-top:22px;border:1px solid rgba(255,20,20,.28);border-radius:10px;background:radial-gradient(circle at 50% 20%,rgba(255,0,0,.08),transparent 48%),#08090a;padding:16px;text-align:center}.warn-icon{font-size:32px;color:var(--red);margin-bottom:4px}.warning-card h3{margin:0;color:var(--red)}.warning-card p{font-size:11px;color:#aaa;line-height:1.55;margin:7px 0}.warning-card strong{font-size:22px;color:var(--red);text-shadow:0 0 15px rgba(255,0,0,.35)}.verified-card{display:flex;align-items:center;gap:13px;text-align:left}.stamp{border:3px solid var(--red);border-radius:50%;width:88px;height:62px;display:grid;place-items:center;transform:rotate(-10deg);font-weight:900;color:var(--red);font-size:12px}.verified-card p{font-size:11px;color:#999}.auto-card{display:flex;justify-content:space-between;align-items:center;text-align:left;border-color:rgba(255,255,255,.07);margin-bottom:20px}.auto-card>div{display:grid;grid-template-columns:auto 1fr;gap:0 8px;align-items:center}.auto-card strong{font-size:12px}.auto-card small{grid-column:2;color:#777}.auto-card button{background:none;border:0;color:#aaa}.online-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#2ee06f;box-shadow:0 0 10px rgba(46,224,111,.55);margin-right:6px}.content{margin-left:250px;margin-right:330px;padding:94px 26px 50px;min-height:100vh}.hero-grid{display:grid;grid-template-columns:1.05fr 1.75fr .95fr;gap:14px}.glass-card{position:relative;min-height:200px;border:1px solid rgba(255,30,30,.32);border-radius:13px;background:linear-gradient(180deg,rgba(16,12,13,.96),rgba(8,8,9,.98));overflow:hidden;box-shadow:inset 0 0 55px rgba(255,0,0,.025),0 20px 45px rgba(0,0,0,.22)}.vip-card{padding:18px}.eyebrow{font-size:10px;color:#bbb}.vip-user{display:flex;align-items:center;gap:12px;margin:16px 0}.avatar.big{width:55px;height:55px}.vip-number{margin-top:12px}.vip-number b{font-size:22px}.progress{height:7px;background:#1b1c1f;border-radius:99px;overflow:hidden}.progress i{display:block;height:100%;width:72.35%;background:linear-gradient(90deg,#e2171f,#ff2632);box-shadow:0 0 14px rgba(255,0,0,.35)}.vip-foot{display:flex;justify-content:space-between;margin-top:12px;font-size:10px;color:#777}.vip-foot b{color:#e4aa28}.tournament-card{padding:20px;background:radial-gradient(circle at 75% 50%,rgba(255,0,0,.11),transparent 40%),linear-gradient(180deg,#0e090a,#09090a)}.tournament-copy{position:relative;z-index:3}.pill,.badge{display:inline-block;background:#ad1118;color:#fff;border:1px solid #ff3a40;border-radius:5px;font-size:8px;padding:4px 8px}.tournament-copy h1{font-size:31px;margin:11px 0 0;color:#eee;letter-spacing:.02em}.tournament-copy h2{font-size:41px;margin:0;color:var(--red);text-shadow:0 0 20px rgba(255,0,0,.25)}.tournament-copy p{font-size:12px}.tournament-copy button,.cashback-card button,.bottom-cards button{background:linear-gradient(#d71a22,#79070b);border:1px solid #ff3137;color:#fff;border-radius:7px;padding:9px 17px;font-size:11px;cursor:pointer}.masked-group{position:absolute;right:12px;bottom:0;display:flex;align-items:end;gap:-5px;filter:drop-shadow(0 0 22px rgba(255,0,0,.15))}.mask-person{width:75px;height:150px;background:linear-gradient(180deg,#2a2b2e 0 16%,#111 17% 100%);clip-path:polygon(35% 0,65% 0,78% 18%,85% 40%,100% 100%,0 100%,15% 40%,22% 18%)}.mask-2{height:170px;width:90px;background:linear-gradient(180deg,#333 0 15%,#130b0c 16%)}.mask-3{height:135px;width:65px}.countdown{position:absolute;right:12px;bottom:12px;background:rgba(0,0,0,.6);border:1px solid rgba(255,0,0,.25);border-radius:7px;padding:7px 10px;font-size:8px;color:#888}.countdown b{color:#ff393f}.cashback-card{padding:17px}.percent{display:block;font-size:54px;font-weight:1000;color:var(--red)}.cashback-card h3{font-size:25px;margin:-6px 0 0}.cashback-card p{font-size:10px}.roulette-mini{position:absolute;width:120px;height:120px;border-radius:50%;right:-20px;top:40px;background:repeating-conic-gradient(#781017 0 10deg,#171717 10deg 20deg);border:8px solid #2a0a0c;box-shadow:0 0 30px rgba(255,0,0,.14);animation:spin 12s linear infinite}.section-block{margin-top:28px}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:10px}.section-head h3{margin:0;font-size:15px}.section-head h3 span{color:var(--red)}.section-tools{display:flex;gap:6px}.section-tools button{background:#0d0f12;border:1px solid rgba(255,255,255,.06);color:#aaa;border-radius:7px;height:31px;padding:0 12px}.game-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.game-card{position:relative;height:190px;border:1px solid rgba(255,24,30,.48);border-radius:9px;background:#0a0b0d;overflow:hidden;cursor:pointer;transition:.22s}.game-card:hover{transform:translateY(-5px) scale(1.015);box-shadow:0 14px 35px rgba(0,0,0,.4),0 0 24px rgba(255,0,0,.1)}.game-card .badge{position:absolute;right:7px;top:7px;z-index:3}.art{height:135px;display:grid;place-items:center;font-size:42px;background:radial-gradient(circle at 50% 40%,rgba(255,0,0,.15),transparent 52%),linear-gradient(#15090a,#070708)}.coin-art:before{content:"";width:95px;height:95px;border-radius:50%;background:radial-gradient(circle,#9e7b48 0 18%,#3e2a17 20% 48%,#111 50%);border:8px solid #704819;box-shadow:0 0 18px rgba(255,120,0,.2);animation:coinFloat 3s ease-in-out infinite}.roulette-art:before{content:"";width:105px;height:105px;border-radius:50%;background:repeating-conic-gradient(#96121a 0 10deg,#151515 10deg 20deg);border:8px solid #3a1113;box-shadow:inset 0 0 0 3px #8d5414;animation:spin 8s linear infinite}.blackjack-art{font-size:37px;font-weight:900;color:#eee;letter-spacing:-8px;transform:rotate(-4deg)}.crash-art{position:relative;overflow:hidden}.crash-art:after{content:"";position:absolute;width:140%;height:2px;background:#ff1b24;transform:rotate(-17deg);box-shadow:0 0 14px #ff1b24}.crash-art b{color:#ff222d;font-size:34px;transform:rotate(-8deg)}.slots-art{font-size:48px;font-weight:1000;color:#ff343c;text-shadow:0 0 18px rgba(255,0,0,.35)}.dice-art{font-size:54px;color:#e2464d;letter-spacing:5px}.game-card h4{margin:7px 9px 0;font-size:16px}.game-card p{margin:3px 9px;color:#777;font-size:9px}.live-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.live-card{height:140px;border:1px solid rgba(255,30,30,.42);border-radius:9px;background:radial-gradient(circle at 50% 20%,#5b171a 0 10%,transparent 28%),linear-gradient(180deg,#211012,#080809 72%);position:relative;overflow:hidden;display:flex;align-items:end;padding:10px}.live-card:before{content:"";position:absolute;inset:15px 34% 42px;border-radius:50% 50% 30% 30%;background:linear-gradient(#e5b197 0 24%,#2b1516 25% 100%);box-shadow:0 0 40px rgba(255,0,0,.12)}.live-card>div{position:relative;z-index:2;display:grid}.live-card strong{font-size:11px}.live-card small{font-size:9px;color:#999}.viewer{position:absolute;right:7px;top:6px;font-size:9px;background:rgba(0,0,0,.6);padding:3px 6px;border-radius:5px;z-index:3}.new-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.mini-card{height:150px;border:1px solid rgba(255,20,20,.5);border-radius:9px;background:#0b0b0c;position:relative;overflow:hidden}.mini-card span{position:absolute;top:6px;left:6px;background:#b90e16;border-radius:4px;padding:3px 5px;font-size:8px}.mini-art{height:105px;display:grid;place-items:center;font-size:46px;background:radial-gradient(circle,rgba(255,0,0,.12),transparent 60%)}.mini-card h5{margin:3px 9px;font-size:13px}.bottom-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}.bottom-cards article{min-height:140px;border:1px solid rgba(255,20,20,.35);border-radius:10px;padding:17px;background:linear-gradient(135deg,#130809,#090909);position:relative;overflow:hidden}.bottom-cards article:after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;right:-40px;bottom:-60px;background:radial-gradient(circle,rgba(255,0,0,.12),transparent 65%)}.bottom-cards h3{margin:0}.bottom-cards p{font-size:11px;color:#999}.chat-panel{position:fixed;right:0;top:72px;bottom:0;width:330px;background:#070809;border-left:1px solid rgba(255,255,255,.07);z-index:60;display:flex;flex-direction:column}.chat-head{height:65px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;justify-content:space-between;align-items:center;padding:0 14px}.chat-head>div:first-child{display:grid}.chat-head strong{font-size:13px}.chat-head small{font-size:10px;color:#888;margin-top:5px}.chat-head button{background:#0d1013;border:1px solid rgba(255,255,255,.05);color:#999;border-radius:7px;width:31px;height:31px}.chat-list{flex:1;overflow:auto;padding:11px}.message{display:grid;grid-template-columns:34px 1fr;gap:9px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.035)}.msg-avatar{width:34px;height:34px;border-radius:7px;background:linear-gradient(135deg,#3d1114,#0d0d0e);border:1px solid rgba(255,0,0,.2);display:grid;place-items:center}.msg-head{display:flex;justify-content:space-between}.msg-head strong{font-size:11px}.msg-head time{font-size:9px;color:#666}.message p{margin:4px 0 0;color:#aaa;font-size:11px;line-height:1.45}.message.bot p{border:1px solid rgba(255,20,20,.4);border-radius:7px;padding:8px;background:#0c0c0d}.chat-compose{display:flex;gap:7px;padding:10px;border-top:1px solid rgba(255,255,255,.06)}.chat-compose input{flex:1;background:#0d0f12;border:1px solid rgba(255,255,255,.06);border-radius:8px;color:#ddd;padding:0 11px}.chat-compose button{width:42px;background:linear-gradient(#d81720,#79070b);border:1px solid #fa3038;border-radius:8px;color:#fff}.chat-footer{display:flex;gap:6px;padding:0 10px 10px}.chat-footer button{flex:1;background:#0a0b0d;border:1px solid rgba(255,255,255,.05);color:#777;border-radius:7px;height:35px}.game-modal{position:fixed;inset:0;background:rgba(0,0,0,.76);backdrop-filter:blur(10px);z-index:200;display:none;place-items:center}.game-modal.open{display:grid}.modal-card{width:min(520px,92vw);border:1px solid rgba(255,20,20,.45);border-radius:15px;background:linear-gradient(#10090a,#08090a);padding:22px;position:relative;text-align:center;box-shadow:0 35px 100px rgba(0,0,0,.55),0 0 60px rgba(255,0,0,.08)}.modal-close{position:absolute;right:11px;top:10px;width:34px;height:34px;border-radius:8px;background:#111;border:1px solid rgba(255,255,255,.06);color:#aaa}.modal-card p{font-size:11px;color:#888}.bet-row{display:flex;gap:8px}.bet-row input{width:120px;background:#0c0d0f;border:1px solid rgba(255,255,255,.07);border-radius:8px;color:#fff;padding:10px}.bet-row button{flex:1;background:linear-gradient(#dd171f,#80070b);border:1px solid #ff3038;border-radius:8px;color:#fff;font-weight:900}.game-result{min-height:28px;margin-top:14px;color:#bbb}.stage-coin{width:140px;height:140px;border-radius:50%;margin:8px auto;background:radial-gradient(circle,#a87a40 0 20%,#3f2915 22% 50%,#141414 52%);border:12px solid #77481f;box-shadow:0 0 35px rgba(255,70,0,.15)}.stage-coin.spin{animation:coinSpin .9s linear 3}.stage-wheel{width:170px;height:170px;border-radius:50%;margin:8px auto;background:repeating-conic-gradient(#901018 0 10deg,#181818 10deg 20deg);border:10px solid #361012;box-shadow:inset 0 0 0 4px #8f5515}.stage-wheel.spin{animation:spin 2.1s cubic-bezier(.1,.7,.1,1) 2}.stage-cards{height:160px;display:flex;justify-content:center;align-items:center;gap:10px}.stage-card{width:90px;height:130px;border-radius:10px;background:#eee;color:#111;display:grid;place-items:center;font-size:32px;font-weight:900;box-shadow:0 20px 40px rgba(0,0,0,.25)}.stage-card.deal{animation:deal .55s cubic-bezier(.2,.8,.2,1)}.stage-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:15px 0}.stage-reel{height:120px;border:1px solid rgba(255,20,20,.3);background:#0e0f11;border-radius:9px;display:grid;place-items:center;font-size:38px;color:#ff343c}.stage-reel.spin{animation:reel .12s linear infinite}.stage-crash{height:170px;position:relative;overflow:hidden;border:1px solid rgba(255,20,20,.2);border-radius:10px;background:#08090a}.stage-crash-line{position:absolute;height:2px;width:140%;left:-10%;bottom:20%;background:#ff1e28;transform:rotate(-16deg);transform-origin:left center;box-shadow:0 0 14px #ff1e28}.stage-crash b{position:absolute;right:20px;top:20px;color:#ff2933;font-size:38px}.stage-dice{font-size:90px;margin:20px 0;color:#e5444c}.win-flash{animation:winFlash .55s ease 2}.shake{animation:shake .35s linear 2}@keyframes spin{to{transform:rotate(360deg)}}@keyframes coinFloat{50%{transform:translateY(-6px) rotateY(22deg)}}@keyframes coinSpin{to{transform:rotateY(1080deg)}}@keyframes deal{from{transform:translateY(-90px) rotateY(100deg);opacity:0}to{transform:none;opacity:1}}@keyframes reel{50%{transform:translateY(4px);filter:blur(2px)}}@keyframes winFlash{50%{box-shadow:0 0 70px rgba(255,30,30,.55);transform:scale(1.02)}}@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}@media(max-width:1450px){.chat-panel{width:290px}.content{margin-right:290px}.game-grid{grid-template-columns:repeat(3,1fr)}.new-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:1100px){.topbar{grid-template-columns:230px 1fr}.top-actions{display:none}.sidebar{width:210px}.content{margin-left:210px;margin-right:0}.chat-panel{display:none}.hero-grid{grid-template-columns:1fr}.live-grid{grid-template-columns:repeat(2,1fr)}.bottom-cards{grid-template-columns:1fr}}@media(max-width:760px){.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:translateX(0)}.content{margin-left:0;padding:84px 12px 30px}.topbar{grid-template-columns:auto 1fr}.logo-text{display:none}.search-wrap{margin:0 12px}.game-grid,.new-grid,.live-grid{grid-template-columns:1fr 1fr}.hero-grid{grid-template-columns:1fr}.masked-group{opacity:.35}}
.hidden{display:none!important}
.top-user{display:flex;align-items:center;gap:8px}
.secondary-auth,.admin-open{height:42px;border-radius:9px;border:1px solid rgba(255,35,35,.22);background:#0c0d10;color:#eee;padding:0 15px;cursor:pointer}
.admin-open{background:linear-gradient(#d51a22,#7b050a);font-weight:800}
.auth-card{max-width:410px}
.auth-input{width:100%;height:46px;margin-top:10px;border:1px solid rgba(255,35,35,.22);border-radius:9px;background:#090a0c;color:#fff;padding:0 13px;outline:none}
.auth-input:focus{border-color:#e91d2b;box-shadow:0 0 18px rgba(255,30,45,.08)}
.auth-submit{width:100%;height:46px;margin-top:13px;border:1px solid #ff3540;border-radius:9px;background:linear-gradient(#e51e2a,#81060c);color:#fff;font-weight:900;cursor:pointer}
.rakeback-panel{display:grid;grid-template-columns:1fr 280px auto;align-items:center;gap:20px;margin-top:28px;padding:20px;border:1px solid rgba(255,25,35,.32);border-radius:12px;background:radial-gradient(circle at 85% 50%,rgba(255,0,20,.08),transparent 35%),#08090a}
.rakeback-panel h3{margin:6px 0;color:#ff2d38;font-size:25px}.rakeback-panel p{margin:0;color:#888;font-size:11px}
.rake-stats{display:grid}.rake-stats strong{font-size:27px}.rake-stats span{font-size:9px;color:#777}
.rakeback-panel button{height:42px;border-radius:8px;border:1px solid #ff3640;background:linear-gradient(#db1a24,#79060b);color:#fff;font-weight:800}
.admin-card{width:min(720px,94vw);max-height:80vh;overflow:auto}
.admin-users{display:grid;gap:8px;margin-top:15px}.admin-user-row{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;border:1px solid rgba(255,255,255,.06);background:#090a0c;border-radius:9px;padding:10px}
.admin-user-row>div{display:grid;text-align:left}.admin-user-row small{color:#777}.admin-user-row button{height:34px;border:1px solid rgba(255,30,40,.3);background:#24060a;color:#ff5660;border-radius:7px}
.toast-wrap{position:fixed;right:350px;top:88px;z-index:1000;display:grid;gap:8px}
.toast{min-width:260px;padding:11px 14px;border-radius:9px;background:#0b0d10;border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 45px rgba(0,0,0,.35);font-size:12px}
.toast.ok{border-color:rgba(52,225,116,.35)}.toast.error{border-color:rgba(255,40,55,.42);color:#ff7a83}
@media(max-width:1100px){.toast-wrap{right:18px}.rakeback-panel{grid-template-columns:1fr}}
/* ===== V3 FULL GAME PAGES / PROFILE / REALTIME ===== */
.game-page{
position:fixed;
left:250px;
right:330px;
top:72px;
bottom:0;
background:
radial-gradient(circle at 50% 0%,rgba(255,25,45,.07),transparent 34%),
#050607;
z-index:45;
overflow:auto;
transform:translateX(110%);
opacity:0;
pointer-events:none;
transition:.28s cubic-bezier(.2,.8,.2,1);
}
.game-page.open{transform:none;opacity:1;pointer-events:auto}
.game-page-shell{padding:22px;min-height:100%}
.game-toolbar{display:flex;align-items:center;gap:18px;margin-bottom:14px}
.game-toolbar>button{height:40px;padding:0 14px;border:1px solid rgba(255,35,45,.22);background:#0c0e11;color:#ddd;border-radius:9px;cursor:pointer}
.game-toolbar h2{margin:2px 0 0;font-size:24px}
.game-toolbar-status{margin-left:auto;color:#8d8d8d;font-size:11px}
.game-layout{display:grid;grid-template-columns:260px 1fr;gap:12px}
.game-controls{padding:14px;min-height:590px}
.mode-tabs{display:grid;grid-template-columns:1fr 1fr;background:#080a0d;border-radius:10px;padding:5px;margin-bottom:18px}
.mode-tabs button{height:36px;border:0;border-radius:7px;background:transparent;color:#777}
.mode-tabs button.active{background:#171c26;color:#fff}
.game-controls label{display:block;color:#aaa;font-size:11px;margin:13px 0 7px}
.bet-input-wrap{display:grid;grid-template-columns:1fr 42px 42px;border:1px solid rgba(255,30,40,.28);border-radius:9px;overflow:hidden}
.bet-input-wrap input,.auto-settings input,.game-controls select{height:42px;background:#080a0d;border:0;color:#fff;padding:0 10px;outline:0}
.bet-input-wrap button{border:0;border-left:1px solid rgba(255,255,255,.06);background:#10141a;color:#aaa}
.game-controls select{width:100%;border:1px solid rgba(255,255,255,.06);border-radius:9px}
.auto-settings{display:grid}
.main-play-btn{width:100%;height:44px;margin-top:16px;border:1px solid #ff3945;border-radius:8px;background:linear-gradient(#e61b29,#82070d);color:#fff;font-weight:900;cursor:pointer}
.control-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}
.control-stats div{padding:10px;border:1px solid rgba(255,255,255,.05);border-radius:8px;background:#090b0e;display:grid}
.control-stats span{font-size:9px;color:#666}.control-stats strong{margin-top:4px}
.game-canvas-wrap{min-width:0}
.game-canvas{min-height:590px;position:relative;overflow:hidden;background:linear-gradient(180deg,#121927,#0b1018)}
.game-canvas:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.45)),repeating-linear-gradient(90deg,transparent 0 88px,rgba(255,255,255,.015) 88px 89px);pointer-events:none}
.game-scene{height:520px;display:grid;place-items:center;position:relative;overflow:hidden}
.game-overlay-info{position:absolute;left:18px;right:18px;bottom:16px;display:flex;justify-content:space-between;align-items:center;color:#7e8795;font-size:11px}
.game-overlay-info strong{color:#ff4755;font-size:18px}
.game-bottom-bar{display:flex;justify-content:space-between;padding:12px 15px;background:#0d121a;border:1px solid rgba(255,255,255,.06);border-top:0;border-radius:0 0 11px 11px;color:#8a93a0;font-size:10px}
.game-info-card{margin-top:12px;padding:13px}
.game-info-tabs{display:flex;gap:8px}.game-info-tabs button{height:35px;padding:0 18px;border:0;border-radius:7px;background:#111722;color:#9199a4}.game-info-tabs button.active{background:#1c2534;color:#fff}
.game-info-content{display:grid;grid-template-columns:110px 1fr;gap:14px;margin-top:12px}.info-thumb{height:86px;border-radius:9px;background:radial-gradient(circle,#481017,#0b0c0e 70%);border:1px solid rgba(255,30,40,.2)}.info-badges{display:flex;gap:7px;flex-wrap:wrap}.info-badges span{padding:7px 9px;border-radius:6px;background:#111722;color:#ddd;font-size:9px}.game-info-content p{color:#8e96a1;font-size:11px}
.profile-modal-card{max-width:520px;text-align:left}.profile-large-head{display:flex;gap:14px;align-items:center}.profile-large-avatar{width:70px;height:70px}.profile-large-head h2{margin:4px 0}.profile-large-head p{margin:0;color:#ff3743}.profile-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px}.profile-stats-grid div{padding:12px;border:1px solid rgba(255,255,255,.06);border-radius:9px;background:#090b0e;display:grid}.profile-stats-grid span{font-size:9px;color:#666}.profile-stats-grid strong{font-size:18px;margin-top:5px}.profile-progress-wrap{margin-top:18px}.profile-progress-head{display:flex;justify-content:space-between;font-size:11px;color:#8a8a8a;margin-bottom:7px}
/* full-game visual scenes */
.scene-roulette{width:330px;height:330px;border-radius:50%;background:repeating-conic-gradient(#8f1119 0 9deg,#11151c 9deg 18deg);border:22px solid #241316;box-shadow:inset 0 0 0 8px #742019,0 0 50px rgba(255,20,30,.15);position:relative}
.scene-roulette:after{content:"";position:absolute;inset:38%;border-radius:50%;background:#090b0e;border:6px solid #a23020}
.scene-roulette.spin{animation:spin 2.6s cubic-bezier(.1,.7,.1,1) 2}
.scene-coin{width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,#bf8c4c 0 20%,#5f391c 21% 51%,#15171a 52%);border:15px solid #653715;box-shadow:0 0 55px rgba(255,80,20,.12)}
.scene-coin.spin{animation:coinSpin 1s linear 3}
.scene-slots{display:grid;grid-template-columns:repeat(3,140px);gap:12px}.scene-reel{height:190px;border-radius:14px;border:1px solid rgba(255,30,40,.23);background:#0b0e13;display:grid;place-items:center;font-size:54px;color:#ff3641}.scene-reel.spin{animation:reel .12s linear infinite}
.scene-blackjack{display:flex;gap:18px;perspective:900px}.scene-card{width:150px;height:215px;border-radius:13px;background:#f0ede7;color:#111;display:grid;place-items:center;font-size:48px;font-weight:900;box-shadow:0 30px 60px rgba(0,0,0,.35)}.scene-card.deal{animation:deal .6s cubic-bezier(.2,.8,.2,1)}
.scene-crash{position:relative;width:80%;height:360px;border-left:1px solid #293342;border-bottom:1px solid #293342}.scene-crash-line{position:absolute;left:0;bottom:0;width:0;height:4px;background:#ff2634;box-shadow:0 0 20px rgba(255,30,45,.7);transform-origin:left center;transform:rotate(-18deg);transition:width 1.5s linear}.scene-crash.run .scene-crash-line{width:115%}.scene-crash-value{position:absolute;right:12%;top:20%;font-size:56px;color:#ff2b39;font-weight:1000}
.scene-dice{font-size:130px;color:#ff3e49;filter:drop-shadow(0 0 28px rgba(255,20,35,.18))}
/* Live cards open like normal games */
.live-card{cursor:pointer;transition:.2s}.live-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,0,0,.3),0 0 22px rgba(255,0,0,.07)}
@media(max-width:1100px){
.game-page{left:210px;right:0}
}
@media(max-width:760px){
.game-page{left:0;right:0}
.game-layout{grid-template-columns:1fr}
.game-controls{min-height:auto}
.game-canvas{min-height:460px}
.game-scene{height:390px}
.scene-roulette{width:250px;height:250px}
.scene-slots{grid-template-columns:repeat(3,90px)}
.scene-reel{height:140px}
}
/* ===== V4 DATABASE / PROFILE EDIT / ADMIN MANAGEMENT ===== */
.profile-edit-box{
margin-top:18px;
padding-top:15px;
border-top:1px solid rgba(255,255,255,.06);
}
.profile-edit-box label{
display:block;
margin:10px 0 5px;
color:#7e8792;
font-size:10px;
}
.profile-textarea{
width:100%;
min-height:76px;
resize:vertical;
border:1px solid rgba(255,35,45,.18);
border-radius:9px;
background:#090a0c;
color:#fff;
padding:10px 12px;
outline:0;
}
#profileAvatarFile{
width:100%;
margin-top:9px;
color:#7f8995;
font-size:10px;
}
.alt-action{
background:#11151b!important;
border-color:rgba(255,255,255,.08)!important;
color:#aaa!important;
}
.profile-large-avatar.has-image,
.avatar.has-image,
.msg-avatar.has-image{
background-size:cover!important;
background-position:center!important;
color:transparent!important;
}
.admin-management-card{
width:min(1100px,95vw)!important;
max-height:88vh!important;
text-align:left!important;
}
.admin-head{
display:flex;
align-items:end;
justify-content:space-between;
gap:20px;
}
.admin-head h2{margin:4px 0 0}
.admin-search{max-width:280px;margin:0!important}
.admin-layout{
display:grid;
grid-template-columns:360px 1fr;
gap:12px;
margin-top:18px;
min-height:520px;
}
.admin-users{
max-height:66vh;
overflow:auto;
align-content:start;
}
.admin-user-row{
cursor:pointer;
grid-template-columns:42px 1fr auto!important;
transition:.15s;
}
.admin-user-row:hover,
.admin-user-row.selected{
border-color:rgba(255,35,45,.28);
background:#101116;
}
.admin-avatar{
width:38px;height:38px;border-radius:8px;
background:#16191e;
display:grid;place-items:center;
background-size:cover;background-position:center;
border:1px solid rgba(255,255,255,.06)
}
.admin-user-row small{display:block;margin-top:3px}
.admin-banned{color:#ff4552!important}
.admin-detail{
border:1px solid rgba(255,255,255,.06);
border-radius:11px;
background:#080a0d;
padding:16px;
overflow:auto;
}
.admin-empty{display:grid;place-items:center;height:100%;color:#636b75;font-size:12px}
.admin-detail-head{display:flex;align-items:center;gap:12px;margin-bottom:15px}
.admin-detail-head .admin-avatar{width:58px;height:58px}
.admin-detail-head h3{margin:0}
.admin-detail-head p{margin:4px 0;color:#777;font-size:10px}
.admin-form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}
.admin-field{display:grid;gap:5px}
.admin-field label{font-size:9px;color:#6f7780}
.admin-field input,.admin-field textarea{
min-width:0;
height:40px;
background:#0d1014;
border:1px solid rgba(255,255,255,.06);
border-radius:8px;
color:#ddd;
padding:0 10px;
}
.admin-field textarea{height:80px;padding:9px;resize:vertical}
.admin-check{
display:flex;
align-items:center;
gap:8px;
margin:12px 0;
color:#9da4ad;
font-size:11px;
}
.admin-actions{display:flex;flex-wrap:wrap;gap:7px}
.admin-actions button{
height:36px;padding:0 12px;border-radius:7px;
border:1px solid rgba(255,35,45,.20);
background:#1b090c;color:#ff6a75;cursor:pointer
}
.admin-actions .primary-admin{
background:linear-gradient(#d71b27,#76070d);
border-color:#ff3945;color:#fff
}
.admin-actions .danger-admin{
margin-left:auto;background:#25070a;color:#ff3543
}
.admin-history{
margin-top:18px;border-top:1px solid rgba(255,255,255,.06);padding-top:12px
}
.admin-history h4{margin:0 0 8px;font-size:12px}
.admin-history-row{
display:grid;
grid-template-columns:1fr auto auto;
gap:10px;padding:7px 0;
border-bottom:1px solid rgba(255,255,255,.035);
font-size:10px;color:#8c949e
}
@media(max-width:850px){
.admin-layout{grid-template-columns:1fr}
.admin-users{max-height:260px}
.admin-form-grid{grid-template-columns:1fr}
}
/* ===== V5 FAIRNESS + PER-GAME CONTROLS ===== */
.mini-card{cursor:pointer;transition:.2s}
.mini-card:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(0,0,0,.32),0 0 22px rgba(255,0,0,.08)}
.fairness-btn{
background:transparent;border:0;color:#9aa4b2;cursor:pointer;font-size:10px;
display:flex;align-items:center;gap:7px
}
.fair-check{
display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;
color:#fff;background:#c91220;border:1px solid #ff3240;
box-shadow:0 0 15px rgba(255,30,45,.2);font-weight:900
}
.fairness-card{width:min(520px,92vw);text-align:left}
.fair-tabs{display:grid;grid-template-columns:1fr 1fr;background:#111722;padding:6px;border-radius:9px;margin:16px 0}
.fair-tabs button{height:38px;border:0;border-radius:7px;background:transparent;color:#b6bfca}
.fair-tabs button.active{background:#202c40;color:#fff}
.fairness-card label{display:block;color:#aab4c1;font-size:11px;margin:13px 0 7px}
.fair-value{
min-height:40px;border-radius:8px;background:#202c40;display:flex;align-items:center;
justify-content:space-between;padding:0 11px;gap:10px
}
.fair-value code{font-family:Consolas,monospace;color:#d8dee8;font-size:11px;overflow:hidden;text-overflow:ellipsis}
.fair-value button{border:0;background:transparent;color:#cbd4df;cursor:pointer}
.fair-divider{height:1px;background:#263143;margin:18px 0}
.fairness-card h4{margin:0;color:#d8dee8}
.fair-previous{margin-top:14px;padding:10px;border:1px solid rgba(255,35,45,.18);border-radius:8px;background:#0c0f14;font-size:10px;color:#818b98;word-break:break-all}
.fair-result{margin-top:12px;padding:10px;border-radius:8px;background:#0c0f14;color:#9fa9b5;font-size:10px;word-break:break-all}
.game-control-title{font-size:10px;color:#c5ced9;letter-spacing:.08em;margin-bottom:13px}
.control-group{margin-top:13px}
.control-group label{display:block;color:#a0a9b5;font-size:10px;margin-bottom:6px}
.control-group input,.control-group select{
width:100%;height:42px;background:#0b0e13;color:#fff;border:1px solid rgba(255,255,255,.07);
border-radius:8px;padding:0 10px;outline:0
}
.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.choice-grid.three{grid-template-columns:repeat(3,1fr)}
.choice-btn{
height:38px;border:1px solid rgba(255,255,255,.07);background:#11161f;color:#8994a3;border-radius:7px;cursor:pointer
}
.choice-btn.active{border-color:#ff3442;background:#2a0b10;color:#fff;box-shadow:0 0 18px rgba(255,25,40,.08)}
.bet-tools{display:grid;grid-template-columns:1fr 42px 42px;overflow:hidden;border:1px solid rgba(255,35,45,.18);border-radius:8px}
.bet-tools input{border:0!important;border-radius:0!important}
.bet-tools button{border:0;border-left:1px solid rgba(255,255,255,.05);background:#11161e;color:#8791a0}
.control-note{margin-top:7px;color:#69727e;font-size:9px;line-height:1.45}
.crash-auto-box{padding:10px;border:1px solid rgba(255,35,45,.12);border-radius:8px;background:#0b0e12}
.crash-auto-box strong{color:#ff3845}
.tower-grid{display:grid;grid-template-columns:repeat(4,64px);gap:7px}
.tower-cell{height:42px;border-radius:7px;background:#121722;border:1px solid #1b2431}
.tower-cell.active{background:#351016;border-color:#ff3644;box-shadow:0 0 16px rgba(255,30,45,.12)}
.case-scene{display:flex;gap:20px}.case-box{width:150px;height:120px;border-radius:12px;background:linear-gradient(135deg,#24191b,#0b0d11);border:1px solid rgba(255,35,45,.22);display:grid;place-items:center;font-size:42px}
.vault-scene{width:280px;height:220px;border-radius:18px;background:radial-gradient(circle at 50% 50%,#5c0e16 0 14%,#15181e 15% 40%,#080a0d 41%);border:16px solid #20242b;box-shadow:0 0 60px rgba(255,20,35,.12)}
.blacklist-scene{display:flex;gap:10px}.blacklist-card{width:110px;height:155px;border-radius:10px;background:linear-gradient(#171a20,#090b0e);border:1px solid rgba(255,255,255,.07);display:grid;place-items:center;font-size:36px;color:#ff3c49}
.deadspin-scene{width:290px;height:290px;border-radius:50%;background:repeating-conic-gradient(#771018 0 18deg,#11151c 18deg 36deg);border:16px solid #1c1013;box-shadow:inset 0 0 0 6px #6c1c22,0 0 50px rgba(255,20,35,.12)}
.deadspin-scene.spin{animation:spin 2.3s cubic-bezier(.1,.7,.1,1) 2}
.heist-scene{position:relative;width:80%;height:320px;border-left:1px solid #273142;border-bottom:1px solid #273142}
.heist-line{position:absolute;left:0;bottom:0;width:0;height:4px;background:#ff2634;box-shadow:0 0 18px #ff2634;transform-origin:left center;transform:rotate(-15deg);transition:width 1.4s linear}
.heist-scene.run .heist-line{width:110%}
.heist-value{position:absolute;right:12%;top:18%;font-size:48px;color:#ff3341;font-weight:900}
/* ===== V6 FIXES: MANUAL/AUTO + PER-GAME SETTINGS + CHAT ===== */
.common-control-tabs{
display:grid;
grid-template-columns:1fr 1fr;
background:#080a0d;
border-radius:10px;
padding:5px;
margin-bottom:16px;
}
.common-control-tabs button{
height:36px;border:0;border-radius:7px;background:transparent;color:#7c8795;cursor:pointer
}
.common-control-tabs button.active{
background:#202c40;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)
}
.game-auto-settings{
margin-top:12px;padding:10px;border:1px solid rgba(255,255,255,.06);
border-radius:9px;background:#090c11
}
.game-auto-settings .control-group:first-child{margin-top:0}
.game-mode-summary{
margin-top:12px;padding:9px;border-radius:8px;background:#0a0d12;
border:1px solid rgba(255,255,255,.05);color:#6f7a88;font-size:9px;line-height:1.5
}
.risk-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.risk-buttons button{
height:37px;border:1px solid rgba(255,255,255,.06);border-radius:7px;
background:#11161e;color:#8290a0;cursor:pointer
}
.risk-buttons button.active{
background:#2a0b10;border-color:#ff3341;color:#fff
}
.percent-input{position:relative}
.percent-input input{padding-right:34px!important}
.percent-input:after{
content:"×";position:absolute;right:12px;top:50%;transform:translateY(-50%);
color:#ff4452;font-weight:800;font-size:12px
}
.chat-connection{
padding:6px 10px;border-top:1px solid rgba(255,255,255,.04);
color:#66717e;font-size:9px;background:#080a0d
}
.chat-connection.online{color:#42d981}
.chat-connection.fallback{color:#e0a83c}
.chat-connection.offline{color:#ff5663}
.fairness-btn{
position:relative;z-index:10
}
.fairness-card{
z-index:250
}
/* ===== V7 FAIRNESS MODAL FIX ===== */
#fairnessModal{
z-index:5000!important;
pointer-events:none;
}
#fairnessModal.open{
display:grid!important;
pointer-events:auto!important;
}
#fairnessModal .fairness-card{
position:relative;
z-index:5001;
pointer-events:auto;
}
#fairnessBtn{
cursor:pointer!important;
pointer-events:auto!important;
}
/* V8 boot/error visibility */
.chat-connection{min-height:24px}
#gameModeSummary{min-height:30px}
/* V9 */
.common-control-tabs{min-height:46px}
#dynamicGameControls:empty::before{
content:"Kraunami žaidimo valdikliai...";
color:#687380;
font-size:10px;
}
/* ===== V10 RANKING / CHAT HOLOGRAMS ===== */
.rank-badge,
.rank-hologram,
.profile-rank-title{
--rank-color:#727983;
--rank-glow:rgba(114,121,131,.20);
}
.rank-badge{
display:inline-flex;
align-items:center;
min-height:18px;
padding:2px 7px;
border-radius:5px;
border:1px solid color-mix(in srgb,var(--rank-color) 48%,transparent);
color:var(--rank-color);
background:color-mix(in srgb,var(--rank-color) 10%,transparent);
box-shadow:0 0 11px var(--rank-glow);
font-size:8px;
font-weight:900;
letter-spacing:.06em;
}
.msg-name-line{
display:flex;
align-items:center;
gap:6px;
min-width:0;
}
.rank-hologram{
position:relative;
display:inline-flex;
align-items:center;
padding:2px 6px;
border:1px solid color-mix(in srgb,var(--rank-color) 52%,transparent);
border-radius:4px;
color:var(--rank-color);
background:
linear-gradient(180deg,color-mix(in srgb,var(--rank-color) 13%,transparent),transparent),
#090b0e;
font-size:7px;
line-height:1.2;
font-weight:1000;
letter-spacing:.08em;
text-shadow:0 0 8px var(--rank-glow);
box-shadow:
inset 0 0 10px color-mix(in srgb,var(--rank-color) 5%,transparent),
0 0 12px var(--rank-glow);
overflow:hidden;
}
.rank-hologram:after{
content:"";
position:absolute;
left:-80%;
top:0;
width:42%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
transform:skewX(-22deg);
animation:rankHoloSweep 3.8s ease-in-out infinite;
}
.bot-tag{
color:#f3b920;
font-size:7px;
border:1px solid rgba(243,185,32,.25);
border-radius:4px;
padding:2px 5px;
}
.profile-rank-title{
display:inline-block;
color:var(--rank-color)!important;
text-shadow:0 0 14px var(--rank-glow);
font-weight:900;
}
.rank-unranked{--rank-color:#7b8490;--rank-glow:rgba(123,132,144,.18)}
.rank-wood-1{--rank-color:#9a6b42;--rank-glow:rgba(154,107,66,.24)}
.rank-wood-2{--rank-color:#ad7647;--rank-glow:rgba(173,118,71,.27)}
.rank-wood-3{--rank-color:#c0824d;--rank-glow:rgba(192,130,77,.30)}
.rank-bronze-1{--rank-color:#b96f3c;--rank-glow:rgba(185,111,60,.28)}
.rank-bronze-2{--rank-color:#ce7c40;--rank-glow:rgba(206,124,64,.31)}
.rank-bronze-3{--rank-color:#e08b48;--rank-glow:rgba(224,139,72,.34)}
.rank-silver-1{--rank-color:#aeb9c6;--rank-glow:rgba(174,185,198,.25)}
.rank-silver-2{--rank-color:#c4cfdb;--rank-glow:rgba(196,207,219,.30)}
.rank-silver-3{--rank-color:#e1e8ef;--rank-glow:rgba(225,232,239,.35)}
.rank-gold-1{--rank-color:#d9a72f;--rank-glow:rgba(217,167,47,.30)}
.rank-gold-2{--rank-color:#f0bb37;--rank-glow:rgba(240,187,55,.38)}
.rank-gold-3{--rank-color:#ffd45d;--rank-glow:rgba(255,212,93,.46)}
.rank-platinum-1{--rank-color:#74d5d8;--rank-glow:rgba(116,213,216,.30)}
.rank-platinum-2{--rank-color:#8ae8e9;--rank-glow:rgba(138,232,233,.38)}
.rank-platinum-3{--rank-color:#b0ffff;--rank-glow:rgba(176,255,255,.48)}
.rank-diamond-1{--rank-color:#66a9ff;--rank-glow:rgba(102,169,255,.32)}
.rank-diamond-2{--rank-color:#7fc0ff;--rank-glow:rgba(127,192,255,.40)}
.rank-diamond-3{--rank-color:#a6d9ff;--rank-glow:rgba(166,217,255,.50)}
.rank-master{
--rank-color:#bf69ff;
--rank-glow:rgba(191,105,255,.50);
}
.rank-grandmaster{
--rank-color:#ff4f7b;
--rank-glow:rgba(255,79,123,.55);
}
.rank-elite{
--rank-color:#ff243a;
--rank-glow:rgba(255,36,58,.70);
animation:elitePulse 1.8s ease-in-out infinite;
}
.rank-admin{
--rank-color:#ff243a;
--rank-glow:rgba(255,36,58,.60);
}
@keyframes rankHoloSweep{
0%,72%{left:-80%;opacity:0}
78%{opacity:1}
100%{left:150%;opacity:0}
}
@keyframes elitePulse{
0%,100%{filter:drop-shadow(0 0 2px var(--rank-glow))}
50%{filter:drop-shadow(0 0 10px var(--rank-glow))}
}
/* ===== V12 DYNAMIC HOME RANK CARD ===== */
#vipRankLabel{
display:inline-flex;
margin-top:4px;
}
#vipCurrentRank{
text-shadow:0 0 10px currentColor;
}
#vipAvatar{
background-size:cover;
background-position:center;
overflow:hidden;
}
/* ===== V14 CHAT ROLE TAGS ===== */
.admin-message .msg-head strong{
color:#ff4960;
text-shadow:0 0 12px rgba(255,36,58,.28);
}
.admin-avatar{
background:linear-gradient(135deg,#ff263e,#6f0714)!important;
color:#fff!important;
font-weight:1000!important;
box-shadow:0 0 18px rgba(255,36,58,.25);
}
.rank-admin{
--rank-color:#ff3049!important;
--rank-glow:rgba(255,48,73,.65)!important;
animation:elitePulse 1.8s ease-in-out infinite;
}
/* ===== V17 HOME RANK CARD ===== */
.home-rank-user-copy{
display:grid;
gap:5px;
}
.home-rank-user-copy strong{
color:#fff;
font-size:13px;
max-width:130px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.home-rank-main{
display:flex;
align-items:end;
justify-content:space-between;
gap:12px;
margin-top:16px;
}
.home-rank-main>div:first-child{
display:grid;
gap:3px;
}
.home-rank-main span{
color:#666f7b;
font-size:8px;
}
.home-rank-main strong{
color:#fff;
font-size:17px;
text-shadow:0 0 12px currentColor;
}
.home-rank-percent{
font-size:22px;
font-weight:900;
color:#fff;
}
.home-rank-next{
display:grid;
grid-template-columns:1fr auto;
gap:8px;
align-items:center;
margin-top:10px;
font-size:8px;
}
.home-rank-next span{
color:#737c88;
}
.home-rank-next b{
color:#ffbd27;
text-align:right;
}
/* ===== V18 RANK CARD CONSISTENCY ===== */
.home-rank-user-copy{
display:flex!important;
flex-direction:column;
align-items:flex-start;
gap:7px!important;
min-width:0;
}
.home-rank-badge-row{
display:block;
width:100%;
}
#vipUserName{
display:block;
max-width:145px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
#vipRankLabel{
display:inline-flex!important;
width:auto!important;
}
/* ===== V19 HELP ===== */
.help-card{
width:min(720px,92vw)!important;
max-height:86vh;
overflow:auto;
text-align:left!important;
}
.help-card h2{
margin:6px 0 18px;
}
.help-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}
.help-item{
padding:14px;
border:1px solid rgba(255,255,255,.06);
border-radius:10px;
background:#0a0d12;
}
.help-item strong{
color:#fff;
font-size:12px;
}
.help-item p{
margin:7px 0 0;
color:#7e8995;
font-size:10px;
line-height:1.55;
}
@media(max-width:680px){
.help-grid{grid-template-columns:1fr}
}
/* V21 avatar presets */
.profile-avatar-shop{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.06)}
.profile-avatar-shop-head strong{display:block;color:#fff;font-size:11px}.profile-avatar-shop-head small{display:block;color:#68727f;font-size:8px;margin-top:3px}
.avatar-preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.avatar-preset{position:relative;min-height:92px;border:1px solid rgba(255,255,255,.06);border-radius:10px;background:#0a0d12;padding:8px;cursor:pointer;text-align:center}
.avatar-preset.selected{border-color:#ff3047;box-shadow:0 0 18px rgba(255,35,55,.13)}
.avatar-preset.locked{opacity:.45;cursor:not-allowed}
.avatar-preset-face{width:48px;height:48px;border-radius:12px;margin:0 auto 7px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.08)}
.avatar-preset span{display:block;color:#cbd2dc;font-size:8px;font-weight:800}.avatar-preset small{display:block;color:#727d8a;font-size:7px;margin-top:3px}
.avatar-lock{position:absolute;right:6px;top:6px;padding:2px 5px;border-radius:4px;background:#26080d;color:#ff5a69;font-size:7px}
.av-red-dot{background:radial-gradient(circle at 50% 48%,#ff3348 0 8%,#4c0811 9% 15%,transparent 16%),linear-gradient(145deg,#181014,#07090c)}
.av-masked{background:radial-gradient(ellipse at 50% 53%,#1c2028 0 28%,#06080b 29% 100%)}.av-masked:after{content:"◉";font-size:22px;color:#eee}
.av-ghost{background:radial-gradient(circle,#dfe7f2 0 22%,#7c8795 23% 28%,#11161e 29%)}.av-ghost:after{content:"◉";font-size:22px;color:#ff3348}
.av-wood-wolf{background:linear-gradient(145deg,#5e3b24,#140d09)}.av-wood-wolf:after{content:"🐺";font-size:28px}
.av-silver-skull{background:linear-gradient(145deg,#d7dee8,#49515b 45%,#11151b)}.av-silver-skull:after{content:"☠";font-size:28px;color:#fff}
.av-elite-eye{background:radial-gradient(circle,#ff263f 0 10%,#6a0717 11% 23%,#10070a 24%)}.av-elite-eye:after{content:"◉";font-size:28px;color:#ff5267}
/* ===== V25 LIVE PROFILE CHAT + RANK NEON + EMOJI ===== */
.message{
position:relative;
}
.message .msg-avatar{
flex:0 0 auto;
width:38px;
height:38px;
border-radius:10px;
border:1px solid rgba(255,255,255,.08);
background-size:cover;
background-position:center;
transition:border-color .2s ease, box-shadow .2s ease, filter .2s ease;
}
.message.rank-unranked .msg-avatar{
border-color:rgba(255,255,255,.10);
box-shadow:none;
}
.message.rank-wood-1 .msg-avatar,
.message.rank-wood-2 .msg-avatar,
.message.rank-wood-3 .msg-avatar{
border-color:rgba(151,98,53,.65);
box-shadow:0 0 7px rgba(151,98,53,.16);
}
.message.rank-bronze-1 .msg-avatar,
.message.rank-bronze-2 .msg-avatar,
.message.rank-bronze-3 .msg-avatar{
border-color:rgba(205,127,50,.78);
box-shadow:0 0 8px rgba(205,127,50,.24),0 0 18px rgba(205,127,50,.10);
}
.message.rank-silver-1 .msg-avatar,
.message.rank-silver-2 .msg-avatar,
.message.rank-silver-3 .msg-avatar{
border-color:rgba(218,228,240,.82);
box-shadow:0 0 9px rgba(220,232,245,.27),0 0 18px rgba(190,210,235,.14);
}
.message.rank-gold-1 .msg-avatar,
.message.rank-gold-2 .msg-avatar,
.message.rank-gold-3 .msg-avatar{
border-color:rgba(255,210,47,.95);
box-shadow:
0 0 8px rgba(255,205,35,.50),
0 0 18px rgba(255,205,35,.30),
0 0 30px rgba(255,205,35,.16);
}
.message.rank-platinum-1 .msg-avatar,
.message.rank-platinum-2 .msg-avatar,
.message.rank-platinum-3 .msg-avatar{
border-color:rgba(77,245,230,.94);
box-shadow:
0 0 9px rgba(77,245,230,.45),
0 0 19px rgba(77,245,230,.28),
0 0 32px rgba(77,245,230,.14);
}
.message.rank-diamond-1 .msg-avatar,
.message.rank-diamond-2 .msg-avatar,
.message.rank-diamond-3 .msg-avatar{
border-color:rgba(72,151,255,.98);
box-shadow:
0 0 9px rgba(72,151,255,.50),
0 0 20px rgba(72,151,255,.30),
0 0 34px rgba(72,151,255,.16);
}
.message.rank-master .msg-avatar{
border-color:rgba(180,91,255,.98);
box-shadow:
0 0 10px rgba(180,91,255,.52),
0 0 22px rgba(180,91,255,.31),
0 0 36px rgba(180,91,255,.18);
}
.message.rank-grandmaster .msg-avatar{
border-color:rgba(255,67,189,.98);
box-shadow:
0 0 10px rgba(255,67,189,.55),
0 0 23px rgba(255,67,189,.34),
0 0 38px rgba(255,67,189,.20);
animation:v25RankPulse 2.2s ease-in-out infinite;
}
.message.rank-elite .msg-avatar,
.message.rank-admin .msg-avatar{
border-color:rgba(255,46,67,1);
box-shadow:
0 0 10px rgba(255,46,67,.60),
0 0 24px rgba(255,46,67,.42),
0 0 42px rgba(255,46,67,.25);
animation:v25ElitePulse 1.65s ease-in-out infinite;
}
@keyframes v25RankPulse{
0%,100%{filter:brightness(1);transform:translateZ(0)}
50%{filter:brightness(1.16);box-shadow:0 0 13px rgba(255,67,189,.65),0 0 29px rgba(255,67,189,.42),0 0 48px rgba(255,67,189,.25)}
}
@keyframes v25ElitePulse{
0%,100%{filter:brightness(1)}
50%{filter:brightness(1.22);box-shadow:0 0 14px rgba(255,46,67,.72),0 0 31px rgba(255,46,67,.48),0 0 52px rgba(255,46,67,.28)}
}
.chat-compose-wrap{
position:relative;
}
.chat-emoji-picker{
position:absolute;
left:8px;
right:8px;
bottom:58px;
z-index:25;
display:none;
grid-template-columns:repeat(6,1fr);
gap:5px;
padding:8px;
border:1px solid rgba(255,255,255,.08);
border-radius:10px;
background:rgba(10,14,20,.98);
box-shadow:0 16px 38px rgba(0,0,0,.45);
backdrop-filter:blur(10px);
}
.chat-emoji-picker.open{display:grid}
.chat-emoji-picker button{
height:32px;
border:1px solid transparent;
border-radius:7px;
background:#111824;
color:#fff;
font-size:17px;
cursor:pointer;
transition:.15s ease;
}
.chat-emoji-picker button:hover{
transform:translateY(-2px);
border-color:rgba(255,44,60,.32);
background:#182131;
}
.chat-compose .emoji-toggle{
width:38px;
min-width:38px;
border-radius:8px;
border:1px solid rgba(255,255,255,.07);
background:#111824;
color:#aeb8c5;
font-size:17px;
cursor:pointer;
}
.chat-compose .emoji-toggle.active{
color:#fff;
border-color:rgba(255,42,58,.42);
background:#211014;
}
/* ===== V26 CHAT FIXES ===== */
/* Ensure emoji picker is actually clickable above chat layers */
.chat-compose-wrap{
position:relative!important;
z-index:60!important;
}
.chat-emoji-picker{
z-index:9999!important;
pointer-events:auto!important;
}
.chat-emoji-picker.open{
display:grid!important;
pointer-events:auto!important;
}
.chat-emoji-picker button,
#emojiBtn{
pointer-events:auto!important;
position:relative;
z-index:10000;
}
/* Do not let decorative overlays cover the composer/picker */
.chat-panel::before,
.chat-panel::after{
pointer-events:none!important;
}
/* Rank glow is applied directly on avatar as rank-glow-* class */
.msg-avatar.rank-glow-unranked{
border-color:rgba(255,255,255,.10)!important;
box-shadow:none!important;
}
.msg-avatar.rank-glow-wood-1,
.msg-avatar.rank-glow-wood-2,
.msg-avatar.rank-glow-wood-3{
border-color:rgba(151,98,53,.72)!important;
box-shadow:0 0 8px rgba(151,98,53,.20)!important;
}
.msg-avatar.rank-glow-bronze-1,
.msg-avatar.rank-glow-bronze-2,
.msg-avatar.rank-glow-bronze-3{
border-color:rgba(205,127,50,.95)!important;
box-shadow:0 0 9px rgba(205,127,50,.40),0 0 20px rgba(205,127,50,.18)!important;
}
.msg-avatar.rank-glow-silver-1,
.msg-avatar.rank-glow-silver-2,
.msg-avatar.rank-glow-silver-3{
border-color:#dbe7f4!important;
box-shadow:0 0 10px rgba(219,231,244,.45),0 0 22px rgba(190,210,235,.22)!important;
}
.msg-avatar.rank-glow-gold-1,
.msg-avatar.rank-glow-gold-2,
.msg-avatar.rank-glow-gold-3{
border:2px solid #ffd21f!important;
box-shadow:
0 0 8px rgba(255,210,31,.95),
0 0 18px rgba(255,210,31,.70),
0 0 34px rgba(255,210,31,.45)!important;
}
.msg-avatar.rank-glow-platinum-1,
.msg-avatar.rank-glow-platinum-2,
.msg-avatar.rank-glow-platinum-3{
border:2px solid #4df5e6!important;
box-shadow:0 0 9px rgba(77,245,230,.85),0 0 22px rgba(77,245,230,.52),0 0 36px rgba(77,245,230,.28)!important;
}
.msg-avatar.rank-glow-diamond-1,
.msg-avatar.rank-glow-diamond-2,
.msg-avatar.rank-glow-diamond-3{
border:2px solid #4897ff!important;
box-shadow:0 0 10px rgba(72,151,255,.90),0 0 24px rgba(72,151,255,.58),0 0 38px rgba(72,151,255,.30)!important;
}
.msg-avatar.rank-glow-master{
border:2px solid #b45bff!important;
box-shadow:0 0 10px rgba(180,91,255,.90),0 0 24px rgba(180,91,255,.56),0 0 40px rgba(180,91,255,.30)!important;
}
.msg-avatar.rank-glow-grandmaster{
border:2px solid #ff43bd!important;
box-shadow:0 0 11px rgba(255,67,189,.95),0 0 26px rgba(255,67,189,.60),0 0 44px rgba(255,67,189,.34)!important;
animation:v26RankPulse 1.9s ease-in-out infinite;
}
.msg-avatar.rank-glow-elite,
.msg-avatar.rank-glow-admin{
border:2px solid #ff2e43!important;
box-shadow:0 0 12px rgba(255,46,67,.98),0 0 28px rgba(255,46,67,.65),0 0 48px rgba(255,46,67,.38)!important;
animation:v26ElitePulse 1.5s ease-in-out infinite;
}
@keyframes v26RankPulse{
50%{filter:brightness(1.18)}
}
@keyframes v26ElitePulse{
50%{filter:brightness(1.25)}
}
/* ===== V27 CRASH VISUAL ===== */
.crash-v27{
position:relative;
width:min(900px,92%);
height:390px;
overflow:hidden;
border:1px solid rgba(255,45,60,.16);
border-radius:16px;
background:
radial-gradient(circle at 72% 23%,rgba(255,27,45,.10),transparent 28%),
linear-gradient(180deg,#0b0f15,#07090d);
box-shadow:inset 0 0 50px rgba(255,35,50,.025),0 25px 65px rgba(0,0,0,.28);
}
.crash-v27-grid{
position:absolute;
inset:0;
opacity:.22;
background-image:
linear-gradient(rgba(110,130,155,.18) 1px,transparent 1px),
linear-gradient(90deg,rgba(110,130,155,.18) 1px,transparent 1px);
background-size:64px 52px;
-webkit-mask-image:linear-gradient(to top,black,rgba(0,0,0,.40));
mask-image:linear-gradient(to top,black,rgba(0,0,0,.40));
}
.crash-v27-chart{
position:absolute;
inset:20px 15px 22px;
width:calc(100% - 30px);
height:calc(100% - 42px);
overflow:visible;
}
.crash-v27-path{
fill:none;
stroke-width:6;
stroke-linecap:round;
stroke-linejoin:round;
}
.crash-v27-area{
fill:rgba(255,28,44,.055);
}
.crash-v27-dot{
fill:#ff3044;
stroke:#fff;
stroke-width:2;
filter:drop-shadow(0 0 9px #ff263b);
}
.crash-v27-value{
position:absolute;
left:50%;
top:43%;
transform:translate(-50%,-50%);
color:#f8fbff;
font-size:clamp(46px,6vw,78px);
font-weight:1000;
letter-spacing:-3px;
text-shadow:0 0 30px rgba(255,37,55,.23);
z-index:5;
}
.crash-v27-status{
position:absolute;
left:18px;
top:16px;
z-index:5;
padding:5px 8px;
border:1px solid rgba(255,255,255,.06);
border-radius:6px;
background:rgba(8,11,16,.76);
color:#727d8d;
font-size:8px;
font-weight:900;
letter-spacing:1.2px;
}
.crash-v27-axis{
position:absolute;
left:20px;
right:20px;
bottom:8px;
display:flex;
justify-content:space-between;
color:#394352;
font-size:8px;
}
.crash-v27.busted{
animation:v27CrashShake .34s ease 2;
}
.crash-v27.busted .crash-v27-value{
color:#ff2e42;
text-shadow:0 0 18px rgba(255,42,60,.55),0 0 45px rgba(255,42,60,.28);
}
.crash-v27.busted .crash-v27-status{
color:#ff5262;
border-color:rgba(255,46,66,.24);
background:#1c090d;
}
.crash-v27.cashed .crash-v27-value{
color:#50f0a7;
text-shadow:0 0 22px rgba(80,240,167,.38);
}
.crash-v27.cashed .crash-v27-status{
color:#65f1b1;
border-color:rgba(80,240,167,.20);
background:#071710;
}
@keyframes v27CrashShake{
25%{transform:translateX(-4px)}
75%{transform:translateX(4px)}
}
@media(max-width:760px){
.crash-v27{height:300px;width:96%}
.crash-v27-value{font-size:48px}
}
/* ===== V28 CHAT RESTYLE ===== */
.chat-panel{
background:linear-gradient(180deg,#0a101c 0%,#09111e 35%,#08101b 100%);
border-left:1px solid rgba(116,160,255,.12);
box-shadow:inset 0 1px 0 rgba(255,255,255,.03), -14px 0 45px rgba(0,0,0,.20);
}
.chat-head{
padding:14px 14px 12px;
border-bottom:1px solid rgba(123,149,201,.10);
background:linear-gradient(180deg,rgba(10,18,30,.95),rgba(8,15,26,.88));
}
.chat-head strong{font-size:14px; font-weight:800; color:#f3f7ff}
.chat-head small{font-size:11px; color:#7e90ad}
.chat-list{
padding:12px 10px 16px;
gap:6px;
display:flex;
flex-direction:column;
background:linear-gradient(180deg,rgba(7,13,24,.36),rgba(8,13,24,.15));
}
.message{
display:grid !important;
grid-template-columns:40px minmax(0,1fr);
gap:8px;
padding:2px 0;
border-bottom:0 !important;
align-items:flex-start;
}
.message .msg-avatar{
width:40px;
height:40px;
border-radius:10px;
}
.message .msg-body{min-width:0; display:flex; flex-direction:column; gap:4px;}
.message .msg-meta{
display:flex;
align-items:center;
gap:6px;
min-width:0;
flex-wrap:wrap;
padding-left:2px;
}
.message .msg-meta strong{
font-size:12px;
line-height:1;
font-weight:800;
color:#d9e5ff;
max-width:140px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.message .msg-meta small{
font-size:10px;
line-height:1;
color:#7786a4;
}
.rank-hologram{
display:inline-flex;
align-items:center;
gap:4px;
max-width:110px;
padding:2px 6px;
border-radius:999px;
font-size:8.5px;
line-height:1;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
border:1px solid rgba(255,255,255,.08);
background:rgba(17,28,48,.76);
color:#b8c6e6;
box-shadow:0 0 0 1px rgba(255,255,255,.02) inset;
}
.message .msg-text{
display:inline-block;
max-width:100%;
padding:10px 12px;
border-radius:12px;
background:linear-gradient(180deg,#172742,#12233c);
border:1px solid rgba(114,141,196,.12);
color:#edf3ff;
font-size:12px;
line-height:1.42;
word-break:break-word;
box-shadow:
0 0 0 1px rgba(255,255,255,.015) inset,
0 8px 20px rgba(0,0,0,.18),
0 0 18px rgba(38,96,214,.08);
}
.message.admin-message .msg-text,
.message.rank-admin .msg-text,
.message.rank-elite .msg-text{
background:linear-gradient(180deg,#1b1014,#150c10);
border-color:rgba(255,54,70,.20);
box-shadow:0 0 0 1px rgba(255,255,255,.015) inset,0 8px 24px rgba(0,0,0,.22),0 0 18px rgba(255,35,55,.11);
}
.message.rank-gold-1 .msg-text,
.message.rank-gold-2 .msg-text,
.message.rank-gold-3 .msg-text{
border-color:rgba(255,210,31,.26);
box-shadow:0 0 0 1px rgba(255,255,255,.015) inset,0 10px 22px rgba(0,0,0,.22),0 0 14px rgba(255,210,31,.10);
}
.message.rank-silver-1 .msg-text,
.message.rank-silver-2 .msg-text,
.message.rank-silver-3 .msg-text{
border-color:rgba(214,226,245,.18);
box-shadow:0 0 0 1px rgba(255,255,255,.015) inset,0 10px 22px rgba(0,0,0,.22),0 0 12px rgba(214,226,245,.08);
}
.message.rank-platinum-1 .msg-text,
.message.rank-platinum-2 .msg-text,
.message.rank-platinum-3 .msg-text,
.message.rank-diamond-1 .msg-text,
.message.rank-diamond-2 .msg-text,
.message.rank-diamond-3 .msg-text,
.message.rank-master .msg-text,
.message.rank-grandmaster .msg-text{
box-shadow:0 0 0 1px rgba(255,255,255,.015) inset,0 10px 22px rgba(0,0,0,.22),0 0 14px rgba(77,245,230,.08);
}
.rank-hologram.rank-admin,
.rank-hologram.rank-elite{color:#ff7a88;border-color:rgba(255,70,86,.22);background:rgba(43,15,20,.86)}
.rank-hologram.rank-gold-1,
.rank-hologram.rank-gold-2,
.rank-hologram.rank-gold-3{color:#ffd95f;border-color:rgba(255,210,31,.20);background:rgba(46,36,11,.82)}
.rank-hologram.rank-silver-1,
.rank-hologram.rank-silver-2,
.rank-hologram.rank-silver-3{color:#dbe7f4;border-color:rgba(214,226,245,.18);background:rgba(19,28,41,.82)}
.rank-hologram.rank-wood-1,
.rank-hologram.rank-wood-2,
.rank-hologram.rank-wood-3{color:#cfab88;border-color:rgba(151,98,53,.20);background:rgba(33,22,16,.82)}
.rank-hologram.rank-bronze-1,
.rank-hologram.rank-bronze-2,
.rank-hologram.rank-bronze-3{color:#ffbe81;border-color:rgba(205,127,50,.20);background:rgba(41,25,12,.82)}
.rank-hologram.rank-platinum-1,
.rank-hologram.rank-platinum-2,
.rank-hologram.rank-platinum-3{color:#8cfbf0;border-color:rgba(77,245,230,.20);background:rgba(13,39,40,.82)}
.rank-hologram.rank-diamond-1,
.rank-hologram.rank-diamond-2,
.rank-hologram.rank-diamond-3{color:#8fc5ff;border-color:rgba(72,151,255,.20);background:rgba(14,29,46,.82)}
.rank-hologram.rank-master{color:#d6a7ff;border-color:rgba(180,91,255,.20);background:rgba(28,16,42,.84)}
.rank-hologram.rank-grandmaster{color:#ff92d8;border-color:rgba(255,67,189,.22);background:rgba(45,12,33,.84)}
.chat-compose-wrap{padding:10px; border-top:1px solid rgba(123,149,201,.09); background:linear-gradient(180deg,#0b1320,#09111d)}
.chat-compose{gap:8px; padding:0; border-top:0; background:transparent}
.chat-compose input{
height:42px;
background:#1b2941;
border:1px solid rgba(120,146,200,.14);
border-radius:11px;
font-size:12px;
}
.chat-compose button#sendBtn{
width:58px;
min-width:58px;
border-radius:11px;
background:linear-gradient(180deg,#2183ff,#1260dd);
border:1px solid rgba(86,158,255,.60);
box-shadow:0 0 18px rgba(33,131,255,.16);
}
.chat-compose .emoji-toggle{
background:#172235;
border:1px solid rgba(120,146,200,.14);
color:#d9e5ff;
}
.chat-emoji-picker{
background:rgba(10,18,30,.98);
border:1px solid rgba(120,146,200,.14);
}
.chat-emoji-picker button{background:#18253a;border:1px solid rgba(120,146,200,.08)}
.chat-connection{padding:0 12px 8px;font-size:11px;color:#6d819f}
.chat-footer{padding:0 10px 10px;background:#09111d}
.chat-footer button{height:34px;border-radius:10px;background:#111a29;border:1px solid rgba(120,146,200,.08);color:#7b8da9}
@media(max-width:1450px){
.message .msg-meta strong{max-width:110px}
}
/* ===== V29 BETDICE-LIKE COMPACT CHAT ===== */
.chat-panel{
background:#09111e!important;
border-left:1px solid rgba(91,125,190,.12)!important;
}
.chat-list{
padding:10px 9px 14px!important;
gap:5px!important;
}
.message{
grid-template-columns:38px minmax(0,1fr)!important;
gap:7px!important;
padding:3px 0!important;
align-items:flex-start!important;
}
.message .msg-avatar{
width:38px!important;
height:38px!important;
border-radius:9px!important;
}
.message .msg-body{
min-width:0!important;
display:flex!important;
flex-direction:column!important;
gap:4px!important;
}
.message .msg-meta{
min-height:15px!important;
display:flex!important;
align-items:center!important;
gap:4px!important;
flex-wrap:nowrap!important;
overflow:hidden!important;
padding-left:1px!important;
}
.message .msg-meta strong{
font-size:11.5px!important;
line-height:14px!important;
font-weight:800!important;
color:#d8e5ff!important;
max-width:128px!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
}
.message .msg-meta small{
flex:0 0 auto!important;
font-size:9px!important;
color:#7283a1!important;
}
.message .msg-text{
align-self:flex-start!important;
width:auto!important;
max-width:100%!important;
padding:8px 10px!important;
border-radius:9px!important;
background:#14233a!important;
border:1px solid rgba(107,139,197,.10)!important;
color:#edf4ff!important;
font-size:11.5px!important;
line-height:1.42!important;
box-shadow:
0 4px 10px rgba(0,0,0,.14),
0 0 12px rgba(42,97,196,.045)!important;
}
.rank-hologram{
flex:0 0 auto!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
width:18px!important;
height:18px!important;
padding:0!important;
border:0!important;
border-radius:50%!important;
background:transparent!important;
box-shadow:none!important;
overflow:visible!important;
}
.rank-hologram .rank-holo-img{
width:18px!important;
height:18px!important;
object-fit:contain!important;
display:block!important;
filter:drop-shadow(0 0 3px rgba(255,255,255,.10));
}
.rank-hologram.rank-gold-1 .rank-holo-img,
.rank-hologram.rank-gold-2 .rank-holo-img,
.rank-hologram.rank-gold-3 .rank-holo-img{
filter:drop-shadow(0 0 3px rgba(255,218,58,.85)) drop-shadow(0 0 6px rgba(255,199,25,.40));
}
.rank-hologram.rank-platinum-1 .rank-holo-img,
.rank-hologram.rank-platinum-2 .rank-holo-img,
.rank-hologram.rank-platinum-3 .rank-holo-img{
filter:drop-shadow(0 0 3px rgba(70,255,205,.78)) drop-shadow(0 0 6px rgba(54,223,179,.30));
}
.rank-hologram.rank-diamond-1 .rank-holo-img,
.rank-hologram.rank-diamond-2 .rank-holo-img,
.rank-hologram.rank-diamond-3 .rank-holo-img{
filter:drop-shadow(0 0 3px rgba(90,170,255,.82)) drop-shadow(0 0 6px rgba(60,123,255,.32));
}
.rank-hologram.rank-master .rank-holo-img,
.rank-hologram.rank-grandmaster .rank-holo-img,
.rank-hologram.rank-elite .rank-holo-img,
.rank-hologram.rank-admin .rank-holo-img{
filter:drop-shadow(0 0 4px rgba(255,75,165,.82)) drop-shadow(0 0 8px rgba(255,55,115,.34));
}
.message.rank-gold-1 .msg-text,
.message.rank-gold-2 .msg-text,
.message.rank-gold-3 .msg-text{
border-color:rgba(255,210,31,.13)!important;
box-shadow:0 4px 10px rgba(0,0,0,.14),0 0 10px rgba(255,210,31,.045)!important;
}
.message.rank-elite .msg-text,
.message.rank-admin .msg-text{
background:#181922!important;
border-color:rgba(255,62,82,.13)!important;
box-shadow:0 4px 10px rgba(0,0,0,.14),0 0 12px rgba(255,46,67,.055)!important;
}
.message .msg-avatar.rank-glow-gold-1,
.message .msg-avatar.rank-glow-gold-2,
.message .msg-avatar.rank-glow-gold-3{
border:2px solid #ffd329!important;
box-shadow:0 0 6px rgba(255,211,41,.90),0 0 13px rgba(255,211,41,.45)!important;
}
.message .msg-avatar.rank-glow-platinum-1,
.message .msg-avatar.rank-glow-platinum-2,
.message .msg-avatar.rank-glow-platinum-3{
border:2px solid #56eacb!important;
box-shadow:0 0 6px rgba(86,234,203,.80),0 0 13px rgba(86,234,203,.40)!important;
}
.message .msg-avatar.rank-glow-diamond-1,
.message .msg-avatar.rank-glow-diamond-2,
.message .msg-avatar.rank-glow-diamond-3{
border:2px solid #5aa8ff!important;
box-shadow:0 0 6px rgba(90,168,255,.85),0 0 13px rgba(90,168,255,.43)!important;
}
.message .msg-avatar.rank-glow-master,
.message .msg-avatar.rank-glow-grandmaster,
.message .msg-avatar.rank-glow-elite,
.message .msg-avatar.rank-glow-admin{
box-shadow:0 0 7px currentColor,0 0 15px rgba(255,55,115,.45)!important;
}
.chat-compose-wrap{
background:#09111e!important;
}
.chat-compose input{
background:#18263d!important;
border-color:rgba(104,135,189,.13)!important;
color:#eef5ff!important;
}
.chat-compose button#sendBtn{
background:linear-gradient(180deg,#2387ff,#1669dd)!important;
border-color:#2e91ff!important;
}
/* ===== V30 CHAT POLISH ===== */
.chat-panel{
background:
radial-gradient(circle at 50% 0%,rgba(39,79,151,.10),transparent 28%),
linear-gradient(180deg,#0a1321 0%,#08111e 48%,#07101b 100%)!important;
}
.chat-head{
min-height:64px;
padding:13px 12px!important;
background:rgba(9,17,30,.92)!important;
backdrop-filter:blur(12px);
}
.chat-list{
scrollbar-width:thin;
scrollbar-color:#263b5c transparent;
}
.chat-list::-webkit-scrollbar{width:5px}
.chat-list::-webkit-scrollbar-thumb{background:#263b5c;border-radius:10px}
.message{
transition:background .15s ease,transform .15s ease;
border-radius:10px;
}
.message:hover{
background:rgba(45,72,116,.055);
}
.message .msg-avatar{
transition:transform .16s ease,box-shadow .18s ease!important;
}
.message:hover .msg-avatar{
transform:translateY(-1px);
}
.message .msg-meta strong{
letter-spacing:-.01em;
}
.message .msg-text{
position:relative;
background:
linear-gradient(180deg,rgba(24,40,65,.98),rgba(18,33,56,.98))!important;
}
.message .msg-text::before{
content:"";
position:absolute;
left:-4px;
top:8px;
width:8px;
height:8px;
background:#172941;
border-left:1px solid rgba(107,139,197,.10);
border-bottom:1px solid rgba(107,139,197,.10);
transform:rotate(45deg);
}
.message.rank-admin .msg-text::before,
.message.rank-elite .msg-text::before{
background:#181922;
}
.message-actions{
margin-left:auto;
width:18px;
height:18px;
border:0;
background:transparent;
color:#70809a;
display:grid;
place-items:center;
border-radius:5px;
cursor:pointer;
opacity:.35;
font-size:13px;
line-height:1;
}
.message:hover .message-actions{opacity:.9}
.message-actions:hover{
color:#dbe7fa;
background:rgba(111,145,202,.10);
}
.rank-hologram .rank-holo-img{
transform:translateZ(0);
}
.rank-hologram.rank-admin .rank-holo-img{
animation:v30AdminHolo 1.8s ease-in-out infinite;
}
@keyframes v30AdminHolo{
50%{
filter:drop-shadow(0 0 5px rgba(255,75,165,.95))
drop-shadow(0 0 10px rgba(255,55,115,.50));
transform:scale(1.06);
}
}
/* ===== V31 PROFESSIONAL GAME STAGES ===== */
.game-canvas{
background:
radial-gradient(circle at 50% 10%,rgba(255,39,56,.075),transparent 34%),
linear-gradient(180deg,#0a0f17,#070b11)!important;
}
.game-scene{
min-height:430px;
display:grid;
place-items:center;
}
.v31-stage{
position:relative;
width:min(820px,94%);
height:390px;
border-radius:18px;
overflow:hidden;
border:1px solid rgba(255,255,255,.055);
background:
linear-gradient(rgba(69,91,122,.07) 1px,transparent 1px),
linear-gradient(90deg,rgba(69,91,122,.07) 1px,transparent 1px),
radial-gradient(circle at 50% 45%,rgba(255,34,51,.07),transparent 36%),
linear-gradient(180deg,#0b111a,#070b11);
background-size:50px 50px,50px 50px,auto,auto;
box-shadow:inset 0 0 70px rgba(255,32,50,.025),0 24px 65px rgba(0,0,0,.28);
}
.v31-stage-head{
position:absolute;
left:16px;
right:16px;
top:14px;
display:flex;
align-items:center;
justify-content:space-between;
z-index:5;
}
.v31-stage-head span{
padding:5px 8px;
border-radius:6px;
border:1px solid rgba(255,255,255,.055);
background:rgba(8,13,20,.78);
color:#758399;
font-size:8px;
font-weight:900;
letter-spacing:.10em;
}
.v31-stage-head b{
color:#dbe5f4;
font-size:10px;
}
.v31-center{
position:absolute;
inset:55px 20px 28px;
display:grid;
place-items:center;
}
.v31-result-pill{
position:absolute;
bottom:14px;
left:50%;
transform:translateX(-50%);
z-index:8;
min-width:150px;
padding:7px 12px;
border-radius:999px;
text-align:center;
border:1px solid rgba(255,255,255,.06);
background:rgba(8,13,20,.86);
color:#8190a5;
font-size:9px;
font-weight:900;
}
.v31-result-pill.win{
color:#64f0b1;
border-color:rgba(74,238,164,.22);
box-shadow:0 0 20px rgba(74,238,164,.09);
}
.v31-result-pill.loss{
color:#ff6675;
border-color:rgba(255,65,83,.20);
box-shadow:0 0 20px rgba(255,47,65,.08);
}
/* Coin */
.v31-coin{
width:155px;
height:155px;
border-radius:50%;
position:relative;
transform-style:preserve-3d;
transition:transform .7s cubic-bezier(.15,.8,.15,1);
}
.v31-coin::before,
.v31-coin::after{
content:"";
position:absolute;
inset:0;
border-radius:50%;
backface-visibility:hidden;
display:grid;
place-items:center;
border:10px solid #603a17;
background:radial-gradient(circle at 40% 35%,#e1b55b,#805122 50%,#3a2210 72%);
box-shadow:inset 0 0 0 3px rgba(255,240,180,.18),0 0 28px rgba(230,151,46,.18);
}
.v31-coin::before{content:"H";font-size:52px;font-weight:1000;color:#3e2714}
.v31-coin::after{content:"T";font-size:52px;font-weight:1000;color:#3e2714;transform:rotateY(180deg)}
.v31-coin.spinning{animation:v31CoinSpin 1.4s cubic-bezier(.2,.75,.2,1)}
.v31-coin.tails{transform:rotateY(180deg)}
@keyframes v31CoinSpin{to{transform:rotateY(1440deg)}}
/* Roulette */
.v31-roulette{
width:240px;height:240px;border-radius:50%;
position:relative;
background:repeating-conic-gradient(#99131d 0 9.73deg,#10151d 9.73deg 19.46deg);
border:14px solid #291b12;
box-shadow:inset 0 0 0 5px #9b6b2d,inset 0 0 0 14px #15191f,0 0 40px rgba(255,45,55,.12);
}
.v31-roulette::after{
content:"";
position:absolute;inset:35%;border-radius:50%;
background:radial-gradient(circle,#bc8c3e,#3c2913 60%,#111 62%);
border:4px solid #b88a42;
}
.v31-roulette.spinning{animation:v31Wheel 1.9s cubic-bezier(.12,.72,.18,1)}
@keyframes v31Wheel{to{transform:rotate(1260deg)}}
.v31-ball{
position:absolute;
width:12px;height:12px;border-radius:50%;
background:#fff;
left:50%;top:10px;
transform:translateX(-50%);
box-shadow:0 0 10px rgba(255,255,255,.65);
}
/* Blackjack */
.v31-cards{display:flex;gap:16px;align-items:center;justify-content:center}
.v31-playing-card{
width:108px;height:150px;border-radius:12px;background:#f6f7fa;color:#111;
padding:10px;display:flex;justify-content:space-between;flex-direction:column;
font-size:26px;font-weight:1000;
box-shadow:0 18px 35px rgba(0,0,0,.32);
transform:translateY(-35px) rotateY(75deg);opacity:0;
}
.v31-playing-card.red{color:#d21e32}
.v31-playing-card.deal{animation:v31Deal .45s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes v31Deal{to{transform:none;opacity:1}}
.v31-card-total{
margin-top:18px;text-align:center;color:#dfe8f6;font-size:24px;font-weight:1000;
}
/* Slots */
.v31-slots{
width:min(480px,90%);
padding:18px;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
border:1px solid rgba(255,45,58,.15);
border-radius:16px;
background:linear-gradient(180deg,#101722,#090e15);
box-shadow:0 25px 55px rgba(0,0,0,.32),inset 0 0 40px rgba(255,40,55,.025);
}
.v31-reel{
height:135px;border-radius:12px;
display:grid;place-items:center;
background:#070b10;border:1px solid rgba(255,255,255,.06);
color:#ff3c50;font-size:40px;font-weight:1000;
overflow:hidden;
}
.v31-reel.spin{animation:v31Reel .12s linear infinite}
@keyframes v31Reel{50%{transform:translateY(3px);filter:blur(2px)}}
/* Dice */
.v31-dice-wrap{width:82%;display:grid;gap:18px}
.v31-dice-number{text-align:center;font-size:64px;font-weight:1000;color:#edf4ff}
.v31-dice-track{
position:relative;height:14px;border-radius:999px;
background:linear-gradient(90deg,#1d6dff,#2fd09b 55%,#ff3b4f);
box-shadow:inset 0 0 0 2px rgba(0,0,0,.22);
}
.v31-dice-marker{
position:absolute;top:-8px;width:4px;height:30px;border-radius:5px;background:#fff;
box-shadow:0 0 10px rgba(255,255,255,.7);
transition:left .75s cubic-bezier(.15,.8,.15,1);
}
.v31-dice-labels{display:flex;justify-content:space-between;color:#718097;font-size:9px}
/* Generic originals */
.v31-orb{
width:150px;height:150px;border-radius:28px;
display:grid;place-items:center;
border:1px solid rgba(255,60,75,.18);
background:radial-gradient(circle at 50% 35%,rgba(255,61,78,.18),transparent 42%),#0b1119;
box-shadow:0 0 40px rgba(255,45,62,.08);
color:#ff465b;font-size:52px;font-weight:1000;
transition:.6s ease;
}
.v31-orb.win{border-color:rgba(69,238,166,.35);box-shadow:0 0 45px rgba(69,238,166,.16);color:#59eeb0}
.v31-orb.loss{animation:v31Shake .28s ease 2}
@keyframes v31Shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
/* Preset avatars must show their chosen artwork in chat, not a generic dot */
.msg-avatar.av-wood-wolf,
.msg-avatar.av-silver-skull,
.msg-avatar.av-elite-eye,
.msg-avatar.av-masked,
.msg-avatar.av-ghost,
.msg-avatar.av-red-dot{
color:transparent!important;
overflow:hidden;
}
.msg-avatar.av-wood-wolf::after,
.msg-avatar.av-silver-skull::after,
.msg-avatar.av-elite-eye::after,
.msg-avatar.av-masked::after,
.msg-avatar.av-ghost::after{
display:grid!important;
place-items:center;
width:100%;
height:100%;
line-height:1;
}
.msg-avatar.av-wood-wolf::after{font-size:23px!important}
/* ===== V32 RED/BLACK CHAT THEME + EMOJI FIX ===== */
.chat-panel{
background:
radial-gradient(circle at 50% 0%,rgba(210,15,28,.08),transparent 26%),
linear-gradient(180deg,#0b0b0d 0%,#090a0c 50%,#070809 100%)!important;
border-left:1px solid rgba(255,38,48,.12)!important;
box-shadow:-14px 0 45px rgba(0,0,0,.28)!important;
}
.chat-head{
background:linear-gradient(180deg,rgba(15,12,14,.98),rgba(10,10,12,.96))!important;
border-bottom:1px solid rgba(255,39,48,.10)!important;
}
.chat-head strong{color:#f6f6f6!important}
.chat-head small{color:#8a8d94!important}
.chat-list{
background:linear-gradient(180deg,rgba(17,11,13,.20),rgba(8,9,11,.05))!important;
scrollbar-color:#4b151b transparent!important;
}
.chat-list::-webkit-scrollbar-thumb{
background:#4b151b!important;
}
.message:hover{
background:rgba(180,16,26,.035)!important;
}
.message .msg-meta strong{
color:#eceef2!important;
}
.message .msg-meta small{
color:#72757d!important;
}
.message .msg-text{
background:linear-gradient(180deg,#171316,#120f12)!important;
border-color:rgba(255,255,255,.055)!important;
color:#f1f1f3!important;
box-shadow:0 5px 14px rgba(0,0,0,.22),0 0 12px rgba(255,35,45,.025)!important;
}
.message .msg-text::before{
background:#161215!important;
border-color:rgba(255,255,255,.05)!important;
}
.chat-compose-wrap{
background:linear-gradient(180deg,#0d0d0f,#090a0c)!important;
border-top:1px solid rgba(255,39,48,.08)!important;
position:relative!important;
z-index:300!important;
overflow:visible!important;
}
.chat-compose{
position:relative!important;
z-index:301!important;
}
.chat-compose input{
background:#141416!important;
border:1px solid rgba(255,255,255,.065)!important;
color:#f3f3f4!important;
}
.chat-compose input:focus{
border-color:rgba(255,45,55,.30)!important;
box-shadow:0 0 0 2px rgba(255,34,45,.06)!important;
outline:none!important;
}
.chat-compose button#sendBtn{
background:linear-gradient(180deg,#df1b25,#8c090f)!important;
border:1px solid #f32d36!important;
box-shadow:0 0 16px rgba(225,24,35,.12)!important;
}
.chat-compose .emoji-toggle,
#emojiBtn{
width:40px!important;
min-width:40px!important;
height:42px!important;
display:grid!important;
place-items:center!important;
background:#171719!important;
border:1px solid rgba(255,255,255,.07)!important;
color:#d6d6d8!important;
border-radius:10px!important;
cursor:pointer!important;
pointer-events:auto!important;
z-index:99999!important;
}
.chat-compose .emoji-toggle:hover,
#emojiBtn:hover,
.chat-compose .emoji-toggle.active{
color:#fff!important;
background:#231014!important;
border-color:rgba(255,42,54,.32)!important;
}
.chat-emoji-picker{
position:absolute!important;
left:8px!important;
right:8px!important;
bottom:58px!important;
z-index:999999!important;
pointer-events:auto!important;
display:none!important;
grid-template-columns:repeat(6,1fr)!important;
gap:6px!important;
padding:9px!important;
background:rgba(15,12,14,.99)!important;
border:1px solid rgba(255,45,55,.14)!important;
box-shadow:0 18px 45px rgba(0,0,0,.55),0 0 28px rgba(255,30,40,.05)!important;
border-radius:12px!important;
}
.chat-emoji-picker.open{
display:grid!important;
}
.chat-emoji-picker button{
height:34px!important;
display:grid!important;
place-items:center!important;
background:#171719!important;
border:1px solid rgba(255,255,255,.055)!important;
color:#fff!important;
border-radius:8px!important;
cursor:pointer!important;
pointer-events:auto!important;
}
.chat-emoji-picker button:hover{
background:#241014!important;
border-color:rgba(255,45,55,.25)!important;
transform:translateY(-1px)!important;
}
/* preset avatar artwork: always show the selected preset in chat */
.msg-avatar{
position:relative!important;
overflow:hidden!important;
background-size:cover!important;
background-position:center!important;
}
.msg-avatar.av-red-dot::after,
.msg-avatar.av-masked::after,
.msg-avatar.av-ghost::after,
.msg-avatar.av-wood-wolf::after,
.msg-avatar.av-silver-skull::after,
.msg-avatar.av-elite-eye::after{
position:absolute!important;
inset:0!important;
display:grid!important;
place-items:center!important;
width:100%!important;
height:100%!important;
pointer-events:none!important;
}
.msg-avatar.av-red-dot::after{
content:"";
background:
radial-gradient(circle at 50% 50%,#ff2f3e 0 8%,#4c0811 9% 16%,transparent 17%),
linear-gradient(145deg,#181014,#07090c);
}
.msg-avatar.av-masked::after{
content:"◉"!important;
color:#f0f0f0!important;
font-size:22px!important;
background:radial-gradient(ellipse at 50% 53%,#1c2028 0 28%,#06080b 29% 100%)!important;
}
.msg-avatar.av-ghost::after{
content:"◉"!important;
color:#ff3348!important;
font-size:22px!important;
background:radial-gradient(circle,#dfe7f2 0 22%,#7c8795 23% 28%,#11161e 29%)!important;
}
.msg-avatar.av-wood-wolf::after{
content:"🐺"!important;
color:initial!important;
font-size:24px!important;
background:linear-gradient(145deg,#5e3b24,#140d09)!important;
}
.msg-avatar.av-silver-skull::after{
content:"☠"!important;
color:#fff!important;
font-size:25px!important;
background:linear-gradient(145deg,#d7dee8,#49515b 45%,#11151b)!important;
}
.msg-avatar.av-elite-eye::after{
content:"◉"!important;
color:#ff5267!important;
font-size:25px!important;
background:radial-gradient(circle,#ff263f 0 10%,#6a0717 11% 23%,#10070a 24%)!important;
}
/* rank glow stays theme-correct */
.msg-avatar.rank-glow-gold-1,
.msg-avatar.rank-glow-gold-2,
.msg-avatar.rank-glow-gold-3{
border:2px solid #ffd329!important;
box-shadow:0 0 7px rgba(255,211,41,.95),0 0 15px rgba(255,211,41,.48)!important;
}
.msg-avatar.rank-glow-admin,
.msg-avatar.rank-glow-elite{
border:2px solid #ff3044!important;
box-shadow:0 0 8px rgba(255,48,68,.95),0 0 17px rgba(255,48,68,.48)!important;
}
/* ===== V33 LOGIN-ONLY CHAT + SPECIAL ADMIN SHARD ===== */
.chat-compose-wrap.chat-locked{
position:relative!important;
}
.chat-compose-wrap.chat-locked .chat-compose{
opacity:.42!important;
filter:saturate(.45)!important;
}
.chat-compose-wrap.chat-locked::after{
content:"Prisijunk, kad galėtum rašyti";
position:absolute;
inset:8px;
display:grid;
place-items:center;
z-index:999999;
border-radius:10px;
background:rgba(10,10,12,.88);
border:1px solid rgba(255,45,55,.14);
color:#dedee1;
font-size:10px;
font-weight:900;
letter-spacing:.02em;
cursor:pointer;
backdrop-filter:blur(5px);
}
.chat-compose-wrap.chat-locked .chat-emoji-picker{
display:none!important;
}
.message.rank-admin{
position:relative;
}
.message.rank-admin::before{
content:"";
position:absolute;
left:-7px;
top:4px;
bottom:4px;
width:2px;
border-radius:4px;
background:linear-gradient(180deg,transparent,#ff3048 18%,#ff7384 50%,#ff3048 82%,transparent);
box-shadow:0 0 10px rgba(255,48,72,.82);
}
.message.rank-admin .msg-meta strong{
color:#fff5f6!important;
text-shadow:0 0 10px rgba(255,49,72,.28)!important;
}
.message.rank-admin .msg-text{
background:linear-gradient(180deg,#1c1115,#130d10)!important;
border-color:rgba(255,52,72,.18)!important;
box-shadow:0 7px 18px rgba(0,0,0,.25),0 0 18px rgba(255,43,64,.075)!important;
}
.admin-shard{
position:relative;
width:22px;
height:22px;
flex:0 0 22px;
display:inline-grid;
place-items:center;
margin-left:1px;
}
.admin-shard-core{
width:13px;
height:17px;
clip-path:polygon(50% 0,92% 28%,75% 82%,50% 100%,18% 78%,5% 27%);
background:linear-gradient(145deg,#fff2f4 0 8%,#ff7e8e 9% 24%,#e51b38 46%,#680713 100%);
filter:drop-shadow(0 0 4px rgba(255,58,82,.98)) drop-shadow(0 0 9px rgba(255,35,65,.62));
animation:v33AdminShard 1.55s ease-in-out infinite;
}
.admin-shard::before,
.admin-shard::after{
content:"";
position:absolute;
inset:2px;
border-radius:50%;
border:1px solid rgba(255,57,82,.18);
animation:v33ShardRing 1.55s ease-out infinite;
}
.admin-shard::after{animation-delay:.75s}
@keyframes v33AdminShard{
0%,100%{transform:translateY(0) rotate(-2deg) scale(1)}
50%{transform:translateY(-1px) rotate(2deg) scale(1.09);filter:drop-shadow(0 0 6px rgba(255,100,120,1)) drop-shadow(0 0 14px rgba(255,35,65,.74))}
}
@keyframes v33ShardRing{
0%{transform:scale(.7);opacity:.7}
100%{transform:scale(1.5);opacity:0}
}
.admin-rank-label{
display:inline-flex;
align-items:center;
height:18px;
padding:0 6px;
border-radius:999px;
border:1px solid rgba(255,62,81,.25);
background:linear-gradient(180deg,rgba(78,14,24,.9),rgba(40,9,15,.9));
color:#ff8a99;
font-size:8px;
line-height:1;
font-weight:1000;
letter-spacing:.10em;
box-shadow:0 0 11px rgba(255,40,62,.09);
}
/* ===== V34 MOBILE / RESPONSIVE CHAT + SITE ===== */
@media (max-width: 900px){
body{
overflow-x:hidden!important;
}
.topbar{
height:62px!important;
grid-template-columns:auto 1fr!important;
padding:0 8px!important;
}
.top-left{
padding:0 4px!important;
}
.search-wrap{
height:38px!important;
margin-left:6px!important;
margin-right:4px!important;
}
.sidebar{
top:62px!important;
width:min(82vw,280px)!important;
z-index:120!important;
}
.content{
margin-left:0!important;
margin-right:0!important;
padding:76px 10px 150px!important;
}
.hero-grid,
.bottom-cards,
.live-grid{
grid-template-columns:1fr!important;
}
.game-grid,
.new-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:8px!important;
}
.game-card{
height:165px!important;
}
.game-card .art{
height:112px!important;
}
.chat-panel{
position:fixed!important;
left:0!important;
right:0!important;
top:auto!important;
bottom:0!important;
width:100%!important;
height:min(62vh,520px)!important;
z-index:160!important;
border-left:0!important;
border-top:1px solid rgba(255,45,55,.15)!important;
border-radius:16px 16px 0 0!important;
box-shadow:0 -20px 55px rgba(0,0,0,.45)!important;
transform:translateY(calc(100% - 58px));
transition:transform .25s ease!important;
display:flex!important;
}
.chat-panel.mobile-open{
transform:translateY(0)!important;
}
.chat-head{
min-height:58px!important;
cursor:pointer!important;
flex:0 0 58px!important;
}
.chat-head::after{
content:"";
position:absolute;
top:7px;
left:50%;
width:42px;
height:4px;
margin-left:-21px;
border-radius:99px;
background:rgba(255,255,255,.16);
}
.chat-list{
min-height:0!important;
padding:8px 10px 12px!important;
}
.message{
grid-template-columns:36px minmax(0,1fr)!important;
gap:7px!important;
}
.message .msg-avatar{
width:36px!important;
height:36px!important;
}
.message .msg-meta strong{
max-width:110px!important;
font-size:11px!important;
}
.message .msg-text{
font-size:11px!important;
padding:8px 10px!important;
}
.chat-compose-wrap{
padding:8px!important;
}
.chat-compose input{
min-width:0!important;
height:40px!important;
}
.chat-compose .emoji-toggle,
#emojiBtn{
width:38px!important;
min-width:38px!important;
height:40px!important;
}
.chat-compose button#sendBtn{
width:48px!important;
min-width:48px!important;
height:40px!important;
}
.chat-footer{
display:none!important;
}
.game-page-shell{
padding:70px 8px 110px!important;
}
.game-layout{
grid-template-columns:1fr!important;
}
.game-controls{
order:2!important;
}
.game-canvas-wrap{
order:1!important;
}
.game-scene{
min-height:320px!important;
}
.v31-stage,
.crash-v27{
width:100%!important;
height:300px!important;
}
.profile-chip{
min-width:0!important;
}
}
@media (max-width: 560px){
.game-grid,
.new-grid{
grid-template-columns:1fr 1fr!important;
}
.logo-wrap .logo-text{
display:none!important;
}
.search-wrap{
max-width:none!important;
}
.message-actions{
display:none!important;
}
.admin-rank-label{
padding:0 5px!important;
font-size:7px!important;
}
.admin-shard{
width:20px!important;
height:20px!important;
flex-basis:20px!important;
}
.chat-emoji-picker{
grid-template-columns:repeat(6,1fr)!important;
left:6px!important;
right:6px!important;
}
}
/* ===== V36 AUTH EXPERIENCE ===== */
.auth-overlay{
background:
radial-gradient(circle at 50% 15%,rgba(225,20,38,.12),transparent 28%),
rgba(2,3,4,.86)!important;
backdrop-filter:blur(14px)!important;
}
.auth-v36-card{
position:relative;
width:min(455px,94vw);
padding:27px;
border:1px solid rgba(255,42,58,.18);
border-radius:20px;
background:
radial-gradient(circle at 80% 0,rgba(221,20,37,.08),transparent 30%),
linear-gradient(180deg,#100d0f,#090a0c);
box-shadow:0 42px 120px rgba(0,0,0,.62),0 0 70px rgba(255,25,42,.055);
overflow:hidden;
}
.auth-v36-card::before{
content:"";
position:absolute;left:15%;right:15%;top:0;height:1px;
background:linear-gradient(90deg,transparent,#ff4255,transparent);
box-shadow:0 0 17px #ff3045;
}
.auth-v36-close{right:12px!important;top:12px!important}
.auth-v36-brand{display:flex;align-items:center;gap:10px;margin-bottom:23px}
.auth-v36-mark{
width:39px;height:34px;clip-path:polygon(50% 0,100% 100%,0 100%);
background:linear-gradient(#ff4052,#8d0714);
display:grid;place-items:end center;padding-bottom:4px;font-weight:1000;
box-shadow:0 0 24px rgba(255,40,56,.18)
}
.auth-v36-brand>div:last-child{display:grid;line-height:.85}
.auth-v36-brand span{font-size:15px;font-weight:1000}
.auth-v36-brand strong{font-size:19px;color:#ff3347}
.auth-v36-copy{text-align:left}
.auth-v36-kicker{font-size:7px;font-weight:900;letter-spacing:.16em;color:#9e4652}
.auth-v36-copy h2{font-size:26px;margin:6px 0 5px;text-align:left}
.auth-v36-copy p{margin:0;color:#757982;font-size:10px;text-align:left}
.auth-v36-tabs{
display:grid;grid-template-columns:1fr 1fr;gap:4px;
padding:4px;margin:20px 0 18px;border:1px solid rgba(255,255,255,.055);
border-radius:10px;background:#08090b
}
.auth-v36-tabs button{
height:34px;border:0;border-radius:7px;background:transparent;color:#666b73;
font-size:8px;font-weight:900;cursor:pointer
}
.auth-v36-tabs button.active{
color:#fff;background:linear-gradient(180deg,#211015,#160c0f);
box-shadow:inset 0 0 0 1px rgba(255,47,64,.15),0 0 16px rgba(255,30,45,.04)
}
.auth-v36-form label{display:block;margin:11px 0 6px;color:#777b83;font-size:8px;text-align:left}
.auth-v36-input-wrap{
height:43px;display:flex;align-items:center;gap:8px;padding:0 10px;
border:1px solid rgba(255,255,255,.065);border-radius:9px;background:#090a0c
}
.auth-v36-input-wrap:focus-within{border-color:rgba(255,48,64,.30);box-shadow:0 0 0 2px rgba(255,34,50,.04)}
.auth-v36-input-wrap>span{color:#69323a;font-size:11px}
.auth-v36-input-wrap .auth-input{height:auto!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
.auth-v36-submit{height:43px!important;margin-top:17px!important;background:linear-gradient(180deg,#df1d35,#8a0816)!important;border-color:#f13b50!important}
.auth-v36-foot{display:flex;justify-content:space-between;margin-top:15px;color:#4f535a;font-size:7px}
.auth-v36-foot span:first-child{color:#686d75}.auth-v36-foot i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#36d87c;box-shadow:0 0 8px #36d87c;margin-right:4px}
/* ===== V36 ACCOUNT CENTER ===== */
.account-page{
position:fixed;inset:0;z-index:155;
display:none;overflow:auto;
background:
radial-gradient(circle at 78% 0,rgba(205,18,34,.075),transparent 27%),
#060708;
}
.account-page.open{display:block}
.account-shell{width:min(1380px,100%);margin:0 auto;padding:86px 24px 55px}
.account-toolbar{
height:60px;display:grid;grid-template-columns:180px 1fr auto;align-items:center;
gap:14px;margin-bottom:14px;padding:0 14px;
border:1px solid rgba(255,255,255,.055);border-radius:12px;background:rgba(11,12,14,.94)
}
.account-toolbar>button{
width:max-content;height:34px;padding:0 12px;border:1px solid rgba(255,255,255,.065);
border-radius:8px;background:#111317;color:#92969e;cursor:pointer
}
.account-toolbar h2{margin:2px 0 0;font-size:17px}
.account-toolbar-status{display:flex;align-items:center;gap:7px;color:#696e76;font-size:8px;font-weight:900;letter-spacing:.08em}
.account-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:13px}
.account-side{padding:22px;min-height:620px;text-align:center}
.account-avatar-wrap{position:relative;width:98px;height:98px;margin:10px auto 15px}
.account-avatar{
width:98px;height:98px;border-radius:22px;background:#16181c center/cover no-repeat;
border:2px solid rgba(255,48,65,.34);box-shadow:0 0 30px rgba(255,30,48,.08);
display:grid;place-items:center;font-size:42px
}
.account-rank-orbit{
position:absolute;inset:-7px;border-radius:28px;border:1px solid rgba(255,47,64,.10);
box-shadow:0 0 18px rgba(255,35,52,.05)
}
.account-side h2{font-size:20px;margin:0}.account-side>p{font-size:9px;color:#62676f;margin:4px 0 10px}
.account-rank-badge{
display:inline-flex;padding:5px 9px;border-radius:999px;border:1px solid rgba(255,50,68,.17);
background:#1b0c10;color:#ff6071;font-size:8px;font-weight:1000;letter-spacing:.07em
}
.account-side-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:22px 0}
.account-side-stats div{padding:11px;border:1px solid rgba(255,255,255,.055);border-radius:9px;background:#090b0e;text-align:left}
.account-side-stats span{display:block;color:#5d626a;font-size:7px;font-weight:900}.account-side-stats strong{display:block;margin-top:5px;font-size:14px}
.account-logout{
width:100%;height:37px;margin-top:auto;border:1px solid rgba(255,55,72,.13);
border-radius:8px;background:#170b0f;color:#ff6474;font-size:9px;font-weight:900;cursor:pointer
}
.account-main{min-width:0}
.account-tabs{
display:flex;gap:5px;margin-bottom:10px;padding:5px;border:1px solid rgba(255,255,255,.055);
border-radius:10px;background:#090b0e;overflow:auto
}
.account-tabs button{
flex:1;min-width:105px;height:35px;border:1px solid transparent;border-radius:7px;background:transparent;
color:#676c74;font-size:8px;font-weight:900;cursor:pointer
}
.account-tabs button.active{color:#fff;border-color:rgba(255,45,62,.15);background:linear-gradient(180deg,#211014,#150c0f)}
.account-tab{display:none}.account-tab.active{display:grid;gap:10px}
.account-card{
padding:18px;border:1px solid rgba(255,255,255,.055);border-radius:12px;
background:linear-gradient(180deg,#0e1014,#0a0c0f);box-shadow:0 18px 40px rgba(0,0,0,.12)
}
.account-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:15px}
.account-card-head span{font-size:7px;font-weight:900;letter-spacing:.15em;color:#85404b}
.account-card-head h3{font-size:15px;margin:4px 0 0}.account-card-head p{font-size:9px;color:#646970;margin:4px 0 0}
.account-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.account-field.full{grid-column:1/-1}.account-field label{display:block;margin-bottom:6px;color:#777c84;font-size:8px}
.account-field input,.account-field textarea{
width:100%;height:42px;padding:0 11px;border:1px solid rgba(255,255,255,.065);
border-radius:8px;background:#080a0c;color:#f0f0f2;outline:0
}
.account-field textarea{height:88px;padding:10px;resize:vertical}
.account-field input:focus,.account-field textarea:focus{border-color:rgba(255,45,62,.27);box-shadow:0 0 0 2px rgba(255,35,50,.035)}
.account-upload-row{display:flex;align-items:center;gap:10px;margin-top:10px}.account-upload input{display:none}
.account-upload span{
display:inline-flex;align-items:center;height:34px;padding:0 10px;border:1px solid rgba(255,255,255,.065);
border-radius:8px;background:#111317;color:#8b9098;font-size:8px;font-weight:900;cursor:pointer
}
.account-upload-row small{color:#50545b;font-size:7px}
.account-primary{
height:37px;margin-top:13px;padding:0 13px;border:1px solid #ef3a4f;border-radius:8px;
background:linear-gradient(180deg,#dc1c34,#850815);color:#fff;font-size:8px;font-weight:1000;cursor:pointer
}
.account-progress{height:7px;border-radius:99px;background:#17191d;overflow:hidden}.account-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#8e0815,#ff3349);box-shadow:0 0 12px rgba(255,45,62,.35)}
.account-progress-foot{display:flex;justify-content:space-between;margin-top:8px;color:#646970;font-size:8px}.rank-progress-card b{color:#ff5a6d;font-size:12px}
.account-avatar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.account-avatar-choice{
position:relative;padding:10px;border:1px solid rgba(255,255,255,.055);border-radius:10px;
background:#090b0e;text-align:center;cursor:pointer
}
.account-avatar-choice.selected{border-color:rgba(255,47,65,.35);box-shadow:0 0 20px rgba(255,35,50,.055)}
.account-avatar-choice.locked{opacity:.42;cursor:not-allowed}
.account-avatar-choice .face{
width:58px;height:58px;margin:0 auto 7px;border-radius:14px;display:grid;place-items:center;
border:1px solid rgba(255,255,255,.065)
}
.account-avatar-choice strong{font-size:9px}.account-avatar-choice small{display:block;margin-top:3px;color:#5e636b;font-size:7px}
.account-avatar-choice em{position:absolute;right:7px;top:7px;font-style:normal;font-size:7px;color:#ff6676}
.account-security-note{margin-top:13px;padding:9px;border:1px solid rgba(255,255,255,.045);border-radius:8px;background:#090b0e;color:#656a72;font-size:8px}
.account-rounds{display:grid}.account-round{
display:grid;grid-template-columns:1fr auto auto auto;gap:10px;align-items:center;
padding:10px 6px;border-bottom:1px solid rgba(255,255,255,.035);font-size:9px
}
.account-round:last-child{border-bottom:0}.account-round small{color:#60656d}.account-round .win{color:#5fe1a4}.account-round .loss{color:#ff6676}
@media(max-width:900px){
.account-shell{padding:72px 10px 90px}
.account-toolbar{grid-template-columns:auto 1fr}.account-toolbar-status{display:none}
.account-layout{grid-template-columns:1fr}
.account-side{min-height:auto}
.account-avatar-wrap{width:82px;height:82px}.account-avatar{width:82px;height:82px}
.account-side-stats{grid-template-columns:repeat(4,1fr)}
.account-avatar-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
.account-toolbar{height:58px;padding:0 9px}.account-toolbar>button{padding:0 8px}
.account-toolbar h2{font-size:14px}
.account-side-stats{grid-template-columns:1fr 1fr}
.account-form-grid{grid-template-columns:1fr}.account-field.full{grid-column:auto}
.account-avatar-grid{grid-template-columns:1fr 1fr}
.account-round{grid-template-columns:1fr auto}.account-round>*:nth-child(2),.account-round>*:nth-child(4){display:none}
.auth-v36-card{padding:22px}
}
/* ===== V38 FREE & RANK CASES ===== */
.case-section{margin-top:28px}
.case-grid{
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:10px;
}
.case-loading{
grid-column:1/-1;
padding:28px;
text-align:center;
color:#5e626a;
font-size:9px;
border:1px solid rgba(255,255,255,.05);
border-radius:11px;
background:#090b0e;
}
.case-card{
position:relative;
min-height:210px;
padding:14px;
overflow:hidden;
border:1px solid rgba(255,255,255,.06);
border-radius:12px;
background:
radial-gradient(circle at 50% 30%,rgba(255,38,55,.10),transparent 35%),
linear-gradient(180deg,#101217,#090b0e);
cursor:pointer;
transition:.2s ease;
}
.case-card:hover{
transform:translateY(-4px);
border-color:rgba(255,44,60,.18);
box-shadow:0 18px 38px rgba(0,0,0,.28),0 0 24px rgba(255,32,48,.04);
}
.case-card.locked{
opacity:.42;
filter:saturate(.4);
cursor:not-allowed;
}
.case-card.cooldown{
cursor:default;
}
.case-card::before{
content:"";
position:absolute;
left:16%;
right:16%;
top:0;
height:1px;
background:linear-gradient(90deg,transparent,rgba(255,60,75,.65),transparent);
}
.case-icon{
width:88px;
height:88px;
margin:12px auto 13px;
position:relative;
display:grid;
place-items:center;
}
.case-chest{
width:72px;
height:58px;
border-radius:12px 12px 15px 15px;
background:
linear-gradient(180deg,#50151e 0 30%,#230b0f 31% 100%);
border:2px solid #a82133;
box-shadow:
inset 0 0 0 2px rgba(255,255,255,.025),
0 0 25px rgba(255,41,58,.12);
position:relative;
}
.case-chest::before{
content:"";
position:absolute;
left:9px;right:9px;top:-11px;height:23px;
border-radius:12px 12px 5px 5px;
background:linear-gradient(180deg,#691925,#310d13);
border:2px solid #a82133;
}
.case-chest::after{
content:"◆";
position:absolute;
left:50%;top:50%;
transform:translate(-50%,-40%);
color:#ff4b5f;
font-size:18px;
text-shadow:0 0 12px #ff3045;
}
.case-card[data-case="gold"] .case-chest{
border-color:#cda935;
background:linear-gradient(180deg,#443812 0 30%,#1d1709 31% 100%);
box-shadow:0 0 26px rgba(255,210,48,.12);
}
.case-card[data-case="gold"] .case-chest::before{border-color:#cda935;background:linear-gradient(180deg,#594817,#29210b)}
.case-card[data-case="gold"] .case-chest::after{color:#ffd94d;text-shadow:0 0 12px #ffd329}
.case-card[data-case="elite"] .case-chest{
border-color:#ff3651;
box-shadow:0 0 30px rgba(255,35,65,.18),0 0 50px rgba(157,25,255,.08);
}
.case-card h4{
margin:0;
text-align:center;
font-size:12px;
}
.case-card p{
margin:5px 0 0;
text-align:center;
color:#666b73;
font-size:8px;
}
.case-state{
margin-top:12px;
min-height:30px;
display:flex;
align-items:center;
justify-content:center;
padding:0 8px;
border-radius:8px;
border:1px solid rgba(255,255,255,.05);
background:#0a0c0f;
color:#7a7f87;
font-size:8px;
font-weight:900;
}
.case-card.available .case-state{
color:#ff6475;
border-color:rgba(255,48,65,.16);
background:#160b0e;
}
.case-reward-mini{
display:flex;
justify-content:center;
gap:4px;
flex-wrap:wrap;
margin-top:8px;
}
.case-reward-mini span{
padding:3px 5px;
border-radius:5px;
background:#0b0d10;
border:1px solid rgba(255,255,255,.04);
color:#5f646c;
font-size:7px;
}
/* Case opening modal */
.case-open-card{
width:min(880px,95vw);
position:relative;
padding:23px;
border:1px solid rgba(255,42,58,.19);
border-radius:18px;
background:
radial-gradient(circle at 50% 0,rgba(220,20,38,.10),transparent 30%),
linear-gradient(180deg,#100d0f,#090a0c);
box-shadow:0 40px 120px rgba(0,0,0,.62),0 0 65px rgba(255,35,50,.05);
}
.case-modal-head{text-align:center}
.case-modal-kicker{
color:#91434e;
font-size:7px;
font-weight:900;
letter-spacing:.16em;
}
.case-modal-head h2{
margin:5px 0 3px;
font-size:24px;
}
.case-modal-head p{
margin:0;
color:#62676f;
font-size:8px;
}
.case-spinner-shell{
position:relative;
margin:24px 0 17px;
}
.case-pointer{
position:absolute;
left:50%;
top:-4px;
transform:translateX(-50%);
z-index:7;
width:0;height:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-top:15px solid #ff3449;
filter:drop-shadow(0 0 7px rgba(255,52,73,.55));
}
.case-reel-window{
overflow:hidden;
height:150px;
border:1px solid rgba(255,255,255,.06);
border-radius:13px;
background:#07090c;
position:relative;
}
.case-reel-window::before,
.case-reel-window::after{
content:"";
position:absolute;
top:0;bottom:0;
width:110px;
z-index:5;
pointer-events:none;
}
.case-reel-window::before{
left:0;
background:linear-gradient(90deg,#07090c,transparent);
}
.case-reel-window::after{
right:0;
background:linear-gradient(270deg,#07090c,transparent);
}
.case-reel{
position:absolute;
left:0;
top:0;
height:150px;
display:flex;
align-items:center;
gap:8px;
padding:0 10px;
will-change:transform;
}
.case-reel.spinning{
transition:transform 4.4s cubic-bezier(.08,.72,.08,1);
}
.case-reel-item{
width:126px;
min-width:126px;
height:110px;
border:1px solid rgba(255,255,255,.055);
border-radius:10px;
background:
radial-gradient(circle at 50% 30%,rgba(255,45,62,.08),transparent 38%),
#0d1014;
display:grid;
place-items:center;
align-content:center;
text-align:center;
box-shadow:inset 0 0 26px rgba(255,35,50,.02);
}
.case-reel-item b{
font-size:19px;
color:#f0f1f3;
}
.case-reel-item small{
margin-top:5px;
color:#62676f;
font-size:7px;
}
.case-reel-item.rare{
border-color:rgba(255,213,50,.19);
box-shadow:0 0 18px rgba(255,211,45,.045);
}
.case-reel-item.jackpot{
border-color:rgba(255,48,72,.25);
box-shadow:0 0 22px rgba(255,42,68,.075);
}
.case-result{
min-height:40px;
display:grid;
place-items:center;
margin:0 auto 12px;
color:#696e76;
font-size:10px;
font-weight:900;
letter-spacing:.04em;
}
.case-result.win{
color:#66edb2;
text-shadow:0 0 12px rgba(102,237,178,.22);
}
.case-result.zero{
color:#ff6878;
}
.case-open-btn{
display:block;
min-width:180px;
height:40px;
margin:0 auto;
border:1px solid #ef3a4f;
border-radius:8px;
background:linear-gradient(180deg,#dc1d34,#850815);
color:#fff;
font-size:8px;
font-weight:1000;
cursor:pointer;
}
.case-open-btn:disabled{
opacity:.45;
cursor:not-allowed;
}
@media(max-width:1100px){
.case-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
.case-grid{grid-template-columns:repeat(2,1fr)}
.case-open-card{padding:18px}
.case-reel-window{height:132px}
.case-reel{height:132px}
.case-reel-item{width:110px;min-width:110px;height:94px}
}
@media(max-width:480px){
.case-grid{grid-template-columns:1fr}
.case-card{min-height:185px}
}
/* ===== V39 CASES REDESIGN ===== */
.case-section{
position:relative;
padding:18px;
border:1px solid rgba(255,255,255,.055);
border-radius:16px;
background:
radial-gradient(circle at 50% 0,rgba(225,20,38,.07),transparent 28%),
linear-gradient(180deg,#0d0f13,#090b0e);
box-shadow:0 22px 54px rgba(0,0,0,.20);
}
.case-section::before{
content:"";
position:absolute;
left:14%;
right:14%;
top:0;
height:1px;
background:linear-gradient(90deg,transparent,#ff3348,transparent);
box-shadow:0 0 14px rgba(255,51,72,.45);
}
.case-grid{
grid-template-columns:repeat(5,minmax(0,1fr))!important;
gap:12px!important;
}
.case-card{
min-height:248px!important;
padding:14px!important;
border-radius:14px!important;
background:
radial-gradient(circle at 50% 23%,rgba(255,39,55,.13),transparent 28%),
linear-gradient(180deg,#111419,#0a0c10)!important;
border:1px solid rgba(255,255,255,.065)!important;
overflow:hidden!important;
}
.case-card:hover{
transform:translateY(-5px) scale(1.012)!important;
border-color:rgba(255,50,66,.24)!important;
box-shadow:0 24px 48px rgba(0,0,0,.30),0 0 30px rgba(255,32,48,.055)!important;
}
.case-card::after{
content:"";
position:absolute;
inset:auto -30% -35% -30%;
height:55%;
background:radial-gradient(ellipse at center,rgba(255,35,50,.055),transparent 65%);
pointer-events:none;
}
.case-icon{
width:104px!important;
height:104px!important;
margin:8px auto 14px!important;
perspective:500px;
}
.case-chest{
width:82px!important;
height:64px!important;
border-radius:13px 13px 17px 17px!important;
transform:rotateX(4deg);
background:
linear-gradient(180deg,#60131f 0 31%,#2b0b11 32% 100%)!important;
border:2px solid #b72b3d!important;
box-shadow:
inset 0 0 0 2px rgba(255,255,255,.025),
inset 0 -14px 22px rgba(0,0,0,.28),
0 14px 26px rgba(0,0,0,.26),
0 0 28px rgba(255,41,58,.14)!important;
}
.case-chest::before{
left:8px!important;
right:8px!important;
top:-13px!important;
height:27px!important;
background:linear-gradient(180deg,#7c1a28,#3d0e16)!important;
box-shadow:inset 0 -8px 10px rgba(0,0,0,.18);
}
.case-chest::after{
content:"◆"!important;
width:27px;height:27px;
display:grid;place-items:center;
border-radius:7px;
background:#16090c;
border:1px solid rgba(255,82,96,.26);
color:#ff5468!important;
font-size:14px!important;
box-shadow:0 0 13px rgba(255,45,64,.30);
}
.case-card[data-case="silver"] .case-chest{
border-color:#aab7c8!important;
background:linear-gradient(180deg,#46505d 0 31%,#1c2229 32% 100%)!important;
box-shadow:0 0 28px rgba(180,205,235,.12)!important;
}
.case-card[data-case="silver"] .case-chest::before{
border-color:#aab7c8!important;
background:linear-gradient(180deg,#5e6978,#2b323b)!important;
}
.case-card[data-case="silver"] .case-chest::after{
color:#e5eef9!important;
border-color:rgba(215,230,248,.25)!important;
}
.case-card[data-case="gold"] .case-chest{
border-color:#d7b43d!important;
background:linear-gradient(180deg,#5a4815 0 31%,#2b220a 32% 100%)!important;
box-shadow:0 0 30px rgba(255,213,64,.14)!important;
}
.case-card[data-case="gold"] .case-chest::before{
border-color:#d7b43d!important;
background:linear-gradient(180deg,#735b1c,#362a0d)!important;
}
.case-card[data-case="gold"] .case-chest::after{
color:#ffe06b!important;
border-color:rgba(255,222,91,.28)!important;
box-shadow:0 0 14px rgba(255,219,70,.30)!important;
}
.case-card[data-case="elite"] .case-chest{
border-color:#ff3b57!important;
background:
linear-gradient(180deg,#4a0d1a 0 31%,#170910 32% 100%)!important;
box-shadow:
0 0 26px rgba(255,35,65,.20),
0 0 44px rgba(169,56,255,.08)!important;
}
.case-card[data-case="elite"] .case-chest::before{
border-color:#ff3b57!important;
background:linear-gradient(180deg,#661126,#290b15)!important;
}
.case-card[data-case="elite"] .case-chest::after{
color:#ff7890!important;
box-shadow:0 0 16px rgba(255,44,75,.42)!important;
}
.case-card h4{
font-size:13px!important;
letter-spacing:.02em;
}
.case-card p{
font-size:7px!important;
font-weight:900;
letter-spacing:.10em;
text-transform:uppercase;
}
.case-reward-mini{
min-height:42px;
align-content:flex-start;
}
.case-reward-mini span{
border-radius:6px!important;
padding:4px 6px!important;
background:#0a0c10!important;
color:#747981!important;
}
.case-state{
height:33px;
margin-top:11px!important;
font-size:7px!important;
letter-spacing:.07em;
}
.case-card.available .case-state{
color:#fff!important;
background:linear-gradient(180deg,#3a0d15,#1e0b10)!important;
border-color:rgba(255,57,74,.25)!important;
box-shadow:0 0 14px rgba(255,35,52,.05)!important;
}
/* Modal */
.case-open-card{
width:min(980px,96vw)!important;
padding:26px!important;
border-radius:20px!important;
background:
radial-gradient(circle at 50% -5%,rgba(225,22,40,.12),transparent 28%),
linear-gradient(180deg,#111013,#090a0c)!important;
}
.case-open-card::before{
content:"";
position:absolute;
left:20%;
right:20%;
top:0;
height:1px;
background:linear-gradient(90deg,transparent,#ff3b50,transparent);
box-shadow:0 0 18px rgba(255,45,64,.55);
}
.case-spinner-shell{
margin:27px 0 18px!important;
}
.case-reel-window{
height:176px!important;
border-radius:15px!important;
background:
linear-gradient(180deg,#080a0d,#050608)!important;
border-color:rgba(255,255,255,.07)!important;
box-shadow:inset 0 0 44px rgba(255,30,45,.025);
}
.case-reel{
height:176px!important;
gap:10px!important;
padding:0 14px!important;
}
.case-reel-item{
width:142px!important;
min-width:142px!important;
height:124px!important;
border-radius:12px!important;
background:
radial-gradient(circle at 50% 20%,rgba(255,39,55,.07),transparent 34%),
linear-gradient(180deg,#111419,#0c0f13)!important;
}
.case-reel-item b{
font-size:21px!important;
}
.case-reel-item small{
font-size:7px!important;
font-weight:900;
letter-spacing:.08em;
}
.case-reel-item.rare{
border-color:rgba(255,211,55,.22)!important;
box-shadow:0 0 20px rgba(255,211,55,.05)!important;
}
.case-reel-item.jackpot{
border-color:rgba(255,56,81,.32)!important;
box-shadow:0 0 26px rgba(255,38,67,.09)!important;
}
.case-pointer{
top:-7px!important;
border-left-width:12px!important;
border-right-width:12px!important;
border-top-width:18px!important;
}
.case-result{
min-height:46px!important;
font-size:12px!important;
}
.case-result.win strong{
color:#8cffc5;
font-size:18px;
}
.case-open-btn{
min-width:210px!important;
height:43px!important;
border-radius:9px!important;
box-shadow:0 0 20px rgba(255,38,55,.06);
}
@media(max-width:1100px){
.case-grid{grid-template-columns:repeat(3,1fr)!important}
}
@media(max-width:760px){
.case-grid{grid-template-columns:repeat(2,1fr)!important}
.case-section{padding:12px!important}
.case-reel-item{width:122px!important;min-width:122px!important;height:106px!important}
.case-reel-window,.case-reel{height:150px!important}
}
@media(max-width:500px){
.case-grid{grid-template-columns:1fr!important}
.case-card{min-height:218px!important}
}
/* ===== V41 RANK-COLORED CASES + HOLOGRAMS ===== */
.case-card{
--case-accent:#ff4054;
--case-accent-soft:rgba(255,64,84,.20);
--case-accent-deep:#5f0a15;
}
.case-card[data-case="daily"]{
--case-accent:#f4f6fa;
--case-accent-soft:rgba(220,228,240,.18);
--case-accent-deep:#222933;
}
.case-card[data-case="wood"]{
--case-accent:#c88a4a;
--case-accent-soft:rgba(200,138,74,.22);
--case-accent-deep:#4a2c15;
}
.case-card[data-case="silver"]{
--case-accent:#d9e5f3;
--case-accent-soft:rgba(196,217,240,.22);
--case-accent-deep:#3b4655;
}
.case-card[data-case="gold"]{
--case-accent:#ffd54a;
--case-accent-soft:rgba(255,213,74,.22);
--case-accent-deep:#59420b;
}
.case-card[data-case="elite"]{
--case-accent:#ff4266;
--case-accent-soft:rgba(255,66,102,.24);
--case-accent-deep:#561020;
}
.case-card{
border-color:color-mix(in srgb,var(--case-accent) 18%,transparent)!important;
background:
radial-gradient(circle at 50% 18%,var(--case-accent-soft),transparent 30%),
linear-gradient(180deg,#111419,#090b0e)!important;
}
.case-card::before{
background:linear-gradient(90deg,transparent,var(--case-accent),transparent)!important;
box-shadow:0 0 16px var(--case-accent-soft)!important;
}
.case-card:hover{
border-color:color-mix(in srgb,var(--case-accent) 42%,transparent)!important;
box-shadow:0 24px 50px rgba(0,0,0,.32),0 0 34px var(--case-accent-soft)!important;
}
.case-card h4{
color:#f5f6f8;
text-shadow:0 0 11px var(--case-accent-soft);
}
.case-card.available .case-state{
color:var(--case-accent)!important;
border-color:color-mix(in srgb,var(--case-accent) 30%,transparent)!important;
background:linear-gradient(180deg,var(--case-accent-deep),#100b0d)!important;
box-shadow:0 0 16px var(--case-accent-soft)!important;
}
.case-rank-holo{
position:absolute;
top:10px;
right:10px;
width:31px;
height:31px;
display:grid;
place-items:center;
border-radius:10px;
background:rgba(8,10,13,.72);
border:1px solid color-mix(in srgb,var(--case-accent) 25%,transparent);
box-shadow:0 0 16px var(--case-accent-soft);
z-index:4;
}
.case-rank-holo img{
width:22px;
height:22px;
object-fit:contain;
filter:drop-shadow(0 0 5px var(--case-accent));
}
.case-rank-holo::after{
content:"";
position:absolute;
inset:-3px;
border-radius:12px;
border:1px solid color-mix(in srgb,var(--case-accent) 14%,transparent);
animation:v41HoloPulse 1.8s ease-in-out infinite;
}
@keyframes v41HoloPulse{
50%{transform:scale(1.10);opacity:.25}
}
.case-chest{
border-color:var(--case-accent)!important;
box-shadow:
inset 0 0 0 2px rgba(255,255,255,.025),
inset 0 -14px 22px rgba(0,0,0,.30),
0 14px 26px rgba(0,0,0,.28),
0 0 30px var(--case-accent-soft)!important;
}
.case-chest::before{border-color:var(--case-accent)!important}
.case-chest::after{
color:var(--case-accent)!important;
border-color:color-mix(in srgb,var(--case-accent) 35%,transparent)!important;
box-shadow:0 0 15px var(--case-accent-soft)!important;
}
.case-card[data-case="daily"] .case-chest{
background:linear-gradient(180deg,#313844 0 31%,#15191e 32% 100%)!important;
}
.case-card[data-case="wood"] .case-chest{
background:linear-gradient(180deg,#5b351c 0 31%,#28170d 32% 100%)!important;
}
.case-card[data-case="silver"] .case-chest{
background:linear-gradient(180deg,#56616e 0 31%,#242a31 32% 100%)!important;
}
.case-card[data-case="gold"] .case-chest{
background:linear-gradient(180deg,#66521a 0 31%,#2e250c 32% 100%)!important;
}
.case-card[data-case="elite"] .case-chest{
background:linear-gradient(180deg,#641226 0 31%,#230a12 32% 100%)!important;
}
.case-card[data-case="daily"] .case-chest::before{background:linear-gradient(180deg,#464f5d,#20252c)!important}
.case-card[data-case="wood"] .case-chest::before{background:linear-gradient(180deg,#754523,#35200f)!important}
.case-card[data-case="silver"] .case-chest::before{background:linear-gradient(180deg,#738091,#333a44)!important}
.case-card[data-case="gold"] .case-chest::before{background:linear-gradient(180deg,#806720,#3b300e)!important}
.case-card[data-case="elite"] .case-chest::before{background:linear-gradient(180deg,#7d1830,#310d19)!important}
/* Reel inherits chosen case color */
.case-open-card{
--modal-case-accent:#ff3b50;
--modal-case-soft:rgba(255,59,80,.18);
}
.case-open-card.case-daily{--modal-case-accent:#e8eef8;--modal-case-soft:rgba(220,230,245,.16)}
.case-open-card.case-wood{--modal-case-accent:#c88a4a;--modal-case-soft:rgba(200,138,74,.18)}
.case-open-card.case-silver{--modal-case-accent:#d9e5f3;--modal-case-soft:rgba(196,217,240,.18)}
.case-open-card.case-gold{--modal-case-accent:#ffd54a;--modal-case-soft:rgba(255,213,74,.18)}
.case-open-card.case-elite{--modal-case-accent:#ff4266;--modal-case-soft:rgba(255,66,102,.20)}
.case-open-card::before{
background:linear-gradient(90deg,transparent,var(--modal-case-accent),transparent)!important;
box-shadow:0 0 20px var(--modal-case-soft)!important;
}
.case-pointer{
border-top-color:var(--modal-case-accent)!important;
filter:drop-shadow(0 0 8px var(--modal-case-accent))!important;
}
.case-reel-item{
border-color:color-mix(in srgb,var(--modal-case-accent) 12%,transparent)!important;
}
.case-reel-item b{
text-shadow:0 0 11px var(--modal-case-soft);
}
.case-modal-holo{
width:42px;height:42px;margin:0 auto 8px;
display:grid;place-items:center;
border-radius:12px;
border:1px solid color-mix(in srgb,var(--modal-case-accent) 24%,transparent);
background:#090b0e;
box-shadow:0 0 20px var(--modal-case-soft);
}
.case-modal-holo img{
width:30px;height:30px;
filter:drop-shadow(0 0 7px var(--modal-case-accent));
}
/* ===== V42 HOLOGRAM-BUILT CASES ===== */
.case-card .case-icon{
width:128px!important;
height:128px!important;
margin:4px auto 10px!important;
position:relative!important;
display:grid!important;
place-items:center!important;
}
.case-card .case-chest{
display:none!important;
}
.case-holo-case{
position:relative;
width:112px;
height:112px;
display:grid;
place-items:center;
transform-style:preserve-3d;
animation:v42CaseFloat 2.8s ease-in-out infinite;
}
.case-holo-case::before{
content:"";
position:absolute;
inset:9px;
clip-path:polygon(50% 0,88% 18%,100% 54%,76% 92%,50% 100%,20% 90%,0 54%,14% 18%);
background:
radial-gradient(circle at 50% 28%,color-mix(in srgb,var(--case-accent) 24%,transparent),transparent 35%),
linear-gradient(145deg,
color-mix(in srgb,var(--case-accent) 18%,#111 82%),
color-mix(in srgb,var(--case-accent) 8%,#08090b 92%));
border:1px solid color-mix(in srgb,var(--case-accent) 45%,transparent);
box-shadow:
inset 0 0 20px rgba(255,255,255,.025),
0 0 18px var(--case-accent-soft),
0 0 42px color-mix(in srgb,var(--case-accent) 10%,transparent);
}
.case-holo-case::after{
content:"";
position:absolute;
left:12px;right:12px;bottom:3px;height:18px;
border-radius:50%;
background:radial-gradient(ellipse at center,var(--case-accent-soft),transparent 70%);
filter:blur(7px);
transform:translateY(6px);
}
.case-holo-case img{
position:relative;
z-index:3;
width:86px;
height:86px;
object-fit:contain;
filter:
drop-shadow(0 0 5px var(--case-accent))
drop-shadow(0 0 12px var(--case-accent))
drop-shadow(0 0 22px var(--case-accent-soft));
transform:translateZ(22px);
}
.case-holo-case .case-holo-core{
position:absolute;
z-index:2;
width:66px;height:66px;
border-radius:50%;
background:radial-gradient(circle,
color-mix(in srgb,var(--case-accent) 20%,#fff 80%) 0 2%,
color-mix(in srgb,var(--case-accent) 32%,transparent) 3% 18%,
transparent 54%);
filter:blur(2px);
animation:v42CorePulse 1.8s ease-in-out infinite;
}
.case-holo-case .case-holo-ring,
.case-holo-case .case-holo-ring2{
position:absolute;
border-radius:50%;
border:1px solid color-mix(in srgb,var(--case-accent) 28%,transparent);
box-shadow:0 0 12px var(--case-accent-soft);
}
.case-holo-case .case-holo-ring{
width:98px;height:98px;
animation:v42RingSpin 7s linear infinite;
}
.case-holo-case .case-holo-ring2{
width:78px;height:78px;
border-style:dashed;
opacity:.55;
animation:v42RingSpinReverse 5s linear infinite;
}
.case-holo-case .case-holo-ring::before,
.case-holo-case .case-holo-ring::after{
content:"";
position:absolute;
width:5px;height:5px;
border-radius:50%;
background:var(--case-accent);
box-shadow:0 0 8px var(--case-accent);
}
.case-holo-case .case-holo-ring::before{left:4px;top:47%}
.case-holo-case .case-holo-ring::after{right:4px;top:47%}
.case-card:hover .case-holo-case{
transform:translateY(-5px) scale(1.06) rotateX(4deg);
}
.case-card:hover .case-holo-case img{
filter:
drop-shadow(0 0 8px var(--case-accent))
drop-shadow(0 0 16px var(--case-accent))
drop-shadow(0 0 30px var(--case-accent-soft));
}
/* Daily / Wood / Silver / Gold / Elite each visually made from its rank hologram */
.case-card[data-case="daily"] .case-holo-case::before{
clip-path:polygon(50% 0,90% 20%,100% 58%,72% 95%,50% 100%,18% 90%,0 58%,12% 18%);
}
.case-card[data-case="wood"] .case-holo-case::before{
clip-path:polygon(50% 0,90% 24%,84% 74%,50% 100%,16% 74%,10% 24%);
}
.case-card[data-case="silver"] .case-holo-case::before{
clip-path:polygon(50% 0,88% 18%,100% 54%,76% 92%,50% 100%,20% 90%,0 54%,14% 18%);
}
.case-card[data-case="gold"] .case-holo-case::before{
clip-path:polygon(50% 0,86% 16%,100% 48%,82% 85%,50% 100%,18% 85%,0 48%,14% 16%);
background:
radial-gradient(circle at 50% 28%,rgba(255,235,122,.22),transparent 30%),
linear-gradient(145deg,#4c3b0e,#141007);
border-color:rgba(255,213,74,.48);
box-shadow:
inset 0 0 22px rgba(255,230,120,.035),
0 0 18px rgba(255,213,74,.18),
0 0 44px rgba(255,213,74,.09);
}
.case-card[data-case="elite"] .case-holo-case::before{
clip-path:polygon(50% 0,82% 15%,100% 50%,80% 90%,50% 100%,20% 90%,0 50%,18% 15%);
background:
radial-gradient(circle at 50% 24%,rgba(255,95,128,.18),transparent 30%),
linear-gradient(145deg,#440c19,#0c080b);
border-color:rgba(255,66,102,.50);
box-shadow:
inset 0 0 22px rgba(255,90,120,.035),
0 0 20px rgba(255,66,102,.22),
0 0 48px rgba(170,50,255,.08);
}
.case-holo-label{
position:absolute;
bottom:-4px;
left:50%;
transform:translateX(-50%);
z-index:5;
min-width:78px;
padding:3px 7px;
border-radius:999px;
background:rgba(8,9,11,.82);
border:1px solid color-mix(in srgb,var(--case-accent) 26%,transparent);
color:var(--case-accent);
font-size:6px;
font-weight:1000;
letter-spacing:.12em;
text-align:center;
white-space:nowrap;
box-shadow:0 0 10px var(--case-accent-soft);
}
@keyframes v42CaseFloat{
0%,100%{transform:translateY(0) rotateX(0deg)}
50%{transform:translateY(-5px) rotateX(3deg)}
}
@keyframes v42CorePulse{
0%,100%{transform:scale(.92);opacity:.45}
50%{transform:scale(1.08);opacity:.9}
}
@keyframes v42RingSpin{
to{transform:rotate(360deg)}
}
@keyframes v42RingSpinReverse{
to{transform:rotate(-360deg)}
}
/* Opening modal: giant hologram case on top */
.case-modal-holo{
width:76px!important;
height:76px!important;
border-radius:18px!important;
position:relative!important;
overflow:visible!important;
}
.case-modal-holo img{
width:58px!important;
height:58px!important;
filter:
drop-shadow(0 0 8px var(--modal-case-accent))
drop-shadow(0 0 18px var(--modal-case-accent))!important;
animation:v42ModalHoloFloat 2.4s ease-in-out infinite;
}
.case-modal-holo::before{
content:"";
position:absolute;
inset:-10px;
border-radius:24px;
border:1px solid color-mix(in srgb,var(--modal-case-accent) 22%,transparent);
box-shadow:0 0 22px var(--modal-case-soft);
animation:v42ModalPulse 1.8s ease-in-out infinite;
}
@keyframes v42ModalHoloFloat{
50%{transform:translateY(-3px) scale(1.05)}
}
@keyframes v42ModalPulse{
50%{transform:scale(1.08);opacity:.3}
}
/* ===== V43 ROULETTE UX OVERHAUL ===== */
.v43-roulette-wrap{
width:min(760px,94%);
display:grid;
grid-template-columns:minmax(260px,1fr) minmax(220px,.78fr);
gap:18px;
align-items:center;
}
.v43-wheel-zone{
position:relative;
display:grid;
place-items:center;
min-height:310px;
}
.v43-roulette{
width:278px;
height:278px;
border-radius:50%;
position:relative;
background:
repeating-conic-gradient(
#9f1420 0 9.73deg,
#12161d 9.73deg 19.46deg
);
border:14px solid #2c1a11;
box-shadow:
inset 0 0 0 5px #a6712d,
inset 0 0 0 13px #12161c,
0 24px 50px rgba(0,0,0,.32),
0 0 38px rgba(255,42,57,.10);
transition:filter .2s ease;
}
.v43-roulette::before{
content:"";
position:absolute;
inset:21px;
border-radius:50%;
border:1px solid rgba(255,255,255,.06);
box-shadow:inset 0 0 28px rgba(0,0,0,.35);
}
.v43-roulette::after{
content:"";
position:absolute;
inset:36%;
border-radius:50%;
background:radial-gradient(circle,#c09145 0 16%,#6e4a20 17% 48%,#171b20 49%);
border:3px solid #b98a3c;
box-shadow:0 0 18px rgba(210,160,70,.13);
}
.v43-roulette.spinning{
animation:v43RouletteSpin 2.25s cubic-bezier(.10,.74,.14,1);
}
@keyframes v43RouletteSpin{
to{transform:rotate(1620deg)}
}
.v43-ball{
position:absolute;
width:13px;
height:13px;
border-radius:50%;
background:#f7f7f7;
left:50%;
top:9px;
transform:translateX(-50%);
box-shadow:0 0 10px rgba(255,255,255,.75);
z-index:5;
}
.v43-wheel-pointer{
position:absolute;
top:3px;
left:50%;
width:0;height:0;
transform:translateX(-50%);
border-left:11px solid transparent;
border-right:11px solid transparent;
border-top:18px solid #ff4154;
filter:drop-shadow(0 0 7px rgba(255,65,84,.6));
z-index:7;
}
.v43-roulette-number{
position:absolute;
inset:0;
display:grid;
place-items:center;
z-index:6;
pointer-events:none;
}
.v43-roulette-number span{
min-width:78px;
height:78px;
display:grid;
place-items:center;
border-radius:50%;
background:rgba(7,9,12,.93);
border:1px solid rgba(255,255,255,.07);
color:#f4f4f5;
font-size:29px;
font-weight:1000;
box-shadow:0 0 24px rgba(0,0,0,.38);
}
.v43-roulette-number span.red{
color:#ff5266;
border-color:rgba(255,70,90,.24);
box-shadow:0 0 22px rgba(255,60,80,.11);
}
.v43-roulette-number span.black{
color:#e6e8eb;
}
.v43-roulette-number span.green{
color:#55e89a;
border-color:rgba(85,232,154,.24);
box-shadow:0 0 22px rgba(85,232,154,.10);
}
.v43-roulette-info{
display:grid;
gap:10px;
}
.v43-bet-summary,
.v43-result-card,
.v43-roulette-guide{
border:1px solid rgba(255,255,255,.055);
border-radius:12px;
background:linear-gradient(180deg,#0f1216,#0a0c0f);
padding:13px;
}
.v43-bet-summary span,
.v43-result-card span,
.v43-roulette-guide>span{
display:block;
color:#61666e;
font-size:7px;
font-weight:900;
letter-spacing:.12em;
}
.v43-bet-summary strong{
display:block;
margin-top:5px;
font-size:16px;
}
.v43-result-card{
min-height:112px;
}
.v43-result-card strong{
display:block;
margin-top:7px;
font-size:18px;
}
.v43-result-card p{
margin:5px 0 0;
color:#6d727a;
font-size:9px;
line-height:1.5;
}
.v43-result-card.win{
border-color:rgba(77,225,158,.22);
background:linear-gradient(180deg,#0e1915,#0a0f0d);
box-shadow:0 0 22px rgba(77,225,158,.06);
}
.v43-result-card.win strong{color:#61eaae}
.v43-result-card.loss{
border-color:rgba(255,63,82,.20);
background:linear-gradient(180deg,#1a0d11,#100a0d);
box-shadow:0 0 22px rgba(255,63,82,.05);
}
.v43-result-card.loss strong{color:#ff6879}
.v43-color-dot{
display:inline-block;
width:8px;height:8px;border-radius:50%;
margin-right:6px;vertical-align:middle;
}
.v43-color-dot.red{background:#e6293f;box-shadow:0 0 7px rgba(230,41,63,.65)}
.v43-color-dot.black{background:#2b3138;border:1px solid #6d747c}
.v43-color-dot.green{background:#37cb7f;box-shadow:0 0 7px rgba(55,203,127,.55)}
.v43-roulette-guide{
display:grid;
gap:8px;
}
.v43-guide-row{
display:grid;
grid-template-columns:1fr auto;
gap:9px;
align-items:center;
color:#80858d;
font-size:9px;
}
.v43-guide-row b{
color:#cfd2d7;
font-size:9px;
}
.v43-choice-bar{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:7px;
margin-top:4px;
}
.v43-choice{
height:36px;
border-radius:8px;
border:1px solid rgba(255,255,255,.06);
background:#0c0e12;
color:#81868e;
font-size:8px;
font-weight:900;
cursor:pointer;
}
.v43-choice.active[data-rchoice="red"]{
color:#fff;background:linear-gradient(180deg,#8e1421,#4c0d14);border-color:#c62739;
}
.v43-choice.active[data-rchoice="black"]{
color:#fff;background:linear-gradient(180deg,#272d34,#14181d);border-color:#59616a;
}
.v43-choice.active[data-rchoice="green"]{
color:#fff;background:linear-gradient(180deg,#197e4e,#0d4028);border-color:#2fb36f;
}
.v43-help{
color:#60656d;
font-size:8px;
line-height:1.5;
margin-top:2px;
}
@media(max-width:760px){
.v43-roulette-wrap{
grid-template-columns:1fr;
}
.v43-wheel-zone{
min-height:285px;
}
.v43-roulette{
width:245px;height:245px;
}
}
/* ===== V44 ROULETTE WHEEL FOCUS ===== */
.v44-roulette-layout{
width:min(760px,96%);
display:grid;
place-items:center;
gap:16px;
}
.v44-choice-row{
display:flex;
gap:8px;
justify-content:center;
flex-wrap:wrap;
}
.v44-choice{
min-width:96px;
height:38px;
border-radius:9px;
border:1px solid rgba(255,255,255,.07);
background:#0d0f13;
color:#858a92;
font-size:8px;
font-weight:1000;
cursor:pointer;
transition:.15s ease;
}
.v44-choice[data-rchoice="red"].active{
color:#fff;
border-color:#d33649;
background:linear-gradient(180deg,#991827,#51101a);
box-shadow:0 0 18px rgba(220,38,60,.14);
}
.v44-choice[data-rchoice="black"].active{
color:#fff;
border-color:#5e6670;
background:linear-gradient(180deg,#2c3138,#16191d);
box-shadow:0 0 18px rgba(120,130,145,.08);
}
.v44-choice[data-rchoice="green"].active{
color:#fff;
border-color:#2fb36f;
background:linear-gradient(180deg,#1f8756,#0f452c);
box-shadow:0 0 18px rgba(47,179,111,.12);
}
.v44-wheel-shell{
position:relative;
width:360px;
height:360px;
display:grid;
place-items:center;
}
.v44-wheel{
position:relative;
width:330px;
height:330px;
border-radius:50%;
background:#0b0d10;
border:14px solid #2a1b12;
box-shadow:
inset 0 0 0 5px #a87730,
inset 0 0 0 15px #12161c,
0 28px 58px rgba(0,0,0,.34),
0 0 42px rgba(255,43,58,.08);
transition:transform 2.2s cubic-bezier(.11,.72,.14,1);
}
.v44-wheel.spin{
transform:rotate(1440deg);
}
.v44-wheel-numbers{
position:absolute;
inset:0;
border-radius:50%;
}
.v44-number{
position:absolute;
left:50%;
top:50%;
width:31px;
height:31px;
margin:-15.5px;
display:grid;
place-items:center;
border-radius:6px;
color:#f2f3f5;
font-size:8px;
font-weight:1000;
transform:
rotate(calc(var(--i) * 9.7297297297deg))
translateY(-138px)
rotate(calc(var(--i) * -9.7297297297deg));
border:1px solid rgba(255,255,255,.06);
box-shadow:0 0 8px rgba(0,0,0,.28);
}
.v44-number.red{background:#a61625}
.v44-number.black{background:#171c22}
.v44-number.green{
background:#188251;
color:#fff;
box-shadow:0 0 10px rgba(40,205,124,.26);
}
.v44-wheel-core{
position:absolute;
inset:29%;
border-radius:50%;
background:
radial-gradient(circle at 50% 42%,#c29346 0 12%,#755127 13% 37%,#1b1f24 38% 100%);
border:4px solid #b88b43;
box-shadow:0 0 22px rgba(190,145,65,.12);
z-index:3;
}
.v44-ball-track{
position:absolute;
inset:20px;
border-radius:50%;
border:1px solid rgba(255,255,255,.07);
pointer-events:none;
}
.v44-ball{
position:absolute;
left:50%;
top:22px;
width:13px;
height:13px;
margin-left:-6.5px;
border-radius:50%;
background:#f9f9f9;
box-shadow:0 0 11px rgba(255,255,255,.85);
z-index:5;
transform-origin:6.5px 143px;
transition:transform 2.2s cubic-bezier(.12,.74,.12,1);
}
.v44-ball.spin{
transform:rotate(-1350deg);
}
.v44-pointer{
position:absolute;
top:2px;
left:50%;
transform:translateX(-50%);
width:0;height:0;
border-left:12px solid transparent;
border-right:12px solid transparent;
border-top:19px solid #ff4054;
filter:drop-shadow(0 0 8px rgba(255,64,84,.72));
z-index:8;
}
.v44-result-badge{
min-width:220px;
height:48px;
display:grid;
place-items:center;
border-radius:11px;
border:1px solid rgba(255,255,255,.06);
background:#0c0f12;
color:#7d828a;
font-size:10px;
font-weight:1000;
letter-spacing:.05em;
transition:.18s ease;
}
.v44-result-badge.win{
color:#6af0b2;
border-color:rgba(87,229,164,.24);
background:#0c1713;
box-shadow:0 0 22px rgba(87,229,164,.07);
}
.v44-result-badge.loss{
color:#ff6b7c;
border-color:rgba(255,72,92,.20);
background:#170c10;
box-shadow:0 0 22px rgba(255,72,92,.06);
}
.v44-result-badge .dot{
display:inline-block;
width:8px;height:8px;border-radius:50%;
margin-right:7px;
vertical-align:middle;
}
.v44-result-badge .dot.red{background:#d6283d;box-shadow:0 0 8px rgba(214,40,61,.6)}
.v44-result-badge .dot.black{background:#2f353d;border:1px solid #68717b}
.v44-result-badge .dot.green{background:#39ce82;box-shadow:0 0 8px rgba(57,206,130,.55)}
@media(max-width:620px){
.v44-wheel-shell{width:300px;height:300px}
.v44-wheel{width:275px;height:275px}
.v44-number{
width:27px;height:27px;margin:-13.5px;
transform:
rotate(calc(var(--i) * 9.7297297297deg))
translateY(-115px)
rotate(calc(var(--i) * -9.7297297297deg));
font-size:7px;
}
.v44-ball{transform-origin:6.5px 118px}
.v44-choice{min-width:82px}
}
/* ===== V45 PROFESSIONAL ROULETTE ===== */
.v45-roulette-layout{width:min(820px,96%);display:grid;place-items:center;gap:15px}
.v45-wheel-shell{position:relative;width:390px;height:390px;display:grid;place-items:center;perspective:900px}
.v45-wheel{position:relative;width:356px;height:356px;border-radius:50%;transform:rotateX(8deg);background:#0a0c0f;border:15px solid #2a1b11;box-shadow:inset 0 0 0 4px #b17a32,inset 0 0 0 15px #15191e,inset 0 0 30px rgba(0,0,0,.55),0 30px 60px rgba(0,0,0,.42),0 0 42px rgba(255,43,58,.08)}
.v45-pocket-ring{position:absolute;inset:0;border-radius:50%}
.v45-pocket{--ang:calc(var(--i) * 9.7297297297deg);position:absolute;left:50%;top:50%;width:33px;height:49px;margin-left:-16.5px;margin-top:-24.5px;transform:rotate(var(--ang)) translateY(-142px);transform-origin:16.5px 24.5px;clip-path:polygon(50% 0,100% 18%,92% 100%,8% 100%,0 18%);display:grid;place-items:center;color:#fff;font-size:8px;font-weight:1000;border:1px solid rgba(255,255,255,.09);box-shadow:inset 0 -12px 16px rgba(0,0,0,.18)}
.v45-pocket span{transform:rotate(calc(var(--ang) * -1));text-shadow:0 1px 2px rgba(0,0,0,.7)}
.v45-pocket.red{background:linear-gradient(#c32235,#82111e)}
.v45-pocket.black{background:linear-gradient(#252b32,#11151a)}
.v45-pocket.green{background:linear-gradient(#27a967,#11643c);box-shadow:0 0 11px rgba(45,210,126,.22),inset 0 -12px 16px rgba(0,0,0,.16)}
.v45-pocket.winner{outline:2px solid #fff;filter:brightness(1.35);z-index:6;box-shadow:0 0 10px rgba(255,255,255,.75),0 0 22px currentColor}
.v45-inner-bowl{position:absolute;inset:62px;border-radius:50%;background:radial-gradient(circle at 50% 42%,#bd8d45 0 10%,#7b5527 11% 27%,#24292f 28% 55%,#0d1014 56%);border:4px solid #b5883e;box-shadow:inset 0 0 22px rgba(0,0,0,.50),0 0 18px rgba(198,151,68,.12);z-index:2}
.v45-inner-bowl::after{content:"";position:absolute;inset:34%;border-radius:50%;background:radial-gradient(circle,#d0a458,#6f4a20 55%,#1d2227 58%);border:2px solid #c3974c}
.v45-ball-track{position:absolute;inset:22px;border-radius:50%;border:2px solid rgba(230,230,230,.10);box-shadow:inset 0 0 8px rgba(255,255,255,.035),0 0 8px rgba(0,0,0,.45);z-index:4;pointer-events:none}
.v45-ball-orbit{position:absolute;inset:0;border-radius:50%;z-index:7;pointer-events:none;transform-origin:50% 50%}
.v45-ball{position:absolute;left:50%;top:18px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 24%,#d8d8d8 25% 52%,#8d8d8d 100%);box-shadow:0 0 7px rgba(255,255,255,.8),0 2px 4px rgba(0,0,0,.55)}
.v45-ball.landing{animation:v45BallDrop .42s ease-out forwards}
@keyframes v45BallDrop{0%{transform:translateY(0) scale(1)}45%{transform:translateY(11px) scale(.96)}72%{transform:translateY(6px) scale(1.02)}100%{transform:translateY(9px) scale(1)}}
.v45-pointer{position:absolute;left:50%;top:0;transform:translateX(-50%);width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-top:21px solid #ff4155;filter:drop-shadow(0 0 8px rgba(255,65,85,.70));z-index:10}
.v45-result{min-width:255px;height:50px;display:grid;place-items:center;border-radius:11px;border:1px solid rgba(255,255,255,.06);background:#0b0e12;color:#747982;font-size:11px;font-weight:1000;letter-spacing:.04em}
.v45-result.win{color:#6af0b3;border-color:rgba(93,231,170,.24);background:#0b1712;box-shadow:0 0 24px rgba(93,231,170,.07)}
.v45-result.loss{color:#ff6c7d;border-color:rgba(255,73,94,.21);background:#180c10;box-shadow:0 0 24px rgba(255,73,94,.06)}
.v45-result .ball-color{display:inline-block;width:9px;height:9px;border-radius:50%;margin-left:7px;vertical-align:middle}
.v45-result .ball-color.red{background:#d52b42;box-shadow:0 0 8px rgba(213,43,66,.7)}
.v45-result .ball-color.black{background:#2c3239;border:1px solid #707881}
.v45-result .ball-color.green{background:#3cd486;box-shadow:0 0 8px rgba(60,212,134,.6)}
.v45-choice-row{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.v45-choice{min-width:102px;height:38px;border-radius:9px;border:1px solid rgba(255,255,255,.07);background:#0d0f13;color:#7d828a;font-size:8px;font-weight:1000;cursor:pointer}
.v45-choice.active[data-rchoice="red"]{color:#fff;border-color:#d23549;background:linear-gradient(#a11b2a,#541018)}
.v45-choice.active[data-rchoice="black"]{color:#fff;border-color:#5f6872;background:linear-gradient(#2e343b,#161a1f)}
.v45-choice.active[data-rchoice="green"]{color:#fff;border-color:#32b873;background:linear-gradient(#218958,#10472d)}
.v45-rare-green{color:#4acb8c;font-size:7px;font-weight:900;letter-spacing:.08em;opacity:.78}
@media(max-width:620px){.v45-wheel-shell{width:315px;height:315px}.v45-wheel{width:288px;height:288px}.v45-pocket{width:28px;height:42px;margin-left:-14px;margin-top:-21px;transform:rotate(var(--ang)) translateY(-114px);transform-origin:14px 21px;font-size:7px}.v45-inner-bowl{inset:52px}.v45-ball{top:17px}.v45-choice{min-width:84px}}
/* ===== V46 SIMPLE 3-COLOR ROULETTE ===== */
.v46-roulette-layout{
width:min(760px,96%);
display:grid;
place-items:center;
gap:16px;
}
.v46-wheel-shell{
position:relative;
width:390px;
height:390px;
display:grid;
place-items:center;
}
.v46-wheel{
position:relative;
width:350px;
height:350px;
border-radius:50%;
border:15px solid #2a1b11;
box-shadow:
inset 0 0 0 5px #b57d31,
inset 0 0 0 15px #15191e,
0 28px 58px rgba(0,0,0,.38),
0 0 38px rgba(255,40,58,.08);
background:
conic-gradient(
#2db96f 0deg 4.4deg,
#a51626 4.4deg 14.27deg,
#171c22 14.27deg 24.14deg,
#a51626 24.14deg 34.01deg,
#171c22 34.01deg 43.88deg,
#a51626 43.88deg 53.75deg,
#171c22 53.75deg 63.62deg,
#a51626 63.62deg 73.49deg,
#171c22 73.49deg 83.36deg,
#a51626 83.36deg 93.23deg,
#171c22 93.23deg 103.10deg,
#a51626 103.10deg 112.97deg,
#171c22 112.97deg 122.84deg,
#a51626 122.84deg 132.71deg,
#171c22 132.71deg 142.58deg,
#a51626 142.58deg 152.45deg,
#171c22 152.45deg 162.32deg,
#a51626 162.32deg 172.19deg,
#171c22 172.19deg 182.06deg,
#a51626 182.06deg 191.93deg,
#171c22 191.93deg 201.80deg,
#a51626 201.80deg 211.67deg,
#171c22 211.67deg 221.54deg,
#a51626 221.54deg 231.41deg,
#171c22 231.41deg 241.28deg,
#a51626 241.28deg 251.15deg,
#171c22 251.15deg 261.02deg,
#a51626 261.02deg 270.89deg,
#171c22 270.89deg 280.76deg,
#a51626 280.76deg 290.63deg,
#171c22 290.63deg 300.50deg,
#a51626 300.50deg 310.37deg,
#171c22 310.37deg 320.24deg,
#a51626 320.24deg 330.11deg,
#171c22 330.11deg 339.98deg,
#a51626 339.98deg 349.85deg,
#171c22 349.85deg 360deg
);
transform:rotateX(7deg);
}
.v46-wheel::before{
content:"";
position:absolute;
inset:34px;
border-radius:50%;
background:#0b0e12;
border:2px solid rgba(255,255,255,.07);
box-shadow:inset 0 0 30px rgba(0,0,0,.55);
}
.v46-wheel::after{
content:"";
position:absolute;
inset:100px;
border-radius:50%;
background:radial-gradient(circle at 50% 42%,#c39146 0 13%,#765025 14% 42%,#1b2026 43% 100%);
border:4px solid #b6873f;
box-shadow:0 0 18px rgba(198,151,68,.12);
}
.v46-green-mark{
position:absolute;
top:13px;
left:50%;
transform:translateX(-50%);
z-index:5;
color:#62eba8;
font-size:8px;
font-weight:1000;
letter-spacing:.08em;
text-shadow:0 0 8px rgba(72,224,156,.45);
}
.v46-ball-orbit{
position:absolute;
inset:0;
z-index:8;
pointer-events:none;
transform-origin:50% 50%;
}
.v46-ball{
position:absolute;
left:50%;
top:18px;
width:15px;
height:15px;
margin-left:-7.5px;
border-radius:50%;
background:radial-gradient(circle at 32% 28%,#fff 0 22%,#dadada 23% 55%,#8c8c8c 100%);
box-shadow:0 0 8px rgba(255,255,255,.82),0 2px 4px rgba(0,0,0,.55);
}
.v46-ball.drop{
animation:v46BallDrop .5s ease-out forwards;
}
@keyframes v46BallDrop{
0%{transform:translateY(0) scale(1)}
42%{transform:translateY(17px) scale(.96)}
72%{transform:translateY(10px) scale(1.02)}
100%{transform:translateY(15px) scale(1)}
}
.v46-pointer{
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
width:0;height:0;
border-left:13px solid transparent;
border-right:13px solid transparent;
border-top:21px solid #ff4054;
filter:drop-shadow(0 0 8px rgba(255,64,84,.7));
z-index:10;
}
.v46-choice-row{
display:flex;
gap:8px;
flex-wrap:wrap;
justify-content:center;
}
.v46-choice{
min-width:104px;
height:39px;
border-radius:9px;
border:1px solid rgba(255,255,255,.07);
background:#0d0f13;
color:#7c8189;
font-size:8px;
font-weight:1000;
cursor:pointer;
}
.v46-choice.active[data-rchoice="red"]{
color:#fff;
border-color:#d3374a;
background:linear-gradient(#a41c2d,#551019);
box-shadow:0 0 18px rgba(220,45,67,.12);
}
.v46-choice.active[data-rchoice="black"]{
color:#fff;
border-color:#606973;
background:linear-gradient(#2d333b,#161a1f);
}
.v46-choice.active[data-rchoice="green"]{
color:#fff;
border-color:#34b978;
background:linear-gradient(#228c5a,#10482e);
box-shadow:0 0 18px rgba(52,185,120,.12);
}
.v46-result{
min-width:260px;
height:48px;
display:grid;
place-items:center;
border-radius:11px;
border:1px solid rgba(255,255,255,.06);
background:#0b0e12;
color:#767b83;
font-size:11px;
font-weight:1000;
}
.v46-result.win{
color:#6af0b3;
border-color:rgba(93,231,170,.24);
background:#0b1712;
}
.v46-result.loss{
color:#ff6d7e;
border-color:rgba(255,73,94,.21);
background:#180c10;
}
.v46-land-glow{
position:absolute;
inset:0;
border-radius:50%;
pointer-events:none;
opacity:0;
z-index:6;
transition:opacity .18s ease;
}
.v46-land-glow.red{
opacity:1;
box-shadow:inset 0 0 36px rgba(230,36,58,.28),0 0 28px rgba(230,36,58,.12);
}
.v46-land-glow.black{
opacity:1;
box-shadow:inset 0 0 36px rgba(150,160,170,.16),0 0 22px rgba(150,160,170,.06);
}
.v46-land-glow.green{
opacity:1;
box-shadow:inset 0 0 40px rgba(52,207,132,.34),0 0 30px rgba(52,207,132,.14);
}
@media(max-width:620px){
.v46-wheel-shell{width:315px;height:315px}
.v46-wheel{width:285px;height:285px}
.v46-wheel::after{inset:82px}
.v46-choice{min-width:86px}
}
/* ===== V47 PREMIUM AUTO-SPIN ROULETTE ===== */
.v47-roulette-layout{
width:min(800px,96%);
display:grid;
place-items:center;
gap:18px;
}
.v47-wheel-shell{
position:relative;
width:430px;
height:430px;
display:grid;
place-items:center;
filter:drop-shadow(0 30px 45px rgba(0,0,0,.38));
}
.v47-wheel-shell::before{
content:"";
position:absolute;
inset:26px;
border-radius:50%;
background:radial-gradient(circle,rgba(255,43,61,.06),transparent 62%);
filter:blur(7px);
}
.v47-wheel{
position:relative;
width:384px;
height:384px;
border-radius:50%;
transform:rotateX(8deg);
background:
conic-gradient(
#32bb75 0deg 3.6deg,
#a8182a 3.6deg 13.5deg,
#171c22 13.5deg 23.4deg,
#a8182a 23.4deg 33.3deg,
#171c22 33.3deg 43.2deg,
#a8182a 43.2deg 53.1deg,
#171c22 53.1deg 63deg,
#a8182a 63deg 72.9deg,
#171c22 72.9deg 82.8deg,
#a8182a 82.8deg 92.7deg,
#171c22 92.7deg 102.6deg,
#a8182a 102.6deg 112.5deg,
#171c22 112.5deg 122.4deg,
#a8182a 122.4deg 132.3deg,
#171c22 132.3deg 142.2deg,
#a8182a 142.2deg 152.1deg,
#171c22 152.1deg 162deg,
#a8182a 162deg 171.9deg,
#171c22 171.9deg 181.8deg,
#a8182a 181.8deg 191.7deg,
#171c22 191.7deg 201.6deg,
#a8182a 201.6deg 211.5deg,
#171c22 211.5deg 221.4deg,
#a8182a 221.4deg 231.3deg,
#171c22 231.3deg 241.2deg,
#a8182a 241.2deg 251.1deg,
#171c22 251.1deg 261deg,
#a8182a 261deg 270.9deg,
#171c22 270.9deg 280.8deg,
#a8182a 280.8deg 290.7deg,
#171c22 290.7deg 300.6deg,
#a8182a 300.6deg 310.5deg,
#171c22 310.5deg 320.4deg,
#a8182a 320.4deg 330.3deg,
#171c22 330.3deg 340.2deg,
#a8182a 340.2deg 350.1deg,
#171c22 350.1deg 360deg
);
border:18px solid #26180f;
box-shadow:
inset 0 0 0 4px #d29a47,
inset 0 0 0 11px #604018,
inset 0 0 0 19px #14181e,
inset 0 0 42px rgba(0,0,0,.58),
0 0 0 1px rgba(255,255,255,.025),
0 0 45px rgba(255,35,54,.07);
overflow:visible;
}
.v47-wheel::before{
content:"";
position:absolute;
inset:36px;
border-radius:50%;
border:2px solid rgba(255,255,255,.08);
box-shadow:
inset 0 0 24px rgba(0,0,0,.55),
0 0 0 8px rgba(0,0,0,.20);
}
.v47-wheel::after{
content:"";
position:absolute;
inset:112px;
border-radius:50%;
z-index:2;
background:
radial-gradient(circle at 50% 40%,#d9aa5d 0 8%,#8c632f 9% 29%,#323840 30% 52%,#14181d 53% 100%);
border:4px solid #c59648;
box-shadow:
inset 0 0 20px rgba(0,0,0,.48),
0 0 18px rgba(211,164,79,.13);
}
.v47-wheel-face{
position:absolute;
inset:0;
border-radius:50%;
transform-origin:50% 50%;
z-index:1;
}
.v47-wheel-face.spinning{
animation:v47WheelSpin 3.45s cubic-bezier(.08,.61,.10,1) forwards;
}
@keyframes v47WheelSpin{
0%{transform:rotate(0deg)}
55%{transform:rotate(780deg)}
100%{transform:rotate(1080deg)}
}
.v47-green-zero{
position:absolute;
left:50%;
top:9px;
transform:translateX(-50%);
z-index:4;
min-width:23px;
height:17px;
display:grid;
place-items:center;
border-radius:4px 4px 8px 8px;
color:#dffff0;
background:linear-gradient(#36bb78,#157148);
border:1px solid rgba(255,255,255,.16);
box-shadow:0 0 12px rgba(54,205,129,.24);
font-size:7px;
font-weight:1000;
}
.v47-ball-rail{
position:absolute;
inset:20px;
border-radius:50%;
border:2px solid rgba(255,255,255,.09);
box-shadow:
inset 0 0 10px rgba(255,255,255,.025),
0 0 7px rgba(0,0,0,.46);
z-index:5;
}
.v47-ball-orbit{
position:absolute;
inset:0;
border-radius:50%;
transform-origin:50% 50%;
z-index:8;
pointer-events:none;
}
.v47-ball{
position:absolute;
left:50%;
top:17px;
width:16px;
height:16px;
margin-left:-8px;
border-radius:50%;
background:
radial-gradient(circle at 32% 28%,#fff 0 20%,#ededed 21% 43%,#b6b6b6 44% 70%,#747474 100%);
box-shadow:
0 0 8px rgba(255,255,255,.84),
0 2px 5px rgba(0,0,0,.6);
}
.v47-ball.drop{
animation:v47BallDrop .58s ease-out forwards;
}
@keyframes v47BallDrop{
0%{transform:translateY(0) scale(1)}
36%{transform:translateY(9px) scale(.97)}
62%{transform:translateY(19px) scale(.92)}
78%{transform:translateY(13px) scale(1.03)}
100%{transform:translateY(17px) scale(1)}
}
.v47-pointer{
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
width:0;height:0;
border-left:14px solid transparent;
border-right:14px solid transparent;
border-top:23px solid #ff4056;
filter:drop-shadow(0 0 9px rgba(255,64,86,.72));
z-index:10;
}
.v47-choice-row{
display:flex;
justify-content:center;
gap:9px;
flex-wrap:wrap;
}
.v47-choice{
min-width:108px;
height:40px;
border-radius:10px;
border:1px solid rgba(255,255,255,.07);
background:#0c0f13;
color:#7c818a;
font-size:8px;
font-weight:1000;
cursor:pointer;
transition:.15s ease;
}
.v47-choice:hover{transform:translateY(-1px)}
.v47-choice.active[data-rchoice="red"]{
color:#fff;
border-color:#df3b4f;
background:linear-gradient(180deg,#ac1e30,#59101a);
box-shadow:0 0 20px rgba(218,47,69,.14);
}
.v47-choice.active[data-rchoice="black"]{
color:#fff;
border-color:#5d6670;
background:linear-gradient(180deg,#30363d,#171b20);
box-shadow:0 0 18px rgba(120,130,145,.07);
}
.v47-choice.active[data-rchoice="green"]{
color:#fff;
border-color:#37bf7a;
background:linear-gradient(180deg,#258f5d,#104b30);
box-shadow:0 0 20px rgba(55,191,122,.12);
}
.v47-result{
min-width:270px;
height:50px;
display:grid;
place-items:center;
border-radius:12px;
border:1px solid rgba(255,255,255,.06);
background:linear-gradient(180deg,#0f1216,#0a0d10);
color:#7a7f87;
font-size:11px;
font-weight:1000;
letter-spacing:.03em;
}
.v47-result.win{
color:#71efb7;
border-color:rgba(91,227,167,.24);
background:linear-gradient(180deg,#101b17,#0a100d);
box-shadow:0 0 24px rgba(91,227,167,.07);
}
.v47-result.loss{
color:#ff7181;
border-color:rgba(255,79,99,.21);
background:linear-gradient(180deg,#1a0e12,#100a0d);
box-shadow:0 0 24px rgba(255,79,99,.06);
}
.v47-land-glow{
position:absolute;
inset:0;
border-radius:50%;
z-index:6;
pointer-events:none;
opacity:0;
transition:opacity .16s ease;
}
.v47-land-glow.red{opacity:1;box-shadow:inset 0 0 48px rgba(226,41,62,.28),0 0 28px rgba(226,41,62,.10)}
.v47-land-glow.black{opacity:1;box-shadow:inset 0 0 42px rgba(160,170,182,.13)}
.v47-land-glow.green{opacity:1;box-shadow:inset 0 0 54px rgba(55,211,136,.34),0 0 30px rgba(55,211,136,.12)}
@media(max-width:640px){
.v47-wheel-shell{width:325px;height:325px}
.v47-wheel{width:292px;height:292px}
.v47-wheel::after{inset:86px}
.v47-choice{min-width:88px}
}
/* ===== V48 CLEAN POINTER ROULETTE ===== */
.v48-roulette-layout{
width:min(760px,96%);
display:grid;
place-items:center;
gap:18px;
}
.v48-wheel-shell{
position:relative;
width:420px;
height:420px;
display:grid;
place-items:center;
}
.v48-wheel-shell::before{
content:"";
position:absolute;
inset:20px;
border-radius:50%;
background:radial-gradient(circle,rgba(255,35,53,.06),transparent 64%);
filter:blur(8px);
}
.v48-pointer{
position:absolute;
top:-2px;
left:50%;
transform:translateX(-50%);
z-index:12;
width:0;
height:0;
border-left:17px solid transparent;
border-right:17px solid transparent;
border-top:28px solid #ff3f55;
filter:drop-shadow(0 0 10px rgba(255,63,85,.78));
}
.v48-pointer::after{
content:"";
position:absolute;
left:-5px;
top:-31px;
width:10px;
height:10px;
border-radius:50%;
background:#fff3f5;
box-shadow:0 0 12px rgba(255,255,255,.55);
}
.v48-wheel-frame{
position:relative;
width:382px;
height:382px;
border-radius:50%;
padding:15px;
background:linear-gradient(145deg,#a97833,#3e2915 48%,#bd8d42);
box-shadow:
0 30px 65px rgba(0,0,0,.42),
0 0 40px rgba(255,39,58,.07),
inset 0 0 0 2px rgba(255,255,255,.06);
}
.v48-wheel-frame::after{
content:"";
position:absolute;
inset:8px;
border-radius:50%;
border:2px solid rgba(255,255,255,.05);
pointer-events:none;
}
.v48-wheel{
position:relative;
width:100%;
height:100%;
border-radius:50%;
background:
conic-gradient(
#2fbb75 0deg 4deg,
#b51d30 4deg 13.89deg,
#171c22 13.89deg 23.78deg,
#b51d30 23.78deg 33.67deg,
#171c22 33.67deg 43.56deg,
#b51d30 43.56deg 53.45deg,
#171c22 53.45deg 63.34deg,
#b51d30 63.34deg 73.23deg,
#171c22 73.23deg 83.12deg,
#b51d30 83.12deg 93.01deg,
#171c22 93.01deg 102.90deg,
#b51d30 102.90deg 112.79deg,
#171c22 112.79deg 122.68deg,
#b51d30 122.68deg 132.57deg,
#171c22 132.57deg 142.46deg,
#b51d30 142.46deg 152.35deg,
#171c22 152.35deg 162.24deg,
#b51d30 162.24deg 172.13deg,
#171c22 172.13deg 182.02deg,
#b51d30 182.02deg 191.91deg,
#171c22 191.91deg 201.80deg,
#b51d30 201.80deg 211.69deg,
#171c22 211.69deg 221.58deg,
#b51d30 221.58deg 231.47deg,
#171c22 231.47deg 241.36deg,
#b51d30 241.36deg 251.25deg,
#171c22 251.25deg 261.14deg,
#b51d30 261.14deg 271.03deg,
#171c22 271.03deg 280.92deg,
#b51d30 280.92deg 290.81deg,
#171c22 290.81deg 300.70deg,
#b51d30 300.70deg 310.59deg,
#171c22 310.59deg 320.48deg,
#b51d30 320.48deg 330.37deg,
#171c22 330.37deg 340.26deg,
#b51d30 340.26deg 350.15deg,
#171c22 350.15deg 360deg
);
box-shadow:
inset 0 0 0 6px #101318,
inset 0 0 34px rgba(0,0,0,.62);
transform:rotate(0deg);
}
.v48-wheel::before{
content:"";
position:absolute;
inset:42px;
border-radius:50%;
background:#0a0d11;
box-shadow:
inset 0 0 24px rgba(255,255,255,.025),
0 0 0 2px rgba(255,255,255,.05);
}
.v48-wheel::after{
content:"";
position:absolute;
inset:112px;
border-radius:50%;
z-index:3;
background:
radial-gradient(circle at 50% 40%,#d1a259 0 9%,#8a5d2b 10% 30%,#2f353c 31% 52%,#161a1f 53% 100%);
border:4px solid #c29145;
box-shadow:
inset 0 0 18px rgba(0,0,0,.48),
0 0 18px rgba(198,151,68,.13);
}
.v48-zero{
position:absolute;
left:50%;
top:10px;
transform:translateX(-50%);
z-index:5;
min-width:22px;
height:18px;
display:grid;
place-items:center;
border-radius:5px;
background:linear-gradient(180deg,#3fc985,#176b47);
color:#effff7;
border:1px solid rgba(255,255,255,.15);
box-shadow:0 0 12px rgba(63,201,133,.26);
font-size:7px;
font-weight:1000;
}
.v48-wheel-result-ring{
position:absolute;
inset:0;
border-radius:50%;
z-index:6;
pointer-events:none;
opacity:0;
transition:opacity .18s ease;
}
.v48-wheel-result-ring.red{
opacity:1;
box-shadow:inset 0 0 44px rgba(229,43,65,.28),0 0 24px rgba(229,43,65,.08);
}
.v48-wheel-result-ring.black{
opacity:1;
box-shadow:inset 0 0 38px rgba(160,170,180,.14);
}
.v48-wheel-result-ring.green{
opacity:1;
box-shadow:inset 0 0 48px rgba(58,211,138,.32),0 0 25px rgba(58,211,138,.10);
}
.v48-choice-row{
display:flex;
gap:9px;
justify-content:center;
flex-wrap:wrap;
}
.v48-choice{
min-width:108px;
height:40px;
border-radius:10px;
border:1px solid rgba(255,255,255,.07);
background:#0d1014;
color:#7d828a;
font-size:8px;
font-weight:1000;
cursor:pointer;
transition:.15s ease;
}
.v48-choice:hover{transform:translateY(-1px)}
.v48-choice.active[data-rchoice="red"]{
color:#fff;
border-color:#dd3b4f;
background:linear-gradient(180deg,#ad1f31,#5a111b);
box-shadow:0 0 18px rgba(221,59,79,.13);
}
.v48-choice.active[data-rchoice="black"]{
color:#fff;
border-color:#5c6570;
background:linear-gradient(180deg,#30363e,#171b20);
}
.v48-choice.active[data-rchoice="green"]{
color:#fff;
border-color:#39bc79;
background:linear-gradient(180deg,#248e5c,#104a2f);
box-shadow:0 0 18px rgba(57,188,121,.12);
}
.v48-result{
min-width:280px;
height:50px;
display:grid;
place-items:center;
border-radius:12px;
border:1px solid rgba(255,255,255,.06);
background:linear-gradient(180deg,#101317,#0a0d10);
color:#777d85;
font-size:11px;
font-weight:1000;
}
.v48-result.win{
color:#71efb7;
border-color:rgba(91,227,167,.24);
background:#0d1713;
}
.v48-result.loss{
color:#ff7080;
border-color:rgba(255,78,98,.21);
background:#180c10;
}
@media(max-width:620px){
.v48-wheel-shell{width:320px;height:320px}
.v48-wheel-frame{width:290px;height:290px}
.v48-wheel::after{inset:84px}
.v48-choice{min-width:88px}
}
/* ===== V49 MINES ===== */
.mines-art{
display:grid!important;
grid-template-columns:repeat(3,22px);
gap:5px;
place-content:center;
}
.mines-art i{
width:22px;height:22px;
border-radius:6px;
background:linear-gradient(145deg,#191d23,#0c0f13);
border:1px solid rgba(255,255,255,.06);
box-shadow:inset 0 0 8px rgba(255,255,255,.02);
}
.mines-art i:nth-child(5){
background:radial-gradient(circle,#ff5167 0 15%,#8e1424 16% 45%,#1a0b0f 46%);
border-color:rgba(255,70,90,.26);
box-shadow:0 0 14px rgba(255,55,77,.18);
}
.v49-mines{
width:min(720px,96%);
display:grid;
grid-template-columns:minmax(300px,1fr) 210px;
gap:18px;
align-items:center;
}
.v49-mines-board{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:8px;
padding:15px;
border-radius:16px;
background:
radial-gradient(circle at 50% 0,rgba(255,38,56,.055),transparent 32%),
#080a0d;
border:1px solid rgba(255,255,255,.055);
}
.v49-mine-cell{
aspect-ratio:1;
min-width:0;
border:1px solid rgba(255,255,255,.065);
border-radius:11px;
background:linear-gradient(145deg,#161a20,#0c0f13);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
0 8px 16px rgba(0,0,0,.14);
cursor:pointer;
display:grid;
place-items:center;
color:#6d737c;
font-size:20px;
transition:.14s ease;
}
.v49-mine-cell:hover:not(:disabled){
transform:translateY(-2px);
border-color:rgba(255,58,75,.22);
background:linear-gradient(145deg,#1b2027,#101318);
}
.v49-mine-cell.safe{
cursor:default;
background:
radial-gradient(circle at 50% 45%,rgba(78,232,169,.20),transparent 42%),
linear-gradient(145deg,#11241d,#0b1511);
border-color:rgba(83,229,170,.25);
color:#72efb9;
box-shadow:0 0 16px rgba(74,222,161,.07);
animation:v49SafePop .24s ease;
}
.v49-mine-cell.mine{
cursor:default;
background:
radial-gradient(circle at 50% 45%,rgba(255,60,80,.24),transparent 42%),
linear-gradient(145deg,#291015,#12090c);
border-color:rgba(255,65,85,.30);
color:#ff6678;
box-shadow:0 0 18px rgba(255,49,71,.10);
animation:v49MineBoom .34s ease;
}
.v49-mine-cell.mine::after{content:"✹";font-size:24px}
.v49-mine-cell.safe::after{content:"◆";font-size:18px}
@keyframes v49SafePop{50%{transform:scale(1.08)}}
@keyframes v49MineBoom{45%{transform:scale(1.12) rotate(5deg)}}
.v49-mines-side{
display:grid;
gap:10px;
}
.v49-mines-box{
padding:13px;
border-radius:11px;
background:linear-gradient(180deg,#101317,#0b0d10);
border:1px solid rgba(255,255,255,.055);
}
.v49-mines-box span{
display:block;
color:#626871;
font-size:7px;
font-weight:900;
letter-spacing:.10em;
}
.v49-mines-box strong{
display:block;
margin-top:5px;
font-size:17px;
}
.v49-mines-count{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:6px;
}
.v49-mines-count button{
height:34px;
border-radius:8px;
border:1px solid rgba(255,255,255,.06);
background:#0c0f13;
color:#777d85;
font-size:8px;
font-weight:1000;
cursor:pointer;
}
.v49-mines-count button.active{
color:#fff;
border-color:rgba(255,58,75,.25);
background:linear-gradient(180deg,#3b1017,#1c0b0f);
}
.v49-cashout{
height:42px;
border-radius:9px;
border:1px solid #41c58a;
background:linear-gradient(180deg,#18885a,#0d4b31);
color:#fff;
font-size:8px;
font-weight:1000;
cursor:pointer;
}
.v49-cashout:disabled{opacity:.42;cursor:not-allowed}
.v49-mines-status{
min-height:38px;
display:grid;
place-items:center;
text-align:center;
padding:7px;
border-radius:9px;
border:1px solid rgba(255,255,255,.05);
background:#090b0e;
color:#6e747c;
font-size:8px;
font-weight:900;
}
.v49-mines-status.win{color:#70efb7;border-color:rgba(91,227,167,.20)}
.v49-mines-status.loss{color:#ff6e80;border-color:rgba(255,77,98,.20)}
@media(max-width:720px){
.v49-mines{grid-template-columns:1fr}
.v49-mines-side{grid-template-columns:repeat(2,1fr)}
.v49-mines-count,.v49-cashout,.v49-mines-status{grid-column:1/-1}
}
@media(max-width:480px){
.v49-mines-board{gap:6px;padding:9px}
.v49-mine-cell{border-radius:8px}
}
/* Roulette pointer gets stronger final-state clarity */
.v48-pointer{
border-top-color:#ff314b!important;
filter:drop-shadow(0 0 12px rgba(255,49,75,.88))!important;
}
/* ===== V50 MINES FIT + INTEGRATED GAME CONTROLS ===== */
.v49-mines{
width:min(620px,94%)!important;
grid-template-columns:1fr!important;
gap:10px!important;
}
.v49-mines-board{
width:min(430px,100%)!important;
margin:0 auto!important;
padding:10px!important;
gap:6px!important;
}
.v49-mine-cell{
border-radius:9px!important;
}
.v49-mines-side{
display:none!important;
}
/* Mines-specific settings moved into the existing left game control panel */
.v50-mines-controls{
display:none;
gap:8px;
margin-top:10px;
}
body[data-current-game="mines"] .v50-mines-controls{
display:grid;
}
.v50-mines-control-label{
color:#626871;
font-size:7px;
font-weight:900;
letter-spacing:.10em;
text-transform:uppercase;
}
.v50-mines-count-row{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:6px;
}
.v50-mines-count-btn{
height:34px;
border-radius:8px;
border:1px solid rgba(255,255,255,.06);
background:#0c0f13;
color:#777d85;
font-size:8px;
font-weight:1000;
cursor:pointer;
}
.v50-mines-count-btn.active{
color:#fff;
border-color:rgba(255,58,75,.25);
background:linear-gradient(180deg,#3b1017,#1c0b0f);
}
.v50-mines-cashout{
height:38px;
border-radius:9px;
border:1px solid #41c58a;
background:linear-gradient(180deg,#18885a,#0d4b31);
color:#fff;
font-size:8px;
font-weight:1000;
cursor:pointer;
}
.v50-mines-cashout:disabled{
opacity:.42;
cursor:not-allowed;
}
.v50-mines-mult{
display:flex;
justify-content:space-between;
align-items:center;
min-height:34px;
padding:0 10px;
border-radius:8px;
border:1px solid rgba(255,255,255,.055);
background:#0a0c0f;
}
.v50-mines-mult span{
color:#626871;
font-size:7px;
font-weight:900;
letter-spacing:.08em;
}
.v50-mines-mult strong{
font-size:14px;
color:#f0f2f4;
}
.v50-mines-status{
min-height:32px;
display:grid;
place-items:center;
text-align:center;
padding:6px 8px;
border-radius:8px;
border:1px solid rgba(255,255,255,.05);
background:#090b0e;
color:#6d737b;
font-size:7px;
font-weight:900;
}
.v50-mines-status.win{
color:#70efb7;
border-color:rgba(91,227,167,.20);
}
.v50-mines-status.loss{
color:#ff6e80;
border-color:rgba(255,77,98,.20);
}
/* Make main game stage more compact for Mines */
body[data-current-game="mines"] #fullGameStage{
min-height:0!important;
}
body[data-current-game="mines"] .v31-stage{
padding:10px!important;
}
body[data-current-game="mines"] .v31-stage-head{
margin-bottom:8px!important;
}
body[data-current-game="mines"] .v31-center{
min-height:0!important;
}
body[data-current-game="mines"] .full-game-shell,
body[data-current-game="mines"] .game-layout{
align-items:start!important;
}
@media(max-width:900px){
.v49-mines-board{
width:min(390px,100%)!important;
}
}
@media(max-width:560px){
.v49-mines-board{
width:100%!important;
padding:7px!important;
gap:5px!important;
}
.v49-mine-cell{
border-radius:7px!important;
}
}
/* ===== V51 MINES STABILITY / FIT ===== */
#v50MinesControls{display:none}
body[data-current-game="mines"] #v50MinesControls{display:grid!important}
body[data-current-game="mines"] .v49-mines{
width:min(560px,92%)!important;
}
body[data-current-game="mines"] .v49-mines-board{
width:min(380px,100%)!important;
padding:8px!important;
gap:5px!important;
}
body[data-current-game="mines"] .v49-mine-cell{
border-radius:8px!important;
}
@media(max-height:820px) and (min-width:721px){
body[data-current-game="mines"] .v49-mines-board{
width:min(340px,100%)!important;
}
}
/* ===== V52 SIDEBAR ACTIVE ROUTING ===== */
#sidebar .nav-item[data-game-route="mines"] em{
margin-left:auto;
color:#ff6678;
font-style:normal;
font-size:6px;
font-weight:1000;
letter-spacing:.08em;
border:1px solid rgba(255,75,96,.18);
background:rgba(94,13,25,.32);
padding:2px 5px;
border-radius:999px;
}
#sidebar .nav-item.active{
position:relative;
}
#sidebar .nav-item.active::after{
content:"";
position:absolute;
right:8px;
width:4px;
height:4px;
border-radius:50%;
background:#ff4058;
box-shadow:0 0 9px rgba(255,64,88,.8);
}
/* ===== V53 OPEN / CLOSE MOTION POLISH ===== */
@keyframes v53FadeIn{
from{opacity:0}
to{opacity:1}
}
@keyframes v53FadeOut{
from{opacity:1}
to{opacity:0}
}
@keyframes v53SlideUpIn{
from{opacity:0;transform:translateY(18px) scale(.985)}
to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes v53SlideDownOut{
from{opacity:1;transform:translateY(0) scale(1)}
to{opacity:0;transform:translateY(18px) scale(.985)}
}
@keyframes v53PanelIn{
from{opacity:0;transform:translateX(18px)}
to{opacity:1;transform:translateX(0)}
}
@keyframes v53PanelOut{
from{opacity:1;transform:translateX(0)}
to{opacity:0;transform:translateX(18px)}
}
@keyframes v53ToastIn{
from{opacity:0;transform:translateY(10px) scale(.97)}
to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes v53ToastOut{
from{opacity:1;transform:translateY(0) scale(1)}
to{opacity:0;transform:translateY(-6px) scale(.98)}
}
/* Modals */
.game-modal.open,
#authModal.open,
#profileModal.open,
#fairnessModal.open,
#caseModal.open{
animation:v53FadeIn .18s ease both;
}
.game-modal.open > *,
#authModal.open > *,
#profileModal.open > *,
#fairnessModal.open > *,
#caseModal.open > *{
animation:v53SlideUpIn .22s cubic-bezier(.2,.75,.2,1) both;
}
.v53-closing{
pointer-events:none!important;
animation:v53FadeOut .17s ease both!important;
}
.v53-closing > *{
animation:v53SlideDownOut .17s ease both!important;
}
/* Full-screen pages */
#gamePage.open,
#accountPage.open{
animation:v53FadeIn .20s ease both;
}
#gamePage.open .game-page-shell,
#accountPage.open .account-shell{
animation:v53SlideUpIn .24s cubic-bezier(.2,.75,.2,1) both;
}
#gamePage.v53-closing .game-page-shell,
#accountPage.v53-closing .account-shell{
animation:v53SlideDownOut .18s ease both!important;
}
/* Chat mobile sheet */
.chat-panel.mobile-open{
animation:v53PanelIn .20s ease both;
}
.chat-panel.v53-closing{
animation:v53PanelOut .17s ease both!important;
}
/* Sidebar active click micro-animation */
#sidebar .nav-item{
transition:
background .16s ease,
border-color .16s ease,
color .16s ease,
transform .12s ease;
}
#sidebar .nav-item:active{
transform:scale(.985);
}
/* Buttons */
button{
transition:
transform .11s ease,
filter .14s ease,
box-shadow .16s ease,
border-color .16s ease,
background .16s ease;
}
button:active:not(:disabled){
transform:scale(.975);
}
/* Toasts */
.toast{
animation:v53ToastIn .20s ease both;
}
.toast.v53-toast-out{
animation:v53ToastOut .18s ease both!important;
}
/* Game cards */
.game-card{
transition:transform .16s ease,box-shadow .18s ease,border-color .18s ease!important;
}
.game-card:active{
transform:scale(.985)!important;
}
/* Account tabs / game info tabs */
.account-tabs button,
.game-info-tabs button{
transition:background .16s ease,color .16s ease,border-color .16s ease,transform .11s ease;
}
.account-tabs button:active,
.game-info-tabs button:active{
transform:translateY(1px);
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
*,
*::before,
*::after{
animation-duration:.001ms!important;
animation-iteration-count:1!important;
transition-duration:.001ms!important;
scroll-behavior:auto!important;
}
}
/* ===== V54 CHAT @MENTIONS ===== */
.chat-mention{
display:inline-flex;
align-items:center;
padding:1px 5px;
margin:0 1px;
border-radius:6px;
color:#ff7082;
background:rgba(255,56,82,.10);
border:1px solid rgba(255,67,91,.14);
font-weight:900;
cursor:pointer;
transition:.14s ease;
}
.chat-mention:hover{
background:rgba(255,56,82,.17);
border-color:rgba(255,67,91,.24);
}
.chat-mention.me{
color:#fff;
background:rgba(210,31,54,.36);
border-color:rgba(255,81,104,.34);
box-shadow:0 0 12px rgba(255,54,82,.10);
}
.chat-user-name{
cursor:pointer;
}
.chat-user-name:hover{
text-decoration:underline;
text-underline-offset:2px;
}
.chat-mention-menu{
position:absolute;
left:8px;
right:8px;
bottom:54px;
z-index:40;
display:none;
max-height:190px;
overflow:auto;
padding:6px;
border-radius:10px;
background:#0c0f13;
border:1px solid rgba(255,255,255,.07);
box-shadow:0 14px 34px rgba(0,0,0,.38);
}
.chat-mention-menu.open{display:block}
.chat-mention-option{
width:100%;
display:flex;
align-items:center;
gap:8px;
padding:8px;
border:0;
border-radius:8px;
background:transparent;
color:#c9ccd1;
text-align:left;
cursor:pointer;
}
.chat-mention-option:hover,
.chat-mention-option.active{
background:rgba(255,50,75,.09);
color:#fff;
}
.chat-mention-option .mini-avatar{
width:24px;height:24px;border-radius:50%;
display:grid;place-items:center;
background:#161a20;
border:1px solid rgba(255,255,255,.06);
font-size:10px;
flex:0 0 auto;
}
.chat-mention-option strong{
font-size:9px;
}
.chat-compose-wrap{position:relative}
/* ===== V55 ONLINE-ONLY @MENTIONS ===== */
.mention-setting,.profile-mention-setting{
display:flex!important;align-items:center;justify-content:space-between;gap:14px;
min-height:58px;padding:12px 14px;border-radius:11px;
border:1px solid rgba(255,255,255,.06);background:#0b0e12;cursor:pointer;
}
.mention-setting span,.profile-mention-setting span{display:grid;gap:3px}
.mention-setting strong,.profile-mention-setting strong{font-size:9px;color:#e7e9ec}
.mention-setting small,.profile-mention-setting small{font-size:7px;color:#666c75}
.mention-setting input,.profile-mention-setting input{position:absolute;opacity:0;pointer-events:none}
.mention-setting i,.profile-mention-setting i{
position:relative;width:38px;height:21px;border-radius:999px;background:#20252c;
border:1px solid rgba(255,255,255,.08);flex:0 0 auto;transition:.16s ease
}
.mention-setting i::after,.profile-mention-setting i::after{
content:"";position:absolute;left:3px;top:3px;width:13px;height:13px;border-radius:50%;
background:#777e87;transition:.16s ease
}
.mention-setting input:checked+i,.profile-mention-setting input:checked+i{
background:#55121d;border-color:rgba(255,61,86,.30);box-shadow:0 0 14px rgba(255,48,74,.08)
}
.mention-setting input:checked+i::after,.profile-mention-setting input:checked+i::after{
left:20px;background:#ff5369;box-shadow:0 0 8px rgba(255,83,105,.46)
}
.chat-mention-menu{
position:absolute;left:8px;right:8px;bottom:54px;z-index:40;display:none;max-height:210px;
overflow:auto;padding:6px;border-radius:11px;background:#0b0e12;
border:1px solid rgba(255,255,255,.07);box-shadow:0 16px 38px rgba(0,0,0,.42)
}
.chat-mention-menu.open{display:block}
.chat-mention-option{
width:100%;display:flex;align-items:center;gap:9px;padding:8px;border:0;border-radius:8px;
background:transparent;color:#c9cdd2;text-align:left;cursor:pointer
}
.chat-mention-option:hover,.chat-mention-option.active{background:rgba(255,51,76,.09);color:#fff}
.chat-mention-option .mention-dot{
width:7px;height:7px;border-radius:50%;background:#48d993;box-shadow:0 0 8px rgba(72,217,147,.55);flex:0 0 auto
}
.chat-mention-option strong{font-size:9px}
.chat-mention-option small{margin-left:auto;color:#5e646d;font-size:7px}
.chat-mention{
display:inline-flex;align-items:center;padding:1px 5px;margin:0 1px;border-radius:6px;
color:#ff7082;background:rgba(255,56,82,.10);border:1px solid rgba(255,67,91,.14);
font-weight:900;cursor:pointer
}
.chat-mention.me{color:#fff;background:rgba(219,32,57,.42);border-color:rgba(255,83,106,.38);box-shadow:0 0 13px rgba(255,51,79,.12)}
.mention-you-badge{
display:inline-flex;align-items:center;margin-left:6px;padding:2px 5px;border-radius:999px;
background:rgba(226,41,64,.16);border:1px solid rgba(255,74,98,.22);
color:#ff7a8b;font-size:6px;font-weight:1000;letter-spacing:.06em
}
.chat-compose-wrap{position:relative}
/* ===== V61 CHAT FEATURES — original layout preserved ===== */
.message{position:relative}
.v61-chat-actions{position:absolute;right:5px;top:5px;display:flex;gap:3px;opacity:0;transition:.12s ease}
.message:hover .v61-chat-actions{opacity:1}
.v61-chat-actions>button{width:22px;height:20px;padding:0;border-radius:6px;border:1px solid rgba(255,255,255,.05);background:#101318;color:#777d86;font-size:9px}
.v61-chat-actions>button:hover{color:#fff;background:#171116}
.v61-picker{display:none;position:absolute;right:0;top:24px;padding:4px;gap:2px;border-radius:8px;background:#0c0f13;border:1px solid rgba(255,255,255,.06);z-index:20}
.message.v61-picker-open .v61-picker{display:flex}
.v61-picker button{width:25px;height:25px;padding:0;border:0;background:transparent;border-radius:6px;font-size:12px}
.v61-picker button:hover{background:rgba(255,255,255,.05)}
.v61-reply-preview{display:grid;gap:1px;margin:2px 0 5px;padding:5px 7px;border-left:2px solid #9e2638;background:rgba(255,255,255,.018);border-radius:0 6px 6px 0;max-width:190px}
.v61-reply-preview strong{font-size:7px;color:#b54a5b}.v61-reply-preview span{font-size:7px;color:#666c74;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v61-reactions{display:flex;gap:3px;flex-wrap:wrap;margin-top:4px}.v61-reaction{height:20px;padding:0 6px;border-radius:999px;border:1px solid rgba(255,255,255,.05);background:#0d1014;color:#a5a9b0;font-size:9px}.v61-reaction b{font-size:7px;color:#656b73}
.v61-reply-bar{display:none;align-items:center;gap:7px;margin:0 7px 5px;padding:6px 8px;border-radius:8px;background:#0d1014;border:1px solid rgba(255,255,255,.05)}
.v61-reply-bar.open{display:flex}.v61-reply-bar>div{min-width:0;display:grid;gap:1px;flex:1}.v61-reply-bar strong{font-size:7px;color:#bd4a5d}.v61-reply-bar span{font-size:7px;color:#696f77;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v61-reply-bar button{width:21px;height:21px;padding:0;border-radius:6px;background:#111419;color:#777;border:1px solid rgba(255,255,255,.05)}
@media(max-width:900px){.v61-chat-actions{opacity:1}}
/* ===== V63 CHAT 3-DOT MENU ===== */
.v61-chat-actions,
.v61-picker,
.v60-chat-actions,
.v60-reaction-picker{
display:none!important;
}
.v63-chat-actions{
position:absolute;
right:5px;
top:5px;
z-index:28;
}
.v63-more{
width:24px!important;
height:20px!important;
min-width:24px!important;
padding:0!important;
display:grid!important;
place-items:center!important;
border-radius:6px!important;
border:1px solid rgba(255,255,255,.05)!important;
background:#101318!important;
color:#777d86!important;
font-size:10px!important;
line-height:1!important;
letter-spacing:0!important;
cursor:pointer!important;
opacity:.70;
}
.message:hover .v63-more,
.v63-more:hover,
.message.v63-menu-open .v63-more{
opacity:1;
color:#fff!important;
background:#171116!important;
border-color:rgba(255,67,91,.15)!important;
}
.v63-menu{
position:absolute;
right:0;
top:24px;
display:none;
width:138px;
padding:5px;
border-radius:9px;
background:#0b0e12;
border:1px solid rgba(255,255,255,.07);
box-shadow:0 14px 30px rgba(0,0,0,.45);
z-index:60;
}
.message.v63-menu-open .v63-menu{
display:block;
}
.v63-menu-reply{
width:100%!important;
height:30px!important;
padding:0 8px!important;
display:flex!important;
align-items:center!important;
gap:7px!important;
border:0!important;
border-radius:7px!important;
background:transparent!important;
color:#b8bdc5!important;
font-size:8px!important;
text-align:left!important;
}
.v63-menu-reply:hover{
color:#fff!important;
background:rgba(255,52,77,.08)!important;
}
.v63-menu-sep{
height:1px;
margin:4px 2px;
background:rgba(255,255,255,.05);
}
.v63-menu-reactions{
display:flex;
gap:3px;
}
.v63-menu-reactions button{
width:29px!important;
min-width:29px!important;
height:29px!important;
padding:0!important;
display:grid!important;
place-items:center!important;
border:0!important;
border-radius:7px!important;
background:transparent!important;
font-size:13px!important;
}
.v63-menu-reactions button:hover{
background:rgba(255,255,255,.055)!important;
}
/* Reply bar must be completely hidden until a reply is actually selected. */
#v61ReplyBar{
display:none!important;
}
#v61ReplyBar.open{
display:flex!important;
}
/* Old broken duplicate from v62 can never appear. */
#v62ComposeReply{
display:none!important;
}
@media(max-width:900px){
.v63-more{opacity:1}
}
/* ===== V64 3-DOT INTERACTION FIX ===== */
#chatList .message{
position:relative!important;
overflow:visible!important;
}
#chatList .v63-chat-actions{
pointer-events:auto!important;
z-index:80!important;
}
#chatList .v63-more{
pointer-events:auto!important;
position:relative!important;
z-index:82!important;
}
#chatList .v63-menu{
pointer-events:auto!important;
z-index:999!important;
}
#chatList .message.v63-menu-open{
z-index:90!important;
}
/* ===== V65 ACTUAL CHAT MENU ===== */
#chatList .message{
position:relative!important;
overflow:visible!important;
}
#chatList .message-actions{
position:relative!important;
z-index:80!important;
cursor:pointer!important;
pointer-events:auto!important;
}
#chatList .v65-menu{
position:absolute;
right:4px;
top:31px;
z-index:999;
display:none;
width:138px;
padding:5px;
border-radius:9px;
background:#0b0e12;
border:1px solid rgba(255,255,255,.07);
box-shadow:0 14px 30px rgba(0,0,0,.45);
}
#chatList .message.v65-menu-open{
z-index:100!important;
}
#chatList .message.v65-menu-open .v65-menu{
display:block!important;
}
.v65-reply-action{
width:100%!important;
height:30px!important;
padding:0 8px!important;
display:flex!important;
align-items:center!important;
gap:7px!important;
border:0!important;
border-radius:7px!important;
background:transparent!important;
color:#b8bdc5!important;
font-size:8px!important;
text-align:left!important;
}
.v65-reply-action:hover{
color:#fff!important;
background:rgba(255,52,77,.08)!important;
}
.v65-menu-sep{
height:1px;
margin:4px 2px;
background:rgba(255,255,255,.05);
}
.v65-menu-reactions{
display:flex;
gap:3px;
}
.v65-menu-reactions button{
width:29px!important;
min-width:29px!important;
height:29px!important;
padding:0!important;
display:grid!important;
place-items:center!important;
border:0!important;
border-radius:7px!important;
background:transparent!important;
font-size:13px!important;
}
.v65-menu-reactions button:hover{
background:rgba(255,255,255,.055)!important;
}
.v65-reply-preview{
display:grid;
gap:2px;
margin:3px 0 5px;
padding:5px 7px;
border-left:2px solid #a92236;
background:rgba(255,255,255,.02);
border-radius:0 6px 6px 0;
}
.v65-reply-preview strong{font-size:7px;color:#b94b5d}
.v65-reply-preview span{
font-size:7px;color:#656b73;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.v65-reactions{
display:flex;
gap:3px;
flex-wrap:wrap;
margin-top:4px;
}
.v65-reaction{
height:20px!important;
padding:0 6px!important;
border-radius:999px!important;
border:1px solid rgba(255,255,255,.05)!important;
background:#0d1014!important;
color:#a5a9b0!important;
font-size:9px!important;
}
.v65-reaction b{font-size:7px;color:#656b73}
#v61ReplyBar{display:none!important}
#v61ReplyBar.open{display:flex!important}
/* ===== V67 BIG WIN LIVE BOT ===== */
#chatList .message.live-bigwin-message{
margin:7px 0;
padding:9px 8px!important;
border:1px solid rgba(255,42,67,.24)!important;
border-radius:10px;
background:linear-gradient(135deg,rgba(30,8,12,.98),rgba(10,10,12,.98));
box-shadow:0 8px 24px rgba(0,0,0,.24), inset 0 0 20px rgba(255,30,55,.035);
}
.live-bigwin-avatar{
background:linear-gradient(145deg,#ff2748,#660612)!important;
border:1px solid rgba(255,82,105,.55)!important;
color:#fff!important;
font-size:14px!important;
box-shadow:0 0 18px rgba(255,32,62,.25);
}
.live-bigwin-name{color:#fff!important;letter-spacing:.04em}
.live-bigwin-badge{
display:inline-flex;align-items:center;height:15px;padding:0 5px;border-radius:5px;
border:1px solid rgba(255,65,90,.30);background:rgba(255,32,60,.10);
color:#ff5e75;font-size:6px;font-weight:900;letter-spacing:.08em
}
.live-bigwin-text{
margin-top:5px!important;padding:8px 9px!important;
border:1px solid rgba(255,58,82,.16)!important;border-radius:7px;
background:rgba(255,255,255,.025)!important;color:#f0f0f2!important;
font-weight:800;
}