html, body { 
	margin:0px; 
    padding:0px; 
	height: 100%; 
	cursor:default;
	
	background-color:#DC143C;

    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */	
	
	overflow:hidden;
	position:relative;

	/* SCREEN RESOLUTION: 1536 x 896 */
	
}

.trans-delay1{ animation-delay: .3s; }
.trans-delay2{ animation-delay: .4s; }
.trans-delay3{ animation-delay: .5s; }
.trans-delay4{ animation-delay: .6s; }
.trans-delay5{ animation-delay: .7s; }

/* PAGE: MAIN */
.guide-container{
	position: absolute;
	top:50%;
	left:50%;
	z-index:9999;

	width:1536px;
	height:896px;

	margin-left:-768px;
	margin-top:-448px;

	border:1px solid red;
}
.history-container{
	position: absolute;
	top:0px;
	right:-520px;
	width:500px;
	height:100vh;
	z-index: 9000;
	
	padding:10px;
	background-color:rgba(255,255,255,.7);
	
	font-family: "Roboto-Regular";
}
.history-container > .title{ 
	font-family: "Roboto-SemiBold"; 
	font-size:24px; 
	color:#333333; 
	padding-bottom:10px;
	border-bottom:1px solid rgba(0,0,0,.3);
	margin-bottom:5px;
}
.history-container > .records-list{
	/* height: calc(100vh - 50px); */
	display: flex;
	flex-wrap: wrap;
	gap:4px;
	/* overflow: auto; */
	margin-bottom:10px;
}
.history-container > .records-list > .record-box{
	width:160px;
	height:30px;
	display: flex;	
	font-weight: bold;
}
.history-container > .records-list > .record-box > .queue-number{
	width:60px;
	height:30px;
	line-height: 20px;
	background-color:#c1aa5a;
	color:#FFF;
	text-align: center;
	display: flex;
    justify-content: center;
    align-items: center;
}
.history-container > .records-list > .record-box > .luckydraw-number{
	width:100px;
	height:30px;
	line-height: 30px;
	background-color:#FFF;
	border:1px solid #c1aa5a;
	color:#c1aa5a;
	text-align: center;
}

.splash-container{
	position: absolute;
	width:100vw;
	height:100vh;
	top:0px;
	left:0px;
	z-index: 8000;
}
.splash-container > div{ 
	position:relative;
	
	width:100vw;
	height:100vh;
}
.splash-container > div > .logo-container{
	position:absolute;
	z-index: 9003;

	width:621px;
	height:620px;

	top:50%;
	left:50%;
	margin-top: -310.5px;
	margin-left: -310px;

}
.splash-container > div > .logo-container > div{
	margin:0px auto;
	width:621px;
	height:620px;

	position:relative;
}
.splash-container > div > .logo-container > div > .logo{
	margin:0px auto;
	width:621px;
	height:620px;
	
	border-radius:50%;

	background-image:url('/images/logo.png?v=2'); 
	background-position:center center;
	background-size:cover;	

	
}

.splash-container > div > .greenleaf-left{
	position:absolute;
	z-index:9001;

	width:1400px;
	height:2300px;

	top:-700px;
	left: -150px;
	
	background-image:url('/images/leaf.png?v=1'); 
	background-position:center center;
	background-size:cover;	

	filter: brightness(25%);
	transform: rotate(55deg);
}
.splash-container > div > .greenleaf-left.animate-left{ animation:greenleaf_out_left ease-in-out 3s forwards; }

.splash-container > div > .greenleaf-right{
	position:absolute;
	z-index:9002;
	
	width:1400px;
	height:2300px;

	top:-550px;
	right: -355px;	
	
	background-image:url('/images/leaf.png?v=1'); 
	background-position:center center;
	background-size:cover;	
	
	filter: brightness(30%);
	transform: rotate(-115deg);
}
.splash-container > div > .greenleaf-right.animate-right{ animation:greenleaf_out_right ease-in-out 3s forwards; }

.main-container{
	margin:0px auto;
	width:min(890px, 100vw);
	height:100vh;
	display:flex;
	justify-content: center;
	align-items: center;
}
.machine-stage{
	position: fixed;
	inset: 0;
	z-index: 5000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease;
	background:
		radial-gradient(circle at 15% 15%, rgba(255, 215, 0, 0.18), transparent 40%),
		radial-gradient(circle at 85% 20%, rgba(220, 20, 60, 0.16), transparent 45%),
		linear-gradient(180deg, var(--theme-bg-top, #049CD8) 0%, var(--theme-bg-mid, #bfe7ff) 55%, var(--theme-bg-bottom, #e8fbff) 100%);
}
.machine-stage.visible{
	opacity: 1;
	pointer-events: auto;
}
.machine-stage > .machine-frame{
	width:100%;
	height:100%;
	border:0;
	display:block;
}
@media (prefers-reduced-motion: reduce){
	.machine-stage{ transition: none; }
}
.main-container > .luckydraw-container{ width:100%; }
.main-container > .luckydraw-container > .title{
	display:none;
}
.main-container > .luckydraw-container > .luckydraw-box{
	width:100%;
	min-height:120px;
	padding:14px 16px;
	margin-bottom:20px;
	border-radius:14px;
	overflow: hidden;
	display:flex;
	align-items:center;
	gap:16px;
	
	background-color: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.25);

	opacity:0;
}
.main-container > .luckydraw-container > .luckydraw-box.shown{ opacity: 1; }
.main-container > .luckydraw-container > .luckydraw-box > .arrow-right-1{ 
	width: 0; 
	height: 0; 
	/* 
	border-top: 65px solid #c1aa5a;
	border-bottom: 65px solid #c1aa5a; 
	border-left: 20px solid transparent;
	*/
	border-top: 65px solid transparent;
	border-bottom: 65px solid transparent;
	border-left: 40px solid transparent;
	
}
.main-container > .luckydraw-container > .luckydraw-box > .arrow-right-2{ 
	width: 0; 
	height: 0; 
	/*
	border-top: 65px solid #FFF;
	border-bottom: 65px solid #FFF;
	border-left: 20px solid #c1aa5a;
	*/
	
	border-top: 65px solid transparent;
	border-bottom: 65px solid transparent;
	border-left: 50px solid transparent;
	
}
.main-container > .luckydraw-container > .luckydraw-box > .arrow-right-3{ 
	width: 0; 
	height: 0; 
	/*
	border-top: 65px solid transparent;
	border-bottom: 65px solid transparent;	
	border-left: 20px solid #FFF;
	*/
	
	border-top: 65px solid transparent;
	border-bottom: 65px solid transparent;
	border-left: 40px solid transparent;
}
.main-container > .luckydraw-container > .luckydraw-box > .queue-number{ 
	width: 160px; 
	height:92px; 
	background-color: rgba(0, 0, 0, 0.25);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 12px;
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 4px;
	font-family: 'Luckiest_Guy';
	font-size:56px;
	color:#FFFFFF;
}
.main-container > .luckydraw-container > .luckydraw-box > .queue-number > .prize-amount{
	font-family: "Roboto-SemiBold";
	font-size:16px;
	line-height:16px;
	color: rgba(255, 255, 255, 0.95);
	margin-top:-6px;
}
.main-container > .luckydraw-container > .luckydraw-box > .queue-number > div{
	display:flex;
	gap:2px;
} 
.main-container > .luckydraw-container > .luckydraw-box > .queue-number > div > div{ 
	font-size:24px;
	margin-top:10px;
}

.main-container > .luckydraw-container > .luckydraw-box > .luckynumber-container{ 
	flex: 1;
	height:92px; 	
	background-color:transparent;
	
	display:flex;
	justify-content: center;
	align-items: center;
	gap:12px;

	position:relative;
}

.slotwrapper, .slotwrapper-x {
    overflow: hidden;
    display: inline-block;
    height: 92px;
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 12px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);

	/* font-family: "Michroma"; */
	font-family: "Roboto-SemiBold";
	font-size:72px;
    line-height: 92px;
	color:#111111;
}
.slotwrapper ul, .slotwrapper-x ul {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
    float: left;
}
.slotwrapper ul, .slotwrapper-x ul {
    /* width: 100px; */
    width: 72px;
    height:92px;
    text-align: center;
}