* { box-sizing: border-box }
html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: #001;
	font-family: Verdana, -apple-system, Helvetica, Arial, sans-serif;
}

#play {
	position: fixed;
	z-index: 5000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
#play.--hidden {
	display: none;
}
.play-inner {
	color: #fff;
	font-size: 20vw;
}
.play-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background: url('inventory/car_keys.png') center / contain no-repeat;
	animation: 30s rotateKeys linear infinite;
	filter: drop-shadow(0 0 5vw #ff0);
}
@keyframes rotateKeys {
	from { transform: rotate(0deg) scale(1.4) }
	to { transform: rotate(360deg) scale(1.4) }
}
#backdrop {
	position: fixed;
	z-index: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}

/*
 * Splashes
 */
.splash {
	pointer-events: none;
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: #fff;
	background: #000;
	font-size: 12vw;
	text-align: center;
	letter-spacing: -.08em;
	line-height: .9;
	animation: 2s disappear ease-out forwards;
}
.splash#end {
	animation: none;
}
@keyframes disappear {
	0% { opacity: 1 }
	99% { opacity: 1 }
	100% { opacity: 0 }
}
.--zoe #gabe-splash,
.--gabe #zoe-splash {
	display: none;
}

/*
 * Menu
 */
.menu {
	color: #fff;
	position: fixed;
	bottom: 0;
	display: flex;
	width: 100%;
	justify-content: center;
}
.menu-item {
	margin-left: 1vw;
	padding: 1vw;
	line-height: 1;
	background: #111;
	cursor: pointer;
	font-size: 2vw;
	box-shadow: 1vw 1vw 1vw rgba(0,0,0,.3);
}
.menu-item:hover {
	background: #222;
}
.character-switcher {
	margin-left: 4vw;
}
.u-zoe,
.u-gabe {
	display: none;
}
.--zoe .u-zoe,
.--gabe .u-gabe {
	display: inline-block;
}
.--raving #trigger-dance .start,
#trigger-dance .stop {
	display: none;
}
.--raving #trigger-dance .stop,
#trigger-dance .start {
	display: inline;
}

/* Phone
 * interface
 */
#phone {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2vw;
	background: rgba(0,0,0,.3);
	backdrop-filter: blur(15px);
}
.--gabe #phone,
#phone.--hidden {
	display: none;
}
.phone-inner {
	background: #000;
	color: #fff;
	width: 40vw;
	min-width: 20vw;
	height: 100%;
	border: 1vw solid #333;
	border-radius: 1.5vw;
	box-shadow: 1vw 1vw 1vw rgba(0,0,0,.3);
}
.phone-inner h2 {
	margin: 3vw 2vw 2vw;
	font-size: 2.5vw;
	line-height: 1;
	letter-spacing: -.3px;
}
.contact {
	font-size: 1.75vw;
	line-height: 1;
	padding: 2vw;
	border-bottom: 1px solid #333;
	cursor: pointer;
}
.contact:hover {
	background: #111;
}
.contact.--called {
	opacity: .9;
}
#phone .close-button {
	position: fixed;
	top: .25vw;
	right: .75vw;
	font-size: 4vw;
	line-height: 1;
	cursor: pointer;
	color: #fff;
	z-index: 1000;
}

/*
 * Inventory
 */
#inventory {
	position: fixed;
	bottom: 5vw;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: center;
}
.--gabe #inventory,
#inventory.--hidden {
	display: none;
}
.inventory-item {
	position: relative;
	width: 8vw;
	height: 8vw;
	margin: 1vw 2vw;
	padding: .3vw;
	cursor: pointer;
	background: #f0f0f0;
	border-radius: 50%;
	box-shadow: 1vw 1vw 1vw rgba(0,0,0,.1);
	transition: .1s transform ease-in-out;
	animation: .3s inventoryOpen forwards;
	transform: scale(1);
}
@keyframes inventoryOpen {
	from {
		top: 100vh;
	}
	to {
		top: 0;
	}
}
.inventory-item:hover {
	background: #fff;
	transform: scale(1.2);
}
.inventory-item img {
	width: 100%;
}
.inventory-item .description {
	display: none;
}
.inventory-item:hover .description {
	display: block;
	position: absolute;
	top: -2.5vw;
	left: 0;
	font-size: 1.65vw;
	font-weight: bold;
	letter-spacing: -.4px;
	width: 100%;
	color: #fff;
	text-align: center;
}

/*
 * Dialog
 */
.dialog-box {
	position: relative;
	background: #121212;
	color: #fff;
	font-size: 2.5vw;
	position: fixed;
	bottom: 0;
	width: 100%;
	min-height: 14vw;
	padding: 1vw 5vw 2vw 1vw;
	letter-spacing: -.3px;
}
.dialog-box.--response {
	padding: 1vw 5vw 2vw 14.5vw;
}
#dialog-avatar {
	width: 16vw;
	height: 14vw;
	position: absolute;
	top: .25vw;
	right: 4.5vw;
	background-size: contain;
	background-repeat: no-repeat;
	z-index: -1;
}
.--response #dialog-avatar {
	right: auto;
	left: -.5vw;
}
#next-dialog,
#close-dialog {
	position: absolute;
	top: 2vw;
	right: 2vw;
	padding: .25vw .5vw;
	background: #222;
	border-radius: 1vw;
	cursor: pointer;
}
#next-dialog:hover,
#close-dialog:hover {
	background: #333;
}
#password-form {
	display: none;
	background: #222;
	border-radius: 1vw;
	margin-top: 1vw;
}
#skip-password {
	float: right;
	cursor: pointer;
	background: #333;
	margin: 1vw;
	padding: .5vw;
	border-radius: 1vw;
}
#skip-password:hover {
	background: #444;
}
#enter-password-input,
#enter-password-button {
	background: #000;
	color: #0f0;
	border: 0;
	font-size: 2.5vw;
	padding: .5vw;
	margin: 1vw 0 1vw 1vw;
}
#enter-password-button {
	background: #333;
	color: #fff;
	margin-left: 0;
	border-radius: 1vw;
}
#enter-password-button:hover {
	background: #444;
}
.--password-visible #password-form {
	display: block;
}
.--password-visible #next-dialog {
	display: none;
}
.--hidden {
	display: none;
}
.--in-call #phone,
.--in-call .menu {
	display: none;
}

/*
 * Gabe dancing
 */
.ravelights {
	display: none;
}
.--raving .ravelights {
	display: block;
	position: fixed;
	z-index: 1;
	pointer-events: none;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	animation: 5s raveLights infinite;
	mix-blend-mode: soft-light;
}
@keyframes raveLights {
	0% { background: red }
	20% { background: orange }
	40% { background: yellow }
	60% { background: green }
	80% { background: blue }
	100% { background: purple }
}

/*
 * End screen
 */
#end {
	position: fixed;
	top: 0;
	left: 0;
}
#end h2 {
	color: #fff;
}