/* Game CSS */

* {
	margin: 0;
	padding: 0;
}

@font-face {
	font-family: 'GT-Walsheim';

	src: url('../fonts/GT-Walsheim-Condensed-Ultra-Bold-Oblique.otf') format('opentype'),
		 url('../fonts/GT-Walsheim-Condensed-Ultra-Bold-Oblique.woff2') format('woff2'),
	     url('../fonts/GT-Walsheim-Condensed-Ultra-Bold-Oblique.woff') format('woff');
}

body {
	background-color: #c51c31;
	padding: 0;
	font-family: 'GT-Walsheim', Arial, sans-serif;
}

#game-over-wash {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.85);
	position: absolute;
	z-index: 9999;
	display: none;
}

#game-over-wash > img {
	width: 40vh;
	position: relative;
	top: 50%;

	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
}

.screen-hide {
	display: none;
}

.game-container {
	padding: 0;

	width: 100vw;
	height: 100vh;

	width: 100%;
	height: inherit;
}

#game-background {
	position: fixed;
	width: 100%;
	height: inherit;
	background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center top;
    background-attachment: fixed;
}

.game-background-ashes-match {
	background-image: url('../images/game/background-ashes-match.jpg');
}

.game-background-bbl-match {
	background-image: url('../images/game/background-bbl-match.jpg');
}

.game-background-ashes-practice {
	background-image: url('../images/game/background-ashes-practice.jpg');
}

.game-background-bbl-practice {
	background-image: url('../images/game/background-bbl-practice.jpg');
}

#top-bar {
	position: fixed;
	width: 100%;
	height: 14%; /* 190px; */
	background-image: url('../images/game/top-bar.jpg');
	background-repeat: repeat;
	background-size: 100% 100%;
}

.top-bar-up {
	margin-top: -9%;
}

#game {
	font-size: 0;
	position: fixed;
	left: 50%;

	-webkit-transform: translate(-50%);
 	transform: translate(-50%);
}

/* Post Game Screens CSS */

#post-game-screens {
	color: white;

	position: relative;
	text-align: center;
}

#post-game-screens #close {
	right: 1%;
	top: 1%;
}

#post-game-screens .circle-button {
	width: 12%;
	position: absolute;
}

.game-paper-bg {
	background: #c51c31 url('../images/game/paper-background.png');
	background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center top;
}

.olive-bg {
	background-color: #dcc98e;
}

.row {
	margin-top: 5%;
	margin-left: 0;
	margin-right: 0;
}

.col {
	display: inline-block;
	vertical-align: middle;
}

.left-align { text-align: left; }
.right-align { text-align: right; }

.col-70 { width: 70%; }
.col-65 { width: 65%; }
.col-60, .img-60 { width: 60%; }
.col-45, .img-45 { width: 45%; }
.col-35 { width: 35%; }
.col-30, .img-30 { width: 30%; }
.col-20 { width: 20%; }

.img-40 { width: 40%; }
.img-50 { width: 50%; }
.img-55 { width: 55%; }

.txt-xs { font-size: 1.75vh !important; }
.txt-lg { font-size: 2.8vh !important; }

.num-md { font-size: 3vh; }
.num-sm { font-size: 2.5vh; }

.red { color: #b51924; }
.green { color: #4d8f41; }

.dashed-border {
	border: 1px dashed;
	border-color: #b18c62;
	box-sizing: border-box;
}

.dashed-border-sides { border-width: 0 1px 0 1px; }
.dashed-border-left { border-width: 0 0 0 1px; }

.outer-margin {
	margin-left: 10%;
	margin-right: 10%;
}

/* Practice Post Game Screen CSS */

.practice > .user-score {
	padding-top: 5%;
	padding-bottom: 7%;
	margin-top: 0;
}

.practice > header {
	margin-bottom: -5%;
}

.practice > .user-score > h1 {
    font-size: 7vh;
    color: black;
}

.practice > .user-score > p {
	line-height: 1;
}

.practice p {
	color: black;
    font-size: 2.1vh;
    margin: 0 0 5% 0;
    letter-spacing: 0.05vh;
}

.practice a {
	color: #7f611d;
	text-decoration: underline;
}

.practice #enlist {
	margin-top: 10%;
	padding-bottom: 2%;
}

.practice .enlisted-adjustment {
	padding-bottom: 6% !important;
}

.practice #enlist #bbl-buckets {
	margin-top: -8%;
	padding-bottom: 3%;
}

.practice #enlist p {
	padding-left: 3%;
    padding-right: 3%;
}

.practice #play-again {
	padding-top: 4%;
}

/* Vertical Scale Limit Fix */

#practice-game-user, #game-non-user-practice {
	width: 100%;
}

/* Headers */

header {
	margin-top: 10%;
}

header > .col {
	vertical-align: bottom;
}

header > .col img {
	width: 75%;
}

/* Match Screens CSS */

#buckethead-score {
	text-align: left;
	padding-top: 5%;
	padding-bottom: 5%;
}

#bbl-left-team {
	padding-right: 6%;
	line-height: 1;
	padding-bottom: 2%;
}

#bbl-right-team {
	padding-left: 6%;
	line-height: 1;
	padding-bottom: 2%;
}

#bbl-verses {
	position: absolute;
	width: 6%;
	right: 47%;
	top: 32%;
}

#bbl-logo {
	position: absolute;
	width: 8%;
	right: 45.5%;
	top: 24%;
}

/* Statistics */

#statistics {
	color: black;

	font-size: 16px; /* Old browser fallback */
    font-size: 2vh;
}

#best-score-ribbon {
	position: absolute;
	width: 20%;
	left: 17%;
    top: 23.5%;
    display: none;
}

/* Social */

#social-media {
    background: #cfb980 url('../images/game/post/social-bg.jpg');
    padding: 4%;
    text-align: left;
}

#social-media > img {
	margin-left: 2%;
}

#social-media > img:first-child {
	margin-right: 6%;
}

#social-media .share-button {
	width: 14%;
}

/* Rankings */

#rankings {
	font-size: 2vh;
	color: black;
}

#rankings > img {
	margin-bottom: -6%;
}

#rankings > #rankings-bg {
	background: #cfb980 url('../images/game/post/rankings-bg.jpg');
	color: #81621d;
	border-width: 1px 1px 0 1px;
	padding-top: 8%;
}

#rankings .row {
	margin-top: 0;
	width: inherit;
}

#rankings .scorer {
	max-height: 10vh;
	overflow: hidden;
	white-space: nowrap;
}

#rankings .row .rank {
	width: 25%;
	height: inherit;
	float: left;
	padding-top: 2%;
}

#rankings .row .rank-place {
	padding-top: 5%;
}

#rankings .row .score {
	width: 50%;
	text-align: left;
	float: left;

	padding-left: 5%;
	padding-top: 2%;
    padding-bottom: 2%;
}

#rankings .row .avatar {
	width: 23%;
	float: right;
	text-align: right;
}

#rankings .row .avatar > img {
	width: 80%;
}

.scroll-button {
	bottom: 1%;
}

#scroll-down {
	left: 38%;
}

/* Fix for iPhones & Mobile */
@media screen and (max-width: 667px) {
	
	#rankings .scorer {
		max-height: 7.2vh;
		overflow: hidden;
		white-space: nowrap;
	}

	.num-md { font-size: 2.6vh; }

	.practice #enlist p {
		font-size: 1.8vh;
	}
}