@media (prefers-color-scheme:light) {
  :root {
    --elementcolor: linear-gradient(#b9e182, #5fcd5d);
    --elementbordercolor: #50b23f;
    --gamebackground: #8bd08d50;
    --gameborder: #5fae31;
    --slotbackground: #d6e7d5;
    --slotborder: #7fac7a;
    --occasionbackground: linear-gradient(#dd4bda, #e3bceb, #dd4bda);
    --occasionborder: #c731b3;
    --gamebuttoncolor: linear-gradient(#f25be5, #c646b1);
		--gamebuttonhovercolor: linear-gradient(#f091e8, #e852cf);
		--gamebuttonbordercolor: #c024a3;
  }
}
@media (prefers-color-scheme:dark) {
  :root {
    --elementcolor: linear-gradient(#639a18, #0d690c);
    --elementbordercolor: #196d0a;
    --gamebackground: #0b420d50;
    --gameborder: #245309;
    --slotbackground: #1c381b;
    --slotborder: #364f33;
    --occasionbackground: linear-gradient(#671d66, #a948bc, #671d66);
    --occasionborder: #65175b;
    --gamebuttoncolor: linear-gradient(#9f1e94, #5f0c51);
		--gamebuttonhovercolor: linear-gradient(#bb43b1, #9c1586);
		--gamebuttonbordercolor: #500843;
  }
}
@media (orientation:landscape) {
	:root {
		--gameheight: 50vh;
    --slotsize: 100px;
    --slotbottom: 20%;
    --imagesize: 5em;
    --sheetspacing: 1em;
	}
  .floating {
		position: fixed;
		margin: 0;
	}
}
@media (orientation:portrait) {
	:root {
		--gameheight: 40vh;
    --slotsize: 20vw;
    --slotbottom: 30%;
    --imagesize: 3em;
    --sheetspacing: 0.25em;
	}
  .floating {
    position: sticky;
    top: 1em;
    margin-bottom: 1em;
		padding: 0.5em 1em;
  }
  .floating div {
    width: 100%;
  }
	.floating p {
		margin: 0 .5em;
	}
  #balance {
    flex-grow: 1;
  }
}
@keyframes occasiongradient {
  0% {
		background-position: 50% 0%;
	}
	50% {
		background-position: 50% 100%;
	}
	100% {
		background-position: 50% 0%;
	}
}
.topline {
  border-top: 2px solid var(--elementbordercolor);
}
#game {
	background: var(--gamebackground);
	border: 2px solid var(--gameborder);
  border-radius: 0.5em;
	color: var(--textcolor);
	font-family: 'BlenderPro', monospace;
  text-align: center;
	height: var(--gameheight);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
	margin: 0 var(--sidemargin);
	position: relative;
	width: auto;
  overflow: hidden;
}
.slotsmain {
  display: flex;
  flex-direction: row;
  margin: 0;
  margin-bottom: var(--slotbottom);
  gap: 1em;
}
.slotsmain div.reel {
	position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--imagesize);
  width: var(--slotsize);
  height: var(--slotsize);
  border: 2px solid var(--slotborder);
  border-radius: 0.5rem;
  background-color: var(--slotbackground);
  overflow: hidden;
}
.icon-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
#justwon {
  display: none;
}
.occasionwinnings {
  display: none;
  height: auto;
  margin: 1em var(--sidemargin);
  padding: 0.25em;
  border: 2px solid var(--occasionborder);
  border-radius: 0.5em;
  background: var(--occasionbackground);
  background-size: 400% 400%;
  animation: occasiongradient 2s ease infinite;
}
.occasionwinnings p {
  margin: 0;
  padding: 0;
  font-size: var(--titlesize2);
  text-align: center;
}
.gamebuttons {
  margin: 1em;
}
.gamebuttons button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 4em;
  width: 8em;
	background-image: var(--gamebuttoncolor);
	border-color: var(--gamebuttonbordercolor);
}
.gamebuttons button:hover {
	background-image: var(--gamebuttonhovercolor);
}
.gamebuttons button:disabled, .gamebuttons button:disabled:hover {
	cursor: default;
	background-image: var(--buttondisabled);
	border-color: var(--buttonborderdisabled);
	box-shadow: 0.25em 0.5em 1em var(--shadowcolor);
}
p.texthalf {
  margin: 0;
  padding: 0;
}
span.texthalf, p.texthalf {
  font-size: 0.75em;
}
.valuesheet {
  display: flex;
  width: fit-content;
  margin: 1em;
  background: var(--elementcolor);
  border: 2px solid var(--elementbordercolor);
  border-radius: 0.25em;
}
.valuesheet div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0.5em var(--sheetspacing);
  border-left: 1px solid var(--elementbordercolor);
  overflow: hidden;
}
.valuesheet div.left {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  border-left: none;
  padding-right: 0.25em;
}
.valuesheet div p {
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
section#explanation {
  margin: 3em 0;
}
.explanationtext {
  margin: 0 var(--sidemargin);
}
.explanationtext h2, .explanationtext p {
  margin: 0.5em 0;
}