@charset "UTF-8";

@font-face
{
	font-family: 'Cooper';
	src: url('/fonts/cooper_light.woff2') format('woff2'),
			 url('/fonts/cooper_light.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face
{
	font-family: 'Cooper';
	src: url('/fonts/cooper_light-italic.woff2') format('woff2'),
			 url('/fonts/cooper_light-italic.woff') format('woff');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face
{
	font-family: 'Cooper';
	src: url('/fonts/cooper_medium.woff2') format('woff2'),
			 url('/fonts/cooper_medium.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face
{
	font-family: 'Cooper';
	src: url('/fonts/cooper_medium-italic.woff2') format('woff2'),
			 url('/fonts/cooper_medium-italic.woff') format('woff');
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}

:root
{
	--sans-serif: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--serif: Cooper, Georgia, serif;

	--canvas: #EAE1CD;
	--ink: #201D1D;
	--red: #BB3102;
	--yellow: #F5CC47;
	--blue: #4B72B0;
	--green: #1C9063;

	--background: var(--canvas);
	--text: var(--ink);
	--primary: var(--red);
	--secondary: var(--yellow);
	--tertiary: var(--blue);
}

*,
*:before,
*:after
{
	box-sizing: border-box;
}

html
{
	font-size: 1vw;
}

body
{
	font-size: 3rem;
}

@media (min-width: 670px)
{
	body
	{
		font-size: 3rem;
		line-height: 1.2;
	}
}

@media (min-width: 1000px)
{
	html
	{
		font-size: 10px;
	}
}

html
{
	margin: 0;
	padding: 0;
	position: relative;
}

body
{
	margin: 0;
	padding: 0;
	background-color: var(--background);
	color: var(--text);
	font-family: var(--serif);
	overflow-x: hidden;
}

a
{
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 0.05em;
	text-underline-offset: 0.0625em;
}

#container
{
	position: relative;
	margin: 0;
	z-index: 1;
}

#header,
#main
{
	max-width: 80rem;
	margin: 0 auto;
	position: relative;
}

#header
{
	--scale: .5;
	max-width: calc(80rem * var(--scale));
}

#home #header
{
	--scale: 1;
}

#header h1
{
	position: relative;
}

#header h1::before,
#header h1::after,
#header h1 a::before,
#header h1 a::after,
#wishlist::before
{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	width: calc(29rem * var(--scale));
	height: calc(29rem * var(--scale));
	-webkit-mask-image: url("/img/bigwalk_circle.svg");
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	pointer-events: none;
	z-index: 0;
}

#header h1::before
{
	top: calc(7.5rem * var(--scale));
	left: calc(4rem * var(--scale));
	background-color: var(--blue);
}

#header h1::after
{
	top: calc(4rem * var(--scale));
	left: calc(29rem * var(--scale));
	background-color: var(--red);
}

#header h1 a::before
{
	display: block;
	top: calc(23rem * var(--scale));
	left: calc(46rem * var(--scale));
	background-color: var(--yellow);
}

#header h1 a::after
{
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-mask-image: url("/img/bigwalk_logo.svg");
	background-color: var(--ink);
	pointer-events: all;
	z-index: 10;
}

#header h1
{
	margin: 0;
	color: transparent;
	height: calc(50rem * var(--scale));
}

#header h1 a
{
	display: block;
	color: transparent;
}

#header p
{
	text-align: center;
}

.platform-buttons
{
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
	gap: 1ch;
	margin: 2ch auto;
}

.platform-button
{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5ch;
	padding: .25ch .5ch .125ch .5ch;
	border: .2ch solid transparent;
	border-radius: 3ch;
	flex: 0 0 auto;
	align-self: stretch;
	font-weight: 600;
	mix-blend-mode: multiply;
	position: relative;
	border: 0.375rem solid transparent;
}

.platform-button a
{
	text-decoration: none;
}

.platform-button a::after
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	display: block;
	content: "";
}

.platform-button::before
{
	content: "";
	display: block;
	width: 2ch;
	height: 2ch;
	background: currentcolor;
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	position: relative;
}

.platform-button.playstation
{
	background-color: var(--blue);
	color: white;
}

.platform-button.playstation::before
{
	-webkit-mask-image: url("/img/platform-logos/platform-logo-ps.svg");
}

.platform-button.switch
{
	background-color: var(--red);
	color: white;
}

.platform-button.switch.comingsoon
{
	background-color: transparent;
	color: var(--red);
	border-color: var(--red);
}

.platform-button.switch::before
{
	-webkit-mask-image: url("/img/platform-logos/platform-logo-switch.svg");
}

.platform-button.steam
{
	background-color: var(--green);
	color: white;
}

.platform-button.steam::before
{
	-webkit-mask-image: url("/img/platform-logos/platform-logo-steam.svg");
}

.platform-button.mas
{
	background-color: var(--ink);
	color: white;
}

.platform-button.mas::before
{
	-webkit-mask-image: url("/img/platform-logos/platform-logo-mas.svg");
	bottom: .09375em;
}

/* Preview */

#faq-link
{
	width: fit-content;
	margin: 3rem auto 1rem auto;
	padding: .75em 1.25em;
	border-radius: 2em;

	background: white;
	/* border: .1em solid var(--yellow); */

	text-align: center;
	font-size: .75em;
}
	#faq-link a
	{
		color: var(--red);
		font-weight: 600;
	}

#screenshots ul li:hover,
div.logos div:hover,
.platform-buttons .platform-button:hover
{
	transform: translateY(-0.25rem) scale(1.005);
}

.platform-buttons .platform-button.comingsoon:hover
{
	transform: translateY(0) scale(1);
}

#trailer,
#screenshots ul li,
p#wishlist a,
div.logos div
{
	transform: translateY(0) scale(1);
}

#main p
{
	margin: 1em 0;
}

#trailer,
#mailingList,
#screenshots
{
	margin: 4rem auto;
}

#trailer
{
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: grid;
	place-items: center;
	width: calc(100vw + 1rem);
	height: calc(56.25vw + 1rem);
	max-height: 41rem;
	max-width: 72.5rem;
	cursor: pointer;
	color: transparent;
	background-color: black;
	border-radius: .5rem;
	}

#trailer iframe
{
	transition: 1000ms all ease;
	background: #fff;
	overflow: hidden;
	object-fit: fill;
}

#trailer.poster iframe
{
	opacity: 0;
}

#trailer.poster,
#trailer.loading
{
	background-image: url("/img/poster-image-releasedate.jpg");
}

@supports (background-image: url("/img/poster-image-releasedate.webp"))
{
	#trailer.poster,
	#trailer.loading
	{
		background-image: url("/img/poster-image-releasedate.webp");
	}
}

#trailer.loading
{
	animation-name: pulse;
	animation-duration: 1500ms;
	animation-iteration-count: infinite;
	animation-play-state: running;
	animation-timing-function: ease-in-out;
}

#trailer.playing
{
	animation-name: none;
	z-index: 100;
	position: relative;
}

@keyframes pulse
{
	from { opacity: 1; }
	50% { opacity: 0.35; }
	to { opacity: 1; }
}

#trailer.playing iframe
{
	opacity: 1;
}

#intro
{
	text-align: center;
}

#quotes
{
	max-width: 60rem;
	margin: 0 auto;
}

#quotes .quote
{
	margin: 2em auto;
	text-align: center;
	display: flex;
	flex-flow: column;
	align-items: center;
	gap: 0.25em;
}

#quotes .rating,
#quotes .cite
{
	display: inline-block;
}

#quotes .rating
{
	color: var(--yellow);
	background-color: var(--red);
	border-radius: 1em;
	padding: 0.0625em .5em;
	font-weight: bold;

}

#quotes .cite
{
	color: var(--red);
}

#header p,
#intro p
{
	margin: 0.25em auto;
}

.friends-button,
.screenshots-button
{
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 0.0625em;

	cursor: pointer;
}

body.js .friends,
body.js #screenshots,
body.js form#newsletter div.checkbox,
body.js form#elist_form div.checkbox #disclaimer,
body.js form#newsletter div.checkbox #disclaimer
{
	opacity: 0;
	max-height: 0;
	visibility: hidden;
	pointer-events: none;
	margin: 0;
	overflow: hidden;

	transition-property: margin, opacity, max-height, visibility, pointer-events;
	transition-duration: 0s, .5s, .5s, 1s, 1s;
	transition-delay: .5s, 0s, 0s, 1s, 1s;
	transition-timing-function: ease-in-out;
}

body.js .friends.revealed,
body.js #screenshots.revealed,
body.js form#newsletter div.checkbox.revealed,
body.js form#elist_form div.checkbox.revealed input:checked+label>#disclaimer,
body.js form#newsletter div.checkbox.revealed input:checked+label>#disclaimer,
body.nojs .friends,
body.nojs #screenshots,
body.nojs form#newsletter div.checkbox,
body.nojs form#elist_form div.checkbox #disclaimer,
body.nojs form#newsletter div.checkbox #disclaimer
{
	opacity: 1;
	max-height: 1000vh;
	visibility: visible;
	pointer-events: all;

	transition-delay: .1s, .1s, .1s, 0s, 0s;
}

body.js .friends.revealed,
body.nojs .friends
{
	margin-top: .5em;
	margin-bottom: .5em;
}

.faq-container
{
	margin: 1lh auto;
}

.faq-section
{
	display: flex;
	flex-direction: column;
	gap: 0.25lh;
	padding-left: 1lh;
}

.faq-section summary
{
	font-weight: bold;
	text-indent: -1lh;
}

.faq-section summary a
{
	text-decoration: none;
}

.faq-section-title
{
	text-align: center;
	font-size: 1.2em;
	margin: 1lh 0 .25lh 0;
}

#faq .title a
{
	text-decoration: none;
}

.faq-item:target .faq-item-title
{
	background: var(--yellow);
}

.hidden
{
	position: absolute;
	visibility: hidden;
	pointer-events: none;
	z-index: -1;
}

#mailingList form#elist_form,
#mailingList form#newsletter
{
	justify-content: center;
	align-items: center;
	grid-gap: .5em;
	display: grid;
	grid-template-columns: 2fr 1fr;
}

form#elist_form label,
form#newsletter label,
p#status
{
	text-align: center;
	font-size: 1em;
}

form#elist_form label,
form#newsletter label
{
	grid-row: 1;
	grid-column: 1 / span 2;
	cursor: pointer;
}

p#status
{
	opacity: 0;
	transition-duration: 350ms;
	transition-timing-function: ease;
	transition-property: opacity;
	grid-row: 1;
	grid-column: 1;
	margin: -2.5rem 0 0 0;
	max-height: 0;
}

p#status.success,
p#status.error
{
	opacity: 1;
	margin: 0 0 1em 0;
	color: var(--blue);
	max-height: 100em;
}

form#elist_form div.email,
form#newsletter div.email
{
	grid-row: 1;
	grid-column: 1;
	justify-self: stretch;
}

form#elist_form input#elist_email,
form#newsletter input#mce-EMAIL
{
	font: inherit;
	text-align: left;
	margin: 0;
	width: 100%;
}

form#elist_form input#elist_email::placeholder,
form#newsletter input#mce-EMAIL::placeholder
{
	color: #888;
}

form#elist_form div.checkbox,
form#newsletter div.checkbox
{
	cursor: pointer;
	font-size: .7em;
	font-weight: 600;
	grid-column: 1 / span 2;
}

form#elist_form div.checkbox input,
form#newsletter div.checkbox input
{
	position: relative;
	height: 1.5em;
	width: 1.5em;
}

form#elist_form div.submit-button,
form#newsletter div.submit-button
{
	display: contents;
}

input#elist_email,
input#mce-EMAIL,
button#elist_submit,
input#mc-embedded-subscribe,
.control input
{
		-webkit-appearance: none;
		-moz-appearance: none;
		border: 0;
		font: inherit;
		padding: 0.25em 0.35em;
}

input#elist_email,
input#mce-EMAIL,
.control input
{
	background: white;
	color: var(--text);
	border-radius: 0.4em;
}

button#elist_submit,
input#mc-embedded-subscribe
{
	background-color: var(--primary);
	color: #fff;
	cursor: pointer;
	border: 0.2rem  transparent;
	width: 100%;
	border-radius: 0.4em;
	align-self: stretch;
	grid-column: 2;
	grid-row: 1;
}

form#elist_form p#status,
form#newsletter p#status
{
	grid-row: 1;
	grid-column: 1 / span 2;
}

form#elist_form div.email,
form#newsletter div.email
{
	grid-row: 1;
	grid-column: 1 / span 1;
	justify-self: stretch;
}

form#elist_form div.checkbox #disclaimer,
form#newsletter div.checkbox #disclaimer
{
	font-weight: 400;
}


form#elist_form div.submit-button,
form#newsletter div.submit-button
{
	grid-row: 2;
	grid-column: 2 / span 1;
	justify-self: start;
}

#screenshots ul
{
	margin: 1em auto;
	list-style: none;
	padding: 0;
	display: grid;
	grid-gap: 2rem;
	grid-template-columns: auto;
}

#screenshots ul li
{
	margin: 0;
	position: relative;
	width: 80rem;
	height: calc(80rem * .5625);
}

@media (min-width: 670px)
{
	#screenshots ul
	{
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	#screenshots ul li
	{
		width: 39rem;
		height: calc(39rem * .5625);
	}
}

#screenshots li a
{
	cursor: pointer;
}

#screenshots img
{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	border-radius: 0.2em;
	-webkit-object-fit: cover;
}

#footer nav
{
	text-align: center;
}

#footer nav a
{
	font-style: italic;
}

#footer nav a:hover
{
	color: var(--primary);
}

#footer .copyright,
#footer .links
{
	font-size: .65em;
	text-align: center;
	color: #888;
}

#footer
{
	margin-bottom: 2.5em;
}

div.logos
{
	margin: 2em auto;
	display: flex;
	justify-content: center;
	align-content: center;
}

div.logos a
{
	position: absolute;
	color: transparent;
	width: 100%;
	height: 100%;
}

div#logo-panic,
div#logo-househouse
{
	position: relative;
	height: 3em;
	width: 3em;
	margin: 0 .5em;
	background-color: var(--ink);
}

#logo-panic
{
	-webkit-mask-size: contain;
	-webkit-mask-position: center center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-image: url("/img/panic.svg");
}

#logo-househouse
{
	-webkit-mask-size: contain;
	-webkit-mask-position: center center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-image: url("/img/househouse.svg");
}

#viewer
{
	width: 100vw;
	height: 100vh;
	display: grid;
	place-content: center;
	background: rgba(0,0,0,0.75);
	position: fixed;
	top: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	transition: 250ms opacity ease;
	z-index: 1000;
}

#viewer #image
{
	display: block;
	width: 100vw;
	height: 62.5vw;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	max-width: 100rem;
	max-height: 62.5rem;
	transform: scale(0);
	transition: 500ms transform ease;
	cursor: pointer;
	z-index: 10000;
}

#viewer
{
	width: 100vw;
	height: 100vh;
	display: grid;
	place-content: center;
	background: rgba(0,0,0,0.75);
	position: fixed;
	top: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	transition: 250ms opacity ease;
	z-index: 1000;
}

#viewer #image
{
	display: block;
	width: 100vw;
	height: 62.5vw;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	max-width: 128rem;
	max-height: 80rem;
	transform: scale(0);
	transition: 500ms transform ease;
	cursor: pointer;
	z-index: 10000
}

#zoomedImage
{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

body.viewer
{
	overflow: hidden;
	pointer-events: none;
}

body.viewer #viewer
{
	opacity: 1;
	pointer-events: all;
}

body.viewer #viewer #image
{
	transform: scale(1);
}

.hidden
{
	position: absolute;
	visibility: hidden;
	pointer-events: none;
	z-index: -1;
}

details.faq-item a.faq-item-link
{
	opacity: 0;
	pointer-events: none;
	display: none;
}

details.faq-item[open] a.faq-item-link
{
	opacity: 1;
	pointer-events: auto;
	display: inline-block;
}

a.faq-item-link
{
	margin: 0 0.125em;
	color: var(--green);
	font-family: sans-serif;
	position: relative;
	background-color: var(--green);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21.072 20.92'%3E%3Cpath fill-opacity='.85' d='M10.477 6.354 9.178 7.672c1.29.108 2.13.488 2.764 1.123 1.71 1.71 1.7 4.131.01 5.82L8.759 17.8c-1.7 1.7-4.102 1.71-5.811.01-1.709-1.719-1.7-4.121 0-5.82l1.914-1.915a3.56 3.56 0 0 1-.234-1.982l-2.871 2.861c-2.334 2.344-2.354 5.664.01 8.028 2.372 2.373 5.693 2.353 8.027.02l3.34-3.35c2.343-2.344 2.363-5.664-.01-8.028-.616-.615-1.397-1.054-2.647-1.27m-.244 8.047 1.299-1.319c-1.29-.097-2.129-.488-2.764-1.123-1.709-1.709-1.699-4.13-.01-5.82l3.184-3.184c1.71-1.699 4.111-1.709 5.82 0s1.69 4.121 0 5.81l-1.914 1.915c.274.625.332 1.348.235 1.982l2.87-2.861c2.335-2.344 2.354-5.654-.009-8.027-2.373-2.373-5.693-2.354-8.037-.01l-3.33 3.34c-2.344 2.344-2.363 5.664.01 8.027.615.615 1.396 1.055 2.646 1.27'/%3E%3C/svg%3E");
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	width: .8em;
	height: 100%;
	display: inline-block;
	position: relative;
}

details.faq-item .faq-item-title
{
	cursor: pointer;
}

details.faq-item .faq-item-title:hover
{
	text-decoration: underline;
	text-decoration-thickness: 0.05em;
	text-underline-offset: 0.0625em;
}

/* FAQ Search */

.faq-container #search-container
{
	margin: 1em auto;
}

#search-container label
{
	display: none;
}

#search-container input
{
	width: 100%;
}

#search-results
{
	background: rgba(255,255,255,.25);
	border: 0.25rem solid var(--red);
	padding: .5em;
	margin: .5em 0;
	border-radius: .5em;
}

#search-results .title
{
	margin: 1em 0 0.5em 0;
}

#search-results.hide,
#search-results .title
{
	display: none;
}

#search-results.show,
/* #search-results.show.results .title.results, */
#search-results.show.empty .title.noResults
{
	display: block;
}
#search-results .search-result
{
	margin-bottom: 1em;
}

#search-results .search-result-title
{
	font-weight: 600;
}

#search-results .search-result-excerpt
{
	margin: 0.25em 0 0; opacity: 0.85;
}

#search-results .search-result-excerpt mark
{
	background: rgb(from var(--yellow) r g b / .5);
	color: inherit;
}

.faq-item code
{
	background: rgb(255 255 255 / .25);
	border: 0.1rem solid rgb(from var(--blue) r g b / .25);
	border-radius: 0.25em;
	padding: 0 0.125em;
	font-size: 0.85em;
}