body{
  margin:0;
  background:#0a0a0a;
  color:#fff;
  font-family:sans-serif;
  text-align:center;
}

#game{
  width:500px;
  max-width:95vw;
  margin:20px auto;
}

.panel{
  border:2px solid #444;
  border-radius:12px;
  padding:12px;
  margin:10px 0;
  background:#1a1a1a;
}

button{
  padding:10px;
  margin:4px;
  background:#222;
  color:#fff;
  border:none;
  border-radius:8px;
  cursor:pointer;
}

button:hover{
  background:#444;
}

button:disabled{
  opacity:0.4;
}

.menu-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}

.item-row{
  display:flex;
  justify-content:space-between;
  border:1px solid #333;
  margin:5px;
  padding:5px;
}

.bar{
  background:#333;
  height:18px;
  border-radius:999px;
  overflow:hidden;
}

.fill{
  height:100%;
  transition:width .2s;
}

.hp{ background:#e74c3c; }
.mp{ background:#3498db; }
.exp{ background:#2ecc71; }

.popup{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:#111;
  padding:15px;
  border:2px solid #666;
  z-index:999;
  min-width:250px;
}

.log{
  height:150px;
  overflow:auto;
}