/* Variable setup */

:root {
	--left-start: 1;
	--level: 1;
	--path-colour: #0077b6;
	--background-colour: #03045e;
	--wall-colour: #03045e;
	--font-colour:  #dddddd;
	--window-width: 940px;
	--window-height: 517px;
	--full-window-width: 948px;
	--full-window-height: 533px;
	--stardard-gear-diameter: 230px;
	--cheese-diameter: 50px;

	--level1-honey-score:  0;
	--level2-honey-score:  0;
	--level3-honey-score:  0;
	--level4-honey-score:  0;
	--level5-honey-score:  0;
	--level6-honey-score:  0;
	--level7-honey-score:  0;
	--level8-honey-score:  0;
}

/* Unsupported browser message */

@supports not (selector(html:has(body))) {
  body:before {
  	z-index: 10000;
  	position: absolute;
  	font-size: 2em;
  	font-family: sans-serif;
    padding-top: 5em;
    padding-left: 6em;
    color: red;
    display: block;
    content: "Your browser doesn't support the `:has()` pseudo-class yet, which means this game will not work.\
    The latest version of Chrome or other Chromium based browsers should work.";
  }
}

/* Variable modification logic */

.game:has(.menu:hover):not(:has(audio:focus)) :not(#GameWindow):not(#Game):not(.menu):not(.menu>*):not(.menu>*>*):not(.menu>*>*>*):not(.menu>*>*>*>*):not(.menu>*>*>*>*>*) {
	display: none;
}

.game:has(.level1Honey:checked) *{
	--level1-honey-score: 1;
}

.game:has(.level2Honey:checked) *{
	--level2-honey-score: 1;
}

.game:has(.level3Honey:checked) *{
	--level3-honey-score: 1;
}

.game:has(.level4Honey:checked) *{
	--level4-honey-score: 1;
}

.game:has(.level5Honey:checked) *{
	--level5-honey-score: 1;
}

.game:has(.level6Honey:checked) *{
	--level6-honey-score: 1;
}

.game:has(.level7Honey:checked) *{
	--level7-honey-score: 1;
}

.game:has(.level8Honey:checked) *{
	--level8-honey-score: 1;
}

.menu:has(audio:focus){
	top: -10000000000000px;
}

#GameWindow:not(:has(.path:hover)) #GameOver {
	visibility: visible;
	opacity:  1;
	z-index: 100;
}

@property --floor {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

.level{
	transition: left 0.4s ease-in, opacity 0.4s ease-in;
	--floor: calc(var(--current-level)/2 - 0.5);
	--mod: calc(var(--current-level) - 2 * var(--floor));
	--animation-progress:  calc(((var(--level) - var(--current-level)) * (var(--level) - (var(--current-level) - 1)) / 2));
	left: calc((var(--mod) * -2 + 1) * var(--animation-progress) * (var(--full-window-width)));
	opacity: calc(1.0 - var(--animation-progress) );
}


/* Level counter display */

.level:before {
	position: absolute;
	bottom: 10px;
	right: 10px;
	z-index: 11;
	font-size: 2rem;
  counter-reset: levelNumber var(--current-level);
  content: 'Level ' counter(levelNumber);
}


/* Honey score display */

.winScreen:before {
	position: absolute;
	bottom: 10px;
	right: 10px;
	z-index: 5;
	font-size: 2rem;
	--total-honey-score:  calc(
		var(--level1-honey-score) + 
		var(--level2-honey-score) + 
		var(--level3-honey-score) + 
		var(--level4-honey-score) + 
		var(--level5-honey-score) + 
		var(--level6-honey-score) + 
		var(--level7-honey-score) + 
		var(--level8-honey-score)
	);
  counter-reset: honeyScore var(--total-honey-score);
  content: 'You collected ' counter(honeyScore) ' Honey';
}

/* General styling */

@font-face {
	font-family: "Steamwreck";
	src: url("Steamwreck-07pd.ttf");
}

* {
	font-family: Steamwreck, sans-serif;
	color: var(--font-colour);
}

svg {
	position: absolute;
	z-index: 1;
	pointer-events: visiblePainted;
}

#GameWindow {
	width: var(--window-width);
	height: var(--window-height);
	overflow: hidden;
}

#Game {
	margin: 0;
	background-color: var(--background-colour);
	height:100%;
	width:100%;
	overflow: : hidden;
}

.levelCheckbox{
	z-index: 10;
	position: absolute;
}

input.levelCheckbox {
	position: absolute;
	right: 35px;
	top: 0px;
	width: 20px;
	visibility: hidden;
}

label.levelCheckbox{
	width: 30px;
	height: 30px;
	background-color: transparent;
}

.levelHoney{
	z-index: 10;
	position: absolute;
}

.levelHoney:has(input:checked) {
	top: -1000px;
	transition: top 0.4s ease-out;
}

input.levelHoney {
	position: absolute;
	right: 35px;
	top: 0px;
	width: 20px;
	visibility: hidden;
}

label.levelHoney{
	width: 30px;
	height: 30px;
	border-radius: 30px;
	padding: 10px;
	background-color: var(--path-colour);
}

.path {
	background-color: var(--path-colour);
	stroke: var(--path-colour);
	fill: var(--path-colour);
}

.wall {
	background-color: var(--wall-colour);
	stroke: var(--wall-colour);
	fill: var(--wall-colour);
	z-index: 10;
}

#GameOver {
	height: var(--window-height);
	width: calc(100% - 100px);
	background-color:#023e8a;
	position: absolute;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.25s ease-in-out;
	font-size: 3rem;
	font-family: sans-serif;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	left: calc(var(--left-start)*100px);
	padding-bottom: 100px;
}

.level, .menu {
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: var(--background-colour);
	z-index: 10;
}

#GameOverArrow {
	transform: scale(0.5) rotate(calc(180deg * var(--left-start)));
}

#GameOverArrow path {
	fill: #FFFFFF;
}

.startingPlatformLeft {
	position: absolute;
	width: 120px;
	height: var(--full-window-height);
	z-index: 10;
}

.startingPlatformRight {
	position: absolute;
	width: 120px;
	right: 0px;
	height: var(--full-window-height);
	z-index: 10;
}

.fullscreen {
	position: absolute;
	width: var(--full-window-width);
	height: var(--full-window-height);
	z-index: 1;
}

/* Animations - definition*/
@keyframes rotating {
  from {
    transform: rotate(0deg) translate(-110.18px,-256.288px);
  }

  to {
    transform: rotate(360deg) translate(-110.18px,-256.288px);
  }
}

@keyframes rotatingHalf {
  from {
    transform: rotate(0deg) translate(-110.18px,-256.288px);
  }

  to {
    transform: rotate(180deg) translate(-110.18px,-256.288px);
  }
}
@keyframes slidingVertical {
  from {
    transform: translateY(0px);
  }

  to {
    transform: translateY(84.7px);
  }
}
@keyframes slidingHorizontal {
  from {
    transform: translateX(0px);
  }

  to {
    transform: translateX(84.7px);
  }
}

/* Animations - application*/
.rotatingRightNormal {
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-name: rotating;
	animation-timing-function: linear;
}
.rotatingLeftNormal {
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
	animation-name: rotating;
	animation-timing-function: linear;
}
.rotatingRightSlow {
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-name: rotatingHalf;
	animation-timing-function: linear;
}
.rotatingLeftSlow {
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
	animation-name: rotatingHalf;
	animation-timing-function: linear;
}
.slidingVerticalNormal {
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-name: slidingVertical;
	animation-timing-function: linear;
}
.slidingVerticalReversed {
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
	animation-name: slidingVertical;
	animation-timing-function: linear;
}
.slidingHorizontalNormal {
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-name: slidingHorizontal;
	animation-timing-function: linear;
}
.slidingHorizontalReversed {
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
	animation-name: slidingHorizontal;
	animation-timing-function: linear;
}


/* Menu */
.menuContainer {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-left: 20px;
	height: 100%;
}

.coverImageTitle {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-left: 20px;
	height: 100%;
	z-index: 99;
	display: none;
}

.playButtonAligner {
	height: 100%;
	width: 50%;
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-left: 20px;
}

.playButtonHorizontalAligner {
	display: flex;
	flex-direction: row;
	align-content: center	;
	justify-content: flex-start;
}

.playText {
	line-height: 50px;
	font-size: 3em;
	padding-left: 40px;
}

.menu {
	top:  0px;
	transition: top 1000000s cubic-bezier(0.0, 100.0, 1.000, -100.0) 0.5s;
}

.audioPlayerContainer {
	transform: scale(1.5);
	overflow: hidden;
	width: 50px;
	height: 50px;
	border-radius: 25px;
}

.startButton {
	width: 100px;
}

#title {
	font-size: 7em;
}

.fullWidthCentred {
	width: 100%;
	text-align: center;
}

/* You Win screen */

#youWin {
	font-size: 7em;
}

.mediumText {
	font-size: 2em;
}

.winScreen {
	position: absolute;
	width: var(--full-window-width);
	height: var(--full-window-height);
}

.theBigCheese {
	width: 300px;
	height:  300px;
}

.menuSVG {
	position: absolute;
	top: 0px;
	z-index: -1;
}

.menu .Gear1 {
	transform-box: fill-box;
	transform: translate(0px, calc(var(--full-window-height) - (var(--stardard-gear-diameter) / 2)));
}

.menu .Gear2 {
	transform-box: fill-box;
	transform: translate(697px, calc(var(--full-window-height) - (var(--stardard-gear-diameter) / 2)));
}

.menu .Gear3 {
	transform-box: fill-box;
	transform: translate(830px, 255px);
}

/* Level 1 */

.level1 {
	--current-level: 1;
}

label.level1Honey {
	position: absolute;
	left: 210px;
	top: 430px;
}

label.level1Checkbox {
	position: absolute;
	left: calc(var(--window-width) - var(--cheese-diameter));
	top: calc(var(--window-height)/2);
}

.level1 .Gear1 {
	transform-box: fill-box;
	transform: translate(100px, 120px);
}

.level1 .Gear2 {
	transform-box: fill-box;
	transform: translate(0px, calc(var(--full-window-height) - var(--stardard-gear-diameter)));
}

.game:has(.level .level1Checkbox:checked) * {
	--level: 2;
	--left-start: 0;
}

/* Level 2 */

.level2 {
	--current-level: 2;
}

label.level2Checkbox {
	position: absolute;
	left: 30px;
	top: calc(var(--window-height) - 50px);
}

.level2 .Gear1 {
	transform-box: fill-box;
	transform: translate(0px, 0px);
}

.game:has(.level .level2Checkbox:checked) * {
	--level: 3;
	--left-start: 1;
}

/* Level 3 */

.level3 {
	--current-level: 3;
}

label.level3Honey {
	position: absolute;
	left: 310px;
	top: 70px;
}

label.level3Checkbox {
	position: absolute;
	left: calc(var(--window-width) - var(--cheese-diameter));
	top: calc(var(--window-height)/2);
}

.level3 .Gear1 {
	transform-box: fill-box;
	transform: translate(125px, 20px);
}

.level3 .RackGear1 {
	transform-box: fill-box;
	transform: translate(380px, -260px) rotate(90deg);
}

.level3 .Gear2 {
	transform-box: fill-box;
	transform: translate(185px, 410px);
}

.level3 .RackGear2 {
	transform-box: fill-box;
	transform: translate(440px, 90px) rotate(90deg);
}

.level3 .Gear3 {
	transform-box: fill-box;
	transform: translate(525px, 20px);
}

.level3 .RackGear3 {
	transform-box: fill-box;
	transform: translate(780px, -260px) rotate(90deg);
}

.game:has(.level .level3Checkbox:checked) * {
	--level: 4;
	--left-start: 0	;
}

/* Level 4 */

.level4 {
	--current-level: 4;
}

label.level4Honey {
	position: absolute;
	left: 299px;
	top: 475px;
}

label.level4Checkbox {
	position: absolute;
	left: 60px;
	top: calc(var(--window-height) - 70px);
}

.level4 .Gear1 {
	transform-box: fill-box;
	transform: translate(50px, calc((var(--full-window-height) - 300px) / 2 ));
}

.level4 .Gear2 {
	transform-box: fill-box;
	transform: translate(173px, 351px);
}

.game:has(.level .level4Checkbox:checked) * {
	--level: 5;
	--left-start: 1;
}

/* Level 5 */

.level5 {
	--current-level: 5;
}

label.level5Honey {
	position: absolute;
	left: 700px;
	top: 370px;
}

label.level5Checkbox {
	position: absolute;
	left: calc(var(--window-width) - var(--cheese-diameter));
	top: calc(var(--window-height)/2);
}

.level5 .Gear1 {
	transform-box: fill-box;
	transform: translate(240px, 20px);
}

.level5 .RackGear1 {
	transform-box: fill-box;
	transform: translate(493px, -260px) rotate(90deg);
}

.level5 .RackGear1Double {
	transform-box: fill-box;
	transform: translate(486px, -260px) rotate(90deg) scale(1, -1);
}

.level5 .Gear2 {
	transform-box: fill-box;
	transform: translate(185px, 408px);
}

.level5 .RackGear2 {
	transform-box: fill-box;
	transform: translate(25px, 382.7px);
}

.level5 .Gear3 {
	transform-box: fill-box;
	transform: translate(510px, 20px);
}

.level5 .RackGear3 {
	transform-box: fill-box;
	transform: translate(350px, 0px);
}

.game:has(.level .level5Checkbox:checked) * {
	--level: 6;
	--left-start: 0	;
}

/* Level 8 */

.level8 {
	--current-level: 6;
}

label.level8Honey {
	position: absolute;
	left: 370px;
	top: 425px;
}

label.level8Checkbox {
	position: absolute;
	left: 50px;
	top: calc((var(--full-window-height) - var(--cheese-diameter)) / 2);
}

.level8 .Gear1 {
	transform-box: fill-box;
	transform: translate(-50px, calc((var(--full-window-height) - var(--stardard-gear-diameter)) / 2 - 7px));
}

.level8 .Gear2 {
	transform-box: fill-box;
	transform: translate(133px, 88px);
}

.level8 .Gear3 {
	transform-box: fill-box;
	transform: translate(280px, 210px);
}

.level8 .Gear4 {
	transform-box: fill-box;
	transform: translate(450px, 120px);
}

.level8 .Gear5 {
	transform-box: fill-box;
	transform: translate(632px, 65px);
}

.game:has(.level .level8Checkbox:checked) * {
	--level: 9;
	--left-start: 1;
}