@font-face {
	font-family: 'SMB';
	src: local('Super Mario Bros.'),
		 url('fonts/Super Mario Bros.ttf') format('truetype');
	font-style: normal;
 }
 
 body, html {
   margin: 0;
   padding: 0;
   height: 100%;
   overflow: hidden;
 }
 
 #game {
   height: 100%;
   width: 100%;
   position: relative;
   border: 1px solid #ccc;
   overflow: hidden;
 }
 
 #world { 
   margin: 0;
   padding: 0;
   height: 100%;
   width: 100%;
   position: absolute;
   bottom: 0;
   left: 0;
   z-index: 0;
 }
 
 .gauge {
   margin: 0;
   padding: 0;
   height: 50px;
   width: 70px;
   text-align: right;
   font-size: 2em;
   font-weight: bold;
   position: absolute;
   top: 17px;
   right: 52px;
   z-index: 1000;
   font-family: 'SMB';
 }
 
 .gaugeSprite {
   margin: 0;
   padding: 0;
   z-index: 1000;
   position: absolute;
 }
 
 #coinNumber {
   left: 0;
 }
 
 #liveNumber {
   right: 52px;
 }
 
 #coin {
   height: 32px;
   width: 32px;
   background-image: url(mario-objects.png);
   background-position: 0 0;
   top: 15px;
   left: 70px;
 }
 
 #live {
   height: 40px;
   width: 40px;
   background-image: url(mario-sprites.png);
   background-position: 0 -430px;
   top: 12px;
   right: 8px;
 }
 
 .figure {
   margin: 0;
   padding: 0;
   z-index: 99;
   position: absolute;
 }
 
 .matter {
   margin: 0;
   padding: 0;
   z-index: 95;
   position: absolute;
   width: 32px;
   height: 32px;
 }
 
 /* Touch Controls */
 #touch-controls {
   display: none;
   position: absolute;
   bottom: 20px;
   left: 0;
   width: 100%;
   height: 150px;
   z-index: 2000;
   pointer-events: none; /* Let clicks pass through if not on a button */
   user-select: none;
 }
 
 #dpad {
   position: absolute;
   left: 20px;
   bottom: 0;
   width: 150px;
   height: 150px;
 }
 
 #action-btns {
   position: absolute;
   right: 20px;
   bottom: 20px;
   width: 150px;
   height: 60px;
 }
 
 .ctrl-btn {
   position: absolute;
   background: rgba(255, 255, 255, 0.4);
   border: 2px solid rgba(0, 0, 0, 0.5);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
   font-family: Arial, sans-serif;
   font-weight: bold;
   pointer-events: auto; /* Buttons should catch events */
   touch-action: none; /* Prevent default touch actions like scroll/zoom */
 }
 
 .ctrl-btn:active {
   background: rgba(255, 255, 255, 0.7);
 }
 
 #btn-up { top: 0; left: 50px; width: 50px; height: 50px; }
 #btn-left { top: 50px; left: 0; width: 50px; height: 50px; }
 #btn-down { top: 100px; left: 50px; width: 50px; height: 50px; }
 #btn-right { top: 50px; left: 100px; width: 50px; height: 50px; }
 
 #btn-fire { right: 80px; bottom: 0; width: 60px; height: 60px; }
 #btn-jump { right: 0; bottom: 0; width: 60px; height: 60px; }
 
 /* Show only on touch devices */
 @media (hover: none) and (pointer: coarse) {
   #touch-controls {
     display: block;
   }
 }