.topbar{
  position:fixed;
  top:0;
  left:0;
  right: 55px;
  height:84px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:28px;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(12px);
  z-index:9999;
  border-bottom:1px solid rgba(180,80,255,.25);
  font-size:20px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
}
.up{color:#49ff78;font-weight:900;}
.down{color:#ff4b4b;font-weight:900;}

.ticker{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:34px;
  overflow:hidden;
  background:rgba(10,0,20,.82);
  border-bottom:1px solid rgba(180,80,255,.18);
  z-index:9999;
  display:flex;
  align-items:center;
}

.ticker-content{
  white-space:nowrap;
  display:inline-block;
  padding-left:0;
  animation:dvijTicker 26s linear infinite;
  font-size:18px;
  font-weight:800;
}

@keyframes dvijTicker{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

.promoBanner{
  margin-top: 620px;
  min-height:420px;
  border-radius:28px;
  background:linear-gradient(180deg,rgba(255,180,30,.20),rgba(80,0,130,.18));
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight:900;
  opacity:.9;
}

.vyroxImagePlaceholder{
  min-height:900px;
  border-radius:28px;
  background:linear-gradient(180deg,rgba(120,30,255,.24),rgba(0,0,0,.20));
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  letter-spacing:.08em;
  opacity:.9;
}

.vyroxText{
  margin:18px 0 12px;
  text-align:center;
  font-size:24px;
  font-weight:900;
}

.layout{
  grid-template-columns:420px minmax(520px,1fr) 420px !important;
  gap:18px !important;
}

.coinSlot{
  width:160px;
  height:160px;
  border-radius:50%;
  margin:18px auto 18px;
  background:radial-gradient(circle,#ffd200,#b87900);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight:900;
}

.promoBanner{
  margin-top:24px !important;
  height:560px !important;
  border-radius:42px !important;
  background:linear-gradient(180deg,rgba(255,160,0,.20),rgba(40,0,70,.18)) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  font-weight:900 !important;
}

.vyroxImagePlaceholder{
  height:760px !important;
  border-radius:28px !important;
  background:linear-gradient(180deg,rgba(120,30,255,.28),rgba(0,0,0,.15)) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-weight:900 !important;
}

.vyroxText{
  margin:18px 0 12px !important;
  text-align:center !important;
  font-size:24px !important;
  font-weight:900 !important;
}

.layout{
  grid-template-columns:520px minmax(520px,1fr) 420px !important;
  gap:24px !important;
}

.panel{
  padding:0 !important;
  background:transparent !important;
  border:none !important;
}

.leftZone{
  position:relative;
  min-height:900px;
  padding:0 0 0 0;
}

.youtubeBtn{
  width:150px !important;
  margin:0 0 14px 0 !important;
}

.coinSlot{
  position:absolute !important;
  top:18px !important;
  right:95px !important;
  width:170px !important;
  height:170px !important;
  border-radius:50% !important;
  background:radial-gradient(circle,#ffd200,#b87900) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-weight:900 !important;
  text-align:center !important;
}

.gameButtons{
  width:150px;
  margin-top:14px;
}

.promoBanner{
  margin-top:90px !important;
  width:480px !important;
  height:480px !important;
  border-radius:60px !important;
  background:linear-gradient(180deg,rgba(255,160,0,.18),rgba(40,0,70,.12)) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#ff9d00 !important;
  font-weight:900 !important;
  text-align:center !important;
}

.rightZone{
  position:relative;
  min-height:900px;
}

.vyroxImagePlaceholder{
  width:360px !important;
  height:760px !important;
  margin-left:auto !important;
  border-radius:0 !important;
  background:linear-gradient(180deg,rgba(120,30,255,.20),rgba(0,0,0,.10)) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-weight:900 !important;
}

.vyroxText{
  margin:18px 0 12px auto !important;
  width:360px !important;
  text-align:center !important;
  font-size:22px !important;
  font-weight:900 !important;
}

.rightZone .btn{
  width:360px !important;
  margin-left:auto !important;
}


.coinSlot{
display:flex;
justify-content:center;
margin:18px 0;
}

.coinSlot img,
.coinSlot{
width:140px;
height:140px;
margin-left:auto;
margin-right:auto;
}

.rightBackground .btn{
width:auto!important;
display:inline-block!important;
padding:10px 22px!important;
}

.rightBackground{
text-align:center;
}

.leftBackground{
  position:relative !important;
  min-height:900px !important;
}

.coinSlot{
  position:absolute !important;
  top:26px !important;
  left:250px !important;
  width:150px !important;
  height:150px !important;
  margin:0 !important;
  z-index:5 !important;
}

.rightBackground .coinSlot{
  display:none !important;
}

.rightBackground .btn{
  width:auto !important;
  min-width:0 !important;
  max-width:max-content !important;
  display:inline-block !important;
  padding:10px 18px !important;
}

.rightBackground{
  position:relative !important;
  min-height:900px !important;
  background:transparent !important;
  text-align:center !important;
}

.vyroxCharacter{
  width:390px !important;
  max-height:780px !important;
  object-fit:contain !important;
  display:block !important;
  margin:0 auto !important;
  border:none !important;
  background:transparent !important;
}

.openChatBtn{
  width:auto !important;
  display:inline-block !important;
  padding:10px 22px !important;
}

.coinImage{
position:absolute;
left:250px;
top:20px;
width:170px;
z-index:20;
}

.promoImage{
position:absolute;
left:0;
top:220px;
width:520px;
z-index:10;
}

.vyroxCharacter{
position:absolute;
right:-40px;
top:20px;
width:620px;
z-index:10;
}


/* VYROX RIGHT SIDE */

.vyroxFloating{
position:fixed;
right:0;
top:90px;
width:420px;
height:auto;
z-index:50;
pointer-events:none;
}

.vyroxFloating img{
width:100%;
height:auto;
display:block;
}

.vyroxUi{
position:fixed;
right:180px;
top:210px;
z-index:60;
text-align:center;
}

.vyroxText{
font-size:28px;
font-weight:900;
color:white;
text-shadow:0 0 12px #b84dff;
margin-bottom:12px;
}

.vyroxBtn{
display:inline-block;
padding:10px 18px;
border-radius:14px;
background:linear-gradient(90deg,#8a2cff,#ff4fd8);
color:white;
font-weight:900;
text-decoration:none;
}




/* VYROX CHAT ONE CLEAN LAYOUT */
.chatWrap{
  position: fixed !important;
  right: 55px !important;
  top: 610px !important;
  width: 360px !important;
  z-index: 50 !important;
}

.chatInputRow{
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}

.chatLog{
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-height: 300px !important;
  max-height: none !important;
  overflow: visible !important;
}

.chatLine{
  font-size: 13px !important;
  line-height: 1.35 !important;
  color: white !important;
  background: transparent !important;
  margin: 0 0 6px 0 !important;
}
