@charset "UTF-8";

#game-container {
	position: absolute;
	width: 100%;
	height: 100%;
	
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	overflow: hidden;

	transition: opacity 200ms ease-out 150ms;
}

body.--intro-section-selector #game-container,
body.--intro-section-confirm #game-container,
body.--screen-game #game-container {
	visibility: visible;
	opacity: 1;
}

#game-container.--ready {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

	/* INPUTS */

#game-container .btn {
	display:inline-flex;
	flex-shrink:0;
	flex-grow:0;
	justify-content:center;
	align-items:center;
	position:relative;
	height:30px;
	min-height:30px;
	min-width:40px;
	/*margin:0px 10px;*/
	padding:10px 10px;
	/*font-family:'Bebas Neue', sans-serif;*/
	font-size:14px;
	font-weight:400;
	letter-spacing:0.1em;
	text-transform:uppercase;
	color:inherit;
	background:lightgrey;
	border:0px;
	border-radius:10px;
	cursor:pointer;
	
	-webkit-appearance:none;
	appearance:none;
	text-decoration:none;
	white-space:nowrap;
	
	transition:color 150ms linear, border 150ms linear, background 150ms linear;
}
#game-container .btn:focus,
#game-container .btn:hover,
#game-container .btn.over {
	background-color:orange;
}



/* GENERAL */

@keyframes fade-in {
	0% { opacity:0; }
	100% { opacity:1; }
}
@keyframes fade-out {
	0% { opacity:1; }
	100% { opacity:0; }
}
@keyframes scale-in {
	0% { transform:scale(.85); }
	100% { transform:scale(1); }
}
@keyframes scale-out {
	0% { transform:scale(1); }
	100% { transform:scale(.75); }
}

.hit {
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	z-index:2;
	cursor:pointer;
}
.hit:focus {
	outline-offset:10px;
}



/* BACKGROUND */

#game-container #bg {
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	z-index:0;
	
	overflow:hidden;
}
#game-container #bg .el {
	position:absolute;
	width:100%;
	height:100%;

	background-size:contain;
	background-repeat:repeat-x;
	transition:background-position-x 750ms ease-in-out, background-position-y 750ms ease-in-out;
	z-index:1;
}

#game-container.reset #bg .el {
	transition:none !important;
}
#game-container .moving-camera #bg .el {
	transition:background-position ease-in-out 4000ms;
}
#game-container .moving-camera-b #bg .el {
	transition:background-position ease-in-out 1500ms;
}
#game-container .moving-camera-c #bg .el {
	transition:background-position ease-in-out 2500ms;
}
#game-container .moving-camera-1 #bg .el {
	transition:background-position ease-in 2000ms;
}
#game-container .moving-camera-2 #bg .el {
	transition:background-position ease-out 2000ms;
}


#game-container:not(.board-init) #bg {
	opacity:0;
}
#game-container.board-init #bg {
	opacity:1;
	animation:fade-in ease-out 1500ms;
}
#game-container #bg.in-reset {
	animation:fade-out ease-in 800ms;
	opacity:0;
}


#game-container[data-theme="pickleball"] #bg {
	background-color:#041239;
}
#game-container[data-theme="pickleball"] #bg .el {
	background-image:url('img/gameboard/pickleball-bg.jpg');
	background-size:1034px 400px;
}

#game-container[data-theme="spirits"] #bg {
	background-color:#303c3d;
}
#game-container[data-theme="spirits"] #bg .el {
	background-image:url('img/gameboard/spirits-bg.jpg');
	background-size:1500px 400px;
}

#game-container[data-theme="boots"] #bg {
	background-color:#4d1d01;
}
#game-container[data-theme="boots"] #bg .el {
	background-image:url('img/gameboard/boots-bg.jpg');
	background-size:2000px 380px;
}

#game-container[data-theme="candy"] #bg {
	background-color:#572076;
}
#game-container[data-theme="candy"] #bg .el {
	background-image:url('img/gameboard/candy-bg.jpg');
	background-size:875px 450px;
}


/* DICE UI */

#game-container .dice-ui {
	display:none;
	position:absolute;
	width:100%;
	height:100%;
	z-index:2;
}
/*#game-container .dice-ui:after {
	content:'';
	width:6px;
	height:6px;
	background-color:red;
	position:absolute;
	top:calc(40vh + 8vw);
	left:50%;
	margin-top:-3px;
	margin-left:-3px;
	z-index:2;
}
@media (orientation:landscape) {
	#game-container .dice-ui:after {
		top:48vh;
	}
}*/
#game-container.on-overview .dice-ui {
	display:block;
}

#game-container #roll-btn {
	display:none;
	position:absolute;
	top:calc((40vh + 8vw) - 200px);
	left:calc(50vw - 200px);
	width:400px;
	height:400px;
	border:0px;
	border-radius:200px;
	
	background:rgba(0,255,255,.3);
	opacity:0;
	
	user-select:none;
	cursor:pointer;
	
	-webkit-tap-highlight-color:transparent;
	pointer-events:auto;
}
@media (orientation:landscape) {
	/*#game-container .dice-ui:after {
		top:48vh;
	}*/
	#game-container #roll-btn {
		top:calc(48vh - 200px);
	}
}
#game-container[data-dice-state="0"] #roll-btn {
	display:block;
}


/* SCENE / BOARD */

.facing-1, .facing-2 {
	position:absolute;
	transform-style:preserve-3d;
	transition:transform ease-in-out 750ms;
}
#game-container.reset .facing-1, #game-container.reset .facing-2 {
	transition:none;
}
#game-container.moving-camera .facing-1, #game-container.moving-camera .facing-2 {
	transition:transform ease-in-out 4000ms;
}
#game-container.moving-camera-b .facing-1, #game-container.moving-camera-b .facing-2 {
	transition:transform ease-in-out 1500ms;
}
#game-container.moving-camera-c .facing-1, #game-container.moving-camera-c .facing-2 {
	transition:transform ease-in-out 2500ms;
}
#game-container.moving-camera-in .facing-1, #game-container.moving-camera-in .facing-2 {
	transition:transform ease-in 2000ms;
}
#game-container.moving-camera-out .facing-1, #game-container.moving-camera-out .facing-2 {
	transition:transform ease-out 2000ms;
}



#game-container #game {
	display:block;
	opacity:0;
	width:100%;
	height:100%;
	
	position:absolute;
	z-index:1;
	overflow:hidden;
	
	perspective:1200px;
	transform-style:preserve-3d;
	transition:bottom ease-in-out 750ms;
}

#game-container.on-overview #game,
#game-container.on-trophy #game,
#game-container.on-closeup #game,
#game-container.on-card #game {
	display:block;
	opacity:1;
}

#game-container:not(.board-init) #game {
	opacity:0;
}
#game-container.board-init #game {
	display:block;
	opacity:1;
	animation:fade-in ease-out 1000ms;
}

#game-container .scene-camera {
	width:2000px;
	height:2000px;
	transform-origin:50% 50%;
	transform:rotate3d(1,0,0,60deg) translate3d(calc((100vw - 2000px) * .5), -1000px, -140px);
	transform-style:preserve-3d;
	transition:transform ease-in-out 750ms;
	pointer-events:none;
}
#game-container.reset .scene-camera {
	transition:none;
}
#game-container.moving-camera .scene-camera {
	transition:transform ease-in-out 4000ms;
}
#game-container.moving-camera-b .scene-camera {
	transition:transform ease-in-out 1500ms;
}
#game-container.moving-camera-c .scene-camera {
	transition:transform ease-in-out 2500ms;
}
#game-container.moving-camera-in .scene-camera {
	transition:transform ease-in 2000ms;
}
#game-container.moving-camera-out .scene-camera {
	transition:transform ease-out 2000ms;
}
#game-container .scene-group {
	position:absolute;
	/*top:150%;*/
	top:0%;
	left:0%;
	width:2000px;
	height:2000px;
	transform-origin:50% 50%;
	transform:rotate3d(0,0,1,50deg);
	transform-style:preserve-3d;
	transition:transform ease-in-out 750ms, top ease-in-out 750ms;
}
#game-container.reset .scene-group {
	transition:none;
}
#game-container.moving-camera .scene-group {
	transition:transform ease-in-out 4000ms, top ease-in-out 4000ms;
}
#game-container.moving-camera-b .scene-group {
	transition:transform ease-in-out 1500ms, top ease-in-out 1500ms;
}
#game-container.moving-camera-c .scene-group {
	transition:transform ease-in-out 2500ms, top ease-in-out 2500ms;
}
#game-container.moving-camera-in .scene-group {
	transition:transform ease-in 2000ms, top ease-in 2000ms;
}
#game-container.moving-camera-out .scene-group {
	transition:transform ease-out 2000ms, top ease-out 2000ms;
}


/* BOARD */

#game-container #board-canvas {
	display:block;
	width:2000px;
	height:2000px;
	position:absolute;
}

#game-container #board-sub-canvas {
	display:block;
	width:2800px;
	height:2800px;
	position:absolute;
	top:-400px;
	left:-400px;
	transform:translateZ(-20px) rotate(45deg);
}

#game-container .scene-group .board-center {
	display:block;
	width:0px;
	height:0px;
	position:absolute;
	top:1000px;
	left:1000px;
	transform-style:preserve-3d;
	
	transform:scale3d(2,2,2);
	
	z-index:1;
}

/* Game board tile markers */
#game-container .scene-group .tile-marker {
	position: absolute;
	width: 0;
	height: 0;
	top: 400px;
	left: 400px;
	transform-origin: 600px 600px;
}

#game-container .scene-group #tile-0  {
	transform: rotate(232.5deg);
}

#game-container .scene-group #tile-1  {
	transform: rotate(247.5deg);
}

#game-container .scene-group #tile-2  {
	transform: rotate(262.5deg);
}

#game-container .scene-group #tile-3  {
	transform: rotate(277.5deg);
}

#game-container .scene-group #tile-4  {
	transform: rotate(292.5deg);
}

#game-container .scene-group #tile-5  {
	transform: rotate(307.5deg);
}

#game-container .scene-group #tile-6  {
	transform: rotate(322.5deg);
}

#game-container .scene-group #tile-7  {
	transform: rotate(337.5deg);
}

#game-container .scene-group #tile-8  {
	transform: rotate(352.5deg);
}

#game-container .scene-group #tile-9  {
	transform: rotate(7.5deg);
}

#game-container .scene-group #tile-10 {
	transform: rotate(22.5deg);
}

#game-container .scene-group #tile-11 {
	transform: rotate(37.5deg);
}

#game-container .scene-group #tile-12 {
	transform: rotate(52.5deg);
}

#game-container .scene-group #tile-13 {
	transform: rotate(67.5deg);
}

#game-container .scene-group #tile-14 {
	transform: rotate(82.5deg);
}

#game-container .scene-group #tile-15 {
	transform: rotate(97.5deg);
}

#game-container .scene-group #tile-16 {
	transform: rotate(112.5deg);
}

#game-container .scene-group #tile-17 {
	transform: rotate(127.5deg);
}

#game-container .scene-group #tile-18 {
	transform: rotate(142.5deg);
}

#game-container .scene-group #tile-19 {
	transform: rotate(157.5deg);
}

#game-container .scene-group #tile-20 {
	transform: rotate(172.5deg);
}

#game-container .scene-group #tile-21 {
	transform: rotate(187.5deg);
}

#game-container .scene-group #tile-22 {
	transform: rotate(202.5deg);
}

#game-container .scene-group #tile-23 {
	transform: rotate(217.5deg);
}


/* PASS-THROUGH EVENTS */

#game-container .event {
	display:block;
	position:absolute;
	top:0px;
	left:0px;
	transform-style:preserve-3d;
	transform:rotate(90deg);
}
#game-container .event._2 {
	transform:rotate(270deg);
}

#game-container .event .or {
	display:block;
	position:absolute;
	top:0px;
	left:0px;
	transform:rotate3d(0,0,1,270deg);
	transform-style:preserve-3d;
}


#game-container .event .line {
	position:absolute;
	top:330px;
	left:12px;
	width:170px;
	height:23px;
	transform:rotate(90deg) translateZ(1px);
	transform-origin:0% 0%;
	background-size:170px 23px;
}


#game-container .event .gate {
	position:absolute;
	transform-origin:0% 100%;
	transform:rotate(90deg) rotateX(-90deg) translateY(10px);
}


#game-container[data-theme="pickleball"] .event .line {
	background-image:url('img/gameboard/pickleball-line.png');
}
#game-container[data-theme="pickleball"] .event .gate {
	top:170px;
	left:0px;
	width:250px;
	height:120px;
	background-image:url('img/gameboard/pickleball-event.png');
	background-size:250px 120px;
}

#game-container[data-theme="spirits"] .event .line {
	background-image:url('img/gameboard/spirits-line.png');
}
#game-container[data-theme="spirits"] .event .gate {
	top:120px;
	left:0px;
	width:250px;
	height:170px;
	background-image:url('img/gameboard/spirits-event.png');
	background-size:250px 170px;
}

#game-container[data-theme="boots"] .event .line {
	background-image:url('img/gameboard/boots-line.png');
}
#game-container[data-theme="boots"] .event .gate {
	top:95px;
	left:0px;
	width:250px;
	height:200px;
	background-image:url('img/gameboard/boots-event.png');
	background-size:250px 200px;
}

#game-container[data-theme="candy"] .event .line {
	background-image:url('img/gameboard/candy-line.png');
}
#game-container[data-theme="candy"] .event .gate {
	top:170px;
	left:0px;
	width:250px;
	height:120px;
	background-image:url('img/gameboard/candy-event.png');
	background-size:250px 120px;
}



/* PAWN (OVERVIEW) */

#game-container .scene-group .pawn-progress {
	transform-style:preserve-3d;
	transform:rotate(0deg);
	transition:transform ease-in-out 675ms;
}
#game-container.reset .scene-group .pawn-progress {
	transition:none;
}

#game-container .pawn {
	display:block;
	position:absolute;
	top:430px;
	left:0px;
	transform-style:preserve-3d;
}

#game-container .pawn .shadow {
	display:block;
	width:100px;
	height:100px;
	position:absolute;
	top:-50px;
	left:-50px;
}
#game-container .pawn .shadow:before {
	content:'';
	display:block;
	width:100%;
	height:100%;
	background-image:url('img/gameboard/shadow-1.png');
	background-size:cover;
	opacity:.8;
}

#game-container .pawn .or {
	display:block;
	position:absolute;
	top:0px;
	left:0px;
	transform:rotate3d(0,0,1,270deg);
	transform-style:preserve-3d;
}

#game-container .pawn .body {
	display:block;
	position:absolute;
	transform:rotate3d(1,0,0,-90deg) translateZ(20px);
	transform-style:preserve-3d;
}

#game-container .pawn .el {
	display:block;
	width:100px;
	height:100px;
	position:absolute;
	top:-100px;
	left:-50px;
	transform-origin:50% 75%;
}


#game-container.on-trophy .pawn .el,
#game-container.on-trophy .pawn .shadow {
	animation:fade-out 750ms ease-in 0s 1 forwards;
}
#game-container.out-trophy .pawn .el,
#game-container.out-trophy .pawn .shadow {
	animation:fade-in 1000ms ease-in 0s 1 forwards;
}

@keyframes pawn-standing-hop-q1 {
	0% { top:-100px; transform:rotate(0deg); }
	25% { top:-160px; transform:rotate(-8deg); }
	40% { top:-180px; }
	60% { transform:rotate(6deg); }
	90% { top:-105px; transform:rotate(4deg); }
	100% { top:-100px; transform:rotate(0deg); }
}
@keyframes pawn-standing-hop-q24 {
	0% { top:-100px; }
	25% { top:-160px; }
	40% { top:-180px; }
	90% { top:-105px; }
	100% { top:-100px; }
}
@keyframes pawn-standing-hop-q3 {
	0% { top:-100px; transform:rotate(0deg); }
	25% { top:-160px; transform:rotate(8deg); }
	40% { top:-180px; }
	60% { transform:rotate(-6deg); }
	90% { top:-105px; transform:rotate(-4deg); }
	100% { top:-100px; transform:rotate(0deg); }
}
@keyframes pawn-hop-shadow {
	0% { opacity:1; transform:scale(1,1); }
	60% { opacity:.6; transform:scale(.8,.8); }
	100% { opacity:1; transform:scale(1,1); }
}

#game-container .pawn.moving .shadow {
	animation:pawn-hop-shadow 675ms ease-in-out;
}

#game-container .pawn[quarter='1'].moving .el {
	animation:pawn-standing-hop-q1 675ms ease-in-out;
}
#game-container .pawn[quarter='2'].moving .el,
#game-container .pawn[quarter='4'].moving .el {
	animation:pawn-standing-hop-q24 675ms ease-in-out;
}
#game-container .pawn[quarter='3'].moving .el {
	animation:pawn-standing-hop-q3 675ms ease-in-out;
}





@keyframes pawn-floating-hop-q1 {
	0% { top:-100px; transform:rotate(0deg); }
	3% { top:-95px; }
	25% { top:-130px; transform:rotate(-5deg); }
	40% { top:-150px; }
	60% { transform:rotate(4deg); }
	80% { top:-92px; }
	90% { transform:rotate(2deg); }
	100% { top:-100px; transform:rotate(0deg); }
}
@keyframes pawn-floating-hop-q24 {
	0% { top:-100px; }
	3% { top:-95px; }
	25% { top:-130px; }
	40% { top:-150px; }
	80% { top:-92px; }
	100% { top:-100px; }
}
@keyframes pawn-floating-hop-q3 {
	0% { top:-100px; transform:rotate(0deg); }
	3% { top:-95px; }
	25% { top:-130px; transform:rotate(5deg); }
	40% { top:-150px; }
	60% { transform:rotate(-4deg); }
	80% { top:-92px; }
	90% { transform:rotate(-2deg); }
	100% { top:-100px; transform:rotate(0deg); }
}


@keyframes pawn-bounce-hop-q1 {
	0% { top:-100px; transform:rotate(0deg); }
	3% { top:-98px; }
	25% { top:-140px; left:-56px; transform:rotate(-5deg); }
	40% { top:-165px; left:-58px; }
	60% { transform:rotate(4deg); }
	85% { top:-100px; left:-52px; }
	90% { top: -105px; transform:rotate(2deg); }
	100% { top:-100px; transform:rotate(0deg); }
}
@keyframes pawn-bounce-hop-q24 {
	0% { top:-100px; }
	3% { top:-98px; }
	25% { top:-140px; }
	40% { top:-165px; }
	85% { top:-100px; }
	90% { top:-105px; }
	100% { top:-100px; }
}
@keyframes pawn-bounce-hop-q3 {
	0% { top:-100px; transform:rotate(0deg); }
	3% { top:-98px; }
	25% { top:-140px; left:-44px; transform:rotate(5deg); }
	40% { top:-165px; left:-42px; }
	60% { transform:rotate(-4deg); }
	85% { top:-100px; left:-48px; }
	90% { top: -105px; transform:rotate(-2deg); }
	100% { top:-100px; transform:rotate(0deg); }
}

#game-container[data-theme="pickleball"] .pawn .el:before {
	content:'';
	position:absolute;
	top:0px;
	width:100px;
	height:100px;
	background-image:url('img/gameboard/pickleball-pawn.png');
	background-size:cover;
}

#game-container[data-theme="pickleball"] .pawn[quarter='1'].moving .el {
	animation:pawn-bounce-hop-q1 675ms ease-in-out;
}
#game-container[data-theme="pickleball"] .pawn[quarter='2'].moving .el,
#game-container[data-theme="pickleball"] .pawn[quarter='4'].moving .el {
	animation:pawn-bounce-hop-q24 675ms ease-in-out;
}
#game-container[data-theme="pickleball"] .pawn[quarter='3'].moving .el {
	animation:pawn-bounce-hop-q3 675ms ease-in-out;
}




@keyframes pawn-squishy-hop-q1 {
	0% { top:-100px; transform:rotate(0deg); }
	5% { top:-90px; transform:scale(1.1,.8); }
	25% { top:-160px; transform:rotate(-2deg); }
	40% { top:-180px; transform:rotate(1deg) scale(.97,1.1); }
	60% { transform:rotate(3deg) scale(.95,1.12); }
	90% { top:-90px; transform:rotate(2deg) scale(1.1,.96); }
	100% { top:-100px; transform:rotate(0deg); }
}
@keyframes pawn-squishy-hop-q24 {
	0% { top:-100px; }
	5% { top:-90px; transform:scale(1.1,.8); }
	25% { top:-160px; }
	40% { top:-180px; transform:scale(.97,1.1); }
	60% { transform:scale(.95,1.12); }
	90% { top:-90px; transform:scale(1.1,.96); }
	100% { top:-100px; }
}
@keyframes pawn-squishy-hop-q3 {
	0% { top:-100px; transform:rotate(0deg); }
	5% { top:-90px; transform:scale(1.1,.8); }
	25% { top:-160px; transform:rotate(2deg); }
	40% { top:-180px; transform:rotate(-1deg) scale(.97,1.1); }
	60% { transform:rotate(-3deg) scale(.95,1.12); }
	90% { top:-90px; transform:rotate(-2deg) scale(1.1,.96); }
	100% { top:-100px; transform:rotate(0deg); }
	
}

#game-container[data-theme="candy"] .closeup-group .pawn .body {
	transform:rotate(180deg);
}
#game-container[data-theme="candy"] .pawn .el:before {
	content:'';
	position:absolute;
	top:-20px;
	left:0px;
	width:100px;
	height:135px;
	background-image:url('img/gameboard/candy-pawn.png');
	background-size:cover;
}

#game-container[data-theme="candy"] .pawn[quarter='1'].moving .el {
	animation:pawn-squishy-hop-q1 675ms ease-in-out;
}
#game-container[data-theme="candy"] .pawn[quarter='2'].moving .el,
#game-container[data-theme="candy"] .pawn[quarter='4'].moving .el {
	animation:pawn-squishy-hop-q24 675ms ease-in-out;
}
#game-container[data-theme="candy"] .pawn[quarter='3'].moving .el {
	animation:pawn-squishy-hop-q3 675ms ease-in-out;
}




@keyframes pawn-gentle-hop-q1 {
	0% { top:-100px; transform:rotate(0deg); }
	25% { top:-160px; transform:rotate(-2deg); }
	40% { top:-180px; }
	60% { transform:rotate(4deg); }
	90% { top:-105px; transform:rotate(2deg); }
	100% { top:-100px; transform:rotate(0deg); }
}
@keyframes pawn-gentle-hop-q3 {
	0% { top:-100px; transform:rotate(0deg); }
	25% { top:-160px; transform:rotate(2deg); }
	40% { top:-180px; }
	60% { transform:rotate(-4deg); }
	90% { top:-105px; transform:rotate(-2deg); }
	100% { top:-100px; transform:rotate(0deg); }
}
#game-container[data-theme="spirits"] .pawn {
	top:450px;
}
#game-container[data-theme="spirits"] .pawn .el:before {
	content:'';
	position:absolute;
	top:-75px;
	left:15px;
	width:70px;
	height:180px;
	background-image:url('img/gameboard/spirits-pawn.png');
	background-size:cover;
}

#game-container[data-theme="spirits"] .pawn[quarter='1'].moving .el {
	animation:pawn-gentle-hop-q1 675ms ease-in-out;
}
#game-container[data-theme="spirits"] .pawn[quarter='3'].moving .el {
	animation:pawn-gentle-hop-q3 675ms ease-in-out;
}





#game-container[data-theme="boots"] .pawn {
	top:450px;
}
#game-container[data-theme="boots"] .pawn .el:before {
	content:'';
	position:absolute;
	left:-15px;
	top:-35px;
	width:120px;
	height:140px;
	background-image:url('img/gameboard/boots-pawn.png');
	background-size:cover;
	transform:scale(-1,1);
}
#game-container[data-theme="boots"] .pawn .shadow:before {
	transform:scale(1.2,.7);
}









/* TROPHY */

#game-container .trophy-wrap {
	display:none;
	position:absolute;
	top:50%;
	left:50%;
	transform-style:preserve-3d;
	z-index:2;
}
#game-container.on-trophy .trophy-wrap {
	display:block;
}

#game-container .trophy {
	position:absolute;
	top:40px;
	left:0px;
}

#game-container .trophy .body {
	display:block;
	position:absolute;
	transform:translateY(0px) scale(.6,.6);
	z-index:1;
}

#game-container .trophy .el {
	display:block;
	width:300px;
	height:300px;
	position:absolute;
	top:-300px;
	left:-150px;
	background-image:url('img/gameboard/trophy-1.png');
	background-size:contain;
	transform-origin:50% 75%;
}

#game-container .trophy.final .el {
	
}


#game-container .trophy .shadow {
	display:none;
	width:0px;
	height:0px;
	position:absolute;
	transform-origin:50% 50%;
	transform:translateY(-20px) scale(.6,.6);
	opacity:0;
}
#game-container .trophy .shadow:before {
	content:'';
	width:200px;
	height:200px;
	position:absolute;
	top:-100px;
	left:-100px;
	background-image:url('img/gameboard/shadow-1.png');
	background-size:100% 100%;
	z-index:0;
}



#game-container[data-theme='pickleball'] .trophy.final .el {
	width:400px;
	height:400px;
	top:-400px;
	left:-200px;
	background-image:url('img/gameboard/pickleball-trophy.png');
}
#game-container[data-theme='pickleball'] .trophy.final .shadow:before {
	transform:scale(1.2,1.2);
}

#game-container[data-theme='spirits'] .trophy.final .el {
	width:226px;
	height:600px;
	top:-590px;
	left:-113px;
	background-image:url('img/gameboard/spirits-trophy.png');
}
#game-container[data-theme='spirits'] .trophy.final .shadow:before {
	transform:scale(1.4,1.4);
}

#game-container[data-theme='boots'] .trophy.final .el {
	width:400px;
	height:470px;
	top:-470px;
	left:-130px;
	background-image:url('img/gameboard/boots-trophy.png');
}
#game-container[data-theme='boots'] .trophy.final .shadow:before {
	left:-70px;
	transform:scale(1.8,.8);
}

#game-container[data-theme='candy'] .trophy.final .el {
	width:400px;
	height:540px;
	top:-510px;
	left:-200px;
	background-image:url('img/gameboard/candy-trophy.png');
}
#game-container[data-theme='candy'] .trophy.final .shadow:before {
	transform:scale(1.6,1.6);
}




@keyframes trophy-reveal-body {
	0% { transform:translateY(-400px) scale(.5,.5); }
	58% { transform:translateY(180px) scale(1.3,1.3); }
	100% { transform:translateY(0px) scale(.6,.6); }
}
@keyframes trophy-reveal-body-el {
	0% { transform:rotateY(-270deg); }
	60% { transform:rotateY(375deg); }
	100% { transform:rotateY(360deg); }
}
@keyframes trophy-reveal-shadow {
	0% { transform:translateY(1800px) scale(.2,.2); opacity:0; }
	30% { transform:translateY(1800px) scale(.2,.2); opacity:0; }
	58% { transform:translateY(150px) scale(1,1); opacity:.6; }
	100% { transform:translateY(-20px) scale(.6,.6); opacity:0; }
}

@keyframes trophy-final-reveal-shadow {
	0% { transform:translateY(1800px) scale(.2,.2); opacity:0; }
	30% { transform:translateY(1800px) scale(.2,.2); opacity:0; }
	58% { transform:translateY(150px) scale(1,1); opacity:.6; }
	100% { transform:translateY(-20px) scale(.6,.6); opacity:.6; }
}


#game-container.on-trophy .trophy .body {
	animation:trophy-reveal-body 6000ms ease-in-out 0s 1 forwards;
}
#game-container.on-trophy .trophy .body .el {
	animation:trophy-reveal-body-el 3500ms ease-in-out 0s 1 forwards;
}
#game-container.on-trophy .trophy.final .body .el {
	animation:none;
}
#game-container.on-trophy .trophy .shadow {
	display:block;
	animation:trophy-reveal-shadow 6000ms ease-in-out 0s 1 forwards;
}
#game-container.on-trophy .trophy.final .shadow,
#game-container.on-trophy .trophy.tutorial-end .shadow {
	opacity:.6;
	animation:trophy-final-reveal-shadow 6000ms ease-in-out 0s 1 forwards;
}
#game-container.out-trophy .trophy .body .el,
#game-container.out-trophy .trophy.final .body .el,
#game-container.out-trophy .trophy.final .shadow,
#game-container.out-trophy .trophy.tutorial-end .body .el,
#game-container.out-trophy .trophy.tutorial-end .shadow {
	animation:fade-out 750ms ease-in 0s 1 forwards;
}



@keyframes trophy-body-shine {
	0% { background-position-x:-1200px; opacity:0; }
	40% { background-position-x:900px; opacity:.6; }
	58% { background-position-x:900px; opacity:.6; }
	100% { background-position-x:300px; opacity:.3; }
}
#game-container.on-trophy .trophy .body .el:after {
	content:'';
	display:block;
	width:297px;
	height:288px;
	border-radius:150px;
	position:relative;
	top:11px;
	left:1px;
	background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,1) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100% );
	background-size:600px 300px;
	background-position-x:-300px;
	opacity:.3;
	animation:trophy-body-shine 6000ms ease-in-out 0s 1 forwards;
	z-index:1;
}
#game-container.on-trophy .trophy.final .body .el:after {
	content:none;
}


/* CONFETTI */

#game-container #confetti {
	width:100vw;
	height:100vh;
	position:fixed;
	top:0px;
	left:0px;
	z-index:10;
	transform-style:preserve-3d;
	pointer-events:none;
}
#game-container.reset #confetti {
	display:none;
}
#game-container #confetti.drop {
	display:block;
}
#game-container #confetti .piece {
	width:0px;
	height:0px;
	position:absolute;
	top:50%;
	left:50%;
}
#game-container #confetti .piece:before {
	content:'';
	display:block;
	width:10px;
	height:30px;
	background-color:orange;
	position:relative;
	top:-15px;
	left:-5px;
}
#game-container #confetti .piece[data-scale="1.2"]:before {
	transform:scale(1.4,1.4);
}
#game-container #confetti .piece[data-scale="1.1"]:before {
	transform:scale(1.25,1.25);
}
#game-container #confetti .piece[data-scale="1.0"]:before {
	transform:scale(1.1);
}
#game-container #confetti .piece[data-scale="0.9"]:before {
	transform:scale(.75,.75);
}
#game-container #confetti .piece[data-scale="0.8"]:before {
	transform:scale(.6,.6);
}
#game-container #confetti .piece._c_0:before {
	background-color:#ff6e6e;
}
#game-container #confetti .piece._c_1:before {
	background-color:#598ced;
}
#game-container #confetti .piece._c_2:before {
	background-color:#deed70;
}
#game-container #confetti .piece._c_3:before {
	background-color:#2dc356;
}
#game-container #confetti .piece._c_4:before {
	background-color:#988adf;
}
#game-container #confetti .piece._c_5:before {
	background-color:#f19b3f;
}
#game-container #confetti .piece._c_6:before {
	background-color:#ff2ee3;
}



@keyframes confetti_0 {
	0% { transform:translateY(-40vh) scale(.7,.7); }
	100% { transform:translateY(200vh) scale(1,1); }
}
@keyframes confetti_piece_0 {
	0% { transform:translateY(0px) rotate3d(1,1,1,0deg); }
	100% { transform:translateY(400px) rotate3d(1,1,1,2500deg); }
}
@keyframes confetti_piece_1 {
	0% { transform:translateY(0px) translateX(0px) rotate3d(1,0,.4,0deg); }
	100% { transform:translateY(500px) translateX(80px) rotate3d(1,.2,1,-2800deg); }
}
@keyframes confetti_piece_2 {
	0% { transform:translateY(0px) translateX(0px) rotate3d(0,.1,1,0deg); }
	100% { transform:translateY(400px) translateX(-100px) rotate3d(0,.8,.3,1200deg); }
}
@keyframes confetti_piece_3 {
	0% { transform:translateY(-100px) translateX(0px) rotate3d(.2,.6,.1,-900deg); }
	100% { transform:translateY(300px) translateX(-200px) rotate3d(.2,.6,.1,4000deg); }
}
@keyframes confetti_piece_4 {
	0% { transform:translateY(-50px) translateX(0px) rotate3d(1,0,.2,-200deg); }
	100% { transform:translateY(420px) translateX(150px) rotate3d(1,0,.2,1800deg); }
}
#game-container #confetti.drop {
	animation:confetti_0 3000ms linear 0s 1 forwards;
}
#game-container #confetti.drop .piece._a_0 {
	animation:confetti_piece_0 3000ms ease-in 0s 1 forwards;
}
#game-container #confetti.drop .piece._a_1 {
	animation:confetti_piece_1 3000ms ease-in 0s 1 forwards;
}
#game-container #confetti.drop .piece._a_2 {
	animation:confetti_piece_2 3000ms ease-in 0s 1 forwards;
}
#game-container #confetti.drop .piece._a_3 {
	animation:confetti_piece_3 3000ms ease-in 0s 1 forwards;
}
#game-container #confetti.drop .piece._a_4 {
	animation:confetti_piece_4 3000ms ease-in 0s 1 forwards;
}


/* DICE */

#game-container .dice-orientation {
	position:absolute;
	top:0%;
	left:0%;
	width:100%;
	height:100%;
	transform-style:preserve-3d;
	transform-origin:50% 50%;
	transition:transform 1300ms ease-in-out;
	transform:rotate(0deg);
}
#game-container .dice-orientation.reset {
	transition:none;
}

#game-container .dice-group {
	position:absolute;
	top:50%;
	left:50%;
	width:0px;
	height:0px;
	transform-style:preserve-3d;
	
	transform:scale3d(1.5,1.5,1.5) translateZ(-10px);
	
	z-index:8
}
#game-container .dice-group .shadow {
	display:block;
	width:400px;
	height:400px;
	position:absolute;
	top:-200px;
	left:-200px;
	transform-origin:50% 50%;
	transform:scale(0,0);
	background-image:url('img/gameboard/shadow-1.png');
	background-size:cover;
	opacity:0;
}

#game-container .roll-group {
	position:absolute;
	width:0px;
	height:0px;

	transform-style:preserve-3d;
	transform:translateZ(2000px);
}

#game-container .dice {
	position:absolute;
	top:50%;
	left:50%;
	width:0px;
	height:0px;
	
	transform-style:preserve-3d;
}


@keyframes dice-roll-shadow {
	0% { transform:scale(.3); opacity:.2; }
	18% { transform:scale(1); opacity:1; }
	33% { transform:scale(.8); opacity:1; }
	47% { transform:scale(1); opacity:1; }
	58% { transform:scale(.87); opacity:1; }
	65% { transform:scale(1); opacity:1; }
	75% { transform:scale(.95); opacity:1; }
	82% { transform:scale(1); opacity:1; }
	100% { transform:scale(1); opacity:1; }
}

@keyframes dice-roll-a {
	0% { top:50%; left:50%; }
	12% { top:36%; left:46%; }
	18% { top:32%; left:45%; }
	47% { top:65%; left:49%; }
	66% { top:40%; left:60%; }
	90% { top:49%; left:51%; }
	100% { top:50%; left:50%; }
}
@keyframes dice-roll-b {
	0% { transform:translateZ(2000px); }
	18% { transform:translateZ(210px); }
	33% { transform:translateZ(680px); }
	37% { transform:translateZ(560px); }
	42% { transform:translateZ(460px); }
	47% { transform:translateZ(190px); }
	58% { transform:translateZ(300px); }
	65% { transform:translateZ(160px); }
	75% { transform:translateZ(220px); }
	82% { transform:translateZ(160px); }
	100% { transform:translateZ(160px); }
}
@keyframes dice-roll-c {
	0% { transform:rotate3d(1,0,0,-80deg) rotate3d(1,0,0,-120deg); }
	18% { transform:rotate3d(1,0,0,180deg) rotate3d(1,1,0,-170deg); }
	33% { transform:rotate3d(0,1,0,-20deg) rotate3d(1,0,0,180deg); }
	47% { transform:rotate3d(0,1,0,-12deg) rotate3d(1,0,0,20deg); }
	60% { transform:rotate3d(0,1,0,180deg) rotate3d(1,0,0,-80deg); }
	100% { transform:rotate3d(1,0,0,-358deg) rotate3d(1,0,0,-312deg); }
}

#game-container .dice-group.roll {
	animation:dice-roll-a 1500ms linear 0s 1 forwards;
}
#game-container .dice-group.roll .roll-group {
	animation:dice-roll-b 1500ms ease-out 0s 1 forwards;
}
#game-container .dice-group.roll .dice {
	animation:dice-roll-c 1500ms ease-out 0s 1 forwards;
}
#game-container .dice-group.roll .shadow {
	animation:dice-roll-shadow 1500ms ease-out 0s 1 forwards;
}


#game-container .dice-group.rolled {
	top:50%;
	left:50%;
}
#game-container .dice-group.rolled .roll-group {
	transform:translateZ(160px);
}
#game-container .dice-group.rolled .dice {
	transform:rotate3d(1,0,0,-358deg) rotate3d(1,0,0,-312deg);
}
#game-container .dice-group.rolled .shadow {
	transform:scale(1);
	opacity:1;
}


#game-container .dice .side {
	transform-style:preserve-3d;
	transform-origin:0% 0%;
}
#game-container .dice .side._1 {
	transform:translateZ(264px);
}
#game-container .dice .side._2 {
	transform:rotate(144deg) rotate3d(1,0,0,180deg) translateZ(264px);
}

#game-container .dice .dice-face {
	position:absolute;
	top:0px;
	left:-135px;
	width:270px;
	height:300px;
	display:flex;
	justify-content:center;
	align-items:center;
	transform-origin:50% 0%;
}
#game-container .dice .dice-face:before {
	display:block;
	width:90px;
	height:210px;
	display:flex;
	justify-content:center;
	align-items:center;
	position:absolute;
	top:120px;
	color:#444;
	font-size:130px;
	font-family:"Museo Sans Rounded", sans-serif;
	font-weight:800;
	z-index:2;
}

#game-container .dice .dice-poly {
	width:270px;
	height:300px;
}

#game-container .dice .dice-poly svg {
	width:270px;
	height:372px;
	position:absolute;
	top:0px;
	left:0px;
	fill:rgb(240,240,240);
}

#game-container .dice ._a {
	transform:rotate3d(-1,0,0,51.9deg) translateZ(-.25px);
}
#game-container .dice ._b {
	transform:rotate(-72deg) rotate3d(-1,0,0,51.9deg) translateZ(-.25px);
}
#game-container .dice ._c {
	transform:rotate(-144deg) rotate3d(-1,0,0,51.9deg) translateZ(-.25px);
}
#game-container .dice ._d {
	transform:rotate(144deg) rotate3d(-1,0,0,51.9deg) translateZ(-.25px);
}
#game-container .dice ._e {
	transform:rotate(72deg) rotate3d(-1,0,0,51.9deg) translateZ(-.25px);
}

#game-container .dice .side._2 .dice-poly svg {
	fill:rgb(180,180,180);
}


@keyframes dice-roll-side-1-a {
	0% { fill:rgb(150,150,150); }
	3% { fill:rgb(120,120,120); }
	17% { fill:rgb(210,210,210); }
	27% { fill:rgb(150,150,150); }
	35% { fill:rgb(180,180,180); }
	40% { fill:rgb(240,240,240); }
	48% { fill:rgb(210,210,210); }
	60% { fill:rgb(210,210,210); }
	65% { fill:rgb(240,240,240); }
	80% { fill:rgb(170,170,170); }
	100% { fill:rgb(240,240,240); }
}
#game-container .dice-group.roll .dice .side._1 ._a .dice-poly svg {
	animation:dice-roll-side-1-a 1500ms ease-out 0s 1 forwards;
}
#game-container .dice-group.rolled .dice .side._1 ._a .dice-poly svg {
	fill:rgb(240,240,240);
}

@keyframes dice-roll-side-1-b {
	0% { fill:rgb(150,150,150); }
	10% { fill:rgb(240,240,240); }
	18% { fill:rgb(210,210,210); }
	20% { fill:rgb(240,240,240); }
	32% { fill:rgb(150,150,150); }
	46% { fill:rgb(210,210,210); }
	55% { fill:rgb(120,120,120); }
	58% { fill:rgb(180,180,180); }
	65% { fill:rgb(180,180,180); }
	77% { fill:rgb(120,120,120); }
	100% { fill:rgb(210,210,210); }
}
#game-container .dice-group.roll .dice .side._1 ._b .dice-poly svg {
	animation:dice-roll-side-1-b 1500ms ease-out 0s 1 forwards;
}
#game-container .dice-group.rolled .dice .side._1 ._b .dice-poly svg {
	fill:rgb(210,210,210);
}

@keyframes dice-roll-side-1-c {
	0% { fill:rgb(150,150,150); }
	8% { fill:rgb(240,240,240); }
	18% { fill:rgb(210,210,210); }
	22% { fill:rgb(240,240,240); }
	33% { fill:rgb(150,150,150); }
	38% { fill:rgb(150,150,150); }
	46% { fill:rgb(210,210,210); }
	54% { fill:rgb(120,120,120); }
	65% { fill:rgb(150,150,150); }
	80% { fill:rgb(120,120,120); }
	100% { fill:rgb(170,170,170); }
}
#game-container .dice-group.roll .dice .side._1 ._c .dice-poly svg {
	animation:dice-roll-side-1-c 1500ms ease-out 0s 1 forwards;
}
#game-container .dice-group.rolled .dice .side._1 ._c .dice-poly svg {
	fill:rgb(170,170,170);
}


@keyframes dice-roll-side-1-d {
	0% { fill:rgb(150,150,150); }
	18% { fill:rgb(210,210,210); }
	30% { fill:rgb(150,150,150); }
	37% { fill:rgb(120,120,120); }
	48% { fill:rgb(210,210,210); }
	50% { fill:rgb(240,240,240); }
	60% { fill:rgb(150,150,150); }
	66% { fill:rgb(210,210,210); }
	76% { fill:rgb(210,210,210); }
	100% { fill:rgb(180,180,180); }
}
#game-container .dice-group.roll .dice .side._1 ._d .dice-poly svg {
	animation:dice-roll-side-1-d 1500ms ease-out 0s 1 forwards;
}
#game-container .dice-group.rolled .dice .side._1 ._d .dice-poly svg {
	fill:rgb(180,180,180);
}


@keyframes dice-roll-side-1-e {
	0% { fill:rgb(150,150,150); }
	6% { fill:rgb(150,150,150); }
	18% { fill:rgb(220,220,220); }
	28% { fill:rgb(120,120,120); }
	42% { fill:rgb(210,210,210); }
	54% { fill:rgb(240,240,240); }
	58% { fill:rgb(180,180,180); }
	66% { fill:rgb(240,240,240); }
	77% { fill:rgb(210,210,210); }
	100% { fill:rgb(210,210,210); }
}
#game-container .dice-group.roll .dice .side._1 ._e .dice-poly svg {
	animation:dice-roll-side-1-e 1500ms ease-out 0s 1 forwards;
}
#game-container .dice-group.rolled .dice .side._1 ._e .dice-poly svg {
	fill:rgb(210,210,210);
}


@keyframes dice-roll-side-2-a {
	0% { fill:rgb(210,210,210); }
	12% { fill:rgb(180,180,180); }
	18% { fill:rgb(150,150,150); }
	33% { fill:rgb(210,210,210); }
	36% { fill:rgb(240,240,240); }
	45% { fill:rgb(180,180,180); }
	50% { fill:rgb(120,120,120); }
	61% { fill:rgb(210,210,210); }
	77% { fill:rgb(180,180,180); }
	89% { fill:rgb(210,210,210); }
	100% { fill:rgb(180,180,180); }
}
#game-container .dice-group.roll .dice .side._2 ._a .dice-poly svg {
	animation:dice-roll-side-2-a 1500ms ease-out 0s 1 forwards;
}
#game-container .dice-group.rolled .dice .side._2 ._a .dice-poly svg {
	fill:rgb(180,180,180);
}


@keyframes dice-roll-side-2-b {
	0% { fill:rgb(210,210,210); }
	10% { fill:rgb(120,120,120); }
	18% { fill:rgb(150,150,150); }
	22% { fill:rgb(120,120,120); }
	32% { fill:rgb(210,210,210); }
	47% { fill:rgb(150,150,150); }
	55% { fill:rgb(240,240,240); }
	62% { fill:rgb(210,210,210); }
	75% { fill:rgb(210,210,210); }
	82% { fill:rgb(240,240,240); }
	100% { fill:rgb(190,190,190); }
}
#game-container .dice-group.roll .dice .side._2 ._b .dice-poly svg {
	animation:dice-roll-side-2-b 1500ms ease-out 0s 1 forwards;
}
#game-container .dice-group.rolled .dice .side._2 ._b .dice-poly svg {
	fill:rgb(190,190,190);
}


@keyframes dice-roll-side-2-c {
	0% { fill:rgb(210,210,210); }
	11% { fill:rgb(120,120,120); }
	18% { fill:rgb(140,140,140); }
	30% { fill:rgb(210,210,210); }
	47% { fill:rgb(150,150,150); }
	54% { fill:rgb(210,210,210); }
	60% { fill:rgb(180,180,180); }
	77% { fill:rgb(210,210,210); }
	77% { fill:rgb(240,240,240); }
	100% { fill:rgb(150,150,150); }
}
#game-container .dice-group.roll .dice .side._2 ._c .dice-poly svg {
	animation:dice-roll-side-2-c 1500ms ease-out 0s 1 forwards;
}
#game-container .dice-group.rolled .dice .side._2 ._c .dice-poly svg {
	fill:rgb(150,150,150);
}


@keyframes dice-roll-side-2-d {
	0% { fill:rgb(210,210,210); }
	3% { fill:rgb(240,240,240); }
	16% { fill:rgb(150,150,150); }
	27% { fill:rgb(210,210,210); }
	33% { fill:rgb(210,210,210); }
	44% { fill:rgb(120,120,120); }
	50% { fill:rgb(180,180,180); }
	58% { fill:rgb(150,150,150); }
	64% { fill:rgb(120,120,120); }
	73% { fill:rgb(160,160,160); }
	80% { fill:rgb(150,150,150); }
	91% { fill:rgb(120,120,120); }
	100% { fill:rgb(120,120,120); }
}
#game-container .dice-group.roll .dice .side._2 ._d .dice-poly svg {
	animation:dice-roll-side-2-d 1500ms ease-out 0s 1 forwards;
}
#game-container .dice-group.rolled .dice .side._2 ._d .dice-poly svg {
	fill:rgb(120,120,120);
}


@keyframes dice-roll-side-2-e {
	0% { fill:rgb(210,210,210); }
	6% { fill:rgb(240,240,240); }
	11% { fill:rgb(180,180,180); }
	18% { fill:rgb(150,150,150); }
	26% { fill:rgb(240,240,240); }
	33% { fill:rgb(210,210,210); }
	47% { fill:rgb(150,150,150); }
	50% { fill:rgb(120,120,120); }
	60% { fill:rgb(180,180,180); }
	67% { fill:rgb(120,120,120); }
	76% { fill:rgb(150,150,150); }
	80% { fill:rgb(140,140,140); }
	100% { fill:rgb(150,150,150); }
}
#game-container .dice-group.roll .dice .side._2 ._e .dice-poly svg {
	animation:dice-roll-side-2-e 1500ms ease-out 0s 1 forwards;
}
#game-container .dice-group.rolled .dice .side._2 ._e .dice-poly svg {
	fill:rgb(150,150,150);
}


/*
1,5,7,3,9
8,4,6,10,2
*/
#game-container .dice-group[value='1'] .side._1 ._a:before { content:'1'; }
#game-container .dice-group[value='1'] .side._1 ._b:before { content:'5'; }
#game-container .dice-group[value='1'] .side._1 ._c:before { content:'7'; }
#game-container .dice-group[value='1'] .side._1 ._d:before { content:'3'; }
#game-container .dice-group[value='1'] .side._1 ._e:before { content:'9'; text-decoration:underline; }
#game-container .dice-group[value='1'] .side._2 ._a:before { content:'8'; }
#game-container .dice-group[value='1'] .side._2 ._b:before { content:'4'; }
#game-container .dice-group[value='1'] .side._2 ._c:before { content:'6'; text-decoration:underline; }
#game-container .dice-group[value='1'] .side._2 ._d:before { content:'10'; }
#game-container .dice-group[value='1'] .side._2 ._e:before { content:'2'; }

/*
2,8,4,6,10
5,7,3,9,1
*/
#game-container .dice-group[value='2'] .side._1 ._a:before { content:'2'; }
#game-container .dice-group[value='2'] .side._1 ._b:before { content:'8'; }
#game-container .dice-group[value='2'] .side._1 ._c:before { content:'4'; }
#game-container .dice-group[value='2'] .side._1 ._d:before { content:'6'; text-decoration:underline; }
#game-container .dice-group[value='2'] .side._1 ._e:before { content:'10'; }
#game-container .dice-group[value='2'] .side._2 ._a:before { content:'5'; }
#game-container .dice-group[value='2'] .side._2 ._b:before { content:'7'; }
#game-container .dice-group[value='2'] .side._2 ._c:before { content:'3'; }
#game-container .dice-group[value='2'] .side._2 ._d:before { content:'9'; text-decoration:underline; }
#game-container .dice-group[value='2'] .side._2 ._e:before { content:'1'; }

/*
3,9,1,5,7
6,10,2,8,4
*/
#game-container .dice-group[value='3'] .side._1 ._a:before { content:'3'; }
#game-container .dice-group[value='3'] .side._1 ._b:before { content:'9'; text-decoration:underline; }
#game-container .dice-group[value='3'] .side._1 ._c:before { content:'1'; }
#game-container .dice-group[value='3'] .side._1 ._d:before { content:'5'; }
#game-container .dice-group[value='3'] .side._1 ._e:before { content:'7'; }
#game-container .dice-group[value='3'] .side._2 ._a:before { content:'6'; text-decoration:underline; }
#game-container .dice-group[value='3'] .side._2 ._b:before { content:'10'; }
#game-container .dice-group[value='3'] .side._2 ._c:before { content:'2'; }
#game-container .dice-group[value='3'] .side._2 ._d:before { content:'8'; }
#game-container .dice-group[value='3'] .side._2 ._e:before { content:'4'; }

/*
4,6,10,2,8
9,1,5,7,3
*/
#game-container .dice-group[value='4'] .side._1 ._a:before { content:'4'; }
#game-container .dice-group[value='4'] .side._1 ._b:before { content:'6'; text-decoration:underline; }
#game-container .dice-group[value='4'] .side._1 ._c:before { content:'10'; }
#game-container .dice-group[value='4'] .side._1 ._d:before { content:'2'; }
#game-container .dice-group[value='4'] .side._1 ._e:before { content:'8'; }
#game-container .dice-group[value='4'] .side._2 ._a:before { content:'9'; text-decoration:underline; }
#game-container .dice-group[value='4'] .side._2 ._b:before { content:'1'; }
#game-container .dice-group[value='4'] .side._2 ._c:before { content:'5'; }
#game-container .dice-group[value='4'] .side._2 ._d:before { content:'7'; }
#game-container .dice-group[value='4'] .side._2 ._e:before { content:'3'; }

/*
5,7,3,9,1
2,8,4,6,10
*/
#game-container .dice-group[value='5'] .side._1 ._a:before { content:'5'; }
#game-container .dice-group[value='5'] .side._1 ._b:before { content:'7'; }
#game-container .dice-group[value='5'] .side._1 ._c:before { content:'3'; }
#game-container .dice-group[value='5'] .side._1 ._d:before { content:'9'; text-decoration:underline; }
#game-container .dice-group[value='5'] .side._1 ._e:before { content:'1'; }
#game-container .dice-group[value='5'] .side._2 ._a:before { content:'2'; }
#game-container .dice-group[value='5'] .side._2 ._b:before { content:'8'; }
#game-container .dice-group[value='5'] .side._2 ._c:before { content:'4'; }
#game-container .dice-group[value='5'] .side._2 ._d:before { content:'6'; text-decoration:underline; }
#game-container .dice-group[value='5'] .side._2 ._e:before { content:'10'; }

/*
6,10,2,8,4
3,9,1,5,7
*/
#game-container .dice-group[value='6'] .side._1 ._a:before { content:'6'; text-decoration:underline; }
#game-container .dice-group[value='6'] .side._1 ._b:before { content:'10'; }
#game-container .dice-group[value='6'] .side._1 ._c:before { content:'2'; }
#game-container .dice-group[value='6'] .side._1 ._d:before { content:'8'; }
#game-container .dice-group[value='6'] .side._1 ._e:before { content:'4'; }
#game-container .dice-group[value='6'] .side._2 ._a:before { content:'3'; }
#game-container .dice-group[value='6'] .side._2 ._b:before { content:'9'; text-decoration:underline; }
#game-container .dice-group[value='6'] .side._2 ._c:before { content:'1'; }
#game-container .dice-group[value='6'] .side._2 ._d:before { content:'5'; }
#game-container .dice-group[value='6'] .side._2 ._e:before { content:'7'; }

/*
7,3,9,1,5
10,2,8,4,6
*/
#game-container .dice-group[value='7'] .side._1 ._a:before { content:'7'; }
#game-container .dice-group[value='7'] .side._1 ._b:before { content:'3'; }
#game-container .dice-group[value='7'] .side._1 ._c:before { content:'9'; text-decoration:underline; }
#game-container .dice-group[value='7'] .side._1 ._d:before { content:'1'; }
#game-container .dice-group[value='7'] .side._1 ._e:before { content:'5'; }
#game-container .dice-group[value='7'] .side._2 ._a:before { content:'10'; }
#game-container .dice-group[value='7'] .side._2 ._b:before { content:'2'; }
#game-container .dice-group[value='7'] .side._2 ._c:before { content:'8'; }
#game-container .dice-group[value='7'] .side._2 ._d:before { content:'4'; }
#game-container .dice-group[value='7'] .side._2 ._e:before { content:'6'; text-decoration:underline; }

/*
8,4,6,10,2
1,5,7,3,9
*/
#game-container .dice-group[value='8'] .side._1 ._a:before { content:'8'; }
#game-container .dice-group[value='8'] .side._1 ._b:before { content:'4'; }
#game-container .dice-group[value='8'] .side._1 ._c:before { content:'6'; text-decoration:underline; }
#game-container .dice-group[value='8'] .side._1 ._d:before { content:'10'; }
#game-container .dice-group[value='8'] .side._1 ._e:before { content:'2'; }
#game-container .dice-group[value='8'] .side._2 ._a:before { content:'1'; }
#game-container .dice-group[value='8'] .side._2 ._b:before { content:'5'; }
#game-container .dice-group[value='8'] .side._2 ._c:before { content:'7'; }
#game-container .dice-group[value='8'] .side._2 ._d:before { content:'3'; }
#game-container .dice-group[value='8'] .side._2 ._e:before { content:'9'; text-decoration:underline; }

/*
9,1,5,7,3
4,6,10,2,8
*/
#game-container .dice-group[value='9'] .side._1 ._a:before { content:'9'; text-decoration:underline; }
#game-container .dice-group[value='9'] .side._1 ._b:before { content:'1'; }
#game-container .dice-group[value='9'] .side._1 ._c:before { content:'5'; }
#game-container .dice-group[value='9'] .side._1 ._d:before { content:'7'; }
#game-container .dice-group[value='9'] .side._1 ._e:before { content:'3'; }
#game-container .dice-group[value='9'] .side._2 ._a:before { content:'4'; }
#game-container .dice-group[value='9'] .side._2 ._b:before { content:'6'; text-decoration:underline; }
#game-container .dice-group[value='9'] .side._2 ._c:before { content:'10'; }
#game-container .dice-group[value='9'] .side._2 ._d:before { content:'2'; }
#game-container .dice-group[value='9'] .side._2 ._e:before { content:'8'; }

/*
10,2,8,4,6
7,3,9,1,5
*/
#game-container .dice-group[value='10'] .side._1 ._a:before { content:'10'; }
#game-container .dice-group[value='10'] .side._1 ._b:before { content:'2'; }
#game-container .dice-group[value='10'] .side._1 ._c:before { content:'8'; }
#game-container .dice-group[value='10'] .side._1 ._d:before { content:'4'; }
#game-container .dice-group[value='10'] .side._1 ._e:before { content:'6'; text-decoration:underline; }
#game-container .dice-group[value='10'] .side._2 ._a:before { content:'7'; }
#game-container .dice-group[value='10'] .side._2 ._b:before { content:'3'; }
#game-container .dice-group[value='10'] .side._2 ._c:before { content:'9'; text-decoration:underline; }
#game-container .dice-group[value='10'] .side._2 ._d:before { content:'1'; }
#game-container .dice-group[value='10'] .side._2 ._e:before { content:'5'; }



#game-container.in-trophy .dice-group .dice-face {
	animation:fade-out 750ms ease-in 0s 1 forwards;
}
#game-container.on-trophy .dice-group .dice-face {
	opacity:0;
}
#game-container.in-trophy .dice-group .shadow {
	animation:fade-out 750ms ease-in 0s 1 forwards;
}
#game-container.on-trophy .dice-group .shadow {
	opacity:0;
}
#game-container.out-trophy .dice-group .dice-face,
#game-container.out-trophy .dice-group .shadow {
	animation:fade-in 750ms ease-in 0s 1 forwards;
}



/* LO-FI DICE */

@keyframes dice-lofi-scene-out {
	0% { opacity:1; top:calc(40vh + 8vw); }
	100% { opacity:0; top:85vh; }
}
@keyframes dice-lofi-roll-a {
	0% { top:48%; left:50%; }
	12% { top:43%; left:46%; }
	18% { top:41%; left:45%; }
	47% { top:57%; left:49%; }
	66% { top:40%; left:60%; }
	90% { top:calc(40vh + 8vw); left:51%; }
	100% { top:calc(40vh + 8vw); left:50%; }
}

#game-container .dice-lofi {
	display:none;
	position:absolute;
	top:calc(40vh + 8vw);
	left:50%;
	z-index:1;
	pointer-events:none;
}
/*#game-container .dice-lofi:after {
	content:'';
	width:6px;
	height:6px;
	background-color:green;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-3px;
	margin-left:-3px;
	z-index:2;
}*/
@media (orientation:landscape) {
	@keyframes dice-lofi-scene-out {
		0% { opacity:1; top:48vh; }
		100% { opacity:0; top:85vh; }
	}
	@keyframes dice-lofi-roll-a {
		0% { top:48%; left:50%; }
		12% { top:43%; left:46%; }
		18% { top:41%; left:45%; }
		47% { top:57%; left:49%; }
		66% { top:40%; left:60%; }
		90% { top:48vh; left:51%; }
		100% { top:48vh; left:50%; }
	}
	#game-container .dice-lofi {
		top:48vh;
	}
}

#game-container.on-overview .dice-lofi {
	display:block;
}
#game-container[data-dice-state="0"] .dice-lofi {
	opacity:0;
	animation:fade-in 500ms ease-out 600ms 1 forwards;
}
#game-container.out-overview .dice-lofi/*,
#game-container[data-dice-state="3"] .dice-lofi*/ {
	animation:fade-out 750ms ease-in 0s 1 forwards;
}
#game-container.on-closeup .dice-lofi,
#game-container.on-trophy .dice-lofi,
#game-container.on-reset .dice-lofi {
	/*animation:fade-out 250ms ease-in 0s 1 forwards;*/
	animation:dice-lofi-scene-out 250ms ease-in 0s 1 forwards;
}

#game-container[data-dice-state="1"] .dice-lofi {
	animation:dice-lofi-roll-a 1200ms linear 0s 1 forwards;
}

#game-container .dice-lofi .dice-group.roll .roll-group {
	animation:dice-roll-b 1200ms ease-out 0s 1 forwards;
}
#game-container .dice-lofi .dice-group.roll .dice {
	animation:dice-roll-c 1200ms ease-out 0s 1 forwards;
}
#game-container .dice-lofi .dice-group.roll .shadow {
	animation:dice-roll-shadow 1200ms ease-out 0s 1 forwards;
}


#game-container .dice-lofi .dice-group {
	transform:scale3d(.6,.6,.6);
	transition:transform ease-in-out 675ms;
	margin-top:-10px;
}
#game-container.reset .dice-lofi .dice-group {
	transition:none;
}

#game-container[data-theme="boots"] .dice-lofi .dice-group,
#game-container[data-theme="spirits"] .dice-lofi .dice-group {
	margin-top:-15px;
}

#game-container .dice-lofi .dice-group .dice .side .dice-poly svg {
	animation:none !important;
}

#game-container .dice-lofi .dice-group .dice .side._1 ._a .dice-poly svg {
	fill:rgb(240,240,240);
}

#game-container .dice-lofi .dice-group .dice .side._1 ._b .dice-poly svg {
	fill:rgb(210,210,210);
}

#game-container .dice-lofi .dice-group .dice .side._1 ._c .dice-poly svg {
	fill:rgb(170,170,170);
}

#game-container .dice-lofi .dice-group .dice .side._1 ._d .dice-poly svg {
	fill:rgb(180,180,180);
}

#game-container .dice-lofi .dice-group .dice .side._1 ._e .dice-poly svg{
	fill:rgb(210,210,210);
}

#game-container .dice-lofi .dice-group .dice .side._2 ._a .dice-poly svg {
	fill:rgb(180,180,180);
}

#game-container .dice-lofi .dice-group .dice .side._2 ._b .dice-poly svg {
	fill:rgb(190,190,190);
}

#game-container .dice-lofi .dice-group .dice .side._2 ._c .dice-poly svg {
	fill:rgb(150,150,150);
}

#game-container .dice-lofi .dice-group .dice .side._2 ._d .dice-poly svg {
	fill:rgb(120,120,120);
}

#game-container .dice-lofi .dice-group .dice .side._2 ._e .dice-poly svg {
	fill:rgb(150,150,150);
}

#game-container .dice-lofi .dice-orientation {
	/*transform:rotateX(35deg) rotateZ(-13deg) !important;*/
	transform:rotateX(35deg) !important;
}


#game-container .dice-lofi .dice-group.rolled .dice .side._2 ._c,
#game-container .dice-lofi .dice-group.rolled .dice .side._2 ._d,
#game-container .dice-lofi .dice-group.rolled .dice .side._2 ._e {
	display:none;
}


/* CLOSEUP */


#game-container .closeup-group {
	position:absolute;
	bottom:-2000px;
	left:50%;

	transition:bottom ease-out 750ms;
}
#game-container.on-closeup .closeup-group {
	bottom:-940px;
}
#game-container.out-closeup .closeup-group {
	bottom:-2000px;
	transition:bottom ease-in 650ms;
}
#game-container.reset .closeup-group {
	transition:none !important;
}


#game-container .closeup-group .board-center {
	position:absolute;
	transform:rotateZ(22.5deg);
}
#game-container.in-closeup .closeup-group .board-center {
}
#game-container.on-closeup .closeup-group .board-center {
	transform:rotateZ(7.5deg);
	transition:transform ease-out 1100ms;
}


/* CLOSEUP CONTENT */

#game-container .closeup-group .closeup-board {
	transform:translateZ(-10px);
}

#game-container .closeup-group .event {
	z-index:1;
}
#game-container .closeup-group .event .line {
	top:996px;
	left:34px;
	transform:scale(2.95) rotate(90deg);
}
#game-container .closeup-group .closeup-detail {
	position:absolute;
	transform:rotateZ(-7.5deg);
	z-index:2;
}

#game-container .closeup-detail .icon {
	width:250px;
	height:250px;
	z-index:2;
	position:absolute;
	top:-1450px;
	left:-125px;
	background-size:cover;
}

#game-container[data-theme="pickleball"] .closeup-detail .icon._decision {
	background-image:url('img/gameboard/pickleball-icon-decision.png');
}
#game-container[data-theme="pickleball"] .closeup-detail .icon._chance {
	background-image:url('img/gameboard/pickleball-icon-chance.png');
}
#game-container[data-theme="pickleball"] .closeup-detail .icon._bankrupt {
	background-image:url('img/gameboard/pickleball-icon-bankrupt.png');
}
#game-container[data-theme="pickleball"] .closeup-detail .icon._burnout {
	background-image:url('img/gameboard/pickleball-icon-burnout.png');
}

#game-container[data-theme="spirits"] .closeup-detail .icon._decision {
	background-image:url('img/gameboard/spirits-icon-decision.png');
}
#game-container[data-theme="spirits"] .closeup-detail .icon._chance {
	background-image:url('img/gameboard/spirits-icon-chance.png');
}
#game-container[data-theme="spirits"] .closeup-detail .icon._bankrupt {
	background-image:url('img/gameboard/spirits-icon-bankrupt.png');
}
#game-container[data-theme="spirits"] .closeup-detail .icon._burnout {
	background-image:url('img/gameboard/spirits-icon-burnout.png');
}

#game-container[data-theme="boots"] .closeup-detail .icon._decision {
	background-image:url('img/gameboard/boots-icon-decision.png');
}
#game-container[data-theme="boots"] .closeup-detail .icon._chance {
	background-image:url('img/gameboard/boots-icon-chance.png');
}
#game-container[data-theme="boots"] .closeup-detail .icon._bankrupt {
	background-image:url('img/gameboard/boots-icon-bankrupt.png');
}
#game-container[data-theme="boots"] .closeup-detail .icon._burnout {
	background-image:url('img/gameboard/boots-icon-burnout.png');
}

#game-container[data-theme="candy"] .closeup-detail .icon._decision {
	background-image:url('img/gameboard/candy-icon-decision.png');
}
#game-container[data-theme="candy"] .closeup-detail .icon._chance {
	background-image:url('img/gameboard/candy-icon-chance.png');
}
#game-container[data-theme="candy"] .closeup-detail .icon._bankrupt {
	background-image:url('img/gameboard/candy-icon-bankrupt.png');
}
#game-container[data-theme="candy"] .closeup-detail .icon._burnout {
	background-image:url('img/gameboard/candy-icon-burnout.png');
}

#game-container .closeup-group .closeup-detail .closeup-highlight {
	position:absolute;
	top:-1475px;
	left:-150px;
	width:300px;
	height:300px;
	border-radius:150px;
	z-index:2;
}
@keyframes closeup-highlight-in {
	0% { transform:scale(.8); opacity:0; }
	65% { transform:scale(1.03); opacity:1; }
	100% { transform:scale(1); opacity:1; }
}
#game-container.on-closeup .closeup-group .closeup-detail .closeup-highlight {
	animation:closeup-highlight-in 900ms ease-out 1200ms 1 forwards;
	opacity:0;
}
#game-container .closeup-group .closeup-detail.highlight-out .closeup-highlight {
	animation:fade-out 500ms ease-in 200ms 1 forwards;
	opacity:1;
}


#game-container #closeup-canvas {
	display:block;
	width:3000px;
	height:3000px;
	position:absolute;
	top:-1500px;
	left:-1500px;
	transform:rotate(180deg);
}


/* PAWN (CLOSEUP) */

#game-container .closeup-group .pawn-progress {
	position:absolute;
	top:50%;
	left:50%;
	transform:rotate(157.5deg);
	z-index:2;
}
#game-container .closeup-group .pawn {
	top:1340px;
}
#game-container .closeup-group .pawn .body {
	transform:rotate(180deg);
	z-index:2;
}

@keyframes pawn-prog-closeup {
	0% { transform:rotate(157.5deg); }
	100% { transform:rotate(172.5deg); }
}
@keyframes pawn-standing-hop-closeup {
	0% { top:-100px; transform:rotate(0deg); }
	25% { top:-160px; transform:rotate(8deg); }
	40% { top:-180px; }
	60% { transform:rotate(-6deg); }
	90% { top:-105px; transform:rotate(-4deg); }
	100% { top:-100px; transform:rotate(0deg); }
}

#game-container.on-closeup .closeup-group .pawn-progress {
	animation:pawn-prog-closeup 1100ms ease-in-out 0s 1 forwards;
}
#game-container.on-closeup .closeup-group .pawn .el {
	animation:pawn-standing-hop-closeup 1200ms ease-in-out 0s 1 forwards;
}
#game-container.on-closeup .closeup-group .pawn .shadow {
	width:180px;
	height:180px;
	top:-90px;
	left:-90px;
}

@keyframes pawn-floating-hop-closeup {
	0% { top:-100px; transform:rotate(0deg); }
	3% { top:-95px; }
	25% { top:-130px; transform:rotate(5deg); }
	40% { top:-150px; }
	60% { transform:rotate(-4deg); }
	80% { top:-92px; }
	90% { transform:rotate(-2deg); }
	100% { top:-100px; transform:rotate(0deg); }
}

@keyframes pawn-bounce-hop-closeup {
	0% { top:-100px; transform:rotate(0deg); }
	3% { top:-98px; }
	25% { top:-140px; left:-44px; transform:rotate(5deg); }
	40% { top:-165px; left:-42px; }
	60% { transform:rotate(-4deg); }
	85% { top:-100px; left:-48px; }
	90% { top: -105px; transform:rotate(-2deg); }
	100% { top:-100px; transform:rotate(0deg); }
}

#game-container[data-theme="pickleball"].on-closeup .closeup-group .pawn .el {
	animation:pawn-bounce-hop-closeup 1200ms ease-in-out 0s 1 forwards;
}
#game-container[data-theme="pickleball"] .closeup-group .pawn .el:before {
	transform:scale(2,2);
	top:-30px;
}

@keyframes pawn-squishy-hop-closeup {
	0% { top:-100px; transform:rotate(0deg); }
	5% { top:-90px; transform:scale(1.1,.8); }
	25% { top:-160px; transform:rotate(2deg); }
	40% { top:-180px; transform:rotate(-1deg) scale(.97,1.1); }
	60% { transform:rotate(-3deg) scale(.95,1.12); }
	90% { top:-90px; transform:rotate(-2deg) scale(1.1,.96); }
	100% { top:-100px; transform:rotate(0deg); }
}
#game-container[data-theme="candy"].on-closeup .closeup-group .pawn .el {
	animation:pawn-squishy-hop-closeup 1200ms ease-in-out 0s 1 forwards;
}
#game-container[data-theme="candy"] .closeup-group .pawn .el:before {
	transform:scale(2,2);
	top:-50px;
}


@keyframes pawn-gentle-hop-closeup {
	0% { top:-100px; transform:rotate(0deg); }
	25% { top:-160px; transform:rotate(2deg); }
	40% { top:-180px; }
	60% { transform:rotate(-4deg); }
	90% { top:-105px; transform:rotate(-2deg); }
	100% { top:-100px; transform:rotate(0deg); }
}
#game-container[data-theme="spirits"].on-closeup .closeup-group .pawn .el {
	animation:pawn-gentle-hop-closeup 1200ms ease-in-out 0s 1 forwards;
}
#game-container[data-theme="spirits"] .closeup-group .pawn {
	top:1320px;
}
#game-container[data-theme="spirits"] .closeup-group .pawn .el:before {
	transform:scale(1.6,1.6);
	top:-100px;
}



#game-container[data-theme="boots"] .closeup-group .pawn .el:before {
	transform:scale(1.8,1.8);
	top:-70px;
}





@media screen and (min-height:1000px){
	
	#game-container #roll-btn {
		top:calc(40vh - 200px);
	}
	
	
	@keyframes dice-lofi-scene-out {
		0% { opacity:1; top:45vh; }
		100% { opacity:0; top:85vh; }
	}
	@keyframes dice-lofi-roll-a {
		0% { top:48%; left:50%; }
		12% { top:43%; left:46%; }
		18% { top:41%; left:45%; }
		47% { top:57%; left:49%; }
		66% { top:40%; left:60%; }
		90% { top:45vh; left:51%; }
		100% { top:45vh; left:50%; }
	}
	#game-container .dice-lofi {
		top:45vh;
	}
	
}

@media screen and (min-height:1200px){
	
	#game-container #game {
		perspective:2000px;
	}
	/*#game-container .dice-ui:after {
		top:35vh;
	}*/
	#game-container #roll-btn {
		top:calc(35vh - 400px);
		left:calc(50vw - 400px);
		width:800px;
		height:800px;
		border-radius:400px;
	}
	
	#game-container .closeup-group {
		transform:scale(1.25) translateY(220px);
	}
	
	@keyframes dice-lofi-scene-out {
		0% { opacity:1; top:38vh; }
		100% { opacity:0; top:85vh; }
	}
	@keyframes dice-lofi-roll-a {
		0% { top:48%; left:50%; }
		12% { top:43%; left:46%; }
		18% { top:41%; left:45%; }
		47% { top:57%; left:49%; }
		66% { top:40%; left:60%; }
		90% { top:38vh; left:51%; }
		100% { top:38vh; left:50%; }
	}
	#game-container .dice-lofi {
		top:38vh;
	}
	
}
@media screen and (min-height:1500px){

	#game-container .closeup-group {
		transform:scale(1.5) translateY(350px);
	}
}


@media screen and (max-height:779px){
	
	#game-container .closeup-group {
		bottom:-2000px;
		transform:scale(.8);
	}
	#game-container.on-closeup .closeup-group {
		bottom:-720px;
	}
	#game-container.out-closeup .closeup-group {
		bottom:-2000px;
		transition:bottom ease-in 650ms;
	}
}

@media screen and (max-height:649px){
	
	#game-container.on-closeup .closeup-group {
		bottom:-800px;
	}
}


@media screen and (max-width:579px){
	
	
	
	
	#game-container #roll-btn {
		top:calc((42vh + 8vw) - 100px);
		left:calc(50vw - 100px);
		width:200px;
		height:200px;
		border-radius:100px;
	}
	
	
	#game-container .scene-group {
		width:1000px;
		height:1000px;
		top:500px;
		left:500px;
	}
	#game-container .scene-group .board-center {
		top:500px;
		left:500px;
		transform:none;
	}

	#game-container .scene-group .tile-marker {
		top: 200px;
		left: 200px;
		transform-origin: 300px 300px;
	}

	#game-container #board-canvas {
		width:1000px;
		height:1000px;
	}
	#game-container #board-sub-canvas {
		width:1000px;
		height:1000px;
		top:0px;
		left:0px;
		transform:translateZ(-10px) rotate(45deg) scale(1.4);
	}
	#game-container .closeup-group {
		bottom:-2000px;
		transform:scale(.7);
	}
	#game-container.on-closeup .closeup-group {
		bottom:-620px;
	}
	#game-container.out-closeup .closeup-group {
		bottom:-2000px;
		transition:bottom ease-in 650ms;
	}
	
	@keyframes dice-lofi-scene-out {
		0% { opacity:1; top:calc(42vh + 8vw); }
		100% { opacity:0; top:85vh; }
	}
	@keyframes dice-lofi-roll-a {
		0% { top:48%; left:50%; }
		12% { top:43%; left:46%; }
		18% { top:41%; left:45%; }
		47% { top:57%; left:49%; }
		66% { top:40%; left:60%; }
		90% { top:calc(42vh + 8vw); left:51%; }
		100% { top:calc(42vh + 8vw); left:50%; }
	}
	#game-container .dice-lofi {
		top:calc(42vh + 8vw);
	}
	
	@supports (-webkit-touch-callout:none) {/* target ios */
		#game-container .dice-lofi {
			margin-top:-20px;
		}
	}
	
	#game-container .dice-group {
		transform:scale3d(.3,.3,.3);
	}
	#game-container .dice-orientation {
		
	}

	@keyframes trophy-reveal-body {
		0% { transform:translateY(-400px) scale(.4,.4); }
		58% { transform:translateY(100px) scale(1,1); }
		100% { transform:translateY(-20px) scale(.4,.4); }
	}
	@keyframes trophy-reveal-shadow {
		0% { transform:translateY(1800px) scale(.2,.2); opacity:0; }
		30% { transform:translateY(1800px) scale(.2,.2); opacity:0; }
		58% { transform:translateY(100px) scale(.8,.8); opacity:.6; }
		100% { transform:translateY(-20px) scale(.6,.6); opacity:0; }
	}


	@keyframes confetti_0 {
		0% { transform:translateY(-40vh); }
		100% { transform:translateY(200vh); }
	}
	
}
@media screen and (max-width:579px) and (min-height:800px){
	
	#game-container .closeup-group {
		transform:scale(.85);
	}
	#game-container.on-closeup .closeup-group {
		bottom:-780px;
	}
}