:root {
	--papunet-orange: #F17701;
	--body-margin: 8px;
	--hover-color: #DDD;
	--game-area-padding: 5svw;
	--bg-yellow: #fffcda;
	--bg-purple: #eeeaf2;
	--papu-cursor: url(./images/mouse-cursor.png), auto;
	--papu-pointer: url(./images/mouse-pointer.png), auto;
}

html {
	font-family: "Atkinson Hyperlegible Next";
	font-weight: 400;
	background-color: var(--bg-purple);
	cursor: var(--papu-cursor);
}

body {
	overflow: hidden;
	margin: var(--body-margin);
}

h1, h2, p {
	margin: 0;
}

h1 {
	font-size: 7vmin;
}

a {
	cursor: var(--papu-pointer);
}

a.hover {
	outline: 1px dotted black;
}

#ui {
	position: relative;
	display: flex;
	z-index: 200;
	justify-content: space-between;
	flex-flow: column nowrap;
	height: calc(100svh - var(--body-margin)*2);
	pointer-events: none;
}

#header {
	display: flex;
	justify-content: space-between;
	flex-flow: row nowrap;
	height: 6vmin;
}

#header>img {
	object-fit: contain;
	height: 80%;
}

#header>div {
	display: flex;
	flex-flow: row nowrap;
	gap: 1vmin;
}

#footer {
	display: flex;
	justify-content: space-between;
	flex-flow: row nowrap;
	align-items: flex-end;
}

#footer-game-controls {
	display: flex;
	gap: 1vmin;
	flex-flow: row nowrap;
	/* calc is needed for proper alignment with the bounding box' right edge */
	padding-right: calc(var(--game-area-padding) - var(--body-margin));
}

.pointer-interact {
	pointer-events: auto;
}

.ui-button {
	position: relative;
	display: flex;
	background-color: white;
	border: 0.4vmin solid black;
	border-radius: 1vmin;
	min-width: 6vmin;
	height: 6vmin;
	font-size: 3vmin;
	text-align: center;
	align-items: center;
	justify-content: center;
	cursor: var(--papu-pointer);
	white-space: nowrap;
}

.ui-button.heavy {
	font-weight: 700;
}

.ui-button.disabled {
	cursor: var(--papu-cursor);
	border-color: gray;
	color: gray;
	background-color: #e3e3e3;
}

.ui-button.disabled>img {
	filter: contrast(0);
}

.ui-button.square {
	width: 6vmin;
	font-size: 5vmin; /* for using letters as icons */
}

.ui-button>span {
	padding-left: 1vmin;
	padding-right: 1vmin;
}

.ui-button.square>img {
	object-fit: contain;
	box-sizing: border-box;
	padding: 1vmin;
	width: 100%;
	height: 100%;
}

/* I'll use the .hover class is used for javascript tabulation */
.ui-button:not(.disabled):hover, .ui-button.hover:not(.disabled) {
	border-width: 0.6vmin;
	margin: -0.2vmin;
}

.mm-button:not(.disabled):hover, .mm-button.hover:not(.disabled) {
	border-color: var(--papunet-orange);
}

.ui-text-trigger {
	font-size: 3vmin;
	cursor: var(--papu-pointer);
}

.ui-text-trigger:hover, .ui-text-trigger.hover {
	text-decoration: underline;
}

#game, #screen-shader {
	position: absolute;
	margin: 0;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

#game {
	display: flex;
	z-index: 100;
	align-items: center;
}

#screen-shader {
	z-index: 300;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #00000080;
}

#screen-shader.hidden {
	display: none;
}

.ui-screen {
	padding: 3vmin;
	background-color: white;
	border: 0.4vmin solid black;
	border-radius: 2vmin;
	font-size: 3vmin;
	line-height: 4vmin;
	max-width: 50svw;
}

#screen-credits {
	display: flex;
	gap: 3vmin;
	align-items: flex-end;
	flex-direction: row;
}

#screen-credits>.ui-button {
	flex-shrink: 0;
}

#screen-instructions {
	max-width: 40svw;
	display: flex;
	flex-direction: row;
}

.ui-screen-header {
	font-weight: 600;
	padding-bottom: 3vmin;
}

.groke-container-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 0;
}

.groke-container {
	display: grid;
	height: 100%;
	grid-template-columns: repeat(4, 20svw);
	grid-template-rows: minmax(100%, 25svw);
	gap: 2svw;
	min-height: 0;
}

.groke-card {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: white;
	background-position: center;
	background-size: 90% 90%;
	background-repeat: no-repeat;
	border: 0.3svw solid black;
	border-radius: 5svw;
	cursor: var(--papu-pointer);
}

.groke-card:hover, .groke-card.hover {
	/* background-color: var(--hover-color); */
	border-width: 0.5svw;
	margin: -0.2svw;
}

#screen-play-btn {
	font-size: 5vmax;
	width: 20svw;
	height: 10svh;
}

#game-main-page {
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
	box-sizing: border-box;
	width: 100%;
	height: 80%;
	padding-left: 5vmin;
	padding-right: 5vmin;
}

#game-instructions {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	padding-bottom: 3vmin;
}

#game-instructions-text {
	max-width: 50svw;
}

#game-instructions-text>h1 {
	font-weight: 400;
	padding-bottom: 2vmin;
}

#game-instructions-text>p {
	font-size: 4vmin;
}

#game-play-page {
	position: relative;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	height: 80%;
	width: 100%;
	padding-left: var(--game-area-padding);
	padding-right: var(--game-area-padding);
}

#game-groke-rect {
	box-sizing: border-box;
	width: 35svw;
	height: 100%;
	border: 0.3svw solid black;
	border-radius: 5svw;
	background-color: white;
}

#game-component-rect {
	height: 100%;
	margin-right: 5svw;
	flex: 1;
}

#game-canvas {
	position: absolute;
	z-index: 125;
	left: 0;
	height: 100%;
	width: 100svw;
}

/* speech bubbles */
.speech-bubble {
	position: absolute; /* NOTE: remember to make buttons positioned */
	white-space: nowrap;
	background-color: white;
	right: 20%; /* there should be no buttons to the left of the screen. hopefully */
	border: 0.4vmin solid black;
	border-radius: 1vmin;
	font-size: 3vmin;
	text-align: center;
	padding: 0.5vmin 1vmin;
}

.speech-bubble>svg {
	position: absolute;
	right: 2vmin;
	width: 2vmin;
	height: 2vmin;
}

/* these bubbles are below the button */
.top-spike {
	top: 140%;
}

.top-spike>svg {
	top: -1.73vmin;
}

/* these bubbles are above the button */
.bottom-spike {
	bottom: 140%;
}

.bottom-spike>svg {
	bottom: -1.73vmin;
}