body, html { 
  margin:0; 
  padding:0; 
  height:100%; 
  font-family:Arial; 
  overflow:hidden; 
}

.hidden { display:none; }

#main-menu {
  background:#0099e6; 
  height:100vh; 
  display:flex; 
  flex-direction:column;
  justify-content:center; 
  align-items:center;
}

#main-menu .logo { 
  width:160px; 
  height:160px; 
  background:black url('Logo.png') no-repeat center/cover; 
  border-radius:50%; 
  border:4px solid white; 
  margin-bottom:40px; 
  text-indent:-9999px; 
}

#main-menu button { 
  background:black; 
  border:3px solid white; 
  color:white; 
  font-size:1.3rem; 
  padding:12px 40px; 
  margin:10px 0; 
  cursor:pointer; 
}

#game-screen { 
  display:none; 
  position:relative; 
  width:100vw; 
  height:100vh; 
  background:green; 
  overflow:hidden; 
}

#character { 
  position:absolute; 
  width:50px; 
  height:50px; 
  background:url('Hahmo.png') no-repeat center/contain; 
  transform-origin:center center; 
}

.collectible { 
  position:absolute; 
  font-size:30px; 
  cursor:pointer; 
}

#muscle-display { 
  position:fixed; 
  bottom:10px; 
  left:50%; 
  transform:translateX(-50%); 
  background:white; 
  border:3px solid black; 
  padding:8px 15px; 
  font-weight:bold; 
  font-size:1.2rem; 
  user-select:none; 
}

#updates-btn { 
  position:fixed; 
  top:10px; 
  right:10px; 
  padding:10px 15px; 
  background:black; 
  color:white; 
  border:3px solid white; 
  cursor:pointer; 
  font-weight:bold; 
}

#updates-menu {
  position:fixed; 
  top:0; 
  left:0; 
  width:100vw; 
  height:100vh; 
  background:white; 
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  padding:20px; 
  box-sizing:border-box; 
  border:3px solid black; 
  z-index:1000;
}

#updates-menu.hidden { display:none; }

#updates-menu h2 { margin-bottom:20px; }

#updates-menu .tabs { 
  display:flex; 
  gap:10px; 
  margin-bottom:20px; 
}

#updates-menu .tab { 
  padding:10px 15px; 
  border:2px solid black; 
  cursor:pointer; 
  background:#eee; 
}

#updates-menu .tab.active { 
  background:#ccc; 
  font-weight:bold; 
}

.tab-content { 
  display:none; 
  flex-direction:column; 
  align-items:center; 
}

.tab-content.active { display:flex; }

.tab-content .currency { 
  border:2px solid black; 
  padding:10px 15px; 
  margin-bottom:20px; 
  font-weight:bold; 
  font-size:1.2rem; 
  align-self:flex-start; 
}

.tab-content .update-button { 
  width:250px; 
  margin-bottom:15px; 
  background:black; 
  color:white; 
  border:3px solid white; 
  font-size:1rem; 
  cursor:pointer; 
}

#close-updates { 
  position:absolute; 
  top:15px; 
  right:15px; 
  font-size:1.5rem; 
  background:transparent; 
  border:none; 
  color:red; 
  cursor:pointer; 
  font-weight:bold; 
  user-select:none; 
}