:root {
    --container-background: #150038b0;
    --page-text: #bfd0ce;
    --link-text: #bbafcd;

    /* Set these properties instead, for yes-comic-sans and no-comic-sans mode respectively */
    --font-choice-sans: "Comic Sans MS", "Comic Sans", "Shantell Sans", sans-serif;
    --font-choice-scoreboard-sans: "Scoreboard", "Comic Sans MS", "Comic Sans", sans-serif;
    --font-choice-nosans: "Shantell Sans", sans-serif;
    --font-choice-scoreboard-nosans: "Scoreboard", "Shantell Sans", sans-serif;

    /* These are set by the script, changing them here won't work */
    --font-choice: var(--font-choice-sans);
    --font-choice-scoreboard: var(--font-choice-scoreboard-sans);

    --button-fade-top: #6c5590;
    --button-fade-bottom: #282036;
    --button-text: #d9c7d9;
    --tab-button-text: #eef4ff;

    --page-accent: #a481dc;
    --page-accent-2: #d5bbff;
    --page-accent-3: #bf96ff;
    --page-warning: #ffc0c0;
    --button-border: #bf96ff;
    --button-border-2: #7f64aa;
    --subtitle-old-games: #81dcaf;
    --subtitle-unlimited: #f4efc9;
    --subtitle-timed: #335cb2;

    --daily-button-background-1: #6d2b2b;
    --daily-button-background-2: #441b1b;
    --daily-button-border: #c24d4d;
    --daily-button-border-2: #783030;
    --daily-button-color: #ffe5e5;

    --old-games-button-background-1: #8b448b;
    --old-games-button-background-2: #502750;
    --old-games-button-border: #d973d9;
    --old-games-button-border-2: #975097;
    --old-games-button-color: #ecd6ec;

    --unlimited-button-background-1: #3261ac;
    --unlimited-button-background-2: #2d164d;
    --unlimited-button-border: #4a90ff;
    --unlimited-button-border-2: #376bbd;
    --unlimited-button-color: #e2eeff;

    --timed-button-background-1: #6532ac;
    --timed-button-background-2: #162b4d;
    --timed-button-border: #954aff;
    --timed-button-border-2: #6f37bd;
    --timed-button-color: #eee2ff;

    --random-button-background-1: #3d6682;
    --random-button-background-2: #263f50;
    --random-button-border: #5283d7;
    --random-button-border-2: #4066a8;
    --random-button-color: #dfe9ed;
    --random-button-hue: 0deg;

    --cust-button-background-1: #5a1d8c;
    --cust-button-background-2: #300f4a;
    --cust-button-border: #7a3fab;
    --cust-button-border-2: #512a72;
    --cust-button-color: #dfe9ed;

    --unlimited-game-button-fade-top: #322742;
    --unlimited-game-button-fade-bottom: #140f1c;
    --unlimited-game-button-border: #8268ab;
    --unlimited-game-button-border-2: #6f5794;
    --unlimited-dull-text: #98a5a4;

    --cust-hexagon-border: #68527a;
    --cust-hexagon-border-2: #68527a;
    --cust-hexagon-border-3: #534161;
    --cust-hexagon-color: #cec4d0;
    --cust-hexagon-inner-fade-1: #361d4c;
    --cust-hexagon-inner-fade-2: #14091c;
    --cust-hexagon-center-border: #a698b1;
    --cust-hexagon-center-border-2: #8e4fc2;
    --cust-hexagon-center-border-3: #6f3e97;
    --cust-hexagon-center-inner-fade-1: #7e53a1;
    --cust-hexagon-center-inner-fade-2: #4c0d80;
    --cust-hexagon-center-inner-fade-3: #300f4a;

    --cust-hexagon-border-disabled: #555555;
    --cust-hexagon-border-2-disabled: #444444;
    --cust-hexagon-border-3-disabled: #333333;
    --cust-hexagon-color-disabled: #777777;
    --cust-hexagon-inner-fade-1-disabled: #333333;
    --cust-hexagon-inner-fade-2-disabled: #111111;
    --cust-hexagon-center-border-disabled: #606060;
    --cust-hexagon-center-border-2-disabled: #505050;
    --cust-hexagon-center-border-3-disabled: #404040;
    --cust-hexagon-center-inner-fade-1-disabled: #333333;
    --cust-hexagon-center-inner-fade-2-disabled: #202020;
    --cust-hexagon-center-inner-fade-3-disabled: #101010;

    --calendar-button-background: #00000020;
    --calendar-top-fade-top: #ffffff10;
    --calendar-top-fade-bottom: #ffffff30;
    --calendar-weekday-row-background: #ffffff20;
    --calendar-dull-text: #98a5a4;

    --cust-button-shuffle-fill: #dfe9ed;
    --cust-button-shuffle-fill-disabled: #777777;

	--wasp-total-progress: 0%;
	--controls-width: 100%;
    --hive-width: 70%;
    --hive-max-width: 40vh;
    --hive-font-size: 1.8rem;
    --hive-button-size: 2.5rem;

    --wasp-page-background: #000000;
    --wasp-popup-background: #220d49a0;
    --wasp-bubble-background-1: #35294c;
    --wasp-bubble-background-2: #5c3a99;
    --wasp-bubble-word-color: #eef4ff;

    --wasp-page-hpadding: 30%;
    --wasp-page-vpadding: 0;
    --wasp-page-hborder: 0.25em solid var(--page-accent);
    --wasp-page-separator: 0.1em solid var(--page-accent);
    --wasp-title-size: 2rem;
    --wasp-subtitle-size: 1.5rem;
    --wasp-subtitle-2-size: 1.25rem;
    --wasp-subtitle-3-size: 1.05rem;

    --wasp-table-header-background: #2b1357;
    --wasp-placeholder-text: #888888;

    --wasp-passing-text: #ff8fc0;
    --wasp-smartie-text: #ffffc0;
    --wasp-winning-text: #c0ffc0;
    --wasp-whoring-text: #c0ffff;
    --wasp-perfect-text: #ffc0ff;
    --wasp-passing-shadow: #c0600050;
    --wasp-smartie-shadow: #c0c00050;
    --wasp-winning-shadow: #00c00050;
    --wasp-whoring-shadow: #00c0c050;
    --wasp-perfect-shadow: #c000c050;

    --wasp-pangram-text: #ccb8ec;
    --wasp-pangram-shadow: #7023ecc0;

    --progress-bar-background: #000000;
    --wasp-progress-0: #666666;
    --wasp-progress-1: #8a1616;
    --wasp-progress-2: #bf7a13;
    --wasp-progress-3: #cccc00;
    --wasp-progress-4: #32e020;
    --wasp-progress-5: #20d2e0;
    --wasp-progress-6: #7042ef;
    --wasp-progress-7: #e85def;
    --wasp-progress-8: #ffffff;

    --wasp-progress-margin: 20rem;
    --wasp-progress-border: 0.15rem;
    --wasp-navi-gap: 2.5rem;
    --wasp-chart-cell-size: 1.8rem;
    --wasp-chart-font-size: 0.8rem;
    --wasp-status-font-size: 1.2rem;
    --wasp-navi-font-size: 1.1rem;
    --wasp-guess-font-size: 1.75rem;
    --wasp-score-font-size: 1.5rem;
    --wasp-rank-font-size: 1.2rem;
    --wasp-words-size: 1rem;
    --wasp-generic-font-size: 1rem;

    --wasp-status-display: #181818;
    --wasp-status-border: #606060;
    --wasp-status-border-2: #404040;
    --wasp-status-color: #ffffff;
    --wasp-status-shadow-color: #ffffff60;
    --wasp-chart-cell-highlight-1: #ffffff14;
    --wasp-chart-cell-highlight-2: #ffffff20;
    --wasp-progress-bar-height: 1.2rem;
    --wasp-tick: #888888;
    --wasp-tick-passing: #804000;
    --wasp-tick-smartie: #808000;
    --wasp-tick-winning: #008000;
    --wasp-tick-whoring: #008080;
    --wasp-tick-perfect: #800080;
    --wasp-tick-complete: #ffffff;
    --wasp-tick-passing-complete: #ff8060;
    --wasp-tick-smartie-complete: #ffff60;
    --wasp-tick-winning-complete: #60ff60;
    --wasp-tick-whoring-complete: #c0ffff;
    --wasp-tick-perfect-complete: #ffc0ff;
    --wasp-tick-complete-shadow: #ffffff80;
    --wasp-tick-passing-complete-shadow: #ff806080;
    --wasp-tick-smartie-complete-shadow: #ffff6080;
    --wasp-tick-winning-complete-shadow: #60ff6080;
    --wasp-tick-whoring-complete-shadow: #c0ffff80;
    --wasp-tick-perfect-complete-shadow: #ffc0ff80;
    --wasp-tick-border: #000000;
    --wasp-tick-complete-border: #333333;
    --wasp-tick-width: 0.20rem;
    --wasp-tick-height: 140%;
    --wasp-tick-stop: 0%; /* This gets set by each tick's class */
    --wasp-auto-grid-min-width: 160px;
    --wasp-unlimited-auto-grid-min-width: 180px;

    /* These are set programmatically */
    --hive-background-width: 0px;
    --hive-background-height: 0px;
}

@font-face {
    font-family: 'Comic Sans MS';
    src: local('Comic Sans MS');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    size-adjust: 90%;
}

@font-face {
    font-family: 'Comic Sans';
    src: local('Comic Sans');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    size-adjust: 90%;
}

@font-face {
    font-family: 'Comic Mono';
    src: url('ComicMono.ttf');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Scoreboard';
    src: url('scoreboard.ttf');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Shantell Sans';
    src: url('ShantellSans.woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    size-adjust: 90%;
}

@keyframes caret-blink {
	0% {
		visibility: visible;
	}
	50% {
		visibility: hidden;
	}
}

@keyframes bg-move {
    from {
        transform: translateX(calc(var(--hive-background-width) * -1)) translateY(calc(var(--hive-background-height) * -1));
    }
    to {
        transform: translateX(0px) translateY(0px);
    }
}

/* These are a hack to get Shantell Sans and Comic Sans to load permanently */
#shitdick, #shitdick2, #shitdick3, #shitdick4 {
    position: absolute;
    font-size: 1px;
    color: #00000001;
    visibility: hidden;
    user-select: none;
    pointer-events: none;
}

#shitdick  { font-family: "Shantell Sans"; }
#shitdick2 { font-family: "Comic Sans"; }
#shitdick3 { font-family: "Comic Sans MS"; }
#shitdick4 { font-family: "Scoreboard"; }

* {
	box-sizing: border-box;
}

#background-gradient {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(#00000000 80%, #00000080);
    z-index: -250;
}

#wasp-background-anim {
    position: fixed;
    background: none 0% 0% repeat;
    animation: bg-move 30s steps(450) infinite;
    top: calc(var(--hive-background-height) * -0.5);
    left: calc(var(--hive-background-width) * -0.5);
    width: calc(100% + (var(--hive-background-width) * 2));
    height: calc(100% + (var(--hive-background-width) * 2));
    overflow: hidden;
    z-index: -500;
    filter: brightness(0.75) blur(2px);
}

#wasp-background-anim.disabled {
	animation: none;
}

html, textarea {
	height: 100%;
}

html, textarea, body, * {
    font-size: 1em;
    font-family: var(--font-choice);
    font-variation-settings: "BNCE" 10, "INFM" 20;
}

body {
    background-color: var(--page-background);
    color: var(--page-text);
	touch-action: pan-x pan-y;
}

/* This is for preloading some assets */
body::after {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	z-index: -1;
	content: url("images/waspgame/explosion.png") url("images/waspgame/explosion-green.png") url("images/waspgame/scorch-mark.png");
}

a {
    color: var(--page-accent);
}

a:hover {
    filter: brightness(1.2);
}

h1 {
	font-size: var(--wasp-title-size);
    font-weight: bold;
}

h2 {
    clear: both;
    width: 100%;
	margin-top: 0.5rem !important;
	margin-bottom: 0;
	font-size: var(--wasp-subtitle-size);
	font-weight: bold;
}

h2:first-of-type {
    margin-top: 0;
}

h3 {
	margin-bottom: 0;
	font-size: var(--wasp-subtitle-2-size);
	font-weight: bold;
	color: var(--page-accent-2);
}

h3:not(:first-child) {
	margin-top: 1.5rem !important;
}

h4 {
	margin-top: 1.5rem !important;
	margin-bottom: 0.25rem;
	font-size: var(--wasp-subtitle-3-size);
	font-weight: bold;
	color: var(--page-accent-3);
}

hr {
    clear: both;
    color: var(--page-text);
	margin-top: 1rem;
    margin-bottom: 1.2rem;
}

p, label {
	font-size: var(--wasp-generic-font-size);
	margin: 0;
	padding: 0;
	line-height: calc(var(--wasp-generic-font-size) * 1.3);
}

label {
	vertical-align: middle;
}

p:not(:first-child) {
	margin-top: 1rem;
}

ul {
    list-style-type: disc;
}

ul, ol, li {
	font-size: var(--wasp-generic-font-size);
	line-height: calc(var(--wasp-generic-font-size) * 1.3);
	margin-top: var(--wasp-generic-font-size);
}

li {
	margin-top: calc(var(--wasp-generic-font-size) * 0.5);
	margin-left: calc(var(--wasp-generic-font-size) * 2.5);
}

button {
    font-size: var(--wasp-generic-font-size);
}

legend {
	font-size: var(--wasp-generic-font-size);
}

fieldset {
	border: 0.1rem solid var(--page-accent);
	padding: calc(var(--wasp-generic-font-size) * 0.5);
	margin-top: calc(var(--wasp-generic-font-size) * 1);
}

fieldset .setting-field:first-of-type {
	margin-top: 0;
}

legend {
	color: var(--page-accent-2);
	font-weight: bold;
	margin-left: calc(var(--wasp-generic-font-size) * 0.5);
	padding: 0 calc(var(--wasp-generic-font-size) * 0.5);
}

.wasp-icon {
	display: none;
}

#overlay {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	z-index: 2000;
}

.neocities-footer-container {
	display: grid;
	grid-template-rows: 1fr;
	align-items: center;
	justify-items: center;
	width: 100%;
	margin-top: calc(var(--wasp-generic-font-size) * 2);
}

.neocities-footer-container a {
	text-decoration: none;
	color: var(--page-text);
}

.neocities-footer {
	background-color: #ffffff10;
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	justify-items: center;
	border: 0.1rem solid var(--page-accent);
	border-radius: calc(var(--wasp-generic-font-size) * 0.75);
	height: calc(var(--wasp-generic-font-size) * 4);
	width: calc(var(--wasp-generic-font-size) * 11);
}

.neocities-footer .neocities-small {
	/*letter-spacing: calc(var(--wasp-generic-font-size) * 0.01);*/
	font-size: calc(var(--wasp-generic-font-size) * 0.9);
	font-weight: bold;
}

.neocities-footer .neocities-big {
	/*letter-spacing: 0.02rem;*/
	font-size: calc(var(--wasp-generic-font-size) * 1.5);
	font-weight: bold;
}

.neocities-footer img {
	max-height: calc(var(--wasp-generic-font-size) * 3.5);
}

input[type="checkbox"] {
    display: inline-block;
    vertical-align: middle;
    appearance: none;
    width: calc(var(--wasp-generic-font-size) * 1.1);
    height: calc(var(--wasp-generic-font-size) * 1.1);
    
    accent-color: var(--page-accent);
    background-color: var(--button-fade-bottom);
    border: 0.1rem solid var(--page-accent);
}

input[type="radio"] {
    display: inline-grid;
    place-content: center;
    vertical-align: middle;
    appearance: none;
    width: calc(var(--wasp-generic-font-size) * 1.1);
    height: calc(var(--wasp-generic-font-size) * 1.1);
    border-radius: 50%;
    
    accent-color: var(--page-accent);
    background-color: var(--button-fade-bottom);
    border: 0.1rem solid var(--page-accent);
}

input[type="radio"]::before {
    content: "";
    width: calc(var(--wasp-generic-font-size) * 0.55);
    height: calc(var(--wasp-generic-font-size) * 0.55);
    border-radius: 50%;
    box-shadow: inset calc(var(--wasp-generic-font-size) * 0.55) calc(var(--wasp-generic-font-size) * 0.55) var(--page-accent);
    transform: scale(0);
}

input[type="checkbox"]:hover,
input[type="radio"]:hover {
    filter: brightness(1.5);
}

input[type="checkbox"]:active,
input[type="radio"]:active {
    filter: brightness(0.8);
}

input[type="checkbox"]:checked {
    background-color: var(--page-accent);
    background-size: cover;
    padding: 0.1rem;
}

input[type="radio"]:checked::before {
    transform: scale(1);
}

input[type="checkbox"]:not(:disabled):checked {
    border-color: var(--page-accent);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 32 32" xml:space="preserve"><path style="fill: %23282036" d="M11.941,28.877l-11.941-11.942l5.695-5.696l6.246,6.246l14.364-14.364L32,8.818"/></svg>');
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    filter: brightness(0.7) grayscale(1);
}

input[type="checkbox"]:disabled:checked {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 32 32" xml:space="preserve"><path style="fill: %23222222" d="M11.941,28.877l-11.941-11.942l5.695-5.696l6.246,6.246l14.364-14.364L32,8.818"/></svg>');
}

.wasp-page-container {
	position: fixed;
	display: grid;
	grid-template-rows: auto 1fr auto;
	height: 100%;
	width: 100%;
	overflow: auto;
}

#background-solid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1000;
	background-color: var(--wasp-page-background);
}

.cust-button {
    box-sizing: border-box;
    background: linear-gradient(var(--cust-button-background-1), var(--cust-button-background-2));
    border: 0.15rem solid var(--cust-button-border);
    border-bottom-color: var(--cust-button-border-2);
    border-right-color: var(--cust-button-border-2);
    color: var(--cust-button-color);
    width: 100%;
    height: var(--hive-button-size);
    margin: 0 auto;
    text-shadow: 0.05rem 0.05rem 0.125rem #000;
    text-align: center;
    font-weight: bold;
    user-select: none;
}

.cust-button:not(:disabled):hover,
.cust-hexagon:not(:disabled):hover,
.corner-button:not(:disabled):hover {
    filter: brightness(1.3);
}

.cust-button:not(:disabled):active,
.cust-hexagon:not(:disabled):active {
    filter: brightness(0.75);
    border-top-color: var(--cust-button-border-2);
    border-left-color: var(--cust-button-border-2);
    border-bottom-color: var(--cust-button-border);
    border-right-color: var(--cust-button-border);
}

.corner-button:not(:disabled):active {
    filter: brightness(0.75);
}

.wasp-container-fit {
	align-self: start;
	text-align: left;
	height: 100%;
	width: 100%;
	overflow: auto;
}

.wasp-container {
	display: grid;
	grid-template-rows: auto auto 1fr;
	grid-template-columns: 32.5% 35% 32.5%;
	grid-row-gap: 0.5rem;
	align-items: center;
	text-align: center;
	width: 100%;
	min-height: 100%;
	margin: 0 auto;

	.progress-row {
		display: grid;
		grid-column-start: 1;
		grid-column-end: 4;
		grid-template-rows: repeat(4, auto);
		grid-row-gap: 0.4rem;
		align-items: center;
		text-align: center;
		margin: 0 1rem 0;
	}

	.progress-bar-sect {
		display: grid;
		grid-template-rows: auto 1fr;
		grid-template-columns: 1fr max(calc(100% - var(--wasp-progress-margin)), 50%) 1fr;
		grid-column-gap: 0.5rem;
		align-items: center;
		justify-items: center;
		width: 100%;
	}

	.progress-bar-sect .upper {
		grid-area: 1 / 2 / 2 / 3;
		width: 100%;
	}

	#tick-labels.disabled {
		display: none;
	}

	.progress-bar-sect .upper .labels {
		display: grid;
		grid-template-columns: repeat(9, calc(100% / 9));
		margin: 0 5.3%;
		margin-bottom: calc(var(--wasp-generic-font-size) * 0.4);
		width: 89.4%;
	}

	.tick-label {
		font-size: calc(var(--wasp-generic-font-size) * 0.7);
		font-weight: bold;
	}

	.tick-label:last-of-type {
		grid-column-start: 8;
		grid-column-end: 10;
	}

	.tick-label.complete {
		opacity: 0.5;
	}

	.score.min, .score.max {
		display: block;
		width: 100%;
		font-size: calc(var(--wasp-generic-font-size) * 0.8);
	}
	.score.min { text-align: right; grid-area: 2 / 1 / 3 / 2; }
	.score.max { text-align: left; grid-area: 2 / 3 / 3 / 4; }

	.progress-bar-wrapper {
		width: 100%;
		position: relative;
		grid-area: 2 / 2 / 3 / 3;
	}

	.progress-bar {
		background-color: var(--progress-bar-background);
		border: var(--wasp-progress-border) solid var(--page-accent);
		overflow: hidden;
		border-radius: 1rem;
		height: var(--wasp-progress-bar-height);
		width: 100%;
	}

	.progress-bar-tick-wrapper {
		position: absolute;
		height: 100%;
		/* Account for the progress bar's border width */
		width: calc(100% - var(--wasp-progress-border) * 2);
		left: 0.15rem;
	}

	.progress-bar-tick {
		position: absolute;
		border: 1px solid var(--wasp-tick-border);
		background-color: var(--wasp-tick);
		width: var(--wasp-tick-width);
		height: var(--wasp-tick-height);
		left: calc(var(--wasp-tick-stop) - (var(--wasp-tick-width) / 2));
		top: calc((var(--wasp-tick-height) - 100%) / -2);
		z-index: 1000;
	}

	.progress-bar-tick.passing { background-color: var(--wasp-tick-passing); }
	.progress-bar-tick.smartie { background-color: var(--wasp-tick-smartie); }
	.progress-bar-tick.winning { background-color: var(--wasp-tick-winning); }
	.progress-bar-tick.whoring { background-color: var(--wasp-tick-whoring); }
	.progress-bar-tick.perfect { background-color: var(--wasp-tick-perfect); }

	.progress-bar-tick.complete {
		border-color: var(--wasp-tick-complete-border);
		background-color: var(--wasp-tick-complete);
		box-shadow: 0 0 0.3rem 0.05rem var(--wasp-tick-complete-shadow);
	}

	.progress-bar-tick.passing.complete {
		background-color: var(--wasp-tick-passing-complete);
		box-shadow: 0 0 0.3rem 0.05rem var(--wasp-tick-passing-complete-shadow);
	}

	.progress-bar-tick.smartie.complete {
		background-color: var(--wasp-tick-smartie-complete);
		box-shadow: 0 0 0.3rem 0.05rem var(--wasp-tick-smartie-complete-shadow);
	}

	.progress-bar-tick.winning.complete {
		background-color: var(--wasp-tick-winning-complete);
		box-shadow: 0 0 0.3rem 0.05rem var(--wasp-tick-winning-complete-shadow);
	}

	.progress-bar-tick.whoring.complete {
		background-color: var(--wasp-tick-whoring-complete);
		box-shadow: 0 0 0.3rem 0.05rem var(--wasp-tick-whoring-complete-shadow);
	}

	.progress-bar-tick.perfect.complete {
		background-color: var(--wasp-tick-perfect-complete);
		box-shadow: 0 0 0.3rem 0.05rem var(--wasp-tick-perfect-complete-shadow);
	}

	.progress-bar-tick.one { --wasp-tick-stop: 10% }
	.progress-bar-tick.two { --wasp-tick-stop: 20% }
	.progress-bar-tick.three { --wasp-tick-stop: 30% }
	.progress-bar-tick.four { --wasp-tick-stop: 40% }
	.progress-bar-tick.five { --wasp-tick-stop: 50% }
	.progress-bar-tick.six { --wasp-tick-stop: 60% }
	.progress-bar-tick.seven { --wasp-tick-stop: 70% }
	.progress-bar-tick.eight { --wasp-tick-stop: 85% }
	.progress-bar-tick.nine { --wasp-tick-stop: 100% }

	.progress-bar-partial {
		background: linear-gradient(90deg,
			var(--wasp-progress-0) 0%,
			var(--wasp-progress-1) 10%,
			var(--wasp-progress-2) 20%,
			var(--wasp-progress-3) 30%,
			var(--wasp-progress-4) 40%,
			var(--wasp-progress-5) 50%,
			var(--wasp-progress-6) 60%,
			var(--wasp-progress-7) 70%,
			var(--wasp-progress-8) 100%);
		height: 100%;
		width: 100%;
		clip-path: xywh(0px 0px var(--wasp-total-progress) 100%);
	}

	.rank {
		font-size: var(--wasp-rank-font-size);
		font-weight: bold;
		margin: 0 auto;
        height: var(--wasp-rank-font-size);
		width: calc(100% - var(--wasp-rank-font-size) * 4);
        overflow: visible;
	}

	.score {
		font-size: var(--wasp-score-font-size);
		font-weight: bold;
	}

	.controls-row {
        position: relative;
		align-self: start;
		justify-self: center;
		width: calc(100% - 2rem);
		margin: 0 auto;
        height: calc(100% - 1rem);
	}

	.wasp-hive-wrapper {
        position: absolute;
		display: grid;
		grid-template-rows: auto 1fr;
		align-items: center;
		justify-items: center;
		width: var(--controls-width);
		margin: 0 auto;
        height: 100%;
	}

    .wasp-elapsed {
        display: grid;
        align-items: center;
        min-height: 2rem;
        height: 100%;
        color: var(--page-accent-2);
        font-weight: bold;
        font-size: calc(var(--wasp-generic-font-size) * 1.2);
    }

	.wasp-words {
		background-color: var(--container-background);
		border: 0.1rem solid var(--page-accent);
		align-self: start;
		justify-self: center;
		width: 80%;
		height: calc(100% - 1rem);
		text-align: left;
		overflow: auto;
		position: relative;
		grid-column-start: 3;
		grid-column-end: 4;
		grid-row-start: 3;
		grid-row-end: 4;
		font-size: var(--wasp-words-size);
	}

	#wasp-guesses {
		position: absolute;
	}

    #wasp-chart-container, #wasp-chart-container > * {
        user-select: none;
    }

	.wasp-chart {
		align-self: start;
		justify-self: center;
		width: 80%;
		height: calc(100% - 1rem);
		margin-bottom: 1rem;
		text-align: left;
		overflow: auto;
		position: relative;
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 3;
		grid-row-end: 4;
	}

	#wasp-chart, #wasp-chart-2letters {
		position: absolute;
		background-color: var(--container-background);
		max-height: 100%;
		border-collapse: unset; /* This is needed because of a bug that doesn't render the th borders properly on Firefox */
		font-size: var(--wasp-chart-font-size);
		table-layout: fixed;
		text-transform: uppercase;
	}

	#wasp-chart-2letters {
		display: none;
	}

	#wasp-chart td.remaining, #wasp-chart-2letters td.remaining {
		background-color: var(--wasp-chart-cell-highlight-1);
	}

	#wasp-chart thead, #wasp-chart tr > th,
	#wasp-chart-2letters thead, #wasp-chart-2letters tr > th {
		position: sticky;
		background-color: var(--wasp-table-header-background);
	}

	#wasp-chart thead, #wasp-chart-2letters thead {
		top: 0;
		z-index: 3;
	}

	#wasp-chart th, #wasp-chart-2letters th {
		font-weight: bold;
		left: 0;
		z-index: 1;
	}

	#wasp-chart th, #wasp-chart td,
	#wasp-chart-2letters th, #wasp-chart-2letters td {
		min-width: var(--wasp-chart-cell-size);
		height: var(--wasp-chart-cell-size);
		border: 0.075rem solid var(--page-accent);
		border-right: none;
		border-bottom: none;
		vertical-align: middle;
		text-align: center;
	}

	#wasp-chart td:last-child, #wasp-chart tr:last-child td,
	#wasp-chart-2letters td:last-child, #wasp-chart-2letters tr:last-child td {
		background-color: var(--wasp-chart-cell-highlight-2);
	}

	#wasp-chart td:last-child, #wasp-chart th:last-child,
	#wasp-chart-2letters td:last-child, #wasp-chart-2letters th:last-child {
		border-right: 0.075rem solid var(--page-accent);
	}

	#wasp-chart tbody tr:last-child td, #wasp-chart tbody tr:last-child th,
	#wasp-chart-2letters tbody tr:last-child td, #wasp-chart-2letters tbody tr:last-child th {
		border-bottom: 0.075rem solid var(--page-accent);
	}

	.button-swap-chart {
		display: grid;
		grid-template-rows: 1fr;
		align-items: center;
		justify-items: center;
		background: linear-gradient(var(--button-fade-top), var(--button-fade-bottom));
		border: none;
		color: var(--button-text);
		font-weight: bold;
		font-size: var(--wasp-generic-font-size);
		height: 100%;
		width: 100%;
	}

	.button-swap-chart:hover, .button-swap-chart:focus {
		filter: brightness(1.2);
	}

	.button-swap-chart:active {
		filter: brightness(0.75);
	}

	/*#wasp-chart thead th { border-top: none; }
	#wasp-chart th:first-child, #wasp-chart td:first-child { border-left: none; }*/

	#wasp-guesses {
		display: block;
		margin: 0.5rem;
		line-height: 1.3rem;
		text-transform: capitalize;
	}

	#wasp-guesses.nocap {
		text-transform: none;
	}

	#wasp-guesses .warning {
		color: #ff0000;
		text-transform: none;
		font-weight: bold;
	}

	#wasp-caret {
		display: inline-block;
		animation: caret-blink 1s steps(1) infinite;
		text-align: center;
		position: absolute;
	}

	#wasp-caret.disabled {
		animation: none;
		visibility: hidden;
	}

	.cust-controls {
	    padding: 0;
	    border: 0;
	    width: max(250px, var(--controls-width));
	    z-index: 10;
	}

	.cust-hive {
	    --gap: 0.2rem;
	    --border: 8%;
	    height: auto;
	    width: var(--hive-width);
	    max-width: var(--hive-max-width);
	    margin: 0 auto;
	    aspect-ratio: 1 / 1;
	    display: grid;
	    align-items: center;
	}

	.cust-hexagon {
	    display: grid;
	    grid-area: 1 / 1;
	    align-items: center;
	    justify-items: center;
	    border: 0;
	    padding: 0;
	    background: linear-gradient(150deg,
	    				var(--cust-hexagon-border) 0%,
	    				var(--cust-hexagon-border-2) 30%,
	    				var(--cust-hexagon-border-3) 100%);
	    width: 33%;
	    height: auto;
	    margin: 0 auto;
	    text-align: center;
	    font-size: var(--hive-font-size);
	    font-weight: bold;
	    aspect-ratio: 1/cos(30deg);
	    clip-path: polygon(50% -50%, 100% 50%, 50% 150%, 0 50%);
	    user-select: none;
	}

	.cust-hexagon div {
	    display: grid;
	    aspect-ratio: 1/cos(30deg);
	    background: linear-gradient(150deg, var(--cust-hexagon-inner-fade-1), var(--cust-hexagon-inner-fade-2));
	    height: auto;
	    width: calc(100% - var(--border));
	    margin: 0;
	    align-items: center;
	    justify-items: center;
	    clip-path: polygon(50% -50%, 100% 50%, 50% 150%, 0 50%);
	}

	.cust-hexagon.alt {
	    width: auto;
	    height: 33%;
	}

	.cust-hexagon.alt, .cust-hexagon.alt div {
		aspect-ratio: cos(30deg);
  		clip-path: polygon(-50% 50%, 50% 100%, 150% 50%, 50% 0);
	}

	.cust-hexagon span {
	    color: var(--cust-hexagon-color);
	    text-transform: uppercase;
	    
		text-shadow: 0.1rem 0.1rem 0.05rem #000000,
					 0.1rem -0.1rem 0.05rem #000000,
					 -0.1rem 0.1rem 0.05rem #000000,
					 -0.1rem -0.1rem 0.05rem #000000;
	}

	.cust-hexagon.center {
	    background: linear-gradient(150deg, 
	    				var(--cust-hexagon-center-border) 0%,
	    				var(--cust-hexagon-center-border-2) 30%,
	    				var(--cust-hexagon-center-border-3) 100%);
	}

	.cust-hexagon.center div {
	    background: linear-gradient(150deg,
	    				var(--cust-hexagon-center-inner-fade-1) 0%,
	    				var(--cust-hexagon-center-inner-fade-2) 40%,
	    				var(--cust-hexagon-center-inner-fade-3) 100%);
	}

	
	.cust-hexagon:disabled {
		background: linear-gradient(150deg,
		    				var(--cust-hexagon-border-disabled) 0%,
		    				var(--cust-hexagon-border-2-disabled) 30%,
		    				var(--cust-hexagon-border-3-disabled) 100%);
		filter: none;
	}
	.cust-hexagon:disabled div {
		background: linear-gradient(150deg, var(--cust-hexagon-inner-fade-1-disabled), var(--cust-hexagon-inner-fade-2-disabled));
	}
	.cust-hexagon.center:disabled {
		background: linear-gradient(150deg, 
	    				var(--cust-hexagon-center-border-disabled) 0%,
	    				var(--cust-hexagon-center-border-2-disabled) 30%,
	    				var(--cust-hexagon-center-border-3-disabled) 100%);
	}
	.cust-hexagon.center:disabled div {
		background: linear-gradient(150deg,
	    				var(--cust-hexagon-center-inner-fade-1-disabled) 0%,
	    				var(--cust-hexagon-center-inner-fade-2-disabled) 40%,
	    				var(--cust-hexagon-center-inner-fade-3-disabled) 100%);
	}
	.cust-hexagon:disabled div span {
		color: var(--cust-hexagon-color-disabled) !important;
	}

	.cust-hive .one   { transform: translate(calc(0% + (0 * var(--gap))), calc(-100% + (-1 * var(--gap)))); }
	.cust-hive .two   { transform: translate(calc(-75% + (-0.866025 * var(--gap))), calc(-50% + (-0.5 * var(--gap)))); }
	.cust-hive .three { transform: translate(calc(75% + (0.866025 * var(--gap))), calc(-50% + (-0.5 * var(--gap)))); }
	.cust-hive .four  { transform: translate(calc(-75% + (-0.866025 * var(--gap))), calc(50% + (0.5 * var(--gap)))); }
	.cust-hive .five  { transform: translate(calc(75% + (0.866025 * var(--gap))), calc(50% + (0.5 * var(--gap)))); }
	.cust-hive .six   { transform: translate(calc(0% + (0 * var(--gap))), calc(100% + (1 * var(--gap)))); }

	.cust-hive .alt.one   { transform: translate(calc(-100% + (-1 * var(--gap))), calc(0% + (0 * var(--gap)))); }
	.cust-hive .alt.two   { transform: translate(calc(-50% + (-0.5 * var(--gap))), calc(-75% + (-0.866025 * var(--gap)))); }
	.cust-hive .alt.three { transform: translate(calc(-50% + (-0.5 * var(--gap))), calc(75% + (0.866025 * var(--gap)))); }
	.cust-hive .alt.four  { transform: translate(calc(50% + (0.5 * var(--gap))), calc(-75% + (-0.866025 * var(--gap)))); }
	.cust-hive .alt.five  { transform: translate(calc(50% + (0.5 * var(--gap))), calc(75% + (0.866025 * var(--gap)))); }
	.cust-hive .alt.six   { transform: translate(calc(100% + (1 * var(--gap))), calc(0% + (0 * var(--gap)))); }

	.cust-panel {
	    display: grid;
        position: relative;
	    grid-template-columns: 1fr 3rem 1fr;
	    gap: 1rem;
	    margin: 0 auto;
		width: var(--controls-width);
	    justify-items: stretch;
	    text-align: center;
        padding: 0;
	}

    .cust-button:disabled,
    .corner-button:disabled {
		color: var(--cust-hexagon-color-disabled);
	}

	.cust-button.delete,
	.cust-button.enter {
	    border-radius: 0.5rem;
	}

    .corner-button {
        position: relative;
        background: var(--cust-button-border);
        border: 0;
        color: var(--cust-button-color);
        margin: 0 auto;
        padding: 0;
        text-shadow: 0.05rem 0.05rem 0.125rem #000;
        text-align: center;
        font-weight: bold;
        user-select: none;
    }

    .corner-button.delete div,
    .corner-button.enter div {
        --border: 0.15rem;
        display: grid;
        aspect-ratio: 1/1;
        border: 0;
        background: linear-gradient(var(--cust-button-background-1), var(--cust-button-background-2));
        height: 100%;
        width: 100%;
        margin: 0;
        align-items: end;
        justify-items: center;
    }
    .corner-button div span {
        margin-bottom: calc(20% - (var(--wasp-generic-font-size) * 0.5));
    }
    .corner-button.delete { clip-path: polygon(100% 60%, 75% 60%, 40% 0, 0 0, 0 100%, 100% 100%); left: 0; }
    .corner-button.enter  { clip-path: polygon(0% 60%, 25% 60%, 60% 0%, 100% 0%, 100% 100%, 0% 100%); right: 0 }
    .corner-button.delete div { clip-path: polygon(
        calc(100% - var(--border)) calc(60% + var(--border)),
        calc(75% - (var(--border)) * 0.5) calc(60% + var(--border)),
        calc(40% - (var(--border)) * 0.5) calc(0% + var(--border)),
        calc(0% + var(--border)) calc(0% + var(--border)),
        calc(0% + var(--border)) calc(100% - var(--border)),
        calc(100% - var(--border)) calc(100% - var(--border))); }

    .corner-button.enter div  { clip-path: polygon(
        calc(0% + var(--border)) calc(60% + var(--border)),
        calc(25% + (var(--border)) * 0.5) calc(60% + var(--border)),
        calc(60% + (var(--border)) * 0.5) calc(0% + var(--border)),
        calc(100% - var(--border)) calc(0% + var(--border)),
        calc(100% - var(--border)) calc(100% - var(--border)),
        calc(0% + var(--border)) calc(100% - var(--border))); }

    .corner-button.delete,
    .corner-button.enter {
        aspect-ratio: 1/1;
        width: 33%;
        height: auto;
        position: absolute;
        bottom: 0;
    }

	.cust-button.shuffle {
	    display: grid;
	    border-radius: 50%;
	    aspect-ratio: 1/1;
	    padding: 0;
	    width: auto;
	    margin: 0 auto;
	    align-items: center;
	}

	.cust-button.shuffle svg {
	    fill: var(--cust-button-shuffle-fill);
	    width: 75%;
	    height: 75%;
	    margin: 0 auto;
	}

	.cust-button.shuffle:disabled svg {
	    fill: var(--cust-button-shuffle-fill-disabled);
	}
}

.loading-label {
    font-size: calc(var(--wasp-generic-font-size) * 1.5);
    font-weight: bold;
    margin-bottom: calc(var(--wasp-generic-font-size) * 0.75);
}

.loading-job {
    font-size: calc(var(--wasp-generic-font-size) * 1.25);
    margin-bottom: calc(var(--wasp-generic-font-size) * 0.25);
}

.loading-progress {
    font-size: calc(var(--wasp-generic-font-size) * 1.75);
    font-weight: bold;
}

.guess {
	font-size: var(--wasp-guess-font-size);
	height: var(--wasp-guess-font-size);
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	user-select: none;
	word-break: break-all;
	text-shadow: 0.1rem 0.1rem 0.05rem #000000,
				 0.1rem -0.1rem 0.05rem #000000,
				 -0.1rem 0.1rem 0.05rem #000000,
				 -0.1rem -0.1rem 0.05rem #000000;
}

#wasp-guess {
	display: inline-block;
	height: var(--wasp-guess-font-size);
}

.flying-letter-container, .shadow-letter-container, .flying-word-container {
	display: grid;
	position: fixed;
	grid-template-rows: 1fr;
	align-items: center;
	justify-items: center;
	z-index: 2002;
}

.flying-letter, .shadow-letter, .flying-word {
	font-size: var(--wasp-guess-font-size);
	position: fixed;
	width: auto;
	height: auto;
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	user-select: none;
	overflow: visible;
	word-break: keep-all;
}

.flying-letter, .flying-word {
	text-shadow: 0.1rem 0.1rem 0.05rem #000000,
				 0.1rem -0.1rem 0.05rem #000000,
				 -0.1rem 0.1rem 0.05rem #000000,
				 -0.1rem -0.1rem 0.05rem #000000;
}

.shadow-letter-container {
	z-index: 2001;
}

.shadow-letter {
	color: #08080840;
	text-shadow: 0.1rem 0.1rem 0.05rem #00000040,
				 0.1rem -0.1rem 0.05rem #00000040,
				 -0.1rem 0.1rem 0.05rem #00000040,
				 -0.1rem -0.1rem 0.05rem #00000040;
	z-index: 2001;
}

@keyframes explosion {
	0% {
		background-position-x: 0px;
	}
	100% {
		background-position-x: -384px;
	}
}

@keyframes scorch-fade {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.explosion, .explosion-bloom {
	position: fixed;
	background-repeat: no-repeat;
	animation: explosion 0.6s steps(8) 1;
	background-image: url("images/waspgame/explosion.png");
	width: 48px;
	height: 48px;
	z-index: 2003;
}

.explosion.green, .explosion-bloom.green {
	background-image: url("images/waspgame/explosion-green.png");
}

.scorch-mark {
	position: fixed;
	background-repeat: no-repeat;
	animation: scorch-fade 3s linear 1;
	background-image: url("images/waspgame/scorch-mark.png");
	width: 48px;
	height: 48px;
	z-index: 2000;
}

.explosion-bloom {
	opacity: 0.25;
	filter: brightness(3) contrast(200%);
	mix-blend-mode: lighten;
	z-index: 2004;
}

.heaven-ray {
	position: fixed;
	background: linear-gradient(#ffffa070, #ffff0010);
	clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%);
	border-bottom-left-radius: 50% var(--wasp-guess-font-size);
	border-bottom-right-radius: 50% var(--wasp-guess-font-size);
	z-index: 3000;
}

.guess .letter.center, .flying-letter.letter.center, .flying-word .center {
	color: var(--page-accent);
}

#wasp-navi {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-column-gap: var(--wasp-navi-gap);
    margin: 0 calc(var(--wasp-navi-gap) / 2);
    align-items: center;
    justify-content: center;
}

.wasp-navi-button {
	display: grid;
	grid-template-rows: 1fr 1fr;
	align-items: center;
	justify-items: center;
	background: linear-gradient(var(--button-fade-top), var(--button-fade-bottom));
	border: 0.15rem solid var(--button-border);
	border-bottom-color: var(--button-border-2);
	border-right-color: var(--button-border-2);
	color: var(--button-text);
	font-weight: bold;
	font-size: var(--wasp-navi-font-size);
	line-height: calc(var(--wasp-navi-font-size) * 1.1);
    word-break: keep-all;
    overflow: hidden;
}

.wasp-navi-button.disclaimer {
    grid-column-start: 2;
    grid-column-end: 5;
}

.wasp-navi-button.sansconfirm {
    grid-column-start: 2;
    grid-column-end: 3;
}

.wasp-navi-button.sanscancel {
    grid-column-start: 4;
    grid-column-end: 5;
}

.wasp-navi-button.sansback {
    grid-column-start: 2;
    grid-column-end: 5;
}

#wasp-navi.submenu .wasp-navi-button.game,
#wasp-navi.submenu .wasp-navi-button.main {
	grid-area: 1 / 3 / 1 / 3;
}

#wasp-navi.main .wasp-navi-button.stats {
    grid-column-start: 2;
    grid-column-end: 3;
}

#wasp-navi.main .wasp-navi-button.saved-words {
    grid-column-start: 3;
    grid-column-end: 4;
}

#wasp-navi.main .wasp-navi-button.options {
	grid-column-start: 4;
   	grid-column-end: 5;
}

#wasp-navi.main .wasp-navi-button.about {
	grid-column-start: 5;
   	grid-column-end: 6;
}

#wasp-navi.old-games-menu .wasp-navi-button.main,
#wasp-navi.unlimited-menu .wasp-navi-button.main,
#wasp-navi.timed-menu .wasp-navi-button.main,
#wasp-navi.saved-words .wasp-navi-button.main {
    grid-area: 1 / 3 / 1 / 3;
}

.wasp-navi-button.hidden {
	display: none;
}

.wasp-navi-button.dummy {
    visibility: hidden;
}

.wasp-navi-button:not(:disabled):hover {
    filter: brightness(1.2);
}

.wasp-date {
	color: var(--page-accent);
}

.wasp-date.old-games {
    color: var(--subtitle-old-games);
}

.wasp-date.unlimited {
    color: var(--subtitle-unlimited);
}

.wasp-date.timed {
    color: var(--subtitle-timed);
}

.wasp-loading, .wasp-disclaimer, .wasp-main, .wasp-game,
.wasp-old-games, .wasp-unlimited, .wasp-timed,
.wasp-rules, .wasp-yesterday, .wasp-wordlist, .wasp-solution, .wasp-options, .wasp-about,
.wasp-saved-words, .wasp-lamer, .wasp-lamer-2 {
    background-color: var(--container-background);
	border-top: var(--wasp-page-separator);
	border-bottom: var(--wasp-page-separator);
    border-left: var(--wasp-page-hborder);
    border-right: var(--wasp-page-hborder);
    margin: 0 auto;
    max-height: 100%;
    width: calc(100% - var(--wasp-page-hpadding));
    /*min-width: calc(30rem);*/
}

#wasp-banner-container {
	display: grid;
	grid-template-rows: 1fr;
	align-items: center;
	justify-items: center;
    background-color: var(--container-background);
    border: var(--wasp-page-hborder);
    border-top: none;
	border-bottom: none;
    margin: 0 auto;
    text-align: center;
    width: calc(100% - var(--wasp-page-hpadding));
    /*min-width: calc(30rem);*/
}

#wasp-banner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	justify-items: center;
	width: 100%;
    margin: 0 1.5rem;
}

.banner-text {
	margin: 0.5rem 0;
}

#wasp-banner picture, #wasp-banner img {
	max-height: calc(var(--wasp-title-size) * 1.9);
}

.banner-image.left { justify-self: end; margin-right: 0.5rem; }
.banner-image.right { justify-self: start; margin-left: 0.5rem; }

#wasp-banner-subtitle {
    font-size: calc(var(--wasp-generic-font-size) * 0.8);
    line-height: calc(var(--wasp-generic-font-size) * 0.8);
    margin-top: calc(var(--wasp-generic-font-size) * 0.2);
    color: var(--page-banner-subtitle);
}

#wasp-footer-container {
    background-color: var(--container-background);
    border: var(--wasp-page-hborder);
    border-bottom: none;
    border-top: none;
    margin: var(--wasp-page-vpadding) auto;
    padding: 0.75rem 1.5rem;
    text-align: center;
    width: calc(100% - var(--wasp-page-hpadding));
    /*min-width: calc(30rem);*/
}

.wasp-banner-status-wrapper {
	grid-column-start: 1;
	grid-column-end: 4;
	grid-row-start: 1;
	grid-row-end: 2;
	display: grid;
	grid-template-rows: 1fr;
	align-items: center;
	justify-items: center;
}

.wasp-banner-status {
	display: grid;
	grid-template-rows: 1fr;
	align-items: center;
	justify-items: center;
	border: 0.15rem solid var(--wasp-status-border);
	border-top-color: var(--wasp-status-border-2);
	border-left-color: var(--wasp-status-border-2);
	width: max(calc(100% - var(--wasp-progress-margin)), 50%);
	margin-top: 0.3rem;
	height: calc(var(--wasp-status-font-size) * 2.4);
	line-height: calc(var(--wasp-status-font-size) * 0.9);
	overflow: hidden;
    background-color: var(--wasp-status-display);
    user-select: none;
	color: var(--wasp-status-color);
	text-shadow: 0.1rem 0.1rem 2rem var(--wasp-status-shadow-color),
				 0.1rem -0.1rem 2rem var(--wasp-status-shadow-color),
				 -0.1rem 0.1rem 2rem var(--wasp-status-shadow-color),
				 -0.1rem -0.1rem 2rem var(--wasp-status-shadow-color);
}

#wasp-status {
	font-size: var(--wasp-status-font-size);
	display: block;
	font-family: var(--font-choice-scoreboard);
	font-weight: bold;
	transform: scaleX(1.2);
	margin: 0 10%;
	word-break: break-word;
	text-align: center;
}

.wasp-loading, .wasp-disclaimer, .wasp-main, .wasp-game,
.wasp-old-games, .wasp-unlimited, .wasp-timed,
.wasp-rules, .wasp-yesterday, .wasp-wordlist, .wasp-solution, .wasp-options, .wasp-about,
.wasp-saved-words, .wasp-lamer, .wasp-lamer-2 {
	display: grid;
	grid-template-rows: auto 1fr;
	align-items: center;
	justify-items: center;
	text-align: center;
	overflow: hidden;
}

.wasp-loading {
    grid-template-rows: 1fr;
}

.wasp-main {
	grid-template-rows: auto 1fr auto;
}

.wasp-game { display: block }

.wasp-disclaimer .wasp-subview-header,
.wasp-old-games .wasp-subview-header,
.wasp-unlimited .wasp-subview-header,
.wasp-timed .wasp-subview-header,
.wasp-rules .wasp-subview-header,
.wasp-yesterday .wasp-subview-header,
.wasp-solution .wasp-subview-header,
.wasp-wordlist .wasp-subview-header,
.wasp-options .wasp-subview-header,
.wasp-about .wasp-subview-header,
.wasp-saved-words .wasp-subview-header,
.wasp-lamer .wasp-subview-header,
.wasp-lamer-2 .wasp-subview-header {
	display: grid;
	align-items: center;
	justify-items: center;
	grid-row-gap: 0.5rem;
}

.wasp-main .wasp-subview-header {
	grid-template-rows: auto 1fr;
}

.wasp-main .wasp-main-subtitle {
	margin-top: calc(var(--wasp-generic-font-size) * 0.5);
	margin-bottom: calc(var(--wasp-generic-font-size) * 0.5);
}

.wasp-main .wasp-main-footer {
	display: grid;
	align-items: center;
	justify-items: center;
	min-height: calc(var(--wasp-generic-font-size) * 3.6);
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

.wasp-main .wasp-main-footer span {
	color: var(--page-accent-2);
	font-weight: bold;
	font-size: calc(var(--wasp-generic-font-size) * 1.1);
	line-height: calc(var(--wasp-generic-font-size) * 1.2);
	margin: 0 calc(var(--wasp-generic-font-size) * 6);
	padding: 0;
}

.main-menu-button.daily {
	--main-menu-button-image: url("images/waspgame/daily-icon.svg");
	--main-menu-button-background-1: var(--daily-button-background-1);
	--main-menu-button-background-2: var(--daily-button-background-2);
	--main-menu-button-border: var(--daily-button-border);
	--main-menu-button-border-2: var(--daily-button-border-2);
	--main-menu-button-color: var(--daily-button-color);
}

.main-menu-button.old-games {
	--main-menu-button-image: url("images/waspgame/old-games-icon.svg");
	--main-menu-button-background-1: var(--old-games-button-background-1);
	--main-menu-button-background-2: var(--old-games-button-background-2);
	--main-menu-button-border: var(--old-games-button-border);
	--main-menu-button-border-2: var(--old-games-button-border-2);
	--main-menu-button-color: var(--old-games-button-color);
}

.main-menu-button.unlimited {
	--main-menu-button-image: url("images/waspgame/unlimited-icon.svg");
	--main-menu-button-background-1: var(--unlimited-button-background-1);
	--main-menu-button-background-2: var(--unlimited-button-background-2);
	--main-menu-button-border: var(--unlimited-button-border);
	--main-menu-button-border-2: var(--unlimited-button-border-2);
	--main-menu-button-color: var(--unlimited-button-color);
}

.main-menu-button.timed {
	--main-menu-button-image: url("images/waspgame/timed-icon.svg");
	--main-menu-button-background-1: var(--timed-button-background-1);
	--main-menu-button-background-2: var(--timed-button-background-2);
	--main-menu-button-border: var(--timed-button-border);
	--main-menu-button-border-2: var(--timed-button-border-2);
	--main-menu-button-color: var(--timed-button-color);
}

.main-menu-button {
	display: flex;
    position: relative;

    background: linear-gradient(150deg, var(--main-menu-button-background-1), var(--main-menu-button-background-2));
    border: 0.15rem solid var(--main-menu-button-border);
    border-bottom-color: var(--main-menu-button-border-2);
    border-right-color: var(--main-menu-button-border-2);
    color: var(--main-menu-button-color);
    text-shadow: 0.05rem 0.05rem 0.125rem #000;
    text-align: center;
    font-weight: bold;
    user-select: none;
    padding: 0;

    filter: brightness(0.75);
    z-index: 2;
}

.main-menu-button-content {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: start;
    justify-items: center;
    margin: 0 auto;
    overflow: hidden;
    width: 100%;
}

.main-menu-button-image-container {
    position: absolute;
    display: flex;
    grid-template-rows: 1fr;
    height: calc(100% - var(--wasp-generic-font-size) * 1.25);
    align-items: center;
    justify-items: center;
    overflow: hidden;
    z-index: 5;
}

.main-menu-button img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    z-index: 5;
}

.main-menu-button h3 {
    align-self: end;
    font-size: calc(var(--wasp-generic-font-size) * 1.1);
    line-height: calc(var(--wasp-generic-font-size) * 1.2);
    margin: 0 !important;
    margin-bottom: calc(var(--wasp-generic-font-size) * 0.2) !important;
    padding: 0;
    color: inherit;
    z-index: 5;
}

.main-menu-button-backdrop {
	background-image: none;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: calc(var(--wasp-generic-font-size) * 20) calc(var(--wasp-generic-font-size) * 20);
	opacity: 0.25;
    padding: 0;
    margin: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 3;
}

.main-menu-button:not(:disabled):hover .main-menu-button-backdrop,
.main-menu-button:not(:disabled):active .main-menu-button-backdrop,
.main-menu-button:not(:disabled):focus .main-menu-button-backdrop {
	background-image: var(--main-menu-button-image);
}

.main-menu-button-blur {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 4;
    margin: 0;
    padding: 0;
}

.main-menu-button.daily .main-menu-button-blur {
	backdrop-filter: blur(8px);
}

.main-menu-button.old-games .main-menu-button-blur {
	backdrop-filter: blur(6px);
}

.main-menu-button.unlimited .main-menu-button-blur {
	backdrop-filter: blur(2px);
}

.main-menu-button.timed .main-menu-button-blur {
	backdrop-filter: blur(3px);
}

.main-menu-button:not(:disabled):hover, .main-menu-button:not(:disabled):focus {
    filter: brightness(1.0);
}

.main-menu-button:not(:disabled):active {
    filter: brightness(0.5);
    border-top-color: var(--main-menu-button-border-2);
    border-left-color: var(--main-menu-button-border-2);
    border-bottom-color: var(--main-menu-button-border);
    border-right-color: var(--main-menu-button-border);
}

.main-menu-button:disabled {
	filter: grayscale(100%) brightness(0.75);
}

.main-menu-button:disabled h3::after {
	content: " (Coming soon)";
}

.wasp-wordlist .wasp-subview-header {
	grid-template-rows: auto auto auto 1fr;
}

.wasp-yesterday .wasp-subview-header {
    grid-template-rows: auto auto 1fr;
}

.wasp-solution .wasp-subview-header {
    grid-template-rows: auto 1fr;
}

.wasp-disclaimer-container, .wasp-main-container,
.wasp-rules-container, .wasp-options-container, .wasp-about-container,
.wasp-lamer-container, .wasp-lamer-2-container {
	border-top: 0.1rem solid var(--page-accent);
	margin-top: calc(var(--wasp-generic-font-size) * 0.5);
	padding: var(--wasp-generic-font-size);
	align-self: start;
	text-align: left;
	height: 100%;
	width: 100%;
	overflow: auto;
}

.wasp-old-games-container, .wasp-unlimited-container, .wasp-timed-container {
	align-self: start;
	text-align: left;
	height: 100%;
	width: 100%;
	overflow: auto;
}

.wasp-main-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(calc(50% - var(--wasp-generic-font-size) * 1.5), 1fr));
	grid-auto-rows: calc(50% - 0.5rem);
	grid-auto-flow: row;
    grid-gap: calc(var(--wasp-generic-font-size) * 1);
	align-self: start;
	padding: 1rem 1.5rem;
	border-bottom: 0.1rem solid var(--page-accent);
	margin: 0;
}

.options-section:not(:first-child) {
	margin-top: calc(var(--wasp-generic-font-size) * 1.5);
}

.section-description {
	margin-top: calc(var(--wasp-generic-font-size) * 0.5);
}

.options-button {
	max-width: calc(var(--wasp-generic-font-size) * 10);
}

.options-button.disclaimer {
	max-width: calc(var(--wasp-generic-font-size) * 15);
}

.setting-field {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-column-gap: calc(var(--wasp-generic-font-size) * 0.4);
	margin-top: calc(var(--wasp-generic-font-size) * 0.5);
}

.button-field {
	margin-top: calc(var(--wasp-generic-font-size) * 0.5);
}

.game-letters {
	font-weight: bold;
	text-transform: uppercase;
}

.game-letters .center {
	color: var(--page-accent);
}

.cust-button.share-progress {
	height: 2rem;
	padding: 0 1rem;
}

.wasp-stats-rank-row {
	font-size: var(--wasp-generic-font-size);
}

.wasp-stats-rank {
	font-weight: bold;
}

#wasp-today-stats, #wasp-yesterday-stats, #wasp-solution-stats {
	font-size: var(--wasp-generic-font-size);
}

.wasp-wordlist-container {
	border: 0.1rem solid var(--page-accent);
	background-color: var(--container-background);
	margin: 1rem 0;
	width: calc(100% - 2rem);
	align-self: start;
	text-align: left;
	max-height: calc(100% - 2rem);
	overflow: auto;
}

.guessed {
	display: grid;
	grid-template-rows: 1fr;
	align-items: center;
	font-size: var(--wasp-generic-font-size);
	width: 100%;
	height: 100%;
	text-transform: capitalize;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	color: var(--page-text);
	text-align: left;
}

.guessed.nocap {
	text-transform: none;
}

.guessed:not(:disabled) {
	cursor: pointer;
}

.guessed.found {
	filter: brightness(1.2);
}

.guessed.missed {
	filter: brightness(0.75);
}

.guessed.ghost-word {
	color: var(--wasp-placeholder-text);
	font-style: italic;
}

.guessed.previous-guess-1 span::before { content: "🟢 "; }
.guessed.previous-guess-2 span::before { content: "🟡 "; }
.guessed.previous-guess-3 span::before { content: "🔴 "; }

.guessed:not(:disabled):hover, .guessed:not(:disabled):focus {
	background-color: #ffffff20;
	filter: brightness(1.2);
	outline: 0.1rem solid var(--page-accent);
}

.guessed.found span::before {
	content: "🟢 ";
}

.guessed.missed span::before {
	content: "❌ ";
}

#bubble-definition {
	display: none;
	position: absolute;
	border: 0.1rem solid var(--page-accent-3);
	background-color: var(--wasp-popup-background);
	box-shadow: 0 0 0.5rem 0.2rem #ffffff40;
	backdrop-filter: blur(4px);
	border-radius: var(--wasp-generic-font-size);
	overflow: hidden;
}

.bubble-container {
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	align-items: center;
	justify-items: center;
}

#bubble-word {
	color: var(--wasp-bubble-word-color);
	font-size: var(--wasp-generic-font-size);
	font-weight: bold;
}

.bubble-word-row {
	background: linear-gradient(var(--wasp-bubble-background-1), var(--wasp-bubble-background-2));
	padding: calc(var(--wasp-generic-font-size) * 0.5);
	width: 100%;
	height: 100%;
	text-align: left;
}

.bubble-label-row {
	padding: calc(var(--wasp-generic-font-size) * 0.2) calc(var(--wasp-generic-font-size) * 0.5);
	font-size: calc(var(--wasp-generic-font-size) * 0.9);
	width: 100%;
	height: 100%;
	text-align: left;
}

.bubble-save-row {
    width: 100%;
    height: 100%;
    text-align: center;
}

.bubble-close-button {
	position: absolute;
	right: 0;
	top: 0;
}

.bubble-button {
    box-sizing: border-box;
    background: linear-gradient(var(--cust-button-background-1), var(--cust-button-background-2));
    border: 0.15rem solid var(--cust-button-border);
    border-bottom-color: var(--cust-button-border-2);
    border-right-color: var(--cust-button-border-2);
    border-radius: 1rem;
    color: var(--cust-button-color);
    width: calc(100% - 0.8rem);
    height: calc(var(--wasp-generic-font-size) * 2);
    margin: 0 auto 0.8rem;
    text-shadow: 0.05rem 0.05rem 0.125rem #000;
    text-align: center;
    font-weight: bold;
    user-select: none;
}

.bubble-button:not(:disabled):hover, .bubble-button:not(:disabled):focus {
    filter: brightness(1.3);
}

.bubble-button:not(:disabled):active {
    filter: brightness(0.75);
    border-top-color: var(--cust-button-border-2);
    border-left-color: var(--cust-button-border-2);
    border-bottom-color: var(--cust-button-border);
    border-right-color: var(--cust-button-border);
}

.bubble-button:disabled {
    filter: grayscale(100%) brightness(0.75);
}

#bubble-close-button {
	background: none;
	border: none;
	width: calc(var(--wasp-generic-font-size) * 2);
	height: calc(var(--wasp-generic-font-size) * 2);
	padding: 0;
	font-size: calc(var(--wasp-generic-font-size) * 0.8);
	text-align: center;
	cursor: pointer;
}

#bubble-close-button:not(:active):hover, #bubble-close-button:not(:active):focus {
	background: #ffffff20;
	filter: brightness(1.2);
}

#bubble-close-button:active {
	filter: brightness(0.7);
}

.bubble-grid {
	display: grid;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr;
	grid-gap: calc(var(--wasp-generic-font-size) * 0.7);
	padding: calc(var(--wasp-generic-font-size) * 0.7);
	padding-top: 0;
}

.link-button {
	display: block;
	width: calc(var(--wasp-generic-font-size) * 3.5);
	height: calc(var(--wasp-generic-font-size) * 3.5);
}

.link-button img {
	max-height: 100%;
}

.placeholder {
	color: var(--wasp-placeholder-text);
	font-style: italic;
	text-transform: none !important;
}

.wasp-auto-grid, .wasp-unlimited-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--wasp-auto-grid-min-width), 1fr));
	grid-auto-rows: 2rem;
	grid-auto-flow: row;
	align-items: center;
	justify-items: center;
	align-self: start;
	padding: 0.5rem 1rem;
	overflow: hidden;
}

.wasp-unlimited-grid {
    grid-template-columns: repeat(auto-fit, minmax(var(--wasp-unlimited-auto-grid-min-width), 1fr));
    grid-auto-rows: 1fr;
    grid-row-gap: 0.5rem;
    margin-bottom: calc(var(--wasp-generic-font-size) * 2.0);
}

.wasp-calendar-container-container {
	display: grid;
	grid-template-columns: 0.70fr 0.30fr;
    width: 100%;
}

.wasp-calendar-container {
    border-bottom: 0.1rem solid var(--page-accent);
    border-right: 0.1rem solid var(--page-accent);
	width: 100%;
}

.wasp-calendar {
	display: grid;
	grid-template-rows: auto auto auto 1fr;
	align-items: center;
	justify-items: center;
	width: 100%;
	user-select: none;
}

.wasp-calendar .top {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	justify-items: center;
	background: linear-gradient(var(--calendar-top-fade-top), var(--calendar-top-fade-bottom));
	width: 100%;
	height: 100%;
	border-bottom: 0.1rem solid var(--page-accent);
	padding: calc(var(--wasp-generic-font-size) * 0.5);
}

.wasp-calendar .year-row, .wasp-calendar .month-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	justify-items: center;
	margin: 0 auto;
	max-width: calc(var(--wasp-generic-font-size) * 15);
	width: 100%;
}

.wasp-calendar .year-row button,
.wasp-calendar .month-row button {
	display: grid;
	grid-template-rows: 1fr;
	align-items: center;
	justify-items: center;
	border: 0.1rem solid var(--page-accent);
	background: var(--calendar-button-background);
	color: var(--page-text);
	font-weight: bold;
	font-size: calc(var(--wasp-generic-font-size) * 1.1);
	height: calc(var(--wasp-generic-font-size) * 2.0);
	text-shadow: 0.1rem 0.1rem 0.1rem #000;
}

.wasp-calendar .year-row button:not(:disabled):hover,
.wasp-calendar .year-row button:not(:disabled):focus,
.wasp-calendar .month-row button:not(:disabled):hover,
.wasp-calendar .month-row button:not(:disabled):focus {
	cursor: pointer;
	filter: brightness(1.2);
}

.wasp-calendar .year-row button:not(:disabled):active,
.wasp-calendar .month-row button:not(:disabled):active {
	filter: brightness(0.75);
}

.wasp-calendar .calendar-button {
	width: auto;
	height: 100%;
	aspect-ratio: 1/1;
}

.wasp-calendar .calendar-button-wide {
	width: 100%;
}

.wasp-calendar .year-row .calendar-button.left,
.wasp-calendar .month-row .calendar-button.left {
	justify-self: end;
	margin-right: calc(var(--wasp-generic-font-size) * 0.5);
}

.wasp-calendar .year-row .calendar-button.right,
.wasp-calendar .month-row .calendar-button.right {
	justify-self: start;
	margin-left: calc(var(--wasp-generic-font-size) * 0.5);
}

.wasp-calendar .year-row .calendar-button.left:disabled,
.wasp-calendar .month-row .calendar-button.left:disabled,
.wasp-calendar .year-row .calendar-button.right:disabled,
.wasp-calendar .month-row .calendar-button.right:disabled {
	opacity: 0.25;
}

.wasp-calendar .weekday-row {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	align-items: center;
	justify-items: center;
	width: 100%;
	padding: calc(var(--wasp-generic-font-size) * 0.5) 0;
	background-color: var(--calendar-weekday-row-background);
	font-size: var(--wasp-generic-font-size);
	font-weight: bold;
	text-shadow: 0.1rem 0.1rem 0.1rem #000;
}

.sunday {
	color: #c03030;
}

.calendar-day-button {
	display: grid;
	grid-template-rows: 1fr auto auto;
	align-items: center;
	justify-items: center;
	border: 0;
	padding: 0;
	margin-bottom: calc(var(--wasp-generic-font-size) * 0.5);
	background: #00000000;
	color: var(--page-text);
	font-weight: bold;
	width: 100%;
	text-shadow: 0.1rem 0.1rem 0.1rem #000;
}

.calendar-day-button.empty {
	grid-template-rows: 1fr;
	visibility: hidden;
}

.calendar-day-button:not(:disabled):hover, .calendar-day-button:not(:disabled):focus {
	background-color: #ffffff20;
	filter: brightness(1.2);
	outline: 0.1rem solid var(--page-accent);
	cursor: pointer;
}

.calendar-day-button:not(:disabled):active {
	filter: brightness(0.75);
}

.calendar-day-button:disabled {
	filter: brightness(0.5);
}

.calendar-day-button .date {
	font-size: calc(var(--wasp-generic-font-size) * 1.35);
}

.calendar-day-button .game, .calendar-day-button .progress {
	font-size: calc(var(--wasp-generic-font-size) * 0.7);
	color: var(--calendar-dull-text);
	text-transform: uppercase;
}

.calendar-day-button .game .center {
	color: var(--page-accent);
}

.calendar-day-button .progress.pangram-guessed::before,
.wasp-unlimited-game-button .progress .pangram-guessed::before {
    content: "⭐";
    margin-right: 0.1rem;
}

.wasp-unlimited {
    position: relative;
}

.wasp-unlimited-container-container {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 0.70fr 0.30fr;
    position: absolute;
    width: 100%;
    height: 100%;
}

.wasp-calendar .days-grid {
	display: grid;
	grid-template-rows: repeat(6, 1fr);
	grid-template-columns: repeat(7, 1fr);
	align-items: center;
	justify-items: center;
	width: 100%;
	background-color: #ffffff10;
}

.wasp-game-details {
	display: grid;
	grid-template-rows: repeat(5, auto) 1fr;
	align-items: center;
	justify-items: center;
	width: 100%;
	visibility: hidden;
    height: 12rem;
}

.wasp-game-details.unlimited {
    grid-template-rows: repeat(7, auto) 1fr;
    height: 13rem;
}

.wasp-game-details.unlimited .button-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-self: start;
    text-align: center;
    width: calc(100% - var(--wasp-generic-font-size) * 2);
    margin-bottom: calc(var(--wasp-generic-font-size) * 0.5);
}

.wasp-game-details .top {
    display: grid;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    justify-items: center;
    width: 100%;
    padding-top: calc(var(--wasp-generic-font-size) * 0.5);
    background: linear-gradient(var(--calendar-top-fade-top), var(--calendar-top-fade-bottom));
    border-bottom: 0.1rem solid var(--page-accent);
    margin-bottom: calc(var(--wasp-generic-font-size) * 0.5);
}

.wasp-game-details.unlimited .top {
    display: block;
}

.wasp-game-details .row {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	justify-items: center;
	width: 100%;
	margin-bottom: calc(var(--wasp-generic-font-size) * 0.5);

	font-size: calc(var(--wasp-generic-font-size) * 1.2);
	font-weight: bold;
	text-transform: uppercase;
}

.wasp-game-details .center {
	color: var(--page-accent);
}

.wasp-game-details .field {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	justify-items: start;
	margin-bottom: calc(var(--wasp-generic-font-size) * 0.5);

	font-size: var(--wasp-generic-font-size);
	font-weight: bold;
}

.wasp-game-details .field .left {
	margin-left: calc(var(--wasp-generic-font-size) * 1);
	margin-right: calc(var(--wasp-generic-font-size) * 0.5);
	justify-self: end;
}

.wasp-game-details .field .right {
    text-align: left;
}

.wasp-game-details .button-row {
	align-self: start;
	text-align: center;
	width: calc(100% - var(--wasp-generic-font-size) * 2);
	margin-bottom: calc(var(--wasp-generic-font-size) * 0.5);
}

.wasp-tabcontrol {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-right: 0.1rem solid var(--page-accent);
}

.wasp-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 0fr; /* I don't know why this works lmao */
    align-items: start;
    justify-items: start;
    margin-top: 0.5rem;
    padding: 0 1rem;
    width: 100%;
    overflow: auto;
}

.wasp-tabs .tab-button:not(:first-child) {
    margin-left: calc(var(--wasp-generic-font-size) * 0.5);
}

.wasp-tab-views {
    border-top: 0.1rem solid var(--page-accent);
    height: 100%;
    overflow: auto;
}

.wasp-tab-view {
    padding: var(--wasp-generic-font-size);
    width: 100%;
    height: 100%;
}

.wasp-tab-view:not(.active) {
    display: none;
}

.tab-button {
    box-sizing: border-box;
    background: linear-gradient(var(--cust-button-background-1), var(--cust-button-background-2));
    border: 0.1rem solid var(--button-border);
    border-bottom: none;
    border-radius: 0.5rem 0.5rem 0 0;
    color: var(--tab-button-text);
    height: calc(var(--wasp-generic-font-size) * 2);
    padding: 0 calc(var(--wasp-generic-font-size) * 0.5);
    text-shadow: 0.05rem 0.05rem 0.125rem #000;
    text-align: left;
    font-weight: bold;
    user-select: none;
}

.tab-button:not(.active) {
    background: linear-gradient(var(--button-fade-top), var(--button-fade-bottom));
    border-color: var(--button-border);
    color: var(--button-text);
    opacity: 0.65;
}

.tab-button:not(:disabled):hover, .tab-button:not(:disabled):focus {
    filter: brightness(1.3);
}

.tab-button:not(:disabled):active {
    filter: brightness(0.75);
    border-top-color: var(--cust-button-border-2);
    border-left-color: var(--cust-button-border-2);
    border-bottom-color: var(--cust-button-border);
    border-right-color: var(--cust-button-border);
}

.tab-button:disabled {
    filter: brightness(0.5) grayscale(100%);
}

.wasp-text-input {
    background-color: var(--container-background);
    border: 0.1rem solid var(--page-accent);
    color: var(--tab-button-text);
    font-size: calc(var(--wasp-generic-font-size) * 1.1);
    padding: calc(var(--wasp-generic-font-size) * 0.25);
    min-width: calc(var(--wasp-generic-font-size) * 15);
    height: calc(var(--wasp-generic-font-size) * 2);
}

.wasp-text-input::placeholder {
    color: var(--calendar-dull-text);
}

.wasp-unlimited-form {
    display: grid;
    grid-template-rows: repeat(6, auto);
    grid-row-gap: 0.5rem;
    padding: 0.5rem;
    width: 100%;
}

.wasp-unlimited-form .input-row {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-column-gap: 1rem;
    align-items: center;
    justify-items: start;
}

.wasp-unlimited-form .button-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 1rem;
    align-items: center;
    justify-items: start;
}

#wasp-unlimited-letters {
    font-size: var(--wasp-guess-font-size);
    height: var(--wasp-guess-font-size);
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    user-select: none;
    word-break: break-all;
    text-shadow: 0.1rem 0.1rem 0.05rem #000000,
                 0.1rem -0.1rem 0.05rem #000000,
                 -0.1rem 0.1rem 0.05rem #000000,
                 -0.1rem -0.1rem 0.05rem #000000;
}

#wasp-unlimited-letters .center {
    color: var(--page-accent);
}

.wasp-unlimited-game-button {
    display: grid;
    grid-template-rows: auto repeat(3, 1fr);
    align-items: center;
    justify-items: center;
    box-sizing: border-box;
    background: linear-gradient(var(--unlimited-game-button-fade-top), var(--unlimited-game-button-fade-bottom));
    border: 0.15rem solid var(--unlimited-game-button-border);
    border-bottom-color: var(--unlimited-game-button-border-2);
    border-right-color: var(--unlimited-game-button-border-2);
    color: var(--unlimited-dull-text);
    width: calc(100% - var(--wasp-generic-font-size) * 0.5);
    margin: 0 auto;
    text-shadow: 0.05rem 0.05rem 0.125rem #000;
    text-align: center;
    font-weight: bold;
    user-select: none;
    font-size: calc(var(--wasp-generic-font-size) * 0.75);

    .date-started, .date-last {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }
    .date-started span:first-child, .date-last span:first-child {
        justify-self: end;
        margin-right: calc(var(--wasp-generic-font-size) * 0.2);
    }
    .date-started span:last-child, .date-last span:last-child {
        justify-self: start;
        margin-left: calc(var(--wasp-generic-font-size) * 0.2);
    }
    .game {
        color: var(--page-text);
        font-size: calc(var(--wasp-generic-font-size) * 1.35);
        text-transform: uppercase;
    }
    .center {
        color: var(--page-accent);
    }
}

.wasp-unlimited-game-button:not(:disabled):hover, .wasp-unlimited-game-button:not(:disabled):focus {
    background-color: #ffffff20;
    filter: brightness(1.2);
    cursor: pointer;
}

.wasp-unlimited-game-button:not(:disabled):active {
    filter: brightness(0.75);
}

.wasp-unlimited-game-button:disabled {
    filter: brightness(0.5);
}

.cust-button.random {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: start;
    background: linear-gradient(var(--random-button-background-1), var(--random-button-background-2));
    border: 0.15rem solid var(--random-button-border);
    border-bottom-color: var(--random-button-border-2);
    border-right-color: var(--random-button-border-2);
    color: var(--random-button-color);
    filter: hue-rotate(var(--random-button-hue));
    min-width: calc(var(--wasp-generic-font-size) * 6.5);
}

.cust-button.random::before {
    content: "🎲";
    display: block;
    margin-right: calc(var(--wasp-generic-font-size) * 0.25);
    line-height: 100%;
    filter: hue-rotate(var(--random-button-hue));
}

.cust-button.random:not(:disabled):hover {
    filter: brightness(1.3) hue-rotate(var(--random-button-hue));
}

.cust-button.random:not(:disabled):active {
    filter: brightness(0.75) hue-rotate(var(--random-button-hue));
    border-top-color: var(--random-button-border-2);
    border-left-color: var(--random-button-border-2);
    border-bottom-color: var(--random-button-border);
    border-right-color: var(--random-button-border);
}

.wasp-banner-status.red {
    --wasp-status-display: #201818;
    --wasp-status-border: #806060;
    --wasp-status-border-2: #504040;
    --wasp-status-color: #ff0000;
    --wasp-status-shadow-color: #ff000060;
}

.wasp-banner-status.yellow {
    --wasp-status-display: #202018;
    --wasp-status-border: #808060;
    --wasp-status-border-2: #505040;
    --wasp-status-color: #ffff00;
    --wasp-status-shadow-color: #ffff0060;
}

.wasp-banner-status.green {
    --wasp-status-display: #182018;
    --wasp-status-border: #607060;
    --wasp-status-border-2: #404a40;
    --wasp-status-color: #00ff00;
    --wasp-status-shadow-color: #00ff0060;
}

.wasp-banner-status.cyan {
    --wasp-status-display: #182020;
    --wasp-status-border: #608080;
    --wasp-status-border-2: #405050;
    --wasp-status-color: #00ffff;
    --wasp-status-shadow-color: #00ffff60;
}

.wasp-banner-status.magenta {
    --wasp-status-display: #201820;
    --wasp-status-border: #806080;
    --wasp-status-border-2: #504050;
    --wasp-status-color: #ff00ff;
    --wasp-status-shadow-color: #ff00ff60;
}

.wasp-navi-button.rules::before         { content: "💡"; }
.wasp-navi-button.yesterday::before     { content: "📆"; }
.wasp-navi-button.solution::before      { content: "⚠️"; }
.wasp-navi-button.wordlist::before 	    { content: "🗒️"; }
.wasp-navi-button.options::before       { content: "⚙️"; }
.wasp-navi-button.about::before         { content: "🌐"; }
.wasp-navi-button.game::before 	        { content: "↩️"; }
.wasp-navi-button.disclaimer::before    { content: "✅"; }
.wasp-navi-button.main::before		    { content: "🪟"; }
.wasp-navi-button.back::before          { content: "🎚️"; }
.wasp-navi-button.saved-words::before   { content: "📝"; }
.wasp-navi-button.sansconfirm::before   { content: "✅"; }
.wasp-navi-button.sanscancel::before    { content: "❌"; }
.wasp-navi-button.sansback::before      { content: "↩️"; }

#wasp-rank {
	position: relative;
}

#wasp-rank.passing::before,
#wasp-rank.smartie::before,
#wasp-rank.winning::before,
#wasp-rank.whoring::before,
#wasp-rank.perfect::before {
	display: inline-block;
	width: 0px;
	position: absolute;
	left: calc(var(--wasp-rank-font-size) * -1.75);
}

.wasp-rank-description.passing::before,
.wasp-rank-description.smartie::before,
.wasp-rank-description.winning::before,
.wasp-rank-description.whoring::before,
.wasp-rank-description.perfect::before,
.wasp-stats-rank.passing::before,
.wasp-stats-rank.smartie::before,
.wasp-stats-rank.winning::before,
.wasp-stats-rank.whoring::before,
.wasp-stats-rank.perfect::before {
	display: inline-block;
	width: calc(var(--wasp-generic-font-size) * 1.5);
}

.wasp-game-details .field .passing::before, .wasp-stats-rank.passing::before, #wasp-rank.passing::before, .wasp-rank-description.passing::before { content: "✅"; }
.wasp-game-details .field .smartie::before, .wasp-stats-rank.smartie::before, #wasp-rank.smartie::before, .wasp-rank-description.smartie::before { content: "💡"; }
.wasp-game-details .field .winning::before, .wasp-stats-rank.winning::before, #wasp-rank.winning::before, .wasp-rank-description.winning::before { content: "🌟"; }
.wasp-game-details .field .whoring::before, .wasp-stats-rank.whoring::before, #wasp-rank.whoring::before, .wasp-rank-description.whoring::before { content: "🔥"; }
.wasp-game-details .field .perfect::before, .wasp-stats-rank.perfect::before, #wasp-rank.perfect::before, .wasp-rank-description.perfect::before { content: "💎"; }

.wasp-game-details .field .passing::before,
.wasp-game-details .field .smartie::before,
.wasp-game-details .field .winning::before,
.wasp-game-details .field .whoring::before,
.wasp-game-details .field .perfect::before {
    margin-right: 0.1rem;
}

.wasp-rank-description {
	font-weight: bold;
}

.wasp-emphasis-1 {
	font-weight: bold;
}

.wasp-emphasis-2 {
	color: var(--page-accent);
	font-weight: bold;
}

.wasp-emphasis-3 {
	color: var(--page-accent-2);
	font-weight: bold;
}

.wasp-emphasis-4 {
	color: var(--page-warning);
	font-weight: bold;
}

.invalid {
    color: var(--page-warning);
    font-weight: bold;
}

.passing { color: var(--wasp-passing-text) !important; text-shadow: 0.0rem 0.05rem 0.2rem var(--wasp-passing-shadow), 0.0rem -0.05rem 0.2rem var(--wasp-passing-shadow), -0.05rem 0.0rem 0.2rem var(--wasp-passing-shadow), 0.05rem -0.0rem 0.2rem var(--wasp-passing-shadow); }
.smartie { color: var(--wasp-smartie-text) !important; text-shadow: 0.0rem 0.05rem 0.2rem var(--wasp-smartie-shadow), 0.0rem -0.05rem 0.2rem var(--wasp-smartie-shadow), -0.05rem 0.0rem 0.2rem var(--wasp-smartie-shadow), 0.05rem -0.0rem 0.2rem var(--wasp-smartie-shadow); }
.winning { color: var(--wasp-winning-text) !important; text-shadow: 0.0rem 0.05rem 0.2rem var(--wasp-winning-shadow), 0.0rem -0.05rem 0.2rem var(--wasp-winning-shadow), -0.05rem 0.0rem 0.2rem var(--wasp-winning-shadow), 0.05rem -0.0rem 0.2rem var(--wasp-winning-shadow); }
.whoring { color: var(--wasp-whoring-text) !important; text-shadow: 0.0rem 0.05rem 0.2rem var(--wasp-whoring-shadow), 0.0rem -0.05rem 0.2rem var(--wasp-whoring-shadow), -0.05rem 0.0rem 0.2rem var(--wasp-whoring-shadow), 0.05rem -0.0rem 0.2rem var(--wasp-whoring-shadow); }
.perfect { color: var(--wasp-perfect-text) !important; text-shadow: 0.0rem 0.05rem 0.2rem var(--wasp-perfect-shadow), 0.0rem -0.05rem 0.2rem var(--wasp-perfect-shadow), -0.05rem 0.0rem 0.2rem var(--wasp-perfect-shadow), 0.05rem -0.0rem 0.2rem var(--wasp-perfect-shadow); }

.pangram {
	font-weight: bold;
	color: var(--wasp-pangram-text);
	text-shadow: 0.0rem 0.05rem 0.2rem var(--wasp-pangram-shadow),
				 0.0rem -0.05rem 0.2rem var(--wasp-pangram-shadow),
				 -0.05rem 0.0rem 0.2rem var(--wasp-pangram-shadow),
				 0.05rem -0.0rem 0.2rem var(--wasp-pangram-shadow);
}

@media screen and (max-width:1024px) {
    :root {
        --wasp-page-hpadding: 20%;
        --wasp-progress-margin: 10rem;
    	--wasp-navi-gap: 1.5rem;
    	--wasp-guess-font-size: 1.5rem;
    }
}

@media screen and (max-width:800px) {
    :root {
        --wasp-page-hpadding: 10%;
        --wasp-title-size: 1.75rem;
    	--wasp-subtitle-size: 1.25rem;
    	--wasp-subtitle-2-size: 1.1rem;
    	--wasp-subtitle-3-size: 1.0rem;
        --wasp-progress-margin: 5rem;
    	--wasp-progress-bar-height: 1rem;
    	--wasp-navi-gap: 0.5rem;

    	--wasp-status-font-size: 1.25rem;
    	--wasp-navi-font-size: 1rem;
    	--wasp-guess-font-size: 1.4rem;
    	--wasp-score-font-size: 1.25rem;
    	--wasp-rank-font-size: 1.1rem;
    	--wasp-generic-font-size: 0.9rem;
    	--wasp-auto-grid-min-width: 120px;
        --wasp-unlimited-auto-grid-min-width: 140px;
    }

    #wasp-navi.submenu .wasp-navi-button.game,
    #wasp-navi.submenu .wasp-navi-button.main {
    	grid-column-start: 2;
    	grid-column-end: 5;
    }

    #wasp-navi.old-games-menu .wasp-navi-button.main,
    #wasp-navi.unlimited-menu .wasp-navi-button.main,
    #wasp-navi.timed-menu .wasp-navi-button.main,
    #wasp-navi.saved-words .wasp-navi-button.main {
        grid-column-start: 2;
        grid-column-end: 5;
    }
}

@media screen and (max-height:520px) {
	:root {
		--hive-width: 50%;
		--hive-max-width: 35vh;
	}
	html {
		font-size: 0.9rem;
	}
}

@media screen and (max-width:640px) {
    :root {
        --wasp-page-hpadding: 0%;
        --wasp-page-hborder: 0;
    	--wasp-progress-bar-height: 0.75rem;
    	--wasp-progress-border: 0.1rem;
    	--hive-max-width: 35vh;
    	--hive-font-size: 1.5rem;
    	--hive-button-size: 2rem;

        --wasp-title-size: 1.1rem;
    	--wasp-subtitle-size: 1.1rem;
    	--wasp-subtitle-2-size: 1.05rem;
    	--wasp-subtitle-3-size: 1rem;
    	--wasp-chart-cell-size: 1.3rem;
    	--wasp-chart-font-size: 0.7rem;
    	--wasp-navi-gap: 0.2rem;
    	--wasp-status-font-size: 1.1rem;
    	--wasp-navi-font-size: 0.8rem;
    	--wasp-guess-font-size: 1.2rem;
    	--wasp-score-font-size: 1rem;
    	--wasp-rank-font-size: 0.8rem;
    	--wasp-words-size: 0.8rem;
    	--wasp-generic-font-size: 0.9rem;
    	--wasp-auto-grid-min-width: 80px;
    }

    #wasp-banner-subtitle {
    	display: none;
    }

    .banner-text {
    	margin: 0;
    }

	.wasp-container {
		grid-template-rows: auto auto auto 1fr;
		grid-template-columns: 1fr;
		grid-row-gap: 0.1rem;

		.progress-row {
			margin: 0 0.25rem;
		}

		.controls-row {
			width: 100%;
            height: 100%;
		}

		.wasp-hive-wrapper {
            grid-area: 1 / 1 / 1 / 3;
            grid-template-rows: auto 1fr;
            grid-row-gap: 0.5rem;
            position: relative;
        }
		.wasp-words {
			grid-row-start: 4;
			grid-row-end: 5;
			grid-column-start: 1;
			grid-column-end: 3;
			align-self: center;
			height: calc(100% - 1rem);
			min-height: 3rem;
			width: 100%;
		}

		.wasp-words.mobile-hide {
			display: none;
		}

		.wasp-chart {
			display: grid;
			grid-template-columns: 1fr;
			width: 100%;
			margin-top: 0.25rem;
			justify-items: center;
			grid-row-start: 4;
			grid-row-end: 5;
			grid-column-start: 1;
			grid-column-end: 3;
		}

		.wasp-chart.mobile-hide {
			display: none;
		}

		#wasp-guesses {
			margin: 0.25rem 0.4rem;
		}
	}

	#wasp-footer-container {
		padding: 0.5rem 0;
	}

	.wasp-banner-status {
		width: calc(100% - 1rem);
	}

	#wasp-banner {
		margin-top: 0.2rem;
		margin-bottom: 0.2rem;
	}

	.wasp-main .wasp-main-footer span {
		font-size: calc(var(--wasp-generic-font-size));
		line-height: calc(var(--wasp-generic-font-size));
		margin: 0 calc(var(--wasp-generic-font-size) * 0.5);
	}

	.wasp-calendar-container-container {
		display: grid;
        grid-template-rows: 0.70fr 0.30fr;
		grid-template-columns: 1fr;
	}

    .wasp-unlimited-container-container {
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
    }

    .wasp-unlimited-grid {
        padding: 0.5rem 0rem;
    }

    .wasp-unlimited-game-button .game {
        font-size: calc(var(--wasp-generic-font-size) * 1.15);
    }

	.wasp-calendar-container, .wasp-tabcontrol {
		border-right: none;
	}

    .wasp-tabcontrol {
        border-bottom: 0.1rem solid var(--page-accent);
    }

    .wasp-text-input {
        min-width: calc(var(--wasp-generic-font-size) * 7);
        max-width: 50vw;
    }
}

.wasp-loading:not(.active),
.wasp-disclaimer:not(.active),
.wasp-main:not(.active),
.wasp-game:not(.active),
.wasp-old-games:not(.active),
.wasp-unlimited:not(.active),
.wasp-timed:not(.active),
.wasp-rules:not(.active),
.wasp-yesterday:not(.active),
.wasp-solution:not(.active),
.wasp-wordlist:not(.active),
.wasp-options:not(.active),
.wasp-about:not(.active),
.wasp-saved-words:not(.active),
.wasp-lamer:not(.active),
.wasp-lamer-2:not(.active) {
	display: none;
}

button * {
	pointer-events: none;
}

button:disabled {
	filter: grayscale(100%) brightness(0.9);
}

@media screen and (max-width:640px) {
    :root {
    	--wasp-status-font-size: 0.9rem;
    }
}