@font-face { font-family:fr; src: url('assets/fonts/FRADMCN.TTF');}
@font-face { font-family:grunge; src: url('assets/fonts/Grunge.ttf'); }
@font-face { font-family:agency; src: url('assets/fonts/AGENCYB.TTF');}
@font-face { font-family:berlin; src: url('assets/fonts/BRLNSDB.TTF'); }

* { -webkit-appearance: none; appearance: none; -webkit-user-select: none; user-select: none; }

html { padding:0; margin:0; width:100vw; height:100vh; overflow:hidden; background-color:black; overscroll-behavior:none; }

body { position:fixed; width:100vw; height:100vh; padding:0; margin:0; background-color:black; overflow:hidden;
	font-family:fr; color:white; font-size:30px; overscroll-behavior:none;}

@media screen and (orientation:landscape) {
	#dopewarslive { display:none; }
	#wrongway { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); height:70%; }
}

@media screen and (orientation:portrait) {
#wrongway { display:none; }
#dopewarslive { position:absolute; height:100%; width:100%; max-width:57vh; background-color:black; }

#mainDiv { position:relative; width:100%; height:100%; text-align:center; background-image: url('assets/splash.jpg'); background-size:cover; }
#snowDiv { display:none; position:absolute; height:100%; width:100%; }
#snowDiv img { position:relative; width:100%; opacity:.5; }
#logoDiv { position:relative; width:100%; text-align:center; padding-top:15px; }
#logo {width:95%;}

#eventDiv {position:relative; width:100%; height:65px; margin-top:10px; padding-top:5px; background:rgba(0,0,0,0.6); border-top:2px solid black; border-bottom:2px solid black; }
#eventlabel {display:block;line-height:30px; font-size:30px; color:#aaa; text-align:left; padding-left:5%;}
#eventinfo {float:right; line-height:30px; font-size:24px; text-align:right; padding-right:5px; }
#eventtime {float:right; width:20%; line-height:30px; font-size:24px; text-align:center; padding-right:5%; }
#notifybtn { display:none; float:right; margin-right:5%;  background:rgba(0,0,0,0.6);}
#joinbtn { display:none; float:right; margin-right:5%; margin-top:10px; color:cyan; border-color:cyan; box-shadow: 0 0 15px 5px cyan;}

#dudeDiv {position:absolute; bottom:0; left:0; height:70%; text-align:left;}
#dude {height:100%;}
#santahat { display:none; position:absolute; bottom:87.2%; left:3.5%; height: 14%; rotate:-26deg; }
#smoke {position:absolute; bottom:83%; left:65%; height:15%;}
#bubble { position:absolute; z-index:50; display:none; left:34%; top:38%; width:55%; height:34%; padding:10px 8px; background:white; color:black; text-align:center; border-radius:20px; border:4px solid black; font-family:agency; font-size:24px;}
#bubble span {font-size:20px; border:4px solid black; border-radius:10px; padding:6px 24px; font-family:grunge;}
#install { position:absolute; z-index:50; display:none; left:34%; top:80%; width:57%; background:white; border-radius:20px; border:4px solid black; }
#install img {width:100%; border-radius:20px;}

#badge { position:absolute; right:5%; bottom:30%; height:50px; transform:translateY(-120px); cursor:pointer; }
#badge img { display:none; height:100%; }
#maininfo { position:absolute; right:5%; bottom:30%; height:40px; cursor:pointer; }
#maininfo img {height:100%; filter:drop-shadow(0 0 5px black); }
#share { position:absolute; right:5%; bottom:30%; height:40px; transform:translateY(-60px); cursor:pointer; }
#share img { height:100%; filter:drop-shadow(0 0 5px black); }
#ldbd { position:absolute; display:flex; justify-content:flex-end; right:4%; bottom:15%; width:100px; height:58px; cursor:pointer; }
#ldbdimg { position:relative; height:100%; width:60px;} #ldbdimg img { position:absolute; height:65%; right:0; bottom:0; right:10%; }
#mainmill { display:none; position:relative; height:100%; width:60px; }
#solobtn { position:absolute; right:5%; bottom:5%; }
#marquee { position:absolute; bottom:26%; height:22px; left:0; color:#aaa; white-space:nowrap; animation:mscroll 30s linear infinite; }
.mscore { display:inline-block; margin-right:10%; height:100%; font-family:agency; font-size:22px; font-style:italic; text-shadow:black 0 0 5px; }
@keyframes mscroll { 0% { transform: translateX(100vw); } 100% { transform: translateX(-200%);  } }


#travelDiv { position:relative; width:100%; height:100%; text-align:center; background-size:cover; }
#travday { position:absolute; width:120px; height:58px; bottom:20px; left:10px; line-height:58px; font-size:20px;
	font-family:grunge; background:black; border-radius:8px;}
#travelback { position:absolute; left:10px; top:10px; color:#ddd; border-color:#ddd; background:rgba(0,0,0,0.5); }
.stop { position:absolute; height:32px; width:130px; background:#09693d; line-height:32px; font-family:grunge; font-size:14px; border-top:2px solid white; border-bottom:2px solid white; text-align:center; cursor:pointer; }
.featicon { position:absolute; height:36px; }
.featicon img {height:100%; }



#hoodDiv { position:relative; width:100%; height:100%; text-align:center; background-size:cover; }
#hoodbackground { position:absolute; height:100%; left:50%; transform:translateX(-50%); }
#cache { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); transition:opacity 0.7s; -webkit-transition:opacity 0.7s;}
#hoodchart { position:absolute; width:100%; height:30%; left:0; bottom:50%; transform:translateY(44%); }
#accounts { position:absolute; width:100%; height:62px; font-family:agency; line-height:26px; font-size:26px; background:rgba(0,0,0,0.5); border-top:4px solid white; border-bottom:2px solid white;}
#accleft { float:left; width:50%; height:60px; margin-top:4px;}
#cashtxt { height:26px; text-align:left; padding-left:10px; }
#cash { height:26px; text-align:left; padding-left:10px; }
#accright { float:right; width:50%; height:60px; margin-top:4px; }
#bank { height:26px; color:cyan; text-align:right; padding-right:10px; }
#debt { height:26px; color:red; text-align:right; padding-right:10px; }

#drugpanel { display:flex; position:absolute; width:100%; height:66%; top:11%; line-height:40px; font-family:agency; font-size:25px; overflow-y:scroll;}
#drugpanel::-webkit-scrollbar { display: none; }
#qtties { float:left; width:21%; margin:auto; text-align:right; padding-right:12%; }
#drugs { float:left; width:30%; margin:auto; text-align:left; font-family:grunge; font-size:13px; cursor:pointer; }
#prices { float:right; width:25%; margin:auto; padding-right:12%; text-align:right; }
.clickdivs { width:100%; height:40px; cursor:pointer; text-decoration:none; }

#coat { position:absolute; width:100%; height:55px; top:77%; line-height:55px; font-size:25px; font-family:agency; }
#jacket { position:absolute; left:12%; height:100%; transform:rotate(-7deg); }
#pockets { position:absolute; width:15%; left:12%; font-size:28px; text-align:center; cursor:pointer; }
#pockettext { position:absolute; left:28%; color:#aaa; text-align:left; }
/* #jacketdiv { position:absolute; left:15%; height:100%; width:55px; text-align:center; }
#jacket { position:absolute; left:0%; transform:translateX(-50%); height:100%; transform:rotate(-7deg); cursor:pointer; }
#pockets { position:absolute; left:0; font-size:28px; width:100%; }
#pockettext { position:absolute; left:28%; color:#aaa; text-align:left; } */

#hoodname { position:absolute; width:100%; height:80px; bottom:50%; transform:translateY(50%); line-height:80px; font-family:grunge; font-size:36px; filter:drop-shadow(0 0 8px black); transition:opacity 0.7s; -webkit-transition:opacity 0.7s; }
#navbar { position:absolute; width:100%; height:50px; bottom:3%; background:rgba(0,0,0,0.5);
	border-top:4px solid white; border-bottom:4px solid white; line-height:50px; font-size:20px; font-family:grunge;}
#hoodday { position:absolute; left:4%; }
#feature { position:absolute; height:45px; left:50%; bottom:50%; transform:translate(-50%,50%); }
#featimg { height:100%; }
#move { position:absolute; right:0; padding-right:7%; cursor:pointer; }
#arrow { position:absolute; right:1%; height:60%; bottom:50%; transform:translateY(46%);  }



#gameover { position:relative; width:100%; height:100%; text-align:center; background-image: url('assets/splash.jpg'); background-size:cover; font-family:agency;}
#gocache { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6);}
#gologo { position:relative; width:100%; text-align:center; padding-top:15px; }
#gologo img { width:95%; }
#goname { position:relative; width:100%; margin-top:22px; font-family:grunge; font-size:24px; }
#goscorebar { position:relative; width:100%; margin-top:3%; }
#goscore { position:relative; width:100%; font-size:40px; color:cyan; }
#gomill { position:absolute; right:18%; bottom:0; height:50px; transform:rotate(12deg); }
#gotext { position:relative; width:80%; height:35%; margin-top:5%; line-height:28px; font-size:24px; padding-left:10%; padding-right:10%; overflow-y:scroll;}
#gochart { position:absolute; bottom:15%; left:5%; width:90%; height:120px; }
#gobtn { position:absolute; bottom:5%; left:50%; transform:translateX(-50%);}
#goshare { display:block; position:absolute; bottom:5%; right:12%; height:40px; transform:translateY(-10px); cursor:pointer; }
#goshare img {height:100%;}



#ldbdDiv { position:relative; width:100%; height:100%; top:0; left:0; text-align:center; background-image: url('assets/splash.jpg'); background-size:cover; font-family:agency;}
#ldbdcache { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6);}
#ldbdplayerdiv { display:none; position:absolute; width:100%; top:20px; }
#ldbdnamebar { position:relative; width:100%; height:60px; top:0; left:0; background:rgba(0,0,0,0.5); line-height:60px; border-top:3px solid white; border-bottom:3px solid white; }
#ldbdmill { position:absolute; right:40px; bottom:1px; height:72px; transform: rotate(12deg); }
#ldbdname { position:relative; width:100%; top:1px; font-family:grunge; font-size:24px; cursor:pointer; }
#ldbdsettings { position:absolute; left:10px; bottom:15px; height:30px; cursor:pointer; }
#ldbdhidiv { position:relative; width:100%; margin-top:5%; }
#ldbdhi { width:100%; font-size:36px; line-height:36px; color:yellow;  }
#ldbdhidate { position:absolute; top:1px; right:10%; font-size:14px; color:darkgrey; }
#ldbdlist { position:relative; width:80%; height:18%; margin-top:4%; line-height:24px; font-size:20px; padding-left:10%; padding-right:10%; color:silver;}
#ldbdcred { position:relative; width:100%; font-size:36px; line-height:36px; margin-top:10%; color:cyan; }
#ldbdawards { position:relative; display:flex; gap:2%; justify-content:center; width:100%; font-size:20px; margin-top:3%; }
.aw { width:18%; } .aw img { width:100%; }
.eoy { width:50%; } .eoy img { width:100%; }
#ldbdlastweekdiv { display:none; position:absolute; width:100%; height:55%; }
#ldbdlastweekname { position:relative; width:100%; left:0; margin-top:20px; font-family:grunge; font-size:36px; color:yellow; }
#ldbdlastweekscore { position:relative; font-size:42px; color:white; margin-top:3%; }
#ldbdlastweekrays { position:absolute; left:50%; top:180px; height:60vw; }
#ldbdlastweekrewardcontainer { position:absolute; display:flex; justify-content:center; align-items:center; width:40%; height:100%; left:50%; top:200px; transform:translateX(-50%); }
#ldbdlastweekreward { position:absolute; width:100%; height:100%; left:0; top:0; transform-style:preserve-3d; }
#ldbdlastweekreward img { position:absolute; top:0; left:0; width:100%; backface-visibility: hidden; }
.back { transform: rotateY(180deg); }
.spinclass { animation:spin 0.7s ease-out; }
@keyframes spin { 0% { transform:rotateY(-180deg); } 100% { transform:rotateY(720deg); }  }
#ldbdlastweekallrewards { display:none; position:absolute; width:100%; left:0; top:180px; }
#tri2 { position:absolute; width:30%; top:0; left:28%; transform:translateX(-50%) rotate(-20deg); }
#tri3 { position:absolute; width:30%; top:-20px; left:50%; transform:translateX(-50%); }
#tri4 { position:absolute; width:30%; top:0; left:72%; transform:translateX(-50%) rotate(20deg); }
#ldbdweekdiv { position:absolute; width:100%; height:26%; left:0; bottom:8%; transform:translateY(-50px); overflow:hidden; }
#ldbdweek { position:relative; width:68%; left:15%; padding-left:2%; text-align:left; background:rgba(0,0,0,0.5); font-size:32px; line-height:44px; color:cyan; border-top:2px solid white; border-bottom:2px solid white;}
#ldbdweek img { position:absolute; height:70%; right:2%; top:10%; }
#ldbdweek1 { position:relative; width:100%; height:24px; margin-top:4px; line-height:24px;}
#ldbdweek1card { position:absolute; height:36px; left:8%; top:-10%; transform:rotate(-12deg);}
#ldbdweek1card img { height:100%; }
#ldbdweektbl1 { width:100%; height:100%; color:yellow; font-size:24px; }
#ldbdweeklist { position:relative; width:100%; height:calc(100% - 80px); margin-top:4px; line-height:24px; overflow-y:scroll; }
#ldbdweeklist::-webkit-scrollbar { display: none; }
#ldbdweektbl { width:100%; font-size:20px; }
.ldbdtdname { width:50%; padding-left:20%; text-align:left; }
.ldbdtdscore { width:30%;  text-align:right; }
.ldbdtdcred { width:20%; right:0; text-align:center; font-size:16px; color:silver; font-style:italic; }
#ldbdbtn { position:absolute; bottom:4%; left:50%; transform:translateX(-50%); }

#ldbdcartel { position:absolute; width:100%; height:100%; left:0; top:0; }
#ldbdcartelname { position:absolute; width:100%; height:70px; top:20px; left:0; background:rgba(0,0,0,0.5); line-height:70px; border-top:3px solid cyan; border-bottom:3px solid cyan; font-family:grunge; font-size:28px; color:cyan; }
#ldbdcartelplayers { position:absolute; width:100%; height:65%; top:130px; overflow-y:scroll; }
.ldbdcartelplayer { position:relative; width:84%; height:80px; margin-left:8%; margin-bottom:30px; } 
.ldbdcartelplayername { position:absolute; height:50%; left:0; top:0; font-family:grunge; font-size:18px; }
.ldbdcartelplayercred { position:absolute; height:50%; left:0; bottom:5px; font-size:32px; }
.ldbdcartelplayercards { position:absolute; display:flex; gap:3%; justify-content:right; height:100%; width:100%; top:0; right:0; }
.ldbdcartelplayercard { height:100%; color:white; } 
.ldbdcartelplayercardnb { margin-top:-6px; font-size:18px; } .ldbdcartelplayercardnbbig { display:none; font-family:berlin; margin-top:-160%; font-size:46px; color:cyan; }
.ldbdcartelplayercardimg { height:48px; margin-top:0; } .ldbdcartelplayercardimgbig { height:60px; margin-top:2px; }

#infoDiv { position:relative; width:100%; height:100%; text-align:center; background-image: url('assets/splash.jpg'); background-size:cover; font-family:agency;}
#infocache { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6);}
#infologo { position:relative; width:100%; text-align:center; padding-top:15px; }
#infologo img {width:95%;}
#infotxt {position:relative; margin-top:2%; width:86%; height:62%; left:7%; line-height:30px; font-size:24px; overflow-y:scroll; text-align:justify; }
#infoprint { position:absolute; bottom:5%; left:5%; height:100px; border:3px solid white; border-radius:8px; cursor:pointer; background:white; }
#infoprint img {height:100%; border-radius:8px;}
#infotuto { position:absolute; bottom:5%; left:5%; transform:translateX(80px) translateY(-105px) translateY(100%); height:40px; border:3px solid white; font-size:14px; border-radius:8px; color:cyan;}
#infocity { position:absolute; bottom:5%; right:5%; transform:translateX(-70px) translateY(-105px) translateY(100%); height:30px; line-height:30px; font-size:26px; color:cyan; }
#infomore { position:absolute; bottom:5%; left:5%; transform:translateX(80px); border:3px solid white; height:40px; font-size:14px; border-radius:8px; }
#infomail { position:absolute; bottom:5%; right:5%; transform:translateY(-105px) translateY(100%); border:3px solid white; border-radius:6px; height:30px; cursor:pointer; background:white;}
#infomail img {height:100%; border-radius:6px; }
#infohome { position:absolute; bottom:5%; right:5%;}



#scoreDiv { position:relative; width:300px; height:300px; text-align:center; overflow:hidden; font-family:agency;}
#scoreDivimg {position:absolute; width:100%; bottom:-15%; left:0; }
#scorecache { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5);}
#scorelogo { position:relative; width:100%; text-align:center; padding-top:5px; }
#scorelogo img {width:90%;}
#scorename {position:relative; width:100%; margin-top:2%; font-family:grunge; font-size:20px;}
#scorebar { position:relative; width:100%; margin-top:2%; }
#scorescore { position:relative; width:100%; font-size:36px; color:cyan; }
#scoremill { position:absolute; left:14%; bottom:0; height:40px; transform:rotate(-12deg); }
#scorechart { position:absolute; bottom:5%; left:10%; width:80%; height:30%; }



#popupcache { position:absolute; z-index:99; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.9);}

.popup {position:absolute; width:100%; left:0; height:100%; top:0; z-index:99; text-align:center; font-family:agency; font-size:30px; filter:drop-shadow(0 0 1px black); filter:drop-shadow(0 0 4px black); }

#dealpopup {display:none; position:absolute; width:100%; left:0; height:100%; top:0; }
#dealimg { position:absolute; height:100%; left:50%; transform:translateX(-50%); }
#dealbanner { position:absolute; width:100%; height:100px; margin-top:5px; font-family:grunge; font-size:46px; }
#dealsubbanner { position:absolute; width:100%; height:60px; margin-top:105px; font-family:grunge; font-size:36px; }
#dealamount { position:absolute; width:100%; text-align:center; bottom:33%; font-size:60px; }
#dealdelta { position:absolute; width:100%; text-align:center; bottom:24%; font-size:28px; }
#dealslider { position:absolute; width:80%; bottom:30%; left:10%;}
#dealminmax { position:absolute; width:100%; height:30px; bottom:24%; font-size:24px; color:#ccc; }
#dealmin { float:left; padding-left:10%;}
#dealmax { float:right; padding-right:10%;}
#dealcancel { position:absolute; left:10%; bottom:10%; color:#e41414; border-color:red; font-size:14px; }
#dealok { position:absolute; right:10%; bottom:10%;}


#duopopup { display:none; position:absolute; width:70%; left:15%; height:300px; top:50%; transform:translateY(-50%); border:4px solid white; border-radius:16px; background:black; }
#duobanner { position:absolute; width:100%; height:50px; margin-top:10px; line-height:50px; font-family:grunge; font-size:24px;}
#duodelta { position:absolute; width:100%; text-align:center; margin-top:80px; font-size:30px; font-family:agency;}
#duobtn1 { position:absolute; width:70%; left:15%; bottom:100px;}
#duobtn2 { position:absolute; width:70%; left:15%; bottom:20px;}


#dialogpopup { display:none; position:absolute; width:100%; left:0; height:100%; top:0; }
#dialogimg { position:absolute; height:100%; left:50%; transform:translateX(-50%); }
#dialogbanner { position:absolute; width:100%; height:100px; margin-top:10px; font-family:grunge; font-size:46px; }
#dialogtext { position:absolute; display:flex; width:80%; height:50%; left:10%; top:25%; overflow-y:scroll; text-shadow:0 0 8px black; }
#dialoginput { position:absolute; width:80%; left:50%; transform:translateX(-50%); top:30%; height:50px; line-height:50px; background:#222; border:1px solid grey; color:white; font-family:grunge; font-size:24px; text-align:center; caret-color:transparent; cursor:default; }
#dialoginput::placeholder { color:#666; opacity:1; }
#dialogbtn { position:absolute; bottom:8%; left:50%; transform:translateX(-50%); }
#dialogbtn1 { display:none; position:absolute; bottom:8%; left:10%; }
#dialogbtn2 { display:none; position:absolute; bottom:8%; right:10%; }


#tuto { display:none; position:absolute; width:100%; height:40%; top:25%; text-align:center; font-size:50px; font-family:grunge;
		background:#222; border-top:10px solid cyan; border-bottom:10px solid cyan;}
#tutocache { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.2); }
#tutotext { position:absolute; display:flex; width:94%; height:70%; left:3%; top:2%; font-family:agency;
		line-height:26px; font-size:24px; color:white; overflow-y:scroll; }
#tutotext span { margin:auto; }
#tutobtn1 { position:absolute; bottom:10px; left:5%; font-size:18px; cursor:pointer; color:white; }
#tutobtn2 { position:absolute; bottom:10px; right:5%; font-size:18px; cursor:pointer; color:cyan; }
#tutoarrow { display:none; position:absolute; left:40%; bottom:5%; width:60px; }

.millrays { position:absolute; top:50%;left:50%; height:150%; transform:translate(-50%,-45%); }
.millrays img { height:100%; width:auto; animation:turn 20s linear infinite; }
@keyframes turn { 0% {transform:rotate(0deg);} 100% {transform:rotate(359deg);} }
.millward { position:absolute; top:50%;left:50%; transform:translate(-50%,-50%); height:100%; }

.bigbtn { display:table; width:100px; height:50px; border:4px solid white; border-radius:10px; text-align:center; font-size:20px; background:black; cursor:pointer; font-family:grunge;}
.bigbtn span { display:table-cell; vertical-align:middle;}

.slider {
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  background: #aaa;
  outline: none;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px; /* dollar 32x32*/
  height: 36px;
  border: 0;
  background: url('assets/dollarroll.png');
  cursor: pointer;
}
.slider::-moz-range-thumb {
  width: 24px;
  height: 36px;
  border: 0;
  background: url('assets/dollarroll.png');
  cursor: pointer;
}

#bubble::after {
	content: '';
	position: absolute; z-index:50;
	left:10px;
	top: 25%;
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-right-color: white;
	border-left: 0;
	border-top: 0;
	margin-top: -25px;
	margin-left: -50px;
	transform: rotate(8deg);
}

/* bill explosion */
  .bill{
	position: absolute;
	transform-style: preserve-3d;
	will-change: transform;
  }
  .bill::before{
	content:"";
	position:absolute; inset:0;
	background: url("./assets/bill.png") center / cover no-repeat;
	backface-visibility: hidden;
  }
  .bill::after{
	content:"";
	position:absolute; inset:0;
	background: url("./assets/bill.png") center / cover no-repeat;
	transform: rotateY(180deg);
	backface-visibility: hidden;
  }

}