@font-face {
  font-family: ConsolaMonoBold;
  src: url(consola-mono_woff/ConsolaMono-Bold.woff);
}


@font-face {
  font-family: Upheaval TT;
  src: url(/play/assets/upheavtt.ttf) format("truetype");
}

:root {
  --primary-color: #f7b629;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;;
}
body {
  height: 100vh;
  color: #faebd7;
  overflow: hidden;
  text-align: center;
  background-color: #231e26;
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
}

h1 {
  font-size: 4rem;
  line-height: 2.4;
}
.btn {
  color: #faebd7;
  cursor: pointer;
  border: 3px solid #faebd7;
  background-color: transparent;
  font-family: Upheaval TT;
  padding: 0.5rem 1rem;
  font-size: 1.5rem;
}

.btn:hover {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn.restart {
    font-size: 1.5rem;
}

#restart.btn {
    font-size: 1rem;
}

#fullscreen.btn {
    font-size: 1rem;
}

#minimize.btn {
    font-size: 1rem;
}

.screen {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  transition: margin 0.5s ease-out;
  background-image: url("/play/assets/paws.png");
  background-repeat: repeat;
  background-color: #0e0123;
}

.screen.up {
  margin-top: -100vh;
}

.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
}

.list li {
  margin: 10px;
}

.stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width:800px;
  margin: 0 auto;
   user-select: none;
  padding: 20px 0;
}

.stats div {
  display: flex;
  align-items: center;
  gap: 20px;
  user-select: none;
}

.stats div span {
  margin-left: 10px;
  color: var(--primary-color);
   user-select: none;
}

.lives {
  display: flex;
  gap: 10px;
  align-items: center;
  user-select: none;
}

.lives .heart {
  width:20px;
  height: 20px;
  user-select: none;
}

.lives .heart.dead {
  opacity: 0.5;
  user-select: none;
}

.board {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 800px; /* Set width to 800px for desktop */
  height: 600px; /* Set height to 600px for desktop */
  flex: 1;
  background-color: #070111;
  border: 3px solid #faebd7;
  overflow: hidden;
  cursor: url("/play/assets/aimu.png") 20 20, auto;
  user-select: none;
  background:url(/play/assets/alleyxy.jpg);
}

/* Media query for devices with a maximum width of 768px (typically mobile devices) */
@media (max-width: 768px) {
  .board {
    width: 100%; /* Make the board full width on mobile */
    height: auto; /* Allow the height to adjust based on content */
  }
}

.options {
  width: 100%;
  max-width:800px;
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
}

#minimize {
  display: none;
}

.rat-head {
 width: 100px; /* Adjust width and height as needed */
 height: 100px;
 position: absolute;
 animation: circle 2s linear forwards;
 pointer-events: visible;
 user-select: none;
}

@keyframes circle {
  100% {
    transform: scale(0)
  }
}

.results {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 20px;
}

.results p {
  font-size: 2rem;
}

.results p span {
  color: var(--primary-color);
  margin-left: 10px;
}

#leaderboard {
   font-size: 18px; 
   text-align: left; /* Or 'center' if preferred */
   background-color: #070111;
   padding: 20px;
   margin-top: 1em;
   border: 3px solid;
   margin-bottom: 1em;
}

.leaderboard-item {
   margin-bottom: 5px; 
}

.leaderboard-rank {
   font-weight: bold;
   margin-right: 20px;
}

.leaderboard-data {
   display: inline-block; /* To put them on the same line */
   margin-right: 30px; 
}

.leaderboard-data.easy {
    color: green;
}

.leaderboard-data.medium {
    color: orange;
}

.leaderboard-data.hard {
    color: red;
}


/* Responsiveness */

@media (max-width: 768px) {
  h1{
    font-size: 2rem;
  }
  .btn {
    font-size: 1rem;
  }
  .stats {
    gap: 20px;
    flex-direction: column;
  }
  .stats div {
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
  }
  .lives {
    margin-bottom: 10px;
  }
  
  .results {
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5em;
    gap: 10px;
    flex-direction: column;
}

   .results p {font-size:1.2rem;}
   
   #leaderboard {
   font-size: 12px;
   text-align: left; /* Or 'center' if preferred */
   background-color: #070111;
   border-radius: 5px;
   padding: 10px;
   margin-top: 1em;
   border: 3px solid;
   margin-bottom: 1em;
} 
  
  .leaderboard-item {
   margin-bottom: 3px; 
}

  
  .leaderboard-rank {
   font-weight: bold;
   margin-right: 5px;
}

  .leaderboard-data {
   display: inline-block; /* To put them on the same line */
   margin-right: 5px;
}
  
}