@media (prefers-color-scheme:light) {
  :root {
    --elementcolor: linear-gradient(#edc29f, #e4893a);
    --elementbordercolor: #b2623f;
    --gamebackground: #e9c9d2ac;
    --gamebackgroundimg: url(/img/dimsum/shops/shop1ext-day.webp);
    --gameborder: #ae3155;
    --starcolor: #941706;
    --gamebuttoncolor: #c65b46;
		--gamebuttonhovercolor: #e86652;
		--gamebuttonbordercolor: #9b2d14;
    --ordercolor: #f2eaf1;
    --orderborder: #c8c4c7;
    --redbackground: linear-gradient(#f28888, #d45555);
    --redborder: #e06666;
    --upgradeTitleBackground: #ffffff60;
    --upgradeTextBackground: #ffffff60;
    --upgradeShopColor: #b43533;
    --upgradeItemsColor: #ac4d1e;
    --upgradeProductionColor: #af7312;
    --upgradeworkerColor: #9f8114;
    --upgradeAutoSendColor: #8d8f22;
    --upgradeIndicatorColor: #497e17;
    --upgradeSaveItemsColor: #107b87;
    --upgradeStartItemsColor: #7d1694;
    --upgradeWeeklyColor: #048170;
    --upgradePriceColor: #9b240f;
  }
}
@media (prefers-color-scheme:dark) {
  :root {
    --elementcolor: linear-gradient(#ca6b28, #7e4115);
    --elementbordercolor: #783c19;
    --gamebackground: #34091084;
    --gamebackgroundimg: url(/img/dimsum/shops/shop1ext-night.webp);
    --gameborder: #691c32;
    --starcolor: #f18c07;
    --gamebuttoncolor: #6d1305;
		--gamebuttonhovercolor: #bb2618;
		--gamebuttonbordercolor: #501a08;
    --ordercolor: #544d53;
    --orderborder: #111010;
    --redbackground: linear-gradient(#b93030, #770b0b);
    --redborder: #541212;
    --upgradeTitleBackground: #00000060;
    --upgradeTextBackground: #00000060;
    --upgradeShopColor: #FF7D7A;
    --upgradeItemsColor: #FD8348;
    --upgradeProductionColor: #f4a527;
    --upgradeworkerColor: #D0A400;
    --upgradeAutoSendColor: #AFB300;
    --upgradeIndicatorColor: #78C231;
    --upgradeSaveItemsColor: #31dee7;
    --upgradeStartItemsColor: #ef91f4;
    --upgradeWeeklyColor: #00c9b1;
    --upgradePriceColor: #e73a00;
  }
}
@media (orientation:landscape) {
	:root {
		--gameheight: 65vh;
    --upgradeWidth: 10em;
    --upgradeHeight: 14em;
    --upgradestattext: 1rem;
	}
  .floating {
		position: fixed;
		margin: 0;
	}
}
@media (orientation:portrait) {
	:root {
		--gameheight: 65vh;
    --upgradeWidth: 5em;
    --upgradeHeight: 10em;
    --upgradestattext: 0.75rem;
	}
  .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;
  }
  #more {
    margin-top: 3em;
  }
  .reviewsbox.desktop {
    display: none;
  }
  .kitchenWindowItem {
    margin: 0 0.5em;
  }
  .kitchenItemAmount {
    position: absolute;
    bottom: 0;
    right: -0.5em;
    padding: 0;
    margin: 0;
    /* background: #ffffff; */
  }
}
#game {
	background: var(--gamebackground);
	border: 2px solid var(--gameborder);
  border-radius: 0.5em;
	color: var(--textcolor);
	font-family: 'BlenderPro', monospace;
	height: var(--gameheight);
  display: flex;
  flex-direction: column;
	margin: 0 var(--sidemargin);
	position: relative;
	/* width: auto; */
  overflow: hidden;
}
#game::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--gamebackgroundimg);
  background-position: center;
  background-size: cover;
  z-index: -1;
}
.reviewsbox {
  background: var(--gamebackground);
	border: 2px solid var(--gameborder);
  border-radius: 0.5em;
  display: flex;
	margin: 0 var(--sidemargin) 1em var(--sidemargin);
	position: relative;
  overflow: hidden;
}
.reviewsbox div {
  width: 50%;
}
.reviews {
  display: block;
  transition: all 0.5s;
  height: 100%;
}
.reviews p {
  width: auto;
  height: inherit;
  line-height: 80%;
  overflow: hidden;
}
span#reviewername {
  font-weight: bold;
}
.fadetoblank {
  opacity: 0;
}
span.texthalf {
  font-size: 0.75em;
}
button:not(.backbutton) {
	background-color: var(--gamebuttoncolor);
  background-image: none;
	border-color: var(--gamebuttonbordercolor);
}
button:hover:not(.backbutton) {
  background-image: none;
	background-color: var(--gamebuttonhovercolor);
}
button:disabled, button:disabled:hover {
	cursor: default;
	background-image: var(--buttondisabled);
	border-color: var(--buttonborderdisabled);
	box-shadow: 0.25em 0.5em 1em var(--shadowcolor);
}
.gamebuttons {
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  margin: 1em 0;
}
.gamebuttons button {
  font-size: 1.25rem;
  height: 5em;
  width: 7em;
  padding: 1em;
  margin: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--gamebuttoncolor);
}
.gamebuttons button:hover {
  background-size: cover;
  background-position: center;
  background-color: var(--gamebuttonhovercolor);
}
button div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.orderlist {
  display: flex;
  flex-direction: row-reverse;
  justify-content: right;
  overflow-x: scroll;
  overflow-y: scroll;
  gap: 1em;
  width: auto;
  min-height: 8.5em;
  margin: 0;
  padding: 0 1em;
  scrollbar-width: none;
}
@keyframes orderIn {
  from { 
    transform: translateX(-100vw);
  }
  to {
    transform: translateX(0);
  }
}
.newestsheet {
  animation: orderIn 1s ease-out;
}
.ordersheet {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 6em;
  min-height: 8em;
  padding: 0.2em;
  background-color: var(--ordercolor);
  border-bottom-left-radius: 0.25em;
  border-bottom-right-radius: 0.25em;
  border: 1px solid var(--orderborder);
  border-top: none;
  z-index: 10;
}
.ordersheet div {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ordersheet * img {
  position: relative;
  display: inline-block;
  top: 0.25em;
  margin: 0;
  width: 1.25em;
  height: 1.25em;
}
#timer {
  position: absolute;
  right: 0.25em;
  top: 0.25em;
}
.stars {
  color: var(--starcolor);
  text-shadow: 1px 1px 1px var(--elementbordercolor);
}
#foodselect {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto;
}
#foodselect p {
  font-size: var(--textsmall);
}
#foodselect * button {
  margin: 0;
  width: 4rem;
  height: 4rem;
  font-size: var(--textsmall);
}
#startoverconfirm {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 101;
}
.popupbackground {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  backdrop-filter: blur(1em);
}
.popup {
  flex-direction: column;
  text-align: center;
}
#kitchenWindowContainer {
  min-height: 2.5em;
  margin: 1em 1em 1em 1em;
  border-top: 1px solid var(--elementbordercolor);
}
#kitchenWindow {
  display: inline-flex;
  flex-wrap: wrap;
}
.kitchenWindowItem {
  position: relative;
  display: flex;
}
.kitchenWindowItem img {
  margin-top: 0.5em;
  height: 1.75em;
  width: 1.75em;
}
p#addedFood {
  display: inline;
  margin: 0;
  color: var(--greentextcolor);
}

#kitchen {
  display: none;
  margin: 1em 1em 0 1em;
  border-top: 1px solid var(--elementbordercolor);
}
#kitchenTools {
  margin: 1em 1em 0 1em;
  width: 100%;
  border: 2px solid var(--gameborder);
  background: var(--gamebackground);
  border-radius: 0.25em;
  padding: 1em;
}
#kitchenTools div {
  position: relative;
  display: flex;
  z-index: 1;
  width: 10em;
  height: 10em;  
  background-size: cover;
  background-position: center;
}
.kitchendivide {
  display: flex;
  flex-wrap: wrap;
}
div#steamObject {
  background-image: url(/img/dimsum/stations/steam/steam-background.webp);
}
div#steamLower {
  z-index: 2;
  height: 7em;
  background-image: url(/img/dimsum/stations/steam/steam-empty.webp);
}
div#wrapObject {
  background-image: url(/img/dimsum/stations/wrap/wrap-background.webp);
  align-items: center;
}
div#wrapRotate {
  z-index: 2;
  height: 5em;
  background-image: url(/img/dimsum/stations/wrap/wrap-01.webp);
}
div#boilObject {
  background-image: url(/img/dimsum/stations/boil/boil-01.webp);
}
div#boilRaise {
  position: absolute;
  z-index: 2;
  height: 10em;
  background: none;
  bottom: 0;
}
div#mixObject {
  background-image: url(/img/dimsum/stations/mix/mix-background.webp);
  align-content: center;
}
div#mixRotate {
  z-index: 2;
  height: 2em;
  background-image: url(/img/dimsum/stations/mix/mix-rotate.webp);
}
div#bakeObject {
  background-image: url(/img/dimsum/stations/bake/bake-01.webp);
}
div#bakeMove {
  position: absolute;
  z-index: 2;
  height: 2.5em;
  background-image: url(/img/dimsum/stations/bake/bake-sheet.webp);
  bottom: 0;
}
div#fryObject {
  background-image: url(/img/dimsum/stations/fryer/fryer-01.webp);
}
div#fryMove {
  z-index: 2;
  height: 5.5em;
  background-image: url(/img/dimsum/stations/fryer/fryer-basket.webp);
}
div#tossObject {
  background-image: url(/img/dimsum/stations/toss/toss-01.webp);
}
div#tossMove {
  position: absolute;
  z-index: 2;
  height: 10em;
  background-image: url(/img/dimsum/stations/toss/toss-wok.webp);
  bottom: 0;
}
div#kneadObject {
  background-image: url(/img/dimsum/stations/knead/knead-background.webp);
}
div#kneadMove {
  z-index: 2;
  height: 5em;
  background-image: url(/img/dimsum/stations/knead/knead-01.webp);
}
#taskList p:not(#tasklabel) {
  font-size: 1em;
  line-height: 0.5em;
}
button.foodselectbutton, button.foodselectbutton:hover {
  background-size: contain;
}
button#recipeselect0 {
  background-image: url(/img/dimsum/dumpling.webp);
}
button#recipeselect1 {
  background-image: url(/img/dimsum/baozi.webp);
}
button#recipeselect2 {
  background-image: url(/img/dimsum/cheungfun.webp);
}
button#recipeselect3 {
  background-image: url(/img/dimsum/hagao.webp);
}
button#recipeselect4 {
  background-image: url(/img/dimsum/siumai.webp);
}
button#recipeselect5 {
  background-image: url(/img/dimsum/eggtart.webp);
}
button#recipeselect6 {
  background-image: url(/img/dimsum/greenbeans.webp);
}
button#recipeselect7 {
  background-image: url(/img/dimsum/soupdumpling.webp);
}
#mainGame {
  display: none;
  position: relative;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}
#newDay {
  display: block;
  height: 100%;
  margin: 2em;
}
#newDayText {
  font-size: var(--titlesize2);
}
#mernchelinStar {
  display: none;
}
#sendButton {
  position: absolute;
  right: 0;
  bottom: 0;
}
#more {
  position: relative;
}
.copyright {
  position: absolute;
  bottom: 0;
  left: 0;
}
#upgradeOptions {
  display: none;
}
.upgradeCard {
  position: relative;
  width: var(--upgradeWidth);
  height: var(--upgradeHeight);
  background: var(--elementcolor);
  background-position: center;
  background-size: cover;
  border: 2px solid;
  border-radius: 0.25em;
  cursor: pointer;
}
.upgradeTitle {
  background-color: var(--upgradeTitleBackground);
  backdrop-filter: blur(0.5em);
}
.upgradeCard h2 {
  font-size: 1em;
  text-align: center;
  margin: 0;
  padding: 0.25em 0;
}
.upgradeStats {
  position: absolute;
  bottom: 0;
  width: inherit;
  background-color: var(--upgradeTextBackground);
  backdrop-filter: blur(0.5em);
  padding: 0.25em 0;
}
.upgradeCard p {
  font-size: var(--upgradestattext);
  margin: 0 0.25em;
}
.upgradeCost {
  text-align: center;
}
.upgradeWarn {
  position: absolute;
  top: -0.5em;
  right: -0.5em;
  background: var(--redbackground);
  padding: 0em 0.5em 0.1em;
  border: 2px solid var(--redborder);;
  border-radius: 0.75em;
  opacity: 0;
  white-space: nowrap;
  transition: 0.3s;
}
#newDay {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.newDayTextBox {
  background: linear-gradient(90deg, var(--gamebackground) 75%, #00000000);
  border-left: 2px solid var(--gameborder);
  margin: 0 0 1em 0;
}
button.smallButton {
  /* width: 2em;
  height: 2em; */
  width: unset;
  padding: 0.25em;
}
button.smallButton:hover {
  /* width: 2em;
  height: 2em; */
  width: unset;
  padding: 0.25em;
}
button.smallButton svg {
  width: 1.25em;
  height: 1.25em;
}
#instructionsEl {
  display: none;
}